const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#A9F06E",
    "parallax": true,
    "dark": false,
    "radius": 27
  }/*EDITMODE-END*/;
  const ACCENT_PRESETS = {
    "#A9F06E": { soft: "#E1FFC9" },
    "#FF9459": { soft: "#FFE3D1" },
    "#468DCC": { soft: "#B9DBFB" },
    "#F34D3A": { soft: "#FBD9D4" }
  };
  function App(){
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    React.useEffect(() => {
      const r = document.documentElement;
      r.style.setProperty('--accent', t.accent);
      r.style.setProperty('--accent-soft', ACCENT_PRESETS[t.accent]?.soft || '#E1FFC9');
      r.style.setProperty('--radius', t.radius + 'px');
      r.style.setProperty('--radius-lg', (t.radius + 8) + 'px');
      window.__parallax_enabled = t.parallax;
      if (t.dark){
        r.style.setProperty('--bg', '#131514');
        r.style.setProperty('--surface', '#1B1E1D');
        r.style.setProperty('--ink', '#F1F5F8');
        r.style.setProperty('--ink-2', '#D7DDE0');
        r.style.setProperty('--ink-3', '#8A9499');
        r.style.setProperty('--ink-mute', '#6B7378');
        r.style.setProperty('--line', '#2A2E2D');
      } else {
        r.style.setProperty('--bg', '#F1F5F8');
        r.style.setProperty('--surface', '#FFFFFF');
        r.style.setProperty('--ink', '#131514');
        r.style.setProperty('--ink-2', '#202B2D');
        r.style.setProperty('--ink-3', '#556265');
        r.style.setProperty('--ink-mute', '#8b949a');
        r.style.setProperty('--line', '#E5EAF0');
      }
    }, [t]);
    return (
      <TweaksPanel title="Tweaks">
        <TweakSection label="Акцент" />
        <TweakColor label="Цвет" value={t.accent}
          options={["#A9F06E","#FF9459","#468DCC","#F34D3A"]}
          onChange={v => setTweak('accent', v)} />
        <TweakSection label="Эффекты" />
        <TweakToggle label="Параллакс" value={t.parallax}
          onChange={v => setTweak('parallax', v)} />
        <TweakSlider label="Скругление" value={t.radius} min={8} max={32} unit="px"
          onChange={v => setTweak('radius', v)} />
        <TweakToggle label="Тёмная тема" value={t.dark}
          onChange={v => setTweak('dark', v)} />
      </TweaksPanel>
    );
  }
  const mount = document.createElement('div');
  document.body.appendChild(mount);
  ReactDOM.createRoot(mount).render(<App/>);