fix(studio): give edge-stretch the gesture contract the other four follow

Seven review findings against this branch, five of which were one defect:
edge-stretch was added as a fifth mutually-exclusive gesture on the lane
without joining the threshold / live-preview / revert-on-cancel contract the
point drag, curve bend, range drag and double-click all obey. Patching them
one at a time would have been more code and less coherent, so this makes the
stretch structurally parallel to its sibling range drag instead, and extracts
it to useAutomationEdgeStretch on the way out — the gestures file had ~60
lines of headroom under the 600-line studio cap, and shaving comments to fit
a refactor in is not a plan.

- Threshold. A press within the 8px halo of either edge used to persist a
  no-op commit and push an undo entry that changed nothing (commitDataAttribute
  has no unchanged-value short-circuit). Worse, it made the pre-existing "click
  the background to clear the selection" escape unreachable anywhere near an
  edge. Below 3px of travel — the same threshold the range drag uses — the
  press now clears the selection and writes nothing at all.
- Live preview. moveEdge never fired onRangeSelect and the hook discarded the
  drag's live position, so the highlight rect and both edge lines stayed pinned
  at the pre-drag bounds for the whole gesture and snapped into place on
  release: the user dragged an invisible handle. It now reports bounds on every
  move, exactly as the marquee drag does and for the same reason.
- Revert on cancel. pointercancel means the browser abandoned the gesture; it
  was routed to the same handler as pointerup, which persisted whatever partial
  retime it had reached. It now restores the arm-time snapshot through the
  preview channel — there is nothing persisted to undo — and puts the selection
  back. A new cancelDrag handler owns that, so a release and an abandonment are
  no longer the same event.
- Lost capture. capturePointer took the capture on e.target, i.e. whichever
  child the press landed on. A child that unmounts mid-drag takes the capture
  with it, silently, with no pointercancel — after which edgeDrag stayed
  non-null and every later button-less pointermove kept retiming and writing.
  Capture is now taken on the svg, which outlives every gesture on it, and a
  move reporting no buttons held ends the drag as a cancel.
- Hit priority. A breakpoint sitting exactly on the selection's edge used to
  win the press. Since replaceRange pins an anchor at the union bound and
  finishEdgeDrag leaves the selection edge at that same time, EVERY range
  operation — stretch, delete, shape insert — leaves a point exactly on the
  edge it just created: the second stretch of the same edge resolved to a
  point-drag, at the one height (on the envelope) where a user naturally grabs
  it. The feature was not repeatable. An active selection's edge now outranks a
  point on it; clearing the selection reaches the point again, which is tested.
- Clamp order. The dragged edge was bounded against its partner AFTER the
  0-floor, so a selection thinner than the minimum width yielded a negative t0,
  which core's cleanPoint then collapses onto a duplicate t=0 on the serialize
  round-trip — silent envelope corruption. The floor is now applied last. The
  minimum width is its own MIN_SELECTION_SEC rather than a borrowed
  POINT_MERGE_SEC: when two breakpoints are the same breakpoint is a different
  question from how thin a time selection may get.

One finding does not survive: edgeAt's `d0 <= d1` tiebreak was reported as
making the t1 edge ungrabbable on a narrow selection, but that comparison IS
nearest-wins, and a press right of the midpoint already resolved to t1. The
midpoint split here is the same rule written so it is legible rather than
inferred, and the test for it is labelled as characterizing behaviour, not
fixing it. What was genuinely unreachable inside a narrow halo — starting a
fresh range, or clearing the old one without Escape — the threshold above fixes.

Also settles what retimeRange does with a breakpoint sitting ON a dragged
edge, which was never decided: pointsIn is endpoint-inclusive, so it is
interior and travels with the stretch. It has to be, because the commonest
stretch of all is grabbing an edge to drag exactly that point outward, and
anchoring it would delete it and flatten the span instead. The price is that
the retimed point lands on the union's own boundary where a preservation anchor
would go, and anchor() stands down within a merge radius — one time cannot hold
two values — so the segment leaving the union reshapes. That is the one place
replaceRange's outside-never-moves invariant bends, and both halves are now
pinned: the exact points and the sampled slope for the on-edge case, and the
full two-sided invariant for a selection whose edges are off any breakpoint.
The earlier right-side probe at t=5.1 that caught this was deleted during
development as inherent; it was reporting the real behaviour.

