@agent-native/core 0.124.2 → 0.124.4

package/corpus/templates/content/app/components/editor/database/sidebar.tsx

@@ -12,7 +12,6 @@ import {
   IconDatabase,
   IconDots,
   IconFileText,
-  IconLoader2,
   IconPlus,
   IconStar,
   IconTrash,
@@ -44,6 +43,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
@@ -261,7 +261,6 @@ export function DatabaseSidebarView({
   hierarchyItems,
   hierarchyUniverseItems,
   scroll = true,
-  loadingLabel,
   noMatchesLabel,
   clearLabel,
   navigationLabel,
@@ -286,7 +285,6 @@ export function DatabaseSidebarView({
   hierarchyItems?: ContentDatabaseItem[];
   hierarchyUniverseItems?: ContentDatabaseItem[];
   scroll?: boolean;
-  loadingLabel: string;
   noMatchesLabel: string;
   clearLabel: string;
   navigationLabel: string;
@@ -367,9 +365,19 @@ export function DatabaseSidebarView({
 
   if (isLoading) {
     return (
-      <div className="flex h-16 items-center gap-2 px-2 text-sm text-muted-foreground">
-        <IconLoader2 className="size-4 animate-spin" />
-        {loadingLabel}
+      <div aria-hidden="true" className="grid gap-1 p-1">
+        {[70, 55, 85, 60, 45].map((width, index) => (
+          <div
+            key={`sidebar-skeleton-${index}`}
+            className="flex h-7 items-center gap-1.5 rounded px-1.5"
+          >
+            <Skeleton className="size-3.5 shrink-0 rounded-sm bg-sidebar-foreground/12 dark:bg-sidebar-foreground/10" />
+            <Skeleton
+              className="h-3 rounded bg-sidebar-foreground/12 dark:bg-sidebar-foreground/10"
+              style={{ width: `${width}%` }}
+            />
+          </div>
+        ))}
       </div>
     );
   }

package/corpus/templates/content/app/components/sidebar/DocumentSidebar.tsx

@@ -63,7 +63,6 @@ import { toast } from "sonner";
 
 import { ContentFilesSidebarView } from "@/components/editor/database/sidebar";
 import { QueryErrorState } from "@/components/QueryErrorState";
-import { ThemeToggle } from "@/components/ThemeToggle";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -83,6 +82,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
@@ -133,7 +133,6 @@ import {
   DocumentTreeItem,
   FavoriteDocumentItem,
 } from "./DocumentTreeItem";
-import { NotionButton } from "./NotionButton";
 import {
   contentSpaceAvailability,
   contentSpaceForStoredSelection,
@@ -288,7 +287,7 @@ function WorkspaceFilesSection({
   const failed = filesDatabase.isError || filesPersonalView.isError;
 
   return (
-    <div className="ms-3 border-s border-border/70 pb-1 ps-1">
+    <div className="ms-3 pb-1 ps-1">
       {failed ? (
         <QueryErrorState
           compact
@@ -329,7 +328,6 @@ function WorkspaceFilesSection({
           onDeleteItem={onDeleteItem}
           onToggleFavorite={onToggleFavorite}
           labels={{
-            loadingLabel: t("sidebar.loadingFiles"),
             noMatchesLabel: t("database.noRowsMatchThisView"),
             clearLabel: t("database.clearSearchAndFilters"),
             navigationLabel: `${space.name} ${t("sidebar.files")}`,
@@ -1407,12 +1405,12 @@ export function DocumentSidebar({
   };
 
   const renderTreeSkeleton = () => (
-    <div className="space-y-1 px-3 py-1">
+    <div aria-hidden="true" className="grid gap-1 px-3 py-1">
       {[70, 55, 85, 60, 45].map((w, i) => (
         <div key={i} className="flex items-center gap-2 px-1 py-1.5">
-          <div className="h-3.5 w-3.5 shrink-0 animate-pulse rounded bg-muted" />
-          <div
-            className="h-3.5 animate-pulse rounded bg-muted"
+          <Skeleton className="size-3.5 shrink-0 rounded-sm bg-sidebar-foreground/12 dark:bg-sidebar-foreground/10" />
+          <Skeleton
+            className="h-3 rounded bg-sidebar-foreground/12 dark:bg-sidebar-foreground/10"
             style={{ width: `${w}%` }}
           />
         </div>
@@ -1611,7 +1609,6 @@ export function DocumentSidebar({
               }}
               scroll={false}
               labels={{
-                loadingLabel: t("sidebar.loadingFiles"),
                 noMatchesLabel: t("database.noRowsMatchThisView"),
                 clearLabel: t("database.clearSearchAndFilters"),
                 navigationLabel: "Content navigation",
@@ -1637,9 +1634,7 @@ export function DocumentSidebar({
           </div>
         </div>
       ) : contentSpaceState === "loading" ? (
-        <div className="px-3 py-4 text-center text-sm text-muted-foreground">
-          {t("sidebar.loadingFiles")}
-        </div>
+        renderTreeSkeleton()
       ) : (
         <QueryErrorState
           compact
@@ -1656,7 +1651,7 @@ export function DocumentSidebar({
     const collapsed = collapsedSections.trash;
 
     return (
-      <div className="mt-3 border-t border-border/60 pt-2">
+      <div className="mt-3 pt-2">
         <div className="px-2">
           <button
             type="button"
@@ -2025,26 +2020,30 @@ export function DocumentSidebar({
                     </Link>
                   </div>
                   {!collapsedSections.favorites &&
-                    favorites.map((doc) => (
-                      <FavoriteDocumentItem
-                        key={doc.id}
-                        document={doc}
-                        active={doc.id === activeDocumentId}
-                        sidebarWidth={favoriteRowWidth}
-                        onSelect={() => {
-                          handleOpenFavorite(doc);
-                          onNavigate?.();
-                        }}
-                        onCreateChildPage={() => void handleCreatePage(doc.id)}
-                        onCreateChildDatabase={() =>
-                          void handleCreateDatabase(doc.id)
-                        }
-                        onRemoveFavorite={() =>
-                          handleToggleFavorite(doc.id, false)
-                        }
-                        onDelete={() => void handleDelete(doc.id)}
-                      />
-                    ))}
+                    (isLoading
+                      ? renderTreeSkeleton()
+                      : favorites.map((doc) => (
+                          <FavoriteDocumentItem
+                            key={doc.id}
+                            document={doc}
+                            active={doc.id === activeDocumentId}
+                            sidebarWidth={favoriteRowWidth}
+                            onSelect={() => {
+                              handleOpenFavorite(doc);
+                              onNavigate?.();
+                            }}
+                            onCreateChildPage={() =>
+                              void handleCreatePage(doc.id)
+                            }
+                            onCreateChildDatabase={() =>
+                              void handleCreateDatabase(doc.id)
+                            }
+                            onRemoveFavorite={() =>
+                              handleToggleFavorite(doc.id, false)
+                            }
+                            onDelete={() => void handleDelete(doc.id)}
+                          />
+                        )))}
                 </div>
               )}
 
@@ -2080,10 +2079,6 @@ export function DocumentSidebar({
       {/* Footer */}
       <div className="shrink-0 space-y-2 px-3 py-2">
         {isCodeMode ? <DevDatabaseLink /> : null}
-        <div className="flex justify-end gap-0.5">
-          <NotionButton />
-          <ThemeToggle />
-        </div>
         <SidebarFooterActions
           feedback={feedbackButton}
           translate={translateButton}

package/corpus/templates/content/changelog/2026-07-27-content-sidebar-page-lists-now-load-with-quiet-skeletons-and.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-27
+---
+
+Content sidebar page lists now load with quiet skeletons and less visual chrome.

package/corpus/templates/design/.agents/skills/design-generation/SKILL.md

@@ -249,7 +249,12 @@ Favor choice-first questions (2-5 concrete options, `allowOther: true`, and a
 combining multiple answers — stacking multi-select questions multiplies
 follow-up ambiguity instead of resolving it.
 
-**Carry the form-factor answer through to generation — do not just ask and discard it.** A "Desktop web app" answer means the generated screen's canvas frame must be desktop-sized (~1440×1024), not left at whatever a screen with no placement falls back to. Map the answer to real frame geometry: pass `deviceType` (`"mobile"` / `"tablet"` / `"desktop"`) per screen to `generate-screens`, explicit `width`/`height` per variant to `present-design-variants`, or an explicit `canvasFrames` entry to `generate-design` — see Phase 2 and Phase 3 below. For "Both / responsive," generate at desktop width and rely on the responsive breakpoint system (see `responsive-breakpoints` skill) rather than guessing a size.
+**Carry the form-factor answer through to generation — do not just ask and discard it.** Map the answer to the design's device SET, not to separate per-device screen files. Device widths of the SAME page are breakpoint frames of one document (see the `responsive-breakpoints` skill), never a `mobile.html` + `desktop.html` pair. Pass the answer through `generate-design`'s `devices` param — `("mobile"|"tablet"|"desktop")[]`, default `["desktop","mobile"]`:
+
+- If the prompt/answer names specific devices, generate EXACTLY those, deduped ("mobile" only → one mobile frame; "mobile, tablet, desktop" → all three).
+- If nothing about form factor is specified — or the answer is "Both / responsive" or "Decide for me" — default to `["desktop","mobile"]`: a Desktop base + a Mobile frame only. Never auto-add a tablet, a redundant desktop, or a stray duplicate frame.
+
+The WIDEST requested device is the base/primary frame; narrower devices become breakpoint frames (never at the primary width). Device frame sizes: mobile 390×844, tablet 768×1024, desktop 1440×900. `present-design-variants` still takes explicit `width`/`height` per variant to size its exploration screens (see Phase 2).
 
 ### Phase 2 — Generate side-by-side variations (2-5, three by default)
 
@@ -264,16 +269,16 @@ screen name.
   "designId": "<the design id>",
   "prompt": "Pick a direction",
   "variants": [
-    { "id": "a", "label": "Editorial Serif", "width": 1440, "height": 1024, "content": "<!DOCTYPE html>...full self-contained HTML..." },
-    { "id": "b", "label": "Bold Brutalist", "width": 1440, "height": 1024, "content": "<!DOCTYPE html>..." },
-    { "id": "c", "label": "Soft & Spacious", "width": 1440, "height": 1024, "content": "<!DOCTYPE html>..." }
+    { "id": "a", "label": "Editorial Serif", "width": 1440, "height": 900, "content": "<!DOCTYPE html>...full self-contained HTML..." },
+    { "id": "b", "label": "Bold Brutalist", "width": 1440, "height": 900, "content": "<!DOCTYPE html>..." },
+    { "id": "c", "label": "Soft & Spacious", "width": 1440, "height": 900, "content": "<!DOCTYPE html>..." }
   ]
 }
 ```
 
 Each `content` is a complete, self-contained document (Alpine.js + Tailwind via CDN, full `<head>`, CSS variables in `:root`). Variations should be **stylistically/structurally distinct** — different typography schools, layout grammars, color moods — never just color swaps. Label them with concrete style names ("Editorial Serif", not "Variant A").
 
-Pass `width`/`height` on every variant to match the form-factor answer (mobile ≈ 390×844, tablet ≈ 768×1024, desktop ≈ 1440×1024) — the example above is desktop-sized. When `content` is omitted, `present-design-variants` infers a size from the prompt/label/description text and the width/height you pass still wins when given.
+Pass `width`/`height` on every variant to match the form-factor answer (mobile ≈ 390×844, tablet ≈ 768×1024, desktop ≈ 1440×900) — the example above is desktop-sized. When `content` is omitted, `present-design-variants` infers a size from the prompt/label/description text and the width/height you pass still wins when given.
 
 Wait for the user's pick before refining. Once they choose, keep the selected
 screen, delete the unchosen variant screens with `delete-file`, and continue
@@ -299,10 +304,11 @@ pnpm action generate-design \
   --prompt "Description of the design" \
   --files '[{"filename":"index.html","content":"<full HTML>","fileType":"html"}]' \
   --tweaks '[{"id":"accent","label":"Accent","type":"color-swatch","options":[...],"defaultValue":"#0EA5E9","cssVar":"--color-accent"}]' \
-  --canvasFrames '[{"filename":"index.html","x":0,"y":0,"width":1440,"height":1024}]'
+  --devices '["desktop","mobile"]' \
+  --canvasFrames '[{"filename":"index.html","x":0,"y":0,"width":1440,"height":900}]'
 ```
 
-Always pass `canvasFrames` with an explicit `width`/`height` matching the form-factor answer (mobile ≈ 390×844, tablet ≈ 768×1024, desktop ≈ 1440×1024 as above) — a screen saved without a placement falls back to a generic default that won't match a desktop-intended design. For multiple screens generated together, call `generate-screens` first and pass `deviceType` (`"mobile"` / `"tablet"` / `"desktop"`) per screen; it returns the matching `canvasFrame` to forward to each `generate-design` call.
+Pass the `devices` param (`("mobile"|"tablet"|"desktop")[]`, default `["desktop","mobile"]`) so a new design renders the right device frames: the widest device becomes the primary `canvasFrames` placement and each narrower device is added as a breakpoint frame of the SAME document — not an extra file. Default to Desktop + Mobile when the form factor is unspecified; never auto-add a tablet or a redundant desktop. When you also pass `canvasFrames` explicitly, size the primary to the widest device (mobile ≈ 390×844, tablet ≈ 768×1024, desktop ≈ 1440×900) — a screen saved without a placement falls back to a generic default that won't match the intended device. For genuinely distinct screens generated together (Home / Dashboard / Checkout — NOT per-device copies of one page), call `generate-screens` first; it returns the matching `canvasFrame` to forward to each `generate-design` call.
 
 #### Non-web sizes — ad units, print one-pagers, social sizes
 
@@ -411,7 +417,11 @@ Every `index.html` must include:
     }
 
     /* Base styles */
-    body { font-family: var(--font-body); }
+    body {
+      font-family: var(--font-body);
+      min-height: 100vh;
+      min-height: 100dvh; /* fill the frame — see Full-height frames below */
+    }
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-heading);
       text-wrap: balance;
@@ -430,14 +440,24 @@ Every `index.html` must include:
   </style>
 </head>
 <body class="bg-[var(--color-primary)] text-[var(--color-text)]">
-  <!-- All interactive state goes on a root x-data -->
-  <div x-data="{ /* component state */ }">
+  <!-- Root wrapper fills the device viewport: prefer min-h-screen over inline height:100vh -->
+  <div x-data="{ /* component state */ }" class="min-h-screen">
     <!-- Content -->
   </div>
 </body>
 </html>
 ```
 
+**Full-height frames.** Overview frames now default to at least the device
+viewport height and grow to fit their own content at their own width
+(Framer-style), so a short page must still fill its frame instead of leaving a
+stubby box. The mandatory `body` rule above sets `min-height: 100dvh` (with a
+`100vh` fallback) for exactly this. Put full-height intent on the top-level
+wrapper with Tailwind's `min-h-screen` rather than raw inline `height: 100vh` —
+the editor keeps device-anchored full-height utilities pinned to the device
+viewport, so a full-height hero fills the frame without triggering runaway
+growth.
+
 ### Alpine.js Patterns
 
 **State management** — use `x-data` on the highest-level container:
@@ -661,7 +681,10 @@ Fontshare `<link>`/`@import` and confirm it renders.
 
 A prototype with more than one screen is **multiple files** in the same design
 (e.g. `index.html`, `dashboard.html`, `checkout.html`). The editor shows them
-all in the artboard/overview and as screen tabs.
+all in the artboard/overview and as screen tabs. This is only for genuinely
+distinct screens — the mobile and desktop views of the *same* page are
+breakpoint frames of ONE document (the `devices` param + the
+`responsive-breakpoints` model), never a second file.
 
 The preview renders each file in a sandboxed `srcdoc` iframe. A real
 `<a href="/pricing">` or `<a href="page.html">` resolves against the *app* URL

package/corpus/templates/design/.agents/skills/responsive-breakpoints/SKILL.md

@@ -27,6 +27,14 @@ scopes to `≤ 809px`). `breakpointUpperBoundPx` in
 
 ## Managing breakpoints
 
+A newly generated design's frame set comes from `generate-design`'s `devices`
+param (`("mobile"|"tablet"|"desktop")[]`, default `["desktop","mobile"]`). The
+cascade is **desktop-base**: the widest requested device is the primary/base
+frame and each narrower device is a breakpoint frame. The default injected set
+is therefore a Desktop base plus a single Mobile (390) breakpoint frame — the
+narrower frame(s) only, never a frame at the primary desktop width and never an
+auto-added tablet.
+
 - `add-breakpoint` — adds a device-width frame to `designs.data.breakpointSet`
   (Framer defaults: Desktop 1200 / Tablet 810 / Phone 390, or custom 320-3840).
   Duplicate widths are ignored.