@replohq/sandbox-runtime 1.7.13 → 1.9.0

package/capturePage.js

@@ -0,0 +1,261 @@
+import { snapdom } from "@zumer/snapdom";
+import { PageCaptureError } from "./_vendor/replo-utils/lib/pageCapture.mjs";
+import { z } from "zod";
+const JPEG_QUALITY = 0.8;
+const VIDEO_FRAME_QUALITY = 0.85;
+const VIDEO_LOAD_TIMEOUT_MS = 4e3;
+const VIDEO_SEEK_TIMEOUT_MS = 1500;
+const PLACEHOLDER_BACKGROUND = "#d9d9d6";
+const IFRAME_PLACEHOLDER_MARKER = "repeating-linear-gradient(45deg";
+const vimeoOembedSchema = z.object({ thumbnail_url: z.string() });
+function parseYouTubeId(src) {
+  const match = src.match(
+    /(?:youtube(?:-nocookie)?\.com\/embed\/|youtu\.be\/)([\w-]{11})/
+  );
+  return match?.[1] ?? null;
+}
+function parseVimeoId(src) {
+  const match = src.match(/player\.vimeo\.com\/video\/(\d+)/);
+  return match?.[1] ?? null;
+}
+function canReadIframeDocument(iframe) {
+  try {
+    return Boolean(iframe.contentDocument ?? iframe.contentWindow?.document);
+  } catch {
+    return false;
+  }
+}
+async function fetchAsDataUrl(url) {
+  const blob = await (await fetch(url)).blob();
+  return await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      resolve(String(reader.result));
+    });
+    reader.addEventListener("error", () => {
+      reject(reader.error ?? new PageCaptureError("image read failed"));
+    });
+    reader.readAsDataURL(blob);
+  });
+}
+function isCanvasReadable(source) {
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    canvas.getContext("2d")?.drawImage(source, 0, 0, 1, 1);
+    canvas.toDataURL();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function videoFrameDataUrl(video) {
+  const canvas = document.createElement("canvas");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  context.drawImage(video, 0, 0);
+  return canvas.toDataURL("image/jpeg", VIDEO_FRAME_QUALITY);
+}
+function isOnScreen({
+  element,
+  height
+}) {
+  const rect = element.getBoundingClientRect();
+  return rect.bottom > 0 && rect.top < height && rect.width > 0;
+}
+async function readVideoFrame({
+  video,
+  height
+}) {
+  if (!isOnScreen({ element: video, height })) {
+    return null;
+  }
+  if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && isCanvasReadable(video)) {
+    return videoFrameDataUrl(video);
+  }
+  const copy = document.createElement("video");
+  copy.crossOrigin = "anonymous";
+  copy.muted = true;
+  copy.preload = "auto";
+  try {
+    copy.src = video.currentSrc || video.src;
+    await new Promise((resolve, reject) => {
+      copy.addEventListener("loadeddata", () => {
+        resolve();
+      });
+      copy.addEventListener("error", () => {
+        reject(new PageCaptureError("video load failed"));
+      });
+      setTimeout(() => {
+        reject(new PageCaptureError("video load timed out"));
+      }, VIDEO_LOAD_TIMEOUT_MS);
+    });
+    if (video.currentTime > 0.1) {
+      copy.currentTime = video.currentTime;
+      await new Promise((resolve) => {
+        copy.addEventListener("seeked", () => {
+          resolve();
+        });
+        setTimeout(resolve, VIDEO_SEEK_TIMEOUT_MS);
+      });
+    }
+    return isCanvasReadable(copy) ? videoFrameDataUrl(copy) : null;
+  } catch {
+    return null;
+  } finally {
+    copy.removeAttribute("src");
+    copy.load();
+  }
+}
+async function readIframeThumbnail(iframe) {
+  const src = iframe.src;
+  let url = null;
+  const youTubeId = parseYouTubeId(src);
+  if (youTubeId) {
+    url = `https://i.ytimg.com/vi/${youTubeId}/hqdefault.jpg`;
+  }
+  const vimeoId = parseVimeoId(src);
+  if (vimeoId) {
+    try {
+      const response = await fetch(
+        `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${vimeoId}&width=1280`
+      );
+      const body = vimeoOembedSchema.safeParse(await response.json());
+      url = body.success ? body.data.thumbnail_url : null;
+    } catch {
+      url = null;
+    }
+  }
+  if (!url) {
+    return null;
+  }
+  return fetchAsDataUrl(url).catch(() => null);
+}
+function createStandInsPlugin({
+  objectFitByFrame,
+  iframeThumbnails
+}) {
+  return {
+    name: "replo-page-capture-stand-ins",
+    afterClone(context) {
+      const clone = context.clone;
+      if (!clone) {
+        return;
+      }
+      for (const image of clone.querySelectorAll("img")) {
+        const objectFit = objectFitByFrame.get(image.getAttribute("src") ?? "");
+        if (objectFit) {
+          image.style.objectFit = objectFit;
+        }
+      }
+      const placeholders = Array.from(
+        clone.querySelectorAll("div")
+      ).filter((element) => {
+        return (element.getAttribute("style") ?? "").includes(
+          IFRAME_PLACEHOLDER_MARKER
+        );
+      });
+      placeholders.forEach((placeholder, index) => {
+        const thumbnail = iframeThumbnails[index];
+        placeholder.style.backgroundImage = thumbnail ? `url("${thumbnail}")` : "none";
+        placeholder.style.backgroundColor = PLACEHOLDER_BACKGROUND;
+        placeholder.style.backgroundSize = "cover";
+        placeholder.style.backgroundPosition = "center";
+      });
+    }
+  };
+}
+function pageBackgroundColor() {
+  for (const element of [document.body, document.documentElement]) {
+    const color = getComputedStyle(element).backgroundColor;
+    if (color && color !== "transparent" && color !== "rgba(0, 0, 0, 0)") {
+      return color;
+    }
+  }
+  return "#fff";
+}
+function canvasToJpeg(canvas) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new PageCaptureError("jpeg encode failed"));
+        }
+      },
+      "image/jpeg",
+      JPEG_QUALITY
+    );
+  });
+}
+async function capturePage({
+  width,
+  height
+}) {
+  const videos = Array.from(document.querySelectorAll("video"));
+  const iframes = Array.from(document.querySelectorAll("iframe")).filter(
+    (iframe) => !canReadIframeDocument(iframe)
+  );
+  const [videoFrames, iframeThumbnails] = await Promise.all([
+    Promise.all(
+      videos.map((video) => {
+        return readVideoFrame({ video, height });
+      })
+    ),
+    Promise.all(iframes.map(readIframeThumbnail))
+  ]);
+  const originalPosters = [];
+  const objectFitByFrame = /* @__PURE__ */ new Map();
+  videos.forEach((video, index) => {
+    const frame = videoFrames[index];
+    if (!frame) {
+      return;
+    }
+    originalPosters.push({ video, poster: video.getAttribute("poster") });
+    video.setAttribute("poster", frame);
+    objectFitByFrame.set(frame, getComputedStyle(video).objectFit);
+  });
+  try {
+    const raw = await snapdom.toRaw(document.body, {
+      scale: 1,
+      embedFonts: true,
+      plugins: [createStandInsPlugin({ objectFitByFrame, iframeThumbnails })]
+    });
+    const image = new Image();
+    image.src = raw;
+    await image.decode();
+    await new Promise((resolve) => {
+      setTimeout(resolve, 100);
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new PageCaptureError("canvas 2d context unavailable");
+    }
+    context.fillStyle = pageBackgroundColor();
+    context.fillRect(0, 0, width, height);
+    context.drawImage(image, 0, 0);
+    return await canvasToJpeg(canvas);
+  } finally {
+    for (const { video, poster } of originalPosters) {
+      if (poster === null) {
+        video.removeAttribute("poster");
+      } else {
+        video.setAttribute("poster", poster);
+      }
+    }
+  }
+}
+export {
+  capturePage,
+  parseVimeoId,
+  parseYouTubeId
+};

package/chunk-LIPH4O4F.mjs

@@ -0,0 +1,67 @@
+import { v4 } from 'uuid';
+
+function bytesToBase64Url(bytes) {
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary).replaceAll("+", "-").replaceAll("/", "_").replaceAll("=", "");
+}
+function base64UrlToBytes(input) {
+  const normalized = input.replaceAll("-", "+").replaceAll("_", "/");
+  const padded = normalized.padEnd(
+    normalized.length + (4 - normalized.length % 4) % 4,
+    "="
+  );
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+function randomBase64Url(byteLength) {
+  return bytesToBase64Url(crypto.getRandomValues(new Uint8Array(byteLength)));
+}
+function randomUUID() {
+  return v4();
+}
+async function sha256Hex(input) {
+  const buffer = typeof input === "string" ? new TextEncoder().encode(input) : input;
+  const hash = await crypto.subtle.digest("SHA-256", buffer);
+  return [...new Uint8Array(hash)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+function constantTimeEqual({
+  left,
+  right
+}) {
+  if (left.length !== right.length) {
+    return false;
+  }
+  let difference = 0;
+  for (let index = 0; index < left.length; index += 1) {
+    difference |= (left[index] ?? 0) ^ (right[index] ?? 0);
+  }
+  return difference === 0;
+}
+async function getHmacSha256Hex({
+  rawBody,
+  signingKey
+}) {
+  const encoder = new TextEncoder();
+  const key = await crypto.subtle.importKey(
+    "raw",
+    encoder.encode(signingKey),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"]
+  );
+  const signature = await crypto.subtle.sign(
+    "HMAC",
+    key,
+    encoder.encode(rawBody)
+  );
+  return [...new Uint8Array(signature)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+export { base64UrlToBytes, bytesToBase64Url, constantTimeEqual, getHmacSha256Hex, randomBase64Url, randomUUID, sha256Hex };

package/{chunk-4T7WSMC3.mjs → chunk-XWNBKE63.mjs}

@@ -100,6 +100,25 @@ function getIframeOffset(iframe) {
   const iframeRect = iframe.getBoundingClientRect();
   return { left: iframeRect.left, top: iframeRect.top };
 }
+var selectModeImageScopeSchema = z.discriminatedUnion("kind", [
+  z.object({ kind: z.literal("all") }),
+  z.object({ kind: z.literal("media"), media: z.string() })
+]).describe("SelectModeImageScope");
+var selectModeImageSourceSchema = z.object({
+  srcSet: z.string(),
+  sizes: z.string(),
+  media: z.string(),
+  type: z.string(),
+  previewUrl: z.string().nullable()
+}).describe("SelectModeImageSource");
+var selectModeImageSchema = z.object({
+  src: z.string(),
+  currentSrc: z.string(),
+  srcSet: z.string(),
+  sizes: z.string(),
+  previewUrl: z.string().nullable(),
+  sources: z.array(selectModeImageSourceSchema)
+}).describe("SelectModeImage");
 var selectedElementSchema = z.object({
   kind: z.literal("react-element"),
   selector: z.string(),
@@ -109,6 +128,7 @@ var selectedElementSchema = z.object({
   rect: selectModeBoundingRectSchema,
   textMetrics: selectModeTextMetricsSchema.nullable(),
   outerHTML: z.string(),
+  image: selectModeImageSchema.optional(),
   definedStyles: z.array(selectModeDefinedStyleSchema).default([]),
   inheritedStyles: z.record(z.string(), z.string()).default({}),
   clickPosition: selectModeClickPositionSchema,
@@ -166,6 +186,10 @@ function readSelectablePayload(rawPayload) {
   return parseSchemaOrNull(parsedPayload, selectableDataPayloadSchema);
 }
 var selectModeOptimisticUpdatePayloadSchema = z.discriminatedUnion("kind", [
+  z.object({
+    kind: z.literal("image"),
+    image: selectModeImageSchema
+  }),
   z.object({
     kind: z.literal("css"),
     fontSource: z.enum(["google", "site"]).optional(),
@@ -208,4 +232,4 @@ var selectModeSelectionSchema = z.discriminatedUnion("type", [
   })
 ]).describe("SelectModeSelection");
 
-export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement };
+export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.7.13",
+  "version": "1.9.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.7.13",
+    "version": "1.9.0",
     "branch": "HEAD",
-    "commit": "48e7e55752c4448369b7a49ce608c6539acb3a24",
-    "builtAt": "2026-09-23T03:50:04.538Z"
+    "commit": "455eef2903f4cc6a8f457d5ec77be1e1dc95aad9",
+    "builtAt": "2026-09-25T00:24:57.880Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",
@@ -40,6 +40,7 @@
     "@tiptap/extension-text": "^2.25.0",
     "@tiptap/extension-underline": "^2.25.0",
     "@tiptap/pm": "^2.25.0",
+    "@zumer/snapdom": "^3.0.0",
     "uuid": "^11.1.0",
     "zod": "^4.3.6",
     "zustand": "^4.5.7"

package/sandbox-runtime.js

@@ -8,6 +8,7 @@ import { DocumentReadyBeacon } from "./DocumentReadyBeacon";
 import LinkInterceptor from "./LinkInterceptor";
 import { NavigationReceiver } from "./NavigationReceiver";
 import { NextErrorReporter } from "./NextErrorReporter";
+import { PageCaptureResponder } from "./PageCaptureResponder";
 import PostHogRelay from "./posthog-relay";
 import { EditorSelection } from "./select-mode/EditorSelection";
 function ViewportSnapshotResponder() {
@@ -24,6 +25,7 @@ function SandboxRuntime({ children }) {
       /* @__PURE__ */ jsx(NavigationReceiver, {}),
       /* @__PURE__ */ jsx(PostHogRelay, {}),
       /* @__PURE__ */ jsx(ViewportSnapshotResponder, {}),
+      /* @__PURE__ */ jsx(PageCaptureResponder, {}),
       /* @__PURE__ */ jsx(EditorSelection, {}),
       /* @__PURE__ */ jsx(AnnotationLayerMount, {}),
       /* @__PURE__ */ jsx(DesignLibraryPreview, {}),

package/select-mode/descriptor/elementDescriptor.js

@@ -4,6 +4,7 @@ import {
   SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE
 } from "../../_vendor/schemas/selectMode.mjs";
 import { getFiberChain } from "../fiber";
+import { getImageDescriptor } from "../imageSources";
 import { skipInlineTextMarkElements } from "../inlineTextMarks";
 import { getElementBoundingRect } from "../interactions/selectionGeometry";
 import { getDefinedStyles, getInheritedStyles } from "./styleExtraction";
@@ -185,6 +186,7 @@ function buildElementDescriptor({
     rect: getElementBoundingRect(element),
     textMetrics,
     outerHTML: element.outerHTML.slice(0, 4e3),
+    image: getImageDescriptor(element),
     definedStyles: getDefinedStyles(element),
     inheritedStyles: getInheritedStyles(element),
     clickPosition,

package/select-mode/hooks/useOptimisticOverrides.js

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { buildGoogleFontsCssUrl, quoteFontFamily } from "../../_vendor/replo-utils/lib/fonts.mjs";
 import { buildSelector } from "../descriptor/elementDescriptor";
+import { createImagePreview } from "../imageOverridePreview";
 import {
   SELECT_MODE_OVERRIDE_ATTRIBUTE,
   SELECT_MODE_OVERRIDE_STYLE_ATTRIBUTE
@@ -10,6 +11,7 @@ const OVERRIDE_REGISTRATION_TIMEOUT_MS = 15e3;
 const SESSION_OUTCOME_RETENTION_MS = 6e4;
 const OVERRIDE_REGISTRY_KEY = "reploSelectOverrideRegistryV2";
 const SESSION_OUTCOME_REGISTRY_KEY = "reploSelectOverrideSessionOutcomesV2";
+const imagePreviews = /* @__PURE__ */ new Map();
 function getOverrideList() {
   const existing = Reflect.get(window, OVERRIDE_REGISTRY_KEY);
   if (Array.isArray(existing)) {
@@ -45,18 +47,12 @@ function getElementsForTargetMode({
     })
   ];
 }
-function isImageSourcePayload({
-  element,
-  payload
-}) {
-  return payload.kind === "attribute" && payload.name.toLowerCase() === "src" && element instanceof HTMLImageElement;
-}
 function getOriginalState({
   element,
   payload
 }) {
   if (payload.kind === "attribute") {
-    const names = isImageSourcePayload({ element, payload }) ? [payload.name, "srcset"] : [payload.name];
+    const names = [payload.name];
     return {
       kind: "attributes",
       values: names.map((name) => ({
@@ -95,14 +91,12 @@ function applyPayload({
   payload,
   token
 }) {
+  if (payload.kind === "image") return;
   if (payload.kind === "css") {
     addToken(element, token);
     return;
   }
   if (payload.kind === "attribute") {
-    if (isImageSourcePayload({ element, payload })) {
-      element.removeAttribute("srcset");
-    }
     element.setAttribute(payload.name, payload.value);
     return;
   }
@@ -207,6 +201,7 @@ function reapplyOverride({
   override,
   skipElement
 }) {
+  if (override.payload.kind === "image") return;
   for (const target of override.targets) {
     const element = resolveTarget(target);
     if (!element || skipElement && element.contains(skipElement)) {
@@ -222,6 +217,51 @@ function reapplyOverride({
     applyPayload({ element, payload: override.payload, token: override.token });
   }
 }
+function syncImagePreviews() {
+  const configurations = /* @__PURE__ */ new Map();
+  for (const override of getOverrideList()) {
+    if (override.payload.kind !== "image") continue;
+    for (const target of override.targets) {
+      const element = resolveTarget(target);
+      if (!(element instanceof HTMLImageElement)) continue;
+      const previous = configurations.get(element);
+      configurations.set(element, {
+        image: override.payload.image,
+        pending: !override.settled || Boolean(previous?.pending)
+      });
+    }
+  }
+  for (const [element, preview] of imagePreviews) {
+    if (configurations.has(element)) continue;
+    preview.dispose();
+    imagePreviews.delete(element);
+  }
+  const acknowledged = /* @__PURE__ */ new Set();
+  for (const [element, configuration] of configurations) {
+    let preview = imagePreviews.get(element);
+    if (!preview) {
+      preview = createImagePreview(element);
+      imagePreviews.set(element, preview);
+    }
+    if (!configuration.pending && preview.isPersisted(configuration.image)) {
+      preview.dispose();
+      imagePreviews.delete(element);
+      acknowledged.add(element);
+    } else {
+      preview.render(configuration.image);
+    }
+  }
+  setOverrideList(
+    getOverrideList().filter((entry) => {
+      if (entry.payload.kind !== "image") return true;
+      entry.targets = entry.targets.filter((target) => {
+        const element = resolveTarget(target);
+        return !element || !acknowledged.has(element);
+      });
+      return entry.targets.length > 0;
+    })
+  );
+}
 function removeOverride({
   editId,
   outcome
@@ -233,6 +273,16 @@ function removeOverride({
     return;
   }
   clearTimeout(override.registrationTimeout);
+  if (override.payload.kind === "image") {
+    override.settled = true;
+    setOverrideList(
+      getOverrideList().filter(
+        (entry) => entry !== override || outcome === "persisted"
+      )
+    );
+    syncImagePreviews();
+    return;
+  }
   getStyleElement(override.token)?.remove();
   for (const target of override.targets) {
     const element = resolveTarget(target);
@@ -279,6 +329,7 @@ function useOptimisticOverrides() {
       });
       const token = `override-${editId}`;
       const override = {
+        settled: false,
         editId,
         injectedFontFamily: null,
         payload,
@@ -296,6 +347,7 @@ function useOptimisticOverrides() {
       getOverrideList().push(override);
       installCssRule(override);
       reapplyOverride({ override, skipElement: null });
+      syncImagePreviews();
     },
     []
   );
@@ -304,6 +356,7 @@ function useOptimisticOverrides() {
       for (const override of getOverrideList()) {
         reapplyOverride({ override, skipElement });
       }
+      syncImagePreviews();
     },
     []
   );

package/select-mode/hooks/useSelectionInteractions.js

@@ -402,16 +402,7 @@ function useSelectionInteractions() {
       const scrollOffset = snapshot.type === "drag" ? snapshot.scrollOffset : getDocumentScrollOffset();
       const candidates = store().dragCandidates;
       resetDragState({ notifyParentDragCleared: false });
-      if (!dragStart || snapshot.type !== "drag") {
-        const targetElement = event.target;
-        if (!(targetElement instanceof Element)) {
-          return;
-        }
-        commitClickSelection({
-          targetElement,
-          pointerEvent: event,
-          candidates
-        });
+      if (snapshot.type !== "drag" || !dragStart) {
         return;
       }
       const resolvedDragCurrent = dragCurrent ?? dragStart;

package/select-mode/iframeRpcChannel.d.ts

@@ -32,6 +32,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     lineHeight: import("zod").ZodNumber;
                 }, import("zod/v4/core").$strip>>;
                 outerHTML: import("zod").ZodString;
+                image: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                    srcSet: import("zod").ZodString;
+                    sizes: import("zod").ZodString;
+                    previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    sources: import("zod").ZodArray<import("zod").ZodObject<{
+                        srcSet: import("zod").ZodString;
+                        sizes: import("zod").ZodString;
+                        media: import("zod").ZodString;
+                        type: import("zod").ZodString;
+                        previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{
@@ -109,6 +123,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     lineHeight: import("zod").ZodNumber;
                 }, import("zod/v4/core").$strip>>;
                 outerHTML: import("zod").ZodString;
+                image: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                    srcSet: import("zod").ZodString;
+                    sizes: import("zod").ZodString;
+                    previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    sources: import("zod").ZodArray<import("zod").ZodObject<{
+                        srcSet: import("zod").ZodString;
+                        sizes: import("zod").ZodString;
+                        media: import("zod").ZodString;
+                        type: import("zod").ZodString;
+                        previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{
@@ -274,6 +302,20 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     lineHeight: import("zod").ZodNumber;
                 }, import("zod/v4/core").$strip>>;
                 outerHTML: import("zod").ZodString;
+                image: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                    srcSet: import("zod").ZodString;
+                    sizes: import("zod").ZodString;
+                    previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    sources: import("zod").ZodArray<import("zod").ZodObject<{
+                        srcSet: import("zod").ZodString;
+                        sizes: import("zod").ZodString;
+                        media: import("zod").ZodString;
+                        type: import("zod").ZodString;
+                        previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{

package/select-mode/imageOverridePreview.d.ts

@@ -0,0 +1,6 @@
+import type { SelectModeImage } from "../_vendor/schemas/generated/selectMode";
+export declare function createImagePreview(image: HTMLImageElement): {
+    render(config: SelectModeImage): void;
+    isPersisted(config: SelectModeImage): boolean;
+    dispose(): void;
+};