// Shared UI primitives for Pathway
const { useState, useEffect, useRef, useMemo } = React;
// 4-point sparkle star — brand motif
function Sparkle({ size = 14, color = 'currentColor' }) {
return (
);
}
// Inline lucide-style icons so we don't depend on CDN init timing
const Icon = {
home: (p) => ,
flow: (p) => ,
channels: (p) => ,
campaigns: (p) => ,
creative: (p) => ,
audience: (p) => ,
reports: (p) => ,
settings: (p) => ,
calendar: (p) => ,
download: (p) => ,
filter: (p) => ,
arrowUp: (p) => ,
arrowDown: (p) => ,
arrowRight:(p) => ,
plus: (p) => ,
chevron: (p) => ,
search: (p) => ,
ram: (p) => ,
venues: (p) => ,
};
// Delta pill
function Delta({ value, suffix = '%', invert = false }) {
const pos = invert ? value < 0 : value > 0;
const neg = invert ? value > 0 : value < 0;
const cls = pos ? 'pos' : (neg ? 'neg' : '');
const ArrowIcon = value > 0 ? Icon.arrowUp : (value < 0 ? Icon.arrowDown : null);
return (
{ArrowIcon && }
{value >= 0 ? '+' : ''}{value.toFixed(1)}{suffix}
);
}
// Live-data ready flag — true once the API has returned and adoptInit ran.
// Avoids the "demo numbers flash before live load" first-paint bug.
function isLive() {
return !!(window.CoverStory && window.CoverStory._dataSource === 'live');
}
// Tiny shimmer block used by skeleton states. CSS is in index.html.
function Shimmer({ w, h, style }) {
return ;
}
// KPI tile. If live data hasn't arrived yet, render a skeleton so the
// demo numbers don't flash in before the API responds.
function Kpi({ label, value, delta, sub, invertDelta, sparkline, loading }) {
const showSkeleton = loading || !isLive();
return (
{label}
{showSkeleton ? (
) : (
{value}
)}
{sparkline && !showSkeleton &&
{sparkline}
}
{sparkline && showSkeleton && }
{showSkeleton ? : (delta != null ? : )}
{sub}
);
}
// Empty state inside a Card or table. Pair with onClear to render a reset
// affordance when filters are involved.
function EmptyState({ title, hint, onClear, clearLabel }) {
return (
{title || 'Nothing here yet'}
{hint &&
{hint}
}
{onClear && (
)}
);
}
// Error state — for when a fetch failed. Pass onRetry to render a retry CTA.
function ErrorState({ title, detail, onRetry }) {
return (
{title || "Couldn't load"}
{detail &&
{detail}
}
{onRetry && (
)}
);
}
// Canonical date/time formatter for the dashboard. Mode:
// 'date' → '08 Aug'
// 'datetime' → '08 Aug · 10:30' ← default
// 'iso' → '2026-08-08T10:30:00.000Z'
// 'long' → '8 August 2026, 10:30'
// Use this everywhere a date renders so format is consistent across pages.
function fmtDt(d, mode) {
if (!d) return '—';
var date = d instanceof Date ? d : new Date(d);
if (isNaN(date.getTime())) return '—';
mode = mode || 'datetime';
if (mode === 'iso') return date.toISOString();
if (mode === 'date') return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
if (mode === 'long') return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })
+ ', ' + date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
// default datetime
return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })
+ ' · ' + date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
}
// Card
function Card({ title, sub, right, children, style }) {
return (