// AXON BESS — Tweaks Panel (shared across all pages)
// Load after tweaks-panel.jsx; reads useTweaks / TweaksPanel etc from window.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "deep",
  "typography": "normal"
}/*EDITMODE-END*/;

function SiteTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    try { localStorage.setItem('axon-bess-theme', t.theme); } catch(e) {}
  }, [t.theme]);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-typography', t.typography);
  }, [t.typography]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color Scheme" />
      <TweakRadio
        label="Background"
        value={t.theme}
        options={['deep', 'lighter']}
        onChange={v => setTweak('theme', v)}
      />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Text size"
        value={t.typography}
        options={['normal', 'large']}
        onChange={v => setTweak('typography', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(
  React.createElement(SiteTweaks)
);