/* App shell — router and state. */ /* global React, ReactDOM, Brand, ScreenNav, About, Landing, Workspace, Pyramid, Heatmap, Workshop, emptySession, sessionFromSample, priorityCounts, encodeSession, decodeSession, readSessionFromHash, writeSessionToHash, clearSessionHash, currentShareUrl, summarizeEncoded, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "leadColor": "#685ad9", "followColor": "#10b981", "showGhostLabels": true, "compactWorkspace": false, "posterLayout": "stepped" }/*EDITMODE-END*/; function App() { // Fresh visits open on About (the manifesto). Hash-restored or room-bootstrapped // sessions override below — they jump straight to wherever the user left off. const [screen, setScreen] = useState("about"); const [project, setProject] = useState(""); const [mode, setMode] = useState("self"); // 'self' | 'workshop' const [session, setSession] = useState(() => emptySession()); // ── Workshop room ──────────────────────────────────────────────────────── // On boot: if URL has ?room=…, attempt to bootstrap. If sessionStorage has // a participantId for this room, silently reconnect. Otherwise prompt for // name + role via JoinRoomModal. const urlRoom = useMemo(() => (window.ROOM ? window.ROOM.fromUrl() : null), []); const [roomHandle, setRoomHandle] = useState(null); const [roomState, setRoomState] = useState(null); const [needsJoinPrompt, setNeedsJoinPrompt] = useState( !!(urlRoom && !urlRoom.participantId) ); const [roomBootstrapError, setRoomBootstrapError] = useState(null); // Wire the handle's subscribe → React state and clean up on unmount/change. useEffect(() => { if (!roomHandle) return; const unsub = roomHandle.subscribe((s) => setRoomState(s)); return () => { unsub(); }; }, [roomHandle]); // Auto-bootstrap from URL when participantId is already known. Jump // straight to the workspace — the participant was mid-vote when they // refreshed, no reason to drop them back on the landing create/join cards. useEffect(() => { if (!urlRoom || !urlRoom.participantId || roomHandle) return; setMode("workshop"); const h = window.ROOM.connect(urlRoom.code, urlRoom.participantId); setRoomHandle(h); setScreen("workspace"); return () => { h.close(); }; // run-once on mount; intentional // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Sync local project ↔ room project (room is source of truth when bound). useEffect(() => { if (roomState && typeof roomState.project === "string") { setProject(roomState.project); } }, [roomState && roomState.project]); // Seed local session from the room snapshot ONCE per room handle. // Without this, a reconnect (sessionStorage participantId already known) // would render Workspace with an empty session and the first click would // overwrite the participant's existing room votes with `unset`. const seededFromRoomRef = useRef(false); useEffect(() => { if (!roomHandle) { seededFromRoomRef.current = false; return; } if (seededFromRoomRef.current) return; if (!roomState) return; const me = roomState.participants && roomState.participants[roomHandle.participantId]; if (!me) return; // Build a full priorities map: every leaf gets a value (room votes // override, everything else defaults to unset). Mirrors emptySession's // shape so the rest of the app keeps working. const seeded = { priorities: {}, notes: {} }; for (const leaf of (window.ALL_LEAVES || [])) { seeded.priorities[leaf.id] = (me.priorities && me.priorities[leaf.id]) || "unset"; } if (me.notes) seeded.notes = { ...me.notes }; setSession(seeded); seededFromRoomRef.current = true; }, [roomHandle, roomState]); // Caller for the join modal — completes join then opens the socket and // jumps straight to the workspace. const completeJoin = async ({ name, role }) => { if (!urlRoom) return; try { setRoomBootstrapError(null); const { participantId } = await window.ROOM.join(urlRoom.code, { name, role }); setMode("workshop"); setNeedsJoinPrompt(false); const h = window.ROOM.connect(urlRoom.code, participantId); setRoomHandle(h); setScreen("workspace"); } catch (err) { setRoomBootstrapError(err); } }; const dismissJoinPrompt = () => { setNeedsJoinPrompt(false); if (window.ROOM) window.ROOM.clearRoomFromUrl(); }; // Share / restore — peek synchronously at load so the state-sync effect // never sees a "no restore yet, empty session" gap and clobbers the hash. // Suppressed entirely if we're booting into a room — the room IS the share. const [restorePrompt, setRestorePrompt] = useState(() => { if (typeof window === "undefined") return null; if (window.ROOM && window.ROOM.fromUrl()) return null; const encoded = readSessionFromHash(); if (!encoded) return null; return summarizeEncoded(encoded); }); const [shareOpen, setShareOpen] = useState(false); // If the hash was present but malformed, summarizeEncoded() returned null // above — strip it once on mount so the URL doesn't look broken. useEffect(() => { if (restorePrompt) return; if (readSessionFromHash()) clearSessionHash(); // run once // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Keep the URL hash in lock-step with state, so a refresh preserves work. // Suspended while the restore modal is up, OR when a room is bound (the // ?room=… query is the share artifact and writing a hash on top is noise). // About + Landing both count as entry screens — no hash until the user has // actually picked something or moved on. useEffect(() => { if (restorePrompt) return; if (roomHandle) { clearSessionHash(); return; } const onEntryScreen = screen === "about" || screen === "landing"; const hasMeaningfulState = !!project || !onEntryScreen || Object.values(session.priorities || {}).some(p => p && p !== "unset"); if (!hasMeaningfulState) { clearSessionHash(); return; } const encoded = encodeSession({ project, mode, screen, session }); writeSessionToHash(encoded); }, [screen, project, mode, session, restorePrompt, roomHandle]); const applyRestore = (decoded) => { setProject(decoded.project); setMode(decoded.mode); setSession(decoded.session); setScreen(decoded.screen); setRestorePrompt(null); }; const dismissRestore = () => { clearSessionHash(); setRestorePrompt(null); }; // Tweaks const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply tweak colours as CSS variables on root useEffect(() => { const r = document.documentElement; r.style.setProperty("--c-violet", tweaks.leadColor); r.style.setProperty("--c-emerald", tweaks.followColor); if (tweaks.showGhostLabels) { r.style.setProperty("--ghost-display", "inline-flex"); } else { r.style.setProperty("--ghost-display", "none"); } }, [tweaks.leadColor, tweaks.followColor, tweaks.showGhostLabels]); const onRoomCreated = ({ handle }) => { setRoomHandle(handle); setMode("workshop"); }; const screens = { about: , landing: , workspace: , pyramid: , heatmap: , workshop: , }; return (
{/* Mode banner (only when workshop). Shows room code + presence when a live room is bound. */} {mode === "workshop" && screen !== "landing" && screen !== "about" && (
{roomHandle && roomState ? ( <> Workshop room {roomHandle.code} {Object.values(roomState.participants || {}).length} here ) : ( <>Workshop mode · Projected to room )}
)}
{project && screen !== "landing" && screen !== "about" && ( {project} )}
{screens[screen]}
{restorePrompt && ( applyRestore(restorePrompt.decoded)} onDismiss={dismissRestore} /> )} {needsJoinPrompt && urlRoom && ( )} setTweak("leadColor", v)} /> setTweak("followColor", v)} /> setTweak("showGhostLabels", v)} help="The framework's durability is itself the message — out-of-scope leaves stay visible but de-emphasized." /> setScreen(v)} /> setMode(v)} />
); } const root = ReactDOM.createRoot(document.getElementById("root")); window.FRAMEWORK_READY.then(() => { root.render(); }); // ============================================================================ // Share button — top app bar. Opens a popover with the current sharable URL. // ============================================================================ function ShareButton({ open, setOpen, project, mode, screen, session }) { const wrapRef = useRef(null); const [copied, setCopied] = useState(false); useEffect(() => { if (!open) return; const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [open]); // Recompute the URL every time the popover opens — so it reflects the // latest state even if the parent's state-sync effect hasn't fired yet. const url = useMemo(() => { const encoded = encodeSession({ project, mode, screen, session }); return currentShareUrl(encoded); }, [project, mode, screen, session, open]); const ready = !!project || (screen !== "landing" && screen !== "about") || Object.values(session.priorities || {}).some(p => p && p !== "unset"); const copy = async () => { try { await navigator.clipboard.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (_) { // Fallback for non-clipboard environments — select the input. const el = document.getElementById("share-url-input"); if (el) { el.focus(); el.select(); } } }; return (
{open && (
SHARE · RESTORE

The whole session is encoded into the link. Send it to a collaborator or bookmark it for later — they’ll be asked before anything loads.

e.target.select()} style={{ flex: 1, border: 0, background: "transparent", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-2)", outline: "none", padding: "6px 8px", }} />
v1 · STATELESS · NO BACKEND
)}
); } function ShareIcon() { return ( ); } // ============================================================================ // Restore modal — shown on initial load when the URL carries a session. // Names the project, shows lead/follow counts, asks before loading. // ============================================================================ function RestoreModal({ summary, onRestore, onDismiss }) { // Esc dismisses (treats as "start fresh") — friendly default. useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onDismiss(); if (e.key === "Enter") onRestore(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onRestore, onDismiss]); const { project, counts, screen, mode } = summary; return (
Saved session

