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>

tests/core/dynamics.test.ts

@@ -6,15 +6,16 @@ import { describe, expect, it } from 'vitest';
 import {
   compressorAutoGain,
   compressorCurve,
+  compressorFullScaleLoss,
   compressorMakeup,
   Limiter,
   limiterDelay,
   type LimiterNumbers,
 } from '../../src/core/soundfx/dynamics';
 
-/** What the node adds by itself: the 0.6th power of what full auto-gain would be. */
+/** What the node adds by itself: 0.6 of what it takes from a sound at full scale. */
 const ownMakeup = (threshold: number, knee: number, ratio: number) =>
-  10 ** ((0.6 * compressorAutoGain(threshold, knee, ratio)) / 20);
+  10 ** ((0.6 * compressorFullScaleLoss(threshold, knee, ratio)) / 20);
 
 describe('the curve of a Compressor', () => {
   it('adds the gain Chrome was measured to add below the threshold (2026-10-07)', () => {
@@ -32,17 +33,27 @@ describe('the curve of a Compressor', () => {
     // From -3 dB to 0 dB in, 3 dB more in is 0.75 dB more out.
     expect(db(1) - db(10 ** (-3 / 20))).toBeCloseTo(0.75, 3);
     // A hard knee is the straight line from the threshold on: 0 dB in is -9 dB out.
-    expect(compressorAutoGain(-12, 0, 4)).toBeCloseTo(9, 3);
+    expect(compressorFullScaleLoss(-12, 0, 4)).toBeCloseTo(9, 3);
   });
 
-  it('blends makeup and auto-gain, less what the node adds by itself', () => {
-    const numbers = { threshold: -12, knee: 0, ratio: 4 };
-    const db = (makeup: number, autoGain: number) =>
+  it('has auto-gain give back what it takes from a sound at -18 dB, not at full scale', () => {
+    // -18 dB is 6 dB over a threshold of -24 and comes out 1.5 dB over it at a ratio of 4.
+    expect(compressorAutoGain(-24, 0, 4)).toBeCloseTo(4.5, 3);
+    // Nothing is taken below the threshold, so nothing is given back.
+    expect(compressorAutoGain(-12, 0, 4)).toBeCloseTo(0, 6);
+    // The numbers of #378's picture: 14.6 dB, where full scale asked for 28.1.
+    expect(compressorAutoGain(-40, 6, 4)).toBeCloseTo(14.6, 1);
+    expect(compressorFullScaleLoss(-40, 6, 4)).toBeCloseTo(28.1, 1);
+  });
+
+  it('adds auto-gain on top of the makeup, less what the node adds by itself', () => {
+    const numbers = { threshold: -24, knee: 0, ratio: 4 };
+    const db = (makeup: number, autoGain: boolean) =>
       20 * Math.log10(compressorMakeup({ ...numbers, makeup, autoGain }));
-    expect(db(0, 0)).toBeCloseTo(-5.4, 3);
-    expect(db(0, 1)).toBeCloseTo(3.6, 3);
-    expect(db(6, 0.5)).toBeCloseTo(3 + 4.5 - 5.4, 3);
-    expect(db(0, 7)).toBeCloseTo(3.6, 3);
+    // The node adds 0.6 of the 18 dB it takes at full scale by itself.
+    expect(db(0, false)).toBeCloseTo(-10.8, 3);
+    expect(db(0, true)).toBeCloseTo(4.5 - 10.8, 3);
+    expect(db(6, true)).toBeCloseTo(6 + 4.5 - 10.8, 3);
   });
 });
 
@@ -95,12 +106,12 @@ describe('a Limiter', () => {
     expect(peak(low!)).toBeLessThanOrEqual(10 ** (-6 / 20) + 1e-6);
   });
 
-  it('raises the limited sound towards the ceiling by its auto-gain, never past it', () => {
+  it('raises the limited sound to the ceiling with auto-gain on, never past it', () => {
     const limited = (autoGain: number) =>
       peak(run(new Limiter(RATE), [sine(2, 0.2)], numbers(-12, -1, autoGain))[0]!, RATE * 0.1);
     expect(limited(1)).toBeLessThanOrEqual(10 ** (-1 / 20) + 1e-6);
     expect(limited(1)).toBeGreaterThan(10 ** (-1 / 20) * 0.98);
-    expect(20 * Math.log10(limited(0.5))).toBeCloseTo(-6.5, 1);
+    expect(20 * Math.log10(limited(0))).toBeCloseTo(-12, 1);
   });
 
   it('turns both sides down together, by the louder one', () => {

tests/core/soundfx.test.ts

@@ -443,7 +443,7 @@ describe('a Pan in a sound FX graph (#319)', () => {
 
 describe('a Compressor and a Limiter in a sound FX graph (#326)', () => {
   // The taps a Compressor keeps for its tab do nothing to the sound (#378).
-  const at = (type: string, params?: Record<string, number>) =>
+  const at = (type: string, params?: Record<string, number | boolean>) =>
     fxChainOf(compileSoundFx(line([{ type, params }]).fx.graph).compiled!).stages.filter(
       (s) => s.kind !== 'tap',
     );
@@ -458,17 +458,19 @@ describe('a Compressor and a Limiter in a sound FX graph (#326)', () => {
   });
 
   it('compress at their defaults, the gain after it worked out from makeup and auto-gain', () => {
-    const [stage] = at('SoundFxCompressor', { threshold: -12, knee: 0, ratio: 4, autoGain: 1 });
+    const [stage] = at('SoundFxCompressor', { threshold: -24, knee: 0, ratio: 4, makeup: 2, autoGain: true });
     expect(stage).toMatchObject({
       kind: 'compress',
-      threshold: -12,
+      threshold: -24,
       knee: 0,
       ratio: 4,
       attack: 0.003,
       release: 0.25,
     });
-    // 9 dB of full auto-gain, less the 5.4 dB the node adds itself.
-    expect(20 * Math.log10((stage as { gain: number }).gain)).toBeCloseTo(3.6, 3);
+    const db = (s: FxStage | undefined) => 20 * Math.log10((s as { gain: number }).gain);
+    // 2 dB makeup and 4.5 dB of auto-gain on top, less the 10.8 dB the node adds itself.
+    expect(db(stage)).toBeCloseTo(2 + 4.5 - 10.8, 3);
+    expect(db(at('SoundFxCompressor', { threshold: -24, knee: 0, ratio: 4 })[0])).toBeCloseTo(-10.8, 3);
     expect(at('SoundFxCompressor', { ratio: 50, threshold: 10 })).toMatchObject([
       { ratio: 20, threshold: 0 },
     ]);
@@ -479,6 +481,7 @@ describe('a Compressor and a Limiter in a sound FX graph (#326)', () => {
       { kind: 'limit', threshold: -6, ceiling: -1, release: 0.1, autoGain: 1 },
     ]);
     expect(at('SoundFxLimiter', { ceiling: 3, release: 0 })).toMatchObject([{ ceiling: 0, release: 0.001 }]);
+    expect(at('SoundFxLimiter', { autoGain: false })).toMatchObject([{ autoGain: 0 }]);
     const [limit] = at('SoundFxLimiter');
     const [compress] = at('SoundFxCompressor');
     expect(stageLatency(limit!, 48000)).toBe(0.005);
@@ -497,10 +500,28 @@ describe('a Compressor and a Limiter in a sound FX graph (#326)', () => {
     );
     expect(fxLatencyOf(way([]), 48000)).toBe(0);
   });
+
+  it('read the auto-gain of a project from before it was a switch: on above 0 (#378)', () => {
+    const gain = (autoGain?: number) =>
+      (
+        at('SoundFxCompressor', {
+          threshold: -24,
+          knee: 0,
+          ratio: 4,
+          ...(autoGain !== undefined && { autoGain }),
+        })[0] as {
+          gain: number;
+        }
+      ).gain;
+    expect(gain(1)).toBeCloseTo(gain(0.5), 9);
+    expect(gain(1)).toBeGreaterThan(gain(0));
+    expect(gain(0)).toBeCloseTo(gain(), 9);
+    expect(at('SoundFxLimiter', { autoGain: 0 })).toMatchObject([{ autoGain: 0 }]);
+  });
 });
 
 describe('a Saturation in a sound FX graph (#323)', () => {
-  const at = (params?: Record<string, string | number>) =>
+  const at = (params?: Record<string, string | number | boolean>) =>
     fxChainOf(compileSoundFx(line([{ type: 'SoundFxSaturation', params }]).fx.graph).compiled!).stages;
 
   it('bends at its defaults, its level from auto-gain, and is left out at a typed-in mix of 0', () => {
@@ -514,10 +535,11 @@ describe('a Saturation in a sound FX graph (#323)', () => {
     expect(at({ curve: 'nope' })).toMatchObject([{ curve: 'soft' }]);
   });
 
-  it('blends its output and its auto-gain, and is late by the oversampling', () => {
-    const [stage] = at({ curve: 'hard', drive: 24, output: 6, autoGain: 0.5 });
-    const levelDb = 20 * Math.log10((stage as { level: number }).level);
-    expect(levelDb).toBeCloseTo(0.5 * 6 + 0.5 * saturationAutoGain('hard', 24), 9);
+  it('adds its output on top of its auto-gain, and is late by the oversampling', () => {
+    const levelDb = (s: FxStage | undefined) => 20 * Math.log10((s as { level: number }).level);
+    const [stage] = at({ curve: 'hard', drive: 24, output: 6 });
+    expect(levelDb(stage)).toBeCloseTo(6 + saturationAutoGain('hard', 24), 9);
+    expect(levelDb(at({ curve: 'hard', drive: 24, output: 6, autoGain: false })[0])).toBeCloseTo(6, 9);
     expect(stageLatency(stage!, 48000)).toBe(0.004);
   });
 });

tests/editor/compressor-view.test.ts

@@ -14,6 +14,9 @@ import {
   HISTORY_SECONDS,
   LevelHistory,
   levelY,
+  MAX_CURVE,
+  MIN_CURVE,
+  picturesLayout,
   ratioFor,
   ratioHandle,
   reductionOf,
@@ -28,7 +31,7 @@ const numbers: CompressorNumbers = {
   attack: 0.003,
   release: 0.25,
   makeup: 0,
-  autoGain: 0,
+  autoGain: false,
 };
 const RATIO = { min: 1, max: 20, step: 0.1 };
 
@@ -65,10 +68,10 @@ describe('the curve of a Compressor', () => {
     expect(curveOutDb(0, -24, 6, ratio)).toBeCloseTo(-16, 0);
   });
 
-  it('counts the makeup, the auto-gain or a blend of both as the gain after it', () => {
+  it('counts the makeup, and the auto-gain on top of it where it is on, as the gain after it', () => {
     expect(compressorGainDb({ ...numbers, makeup: 6 })).toBe(6);
-    expect(compressorGainDb({ ...numbers, makeup: 6, autoGain: 1 })).toBeCloseTo(18, 1);
-    expect(compressorGainDb({ ...numbers, makeup: 6, autoGain: 0.5 })).toBeCloseTo(12, 1);
+    // -18 dB in comes out at -22.5: auto-gain gives the 4.5 dB back.
+    expect(compressorGainDb({ ...numbers, makeup: 6, autoGain: true })).toBeCloseTo(10.5, 3);
   });
 });
 
@@ -82,10 +85,10 @@ describe('the level picture of a Compressor', () => {
 
   it('keeps the readings of the last seconds and knows when all of them are silent', () => {
     const history = new LevelHistory();
-    history.push(0, { in: -6, out: -9 });
-    history.push(1, null);
+    history.push(0, { in: -6, out: -9 }, 0);
+    history.push(1, null, 0);
     expect(history.heard).toBe(true);
-    history.push(1 + HISTORY_SECONDS, null);
+    history.push(1 + HISTORY_SECONDS, null, 0);
     expect(history.all.map((p) => p.t)).toEqual([1, 1 + HISTORY_SECONDS]);
     expect(history.heard).toBe(false);
   });
@@ -99,16 +102,43 @@ describe('the level picture of a Compressor', () => {
 
   it('tints from the level coming in down by what is taken away, one shape per stretch', () => {
     const points = [
-      { t: 0, in: -6, out: -12 },
-      { t: 1, in: -6, out: -12 },
-      { t: 2, in: -30, out: -30 },
-      { t: 3, in: 0, out: -3 },
-      { t: 4, in: 0, out: -3 },
+      { t: 0, in: -6, out: -12, gain: 0 },
+      { t: 1, in: -6, out: -12, gain: 0 },
+      { t: 2, in: -30, out: -30, gain: 0 },
+      { t: 3, in: 0, out: -3, gain: 0 },
+      { t: 4, in: 0, out: -3, gain: 0 },
     ];
-    const shapes = reductionShapes(points, 0, 4, 400, 660);
+    const shapes = reductionShapes(points, 4, 400, 660);
     expect(shapes).toHaveLength(2);
     // Along the level coming in, then back along it less what is taken away.
     expect(shapes[0]).toEqual([0, 120, 100, 120, 100, 180, 0, 180]);
     expect(shapes[1]).toEqual([300, 60, 400, 60, 400, 90, 300, 90]);
   });
+
+  it('reads every reading by the gain after the compressing as it was then', () => {
+    // Raised by 20 dB until a second ago, by 0 since: the same 6 dB taken away both times.
+    const history = new LevelHistory();
+    history.push(0, { in: -24, out: -10 }, 20);
+    history.push(1, { in: -24, out: -10 }, 20);
+    history.push(2, { in: -24, out: -30 }, 0);
+    history.push(3, { in: -24, out: -30 }, 0);
+    const shapes = reductionShapes(history.all, 3, 300, 660);
+    expect(shapes).toHaveLength(1);
+    expect(shapes[0]).toHaveLength(16);
+    expect(shapes[0]!.filter((_, i) => i % 2 === 1)).toEqual([300, 300, 300, 300, 360, 360, 360, 360]);
+  });
+});
+
+describe('the pictures in the space of the tab', () => {
+  it('lets the levels fill the height and keeps the curve square, centred up and down', () => {
+    const at = picturesLayout(1600, 1000, 8);
+    expect(at.curve).toEqual({ x: 1600 - MAX_CURVE, y: (1000 - MAX_CURVE) / 2, side: MAX_CURVE });
+    expect(at.levels).toEqual({ w: 1600 - MAX_CURVE - 8, h: 1000 });
+  });
+
+  it('grows the curve with a lower tab, and holds it at its least in a narrow one', () => {
+    expect(picturesLayout(1600, 250, 8).curve).toEqual({ x: 1350, y: 0, side: 250 });
+    expect(picturesLayout(500, 400, 8).curve.side).toBe(200);
+    expect(picturesLayout(300, 400, 8).curve.side).toBe(MIN_CURVE);
+  });
 });

tests/editor/documents.test.ts

@@ -1,6 +1,13 @@
 import { describe, expect, it } from 'vitest';
 import { closeDocument, neighbourOf, openDocument, replaceDocument } from '../../src/editor/documents';
-import { MIN_WINDOW_HEIGHT, MIN_WINDOW_WIDTH, onScreen, openingBox, sized } from '../../src/editor/floating';
+import {
+  leastBox,
+  MIN_WINDOW_HEIGHT,
+  MIN_WINDOW_WIDTH,
+  onScreen,
+  openingBox,
+  sized,
+} from '../../src/editor/floating';
 import { tabRowLayout } from '../../src/editor/tabRow';
 
 const row = (docs: string[], active: string | null) => ({ docs, active });
@@ -87,6 +94,16 @@ describe('a tab in a window (#371)', () => {
     expect(sized(box, -500, -500, 1280, 800)).toEqual({ ...box, w: MIN_WINDOW_WIDTH, h: MIN_WINDOW_HEIGHT });
     expect(sized(box, 900, 900, 1280, 800)).toEqual({ ...box, w: 680, h: 500 });
   });
+
+  it('is held at the least its pane needs, but never larger than the screen (#378)', () => {
+    const least = leastBox(700.4, 450);
+    expect(least).toEqual({ w: 701, h: 450 });
+    expect(leastBox(100, 100)).toEqual({ w: MIN_WINDOW_WIDTH, h: MIN_WINDOW_HEIGHT });
+    const box = { x: 100, y: 100, w: 800, h: 600 };
+    expect(sized(box, -500, -500, 1280, 800, least)).toEqual({ ...box, w: 701, h: 450 });
+    expect(onScreen({ ...box, w: 400, h: 300 }, 1280, 800, least)).toEqual({ ...box, w: 701, h: 450 });
+    expect(onScreen({ ...box, w: 400, h: 300 }, 600, 400, least)).toEqual({ x: 0, y: 0, w: 600, h: 400 });
+  });
 });
 
 describe('tab row without an active tab', () => {

tests/viewport/sound-library.test.ts

@@ -1390,7 +1390,7 @@ describe('notes of an instrument (#331)', () => {
       threshold: { value: -6 },
       ceiling: { value: -1 },
       release: { value: 0.1 },
-      autoGain: { value: 1 },
+      autoGain: true,
     };
     const limited = { ...sample(FILE), stages: [limit] } as FxPlan;
     library.playNote('instrument:i', [limited, sample(OTHER)], {}, 1, '', 0.5, { at: 2 });
@@ -2720,7 +2720,7 @@ describe('the stages of #318 to #328', () => {
       attack: { value: 0.003 },
       release: { value: 0.25 },
       makeup: { value: 0 },
-      autoGain: { value: 0 },
+      autoGain: false,
     };
     const plan: FxPlan = {
       mix: { value: 0.5 },