// Direction A — ATLAS // Museum / catalogue raisonné aesthetic. // Cream paper, deep ink, serif display + mono labels. // Numbered entries (Roman + Arabic), hover reveals a "plate" card // at right showing description + URL preview. // // Reads: window.SUEDE_DATA // Mounts as const Atlas = (() => { const { useState, useEffect, useRef, useMemo } = React; // ─── Tokens ─────────────────────────────────────────────── const tokens = (dark) => ({ paper: dark ? '#161311' : '#f4efe5', paperDeep: dark ? '#0f0d0c' : '#ece5d6', ink: dark ? '#ede5d3' : '#1a1612', inkSoft: dark ? 'rgba(237,229,211,0.62)' : 'rgba(26,22,18,0.62)', rule: dark ? 'rgba(237,229,211,0.18)' : 'rgba(26,22,18,0.18)', ruleSoft: dark ? 'rgba(237,229,211,0.08)' : 'rgba(26,22,18,0.08)', accent: dark ? '#d6a86a' : '#7a3b1f', plate: dark ? '#1e1a17' : '#faf6ec', }); const FONTS = { serif: '"Cormorant Garamond", "EB Garamond", Georgia, serif', sans: '"Inter Tight", "Helvetica Neue", Arial, sans-serif', mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace', }; const roman = (n) => { const map = [['M',1000],['CM',900],['D',500],['CD',400],['C',100],['XC',90],['L',50],['XL',40],['X',10],['IX',9],['V',5],['IV',4],['I',1]]; let s = '', x = n; for (const [r, v] of map) while (x >= v) { s += r; x -= v; } return s; }; // ─── Boot intro ─────────────────────────────────────────── function Boot({ done, dark }) { const t = tokens(dark); const [phase, setPhase] = useState(0); useEffect(() => { const a = setTimeout(() => setPhase(1), 380); const b = setTimeout(() => setPhase(2), 1100); const c = setTimeout(() => setPhase(3), 1900); const d = setTimeout(() => done(), 2500); return () => [a,b,c,d].forEach(clearTimeout); }, []); return (
= 3 ? 0 : 1, pointerEvents: phase >= 3 ? 'none' : 'auto', }}>
= 0 ? 1 : 0, transition:'opacity .4s' }}>Estab. MMXXIV · Issue No. 001 · Bureau of Operations
= 1 ? 1 : 0, transform: `scale(${phase >= 1 ? 1 : 0.92})`, transition: 'opacity .5s, transform .6s cubic-bezier(.2,.7,.3,1)', }} />
= 2 ? 1 : 0, transform: `translateY(${phase >= 2 ? 0 : 6}px)`, transition: 'opacity .5s, transform .5s', }}> Suede Labs · Bureau of Operations
= 2 ? 1 : 0, transition:'opacity .5s .15s', }}> OPENING THE INDEX …
); } // ─── Topbar ──────────────────────────────────────────────── function Topbar({ dark, onToggleDark, query, setQuery, totalCount, filteredCount }) { const t = tokens(dark); return (
Suede Labs
Suede Labs · Bureau of Operations
SEARCH setQuery(e.target.value)} placeholder="catalogue, asset, or url…" style={{ flex:1, background:'transparent', border:0, outline:'none', fontFamily: FONTS.serif, fontSize: 15, color: t.ink, fontStyle:'italic', }} /> {query ? `${filteredCount}/${totalCount}` : totalCount}
); } // ─── Plate (hover preview) ───────────────────────────────── function PlatePreview({ item, sectionTitle, secIdx, itemIdx, dark }) { const t = tokens(dark); if (!item) { return (
Plate · Reader's Aid
Hover an entry in the index to view its plate. The plate displays a catalogue number, a short description, and the canonical destination.
Bureau of Operations
Issue 001 · Suede Labs
); } const host = (() => { try { return new URL(item.url).host; } catch (e) { return item.url; } })(); return (
PL. {String(secIdx + 1).padStart(2,'0')}.{String(itemIdx + 1).padStart(2,'0')}
● ACTIVE
{sectionTitle}
{item.label}
{item.desc}
{/* "Plate" — stylized site preview, never the real iframe */}
{/* etched grid */}
{host}
{item.label}
); } // ─── Section ────────────────────────────────────────────── function Section({ section, secIdx, query, onHover, hovered, dark }) { const t = tokens(dark); const visible = useMemo(() => { if (!query) return section.items.map((it, i) => ({ it, i })); const q = query.toLowerCase(); return section.items .map((it, i) => ({ it, i })) .filter(({ it }) => it.label.toLowerCase().includes(q) || (it.desc || '').toLowerCase().includes(q) || it.url.toLowerCase().includes(q) || section.title.toLowerCase().includes(q) ); }, [query, section]); if (visible.length === 0) return null; return (
{section.latin}
{section.title}
{section.sub}
    {visible.map(({ it, i }) => { const isHover = hovered && hovered.url === it.url; return (
  1. onHover({ ...it, secIdx, itemIdx: i, sectionTitle: section.title })} onMouseLeave={() => onHover(null)}> {roman(secIdx + 1)}·{String(i + 1).padStart(2,'0')} {it.label} {it.desc} {it.url.replace(/^https?:\/\//,'').replace(/^www\./,'').split('/')[0]} ↗
    2. ); })}
); } // ─── Main ───────────────────────────────────────────────── function SuedeAtlas({ dark = false, onToggleDark }) { const [query, setQuery] = useState(''); const [hovered, setHovered] = useState(null); const [booted, setBooted] = useState(false); const t = tokens(dark); const data = window.SUEDE_DATA; const totalCount = data.sections.reduce((a, s) => a + s.items.length, 0); const filteredCount = useMemo(() => { if (!query) return totalCount; const q = query.toLowerCase(); return data.sections.reduce((a, s) => a + s.items.filter(it => it.label.toLowerCase().includes(q) || (it.desc||'').toLowerCase().includes(q) || it.url.toLowerCase().includes(q) || s.title.toLowerCase().includes(q) ).length, 0); }, [query, data, totalCount]); return (
{!booted && setBooted(true)} />} {/* Hero — letterpress front matter */}
Volume I · Issue 001 · MMXXVI · Public Index

An Atlas of Operations

Catalogue of every public surface, registry, protocol and console operated by Suede Labs — recorded, numbered, and made available for ordinary use.
COLOPHON
{data.sections.length} fascicles
{totalCount} entries
set in Cormorant & JetBrains Mono
maintained by the Bureau
last revision · today
{/* Table of contents */} {/* Body — two-column: index + plate */}
{data.sections.map((s, i) => (
))}
{/* Footer */}
); } return SuedeAtlas; })(); window.SuedeAtlas = Atlas;