@agent-native/core 0.119.0 → 0.119.2

package/corpus/templates/design/app/components/design/DesignImportPanel.tsx

@@ -27,6 +27,7 @@ import {
 } from "@/lib/design-file-upload";
 import {
   importResultNotification,
+  isFigmaRateLimitImportError,
   looksLikeStandaloneHtml,
   VISUAL_EDIT_CONNECT_COMMAND,
   VISUAL_EDIT_INSTALL_COMMAND,
@@ -42,6 +43,7 @@ import type { DesignExtensionSlotContext } from "./DesignExtensionsPanel";
 
 interface DesignImportPanelProps {
   context: Pick<DesignExtensionSlotContext, "designId" | "viewMode">;
+  onImport?: (result: ImportResult) => void;
 }
 
 type ImportMode =
@@ -51,7 +53,11 @@ type ImportMode =
   | "html"
   | "local-app";
 
-export function DesignImportPanel({ context }: DesignImportPanelProps) {
+export function DesignImportPanel(p: DesignImportPanelProps) {
+  const context = p.context;
+  const onImport = p.onImport;
+  const onImportRef = useRef(onImport);
+  onImportRef.current = onImport;
   const t = useT();
   const { formatNumber } = useFormatters();
   const navigate = useNavigate();
@@ -77,6 +83,8 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
   const [htmlText, setHtmlText] = useState("");
   const [activeMode, setActiveMode] = useState<ImportMode | null>(null);
   const [lastResult, setLastResult] = useState<ImportResult | null>(null);
+  const [figmaRateLimitError, setFigmaRateLimitError] =
+    useState<ImportResult | null>(null);
   const [figUploadName, setFigUploadName] = useState<string | null>(null);
   const [figUploadProgress, setFigUploadProgress] = useState<number | null>(
     null,
@@ -91,6 +99,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
         queryClient.invalidateQueries({ queryKey: ["action", "get-design"] }),
         queryClient.invalidateQueries({ queryKey: ["action"] }),
       ]);
+      if (result) onImportRef.current?.(result);
       const fidelityWarnings: string[] = [];
       const imageFallbackCount = result?.fidelityReport?.imageFallbacks.length;
       if (imageFallbackCount) {
@@ -190,6 +199,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
     figmaConnectionChecked && !figmaConnected && !figmaConnectionError;
 
   const handleFigmaUrlImport = useCallback(async () => {
+    setFigmaRateLimitError(null);
     const normalizedUrl = figmaUrl.trim();
     if (!normalizedUrl) {
       toast.error(t("designEditor.import.errors.figmaUrlRequired"));
@@ -218,9 +228,41 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
         asNewScreen: true,
       })) as ImportResult;
       await finishImport(result, t("designEditor.import.figmaUrlSuccess"));
+      setFigmaRateLimitError(null);
     } catch (error) {
       // A rejected credential should not linger in component state or the DOM.
       setFigmaAccessToken("");
+      const rateLimitDetails = error as Error & {
+        rateLimitRetryAfter?: number;
+        rateLimitPlanTier?: string;
+        figmaPlanTier?: string;
+        rateLimitType?: string;
+        figmaRateLimitType?: string;
+        rateLimitUpgradeUrl?: string;
+        figmaUpgradeUrl?: string;
+      };
+      const rateLimitResult: ImportResult = {
+        error:
+          typeof rateLimitDetails.message === "string"
+            ? rateLimitDetails.message
+            : t("common.genericError"),
+        rateLimitRetryAfter: rateLimitDetails.rateLimitRetryAfter,
+        rateLimitPlanTier:
+          rateLimitDetails.rateLimitPlanTier ?? rateLimitDetails.figmaPlanTier,
+        rateLimitType:
+          rateLimitDetails.rateLimitType ?? rateLimitDetails.figmaRateLimitType,
+        rateLimitUpgradeUrl:
+          rateLimitDetails.rateLimitUpgradeUrl ??
+          rateLimitDetails.figmaUpgradeUrl,
+      };
+      const isRateLimitError =
+        (error instanceof Error &&
+          /rate limit|429|quota/i.test(error.message)) ||
+        isFigmaRateLimitImportError(rateLimitResult);
+      if (isRateLimitError) {
+        setFigmaRateLimitError(rateLimitResult);
+        setActiveMode("fig-upload");
+      }
       toast.error(t("designEditor.import.errors.figmaImportFailed"), {
         description:
           error instanceof Error ? error.message : t("common.genericError"),
@@ -282,6 +324,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
           onProgress: ({ percent }) => setFigUploadProgress(percent),
         });
         await finishImport(result, t("designEditor.import.uploadSuccess"));
+        setFigmaRateLimitError(null);
       } catch (error) {
         toast.error(t("designEditor.import.errors.uploadFailed"), {
           description:
@@ -325,6 +368,64 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
 
       <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 pb-4 pt-3">
         <div className="space-y-0.5">
+          {figmaRateLimitError ? (
+            <div className="space-y-2 rounded-md border border-destructive/30 bg-destructive/5 p-2.5 text-[11px] leading-snug">
+              <p className="font-medium text-destructive">
+                {t("designEditor.import.rateLimitTitle")}
+              </p>
+              <p className="text-muted-foreground">
+                {figmaRateLimitError.rateLimitType === "low"
+                  ? t("designEditor.import.rateLimitLowSeat")
+                  : t("designEditor.import.rateLimitGeneric")}
+              </p>
+              {figmaRateLimitError.rateLimitRetryAfter ? (
+                <p className="text-muted-foreground">
+                  {t("designEditor.import.rateLimitRetryIn", {
+                    time:
+                      figmaRateLimitError.rateLimitRetryAfter >= 60
+                        ? `${Math.ceil(figmaRateLimitError.rateLimitRetryAfter / 60)} min`
+                        : `${figmaRateLimitError.rateLimitRetryAfter}s`,
+                  })}
+                </p>
+              ) : null}
+              <div className="flex flex-col gap-1.5">
+                <p className="text-[10px] font-medium text-muted-foreground">
+                  {t("designEditor.import.rateLimitAlternatives")}
+                </p>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-7 w-full px-2 text-[11px]"
+                  onClick={() => {
+                    setFigmaRateLimitError(null);
+                    setActiveMode("figma-paste");
+                  }}
+                >
+                  {t("designEditor.import.rateLimitUsePaste")}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-7 w-full px-2 text-[11px]"
+                  onClick={() => {
+                    setActiveMode("fig-upload");
+                  }}
+                >
+                  {t("designEditor.import.rateLimitUseFig")}
+                </Button>
+              </div>
+              {figmaRateLimitError.rateLimitUpgradeUrl ? (
+                <a
+                  href={figmaRateLimitError.rateLimitUpgradeUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="block text-[10px] text-foreground underline-offset-2 hover:underline"
+                >
+                  {t("designEditor.import.rateLimitUpgrade")}
+                </a>
+              ) : null}
+            </div>
+          ) : null}
           <ImportSourceRow
             id="figma-url-import"
             icon={<IconBrandFigma className="size-3.5" />}
@@ -437,9 +538,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
             id="figma-paste-import"
             icon={<IconBrandFigma className="size-3.5" />}
             title={t("designEditor.import.figmaPasteTitle")}
-            description={
-              "Copy a frame in Figma, then paste into the canvas." /* i18n-ignore */
-            }
+            description={t("designEditor.import.figmaPasteDescription")}
             isOpen={activeMode === "figma-paste"}
             onToggle={() =>
               setActiveMode((mode) =>
@@ -448,12 +547,8 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
             }
           >
             <div className="space-y-1.5 p-2 text-[11px] leading-snug text-muted-foreground">
-              <p>{t("designEditor.import.figmaPasteDescription")}</p>
-              <p>
-                {
-                  "Click the canvas first, then paste with the same shortcut you use for copied Design content." /* i18n-ignore */
-                }
-              </p>
+              <p>{t("designEditor.import.figmaPasteBodyUnlimited")}</p>
+              <p>{t("designEditor.import.figmaPasteBodyImages")}</p>
             </div>
           </ImportSourceRow>
 
@@ -461,7 +556,7 @@ export function DesignImportPanel({ context }: DesignImportPanelProps) {
             id="fig-file-import"
             icon={<IconUpload className="size-3.5" />}
             title={t("designEditor.import.figUploadTitle")}
-            description={t("designEditor.import.figUploadDescription")}
+            description={t("designEditor.import.figUploadDescriptionShort")}
             isOpen={activeMode === "fig-upload"}
             onToggle={() =>
               setActiveMode((mode) =>

package/corpus/templates/design/app/components/design/FigmaHydrationDialog.tsx

@@ -0,0 +1,273 @@
+/**
+ * FigmaHydrationDialog — shown after a no-token local-kiwi clipboard import
+ * when IMAGE fills couldn't be resolved. Collects a Figma access token, saves
+ * it, then calls `hydrate-figma-paste-images` for each imported file to
+ * replace the `url("about:blank")` placeholders with real durable images.
+ */
+
+import { callAction } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  hydrateImagesFromFig,
+  validateFigUploadFile,
+} from "@/lib/design-file-upload";
+import {
+  getFigmaConnectionStatus,
+  saveFigmaAccessToken,
+} from "@/lib/figma-connection";
+
+interface FigmaHydrationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  designId: string;
+  fileIds: string[];
+  imageCount: number;
+  onHydrated: () => void;
+}
+
+export function FigmaHydrationDialog({
+  open,
+  onOpenChange,
+  designId,
+  fileIds,
+  imageCount,
+  onHydrated,
+}: FigmaHydrationDialogProps) {
+  const t = useT();
+  const [token, setToken] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [docsUrl, setDocsUrl] = useState<string | null>(null);
+  const figInputRef = useRef<HTMLInputElement>(null);
+
+  const screensPlural = fileIds.length === 1 ? "" : "s";
+  const imagePlural = imageCount === 1 ? "" : "s";
+
+  useEffect(() => {
+    if (!open) return;
+    getFigmaConnectionStatus()
+      .then((status) => {
+        if (status.docsUrl) setDocsUrl(status.docsUrl);
+      })
+      .catch(() => {});
+  }, [open]);
+
+  async function handleFigSelected(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    if (validateFigUploadFile(file)) {
+      setError(t("designEditor.import.figmaHydrationInvalidFig"));
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await hydrateImagesFromFig({
+        designId,
+        file,
+        fileIds,
+        fallbackErrorMessage: t("designEditor.import.figmaHydrationFigError"),
+      });
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+      const totalResolved = result.totalResolved ?? 0;
+      onOpenChange(false);
+      setToken("");
+      onHydrated();
+      toast.success(t("designEditor.import.figmaHydrationSuccess"), {
+        description: t(
+          "designEditor.import.figmaHydrationFigSuccessDescription",
+          { count: totalResolved, plural: totalResolved === 1 ? "" : "s" },
+        ),
+      });
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : t("designEditor.import.figmaHydrationFigError"),
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!token.trim()) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const status = await saveFigmaAccessToken(token.trim());
+      if (status.docsUrl) setDocsUrl(status.docsUrl);
+
+      let totalResolved = 0;
+      for (const fileId of fileIds) {
+        const result = await callAction<{
+          resolved?: number;
+          missing?: number;
+        }>("hydrate-figma-paste-images", { fileId });
+        totalResolved += result?.resolved ?? 0;
+      }
+
+      onOpenChange(false);
+      setToken("");
+      onHydrated();
+      toast.success(t("designEditor.import.figmaHydrationSuccess"), {
+        description: t("designEditor.import.figmaHydrationSuccessDescription", {
+          count: totalResolved,
+          plural: totalResolved === 1 ? "" : "s",
+        }),
+      });
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : t("common.genericError");
+      const is403 =
+        message.includes("403") || message.toLowerCase().includes("forbidden");
+      const isServerError = /internal server error/i.test(message);
+      setError(
+        is403
+          ? 'Token rejected (403). In Figma\'s token settings, enable the "File content" and "Current user" scopes, then generate a new token.'
+          : isServerError
+            ? "Server error — Figma's API may be rate-limited. Wait ~1 minute then try again; repeated retries extend the cooldown."
+            : message,
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <form
+          onSubmit={(e) => {
+            void handleSubmit(e);
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>
+              {t("designEditor.import.figmaHydrationDialogTitle")}
+            </DialogTitle>
+            <DialogDescription>
+              {t("designEditor.import.figmaHydrationDialogDescription", {
+                count: imageCount,
+                plural: imagePlural,
+                screensPlural,
+              })}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="mt-4 rounded-md border border-border bg-muted/30 p-3">
+            <div className="flex items-center gap-2">
+              <p className="text-xs font-medium text-foreground">
+                {t("designEditor.import.figmaHydrationFigTitle")}
+              </p>
+              <span className="rounded-full bg-primary/10 px-1.5 py-px text-[9px] font-semibold uppercase tracking-wide text-primary">
+                {t("designEditor.import.figmaHydrationRecommended")}
+              </span>
+            </div>
+            <p className="mt-1 text-[10px] leading-snug text-muted-foreground">
+              {t("designEditor.import.figmaHydrationFigOption")}
+            </p>
+            <input
+              ref={figInputRef}
+              type="file"
+              accept=".fig"
+              className="hidden"
+              onChange={(e) => void handleFigSelected(e)}
+            />
+            <Button
+              type="button"
+              size="sm"
+              variant="secondary"
+              className="mt-2 w-full"
+              disabled={busy}
+              onClick={() => figInputRef.current?.click()}
+            >
+              {t("designEditor.import.figmaHydrationChooseFig")}
+            </Button>
+          </div>
+
+          <div className="mt-3 text-center text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+            {t("designEditor.import.figmaHydrationOrToken")}
+          </div>
+
+          <div className="mt-2 space-y-2">
+            <div className="flex items-center justify-between gap-2">
+              <Label htmlFor="figma-hydration-token" className="text-xs">
+                {t("designEditor.import.figmaTokenLabel")}
+              </Label>
+              {docsUrl ? (
+                <a
+                  href={docsUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="shrink-0 text-[10px] font-medium text-foreground underline-offset-2 hover:underline"
+                >
+                  {t("designEditor.import.figmaTokenDocs")}
+                </a>
+              ) : null}
+            </div>
+            <Input
+              id="figma-hydration-token"
+              type="password"
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              placeholder={t("designEditor.import.figmaTokenPlaceholder")}
+              autoComplete="new-password"
+              aria-invalid={error ? true : undefined}
+              className="h-8 text-xs"
+              disabled={busy}
+            />
+            {error ? (
+              <p className="rounded-md border border-destructive/30 bg-destructive/5 px-2 py-1.5 text-[10px] leading-snug text-destructive">
+                {error}
+              </p>
+            ) : (
+              <div className="space-y-1">
+                <p className="text-[10px] leading-snug text-muted-foreground">
+                  {t("designEditor.import.figmaHydrationTokenDescription")}
+                </p>
+                <p className="text-[10px] leading-snug text-muted-foreground/70">
+                  {t("designEditor.import.figmaHydrationRateLimit")}
+                </p>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter className="mt-4">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+              disabled={busy}
+            >
+              {t("home.cancel")}
+            </Button>
+            <Button type="submit" size="sm" disabled={busy || !token.trim()}>
+              {t("designEditor.import.figmaHydrationConnectAndLoad")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -455,6 +455,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   onBoardElementDblClickText,
   onBoardIframeHotkey,
   onBoardFigmaClipboardPaste,
+  onBoardImagePaste,
   onBoardIframeContextMenu,
   onBoardTextEditingStateChange,
   boardClearSelectionRequest,
@@ -7670,6 +7671,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                   onClearSelection={onBoardElementClear}
                   onIframeHotkey={onBoardIframeHotkey}
                   onFigmaClipboardPaste={onBoardFigmaClipboardPaste}
+                  onImagePaste={onBoardImagePaste}
                   onIframeContextMenu={onBoardIframeContextMenu}
                   onVisualStructureChange={onBoardVisualStructureChange}
                   onVisualStyleChange={onBoardVisualStyleChange}
@@ -9170,14 +9172,12 @@ const Screen = memo(function Screen({
   // Memoize the srcdoc with the hit-test responder injected so we don't
   // rebuild the string every render (that would reload the iframe).
   // Keyed only on screen.content; the hit-test script itself is constant.
-  const srcdocWithHitTest = useMemo(
-    () =>
-      injectSessionReplayIframeBootstrap(
-        appendHitTestResponder(screen.content),
-      ),
+  const srcdocWithHitTest = useMemo(() => {
+    return injectSessionReplayIframeBootstrap(
+      appendHitTestResponder(screen.content),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [screen.content],
-  );
+  }, [screen.content]);
 
   const updateDirectHover = useCallback((next: boolean) => {
     setDirectlyHovered((current) => (current === next ? current : next));

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -10447,15 +10447,63 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       }
       var content = getFigmaClipboardContent(e.clipboardData);
       clearPendingPlainPasteHotkey();
-      if (!content) return;
-      stopNativeInteraction(e);
-      (window.parent as Window).postMessage(
-        {
-          type: "figma-clipboard-paste",
-          content: content,
-        },
-        "*",
-      );
+      if (content) {
+        stopNativeInteraction(e);
+        (window.parent as Window).postMessage(
+          { type: "figma-clipboard-paste", content: content },
+          "*",
+        );
+        return;
+      }
+      // Relay image files pasted while the canvas has focus (e.g. "Copy as PNG"
+      // from Figma, or a screenshot). The parent's handleEditorPaste cannot see
+      // these because paste events inside an iframe don't bubble to the parent
+      // document — the bridge reads each file as a data URL and relays it so
+      // the parent's handlePastedImageFiles can insert an <img> layer.
+      var imageFiles = Array.from(e.clipboardData?.items ?? [])
+        .filter(function (item) {
+          return item.kind === "file" && item.type.startsWith("image/");
+        })
+        .map(function (item) {
+          return item.getAsFile();
+        })
+        .filter(function (f): f is File {
+          return Boolean(f);
+        });
+      if (imageFiles.length > 0) {
+        stopNativeInteraction(e);
+        var readPromises = imageFiles.map(function (file) {
+          return new Promise<{
+            dataUrl: string;
+            type: string;
+            name: string;
+          } | null>(function (resolve) {
+            var reader = new FileReader();
+            reader.onload = function () {
+              resolve({
+                dataUrl: typeof reader.result === "string" ? reader.result : "",
+                type: file.type,
+                name: file.name,
+              });
+            };
+            reader.onerror = function () {
+              resolve(null);
+            };
+            reader.readAsDataURL(file);
+          });
+        });
+        void Promise.all(readPromises).then(function (results) {
+          var valid = results.filter(function (r) {
+            return r && r.dataUrl;
+          });
+          if (valid.length > 0) {
+            (window.parent as Window).postMessage(
+              { type: "canvas-image-paste", files: valid },
+              "*",
+            );
+          }
+        });
+      }
     },
     true,
   );

package/corpus/templates/design/app/components/design/design-canvas/iframe-events.ts

@@ -14,6 +14,16 @@ export interface IframeFigmaClipboardPastePayload {
   content: string;
 }
 
+export interface IframeImagePasteFile {
+  dataUrl: string;
+  type: string;
+  name: string;
+}
+
+export interface IframeImagePastePayload {
+  files: IframeImagePasteFile[];
+}
+
 export interface IframeContextMenuPayload {
   screenId?: string;
   clientX: number;

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -279,7 +279,14 @@ function stripExecutableStaticPreviewContent(html: string) {
     .replace(/<(?:iframe|object|embed|audio|video|source)\b[^>]*\/?\s*>/gi, "")
     .replace(/<(?:link|meta|base)\b[^>]*>/gi, "")
     .replace(/@import\s+(?:url\([^)]*\)|["'][^"']*["'])\s*[^;]*;/gi, "")
-    .replace(/url\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "none")
+    .replace(/url\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, (match) => {
+      // Strip data:, blob:, and unknown-scheme url() references to prevent
+      // large embedded payloads or local-resource leaks. Allow https:// URLs
+      // (CDN images/fonts) — they can only fetch inert assets, not execute code.
+      const raw = match.slice(4, -1).trim();
+      const inner = raw.replace(/^['"]|['"]$/g, "").trim();
+      return /^https:\/\//i.test(inner) ? match : "none";
+    })
     .replace(/<(?:img|image|use)\b[^>]*>/gi, (tag) =>
       tag.replace(
         /\s+(?:src|srcset|href|xlink:href)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi,

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -10,6 +10,7 @@ import type {
   IframeContextMenuPayload,
   IframeFigmaClipboardPastePayload,
   IframeHotkeyPayload,
+  IframeImagePastePayload,
 } from "../design-canvas/iframe-events";
 import type {
   DeviceFrameType,
@@ -363,6 +364,7 @@ export interface MultiScreenCanvasProps {
   onBoardFigmaClipboardPaste?: (
     event: IframeFigmaClipboardPastePayload,
   ) => void;
+  onBoardImagePaste?: (event: IframeImagePastePayload) => void;
   onBoardIframeContextMenu?: (event: IframeContextMenuPayload) => void;
   onBoardTextEditingStateChange?: (state: {
     active: boolean;
@@ -940,6 +942,7 @@ export type {
   IframeContextMenuPayload,
   IframeFigmaClipboardPastePayload,
   IframeHotkeyPayload,
+  IframeImagePastePayload,
 };
 
 export interface ResolvedScreenMetadata {