@archie/devtools 0.0.48 → 0.1.1

package/README.md

@@ -73,6 +73,42 @@ Changes to `babel-plugin-editor-meta.ts`'s `__editorMeta` prop shape and
 `inspector.standalone.js`'s meta-read paths have a load-bearing publish
 order — see [`docs/deploy-order.md`](docs/deploy-order.md).
 
+## Identidad `data-vid`, NodeMeta, protocolo 1.x
+
+`babelPluginEditorMeta` ahora LEE `data-vid` (persistido en el source por el
+stamper de Genesis, `/^[a-z0-9]{6,8}$/`) en vez de derivar la identidad de
+`file:line:col:componentName`, que se invalida en cada escritura del source.
+Cuando el elemento tiene `data-vid`, `__editorMeta.nodeId === __editorMeta.vid`
+y el plugin también emite los campos de `NodeMeta`
+(`@8base-archie/editor-protocol`): `dynamicType`, `isKitOrigin`, `isChrome`,
+`containerKind` y, cuando aplica, `lockReason`. `parentNodeId` usa el `vid`
+del padre cuando existe.
+
+Sin `data-vid`, el plugin cae al direccionamiento legado SOLO cuando la
+opción `allowLegacyIds` es `true` (default en esta versión — transicional,
+se eliminará más adelante); con `allowLegacyIds: false` el elemento no se
+instrumenta.
+
+En runtime, `node-key.ts` resuelve la identidad con la prioridad
+`meta.vid` → `data-vid` del DOM → (legado) `meta.nodeId` → `runtime:N`, y
+`fiber-bridge.ts` expone `getNodeMeta(el)`, que valida el `NodeMeta`
+ensamblado contra `NodeMetaSchema` antes de devolverlo. `structural-policy.ts`
+añade `isNonDraggableNodeMeta`, `isNonDroppableNodeMeta` y
+`computeDroppableSet` sobre esos mismos campos.
+
+El handshake (`INSPECTOR_SCRIPT_LOADED`/`CAPABILITIES_RESULT`) añade
+`editorProtocolVersion` (el `PROTOCOL_VERSION` semver del paquete de
+contrato — un campo NUEVO, nunca superpuesto al `protocolVersion` numérico
+existente que `archie-app` ya compara estrictamente) y las capabilities
+`vidIdentity`, `nodeMeta`, `refusals`. `ELEMENT_SELECTED` añade `vid` y
+`nodeMeta`. El vocabulario `REFUSED{code, cause, vid}` está disponible
+(`refuseNode` en `inspector.standalone.js`) para cuando un host rechaza un
+gesto de arrastre/drop fuera de política.
+
+Consume `@8base-archie/editor-protocol` como fuente única del contrato
+(`Vid`, `NodeMeta`, `LockReason`, los schemas Zod) — ver
+`src/types/editor-meta.ts`, que re-exporta esos tipos en vez de duplicarlos.
+
 ## Local linking
 
 ```bash

package/dist/{chunk-P5XMHBFS.mjs → chunk-THKKWDMJ.mjs}

@@ -6,6 +6,7 @@ var getDirname = () => path.dirname(getFilename());
 var __dirname = /* @__PURE__ */ getDirname();
 
 // src/babel-plugin-editor-meta.ts
+import { VID_ATTR, VID_PATTERN } from "@8base-archie/editor-protocol";
 import * as nodePath from "path";
 function meaningfulChildren(t, children) {
   return children.filter((child) => {
@@ -61,7 +62,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     instrumentImported = true,
     includeHostSourceRef = false,
     origin = "screen",
-    templateOrigin = false
+    templateOrigin = false,
+    allowLegacyIds = true
   } = opts;
   function getJSXTagName(el) {
     const { name } = el;
@@ -109,6 +111,77 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   function computeNodeId(file, line, col, componentName) {
     return `${file}:${line}:${col}:${componentName}`;
   }
+  function readVidAttr(attrs) {
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      if (!t.isJSXIdentifier(attr.name, { name: VID_ATTR })) continue;
+      const { value } = attr;
+      let raw = null;
+      if (t.isStringLiteral(value)) {
+        raw = value.value;
+      } else if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) {
+        raw = value.expression.value;
+      }
+      if (raw !== null && VID_PATTERN.test(raw)) return raw;
+      return null;
+    }
+    return null;
+  }
+  function computeDynamicType(path2) {
+    let current = path2.parentPath;
+    while (current) {
+      if (current.isJSXExpressionContainer()) {
+        const expr = current.node.expression;
+        if (t.isConditionalExpression(expr) || t.isLogicalExpression(expr)) {
+          return "CONDITIONAL";
+        }
+      }
+      if (current.isArrowFunctionExpression() || current.isFunctionExpression()) {
+        const call = current.parentPath;
+        if (call?.isCallExpression()) {
+          const callee = call.node.callee;
+          if (t.isMemberExpression(callee) && !callee.computed && t.isIdentifier(callee.property) && /^(map|flatMap|forEach)$/.test(callee.property.name)) {
+            return "ARRAY";
+          }
+        }
+        break;
+      }
+      if (current.isFunctionDeclaration()) break;
+      current = current.parentPath;
+    }
+    return "STATIC";
+  }
+  const SHELL_FILE_RE = /(^|\/)shell\.jsx$/;
+  const SHELL_DIR_RE = /(^|\/)components\/shell\//;
+  const CHROME_ANCESTOR_TAGS = /* @__PURE__ */ new Set(["nav", "aside", "header"]);
+  function computeIsChrome(file, path2) {
+    if (SHELL_FILE_RE.test(file) || SHELL_DIR_RE.test(file)) return true;
+    let current = path2.parentPath;
+    while (current) {
+      if (current.isJSXElement()) {
+        const tag = getJSXTagName(current.node.openingElement);
+        if (CHROME_ANCESTOR_TAGS.has(tag)) return true;
+      }
+      current = current.parentPath;
+    }
+    return false;
+  }
+  function computeContainerKind(path2) {
+    const elPath = path2.parentPath;
+    if (!elPath?.isJSXElement()) return "none";
+    const children = meaningfulChildren(t, elPath.node.children);
+    if (children.length === 0) return "none";
+    const allPlain = children.every((c) => t.isJSXElement(c) || t.isJSXText(c));
+    return allPlain ? "plain" : "expression";
+  }
+  function computeLockReason(isKitOrigin, isChrome, dynamicType, containerKind) {
+    if (isKitOrigin) return "KIT_INTERNAL";
+    if (isChrome) return "CHROME_STRUCTURAL";
+    if (dynamicType === "ARRAY") return "DYNAMIC_ARRAY";
+    if (dynamicType === "CONDITIONAL") return "DYNAMIC_CONDITIONAL";
+    if (containerKind === "expression") return "EXPRESSION_CONTAINER";
+    return void 0;
+  }
   function isMovable(path2) {
     const elPath = path2.parentPath;
     if (!elPath) return false;
@@ -126,6 +199,9 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     while (ancestor) {
       if (ancestor.isJSXElement()) {
         const opening = ancestor.node.openingElement;
+        const parentVid = readVidAttr(opening.attributes);
+        if (parentVid) return parentVid;
+        if (!allowLegacyIds) return null;
         const loc = opening.loc?.start;
         if (loc) {
           const tag = getJSXTagName(opening);
@@ -752,7 +828,9 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
               return;
           }
         }
-        const nodeId = computeNodeId(file, line, col, componentName);
+        const vid = readVidAttr(path2.node.attributes);
+        if (!vid && !allowLegacyIds) return;
+        const nodeId = vid ?? computeNodeId(file, line, col, componentName);
         const isKitOrigin = origin === "kit" || hasSlotAttr;
         const movable = isKitOrigin ? false : isMovable(path2);
         const parentNodeId = getParentNodeId(path2, file);
@@ -774,6 +852,24 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
             parentNodeId ? t.stringLiteral(parentNodeId) : t.nullLiteral()
           )
         ]);
+        if (vid) {
+          const dynamicType = computeDynamicType(path2);
+          const isChrome = computeIsChrome(file, path2);
+          const containerKind = computeContainerKind(path2);
+          const lockReason = computeLockReason(isKitOrigin, isChrome, dynamicType, containerKind);
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("vid"), t.stringLiteral(vid)),
+            t.objectProperty(t.identifier("isKitOrigin"), t.booleanLiteral(isKitOrigin)),
+            t.objectProperty(t.identifier("dynamicType"), t.stringLiteral(dynamicType)),
+            t.objectProperty(t.identifier("isChrome"), t.booleanLiteral(isChrome)),
+            t.objectProperty(t.identifier("containerKind"), t.stringLiteral(containerKind))
+          );
+          if (lockReason) {
+            metaObj.properties.push(
+              t.objectProperty(t.identifier("lockReason"), t.stringLiteral(lockReason))
+            );
+          }
+        }
         if (isKitOrigin) {
           if (templateOrigin) {
             metaObj.properties.push(

package/dist/client/client.js

@@ -4116,13 +4116,21 @@ function summarizeRuntimeEvent(detail) {
         container: summarizeIdentity(detail.container),
         beforeSibling: summarizeIdentity(detail.beforeSibling),
         sourceContainer: summarizeIdentity(detail.sourceContainer),
-        diagnostics: detail.diagnostics ?? null
+        diagnostics: detail.diagnostics ?? null,
+        targetVid: detail.targetVid ?? null,
+        containerVid: detail.containerVid ?? null,
+        index: detail.index
       };
+    case "drag-started":
+      return { targetVid: detail.targetVid, droppableCount: detail.droppable.length };
+    case "drag-refused":
+      return { code: detail.code, cause: detail.cause, vid: detail.vid };
     case "element-resized":
       return {
         operationId: detail.operationId,
         selected: summarizeIdentity(detail.selected),
         anchor: summarizeIdentity(detail.anchor),
+        targetVid: detail.targetVid ?? null,
         resize: {
           mode: detail.resize.mode,
           selectedNodeKey: detail.resize.selectedNodeKey,
@@ -4139,6 +4147,8 @@ function summarizeRuntimeEvent(detail) {
         nodeKey: detail.nodeKey,
         displayName: detail.displayName,
         container: summarizeIdentity(detail.container),
+        containerVid: detail.containerVid ?? null,
+        insertedVid: detail.insertedVid ?? null,
         index: detail.index,
         beforeSibling: summarizeIdentity(detail.beforeSibling),
         hasTsxCode: !!detail.tsxCode,
@@ -4220,6 +4230,58 @@ function isValidLaneContainer(containerId, projection, nodeMap) {
   if (container.children.length === 0) return false;
   return !isStructuralContainer(containerId, nodeMap);
 }
+function isNonDroppableNodeMeta(meta) {
+  if (!meta) return false;
+  if (meta.containerKind && meta.containerKind !== "plain") return true;
+  if (meta.isChrome) return true;
+  if (meta.isKitOrigin) return true;
+  return false;
+}
+function isNonDraggableNodeMeta(meta) {
+  if (!meta) return false;
+  if (meta.dynamicType && meta.dynamicType !== "STATIC") return true;
+  if (meta.isChrome) return true;
+  if (meta.isKitOrigin) return true;
+  return false;
+}
+function collectSubtreeIds(rootId, projection) {
+  const ids2 = /* @__PURE__ */ new Set([rootId]);
+  const stack = [rootId];
+  while (stack.length > 0) {
+    const id = stack.pop();
+    const node = projection.containerIndex.get(id);
+    if (!node) continue;
+    for (const childId of node.children) {
+      if (ids2.has(childId)) continue;
+      ids2.add(childId);
+      stack.push(childId);
+    }
+  }
+  return ids2;
+}
+function computeDroppableSet(sourceId, projection, nodeMap) {
+  const excluded = collectSubtreeIds(sourceId, projection);
+  const droppable = /* @__PURE__ */ new Set();
+  for (const containerId of projection.containerIndex.keys()) {
+    if (excluded.has(containerId)) continue;
+    if (isStructuralContainer(containerId, nodeMap)) continue;
+    if (isNonDroppableNodeMeta(nodeMap.get(containerId)?.editorMeta)) continue;
+    droppable.add(containerId);
+  }
+  return droppable;
+}
+function buildBlockedNodeMetaContainerIds(projection, nodeMap) {
+  const blocked = /* @__PURE__ */ new Set();
+  for (const containerId of projection.containerIndex.keys()) {
+    if (isNonDroppableNodeMeta(nodeMap.get(containerId)?.editorMeta)) {
+      blocked.add(containerId);
+    }
+  }
+  return blocked;
+}
+function resolveRefusalCode(meta, fallback) {
+  return meta?.lockReason ?? fallback;
+}
 function buildBlockedStructuralContainerIds(projection, nodeMap, sourceContainerId) {
   const blocked = /* @__PURE__ */ new Set();
   for (const containerId of projection.containerIndex.keys()) {
@@ -4229,6 +4291,9 @@ function buildBlockedStructuralContainerIds(projection, nodeMap, sourceContainer
   return blocked;
 }
 
+// src/client/dnd/design-mode/node-meta-guard.ts
+var VID_PATTERN = /^[a-z0-9]{6,8}$/;
+
 // src/client/dnd/design-mode/fiber-bridge.ts
 var FIBER_KEY_PREFIX = "__reactFiber$";
 var PROPS_KEY_PREFIX = "__reactProps$";
@@ -4509,11 +4574,18 @@ function getNodeKeyFromElement(el) {
   const resolved = resolveDragSurface(el);
   const host = resolved.host ?? el;
   const meta = identityMeta(host);
+  if (meta?.vid) return meta.vid;
+  const domVid = host.getAttribute("data-vid");
+  if (domVid) return domVid;
   if (meta) return meta.nodeId;
   const persisted = host.getAttribute("data-dnd-node-id");
   if (persisted) return persisted;
   return getRuntimeKey(host);
 }
+function resolveVidFromElement(el) {
+  const key2 = getNodeKeyFromElement(el);
+  return VID_PATTERN.test(key2) ? key2 : null;
+}
 function getInspectorRefFromElement(el) {
   const resolved = resolveDragSurface(el);
   const host = resolved.host ?? el;
@@ -4840,6 +4912,8 @@ var useDesignModeStore = create((set, get) => ({
     afterSibling,
     diagnostics,
     binding,
+    targetVid,
+    containerVid,
     componentName,
     before,
     after
@@ -4867,6 +4941,8 @@ var useDesignModeStore = create((set, get) => ({
       afterSibling: afterSibling ?? null,
       diagnostics: diagnostics ?? null,
       binding: binding ?? null,
+      targetVid: targetVid ?? null,
+      containerVid: containerVid ?? null,
       payload: { before, after },
       at: now
     };
@@ -4895,6 +4971,7 @@ var useDesignModeStore = create((set, get) => ({
     nodeId,
     inspectorRef,
     componentName,
+    targetVid,
     before,
     after
   }) => {
@@ -4906,6 +4983,7 @@ var useDesignModeStore = create((set, get) => ({
       nodeKey,
       nodeId,
       inspectorRef,
+      targetVid: targetVid ?? null,
       payload: { before, after },
       at: now
     };
@@ -4939,6 +5017,8 @@ var useDesignModeStore = create((set, get) => ({
     tsxImports,
     containerId,
     containerNodeKey,
+    containerVid,
+    insertedVid,
     index,
     beforeSiblingInspectorRef,
     beforeSiblingNodeKey
@@ -4957,6 +5037,8 @@ var useDesignModeStore = create((set, get) => ({
       tsxImports: tsxImports ?? null,
       containerId,
       containerNodeKey,
+      containerVid: containerVid ?? null,
+      insertedVid: insertedVid ?? null,
       index,
       beforeSiblingInspectorRef: beforeSiblingInspectorRef ?? null,
       beforeSiblingNodeKey: beforeSiblingNodeKey ?? null,
@@ -5070,6 +5152,7 @@ function shouldShowGrabFeedback(target, scannedByNodeId) {
 }
 function isEligibleForDrag(sc) {
   if (sc.draggable === false) return false;
+  if (isNonDraggableNodeMeta(sc.editorMeta)) return false;
   const source = sc.eligibilitySource ?? "editor-meta";
   return source === "editor-meta" || source === "force-allow" || source === "inferred-sortable-descendant" || // RFC E2.4 P1: single host root of a kit-component usage (MetricCard,
   // Section, …) carrying the usage's projected meta.
@@ -6692,6 +6775,15 @@ function serializeArrangeChange(event, index) {
     diagnostics: event.kind === "move" ? event.diagnostics : void 0,
     // ARCH-1065 D17 — which slice row this move addresses.
     binding: event.kind === "move" ? event.binding : void 0,
+    // `data-vid` identity migration (`host-bridge.ts`'s `RuntimeMoveDetail`
+    // fields). `index` here is `event.payload.after.index` — the MOVE's own
+    // JSX-child index — never the `index` PARAMETER above (this change's
+    // sequence position in the session). `targetVid` also carries the
+    // resized node's vid on a `resize` change; `containerVid` also carries
+    // the drop container's vid on an `insert` change.
+    targetVid: event.kind === "move" || event.kind === "resize" ? event.targetVid : void 0,
+    containerVid: event.kind === "move" || event.kind === "insert" ? event.containerVid : void 0,
+    index: event.kind === "move" ? event.payload.after.index : void 0,
     // Insert-specific fields
     displayName: event.kind === "insert" ? event.displayName : void 0,
     html: event.kind === "insert" ? event.html : void 0,
@@ -6699,6 +6791,7 @@ function serializeArrangeChange(event, index) {
     tsxImports: event.kind === "insert" ? event.tsxImports : void 0,
     containerId: event.kind === "insert" ? event.containerId : void 0,
     containerNodeKey: event.kind === "insert" ? event.containerNodeKey : void 0,
+    insertedVid: event.kind === "insert" ? event.insertedVid : void 0,
     insertIndex: event.kind === "insert" ? event.index : void 0,
     beforeSiblingInspectorRef: event.kind === "insert" ? event.beforeSiblingInspectorRef : void 0,
     beforeSiblingNodeKey: event.kind === "insert" ? event.beforeSiblingNodeKey : void 0,
@@ -6955,6 +7048,7 @@ function useOverlayRefs(undoRequestId, redoRequestId) {
   const resolvedReorderRef = (0, import_react11.useRef)(null);
   const finalVisualKeyRef = (0, import_react11.useRef)(null);
   const dragStartPositionRef = (0, import_react11.useRef)(null);
+  const droppableContainerIdsRef = (0, import_react11.useRef)(null);
   const sourceCommitLaneRef = (0, import_react11.useRef)(null);
   const commitLaneCacheRef = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
   const safeZoneRef = (0, import_react11.useRef)(null);
@@ -6986,6 +7080,7 @@ function useOverlayRefs(undoRequestId, redoRequestId) {
     resolvedReorderRef,
     finalVisualKeyRef,
     dragStartPositionRef,
+    droppableContainerIdsRef,
     sourceCommitLaneRef,
     commitLaneCacheRef,
     safeZoneRef,
@@ -8187,6 +8282,14 @@ function useDragVisualLoop({
 
 // src/client/dnd/design-mode/useDragLifecycle.ts
 var import_react13 = require("react");
+function emitRefused(code, cause, element) {
+  dispatchRuntimeEvent({
+    type: "drag-refused",
+    code,
+    cause,
+    vid: element ? resolveVidFromElement(element) : null
+  });
+}
 function resolveLaneAllowedContainers(anchorElement, srcContainerId) {
   if (!srcContainerId) return null;
   if (!resolveRowBinding(anchorElement)) return null;
@@ -8303,6 +8406,10 @@ function recordCommittedMove(args) {
   });
   const componentName = getEditorMeta(anchorEl)?.componentName;
   const operationId = `${command.at}:${anchorNodeId}`;
+  const targetVid = resolveVidFromElement(selectedEl);
+  const targetContainerId = command.to.parentNodeId ?? command.to.laneContainerId;
+  const targetContainerEl = targetContainerId ? resolveNodeElement(targetContainerId) : null;
+  const containerVid = targetContainerEl ? resolveVidFromElement(targetContainerEl) : null;
   const binding = resolveRowBinding(selectedEl);
   const beforePayload = buildMovePayloadWithEffectiveIdentities({
     placement: command.from,
@@ -8334,6 +8441,8 @@ function recordCommittedMove(args) {
     sourceAfterSibling: sourceAfterSiblingIdentity,
     diagnostics,
     binding,
+    targetVid,
+    containerVid,
     container: containerIdentity,
     beforeSibling: beforeSiblingIdentity,
     afterSibling: afterSiblingIdentity,
@@ -8345,6 +8454,9 @@ function recordCommittedMove(args) {
     type: "element-moved",
     operationId,
     commandType: command.type,
+    targetVid,
+    containerVid,
+    index: command.to.index,
     selected: {
       nodeId: selectedNodeId,
       nodeKey: selectedNodeKey,
@@ -8407,6 +8519,7 @@ function useDragLifecycle({
     refs.resolvedReorderRef.current = null;
     refs.finalVisualKeyRef.current = null;
     refs.dragStartPositionRef.current = null;
+    refs.droppableContainerIdsRef.current = null;
     clearCommitLaneCache();
     refs.safeZoneRef.current = null;
     setInsideRect(null);
@@ -8440,6 +8553,11 @@ function useDragLifecycle({
         eligibilitySource: found.eligibilitySource ?? "editor-meta",
         draggable: found.draggable
       });
+      emitRefused(
+        resolveRefusalCode(found.editorMeta, "GATE_REJECT"),
+        "Node is not draggable (dynamic render, chrome, or kit-origin).",
+        found.element
+      );
       return;
     }
     veTrace("dnd", "drag:start", {
@@ -8463,12 +8581,29 @@ function useDragLifecycle({
     clearCommitLaneCache();
     const anchor = resolveDragAnchor(activeId, proj, refs.nodeMapRef.current);
     const anchorScanned = refs.nodeMapRef.current.get(anchor.anchorNodeId) ?? found;
-    if (!anchorScanned || !isEligibleForDrag(anchorScanned)) return;
+    if (!anchorScanned || !isEligibleForDrag(anchorScanned)) {
+      emitRefused(
+        resolveRefusalCode(anchorScanned?.editorMeta, "GATE_REJECT"),
+        "Resolved drag anchor is not draggable.",
+        anchorScanned?.element ?? found.element
+      );
+      return;
+    }
     const anchorNodeId = anchor.anchorNodeId;
     const srcContainerId = anchor.sourceContainerId;
     const sourceCommitLane = getCommitLaneSnapshot(srcContainerId);
     const startPosition = getCurrentCommitPlacement(anchorNodeId, srcContainerId);
     const blockedContainerIds = buildBlockedStructuralContainerIds(proj, refs.nodeMapRef.current, srcContainerId);
+    for (const id of buildBlockedNodeMetaContainerIds(proj, refs.nodeMapRef.current)) {
+      blockedContainerIds.add(id);
+    }
+    const droppableSet = computeDroppableSet(anchorNodeId, proj, refs.nodeMapRef.current);
+    refs.droppableContainerIdsRef.current = droppableSet;
+    dispatchRuntimeEvent({
+      type: "drag-started",
+      targetVid: resolveVidFromElement(anchorScanned.element),
+      droppable: Array.from(droppableSet)
+    });
     const engineOptions = buildDragIntentEngineOptions(anchorScanned.element, srcContainerId, blockedContainerIds);
     refs.rowLockedRef.current = !!engineOptions.laneAllowedContainers;
     refs.engineRef.current = createDragIntentEngine(proj, anchorNodeId, engineOptions);
@@ -8541,6 +8676,19 @@ function useDragLifecycle({
         syncHistoryAvailability();
         return;
       }
+      if (dropTargetId && !refs.droppableContainerIdsRef.current?.has(dropTargetId)) {
+        const targetContainerEl = resolveNodeElement(dropTargetId);
+        const targetMeta = refs.nodeMapRef.current.get(dropTargetId)?.editorMeta;
+        const fallbackCode = targetMeta?.containerKind === "expression" ? "EXPRESSION_CONTAINER" : "CONTAINER_NOT_PLAIN";
+        emitRefused(
+          resolveRefusalCode(targetMeta, fallbackCode),
+          "Drop target is outside the droppable set for this node.",
+          targetContainerEl
+        );
+        clearDragState();
+        syncHistoryAvailability();
+        return;
+      }
       let command = null;
       if (nestTarget) {
         if (!activeEl.contains(nestTarget.element) && !nestTarget.element.contains(activeEl) && sourcePos?.commitNodeId) {
@@ -8752,6 +8900,7 @@ function useResizeSession({
       return;
     }
     const inspectorRef = getInspectorRefFromElement(element);
+    const targetVid = resolveVidFromElement(element);
     const resizeCmd = {
       type: "resize",
       mode,
@@ -8771,12 +8920,14 @@ function useResizeSession({
       nodeId: selectedNodeId,
       inspectorRef,
       componentName: getEditorMeta(element)?.componentName,
+      targetVid,
       before: { mode, selectedNodeKey, targetNodeKey, targetNodeId, width: resizeCmd.before.width, height: resizeCmd.before.height, colSpan: resizeCmd.before.colSpan, rowSpan: resizeCmd.before.rowSpan, styleDiff: { before: beforeStyles, after: afterStyles } },
       after: { mode, selectedNodeKey, targetNodeKey, targetNodeId, width: resizeCmd.after.width, height: resizeCmd.after.height, colSpan: resizeCmd.after.colSpan, rowSpan: resizeCmd.after.rowSpan, styleDiff: { before: beforeStyles, after: afterStyles } }
     });
     dispatchRuntimeEvent({
       type: "element-resized",
       operationId,
+      targetVid,
       selected: {
         nodeId: selectedNodeId,
         nodeKey: selectedNodeKey,
@@ -8999,6 +9150,8 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       };
     }
     const operationId = `${insertCommand.at}:${nodeId}`;
+    const containerVid = containerEl ? resolveVidFromElement(containerEl) : null;
+    const insertedVid = resolveVidFromElement(newElement);
     useDesignModeStore.getState().recordInsertChange({
       operationId,
       nodeKey,
@@ -9010,6 +9163,8 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       tsxImports: component.tsxImports ?? null,
       containerId: intent.containerId,
       containerNodeKey,
+      containerVid,
+      insertedVid,
       index: intent.index,
       beforeSiblingInspectorRef: beforeSiblingIdentity?.inspectorRef ?? null,
       beforeSiblingNodeKey: beforeSiblingIdentity?.nodeKey ?? null
@@ -9024,6 +9179,8 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       tsxCode: component.tsxCode ?? null,
       tsxImports: component.tsxImports ?? null,
       container: containerIdentity,
+      containerVid,
+      insertedVid,
       index: intent.index,
       beforeSibling: beforeSiblingIdentity
     });