/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor, TweakSlider */
// ── Defaults block ────────────────────────────────────────────────────────
// Persistence happens via the host: when the user changes a tweak, the host
// rewrites the JSON between the EDITMODE markers in this file so the new
// value sticks across reloads. Keep the block as VALID JSON.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"density": "spacious",
"motion": "cinematic",
"accent": "purple",
"heroParallax": true,
"magnetic": true,
"logoStyle": "grid",
"showBridge": true,
"showPipeline": false,
"showCapabilities": false,
"showProjects": true,
"showNews": false
}/*EDITMODE-END*/;
// Map the accent radio value → CSS palette name applied to
const ACCENT_OPTIONS = ['purple', 'amber', 'coral', 'emerald', 'ink-mono'];
const ACCENT_SWATCH = {
purple: ['#B026F0', '#F4EEE0'],
amber: ['#FFB547', '#F4EEE0'],
coral: ['#FF5B2E', '#F4EEE0'],
emerald: ['#1F8A5B', '#F4EEE0'],
'ink-mono': ['#1F0A4C', '#F4EEE0'],
};
// Tiny side-effect hook — re-applies attrs whenever a tweak changes.
function useBodyAttrs(t) {
React.useEffect(() => {
const b = document.body;
b.dataset.density = t.density;
b.dataset.motion = t.motion;
b.dataset.accent = t.accent === 'purple' ? '' : t.accent;
b.dataset.heroParallax = t.heroParallax ? 'true' : 'false';
b.dataset.magnetic = t.magnetic ? 'true' : 'false';
b.dataset.logos = t.logoStyle;
b.dataset.showBridge = t.showBridge ? 'true' : 'false';
b.dataset.showPipeline = t.showPipeline ? 'true' : 'false';
b.dataset.showCapabilities = t.showCapabilities ? 'true' : 'false';
b.dataset.showProjects = t.showProjects ? 'true' : 'false';
b.dataset.showNews = t.showNews ? 'true' : 'false';
}, [t]);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useBodyAttrs(t);
return (
setTweak('density', v)} />
setTweak('motion', v)} />
setTweak('heroParallax', v)} />
setTweak('magnetic', v)} />
ACCENT_SWATCH[a])}
onChange={(palette) => {
const match = ACCENT_OPTIONS.find(
(a) => JSON.stringify(ACCENT_SWATCH[a]) === JSON.stringify(palette)
);
if (match) setTweak('accent', match);
}} />
setTweak('logoStyle', v)} />
setTweak('showBridge', v)} />
setTweak('showPipeline', v)} />
setTweak('showCapabilities', v)} />
setTweak('showProjects', v)} />
setTweak('showNews', v)} />
);
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();