const { useEffect, useRef, useState } = React;
/* ---------- Portal — escapes transformed ancestors so fixed overlays anchor to the viewport ---------- */
const Portal = ({ children }) => {
const elRef = useRef(null);
if (!elRef.current) elRef.current = document.createElement('div');
useEffect(() => {
const el = elRef.current;
document.body.appendChild(el);
return () => { document.body.removeChild(el); };
}, []);
return ReactDOM.createPortal(children, elRef.current);
};
/* ---------- Icon (lucide bridge) ---------- */
const Icon = ({ name, className, onClick }) => {
const spanRef = useRef(null);
useEffect(() => {
if (spanRef.current && window.lucide) {
spanRef.current.innerHTML = ``;
try { window.lucide.createIcons(); } catch (err) {}
}
}, [name, className]);
return (
);
};
/* ---------- Badge ---------- */
const Badge = ({ children, variant = 'default', className = '' }) => {
const variants = {
default: "bg-slate-900 text-slate-50",
secondary: "bg-slate-100 text-slate-700 border border-slate-200",
outline: "text-slate-600 border border-slate-200 bg-white shadow-sm",
gold: "bg-brand-50 text-brand-700 border border-brand-200",
destructive: "bg-red-50 text-red-700 border border-red-200",
success: "bg-emerald-50 text-emerald-700 border border-emerald-200",
warning: "bg-amber-50 text-amber-700 border border-amber-200"
};
return (
{children}
);
};
/* ---------- Section kicker — uppercase tracked label with gold tick ---------- */
const Kicker = ({ children, className = '' }) => (
{children}
);
/* ---------- Brandmark ---------- */
const Brandmark = ({ size = 38 }) => (
);
/* ---------- Status dot (pulsing) ---------- */
const LiveDot = ({ tone = 'emerald' }) => {
const map = { emerald: 'bg-emerald-500', gold: 'bg-brand-500', red: 'bg-red-500' };
return (
);
};
/* ---------- Animated count-up number ---------- */
const CountUp = ({ value, decimals = 0, duration = 1100, prefix = '', suffix = '' }) => {
const [display, setDisplay] = useState(0);
const raf = useRef(null);
useEffect(() => {
const start = performance.now();
const from = 0;
const ease = (t) => 1 - Math.pow(1 - t, 3);
const tick = (now) => {
const p = Math.min(1, (now - start) / duration);
setDisplay(from + (value - from) * ease(p));
if (p < 1) raf.current = requestAnimationFrame(tick);
};
raf.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf.current);
}, [value, duration]);
const formatted = Number(display).toLocaleString('en-US', {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
});
return {prefix}{formatted}{suffix};
};
/* ---------- Delta chip ---------- */
const Delta = ({ value, tone = 'pos' }) => {
const up = value >= 0;
const good = tone === 'pos' ? up : !up;
return (
{up ? '+' : ''}{value}%
);
};
/* ---------- Sparkline — fluid width, never collides with the value it sits beside ---------- */
const Sparkline = ({ data, height = 32, tone = '#b9842a' }) => {
const W = 120, H = height;
const min = Math.min(...data), max = Math.max(...data);
const span = max - min || 1;
const pts = data.map((d, i) => [
(i / (data.length - 1)) * W,
H - 3 - ((d - min) / span) * (H - 6)
]);
const line = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
const area = `${line} L${W} ${H} L0 ${H} Z`;
const id = 'sp' + Math.random().toString(36).slice(2, 7);
return (
);
};
/* ---------- Donut / ring chart ---------- */
const Donut = ({ segments, size = 168, stroke = 20 }) => {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const total = segments.reduce((s, x) => s + x.value, 0);
let offset = 0;
return (
);
};
/* ---------- Trend chart (area + line, dual series) ---------- */
const TrendChart = ({ labels, primary, secondary, height = 200 }) => {
const W = 640, H = height, padX = 16, padY = 22;
const max = Math.max(...primary, ...secondary) * 1.12;
const x = (i) => padX + (i / (labels.length - 1)) * (W - padX * 2);
const y = (v) => H - padY - (v / max) * (H - padY * 2);
const toPath = (arr) => arr.map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(' ');
const areaPath = `${toPath(primary)} L${x(primary.length - 1)} ${H - padY} L${x(0)} ${H - padY} Z`;
return (
);
};
/* ---------- Horizontal bar meter ---------- */
const BarMeter = ({ value, max = 100, tone = 'gold' }) => {
const map = { gold: 'bg-brand-500', risk: 'bg-red-500', warn: 'bg-amber-500', muted: 'bg-slate-300', ink: 'bg-slate-900' };
return (
);
};
/* ---------- Vertical edge connector ---------- */
const VerticalEdge = ({ height = 'h-6' }) => (
);