// Root app — wires sections, tweaks panel, edit-mode protocol, theme toggle.
const { useState, useEffect } = React;
function App(){
const T = window.__TWEAKS__;
const [headline, setHeadline] = useState(T.headline ?? 0);
const [sticky, setSticky] = useState(T.stickyColor || '#fff6a8');
const [ink, setInk] = useState(T.inkColor || '#2b2416');
const [rot, setRot] = useState(T.rotation ?? 1);
const [sounds, setSounds] = useState(T.sounds !== false);
const [marginalia, setMarg] = useState(T.marginalia !== false);
// apply tokens to
useEffect(() => {
const r = document.documentElement;
r.style.setProperty('--sticky', sticky);
r.style.setProperty('--ink', ink);
// rotation scale via transforms – controlled by CSS vars
document.querySelectorAll('[data-rot]').forEach(el => {
const base = parseFloat(el.dataset.rot);
el.style.transform = `rotate(${base*rot}deg)`;
});
}, [sticky, ink, rot]);
// dim rotation on cards globally by scaling a CSS var
useEffect(() => {
// re-style rotations using a simple pass on known selectors
const pairs = [
['.hero h1', -1.2],
['.note-paper', -5],
['.note-term', 2.5],
['.note-type', -2],
['.pc-paper .frame', -1.5],
['.pc-term .frame', .5],
['.pc-type .frame', -.8],
['.tier.supporter', -.8],
['.price-card.pro', 1],
];
pairs.forEach(([sel, deg]) => {
document.querySelectorAll(sel).forEach(el => {
el.style.transform = `rotate(${deg*rot}deg)`;
});
});
}, [rot, headline]);
useEffect(() => { window.paperSounds && window.paperSounds.setEnabled(sounds); }, [sounds]);
// ----- tweaks edit-mode protocol -----
useEffect(() => {
function onMsg(e){
const d = e.data || {};
if (d.type === '__activate_edit_mode'){
document.getElementById('tweaks').classList.add('on');
} else if (d.type === '__deactivate_edit_mode'){
document.getElementById('tweaks').classList.remove('on');
}
}
window.addEventListener('message', onMsg);
window.parent.postMessage({type:'__edit_mode_available'}, '*');
return () => window.removeEventListener('message', onMsg);
}, []);
// wire the tweaks panel inputs (imperative since panel is static HTML)
useEffect(() => {
const qs = (id) => document.getElementById(id);
const set = (key, val) => {
window.parent.postMessage({type:'__edit_mode_set_keys', edits: {[key]: val}}, '*');
};
qs('tw-headline').value = String(headline);
qs('tw-sticky').value = sticky;
qs('tw-ink').value = ink;
qs('tw-rot').value = String(rot);
qs('tw-sound').checked = sounds;
qs('tw-marginalia').checked = marginalia;
const on = (id, ev, fn) => qs(id).addEventListener(ev, fn);
const a = (id) => qs(id);
const hA = () => { const v = parseInt(a('tw-headline').value,10); setHeadline(v); set('headline', v); };
const hB = () => { const v = a('tw-sticky').value; setSticky(v); set('stickyColor', v); };
const hC = () => { const v = a('tw-ink').value; setInk(v); set('inkColor', v); };
const hD = () => { const v = parseFloat(a('tw-rot').value); setRot(v); set('rotation', v); };
const hF = () => { const v = a('tw-sound').checked; setSounds(v); set('sounds', v); };
const hG = () => { const v = a('tw-marginalia').checked; setMarg(v); set('marginalia', v); };
on('tw-headline','change',hA);
on('tw-sticky','input',hB);
on('tw-ink','input',hC);
on('tw-rot','input',hD);
on('tw-sound','change',hF);
on('tw-marginalia','change',hG);
return () => {
qs('tw-headline').removeEventListener('change',hA);
qs('tw-sticky').removeEventListener('input',hB);
qs('tw-ink').removeEventListener('input',hC);
qs('tw-rot').removeEventListener('input',hD);
qs('tw-sound').removeEventListener('change',hF);
qs('tw-marginalia').removeEventListener('change',hG);
};
}, [headline, sticky, ink, rot, sounds, marginalia]);
return (
<>
);
}
ReactDOM.createRoot(document.getElementById('app')).render();