/* App shell — router and state. */ /* global React, ReactDOM, Brand, ScreenNav, 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() { const [screen, setScreen] = useState("landing"); const [project, setProject] = useState(""); const [mode, setMode] = useState("self"); // 'self' | 'workshop' const [session, setSession] = useState(() => emptySession()); // Share / restore — peek synchronously at load so the state-sync effect // never sees a "no restore yet, empty session" gap and clobbers the hash. const [restorePrompt, setRestorePrompt] = useState(() => { const encoded = (typeof window !== "undefined") ? readSessionFromHash() : null; 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 — otherwise we'd overwrite the // saved hash with the empty default session before the user decides. useEffect(() => { if (restorePrompt) return; const hasMeaningfulState = !!project || screen !== "landing" || 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]); 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 screens = { landing: , workspace: , pyramid: , heatmap: , workshop: , }; return (

{/* Mode banner (only when workshop) */} {mode === "workshop" && screen !== "landing" && (

Workshop mode · Projected to room

)}

{project && screen !== "landing" && ( {project} )}

{screens[screen]}

{restorePrompt && ( applyRestore(restorePrompt.decoded)} onDismiss={dismissRestore} /> )} 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" || 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 && ( )}

); } 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 ( ); } function RestoreStat({ label, value, color }) { return (

{label}

{value}

); }