/* محزم — Tweaks panel app (drives theme + motion on ) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": ["#000000", "#ffffff", "#9b9b9b"],
"motion": "high"
}/*EDITMODE-END*/;
// palette[0] (background) -> theme name
const THEMES = {
"#000000": "heritage",
"#ffffff": "sand",
"#111111": "mono"
};
const PALETTES = [
["#000000", "#ffffff", "#9b9b9b"], // أسود × أبيض (الافتراضي)
["#ffffff", "#000000", "#555555"], // أبيض × أسود
["#111111", "#ffffff", "#8a8a8a"] // فحمي × أبيض
];
const MOTIONS = [
{ value: "low", label: "هادئ" },
{ value: "med", label: "متوازن" },
{ value: "high", label: "حيوي" }
];
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const root = document.documentElement;
React.useEffect(() => {
const bg = (Array.isArray(t.palette) ? t.palette[0] : t.palette || "").toLowerCase();
const theme = THEMES[bg] || "heritage";
root.setAttribute("data-theme", theme);
}, [t.palette]);
React.useEffect(() => {
root.setAttribute("data-motion", t.motion || "med");
if (window.__mhzam) requestAnimationFrame(window.__mhzam.applyParallax);
}, [t.motion]);
return (
setTweak("palette", v)}
/>
setTweak("motion", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("tweaks-root")).render();