feat(studio): switch a preset off, or take it out, as one thing

The bracket said a preset was one thing the author added, and then made
them treat it as five: every member module had its own On / ↑ / ↓ / ×
and the preset itself had none. Switching off Telephone meant reaching
into seven modules and toggling each — exactly the bookkeeping the
bracket exists to remove.

The run head now carries the two controls that belong to the whole:

- **On/Off bypasses every node it wrote**, and leaves anything the author
  added themselves alone. A bypass, not a delete: the settings survive,
  which is what makes a preset worth trying rather than committing to.
- **× takes it back out whole**, with its lanes. An orphaned lane keeps
  driving a parameter that is no longer in the graph, and with ids minted
  lowest-free the next effect added inherits it — the same contract
  removing a single node already has.

It reads as On while *any* of it is still running. "Some of it is
bypassed" is not a state an author set, it is one they arrived at by
toggling a member, and the switch has to offer to stop the preset rather
than claim it has already stopped.

Also fixes the mount helper in the section tests, which never passed
`onRemoveNodeAutomation` — so nothing in that file could have caught a
lane leak on removal.

studio 3700 passing, 18 todo.

Author: vanceingalls

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

@@ -11,7 +11,7 @@ import { DEFAULT_CARVE } from "@hyperframes/core/audio-carve";
 import { BANDS, EFFECT_COPY, PRESET_PROBLEM } from "@hyperframes/core/audio-fx-copy";
 import { HF_AUDIO_FX_JOBS, HF_AUDIO_FX_JOB_TYPES } from "@hyperframes/core/audio-fx-jobs";
 import { audioFxProfileStrength } from "@hyperframes/core/audio-fx-profiles";
