uilint-react 0.1.48 → 0.1.50

package/dist/{ElementBadges-TSHIYUHQ.js → ElementBadges-ISBIBC3T.js}

@@ -3,7 +3,7 @@
 import {
   useUILintContext,
   useUILintStore
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-TLHXCIXS.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -130,12 +130,55 @@ function findNearbyBadges(positions, x, y, threshold) {
 }
 
 // src/components/ui-lint/visibility-utils.ts
+function rectFromLTRB(left, top, right, bottom) {
+  const width = Math.max(0, right - left);
+  const height = Math.max(0, bottom - top);
+  return { left, top, right, bottom, width, height };
+}
+function intersectRects(a, b) {
+  const left = Math.max(a.left, b.left);
+  const top = Math.max(a.top, b.top);
+  const right = Math.min(a.right, b.right);
+  const bottom = Math.min(a.bottom, b.bottom);
+  if (right <= left || bottom <= top) return null;
+  return rectFromLTRB(left, top, right, bottom);
+}
+function isOverflowClipping(style) {
+  const vals = [style.overflow, style.overflowX, style.overflowY];
+  return vals.some((v) => v && v !== "visible");
+}
+function getElementVisibleRect(element) {
+  const el = element;
+  const base = el.getBoundingClientRect();
+  let visible = rectFromLTRB(
+    base.left,
+    base.top,
+    base.right,
+    base.bottom
+  );
+  const viewport = rectFromLTRB(0, 0, window.innerWidth, window.innerHeight);
+  visible = intersectRects(visible, viewport);
+  if (!visible) return null;
+  let cur = el.parentElement;
+  while (cur) {
+    const style = window.getComputedStyle(cur);
+    if (isOverflowClipping(style)) {
+      const r = cur.getBoundingClientRect();
+      const clip = rectFromLTRB(r.left, r.top, r.right, r.bottom);
+      visible = intersectRects(visible, clip);
+      if (!visible) return null;
+    }
+    cur = cur.parentElement;
+  }
+  return visible;
+}
 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;
+    if (el === element || element.contains(el) || el.contains(element)) {
+      return false;
+    }
     const style = window.getComputedStyle(el);
     const position = style.position;
     const zIndex = parseInt(style.zIndex, 10);
@@ -270,14 +313,24 @@ function ElementBadges() {
         if (!issue) continue;
         if (!element.element || !document.contains(element.element)) continue;
         const rect = element.element.getBoundingClientRect();
-        const x = rect.right - 8;
-        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)) {
+        const visible = getElementVisibleRect(element.element);
+        if (!visible) continue;
+        const desiredX = rect.right - 8;
+        const desiredY = rect.top - 8;
+        const x = Math.min(desiredX, visible.right - 8);
+        const y = Math.max(visible.top + 2, desiredY);
+        const testX = visible.left + Math.min(8, visible.width / 2);
+        const testY = visible.top + Math.min(8, visible.height / 2);
+        if (isElementCoveredByOverlay(element.element, testX, testY)) {
           continue;
         }
-        positions.push({ element, issue, x, y, rect });
+        const visibleRect = DOMRect.fromRect({
+          x: visible.left,
+          y: visible.top,
+          width: visible.width,
+          height: visible.height
+        });
+        positions.push({ element, issue, x, y, rect: visibleRect });
       }
       setBadgePositions(positions);
     };
