const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "squareSize": 12
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.style.setProperty('--sq', t.squareSize + 'px');
  }, [t.squareSize]);

  return (
    <TweaksPanel>
      <TweakSection label="Progress grid" />
      <TweakSlider label="Square size" value={t.squareSize} min={8} max={16} unit="px"
                   onChange={(v) => setTweak('squareSize', v)} />
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<QMTweaks />);