@agent-native/core 0.163.4 → 0.164.3

package/corpus/templates/design/app/pages/design-editor/commands/distribute-selection.ts

@@ -0,0 +1,114 @@
+import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import type { CodeLayerNode } from "@shared/code-layer";
+import { buildCodeLayerProjection } from "@shared/code-layer";
+import type { RefObject } from "react";
+
+import { getInitialFrameGeometry } from "@/components/design/multi-screen/frame-geometry";
+import type { FrameGeometry } from "@/components/design/multi-screen/types";
+import type { DesignHotkeyDistributeAxis } from "@/hooks/useDesignHotkeys";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import {
+  cloneCanvasFrameGeometry,
+  getCanvasFrameGeometry,
+} from "@/pages/design-editor/design-data-geometry-utils";
+import type { AlignableRect } from "@/pages/design-editor/layout-operations";
+import { computeDistributedPositions } from "@/pages/design-editor/layout-operations";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface DistributeSelectionArgs {
+  activeFile: DesignFile;
+  boardFileId: string | undefined;
+  boardFrameGeometry: FrameGeometry | undefined;
+  canEditDesign: boolean;
+  commitNodePositions: (
+    baseContent: string,
+    positions: ReadonlyMap<string, { x: number; y: number }>,
+  ) => boolean;
+  designDataJsonRef: RefObject<Record<string, unknown>>;
+  getActiveFileSelectedNodeIds: (content: string) => string[];
+  getFreshActiveContent: () => string;
+  handleGeometryCommit: (
+    before: CanvasFrameGeometryById,
+    after: CanvasFrameGeometryById,
+    options?: { source?: "pointer" | "keyboard" },
+  ) => void;
+  overviewScreens: OverviewScreen[];
+  overviewSelectedScreenIds: string[];
+  rectFromCodeLayerNode: (node: CodeLayerNode) => AlignableRect;
+  viewModeRef: RefObject<"single" | "overview">;
+}
+
+export function runDistributeSelection(
+  {
+    activeFile,
+    boardFileId,
+    boardFrameGeometry,
+    canEditDesign,
+    commitNodePositions,
+    designDataJsonRef,
+    getActiveFileSelectedNodeIds,
+    getFreshActiveContent,
+    handleGeometryCommit,
+    overviewScreens,
+    overviewSelectedScreenIds,
+    rectFromCodeLayerNode,
+    viewModeRef,
+  }: DistributeSelectionArgs,
+  axis: DesignHotkeyDistributeAxis,
+) {
+  if (!canEditDesign) return;
+
+  if (viewModeRef.current === "overview") {
+    if (overviewSelectedScreenIds.length < 3) return;
+    const before = getCanvasFrameGeometry(designDataJsonRef.current);
+    const screenRects: AlignableRect[] = [];
+    overviewSelectedScreenIds.forEach((screenId) => {
+      const screenIndex = overviewScreens.findIndex(
+        (screen) => screen.id === screenId,
+      );
+      const screen =
+        screenIndex >= 0 ? overviewScreens[screenIndex] : undefined;
+      const fallbackGeometry =
+        screenIndex >= 0
+          ? getInitialFrameGeometry(screenIndex, {
+              width: screen?.width ?? 1280,
+              height: screen?.height ?? 2560,
+            })
+          : boardFileId === screenId
+            ? boardFrameGeometry
+            : undefined;
+      if (!fallbackGeometry) return;
+      const geometry = { ...fallbackGeometry, ...before[screenId] };
+      screenRects.push({
+        id: screenId,
+        x: geometry.x,
+        y: geometry.y,
+        width: geometry.width,
+        height: geometry.height,
+      });
+    });
+    if (screenRects.length < 3) return;
+    const positions = computeDistributedPositions(screenRects, axis);
+    if (positions.size === 0) return;
+    const after = cloneCanvasFrameGeometry(before);
+    positions.forEach((position, screenId) => {
+      after[screenId] = { ...after[screenId]!, ...position };
+    });
+    handleGeometryCommit(before, after);
+    return;
+  }
+
+  if (!activeFile) return;
+  const baseContent = getFreshActiveContent();
+  const nodeIds = getActiveFileSelectedNodeIds(baseContent);
+  if (nodeIds.length < 3) return;
+  const projection = buildCodeLayerProjection(baseContent);
+  const nodesById = new Map(projection.nodes.map((node) => [node.id, node]));
+  const selectedNodes = nodeIds
+    .map((nodeId) => nodesById.get(nodeId))
+    .filter((node): node is CodeLayerNode => Boolean(node));
+  if (selectedNodes.length < 3) return;
+  const selectedRects = selectedNodes.map(rectFromCodeLayerNode);
+  const positions = computeDistributedPositions(selectedRects, axis);
+  commitNodePositions(baseContent, positions);
+}

