@agent-native/core 0.163.4 → 0.164.3

package/corpus/templates/design/app/pages/design-editor/commands/escape-hotkey.ts

@@ -0,0 +1,212 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { ElementInfo } from "@/components/design/types";
+import {
+  collectCodeLayerAncestors,
+  elementInfoFromCodeLayerNode,
+} from "@/pages/design-editor/code-layer-state";
+import {
+  hasSelectableCodeLayerParent,
+  resolveEscapePopSelectionAction,
+  shouldEscapeToOverview,
+} from "@/pages/design-editor/selection-state";
+import type { DesignTool, EditorMode } from "@/pages/design-editor/types";
+
+export interface EscapeHotkeyArgs {
+  activeBreakpointWidthStateRef: RefObject<number | undefined>;
+  activeTool: DesignTool;
+  cancelActiveEditorDrag: () => boolean;
+  codeLayerOwnerByNodeIdRef: RefObject<
+    Map<
+      string,
+      {
+        fileId: string;
+        node: CodeLayerNode;
+        tree: CodeLayerTreeNode[];
+        runtimeOnly: boolean;
+      }
+    >
+  >;
+  drawMode: boolean;
+  enterOverviewFromZoom: (nextMode?: EditorMode) => void;
+  focusedAnnotationSending: boolean;
+  handleBreakpointBarSelect: (widthPx: number | undefined) => void;
+  handleCloseKeyboardShortcuts: () => void;
+  handleExitFocusedDrawMode: () => void;
+  handleExitOverviewDrawMode: () => void;
+  keyboardShortcutsOpen: boolean;
+  mode: EditorMode;
+  overviewAnnotationSending: boolean;
+  pinMode: boolean;
+  selectedElement: ElementInfo | null;
+  selectedLayerIdsState: string[];
+  setActiveFileId: Dispatch<SetStateAction<string | null>>;
+  setActiveTool: Dispatch<SetStateAction<DesignTool>>;
+  setDrawMode: Dispatch<SetStateAction<boolean>>;
+  setExpandedLayerIds: Dispatch<SetStateAction<string[]>>;
+  setHoveredElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setMode: Dispatch<SetStateAction<EditorMode>>;
+  setOverviewClearSelectionRequest: Dispatch<SetStateAction<number>>;
+  setOverviewSelectedScreenIds: Dispatch<SetStateAction<string[]>>;
+  setPinMode: Dispatch<SetStateAction<boolean>>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  viewMode: "single" | "overview";
+}
+
+export function runEscapeHotkey({
+  activeBreakpointWidthStateRef,
+  activeTool,
+  cancelActiveEditorDrag,
+  codeLayerOwnerByNodeIdRef,
+  drawMode,
+  enterOverviewFromZoom,
+  focusedAnnotationSending,
+  handleBreakpointBarSelect,
+  handleCloseKeyboardShortcuts,
+  handleExitFocusedDrawMode,
+  handleExitOverviewDrawMode,
+  keyboardShortcutsOpen,
+  mode,
+  overviewAnnotationSending,
+  pinMode,
+  selectedElement,
+  selectedLayerIdsState,
+  setActiveFileId,
+  setActiveTool,
+  setDrawMode,
+  setExpandedLayerIds,
+  setHoveredElement,
+  setMode,
+  setOverviewClearSelectionRequest,
+  setOverviewSelectedScreenIds,
+  setPinMode,
+  setSelectedElement,
+  setSelectedLayerIdsState,
+  viewMode,
+}: EscapeHotkeyArgs) {
+  if (keyboardShortcutsOpen) {
+    handleCloseKeyboardShortcuts();
+    return;
+  }
+  if (cancelActiveEditorDrag()) return;
+  // A delivery-confirmation wait freezes the complete annotation batch.
+  // Escape must not clear it while the submitted snapshot is in flight.
+  if (overviewAnnotationSending || focusedAnnotationSending) return;
+  // Escape is a deliberate annotate-mode exit, same as the overlay's X.
+  // Route it through the same per-surface clear semantics instead of merely
+  // hiding the overlay and leaving a stale batch to reappear later.
+  if (drawMode && mode === "annotate") {
+    if (viewMode === "overview") handleExitOverviewDrawMode();
+    else handleExitFocusedDrawMode();
+    return;
+  }
+  // ReviewCanvasPins owns Escape while comment mode is active so it can
+  // dismiss in context: first an open draft/thread, then pin mode itself.
+  // Letting this global handler continue would exit the tool on the same
+  // keypress that only meant to close the composer.
+  if (pinMode) return;
+  // BP-DEEP item 5 — Framer-style click-to-target: Escape's first job when
+  // a breakpoint is the active edit target is to return to Base, matching
+  // "click the base frame / empty canvas" — mirrors the other early-return
+  // priority checks above/below (cancelActiveEditorDrag,
+  // shouldEscapeToOverview) that let one Escape press consume the single
+  // most contextually-relevant action instead of stacking every effect.
+  // Gated on the ref (not the state) so this callback doesn't need
+  // activeBreakpointWidthState as a dep and doesn't get recreated (and
+  // re-registered with useDesignHotkeys) on every breakpoint switch.
+  if (activeBreakpointWidthStateRef.current !== undefined) {
+    handleBreakpointBarSelect(undefined);
+    return;
+  }
+  if (
+    shouldEscapeToOverview({
+      activeTool,
+      drawMode,
+      mode,
+      pinMode,
+      selectedElement,
+      viewMode,
+    })
+  ) {
+    enterOverviewFromZoom();
+    return;
+  }
+  // Figma parity — pop the plain-canvas selection one level at a time
+  // (child layer -> parent layer -> containing screen/frame -> fully
+  // deselected) instead of deselecting everything on the first Escape.
+  // The decision itself is a pure, unit-tested function
+  // (resolveEscapePopSelectionAction in design-editor/selection-state.ts);
+  // this reuses the same codeLayerOwnerByNodeIdRef/parentId ancestor walk
+  // handleSelectParentLayer (Shift+Enter / "\\") already uses, inlined
+  // here (rather than calling selectCodeLayerNodesForHotkey directly)
+  // since that helper is declared later in this component and referencing
+  // it from this callback's deps would hit its temporal-dead-zone before
+  // this render's declarations run.
+  const escapeSelectedLayerId =
+    selectedLayerIdsState[selectedLayerIdsState.length - 1];
+  const escapeOwner = escapeSelectedLayerId
+    ? codeLayerOwnerByNodeIdRef.current.get(escapeSelectedLayerId)
+    : undefined;
+  // BUG-ESCAPE-SHELL: the flat codeLayerOwnerByNodeIdRef map (built from
+  // projection.nodes) still contains <html>/<body> entries with real
+  // parentId links even though the VISUAL layers tree collapses them away
+  // (shared/code-layer.ts's isCollapsibleDocumentShellNode). A bare
+  // Boolean(escapeOwner?.node.parentId) check treats a top-level layer's
+  // collapsed <body> ancestor as a selectable parent, so popping from the
+  // screen root would select <body> then <html> instead of stopping at the
+  // screen/frame level. hasSelectableCodeLayerParent excludes those shell
+  // nodes so the pop walk matches what the layers panel shows.
+  const escapeParentOwner = escapeOwner?.node.parentId
+    ? codeLayerOwnerByNodeIdRef.current.get(escapeOwner.node.parentId)
+    : undefined;
+  const popAction = resolveEscapePopSelectionAction({
+    hasSelectedLayer: Boolean(escapeOwner),
+    hasLayerParent: hasSelectableCodeLayerParent({
+      parentNode: escapeParentOwner?.node,
+    }),
+    viewMode,
+  });
+  if (popAction.kind === "pop-to-parent-layer" && escapeOwner) {
+    const parentOwner = escapeParentOwner;
+    if (parentOwner && parentOwner.fileId === escapeOwner.fileId) {
+      setActiveFileId(parentOwner.fileId);
+      setOverviewSelectedScreenIds([]);
+      setSelectedLayerIdsState([parentOwner.node.id]);
+      setSelectedElement(elementInfoFromCodeLayerNode(parentOwner.node));
+      setExpandedLayerIds((current) => {
+        const next = new Set(current);
+        next.add(parentOwner.fileId);
+        collectCodeLayerAncestors(
+          parentOwner.tree,
+          parentOwner.node.id,
+        ).forEach((ancestorId) => next.add(ancestorId));
+        return next.size === current.length ? current : Array.from(next);
+      });
+      return;
+    }
+    // Parent couldn't be resolved (e.g. cross-file) — fall through to a
+    // full deselect below rather than silently doing nothing.
+  } else if (popAction.kind === "pop-to-screen-frame" && escapeOwner) {
+    setSelectedElement(null);
+    setSelectedLayerIdsState([]);
+    setOverviewSelectedScreenIds([escapeOwner.fileId]);
+    setOverviewClearSelectionRequest((request) => request + 1);
+    return;
+  }
+  setSelectedElement(null);
+  setHoveredElement(null);
+  setOverviewSelectedScreenIds([]);
+  // Item 10 — Escape must also clear a multi-layer selection
+  // (selectedLayerIdsState), not just the single selectedElement /
+  // overviewSelectedScreenIds above. Without this, pressing Escape after a
+  // multi-layer marquee/shift-click selection left the layers panel
+  // showing stale selected rows even though the canvas selection was gone.
+  setSelectedLayerIdsState([]);
+  setOverviewClearSelectionRequest((request) => request + 1);
+  setDrawMode(false);
+  setPinMode(false);
+  setActiveTool("move");
+  setMode("edit");
+}

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

