// Small shared primitives: icons, badges, sparklines, avatars
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Line icons — simple stroke icons built from SVG paths
function Icon({ name, size = 16, stroke = 1.5 }) {
const props = {
width: size, height: size, viewBox: "0 0 24 24",
fill: "none", stroke: "currentColor", strokeWidth: stroke,
strokeLinecap: "round", strokeLinejoin: "round"
};
const paths = {
home: <>,
calendar: <>,
users: <>,
coin: <>,
shield: <>,
search: <>,
bell: <>,
sparkle: <>,
filter: <>,
plus: <>,
arrowRight: <>,
chevronDown:<>,
chevronRight:<>,
check: <>,
x: <>,
alert: <>,
lock: <>,
eye: <>,
more: <>,
command: <>,
clock: <>,
link: <>,
download: <>,
mic: <>,
settings: <>,
trend: <>,
wand: <>,
};
return ;
}
function Badge({ tone="default", children, dot=false }) {
return (
{dot && }
{children}
);
}
function AvatarInitials({ name, tone="ink", size }) {
const initials = name.split(/\s+/).slice(0,2).map(p => p[0]).join("").toUpperCase();
return {initials}
;
}
function Person({ name, meta, tone="ink" }) {
return (
);
}
function Sparkline({ points, color="var(--ink)", fill=null, height=44 }) {
const width = 200;
const { path } = spark(points, { width, height });
const filledPath = fill ? path + ` L${width},${height} L0,${height} Z` : null;
return (
);
}
function Bars({ values, highlightIdx=-1, height=60 }) {
const max = Math.max(...values);
return (
{values.map((v, i) => (
))}
);
}
function Ring({ pct = 1, size = 72, stroke = 6, color = "var(--sage)", track = "var(--line)", label }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const offset = c * (1 - pct);
return (
{label != null &&
{label}
}
);
}
// Tier — Gartner-aligned agent autonomy tiers. L1 Shadow, L2 Suggest, L3 Act w/ approval, L4 Autonomous-with-limits.
function TierBadge({ tier = "L2", size = "sm" }) {
const def = {
L1: { label: "L1 Shadow", tone: "ink" },
L2: { label: "L2 Suggest", tone: "ai" },
L3: { label: "L3 Act + approve", tone: "warn" },
L4: { label: "L4 Autonomous", tone: "ok" },
}[tier] || { label: tier, tone: "ink" };
return {def.label};
}
function ConfidencePill({ value = 0.9, size = "sm" }) {
const pct = Math.round(value * 100);
const tone = pct >= 95 ? "ok" : pct >= 80 ? "warn" : "block";
return (
{pct}%
);
}
function AIChip({ children, onClick, tier, confidence }) {
return (
);
}
// Gate — small inline marker showing whether an entity clears a compliance checkpoint.
// Used throughout lists/tables/shifts so users can see gate state at a glance.
function Gate({ tone = "ok", title }) {
return (
);
}
function GateInline({ tone = "ok", label }) {
return (
{label}
);
}
function Chain({ steps }) {
return (
{steps.map((s, i) => (
{s}
{i < steps.length - 1 && →}
))}
);
}
// Modal — backdrop + centred card + Esc-to-close.
function Modal({ open, onClose, title, children, footer, width = 560 }) {
React.useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()} role="dialog" aria-modal="true">
{children}
{footer &&
{footer}
}
);
}
// Drawer — right-side slide-in used for shift / employee / plan detail.
function Drawer({ open, onClose, title, subtitle, children, footer, width = 420 }) {
React.useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()} role="dialog" aria-modal="true">
{title}
{subtitle &&
{subtitle}
}
{children}
{footer &&
{footer}
}
);
}
// Toast stack — fed by state.toasts.
function ToastStack({ toasts, onDismiss }) {
return (
{toasts.map(t => (
{t.text}
))}
setOpen(o => !o)}>{trigger}
{open && (
e.stopPropagation()}>
{typeof children === "function" ? children(close) : children}
)}
);
}
function DropdownItem({ icon, label, onClick, tone }) {
return (
{icon && }
{label}
);
}
// TextInput — labeled input used in forms.
function TextInput({ label, value, onChange, placeholder, type = "text", autoFocus, name, id }) {
return (
);
}
// SearchInput — icon + input with optional clear.
function SearchInput({ placeholder = "Search", value, onChange, kbd, onFocus }) {
return (
{ const inp = e.currentTarget.querySelector("input"); inp && inp.focus(); }}>
onChange(e.target.value)}
onFocus={onFocus}
/>
{value ? (
) : (kbd ? {kbd} : null)}
);
}
Object.assign(window, {
Icon, Badge, AvatarInitials, Person, Sparkline, Bars, Ring, AIChip, Chain, Gate, GateInline,
TierBadge, ConfidencePill,
Modal, Drawer, ToastStack, Dropdown, DropdownItem, TextInput, SearchInput,
});