@hyperframes/studio 0.8.106 → 0.8.107

package/src/hooks/useDomEditCommits.test.tsx

@@ -7,7 +7,6 @@ import type { MutableRefObject } from "react";
 import type { DomEditSelection, DomEditTextField } from "../components/editor/domEditing";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import { usePlayerStore } from "../player";
-import { StudioSaveHttpError } from "../utils/studioSaveDiagnostics";
 import { createDomEditSaveQueue } from "../utils/domEditSaveQueue";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import type { CutoverResult } from "../utils/sdkCutover";
@@ -1318,101 +1317,57 @@ describe("useDomEditCommits style persist handling", () => {
     }
   });
 
-  it("keeps the already-persisted patch and toasts once when the prepareContent write fails", async () => {
-    stubPatchFetch(
-      {
-        ok: true,
-        changed: true,
-        matched: true,
-        content:
-          '<!doctype html><html><head></head><body><div data-hf-id="hf-card">Card</div></body></html>',
-      },
-      '<!doctype html><html><head></head><body><div data-hf-id="hf-card">Card</div></body></html>',
-    );
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    const { iframe, element } = createPreviewElement();
-    const selection = createSelection(element, {
-      textFields: [textField({ key: "self", value: "Card", source: "self", tagName: "div" })],
-    });
-    const rendered = renderDomEditCommits(createSelection(element), iframe, {
-      writeProjectFile: async () => {
-        throw new StudioSaveHttpError("Failed to save index.html (500)", 500);
-      },
-    });
-
-    try {
-      await act(async () => {
-        await rendered.hook.commitDomTextFields(
-          selection,
-          [textField({ key: "self", value: "Card", source: "self", tagName: "div" })],
-          {
-            importedFont: {
-              family: "Imported",
-              path: "fonts/Imported.woff2",
-              url: "/api/projects/p1/preview/fonts/Imported.woff2",
-            },
-          },
-        );
-      });
-
-      // The base patch already landed server-side before the font-face write
-      // failed, so this is recorded as a completed edit (not reverted/re-toasted
-      // as a full failure) — only the font embellishment is reported as lost.
-      expect(rendered.showToast).toHaveBeenCalledTimes(1);
-      expect(rendered.showToast).toHaveBeenCalledWith(
-        expect.stringContaining("Saved, but couldn't finish updating index.html"),
-        "error",
-      );
-      expect(rendered.showToast).toHaveBeenCalledWith(
-        expect.stringContaining("Failed to save index.html (500)"),
-        "error",
+  it.each(["style", "text"])(
+    "a %s edit with an imported font is one patch request that carries its @font-face",
+    async (kind) => {
+      const patchedContent =
+        '<!doctype html><html><head></head><body><div data-hf-id="hf-card">Card</div></body></html>';
+      const fetchMock = stubPatchFetch(
+        { ok: true, changed: true, matched: true, content: patchedContent },
+        patchedContent,
       );
-      expect(rendered.recordEdit).toHaveBeenCalledTimes(1);
-    } finally {
-      warnSpy.mockRestore();
-      rendered.cleanup();
-    }
-  });
+      const { iframe, element } = createPreviewElement();
+      const selection = createSelection(element, {
+        textFields: [textField({ key: "self", value: "Card", source: "self", tagName: "div" })],
+      });
+      const importedFont = {
+        family: "Imported",
+        path: "fonts/Imported.woff2",
+        url: "/api/projects/p1/preview/fonts/Imported.woff2",
+      };
+      const writeProjectFile = vi.fn(async () => {});
+      const rendered = renderDomEditCommits(selection, iframe, {
+        writeProjectFile,
+        importedFontAssets: [importedFont],
+      });
 
-  it("uses the patched server content as the custom-font write precondition", async () => {
-    const patchedContent =
-      '<!doctype html><html><head></head><body><div data-hf-id="hf-card">Card</div></body></html>';
-    stubPatchFetch(
-      { ok: true, changed: true, matched: true, content: patchedContent },
-      patchedContent,
-    );
-    const { iframe, element } = createPreviewElement();
-    const selection = createSelection(element, {
-      textFields: [textField({ key: "self", value: "Card", source: "self", tagName: "div" })],
-    });
-    const writeProjectFile = vi.fn(async () => {});
-    const rendered = renderDomEditCommits(selection, iframe, { writeProjectFile });
+      try {
+        await act(async () => {
+          if (kind === "style") await rendered.hook.handleDomStyleCommit("font-family", "Imported");
+          else
+            await rendered.hook.commitDomTextFields(
+              selection,
+              [textField({ key: "self", value: "Card", source: "self", tagName: "div" })],
+              { importedFont },
+            );
+        });
 
-    try {
-      await act(async () => {
-        await rendered.hook.commitDomTextFields(
-          selection,
-          [textField({ key: "self", value: "Card", source: "self", tagName: "div" })],
-          {
-            importedFont: {
-              family: "Imported",
-              path: "fonts/Imported.woff2",
-              url: "/api/projects/p1/preview/fonts/Imported.woff2",
-            },
-          },
+        const writes = fetchMock.mock.calls.filter(
+          ([, init]) => init?.method === "POST" || init?.method === "PUT",
         );
-      });
-
-      expect(writeProjectFile).toHaveBeenCalledWith(
-        "index.html",
-        expect.stringContaining("@font-face"),
-        patchedContent,
-      );
-      expect(rendered.showToast).not.toHaveBeenCalled();
-    } finally {
-      rendered.cleanup();
-    }
-  });
+        expect(writes).toHaveLength(1);
+        expect(requestUrl(writes[0]![0])).toContain("/file-mutations/patch-element/index.html");
+        const body = JSON.parse(String(writes[0]![1]?.body)) as { fontFaceCss?: string };
+        expect(body.fontFaceCss).toMatch(
+          /^@font-face \{ font-family: "Imported"; src: url\("fonts\/Imported.woff2"\)/,
+        );
+        expect(writeProjectFile).not.toHaveBeenCalled();
+        expect(rendered.showToast).not.toHaveBeenCalled();
+      } finally {
+        rendered.cleanup();
+      }
+    },
+  );
 
   it("keeps a rejected patch request (HTTP error) to one toast", async () => {
     const { rendered, cleanup } = renderStyleCommitWithFetch(async (input) => {
@@ -1736,3 +1691,128 @@ describe("useDomEditCommits attribute persist handling", () => {
     }
   });
 });
+
+describe("useDomEditCommits attribute batch commit", () => {
+  beforeEach(() => {
+    ensureCssEscape();
+    vi.clearAllMocks();
+    vi.unstubAllGlobals();
+    document.body.replaceChildren();
+  });
+
+  const original = '<video data-hf-id="hf-card" data-has-audio="true"></video>';
+  const patched = '<video data-hf-id="hf-card" muted></video>';
+  const mute = [
+    { type: "html-attribute" as const, property: "muted", value: "true" },
+    { type: "attribute" as const, property: "has-audio", value: null },
+  ];
+
+  it("sends mixed html and data attribute ops in ONE patch and ONE undo entry", async () => {
+    const fetchMock = stubPatchFetch(
+      {
+        ok: true,
+        changed: true,
+        matched: true,
+        content: patched,
+        path: "index.html",
+        version: "v2",
+      },
+      original,
+    );
+    const { iframe, element } = createPreviewElement(original);
+    const rendered = renderDomEditCommits(createSelection(element, { tagName: "video" }), iframe);
+
+    try {
+      let ok = false;
+      await act(async () => {
+        ok = await rendered.hook.handleDomAttributeBatchCommit(
+          createSelection(element, { tagName: "video" }),
+          mute,
+          { label: "Edit muted" },
+        );
+      });
+
+      const patches = fetchMock.mock.calls.filter(([input]) =>
+        requestUrl(input).includes("/file-mutations/patch-element/"),
+      );
+      expect(ok).toBe(true);
+      expect(patches).toHaveLength(1);
+      const body = JSON.parse(String(patches[0]?.[1]?.body));
+      expect(body.operations).toEqual(mute);
+      expect(rendered.recordEdit).toHaveBeenCalledTimes(1);
+      expect(rendered.recordEdit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          files: { "index.html": { before: original, after: patched } },
+        }),
+      );
+      expect(rendered.reloadPreview).toHaveBeenCalledTimes(1);
+      expect(element.hasAttribute("muted")).toBe(true);
+      expect(element.hasAttribute("data-has-audio")).toBe(false);
+    } finally {
+      rendered.cleanup();
+    }
+  });
+
+  it("folds a document-level prepareContent into the same single undo entry", async () => {
+    stubPatchFetch(
+      {
+        ok: true,
+        changed: true,
+        matched: true,
+        content: patched,
+        path: "index.html",
+        version: "v2",
+      },
+      original,
+    );
+    const writes: string[] = [];
+    const { iframe, element } = createPreviewElement(original);
+    const rendered = renderDomEditCommits(createSelection(element), iframe, {
+      writeProjectFile: async (_path, content) => {
+        writes.push(content);
+      },
+    });
+    const withSibling = `<audio id="a"></audio>${patched}`;
+
+    try {
+      await act(async () => {
+        await rendered.hook.handleDomAttributeBatchCommit(createSelection(element), mute, {
+          label: "Remove background",
+          prepareContent: () => withSibling,
+        });
+      });
+
+      expect(writes).toEqual([withSibling]);
+      expect(rendered.recordEdit).toHaveBeenCalledTimes(1);
+      expect(rendered.recordEdit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          label: "Remove background",
+          files: { "index.html": { before: original, after: withSibling } },
+        }),
+      );
+    } finally {
+      rendered.cleanup();
+    }
+  });
+
+  it("reverts every op in the batch and reports failure when the patch rejects", async () => {
+    stubPatchFetch(new Error("network down"), original);
+    const { iframe, element } = createPreviewElement(original);
+    const rendered = renderDomEditCommits(createSelection(element), iframe);
+
+    try {
+      let ok = true;
+      await act(async () => {
+        ok = await rendered.hook.handleDomAttributeBatchCommit(createSelection(element), mute, {
+          label: "Edit muted",
+        });
+      });
+
+      expect(ok).toBe(false);
+      expect(element.hasAttribute("muted")).toBe(false);
+      expect(element.getAttribute("data-has-audio")).toBe("true");
+    } finally {
+      rendered.cleanup();
+    }
+  });
+});

