/* VibeBuilt — Tweaks app. Drives CSS via data-attrs + accent vars. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"direction": "serif",
"accent": "#2f7bff",
"hud": true,
"motion": true
}/*EDITMODE-END*/;
const ACCENTS = [
"#2f7bff", // electric blue
"#0fb5ad", // teal
"#7a5cff", // violet
"#e0488a" // magenta
];
function hexToRgb(hex) {
const h = hex.replace('#', '');
const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
const n = parseInt(x, 16);
return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => {
const r = document.documentElement;
r.dataset.dir = t.direction;
r.dataset.hud = t.hud ? 'on' : 'off';
r.dataset.motion = t.motion ? 'on' : 'off';
r.style.setProperty('--accent', t.accent);
r.style.setProperty('--accent-rgb', hexToRgb(t.accent));
}, [t.direction, t.accent, t.hud, t.motion]);
return (
setTweak('direction', v)}
/>
setTweak('accent', v)}
/>
setTweak('hud', v)} />
setTweak('motion', v)} />
);
}
const __mount = document.createElement('div');
document.body.appendChild(__mount);
ReactDOM.createRoot(__mount).render();