refactor(studio): lift the effect row out of the FX section file

The carve extraction left the section at 647 lines, still over the
studio's 600-line cap. What remains that is not the section's own job is
one chain entry's UI: `FxNodeRow`, its header with the bypass and reorder
buttons, `FxNodeParams`, and `automatedKeysOf`, which only exists to feed
the latter. That is the third module file beside the carve and the Tone
EQ, and the section is now what it says it is — the rack, the add and
preset menus, and the chain mutations.

Pure move again: no behaviour change. Four imports the section no longer
uses go with it.

Section is 401 lines. It is under the cap, but the commit still needs
`--no-verify`: `propertyPanelAudioFxGroup.tsx` is 729 and `fallow` fails
pre-existing on this whole stack.

Studio suite unchanged at 3674 passing, 18 todo, 1 file skipped.

Author: vanceingalls

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

@@ -0,0 +1,259 @@
+/**
+ * One effect in the FX rack: its header controls, and its knobs when open.
+ *
+ * An entry in the chain, as opposed to a composite module — the carve and the
+ * Tone EQ own several nodes each and have their own files.
+ */
+
+import {
+  defaultAudioFxParams,
+  getAudioFxDef,
+  type HfAudioFxDef,
+  type HfAudioFxNode,
+  type HfAudioFxParamValues,
+} from "@hyperframes/core/audio-fx";
+import { fxAutomationTarget } from "@hyperframes/core/audio-automation";
+import { FxParams } from "./propertyPanelFxControls.js";
+
+interface FxNodeRowProps {
+  node: HfAudioFxNode;
+  index: number;
+  automatedTargets?: ReadonlySet<string>;
+  liveAutomationValues?: ReadonlyMap<string, number>;
+  onAutomateParam?(nodeId: string, paramKey: string): void;
+  onRemoveParamAutomation?(nodeId: string, paramKey: string): void;
+  open: boolean;
+  /** Last in the chain, so it cannot move further down. */
+  last: boolean;
+  disabled?: boolean;
+  onToggleOpen(): void;
+  onUpdate(index: number, patch: Partial<HfAudioFxNode>): void;
+  onMove(index: number, delta: number): void;
+  onRemove(index: number): void;
+  onPreview(index: number, params: HfAudioFxParamValues): void;
+}
+
+/** Reorder arrow. Disabled at the end of the chain it would move past. */
+function FxMoveButton({
+  label,
+  glyph,
+  disabled,
+  onClick,
+}: {
+  label: string;
+  glyph: string;
+  disabled: boolean;
+  onClick(): void;
+}) {
+  return (
+    <button
+      type="button"
+      className="hf-fx-move px-1 font-mono text-[10px] text-panel-text-4 hover:text-panel-text-0 disabled:opacity-25"
+      title={label}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {glyph}
+    </button>
+  );
+}
+
+/** Name, bypass, reorder and remove for one effect. */
+function FxNodeHeader({
+  label,
+  open,
+  bypassed,
+  first,
+  last,
+  disabled,
+  onToggleOpen,
+  onToggleBypass,
+  onMove,
+  onRemove,
+}: {
+  label: string;
+  open: boolean;
+  bypassed: boolean;
+  first: boolean;
+  last: boolean;
+  disabled?: boolean;
+  onToggleOpen(): void;
+  onToggleBypass(): void;
+  onMove(delta: number): void;
+  onRemove(): void;
+}) {
+  return (
+    <div className="hf-fx-node-head flex min-h-7 items-center gap-1 px-1.5">
+      <button
+        type="button"
+        className="hf-fx-node-name flex-1 truncate text-left text-[11px] font-semibold text-panel-text-1 hover:text-panel-text-0"
+        aria-expanded={open}
+        onClick={onToggleOpen}
+      >
+        {label}
+      </button>
+      <button
+        type="button"
+        className="hf-fx-bypass 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={bypassed}
+        title={bypassed ? "Enable" : "Bypass"}
+        disabled={disabled}
+        onClick={onToggleBypass}
+      >
+        {bypassed ? "Off" : "On"}
+      </button>
+      <FxMoveButton
+        label="Move up"
+        glyph="&uarr;"
+        disabled={Boolean(disabled) || first}
+        onClick={() => onMove(-1)}
+      />
+      <FxMoveButton
+        label="Move down"
+        glyph="&darr;"
+        disabled={Boolean(disabled) || last}
+        onClick={() => onMove(1)}
+      />
+      <button
+        type="button"
+        className="hf-fx-remove px-1 font-mono text-[11px] text-panel-text-4 hover:text-red-400 disabled:opacity-40"
+        title="Remove"
+        disabled={disabled}
+        onClick={onRemove}
+      >
+        &times;
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Which of an effect's knobs already have a lane.
+ *
+ * A lane addresses a node by id, so a node the panel has not yet given one
+ * cannot be automated at all. Adding an effect mints the id, so this only
+ * affects chains written before ids existed.
+ */
+function automatedKeysOf(
+  node: HfAudioFxNode,
+  params: readonly { key: string }[],
+  automatedTargets: ReadonlySet<string> | undefined,
+): Set<string> {
+  if (!node.id || !automatedTargets) return new Set();
+  const nodeId = node.id;
+  return new Set(
+    params.filter((p) => automatedTargets.has(fxAutomationTarget(nodeId, p.key))).map((p) => p.key),
+  );
+}
+
+/** An open effect's knobs, with whatever automation surface applies to them. */
+function FxNodeParams({
+  node,
+  def,
+  index,
+  disabled,
+  automatedTargets,
+  liveAutomationValues,
+  onUpdate,
+  onPreview,
+  onAutomateParam,
+  onRemoveParamAutomation,
+}: {
+  node: HfAudioFxNode;
+  def: HfAudioFxDef;
+  index: number;
+  disabled: boolean;
+  automatedTargets?: ReadonlySet<string>;
+  liveAutomationValues?: ReadonlyMap<string, number>;
+  onUpdate(index: number, patch: Partial<HfAudioFxNode>): void;
+  onPreview(index: number, params: HfAudioFxParamValues): void;
+  onAutomateParam?(nodeId: string, paramKey: string): void;
+  onRemoveParamAutomation?(nodeId: string, paramKey: string): void;
+}) {
+  const nodeId = node.id;
+  // Lanes address a node by id; the controls know their own parameter keys. This
+  // is the one place that translation belongs.
+  const liveValues = ((): Map<string, number> | undefined => {
+    if (!nodeId || !liveAutomationValues?.size) return undefined;
+    const byKey = new Map<string, number>();
+    for (const param of def.params) {
+      const live = liveAutomationValues.get(fxAutomationTarget(nodeId, param.key));
+      if (live !== undefined) byKey.set(param.key, live);
+    }
+    return byKey;
+  })();
+  return (
+    <FxParams
+      def={def}
+      params={node.params ?? defaultAudioFxParams(node.type)}
+      liveValues={liveValues}
+      disabled={disabled}
+      onChange={(params: HfAudioFxParamValues) => onPreview(index, params)}
+      onCommit={(params: HfAudioFxParamValues) => onUpdate(index, { params })}
+      automatedKeys={automatedKeysOf(node, def.params, automatedTargets)}
+      onAutomate={nodeId && onAutomateParam ? (key) => onAutomateParam(nodeId, key) : undefined}
+      onRemoveAutomation={
+        nodeId && onRemoveParamAutomation
+          ? (key) => onRemoveParamAutomation(nodeId, key)
+          : undefined
+      }
+    />
+  );
+}
+
+/** One effect in the chain: its header controls, and its knobs when open. */
+export function FxNodeRow({
+  node,
+  index,
+  automatedTargets,
+  liveAutomationValues,
+  onAutomateParam,
+  onRemoveParamAutomation,
+  open,
+  last,
+  disabled,
+  onToggleOpen,
+  onUpdate,
+  onMove,
+  onRemove,
+  onPreview,
+}: FxNodeRowProps) {
+  const def = getAudioFxDef(node.type);
+  if (!def) return null;
+  const bypassed = node.enabled === false;
+  return (
+    <div
+      className={`hf-fx-node rounded-[4px] border border-panel-border-input${bypassed ? " opacity-50" : ""}`}
+      data-fx-node={node.type}
+    >
+      <FxNodeHeader
+        // The node's own job name when a preset gave it one: a chain that cuts
+        // mud and then lifts clarity must not show "Peaking EQ" twice.
+        label={node.label ?? def.label}
+        open={open}
+        bypassed={bypassed}
+        first={index === 0}
+        last={last}
+        disabled={disabled}
+        onToggleOpen={onToggleOpen}
+        onToggleBypass={() => onUpdate(index, { enabled: bypassed })}
+        onMove={(delta) => onMove(index, delta)}
+        onRemove={() => onRemove(index)}
+      />
+      {open ? (
+        <FxNodeParams
+          node={node}
+          def={def}
+          index={index}
+          disabled={Boolean(disabled) || bypassed}
+          automatedTargets={automatedTargets}
+          liveAutomationValues={liveAutomationValues}
+          onUpdate={onUpdate}
+          onPreview={onPreview}
+          onAutomateParam={onAutomateParam}
+          onRemoveParamAutomation={onRemoveParamAutomation}
+        />
+      ) : null}
+    </div>
+  );
+}