uilint-react 0.1.44 → 0.1.46

package/dist/{ElementBadges-OQC6YCQD.js → ElementBadges-E35MQ2SV.js}

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

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

package/dist/{LocatorOverlay-RMU6JIFI.js → LocatorOverlay-BF6EED4N.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-GCZ53K35.js";
-import "./chunk-HECINZHM.js";
+} from "./chunk-LQ3WQYIF.js";
+import "./chunk-OU5EEQT6.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/UILintToolbar-XJN6LFWZ.js

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

package/dist/{chunk-X4PRYONL.js → chunk-JURUYCUC.js}

@@ -1,12 +1,13 @@
 "use client";
 import {
-  Badge
-} from "./chunk-W42PI2OF.js";
+  Badge,
+  fetchSourceWithWindow
+} from "./chunk-S4IWHBOQ.js";
 import {
   buildEditorUrl,
   useUILintContext,
   useUILintStore
-} from "./chunk-HECINZHM.js";
+} from "./chunk-OU5EEQT6.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import React, {
@@ -18,97 +19,6 @@ import React, {
 } from "react";
 import { createPortal } from "react-dom";
 
-// src/components/ui-lint/source-fetcher.ts
-var sourceCache = /* @__PURE__ */ new Map();
-var CACHE_TTL = 5 * 60 * 1e3;
-var API_ENDPOINT = "/api/.uilint/source";
-async function fetchSource(filePath) {
-  const cached = sourceCache.get(filePath);
-  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) {
-    return {
-      content: cached.content,
-      relativePath: cached.relativePath
-    };
-  }
-  try {
-    const response = await fetch(
-      `${API_ENDPOINT}?path=${encodeURIComponent(filePath)}`
-    );
-    if (!response.ok) {
-      console.warn(`[UILint] Failed to fetch source: ${response.statusText}`);
-      return null;
-    }
-    const data = await response.json();
-    sourceCache.set(filePath, {
-      ...data,
-      fetchedAt: Date.now()
-    });
-    return data;
-  } catch (error) {
-    console.error("[UILint] Error fetching source:", error);
-    return null;
-  }
-}
-async function fetchSourceWithContext(source, contextLines = 5) {
-  const result = await fetchSource(source.fileName);
-  if (!result) return null;
-  const allLines = result.content.split("\n");
-  const targetLine = source.lineNumber - 1;
-  const startLine = Math.max(0, targetLine - contextLines);
-  const endLine = Math.min(allLines.length, targetLine + contextLines + 1);
-  return {
-    lines: allLines.slice(startLine, endLine),
-    startLine: startLine + 1,
-    // Back to 1-indexed
-    highlightLine: source.lineNumber,
-    relativePath: result.relativePath
-  };
-}
-async function fetchSourceWithWindow(source, window2) {
-  const result = await fetchSource(source.fileName);
-  if (!result) return null;
-  const allLines = result.content.split("\n");
-  const targetLine = source.lineNumber - 1;
-  const startLine = Math.max(0, targetLine - Math.max(0, window2.linesAbove));
-  const endLine = Math.min(
-    allLines.length,
-    targetLine + Math.max(0, window2.linesBelow) + 1
-  );
-  return {
-    lines: allLines.slice(startLine, endLine),
-    startLine: startLine + 1,
-    // Back to 1-indexed
-    highlightLine: source.lineNumber,
-    relativePath: result.relativePath
-  };
-}
-function clearSourceCache() {
-  sourceCache.clear();
-}
-function getCachedSource(filePath) {
-  const cached = sourceCache.get(filePath);
-  if (!cached) return null;
-  if (Date.now() - cached.fetchedAt >= CACHE_TTL) {
-    sourceCache.delete(filePath);
-    return null;
-  }
-  return {
-    content: cached.content,
-    relativePath: cached.relativePath
-  };
-}
-async function prefetchSources(filePaths) {
-  const uniquePaths = [...new Set(filePaths)].filter((path) => {
-    const cached = sourceCache.get(path);
-    return !cached || Date.now() - cached.fetchedAt >= CACHE_TTL;
-  });
-  const BATCH_SIZE = 5;
-  for (let i = 0; i < uniquePaths.length; i += BATCH_SIZE) {
-    const batch = uniquePaths.slice(i, i + BATCH_SIZE);
-    await Promise.all(batch.map(fetchSource));
-  }
-}
-
 // src/components/ui-lint/code-formatting.ts
 function leadingWhitespace(s) {
   const match = s.match(/^[\t ]+/);
@@ -246,7 +156,7 @@ var STYLES = {
   font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
 };
-var POPOVER_WIDTH = 380;
+var POPOVER_WIDTH = 450;
 var POPOVER_MAX_HEIGHT = 450;
 function InspectionPanel() {
   const {
@@ -278,11 +188,11 @@ function InspectionPanel() {
       setInspectedElement(null);
     };
     const timer = setTimeout(() => {
-      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("click", handleClickOutside, true);
     }, 50);
     return () => {
       clearTimeout(timer);
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("click", handleClickOutside, true);
     };
   }, [inspectedElement, setInspectedElement]);
   const isFileLevelIssue = useMemo(() => {
@@ -439,13 +349,21 @@ function InspectionPanel() {
     );
     window.open(url, "_blank");
   }, [inspectedElement, editorBaseDir]);
+  const handleUILintInteraction = useCallback(
+    (e) => {
+      e.stopPropagation();
+    },
+    []
+  );
   if (!mounted || !inspectedElement) return null;
   const content = /* @__PURE__ */ jsxs(
     "div",
     {
       ref: popoverRef,
       "data-ui-lint": true,
-      onClick: (e) => e.stopPropagation(),
+      onMouseDown: handleUILintInteraction,
+      onClick: handleUILintInteraction,
+      onKeyDown: handleUILintInteraction,
       style: {
         position: "fixed",
         top: position.top,
@@ -462,7 +380,9 @@ function InspectionPanel() {
         color: STYLES.text,
         overflow: "hidden",
         zIndex: 99998,
-        animation: "uilint-popover-appear 0.15s ease-out"
+        animation: "uilint-popover-appear 0.15s ease-out",
+        pointerEvents: "auto"
+        // Ensure panel is interactive
       },
       children: [
         /* @__PURE__ */ jsx("style", { children: `
@@ -1008,10 +928,5 @@ function CollapseIcon() {
 }
 
 export {
-  fetchSource,
-  fetchSourceWithContext,
-  clearSourceCache,
-  getCachedSource,
-  prefetchSources,
   InspectionPanel
 };

package/dist/{chunk-GCZ53K35.js → chunk-LQ3WQYIF.js}

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

package/dist/{chunk-HECINZHM.js → chunk-OU5EEQT6.js}

@@ -1063,10 +1063,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect2(() => {
     Promise.all([
-      import("./UILintToolbar-G5AVKNXA.js"),
-      import("./InspectionPanel-UW5UBZIK.js"),
-      import("./LocatorOverlay-RMU6JIFI.js"),
-      import("./ElementBadges-OQC6YCQD.js")
+      import("./UILintToolbar-XJN6LFWZ.js"),
+      import("./InspectionPanel-EOW6OJFT.js"),
+      import("./LocatorOverlay-BF6EED4N.js"),
+      import("./ElementBadges-E35MQ2SV.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

package/dist/chunk-S4IWHBOQ.js

@@ -0,0 +1,178 @@
+"use client";
+
+// src/components/ui-lint/Badge.tsx
+import { jsx } from "react/jsx-runtime";
+var BADGE_COLORS = {
+  success: "#68d391",
+  // Soft green
+  warning: "#f6ad55",
+  // Warm orange
+  error: "#ef4444"
+  // Red (for future use)
+};
+var FONT_MONO = `"SF Mono", Monaco, "Cascadia Code", monospace`;
+function getBadgeTextColor(issueCount) {
+  if (issueCount === 0) return BADGE_COLORS.success;
+  return BADGE_COLORS.warning;
+}
+function getBadgeBackgroundColor(issueCount) {
+  const color = getBadgeTextColor(issueCount);
+  return `${color}20`;
+}
+var BADGE_STYLES = {
+  default: {
+    minWidth: "20px",
+    height: "20px",
+    padding: "0 6px",
+    borderRadius: "10px",
+    fontSize: "11px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
+  },
+  small: {
+    minWidth: "18px",
+    height: "18px",
+    padding: "0 5px",
+    borderRadius: "9px",
+    fontSize: "10px",
+    fontWeight: 700,
+    letterSpacing: "0"
+  },
+  // For file row badges (slightly larger than small)
+  medium: {
+    minWidth: "22px",
+    height: "18px",
+    padding: "0 6px",
+    borderRadius: "9px",
+    fontSize: "10px",
+    fontWeight: 700,
+    letterSpacing: "0"
+  }
+};
+function Badge({
+  count,
+  size = "default",
+  backgroundColor,
+  color
+}) {
+  const sizeStyles = BADGE_STYLES[size];
+  const bgColor = backgroundColor ?? getBadgeBackgroundColor(count);
+  const textColor = color ?? getBadgeTextColor(count);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...sizeStyles,
+        backgroundColor: bgColor,
+        color: textColor,
+        fontFamily: FONT_MONO
+      },
+      children: count
+    }
+  );
+}
+
+// src/components/ui-lint/source-fetcher.ts
+var sourceCache = /* @__PURE__ */ new Map();
+var CACHE_TTL = 5 * 60 * 1e3;
+var API_ENDPOINT = "/api/.uilint/source";
+async function fetchSource(filePath) {
+  const cached = sourceCache.get(filePath);
+  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) {
+    return {
+      content: cached.content,
+      relativePath: cached.relativePath
+    };
+  }
+  try {
+    const response = await fetch(
+      `${API_ENDPOINT}?path=${encodeURIComponent(filePath)}`
+    );
+    if (!response.ok) {
+      console.warn(`[UILint] Failed to fetch source: ${response.statusText}`);
+      return null;
+    }
+    const data = await response.json();
+    sourceCache.set(filePath, {
+      ...data,
+      fetchedAt: Date.now()
+    });
+    return data;
+  } catch (error) {
+    console.error("[UILint] Error fetching source:", error);
+    return null;
+  }
+}
+async function fetchSourceWithContext(source, contextLines = 5) {
+  const result = await fetchSource(source.fileName);
+  if (!result) return null;
+  const allLines = result.content.split("\n");
+  const targetLine = source.lineNumber - 1;
+  const startLine = Math.max(0, targetLine - contextLines);
+  const endLine = Math.min(allLines.length, targetLine + contextLines + 1);
+  return {
+    lines: allLines.slice(startLine, endLine),
+    startLine: startLine + 1,
+    // Back to 1-indexed
+    highlightLine: source.lineNumber,
+    relativePath: result.relativePath
+  };
+}
+async function fetchSourceWithWindow(source, window) {
+  const result = await fetchSource(source.fileName);
+  if (!result) return null;
+  const allLines = result.content.split("\n");
+  const targetLine = source.lineNumber - 1;
+  const startLine = Math.max(0, targetLine - Math.max(0, window.linesAbove));
+  const endLine = Math.min(
+    allLines.length,
+    targetLine + Math.max(0, window.linesBelow) + 1
+  );
+  return {
+    lines: allLines.slice(startLine, endLine),
+    startLine: startLine + 1,
+    // Back to 1-indexed
+    highlightLine: source.lineNumber,
+    relativePath: result.relativePath
+  };
+}
+function clearSourceCache() {
+  sourceCache.clear();
+}
+function getCachedSource(filePath) {
+  const cached = sourceCache.get(filePath);
+  if (!cached) return null;
+  if (Date.now() - cached.fetchedAt >= CACHE_TTL) {
+    sourceCache.delete(filePath);
+    return null;
+  }
+  return {
+    content: cached.content,
+    relativePath: cached.relativePath
+  };
+}
+async function prefetchSources(filePaths) {
+  const uniquePaths = [...new Set(filePaths)].filter((path) => {
+    const cached = sourceCache.get(path);
+    return !cached || Date.now() - cached.fetchedAt >= CACHE_TTL;
+  });
+  const BATCH_SIZE = 5;
+  for (let i = 0; i < uniquePaths.length; i += BATCH_SIZE) {
+    const batch = uniquePaths.slice(i, i + BATCH_SIZE);
+    await Promise.all(batch.map(fetchSource));
+  }
+}
+
+export {
+  BADGE_COLORS,
+  Badge,
+  fetchSource,
+  fetchSourceWithContext,
+  fetchSourceWithWindow,
+  clearSourceCache,
+  getCachedSource,
+  prefetchSources
+};

package/dist/{chunk-RULQAXE4.js → chunk-XUMLILUN.js}

@@ -1,16 +1,18 @@
 "use client";
 import {
   BADGE_COLORS,
-  Badge
-} from "./chunk-W42PI2OF.js";
+  Badge,
+  fetchSource,
+  getCachedSource
+} from "./chunk-S4IWHBOQ.js";
 import {
   groupBySourceFile,
   useUILintContext,
   useUILintStore
-} from "./chunk-HECINZHM.js";
+} from "./chunk-OU5EEQT6.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/ui-lint/toolbar-styles.ts
@@ -228,10 +230,10 @@ function SettingsPopover({ settings }) {
 }
 
 // src/components/ui-lint/ScanPanelStack.tsx
-import { useRef, useEffect } from "react";
+import { useRef, useEffect as useEffect2 } from "react";
 
 // src/components/ui-lint/ScanResultsPopover.tsx
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 
 // src/components/ui-lint/toolbar-icons.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -860,12 +862,65 @@ function ElementRow({ item, onHover, onClick }) {
     }
   );
 }
+function extractTagName(line, column) {
+  if (!line) return null;
+  if (column !== void 0) {
+    const searchStart = Math.max(0, column - 50);
+    const searchEnd = Math.min(line.length, column + 20);
+    const searchSlice = line.substring(searchStart, searchEnd);
+    const tagMatches = [
+      ...searchSlice.matchAll(/<([a-zA-Z][a-zA-Z0-9.-]*|Fragment)\b/g)
+    ];
+    for (const match of tagMatches) {
+      const tagStart = searchStart + match.index;
+      const tagEnd = tagStart + match[0].length;
+      if (column >= tagStart && column <= tagEnd + 30) {
+        return match[1];
+      }
+    }
+  }
+  const trimmed = line.trim();
+  const jsxTagMatch = trimmed.match(/^<([a-zA-Z][a-zA-Z0-9.-]*|Fragment)\b/);
+  if (jsxTagMatch) {
+    return jsxTagMatch[1];
+  }
+  return null;
+}
 function FileLevelIssueRow({
   filePath,
   issue,
   onClick
 }) {
   const fileName = filePath.split("/").pop() || filePath;
+  const [tagName, setTagName] = useState(null);
+  useEffect(() => {
+    const cached = getCachedSource(filePath);
+    if (cached) {
+      const lines = cached.content.split("\n");
+      const lineIndex = issue.line - 1;
+      if (lineIndex >= 0 && lineIndex < lines.length) {
+        const line = lines[lineIndex];
+        const tag = extractTagName(line, issue.column);
+        if (tag) {
+          setTagName(tag);
+          return;
+        }
+      }
+    }
+    fetchSource(filePath).then((result) => {
+      if (result) {
+        const lines = result.content.split("\n");
+        const lineIndex = issue.line - 1;
+        if (lineIndex >= 0 && lineIndex < lines.length) {
+          const line = lines[lineIndex];
+          const tag = extractTagName(line, issue.column);
+          if (tag) {
+            setTagName(tag);
+          }
+        }
+      }
+    });
+  }, [filePath, issue.line, issue.column]);
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -896,7 +951,22 @@ function FileLevelIssueRow({
               marginRight: "12px"
             },
             children: [
-              /* @__PURE__ */ jsx3(
+              tagName && /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  style: {
+                    fontSize: "11px",
+                    fontFamily: STYLES.fontMono,
+                    color: STYLES.accent
+                  },
+                  children: [
+                    "<",
+                    tagName,
+                    ">"
+                  ]
+                }
+              ),
+              !tagName && /* @__PURE__ */ jsx3(
                 "span",
                 {
                   style: {
@@ -992,26 +1062,26 @@ function CloseIcon() {
 import { jsx as jsx4 } from "react/jsx-runtime";
 function ScanPanelStack({ show, onClose }) {
   const containerRef = useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (!show) return;
     const handleClickOutside = (e) => {
       const target = e.target;
+      if (target?.closest?.("[data-ui-lint]")) {
+        return;
+      }
       if (containerRef.current && !containerRef.current.contains(target)) {
-        const isUILintElement = target.closest?.("[data-ui-lint]");
-        if (!isUILintElement) {
-          onClose();
-        }
+        onClose();
       }
     };
     const timeoutId = setTimeout(() => {
-      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("mousedown", handleClickOutside, true);
     }, 100);
     return () => {
       clearTimeout(timeoutId);
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside, true);
     };
   }, [show, onClose]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!show) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -1021,16 +1091,25 @@ function ScanPanelStack({ show, onClose }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [show, onClose]);
+  const handleUILintInteraction = (e) => {
+    e.stopPropagation();
+  };
   if (!show) return null;
   return /* @__PURE__ */ jsx4(
     "div",
     {
       ref: containerRef,
+      "data-ui-lint": true,
+      onMouseDown: handleUILintInteraction,
+      onClick: handleUILintInteraction,
+      onKeyDown: handleUILintInteraction,
       style: {
         position: "absolute",
         bottom: "100%",
         left: 0,
-        marginBottom: "8px"
+        marginBottom: "8px",
+        pointerEvents: "auto"
+        // Ensure panel is interactive
       },
       children: /* @__PURE__ */ jsx4(ScanResultsPopover, { onClose })
     }
@@ -1312,6 +1391,50 @@ var globalStyles = `
   .uilint-popover--closing {
     animation: uilint-fade-out ${TOKENS.transitionBase} forwards;
   }
+  
+  /* Custom scrollbar styling for dark mode - scoped to uilint components */
+  [data-ui-lint] *,
+  [data-ui-lint] {
+    /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.15) rgba(15, 15, 15, 0.3);
+  }
+  
+  /* WebKit browsers (Chrome, Safari, Edge) */
+  [data-ui-lint] *::-webkit-scrollbar,
+  [data-ui-lint]::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  [data-ui-lint] *::-webkit-scrollbar-track,
+  [data-ui-lint]::-webkit-scrollbar-track {
+    background: rgba(15, 15, 15, 0.3);
+    border-radius: 4px;
+  }
+  
+  [data-ui-lint] *::-webkit-scrollbar-thumb,
+  [data-ui-lint]::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    border: 1px solid rgba(15, 15, 15, 0.2);
+    transition: background ${TOKENS.transitionFast};
+  }
+  
+  [data-ui-lint] *::-webkit-scrollbar-thumb:hover,
+  [data-ui-lint]::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+  
+  [data-ui-lint] *::-webkit-scrollbar-thumb:active,
+  [data-ui-lint]::-webkit-scrollbar-thumb:active {
+    background: rgba(255, 255, 255, 0.35);
+  }
+  
+  [data-ui-lint] *::-webkit-scrollbar-corner,
+  [data-ui-lint]::-webkit-scrollbar-corner {
+    background: rgba(15, 15, 15, 0.3);
+  }
 `;
 function ToolbarButton({
   onClick,
@@ -1489,7 +1612,7 @@ function UILintToolbar() {
   const [nextjsOverlayVisible, setNextjsOverlayVisible] = useState2(false);
   const toolbarRef = useRef2(null);
   const settingsRef = useRef2(null);
-  useEffect2(() => {
+  useEffect3(() => {
     const checkForNextOverlay = () => {
       const overlaySelectors = [
         "nextjs-portal",
@@ -1528,12 +1651,15 @@ function UILintToolbar() {
   });
   const totalIssues = elementIssues + fileLevelIssues;
   const hasIssues = totalIssues > 0;
-  useEffect2(() => {
+  useEffect3(() => {
     setMounted(true);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
+      if (target?.closest?.("[data-ui-lint]")) {
+        return;
+      }
       if (showSettings && settingsRef.current && toolbarRef.current) {
         if (!settingsRef.current.contains(target) && !toolbarRef.current.contains(target)) {
           handleCloseSettings();
@@ -1546,10 +1672,10 @@ function UILintToolbar() {
         if (showResults) setShowResults(false);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside, true);
     document.addEventListener("keydown", handleEscape);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside, true);
       document.removeEventListener("keydown", handleEscape);
     };
   }, [showSettings, showResults]);
@@ -1584,6 +1710,12 @@ function UILintToolbar() {
       setSettingsClosing(false);
     }, 150);
   }, []);
+  const handleUILintInteraction = useCallback2(
+    (e) => {
+      e.stopPropagation();
+    },
+    []
+  );
   if (!mounted) return null;
   const issueVariant = !liveScanEnabled ? "default" : hasIssues ? "warning" : isComplete ? "success" : "default";
   const bottomPosition = nextjsOverlayVisible ? "80px" : "20px";
@@ -1591,13 +1723,18 @@ function UILintToolbar() {
     "div",
     {
       "data-ui-lint": true,
+      onMouseDown: handleUILintInteraction,
+      onClick: handleUILintInteraction,
+      onKeyDown: handleUILintInteraction,
       style: {
         position: "fixed",
         bottom: bottomPosition,
         left: "20px",
         zIndex: 99999,
         fontFamily: TOKENS.fontFamily,
-        transition: `bottom ${TOKENS.transitionSlow}`
+        transition: `bottom ${TOKENS.transitionSlow}`,
+        pointerEvents: "none"
+        // Allow clicks to pass through empty space
       },
       children: [
         /* @__PURE__ */ jsx5("style", { children: globalStyles }),
@@ -1610,7 +1747,9 @@ function UILintToolbar() {
               marginBottom: "10px",
               fontSize: "11px",
               color: TOKENS.textMuted,
-              letterSpacing: "0.02em"
+              letterSpacing: "0.02em",
+              pointerEvents: "auto"
+              // Re-enable pointer events for hint
             },
             "aria-hidden": !liveScanEnabled,
             children: /* @__PURE__ */ jsx5(
@@ -1653,7 +1792,9 @@ function UILintToolbar() {
                 `${TOKENS.warning}30`
               )}` : TOKENS.shadowMd,
               overflow: "hidden",
-              transition: `box-shadow ${TOKENS.transitionBase}`
+              transition: `box-shadow ${TOKENS.transitionBase}`,
+              pointerEvents: "auto"
+              // Re-enable pointer events for interactive toolbar
             },
             children: [
               /* @__PURE__ */ jsx5(
@@ -1711,7 +1852,9 @@ function UILintToolbar() {
               position: "absolute",
               bottom: "100%",
               left: 0,
-              marginBottom: "8px"
+              marginBottom: "8px",
+              pointerEvents: "auto"
+              // Re-enable pointer events for popover
             },
             children: /* @__PURE__ */ jsx5(SettingsPopover, { settings })
           }

package/dist/index.js

@@ -1,19 +1,20 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-RULQAXE4.js";
+} from "./chunk-XUMLILUN.js";
+import {
+  InspectionPanel
+} from "./chunk-JURUYCUC.js";
 import {
-  InspectionPanel,
   clearSourceCache,
   fetchSource,
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-X4PRYONL.js";
-import "./chunk-W42PI2OF.js";
+} from "./chunk-S4IWHBOQ.js";
 import {
   LocatorOverlay
-} from "./chunk-GCZ53K35.js";
+} from "./chunk-LQ3WQYIF.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -29,7 +30,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-HECINZHM.js";
+} from "./chunk-OU5EEQT6.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "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.44",
+    "uilint-core": "^0.1.46",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {

package/dist/InspectionPanel-UW5UBZIK.js

@@ -1,10 +0,0 @@
-"use client";
-"use client";
-import {
-  InspectionPanel
-} from "./chunk-X4PRYONL.js";
-import "./chunk-W42PI2OF.js";
-import "./chunk-HECINZHM.js";
-export {
-  InspectionPanel
-};

package/dist/UILintToolbar-G5AVKNXA.js

@@ -1,10 +0,0 @@
-"use client";
-"use client";
-import {
-  UILintToolbar
-} from "./chunk-RULQAXE4.js";
-import "./chunk-W42PI2OF.js";
-import "./chunk-HECINZHM.js";
-export {
-  UILintToolbar
-};

package/dist/chunk-W42PI2OF.js

@@ -1,81 +0,0 @@
-"use client";
-
-// src/components/ui-lint/Badge.tsx
-import { jsx } from "react/jsx-runtime";
-var BADGE_COLORS = {
-  success: "#68d391",
-  // Soft green
-  warning: "#f6ad55",
-  // Warm orange
-  error: "#ef4444"
-  // Red (for future use)
-};
-var FONT_MONO = `"SF Mono", Monaco, "Cascadia Code", monospace`;
-function getBadgeTextColor(issueCount) {
-  if (issueCount === 0) return BADGE_COLORS.success;
-  return BADGE_COLORS.warning;
-}
-function getBadgeBackgroundColor(issueCount) {
-  const color = getBadgeTextColor(issueCount);
-  return `${color}20`;
-}
-var BADGE_STYLES = {
-  default: {
-    minWidth: "20px",
-    height: "20px",
-    padding: "0 6px",
-    borderRadius: "10px",
-    fontSize: "11px",
-    fontWeight: 600,
-    letterSpacing: "-0.02em"
-  },
-  small: {
-    minWidth: "18px",
-    height: "18px",
-    padding: "0 5px",
-    borderRadius: "9px",
-    fontSize: "10px",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  // For file row badges (slightly larger than small)
-  medium: {
-    minWidth: "22px",
-    height: "18px",
-    padding: "0 6px",
-    borderRadius: "9px",
-    fontSize: "10px",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
-};
-function Badge({
-  count,
-  size = "default",
-  backgroundColor,
-  color
-}) {
-  const sizeStyles = BADGE_STYLES[size];
-  const bgColor = backgroundColor ?? getBadgeBackgroundColor(count);
-  const textColor = color ?? getBadgeTextColor(count);
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        ...sizeStyles,
-        backgroundColor: bgColor,
-        color: textColor,
-        fontFamily: FONT_MONO
-      },
-      children: count
-    }
-  );
-}
-
-export {
-  BADGE_COLORS,
-  Badge
-};