fix(studio): let an author out of the preset and add-effect menus

Opening either menu hid both buttons, and the only thing that set them
back was picking something. So an author who opened one and changed their
mind had two ways out: add an effect they did not want, or deselect the
clip and lose their place. Escape did nothing.

The buttons now stay and close what they opened — same control, toggled,
reading "Close" while its menu is up. Opening one closes the other, since
two menus at once is two surfaces over the rack with nothing saying which
the next click belongs to.

Escape closes whichever is open. Bound on the section rather than the
window, because a keystroke aimed at the timeline is not aimed at this,
and it only stops propagation when it actually has a menu to close — the
panel has its own Escape handling and swallowing the key unconditionally
would break it.

Closing reverts an audition in flight, for the same reason leaving the
shelf with the pointer does: a preview left playing is audible over a
chain the document does not have.

Verified live, stepping one render at a time — clicking through the whole
cycle in a single synchronous pass batches into one React render and only
shows the final state, which is what made this look fixed when it was not.

Falsified: a button that only opens, an Escape that does nothing, opening
one menu without closing the other (in EITHER direction — the first test
only covered one, and the reverse mutation survived it), and closing
without reverting the audition each fail a test.

studio 3710 passing, 18 todo.

Author: vanceingalls

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

@@ -695,6 +695,89 @@ describe("FxSection chain", () => {
     expect(item?.querySelector(".hf-fx-preset-name")?.textContent).toBe("Telephone");
   });
 
+  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

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

@@ -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,
@@ -499,8 +499,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
@@ -791,26 +817,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>
   );
 }