/* ------------------------------------------------------------------ Chatnamer v2 — Shared atoms (chip, name row, progress, etc.) All take light/dark mode + density via props. ------------------------------------------------------------------ */ // ── Kicker label (ALL CAPS Work Sans 700, tracked) ──────────────────── function Kicker({ children, color = 'var(--orange)', size = 10 }) { return ( {children}); } // ── Progress pips (Tanj nav style) ──────────────────────────────────── function Pips({ total, current, accent = 'var(--orange)', dark = false }) { const dimColor = dark ? 'rgba(245,242,238,0.30)' : 'rgba(17,17,17,0.20)'; return (
{Array.from({ length: total }).map((_, i) => { const active = i === current; return ( ); })}
); } // ── Chip — square, hairline, hover-orange ──────────────────────────── function Chip({ children, onClick, dark = false, accent = 'var(--orange)', density = 'editorial', icon = null, dim = false }) { const pad = density === 'compact' ? '7px 11px' : '9px 13px'; const fs = density === 'compact' ? 12 : 13; const baseBorder = dark ? 'rgba(245,242,238,0.18)' : 'rgba(17,17,17,0.14)'; const baseColor = dark ? 'rgba(245,242,238,0.92)' : 'var(--ink)'; const [hover, setHover] = React.useState(false); return ( ); } // ── Three-tab chip rail (try / spark / reframe) ───────────────────── function ChipRail({ question, answers, aiChips, onInsert, onRequestAi, chipsLoading, dark = false, accent = 'var(--orange)', density = 'editorial', visible = true }) { const [tab, setTab] = React.useState('try'); if (!visible) return null; const tryChips = aiChips && aiChips[question.id] || question.chips.try; const sparkChips = question.chips.spark || []; const reframeChips = question.chips.reframe || []; const tabs = [ { id: 'try', label: 'Try', count: tryChips.length, desc: 'Click to drop into your answer' }, { id: 'spark', label: 'Spark', count: sparkChips.length, desc: 'Provocations to broaden thinking' }, { id: 'reframe', label: 'Reframe', count: reframeChips.length, desc: 'Try the question another way' }]; const current = tab === 'try' ? tryChips : tab === 'spark' ? sparkChips : reframeChips; const muted = dark ? 'rgba(245,242,238,0.55)' : 'rgba(17,17,17,0.45)'; const fg = dark ? 'var(--off-white)' : 'var(--black)'; return (
{/* Tab strip */}
{tabs.map((t) => { const active = t.id === tab; return ( ); })}
{tab === 'try' && }
{/* tiny tab description */}
{tabs.find((x) => x.id === tab).desc}
{/* Chips */}
{current.map((text, i) => onInsert(text)} dim={tab !== 'try'}> {text} )}
); } // ── Domain & trademark dots ───────────────────────────────────────── function StatusDot({ status, label, dark = false }) { // status: 'clear' | 'open' | 'risky' | 'taken' const map = { clear: { color: 'var(--lime)', fill: 'var(--lime)' }, open: { color: 'var(--lime)', fill: 'var(--lime)' }, risky: { color: 'var(--orange)', fill: 'var(--orange)' }, taken: { color: dark ? 'rgba(245,242,238,0.35)' : 'rgba(17,17,17,0.32)', fill: 'transparent', border: 'rgba(17,17,17,0.32)' } }; const s = map[status] || map.clear; return ( {label} ); } // ── Star (save) icon ───────────────────────────────────────────────── function StarIcon({ filled, dark = false, accent = 'var(--orange)', size = 14 }) { return ( ); } // ── Compact name row (used in results panel) ──────────────────────── function NameRow({ name, kind, etymology, rationale, domain, trademark, round, saved, onToggleSave, dark = false, accent = 'var(--orange)', density = 'editorial', onOpenDetail }) { const [open, setOpen] = React.useState(false); const muted = dark ? 'rgba(245,242,238,0.62)' : 'rgba(17,17,17,0.55)'; const fg = dark ? 'var(--off-white)' : 'var(--black)'; const rule = dark ? 'rgba(245,242,238,0.10)' : 'rgba(17,17,17,0.08)'; const fsName = density === 'compact' ? 22 : 28; const vpad = density === 'compact' ? 12 : 16; return (
{kind}{round ? ' · R' + String(round).padStart(2, '0') : ''}
{etymology &&
{etymology}
}
{/* status row */}
{domain?.alt && }
{onOpenDetail && ( )}
{open && rationale &&
{rationale}
}
); } // ── Live brief running list (right-panel summary) ───────────────────── function BriefList({ questions, answers, currentIdx, onJump, dark = false, accent = 'var(--orange)', density = 'editorial' }) { const muted = dark ? 'rgba(245,242,238,0.55)' : 'rgba(17,17,17,0.45)'; const fg = dark ? 'var(--off-white)' : 'var(--black)'; return (
{questions.map((q, i) => { const v = (answers[q.id] || '').trim(); const active = i === currentIdx; return ( ); })}
); } // ── Primary CTA button (per design system) ──────────────────────────── function PrimaryBtn({ children, onClick, dark = false, accent = 'var(--orange)', disabled = false }) { const [hover, setHover] = React.useState(false); const bg = dark ? 'var(--off-white)' : 'var(--black)'; const fg = dark ? 'var(--black)' : 'var(--off-white)'; return ( ); } function SecondaryBtn({ children, onClick, dark = false, accent = 'var(--orange)' }) { const [hover, setHover] = React.useState(false); return ( ); } // ── T-bar diagonal SVG (ghost field for dark surfaces) ─────────────── function TBarField({ opacity = 0.05 }) { return ( ); } Object.assign(window, { Kicker, Pips, Chip, ChipRail, StatusDot, StarIcon, NameRow, BriefList, PrimaryBtn, SecondaryBtn, TBarField });