-import { getAudioFxPreset } from "@hyperframes/core/audio-fx-presets";
+import { applyAudioFxPreset, getAudioFxPreset } from "@hyperframes/core/audio-fx-presets";
 
 /**
  * What a knob is CALLED in the panel, looked up rather than spelled out.
@@ -87,6 +87,7 @@ function mount(overrides: Partial<Parameters<typeof FxSection>[0]> = {}) {
       automatedTargets={overrides.automatedTargets}
       onAutomateParam={overrides.onAutomateParam}
       onRemoveParamAutomation={overrides.onRemoveParamAutomation}
+      onRemoveNodeAutomation={overrides.onRemoveNodeAutomation}
       onLevel={overrides.onLevel}
       onRemoveLevel={overrides.onRemoveLevel}
       levelled={overrides.levelled}
@@ -412,6 +413,90 @@ describe("FxSection chain", () => {
     expect(run?.querySelectorAll(".hf-fx-node")).toHaveLength(written.length);
   });
 
+  describe("a preset is one thing to switch off or take away", () => {
+    /** A telephone preset applied, plus one hand-built effect beside it. */
+    const applied = (): HfAudioFxChain => {
+      const preset = getAudioFxPreset("telephone");
+      if (!preset) throw new Error("no telephone preset");
+      // Through the real applier: `fromPreset` is stamped there, not carried in
+      // the catalogue, and the tag is the whole basis of the bracket.
+      const withPreset = applyAudioFxPreset({ version: 1, nodes: [] }, preset);
+      return {
+        ...withPreset,
+        nodes: [
+          ...withPreset.nodes,
+          { type: "reverb", id: "own", enabled: true, params: defaultAudioFxParams("reverb") },
+        ],
+      };
+    };
+
+    it("bypasses every node it wrote, in one gesture", () => {
+      // Reaching into five modules and toggling each is exactly the bookkeeping
+      // the bracket exists to remove.
+      const { host, onChainChange } = mount({ chain: applied() });
+      const run = host.querySelector("[data-fx-preset='telephone']");
+      click(run?.querySelector(".hf-fx-preset-run-toggle"));
+
+      const next = onChainChange.mock.calls[0]?.[0] as HfAudioFxChain;
+      expect(next.nodes.filter((n) => n.fromPreset === "telephone").every((n) => !n.enabled)).toBe(
+        true,
+      );
+      // And leaves what the author added themselves alone.
+      expect(next.nodes.find((n) => n.id === "own")?.enabled).toBe(true);
+    });
+
+    it("switches back on rather than deleting, so the settings survive", () => {
+      const off = applied();
+      off.nodes = off.nodes.map((n) =>
+        n.fromPreset === "telephone" ? { ...n, enabled: false } : n,
+      );
+      const { host, onChainChange } = mount({ chain: off });
+      const toggle = host
+        .querySelector("[data-fx-preset='telephone']")
+        ?.querySelector(".hf-fx-preset-run-toggle");
+      expect(toggle?.getAttribute("aria-pressed")).toBe("false");
+      click(toggle);
+
+      const next = onChainChange.mock.calls[0]?.[0] as HfAudioFxChain;
+      const back = next.nodes.filter((n) => n.fromPreset === "telephone");
+      expect(back.every((n) => n.enabled)).toBe(true);
+      // Nothing was thrown away.
+      expect(back).toHaveLength(off.nodes.filter((n) => n.fromPreset === "telephone").length);
+    });
+
+    it("reads as on while any of it is still running", () => {
+      // "Some of it is bypassed" is not a state an author set — it is one they
+      // arrived at, and the switch has to offer to stop it rather than claim it
+      // has already stopped.
+      const partial = applied();
+      partial.nodes = partial.nodes.map((n, i) => (i === 0 ? { ...n, enabled: false } : n));
+      const { host } = mount({ chain: partial });
+      expect(
+        host
+          .querySelector("[data-fx-preset='telephone']")
+          ?.querySelector(".hf-fx-preset-run-toggle")
+          ?.getAttribute("aria-pressed"),
+      ).toBe("true");
+    });
+
+    it("takes the preset back out whole, with its lanes", () => {
+      const onRemoveNodeAutomation = vi.fn();
+      const { host, onChainChange } = mount({ chain: applied(), onRemoveNodeAutomation });
+      click(
+        host
+          .querySelector("[data-fx-preset='telephone']")
+          ?.querySelector(".hf-fx-preset-run-remove"),
+      );
+
+      const next = onChainChange.mock.calls[0]?.[0] as HfAudioFxChain;
+      expect(next.nodes.filter((n) => n.fromPreset === "telephone")).toEqual([]);
+      expect(next.nodes.map((n) => n.id)).toEqual(["own"]);
+      // An orphaned lane keeps driving a parameter that is no longer in the
+      // graph, and the next effect added inherits it with the id.
+      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.

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

@@ -314,6 +314,41 @@ export function FxSection({
     [chain.nodes, mutate],
   );
 
+  /**
+   * Bypass or restore every node a preset wrote, as one gesture.
+   *
+   * A preset is one thing the author added, so it has to be one thing they can
+   * switch off — reaching into five modules and toggling each is the bookkeeping
+   * the bracket exists to remove. Off is a bypass, not a delete: the settings
+   * survive, which is what makes it worth trying rather than committing to.
+   */
+  const toggleRun = useCallback(
+    (items: { node: HfAudioFxNode; i: number }[], on: boolean) => {
+      const slots = new Set(items.map((item) => item.i));
+      mutate(chain.nodes.map((n, i) => (slots.has(i) ? { ...n, enabled: on } : n)));
+    },
+    [chain.nodes, mutate],
+  );
+
+  /**
+   * Take a preset back out whole, lanes and all.
+   *
+   * Same contract as removing one node — an orphaned lane keeps driving a
+   * parameter that is no longer in the graph, and with ids minted lowest-free
+   * the next effect added inherits it.
+   */
+  const removeRun = useCallback(
+    (items: { node: HfAudioFxNode; i: number }[]) => {
+      for (const { node } of items) {
+        if (node.id) onRemoveNodeAutomation?.(node.id);
+      }
+      const slots = new Set(items.map((item) => item.i));
+      mutate(chain.nodes.filter((_, i) => !slots.has(i)));
+      setOpenNode(null);
+    },
+    [chain.nodes, mutate, onRemoveNodeAutomation],
+  );
+
   const removeNode = useCallback(
     (index: number) => {
       // The node's lanes go with it. `resolveAutomation` only hides an orphan at
@@ -501,15 +536,44 @@ export function FxSection({
             ));
             const preset = run.preset ? getAudioFxPreset(run.preset) : null;
             if (!preset) return rows;
+            // On unless every node in it is bypassed: one switched back on means
+            // the preset is doing something, and the switch has to offer to stop
+            // it rather than claiming it has already stopped.
+            const runOn = run.items.some(({ node }) => node.enabled !== false);
             return (
               <div
                 key={`preset-${run.preset}-${run.items[0]?.i}`}
                 className="hf-fx-preset-run space-y-1 rounded-[4px] border border-dashed border-panel-border-input p-1"
                 data-fx-preset={run.preset}
               >
-                <span className="hf-fx-preset-run-label block px-0.5 font-mono text-[9px] uppercase tracking-wide text-panel-text-4">
-                  {preset.label}
-                </span>
+                <div className="hf-fx-preset-run-head flex min-h-6 items-center gap-1 px-0.5">
+                  <span className="hf-fx-preset-run-label min-w-0 flex-1 truncate font-mono text-[9px] uppercase tracking-wide text-panel-text-4">
+                    {preset.label}
+                  </span>
+                  {/* The whole preset, on or off. Partly-bypassed reads as off,
+                      because "some of it is running" is not a state an author
+                      set — it is one they arrived at, and the switch is how they
+                      get back out of it. */}
+                  <button
+                    type="button"
+                    className="hf-fx-preset-run-toggle rounded-[3px] border border-panel-border-input px-1.5 py-0.5 font-mono text-[9px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-40"
+                    aria-pressed={runOn}
+                    title={runOn ? `Bypass ${preset.label}` : `Switch ${preset.label} back on`}
+                    disabled={disabled}
+                    onClick={() => toggleRun(run.items, !runOn)}
+                  >
+                    {runOn ? "On" : "Off"}
+                  </button>
+                  <button
+                    type="button"
+                    className="hf-fx-preset-run-remove px-1 font-mono text-[11px] text-panel-text-4 hover:text-red-400 disabled:opacity-40"
+                    title={`Remove ${preset.label}`}
+                    disabled={disabled}
+                    onClick={() => removeRun(run.items)}
+                  >
+                    &times;
+                  </button>
+                </div>
                 {rows}
               </div>
             );