@hyperframes/studio 0.7.45 → 0.7.47

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

@@ -4,14 +4,19 @@ import {
   buildPromptCopyText,
   buildTimelineElementAgentPrompt,
   buildTimelineAgentPrompt,
+  clampTimelineGroupResizeDelta,
   getTimelineEditCapabilities,
   hasPatchableTimelineTarget,
   resolveBlockedTimelineEditIntent,
   resolveTimelineAutoScroll,
   resolveTimelineMove,
   resolveTimelineResize,
+  resolveTimelineGroupMove,
+  resolveTimelineGroupResize,
+  snapKeyframePctToBeat,
   type TimelinePromptElement,
 } from "./timelineEditing";
+import { buildStackingTimelineLayers } from "./timelineTrackOrder";
 
 describe("resolveTimelineMove", () => {
   it("moves timing based on horizontal drag and snaps to centiseconds", () => {
@@ -155,6 +160,220 @@ describe("resolveTimelineMove", () => {
       ),
     ).toEqual({ start: 2, track: 2 });
   });
+
+  it("snaps conflicting vertical stacking movement to a new lane without changing data-track-index", () => {
+    const stackingElements = [
+      {
+        id: "root-front",
+        tag: "div",
+        start: 0,
+        duration: 2,
+        track: 0,
+        zIndex: 2,
+        hasExplicitZIndex: true,
+        stackingContextId: "root",
+        parentCompositionId: null,
+        compositionAncestors: ["root"],
+      },
+      {
+        id: "root-back",
+        tag: "div",
+        start: 0,
+        duration: 2,
+        track: 1,
+        zIndex: 1,
+        hasExplicitZIndex: true,
+        stackingContextId: "root",
+        parentCompositionId: null,
+        compositionAncestors: ["root"],
+      },
+    ];
+    const layers = buildStackingTimelineLayers(stackingElements).rows;
+    const result = resolveTimelineMove(
+      {
+        start: 0,
+        track: 1,
+        duration: 2,
+        originClientX: 0,
+        originClientY: 0,
+        pixelsPerSecond: 100,
+        trackHeight: 72,
+        maxStart: 8,
+        trackOrder: [0, 1],
+        layerOrder: layers.map((layer) => layer.id),
+        timelineLayers: layers,
+        stackingElement: stackingElements[1],
+        stackingElements,
+      },
+      0,
+      -72,
+    );
+
+    expect(result).toEqual({
+      start: 0,
+      track: 1,
+      previewLayerId: `preview:root-back:above:${layers[0]!.id}`,
+      previewLayerIndex: 0,
+      stackingReorder: {
+        contextKey: "root",
+        placement: { type: "above", layerId: layers[0]!.id },
+        zIndexChanges: [{ key: "root-back", zIndex: 3 }],
+      },
+    });
+  });
+});
+
+describe("resolveTimelineGroupMove", () => {
+  it("applies an unclamped delta uniformly", () => {
+    const result = resolveTimelineGroupMove(
+      [
+        { start: 1, duration: 2 },
+        { start: 4, duration: 3 },
+      ],
+      1.25,
+    );
+
+    expect(result).toEqual({
+      delta: 1.25,
+      members: [
+        { start: 2.25, duration: 2 },
+        { start: 5.25, duration: 3 },
+      ],
+    });
+  });
+
+  it("clamps the whole group when the earliest start reaches zero", () => {
+    const result = resolveTimelineGroupMove(
+      [
+        { start: 1, duration: 2 },
+        { start: 5, duration: 3 },
+      ],
+      -3,
+    );
+
+    expect(result).toEqual({
+      delta: -1,
+      members: [
+        { start: 0, duration: 2 },
+        { start: 4, duration: 3 },
+      ],
+    });
+    expect(result.members[1]!.start - result.members[0]!.start).toBe(4);
+  });
+});
+
+describe("resolveTimelineGroupResize", () => {
+  it("returns the shared clamped delta without applying per-member starts", () => {
+    expect(
+      clampTimelineGroupResizeDelta(
+        1,
+        [
+          { start: 1, duration: 0.5 },
+          { start: 4, duration: 2 },
+        ],
+        "start",
+      ),
+    ).toBe(0.4);
+  });
+
+  it("applies an unclamped start-edge delta uniformly", () => {
+    const result = resolveTimelineGroupResize(
+      [
+        { start: 1, duration: 3 },
+        { start: 5, duration: 4 },
+      ],
+      "start",
+      1,
+    );
+
+    expect(result).toEqual({
+      delta: 1,
+      members: [
+        { start: 2, duration: 2, playbackStart: undefined },
+        { start: 6, duration: 3, playbackStart: undefined },
+      ],
+    });
+    expect(result.members[1]!.start - result.members[0]!.start).toBe(4);
+  });
+
+  it("clamps a start-edge delta when the earliest member reaches zero", () => {
+    const result = resolveTimelineGroupResize(
+      [
+        { start: 0.5, duration: 3 },
+        { start: 4, duration: 4 },
+      ],
+      "start",
+      -2,
+    );
+
+    expect(result).toEqual({
+      delta: -0.5,
+      members: [
+        { start: 0, duration: 3.5, playbackStart: undefined },
+        { start: 3.5, duration: 4.5, playbackStart: undefined },
+      ],
+    });
+    expect(result.members[1]!.start - result.members[0]!.start).toBe(3.5);
+  });
+
+  it("clamps a start-edge delta when any member reaches minimum duration", () => {
+    const result = resolveTimelineGroupResize(
+      [
+        { start: 1, duration: 0.5 },
+        { start: 4, duration: 2 },
+      ],
+      "start",
+      1,
+    );
+
+    expect(result).toEqual({
+      delta: 0.4,
+      members: [
+        { start: 1.4, duration: 0.1, playbackStart: undefined },
+        { start: 4.4, duration: 1.6, playbackStart: undefined },
+      ],
+    });
+    expect(result.members[1]!.start - result.members[0]!.start).toBeCloseTo(3);
+  });
+
+  it("clamps an end-edge delta when any member reaches minimum duration", () => {
+    const result = resolveTimelineGroupResize(
+      [
+        { start: 1, duration: 0.5 },
+        { start: 4, duration: 2 },
+      ],
+      "end",
+      -1,
+    );
+
+    expect(result).toEqual({
+      delta: -0.4,
+      members: [
+        { start: 1, duration: 0.1, playbackStart: undefined },
+        { start: 4, duration: 1.6, playbackStart: undefined },
+      ],
+    });
+    expect(result.members[1]!.start - result.members[0]!.start).toBe(3);
+  });
+
+  it("adjusts each start-edge playback start using the shared delta", () => {
+    const result = resolveTimelineGroupResize(
+      [
+        { start: 2, duration: 3, playbackStart: 1, playbackRate: 1 },
+        { start: 5, duration: 4, playbackStart: 2, playbackRate: 2 },
+      ],
+      "start",
+      0.5,
+    );
+
+    expect(result).toEqual({
+      delta: 0.5,
+      members: [
+        { start: 2.5, duration: 2.5, playbackStart: 1.5 },
+        { start: 5.5, duration: 3.5, playbackStart: 3 },
+      ],
+    });
+  });
 });
 
 describe("hasPatchableTimelineTarget", () => {
@@ -474,7 +693,7 @@ describe("buildTimelineAgentPrompt", () => {
       prompt: "Move the title later and lower the music",
     });
 
-    expect(text).toContain("Time range: 0:01 — 0:04");
+    expect(text).toContain("Time range: 0:01 - 0:04");
     expect(text).toContain("#title (div)");
     expect(text).toContain("#music (audio)");
     expect(text).toContain("Move the title later and lower the music");
@@ -613,3 +832,34 @@ describe("buildPromptCopyText", () => {
     );
   });
 });
