uilint-react 0.1.38 → 0.1.39

package/dist/{chunk-WEBVLQL5.js → chunk-4TLFW7LD.js}

@@ -3,10 +3,10 @@ import {
   groupBySourceFile,
   useUILintContext,
   useUILintStore
-} from "./chunk-PU6XPNPN.js";
+} from "./chunk-ILK73X6L.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/ui-lint/toolbar-styles.ts
@@ -57,21 +57,11 @@ var STYLES = {
 };
 function getStatusColor(issueCount) {
   if (issueCount === 0) return STYLES.success;
-  if (issueCount <= 2) return STYLES.warning;
-  return STYLES.error;
+  return STYLES.warning;
 }
 
 // src/components/ui-lint/toolbar-icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function PauseIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", fill: "currentColor" })
-  ] });
-}
-function PlayIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7L8 5z", fill: "currentColor" }) });
-}
 function StopIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1", fill: "currentColor" }) });
 }
@@ -82,30 +72,6 @@ function EllipsisIcon() {
     /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "2", fill: "currentColor" })
   ] });
 }
-function MagnifyingGlassIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        cx: "11",
-        cy: "11",
-        r: "7",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M21 21l-4.35-4.35",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    )
-  ] });
-}
 function CheckCircleIcon() {
   return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
@@ -156,6 +122,69 @@ function SpinnerIcon() {
     }
   );
 }
+function EyeIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2" })
+  ] });
+}
+function EyeOffIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M1 1l22 22",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function WarningIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ChevronIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M9 6l6 6-6 6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 
 // src/components/ui-lint/SettingsPopover.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -174,7 +203,7 @@ function SettingsPopover({ settings }) {
       style: {
         position: "absolute",
         bottom: "100%",
-        right: 0,
+        left: 0,
         marginBottom: "8px",
         width: "260px",
         padding: "14px",
@@ -324,57 +353,130 @@ function SettingsPopover({ settings }) {
   );
 }
 
+// src/components/ui-lint/ScanPanelStack.tsx
+import { useRef, useEffect } from "react";
+
 // src/components/ui-lint/ScanResultsPopover.tsx
