@hyperframes/studio 0.8.89 → 0.8.91

package/src/player/components/TimelineTypes.ts

@@ -15,7 +15,7 @@ export interface TimelineProps
   extends TimelineDropCallbacks, TimelineEditOverrides, TimelineStackingSyncProps {
   /** Project-scoped reset boundary; soft source refreshes retain the same epoch. */
   sessionEpoch?: number;
-  onSeek?: (time: number, options?: { keepPlaying?: boolean }) => void;
+  onSeek?: (time: number, options?: { keepPlaying?: boolean; follow?: boolean }) => void;
   onDrillDown?: (element: TimelineElement) => void;
   /** Picture only: takes no pointer input. Interactive content goes in renderClipOverlay. */
   renderClipContent?: (

package/src/player/components/timelineClipDragCommit.test.ts

@@ -315,7 +315,6 @@ describe("commitDraggedClipMove", () => {
     const child = {
       ...el("scene.html#title", 0.25, 12, 2),
       sourceFile: "scene.html",
-      expandedParentStart: 10,
       expandedHostKey: "host",
     };
     const { updateElement, onMoveElement, onMoveElements } = runClipMove(
@@ -338,7 +337,6 @@ describe("commitDraggedClipMove", () => {
     const child = {
       ...el("scene.html#title", 0.25, 12, 2),
       sourceFile: "scene.html",
-      expandedParentStart: 10,
       expandedHostKey: "host",
     };
     const { onMoveElement, onMoveElements } = runClipMove(
@@ -360,7 +358,6 @@ describe("commitDraggedClipMove", () => {
     const child = {
       ...el("scene.html#title", 0.25, 12, 2),
       sourceFile: "scene.html",
-      expandedParentStart: 10,
       expandedHostKey: "host",
     };
     const { onMoveElement, onMoveElements } = runClipMove(
@@ -382,7 +379,6 @@ describe("commitDraggedClipMove", () => {
     const child = {
       ...el("scene.html#title", 0.25, 12, 2),
       sourceFile: "scene.html",
-      expandedParentStart: 10,
       expandedHostKey: "host",
     };
     const { onMoveElement, onMoveElements } = runClipMove(
@@ -406,7 +402,6 @@ describe("commitDraggedClipMove", () => {
     const child = {
       ...el("scene.html#title", 0.25, 12, 2),
       sourceFile: "scene.html",
-      expandedParentStart: 10,
       expandedHostKey: "host",
     };
     const { onMoveElement, onMoveElements } = runClipMove(
@@ -1279,7 +1274,6 @@ describe("commitDraggedClipMove", () => {
         const child: TimelineElement = {
           ...el("child", 2, childStart, 4),
           expandedHostKey: "host",
-          expandedParentStart: hostStart,
         };
         const { onMoveElements } = runClipMove(
           drag(child, { previewStart: childStart, previewTrack: 0 }),
@@ -1399,12 +1393,10 @@ describe("commitZMirrorLaneMove", () => {
     const child1 = {
       ...el("child-1", 0.25, 0, 5),
       sourceFile: "scene.html",
-      expandedParentStart: 0,
     };
     const child2 = {
       ...el("child-2", 0.5, 0, 5),
       sourceFile: "scene.html",
-      expandedParentStart: 0,
     };
     const b = { ...el("b", 1, 0, 5), sourceFile: "index.html" };
     const t = { ...el("t", 2, 0, 5), sourceFile: "index.html" };
@@ -1516,6 +1508,24 @@ describe("commitZMirrorLaneMove", () => {
   });
 });
 
+describe("persistMoveEdits: a nested row dropped before its host", () => {
+  it("lands at the host's start in the store and in the persist", async () => {
+    const logo = { ...el("logo", 0, 5, 5, "div"), parentCompositionStart: 2 };
+    const updateElement = vi.fn();
+    const onMoveElements = vi.fn(async (_edits: TimelineMoveEdit[]) => {});
+    await persistMoveEdits([{ element: logo, updates: { start: 1, track: 0 } }], {
+      elements: [logo],
+      trackOrder: [0],
+      updateElement,
+      onMoveElements,
+    });
+    expect(updateElement).toHaveBeenCalledWith("logo", { start: 2, track: 0 });
+    expect(onMoveElements.mock.calls[0]?.[0]).toEqual([
+      { element: logo, updates: { start: 2, track: 0 } },
+    ]);
+  });
+});
+
 describe("persistMoveEdits convergence", () => {
   it("reasserts a saved lane after a stale runtime sync", async () => {
     const clip = { ...el("headline", 2, 0.5, 4.9), authoredTrack: 2 };

package/src/player/components/timelineClipDragCommit.ts

@@ -1,4 +1,5 @@
 import type { TimelineElement } from "../store/playerStore";
+import { clampToHostStart } from "../store/timelineElement";
 import type { DraggedClipState } from "./useTimelineClipDrag";
 // Type-only: erased at runtime, so the timelineZMirror → timelineClipDragCommit
 // value-import edge stays acyclic.
@@ -107,6 +108,10 @@ export function persistMoveEdits(
   coalesceMs?: number,
 ): Promise<boolean> {
   if (edits.length === 0) return Promise.resolve(true);
+  edits = edits.map((e) => {
+    const start = clampToHostStart(e.element, e.updates.start);
+    return start === e.updates.start ? e : { ...e, updates: { ...e.updates, start } };
+  });
   const { updateElement, onMoveElement, onMoveElements } = deps;
   if (!onMoveElements) {
     console.warn(

package/src/player/components/timelineClipDragPreview.test.ts

@@ -7,7 +7,7 @@ import {
   type DragPreviewContext,
 } from "./timelineClipDragPreview";
 import type { DraggedClipState } from "./timelineClipDragTypes";
-import { commitDraggedClipMove } from "./timelineClipDragCommit";
+import { commitDraggedClipMove, persistMoveEdits } from "./timelineClipDragCommit";
 import { LANE_H, RULER_H, TRACKS_TOP_PAD, TRACK_H } from "./timelineLayout";
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -456,7 +456,6 @@ describe("computeDragPreview — the ghost start is the committed start", () =>
       const child: TimelineElement = {
         ...clip("child", 2, childStart, 4, 5),
         expandedHostKey: "host",
-        expandedParentStart: hostStart,
       };
       const elements = [host, child];
       const keys = new Set(["host", "child"]);
@@ -467,3 +466,72 @@ describe("computeDragPreview — the ghost start is the committed start", () =>
     }
   });
 });
+
+describe("a nested clip's drop stops at its host's start in the preview", () => {
+  // Host at 2 s: the clip may not start before 2 unless it was authored there.
+  const logo: TimelineElement = { ...clip("logo", 0, 5, 5, 0, "div"), parentCompositionStart: 2 };
+  const saved = async (element: TimelineElement, start: number) => {
+    const updateElement = vi.fn();
+    await persistMoveEdits([{ element, updates: { start, track: element.track } }], {
+      elements: [element],
+      trackOrder: [0, 1, 2],
+      updateElement,
+      onMoveElements: vi.fn(async () => {}),
+    });
+    return updateElement.mock.calls[0]?.[1]?.start;
+  };
+
+  it("holds a drop that snapping would put before the host, and saves the same start", async () => {
+    const { drag, clientX, clientY } = horizontalDrag(logo, 0.5, -3.9);
+    const next = computeDragPreview(drag, clientX, clientY, {
+      ...ctx(undefined, [logo]),
+      buildSnapTargets: () => [{ time: 1.9, type: "beat" }],
+    });
+    expect(next.previewStart).toBe(2);
+    expect(next.snapTime).toBeNull();
+    expect(await saved(logo, next.previewStart)).toBe(2);
+  });
+
+  it("snaps from the floor, so an edge just past the host's start still catches", () => {
+    const { drag, clientX, clientY } = horizontalDrag(logo, 0.5, -3.9);
+    const next = computeDragPreview(drag, clientX, clientY, {
+      ...ctx(undefined, [logo]),
+      buildSnapTargets: () => [{ time: 2.1, type: "beat" }],
+    });
+    expect(next).toMatchObject({ previewStart: 2.1, snapTime: 2.1 });
+  });
+
+  it("keeps a mixed group's spacing when the nested member meets its floor", () => {
+    // Grab the top-level member: only the group clamp knows the nested one's floor.
+    const outro = clip("outro", 1, 8, 2, 0, "div");
+    const { drag, clientX, clientY } = horizontalDrag(outro, 1.5, -7);
+    const next = computeDragPreview(drag, clientX, clientY, {
+      ...ctx(undefined, [logo, outro]),
+      selectedKeys: new Set(["logo", "outro"]),
+    });
+    expect(next.previewStart).toBe(5);
+  });
+
+  it("leaves a clip authored before its host's start in place when grabbed", async () => {
+    const early: TimelineElement = { ...logo, id: "early", key: "early", domId: "early", start: 1 };
+    const { drag, clientX, clientY } = horizontalDrag(early, 0.5, 0);
+    expect(computeDragPreview(drag, clientX, clientY, ctx(undefined, [early])).previewStart).toBe(
+      1,
+    );
+    const trim = computeResizePreview(
+      {
+        element: early,
+        edge: "start",
+        originClientX: 0,
+        previewStart: 1,
+        previewDuration: 5,
+        started: true,
+        pointerId: 0,
+      },
+      0,
+      { scroll: fakeScroll(), pps: PPS, buildSnapTargets: () => [] },
+    );
+    expect(trim).toMatchObject({ previewStart: 1, previewDuration: 5 });
+    expect(await saved(early, 1)).toBe(1);
+  });
+});

package/src/player/components/timelineClipDragPreview.ts

@@ -5,6 +5,7 @@ import {
   resolveTimelineMinDuration,
 } from "./timelineGroupEditing";
 import type { TimelineElement } from "../store/playerStore";
+import { clampToHostStart } from "../store/timelineElement";
 import {
   getTimelineInsertBoundaryBand,
   getTimelineRowFromY,
@@ -80,10 +81,10 @@ function resolveDragMaxStart(scroll: HTMLDivElement | null, pps: number, duratio
 /**
  * Rigid group move: when the grabbed clip is part of a multi-selection, the
  * WHOLE formation shifts by its delta on commit (see timelineClipDragCommit).
- * Clamp that delta here — against every selected member's start — so the
- * grabbed clip can't out-run the group: it STOPS the instant any member would
- * cross 0, exactly as it lands on commit. Lane changes still apply to the
- * grabbed clip only, so only the start (x) is constrained.
+ * Clamp that delta here, and a lone clip's as a group of one, so the grabbed
+ * clip STOPS the instant any member would cross its floor (clampToHostStart),
+ * exactly as it lands on commit. Lane changes still apply to the grabbed clip
+ * only, so only the start (x) is constrained.
  */
 function resolveGroupClampedStart(
   snapStart: number,
@@ -92,10 +93,10 @@ function resolveGroupClampedStart(
   elements: TimelineElement[],
   selectedKeys: ReadonlySet<string>,
 ): number {
-  if (selectedKeys.size <= 1 || !selectedKeys.has(dragKey)) return snapStart;
-  const memberStarts = elements.filter((e) => selectedKeys.has(e.key ?? e.id)).map((e) => e.start);
-  const clampedDelta = clampGroupMoveDelta(snapStart - element.start, memberStarts);
-  return element.start + clampedDelta;
+  const inGroup = selectedKeys.size > 1 && selectedKeys.has(dragKey);
+  const members = inGroup ? elements.filter((e) => selectedKeys.has(e.key ?? e.id)) : [element];
+  const floors = members.map((e) => ({ start: e.start, minStart: clampToHostStart(e, 0) }));
+  return element.start + clampGroupMoveDelta(snapStart - element.start, floors);
 }
 
 /**
@@ -173,6 +174,7 @@ export function computeDragPreview(
       originScrollLeft: drag.originScrollLeft,
       currentScrollLeft: scroll?.scrollLeft ?? drag.originScrollLeft,
       pixelsPerSecond: pps,
+      minStart: clampToHostStart(drag.element, 0),
       maxStart: dragMaxStart,
       trackOrder,
     },
@@ -226,8 +228,8 @@ export function computeDragPreview(
     // deliberate vertical lane change from a horizontal drag merely bumped sideways.
     desiredTrack: nextMove.track,
     insertRow,
-    snapTime: snap.snapTime,
-    snapType: snap.snapType,
+    snapTime: previewStart === snap.start ? snap.snapTime : null,
+    snapType: previewStart === snap.start ? snap.snapType : null,
   };
 }
 
@@ -293,7 +295,7 @@ export function computeResizePreview(
       duration: resize.element.duration,
       originClientX: resize.originClientX,
       pixelsPerSecond: pps,
-      minStart: 0,
+      minStart: clampToHostStart(resize.element, 0),
       maxEnd,
       playbackStart:
         resize.edge === "start" && canSeedPlaybackStart
@@ -336,7 +338,8 @@ export function computeResizePreview(
       const { time: snapped, target } = snapTimelineTime(nextResize.start, trimTargets, snapSecs);
       const clip = { ...nextResize, playbackRate: resize.element.playbackRate };
       const delta = snapped - nextResize.start;
-      const bounds = clipStartTrimDeltaBounds(clip, 0, resolveTimelineMinDuration());
+      const floor = clampToHostStart(resize.element, 0);
+      const bounds = clipStartTrimDeltaBounds(clip, floor, resolveTimelineMinDuration());
       if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
         if (snapped !== nextResize.start) nextResize = applyClipStartTrimDelta(clip, delta);
         snap = target;

package/src/player/components/timelineEditing.ts

@@ -51,6 +51,7 @@ export interface TimelineMoveInput {
   originScrollLeft?: number;
   currentScrollLeft?: number;
   pixelsPerSecond: number;
+  minStart?: number;
   maxStart: number;
   trackOrder: number[];
   layerOrder?: TimelineLayerId[];
@@ -127,7 +128,7 @@ export function resolveTimelineMove(
   const deltaTrack = Math.round(trackDeltaRaw);
   const nextStart = clamp(
     roundToCentiseconds(input.start + deltaTime),
-    0,
+    input.minStart ?? 0,
     Math.max(0, input.maxStart),
   );
 

package/src/player/components/timelineGroupEditing.ts

@@ -1,6 +1,7 @@
 import { clampPlaybackRate } from "@hyperframes/parsers/media-duration";
 import { roundToCenti } from "../../utils/rounding";
 import type { TimelineElement } from "../store/playerStore";
+import { clampToHostStart } from "../store/timelineElement";
 import { getTimelineEditCapabilities } from "./timelineEditCapabilities";
 
 const DEFAULT_TIMELINE_MIN_DURATION = 0.1;
@@ -88,6 +89,7 @@ export interface TimelineGroupTimingMember {
   duration: number;
   playbackStart?: number;
   playbackRate?: number;
+  minStart?: number;
 }
 
 export type TimelineGroupResizeEdge = "start" | "end";
@@ -107,7 +109,7 @@ function clampTimelineGroupMoveDelta(
   members: readonly TimelineGroupTimingMember[],
 ): number {
   if (members.length === 0) return 0;
-  const minDelta = Math.max(...members.map((member) => -member.start));
+  const minDelta = Math.max(...members.map((member) => -(member.start - (member.minStart ?? 0))));
   return roundTimelineTime(Math.max(rawDelta, minDelta));
 }
 
@@ -139,7 +141,9 @@ export function clampTimelineGroupResizeDelta(
   }
 
   // Rigid group: the applied delta is bounded by the most-constrained member.
-  const bounds = members.map((member) => clipStartTrimDeltaBounds(member, 0, minDuration));
+  const bounds = members.map((member) =>
+    clipStartTrimDeltaBounds(member, member.minStart ?? 0, minDuration),
+  );
   const minDelta = ceilTimelineTime(Math.max(...bounds.map((b) => b.minDelta)));
   const maxDelta = Math.min(...bounds.map((b) => b.maxDelta));
   const delta = roundTimelineTime(clamp(rawDelta, minDelta, maxDelta));
@@ -243,6 +247,7 @@ export function buildTimelineGroupResizeMembers(
         ? (element.playbackStart ?? 0)
         : element.playbackStart,
     playbackRate: element.playbackRate,
+    minStart: clampToHostStart(element, 0),
   }));
 }
 

package/src/player/components/timelineMultiDragPreview.test.ts

@@ -17,6 +17,8 @@ const base = (over: Partial<MultiDragPreviewInput> = {}): MultiDragPreviewInput
   ...over,
 });
 
+const starts = (...values: number[]) => values.map((start) => ({ start }));
+
 describe("isMultiDragActive", () => {
   it("is active when a started drag's clip is part of a 2+ selection", () => {
     expect(isMultiDragActive(base())).toBe(true);
@@ -94,34 +96,34 @@ describe("multiDragPassengerOffsetPx (rigid: every passenger shares the delta)",
 
 describe("clampGroupMoveDelta (rigid group move)", () => {
   it("passes a rightward delta through unchanged (no right wall)", () => {
-    expect(clampGroupMoveDelta(3, [2, 5, 9])).toBe(3);
-    expect(clampGroupMoveDelta(1000, [0, 4])).toBe(1000);
+    expect(clampGroupMoveDelta(3, starts(2, 5, 9))).toBe(3);
+    expect(clampGroupMoveDelta(1000, starts(0, 4))).toBe(1000);
   });
 
   it("passes a leftward delta through when no member would cross 0", () => {
     // Leftmost member at 5, moving left by 3 → 2 ≥ 0, so unclamped.
-    expect(clampGroupMoveDelta(-3, [5, 8, 12])).toBe(-3);
+    expect(clampGroupMoveDelta(-3, starts(5, 8, 12))).toBe(-3);
   });
 
   it("clamps a leftward delta so the leftmost member stops exactly at 0", () => {
     // Leftmost at 2 → the furthest left the group can move is -2 (that member → 0).
     // A pointer asking for -5 is clamped to -2: the grabbed clip stops with the
     // formation instead of out-running it.
-    expect(clampGroupMoveDelta(-5, [2, 6, 10])).toBe(-2);
+    expect(clampGroupMoveDelta(-5, starts(2, 6, 10))).toBe(-2);
   });
 
   it("is bounded by the MOST-constrained (leftmost) member, not the grabbed one", () => {
     // Grabbed clip is at 10; a passenger at 1 is the constraint. Max left = -1.
-    expect(clampGroupMoveDelta(-8, [10, 1, 4])).toBe(-1);
+    expect(clampGroupMoveDelta(-8, starts(10, 1, 4))).toBe(-1);
   });
 
   it("already-at-0 member forbids any leftward move", () => {
-    expect(clampGroupMoveDelta(-4, [0, 3, 7])).toBe(0);
+    expect(clampGroupMoveDelta(-4, starts(0, 3, 7))).toBe(0);
     // rightward still allowed
-    expect(clampGroupMoveDelta(2, [0, 3, 7])).toBe(2);
+    expect(clampGroupMoveDelta(2, starts(0, 3, 7))).toBe(2);
   });
 
   it("returns the raw delta for an empty formation", () => {
-    expect(clampGroupMoveDelta(-9, [])).toBe(-9);
+    expect(clampGroupMoveDelta(-9, starts())).toBe(-9);
   });
 });

package/src/player/components/timelineMultiDragPreview.ts

@@ -97,10 +97,13 @@ export function multiDragPassengerOffsetPx(
  * included). Only the lower bound (start ≥ 0) constrains a move; the timeline has
  * no fixed right wall (the composition grows on commit).
  */
-export function clampGroupMoveDelta(rawDelta: number, memberStarts: readonly number[]): number {
-  if (memberStarts.length === 0) return rawDelta;
-  // Leftmost member sets the floor: delta ≥ -min(start) keeps every start ≥ 0.
-  const minStart = Math.min(...memberStarts);
-  const minDelta = minStart === 0 ? 0 : -minStart; // avoid -0
+export function clampGroupMoveDelta(
+  rawDelta: number,
+  members: readonly { start: number; minStart?: number }[],
+): number {
+  if (members.length === 0) return rawDelta;
+  // The member nearest its own floor bounds the move: delta ≥ -(start - minStart) for each.
+  const room = Math.min(...members.map((m) => m.start - (m.minStart ?? 0)));
+  const minDelta = room === 0 ? 0 : -room; // avoid -0
   return rawDelta < minDelta ? minDelta : rawDelta;
 }

package/src/player/components/timelineProviderStateBuilders.test.ts

@@ -27,6 +27,7 @@ function inputs(overrides: Partial<TimelineMetaBuilderInputs> = {}): TimelineMet
       ref: vi.fn(),
       tabIndex: -1,
       labelMode: false,
+      contentOrigin: 80,
       zoomMode: "fit",
       onScroll: vi.fn(),
       onFocus: vi.fn(),

package/src/player/components/timelineProviderStateBuilders.ts

@@ -46,9 +46,13 @@ type ContainerInputs = Omit<TimelineContainerProps, "className"> & {
 
 type ViewportInputs = Omit<
   TimelineViewportProps,
-  "className" | "data-timeline-scroll-viewport" | "data-timeline-auto-scroll-left-inset"
+  | "className"
+  | "data-timeline-scroll-viewport"
+  | "data-timeline-auto-scroll-left-inset"
+  | "data-timeline-content-origin"
 > & {
   labelMode: boolean;
+  contentOrigin: number;
   zoomMode: "fit" | "manual";
 };
 
@@ -69,7 +73,7 @@ export function buildTimelineMeta({
   labelColumnWidth,
   razorGuide,
 }: TimelineMetaBuilderInputs): TimelineMeta {
-  const { labelMode, zoomMode, ...viewportProps } = viewport;
+  const { labelMode, zoomMode, contentOrigin, ...viewportProps } = viewport;
   const containerClassName = `relative border-t select-none h-full overflow-hidden ${container.isDragOver ? container.accentClass : ""} ${container.activeTool === "razor" ? "cursor-crosshair" : container.shiftHeld ? "cursor-crosshair" : "cursor-default"}`;
   const viewportClassName = `${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full outline-hidden`;
   return {
@@ -87,6 +91,7 @@ export function buildTimelineMeta({
       ...viewportProps,
       "data-timeline-scroll-viewport": true,
       "data-timeline-auto-scroll-left-inset": labelMode ? labelColumnWidth : 0,
+      "data-timeline-content-origin": contentOrigin,
       className: viewportClassName,
     },
     razorGuide,

package/src/player/components/timelineZMirror.test.ts

@@ -622,7 +622,7 @@ describe("expanded sub-comp children — lane scoping", () => {
   const child = (id: string, track: number, start: number, duration: number) =>
     el(id, track, start, duration, {
       sourceFile: "scene.html",
-      expandedParentStart: 5,
+      expandedHostKey: "host",
     });
 
   it("a child mirrors onto a SIBLING's lane and persists the sibling's AUTHORED track", () => {
@@ -630,7 +630,7 @@ describe("expanded sub-comp children — lane scoping", () => {
     // file) but sits elsewhere in time → its lane is free over t's span.
     const c1 = el("c1", 0.25, 20, 3, {
       sourceFile: "scene.html",
-      expandedParentStart: 5,
+      expandedHostKey: "host",
       authoredTrack: 2,
     });
     const c2 = child("c2", 0.5, 5, 5);

package/src/player/components/timelineZMirror.ts

@@ -102,7 +102,7 @@ function expandedChildAllowedLanes(
   element: TimelineElement,
   elements: TimelineElement[],
 ): ReadonlySet<number> | null {
-  if (element.expandedParentStart == null) return null;
+  if (element.expandedHostKey == null) return null;
   const selfKey = keyOf(element);
   return new Set(
     elements

package/src/player/components/useTimelineClipDrag.resize.test.tsx

@@ -513,9 +513,9 @@ describe("useTimelineClipDrag — trim guide and preview frame", () => {
     const h = renderResizeHarness([a], [], { onSeek });
     h.startResize(a, "end");
     h.movePointer(50);
-    expect(onSeek).toHaveBeenLastCalledWith(3.5 - 1 / 30, { keepPlaying: true });
+    expect(onSeek).toHaveBeenLastCalledWith(3.5 - 1 / 30, { keepPlaying: true, follow: false });
     await h.dropPointer();
-    expect(onSeek).toHaveBeenLastCalledWith(1.25, { keepPlaying: true });
+    expect(onSeek).toHaveBeenLastCalledWith(1.25, { keepPlaying: true, follow: false });
     h.unmount();
   });
 
@@ -525,7 +525,7 @@ describe("useTimelineClipDrag — trim guide and preview frame", () => {
     const h = renderResizeHarness([a], [], { onSeek });
     h.startResize(a, "start");
     h.movePointer(50);
-    expect(onSeek).toHaveBeenLastCalledWith(1.5, { keepPlaying: true });
+    expect(onSeek).toHaveBeenLastCalledWith(1.5, { keepPlaying: true, follow: false });
     h.unmount();
   });
 
@@ -545,7 +545,7 @@ describe("useTimelineClipDrag — trim guide and preview frame", () => {
     h.movePointer(80);
     h.movePointer(120);
     await h.dropPointer();
-    expect(onSeek).toHaveBeenLastCalledWith(1.25, { keepPlaying: true });
+    expect(onSeek).toHaveBeenLastCalledWith(1.25, { keepPlaying: true, follow: false });
     h.unmount();
   });
 
@@ -571,7 +571,10 @@ describe("useTimelineClipDrag — trim guide and preview frame", () => {
     const clip = h.getResizingClip()!;
     expect(clip.previewStart + clip.previewDuration).toBeCloseTo(3.1, 3);
     expect(clip).toMatchObject({ snapTime: null, snapType: null });
-    expect(onSeek).toHaveBeenLastCalledWith(expect.closeTo(3.1 - 1 / 30, 3), { keepPlaying: true });
+    expect(onSeek).toHaveBeenLastCalledWith(expect.closeTo(3.1 - 1 / 30, 3), {
+      keepPlaying: true,
+      follow: false,
+    });
     h.unmount();
   });
 });

package/src/player/components/useTimelineClipDrag.ts

@@ -66,7 +66,7 @@ interface UseTimelineClipDragInput {
   onResizeElements?: NonNullable<TimelineEditCallbacks["onResizeElements"]>;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedClipState["intent"]) => void;
   /** Seeks the preview; a trim shows the frame at its dragged edge. */
-  onSeek?: (time: number, options?: { keepPlaying?: boolean }) => void;
+  onSeek?: (time: number, options?: { keepPlaying?: boolean; follow?: boolean }) => void;
   setShowPopover: (show: boolean) => void;
   /** Stable ref to the range selection setter — wired after mount to break circular dependency. */
   setRangeSelectionRef: React.RefObject<((sel: null) => void) | null>;
@@ -311,6 +311,7 @@ export function useTimelineClipDrag({
         // and it only resumes playback if it was already playing.
         onSeekRef.current?.(trimPreviewTime(resize.edge, v.previewStart, v.previewDuration), {
           keepPlaying: true,
+          follow: false,
         });
         publishResizingClip(
           resizingClipRef.current ? { ...resizingClipRef.current, started: true, ...v } : null,
@@ -361,7 +362,7 @@ export function useTimelineClipDrag({
     if (trimSeekOriginRef.current != null) {
       // Paused: put the playhead back. Playing: leave it, a backward jump would rewind live playback.
       if (!usePlayerStore.getState().isPlaying) {
-        onSeekRef.current?.(trimSeekOriginRef.current, { keepPlaying: true });
+        onSeekRef.current?.(trimSeekOriginRef.current, { keepPlaying: true, follow: false });
       }
       trimSeekOriginRef.current = null;
     }