/* ============================================================ Rainbow Group — app.jsx Home root: Tweaks panel, mounts all sections, handles palette/ motif/motion/cursor/signature/direction attributes on . Per DESIGN-SYSTEM.md §5.1–5.2. ============================================================ */ const { useState: useStateApp, useEffect: useEffectApp } = React; /*EDITMODE-BEGIN*/ const TWEAK_DEFAULTS = { hero: 'cinematic', palette: 'archival', motif: 'subtle', motion: 'combination', cursor: 'custom', signature: 'prism', dir: 'ltr', }; /*EDITMODE-END*/ const TWEAK_OPTIONS = { hero: ['cinematic', 'editorial'], palette: ['archival', 'navy', 'mono'], motif: ['off', 'subtle', 'expressive'], motion: ['still', 'combination', 'kinetic'], cursor: ['default', 'custom'], signature: ['off', 'prism', 'all'], dir: ['ltr', 'rtl'], }; function TweaksPanel({ values, onChange, visible }) { return (

Tweaks ATELIER · v0.1

{Object.keys(TWEAK_OPTIONS).map((key) => (

{key}

{TWEAK_OPTIONS[key].map((opt) => ( ))}

))}

); } function App() { const [values, setValues] = useStateApp(TWEAK_DEFAULTS); const [panelVisible, setPanelVisible] = useStateApp(false); // Apply values to useEffectApp(() => { const h = document.documentElement; h.setAttribute('data-palette', values.palette); h.setAttribute('data-motif', values.motif); h.setAttribute('data-motion', values.motion); h.setAttribute('data-cursor', values.cursor); h.setAttribute('data-signature', values.signature); h.setAttribute('dir', values.dir); }, [values]); // postMessage bridge for edit mode useEffectApp(() => { try { window.parent.postMessage({ type: '__edit_mode_available', keys: Object.keys(TWEAK_OPTIONS) }, '*'); } catch (e) {} const onMsg = (e) => { if (!e || !e.data) return; if (e.data.type === '__activate_edit_mode') setPanelVisible(true); if (e.data.type === '__deactivate_edit_mode') setPanelVisible(false); }; window.addEventListener('message', onMsg); return () => window.removeEventListener('message', onMsg); }, []); const onChange = (key, val) => { setValues((v) => { const next = { ...v, [key]: val }; try { window.parent.postMessage({ type: '__edit_mode_set_keys', values: next }, '*'); } catch (e) {} return next; }); }; return (