// Dashboard.jsx — Overview page composition: metrics, sparkline, theme switcher, activity. const THEMES = [ ["neutral", "0 0% 32%"], ["trust", "210 18% 38%"], ["energy", "28 20% 36%"], ["harmony", "170 16% 36%"], ["spirit", "265 16% 40%"], ["urgency", "8 18% 38%"], ]; function Sparkline({ points = [], color = "var(--primary)" }) { const w = 320, h = 60; if (!points.length) return null; const min = Math.min(...points), max = Math.max(...points); const norm = (v) => h - 6 - ((v - min) / (max - min || 1)) * (h - 12); const step = w / (points.length - 1); const d = points.map((p, i) => `${i === 0 ? "M" : "L"}${(i*step).toFixed(1)},${norm(p).toFixed(1)}`).join(" "); const dArea = d + ` L${w},${h} L0,${h} Z`; return ( ); } function Metric({ label, value, delta, down, points }) { return (
{label}
{value}
{delta} 30d
); } function ThemeSwitcher({ theme, setTheme }) { return (
Active theme
20 available
{THEMES.map(([name, hsl]) => ( ))}
Theme tokens compose by hue family — never by hex. {``}
); } function ActivityFeed() { const items = [ ["EB", "Edwin B.", "regenerated palette", "harmony · 11 shades", "12m"], ["AB", "Annie B.", "exported tokens", "tailwind.config.ts", "47m"], ["CL", "C. Lead", "approved review", "Card · radius-lg", "2h"], ["MK", "M. Kahn", "added theme", "spirit", "5h"], ["JM", "J. Mendez", "fixed contrast", "muted-foreground · light", "yesterday"], ]; return (
Activity
{items.map(([initials, name, action, target, when]) => (
{initials}
{name}{" "} {action}{" "} {target}
{when} ago
SYNCED
))}
); } function PaletteCard({ name, hueLabel, hsl, ramps }) { return (
{name}
{hueLabel}
{ramps.map((c, i) =>
)}
); } function Dashboard({ theme, setTheme }) { const points1 = [12,14,13,16,18,17,19,22,21,24,26,25,28,27,30,32,31,34,36,35,38]; const points2 = [40,42,41,44,40,38,42,46,48,50,49,52,55,54,57,60,58,62,65,63,66]; const points3 = [80,78,82,80,76,72,70,73,76,74,70,68,71,69,66,64,67,65,68,66,64]; const points4 = [5,6,5,7,8,7,9,10,9,11,12,11,13,14,13,15,16,15,17,18,17]; const palettes = [ ["redGray", "8°", "hsl(8 18% 46%)", ["hsl(8 14% 97%)","hsl(8 14% 93%)","hsl(8 14% 85%)","hsl(8 16% 73%)","hsl(8 18% 60%)","hsl(8 18% 46%)","hsl(8 20% 38%)","hsl(8 20% 30%)","hsl(8 22% 22%)","hsl(8 24% 14%)","hsl(8 28% 8%)"]], ["greenGray","120°","hsl(120 14% 45%)", ["hsl(120 8% 97%)","hsl(120 8% 93%)","hsl(120 10% 86%)","hsl(120 12% 74%)","hsl(120 14% 60%)","hsl(120 14% 45%)","hsl(120 16% 37%)","hsl(120 16% 30%)","hsl(120 18% 22%)","hsl(120 20% 14%)","hsl(120 22% 8%)"]], ["blueGray", "210°","hsl(210 18% 46%)", ["hsl(210 14% 97%)","hsl(210 14% 93%)","hsl(210 14% 86%)","hsl(210 16% 74%)","hsl(210 16% 60%)","hsl(210 18% 46%)","hsl(210 18% 38%)","hsl(210 20% 30%)","hsl(210 22% 22%)","hsl(210 24% 14%)","hsl(210 26% 8%)"]], ["violetGray","265°","hsl(265 16% 48%)",["hsl(265 10% 97%)","hsl(265 12% 93%)","hsl(265 12% 86%)","hsl(265 14% 74%)","hsl(265 14% 60%)","hsl(265 16% 48%)","hsl(265 16% 40%)","hsl(265 18% 32%)","hsl(265 18% 24%)","hsl(265 22% 14%)","hsl(265 24% 8%)"]], ]; return (
DASHBOARD Calibrated · 8–24% saturation
Overview
Twenty intention-mapped themes derived from Edwin Babbitt's 1878 atomic chromatology — calibrated for screens.
Palette library
{palettes.map((p) => )}
); } window.Dashboard = Dashboard;