@agent-native/core 0.136.4 → 0.137.0

package/corpus/templates/content/parity/matrix.md

@@ -9,7 +9,7 @@ This generated matrix tracks whether high-value Content UI operations use the sa
 | database.lifecycle-and-trash                       | database    | Create, soft-delete, restore, list, and inspect content databases                                         | action-backed         | `create-content-database`, `create-inline-content-database`, `delete-content-database`, `get-content-database`, `list-content-databases`, `list-trashed-content-databases`, `restore-content-database`                                                                                                                                                                                                      | `app/components/editor/SlashCommandMenu.tsx`, `app/hooks/use-content-database.ts`, `app/hooks/use-documents.ts`                                                                           | Database pages and database records are created, read, soft-deleted, restored, and listed.                                                                                                                                                                                                | -                                                                                                                                                                                                                                          | -                | P0             | covered       | `actions/content-database-lifecycle.db.test.ts`                                                                                                                                                                         | `database-source-scope`          | -                              |
 | database.private-preview-drafts                    | database    | Persist and reconcile a user's private database-page preview draft                                        | action-backed         | `get-preview-document-draft`, `update-preview-document-draft`                                                                                                                                                                                                                                                                                                                                               | `app/components/editor/database/DatabaseView.tsx`, `app/hooks/use-documents.ts`                                                                                                           | A user's private preview draft is read, saved, conflict-checked, or deleted without changing the shared database page until the normal save flow applies it.                                                                                                                              | These per-user editor-state actions are intentionally hidden from agent tools because preview drafts are a private UI recovery mechanism.                                                                                                  | -                | P1             | covered       | `actions/preview-document-draft.db.test.ts`                                                                                                                                                                             | -                                | -                              |
 | database.properties-and-view-config                | database    | Configure properties, values, ordering, and saved views                                                   | action-backed         | `configure-document-property`, `delete-document-property`, `duplicate-document-property`, `get-content-database-personal-view`, `list-document-properties`, `reorder-document-property`, `set-document-property`, `update-content-database-personal-view`, `update-content-database-view`                                                                                                                   | `app/components/editor/DocumentProperties.tsx`, `app/components/editor/DocumentDatabase.tsx`, `app/components/editor/database/DatabaseView.tsx`, `app/hooks/use-document-properties.ts`   | Property schemas, property values, property order, filters, sorts, grouping, hidden columns, view type, and view settings are stored.                                                                                                                                                     | -                                                                                                                                                                                                                                          | -                | P0             | covered       | `actions/bind-content-database-source-field.db.test.ts`, `actions/content-database-source-actions.test.ts`, `actions/resync-content-database-source.db.test.ts`                                                         | `database-source-scope`          | -                              |
