@hyperframes/studio 0.7.58 → 0.7.59

package/src/hooks/useDomEditTextCommits.ts

@@ -145,15 +145,19 @@ export function useDomEditTextCommits({
   const domTextCommitVersionRef = useRef(0);
   const domStyleCommitVersionRef = useRef(new Map<string, number>());
 
-  const { handleDomAttributeCommit, handleDomAttributeLiveCommit, handleDomHtmlAttributeCommit } =
-    useDomEditAttributeCommits({
-      activeCompPath,
-      previewIframeRef,
-      showToast,
-      domEditSelection,
-      refreshDomEditSelectionFromPreview,
-      persistDomEditOperations,
-    });
+  const {
+    handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
+    handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
+  } = useDomEditAttributeCommits({
+    activeCompPath,
+    previewIframeRef,
+    showToast,
+    domEditSelection,
+    refreshDomEditSelectionFromPreview,
+    persistDomEditOperations,
+  });
 
   const handleDomStyleCommit = useCallback(
     async (property: string, value: string) => {
@@ -471,6 +475,7 @@ export function useDomEditTextCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,

package/src/hooks/useDomEditWiring.ts

@@ -55,24 +55,24 @@ export interface UseDomEditWiringParams {
     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,
@@ -105,7 +105,7 @@ export interface UseDomEditWiringParams {
     animId: string,
     resolvedFromValues?: Record<string, number | string>,
   ) => Promise<void>;
-  removeAllKeyframes: (sel: DomEditSelection, animId: string) => void;
+  removeAllKeyframes: (sel: DomEditSelection, animId: string) => Promise<void>;
   handleDomManualEditsReset: (sel: DomEditSelection) => void;
 }
 
@@ -245,6 +245,7 @@ export function useDomEditWiring({
     removeAllKeyframes,
     handleDomManualEditsReset,
     selectedGsapAnimations,
+    showToast,
   });
 
   // ── Preview sync side-effects ──

package/src/hooks/useElementLifecycleOps.ts

@@ -20,10 +20,15 @@ import {
   type LayerRevealCommitOwnership,
 } from "../components/editor/useLayerRevealOverride";
 import type { CommitDomEditPatchBatches, DomEditPatchBatch } from "./domEditCommitTypes";
+import { cutoverCommittedOrThrow, type CutoverResult } from "../utils/sdkCutover";
 
 interface UseElementLifecycleOpsParams extends DomEditCommitBaseParams {
-  /** Route delete through SDK when session resolves the hf-id; returns true if handled. */
-  onTrySdkDelete?: (hfId: string, originalContent: string, targetPath: string) => Promise<boolean>;
+  /** Route delete through SDK when session resolves the hf-id. */
+  onTrySdkDelete?: (
+    hfId: string,
+    originalContent: string,
+    targetPath: string,
+  ) => Promise<CutoverResult>;
   /** Resolver-shadow tripwire for the reordered targets (telemetry-only, decoupled from cutover). */
   onReorderShadow?: (targets: string[]) => void;
   /** Resync the SDK session after a server-fallback delete. */
@@ -97,7 +102,7 @@ export function useElementLifecycleOps({
 
         if (onTrySdkDelete && selection.hfId) {
           const handled = await onTrySdkDelete(selection.hfId, originalContent, targetPath);
-          if (handled) {
+          if (cutoverCommittedOrThrow(handled)) {
             clearDomSelection();
             usePlayerStore.getState().setSelectedElementId(null);
             showToast(`Deleted ${label}. Use Undo to restore it.`, "info");

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

@@ -0,0 +1,98 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("./useFileTree", () => ({
+  useFileTree: () => ({
+    projectDir: "",
+    fileTree: [],
+    setFileTree: vi.fn(),
+    fileTreeLoaded: true,
+    refreshFileTree: vi.fn(async () => {}),
+    compositions: [],
+    assets: [],
+    fontAssets: [],
+  }),
+}));
+
+vi.mock("./useEditorSave", () => ({
+  useEditorSave: () => ({
+    saveRafRef: { current: null },
+    handleContentChange: vi.fn(),
+  }),
+}));
+
+import { useFileManager } from "./useFileManager";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("useFileManager project ownership", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps delayed callbacks bound to the project that created them", async () => {
+    let resolveProjectARead: ((value: Response) => void) | undefined;
+    const projectARead = new Promise<Response>((resolve) => {
+      resolveProjectARead = resolve;
+    });
+    const fetchMock = vi.fn((url: string, init?: RequestInit) => {
+      if (url.includes("project-a") && !init?.method) return projectARead;
+      if (!init?.method) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ content: "PROJECT_B" }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true } as Response);
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const captured: { manager: ReturnType<typeof useFileManager> | null } = { manager: null };
+    function Probe({ projectId }: { projectId: string }) {
+      captured.manager = useFileManager({
+        projectId,
+        showToast: vi.fn(),
+        recordEdit: vi.fn(async () => {}),
+        domEditSaveTimestampRef: { current: 0 },
+        setRefreshKey: vi.fn(),
+      });
+      return null;
+    }
+
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a/../other?x=1" />));
+    const managerA = captured.manager;
+    if (!managerA) throw new Error("project A manager did not render");
+    const delayedRead = managerA.readProjectFile("index.html");
+
+    await act(async () => root.render(<Probe projectId="project-b#fragment" />));
+    const managerB = captured.manager;
+    if (!managerB) throw new Error("project B manager did not render");
+    expect(managerB.writeProjectFile).not.toBe(managerA.writeProjectFile);
+
+    resolveProjectARead?.({
+      ok: true,
+      json: async () => ({ content: "PROJECT_A" }),
+    } as Response);
+    await expect(delayedRead).resolves.toBe("PROJECT_A");
+    await managerA.writeProjectFile("index.html", "A_AFTER");
+    await expect(managerB.readProjectFile("index.html")).resolves.toBe("PROJECT_B");
+    await expect(managerB.readOptionalProjectFile("index.html")).resolves.toBe("PROJECT_B");
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/index.html",
+    );
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/index.html",
+      expect.objectContaining({ method: "PUT", body: "A_AFTER" }),
+    );
+    expect(fetchMock).toHaveBeenCalledWith("/api/projects/project-b%23fragment/files/index.html");
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/projects/project-b%23fragment/files/index.html?optional=1",
+    );
+
+    await act(async () => root.unmount());
+  });
+});

package/src/hooks/useFileManager.ts

@@ -66,38 +66,48 @@ export function useFileManager({
 
   // ── Core file I/O ──
 
-  const readProjectFile = useCallback(async (path: string): Promise<string> => {
-    const pid = projectIdRef.current;
-    if (!pid) throw new Error("No active project");
-    const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`);
-    if (!response.ok) throw new Error(`Failed to read ${path}`);
-    const data = (await response.json()) as { content?: string };
-    if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
-    return data.content;
-  }, []);
+  const readProjectFile = useCallback(
+    async (path: string): Promise<string> => {
+      if (!projectId) throw new Error("No active project");
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}`,
+      );
+      if (!response.ok) throw new Error(`Failed to read ${path}`);
+      const data = (await response.json()) as { content?: string };
+      if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
+      return data.content;
+    },
+    [projectId],
+  );
 
-  const writeProjectFile = useCallback(async (path: string, content: string): Promise<void> => {
-    const pid = projectIdRef.current;
-    if (!pid) throw new Error("No active project");
-    await retryStudioSave(async () => {
-      let response: Response;
-      try {
-        response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
-          method: "PUT",
-          headers: { "Content-Type": "text/plain" },
-          body: content,
-        });
-      } catch (error) {
-        throw new StudioSaveNetworkError(`Failed to save ${path}: network error`, {
-          cause: error,
-        });
+  const writeProjectFile = useCallback(
+    async (path: string, content: string): Promise<void> => {
+      if (!projectId) throw new Error("No active project");
+      const writeProjectId = projectId;
+      await retryStudioSave(async () => {
+        let response: Response;
+        try {
+          response = await fetch(
+            `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
+            {
+              method: "PUT",
+              headers: { "Content-Type": "text/plain" },
+              body: content,
+            },
+          );
+        } catch (error) {
+          throw new StudioSaveNetworkError(`Failed to save ${path}: network error`, {
+            cause: error,
+          });
+        }
+        if (!response.ok) throw await createStudioSaveHttpError(response, `Failed to save ${path}`);
+      });
+      if (projectIdRef.current === writeProjectId && editingPathRef.current === path) {
+        setEditingFile({ path, content });
       }
-      if (!response.ok) throw await createStudioSaveHttpError(response, `Failed to save ${path}`);
-    });
-    if (editingPathRef.current === path) {
-      setEditingFile({ path, content });
-    }
-  }, []);
+    },
+    [projectId],
+  );
 
   const updateEditingFileContent = useCallback((path: string, content: string) => {
     if (editingPathRef.current === path) {
@@ -105,16 +115,18 @@ export function useFileManager({
     }
   }, []);
 
-  const readOptionalProjectFile = useCallback(async (path: string): Promise<string> => {
-    const pid = projectIdRef.current;
-    if (!pid) throw new Error("No active project");
-    const response = await fetch(
-      `/api/projects/${pid}/files/${encodeURIComponent(path)}?optional=1`,
-    );
-    if (!response.ok) throw new Error(`Failed to read ${path}`);
-    const data = (await response.json()) as { content?: string };
-    return typeof data.content === "string" ? data.content : "";
-  }, []);
+  const readOptionalProjectFile = useCallback(
+    async (path: string): Promise<string> => {
+      if (!projectId) throw new Error("No active project");
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
+      );
+      if (!response.ok) throw new Error(`Failed to read ${path}`);
+      const data = (await response.json()) as { content?: string };
+      return typeof data.content === "string" ? data.content : "";
+    },
+    [projectId],
+  );
 
   // ── Editor save (debounced content change) ──
 
@@ -146,7 +158,7 @@ export function useFileManager({
         setEditingFile({ path, content: null });
         return;
       }
-      fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`)
+      fetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`)
         .then((r) => {
           if (!r.ok) throw new Error(`Failed to load ${path} (${r.status})`);
           return r.json();
@@ -179,7 +191,7 @@ export function useFileManager({
       const requestId = ++revealRequestIdRef.current;
       const controller = new AbortController();
       revealAbortRef.current = controller;
-      fetch(`/api/projects/${pid}/files/${encodeURIComponent(sourceFile)}`, {
+      fetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(sourceFile)}`, {
         signal: controller.signal,
       })
         .then((r) => r.json())
@@ -211,7 +223,7 @@ export function useFileManager({
 
       const qs = dir ? `?dir=${encodeURIComponent(dir)}` : "";
       try {
-        const res = await fetch(`/api/projects/${pid}/upload${qs}`, {
+        const res = await fetch(`/api/projects/${encodeURIComponent(pid)}/upload${qs}`, {
           method: "POST",
           body: formData,
         });
@@ -251,11 +263,14 @@ export function useFileManager({
         content =
           '<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="UTF-8">\n</head>\n<body>\n\n</body>\n</html>\n';
       }
-      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
-        method: "POST",
-        headers: { "Content-Type": "text/plain" },
-        body: content,
-      });
+      const res = await fetch(
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "text/plain" },
+          body: content,
+        },
+      );
       if (res.ok) {
         await refreshFileTree();
         handleFileSelect(path);
@@ -273,7 +288,7 @@ export function useFileManager({
       const pid = projectIdRef.current;
       if (!pid) return;
       const res = await fetch(
-        `/api/projects/${pid}/files/${encodeURIComponent(path + "/.gitkeep")}`,
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path + "/.gitkeep")}`,
         {
           method: "POST",
           headers: { "Content-Type": "text/plain" },
@@ -295,9 +310,12 @@ export function useFileManager({
     async (path: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
-        method: "DELETE",
-      });
+      const res = await fetch(
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`,
+        {
+          method: "DELETE",
+        },
+      );
       if (res.ok) {
         if (editingPathRef.current === path) setEditingFile(null);
         await refreshFileTree();
@@ -314,11 +332,14 @@ export function useFileManager({
     async (oldPath: string, newPath: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(oldPath)}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ newPath }),
-      });
+      const res = await fetch(
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(oldPath)}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ newPath }),
+        },
+      );
       if (res.ok) {
         if (editingPathRef.current === oldPath) {
           handleFileSelect(newPath);
@@ -338,7 +359,7 @@ export function useFileManager({
     async (path: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(`/api/projects/${pid}/duplicate-file`, {
+      const res = await fetch(`/api/projects/${encodeURIComponent(pid)}/duplicate-file`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ path }),
@@ -367,17 +388,18 @@ export function useFileManager({
 
   const handleImportFonts = useCallback(
     async (files: FileList | File[]): Promise<ImportedFontAsset[]> => {
+      const pid = projectIdRef.current;
+      if (!pid) return [];
       const uploaded = await uploadProjectFiles(
         Array.from(files).filter((file) => FONT_EXT.test(file.name)),
         "assets/fonts",
       );
-      const pid = projectIdRef.current;
       const imported = uploaded
         .filter((asset) => FONT_EXT.test(asset))
         .map((asset) => ({
           family: fontFamilyFromAssetPath(asset),
           path: asset,
-          url: `/api/projects/${pid}/preview/${asset}`,
+          url: `/api/projects/${encodeURIComponent(pid)}/preview/${asset}`,
         }));
       importedFontAssetsRef.current = [
         ...imported,

package/src/hooks/useGsapAnimationOps.ts

@@ -7,6 +7,7 @@ import {
   sdkGsapDeleteAllForSelectorPersist,
   sdkAddWithKeyframesPersist,
   sdkReplaceWithKeyframesPersist,
+  cutoverCommittedOrThrow,
   type CutoverDeps,
 } from "../utils/sdkCutover";
 import {
@@ -52,7 +53,7 @@ export function useGsapAnimationOps({
           sdkDeps,
           { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta` },
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
       commitMutationSafely(
         selection,
@@ -74,7 +75,7 @@ export function useGsapAnimationOps({
           sdkDeps,
           { label: "Delete GSAP animation" },
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
       commitMutationSafely(
         selection,
@@ -96,7 +97,7 @@ export function useGsapAnimationOps({
           sdkDeps,
           { label: "Delete all animations for element" },
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
       void commitMutation(
         selection,
@@ -162,7 +163,7 @@ export function useGsapAnimationOps({
           sdkDeps,
           { label: `Add GSAP ${method} animation` },
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
 
       await commitMutation(
@@ -213,7 +214,7 @@ export function useGsapAnimationOps({
           sdkDeps,
           { label },
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
       void commitMutation(
         selection,
@@ -256,7 +257,7 @@ export function useGsapAnimationOps({
           sdkDeps,
           { label },
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
       void commitMutation(
         selection,

package/src/hooks/useGsapKeyframeOps.ts

@@ -8,6 +8,7 @@ import {
   sdkGsapRemoveKeyframePersist,
   sdkGsapRemoveAllKeyframesPersist,
   sdkGsapConvertToKeyframesPersist,
+  cutoverCommittedOrThrow,
   type CutoverDeps,
 } from "../utils/sdkCutover";
 import type { KeyframeCacheEntry } from "../player/store/playerStore";
@@ -136,7 +137,7 @@ export function useGsapKeyframeOps({
                 coalesceKey: `gsap:${animationId}:kf:${percentage}`,
               },
             );
-            if (handled) return;
+            if (cutoverCommittedOrThrow(handled)) return;
           }
           await commitMutation(selection, mutation, {
             label: `Add keyframe at ${percentage}%`,
@@ -169,7 +170,7 @@ export function useGsapKeyframeOps({
           sdkDeps,
           toSdkPersistOptions(`Add keyframe at ${percentage}%`, commitOverrides),
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
       return commitMutation(
         selection,
@@ -218,7 +219,7 @@ export function useGsapKeyframeOps({
               sdkDeps,
               toSdkPersistOptions(label, commitOverrides),
             );
-            if (handled) return;
+            if (cutoverCommittedOrThrow(handled)) return;
           }
           const commitOptions = commitOverrides?.skipReload
             ? { label, ...commitOverrides }
@@ -300,7 +301,7 @@ export function useGsapKeyframeOps({
           sdkDeps,
           toSdkPersistOptions("Convert to keyframes", commitOverrides),
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
       return commitMutation(
         selection,
@@ -329,7 +330,7 @@ export function useGsapKeyframeOps({
           sdkDeps,
           { label: "Remove all keyframes" },
         );
-        if (handled) return;
+        if (cutoverCommittedOrThrow(handled)) return;
       }
       commitMutationSafely(
         selection,