// Shared shell — Wordmark logo, top bar with chapter stepper, footer.
const { useEffect, useState, useRef } = React;
function Wordmark({size=22, tone='ink'}){
const scale = size / 22;
const w = Math.round(108 * scale);
const h = Math.round(28 * scale);
const imgW = Math.round(132 * scale);
const imgLeft = Math.round(-12 * scale);
const imgTop = Math.round((h - imgW) / 2);
const filter =
tone === 'violet' || tone === 'brand' ? 'none' :
tone === 'light' ? 'brightness(0) invert(1)' :
'brightness(0)';
return (
);
}
// Chapter stepper — 7 dots in the top bar. Current = violet, visited = lime, future = hollow.
function ChapterStepper({currentNum}){
const [visited, setVisited] = useState(()=> getVisited());
// Re-read on hash change (so the stepper updates when user navigates).
useEffect(()=>{
const sync = ()=> setVisited(getVisited());
window.addEventListener('hashchange', sync);
window.addEventListener('storage', sync);
return ()=>{
window.removeEventListener('hashchange', sync);
window.removeEventListener('storage', sync);
};
},[]);
return (
{CHAPTERS.map(c => {
const isCurrent = c.num === currentNum;
const isVisited = !isCurrent && visited.includes(c.num);
const fill =
isCurrent ? 'var(--violet)' :
isVisited ? 'var(--lime)' :
'transparent';
const border =
isCurrent ? 'var(--violet)' :
isVisited ? 'var(--ink)' :
'var(--ink-line-2)';
return (
);
})}