// bixen-app.jsx — Tweaks panel for the Bixen landing page.
// Drives :root class names; the CSS variables in bixen.css do the rest.
const BIXEN_TWEAKS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"palette": "teal",
"fonts": "sans",
"cards": "outlined",
"density": "regular",
"showStats": true
}/*EDITMODE-END*/;
// URL-param override: allows ?direction=editorial etc. so the design canvas
// can iframe the same file in different styles.
const URL_PRESETS = {
atmospheric: { theme: 'dark', palette: 'teal', fonts: 'sans', cards: 'outlined', density: 'regular' },
editorial: { theme: 'dark', palette: 'amber', fonts: 'editorial', cards: 'solid', density: 'comfy' },
engineered: { theme: 'dark', palette: 'mono', fonts: 'mono', cards: 'flat', density: 'compact' },
daylight: { theme: 'light', palette: 'teal', fonts: 'editorial', cards: 'solid', density: 'regular' },
};
const URL_PRESET = (() => {
try {
const p = new URLSearchParams(window.location.search).get('direction');
return p && URL_PRESETS[p] ? URL_PRESETS[p] : null;
} catch (_) { return null; }
})();
function BixenApp() {
const [t, setTweak] = useTweaks({ ...BIXEN_TWEAKS, ...(URL_PRESET || {}) });
// Apply tweak state to via classes — CSS handles the rest.
React.useEffect(() => {
const root = document.documentElement;
const classes = [
t.theme === 'light' ? 'light' : '',
`palette-${t.palette}`,
`font-${t.fonts}`,
`cards-${t.cards}`,
`density-${t.density}`,
].filter(Boolean);
// Strip any previous tweak classes before re-applying.
root.className = root.className
.split(/\s+/)
.filter(c => !(/^(light|palette-|font-|cards-|density-)/.test(c)))
.join(' ');
classes.forEach(c => root.classList.add(c));
}, [t.theme, t.palette, t.fonts, t.cards, t.density]);
// Stats toggle
React.useEffect(() => {
const el = document.querySelector('.stats');
if (el) el.style.display = t.showStats ? '' : 'none';
}, [t.showStats]);
return (
setTweak('theme', v)} />
setTweak('palette', v)} />
setTweak('fonts', v)} />
setTweak('cards', v)} />
setTweak('density', v)} />
setTweak('showStats', v)} />
);
}
// Mount once DOM is ready.
(function mount() {
const node = document.getElementById('tweaks-root');
if (!node) return;
const root = ReactDOM.createRoot(node);
root.render();
})();