@hyperframes/studio 0.7.107 → 0.7.108

package/src/components/editor/propertyPanelFxAddMenu.tsx

@@ -0,0 +1,209 @@
+/**
+ * The add-effect shelf: Tone, the composite jobs, and the raw registry.
+ *
+ * Split out of `propertyPanelFxSection.tsx`'s `{adding ? (...) : null}` block —
+ * the section owns the audition/chain plumbing this shelf drives, and passes it
+ * straight through.
+ */
+
+import {
+  getAudioFxDef,
+  HF_AUDIO_FX,
+  type HfAudioFxChain,
+  type HfAudioFxGroup,
+} from "@hyperframes/core/audio-fx";
+import {
+  HF_AUDIO_FX_JOBS,
+  HF_AUDIO_FX_JOB_TYPES,
+  type HfAudioFxJob,
+} from "@hyperframes/core/audio-fx-jobs";
+import { EFFECT_COPY } from "@hyperframes/core/audio-fx-copy";
+
+const GROUP_ORDER: HfAudioFxGroup[] = ["filter", "dynamics", "nonlinear", "time"];
+const GROUP_LABEL: Record<HfAudioFxGroup, string> = {
+  filter: "Filters",
+  dynamics: "Dynamics",
+  nonlinear: "Non-linear",
+  time: "Time",
+};
+
+/**
+ * The add menu, with the jobs standing in for the effect they are made of.
+ *
+ * `peaking` is not offered as itself: picking it is picking a machine and
+ * leaving the real decision — which range — for afterwards. The jobs are that
+ * decision, already made. See `audioFxJobs.ts`.
+ *
+ * Computed once at module scope, not per render: it has no dependency on props
+ * or state, just the static effect registry.
+ */
+const GROUPED = GROUP_ORDER.map((g) => ({
+  group: g,
+  defs: HF_AUDIO_FX.filter((d) => d.group === g && !HF_AUDIO_FX_JOB_TYPES.has(d.id)),
+  jobs: HF_AUDIO_FX_JOBS.filter((job) => getAudioFxDef(job.type)?.group === g),
+}));
+
+export interface FxAddMenuProps {
+  disabled?: boolean;
+  analysing?: boolean;
+  levelled?: boolean;
+  auditioningLevel?: boolean;
+  /** Measure this track and write the levelling lane. Absent when unavailable. */
+  onLevel?(): void;
+  /** Take the levelling stage and its lane back out. */
+  onRemoveLevel?(): void;
+  onEq(): void;
+  onJob(job: HfAudioFxJob): void;
+  onEffect(type: string): void;
+  /** The shelf just picked something, or the levelling button did its own close. */
+  onClose(): void;
+  /** Play a hypothetical chain without committing to it, or `null` to stop. */
+  audition(make: ((base: HfAudioFxChain) => HfAudioFxChain) | null): void;
+  onAuditionLevel?(on: boolean): void;
+  withJob(base: HfAudioFxChain, job: HfAudioFxJob): HfAudioFxChain;
+  withEffect(base: HfAudioFxChain, type: string): HfAudioFxChain;
+}
+
+/** The shelf `adding` opens: Tone, the named jobs, and the raw effect registry. */
+export function FxAddMenu({
+  disabled,
+  analysing,
+  levelled,
+  auditioningLevel,
+  onLevel,
+  onRemoveLevel,
+  onEq,
+  onJob,
+  onEffect,
+  onClose,
+  audition,
+  onAuditionLevel,
+  withJob,
+  withEffect,
+}: FxAddMenuProps) {
+  return (
+    <div
+      className="hf-fx-add-menu space-y-1.5 rounded-[4px] border border-panel-border-input p-1.5"
+      // On the shelf, not on each button: moving between two of them passes
+      // through the gap, and a per-button leave would revert on the way.
+      onMouseLeave={() => {
+        audition(null);
+        onAuditionLevel?.(false);
+      }}
+      // The keyboard's version of leaving. Tabbing between two entries fires
+      // this and then the next one's focus, so it reverts and re-auditions.
+      onBlur={() => {
+        audition(null);
+        onAuditionLevel?.(false);
+      }}
+    >
+      <div className="hf-fx-add-group flex flex-wrap items-center gap-1">
+        <span className="hf-fx-add-group-label w-full font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
+          Tone
+        </span>
+        {onLevel ? (
+          <button
+            type="button"
+            className="hf-fx-add-composite rounded-[3px] bg-panel-surface px-1.5 py-0.5 text-[10px] text-panel-text-1 hover:text-panel-text-0"
+            title="Listen to this track and even out its loud and quiet parts."
+            disabled={disabled || analysing}
+            onClick={() => {
+              if (levelled) onRemoveLevel?.();
+              else onLevel();
+              onClose();
+            }}
+            // The one module here that cannot answer instantly: it has to
+            // decode the track and measure it before there is anything to
+            // hear. So it says it is working rather than doing nothing
+            // visible, and whoever handles this must drop a result that
+            // arrives after the pointer has gone.
+            onMouseEnter={
+              levelled
+                ? undefined
+                : () => {
+                    audition(null);
+                    onAuditionLevel?.(true);
+                  }
+            }
+            onFocus={levelled ? undefined : () => onAuditionLevel?.(true)}
+          >
+            {levelled ? "Remove levelling" : "Even Out Levels"}
+            {auditioningLevel ? <span className="hf-fx-add-working"> measuring…</span> : null}
+          </button>
+        ) : null}
+        <button
+          type="button"
+          // Not hf-fx-add-item: Tone is a composite over several filters, not
+          // an entry in the effect registry, and a count of the registry must
+          // not include it.
+          className="hf-fx-add-composite rounded-[3px] bg-panel-surface px-1.5 py-0.5 text-[10px] text-panel-text-1 hover:text-panel-text-0"
+          title="Bass, middle and treble on one set of faders."
+          // No audition of its own: a Tone module arrives with every band at
+          // 0 dB, so there is nothing to hear until a fader moves, and a hover
+          // that changes nothing teaches that hovering does nothing. It still
+          // has to call the neighbours' auditions off.
+          onMouseEnter={() => {
+            audition(null);
+            onAuditionLevel?.(false);
+          }}
+          onClick={onEq}
+        >
+          Tone (EQ)
+        </button>
+      </div>
+      {GROUPED.map(({ group, defs, jobs }) => (
+        <div key={group} className="hf-fx-add-group flex flex-wrap items-center gap-1">
+          <span className="hf-fx-add-group-label w-full font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
+            {GROUP_LABEL[group]}
+          </span>
+          {jobs.map((job) => (
+            <button
+              key={job.id}
+              type="button"
+              // Same class as any other entry: a job IS an effect, and one
+              // that looked special would read as a preset rather than as the
+              // thing the author is about to add.
+              className="hf-fx-add-item rounded-[3px] bg-panel-surface px-1.5 py-0.5 text-[10px] text-panel-text-1 hover:text-panel-text-0"
+              title={job.does}
+              onClick={() => onJob(job)}
+              onMouseEnter={() => {
+                onAuditionLevel?.(false);
+                audition((base) => withJob(base, job));
+              }}
+              onFocus={() => audition((base) => withJob(base, job))}
+            >
+              {job.label}
+            </button>
+          ))}
+          {defs.map((d) => (
+            <button
+              key={d.id}
+              type="button"
+              className="hf-fx-add-item rounded-[3px] bg-panel-surface px-1.5 py-0.5 text-[10px] text-panel-text-1 hover:text-panel-text-0"
+              // The menu that adds it has to call it what the rack will call
+              // it, or the author picks "High-pass" and a module named
+              // "Remove Rumble" appears. The registry's own description stays
+              // as the tooltip beside the plain one: the mechanism is taught
+              // here rather than withheld.
+              title={EFFECT_COPY[d.id] ? `${EFFECT_COPY[d.id]?.does} (${d.label})` : d.description}
+              onClick={() => onEffect(d.id)}
+              // Cancels the levelling audition as well as starting its own.
+              // The shelf's leave handler only fires on the way OUT of the
+              // menu, so sliding from Even Out Levels straight to here left a
+              // measurement in flight — and it landed on top of this one, a
+              // levelled version of the chain as it was, written through a
+              // channel the document never sees.
+              onMouseEnter={() => {
+                onAuditionLevel?.(false);
+                audition((base) => withEffect(base, d.id));
+              }}
+              onFocus={() => audition((base) => withEffect(base, d.id))}
+            >
+              {EFFECT_COPY[d.id]?.title ?? d.label}
+            </button>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/editor/propertyPanelFxBandRuler.tsx

@@ -0,0 +1,72 @@
+/**
+ * The shared frequency ruler.
+ *
+ * Frequencies mean nothing to somebody who has not been taught them, and the
+ * rack speaks entirely in them. `BANDS` names the ranges in the words the same
+ * person would use unprompted — rumble, weight, mud, middle, presence, edge,
+ * air — and every spectral module shows where it acts on this one ruler, so
+ * naming them once teaches them everywhere they appear.
+ *
+ * Two things at once, deliberately. The bar says where this module works
+ * relative to everything else, which is the spatial fact; the caption under it
+ * names the range and what lives there, which is the vocabulary. A bar alone
+ * would be decoration and a caption alone would not teach the shape.
+ *
+ * Log-spaced, because hearing is: 20–200 Hz is as much of the range to an ear as
+ * 2–20 kHz, and a linear ruler would crush six of the seven bands into a corner.
+ */
+
+import { audioBandAt, BANDS } from "@hyperframes/core/audio-fx-copy";
+
+const LOW = BANDS[0]?.from ?? 20;
+const HIGH = BANDS.at(-1)?.to ?? 20000;
+
+/** Where a frequency sits across the ruler, 0..1. */
+function positionOf(hz: number): number {
+  const span = Math.log10(HIGH) - Math.log10(LOW);
+  const at = (Math.log10(Math.min(HIGH, Math.max(LOW, hz))) - Math.log10(LOW)) / span;
+  return Math.min(1, Math.max(0, at));
+}
+
+export interface FxBandRulerProps {
+  /** The range this effect can act over, from its copy. */
+  band: readonly [number, number];
+  /** Where it is acting right now. */
+  at: number;
+}
+
+export function FxBandRuler({ band, at }: FxBandRulerProps) {
+  const here = audioBandAt(at);
+  if (!here) return null;
+  const [from, to] = band;
+  return (
+    <div className="hf-fx-ruler px-1.5 pb-1" data-band={here.name}>
+      <div className="hf-fx-ruler-bar relative flex h-1 w-full overflow-hidden rounded-[1px]">
+        {BANDS.map((range) => {
+          // Reachable at all, and where it is now: a module that can only work in
+          // the bottom three bands should not look like it could move anywhere.
+          const reachable = range.to > from && range.from < to;
+          return (
+            <span
+              key={range.name}
+              title={`${range.name} — ${range.says}`}
+              className={
+                range.name === here.name
+                  ? "hf-fx-ruler-band bg-panel-accent"
+                  : reachable
+                    ? "hf-fx-ruler-band bg-panel-text-4/50"
+                    : "hf-fx-ruler-band bg-panel-text-4/15"
+              }
+              style={{
+                width: `${(positionOf(range.to) - positionOf(range.from)) * 100}%`,
+              }}
+            />
+          );
+        })}
+      </div>
+      <p className="hf-fx-ruler-label truncate pt-0.5 text-[9px] text-panel-text-2">
+        <span className="hf-fx-ruler-name text-panel-text-1">{here.name}</span> — {here.says}
+      </p>
+    </div>
+  );
+}

package/src/components/editor/propertyPanelFxCarveModule.tsx

@@ -0,0 +1,382 @@
+/**
+ * The voiceover carve, as one module in the FX rack.
+ *
+ * Carve is deliberately not an entry in the chain. It is a relationship between
+ * two tracks — it analyses a voice and dips *this* bed where that voice sits —
+ * so it gets its own card with a source picker, the way a sidechain control
+ * lives on the track being processed. What it produces is an ordinary chain of
+ * peaking filters, so it composes with whatever else is on the track.
+ */
+
+import {
+  defaultAudioFxParams,
+  getAudioFxDef,
+  type HfAudioFxNode,
+  type HfAudioFxParam,
+} from "@hyperframes/core/audio-fx";
+import { DEFAULT_CARVE, type HfCarveSettings } from "@hyperframes/core/audio-carve";
+import { fxAutomationTarget } from "@hyperframes/core/audio-automation";
+import { FxParamRow } from "./propertyPanelFxControls.js";
+import { FX_FAMILY_TYPE, fxFamilyTint } from "./propertyPanelFxFamily.js";
+import { fxTintWash } from "./propertyPanelFxPresetStyle.js";
+// Shared with the timeline's lane labels: a band is named by its frequency in
+// both places, and two formatters would drift.
+import { formatHz } from "../../player/components/automationLaneData";
+
+export interface AudioTrackOption {
+  id: string;
+  label: string;
+}
+
+/** What one effect inside the module is called: its own name, plus the band. */
+function carveMemberName(node: HfAudioFxNode): string {
+  const def = getAudioFxDef(node.type);
+  const freq = node.params?.["frequency"];
+  const label = def?.label ?? node.type;
+  return typeof freq === "number" ? `${label} ${formatHz(freq)}` : label;
+}
+
+/** A parameter's value as the rack shows it: rounded to the step, with its unit. */
+function formatParamValue(param: HfAudioFxParam, raw: number | string | undefined): string {
+  if (param.kind !== "number" || typeof raw !== "number") return String(raw ?? "");
+  const places = param.step >= 1 ? 0 : param.step >= 0.1 ? 1 : 2;
+  return `${Number(raw.toFixed(places))}${param.unit ? ` ${param.unit}` : ""}`;
+}
+
+/**
+ * Width to reserve for a parameter's value, in characters.
+ *
+ * Derived from what the parameter CAN read rather than what it currently reads, so
+ * the column never moves: an automated value updates 30 times a second, and
+ * `-1 dB` is two characters narrower than `-3.2 dB`, which was enough to shunt
+ * everything after it sideways on every frame. `ch` is exact here because the
+ * readouts are monospace and already `tabular-nums`.
+ */
+function paramValueWidthCh(param: HfAudioFxParam): number {
+  if (param.kind === "enum") {
+    return Math.max(1, ...param.options.map((option) => option.value.length));
+  }
+  const places = param.step >= 1 ? 0 : param.step >= 0.1 ? 1 : 2;
+  const digits = Math.max(
+    String(Math.floor(Math.abs(param.min))).length,
+    String(Math.floor(Math.abs(param.max))).length,
+  );
+  const sign = param.min < 0 ? 1 : 0;
+  const decimals = places > 0 ? places + 1 : 0;
+  const unit = param.unit ? param.unit.length + 1 : 0;
+  return sign + digits + decimals + unit;
+}
+
+/** One member of the module: what it is, and what every knob is set to. */
+function FxCarveMember({
+  node,
+  automatedTargets,
+  liveAutomationValues,
+}: {
+  node: HfAudioFxNode;
+  automatedTargets?: ReadonlySet<string>;
+  liveAutomationValues?: ReadonlyMap<string, number>;
+}) {
+  const def = getAudioFxDef(node.type);
+  if (!def) return null;
+  const params = node.params ?? defaultAudioFxParams(node.type);
+  return (
+    <div className="hf-fx-carve-member flex flex-col gap-0.5 py-1 pl-3 pr-1.5">
+      <span className="hf-fx-carve-member-name truncate font-mono text-[9px] text-panel-text-1">
+        {carveMemberName(node)}
+      </span>
+      <div className="flex flex-wrap gap-x-3 gap-y-0.5">
+        {def.params.map((param) => {
+          const target = node.id ? fxAutomationTarget(node.id, param.key) : null;
+          const automated = Boolean(target && automatedTargets?.has(target));
+          // The envelope's value at the playhead when there is one, which is what
+          // the audio is using; the stored number is only the seed behind it.
+          const live = target ? liveAutomationValues?.get(target) : undefined;
+          const driven = automated && live !== undefined;
+          const value = formatParamValue(param, driven ? live : params[param.key]);
+          return (
+            <span
+              key={param.key}
+              className="flex items-baseline gap-1 font-mono text-[9px] text-panel-text-2"
+              {...(automated ? { "data-automated": "" } : {})}
+              {...(driven ? { "data-automation-live": "" } : {})}
+            >
+              <span className="text-panel-text-2">{param.label}</span>
+              <span
+                className="tabular-nums text-panel-text-1"
+                style={{ minWidth: `${paramValueWidthCh(param)}ch` }}
+              >
+                {value}
+              </span>
+              {/* The lane is where an automated value comes from, and where it is
+                  edited — saying so is the difference between a stale readout and
+                  a pointer to the thing that owns it. */}
+              {automated ? <span className="text-[#3CE6AC]">A</span> : null}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The carve, as one module in the rack.
+ *
+ * A carve is one thing the author switched on; the peaking filters and the level
+ * stage are how it is built. Listed individually they read as hand-built effects —
+ * removable one at a time, reorderable, each with knobs the next strength change
+ * silently overwrites. So the rack shows the unit, and the unit owns everything
+ * that means anything for it: which voice it listens to, how hard it works,
+ * whether it follows that voice, and what the analysis made of it.
+ *
+ * The controls used to sit in their own block under the rack, which read as a
+ * second, unrelated feature that happened to produce effects somewhere else. One
+ * card, controls above the analysis they drive, is the same thing said once.
+ *
+ * Grouped is not hidden. Opening it lists every effect inside with all of its
+ * settings, because an author has to be able to see where the analysis landed — as
+ * readouts rather than controls, since strength is what sets them and a knob here
+ * would be overwritten by the next adjustment.
+ */
+export function FxCarveModule({
+  nodes,
+  carve,
+  sourceOptions,
+  automatedTargets,
+  liveAutomationValues,
+  open,
+  disabled,
+  analysing,
+  onToggleOpen,
+  onCarveChange,
+  onCarvePreview,
+}: {
+  nodes: HfAudioFxNode[];
+  carve: HfCarveSettings;
+  sourceOptions: AudioTrackOption[];
+  automatedTargets?: ReadonlySet<string>;
+  liveAutomationValues?: ReadonlyMap<string, number>;
+  open: boolean;
+  disabled?: boolean;
+  analysing?: boolean;
+  onToggleOpen(): void;
+  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";
+  // 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
+  // that LISTENS to another track, and a plain row understates that. It stays
+  // in the smart family's monospace — what it shows is a readout, and a
+  // display face would promise settings the author chose.
+  const tint = fxFamilyTint({ type: "carve", fromCarve: true });
+  const wash = fxTintWash(tint);
+  return (
+    <div
+      className={`hf-fx-node hf-fx-carve-module hf-fx-carve rounded-[4px] border border-l-2 border-panel-border-input${
+        on ? "" : " opacity-50"
+      }`}
+      data-fx-node="carve"
+      data-fx-family="smart"
+      // Smart, like the Tone EQ and the leveller: it measures the audio and
+      // writes its own settings, and what it shows is a readout of what it
+      // decided rather than controls the author set.
+      style={{ borderLeftColor: tint, ...(wash ? { backgroundColor: wash } : {}) }}
+      data-carve-enabled={on ? "" : undefined}
+    >
+      <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 min-w-0 flex-1 truncate text-left text-[13px] uppercase hover:opacity-80 ${FX_FAMILY_TYPE.smart}`}
+          // Tracking goes here rather than in a class: the smart family already
+          // 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" }}
+          aria-expanded={open}
+          onClick={onToggleOpen}
+        >
+          Voiceover carve
+        </button>
+        <span className="hf-fx-carve-summary shrink-0 font-mono text-[9px] text-panel-text-2">
+          {summary}
+        </span>
+        {/* One switch, not a bypass and a delete. Off drops the effects and the
+            envelopes it wrote, and is remembered — otherwise the default would
+            re-apply the carve the next time this clip was selected. */}
+        <button
+          type="button"
+          className="hf-fx-bypass hf-fx-carve-toggle rounded-[3px] border border-panel-border-input px-1.5 py-0.5 font-mono text-[9px] text-panel-text-2 hover:text-panel-text-0 disabled:opacity-40"
+          aria-pressed={on}
+          title={on ? "Switch the carve off" : "Switch the carve on"}
+          disabled={disabled}
+          onClick={() => onCarveChange({ ...carve, enabled: !on })}
+        >
+          {on ? "On" : "Off"}
+        </button>
+      </div>
+      {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>
+            {/* 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
+                hard one is deeper in more with more — so the panel sets the strength
+                and `carveProfile` derives the six numbers the analysis works in. */}
+            <FxParamRow
+              param={{
+                kind: "number",
+                key: "strength",
+                label: "Strength",
+                unit: "",
+                min: 0,
+                max: 1,
+                step: 0.05,
+                default: DEFAULT_CARVE.strength,
+                hint: "How hard to carve: deeper cuts, in more bands, and more room made by dropping the bed's level under the voice. At 0 it carves frequencies only. Moving this re-runs the analysis on what is already here.",
+              }}
+              value={carve.strength}
+              disabled={disabled || carve.sources.length === 0}
+              onChange={(_k, v) => onCarvePreview({ ...carve, strength: Number(v) })}
+              onCommit={(_k, v) => onCarveChange({ ...carve, strength: Number(v) })}
+            />
+          </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. */}
+          {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>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}