/* global React, Icon, Eyebrow, Serif, useCapture */ /* ===================================================================== Interactions · set 1 — Bridge (02), Futures (03), Assumptions (04) ===================================================================== */ const { useState: useS1 } = React; /* ---------------------------------------------------------------- BRIDGE */ function BridgeObject({ data }) { const [laid, setLaid] = useS1(() => new Set()); const [sel, setSel] = useS1(null); // {type, i} const allLaid = laid.size === data.deck.length; const togglePlate = (i) => { setLaid((prev) => { const n = new Set(prev); n.has(i) ? n.delete(i) : n.add(i); return n; }); setSel({ type: "plate", i }); }; const Pillar = ({ side }) => (
{side.label}
{side.items.map((it) => (
{it}
))}
); const note = sel ? (sel.type === "plate" ? data.deck[sel.i] : data.canyon[sel.i]) : null; return (
{/* canyon */}
{/* bridge deck */}
{data.deck.map((d, i) => { const on = laid.has(i); const active = sel && sel.type === "plate" && sel.i === i; return ( ); })}
{/* canyon floor */}
The canyon
{data.canyon.map((c, i) => { const active = sel && sel.type === "friction" && sel.i === i; return ( ); })}
{/* detail + caption strip */}
{note ? (
{sel.type === "plate" ? note.plate : note.word} {note.note}
) : (
Tap a word in the canyon to see what blocks the crossing. Lay each plate of the bridge — that is what the accelerator actually builds.
)}
{data.caption}
); } /* --------------------------------------------------------------- FUTURES */ function FuturesFork({ data }) { const [choice, setChoice] = useCapture("text:future", ""); return (
{data.map((f, i) => { const chosen = choice === f.id; return ( ); })}
{choice === "platform" && (
— The clearest envisioned choice. Let the accelerator be the form, not the purpose.
)} {choice && choice !== "platform" && (
A reasonable future — but ask what it intentionally gives up. The deeper opportunity sits in Future 3.
)}
); } /* ----------------------------------------------------------- ASSUMPTIONS */ function AssumptionsGrid({ data, worryOptions }) { const [filter, setFilter] = useS1("all"); const [open, setOpen] = useS1(null); const [worry, setWorry] = useCapture("text:worry", ""); const shown = data.filter((a) => filter === "all" || a.kind === filter); const chip = (key, label) => ( ); return (
Sort the pile {chip("all", "All 9")} {chip("adoption", "Adoption")} {chip("activity", "Activity")}
{shown.map((a) => { const isOpen = open === a.id; return ( ); })}
{/* capture: which worries you most */}
Capture · which assumption worries you most?
{worryOptions.map((w) => { const on = worry === w; return ( ); })}
); } Object.assign(window, { BridgeObject, FuturesFork, AssumptionsGrid });