Files
hyperframes/packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx
T
Vance IngallsandClaude Opus 5 e3ec48adce feat(studio): fold a preset shut, and give each one its own title design (#3191)
* fix(studio): close the typecheck and fallow gaps wa-18b-reschedule opened

useAutomationLanes.ts's write() assumed gesture-scoped coalescing and a
preview-only commit that useDomEditAttributeCommits.ts never grew — backported
that option support from its own later commit so the two sides of the API
agree. The paste path and its tests were missing the box selection's v0/v1
bounds a sibling commit added to AutomationSelection. The FX panel's carve
controls still edited the six mechanism numbers (maxCutDb, bands,
intelligibilityBias) after carveProfile() collapsed authoring to one Strength
knob, so those fields no longer existed on HfCarveSettings; UI now edits
strength, and analyseCarveBands is called with carveProfile(strength).

Also closes fallow's complexity, dead-code and duplication findings on this
PR's diff: extracted automationLaneDragMath.ts (pure group/point-move math)
and useAutomationRangeDrag.ts (the marquee-select gesture) out of
useAutomationLaneGestures.ts, pulled a couple of render-loop ternaries and a
resolver into named functions, dropped an export nothing outside its file
used, and shared a step-simplifier between audioCarve's two envelope
builders.

The edge-stretch vs. box-select priority test in TimelineAutomationLane.test
was still pinning the pre-box-select rule (edge wins over a point sitting on
it) that a sibling commit deliberately reversed — a point inside the box is
now selected content, so grabbing it drags the group instead. Updated the
test to the shipped rule instead of the old one.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix(core): cap the via conic's weight so an edge-clamped via point can't NaN

A via point pulled out past the segment (viaX: 5, viaY: -3) clamps to
(0.999, 0.001) — exactly on the steady region's edge, where edge - viaX is 0.
viaConic divided by that zero to get an infinite weight, and shapeVia turned
Infinity into NaN a few steps later (Infinity - Infinity in the quadratic
coefficient). NaN reaching setValueCurveAtTime silences the automated
parameter for the rest of the render.

Capped the weight at 1e6 instead of leaving it unbounded — past that point
the arc already reads as touching the via point, so nothing visible is lost.
Also hardened shapeVia's existing denominator guard (`<= 0`) to `!(> 0)`,
since NaN fails the original comparison and fell through it.

Review by Miga (PR #3208).

* fix(studio-server): fingerprint the proactive waveform cache key too

The route already keys the waveform cache on the asset's size and mtime as
well as its path, so a rebuilt-in-place file gets fresh peaks instead of
stale ones. generateWaveformCache — the proactive path that runs on upload —
still called buildWaveformCacheKey with the path alone, so it wrote to a
different key than the route reads from (making the pre-generated cache
never found) and kept the exact collision bug this fingerprint exists to fix
on its own path.

Review by Miga (PR #3211).

* style(docs): run oxfmt on the /hyperframes-audio skill docs

Table column widths had drifted out of alignment with oxfmt's own rules,
failing format:check and blocking the Preflight gate every downstream
branch inherits. Whitespace only, no content change.

* fix(core): stop \b from missing underscore-separated names, guard clipsOverlap's negative duration

\b treats `_` as a word character, so \bbed\b never matched bed_01,
music_bed_loop, or theme_song, and \bvo\b/\bvox\b/\btts\b had the same gap —
an underscore-separated bed classified as "unknown" and could end up offered
as its own carve source. Replaced the short hints with a boundary that
actually excludes letters and digits on both sides.

clipsOverlap computed end = start + duration without guarding sign, so a
negative duration put end before start — an interval that does not describe
anything, and one specific case showed it silently dropping a real overlap
(a shorter, earlier broken end rejected a clip that genuinely contained the
point). Duration clamps to zero instead: a clip cannot un-play time, and a
zero-length clip at its start is the sane reading of "duration nobody wrote
down as positive."

Review by Miga (PR #3212).

* fix(studio): widen PropertyPanel's resetModules render timeout again

The 20s margin (already once widened for the same reason) is timing out in
CI's full-monorepo Test run — the resetModules()+fresh-import render this
test needs is uncached and competes with every other package's test suite
for the same worker pool, and the same test passes in well under 2s
standalone. Went to 45s rather than re-tuning to whatever number happens to
clear the current CI load, since that number moves every time CI gains a
package.

* fix(studio): stop the single-candidate auto-apply carve firing twice

Two auto-apply effects both fire when sourceOptions.length === 1: the
multi-candidate effect only guards length === 0, so a single candidate
passes it too, and the single-candidate effect passes its own guard right
after — both compute the same sources list and both call setCarve, so the
common case (one narrator, one bed) triggered two decodes, two FFT runs, and
two concurrent attribute writes for one decision.

The multi-candidate effect now defers to its sibling for exactly one
candidate, which already has its own detailed handling for that case.

Review by Miga (PR #3213).

* feat(core): carve against every voice over a bed, always (#3212)

* feat(core): carve against every voice over a bed, always dynamically

A bed usually runs under a whole sequence — a narrator, an interview answer, a
second presenter — and carving against one of them left the others fighting it.
`source` becomes `sources`, and `mixCarveSources` sums every voice onto the BED's
clock before anything is measured. That is what keeps one analysis sufficient: the
chain is fixed, so there is no per-voice filter to switch between, and bands drawn
from all the speech there is with envelopes that rise wherever any of it happens
answer the actual question — where and when is speech masking this bed.

Summed rather than averaged: two people talking at once mask more than either
alone. Audio before the bed starts is dropped rather than folded in at zero, since
it plays over nothing and shifting it would put a cut where there is no voice.

`dynamic` is gone. A fixed depth thins the bed through every pause, and once both
have been heard there is no reason to want it, so every carve follows the speech.

Two helpers the panel and the headless script now share instead of each carrying a
copy — two definitions of "what does this name suggest" drift, and then the two
disagree about which track is the voice:

- `classifyAudioName` reads a track's kind from its id and filename together.
  `unknown` is deliberately common: treating an unrecognised name as "not a voice"
  would hide the one track somebody needs to pick.
- `clipsOverlap` keeps out a voice that never plays while the bed does. An unwritten
  duration counts as unbounded, not zero — refusing a clip whose length the
  composition leaves to the media would drop the commonest case there is.

Files written before this still load: a single `source` reads as a one-voice list,
a stored `dynamic` is ignored, and an absent attribute means the defaults whole.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix(core): stop \b from missing underscore-separated names, guard clipsOverlap's negative duration

\b treats `_` as a word character, so \bbed\b never matched bed_01,
music_bed_loop, or theme_song, and \bvo\b/\bvox\b/\btts\b had the same gap —
an underscore-separated bed classified as "unknown" and could end up offered
as its own carve source. Replaced the short hints with a boundary that
actually excludes letters and digits on both sides.

clipsOverlap computed end = start + duration without guarding sign, so a
negative duration put end before start — an interval that does not describe
anything, and one specific case showed it silently dropping a real overlap
(a shorter, earlier broken end rejected a clip that genuinely contained the
point). Duration clamps to zero instead: a clip cannot un-play time, and a
zero-length clip at its start is the sane reading of "duration nobody wrote
down as positive."

Review by Miga (PR #3212).

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix(studio): port the carve UI off the removed source/dynamic fields

#3212 (accidentally squash-merged into this branch instead of main) changed
HfCarveSettings from a single `source` + `dynamic` toggle to a `sources`
list with dynamic mode removed outright — the multi-voice UI consumer that
goes with that shape lands in the very next PR, so this branch was left with
a type that no longer matched its own code.

Minimal port, not the multi-voice redesign that PR does properly: the
"Listen to" picker and analyse() treat sources[0] as the one voice this UI
still understands, and every dynamic-mode branch (the automated envelope
lanes, the toggle, the checkbox) is gone along with the field — a carve is
now always the static value the analysis computes, matching what the type
change made permanent. Test suite trimmed the same way: the automation-lane
and toggle tests covered behavior that no longer exists.

* chore: fix markdown formatting

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-13 13:53:29 -07:00

383 lines
17 KiB
TypeScript

/**
* 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>
);
}