@archie/devtools 0.1.4 → 0.1.6

package/dist/client/client.mjs

@@ -5134,7 +5134,7 @@ function shouldShowGrabFeedback(target, scannedByNodeId) {
   }
   const nodeId = host.getAttribute(DND_NODE_ID_ATTR);
   const scanned = nodeId ? scannedByNodeId.get(nodeId) : null;
-  return !scanned || scanned.draggable === false;
+  return !scanned || !isEligibleForDrag(scanned);
 }
 function isEligibleForDrag(sc) {
   if (sc.draggable === false) return false;
@@ -5144,6 +5144,9 @@ function isEligibleForDrag(sc) {
   // Section, …) carrying the usage's projected meta.
   source === "projected-usage";
 }
+function filterEligibleForDrag(elements) {
+  return elements.filter(isEligibleForDrag);
+}
 function isPointerInEdgeZone(px, py, guard) {
   return px <= guard || py <= guard || px >= window.innerWidth - guard || py >= window.innerHeight - guard;
 }
@@ -5414,7 +5417,12 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
               eligibilitySource: smallEligibility,
               draggable: false,
               identityOrigin: templateFrameLabel(identityMeta3),
-              editorMeta: surfaceMeta2
+              // `identityMeta` here is already `projectUsageMeta(el) ??
+              // surfaceMeta` (no `ownerMeta` fallback in this branch) — see
+              // the main scan's own `editorMeta: usageMeta ?? surfaceMeta`
+              // below for the full rationale (ARCH-883-KOI
+              // draggable-eligibility parity fix).
+              editorMeta: identityMeta3
             });
           }
         }
@@ -5489,7 +5497,29 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
         containerStrategy,
         eligibilitySource: inferredEligibility,
         identityOrigin: templateFrameLabel(identityMeta2),
