// TweaksApp.jsx — Tweaks panel for the KPI6 site. // Lets the user explore palette / accent / density without leaving the page. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "paper", "accent": "#3A5B8C", "density": "default", "showHeroOrb": true, "showHairlineGrid": false }/*EDITMODE-END*/; // Hex → derived lighter / deeper shades via color-mix. const accentShades = (hex) => ({ base: hex, light: `color-mix(in oklab, ${hex} 60%, #ffffff)`, deep: `color-mix(in oklab, ${hex} 65%, #000000)`, }); function TweaksApp() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply tweaks to attrs/inline-style so CSS can react. React.useEffect(() => { const root = document.documentElement; root.setAttribute('data-palette', tweaks.palette); root.setAttribute('data-density', tweaks.density); root.classList.toggle('no-hero-orb', !tweaks.showHeroOrb); root.classList.toggle('show-grid', !!tweaks.showHairlineGrid); const s = accentShades(tweaks.accent); root.style.setProperty('--kpi-accent', s.base); root.style.setProperty('--kpi-accent-light', s.light); root.style.setProperty('--kpi-accent-deep', s.deep); }, [tweaks]); return ( setTweak('palette', v)} options={[ { value: 'paper', label: 'Paper' }, { value: 'warm', label: 'Warm' }, { value: 'cool', label: 'Cool' }, ]} /> setTweak('accent', v)} options={['#3A5B8C', '#1A2B4A', '#B47318', '#2F7D5B']} /> setTweak('density', v)} options={[ { value: 'compact', label: 'Compact' }, { value: 'default', label: 'Default' }, { value: 'airy', label: 'Airy' }, ]} /> setTweak('showHeroOrb', v)} /> setTweak('showHairlineGrid', v)} /> ); } Object.assign(window, { TweaksApp });