uilint-react 0.1.48 → 0.1.49

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

@@ -3,7 +3,7 @@
 import {
   useUILintContext,
   useUILintStore
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-N6U5BUAN.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);
     };

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

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

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

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

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

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

package/dist/{chunk-B7DZUX7G.js → chunk-2BV2MBAM.js}

@@ -7,7 +7,7 @@ import {
   buildEditorUrl,
   useUILintContext,
   useUILintStore
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-N6U5BUAN.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import React, {

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

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

package/dist/{chunk-C4QQXZFH.js → chunk-N6U5BUAN.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-OQ44CM63.js"),
+      import("./InspectionPanel-FKDEPTX7.js"),
+      import("./LocatorOverlay-W33BHLRE.js"),
+      import("./ElementBadges-TPLIZJA5.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

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

@@ -9,7 +9,7 @@ import {
   groupBySourceFile,
   useUILintContext,
   useUILintStore
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-N6U5BUAN.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import React3, { useState as useState2, useRef as useRef2, useEffect as useEffect3, useCallback as useCallback2 } from "react";

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-FLUATYJF.js";
+} from "./chunk-URAH2PAM.js";
 import {
   InspectionPanel
-} from "./chunk-B7DZUX7G.js";
+} from "./chunk-2BV2MBAM.js";
 import {
   clearSourceCache,
   fetchSource,
@@ -14,7 +14,7 @@ import {
 } from "./chunk-S4IWHBOQ.js";
 import {
   LocatorOverlay
-} from "./chunk-VKLP23BP.js";
+} from "./chunk-IRG3I75F.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -30,7 +30,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-C4QQXZFH.js";
+} from "./chunk-N6U5BUAN.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.49",
   "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.49",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {