@hyperframes/studio 0.8.11 → 0.8.12

package/src/components/editor/propertyPanelFxCarveModule.tsx

@@ -164,43 +164,9 @@ export function FxCarveModule({
   onCarveChange(carve: HfCarveSettings): void;
   onCarvePreview(carve: HfCarveSettings): void;
 }) {
-  const bands = nodes.filter((n) => n.type === "peaking").length;
-  const hasLevel = nodes.some((n) => n.type === "gain");
   const on = carve.enabled;
-  /**
-   * The only track this bed could be listening to, when there is exactly one.
-   *
-   * A picker with one entry is a question with one answer: it asks the author to
-   * confirm something already decided. So the voice reads out instead.
-   *
-   * Not when the stored source is some OTHER track, though — a name that no longer
-   * classifies as a voice, or a track since renamed. Reading out the one remaining
-   * candidate there would quietly claim the carve listens to something it does not,
-   * so the picker comes back and shows the mismatch.
-   */
-  const soleVoice =
-    sourceOptions.length === 1 &&
-    (carve.sources.length === 0 ||
-      (carve.sources.length === 1 && carve.sources[0] === sourceOptions[0]?.id))
-      ? sourceOptions[0]
-      : null;
-  // What the module is worth right now, in the head, so a collapsed card still
-  // says whether it is doing anything: the analysis it produced, or why not.
-  const summary = !on
-    ? "off"
-    : analysing
-      ? "analysing…"
-      : bands > 0
-        ? [
-            `${bands} band${bands === 1 ? "" : "s"}`,
-            ...(hasLevel ? ["level"] : []),
-            // Worth saying when it is more than one: the cuts follow whoever is
-            // speaking, and that is not obvious from a band count.
-            ...(carve.sources.length > 1 ? [`${carve.sources.length} voices`] : []),
-          ].join(" + ")
-        : carve.sources.length > 0
-          ? "no analysis yet"
-          : "pick a voice";
+  const soleVoice = soleCarveVoice(sourceOptions, carve.sources);
+  const summary = carveSummary({ nodes, carve, analysing });
   // The carve's own colour, used three ways: the module's left edge, the title,
   // and the wash behind it. A preset gets a title treatment because it is a
   // character; the carve gets one because it is the only module in the rack
@@ -230,6 +196,8 @@ export function FxCarveModule({
           // sets `tracking-normal`, and two Tailwind tracking utilities on one
           // element resolve by stylesheet order, not by the order written.
           style={{ color: tint, letterSpacing: "0.16em" }}
+          // Truncates in a narrow panel like every other name in the rack.
+          title="Voiceover carve"
           aria-expanded={open}
           onClick={onToggleOpen}
         >
@@ -255,50 +223,13 @@ export function FxCarveModule({
       {open && on ? (
         <div className="hf-fx-carve-body border-t border-panel-border-input">
           <div className="hf-fx-carve-controls space-y-0.5 px-1.5 py-1.5">
-            <div className="hf-fx-row flex min-h-6 items-center gap-2">
-              <span className="hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] text-panel-text-2">
-                Listen to
-              </span>
-              {soleVoice ? (
-                <span
-                  className="hf-fx-carve-source min-w-0 flex-1 truncate font-mono text-[10px] text-panel-text-1"
-                  data-carve-source={soleVoice.id}
-                >
-                  {soleVoice.label}
-                </span>
-              ) : (
-                /* Every voice, not one of them. A bed usually runs under a whole
-                   sequence — a narrator, an answer, a second presenter — and they are
-                   analysed together, so the cuts follow whoever is speaking. Which
-                   makes this a set of things to include, not a choice between them. */
-                <div className="hf-fx-carve-sources flex min-w-0 flex-1 flex-wrap gap-x-2.5 gap-y-0.5">
-                  {sourceOptions.map((o) => (
-                    <label
-                      key={o.id}
-                      className="flex min-w-0 items-center gap-1 font-mono text-[9px] text-panel-text-1"
-                      title={`Make room for ${o.label}`}
-                    >
-                      <input
-                        type="checkbox"
-                        className="hf-fx-carve-source h-2.5 w-2.5 accent-panel-accent"
-                        data-carve-source={o.id}
-                        checked={carve.sources.includes(o.id)}
-                        disabled={disabled}
-                        onChange={(e) =>
-                          onCarveChange({
-                            ...carve,
-                            sources: e.target.checked
-                              ? [...carve.sources, o.id]
-                              : carve.sources.filter((id) => id !== o.id),
-                          })
-                        }
-                      />
-                      <span className="truncate">{o.label}</span>
-                    </label>
-                  ))}
-                </div>
-              )}
-            </div>
+            <CarveSourceRow
+              carve={carve}
+              sourceOptions={sourceOptions}
+              soleVoice={soleVoice}
+              disabled={disabled}
+              onCarveChange={onCarveChange}
+            />
             {/* One knob for the whole effect. Depth, band count, width, the
                 intelligibility weighting and both level-match numbers move together
                 anyway — a gentle carve is shallow in few bands with little ducking, a
@@ -330,53 +261,200 @@ export function FxCarveModule({
               change re-derives all of them — so leaving them up reads as the
               settings that are in force when they are already history, and the one
               honest thing to say is that the work is happening. */}
-          {analysing ? (
-            <p className="hf-fx-carve-working flex items-center justify-center gap-1.5 border-t border-panel-border-input py-2 text-[10px] text-panel-text-2">
-              <svg
-                className="hf-fx-carve-spinner h-3 w-3 animate-spin motion-reduce:animate-none"
-                viewBox="0 0 24 24"
-                fill="none"
-                aria-hidden="true"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                />
-              </svg>
-              Analysing…
-            </p>
-          ) : nodes.length > 0 ? (
-            <div className="hf-fx-carve-members divide-y divide-panel-border-input/60 border-t border-panel-border-input">
-              <div className="hf-fx-carve-members-label px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
-                analysed
-              </div>
-              {nodes.map((node, i) => (
-                <FxCarveMember
-                  key={node.id ?? `${node.type}-${i}`}
-                  node={node}
-                  automatedTargets={automatedTargets}
-                  liveAutomationValues={liveAutomationValues}
-                />
-              ))}
-            </div>
-          ) : (
-            <p className="hf-fx-carve-working border-t border-panel-border-input py-1.5 text-center text-[10px] text-panel-text-2">
-              {carve.sources.length > 0
-                ? "Nothing analysed yet."
-                : "Pick the voices this bed should make room for."}
-            </p>
-          )}
+          <CarveAnalysis
+            nodes={nodes}
+            analysing={analysing}
+            hasSources={carve.sources.length > 0}
+            automatedTargets={automatedTargets}
+            liveAutomationValues={liveAutomationValues}
+          />
         </div>
       ) : null}
     </div>
   );
 }
+
+/**
+ * The only track this bed could be listening to, when there is exactly one.
+ *
+ * A picker with one entry is a question with one answer: it asks the author to
+ * confirm something already decided. So the voice reads out instead.
+ *
+ * Not when the stored source is some OTHER track, though — a name that no longer
+ * classifies as a voice, or a track since renamed. Reading out the one remaining
+ * candidate there would quietly claim the carve listens to something it does not,
+ * so the picker comes back and shows the mismatch.
+ */
+function soleCarveVoice(
+  sourceOptions: AudioTrackOption[],
+  sources: readonly string[],
+): AudioTrackOption | null {
+  if (sourceOptions.length !== 1) return null;
+  const only = sourceOptions[0];
+  if (!only) return null;
+  if (sources.length === 0) return only;
+  return sources.length === 1 && sources[0] === only.id ? only : null;
+}
+
+/**
+ * What the module is worth right now, for its head, so a collapsed card still
+ * says whether it is doing anything: the analysis it produced, or why not.
+ */
+function carveSummary(input: {
+  nodes: HfAudioFxNode[];
+  carve: HfCarveSettings;
+  analysing?: boolean;
+}): string {
+  const { nodes, carve, analysing } = input;
+  if (!carve.enabled) return "off";
+  if (analysing) return "analysing…";
+  const bands = nodes.filter((n) => n.type === "peaking").length;
+  if (bands === 0) return carve.sources.length > 0 ? "no analysis yet" : "pick a voice";
+  return [
+    `${bands} band${bands === 1 ? "" : "s"}`,
+    ...(nodes.some((n) => n.type === "gain") ? ["level"] : []),
+    // Worth saying when it is more than one: the cuts follow whoever is
+    // speaking, and that is not obvious from a band count.
+    ...(carve.sources.length > 1 ? [`${carve.sources.length} voices`] : []),
+  ].join(" + ");
+}
+
+/** Which voices the bed makes room for: a readout when there is only one to
+ *  choose, otherwise a set of checkboxes. */
+function CarveSourceRow({
+  carve,
+  sourceOptions,
+  soleVoice,
+  disabled,
+  onCarveChange,
+}: {
+  carve: HfCarveSettings;
+  sourceOptions: AudioTrackOption[];
+  soleVoice: AudioTrackOption | null;
+  disabled?: boolean;
+  onCarveChange(carve: HfCarveSettings): void;
+}) {
+  return (
+    <div className="hf-fx-row flex min-h-6 items-center gap-2">
+      {/* Wraps like every other name in this column (see FxParamRow) — one
+          truncating row beside wrapping ones reads as a rendering bug. */}
+      <span className="hf-fx-label w-[86px] flex-shrink-0 break-words text-[10px] leading-tight text-panel-text-2">
+        Listen to
+      </span>
+      {soleVoice ? (
+        <span
+          className="hf-fx-carve-source min-w-0 flex-1 truncate font-mono text-[10px] text-panel-text-1"
+          data-carve-source={soleVoice.id}
+        >
+          {soleVoice.label}
+        </span>
+      ) : (
+        /* Every voice, not one of them. A bed usually runs under a whole
+           sequence — a narrator, an answer, a second presenter — and they are
+           analysed together, so the cuts follow whoever is speaking. Which
+           makes this a set of things to include, not a choice between them. */
+        <div className="hf-fx-carve-sources flex min-w-0 flex-1 flex-wrap gap-x-2.5 gap-y-0.5">
+          {sourceOptions.map((o) => (
+            <label
+              key={o.id}
+              className="flex min-w-0 items-center gap-1 font-mono text-[9px] text-panel-text-1"
+              title={`Make room for ${o.label}`}
+            >
+              <input
+                type="checkbox"
+                className="hf-fx-carve-source h-2.5 w-2.5 accent-panel-accent"
+                data-carve-source={o.id}
+                checked={carve.sources.includes(o.id)}
+                disabled={disabled}
+                onChange={(e) =>
+                  onCarveChange({
+                    ...carve,
+                    sources: e.target.checked
+                      ? [...carve.sources, o.id]
+                      : carve.sources.filter((id) => id !== o.id),
+                  })
+                }
+              />
+              <span className="truncate">{o.label}</span>
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * What the analysis made of all that. Divided rather than boxed: these are parts
+ * of one module, and a border around each would read as the separate effects
+ * this replaced.
+ *
+ * While the analysis runs the previous filters are gone rather than stale. Every
+ * number in that list is about to be replaced — a strength change re-derives all
+ * of them — so leaving them up reads as the settings that are in force when they
+ * are already history, and the one honest thing to say is that the work is
+ * happening.
+ */
+function CarveAnalysis({
+  nodes,
+  analysing,
+  hasSources,
+  automatedTargets,
+  liveAutomationValues,
+}: {
+  nodes: HfAudioFxNode[];
+  analysing?: boolean;
+  hasSources: boolean;
+  automatedTargets?: ReadonlySet<string>;
+  liveAutomationValues?: ReadonlyMap<string, number>;
+}) {
+  if (analysing) {
+    return (
+      <p className="hf-fx-carve-working flex items-center justify-center gap-1.5 border-t border-panel-border-input py-2 text-[10px] text-panel-text-2">
+        <svg
+          className="hf-fx-carve-spinner h-3 w-3 animate-spin motion-reduce:animate-none"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          />
+        </svg>
+        Analysing…
+      </p>
+    );
+  }
+  if (nodes.length === 0) {
+    return (
+      <p className="hf-fx-carve-working border-t border-panel-border-input py-1.5 text-center text-[10px] text-panel-text-2">
+        {hasSources ? "Nothing analysed yet." : "Pick the voices this bed should make room for."}
+      </p>
+    );
+  }
+  return (
+    <div className="hf-fx-carve-members divide-y divide-panel-border-input/60 border-t border-panel-border-input">
+      <div className="hf-fx-carve-members-label px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
+        analysed
+      </div>
+      {nodes.map((node, i) => (
+        <FxCarveMember
+          key={node.id ?? `${node.type}-${i}`}
+          node={node}
+          automatedTargets={automatedTargets}
+          liveAutomationValues={liveAutomationValues}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/editor/propertyPanelFxControls.test.tsx

@@ -113,3 +113,53 @@ describe("FxParamRow commit", () => {
     expect(onCommit).not.toHaveBeenCalled();
   });
 });
+
+describe("FxParamRow label tooltip", () => {
+  // The label column is a fixed 86px and truncates: "Gap between repeats" reads
+  // as "Gap between re…", "How many repeats" as "How many repe…". The row
+  // already carried a `title`, but that is the HINT — what the knob does — so a
+  // truncated name had no way to be read in full.
+  const LONG: HfAudioFxNumberParam = {
+    kind: "number",
+    key: "time",
+    label: "Gap between repeats",
+    min: 0,
+    max: 1000,
+    step: 1,
+    default: 250,
+    unit: "ms",
+    hint: "How long before the echo comes back.",
+  };
+
+  it("wraps the full name rather than truncating it, and leaves the hint on the row", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    act(() => {
+      createRoot(host).render(<FxParamRow param={LONG} value={250} onChange={vi.fn()} />);
+    });
+    const label = host.querySelector<HTMLElement>(".hf-fx-label");
+    // The whole name is present and allowed to wrap. No `title`: a tooltip
+    // answers one row on hover, wrapping answers the column at rest.
+    expect(label?.textContent).toBe("Gap between repeats");
+    expect(label?.className).toContain("break-words");
+    expect(label?.className).not.toContain("truncate");
+    expect(label?.getAttribute("title")).toBeNull();
+    // The hint stays where it was: the two are different questions, and the
+    // name is not a substitute for the explanation either.
+    expect(host.querySelector<HTMLElement>(".hf-fx-row")?.getAttribute("title")).toBe(
+      "How long before the echo comes back.",
+    );
+  });
+
+  it("wraps it the same way with no hint to fall back on", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const { hint: _hint, ...noHint } = LONG;
+    act(() => {
+      createRoot(host).render(<FxParamRow param={noHint} value={250} onChange={vi.fn()} />);
+    });
+    const label = host.querySelector<HTMLElement>(".hf-fx-label");
+    expect(label?.textContent).toBe("Gap between repeats");
+    expect(label?.getAttribute("title")).toBeNull();
+  });
+});

package/src/components/editor/propertyPanelFxControls.tsx

@@ -188,7 +188,14 @@ export function FxParamRow({
   if (param.kind === "enum") {
     return (
       <label className="hf-fx-row flex min-h-6 items-center gap-2" title={param.hint}>
-        <span className="hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] text-panel-text-2">
+        {/* Wraps rather than truncating. These names are whole questions — "How
+            big the space is" — so 86px of truncation left "How big the sp…", and
+            three rows of that read as the same word four times. A title only
+            answers it on hover, one row at a time; wrapping answers it for the
+            whole column at rest. `break-words` so a long single token breaks
+            instead of widening the column. The row keeps `title={param.hint}`:
+            the name and the explanation are different questions. */}
+        <span className="hf-fx-label w-[86px] flex-shrink-0 break-words text-[10px] leading-tight text-panel-text-2">
           {param.label}
         </span>
         <select
@@ -227,8 +234,9 @@ export function FxParamRow({
       title={param.hint}
       data-automated={automated ? "" : undefined}
     >
+      {/* See the enum row above for why the name wraps instead of truncating. */}
       <span
-        className={`hf-fx-label w-[86px] flex-shrink-0 truncate text-[10px] ${
+        className={`hf-fx-label w-[86px] flex-shrink-0 break-words text-[10px] leading-tight ${
           automated ? "text-panel-accent" : "text-panel-text-2"
         }`}
       >

package/src/components/editor/propertyPanelFxEqModule.tsx

@@ -125,6 +125,7 @@ function Fader({
 }
 
 export function FxEqModule({
+  eqId,
   bands,
   open,
   disabled,
@@ -141,6 +142,8 @@ export function FxEqModule({
       className="hf-fx-node hf-fx-eq-module rounded-[4px] border border-l-2 border-panel-border-input"
       data-fx-node="eq"
       data-fx-family="smart"
+      // Scroll anchor for a revealed EQ-band automation lane.
+      data-fx-eq={eqId}
       // Smart, with the carve and the leveller: three bands the author sets by
       // ear on a control surface, not three filters they configured.
       style={{ borderLeftColor: fxFamilyTint({ type: "eq", fromEq: "eq" }) }}

package/src/components/editor/propertyPanelFxNodeRow.tsx

@@ -184,6 +184,9 @@ function FxNodeHeader({
       <button
         type="button"
         className={`hf-fx-node-name flex-1 truncate text-left text-[11px] text-panel-text-1 hover:text-panel-text-0 ${family}`}
+        // Truncated in the same narrow column as the param labels below, so it
+        // needs the same fallback to the full text on hover.
+        title={label}
         aria-expanded={open}
         onClick={onToggleOpen}
       >
@@ -277,6 +280,10 @@ export function FxNodeRow({
       className={`hf-fx-node rounded-[4px] border border-l-2 border-panel-border-input${bypassed ? " opacity-50" : ""}`}
       data-fx-node={node.type}
       data-fx-family={fxFamilyOf(node)}
+      // The scroll anchor a revealed automation lane lands on. Keyed by node id
+      // rather than by parameter: every param of one effect lives in this row,
+      // so the row is the smallest thing worth scrolling to.
+      data-fx-node-id={node.id}
       // The tint is on the edge rather than the text: the name already carries
       // the family in its lettering, and colouring it too would fight the
       // panel's own tokens for automated and bypassed.
@@ -304,7 +311,10 @@ export function FxNodeRow({
         onRemove={() => onRemove(index)}
       />
       {summary ? (
-        <p className="hf-fx-node-summary truncate px-1.5 pb-1 text-[10px] text-panel-text-2">
+        <p
+          className="hf-fx-node-summary truncate px-1.5 pb-1 text-[10px] text-panel-text-2"
+          title={summary}
+        >
           {summary}
         </p>
       ) : null}

package/src/components/editor/propertyPanelFxPresetMenu.tsx

@@ -133,8 +133,18 @@ export function FxPresetMenu({
               <span className="hf-fx-preset-problem block truncate text-[10px]">
                 {PRESET_PROBLEM[preset.id] ?? preset.description}
               </span>
-              <span className="hf-fx-preset-name block truncate font-mono text-[9px] text-panel-text-2">
-                {preset.label}
+              {/* "Clean Voice · 5 effects" — the count is on the row in the
+                  designs, not hidden in a tooltip. It is doing real work there:
+                  it tells the author a preset IS a chain they can open and edit,
+                  rather than an opaque setting they cannot follow. The count is
+                  its own span so `.hf-fx-preset-name` stays the NAME — several
+                  tests read it as the preset's identity. */}
+              <span className="block truncate font-mono text-[9px] text-panel-text-2">
+                <span className="hf-fx-preset-name">{preset.label}</span>
+                <span className="hf-fx-preset-count">
+                  {" · "}
+                  {preset.nodes.length} effect{preset.nodes.length === 1 ? "" : "s"}
+                </span>
               </span>
               {/* Hovering a preset plays it, and playing is otherwise invisible:
                   the panel looks identical whether the audition is sounding or

package/src/components/editor/propertyPanelFxRackChain.tsx

@@ -1,7 +1,8 @@
 /**
  * The rack's own signal path: the carve, the Tone EQ modules, and every
- * hand-built effect or preset run in between — bracketed by the "In this
- * track" / "Out to mix" labels that say the order is the point.
+ * hand-built effect or preset run in between — bracketed by the `In` / `Out`
+ * labels that say the order is the point. What those two name depends on what
+ * is selected; see `audioFxSignalPath`.
  *
  * Split out of `propertyPanelFxSection.tsx`, which owned this whole chain
  * before the file grew past a size where the chain and the add/pick menus
@@ -15,8 +16,11 @@ import { trackEqChanged, trackPresetAmount } from "./audioFxTelemetry.js";
 import { FxCarveModule, type AudioTrackOption } from "./propertyPanelFxCarveModule.js";
 import { FxEqModule } from "./propertyPanelFxEqModule.js";
 import { FxPresetRun } from "./propertyPanelFxPresetRun.js";
+import type { AudioFxSignalPath } from "./audioFxSignalPath.js";
 
 export interface FxRackChainProps {
+  /** What the `In`/`Out` lines name — a clip's answer differs from a bus's. */
+  signalPath: AudioFxSignalPath;
   chain: HfAudioFxChain;
   showCarve: boolean;
   carveNodes: HfAudioFxNode[];
@@ -103,6 +107,7 @@ export function FxRackChain({
   presetAutomated,
   presetAutomateHandler,
   presetRemoveAutomationHandler,
+  signalPath,
 }: FxRackChainProps) {
   return (
     <div className="hf-fx-chain space-y-1">
@@ -111,7 +116,7 @@ export function FxRackChain({
           "move up" look cosmetic — it is the most consequential control here. */}
       <p className="hf-fx-term flex items-baseline gap-1.5 px-1.5 font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
         <span className="hf-fx-term-cap text-panel-text-1">In</span>
-        <span>this track</span>
+        <span>{signalPath.inLabel}</span>
       </p>
       {/* Carve leads the rack, which is also where its effects sit in the signal
           path — corrective work before anything the author added. Present
@@ -151,7 +156,9 @@ export function FxRackChain({
       ))}
       {handBuiltCount === 0 && eqIds.length === 0 ? (
         <p className="hf-fx-empty py-1 text-[11px] text-panel-text-2">
-          {showCarve ? "No other effects on this track." : "No effects on this track."}
+          {showCarve
+            ? `No other effects on this ${signalPath.subject}.`
+            : `No effects on this ${signalPath.subject}.`}
         </p>
       ) : (
         runs.map((run) => {
@@ -195,7 +202,7 @@ export function FxRackChain({
       )}
       <p className="hf-fx-term hf-fx-term-out flex items-baseline gap-1.5 px-1.5 font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
         <span className="hf-fx-term-cap text-panel-text-1">Out</span>
-        <span>to mix</span>
+        <span>{signalPath.outLabel}</span>
       </p>
     </div>
   );

package/src/components/editor/propertyPanelFxSection.test.tsx

@@ -162,6 +162,48 @@ afterEach(() => {
 });
 
 describe("FxSection chain", () => {
+  it("scrolls again when the same open parameter is revealed twice", () => {
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollIntoView");
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+    const chain: HfAudioFxChain = {
+      version: 1,
+      nodes: [
+        {
+          type: "lowpass",
+          id: "filter-1",
+          enabled: true,
+          params: defaultAudioFxParams("lowpass"),
+        },
+      ],
+    };
+    const renderFxSection = (revealNonce: number) => (
+      <FxSection
+        chain={chain}
+        onChainChange={vi.fn()}
+        onCarveChange={vi.fn()}
+        carve={null}
+        sourceOptions={[]}
+        revealTarget="fx.filter-1.frequency"
+        revealNonce={revealNonce}
+      />
+    );
+
+    try {
+      const { root } = renderInto(renderFxSection(1));
+      expect(scrollIntoView).toHaveBeenCalledTimes(1);
+
+      act(() => root.render(renderFxSection(2)));
+      expect(scrollIntoView).toHaveBeenCalledTimes(2);
+    } finally {
+      if (descriptor) Object.defineProperty(HTMLElement.prototype, "scrollIntoView", descriptor);
+      else Reflect.deleteProperty(HTMLElement.prototype, "scrollIntoView");
+    }
+  });
+
   it("says so when the track has no effects", () => {
     const { host } = mount();
     // "other", because the carve module is in the rack whenever a voice exists.