@agent-native/core 0.184.0 → 0.184.1-nightly-20260922203115

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -294,7 +294,9 @@ import {
   getBoardSurfaceHtml,
   getBoardSurfaceRenderContent,
   getBoardSurfaceStaticPreviewContent,
+  hasBoardRuntimeSurfaceContent,
   hasBoardSurfaceContent,
+  shouldMountBoardSurface,
   shouldRenderEmptyBoardReviewCanvas,
 } from "./multi-screen/board-surface-html";
 import {
@@ -729,6 +731,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   // before the first layout measurement.
   const [surfaceSize, setSurfaceSize] = useState({ width: 0, height: 0 });
   const [crossScreenDragActive, setCrossScreenDragActive] = useState(false);
+  const [boardRuntimeSurfaceState, setBoardRuntimeSurfaceState] = useState<{
+    boardFileId: string | null;
+    requestKeys: string[];
+  }>({ boardFileId: null, requestKeys: [] });
   const [frameGeometry, setFrameGeometry] = useState<FrameGeometryById>({});
   const frameGeometryRef = useRef(frameGeometry);
   const renderedScreenIdsRef = useRef<Set<string>>(new Set());
@@ -898,10 +904,65 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   // Keep the empty board unmounted during normal editing so the text/shape
   // creation path can still own its first mount. Mount it for the duration of
   // a cross-screen drag so the drop has a real DOM target before release.
-  const boardSurfaceHtml =
-    crossScreenDragActive || hasBoardSurfaceContent(boardFileContent)
-      ? getBoardSurfaceHtml(boardFileContent)
-      : undefined;
+  const boardSurfaceHtml = shouldMountBoardSurface({
+    hasAuthoredContent: hasBoardSurfaceContent(boardFileContent),
+    crossScreenDragActive,
+    hasPendingRuntimeInsert: Boolean(boardRuntimeStructureInsertRequest),
+    hasRuntimeContent: hasBoardRuntimeSurfaceContent({
+      boardFileId,
+      runtimeBoardFileId: boardRuntimeSurfaceState.boardFileId,
+      runtimeRequestKeys: boardRuntimeSurfaceState.requestKeys,
+    }),
+  })
+    ? getBoardSurfaceHtml(boardFileContent)
+    : undefined;
+  const handleBoardRuntimeStructureInsertApplied = useCallback(
+    (details: {
+      requestId: string;
+      transactionId?: string;
+      routePath?: string;
+      selector: string;
+      sourceId?: string;
+      applied?: boolean;
+    }) => {
+      if (details.applied !== false && details.selector && boardFileId) {
+        const requestKey = details.transactionId ?? details.requestId;
+        setBoardRuntimeSurfaceState((current) => {
+          const base =
+            current.boardFileId === boardFileId
+              ? current
+              : { boardFileId, requestKeys: [] };
+          return base.requestKeys.includes(requestKey)
+            ? base
+            : { ...base, requestKeys: [...base.requestKeys, requestKey] };
+        });
+      }
+      onBoardRuntimeStructureInsertApplied?.(details);
+    },
+    [boardFileId, onBoardRuntimeStructureInsertApplied],
+  );
+  const handleBoardRuntimeStructureRollbackResult = useCallback(
+    (details: {
+      requestId: string;
+      transactionId?: string;
+      applied: boolean;
+      reason?: string;
+    }) => {
+      if (details.applied && details.transactionId && boardFileId) {
+        setBoardRuntimeSurfaceState((current) => {
+          if (current.boardFileId !== boardFileId) return current;
+          const requestKeys = current.requestKeys.filter(
+            (key) => key !== details.transactionId,
+          );
+          return requestKeys.length > 0
+            ? { ...current, requestKeys }
+            : { boardFileId: null, requestKeys: [] };
+        });
+      }
+      onBoardRuntimeStructureRollbackResult?.(details);
+    },
+    [boardFileId, onBoardRuntimeStructureRollbackResult],
+  );
   const boardHasSurfaceContent = boardSurfaceHtml !== undefined;
   const boardReviewGeometry = boardSurfaceRenderGeometry ?? {
     x: 0,
@@ -10739,10 +10800,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                     onBoardRuntimeStructureInsertRejected
                   }
                   onRuntimeStructureInsertApplied={
-                    onBoardRuntimeStructureInsertApplied
+                    handleBoardRuntimeStructureInsertApplied
                   }
                   onRuntimeStructureRollbackResult={
-                    onBoardRuntimeStructureRollbackResult
+                    handleBoardRuntimeStructureRollbackResult
                   }
                   clearSelectionRequest={boardClearSelectionRequest}
                   selectedSelector={boardSelectedSelector ?? null}

package/corpus/templates/design/app/components/design/bridge/nav.bridge.ts

@@ -11,6 +11,13 @@
  *   - internal/relative links (or an explicit `data-screen`): asked to switch
  *     to the matching screen in a multi-screen design; otherwise a no-op so the
  *     prototype never blows itself away.
+ *   - Cmd/Ctrl/Shift-click and middle-click on a real `<a href>`: left
+ *     completely alone so the browser's own new-tab/new-window gesture runs
+ *     (see the modifier-click guard below). A screen switch is a same-tab
+ *     mutation of the live editor's mode/selection state; forcing it on a
+ *     click whose entire point was "don't disturb my current tab" corrupts
+ *     that state instead of opening a new one, which is what produced the
+ *     Interact-mode crash this guard fixes.
  *
  * Protocol (iframe → parent):
  *
@@ -47,6 +54,15 @@
       if (!t || !t.closest) return;
       var a = t.closest("a[href], [data-screen]") as HTMLElement | null;
       if (!a) return;
+      // Cmd/Ctrl-click (new tab), Shift-click (new window), and middle-click
+      // are the browser's own "open this somewhere else, leave my tab alone"
+      // gestures. Forcing our same-tab screen-switch/postMessage path on top
+      // of one of these ignores that intent and mutates the live editor's
+      // mode/selection state on a click the user never meant to touch the
+      // current tab with. Step aside entirely and let the browser (or, for a
+      // `data-screen`-only element with no real destination, simply nothing)
+      // handle it instead.
+      if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
       var ds = a.getAttribute && a.getAttribute("data-screen");
       // In-page anchors ('#...') and empty hrefs must be handled in-document.
       // A srcdoc document resolves '#'/'' against the PARENT app URL, so the

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -17,6 +17,32 @@ export function getBoardSurfaceHtml(html: string | undefined) {
   return hasBoardSurfaceContent(html) ? html : EMPTY_BOARD_SURFACE_HTML;
 }
 
+export function shouldMountBoardSurface(args: {
+  hasAuthoredContent: boolean;
+  crossScreenDragActive: boolean;
+  hasPendingRuntimeInsert: boolean;
+  hasRuntimeContent: boolean;
+}): boolean {
+  return (
+    args.hasAuthoredContent ||
+    args.crossScreenDragActive ||
+    args.hasPendingRuntimeInsert ||
+    args.hasRuntimeContent
+  );
+}
+
+export function hasBoardRuntimeSurfaceContent(args: {
+  boardFileId?: string;
+  runtimeBoardFileId: string | null;
+  runtimeRequestKeys: readonly string[];
+}): boolean {
+  return (
+    args.boardFileId !== undefined &&
+    args.runtimeBoardFileId === args.boardFileId &&
+    args.runtimeRequestKeys.length > 0
+  );
+}
+
 export function shouldRenderEmptyBoardReviewCanvas(args: {
   hasSurfaceContent: boolean;
   reviewPinMode: boolean;

package/corpus/templates/design/changelog/2026-09-22-apps-start-with-an-app-shaped-skeleton-while-session-data-lo.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-22
+---
+
+Apps start with an app-shaped skeleton while session data loads immediately.

package/corpus/templates/design/changelog/2026-09-22-blocks-can-be-selected-with-one-click-inside-screens.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-22
+---
+
+Blocks can be selected with one click inside screens

package/corpus/templates/mail/app/components/layout/AppLayout.tsx

@@ -44,14 +44,19 @@ import {
   IconFilter,
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import {
+  lazy,
+  Suspense,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+} from "react";
 import { Link, useNavigate, useLocation, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
-import {
-  ComposeModal,
-  type ComposePaletteCommands,
-} from "@/components/email/ComposeModal";
+import type { ComposePaletteCommands } from "@/components/email/ComposeModal";
 import { SnoozeModal } from "@/components/email/SnoozeModal";
 import { GoogleConnectBanner } from "@/components/GoogleConnectBanner";
 import { ThemeToggle } from "@/components/ThemeToggle";
@@ -121,6 +126,12 @@ import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
 import { SearchBar } from "./SearchBar";
 import { useCommandPaletteFocus } from "./use-command-palette-focus";
 
+const ComposeModal = lazy(() =>
+  import("@/components/email/ComposeModal").then(({ ComposeModal }) => ({
+    default: ComposeModal,
+  })),
+);
+
 const BARE_ROUTES = new Set(["/email"]);
 const EMPTY_SAVED_FILTERS: SavedMailFilter[] = [];
 
@@ -2068,138 +2079,140 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         const popoutActiveDraft =
           popoutDrafts.find((d) => d.id === popoutActiveId) ?? null;
         return (
-          <ComposeModal
-            drafts={popoutDrafts}
-            activeId={popoutActiveId}
-            activeDraft={popoutActiveDraft}
-            initialExpanded={composeInitialExpanded}
-            onSetActiveId={compose.setActiveId}
-            onUpdate={compose.update}
-            onClose={(id) => {
-              const draft = popoutDrafts.find((d) => d.id === id);
-              const hasContent = !!(
-                draft?.to?.trim() ||
-                draft?.cc?.trim() ||
-                draft?.bcc?.trim() ||
-                draft?.subject?.trim() ||
-                draft?.body?.trim()
-              );
-              const snapshot = draft ? { ...draft } : null;
-              const savePromise = compose.close(id);
-              if (hasContent && snapshot) {
-                toast(t("mail.toasts.draftClosed"), {
-                  action: {
-                    label: t("mail.compose.reopenDraft"),
-                    onClick: async () => {
-                      const savedSnapshot = applyDraftSaveResult(
-                        snapshot,
-                        await savePromise,
-                      );
-                      const { id: _id, ...reopenData } = savedSnapshot;
-                      compose.open(reopenData);
-                    },
-                  },
-                  cancel: {
-                    label: t("mail.compose.deleteDraft"),
-                    onClick: async () => {
-                      const savedSnapshot = applyDraftSaveResult(
-                        snapshot,
-                        await savePromise,
-                      );
-                      if (savedSnapshot.savedDraftId) {
-                        await compose.deleteSavedDraft(savedSnapshot);
-                      }
-                    },
-                  },
-                });
-              }
-            }}
-            onCloseAll={() => {
-              const draftsWithContent = popoutDrafts.filter(
-                (d) =>
-                  !!(
-                    d.to?.trim() ||
-                    d.cc?.trim() ||
-                    d.bcc?.trim() ||
-                    d.subject?.trim() ||
-                    d.body?.trim()
-                  ),
-              );
-              const snapshots = draftsWithContent.map((d) => ({ ...d }));
-              const savePromises = compose.closeAll(
-                popoutDrafts.map((draft) => draft.id),
-              );
-              if (snapshots.length > 0) {
-                toast(
-                  t("mail.toasts.draftsClosed", { count: snapshots.length }),
-                  {
+          <Suspense fallback={null}>
+            <ComposeModal
+              drafts={popoutDrafts}
+              activeId={popoutActiveId}
+              activeDraft={popoutActiveDraft}
+              initialExpanded={composeInitialExpanded}
+              onSetActiveId={compose.setActiveId}
+              onUpdate={compose.update}
+              onClose={(id) => {
+                const draft = popoutDrafts.find((d) => d.id === id);
+                const hasContent = !!(
+                  draft?.to?.trim() ||
+                  draft?.cc?.trim() ||
+                  draft?.bcc?.trim() ||
+                  draft?.subject?.trim() ||
+                  draft?.body?.trim()
+                );
+                const snapshot = draft ? { ...draft } : null;
+                const savePromise = compose.close(id);
+                if (hasContent && snapshot) {
+                  toast(t("mail.toasts.draftClosed"), {
                     action: {
                       label: t("mail.compose.reopenDraft"),
                       onClick: async () => {
-                        const saveResults = await Promise.all(
-                          snapshots.map(async (snapshot) => ({
-                            snapshot,
-                            result: await savePromises.get(snapshot.id),
-                          })),
+                        const savedSnapshot = applyDraftSaveResult(
+                          snapshot,
+                          await savePromise,
                         );
-                        for (const { snapshot, result } of saveResults) {
-                          if (
-                            result?.status === "failed" ||
-                            result?.status === "unavailable" ||
-                            result?.status === "cancelled"
-                          ) {
-                            compose.setActiveId(snapshot.id);
-                            continue;
-                          }
-                          const savedSnapshot = applyDraftSaveResult(
-                            snapshot,
-                            result,
-                          );
-                          const { id: _id, ...reopenData } = savedSnapshot;
-                          compose.open(reopenData);
-                        }
+                        const { id: _id, ...reopenData } = savedSnapshot;
+                        compose.open(reopenData);
                       },
                     },
                     cancel: {
-                      label: t("mail.compose.deleteDrafts"),
+                      label: t("mail.compose.deleteDraft"),
                       onClick: async () => {
-                        const saveResults = await Promise.all(
-                          snapshots.map(async (snapshot) => ({
-                            snapshot,
-                            result: await savePromises.get(snapshot.id),
-                          })),
+                        const savedSnapshot = applyDraftSaveResult(
+                          snapshot,
+                          await savePromise,
                         );
-                        for (const { snapshot, result } of saveResults) {
-                          if (
-                            result?.status === "failed" ||
-                            result?.status === "unavailable" ||
-                            result?.status === "cancelled"
-                          ) {
-                            compose.discard(snapshot.id);
-                            continue;
+                        if (savedSnapshot.savedDraftId) {
+                          await compose.deleteSavedDraft(savedSnapshot);
+                        }
+                      },
+                    },
+                  });
+                }
+              }}
+              onCloseAll={() => {
+                const draftsWithContent = popoutDrafts.filter(
+                  (d) =>
+                    !!(
+                      d.to?.trim() ||
+                      d.cc?.trim() ||
+                      d.bcc?.trim() ||
+                      d.subject?.trim() ||
+                      d.body?.trim()
+                    ),
+                );
+                const snapshots = draftsWithContent.map((d) => ({ ...d }));
+                const savePromises = compose.closeAll(
+                  popoutDrafts.map((draft) => draft.id),
+                );
+                if (snapshots.length > 0) {
+                  toast(
+                    t("mail.toasts.draftsClosed", { count: snapshots.length }),
+                    {
+                      action: {
+                        label: t("mail.compose.reopenDraft"),
+                        onClick: async () => {
+                          const saveResults = await Promise.all(
+                            snapshots.map(async (snapshot) => ({
+                              snapshot,
+                              result: await savePromises.get(snapshot.id),
+                            })),
+                          );
+                          for (const { snapshot, result } of saveResults) {
+                            if (
+                              result?.status === "failed" ||
+                              result?.status === "unavailable" ||
+                              result?.status === "cancelled"
+                            ) {
+                              compose.setActiveId(snapshot.id);
+                              continue;
+                            }
+                            const savedSnapshot = applyDraftSaveResult(
+                              snapshot,
+                              result,
+                            );
+                            const { id: _id, ...reopenData } = savedSnapshot;
+                            compose.open(reopenData);
                           }
-                          const savedSnapshot = applyDraftSaveResult(
-                            snapshot,
-                            result,
+                        },
+                      },
+                      cancel: {
+                        label: t("mail.compose.deleteDrafts"),
+                        onClick: async () => {
+                          const saveResults = await Promise.all(
+                            snapshots.map(async (snapshot) => ({
+                              snapshot,
+                              result: await savePromises.get(snapshot.id),
+                            })),
                           );
-                          if (savedSnapshot.savedDraftId) {
-                            await compose.deleteSavedDraft(savedSnapshot);
+                          for (const { snapshot, result } of saveResults) {
+                            if (
+                              result?.status === "failed" ||
+                              result?.status === "unavailable" ||
+                              result?.status === "cancelled"
+                            ) {
+                              compose.discard(snapshot.id);
+                              continue;
+                            }
+                            const savedSnapshot = applyDraftSaveResult(
+                              snapshot,
+                              result,
+                            );
+                            if (savedSnapshot.savedDraftId) {
+                              await compose.deleteSavedDraft(savedSnapshot);
+                            }
                           }
-                        }
+                        },
                       },
                     },
-                  },
-                );
-              }
-            }}
-            onDiscard={compose.discard}
-            onStageForSend={compose.stageForSend}
-            onRestoreAfterSend={compose.restoreAfterSend}
-            onNewDraft={handleCompose}
-            onFlush={compose.flush}
-            onInitialExpandedConsumed={clearComposeInitialExpanded}
-            onRegisterComposeCommands={registerComposePaletteCommands}
-          />
+                  );
+                }
+              }}
+              onDiscard={compose.discard}
+              onStageForSend={compose.stageForSend}
+              onRestoreAfterSend={compose.restoreAfterSend}
+              onNewDraft={handleCompose}
+              onFlush={compose.flush}
+              onInitialExpandedConsumed={clearComposeInitialExpanded}
+              onRegisterComposeCommands={registerComposePaletteCommands}
+            />
+          </Suspense>
         );
       })()}
       <CommandPalette

package/corpus/templates/mail/changelog/2026-09-22-apps-start-with-an-app-shaped-skeleton-while-session-data-lo.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-22
+---
+
+Apps start with an app-shaped skeleton while session data loads immediately.

package/corpus/templates/slides/changelog/2026-09-22-apps-start-with-an-app-shaped-skeleton-while-session-data-lo.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-22
+---
+
+Apps start with an app-shaped skeleton while session data loads immediately.

package/dist/client/AppShellSkeleton.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from "react";
+export declare function AppShellSkeleton({ ariaLabel, height, }: {
+    ariaLabel?: string;
+    height?: CSSProperties["height"];
+}): import("react").JSX.Element;

package/dist/client/AppShellSkeleton.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BLOCK_STYLE = {
+    display: "block",
+    backgroundColor: "hsl(var(--muted, 240 5% 96.1%))",
+    borderRadius: 6,
+    opacity: 0.7,
+};
+function Block({ style }) {
+    return _jsx("span", { "aria-hidden": true, style: { ...BLOCK_STYLE, ...style } });
+}
+export function AppShellSkeleton({ ariaLabel = "Loading application", height = "var(--agent-native-viewport-height, 100vh)", }) {
+    return (_jsxs("div", { role: "status", "aria-label": ariaLabel, "data-agent-native-app-skeleton": "true", style: {
+            display: "flex",
+            height,
+            width: "100%",
+            overflow: "hidden",
+            backgroundColor: "hsl(var(--background, 0 0% 100%))",
+            color: "hsl(var(--foreground, 240 10% 3.9%))",
+        }, children: [_jsx("style", { children: `
+        [data-agent-native-app-skeleton] [aria-hidden="true"] {
+          animation: an-app-shell-skeleton-pulse 1.2s ease-in-out infinite;
+        }
+        @keyframes an-app-shell-skeleton-pulse {
+          0%, 100% { opacity: 0.45; }
+          50% { opacity: 0.85; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          [data-agent-native-app-skeleton] [aria-hidden="true"] { animation: none; }
+        }
+        @media (max-width: 767px) {
+          [data-agent-native-app-skeleton] [data-agent-native-app-skeleton-sidebar] { display: none; }
+        }
+      ` }), _jsxs("aside", { "data-agent-native-app-skeleton-sidebar": "true", "aria-hidden": "true", style: {
+                    display: "flex",
+                    width: 248,
+                    flexShrink: 0,
+                    flexDirection: "column",
+                    gap: 16,
+                    borderRight: "1px solid hsl(var(--border, 240 5.9% 90%))",
+                    padding: 16,
+                }, children: [_jsx(Block, { style: { width: 132, height: 32 } }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [0, 1, 2, 3, 4, 5].map((item) => (_jsx(Block, { style: { width: `${68 + (item % 3) * 14}%`, height: 14 } }, item))) })] }), _jsxs("main", { style: {
+                    display: "flex",
+                    minWidth: 0,
+                    flex: 1,
+                    flexDirection: "column",
+                }, children: [_jsxs("header", { "aria-hidden": "true", style: {
+                            display: "flex",
+                            height: 48,
+                            flexShrink: 0,
+                            alignItems: "center",
+                            gap: 12,
+                            borderBottom: "1px solid hsl(var(--border, 240 5.9% 90%))",
+                            padding: "0 16px",
+                        }, children: [_jsx(Block, { style: { width: 32, height: 32, borderRadius: 8 } }), _jsx(Block, { style: { width: 128, height: 14 } })] }), _jsxs("section", { "aria-hidden": "true", style: {
+                            display: "flex",
+                            width: "100%",
+                            maxWidth: 960,
+                            flex: 1,
+                            flexDirection: "column",
+                            gap: 12,
+                            margin: "0 auto",
+                            padding: 24,
+                        }, children: [_jsx(Block, { style: { width: "38%", height: 28, marginBottom: 8 } }), _jsx(Block, { style: { width: "24%", height: 14, marginBottom: 16 } }), [0, 1, 2, 3, 4, 5].map((item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx(Block, { style: { width: 32, height: 32, borderRadius: 8 } }), _jsxs("div", { style: {
+                                            display: "flex",
+                                            flex: 1,
+                                            flexDirection: "column",
+                                            gap: 8,
+                                        }, children: [_jsx(Block, { style: { width: `${52 + (item % 3) * 12}%`, height: 12 } }), _jsx(Block, { style: { width: `${34 + (item % 4) * 10}%`, height: 10 } })] })] }, item)))] })] })] }));
+}

package/dist/client/ClientOnly.d.ts

@@ -3,7 +3,7 @@ import { type ReactNode } from "react";
  * Renders children only on the client (after hydration).
  *
  * Used in root.tsx to wrap all app content so the server only renders
- * the HTML shell (meta tags, styles, scripts) + a fallback spinner.
+ * the HTML shell (meta tags, styles, scripts) + an app-shell skeleton.
  * This prevents hydration mismatches from browser-only APIs like
  * window, localStorage, new Date(), next-themes, etc.
  */

package/dist/client/ClientOnly.js

@@ -4,7 +4,7 @@ const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLa
  * Renders children only on the client (after hydration).
  *
  * Used in root.tsx to wrap all app content so the server only renders
- * the HTML shell (meta tags, styles, scripts) + a fallback spinner.
+ * the HTML shell (meta tags, styles, scripts) + an app-shell skeleton.
  * This prevents hydration mismatches from browser-only APIs like
  * window, localStorage, new Date(), next-themes, etc.
  */

package/dist/client/LanguagePicker.d.ts

@@ -0,0 +1,6 @@
+export declare function LanguagePicker({ className, includeSystem, label, variant, }: {
+    className?: string;
+    includeSystem?: boolean;
+    label?: string;
+    variant?: "select" | "icon" | "ghost-icon";
+}): import("react").JSX.Element;