uilint-react 0.1.37 → 0.1.39

package/dist/{ElementBadges-BASN6P5L.js → ElementBadges-3AFD2W4Z.js}

@@ -1,8 +1,9 @@
 "use client";
 "use client";
 import {
-  useUILintContext
-} from "./chunk-DEHJKJNT.js";
+  useUILintContext,
+  useUILintStore
+} from "./chunk-ILK73X6L.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -153,8 +154,7 @@ function getScaleFromDistance(distance) {
 }
 function getBadgeColor(issueCount) {
   if (issueCount === 0) return STYLES.success;
-  if (issueCount <= 2) return STYLES.warning;
-  return STYLES.error;
+  return STYLES.warning;
 }
 function formatElementLabel(element) {
   const tag = element.tagName.toLowerCase();
@@ -163,8 +163,7 @@ function formatElementLabel(element) {
     const fileName = source.fileName.split("/").pop() || "Unknown";
     return `${tag} > ${fileName}`;
   }
-  const componentName = element.componentStack[0]?.name;
-  return componentName ? `${tag} > ${componentName}` : tag;
+  return tag;
 }
 var NEARBY_THRESHOLD = 30;
 var WINDOW_EDGE_THRESHOLD = 20;
@@ -204,6 +203,10 @@ function ElementBadges() {
   const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
   const [badgePositions, setBadgePositions] = useState([]);
   const [isAltKeyPressed, setIsAltKeyPressed] = useState(false);
+  const hoveredFilePath = useUILintStore((s) => s.hoveredFilePath);
+  const selectedFilePath = useUILintStore(
+    (s) => s.selectedFilePath
+  );
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -257,21 +260,39 @@ function ElementBadges() {
       }
       setBadgePositions(positions);
     };
-    updatePositions();
-    let rafId;
-    const loop = () => {
-      updatePositions();
-      rafId = requestAnimationFrame(loop);
+    let rafId = null;
+    const scheduleUpdate = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        updatePositions();
+      });
+    };
+    scheduleUpdate();
+    const handleScroll = () => scheduleUpdate();
+    const handleResize = () => scheduleUpdate();
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible") {
+        scheduleUpdate();
+      }
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleResize);
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleResize);
+      document.removeEventListener("visibilitychange", handleVisibility);
     };
-    rafId = requestAnimationFrame(loop);
-    return () => cancelAnimationFrame(rafId);
-  }, [autoScanState, elementIssuesCache]);
+  }, [autoScanState.status, autoScanState.elements, elementIssuesCache]);
   const handleSelect = useCallback(
     (element, issue) => {
       const inspected = {
         element: element.element,
         source: element.source,
-        componentStack: element.componentStack,
         rect: element.element.getBoundingClientRect(),
         scannedElementId: element.id
       };
@@ -284,15 +305,25 @@ function ElementBadges() {
     [badgePositions]
   );
   const visibleBadges = useMemo(() => {
-    return nudgedPositions.filter(
+    let filtered = nudgedPositions.filter(
       (pos) => shouldShowBadge(pos.issue, isAltKeyPressed)
     );
-  }, [nudgedPositions, isAltKeyPressed]);
+    const activeFilePath = selectedFilePath || hoveredFilePath;
+    if (activeFilePath) {
+      filtered = filtered.filter(
+        (pos) => pos.element.source.fileName === activeFilePath
+      );
+    }
+    return filtered;
+  }, [nudgedPositions, isAltKeyPressed, selectedFilePath, hoveredFilePath]);
   if (!mounted) return null;
   if (autoScanState.status === "idle") return null;
   const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, children: [
     /* @__PURE__ */ jsx(BadgeAnimationStyles, {}),
-    visibleBadges.map((nudgedPos) => {
+    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

package/dist/{InspectionPanel-FY7QVWP5.js → InspectionPanel-VAHZBVVL.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-ITKEGCAZ.js";
-import "./chunk-DEHJKJNT.js";
+} from "./chunk-NCNRCF5A.js";
+import "./chunk-ILK73X6L.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-IUZV5OVI.js → LocatorOverlay-BEJYHU6S.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-LZX53CPI.js";
-import "./chunk-DEHJKJNT.js";
+} from "./chunk-7434TUMX.js";
+import "./chunk-ILK73X6L.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-TM3DVGPO.js → UILintToolbar-4SH33QJU.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-EYWLUDXI.js";
-import "./chunk-DEHJKJNT.js";
+} from "./chunk-4TLFW7LD.js";
+import "./chunk-ILK73X6L.js";
 export {
   UILintToolbar
 };