Show a Gain node as an orange device with one knob (#384)

A Gain node now draws a small device in the graph, as the Compressor
does since #380: the brushed plate in orange, 160x220 graph units, with
one chrome knob between its inputs and its output.

- GainPanel and GainFace join the node faces. The knob drags, resets
  on a double-click and keeps the wheel for the graph (#383). Each turn
  is one undo step, a linked Gain (dB) greys it.
- The knob turns with a taper of 0.26, so 0 dB stands straight up and
  the range below -24 dB takes a fifth of the turn.
- drawPlate, engrave and the brushed look move out of CompressorPanel
  so both devices share them. The Knob takes an arc colour, because
  the orange arc vanished on the orange plate.
- No meter and no tap. Gain sits in every voice of an instrument, and
  a tap would add two audio nodes to each note for a display nobody
  asked for.

Found on the way:
- Knob.dialGlobal added half the dial unscaled. In a zoomed graph it
  pointed beside the dial. The Compressor's e2e only hit by luck.

Tests:
- Unit: 2 new for the Gain plate and its taper.
- e2e 34 on atx: ALL PASSED, 126 checks (1 new).
- Gate on atx: CHECK EXIT 0, 283 files, 4359 tests.

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

tools/e2e/34-sound.mjs

@@ -1026,6 +1026,56 @@ export async function sound(t) {
       hwBesideTab.seen.needle > 3,
     JSON.stringify({ hwTab, seen: hwBesideTab.seen }),
   );
+  // #384: a Gain node is drawn as an orange device with its one knob, worked as the Compressor's.
+  //       The Compressor's node is wide enough to lie over the Gain's: the Gain goes below it here.
+  const gainUnder = await json("__gm.compressor.panel('fx-hw').node");
+  await mutate(`
+    const graph = __gm.state.project.assets.find((a) => a.id === ${JSON.stringify(fxId)}).graph;
+    graph.nodes.find((n) => n.id === 'fx-gain').y = 400;`);
+  await evaluate('__gm.soundfx.fit()');
+  await sleep(100);
+  const gainPanel = () => json("__gm.gain.panel('fx-gain')");
+  const gainShown = await gainPanel();
+  const gainRect = gainShown.rect;
+  const gainBeside = (p) => p.y > gainRect.y && p.y < gainRect.y + gainRect.h;
+  const gainDb = () =>
+    json(
+      `__gm.state.project.assets.find((a) => a.id === ${JSON.stringify(fxId)}).graph.nodes.find((n) => n.id === 'fx-gain').params.gain`,
+    );
+  const gainDial = gainShown.knob.dial;
+  await drag(gainDial.x, gainDial.y, gainDial.x, gainDial.y - 20);
+  const gainDragged = await gainDb();
+  await press('z', { ctrl: true });
+  const gainUndone = await gainDb();
+  await t.wheel(gainDial.x, gainDial.y, -100);
+  const gainWheeled = { db: await gainDb(), panel: await gainPanel() };
+  await evaluate('__gm.soundfx.fit()');
+  await sleep(100);
+  const gainRefit = (await gainPanel()).knob.dial;
+  await t.doubleClick(gainRefit.x, gainRefit.y);
+  const gainReset = { db: await gainDb(), docs: await json('__gm.documents()') };
+  await press('z', { ctrl: true });
+  check(
+    'a Gain node shows its panel with one knob between its ports; a drag turns it as one undo step, the wheel zooms the graph, a double-click resets it without a tab',
+    gainShown.shown &&
+      gainShown.size.w === 160 &&
+      gainShown.size.h === 220 &&
+      gainShown.knob.number === '-6' &&
+      gainShown.knob.enabled &&
+      Object.values(gainShown.inputs).length === 3 &&
+      Object.values(gainShown.inputs).every((p) => p.x < gainRect.x && gainBeside(p)) &&
+      Object.values(gainShown.outputs).every((p) => p.x > gainRect.x + gainRect.w && gainBeside(p)) &&
+      gainDragged > -6 &&
+      gainUndone === -6 &&
+      gainWheeled.db === -6 &&
+      gainWheeled.panel.rect.w > gainRect.w + 5 &&
+      gainReset.db === 0 &&
+      gainReset.docs.active === `asset:${fxId}`,
+    JSON.stringify({ gainUnder, gainShown, gainDragged, gainUndone, gainWheeled, gainReset }),
+  );
+  await mutate(`
+    const graph = __gm.state.project.assets.find((a) => a.id === ${JSON.stringify(fxId)}).graph;
+    graph.nodes.find((n) => n.id === 'fx-gain').y = 0;`);
   await mutate(`
     const graph = __gm.state.project.assets.find((a) => a.id === ${JSON.stringify(fxId)}).graph;
     graph.nodes = graph.nodes.filter((n) => n.id !== 'fx-hw');