// tweaks-app.jsx — Tweaks panel for Meus Links
// Three expressive controls that reshape the feel:
// 1. Paleta — Ivory / Midnight / Blush (whole color world)
// 2. Serifa — Bodoni / Playfair / Cormorant (display voice)
// 3. Cards — Editorial / Capa (composition rhythm)
const TWEAK_DEFAULTS = {
palette: "midnight",
serif: "playfair",
cards: "editorial",
};
function MeusLinksTweaks() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply tweaks to as data-* attributes so CSS can switch.
React.useEffect(() => {
const b = document.body;
if (t.palette && t.palette !== "ivory") b.setAttribute("data-palette", t.palette);
else b.removeAttribute("data-palette");
if (t.serif && t.serif !== "bodoni") b.setAttribute("data-serif", t.serif);
else b.removeAttribute("data-serif");
if (t.cards && t.cards !== "editorial") b.setAttribute("data-cards", t.cards);
else b.removeAttribute("data-cards");
}, [t.palette, t.serif, t.cards]);
return (
setTweak("palette", v)}
/>
setTweak("serif", v)}
/>
setTweak("cards", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("tweaks-root"))
.render();