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

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -991,20 +991,29 @@ declare var __INITIAL_SOURCE_HEAD__: string;
   ];
 
   function reactFiberOf(el: Element): any {
-    var keys = Object.keys(el);
+    var keys = Object.getOwnPropertyNames(el);
+    var fallback = null;
     for (var i = 0; i < keys.length; i += 1) {
       for (var j = 0; j < REACT_FIBER_KEY_PREFIXES.length; j += 1) {
         if (keys[i]!.indexOf(REACT_FIBER_KEY_PREFIXES[j]!) === 0) {
-          return (el as unknown as Record<string, any>)[keys[i]!];
+          var fiber = (el as unknown as Record<string, any>)[keys[i]!];
+          if (!fallback) fallback = fiber;
+          if (fiber && fiber._debugSource) return fiber;
         }
       }
     }
-    return null;
+    return fallback;
   }
 
   function reactDebugProvenance(el: Element): FrameworkDebugProvenance {
     var cached = reactDebugProvenanceCache?.get(el);
-    if (cached !== undefined) return cached;
+    if (
+      cached !== undefined &&
+      (cached.method === "debug-source" ||
+        cached.method === "debug-stack-remapped")
+    ) {
+      return cached;
+    }
     // Deliberately no climb to an ancestor's fiber: this runs over every node
     // in the runtime snapshot, and borrowing a parent's location would stamp a
     // non-React node with a source line that is not its own.
@@ -1674,10 +1683,8 @@ declare var __INITIAL_SOURCE_HEAD__: string;
         cloneNode.setAttribute("data-an-runtime-layer-remove", "true");
         continue;
       }
