@hyperframes/studio 0.7.58 → 0.7.59

package/src/hooks/useGsapSelectionHandlers.ts

@@ -3,7 +3,11 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
 import { computeCurrentPercentage } from "./gsapDragCommit";
-import { trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
+import {
+  getStudioSaveErrorMessage,
+  isStudioSaveErrorAlreadyToasted,
+  trackStudioSaveFailure,
+} from "../utils/studioSaveDiagnostics";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 
@@ -34,6 +38,7 @@ export function useGsapSelectionHandlers({
   removeAllKeyframes,
   handleDomManualEditsReset,
   selectedGsapAnimations,
+  showToast,
 }: {
   domEditSelection: DomEditSelection | null;
   updateGsapProperty: (
@@ -46,24 +51,24 @@ export function useGsapSelectionHandlers({
     sel: DomEditSelection,
     animId: string,
     updates: { duration?: number; ease?: string; position?: number },
-  ) => void;
-  deleteGsapAnimation: (sel: DomEditSelection, animId: string) => void;
-  deleteAllForSelector: (sel: DomEditSelection, targetSelector: string) => void;
+  ) => Promise<void>;
+  deleteGsapAnimation: (sel: DomEditSelection, animId: string) => Promise<void>;
+  deleteAllForSelector: (sel: DomEditSelection, targetSelector: string) => Promise<void>;
   addGsapAnimation: (
     sel: DomEditSelection,
     method: "to" | "from" | "set" | "fromTo",
     time: number,
   ) => Promise<void>;
-  addGsapProperty: (sel: DomEditSelection, animId: string, prop: string) => void;
-  removeGsapProperty: (sel: DomEditSelection, animId: string, prop: string) => void;
+  addGsapProperty: (sel: DomEditSelection, animId: string, prop: string) => Promise<void>;
+  removeGsapProperty: (sel: DomEditSelection, animId: string, prop: string) => Promise<void>;
   updateGsapFromProperty: (
     sel: DomEditSelection,
     animId: string,
     prop: string,
     value: number | string,
-  ) => void;
-  addGsapFromProperty: (sel: DomEditSelection, animId: string, prop: string) => void;
-  removeGsapFromProperty: (sel: DomEditSelection, animId: string, prop: string) => void;
+  ) => Promise<void>;
+  addGsapFromProperty: (sel: DomEditSelection, animId: string, prop: string) => Promise<void>;
+  removeGsapFromProperty: (sel: DomEditSelection, animId: string, prop: string) => Promise<void>;
   addKeyframe: (
     sel: DomEditSelection,
     animId: string,
@@ -104,10 +109,11 @@ export function useGsapSelectionHandlers({
     duration?: number,
     commitOverrides?: Partial<CommitMutationOptions>,
   ) => Promise<void>;
-  removeAllKeyframes: (sel: DomEditSelection, animId: string) => void;
+  removeAllKeyframes: (sel: DomEditSelection, animId: string) => Promise<void>;
 
   handleDomManualEditsReset: (sel: DomEditSelection) => void;
   selectedGsapAnimations: GsapAnimation[];
+  showToast: (message: string, tone?: "error" | "info") => void;
 }) {
   const lastSelectionRef = useRef<DomEditSelection | null>(null);
   if (domEditSelection) lastSelectionRef.current = domEditSelection;
@@ -124,8 +130,20 @@ export function useGsapSelectionHandlers({
         targetSelector: selection.selector,
         targetSourceFile: selection.sourceFile,
       });
+      if (!isStudioSaveErrorAlreadyToasted(error)) {
+        showToast(`Couldn't save animation: ${getStudioSaveErrorMessage(error)}`, "error");
+      }
+    },
+    [showToast],
+  );
+
+  const observeGsapMutation = useCallback(
+    (mutation: Promise<void>, selection: DomEditSelection, mutationType: string, label: string) => {
+      void mutation.catch((error) => {
+        trackGsapHandlerFailure(error, selection, mutationType, label);
+      });
     },
-    [],
+    [trackGsapHandlerFailure],
   );
 
   const handleGsapUpdateProperty = useCallback(
@@ -144,18 +162,23 @@ export function useGsapSelectionHandlers({
     ) => {
       const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
-      updateGsapMeta(sel, animId, updates);
+      observeGsapMutation(
+        updateGsapMeta(sel, animId, updates),
+        sel,
+        "update-meta",
+        "Edit GSAP animation",
+      );
     },
-    [domEditSelection, updateGsapMeta],
+    [domEditSelection, observeGsapMutation, updateGsapMeta],
   );
 
   const handleGsapDeleteAnimation = useCallback(
     (animId: string) => {
       const sel = domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
-      deleteGsapAnimation(sel, animId);
+      observeGsapMutation(deleteGsapAnimation(sel, animId), sel, "delete", "Delete GSAP animation");
     },
-    [domEditSelection, deleteGsapAnimation],
+    [domEditSelection, deleteGsapAnimation, observeGsapMutation],
   );
 
   const handleGsapDeleteAllForElement = useCallback(
@@ -163,9 +186,14 @@ export function useGsapSelectionHandlers({
       const sel = domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
       trackStudioEvent("keyframe", { action: "delete_all" });
-      deleteAllForSelector(sel, targetSelector);
+      observeGsapMutation(
+        deleteAllForSelector(sel, targetSelector),
+        sel,
+        "delete-all-for-selector",
+        "Delete all animations for element",
+      );
     },
-    [domEditSelection, deleteAllForSelector],
+    [domEditSelection, deleteAllForSelector, observeGsapMutation],
   );
 
   const handleGsapAddAnimation = useCallback(
@@ -186,41 +214,66 @@ export function useGsapSelectionHandlers({
   const handleGsapAddProperty = useCallback(
     (animId: string, prop: string) => {
       if (!domEditSelection) return;
-      addGsapProperty(domEditSelection, animId, prop);
+      observeGsapMutation(
+        addGsapProperty(domEditSelection, animId, prop),
+        domEditSelection,
+        "add-property",
+        `Add GSAP ${prop}`,
+      );
     },
-    [domEditSelection, addGsapProperty],
+    [domEditSelection, addGsapProperty, observeGsapMutation],
   );
 
   const handleGsapRemoveProperty = useCallback(
     (animId: string, prop: string) => {
       if (!domEditSelection) return;
-      removeGsapProperty(domEditSelection, animId, prop);
+      observeGsapMutation(
+        removeGsapProperty(domEditSelection, animId, prop),
+        domEditSelection,
+        "remove-property",
+        `Remove GSAP ${prop}`,
+      );
     },
-    [domEditSelection, removeGsapProperty],
+    [domEditSelection, observeGsapMutation, removeGsapProperty],
   );
 
   const handleGsapUpdateFromProperty = useCallback(
     (animId: string, prop: string, value: number | string) => {
       if (!domEditSelection) return;
-      updateGsapFromProperty(domEditSelection, animId, prop, value);
+      observeGsapMutation(
+        updateGsapFromProperty(domEditSelection, animId, prop, value),
+        domEditSelection,
+        "update-from-property",
+        `Edit GSAP from-${prop}`,
+      );
     },
-    [domEditSelection, updateGsapFromProperty],
+    [domEditSelection, observeGsapMutation, updateGsapFromProperty],
   );
 
   const handleGsapAddFromProperty = useCallback(
     (animId: string, prop: string) => {
       if (!domEditSelection) return;
-      addGsapFromProperty(domEditSelection, animId, prop);
+      observeGsapMutation(
+        addGsapFromProperty(domEditSelection, animId, prop),
+        domEditSelection,
+        "add-from-property",
+        `Add GSAP from-${prop}`,
+      );
     },
-    [domEditSelection, addGsapFromProperty],
+    [domEditSelection, addGsapFromProperty, observeGsapMutation],
   );
 
   const handleGsapRemoveFromProperty = useCallback(
     (animId: string, prop: string) => {
       if (!domEditSelection) return;
-      removeGsapFromProperty(domEditSelection, animId, prop);
+      observeGsapMutation(
+        removeGsapFromProperty(domEditSelection, animId, prop),
+        domEditSelection,
+        "remove-from-property",
+        `Remove GSAP from-${prop}`,
+      );
     },
-    [domEditSelection, removeGsapFromProperty],
+    [domEditSelection, observeGsapMutation, removeGsapFromProperty],
   );
 
   const handleGsapAddKeyframe = useCallback(
@@ -354,18 +407,28 @@ export function useGsapSelectionHandlers({
   const handleGsapRemoveAllKeyframes = useCallback(
     (animId: string) => {
       if (!domEditSelection) return;
-      removeAllKeyframes(domEditSelection, animId);
+      observeGsapMutation(
+        removeAllKeyframes(domEditSelection, animId),
+        domEditSelection,
+        "remove-all-keyframes",
+        "Remove all keyframes",
+      );
     },
-    [domEditSelection, removeAllKeyframes],
+    [domEditSelection, observeGsapMutation, removeAllKeyframes],
   );
 
   const handleResetSelectedElementKeyframes = useCallback((): boolean => {
     if (!domEditSelection) return false;
     const withKeyframes = selectedGsapAnimations.find((a) => a.keyframes);
     if (!withKeyframes) return false;
-    removeAllKeyframes(domEditSelection, withKeyframes.id);
+    observeGsapMutation(
+      removeAllKeyframes(domEditSelection, withKeyframes.id),
+      domEditSelection,
+      "remove-all-keyframes",
+      "Remove all keyframes",
+    );
     return true;
-  }, [domEditSelection, selectedGsapAnimations, removeAllKeyframes]);
+  }, [domEditSelection, observeGsapMutation, removeAllKeyframes, selectedGsapAnimations]);
 
   return {
     handleGsapUpdateProperty,

package/src/hooks/useInspectorSplitResize.ts

@@ -0,0 +1,51 @@
+import { useCallback, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+
+const MIN_INSPECTOR_SPLIT_PERCENT = 20;
+const MAX_INSPECTOR_SPLIT_PERCENT = 75;
+
+export function useInspectorSplitResize() {
+  const [layersPanePercent, setLayersPanePercent] = useState(40);
+  const splitContainerRef = useRef<HTMLDivElement>(null);
+  const splitDragRef = useRef<{
+    startY: number;
+    startPercent: number;
+    height: number;
+  } | null>(null);
+
+  const handleInspectorSplitResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      const height = splitContainerRef.current?.getBoundingClientRect().height ?? 0;
+      splitDragRef.current = {
+        startY: event.clientY,
+        startPercent: layersPanePercent,
+        height,
+      };
+    },
+    [layersPanePercent],
+  );
+
+  const handleInspectorSplitResizeMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = splitDragRef.current;
+    if (!drag || drag.height <= 0) return;
+    const deltaPercent = ((event.clientY - drag.startY) / drag.height) * 100;
+    const next = Math.min(
+      MAX_INSPECTOR_SPLIT_PERCENT,
+      Math.max(MIN_INSPECTOR_SPLIT_PERCENT, drag.startPercent + deltaPercent),
+    );
+    setLayersPanePercent(next);
+  }, []);
+
+  const handleInspectorSplitResizeEnd = useCallback(() => {
+    splitDragRef.current = null;
+  }, []);
+
+  return {
+    layersPanePercent,
+    splitContainerRef,
+    handleInspectorSplitResizeStart,
+    handleInspectorSplitResizeMove,
+    handleInspectorSplitResizeEnd,
+  };
+}

package/src/hooks/usePersistentEditHistory.projectOwnership.test.tsx

@@ -0,0 +1,60 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it } from "vitest";
+import { createMemoryEditHistoryStorage } from "../utils/editHistoryStorage";
+import { usePersistentEditHistory } from "./usePersistentEditHistory";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+async function flushAsyncEffects(): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+describe("usePersistentEditHistory project ownership", () => {
+  it("rejects a delayed project A recorder after project B becomes active", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    const now = () => 100;
+    const captured: { history: ReturnType<typeof usePersistentEditHistory> | null } = {
+      history: null,
+    };
+
+    function Probe({ projectId }: { projectId: string }) {
+      captured.history = usePersistentEditHistory({ projectId, storage, now });
+      return null;
+    }
+
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+    const recordProjectA = captured.history?.recordEdit;
+    if (!recordProjectA) throw new Error("project A history did not load");
+
+    await act(async () => root.render(<Probe projectId="project-b" />));
+    await expect(
+      recordProjectA({
+        label: "Delayed A edit",
+        kind: "manual",
+        files: { "index.html": { before: "A", after: "A2" } },
+      }),
+    ).rejects.toThrow("inactive project project-a");
+    await flushAsyncEffects();
+
+    const recordProjectB = captured.history?.recordEdit;
+    if (!recordProjectB) throw new Error("project B history did not load");
+    await act(async () => {
+      await recordProjectB({
+        label: "B edit",
+        kind: "manual",
+        files: { "index.html": { before: "B", after: "B2" } },
+      });
+    });
+
+    expect(await storage.get("project-a")).toBeNull();
+    expect((await storage.get("project-b"))?.undo.map((entry) => entry.label)).toEqual(["B edit"]);
+
+    await act(async () => root.unmount());
+  });
+});

package/src/hooks/usePersistentEditHistory.test.ts

@@ -1,7 +1,11 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { createEmptyEditHistory } from "../utils/editHistory";
 import type { EditHistoryStorageAdapter } from "../utils/editHistoryStorage";
 import { createMemoryEditHistoryStorage } from "../utils/editHistoryStorage";
+import {
+  serializeStudioFileMutation,
+  serializeStudioFileMutations,
+} from "../utils/studioFileMutationCoordinator";
 import {
   createPersistentEditHistoryController,
   createPersistentEditHistoryStore,
@@ -213,6 +217,50 @@ describe("createPersistentEditHistoryController", () => {
     expect(store.snapshot().canRedo).toBe(true);
   });
 
+  it("waits for same-file mutations before checking an undo hash", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    const store = createPersistentEditHistoryStore({
+      projectId: "project-1",
+      storage,
+      initialState: createEmptyEditHistory(),
+      now: () => 100,
+      onChange: () => {},
+    });
+    await store.recordEdit({
+      label: "Edit source",
+      kind: "source",
+      files: { "index.html": { before: "before", after: "after" } },
+    });
+
+    let disk = "after";
+    let release!: () => void;
+    const blocked = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const writeFile = vi.fn(async (_path: string, content: string) => {
+      disk = content;
+    });
+    const priorMutation = serializeStudioFileMutation(writeFile, "index.html", async () => {
+      await blocked;
+      disk = "newer-edit";
+    });
+    const readFile = vi.fn(async () => disk);
+    const undo = store.undo({
+      readFile,
+      writeFile,
+      serialize: (paths, task) => serializeStudioFileMutations(writeFile, paths, task),
+    });
+
+    await Promise.resolve();
+    expect(readFile).not.toHaveBeenCalled();
+    release();
+    await priorMutation;
+    await expect(undo).resolves.toMatchObject({ ok: false, reason: "content-mismatch" });
+    expect(disk).toBe("newer-edit");
+    expect(writeFile).not.toHaveBeenCalled();
+    expect(store.snapshot().canUndo).toBe(true);
+  });
+
   it("returns per-file restored/previous content so the preview can soft-apply", async () => {
     const storage = createMemoryEditHistoryStorage();
     const store = createPersistentEditHistoryStore({

package/src/hooks/usePersistentEditHistory.ts

@@ -30,6 +30,7 @@ interface RecordEditInput {
 interface ApplyCallbacks {
   readFile: (path: string) => Promise<string>;
   writeFile: (path: string, content: string) => Promise<void>;
+  serialize?: <T>(paths: readonly string[], task: () => Promise<T>) => Promise<T>;
 }
 
 interface UsePersistentEditHistoryOptions {
@@ -167,31 +168,32 @@ async function applyHistoryStep(
   if (!entry) {
     return { state: currentState, result: { ok: false, reason: "empty" } };
   }
-  const { currentFiles, currentHashes } = await readCurrentFileHashes(
-    Object.keys(entry.files),
-    callbacks.readFile,
-  );
-  const result = transition(currentState, currentHashes, now());
-  if (!result.ok) {
+  const paths = Object.keys(entry.files);
+  const apply = async (): Promise<{ state: EditHistoryState; result: ApplyResult }> => {
+    const { currentFiles, currentHashes } = await readCurrentFileHashes(paths, callbacks.readFile);
+    const result = transition(currentState, currentHashes, now());
+    if (!result.ok) {
+      return {
+        state: currentState,
+        result: { ok: false, reason: result.reason },
+      };
+    }
+    await writeFilesWithRollback({
+      files: result.filesToWrite,
+      rollbackFiles: currentFiles,
+      writeFile: callbacks.writeFile,
+    });
     return {
-      state: currentState,
-      result: { ok: false, reason: result.reason },
+      state: result.state,
+      result: {
+        ok: true,
+        label: result.entry.label,
+        paths: Object.keys(result.entry.files),
+        files: restoredFilesMap(result.filesToWrite, currentFiles),
+      },
     };
-  }
-  await writeFilesWithRollback({
-    files: result.filesToWrite,
-    rollbackFiles: currentFiles,
-    writeFile: callbacks.writeFile,
-  });
-  return {
-    state: result.state,
-    result: {
-      ok: true,
-      label: result.entry.label,
-      paths: Object.keys(result.entry.files),
-      files: restoredFilesMap(result.filesToWrite, currentFiles),
-    },
   };
+  return callbacks.serialize ? callbacks.serialize(paths, apply) : apply();
 }
 
 export function createPersistentEditHistoryStore({
@@ -305,11 +307,15 @@ export function usePersistentEditHistory(options: UsePersistentEditHistoryOption
   const [loaded, setLoaded] = useState(false);
   const projectId = options.projectId;
   const storeRef = useRef<ReturnType<typeof createPersistentEditHistoryStore> | null>(null);
+  const storeProjectIdRef = useRef<string | null>(null);
+  const activeProjectIdRef = useRef(projectId);
+  activeProjectIdRef.current = projectId;
 
   useEffect(() => {
     let cancelled = false;
     const emptyState = createEmptyEditHistory();
     storeRef.current = null;
+    storeProjectIdRef.current = null;
     setState(emptyState);
     setLoaded(false);
     if (!projectId) {
@@ -327,6 +333,7 @@ export function usePersistentEditHistory(options: UsePersistentEditHistoryOption
           now,
           onChange: setState,
         });
+        storeProjectIdRef.current = projectId;
         setState(loadedState);
       })
       .catch(() => {
@@ -338,6 +345,7 @@ export function usePersistentEditHistory(options: UsePersistentEditHistoryOption
           now,
           onChange: setState,
         });
+        storeProjectIdRef.current = projectId;
         setState(emptyState);
       })
       .finally(() => {
@@ -349,17 +357,49 @@ export function usePersistentEditHistory(options: UsePersistentEditHistoryOption
     };
   }, [now, projectId, storage]);
 
-  const recordEdit = useCallback(async (input: RecordEditInput) => {
-    await storeRef.current?.recordEdit(input);
-  }, []);
+  const recordEdit = useCallback(
+    async (input: RecordEditInput) => {
+      if (!projectId) return;
+      if (activeProjectIdRef.current !== projectId) {
+        throw new Error(`Cannot record an edit for inactive project ${projectId}`);
+      }
+      const store = storeRef.current;
+      if (!store) return;
+      if (storeProjectIdRef.current !== projectId) {
+        throw new Error(`Edit history store does not belong to project ${projectId}`);
+      }
+      await store.recordEdit(input);
+    },
+    [projectId],
+  );
 
-  const undo = useCallback(async (callbacks: ApplyCallbacks): Promise<ApplyResult> => {
-    return storeRef.current?.undo(callbacks) ?? { ok: false, reason: "empty" };
-  }, []);
+  const undo = useCallback(
+    async (callbacks: ApplyCallbacks): Promise<ApplyResult> => {
+      if (
+        !projectId ||
+        activeProjectIdRef.current !== projectId ||
+        storeProjectIdRef.current !== projectId
+      ) {
+        return { ok: false, reason: "empty" };
+      }
+      return storeRef.current?.undo(callbacks) ?? { ok: false, reason: "empty" };
+    },
+    [projectId],
+  );
 
-  const redo = useCallback(async (callbacks: ApplyCallbacks): Promise<ApplyResult> => {
-    return storeRef.current?.redo(callbacks) ?? { ok: false, reason: "empty" };
-  }, []);
+  const redo = useCallback(
+    async (callbacks: ApplyCallbacks): Promise<ApplyResult> => {
+      if (
+        !projectId ||
+        activeProjectIdRef.current !== projectId ||
+        storeProjectIdRef.current !== projectId
+      ) {
+        return { ok: false, reason: "empty" };
+      }
+      return storeRef.current?.redo(callbacks) ?? { ok: false, reason: "empty" };
+    },
+    [projectId],
+  );
 
   return {
     loaded,

package/src/hooks/useProjectCompositionVariables.ts

@@ -103,17 +103,16 @@ export function useEditVariablesInFile(deps: EditVariablesDeps) {
   return useCallback(
     async (path: string, label: string, mutate: (session: Composition) => void): Promise<void> => {
       const originalContent = await readProjectFile(path);
-      const comp = await openComposition(originalContent, { history: false });
-      let after: string;
-      try {
-        mutate(comp);
-        after = comp.serialize();
-      } finally {
-        comp.dispose();
-      }
-      if (after === originalContent) return;
       await persistSdkSerialize(
-        after,
+        async (onDiskBefore) => {
+          const comp = await openComposition(onDiskBefore, { history: false });
+          try {
+            mutate(comp);
+            return comp.serialize();
+          } finally {
+            comp.dispose();
+          }
+        },
         path,
         originalContent,
         {
@@ -122,6 +121,7 @@ export function useEditVariablesInFile(deps: EditVariablesDeps) {
           reloadPreview,
           domEditSaveTimestampRef,
           compositionPath: path,
+          readProjectFile,
         },
         { label },
       );