/* tweaks-app.jsx — Tweaks panel for POA Forms * Exposes: theme palette, density, hero variant, generator placement. */ function TweaksApp({ defaults }) { const [tweaks, setTweak] = useTweaks(defaults); // Apply theme to React.useEffect(() => { document.documentElement.setAttribute('data-theme', tweaks.theme || 'ink'); }, [tweaks.theme]); React.useEffect(() => { const root = document.documentElement; if (tweaks.density === 'compact') { root.style.setProperty('--s-12', '80px'); root.style.setProperty('--s-11', '56px'); root.style.setProperty('--s-10', '48px'); } else { root.style.removeProperty('--s-12'); root.style.removeProperty('--s-11'); root.style.removeProperty('--s-10'); } }, [tweaks.density]); return ( setTweak('theme', v)} options={[ { value: 'ink', label: 'Ink + Lime' }, { value: 'violet', label: 'Violet' }, { value: 'terracotta', label: 'Terracotta' }, ]} /> setTweak('density', v)} options={[ { value: 'comfortable', label: 'Comfortable' }, { value: 'compact', label: 'Compact' }, ]} /> setTweak('heroVariant', v)} options={[ { value: 'split', label: 'Split (default)' }, { value: 'centered', label: 'Centered' }, ]} /> setTweak('generatorPlacement', v)} options={[ { value: 'hero', label: 'In hero' }, { value: 'sticky', label: 'Sticky bar' }, ]} /> ); } window.TweaksApp = TweaksApp;