/* PrimerIQ Tweaks island — applies Layout / Density / Accent to the live DOM.
   Mounts only the Tweaks panel; the rest of the app is plain HTML/JS. */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect } = window;

const PrimerIQ_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "Comfortable",
  "layout": "Rail right",
  "accent": "Ink"
}/*EDITMODE-END*/;

const toAttr = s => String(s).toLowerCase().replace(/\s+/g, '-');

function AtlasTweaks(){
  const [t, setTweak] = useTweaks(PrimerIQ_TWEAK_DEFAULTS);
  React.useEffect(()=>{
    const r = document.documentElement;
    r.setAttribute('data-density', toAttr(t.density));
    r.setAttribute('data-layout', toAttr(t.layout));
    r.setAttribute('data-accent', toAttr(t.accent));
  }, [t.density, t.layout, t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Layout" />
      <TweakRadio label="Panel arrangement" value={t.layout}
        options={['Rail right','Rail left','Wide']}
        onChange={v=> setTweak('layout', v)} />
      <TweakSection label="Density" />
      <TweakRadio label="Spacing" value={t.density}
        options={['Comfortable','Compact']}
        onChange={v=> setTweak('density', v)} />
      <TweakSection label="Accent" />
      <TweakSelect label="Highlight colour" value={t.accent}
        options={['Ink','Forest','Slate','Terracotta']}
        onChange={v=> setTweak('accent', v)} />
    </TweaksPanel>
  );
}

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