-        editorMeta: surfaceMeta
+        // `usageMeta ?? surfaceMeta`, NOT `identityMeta` (which also falls
+        // back to `ownerMeta`): `isEligibleForDrag` (`isNonDraggableNodeMeta`)
+        // reads THIS field to gate the actual drag start, and `surfaceMeta`
+        // names the kit TEMPLATE's own meta (`isKitOrigin: true`) for any
+        // kit-rendered host — even one this scan just correctly computed
+        // `draggable: true` for via the SAME `usageMeta` projection above (a
+        // `<Kit.Card>` usage's single host root). Storing `surfaceMeta` here
+        // silently re-refused every such drag at gesture start (ARCH-883-KOI
+        // draggable-eligibility parity fix). Falling back to `identityMeta`
+        // instead of `usageMeta` would overcorrect: `ownerMeta` (a STRUCTURAL
+        // ancestor's meta, borrowed only for `sourceMetaNodeId` on an
+        // inferred-sortable-descendant with no meta of its own) is not this
+        // element's own identity and must not leak into its eligibility/lock
+        // reporting — `scanner-ast-first.test.ts`'s "free of structural owner
+        // meta contamination" pins `editorMeta` staying `undefined` there.
+        //
+        // A meta-less host projected by `computeUsageMeta` onto its component
+        // usage (e.g. `<MetricCard label="x"/>`'s host, `fiber-bridge.ts`)
+        // inherits that usage's own `containerKind` — usually `'none'` for a
+        // self-closing usage — so a drop INTO it now correctly refuses
+        // CONTAINER_NOT_PLAIN: the host is a component instance, not a plain
+        // JSX container in the user's own file, matching acg.
+        editorMeta: usageMeta ?? surfaceMeta
       });
       if (!isSvgRoot) results.push(...scanElements(el, depth + 1, usedNodeIds, seenResolvedHosts, resolvedUnreported));
     } else {
@@ -5513,7 +5543,8 @@ function buildMovedElementEntry(el, usedNodeIds) {
   const parentEl = el.parentElement;
   const surfaceMeta = getDirectEditorMeta(el) ?? void 0;
   const ownerMeta = getEditorMeta(el);
-  const identityMeta2 = projectUsageMeta(el) ?? ownerMeta ?? surfaceMeta;
+  const usageMeta = projectUsageMeta(el);
+  const identityMeta2 = usageMeta ?? ownerMeta ?? surfaceMeta;
   const selector = getUniqueSelector(el);
   const eligibility = isInspectorEligible(el);
   return {
@@ -5534,7 +5565,11 @@ function buildMovedElementEntry(el, usedNodeIds) {
     containerStrategy: parentEl && isFlexOrGridParent(parentEl) ? resolveContainerStrategy(parentEl) : null,
     eligibilitySource: eligibility ?? "force-allow",
     identityOrigin: templateFrameLabel(identityMeta2),
-    editorMeta: surfaceMeta
+    // `usageMeta ?? surfaceMeta`, NOT `identityMeta` — same fix, same reason
+    // as the main scan's own `editorMeta` (see there): `ownerMeta` is a
+    // structural ancestor's meta borrowed only for `sourceMetaNodeId`/
+    // `draggable`, and must not leak into eligibility/lock reporting.
+    editorMeta: usageMeta ?? surfaceMeta
   };
 }
 function useElementScanner(enabled) {
@@ -8268,6 +8303,7 @@ function useDragVisualLoop({
 
 // src/client/dnd/design-mode/useDragLifecycle.ts
 import { useState as useState5, useCallback as useCallback6 } from "react";
+var GATE_REJECT = "GATE_REJECT";
 function emitRefused(code, cause, vid) {
   dispatchRuntimeEvent({
     type: "drag-refused",
@@ -8288,6 +8324,41 @@ function buildDragIntentEngineOptions(anchorElement, srcContainerId, blockedCont
     blockedContainerIds
   };
 }
+function resolveDragEndRefusal(params) {
+  if (!params.hasDragSession || params.blockedByGuard) return { kind: "silent" };
+  if (!params.hasActiveElement || !params.hasSourcePosition) {
+    return {
+      kind: "refuse",
+      code: GATE_REJECT,
+      cause: "Drag ended with no resolvable source position for the dragged node."
+    };
+  }
+  if (!params.hasNestTarget && !params.intentValid) {
+    return {
+      kind: "refuse",
+      code: GATE_REJECT,
+      cause: "No droppable target was resolved under the pointer for this drag."
+    };
+  }
+  return { kind: "continue" };
+}
+function resolveDragEndBranch(params) {
+  if (!params.dropTargetExistsInMap) return { kind: "refuse", reason: "drop-target-missing" };
+  if (!params.dropTargetIsDroppable) return { kind: "refuse", reason: "drop-target-not-droppable" };
+  if (params.hasNestTarget) {
+    if (params.nestIsSelfOrDescendant) return { kind: "refuse", reason: "nest-self-or-descendant" };
+    if (params.nestIsAncestor) return { kind: "refuse", reason: "nest-ancestor" };
+    if (!params.nestHasCommitNodeId) return { kind: "refuse", reason: "nest-no-commit-node" };
+    return { kind: "nest" };
+  }
+  if (params.intentIsReorder) {
+    if (!params.hasResolvedReorder || !params.resolvedReorderMatchesIntent) {
+      return { kind: "refuse", reason: "stale-reorder" };
+    }
+    return { kind: "reorder" };
+  }
+  return { kind: "refuse", reason: "no-move" };
+}
 function buildRuntimeIdentityLocal(nodeId, resolveNodeElement, effectiveLaneSnapshot) {
   if (!nodeId) return null;
   const element = resolveNodeElement(nodeId);
@@ -8541,7 +8612,7 @@ function useDragLifecycle({
         draggable: found.draggable
       });
       emitRefused(
-        resolveRefusalCode(found.editorMeta, "GATE_REJECT"),
+        resolveRefusalCode(found.editorMeta, GATE_REJECT),
         "Node is not draggable (dynamic render, chrome, or kit-origin).",
         resolveVidForScannedNode(activeId, refs.nodeMapRef.current, found.element)
       );
@@ -8570,7 +8641,7 @@ function useDragLifecycle({
     const anchorScanned = refs.nodeMapRef.current.get(anchor.anchorNodeId) ?? found;
     if (!anchorScanned || !isEligibleForDrag(anchorScanned)) {
       emitRefused(
-        resolveRefusalCode(anchorScanned?.editorMeta, "GATE_REJECT"),
+        resolveRefusalCode(anchorScanned?.editorMeta, GATE_REJECT),
         "Resolved drag anchor is not draggable.",
         resolveVidForScannedNode(
           anchor.anchorNodeId,
@@ -8660,90 +8731,131 @@ function useDragLifecycle({
     const intentHasContainer = intent ? refs.projectionRef.current.containerIndex.has(intent.containerId) : false;
     const intentHasSlot = intent ? intent.mode === "nest" || refs.projectionRef.current.slotIndex.has(intent.slotId) : false;
     const intentValid = !!intent && intentHasContainer && intentHasSlot;
-    if (!blockedByGuard && activeEl && sourcePos && (nestTarget || intentValid)) {
-      const dropTargetId = nestTarget?.nodeId ?? intent?.containerId;
-      if (dropTargetId && !refs.nodeMapRef.current.has(dropTargetId)) {
-        clearDragState();
-        syncHistoryAvailability();
-        return;
-      }
-      if (dropTargetId && !refs.droppableContainerIdsRef.current?.has(dropTargetId)) {
-        const targetContainerEl = resolveNodeElement(dropTargetId);
-        const targetMeta = refs.nodeMapRef.current.get(dropTargetId)?.editorMeta;
-        emitRefused(
-          resolveRefusalCode(targetMeta, "CONTAINER_NOT_PLAIN"),
-          "Drop target is outside the droppable set for this node.",
-          resolveVidForScannedNode(dropTargetId, refs.nodeMapRef.current, targetContainerEl)
-        );
-        clearDragState();
-        syncHistoryAvailability();
-        return;
-      }
-      let command = null;
-      if (nestTarget) {
-        if (!activeEl.contains(nestTarget.element) && !nestTarget.element.contains(activeEl) && sourcePos?.commitNodeId) {
-          const nestPlacement = resolveAppendCommitPlacement(
-            nestTarget.element,
-            sourcePos.commitNodeId,
-            nestTarget.nodeId
+    const anchorVid = () => resolveVidForScannedNode(anchorNodeId, refs.nodeMapRef.current, activeEl);
+    const gate = resolveDragEndRefusal({
+      hasDragSession: !!dragSession,
+      blockedByGuard,
+      hasActiveElement: !!activeEl,
+      hasSourcePosition: !!sourcePos,
+      hasNestTarget: !!nestTarget,
+      intentValid
+    });
+    if (gate.kind === "silent") {
+      clearDragState();
+      syncHistoryAvailability();
+      return;
+    }
+    if (gate.kind === "refuse") {
+      emitRefused(gate.code, gate.cause, anchorVid());
+      clearDragState();
+      syncHistoryAvailability();
+      return;
+    }
+    const el = activeEl;
+    const pos = sourcePos;
+    const dropTargetId = nestTarget?.nodeId ?? intent?.containerId;
+    const resolvedReorder = refs.resolvedReorderRef.current;
+    const branch = resolveDragEndBranch({
+      dropTargetExistsInMap: refs.nodeMapRef.current.has(dropTargetId),
+      dropTargetIsDroppable: !!refs.droppableContainerIdsRef.current?.has(dropTargetId),
+      hasNestTarget: !!nestTarget,
+      nestIsSelfOrDescendant: !!nestTarget && el.contains(nestTarget.element),
+      nestIsAncestor: !!nestTarget && nestTarget.element.contains(el),
+      nestHasCommitNodeId: !!pos.commitNodeId,
+      intentIsReorder: intentValid && intent?.mode === "reorder",
+      hasResolvedReorder: !!resolvedReorder,
+      resolvedReorderMatchesIntent: !!resolvedReorder && !!intent && resolvedReorder.visual.containerId === intent.containerId
+    });
+    if (branch.kind === "refuse") {
+      switch (branch.reason) {
+        case "drop-target-missing":
+          emitRefused(
+            "VID_NOT_FOUND",
+            "Drop target no longer exists.",
+            resolveVidForScannedNodeStrict(dropTargetId, refs.nodeMapRef.current)
           );
-          command = {
-            type: classifyCommandType(sourcePos, nestPlacement, true),
-            nodeId: anchorNodeId,
-            commitNodeId: sourcePos.commitNodeId,
-            from: sourcePos,
-            to: nestPlacement,
-            at: Date.now()
-          };
-        }
-      } else if (intentValid && intent.mode === "reorder") {
-        const resolvedReorder = refs.resolvedReorderRef.current;
-        if (!resolvedReorder || resolvedReorder.visual.containerId !== intent.containerId) {
-          clearDragState();
-          syncHistoryAvailability();
-          return;
-        }
-        const targetPlacement = resolvedReorder.commit;
-        command = {
-          type: classifyCommandType(sourcePos, targetPlacement, false),
-          nodeId: anchorNodeId,
-          commitNodeId: targetPlacement.commitNodeId,
-          from: sourcePos,
-          to: targetPlacement,
-          at: Date.now()
-        };
-      }
-      if (command) {
-        const anchorEl = resolveNodeElement(anchorNodeId) ?? activeEl;
-        const selectedEl = resolveNodeElement(selectedNodeId) ?? anchorEl;
-        const nodeKey = getNodeKeyFromElement(anchorEl);
-        const inspRef = getInspectorRefFromElement(anchorEl);
-        const selectedNodeKey = getNodeKeyFromElement(selectedEl);
-        const selectedInspectorRef = getInspectorRefFromElement(selectedEl);
-        const sourceLaneSnapshot = refs.sourceCommitLaneRef.current ?? getCommitLaneSnapshot(command.from.laneContainerId);
-        const targetLaneSnapshot = command.to.laneContainerId === command.from.laneContainerId ? sourceLaneSnapshot : getCommitLaneSnapshot(command.to.laneContainerId);
-        const committed = refs.historyRef.current.execute(command, applyCommand);
-        if (committed) {
-          activeEl.setAttribute("data-dnd-moved", "");
-          selectElement(null);
-          recordCommittedMove({
-            command,
-            anchorNodeId,
-            selectedNodeId,
-            anchorEl,
-            selectedEl,
-            nodeKey,
-            inspRef,
-            selectedNodeKey,
-            selectedInspectorRef,
-            sourceLaneSnapshot,
-            targetLaneSnapshot,
-            resolveNodeElement,
-            recordMoveChange,
-            nodeMap: refs.nodeMapRef.current
-          });
+          break;
+        case "drop-target-not-droppable": {
+          const targetMeta = refs.nodeMapRef.current.get(dropTargetId)?.editorMeta;
+          emitRefused(
+            resolveRefusalCode(targetMeta, "CONTAINER_NOT_PLAIN"),
+            "Drop target is outside the droppable set for this node.",
+            resolveVidForScannedNode(dropTargetId, refs.nodeMapRef.current, resolveNodeElement(dropTargetId))
+          );
+          break;
         }
+        case "nest-self-or-descendant":
+          emitRefused(GATE_REJECT, "Cannot nest an element into itself or its own descendant.", anchorVid());
+          break;
+        case "nest-ancestor":
+          emitRefused(GATE_REJECT, "Cannot nest an element into its own ancestor.", anchorVid());
+          break;
+        case "nest-no-commit-node":
+          emitRefused(GATE_REJECT, "Cannot resolve the dragged node's source position for nesting.", anchorVid());
+          break;
+        case "stale-reorder":
+          emitRefused(GATE_REJECT, "Resolved reorder placement no longer matches the drag intent.", anchorVid());
+          break;
+        case "no-move":
+          emitRefused(GATE_REJECT, "Could not build a move for the resolved drag intent.", anchorVid());
+          break;
       }
+      clearDragState();
+      syncHistoryAvailability();
+      return;
+    }
+    const command = branch.kind === "nest" ? (() => {
+      const target = nestTarget;
+      const nestPlacement = resolveAppendCommitPlacement(target.element, pos.commitNodeId, target.nodeId);
+      return {
+        type: classifyCommandType(pos, nestPlacement, true),
+        nodeId: anchorNodeId,
+        commitNodeId: pos.commitNodeId,
+        from: pos,
+        to: nestPlacement,
+        at: Date.now()
+      };
+    })() : (() => {
+      const targetPlacement = resolvedReorder.commit;
+      return {
+        type: classifyCommandType(pos, targetPlacement, false),
+        nodeId: anchorNodeId,
+        commitNodeId: targetPlacement.commitNodeId,
+        from: pos,
+        to: targetPlacement,
+        at: Date.now()
+      };
+    })();
+    const anchorEl = resolveNodeElement(anchorNodeId) ?? el;
+    const selectedEl = resolveNodeElement(selectedNodeId) ?? anchorEl;
+    const nodeKey = getNodeKeyFromElement(anchorEl);
+    const inspRef = getInspectorRefFromElement(anchorEl);
+    const selectedNodeKey = getNodeKeyFromElement(selectedEl);
+    const selectedInspectorRef = getInspectorRefFromElement(selectedEl);
+    const sourceLaneSnapshot = refs.sourceCommitLaneRef.current ?? getCommitLaneSnapshot(command.from.laneContainerId);
+    const targetLaneSnapshot = command.to.laneContainerId === command.from.laneContainerId ? sourceLaneSnapshot : getCommitLaneSnapshot(command.to.laneContainerId);
+    const committed = refs.historyRef.current.execute(command, applyCommand);
+    if (committed) {
+      el.setAttribute("data-dnd-moved", "");
+      selectElement(null);
+      recordCommittedMove({
+        command,
+        anchorNodeId,
+        selectedNodeId,
+        anchorEl,
+        selectedEl,
+        nodeKey,
+        inspRef,
+        selectedNodeKey,
+        selectedInspectorRef,
+        sourceLaneSnapshot,
+        targetLaneSnapshot,
+        resolveNodeElement,
+        recordMoveChange,
+        nodeMap: refs.nodeMapRef.current
+      });
+    } else {
+      emitRefused(GATE_REJECT, "The resolved move could not be applied.", anchorVid());
     }
     clearDragState();
     syncHistoryAvailability();
@@ -9282,7 +9394,7 @@ function HitArea({
     "div",
     {
       ref: divRef,
-      "data-design-mode-ui": true,
+      "data-design-mode-ui": "hit-area",
       style: { position: "fixed", left, top, width, height, zIndex: 99998, cursor },
       onPointerMove: (e) => {
         if (!isSelected || isDragging) {
@@ -9373,9 +9485,7 @@ function DesignModeOverlay() {
   const draggableElements = useMemo6(() => {
     if (elements.length === 0) return [];
     const projection = buildProjection(elements);
-    return collectDraggableAnchors(elements, projection, nodeMap).filter(
-      (el) => el.draggable !== false
-    );
+    return filterEligibleForDrag(collectDraggableAnchors(elements, projection, nodeMap));
   }, [elements, nodeMap]);
   const arrangeHitAreaElement = useMemo6(() => {
     if (!arrangeSelectedNodeId) return null;
@@ -9985,7 +10095,7 @@ function isPreviewOrigin(origin) {
 var DEFAULT_SCRIPT_ID = "archie-inspector-script";
 var R2_INSPECTOR_BASE_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev";
 function readBuildVersion() {
-  return "0.1.4" ? "0.1.4" : null;
+  return "0.1.6" ? "0.1.6" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;

package/dist/collection-binding.mjs

@@ -1,6 +1,6 @@
 import {
   meaningfulChildren
-} from "./chunk-U4KG6UDY.mjs";
+} from "./chunk-ZG6HZFTJ.mjs";
 
 // src/babel-plugin-collection-binding.ts
 import { VISITOR_KEYS } from "@babel/types";

package/dist/index.d.mts

@@ -682,6 +682,15 @@ interface ArchieDevToolsOptions {
      * @default /src\/pages\//
      */
     dndPages?: RegExp;
+    /**
+     * Strip `data-vid` from JSX output on a production build (`vite build`,
+     * not `vite dev`). ON by default — `data-vid` is a build/editor-time
+     * identity nothing at runtime needs, and nothing else in the deploy
+     * pipeline strips it. Set `false` only if a consumer has a real reason to
+     * ship it (e.g. a tool downstream of the build still reads it).
+     * @default true
+     */
+    stripVidsInBuild?: boolean;
 }
 interface ArchieDevToolsPlugin {
     name: string;

package/dist/index.d.ts

@@ -682,6 +682,15 @@ interface ArchieDevToolsOptions {
      * @default /src\/pages\//
      */
     dndPages?: RegExp;
+    /**
+     * Strip `data-vid` from JSX output on a production build (`vite build`,
+     * not `vite dev`). ON by default — `data-vid` is a build/editor-time
+     * identity nothing at runtime needs, and nothing else in the deploy
+     * pipeline strips it. Set `false` only if a consumer has a real reason to
+     * ship it (e.g. a tool downstream of the build still reads it).
+     * @default true
+     */
+    stripVidsInBuild?: boolean;
 }
 interface ArchieDevToolsPlugin {
     name: string;

package/dist/index.js

@@ -381,6 +381,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     const allPlain = children.every((c) => {
       if (t.isJSXElement(c)) return true;
       if (t.isJSXText(c)) return c.value.trim() === "";
+      if (t.isJSXExpressionContainer(c) && t.isJSXEmptyExpression(c.expression)) return true;
       return false;
     });
     return allPlain ? "plain" : "expression";
@@ -1210,12 +1211,42 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   };
 }
 
+// src/babel-plugin-strip-data-vid.ts
+var import_editor_protocol2 = require("@8base-archie/editor-protocol");
+function isStaticDataVidAttribute(t, attr) {
+  if (!t.isJSXAttribute(attr)) return false;
+  if (!t.isJSXIdentifier(attr.name, { name: import_editor_protocol2.VID_ATTR })) return false;
+  const { value } = attr;
+  if (t.isStringLiteral(value)) return true;
+  if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) return true;
+  return false;
+}
+function babelPluginStripDataVid({
+  types: t
+}) {
+  return {
+    name: "archie-strip-data-vid",
+    visitor: {
+      JSXElement: {
+        exit(path) {
+          const opening = path.node.openingElement;
+          if (!opening.attributes.some((attr) => isStaticDataVidAttribute(t, attr))) return;
+          opening.attributes = opening.attributes.filter(
+            (attr) => !isStaticDataVidAttribute(t, attr)
+          );
+        }
+      }
+    }
+  };
+}
+
 // src/index.ts
 var LOCAL_INSPECTOR_SERVE_PATH = "/_archie/inspector.js";
 function archieDevTools(options = {}) {
   const {
     debug = false,
-    dndPages = /src\/pages\//
+    dndPages = /src\/pages\//,
+    stripVidsInBuild = true
   } = options;
   const log = (...args) => {
     if (debug) console.log("[Archie DevTools]", ...args);
@@ -1223,6 +1254,7 @@ function archieDevTools(options = {}) {
   let babelCore = null;
   let includeHostSourceRef = false;
   let isDevServer = false;
+  let isProductionBuild = false;
   const transformedByHook = /* @__PURE__ */ new Set();
   const warnedMissingVidFiles = /* @__PURE__ */ new Set();
   function warnMissingVid(info) {
@@ -1249,6 +1281,7 @@ function archieDevTools(options = {}) {
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
       isDevServer = config.command === "serve";
+      isProductionBuild = config.command === "build" && stripVidsInBuild;
     },
     configureServer(server) {
       server.middlewares.use(LOCAL_INSPECTOR_SERVE_PATH, (_req, res) => {
@@ -1288,6 +1321,9 @@ function archieDevTools(options = {}) {
               includeHostSourceRef,
               onMissingVid: isDevServer ? warnMissingVid : void 0
             }),
+            // AFTER babelPluginEditorMeta — see babel-plugin-strip-data-vid.ts
+            // for why plugin order (not call order) makes that safe.
+            ...isProductionBuild ? [babelPluginStripDataVid] : [],
             ...dndPages.test(id) ? [(b) => babelPluginDndAuto(b, { importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE })] : []
           ],
           parserOpts: {
@@ -1331,6 +1367,7 @@ function archieDevTools(options = {}) {
               onMissingVid: isDevServer ? warnMissingVid : void 0
             })
           );
+          if (isProductionBuild) babelOptions.plugins.push(babelPluginStripDataVid);
         }
         if (dndPages.test(context.id) && !transformedByHook.has(context.id)) {
           log("Applying DnD transform to:", context.id);

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import {
   __dirname,
   babelPluginEditorMeta
-} from "./chunk-U4KG6UDY.mjs";
+} from "./chunk-ZG6HZFTJ.mjs";
 
 // src/index.ts
 import { readFileSync } from "fs";
@@ -174,12 +174,42 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
   };
 }
 
+// src/babel-plugin-strip-data-vid.ts
+import { VID_ATTR } from "@8base-archie/editor-protocol";
+function isStaticDataVidAttribute(t, attr) {
+  if (!t.isJSXAttribute(attr)) return false;
+  if (!t.isJSXIdentifier(attr.name, { name: VID_ATTR })) return false;
+  const { value } = attr;
+  if (t.isStringLiteral(value)) return true;
+  if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) return true;
+  return false;
+}
+function babelPluginStripDataVid({
+  types: t
+}) {
+  return {
+    name: "archie-strip-data-vid",
+    visitor: {
+      JSXElement: {
+        exit(path) {
+          const opening = path.node.openingElement;
+          if (!opening.attributes.some((attr) => isStaticDataVidAttribute(t, attr))) return;
+          opening.attributes = opening.attributes.filter(
+            (attr) => !isStaticDataVidAttribute(t, attr)
+          );
+        }
+      }
+    }
+  };
+}
+
 // src/index.ts
 var LOCAL_INSPECTOR_SERVE_PATH = "/_archie/inspector.js";
 function archieDevTools(options = {}) {
   const {
     debug = false,
-    dndPages = /src\/pages\//
+    dndPages = /src\/pages\//,
+    stripVidsInBuild = true
   } = options;
   const log = (...args) => {
     if (debug) console.log("[Archie DevTools]", ...args);
@@ -187,6 +217,7 @@ function archieDevTools(options = {}) {
   let babelCore = null;
   let includeHostSourceRef = false;
   let isDevServer = false;
+  let isProductionBuild = false;
   const transformedByHook = /* @__PURE__ */ new Set();
   const warnedMissingVidFiles = /* @__PURE__ */ new Set();
   function warnMissingVid(info) {
@@ -213,6 +244,7 @@ function archieDevTools(options = {}) {
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
       isDevServer = config.command === "serve";
+      isProductionBuild = config.command === "build" && stripVidsInBuild;
     },
     configureServer(server) {
       server.middlewares.use(LOCAL_INSPECTOR_SERVE_PATH, (_req, res) => {
@@ -252,6 +284,9 @@ function archieDevTools(options = {}) {
               includeHostSourceRef,
               onMissingVid: isDevServer ? warnMissingVid : void 0
             }),
+            // AFTER babelPluginEditorMeta — see babel-plugin-strip-data-vid.ts
+            // for why plugin order (not call order) makes that safe.
+            ...isProductionBuild ? [babelPluginStripDataVid] : [],
             ...dndPages.test(id) ? [(b) => babelPluginDndAuto(b, { importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE })] : []
           ],
           parserOpts: {
@@ -295,6 +330,7 @@ function archieDevTools(options = {}) {
               onMissingVid: isDevServer ? warnMissingVid : void 0
             })
           );
+          if (isProductionBuild) babelOptions.plugins.push(babelPluginStripDataVid);
         }
         if (dndPages.test(context.id) && !transformedByHook.has(context.id)) {
           log("Applying DnD transform to:", context.id);