// Tweaks panel — uses tweaks-panel.jsx starter API: // useTweaks(defaults) → [values, setTweak] // const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#1E6FE0", "heroChip": true, "navStripe": true, "showStats": true }/*EDITMODE-END*/; // Map accent hex → matching deep + soft + line tokens const ACCENT_THEMES = { '#1E6FE0': { deep: '#1858B8', soft: '#E4EEFC', line: '#C8DBF6' }, // Electric blue (default) '#1A2747': { deep: '#0F1830', soft: '#E8EBF3', line: '#C9CFDE' }, // Bilgim navy '#107C71': { deep: '#0A5A52', soft: '#DDF0ED', line: '#B6DDD7' }, // Cyber teal '#7A3FF0': { deep: '#5E2BB8', soft: '#EEE6FD', line: '#D6C2F8' }, // Violet }; function DatakorTweaks() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply tweaks to CSS vars / data-attrs React.useEffect(() => { const root = document.documentElement; const theme = ACCENT_THEMES[tweaks.accent] || ACCENT_THEMES['#1E6FE0']; root.style.setProperty('--brand', tweaks.accent); root.style.setProperty('--brand-deep', theme.deep); root.style.setProperty('--brand-soft', theme.soft); root.style.setProperty('--brand-line', theme.line); }, [tweaks.accent]); React.useEffect(() => { const r = document.documentElement; r.dataset.twHerochip = tweaks.heroChip ? 'on' : 'off'; r.dataset.twNavstripe = tweaks.navStripe ? 'on' : 'off'; r.dataset.twStats = tweaks.showStats ? 'on' : 'off'; }, [tweaks.heroChip, tweaks.navStripe, tweaks.showStats]); return ( setTweak('accent', v)} /> setTweak('heroChip', v)} /> setTweak('navStripe', v)} /> setTweak('showStats', v)} /> ); } // CSS rules driven by data-attrs on const __dkTweakStyle = document.createElement('style'); __dkTweakStyle.textContent = ` html[data-tw-herochip="off"] [data-dk="hero-chip"] { display: none !important; } html[data-tw-navstripe="off"] [data-dk="nav-stripe"] { display: none !important; } html[data-tw-stats="off"] [data-dk="hero-stats"] { display: none !important; } `; document.head.appendChild(__dkTweakStyle); Object.assign(window, { DatakorTweaks });