+
+describe("snapKeyframePctToBeat", () => {
+  // el spans 0–10s, so clip-% maps to composition time as pct * 0.1s.
+  // At pps=100 the snap window is 8 / 100 = 0.08s.
+  const el = { start: 0, duration: 10 };
+  const beats = [2, 5, 8];
+
+  it("snaps a keyframe within ~8px of a beat exactly onto it", () => {
+    // pct 50.5 → 5.05s, 0.05s from the beat at 5s (inside 0.08s window) → 50%.
+    expect(snapKeyframePctToBeat(el, 50.5, beats, 100)).toBe(50);
+  });
+
+  it("leaves a keyframe unchanged when no beat is within the window", () => {
+    // pct 55 → 5.5s, 0.5s from the nearest beat → free.
+    expect(snapKeyframePctToBeat(el, 55, beats, 100)).toBe(55);
+  });
+
+  it("is a no-op when there are no beats", () => {
+    expect(snapKeyframePctToBeat(el, 50.5, [], 100)).toBe(50.5);
+    expect(snapKeyframePctToBeat(el, 50.5, undefined, 100)).toBe(50.5);
+  });
+
+  it("is a no-op for a zero-duration clip", () => {
+    expect(snapKeyframePctToBeat({ start: 0, duration: 0 }, 50.5, beats, 100)).toBe(50.5);
+  });
+
+  it("widens the snap window as zoom (pps) decreases", () => {
+    // pct 53 → 5.3s, 0.3s from the beat at 5s. At pps=20 the window is 0.4s → snaps to 50%.
+    expect(snapKeyframePctToBeat(el, 53, beats, 20)).toBe(50);
+  });
+});

