@archie/devtools 0.1.4 → 0.1.5

package/dist/inspector.standalone.js

@@ -7,6 +7,15 @@
   var _rawDocumentQuerySelectorAll = Document.prototype.querySelectorAll
   var _documentQuerySelectorsPatched = false
 
+  // Design-mode (arrange) overlay elements — HitArea, resize handles,
+  // drop-line, etc. — carry this attribute. Single source of truth so every
+  // check below (isInspectorElement, inspectorClickHandler, the dblclick
+  // descend guard) can never desync from a rename.
+  var DESIGN_MODE_UI_SELECTOR = "[data-design-mode-ui]"
+  // The grab HitArea specifically (DesignModeOverlay.tsx's `HitArea`) — the
+  // ONLY design-mode-ui element the dblclick descend guard below exempts.
+  var DESIGN_MODE_HIT_AREA_SELECTOR = '[data-design-mode-ui="hit-area"]'
+
   function runInspector() {
     var INSPECTOR_PROBLEMATIC_SELECTOR_PATTERNS = [
       /\/\d+/,
@@ -1100,6 +1109,23 @@
         )
       }
 
+      // The identity a wrapper ancestor climbs AS. A plain instrumented
+      // wrapper climbs as its own direct meta. A kit-rendered wrapper (a
+      // `Kit.Card` host div) carries kit-TEMPLATE direct meta instead, so it
+      // falls back to the projected USAGE one level up in the screen file —
+      // but that usage can itself be kit/chrome, so it's re-checked below.
+      function getVisualUnitMetaForElement(el) {
+        var directMeta = getDirectEditorMetaFromElement(el)
+        if (!directMeta) return null
+        if (!isKitOrChromeMeta(directMeta)) return directMeta
+
+        // The projected USAGE can itself be kit/chrome (e.g. a Kit.Card host
+        // used inside a chrome file) — re-check it so the climb never enters
+        // chrome scaffolding through a kit-rendered wrapper.
+        var usageMeta = projectUsageMetaFromElement(el)
+        return usageMeta && !isKitOrChromeMeta(usageMeta) ? usageMeta : null
+      }
+
       function climbVisualUnitChain(leaf) {
         if (!leaf) return leaf
         var currentFile = getOwnSourceFileForElement(leaf)
@@ -1114,8 +1140,8 @@
           if (isScreenRootWrapperElement(parent)) break
           if (getSoleElementChild(parent) !== current) break
 
-          var parentMeta = getDirectEditorMetaFromElement(parent)
-          if (!parentMeta || isKitOrChromeMeta(parentMeta)) break
+          var parentMeta = getVisualUnitMetaForElement(parent)
+          if (!parentMeta) break
           if (!parentMeta.file || parentMeta.file !== currentFile) break
           if (isStructuralComponentNameForUnit(parentMeta.componentName)) break
 
@@ -1203,16 +1229,43 @@
         return null
       }
 
+      // The point-hit stack at (x, y), topmost first. Prefers elementsFromPoint
+      // (so a topmost overlay, e.g. the design-mode grab overlay, doesn't hide
+      // the real element beneath it) and falls back to the single-element
+      // elementFromPoint where the multi-element API isn't available.
+      function collectPointHitList(x, y) {
+        try {
+          if (typeof document.elementsFromPoint === "function") {
+            return document.elementsFromPoint(x, y) || []
+          }
+        } catch (_listError) {
+          // fall through to the single-element lookup below
+        }
+        try {
+          var single = document.elementFromPoint(x, y)
+          return single ? [single] : []
+        } catch (_pointError) {
+          return []
+        }
+      }
+
       // The direct child of `container` that sits on the ancestor line to
       // (x, y) — the "select child toward the point" step (double click).
