@agent-native/core 0.169.0 → 0.170.0

package/corpus/templates/design/app/pages/DesignSystems.tsx

@@ -26,6 +26,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from "react";
@@ -72,6 +73,12 @@ import {
 } from "@/lib/design-system-preview";
 
 import { QueryErrorState } from "../components/QueryErrorState";
+import {
+  builderRefreshKey,
+  parseDesignSystemData,
+  shouldRefreshBuilderDesignSystem,
+  type DesignSystemData,
+} from "../lib/design-system-data";
 
 interface DesignSystem {
   id: string;
@@ -88,29 +95,21 @@ interface DesignSystem {
   updatedAt?: string;
 }
 
-interface DesignSystemData {
-  colors?: {
-    primary?: unknown;
-    secondary?: unknown;
-    accent?: unknown;
-    background?: unknown;
-    surface?: unknown;
-    text?: unknown;
-    textMuted?: unknown;
-  };
-  typography?: {
-    headingFont?: unknown;
-    bodyFont?: unknown;
-    headingWeight?: unknown;
-    bodyWeight?: unknown;
-  };
-  spacing?: Record<string, unknown>;
-  borders?: Record<string, unknown>;
-  logos?: Array<{ url?: string; name?: string; variant?: string }>;
-  defaults?: Record<string, unknown>;
-  notes?: unknown;
-  /** The source system's own named vocabulary; absent on kits predating it. */
-  tokens?: unknown;
+type BuilderRefreshResult = {
+  synced: boolean;
+  status?: string;
+  rejectedTokenCount?: number;
+};
+
+function isTerminalBuilderStatus(status?: string): boolean {
+  return (
+    status === "ready" ||
+    status === "complete" ||
+    status === "completed" ||
+    status === "error" ||
+    status === "failed" ||
+    status === "cancelled"
+  );
 }
 
 export default function DesignSystems() {
@@ -132,6 +131,19 @@ export default function DesignSystems() {
   const setDefaultMutation = useActionMutation("set-default-design-system");
   const deleteMutation = useActionMutation("delete-design-system");
   const updateMutation = useActionMutation("update-design-system");
+  const refreshBuilderSystemMutation = useActionMutation<
+    BuilderRefreshResult,
+    { id: string }
+  >("refresh-design-system-with-builder", {
+    skipActionQueryInvalidation: true,
+  });
+  const refreshBuilderSystemRef = useRef(
+    refreshBuilderSystemMutation.mutateAsync,
+  );
+  refreshBuilderSystemRef.current = refreshBuilderSystemMutation.mutateAsync;
+  const settledBuilderRefreshesRef = useRef(new Set<string>());
+  const stoppedBuilderRefreshesRef = useRef(new Set<string>());
+  const activeBuilderRefreshesRef = useRef(new Set<string>());
 
   const designSystems = data?.designSystems ?? [];
   const selectedDesignSystemId = searchParams.get("designSystemId");
@@ -362,13 +374,107 @@ export default function DesignSystems() {
       });
   }, [selectedSystemIds, queryClient, exitSelectionMode, deleteMutation, t]);
 
-  const parseData = (dataStr: string): DesignSystemData | null => {
-    try {
-      return JSON.parse(dataStr);
-    } catch {
-      return null;
+  useEffect(() => {
+    const builderSystemEntries = designSystems
+      .filter(shouldRefreshBuilderDesignSystem)
+      .map((system) => ({
+        id: system.id,
+        key: builderRefreshKey(system),
+      }))
+      .filter(
+        ({ key }) =>
+          !settledBuilderRefreshesRef.current.has(key) &&
+          !stoppedBuilderRefreshesRef.current.has(key) &&
+          !activeBuilderRefreshesRef.current.has(key),
+      );
+    if (builderSystemEntries.length === 0) return;
+
+    let disposed = false;
+    const timers: Array<ReturnType<typeof setTimeout>> = [];
+    const maxAttempts = 5;
+    const maxPolls = 3;
+    const retryDelayMs = 5_000;
+    const retryPollDelayMs = 30_000;
+
+    const scheduleRetry = (
+      entry: { id: string; key: string },
+      delayMs: number,
+      attempt: number,
+      pollCount: number,
+    ): void => {
+      if (disposed) return;
+      timers.push(
+        setTimeout(() => {
+          void refresh(entry, attempt, pollCount);
+        }, delayMs),
+      );
+    };
+
+    const refresh = async (
+      entry: { id: string; key: string },
+      attempt: number,
+      pollCount: number,
+    ): Promise<void> => {
+      try {
+        const result = await refreshBuilderSystemRef.current({ id: entry.id });
+        if (disposed) return;
+        if (result.synced) {
+          activeBuilderRefreshesRef.current.delete(entry.key);
+          settledBuilderRefreshesRef.current.add(entry.key);
+          await queryClient.invalidateQueries({
+            queryKey: ["action", "list-design-systems"],
+          });
+          return;
+        }
+        if (result.status === "conflict") {
+          activeBuilderRefreshesRef.current.delete(entry.key);
+          stoppedBuilderRefreshesRef.current.add(entry.key);
+          await queryClient.invalidateQueries({
+            queryKey: ["action", "list-design-systems"],
+          });
+          return;
+        }
+        if (result.status === "incomplete" || result.rejectedTokenCount) {
+          activeBuilderRefreshesRef.current.delete(entry.key);
+          stoppedBuilderRefreshesRef.current.add(entry.key);
+          return;
+        }
+        if (isTerminalBuilderStatus(result.status)) {
+          activeBuilderRefreshesRef.current.delete(entry.key);
+          settledBuilderRefreshesRef.current.add(entry.key);
+          return;
+        }
+      } catch {
+        if (disposed) return;
+      }
+      if (disposed) return;
+      const exhausted = attempt >= maxAttempts;
+      if (exhausted && pollCount >= maxPolls) {
+        activeBuilderRefreshesRef.current.delete(entry.key);
+        stoppedBuilderRefreshesRef.current.add(entry.key);
+        return;
+      }
+      scheduleRetry(
+        entry,
+        exhausted ? retryPollDelayMs : retryDelayMs,
+        exhausted ? 0 : attempt + 1,
+        exhausted ? pollCount + 1 : pollCount,
+      );
+    };
+
+    for (const entry of builderSystemEntries) {
+      activeBuilderRefreshesRef.current.add(entry.key);
+      void refresh(entry, 0, 0);
     }
-  };
+
+    return () => {
+      disposed = true;
+      for (const timer of timers) clearTimeout(timer);
+      for (const entry of builderSystemEntries) {
+        activeBuilderRefreshesRef.current.delete(entry.key);
+      }
+    };
+  }, [designSystems, queryClient]);
 
   useSetPageTitle(t("navigation.designSystems"));
 
@@ -486,7 +592,7 @@ export default function DesignSystems() {
 
                   {/* Design system cards */}
                   {designSystems.map((ds) => {
-                    const parsed = parseData(ds.data);
+                    const parsed = parseDesignSystemData(ds.data);
                     const colors = parsed?.colors;
                     const primaryColor = getCssColorToken(colors?.primary);
                     const secondaryColor = getCssColorToken(colors?.secondary);
@@ -699,7 +805,7 @@ export default function DesignSystems() {
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={bulkDeleteOpen ? handleBulkDelete : handleDelete}
-              className="bg-red-600 hover:bg-red-700 cursor-pointer"
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90 cursor-pointer"
             >
               {t("designSystems.actions.delete")}
             </AlertDialogAction>
@@ -997,18 +1103,6 @@ function EmptyPreviewLine({
   );
 }
 
-function parseDesignSystemData(dataStr: string): DesignSystemData | null {
-  try {
-    const parsed = JSON.parse(dataStr);
-    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-      return null;
-    }
-    return parsed as DesignSystemData;
-  } catch {
-    return null;
-  }
-}
-
 function parseDesignSystemAssets(
   assetsStr?: string | null,
 ): Array<{ name?: string; url?: string; variant?: string }> {

package/corpus/templates/design/app/pages/Index.tsx

@@ -864,6 +864,7 @@ export default function Index() {
             value={search}
             onChange={(e) => handleSearchChange(e.target.value)}
             placeholder={t("home.searchPlaceholder")}
+            aria-label={t("home.searchPlaceholder")}
             className="ps-8 h-8 w-48 bg-accent/50 border-border text-sm text-foreground/90 placeholder:text-muted-foreground/70"
           />
         </div>
@@ -1232,7 +1233,7 @@ export default function Index() {
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={bulkDeleteOpen ? handleBulkDelete : handleDelete}
-              className="bg-red-600 hover:bg-red-700 cursor-pointer"
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90 cursor-pointer"
             >
               {t("home.delete")}
             </AlertDialogAction>
@@ -1262,6 +1263,7 @@ export default function Index() {
               }
             }}
             placeholder={t("home.designName")}
+            aria-label={t("home.designName")}
             className="h-9 text-sm"
           />
           <AlertDialogFooter>

package/corpus/templates/design/app/pages/Templates.tsx

@@ -302,16 +302,6 @@ export default function Templates() {
           </p>
         </div>
 
-        <div className="relative mb-6 md:hidden">
-          <IconSearch className="absolute start-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground/70" />
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t("templatesPage.searchPlaceholder")}
-            className="h-9 w-full bg-accent/50 ps-8 text-sm"
-          />
-        </div>
-
         {isLoading ? (
           <TemplateGridSkeleton />
         ) : isError ? (

package/corpus/templates/design/app/pages/design-editor/code-layer-state.ts

@@ -1134,6 +1134,16 @@ export function removeEmptyGeneratedGroupWrappers(
   candidateParentAttrIds: ReadonlySet<string>,
 ): string {
   if (candidateParentAttrIds.size === 0) return content;
+  // Both are necessary conditions for isGeneratedGroupWrapperNode to ever
+  // match. Checking them on the raw string first keeps a document with no
+  // generated groups — the common case — from paying for a full projection of
+  // post-edit content on every structural edit.
+  if (
+    !content.includes("data-agent-native-layer-name") ||
+    !content.includes("Group")
+  ) {
+    return content;
+  }
   let next = content;
   // Loop: removing one empty wrapper can itself empty out ITS parent (e.g.
   // ungrouping down a chain of nested generated groups), so keep sweeping

package/corpus/templates/design/app/pages/design-editor/collab-sync.ts

@@ -1,4 +1,8 @@
 import { shouldUseLiveFileContent } from "@shared/html-content";
+import DiffMatchPatch from "diff-match-patch";
+import type * as Y from "yjs";
+
+const { DIFF_DELETE, DIFF_EQUAL } = DiffMatchPatch;
 
 export function shouldRebaseCollabDocFromStoredContent({
   liveContent,
@@ -56,3 +60,49 @@ export function shouldApplyRemotePreviewContent({
 }): boolean {
   return !isLocalEdit && nextContent !== previousContent;
 }
+
+const diffMatchPatch = new DiffMatchPatch();
+
+/**
+ * Replace the collab document's text with `next` as the smallest set of
+ * disjoint splices, and report whether anything changed.
+ *
+ * Never `delete(0, length) + insert(0, next)`. That shape ships the whole
+ * document on every edit, the UndoManager pins every replaced copy so the doc
+ * grows without bound within a session, and it is wrong under concurrency:
+ * two peers each rewriting the whole text merge into a duplicated document
+ * instead of both edits.
+ *
+ * Disjoint rather than one prefix/suffix splice, because a single splice spans
+ * everything between the first and last changed character. An agent rewrite
+ * touching two ends of a screen would delete the untouched middle and take a
+ * concurrent edit inside it with it. This mirrors the server's own
+ * `applyTextToYDoc`, which has always diffed this way.
+ */
+export function writeCollabText(
+  ydoc: Y.Doc,
+  ytext: Y.Text,
+  next: string,
+  origin: unknown,
+): boolean {
+  const current = ytext.toString();
+  if (current === next) return false;
+  // No cleanup pass: diff_cleanupEfficiency merges edits across equal runs
+  // shorter than Diff_EditCost (4), which deletes up to three untouched
+  // characters and takes any concurrent edit anchored in them along with it.
+  const diffs = diffMatchPatch.diff_main(current, next);
+  ydoc.transact(() => {
+    let cursor = 0;
+    for (const [operation, text] of diffs) {
+      if (operation === DIFF_EQUAL) {
+        cursor += text.length;
+      } else if (operation === DIFF_DELETE) {
+        ytext.delete(cursor, text.length);
+      } else {
+        ytext.insert(cursor, text);
+        cursor += text.length;
+      }
+    }
+  }, origin);
+  return true;
+}

package/corpus/templates/design/app/pages/design-editor/commands/apply-design-editor-command.ts

@@ -37,7 +37,7 @@ export interface ApplyDesignEditorCommandArgs {
   overviewScreens: OverviewScreen[];
   setActiveFileId: Dispatch<SetStateAction<string | null>>;
   setActiveInspectorTab: Dispatch<SetStateAction<InspectorTab>>;
-  setActiveLeftPanel: Dispatch<SetStateAction<DesignLeftPanel>>;
+  setActiveLeftPanel: Dispatch<SetStateAction<DesignLeftPanel | null>>;
   setActiveTool: Dispatch<SetStateAction<DesignTool>>;
   setDrawMode: Dispatch<SetStateAction<boolean>>;
   setInteractDeviceName: Dispatch<SetStateAction<string>>;

package/corpus/templates/design/app/pages/design-editor/commands/apply-file-content-update.ts

@@ -10,7 +10,10 @@ import {
   waitForShaderWriteToSettle,
 } from "@/components/design/inspector/GlslShaderPanel";
 import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
-import { resolveScreenCollabSyncTarget } from "@/pages/design-editor/collab-sync";
+import {
+  resolveScreenCollabSyncTarget,
+  writeCollabText,
+} from "@/pages/design-editor/collab-sync";
 import { TAB_ID } from "@/pages/design-editor/editor-session";
 import type { FileContentSaveRequest } from "@/pages/design-editor/editor-state";
 import type { ContentHistoryEntry } from "@/pages/design-editor/history";
@@ -218,13 +221,12 @@ export function runApplyFileContentUpdate(
     overviewDocConnected: !!(overviewYdoc && overviewIsSynced),
   });
   if (writeLiveDoc && overviewYdoc) {
-    const ytext = overviewYdoc.getText("content");
-    if (ytext.toString() !== nextContent) {
-      overviewYdoc.transact(() => {
-        ytext.delete(0, ytext.length);
-        ytext.insert(0, nextContent);
-      }, TAB_ID);
-    }
+    writeCollabText(
+      overviewYdoc,
+      overviewYdoc.getText("content"),
+      nextContent,
+      TAB_ID,
+    );
   }
   if (options.persist === false) {
     cancelQueuedFileContentSave(fileId);

package/corpus/templates/design/app/pages/design-editor/commands/apply-local-content-update.ts

@@ -7,6 +7,7 @@ import * as Y from "yjs";
 
 import { trace } from "@/components/design/design-trace";
 import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import { writeCollabText } from "@/pages/design-editor/collab-sync";
 import {
   LOCAL_EDIT_ORIGIN,
   TAB_ID,
@@ -289,17 +290,16 @@ export function runApplyLocalContentUpdate(
     const ytext = ydoc.getText("content");
     if (ytext.toString() !== nextContent) {
       if (!yjsHistoryAvailable) {
-        // Untracked full rewrite (recordHistory:false callers such as the
+        // Untracked write (recordHistory:false callers such as the
         // code-layer id-stamping effect, or history-suppressed replays) —
         // see U1 note above: clear the undo stack so a stale tracked
         // delta can't be replayed against content it no longer matches.
         undoManagerRef.current?.clear(true, false);
       }
-      ydoc.transact(
-        () => {
-          ytext.delete(0, ytext.length);
-          ytext.insert(0, nextContent);
-        },
+      writeCollabText(
+        ydoc,
+        ytext,
+        nextContent,
         yjsHistoryAvailable ? LOCAL_EDIT_ORIGIN : TAB_ID,
       );
     }

package/corpus/templates/design/app/pages/design-editor/commands/apply-pending-visual-styles-with-agent.ts

@@ -50,7 +50,7 @@ export interface ApplyPendingVisualStylesWithAgentArgs {
   pendingStructureVerificationStatus: PendingStructureVerificationStatus;
   pendingVisualStyleEdits: PendingVisualStyleEdit[];
   pendingVisualStylePrompt: string;
-  setActiveLeftPanel: Dispatch<SetStateAction<DesignLeftPanel>>;
+  setActiveLeftPanel: Dispatch<SetStateAction<DesignLeftPanel | null>>;
   setApplyingViaHost: Dispatch<SetStateAction<boolean>>;
   setPendingAgentHandoffBusy: Dispatch<SetStateAction<boolean>>;
   setPendingStructureAckRequest: Dispatch<

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

@@ -25,6 +25,7 @@ import {
   resolveCodeLayerTargetFromBridge,
   resolveCodeLayerTargetFromElementInfo,
 } from "@/pages/design-editor/code-layer-state";
+import { writeCollabText } from "@/pages/design-editor/collab-sync";
 import type {
   LiveScreenSnapshot,
   PatchProofState,
@@ -176,6 +177,9 @@ export function runCommitVisualStyles(
     elementInfo?: ElementInfo;
     /** Pre-gesture values, for the pending-edit revert stack. */
     originalStyles?: Record<string, string>;
+    /** The write is a side effect of a gesture on another element, so it must
+     *  not move the selection onto the element it touched. */
+    preserveSelection?: boolean;
   } = {},
 ) {
   trace("persist", "commit-styles", {
@@ -657,17 +661,16 @@ export function runCommitVisualStyles(
       const ytext = ydoc.getText("content");
       if (ytext.toString() !== resolvedNextContent) {
         if (!yjsHistoryAvailable) {
-          // Untracked full rewrite (overview mode with a still-live
+          // Untracked write (overview mode with a still-live
           // single-mode UndoManager, or history-suppressed replay) —
           // see U1 note: clear the undo stack so a stale tracked delta
           // can't be replayed against content it no longer matches.
           undoManagerRef.current?.clear(true, false);
         }
-        ydoc.transact(
-          () => {
-            ytext.delete(0, ytext.length);
-            ytext.insert(0, resolvedNextContent);
-          },
+        writeCollabText(
+          ydoc,
+          ytext,
+          resolvedNextContent,
           yjsHistoryAvailable ? LOCAL_EDIT_ORIGIN : TAB_ID,
         );
       }
@@ -687,7 +690,15 @@ export function runCommitVisualStyles(
       setContentRenderRevision((revision) => revision + 1);
     }
   }
-  if (resolvedNode) setSelectedLayerIdsState([resolvedNode.id]);
+  if (options.preserveSelection) return;
+  // A commit must never shrink the selection: a group transform commits one
+  // style change per member, so selecting the committed node keeps only the
+  // member that happened to commit last.
+  if (resolvedNode) {
+    setSelectedLayerIdsState((current) =>
+      current.includes(resolvedNode.id) ? current : [resolvedNode.id],
+    );
+  }
   setSelectedElement((prev) => {
     if (options.elementInfo) return options.elementInfo;
     if (!prev) return prev;

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

@@ -1,33 +1,13 @@
-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 { 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;
@@ -40,11 +20,8 @@ export interface EscapeHotkeyArgs {
   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>>;
@@ -59,7 +36,6 @@ export function runEscapeHotkey({
   activeBreakpointWidthStateRef,
   activeTool,
   cancelActiveEditorDrag,
-  codeLayerOwnerByNodeIdRef,
   drawMode,
   enterOverviewFromZoom,
   focusedAnnotationSending,
@@ -72,11 +48,8 @@ export function runEscapeHotkey({
   overviewAnnotationSending,
   pinMode,
   selectedElement,
-  selectedLayerIdsState,
-  setActiveFileId,
   setActiveTool,
   setDrawMode,
-  setExpandedLayerIds,
   setHoveredElement,
   setMode,
   setOverviewClearSelectionRequest,
@@ -133,68 +106,9 @@ export function runEscapeHotkey({
     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;
-  }
+  // Figma's Esc is "select none". Walking up one ancestor per press belongs to
+  // Shift+Enter / "\\" (handleSelectParentLayer) — Escape must never leave
+  // something selected, or there is no keystroke that reaches an empty canvas.
   setSelectedElement(null);
   setHoveredElement(null);
   setOverviewSelectedScreenIds([]);

package/corpus/templates/design/app/pages/design-editor/commands/layer-marquee-selection-change.ts

@@ -15,6 +15,7 @@ import {
   isScreenRootElementInfo,
   shouldClearBridgeSelectionOnEmptyMarquee,
 } from "@/pages/design-editor/selection-state";
+import { resolveToolAfterSelection } from "@/pages/design-editor/tool-state";
 import type { DesignTool, EditorMode } from "@/pages/design-editor/types";
 
 export interface LayerMarqueeSelectionChangeArgs {
@@ -158,6 +159,6 @@ export function runLayerMarqueeSelectionChange(
     setOverviewClearSelectionRequest((request) => request + 1);
   }
 
-  setActiveTool("move");
+  setActiveTool(resolveToolAfterSelection);
   setMode("edit");
 }