@@ -350,6 +403,9 @@ function ElementBadges() {
     {
       "data-ui-lint": true,
       onMouseDown: handleUILintInteraction,
+      onPointerDown: handleUILintInteraction,
+      onPointerUp: handleUILintInteraction,
+      onTouchStart: handleUILintInteraction,
       onClick: handleUILintInteraction,
       onKeyDown: handleUILintInteraction,
       style: { pointerEvents: "none" },
@@ -432,6 +488,9 @@ function NudgedBadge({
     },
     [element, issue, onSelect]
   );
+  const handlePointerDown = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
   const hoveredBadge = useMemo(() => {
     if (hoveredIndex === null) return null;
     return nearbyBadges[hoveredIndex] ?? null;
@@ -514,6 +573,7 @@ function NudgedBadge({
         "data-ui-lint": true,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
+        onPointerDown: handlePointerDown,
         onClick: handleClick,
         children: /* @__PURE__ */ jsx(
           "div",

package/dist/{InspectionPanel-PHCAOOL3.js → InspectionPanel-OCCB5KUE.js}

@@ -2,9 +2,9 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-B7DZUX7G.js";
+} from "./chunk-NOYDJR7R.js";
 import "./chunk-S4IWHBOQ.js";
-import "./chunk-C4QQXZFH.js";
+import "./chunk-TLHXCIXS.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-ZGBYXTXG.js → LocatorOverlay-VACYO52F.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-VKLP23BP.js";
-import "./chunk-C4QQXZFH.js";
+} from "./chunk-TQTSKK5G.js";
+import "./chunk-TLHXCIXS.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-ZBHPX3LA.js → UILintToolbar-TXSF3YZF.js}

@@ -2,9 +2,9 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-FLUATYJF.js";
+} from "./chunk-ZNBNHYJX.js";
 import "./chunk-S4IWHBOQ.js";
-import "./chunk-C4QQXZFH.js";
+import "./chunk-TLHXCIXS.js";
 export {
   UILintToolbar
 };

package/dist/{chunk-B7DZUX7G.js → chunk-NOYDJR7R.js}

@@ -7,7 +7,7 @@ import {
   buildEditorUrl,
   useUILintContext,
   useUILintStore
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-TLHXCIXS.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import React, {
@@ -362,6 +362,9 @@ function InspectionPanel() {
       ref: popoverRef,
       "data-ui-lint": true,
       onMouseDown: handleUILintInteraction,
+      onPointerDown: handleUILintInteraction,
+      onPointerUp: handleUILintInteraction,
+      onTouchStart: handleUILintInteraction,
       onClick: handleUILintInteraction,
       onKeyDown: handleUILintInteraction,
       style: {

package/dist/{chunk-C4QQXZFH.js → chunk-TLHXCIXS.js}

@@ -1063,10 +1063,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect2(() => {
     Promise.all([
-      import("./UILintToolbar-ZBHPX3LA.js"),
-      import("./InspectionPanel-PHCAOOL3.js"),
-      import("./LocatorOverlay-ZGBYXTXG.js"),
-      import("./ElementBadges-TSHIYUHQ.js")
+      import("./UILintToolbar-TXSF3YZF.js"),
+      import("./InspectionPanel-OCCB5KUE.js"),
+      import("./LocatorOverlay-VACYO52F.js"),
+      import("./ElementBadges-ISBIBC3T.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

package/dist/{chunk-VKLP23BP.js → chunk-TQTSKK5G.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-TLHXCIXS.js";
 
 // src/components/ui-lint/LocatorOverlay.tsx
 import { useState, useEffect, useMemo } from "react";
@@ -97,6 +97,10 @@ function InfoTooltip({ rect, source, componentName }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-ui-lint": true,
+      onPointerDown: (e) => e.stopPropagation(),
+      onPointerUp: (e) => e.stopPropagation(),
+      onTouchStart: (e) => e.stopPropagation(),
       style: {
         ...tooltipStyle,
         display: "flex",

package/dist/{chunk-FLUATYJF.js → chunk-ZNBNHYJX.js}

@@ -9,7 +9,7 @@ import {
   groupBySourceFile,
   useUILintContext,
   useUILintStore
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-TLHXCIXS.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import React3, { useState as useState2, useRef as useRef2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
@@ -1101,6 +1101,9 @@ function ScanPanelStack({ show, onClose }) {
       ref: containerRef,
       "data-ui-lint": true,
       onMouseDown: handleUILintInteraction,
+      onPointerDown: handleUILintInteraction,
+      onPointerUp: handleUILintInteraction,
+      onTouchStart: handleUILintInteraction,
       onClick: handleUILintInteraction,
       onKeyDown: handleUILintInteraction,
       style: {
@@ -1672,13 +1675,7 @@ function UILintToolbar() {
   const totalIssues = elementIssues + fileLevelIssues;
   useEffect3(() => {
     const checkForNextOverlay = () => {
-      const overlaySelectors = [
-        "nextjs-portal",
-        "[data-nextjs-dialog]",
-        "[data-nextjs-dialog-overlay]",
-        "#__next-build-watcher",
-        "[data-nextjs-toast]"
-      ];
+      const overlaySelectors = ["data-next-badge-root"];
       const hasOverlay = overlaySelectors.some((selector) => {
         const el = document.querySelector(selector);
         if (!el) return false;
@@ -1795,6 +1792,9 @@ function UILintToolbar() {
     {
       "data-ui-lint": true,
       onMouseDown: handleUILintInteraction,
+      onPointerDown: handleUILintInteraction,
+      onPointerUp: handleUILintInteraction,
+      onTouchStart: handleUILintInteraction,
       onClick: handleUILintInteraction,
       onKeyDown: handleUILintInteraction,
       style: {
@@ -1814,6 +1814,12 @@ function UILintToolbar() {
             ref: toolbarRef,
             role: "toolbar",
             "aria-label": "UI Lint toolbar",
+            onMouseDown: handleUILintInteraction,
+            onPointerDown: handleUILintInteraction,
+            onPointerUp: handleUILintInteraction,
+            onTouchStart: handleUILintInteraction,
+            onClick: handleUILintInteraction,
+            onKeyDown: handleUILintInteraction,
             style: { pointerEvents: "auto" },
             children: renderToolbar()
           }
@@ -1823,6 +1829,12 @@ function UILintToolbar() {
           {
             ref: settingsRef,
             className: `uilint-popover ${settingsClosing ? "uilint-popover--closing" : ""}`,
+            onMouseDown: handleUILintInteraction,
+            onPointerDown: handleUILintInteraction,
+            onPointerUp: handleUILintInteraction,
+            onTouchStart: handleUILintInteraction,
+            onClick: handleUILintInteraction,
+            onKeyDown: handleUILintInteraction,
             style: {
               position: "absolute",
               bottom: "100%",

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-FLUATYJF.js";
+} from "./chunk-ZNBNHYJX.js";
 import {
   InspectionPanel
-} from "./chunk-B7DZUX7G.js";
+} from "./chunk-NOYDJR7R.js";
 import {
   clearSourceCache,
   fetchSource,
@@ -14,7 +14,7 @@ import {
 } from "./chunk-S4IWHBOQ.js";
 import {
   LocatorOverlay
-} from "./chunk-VKLP23BP.js";
+} from "./chunk-TQTSKK5G.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -30,7 +30,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-TLHXCIXS.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "React component for AI-powered UI consistency checking",
   "author": "Peter Suggate",
   "repository": {
@@ -34,7 +34,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "uilint-core": "^0.1.48",
+    "uilint-core": "^0.1.50",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {