Mix sounds through buses and a master (#325)

Until now every sound went straight to the speakers. There was no
point where all of them came together, so nothing could turn the
music down against the effects, and a compressor or a shared echo
over everything had nowhere to sit. The bus technique of #346 was
there already, only the end of the chain was missing.

- Bus asset (Audio): Volume, Sound FX and Into. Into is empty for
  the master and never offers the bus itself nor a bus that already
  goes into it. The list is worked out when the menu opens, so a
  change made meanwhile counts. A loop that is in a project anyway
  sends the buses on it into the master.
- The master is no asset. Its volume and sound FX are two new rows
  under Master in Project settings, one undo step each. A project
  written before has 1 and none, which is how it sounded.
- Sound, instrument, pattern and song have a row Bus, empty for the
  master. Play sound, Play note, Play pattern and Play song have an
  input bus: From the asset, Master or a bus. Inside a song or a
  pattern only the bus of the song or pattern counts.
- Set bus volume (bus, volume, time, easing) and Bus volume. An
  empty bus is the master. The volume set holds for the whole run,
  across scenes, over that of the asset. GameRun resets it at start
  and end. Set sound FX parameters without a voice now reaches the
  sound FX of the bus picked in its new bus input.
- SoundLibrary: the master is the bus "mix", each bus "mix:<id>".
  Every bus, the playing masters of #346 included, ends there, and
  only the master is heard. setMix sets them up once a context
  exists, so an editor nobody listened to opens no audio device. The
  same mix again changes nothing, which lets the editor hand it over
  on every change of the project.
- The tabs play as the game does: Sound, Sound FX, Instrument,
  Pattern and Song tab through the bus of their asset and the master.
- Pause game does nothing to the buses (the user's answer 4b). A
  game that wants quiet in its pause menu sets a bus volume itself.
- Streaming long music files is #349, split off as asked.

Finding on the way: the Into menu first worked from a list made when
the inspector row was built. After another bus was sent into the
open one, e2e 34 saw it still offered. It is now asked on open.

The SoundLibrary tests expected voices to end at the destination.
They now end in the master, which adds its input, level and pan to
every wiring and two gains to every list. Those expectations are
updated, nothing else in them changed.

Tests:
- Unit buses (new): 15 green. Ten counter-checks, each red on its
  own: loop check, bus picked, reset at run start, bus of Set sound
  FX parameters, master volume in the settings, and in SoundLibrary
  default into the master, voices into the master, run volume over
  the mix, no context before a play, a playing on its bus.
- Unit sound-library: 90 green (5 new). Node catalog: 416 green
  (9 new cases).
- e2e 34 (melektaus-atx): ALL PASSED, 75 checks (3 new). The voice
  of the Sound tab was heard on mix:<bus>, that bus into the other,
  that one at 0.5 into the master. Master volume 0.6 via the dialog,
  undo back to 1.
- Gate (melektaus-atx): CHECK EXIT 0, 262 files, 4072 tests.

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

src/editor/ProjectSettingsDialog.ts

@@ -1,5 +1,6 @@
 import { layerFallback, MAX_COLLISION_LAYERS } from '../core/model/collisionLayers';
 import { clampSymbolScale, SYMBOL_SCALE_MAX, SYMBOL_SCALE_MIN } from '../core/model/symbolScale';
+import { clampMasterVolume } from '../core/model/master';
 import { Button, HStack, Label, Menu, NumberField, TextField, Theme, VStack, type Widget } from '../ui';
 import {
   GAME_LINK_ZOOMS,
@@ -19,6 +20,14 @@ export interface ProjectSettings {
   collisionLayers: string[];
   renderLayers: string[];
   symbolScale: number;
+  masterVolume: number;
+  masterFx: string;
+}
+
+/** A sound FX the master can be given: its id and its name. */
+export interface FxChoice {
+  id: string;
+  name: string;
 }
 
 /**
@@ -39,9 +48,12 @@ export function settingsChanges(
   playFrom?: PlayFrom;
   whilePlaying?: WhilePlaying;
   gameLinkZoom?: GameLinkZoom;
+  masterVolume?: number;
+  masterFx?: string;
 } {
   const name = after.name.trim() || before.name;
   const symbolScale = clampSymbolScale(after.symbolScale);
+  const masterVolume = clampMasterVolume(after.masterVolume);
   return {
     ...(name === before.name ? {} : { name }),
     ...(JSON.stringify(after.collisionLayers) === JSON.stringify(before.collisionLayers)
@@ -54,6 +66,8 @@ export function settingsChanges(
     ...(after.playFrom === before.playFrom ? {} : { playFrom: after.playFrom }),
     ...(after.whilePlaying === before.whilePlaying ? {} : { whilePlaying: after.whilePlaying }),
     ...(after.gameLinkZoom === before.gameLinkZoom ? {} : { gameLinkZoom: after.gameLinkZoom }),
+    ...(masterVolume === before.masterVolume ? {} : { masterVolume }),
+    ...(after.masterFx === before.masterFx ? {} : { masterFx: after.masterFx }),
   };
 }
 
@@ -138,7 +152,8 @@ class LayerNameRows {
 /**
  * Everything about the project that is not an asset (#183): its name, which scene Play starts and
  * how closely the panels follow it (#265), the zoom of the game link (#279), the size of the scene
- * view's symbol icons, the collision layers (#152) and the render layers (#302). The top bar carries
+ * view's symbol icons, the collision layers (#152), the render layers (#302) and the master bus
+ * (#325). The top bar carries
  * icons only, so this is the one place they are edited.
  */
 export class ProjectSettingsDialog extends FormDialog {
@@ -147,21 +162,31 @@ export class ProjectSettingsDialog extends FormDialog {
   private whilePlaying: WhilePlaying;
   private gameLinkZoom: GameLinkZoom;
   private symbolScale: number;
+  private masterVolume: number;
+  private masterFx: string;
   private readonly nameField: TextField;
   private readonly playFromButton: Button;
   private readonly whilePlayingButton: Button;
   private readonly gameLinkZoomButton: Button;
   private readonly symbolScaleField: NumberField;
+  private readonly masterVolumeField: NumberField;
+  private readonly masterFxButton: Button;
   private readonly collisionLayers: LayerNameRows;
   private readonly renderLayers: LayerNameRows;
 
-  constructor(settings: ProjectSettings, onApply: (settings: ProjectSettings) => void) {
+  constructor(
+    settings: ProjectSettings,
+    onApply: (settings: ProjectSettings) => void,
+    private readonly fxChoices: readonly FxChoice[] = [],
+  ) {
     super(340, 'Project settings');
     this.projectName = settings.name;
     this.playFrom = settings.playFrom;
     this.whilePlaying = settings.whilePlaying;
     this.gameLinkZoom = settings.gameLinkZoom;
     this.symbolScale = clampSymbolScale(settings.symbolScale);
+    this.masterVolume = clampMasterVolume(settings.masterVolume);
+    this.masterFx = settings.masterFx;
     // A row more or less makes the dialog taller or shorter; `resize` only lays out on a change,
     // which is exactly what happened here.
     const fit = () => {
@@ -237,6 +262,29 @@ export class ProjectSettingsDialog extends FormDialog {
       }),
     );
 
+    this.content.add(new Label('Master', { style: 'bodyBold' }));
+    this.content.add(new Label('Where every bus ends, and every sound that names none.', { style: 'muted' }));
+    this.masterVolumeField = new NumberField(this.masterVolume, {
+      width: 150,
+      min: 0,
+      max: 1,
+      step: 0.05,
+      decimals: 2,
+      onInput: (value) => {
+        this.masterVolume = value;
+      },
+      onChange: (value) => {
+        this.masterVolume = value;
+      },
+    });
+    this.content.add(this.formRow(this.fieldLabel('Volume'), this.masterVolumeField));
+    this.masterFxButton = new Button(this.fxLabel(this.masterFx), {
+      width: 150,
+      align: 'left',
+      onClick: () => this.openMasterFxMenu(),
+    });
+    this.content.add(this.formRow(this.fieldLabel('Sound FX'), this.masterFxButton));
+
     this.content.add(new Label('Collision layers', { style: 'bodyBold' }));
     this.content.add(
       new Label('Two colliders meet only when each one names the layer of the other.', {
@@ -260,6 +308,8 @@ export class ProjectSettingsDialog extends FormDialog {
         collisionLayers: this.collisionLayers.names,
         renderLayers: this.renderLayers.names,
         symbolScale: this.symbolScale,
+        masterVolume: this.masterVolume,
+        masterFx: this.masterFx,
       }),
     );
     this.collisionLayers.build();
@@ -283,6 +333,8 @@ export class ProjectSettingsDialog extends FormDialog {
     whilePlaying: WhilePlaying;
     gameLinkZoom: GameLinkZoom;
     symbolScale: number;
+    masterVolume: number;
+    masterFx: string;
   } {
     return {
       name: this.projectName,
@@ -290,6 +342,8 @@ export class ProjectSettingsDialog extends FormDialog {
       whilePlaying: this.whilePlaying,
       gameLinkZoom: this.gameLinkZoom,
       symbolScale: this.symbolScale,
+      masterVolume: this.masterVolume,
+      masterFx: this.masterFx,
     };
   }
 
@@ -313,6 +367,15 @@ export class ProjectSettingsDialog extends FormDialog {
     return this.symbolScaleField;
   }
 
+  /** The master volume field and the master FX switch, so a check can use them. */
+  get masterVolumeControl(): NumberField {
+    return this.masterVolumeField;
+  }
+
+  get masterFxControl(): Button {
+    return this.masterFxButton;
+  }
+
   /** A label and a field that takes the rest of the row – the layer rows are built the same way. */
   private labelledRow(text: string, field: TextField): HStack {
     const row = new HStack({ gap: Theme.gap, align: 'center' });
@@ -359,4 +422,24 @@ export class ProjectSettingsDialog extends FormDialog {
       })),
     ).openBelow(this.gameLinkZoomButton);
   }
+
+  /** A sound FX by its name; one that is gone shows its id, like a dangling pick in the inspector. */
+  private fxLabel(id: string): string {
+    if (id === '') return 'None';
+    return this.fxChoices.find((choice) => choice.id === id)?.name ?? `${id}?`;
+  }
+
+  private openMasterFxMenu(): void {
+    const entry = (id: string, label: string) => ({
+      label,
+      current: this.masterFx === id,
+      onSelect: () => {
+        this.masterFx = id;
+        this.masterFxButton.setText(this.fxLabel(id));
+      },
+    });
+    new Menu([entry('', 'None'), ...this.fxChoices.map((choice) => entry(choice.id, choice.name))]).openBelow(
+      this.masterFxButton,
+    );
+  }
 }