@agent-native/core 0.163.4 → 0.164.3

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

@@ -0,0 +1,213 @@
+import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import type { MoveNodeEditIntent } from "@shared/code-layer";
+import { applyVisualEdit } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import { trace } from "@/components/design/design-trace";
+import { getInitialFrameGeometry } from "@/components/design/multi-screen/frame-geometry";
+import type { FrameGeometry } from "@/components/design/multi-screen/types";
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import type { SelectedLayerTarget } from "@/pages/design-editor/code-layer-state";
+import {
+  elementInfoFromCodeLayerNode,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import {
+  cloneCanvasFrameGeometry,
+  getCanvasFrameGeometry,
+} from "@/pages/design-editor/design-data-geometry-utils";
+import type { DesignEditorPreferences } from "@/pages/design-editor/editor-preferences";
+import {
+  resolveElementNudgeIntent,
+  resolveNudgeIntent,
+} from "@/pages/design-editor/nudge-intent";
+import { overviewSelectionTargetsElement } from "@/pages/design-editor/selection-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface NudgeSelectionArgs {
+  activeFile: DesignFile;
+  applyLocalContentUpdate: (
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      immediateSave?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      historyBeforeContent?: string;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  boardFileId: string | undefined;
+  boardFrameGeometry: FrameGeometry | undefined;
+  canEditDesign: boolean;
+  commitVisualStyles: (
+    selector: string,
+    styles: Record<string, string>,
+    options?: {
+      runtimeApplied?: boolean;
+      elementInfo?: ElementInfo;
+      originalStyles?: Record<string, string>;
+    },
+  ) => void;
+  designDataJsonRef: RefObject<Record<string, unknown>>;
+  editorPreferences: DesignEditorPreferences;
+  files: DesignFile[];
+  getFreshActiveContent: () => string;
+  handleGeometryCommit: (
+    before: CanvasFrameGeometryById,
+    after: CanvasFrameGeometryById,
+    options?: { source?: "pointer" | "keyboard" },
+  ) => void;
+  hideSelectionChromeForNudge: () => void;
+  overviewScreens: OverviewScreen[];
+  overviewSelectedScreenIds: string[];
+  selectedElement: ElementInfo | null;
+  selectedLayerIdsState: string[];
+  selectedLayerTargetsRef: RefObject<SelectedLayerTarget[]>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  viewModeRef: RefObject<"single" | "overview">;
+}
+
+export function runNudgeSelection(
+  {
+    activeFile,
+    applyLocalContentUpdate,
+    boardFileId,
+    boardFrameGeometry,
+    canEditDesign,
+    commitVisualStyles,
+    designDataJsonRef,
+    editorPreferences,
+    files,
+    getFreshActiveContent,
+    handleGeometryCommit,
+    hideSelectionChromeForNudge,
+    overviewScreens,
+    overviewSelectedScreenIds,
+    selectedElement,
+    selectedLayerIdsState,
+    selectedLayerTargetsRef,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    viewModeRef,
+  }: NudgeSelectionArgs,
+  direction: "up" | "right" | "down" | "left",
+  largeStep: boolean,
+) {
+  trace("structure", "nudge", { direction, largeStep });
+  if (!canEditDesign) return;
+  const nudgeAmounts = editorPreferences.nudge;
+  const freeTranslation = resolveNudgeIntent({
+    direction,
+    largeStep,
+    amounts: nudgeAmounts,
+  });
+  const dx = freeTranslation.kind === "translate" ? freeTranslation.dx : 0;
+  const dy = freeTranslation.kind === "translate" ? freeTranslation.dy : 0;
+
+  // Screen frames nudge through the same geometry-commit path mouse-drag
+  // uses, so a held arrow key gets handleGeometryCommit's ~800ms undo
+  // coalescing instead of one history entry per keypress.
+  if (
+    viewModeRef.current === "overview" &&
+    overviewSelectedScreenIds.length > 0 &&
+    !overviewSelectionTargetsElement({
+      selectedElement,
+      selectedLayerIds: selectedLayerIdsState,
+      fileIds: files.map((file) => file.id),
+    })
+  ) {
+    const before = getCanvasFrameGeometry(designDataJsonRef.current);
+    const after = cloneCanvasFrameGeometry(before);
+    let changed = false;
+    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 current = { ...fallbackGeometry, ...before[screenId] };
+      after[screenId] = {
+        ...current,
+        x: current.x + dx,
+        y: current.y + dy,
+      };
+      changed = true;
+    });
+    if (changed) {
+      handleGeometryCommit(before, after, { source: "keyboard" });
+    }
+    return;
+  }
+
+  // Selecting in the layers tree fills selectedLayerTargets before the
+  // bridge round-trip fills selectedElement, so keying off the latter
+  // alone silently drops the first nudge after every tree selection.
+  const nudgeTarget = selectedElement?.selector
+    ? selectedElement
+    : selectedLayerTargetsRef.current[0]?.elementInfo;
+  if (!nudgeTarget?.selector) return;
+
+  const intent = resolveElementNudgeIntent({
+    content: activeFile ? getFreshActiveContent() : "",
+    selectedElement: nudgeTarget,
+    direction,
+    largeStep,
+    amounts: nudgeAmounts,
+  });
+  if (intent.kind === "none") return;
+  if (intent.kind === "reorder") {
+    const patch = applyVisualEdit(intent.content, {
+      kind: "moveNode",
+      target: { nodeId: intent.targetNodeId },
+      anchor: { nodeId: intent.anchorNodeId },
+      placement: intent.placement,
+    } satisfies MoveNodeEditIntent);
+    if (patch.result.status !== "applied") return;
+    applyLocalContentUpdate(patch.content, { skipPreview: true });
+    // A node with no stable `data-agent-native-node-id` has its id derived
+    // from path/offset, and the move changes both — so the pre-move id
+    // finds nothing and the selection has to be re-resolved by identity.
+    const movedNode =
+      patch.projection.nodes.find(
+        (node) =>
+          node.id === intent.targetNodeId ||
+          node.dataAttributes["data-agent-native-node-id"] ===
+            intent.targetNodeId,
+      ) ??
+      resolveCodeLayerNodeFromElementInfo(patch.projection, selectedElement);
+    if (movedNode) {
+      setSelectedElement(elementInfoFromCodeLayerNode(movedNode));
+      setSelectedLayerIdsState([movedNode.id]);
+    }
+    return;
+  }
+
+  hideSelectionChromeForNudge();
+  const left = parseFloat(nudgeTarget.computedStyles.left || "0") || 0;
+  const top = parseFloat(nudgeTarget.computedStyles.top || "0") || 0;
+  commitVisualStyles(nudgeTarget.selector, {
+    position:
+      nudgeTarget.computedStyles.position === "static"
+        ? "relative"
+        : nudgeTarget.computedStyles.position || "relative",
+    left: `${Math.round(left + intent.dx)}px`,
+    top: `${Math.round(top + intent.dy)}px`,
+  });
+}

