// === Reusable atoms / icons ===
const Icon = ({ name, size = 14 }) => {
const paths = {
search: <>,
chevron: ,
chevronR: ,
arrow: ,
arrowUp: ,
arrowDown: ,
grid: <>,
list: <>,
bell: ,
settings: <>,
download: ,
plus: <>,
sun: <>,
moon: ,
flame: ,
target: <>,
clock: <>,
eye: <>,
external: <>,
filter: ,
sparkles: ,
};
return (
);
};
const Sparkline = ({ data, color = 'var(--navy)', w = 80, h = 18, fill = false, dotLast = false }) => {
if (!data || data.length < 2) return null;
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const step = w / (data.length - 1);
const pts = data.map((v, i) => [i * step, h - ((v - min) / range) * (h - 2) - 1]);
const d = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
const area = `${d} L${w},${h} L0,${h} Z`;
return (
);
};
// generate a believable but stable trend
const trend = (seed, len = 14, base = 50, variance = 8) => {
let r = seed * 9301 + 49297;
return Array.from({length: len}, (_, i) => {
r = (r * 9301 + 49297) % 233280;
return base + Math.sin(i / 2 + seed) * variance + (r / 233280) * variance - variance/2;
});
};
const HealthRing = ({ value, size = 36, stroke = 3 }) => {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c - (value / 100) * c;
const color = value >= 75 ? 'var(--green)' : value >= 55 ? 'var(--gold)' : 'var(--coral)';
return (
);
};
const LLMDot = ({ k }) => {
const map = { claude: 'C', gpt: 'G', gemini: 'g', perplex: 'P' };
return {map[k]};
};
const Delta = ({ d }) => {
const f = window.fmtDelta(d);
return {f.txt};
};
const Pill = ({ children, tone = '', solid = false, onClick, active }) => (
{children}
);
const Fav = ({ init, size = '' }) => (
{init}
);
const Btn = ({ children, primary, ghost, sm, onClick, ...rest }) => (
);
Object.assign(window, { Icon, Sparkline, trend, HealthRing, LLMDot, Delta, Pill, Fav, Btn });