@hyperframes/studio 0.8.126 → 0.8.128

package/src/player/components/TimelineLanes.test.tsx

@@ -10,7 +10,11 @@ import { defaultTimelineTheme } from "./timelineTheme";
 import { TRACK_H, getTimelineRowGeometry } from "./timelineLayout";
 import { createTimelineClipIndex } from "../lib/timelineClipIndex";
 import { buildTimelineLogicalRows } from "./timelineKeyboardNavigation";
-import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import {
+  usePlayerStore,
+  type KeyframeCacheEntry,
+  type TimelineElement,
+} from "../store/playerStore";
 import type { MultiDragPreviewInput } from "./timelineMultiDragPreview";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import type { DraggedClipState, BlockedClipState } from "./useTimelineClipDrag";
@@ -73,6 +77,7 @@ function positionTween(id: string): GsapAnimation {
 
 interface RenderLanesOptions {
   elements?: TimelineElement[];
+  keyframeCache?: Map<string, KeyframeCacheEntry>;
   animations?: Map<string, GsapAnimation[]>;
   expandedClipIds?: string[];
   selectedElementIds?: Set<string>;
@@ -172,6 +177,7 @@ function renderLanes(options: RenderLanesOptions = {}): {
           getPreviewElement={(el) => el}
           getTrackStyle={getTrackStyle}
           gsapAnimations={gsapAnimations}
+          keyframeCache={next.keyframeCache}
           selectedKeyframes={new Set()}
           currentTime={0}
           onContextMenuLane={next.onContextMenuLane}
@@ -389,9 +395,54 @@ describe("TimelineLanes disclosure target", () => {
     act(() => second.root.unmount());
   });
 
-  // The passenger branch wraps [clip, lanes] in a transformed div that re-renders
-  // on every pointer move. An unstable key there remounts the lanes and drops the
-  // in-flight drag.
+  it("does not remount a clip when it becomes, then stops being, a drag passenger", () => {
+    const elements = [element("clip-a", TRACK_A), element("clip-b", TRACK_A)];
+    const selectedElementIds = new Set(["clip-a", "clip-b"]);
+    const dragging: MultiDragPreviewInput = {
+      dragStarted: true,
+      draggedKey: "clip-b",
+      draggedOriginStart: 0,
+      draggedPreviewStart: 0.5,
+      selectedKeys: selectedElementIds,
+    };
+    const keyframeCache = new Map<string, KeyframeCacheEntry>([
+      [
+        "clip-a",
+        {
+          format: "percentage",
+          keyframes: [
+            { percentage: 0, properties: { x: 0 } },
+            { percentage: 100, properties: { x: 50 } },
+          ],
+        },
+      ],
+    ]);
+    const view = renderLanes({ elements, selectedElementIds, keyframeCache });
+    const clipA = view.host.querySelector<HTMLElement>('[data-el-id="clip-a"]');
+    const diamonds = () =>
+      view.host
+        .querySelector('[data-el-id="clip-a"] ~ div button[aria-label*="keyframe at"]')
+        ?.closest<HTMLElement>("div.pointer-events-none");
+    expect(clipA).not.toBeNull();
+    expect(clipA?.parentElement).toBe(
+      view.host.querySelector('[data-el-id="clip-b"]')?.parentElement,
+    );
+
+    expect(diamonds()).not.toBeNull();
+    view.rerender({ elements, selectedElementIds, keyframeCache, multiDragPreview: dragging });
+    expect(view.host.querySelector('[data-el-id="clip-a"]')).toBe(clipA);
+    expect(clipA?.style.transform).toMatch(/^translateX\([1-9]/);
+    // Its keyframe diamonds ride with it.
+    expect(diamonds()?.style.transform).toBe(clipA?.style.transform);
+
+    view.rerender({ elements, selectedElementIds, keyframeCache });
+    expect(view.host.querySelector('[data-el-id="clip-a"]')).toBe(clipA);
+    expect(clipA?.style.transform).toBe("");
+    act(() => view.root.unmount());
+  });
+
+  // A passenger re-renders on every pointer move. An unstable key there remounts
+  // the lanes and drops the in-flight drag.
   it("does not remount the lanes while a multi-clip drag slides the formation", () => {
     const elements = [element("clip-a", TRACK_A), element("clip-b", TRACK_A)];
     const selectedElementIds = new Set(["clip-a", "clip-b"]);
@@ -411,9 +462,11 @@ describe("TimelineLanes disclosure target", () => {
     });
 
     const before = ariaControlsTarget(view.host);
-    const beforeLane = before?.querySelector("[data-timeline-property-lane]");
+    const beforeLane = before?.querySelector<HTMLElement>("[data-timeline-property-lane]");
     expect(before).not.toBeNull();
     expect(beforeLane).not.toBeNull();
+    const startOffset = beforeLane?.style.transform;
+    expect(startOffset).toMatch(/^translateX\([1-9]/);
 
     view.rerender({
       elements,
@@ -426,6 +479,9 @@ describe("TimelineLanes disclosure target", () => {
     // Node identity, not just presence: a remount replaces these nodes.
     expect(ariaControlsTarget(view.host)).toBe(before);
     expect(before?.querySelector("[data-timeline-property-lane]")).toBe(beforeLane);
+    // The lanes ride with the formation, not just the clip.
+    expect(beforeLane?.style.transform).toMatch(/^translateX\([1-9]/);
+    expect(beforeLane?.style.transform).not.toBe(startOffset);
     act(() => view.root.unmount());
   });
 });

package/src/player/components/TimelineLanes.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useId, useMemo } from "react";
+import { Fragment, useId, useMemo, type CSSProperties } from "react";
 import { BeatStrip, BeatBackgroundLines } from "./BeatStrip";
 import { TimelineClip } from "./TimelineClip";
 import { TimelineCompactDiamonds } from "./TimelineCompactDiamonds";
@@ -35,6 +35,15 @@ import { useTimelineKeyboardActor } from "./useTimelineKeyboardActor";
 import { TimelineTransitionOverlays } from "./TimelineTransitionOverlays";
 import { deriveTimelineTransitionSeamsByTrack } from "./timelineTransitionSeams";
 
+function passengerStyleAt(offsetPx: number): CSSProperties {
+  return {
+    transform: `translateX(${offsetPx}px)`,
+    opacity: 0.85,
+    zIndex: 20,
+    pointerEvents: "none",
+  };
+}
+
 export function TimelineLanes({
   pps,
   contentOrigin,
@@ -390,9 +399,9 @@ export function TimelineLanes({
                     // the passenger's timeline data until the owning drag commits.
                     const isPassenger =
                       multiDragPreview != null && isMultiDragPassenger(clipKey, multiDragPreview);
-                    const passengerOffsetPx = isPassenger
-                      ? multiDragPassengerOffsetPx(clipKey, pps, multiDragPreview)
-                      : 0;
+                    const passengerStyle = isPassenger
+                      ? passengerStyleAt(multiDragPassengerOffsetPx(clipKey, pps, multiDragPreview))
+                      : undefined;
                     const clipGestures = createClipGestureHandlers(
                       el,
                       elementKey,
@@ -424,6 +433,7 @@ export function TimelineLanes({
                         }}
                         el={previewElement}
                         pps={pps}
+                        passengerStyle={passengerStyle}
                         clipY={CLIP_Y}
                         clipHeight={clipBarHeight}
                         isSelected={isSelected}
@@ -469,6 +479,7 @@ export function TimelineLanes({
                         beatsActive={beatStripOnTrack}
                         accentColor={clipStyle.accent}
                         isSelected={isSelected}
+                        passengerStyle={passengerStyle}
                         currentTime={currentTime}
                         selectedKeyframes={selectedKeyframes}
                         rovingTargetId={keyboard.rovingTargetId}
@@ -494,6 +505,7 @@ export function TimelineLanes({
                         clipDuration={previewElement.duration}
                         clipLeftPx={previewElement.start * pps}
                         clipWidthPx={Math.max(previewElement.duration * pps, 4)}
+                        passengerStyle={passengerStyle}
                         accentColor={clipStyle.accent}
                         isSelected={isSelected}
                         currentPercentage={
@@ -520,34 +532,14 @@ export function TimelineLanes({
                       />
                     );
 
-                    // Keep one keyed top-level child per element. Returning an
-                    // array here makes React reconcile the outer array by
-                    // position, so a window shift remounts otherwise stable
-                    // clip keys and can tear down focus mid-reveal.
-                    if (!isPassenger) {
-                      return (
-                        <Fragment key={clipKey}>
-                          {clip}
-                          {compactDiamonds}
-                          {propertyLanes}
-                        </Fragment>
-                      );
-                    }
+                    // No wrapper node per clip, and the same Fragment whether or not it rides a
+                    // drag, so joining or leaving one restyles it, never remounts it.
                     return (
-                      <div
-                        key={clipKey}
-                        className="absolute inset-0"
-                        style={{
-                          transform: `translateX(${passengerOffsetPx}px)`,
-                          opacity: 0.85,
-                          zIndex: 20,
-                          pointerEvents: "none",
-                        }}
-                      >
+                      <Fragment key={clipKey}>
                         {clip}
                         {compactDiamonds}
                         {propertyLanes}
-                      </div>
+                      </Fragment>
                     );
                   })
                 }

package/src/player/components/TimelinePropertyLanes.tsx

@@ -1,4 +1,9 @@
-import { useMemo, type MouseEvent as ReactMouseEvent, type RefObject } from "react";
+import {
+  useMemo,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+  type RefObject,
+} from "react";
 import {
   classifyPropertyGroup,
   type GsapAnimation,
@@ -23,6 +28,7 @@ export interface TimelinePropertyLanesProps {
   clipDuration: number;
   clipLeftPx: number;
   clipWidthPx: number;
+  passengerStyle?: CSSProperties;
   accentColor: string;
   isSelected: boolean;
   currentPercentage: number;
@@ -173,6 +179,7 @@ export function getTimelinePropertyLanes(
   return Array.from(sourceGroups(animations), ([group, groupAnimations]) => ({
     group,
     animations: groupAnimations,
+    elementAnimations: animations,
     keyframes: groupKeyframes(groupAnimations, group, clipStart, clipDuration),
   })).filter((lane) => lane.keyframes.length > 0);
 }
@@ -184,6 +191,7 @@ export function TimelinePropertyLanes({
   clipDuration,
   clipLeftPx,
   clipWidthPx,
+  passengerStyle,
   accentColor,
   isSelected,
   currentPercentage,
@@ -239,6 +247,7 @@ export function TimelinePropertyLanes({
             top: getTimelineLaneTop(laneIndex),
             width: clipWidthPx,
             height: LANE_H,
+            ...passengerStyle,
           }}
         >
           <TimelineDiamondLane

package/src/player/components/timelineCallbacks.ts

@@ -56,14 +56,11 @@ export interface TimelineEditCallbacks {
   ) => Promise<void> | void;
   /** Atomic multi-clip move (single undo) for main-track ripple + track-insert.
    *  `coalesceKey` (drag-commit gesture id) merges the move history entry with a
-   *  lane change's follow-up z-reorder entry into one undo step; `coalesceMs`
-   *  widens that entry's fold window when a server round-trip separates the
-   *  gesture's records (per-gesture-unique keys keep the fold gesture-scoped). */
+   *  lane change's follow-up z-reorder entry into one undo step. */
   onMoveElements?: (
     edits: Array<{ element: TimelineElement; updates: TimelineAtomicMoveUpdates }>,
     coalesceKey?: string,
     operation?: TimelineMoveOperation,
-    coalesceMs?: number,
   ) => Promise<void> | void;
   onResizeElement?: (
     element: TimelineElement,

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

@@ -11,6 +11,7 @@ import {
 import { normalizeToZones } from "./timelineZones";
 import { resolveZMirrorLaneMove } from "./timelineZMirror";
 import type { StackingPatch } from "./timelineStackingSync";
+import { isStudioEditSaving, revertNewestStudioPendingEdit } from "../../utils/studioPendingEdits";
 
 function el(
   id: string,
@@ -1534,6 +1535,36 @@ describe("persistMoveEdits convergence", () => {
     },
   );
 
+  it("registers a revert for the save in flight, and a reverted move is not reasserted", async () => {
+    let current = el("clip", 0, 1, 2);
+    let releaseSave!: () => void;
+    const pendingSave = new Promise<void>((resolve) => {
+      releaseSave = resolve;
+    });
+    const updateElement = (_key: string, updates: Partial<TimelineElement>) => {
+      current = { ...current, ...updates };
+    };
+    const persisted = persistMoveEdits([{ element: current, updates: { start: 4, track: 0 } }], {
+      elements: [current],
+      trackOrder: [0],
+      updateElement,
+      onMoveElements: () => pendingSave,
+    });
+    expect(current.start).toBe(4);
+    expect(isStudioEditSaving()).toBe(true);
+
+    const reapply = revertNewestStudioPendingEdit();
+    expect(reapply).not.toBeNull();
+    expect(current.start).toBe(1);
+
+    releaseSave();
+    await expect(persisted).resolves.toBe(true);
+    expect(current.start).toBe(1);
+    expect(isStudioEditSaving()).toBe(false);
+    reapply?.();
+    expect(current.start).toBe(4);
+  });
+
   it("reasserts a saved lane after a stale runtime sync", async () => {
     const clip = { ...el("headline", 2, 0.5, 4.9), authoredTrack: 2 };
     let releaseSave: (() => void) | undefined;

package/src/player/components/timelineClipDragCommit.ts

@@ -25,6 +25,8 @@ import { runLaneZGesture } from "../../components/nle/zLaneGesture";
 import { refreshAfterDurableLaneMove } from "./timelineLaneMoveRefresh";
 import { authoredTrackForLane } from "./timelineAuthoredTrack";
 import { resolveGroupMovers } from "./timelineMultiDragPreview";
+import { beginStudioPendingEdit } from "../../utils/studioPendingEdits";
+import { batchElementUpdates } from "../store/batchElementUpdates";
 
 type StartTrack = TimelineAtomicMoveUpdates;
 export interface TimelineMoveEdit extends TimelineAtomicMoveEdit {
@@ -47,14 +49,11 @@ export interface DragCommitDeps {
   /** Atomic multi-clip persist (single undo) for lane changes + track inserts.
    *  `coalesceKey`, when supplied, tags the resulting "Move timeline clips"
    *  history entry so it merges with the lane change's z-reorder entry (see the
-   *  lane-change branch below). `coalesceMs` widens that entry's fold window
-   *  (per-gesture-unique keys make an unbounded window safe) — required when a
-   *  server round-trip sits between the gesture's two records. */
+   *  lane-change branch below). */
   onMoveElements?: (
     edits: TimelineMoveEdit[],
     coalesceKey?: string,
     operation?: TimelineMoveOperation,
-    coalesceMs?: number,
   ) => Promise<void> | void;
   /**
    * The current multi-selection (store.selectedElementIds). When the dragged
@@ -121,7 +120,6 @@ export function persistMoveEdits(
   deps: DragCommitDeps,
   coalesceKey?: string,
   operation: TimelineMoveOperation = "timing",
-  coalesceMs?: number,
 ): Promise<boolean> {
   if (edits.length === 0) return Promise.resolve(true);
   edits = edits.map((e) => {
@@ -175,7 +173,9 @@ export function persistMoveEdits(
     }
     if (Object.keys(updates).length) updateElement(key, updates);
   };
-  for (const e of edits) applyEdit(e);
+  const applyEdits = (reassert = false) =>
+    batchElementUpdates(() => edits.forEach((e) => applyEdit(e, reassert)));
+  applyEdits();
   // The store above gets DISPLAY lanes; the file below gets the authored-space
   // track when one was resolved (see TimelineMoveEdit.persistTrack).
   const persistEdits = edits.map((e) =>
@@ -183,19 +183,8 @@ export function persistMoveEdits(
       ? e
       : { element: e.element, updates: { ...e.updates, track: e.persistTrack } },
   );
-  const persisted = onMoveElements
-    ? onMoveElements(persistEdits, coalesceKey, operation, coalesceMs)
-    : Promise.all(persistEdits.map((e) => Promise.resolve(onMoveElement?.(e.element, e.updates))));
-  return Promise.resolve(persisted).then(
-    () => {
-      // Runtime timeline messages can arrive while the save is in flight and
-      // restore the preview manifest's pre-gesture lane. Reassert the durable
-      // result after persistence, but only while this remains the latest
-      // optimistic gesture so an older save can never clobber a newer drag.
-      for (const e of edits) applyEdit(e, true);
-      return true;
-    },
-    (error) => {
+  const restorePrev = () =>
+    batchElementUpdates(() => {
       for (const p of prev) {
         const { audioGroup, ...timing } = p.updates;
         const updates: Partial<TimelineElement> = {};
@@ -208,10 +197,38 @@ export function persistMoveEdits(
           updates.audioGroup = audioGroup;
         if (Object.keys(updates).length) updateElement(p.key, updates);
       }
+    });
+  // Cmd+Z while the save is in flight shows the old lanes at once; the returned fn re-applies the move.
+  const saving = onMoveElements
+    ? beginStudioPendingEdit(() => {
+        restorePrev();
+        return () => applyEdits(true);
+      })
+    : null;
+  const start = () =>
+    onMoveElements
+      ? onMoveElements(persistEdits, coalesceKey, operation)
+      : Promise.all(
+          persistEdits.map((e) => Promise.resolve(onMoveElement?.(e.element, e.updates))),
+        );
+  const persisted = saving ? saving.adopt(start) : start();
+  const done = Promise.resolve(persisted).then(
+    () => {
+      // Runtime timeline messages can arrive while the save is in flight and
+      // restore the preview manifest's pre-gesture lane. Reassert the durable
+      // result after persistence, but only while this remains the latest
+      // optimistic gesture so an older save can never clobber a newer drag.
+      if (!saving?.reverted()) applyEdits(true);
+      return true;
+    },
+    (error) => {
+      if (!saving?.reverted()) restorePrev();
       console.error("[Timeline] Failed to persist clip edits", error);
       return false;
     },
   );
+  saving?.settle(done);
+  return done;
 }
 
 /**
@@ -481,12 +498,7 @@ function commitTrackInsert(
  * useCanvasZOrderTimelineMirror).
  *
  * `coalesceKey` MUST be the z persist's key (`z-reorder:<action>:<ids>:g<seq>`)
- * so editHistory folds the z write and this track write into ONE undo entry, and
- * `coalesceMs` MUST widen this record's fold window: the mirror only runs after
- * the z persist's server round-trip resolved, so under real network latency the
- * gap between the two records exceeds the reducer's 300ms default and the fold
- * would never happen live. The key is unique per gesture, so an unbounded
- * window can never merge distinct gestures.
+ * so editHistory folds the z write and this track write into ONE undo entry.
  *
  * Resolves `true` once the move persisted, `false` on rollback / refused insert.
  */
@@ -495,7 +507,6 @@ export function commitZMirrorLaneMove(
   move: NonNullable<ZMirrorLaneMove>,
   deps: DragCommitDeps,
   coalesceKey: string,
-  coalesceMs?: number,
 ): Promise<boolean> {
   if (move.kind === "move") {
     const edit: TimelineMoveEdit = {
@@ -504,14 +515,14 @@ export function commitZMirrorLaneMove(
       persistTrack: move.persistTrack,
     };
     return refreshAfterDurableLaneMove(
-      persistMoveEdits([edit], deps, coalesceKey, "lane-reorder", coalesceMs),
+      persistMoveEdits([edit], deps, coalesceKey, "lane-reorder"),
       deps,
     );
   }
   const built = buildTrackInsertEdits(element, element.start, move.insertRow, null, deps);
   if (!built || built.edits.length === 0) return Promise.resolve(false);
   return refreshAfterDurableLaneMove(
-    persistMoveEdits(built.edits, deps, coalesceKey, "track-insert", coalesceMs),
+    persistMoveEdits(built.edits, deps, coalesceKey, "track-insert"),
     deps,
   );
 }

package/src/player/components/timelineClipDragGestureLifecycle.ts

@@ -195,7 +195,7 @@ export function mountTimelineClipDragGestureLifecycle({
       event.clientX - blocked.originClientX,
       event.clientY - blocked.originClientY,
     );
-    const threshold = blocked.intent === "move" || blocked.intent === "edit-many" ? 4 : 2;
+    const threshold = blocked.intent === "move" ? 4 : 2;
     if (!blocked.started && distance < threshold) return;
     if (!blocked.started) {
       blocked.started = true;

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

@@ -4,7 +4,6 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import type { PointerEvent as ReactPointerEvent } from "react";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { createClipGestureHandlers, type ClipGestureDeps } from "./timelineClipGestureHandlers";
-import { MAX_HAND_EDIT_CLIPS } from "./timelineEditing";
 
 afterEach(() => usePlayerStore.getState().reset());
 
@@ -18,11 +17,9 @@ const clips: TimelineElement[] = Array.from({ length: 6 }, (_, i) => ({
 }));
 const capabilities = { canMove: true, canTrimStart: true, canTrimEnd: true, readOnly: false };
 
-function grabFirstClip(count: number, gesture: "move" | "resize", locked: number[] = []) {
+function grabFirstClip(count: number, gesture: "move" | "resize") {
   const store = usePlayerStore.getState();
-  store.setElements(
-    clips.map((clip, i) => (locked.includes(i) ? { ...clip, timelineLocked: true } : clip)),
-  );
+  store.setElements(clips);
   store.setSelectedElementIds(new Set(clips.slice(0, count).map((c) => c.id)));
   const setDraggedClip = vi.fn();
   const setResizingClip = vi.fn();
@@ -55,40 +52,15 @@ function grabFirstClip(count: number, gesture: "move" | "resize", locked: number
 }
 
 describe("hand-editing a multi-selection", () => {
-  it("moves up to the limit by hand", () => {
-    const { setDraggedClip, blockedClipRef } = grabFirstClip(MAX_HAND_EDIT_CLIPS, "move");
+  it.each([1, 3, 4, 6])("moves %i selected clips by hand", (count) => {
+    const { setDraggedClip, blockedClipRef } = grabFirstClip(count, "move");
     expect(setDraggedClip).toHaveBeenCalledOnce();
     expect(blockedClipRef.current).toBeNull();
   });
 
-  it("refuses to start a drag above the limit and asks for the toast", () => {
-    const { setDraggedClip, blockedClipRef } = grabFirstClip(MAX_HAND_EDIT_CLIPS + 1, "move");
-    expect(setDraggedClip).not.toHaveBeenCalled();
-    expect(blockedClipRef.current?.intent).toBe("edit-many");
-  });
-
-  it("resizes up to the limit by hand", () => {
-    const { setResizingClip, blockedClipRef } = grabFirstClip(MAX_HAND_EDIT_CLIPS, "resize");
+  it.each([1, 3, 4, 6])("resizes %i selected clips by hand", (count) => {
+    const { setResizingClip, blockedClipRef } = grabFirstClip(count, "resize");
     expect(setResizingClip).toHaveBeenCalledOnce();
     expect(blockedClipRef.current).toBeNull();
   });
-
-  it("refuses to start a resize above the limit and asks for the toast", () => {
-    const { setResizingClip, blockedClipRef } = grabFirstClip(MAX_HAND_EDIT_CLIPS + 1, "resize");
-    expect(setResizingClip).not.toHaveBeenCalled();
-    expect(blockedClipRef.current?.intent).toBe("edit-many");
-  });
-
-  it("counts the clips a move would change: locked ones in the selection stay put", () => {
-    const allowed = grabFirstClip(MAX_HAND_EDIT_CLIPS + 2, "move", [3, 4]);
-    expect(allowed.setDraggedClip).toHaveBeenCalledOnce();
-    const refused = grabFirstClip(MAX_HAND_EDIT_CLIPS + 2, "move", [4]);
-    expect(refused.setDraggedClip).not.toHaveBeenCalled();
-  });
-
-  it("counts the clips a trim would change: a locked member leaves a trim of the grabbed clip alone", () => {
-    const allowed = grabFirstClip(MAX_HAND_EDIT_CLIPS + 1, "resize", [3]);
-    expect(allowed.setResizingClip).toHaveBeenCalledOnce();
-    expect(allowed.blockedClipRef.current).toBeNull();
-  });
 });

package/src/player/components/timelineClipGestureHandlers.ts

@@ -8,11 +8,7 @@ import {
 import type { TimelineEditCapabilities } from "./timelineEditCapabilities";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { CLIP_HANDLE_W } from "./timelineLayout";
-import {
-  exceedsHandEditLimit,
-  selectClipWithLinks,
-  toggleClipWithLinks,
-} from "./timelineLinkSelection";
+import { selectClipWithLinks, toggleClipWithLinks } from "./timelineLinkSelection";
 import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 
 export interface ClipGestureDeps {
@@ -77,7 +73,6 @@ function isIntentBlocked(
  */
 function resolvePointerDownAction(
   e: ReactPointerEvent,
-  grabbed: TimelineElement,
   capabilities: TimelineEditCapabilities,
   onResizeElement: ClipGestureDeps["onResizeElement"],
   onMoveElement: ClipGestureDeps["onMoveElement"],
@@ -98,8 +93,6 @@ function resolvePointerDownAction(
   }
 
   if (!onMoveElement || !capabilities.canMove) return { kind: "ignore" };
-  if (exceedsHandEditLimit(grabbed, e.altKey, null))
-    return { kind: "block", intent: "edit-many", rect };
   return { kind: "move", rect };
 }
 
@@ -136,17 +129,6 @@ export function createClipGestureHandlers(
   const onResizeStart = (edge: "start" | "end", e: ReactPointerEvent): void => {
     if (!canStartResize(edge, e, capabilities, onResizeElement)) return;
     e.stopPropagation();
-    if (exceedsHandEditLimit(el, e.altKey, edge)) {
-      blockedClipRef.current = {
-        pointerId: e.pointerId,
-        element: el,
-        intent: "edit-many",
-        originClientX: e.clientX,
-        originClientY: e.clientY,
-        started: false,
-      };
-      return;
-    }
     blockedClipRef.current = null;
     setShowPopover(false);
     setRangeSelection(null);
@@ -165,7 +147,7 @@ export function createClipGestureHandlers(
   };
 
   const onPointerDown = (e: ReactPointerEvent): void => {
-    const action = resolvePointerDownAction(e, el, capabilities, onResizeElement, onMoveElement);
+    const action = resolvePointerDownAction(e, capabilities, onResizeElement, onMoveElement);
     if (action.kind === "ignore") return;
 
     if (action.kind === "block") {

package/src/player/components/timelineEditing.ts

@@ -248,9 +248,7 @@ export interface TimelinePromptElement {
   track: number;
 }
 
-export type BlockedTimelineEditIntent = "move" | "edit-many" | "resize-start" | "resize-end";
-
-export const MAX_HAND_EDIT_CLIPS = 3;
+export type BlockedTimelineEditIntent = "move" | "resize-start" | "resize-end";
 
 export interface TimelineRangeSelection {
   start: number;

package/src/player/components/timelineGroupResizeCommit.ts

@@ -1,6 +1,7 @@
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import type { TimelineGroupResizeSession } from "./timelineGroupEditing";
+import { batchElementUpdates } from "../store/batchElementUpdates";
 import {
   beginTimelineOptimisticGesture,
   rollbackLatestTimelineOptimisticGesture,
@@ -17,13 +18,15 @@ export function commitTimelineGroupResize(
     updateElement,
     changes.map((change) => change.key),
   );
-  for (const change of changes) {
-    updateElement(change.key, {
-      start: change.start,
-      duration: change.duration,
-      playbackStart: change.playbackStart,
-    });
-  }
+  batchElementUpdates(() => {
+    for (const change of changes) {
+      updateElement(change.key, {
+        start: change.start,
+        duration: change.duration,
+        playbackStart: change.playbackStart,
+      });
+    }
+  });
   if (!persist) {
     rollbackLatestTimelineOptimisticGesture(
       updateElement,
@@ -32,7 +35,6 @@ export function commitTimelineGroupResize(
     );
     return;
   }
-  const coalesceKey = `clip-group-resize:${changes.map((change) => change.key).join(":")}`;
   Promise.resolve(
     persist(
       changes.map((change) => ({
@@ -41,7 +43,6 @@ export function commitTimelineGroupResize(
         duration: change.duration,
         playbackStart: change.playbackStart,
       })),
-      { coalesceKey },
     ),
   ).catch((error) => {
     rollbackLatestTimelineOptimisticGesture(