@agent-native/core 0.163.3 → 0.164.1

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

@@ -0,0 +1,170 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import { applyVisualEdit, buildCodeLayerProjection } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import { trace } from "@/components/design/design-trace";
+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 { buildActiveFileNodeIdSet } from "@/pages/design-editor/selection-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface UngroupSelectionArgs {
+  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;
+  canEditDesign: boolean;
+  codeLayerOwnerByNodeIdRef: RefObject<
+    Map<
+      string,
+      {
+        fileId: string;
+        node: CodeLayerNode;
+        tree: CodeLayerTreeNode[];
+        runtimeOnly: boolean;
+      }
+    >
+  >;
+  files: DesignFile[];
+  getFreshActiveContent: () => string;
+  selectedLayerIdsState: string[];
+  sendRuntimeLayerSemanticHandoff: (
+    operation: "group" | "ungroup" | "auto-layout",
+    layerIds: readonly string[],
+    options?: {
+      desiredChange?: string;
+      description?: string;
+      commandContext?: string;
+    },
+  ) => boolean;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runUngroupSelection({
+  activeFile,
+  applyLocalContentUpdate,
+  canEditDesign,
+  codeLayerOwnerByNodeIdRef,
+  files,
+  getFreshActiveContent,
+  selectedLayerIdsState,
+  sendRuntimeLayerSemanticHandoff,
+  setSelectedElement,
+  setSelectedLayerIdsState,
+  t,
+}: UngroupSelectionArgs) {
+  trace("structure", "ungroup", { layers: selectedLayerIdsState.length });
+  if (!canEditDesign || !activeFile) return;
+  const selectedRuntimeLayerIds = selectedLayerIdsState.filter(
+    (layerId) => codeLayerOwnerByNodeIdRef.current.get(layerId)?.runtimeOnly,
+  );
+  if (selectedRuntimeLayerIds.length > 0) {
+    sendRuntimeLayerSemanticHandoff("ungroup", selectedRuntimeLayerIds);
+    return;
+  }
+  const initialContent = getFreshActiveContent();
+  // Filter to active-file nodes only (mirrors handleGroupSelection fix).
+  // A stale id from another file must not be passed to unwrap or it will
+  // fail with "conflict" even though the actual selection is valid.
+  const fileIds = new Set(files.map((f) => f.id));
+  const activeNodeIdSet = buildActiveFileNodeIdSet(
+    buildCodeLayerProjection(initialContent),
+  );
+  const targetIds = selectedLayerIdsState.filter(
+    (id) => !id.startsWith("__") && !fileIds.has(id) && activeNodeIdSet.has(id),
+  );
+  if (targetIds.length === 0) return;
+
+  let content = initialContent;
+  let anySucceeded = false;
+  let lastFailureMessage: string | null = null;
+  const releasedChildAttrIds = new Set<string>();
+  for (const targetId of targetIds) {
+    // Resolve the container's current child data-attribute ids from a
+    // fresh projection of the running content so ids stay accurate across
+    // multiple sequential unwraps in this same loop.
+    const runningProjection = buildCodeLayerProjection(content);
+    const containerNode = runningProjection.nodes.find(
+      (n) =>
+        n.dataAttributes["data-agent-native-node-id"] === targetId ||
+        n.id === targetId,
+    );
+    const childNodeIds = containerNode?.children ?? [];
+    const childAttrIds = childNodeIds
+      .map(
+        (childId) =>
+          runningProjection.nodes.find((n) => n.id === childId)?.dataAttributes[
+            "data-agent-native-node-id"
+          ],
+      )
+      .filter((attrId): attrId is string => Boolean(attrId));
+
+    const patch = applyVisualEdit(content, {
+      kind: "unwrap",
+      targetId,
+    });
+    if (patch.result.status !== "applied") {
+      lastFailureMessage = patch.result.message ?? lastFailureMessage;
+      continue;
+    }
+    content = patch.content;
+    anySucceeded = true;
+    childAttrIds.forEach((attrId) => releasedChildAttrIds.add(attrId));
+  }
+
+  if (!anySucceeded) {
+    toast.error(
+      codeLayerPatchMessage(
+        lastFailureMessage,
+        t("designEditor.toasts.layerMoveFailed"),
+      ),
+      { duration: 4000 },
+    );
+    return;
+  }
+  if (lastFailureMessage) {
+    toast.error(
+      codeLayerPatchMessage(
+        lastFailureMessage,
+        t("designEditor.toasts.layerMoveFailed"),
+      ),
+      { duration: 4000 },
+    );
+  }
+
+  applyLocalContentUpdate(content, { skipPreview: true });
+
+  const finalProjection = buildCodeLayerProjection(content);
+  const releasedNodes = finalProjection.nodes.filter((n) => {
+    const attrId = n.dataAttributes["data-agent-native-node-id"];
+    return attrId ? releasedChildAttrIds.has(attrId) : false;
+  });
+  if (releasedNodes.length > 0) {
+    setSelectedLayerIdsState(releasedNodes.map((n) => n.id));
+    const lastReleasedNode = releasedNodes[releasedNodes.length - 1];
+    if (lastReleasedNode) {
+      setSelectedElement(elementInfoFromCodeLayerNode(lastReleasedNode));
+    }
+  } else {
+    setSelectedElement(null);
+    setSelectedLayerIdsState([]);
+  }
+}

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

