fix(studio): put #3207's edge-stretch back, folded into the unified hook

The review blocks this PR for deleting a feature two PRs downstack:

  "#3209 deletes #3207 edge-stretch instead of folding it into the unified
  hook... merging the stack would ship #3207 and then silently remove its
  user-facing retime/edge-stretch feature."

Verified, all four claims: `useAutomationEdgeStretch.ts` (248 lines) and its
test were deleted, `retimeRange` was dropped from
`automationLaneSelection.ts`, and the consolidated hook has no edge
hit-test, arm/move/finish path, or resize cursor.

Restored: the module, `retimeRange`, the selection regressions, and the
lane wiring (`col-resize` cursor, `pointercancel` reverting a partial
retime rather than persisting it).

It is not a straight revert, because #3209 changed the selection from a
time range to a box. Edge-stretch now takes `{t0,t1,v0,v1}` and moves only
the time edges — the value extent rides through untouched, which keeps it
the same gesture it was.

**One arbitration call worth a second opinion.** #3207's rule was that a
selection's edge outranks a point sitting on it, because every range
operation leaves a breakpoint exactly on the edge it created — a
point-first rule made the second stretch of an edge resolve to a
point-drag. Under a box that rule now contradicts #3209's own test
("stops the group at a point it did not select"), which presses at t=0
v=1 — simultaneously the t0 edge and a selected point.

I inverted it: selected content wins, the edge stretches everywhere it is
not also selected content. The reasoning is that a box makes the point
visibly part of the selection, and dragging selected content has to move
it. That restores #3209's test and keeps the stretch usable along the rest
of the edge — but it is a product decision between two deliberate designs,
so flag it if #3207's original precedence was load-bearing.

954 player tests pass, including the 17 restored ones.

Author: vanceingalls

packages/studio/src/components/editor/PropertyPanelFlat.tsx

@@ -18,7 +18,6 @@ import { audioFxSummary } from "./audioFxSummary";
 import { AudioFxGroup } from "./propertyPanelAudioFxGroup";
 import { useVolumeAutomation } from "./useVolumeAutomation";
 import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
-import type { DomEditSelection } from "./domEditing";
 import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
 import { createGsapLivePreview } from "./gsapLivePreview";
 import { formatTextFieldPreview } from "./propertyPanelSections";

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

@@ -74,7 +74,11 @@ function pointInBox(point: HfAutomationPoint, box: SelectionBox | null | undefin
 }
 
 /** Pointer shape: a read-only lane can only be selected, a live one edited. */
-function laneCursor(readOnly: boolean | undefined, dragging: boolean): string {
+function laneCursor(readOnly: boolean | undefined, dragging: boolean, stretching: boolean): string {
+  // A stretch handle wins over everything it might also sit above: the handle is
+  // a few px wide and always overlaps whatever is under the selection edge, so
+  // any other cursor there would advertise a gesture the press will not start.
+  if (stretching) return "col-resize";
   if (readOnly) return "pointer";
   return dragging ? "grabbing" : "crosshair";
 }
@@ -229,7 +233,7 @@ export function TimelineAutomationLane({
     duration,
     rangeSelection,
   });
-  const { dragIndex, curveIndex, hint, editing } = gestures;
+  const { dragIndex, curveIndex, edgeDrag, edgeHover, hint, editing } = gestures;
 
   const removeAt = useCallback(
     (index: number): void => {
@@ -330,7 +334,11 @@ export function TimelineAutomationLane({
           top: 0,
           width: widthPx + PAD_X * 2,
           height: h,
-          cursor: laneCursor(readOnly, dragIndex !== null || curveIndex !== null),
+          cursor: laneCursor(
+            readOnly,
+            dragIndex !== null || curveIndex !== null,
+            edgeDrag !== null || edgeHover,
+          ),
           opacity: readOnly ? 0.55 : 1,
           touchAction: "none",
         }}
@@ -341,7 +349,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/automationLaneSelection.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { pointsIn, replaceRange } from "./automationLaneSelection";
+import { pointsIn, replaceRange, retimeRange } from "./automationLaneSelection";
 import { sampleAutomationLane, VOLUME_RANGE } from "@hyperframes/core/audio-automation";
 import type { HfAutomationLane } from "@hyperframes/core/audio-automation";
 
@@ -94,3 +94,89 @@ describe("replaceRange", () => {
     expect(Math.max(...innerTimes)).toBeGreaterThan(3.0);
   });
 });
+describe("retimeRange", () => {
+  it("scales interior points proportionally into the new span", () => {
+    const pts = retimeRange({ lane: ramp, range: VOLUME_RANGE, t0: 2, t1: 3, newT0: 2, newT1: 5 });
+    const moved = pts.find((p) => p.v === 0.4); // the t=3 point
+    expect(moved?.t).toBe(5);
+  });
+
+  it("preserves the envelope outside the union of old and new spans", () => {
+    const before: HfAutomationLane = { target: "volume", points: ramp.points };
+    const after: HfAutomationLane = {
+      target: "volume",
+      points: retimeRange({ lane: ramp, range: VOLUME_RANGE, t0: 2, t1: 3, newT0: 2, newT1: 5 }),
+    };
+    // Nothing to the left of t0=2 moved (newT0 === t0 here), so sampled
+    // continuity holds all the way up to the edited region.
+    for (const t of [0, 1, 1.9]) {
+      expect(sampleAutomationLane(after, t, "linear")).toBeCloseTo(
+        sampleAutomationLane(before, t, "linear"),
+        5,
+      );
+    }
+    // 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 }),
+    ).toEqual(ramp.points);
+  });
+});

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

