// ─────────────────────────────────────────────────────────────
// Mezoo — App root + Tweaks panel
// Tweaks defaults: aéré · vifs · titres affirmés · medium brass.
// Updates flow through useTweaks → attrs, which the
// CSS in mezoo-app/styles.css reads to retune the entire system.
// ─────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"density": "spacious",
"typescale": "1",
"radius": "hairline",
"accent": "medium",
"theme": "light"
}/*EDITMODE-END*/;
function MezooApp() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Restore theme from localStorage (separate from tweaks because the
// top-bar toggle owns it day-to-day; the tweak below is just an override).
React.useLayoutEffect(() => {
let initialTheme = tweaks.theme;
try {
const stored = localStorage.getItem('mezoo.theme');
if (stored) initialTheme = stored;
} catch {}
document.documentElement.dataset.theme = initialTheme;
}, []);
const [theme, setTheme] = useTheme();
// Reflect tweak choices onto data-attrs the CSS reads.
React.useEffect(() => {
const r = document.documentElement;
r.dataset.density = tweaks.density;
r.dataset.typescale = String(tweaks.typescale);
r.dataset.radius = tweaks.radius;
r.dataset.accent = tweaks.accent;
}, [tweaks.density, tweaks.typescale, tweaks.radius, tweaks.accent]);
const { page } = useRouterFromHash();
return (
setTweak('density', v)} />
setTweak('typescale', v)} />
setTweak('radius', v)} />
setTweak('accent', v)} />
);
}
// Quick wrapper so the outlet picks the right page from the router context.
function PageOutlet() {
const { page } = useRouter();
if (page === 'case') return ;
if (page === 'contact') return ;
if (page === 'manifeste') return ;
if (page === 'legal') return ;
return ;
}
// Compat alias — early version of the app called this name; keep it
// so handcoded preview scripts don't break.
function useRouterFromHash() {
const [page, setPage] = React.useState(() => location.hash.replace('#', '') || 'home');
React.useEffect(() => {
const onHash = () => setPage(location.hash.replace('#', '') || 'home');
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
return { page };
}
ReactDOM.createRoot(document.getElementById('root')).render();