@hyperframes/studio 0.7.60 → 0.7.62

package/src/player/components/timelineClipDragCommit.ts

@@ -5,13 +5,18 @@ import type { DraggedClipState } from "./useTimelineClipDrag";
 import type { ZMirrorLaneMove } from "./timelineZMirror";
 import { classifyZone, normalizeToZones } from "./timelineZones";
 import { computeStackingPatches, type StackingPatch } from "./timelineStackingSync";
-import { getTimelineEditCapabilities } from "./timelineEditing";
+import {
+  canMoveTimelineElement as canMoveElement,
+  resolveExpandedHostAlias,
+} from "./timelineAuthoredMoveTarget";
 import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
 import {
   beginTimelineOptimisticGesture,
   isLatestTimelineOptimisticGesture,
 } from "./timelineOptimisticRevision";
 import { runLaneZGesture } from "../../components/nle/zLaneGesture";
+import { refreshAfterDurableLaneMove } from "./timelineLaneMoveRefresh";
+import { authoredTrackForLane, sameSourceFile } from "./timelineAuthoredTrack";
 
 type StartTrack = Pick<TimelineElement, "start" | "track">;
 export interface TimelineMoveEdit {
@@ -68,30 +73,15 @@ export interface DragCommitDeps {
    * research/STAGE3-NEEDED-WIRING.md.
    */
   onStackingPatches?: (patches: StackingPatch[], coalesceKey?: string) => Promise<unknown> | void;
+  /** Converge the preview manifest after the complete lane + z transaction. */
+  refreshAfterLaneMove?: () => void;
 }
 
 const keyOf = (e: TimelineElement) => e.key ?? e.id;
 const round3 = (v: number) => Math.round(v * 1000) / 1000;
-
 // One deterministic coalesce key shared by both records in a lane-change gesture.
 let laneChangeGestureSeq = 0;
 
-/** Whether Studio may write timing to this clip (false for locked/implicit rows). */
-function canMoveElement(element: TimelineElement): boolean {
-  return getTimelineEditCapabilities({
-    tag: element.tag,
-    duration: element.duration,
-    domId: element.domId,
-    selector: element.selector,
-    compositionSrc: element.compositionSrc,
-    playbackStart: element.playbackStart,
-    playbackStartAttr: element.playbackStartAttr,
-    sourceDuration: element.sourceDuration,
-    timingSource: element.timingSource,
-    timelineLocked: element.timelineLocked,
-  }).canMove;
-}
-
 /**
  * Optimistically apply + persist a batch of moves with rollback on failure.
  *
@@ -139,14 +129,15 @@ export function persistMoveEdits(
   // that written value into the store's `authoredTrack` so a SECOND drag before
   // any reload resolves authored tracks from what the file now says, not stale
   // pre-edit data. Pure time-moves leave authoredTrack untouched.
-  for (const e of edits) {
+  const applyEdit = (e: TimelineMoveEdit) => {
     const writtenTrack =
       e.persistTrack ?? (e.updates.track !== e.element.track ? e.updates.track : undefined);
     updateElement(
       keyOf(e.element),
       writtenTrack == null ? e.updates : { ...e.updates, authoredTrack: writtenTrack },
     );
-  }
+  };
+  for (const e of edits) applyEdit(e);
   // 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) =>
@@ -158,7 +149,17 @@ export function persistMoveEdits(
     ? onMoveElements(persistEdits, coalesceKey, operation, coalesceMs)
     : Promise.all(persistEdits.map((e) => Promise.resolve(onMoveElement?.(e.element, e.updates))));
   return Promise.resolve(persisted).then(
-    () => true,
+    () => {
+      // 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) {
+        const key = keyOf(e.element);
+        if (isLatestTimelineOptimisticGesture(updateElement, revision, key)) applyEdit(e);
+      }
+      return true;
+    },
     (error) => {
       for (const p of prev) {
         if (isLatestTimelineOptimisticGesture(updateElement, revision, p.key)) {
@@ -177,59 +178,6 @@ export function persistMoveEdits(
  * then compacts it to a distinct integer lane between its neighbours, and the
  * clips at/below the insert shift down by one — the sanctioned index-renumber.
  */
-/** Same-source-file predicate: authored track numbers only compare within ONE
- *  file's coordinate space (an expanded sub-comp child's authoredTrack is in ITS
- *  file, not the host timeline's). `undefined` means the active composition. */
-export const sameSourceFile = (a: TimelineElement, b: TimelineElement): boolean =>
-  (a.sourceFile ?? null) === (b.sourceFile ?? null);
-
-/**
- * Translate a DISPLAY lane into the AUTHORED (source-file) track to persist for
- * `dragged`. Occupants are consulted ONLY from the dragged clip's own source
- * file — an occupant from a different file (e.g. an expanded sub-comp child, or
- * a host clip next to expanded rows) carries authored values in a different
- * coordinate space, and borrowing them would write a foreign file's numbering.
- *
- * Lane semantics after normalizeToZones: each distinct authored track owns one
- * base lane, and time-overlapping same-track clips spill onto adjacent display
- * sub-lanes (packTrackLanes). A spill sub-lane IS a legal drop target (Timeline's
- * trackOrder lists it): its occupants share the base lane's authored track by
- * construction, so the same-file occupant lookup returns that authored track and
- * the drop persists as a same-track join. The clip may then DISPLAY on a
- * different sub-lane than it was dropped on — the spill re-packs
- * deterministically by stable id, first-fit — but the persisted track is
- * correct.
- *
- * Fallbacks when the lane has no same-file occupant (e.g. an expanded child
- * dropped on a lane holding only other files' clips — the display-lane integer
- * must NOT be persisted into a sparse file):
- * 1. Offset from the NEAREST same-file lane: authored(nearest) + lane distance,
- *    preserving "one lane up = one authored track up" in the clip's own file.
- * 2. No same-file peers at all → the lane value itself (single-clip files:
- *    display and authored spaces coincide for want of any other anchor).
- * Edge-created lanes (min-1 / max+1 inserts) route through the insert path,
- * never here.
- */
-export function authoredTrackForLane(
-  lane: number,
-  elements: TimelineElement[],
-  dragged: TimelineElement,
-): number {
-  const dragKey = keyOf(dragged);
-  const peers = elements.filter((e) => keyOf(e) !== dragKey && sameSourceFile(e, dragged));
-  const occupant = peers.find((e) => e.track === lane);
-  if (occupant) return occupant.authoredTrack ?? occupant.track;
-  let nearest: TimelineElement | null = null;
-  for (const p of peers) {
-    if (!nearest || Math.abs(p.track - lane) < Math.abs(nearest.track - lane)) nearest = p;
-  }
-  if (!nearest) return lane;
-  // Rounded: expanded children live on FRACTIONAL synthetic display rows (see
-  // buildChildElements), so a lane distance measured against one can carry a
-  // fraction — an authored data-track-index must stay an integer.
-  return Math.round((nearest.authoredTrack ?? nearest.track) + (lane - nearest.track));
-}
-
 function insertTrackValue(trackOrder: number[], insertRow: number): number {
   if (trackOrder.length === 0) return 0;
   if (insertRow <= 0) return trackOrder[0] - 0.5;
@@ -284,6 +232,12 @@ function resolveMultiSelection(
  */
 // fallow-ignore-next-line complexity
 export function commitDraggedClipMove(drag: DraggedClipState, deps: DragCommitDeps): void {
+  const hostAlias = resolveExpandedHostAlias(drag, deps);
+  if (hostAlias) {
+    commitDraggedClipMove(hostAlias.drag, { ...deps, selectedKeys: hostAlias.selectedKeys });
+    return;
+  }
+
   const { elements, updateElement, onMoveElement } = deps;
   const dragKey = keyOf(drag.element);
   const isInsert = drag.insertRow != null;
@@ -362,22 +316,28 @@ export function commitDraggedClipMove(drag: DraggedClipState, deps: DragCommitDe
   });
   const multiKeys = multi ? multi.keys : null;
   if (!isVertical || !deps.readZIndex || !deps.onStackingPatches) {
-    void persistMoveEdits(edits, deps, coalesceKey, "lane-reorder");
+    void refreshAfterDurableLaneMove(
+      persistMoveEdits(edits, deps, coalesceKey, "lane-reorder"),
+      deps,
+    );
     return;
   }
-  void runLaneZGesture({
-    commitLane: () => persistMoveEdits(edits, deps, coalesceKey, "lane-reorder"),
-    commitZ: () =>
-      syncStackingForEdit(
-        candidate,
-        dragKey,
-        drag.element.track,
-        drag.previewTrack,
-        multiKeys,
-        deps,
-        coalesceKey,
-      ),
-  }).catch(() => undefined);
+  void refreshAfterDurableLaneMove(
+    runLaneZGesture({
+      commitLane: () => persistMoveEdits(edits, deps, coalesceKey, "lane-reorder"),
+      commitZ: () =>
+        syncStackingForEdit(
+          candidate,
+          dragKey,
+          drag.element.track,
+          drag.previewTrack,
+          multiKeys,
+          deps,
+          coalesceKey,
+        ),
+    }),
+    deps,
+  ).catch(() => undefined);
 }
 
 /** Build the one sanctioned multi-clip write: atomically insert and compact a
@@ -486,23 +446,29 @@ function commitTrackInsert(
 
   const coalesceKey = `clip-lane-move:${laneChangeGestureSeq++}`;
   if (!deps.readZIndex || !deps.onStackingPatches) {
-    void persistMoveEdits(edits, deps, coalesceKey, "track-insert");
+    void refreshAfterDurableLaneMove(
+      persistMoveEdits(edits, deps, coalesceKey, "track-insert"),
+      deps,
+    );
     return;
   }
-  void runLaneZGesture({
-    commitLane: () => persistMoveEdits(edits, deps, coalesceKey, "track-insert"),
-    commitZ: () =>
-      // Sync from the fractional drop intent, not the normalized persisted lanes.
-      syncStackingForEdit(
-        candidate,
-        dragKey,
-        drag.element.track,
-        drag.insertRow!,
-        multi ? multi.keys : null,
-        deps,
-        coalesceKey,
-      ),
-  }).catch(() => undefined);
+  void refreshAfterDurableLaneMove(
+    runLaneZGesture({
+      commitLane: () => persistMoveEdits(edits, deps, coalesceKey, "track-insert"),
+      commitZ: () =>
+        // Sync from the fractional drop intent, not the normalized persisted lanes.
+        syncStackingForEdit(
+          candidate,
+          dragKey,
+          drag.element.track,
+          drag.insertRow!,
+          multi ? multi.keys : null,
+          deps,
+          coalesceKey,
+        ),
+    }),
+    deps,
+  ).catch(() => undefined);
 }
 
 /**
@@ -544,11 +510,17 @@ export function commitZMirrorLaneMove(
       updates: { start: element.start, track: move.displayTrack },
       persistTrack: move.persistTrack,
     };
-    return persistMoveEdits([edit], deps, coalesceKey, "lane-reorder", coalesceMs);
+    return refreshAfterDurableLaneMove(
+      persistMoveEdits([edit], deps, coalesceKey, "lane-reorder", coalesceMs),
+      deps,
+    );
   }
   const built = buildTrackInsertEdits(element, element.start, move.insertRow, null, deps);
   if (!built || built.edits.length === 0) return Promise.resolve(false);
-  return persistMoveEdits(built.edits, deps, coalesceKey, "track-insert", coalesceMs);
+  return refreshAfterDurableLaneMove(
+    persistMoveEdits(built.edits, deps, coalesceKey, "track-insert", coalesceMs),
+    deps,
+  );
 }
 
 /**

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

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
-import { computeDragPreview, type DragPreviewContext } from "./timelineClipDragPreview";
+import {
+  computeDragPreview,
+  computeResizePreview,
+  type DragPreviewContext,
+} from "./timelineClipDragPreview";
 import type { DraggedClipState } from "./timelineClipDragTypes";
 import { RULER_H, TRACKS_TOP_PAD, TRACK_H } from "./timelineLayout";
 
@@ -142,3 +146,31 @@ describe("computeDragPreview — plain horizontal drag never arms a phantom inse
     expect(next.insertRow).toBe(0); // a new TOP track will be created on drop
   });
 });
+
+describe("computeResizePreview — composition source continuity", () => {
+  it("seeds a legacy composition offset and advances it at playback rate", () => {
+    const element = {
+      ...clip("comp", 0, 2, 4, 0, "div"),
+      kind: "composition" as const,
+      playbackRate: 2,
+    };
+    const result = computeResizePreview(
+      {
+        element,
+        edge: "start",
+        originClientX: 0,
+        previewStart: 2,
+        previewDuration: 4,
+        started: true,
+      },
+      100,
+      { scroll: fakeScroll(), pps: 100, buildSnapTargets: () => [] },
+    );
+
+    expect(result).toMatchObject({
+      previewStart: 3,
+      previewDuration: 3,
+      previewPlaybackStart: 2,
+    });
+  });
+});

package/src/player/components/timelineClipDragPreview.ts

@@ -221,7 +221,8 @@ export function computeResizePreview(
         )
       : Number.POSITIVE_INFINITY;
   const normalizedTag = resize.element.tag.toLowerCase();
-  const canSeedPlaybackStart = normalizedTag === "audio" || normalizedTag === "video";
+  const canSeedPlaybackStart =
+    resize.element.kind === "composition" || normalizedTag === "audio" || normalizedTag === "video";
   const playbackRate = Math.max(resize.element.playbackRate ?? 1, 0.1);
   // Trim limit = available source media only — NOT the composition length.
   // Duration is content-driven (the comp grows/shrinks to fit on commit), so

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

@@ -308,6 +308,24 @@ describe("resolveZoneDropPlacement (the whole drop decision, no same-track overl
     ).toEqual({ track: 2, insertRow: null });
   });
 
+  it("crosses an occupied aim instead of snapping the dragged clip back to its origin", () => {
+    expect(
+      resolveZoneDropPlacement({
+        ...base,
+        elements: [el("a", 0, 0, 5), el("b", 1, 0, 5), el("x", 2, 0, 5)],
+        desiredTrack: 1,
+      }),
+    ).toEqual({ track: 1, insertRow: 1 });
+
+    expect(
+      resolveZoneDropPlacement({
+        ...base,
+        elements: [el("x", 0, 0, 5), el("b", 1, 0, 5), el("a", 2, 0, 5)],
+        desiredTrack: 1,
+      }),
+    ).toEqual({ track: 1, insertRow: 2 });
+  });
+
   it("auto-creates a new track when EVERY lane in the zone is occupied at that time", () => {
     expect(
       resolveZoneDropPlacement({

package/src/player/components/timelineCollision.ts

@@ -115,7 +115,10 @@ export function resolveZoneDropPlacement(input: {
     trackOrder: zoneTracks,
     excludeKey: dragKey,
   });
-  if (placement.needsInsert) {
+  const originTrack = elements.find((element) => (element.key ?? element.id) === dragKey)?.track;
+  const snappedBackToOrigin =
+    originTrack != null && desired !== originTrack && placement.track === originTrack;
+  if (placement.needsInsert || snappedBackToOrigin) {
     const desiredRow = order.indexOf(desired);
     if (desiredRow < 0) {
       return {
@@ -123,14 +126,14 @@ export function resolveZoneDropPlacement(input: {
         insertRow: outOfRangeZoneInsertRow(order, zoneTracks, audioRow, desired),
       };
     }
-    // Prefer the gap NEAREST the pointer: insert above the aimed row when the
-    // pointer sits in its upper half AND that boundary is in the clip's own zone
-    // (else the visual/audio split would be crossed) — otherwise fall to below.
-    // `desired` is clamped into the zone, so both boundaries stay in-zone.
-    const insertRow =
-      preferInsertAbove && isInsertAllowedForZone(desiredRow, audioRow, isAudio)
-        ? desiredRow
-        : desiredRow + 1;
+    // When collision fallback found only the origin lane, insert on the far side
+    // of the aimed lane so normalization cannot turn the gesture into a no-op.
+    // Otherwise prefer the gap nearest the pointer, preserving normal insertion.
+    const originRow = originTrack == null ? -1 : order.indexOf(originTrack);
+    const insertAbove = snappedBackToOrigin
+      ? originRow > desiredRow
+      : preferInsertAbove && isInsertAllowedForZone(desiredRow, audioRow, isAudio);
+    const insertRow = insertAbove ? desiredRow : desiredRow + 1;
     return { track: desired, insertRow };
   }
   return { track: placement.track, insertRow: null };

package/src/player/components/timelineDragDrop.ts

@@ -1,5 +1,9 @@
 import { useCallback, useState, type RefObject } from "react";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
+import {
+  parseTimelineCompositionPayload,
+  TIMELINE_COMPOSITION_MIME,
+} from "../../utils/timelineCompositionDrop";
 import { usePlayerStore } from "../store/playerStore";
 import { TRACK_H, resolveTimelineAssetDrop } from "./timelineLayout";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
@@ -32,6 +36,11 @@ function applyJsonDropPayload(
   }
 }
 
+function resolveDropStart(usePointerStart: boolean, pointerStart: number): number {
+  if (usePointerStart) return pointerStart;
+  return Math.max(0, usePlayerStore.getState().currentTime);
+}
+
 /**
  * Dropping an asset/file/block onto the timeline places it at the PLAYHEAD —
  * start is the current playhead time, only the track comes from the drop y.
@@ -48,6 +57,7 @@ export function useTimelineAssetDrop({
   onFileDrop,
   onAssetDrop,
   onBlockDrop,
+  onCompositionDrop,
 }: UseTimelineAssetDropOptions) {
   const [isDragOver, setIsDragOver] = useState(false);
 
@@ -56,7 +66,8 @@ export function useTimelineAssetDrop({
     const hasFiles = types.includes("Files");
     const hasAsset = types.includes(TIMELINE_ASSET_MIME);
     const hasBlock = types.includes(TIMELINE_BLOCK_MIME);
-    if (!hasFiles && !hasAsset && !hasBlock) return;
+    const hasComposition = types.includes(TIMELINE_COMPOSITION_MIME);
+    if (!hasFiles && !hasAsset && !hasBlock && !hasComposition) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
     setIsDragOver(true);
@@ -65,11 +76,10 @@ export function useTimelineAssetDrop({
   const clearDropPreview = useCallback(() => setIsDragOver(false), []);
 
   const resolveDropPlacement = useCallback(
-    (clientX: number, clientY: number): TimelinePlacement => {
+    (clientX: number, clientY: number, usePointerStart = false): TimelinePlacement => {
       const scroll = scrollRef.current;
       const rect = scroll?.getBoundingClientRect();
-      // Track comes from the vertical drop position; start is the playhead.
-      const { track } = resolveTimelineAssetDrop(
+      const pointer = resolveTimelineAssetDrop(
         {
           rectLeft: rect?.left ?? 0,
           rectTop: rect?.top ?? 0,
@@ -77,14 +87,17 @@ export function useTimelineAssetDrop({
           scrollTop: scroll?.scrollTop ?? 0,
           pixelsPerSecond: ppsRef.current,
           duration: durationRef.current,
+          clampStartToDuration: !usePointerStart,
           trackHeight: TRACK_H,
           trackOrder: trackOrderRef.current,
         },
         clientX,
         clientY,
       );
-      const start = Math.max(0, usePlayerStore.getState().currentTime);
-      return { start, track };
+      return {
+        start: resolveDropStart(usePointerStart, pointer.start),
+        track: pointer.track,
+      };
     },
     [scrollRef, ppsRef, durationRef, trackOrderRef],
   );
@@ -93,6 +106,14 @@ export function useTimelineAssetDrop({
     (e: React.DragEvent) => {
       e.preventDefault();
       setIsDragOver(false);
+      const compositionPayload = parseTimelineCompositionPayload(
+        e.dataTransfer.getData(TIMELINE_COMPOSITION_MIME),
+      );
+      if (compositionPayload && onCompositionDrop) {
+        const placement = resolveDropPlacement(e.clientX, e.clientY, true);
+        void onCompositionDrop(compositionPayload.sourcePath, placement);
+        return;
+      }
       const placement = resolveDropPlacement(e.clientX, e.clientY);
 
       if (onFileDrop && e.dataTransfer.files.length > 0) {
@@ -109,7 +130,7 @@ export function useTimelineAssetDrop({
         applyJsonDropPayload(blockPayload, (p) => p.name, onBlockDrop, placement);
       }
     },
-    [resolveDropPlacement, onFileDrop, onAssetDrop, onBlockDrop],
+    [resolveDropPlacement, onFileDrop, onAssetDrop, onBlockDrop, onCompositionDrop],
   );
 
   return { isDragOver, handleAssetDragOver, handleAssetDrop, clearDropPreview };

package/src/player/components/timelineEditCapabilities.ts

@@ -6,11 +6,13 @@ export interface TimelineEditCapabilities {
 
 function isDeterministicTimelineWindow(input: {
   tag: string;
+  kind?: "video" | "audio" | "image" | "element" | "composition";
   compositionSrc?: string;
   playbackStartAttr?: "media-start" | "playback-start";
   sourceDuration?: number;
 }): boolean {
-  if (input.compositionSrc || input.playbackStartAttr != null) return true;
+  if (input.kind === "composition" || input.compositionSrc || input.playbackStartAttr != null)
+    return true;
   if (
     input.sourceDuration != null &&
     Number.isFinite(input.sourceDuration) &&
@@ -27,6 +29,7 @@ export function hasPatchableTimelineTarget(input: { domId?: string; selector?: s
 
 export function getTimelineEditCapabilities(input: {
   tag: string;
+  kind?: "video" | "audio" | "image" | "element" | "composition";
   duration: number;
   domId?: string;
   selector?: string;

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

@@ -53,6 +53,16 @@ describe("buildTimelineGroupResizeMembers (legacy 36413da7f semantics)", () => {
     ]);
   });
 
+  it("seeds legacy composition offsets and advances them at playback rate", () => {
+    const a = el("a", { kind: "composition", tag: "div", start: 2, playbackRate: 2 });
+    const b = el("b", { kind: "composition", tag: "div", start: 5, playbackRate: 0.5 });
+    const members = buildTimelineGroupResizeMembers([a, b], keys("a", "b"), "a", "start")!;
+
+    expect(members.map((member) => member.playbackStart)).toEqual([0, 0]);
+    const changes = resolveTimelineGroupResizeChanges(members, "start", 1);
+    expect(changes.map((change) => change.playbackStart)).toEqual([2, 0.5]);
+  });
+
   it("does not seed playbackStart on the END edge", () => {
     const grabbed = el("a", { tag: "audio", start: 0, duration: 2 });
     const b = el("b", { tag: "audio", start: 3, duration: 2 });

package/src/player/components/timelineGroupEditing.ts

@@ -181,14 +181,15 @@ function elementKey(element: TimelineElement): string {
   return element.key ?? element.id;
 }
 
-function isMediaTimelineElement(element: TimelineElement): boolean {
+function hasSourcePlaybackOffset(element: TimelineElement): boolean {
   const tag = element.tag.toLowerCase();
-  return tag === "audio" || tag === "video";
+  return element.kind === "composition" || tag === "audio" || tag === "video";
 }
 
 function canTrimEdge(element: TimelineElement, edge: TimelineGroupResizeEdge): boolean {
   const caps = getTimelineEditCapabilities({
     tag: element.tag,
+    kind: element.kind,
     duration: element.duration,
     domId: element.domId,
     selector: element.selector,
@@ -228,7 +229,7 @@ export function buildTimelineGroupResizeMembers(
     start: element.start,
     duration: element.duration,
     playbackStart:
-      edge === "start" && isMediaTimelineElement(element)
+      edge === "start" && hasSourcePlaybackOffset(element)
         ? (element.playbackStart ?? 0)
         : element.playbackStart,
     playbackRate: element.playbackRate,

package/src/player/components/timelineLaneMoveRefresh.ts

@@ -0,0 +1,14 @@
+export interface LaneMoveRefreshDeps {
+  refreshAfterLaneMove?: () => void;
+}
+
+/** Refresh only after the complete lane transaction persisted successfully. */
+export function refreshAfterDurableLaneMove(
+  pending: Promise<boolean>,
+  deps: LaneMoveRefreshDeps,
+): Promise<boolean> {
+  return pending.then((persisted) => {
+    if (persisted) deps.refreshAfterLaneMove?.();
+    return persisted;
+  });
+}

package/src/player/components/timelineLayout.ts

@@ -383,6 +383,7 @@ export function resolveTimelineAssetDrop(
     scrollTop: number;
     pixelsPerSecond: number;
     duration: number;
+    clampStartToDuration?: boolean;
     trackHeight: number;
     trackOrder: number[];
   },
@@ -391,9 +392,10 @@ export function resolveTimelineAssetDrop(
 ): { start: number; track: number } {
   const x = clientX - input.rectLeft + input.scrollLeft - GUTTER - TRACKS_LEFT_PAD;
   const contentY = clientY - input.rectTop + input.scrollTop;
+  const pointerStart = Math.round((x / Math.max(input.pixelsPerSecond, 1)) * 100) / 100;
   const start = Math.max(
     0,
-    Math.min(input.duration, Math.round((x / Math.max(input.pixelsPerSecond, 1)) * 100) / 100),
+    input.clampStartToDuration === false ? pointerStart : Math.min(input.duration, pointerStart),
   );
   // Row from the shared row→y inverse so the top pad is honoured; a drop in the
   // pad above the first lane floors to row 0, a drop in the bottom pad rounds

package/src/player/components/timelineZMirror.ts

@@ -1,7 +1,7 @@
 import type { TimelineElement } from "../store/playerStore";
 import { classifyZone } from "./timelineZones";
 import { isLaneFree, timeRangesOverlap } from "./timelineCollision";
-import { authoredTrackForLane, sameSourceFile } from "./timelineClipDragCommit";
+import { authoredTrackForLane, sameSourceFile } from "./timelineAuthoredTrack";
 import { samePaintScope } from "./timelineStackingSync";
 
 /**

package/src/player/components/useTimelineClipDrag.ts

@@ -77,6 +77,7 @@ interface UseTimelineClipDragInput {
    */
   readZIndex?: (element: TimelineElement) => number;
   onStackingPatches?: (patches: StackingPatch[]) => Promise<unknown> | void;
+  refreshAfterLaneMove?: () => void;
 }
 
 export function useTimelineClipDrag({
@@ -93,6 +94,7 @@ export function useTimelineClipDrag({
   setRangeSelectionRef,
   readZIndex,
   onStackingPatches,
+  refreshAfterLaneMove,
 }: UseTimelineClipDragInput) {
   const updateElement = usePlayerStore((s) => s.updateElement);
   const rawBeatTimes = usePlayerStore((s) => s.beatAnalysis?.beatTimes ?? EMPTY_BEAT_TIMES);
@@ -213,6 +215,8 @@ export function useTimelineClipDrag({
   readZIndexRef.current = readZIndex;
   const onStackingPatchesRef = useRef(onStackingPatches);
   onStackingPatchesRef.current = onStackingPatches;
+  const refreshAfterLaneMoveRef = useRef(refreshAfterLaneMove);
+  refreshAfterLaneMoveRef.current = refreshAfterLaneMove;
 
   const clipDragScrollRaf = useRef(0);
   const clipDragPointerRef = useRef<{
@@ -499,6 +503,7 @@ export function useTimelineClipDrag({
         // deps (Timeline.tsx). Absent → commitDraggedClipMove skips the z-sync.
         readZIndex: readZIndexRef.current,
         onStackingPatches: onStackingPatchesRef.current,
+        refreshAfterLaneMove: refreshAfterLaneMoveRef.current,
       });
     };
 

package/src/player/components/useTimelineEditPinning.ts

@@ -12,6 +12,7 @@ interface UseTimelineEditPinningInput {
   onFileDrop: TimelineDropCallbacks["onFileDrop"];
   onAssetDrop: TimelineDropCallbacks["onAssetDrop"];
   onBlockDrop: TimelineDropCallbacks["onBlockDrop"];
+  onCompositionDrop: TimelineDropCallbacks["onCompositionDrop"];
 }
 
 // Wrap every mutating timeline edit so the zoom pins to the current on-screen
@@ -29,6 +30,7 @@ export function useTimelineEditPinning({
   onFileDrop,
   onAssetDrop,
   onBlockDrop,
+  onCompositionDrop,
 }: UseTimelineEditPinningInput) {
   const pinTimelineZoom = usePlayerStore((s) => s.pinTimelineZoom);
   // Pin the timeline zoom to the current on-screen scale on the FIRST edit, so a
@@ -106,6 +108,15 @@ export function useTimelineEditPinning({
       }),
     [onBlockDrop, pinZoomBeforeEdit],
   );
+  const pinnedOnCompositionDrop = useMemo(
+    () =>
+      onCompositionDrop &&
+      ((...args: Parameters<typeof onCompositionDrop>) => {
+        pinZoomBeforeEdit();
+        return onCompositionDrop(...args);
+      }),
+    [onCompositionDrop, pinZoomBeforeEdit],
+  );
 
   return {
     pinZoomBeforeEdit,
@@ -117,5 +128,6 @@ export function useTimelineEditPinning({
     pinnedOnFileDrop,
     pinnedOnAssetDrop,
     pinnedOnBlockDrop,
+    pinnedOnCompositionDrop,
   };
 }