/* UI primitives + hand-built SVG charts. Theme via CSS vars (see index.html). */ (function () { const { useState, useRef, useEffect, useLayoutEffect, useCallback } = React; const Icon = window.Icon; const { fmtUSD, fmtMult, fmtPct, fmtNum, fmtCompact } = window.FMT; const cx = (...a) => a.filter(Boolean).join(" "); // chart palette const C = { // brand accent — these keys hold the canonical Emerge Digital teal (was indigo); // recoloured per design.md "teal on every surface incl. the roai product UI". indigo: "#00C2C7", indigoDeep: "#008A8E", emerald: "#10b981", amber: "#f59e0b", rose: "#f43f5e", sky: "#38bdf8", violet: "#a78bfa", slate: "#94a3b8", }; // ---------- size hook ---------- function useMeasure() { const ref = useRef(null); const [w, setW] = useState(0); useLayoutEffect(() => { if (!ref.current) return; const ro = new ResizeObserver((es) => setW(es[0].contentRect.width)); ro.observe(ref.current); setW(ref.current.getBoundingClientRect().width); return () => ro.disconnect(); }, []); return [ref, w]; } // ---------- Card ---------- function Card({ className, children, hover, onClick, style }) { return (
{children}
); } // ---------- Badge ---------- const BADGE = { indigo: "text-[var(--accent-fg)] bg-[var(--accent-soft)] border-[var(--accent-line)]", emerald: "text-emerald-400 bg-emerald-500/10 border-emerald-500/20", amber: "text-amber-400 bg-amber-500/10 border-amber-500/20", rose: "text-rose-400 bg-rose-500/10 border-rose-500/20", neutral: "text-[var(--muted)] bg-[var(--chip)] border-[var(--border)]", }; function Badge({ tone = "neutral", className, children, icon }) { return ( {icon && } {children} ); } const tierTone = (t) => ({ Elite: "indigo", Strong: "emerald", Stable: "amber", "At risk": "rose" }[t] || "neutral"); function TierBadge({ tier }) { return {tier}; } // ROAI delta pill function DeltaPill({ value, suffix = "%", className }) { const up = value >= 0; return ( {up ? "+" : ""}{value.toFixed(1)}{suffix} ); } // ---------- Tooltip (hover) ---------- function Tooltip({ label, children, side = "top" }) { const [show, setShow] = useState(false); return ( setShow(true)} onMouseLeave={() => setShow(false)}> {children} {show && ( {label} )} ); } function InfoDot({ label }) { return ( ); } // ---------- Health score bar ---------- function HealthBar({ score, showLabel = true, w = 64 }) { const tone = score >= 80 ? C.emerald : score >= 65 ? C.amber : C.rose; return (
{showLabel && {score}}
); } // ---------- Sparkline ---------- function Sparkline({ data, color = C.indigo, h = 28, w = 88, fill = true }) { const vals = data; const max = Math.max(...vals), min = Math.min(...vals); const rng = max - min || 1; const pts = vals.map((v, i) => [(i / (vals.length - 1)) * w, h - 3 - ((v - min) / rng) * (h - 6)]); const d = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" "); const area = d + ` L${w} ${h} L0 ${h} Z`; const gid = "sp" + Math.round(min + max + vals.length); return ( {fill && } ); } // ---------- Line / Area chart with hover ---------- // series: [{key,label,color,area}] function LineArea({ data, series, height = 220, formatY = fmtCompact, formatTip, yPad = 1.08, labelEvery = 1 }) { const [ref, w] = useMeasure(); const [hi, setHi] = useState(null); const padL = 44, padR = 14, padT = 14, padB = 26; const W = Math.max(w, 200), H = height; const iw = W - padL - padR, ih = H - padT - padB; const keys = series.map((s) => s.key); let maxV = 0; data.forEach((d) => keys.forEach((k) => { if (d[k] > maxV) maxV = d[k]; })); maxV = maxV * yPad || 1; const x = (i) => padL + (i / Math.max(data.length - 1, 1)) * iw; const y = (v) => padT + ih - (v / maxV) * ih; const ticks = 4; const gridV = Array.from({ length: ticks + 1 }, (_, i) => (maxV / ticks) * i); const onMove = (e) => { const rect = e.currentTarget.getBoundingClientRect(); const px = e.clientX - rect.left; const idx = Math.round(((px - padL) / iw) * (data.length - 1)); setHi(Math.max(0, Math.min(data.length - 1, idx))); }; return (
{w > 0 && ( {series.filter((s) => s.area).map((s) => ( ))} {gridV.map((gv, i) => ( {formatY(gv)} ))} {data.map((d, i) => (i % labelEvery === 0) && ( {d.month} ))} {series.map((s) => { const line = data.map((d, i) => (i ? "L" : "M") + x(i).toFixed(1) + " " + y(d[s.key]).toFixed(1)).join(" "); const area = line + ` L${x(data.length - 1)} ${padT + ih} L${x(0)} ${padT + ih} Z`; return ( {s.area && } ); })} {hi != null && ( {series.map((s) => )} )} setHi(null)} /> )} {hi != null && (
{data[hi].month}
{series.map((s) => (
{s.label} {(formatTip || formatY)(data[hi][s.key], s)}
))}
)}
); } // ---------- Service category breakdown (horizontal bars) ---------- function CategoryBars({ categories }) { const max = Math.max(...categories.map((c) => c.value)); const catColor = { "Experience Strategy": C.indigo, "Experience Design": C.violet, "Experience Platform": C.sky, "Commerce Platform": C.emerald, "Experience Insights": C.amber, "Run & Optimize": C.slate }; return (
{categories.map((c) => { const roai = c.value / c.cost; return (
{c.name} {fmtUSD(c.value, { compact: true })} = 3 ? C.emerald : roai >= 2 ? C.amber : C.rose }}>{fmtMult(roai)}
); })}
Value delivered AI cost
); } // ---------- Donut (model breakdown) ---------- function Donut({ segments, size = 132, thickness = 16, centerLabel, centerSub }) { const r = (size - thickness) / 2, cxv = size / 2, cyv = size / 2; const circ = 2 * Math.PI * r; let acc = 0; return (
{segments.map((s, i) => { const len = s.value * circ; const el = ( ); acc += len; return el; })}
{segments.map((s, i) => (
{s.label} {Math.round(s.value * 100)}%
))}
); } // ---------- Progress bar ---------- function Progress({ pct, tone = C.indigo, h = 8 }) { return (
); } // ---------- Ring gauge ---------- function Ring({ value, max, label, sub, color = C.indigo, size = 120, thickness = 11 }) { const r = (size - thickness) / 2, c = size / 2; const circ = 2 * Math.PI * r; const pct = Math.min(value / max, 1); return (
{label}
{sub &&
{sub}
}
); } // ---------- Segmented control ---------- function Segmented({ options, value, onChange, size = "md" }) { return (
{options.map((o) => { const v = typeof o === "string" ? o : o.value; const lbl = typeof o === "string" ? o : o.label; const active = v === value; return ( ); })}
); } // ---------- Section header ---------- function SectionTitle({ title, sub, right, icon }) { return (
{icon && }

{title}

{sub &&

{sub}

}
{right}
); } // ---------- Metronome badge ---------- function MetronomeBadge({ size = "md" }) { return ( Metronome ); } // ---------- Modal (overlay dialog) ---------- function Modal({ open, onClose, children, maxWidth = 460, label = "Dialog", labelledby }) { const panelRef = useRef(null); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); }; document.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; if (panelRef.current) panelRef.current.focus(); return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [open, onClose]); if (!open) return null; return (
{children}
); } // ---------- ROAI explainers (shared tooltip copy) ---------- const ROAI_TIP = "ROAI = (Value delivered − AI cost) ÷ AI cost. A 5.0× ROAI means every $1 of AI spend returned $5 of measured value — hours saved plus revenue uplift."; const ROAI_TIP_SHORT = "Return on AI Investment — the measured value (hours saved + revenue uplift) created for every $1 invested in AI."; window.UI = { cx, C, useMeasure, Card, Badge, TierBadge, tierTone, DeltaPill, Tooltip, InfoDot, HealthBar, Sparkline, LineArea, CategoryBars, Donut, Progress, Ring, Segmented, SectionTitle, MetronomeBadge, Modal, ROAI_TIP, ROAI_TIP_SHORT, }; })();