feat(studio): select automation points with a box, and stop them crossing

Replaces the time-range selection with a rectangle. A lane selection is a set of
breakpoints, not a span, so it now has value bounds as well as time bounds and a
point is caught only if it falls inside both — which is what lets you take the
peaks of an envelope and leave the dips between them. Delete, the group drag and
the rings drawn on caught points all read the one rule, so what looks selected is
exactly what those act on. Copy, paste, shape insert and simplify still work on
the box's time span, because they act on the envelope over a stretch of time.

Dragging is bounded by its neighbours in both the single and group cases. A point
cannot cross another, and cannot land exactly on one either: the lane collapses
points that share a `t`, keeping the later one, so arriving on top of a neighbour
deleted it. It stops a millisecond short, which is under a pixel at any zoom the
lane offers and keeps both points. Only stationary neighbours constrain a group,
per member rather than per end, since a box can select a non-contiguous set.

Edge-stretch is removed rather than fixed. Dragging a selection's edges to retime
the points inside it was the feature this branch opened for, and it is not wanted:
the hook, retimeRange, the edge handles, the col-resize cursor and the pointercancel
revert path all go, along with the ~360 lines of tests that pinned them.

Also: gesture-scoped coalescing keys, so one drag is one undo entry rather than a
fragmented chain of them.

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

Author: vanceingalls

packages/studio/src/player/components/TimelineAutomationLane.test.tsx

