Show the zoom of the music tabs and the EQ as a transition (#377)

The zoom transition of #309 left out the Pattern, Song and Sound tabs
and the Parametric EQ's curve. There a wheel step or Fit still jumped,
whatever "Zoom (ms)" in the general settings said.

- axisTween wraps ViewTween for a single axis. The music tabs zoom
  their time across and their rows, tracks or height down apart, so
  each keeps one tween per axis and either goes its own way.
- Fit by its button is shown as a transition too, as in the other
  tabs. The fit on opening a document still jumps.
- A middle-button pan first lands a transition under way, and saving
  a document's view lands it on the step it was heading for.
- The EQ's range is saved on the node at once. While the zoom is on
  its way the curve draws a range of its own and writes nothing.
  Its dB lines are those of the new range, sliding to their place,
  so no line shows a crooked number.

Found on the way, not part of #377:
- CI task 611 for 82e96e6 failed the stream check of e2e 34. The
  renderer had grown by 60.1 MB with nothing decoded. The check
  summed the RSS of every Chrome renderer, and the test Chrome runs
  four of them. It now measures the largest one, the tab's own, and
  writes all of them into the check's detail.

Tests:
- view-tween.test.ts: 18 tests, 2 new. They fail when axisTween
  writes the wrong offset.
- e2e 34, 64, 65 on melektaus-atx: ALL PASSED, 202 checks, 4 new.
  At 1000 ms each zoom is between its two steps a frame after the
  wheel and lands on the step a jump reaches.
- Stream check: the tab's renderer grew by 8.6 MB streamed and by
  66.9 MB decoded.
- Gate on melektaus-atx: CHECK EXIT 0, 280 files, 4321 tests.

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

src/editor/pattern/PianoRoll.ts

@@ -47,6 +47,7 @@ import {
   zoomTime,
 } from '../music/timeView';
 import type { EditorState } from '../state';
+import { axisTween } from '../viewTween';
 import {
   clampShift,
   draggedLength,
@@ -176,6 +177,17 @@ export class PianoRoll extends Widget {
   private readonly hint = crispText({ text: '', style: textStyle('muted') });
   private readonly laneLabel = crispText({ text: 'Velocity', style: textStyle('small') });
   private view: RollView = { panX: 0, pxPerTick: 0.1, panY: 0, rowHeight: DEFAULT_ROW_HEIGHT };
+  /** A zoom or a Fit shown as a transition (#377), the time and the rows each on their own. */
+  private readonly timeTween = axisTween(
+    () => ({ scale: this.view.pxPerTick, offset: this.view.panX }),
+    ({ scale, offset }) => (this.view = { ...this.view, pxPerTick: scale, panX: offset }),
+    () => this.redraw(),
+  );
+  private readonly rowTween = axisTween(
+    () => ({ scale: this.view.rowHeight, offset: this.view.panY }),
+    ({ scale, offset }) => (this.view = { ...this.view, rowHeight: scale, panY: offset }),
+    () => this.redraw(),
+  );
   private needsFit = true;
   private assetId = '';
   private gesture: Gesture | null = null;
@@ -268,6 +280,8 @@ export class PianoRoll extends Widget {
   }
 
   saveView(): RollView {
+    this.timeTween.land();
+    this.rowTween.land();
     return { ...this.view };
   }
 
@@ -277,8 +291,13 @@ export class PianoRoll extends Widget {
     this.redraw();
   }
 
-  /** The whole pattern across, and its notes – or what the instrument plays – down the middle. */
+  /** Fit by hand, shown as a transition. */
   fit(): void {
+    this.timeTween.change(() => this.rowTween.change(() => this.frame()));
+  }
+
+  /** The whole pattern across, and its notes – or what the instrument plays – down the middle. */
+  private frame(): void {
     const asset = this.asset();
     const width = this.gridWidth;
     const height = this.gridHeight;
@@ -484,10 +503,12 @@ export class PianoRoll extends Widget {
     keys: number | null;
     hover: NoteHit | null;
     cursor: string;
+    moving: boolean;
   } {
     const g = this.gesture;
     return {
       ...this.view,
+      moving: this.timeTween.moving || this.rowTween.moving,
       start: this.startTick,
       playhead: this.playhead,
       loop: this.shownLoop(),
@@ -545,6 +566,8 @@ export class PianoRoll extends Widget {
     e.stopPropagation();
     ui().focus.focus(this);
     if (e.button === 1) {
+      this.timeTween.finish();
+      this.rowTween.finish();
       this.gesture = { kind: 'pan', pointer: p, panX: this.view.panX, panY: this.view.panY };
       return;
     }
@@ -900,14 +923,16 @@ export class PianoRoll extends Widget {
     const area = this.areaAt({ x: local.x, y: local.y });
     const g = this.inGrid({ x: local.x, y: local.y });
     const factor = zoomFactor(e.deltaY);
-    let view: RollView;
-    if (area === 'keys') view = zoomRows(this.view, factor, g.y);
-    else if (area === 'ruler' || area === 'grid' || area === 'lane')
-      view = { ...this.view, ...zoomTime(this.view, factor, g.x) };
-    else return;
-    this.view = clampRows(clampTimePan(view, this.gridWidth, this.earliest), this.gridHeight);
-    this.needsFit = false;
-    this.redraw();
+    const rows = area === 'keys';
+    if (!rows && area !== 'ruler' && area !== 'grid' && area !== 'lane') return;
+    (rows ? this.rowTween : this.timeTween).change(() => {
+      const view = rows
+        ? zoomRows(this.view, factor, g.y)
+        : { ...this.view, ...zoomTime(this.view, factor, g.x) };
+      this.view = clampRows(clampTimePan(view, this.gridWidth, this.earliest), this.gridHeight);
+      this.needsFit = false;
+      this.redraw();
+    });
     e.preventDefault();
   }
 
@@ -951,12 +976,12 @@ export class PianoRoll extends Widget {
   }
 
   override layout(): void {
-    if (this.needsFit) this.fit();
+    if (this.needsFit) this.frame();
   }
 
   override redraw(): void {
     if (this.needsFit && this.gridWidth > 0 && this.gridHeight > 0 && this.asset()) {
-      this.fit();
+      this.frame();
       return;
     }
     const c = Theme.colors;