/* Cockpit primitives — composable visual atoms that read as a real product surface.
Each works on both paper (light) and dark surfaces. */
const { useEffect, useRef, useState } = React;
/* ---------- useInView ---------- */
function useInView(opts = {}) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
if (!ref.current || seen) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
}, { threshold: opts.threshold ?? 0.2, rootMargin: opts.rootMargin ?? "0px 0px -10% 0px" });
io.observe(ref.current);
return () => io.disconnect();
}, []);
return [ref, seen];
}
/* ---------- CountUp (tick-up on view) ---------- */
function CountUp({ to, duration = 1100, prefix = "", suffix = "", decimals = 0, format = "comma" }) {
const [ref, seen] = useInView();
const [v, setV] = useState(0);
useEffect(() => {
if (!seen) return;
const start = performance.now();
let raf;
const step = (t) => {
const k = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - k, 3);
setV(to * eased);
if (k < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [seen, to, duration]);
const num = decimals ? v.toFixed(decimals) : Math.round(v);
const formatted = format === "comma" ? Number(num).toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) : num;
return {prefix}{formatted}{suffix};
}
/* ---------- Sparkline ---------- */
function Sparkline({ points, color = "currentColor", width = 200, height = 56, area = true, fill = "none", strokeWidth = 1.4 }) {
const [ref, seen] = useInView();
const pad = 2;
const xs = points.map((_, i) => pad + (i * (width - pad * 2)) / (points.length - 1));
const min = Math.min(...points), max = Math.max(...points);
const ys = points.map(p => height - pad - ((p - min) / Math.max(0.001, (max - min))) * (height - pad * 2));
const d = xs.map((x, i) => `${i ? "L" : "M"}${x.toFixed(2)},${ys[i].toFixed(2)}`).join(" ");
const areaD = area ? `${d} L ${xs[xs.length - 1]},${height} L ${xs[0]},${height} Z` : null;
const len = Math.round(width * 1.4);
return (
);
}
/* ---------- Bars (vertical) ---------- */
function Bars({ values, height = 40, color = "currentColor", lastColor }) {
const [ref, seen] = useInView();
const max = Math.max(...values);
return (
{values.map((v, i) => {
const h = (v / max) * 100;
const c = (i === values.length - 1 && lastColor) ? lastColor : color;
return (
);
})}
{title && (
{accent && }
{title}
{meta}
)}
{headerExtra}
{children}
{label}
{delta && (
{deltaTone === "up" ? "▲" : deltaTone === "down" ? "▼" : "─"} {delta}
)}
);
}
/* ---------- FunnelRow ---------- */
function FunnelRow({ label, value, pct, color, max, dark = false, delay = 0 }) {
const [ref, seen] = useInView();
return (
{label}
{pct.toFixed(1)}%
{seen ? value.toLocaleString("en-US") : "0"}
);
}
/* ---------- StatusBadge ---------- */
function StatusBadge({ status, dark = false }) {
const map = {
live: { color: dark ? "var(--growth-dk)" : "var(--growth)", label: "live" },
syncing: { color: dark ? "var(--growth-dk)" : "var(--growth)", label: "syncing" },
planned: { color: dark ? "var(--ink-text-low)" : "var(--ink-low)", label: "planned" },
pending: { color: dark ? "var(--revenue-dk)" : "var(--revenue)", label: "pending" },
stale: { color: dark ? "var(--support-dk)" : "var(--support)", label: "stale" },
};
const s = map[status] || map.live;
return (
{s.label}
);
}
window.useInView = useInView;
window.CountUp = CountUp;
window.Sparkline = Sparkline;
window.Bars = Bars;
window.Panel = Panel;
window.MetricCell = MetricCell;
window.FunnelRow = FunnelRow;
window.StatusBadge = StatusBadge;