// Tweak host — applies palette + density via [data-palette]/[data-density]
const { useEffect: _useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "studio",
  "density": "comfortable",
  "motif": "dots"
}/*EDITMODE-END*/;

function TweaksHost() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  _useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
    document.documentElement.setAttribute('data-density', t.density);
    document.documentElement.setAttribute('data-motif', t.motif || 'mountains');
  }, [t.palette, t.density, t.motif]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakRadio label="Theme" value={t.palette}
        options={['studio', 'cyber', 'royal', 'navy', 'midnight', 'slate-sage', 'forest']}
        onChange={(v) => setTweak('palette', v)} />
      <TweakSection label="Background motif" />
      <TweakRadio label="Style" value={t.motif || 'mountains'}
        options={['mountains', 'dots', 'none']}
        onChange={(v) => setTweak('motif', v)} />
      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={['compact', 'comfortable', 'spacious']}
        onChange={(v) => setTweak('density', v)} />
    </TweaksPanel>
  );
}

window.TweaksHost = TweaksHost;