/* ============================================================
Shared UI primitives — exported to window for all pages.
Built on the Molly Maid design system tokens.
============================================================ */
const { useState, useRef, useEffect, useLayoutEffect } = React;
/* ---------- Info tooltip: a small "i" that explains a metric ----------
Keyboard + hover + tap accessible. Plain-language help everywhere
so the dashboard reads the same for a 30- or 70-year-old. */
function InfoDot({ text, label }) {
const [open, setOpen] = useState(false);
const [pos, setPos] = useState(null);
const ref = useRef(null);
const btnRef = useRef(null);
useEffect(() => {
function onDoc(e) {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, []);
// Position the tooltip with fixed coordinates so it escapes any card's
// overflow:hidden and stays fully on-screen at every size. Flips below
// the dot when there isn't room above.
useLayoutEffect(() => {
if (!open || !btnRef.current) return;
function place() {
const r = btnRef.current.getBoundingClientRect();
const vw = window.innerWidth;
const below = r.top < 170;
const cx = Math.max(160, Math.min(vw - 160, r.left + r.width / 2));
setPos({ left: cx, top: below ? r.bottom + 9 : r.top - 9, below });
}
place();
window.addEventListener("scroll", place, true);
window.addEventListener("resize", place);
return () => {
window.removeEventListener("scroll", place, true);
window.removeEventListener("resize", place);
};
}, [open]);
return (
setOpen(true)} onMouseLeave={() => setOpen(false)}>
{open && pos &&
{text}
}
);
}
/* ---------- Card shell ---------- */
function Card({ title, eyebrow, sub, info, right, children, className, pad = true, style }) {
return (
{(title || eyebrow || right) &&
{eyebrow &&
{eyebrow}
}
{title &&
{title}{info && }
}
{sub &&
{sub}
}
{right}
}
}
{children}
);
}
/* ---------- Segmented control (metric switch, etc.) ---------- */
function Segmented({ options, value, onChange, size }) {
return (
{options.map((o) =>
)}
);
}
/* ---------- FBC multi-select filter ---------- */
function FbcFilter({ fbcs, selected, onChange, disabled, note }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
function onDoc(e) {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, []);
const all = selected.length === 0 || selected.length === fbcs.length;
function toggle(id) {
let next;
if (selected.indexOf(id) >= 0) next = selected.filter((x) => x !== id);else
next = selected.concat(id);
if (next.length === fbcs.length) next = [];
onChange(next);
}
const label = all ? "All FBCs (whole system)" :
selected.length === 1 ? fbcs.find((f) => f.id === selected[0]).name :
selected.length + " FBCs selected";
return (
{note &&
{note}}
{open && !disabled &&
{fbcs.map((f) => {
const on = !all && selected.indexOf(f.id) >= 0;
return (
);
})}
}
);
}
/* ---------- KPI stat block ---------- */
function Stat({ label, value, delta, deltaTone, sub, info }) {
return (
{label}{info && }
{value}
{(delta || sub) &&
{delta && {delta}}
{sub && {sub}}
}
);
}
/* ---------- Progress bar with target marker ---------- */
function Progress({ value, max, tone = "info", marker, markerLabel, height = 10 }) {
const pct = Math.max(0, Math.min(100, value / max * 100));
return (
{marker != null &&
{markerLabel && {markerLabel}}
}
);
}
/* ---------- Status pill ---------- */
function Pill({ tone = "neutral", children, soft }) {
return {children};
}
/* ---------- A clearly-marked placeholder for data we don't have yet ---------- */
function Placeholder({ children }) {
return (
{children}
);
}
/* ---------- tiny FBC dot+name tag ---------- */
function FbcTag({ id }) {
const f = MM.fbcs.find((x) => x.id === id);
if (!f) return null;
return {f.name};
}
Object.assign(window, { InfoDot, Card, Segmented, FbcFilter, Stat, Progress, Pill, Placeholder, FbcTag });