-| database.rows                                      | database    | Add, duplicate, move, open, edit, and remove database rows                                                | action-backed         | `add-database-item`, `remove-database-items`, `duplicate-database-items`, `duplicate-database-item`, `move-database-item`, `set-document-property`                                                                                                                                                                                                                                                          | `app/components/editor/DocumentDatabase.tsx`, `app/components/editor/database/DatabaseView.tsx`                                                                                           | Database row memberships and ordering are created, duplicated, moved, edited, and removed without deleting the backing page.                                                                                                                                                              | -                                                                                                                                                                                                                                          | -                | P0             | covered       | `actions/database-row-batch-actions.db.test.ts`, `parity/__tests__/database-row-batch-reliability.test.ts`                                                                                                              | `database-bulk-row-reliability`  | -                              |
+| database.rows                                      | database    | Add, duplicate, move, open, edit, and remove database rows                                                | action-backed         | `add-database-item`, `upsert-database-item-by-key`, `remove-database-items`, `duplicate-database-items`, `duplicate-database-item`, `move-database-item`, `set-document-property`                                                                                                                                                                                                                           | `app/components/editor/DocumentDatabase.tsx`, `app/components/editor/database/DatabaseView.tsx`                                                                                           | Database row memberships and ordering are created, duplicated, moved, edited, and removed without deleting the backing page.                                                                                                                                                              | -                                                                                                                                                                                                                                          | -                | P0             | covered       | `actions/database-row-batch-actions.db.test.ts`, `parity/__tests__/database-row-batch-reliability.test.ts`                                                                                                              | `database-bulk-row-reliability`  | -                              |
 | database.table-query-page                          | database    | Query one constrained page while retaining database metadata                                              | action-backed         | `query-content-database-items`                                                                                                                                                                                                                                                                                                                                                                              | `app/components/editor/database/DatabaseView.tsx`, `app/hooks/use-content-database.ts`                                                                                                    | -                                                                                                                                                                                                                                                                                         | This UI-only bounded projection is intentionally hidden with agentTool: false; agents use get-content-database for the complete database contract.                                                                                         | -                | P0             | covered       | `actions/content-database-lifecycle.db.test.ts`, `app/hooks/use-content-database.test.ts`                                                                                                                               | -                                | -                              |
 | editor.agent-assist-prompts                        | editor      | Ask AI from slash generation or comment context                                                           | client-assist         | -                                                                                                                                                                                                                                                                                                                                                                                                           | `app/components/editor/SlashCommandMenu.tsx`, `app/components/editor/CommentsSidebar.tsx`                                                                                                 | No direct durable mutation; the prompt asks the agent to use document actions when it decides to write.                                                                                                                                                                                   | -                                                                                                                                                                                                                                          | -                | P1             | none          | -                                                                                                                                                                                                                       | -                                | -                              |
 | editor.client-formatting-and-insertions            | editor      | Rich text formatting, selection state, slash block insertion, and copy actions                            | client-only-ephemeral | -                                                                                                                                                                                                                                                                                                                                                                                                           | `app/components/editor/BubbleToolbar.tsx`, `app/components/editor/SlashCommandMenu.tsx`, `app/components/editor/DocumentToolbar.tsx`                                                      | -                                                                                                                                                                                                                                                                                         | -                                                                                                                                                                                                                                          | -                | P1             | none          | -                                                                                                                                                                                                                       | -                                | -                              |

package/corpus/templates/content/parity/matrix.ts

