// Reusable primitives — money formatting, deltas, sparklines, mini charts, icons
const { useState, useEffect, useRef, useMemo, useLayoutEffect } = React;
// ── Format helpers ──────────────────────────────────────────────
function fmtGBP(v, decimals){
if (v == null) return "—";
const abs = Math.abs(v);
let d = decimals;
if (d == null) d = abs >= 1 ? 2 : abs >= 0.01 ? 4 : 6;
const sign = v < 0 ? "-" : "";
return sign + "£" + abs.toFixed(d);
}
function fmtUSD(v, decimals){
if (v == null) return "—";
const abs = Math.abs(v);
let d = decimals;
if (d == null) d = abs >= 1 ? 2 : abs >= 0.01 ? 4 : 6;
const sign = v < 0 ? "-" : "";
return sign + "$" + abs.toFixed(d);
}
function fmtInt(n){ if (n==null) return "—"; return n.toLocaleString(); }
function fmtPct(n, d=1){ return (n*100).toFixed(d)+"%" }
function fmtTokens(n){
if (n==null) return "—";
if (n >= 1e6) return (n/1e6).toFixed(2)+"M";
if (n >= 1e3) return (n/1e3).toFixed(1)+"k";
return n.toLocaleString();
}
// "£97.01" with subtle visual hierarchy — dim £, emphasize number
function Money({ value, currency="gbp", size="md", strong=true }){
if (value == null) return —;
const sym = currency==="usd" ? "$" : "£";
const abs = Math.abs(value);
const d = abs >= 1 ? 2 : abs >= 0.01 ? 4 : 6;
const sign = value < 0 ? "-" : "";
const sizes = { sm:{fs:12,fw:500}, md:{fs:14,fw:500}, lg:{fs:22,fw:600}, xl:{fs:34,fw:600}, hero:{fs:44,fw:600} };
const s = sizes[size] || sizes.md;
return (
{sign}{sym}{abs.toFixed(d)}
);
}
function Delta({ pct, invert=false, size="md" }){
if (pct == null || !isFinite(pct)) return —;
if (Math.abs(pct) < 0.001) return ±0%;
const up = pct > 0;
const cls = invert ? (up ? "delta--down" : "delta--up") : (up ? "delta--up" : "delta--down");
const arrow = up ? "↑" : "↓";
const fs = size==="lg" ? 13 : 12;
return {arrow}{Math.abs(pct*100).toFixed(1)}%;
}
// ── Sparkline (area+line) ─────────────────────────────────────────
function Sparkline({ data, w=72, h=22, color="var(--accent)", fill=true, dot=false }){
if (!data || data.length===0) return null;
const max = Math.max(...data, 0.0001);
const min = Math.min(...data, 0);
const range = max - min || 1;
const x = i => (i/(data.length-1))*w;
const y = v => h - ((v-min)/range)*(h-3) - 1.5;
const pts = data.map((v,i)=>`${x(i).toFixed(2)},${y(v).toFixed(2)}`).join(" ");
const area = `M0,${h} L${pts.split(" ").join(" L")} L${w},${h} Z`;
return (
);
}
// ── Provider visuals ─────────────────────────────────────────────
function ProviderMark({ provider, size="md" }){
const p = PROVIDERS[provider] || PROVIDERS.unknown;
const cls = size==="sm" ? "pmark pmark--sm" : "pmark";
return {p.mark};
}
function ProviderDot({ provider }){
const p = PROVIDERS[provider] || PROVIDERS.unknown;
return ;
}
function ProviderPill({ provider }){
const p = PROVIDERS[provider] || PROVIDERS.unknown;
return (
{p.name}
);
}
function ModelBadge({ model }){
const m = MODELS[model] || MODELS.unknown;
const p = PROVIDERS[m.provider];
return (
{m.short}
);
}
// ── Icons (lucide-ish line set) ─────────────────────────────────
function Icon({ name, size=16, stroke="currentColor", strokeWidth=1.75, fill="none" }){
const paths = {
home: <>,
folder: <>,
check: <>,
cog: <>,
chart: <>,
search: <>,
download:<>,
chevron: <>,
chevDown:<>,
chevLeft:<>,
plus: <>,
arrow: <>,
dot: <>,
ext: <>,
filter: <>,
calendar:<>,
clock: <>,
activity:<>,
info: <>,
refresh: <>,
print: <>,
alert: <>,
wallet: <>,
cube: <>,
layers: <>,
sparkles:<>,
bolt: <>,
moon: <>,
target: <>,
flag: <>,
user: <>,
help: <>,
box: <>,
ring: <>,
starOn: <>,
star: <>,
archive: <>,
coins: <>,
tokens: <>,
peak: <>,
chip: <>,
receipt: <>,
};
return (
);
}
// ── Buttons ─────────────────────────────────────────────────────
function btnPrimary(){
return { height:34, padding:"0 14px", border:"1px solid var(--accent)", background:"var(--accent)", color:"#fff", borderRadius:8, fontSize:13, fontWeight:500, display:"inline-flex", alignItems:"center", gap:6, boxShadow:"0 1px 0 rgba(255,255,255,0.16) inset, 0 1px 2px rgba(91,80,238,0.25)" };
}
function btnSecondary(){
return { height:34, padding:"0 12px", border:"1px solid var(--line-2)", background:"#fff", color:"var(--fg-0)", borderRadius:8, fontSize:13, fontWeight:500, display:"inline-flex", alignItems:"center", gap:6 };
}
function btnGhost(){
return { height:30, padding:"0 10px", border:"1px solid var(--line-1)", background:"transparent", color:"var(--fg-1)", borderRadius:7, fontSize:12, display:"inline-flex", alignItems:"center", gap:6 };
}
function btnSubtle(){
return { height:26, padding:"0 8px", border:"none", background:"transparent", color:"var(--fg-1)", borderRadius:6, fontSize:12, display:"inline-flex", alignItems:"center", gap:5 };
}
// ── Section header ──────────────────────────────────────────────
function SectionHeader({ title, subtitle, action, eyebrow }){
return (
{eyebrow &&
{eyebrow}
}
{title}
{subtitle &&
{subtitle}
}
{action}
);
}
// ── Container size hook ─────────────────────────────────────────
function useWidth(ref){
const [w, setW] = useState(800);
useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
const ro = new ResizeObserver(() => setW(el.clientWidth));
ro.observe(el);
setW(el.clientWidth);
return () => ro.disconnect();
}, []);
return w;
}
Object.assign(window, {
fmtGBP, fmtUSD, fmtInt, fmtPct, fmtTokens,
Money, Delta, Sparkline,
ProviderMark, ProviderDot, ProviderPill, ModelBadge,
Icon, btnPrimary, btnSecondary, btnGhost, btnSubtle, SectionHeader, useWidth,
});