/* Cherwell — Tweaks panel
   Uses the starter <TweaksPanel> shell + tweak controls. */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;

const CHERWELL_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "paper",
  "density": "default",
  "heroLayout": "split"
}/*EDITMODE-END*/;

function CherwellTweaks() {
  const [t, setTweak] = useTweaks(CHERWELL_DEFAULTS);

  React.useEffect(() => {
    if (window.__applyCherwellTweaks) window.__applyCherwellTweaks(t);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <TweakRadio
          label="Theme"
          value={t.theme}
          onChange={(v) => setTweak('theme', v)}
          options={[
            { value: 'paper', label: 'Paper' },
            { value: 'cool',  label: 'Cool' },
            { value: 'dark',  label: 'Dark' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Layout">
        <TweakRadio
          label="Hero"
          value={t.heroLayout}
          onChange={(v) => setTweak('heroLayout', v)}
          options={[
            { value: 'split',   label: 'Split' },
            { value: 'stacked', label: 'Stacked' },
          ]}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'airy',    label: 'Airy' },
            { value: 'default', label: 'Default' },
            { value: 'compact', label: 'Compact' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<CherwellTweaks />);