@archie/devtools 0.1.5 → 0.1.7

package/dist/client/client.js

@@ -10130,7 +10130,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.5" ? "0.1.5" : null;
+  return "0.1.7" ? "0.1.7" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;

package/dist/client/client.mjs

@@ -10095,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.5" ? "0.1.5" : null;
+  return "0.1.7" ? "0.1.7" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;

package/dist/inspector.standalone.js

@@ -1126,6 +1126,98 @@
         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)
@@ -1161,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
@@ -4012,6 +4123,30 @@
         )
       }
 
+      // Same "usage outranks kit template" precedence as
+      // `getInspectorInfoFromElement`/`getExactSourceSignatureFromElement`
+      // (see those docstrings) — `extractMetadata`'s `editorMeta`/`vid`/
+      // `nodeMeta` used to read plain `findNearestEditorMeta`, which walks
+      // the fiber chain nearest-meta-wins with NO usage projection. That is
+      // correct for a bare, directly-authored node, but wrong the moment
+      // `element` is a kit-rendered host with its OWN kit-template direct
+      // meta (Kit.Card's root div, a real, instrumented `origin:'kit'`/
+      // `template:true` position) — it reported the TEMPLATE's own internal
+      // vid instead of the screen-file USAGE's, the instant the bare-wrapper
+      // guard above (or any other caller) hands `extractMetadata` a
+      // kit-rendered node directly, instead of one already climbed past by
+      // `climbVisualUnitChain`'s kit-wrapper fallback.
+      function resolveEditorMetaResultForElement(element) {
+        if (!element) return null
+        var usageMeta = projectUsageMetaFromElement(element)
+        if (usageMeta) return { meta: usageMeta, element: element }
+        var directMeta = getDirectEditorMetaFromElement(element)
+        if (directMeta) return { meta: directMeta, element: element }
+        var ownerMeta = getOwnerEditorMetaFromElement(element)
+        if (ownerMeta) return { meta: ownerMeta, element: element }
+        return findNearestEditorMeta(element)
+      }
+
       function extractMetadata(element) {
         if (!element) return null
 
@@ -4027,7 +4162,7 @@
         }
 
         const inspectorInfo = getInspectorInfoFromElement(element)
-        const editorMeta = findNearestEditorMeta(element)
+        const editorMeta = resolveEditorMetaResultForElement(element)
 
         return {
           tagName: tagName,

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

@@ -1126,6 +1126,98 @@
         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)
@@ -1161,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
@@ -4012,6 +4123,30 @@
         )
       }
 
+      // Same "usage outranks kit template" precedence as
+      // `getInspectorInfoFromElement`/`getExactSourceSignatureFromElement`
+      // (see those docstrings) — `extractMetadata`'s `editorMeta`/`vid`/
+      // `nodeMeta` used to read plain `findNearestEditorMeta`, which walks
+      // the fiber chain nearest-meta-wins with NO usage projection. That is
+      // correct for a bare, directly-authored node, but wrong the moment
+      // `element` is a kit-rendered host with its OWN kit-template direct
+      // meta (Kit.Card's root div, a real, instrumented `origin:'kit'`/
+      // `template:true` position) — it reported the TEMPLATE's own internal
+      // vid instead of the screen-file USAGE's, the instant the bare-wrapper
+      // guard above (or any other caller) hands `extractMetadata` a
+      // kit-rendered node directly, instead of one already climbed past by
+      // `climbVisualUnitChain`'s kit-wrapper fallback.
+      function resolveEditorMetaResultForElement(element) {
+        if (!element) return null
+        var usageMeta = projectUsageMetaFromElement(element)
+        if (usageMeta) return { meta: usageMeta, element: element }
+        var directMeta = getDirectEditorMetaFromElement(element)
+        if (directMeta) return { meta: directMeta, element: element }
+        var ownerMeta = getOwnerEditorMetaFromElement(element)
+        if (ownerMeta) return { meta: ownerMeta, element: element }
+        return findNearestEditorMeta(element)
+      }
+
       function extractMetadata(element) {
         if (!element) return null
 
@@ -4027,7 +4162,7 @@
         }
 
         const inspectorInfo = getInspectorInfoFromElement(element)
-        const editorMeta = findNearestEditorMeta(element)
+        const editorMeta = resolveEditorMetaResultForElement(element)
 
         return {
           tagName: tagName,

package/package.json

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