Open a Compressor as a device in a window of one size (#379)

The tab from #378 shows a Compressor as an editor. The user wanted it
to look like a device as well, after a brushed aluminium plug-in, with
a meter of the gain reduction instead of the pictures. The tab stays
and is switched to per node.

- Hardware look is a switch under Settings, on by default for new and
  existing Compressors. Only the editor reads it.
- The panel is 820x280 px and opens straight in a window of that size.
  The window has no sizing corner and no Dock. A pane says so through
  `fixedSize`, and `keptSize` keeps the window's middle when it
  changes to that size.
- A Compressor in this look never sits in the tab row. Opening one
  floats it, and switching the look on moves its tab into the window.
- The panel has chrome knobs (threshold and makeup large), a meter
  with a needle that moves like a VU's, an LCD with the name and the
  reading, a lever with a lamp for auto-gain, and LEDs for the level
  going out. Everything is drawn in code.
- The Knob takes a size and a chrome look, and leaves out its caption
  when it has no name, so the panel engraves its own.
- `autoGainOn` is now `switchOn`, because the new switch reads the
  same way.
- Where parts sit, the meter's scale, the needle's speed, the LEDs and
  the plate's grain are in `hardwareView.ts`, apart from the drawing.

Decided myself:
- The meter's scale runs by the square root, so the first dB is about
  as wide as the last nine. It is red from 10 dB on.
- The LEDs light one every 3 dB from -39 to 0 dB and fall by 20 dB a
  second.
- Switching the look changes the graph's fingerprint, like any other
  setting of a node. The sound FX is built again once.

Findings, fixed on the way:
- Pixi's `arc` goes on from the last point of the path. The meter's
  scale had a line from the corner of the face until each arc got a
  `moveTo` to its own start.
- A text put into a Graphics makes Pixi warn that only Containers take
  children. The LCD is a Container now.
- The first browser check read the needle at one moment and missed the
  short sound. The panel keeps the most its needle and LEDs showed.

Tests:
- Unit: hardware-view (10 new), documents (1 new)
- e2e 34 (melektaus-atx): ALL PASSED, 122 checks (4 new). Played,
  the needle reached 20.9 dB and 5 LEDs lit.
- Gate (melektaus-atx): CHECK EXIT 0, 283 files, 4355 tests (11 new)
- Counter-checks: a window that keeps its corner instead of its
  middle, and a linear meter scale, each turn exactly their test red.

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

src/editor/debug/graphHooks.ts

@@ -1,3 +1,4 @@
+import type { Container } from 'pixi.js';
 import { NameTransitionCommand } from '../../core/commands/graphCommands';
 import { soundLibrary } from '../../viewport/SoundLibrary';
 import { currentNodePalette } from '../graph/NodePalette';
@@ -182,6 +183,30 @@ export function graphHooks({ state, editor }: HookContext) {
        * either side, the most taken away in one, and the taps as for the EQ.
        */
       levels: () => ({ ...editor.compressorEditor.seen, taps: soundLibrary.spectrumTaps() }),
+      /**
+       * The hardware panel (#379): whether it is shown and where, its knobs' dials, the reduction the
+       * needle shows and is heading for, the LEDs lit, the most of both so far, the auto-gain lever
+       * and the LCD.
+       */
+      panel: () => {
+        const panel = editor.compressorEditor.panel;
+        const seen = (node: Container | null): boolean => !node || (node.visible && seen(node.parent));
+        return {
+          shown: seen(panel),
+          rect: rectOf(panel),
+          dials: Object.fromEntries(
+            Object.entries(panel.knobs).map(([key, knob]) => [key, knob.dialGlobal()]),
+          ),
+          fields: Object.fromEntries(
+            Object.entries(panel.knobs).map(([key, knob]) => [key, centreOf(knob.field)]),
+          ),
+          needle: { shown: panel.meter.shown, target: panel.meter.target },
+          leds: panel.leds.litCount,
+          seen: panel.seen,
+          autoGain: { on: panel.autoGain.lit, says: panel.autoGain.says.text, at: centreOf(panel.autoGain) },
+          lcd: panel.lcdText,
+        };
+      },
     },
     instrument: {
       current: () => editor.instrumentEditor.currentAssetId,