+import { useState, useCallback, useMemo } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function getDisambiguatedName(path, allPaths) {
+  const parts = path.split("/");
+  const fileName = parts[parts.length - 1] || path;
+  const duplicates = allPaths.filter((p) => {
+    const pParts = p.split("/");
+    return pParts[pParts.length - 1] === fileName && p !== path;
+  });
+  if (duplicates.length === 0) {
+    return fileName;
+  }
+  if (parts.length >= 2) {
+    return `${parts[parts.length - 2]}/${fileName}`;
+  }
+  return fileName;
+}
 function ScanResultsPopover() {
-  const {
-    autoScanState,
-    pauseAutoScan,
-    resumeAutoScan,
-    stopAutoScan
-  } = useUILintContext();
+  const { autoScanState, liveScanEnabled, disableLiveScan } = useUILintContext();
   const elementIssuesCache = useUILintStore(
     (s) => s.elementIssuesCache
   );
+  const setLocatorTarget = useUILintStore(
+    (s) => s.setLocatorTarget
+  );
+  const setInspectedElement = useUILintStore(
+    (s) => s.setInspectedElement
+  );
+  const [expandedFiles, setExpandedFiles] = useState(/* @__PURE__ */ new Set());
   const isScanning = autoScanState.status === "scanning";
-  const isPaused = autoScanState.status === "paused";
   const isComplete = autoScanState.status === "complete";
-  const sourceFiles = groupBySourceFile(autoScanState.elements);
-  const fileResults = sourceFiles.map((sf) => {
-    let issueCount = 0;
-    for (const el of sf.elements) {
-      const cached = elementIssuesCache.get(el.id);
-      if (cached) {
-        issueCount += cached.issues.length;
+  const filesWithIssues = useMemo(() => {
+    const sourceFiles = groupBySourceFile(autoScanState.elements);
+    const allPaths = sourceFiles.map((sf) => sf.path);
+    const result = [];
+    for (const sf of sourceFiles) {
+      const elementsWithIssues = [];
+      for (const el of sf.elements) {
+        const cached = elementIssuesCache.get(el.id);
+        const issueCount = cached?.issues.length || 0;
+        if (issueCount > 0) {
+          elementsWithIssues.push({ element: el, issueCount });
+        }
+      }
+      if (elementsWithIssues.length > 0) {
+        elementsWithIssues.sort(
+          (a, b) => a.element.source.lineNumber - b.element.source.lineNumber
+        );
+        const totalIssues2 = elementsWithIssues.reduce(
+          (sum, e) => sum + e.issueCount,
+          0
+        );
+        result.push({
+          path: sf.path,
+          displayName: sf.displayName,
+          disambiguatedName: getDisambiguatedName(sf.path, allPaths),
+          issueCount: totalIssues2,
+          elementsWithIssues
+        });
       }
     }
-    return {
-      path: sf.path,
-      displayName: sf.displayName,
-      issueCount,
-      elementCount: sf.elements.length
-    };
-  });
-  fileResults.sort((a, b) => {
-    if (b.issueCount !== a.issueCount) {
-      return b.issueCount - a.issueCount;
-    }
-    return a.displayName.localeCompare(b.displayName);
-  });
-  const totalFiles = fileResults.length;
-  const totalIssues = fileResults.reduce((sum, f) => sum + f.issueCount, 0);
-  const filesWithIssues = fileResults.filter((f) => f.issueCount > 0).length;
+    result.sort((a, b) => b.issueCount - a.issueCount);
+    return result;
+  }, [autoScanState.elements, elementIssuesCache]);
+  const totalIssues = filesWithIssues.reduce((sum, f) => sum + f.issueCount, 0);
   const progress = autoScanState.totalElements > 0 ? autoScanState.currentIndex / autoScanState.totalElements * 100 : 0;
+  const toggleFile = useCallback((path) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+  const handleElementHover = useCallback(
+    (element) => {
+      if (!element) {
+        setLocatorTarget(null);
+        return;
+      }
+      const target = {
+        element: element.element,
+        source: element.source,
+        rect: element.element.getBoundingClientRect()
+      };
+      setLocatorTarget(target);
+    },
+    [setLocatorTarget]
+  );
+  const handleElementClick = useCallback(
+    (element) => {
+      element.element.scrollIntoView({
+        behavior: "smooth",
+        inline: "nearest",
+        block: "nearest"
+      });
+      setInspectedElement({
+        element: element.element,
+        source: element.source,
+        rect: element.element.getBoundingClientRect(),
+        scannedElementId: element.id
+      });
+      setLocatorTarget(null);
+    },
+    [setInspectedElement, setLocatorTarget]
+  );
   return /* @__PURE__ */ jsxs3(
     "div",
     {
+      "data-ui-lint": true,
       style: {
         position: "absolute",
         bottom: "100%",
-        right: 0,
+        left: 0,
         marginBottom: "8px",
-        width: "280px",
-        maxHeight: "400px",
+        width: "320px",
+        maxHeight: "450px",
         borderRadius: STYLES.popoverRadius,
         border: `1px solid ${STYLES.border}`,
         backgroundColor: STYLES.bgPopover,
@@ -404,7 +506,7 @@ function ScanResultsPopover() {
                     justifyContent: "space-between"
                   },
                   children: [
-                    /* @__PURE__ */ jsxs3(
+                    /* @__PURE__ */ jsx3(
                       "div",
                       {
                         style: {
@@ -412,102 +514,34 @@ function ScanResultsPopover() {
                           fontWeight: 600,
                           color: STYLES.text
                         },
-                        children: [
-                          totalFiles,
-                          " files \xB7 ",
-                          totalIssues,
-                          " issues"
-                        ]
+                        children: filesWithIssues.length === 0 ? "No issues found" : `${filesWithIssues.length} ${filesWithIssues.length === 1 ? "file" : "files"} with ${totalIssues} ${totalIssues === 1 ? "issue" : "issues"}`
                       }
                     ),
-                    (isScanning || isPaused) && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "4px" }, children: [
-                      isScanning && /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          onClick: pauseAutoScan,
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: "24px",
-                            height: "24px",
-                            borderRadius: "6px",
-                            border: `1px solid ${STYLES.border}`,
-                            backgroundColor: "transparent",
-                            color: STYLES.textMuted,
-                            cursor: "pointer",
-                            transition: STYLES.transitionFast
-                          },
-                          title: "Pause scan",
-                          children: /* @__PURE__ */ jsx3(PauseIcon, {})
-                        }
-                      ),
-                      isPaused && /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          onClick: resumeAutoScan,
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: "24px",
-                            height: "24px",
-                            borderRadius: "6px",
-                            border: "none",
-                            backgroundColor: STYLES.accent,
-                            color: "#FFFFFF",
-                            cursor: "pointer",
-                            transition: STYLES.transitionFast
-                          },
-                          title: "Resume scan",
-                          children: /* @__PURE__ */ jsx3(PlayIcon, {})
-                        }
-                      ),
-                      /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          onClick: stopAutoScan,
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: "24px",
-                            height: "24px",
-                            borderRadius: "6px",
-                            border: `1px solid ${STYLES.border}`,
-                            backgroundColor: "transparent",
-                            color: STYLES.textMuted,
-                            cursor: "pointer",
-                            transition: STYLES.transitionFast
-                          },
-                          title: "Stop scan",
-                          children: /* @__PURE__ */ jsx3(StopIcon, {})
-                        }
-                      )
-                    ] }),
-                    isComplete && /* @__PURE__ */ jsx3(
+                    liveScanEnabled && /* @__PURE__ */ jsx3(
                       "button",
                       {
-                        onClick: stopAutoScan,
+                        onClick: disableLiveScan,
                         style: {
-                          padding: "4px 8px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: "24px",
+                          height: "24px",
                           borderRadius: "6px",
                           border: `1px solid ${STYLES.border}`,
                           backgroundColor: "transparent",
                           color: STYLES.textMuted,
-                          fontSize: "10px",
-                          fontWeight: 500,
                           cursor: "pointer",
                           transition: STYLES.transitionFast
                         },
-                        title: "Clear results",
-                        children: "Clear"
+                        title: "Disable live scanning",
+                        children: /* @__PURE__ */ jsx3(StopIcon, {})
                       }
                     )
                   ]
                 }
               ),
