/* global React, Icon, Eyebrow, Serif, Rule, DATA, VehicleFork, BeliefRanker, AudienceDoorways, SuccessPasses, AssumptionRanker, OpeningQuestions */ /* ===================================================================== THE STORY LAB — a companion working surface, reached from Narrative (09). Not a tenth stratum. A discovery instrument Alisa fills in and revisits. Persistence is keyed separately from the descent's position AND from the descent's capture store, mirroring the site's existing localStorage pattern (see primitives.jsx · useCapture / readStore / writeStore). ===================================================================== */ const { useState: uS, useEffect: uE, useRef: uR, useCallback: uCb, useContext: uCx, createContext: createCtx } = React; /* ---- Lab store (own namespace) ------------------------------------ */ const LAB_KEY = "sounding-line.storylab.v1"; function readLab() { try { return JSON.parse(localStorage.getItem(LAB_KEY) || "{}"); } catch (e) { return {}; } } function writeLab(obj) { try { localStorage.setItem(LAB_KEY, JSON.stringify(obj)); } catch (e) {} window.dispatchEvent(new CustomEvent("lab-change")); } /* value hook — fallback used when the key was never written */ function useLab(id, fallback) { const [val, setVal] = uS(() => { const s = readLab(); return id in s ? s[id] : fallback; }); const set = uCb((v) => { setVal(v); const s = readLab(); s[id] = v; writeLab(s); }, [id]); uE(() => { const sync = () => { const s = readLab(); setVal((cur) => { const nv = id in s ? s[id] : fallback; return nv === cur ? cur : nv; }); }; window.addEventListener("lab-change", sync); return () => window.removeEventListener("lab-change", sync); }, [id]); return [val, set]; } /* field hook — raw===null means the field was never touched (so seeds can show) */ function useLabField(id) { const [raw, setRaw] = uS(() => { const s = readLab(); return id in s ? s[id] : null; }); const set = uCb((v) => { setRaw(v); const s = readLab(); s[id] = v; writeLab(s); }, [id]); uE(() => { const sync = () => { const s = readLab(); setRaw((cur) => { const nv = id in s ? s[id] : null; return nv === cur ? cur : nv; }); }; window.addEventListener("lab-change", sync); return () => window.removeEventListener("lab-change", sync); }, [id]); return [raw, set]; } /* ---- Context: which tweaks the fields respond to ------------------ */ const LabContext = createCtx({ showSeeds: true, serifQ: false }); /* ---- Marker + tags ------------------------------------------------ */ function TurnMarker() { return ( ); } function LabTag({ kind }) { const turn = kind === "turn"; return ( {turn ? "Your turn" : "Seed"} ); } /* ---- Editable field (auto-grow textarea, seed/turn aware) --------- */ function LabField({ id, label, seed, placeholder, kind = "turn", minRows = 2 }) { const { showSeeds } = uCx(LabContext); const [raw, setRaw] = useLabField(id); const ref = uR(null); const touched = raw !== null && raw !== undefined; const value = touched ? raw : (kind === "seed" && showSeeds && seed ? seed : ""); const ph = kind === "seed" ? (seed || placeholder) : (placeholder || ""); const grow = () => { const el = ref.current; if (el) { el.style.height = "auto"; el.style.height = Math.max(el.scrollHeight, 22) + "px"; } }; uE(() => { grow(); }, [value]); return (
{label && (
{kind === "turn" && }{label}
)}