@archie/devtools 0.1.3 → 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+/,
@@ -987,6 +996,176 @@
         return canonicalTarget
       }
 
+      // ── "Visual unit" climb (ARCH — hit-testing bounces to a full-bleed
+      // child) ─────────────────────────────────────────────────────────────
+      // A click on a card's padding hits the CARD's only element child (a
+      // `flex flex-col p-6` div that fills 100% of the card's box), never the
+      // card itself — the child is topmost at that point AND is the first
+      // ancestor-or-self with its own source signature, so the walk above
+      // returns it immediately. That makes the card's own border/shadow/
+      // padding permanently unreachable by click, and a drag started there
+      // moves only the inner div, leaving an empty bordered shell behind.
+      //
+      // The fix is a SEPARATE pass, applied only where a user interaction
+      // commits a SELECTION (inspectorClickHandler, and the synthetic
+      // mousedown Escape/double-click dispatch below) — never inside
+      // `resolveExactInspectTarget`/`getElementFromPoint` themselves. Those
+      // two stay leaf-exact on purpose: hover highlighting and shared/
+      // mirrored-instance signature matching (`resolveSharedTargets`,
+      // `findElementByInspectorSource`, APPLY_STYLE_CHANGE's mutation
+      // resolution) key off the PRECISE host a signature names, and two
+      // nested hosts with their own distinct metas (a real, if less common,
+      // shape than the wrapper case below) must stay distinguishable there.
+      //
+      // Here, climb through "single-child wrapper" ancestors — each one
+      // instrumented (its own direct __editorMeta), in the SAME file, not
+      // kit-origin/chrome, not the screen root, whose ONLY element child is
+      // the node below and whose box visually contains it — and return the
+      // OUTERMOST one. A leaf clicked directly (the `<h3>` among two
+      // siblings) never enters the climb: its parent has more than one
+      // element child, so the loop breaks on the first iteration.
+      var STRUCTURAL_COMPONENT_NAME_RE = /(?:Page|Provider|RootLayout)$/
+
+      function isStructuralComponentNameForUnit(name) {
+        return !!name && STRUCTURAL_COMPONENT_NAME_RE.test(name)
+      }
+
+      // Vanilla twin of isHighLevelStructuralElement (structural-policy.ts) —
+      // the "screen root" a visual-unit climb must never swallow.
+      function isScreenRootWrapperElement(el) {
+        if (!el || el.nodeType !== 1) return true
+        if (el.hasAttribute && el.hasAttribute("data-dnd-structural")) return true
+        var tag = String(el.tagName || "").toLowerCase()
+        if (tag === "html" || tag === "body") return true
+        if (el.id === "root") return true
+        var parent = el.parentElement
+        if (
+          tag === "main" &&
+          (parent === document.body || (parent && parent.id === "root"))
+        ) {
+          return true
+        }
+        return false
+      }
+
+      function getSoleElementChild(el) {
+        var only = null
+        var kids = el.children
+        for (var i = 0; i < kids.length; i++) {
+          if (only) return null
+          only = kids[i]
+        }
+        return only
+      }
+
+      // "kit-internal" (vendor template, ARCH-883) or "chrome" (app shell) —
+      // neither is a legitimate visual-unit wrapper: climbing into one would
+      // select vendor/shell scaffolding the user never asked to move.
+      function isKitOrChromeMeta(meta) {
+        return (
+          !!meta &&
+          (isTemplateFrame(meta) ||
+            meta.isKitOrigin === true ||
+            meta.isChrome === true)
+        )
+      }
+
+      // The file this element's OWN identity is written in — usage
+      // projection first (same precedence as getExactSourceSignatureFromElement),
+      // then direct/owner fiber meta, then the legacy source-ref attribute.
+      function getOwnSourceFileForElement(element) {
+        var usageMeta = projectUsageMetaFromElement(element)
+        if (usageMeta && usageMeta.file) return usageMeta.file
+
+        var directMeta = getDirectEditorMetaFromElement(element)
+        if (directMeta && directMeta.file) return directMeta.file
+
+        var ownerMeta = getOwnerEditorMetaFromElement(element)
+        if (ownerMeta && ownerMeta.file) return ownerMeta.file
+
+        if (
+          element &&
+          typeof element.getAttribute === "function" &&
+          element.hasAttribute(ARCHIE_SOURCE_REF_ATTR)
+        ) {
+          var raw = element.getAttribute(ARCHIE_SOURCE_REF_ATTR) || ""
+          var file = raw.split("::")[0]
+          if (file) return file
+        }
+
+        return ""
+      }
+
+      // Loose "fits inside" check (1px tolerance for subpixel rounding) — the
+      // wrapper's box must visually contain the child's, not merely equal it
+      // (padding/border on the wrapper is expected and fine).
+      function rectContainsForUnit(outer, inner) {
+        var eps = 1
+        return (
+          inner.left >= outer.left - eps &&
+          inner.top >= outer.top - eps &&
+          inner.right <= outer.right + eps &&
+          inner.bottom <= outer.bottom + eps
+        )
+      }
+
+      // 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)
+        if (!currentFile) return leaf
+
+        var current = leaf
+        while (true) {
+          var parent = current.parentElement
+          if (!parent) break
+          if (parent === document.body || parent === document.documentElement) break
+          if (isInspectorElement(parent)) break
+          if (isScreenRootWrapperElement(parent)) break
+          if (getSoleElementChild(parent) !== current) break
+
+          var parentMeta = getVisualUnitMetaForElement(parent)
+          if (!parentMeta) break
+          if (!parentMeta.file || parentMeta.file !== currentFile) break
+          if (isStructuralComponentNameForUnit(parentMeta.componentName)) break
+
+          try {
+            if (
+              !rectContainsForUnit(
+                parent.getBoundingClientRect(),
+                current.getBoundingClientRect()
+              )
+            ) {
+              break
+            }
+          } catch (rectError) {
+            // Containment couldn't be verified — never climb into an
+            // unverified parent; stop here (current stays the last
+            // confirmed-contained unit), same as a failed containment check.
+            break
+          }
+
+          current = parent
+        }
+        return current
+      }
+
       function resolveExactInspectTarget(element) {
         var normalizedTarget = normalizeInspectableTarget(element)
         if (
@@ -1031,6 +1210,119 @@
         return resolveCoarseInspectTarget(normalizedTarget)
       }
 
+      // Nearest real DOM ancestor above `el` that carries its own source
+      // signature — the "select parent" step of visual-unit navigation
+      // (Escape). Climbed to its own outer unit so Escape always lands on a
+      // full unit boundary, the same guarantee a click gives.
+      function findParentUnitElement(el) {
+        var current = el ? el.parentElement : null
+        while (
+          current &&
+          current !== document.body &&
+          current !== document.documentElement
+        ) {
+          if (!isInspectorElement(current) && getExactSourceSignatureFromElement(current)) {
+            return climbVisualUnitChain(current)
+          }
+          current = current.parentElement
+        }
+        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
+        for (var i = 0; i < list.length; i++) {
+          if (!isInspectorElement(list[i])) {
+            atPoint = list[i]
+            break
+          }
+        }
+        if (!atPoint) return null
+        if (!container.contains(atPoint) || atPoint === container) return null
+
+        var current = atPoint
+        while (current && current.parentElement !== container) {
+          current = current.parentElement
+        }
+        if (!current || current.parentElement !== container) return null
+        return current
+      }
+
+      // Consumed once by inspectorClickHandler, immediately below: a
+      // double-click DESCEND already picked the exact inner element the user
+      // asked for (one level down from the current unit, toward the click) —
+      // re-running the climb on that synthetic mousedown would immediately
+      // walk it straight back up to the same outer unit it just left. The
+      // ASCEND direction (Escape) never sets this: findParentUnitElement
+      // already returns a fully-climbed outer unit, so climbing it again is
+      // a no-op anyway.
+      var suppressUnitClimbOnce = false
+
+      // Reuses the exact pattern DesignModeOverlay's HitArea bypass already
+      // relies on (see hit-area-click-routing.test.tsx): a synthetic
+      // `mousedown` at the element's own center runs inspectorClickHandler's
+      // full selection flow (ELEMENT_SELECTED, badges, design-mode bridge)
+      // instead of a local, partial store flip.
+      function dispatchSyntheticSelect(el, suppressClimb) {
+        if (!el) return
+        var rect
+        try {
+          rect = el.getBoundingClientRect()
+        } catch (rectError) {
+          // Never got to dispatch — the flag must never be set for a
+          // dispatch that didn't happen.
+          return
+        }
+        var cx = rect.left + rect.width / 2
+        var cy = rect.top + rect.height / 2
+
+        // Set the flag as late as possible (right before the dispatch that
+        // consumes it) and guarantee it never stays stuck `true` — whether
+        // dispatchEvent runs inspectorClickHandler to completion (which
+        // consumes it itself) or throws before/along the way.
+        if (suppressClimb) suppressUnitClimbOnce = true
+        try {
+          el.dispatchEvent(
+            new MouseEvent("mousedown", {
+              bubbles: true,
+              cancelable: true,
+              clientX: cx,
+              clientY: cy,
+            })
+          )
+        } finally {
+          suppressUnitClimbOnce = false
+        }
+      }
+
       function resolveSharedGroupSignature(element) {
         var inspectTarget = resolveExactInspectTarget(element)
         if (!inspectTarget) return ""
@@ -1941,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))
         )
       }
 
@@ -5522,6 +5814,11 @@
       // Selection handler: MUST run on mousedown before blockEvent. We register at load time (before
       // START_INSPECTION), so we run first in capture phase; we stopImmediatePropagation so blockEvent never runs.
       const inspectorClickHandler = function (e) {
+        // Consumed exactly once per mousedown, regardless of any early
+        // return below — see suppressUnitClimbOnce's docstring above.
+        var climbSuppressed = suppressUnitClimbOnce
+        suppressUnitClimbOnce = false
+
         if (!isInspecting) return
 
         // If the event originated on a design-mode (arrange) overlay element —
@@ -5533,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
         }
@@ -5554,6 +5851,12 @@
           return
         }
 
+        // "Visual unit" climb: a click on a full-bleed single-child wrapper
+        // (a card's padding div) selects the OUTERMOST wrapper of that 1:1
+        // chain (the card itself), not the innermost hit. See
+        // climbVisualUnitChain's docstring above.
+        target = climbSuppressed ? target : climbVisualUnitChain(target)
+
         // Block native behavior
         e.preventDefault()
         e.stopPropagation()
@@ -5954,6 +6257,44 @@
       // stopImmediatePropagation.
       document.addEventListener("mousedown", inspectorClickHandler, true)
 
+      // Visual-unit navigation, "descend" step: double click steps ONE level
+      // down from the current selection, toward wherever the double click
+      // landed — the reverse of the climb in resolveExactInspectTarget. Runs
+      // in capture, BEFORE setupEventBlockers' own "dblclick" blocker (both
+      // are registered here, at load time, ahead of any START_INSPECTION),
+      // so stopImmediatePropagation below reliably wins the race.
+      document.addEventListener(
+        "dblclick",
+        function (e) {
+          if (!isInspecting || !isElementSelected || !selectedElement) 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 (
+            isInspectorElement(e.target) &&
+            !(e.target && e.target.closest && e.target.closest(DESIGN_MODE_HIT_AREA_SELECTOR))
+          ) {
+            return
+          }
+          var child = findImmediateChildTowardPoint(
+            selectedElement,
+            e.clientX,
+            e.clientY
+          )
+          if (!child) return
+          e.preventDefault()
+          e.stopPropagation()
+          e.stopImmediatePropagation()
+          dispatchSyntheticSelect(child, true)
+        },
+        true
+      )
+
       // Block clicks when element is selected but not inspecting
       document.addEventListener(
         "click",
@@ -5971,30 +6312,59 @@
         true
       )
 
-      document.addEventListener("keydown", function (e) {
-        if (e.key === "Escape" && (isInspecting || isElementSelected)) {
-          isInspecting = false
-          isElementSelected = false
-          removeEventBlockers()
-          if (document.body) {
-            document.body.style.cursor = ""
-            document.body.style.userSelect = ""
+      // Capture phase, matching setupEventBlockers' own capture-phase
+      // "keydown" blocker: a bubble-phase listener registered here would
+      // never run once isInspecting is true — that blocker's
+      // stopImmediatePropagation wins the target's capture-listeners-first
+      // ordering regardless of add order (also matches
+      // onContextMenuDismissKey's own capture registration above).
+      document.addEventListener(
+        "keydown",
+        function (e) {
+          if (e.key !== "Escape") return
+
+          // Visual-unit navigation, "ascend" step: Escape steps ONE level up
+          // from the current selection (to the nearest ancestor with its own
+          // identity, climbed to ITS outer unit) instead of exiting selection
+          // entirely. Falls through to the exit-all behavior below only once
+          // there is no further ancestor to select — e.g. nothing is
+          // selected, or the selection is already the outermost reachable
+          // unit.
+          if (isInspecting && isElementSelected && selectedElement) {
+            var parentUnit = findParentUnitElement(selectedElement)
+            if (parentUnit) {
+              e.preventDefault()
+              e.stopImmediatePropagation()
+              dispatchSyntheticSelect(parentUnit)
+              return
+            }
           }
-          removeHighlight()
-          removeSelectedBadge()
-          selectedElements.forEach(function (el) {
-            if (el) removeInspectorStyles(el)
-          })
-          selectedElement = null
-          selectedElements = []
-          window._inspectorSelectedElement = null
-          if (window.__ARCHIE_INSPECTOR__)
-            window.__ARCHIE_INSPECTOR__.selectedElement = null
-          updateSharedHighlights()
-          publishSelectionToDesignMode()
-          postMessageToParent({ type: "INSPECTION_CANCELLED" })
-        }
-      })
+
+          if (isInspecting || isElementSelected) {
+            isInspecting = false
+            isElementSelected = false
+            removeEventBlockers()
+            if (document.body) {
+              document.body.style.cursor = ""
+              document.body.style.userSelect = ""
+            }
+            removeHighlight()
+            removeSelectedBadge()
+            selectedElements.forEach(function (el) {
+              if (el) removeInspectorStyles(el)
+            })
+            selectedElement = null
+            selectedElements = []
+            window._inspectorSelectedElement = null
+            if (window.__ARCHIE_INSPECTOR__)
+              window.__ARCHIE_INSPECTOR__.selectedElement = null
+            updateSharedHighlights()
+            publishSelectionToDesignMode()
+            postMessageToParent({ type: "INSPECTION_CANCELLED" })
+          }
+        },
+        true
+      )
     })()
   }
   if (typeof window !== "undefined") {