@@ -56,14 +56,14 @@ function mountSlot(binding: Partial<AutomationLaneBinding>) {
 describe("TimelineAutomationLaneSlot stale-selection guard", () => {
   it("clears the selection when its lane's target no longer exists", () => {
     const { onRangeClear } = mountSlot({
-      selection: { elementKey: "bgm", target: "fx.gone.wet", t0: 1, t1: 2 },
+      selection: { elementKey: "bgm", target: "fx.gone.wet", t0: 1, t1: 2, v0: 0, v1: 1 },
     });
     expect(onRangeClear).toHaveBeenCalledTimes(1);
   });
 
   it("leaves an in-scope selection alone", () => {
     const { onRangeClear } = mountSlot({
-      selection: { elementKey: "bgm", target: "volume", t0: 1, t1: 2 },
+      selection: { elementKey: "bgm", target: "volume", t0: 1, t1: 2, v0: 0, v1: 1 },
     });
     expect(onRangeClear).not.toHaveBeenCalled();
   });

packages/studio/src/player/components/TimelineAutomationLane.tsx

@@ -173,6 +173,26 @@ export function TimelineLanes({
           // on the canvas. Keyed by display row, not by `trackNum`, which is a
           // fractional sort key and would mint ids like `...-0.16666666666666666`.
           const lanesId = `${lanesIdPrefix}-track-${row}`;
+          // The header's remove buttons write through the same binding the lanes
+          // themselves edit through, so a deletion persists exactly like dragging
+          // a point does — and the binding reports read-only for an unselected
+          // clip, which is what leaves the buttons off rather than offering one
+          // that cannot act.
+          const headerLanes =
+            keyframeClip && keyframeClipKey
+              ? automationLanes.bind(
+                  keyframeClip,
+                  selectedElementId === keyframeClipKey || selectedElementIds.has(keyframeClipKey),
+                )
+              : null;
+          const removeAutomationLane =
+            headerLanes && !headerLanes.readOnly
+              ? (target: string) =>
+                  headerLanes.onCommit({
+                    version: 1,
+                    lanes: headerLanes.lanes.filter((lane) => lane.target !== target),
+                  })
+              : undefined;
           return (
             <TimelineTrackRow
               key={rowKey}
@@ -213,6 +233,7 @@ export function TimelineLanes({
                 }}
                 onToggleTrackHidden={onToggleTrackHidden}
                 onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
+                onRemoveAutomationLane={removeAutomationLane}
                 onSeek={onSeek}
               />
               <div

packages/studio/src/player/components/TimelineAutomationLaneSlot.test.tsx

@@ -9,7 +9,8 @@ import { TimelineTrackHeader } from "./TimelineTrackHeader";
 import { defaultTimelineTheme } from "./timelineTheme";
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
-import { LABEL_COL_W } from "./timelineLayout";
+import { getTimelineLaneTop, LABEL_COL_W } from "./timelineLayout";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -68,6 +69,7 @@ interface RenderHeaderOptions {
   onSeek?: (time: number) => void;
   onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
   onToggleTrackHidden?: TimelineEditCallbacks["onToggleTrackHidden"];
+  onRemoveAutomationLane?: (target: string) => void;
 }
 
 function renderHeader(options: RenderHeaderOptions = {}): {
@@ -100,6 +102,7 @@ function renderHeader(options: RenderHeaderOptions = {}): {
           onToggleClipExpanded={vi.fn()}
           onToggleTrackHidden={next.onToggleTrackHidden ?? vi.fn()}
           onTogglePropertyGroupKeyframe={next.onTogglePropertyGroupKeyframe}
+          onRemoveAutomationLane={next.onRemoveAutomationLane}
           onSeek={next.onSeek}
         />,
       );
@@ -413,4 +416,115 @@ describe("TimelineTrackHeader", () => {
     assertAligned([POSITION, OPACITY]);
     act(() => view.root.unmount());
   });
+
+  /**
+   * Automation lanes are named in the label column, on the same tree as the
+   * keyframe rows — not painted inside the lane, where the name sat on top of
+   * the envelope it belonged to and scrolled away from its own row.
+   */
+  describe("audio automation rows", () => {
+    const BED: TimelineElement = {
+      id: "bed",
+      label: "Music Bed",
+      tag: "audio",
+      start: 0,
+      duration: 10,
+      track: 0,
+      fxChain: JSON.stringify({
+        version: 1,
+        nodes: [{ type: "peaking", id: "n1", params: { frequency: 1600, gain: -6, q: 1.4 } }],
+      }),
+      automation: JSON.stringify({
+        version: 1,
+        lanes: [
+          {
+            target: "volume",
+            points: [
+              { t: 0, v: 1 },
+              { t: 5, v: 0.4 },
+            ],
+          },
+          {
+            target: "fx.n1.gain",
+            points: [
+              { t: 0, v: 0 },
+              { t: 5, v: -6 },
+            ],
+          },
+        ],
+      }),
+    } as TimelineElement;
+
+    it("names every envelope in the label column", () => {
+      const { host, root } = renderHeader({ keyframeClip: BED, animations: [] });
+      const rows = Array.from(host.querySelectorAll<HTMLElement>("[data-automation-lane-label]"));
+      expect(rows.map((r) => r.getAttribute("data-automation-lane-label"))).toEqual([
+        "fx.n1.gain",
+        "volume",
+      ]);
+      // A band is named by its frequency: with several of them, "Peaking EQ" says
+      // nothing about which is which. Bands sit above the level lanes.
+      // Two lines per row: what the effect is, then which knob the envelope
+      // drives. One line truncated mid-word in a column this narrow.
+      expect(rows.map((r) => r.querySelector("[data-automation-lane-name]")?.textContent)).toEqual([
+        "Peaking EQ 1.6 kHz",
+        "Volume",
+      ]);
+      expect(rows.map((r) => r.querySelector("[data-automation-lane-param]")?.textContent)).toEqual(
+        [
+          "Gain",
+          // Volume has no effect behind it, so it has no second line at all.
+          undefined,
+        ],
+      );
+      act(() => root.unmount());
+    });
+
+    it("hides them when the track is collapsed", () => {
+      const { host, root } = renderHeader({
+        keyframeClip: BED,
+        animations: [],
+        expanded: false,
+      });
+      expect(host.querySelectorAll("[data-automation-lane-label]")).toHaveLength(0);
+      act(() => root.unmount());
+    });
+
+    it("removes just that envelope from the label column", () => {
+      // The panel's automate toggle can only reach a parameter it still shows; a
+      // carve's own lanes are not in it at all, so without this an envelope could
+      // be created and never deleted.
+      const onRemoveAutomationLane = vi.fn();
+      const { host, root } = renderHeader({
+        keyframeClip: BED,
+        animations: [],
+        onRemoveAutomationLane,
+      });
+      const button = host.querySelector<HTMLButtonElement>(
+        'button[aria-label="Remove Peaking EQ 1.6 kHz · Gain automation"]',
+      );
+      expect(button).not.toBeNull();
+      act(() => button?.click());
+      expect(onRemoveAutomationLane).toHaveBeenCalledWith("fx.n1.gain");
+      act(() => root.unmount());
+    });
+
+    it("offers no remove button when the lanes are read-only", () => {
+      const { host, root } = renderHeader({ keyframeClip: BED, animations: [] });
+      expect(host.querySelectorAll('button[aria-label$="automation"]')).toHaveLength(0);
+      act(() => root.unmount());
+    });
+
+    it("stacks each envelope's row where its lane is drawn", () => {
+      // Same rhythm the canvas uses: automation begins below the keyframe lanes
+      // and steps by its own taller row height.
+      const { host, root } = renderHeader({ keyframeClip: BED, animations: [OPACITY] });
+      const tops = Array.from(
+        host.querySelectorAll<HTMLElement>("[data-automation-lane-label]"),
+      ).map((r) => r.style.top);
+      const base = getTimelineLaneTop(1);
+      expect(tops).toEqual([`${base}px`, `${base + AUTOMATION_LANE_H}px`]);
+      act(() => root.unmount());
+    });
+  });
 });

packages/studio/src/player/components/TimelineLanes.tsx

@@ -5,6 +5,13 @@ import type { TimelineElement } from "../store/playerStore";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
 import { automationLaneCountOf } from "./useTimelineTrackLayout";
+import {
+  automationLaneLabel,
+  automationLaneLabelParts,
+  elementAutomationLanes,
+  elementFxChain,
+} from "./automationLaneData";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
 import { clipTimingStart } from "../../hooks/gsapShared";
 import { LayerDisclosureRow } from "./LayerDisclosureRow";
 import { TrackClipCount } from "./TrackClipCount";
@@ -46,6 +53,9 @@ interface TimelineTrackHeaderProps {
   onToggleClipExpanded: () => void;
   onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
   onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
+  /** Drop one envelope. Absent while the lanes are read-only, which is what
+   *  hides the control rather than offering a button that cannot act. */
+  onRemoveAutomationLane?: (target: string) => void;
   onSeek?: (time: number) => void;
 }
 
@@ -281,6 +291,102 @@ function PropertyGroupHeaderRow({
   );
 }
 
+/**
+ * One envelope's row in the label column.
+ *
+ * Named here rather than inside the lane, on the same tree connector the
+ * keyframe rows use: an automation lane is a child of its clip exactly as a
+ * property group is, and drawing its name over the envelope put the label on top
+ * of the curve it describes and scrolled it away from its own row.
+ */
+function AutomationLaneHeaderRow({
+  target,
+  label,
+  name,
+  param,
+  top,
+  isLastLane,
+  gutterBackground,
+  columnWidth,
+  onRemove,
+}: {
+  target: string;
+  /** The whole thing on one line, for the tooltip and the remove button's name. */
+  label: string;
+  /** What the effect is — "Peaking EQ 1.6 kHz". */
+  name: string;
+  /** Which knob the envelope drives. Empty when there is no second line to draw. */
+  param: string;
+  top: number;
+  isLastLane: boolean;
+  gutterBackground: string;
+  columnWidth: number;
+  onRemove?: (target: string) => void;
+}) {
+  return (
+    <div
+      data-automation-lane-label={target}
+      data-timeline-lane-top={top}
+      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65"
+      style={{
+        top,
+        width: columnWidth,
+        height: AUTOMATION_LANE_H,
+        background: gutterBackground,
+      }}
+    >
+      {/* Tree connector, as the keyframe rows draw it: spine down the row, branch
+          tick at the name's own height. */}
+      <span className="relative h-full w-3 shrink-0" aria-hidden="true">
+        <span
+          className="absolute left-1.5 top-0 w-px bg-white/15"
+          style={{ height: isLastLane ? "50%" : "100%" }}
+        />
+        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" />
+      </span>
+      {/* Two lines: what the effect is, then which knob the envelope drives. On
+          one line a band's own name was the first thing truncated in a column this
+          narrow — "Peaking EQ 1.6 k…" — losing exactly the part that tells two
+          bands apart. */}
+      <span className="flex min-w-0 flex-1 flex-col justify-center leading-tight" title={label}>
+        <span data-automation-lane-name="" className="truncate font-mono text-[9px] text-white/70">
+          {name}
+        </span>
+        {param ? (
+          <span
+            data-automation-lane-param=""
+            className="truncate font-mono text-[9px] text-white/40"
+          >
+            {param}
+          </span>
+        ) : null}
+      </span>
+      {/* Beside the name it labels, because that is the only place an envelope is
+          named at all: a carve writes its own lanes, and the FX panel's automate
+          toggle can only reach a parameter it still lists — so without this an
+          envelope could be created and never removed. */}
+      {onRemove && (
+        <button
+          type="button"
+          aria-label={`Remove ${label} automation`}
+          title={`Remove ${label} automation`}
+          // h-6 w-6 is the 24x24 WCAG 2.2 target; the glyph stays small.
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-white/35 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            // A control in the label column owns its click; it does not also hit
+            // the track row behind it and change the selection.
+            event.stopPropagation();
+            onRemove(target);
+          }}
+        >
+          ×
+        </button>
+      )}
+    </div>
+  );
+}
+
 export function TimelineTrackHeader({
   trackNumber,
   trackDisplayNumber,
@@ -298,6 +404,7 @@ export function TimelineTrackHeader({
   onToggleClipExpanded,
   onToggleTrackHidden,
   onTogglePropertyGroupKeyframe,
+  onRemoveAutomationLane,
   onSeek,
 }: TimelineTrackHeaderProps) {
   const clipPercentage = keyframeClip
@@ -315,6 +422,20 @@ export function TimelineTrackHeader({
   // left an audio clip's envelopes unreachable, since the track could not expand.
   const disclosable =
     lanes.length > 0 || (keyframeClip ? automationLaneCountOf(keyframeClip) : 0) > 0;
+  // Each envelope's name, resolved against the chain the same way the lane
+  // resolves its axis — a band is named by its frequency, not by its effect. The
+  // lane list is already in drawing order, which is the order these rows have to
+  // follow: a name beside the wrong envelope is worse than an awkward order.
+  const automationRows = keyframeClip
+    ? elementAutomationLanes(keyframeClip).flatMap((lane) => {
+        const chain = elementFxChain(keyframeClip);
+        const parts = automationLaneLabelParts(lane.target, chain);
+        const label = automationLaneLabel(lane.target, chain);
+        return parts && label
+          ? [{ target: lane.target, label, name: parts.name, param: parts.param }]
+          : [];
+      })
+    : [];
   const isKeyframeLayer = !!keyframeClip && disclosable;
 
   return (
@@ -381,7 +502,7 @@ export function TimelineTrackHeader({
                 key={lane.group}
                 lane={lane}
                 laneIndex={laneIndex}
-                isLastLane={laneIndex === lanes.length - 1}
+                isLastLane={laneIndex === lanes.length - 1 && automationRows.length === 0}
                 expandedElement={keyframeClip}
                 currentTime={currentTime}
                 clipPercentage={clipPercentage}
@@ -391,6 +512,24 @@ export function TimelineTrackHeader({
                 onSeek={onSeek}
               />
             ))}
+          {/* Below the keyframe rows and stepping by its own height, which is how
+              TimelineAutomationLaneSlot lays the envelopes out on the canvas. The
+              two have to agree or a name labels the wrong curve. */}
+          {isExpanded &&
+            automationRows.map((row, index) => (
+              <AutomationLaneHeaderRow
+                key={row.target}
+                target={row.target}
+                label={row.label}
+                name={row.name}
+                param={row.param}
+                top={getTimelineLaneTop(lanes.length) + index * AUTOMATION_LANE_H}
+                isLastLane={index === automationRows.length - 1}
+                gutterBackground={theme.gutterBackground}
+                columnWidth={showTrackLabel ? LABEL_COL_W : contentOrigin}
+                onRemove={onRemoveAutomationLane}
+              />
+            ))}
         </>
       )}
     </div>