Author: vanceingalls

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

@@ -85,6 +85,8 @@ function fire(
     clientX?: number;
     clientY?: number;
     button?: number;
+    /** Buttons still held. A move reporting none is how a lost capture shows up. */
+    buttons?: number;
     altKey?: boolean;
     shiftKey?: boolean;
   } = {},
@@ -485,6 +487,27 @@ const mount = (automation: HfAutomation, over: Record<string, unknown> = {}) =>
   return { container, svg, props };
 };
 
+/** `mount`, plus the re-render a real store update causes — the persisted
+ *  automation and the new selection coming back down as props. */
+const mountRerenderable = (automation: HfAutomation, over: Record<string, unknown> = {}) => {
+  const base = laneProps({ automation, ...over });
+  const props = {
+    ...base,
+    onPreview: base.onPreview as ReturnType<typeof vi.fn>,
+    onCommit: base.onCommit as ReturnType<typeof vi.fn>,
+  };
+  const { container, rerender } = renderRerenderable(<TimelineAutomationLane {...props} />);
+  const svg = container.querySelector("svg")!;
+  stubBox(svg, BOX);
+  return {
+    container,
+    svg,
+    props,
+    rerender: (next: Record<string, unknown>) =>
+      rerender(<TimelineAutomationLane {...props} {...next} />),
+  };
+};
+
 describe("TimelineAutomationLane modifiers", () => {
   it("bends a segment when it is Alt-dragged, and leaves the points where they were", () => {
     // `curve` was honoured everywhere it is read — drawn, sampled in preview,
@@ -688,10 +711,11 @@ describe("TimelineAutomationLane selection menu", () => {
 });
 
 describe("TimelineAutomationLane stretch", () => {
-  // Edges deliberately off any existing point: the lane's hit-priority rule
-  // (a point always wins) means a selection edge sitting exactly on a
-  // breakpoint would resolve to a point-drag, never a stretch — see the
-  // dedicated priority test below for that case instead.
+  // Most edges here are off any existing point, which is the EASY case. The
+  // normal state after any range operation is the opposite — delete, shape
+  // insert and stretch all leave a breakpoint exactly on the edge they created
+  // — so the priority test below is the one that decides whether the feature is
+  // repeatable, not an edge case.
 
   /** Press, drag and release the right edge of a stretchable selection — the
    *  shape most of this block's tests share, differing only in where the
@@ -732,10 +756,99 @@ describe("TimelineAutomationLane stretch", () => {
     expect(points.some((p) => Math.abs(p.t - 1.2) < 0.01 && p.v === 0.5)).toBe(true);
     expect(points.some((p) => Math.abs(p.t - 2.6) < 0.01 && p.v === 0.8)).toBe(true);
 
-    expect(onRangeSelect).toHaveBeenCalledTimes(1);
     expect(onRangeSelect).toHaveBeenLastCalledWith(0.5, expect.closeTo(3.3, 1));
   });
 
+  it("moves the selection with the pointer instead of snapping it on release", () => {
+    // The highlight and both edge lines render from the rangeSelection prop, so
+    // a stretch that only reported its bounds on release dragged an invisible
+    // handle: the rect stayed pinned at the pre-drag bounds for the whole
+    // gesture. The marquee drag fires live for exactly this reason.
+    const onRangeSelect = vi.fn();
+    const { svg } = mount(stretchable, {
+      rangeSelection: { t0: 0.5, t1: 2.5 },
+      onRangeSelect,
+    });
+    fire(svg, "pointerdown", at(2.5, 0.5));
+    fire(svg, "pointermove", at(3, 0.5));
+    expect(onRangeSelect).toHaveBeenLastCalledWith(0.5, expect.closeTo(3, 1));
+    fire(svg, "pointermove", at(3.3, 0.5));
+    expect(onRangeSelect).toHaveBeenLastCalledWith(0.5, expect.closeTo(3.3, 1));
+  });
+
+  it("a bare click on an edge clears the selection instead of committing a no-op", () => {
+    // Without a movement threshold this pushed an undo entry that changed
+    // nothing, and — because the halo covers both edges — it also made the
+    // "click the background to clear" escape unreachable near either one.
+    const onRangeSelect = vi.fn();
+    const onRangeClear = vi.fn();
+    const { svg, props } = mount(stretchable, {
+      rangeSelection: { t0: 0.5, t1: 2.5 },
+      onRangeSelect,
+      onRangeClear,
+    });
+    fire(svg, "pointerdown", at(2.5, 0.5));
+    fire(svg, "pointerup", at(2.5, 0.5));
+    expect(props.onCommit).not.toHaveBeenCalled();
+    expect(props.onPreview).not.toHaveBeenCalled();
+    expect(onRangeSelect).not.toHaveBeenCalled();
+    expect(onRangeClear).toHaveBeenCalledTimes(1);
+  });
+
+  it("a press that jitters under the threshold still clears rather than retiming", () => {
+    const onRangeClear = vi.fn();
+    const { svg, props } = mount(stretchable, {
+      rangeSelection: { t0: 0.5, t1: 2.5 },
+      onRangeClear,
+    });
+    fire(svg, "pointerdown", at(2.5, 0.5));
+    // ~2px at 100 px/s: a hand resting on the button, not a drag.
+    fire(svg, "pointermove", at(2.52, 0.5));
+    fire(svg, "pointerup", at(2.52, 0.5));
+    expect(props.onPreview).not.toHaveBeenCalled();
+    expect(props.onCommit).not.toHaveBeenCalled();
+    expect(onRangeClear).toHaveBeenCalledTimes(1);
+  });
+
+  it("reverts an interrupted stretch rather than persisting the partial retime", () => {
+    // pointercancel means the browser abandoned the gesture. Routing it to the
+    // same handler as pointerup persisted whatever half-drag it had reached,
+    // with no way back other than undo.
+    const onRangeSelect = vi.fn();
+    const { svg, props } = mount(stretchable, {
+      rangeSelection: { t0: 0.5, t1: 2.5 },
+      onRangeSelect,
+    });
+    fire(svg, "pointerdown", at(2.5, 0.5));
+    fire(svg, "pointermove", at(3.3, 0.5));
+    fire(svg, "pointercancel", at(3.3, 0.5));
+
+    expect(props.onCommit).not.toHaveBeenCalled();
+    // The envelope goes back through the preview channel — nothing to undo —
+    // and the selection returns to the bounds the drag started from.
+    const reverted = (props.onPreview.mock.calls.at(-1)?.[0] as HfAutomation | undefined)?.lanes[0]
+      ?.points;
+    expect(reverted).toEqual(stretchable.lanes[0]?.points);
+    expect(onRangeSelect).toHaveBeenLastCalledWith(0.5, 2.5);
+  });
+
+  it("gives up a stretch whose pointer capture vanished without a cancel", () => {
+    // A capture taken on a child that unmounts mid-drag is lost silently: no
+    // pointercancel, no pointerup. Every later hover kept retiming and writing.
+    const { svg, props } = mount(stretchable, {
+      rangeSelection: { t0: 0.5, t1: 2.5 },
+    });
+    fire(svg, "pointerdown", at(2.5, 0.5));
+    fire(svg, "pointermove", { ...at(3.3, 0.5), buttons: 1 });
+    fire(svg, "pointermove", { ...at(3.4, 0.5), buttons: 0 });
+    const writes = props.onPreview.mock.calls.length;
+
+    fire(svg, "pointermove", { ...at(3.8, 0.5), buttons: 0 });
+    fire(svg, "pointermove", { ...at(1, 0.5), buttons: 0 });
+    expect(props.onPreview.mock.calls.length).toBe(writes);
+    expect(props.onCommit).not.toHaveBeenCalled();
+  });
+
   it("previews the stretch on move without persisting, then commits once on release", () => {
     const onPreview = vi.fn();
     const onCommit = vi.fn();
@@ -753,36 +866,92 @@ describe("TimelineAutomationLane stretch", () => {
     expect(onCommit).toHaveBeenCalledTimes(1);
   });
 
-  it("a point sitting on the selection's edge wins over the edge-stretch gesture", () => {
-    const sel: HfAutomation = {
-      version: 1,
-      lanes: [
-        {
-          target: "volume",
-          points: [
-            { t: 0, v: 1 },
-            { t: 1.5, v: 0.5 },
-            { t: 2, v: 0.8 },
-            { t: 4, v: 0 },
-          ],
-        },
-      ],
-    };
+  /** A breakpoint sitting exactly on the selection's right edge — the state every
+   *  range operation leaves behind, and the one a stretch has to be able to grab
+   *  a second time. */
+  const pointOnEdge: HfAutomation = {
+    version: 1,
+    lanes: [
+      {
+        target: "volume",
+        points: [
+          { t: 0, v: 1 },
+          { t: 1.5, v: 0.5 },
+          { t: 2, v: 0.8 },
+          { t: 4, v: 0 },
+        ],
+      },
+    ],
+  };
+
+  it("the selection's edge wins over a point sitting exactly on it", () => {
+    // The regression this pins is the feature not being repeatable: stretching
+    // pins a breakpoint on the edge it just created, so a point-first rule made
+    // the SECOND stretch of that edge a point-drag every time — at the one
+    // height (on the envelope) where the user naturally grabs it.
     const onRangeSelect = vi.fn();
-    const { svg, props } = mount(sel, {
+    const { svg } = mount(pointOnEdge, {
       rangeSelection: { t0: 1, t1: 2 },
       onRangeSelect,
     });
-    fire(svg, "pointerdown", at(2, 0.8)); // exactly the point at t=2, which is also the right edge
+    fire(svg, "pointerdown", at(2, 0.8)); // the point at t=2, which is also the right edge
+    fire(svg, "pointermove", at(3, 0.8));
+    fire(svg, "pointerup", at(3, 0.8));
+    expect(onRangeSelect).toHaveBeenLastCalledWith(1, expect.closeTo(3, 1));
+  });
+
+  it("leaves that point reachable once the selection is gone", () => {
+    // The escape hatch the rule above depends on: no selection, no handle, so
+    // the point is an ordinary point again.
+    const onRangeSelect = vi.fn();
+    const { svg, props } = mount(pointOnEdge, { rangeSelection: null, onRangeSelect });
+    fire(svg, "pointerdown", at(2, 0.8));
     fire(svg, "pointermove", at(3, 0.8));
     fire(svg, "pointerup", at(3, 0.8));
-    // A point-drag moved just that point; the selection itself was untouched.
-    expect(onRangeSelect).not.toHaveBeenCalled();
     const written = props.onCommit.mock.calls.at(-1)?.[0] as HfAutomation;
     const times = (written.lanes[0]?.points ?? []).map((p) => p.t);
     expect(times).toContain(3);
   });
 
+  it("stretches the same edge twice in a row", () => {
+    // The whole point of the priority rule, end to end: two stretches of the
+    // right edge, the second grabbing the breakpoint the first one left there.
+    const onRangeSelect = vi.fn();
+    const { svg, props, rerender } = mountRerenderable(stretchable, {
+      rangeSelection: { t0: 0.5, t1: 2 },
+      onRangeSelect,
+    });
+    dragRightEdge(svg, 2, 2.6);
+    expect(onRangeSelect).toHaveBeenLastCalledWith(0.5, expect.closeTo(2.6, 1));
+    const afterFirst = props.onCommit.mock.calls.at(-1)?.[0] as HfAutomation;
+    // A breakpoint landed on the new edge, which is what used to disarm it.
+    expect((afterFirst.lanes[0]?.points ?? []).some((p) => Math.abs(p.t - 2.6) < 0.05)).toBe(true);
+
+    // The store comes back with the persisted envelope and the new selection.
+    rerender({ automation: afterFirst, rangeSelection: { t0: 0.5, t1: 2.6 } });
+    dragRightEdge(svg, 2.6, 3.4);
+    expect(onRangeSelect).toHaveBeenLastCalledWith(0.5, expect.closeTo(3.4, 1));
+    expect(props.onCommit).toHaveBeenCalledTimes(2);
+  });
+
+  it("keeps the far edge grabbable on a selection narrower than its own halos", () => {
+    // A selection this thin — a pasted short span, or any span at low zoom — has
+    // both handles under one press, so which edge a press takes is decided
+    // entirely by the midpoint split. Characterizing it here because nothing
+    // else does: every other test in this block has halos far enough apart that
+    // the rule never comes up.
+    const onRangeSelect = vi.fn();
+    const { svg } = mount(stretchable, {
+      rangeSelection: { t0: 2, t1: 2.08 }, // 8px wide at 100 px/s: both halos overlap
+      onRangeSelect,
+    });
+    fire(svg, "pointerdown", at(2.07, 0.5)); // nearer t1, inside t0's halo too
+    fire(svg, "pointermove", at(3, 0.5));
+    fire(svg, "pointerup", at(3, 0.5));
+    // t0 stayed put and t1 moved out: the press resolved to the right edge.
+    expect(onRangeSelect).toHaveBeenLastCalledWith(2, expect.closeTo(3, 1));
+  });
+
   it("clamps the dragged edge so it cannot cross its partner", () => {
     const onRangeSelect = vi.fn();
     const { svg } = mount(stretchable, {

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

@@ -301,7 +301,7 @@ export function TimelineAutomationLane({
         onPointerDown={gestures.onPointerDown}
         onPointerMove={gestures.onPointerMove}
         onPointerUp={gestures.endDrag}
-        onPointerCancel={gestures.endDrag}
+        onPointerCancel={gestures.cancelDrag}
         onDoubleClick={gestures.onDoubleClick}
         onContextMenu={onSvgContextMenu}
         role="group"

packages/studio/src/player/components/automationLanePointer.ts

@@ -0,0 +1,20 @@
+/**
+ * Pointer capture for a lane gesture. Its own module only because both gesture
+ * hooks need it and `automationLaneGeometry` is deliberately DOM-free.
+ */
+
+/**
+ * Keep the rest of a gesture even if the pointer leaves the lane. Without it a
+ * drag that strays outside the svg stops sending moves and the point sticks.
+ *
+ * Captured on the svg the handler is bound to, NOT on `e.target`: the target is
+ * whatever child the press happened to land on — a breakpoint circle, a
+ * selection line — and a child that unmounts mid-drag takes the capture with it,
+ * silently and with no `pointercancel` to notice it by. The svg outlives every
+ * gesture on it.
+ *
+ * Structurally typed so this stays testable without React's event types.
+ */
+export function capturePointer(e: { currentTarget: Element; pointerId: number }): void {
+  e.currentTarget.setPointerCapture?.(e.pointerId);
+}

packages/studio/src/player/components/automationLaneSelection.test.ts

@@ -116,15 +116,65 @@ describe("retimeRange", () => {
         5,
       );
     }
-    // The next real breakpoint past the edited region keeps its own exact
-    // value — growing past it reshapes the transition INTO it, not the point
-    // itself. (Sampling inside that transition, e.g. at t=5.1, is expected to
-    // differ: one of that segment's endpoints moved from t=3 to t=5, even
-    // though this point at t=6 did not move at all.)
+    // The next real breakpoint past the edited region keeps its own exact value.
     const farPoint = after.points.find((p) => p.t === 6);
     expect(farPoint).toEqual({ t: 6, v: 0 });
   });
 
+  it("preserves the envelope on BOTH sides when no breakpoint sits on the moved edge", () => {
+    // The right side is where the invariant is worth asserting — `newT0 === t0`
+    // makes the left side of the test above trivially true, and an earlier
+    // right-side probe at t=5.1 was DELETED as inherent when it was reporting
+    // the real behaviour below. With the selection's edges off any breakpoint,
+    // the guarantee holds exactly, in both directions.
+    const before: HfAutomationLane = { target: "volume", points: ramp.points };
+    const after: HfAutomationLane = {
+      target: "volume",
+      points: retimeRange({
+        lane: ramp,
+        range: VOLUME_RANGE,
+        t0: 2.2,
+        t1: 2.9,
+        newT0: 2.2,
+        newT1: 4,
+      }),
+    };
+    for (const t of [0, 1, 2, 4.5, 5, 5.5, 6]) {
+      expect(sampleAutomationLane(after, t, "linear")).toBeCloseTo(
+        sampleAutomationLane(before, t, "linear"),
+        5,
+      );
+    }
+  });
+
+  it("moves a breakpoint sitting exactly on the dragged edge, reshaping the segment past it", () => {
+    // The design decision this pins, because it is not free either way.
+    // `pointsIn` is endpoint-inclusive, so a breakpoint ON the edge is interior
+    // and travels with the stretch. It has to: every range operation leaves a
+    // breakpoint exactly on the edge it created, so treating that point as an
+    // anchor instead would make the commonest stretch — grabbing the edge to
+    // drag that very point outward — delete it and flatten the span.
+    //
+    // The cost is that the retimed point lands ON the union's boundary, where a
+    // preservation anchor would also go, and `anchor()` stands down within a
+    // merge radius. Two different values cannot occupy one time; the segment
+    // leaving the union reshapes, which is the "envelope outside the selection
+    // never moves" invariant bending exactly here and nowhere else.
+    const pts = retimeRange({ lane: ramp, range: VOLUME_RANGE, t0: 2, t1: 3, newT0: 2, newT1: 5 });
+    expect(pts).toEqual([
+      { t: 0, v: 1 },
+      { t: 2, v: 0.6 },
+      { t: 5, v: 0.4 }, // the t=3 point, retimed onto the new edge
+      { t: 6, v: 0 },
+    ]);
+    // The old 3→6 segment sloped -0.133/s; the new 5→6 slopes -0.4/s, so the
+    // envelope past the union genuinely moves. Asserted, not tolerated: if this
+    // number changes, the decision above changed with it.
+    const after: HfAutomationLane = { target: "volume", points: pts };
+    expect(sampleAutomationLane(after, 5.5, "linear")).toBeCloseTo(0.2, 5);
+    expect(sampleAutomationLane(ramp, 5.5, "linear")).toBeCloseTo(0.0667, 4);
+  });
+
   it("rejects a degenerate span", () => {
     expect(
       retimeRange({ lane: ramp, range: VOLUME_RANGE, t0: 2, t1: 3, newT0: 4, newT1: 4 }),

packages/studio/src/player/components/automationLaneSelection.ts

@@ -80,6 +80,16 @@ export function replaceRange(input: {
  * Retime a selection: interior points scale proportionally into the new span,
  * then replaceRange runs over the UNION of old and new spans — growing eats
  * whatever it covers, shrinking pins anchors where the envelope re-enters.
+ *
+ * Interior is `pointsIn`, so a breakpoint sitting exactly ON an edge travels
+ * with the stretch. Deliberate: every range operation leaves a breakpoint on the
+ * edge it created, so treating that point as a fixed anchor would make the
+ * commonest stretch of all — grabbing the edge to drag that point outward —
+ * delete it instead. The price is that such a point lands on the union's own
+ * boundary, where `anchor` then stands down (one time cannot hold two values),
+ * so the segment leaving the union reshapes. That is the ONE place
+ * `replaceRange`'s outside-never-moves invariant bends, and it is pinned by name
+ * in automationLaneSelection.test.ts.
  */
 export function retimeRange(input: {
   lane: HfAutomationLane;