// Forge — Dossier (single-folio page). // One engagement per page, selected by URL hash: // dossier.html#forge-boreal → renders the boreal folio // dossier.html → falls back to the first folio // // Same workshop visual language — anthracite, iron, ember, Cardo + // JetBrains Mono — pitched as a bound technical file rather than a // marketing page. // ---------- shared atoms ---------- const dMonoLabel = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', }; const dIron = { color: 'var(--forge-iron-soft)' }; const dIronBright = { color: 'var(--forge-iron-bright)' }; const dEmber = { color: 'var(--forge-ember)' }; const pad2 = (n) => String(n).padStart(2, '0'); // the compass, smaller stamp const DossierMark = ({ size = 32 }) => ( ); // ---------- nav ---------- const DossierNav = ({ c }) => (
XLBS / FORGE · DOSSIER · {c.code}
← Selected work Open a brief →
); // ---------- meter strip ---------- const DossierMeter = ({ c }) => (
{Array.from({length: 28}).map((_, i) => (
))}
FOLIO · {c.code} · {c.year} · VIA {c.lab.toUpperCase()} · {c.offers.join(' · ')} EDITION 2026.04
); // ===================================================================== // FOLIO — the case sheet // ===================================================================== const Folio = ({ c }) => (
{/* title block */}
{c.code}
{c.year}
{c.offers.join(' · ')}
{c.lab.toUpperCase()}
● {c.sector.toUpperCase()}

{c.title}

{c.client_type}
{/* hero schematic */}
{/* problem + approach */}
{/* spec schedule */} {/* stack */}
03 · STACK
{c.stack.map((s) => ( {s} ))}
{/* deliverables */}
04 · DELIVERABLES
    5 ? 'ds-deliverables-2col' : ''} style={{ listStyle: 'none', margin: 0, padding: 0, borderTop: '1px solid var(--forge-rule-dark)', }}> {c.deliverables.map((d, i) => (
  1. D{pad2(i + 1)} {d}
    2. ))}
{/* published — public access */} {c.published && c.published.length > 0 && ( )} {/* outcome — ember plate */}
05 · OUTCOME
{c.outcome}
{/* sheet footer */}
END OF FOLIO · {c.code} ↑ SELECTED WORK SIGNED · XLBS · FORGE
); // ---------- folio sub-blocks ---------- const Block = ({ label, body }) => (
{label}

{body}

); const ScheduleTable = ({ c }) => { const rows = [ ['SECTOR', c.sector], ['CLIENT', c.client_type], ['LAB', c.lab], ['SCOPE', c.offers.join(' · ')], ['DURATION', c.duration], ['DATA VOLUME', c.data_volume], ['KEY METRIC', `${c.key_metric.value} (${c.key_metric.label})`], ]; return (
SCHEDULE
{rows.map(([k, v]) => { const isMetric = k === 'KEY METRIC'; return (
{k}
{v}
); })}
); }; const PublishedSection = ({ items }) => (
06 · PUBLISHED · PUBLIC ACCESS
    {items.map((item, i) => (
  1. P{pad2(i + 1)}
    {item.type}
    {item.title}
    {item.url && ( {item.url} → )} {!item.url && item.ref && ( {item.ref} )}
    2. ))}
); // ===================================================================== // COLOPHON — closing plate // ===================================================================== const Colophon = () => (
● NEXT STEP

What you read,
I can do again.

The shape repeats: architecture into build, diagnosis into migration, build into stewardship. If this one looks like yours, open a brief.

{[ ['SIGNATURE', 'XLBS · FORGE'], ['CONTACT', 'hello@xlbs.xyz'], ['REPLY', 'Two business days'], ].map(([k, v]) => (
{k}
{v}
))}
); // ===================================================================== // FOOTER // ===================================================================== const DossierFooter = ({ c }) => ( ); // ===================================================================== // NOT FOUND // ===================================================================== const NotFound = ({ requested }) => (
● NO FOLIO ON FILE

404.

No dossier is filed under #{requested}.

← Back to selected work
); // ===================================================================== // COMPOSE // ===================================================================== const readSlug = () => { if (typeof location === 'undefined') return ''; return location.hash.replace(/^#/, '').trim(); }; const ForgeDossier = () => { const [cases, setCases] = React.useState([]); const [loaded, setLoaded] = React.useState(false); const [slug, setSlug] = React.useState(readSlug()); React.useEffect(() => { (window.DOSSIER_CASES_PROMISE || Promise.resolve([])) .then((data) => { setCases(data); setLoaded(true); }) .catch(() => setLoaded(true)); }, []); React.useEffect(() => { const onHash = () => { setSlug(readSlug()); window.scrollTo({top: 0, behavior: 'instant'}); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); // empty hash → first folio; explicit-but-unknown hash → null const c = slug ? cases.find((x) => x.slug === slug) : cases[0]; // keep the title in sync so each folio feels like its own page React.useEffect(() => { if (typeof document === 'undefined') return; document.title = c ? `${c.code} ${c.title} | Forge` : loaded ? 'Dossier | Forge' : 'Forge'; }, [c, loaded]); if (!loaded) return null; if (slug && !c) return ; if (!c) return null; return (
); }; Object.assign(window, { ForgeDossier });