-      cloneNode.setAttribute(
-        "data-agent-native-node-id",
-        ensureRuntimeLayerNodeId(sourceNode),
-      );
+      var runtimeNodeId = ensureRuntimeLayerNodeId(sourceNode);
+      cloneNode.setAttribute("data-agent-native-node-id", runtimeNodeId);
       inlineSnapshotComputedStyle(sourceNode, cloneNode);
       var provenance = elementDebugProvenance(sourceNode);
       if (provenance.sourceFile) {
@@ -1700,6 +1707,25 @@ declare var __INITIAL_SOURCE_HEAD__: string;
         if (provenance.component) {
           cloneNode.setAttribute("data-component-name", provenance.component);
         }
+        var runtimeComponent = runtimeComponentIdentityForElement(
+          sourceNode,
+          provenance,
+          runtimeNodeId,
+        );
+        if (runtimeComponent) {
+          cloneNode.setAttribute(
+            "data-agent-native-runtime-component-id",
+            runtimeComponent.componentId,
+          );
+          cloneNode.setAttribute(
+            "data-agent-native-runtime-instance-id",
+            runtimeComponent.instanceId,
+          );
+          cloneNode.setAttribute(
+            "data-agent-native-runtime-component-capability",
+            runtimeComponent.writeCapability,
+          );
+        }
         if (provenance.ownerSourceFile) {
           cloneNode.setAttribute(
             "data-source-owner-file",
@@ -2539,6 +2565,82 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     return layerNameForElement(el);
   }
 
+  function runtimeComponentPropsForElement(
+    el: Element,
+  ): Array<{ name: string; value: string }> {
+    var props: Array<{ name: string; value: string }> = [];
+    if (!el.attributes) return props;
+    for (var index = 0; index < el.attributes.length; index += 1) {
+      var attribute = el.attributes[index];
+      if (!attribute || attribute.name.indexOf("data-agent-native-prop-") !== 0)
+        continue;
+      var rawName = attribute.name.slice("data-agent-native-prop-".length);
+      if (!rawName) continue;
+      props.push({
+        name: rawName.replace(/-([a-z])/g, function (_match, letter) {
+          return String(letter).toUpperCase();
+        }),
+        value: attribute.value,
+      });
+    }
+    return props;
+  }
+
+  /** Runtime identity is separate from the persisted component annotation. */
+  function runtimeComponentIdentityForElement(
+    el: Element,
+    provenance: FrameworkDebugProvenance,
+    instanceId: string,
+  ): any {
+    var name = provenance.component && provenance.component.trim();
+    var definitionSourceFile =
+      provenance.sourceFile && provenance.sourceFile.trim();
+    var invocationSourceFile =
+      provenance.ownerSourceFile && provenance.ownerSourceFile.trim();
+    var invocationLine = provenance.ownerLine;
+    var invocationColumn = provenance.ownerColumn;
+    var invocationMethod = provenance.ownerMethod;
+    if (
+      !name ||
+      !definitionSourceFile ||
+      !provenance.framework ||
+      provenance.framework === "html" ||
+      !instanceId
+    ) {
+      return undefined;
+    }
+    var boundary = [
+      provenance.framework,
+      definitionSourceFile,
+      provenance.line || "",
+      provenance.column || "",
+      name,
+    ].join("|");
+    var writable =
+      provenance.framework === "react" &&
+      invocationSourceFile !== undefined &&
+      invocationMethod !== undefined &&
+      invocationMethod !== "debug-stack" &&
+      Number.isFinite(invocationLine) &&
+      Number.isFinite(invocationColumn);
+    return {
+      componentId: "runtime-component-" + runtimeLayerHash(boundary),
+      instanceId: instanceId,
+      name: name,
+      framework: provenance.framework,
+      sourceFile: invocationSourceFile,
+      line: invocationLine,
+      column: invocationColumn,
+      method: invocationMethod,
+      ownerKey: provenance.ownerKey,
+      props: runtimeComponentPropsForElement(el),
+      writeCapability: writable ? "authored-jsx-literal" : "unsupported",
+      reason: writable
+        ? undefined
+        : "The runtime did not expose a verified authored component invocation location.",
+    };
+  }
+
   function isAutoLayoutDisplay(display: string | undefined): boolean {
     return (
       display === "flex" ||
@@ -3605,6 +3707,7 @@ declare var __INITIAL_SOURCE_HEAD__: string;
           alignItems: parentStyles.alignItems,
           justifyContent: parentStyles.justifyContent,
           gap: parentStyles.gap,
+          gridAutoFlow: parentStyles.gridAutoFlow,
           gridTemplateColumns: parentStyles.gridTemplateColumns,
           gridTemplateRows: parentStyles.gridTemplateRows,
           position: parentStyles.position,
@@ -3649,10 +3752,17 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     // site; framework runtime metadata fills the React owner call site. The
     // shared resolver crosses ShadowRoot.host for Vue, Svelte, and attributes.
     var provenance: FrameworkDebugProvenance = elementDebugProvenance(el);
+    var runtimeComponent = runtimeComponentIdentityForElement(
+      el,
+      provenance,
+      sourceId || runtimeSourceId || pendingNodeId || getSelector(el),
+    );
     var portableStyleSnapshot = collectPortableStyleSnapshot(el);
     return {
       tagName: el.tagName.toLowerCase(),
       componentName: componentName || undefined,
+      componentAnnotation: explicitComponentNameForElement(el) || undefined,
+      runtimeComponent: runtimeComponent,
       id: el.id || undefined,
       sourceId: sourceId,
       runtimeSelector: runtimeSelector || undefined,
@@ -16023,8 +16133,11 @@ declare var __INITIAL_SOURCE_HEAD__: string;
 
     var originLeft = gestureState.originLeft;
     var originTop = gestureState.originTop;
-    var startX = e.clientX;
-    var startY = e.clientY;
+    // Shield drags hand off after crossing their outer threshold. The legacy
+    // moved flag must use the original press too, or a small follow-up delta
+    // is mistaken for an Alt-click and the optimistic clone is removed.
+    var startX = pointerStartParam ? pointerStartParam.clientX : e.clientX;
+    var startY = pointerStartParam ? pointerStartParam.clientY : e.clientY;
     // Snapshot the element being moved so that a concurrent select-element or
     // clear-selection postMessage cannot swap selectedEl mid-drag and cause
     // mutations on the wrong element or a null-deref in onUp.
@@ -16063,11 +16176,15 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     bridgeMoveController.pointerDown({
       kind: "move",
       objectIds: [getSelector(gestureEl)],
-      // `e` is deliberately the event that actually began the legacy move
-      // lifecycle, not `pointerStartParam`: anchoring the controller at the
-      // pointerdown moves the element the extra threshold-crossing distance,
-      // which breaks the cross-screen drop's target resolution.
-      pointer: bridgeGesturePointer(e),
+      // Shield drags begin here after their threshold-crossing event. For an
+      // alt-drag, the clone must include the movement from the original press;
+      // plain shield drags keep their existing threshold-relative baseline so
+      // cross-screen target resolution is unchanged.
+      pointer: bridgeGesturePointer(
+        duplicatedForDrag && pointerStartParam
+          ? { ...e, ...pointerStartParam }
+          : e,
+      ),
       viewport: gestureViewport,
       canvas: { width: gestureViewport.width, height: gestureViewport.height },
     });
@@ -16112,7 +16229,7 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     var dragElOffsetScaleX = ancestorScale(dragEl, "x");
     var dragElOffsetScaleY = ancestorScale(dragEl, "y");
     if (!isGroupDrag) {
-      postCrossScreenDrag("start", dragEl, e, {
+      postCrossScreenDrag("start", dragEl, pointerStartParam || e, {
         duplicate: duplicatedForDrag,
       });
     }
@@ -16244,15 +16361,14 @@ declare var __INITIAL_SOURCE_HEAD__: string;
         // host only resends a claim message on a claimed-value CHANGE, so
         // once clobbered it stayed false for the rest of the drag with no
         // further message ever arriving to correct it.
-        currentAutoLayoutTarget =
-          !duplicatedForDrag && !bridgeSpaceKeyPressed
-            ? autoLayoutInsertionTargetForPoint(
-                dragEl,
-                ev.clientX,
-                ev.clientY,
-                groupOthers,
-              )
-            : null;
+        currentAutoLayoutTarget = !bridgeSpaceKeyPressed
+          ? autoLayoutInsertionTargetForPoint(
+              dragEl,
+              ev.clientX,
+              ev.clientY,
+              groupOthers,
+            )
+          : null;
         if (currentAutoLayoutTarget && ev.ctrlKey) {
           currentAutoLayoutTarget = ignoreAutoLayoutForDropTarget(
             currentAutoLayoutTarget,
@@ -16374,6 +16490,11 @@ declare var __INITIAL_SOURCE_HEAD__: string;
           positionOverlay(selectionOverlay, selectedEl);
           postElementSelect(selectedEl);
           postCrossScreenDrag("cancel");
+        } else if (!isGroupDrag) {
+          // A selection-box press that never crosses the drag threshold still
+          // arms the host's cross-screen listener. Clear that claim on the
+          // click path too, or the next drag inherits a stale board gesture.
+          postCrossScreenDrag("cancel");
         }
         return;
       }
@@ -16410,12 +16531,7 @@ declare var __INITIAL_SOURCE_HEAD__: string;
         }
         return;
       }
-      if (
-        ev &&
-        !duplicatedForDrag &&
-        !outsideOnDrop &&
-        !bridgeSpaceKeyPressed
-      ) {
+      if (ev && !outsideOnDrop && !bridgeSpaceKeyPressed) {
         var finalAutoLayoutTarget = autoLayoutInsertionTargetForPoint(
           dragEl,
           ev.clientX,
@@ -16450,7 +16566,7 @@ declare var __INITIAL_SOURCE_HEAD__: string;
         postVisualDuplicateChange(
           originalSelectedEl,
           dragEl,
-          null,
+          currentAutoLayoutTarget,
           duplicatedSourceNodeIdMap,
         );
         postCrossScreenDrag("cancel");
@@ -21176,6 +21292,9 @@ declare var __INITIAL_SOURCE_HEAD__: string;
         "aria-label",
         "class",
         "data-agent-native-component",
+        "data-agent-native-runtime-component-capability",
+        "data-agent-native-runtime-component-id",
+        "data-agent-native-runtime-instance-id",
         "data-agent-native-layer-name",
         "data-layer-name",
         "layer-name",

package/corpus/templates/design/app/components/design/bridge/hit-test.bridge.ts

@@ -535,6 +535,10 @@
   // getNodeId itself (a pending id is not a stable id until persisted).
   function getOrMintPendingNodeId(el: Element | null): string {
     if (!el || !el.getAttribute || !el.setAttribute) return "";
+    // The document body is the root fallback for an empty-screen drop, not a
+    // durable layer anchor. Minting a pending id here makes the host treat the
+    // root as an unresolved authored node and refuse the otherwise valid drop.
+    if (el === document.body || el === document.documentElement) return "";
     // Defensive guard: resolveHitTarget's anchor-candidate gates (see
     // isTemplateCloneElement call sites there) already keep template clones
     // out of `result.anchor`, so this should never fire in practice — but a

package/corpus/templates/design/app/components/design/canvas-primitive-style.ts

@@ -130,7 +130,7 @@ export function canvasVectorPaint(overrides: {
 }): CanvasVectorPaint {
   const { closed, fill, stroke, strokeWidth } = overrides;
   return {
-    fill: fill ?? (closed ? DEFAULT_SHAPE_FILL : "none"),
+    fill: closed ? (fill ?? DEFAULT_SHAPE_FILL) : "none",
     stroke: stroke ?? (closed ? "none" : DEFAULT_LINE_STROKE),
     strokeWidth: strokeWidth ?? DEFAULT_LINE_STROKE_WIDTH_PX,
   };

package/corpus/templates/design/app/components/design/code-workbench/CodeWorkbench.tsx

@@ -69,6 +69,7 @@ export interface CodeWorkbenchProps {
   selectedNodeId?: string | null;
   selectedSelector?: string | null;
   localhostConnections?: CodeWorkbenchLocalhostConnection[];
+  onDeleteInlineFile?: (fileId: string) => void | Promise<void>;
   onActiveFileChange?: (file: CodeWorkbenchActiveFile | null) => void;
   onRequestLocalWriteConsent?: (
     connectionId: string,
@@ -84,9 +85,15 @@ export function CodeWorkbench(props: CodeWorkbenchProps) {
       createWorkspaceProviders({
         designId: props.designId,
         canEdit: props.canEdit,
+        onDeleteInlineFile: props.onDeleteInlineFile,
         localhostConnections: props.localhostConnections ?? [],
       }),
-    [props.designId, props.canEdit, props.localhostConnections],
+    [
+      props.designId,
+      props.canEdit,
+      props.localhostConnections,
+      props.onDeleteInlineFile,
+    ],
   );
   return (
     <WorkbenchProvider key={props.designId} providers={providers}>

package/corpus/templates/design/app/components/design/code-workbench/explorer/FileTree.tsx

@@ -179,16 +179,36 @@ export function FileTree({
     [api, handleWriteError, providerKey, renameDraft],
   );
 
-  const commitDelete = useCallback(async () => {
+  const commitDelete = useCallback(
+    async (target: TreeNode) => {
+      try {
+        await api.deleteFile(providerKey, target.path);
+      } catch (error) {
+        handleWriteError(error);
+      }
+    },
+    [api, handleWriteError, providerKey],
+  );
+
+  const confirmDelete = useCallback(() => {
     if (!deleteTarget) return;
     const target = deleteTarget;
     setDeleteTarget(null);
-    try {
-      await api.deleteFile(providerKey, target.path);
-    } catch (error) {
-      handleWriteError(error);
-    }
-  }, [api, deleteTarget, handleWriteError, providerKey]);
+    void commitDelete(target);
+  }, [commitDelete, deleteTarget]);
+
+  const requestDelete = useCallback(
+    (target: TreeNode) => {
+      if (providerKey.startsWith("inline:")) {
+        // Inline Design files are covered by the editor's durable undo/history
+        // boundary; external providers remain confirmation-gated below.
+        void commitDelete(target);
+      } else {
+        setDeleteTarget(target);
+      }
+    },
+    [commitDelete, providerKey],
+  );
 
   const commitNewFile = useCallback(async () => {
     if (!pendingNewFile) return;
@@ -496,7 +516,7 @@ export function FileTree({
                 {canDeleteNode ? (
                   <ContextMenuItem
                     className="text-[12px] text-destructive focus:text-destructive"
-                    onSelect={() => setDeleteTarget(row.node)}
+                    onSelect={() => requestDelete(row.node)}
                   >
                     {"Delete" /* i18n-ignore */}
                   </ContextMenuItem>
@@ -572,32 +592,34 @@ export function FileTree({
             />
           </div>
         ) : null}
+        <AlertDialog
+          open={Boolean(deleteTarget)}
+          onOpenChange={(open) => {
+            if (!open) setDeleteTarget(null);
+          }}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                {"Delete file?" /* i18n-ignore */}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {deleteTarget?.path
+                  ? `"${deleteTarget.path}" will be permanently deleted.` /* i18n-ignore */
+                  : ""}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>
+                {"Cancel" /* i18n-ignore */}
+              </AlertDialogCancel>
+              <AlertDialogAction onClick={confirmDelete}>
+                {"Delete" /* i18n-ignore */}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
-      <AlertDialog
-        open={Boolean(deleteTarget)}
-        onOpenChange={(open) => {
-          if (!open) setDeleteTarget(null);
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {"Delete file?" /* i18n-ignore */}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {deleteTarget?.path
-                ? `"${deleteTarget.path}" will be permanently deleted.` /* i18n-ignore */
-                : ""}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{"Cancel" /* i18n-ignore */}</AlertDialogCancel>
-            <AlertDialogAction onClick={() => void commitDelete()}>
-              {"Delete" /* i18n-ignore */}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </div>
   );
 }

package/corpus/templates/design/app/components/design/code-workbench/workspace/create-providers.ts

@@ -5,6 +5,7 @@ import type { WorkspaceProvider } from "./types";
 export interface CreateWorkspaceProvidersOptions {
   designId: string;
   canEdit: boolean;
+  onDeleteInlineFile?: (fileId: string) => void | Promise<void>;
   localhostConnections: Array<{
     connectionId: string;
     label: string;
@@ -24,6 +25,7 @@ export function createWorkspaceProviders(
     createInlineProvider({
       designId: options.designId,
       canEdit: options.canEdit,
+      onDeleteFile: options.onDeleteInlineFile,
     }),
   ];
   for (const connection of options.localhostConnections) {

package/corpus/templates/design/app/components/design/code-workbench/workspace/inline-provider.ts

@@ -54,12 +54,13 @@ interface CreateFileResponse {
 export interface CreateInlineProviderOptions {
   designId: string;
   canEdit: boolean;
+  onDeleteFile?: (fileId: string) => void | Promise<void>;
 }
 
 export function createInlineProvider(
   options: CreateInlineProviderOptions,
 ): WorkspaceProvider {
-  const { designId, canEdit } = options;
+  const { designId, canEdit, onDeleteFile } = options;
   const key = `inline:${designId}`;
   // path -> fileId, populated by listFiles and refreshed on demand so
   // renameFile/deleteFile can resolve a file's id without re-listing when
@@ -177,7 +178,8 @@ export function createInlineProvider(
 
   async function deleteFile(path: string): Promise<void> {
     const id = await resolveFileId(path);
-    await callAction("delete-file", { id });
+    if (onDeleteFile) await onDeleteFile(id);
+    else await callAction("delete-file", { id });
     fileIdByPath.delete(path);
   }