fix(studio): stop the audition reverting itself, and cancel it sideways

Two bugs in the hover-audition that shipped in the commit before this,
both invisible to its tests because a static mount never re-renders and
never moves the pointer between two entries.

**It reverted itself about thirty times a second.** The teardown that
puts the chain back was keyed on `onChainPreview`, which the group passes
as an inline arrow — and the group re-renders on every playhead tick to
move the automation readouts. So React tore the effect down and re-ran it
on every tick, and each teardown saw an audition in progress and undid
it. The preset was heard for one frame and then silently reverted with
the pointer still on the button, during playback, which is the only time
there is anything to audition at all. The handler moves into a ref and
the effect gets empty deps, so it runs on teardown and at no other time.

**Moving to the effect beside it left a measurement in flight.** The
levelling audition was only called off by leaving the whole shelf, so
sliding from Even Out Levels to Reverb kept the decode running — and when
it finished it wrote a levelled version of the chain as it had been, on
top of the reverb being auditioned, through the channel the document
never sees. Exactly the failure the run counter was added to prevent, one
gesture to its left. Every entry in the shelf now calls its neighbours'
auditions off: the effects cancel levelling, levelling cancels the chain
audition, and Tone cancels both despite having none of its own.

The keyboard path was already right — `focusout` bubbles, so a move
within the menu fires the shelf's own handler. Only the mouse leaked.

Falsified: restoring the dep array fails the re-render test, and dropping
the effect buttons' cancel fails the sideways-move one.

studio 3685 passing, 18 todo.

Author: vanceingalls

packages/studio/src/components/editor/propertyPanelAudioFxGroup.test.tsx

@@ -366,23 +366,21 @@ describe("AudioFxGroup dynamic carve", () => {
     );
   }
 
-  afterEach(() => vi.unstubAllGlobals());
-
   /**
-   * Hover-auditioning the leveller has to measure before there is anything to
-   * hear, and measuring a long voiceover takes seconds — by which time the
-   * pointer has usually moved on. Applying then would put levelling on a track
-   * nobody asked to level, through a channel that does not persist: audible,
-   * absent from the document, and gone on the next reload.
+   * The same voice, but the decode does not finish until it is let go.
+   *
+   * Hover-auditioning the leveller is the one path where the result can arrive
+   * after the author has moved on, so the tests that cover that need to hold the
+   * decode open across a second gesture.
    */
