// ─── APP SHELL ──────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "mood": "clean", "accent": "#e8a23a", "density": "comfortable", "radius": "default", "sidebar": "left" }/*EDITMODE-END*/; // Convert accent hex → readable foreground (dark on light accents, light on dark accents) const accentFgFor = (hex) => { if (!hex || hex[0] !== "#") return "#1a140a"; const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255; return lum > 0.6 ? "#1a140a" : "#fdfaf3"; }; const hexToRgba = (hex, a) => { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgba(${r},${g},${b},${a})`; }; const App = () => { const [tweaks, setTweaksRaw] = useTweaks(TWEAK_DEFAULTS); const [screen, setScreen] = React.useState("dashboard"); const [entryId, setEntryId] = React.useState(null); // Apply tweaks to root React.useEffect(() => { const root = document.documentElement; root.dataset.theme = tweaks.theme; root.dataset.mood = tweaks.mood; root.dataset.density = tweaks.density; root.dataset.radius = tweaks.radius; root.dataset.sidebar = tweaks.sidebar; root.style.setProperty("--accent", tweaks.accent); root.style.setProperty("--accent-fg", accentFgFor(tweaks.accent)); root.style.setProperty("--accent-soft", hexToRgba(tweaks.accent, 0.14)); root.style.setProperty("--accent-line", hexToRgba(tweaks.accent, 0.32)); }, [tweaks]); const setTweak = (k, v) => { if (typeof k === "object") setTweaksRaw(k); else setTweaksRaw({ [k]: v }); }; const goto = (s, opts = {}) => { setScreen(s); if (opts.entryId !== undefined) setEntryId(opts.entryId); else if (s !== "wiki") setEntryId(null); }; const navItems = [ { id: "dashboard", label: "Dashboard", icon: "home" }, { id: "wiki", label: "Wiki / Codex", icon: "book", count: window.WIKI.length }, { id: "kanban", label: "Kanban", icon: "kanban" }, { id: "tasks", label: "Tasks", icon: "list", count: window.TASKS.filter(t => t.col !== "done").length }, { id: "ideas", label: "Idea Wall", icon: "lightbulb" }, ]; // crumb name const crumb = (() => { if (screen === "wiki" && entryId) { const e = window.WIKI.find(w => w.id === entryId); return ["Wiki", e ? e.title : entryId]; } const nav = navItems.find(n => n.id === screen); if (nav) return [nav.label]; if (screen === "settings") return ["Settings"]; return ["—"]; })(); return (
{crumb.map((c, i) => ( {i > 0 && } {c} ))}
Search wiki, tasks, ideas…
⌘K
{screen === "dashboard" && } {screen === "wiki" && } {screen === "kanban" && } {screen === "tasks" && } {screen === "ideas" && } {screen === "settings" && }
{/* Atmospheric overlays */}
{/* Tweaks panel — manages its own open state via host protocol */} setTweak("theme", v)} options={[ { value: "dark", label: "Dark" }, { value: "light", label: "Light" }, ]}/> setTweak("mood", v)} options={[ { value: "clean", label: "Clean" }, { value: "atmospheric", label: "Atmos." }, ]}/> setTweak("accent", v)} options={["#e8a23a", "#c8312b", "#4f8cff", "#7c5cff", "#2cb67d", "#e8e3d8"]} /> setTweak("density", v)} options={[ { value: "comfortable", label: "Comfort" }, { value: "compact", label: "Compact" }, ]}/> setTweak("radius", v)} options={[ { value: "sharp", label: "Sharp" }, { value: "default", label: "Default" }, { value: "soft", label: "Soft" }, ]}/> setTweak("sidebar", v)} options={[ { value: "left", label: "Left" }, { value: "right", label: "Right" }, ]}/> ); }; window.App = App; // Mount ReactDOM.createRoot(document.getElementById("root")).render();