// bromb-app.jsx
// Top-level wiring: tweaks panel + accent override + mounts TerminalLanding.
// Default values for tweaks. The host rewrites this JSON block on disk when
// the user changes a tweak, so the next reload keeps the choice.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "peach",
"prompt": "dollar",
"chrome": "minimal",
"preview": "hover",
"scanlines": false
}/*EDITMODE-END*/;
// Accent palette options. The CSS var --accent is overridden at the root.
const ACCENTS = {
peach: { base: '#ffb86b', alt: '#d99c5a', t10: 'rgba(255,184,107,0.10)', t16: 'rgba(255,184,107,0.16)', t24: 'rgba(255,184,107,0.24)' },
mint: { base: '#7fd4a8', alt: '#5aa982', t10: 'rgba(127,212,168,0.10)', t16: 'rgba(127,212,168,0.16)', t24: 'rgba(127,212,168,0.24)' },
cyan: { base: '#7fc6e0', alt: '#5aa3c0', t10: 'rgba(127,198,224,0.10)', t16: 'rgba(127,198,224,0.16)', t24: 'rgba(127,198,224,0.24)' },
magenta: { base: '#e09bc7', alt: '#b97aa3', t10: 'rgba(224,155,199,0.10)', t16: 'rgba(224,155,199,0.16)', t24: 'rgba(224,155,199,0.24)' },
};
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
// apply accent palette to css custom properties on
React.useEffect(() => {
const a = ACCENTS[tweaks.accent] || ACCENTS.peach;
const root = document.documentElement;
root.style.setProperty('--accent', a.base);
root.style.setProperty('--accent-2', a.alt);
root.style.setProperty('--accent-tint-10', a.t10);
root.style.setProperty('--accent-tint-16', a.t16);
root.style.setProperty('--accent-tint-24', a.t24);
}, [tweaks.accent]);
// optional CRT scanline overlay
React.useEffect(() => {
document.body.classList.toggle('scanlines', !!tweaks.scanlines);
}, [tweaks.scanlines]);
return ;
}
ReactDOM.createRoot(document.getElementById('root')).render();