@hyperframes/studio 0.7.61 → 0.7.62

package/src/player/components/Timeline.tsx

@@ -28,6 +28,7 @@ import { useResolvedTimelineEditCallbacks } from "./useResolvedTimelineEditCallb
 import type { TimelineProps } from "./TimelineTypes";
 import { useTrackGapMenu } from "./useTrackGapMenu";
 import { useTimelineGapHighlights } from "./useTimelineGapHighlights";
+import { useStudioPlaybackContextOptional } from "../../contexts/StudioContext";
 
 // Re-export pure utilities so existing imports from "./Timeline" still resolve.
 export {
@@ -52,6 +53,7 @@ export const Timeline = memo(function Timeline({
   onFileDrop,
   onAssetDrop,
   onBlockDrop,
+  onCompositionDrop,
   onDeleteElement: _onDeleteElement,
   onMoveElement: onMoveElementOverride,
   onMoveElements: onMoveElementsOverride,
@@ -84,6 +86,11 @@ export const Timeline = memo(function Timeline({
     onSplitElement: onSplitElementOverride,
   });
   const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
+  const playbackContext = useStudioPlaybackContextOptional();
+  const setRefreshKey = playbackContext?.setRefreshKey;
+  const refreshAfterLaneMove = useCallback(() => {
+    setRefreshKey?.((key) => key + 1);
+  }, [setRefreshKey]);
   useMusicBeatAnalysis();
   const rawElements = usePlayerStore((s) => s.elements);
   const expandedElements = useExpandedTimelineElements();
@@ -169,6 +176,7 @@ export const Timeline = memo(function Timeline({
     pinnedOnFileDrop,
     pinnedOnAssetDrop,
     pinnedOnBlockDrop,
+    pinnedOnCompositionDrop,
   } = useTimelineEditPinning({
     ppsRef,
     fitPpsRef,
@@ -179,6 +187,7 @@ export const Timeline = memo(function Timeline({
     onFileDrop,
     onAssetDrop,
     onBlockDrop,
+    onCompositionDrop,
   });
 
   const { readClipZIndex, applyStackingPatches, zSyncEnabled } = useTimelineStackingSync({
@@ -223,6 +232,7 @@ export const Timeline = memo(function Timeline({
     setRangeSelectionRef,
     readZIndex: zSyncEnabled ? readClipZIndex : undefined,
     onStackingPatches: zSyncEnabled ? applyStackingPatches : undefined,
+    refreshAfterLaneMove,
   });
 
   const { isDragOver, handleAssetDragOver, handleAssetDrop, clearDropPreview } =
@@ -234,6 +244,7 @@ export const Timeline = memo(function Timeline({
       onFileDrop: pinnedOnFileDrop,
       onAssetDrop: pinnedOnAssetDrop,
       onBlockDrop: pinnedOnBlockDrop,
+      onCompositionDrop: pinnedOnCompositionDrop,
     });
 
   const displayTrackOrder = useMemo(() => {
@@ -399,7 +410,7 @@ export const Timeline = memo(function Timeline({
     <div
       ref={setContainerRef}
       aria-label="Timeline"
-      className={`relative border-t select-none h-full overflow-hidden ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      className={`relative border-t select-none h-full overflow-hidden ${isDragOver ? "ring-1 ring-inset ring-studio-accent/60" : ""} ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
       onMouseMove={(e) => {
         if (activeTool === "razor" && scrollRef.current) {
           const rect = scrollRef.current.getBoundingClientRect();

package/src/player/components/timelineAuthoredMoveTarget.ts

@@ -0,0 +1,77 @@
+import type { TimelineElement } from "../store/playerStore";
+import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
+import { getTimelineEditCapabilities } from "./timelineEditing";
+import type { DraggedClipState } from "./timelineClipDragTypes";
+
+/** Whether Studio may write timing to this clip (false for locked/implicit rows). */
+export function canMoveTimelineElement(element: TimelineElement): boolean {
+  return getTimelineEditCapabilities({
+    tag: element.tag,
+    kind: element.kind,
+    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;
+}
+
+interface ExpandedHostAliasDeps {
+  elements: TimelineElement[];
+  selectedKeys?: ReadonlySet<string> | null;
+}
+
+/**
+ * Expanded children keep their own source-file identity for direct edits, but a
+ * selection can briefly contain both a composition host and one of its visible
+ * expanded children. That pair is one authored move target, not two. Resolve it
+ * to the host before time/lane/collision commit so ordinary clip placement stays
+ * the single owner of the gesture semantics.
+ */
+export function resolveExpandedHostAlias(
+  drag: DraggedClipState,
+  deps: ExpandedHostAliasDeps,
+): { drag: DraggedClipState; selectedKeys: ReadonlySet<string> } | null {
+  const selectedKeys = deps.selectedKeys;
+  if (!selectedKeys) return null;
+
+  const collapsedKeys = new Set(selectedKeys);
+  const candidates = deps.elements.includes(drag.element)
+    ? deps.elements
+    : [...deps.elements, drag.element];
+  for (const element of candidates) {
+    const hostKey = element.expandedHostKey;
+    const childKey = getTimelineElementIdentity(element);
+    if (hostKey && collapsedKeys.has(hostKey) && collapsedKeys.has(childKey)) {
+      collapsedKeys.delete(childKey);
+    }
+  }
+
+  const hostKey = drag.element.expandedHostKey;
+  const childKey = getTimelineElementIdentity(drag.element);
+  if (!hostKey || collapsedKeys.has(childKey)) {
+    if (collapsedKeys.size === selectedKeys.size) return null;
+    return { drag, selectedKeys: collapsedKeys };
+  }
+
+  const host = deps.elements.find((element) => getTimelineElementIdentity(element) === hostKey);
+  if (!host || !canMoveTimelineElement(host)) return null;
+
+  const delta = drag.previewStart - drag.element.start;
+  const mapTrack = (track: number | undefined): number | undefined =>
+    track === drag.element.track ? host.track : track;
+  return {
+    drag: {
+      ...drag,
+      element: host,
+      previewStart: Math.max(0, Math.round((host.start + delta) * 1000) / 1000),
+      previewTrack: mapTrack(drag.previewTrack) ?? host.track,
+      desiredTrack: mapTrack(drag.desiredTrack),
+    },
+    selectedKeys: collapsedKeys,
+  };
+}

package/src/player/components/timelineAuthoredTrack.ts

@@ -0,0 +1,29 @@
+import type { TimelineElement } from "../store/playerStore";
+
+const keyOf = (element: TimelineElement) => element.key ?? element.id;
+
+/** Authored track numbers only compare within one source file. */
+export const sameSourceFile = (a: TimelineElement, b: TimelineElement): boolean =>
+  (a.sourceFile ?? null) === (b.sourceFile ?? null);
+
+/** Translate a display lane into the source-file track to persist. */
+export function authoredTrackForLane(
+  lane: number,
+  elements: TimelineElement[],
+  dragged: TimelineElement,
+): number {
+  const dragKey = keyOf(dragged);
+  const peers = elements.filter((element) => {
+    return keyOf(element) !== dragKey && sameSourceFile(element, dragged);
+  });
+  const occupant = peers.find((element) => element.track === lane);
+  if (occupant) return occupant.authoredTrack ?? occupant.track;
+
+  let nearest: TimelineElement | null = null;
+  for (const peer of peers) {
+    if (!nearest || Math.abs(peer.track - lane) < Math.abs(nearest.track - lane)) nearest = peer;
+  }
+  if (!nearest) return lane;
+  // Synthetic expanded-child display rows can be fractional; authored tracks cannot.
+  return Math.round((nearest.authoredTrack ?? nearest.track) + (lane - nearest.track));
+}

package/src/player/components/timelineCallbacks.ts

@@ -22,6 +22,10 @@ export interface TimelineDropCallbacks {
     blockName: string,
     placement: { start: number; track: number },
   ) => Promise<void> | void;
+  onCompositionDrop?: (
+    sourcePath: string,
+    placement: { start: number; track: number },
+  ) => Promise<void> | void;
 }
 
 export interface TimelineEditCallbacks {

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

@@ -4,6 +4,7 @@ import type { DraggedClipState } from "./useTimelineClipDrag";
 import {
   commitDraggedClipMove,
   commitZMirrorLaneMove,
+  persistMoveEdits,
   type DragCommitDeps,
   type TimelineMoveEdit,
 } from "./timelineClipDragCommit";
@@ -314,6 +315,118 @@ describe("commitDraggedClipMove", () => {
     expect(map.c).toBeUndefined(); // unselected clips untouched
   });
 
+  it("collapses a selected expanded child onto its authored composition host", () => {
+    const host = { ...el("host", 0, 10, 8), kind: "composition" as const };
+    const child = {
+      ...el("scene.html#title", 0.25, 12, 2),
+      sourceFile: "scene.html",
+      expandedParentStart: 10,
+      expandedHostKey: "host",
+    };
+    const { updateElement, onMoveElement, onMoveElements } = runClipMove(
+      drag(child, { previewStart: 15, previewTrack: child.track }),
+      {
+        elements: [host],
+        trackOrder: [0, child.track],
+        selectedKeys: new Set(["host", "scene.html#title"]),
+      },
+    );
+
+    expect(onMoveElements).not.toHaveBeenCalled();
+    expect(onMoveElement).toHaveBeenCalledWith(host, { start: 13, track: 0 });
+    expect(updateElement).toHaveBeenCalledWith("host", { start: 13, track: 0 });
+    expect(updateElement).not.toHaveBeenCalledWith("scene.html#title", expect.anything());
+  });
+
+  it("drops a selected expanded child alias when the authored host initiates the drag", () => {
+    const host = { ...el("host", 0, 10, 8), kind: "composition" as const };
+    const child = {
+      ...el("scene.html#title", 0.25, 12, 2),
+      sourceFile: "scene.html",
+      expandedParentStart: 10,
+      expandedHostKey: "host",
+    };
+    const { onMoveElement, onMoveElements } = runClipMove(
+      drag(host, { previewStart: 13, previewTrack: host.track }),
+      {
+        elements: [host, child],
+        trackOrder: [0, child.track],
+        selectedKeys: new Set(["host", "scene.html#title"]),
+      },
+    );
+
+    expect(onMoveElements).not.toHaveBeenCalled();
+    expect(onMoveElement).toHaveBeenCalledOnce();
+    expect(onMoveElement).toHaveBeenCalledWith(host, { start: 13, track: 0 });
+  });
+
+  it("keeps an expanded child as the edit target when its host is not selected", () => {
+    const host = { ...el("host", 0, 10, 8), kind: "composition" as const };
+    const child = {
+      ...el("scene.html#title", 0.25, 12, 2),
+      sourceFile: "scene.html",
+      expandedParentStart: 10,
+      expandedHostKey: "host",
+    };
+    const { onMoveElement, onMoveElements } = runClipMove(
+      drag(child, { previewStart: 15, previewTrack: child.track }),
+      {
+        elements: [host],
+        trackOrder: [0, child.track],
+        selectedKeys: new Set(["scene.html#title"]),
+      },
+    );
+
+    expect(onMoveElements).not.toHaveBeenCalled();
+    expect(onMoveElement).toHaveBeenCalledWith(child, { start: 15, track: child.track });
+  });
+
+  it("moves a host alias and an ordinary selected clip once each in one batch", () => {
+    const host = { ...el("host", 0, 10, 8), kind: "composition" as const };
+    const ordinary = el("ordinary", 1, 20, 3);
+    const child = {
+      ...el("scene.html#title", 0.25, 12, 2),
+      sourceFile: "scene.html",
+      expandedParentStart: 10,
+      expandedHostKey: "host",
+    };
+    const { onMoveElement, onMoveElements } = runClipMove(
+      drag(child, { previewStart: 14, previewTrack: child.track }),
+      {
+        elements: [host, ordinary],
+        trackOrder: [0, child.track, 1],
+        selectedKeys: new Set(["host", "scene.html#title", "ordinary"]),
+      },
+    );
+
+    const map = expectAtomicMoveMap({ onMoveElement, onMoveElements });
+    expect(map).toEqual({
+      host: { start: 12, track: 0 },
+      ordinary: { start: 22, track: 1 },
+    });
+  });
+
+  it("applies an expanded-child vertical drag to the selected host lane", () => {
+    const host = { ...el("host", 0, 10, 8), kind: "composition" as const };
+    const child = {
+      ...el("scene.html#title", 0.25, 12, 2),
+      sourceFile: "scene.html",
+      expandedParentStart: 10,
+      expandedHostKey: "host",
+    };
+    const { onMoveElement, onMoveElements } = runClipMove(
+      drag(child, { previewStart: 12, previewTrack: 1, desiredTrack: 1 }),
+      {
+        elements: [host],
+        trackOrder: [0, child.track, 1],
+        selectedKeys: new Set(["host", "scene.html#title"]),
+      },
+    );
+
+    const map = expectAtomicMoveMap({ onMoveElement, onMoveElements });
+    expect(map).toEqual({ host: { start: 10, track: 1 } });
+  });
+
   it("multi-selection move clamps shifted clips at 0 and applies the store update optimistically", () => {
     const elements = [el("a", 0, 6, 3), el("b", 1, 2, 3)];
     // Drag 'a' −5s: b would land at −3 → clamps to 0.
@@ -959,20 +1072,40 @@ describe("commitDraggedClipMove", () => {
       expectZLiftedToSix(onStackingPatches);
     });
 
+    it("refreshes the preview only after the complete lane and z transaction", async () => {
+      const order: string[] = [];
+      commitInsertAbove(overlapping(), {
+        onMoveElements: vi.fn(async () => {
+          order.push("lane");
+        }),
+        onStackingPatches: vi.fn(async () => {
+          order.push("z");
+        }),
+        refreshAfterLaneMove: () => order.push("refresh"),
+      });
+
+      await flushMicrotasks();
+
+      expect(order).toEqual(["lane", "z", "refresh"]);
+    });
+
     it("rolls back the move and skips the z-sync when the persist fails", async () => {
       const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
       const elements = overlapping();
       const onMoveElements = vi.fn(() => Promise.reject(new Error("write failed")));
       const onStackingPatches = vi.fn();
+      const refreshAfterLaneMove = vi.fn();
       const updateElement = vi.fn();
       commitInsertAbove(elements, {
         updateElement,
         onMoveElements,
         onStackingPatches,
+        refreshAfterLaneMove,
       });
       await flushMicrotasks();
       // Failed move → z patch never issued (no orphaned z change left behind)...
       expect(onStackingPatches).not.toHaveBeenCalled();
+      expect(refreshAfterLaneMove).not.toHaveBeenCalled();
       // ...and the optimistic start/track edit for the dragged clip is rolled back.
       expect(updateElement).toHaveBeenCalledWith("a", { start: 0, track: 1 });
       errSpy.mockRestore();
@@ -1300,3 +1433,46 @@ describe("commitZMirrorLaneMove", () => {
     expect(onMoveElements).not.toHaveBeenCalled();
   });
 });
+
+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 };
+    let releaseSave: (() => void) | undefined;
+    const pendingSave = new Promise<void>((resolve) => {
+      releaseSave = resolve;
+    });
+    let liveTrack = clip.track;
+    let liveAuthoredTrack = clip.authoredTrack;
+    const updateElement = vi.fn((_key: string, updates: Partial<TimelineElement>) => {
+      if (updates.track != null) liveTrack = updates.track;
+      if (updates.authoredTrack != null) liveAuthoredTrack = updates.authoredTrack;
+    });
+
+    const persisted = persistMoveEdits(
+      [
+        {
+          element: clip,
+          updates: { start: clip.start, track: 0 },
+          persistTrack: 0,
+        },
+      ],
+      {
+        elements: [clip],
+        trackOrder: [0, 1, 2],
+        updateElement,
+        onMoveElements: () => pendingSave,
+      },
+    );
+    expect([liveTrack, liveAuthoredTrack]).toEqual([0, 0]);
+
+    // Reproduce the real failure: the preview emits its cached pre-drag lane
+    // while the file write is still pending.
+    liveTrack = 2;
+    liveAuthoredTrack = 2;
+    releaseSave?.();
+
+    await expect(persisted).resolves.toBe(true);
+    expect([liveTrack, liveAuthoredTrack]).toEqual([0, 0]);
+    expect(updateElement).toHaveBeenCalledTimes(2);
+  });
+});

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,
+  );
 }
 
 /**