const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "rotationSpeed": 1,
  "quakeRate": 1.6,
  "showGraticule": true
}/*EDITMODE-END*/;

function TweakApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // mirror tweaks into the globe's live config
  React.useEffect(() => {
    const c = window.TREMOR_CFG; if (!c) return;
    c.rotationSpeed = t.rotationSpeed;
    c.quakeRate = t.quakeRate;
    c.showGraticule = t.showGraticule;
  }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Motion" />
      <TweakSlider label="Rotation speed" value={t.rotationSpeed} min={0} max={3} step={0.1} unit="×"
        onChange={(v) => setTweak('rotationSpeed', v)} />
      <TweakSlider label="Quake frequency" value={t.quakeRate} min={0.2} max={3} step={0.1} unit="×"
        onChange={(v) => setTweak('quakeRate', v)} />
      <TweakSection label="Appearance" />
      <TweakToggle label="Graticule" value={t.showGraticule}
        onChange={(v) => setTweak('showGraticule', v)} />
    </TweaksPanel>
  );
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweakApp />);