@archie/devtools 0.1.4 → 0.1.6

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,115 @@
         )
       }
 
+      // 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
+      }
+
+      // True when `el`'s OWN identity is a directly-authored screen/project
+      // node — its own host fiber carries `__editorMeta` that is neither
+      // kit-origin nor chrome, i.e. a plain hand-written wrapper (`<a>`, a
+      // layout `<div>`). FALSE for a component INSTANCE whose selectable
+      // identity only exists by projecting onto an owning fiber — kit-runtime
+      // renders `<Button>`'s `<button>`/`Kit.Card`'s host `<div>` with no such
+      // direct, non-template meta of their own (see `getOwnerEditorMetaFromElement`
+      // and `projectUsageMetaFromElement`'s docstrings above).
+      function isBareAuthoredNode(el) {
+        var direct = getDirectEditorMetaFromElement(el)
+        return !!direct && !isKitOrChromeMeta(direct)
+      }
+
+      function parseCssLengthForUnit(value) {
+        var n = parseFloat(value)
+        return isNaN(n) ? 0 : n
+      }
+
+      function hasVisibleBorderSideForUnit(style, widthProp, styleProp) {
+        var styleValue = style.getPropertyValue(styleProp)
+        return (
+          parseCssLengthForUnit(style.getPropertyValue(widthProp)) > 0 &&
+          styleValue !== "none" &&
+          styleValue !== ""
+        )
+      }
+
+      // A wrapper's OWN visual footprint — background, border, shadow,
+      // radius or padding it renders on its own box, the signal that a click
+      // on it hits something the user perceives as a distinct surface, not
+      // bare layout plumbing (a plain `<a>`/`<div>` with zero box styling of
+      // its own). Used only to decide whether a BARE wrapper (see
+      // `isBareAuthoredNode`) may still swallow a component instance — a
+      // styled wrapper (a card) keeps the pre-existing #52 behavior.
+      function hasOwnVisualStyle(el) {
+        if (!el) return false
+        var style
+        try {
+          style = window.getComputedStyle(el)
+        } catch (styleError) {
+          // Unverifiable — fail OPEN to the pre-existing climb behavior
+          // (never newly block a climb the runtime already performed).
+          return true
+        }
+        if (!style) return true
+
+        var backgroundColor = style.getPropertyValue("background-color")
+        if (
+          backgroundColor &&
+          backgroundColor !== "transparent" &&
+          backgroundColor !== "rgba(0, 0, 0, 0)" &&
+          backgroundColor !== "rgba(0,0,0,0)"
+        ) {
+          return true
+        }
+
+        var backgroundImage = style.getPropertyValue("background-image")
+        if (backgroundImage && backgroundImage !== "none") return true
+
+        var boxShadow = style.getPropertyValue("box-shadow")
+        if (boxShadow && boxShadow !== "none") return true
+
+        if (
+          hasVisibleBorderSideForUnit(style, "border-top-width", "border-top-style") ||
+          hasVisibleBorderSideForUnit(style, "border-right-width", "border-right-style") ||
+          hasVisibleBorderSideForUnit(style, "border-bottom-width", "border-bottom-style") ||
+          hasVisibleBorderSideForUnit(style, "border-left-width", "border-left-style")
+        ) {
+          return true
+        }
+
+        if (
+          parseCssLengthForUnit(style.getPropertyValue("border-top-left-radius")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("border-top-right-radius")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("border-bottom-left-radius")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("border-bottom-right-radius")) > 0
+        ) {
+          return true
+        }
+
+        if (
+          parseCssLengthForUnit(style.getPropertyValue("padding-top")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("padding-right")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("padding-bottom")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("padding-left")) > 0
+        ) {
+          return true
+        }
+
+        return false
+      }
+
       function climbVisualUnitChain(leaf) {
         if (!leaf) return leaf
         var currentFile = getOwnSourceFileForElement(leaf)
@@ -1114,8 +1232,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
 
@@ -1135,6 +1253,25 @@
             break
           }
 
+          // Bare-wrapper guard (ARCH — instance swallowed by a styleless
+          // wrapper): a plain, directly-authored wrapper (an `<a>`, a layout
+          // `<div>`) with NO visual footprint of its own, whose only child is
+          // a component INSTANCE (its identity reachable only by projecting
+          // onto an owning fiber — never a bare node itself), must not
+          // swallow that instance: the instance is what the user sees and
+          // clicks, the wrapper is invisible plumbing. A wrapper that itself
+          // renders real background/border/shadow/radius/padding (a card)
+          // keeps the existing #52 behavior and still wins the climb, and a
+          // kit-rendered wrapper (itself a projected instance, never a bare
+          // node) is untouched by this guard — see `isBareAuthoredNode`.
+          if (
+            isBareAuthoredNode(parent) &&
+            !isBareAuthoredNode(current) &&
+            !hasOwnVisualStyle(parent)
+          ) {
+            break
+          }
+
           current = parent
         }
         return current
@@ -1203,16 +1340,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 +2344,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 +5941,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 +6378,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.6.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,115 @@
         )
       }
 
+      // 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
+      }
+
+      // True when `el`'s OWN identity is a directly-authored screen/project
+      // node — its own host fiber carries `__editorMeta` that is neither
+      // kit-origin nor chrome, i.e. a plain hand-written wrapper (`<a>`, a
+      // layout `<div>`). FALSE for a component INSTANCE whose selectable
+      // identity only exists by projecting onto an owning fiber — kit-runtime
+      // renders `<Button>`'s `<button>`/`Kit.Card`'s host `<div>` with no such
+      // direct, non-template meta of their own (see `getOwnerEditorMetaFromElement`
+      // and `projectUsageMetaFromElement`'s docstrings above).
+      function isBareAuthoredNode(el) {
+        var direct = getDirectEditorMetaFromElement(el)
+        return !!direct && !isKitOrChromeMeta(direct)
+      }
+
+      function parseCssLengthForUnit(value) {
+        var n = parseFloat(value)
+        return isNaN(n) ? 0 : n
+      }
+
+      function hasVisibleBorderSideForUnit(style, widthProp, styleProp) {
+        var styleValue = style.getPropertyValue(styleProp)
+        return (
+          parseCssLengthForUnit(style.getPropertyValue(widthProp)) > 0 &&
+          styleValue !== "none" &&
+          styleValue !== ""
+        )
+      }
+
+      // A wrapper's OWN visual footprint — background, border, shadow,
+      // radius or padding it renders on its own box, the signal that a click
+      // on it hits something the user perceives as a distinct surface, not
+      // bare layout plumbing (a plain `<a>`/`<div>` with zero box styling of
+      // its own). Used only to decide whether a BARE wrapper (see
+      // `isBareAuthoredNode`) may still swallow a component instance — a
+      // styled wrapper (a card) keeps the pre-existing #52 behavior.
+      function hasOwnVisualStyle(el) {
+        if (!el) return false
+        var style
+        try {
+          style = window.getComputedStyle(el)
+        } catch (styleError) {
+          // Unverifiable — fail OPEN to the pre-existing climb behavior
+          // (never newly block a climb the runtime already performed).
+          return true
+        }
+        if (!style) return true
+
+        var backgroundColor = style.getPropertyValue("background-color")
+        if (
+          backgroundColor &&
+          backgroundColor !== "transparent" &&
+          backgroundColor !== "rgba(0, 0, 0, 0)" &&
+          backgroundColor !== "rgba(0,0,0,0)"
+        ) {
+          return true
+        }
+
+        var backgroundImage = style.getPropertyValue("background-image")
+        if (backgroundImage && backgroundImage !== "none") return true
+
+        var boxShadow = style.getPropertyValue("box-shadow")
+        if (boxShadow && boxShadow !== "none") return true
+
+        if (
+          hasVisibleBorderSideForUnit(style, "border-top-width", "border-top-style") ||
+          hasVisibleBorderSideForUnit(style, "border-right-width", "border-right-style") ||
+          hasVisibleBorderSideForUnit(style, "border-bottom-width", "border-bottom-style") ||
+          hasVisibleBorderSideForUnit(style, "border-left-width", "border-left-style")
+        ) {
+          return true
+        }
+
+        if (
+          parseCssLengthForUnit(style.getPropertyValue("border-top-left-radius")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("border-top-right-radius")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("border-bottom-left-radius")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("border-bottom-right-radius")) > 0
+        ) {
+          return true
+        }
+
+        if (
+          parseCssLengthForUnit(style.getPropertyValue("padding-top")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("padding-right")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("padding-bottom")) > 0 ||
+          parseCssLengthForUnit(style.getPropertyValue("padding-left")) > 0
+        ) {
+          return true
+        }
+
+        return false
+      }
+
       function climbVisualUnitChain(leaf) {
         if (!leaf) return leaf
         var currentFile = getOwnSourceFileForElement(leaf)
@@ -1114,8 +1232,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
 
@@ -1135,6 +1253,25 @@
             break
           }
 
+          // Bare-wrapper guard (ARCH — instance swallowed by a styleless
+          // wrapper): a plain, directly-authored wrapper (an `<a>`, a layout
+          // `<div>`) with NO visual footprint of its own, whose only child is
+          // a component INSTANCE (its identity reachable only by projecting
+          // onto an owning fiber — never a bare node itself), must not
+          // swallow that instance: the instance is what the user sees and
+          // clicks, the wrapper is invisible plumbing. A wrapper that itself
+          // renders real background/border/shadow/radius/padding (a card)
+          // keeps the existing #52 behavior and still wins the climb, and a
+          // kit-rendered wrapper (itself a projected instance, never a bare
+          // node) is untouched by this guard — see `isBareAuthoredNode`.
+          if (
+            isBareAuthoredNode(parent) &&
+            !isBareAuthoredNode(current) &&
+            !hasOwnVisualStyle(parent)
+          ) {
+            break
+          }
+
           current = parent
         }
         return current
@@ -1203,16 +1340,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 +2344,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 +5941,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 +6378,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.6",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "sideEffects": false,
   "repository": {