Preserve Design frame geometry in PNG and PDF exports

templates/design/actions/render-export-png.ts

@@ -8,6 +8,7 @@ import {
   launchChromium,
 } from "../server/lib/playwright-runtime.js";
 import { degradeWideColorsInHtml } from "../shared/export-color-fallback.js";
+import { parseSrcset } from "../shared/srcset.js";
 
 const MAX_RENDER_SIDE = 16_384;
 const MAX_RENDER_PIXELS = 64 * 1024 * 1024;
@@ -221,7 +222,12 @@ function findSnapshotDataUrls(html: string): string[] {
   while (stack.length > 0) {
     const node = stack.pop()!;
     for (const attribute of node.attrs ?? []) {
-      add(attribute.value);
+      if (attribute.name.toLowerCase() === "srcset") {
+        for (const candidate of parseSrcset(attribute.value))
+          add(candidate.url);
+      } else {
+        add(attribute.value);
+      }
     }
     if (node.tagName?.toLowerCase() === "style") {
       add((node.childNodes ?? []).map((child) => child.value ?? "").join(""));

templates/design/app/components/design/bridge/bridge.guard.spec.ts

@@ -595,6 +595,8 @@ describe("source vector stroke overlay reconciliation", () => {
 
 const BRIDGE_SAFE_IMPORTS: Readonly<Record<string, readonly string[]>> = {
   "editor-chrome.bridge.ts": [
+    "../../../../shared/export-image-source",
+    "../../../../shared/srcset",
     "./native-region-export",
     "@agent-native/toolkit/canvas-interactions",
     "@jridgewell/trace-mapping",
@@ -11915,7 +11917,7 @@ it(
             ?.getAttribute("src"),
           imageSrcset: doc
             .querySelector("#responsive-image")
-            ?.hasAttribute("srcset"),
+            ?.getAttribute("srcset"),
           pictureSources: doc.querySelectorAll("picture source").length,
           resourceRequests: (window as any).__resourceRequests,
         };
@@ -11928,15 +11930,146 @@ it(
         "https://export.test/assets/pixel.svg",
       ]);
       expect(snapshot.bodyRules).toContain("letter-spacing: 3px");
-      expect(snapshot.imageSrc).toContain("id='chosen'");
-      expect(snapshot.imageSrcset).toBe(false);
+      expect(snapshot.imageSrc).toBeNull();
+      expect(snapshot.imageSrcset).toContain("id='chosen'");
       expect(snapshot.pictureSources).toBe(0);
     } finally {
       await browser.close();
     }
   },
 );
 
+it(
+  "ordinary image events skip captured sources and refresh changed sources",
+  { timeout: 30_000 },
+  async () => {
+    const browser = await chromium.launch({ headless: true });
+    try {
+      const page = await browser.newPage();
+      await page.setContent(`<!doctype html>
+<html><head><base href="https://export.test/"></head><body><img id="ordinary-image"></body></html>`);
+      const ordinaryImageUrl = "https://export.test/assets/ordinary-image.svg";
+      const updatedImageUrl =
+        "https://export.test/assets/updated-ordinary-image.svg";
+      await page.route(ordinaryImageUrl, async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, 1_200));
+        await route.fulfill({
+          status: 200,
+          contentType: "image/svg+xml",
+          body: '<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"/>',
+        });
+      });
+      await page.route(updatedImageUrl, async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, 1_200));
+        await route.fulfill({
+          status: 200,
+          contentType: "image/svg+xml",
+          body: '<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"/>',
+        });
+      });
+      await page.evaluate(() => {
+        (window as any).__resourceRequests = [];
+        (window as any).__ordinaryImageLoaded = false;
+        window.fetch = (async (input: RequestInfo | URL) => {
+          const source = String(input);
+          (window as any).__resourceRequests.push(source);
+          return new Response(
+            new Blob(
+              [
+                `<svg xmlns="http://www.w3.org/2000/svg"><title>${source}</title></svg>`,
+              ],
+              { type: "image/svg+xml" },
+            ),
+            { status: 200 },
+          );
+        }) as typeof fetch;
+        const image =
+          document.querySelector<HTMLImageElement>("#ordinary-image")!;
+        image.addEventListener(
+          "load",
+          () => ((window as any).__ordinaryImageLoaded = true),
+          { once: true },
+        );
+        image.setAttribute("src", "assets/ordinary-image.svg");
+      });
+      await collectBridgeMessages(page);
+      await page.addScriptTag({
+        content: hydratedEditorChromeBridgeScript(true),
+      });
+      await page.waitForFunction(() =>
+        ((window as any).__bridgeMessages ?? []).some(
+          (message: any) =>
+            message.type === "agent-native:runtime-layer-snapshot",
+        ),
+      );
+
+      const initialRequests = await page.evaluate(
+        () => (window as any).__resourceRequests as string[],
+      );
+      expect(initialRequests).toEqual([ordinaryImageUrl]);
+      await page.waitForFunction(() => (window as any).__ordinaryImageLoaded);
+      await page.waitForTimeout(500);
+
+      const requestsAfterLoad = await page.evaluate(
+        () => (window as any).__resourceRequests as string[],
+      );
+      expect(requestsAfterLoad).toEqual(initialRequests);
+
+      await page.locator("#ordinary-image").evaluate((image, source) => {
+        (image as HTMLImageElement).src = source;
+      }, updatedImageUrl);
+      await page.waitForFunction((source) => {
+        return ((window as any).__bridgeMessages ?? []).some((message: any) => {
+          if (
+            message.type !== "agent-native:runtime-layer-snapshot" ||
+            typeof message.payload?.html !== "string"
+          ) {
+            return false;
+          }
+          const doc = new DOMParser().parseFromString(
+            message.payload.html,
+            "text/html",
+          );
+          const imageSource =
+            doc.querySelector<HTMLImageElement>("#ordinary-image")?.src || "";
+          return (
+            imageSource.startsWith("data:image/svg+xml;base64,") &&
+            atob(imageSource.split(",")[1] || "").includes(source)
+          );
+        });
+      }, updatedImageUrl);
+
+      const finalState = await page.evaluate(() => ({
+        resourceRequests: (window as any).__resourceRequests as string[],
+        ordinaryImageSource: document
+          .querySelector<HTMLImageElement>("#ordinary-image")
+          ?.getAttribute("src"),
+        latestSnapshotSource: (() => {
+          const snapshots = ((window as any).__bridgeMessages ?? []).filter(
+            (message: any) =>
+              message.type === "agent-native:runtime-layer-snapshot",
+          );
+          const html = snapshots.at(-1)?.payload?.html as string | undefined;
+          if (!html) return "";
+          const doc = new DOMParser().parseFromString(html, "text/html");
+          const imageSource =
+            doc.querySelector<HTMLImageElement>("#ordinary-image")?.src || "";
+          return imageSource.startsWith("data:image/svg+xml;base64,")
+            ? atob(imageSource.split(",")[1] || "")
+            : imageSource;
+        })(),
+      }));
+      expect(finalState.resourceRequests).toEqual(
+        expect.arrayContaining([updatedImageUrl]),
+      );
+      expect(finalState.ordinaryImageSource).toBe(updatedImageUrl);
+      expect(finalState.latestSnapshotSource).toContain(updatedImageUrl);
+    } finally {
+      await browser.close();
+    }
+  },
+);
+
 it(
   "runtime export resource inlining fails when its shared deadline aborts fetches",
   { timeout: 30_000 },