fix(studio): audition from the playhead while paused, and let an author out of a menu (#3190)

* fix(studio): close the typecheck and fallow gaps wa-18b-reschedule opened useAutomationLanes.ts's write() assumed gesture-scoped coalescing and a preview-only commit that useDomEditAttributeCommits.ts never grew — backported that option support from its own later commit so the two sides of the API agree. The paste path and its tests were missing the box selection's v0/v1 bounds a sibling commit added to AutomationSelection. The FX panel's carve controls still edited the six mechanism numbers (maxCutDb, bands, intelligibilityBias) after carveProfile() collapsed authoring to one Strength knob, so those fields no longer existed on HfCarveSettings; UI now edits strength, and analyseCarveBands is called with carveProfile(strength). Also closes fallow's complexity, dead-code and duplication findings on this PR's diff: extracted automationLaneDragMath.ts (pure group/point-move math) and useAutomationRangeDrag.ts (the marquee-select gesture) out of useAutomationLaneGestures.ts, pulled a couple of render-loop ternaries and a resolver into named functions, dropped an export nothing outside its file used, and shared a step-simplifier between audioCarve's two envelope builders. The edge-stretch vs. box-select priority test in TimelineAutomationLane.test was still pinning the pre-box-select rule (edge wins over a point sitting on it) that a sibling commit deliberately reversed — a point inside the box is now selected content, so grabbing it drags the group instead. Updated the test to the shipped rule instead of the old one. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(core): cap the via conic's weight so an edge-clamped via point can't NaN A via point pulled out past the segment (viaX: 5, viaY: -3) clamps to (0.999, 0.001) — exactly on the steady region's edge, where edge - viaX is 0. viaConic divided by that zero to get an infinite weight, and shapeVia turned Infinity into NaN a few steps later (Infinity - Infinity in the quadratic coefficient). NaN reaching setValueCurveAtTime silences the automated parameter for the rest of the render. Capped the weight at 1e6 instead of leaving it unbounded — past that point the arc already reads as touching the via point, so nothing visible is lost. Also hardened shapeVia's existing denominator guard (`<= 0`) to `!(> 0)`, since NaN fails the original comparison and fell through it. Review by Miga (PR #3208). * fix(studio-server): fingerprint the proactive waveform cache key too The route already keys the waveform cache on the asset's size and mtime as well as its path, so a rebuilt-in-place file gets fresh peaks instead of stale ones. generateWaveformCache — the proactive path that runs on upload — still called buildWaveformCacheKey with the path alone, so it wrote to a different key than the route reads from (making the pre-generated cache never found) and kept the exact collision bug this fingerprint exists to fix on its own path. Review by Miga (PR #3211). * style(docs): run oxfmt on the /hyperframes-audio skill docs Table column widths had drifted out of alignment with oxfmt's own rules, failing format:check and blocking the Preflight gate every downstream branch inherits. Whitespace only, no content change. * fix(core): stop \b from missing underscore-separated names, guard clipsOverlap's negative duration \b treats `_` as a word character, so \bbed\b never matched bed_01, music_bed_loop, or theme_song, and \bvo\b/\bvox\b/\btts\b had the same gap — an underscore-separated bed classified as "unknown" and could end up offered as its own carve source. Replaced the short hints with a boundary that actually excludes letters and digits on both sides. clipsOverlap computed end = start + duration without guarding sign, so a negative duration put end before start — an interval that does not describe anything, and one specific case showed it silently dropping a real overlap (a shorter, earlier broken end rejected a clip that genuinely contained the point). Duration clamps to zero instead: a clip cannot un-play time, and a zero-length clip at its start is the sane reading of "duration nobody wrote down as positive." Review by Miga (PR #3212). * fix(studio): widen PropertyPanel's resetModules render timeout again The 20s margin (already once widened for the same reason) is timing out in CI's full-monorepo Test run — the resetModules()+fresh-import render this test needs is uncached and competes with every other package's test suite for the same worker pool, and the same test passes in well under 2s standalone. Went to 45s rather than re-tuning to whatever number happens to clear the current CI load, since that number moves every time CI gains a package. * fix(studio): stop the single-candidate auto-apply carve firing twice Two auto-apply effects both fire when sourceOptions.length === 1: the multi-candidate effect only guards length === 0, so a single candidate passes it too, and the single-candidate effect passes its own guard right after — both compute the same sources list and both call setCarve, so the common case (one narrator, one bed) triggered two decodes, two FFT runs, and two concurrent attribute writes for one decision. The multi-candidate effect now defers to its sibling for exactly one candidate, which already has its own detailed handling for that case. Review by Miga (PR #3213). * feat(core): carve against every voice over a bed, always (#3212) * feat(core): carve against every voice over a bed, always dynamically A bed usually runs under a whole sequence — a narrator, an interview answer, a second presenter — and carving against one of them left the others fighting it. `source` becomes `sources`, and `mixCarveSources` sums every voice onto the BED's clock before anything is measured. That is what keeps one analysis sufficient: the chain is fixed, so there is no per-voice filter to switch between, and bands drawn from all the speech there is with envelopes that rise wherever any of it happens answer the actual question — where and when is speech masking this bed. Summed rather than averaged: two people talking at once mask more than either alone. Audio before the bed starts is dropped rather than folded in at zero, since it plays over nothing and shifting it would put a cut where there is no voice. `dynamic` is gone. A fixed depth thins the bed through every pause, and once both have been heard there is no reason to want it, so every carve follows the speech. Two helpers the panel and the headless script now share instead of each carrying a copy — two definitions of "what does this name suggest" drift, and then the two disagree about which track is the voice: - `classifyAudioName` reads a track's kind from its id and filename together. `unknown` is deliberately common: treating an unrecognised name as "not a voice" would hide the one track somebody needs to pick. - `clipsOverlap` keeps out a voice that never plays while the bed does. An unwritten duration counts as unbounded, not zero — refusing a clip whose length the composition leaves to the media would drop the commonest case there is. Files written before this still load: a single `source` reads as a one-voice list, a stored `dynamic` is ignored, and an absent attribute means the defaults whole. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(core): stop \b from missing underscore-separated names, guard clipsOverlap's negative duration \b treats `_` as a word character, so \bbed\b never matched bed_01, music_bed_loop, or theme_song, and \bvo\b/\bvox\b/\btts\b had the same gap — an underscore-separated bed classified as "unknown" and could end up offered as its own carve source. Replaced the short hints with a boundary that actually excludes letters and digits on both sides. clipsOverlap computed end = start + duration without guarding sign, so a negative duration put end before start — an interval that does not describe anything, and one specific case showed it silently dropping a real overlap (a shorter, earlier broken end rejected a clip that genuinely contained the point). Duration clamps to zero instead: a clip cannot un-play time, and a zero-length clip at its start is the sane reading of "duration nobody wrote down as positive." Review by Miga (PR #3212). --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(studio): port the carve UI off the removed source/dynamic fields #3212 (accidentally squash-merged into this branch instead of main) changed HfCarveSettings from a single `source` + `dynamic` toggle to a `sources` list with dynamic mode removed outright — the multi-voice UI consumer that goes with that shape lands in the very next PR, so this branch was left with a type that no longer matched its own code. Minimal port, not the multi-voice redesign that PR does properly: the "Listen to" picker and analyse() treat sources[0] as the one voice this UI still understands, and every dynamic-mode branch (the automated envelope lanes, the toggle, the checkbox) is gone along with the field — a carve is now always the static value the analysis computes, matching what the type change made permanent. Test suite trimmed the same way: the automation-lane and toggle tests covered behavior that no longer exists. --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-10 22:20:14 +00:00 · 2026-08-13 13:06:56 -07:00
parent acdb11250c
commit 6bcf739390
10 changed files with 488 additions and 33 deletions
@@ -435,6 +435,45 @@ describe("AudioFxGroup dynamic carve", () => {
   * nobody asked to level, through a channel that does not persist: audible,
   * absent from the document, and gone on the next reload.
   */
+  describe("auditioning starts the transport when it has to", () => {
+    const store = () => usePlayerStore.getState();
+
+    const hoverPreset = (host: HTMLElement) => {
+      act(() => byTextButton(host, "Presets")?.click());
+      act(() => host.querySelector<HTMLElement>(".hf-fx-preset-item")?.focus());
+    };
+    const leaveShelf = (host: HTMLElement) =>
+      act(() => {
+        host
+          .querySelector(".hf-fx-preset-menu")
+          ?.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
+      });
+
+    it("plays from the playhead, then puts it back exactly where it was", () => {
+      // Browsing the shelf must not cost the author their place: hovering is not
+      // an edit, so the playhead it borrows has to be returned.
+      act(() => usePlayerStore.setState({ isPlaying: false, currentTime: 42 }));
+      const { host } = mount({ "fx-chain": CHAIN });
+      hoverPreset(host);
+      expect(store().playbackRequest?.playing).toBe(true);
+
+      leaveShelf(host);
+      expect(store().playbackRequest?.playing).toBe(false);
+      expect(store().playbackRequest?.returnTo).toBe(42);
+    });
+
+    it("leaves a transport the author started alone", () => {
+      // Stopping their playback because they passed over a preset would be the
+      // panel taking a decision nobody offered it.
+      act(() => usePlayerStore.setState({ isPlaying: true, currentTime: 12 }));
+      const { host } = mount({ "fx-chain": CHAIN });
+      const before = store().playbackRequest?.nonce ?? 0;
+      hoverPreset(host);
+      leaveShelf(host);
+      expect(store().playbackRequest?.nonce ?? 0).toBe(before);
+    });
+  });
+
  it("drops a levelling measurement that lands after the pointer has gone", async () => {
    const { release, decoded } = stubGatedDecode();
    const { host, onSetAttributeLive } = mount({ "fx-chain": CHAIN });
@@ -578,6 +578,40 @@ export function AudioFxGroup({
    }
  };

+  /**
+   * Where the playhead was when an audition started the transport, so leaving
+   * can put it back. Null means this audition did not start playback — the
+   * transport was already running and must be left alone.
+   */
+  const auditionReturn = useRef<number | null>(null);
+
+  /**
+   * Start playback for an audition, and stop it again on the way out.
+   *
+   * An audition writes the preset to the running graph, which is silent while
+   * the transport is paused — so a paused author hovering a preset heard
+   * nothing at all, and the whole affordance only worked mid-playback. Hovering
+   * now plays from the playhead, and leaving stops and rewinds to exactly where
+   * it started: browsing the shelf must not cost the author their place.
+   *
+   * Already playing, this does nothing in either direction. The author started
+   * that, and stopping their transport because they passed over a preset would
+   * be the panel taking a decision that was not offered to it.
+   */
+  const auditionTransport = (on: boolean): void => {
+    const store = usePlayerStore.getState();
+    if (on) {
+      if (store.isPlaying || auditionReturn.current !== null) return;
+      auditionReturn.current = store.currentTime;
+      store.requestPlayback(true);
+      return;
+    }
+    const returnTo = auditionReturn.current;
+    if (returnTo === null) return;
+    auditionReturn.current = null;
+    store.requestPlayback(false, returnTo);
+  };
+
  const [auditioningLevel, setAuditioningLevel] = useState(false);
  /**
   * Bumped on every enter and leave, so a measurement can tell whether the
@@ -812,6 +846,7 @@ export function AudioFxGroup({
          next.nodes.length ? serializeAudioFxChain(next) : null,
        )
      }
+      onAuditionTransport={auditionTransport}
      onChainPreview={(next) =>
        // Live writes skip the preview refresh entirely, so dragging a knob no
        // longer reloads the composition and restarts playback on every pixel.
@@ -68,7 +68,8 @@ export function FxPresetMenu({ onPick, onAudition }: FxPresetMenuProps) {
            <button
              key={preset.id}
              type="button"
-              className="hf-fx-preset-item block w-full rounded-[3px] bg-panel-surface px-1.5 py-1 text-left text-panel-text-1 hover:text-panel-text-0"
+              // `pr-8` so a long complaint does not run under the wave.
+              className="hf-fx-preset-item block w-full rounded-[3px] bg-panel-surface py-1 pl-1.5 pr-8 text-left text-panel-text-1 hover:text-panel-text-0"
              // The description says what it does; the count is doing real work
              // — it tells the author a preset IS a chain they can open and
              // edit, rather than an opaque setting they cannot follow.
@@ -87,6 +88,20 @@ export function FxPresetMenu({ onPick, onAudition }: FxPresetMenuProps) {
              <span className="hf-fx-preset-name block truncate font-mono text-[9px] text-panel-text-4">
                {preset.label}
              </span>
+              {/* Hovering a preset plays it, and playing is otherwise invisible:
+                  the panel looks identical whether the audition is sounding or
+                  the pointer is just resting there. Only rendered when there IS
+                  an audition channel, so it never claims audio that is not
+                  happening. Four bars because that reads as a level meter at
+                  this size; three reads as an ellipsis. */}
+              {onAudition ? (
+                <span className="hf-fx-preset-wave" aria-hidden="true">
+                  <span />
+                  <span />
+                  <span />
+                  <span />
+                </span>
+              ) : null}
            </button>
          ))}
        </div>
@@ -90,6 +90,7 @@ function mount(overrides: Partial<Parameters<typeof FxSection>[0]> = {}) {
      onRemoveNodeAutomation={overrides.onRemoveNodeAutomation}
      onAutomatePreset={overrides.onAutomatePreset}
      onRemovePresetAutomation={overrides.onRemovePresetAutomation}
+      onAuditionTransport={overrides.onAuditionTransport}
      automatedPresets={overrides.automatedPresets}
      onLevel={overrides.onLevel}
      onRemoveLevel={overrides.onRemoveLevel}
@@ -563,6 +564,7 @@ describe("FxSection chain", () => {
      expect(onRemoveNodeAutomation).toHaveBeenCalled();
    });
  });
+
  it("brackets only nodes a preset still sits next to", () => {
    // Pulled apart by a reorder, they are no longer a unit — and a bracket
    // around the gap would claim an adjacency the signal path does not have.
@@ -696,6 +698,158 @@ describe("FxSection chain", () => {
    expect(item?.querySelector(".hf-fx-preset-name")?.textContent).toBe("Telephone");
  });

+  describe("auditioning while the transport is paused", () => {
+    it("starts playback so a paused author can hear the preset at all", () => {
+      // The audition is written to the running graph, which is silent while the
+      // transport is paused — so without this, hovering a preset did nothing
+      // whatsoever unless the author happened to be mid-playback.
+      const onAuditionTransport = vi.fn();
+      const { host } = mount({ chain: chainOf("peaking"), onAuditionTransport });
+      click(byText(host, "button", "Presets"));
+      act(() => (presetButton(host, "telephone") as HTMLElement | null)?.focus());
+      expect(onAuditionTransport).toHaveBeenLastCalledWith(true);
+    });
+
+    it("stops it again on the way out", () => {
+      const onAuditionTransport = vi.fn();
+      const { host } = mount({ chain: chainOf("peaking"), onAuditionTransport });
+      click(byText(host, "button", "Presets"));
+      act(() => (presetButton(host, "telephone") as HTMLElement | null)?.focus());
+      act(() => {
+        host
+          .querySelector(".hf-fx-preset-menu")
+          ?.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
+      });
+      expect(onAuditionTransport).toHaveBeenLastCalledWith(false);
+    });
+
+    it("stops it when the preset is applied, rather than playing on", () => {
+      // The click means "keep this", not "and carry on playing from wherever
+      // the audition reached".
+      const onAuditionTransport = vi.fn();
+      const { host } = mount({ chain: { version: 1, nodes: [] }, onAuditionTransport });
+      click(byText(host, "button", "Presets"));
+      act(() => (presetButton(host, "telephone") as HTMLElement | null)?.focus());
+      click(presetButton(host, "telephone"));
+      expect(onAuditionTransport).toHaveBeenLastCalledWith(false);
+    });
+
+    it("stops it if the panel goes away mid-audition", () => {
+      const onAuditionTransport = vi.fn();
+      const { host, root } = mount({ chain: chainOf("peaking"), onAuditionTransport });
+      click(byText(host, "button", "Presets"));
+      act(() => (presetButton(host, "telephone") as HTMLElement | null)?.focus());
+      act(() => root.unmount());
+      expect(onAuditionTransport).toHaveBeenLastCalledWith(false);
+    });
+  });
+
+  describe("getting back out of a menu", () => {
+    /** Escape, from inside the section, the way a keystroke really arrives. */
+    const escape = (host: HTMLElement) =>
+      act(() => {
+        host
+          .querySelector(".hf-fx-section")
+          ?.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      });
+
+    it("closes the preset shelf with the button that opened it", () => {
+      // Opening a menu used to hide both buttons, and picking something was the
+      // only thing that set them back — so an author who changed their mind had
+      // to add an effect they did not want, or deselect the clip.
+      const { host } = mount();
+      click(byText(host, "button", "Presets"));
+      expect(host.querySelector(".hf-fx-preset-menu")).toBeTruthy();
+
+      click(byText(host, "button", "Close"));
+      expect(host.querySelector(".hf-fx-preset-menu")).toBeNull();
+      expect(byText(host, "button", "Presets")).toBeTruthy();
+    });
+
+    it("closes the add menu the same way", () => {
+      const { host } = mount();
+      click(host.querySelector(".hf-fx-add"));
+      expect(host.querySelector(".hf-fx-add-menu")).toBeTruthy();
+
+      click(host.querySelector(".hf-fx-add"));
+      expect(host.querySelector(".hf-fx-add-menu")).toBeNull();
+      expect(byText(host, "button", "Add effect")).toBeTruthy();
+    });
+
+    it("opens one menu in place of the other", () => {
+      // Two open at once is two surfaces covering the rack, and neither says
+      // which one the next click belongs to.
+      const { host } = mount();
+      click(byText(host, "button", "Presets"));
+      click(host.querySelector(".hf-fx-add"));
+      expect(host.querySelector(".hf-fx-add-menu")).toBeTruthy();
+      expect(host.querySelector(".hf-fx-preset-menu")).toBeNull();
+
+      // And back the other way, which is a separate handler.
+      click(byText(host, "button", "Presets"));
+      expect(host.querySelector(".hf-fx-preset-menu")).toBeTruthy();
+      expect(host.querySelector(".hf-fx-add-menu")).toBeNull();
+    });
+
+    it("closes on Escape, which is what anyone reaches for first", () => {
+      const { host } = mount();
+      click(byText(host, "button", "Presets"));
+      escape(host);
+      expect(host.querySelector(".hf-fx-preset-menu")).toBeNull();
+
+      click(host.querySelector(".hf-fx-add"));
+      escape(host);
+      expect(host.querySelector(".hf-fx-add-menu")).toBeNull();
+    });
+
+    it("puts the chain back when a closing menu was auditioning", () => {
+      // Leaving the shelf by closing it is still leaving it, and an audition
+      // left playing is audible over a chain the document does not have.
+      const { host, onChainPreview } = mount({ chain: chainOf("peaking") });
+      click(byText(host, "button", "Presets"));
+      act(() => (presetButton(host, "telephone") as HTMLElement | null)?.focus());
+      click(byText(host, "button", "Close"));
+
+      const back = onChainPreview.mock.calls.at(-1)?.[0] as HfAudioFxChain;
+      expect(back.nodes.map((n) => n.type)).toEqual(["peaking"]);
+    });
+
+    it("leaves Escape alone when no menu is open", () => {
+      // The panel has its own Escape handling; swallowing the key when this has
+      // nothing to close would break it.
+      const { host } = mount();
+      let reached = false;
+      host.addEventListener("keydown", () => {
+        reached = true;
+      });
+      escape(host);
+      expect(reached).toBe(true);
+    });
+  });
+
+  it("shows a wave on a preset only when hovering it can be heard", () => {
+    // Hovering plays the preset, and playing is otherwise invisible — the panel
+    // looks identical whether the audition is sounding or the pointer is just
+    // resting there. Without an audition channel there is no audio to claim.
+    const { host } = mount({ chain: { version: 1, nodes: [] } });
+    click(byText(host, "button", "Presets"));
+    expect(presetButton(host, "telephone")?.querySelector(".hf-fx-preset-wave")).toBeTruthy();
+
+    // Rendered directly rather than through `mount`, which supplies a preview
+    // handler by default — the case being covered is a section that has none.
+    const { host: dry } = renderInto(
+      <FxSection
+        chain={{ version: 1, nodes: [] }}
+        onChainChange={vi.fn()}
+        carve={null}
+        onCarveChange={vi.fn()}
+        sourceOptions={[]}
+      />,
+    );
+    click(byText(dry, "button", "Presets"));
+    expect(presetButton(dry, "telephone")?.querySelector(".hf-fx-preset-wave")).toBeNull();
+  });
+
  describe("hover-audition", () => {
    /** Focus is the keyboard's hover, and both go through the same handler. */
    const enter = (el: Element | null | undefined) => {
@@ -5,7 +5,7 @@
 * is not an entry in the chain.
 */

-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
 import {
  defaultAudioFxParams,
  getAudioFxDef,
@@ -68,6 +68,7 @@ const PRESET_AMOUNT_PARAM: HfAudioFxParam = {
  default: 1,
  hint: "How much of this preset is applied. Automate it to bring the whole preset in or out over time.",
 };
+
 export interface FxSectionProps {
  chain: HfAudioFxChain;
  /** Targets this track already automates, as `fx.<nodeId>.<param>` strings. */
@@ -110,6 +111,14 @@ export interface FxSectionProps {
  onAuditionLevel?(on: boolean): void;
  /** Whether that measurement is running, so the button can say so. */
  auditioningLevel?: boolean;
+  /**
+   * Start the transport for an audition, and stop it on the way out.
+   *
+   * An audition is written to the running graph, which is silent while the
+   * transport is paused — so without this, hovering a preset does nothing at all
+   * for a paused author.
+   */
+  onAuditionTransport?(on: boolean): void;
  /** Structural edits and gesture-end writes; this is the one that persists. */
  onChainChange(chain: HfAudioFxChain): void;
  /** Continuous updates while a control is being dragged. */
@@ -155,6 +164,7 @@ export function FxSection({
  onAutomatePreset,
  onRemovePresetAutomation,
  automatedPresets,
+  onAuditionTransport,
 }: FxSectionProps) {
  const presetAutomated = automatedPresets ?? new Set<string>();
  // Falls back to the persisting write when no preview handler is supplied, which
@@ -227,12 +237,18 @@ export function FxSection({
      if (make) {
        auditionBase.current ??= chain;
        onChainPreview(make(auditionBase.current));
+        // After the chain is in the graph, not before: starting the transport
+        // first plays a moment of the un-auditioned mix.
+        onAuditionTransport?.(true);
      } else if (auditionBase.current) {
+        // Stop before reverting, for the mirror of that reason — the last thing
+        // heard should be the preset, not a frame of the chain coming back.
+        onAuditionTransport?.(false);
        onChainPreview(auditionBase.current);
        auditionBase.current = null;
      }
    },
-    [chain, onChainPreview],
+    [chain, onChainPreview, onAuditionTransport],
  );

  /**
@@ -252,9 +268,14 @@ export function FxSection({
  // 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.
+  const transportRef = useRef(onAuditionTransport);
+  transportRef.current = onAuditionTransport;
  useEffect(
    () => () => {
-      if (auditionBase.current) previewRef.current?.(auditionBase.current);
+      if (auditionBase.current) {
+        transportRef.current?.(false);
+        previewRef.current?.(auditionBase.current);
+      }
    },
    [],
  );
@@ -271,13 +292,14 @@ export function FxSection({
      // old chain back over the write that just landed is a race the author
      // hears as the preset arriving and then leaving again.
      auditionBase.current = null;
+      onAuditionTransport?.(false);
      mutate(next.nodes);
      // Land on the first node the preset wrote, so the author can hear what
      // arrived and immediately see what it is made of.
      setOpenNode(next.nodes.findIndex((n) => n.fromPreset === preset.id));
      setPicking(false);
    },
-    [chain, mutate],
+    [chain, mutate, onAuditionTransport],
  );

  /**
@@ -321,21 +343,23 @@ export function FxSection({
  const addJob = useCallback(
    (job: HfAudioFxJob) => {
      auditionBase.current = null;
+      onAuditionTransport?.(false);
      mutate(withJob(chain, job).nodes);
      setOpenNode(chain.nodes.length);
      setAdding(false);
    },
-    [chain, mutate, withJob],
+    [chain, mutate, withJob, onAuditionTransport],
  );

  const addEffect = useCallback(
    (type: string) => {
      auditionBase.current = null;
+      onAuditionTransport?.(false);
      mutate(withEffect(chain, type).nodes);
      setOpenNode(chain.nodes.length);
      setAdding(false);
    },
-    [chain, mutate, withEffect],
+    [chain, mutate, withEffect, onAuditionTransport],
  );

  const updateNode = useCallback(
@@ -457,11 +481,12 @@ export function FxSection({

  const addEq = useCallback(() => {
    auditionBase.current = null;
+    onAuditionTransport?.(false);
    const { chain: next, eqId } = addAudioEq(chain);
    mutate(next.nodes);
    setOpenEq(eqId);
    setAdding(false);
-  }, [chain, mutate]);
+  }, [chain, mutate, onAuditionTransport]);

  // Dragging a fader is heard immediately and written once on release, the same
  // split every other control in the rack uses.
@@ -498,8 +523,34 @@ export function FxSection({
    [chain.nodes, mutate],
  );

+  /**
+   * Escape closes whichever menu is open.
+   *
+   * The first thing anyone reaches for, and on a surface that covers the rack it
+   * is the one that needs no discovering. Bound on the section rather than the
+   * window: a keystroke aimed at the timeline is not aimed at this.
+   */
+  const closeMenus = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || (!adding && !picking)) return;
+      // Stops the panel's own Escape handling from also firing — closing a menu
+      // and deselecting the clip on one keystroke loses the author their place.
+      event.stopPropagation();
+      audition(null);
+      onAuditionLevel?.(false);
+      setAdding(false);
+      setPicking(false);
+    },
+    [adding, picking, audition, onAuditionLevel],
+  );
+
  return (
-    <div className="hf-fx-section space-y-2">
+    <div
+      className="hf-fx-section space-y-2"
+      // Focus lives on the buttons and menu items inside, so the keystroke
+      // bubbles to here without the section needing focus of its own.
+      onKeyDown={closeMenus}
+    >
      <div className="hf-fx-chain space-y-1">
        {/* The rack IS the signal path, and saying so costs two lines. Without
            them the order reads as a list, which is the one reading that makes
@@ -790,26 +841,44 @@ export function FxSection({
        />
      ) : null}

-      {adding || picking ? null : (
-        <div className="flex gap-1">
-          <button
-            type="button"
-            className="hf-fx-preset w-full rounded-[4px] border border-dashed border-panel-border-input py-1 text-[11px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-40"
-            disabled={disabled}
-            onClick={() => setPicking(true)}
-          >
-            Presets
-          </button>
-          <button
-            type="button"
-            className="hf-fx-add w-full rounded-[4px] border border-dashed border-panel-border-input py-1 text-[11px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-40"
-            disabled={disabled}
-            onClick={() => setAdding(true)}
-          >
-            Add effect
-          </button>
-        </div>
-      )}
+      {/* The buttons stay while their menu is open, and close it — an author who
+          opened one and changed their mind had no way back: picking something
+          was the only thing that set these false, so the only exits were adding
+          an effect they did not want or deselecting the clip. */}
+      <div className="flex gap-1">
+        <button
+          type="button"
+          className="hf-fx-preset w-full rounded-[4px] border border-dashed border-panel-border-input py-1 text-[11px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-40"
+          aria-expanded={picking}
+          disabled={disabled}
+          onClick={() => {
+            // Leaving the shelf by closing it is still leaving it, and an
+            // audition left playing is audible over a chain the document does
+            // not have.
+            if (picking) audition(null);
+            setPicking(!picking);
+            setAdding(false);
+          }}
+        >
+          {picking ? "Close" : "Presets"}
+        </button>
+        <button
+          type="button"
+          className="hf-fx-add w-full rounded-[4px] border border-dashed border-panel-border-input py-1 text-[11px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-40"
+          aria-expanded={adding}
+          disabled={disabled}
+          onClick={() => {
+            if (adding) {
+              audition(null);
+              onAuditionLevel?.(false);
+            }
+            setAdding(!adding);
+            setPicking(false);
+          }}
+        >
+          {adding ? "Close" : "Add effect"}
+        </button>
+      </div>
    </div>
  );
 }