package/src/player/components/timelineEditing.ts

@@ -1,5 +1,28 @@
 import { formatTime } from "../lib/time";
 import { roundToCenti } from "../../utils/rounding";
+import type { StackingTimelineLayer, TimelineLayerId } from "./timelineTrackOrder";
+import { resolveTimelineLayerStackingMove } from "./timelineLayerDrag";
+import { shouldShowTimelineLayerGroupHeader } from "./TimelineLayerGroupHeader";
+import type { TimelineStackingElement, TimelineStackingReorderIntent } from "./timelineStacking";
+
+import {
+  applyClipStartTrimDelta,
+  clipStartTrimDeltaBounds,
+  resolveTimelineMinDuration,
+} from "./timelineGroupEditing";
+
+export {
+  clampTimelineGroupResizeDelta,
+  resolveTimelineGroupMove,
+  resolveTimelineGroupResize,
+  type TimelineGroupResizeEdge,
+  type TimelineGroupTimingMember,
+} from "./timelineGroupEditing";
+
+export {
+  type TimelineStackingElement,
+  type TimelineStackingReorderIntent,
+} from "./timelineStacking";
 
 const roundToCentiseconds = roundToCenti;
 
@@ -25,6 +48,12 @@ export interface TimelineMoveInput {
   trackHeight: number;
   maxStart: number;
   trackOrder: number[];
+  layerOrder?: TimelineLayerId[];
+  timelineLayers?: StackingTimelineLayer[];
+  /** When provided, vertical movement is resolved as a z-index stacking reorder
+   *  within `stackingElement`'s context instead of a raw track change. */
+  stackingElement?: TimelineStackingElement;
+  stackingElements?: TimelineStackingElement[];
 }
 
 export interface TimelineResizeInput {
@@ -73,7 +102,13 @@ export function resolveTimelineMove(
   input: TimelineMoveInput,
   clientX: number,
   clientY: number,
-): { start: number; track: number } {
+): {
+  start: number;
+  track: number;
+  previewLayerId?: TimelineLayerId;
+  previewLayerIndex?: number;
+  stackingReorder?: TimelineStackingReorderIntent | null;
+} {
   const scrollDeltaX = (input.currentScrollLeft ?? 0) - (input.originScrollLeft ?? 0);
   const scrollDeltaY = (input.currentScrollTop ?? 0) - (input.originScrollTop ?? 0);
   const deltaTime =
@@ -81,6 +116,36 @@ export function resolveTimelineMove(
   const trackDeltaRaw =
     (clientY - input.originClientY + scrollDeltaY) / Math.max(input.trackHeight, 1);
   const deltaTrack = Math.round(trackDeltaRaw);
+  const nextStart = clamp(
+    roundToCentiseconds(input.start + deltaTime),
+    0,
+    Math.max(0, input.maxStart),
+  );
+
+  // Stacking mode: the two axes never fight. Horizontal movement writes time
+  // (nextStart); vertical movement writes z-index. Lane/overlap resolution
+  // uses the clip's authored time span, NOT the dragged start, otherwise a
+  // diagonal drag that drifts the clip out of overlap silently flips the
+  // placement from "restack" to "join lane" and cancels the reorder.
+  if (input.stackingElement) {
+    const layerMove =
+      input.timelineLayers && input.layerOrder
+        ? resolveTimelineLayerStackingMove({
+            element: { ...input.stackingElement, duration: input.duration },
+            layers: input.timelineLayers,
+            layerOrder: input.layerOrder,
+            trackDeltaRaw,
+          })
+        : null;
+    return {
+      start: nextStart,
+      track: input.track,
+      previewLayerId: layerMove?.previewLayerId,
+      previewLayerIndex: layerMove?.previewLayerIndex,
+      stackingReorder: layerMove?.stackingReorder ?? null,
+    };
+  }
+
   const currentTrackIndex = Math.max(0, input.trackOrder.indexOf(input.track));
   const desiredTrackIndex = currentTrackIndex + deltaTrack;
   const nextTrackIndex = clamp(desiredTrackIndex, 0, Math.max(0, input.trackOrder.length - 1));
@@ -106,7 +171,7 @@ export function resolveTimelineMove(
   }
 
   return {
-    start: clamp(roundToCentiseconds(input.start + deltaTime), 0, Math.max(0, input.maxStart)),
+    start: nextStart,
     track: nextTrack,
   };
 }
@@ -144,7 +209,7 @@ export function resolveTimelineResize(
   edge: "start" | "end",
   clientX: number,
 ): { start: number; duration: number; playbackStart?: number } {
-  const minDuration = Math.max(0.05, input.minDuration ?? 0.1);
+  const minDuration = resolveTimelineMinDuration(input.minDuration);
   const deltaTime = (clientX - input.originClientX) / Math.max(input.pixelsPerSecond, 1);
 
   if (edge === "end") {
@@ -160,23 +225,15 @@ export function resolveTimelineResize(
     };
   }
 
-  const playbackRate = Math.max(0.1, input.playbackRate ?? 1);
-  const maxLeftExtensionFromMedia =
-    input.playbackStart != null ? input.playbackStart / playbackRate : Number.POSITIVE_INFINITY;
-  const minDelta = -Math.min(input.start - input.minStart, maxLeftExtensionFromMedia);
-  const maxDelta = input.duration - minDuration;
+  const { minDelta, maxDelta } = clipStartTrimDeltaBounds(input, input.minStart, minDuration);
   const clampedDelta = clamp(deltaTime, minDelta, maxDelta);
-  const nextStart = roundToCentiseconds(input.start + clampedDelta);
-  const nextDuration = roundToCentiseconds(input.duration - clampedDelta);
-  const nextPlaybackStart =
-    input.playbackStart != null
-      ? roundToCentiseconds(Math.max(0, input.playbackStart + clampedDelta * playbackRate))
-      : undefined;
+  const trimmed = applyClipStartTrimDelta(input, clampedDelta);
 
   return {
-    start: nextStart,
-    duration: nextDuration,
-    playbackStart: nextPlaybackStart,
+    start: roundToCentiseconds(trimmed.start),
+    duration: roundToCentiseconds(trimmed.duration),
+    playbackStart:
+      trimmed.playbackStart != null ? roundToCentiseconds(trimmed.playbackStart) : undefined,
   };
 }
 
@@ -203,6 +260,108 @@ export interface TimelineRangeSelection {
   anchorY: number;
 }
 
+export interface TimelineMarqueeSelectionRect {
+  startTime: number;
+  endTime: number;
+  top: number;
+  bottom: number;
+}
+
+export interface TimelineMarqueeSelectionInput {
+  rect: TimelineMarqueeSelectionRect;
+  layers: readonly StackingTimelineLayer[];
+  layerOrder: readonly TimelineLayerId[];
+  rulerHeight: number;
+  trackHeight: number;
+  groupHeaderHeight?: number;
+}
+
+interface NormalizedTimelineMarqueeRect {
+  startTime: number;
+  endTime: number;
+  top: number;
+  bottom: number;
+}
+
+function timelineIntervalsOverlap(
+  startA: number,
+  endA: number,
+  startB: number,
+  endB: number,
+): boolean {
+  return startA < endB && startB < endA;
+}
+
+function normalizeTimelineMarqueeRect(
+  rect: TimelineMarqueeSelectionRect,
+): NormalizedTimelineMarqueeRect | null {
+  const normalized = {
+    startTime: Math.max(0, Math.min(rect.startTime, rect.endTime)),
+    endTime: Math.max(0, Math.max(rect.startTime, rect.endTime)),
+    top: Math.min(rect.top, rect.bottom),
+    bottom: Math.max(rect.top, rect.bottom),
+  };
+  if (normalized.endTime <= normalized.startTime || normalized.bottom <= normalized.top) {
+    return null;
+  }
+  return normalized;
+}
+
+function buildTimelineLayerMap(layers: readonly StackingTimelineLayer[]) {
+  const layerById = new Map<TimelineLayerId, StackingTimelineLayer>();
+  for (const layer of layers) layerById.set(layer.id, layer);
+  return layerById;
+}
+
+function appendMarqueeLayerSelection(
+  selected: string[],
+  layer: StackingTimelineLayer,
+  rect: NormalizedTimelineMarqueeRect,
+) {
+  for (const element of layer.elements) {
+    if (
+      timelineIntervalsOverlap(
+        rect.startTime,
+        rect.endTime,
+        element.start,
+        element.start + element.duration,
+      )
+    ) {
+      selected.push(element.key ?? element.id);
+    }
+  }
+}
+
+export function selectTimelineElementsInMarquee({
+  rect,
+  layers,
+  layerOrder,
+  rulerHeight,
+  trackHeight,
+  groupHeaderHeight = 0,
+}: TimelineMarqueeSelectionInput): string[] {
+  const normalized = normalizeTimelineMarqueeRect(rect);
+  if (!normalized) return [];
+  const layerById = buildTimelineLayerMap(layers);
+  const selected: string[] = [];
+  let previousContextKey = "";
+  let rowTop = rulerHeight;
+  for (const layerId of layerOrder) {
+    const layer = layerById.get(layerId);
+    if (!layer) continue;
+    if (shouldShowTimelineLayerGroupHeader(layer.contextKey, previousContextKey)) {
+      rowTop += groupHeaderHeight;
+    }
+    const rowBottom = rowTop + trackHeight;
+    if (timelineIntervalsOverlap(normalized.top, normalized.bottom, rowTop, rowBottom)) {
+      appendMarqueeLayerSelection(selected, layer, normalized);
+    }
+    previousContextKey = layer.contextKey;
+    rowTop = rowBottom;
+  }
+  return selected;
+}
+
 function isDeterministicTimelineWindow(input: {
   tag: string;
   compositionSrc?: string;
@@ -306,13 +465,13 @@ export function buildTimelineAgentPrompt({
   const elementLines = elements
     .map(
       (el) =>
-        `- #${el.id} (${el.tag}) — ${formatTime(el.start)} to ${formatTime(el.start + el.duration)}, track ${el.track}`,
+        `- #${el.id} (${el.tag}) - ${formatTime(el.start)} to ${formatTime(el.start + el.duration)}, track ${el.track}`,
     )
     .join("\n");
 
   return `Edit the following HyperFrames composition:
 
-Time range: ${formatTime(start)} — ${formatTime(end)}
+Time range: ${formatTime(start)} - ${formatTime(end)}
 
 Elements in range:
 ${elementLines || "(none)"}

package/src/player/components/timelineGroupEditing.ts

@@ -0,0 +1,159 @@
+import { roundToCenti } from "../../utils/rounding";
+
+const DEFAULT_TIMELINE_MIN_DURATION = 0.1;
+const ABSOLUTE_TIMELINE_MIN_DURATION = 0.05;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+function roundTimelineTime(value: number): number {
+  return roundToCenti(value);
+}
+
+export function resolveTimelineMinDuration(minDuration?: number): number {
+  return Math.max(ABSOLUTE_TIMELINE_MIN_DURATION, minDuration ?? DEFAULT_TIMELINE_MIN_DURATION);
+}
+
+/** Playback rate never drops to zero (would make media-in-point math divide by ~0). */
+function resolveTimelinePlaybackRate(rate?: number): number {
+  return Math.max(0.1, rate ?? 1);
+}
+
+interface TimelineStartTrimClip {
+  start: number;
+  duration: number;
+  playbackStart?: number;
+  playbackRate?: number;
+}
+
+/**
+ * Delta bounds for trimming a clip's START edge (shared by single-clip and group
+ * resize). Left-bounded by how far the start can move toward `minStart` and by the
+ * media in-point (`playbackStart / playbackRate`); right-bounded by `minDuration`.
+ * Returned deltas are unrounded — callers round with their own centisecond helper.
+ */
+export function clipStartTrimDeltaBounds(
+  clip: TimelineStartTrimClip,
+  minStart: number,
+  minDuration: number,
+): { minDelta: number; maxDelta: number } {
+  const playbackRate = resolveTimelinePlaybackRate(clip.playbackRate);
+  const maxLeftExtensionFromMedia =
+    clip.playbackStart != null ? clip.playbackStart / playbackRate : Number.POSITIVE_INFINITY;
+  return {
+    minDelta: -Math.min(clip.start - minStart, maxLeftExtensionFromMedia),
+    maxDelta: clip.duration - minDuration,
+  };
+}
+
+/**
+ * Apply a start-edge delta to one clip (unrounded): moves the start, shrinks the
+ * duration by the same amount, and shifts the media in-point by the delta scaled to
+ * the playback rate (clamped at 0).
+ */
+export function applyClipStartTrimDelta(
+  clip: TimelineStartTrimClip,
+  delta: number,
+): { start: number; duration: number; playbackStart?: number } {
+  const playbackRate = resolveTimelinePlaybackRate(clip.playbackRate);
+  return {
+    start: clip.start + delta,
+    duration: clip.duration - delta,
+    playbackStart:
+      clip.playbackStart != null
+        ? Math.max(0, clip.playbackStart + delta * playbackRate)
+        : undefined,
+  };
+}
+
+export interface TimelineGroupTimingMember {
+  start: number;
+  duration: number;
+  playbackStart?: number;
+  playbackRate?: number;
+}
+
+export type TimelineGroupResizeEdge = "start" | "end";
+
+export interface TimelineGroupMoveResult {
+  delta: number;
+  members: Array<Pick<TimelineGroupTimingMember, "start" | "duration">>;
+}
+
+export interface TimelineGroupResizeResult {
+  delta: number;
+  members: Array<Pick<TimelineGroupTimingMember, "start" | "duration" | "playbackStart">>;
+}
+
+function clampTimelineGroupMoveDelta(
+  rawDelta: number,
+  members: readonly TimelineGroupTimingMember[],
+): number {
+  if (members.length === 0) return 0;
+  const minDelta = Math.max(...members.map((member) => -member.start));
+  return roundTimelineTime(Math.max(rawDelta, minDelta));
+}
+
+export function resolveTimelineGroupMove(
+  members: readonly TimelineGroupTimingMember[],
+  rawDelta: number,
+): TimelineGroupMoveResult {
+  const delta = clampTimelineGroupMoveDelta(rawDelta, members);
+  return {
+    delta,
+    members: members.map((member) => ({
+      start: roundTimelineTime(member.start + delta),
+      duration: member.duration,
+    })),
+  };
+}
+
+export function clampTimelineGroupResizeDelta(
+  rawDelta: number,
+  members: readonly TimelineGroupTimingMember[],
+  edge: TimelineGroupResizeEdge,
+  minDuration = resolveTimelineMinDuration(),
+): number {
+  if (members.length === 0) return 0;
+
+  if (edge === "end") {
+    const minDelta = Math.max(...members.map((member) => minDuration - member.duration));
+    return roundTimelineTime(Math.max(rawDelta, minDelta));
+  }
+
+  // Rigid group: the applied delta is bounded by the most-constrained member.
+  const bounds = members.map((member) => clipStartTrimDeltaBounds(member, 0, minDuration));
+  const minDelta = Math.max(...bounds.map((b) => b.minDelta));
+  const maxDelta = Math.min(...bounds.map((b) => b.maxDelta));
+  return roundTimelineTime(clamp(rawDelta, minDelta, maxDelta));
+}
+
+export function resolveTimelineGroupResize(
+  members: readonly TimelineGroupTimingMember[],
+  edge: TimelineGroupResizeEdge,
+  rawDelta: number,
+  minDuration = resolveTimelineMinDuration(),
+): TimelineGroupResizeResult {
+  const delta = clampTimelineGroupResizeDelta(rawDelta, members, edge, minDuration);
+  return {
+    delta,
+    members: members.map((member) => {
+      if (edge === "end") {
+        return {
+          start: member.start,
+          duration: roundTimelineTime(member.duration + delta),
+          playbackStart: member.playbackStart,
+        };
+      }
+
+      const trimmed = applyClipStartTrimDelta(member, delta);
+      return {
+        start: roundTimelineTime(trimmed.start),
+        duration: roundTimelineTime(trimmed.duration),
+        playbackStart:
+          trimmed.playbackStart != null ? roundTimelineTime(trimmed.playbackStart) : undefined,
+      };
+    }),
+  };
+}