/* ========================================================================= INKSTONE — Tweaks island (React). The page itself is vanilla; this small React root only renders the Tweaks panel and applies the chosen visual direction + accent to . ========================================================================= */ const INK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "blueprint", "accent": "oklch(0.56 0.20 256)", "grid": "auto", "headlineWeight": "light" }/*EDITMODE-END*/; const ACCENTS = [ "oklch(0.56 0.20 256)", // electric cobalt (default) "oklch(0.58 0.13 215)", // steel teal "oklch(0.55 0.20 292)", // ink violet "oklch(0.57 0.14 160)" // graphite emerald ]; function InkTweaks() { const [t, setTweak] = useTweaks(INK_DEFAULTS); const root = document.documentElement; React.useEffect(() => { root.setAttribute("data-theme", t.theme); }, [t.theme]); React.useEffect(() => { root.style.setProperty("--accent", t.accent); }, [t.accent]); React.useEffect(() => { if (t.grid === "auto") root.style.removeProperty("--grid-op"); else root.style.setProperty("--grid-op", t.grid === "on" ? "1" : "0"); }, [t.grid]); React.useEffect(() => { // nudge display weight independent of theme default const map = { light: 700, bold: 800, heavy: 880 }; root.style.setProperty("--display-weight", String(map[t.headlineWeight] || 800)); }, [t.headlineWeight]); return ( setTweak("theme", v)} />

blueprint = 엔지니어링 그리드 · enterprise = 정제된 화이트 · startup = 대담한 타이포

setTweak("accent", v)} /> setTweak("headlineWeight", v)} /> setTweak("grid", v)} /> ); } (function mountInkTweaks() { const host = document.createElement("div"); host.id = "ink-tweaks-root"; document.body.appendChild(host); ReactDOM.createRoot(host).render(); })();