// Valea — Tweaks panel. Applies choices as data-attrs / CSS vars on .
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"ambiance": "Héritage",
"heroTone": "Crème",
"heroLayout": "Côte à côte",
"displayFont": "Cormorant Garamond",
"spacing": 104
}/*EDITMODE-END*/;
const VALEA_AMBIANCES = {
"Héritage": { theme: "heritage", tone: "Crème", font: "Cormorant Garamond" },
"Éditorial": { theme: "editorial", tone: "Blanc", font: "Marcellus" },
"Forêt": { theme: "foret", tone: "Vert forêt", font: "Libre Caslon Text" },
};
const VALEA_TONES = { "Crème": "cream", "Blanc": "white", "Vert forêt": "green" };
const VALEA_LAYOUTS = { "Côte à côte": "split", "Centré": "centered" };
function ValeaTweaks() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => {
const root = document.documentElement;
root.dataset.theme = (VALEA_AMBIANCES[t.ambiance] || VALEA_AMBIANCES["Héritage"]).theme;
root.dataset.heroTone = VALEA_TONES[t.heroTone] || "cream";
root.dataset.heroLayout = VALEA_LAYOUTS[t.heroLayout] || "split";
root.style.setProperty("--font-display", '"' + t.displayFont + '", Georgia, serif');
root.style.setProperty("--sect-pad", t.spacing + "px");
}, [t]);
return (
{
const p = VALEA_AMBIANCES[v];
setTweak({ ambiance: v, heroTone: p.tone, displayFont: p.font });
}} />
setTweak("heroTone", v)} />
setTweak("heroLayout", v)} />
setTweak("displayFont", v)} />
setTweak("spacing", v)} />
);
}
const valeaTweaksRoot = document.getElementById("tweaks-root");
ReactDOM.createRoot(valeaTweaksRoot).render();