fix(studio): the shared-row follow-ups (#3215)

* fix(core): dedupe the wet/dry mix math between delayFeedback and chorusLfo

Both effect builders set wet.gain to the mix and dry.gain to its complement
in identical two-line blocks; fallow kept re-flagging it as a 10-line clone
on every unrelated change. Extracted setWetDryMix.

* fix(core): remove the build-audio-fx-runtime.ts stray resurrected by a main merge

An earlier merge with main brought this deleted file back (git's merge/delete
handling on an unchanged-on-one-side file); package.json already points at
build-inline-artifact.ts, so it sat unreachable and duplicating that file's
config, both of which fallow flagged.

* fix(studio): pull TimelineLanes under the 600-line cap

TimelineLanes.tsx hit 620 lines. Extracted the three per-clip pointer
gestures (resize-start, pointer-down move-arm, click/razor-split) into
createClipGestureHandlers — one factory call per rendered clip instead of
~120 lines of inline handler bodies in the render loop. 529 lines now.

* fix(studio): split the extracted pointerdown handler under the CRAP threshold

Moving the ~120-line gesture logic into timelineClipGestureHandlers.ts
concentrated it into two functions fallow flagged (onPointerDown at CRAP
63.6, onResizeStart at 31.6). Split the decision logic (which gesture a
pointerdown implies) into a pure resolvePointerDownAction, then split
its own intent-blocking check into isIntentBlocked. onResizeStart's guard
moved into canStartResize. Every function now scores under 30.

* fix(studio): drop the unused DomEditSelection import in PropertyPanelFlat

CI caught it on PR #3026 (wa-12-panel-params); a later refactor in the
stack removed the last use of the type here without removing the import.

* 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.

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-08-13 03:16:35 -07:00
committed by GitHub
co-authored by Claude Opus 5
parent 9b18fa7a26
commit df57ad4bac
18 changed files with 913 additions and 71 deletions
@@ -1114,15 +1114,21 @@ describe("AudioFxGroup carve source list", () => {
}); });
it("keeps the picker when the stored voice is not among the candidates", () => { it("keeps the picker when the stored voice is not among the candidates", () => {
// The stored track was renamed, or classifies as music now. Reading the one // The stored track is still there but no longer classifies as a voice.
// remaining candidate out would quietly claim the carve listens to it. // Reading the one remaining candidate out would quietly claim the carve
// listens to it. (A stored track that is GONE is a different case — see the
// deleted-voice tests, which re-analyse rather than sit on a measurement of
// something that is not there.)
const bed = document.createElement("audio"); const bed = document.createElement("audio");
bed.id = "bed"; bed.id = "bed";
bed.setAttribute( bed.setAttribute(
"data-fx-carve", "data-fx-carve",
JSON.stringify({ enabled: true, sources: ["gone"], strength: 0.25 }), JSON.stringify({ enabled: true, sources: ["backing-music"], strength: 0.25 }),
); );
document.body.append(bed); document.body.append(bed);
const stored = document.createElement("audio");
stored.id = "backing-music";
document.body.append(stored);
const voice = document.createElement("audio"); const voice = document.createElement("audio");
voice.id = "narration"; voice.id = "narration";
document.body.append(voice); document.body.append(voice);
@@ -1136,7 +1142,7 @@ describe("AudioFxGroup carve source list", () => {
dataAttributes: { dataAttributes: {
"fx-carve": JSON.stringify({ "fx-carve": JSON.stringify({
enabled: true, enabled: true,
sources: ["gone"], sources: ["backing-music"],
strength: 0.25, strength: 0.25,
}), }),
}, },
@@ -1310,3 +1316,154 @@ describe("AudioFxGroup carve across tracks", () => {
]); ]);
}); });
}); });
/**
* The filters and envelopes a carve produces are a MEASUREMENT of specific
* tracks. Delete one and they describe something nobody can hear any more — the
* bed keeps ducking for a voice that is gone.
*/
describe("AudioFxGroup carve against a deleted voice", () => {
const CARVED_CHAIN = JSON.stringify({
version: 1,
nodes: [
{ type: "peaking", id: "c1", enabled: true, fromCarve: true, params: { frequency: 1000 } },
{ type: "lowpass", id: "k1", enabled: true, params: { frequency: 8000 } },
],
});
const CARVED_AUTOMATION = JSON.stringify({
version: 1,
lanes: [
{ target: "fx.c1.gain", points: [{ t: 0, v: -6 }] },
{ target: "fx.k1.frequency", points: [{ t: 0, v: 8000 }] },
],
});
/**
* A bed carving against `sources`, with only `present` still in the composition.
*
* The timeline is what says a track is gone — not the preview DOM, which keeps
* a deleted element around — so the store is seeded and the document is left
* holding every track, which is exactly the mismatch the studio produces.
*/
function mountCarved(sources: string[], present: string[]) {
const carve = JSON.stringify({ enabled: true, sources, strength: 0.25 });
const bed = document.createElement("audio");
bed.id = "bed";
document.body.append(bed);
for (const id of new Set([...sources, ...present])) {
const el = document.createElement("audio");
el.id = id;
document.body.append(el);
}
usePlayerStore.setState({
elements: [
{ id: "bed", tag: "audio", start: 0, duration: 10, track: 0 },
...present.map((id) => ({ id, tag: "audio", start: 0, duration: 10, track: 1 })),
] as never,
});
const onSetAttributeQuiet = vi.fn();
const host = document.createElement("div");
document.body.append(host);
act(() => {
createRoot(host).render(
<AudioFxGroup
element={
{
dataAttributes: {
"fx-carve": carve,
"fx-chain": CARVED_CHAIN,
automation: CARVED_AUTOMATION,
},
id: "bed",
element: bed,
} as unknown as DomEditSelection
}
onSetAttributeQuiet={onSetAttributeQuiet}
onSetAttributeLive={vi.fn()}
/>,
);
});
return { host, onSetAttributeQuiet };
}
it("re-analyses against the voices that are left", () => {
// Two voices were measured together into one set of bands. With one gone that
// set answers a question nobody asked; the survivor has to be measured again.
const { onSetAttributeQuiet } = mountCarved(["narration", "guest"], ["narration"]);
const write = writeTo(onSetAttributeQuiet.mock.calls, "data-fx-carve");
expect(JSON.parse(String(write![1]))).toMatchObject({
enabled: true,
sources: ["narration"],
});
});
it("leaves a carve alone while every voice it names is still there", () => {
const { onSetAttributeQuiet } = mountCarved(["narration", "guest"], ["narration", "guest"]);
expect(onSetAttributeQuiet.mock.calls.some((c) => c[0] === "data-fx-carve")).toBe(false);
});
it("does not fall back to carving against an effect when no voice is left", async () => {
// Found in the studio, not here: deleting the narration emptied the source
// list, and the panel filled it again with the only audio in the composition
// — a 200 ms explosion. The picker's fallback (offer everything rather than
// hide the track somebody needs) is for the AUTHOR to choose from. The panel
// choosing off it is the panel deciding, and that is never the answer.
const carve = JSON.stringify({ enabled: true, sources: [], strength: 0.25 });
const bed = document.createElement("audio");
bed.id = "bed";
bed.setAttribute("data-fx-carve", carve);
document.body.append(bed);
const sfx = document.createElement("audio");
sfx.id = "sfx-explosion";
document.body.append(sfx);
const onSetAttributeQuiet = vi.fn();
const host = document.createElement("div");
document.body.append(host);
act(() => {
createRoot(host).render(
<AudioFxGroup
element={
{
dataAttributes: { "fx-carve": carve },
id: "bed",
element: bed,
} as unknown as DomEditSelection
}
onSetAttributeQuiet={onSetAttributeQuiet}
onSetAttributeLive={vi.fn()}
/>,
);
});
await act(async () => {});
// Nothing written: the carve waits rather than picking the explosion.
expect(onSetAttributeQuiet.mock.calls.some((c) => c[0] === "data-fx-carve")).toBe(false);
// Still offered, so the author can say "actually, listen to that one".
expect(
Array.from(host.querySelectorAll("[data-carve-source]")).map((e) =>
e.getAttribute("data-carve-source"),
),
).toEqual(["sfx-explosion"]);
});
it("drops what it generated when the last voice goes and none is left to pick", async () => {
// Staying on with nothing to listen to is honest — a voice may come back, and
// "off" is a different thing the author chose. What cannot stay is the output:
// those filters and that envelope are making room for nobody.
const { onSetAttributeQuiet } = mountCarved(["narration"], []);
// The three writes are sequenced, not fired together: each is a
// read-modify-write against the same file, so the carve write lands only
// after the two that strip its output.
await act(async () => {});
const carve = writeTo(onSetAttributeQuiet.mock.calls, "data-fx-carve");
expect(JSON.parse(String(carve![1]))).toMatchObject({ enabled: true, sources: [] });
const chain = writeTo(onSetAttributeQuiet.mock.calls, "data-fx-chain");
// The hand-added low-pass survives; only what the carve minted goes.
expect(JSON.parse(String(chain![1])).nodes.map((n: { id: string }) => n.id)).toEqual(["k1"]);
const automation = writeTo(onSetAttributeQuiet.mock.calls, "data-automation");
expect(
JSON.parse(String(automation![1])).lanes.map((l: { target: string }) => l.target),
).toEqual(["fx.k1.frequency"]);
});
});
@@ -48,6 +48,7 @@ import {
} from "./propertyPanelAutomation"; } from "./propertyPanelAutomation";
import type { DomEditSelection } from "./domEditingTypes"; import type { DomEditSelection } from "./domEditingTypes";
import { useLivePlayheadTime } from "../../hooks/useLivePlayheadTime"; import { useLivePlayheadTime } from "../../hooks/useLivePlayheadTime";
import { usePlayerStore } from "../../player";
/** /**
* Rate the carve source is decoded at. Analysis is self-consistent because it * Rate the carve source is decoded at. Analysis is self-consistent because it
@@ -199,10 +200,12 @@ export function AudioFxGroup({
* commit, which does not exist yet. * commit, which does not exist yet.
*/ */
const setCarve = async (next: HfCarveSettings | null): Promise<void> => { const setCarve = async (next: HfCarveSettings | null): Promise<void> => {
// Envelopes the carve wrote outlive it otherwise, and an automated gain // What the carve generated is only justified by the voices it was measured
// ignores the panel's own depth — so switching dynamic off would leave the // from: switched off, or left naming none — every source deleted, say —
// filters still following the voice with nothing saying they do. // there is nothing those filters are making room for. Left behind they keep
if (!next?.enabled) { // dipping the bed with nothing in the panel to explain them.
const generatedOutputStands = Boolean(next?.enabled) && (next?.sources.length ?? 0) > 0;
if (!generatedOutputStands) {
const carriedOver = withoutCarveLanes(automation, chain); const carriedOver = withoutCarveLanes(automation, chain);
if (carriedOver.lanes.length !== automation.lanes.length) { if (carriedOver.lanes.length !== automation.lanes.length) {
await onSetAttributeQuiet( await onSetAttributeQuiet(
@@ -211,7 +214,7 @@ export function AudioFxGroup({
); );
} }
} }
if (!next?.enabled) { if (!generatedOutputStands) {
const kept = chain.nodes.filter((n) => !n.fromCarve); const kept = chain.nodes.filter((n) => !n.fromCarve);
if (kept.length !== chain.nodes.length) { if (kept.length !== chain.nodes.length) {
await onSetAttributeQuiet( await onSetAttributeQuiet(
@@ -300,9 +303,12 @@ export function AudioFxGroup({
* first, and if filtering would leave nothing at all every track comes back. A * first, and if filtering would leave nothing at all every track comes back. A
* picker that hides the track somebody needs is worse than a long one. * picker that hides the track somebody needs is worse than a long one.
*/ */
const sourceOptions: AudioTrackOption[] = (() => { const { sourceOptions, autoSourceIds } = ((): {
sourceOptions: AudioTrackOption[];
autoSourceIds: string[];
} => {
const doc = element.element?.ownerDocument; const doc = element.element?.ownerDocument;
if (!doc) return []; if (!doc) return { sourceOptions: [], autoSourceIds: [] };
const others = Array.from(doc.querySelectorAll<HTMLAudioElement>("audio[id]")).filter( const others = Array.from(doc.querySelectorAll<HTMLAudioElement>("audio[id]")).filter(
(a) => a.id !== element.id, (a) => a.id !== element.id,
); );
@@ -324,11 +330,75 @@ export function AudioFxGroup({
})); }));
const plausible = described.filter((t) => t.kind === "voice" || t.kind === "unknown"); const plausible = described.filter((t) => t.kind === "voice" || t.kind === "unknown");
const offered = plausible.length > 0 ? plausible : described; const offered = plausible.length > 0 ? plausible : described;
return offered const byVoiceFirst = (list: typeof described) =>
.sort((a, b) => (a.kind === "voice" ? 0 : 1) - (b.kind === "voice" ? 0 : 1)) [...list].sort((a, b) => (a.kind === "voice" ? 0 : 1) - (b.kind === "voice" ? 0 : 1));
.map(({ id, label }) => ({ id, label })); return {
sourceOptions: byVoiceFirst(offered).map(({ id, label }) => ({ id, label })),
// What the panel may pick WITHOUT being asked — never the fallback. The
// fallback exists so the picker can still show a track whose name reads as
// music or as an effect, because a name is a hint and the author may know
// better. Choosing off that list is a different act: it is the panel
// deciding, and "the only audio left is a 200 ms explosion" is not a voice
// to make room for. A bed surrounded by nothing plausible waits instead.
autoSourceIds: byVoiceFirst(plausible).map((t) => t.id),
};
})(); })();
/**
* The voices this carve names that are still in the composition.
*
* Existence, not the candidate list: a voice can stop being offered without
* being gone (it stopped overlapping the bed), and dropping it then would
* quietly rewrite a relationship the author set. Deleted is the case that has
* to be noticed, because what the carve produced was measured from that track.
*
* Asked of the timeline rather than of `element.element.ownerDocument`, which
* is the preview's DOM and outlives a delete: measured in the studio, a bed
* selected right after its voice was deleted still found that voice through
* the document, so the carve sat on a measurement of a track the timeline had
* already dropped. The store is what the delete actually edited.
*/
const timelineElements = usePlayerStore((s) => s.elements);
const survivingSources = ((): string[] => {
if (!carve) return [];
const present = new Set(timelineElements.map((el) => el.domId ?? el.id));
// Absence only means deletion once the timeline is known to describe THIS
// composition, and the bed being in it is the proof. Without that check a
// store that is empty — not loaded yet, or a panel mounted outside the
// player — reads as "every voice was deleted" and throws away a carve that
// is perfectly fine. Unchanged sources are what the prune treats as nothing
// to do.
if (!element.id || !present.has(element.id)) return carve.sources;
return carve.sources.filter((id) => present.has(id));
})();
/**
* A deleted voice re-analyses the bed.
*
* The filters and envelopes are a measurement of specific tracks, so losing one
* makes them a measurement of something that is no longer there — the bed keeps
* ducking for a voice nobody can hear. `analyse` already skips a source it
* cannot find, but nothing asked it to run again.
*
* Pruning is the whole trigger: `setCarve` re-analyses when the source list
* changes, so the surviving voices are re-measured together. Losing the LAST
* one leaves an empty list, which the effects below repoint at whatever
* candidates remain — and if there are none, `setCarve` drops what the carve
* generated, since there is nothing left it could be making room for.
*
* Keyed on the survivors rather than on the candidates: a voice that had
* stopped overlapping was never in the candidate list, so its deletion would
* not change that identity and this would never fire.
*/
useEffect(() => {
if (carvedAgainstBy || !carve?.enabled) return;
if (survivingSources.length === carve.sources.length) return;
void setCarve({ ...carve, sources: survivingSources });
// Keyed on the identity of the decision, not on setCarve — which is rebuilt
// every render and would re-fire this.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [carve, carvedAgainstBy, survivingSources.join(" ")]);
/** /**
* A bed with voices above it carves itself. * A bed with voices above it carves itself.
* *
@@ -346,14 +416,14 @@ export function AudioFxGroup({
* off stores `enabled: false`, which is also a configured carve. That is the whole * off stores `enabled: false`, which is also a configured carve. That is the whole
* reason the flag exists rather than "off" being an absent attribute. * reason the flag exists rather than "off" being an absent attribute.
*/ */
const candidateIds = sourceOptions.map((o) => o.id).join("\u0000"); const candidateIds = autoSourceIds.join("\u0000");
useEffect(() => { useEffect(() => {
// Exactly one candidate is the sibling effect's case below, not this one's: // Exactly one candidate is the sibling effect's case below, not this one's:
// both guards passing for a single candidate fired two setCarve calls with // both guards passing for a single candidate fired two setCarve calls with
// the same result — two decodes, two FFT runs, two concurrent attribute // the same result — two decodes, two FFT runs, two concurrent attribute
// writes. // writes.
if (carvedAgainstBy || sourceOptions.length <= 1) return; if (carvedAgainstBy || autoSourceIds.length <= 1) return;
const all = sourceOptions.map((o) => o.id); const all = autoSourceIds;
// Nothing configured: the default carve, pointed at everything it could hear. // Nothing configured: the default carve, pointed at everything it could hear.
if (carve === null) { if (carve === null) {
void setCarve({ ...DEFAULT_CARVE, sources: all }); void setCarve({ ...DEFAULT_CARVE, sources: all });
@@ -387,24 +457,23 @@ export function AudioFxGroup({
* reason the flag exists rather than "off" being an absent attribute. * reason the flag exists rather than "off" being an absent attribute.
*/ */
useEffect(() => { useEffect(() => {
if (carvedAgainstBy || sourceOptions.length !== 1) return; if (carvedAgainstBy || autoSourceIds.length !== 1) return;
const only = sourceOptions[0]; const only = autoSourceIds[0];
if (!only) return; if (!only) return;
// Nothing configured: the default carve, pointed at the one candidate. // Nothing configured: the default carve, pointed at the one candidate.
if (carve === null) { if (carve === null) {
void setCarve({ ...DEFAULT_CARVE, sources: [only.id] }); void setCarve({ ...DEFAULT_CARVE, sources: [only] });
return; return;
} }
// Configured but with no voice yet — a carve switched on before there was // Configured but with no voice yet — a carve switched on before there was
// anything to listen to, or one whose source was cleared. The panel reads the // anything to listen to, or one whose source was cleared. The panel reads the
// sole candidate out as the source, so it has to be the stored one too; // sole candidate out as the source, so it has to be the stored one too;
// otherwise the card claims a relationship the attribute does not record. // otherwise the card claims a relationship the attribute does not record.
if (carve.enabled && carve.sources.length === 0) if (carve.enabled && carve.sources.length === 0) void setCarve({ ...carve, sources: [only] });
void setCarve({ ...carve, sources: [only.id] });
// Deliberately keyed on the identity of the decision, not on setCarve — which // Deliberately keyed on the identity of the decision, not on setCarve — which
// is rebuilt every render and would re-fire this. // is rebuilt every render and would re-fire this.
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [carve, carvedAgainstBy, sourceOptions.length, sourceOptions[0]?.id]); }, [carve, carvedAgainstBy, autoSourceIds.length, autoSourceIds[0]]);
const [analysing, setAnalysing] = useState(false); const [analysing, setAnalysing] = useState(false);
@@ -142,6 +142,9 @@ export function useElementLifecycleOps({
kind: "timeline", kind: "timeline",
files: { [targetPath]: patchedContent }, files: { [targetPath]: patchedContent },
readFile: async () => originalContent, readFile: async () => originalContent,
// remove-element already wrote the removal, so disk holds THAT — not
// the content read at the top. Undo still goes back to the original.
diskContent: { [targetPath]: patchedContent },
writeFile: writeProjectFile, writeFile: writeProjectFile,
recordEdit: editHistory.recordEdit, recordEdit: editHistory.recordEdit,
}); });
@@ -449,6 +449,9 @@ export function useTimelineEditing({
kind: "timeline", kind: "timeline",
files: { [targetPath]: patchedContent }, files: { [targetPath]: patchedContent },
readFile: async () => originalContent, readFile: async () => originalContent,
// remove-element already wrote the removal, so disk holds THAT — not the
// content read at the top. Undo still goes back to the original.
diskContent: { [targetPath]: removedContent },
writeFile: writeProjectFile, writeFile: writeProjectFile,
recordEdit, recordEdit,
}); });
@@ -28,7 +28,9 @@ export function AutomationValueInput({
}: AutomationValueInputProps) { }: AutomationValueInputProps) {
return ( return (
<input <input
className="hf-automation-value absolute rounded-[3px] border border-panel-border-input bg-panel-bg-2 px-1 font-mono text-[9px] text-panel-text-1" // pointer-events-auto: the lane band around it takes none, so that clips
// sharing the row do not cover each other's envelopes (see the lane).
className="hf-automation-value pointer-events-auto absolute rounded-[3px] border border-panel-border-input bg-panel-bg-2 px-1 font-mono text-[9px] text-panel-text-1"
style={{ left: leftPx, top: 1, width: 44, zIndex: 4 }} style={{ left: leftPx, top: 1, width: 44, zIndex: 4 }}
// The lane is a pointer surface, and the timeline above it owns single-key // The lane is a pointer surface, and the timeline above it owns single-key
// shortcuts. Without stopping both, a press lands on the lane instead of // shortcuts. Without stopping both, a press lands on the lane instead of
@@ -610,11 +610,58 @@ describe("Timeline provider boundary", () => {
// One shared volume row, and BOTH clips hold it open. // One shared volume row, and BOTH clips hold it open.
expectTrackExpansion(row, ["narration-1", "narration-2"], TRACK_H + AUTOMATION_LANE_H); expectTrackExpansion(row, ["narration-1", "narration-2"], TRACK_H + AUTOMATION_LANE_H);
// Every clip bar on the row is capped to one track height. Only the clip
// owning the property lanes used to be, so its siblings stretched the whole
// expanded row and painted their waveforms over the envelopes below.
expect(
["narration-1", "narration-2"].map(
(id) => host.querySelector<HTMLElement>(`[data-el-id="${id}"]`)?.style.height,
),
).toEqual([`${TRACK_H - 2 * CLIP_Y}px`, `${TRACK_H - 2 * CLIP_Y}px`]);
act(() => caret()?.click()); act(() => caret()?.click());
expectTrackExpansion(row, [], TRACK_H); expectTrackExpansion(row, [], TRACK_H);
act(() => root.unmount()); act(() => root.unmount());
}); });
// The lanes are the row's, and selecting a clip must not rebuild them. They
// used to hang off the active clip's property lanes, so clicking a sibling
// moved the whole subtree into a different element and remounted every lane —
// which threw away each one's hover state and any gesture in flight. Pressing
// a lane to select its clip therefore made the handles vanish under the
// pointer, which is the one gesture the read-only lane exists to support.
it("keeps the automation lanes mounted when the selection moves along the row", () => {
const host = createSizedTimelineHost(720);
const automation = JSON.stringify({
version: 1,
lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
});
usePlayerStore.setState({
duration: 8,
timelineReady: true,
selectedElementId: "narration-2",
elements: [
{ id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
{ id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
],
});
const root = createRoot(host);
act(() => root.render(React.createElement(Timeline)));
act(() => host.querySelector<HTMLButtonElement>('button[aria-label$=" keyframes"]')?.click());
const before = [...host.querySelectorAll(".hf-automation-lane")];
expect(before).toHaveLength(2);
act(() => usePlayerStore.setState({ selectedElementId: "narration-1" }));
// Identity, not deep equality: a remount produces structurally identical
// nodes, so only `toBe` can tell the two apart.
const after = [...host.querySelectorAll(".hf-automation-lane")];
expect(after).toHaveLength(before.length);
after.forEach((node, index) => expect(node).toBe(before[index]));
act(() => root.unmount());
});
it("marks every clip in selectedElementIds as selected", () => { it("marks every clip in selectedElementIds as selected", () => {
const host = createSizedTimelineHost(720); const host = createSizedTimelineHost(720);
@@ -328,7 +328,12 @@ export function TimelineAutomationLane({
return ( return (
<div <div
className="hf-automation-lane absolute" // Spans the whole row so the separator below can, but takes no pointer
// events itself: clips sharing a row each mount one of these over the
// full width, so a band that accepted the pointer would let whichever
// clip rendered last swallow every sibling's envelope — hover, drag and
// all. Only the drawn parts opt back in.
className="hf-automation-lane pointer-events-none absolute"
style={{ top: topPx, left: 0, right: 0, height: h }} style={{ top: topPx, left: 0, right: 0, height: h }}
data-automation-lane={target} data-automation-lane={target}
> >
@@ -347,7 +352,7 @@ export function TimelineAutomationLane({
envelope it described and scrolled horizontally away from its own row. */} envelope it described and scrolled horizontally away from its own row. */}
<svg <svg
ref={svgRef} ref={svgRef}
className="hf-automation-svg absolute" className="hf-automation-svg pointer-events-auto absolute"
style={{ style={{
left: leftPx - PAD_X, left: leftPx - PAD_X,
top: 0, top: 0,
@@ -102,8 +102,7 @@ const readingBind = (element: TimelineElement, isSelected: boolean): AutomationL
onRangeClear: vi.fn(), onRangeClear: vi.fn(),
}); });
/** Every drawn envelope as `row @ left`, which is the whole claim under test. */ function renderRow(elements: readonly TimelineElement[], selectedKey?: string): HTMLElement {
function mountRow(elements: readonly TimelineElement[], selectedKey?: string) {
const host = document.createElement("div"); const host = document.createElement("div");
document.body.append(host); document.body.append(host);
act(() => { act(() => {
@@ -119,7 +118,12 @@ function mountRow(elements: readonly TimelineElement[], selectedKey?: string) {
/>, />,
); );
}); });
return [...host.querySelectorAll<HTMLElement>(".hf-automation-lane")] return host;
}
/** Every drawn envelope as `row @ left`, which is the whole claim under test. */
function mountRow(elements: readonly TimelineElement[], selectedKey?: string) {
return [...renderRow(elements, selectedKey).querySelectorAll<HTMLElement>(".hf-automation-lane")]
.map((lane) => `${lane.style.top} @ ${lane.querySelector("svg")?.style.left}`) .map((lane) => `${lane.style.top} @ ${lane.querySelector("svg")?.style.left}`)
.sort(); .sort();
} }
@@ -148,6 +152,21 @@ describe("TimelineAutomationLaneSlot shared rows", () => {
]); ]);
}); });
it("lets each clip's envelope be reached, not just the one drawn last", () => {
// Every clip mounts a band spanning the WHOLE row (the row separator needs
// the full width), so three bands sit on top of each other here. If a band
// took the pointer, the last one rendered would swallow hover and drag over
// its siblings' envelopes — handles appeared only on the final clip, and
// only on rows that a single clip happened to own.
const host = renderRow([narration1, narration2]);
const bands = [...host.querySelectorAll<HTMLElement>(".hf-automation-lane")];
expect(bands.length).toBeGreaterThan(1);
for (const band of bands) {
expect(band.className).toContain("pointer-events-none");
expect(band.querySelector("svg")?.getAttribute("class")).toContain("pointer-events-auto");
}
});
it("keeps the same rows whichever clip is selected", () => { it("keeps the same rows whichever clip is selected", () => {
// The bug this replaces: the row listed only the selected clip's lanes, so // The bug this replaces: the row listed only the selected clip's lanes, so
// clicking a sibling swapped which envelopes existed. // clicking a sibling swapped which envelopes existed.
@@ -232,10 +232,23 @@ describe("TimelineLanes track numbering", () => {
describe("TimelineLanes disclosure target", () => { describe("TimelineLanes disclosure target", () => {
const ANIMATIONS = new Map([["clip-a", [positionTween("clip-a")]]]); const ANIMATIONS = new Map([["clip-a", [positionTween("clip-a")]]]);
function ariaControlsTarget(host: HTMLElement): HTMLElement | null { /**
* `aria-controls` is an ID LIST, and the caret needs one: it reveals the
* active clip's keyframe lanes AND the track's automation lanes, which cannot
* be one element one belongs to a clip, the other to the row.
*/
function ariaControlsIds(host: HTMLElement): string[] {
const caret = host.querySelector("button[aria-controls]"); const caret = host.querySelector("button[aria-controls]");
const id = caret?.getAttribute("aria-controls"); return (caret?.getAttribute("aria-controls") ?? "").split(/\s+/).filter(Boolean);
return id ? host.querySelector<HTMLElement>(`#${id}`) : null; }
function ariaControlsTargets(host: HTMLElement): (HTMLElement | null)[] {
return ariaControlsIds(host).map((id) => host.querySelector<HTMLElement>(`#${id}`));
}
/** The first region named, which is the keyframe lanes. */
function ariaControlsTarget(host: HTMLElement): HTMLElement | null {
return ariaControlsTargets(host)[0] ?? null;
} }
// aria-controls used to name a div in the sticky label column: it computed to // aria-controls used to name a div in the sticky label column: it computed to
@@ -246,6 +259,9 @@ describe("TimelineLanes disclosure target", () => {
expect(target).not.toBeNull(); expect(target).not.toBeNull();
expect(target?.querySelectorAll("[data-timeline-property-lane]").length).toBeGreaterThan(0); expect(target?.querySelectorAll("[data-timeline-property-lane]").length).toBeGreaterThan(0);
// Every region it names has to exist, or the caret points at nothing.
expect(ariaControlsTargets(view.host).length).toBeGreaterThan(1);
expect(ariaControlsTargets(view.host).every(Boolean)).toBe(true);
act(() => view.root.unmount()); act(() => view.root.unmount());
}); });
@@ -255,6 +271,9 @@ describe("TimelineLanes disclosure target", () => {
expect(target).not.toBeNull(); expect(target).not.toBeNull();
expect(target?.querySelectorAll("[data-timeline-property-lane]")).toHaveLength(0); expect(target?.querySelectorAll("[data-timeline-property-lane]")).toHaveLength(0);
// Including the automation region, which is mounted empty while collapsed
// for exactly this reason.
expect(ariaControlsTargets(view.host).every(Boolean)).toBe(true);
act(() => view.root.unmount()); act(() => view.root.unmount());
}); });
@@ -266,8 +285,8 @@ describe("TimelineLanes disclosure target", () => {
const second = renderLanes({ animations: ANIMATIONS, expandedClipIds: ["clip-a"] }); const second = renderLanes({ animations: ANIMATIONS, expandedClipIds: ["clip-a"] });
const idsFor = (host: HTMLElement) => const idsFor = (host: HTMLElement) =>
Array.from(host.querySelectorAll("button[aria-controls]")).map((caret) => Array.from(host.querySelectorAll("button[aria-controls]")).flatMap((caret) =>
caret.getAttribute("aria-controls"), (caret.getAttribute("aria-controls") ?? "").split(/\s+/).filter(Boolean),
); );
const firstIds = idsFor(first.host); const firstIds = idsFor(first.host);
const secondIds = idsFor(second.host); const secondIds = idsFor(second.host);
@@ -209,6 +209,12 @@ export function TimelineLanes({
); );
const keyframeClipKey = keyframeClip?.key ?? keyframeClip?.id; const keyframeClipKey = keyframeClip?.key ?? keyframeClip?.id;
const rowExpanded = isTrackRowExpanded(els, expandedClipIds); const rowExpanded = isTrackRowExpanded(els, expandedClipIds);
// How tall a clip BAR is drawn. An expanded row is mostly lanes, and a
// clip left to fill it painted its waveform straight over them — so the
// bar is capped for every clip on the row, not just the one whose
// property lanes are showing. Undefined means "fill the row", which is
// right only while it is collapsed and the row is nothing but bar.
const clipBarHeight = rowExpanded ? TRACK_H - 2 * CLIP_Y : undefined;
// The clips whose envelopes this row draws, at their dragged positions. // The clips whose envelopes this row draws, at their dragged positions.
// Once per row, not once per clip in the map below. // Once per row, not once per clip in the map below.
const automationElements = els.map(getPreviewElement); const automationElements = els.map(getPreviewElement);
@@ -217,6 +223,10 @@ export function TimelineLanes({
// on the canvas. Keyed by display row, not by `trackNum`, which is a // on the canvas. Keyed by display row, not by `trackNum`, which is a
// fractional sort key and would mint ids like `...-0.16666666666666666`. // fractional sort key and would mint ids like `...-0.16666666666666666`.
const lanesId = `${lanesIdPrefix}-track-${row}`; const lanesId = `${lanesIdPrefix}-track-${row}`;
// The caret reveals two canvas regions now: the active clip's keyframe
// lanes and the track's automation lanes. They cannot be one element —
// one belongs to a clip, the other to the row — so the caret names both.
const automationLanesId = `${lanesId}-automation`;
// The header's remove buttons write through the same binding the lanes // The header's remove buttons write through the same binding the lanes
// themselves edit through, so a deletion persists exactly like dragging // themselves edit through, so a deletion persists exactly like dragging
// a point does — and the binding reports read-only for an unselected // a point does — and the binding reports read-only for an unselected
@@ -245,6 +255,7 @@ export function TimelineLanes({
logicalRow={logicalRow} logicalRow={logicalRow}
propertyRows={trackLogicalRows.slice(1)} propertyRows={trackLogicalRows.slice(1)}
lanesId={lanesId} lanesId={lanesId}
headerLanesId={`${lanesId} ${automationLanesId}`}
top={rowGeometry.getRowTop(row)} top={rowGeometry.getRowTop(row)}
height={rowHeight} height={rowHeight}
virtualized={rowsVirtualized} virtualized={rowsVirtualized}
@@ -263,7 +274,7 @@ export function TimelineLanes({
els[0]?.id ?? els[0]?.id ??
`Track${trackDisplaySuffix(displayNumber)}` `Track${trackDisplaySuffix(displayNumber)}`
} }
lanesId={lanesId} lanesId={`${lanesId} ${automationLanesId}`}
contentOrigin={contentOrigin} contentOrigin={contentOrigin}
keyframeClip={keyframeClip} keyframeClip={keyframeClip}
trackElements={els} trackElements={els}
@@ -411,7 +422,7 @@ export function TimelineLanes({
el={previewElement} el={previewElement}
pps={pps} pps={pps}
clipY={CLIP_Y} clipY={CLIP_Y}
clipHeight={showsLanes ? TRACK_H - 2 * CLIP_Y : undefined} clipHeight={clipBarHeight}
isSelected={isSelected} isSelected={isSelected}
isHovered={hoveredClip === clipKey} isHovered={hoveredClip === clipKey}
isDragging={false} isDragging={false}
@@ -503,25 +514,6 @@ export function TimelineLanes({
Promise.resolve(false) Promise.resolve(false)
} }
suppressClickRef={suppressClickRef} suppressClickRef={suppressClickRef}
footer={
showsLanes ? (
// Every clip on the row, not this one: the lanes are
// the TRACK's, one row per automated property.
<TimelineAutomationLaneSlot
elements={automationElements}
isSelected={(element) => {
const key = getTimelineElementIdentity(element);
return selectedElementId === key || selectedElementIds.has(key);
}}
lanes={automationLanes}
pps={pps}
laneCount={laneCounts.get(elementKey) ?? 0}
accentColor={clipStyle.accent}
currentTime={currentTime}
beatTimes={beatAnalysis?.beatTimes}
/>
) : null
}
/> />
); );
@@ -556,6 +548,36 @@ export function TimelineLanes({
); );
}) })
} }
{/* The automation lanes belong to the ROW, so they are mounted
here rather than under the active clip's property lanes.
Hanging off that clip meant selecting a sibling moved the
whole subtree into a different clip's element and remounted
every lane which threw away each lane's hover state (and
any gesture mid-flight), so pressing a lane to select its
clip made the handles you were reaching for disappear.
Mounted in BOTH disclosure states, empty while collapsed, so
the caret's aria-controls resolves either way same reason
the keyframe lanes are. Absolute positions inside resolve
against this same relative row, so the geometry is unchanged
by the move. */}
<div id={automationLanesId}>
{rowExpanded ? (
<TimelineAutomationLaneSlot
elements={automationElements}
isSelected={(element) => {
const key = getTimelineElementIdentity(element);
return selectedElementId === key || selectedElementIds.has(key);
}}
lanes={automationLanes}
pps={pps}
laneCount={keyframeClipKey ? (laneCounts.get(keyframeClipKey) ?? 0) : 0}
accentColor={getTrackStyle(keyframeClip?.tag ?? "").accent}
currentTime={currentTime}
beatTimes={beatAnalysis?.beatTimes}
/>
) : null}
</div>
</div> </div>
</TimelineTrackRow> </TimelineTrackRow>
); );
@@ -1,4 +1,4 @@
import { useMemo, type MouseEvent as ReactMouseEvent, type ReactNode, type RefObject } from "react"; import { useMemo, type MouseEvent as ReactMouseEvent, type RefObject } from "react";
import { import {
classifyPropertyGroup, classifyPropertyGroup,
type GsapAnimation, type GsapAnimation,
@@ -35,12 +35,6 @@ export interface TimelinePropertyLanesProps {
onContextMenuKeyframe?: (e: ReactMouseEvent, target: TimelineKeyframeTarget) => void; onContextMenuKeyframe?: (e: ReactMouseEvent, target: TimelineKeyframeTarget) => void;
onMoveKeyframe?: (target: TimelineKeyframeTarget, toClipPercentage: number) => Promise<boolean>; onMoveKeyframe?: (target: TimelineKeyframeTarget, toClipPercentage: number) => Promise<boolean>;
suppressClickRef?: RefObject<boolean>; suppressClickRef?: RefObject<boolean>;
/**
* Rendered after the keyframe lanes, inside this wrapper. An audio clip's
* automation lane lives here so it shares the same disclosure and so the
* header caret's `aria-controls` covers it too.
*/
footer?: ReactNode;
} }
/** /**
@@ -202,7 +196,6 @@ export function TimelinePropertyLanes({
onContextMenuKeyframe, onContextMenuKeyframe,
onMoveKeyframe, onMoveKeyframe,
suppressClickRef, suppressClickRef,
footer,
}: TimelinePropertyLanesProps) { }: TimelinePropertyLanesProps) {
// Memoized: TimelineDiamondLane is React.memo'd, and rebuilding the lanes (and // Memoized: TimelineDiamondLane is React.memo'd, and rebuilding the lanes (and
// a fresh keyframesData literal per lane) on every render would re-render every // a fresh keyframesData literal per lane) on every render would re-render every
@@ -270,7 +263,6 @@ export function TimelinePropertyLanes({
/> />
</div> </div>
))} ))}
{footer}
</div> </div>
); );
} }
@@ -30,8 +30,11 @@ interface TimelineTrackHeaderProps {
* from the label rather than inventing one (see trackDisplayNumber). */ * from the label rather than inventing one (see trackDisplayNumber). */
trackDisplayNumber: number | null; trackDisplayNumber: number | null;
trackLabel: string; trackLabel: string;
/** Id of the canvas-side lanes element the disclosure caret expands. Minted by /** Ids of the canvas-side lane regions the disclosure caret expands, space
* TimelineLanes, which is the one place that sees both subtrees. */ * separated as `aria-controls` takes them: the active clip's keyframe lanes
* and the track's automation lanes are separate elements, one owned by a
* clip and one by the row. Minted by TimelineLanes, the one place that sees
* every subtree. */
lanesId: string; lanesId: string;
contentOrigin: number; contentOrigin: number;
/** The track's active keyframe clip (selected, else primary) the one whose /** The track's active keyframe clip (selected, else primary) the one whose
@@ -7,7 +7,13 @@ interface TimelineTrackRowProps {
rowKey: number; rowKey: number;
logicalRow: TimelineLogicalRow; logicalRow: TimelineLogicalRow;
propertyRows: readonly TimelineLogicalRow[]; propertyRows: readonly TimelineLogicalRow[];
/** Names the canvas-side content cell the active clip's own property lanes,
* minted with this single id in TimelinePropertyLanes. */
lanesId: string; lanesId: string;
/** Names the header cell. Space-separated because the caret it lives under
* expands two disjoint subtrees (the clip's keyframe lanes AND the track's
* automation lanes) see TimelineTrackHeader for why they cannot share one id. */
headerLanesId: string;
top: number; top: number;
height: number; height: number;
virtualized: boolean; virtualized: boolean;
@@ -24,6 +30,7 @@ export function TimelineTrackRow({
logicalRow, logicalRow,
propertyRows, propertyRows,
lanesId, lanesId,
headerLanesId,
top, top,
height, height,
virtualized, virtualized,
@@ -78,7 +85,7 @@ export function TimelineTrackRow({
<div <div
role="rowheader" role="rowheader"
aria-colindex={1} aria-colindex={1}
aria-owns={timelineLogicalRowCellId(lanesId, row.id, "header")} aria-owns={timelineLogicalRowCellId(headerLanesId, row.id, "header")}
> >
{group} {group}
</div> </div>
@@ -29,6 +29,55 @@ describe("saveProjectFilesWithHistory", () => {
}); });
}); });
/**
* Deleting a clip POSTs `remove-element`, which rewrites the file server-side,
* and only then saves the duration shrink. Expecting the content read before
* the mutation made the server refuse that write as a conflict: the save queue
* paused on the 409 and the clip stayed on the timeline until a reload.
*/
it("expects what is on disk, not the undo baseline, when they differ", async () => {
const expectations: Record<string, string | undefined> = {};
const recordEdit = vi.fn();
await saveProjectFilesWithHistory({
projectId: "project-1",
label: "Delete timeline clip",
kind: "timeline",
files: { "index.html": "removed+shrunk" },
readFile: async () => "original",
diskContent: { "index.html": "removed" },
writeFile: async (path, _content, expectedContent) => {
expectations[path] = expectedContent;
},
recordEdit,
});
expect(expectations["index.html"]).toBe("removed");
// Undo still goes all the way back, which is the whole reason the two are
// allowed to differ.
expect(recordEdit).toHaveBeenCalledWith(
expect.objectContaining({
files: { "index.html": { before: "original", after: "removed+shrunk" } },
}),
);
});
it("still expects the undo baseline when nothing says otherwise", async () => {
const expectations: Record<string, string | undefined> = {};
await saveProjectFilesWithHistory({
projectId: "project-1",
label: "Move layer",
kind: "manual",
files: { "index.html": "after" },
readFile: async () => "before",
writeFile: async (path, _content, expectedContent) => {
expectations[path] = expectedContent;
},
recordEdit: vi.fn(),
});
expect(expectations["index.html"]).toBe("before");
});
it("skips writes and history for unchanged content", async () => { it("skips writes and history for unchanged content", async () => {
const writeFile = vi.fn(); const writeFile = vi.fn();
const recordEdit = vi.fn(); const recordEdit = vi.fn();
+17 -1
View File
@@ -34,6 +34,21 @@ interface SaveProjectFilesWithHistoryInput {
readFile: (path: string) => Promise<string>; readFile: (path: string) => Promise<string>;
writeFile: ProjectFileWriter; writeFile: ProjectFileWriter;
recordEdit: (entry: RecordEditInput) => Promise<void>; recordEdit: (entry: RecordEditInput) => Promise<void>;
/**
* What a path holds ON DISK right now, when that is not the same as the
* history's "before".
*
* The two are normally one value, so the write's optimistic-concurrency
* expectation was taken straight from the undo baseline. They come apart when
* a server-side mutation has already written part of the edit: deleting a clip
* POSTs `remove-element`, which rewrites the file, and only then saves the
* duration shrink expecting the pre-delete content it read at the start. The
* server had moved the file on, so the write was refused as a conflict, the
* save queue paused, and the clip stayed on the timeline until a reload.
*
* Undo still restores `before`; this only says what to expect on disk.
*/
diskContent?: Record<string, string>;
} }
export async function readProjectFileContent(pid: string, path: string): Promise<string> { export async function readProjectFileContent(pid: string, path: string): Promise<string> {
@@ -57,6 +72,7 @@ export async function saveProjectFilesWithHistory({
readFile, readFile,
writeFile, writeFile,
recordEdit, recordEdit,
diskContent,
}: SaveProjectFilesWithHistoryInput): Promise<string[]> { }: SaveProjectFilesWithHistoryInput): Promise<string[]> {
return serializeStudioFileMutations(writeFile, Object.keys(files), async () => { return serializeStudioFileMutations(writeFile, Object.keys(files), async () => {
const snapshots: Record<string, { before: string; after: string }> = {}; const snapshots: Record<string, { before: string; after: string }> = {};
@@ -73,7 +89,7 @@ export async function saveProjectFilesWithHistory({
const writtenPaths: string[] = []; const writtenPaths: string[] = [];
try { try {
for (const path of changedPaths) { for (const path of changedPaths) {
await writeFile(path, snapshots[path].after, snapshots[path].before); await writeFile(path, snapshots[path].after, diskContent?.[path] ?? snapshots[path].before);
writtenPaths.push(path); writtenPaths.push(path);
} }
+255
View File
@@ -0,0 +1,255 @@
# Audio automation lanes
Breakpoint envelopes on audio tracks, edited in the timeline the way Ableton
Live edits arrangement automation: expand a lane under the track, pick a
parameter, click to add points, drag to shape. Applies to track volume and to
FX-chain parameters.
Status: SPEC — not implemented. Builds on the `wa-*` Web Audio FX stack.
---
## 1. Why this shape
Two facts make this cheaper here than in most editors:
1. **Web Audio has native envelope playback.** `AudioParam` scheduling
(`linearRampToValueAtTime`, `setValueCurveAtTime`) is sample-accurate and
runs on the audio thread. No per-frame JS evaluates the envelope; the studio
only *schedules* it.
2. **Preview and render share one graph.** The render runs the same builders in
an `OfflineAudioContext`, so an envelope scheduled the same way in both
places is identical by construction. No parity harness needed.
And one fact makes the UI cheap: the FX registry already declares `min` /
`max` / `step` / `unit` / `scale` for every parameter. A lane's y-axis,
clamping, and log/linear mapping are read from the registry — the lane
component knows nothing about any specific effect (same principle as the
panel).
## 2. What exists today (grounding)
- **Static volume**: `data-volume` on the element; baseline gain.
- **GSAP volume tweens**: `tl.to("#bgm", { volume: 0 })` — probed at 60 Hz into
`volumeKeyframes`, applied in preview via `interpolateVolumeGain`
(`runtime/media.ts`) and baked into PCM at render via
`applyVolumeEnvelopeToWav` (sample-accurate) with an ffmpeg-expression
fallback (`MAX_VOLUME_SEGMENTS = 32`).
- **FX chains**: `data-fx-chain` serialised on the element; transport splices
the graph between decoded source and gain (`attachElementFxChain`); render
runs the same graph offline. Worklet params are set via `port.postMessage`,
**not** AudioParams.
- **Transport scheduling**: sources are (re)scheduled on play, seek, and rate
change (`scheduleWebAudioForActiveClips`), started with an `elapsed` offset
into the buffer. Envelope scheduling piggybacks on exactly these moments.
- **Timeline lanes**: `TimelineLanes.tsx` renders track rows;
`TimelinePropertyLanes.tsx` is the keyframe-lane precedent;
`AudioWaveform.tsx` already draws the waveform the envelope will sit over.
- **Edit plumbing**: `onSetAttributeLive` (coalesced, no preview refresh) for
drags; `onSetAttribute` persists on gesture end. Proven by the wa-8 fix.
## 3. UX spec (Ableton mapping)
| Ableton | Here |
| --- | --- |
| Automation triangle on track header | Expand toggle on audio track rows in the timeline gutter |
| One parameter per lane, selector at lane left | Same. Selector lists `Volume` + every automatable param of every chain node (`Compressor · Threshold`) |
| Breakpoint envelope over the clip | SVG envelope drawn over the existing waveform, clip-local |
| Double-click segment → add point | Same |
| Drag point (value tooltip) | Same; tooltip shows value + unit from the registry |
| Drag segment vertically → bend curvature | Same (Phase 2; format supports it from v1) |
| Delete key / right-click → remove point | Same |
| Dimmed line when no automation | Flat line at the current static value; first edit creates the lane |
Lane height ~48 px expanded. Multiple lanes per track may be open at once
(one per parameter), matching Ableton's "+" lanes — Phase 2; V1 shows one lane
per track with the selector.
**Editing writes:** point drags go through `onSetAttributeLive`; release
persists via `onSetAttribute`. The running graph follows the attribute (wa-8
observer), so edits are audible without a reload. Undo = attribute history,
coalesced per gesture — free.
## 4. Data model
Serialised on the element, versioned, same pattern as `data-fx-chain`:
```html
<audio id="music" src="..." data-volume="0.55"
data-fx-chain='{"version":1,"nodes":[{"id":"n1","type":"peaking",...}]}'
data-automation='{
"version": 1,
"lanes": [
{ "target": "volume",
"points": [ {"t":0,"v":0.55}, {"t":2.5,"v":0.2,"curve":-0.4}, {"t":6,"v":0.55} ] },
{ "target": "fx.n1.frequency",
"points": [ {"t":0,"v":200}, {"t":4,"v":8000} ] }
]
}'>
```
- **`t`** — seconds, **clip-local** (relative to the element's `data-start`).
The attribute lives on the element, so automation travels with the clip when
it moves. (Ableton note: arrangement automation stays put when clips move;
clip envelopes travel. We are the clip-envelope model. Stated, not hidden.)
- **`v`** — value in the parameter's own unit as declared in the registry
(dB for a compressor threshold, Hz for a cutoff). Volume is **linear 0..1**,
consistent with `data-volume` and the existing linear-domain envelope
machinery — no dB conversion enters the volume path.
- **`curve`** — optional, `-1..1`, curvature of the segment *leaving* this
point. `0`/absent = linear. Power-curve bend, Ableton-style.
- **`target`** — `"volume"` or `"fx.<nodeId>.<paramKey>"`.
**Chain node ids.** `HfAudioFxNode` gains an optional `id` (short random,
minted by the panel when a node is added). Automation addresses nodes by id,
so reordering the chain never re-targets a lane. Chains without ids stay
valid — they just can't be automation targets until the panel touches them.
**Normalization** (`normalizeAutomation`, mirrors `normalizeAudioFxParams`):
- points sorted by `t`; duplicate `t` keeps the later point
- `v` clamped to the target's registry range; non-finite → point dropped
- lanes targeting a node id that no longer exists in the chain are **dropped**
(the author deleted the device; its automation dies with it — panel also
removes them eagerly on node delete)
- 1-point lane = constant; empty lanes array = attribute removed
**Precedence for volume** (documented + linted):
`data-automation` volume lane → GSAP volume tween → `data-volume`.
New lint rule `audio_volume_double_automation` (warning) when an element has
both a volume lane and a GSAP tween on `volume`.
## 5. Interpolation semantics
- Between points: linear in the parameter's **working domain**. Params with
registry `scale: "log"` (frequency, some times) interpolate in log domain —
a 200 Hz → 8 kHz sweep is perceptually linear, matching what a DAW does.
- `curve` bends the segment: `f(x) = x^(2^(k·s))` shaping applied in the
working domain (s = curve, k ≈ 2). Exact constant chosen to visually match
Ableton's feel; pinned by unit tests once chosen.
- Before the first point: hold first value. After the last: hold last value.
- One shared implementation `sampleAutomationLane(lane, t)` in core — used by
the lane renderer (drawing), the scheduler (curve sampling), and the render
path. One interpolator, three consumers, or preview and picture drift.
## 6. Preview architecture
Scheduling hooks into `schedulePlayback` (transport), which already runs on
play / seek / rate change with the clip's `elapsed` offset:
- **Volume lane** → scheduled on the source's existing `gainNode.gain`
(post-FX, i.e. fader semantics — matches Ableton, matches the render order
where FX runs before the volume bake).
- **FX param lanes** → scheduled on AudioParams exposed by the graph builders
(§8) of the chain instance spliced for this source.
Mechanics per lane, at schedule time:
1. Convert clip-local envelope → context-time segments starting at
`scheduledAt`, offset by `elapsed`, scaled by playback rate.
2. Linear segments → `setValueAtTime` + `linearRampToValueAtTime` (log-domain
params ramp via sampled curve, below).
3. Curved or log-domain segments → `setValueCurveAtTime` with the segment
sampled at 100 pts/s (min 8 per segment).
4. On stop/dispose → `cancelScheduledValues` before the nodes disconnect.
**Live edit while playing:** the wa-8 attribute observer already re-parameterises
the running chain. Extend it: on an automation change, `cancelScheduledValues`
from `currentTime` and re-schedule the remainder. Point drags are audible
mid-playback without rescheduling the source.
## 7. Render architecture
- **Volume lane**: sampled into the `volumeKeyframes` shape (dense linear
points for curved segments, ~20/segment) and fed to the existing
`applyVolumeEnvelopeToWav` PCM bake. Zero new render machinery; existing
order (FX → volume bake) already matches fader-post-FX semantics.
- **FX param lanes**: the injectable audio-fx runtime entry
(`audio-fx-runtime-entry.ts`) grows an `automation` argument; it schedules
lanes on the offline graph exactly as §6 does on the live one. The engine
passes the element's `data-automation` through `applyAudioFxChain`.
- Parity is structural (same interpolator, same scheduler code path), but one
fixture test renders a swept filter offline and asserts the sweep landed
(spectral check at two timestamps) so a regression is loud.
## 8. Registry & graph-builder changes
- `HfAudioFxNumberParam` gains `automatable?: boolean`.
- `FxNodeHandle` gains `params?: Record<string, AudioParam>` — each builder
exposes the AudioParams backing its automatable params.
- **Invariant test**: for every registry param with `automatable: true`, the
built node exposes a matching AudioParam. The flag can never lie.
**Automatable in V1** (param maps to a real AudioParam):
| Effect | Params |
| --- | --- |
| Peaking / shelves | frequency, gain, Q |
| High/low-pass (2-pole) | frequency, Q |
| Delay | time (delayTime), feedback, mix |
| Chorus | rate, depth, mix |
| Phaser | rate, wet/dry gains |
| Reverb | wet, dry |
| *Volume* | (transport gainNode) |
**Not automatable in V1**, greyed out in the selector, with reasons:
- **Worklet effects** (compressor, limiter, gate, bitcrush): params travel by
`postMessage`, not AudioParams. V2 path: declare
`parameterDescriptors` in the processors and read `parameters` in
`process()` — mechanical but touches every processor; separate PR.
- **Saturation** type/threshold: a WaveShaper curve is not an AudioParam.
- **Reverb size/damping**: changing them regenerates the IR; not continuously
automatable by construction. Output gain via post-node possible later.
- **1-pole filter frequency**: IIRFilterNode coefficients are immutable.
## 9. Studio UI components
- `TimelineAutomationLane.tsx` — SVG envelope over `AudioWaveform`, driven by
registry metadata (range/scale/unit). Hit-testing, point drag with tooltip,
double-click add, right-click/Delete remove.
- Track header expand toggle + param selector (grouped: Volume, then per
chain node by label).
- `TimelineElement` (playerStore) gains a parsed `automation?` summary the
same way it carries `volumeKeyframes`, populated at manifest translation.
- Orphan handling: deleting a chain node in the panel deletes its lanes in the
same attribute write (atomic — both live in element attributes).
## 10. Edge cases
- Clip trimmed shorter than envelope: points beyond `data-duration` are kept
in data, drawn dimmed, inert at playback (hold-last stops at clip end).
- Clip start moved: clip-local times mean the envelope moves with it. This is
the chosen semantic, not an accident.
- `data-playback-rate` ≠ 1: envelope times are clip-timeline seconds; the
scheduler divides by rate when mapping to context time (same as the buffer).
- Unreadable `data-automation`: preview plays without it (dry-not-silent
philosophy); render **fails loudly** (same split as chains — plausible-but-
wrong renders are the worst outcome).
- Element with automation but no chain: volume lane still valid.
## 11. PR breakdown (all < 1000 LOC)
| PR | Scope | Est. LOC |
| --- | --- | --- |
| A `wa-10-automation-model` | core: types, parse/normalize/serialize, `sampleAutomationLane`, curvature math, chain node ids, lint rule | ~450 |
| B `wa-11-param-exposure` | core: `automatable` flags, `FxNodeHandle.params`, invariant test | ~350 |
| C `wa-12-preview-scheduling` | core: transport + attach-path scheduling, cancel/re-schedule on live edit | ~400 |
| D `wa-13-render-scheduling` | core/engine: offline scheduling in runtime entry, volume→bake bridge, sweep fixture test | ~350 |
| E `wa-14-lane-ui` | studio: lane component, expand toggle, selector, point editing, orphan cleanup | ~800 |
| F `wa-15-curvature` (Phase 2) | studio: segment-bend drag; worklet `parameterDescriptors` migration | ~300+ |
A→B→C→D are dependency-ordered; E needs A+B (draws and writes) and benefits
from C (audible while editing). F is optional polish.
## 12. Open questions (need a call before building)
1. **Volume lane display unit** — data stays linear either way; show the axis
as % (matches `data-volume`) or dB (matches DAW muscle memory)?
*Default if unanswered: %.*
2. **Curvature in V1?** Format supports it from day one regardless. Building
the bend-drag in V1 adds ~2 days to E. *Default: defer to F, straight lines
first.*
3. **Worklet-param automation deferral acceptable?** Compressor threshold
automation is the notable absence. *Default: defer; it's a self-contained
follow-up.*
4. **Clip-envelope semantics confirmed?** Automation travels with the clip.
If you expected Ableton *arrangement* behaviour (stays put), say so now —
it changes the data model (composition-global times, stored off-element).
+3 -3
View File
@@ -1,6 +1,6 @@
# Shared automation lane rows on a track # Shared automation lane rows on a track
Decision taken 2026-08-07. Not yet implemented. Decision taken 2026-08-07. Implemented in `1e21d763b`.
## The bug ## The bug
@@ -43,7 +43,7 @@ its own row.
selection moves. selection moves.
- **Gestures stay per clip.** Each clip keeps its own SVG, its own - **Gestures stay per clip.** Each clip keeps its own SVG, its own
`useAutomationLaneGestures`, and its own selection box; a shared row is a shared `useAutomationLaneGestures`, and its own selection box; a shared row is a shared
*lane track*, not a shared envelope. Two clips' envelopes in one row must not be _lane track_, not a shared envelope. Two clips' envelopes in one row must not be
draggable as one thing. draggable as one thing.
- **Row height** is `AUTOMATION_LANE_H` per grouped lane, not per clip-lane, so - **Row height** is `AUTOMATION_LANE_H` per grouped lane, not per clip-lane, so
`getTimelineLaneTop` and the header's row positions follow the grouped count. `getTimelineLaneTop` and the header's row positions follow the grouped count.
@@ -53,6 +53,6 @@ its own row.
## Worth deciding while implementing ## Worth deciding while implementing
A clip on the row that does *not* automate a grouped property has empty space in A clip on the row that does _not_ automate a grouped property has empty space in
that row. Leave it empty (the envelope is simply absent there) rather than drawing a that row. Leave it empty (the envelope is simply absent there) rather than drawing a
flat line at the stored value — a flat line would claim an envelope exists. flat line at the stored value — a flat line would claim an envelope exists.
+174
View File
@@ -0,0 +1,174 @@
# Automation lane time selection — design
2026-08-05 · builds on stack #3027 (wa-1 … wa-14) · status: approved, awaiting implementation plan
## Context
Audio automation lanes (breakpoint envelopes over `data-automation`) ship point-level
editing: add, drag, curve, snap, type a value, delete one point. Everything range-shaped —
"fade the music here", "duck this under the voiceover", "reuse that swell" — still means
placing points one at a time. Ableton's envelope editor solves this with a time selection;
this design ports the useful subset for video authors. Explicitly not a DAW: no musical
LFO features, no automation recording, no unlinked/looped envelopes.
## Goals
- Select a time range on one lane by dragging its background.
- Delete the points in a range without disturbing the envelope outside it.
- Insert simple shapes (ramp up, ramp down, swell, dip) into a range in one action.
- Copy a range and paste it elsewhere — other time, other lane, other parameter.
- Retime a range by dragging its edges.
- Thin dense point runs (Simplify).
## Non-goals
- Multi-lane or multi-clip selection. One selection, one lane.
- Vertical scaling and skew of a selection.
- Draw mode, automation recording, ADSR/waveform shapes (saw, square).
- Persisting the selection. It is view state, never serialized.
## Model
New store slice `automationSelectionSlice.ts` (own file — `playerStore.ts` sits at the
600-line ceiling; `keyframeSlice.ts` is the precedent):
```ts
interface AutomationSelection {
elementKey: string; // which clip
target: string; // which lane ("volume" | "fx.<nodeId>.<param>")
t0: number; // clip-local seconds
t1: number; // > t0
}
// automationSelection: AutomationSelection | null
// setAutomationSelection(sel), clearAutomationSelection()
```
Why a slice and not lane-local state: Delete/Cmd+C/V handlers and the shape context menu
live outside the lane component and need to read the active selection —
`useKeyframeKeyboard` already solved this exact problem by going through the store.
Lifecycle: cleared on Escape, on a sub-threshold click in any lane, and automatically when
the element or target it names stops resolving (clip deleted, effect removed). The lane
receives it through `bind()` in `useAutomationLanes` like every other prop.
## Gesture
A plain drag on the lane background range-selects. This surface is free: today a
pointerdown that misses every point and has no Alt falls through and does nothing.
- Pointerdown (no point hit, no Alt): arm at `t`, capture the pointer.
- Move past ~3 px horizontally: live-update the selection (`t0`/`t1` ordered, clamped to
`[0, duration]`). Endpoints snap to the same beat-grid + neighbour-point targets a point
drag uses; Alt bypasses, matching the point-drag convention.
- Pointerup under the threshold: clear the selection (it was a click, not a drag).
Renders as a translucent accent rect behind the envelope path with faint vertical edges.
Existing gestures unchanged: point hits win over range-drag; Alt on the line still curves.
Implemented as a third gesture kind in `useAutomationLaneGestures` beside point-drag and
curve-drag.
## Range ops
Pure module `automationLaneSelection.ts` (studio, not core — the render never needs any of
this; core keeps only the envelope model it already has):
```ts
pointsIn(lane, t0, t1): HfAutomationPoint[]
replaceRange(lane, range, t0, t1, inner: HfAutomationPoint[]): HfAutomationLane
```
`replaceRange` is the only mutator, and carries THE invariant: **the envelope outside the
selection never moves.** It samples the lane at `t0` and `t1` first (`sampleAutomationLane`,
log-aware) and pins anchor points at both edges, drops the old interior, inserts `inner`,
sorts, and runs the existing normalize path (dedupe, `MAX_AUTOMATION_POINTS` 512 cap).
Every feature below composes it, and every write flows through the lane's existing
`commitPoints` preview/persist split — undo, drafts, and the quiet-commit path are
inherited, not rebuilt.
## Features
### Delete range (wa-15)
`replaceRange(..., [])` on Delete/Backspace via a new `useAutomationSelectionKeyboard`
hook (sibling of `useKeyframeKeyboard`), inert while the value input or any text field has
focus. Escape clears the selection.
### Shapes (wa-16)
Right-click the selection rect → context menu: **Ramp up · Ramp down · Swell · Dip**, plus
**Simplify**. Pure generators in `automationShapes.ts`, one shape scaled to the selection,
values computed in unit space so log knobs behave:
| Shape | Points | Semantics |
| --------- | ------ | -------------------------------------------------------------------- |
| Ramp up | 2 | `range.min` at `t0` → envelope's own value at `t1` (fade in) |
| Ramp down | 2 | envelope's own value at `t0``range.min` at `t1` (fade out) |
| Swell | 3 | edge values, peak at `range.max` at the midpoint, `curve`-smoothed |
| Dip | 3 | edge values, midpoint at 25 % of the edge value in unit space (duck), smoothed |
Point counts are tiny; the 512 cap is never approached.
### Copy/paste (wa-17)
Module-level clipboard `{ sourceRange: AutomationRange, span: number, points }`, times
rebased to `t0`. Not the OS clipboard — points aren't text, and `useClipboard` is already
the DOM-element channel.
- **Cmd+C**: copy `pointsIn` the active selection.
- **Cmd+V**: paste at the active selection's start when one exists, else at the playhead's
clip-local position, onto the selected clip's active lane. Inserted via `replaceRange`
over the pasted span.
- Cross-parameter values map through unit space: `toUnit(sourceRange, v)`
`fromUnit(targetRange, u)` — a volume duck pasted onto a log-scaled `wet` lands sanely.
- Registered in `useAppHotkeys` and active only while an automation selection exists (copy)
or clipboard content exists with an audio clip selected (paste), so clip-level
copy/paste is never shadowed.
### Stretch (wa-18)
8 px grab zones just inside the selection's left/right edges (points win hits over
handles). Dragging an edge retimes interior points proportionally:
`t' = t0' + (t t0) · span'/span`, then `replaceRange` over the union of old and new
spans. One more gesture kind in the hook. Vertical scaling deliberately cut.
### Simplify (wa-16, shares the menu)
RamerDouglasPeucker in unit space over the selection, ε ≈ 2 % of lane height. Exists for
carve output and dense hand edits.
## Testing
- `replaceRange`: assert `sampleAutomationLane` outside the range is identical before and
after every op — the invariant, tested directly. Anchor pinning, cap, dedupe.
- Generators: point counts, unit-space values on a log lane, edge continuity.
- RDP: dense sine in → few points out, max deviation < ε.
- Clipboard mapping: volume → wet round-trip on a log range.
- Gestures: existing harness (synthetic pointers, stubbed box, assert `onPreview`/
`onCommit` payloads). New: drag selects; sub-threshold click clears; Escape clears;
Delete empties the range and pins anchors; edge drag retimes; menu insert writes a swell.
- Keyboard hook inert while a text input has focus.
- Nothing below the attribute changes → no engine/render tests.
## PR breakdown
Stacked on wa-14 (stack #3027), each under the 1000-LOC convention:
| PR | Content | ~LOC |
| ----- | ------------------------------------------------------------------------ | ---- |
| wa-15 | slice, drag gesture, rect render, `replaceRange`/`pointsIn`, Delete/Esc | 400 |
| wa-16 | shape generators, selection context menu (ramp/swell/dip), Simplify | 380 |
| wa-17 | clipboard, Cmd+C/V in `useAppHotkeys`, unit-space mapping | 300 |
| wa-18 | edge-handle stretch gesture | 250 |
wa-16/17/18 are independent once wa-15 lands. File-size note: `useAutomationLaneGestures`
grows in wa-15 and wa-18 (310 lines today — headroom exists); the menu is a new file.
## Decisions log
- One cycle per shape, scaled to the selection (per-beat cycles rejected: not a music tool).
- Shape set is the utility four (ramp up/down, swell, dip); saw/square/ADSR rejected.
- Paste anchor: selection start when active, else playhead.
- Selection state in a store slice (approach A); component-local and DomEditContext rejected.
- Internal clipboard, not OS clipboard.
- All range math pure, in studio; core untouched.
- Vertical scale and skew cut from stretch.