= 2 ? `2px solid ${t.seal}` : 'none',
borderLeft: (i === 0 || i === 2) ? `2px solid ${t.seal}` : 'none', borderRight: (i === 1 || i === 3) ? `2px solid ${t.seal}` : 'none',
}} />
))}
{/* dashed perforation ring */}
);
}
// ─── Hover popover preview ────────────────────────────────
function Preview({ item, position, dark }) {
const t = tokens(dark);
if (!item) return null;
return (
SUEDE LABS
{formNum}
BUREAU OF OPERATIONS
FILED · UNRESTRICTED
FORM {formNo(item.secIdx, item.itemIdx)}
● {statusFor(item.url)}
{item.label}
{item.desc}
{hostOf(item.url)}
{classFor(hostOf(item.url))}
EXAMINED {examDate(item.url)}
↳ click to open form
{/* paper guides */}
{/* endpoint */}
OPEN ENDPOINT ↗ {item.url.replace(/^https?:\/\//,'')}
{/* related */}
{/* right rail — schematic */}
);
}
// ─── Row ──────────────────────────────────────────────────
function Row({ item, n, secIdx, itemIdx, sectionTitle, section, dark, onHover, expanded, onToggle }) {
const t = tokens(dark);
const host = hostOf(item.url);
const status = statusFor(item.url);
const cls = classFor(host);
const [stamped, setStamped] = useState(false);
return (
);
}
function SectionBlock({ section, secIdx, query, classFilter, statusFilter, audience, onHover, dark, startIdx, expandedKey, setExpandedKey, registerRef }) {
const t = tokens(dark);
const ref = useRef(null);
useEffect(() => { registerRef(section.id, ref.current); }, []);
const visible = useMemo(() => {
return section.items.map((it, i) => ({ it, i })).filter(({ it }) => {
if (audience && audience !== 'all' && !(it.aud || []).includes(audience)) return false;
if (query) {
const q = query.toLowerCase();
const hit = it.label.toLowerCase().includes(q) ||
(it.desc||'').toLowerCase().includes(q) ||
it.url.toLowerCase().includes(q) ||
section.title.toLowerCase().includes(q);
if (!hit) return false;
}
if (classFilter && classFor(hostOf(it.url)) !== classFilter) return false;
if (statusFilter && statusFor(it.url) !== statusFilter) return false;
return true;
});
}, [query, classFilter, statusFilter, audience, section]);
if (visible.length === 0) return null;
return (
↳ FORM
{formNo(secIdx, itemIdx)}
{item.label}
{item.desc}
{/* attestation row */}
CLASS
{classFor(host)}
STATE
● {statusFor(item.url)}
EXAMINED
{examDate(item.url)}
EXAMINER
#047 · BUREAU
RELATED · {section.title.toUpperCase()}
{related.map((r) => (
{r.label}
))}
{host}SLBO
{item.label}
{classFor(host)}{statusFor(item.url)}
⌒ Johnny Suede
SIGNATURE · BUREAU OF OPERATIONS
{examDate(item.url)}
DATE OF ATTESTATION
EXAMINED ✓
{section.latin.toUpperCase().replace('.','')}
{String(secIdx+1).padStart(2,'0')}.00
{section.title}
· {section.sub.toUpperCase()}
{visible.length} / {section.items.length} ENTRIES · p. {String(startIdx+1).padStart(2,'0')}
{visible.map(({ it, i }, k) => {
const key = section.id + '/' + i;
return (
NEWS WIRE
);
}
// ─── Command palette (⌘K) ─────────────────────────────────
function Palette({ open, onClose, data, dark, onJump }) {
const t = tokens(dark);
const [q, setQ] = useState('');
const [idx, setIdx] = useState(0);
const inputRef = useRef(null);
useEffect(() => { if (open) { setQ(''); setIdx(0); setTimeout(() => inputRef.current?.focus(), 0); } }, [open]);
const results = useMemo(() => {
const all = [];
data.sections.forEach((s, si) => s.items.forEach((it, ii) => all.push({ ...it, secIdx: si, itemIdx: ii, sectionTitle: s.title, sectionId: s.id })));
if (!q) return all.slice(0, 14);
const ql = q.toLowerCase();
return all.filter(x =>
x.label.toLowerCase().includes(ql) ||
(x.desc||'').toLowerCase().includes(ql) ||
x.sectionTitle.toLowerCase().includes(ql) ||
x.url.toLowerCase().includes(ql)
).slice(0, 14);
}, [q, data]);
if (!open) return null;
return (
{line}{line}
e.stopPropagation()} style={{
width: 560, background: t.bgPaper, border: `1px solid ${t.rule}`,
fontFamily: FONTS.mono, color: t.fg, boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
}}>
⌘K
{ setQ(e.target.value); setIdx(0); }}
onKeyDown={(e) => {
if (e.key === 'ArrowDown') { e.preventDefault(); setIdx((idx + 1) % Math.max(1, results.length)); }
if (e.key === 'ArrowUp') { e.preventDefault(); setIdx((idx - 1 + results.length) % Math.max(1, results.length)); }
if (e.key === 'Enter' && results[idx]) {
if (e.shiftKey) onJump(results[idx]);
else window.open(results[idx].url, '_blank');
onClose();
}
if (e.key === 'Escape') onClose();
}}
placeholder="Search registry · ↵ open ⇧↵ jump esc close"
style={{ flex:1, background:'transparent', border:0, outline:'none', color: t.fg, fontSize: 14, fontFamily: FONTS.serif, fontStyle:'italic' }} />
{results.length}
{results.map((r, i) => (
setIdx(i)}
onClick={() => { window.open(r.url, '_blank'); onClose(); }}
style={{
display:'grid', gridTemplateColumns:'80px 1fr auto', gap: 12, alignItems:'baseline',
padding:'10px 16px', cursor:'pointer',
background: i === idx ? t.hi : 'transparent', borderBottom: `1px solid ${t.ruleSoft}`,
}}>
{formNo(r.secIdx, r.itemIdx)}
{r.label}
· {r.sectionTitle.toUpperCase()}
↗
))}
{results.length === 0 && (
No entries match “{q}”.
)}
BUREAU OF OPERATIONS · COMMAND PALETTE
↑↓ NAVIGATE
{!booted && setBooted(true)} />}
{/* Ticker */}
{_tweaks.showTicker !== false && 
{/* table header row */}
{/* Audience filter pills */}
{ setAudience(v); setTweak && setTweak({ audience: v }); }} />
{/* Hero / front matter */}
Registry
of
Operating
{/* Sister content — manifesto excerpt + founder rail + dispatches */}
setPaletteOpen(false)} data={data} dark={dark} onJump={jumpTo} />
);
}
return SuedeBureau;
})();
window.SuedeBureau = Bureau;
SLBO · BUREAU OF OPERATIONS
Suede Labs — Public Registry of Surfaces
QUERY ▸
setQuery(e.target.value)} placeholder="label / description / url"
style={{ flex:1, background:'transparent', border:0, outline:'none', color: t.fg, fontFamily: FONTS.mono, fontSize: 12 }} />
NO.FORMENTRYSYNOPSISCLASSSTATEENDPOINT
FORM SLBO-00 · PUBLIC FILING · UNRESTRICTED · ISSUE I · MMXXVI
Registry
of
Operating
Surfaces.
A canonical, machine-readable index of every console, registry, agent, and editorial
surface operated under the auspices of Suede Labs. Each entry is filed by form number,
examined, and bears a current state attestation.
{/* Metrics row */}
{[
['FASCICLES', data.sections.length],
['ENTRIES', totalCount],
['CHAINS', '3'],
['ATTESTED', new Date().toISOString().slice(0,10)],
['EXAMINER', '#047'],
['LICENSE', 'PUBLIC'],
].map(([k,v], i) => (
))}
{/* Examiner signature line */}
{k}
{v}
⌒ Johnny Suede
FILING SIGNATURE · BUREAU CHAIR
Examiner #047
ATTESTING EXAMINER
{new Date().toISOString().slice(0,10)}
DATE OF FILING
{data.sections.map((s, i) => {
const start = runningIdx;
runningIdx += s.items.length;
return