package/corpus/templates/design/app/pages/design-editor/commands/overview-primitive-reparent.ts

@@ -0,0 +1,318 @@
+import {
+  computeReparentedChildPosition,
+  normalizePoisonedBoardNestedCoords,
+} from "@shared/board-file";
+import {
+  applyVisualEdit,
+  buildCodeLayerProjection,
+  moveNodeBetweenDocuments,
+} from "@shared/code-layer";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import {
+  codeLayerPatchMessage,
+  elementInfoFromCodeLayerNode,
+} from "@/pages/design-editor/code-layer-state";
+import type { ContentHistoryEntry } from "@/pages/design-editor/history";
+import {
+  getAbsolutePositioningForNodeInHtml,
+  removeAbsolutePositioningFromNodeInHtml,
+  setAbsolutePositioningForNodeInHtml,
+  warnIfPoisonedBoardCoordsNormalized,
+} from "@/pages/design-editor/html-layer-positioning";
+
+export interface OverviewPrimitiveReparentArgs {
+  applyFileContentUpdate: (
+    fileId: string,
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  boardFileId: string | undefined;
+  canEditDesign: boolean;
+  getScreenContent: (screenId: string) => string;
+  recordContentHistoryEntry: (entry: ContentHistoryEntry) => void;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runOverviewPrimitiveReparent(
+  {
+    applyFileContentUpdate,
+    boardFileId,
+    canEditDesign,
+    getScreenContent,
+    recordContentHistoryEntry,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    t,
+  }: OverviewPrimitiveReparentArgs,
+  {
+    sourceNodeId,
+    sourceScreenId,
+    targetNodeId,
+    targetScreenId,
+    placement = "inside",
+  }: {
+    sourceNodeId: string;
+    sourceScreenId: string;
+    targetNodeId: string;
+    targetScreenId: string;
+    placement?: "before" | "after" | "inside";
+  },
+) {
+  if (!canEditDesign) return;
+
+  if (sourceScreenId === targetScreenId) {
+    // --- Same-screen reparent ---
+    const baseContent = getScreenContent(sourceScreenId);
+    if (!baseContent) return;
+
+    // 1. Move the node relative to the target anchor. For "inside" the
+    // anchor is the container itself (append); for "before"/"after" the
+    // anchor is a sibling child already inside an auto-layout container
+    // (flow-insert at that index) — applyMoveNodeEdit's
+    // prepareMovedFragmentForParent already strips absolute positioning
+    // from the moved fragment's root when the destination parent is a
+    // flow container, regardless of which placement resolved it there.
+    const movePatch = applyVisualEdit(baseContent, {
+      kind: "moveNode",
+      target: { nodeId: sourceNodeId },
+      anchor: { nodeId: targetNodeId },
+      placement,
+    });
+    if (movePatch.result.status !== "applied") {
+      toast.error(
+        codeLayerPatchMessage(
+          movePatch.result.message,
+          t("designEditor.toasts.layerMoveFailed"),
+        ),
+        { duration: 4000 },
+      );
+      return;
+    }
+
+    const movedNodeAttrId =
+      movePatch.projection.nodes.find(
+        (n) =>
+          n.dataAttributes["data-agent-native-node-id"] === sourceNodeId ||
+          n.id === sourceNodeId,
+      )?.dataAttributes["data-agent-native-node-id"] ?? sourceNodeId;
+
+    if (placement !== "inside") {
+      // Auto-layout flow-insert: belt-and-suspenders alongside
+      // prepareMovedFragmentForParent above — make sure the moved node
+      // itself carries no leftover position/left/top so it renders as a
+      // pure flow child at its new index instead of an absolute layer
+      // sitting on top of its new siblings.
+      const flowContent = removeAbsolutePositioningFromNodeInHtml(
+        movePatch.content,
+        movedNodeAttrId,
+      );
+      applyFileContentUpdate(sourceScreenId, flowContent, {
+        skipPreview: true,
+      });
+      const nextProjection = buildCodeLayerProjection(flowContent);
+      const movedNodeAfter = nextProjection.nodes.find(
+        (n) =>
+          n.dataAttributes["data-agent-native-node-id"] === sourceNodeId ||
+          n.id === sourceNodeId,
+      );
+      if (movedNodeAfter) {
+        setSelectedLayerIdsState([movedNodeAfter.id]);
+        setSelectedElement(elementInfoFromCodeLayerNode(movedNodeAfter));
+      }
+      return;
+    }
+
+    const sourcePosition = getAbsolutePositioningForNodeInHtml(
+      baseContent,
+      sourceNodeId,
+    );
+    const targetPosition = getAbsolutePositioningForNodeInHtml(
+      baseContent,
+      targetNodeId,
+    );
+    // Rebase the moved node's left/top to be PARENT-relative.
+    // computeReparentedChildPosition strips the board-surface offset
+    // (65536-multiples) from either side first, so a source that was
+    // persisted in board-iframe viewport coordinates (the historic
+    // container-drop poison — see BOARD_SURFACE_CONTENT_OFFSET_PX in
+    // shared/board-file.ts) still comes out as a sane parent-relative
+    // position instead of an off-world near-65536 value.
+    const rebasedContent =
+      sourcePosition && targetPosition
+        ? setAbsolutePositioningForNodeInHtml(
+            movePatch.content,
+            movedNodeAttrId,
+            computeReparentedChildPosition(sourcePosition, targetPosition),
+          )
+        : movePatch.content;
+    // Board safety net: if any nested coordinate still carries the
+    // surface-offset fingerprint (e.g. the position pair above could not
+    // be resolved and the rebase was skipped), normalize the final
+    // content so a nested board child can never persist off-world.
+    const nextContent = (() => {
+      if (!boardFileId || sourceScreenId !== boardFileId) {
+        return rebasedContent;
+      }
+      const normalized = normalizePoisonedBoardNestedCoords(rebasedContent);
+      warnIfPoisonedBoardCoordsNormalized(sourceScreenId, normalized);
+      return normalized.html;
+    })();
+
+    applyFileContentUpdate(sourceScreenId, nextContent, {
+      skipPreview: true,
+    });
+
+    // Re-select the moved node.
+    const nextProjection = buildCodeLayerProjection(nextContent);
+    const movedNodeAfter = nextProjection.nodes.find(
+      (n) =>
+        n.dataAttributes["data-agent-native-node-id"] === sourceNodeId ||
+        n.id === sourceNodeId,
+    );
+    if (movedNodeAfter) {
+      setSelectedLayerIdsState([movedNodeAfter.id]);
+      setSelectedElement(elementInfoFromCodeLayerNode(movedNodeAfter));
+    }
+    return;
+  }
+
+  // --- Cross-screen reparent ---
+  const sourceContent = getScreenContent(sourceScreenId);
+  const destContent = getScreenContent(targetScreenId);
+  if (!sourceContent || !destContent) return;
+
+  // Resolve data-agent-native-node-id attributes for moveNodeBetweenDocuments.
+  const sourceProjection = buildCodeLayerProjection(sourceContent);
+  const destProjection = buildCodeLayerProjection(destContent);
+  const sourceNode = sourceProjection.nodes.find(
+    (n) =>
+      n.dataAttributes["data-agent-native-node-id"] === sourceNodeId ||
+      n.id === sourceNodeId,
+  );
+  const anchorNode = destProjection.nodes.find(
+    (n) =>
+      n.dataAttributes["data-agent-native-node-id"] === targetNodeId ||
+      n.id === targetNodeId,
+  );
+  const nodeAttrId =
+    sourceNode?.dataAttributes["data-agent-native-node-id"] ?? sourceNodeId;
+  const anchorAttrId =
+    anchorNode?.dataAttributes["data-agent-native-node-id"] ?? targetNodeId;
+
+  const result = moveNodeBetweenDocuments(sourceContent, destContent, {
+    nodeId: nodeAttrId,
+    anchorNodeId: anchorAttrId,
+    placement,
+  });
+  if (result.status !== "applied") {
+    toast.error(
+      codeLayerPatchMessage(
+        result.message,
+        t("designEditor.toasts.layerMoveFailed"),
+      ),
+      { duration: 4000 },
+    );
+    return;
+  }
+  // Finding 8: the requested anchor placement landed inside a
+  // <template> interior and was redirected to a real DOM slot right
+  // after the enclosing template instead — let the user know the drop
+  // wasn't silently discarded, just relocated nearby.
+  if (result.anchorRedirected) {
+    toast(t("designEditor.toasts.layerMoveRedirected"), {
+      duration: 4000,
+    });
+  }
+
+  const destNodeAttrId = result.movedNodeId ?? nodeAttrId;
+  // "inside" rebases to a parent-relative absolute position (matches the
+  // same-screen branch above and historic behavior for dropping onto a
+  // plain absolute container). "before"/"after" is an auto-layout
+  // flow-insert — moveNodeBetweenDocuments's prepareMovedFragmentForParent
+  // already stripped absolute positioning from the moved fragment's
+  // root, so just belt-and-suspenders clear it again by node id rather
+  // than reintroducing position:absolute via the rebase below.
+  const nextDestContent = (() => {
+    const rebasedDestContent = (() => {
+      if (placement !== "inside") {
+        return removeAbsolutePositioningFromNodeInHtml(
+          result.destHtml,
+          destNodeAttrId,
+        );
+      }
+      const sourcePosition = getAbsolutePositioningForNodeInHtml(
+        sourceContent,
+        nodeAttrId,
+      );
+      const targetPosition = getAbsolutePositioningForNodeInHtml(
+        destContent,
+        anchorAttrId,
+      );
+      // Same parent-relative rebase + board-poison stripping as the
+      // same-screen branch above (see computeReparentedChildPosition).
+      return sourcePosition && targetPosition
+        ? setAbsolutePositioningForNodeInHtml(
+            result.destHtml,
+            destNodeAttrId,
+            computeReparentedChildPosition(sourcePosition, targetPosition),
+          )
+        : result.destHtml;
+    })();
+    if (!boardFileId || targetScreenId !== boardFileId) {
+      return rebasedDestContent;
+    }
+    const normalized = normalizePoisonedBoardNestedCoords(rebasedDestContent);
+    warnIfPoisonedBoardCoordsNormalized(targetScreenId, normalized);
+    return normalized.html;
+  })();
+
+  recordContentHistoryEntry({
+    changes: [
+      {
+        fileId: sourceScreenId,
+        before: sourceContent,
+        after: result.sourceHtml,
+      },
+      {
+        fileId: targetScreenId,
+        before: destContent,
+        after: nextDestContent,
+      },
+    ],
+  });
+
+  applyFileContentUpdate(sourceScreenId, result.sourceHtml, {
+    recordHistory: false,
+    refreshPreview: false,
+    forcePreviewFullDocument: true,
+  });
+  applyFileContentUpdate(targetScreenId, nextDestContent, {
+    recordHistory: false,
+    refreshPreview: false,
+    forcePreviewFullDocument: true,
+  });
+
+  // Re-select the moved node in the destination.
+  const finalProjection = buildCodeLayerProjection(nextDestContent);
+  const movedNodeFinal = finalProjection.nodes.find(
+    (n) => n.dataAttributes["data-agent-native-node-id"] === destNodeAttrId,
+  );
+  if (movedNodeFinal) {
+    setSelectedLayerIdsState([movedNodeFinal.id]);
+    setSelectedElement(elementInfoFromCodeLayerNode(movedNodeFinal));
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/paste-copied-screens.ts

@@ -0,0 +1,114 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import type { QueryClient } from "@tanstack/react-query";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { ElementInfo } from "@/components/design/types";
+import type { DesignClipboardScreenEntry } from "@/lib/design-import";
+import {
+  nextDuplicatedFilename,
+  normalizedDesignFileType,
+  reassignDuplicatedNodeIds,
+} from "@/pages/design-editor/canvas-primitive-insert";
+import type { DesignFile, DesignTool } from "@/pages/design-editor/types";
+
+export interface PasteCopiedScreensArgs {
+  canEditDesign: boolean;
+  canvasFrameGeometryById: CanvasFrameGeometryById;
+  createFileMutation: ReturnType<
+    typeof useActionMutation<undefined, undefined, "create-file">
+  >;
+  files: DesignFile[];
+  id: string | undefined;
+  pasteCascadeRef: RefObject<number>;
+  queryClient: QueryClient;
+  queueFrameGeometrySave: (geometryById: CanvasFrameGeometryById) => void;
+  setActiveFileId: Dispatch<SetStateAction<string | null>>;
+  setActiveTool: Dispatch<SetStateAction<DesignTool>>;
+  setOverviewSelectedScreenIds: Dispatch<SetStateAction<string[]>>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  setViewMode: Dispatch<SetStateAction<"single" | "overview">>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  viewModeRef: RefObject<"single" | "overview">;
+}
+
+export function runPasteCopiedScreens(
+  {
+    canEditDesign,
+    canvasFrameGeometryById,
+    createFileMutation,
+    files,
+    id,
+    pasteCascadeRef,
+    queryClient,
+    queueFrameGeometrySave,
+    setActiveFileId,
+    setActiveTool,
+    setOverviewSelectedScreenIds,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    setViewMode,
+    t,
+    viewModeRef,
+  }: PasteCopiedScreensArgs,
+  screens: DesignClipboardScreenEntry[],
+  position?: { x: number; y: number },
+) {
+  if (!id || !canEditDesign || screens.length === 0) return;
+  const pasteOffset = 32 + pasteCascadeRef.current * 16;
+  pasteCascadeRef.current += 1;
+  screens.forEach((screen, index) => {
+    const filename = nextDuplicatedFilename(files, screen.filename);
+    const content = reassignDuplicatedNodeIds(screen.content);
+    const sourceGeometry = screen.canvasFrame;
+    createFileMutation.mutate(
+      {
+        designId: id,
+        filename,
+        content,
+        fileType: normalizedDesignFileType(screen.fileType ?? "html"),
+      } as any,
+      {
+        onSuccess: (result: any) => {
+          const nextId = typeof result?.id === "string" ? result.id : null;
+          queryClient.invalidateQueries({
+            queryKey: ["action", "get-design"],
+          });
+          if (!nextId) return;
+          const nextX = position
+            ? position.x + index * 16
+            : (sourceGeometry?.x ?? 0) + pasteOffset;
+          const nextY = position
+            ? position.y + index * 16
+            : (sourceGeometry?.y ?? 0) + pasteOffset;
+          queueFrameGeometrySave({
+            ...canvasFrameGeometryById,
+            [nextId]: {
+              ...sourceGeometry,
+              x: nextX,
+              y: nextY,
+            },
+          });
+          if (index === screens.length - 1) {
+            setActiveFileId(nextId);
+            setActiveTool("move");
+            setSelectedElement(null);
+            setSelectedLayerIdsState([nextId]);
+            viewModeRef.current = "overview";
+            setViewMode("overview");
+            setOverviewSelectedScreenIds([nextId]);
+          }
+        },
+        onError: (error: unknown) => {
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : t("designEditor.toasts.screenDuplicateError"),
+          );
+        },
+      },
+    );
+  });
+}