// MandateWorks — main app
// Composes sections + wires Tweaks panel for density / type / motion.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"density": "comfortable",
"typeset": "serif-display",
"motion": "subtle",
"mode": "editorial"
}/*EDITMODE-END*/;
const App = () => {
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
// apply tweaks to
React.useEffect(() => {
const root = document.documentElement;
root.dataset.density = t.density === "comfortable" ? "" : t.density;
root.dataset.typeset = t.typeset;
root.dataset.motion = t.motion;
root.dataset.mode = t.mode === "editorial" ? "" : t.mode;
}, [t.density, t.typeset, t.motion, t.mode]);
// reveal-on-scroll
React.useEffect(() => {
if (t.motion === "off") {
document.querySelectorAll(".reveal").forEach(el => el.classList.add("in"));
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
}, {threshold: 0.08, rootMargin: "0px 0px -10% 0px"});
document.querySelectorAll(".reveal").forEach(el => io.observe(el));
return () => io.disconnect();
}, [t.motion]);
const {TweaksPanel, TweakSection, TweakRadio} = window;
return (
<>
setTweak("mode", v)}
options={["editorial", "command"]}
/>
setTweak("density", v)}
options={["compact", "comfortable", "airy"]}
/>
setTweak("typeset", v)}
options={["serif-display", "all-sans"]}
/>
setTweak("motion", v)}
options={["off", "subtle", "rich"]}
/>
);
};
ReactDOM.createRoot(document.getElementById("root")).render();