package/src/hooks/useDomEditCommits.ts

@@ -239,6 +239,7 @@ export function useDomEditCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,
@@ -305,6 +306,7 @@ export function useDomEditCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,

package/src/hooks/useDomEditCommitsHelpers.ts

@@ -198,25 +198,23 @@ export async function postPatchElement(
   return (await response.json()) as PatchElementResponse;
 }
 
-/** Writes `prepare`'s embellishment over the server's patch; returns what the file ends up holding. */
 export async function writePreparedContent(
   targetPath: string,
   patchedContent: string,
   prepare: (html: string, sourceFile: string) => string,
   writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
   showToast: ShowToast,
-): Promise<string> {
+): Promise<{ content: string; failed: boolean }> {
   const preparedContent = prepare(patchedContent, targetPath);
-  if (preparedContent === patchedContent) return patchedContent;
+  if (preparedContent === patchedContent) return { content: patchedContent, failed: false };
   try {
     await writeProjectFile(targetPath, preparedContent, patchedContent);
-    return preparedContent;
+    return { content: preparedContent, failed: false };
   } catch (error) {
-    // The patch already landed on disk; keep it rather than revert a committed change.
     showToast(
       `Saved, but couldn't finish updating ${targetPath}: ${getErrorDetail(error)}`,
       "error",
     );
-    return patchedContent;
+    return { content: patchedContent, failed: true };
   }
 }