-  it("drops a levelling measurement that lands after the pointer has gone", async () => {
+  function stubGatedDecode(): { release: () => void; decoded: Promise<void> } {
     const sampleRate = 48000;
     const data = new Float32Array(sampleRate * 4);
     for (let i = 0; i < data.length; i++) {
       const t = i / sampleRate;
       data[i] = t > 1 && t < 3 ? 0.7 * Math.sin(2 * Math.PI * 1000 * t) : 0;
     }
-    let release: (() => void) | null = null;
+    let release = (): void => {};
     const decoded = new Promise<void>((r) => {
       release = r;
     });
@@ -399,7 +397,29 @@ describe("AudioFxGroup dynamic carve", () => {
         }
       },
     );
+    return { release: () => release(), decoded };
+  }
 
+  /** Let the held decode finish, and the measurement it feeds after it. */
+  async function settleDecode(release: () => void, decoded: Promise<void>): Promise<void> {
+    await act(async () => {
+      release();
+      await decoded;
+      await Promise.resolve();
+    });
+  }
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  /**
+   * Hover-auditioning the leveller has to measure before there is anything to
+   * hear, and measuring a long voiceover takes seconds — by which time the
+   * pointer has usually moved on. Applying then would put levelling on a track
+   * nobody asked to level, through a channel that does not persist: audible,
+   * absent from the document, and gone on the next reload.
+   */
+  it("drops a levelling measurement that lands after the pointer has gone", async () => {
+    const { release, decoded } = stubGatedDecode();
     const { host, onSetAttributeLive } = mount({ "fx-chain": CHAIN });
     document.getElementById("bed")?.setAttribute("src", "bed.wav");
     act(() => byTextButton(host, "Add effect")?.click());
@@ -412,12 +432,7 @@ describe("AudioFxGroup dynamic carve", () => {
         .querySelector(".hf-fx-add-menu")
         ?.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
     });
-    await act(async () => {
-      release?.();
-      await decoded;
-      // Two turns: the decode resolves, then the measurement it feeds.
-      await Promise.resolve();
-    });
+    await settleDecode(release, decoded);
 
     // The revert on the way out is allowed to write; a levelling stage is not.
     const levelled = onSetAttributeLive.mock.calls.filter((c) =>
@@ -426,6 +441,30 @@ describe("AudioFxGroup dynamic carve", () => {
     expect(levelled).toEqual([]);
   });
 
+  /**
+   * Sliding from the leveller to the effect beside it is not leaving the menu,
+   * so the shelf's own leave never fires — and the measurement already in flight
+   * used to land on top of whatever was being auditioned next, writing a
+   * levelled version of the chain as it was through a channel the document never
+   * sees. Every entry in the shelf calls its neighbours' auditions off.
+   */
+  it("calls the levelling measurement off when the pointer moves to the effect beside it", async () => {
+    const { release, decoded } = stubGatedDecode();
+    const { host, onSetAttributeLive } = mount({ "fx-chain": CHAIN });
+    document.getElementById("bed")?.setAttribute("src", "bed.wav");
+    act(() => byTextButton(host, "Add effect")?.click());
+    act(() => byTextButton(host, "Even Out Levels")?.focus());
+    // Straight to a neighbour, without ever leaving the shelf.
+    act(() =>
+      byTextButton(host, "Reverb")?.dispatchEvent(new MouseEvent("mouseover", { bubbles: true })),
+    );
+    await settleDecode(release, decoded);
+
+    expect(
+      onSetAttributeLive.mock.calls.filter((c) => String(c[1] ?? "").includes("fromLeveller")),
+    ).toEqual([]);
+  });
+
   it("automates the carve filters' gain from the voice, in the bed's own time", async () => {
     stubDecode();
     // Voice starts 10s into the composition, bed at 0: the envelope is measured

packages/studio/src/components/editor/propertyPanelFxSection.test.tsx

@@ -360,6 +360,34 @@ describe("FxSection chain", () => {
       expect(back.nodes.map((n) => n.type)).toEqual(["peaking"]);
     });
 
+    it("survives the panel re-rendering under it, which playback does constantly", () => {
+      // The group re-renders on every playhead tick to move the automation
+      // readouts, handing down a fresh preview callback each time. A teardown
+      // keyed on that callback ran on every tick, so an audition reverted itself
+      // about thirty times a second — during playback, which is the only time
+      // there is anything to audition.
+      const { host, root, onChainPreview } = mount({ chain: chainOf("peaking") });
+      click(byText(host, "button", "Presets"));
+      enter(presetButton(host, "telephone"));
+      const auditions = onChainPreview.mock.calls.length;
+
+      // Same behaviour, new identity — exactly what a tick hands down.
+      act(() =>
+        root.render(
+          <FxSection
+            chain={chainOf("peaking")}
+            onChainChange={vi.fn()}
+            onChainPreview={(next) => onChainPreview(next)}
+            carve={null}
+            onCarveChange={vi.fn()}
+            sourceOptions={[{ id: "vo", label: "Voiceover" }]}
+          />,
+        ),
+      );
+
+      expect(onChainPreview.mock.calls.length).toBe(auditions);
+    });
+
     it("auditions an effect the add menu is offering", () => {
       const { host, onChainPreview, onChainChange } = mount({ chain: chainOf("peaking") });
       click(byText(host, "button", "Add effect"));

packages/studio/src/components/editor/propertyPanelFxSection.tsx

@@ -184,14 +184,28 @@ export function FxSection({
     [chain, onChainPreview],
   );
 
+  /**
+   * The preview handler as of the last render, held rather than closed over.
+   *
+   * The teardown below must run on teardown and at no other time, so its deps
+   * have to be empty — and `onChainPreview` is an inline arrow in the group,
+   * which re-renders on every playhead tick to move the automation readouts. A
+   * dep on it made React tear down and re-run the effect on every one of those
+   * ticks, so an audition reverted itself about 30 times a second while the
+   * pointer was still on the button: the preset was heard for a frame during
+   * playback, which is the exact case the whole affordance exists for.
+   */
+  const previewRef = useRef(onChainPreview);
+  previewRef.current = onChainPreview;
+
   // Leaving by any route other than the pointer — the element deselected, the
   // panel closed — would otherwise leave the audition playing over a chain the
   // document does not have.
   useEffect(
     () => () => {
-      if (auditionBase.current) onChainPreview?.(auditionBase.current);
+      if (auditionBase.current) previewRef.current?.(auditionBase.current);
     },
-    [onChainPreview],
+    [],
   );
 
   const applyPreset = useCallback(
@@ -426,7 +440,14 @@ export function FxSection({
                 // hear. So it says it is working rather than doing nothing
                 // visible, and whoever handles this must drop a result that
                 // arrives after the pointer has gone.
-                onMouseEnter={levelled ? undefined : () => onAuditionLevel?.(true)}
+                onMouseEnter={
+                  levelled
+                    ? undefined
+                    : () => {
+                        audition(null);
+                        onAuditionLevel?.(true);
+                      }
+                }
                 onFocus={levelled ? undefined : () => onAuditionLevel?.(true)}
               >
                 {levelled ? "Remove levelling" : "Even Out Levels"}
@@ -440,9 +461,14 @@ export function FxSection({
               // must not include it.
               className="hf-fx-add-composite rounded-[3px] bg-panel-surface px-1.5 py-0.5 text-[10px] text-panel-text-1 hover:text-panel-text-0"
               title="Bass, middle and treble on one set of faders."
-              // No audition: a Tone module arrives with every band at 0 dB, so
-              // there is nothing to hear until a fader moves. A hover that
-              // changes nothing teaches that hovering does nothing.
+              // No audition of its own: a Tone module arrives with every band at
+              // 0 dB, so there is nothing to hear until a fader moves, and a
+              // hover that changes nothing teaches that hovering does nothing.
+              // It still has to call the neighbours' auditions off.
+              onMouseEnter={() => {
+                audition(null);
+                onAuditionLevel?.(false);
+              }}
               onClick={addEq}
             >
               Tone (EQ)
@@ -460,7 +486,16 @@ export function FxSection({
                   className="hf-fx-add-item rounded-[3px] bg-panel-surface px-1.5 py-0.5 text-[10px] text-panel-text-1 hover:text-panel-text-0"
                   title={d.description}
                   onClick={() => addEffect(d.id)}
-                  onMouseEnter={() => audition((base) => withEffect(base, d.id))}
+                  // Cancels the levelling audition as well as starting its own.
+                  // The shelf's leave handler only fires on the way OUT of the
+                  // menu, so sliding from Even Out Levels straight to here left a
+                  // measurement in flight — and it landed on top of this one, a
+                  // levelled version of the chain as it was, written through a
+                  // channel the document never sees.
+                  onMouseEnter={() => {
+                    onAuditionLevel?.(false);
+                    audition((base) => withEffect(base, d.id));
+                  }}
                   onFocus={() => audition((base) => withEffect(base, d.id))}
                 >
                   {d.label}