Fit the Compressor's tab to any size, make auto-gain a switch (#378)

Two things came up on the new tab. Floated and sized down, it spilled
its knobs out of its window, and sized up it left the window empty.
Auto-gain lifted far too much: it brought 0 dB back to 0 dB, which at
-40 dB, 4:1 and knee 6 is +28.1 dB, so a sound at -24 dB came out at
-6 dB. And as a knob from 0 to 1 it blended between makeup and
auto-gain, so at 1 the makeup knob did nothing.

Layout:

- The knobs stay on the bottom line, centred, with the help line
  above them.
- The levels fill the height left above. The curve is a square at
  their right, centred up and down. It grows with the tab from 180 to
  360 px and takes no more than 40 % of its width (picturesLayout).
- A floated window cannot be sized below what its pane needs. A pane
  says so in its minWidth and minHeight, and the Compressor's is every
  knob and the smallest pictures. Other panes keep 320 x 200.
- A pane put into an open window that is too small grows the window.

Auto-gain, as decided in #378:

- A Compressor's auto-gain gives back what it takes from a sound at
  -18 dB, so that one comes out as loud as it went in. At the numbers
  above that is +14.6 dB.
- Auto-gain is a switch on the Compressor, the Limiter and the
  Saturation alike, a setting and no longer an input. The makeup or
  output is added on top of it instead of being blended with it.
- A project from before reads a number as on above 0. Nodes never
  set keep their defaults: off on the Compressor, on on the other two.
- The tab shows the switch at the right of the knobs, with the dB it
  gives below it. With it on, the curve has a line at -18 dB from the
  curve up to the diagonal.
- Every level reading keeps the gain of its time. Before, the whole
  picture was read by the current makeup, so after a change the
  tinting of the last seconds was wrong or missing.

Findings:

- My first e2e run of the layout clicked Dock where it was before the
  window was sized up, so the window stayed open and the next check
  went red. The check reads the button again.

Tests:

- Gate (melektaus-atx): 282 files, 4344 tests (6 new)
- e2e 34 (melektaus-atx): ALL PASSED, 118 checks (2 new)
- Offline in Chrome: a sine at -18 dB through -24 dB and 4:1 came out
  at -17.92 dB with auto-gain on and -22.42 dB with it off.
- Counter-checks: the curve set at the top instead of the middle, and
  every reading read at a gain of 0, each fail exactly their test.
- Looked at the window in screenshots: at its least every knob and
  the switch show. At 1280 x 797 the levels fill the height, the
  curve is centred at the right and the knobs are at the bottom.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tools/e2e/34-sound.mjs

@@ -707,7 +707,7 @@ export async function sound(t) {
       compShown.knobs.ratio.value === 4 &&
       compShown.knobs.knee.value === 0 &&
       compShown.knobs.attack.value === 0.003 &&
-      Object.keys(compShown.knobs).length === 7,
+      Object.keys(compShown.knobs).length === 6,
     JSON.stringify(compShown),
   );
   const thresholdDial = await json("__gm.compressor.dialAt('threshold')");
@@ -738,6 +738,26 @@ export async function sound(t) {
       compTurned.knobs.makeup.value === 3,
     JSON.stringify({ compDragged, compUndone, compTurned }),
   );
+  // Auto-gain is a switch (#378): a click turns it on as one undo step, and it says what it gives.
+  const autoOff = await json('__gm.compressor.autoGain()');
+  await click(autoOff.at.x, autoOff.at.y);
+  await sleep(100);
+  const autoOn = await json('({ ...__gm.compressor.autoGain(), numbers: __gm.compressor.numbers() })');
+  await press('z', { ctrl: true });
+  await sleep(100);
+  const autoUndone = await json('({ ...__gm.compressor.autoGain(), numbers: __gm.compressor.numbers() })');
+  check(
+    'the auto-gain switch turns on with a click as one undo step and says the dB it gives',
+    !autoOff.on &&
+      autoOff.says === 'off' &&
+      autoOn.on &&
+      autoOn.numbers.autoGain === true &&
+      /^\+\d+\.\d dB$/.test(autoOn.says) &&
+      !autoUndone.on &&
+      autoUndone.numbers.autoGain === false &&
+      autoUndone.says === 'off',
+    JSON.stringify({ autoOff, autoOn, autoUndone }),
+  );
   const ratioHandle = await json("__gm.compressor.handleAt('ratio')");
   const ratioTo = await json('__gm.compressor.pointAt(0, -10)');
   await drag(ratioHandle.x, ratioHandle.y, ratioTo.x, ratioTo.y);
@@ -773,6 +793,41 @@ export async function sound(t) {
     JSON.stringify(compLevels),
   );
   await evaluate('__gm.sound.stopAll()');