+      // Once a unit is selected, the full-coverage design-mode grab overlay
+      // ([data-design-mode-ui]) sits topmost at that point, so a plain
+      // elementFromPoint would just return the overlay itself — this walks
+      // the hit stack and skips inspector/overlay elements to find the real
+      // element underneath, exactly like getElementFromPoint does for hover.
       function findImmediateChildTowardPoint(container, x, y) {
+        var list = collectPointHitList(x, y)
         var atPoint = null
-        try {
-          atPoint = document.elementFromPoint(x, y)
-        } catch (pointError) {
-          atPoint = null
+        for (var i = 0; i < list.length; i++) {
+          if (!isInspectorElement(list[i])) {
+            atPoint = list[i]
+            break
+          }
         }
-        if (!atPoint || isInspectorElement(atPoint)) return null
+        if (!atPoint) return null
         if (!container.contains(atPoint) || atPoint === container) return null
 
         var current = atPoint
@@ -2180,7 +2233,7 @@
           // drop-line, etc. These belong to the unified visual editor and must
           // pass mousedown/click events through to React (dnd-kit) instead of
           // being treated as inspect targets.
-          (element.closest && element.closest("[data-design-mode-ui]"))
+          (element.closest && element.closest(DESIGN_MODE_UI_SELECTOR))
         )
       }
 
@@ -5777,7 +5830,7 @@
         if (
           e.target &&
           typeof e.target.closest === "function" &&
-          e.target.closest("[data-design-mode-ui]")
+          e.target.closest(DESIGN_MODE_UI_SELECTOR)
         ) {
           return
         }
