/* =========================================================
components.jsx — UI primitives (Card, Button, Badge, …)
Tier-2 in the architecture. Knows nothing about trackers.
========================================================= */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ---------- cn helper (no clsx needed) ---------- */
function cn(...args) {
return args.flat(Infinity).filter(Boolean).join(" ");
}
/* ---------- Icons (a curated set, stroke-only, 1.6 weight) ---------- */
const Icon = {
Dashboard: (p) => ,
Target: (p) => ,
Notes: (p) => ,
Trophy: (p) => ,
Skills: (p) => ,
Terminal: (p) => ,
Timer: (p) => ,
Book: (p) => ,
User: (p) => ,
Settings: (p) => ,
Flame: (p) => ,
Plus: (p) => ,
Check: (p) => ,
Close: (p) => ,
Search: (p) => ,
Arrow: (p) => ,
ChevR: (p) => ,
Github: (p) => ,
Lock: (p) => ,
Pin: (p) => ,
};
/* ---------- Card primitive ---------- */
function Card({ children, className, hover=false, accent, padded=true }) {
return (
{accent ? : null}
{children}
);
}
Card.Header = function CardHeader({ eyebrow, title, action, className }) {
return (
{eyebrow ?
{eyebrow}
: null}
{title ?
{title}
: null}
{action ?
{action}
: null}
);
};
Card.Body = function CardBody({ children, className }) {
return {children}
;
};
Card.Footer = function CardFooter({ children, className }) {
return {children}
;
};
/* ---------- Button ---------- */
function Button({ children, tone="ghost", size="md", className, icon, asChild, ...rest }) {
const cls = cn(
"btn",
tone === "primary" && "btn-primary",
tone === "ghost" && "btn-ghost",
tone === "mag" && "btn-mag",
size === "sm" && "btn-sm",
size === "lg" && "btn-lg",
icon && !children && "btn-icon",
className,
);
return ;
}
/* ---------- Badge / Tag ---------- */
function Badge({ children, tone, className, dot }) {
return (
{dot ? : null}
{children}
);
}
function Tag({ children, className }) {
return {children};
}
/* ---------- Progress Ring (SVG) ---------- */
function ProgressRing({ value=0, size=120, stroke=10, color="var(--phos)", trailColor="var(--bg-3)", label, sublabel }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const offset = c * (1 - Math.max(0, Math.min(1, value)));
return (
{label}
{sublabel ?
{sublabel}
: null}
);
}
/* ---------- Progress Bar ---------- */
function ProgressBar({ value=0, tone, className }) {
return (
);
}
/* ---------- Sparkline (SVG) ---------- */
function Sparkline({ data=[], width=180, height=40, color="var(--phos)", fill=true, className }) {
if (!data.length) return null;
const max = Math.max(...data, 1);
const min = Math.min(...data, 0);
const range = max - min || 1;
const stepX = data.length > 1 ? width / (data.length - 1) : width;
const points = data.map((v, i) => {
const x = i * stepX;
const y = height - ((v - min) / range) * (height - 4) - 2;
return [x, y];
});
const path = points.map((p, i) => (i === 0 ? `M${p[0]} ${p[1]}` : `L${p[0]} ${p[1]}`)).join(" ");
const area = path + ` L${width} ${height} L0 ${height} Z`;
const gradId = `spk-${Math.random().toString(36).slice(2, 8)}`;
return (
);
}
/* ---------- Activity Heatmap (year grid) ---------- */
function ActivityHeatmap({ events=[], weeks=52, color="var(--phos)" }) {
// Build counts per day
const counts = useMemo(() => {
const map = new Map();
events.forEach(e => map.set(e.day, (map.get(e.day) || 0) + 1));
return map;
}, [events]);
// Build grid: weeks columns x 7 rows ending today
const today = new Date();
// align to Sunday end-of-week containing today
const endOfWeek = new Date(today);
endOfWeek.setDate(today.getDate() + (6 - today.getDay()));
const cells = [];
for (let w = weeks - 1; w >= 0; w--) {
for (let d = 0; d < 7; d++) {
const date = new Date(endOfWeek);
date.setDate(endOfWeek.getDate() - (w * 7) - (6 - d));
cells.push(date);
}
}
const cellW = 11, gap = 3;
const W = weeks * (cellW + gap) - gap;
const H = 7 * (cellW + gap) - gap;
function shade(n) {
if (!n) return "var(--bg-3)";
if (n === 1) return `color-mix(in oklab, ${color} 25%, var(--bg-3))`;
if (n === 2) return `color-mix(in oklab, ${color} 50%, var(--bg-3))`;
if (n === 3) return `color-mix(in oklab, ${color} 80%, var(--bg-3))`;
return color;
}
return (
);
}
/* ---------- KPI / Stat Card ---------- */
function StatCard({ eyebrow, value, suffix, trend, spark, color="var(--phos)", className }) {
return (
{eyebrow}
{value}{suffix ? {suffix} : null}
{trend ?
{trend.up ? "▲" : "▼"} {trend.label}
: null}
{spark ?
: null}
);
}
/* ---------- Difficulty pips ---------- */
function DifficultyPips({ value=1, max=5 }) {
return (
{Array.from({ length: max }).map((_, i) => (
))}
);
}
/* ---------- Status Pill ---------- */
function StatusPill({ status }) {
const map = {
idle: { tone: "mute", label: "Idle", sym: "◯" },
wip: { tone: "amber", label: "In progress", sym: "◐" },
done: { tone: "phos", label: "Done", sym: "●" },
stuck: { tone: "mag", label: "Stuck", sym: "⨯" },
};
const m = map[status] || map.idle;
return {m.sym}{m.label};
}
/* ---------- Modal ---------- */
function Modal({ open, onClose, title, children, footer, size="md" }) {
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
const w = size === "lg" ? "max-w-3xl" : size === "sm" ? "max-w-md" : "max-w-xl";
return (
e.stopPropagation()}>
{children}
{footer ?
{footer}
: null}
);
}
/* ---------- Toast / Achievement popup ---------- */
function ToastHost({ toast }) {
if (!toast) return null;
const isAch = toast.kind === "achievement";
return (
{isAch ? : }
{isAch ? "// ACHIEVEMENT UNLOCKED" : "// CHALLENGE COMPLETE"}
{toast.title}
{isAch ?
{toast.desc}
: null}
+{toast.xp} XP
);
}
/* ---------- Terminal window ---------- */
function TerminalWindow({ title="bash", children, className }) {
return (
);
}
function TermLine({ children, prompt="cj", host="~", className }) {
return (
{prompt}
:{host}$
{children}
);
}
/* ---------- Empty state ---------- */
function EmptyState({ title="Nothing yet.", body, action }) {
return (
// EMPTY
{title}
{body ?
{body}
: null}
{action}
);
}
/* ---------- Minimal markdown renderer ---------- */
function renderMarkdown(md) {
if (!md) return "";
let html = md
.replace(/&/g, "&").replace(//g, ">");
// code fences
html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, body) =>
`${body.replace(/\n$/, "")}
`);
// inline code
html = html.replace(/`([^`\n]+)`/g, '$1');
// headings
html = html.replace(/^### (.*)$/gm, '$1
');
html = html.replace(/^## (.*)$/gm, '$1
');
html = html.replace(/^# (.*)$/gm, '$1
');
// bold / italic
html = html.replace(/\*\*([^*]+)\*\*/g, '$1');
html = html.replace(/(?$1');
// lists
html = html.replace(/(?:^|\n)((?:- [^\n]+\n?)+)/g, (m, block) => {
const items = block.trim().split(/\n/).map(l => `${l.replace(/^- /, "")}`).join("");
return `\n`;
});
// paragraphs / linebreaks
html = html.split(/\n{2,}/).map(p => {
if (/^<(h\d|ul|pre)/.test(p.trim())) return p;
return `${p.replace(/\n/g, "
")}
`;
}).join("");
return html;
}
function Markdown({ source, className }) {
return (
);
}
/* ---------- Section header ---------- */
function PageHeader({ eyebrow, title, sub, action }) {
return (
{eyebrow ?
{eyebrow}
: null}
{title}
{sub ?
{sub}
: null}
{action ?
{action}
: null}
);
}
/* ---------- Section divider ---------- */
function SectionLabel({ children, action }) {
return (
);
}
/* ---------- expose ---------- */
Object.assign(window, {
cn, Icon,
Card, Button, Badge, Tag,
ProgressRing, ProgressBar, Sparkline, ActivityHeatmap,
StatCard, DifficultyPips, StatusPill,
Modal, ToastHost,
TerminalWindow, TermLine,
EmptyState, Markdown, renderMarkdown,
PageHeader, SectionLabel,
});