/* Root composition + Tweaks integration */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor, TweakSelect } = window;
const { useState, useEffect, useRef } = React;
function App() {
const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
// Apply palette + font classes to
React.useEffect(() => {
document.body.classList.remove("palette-warm", "palette-cool", "palette-mono");
if (tweaks.palette === "warm") document.body.classList.add("palette-warm");
if (tweaks.palette === "cool") document.body.classList.add("palette-cool");
if (tweaks.palette === "mono") document.body.classList.add("palette-mono");
document.body.classList.remove("font-tiempos", "font-redaction");
if (tweaks.headingFont === "Cormorant") document.body.classList.add("font-tiempos");
if (tweaks.headingFont === "DMSerif") document.body.classList.add("font-redaction");
}, [tweaks.palette, tweaks.headingFont]);
return (
<>
setTweak("palette", v)}
options={[
{ value: "navyCoral", label: "Navy + Coral" },
{ value: "warm", label: "Tierra cálida" },
{ value: "cool", label: "Sereno" },
{ value: "mono", label: "Monocromo" },
]} />
setTweak("headingFont", v)}
options={[
{ value: "Fraunces", label: "Fraunces" },
{ value: "Cormorant", label: "Cormorant" },
{ value: "DMSerif", label: "DM Serif" },
]} />
setTweak("videoMuted", !v)} />
setTweak("showFloral", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();