@@ -323,6 +323,7 @@ export const parityMatrix: ParityRow[] = [
     status: "action-backed",
     actions: [
       "add-database-item",
+      "upsert-database-item-by-key",
       "remove-database-items",
       "duplicate-database-items",
       "duplicate-database-item",

package/corpus/templates/content/server/db/schema.ts

@@ -287,6 +287,33 @@ export const contentDatabaseItems = table(
   ],
 );
 
+// Opt-in stable-key claims are the durable concurrency fence for the generic
+// database-row upsert action. They intentionally do not constrain ordinary
+// property editing or change add-database-item behavior.
+export const contentDatabaseItemKeyClaims = table(
+  "content_database_item_key_claims",
+  {
+    id: text("id").primaryKey(),
+    ownerEmail: text("owner_email").notNull().default("local@localhost"),
+    orgId: text("org_id"),
+    databaseId: text("database_id").notNull(),
+    propertyId: text("property_id").notNull(),
+    keyValueJson: text("key_value_json").notNull(),
+    itemId: text("item_id").notNull(),
+    documentId: text("document_id").notNull(),
+    createdAt: text("created_at").notNull().default(now()),
+    updatedAt: text("updated_at").notNull().default(now()),
+  },
+  (claim) => [
+    uniqueIndex(
+      "content_database_item_key_claims_database_property_value_unique",
+    ).on(claim.databaseId, claim.propertyId, claim.keyValueJson),
+    uniqueIndex(
+      "content_database_item_key_claims_database_property_document_unique",
+    ).on(claim.databaseId, claim.propertyId, claim.documentId),
+  ],
+);
+
 export const contentDatabaseBodyHydrationQueue = table(
   "content_database_body_hydration_queue",
   {

package/corpus/templates/content/server/plugins/db.ts

@@ -908,6 +908,30 @@ const runContentMigrations = runMigrations(
             WHERE legacy_database_trash.document_id = documents.id
           )`,
     },
+    {
+      version: 78,
+      name: "content-database-item-stable-key-claims",
+      sql: `CREATE TABLE IF NOT EXISTS content_database_item_key_claims (
+        id TEXT PRIMARY KEY,
+        owner_email TEXT NOT NULL DEFAULT 'local@localhost',
+        org_id TEXT,
+        database_id TEXT NOT NULL,
+        property_id TEXT NOT NULL,
+        key_value_json TEXT NOT NULL,
+        item_id TEXT NOT NULL,
+        document_id TEXT NOT NULL,
+        created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+        updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+      );
+      CREATE UNIQUE INDEX IF NOT EXISTS content_database_item_key_claims_database_property_value_unique ON content_database_item_key_claims (database_id, property_id, key_value_json);
+      CREATE INDEX IF NOT EXISTS content_database_item_key_claims_item_idx ON content_database_item_key_claims (item_id);
+      CREATE INDEX IF NOT EXISTS content_database_item_key_claims_document_idx ON content_database_item_key_claims (document_id)`,
+    },
+    {
+      version: 79,
+      name: "content-database-item-stable-key-single-active-claim",
+      sql: `CREATE UNIQUE INDEX IF NOT EXISTS content_database_item_key_claims_database_property_document_unique ON content_database_item_key_claims (database_id, property_id, document_id)`,
+    },
   ],
   { table: "content_migrations" },
 );

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

@@ -181,142 +181,150 @@ export function BreakpointDeviceControl({
   return (
     <div
       data-breakpoint-device-control
-      className={cn(
-        "flex shrink-0 items-center gap-0.5 rounded-md bg-[var(--design-editor-control-bg)] p-0.5",
-        className,
-      )}
+      className={cn("flex shrink-0 items-center gap-1", className)}
     >
-      {/* Base segment — the primary/widest editing context. Icon-only with
+      {/* Only the selectable segments share the tinted, inset group. "+" adds a
+          breakpoint rather than targeting one, so it must stay outside this
+          surface — inside it, it reads as one more segment to select. */}
+      <div className="flex items-center gap-0.5 rounded-md bg-[var(--design-editor-control-bg)] p-0.5">
+        {/* Base segment — the primary/widest editing context. Icon-only with
           the label in the tooltip: this control shares one cramped
           inspector-header row with the collaborators menu and play/share
           actions (~300px total), so every segment stays as narrow as it
           can. */}
-      <button
-        type="button"
-        className={segmentClass(baseActive)}
-        aria-pressed={baseActive}
-        aria-label={t("designEditor.breakpointBar.base")}
-        onClick={() => onSelect(undefined)}
-        title={
-          baseWidthPx != null
-            ? `${t("designEditor.breakpointBar.base")} · ${Math.round(baseWidthPx)}px`
-            : t("designEditor.breakpointBar.base")
-        }
-      >
-        <IconViewportWide className="size-3.5" />
-      </button>
+        <button
+          type="button"
+          className={segmentClass(baseActive)}
+          aria-pressed={baseActive}
+          aria-label={t("designEditor.breakpointBar.base")}
+          onClick={() => onSelect(undefined)}
+          title={
+            baseWidthPx != null
+              ? `${t("designEditor.breakpointBar.base")} · ${Math.round(baseWidthPx)}px`
+              : t("designEditor.breakpointBar.base")
+          }
+        >
+          <IconViewportWide className="size-3.5" />
+        </button>
 
-      {/* One segment per breakpoint, widest → narrowest. Clicking always
+        {/* One segment per breakpoint, widest → narrowest. Clicking always
           SELECTS (never toggles off) — returning to Base is the Base
           segment, clicking the base frame/empty canvas, or Escape (the
           Framer click-to-target model). */}
-      {ordered.map((breakpoint) => {
-        const active = activeWidthPx === breakpoint.widthPx;
-        const menuOpen = menuOpenFor === breakpoint.id;
-        const showMenuAffordance = Boolean(
-          canEdit && (onRemove || onChangeWidth) && (active || menuOpen),
-        );
-        return (
-          <div key={breakpoint.id} className="relative flex items-center">
-            <button
-              type="button"
-              className={segmentClass(active)}
-              aria-pressed={active}
-              onClick={() => onSelect(breakpoint.widthPx)}
-              title={`${breakpoint.label} · ${breakpoint.widthPx}px`}
-            >
-              {/* ITEM 8a — device icon (by width bucket) + width number.
+        {ordered.map((breakpoint) => {
+          const active = activeWidthPx === breakpoint.widthPx;
+          const menuOpen = menuOpenFor === breakpoint.id;
+          const showMenuAffordance = Boolean(
+            canEdit && (onRemove || onChangeWidth) && (active || menuOpen),
+          );
+          return (
+            <div key={breakpoint.id} className="relative flex items-center">
+              <button
+                type="button"
+                className={segmentClass(active)}
+                aria-pressed={active}
+                onClick={() => onSelect(breakpoint.widthPx)}
+                title={`${breakpoint.label} · ${breakpoint.widthPx}px`}
+              >
+                {/* ITEM 8a — device icon (by width bucket) + width number.
                   Kept compact (size-3, one notch smaller than Base's
                   size-3.5) so the segment still fits this ~300px
                   inspector-header row next to play/share; the full label
                   stays in the tooltip. */}
-              <DeviceIcon widthPx={breakpoint.widthPx} />
-              <span>{breakpoint.widthPx}</span>
-            </button>
-            {/* "…" — per-breakpoint options (Change width / Remove). Shown
+                <DeviceIcon widthPx={breakpoint.widthPx} />
+                <span>{breakpoint.widthPx}</span>
+              </button>
+              {/* "…" — per-breakpoint options (Change width / Remove). Shown
                 for the ACTIVE segment (and while its menu is open) so idle
                 segments stay clean; replaces the old hover-"X" that both
                 shifted layout and, being buried in a floating bar, was easy
                 to miss entirely. */}
-            {showMenuAffordance ? (
-              <DropdownMenu
-                open={menuOpen}
-                onOpenChange={(open) => {
-                  setMenuOpenFor(open ? breakpoint.id : null);
-                  setWidthDraft(open ? String(breakpoint.widthPx) : "");
-                }}
-              >
-                <DropdownMenuTrigger asChild>
-                  <button
-                    type="button"
-                    aria-label={t("designEditor.breakpointBar.options")}
-                    className="flex h-6 w-4 shrink-0 cursor-pointer items-center justify-center rounded-[5px] text-muted-foreground hover:text-foreground"
-                    onClick={(event) => event.stopPropagation()}
-                  >
-                    <IconDots className="size-3" />
-                  </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  align="end"
-                  className="design-editor-app-menu-content w-52 rounded-lg bg-[var(--design-editor-panel-bg)] p-1"
+              {showMenuAffordance ? (
+                <DropdownMenu
+                  open={menuOpen}
+                  onOpenChange={(open) => {
+                    setMenuOpenFor(open ? breakpoint.id : null);
+                    setWidthDraft(open ? String(breakpoint.widthPx) : "");
+                  }}
                 >
-                  {/* Change width — inline input row; Enter commits.
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label={t("designEditor.breakpointBar.options")}
+                      className="flex h-6 w-4 shrink-0 cursor-pointer items-center justify-center rounded-[5px] text-muted-foreground hover:text-foreground"
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <IconDots className="size-3" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    align="end"
+                    className="design-editor-app-menu-content w-52 rounded-lg bg-[var(--design-editor-panel-bg)] p-1"
+                  >
+                    {/* Change width — inline input row; Enter commits.
                       Key events stay local (stopPropagation) so the menu's
                       typeahead/arrow navigation doesn't steal keystrokes
                       from the input. */}
-                  {onChangeWidth ? (
-                    <div className="flex items-center gap-1.5 px-1.5 py-1">
-                      <span className="shrink-0 !text-[11px] text-muted-foreground">
-                        {t("designEditor.breakpointBar.changeWidth")}
-                      </span>
-                      <Input
-                        type="number"
-                        min={320}
-                        max={3840}
-                        value={widthDraft}
-                        autoFocus
-                        onChange={(event) => setWidthDraft(event.target.value)}
-                        onKeyDown={(event) => {
-                          event.stopPropagation();
-                          if (event.key !== "Enter") return;
-                          event.preventDefault();
-                          const widthPx = parseBreakpointWidthInput(
-                            widthDraft,
-                            existingWidths.filter(
-                              (width) => width !== breakpoint.widthPx,
-                            ),
-                          );
-                          setMenuOpenFor(null);
-                          if (
-                            widthPx !== null &&
-                            widthPx !== breakpoint.widthPx
-                          ) {
-                            onChangeWidth(breakpoint.id, widthPx);
+                    {onChangeWidth ? (
+                      <div className="flex items-center gap-1.5 px-1.5 py-1">
+                        <span className="shrink-0 !text-[11px] text-muted-foreground">
+                          {t("designEditor.breakpointBar.changeWidth")}
+                        </span>
+                        <Input
+                          type="number"
+                          min={320}
+                          max={3840}
+                          value={widthDraft}
+                          autoFocus
+                          onChange={(event) =>
+                            setWidthDraft(event.target.value)
                           }
+                          onKeyDown={(event) => {
+                            event.stopPropagation();
+                            if (event.key !== "Enter") return;
+                            event.preventDefault();
+                            const widthPx = parseBreakpointWidthInput(
+                              widthDraft,
+                              existingWidths.filter(
+                                (width) => width !== breakpoint.widthPx,
+                              ),
+                            );
+                            setMenuOpenFor(null);
+                            if (
+                              widthPx !== null &&
+                              widthPx !== breakpoint.widthPx
+                            ) {
+                              onChangeWidth(breakpoint.id, widthPx);
+                            }
+                          }}
+                          className="h-6 px-1.5 !text-[11px] tabular-nums"
+                          aria-label={t(
+                            "designEditor.breakpointBar.changeWidth",
+                          )}
+                        />
+                      </div>
+                    ) : null}
+                    {onChangeWidth && onRemove ? (
+                      <DropdownMenuSeparator />
+                    ) : null}
+                    {onRemove ? (
+                      <DropdownMenuItem
+                        className="h-7 px-2 py-0 !text-[12px] text-destructive focus:text-destructive"
+                        onSelect={() => {
+                          setMenuOpenFor(null);
+                          onRemove(breakpoint.id);
                         }}
-                        className="h-6 px-1.5 !text-[11px] tabular-nums"
-                        aria-label={t("designEditor.breakpointBar.changeWidth")}
-                      />
-                    </div>
-                  ) : null}
-                  {onChangeWidth && onRemove ? <DropdownMenuSeparator /> : null}
-                  {onRemove ? (
-                    <DropdownMenuItem
-                      className="h-7 px-2 py-0 !text-[12px] text-destructive focus:text-destructive"
-                      onSelect={() => {
-                        setMenuOpenFor(null);
-                        onRemove(breakpoint.id);
-                      }}
-                    >
-                      {t("designEditor.breakpointBar.remove")}
-                    </DropdownMenuItem>
-                  ) : null}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            ) : null}
-          </div>
-        );
-      })}
+                      >
+                        {t("designEditor.breakpointBar.remove")}
+                      </DropdownMenuItem>
+                    ) : null}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
 
       {/* "+" — Framer default widths or a custom width. */}
       {canEdit && onAdd ? (
@@ -325,7 +333,7 @@ export function BreakpointDeviceControl({
             <Button
               variant="ghost"
               size="icon"
-              className="size-6 cursor-pointer rounded-[5px] text-muted-foreground hover:text-foreground"
+              className="size-6 shrink-0 cursor-pointer rounded-md text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground"
               title={t("designEditor.breakpointBar.addBreakpoint")}
             >
               <IconPlus className="size-3.5" />

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

@@ -2,7 +2,6 @@ import {
   IconComponents,
   IconFrame,
   IconPhoto,
-  IconTypography,
   IconVector,
 } from "@tabler/icons-react";
 import {
@@ -29,6 +28,7 @@ import {
 } from "@/components/ui/context-menu";
 import { cn } from "@/lib/utils";
 
+import { IconText } from "./inspector/design-icons";
 import type { CanvasLayerHitCandidate } from "./types";
 
 // LIVE-VERIFIED (real Figma, UI3) canvas context menus:
@@ -1177,7 +1177,7 @@ function CanvasLayerCandidateItem({
   const Icon = candidate.info.componentName
     ? IconComponents
     : /^(h[1-6]|p|span|label|input|textarea)$/.test(tag)
-      ? IconTypography
+      ? IconText
       : /^(img|picture|video)$/.test(tag)
         ? IconPhoto
         : /^(svg|path|circle|ellipse|polygon|line)$/.test(tag)

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

@@ -84,7 +84,6 @@ import {
   IconRotate3d,
   IconShadow,
   IconSquare,
-  IconTypography,
   IconUnlink,
   IconVector,
   IconWaveSine,
@@ -224,7 +223,6 @@ import {
   InspectorSegment,
   RowDragHandle,
   SectionIconButton,
-  SectionIconToggle,
   useRowDragReorder,
 } from "./edit-panel/inspector-controls";
 import {
@@ -331,7 +329,7 @@ import {
   type MotionKeyframeCssProperty,
   type ScrubInputChangeMeta,
 } from "./inspector";
-import { IconLayoutSettings } from "./inspector/design-icons";
+import { IconLayoutSettings, IconText } from "./inspector/design-icons";
 import type { DesignPaintType } from "./inspector/DesignColorPicker";
 import {
   GlslShaderEffectSection,
@@ -1156,7 +1154,7 @@ function CodeInspectPanel({
 function elementTypeIcon(element: ElementInfo) {
   if (elementIsComponentSelection(element)) return IconComponents;
   const tag = normalizedElementTagName(element.tagName);
-  if (TEXT_TAGS.has(tag)) return IconTypography;
+  if (TEXT_TAGS.has(tag)) return IconText;
   if (tag === "img" || tag === "video" || tag === "picture") return IconPhoto;
   if (tag === "svg" || tag === "path") return IconVector;
   if (tag === "button" || tag === "a") return IconComponents;
@@ -1573,9 +1571,19 @@ function ExportPreview({
 }) {
   const t = useT();
   const rect = element?.boundingRect;
-  const width = rect?.width ?? 0;
-  const height = rect?.height ?? 0;
-  const aspect = width > 0 && height > 0 ? width / height : 1;
+  // Selection sources disagree on whether boundingRect is populated (layer-tree
+  // picks in overview report nothing), so the rendered bitmap — which exists
+  // only once a real capture succeeded — is the honest size to caption with.
+  const [rendered, setRendered] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  const width = rendered?.width ?? rect?.width ?? null;
+  const height = rendered?.height ?? rect?.height ?? null;
+  const aspect =
+    width != null && height != null && width > 0 && height > 0
+      ? width / height
+      : 1;
   const [state, setState] = useState<
     | { status: "idle" }
     | { status: "loading" }
@@ -1591,6 +1599,7 @@ function ExportPreview({
     let cancelled = false;
     let objectUrl: string | null = null;
     setState({ status: "loading" });
+    setRendered(null);
     void onRender()
       .then((blob) => {
         if (cancelled) return;
@@ -1624,6 +1633,12 @@ function ExportPreview({
             style={{
               imageRendering: "auto",
             }}
+            onLoad={(event) =>
+              setRendered({
+                width: event.currentTarget.naturalWidth,
+                height: event.currentTarget.naturalHeight,
+              })
+            }
           />
         ) : (
           <div className="flex size-full items-center justify-center rounded border border-[var(--design-editor-control-border)] bg-[var(--design-editor-panel-bg)] px-2 text-center !text-[10px] text-muted-foreground">
@@ -1633,9 +1648,43 @@ function ExportPreview({
           </div>
         )}
       </div>
-      <p className="mt-2 text-center text-[10px] tabular-nums text-muted-foreground">
-        {Math.round(width)} × {Math.round(height)}
-      </p>
+      {width != null && height != null ? (
+        <p className="mt-2 text-center text-[10px] tabular-nums text-muted-foreground">
+          {Math.round(width)} × {Math.round(height)}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/** Named, collapsed-by-default "Preview" row. An icon-only toggle in the
+ *  section header reads as "export an image", not "reveal what will export". */
+function ExportPreviewDisclosure({
+  element,
+  onRender,
+}: {
+  element: ElementInfo | null;
+  onRender?: () => Promise<Blob>;
+}) {
+  const [open, setOpen] = useState(false);
+  const label = "Preview"; // i18n-ignore design inspector label
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((shown) => !shown)}
+        aria-expanded={open}
+        className="flex cursor-pointer items-center gap-1 !text-[11px] font-medium text-muted-foreground hover:text-foreground"
+      >
+        {open ? (
+          <IconChevronDown className="size-3 shrink-0" />
+        ) : (
+          <IconChevronRight className="size-3 shrink-0 rtl:-scale-x-100" />
+        )}
+        {label}
+      </button>
+      {open ? <ExportPreview element={element} onRender={onRender} /> : null}
     </div>
   );
 }
@@ -1800,7 +1849,6 @@ export const EditPanel = memo(function EditPanel({
   const [exportSettings, setExportSettings] = useState<ExportSettingsValue>(
     DEFAULT_EXPORT_SETTINGS,
   );
-  const [showExportPreview, setShowExportPreview] = useState(false);
   // Element interaction-state selector (Default / Hover / Focus / …). Owned
   // here (not lifted to the parent) per the mission contract — DesignEditor
   // only needs to react to changes via onInteractionStateChange, it doesn't
@@ -1927,7 +1975,6 @@ export const EditPanel = memo(function EditPanel({
 
   useEffect(() => {
     setExportSettings(DEFAULT_EXPORT_SETTINGS);
-    setShowExportPreview(false);
   }, [selectedElementKey]);
 
   useEffect(() => {
@@ -2368,22 +2415,7 @@ export const EditPanel = memo(function EditPanel({
                 </>
               )}
               {onExport ? (
-                <PanelSection
-                  title={t("editPanel.sections.export")}
-                  actions={
-                    <SectionIconToggle
-                      label={
-                        showExportPreview
-                          ? "Hide preview" /* i18n-ignore design inspector action */
-                          : "Show preview" /* i18n-ignore design inspector action */
-                      }
-                      active={showExportPreview}
-                      onClick={() => setShowExportPreview((shown) => !shown)}
-                    >
-                      <IconPhoto className="size-3.5" />
-                    </SectionIconToggle>
-                  }
-                >
+                <PanelSection title={t("editPanel.sections.export")}>
                   <ExportSettingsPanel
                     key={selectedElementKey}
                     value={exportSettings}
@@ -2402,12 +2434,14 @@ export const EditPanel = memo(function EditPanel({
                     }
                     onExport={onExport}
                   />
-                  {showExportPreview ? (
-                    <ExportPreview
-                      element={inspectorElement}
-                      onRender={onRenderExportPreview}
-                    />
-                  ) : null}
+                  {/* Distinct from the settings panel's key: two siblings
+                      sharing one key makes React duplicate the panel on every
+                      re-render, so the section grows an Export block per tick. */}
+                  <ExportPreviewDisclosure
+                    key={`${selectedElementKey}:preview`}
+                    element={inspectorElement}
+                    onRender={onRenderExportPreview}
+                  />
                 </PanelSection>
               ) : null}