// craft-tweaks.jsx — three expressive controls that reshape the whole feel.
// Palette (mood + light), Composition (how loud the type field is), Atmosphere
// (how alive the living-paper shader is). Each maps to window.CRAFT.apply().

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "paper",
  "composition": "balanced",
  "atmosphere": "breathing"
}/*EDITMODE-END*/;

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

  React.useEffect(function () {
    if (window.CRAFT && window.CRAFT.apply) window.CRAFT.apply(t);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakSelect
        label="Mood"
        value={t.palette}
        options={[
          { value: 'paper', label: 'Warm Paper' },
          { value: 'bone',  label: 'Bone Grey' },
          { value: 'ink',   label: 'Ink — Dark' },
          { value: 'clay',  label: 'Sepia Clay' }
        ]}
        onChange={function (v) { setTweak('palette', v); }} />

      <TweakSection label="Typographic field" />
      <TweakRadio
        label="Composition"
        value={t.composition}
        options={[
          { value: 'quiet',    label: 'Quiet' },
          { value: 'balanced', label: 'Balanced' },
          { value: 'loud',     label: 'Loud' }
        ]}
        onChange={function (v) { setTweak('composition', v); }} />

      <TweakSection label="Living paper" />
      <TweakRadio
        label="Atmosphere"
        value={t.atmosphere}
        options={[
          { value: 'still',     label: 'Still' },
          { value: 'breathing', label: 'Breathing' },
          { value: 'alive',     label: 'Alive' }
        ]}
        onChange={function (v) { setTweak('atmosphere', v); }} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweak-root')).render(<CraftTweaks />);