hyperframes 0.8.35 → 0.8.36

package/dist/studio/index.js

@@ -446,6 +446,16 @@ function Tooltip({ label, children, delay: delay2 = 400, side = "top" }) {
 
 // src/player/components/Player.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var playerModule = null;
+function loadPlayerModule() {
+  playerModule ??= import("@hyperframes/player").catch((err) => {
+    playerModule = null;
+    throw err;
+  });
+  return playerModule;
+}
+if (typeof window !== "undefined") void loadPlayerModule().catch(() => {
+});
 var MEDIA_HAVE_FUTURE_DATA = 3;
 var MEDIA_NETWORK_NO_SOURCE = 3;
 function isRecord(value) {
@@ -543,7 +553,7 @@ var Player = forwardRef2(
       if (!previewSource) return;
       let canceled = false;
       let cleanup;
-      import("@hyperframes/player").then(() => {
+      void loadPlayerModule().then(() => {
         if (canceled) return;
         const player = document.createElement("hyperframes-player");
         const srcUrl = new URL(previewSource, window.location.origin);
@@ -3780,11 +3790,18 @@ function resolveScrubAudioEl(doc, musicId) {
   }
   return doc.querySelector("audio[data-timeline-role='music']") ?? doc.querySelector("audio");
 }
+function leaseScrubElement(el) {
+  el.ownerDocument.defaultView?.__hf?.leasePausedMedia?.(el);
+}
+function releaseScrubElement(el) {
+  el.ownerDocument.defaultView?.__hf?.releasePausedMedia?.(el);
+}
 function applyScrub(el, audioFileTime, previewVolume) {
   if (scrubAudioEl && scrubAudioEl !== el) stopScrubPreviewAudio();
   if (scrubPrevMuted === null) scrubPrevMuted = el.muted;
   if (scrubPrevVolume === null) scrubPrevVolume = el.volume;
   scrubAudioEl = el;
+  leaseScrubElement(el);
   try {
     el.muted = false;
     el.volume = SCRUB_VOLUME * normalizePreviewVolume(previewVolume);
@@ -3820,6 +3837,7 @@ function stopScrubPreviewAudio() {
   const el = scrubAudioEl;
   scrubAudioEl = null;
   if (!el) return;
+  releaseScrubElement(el);
   try {
     el.pause();
     if (scrubPrevMuted !== null) el.muted = scrubPrevMuted;
@@ -17303,7 +17321,6 @@ async function persistTimelineEdit(input) {
     throw new Error(`Unable to patch timeline element ${input.element.id} in ${targetPath}`);
   }
   input.pendingTimelineEditPathRef.current.add(targetPath);
-  input.domEditSaveTimestampRef.current = Date.now();
   await saveProjectFilesWithHistory({
     projectId: input.projectId,
     label: input.label,
@@ -17314,7 +17331,6 @@ async function persistTimelineEdit(input) {
     writeFile: input.writeProjectFile,
     recordEdit: input.recordEdit
   });
-  input.domEditSaveTimestampRef.current = Date.now();
 }
 async function persistTimelineBatchEdit(input) {
   const originals = /* @__PURE__ */ new Map();
@@ -17340,7 +17356,6 @@ async function persistTimelineBatchEdit(input) {
   for (const targetPath of Object.keys(files)) {
     input.pendingTimelineEditPathRef.current.add(targetPath);
   }
-  input.domEditSaveTimestampRef.current = Date.now();
   await saveProjectFilesWithHistory({
     projectId: input.projectId,
     label: input.label,
@@ -17352,7 +17367,6 @@ async function persistTimelineBatchEdit(input) {
     writeFile: input.writeProjectFile,
     recordEdit: input.recordEdit
   });
-  input.domEditSaveTimestampRef.current = Date.now();
 }
 async function persistElementAttribute({
   projectId,
@@ -17363,7 +17377,6 @@ async function persistElementAttribute({
   label,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   pendingTimelineEditPathRef,
   patchLive
 }) {
@@ -17376,7 +17389,6 @@ async function persistElementAttribute({
   const operation = { type: "attribute", property: attr, value };
   const patched = applyPatchByTarget(before, patchTarget, operation);
   pendingTimelineEditPathRef.current.add(targetPath);
-  domEditSaveTimestampRef.current = Date.now();
   try {
     const changedPaths = await saveProjectFilesWithHistory({
       projectId,
@@ -17387,7 +17399,6 @@ async function persistElementAttribute({
       writeFile: writeProjectFile,
       recordEdit
     });
-    domEditSaveTimestampRef.current = Date.now();
     return changedPaths;
   } catch (error) {
     patchLive(previousValue);
@@ -29983,28 +29994,15 @@ function roundRotationAngle(angle) {
 function normalizeStudioFileChangePath(path) {
   return path.trim().replace(/\\/g, "/").replace(/^\.?\//, "");
 }
-function readStudioFileChangePathFromValue(value) {
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    if (!trimmed) return null;
-    if (trimmed.startsWith("{")) {
-      try {
-        return readStudioFileChangePathFromValue(JSON.parse(trimmed));
-      } catch {
-        return normalizeStudioFileChangePath(trimmed);
-      }
-    }
-    return normalizeStudioFileChangePath(trimmed);
-  }
-  if (!value || typeof value !== "object") return null;
-  const record = value;
-  if (typeof record.path === "string") return normalizeStudioFileChangePath(record.path);
-  if (typeof record.filePath === "string") return normalizeStudioFileChangePath(record.filePath);
-  if ("data" in record) return readStudioFileChangePathFromValue(record.data);
-  return null;
+function readFileChangeField(payload, key2) {
+  if (!payload || typeof payload !== "object") return null;
+  const record = payload;
+  const value = record[key2];
+  return typeof value === "string" ? value : null;
 }
 function readStudioFileChangePath(payload) {
-  return readStudioFileChangePathFromValue(payload);
+  const path = readFileChangeField(payload, "path") ?? readFileChangeField(payload, "filePath");
+  return path === null ? null : normalizeStudioFileChangePath(path);
 }
 
 // src/components/editor/gsapAnimatesProperty.ts
@@ -38851,7 +38849,6 @@ function isCutoverResult(value) {
 }
 async function rollbackWrite(targetPath, originalContent, expectedCurrentContent, deps, cause) {
   try {
-    deps.domEditSaveTimestampRef.current = Date.now();
     markSelfWrite(targetPath, originalContent);
     await deps.writeProjectFile(targetPath, originalContent, expectedCurrentContent);
     return cause;
@@ -38863,7 +38860,6 @@ async function rollbackWrite(targetPath, originalContent, expectedCurrentContent
   }
 }
 async function writeAndRecord(after, targetPath, originalContent, deps, options) {
-  deps.domEditSaveTimestampRef.current = Date.now();
   markSelfWrite(targetPath, after);
   try {
     await deps.writeProjectFile(targetPath, after, originalContent);
@@ -39301,7 +39297,6 @@ function useElementLifecycleOps({
   activeCompPath,
   showToast,
   writeProjectFile,
-  domEditSaveTimestampRef,
   editHistory,
   projectIdRef,
   reloadPreview,
@@ -39351,7 +39346,6 @@ function useElementLifecycleOps({
             return { ok: true };
           }
         }
-        domEditSaveTimestampRef.current = Date.now();
         const removeResponse = await fetch(
           buildProjectApiPath(
             pid,
@@ -39407,7 +39401,6 @@ function useElementLifecycleOps({
     [
       activeCompPath,
       clearDomSelection,
-      domEditSaveTimestampRef,
       editHistory.recordEdit,
       onTrySdkDelete,
       onElementDeleted,
@@ -65226,7 +65219,6 @@ function useEditorSave({
   readProjectFile,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   setRefreshKey,
   showToast
 }) {
@@ -65310,11 +65302,10 @@ function useEditorSave({
       if (saveRafRef.current != null) cancelAnimationFrame(saveRafRef.current);
       saveRafRef.current = requestAnimationFrame(() => {
         saveRafRef.current = null;
-        domEditSaveTimestampRef.current = Date.now();
         void persistCandidate(candidate);
       });
     },
-    [domEditSaveTimestampRef, editingPathRef, projectIdRef, persistCandidate]
+    [editingPathRef, projectIdRef, persistCandidate]
   );
   const flushPendingSave = useCallback87(async () => {
     if (saveRafRef.current != null) {
@@ -65326,11 +65317,10 @@ function useEditorSave({
       return inFlightRef.current;
     }
     if (candidate) {
-      domEditSaveTimestampRef.current = Date.now();
       return persistCandidate(candidate);
     }
     return await inFlightRef.current ?? { status: "clean" };
-  }, [domEditSaveTimestampRef, persistCandidate]);
+  }, [persistCandidate]);
   const discardPendingSave = useCallback87(() => {
     if (saveRafRef.current != null) cancelAnimationFrame(saveRafRef.current);
     saveRafRef.current = null;
@@ -65350,7 +65340,6 @@ function useFileManager({
   projectId,
   showToast,
   recordEdit,
-  domEditSaveTimestampRef,
   setRefreshKey
 }) {
   const [editingFile, setEditingFile] = useState103(null);
@@ -65489,7 +65478,6 @@ function useFileManager({
     readProjectFile,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     setRefreshKey,
     showToast
   });
@@ -66286,7 +66274,6 @@ function useRazorSplit({
   writeProjectFile,
   observeProjectFileVersion,
   recordEdit,
-  domEditSaveTimestampRef,
   reloadPreview,
   forceReloadSdkSession,
   isRecordingRef
@@ -66314,7 +66301,6 @@ function useRazorSplit({
       const intents = buildAtomicCutIntents(elements, splitTime, activeCompPath);
       const requestedCount = intents.reduce((count, file) => count + file.targets.length, 0);
       const label = mode === "single" ? "Split timeline clip" : `Split ${requestedCount} clips at ${splitTime.toFixed(2)}s`;
-      domEditSaveTimestampRef.current = Date.now();
       const result = await runAtomicCutTransaction({
         projectId: pid,
         intents,
@@ -66341,7 +66327,6 @@ function useRazorSplit({
     },
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       observeProjectFileVersion,
       recordEdit,
       showToast,
@@ -66461,7 +66446,6 @@ function useTimelineAssetDropOps({
   showToast,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   reloadPreview,
   uploadProjectFiles,
   isRecordingRef,
@@ -66512,7 +66496,6 @@ function useTimelineAssetDropOps({
             )
           })
         );
-        domEditSaveTimestampRef.current = Date.now();
         await saveProjectFilesWithHistory({
           projectId: pid,
           label: "Add timeline asset",
@@ -66536,7 +66519,6 @@ function useTimelineAssetDropOps({
       showToast,
       timelineElements,
       writeProjectFile,
-      domEditSaveTimestampRef,
       reloadPreview,
       isRecordingRef,
       forceReloadSdkSession
@@ -66596,7 +66578,6 @@ function useTimelineAssetDropOps({
           resync: forceReloadSdkSession,
           refresh: reloadPreview
         });
-        domEditSaveTimestampRef.current = Date.now();
         showToast("Composition added to the timeline.", "info");
       } catch (error) {
         showToast(
@@ -66607,7 +66588,6 @@ function useTimelineAssetDropOps({
     },
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       forceReloadSdkSession,
       isRecordingRef,
       observeProjectFileVersion,
@@ -66681,7 +66661,6 @@ async function setAudioGroupAttribute({
   previewIframe,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   pendingTimelineEditPathRef
 }) {
   const groupEl = previewIframe?.contentDocument?.getElementById(groupId) ?? null;
@@ -66697,7 +66676,6 @@ async function setAudioGroupAttribute({
     label,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     pendingTimelineEditPathRef,
     patchLive: (v) => patchLiveGroupAttribute(previewIframe, groupId, attr, v)
   });
@@ -66708,7 +66686,6 @@ function useSetAudioGroupAttribute({
   showToast,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   previewIframeRef,
   pendingTimelineEditPathRef,
   isRecordingRef
@@ -66739,7 +66716,6 @@ function useSetAudioGroupAttribute({
           previewIframe: previewIframeRef.current,
           writeProjectFile,
           recordEdit,
-          domEditSaveTimestampRef,
           pendingTimelineEditPathRef
         });
         syncStoredGroupAttribute(groupId, attr, value);
@@ -66756,7 +66732,6 @@ function useSetAudioGroupAttribute({
       previewIframeRef,
       writeProjectFile,
       recordEdit,
-      domEditSaveTimestampRef,
       pendingTimelineEditPathRef,
       isRecordingRef,
       showToast,
@@ -66784,7 +66759,6 @@ async function setElementAttribute({
   previewIframe,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   pendingTimelineEditPathRef
 }) {
   const targetPath = element.sourceFile || activeCompPath || "index.html";
@@ -66799,7 +66773,6 @@ async function setElementAttribute({
     label,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     pendingTimelineEditPathRef,
     patchLive: (v) => patchLiveElementAttribute(previewIframe, element, attr, v, activeCompPath)
   });
@@ -66810,7 +66783,6 @@ function useSetElementAttribute({
   showToast,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   previewIframeRef,
   pendingTimelineEditPathRef,
   isRecordingRef
@@ -66840,7 +66812,6 @@ function useSetElementAttribute({
           previewIframe: previewIframeRef.current,
           writeProjectFile,
           recordEdit,
-          domEditSaveTimestampRef,
           pendingTimelineEditPathRef
         });
       } catch (error) {
@@ -66854,7 +66825,6 @@ function useSetElementAttribute({
       previewIframeRef,
       writeProjectFile,
       recordEdit,
-      domEditSaveTimestampRef,
       pendingTimelineEditPathRef,
       isRecordingRef,
       showToast,
@@ -66873,7 +66843,6 @@ function useTimelineDeleteOps({
   showToast,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   reloadPreview,
   isRecordingRef,
   forceReloadSdkSession,
@@ -66926,7 +66895,6 @@ function useTimelineDeleteOps({
         if (deleteContentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
           usePlayerStore.getState().setDuration(deleteContentEnd);
         }
-        domEditSaveTimestampRef.current = Date.now();
         try {
           await saveProjectFilesWithHistory({
             projectId: pid,
@@ -66966,7 +66934,6 @@ function useTimelineDeleteOps({
       showToast,
       timelineElements,
       writeProjectFile,
-      domEditSaveTimestampRef,
       reloadPreview,
       isRecordingRef,
       forceReloadSdkSession,
@@ -67029,7 +66996,6 @@ async function setElementsHidden({
   previewIframe,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   pendingTimelineEditPathRef
 }) {
   if (elements.length === 0) return [];
@@ -67059,7 +67025,6 @@ async function setElementsHidden({
       files[targetPath] = patchedContent;
       pendingTimelineEditPathRef.current.add(targetPath);
     }
-    domEditSaveTimestampRef.current = Date.now();
     const changedPaths = await saveProjectFilesWithHistory({
       projectId,
       label,
@@ -67073,7 +67038,6 @@ async function setElementsHidden({
       writeFile: writeProjectFile,
       recordEdit
     });
-    domEditSaveTimestampRef.current = Date.now();
     for (const element of elements) {
       usePlayerStore.getState().updateElement(element.key ?? element.id, { hidden });
     }
@@ -67094,7 +67058,6 @@ async function toggleTimelineTrackHidden({
   previewIframe,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   pendingTimelineEditPathRef
 }) {
   const suffix = trackDisplaySuffix(
@@ -67112,7 +67075,6 @@ async function toggleTimelineTrackHidden({
     previewIframe,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     pendingTimelineEditPathRef
   });
 }
@@ -67125,7 +67087,6 @@ async function toggleTimelineElementHidden({
   previewIframe,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   pendingTimelineEditPathRef
 }) {
   const keys = new Set(typeof elementKey2 === "string" ? [elementKey2] : elementKey2);
@@ -67139,7 +67100,6 @@ async function toggleTimelineElementHidden({
     previewIframe,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     pendingTimelineEditPathRef
   });
 }
@@ -67149,7 +67109,6 @@ function useTimelineTrackVisibilityEditing({
   showToast,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   previewIframeRef,
   pendingTimelineEditPathRef,
   isRecordingRef,
@@ -67175,7 +67134,6 @@ function useTimelineTrackVisibilityEditing({
           previewIframe: previewIframeRef.current,
           writeProjectFile,
           recordEdit,
-          domEditSaveTimestampRef,
           pendingTimelineEditPathRef
         });
         forceReloadSdkSession?.();
@@ -67191,7 +67149,6 @@ function useTimelineTrackVisibilityEditing({
       previewIframeRef,
       writeProjectFile,
       recordEdit,
-      domEditSaveTimestampRef,
       pendingTimelineEditPathRef,
       isRecordingRef,
       showToast,
@@ -67206,7 +67163,6 @@ function useTimelineElementVisibilityEditing({
   showToast,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   previewIframeRef,
   pendingTimelineEditPathRef,
   isRecordingRef,
@@ -67231,7 +67187,6 @@ function useTimelineElementVisibilityEditing({
           previewIframe: previewIframeRef.current,
           writeProjectFile,
           recordEdit,
-          domEditSaveTimestampRef,
           pendingTimelineEditPathRef
         });
         forceReloadSdkSession?.();
@@ -67247,7 +67202,6 @@ function useTimelineElementVisibilityEditing({
       previewIframeRef,
       writeProjectFile,
       recordEdit,
-      domEditSaveTimestampRef,
       pendingTimelineEditPathRef,
       isRecordingRef,
       showToast,
@@ -67314,7 +67268,6 @@ async function createAudioGroupAndAssignMembers({
   previewIframe,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   pendingTimelineEditPathRef
 }) {
   if (elements.length < 2) {
@@ -67362,7 +67315,6 @@ async function createAudioGroupAndAssignMembers({
       files[groupPath] = withGroupElement;
       pendingTimelineEditPathRef.current.add(groupPath);
     }
-    domEditSaveTimestampRef.current = Date.now();
     const changedPaths = await saveProjectFilesWithHistory({
       projectId,
       label: groupLabel2 ? `Group ${elements.length} clips as ${groupLabel2}` : `Group ${elements.length} voice clips`,
@@ -67376,7 +67328,6 @@ async function createAudioGroupAndAssignMembers({
       writeFile: writeProjectFile,
       recordEdit
     });
-    domEditSaveTimestampRef.current = Date.now();
     for (const element of elements) {
       usePlayerStore.getState().updateElement(element.key ?? element.id, { audioGroup: groupId });
     }
@@ -67396,7 +67347,6 @@ function useAudioGroupCarveAssignment({
   showToast,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   previewIframeRef,
   pendingTimelineEditPathRef,
   isRecordingRef
@@ -67431,7 +67381,6 @@ function useAudioGroupCarveAssignment({
           previewIframe: previewIframeRef.current,
           writeProjectFile,
           recordEdit,
-          domEditSaveTimestampRef,
           pendingTimelineEditPathRef
         });
       } catch (error) {
@@ -67447,7 +67396,6 @@ function useAudioGroupCarveAssignment({
       previewIframeRef,
       writeProjectFile,
       recordEdit,
-      domEditSaveTimestampRef,
       pendingTimelineEditPathRef,
       isRecordingRef,
       showToast,
@@ -67482,7 +67430,6 @@ function resizeHasPlaybackStartAdjustment(change) {
 }
 function useTimelineGroupEditing({
   activeCompPath,
-  domEditSaveTimestampRef,
   editQueueRef,
   forceReloadSdkSession,
   invalidateGsapCache,
@@ -67525,7 +67472,6 @@ function useTimelineGroupEditing({
         changes: batchChanges,
         writeProjectFile,
         recordEdit,
-        domEditSaveTimestampRef,
         pendingTimelineEditPathRef,
         coalesceKey,
         coalesceMs
@@ -67534,7 +67480,6 @@ function useTimelineGroupEditing({
     },
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       forceReloadSdkSession,
       pendingTimelineEditPathRef,
       recordEdit,
@@ -67554,7 +67499,6 @@ function useTimelineGroupEditing({
           editHistory: { recordEdit },
           writeProjectFile,
           reloadPreview,
-          domEditSaveTimestampRef,
           compositionPath: activeCompPath,
           readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
           publishSession: publishSdkSession
@@ -67570,7 +67514,6 @@ function useTimelineGroupEditing({
     },
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       projectIdRef,
       publishSdkSession,
       recordEdit,
@@ -67794,7 +67737,6 @@ function useTimelineEditing({
   writeProjectFile,
   observeProjectFileVersion,
   recordEdit,
-  domEditSaveTimestampRef,
   reloadPreview,
   previewIframeRef,
   pendingTimelineEditPathRef,
@@ -67826,7 +67768,6 @@ function useTimelineEditing({
           buildPatches,
           writeProjectFile,
           recordEdit,
-          domEditSaveTimestampRef,
           pendingTimelineEditPathRef,
           coalesceKey
         })
@@ -67842,7 +67783,6 @@ function useTimelineEditing({
       activeCompPath,
       recordEdit,
       writeProjectFile,
-      domEditSaveTimestampRef,
       pendingTimelineEditPathRef,
       showToast,
       isRecordingRef,
@@ -67851,7 +67791,6 @@ function useTimelineEditing({
   );
   const groupEditing = useTimelineGroupEditing({
     activeCompPath,
-    domEditSaveTimestampRef,
     editQueueRef,
     forceReloadSdkSession,
     invalidateGsapCache,
@@ -67936,7 +67875,6 @@ function useTimelineEditing({
                 editHistory: { recordEdit },
                 writeProjectFile,
                 reloadPreview,
-                domEditSaveTimestampRef,
                 compositionPath: activeCompPath,
                 // Capture on-disk bytes as the undo `before` so undoing a timing move
                 // restores the file verbatim, not a normalized full-DOM re-emit.
@@ -67967,7 +67905,6 @@ function useTimelineEditing({
       recordEdit,
       writeProjectFile,
       reloadPreview,
-      domEditSaveTimestampRef,
       timelineElements,
       handleDomZIndexReorderCommitRef,
       showToast,
@@ -68022,7 +67959,6 @@ function useTimelineEditing({
           editHistory: { recordEdit },
           writeProjectFile,
           reloadPreview,
-          domEditSaveTimestampRef,
           compositionPath: activeCompPath,
           // Capture on-disk bytes as the undo `before` so undoing a timing
           // resize restores the file verbatim, not a normalized full-DOM re-emit.
@@ -68049,7 +67985,6 @@ function useTimelineEditing({
       recordEdit,
       writeProjectFile,
       reloadPreview,
-      domEditSaveTimestampRef,
       showToast,
       invalidateGsapCache
     ]
@@ -68061,7 +67996,6 @@ function useTimelineEditing({
     showToast,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     previewIframeRef,
     pendingTimelineEditPathRef,
     isRecordingRef,
@@ -68073,7 +68007,6 @@ function useTimelineEditing({
     showToast,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     previewIframeRef,
     pendingTimelineEditPathRef,
     isRecordingRef,
@@ -68085,7 +68018,6 @@ function useTimelineEditing({
     showToast,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     previewIframeRef,
     pendingTimelineEditPathRef,
     isRecordingRef
@@ -68096,7 +68028,6 @@ function useTimelineEditing({
     showToast,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     previewIframeRef,
     pendingTimelineEditPathRef,
     isRecordingRef
@@ -68107,7 +68038,6 @@ function useTimelineEditing({
     showToast,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     previewIframeRef,
     pendingTimelineEditPathRef,
     isRecordingRef
@@ -68119,7 +68049,6 @@ function useTimelineEditing({
     showToast,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     reloadPreview,
     isRecordingRef,
     forceReloadSdkSession,
@@ -68132,7 +68061,6 @@ function useTimelineEditing({
     showToast,
     writeProjectFile,
     recordEdit,
-    domEditSaveTimestampRef,
     reloadPreview,
     uploadProjectFiles,
     isRecordingRef,
@@ -68147,7 +68075,6 @@ function useTimelineEditing({
     writeProjectFile,
     observeProjectFileVersion,
     recordEdit,
-    domEditSaveTimestampRef,
     reloadPreview,
     isRecordingRef,
     forceReloadSdkSession
@@ -68930,7 +68857,7 @@ function usePreviewInteraction({
       const wasPlaying = usePlayerStore.getState().isPlaying;
       pausePreviewPlayback();
       const resumeIfNothingSelected = () => {
-        if (wasPlaying) usePlayerStore.getState().setIsPlaying(true);
+        if (wasPlaying) usePlayerStore.getState().requestPlayback(true);
       };
       if (isDoubleClick && !e.shiftKey) {
         const hit = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY);
@@ -70481,7 +70408,6 @@ function useDomEditCommits({
   showToast,
   queueDomEditSave,
   writeProjectFile,
-  domEditSaveTimestampRef,
   editHistory,
   fileTree,
   importedFontAssetsRef,
@@ -70571,7 +70497,6 @@ function useDomEditCommits({
           );
         }
       }
-      domEditSaveTimestampRef.current = Date.now();
       const patchResponse = await fetch(
         buildProjectApiPath(pid, `/file-mutations/patch-element/${encodeURIComponent(targetPath)}`),
         {
@@ -70644,7 +70569,6 @@ function useDomEditCommits({
       editHistory,
       writeProjectFile,
       projectIdRef,
-      domEditSaveTimestampRef,
       reloadPreview,
       showToast,
       forceReloadSdkSession,
@@ -70685,7 +70609,6 @@ function useDomEditCommits({
               { alreadyToasted: true }
             );
           }
-          domEditSaveTimestampRef.current = Date.now();
           const atomicResult = await patchElementBatches(pid, batches);
           const allMatched = atomicResult.durable && atomicResult.files.every((result) => result.allMatched);
           const files = Object.fromEntries(
@@ -70723,15 +70646,7 @@ function useDomEditCommits({
         throw error;
       });
     },
-    [
-      domEditSaveTimestampRef,
-      editHistory,
-      forceReloadSdkSession,
-      projectIdRef,
-      queueDomEditSave,
-      reloadPreview,
-      showToast
-    ]
+    [editHistory, forceReloadSdkSession, projectIdRef, queueDomEditSave, reloadPreview, showToast]
   );
   const {
     handleDomStyleCommit,
@@ -70778,7 +70693,6 @@ function useDomEditCommits({
     activeCompPath,
     showToast,
     writeProjectFile,
-    domEditSaveTimestampRef,
     editHistory,
     projectIdRef,
     reloadPreview,
@@ -70836,7 +70750,6 @@ function computeGroupGeometry(members) {
 }
 async function commitStructuralMutation(pid, targetPath, route, body, label, deps) {
   const originalContent = await readProjectFileContent(pid, targetPath);
-  deps.domEditSaveTimestampRef.current = Date.now();
   const mutateResponse = await fetch(
     buildProjectApiPath(pid, `/file-mutations/${route}/${encodeURIComponent(targetPath)}`),
     {
@@ -72162,7 +72075,7 @@ function instantPatchesFor(options) {
     ...options.instantPatch ? [options.instantPatch] : []
   ];
 }
-function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, publishSdkSession, writeProjectFile, forceReloadSdkSession }) {
+function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, publishSdkSession, writeProjectFile, forceReloadSdkSession }) {
   const activeProjectId = projectIdRef.current;
   const activeCompPathRef = useRef127(activeCompPath);
   activeCompPathRef.current = activeCompPath;
@@ -72191,7 +72104,6 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       }
       return;
     }
-    if (previewIsActive) domEditSaveTimestampRef.current = Date.now();
     await recordMutationEdit(targetPath, result, options);
     if (!isActiveCommitTarget(projectIdRef, activeCompPathRef, projectId, compositionPath)) return;
     syncCommittedGsapMutation({
@@ -72206,7 +72118,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       reloadPreview,
       onCacheInvalidate
     });
-  }, [projectIdRef, previewIframeRef, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, forceReloadSdkSession, recordMutationEdit]);
+  }, [projectIdRef, previewIframeRef, reloadPreview, onCacheInvalidate, onFileContentChanged, forceReloadSdkSession, recordMutationEdit]);
   const runCommit = useCallback115(async (pid, compositionPath, targetPath, selection, mutation, options) => {
     const result = await runMutationRequest(
       [mutation],
@@ -72305,7 +72217,6 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       editHistory: { recordEdit: editHistory.recordEdit },
       writeProjectFile,
       reloadPreview,
-      domEditSaveTimestampRef,
       refresh: sdkRefresh,
       compositionPath: activeCompPath,
       readProjectFile: readProjectFileContent2,
@@ -72315,7 +72226,6 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       editHistory.recordEdit,
       writeProjectFile,
       reloadPreview,
-      domEditSaveTimestampRef,
       sdkRefresh,
       activeCompPath,
       readProjectFileContent2,
@@ -74216,7 +74126,6 @@ function useDomEditSession({
   readProjectFile,
   writeProjectFile,
   updateEditingFileContent,
-  domEditSaveTimestampRef,
   editHistory,
   fileTree,
   importedFontAssetsRef,
@@ -74329,7 +74238,6 @@ function useDomEditSession({
     activeCompPath,
     previewIframeRef,
     editHistory,
-    domEditSaveTimestampRef,
     reloadPreview,
     onCacheInvalidate: bumpGsapCache,
     onFileContentChanged: updateEditingFileContent,
@@ -74364,7 +74272,6 @@ function useDomEditSession({
     showToast,
     queueDomEditSave,
     writeProjectFile,
-    domEditSaveTimestampRef,
     editHistory,
     fileTree,
     importedFontAssetsRef,
@@ -74392,7 +74299,6 @@ function useDomEditSession({
           editHistory,
           writeProjectFile,
           reloadPreview,
-          domEditSaveTimestampRef,
           compositionPath: activeCompPath,
           readProjectFile,
           publishSession: publishSdkSession
@@ -74404,7 +74310,6 @@ function useDomEditSession({
       editHistory,
       writeProjectFile,
       reloadPreview,
-      domEditSaveTimestampRef,
       compositionPath: activeCompPath,
       readProjectFile,
       publishSession: publishSdkSession
@@ -74423,7 +74328,6 @@ function useDomEditSession({
     activeCompPath,
     showToast,
     writeProjectFile,
-    domEditSaveTimestampRef,
     editHistory,
     projectIdRef,
     reloadPreview,
@@ -74955,23 +74859,23 @@ function testHotAdapter() {
   const candidate = value;
   return typeof candidate.on === "function" && typeof candidate.off === "function" ? candidate : null;
 }
-function readFileChangeContent(payload) {
-  if (!payload || typeof payload !== "object") return null;
-  const record = payload;
-  if (typeof record.content === "string") return record.content;
-  return "data" in record ? readFileChangeContent(record.data) : null;
-}
-function readFileChangeVersion(payload) {
-  if (!payload || typeof payload !== "object") return null;
-  const record = payload;
-  if (typeof record.version === "string") return record.version;
-  return "data" in record ? readFileChangeVersion(record.data) : null;
+var readFileChangeContent = (payload) => readFileChangeField(payload, "content");
+var readFileChangeVersion = (payload) => readFileChangeField(payload, "version");
+var readFileChangeWriteToken = (payload) => readFileChangeField(payload, "writeToken");
+function decodeFileChange(delivery) {
+  const data = delivery?.data;
+  if (typeof data !== "string") return delivery;
+  try {
+    return JSON.parse(data);
+  } catch {
+    logReload("file-change", { path: null, why: "unparseable payload" });
+    return null;
+  }
 }
-function readFileChangeWriteToken(payload) {
-  if (!payload || typeof payload !== "object") return null;
-  const record = payload;
-  if (typeof record.writeToken === "string") return record.writeToken;
-  return "data" in record ? readFileChangeWriteToken(record.data) : null;
+function sseFileChangeChannel(onDelivery) {
+  const eventSource = new EventSource("/api/events");
+  eventSource.addEventListener("file-change", onDelivery);
+  return () => eventSource.close();
 }
 function eventIdentity(path, payload) {
   const version = readFileChangeVersion(payload);
@@ -75184,7 +75088,10 @@ function useExternalFileChangeCoordinator({
     // fallow-ignore-next-line complexity
     (payload) => {
       const path = readStudioFileChangePath(payload);
-      if (!path || !projectId) return;
+      if (!path || !projectId) {
+        logReload("file-change", { path: null, why: path ? "no project" : "no path in payload" });
+        return;
+      }
       pendingTimelineEditPathRef.current.delete(path);
       const content = readFileChangeContent(payload);
       const token = readFileChangeWriteToken(payload);
@@ -75211,7 +75118,7 @@ function useExternalFileChangeCoordinator({
     [projectId, pendingTimelineEditPathRef, startDrainLoop, onAcceptedPersistedFileChange]
   );
   useEffect106(() => {
-    const handler = (payload) => processChange(payload);
+    const handler = (delivery) => processChange(decodeFileChange(delivery));
     const adapter = testHotAdapter();
     if (adapter) {
       adapter.on("hf:file-change", handler);
@@ -75221,9 +75128,7 @@ function useExternalFileChangeCoordinator({
       import.meta.hot.on("hf:file-change", handler);
       return () => import.meta.hot?.off?.("hf:file-change", handler);
     }
-    const eventSource = new EventSource("/api/events");
-    eventSource.addEventListener("file-change", handler);
-    return () => eventSource.close();
+    return sseFileChangeChannel(handler);
   }, [processChange]);
   const retry = useCallback125(async () => {
     const current = blockedRef.current;
@@ -75873,7 +75778,6 @@ function useAppHotkeys({
   readOptionalProjectFile,
   readProjectFile,
   writeProjectFile,
-  domEditSaveTimestampRef,
   showToast,
   syncHistoryPreviewAfterApply,
   waitForPendingDomEditSaves,
@@ -75897,10 +75801,9 @@ function useAppHotkeys({
   );
   const writeHistoryFile = useCallback128(
     async (path, content) => {
-      domEditSaveTimestampRef.current = Date.now();
       await writeProjectFile(path, content);
     },
-    [domEditSaveTimestampRef, writeProjectFile]
+    [writeProjectFile]
   );
   const serializeHistoryFiles = useCallback128(
     (paths, task) => serializeStudioFileMutations(writeProjectFile, paths, task),
@@ -76136,7 +76039,6 @@ function useClipboard({
   showToast,
   writeProjectFile,
   recordEdit,
-  domEditSaveTimestampRef,
   reloadPreview,
   handleTimelineElementDelete,
   handleDomEditElementDelete,
@@ -76231,7 +76133,6 @@ function useClipboard({
           payload.originSelectorIndex
         );
       }
-      domEditSaveTimestampRef.current = Date.now();
       await saveProjectFilesWithHistory({
         projectId: pid,
         label: payload.kind === "timeline-clip" ? "Paste clip" : "Paste element",
@@ -76247,14 +76148,7 @@ function useClipboard({
       const message = error instanceof Error ? error.message : "Failed to paste";
       showToast(message);
     }
-  }, [
-    activeCompPath,
-    domEditSaveTimestampRef,
-    recordEdit,
-    reloadPreview,
-    showToast,
-    writeProjectFile
-  ]);
+  }, [activeCompPath, recordEdit, reloadPreview, showToast, writeProjectFile]);
   const handleCut = useCallback129(async () => {
     const copied = handleCopy2();
     if (!copied) return false;
@@ -85277,7 +85171,6 @@ function useVariablesPersist({
   writeProjectFile,
   recordEdit,
   reloadPreview,
-  domEditSaveTimestampRef,
   publishSdkSession
 }) {
   return useCallback160(
@@ -85293,7 +85186,6 @@ function useVariablesPersist({
           editHistory: { recordEdit },
           writeProjectFile,
           reloadPreview,
-          domEditSaveTimestampRef,
           compositionPath: activeCompPath,
           readProjectFile,
           publishSession: publishSdkSession
@@ -85310,7 +85202,6 @@ function useVariablesPersist({
       writeProjectFile,
       recordEdit,
       reloadPreview,
-      domEditSaveTimestampRef,
       publishSdkSession
     ]
   );
@@ -85362,7 +85253,7 @@ function useProjectCompositionVariables(fileTree, excludePath, readProjectFile,
   return groups;
 }
 function useEditVariablesInFile(deps) {
-  const { readProjectFile, writeProjectFile, recordEdit, reloadPreview, domEditSaveTimestampRef } = deps;
+  const { readProjectFile, writeProjectFile, recordEdit, reloadPreview } = deps;
   return useCallback161(
     async (path, label, mutate) => {
       const originalContent = await readProjectFile(path);
@@ -85382,14 +85273,13 @@ function useEditVariablesInFile(deps) {
           editHistory: { recordEdit },
           writeProjectFile,
           reloadPreview,
-          domEditSaveTimestampRef,
           compositionPath: path,
           readProjectFile
         },
         { label }
       );
     },
-    [readProjectFile, writeProjectFile, recordEdit, reloadPreview, domEditSaveTimestampRef]
+    [readProjectFile, writeProjectFile, recordEdit, reloadPreview]
   );
 }
 
@@ -85725,8 +85615,7 @@ function VariablesOtherCompositions({
   readProjectFile,
   writeProjectFile,
   recordEdit,
-  reloadPreview,
-  domEditSaveTimestampRef
+  reloadPreview
 }) {
   const [selfRefresh, setSelfRefresh] = useState144(0);
   const groups = useProjectCompositionVariables(
@@ -85739,8 +85628,7 @@ function VariablesOtherCompositions({
     readProjectFile,
     writeProjectFile,
     recordEdit,
-    reloadPreview,
-    domEditSaveTimestampRef
+    reloadPreview
   });
   const [editingKey, setEditingKey] = useState144(null);
   const onSave = useCallback162(
@@ -85943,7 +85831,6 @@ var VariablesPanel = memo51(function VariablesPanel2({
   sdkSession,
   publishSdkSession,
   reloadPreview,
-  domEditSaveTimestampRef,
   recordEdit
 }) {
   const { activeCompPath, showToast } = useStudioShellContext();
@@ -85967,7 +85854,6 @@ var VariablesPanel = memo51(function VariablesPanel2({
     writeProjectFile,
     recordEdit,
     reloadPreview,
-    domEditSaveTimestampRef,
     publishSdkSession
   });
   const declarations = useMemo72(
@@ -86202,8 +86088,7 @@ var VariablesPanel = memo51(function VariablesPanel2({
           readProjectFile,
           writeProjectFile,
           recordEdit,
-          reloadPreview,
-          domEditSaveTimestampRef
+          reloadPreview
         }
       )
     ] })
@@ -86285,7 +86170,6 @@ function useSlideshowPersist({
   writeProjectFile,
   recordEdit,
   reloadPreview,
-  domEditSaveTimestampRef,
   publishSdkSession,
   coalesceKey
 }) {
@@ -86302,7 +86186,6 @@ function useSlideshowPersist({
           editHistory: { recordEdit },
           writeProjectFile,
           reloadPreview,
-          domEditSaveTimestampRef,
           readProjectFile,
           publishSession: publishSdkSession
         },
@@ -86316,7 +86199,6 @@ function useSlideshowPersist({
       writeProjectFile,
       recordEdit,
       reloadPreview,
-      domEditSaveTimestampRef,
       publishSdkSession,
       coalesceKey
     ]
@@ -86572,7 +86454,6 @@ async function applyColorGradingScopeUpdate({
   selectedSourceFile,
   fileTree,
   projectId,
-  domEditSaveTimestampRef,
   waitForPendingDomEditSaves,
   readProjectFile,
   writeProjectFile,
@@ -86597,7 +86478,6 @@ async function applyColorGradingScopeUpdate({
     showToast("No color grading changed", "info");
     return EMPTY_COLOR_GRADING_SCOPE_RESULT;
   }
-  domEditSaveTimestampRef.current = Date.now();
   const changedPaths = await saveProjectFilesWithHistory({
     projectId,
     label: value ? "Apply color grading" : "Clear color grading",
@@ -86719,7 +86599,6 @@ function StudioRightPanel({
   publishSdkSession,
   forceReloadSdkSession,
   reloadPreview,
-  domEditSaveTimestampRef,
   recordEdit,
   onToggleElementHidden,
   onAutoGroupCarveSources,
@@ -86810,7 +86689,6 @@ function StudioRightPanel({
     writeProjectFile,
     recordEdit,
     reloadPreview,
-    domEditSaveTimestampRef,
     publishSdkSession
   });
   const onPersistSlideshowNotes = useSlideshowPersist({
@@ -86820,7 +86698,6 @@ function StudioRightPanel({
     writeProjectFile,
     recordEdit,
     reloadPreview,
-    domEditSaveTimestampRef,
     publishSdkSession,
     coalesceKey: activeCompPath ? `slideshow-notes:${activeCompPath}` : "slideshow-notes"
   });
@@ -86860,7 +86737,6 @@ function StudioRightPanel({
       selectedSourceFile: domEditSelection?.sourceFile || activeCompPath || "index.html",
       fileTree,
       projectId,
-      domEditSaveTimestampRef,
       waitForPendingDomEditSaves,
       readProjectFile,
       writeProjectFile,
@@ -86876,7 +86752,6 @@ function StudioRightPanel({
     }),
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       domEditSelection?.sourceFile,
       fileTree,
       projectId,
@@ -86913,7 +86788,6 @@ function StudioRightPanel({
       writeProjectFile,
       recordEdit,
       reloadPreview,
-      domEditSaveTimestampRef,
       forceReloadSharedSdkSession: forceReloadSdkSession,
       children: /* @__PURE__ */ jsx205(
         PropertyPanel,
@@ -87086,7 +86960,6 @@ function StudioRightPanel({
               sdkSession,
               publishSdkSession,
               reloadPreview,
-              domEditSaveTimestampRef,
               recordEdit
             }
           ) : layersPaneOpen && designPaneOpen && !STUDIO_FLAT_INSPECTOR_ENABLED ? /* @__PURE__ */ jsxs170("div", { ref: splitContainerRef, className: "flex h-full min-h-0 min-w-0 flex-col", children: [
@@ -89596,7 +89469,6 @@ function StudioApp() {
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = usePersistentEditHistory({ projectId });
-  const domEditSaveTimestampRef = useRef171(0);
   const handleDomZIndexReorderCommitRef = useRef171(null);
   const pendingTimelineEditPathRef = useRef171(/* @__PURE__ */ new Set());
   const isGestureRecordingRef = useRef171(false);
@@ -89605,7 +89477,6 @@ function StudioApp() {
     projectId,
     showToast,
     recordEdit: editHistory.recordEdit,
-    domEditSaveTimestampRef,
     setRefreshKey
   });
   const masterCompPath = useMemo77(
@@ -89654,7 +89525,6 @@ function StudioApp() {
     writeProjectFile: fileManager.writeProjectFile,
     observeProjectFileVersion: fileManager.observeProjectFileVersion,
     recordEdit: editHistory.recordEdit,
-    domEditSaveTimestampRef,
     reloadPreview,
     previewIframeRef,
     pendingTimelineEditPathRef,
@@ -89719,7 +89589,6 @@ function StudioApp() {
     showToast,
     writeProjectFile: fileManager.writeProjectFile,
     recordEdit: editHistory.recordEdit,
-    domEditSaveTimestampRef,
     reloadPreview,
     handleTimelineElementDelete: timelineEditing.handleTimelineElementDelete,
     handleDomEditElementDelete: domEditDeleteBridge,
@@ -89735,7 +89604,6 @@ function StudioApp() {
     readOptionalProjectFile: fileManager.readOptionalProjectFile,
     readProjectFile: fileManager.readProjectFile,
     writeProjectFile: fileManager.writeProjectFile,
-    domEditSaveTimestampRef,
     showToast,
     syncHistoryPreviewAfterApply: previewPersistence.syncHistoryPreviewAfterApply,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
@@ -89776,7 +89644,6 @@ function StudioApp() {
     readProjectFile: fileManager.readProjectFile,
     writeProjectFile: fileManager.writeProjectFile,
     updateEditingFileContent: fileManager.updateEditingFileContent,
-    domEditSaveTimestampRef,
     editHistory: { recordEdit: editHistory.recordEdit },
     fileTree: fileManager.fileTree,
     importedFontAssetsRef: fileManager.importedFontAssetsRef,
@@ -90023,7 +89890,6 @@ function StudioApp() {
                 publishSdkSession: sdkHandle.publish,
                 forceReloadSdkSession: sdkHandle.forceReload,
                 reloadPreview,
-                domEditSaveTimestampRef,
                 recordEdit: editHistory.recordEdit,
                 onToggleElementHidden: timelineEditing.handleToggleElementHidden,
                 onAutoGroupCarveSources: timelineEditing.handleAutoGroupCarveSources,