uilint-react 0.1.45 → 0.1.47

package/dist/{ElementBadges-RV7I6QXS.js → ElementBadges-N2N3CBLI.js}

@@ -3,7 +3,7 @@
 import {
   useUILintContext,
   useUILintStore
-} from "./chunk-BJD2V2LF.js";
+} from "./chunk-RAPUZC5J.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -129,6 +129,24 @@ function findNearbyBadges(positions, x, y, threshold) {
   });
 }
 
+// src/components/ui-lint/visibility-utils.ts
+function isElementCoveredByOverlay(element, badgeX, badgeY) {
+  const elementsAtPoint = document.elementsFromPoint(badgeX, badgeY);
+  for (const el of elementsAtPoint) {
+    if (el.hasAttribute("data-ui-lint")) continue;
+    if (el === element || element.contains(el)) continue;
+    if (el.contains(element)) continue;
+    const style = window.getComputedStyle(el);
+    const position = style.position;
+    const zIndex = parseInt(style.zIndex, 10);
+    const isOverlay = (position === "fixed" || position === "absolute") && (zIndex > 0 || style.zIndex === "auto" || style.zIndex === "inherit");
+    if (isOverlay) {
+      return true;
+    }
+  }
+  return false;
+}
+
 // src/components/ui-lint/ElementBadges.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var STYLES = {
@@ -256,6 +274,9 @@ function ElementBadges() {
         const y = rect.top - 8;
         if (rect.top < -50 || rect.top > window.innerHeight + 50) continue;
         if (rect.left < -50 || rect.left > window.innerWidth + 50) continue;
+        if (isElementCoveredByOverlay(element.element, x, y)) {
+          continue;
+        }
         positions.push({ element, issue, x, y, rect });
       }
       setBadgePositions(positions);
@@ -316,37 +337,53 @@ function ElementBadges() {
     }
     return filtered;
   }, [nudgedPositions, isAltKeyPressed, selectedFilePath, hoveredFilePath]);
+  const handleUILintInteraction = useCallback(
+    (e) => {
+      e.stopPropagation();
+    },
+    []
+  );
   if (!mounted) return null;
   if (autoScanState.status === "idle") return null;
-  const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, children: [
-    /* @__PURE__ */ jsx(BadgeAnimationStyles, {}),
-    visibleBadges.filter((pos, idx, arr) => {
-      const id = pos.element.id;
-      return arr.findIndex((p) => p.element.id === id) === idx;
-    }).map((nudgedPos) => {
-      const distance = Math.hypot(
-        nudgedPos.nudgedX - cursorPos.x,
-        nudgedPos.nudgedY - cursorPos.y
-      );
-      const nearbyBadges = findNearbyBadges(
-        visibleBadges,
-        nudgedPos.nudgedX,
-        nudgedPos.nudgedY,
-        NEARBY_THRESHOLD
-      );
-      return /* @__PURE__ */ jsx(
-        NudgedBadge,
-        {
-          position: nudgedPos,
-          distance,
-          nearbyBadges,
-          cursorPos,
-          onSelect: handleSelect
-        },
-        nudgedPos.element.id
-      );
-    })
-  ] });
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-ui-lint": true,
+      onMouseDown: handleUILintInteraction,
+      onClick: handleUILintInteraction,
+      onKeyDown: handleUILintInteraction,
+      style: { pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ jsx(BadgeAnimationStyles, {}),
+        visibleBadges.filter((pos, idx, arr) => {
+          const id = pos.element.id;
+          return arr.findIndex((p) => p.element.id === id) === idx;
+        }).map((nudgedPos) => {
+          const distance = Math.hypot(
+            nudgedPos.nudgedX - cursorPos.x,
+            nudgedPos.nudgedY - cursorPos.y
+          );
+          const nearbyBadges = findNearbyBadges(
+            visibleBadges,
+            nudgedPos.nudgedX,
+            nudgedPos.nudgedY,
+            NEARBY_THRESHOLD
+          );
+          return /* @__PURE__ */ jsx(
+            NudgedBadge,
+            {
+              position: nudgedPos,
+              distance,
+              nearbyBadges,
+              cursorPos,
+              onSelect: handleSelect
+            },
+            nudgedPos.element.id
+          );
+        })
+      ]
+    }
+  );
   return createPortal(content, document.body);
 }
 function NudgedBadge({
@@ -415,7 +452,9 @@ function NudgedBadge({
       boxShadow: "0 4px 20px rgba(0, 0, 0, 0.4)",
       padding: "4px 0",
       minWidth: "200px",
-      fontFamily: STYLES.font
+      fontFamily: STYLES.font,
+      pointerEvents: "auto"
+      // Re-enable pointer events for interactive dropdown
     };
   }, [snappedPosition]);
   const scale = isExpanded ? 1.1 : getScaleFromDistance(distance);
@@ -468,7 +507,9 @@ function NudgedBadge({
           cursor: "pointer",
           transition: "transform 0.1s ease-out",
           transform: `scale(${scale})`,
-          transformOrigin: "center center"
+          transformOrigin: "center center",
+          pointerEvents: "auto"
+          // Re-enable pointer events for interactive badge
         },
         "data-ui-lint": true,
         onMouseEnter: handleMouseEnter,

package/dist/InspectionPanel-4P7I4QVY.js

@@ -0,0 +1,10 @@
+"use client";
+"use client";
+import {
+  InspectionPanel
+} from "./chunk-UF6KN2JJ.js";
+import "./chunk-S4IWHBOQ.js";
+import "./chunk-RAPUZC5J.js";
+export {
+  InspectionPanel
+};

package/dist/{LocatorOverlay-Z24VU27L.js → LocatorOverlay-L3EPYQEF.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-YLTHKMTO.js";
-import "./chunk-BJD2V2LF.js";
+} from "./chunk-LNLTM7N6.js";
+import "./chunk-RAPUZC5J.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/UILintToolbar-FWVC6MNG.js

@@ -0,0 +1,10 @@
+"use client";
+"use client";
+import {
+  UILintToolbar
+} from "./chunk-OSYIUF52.js";
+import "./chunk-S4IWHBOQ.js";
+import "./chunk-RAPUZC5J.js";
+export {
+  UILintToolbar
+};

package/dist/{chunk-YLTHKMTO.js → chunk-LNLTM7N6.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-BJD2V2LF.js";
+} from "./chunk-RAPUZC5J.js";
 
 // src/components/ui-lint/LocatorOverlay.tsx
 import { useState, useEffect, useMemo } from "react";