@hyperframes/studio 0.8.138 → 0.8.140

package/src/hooks/useExternalFileChangeCoordinator.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
 import {
-  mergeFileChangeAffectedCompositions,
+  mergeFileChangePayloads,
   readFileChangeAffectedCompositions,
   readFileChangeAffectsPreview,
   readFileChangeField,
@@ -125,14 +125,18 @@ function decodeFileChange(delivery: unknown): unknown {
   }
 }
 
-/**
- * The production transport. vitest defines `import.meta.hot`, so the selection
- * below never reaches this rung under test; the rung itself is exported so a test
- * can drive a real `MessageEvent` through the listener it registers.
- */
-export function sseFileChangeChannel(onDelivery: (delivery: unknown) => void): () => void {
+export function sseFileChangeChannel(
+  onDelivery: (delivery: unknown) => void,
+  onReconnect: () => void,
+): () => void {
   const eventSource = new EventSource("/api/events");
   eventSource.addEventListener("file-change", onDelivery);
+  // Reopening the stream does not replay changes missed during a disconnect.
+  let opened = false;
+  eventSource.addEventListener("open", () => {
+    if (opened) onReconnect();
+    opened = true;
+  });
   return () => eventSource.close();
 }
 
@@ -168,18 +172,19 @@ export function useExternalFileChangeCoordinator({
   const generationRef = useRef(0);
   const mountedRef = useRef(true);
   const lastEventIdentityRef = useRef<string | null>(null);
-  const blockedRef = useRef(blocked);
+  const blockedRef = useRef<ExternalFileChangeBlockedState | null>(null);
   const snapshotWriteTailRef = useRef<Promise<void>>(Promise.resolve());
   const drainingRef = useRef(false);
   const pendingPayloadRef = useRef<{ payload: unknown } | null>(null);
-  blockedRef.current = blocked;
-  // A newer blocked change replaces the held one, so it inherits the thumbnails the held one owed.
+  // A newer blocked change replaces the held one, so it inherits what the held one owed.
   const setBlocked = useCallback((next: ExternalFileChangeBlockedState | null) => {
-    setBlockedState((held) =>
+    const held = blockedRef.current;
+    const current =
       next && held
-        ? { ...next, payload: mergeFileChangeAffectedCompositions(held.payload, next.payload) }
-        : next,
-    );
+        ? { ...next, payload: mergeFileChangePayloads(held.payload, next.payload) }
+        : next;
+    blockedRef.current = current;
+    setBlockedState(current);
   }, []);
 
   useEffect(() => {
@@ -190,6 +195,10 @@ export function useExternalFileChangeCoordinator({
     };
   }, []);
 
+  useEffect(() => {
+    pendingPayloadRef.current = null;
+  }, [projectId]);
+
   useEffect(() => {
     generationRef.current += 1;
     setBlocked(null);
@@ -240,8 +249,12 @@ export function useExternalFileChangeCoordinator({
     };
   }, [loadConflictSnapshot, projectId, recoveryFilePath, setBlocked]);
 
-  const reloadAcceptedGeneration = useCallback(
-    (path: string, affectsPreview = true) => {
+  // What a settled change owes: thumbnails (unless its own write's echo brings them), then reloads.
+  const deliverOwed = useCallback(
+    (owed: unknown, accept = true) => {
+      const path = readStudioFileChangePath(owed) ?? ".";
+      const affectsPreview = readFileChangeAffectsPreview(owed);
+      if (accept) onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(owed));
       logReload(affectsPreview ? "reload" : "file-tree only", {
         path,
         by: "external-change coordinator",
@@ -255,7 +268,7 @@ export function useExternalFileChangeCoordinator({
       // a watcher event the SSE never delivered).
       void refreshFileTree?.();
     },
-    [reloadPreview, reloadSdkSession, refreshFileTree],
+    [onAcceptedPersistedFileChange, reloadPreview, reloadSdkSession, refreshFileTree],
   );
 
   const persistSnapshotInOrder = useCallback(async (write: () => Promise<void>) => {
@@ -274,21 +287,28 @@ export function useExternalFileChangeCoordinator({
       if (!path) return;
 
       const generation = ++generationRef.current;
+      const savingPath = getPendingCandidate?.()?.path;
       const result = await drainPendingChanges();
       if (!mountedRef.current || generation !== generationRef.current) return;
 
       if (result.status === "clean") {
         const previousBlocked = blockedRef.current;
-        if (previousBlocked?.status === "failed" && deleteConflictSnapshot) {
+        // Only saving the failed draft's file retires its copy; restored drafts are never queued.
+        if (
+          previousBlocked?.status === "failed" &&
+          !previousBlocked.recovered &&
+          previousBlocked.path === savingPath &&
+          deleteConflictSnapshot
+        ) {
           try {
-            await deleteConflictSnapshot(projectId!, path);
+            await deleteConflictSnapshot(projectId!, previousBlocked.path);
           } catch (error) {
             if (mountedRef.current && generation === generationRef.current) {
               setBlocked({
                 ...previousBlocked,
                 generation,
                 error,
-                payload: mergeFileChangeAffectedCompositions(payload, previousBlocked.payload),
+                payload: mergeFileChangePayloads(payload, previousBlocked.payload),
               });
             }
             return;
@@ -296,27 +316,30 @@ export function useExternalFileChangeCoordinator({
         }
         if (!mountedRef.current || generation !== generationRef.current) return;
         setBlocked(null);
-        const owed = previousBlocked
-          ? mergeFileChangeAffectedCompositions(previousBlocked.payload, payload)
-          : payload;
-        onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(owed));
-        reloadAcceptedGeneration(path, readFileChangeAffectsPreview(payload));
+        const restored = previousBlocked?.status === "failed" && previousBlocked.recovered;
+        deliverOwed(
+          previousBlocked && !restored
+            ? mergeFileChangePayloads(previousBlocked.payload, payload)
+            : payload,
+        );
         return;
       }
-      const content = readFileChangeContent(payload);
       if (result.status === "failed") {
+        // The draft names the file to recover; the payload stays the scope to reload.
         const candidate = getPendingCandidate?.();
-        const studioContent = candidate?.path === path ? candidate.content : null;
+        const failedPath = candidate?.path ?? (path === "." ? (recoveryFilePath ?? path) : path);
+        const studioContent = candidate?.content ?? null;
+        const external = failedPath === path ? payload : null;
         let error = result.error;
         if (studioContent != null && persistFailureSnapshot) {
           try {
             await persistSnapshotInOrder(() =>
               persistFailureSnapshot(
                 projectId!,
-                path,
+                failedPath,
                 studioContent,
-                readFileChangeVersion(payload),
-                content,
+                readFileChangeVersion(external),
+                readFileChangeContent(external),
                 result.error,
               ),
             );
@@ -333,7 +356,7 @@ export function useExternalFileChangeCoordinator({
         setBlocked({
           status: "failed",
           generation,
-          path,
+          path: failedPath,
           error,
           payload,
           studioContent,
@@ -348,7 +371,7 @@ export function useExternalFileChangeCoordinator({
         setBlocked({
           status: "failed",
           generation,
-          path,
+          path: result.error.filePath,
           error,
           payload,
           studioContent: result.error.attemptedContent,
@@ -365,14 +388,17 @@ export function useExternalFileChangeCoordinator({
       projectId,
       deleteConflictSnapshot,
       getPendingCandidate,
+      recoveryFilePath,
       persistConflictSnapshot,
       persistFailureSnapshot,
       persistSnapshotInOrder,
-      reloadAcceptedGeneration,
-      onAcceptedPersistedFileChange,
+      deliverOwed,
     ],
   );
 
+  const drainOnePendingRef = useRef(drainOnePending);
+  drainOnePendingRef.current = drainOnePending;
+
   const startDrainLoop = useCallback(async () => {
     if (drainingRef.current) return;
     drainingRef.current = true;
@@ -381,12 +407,12 @@ export function useExternalFileChangeCoordinator({
         const pending = pendingPayloadRef.current;
         if (!pending) break;
         pendingPayloadRef.current = null;
-        await drainOnePending(pending.payload);
+        await drainOnePendingRef.current(pending.payload);
       }
     } finally {
       drainingRef.current = false;
     }
-  }, [drainOnePending]);
+  }, []);
 
   const processChange = useCallback(
     // fallow-ignore-next-line complexity
@@ -439,8 +465,7 @@ export function useExternalFileChangeCoordinator({
         !readFileChangeAffectsPreview(payload);
       if (!waitingChangeOutranksThis) {
         pendingPayloadRef.current = {
-          payload:
-            waiting == null ? payload : mergeFileChangeAffectedCompositions(waiting, payload),
+          payload: waiting == null ? payload : mergeFileChangePayloads(waiting, payload),
         };
       }
       void startDrainLoop();
@@ -462,7 +487,8 @@ export function useExternalFileChangeCoordinator({
       import.meta.hot.on("hf:file-change", handler);
       return () => import.meta.hot?.off?.("hf:file-change", handler);
     }
-    return sseFileChangeChannel(handler);
+    const catchUp = () => processChangeRef.current({ path: "." });
+    return sseFileChangeChannel(handler, catchUp);
   }, []);
 
   const retry = useCallback(async () => {
@@ -489,18 +515,16 @@ export function useExternalFileChangeCoordinator({
       onUseExternalFile?.(path, external);
       await deleteConflictSnapshot?.(projectId, path);
       setBlocked(null);
-      onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(current.payload));
-      reloadAcceptedGeneration(path, readFileChangeAffectsPreview(current.payload));
+      deliverOwed(current.payload);
     },
     [
       deleteConflictSnapshot,
       setBlocked,
       discardPendingChanges,
       onUseExternalFile,
-      onAcceptedPersistedFileChange,
       projectId,
       readProjectFile,
-      reloadAcceptedGeneration,
+      deliverOwed,
       resetSaveQueues,
     ],
   );
@@ -550,7 +574,10 @@ export function useExternalFileChangeCoordinator({
     resetSaveQueues?.();
     await deleteConflictSnapshot?.(projectId, conflict.filePath);
     setBlocked(null);
-    reloadAcceptedGeneration(conflict.filePath);
+    deliverOwed(
+      mergeFileChangePayloads(current.payload, { path: conflict.filePath, affectsPreview: true }),
+      readStudioFileChangePath(current.payload) !== conflict.filePath,
+    );
   }, [
     deleteConflictSnapshot,
     setBlocked,
@@ -558,7 +585,7 @@ export function useExternalFileChangeCoordinator({
     overwriteConflict,
     projectId,
     readProjectFile,
-    reloadAcceptedGeneration,
+    deliverOwed,
     resetSaveQueues,
   ]);
 

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -42,6 +42,7 @@ vi.mock("./useSafeGsapCommitMutation", () => ({
 }));
 
 import { useGsapAwareEditing } from "./useGsapAwareEditing";
+import { isPreviewChanging } from "../player/previewReloading";
 import { tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 
 afterEach(() => {
@@ -235,6 +236,43 @@ describe("useGsapAwareEditing keeps the route a gesture chose at press", () => {
   });
 });
 
+describe("useGsapAwareEditing holds a canvas press while a drop saves", () => {
+  it.each([
+    ["a move through the script", false, "move"],
+    ["a group move through the script", false, "group"],
+    ["a move saved as CSS", true, "move"],
+  ])("%s", async (_, plainTranslate, kind) => {
+    let land: () => void = () => {};
+    const landed = new Promise<void>((resolve) => (land = resolve));
+    mocks.drag.mockImplementation(async () => {
+      await landed;
+      return { status: "persisted" };
+    });
+    const save = vi.fn().mockReturnValue(landed);
+    const stageElementPositionOffset = vi.fn(() => ({ save, rollback: vi.fn() }));
+    const { pathOffsetCommit, groupCommit, root } = mountGroupHandler({
+      stageElementPositionOffset,
+    });
+    const box = { element: document.createElement("div"), id: "box", selector: "#box" };
+    const selection = box as unknown as DomEditSelection;
+    const to = { x: 40, y: 20 };
+    let saved!: Promise<unknown>;
+    act(() => {
+      saved =
+        kind === "group"
+          ? groupCommit([{ selection, next: to, plainTranslate }])
+          : pathOffsetCommit(selection, to, { plainTranslate });
+    });
+    expect(isPreviewChanging(), "from the drop").toBe(!plainTranslate);
+    await act(async () => {
+      land();
+      await saved;
+    });
+    expect(isPreviewChanging()).toBe(false);
+    act(() => root.unmount());
+  });
+});
+
 describe("useGsapAwareEditing keeps the box route a resize chose at press", () => {
   it.each([
     ["the CSS route, on an element GSAP has since taken over", true],