@@ -0,0 +1,119 @@
+import { applyVisualEdit, 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 {
+  codeLayerPatchMessage,
+  elementInfoFromCodeLayerNode,
+} from "@/pages/design-editor/code-layer-state";
+import { setCodeLayerAttributeInHtml } from "@/pages/design-editor/html-layer-positioning";
+import { buildActiveFileNodeIdSet } from "@/pages/design-editor/selection-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface FrameSelectionArgs {
+  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;
+  files: DesignFile[];
+  getFreshActiveContent: () => string;
+  selectedLayerIdsState: string[];
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runFrameSelection({
+  activeFile,
+  applyLocalContentUpdate,
+  canEditDesign,
+  files,
+  getFreshActiveContent,
+  selectedLayerIdsState,
+  setSelectedElement,
+  setSelectedLayerIdsState,
+  t,
+}: FrameSelectionArgs) {
+  if (!canEditDesign || !activeFile) return;
+  const baseContent = getFreshActiveContent();
+  const fileIds = new Set(files.map((f) => f.id));
+  const activeNodeIdSet = buildActiveFileNodeIdSet(
+    buildCodeLayerProjection(baseContent),
+  );
+  const nodeIds = selectedLayerIdsState.filter(
+    (id) => !id.startsWith("__") && !fileIds.has(id) && activeNodeIdSet.has(id),
+  );
+  if (nodeIds.length < 1) return;
+  const patch = applyVisualEdit(baseContent, {
+    kind: "wrapNodes",
+    targetIds: nodeIds,
+    autoLayout: false,
+  });
+  if (patch.result.status !== "applied") {
+    toast.error(
+      codeLayerPatchMessage(
+        patch.result.message,
+        t("designEditor.toasts.layerMoveFailed"),
+      ),
+      { duration: 4000 },
+    );
+    return;
+  }
+  let nextContent = patch.content;
+  let wrapperNode = patch.result.wrapperNodeId
+    ? patch.projection.nodes.find(
+        (n) =>
+          n.dataAttributes["data-agent-native-node-id"] ===
+          patch.result.wrapperNodeId,
+      )
+    : undefined;
+  if (wrapperNode) {
+    const renamed = setCodeLayerAttributeInHtml(
+      nextContent,
+      wrapperNode,
+      "data-agent-native-layer-name",
+      "Frame",
+    );
+    if (renamed) nextContent = renamed;
+    const taggedProjection = buildCodeLayerProjection(nextContent);
+    const taggedNode = taggedProjection.nodes.find(
+      (n) =>
+        n.dataAttributes["data-agent-native-node-id"] ===
+        patch.result.wrapperNodeId,
+    );
+    if (taggedNode) {
+      const tagged = setCodeLayerAttributeInHtml(
+        nextContent,
+        taggedNode,
+        "data-an-primitive",
+        "frame",
+      );
+      if (tagged) nextContent = tagged;
+    }
+    wrapperNode =
+      buildCodeLayerProjection(nextContent).nodes.find(
+        (n) =>
+          n.dataAttributes["data-agent-native-node-id"] ===
+          patch.result.wrapperNodeId,
+      ) ?? wrapperNode;
+  }
+  applyLocalContentUpdate(nextContent, { skipPreview: true });
+  if (wrapperNode) {
+    setSelectedLayerIdsState([wrapperNode.id]);
+    setSelectedElement(elementInfoFromCodeLayerNode(wrapperNode));
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/geometry-commit.ts

@@ -0,0 +1,169 @@
+import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import type { QueryClient } from "@tanstack/react-query";
+import type { RefObject } from "react";
+
+import {
+  cloneCanvasFrameGeometry,
+  viewportChangedFrameIds,
+} from "@/pages/design-editor/design-data-geometry-utils";
+import type { UndoRedoOrderKind } from "@/pages/design-editor/editor-state";
+import {
+  geometrySnapshotsEqual,
+  sanitizeCanvasFrameGeometryForPersist,
+} from "@/pages/design-editor/geometry-persistence";
+import type {
+  GeometryHistoryEntry,
+  GeometryHistorySelection,
+} from "@/pages/design-editor/history";
+import { MAX_DESIGN_UNDO_STACK } from "@/pages/design-editor/history";
+
+export interface GeometryCommitArgs {
+  boardFileId: string | undefined;
+  captureCurrentSelection: () => GeometryHistorySelection;
+  clearRedoStacks: () => void;
+  designDataJsonRef: RefObject<Record<string, unknown>>;
+  geometryUndoStackRef: RefObject<GeometryHistoryEntry[]>;
+  historyOrderRef: RefObject<UndoRedoOrderKind[]>;
+  id: string | undefined;
+  lastGeometryCommitAtRef: RefObject<number>;
+  locallyPinnedHeightIdsRef: RefObject<Set<string>>;
+  queryClient: QueryClient;
+  queueFrameGeometrySave: (geometryById: CanvasFrameGeometryById) => void;
+  syncUndoRedoState: () => void;
+  writeFrameGeometrySnapshot: (
+    geometryById: CanvasFrameGeometryById,
+    options?: { syncViewportFrameIds?: string[]; pinHeightFrameIds?: string[] },
+  ) => void;
+}
+
+export function runGeometryCommit(
+  {
+    boardFileId,
+    captureCurrentSelection,
+    clearRedoStacks,
+    designDataJsonRef,
+    geometryUndoStackRef,
+    historyOrderRef,
+    id,
+    lastGeometryCommitAtRef,
+    locallyPinnedHeightIdsRef,
+    queryClient,
+    queueFrameGeometrySave,
+    syncUndoRedoState,
+    writeFrameGeometrySnapshot,
+  }: GeometryCommitArgs,
+  before: CanvasFrameGeometryById,
+  after: CanvasFrameGeometryById,
+  options?: { source?: "pointer" | "keyboard" },
+) {
+  const beforeSnapshot = cloneCanvasFrameGeometry(before);
+  // Geometry-persist guard: refuse absurd committed geometry HERE (not
+  // only inside the save functions) so the undo stack and the mid-gesture
+  // query-cache write below stay consistent with what actually persists —
+  // an insane frame falls back to its own pre-gesture geometry, and a
+  // commit whose every change was refused becomes a no-op.
+  const { geometryById: afterSnapshot } = sanitizeCanvasFrameGeometryForPersist(
+    cloneCanvasFrameGeometry(after),
+    beforeSnapshot,
+    boardFileId ? [boardFileId] : [],
+  );
+  if (geometrySnapshotsEqual(beforeSnapshot, afterSnapshot)) {
+    return;
+  }
+  // U9: keyboard nudge (arrow-key auto-repeat) fires one onGeometryCommit
+  // per tick, each previously pushing its own undo entry AND its own
+  // immediate (non-debounced) server write — a held arrow key could evict
+  // the 50-entry undo cap in well under a second and hammer the server.
+  // Coalesce consecutive commits into one undo entry (mirroring Yjs's own
+  // captureTimeout) when the new commit continues straight from the last
+  // one (same "before" as the prior "after") within a ~800ms window, and
+  // route the write through the same debounced save queue used for drags
+  // instead of firing an immediate mutation per tick.
+  //
+  // This coalescing must only apply to KEYBOARD nudge auto-repeat, not to
+  // two independent pointer gestures (e.g. two separate drags) that
+  // happen to land within the same 800ms window — those are discrete
+  // user actions and each must be its own undo step, matching Figma.
+  // MultiScreenCanvas's onGeometryCommit callback (a real pointer drag)
+  // omits `options`, so it defaults to "pointer" and never coalesces;
+  // only handleNudgeSelection's overview branch passes "keyboard".
+  const source = options?.source ?? "pointer";
+  const now = Date.now();
+  const lastEntry =
+    geometryUndoStackRef.current[geometryUndoStackRef.current.length - 1];
+  const continuesLastGesture =
+    source === "keyboard" &&
+    lastEntry &&
+    now - lastGeometryCommitAtRef.current < 800 &&
+    geometrySnapshotsEqual(lastEntry.after, beforeSnapshot);
+  lastGeometryCommitAtRef.current = now;
+  // Figma-parity undo/redo selection restore: selectionAfter always
+  // reflects the CURRENT selection at this commit tick (so redo restores
+  // whatever was selected when the gesture finished), while
+  // selectionBefore is only captured on the FIRST tick of a gesture and
+  // then carried forward unchanged through every coalesced continuation —
+  // otherwise a held arrow key would keep overwriting selectionBefore
+  // with the selection at the START of each individual tick instead of
+  // the whole gesture's actual starting selection.
+  const selectionAfter = captureCurrentSelection();
+  if (continuesLastGesture) {
+    geometryUndoStackRef.current = [
+      ...geometryUndoStackRef.current.slice(0, -1),
+      {
+        before: lastEntry.before,
+        after: afterSnapshot,
+        selectionBefore: lastEntry.selectionBefore,
+        selectionAfter,
+      },
+    ];
+  } else {
+    geometryUndoStackRef.current = [
+      ...geometryUndoStackRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+      {
+        before: beforeSnapshot,
+        after: afterSnapshot,
+        selectionBefore: selectionAfter,
+        selectionAfter,
+      },
+    ];
+  }
+  clearRedoStacks();
+  historyOrderRef.current = continuesLastGesture
+    ? historyOrderRef.current
+    : [
+        ...historyOrderRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+        "geometry",
+      ];
+  const resizedFrameIds = viewportChangedFrameIds(
+    beforeSnapshot,
+    afterSnapshot,
+  );
+  if (continuesLastGesture) {
+    // Mid-gesture tick: keep the query cache current for a responsive
+    // canvas, but debounce the actual network write so a held key
+    // doesn't send one mutation per tick.
+    queryClient.setQueryData(["action", "get-design", { id }], (old: any) => {
+      if (!old || typeof old !== "object") return old;
+      const nextData = {
+        ...designDataJsonRef.current,
+        canvasFrames: afterSnapshot,
+      };
+      return { ...old, data: JSON.stringify(nextData) };
+    });
+    queueFrameGeometrySave(afterSnapshot);
+  } else {
+    writeFrameGeometrySnapshot(
+      afterSnapshot,
+      resizedFrameIds.length > 0
+        ? (resizedFrameIds.forEach((frameId) =>
+            locallyPinnedHeightIdsRef.current.add(frameId),
+          ),
+          {
+            syncViewportFrameIds: resizedFrameIds,
+            pinHeightFrameIds: resizedFrameIds,
+          })
+        : undefined,
+    );
+  }
+  syncUndoRedoState();
+}

package/corpus/templates/design/app/pages/design-editor/commands/get-selected-layer-snapshots.ts

@@ -0,0 +1,177 @@
+import {
+  buildCodeLayerProjection,
+  buildCodeLayerTree,
+} from "@shared/code-layer";
+
+import type { ElementInfo } from "@/components/design/types";
+import { extractDesignClipboardManagedStyles } from "@/lib/design-clipboard-managed-styles";
+import { resolveClipboardLayerSourceHtml } from "@/pages/design-editor/clipboard-layer-source";
+import { getElementOuterHtml } from "@/pages/design-editor/clone-and-pen-edit";
+import {
+  collectCodeLayerAncestors,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import type {
+  LiveScreenSnapshot,
+  RuntimeLayerSnapshot,
+  SelectedCanvasLayerSnapshot,
+} from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { shouldUseRuntimeLayerProjection } from "@/pages/design-editor/pending-edits";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface GetSelectedLayerSnapshotsArgs {
+  activeFile: DesignFile;
+  designSourceType: "inline" | "localhost" | "fusion";
+  files: DesignFile[];
+  getFreshActiveContent: () => string;
+  getScreenContent: (screenId: string) => string;
+  liveScreenSnapshotsById: Record<string, LiveScreenSnapshot>;
+  overviewScreens: OverviewScreen[];
+  runtimeLayerSnapshotsById: Record<string, RuntimeLayerSnapshot>;
+  selectedElement: ElementInfo | null;
+  selectedElementLayerId: string | null;
+  selectedLayerIdsState: string[];
+}
+
+export function runGetSelectedLayerSnapshots({
+  activeFile,
+  designSourceType,
+  files,
+  getFreshActiveContent,
+  getScreenContent,
+  liveScreenSnapshotsById,
+  overviewScreens,
+  runtimeLayerSnapshotsById,
+  selectedElement,
+  selectedElementLayerId,
+  selectedLayerIdsState,
+}: GetSelectedLayerSnapshotsArgs) {
+  const fileIds = new Set(files.map((file) => file.id));
+  const candidateIds = selectedLayerIdsState.filter(
+    (layerId) => layerId && !layerId.startsWith("__") && !fileIds.has(layerId),
+  );
+  if (
+    selectedElementLayerId &&
+    !candidateIds.includes(selectedElementLayerId)
+  ) {
+    candidateIds.push(selectedElementLayerId);
+  }
+
+  const snapshots: SelectedCanvasLayerSnapshot[] = [];
+  for (const file of files) {
+    // A hydrated localhost app has two snapshots: `/snapshot` is the source
+    // or SSR shell, while the runtime layer snapshot is the DOM the user can
+    // actually see and select. Layers already prefers that rendered tree, so
+    // Copy must resolve against the same id namespace or client-rendered
+    // React/Vue/Svelte nodes silently produce an empty clipboard.
+    const runtimeProjectionEligible = shouldUseRuntimeLayerProjection({
+      screen: overviewScreens.find((screen) => screen.id === file.id),
+      fallbackSourceType: designSourceType,
+      content: file.content ?? "",
+    });
+    const runtimeSnapshot = runtimeProjectionEligible
+      ? runtimeLayerSnapshotsById[file.id]
+      : undefined;
+    const content = resolveClipboardLayerSourceHtml({
+      runtimeProjectionEligible,
+      runtimeSnapshot,
+      liveSnapshotHtml: liveScreenSnapshotsById[file.id]?.html,
+      storedContent: getScreenContent(file.id),
+    });
+    if (!content) continue;
+    const projection = buildCodeLayerProjection(content);
+    const tree = buildCodeLayerTree(projection);
+    for (const layerId of candidateIds) {
+      const node = projection.nodes.find(
+        (candidate) =>
+          candidate.id === layerId ||
+          candidate.dataAttributes["data-agent-native-node-id"] === layerId,
+      );
+      if (!node?.source) continue;
+      const html = content.slice(node.source.start, node.source.end);
+      const portableStyleSnapshot =
+        selectedElementLayerId &&
+        node.id === selectedElementLayerId &&
+        selectedElement?.portableStyleSnapshot
+          ? selectedElement.portableStyleSnapshot
+          : undefined;
+      snapshots.push({
+        html,
+        rootNodeId: node.dataAttributes["data-agent-native-node-id"] ?? node.id,
+        sourceFileId: file.id,
+        portableStyleSnapshot,
+        managedStyleSnapshot: extractDesignClipboardManagedStyles(
+          content,
+          html,
+        ),
+        node,
+        sourceIndex: node.source.start,
+        tree,
+      });
+    }
+  }
+
+  if (snapshots.length === 0 && activeFile && selectedElement?.selector) {
+    const runtimeProjectionEligible = shouldUseRuntimeLayerProjection({
+      screen: overviewScreens.find((screen) => screen.id === activeFile.id),
+      fallbackSourceType: designSourceType,
+      content: activeFile.content ?? "",
+    });
+    const runtimeSnapshot = runtimeProjectionEligible
+      ? runtimeLayerSnapshotsById[activeFile.id]
+      : undefined;
+    const content = resolveClipboardLayerSourceHtml({
+      runtimeProjectionEligible,
+      runtimeSnapshot,
+      liveSnapshotHtml: liveScreenSnapshotsById[activeFile.id]?.html,
+      storedContent: getFreshActiveContent(),
+    });
+    const projection = buildCodeLayerProjection(content);
+    const tree = buildCodeLayerTree(projection);
+    const node = resolveCodeLayerNodeFromElementInfo(
+      projection,
+      selectedElement,
+    );
+    const html = node?.source
+      ? content.slice(node.source.start, node.source.end)
+      : getElementOuterHtml(content, selectedElement.selector);
+    if (html && node) {
+      snapshots.push({
+        html,
+        rootNodeId:
+          node.dataAttributes["data-agent-native-node-id"] ??
+          selectedElement.sourceId ??
+          selectedElement.id,
+        sourceFileId: activeFile.id,
+        portableStyleSnapshot: selectedElement.portableStyleSnapshot,
+        managedStyleSnapshot: extractDesignClipboardManagedStyles(
+          content,
+          html,
+        ),
+        node,
+        sourceIndex: node.source?.start ?? Number.MAX_SAFE_INTEGER,
+        tree,
+      });
+    }
+  }
+
+  const selectedKeys = new Set(
+    snapshots.map((snapshot) => `${snapshot.sourceFileId}:${snapshot.node.id}`),
+  );
+  const topLevelSnapshots = snapshots.filter(
+    (snapshot) =>
+      !collectCodeLayerAncestors(snapshot.tree, snapshot.node.id).some(
+        (ancestorId) =>
+          selectedKeys.has(`${snapshot.sourceFileId}:${ancestorId}`),
+      ),
+  );
+  const fileOrder = new Map(files.map((file, index) => [file.id, index]));
+  return topLevelSnapshots.sort((a, b) => {
+    const fileDelta =
+      (fileOrder.get(a.sourceFileId) ?? 0) -
+      (fileOrder.get(b.sourceFileId) ?? 0);
+    if (fileDelta !== 0) return fileDelta;
+    return a.sourceIndex - b.sourceIndex;
+  });
+}