// Tweaks app — wires palette + hero variant tweaks to the static page. const { useEffect } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "lodge", "heroVariant": "default" }/*EDITMODE-END*/; function TweaksApp() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply theme to useEffect(() => { document.body.setAttribute('data-theme', t.theme); }, [t.theme]); // Apply hero variant useEffect(() => { const hero = document.querySelector('.hero'); if (hero) hero.setAttribute('data-variant', t.heroVariant); }, [t.heroVariant]); return ( { const map = { '#2f4439': 'lodge', '#3a4d40': 'pine', '#3d2c22': 'ember', '#3a3f3a': 'stone', }; setTweak('theme', map[palette[0]] || 'lodge'); }} />
{t.theme === 'lodge' && 'Lodge — forest + cream + ember'} {t.theme === 'pine' && 'Pine — cooler greens, sage'} {t.theme === 'ember' && 'Ember — dark warm, gold'} {t.theme === 'stone' && 'Stone — quieter neutrals'}
setTweak('heroVariant', v)} />
{t.heroVariant === 'default' && 'Big headline, stats anchored to bottom.'} {t.heroVariant === 'split' && 'Headline left, info card on the right.'} {t.heroVariant === 'editorial' && 'Centered, magazine-style.'}
); } const __twk_root = document.createElement('div'); document.body.appendChild(__twk_root); ReactDOM.createRoot(__twk_root).render();