/* tweaks.jsx — mounts the Tweaks panel and drives the vanilla page
via data-attributes + the --accent custom property on . */
const TT_DEFAULTS = /*EDITMODE-BEGIN*/{
"direction": "Grid",
"motion": "Medium",
"accent": "Mono",
"gridLines": true
}/*EDITMODE-END*/;
const ACCENTS = {
Mono: "var(--ink)",
Orange: "oklch(0.70 0.17 45)",
Blue: "oklch(0.66 0.17 255)",
Lime: "oklch(0.80 0.17 130)"
};
function applyTweaks(t) {
const root = document.documentElement;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
root.dataset.mode = (t.direction || "Grid").toLowerCase();
root.dataset.motion = (t.motion || "Medium").toLowerCase();
root.dataset.lines = t.gridLines ? "on" : "off";
root.style.setProperty("--accent", ACCENTS[t.accent] || "var(--ink)");
root.classList.toggle("motion-on", root.dataset.motion !== "off" && !reduce);
if (typeof window.__motionRefresh === "function") {
requestAnimationFrame(window.__motionRefresh);
}
}
function App() {
const [t, setTweak] = useTweaks(TT_DEFAULTS);
React.useEffect(() => { applyTweaks(t); }, [t.direction, t.motion, t.accent, t.gridLines]);
return (
setTweak("direction", v)}
/>
setTweak("motion", v)}
/>
setTweak("accent", v)}
/>
setTweak("gridLines", v)}
/>
);
}
// Apply default/persisted tweaks immediately on load (panel may be hidden;
// the host keeps the EDITMODE block above in sync across reloads).
applyTweaks(TT_DEFAULTS);
ReactDOM.createRoot(document.getElementById("tweaks-root")).render();