feat(studio): draw the rack as the signal path it is

The last of the schematic direction, translated to a one-column panel
rather than the wide diagram the review page draws.

**Both ends named.** IN — this track, OUT — to mix. Two lines, and they
change what the rack is: without them the order reads as a list, and a
list is the one reading that makes "move up" look cosmetic. It is the
most consequential control in the panel — chain order is audible.

**Every step numbered**, counted over what the rack SHOWS rather than
over the chain. The carve's filters and an EQ's bands live inside their
own modules, so counting raw nodes would leave the visible rack jumping
from 02 to 07, and the numbers would read as a bug rather than a
position.

**A preset draws as one thing.** Applying one used to drop five loose
rows in with nothing saying they arrived together — the same failure the
carve module exists to fix, one level down. Consecutive nodes only: a
preset pulled apart by a reorder is no longer a unit, and a bracket
around the gap would claim an adjacency the signal path does not have.

Falsified: numbering by chain index fails the path test, and grouping a
preset's nodes regardless of adjacency fails the run test.

studio 3695 passing, 18 todo.

Author: vanceingalls

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

@@ -73,6 +73,8 @@ function plainDef(def: HfAudioFxDef): HfAudioFxDef {
 interface FxNodeRowProps {
   node: HfAudioFxNode;
   index: number;
+  /** Where it sits in the signal path, as the rack counts it. Absent means unnumbered. */
+  position?: number;
   automatedTargets?: ReadonlySet<string>;
   liveAutomationValues?: ReadonlyMap<string, number>;
   onAutomateParam?(nodeId: string, paramKey: string): void;
@@ -117,6 +119,7 @@ function FxMoveButton({
 function FxNodeHeader({
   label,
   family,
+  position,
   open,
   bypassed,
   first,
@@ -130,6 +133,7 @@ function FxNodeHeader({
   label: string;
   /** How this family letters, so the KIND reads before the word does. */
   family: string;
+  position?: number;
   open: boolean;
   bypassed: boolean;
   first: boolean;
@@ -142,6 +146,14 @@ function FxNodeHeader({
 }) {
   return (
     <div className="hf-fx-node-head flex min-h-7 items-center gap-1 px-1.5">
+      {/* Two digits, because a rack reads as a path when its steps are numbered
+          and as a list when they are not — and the difference decides whether an
+          author thinks the order matters. It does; it is audible. */}
+      {position !== undefined ? (
+        <span className="hf-fx-node-index shrink-0 font-mono text-[9px] tabular-nums text-panel-text-4">
+          {String(position).padStart(2, "0")}
+        </span>
+      ) : null}
       <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}`}
@@ -263,6 +275,7 @@ function FxNodeParams({
 export function FxNodeRow({
   node,
   index,
+  position,
   automatedTargets,
   liveAutomationValues,
   onAutomateParam,
@@ -307,6 +320,7 @@ export function FxNodeRow({
     >
       <FxNodeHeader
         family={FX_FAMILY_TYPE[fxFamilyOf(node)]}
+        position={position}
         // The node's own job name when a preset gave it one, because that is the
         // most specific truth available: a chain that cuts mud and then lifts
         // clarity must not show the same name twice. Then the plain name, and

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

@@ -362,6 +362,60 @@ describe("FxSection chain", () => {
     );
   });
 
+  it("draws the rack as a signal path, with both ends named", () => {
+    // Order is audible here, and a list does not look ordered. Numbering the
+    // steps and naming the two ends is what makes "move up" read as the most
+    // consequential control in the panel rather than a cosmetic one.
+    const { host } = mount({ chain: chainOf("highpass", "limiter") });
+    const terms = Array.from(host.querySelectorAll(".hf-fx-term")).map((e) => e.textContent);
+    expect(terms).toHaveLength(2);
+    expect(terms[0]).toContain("In");
+    expect(terms[1]).toContain("Out");
+    // Counted over what the rack SHOWS: the carve module leads it, so the first
+    // hand-built effect is 02.
+    const numbers = Array.from(host.querySelectorAll(".hf-fx-node-index")).map((e) =>
+      e.textContent?.trim(),
+    );
+    expect(numbers).toEqual(["02", "03"]);
+  });
+
+  it("draws a preset's nodes as the one thing that was added", () => {
+    // Applying a preset drops five rows into the rack with nothing saying they
+    // arrived together — the same failure the carve module exists to fix, one
+    // level down.
+    const { host, onChainChange } = mount({ chain: { version: 1, nodes: [] } });
+    click(byText(host, "button", "Presets"));
+    click(presetButton(host, "telephone"));
+    // Applying does not re-render this mount — the chain comes back as a prop —
+    // so the rack is read from what was written.
+    const applied = onChainChange.mock.calls[0]?.[0] as HfAudioFxChain | undefined;
+    const written = applied?.nodes ?? [];
+    const { host: after } = mount({ chain: { version: 1, nodes: written } });
+
+    const run = after.querySelector("[data-fx-preset='telephone']");
+    expect(run).toBeTruthy();
+    expect(run?.querySelector(".hf-fx-preset-run-label")?.textContent).toBe("Telephone");
+    expect(run?.querySelectorAll(".hf-fx-node")).toHaveLength(written.length);
+  });
+
+  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.
+    const { host } = mount({
+      chain: {
+        version: 1,
+        nodes: [
+          { type: "highpass", fromPreset: "telephone", params: defaultAudioFxParams("highpass") },
+          { type: "reverb", params: defaultAudioFxParams("reverb") },
+          { type: "lowpass", fromPreset: "telephone", params: defaultAudioFxParams("lowpass") },
+        ],
+      } as unknown as HfAudioFxChain,
+    });
+    const runs = Array.from(host.querySelectorAll("[data-fx-preset='telephone']"));
+    expect(runs).toHaveLength(2);
+    for (const run of runs) expect(run.querySelectorAll(".hf-fx-node")).toHaveLength(1);
+  });
+
   it("letters each family differently, so the kind reads before the word does", () => {
     // A rack of eight modules is eight lines of text. Reading it should not mean
     // reading eight names — the shape of the line carries what KIND of module

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

@@ -326,7 +326,41 @@ export function FxSection({
     [chain.nodes],
   );
 
+  /**
+   * The hand-built list cut into runs, so a preset reads as one thing.
+   *
+   * Applying a preset drops five rows into the rack with nothing saying they
+   * arrived together — which is the same failure the carve module was built to
+   * fix, one level down. Consecutive only: a preset whose nodes have been pulled
+   * apart by a reorder is no longer a unit, and drawing a bracket around the gap
+   * would claim an adjacency the signal path does not have.
+   */
+  const runs = useMemo(() => {
+    const out: { preset?: string; items: { node: HfAudioFxNode; i: number }[] }[] = [];
+    for (const item of handBuilt) {
+      const preset = item.node.fromPreset;
+      const last = out.at(-1);
+      if (last && last.preset === preset) last.items.push(item);
+      else out.push({ ...(preset ? { preset } : {}), items: [item] });
+    }
+    return out;
+  }, [handBuilt]);
+
   const eqIds = useMemo(() => audioEqIds(chain), [chain]);
+
+  /**
+   * The number each row wears, counted over what the rack actually shows.
+   *
+   * Not the chain index: the carve's filters and an EQ's bands are inside their
+   * own modules, so counting raw nodes would leave the visible rack jumping from
+   * 02 to 07 and the numbers would look like a bug rather than a position.
+   */
+  const positions = useMemo(() => {
+    const map = new Map<number, number>();
+    let at = (showCarve ? 1 : 0) + eqIds.length;
+    for (const { i } of handBuilt) map.set(i, ++at);
+    return map;
+  }, [handBuilt, eqIds.length, showCarve]);
   const [openEq, setOpenEq] = useState<string | null>(null);
 
   const addEq = useCallback(() => {
@@ -375,6 +409,13 @@ export function FxSection({
   return (
     <div className="hf-fx-section space-y-2">
       <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
+            "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-4">
+          <span className="hf-fx-term-cap text-panel-text-1">In</span>
+          <span>this track</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
             whenever there is a voice for it to listen to, rather than appearing
@@ -413,8 +454,8 @@ export function FxSection({
             {showCarve ? "No other effects on this track." : "No effects on this track."}
           </p>
         ) : (
-          handBuilt.map(({ node, i }) => {
-            return (
+          runs.map((run) => {
+            const rows = run.items.map(({ node, i }) => (
               <FxNodeRow
                 // Keyed by id, as the carve module's list above already is.
                 // On `${type}-${index}` two effects of the same type keep their
@@ -425,6 +466,7 @@ export function FxSection({
                 key={node.id ?? `${node.type}-${i}`}
                 node={node}
                 index={i}
+                position={positions.get(i)}
                 automatedTargets={automatedTargets}
                 liveAutomationValues={liveAutomationValues}
                 onAutomateParam={onAutomateParam}
@@ -438,9 +480,27 @@ export function FxSection({
                 onRemove={removeNode}
                 onPreview={previewNode}
               />
+            ));
+            const preset = run.preset ? getAudioFxPreset(run.preset) : null;
+            if (!preset) return rows;
+            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>
+                {rows}
+              </div>
             );
           })
         )}
+        <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-4">
+          <span className="hf-fx-term-cap text-panel-text-1">Out</span>
+          <span>to mix</span>
+        </p>
       </div>
 
       {adding ? (