/* ============================================================
App shell — mounts hero (mode-dependent) + sections + Tweaks
============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"mode": "dispatch",
"accent": "#b5471c"
}/*EDITMODE-END*/;
function useHashTab(defaultTab) {
const read = () => (location.hash === '#portfolio' ? 'portfolio' : defaultTab);
const [tab, setTab] = React.useState(read);
React.useEffect(() => {
const onHash = () => setTab(read());
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
const switchTo = (t) => {
if (t === 'portfolio') location.hash = 'portfolio';
else history.replaceState(null, '', location.pathname + location.search);
setTab(t);
window.scrollTo({ top: 0, behavior: 'instant' });
if (window.track) window.track('tab_change', { tab: t });
};
return [tab, switchTo];
}
function TabBar({ tab, onChange }) {
return (
);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [tab, setTab] = useHashTab('index');
// Apply mode to
React.useEffect(() => {
document.documentElement.setAttribute('data-mode', t.mode);
}, [t.mode]);
// Apply accent override
React.useEffect(() => {
document.documentElement.style.setProperty('--accent', t.accent);
// derive soft accent
document.documentElement.style.setProperty(
'--accent-soft',
`color-mix(in oklab, ${t.accent} 14%, transparent)`
);
}, [t.accent]);
const Hero = t.mode === 'console' ? window.HeroConsole
: t.mode === 'manual' ? window.HeroManual
: window.HeroDispatch;
// Accent options per mode (curated palettes)
const accentOptions = t.mode === 'console'
? ['#ffb957', '#86d9a6', '#6ad4ff', '#ff8a7a']
: t.mode === 'manual'
? ['#2e5c8a', '#1f6f53', '#7a3f8a', '#b5471c']
: ['#b5471c', '#1a1814', '#2e5c8a', '#1f6f53'];
return (
<>
{tab === 'portfolio' ? (
) : (
<>
)}
setTweak('mode', v)}
/>
setTweak('accent', v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render();