/* Панель Tweaks: неоновый акцент, layout hero, фон-сетка.
Применяет значения к CSS-переменным и data-атрибутам . */
const { useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#C6F24E",
"hero": "dashboard",
"grid": "on",
"logo": "mono"
}/*EDITMODE-END*/;
const ACCENTS = ["#C6F24E", "#3DE0F2", "#C46BFF", "#FF8A4C"];
function applyTweaks(t) {
const root = document.documentElement;
const theme = document.body.getAttribute("data-theme");
// акцент задаётся темой; ползунок цвета влияет только на базовую тему terminal
if (!theme || theme === "terminal") root.style.setProperty("--accent", t.accent);
else root.style.removeProperty("--accent");
document.body.setAttribute("data-hero", t.hero);
document.body.setAttribute("data-grid", t.grid);
document.body.setAttribute("data-logo", t.logo);
// даём пасхалкам способ восстановить акцент после rave
window.__applyTweaksAccent = function () {
const th = document.body.getAttribute("data-theme");
if (!th || th === "terminal") root.style.setProperty("--accent", t.accent);
else root.style.removeProperty("--accent");
};
}
function TweaksApp() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useEffect(() => { applyTweaks(t); }, [t]);
return (
setTweak("accent", v)}
/>
setTweak("hero", v)}
/>
setTweak("logo", v)}
/>
setTweak("grid", v)}
/>
);
}
// применяем значения сразу при загрузке (до монтирования панели — без мигания)
applyTweaks(TWEAK_DEFAULTS);
ReactDOM.createRoot(document.getElementById("tweaks-root")).render();