@@ -0,0 +1,119 @@
+import { buildCodeLayerProjection } 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 { insertClonedHtmlLayer } from "@/pages/design-editor/clone-and-pen-edit";
+import {
+  bridgeSourceIdForCodeLayerNode,
+  codeLayerSelectorAliases,
+  elementInfoFromCodeLayerNode,
+  preferredCodeLayerSelector,
+  resolveCodeLayerNodeFromBridge,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface VisualDuplicateChangeArgs {
+  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;
+  canEditDesign: boolean;
+  getFreshActiveContent: () => string;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runVisualDuplicateChange(
+  {
+    activeFile,
+    applyLocalContentUpdate,
+    canEditDesign,
+    getFreshActiveContent,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    t,
+  }: VisualDuplicateChangeArgs,
+  selector: string,
+  cloneHtml: string,
+  elementInfo?: ElementInfo,
+  details?: {
+    sourceId?: string;
+    anchorSelector?: string;
+    anchorSourceId?: string;
+    placement?: "before" | "after" | "inside";
+  },
+) {
+  if (!canEditDesign) return false;
+  if (!activeFile) return false;
+  const baseContent = getFreshActiveContent();
+  const projection = buildCodeLayerProjection(baseContent);
+  const targetInfo = elementInfo
+    ? {
+        ...elementInfo,
+        selector,
+        sourceId: details?.sourceId ?? elementInfo.sourceId,
+      }
+    : null;
+  const targetNode = targetInfo
+    ? resolveCodeLayerNodeFromElementInfo(projection, targetInfo)
+    : resolveCodeLayerNodeFromBridge(projection, selector, details?.sourceId);
+  const anchorNode = resolveCodeLayerNodeFromBridge(
+    projection,
+    details?.anchorSelector,
+    details?.anchorSourceId,
+  );
+  const nextContent = insertClonedHtmlLayer(baseContent, cloneHtml, {
+    targetSelectors: targetNode
+      ? codeLayerSelectorAliases(targetNode)
+      : [selector],
+    anchorSelectors: anchorNode
+      ? codeLayerSelectorAliases(anchorNode)
+      : details?.anchorSelector
+        ? [details.anchorSelector]
+        : undefined,
+    placement: details?.placement ?? "after",
+  });
+  if (!nextContent) {
+    toast.error(t("designEditor.toasts.layerMoveFailed"), {
+      duration: 4000,
+    });
+    return false;
+  }
+  // Structural insert: a selector-scoped push matches the live clone but
+  // not the re-keyed copy in the new source, and the bridge deletes what
+  // it cannot match.
+  applyLocalContentUpdate(nextContent, {
+    refreshPreview: false,
+    forcePreviewFullDocument: true,
+  });
+  const nextProjection = buildCodeLayerProjection(nextContent);
+  const nextNode = elementInfo
+    ? resolveCodeLayerNodeFromElementInfo(nextProjection, elementInfo)
+    : null;
+  if (nextNode) {
+    setSelectedLayerIdsState([nextNode.id]);
+    setSelectedElement({
+      ...(elementInfo ?? elementInfoFromCodeLayerNode(nextNode)),
+      sourceId: bridgeSourceIdForCodeLayerNode(nextNode),
+      selector: preferredCodeLayerSelector(nextNode),
+    });
+  } else if (elementInfo) {
+    setSelectedElement(elementInfo);
+  }
+  return true;
+}

package/corpus/templates/design/app/pages/design-editor/commands/visual-structure-change.ts

@@ -0,0 +1,274 @@
+import { stripBoardSurfaceOffsetFromCoord } from "@shared/board-file";
+import { applyVisualEdit, buildCodeLayerProjection } from "@shared/code-layer";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import { dndHostLog } from "@/components/design/dnd-debug";
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import {
+  bridgeSourceIdForCodeLayerNode,
+  codeLayerPatchMessage,
+  preferredCodeLayerSelector,
+  resolveCodeLayerNodeFromBridge,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import {
+  isAbsoluteCodeLayerNode,
+  removeAbsolutePositioningFromNodeInHtml,
+  setAbsolutePositioningForNodeInHtml,
+  setFlowPositioningOverrideForNodeInHtml,
+} from "@/pages/design-editor/html-layer-positioning";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface VisualStructureChangeArgs {
+  activeCanvasSourceType: "inline" | "localhost" | "fusion";
+  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;
+  canEditDesign: boolean;
+  getFreshActiveContent: () => string;
+  recordPendingLiveStructureEdit: (
+    screenId: string,
+    selector: string,
+    anchorSelector: string,
+    placement: "before" | "after" | "inside",
+    elementInfo?: ElementInfo,
+    details?: {
+      sourceId?: string;
+      anchorSourceId?: string;
+      anchorElementInfo?: ElementInfo;
+      requestId?: string;
+      dropMode?: "flow-insert" | "absolute-container";
+      forceFlowPositionOverride?: boolean;
+      sourceRect?: { x: number; y: number; width: number; height: number };
+      anchorRect?: { x: number; y: number; width: number; height: number };
+      insertedHtml?: string;
+      replaced?: true;
+      replacementSelector?: string;
+      replacementSourceId?: string;
+      removed?: true;
+    },
+  ) => void;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runVisualStructureChange(
+  {
+    activeCanvasSourceType,
+    activeFile,
+    applyLocalContentUpdate,
+    canEditDesign,
+    getFreshActiveContent,
+    recordPendingLiveStructureEdit,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    t,
+  }: VisualStructureChangeArgs,
+  selector: string,
+  anchorSelector: string,
+  placement: "before" | "after" | "inside",
+  elementInfo?: ElementInfo,
+  details?: {
+    sourceId?: string;
+    anchorSourceId?: string;
+    anchorElementInfo?: ElementInfo;
+    requestId?: string;
+    dropMode?: "flow-insert" | "absolute-container";
+    forceFlowPositionOverride?: boolean;
+    sourceRect?: { x: number; y: number; width: number; height: number };
+    anchorRect?: { x: number; y: number; width: number; height: number };
+    /** Markup this change introduced; the subject does not exist in the
+     * screen's source yet, so it must be added rather than relocated. */
+    insertedHtml?: string;
+    replaced?: true;
+    replacementSelector?: string;
+    replacementSourceId?: string;
+  },
+) {
+  dndHostLog("persist:begin", {
+    selector,
+    anchorSelector,
+    placement,
+    dropMode: details?.dropMode,
+    source: activeCanvasSourceType,
+  });
+  if (!canEditDesign) return false;
+  if (!activeFile) return false;
+  if (activeCanvasSourceType === "localhost") {
+    recordPendingLiveStructureEdit(
+      activeFile.id,
+      selector,
+      anchorSelector,
+      placement,
+      elementInfo,
+      details,
+    );
+    return "pending";
+  }
+  const baseContent = getFreshActiveContent();
+  const projection = buildCodeLayerProjection(baseContent);
+  const resolveBridgeNode = (targetSelector: string, sourceId?: string) =>
+    resolveCodeLayerNodeFromBridge(projection, targetSelector, sourceId);
+  const targetInfo = elementInfo
+    ? {
+        ...elementInfo,
+        selector,
+        sourceId: details?.sourceId ?? elementInfo.sourceId,
+      }
+    : null;
+  const targetNode = targetInfo
+    ? resolveCodeLayerNodeFromElementInfo(projection, targetInfo)
+    : resolveBridgeNode(selector, details?.sourceId);
+  const anchorNode = resolveBridgeNode(anchorSelector, details?.anchorSourceId);
+  const patch = applyVisualEdit(baseContent, {
+    kind: "moveNode",
+    // Keep the bridge's stable source id on the fallback: resolving by
+    // selector alone fails for stamped nodes, and the resolver tries
+    // nodeId first before falling back to the selector anyway.
+    target: targetNode
+      ? { nodeId: targetNode.id }
+      : details?.sourceId
+        ? { nodeId: details.sourceId, selector }
+        : { selector },
+    anchor: anchorNode
+      ? { nodeId: anchorNode.id }
+      : details?.anchorSourceId
+        ? { nodeId: details.anchorSourceId, selector: anchorSelector }
+        : { selector: anchorSelector },
+    placement,
+  });
+  dndHostLog("persist:rewrite", {
+    status: patch.result.status,
+    message: patch.result.message,
+  });
+  if (patch.result.status !== "applied") {
+    toast.error(
+      codeLayerPatchMessage(
+        patch.result.message,
+        t("designEditor.toasts.layerMoveFailed"),
+      ),
+      { duration: 4000 },
+    );
+    return false;
+  }
+  const movedNodeAttrId =
+    targetNode?.dataAttributes["data-agent-native-node-id"] ??
+    details?.sourceId ??
+    elementInfo?.sourceId ??
+    (patch.result.after?.nodeId
+      ? patch.projection.nodes.find(
+          (node) => node.id === patch.result.after?.nodeId,
+        )?.dataAttributes["data-agent-native-node-id"]
+      : undefined);
+  // Absolute-container drops persist sourceRect − anchorRect (both
+  // measured in-iframe by the bridge AFTER its optimistic DOM move). On
+  // the BOARD surface, top-level elements carry the content-offset
+  // translate (+65536 — see embeddedContentOffsetStyle in
+  // DesignCanvas.tsx) while nested ones do not, and the bridge's
+  // rect-space delta math doesn't model that translate — the measured
+  // offset for a board nest comes out exactly one surface offset
+  // (65536px) away from the true parent-relative value and, persisted
+  // verbatim, parks the nested child off-world. Strip that fingerprint
+  // before persisting (a no-op for screens and for sane offsets), and
+  // when it fired, ALSO refresh the preview: the bridge's optimistic
+  // in-iframe placement was off by the same 65536, so the iframe must be
+  // re-rendered from the corrected content instead of being trusted.
+  const rawAbsoluteContainerOffset =
+    details?.dropMode === "absolute-container" &&
+    details.sourceRect &&
+    details.anchorRect
+      ? {
+          x: details.sourceRect.x - details.anchorRect.x,
+          y: details.sourceRect.y - details.anchorRect.y,
+        }
+      : null;
+  const absoluteContainerOffset = rawAbsoluteContainerOffset
+    ? {
+        x: stripBoardSurfaceOffsetFromCoord(rawAbsoluteContainerOffset.x),
+        y: stripBoardSurfaceOffsetFromCoord(rawAbsoluteContainerOffset.y),
+      }
+    : null;
+  const absoluteOffsetWasPoisoned = Boolean(
+    rawAbsoluteContainerOffset &&
+    absoluteContainerOffset &&
+    (rawAbsoluteContainerOffset.x !== absoluteContainerOffset.x ||
+      rawAbsoluteContainerOffset.y !== absoluteContainerOffset.y),
+  );
+  const nextContent =
+    movedNodeAttrId && details?.dropMode === "absolute-container"
+      ? absoluteContainerOffset
+        ? setAbsolutePositioningForNodeInHtml(
+            patch.content,
+            movedNodeAttrId,
+            absoluteContainerOffset,
+          )
+        : patch.content
+      : movedNodeAttrId &&
+          details?.dropMode === "flow-insert" &&
+          details.forceFlowPositionOverride
+        ? setFlowPositioningOverrideForNodeInHtml(
+            patch.content,
+            movedNodeAttrId,
+          )
+        : isAbsoluteCodeLayerNode(targetNode) && movedNodeAttrId
+          ? removeAbsolutePositioningFromNodeInHtml(
+              patch.content,
+              movedNodeAttrId,
+            )
+          : patch.content;
+  const nextProjection = buildCodeLayerProjection(nextContent);
+  const movedNode =
+    (movedNodeAttrId
+      ? nextProjection.nodes.find(
+          (node) =>
+            node.dataAttributes["data-agent-native-node-id"] ===
+            movedNodeAttrId,
+        )
+      : null) ??
+    (patch.result.after?.nodeId
+      ? nextProjection.nodes.find(
+          (node) => node.id === patch.result.after?.nodeId,
+        )
+      : null) ??
+    resolveCodeLayerNodeFromBridge(
+      nextProjection,
+      selector,
+      details?.sourceId ??
+        elementInfo?.sourceId ??
+        (targetNode ? bridgeSourceIdForCodeLayerNode(targetNode) : undefined),
+    );
+  applyLocalContentUpdate(
+    nextContent,
+    absoluteOffsetWasPoisoned
+      ? { forcePreviewFullDocument: true }
+      : { skipPreview: true },
+  );
+  if (movedNode) setSelectedLayerIdsState([movedNode.id]);
+  if (elementInfo) {
+    setSelectedElement({
+      ...elementInfo,
+      sourceId: movedNode
+        ? bridgeSourceIdForCodeLayerNode(movedNode)
+        : elementInfo.sourceId,
+      selector: movedNode
+        ? preferredCodeLayerSelector(movedNode)
+        : elementInfo.selector,
+    });
+  }
+  return true;
+}

package/corpus/templates/design/app/pages/design-editor/commands/write-frame-geometry-snapshot.ts

@@ -0,0 +1,99 @@
+import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import type { QueryClient } from "@tanstack/react-query";
+import type { RefObject } from "react";
+
+import type { DesignDataOperation } from "@/pages/design-editor/data-operations";
+import {
+  applyDesignDataOperations,
+  buildFrameGeometryDataOperations,
+  compactDesignDataOperations,
+} from "@/pages/design-editor/data-operations";
+import {
+  cloneCanvasFrameGeometry,
+  getCanvasFrameGeometry,
+} from "@/pages/design-editor/design-data-geometry-utils";
+import { sanitizeCanvasFrameGeometryForPersist } from "@/pages/design-editor/geometry-persistence";
+
+export interface WriteFrameGeometrySnapshotArgs {
+  boardFileId: string | undefined;
+  canEditDesignRef: RefObject<boolean>;
+  designDataJsonRef: RefObject<Record<string, unknown>>;
+  enqueueFrameGeometryDataSave: (
+    dataOperations: DesignDataOperation[],
+  ) => boolean;
+  frameGeometrySaveTimerRef: RefObject<number | null>;
+  id: string | undefined;
+  pendingFrameGeometrySaveRef: RefObject<{
+    geometryById: CanvasFrameGeometryById;
+    previousGeometry: CanvasFrameGeometryById;
+  } | null>;
+  queryClient: QueryClient;
+}
+
+export function runWriteFrameGeometrySnapshot(
+  {
+    boardFileId,
+    canEditDesignRef,
+    designDataJsonRef,
+    enqueueFrameGeometryDataSave,
+    frameGeometrySaveTimerRef,
+    id,
+    pendingFrameGeometrySaveRef,
+    queryClient,
+  }: WriteFrameGeometrySnapshotArgs,
+  geometryById: CanvasFrameGeometryById,
+  options?: {
+    syncViewportFrameIds?: string[];
+    pinHeightFrameIds?: string[];
+  },
+) {
+  if (!id || !canEditDesignRef.current) return;
+  const queuedSave = pendingFrameGeometrySaveRef.current;
+  if (frameGeometrySaveTimerRef.current !== null) {
+    window.clearTimeout(frameGeometrySaveTimerRef.current);
+    frameGeometrySaveTimerRef.current = null;
+  }
+  pendingFrameGeometrySaveRef.current = null;
+  // Geometry-persist guard — same contract as queueFrameGeometrySave:
+  // never let absurd frame geometry (a corrupted zoom basis' product)
+  // reach canvasFrames or the screenMetadata viewport sync below.
+  const { geometryById: safeGeometryById } =
+    sanitizeCanvasFrameGeometryForPersist(
+      geometryById,
+      getCanvasFrameGeometry(designDataJsonRef.current),
+      boardFileId ? [boardFileId] : [],
+    );
+  const snapshot = cloneCanvasFrameGeometry(safeGeometryById);
+  const queuedOperations = queuedSave
+    ? buildFrameGeometryDataOperations({
+        previousGeometry: queuedSave.previousGeometry,
+        nextGeometry: sanitizeCanvasFrameGeometryForPersist(
+          queuedSave.geometryById,
+          queuedSave.previousGeometry,
+          boardFileId ? [boardFileId] : [],
+        ).geometryById,
+        designData: designDataJsonRef.current,
+      })
+    : [];
+  const dataOperations = compactDesignDataOperations([
+    ...queuedOperations,
+    ...buildFrameGeometryDataOperations({
+      previousGeometry: getCanvasFrameGeometry(designDataJsonRef.current),
+      nextGeometry: snapshot,
+      designData: designDataJsonRef.current,
+      syncViewportFrameIds: options?.syncViewportFrameIds,
+      pinHeightFrameIds: options?.pinHeightFrameIds,
+    }),
+  ]);
+  if (dataOperations.length === 0) return;
+  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) };
+  });
+  enqueueFrameGeometryDataSave(dataOperations);
+}