/* ------------------------------------------------------------------
Chatnamer v3 — Atoms for Tanj.co reskin
Trade-Gothic-Cnd-Bold (Saira Condensed) + DM Sans + JetBrains Mono
All v3 atoms are exported with a V3 suffix so they coexist with v2.
------------------------------------------------------------------ */
/* ── Mono kicker (replaces Work Sans ALL CAPS) ───────────────────── */
function KickerV3({ children, color = 'var(--v3-ink)', size = 10, weight = 500 }) {
return (
{children});
}
/* ── Mono small caption ─────────────────────────────────────────── */
function MonoCapV3({ children, color = 'var(--v3-muted)', size = 11 }) {
return (
{children});
}
/* ── Pips progress (Tanj nav style, tighter) ────────────────────── */
function PipsV3({ total, current, accent = 'var(--v3-orange)', dark = false }) {
const dim = dark ? 'rgba(244,240,233,0.30)' : 'rgba(26,26,26,0.20)';
return (
{Array.from({ length: total }).map((_, i) => {
const active = i === current;
const done = i < current;
return (
);
})}
);
}
/* ── Marquee ticker bar ─────────────────────────────────────────── */
function TickerV3({ items, dark = false, accent = 'var(--v3-orange)', highlightIdx = -1 }) {
// Render the items twice so the loop is seamless.
const bg = dark ? 'var(--v3-ink)' : 'var(--v3-cream)';
const fg = dark ? 'rgba(244,240,233,0.92)' : 'var(--v3-ink)';
const seq = [...items, ...items];
return (
{seq.map((it, i) => {
const isHi = (i % items.length) === highlightIdx;
return (
{it}
/
);
})}
);
}
/* ── Big condensed stair-step headline ──────────────────────────── */
/* Renders an array of strings as stacked all-caps lines with optional
per-line left indent (stair-step). Marks lines containing {{accent}}
markers in orange. */
function StairV3({ lines, size = 92, color = 'var(--v3-ink)', accent = 'var(--v3-orange)',
indents = [], lineHeight = 0.86, weight = 800 }) {
return (
{lines.map((raw, i) => {
const parts = raw.split(/(\{\{[^}]+\}\})/g).filter(Boolean);
return (
{parts.map((p, j) => {
const m = p.match(/^\{\{(.+)\}\}$/);
if (m) return {m[1]};
return {p};
})}
);
})}
{/* Tab strip */}
{tabs.map((t) => {
const active = t.id === tab;
return (
);
})}
{tab === 'try' &&
}
{tabs.find((x) => x.id === tab).desc}
{current.map((text, i) =>
onInsert(text)} dim={tab !== 'try'}>
{text}
)}
{kind}{round ? ' · R' + String(round).padStart(2, '0') : ''}
{etymology &&
{etymology}
}
{domain?.alt &&
}
{onOpenDetail &&
}
{open && rationale &&
{rationale}
}
);
}
/* ── Primary / Secondary buttons ────────────────────────────────── */
function PrimaryBtnV3({ children, onClick, dark = false, accent = 'var(--v3-orange)', disabled = false }) {
const [hover, setHover] = React.useState(false);
return (
);
}
function SecondaryBtnV3({ children, onClick, dark = false, accent = 'var(--v3-orange)' }) {
const [hover, setHover] = React.useState(false);
return (
);
}
/* ── Brief list (left rail; mono) ───────────────────────────────── */
function BriefListV3({ questions, answers, currentIdx, onJump, dark = false,
accent = 'var(--v3-orange)' }) {
const muted = dark ? 'rgba(244,240,233,0.55)' : 'rgba(26,26,26,0.45)';
const fg = dark ? 'rgba(244,240,233,0.95)' : 'var(--v3-ink)';
return (
{questions.map((q, i) => {
const v = (answers[q.id] || '').trim();
const active = i === currentIdx;
return (
);
})}