/* ============================================================
FacilityOS — UI Primitives & Charts
============================================================ */
/* ---------- tone helpers ---------- */
function tone(token) { return `var(${token})`; }
function tint(token, pct) { return `color-mix(in oklch, var(${token}) ${pct}%, var(--surface))`; }
/* ---------- Card ---------- */
function Card({ children, style, className = "", pad = true, onClick, hover }) {
return (
{ e.currentTarget.style.boxShadow = "var(--shadow-md)"; e.currentTarget.style.borderColor = "var(--border-strong)"; } : undefined}
onMouseLeave={hover ? (e) => { e.currentTarget.style.boxShadow = "var(--shadow-sm)"; e.currentTarget.style.borderColor = "var(--border)"; } : undefined}
>
{children}
);
}
/* ---------- Badge (status) ---------- */
function StatusBadge({ status }) {
const s = window.DB.STATUS[status] || { label: status, token: "--c-low" };
return (
{s.label}
);
}
/* ---------- Priority pill ---------- */
function PriorityPill({ priority, dot = false }) {
const p = window.DB.PRIORITY[priority] || { label: priority, token: "--c-low" };
if (dot) {
return (
{p.label}
);
}
return (
{p.label}
);
}
/* ---------- Avatar ---------- */
function Avatar({ id, size = 30, ring }) {
const t = window.DB.techById(id) || { initials: "?", hue: 250, name: "" };
return (
{t.initials}
);
}
function AvatarStack({ ids, size = 28 }) {
return (
{ids.map((id, i) => (
))}
);
}
function AssigneeCell({ id }) {
const t = window.DB.techById(id);
if (!t) return Unassigned;
return (
{t.name}
);
}
/* ---------- Button ---------- */
function Button({ children, variant = "default", size = "md", icon, iconRight, onClick, style, title, active }) {
const sizes = { sm: { h: 32, px: 11, fs: 13 }, md: { h: 38, px: 14, fs: 13.5 }, lg: { h: 44, px: 18, fs: 14.5 } };
const z = sizes[size];
const variants = {
primary: { background: "var(--accent)", color: "var(--accent-fg)", border: "1px solid transparent", boxShadow: "var(--shadow-xs)" },
default: { background: "var(--surface)", color: "var(--text)", border: "1px solid var(--border-strong)" },
ghost: { background: active ? "var(--surface-2)" : "transparent", color: "var(--text-muted)", border: "1px solid transparent" },
soft: { background: "var(--surface-2)", color: "var(--text)", border: "1px solid var(--border)" },
danger: { background: tint("--c-critical", 14), color: "var(--c-critical)", border: `1px solid ${tint("--c-critical", 30)}` },
};
const [h, setH] = useState(false);
return (
);
}
function IconButton({ icon, onClick, title, size = 38, active, badge }) {
const [h, setH] = useState(false);
return (
);
}
/* ---------- Segmented control ---------- */
function Segmented({ options, value, onChange, counts }) {
return (
{options.map((o) => {
const key = typeof o === "string" ? o : o.key;
const label = typeof o === "string" ? o : o.label;
const on = value === key;
return (
);
})}
);
}
/* ---------- KPI card ---------- */
function KpiCard({ icon, label, value, suffix, delta, deltaGood, sub, token = "--accent", spark }) {
const up = delta != null && delta >= 0;
const good = deltaGood != null ? deltaGood : up;
return (
{delta != null && (
{Math.abs(delta)}%
)}
{value}
{suffix && {suffix}}
{label}
{sub &&
{sub}
}
{spark && }
);
}
/* ---------- Sparkline ---------- */
function Sparkline({ data, token = "--accent", h = 28 }) {
const w = 120, max = Math.max(...data), min = Math.min(...data);
const pts = data.map((d, i) => [ (i / (data.length - 1)) * w, h - ((d - min) / (max - min || 1)) * (h - 4) - 2 ]);
const path = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
const area = path + ` L${w} ${h} L0 ${h} Z`;
const gid = "sp" + Math.random().toString(36).slice(2, 7);
return (
);
}
/* ---------- Section header ---------- */
function SectionHead({ title, sub, action }) {
return (
);
}
window.UI = { Card, StatusBadge, PriorityPill, Avatar, AvatarStack, AssigneeCell, Button, IconButton, Segmented, KpiCard, Sparkline, SectionHead, tone, tint };