// app.jsx — root composition + tweaks protocol
function App() {
const [cart, setCart] = React.useState(2);
const [tweakOpen, setTweakOpen] = React.useState(false);
const [tweaks, setTweaks] = React.useState(window.__AQUO_TWEAKS__ || {
palette: 'noir', typePair: 'space-plex', heroVariant: 'wave'
});
// apply tweaks to
React.useEffect(() => {
const root = document.documentElement;
root.setAttribute('data-palette', tweaks.palette);
root.setAttribute('data-type', tweaks.typePair);
root.setAttribute('data-hero', tweaks.heroVariant);
}, [tweaks]);
// edit-mode protocol
React.useEffect(() => {
const onMsg = (e) => {
const d = e.data || {};
if (d.type === '__activate_edit_mode') setTweakOpen(true);
if (d.type === '__deactivate_edit_mode') setTweakOpen(false);
};
window.addEventListener('message', onMsg);
// announce availability AFTER listener is live
try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
return () => window.removeEventListener('message', onMsg);
}, []);
const update = (next) => {
setTweaks(next);
try {
window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
} catch (e) {}
};
const addToCart = (name) => {
setCart(c => c + 1);
};
return (
setTweakOpen(false)}
value={tweaks} onChange={update} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();