@@ -94,3 +94,42 @@ export function pointInSelection(
 ): boolean {
   return point.t >= box.t0 && point.t <= box.t1 && point.v >= box.v0 && point.v <= box.v1;
 }
+/**
+ * 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;
+  range: AutomationRange;
+  t0: number;
+  t1: number;
+  newT0: number;
+  newT1: number;
+}): HfAutomationPoint[] {
+  const { lane, range, t0, t1, newT0, newT1 } = input;
+  const oldSpan = t1 - t0;
+  const newSpan = newT1 - newT0;
+  if (oldSpan <= 0 || newSpan <= 0) return lane.points;
+  const inner = pointsIn(lane, t0, t1).map((p) => ({
+    ...p,
+    t: newT0 + ((p.t - t0) * newSpan) / oldSpan,
+  }));
+  return replaceRange({
+    lane,
+    range,
+    t0: Math.min(t0, newT0),
+    t1: Math.max(t1, newT1),
+    inner,
+  });
+}

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

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { clampEdge } from "./useAutomationEdgeStretch";
+
+describe("clampEdge", () => {
+  it("keeps the dragged edge inside the clip", () => {
+    expect(clampEdge("t0", -5, { t0: 1, t1: 3 }, 4)).toBe(0);
+    expect(clampEdge("t1", 99, { t0: 1, t1: 3 }, 4)).toBe(4);
+  });
+
+  it("keeps the dragged edge clear of its partner", () => {
+    expect(clampEdge("t0", 3.5, { t0: 1, t1: 3 }, 4)).toBeCloseTo(2.98, 5);
+    expect(clampEdge("t1", 0.5, { t0: 1, t1: 3 }, 4)).toBeCloseTo(1.02, 5);
+  });
+
+  it("never yields a negative time, even when the partner bound is itself below zero", () => {
+    // A selection thinner than the minimum width has no legal t0 at all. Bounding
+    // against the partner AFTER the 0-floor returned that illegal value, and
+    // core's cleanPoint collapses a negative time onto a duplicate t=0 on the
+    // next serialize round-trip — silent envelope corruption, not a visible bug.
+    expect(clampEdge("t0", -1, { t0: 0.004, t1: 0.01 }, 4)).toBe(0);
+    expect(clampEdge("t0", 0.008, { t0: 0.004, t1: 0.01 }, 4)).toBe(0);
+  });
+
+  it("never yields a time past the clip when the partner bound is past it", () => {
+    expect(clampEdge("t1", 99, { t0: 3.995, t1: 4 }, 4)).toBe(4);
+  });
+});