/* global React, Icon, Eyebrow, Serif, DATA, LabSection, LabField, LabTag, LabContext, useLab */ /* ===================================================================== THE STORY LAB — interaction sections (the working spine). Reuses the descent's interaction grammar: the fork (futures), draggable ranking (cruxes), the lens switcher (lenses), the assumptions grid. Every [her turn] surface is a visibly empty, editable input; every [seed] is pre-filled but overwritable. Nothing resolves a choice she hasn't made. ===================================================================== */ const { useState: uP, useRef: uPR, useContext: uPCx } = React; /* ---- drag grip glyph ---------------------------------------------- */ function Grip() { return ( ); } /* ---- reusable draggable ranker ------------------------------------ */ function Ranker({ labKey, items, renderItem }) { const ids = items.map((i) => i.id); const [order, setOrder] = useLab(labKey, ids); const clean = (Array.isArray(order) ? order : ids).filter((x) => ids.includes(x)); const full = clean.concat(ids.filter((x) => !clean.includes(x))); const dragId = uPR(null); const [over, setOver] = uP(null); const [dragging, setDragging] = uP(null); const move = (fromId, toId) => { if (!fromId || fromId === toId) return; const a = full.filter((x) => x !== fromId); const idx = a.indexOf(toId); a.splice(idx < 0 ? a.length : idx, 0, fromId); setOrder(a); }; return (
{full.map((id, i) => { const it = items.find((x) => x.id === id); if (!it) return null; return (
{ if (e.target.closest && e.target.closest("button, input, textarea")) { e.preventDefault(); return; } dragId.current = id; setDragging(id); e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", id); } catch (_) {} }} onDragOver={(e) => { e.preventDefault(); if (over !== id) setOver(id); }} onDragEnd={() => { dragId.current = null; setDragging(null); setOver(null); }} onDrop={(e) => { e.preventDefault(); move(dragId.current, id); setOver(null); setDragging(null); }} className={over === id && dragging !== id ? "lab-drag-over" : ""} style={{ display: "flex", alignItems: "flex-start", gap: 14, padding: "14px 16px", borderBottom: i < full.length - 1 ? "1px solid var(--fog)" : "none", background: dragging === id ? "var(--bone)" : "transparent", opacity: dragging === id ? 0.5 : 1 }}> {i + 1}
{renderItem(it, i)}
); })}
); } function RankHint() { return (
Drag to rank
); } /* ---- seeded rank item with a what / why / example reveal ---------- */ function DetailBlock({ label, text, accent }) { if (!text) return null; return (
{label}
{text}
); } function RankDetail({ item }) { const [open, setOpen] = uP(false); const has = item.what || item.why || item.example; return (
{item.text}
{item.flag && (
High uncertainty · {item.flag}
)} {has && (
)}
); } /* ============================ STAGE 02 · vehicle fork =============== */ function VehicleFork({ data }) { const [choice, setChoice] = useLab("vehicles.choice", ""); const chosen = data.options.find((o) => o.id === choice); const cellBorder = (i) => ({ borderRight: "1px solid var(--ink)", borderBottom: "1px solid var(--ink)", }); return (

{data.hold}

{data.options.map((o, i) => { const on = choice === o.id; return (
VEHICLE {o.n}
{o.label}
{o.what}
{o.who}
Starting read
{o.seedRead}
); })}
{/* decision prompt (always live) */}
The decision prompt
{data.prompt}
{chosen ? (
Leaning toward {chosen.label}. Held, not decided. The story follows the vehicle, not the other way around. Change it whenever the evidence does.
) : (
Nothing is selected. Write a read for each, then lean toward one when the fastest path to proof is clear.
)}
); } /* ============================ STAGE 04 · belief ranker ============= */ function BeliefRanker({ data }) { return ( ( it.turn ? (
) : ( ) )} />
01 sets the opening of any deck.
); } /* ============================ STAGE 05 · audience doorways ========= */ function AudienceDoorways({ data }) { const [active, setActive] = uP(data.doors[0].id); const door = data.doors.find((d) => d.id === active) || data.doors[0]; return (
{/* door selector */}
{data.doors.map((d, i) => { const on = d.id === active; return ( ); })}
Design for the first door first. Clate before anyone else.
{/* the door's three fields */}
{door.tag}{door.priority ? " · priority" : ""}
{door.note}
{data.fields.map((f) => ( ))}
); } /* ============================ STAGE 06 · make it stick ============= */ function SuccessPasses({ data }) { return (
{data.cards.map((c) => (
—
{c.key}
{c.prompt}
))}
); } /* ============================ STAGE 07 · assumption ranker ========= */ function AssumptionRanker({ data }) { const empties = Array.from({ length: data.emptyRows || 0 }, (_, i) => ({ id: "user" + (i + 1), turn: true })); const items = data.items.concat(empties); return ( ( it.turn ? (
) : ( ) )} /> ); } /* ============================ STAGE 08 · opening + shock =========== */ function LineList({ audId, seedLines, placeholder }) { const { showSeeds } = uPCx(LabContext); const [stored, setStored] = useLab("openings." + audId + ".lines", null); const eff = stored === null ? (showSeeds ? seedLines.slice() : []) : stored; const rows = eff.length ? eff : [""]; const commit = (arr) => setStored(arr); const setAt = (i, v) => { const a = rows.slice(); a[i] = v; commit(a); }; const add = () => { if (rows.length < 7) commit(rows.concat("")); }; const remove = (i) => { const a = rows.filter((_, j) => j !== i); commit(a.length ? a : [""]); }; return (
{rows.map((line, i) => (
{String(i + 1).padStart(2, "0")}