/* App shell — sticky nav, tweaks panel, renders all sections */ const PAGES = [ { id: 'brand', label: 'Brand', sections: [ { id: 'overview', n: '00', label: 'Overview' }, { id: 'logo', n: '01', label: 'Logo' }, { id: 'color', n: '02', label: 'Colour' }, { id: 'type', n: '03', label: 'Typography' }, { id: 'foundations', n: '04', label: 'Foundations' }, { id: 'iconography', n: '05', label: 'Iconography' }, { id: 'components', n: '06', label: 'Components' }, { id: 'patterns', n: '07', label: 'Patterns' }, { id: 'messaging', n: '08', label: 'Messaging' }, { id: 'voice', n: '09', label: 'Voice' }, { id: 'assets', n: '10', label: 'Assets' }, { id: 'hosted-assets', n: '11', label: 'Hosted assets' }, { id: 'motion', n: '12', label: 'Motion' }, ], }, { id: 'generators', label: 'Generators', sections: [ { id: 'gen-logo', n: '01', label: 'Logo' }, { id: 'gen-banner', n: '02', label: 'Banner & Social' }, { id: 'gen-pattern', n: '03', label: 'Pattern' }, ], }, { id: 'templates', label: 'Templates', sections: [ { id: 'tpl-overview', n: '00', label: 'Overview' }, { id: 'tpl-letter', n: '01', label: 'A4 letterhead' }, { id: 'tpl-report', n: '02', label: 'A4 report cover' }, { id: 'tpl-email', n: '03', label: 'Email' }, { id: 'tpl-signature', n: '04', label: 'Email signature' }, { id: 'tpl-slide', n: '05', label: 'Slide title' }, { id: 'tpl-invoice', n: '06', label: 'A4 invoice' }, { id: 'tpl-content-slide', n: '07', label: 'Slide content' }, { id: 'tpl-readme', n: '08', label: 'Repo README' }, { id: 'tpl-ticket-comment', n: '09', label: 'Ticket / PR comment' }, ], }, { id: 'agents', label: 'For agents', sections: [ { id: 'llms-overview', n: '00', label: 'llms.txt' }, { id: 'llms-assets', n: '01', label: 'Asset URLs' }, { id: 'llms-recipes', n: '02', label: 'Recipes' }, { id: 'tokens', n: '03', label: 'Design tokens' }, { id: 'tailwind', n: '04', label: 'Tailwind preset' }, { id: 'shadcn', n: '05', label: 'shadcn/ui theme' }, ], }, ]; const SECTION_TO_PAGE = Object.fromEntries( PAGES.flatMap(p => p.sections.map(s => [s.id, p.id])) ); /* ================================================= * Tweaks — theme + density + accent flavour * ================================================= */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "density": "comfortable", "accent": "aureolin" }/*EDITMODE-END*/; function applyTweaks(t) { const root = document.documentElement; root.setAttribute('data-theme', t.theme === 'dark' ? 'dark' : 'light'); // Density modifies body font-size baseline (14 compact, 16 comfortable, 18 cozy) document.body.style.fontSize = t.density === 'compact' ? '14px' : t.density === 'cozy' ? '17px' : '16px'; // Accent swap const accents = { aureolin: { 50: '#FEF8B8', 300: '#FDE033', 400: '#F7EC33', 500: '#E0D420', 800: '#5A5405' }, dodger: { 50: '#E6F2FF', 300: '#4DABFF', 400: '#1E96FC', 500: '#0E7EDB', 800: '#0D4A82' }, signal: { 50: '#FFE7E3', 300: '#FF8473', 400: '#FF331F', 500: '#E01E0B', 800: '#7A0F06' }, }; const a = accents[t.accent] || accents.aureolin; Object.entries(a).forEach(([k, v]) => root.style.setProperty(`--accent-${k}`, v)); } function TweaksPanel({ tweaks, setTweaks, onClose }) { const update = (patch) => { const next = { ...tweaks, ...patch }; setTweaks(next); applyTweaks(next); try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*'); } catch (e) {} }; return (
Tweaks
update({ theme: v })} /> update({ density: v })} /> update({ accent: v })} />
); } function TweakRow({ label, options, value, onChange }) { return (
{label}
{options.map(o => ( ))}
); } /* ================================================= * Variant switcher — sticky strip above the nav that * lets you compare Origin / Refine / Horizon side-by-side. * Writes the choice to (drives CSS) * and into VariantContext (drives the mark components). * ================================================= */ const VARIANTS = [ { id: 'origin', label: 'Origin', desc: 'Current system', tagline: 'Penn Blue · Aureolin · Inter', colors: ['#121541', '#F7EC33', '#FFFFFF'], }, { id: 'refine', label: 'Refine', desc: 'Subtle evolution', tagline: 'Oxford Ink · Saffron · Fraunces + Inter', colors: ['#0F1336', '#D89A0C', '#F6F1E5'], }, { id: 'horizon', label: 'Horizon', desc: 'Bold exploration', tagline: 'Ink Black · Electric Lime · Space Grotesk', colors: ['#0B0F10', '#BEF264', '#F4F4F0'], }, ]; function VariantPreviewMark({ id, size = 20, fill }) { if (id === 'refine') return ; if (id === 'horizon') return ; return ; } function VariantSwitcher({ variant, setVariant }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, [open]); const current = VARIANTS.find(v => v.id === variant) || VARIANTS[0]; const [curPrimary, curAccent] = current.colors; return (
{open && (
{VARIANTS.map(v => { const active = variant === v.id; const [primary, accent, canvas] = v.colors; return ( ); })}
)}
); } /* ================================================= * Top chrome (header) — brand mark + page tabs. * Section nav lives in the left SideNav. * ================================================= */ function Nav({ page, setPage, variant, setVariant }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 10); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const goto = (pageId) => { const p = PAGES.find(p => p.id === pageId); if (!p) return; setPage(pageId); const first = p.sections[0]?.id; if (first) { window.location.hash = first; window.scrollTo({ top: 0, behavior: 'auto' }); } }; return (
{ e.preventDefault(); goto('brand'); }} style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'inherit' }} >
Nexus ReGen
Design System
v0.1
); } /* ================================================= * SideNav — sticky vertical section list * ================================================= */ function SideNav({ active, sections, label }) { return ( ); } /* ================================================= * Root * ================================================= */ const VARIANT_STORAGE_KEY = 'nexus.brand.variant'; function App() { // Resolve initial page from URL hash, falling back to 'brand'. const initialPage = (() => { const hashId = (typeof window !== 'undefined' ? window.location.hash.slice(1) : ''); return SECTION_TO_PAGE[hashId] || 'brand'; })(); const [page, setPage] = useState(initialPage); const activePageDef = PAGES.find(p => p.id === page) || PAGES[0]; const [active, setActive] = useState(activePageDef.sections[0].id); const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS); const [tweaksOpen, setTweaksOpen] = useState(false); const [variant, setVariantState] = useState(() => { try { const stored = localStorage.getItem(VARIANT_STORAGE_KEY); if (stored === 'origin' || stored === 'refine' || stored === 'horizon') return stored; } catch (e) {} return 'origin'; }); const setVariant = (v) => { setVariantState(v); try { localStorage.setItem(VARIANT_STORAGE_KEY, v); } catch (e) {} }; // Sync variant to so CSS token scopes activate. // Also clear any inline --accent-* overrides left by the tweaks panel so // the variant's canonical accent ramp wins. useEffect(() => { document.documentElement.setAttribute('data-variant', variant); ['25','50','100','200','300','400','500','600','700','800','900'].forEach(k => { document.documentElement.style.removeProperty(`--accent-${k}`); }); }, [variant]); // Apply tweaks on mount — theme + density only, not accent (we let the // active variant define its own accent ramp; tweaking accent is opt-in // via the Tweaks panel). useEffect(() => { const root = document.documentElement; root.setAttribute('data-theme', TWEAK_DEFAULTS.theme === 'dark' ? 'dark' : 'light'); document.body.style.fontSize = TWEAK_DEFAULTS.density === 'compact' ? '14px' : TWEAK_DEFAULTS.density === 'cozy' ? '17px' : '16px'; }, []); // Scroll-spy — observes only the current page's sections. useEffect(() => { const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); }); }, { rootMargin: '-30% 0px -60% 0px' }); activePageDef.sections.forEach(s => { const el = document.getElementById(s.id); if (el) io.observe(el); }); return () => io.disconnect(); }, [page]); // Sync page state when the user navigates via hash (incl. browser back/forward). useEffect(() => { const onHash = () => { const id = window.location.hash.slice(1); const targetPage = SECTION_TO_PAGE[id]; if (targetPage && targetPage !== page) setPage(targetPage); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, [page]); // Tweaks bridge useEffect(() => { const onMsg = (e) => { const d = e.data; if (!d || typeof d !== 'object') return; if (d.type === '__activate_edit_mode') setTweaksOpen(true); if (d.type === '__deactivate_edit_mode') setTweaksOpen(false); }; window.addEventListener('message', onMsg); // Announce availability after listener is registered try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (err) {} return () => window.removeEventListener('message', onMsg); }, []); return (
); } ReactDOM.createRoot(document.getElementById('root')).render();