@agent-native/core 0.182.1 → 0.182.2-nightly-20260917225811

package/corpus/templates/design/app/pages/design-editor/commands/visual-duplicate-change.ts

@@ -252,6 +252,7 @@ export function runVisualDuplicateChange(
   applyLocalContentUpdate(nextContent, {
     refreshPreview: false,
     forcePreviewFullDocument: true,
+    historyBeforeContent: baseContent,
     // Covers the write landing on the NON-Yjs local fallback stack (the
     // Yjs UndoManager isn't ready yet — e.g. `!isSynced` right after a
     // fresh page load). The stampYjsUndoSelection call below covers the

package/corpus/templates/design/app/pages/design-editor/editor-helpers.ts

@@ -21,26 +21,76 @@ export function runtimeMultiplicityForElementProvenance(
   info: ElementInfo | null | undefined,
 ): number {
   const provenance = info?.provenance;
-  if (!provenance?.sourceFile || !provenance.line || !provenance.column) {
+  const runtimeComponent = info?.runtimeComponent;
+  const hasInvocationProvenance = Boolean(
+    runtimeComponent?.sourceFile &&
+    runtimeComponent.line &&
+    runtimeComponent.column,
+  );
+  const sourceFile = hasInvocationProvenance
+    ? runtimeComponent?.sourceFile
+    : provenance?.sourceFile;
+  const line = hasInvocationProvenance
+    ? runtimeComponent?.line
+    : provenance?.line;
+  const column = hasInvocationProvenance
+    ? runtimeComponent?.column
+    : provenance?.column;
+  const componentName = hasInvocationProvenance
+    ? runtimeComponent?.name
+    : provenance?.component;
+  if (!sourceFile || !line || !column) {
     return 1;
   }
   let count = 0;
+  const invocationKeys = hasInvocationProvenance
+    ? new Set<string>()
+    : undefined;
   for (const snapshot of Object.values(snapshots)) {
     const projection = buildCodeLayerProjection(snapshot.html);
     for (const node of projection.nodes) {
       const attrs = node.dataAttributes;
       if (
-        attrs["data-source-file"] === provenance.sourceFile &&
-        Number(attrs["data-source-line"]) === provenance.line &&
-        Number(attrs["data-source-column"]) === provenance.column &&
-        (!provenance.component ||
-          attrs["data-component-name"] === provenance.component)
+        hasInvocationProvenance &&
+        runtimeComponent?.componentId &&
+        attrs["data-agent-native-runtime-component-id"] !==
+          runtimeComponent.componentId
+      ) {
+        continue;
+      }
+      const sourceFileAttribute = hasInvocationProvenance
+        ? "data-source-owner-file"
+        : "data-source-file";
+      const lineAttribute = hasInvocationProvenance
+        ? "data-source-owner-line"
+        : "data-source-line";
+      const columnAttribute = hasInvocationProvenance
+        ? "data-source-owner-column"
+        : "data-source-column";
+      if (
+        attrs[sourceFileAttribute] === sourceFile &&
+        Number(attrs[lineAttribute]) === line &&
+        Number(attrs[columnAttribute]) === column &&
+        (!componentName || attrs["data-component-name"] === componentName)
       ) {
-        count += 1;
+        if (invocationKeys) {
+          invocationKeys.add(
+            JSON.stringify([
+              runtimeComponent?.componentId ?? "",
+              attrs[sourceFileAttribute],
+              attrs[lineAttribute],
+              attrs[columnAttribute],
+              attrs["data-source-owner-key"] ?? "",
+              attrs["data-component-name"] ?? "",
+            ]),
+          );
+        } else {
+          count += 1;
+        }
       }
     }
   }
-  return Math.max(1, count);
+  return Math.max(1, invocationKeys?.size ?? count);
 }
 
 export function buildSignInHrefForDesignIntent(

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

@@ -599,6 +599,12 @@ export function restorePendingFileContent<
 
 export interface FileContentSaveRequest {
   identityMigrationSourceContent?: string;
+  /**
+   * CAS base for the durable latest-content replay. Normal saves keep their
+   * per-edit base so the serialized chain remains strict; the outbox needs the
+   * oldest unacknowledged base so a pagehide can replay the full snapshot.
+   */
+  unloadExpectedVersionHash?: string;
   id: string;
   content: string;
   syncCollab: boolean;
@@ -610,6 +616,19 @@ export interface FileContentSaveRequest {
   expectedVersionHash: string;
 }
 
+/**
+ * A pagehide request must retain its own CAS base. The durable outbox may fold
+ * later edits onto the oldest base, but a direct keepalive can race that
+ * predecessor and must remain replayable in operation order.
+ */
+export function prepareFileContentSaveKeepalive(
+  pending: FileContentSaveRequest,
+): FileContentSaveRequest {
+  return pending.unloadExpectedVersionHash === undefined
+    ? pending
+    : { ...pending, unloadExpectedVersionHash: undefined };
+}
+
 export function coalescePendingFileContentSave(
   next: FileContentSaveRequest,
   pending: FileContentSaveRequest | undefined,
@@ -637,10 +656,8 @@ type FileContentSaveRequestsById = Readonly<
 export function shouldClearLatestUnloadSave(
   latest: FileContentSaveRequest | undefined,
   completed: FileContentSaveRequest,
-  skippedStaleMirror = false,
 ): boolean {
   return Boolean(
-    !skippedStaleMirror &&
     latest &&
     latest.id === completed.id &&
     latest.content === completed.content &&
@@ -650,6 +667,50 @@ export function shouldClearLatestUnloadSave(
   );
 }
 
+/**
+ * A completed predecessor advances a newer unload replay from its old CAS
+ * base. Mutate the request in place so debounce slots and save chains keep the
+ * same request object, then let the caller re-journal its updated payload.
+ */
+export function advanceLatestUnloadSaveBase(
+  latest: FileContentSaveRequest | undefined,
+  completed: FileContentSaveRequest,
+  persistedVersionHash: string,
+): boolean {
+  const completedBase =
+    completed.unloadExpectedVersionHash ?? completed.expectedVersionHash;
+  const latestBase =
+    latest?.unloadExpectedVersionHash ?? latest?.expectedVersionHash;
+  if (
+    !latest ||
+    latest === completed ||
+    latest.id !== completed.id ||
+    latest.operationSource !== completed.operationSource ||
+    latest.operationRevision <= completed.operationRevision ||
+    latestBase !== completedBase
+  ) {
+    return false;
+  }
+  latest.unloadExpectedVersionHash = persistedVersionHash;
+  return true;
+}
+
+export function shouldClearLatestUnloadSaveForOutboxEntry(
+  latest: FileContentSaveRequest | undefined,
+  entry: {
+    resourceId: string;
+    operationSource: string;
+    operationRevision: number;
+  },
+): boolean {
+  return Boolean(
+    latest &&
+    latest.id === entry.resourceId &&
+    latest.operationSource === entry.operationSource &&
+    latest.operationRevision === entry.operationRevision,
+  );
+}
+
 /**
  * Flushes debounce slots through the ordinary serialized mutation path during
  * React cleanup (route/design changes). Real document unload is handled by the

package/corpus/templates/design/app/pages/design-editor/history.ts

@@ -170,6 +170,9 @@ export interface FileCreationHistoryEntry {
   content: string;
   fileType: string;
   geometry?: CanvasFrameGeometry;
+  preserveCamera?: boolean;
+  screenMetadata?: Record<string, unknown>;
+  localhostScreen?: Record<string, unknown>;
 }
 
 export interface FileDeletionHistorySnapshot {

package/corpus/templates/design/app/pages/design-editor/nudge-intent.ts

@@ -421,6 +421,19 @@ function isRenderedBlockDisplay(display: string | null | undefined): boolean {
   return display === "block" || display === "list-item";
 }
 
+function hasRenderedGridPlacement(
+  computedStyles: Record<string, string> | undefined,
+): boolean {
+  return [computedStyles?.gridColumn, computedStyles?.gridRow].some((value) => {
+    const normalized = value?.trim().replace(/\s+/g, " ").toLowerCase();
+    if (!normalized) return false;
+    return normalized.split("/").some((line) => {
+      const trimmed = line.trim();
+      return trimmed !== "auto" && !/^span(?:\s|$)/.test(trimmed);
+    });
+  });
+}
+
 export interface ResolveElementNudgeIntentArgs {
   content: string;
   source?: CodeLayerSource;
@@ -477,14 +490,45 @@ export function resolveElementNudgeIntent(
   // round-trip has happened yet and `parentDisplay` is simply absent. An
   // element that really is inline or a flex child is handled above — the parser
   // sees those, and a rendered value always wins over this default.
-  const rendered = args.selectedElement.parentDisplay;
-  // A rendered grid needs its column count to map an arrow onto the next visual
-  // cell, and `display: grid` alone does not carry it. Guessing "flex row" walks
-  // DOM order instead, which is a different element in any multi-column grid.
-  if (
+  const rendered =
+    args.selectedElement.parentDisplay ??
+    args.selectedElement.parentLayout?.display;
+  // A rendered grid needs its track count to map an arrow onto the next visual
+  // cell, and `display: grid` alone does not carry it. Reuse the computed track
+  // templates already reported by the bridge instead of guessing a flex row.
+  const renderedGrid =
     parsedContainer.kind === "none" &&
     !escapesFlow(position) &&
     (rendered === "grid" || rendered === "inline-grid")
+      ? describeFlowContainer({
+          style: {
+            display: rendered,
+            ...(args.selectedElement.parentLayout?.gridTemplateColumns
+              ? {
+                  "grid-template-columns":
+                    args.selectedElement.parentLayout.gridTemplateColumns,
+                }
+              : {}),
+            ...(args.selectedElement.parentLayout?.gridTemplateRows
+              ? {
+                  "grid-template-rows":
+                    args.selectedElement.parentLayout.gridTemplateRows,
+                }
+              : {}),
+            ...(args.selectedElement.parentLayout?.gridAutoFlow
+              ? {
+                  "grid-auto-flow":
+                    args.selectedElement.parentLayout.gridAutoFlow,
+                }
+              : {}),
+          },
+        })
+      : NO_FLOW_CONTAINER;
+  if (
+    parsedContainer.kind === "none" &&
+    !escapesFlow(position) &&
+    (rendered === "grid" || rendered === "inline-grid") &&
+    (renderedGrid.kind !== "grid" || renderedGrid.lineLength === null)
   ) {
     return { kind: "none" };
   }
@@ -496,29 +540,31 @@ export function resolveElementNudgeIntent(
   if (
     parsedContainer.kind === "none" &&
     !escapesFlow(position) &&
-    isRenderedFlowDisplay(rendered) &&
+    (rendered === "flex" || rendered === "inline-flex") &&
     !renderedFlexDirection
   ) {
     return { kind: "none" };
   }
   const container: FlowContainerInfo =
     parsedContainer.kind === "none" && !escapesFlow(position)
-      ? isRenderedFlowDisplay(rendered)
-        ? {
-            ...NO_FLOW_CONTAINER,
-            kind: "flex",
-            axis: renderedFlexDirection?.startsWith("column")
-              ? "vertical"
-              : "horizontal",
-            reversed: renderedFlexDirection?.endsWith("-reverse") ?? false,
-          }
-        : // `parent` null means the node is a projection root: it has no flow to
-          // reorder within, and the bridge reports `parentDisplay: undefined`
-          // for it exactly as it does for a not-yet-measured selection.
-          isRenderedBlockDisplay(rendered) ||
-            (rendered === undefined && parent !== null)
-          ? BLOCK_FLOW_CONTAINER
-          : parsedContainer
+      ? renderedGrid.kind === "grid"
+        ? renderedGrid
+        : isRenderedFlowDisplay(rendered)
+          ? {
+              ...NO_FLOW_CONTAINER,
+              kind: "flex",
+              axis: renderedFlexDirection?.startsWith("column")
+                ? "vertical"
+                : "horizontal",
+              reversed: renderedFlexDirection?.endsWith("-reverse") ?? false,
+            }
+          : // `parent` null means the node is a projection root: it has no flow to
+            // reorder within, and the bridge reports `parentDisplay: undefined`
+            // for it exactly as it does for a not-yet-measured selection.
+            isRenderedBlockDisplay(rendered) ||
+              (rendered === undefined && parent !== null)
+            ? BLOCK_FLOW_CONTAINER
+            : parsedContainer
       : parsedContainer;
   // Flex/grid paint children by `order` and explicit grid placement, not DOM
   // position, so moving the node would write a source change that produces no
@@ -552,6 +598,12 @@ export function resolveElementNudgeIntent(
   ) {
     return { kind: "none" };
   }
+  if (
+    container.kind === "grid" &&
+    hasRenderedGridPlacement(args.selectedElement.computedStyles)
+  ) {
+    return { kind: "none" };
+  }
 
   const intent = resolveNudgeIntent({
     direction: args.direction,

package/corpus/templates/design/app/pages/design-editor/source-publication.ts

@@ -102,9 +102,21 @@ export function resolveSourceBaseForPublication(args: {
   persistedContent?: string | null;
   beforeContent: string;
 }): string {
+  const pendingContent = args.pending?.content;
+  const migrationSource = args.pending?.identityMigrationSourceContent;
+  // Identity repair is a real full-document save. Keep its raw CAS base while
+  // that save is still in flight, but switch to the canonical pending bytes as
+  // soon as the collab or persisted mirror has acknowledged them.
+  if (
+    pendingContent !== undefined &&
+    migrationSource !== undefined &&
+    args.collabContent !== pendingContent &&
+    args.persistedContent !== pendingContent
+  ) {
+    return migrationSource;
+  }
   const raw =
-    args.pending?.identityMigrationSourceContent ??
-    args.pending?.content ??
+    pendingContent ??
     args.collabContent ??
     args.persistedContent ??
     args.beforeContent;

package/corpus/templates/design/changelog/2026-09-16-design-components-retain-linked-identities-when-edited-and-d.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-16
+---
+
+Design components retain linked identities when edited and duplicated

package/corpus/templates/design/changelog/2026-09-16-fix-design-nested-layer-dragging-and-screen-duplication-pari.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-16
+---
+
+Fix Design nested layer dragging and screen duplication parity

package/corpus/templates/design/changelog/2026-09-17-design-drag-and-drop-keeps-duplicates-cross-screen-moves-and.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-17
+---
+
+Design drag-and-drop keeps duplicates, cross-screen moves, and undo history in sync.

package/corpus/templates/design/changelog/2026-09-17-design-preserves-reusable-component-identity-and-props-acros.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-17
+---
+
+Design preserves reusable component identity and props across inline and React screens

package/corpus/templates/design/changelog/2026-09-17-open-vector-paths-no-longer-show-fills-and-interact-dimensio.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-17
+---
+
+Open vector paths no longer show fills, and Interact dimensions stay clear of the exit control.

package/corpus/templates/design/changelog/2026-09-17-screen-deletion-is-immediate-and-undoable-with-history-that-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-17
+---
+
+Screen deletion is immediate and undoable, with history that survives reloads.

package/corpus/templates/design/e2e/fixtures/design-component-react/index.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Design component React fixture</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 700px;
+        background: #111827;
+        color: white;
+        font: 16px system-ui;
+      }
+      main {
+        padding: 40px;
+      }
+      .card {
+        display: grid;
+        gap: 8px;
+        width: 260px;
+        padding: 20px;
+        border-radius: 14px;
+        background: #1f2937;
+      }
+      .card button {
+        padding: 10px 14px;
+        border: 0;
+        border-radius: 8px;
+        background: #6366f1;
+        color: white;
+      }
+      [data-agent-native-component-ref] {
+        outline: 1px dashed #f59e0b;
+      }
+    </style>
+  </head>
+  <body>
+    <main
+      data-agent-native-node-id="react-screen"
+      data-agent-native-layer-name="React Component Screen"
+      data-agent-native-source-kind="react"
+      data-agent-native-source-path="src/App.tsx"
+      data-agent-native-source-file="src/App.tsx"
+      data-agent-native-source-line="1"
+      data-agent-native-source-column="1"
+    >
+      <div
+        data-agent-native-node-id="promotion-target"
+        data-agent-native-layer-name="Promotion target"
+      >
+        Promote me
+      </div>
+      <section
+        class="card"
+        data-agent-native-node-id="card-main"
+        data-agent-native-layer-name="Card Main"
+        data-agent-native-component="ReusableCard"
+        data-agent-native-component-id="cmp-reusable-card"
+        data-agent-native-source-file="src/App.tsx"
+        data-agent-native-source-line="3"
+        data-agent-native-source-column="1"
+        data-source-framework="react"
+        data-source-file="src/App.tsx"
+        data-source-line="3"
+        data-source-column="1"
+        data-component-name="ReusableCard"
+      >
+        <strong data-agent-native-node-id="card-title">Canonical card</strong>
+        <button
+          data-agent-native-node-id="card-button"
+          data-agent-native-prop-label="Open"
+        >
+          Open
+        </button>
+      </section>
+      <section
+        class="card"
+        data-agent-native-node-id="card-instance"
+        data-agent-native-layer-name="Card Instance"
+        data-agent-native-component="ReusableCard"
+        data-agent-native-component-ref="cmp-reusable-card"
+        data-agent-native-component-overrides="%7B%22card-title%22%3A%7B%22textContent%22%3A%22Instance%20override%22%7D%7D"
+      >
+        <strong
+          data-agent-native-node-id="card-instance-title"
+          data-agent-native-component-source-node-id="card-title"
+          >Instance override</strong
+        >
+        <button
+          data-agent-native-node-id="card-instance-button"
+          data-agent-native-component-source-node-id="card-button"
+        >
+          Open
+        </button>
+      </section>
+    </main>
+  </body>
+</html>

package/corpus/templates/design/e2e/fixtures/design-component-react/inline-component.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Inline component fixture</title>
+  </head>
+  <body style="margin: 0; position: relative; min-height: 900px">
+    <aside
+      data-agent-native-node-id="legacy-copy"
+      data-agent-native-layer-name="Legacy same-name copy"
+      data-agent-native-component="ReusableCard"
+      style="
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        width: 180px;
+        height: 80px;
+        background: #ddd;
+      "
+    >
+      Legacy
+    </aside>
+    <section
+      data-agent-native-node-id="card-main"
+      data-agent-native-layer-name="Card Main"
+      style="
+        position: absolute;
+        left: 300px;
+        top: 40px;
+        width: 420px;
+        height: 360px;
+        padding: 20px;
+        background: #1f2937;
+        color: white;
+      "
+    >
+      <div
+        data-agent-native-node-id="card-body"
+        data-agent-native-layer-name="Card Body"
+        style="display: grid; gap: 8px"
+      >
+        <strong data-agent-native-node-id="card-title"
+          ><span data-agent-native-node-id="card-title-text"
+            >Canonical card</span
+          ></strong
+        >
+        <button
+          data-agent-native-node-id="card-button"
+          data-agent-native-layer-name="Card Action"
+          data-agent-native-prop-label="Open"
+          style="width: 120px; padding: 10px; background: #6366f1; color: white"
+        >
+          Open
+        </button>
+      </div>
+      <div
+        data-agent-native-node-id="card-slot"
+        data-agent-native-layer-name="Card Slot"
+        style="min-height: 70px; padding: 10px; background: #374151"
+      >
+        Reparent target
+      </div>
+    </section>
+  </body>
+</html>

package/corpus/templates/design/e2e/helpers.ts

@@ -442,7 +442,12 @@ export async function enterInteractView(
         .locator("[data-frame-full-view]")
     : page.locator("[data-frame-full-view]").last();
   await expect(fullView).toHaveCount(1);
-  await fullView.click();
+  // The screen card can extend beneath the fixed inspector at narrow canvas
+  // widths; invoke the button without relying on the panel's overlapping
+  // physical hit area.
+  await fullView.evaluate((element) => {
+    (element as HTMLButtonElement).click();
+  });
   // The overview screen shells are the boundary that actually unmounts; the
   // toolbar's own Interact button stays mounted and merely becomes pressed.
   await expect(page.locator("[data-screen-shell]")).toHaveCount(0);

package/corpus/templates/design/server/lib/design-data-mutation.ts

@@ -2,6 +2,10 @@ import { assertAccess } from "@agent-native/core/sharing";
 import { and, eq, isNull, sql } from "drizzle-orm";
 
 import { getDb, schema } from "../db/index.js";
+import {
+  designSourceMutationLockKey,
+  lockDesignFilesTable,
+} from "../source-workspace.js";
 
 const DEFAULT_MAX_ATTEMPTS = 8;
 const CONFLICT_BACKOFF_MS = 8;
@@ -199,11 +203,10 @@ async function mutateDesignDataUnlocked({
           // Keep the design-data CAS and HTML rewrites in one transaction.
           // ponytail: reuse the existing design-file lock; split by design only
           // if breakpoint edits become a measurable multi-tenant bottleneck.
-          await (
-            tx as unknown as {
-              execute: (query: unknown) => Promise<unknown>;
-            }
-          ).execute(sql`LOCK TABLE design_files IN SHARE ROW EXCLUSIVE MODE`);
+          await tx.execute(
+            sql`SELECT pg_advisory_xact_lock(hashtextextended(${designSourceMutationLockKey(designId)}, 0::bigint))`,
+          );
+          await lockDesignFilesTable(tx);
         }
 
         const [currentRow] = await tx
@@ -233,6 +236,7 @@ async function mutateDesignDataUnlocked({
               })
               .from(schema.designFiles)
               .where(eq(schema.designFiles.designId, designId))
+              .for("update")
           : [];
         const revisionConditions = [
           eq(schema.designs.id, designId),