setTweak('logoVariant', v)} options={[ { value: 'slash', label: 'Slash' }, { value: 'dot', label: 'Dot' }, { value: 'rings', label: 'Rings' }, ]} /> setTweak('heroMotion', v)} /> setTweak('theme', v)} options={[ { value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }, ]} />

setTweak('lang', v)} options={[ { value: 'nl', label: 'NL' }, { value: 'en', label: 'EN' }, ]} /> ); }; // Live swatches showing the current accent + neutrals const ColorSwatches = ({ accent }) => { // Re-read CSS vars after change settles const [vars, setVars] = React.useState({ accent: '', muted: '' }); React.useEffect(() => { const id = setTimeout(() => { const styles = getComputedStyle(document.documentElement); setVars({ accent: styles.getPropertyValue('--accent').trim(), muted: styles.getPropertyValue('--accent-muted').trim(), }); }, 30); return () => clearTimeout(id); }, [accent]); return (

); }; const Swatch = ({ hex, label }) => (

{hex || label}

); const LogoPreview = ({ variant }) => (

); ReactDOM.createRoot(document.getElementById('root')).render();