Pick up where {project ? "you" : "this"} left off?

This link carries a complete session for{" "} {project || "an untitled project"} . Restore it, or start fresh.

{(mode === "workshop" || (screen && screen !== "landing")) && (
{mode === "workshop" && ( · WORKSHOP MODE )} {screen && screen !== "landing" && ( · LAST ON: {String(screen).toUpperCase()} )}
)}
); } function RestoreStat({ label, value, color }) { return (
{label}
{value}
); } // ============================================================================ // Join room modal — shown when ?room=… is in the URL but we have no // participantId for it (i.e. fresh visitor following a shared link). // ============================================================================ function JoinRoomModal({ code, onJoin, onDismiss, error }) { const [name, setName] = useState(""); const [role, setRole] = useState(""); const [submitting, setSubmitting] = useState(false); const submit = async () => { if (!name.trim()) return; setSubmitting(true); try { await onJoin({ name: name.trim(), role: role.trim() }); } finally { setSubmitting(false); } }; useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onDismiss(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onDismiss]); return (
W Join workshop

You're joining room {code}

Tell the room who you are. Your name shows up next to your votes; your role is optional but helps the facilitator read the disagreement view.

setName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && name.trim()) submit(); }} autoFocus /> setRole(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && name.trim()) submit(); }} />
{error && (
{error.status === 404 ? "No room with this code (or it has been removed)." : error.status === 410 ? "This room has expired (older than 24h)." : error.status === 409 ? "Room is full (25 participant limit)." : `Couldn't join: ${error.message || "unknown error"}`}
)}
); }