-              (isScanning || isPaused) && /* @__PURE__ */ jsxs3("div", { style: { marginTop: "10px" }, children: [
+              isScanning && /* @__PURE__ */ jsxs3("div", { style: { marginTop: "10px" }, children: [
                 /* @__PURE__ */ jsxs3(
                   "div",
                   {
@@ -519,7 +553,7 @@ function ScanResultsPopover() {
                       marginBottom: "4px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx3("span", { children: isPaused ? "Paused" : "Scanning..." }),
+                      /* @__PURE__ */ jsx3("span", { children: "Scanning..." }),
                       /* @__PURE__ */ jsxs3("span", { children: [
                         autoScanState.currentIndex,
                         " / ",
@@ -543,7 +577,7 @@ function ScanResultsPopover() {
                         style: {
                           height: "100%",
                           width: `${progress}%`,
-                          backgroundColor: isPaused ? STYLES.warning : STYLES.accent,
+                          backgroundColor: STYLES.accent,
                           transition: "width 0.2s ease-out"
                         }
                       }
@@ -560,92 +594,224 @@ function ScanResultsPopover() {
             style: {
               flex: 1,
               overflowY: "auto",
-              padding: "6px 0"
+              padding: "4px 0"
             },
-            children: fileResults.length === 0 ? /* @__PURE__ */ jsx3(
+            onMouseLeave: () => handleElementHover(null),
+            children: filesWithIssues.length === 0 ? /* @__PURE__ */ jsx3(
               "div",
               {
                 style: {
-                  padding: "20px 14px",
+                  padding: "24px 14px",
                   textAlign: "center",
                   fontSize: "11px",
                   color: STYLES.textMuted
                 },
-                children: isScanning ? "Scanning page elements..." : "No files scanned"
+                children: isScanning ? "Scanning page elements..." : isComplete ? /* @__PURE__ */ jsx3("span", { style: { color: STYLES.success }, children: "\u2713 No issues found" }) : "No files scanned"
               }
-            ) : fileResults.map((file) => /* @__PURE__ */ jsxs3(
-              "div",
+            ) : filesWithIssues.map((file) => /* @__PURE__ */ jsx3(
+              FileRow,
               {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  padding: "8px 14px",
-                  cursor: "default",
-                  transition: STYLES.transitionFast
-                },
-                title: file.path,
-                children: [
-                  /* @__PURE__ */ jsx3(
-                    "span",
-                    {
-                      style: {
-                        fontSize: "12px",
-                        fontFamily: STYLES.fontMono,
-                        color: STYLES.text,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        flex: 1,
-                        marginRight: "12px"
-                      },
-                      children: file.displayName
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3(
-                    "span",
-                    {
-                      style: {
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        minWidth: "24px",
-                        height: "20px",
-                        padding: "0 6px",
-                        borderRadius: "10px",
-                        backgroundColor: file.issueCount > 0 ? getStatusColor(file.issueCount) : "rgba(75, 85, 99, 0.4)",
-                        color: file.issueCount > 0 ? "#FFFFFF" : STYLES.textMuted,
-                        fontSize: "10px",
-                        fontWeight: 700
-                      },
-                      children: file.issueCount
-                    }
-                  )
-                ]
+                file,
+                isExpanded: expandedFiles.has(file.path),
+                onToggle: () => toggleFile(file.path),
+                onElementHover: handleElementHover,
+                onElementClick: handleElementClick
               },
               file.path
             ))
           }
-        ),
-        isComplete && totalFiles > 0 && /* @__PURE__ */ jsx3(
+        )
+      ]
+    }
+  );
+}
+function FileRow({
+  file,
+  isExpanded,
+  onToggle,
+  onElementHover,
+  onElementClick
+}) {
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "8px 12px",
+          cursor: "pointer",
+          transition: STYLES.transitionFast,
+          backgroundColor: isExpanded ? "rgba(59, 130, 246, 0.08)" : "transparent"
+        },
+        title: file.path,
+        onClick: onToggle,
+        onMouseEnter: (e) => {
+          if (!isExpanded) {
+            e.currentTarget.style.backgroundColor = "rgba(55, 65, 81, 0.5)";
+          }
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = isExpanded ? "rgba(59, 130, 246, 0.08)" : "transparent";
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "16px",
+                height: "16px",
+                marginRight: "6px",
+                color: STYLES.textMuted,
+                transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 0.15s ease-out"
+              },
+              children: /* @__PURE__ */ jsx3(ChevronIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              style: {
+                fontSize: "12px",
+                fontFamily: STYLES.fontMono,
+                color: STYLES.text,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1,
+                marginRight: "12px"
+              },
+              children: file.disambiguatedName
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: "22px",
+                height: "18px",
+                padding: "0 6px",
+                borderRadius: "9px",
+                backgroundColor: getStatusColor(file.issueCount),
+                color: "#FFFFFF",
+                fontSize: "10px",
+                fontWeight: 700
+              },
+              children: file.issueCount
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          backgroundColor: "rgba(17, 24, 39, 0.4)",
+          borderTop: `1px solid ${STYLES.border}`,
+          borderBottom: `1px solid ${STYLES.border}`
+        },
+        children: file.elementsWithIssues.map((item) => /* @__PURE__ */ jsx3(
+          ElementRow,
+          {
+            item,
+            onHover: onElementHover,
+            onClick: onElementClick
+          },
+          item.element.id
+        ))
+      }
+    )
+  ] });
+}
+function ElementRow({ item, onHover, onClick }) {
+  const { element, issueCount } = item;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        padding: "6px 12px 6px 34px",
+        cursor: "pointer",
+        transition: STYLES.transitionFast,
+        backgroundColor: "transparent"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.15)";
+        onHover(element);
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+      },
+      onClick: () => onClick(element),
+      children: [
+        /* @__PURE__ */ jsxs3(
           "div",
           {
             style: {
-              padding: "10px 14px",
-              borderTop: `1px solid ${STYLES.border}`,
-              fontSize: "10px",
-              color: STYLES.textMuted
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              flex: 1,
+              marginRight: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  style: {
+                    fontSize: "11px",
+                    fontFamily: STYLES.fontMono,
+                    color: STYLES.accent
+                  },
+                  children: [
+                    "<",
+                    element.tagName,
+                    ">"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  style: {
+                    fontSize: "10px",
+                    color: STYLES.textDim
+                  },
+                  children: [
+                    ":",
+                    element.source.lineNumber
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minWidth: "18px",
+              height: "16px",
+              padding: "0 5px",
+              borderRadius: "8px",
+              backgroundColor: getStatusColor(issueCount),
+              color: "#FFFFFF",
+              fontSize: "9px",
+              fontWeight: 700
             },
-            children: totalIssues === 0 ? /* @__PURE__ */ jsxs3("span", { style: { color: STYLES.success }, children: [
-              "\u2713 No issues found across ",
-              totalFiles,
-              " files"
-            ] }) : /* @__PURE__ */ jsxs3("span", { children: [
-              filesWithIssues,
-              " of ",
-              totalFiles,
-              " files have issues"
-            ] })
+            children: issueCount
           }
         )
       ]
@@ -653,23 +819,66 @@ function ScanResultsPopover() {
   );
 }
 
+// src/components/ui-lint/ScanPanelStack.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ScanPanelStack({ show, onClose }) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!show) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (containerRef.current && !containerRef.current.contains(target)) {
+        const isUILintElement = target.closest?.("[data-ui-lint]");
+        if (!isUILintElement) {
+          onClose();
+        }
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 100);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [show, onClose]);
+  useEffect(() => {
+    if (!show) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [show, onClose]);
+  if (!show) return null;
+  return /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { position: "relative" }, children: /* @__PURE__ */ jsx4(ScanResultsPopover, {}) });
+}
+
 // src/components/ui-lint/UILintToolbar.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function UILintToolbar() {
