@hyperframes/studio 0.7.58 → 0.7.60

package/src/hooks/useDomEditSession.ts

@@ -7,7 +7,7 @@ import type { RightPanelTab } from "../utils/studioHelpers";
 import type { PatchTarget } from "../utils/sourcePatcher";
 import type { SidebarTab } from "../components/sidebar/LeftSidebar";
 import type { Composition } from "@hyperframes/sdk";
-import { sdkCutoverPersist, sdkDeletePersist } from "../utils/sdkCutover";
+import { sdkCutoverPersist, sdkDeletePersist, type PublishSdkSession } from "../utils/sdkCutover";
 import { runResolverShadow, recordResolverParity } from "../utils/sdkResolverShadow";
 import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
@@ -45,7 +45,7 @@ export interface UseDomEditSessionParams {
   refreshPreviewDocumentVersion: () => void;
   queueDomEditSave: <T>(save: () => Promise<T>) => Promise<T>;
   readProjectFile: (path: string) => Promise<string>;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   updateEditingFileContent: (path: string, content: string) => void;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
@@ -67,6 +67,7 @@ export interface UseDomEditSessionParams {
   selectSidebarTab?: (tab: SidebarTab) => void;
   getSidebarTab?: () => SidebarTab;
   sdkSession?: Composition | null;
+  publishSdkSession?: PublishSdkSession;
   forceReloadSdkSession?: () => void;
 }
 
@@ -108,10 +109,10 @@ export function useDomEditSession({
   selectSidebarTab,
   getSidebarTab,
   sdkSession,
+  publishSdkSession,
   forceReloadSdkSession,
 }: UseDomEditSessionParams) {
   void _setRefreshKey;
-
   // ── Selection ──
 
   const {
@@ -178,7 +179,6 @@ export function useDomEditSession({
     previewDocumentVersion,
     refreshDomEditSelectionFromPreview,
   });
-
   // ── GSAP cache (hoisted so both useGsapScriptCommits and useDomEditWiring share the same instance) ──
 
   const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
@@ -217,6 +217,7 @@ export function useDomEditSession({
     onFileContentChanged: updateEditingFileContent,
     showToast,
     sdkSession,
+    publishSdkSession,
     writeProjectFile,
     forceReloadSdkSession,
   });
@@ -229,6 +230,7 @@ export function useDomEditSession({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
@@ -260,8 +262,13 @@ export function useDomEditSession({
       ? (selection, operations, originalContent, targetPath, options) => {
           // Resolver shadow runs regardless of the cutover flag — decoupled tripwire.
           // Pass originalContent so the runtime-node filter can suppress hf-ids
-          // absent from source (script-created nodes the SDK can't model).
-          runResolverShadow(sdkSession, selection.hfId, operations, originalContent);
+          // absent from source (script-created nodes the SDK can't model), and
+          // the paths so cross-file edits (session models only the active comp)
+          // skip instead of emitting structural element_not_found noise.
+          runResolverShadow(sdkSession, selection.hfId, operations, originalContent, {
+            targetPath,
+            compositionPath: activeCompPath,
+          });
           return sdkCutoverPersist(
             selection,
             operations,
@@ -274,6 +281,8 @@ export function useDomEditSession({
               reloadPreview,
               domEditSaveTimestampRef,
               compositionPath: activeCompPath,
+              readProjectFile,
+              publishSession: publishSdkSession,
             },
             options,
           );
@@ -287,6 +296,8 @@ export function useDomEditSession({
             reloadPreview,
             domEditSaveTimestampRef,
             compositionPath: activeCompPath,
+            readProjectFile,
+            publishSession: publishSdkSession,
           })
       : undefined,
     // Resolver shadow for the z-index reorder edit: it takes the server path (no
@@ -524,6 +535,7 @@ export function useDomEditSession({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,

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/useEditorSave.ts

@@ -14,7 +14,7 @@ interface UseEditorSaveOptions {
   editingPathRef: React.RefObject<string | undefined>;
   projectIdRef: React.RefObject<string | null>;
   readProjectFile: (path: string) => Promise<string>;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;

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,109 @@
+// @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.endsWith("/files/missing.html") && !init?.method) {
+        return Promise.resolve({ ok: false, status: 404 } as Response);
+      }
+      if (url.includes("project-a") && !init?.method) return projectARead;
+      if (!init?.method) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ content: "PROJECT_B", version: "b-v1" }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({ version: "a-v2" }) } 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", version: "a-v1" }),
+    } as Response);
+    await expect(delayedRead).resolves.toBe("PROJECT_A");
+    await managerA.writeProjectFile("index.html", "A_AFTER");
+    await managerA.writeProjectFile("missing.html", "A_NEW");
+    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-a%2F..%2Fother%3Fx%3D1/files/missing.html",
+    );
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/missing.html",
+      expect.objectContaining({ method: "PUT", body: "A_NEW" }),
+    );
+    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());
+  });
+});