@hyperframes/studio 0.7.60 → 0.7.62

package/src/hooks/useTimelineAssetDropOps.ts

@@ -19,19 +19,22 @@ import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/stud
 import { collectHtmlIds, resolveDroppedAssetDuration } from "../utils/studioHelpers";
 import { formatTimelineAttributeNumber } from "./timelineEditingHelpers";
 import { readFileContent } from "./timelineTimingSync";
+import { commitTimelineCompositionInsertion } from "../utils/timelineCompositionInsert";
+import { usePlayerStore } from "../player";
 
 interface UseTimelineAssetDropOpsOptions {
   projectIdRef: MutableRefObject<string | null>;
   activeCompPath: string | null;
   timelineElements: TimelineElement[];
   showToast: (message: string, tone?: "error" | "info") => void;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: MutableRefObject<number>;
   reloadPreview: () => void;
   uploadProjectFiles: (files: Iterable<File>, dir?: string) => Promise<string[]>;
   isRecordingRef?: RefObject<boolean>;
   forceReloadSdkSession?: () => void;
+  observeProjectFileVersion?: (path: string, version: string | null) => void;
 }
 
 export function useTimelineAssetDropOps({
@@ -46,6 +49,7 @@ export function useTimelineAssetDropOps({
   uploadProjectFiles,
   isRecordingRef,
   forceReloadSdkSession,
+  observeProjectFileVersion,
 }: UseTimelineAssetDropOpsOptions) {
   // fallow-ignore-next-line complexity
   const handleTimelineAssetDrop = useCallback(
@@ -171,5 +175,51 @@ export function useTimelineAssetDropOps({
     [handleTimelineAssetDrop, projectIdRef, uploadProjectFiles, isRecordingRef, showToast],
   );
 
-  return { handleTimelineAssetDrop, handleTimelineFileDrop };
+  const handleTimelineCompositionDrop = useCallback(
+    async (sourcePath: string, placement: Pick<TimelineElement, "start" | "track">) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+      const pid = projectIdRef.current;
+      if (!pid) throw new Error("No active project");
+      const targetPath = activeCompPath || "index.html";
+      try {
+        await commitTimelineCompositionInsertion({
+          projectId: pid,
+          targetPath,
+          sourcePath,
+          start: placement.start,
+          track: placement.track,
+          writeFile: writeProjectFile,
+          recordEdit,
+          observeVersion: observeProjectFileVersion,
+          selectHost: (key) => usePlayerStore.getState().setSelectedElementId(key),
+          resync: forceReloadSdkSession,
+          refresh: reloadPreview,
+        });
+        domEditSaveTimestampRef.current = Date.now();
+        showToast("Composition added to the timeline.", "info");
+      } catch (error) {
+        showToast(
+          error instanceof Error ? error.message : "Failed to add composition to timeline",
+          "error",
+        );
+      }
+    },
+    [
+      activeCompPath,
+      domEditSaveTimestampRef,
+      forceReloadSdkSession,
+      isRecordingRef,
+      observeProjectFileVersion,
+      projectIdRef,
+      recordEdit,
+      reloadPreview,
+      showToast,
+      writeProjectFile,
+    ],
+  );
+
+  return { handleTimelineAssetDrop, handleTimelineFileDrop, handleTimelineCompositionDrop };
 }

package/src/hooks/useTimelineEditing.ts

@@ -12,6 +12,7 @@ import {
   applyTimelineStackingReorder,
   buildPatchTarget,
   patchIframeDomTiming,
+  playbackStartAttributeForElement,
   persistTimelineEdit,
   formatTimelineAttributeNumber,
   extendRootDurationIfNeeded,
@@ -263,10 +264,7 @@ export function useTimelineEditing({
         ["data-duration", formatTimelineAttributeNumber(updates.duration)],
       ];
       if (updates.playbackStart != null) {
-        const liveAttr =
-          element.playbackStartAttr === "playback-start"
-            ? "data-playback-start"
-            : "data-media-start";
+        const liveAttr = playbackStartAttributeForElement(element);
         liveAttrs.push([liveAttr, formatTimelineAttributeNumber(updates.playbackStart)]);
       }
       patchIframeDomTiming(previewIframeRef.current, element, liveAttrs, activeCompPath);
@@ -475,19 +473,21 @@ export function useTimelineEditing({
     ],
   );
 
-  const { handleTimelineAssetDrop, handleTimelineFileDrop } = useTimelineAssetDropOps({
-    projectIdRef,
-    activeCompPath,
-    timelineElements,
-    showToast,
-    writeProjectFile,
-    recordEdit,
-    domEditSaveTimestampRef,
-    reloadPreview,
-    uploadProjectFiles,
-    isRecordingRef,
-    forceReloadSdkSession,
-  });
+  const { handleTimelineAssetDrop, handleTimelineFileDrop, handleTimelineCompositionDrop } =
+    useTimelineAssetDropOps({
+      projectIdRef,
+      activeCompPath,
+      timelineElements,
+      showToast,
+      writeProjectFile,
+      recordEdit,
+      domEditSaveTimestampRef,
+      reloadPreview,
+      uploadProjectFiles,
+      isRecordingRef,
+      forceReloadSdkSession,
+      observeProjectFileVersion,
+    });
 
   const handleBlockedTimelineEdit = useCallback(
     (_element: TimelineElement) => {
@@ -509,6 +509,7 @@ export function useTimelineEditing({
     domEditSaveTimestampRef,
     reloadPreview,
     isRecordingRef,
+    forceReloadSdkSession,
   });
 
   return {
@@ -522,6 +523,7 @@ export function useTimelineEditing({
     handleRazorSplitAll,
     handleTimelineAssetDrop,
     handleTimelineFileDrop,
+    handleTimelineCompositionDrop,
     handleBlockedTimelineEdit,
     ...groupEditing,
   };

package/src/hooks/useTimelineGroupEditing.ts

@@ -12,6 +12,7 @@ import {
   extendRootDurationIfNeeded,
   formatTimelineAttributeNumber,
   patchIframeDomTiming,
+  playbackStartAttributeForElement,
   persistTimelineBatchEdit,
   type PersistTimelineBatchChange,
   type RecordEditInput,
@@ -242,9 +243,10 @@ export function useTimelineGroupEditing({
       // duration change), so nothing timing-related changed — the batch only
       // rewrites data-track-index, which the renderer never reads (documented
       // in core runtime/timeline.ts; track is a studio lane concept). The live
-      // DOM patch above + the gesture owner's optimistic store update fully
-      // cover the UI, so after the persist there is nothing to GSAP-shift and
-      // nothing for the preview to recompute: skip the fallback below entirely.
+      // DOM patch above + the gesture owner's optimistic store update cover the
+      // in-flight UI; after the complete lane + z transaction, that owner
+      // refreshes the preview so its runtime manifest converges to disk. There
+      // is still nothing to GSAP-shift here, so skip this fallback entirely.
       // Running it anyway is what made the mirrored z-order lane move blink —
       // a zero-delta batch yields no scriptText, and finishGroupTimingGsapFallback
       // used to full-reload the iframe when there was no script to soft-swap
@@ -348,10 +350,7 @@ export function useTimelineGroupEditing({
           ["data-duration", formatTimelineAttributeNumber(change.duration)],
         ];
         if (change.playbackStart != null) {
-          const liveAttr =
-            change.element.playbackStartAttr === "playback-start"
-              ? "data-playback-start"
-              : "data-media-start";
+          const liveAttr = playbackStartAttributeForElement(change.element);
           liveAttrs.push([liveAttr, formatTimelineAttributeNumber(change.playbackStart)]);
         }
         patchIframeDomTiming(previewIframeRef.current, change.element, liveAttrs, activeCompPath);

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