// tweaks-app.jsx — Tweaks for "Take a Chance on Me"
// Applies all state to (CSS vars + data-* attrs) so the slotted
// deck slides pick it up. Renders only the Tweaks panel; no other UI.
const FONT_PAIRINGS = {
spectral: { display: '"Spectral", Georgia, serif', body: '"IBM Plex Sans", system-ui, sans-serif' },
newsreader: { display: '"Newsreader", Georgia, serif', body: '"Public Sans", system-ui, sans-serif' },
grotesk: { display: '"Space Grotesk", system-ui, sans-serif', body: '"IBM Plex Sans", system-ui, sans-serif' },
};
const PALETTES = [
['#2f6d9e', '#c4384e'], // blue / red (default — matches result figures)
['#2a4d8f', '#b8881f'], // navy / gold
['#2f6b4f', '#b4452f'], // green / rust
];
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": ["#2f6d9e", "#c4384e"],
"fontPairing": "spectral",
"titleStyle": "split",
"density": "regular",
"background": "white"
}/*EDITMODE-END*/;
function applyTweaks(t) {
const root = document.documentElement;
const pal = t.palette || PALETTES[0];
root.style.setProperty('--safe', pal[0]);
root.style.setProperty('--risky', pal[1]);
const fp = FONT_PAIRINGS[t.fontPairing] || FONT_PAIRINGS.spectral;
root.style.setProperty('--font-display', fp.display);
root.style.setProperty('--font-body', fp.body);
root.setAttribute('data-title', t.titleStyle || 'split');
root.setAttribute('data-density', t.density || 'regular');
root.setAttribute('data-bg', t.background || 'white');
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => { applyTweaks(t); }, [t]);
return (
setTweak('background', v)}
/>
setTweak('palette', v)}
/>
setTweak('fontPairing', v)}
/>
setTweak('density', v)}
/>
setTweak('titleStyle', v)}
/>
);
}
// The EDITMODE-BEGIN/END block IS the persisted state (host rewrites it on
// disk), so applying the defaults on load reflects the user's saved choices.
applyTweaks(TWEAK_DEFAULTS);
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();