/* VCP shared primitives. Exports to window at the bottom. */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ---------------- Icons (Lucide, 1.6 stroke) ---------------- */
const ICONS = {
layers: '',
trendingUp: '',
columns: '',
users: '',
sliders: '',
chevronR: '',
chevronD: '',
chevronL: '',
search: '',
plus: '',
x: '',
pencil: '',
download: '',
check: '',
alert: '',
arrowUp: '',
arrowDown: '',
sun: '',
moon: '',
building: '',
folder: '',
shield: '',
barChart: '',
link: '',
mail: '',
phone: '',
filter: '',
arrowLeft: '',
fileText: '',
briefcase: '',
clock: '',
list: '',
minus: '',
upload: '',
externalLink: '',
network: '',
maximize: '',
logout: '',
grip: '',
help: '',
refresh: '',
gauge: '',
trash: '',
microsoft: '',
globe: '',
flag: '',
book: '',
target: '',
calendar: '',
euro: '',
star: '',
trendingDown: '',
};
function Icon({ name, size = 16, color, style, strokeWidth = 1.6, className }) {
return ;
}
/* ---------------- Buttons ---------------- */
function Btn({ children, variant = "primary", icon, size = "md", onClick, disabled, style, title }) {
const base = {
display: "inline-flex", alignItems: "center", gap: 7, borderRadius: 8,
fontWeight: 600, fontSize: size === "sm" ? 12 : 13, letterSpacing: "0.005em",
padding: size === "sm" ? "5px 10px" : "8px 14px", border: "1px solid transparent",
transition: "all 150ms ease", whiteSpace: "nowrap",
opacity: disabled ? 0.45 : 1, pointerEvents: disabled ? "none" : "auto",
};
const variants = {
primary: { background: "var(--accent)", color: "var(--accent-ink)", borderColor: "var(--accent)" },
ghost: { background: "var(--surface-card)", color: "var(--ink)", borderColor: "var(--line)" },
subtle: { background: "transparent", color: "var(--ink-muted)", borderColor: "transparent" },
danger: { background: "var(--danger-soft)", color: "var(--danger)", borderColor: "transparent" },
};
return ;
}
function IconBtn({ name, onClick, title, active, size = 16, style }) {
return ;
}
/* ---------------- Badges & scores ---------------- */
const BAND_BG = { green: "var(--band-green-soft)", teal: "var(--band-teal-soft)", yellow: "var(--band-yellow-soft)", red: "var(--band-red-soft)" };
const BAND_FG = { green: "var(--band-green)", teal: "var(--band-teal)", yellow: "var(--band-yellow)", red: "var(--band-red)" };
function ScoreBadge({ score, size = "md" }) {
if (score == null) return —;
const band = VCP.scoreBand(score);
return {score.toFixed(1)};
}
function Badge({ children, variant = "neutral", style }) {
const variants = {
neutral: { background: "var(--surface-deep)", color: "var(--ink-muted)" },
accent: { background: "var(--accent-soft)", color: "var(--accent)" },
positive: { background: "var(--positive-soft)", color: "var(--positive)" },
warn: { background: "var(--warn-soft)", color: "var(--warn)" },
danger: { background: "var(--danger-soft)", color: "var(--danger)" },
};
return {children};
}
function TrendTag({ trend, delta, showLabel }) {
const map = {
up: { icon: "arrowUp", color: "var(--positive)" },
down: { icon: "arrowDown", color: "var(--danger)" },
stable: { icon: "minus", color: "var(--ink-faint)" },
};
const m = map[trend] || map.stable;
return
{delta != null && {(delta >= 0 ? "+" : "") + delta.toFixed(1)}}
{showLabel && {trend}}
;
}
const PRIORITY_VARIANT = { critical: "danger", high: "warn", medium: "accent", low: "neutral" };
const PROGRESS_VARIANT = { "completed": "positive", "started": "accent", "planning": "warn", "not-started": "neutral" };
/* ---------------- Avatar ---------------- */
function Avatar({ name, size = 28, color }) {
const initials = (name || "?").split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
return {initials};
}
function CompanyMark({ company, size = 26 }) {
return {company.short};
}
/* ---------------- Section header ---------------- */
function SectionHeader({ eyebrow, title, right, sub }) {
return
{eyebrow &&
{eyebrow}
}
{title}
{sub &&
{sub}
}
{right &&
{right}
}
;
}
/* ---------------- Card ---------------- */
function Card({ children, style, pad = 18, onClick, hover }) {
const [h, setH] = useState(false);
return setH(true)} onMouseLeave={() => setH(false)}
style={Object.assign({
background: "var(--surface-card)", border: "1px solid var(--line)", borderRadius: "var(--radius)",
padding: pad, boxShadow: "var(--shadow-card)", transition: "all 150ms ease",
cursor: onClick ? "pointer" : "default",
borderColor: hover && h ? "var(--accent)" : "var(--line)",
}, style)}>{children}
;
}
/* ---------------- KPI strip ---------------- */
function KPIStrip({ items, columns }) {
return
{items.map((it, i) =>
{it.icon && }{it.label}
{it.value}
{it.sub && {it.sub}}
{it.delta && {it.delta}}
)}
{columns.map(c => {
const active = sortCtl && sortCtl.sort && sortCtl.sort.key === c.key;
return | c.sortable !== false && sortCtl && sortCtl.toggle(c.key)}
style={{
textAlign: c.align || "left", padding: dense ? "8px 12px" : "10px 14px",
position: "sticky", top: 0, background: "var(--surface-deep)", zIndex: 1,
fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em",
color: active ? "var(--accent)" : "var(--ink-soft)", whiteSpace: "nowrap",
cursor: c.sortable !== false && sortCtl ? "pointer" : "default", userSelect: "none",
borderBottom: "1px solid var(--line)", width: c.width,
}}>
{c.label}
{active && }
| ;
})}
{rows.map((r, i) => |
)}
{footRow}
{rows.length === 0 && | No rows match the current filters. |
}
;
}
function Row({ r, columns, onRowClick, rowStyle, dense }) {
const [h, setH] = useState(false);
return onRowClick(r) : undefined}
onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
style={Object.assign({ cursor: onRowClick ? "pointer" : "default", background: h && onRowClick ? "var(--surface)" : "transparent", transition: "background 120ms ease" }, rowStyle ? rowStyle(r) : null)}>
{columns.map(c => | {c.render ? c.render(r) : r[c.key]} | )}
;
}
/* ---------------- Tabs ---------------- */
function Tabs({ tabs, active, onChange, style }) {
return
{tabs.map(t => {
const on = active === t.key;
return ;
})}
;
}
/* ---------------- Inputs ---------------- */
function SearchInput({ value, onChange, placeholder, width }) {
return
onChange(e.target.value)} placeholder={placeholder || "Search"}
style={{ border: "none", outline: "none", background: "transparent", width: "100%", fontSize: 13 }} />
{value && }
;
}
function Select({ value, onChange, options, width, placeholder }) {
return ;
}
function Field({ label, children }) {
return ;
}
function TextInput(props) {
return ;
}
/* ---------------- Drawer ---------------- */
function Drawer({ open, onClose, title, eyebrow, children, width = 460, footer }) {
useEffect(() => {
const h = e => e.key === "Escape" && onClose();
if (open) window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [open, onClose]);
if (!open) return null;
return
{eyebrow &&
{eyebrow}
}
{title}
{children}
{footer &&
{footer}
}
;
}
/* ---------------- Save indicator ---------------- */
function SaveIndicator({ state }) {
if (!state) return null;
return
{state === "saving" ? : }
{state === "saving" ? "Saving" : "Saved"}
;
}
function useSaveFlash() {
const [state, setState] = useState(null);
const flash = useCallback(() => {
setState("saving");
setTimeout(() => setState("saved"), 350);
setTimeout(() => setState(null), 1600);
}, []);
return [state, flash];
}
/* ---------------- Empty state ---------------- */
function EmptyState({ icon, title, sub, action }) {
return
{icon &&
}
{title}
{sub &&
{sub}
}
{action &&
{action}
}
setOpen(o => !o)}>{trigger(open)}
{open &&
{typeof children === "function" ? children(() => setOpen(false)) : children}
}
;
}
Object.assign(window, {
Icon, Btn, IconBtn, ScoreBadge, Badge, TrendTag, Avatar, CompanyMark,
SectionHeader, Card, KPIStrip, useSort, Table, Tabs, SearchInput, Select, Field, TextInput,
Drawer, SaveIndicator, useSaveFlash, EmptyState, Dropdown,
BAND_BG, BAND_FG, PRIORITY_VARIANT, PROGRESS_VARIANT,
useState, useEffect, useRef, useMemo, useCallback,
});