// App entry — assembles the whole page + applies tweak tokens to .
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"accent": "cyan",
"displayFont": "geist",
"heroVariant": "B"
}/*EDITMODE-END*/;
// Resolve the user's nav-toggle theme choice (localStorage) into the
// concrete dark|light value the tweaks system expects. The nav toggle is
// the source of truth on initial load; the tweaks panel's theme radio can
// still override during the session (and wins until reload).
function resolveStoredTheme() {
try {
const stored = localStorage.getItem('theme');
if (stored === 'light' || stored === 'dark') return stored;
if (stored === 'system' || stored == null) {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
} catch (e) {}
return 'dark';
}
const ACCENT_PRESETS = {
lime: { dark: { signal: '#C6FF3D', deep: '#94CC1E', on: '#0A0A0B' }, light: { signal: '#6BBF1A', deep: '#4F8F12', on: '#F5F2EB' } },
amber: { dark: { signal: '#FFB547', deep: '#E89320', on: '#0A0A0B' }, light: { signal: '#D9821A', deep: '#A8620C', on: '#F5F2EB' } },
cyan: { dark: { signal: '#22D3EE', deep: '#0891B2', on: '#0A0A0B' }, light: { signal: '#0E7490', deep: '#155E75', on: '#F5F2EB' } },
orange: { dark: { signal: '#FF7A45', deep: '#E0541E', on: '#FFFFFF' }, light: { signal: '#D9501C', deep: '#A83A12', on: '#F5F2EB' } },
};
const FONT_PRESETS = {
geist: { display: "'Geist', -apple-system, sans-serif", body: "'Geist', sans-serif" },
serif: { display: "'Instrument Serif', Georgia, serif", body: "'Geist', sans-serif" },
grotesk: { display: "'Geist Mono', ui-monospace, monospace", body: "'Geist', sans-serif" },
};
function applyTweaks(t) {
const root = document.documentElement;
root.setAttribute('data-theme', t.theme);
const themeKey = t.theme === 'light' ? 'light' : 'dark';
const accent = (ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.lime)[themeKey];
root.style.setProperty('--signal', accent.signal);
root.style.setProperty('--signal-deep', accent.deep);
root.style.setProperty('--on-signal', accent.on);
const fonts = FONT_PRESETS[t.displayFont] || FONT_PRESETS.geist;
root.style.setProperty('--font-display', fonts.display);
}
function App() {
// On first mount, the nav toggle's stored choice (light/dark/system) wins
// over the EDITMODE default — otherwise applyTweaks would clobber the
// data-theme attribute set by the FOUC-prevention bootstrap in index.html.
const initialTweaks = React.useMemo(
() => ({ ...TWEAK_DEFAULTS, theme: resolveStoredTheme() }),
[]
);
const [tweaks, setTweak] = useTweaks(initialTweaks);
React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);
// Bridge: the nav theme toggle owns light|dark|system, but the tweaks
// system only knows dark|light. When the toggle changes, sync the
// resolved value into tweaks state so subsequent applyTweaks calls
// (e.g. user changes accent) don't snap the theme back.
React.useEffect(() => {
window.__bpSyncTheme = (resolved) => {
if (resolved === 'light' || resolved === 'dark') {
setTweak('theme', resolved);
}
};
return () => { delete window.__bpSyncTheme; };
}, [setTweak]);
return (
<>
);
}
ReactDOM.createRoot(document.getElementById('app')).render();