-  const { settings, inspectedElement, autoScanState, startAutoScan } = useUILintContext();
+  const {
+    settings,
+    inspectedElement,
+    liveScanEnabled,
+    autoScanState,
+    enableLiveScan,
+    disableLiveScan
+  } = useUILintContext();
   const elementIssuesCache = useUILintStore(
     (s) => s.elementIssuesCache
   );
-  const [showSettings, setShowSettings] = useState(false);
-  const [showResults, setShowResults] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  const toolbarRef = useRef(null);
-  const settingsRef = useRef(null);
-  const resultsRef = useRef(null);
-  useEffect(() => {
+  const [showSettings, setShowSettings] = useState2(false);
+  const [showResults, setShowResults] = useState2(false);
+  const [mounted, setMounted] = useState2(false);
+  const toolbarRef = useRef2(null);
+  const settingsRef = useRef2(null);
+  useEffect2(() => {
     setMounted(true);
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       if (showSettings && settingsRef.current) {
@@ -677,70 +886,63 @@ function UILintToolbar() {
           setShowSettings(false);
         }
       }
-      if (showResults && resultsRef.current) {
-        if (!resultsRef.current.contains(target) && !toolbarRef.current?.contains(target)) {
-          setShowResults(false);
-        }
-      }
     };
-    if (showSettings || showResults) {
+    if (showSettings) {
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
-  }, [showSettings, showResults]);
-  const handleScanClick = useCallback(() => {
-    if (autoScanState.status === "idle") {
-      startAutoScan();
-      setShowResults(true);
+  }, [showSettings]);
+  const handleToggleClick = useCallback2(() => {
+    if (liveScanEnabled) {
+      disableLiveScan();
+      setShowResults(false);
     } else {
-      setShowResults(!showResults);
+      enableLiveScan();
     }
     setShowSettings(false);
-  }, [autoScanState.status, startAutoScan, showResults]);
-  const handleSettingsClick = useCallback(() => {
+  }, [liveScanEnabled, enableLiveScan, disableLiveScan]);
+  const handleIssuesClick = useCallback2(() => {
+    if (!liveScanEnabled) return;
+    setShowResults(!showResults);
+    setShowSettings(false);
+  }, [liveScanEnabled, showResults]);
+  const handleSettingsClick = useCallback2(() => {
     setShowSettings(!showSettings);
     setShowResults(false);
   }, [showSettings]);
   if (!mounted) return null;
-  if (inspectedElement) return null;
   const isScanning = autoScanState.status === "scanning";
-  const isPaused = autoScanState.status === "paused";
   const isComplete = autoScanState.status === "complete";
-  const hasResults = autoScanState.status !== "idle";
   let totalIssues = 0;
   elementIssuesCache.forEach((el) => {
     totalIssues += el.issues.length;
   });
-  const sourceFiles = hasResults ? groupBySourceFile(autoScanState.elements) : [];
-  const filesWithIssues = sourceFiles.filter((sf) => {
-    const issues = sf.elements.reduce((sum, el) => {
-      const cached = elementIssuesCache.get(el.id);
-      return sum + (cached?.issues.length || 0);
-    }, 0);
-    return issues > 0;
-  }).length;
-  const getScanButtonContent = () => {
+  const hasIssues = totalIssues > 0;
+  const getToggleContent = () => {
     if (isScanning) {
-      return /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx4(SpinnerIcon, {}),
-        /* @__PURE__ */ jsx4("span", { children: "Scanning..." })
-      ] });
+      return /* @__PURE__ */ jsx5(SpinnerIcon, {});
     }
-    if (isPaused) {
-      return /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx4(MagnifyingGlassIcon, {}),
-        /* @__PURE__ */ jsx4("span", { children: "Paused" })
-      ] });
+    if (liveScanEnabled) {
+      return /* @__PURE__ */ jsx5(EyeIcon, {});
+    }
+    return /* @__PURE__ */ jsx5(EyeOffIcon, {});
+  };
+  const getIssuesContent = () => {
+    if (!liveScanEnabled) {
+      return /* @__PURE__ */ jsx5("span", { style: { opacity: 0.5 }, children: "--" });
+    }
+    if (isScanning) {
+      return /* @__PURE__ */ jsx5("span", { style: { opacity: 0.7 }, children: "..." });
     }
-    if (isComplete) {
-      return /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx4(CheckCircleIcon, {}),
-        /* @__PURE__ */ jsx4("span", { children: totalIssues === 0 ? "All clear" : `${totalIssues} issues` })
+    if (hasIssues) {
+      return /* @__PURE__ */ jsxs4("span", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+        /* @__PURE__ */ jsx5(WarningIcon, {}),
+        /* @__PURE__ */ jsx5("span", { children: totalIssues })
       ] });
     }
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx4(MagnifyingGlassIcon, {}),
-      /* @__PURE__ */ jsx4("span", { children: "Scan" })
+    return /* @__PURE__ */ jsxs4("span", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+      /* @__PURE__ */ jsx5(CheckCircleIcon, {}),
+      /* @__PURE__ */ jsx5("span", { children: "0" })
     ] });
   };
   const content = /* @__PURE__ */ jsxs4(
@@ -749,13 +951,13 @@ function UILintToolbar() {
       "data-ui-lint": true,
       style: {
         position: "fixed",
-        bottom: "24px",
-        right: "24px",
+        bottom: "70px",
+        left: "20px",
         zIndex: 99999,
         fontFamily: STYLES.font
       },
       children: [
-        /* @__PURE__ */ jsx4("style", { children: `
+        /* @__PURE__ */ jsx5("style", { children: `
         @keyframes uilint-fade-in {
           from { opacity: 0; transform: translateY(8px); }
           to { opacity: 1; transform: translateY(0); }
@@ -776,7 +978,7 @@ function UILintToolbar() {
               letterSpacing: "0.01em"
             },
             children: [
-              /* @__PURE__ */ jsx4("span", { style: { color: STYLES.textMuted }, children: "\u2325+Click" }),
+              /* @__PURE__ */ jsx5("span", { style: { color: STYLES.textMuted }, children: "\u2325+Click" }),
               " to inspect"
             ]
           }
@@ -799,61 +1001,85 @@ function UILintToolbar() {
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  onClick: handleToggleClick,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%",
+                    width: "40px",
+                    border: "none",
+                    backgroundColor: liveScanEnabled ? STYLES.bgSegmentHover : "transparent",
+                    color: liveScanEnabled ? STYLES.accent : STYLES.textMuted,
+                    cursor: "pointer",
+                    transition: STYLES.transition
+                  },
+                  onMouseEnter: (e) => {
+                    if (!liveScanEnabled) {
+                      e.currentTarget.style.backgroundColor = STYLES.bgSegmentHover;
+                      e.currentTarget.style.color = STYLES.text;
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (!liveScanEnabled) {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                      e.currentTarget.style.color = STYLES.textMuted;
+                    }
+                  },
+                  title: liveScanEnabled ? "Disable live scanning" : "Enable live scanning",
+                  children: getToggleContent()
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    width: "1px",
+                    height: "20px",
+                    backgroundColor: STYLES.divider
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx5(
                 "button",
                 {
-                  onClick: handleScanClick,
+                  onClick: handleIssuesClick,
+                  disabled: !liveScanEnabled,
                   style: {
                     display: "flex",
                     alignItems: "center",
-                    gap: "6px",
+                    justifyContent: "center",
+                    gap: "4px",
                     height: "100%",
-                    padding: "0 16px",
+                    padding: "0 12px",
                     border: "none",
-                    backgroundColor: showResults || hasResults ? STYLES.bgSegmentHover : "transparent",
-                    color: hasResults ? totalIssues > 0 ? STYLES.warning : STYLES.success : STYLES.text,
+                    backgroundColor: showResults && liveScanEnabled ? STYLES.bgSegmentHover : "transparent",
+                    color: !liveScanEnabled ? STYLES.textDim : hasIssues ? STYLES.warning : isComplete ? STYLES.success : STYLES.text,
                     fontSize: "13px",
                     fontWeight: 500,
                     fontFamily: STYLES.font,
-                    cursor: "pointer",
-                    transition: STYLES.transition
+                    cursor: liveScanEnabled ? "pointer" : "default",
+                    transition: STYLES.transition,
+                    opacity: liveScanEnabled ? 1 : 0.6
                   },
                   onMouseEnter: (e) => {
-                    if (!showResults && !hasResults) {
+                    if (liveScanEnabled && !showResults) {
                       e.currentTarget.style.backgroundColor = STYLES.bgSegmentHover;
                     }
                   },
                   onMouseLeave: (e) => {
-                    if (!showResults && !hasResults) {
+                    if (liveScanEnabled && !showResults) {
                       e.currentTarget.style.backgroundColor = "transparent";
                     }
                   },
-                  title: hasResults ? `${sourceFiles.length} files scanned, ${totalIssues} issues found` : "Scan page for style issues",
-                  children: [
-                    getScanButtonContent(),
-                    isComplete && filesWithIssues > 0 && /* @__PURE__ */ jsx4(
-                      "span",
-                      {
-                        style: {
-                          display: "inline-flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          minWidth: "18px",
-                          height: "18px",
-                          padding: "0 5px",
-                          borderRadius: "9px",
-                          backgroundColor: STYLES.error,
-                          color: STYLES.badgeText,
-                          fontSize: "10px",
-                          fontWeight: 700
-                        },
-                        children: filesWithIssues
-                      }
-                    )
-                  ]
+                  title: liveScanEnabled ? `${totalIssues} issues found` : "Enable scanning to see issues",
+                  children: getIssuesContent()
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "div",
                 {
                   style: {
@@ -863,7 +1089,7 @@ function UILintToolbar() {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "button",
                 {
                   onClick: handleSettingsClick,
@@ -892,14 +1118,20 @@ function UILintToolbar() {
                     }
                   },
                   title: "Settings",
-                  children: /* @__PURE__ */ jsx4(EllipsisIcon, {})
+                  children: /* @__PURE__ */ jsx5(EllipsisIcon, {})
                 }
               )
             ]
           }
         ),
-        showSettings && /* @__PURE__ */ jsx4("div", { ref: settingsRef, children: /* @__PURE__ */ jsx4(SettingsPopover, { settings }) }),
-        showResults && hasResults && /* @__PURE__ */ jsx4("div", { ref: resultsRef, children: /* @__PURE__ */ jsx4(ScanResultsPopover, {}) })
+        showSettings && /* @__PURE__ */ jsx5("div", { ref: settingsRef, children: /* @__PURE__ */ jsx5(SettingsPopover, { settings }) }),
+        /* @__PURE__ */ jsx5(
+          ScanPanelStack,
+          {
+            show: showResults && liveScanEnabled,
+            onClose: () => setShowResults(false)
+          }
+        )
       ]
     }
   );