+  // Floated and sized down as far as it goes, the window keeps every knob; sized up, the knobs stay on
+  // the bottom line and the curve in the middle of the height to its right.
+  await evaluate(`__gm.floatDocument(${JSON.stringify(`compressor:${fxId}:fx-comp`)})`);
+  const compWindow = async () => (await json('__gm.floatWindows()')).find((w) => w.kind === 'compressor');
+  const compLayout = async () => {
+    const win = await compWindow();
+    const at = await json(
+      "({ first: __gm.compressor.dialAt('threshold'), last: __gm.compressor.autoGain().at, ...__gm.compressor.pictures() })",
+    );
+    const inside = (p) => p.x > win.box.x && p.x < win.box.x + win.box.w && p.y < win.box.y + win.box.h - 20;
+    return { box: win.box, ...at, inside: inside(at.first) && inside(at.last) };
+  };
+  let floatedComp = await compWindow();
+  await t.drag(floatedComp.grip.x, floatedComp.grip.y, floatedComp.grip.x - 2000, floatedComp.grip.y - 2000);
+  const compSmall = await compLayout();
+  floatedComp = await compWindow();
+  await t.drag(floatedComp.grip.x, floatedComp.grip.y, floatedComp.grip.x + 2000, floatedComp.grip.y + 2000);
+  const compLarge = await compLayout();
+  const { levels: bigLevels, curve: bigCurve } = compLarge;
+  check(
+    'a floated Compressor holds every knob at its least size; sized up, the knobs stay at the bottom, the levels fill the height and the curve sits in its middle',
+    compSmall.box.w > 320 &&
+      compSmall.box.h > 200 &&
+      compSmall.inside &&
+      compLarge.box.h > compSmall.box.h + 100 &&
+      compLarge.inside &&
+      compLarge.box.y + compLarge.box.h - compLarge.last.y < 100 &&
+      bigLevels.h > compSmall.levels.h + 100 &&
+      bigCurve.h === bigCurve.w &&
+      Math.abs(bigCurve.y + bigCurve.h / 2 - (bigLevels.y + bigLevels.h / 2)) <= 1,
+    JSON.stringify({ compSmall, compLarge }),
+  );
+  // Read again: Dock moved right with the window's edge.
+  floatedComp = await compWindow();
+  await click(floatedComp.dock.x, floatedComp.dock.y);
   await mutate(`
     const graph = __gm.state.project.assets.find((a) => a.id === ${JSON.stringify(fxId)}).graph;
     graph.edges.push(${JSON.stringify(edge('fx-e14', 'fx-in', 'depth', 'fx-comp', 'ratio'))});`);
@@ -1327,24 +1382,27 @@ export async function sound(t) {
       };
       const loudest = (out, from = 0) => { let at = 0; for (let i = from; i < out.length; i++) if (Math.abs(out[i]) > Math.abs(out[at])) at = i; return at; };
       const db = (out) => +(20 * Math.log10(Math.abs(out[loudest(out, RATE / 4)]))).toFixed(2);
-      const compress = (gain) => ({ kind: 'compress', threshold: -12, knee: 0, ratio: 4, attack: 0.003, release: 0.25, gain });
+      const compress = (gain) => ({ kind: 'compress', threshold: -24, knee: 0, ratio: 4, attack: 0.003, release: 0.25, gain });
+      const makeup = (autoGain) => __gm.sound.compressorMakeup({ threshold: -24, knee: 0, ratio: 4, makeup: 0, autoGain });
       const limit = (autoGain) => ({ kind: 'limit', threshold: -6, ceiling: -1, release: 0.05, autoGain });
       const limited = await render(limit(0), sine(2));
+      // A sine at the -18 dB auto-gain keeps as loud as it came in (#378).
+      const reference = sine(10 ** (-18 / 20));
       return {
         compressorLate: loudest(await render(compress(1), impulse)) - 480,
         limiterLate: loudest(await render(limit(0), impulse)) - 480,
-        autoGain: db(await render(compress(10 ** (3.6 / 20)), sine(1))),
-        noMakeup: db(await render(compress(10 ** (-5.4 / 20)), sine(1))),
+        autoGain: db(await render(compress(makeup(true)), reference)),
+        noMakeup: db(await render(compress(makeup(false)), reference)),
         limitedPeak: +(20 * Math.log10(Math.max(...limited.map(Math.abs)))).toFixed(3),
         ceiling: db(await render(limit(1), sine(2))),
       };
     })()`);
   check(
-    'a Compressor is 6 ms late and auto-gain brings full scale back, a Limiter is 5 ms late and never passes its limit',
+    'a Compressor is 6 ms late and auto-gain keeps -18 dB as loud, a Limiter is 5 ms late and never passes its limit',
     dynamics.compressorLate === 288 &&
       dynamics.limiterLate === 240 &&
-      Math.abs(dynamics.autoGain) < 0.5 &&
-      Math.abs(dynamics.noMakeup + 9) < 0.5 &&
+      Math.abs(dynamics.autoGain + 18) < 0.5 &&
+      Math.abs(dynamics.noMakeup + 22.5) < 0.5 &&
       dynamics.limitedPeak <= -6 + 1e-3 &&
       dynamics.ceiling <= -1 + 1e-3 &&
       dynamics.ceiling > -1.2,