// Numo Paper — Docs shared components // Top nav, page shell, side nav, section/stage/spec helpers. // Every doc page imports this. const { useState: dsUseState, useMemo: dsUseMemo, useEffect: dsUseEffect } = React; // --- Brand lockup (inline so pages are self-contained) --- const DSLockup = ({ height = 20 }) => ( ); // ---- Top nav ---- const DSNav = ({ current }) => { const links = [ { id: 'overview', href: 'index.html', label: 'Overview' }, { id: 'foundations', href: 'foundations.html', label: 'Foundations' }, { id: 'components', href: 'components.html', label: 'Components' }, { id: 'patterns', href: 'patterns.html', label: 'Patterns' }, { id: 'guidelines', href: 'guidelines.html', label: 'Guidelines' }, ]; return ( ); }; // ---- Page shell with optional side-nav ---- const DSPage = ({ sections, active, onActive, children }) => (
{children}
); // ---- Hero ---- const DSHero = ({ eyebrow, title, lede }) => (
{eyebrow &&
{eyebrow}
}

{title}

{lede &&

{lede}

}
); // ---- Section ---- const DSSection = ({ id, title, lede, children }) => (

{title}

{lede &&

{lede}

}
{children}
); const DSSubsection = ({ title }) =>

{title}

; const DSP = ({ children }) =>

{children}

; // ---- Stage: a card wrapping a live example ---- const DSStage = ({ label, sunk, children, style }) => (
{label &&
{label}
} {children}
); // ---- Spec table ---- const DSSpec = ({ rows, columns = ['Token', 'Value', 'Notes'] }) => ( {columns.map(c => )} {rows.map((r, i) => ( {r.map((cell, j) => ( ))} ))}
{c}
{cell}
); // ---- Swatch ---- const DSSwatch = ({ color, name, value }) => (
{name}
{value || color}
); // ---- Callouts ---- const DSCallout = ({ kind = 'note', title, children }) => (
{title &&
{title}
}
{children}
); // ---- State label ---- const DSStateLabel = ({ children }) =>
{children}
; // ---- Mount ---- const dsMount = (El) => { const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); }; Object.assign(window, { DSLockup, DSNav, DSPage, DSHero, DSSection, DSSubsection, DSP, DSStage, DSSpec, DSSwatch, DSCallout, DSStateLabel, dsMount, });