// tweaks-app.jsx — Bella Alma Ranch
// Mounts only the Tweaks panel; applies values to the static page via
// data-attributes and CSS custom properties.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"hero": "lowerleft",
"plan": "vertical",
"crop": "grid",
"headline": "spectral",
"accent": "#BE9A57",
"motion": true
}/*EDITMODE-END*/;
// accent hex -> matching deeper shade for --accent-deep
const ACCENT_DEEP = {
"#BE9A57": "#9F7E3B", // dusty gold
"#7E8C68": "#5E6B4A", // sage
"#B07551": "#8E5839", // clay
};
function applyTweaks(t) {
const b = document.body;
b.dataset.hero = t.hero;
b.dataset.plan = t.plan;
b.dataset.crop = t.crop;
b.dataset.headline = t.headline;
b.dataset.motion = t.motion ? "on" : "off";
const root = document.documentElement.style;
root.setProperty("--accent", t.accent);
root.setProperty("--accent-deep", ACCENT_DEEP[t.accent] || t.accent);
}
function TweaksApp() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => { applyTweaks(t); }, [t]);
return (
setTweak("hero", v)}
/>
setTweak("plan", v)}
/>
setTweak("crop", v)}
/>
setTweak("accent", v)}
/>
setTweak("headline", v)}
/>
setTweak("motion", v)}
/>
);
}
// Apply persisted defaults immediately (before React mounts) to avoid a flash.
applyTweaks(TWEAK_DEFAULTS);
const __bar_tweakRoot = document.createElement("div");
document.body.appendChild(__bar_tweakRoot);
ReactDOM.createRoot(__bar_tweakRoot).render();