/* ============================================================= KAIROS·1 — Shared SPINE overlay ============================================================= The constellation of all chambers. Summoned from inside any chamber via `S` (or the small spine glyph in the top-right chrome). Dismissed via `Esc` or click outside the map. The spine reveals the doctrinal connection topology of the runtime — not a grid, but the actual routing relationships between chambers. Looking at the spine is looking at the building's blueprint while standing in a room. Selecting an open chamber initiates a transition (see transition.js): the current chamber recedes, the spine flashes briefly, then the destination chamber emerges. ============================================================= */ const { useEffect: spineUseEffect, useState: spineUseState } = React; // Canonical chamber constellation. Positions are fixed — // spatial constancy is constitutional. These coordinates are // in a 1000×700 viewBox and never change. Depth = id number; // chambers numbered higher sit deeper in the doctrine. // // Refinement 07: the spine is no longer a constellation. It is // a vertical subterranean shaft. Chambers stack by depth; the // reader senses descent into execution reality itself. const SPINE_CHAMBERS = [ { id: '01', slug: 'sequence', name: 'Sequence', x: 500, y: 60, status: 'open', coord: 'S·1' }, { id: '02', slug: 'constraint', name: 'Constraint Observatory', x: 500, y: 160, status: 'open', coord: 'C·2' }, { id: '03', slug: 'output-reality', name: 'Output Reality', x: 500, y: 260, status: 'pending', coord: 'O·3' }, { id: '04', slug: 'failure-recovery', name: 'Failure & Recovery', x: 500, y: 360, status: 'pending', coord: 'F·4' }, { id: '05', slug: 'human-constraint', name: 'Human Constraint', x: 360, y: 430, status: 'pending', coord: 'H·5' }, { id: '06', slug: 'structural-constraint', name: 'Structural Constraint', x: 640, y: 430, status: 'open', coord: 'X·6' }, { id: '07', slug: 'capacity-expansion', name: 'Capacity Expansion', x: 500, y: 510, status: 'open', coord: 'K·7' }, { id: '08', slug: 'multi-scale', name: 'Multi-Scale Systems', x: 500, y: 590, status: 'open', coord: 'M·8' }, { id: '09', slug: 'character', name: 'Character of the Executor', x: 500, y: 660, status: 'open', coord: 'E·9' }, ]; // Doctrinal routing — derived from each chamber's spec. // Refinement 07: in the vertical shaft, edges represent doctrinal // descent paths, not constellation adjacency. Higher → lower. const SPINE_EDGES = [ ['01','02'], ['02','03'], ['03','04'], ['04','05'], ['04','06'], ['05','06'], ['02','05'], ['02','06'], ['03','05'], ['03','06'], ['05','07'], ['06','07'], ['07','08'], ['08','09'], ['05','09'], ['06','08'], ]; // URL for each chamber slug. Pending chambers route to nothing. // Sequence and Constraint are both live; the others are stubs. function chamberHref(slug) { switch (slug) { case 'sequence': return '/runtime/sequence'; case 'constraint': return '/runtime/constraint'; case 'structural-constraint': return '/runtime/structural'; case 'capacity-expansion': return '/runtime/capacity'; case 'multi-scale': return '/runtime/multiscale'; case 'character': return '/runtime/character'; default: return null; } } function Spine({ currentSlug, visible, onDismiss }) { // Dismiss on Esc + click-outside spineUseEffect(() => { if (!visible) return; function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); onDismiss && onDismiss(); } } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [visible, onDismiss]); const current = SPINE_CHAMBERS.find(c => c.slug === currentSlug); const currentDepth = current ? parseInt(current.id, 10) : '—'; function onChamberClick(c) { if (c.status !== 'open') return; if (c.slug === currentSlug) { onDismiss && onDismiss(); return; } const href = chamberHref(c.slug); if (!href) return; // Use the shared transition helper if available; fall back to direct nav. if (window.kairos && window.kairos.transition && window.kairos.transition.depart) { window.kairos.transition.depart({ from: currentSlug, to: c.slug, href }); } else { window.location.href = href; } } return (
— The shaft · underground observatory descent
KAIROS·1 · nine depths, one organism
Depth encodes time. Surface holds near-term motion; foundation holds multi-decade continuity. The chamber you stand in is one stratum of the doctrine.
{/* Geological zone gradients — surface lighter, foundation darker. Per Refinement 08: depth encodes time. Each band carries its own density. Strata, not labels. */} {/* Geological zones — horizontal strata behind everything */} {/* Stratum seams — the geology between bands */} {/* The shaft — a faint vertical column behind the chambers, suggesting subterranean descent geometry */} {/* Depth-band markers — mono telemetry on the left edge. Per Refinement 08: each band names a temporal horizon, not just a depth. */} SURFACE near-term motion DIAGNOSIS observable cycles CAUSE long-cycle forces FOUNDATION multi-decade continuity {/* Edges — drawn first, beneath nodes */} {SPINE_EDGES.map(([a, b], i) => { const A = SPINE_CHAMBERS.find(c => c.id === a); const B = SPINE_CHAMBERS.find(c => c.id === b); if (!A || !B) return null; const lit = (A.slug === currentSlug || B.slug === currentSlug); return ( ); })} {/* Nodes */} {SPINE_CHAMBERS.map(c => { const isCurrent = c.slug === currentSlug; const isOpen = c.status === 'open'; return ( onChamberClick(c)} style={{ cursor: isOpen && !isCurrent ? 'pointer' : 'default' }} > {isCurrent ? ( ) : null} {c.id} {c.name} {c.coord} {!isOpen ? ( pending ) : null} {isCurrent ? ( you are here ) : null} ); })}
9 chambers · {SPINE_CHAMBERS.filter(c => c.status === 'open').length} open · {SPINE_CHAMBERS.filter(c => c.status === 'pending').length} pending current depth · {currentDepth}/9 esc to return
); } // Small re-usable hook: any chamber that wants the spine // available wires this once. Returns { visible, open, close }. function useSpine() { const [visible, setVisible] = spineUseState(false); spineUseEffect(() => { function onKey(e) { const tag = (e.target && e.target.tagName) || ''; // Don't capture S while typing in a textarea/input if (tag === 'TEXTAREA' || tag === 'INPUT') return; if ((e.key === 's' || e.key === 'S') && !e.metaKey && !e.ctrlKey && !e.altKey) { e.preventDefault(); setVisible(v => !v); } } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); return { visible, open: () => setVisible(true), close: () => setVisible(false), toggle: () => setVisible(v => !v), }; } window.Spine = Spine; window.useSpine = useSpine; window.SPINE_CHAMBERS = SPINE_CHAMBERS;