package/corpus/templates/design/app/pages/design-editor/commands/download-all-screens-pdf.ts

@@ -0,0 +1,116 @@
+import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import { normalizeDesignSourceType } from "@shared/source-mode";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import type { RasterPdfPage } from "@/pages/design-editor/export-capture";
+import {
+  PDF_MIN_PRINT_RASTER_SCALE,
+  createMultiPageRasterPdf,
+} from "@/pages/design-editor/export-capture";
+import {
+  PngCaptureError,
+  cropCanvasToRect,
+  renderExportDocumentCanvas,
+} from "@/pages/design-editor/png-export-render";
+
+export interface DownloadAllScreensPdfArgs {
+  activeCanvasSourceType: "inline" | "localhost" | "fusion";
+  canEditDesign: boolean;
+  canvasFrameGeometryById: CanvasFrameGeometryById;
+  fallbackExportName: (extension: string, suffix?: string) => string;
+  overviewScreens: OverviewScreen[];
+  pngExportingRef: RefObject<boolean>;
+  setPngExporting: Dispatch<SetStateAction<boolean>>;
+  showRasterCaptureError: (error: unknown, format?: "png" | "pdf") => void;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  triggerBlobDownload: (blob: Blob, filename: string) => void;
+}
+
+export async function runDownloadAllScreensPdf({
+  activeCanvasSourceType,
+  canEditDesign,
+  canvasFrameGeometryById,
+  fallbackExportName,
+  overviewScreens,
+  pngExportingRef,
+  setPngExporting,
+  showRasterCaptureError,
+  t,
+  triggerBlobDownload,
+}: DownloadAllScreensPdfArgs) {
+  if (pngExportingRef.current) return;
+  if (overviewScreens.length < 2) return;
+  pngExportingRef.current = true;
+  setPngExporting(true);
+  try {
+    const html2canvas = (await import("html2canvas")).default;
+    const pages: RasterPdfPage[] = [];
+    for (const screen of overviewScreens) {
+      const iframe = document.querySelector<HTMLIFrameElement>(
+        `iframe[data-design-preview-iframe][data-screen-iframe-id="${CSS.escape(screen.id)}"]`,
+      );
+      if (!iframe) throw new PngCaptureError("no-preview");
+      let doc: Document | null = null;
+      try {
+        doc = iframe.contentDocument;
+        if (!doc?.documentElement) doc = null;
+      } catch {
+        doc = null;
+      }
+      if (!doc) {
+        const sourceType =
+          normalizeDesignSourceType(iframe.dataset.designSourceType) ??
+          activeCanvasSourceType;
+        if (sourceType !== "inline") {
+          throw new PngCaptureError("external-preview");
+        }
+        if (!canEditDesign) {
+          throw new PngCaptureError("read-only-preview");
+        }
+        throw new PngCaptureError("no-preview");
+      }
+      const geometry = canvasFrameGeometryById[screen.id] ?? {};
+      const pageWidth = Math.max(
+        1,
+        geometry.width ?? screen.width ?? iframe.clientWidth,
+      );
+      const pageHeight = Math.max(
+        1,
+        geometry.height ?? screen.height ?? iframe.clientHeight,
+      );
+      const rendered = await renderExportDocumentCanvas({
+        doc,
+        iframe,
+        // Same print-quality floor as the single-page path: a 1x capture
+        // stretched to fill a fixed physical page size reads as blurry.
+        exportScale: PDF_MIN_PRINT_RASTER_SCALE,
+        render: html2canvas,
+      });
+      const view = doc.defaultView;
+      const viewportCanvas = cropCanvasToRect(
+        rendered.canvas,
+        {
+          x: view?.scrollX ?? 0,
+          y: view?.scrollY ?? 0,
+          width: Math.max(1, iframe.clientWidth),
+          height: Math.max(1, iframe.clientHeight),
+        },
+        rendered.scale,
+      );
+      const dataUrl = (viewportCanvas ?? rendered.canvas).toDataURL(
+        "image/png",
+      );
+      pages.push({ dataUrl, width: pageWidth, height: pageHeight });
+    }
+    const pdf = await createMultiPageRasterPdf(pages);
+    triggerBlobDownload(pdf, fallbackExportName("pdf", "all-screens"));
+    toast.success(t("designEditor.toasts.pdfAllScreensDownloaded"));
+  } catch (error) {
+    showRasterCaptureError(error, "pdf");
+  } finally {
+    pngExportingRef.current = false;
+    setPngExporting(false);
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/download-pdf.ts

@@ -0,0 +1,103 @@
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { ExportSettingsValue } from "@/components/design/inspector";
+import type { ElementInfo } from "@/components/design/types";
+import {
+  PDF_MIN_PRINT_RASTER_SCALE,
+  createSinglePageRasterPdf,
+} from "@/pages/design-editor/export-capture";
+import type { PngCaptureScope } from "@/pages/design-editor/png-export-render";
+import { resolveExportCropRect } from "@/pages/design-editor/png-export-render";
+
+export interface DownloadPdfArgs {
+  fallbackExportName: (extension: string, suffix?: string) => string;
+  pngExportingRef: RefObject<boolean>;
+  renderPngBlob: (arg0: {
+    scope: PngCaptureScope;
+    settings?: Partial<ExportSettingsValue>;
+    format?: "png" | "jpg" | "webp";
+  }) => Promise<Blob>;
+  resolvePngCaptureTarget: (scope: PngCaptureScope) => {
+    cropSelection: ElementInfo | readonly ElementInfo[] | null;
+    doc: Document;
+    iframe: HTMLIFrameElement;
+  };
+  setPngExporting: Dispatch<SetStateAction<boolean>>;
+  showRasterCaptureError: (error: unknown, format?: "png" | "pdf") => void;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  triggerBlobDownload: (blob: Blob, filename: string) => void;
+}
+
+export async function runDownloadPdf(
+  {
+    fallbackExportName,
+    pngExportingRef,
+    renderPngBlob,
+    resolvePngCaptureTarget,
+    setPngExporting,
+    showRasterCaptureError,
+    t,
+    triggerBlobDownload,
+  }: DownloadPdfArgs,
+  settings?: Partial<ExportSettingsValue>,
+) {
+  if (pngExportingRef.current) return;
+  pngExportingRef.current = true;
+  setPngExporting(true);
+  try {
+    const { cropSelection, doc, iframe } = resolvePngCaptureTarget("document");
+    const crop = resolveExportCropRect(doc, cropSelection);
+    const pageWidth = Math.max(
+      1,
+      crop?.width ??
+        Math.max(
+          doc.documentElement.scrollWidth,
+          doc.body?.scrollWidth ?? 0,
+          iframe.clientWidth,
+        ),
+    );
+    const pageHeight = Math.max(
+      1,
+      crop?.height ??
+        Math.max(
+          doc.documentElement.scrollHeight,
+          doc.body?.scrollHeight ?? 0,
+          iframe.clientHeight,
+        ),
+    );
+    // Force a print-quality raster floor: the PDF page renders at a fixed
+    // physical size (see createSinglePageRasterPdf), so a 1x capture —
+    // the export panel's ordinary default — embeds only ~96 DPI, which
+    // looks visibly soft once printed. Still honor an explicit higher
+    // user-selected scale (3x/4x).
+    const pdfScale = Math.max(
+      PDF_MIN_PRINT_RASTER_SCALE,
+      settings?.scale ?? PDF_MIN_PRINT_RASTER_SCALE,
+    );
+    const png = await renderPngBlob({
+      scope: "document",
+      settings: { ...settings, scale: pdfScale },
+      format: "png",
+    });
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = () =>
+        reject(reader.error ?? new Error("PDF read failed"));
+      reader.onload = () => resolve(String(reader.result));
+      reader.readAsDataURL(png);
+    });
+    const pdf = await createSinglePageRasterPdf({
+      dataUrl,
+      width: pageWidth,
+      height: pageHeight,
+    });
+    triggerBlobDownload(pdf, fallbackExportName("pdf", settings?.suffix));
+    toast.success(t("designEditor.toasts.pdfDownloaded"));
+  } catch (error) {
+    showRasterCaptureError(error, "pdf");
+  } finally {
+    pngExportingRef.current = false;
+    setPngExporting(false);
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/download-svg.ts

@@ -0,0 +1,159 @@
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { ExportSettingsValue } from "@/components/design/inspector";
+import type { ElementInfo } from "@/components/design/types";
+import {
+  buildStaticForeignObjectSvg,
+  stripNonStaticXmlAttributes,
+  waitForExportReady,
+} from "@/pages/design-editor/export-capture";
+import {
+  removeEditorChromeOverlays,
+  resolveExportCropRect,
+  sanitizeSerializedXmlForSvg,
+} from "@/pages/design-editor/png-export-render";
+import type { DesignData } from "@/pages/design-editor/types";
+
+export interface DownloadSvgArgs {
+  design: DesignData | null;
+  fallbackExportName: (extension: string, suffix?: string) => string;
+  selectedElement: ElementInfo | null;
+  setSvgExporting: Dispatch<SetStateAction<boolean>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  triggerBlobDownload: (blob: Blob, filename: string) => void;
+}
+
+export async function runDownloadSvg(
+  {
+    design,
+    fallbackExportName,
+    selectedElement,
+    setSvgExporting,
+    t,
+    triggerBlobDownload,
+  }: DownloadSvgArgs,
+  settings?: Partial<ExportSettingsValue>,
+) {
+  const iframe = document.querySelector<HTMLIFrameElement>(
+    "iframe[data-design-preview-iframe]",
+  );
+  const doc = iframe?.contentDocument;
+  if (!doc?.documentElement) {
+    toast.error(t("designEditor.toasts.openScreenSvg"));
+    return;
+  }
+
+  setSvgExporting(true);
+  try {
+    // Same readiness race as the PNG path (see waitForExportReady):
+    // without this, an SVG downloaded right after a screen loads inlines
+    // whatever partial/empty CSSOM exists at that instant, producing an
+    // unstyled export for no reason a user could tell from the UI.
+    await waitForExportReady(doc);
+    const width = Math.max(
+      doc.documentElement.scrollWidth,
+      doc.body?.scrollWidth ?? 0,
+      iframe?.clientWidth ?? 0,
+    );
+    const height = Math.max(
+      doc.documentElement.scrollHeight,
+      doc.body?.scrollHeight ?? 0,
+      iframe?.clientHeight ?? 0,
+    );
+    const clone = doc.documentElement.cloneNode(true) as HTMLElement;
+    clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+    const stylesheetLinks = Array.from(
+      doc.querySelectorAll<HTMLLinkElement>('link[rel~="stylesheet"]'),
+    );
+    const clonedStylesheetLinks = Array.from(
+      clone.querySelectorAll<HTMLLinkElement>('link[rel~="stylesheet"]'),
+    );
+    const stylesheets = Array.from(doc.styleSheets);
+
+    stylesheetLinks.forEach((link, index) => {
+      const sheet = stylesheets.find(
+        (candidate) =>
+          (candidate as StyleSheet & { ownerNode?: Node | null }).ownerNode ===
+          link,
+      ) as CSSStyleSheet | undefined;
+      let cssText = "";
+      try {
+        cssText = Array.from(sheet?.cssRules ?? [])
+          .map((rule) => rule.cssText)
+          .join("\n");
+      } catch {
+        // Cross-origin stylesheets cannot be read. Leave the original link in
+        // place instead of failing the whole export.
+        return;
+      }
+      if (!cssText.trim()) return;
+      const style = doc.createElement("style");
+      style.setAttribute(
+        "data-agent-native-inlined-stylesheet",
+        link.getAttribute("href") ?? "",
+      );
+      style.textContent = cssText;
+      clonedStylesheetLinks[index]?.replaceWith(style);
+    });
+    clone.querySelectorAll("script").forEach((node) => node.remove());
+    // Strip the editor's selection outline / handles so the SVG shows only
+    // the design, not the editor chrome.
+    removeEditorChromeOverlays(clone);
+    // The live DOM can contain Alpine/Vue-style directive attributes such
+    // as `@click`, `:class`, and `x-bind:class`. They are valid HTML but
+    // invalid/unbound XML names, and the old serializer emitted a download
+    // that xmllint/Figma rejected at the first directive. This is a static
+    // snapshot (scripts are removed just above), so strip executable and
+    // otherwise XML-unsafe attributes from the clone before serialization.
+    stripNonStaticXmlAttributes(clone);
+    clone.style.width = `${width}px`;
+    clone.style.minHeight = `${height}px`;
+
+    const body = clone.querySelector("body") as HTMLElement | null;
+    if (body) {
+      body.style.margin = body.style.margin || "0";
+      body.style.width = `${width}px`;
+      body.style.minHeight = `${height}px`;
+    }
+
+    const serializedHtml = sanitizeSerializedXmlForSvg(
+      new XMLSerializer().serializeToString(clone),
+    );
+    const safeTitle =
+      design?.title
+        ?.replace(/&/g, "&amp;")
+        .replace(/"/g, "&quot;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;") || t("designEditor.designExport");
+    const exportScale = Math.max(0.1, Math.min(4, settings?.scale ?? 1));
+    // When an element is selected, crop to just that frame by narrowing the
+    // SVG viewBox to its document-space rect. The foreignObject still holds
+    // the full document so layout and inherited styles stay intact; the
+    // viewBox clips the visible region to the selection.
+    const cropRect = resolveExportCropRect(doc, selectedElement);
+    const svg = buildStaticForeignObjectSvg({
+      documentWidth: width,
+      documentHeight: height,
+      cropRect,
+      scale: exportScale,
+      safeTitle,
+      serializedHtml,
+    });
+
+    triggerBlobDownload(
+      new Blob([svg], { type: "image/svg+xml;charset=utf-8" }),
+      fallbackExportName("svg", settings?.suffix),
+    );
+    toast.success(t("designEditor.toasts.svgDownloaded"));
+  } catch (error) {
+    console.error("SVG export failed:", error);
+    toast.error(
+      error instanceof Error
+        ? error.message
+        : t("designEditor.toasts.svgExportError"),
+    );
+  } finally {
+    setSvgExporting(false);
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/duplicate-screen.ts

@@ -0,0 +1,201 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import type { QueryClient } from "@tanstack/react-query";
+import type { RefObject } from "react";
+import { toast } from "sonner";
+
+import { getInitialFrameGeometry } from "@/components/design/multi-screen/frame-geometry";
+import type { FrameGeometry } from "@/components/design/multi-screen/types";
+import {
+  nextDuplicatedFilename,
+  normalizedDesignFileType,
+  reassignDuplicatedNodeIds,
+} from "@/pages/design-editor/canvas-primitive-insert";
+import type { DesignDataOperation } from "@/pages/design-editor/data-operations";
+import { applyDesignDataOperations } from "@/pages/design-editor/data-operations";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import {
+  getCanvasFrameGeometry,
+  getDesignDataRecord,
+} from "@/pages/design-editor/design-data-geometry-utils";
+import type { FileCreationHistoryEntry } from "@/pages/design-editor/history";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface DuplicateScreenArgs {
+  canEditDesign: boolean;
+  createFileAsync: ReturnType<
+    typeof useActionMutation<undefined, undefined, "create-file">
+  >["mutateAsync"];
+  designDataJsonRef: RefObject<Record<string, unknown>>;
+  files: DesignFile[];
+  focusCreatedScreen: (screenId: string, geometry: FrameGeometry) => void;
+  id: string | undefined;
+  liveFrameGeometryRef: RefObject<CanvasFrameGeometryById>;
+  optimisticallyInsertCreatedFile: (args: {
+    fileId: string;
+    filename: string;
+    fileType: DesignFile["fileType"];
+    content: string;
+    result?: Record<string, unknown> | null;
+  }) => void;
+  overviewScreens: OverviewScreen[];
+  queryClient: QueryClient;
+  recordFileCreationHistoryEntry: (entry: FileCreationHistoryEntry) => void;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  updateDesignAsync: ReturnType<
+    typeof useActionMutation<undefined, undefined, "update-design">
+  >["mutateAsync"];
+  writeFrameGeometrySnapshot: (
+    geometryById: CanvasFrameGeometryById,
+    options?: { syncViewportFrameIds?: string[]; pinHeightFrameIds?: string[] },
+  ) => void;
+}
+
+export function runDuplicateScreen(
+  {
+    canEditDesign,
+    createFileAsync,
+    designDataJsonRef,
+    files,
+    focusCreatedScreen,
+    id,
+    liveFrameGeometryRef,
+    optimisticallyInsertCreatedFile,
+    overviewScreens,
+    queryClient,
+    recordFileCreationHistoryEntry,
+    t,
+    updateDesignAsync,
+    writeFrameGeometrySnapshot,
+  }: DuplicateScreenArgs,
+  screenId: string,
+  request?: {
+    canvasPosition?: { x: number; y: number };
+  },
+) {
+  if (!id || !canEditDesign) return;
+  const source = files.find((file) => file.id === screenId);
+  if (!source) return;
+  const filename = nextDuplicatedFilename(files, source.filename);
+  const content = reassignDuplicatedNodeIds(source.content);
+  const fileType = normalizedDesignFileType(source.fileType);
+  const sourceOverviewScreen = overviewScreens.find(
+    (screen) => screen.id === screenId,
+  );
+  const fallbackGeometry = getInitialFrameGeometry(overviewScreens.length, {
+    width: sourceOverviewScreen?.width ?? 1280,
+    height: sourceOverviewScreen?.height ?? 2560,
+  });
+  const createdGeometry: FrameGeometry = request?.canvasPosition
+    ? {
+        ...fallbackGeometry,
+        ...liveFrameGeometryRef.current[screenId],
+        x: request.canvasPosition.x,
+        y: request.canvasPosition.y,
+      }
+    : fallbackGeometry;
+
+  // Per-call mutate callbacks, not a promise, would silently strand every
+  // duplicate but the last: a second mutate() detaches the observer from
+  // the first mutation, so only the newest call's onSuccess ever runs.
+  void createFileAsync({
+    designId: id,
+    filename,
+    content,
+    fileType,
+  } as any)
+    .then((result: any) => {
+      const nextId = typeof result?.id === "string" ? result.id : null;
+      // Refetch only when there is no created id to insert optimistically:
+      // a whole-design refetch re-downloads every screen's HTML, which is
+      // what made adding a frame feel slow.
+      if (!nextId) {
+        queryClient.invalidateQueries({
+          queryKey: ["action", "get-design"],
+        });
+      } else {
+        optimisticallyInsertCreatedFile({
+          fileId: nextId,
+          filename,
+          fileType,
+          content,
+          result,
+        });
+        // Optimistic geometry keeps frame, selection, and camera agreeing
+        // before the refetch. Base it on the map writeFrameGeometrySnapshot
+        // diffs against, or a sibling duplicate's placement is deleted.
+        writeFrameGeometrySnapshot({
+          ...getCanvasFrameGeometry(designDataJsonRef.current),
+          [nextId]: createdGeometry,
+        });
+        focusCreatedScreen(nextId, createdGeometry);
+        recordFileCreationHistoryEntry({
+          filename,
+          content,
+          fileType,
+          geometry: createdGeometry,
+        });
+        // A duplicated localhost/fusion screen stays URL-backed only if its
+        // metadata comes along, and the carry must be path-addressed or it
+        // replaces a peer's metadata for every other screen.
+        const sourceMetadataById = getDesignDataRecord(
+          designDataJsonRef.current,
+          "screenMetadata",
+        );
+        const sourceMetadata = getDesignDataRecord(
+          sourceMetadataById,
+          screenId,
+        );
+        const sourceType = sourceMetadata.sourceType;
+        if (sourceType === "localhost" || sourceType === "fusion") {
+          const dataOperations: DesignDataOperation[] = [
+            {
+              op: "set",
+              path: ["screenMetadata", nextId],
+              value: { ...sourceMetadata },
+            },
+          ];
+          const sourceLocalhostScreensById = getDesignDataRecord(
+            designDataJsonRef.current,
+            "localhostScreens",
+          );
+          const sourceLocalhostScreen = getDesignDataRecord(
+            sourceLocalhostScreensById,
+            screenId,
+          );
+          if (Object.keys(sourceLocalhostScreen).length > 0) {
+            dataOperations.push({
+              op: "set",
+              path: ["localhostScreens", nextId],
+              value: { ...sourceLocalhostScreen },
+            });
+          }
+          const nextData = applyDesignDataOperations(
+            designDataJsonRef.current,
+            dataOperations,
+          );
+          designDataJsonRef.current = nextData;
+          queryClient.setQueryData(
+            ["action", "get-design", { id }],
+            (old: any) => {
+              if (!old || typeof old !== "object") return old;
+              return { ...old, data: JSON.stringify(nextData) };
+            },
+          );
+          void updateDesignAsync({ id, dataOperations } as any).catch(() => {
+            queryClient.invalidateQueries({
+              queryKey: ["action", "get-design"],
+            });
+          });
+        }
+      }
+      toast.success(t("designEditor.toasts.screenDuplicated"));
+    })
+    .catch((error: unknown) => {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("designEditor.toasts.screenDuplicateError"),
+      );
+    });
+}