@agent-native/core 0.169.1 → 0.170.0

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

@@ -787,6 +787,7 @@ import { postShaderFillPreviewClearToPreviewIframes } from "./design-editor/text
 import {
   getDesignBottomToolbarMode,
   getSingleScreenCreationTool,
+  resolveToolAfterSelection,
   shouldAutoEnableDrawOverlay,
 } from "./design-editor/tool-state";
 import {
@@ -956,6 +957,9 @@ function DesignEditor() {
   // Editor state
   const [mode, setMode] = useState<EditorMode>("edit");
   const [activeTool, setActiveTool] = useState<DesignTool>("move");
+  // Drawing drops activeTool back to move (Figma parity), so the shape group
+  // button cannot read its own identity off it.
+  const [shapeTool, setShapeTool] = useState<ShapeTool>("rect");
   // The frame tool draws a top-level SCREEN or a plain FRAME container. Made
   // explicit because deciding it from where the drag started is unguessable.
   const [frameToolDraws, setFrameToolDraws] = useState<"screen" | "frame">(
@@ -1360,7 +1364,7 @@ function DesignEditor() {
   } | null>(null);
   const reviewFocusNonceRef = useRef(0);
   const [activeLeftPanel, setActiveLeftPanel] =
-    useState<DesignLeftPanel>("file");
+    useState<DesignLeftPanel | null>("file");
   const [activeCodeFile, setActiveCodeFile] =
     useState<CodeWorkbenchActiveFile | null>(null);
   const initialSearchCommandAppliedForIdRef = useRef<string | null>(null);
@@ -6092,9 +6096,9 @@ function DesignEditor() {
     latestActiveContentRef.current = activeContent;
   }, [activeContent]);
   useEffect(() => {
-    if (!initialGenerationChromeLimited || activeLeftPanel === "agent") return;
+    if (!initialGenerationChromeLimited) return;
     setActiveLeftPanel("agent");
-  }, [activeLeftPanel, initialGenerationChromeLimited]);
+  }, [initialGenerationChromeLimited]);
   const fileContentById = useMemo(() => {
     const map = new Map<string, string>();
     for (const file of files) {
@@ -8110,13 +8114,18 @@ function DesignEditor() {
    * engine handles persistence identically to in-screen elements.
    */
   const handleBoardDrawPrimitive = useCallback(
-    (primitive: CanvasPrimitiveInsert) => {
+    (
+      primitive: CanvasPrimitiveInsert,
+      options?: { nextTool?: "move" | "pen" },
+    ) => {
       if (!boardFileId || !canEditDesign) return false;
       const result = handleCreatePrimitive(boardFileId, primitive);
       if (!result) return false;
       const nodeId = typeof result === "string" ? result : primitive.nodeId;
       if (nodeId) {
-        handlePrimitiveCreated(boardFileId, nodeId);
+        // Without the caller's tool intent a board pen commit lands on Move,
+        // which disarms the Pen mid-path — a screen insert keeps it.
+        handlePrimitiveCreated(boardFileId, nodeId, options);
       }
 
       return result;
@@ -8369,6 +8378,7 @@ function DesignEditor() {
       blurActiveDesignEditableTarget();
       flushSync(() => {
         setActiveTool(tool);
+        setShapeTool(tool);
         if (viewModeRef.current === "single" && activeFile) {
           setMode("edit");
           setDrawMode(false);
@@ -9010,7 +9020,7 @@ function DesignEditor() {
           handleBreakpointBarSelect(undefined);
         }
       }
-      setActiveTool("move");
+      setActiveTool(resolveToolAfterSelection);
       setMode("edit");
     },
     [clearPendingOverviewLayerSelectionTimer, handleBreakpointBarSelect],
@@ -9391,6 +9401,7 @@ function DesignEditor() {
         elementInfo?: ElementInfo;
         /** Pre-gesture values, for the pending-edit revert stack. */
         originalStyles?: Record<string, string>;
+        preserveSelection?: boolean;
       } = {},
     ) =>
       runCommitVisualStyles(
@@ -9889,7 +9900,10 @@ function DesignEditor() {
       selector: string,
       styles: Record<string, string>,
       elementInfo?: ElementInfo,
-      metadata?: { originalStyles?: Record<string, string> },
+      metadata?: {
+        originalStyles?: Record<string, string>;
+        preserveSelection?: boolean;
+      },
     ) => {
       if (!activeFile?.id) return;
       // The gesture already moved the live DOM, so this never needs the
@@ -9901,6 +9915,7 @@ function DesignEditor() {
         runtimeApplied: true,
         elementInfo,
         originalStyles: metadata?.originalStyles,
+        preserveSelection: metadata?.preserveSelection,
       });
     },
     [activeFile?.id, commitVisualStyles],
@@ -10048,7 +10063,10 @@ function DesignEditor() {
       selector: string,
       styles: Record<string, string>,
       elementInfo?: ElementInfo,
-      metadata?: { originalStyles?: Record<string, string> },
+      metadata?: {
+        originalStyles?: Record<string, string>;
+        preserveSelection?: boolean;
+      },
     ) =>
       runScreenVisualStyleChange(
         {
@@ -13179,7 +13197,6 @@ function DesignEditor() {
         activeBreakpointWidthStateRef,
         activeTool,
         cancelActiveEditorDrag,
-        codeLayerOwnerByNodeIdRef,
         drawMode,
         enterOverviewFromZoom,
         focusedAnnotationSending,
@@ -13192,11 +13209,8 @@ function DesignEditor() {
         overviewAnnotationSending,
         pinMode,
         selectedElement,
-        selectedLayerIdsState,
-        setActiveFileId,
         setActiveTool,
         setDrawMode,
-        setExpandedLayerIds,
         setHoveredElement,
         setMode,
         setOverviewClearSelectionRequest,
@@ -13221,7 +13235,6 @@ function DesignEditor() {
       overviewAnnotationSending,
       pinMode,
       selectedElement,
-      selectedLayerIdsState,
       viewMode,
     ],
   );
@@ -13478,12 +13491,8 @@ function DesignEditor() {
       owner.node.parentId,
     );
     if (!parentOwner || parentOwner.fileId !== owner.fileId) return;
-    // BUG-ESCAPE-SHELL (same mechanism as handleEscapeHotkey's pop walk): the
-    // flat ownership map still resolves a top-level layer's parentId to the
-    // collapsed <html>/<body> shell node, which the layers panel never shows
-    // as selectable. Without this guard, Shift+Enter/"\\" on a top-level
-    // layer would select <body> instead of no-op'ing like the comment above
-    // already documents.
+    // The flat ownership map still resolves a top-level layer's parentId to
+    // the collapsed <html>/<body> shell node the layers panel never shows.
     if (!hasSelectableCodeLayerParent({ parentNode: parentOwner.node })) {
       return;
     }
@@ -15624,6 +15633,20 @@ function DesignEditor() {
     selectedLayerTargetsRef.current = selectedLayerTargets;
   }, [selectedLayerTargets]);
 
+  /** The overview canvas keeps a layer's owning screen in `selectedScreenIds`
+   *  (z-order and "topmost screen" read it), so without this the screen's own
+   *  full-bleed SelectionBox stays mounted over the element and its drag
+   *  surface swallows the gesture — the frame moves instead of the layer. */
+  const selectedElementScreenId = useMemo(() => {
+    const first = selectedLayerTargets[0];
+    if (!first) return null;
+    return selectedLayerTargets.every(
+      (target) => target.fileId === first.fileId,
+    )
+      ? first.fileId
+      : null;
+  }, [selectedLayerTargets]);
+
   const selectedLayerSelectorGroupsByScreen = useMemo(() => {
     const groupsByScreen: Record<string, string[][]> = {};
     selectedLayerTargets.forEach((target) => {
@@ -17869,7 +17892,7 @@ function DesignEditor() {
         }),
       );
       setActiveFileId(pickedId);
-      setActiveTool("move");
+      setActiveTool(resolveToolAfterSelection);
       setMode("edit");
       if (activeBreakpointWidthStateRef.current !== undefined) {
         handleBreakpointBarSelect(undefined);
@@ -19007,10 +19030,13 @@ function DesignEditor() {
     onRequestTweaks: handleRequestTweaks,
     onStyleChange: handleStyleChange,
     onStylesChange: handleStylesChange,
-    motionKeyframeState,
-    onToggleMotionKeyframe: canEditDesign
-      ? handleToggleMotionKeyframe
+    motionKeyframeState: SHOW_DESIGN_SECONDARY_LEFT_PANELS
+      ? motionKeyframeState
       : undefined,
+    onToggleMotionKeyframe:
+      SHOW_DESIGN_SECONDARY_LEFT_PANELS && canEditDesign
+        ? handleToggleMotionKeyframe
+        : undefined,
     breakpointContext,
     onExport: handleInspectorExport,
     onRenderExportPreview: handleRenderExportPreview,
@@ -19083,15 +19109,23 @@ function DesignEditor() {
                   : undefined
               }
               motionOpen={motionDockOpen}
-              motionDisabled={!activeFile}
+              motionDisabled={!activeFile || initialGenerationChromeLimited}
               projectMenu={hostEmbeddedEditor ? null : projectMenu}
               onMotionToggle={() => setMotionDockOpenAnimated(!motionDockOpen)}
-              onPanelChange={setActiveLeftPanel}
+              onPanelChange={(panel) => {
+                if (panel === null && initialGenerationChromeLimited) return;
+                setActiveLeftPanel(panel);
+              }}
             />
             <div
               ref={leftSidebarContentRef}
-              className="flex min-h-0 max-w-[calc(100dvw-57px)] shrink-0 flex-col border-r border-[var(--design-editor-panel-divider-color)] bg-[var(--design-editor-panel-bg)] transition-[width] duration-150 ease-out md:max-w-none"
-              style={{ width: leftContentWidth }}
+              aria-hidden={activeLeftPanel === null}
+              className={cn(
+                "flex min-h-0 max-w-[calc(100dvw-57px)] shrink-0 flex-col overflow-hidden border-r border-[var(--design-editor-panel-divider-color)] bg-[var(--design-editor-panel-bg)] transition-[width] duration-150 ease-out md:max-w-none",
+                activeLeftPanel === null &&
+                  "pointer-events-none invisible border-r-0",
+              )}
+              style={{ width: activeLeftPanel ? leftContentWidth : 0 }}
             >
               <div
                 className={cn(
@@ -19325,13 +19359,15 @@ function DesignEditor() {
                 </>
               ) : null}
             </div>
-            <div
-              role="separator"
-              aria-orientation="vertical"
-              aria-label={t("layersPanel.title")}
-              className="absolute right-[-2px] top-0 z-[80] h-full w-1 cursor-col-resize bg-transparent transition-colors hover:bg-[var(--design-editor-selection-color)]"
-              onPointerDown={(event) => startSidebarResize("left", event)}
-            />
+            {activeLeftPanel ? (
+              <div
+                role="separator"
+                aria-orientation="vertical"
+                aria-label={t("layersPanel.title")}
+                className="absolute right-[-2px] top-0 z-[80] h-full w-1 cursor-col-resize bg-transparent transition-colors hover:bg-[var(--design-editor-selection-color)]"
+                onPointerDown={(event) => startSidebarResize("left", event)}
+              />
+            ) : null}
           </div>
         ) : null}
 
@@ -19350,6 +19386,7 @@ function DesignEditor() {
               pinMode={pinMode}
               drawMode={drawMode}
               activeTool={activeTool}
+              shapeTool={shapeTool}
               isOverview={viewMode === "overview"}
               hasActiveFile={Boolean(activeFile)}
               onMove={handleMoveTool}
@@ -19813,6 +19850,7 @@ function DesignEditor() {
                         cameraCommand={cameraCommand}
                         activeId={activeFileId}
                         selectedScreenIds={overviewSelectedScreenIds}
+                        selectedElementScreenId={selectedElementScreenId}
                         hiddenScreenIds={hiddenLayerIds}
                         lockedScreenIds={lockedLayerIds}
                         fullViewScreenIds={fullViewScreenIds}
@@ -20467,7 +20505,11 @@ function DesignEditor() {
           closing. Canvas remains visible above.
           Preview-only scrubbing fires a motion-preview postMessage to the
           canvas iframe; track/duration edits autosave through apply-motion-edit. */}
-      {!hostOwnsChrome && activeFile && motionDockMounted ? (
+      {!hostOwnsChrome &&
+      SHOW_DESIGN_SECONDARY_LEFT_PANELS &&
+      !initialGenerationChromeLimited &&
+      activeFile &&
+      motionDockMounted ? (
         <MotionDock
           tracks={motionTracks}
           durationMs={motionDurationMs}

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);
@@ -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>
@@ -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);