package/src/hooks/useDomEditPersist.ts

@@ -6,6 +6,7 @@ import type { PersistDomEditOperations } from "./domEditCommitTypes";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import {
   DomEditPersistUnsafeValueError,
+  DomEditPersistPreparedWriteError,
   DomEditPersistUnresolvableError,
   warnDomEditPersistNoOp,
 } from "./domEditPersistFailure";
@@ -14,6 +15,8 @@ import {
   postPatchElement,
   writePreparedContent,
 } from "./useDomEditCommitsHelpers";
+import { importedFontFaceCssFor } from "../utils/studioFontHelpers";
+import { countStudioManualEditSave } from "../components/editor/manualEditsDom";
 import type { CutoverResult } from "../utils/sdkCutover";
 import { reseekPreviewRuntime } from "./timelineTrackVisibility";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
@@ -77,7 +80,8 @@ export function useDomEditPersist({
 
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
       const completePersistence = <T>(result: T, changed: boolean): T => {
-        if (options?.skipRefresh && changed) reseekPreviewRuntime(previewIframeRef.current);
+        if (options?.skipRefresh && changed && !options.deferRender)
+          reseekPreviewRuntime(previewIframeRef.current);
         return result;
       };
 
@@ -94,7 +98,12 @@ export function useDomEditPersist({
       // after it let invalid numeric values bypass the guard whenever the
       // cutover flag was on.
       const patchTarget = buildDomEditPatchTarget(selection);
-      const patchBody = { target: patchTarget, operations };
+      const font = options?.importedFont;
+      const patchBody = {
+        target: patchTarget,
+        operations,
+        ...(font ? { fontFaceCss: importedFontFaceCssFor(font, targetPath) } : {}),
+      };
       const unsafeFields = findUnsafeDomPatchValues(patchBody);
       if (unsafeFields.length > 0) {
         const fields = formatUnsafeFieldList(unsafeFields);
@@ -104,11 +113,9 @@ export function useDomEditPersist({
         });
       }
 
-      // Skip the SDK path when prepareContent is set (e.g. @font-face injection
-      // for a custom font): sdkCutoverPersist serializes only the patched DOM
-      // and would drop the injected content. Let the server path run prepareContent.
-      // The SDK joins the file queue itself and re-reads there; this read is only its fallback.
-      if (onTrySdkPersist && !options?.prepareContent) {
+      // An imported font or prepareContent takes the server patch; the SDK serializes only the patched
+      // DOM. The SDK re-reads in the file queue; this read is its fallback.
+      if (onTrySdkPersist && !font && !options?.prepareContent) {
         const originalContent = await readTarget();
         if (originalContent === null) return;
         const cutover = await onTrySdkPersist(selection, operations, originalContent, targetPath, {
@@ -133,6 +140,7 @@ export function useDomEditPersist({
         coalesceMs: options?.coalesceMs,
       };
       const prepare = options?.prepareContent;
+      let preparedWriteFailed = false;
       // Read, server patch, follow-up write and history hold the file's queue, so no save lands between them.
       const saved = await serializeStudioFileMutations(writeProjectFile, [targetPath], async () => {
         const originalContent = await readTarget();
@@ -142,7 +150,7 @@ export function useDomEditPersist({
 
         const patchedContent =
           typeof patchData.content === "string" ? patchData.content : originalContent;
-        const finalContent = prepare
+        const prepared = prepare
           ? await writePreparedContent(
               targetPath,
               patchedContent,
@@ -150,7 +158,9 @@ export function useDomEditPersist({
               writeProjectFile,
               showToast,
             )
-          : patchedContent;
+          : { content: patchedContent, failed: false };
+        preparedWriteFailed = prepared.failed;
+        const finalContent = prepared.content;
 
         await editHistory.recordEdit({
           ...history,
@@ -188,7 +198,7 @@ export function useDomEditPersist({
       if (!options?.skipRefresh) {
         reloadPreview();
       }
-      return completePersistence(
+      const outcome = completePersistence(
         finalContent === patchedContent &&
           typeof patchData.path === "string" &&
           typeof patchData.version === "string"
@@ -196,6 +206,8 @@ export function useDomEditPersist({
           : undefined,
         true,
       );
+      if (preparedWriteFailed) throw new DomEditPersistPreparedWriteError(targetPath);
+      return outcome;
     },
     [
       activeCompPath,
@@ -214,9 +226,12 @@ export function useDomEditPersist({
     (selection, operations, options) => {
       const expectedProjectId = projectIdRef.current;
       if (!expectedProjectId) return Promise.reject(new Error("No active project"));
-      return queueDomEditSave(() =>
-        performPersistDomEditOperations(selection, operations, options, expectedProjectId),
-      );
+      // Counted, so a preview reload requested before this save settles is not shown over it.
+      const save = () =>
+        queueDomEditSave(() =>
+          performPersistDomEditOperations(selection, operations, options, expectedProjectId),
+        );
+      return selection.element ? countStudioManualEditSave(selection.element, save) : save();
     },
     [performPersistDomEditOperations, projectIdRef, queueDomEditSave],
   );

package/src/hooks/useDomEditPositionPatchCommit.ts

@@ -17,6 +17,7 @@ type PositionPatchOptions = {
   coalesceKey: string;
   coalesceMs?: number;
   skipRefresh?: boolean;
+  deferRender?: boolean;
 };
 
 export function useDomEditPositionPatchCommit({
@@ -31,6 +32,7 @@ export function useDomEditPositionPatchCommit({
         coalesceKey: options.coalesceKey,
         coalesceMs: options.coalesceMs,
         skipRefresh: options.skipRefresh ?? true,
+        deferRender: options.deferRender,
       })
         .then(() => undefined)
         .catch((error) => {

package/src/hooks/useDomEditSession.ts

@@ -170,7 +170,6 @@ export function useDomEditSession({
     refreshDomEditSelectionFromPreview,
   });
   // ── GSAP cache (hoisted so both useGsapScriptCommits and useDomEditWiring share the same instance) ──
-
   const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
 
   const {
@@ -202,6 +201,7 @@ export function useDomEditSession({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,
@@ -288,7 +288,6 @@ export function useDomEditSession({
   });
 
   // ── Element groups (wrap selected elements in a data-hf-group div) ──
-
   const { groupSelection, ungroupSelection } = useGroupCommits({
     activeCompPath,
     showToast,
@@ -363,7 +362,6 @@ export function useDomEditSession({
   }, [domEditSelectionRef, ungroupSelection, setActiveGroupElement, showToast]);
 
   // ── Wiring: selection sync, GSAP cache, preview sync, selection handlers ──
-
   const {
     onClickToSource,
     selectedGsapAnimations,
@@ -496,6 +494,7 @@ export function useDomEditSession({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,

package/src/hooks/useDomEditTextCommits.ts

@@ -1,10 +1,6 @@
 import { useCallback, useRef } from "react";
 import { normalizeDomEditStyleValue } from "../utils/studioHelpers";
-import {
-  injectPreviewGoogleFont,
-  injectPreviewImportedFont,
-  ensureImportedFontFace,
-} from "../utils/studioFontHelpers";
+import { injectPreviewGoogleFont, injectPreviewImportedFont } from "../utils/studioFontHelpers";
 import {
   buildDomEditRichTextPatchOperation,
   findElementForSelection,
@@ -99,6 +95,7 @@ export function useDomEditTextCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
   } = useDomEditAttributeCommits({
     activeCompPath,
     previewIframeRef,
@@ -354,9 +351,7 @@ export function useDomEditTextCommits({
           await persistDomEditOperations(selection, textCommit.operations, {
             label: "Edit text",
             skipRefresh: true,
-            prepareContent: importedFont
-              ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
-              : undefined,
+            importedFont: importedFont ?? undefined,
           });
         },
         shouldRevert: () => isLatestTextCommit(),
@@ -485,6 +480,7 @@ export function useDomEditTextCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,

package/src/hooks/useDomGeometryCommits.ts

@@ -32,7 +32,13 @@ export interface UseDomGeometryCommitsParams {
   commitPositionPatchToHtml: (
     selection: DomEditSelection,
     patches: PatchOperation[],
-    options: { label: string; coalesceKey: string; coalesceMs?: number; skipRefresh?: boolean },
+    options: {
+      label: string;
+      coalesceKey: string;
+      coalesceMs?: number;
+      skipRefresh?: boolean;
+      deferRender?: boolean;
+    },
   ) => Promise<void>;
   readOnlyPreview: boolean;
 }
@@ -65,6 +71,7 @@ export function useDomGeometryCommits({
       next: { width: number; height: number },
       offset?: { x: number; y: number },
       restore?: () => void,
+      undoKey?: string,
     ) => {
       if (readOnlyPreview) return Promise.resolve();
       const element = selection.element;
@@ -80,7 +87,9 @@ export function useDomGeometryCommits({
       if (offset) patches.push(...writePlainMove(element, offset));
       return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
-        coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
+        ...(undoKey
+          ? { coalesceKey: undoKey, coalesceMs: Number.POSITIVE_INFINITY, deferRender: true }
+          : { coalesceKey: `box-size:${getDomEditTargetKey(selection)}` }),
       }).catch((error) => {
         restoreStudioBoxSize(element, beforeSize);
         if (offset) restoreStudioPathOffset(element, beforeOffset);