@archie/devtools 0.1.9 → 0.1.11

package/dist/client/client.js

@@ -5335,6 +5335,17 @@ var MIN_WIDTH = 40;
 var MIN_HEIGHT = 20;
 var INTERACTIVE_MIN = 8;
 var MAX_DEPTH = 12;
+var COLLAPSED_CONTAINER_HIT_MIN = 24;
+function collapsedContainerHitRect(el, rect) {
+  if (el.children.length > 0 || el.textContent?.trim()) return null;
+  if (getDirectEditorMeta(el)?.containerKind !== "plain") return null;
+  if (el.getClientRects().length === 0) return null;
+  const width = Math.max(rect.width, COLLAPSED_CONTAINER_HIT_MIN);
+  const height = Math.max(rect.height, COLLAPSED_CONTAINER_HIT_MIN);
+  const left = rect.left + rect.width / 2 - width / 2;
+  const top = rect.top + rect.height / 2 - height / 2;
+  return new DOMRect(left, top, width, height);
+}
 var _runtimeNodeIdMap = /* @__PURE__ */ new WeakMap();
 var _runtimeNodeIdCounter = 0;
 function getRuntimeNodeId(el) {
@@ -5486,7 +5497,8 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
           const nodeId2 = resolveStableNodeId(el, usedNodeIds);
           usedNodeIds.add(nodeId2);
           el.setAttribute(DND_NODE_ID_ATTR, nodeId2);
-          if (isZeroRect) {
+          const collapsedHitRect = isZeroRect && !isSvgRoot ? collapsedContainerHitRect(el, rect) : null;
+          if (isZeroRect && !collapsedHitRect) {
             resolvedUnreported.add(el);
           } else {
             seenResolvedHosts.add(el);
@@ -5503,7 +5515,7 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
               resolvedHostSelector: selector,
               resolutionKind: "direct-host",
               label: getLabel(el),
-              rect,
+              rect: collapsedHitRect ?? rect,
               containerStrategy: parentEl2 && isFlexOrGridParent(parentEl2) ? resolveContainerStrategy(parentEl2) : null,
               eligibilitySource: smallEligibility,
               draggable: false,
@@ -7407,7 +7419,7 @@ function computeSlotBoundaryPoint(slot, container, projectionTree) {
   {
     let lineY;
     if (n === 0) {
-      lineY = container.rect.top;
+      lineY = container.rect.top + container.rect.height / 2;
     } else if (i === 0) {
       lineY = nodeRect(children[0])?.top ?? container.rect.top;
     } else if (i >= n) {
@@ -7912,6 +7924,7 @@ function createDragIntentEngine(projection, activeId, options) {
 // src/client/dnd/design-mode/drop-line.ts
 var DROP_LINE_THICKNESS_PX = 2;
 var DROP_LINE_MIN_LENGTH_PX = 40;
+var EMPTY_CONTAINER_INSET_PX = 8;
 function slotDropLine(slot, container, projectionTree, sdx, sdy) {
   const T = DROP_LINE_THICKNESS_PX;
   const MIN = DROP_LINE_MIN_LENGTH_PX;
@@ -7945,6 +7958,14 @@ function slotDropLine(slot, container, projectionTree, sdx, sdy) {
       };
     }
   }
+  if (container.children.length === 0 && container.rect.width > 2 * EMPTY_CONTAINER_INSET_PX + MIN) {
+    return {
+      x: container.rect.left + EMPTY_CONTAINER_INSET_PX - sdx,
+      y: bp.y - sdy - T / 2,
+      width: container.rect.width - 2 * EMPTY_CONTAINER_INSET_PX,
+      height: T
+    };
+  }
   return {
     x: container.rect.left - sdx,
     y: bp.y - sdy - T / 2,
@@ -8154,6 +8175,27 @@ function computeAllowNest(nestPreview, isLargeDraggedNode, rowLocked) {
   const childId = nestPreview.slotId.split("::nest::")[1] ?? "";
   return !!childId && !isLargeDraggedNode;
 }
+function resolveContainerHold(params) {
+  const { intent, previousIntent, sourceContainerId, projection, x, y } = params;
+  if (intent.mode !== "reorder" || previousIntent?.mode !== "reorder") return intent;
+  if (previousIntent.containerId === intent.containerId) return intent;
+  if (intent.containerId === sourceContainerId) return intent;
+  if (isProjectedDescendant(intent.containerId, previousIntent.containerId, projection.projectionTree)) {
+    return intent;
+  }
+  const prev = projection.containerIndex.get(previousIntent.containerId);
+  if (!prev) return intent;
+  const inPrevExpanded = x >= prev.rect.left - CONTAINER_SWITCH_HYSTERESIS && x <= prev.rect.right + CONTAINER_SWITCH_HYSTERESIS && y >= prev.rect.top - CONTAINER_SWITCH_HYSTERESIS && y <= prev.rect.bottom + CONTAINER_SWITCH_HYSTERESIS;
+  return inPrevExpanded ? previousIntent : intent;
+}
+function isProjectedDescendant(id, ancestorId, tree) {
+  let parentId = tree.get(id)?.parentId ?? null;
+  while (parentId) {
+    if (parentId === ancestorId) return true;
+    parentId = tree.get(parentId)?.parentId ?? null;
+  }
+  return false;
+}
 function useDragVisualLoop({
   activeDrag,
   refs,
@@ -8245,15 +8287,14 @@ function useDragVisualLoop({
         rafId = requestAnimationFrame(tick);
         return;
       }
-      const previousIntent = refs.lastIntentRef.current;
-      const isReturningToSource = intent.mode === "reorder" && intent.containerId === refs.sourceContainerIdRef.current;
-      if (!isReturningToSource && previousIntent?.mode === "reorder" && intent.mode === "reorder" && previousIntent.containerId !== intent.containerId) {
-        const prevContainer = refs.projectionRef.current.containerIndex.get(previousIntent.containerId);
-        if (prevContainer) {
-          const inPrevExpanded = adjustedPx >= prevContainer.rect.left - CONTAINER_SWITCH_HYSTERESIS && adjustedPx <= prevContainer.rect.right + CONTAINER_SWITCH_HYSTERESIS && adjustedPy >= prevContainer.rect.top - CONTAINER_SWITCH_HYSTERESIS && adjustedPy <= prevContainer.rect.bottom + CONTAINER_SWITCH_HYSTERESIS;
-          if (inPrevExpanded) intent = previousIntent;
-        }
-      }
+      intent = resolveContainerHold({
+        intent,
+        previousIntent: refs.lastIntentRef.current,
+        sourceContainerId: refs.sourceContainerIdRef.current,
+        projection: refs.projectionRef.current,
+        x: adjustedPx,
+        y: adjustedPy
+      });
       if (intent.mode === "nest") {
         setTargetPlane("nest");
         const targetId = intent.slotId.split("::nest::")[1] ?? "";
@@ -10230,7 +10271,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.9" ? "0.1.9" : null;
+  return "0.1.11" ? "0.1.11" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;

package/dist/client/client.mjs

@@ -5300,6 +5300,17 @@ var MIN_WIDTH = 40;
 var MIN_HEIGHT = 20;
 var INTERACTIVE_MIN = 8;
 var MAX_DEPTH = 12;
+var COLLAPSED_CONTAINER_HIT_MIN = 24;
+function collapsedContainerHitRect(el, rect) {
+  if (el.children.length > 0 || el.textContent?.trim()) return null;
+  if (getDirectEditorMeta(el)?.containerKind !== "plain") return null;
+  if (el.getClientRects().length === 0) return null;
+  const width = Math.max(rect.width, COLLAPSED_CONTAINER_HIT_MIN);
+  const height = Math.max(rect.height, COLLAPSED_CONTAINER_HIT_MIN);
+  const left = rect.left + rect.width / 2 - width / 2;
+  const top = rect.top + rect.height / 2 - height / 2;
+  return new DOMRect(left, top, width, height);
+}
 var _runtimeNodeIdMap = /* @__PURE__ */ new WeakMap();
 var _runtimeNodeIdCounter = 0;
 function getRuntimeNodeId(el) {
@@ -5451,7 +5462,8 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
           const nodeId2 = resolveStableNodeId(el, usedNodeIds);
           usedNodeIds.add(nodeId2);
           el.setAttribute(DND_NODE_ID_ATTR, nodeId2);
-          if (isZeroRect) {
+          const collapsedHitRect = isZeroRect && !isSvgRoot ? collapsedContainerHitRect(el, rect) : null;
+          if (isZeroRect && !collapsedHitRect) {
             resolvedUnreported.add(el);
           } else {
             seenResolvedHosts.add(el);
@@ -5468,7 +5480,7 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
               resolvedHostSelector: selector,
               resolutionKind: "direct-host",
               label: getLabel(el),
-              rect,
+              rect: collapsedHitRect ?? rect,
               containerStrategy: parentEl2 && isFlexOrGridParent(parentEl2) ? resolveContainerStrategy(parentEl2) : null,
               eligibilitySource: smallEligibility,
               draggable: false,
@@ -7372,7 +7384,7 @@ function computeSlotBoundaryPoint(slot, container, projectionTree) {
   {
     let lineY;
     if (n === 0) {
-      lineY = container.rect.top;
+      lineY = container.rect.top + container.rect.height / 2;
     } else if (i === 0) {
       lineY = nodeRect(children[0])?.top ?? container.rect.top;
     } else if (i >= n) {
@@ -7877,6 +7889,7 @@ function createDragIntentEngine(projection, activeId, options) {
 // src/client/dnd/design-mode/drop-line.ts
 var DROP_LINE_THICKNESS_PX = 2;
 var DROP_LINE_MIN_LENGTH_PX = 40;
+var EMPTY_CONTAINER_INSET_PX = 8;
 function slotDropLine(slot, container, projectionTree, sdx, sdy) {
   const T = DROP_LINE_THICKNESS_PX;
   const MIN = DROP_LINE_MIN_LENGTH_PX;
@@ -7910,6 +7923,14 @@ function slotDropLine(slot, container, projectionTree, sdx, sdy) {
       };
     }
   }
+  if (container.children.length === 0 && container.rect.width > 2 * EMPTY_CONTAINER_INSET_PX + MIN) {
+    return {
+      x: container.rect.left + EMPTY_CONTAINER_INSET_PX - sdx,
+      y: bp.y - sdy - T / 2,
+      width: container.rect.width - 2 * EMPTY_CONTAINER_INSET_PX,
+      height: T
+    };
+  }
   return {
     x: container.rect.left - sdx,
     y: bp.y - sdy - T / 2,
@@ -8119,6 +8140,27 @@ function computeAllowNest(nestPreview, isLargeDraggedNode, rowLocked) {
   const childId = nestPreview.slotId.split("::nest::")[1] ?? "";
   return !!childId && !isLargeDraggedNode;
 }
+function resolveContainerHold(params) {
+  const { intent, previousIntent, sourceContainerId, projection, x, y } = params;
+  if (intent.mode !== "reorder" || previousIntent?.mode !== "reorder") return intent;
+  if (previousIntent.containerId === intent.containerId) return intent;
+  if (intent.containerId === sourceContainerId) return intent;
+  if (isProjectedDescendant(intent.containerId, previousIntent.containerId, projection.projectionTree)) {
+    return intent;
+  }
+  const prev = projection.containerIndex.get(previousIntent.containerId);
+  if (!prev) return intent;
+  const inPrevExpanded = x >= prev.rect.left - CONTAINER_SWITCH_HYSTERESIS && x <= prev.rect.right + CONTAINER_SWITCH_HYSTERESIS && y >= prev.rect.top - CONTAINER_SWITCH_HYSTERESIS && y <= prev.rect.bottom + CONTAINER_SWITCH_HYSTERESIS;
+  return inPrevExpanded ? previousIntent : intent;
+}
+function isProjectedDescendant(id, ancestorId, tree) {
+  let parentId = tree.get(id)?.parentId ?? null;
+  while (parentId) {
+    if (parentId === ancestorId) return true;
+    parentId = tree.get(parentId)?.parentId ?? null;
+  }
+  return false;
+}
 function useDragVisualLoop({
   activeDrag,
   refs,
@@ -8210,15 +8252,14 @@ function useDragVisualLoop({
         rafId = requestAnimationFrame(tick);
         return;
       }
-      const previousIntent = refs.lastIntentRef.current;
-      const isReturningToSource = intent.mode === "reorder" && intent.containerId === refs.sourceContainerIdRef.current;
-      if (!isReturningToSource && previousIntent?.mode === "reorder" && intent.mode === "reorder" && previousIntent.containerId !== intent.containerId) {
-        const prevContainer = refs.projectionRef.current.containerIndex.get(previousIntent.containerId);
-        if (prevContainer) {
-          const inPrevExpanded = adjustedPx >= prevContainer.rect.left - CONTAINER_SWITCH_HYSTERESIS && adjustedPx <= prevContainer.rect.right + CONTAINER_SWITCH_HYSTERESIS && adjustedPy >= prevContainer.rect.top - CONTAINER_SWITCH_HYSTERESIS && adjustedPy <= prevContainer.rect.bottom + CONTAINER_SWITCH_HYSTERESIS;
-          if (inPrevExpanded) intent = previousIntent;
-        }
-      }
+      intent = resolveContainerHold({
+        intent,
+        previousIntent: refs.lastIntentRef.current,
+        sourceContainerId: refs.sourceContainerIdRef.current,
+        projection: refs.projectionRef.current,
+        x: adjustedPx,
+        y: adjustedPy
+      });
       if (intent.mode === "nest") {
         setTargetPlane("nest");
         const targetId = intent.slotId.split("::nest::")[1] ?? "";
@@ -10195,7 +10236,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.9" ? "0.1.9" : null;
+  return "0.1.11" ? "0.1.11" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;

package/dist/inspector.standalone.js

@@ -2139,6 +2139,10 @@
             vidIdentity: true,
             nodeMeta: true,
             refusals: true,
+            // Host -> runtime `SELECT {vid}` (alias `SELECT_ELEMENT_BY_VID`)
+            // re-selects a node by its stamped `data-vid`, e.g. after the
+            // iframe reloaded and lost the selection.
+            selectByVid: true,
           },
         }
       }
@@ -2198,9 +2202,27 @@
         }
         if (meta && meta.componentName) nodeMeta.component = meta.componentName
         if (meta && meta.lockReason) nodeMeta.lockReason = meta.lockReason
+        if (nodeMeta.isKitOrigin) {
+          var usage = resolveScreenUsageMeta(el)
+          if (usage && usage.vid !== vid) {
+            nodeMeta.usageVid = usage.vid
+            if (usage.file) nodeMeta.usageFile = usage.file
+          }
+        }
         return nodeMeta
       }
 
+      // The nearest non-template meta above `el` (the screen-file usage of
+      // the kit instance owning it) when it carries a valid vid, else null.
+      function resolveScreenUsageMeta(el) {
+        var owner = getUsageMetaOwnerFiberFromElement(el)
+        var usage = owner && resolveEditorMetaValue(owner.memoizedProps.__editorMeta)
+        if (usage && typeof usage.vid === "string" && VID_PATTERN.test(usage.vid)) {
+          return usage
+        }
+        return null
+      }
+
       /**
        * Emit `REFUSED` (vid-identity migration) instead of letting a
        * drag/drop the runtime's own policy would reject proceed silently —
@@ -2283,6 +2305,53 @@
       var inspectorCleanupMap = new WeakMap()
       var BADGE_UPDATE_DELAY_MS = 50
 
+      // Host-driven selection by `data-vid`: same end state as a single
+      // user click (styles, `selectedElements`, design-mode sync, an
+      // `ELEMENT_SELECTED` carrying `extractMetadata`). Silent when the vid
+      // is malformed or nothing renders it.
+      function selectElementByVid(vid) {
+        if (typeof vid !== "string" || !VID_PATTERN.test(vid)) return
+        var target = safeQuerySelector('[data-vid="' + vid + '"]')
+        if (!target || !isValidContentElement(target)) {
+          inspectorLog("[Inspector] SELECT: no element for vid", vid)
+          return
+        }
+
+        removeHighlight()
+        var previousSelection = selectedElements.slice()
+        previousSelection.forEach(function (el) {
+          removeInspectorStyles(el)
+          cleanupElementListeners(el)
+        })
+        selectedElements = [target]
+        selectedElement = target
+        window._inspectorSelectedElement = target
+        if (window.__ARCHIE_INSPECTOR__)
+          window.__ARCHIE_INSPECTOR__.selectedElement = target
+        isElementSelected = true
+
+        applyInspectorStyles(target)
+        createSelectedBadge(target)
+        updateSharedHighlights()
+        setupBadgePositionListeners(target)
+
+        var rect = target.getBoundingClientRect()
+        var offscreen =
+          rect.bottom < 0 ||
+          rect.right < 0 ||
+          rect.top > window.innerHeight ||
+          rect.left > window.innerWidth
+        if (offscreen && typeof target.scrollIntoView === "function") {
+          target.scrollIntoView({ block: "center", inline: "nearest" })
+        }
+
+        postMessageToParent({
+          type: "ELEMENT_SELECTED",
+          metadata: extractMetadata(target),
+        })
+        publishSelectionToDesignMode()
+      }
+
       /**
        * Bridge to design-mode store: publish current inspector selection as
        * DND nodeIds so arrange overlay knows when to show resize handles +
@@ -5059,6 +5128,12 @@
               metadata: metadata,
             })
           }
+        } else if (
+          event.data &&
+          (event.data.type === "SELECT" ||
+            event.data.type === "SELECT_ELEMENT_BY_VID")
+        ) {
+          selectElementByVid(event.data.vid)
         } else if (event.data && event.data.type === "HIDE_SELECTED_ELEMENT") {
           if (selectedElement) {
             deleteElementCleanup(selectedElement)

package/dist/{inspector.standalone@0.1.9.js → inspector.standalone@0.1.11.js}

@@ -2139,6 +2139,10 @@
             vidIdentity: true,
             nodeMeta: true,
             refusals: true,
+            // Host -> runtime `SELECT {vid}` (alias `SELECT_ELEMENT_BY_VID`)
+            // re-selects a node by its stamped `data-vid`, e.g. after the
+            // iframe reloaded and lost the selection.
+            selectByVid: true,
           },
         }
       }
@@ -2198,9 +2202,27 @@
         }
         if (meta && meta.componentName) nodeMeta.component = meta.componentName
         if (meta && meta.lockReason) nodeMeta.lockReason = meta.lockReason
+        if (nodeMeta.isKitOrigin) {
+          var usage = resolveScreenUsageMeta(el)
+          if (usage && usage.vid !== vid) {
+            nodeMeta.usageVid = usage.vid
+            if (usage.file) nodeMeta.usageFile = usage.file
+          }
+        }
         return nodeMeta
       }
 
+      // The nearest non-template meta above `el` (the screen-file usage of
+      // the kit instance owning it) when it carries a valid vid, else null.
+      function resolveScreenUsageMeta(el) {
+        var owner = getUsageMetaOwnerFiberFromElement(el)
+        var usage = owner && resolveEditorMetaValue(owner.memoizedProps.__editorMeta)
+        if (usage && typeof usage.vid === "string" && VID_PATTERN.test(usage.vid)) {
+          return usage
+        }
+        return null
+      }
+
       /**
        * Emit `REFUSED` (vid-identity migration) instead of letting a
        * drag/drop the runtime's own policy would reject proceed silently —
@@ -2283,6 +2305,53 @@
       var inspectorCleanupMap = new WeakMap()
       var BADGE_UPDATE_DELAY_MS = 50
 
+      // Host-driven selection by `data-vid`: same end state as a single
+      // user click (styles, `selectedElements`, design-mode sync, an
+      // `ELEMENT_SELECTED` carrying `extractMetadata`). Silent when the vid
+      // is malformed or nothing renders it.
+      function selectElementByVid(vid) {
+        if (typeof vid !== "string" || !VID_PATTERN.test(vid)) return
+        var target = safeQuerySelector('[data-vid="' + vid + '"]')
+        if (!target || !isValidContentElement(target)) {
+          inspectorLog("[Inspector] SELECT: no element for vid", vid)
+          return
+        }
+
+        removeHighlight()
+        var previousSelection = selectedElements.slice()
+        previousSelection.forEach(function (el) {
+          removeInspectorStyles(el)
+          cleanupElementListeners(el)
+        })
+        selectedElements = [target]
+        selectedElement = target
+        window._inspectorSelectedElement = target
+        if (window.__ARCHIE_INSPECTOR__)
+          window.__ARCHIE_INSPECTOR__.selectedElement = target
+        isElementSelected = true
+
+        applyInspectorStyles(target)
+        createSelectedBadge(target)
+        updateSharedHighlights()
+        setupBadgePositionListeners(target)
+
+        var rect = target.getBoundingClientRect()
+        var offscreen =
+          rect.bottom < 0 ||
+          rect.right < 0 ||
+          rect.top > window.innerHeight ||
+          rect.left > window.innerWidth
+        if (offscreen && typeof target.scrollIntoView === "function") {
+          target.scrollIntoView({ block: "center", inline: "nearest" })
+        }
+
+        postMessageToParent({
+          type: "ELEMENT_SELECTED",
+          metadata: extractMetadata(target),
+        })
+        publishSelectionToDesignMode()
+      }
+
       /**
        * Bridge to design-mode store: publish current inspector selection as
        * DND nodeIds so arrange overlay knows when to show resize handles +
@@ -5059,6 +5128,12 @@
               metadata: metadata,
             })
           }
+        } else if (
+          event.data &&
+          (event.data.type === "SELECT" ||
+            event.data.type === "SELECT_ELEMENT_BY_VID")
+        ) {
+          selectElementByVid(event.data.vid)
         } else if (event.data && event.data.type === "HIDE_SELECTED_ELEMENT") {
           if (selectedElement) {
             deleteElementCleanup(selectedElement)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "sideEffects": false,
   "repository": {