@hyperframes/studio 0.8.105 → 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.test.tsx

@@ -9,6 +9,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { TimelineElement } from "../player";
 import type { UseDomEditSessionParams } from "./useDomEditSession";
+import { makeSelection } from "./domSelectionTestHarness";
 
 const styleOp = (property: string, value: string): PatchOperation => ({
   type: "inline-style",
@@ -132,26 +133,30 @@ vi.mock("./useDomEditCommits", () => ({
     };
   },
 }));
+const iframesHandedOn: Array<{ hook: string; iframe: unknown }> = [];
 vi.mock("./useDomSelection", () => ({
-  useDomSelection: () => ({
-    domEditSelection: domEditSelectionRef.current,
-    domEditGroupSelections: [],
-    domEditHoverSelection: null,
-    activeGroupElement: null,
-    domEditSelectionRef,
-    domEditGroupSelectionsRef,
-    setActiveGroupElement: vi.fn(),
-    applyDomSelection: vi.fn(),
-    clearDomSelection: vi.fn(),
-    buildDomSelectionFromTarget: vi.fn(),
-    resolveDomSelectionFromPreviewPoint: vi.fn(),
-    resolveAllDomSelectionsFromPreviewPoint: vi.fn(),
-    updateDomEditHoverSelection: vi.fn(),
-    buildDomSelectionForTimelineElement: vi.fn(),
-    handleTimelineElementSelect: vi.fn(),
-    refreshDomEditSelectionFromPreview: vi.fn(),
-    applyMarqueeSelection: vi.fn(),
-  }),
+  useDomSelection: ({ previewIframe }: { previewIframe: unknown }) => {
+    iframesHandedOn.push({ hook: "selection", iframe: previewIframe });
+    return {
+      domEditSelection: domEditSelectionRef.current,
+      domEditGroupSelections: [],
+      domEditHoverSelection: null,
+      activeGroupElement: null,
+      domEditSelectionRef,
+      domEditGroupSelectionsRef,
+      setActiveGroupElement: vi.fn(),
+      applyDomSelection: vi.fn(),
+      clearDomSelection: vi.fn(),
+      buildDomSelectionFromTarget: vi.fn(),
+      resolveDomSelectionFromPreviewPoint: vi.fn(),
+      resolveAllDomSelectionsFromPreviewPoint: vi.fn(),
+      updateDomEditHoverSelection: vi.fn(),
+      buildDomSelectionForTimelineElement: vi.fn(),
+      handleTimelineElementSelect: vi.fn(),
+      refreshDomEditSelectionFromPreview: vi.fn(),
+      applyMarqueeSelection: vi.fn(),
+    };
+  },
 }));
 vi.mock("./useAskAgentModal", () => ({
   useAskAgentModal: () => ({
@@ -208,33 +213,36 @@ vi.mock("./useGroupCommits", () => ({
   }),
 }));
 vi.mock("./useDomEditWiring", () => ({
-  useDomEditWiring: () => ({
-    onClickToSource: vi.fn(),
-    selectedGsapAnimations: [],
-    gsapMultipleTimelines: false,
-    gsapUnsupportedTimelinePattern: false,
-    trackGsapInteractionFailure: vi.fn(),
-    makeFetchFallback: vi.fn(),
-    handleGsapUpdateProperty: vi.fn(),
-    handleGsapUpdateMeta: vi.fn(),
-    handleGsapDeleteAnimation: vi.fn(),
-    handleGsapDeleteAllForElement: vi.fn(),
-    handleGsapAddAnimation: vi.fn(),
-    handleGsapAddProperty: vi.fn(),
-    handleGsapRemoveProperty: vi.fn(),
-    handleGsapUpdateFromProperty: vi.fn(),
-    handleGsapAddFromProperty: vi.fn(),
-    handleGsapRemoveFromProperty: vi.fn(),
-    handleGsapAddKeyframe: vi.fn(),
-    handleGsapAddKeyframeBatch: vi.fn(),
-    handleGsapRemoveKeyframe: vi.fn(),
-    handleGsapMoveKeyframeToPlayhead: vi.fn(),
-    handleGsapMoveKeyframe: vi.fn(),
-    handleGsapResizeKeyframedTween: vi.fn(),
-    handleGsapConvertToKeyframes: vi.fn(),
-    handleGsapRemoveAllKeyframes: vi.fn(),
-    handleResetSelectedElementKeyframes: vi.fn(),
-  }),
+  useDomEditWiring: ({ previewIframe }: { previewIframe: unknown }) => {
+    iframesHandedOn.push({ hook: "wiring", iframe: previewIframe });
+    return {
+      onClickToSource: vi.fn(),
+      selectedGsapAnimations: [],
+      gsapMultipleTimelines: false,
+      gsapUnsupportedTimelinePattern: false,
+      trackGsapInteractionFailure: vi.fn(),
+      makeFetchFallback: vi.fn(),
+      handleGsapUpdateProperty: vi.fn(),
+      handleGsapUpdateMeta: vi.fn(),
+      handleGsapDeleteAnimation: vi.fn(),
+      handleGsapDeleteAllForElement: vi.fn(),
+      handleGsapAddAnimation: vi.fn(),
+      handleGsapAddProperty: vi.fn(),
+      handleGsapRemoveProperty: vi.fn(),
+      handleGsapUpdateFromProperty: vi.fn(),
+      handleGsapAddFromProperty: vi.fn(),
+      handleGsapRemoveFromProperty: vi.fn(),
+      handleGsapAddKeyframe: vi.fn(),
+      handleGsapAddKeyframeBatch: vi.fn(),
+      handleGsapRemoveKeyframe: vi.fn(),
+      handleGsapMoveKeyframeToPlayhead: vi.fn(),
+      handleGsapMoveKeyframe: vi.fn(),
+      handleGsapResizeKeyframedTween: vi.fn(),
+      handleGsapConvertToKeyframes: vi.fn(),
+      handleGsapRemoveAllKeyframes: vi.fn(),
+      handleResetSelectedElementKeyframes: vi.fn(),
+    };
+  },
 }));
 vi.mock("./usePreviewInteraction", () => ({
   usePreviewInteraction: () => ({
@@ -310,32 +318,9 @@ describe("onReorderShadow source filter", () => {
 describe("bulk segment ease commits", () => {
   it("uses one ordered batch for many ids and sane paths for one or no ids", async () => {
     const { useDomEditSession } = await import("./useDomEditSession");
-    const selection: DomEditSelection = {
-      id: "hero",
-      element: document.createElement("div"),
-      label: "Hero",
-      tagName: "DIV",
-      sourceFile: "index.html",
-      compositionPath: "index.html",
-      isCompositionHost: false,
-      isInsideLockedComposition: false,
-      boundingBox: { x: 0, y: 0, width: 100, height: 100 },
-      textContent: null,
-      dataAttributes: {},
-      inlineStyles: {},
-      computedStyles: {},
-      textFields: [],
-      capabilities: {
-        canSelect: true,
-        canEditStyles: true,
-        canCrop: true,
-        canMove: true,
-        canResize: true,
-        canApplyManualOffset: true,
-        canApplyManualSize: true,
-        canApplyManualRotation: true,
-      },
-    };
+    const hero = document.createElement("div");
+    hero.id = "hero";
+    const selection = makeSelection("Hero", hero);
     domEditSelectionRef.current = selection;
     gsapCommitMutation.mockClear();
     gsapCommitMutation.batch.mockClear();
@@ -601,3 +586,22 @@ describe("handleDomEditElementDelete routing", () => {
     expect(handleDomEditElementsDeleteMock).not.toHaveBeenCalled();
   });
 });
+
+describe("a shadow reload promoted without a host re-render", () => {
+  it("hands the promoted iframe to the session's selection and preview sync", async () => {
+    const { useDomEditSession } = await import("./useDomEditSession");
+    const { announcePreviewPromoted } = await import("../player/sceneSwap");
+    const [host, promoted] = [0, 1].map(() => document.createElement("iframe"));
+    function Probe() {
+      useDomEditSession(createSessionParams({ previewIframe: host! }));
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(<Probe />));
+    act(() => announcePreviewPromoted({ retired: host!, live: promoted! }));
+    const last = (hook: string) => iframesHandedOn.findLast((seen) => seen.hook === hook)?.iframe;
+    expect(last("selection")).toBe(promoted);
+    expect(last("wiring")).toBe(promoted);
+    act(() => root.unmount());
+  });
+});