@@ -6214,11 +6267,17 @@
         "dblclick",
         function (e) {
           if (!isInspecting || !isElementSelected || !selectedElement) return
-          if (isInspectorElement(e.target)) return
+          // Only the grab HitArea is exempted — it covers the whole selected
+          // unit, so it (not the real element underneath) is what `e.target`
+          // names for a double click inside it. The 8px resize band is NOT a
+          // separate element — it's just the outer edge of that same HitArea
+          // div (detected by pointer position against its rect), so it's
+          // covered by this same exemption and a dblclick there DOES
+          // descend. Every OTHER design-mode-ui element (toolbar, output
+          // modal, …) still bails here, same as any other inspector UI.
           if (
-            e.target &&
-            typeof e.target.closest === "function" &&
-            e.target.closest("[data-design-mode-ui]")
+            isInspectorElement(e.target) &&
+            !(e.target && e.target.closest && e.target.closest(DESIGN_MODE_HIT_AREA_SELECTOR))
           ) {
             return
           }

package/dist/{inspector.standalone@0.1.4.js → inspector.standalone@0.1.5.js}

@@ -7,6 +7,15 @@
   var _rawDocumentQuerySelectorAll = Document.prototype.querySelectorAll
   var _documentQuerySelectorsPatched = false
 
+  // Design-mode (arrange) overlay elements — HitArea, resize handles,
+  // drop-line, etc. — carry this attribute. Single source of truth so every
+  // check below (isInspectorElement, inspectorClickHandler, the dblclick
+  // descend guard) can never desync from a rename.
+  var DESIGN_MODE_UI_SELECTOR = "[data-design-mode-ui]"
+  // The grab HitArea specifically (DesignModeOverlay.tsx's `HitArea`) — the
+  // ONLY design-mode-ui element the dblclick descend guard below exempts.
+  var DESIGN_MODE_HIT_AREA_SELECTOR = '[data-design-mode-ui="hit-area"]'
+
   function runInspector() {
     var INSPECTOR_PROBLEMATIC_SELECTOR_PATTERNS = [
       /\/\d+/,
@@ -1100,6 +1109,23 @@
         )
       }
 
+      // The identity a wrapper ancestor climbs AS. A plain instrumented
+      // wrapper climbs as its own direct meta. A kit-rendered wrapper (a
+      // `Kit.Card` host div) carries kit-TEMPLATE direct meta instead, so it
+      // falls back to the projected USAGE one level up in the screen file —
+      // but that usage can itself be kit/chrome, so it's re-checked below.
+      function getVisualUnitMetaForElement(el) {
+        var directMeta = getDirectEditorMetaFromElement(el)
+        if (!directMeta) return null
+        if (!isKitOrChromeMeta(directMeta)) return directMeta
+
+        // The projected USAGE can itself be kit/chrome (e.g. a Kit.Card host
+        // used inside a chrome file) — re-check it so the climb never enters
+        // chrome scaffolding through a kit-rendered wrapper.
+        var usageMeta = projectUsageMetaFromElement(el)
+        return usageMeta && !isKitOrChromeMeta(usageMeta) ? usageMeta : null
+      }
+
       function climbVisualUnitChain(leaf) {
         if (!leaf) return leaf
         var currentFile = getOwnSourceFileForElement(leaf)
@@ -1114,8 +1140,8 @@
           if (isScreenRootWrapperElement(parent)) break
           if (getSoleElementChild(parent) !== current) break
 
-          var parentMeta = getDirectEditorMetaFromElement(parent)
-          if (!parentMeta || isKitOrChromeMeta(parentMeta)) break
+          var parentMeta = getVisualUnitMetaForElement(parent)
+          if (!parentMeta) break
           if (!parentMeta.file || parentMeta.file !== currentFile) break
           if (isStructuralComponentNameForUnit(parentMeta.componentName)) break
 
@@ -1203,16 +1229,43 @@
         return null
       }
 
+      // The point-hit stack at (x, y), topmost first. Prefers elementsFromPoint
+      // (so a topmost overlay, e.g. the design-mode grab overlay, doesn't hide
+      // the real element beneath it) and falls back to the single-element
+      // elementFromPoint where the multi-element API isn't available.
+      function collectPointHitList(x, y) {
+        try {
+          if (typeof document.elementsFromPoint === "function") {
+            return document.elementsFromPoint(x, y) || []
+          }
+        } catch (_listError) {
+          // fall through to the single-element lookup below
+        }
+        try {
+          var single = document.elementFromPoint(x, y)
+          return single ? [single] : []
+        } catch (_pointError) {
+          return []
+        }
+      }
+
       // The direct child of `container` that sits on the ancestor line to
       // (x, y) — the "select child toward the point" step (double click).
+      // Once a unit is selected, the full-coverage design-mode grab overlay
+      // ([data-design-mode-ui]) sits topmost at that point, so a plain
+      // elementFromPoint would just return the overlay itself — this walks
+      // the hit stack and skips inspector/overlay elements to find the real
+      // element underneath, exactly like getElementFromPoint does for hover.
       function findImmediateChildTowardPoint(container, x, y) {
+        var list = collectPointHitList(x, y)
         var atPoint = null
-        try {
-          atPoint = document.elementFromPoint(x, y)
-        } catch (pointError) {
-          atPoint = null
+        for (var i = 0; i < list.length; i++) {
+          if (!isInspectorElement(list[i])) {
+            atPoint = list[i]
+            break
+          }
         }
-        if (!atPoint || isInspectorElement(atPoint)) return null
+        if (!atPoint) return null
         if (!container.contains(atPoint) || atPoint === container) return null
 
         var current = atPoint
@@ -2180,7 +2233,7 @@
           // drop-line, etc. These belong to the unified visual editor and must
           // pass mousedown/click events through to React (dnd-kit) instead of
           // being treated as inspect targets.
-          (element.closest && element.closest("[data-design-mode-ui]"))
+          (element.closest && element.closest(DESIGN_MODE_UI_SELECTOR))
         )
       }
 
@@ -5777,7 +5830,7 @@
         if (
           e.target &&
           typeof e.target.closest === "function" &&
-          e.target.closest("[data-design-mode-ui]")
+          e.target.closest(DESIGN_MODE_UI_SELECTOR)
         ) {
           return
         }
@@ -6214,11 +6267,17 @@
         "dblclick",
         function (e) {
           if (!isInspecting || !isElementSelected || !selectedElement) return
-          if (isInspectorElement(e.target)) return
+          // Only the grab HitArea is exempted — it covers the whole selected
+          // unit, so it (not the real element underneath) is what `e.target`
+          // names for a double click inside it. The 8px resize band is NOT a
+          // separate element — it's just the outer edge of that same HitArea
+          // div (detected by pointer position against its rect), so it's
+          // covered by this same exemption and a dblclick there DOES
+          // descend. Every OTHER design-mode-ui element (toolbar, output
+          // modal, …) still bails here, same as any other inspector UI.
           if (
-            e.target &&
-            typeof e.target.closest === "function" &&
-            e.target.closest("[data-design-mode-ui]")
+            isInspectorElement(e.target) &&
+            !(e.target && e.target.closest && e.target.closest(DESIGN_MODE_HIT_AREA_SELECTOR))
           ) {
             return
           }

package/package.json

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