uilint-react 0.1.39 → 0.1.41

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

@@ -3,7 +3,7 @@ import {
   groupBySourceFile,
   useUILintContext,
   useUILintStore
-} from "./chunk-ILK73X6L.js";
+} from "./chunk-LAL3JTAA.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
@@ -60,134 +60,8 @@ function getStatusColor(issueCount) {
   return STYLES.warning;
 }
 
-// src/components/ui-lint/toolbar-icons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-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" }) });
-}
-function EllipsisIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "2", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "2", fill: "currentColor" })
-  ] });
-}
-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" }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M8 12l3 3 5-6",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  ] });
-}
-function SpinnerIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      style: {
-        animation: "uilint-spin 1s linear infinite"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            opacity: "0.3"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M12 2v4",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round"
-          }
-        )
-      ]
-    }
-  );
-}
-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";
+import { jsx, jsxs } from "react/jsx-runtime";
 function SettingsPopover({ settings }) {
   const wsConnected = useUILintStore((s) => s.wsConnected);
   const wsUrl = useUILintStore((s) => s.wsUrl);
@@ -197,7 +71,7 @@ function SettingsPopover({ settings }) {
   const disconnectWebSocket = useUILintStore(
     (s) => s.disconnectWebSocket
   );
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -216,7 +90,7 @@ function SettingsPopover({ settings }) {
         animation: "uilint-fade-in 0.15s ease-out"
       },
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -228,7 +102,7 @@ function SettingsPopover({ settings }) {
             children: "UILint Settings"
           }
         ),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -238,7 +112,7 @@ function SettingsPopover({ settings }) {
               backgroundColor: STYLES.bgSegment
             },
             children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx(
                 "div",
                 {
                   style: {
@@ -247,8 +121,8 @@ function SettingsPopover({ settings }) {
                     justifyContent: "space-between",
                     marginBottom: "8px"
                   },
-                  children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                    /* @__PURE__ */ jsx2(
+                  children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                    /* @__PURE__ */ jsx(
                       "div",
                       {
                         style: {
@@ -260,7 +134,7 @@ function SettingsPopover({ settings }) {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx(
                       "span",
                       {
                         style: {
@@ -274,7 +148,7 @@ function SettingsPopover({ settings }) {
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx(
                 "div",
                 {
                   style: {
@@ -287,8 +161,8 @@ function SettingsPopover({ settings }) {
                   children: wsUrl
                 }
               ),
-              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "6px" }, children: [
-                /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: () => connectWebSocket(wsUrl),
@@ -308,7 +182,7 @@ function SettingsPopover({ settings }) {
                     children: wsConnected ? "Reconnect" : "Connect"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: () => disconnectWebSocket(),
@@ -333,7 +207,7 @@ function SettingsPopover({ settings }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -343,7 +217,7 @@ function SettingsPopover({ settings }) {
               lineHeight: 1.5
             },
             children: [
-              /* @__PURE__ */ jsx2("strong", { style: { color: STYLES.text }, children: "\u2325+Click" }),
+              /* @__PURE__ */ jsx("strong", { style: { color: STYLES.text }, children: "\u2325+Click" }),
               " any element to open the inspector sidebar"
             ]
           }
@@ -358,6 +232,26 @@ import { useRef, useEffect } from "react";
 
 // src/components/ui-lint/ScanResultsPopover.tsx
 import { useState, useCallback, useMemo } from "react";
+
+// src/components/ui-lint/toolbar-icons.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function StopIcon() {
+  return /* @__PURE__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx2("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1", fill: "currentColor" }) });
+}
+function ChevronIcon() {
+  return /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M9 6l6 6-6 6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/components/ui-lint/ScanResultsPopover.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function getDisambiguatedName(path, allPaths) {
   const parts = path.split("/");
@@ -386,9 +280,10 @@ function ScanResultsPopover() {
     (s) => s.setInspectedElement
   );
   const [expandedFiles, setExpandedFiles] = useState(/* @__PURE__ */ new Set());
+  const [searchQuery, setSearchQuery] = useState("");
   const isScanning = autoScanState.status === "scanning";
   const isComplete = autoScanState.status === "complete";
-  const filesWithIssues = useMemo(() => {
+  const allFilesWithIssues = useMemo(() => {
     const sourceFiles = groupBySourceFile(autoScanState.elements);
     const allPaths = sourceFiles.map((sf) => sf.path);
     const result = [];
@@ -398,7 +293,12 @@ function ScanResultsPopover() {
         const cached = elementIssuesCache.get(el.id);
         const issueCount = cached?.issues.length || 0;
         if (issueCount > 0) {
-          elementsWithIssues.push({ element: el, issueCount });
+          const ruleIds = Array.from(
+            new Set(
+              (cached?.issues || []).map((i) => i.ruleId).filter((r) => typeof r === "string")
+            )
+          );
+          elementsWithIssues.push({ element: el, issueCount, ruleIds });
         }
       }
       if (elementsWithIssues.length > 0) {
@@ -421,7 +321,44 @@ function ScanResultsPopover() {
     result.sort((a, b) => b.issueCount - a.issueCount);
     return result;
   }, [autoScanState.elements, elementIssuesCache]);
+  const filesWithIssues = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return allFilesWithIssues;
+    }
+    const raw = searchQuery.toLowerCase().trim();
+    const tagQuery = raw.replace(/[<>]/g, "").replace("/", "").trim();
+    const query = raw;
+    return allFilesWithIssues.map((file) => {
+      const fileMatches = file.path.toLowerCase().includes(query) || file.displayName.toLowerCase().includes(query) || file.disambiguatedName.toLowerCase().includes(query);
+      const matchingElements = file.elementsWithIssues.filter((item) => {
+        const tagMatches = item.element.tagName.toLowerCase().includes(tagQuery);
+        const ruleMatches = item.ruleIds.some(
+          (r) => r.toLowerCase().includes(query)
+        );
+        return tagMatches || ruleMatches;
+      });
+      if (fileMatches) {
+        return file;
+      }
+      if (matchingElements.length > 0) {
+        const filteredIssueCount = matchingElements.reduce(
+          (sum, e) => sum + e.issueCount,
+          0
+        );
+        return {
+          ...file,
+          elementsWithIssues: matchingElements,
+          issueCount: filteredIssueCount
+        };
+      }
+      return null;
+    }).filter((file) => file !== null);
+  }, [allFilesWithIssues, searchQuery]);
   const totalIssues = filesWithIssues.reduce((sum, f) => sum + f.issueCount, 0);
+  const totalAllIssues = allFilesWithIssues.reduce(
+    (sum, f) => sum + f.issueCount,
+    0
+  );
   const progress = autoScanState.totalElements > 0 ? autoScanState.currentIndex / autoScanState.totalElements * 100 : 0;
   const toggleFile = useCallback((path) => {
     setExpandedFiles((prev) => {
@@ -514,7 +451,7 @@ function ScanResultsPopover() {
                           fontWeight: 600,
                           color: STYLES.text
                         },
-                        children: filesWithIssues.length === 0 ? "No issues found" : `${filesWithIssues.length} ${filesWithIssues.length === 1 ? "file" : "files"} with ${totalIssues} ${totalIssues === 1 ? "issue" : "issues"}`
+                        children: allFilesWithIssues.length === 0 ? "No issues found" : searchQuery ? `${filesWithIssues.length} of ${allFilesWithIssues.length} files` : `${filesWithIssues.length} ${filesWithIssues.length === 1 ? "file" : "files"} with ${totalAllIssues} ${totalAllIssues === 1 ? "issue" : "issues"}`
                       }
                     ),
                     liveScanEnabled && /* @__PURE__ */ jsx3(
@@ -541,6 +478,62 @@ function ScanResultsPopover() {
                   ]
                 }
               ),
+              allFilesWithIssues.length > 0 && /* @__PURE__ */ jsx3("div", { style: { marginTop: "10px" }, children: /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    padding: "6px 10px",
+                    backgroundColor: "rgba(17, 24, 39, 0.6)",
+                    borderRadius: "6px",
+                    border: `1px solid ${STYLES.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(SearchIcon, {}),
+                    /* @__PURE__ */ jsx3(
+                      "input",
+                      {
+                        type: "text",
+                        value: searchQuery,
+                        onChange: (e) => setSearchQuery(e.target.value),
+                        placeholder: "Filter by file or tag...",
+                        style: {
+                          flex: 1,
+                          border: "none",
+                          backgroundColor: "transparent",
+                          color: STYLES.text,
+                          fontSize: "11px",
+                          fontFamily: STYLES.font,
+                          outline: "none"
+                        }
+                      }
+                    ),
+                    searchQuery && /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        onClick: () => setSearchQuery(""),
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: "16px",
+                          height: "16px",
+                          borderRadius: "50%",
+                          border: "none",
+                          backgroundColor: "rgba(75, 85, 99, 0.5)",
+                          color: STYLES.textMuted,
+                          cursor: "pointer",
+                          padding: 0
+                        },
+                        title: "Clear search",
+                        children: /* @__PURE__ */ jsx3(ClearIcon, {})
+                      }
+                    )
+                  ]
+                }
+              ) }),
               isScanning && /* @__PURE__ */ jsxs3("div", { style: { marginTop: "10px" }, children: [
                 /* @__PURE__ */ jsxs3(
                   "div",
@@ -606,7 +599,11 @@ function ScanResultsPopover() {
                   fontSize: "11px",
                   color: STYLES.textMuted
                 },
-                children: isScanning ? "Scanning page elements..." : isComplete ? /* @__PURE__ */ jsx3("span", { style: { color: STYLES.success }, children: "\u2713 No issues found" }) : "No files scanned"
+                children: isScanning ? "Scanning page elements..." : searchQuery && allFilesWithIssues.length > 0 ? /* @__PURE__ */ jsxs3("span", { children: [
+                  'No matches for "',
+                  searchQuery,
+                  '"'
+                ] }) : isComplete ? /* @__PURE__ */ jsx3("span", { style: { color: STYLES.success }, children: "\u2713 No issues found" }) : "No files scanned"
               }
             ) : filesWithIssues.map((file) => /* @__PURE__ */ jsx3(
               FileRow,
@@ -818,6 +815,52 @@ function ElementRow({ item, onHover, onClick }) {
     }
   );
 }
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: "11",
+            cy: "11",
+            r: "7",
+            stroke: STYLES.textMuted,
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M21 21l-4.35-4.35",
+            stroke: STYLES.textMuted,
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsx3("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M18 6L6 18M6 6l12 12",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 
 // src/components/ui-lint/ScanPanelStack.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -858,10 +901,464 @@ function ScanPanelStack({ show, onClose }) {
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var TOKENS = {
+  // Colors
+  bgBase: "rgba(15, 15, 15, 0.85)",
+  bgElevated: "rgba(25, 25, 25, 0.95)",
+  bgHover: "rgba(255, 255, 255, 0.08)",
+  bgActive: "rgba(255, 255, 255, 0.12)",
+  border: "rgba(255, 255, 255, 0.1)",
+  borderFocus: "rgba(99, 179, 237, 0.6)",
+  textPrimary: "rgba(255, 255, 255, 0.95)",
+  textSecondary: "rgba(255, 255, 255, 0.7)",
+  textMuted: "rgba(255, 255, 255, 0.4)",
+  textDisabled: "rgba(255, 255, 255, 0.25)",
+  accent: "#63b3ed",
+  // Calm blue
+  success: "#68d391",
+  // Soft green
+  warning: "#f6ad55",
+  // Warm orange
+  // Typography
+  fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,
+  fontMono: `"SF Mono", Monaco, "Cascadia Code", monospace`,
+  // Sizing
+  pillHeight: "44px",
+  // Touch-friendly
+  pillRadius: "22px",
+  buttonMinWidth: "44px",
+  // Touch target minimum
+  // Effects
+  blur: "blur(20px)",
+  shadowSm: "0 2px 8px rgba(0, 0, 0, 0.3)",
+  shadowMd: "0 4px 20px rgba(0, 0, 0, 0.4)",
+  shadowGlow: (color) => `0 0 20px ${color}`,
+  // Animation
+  transitionFast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+  transitionBase: "200ms cubic-bezier(0.4, 0, 0.2, 1)",
+  transitionSlow: "300ms cubic-bezier(0.4, 0, 0.2, 1)"
+};
+var Icons = {
+  Eye: () => /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  ),
+  EyeOff: () => /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+        /* @__PURE__ */ jsx5("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+      ]
+    }
+  ),
+  Scan: () => /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+        /* @__PURE__ */ jsx5("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+        /* @__PURE__ */ jsx5("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+        /* @__PURE__ */ jsx5("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
+        /* @__PURE__ */ jsx5("line", { x1: "7", y1: "12", x2: "17", y2: "12" })
+      ]
+    }
+  ),
+  Check: () => /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" })
+    }
+  ),
+  AlertTriangle: () => /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+        /* @__PURE__ */ jsx5("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ jsx5("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  ),
+  Settings: () => /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" }),
+        /* @__PURE__ */ jsx5("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+      ]
+    }
+  ),
+  ChevronRight: () => /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx5("polyline", { points: "9 18 15 12 9 6" })
+    }
+  )
+};
+var globalStyles = `
+  @keyframes uilint-fade-in {
+    from { opacity: 0; transform: translateY(8px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+  
+  @keyframes uilint-fade-out {
+    from { opacity: 1; transform: translateY(0) scale(1); }
+    to { opacity: 0; transform: translateY(8px) scale(0.98); }
+  }
+  
+  @keyframes uilint-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  
+  @keyframes uilint-scan-line {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+  
+  @keyframes uilint-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  
+  .uilint-toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    border: none;
+    background: transparent;
+    color: ${TOKENS.textSecondary};
+    cursor: pointer;
+    transition: 
+      background-color ${TOKENS.transitionFast},
+      color ${TOKENS.transitionFast},
+      transform ${TOKENS.transitionFast};
+    outline: none;
+    position: relative;
+  }
+  
+  .uilint-toolbar-btn:hover:not(:disabled) {
+    background: ${TOKENS.bgHover};
+    color: ${TOKENS.textPrimary};
+  }
+  
+  .uilint-toolbar-btn:active:not(:disabled) {
+    background: ${TOKENS.bgActive};
+    transform: scale(0.97);
+  }
+  
+  .uilint-toolbar-btn:focus-visible {
+    box-shadow: inset 0 0 0 2px ${TOKENS.borderFocus};
+  }
+  
+  .uilint-toolbar-btn:disabled {
+    cursor: not-allowed;
+    color: ${TOKENS.textDisabled};
+  }
+  
+  .uilint-toolbar-btn--active {
+    background: ${TOKENS.bgActive} !important;
+    color: ${TOKENS.accent} !important;
+  }
+  
+  .uilint-toolbar-btn--warning {
+    color: ${TOKENS.warning} !important;
+  }
+  
+  .uilint-toolbar-btn--success {
+    color: ${TOKENS.success} !important;
+  }
+  
+  .uilint-hint {
+    opacity: 0;
+    transform: translateY(4px);
+    transition: 
+      opacity ${TOKENS.transitionBase},
+      transform ${TOKENS.transitionBase};
+    pointer-events: none;
+  }
+  
+  .uilint-hint--visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  .uilint-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+    font-family: ${TOKENS.fontMono};
+    letter-spacing: -0.02em;
+  }
+  
+  .uilint-scanning-indicator {
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .uilint-scanning-indicator::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(99, 179, 237, 0.3),
+      transparent
+    );
+    animation: uilint-scan-line 1.5s ease-in-out infinite;
+  }
+  
+  .uilint-popover {
+    animation: uilint-fade-in ${TOKENS.transitionSlow} forwards;
+  }
+  
+  .uilint-popover--closing {
+    animation: uilint-fade-out ${TOKENS.transitionBase} forwards;
+  }
+`;
+function ToolbarButton({
+  onClick,
+  disabled,
+  active,
+  variant = "default",
+  title,
+  ariaLabel,
+  width = TOKENS.buttonMinWidth,
+  children
+}) {
+  const classes = [
+    "uilint-toolbar-btn",
+    active && "uilint-toolbar-btn--active",
+    variant === "warning" && "uilint-toolbar-btn--warning",
+    variant === "success" && "uilint-toolbar-btn--success"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      className: classes,
+      onClick,
+      disabled,
+      title,
+      "aria-label": ariaLabel,
+      "aria-pressed": active,
+      style: { minWidth: width },
+      children
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        width: "1px",
+        height: "20px",
+        backgroundColor: TOKENS.border,
+        flexShrink: 0
+      },
+      "aria-hidden": "true"
+    }
+  );
+}
+function ScanStatus({ status, issueCount, enabled }) {
+  if (!enabled) {
+    return /* @__PURE__ */ jsx5(
+      "span",
+      {
+        style: {
+          fontSize: "12px",
+          color: TOKENS.textDisabled,
+          fontStyle: "italic"
+        },
+        children: "Off"
+      }
+    );
+  }
+  if (status === "scanning" || status === "paused") {
+    return /* @__PURE__ */ jsxs4(
+      "span",
+      {
+        className: "uilint-scanning-indicator",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "0 4px"
+        },
+        children: [
+          /* @__PURE__ */ jsx5(Icons.Scan, {}),
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              style: {
+                fontSize: "12px",
+                fontFamily: TOKENS.fontMono,
+                animation: `uilint-pulse 1s ease-in-out infinite`
+              },
+              children: "Scanning"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (issueCount === 0) {
+    return /* @__PURE__ */ jsxs4(
+      "span",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "5px"
+        },
+        children: [
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "18px",
+                height: "18px",
+                borderRadius: "50%",
+                backgroundColor: `${TOKENS.success}20`,
+                color: TOKENS.success
+              },
+              children: /* @__PURE__ */ jsx5(Icons.Check, {})
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              style: {
+                fontSize: "12px",
+                fontWeight: 500,
+                color: TOKENS.success
+              },
+              children: "Clear"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "5px"
+      },
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "18px",
+              height: "18px",
+              borderRadius: "50%",
+              backgroundColor: `${TOKENS.warning}20`,
+              color: TOKENS.warning
+            },
+            children: /* @__PURE__ */ jsx5(Icons.AlertTriangle, {})
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: "uilint-badge",
+            style: {
+              backgroundColor: `${TOKENS.warning}20`,
+              color: TOKENS.warning
+            },
+            children: issueCount
+          }
+        )
+      ]
+    }
+  );
+}
 function UILintToolbar() {
   const {
     settings,
-    inspectedElement,
     liveScanEnabled,
     autoScanState,
     enableLiveScan,
@@ -873,25 +1370,74 @@ function UILintToolbar() {
   const [showSettings, setShowSettings] = useState2(false);
   const [showResults, setShowResults] = useState2(false);
   const [mounted, setMounted] = useState2(false);
+  const [settingsClosing, setSettingsClosing] = useState2(false);
+  const [nextjsOverlayVisible, setNextjsOverlayVisible] = useState2(false);
   const toolbarRef = useRef2(null);
   const settingsRef = useRef2(null);
+  useEffect2(() => {
+    const checkForNextOverlay = () => {
+      const overlaySelectors = [
+        "nextjs-portal",
+        "[data-nextjs-dialog]",
+        "[data-nextjs-dialog-overlay]",
+        "#__next-build-watcher",
+        "[data-nextjs-toast]"
+      ];
+      const hasOverlay = overlaySelectors.some((selector) => {
+        const el = document.querySelector(selector);
+        if (!el) return false;
+        const style = window.getComputedStyle(el);
+        return style.display !== "none" && style.visibility !== "hidden";
+      });
+      setNextjsOverlayVisible(hasOverlay);
+    };
+    checkForNextOverlay();
+    const observer = new MutationObserver(checkForNextOverlay);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style", "class"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  const isScanning = autoScanState.status === "scanning";
+  const isComplete = autoScanState.status === "complete";
+  let totalIssues = 0;
+  elementIssuesCache.forEach((el) => {
+    totalIssues += el.issues.length;
+  });
+  const hasIssues = totalIssues > 0;
   useEffect2(() => {
     setMounted(true);
   }, []);
   useEffect2(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
-      if (showSettings && settingsRef.current) {
-        if (!settingsRef.current.contains(target) && !toolbarRef.current?.contains(target)) {
-          setShowSettings(false);
+      if (showSettings && settingsRef.current && toolbarRef.current) {
+        if (!settingsRef.current.contains(target) && !toolbarRef.current.contains(target)) {
+          handleCloseSettings();
         }
       }
     };
-    if (showSettings) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        if (showSettings) handleCloseSettings();
+        if (showResults) setShowResults(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [showSettings, showResults]);
+  useEffect2(() => {
+    if (hasIssues && liveScanEnabled && isComplete && !showSettings) {
+      setShowResults(true);
     }
-  }, [showSettings]);
+  }, [hasIssues, liveScanEnabled, isComplete, showSettings]);
   const handleToggleClick = useCallback2(() => {
     if (liveScanEnabled) {
       disableLiveScan();
@@ -899,87 +1445,85 @@ function UILintToolbar() {
     } else {
       enableLiveScan();
     }
-    setShowSettings(false);
-  }, [liveScanEnabled, enableLiveScan, disableLiveScan]);
+    if (showSettings) handleCloseSettings();
+  }, [liveScanEnabled, enableLiveScan, disableLiveScan, showSettings]);
   const handleIssuesClick = useCallback2(() => {
-    if (!liveScanEnabled) return;
-    setShowResults(!showResults);
-    setShowSettings(false);
-  }, [liveScanEnabled, showResults]);
-  const handleSettingsClick = useCallback2(() => {
-    setShowSettings(!showSettings);
-    setShowResults(false);
-  }, [showSettings]);
-  if (!mounted) return null;
-  const isScanning = autoScanState.status === "scanning";
-  const isComplete = autoScanState.status === "complete";
-  let totalIssues = 0;
-  elementIssuesCache.forEach((el) => {
-    totalIssues += el.issues.length;
-  });
-  const hasIssues = totalIssues > 0;
-  const getToggleContent = () => {
-    if (isScanning) {
-      return /* @__PURE__ */ jsx5(SpinnerIcon, {});
-    }
-    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: "..." });
+      enableLiveScan();
+      return;
     }
-    if (hasIssues) {
-      return /* @__PURE__ */ jsxs4("span", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-        /* @__PURE__ */ jsx5(WarningIcon, {}),
-        /* @__PURE__ */ jsx5("span", { children: totalIssues })
-      ] });
+    setShowResults((prev) => !prev);
+  }, [liveScanEnabled, enableLiveScan]);
+  const handleSettingsClick = useCallback2(() => {
+    if (showSettings) {
+      handleCloseSettings();
+    } else {
+      setShowSettings(true);
+      setShowResults(false);
     }
-    return /* @__PURE__ */ jsxs4("span", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-      /* @__PURE__ */ jsx5(CheckCircleIcon, {}),
-      /* @__PURE__ */ jsx5("span", { children: "0" })
-    ] });
-  };
+  }, [showSettings]);
+  const handleCloseSettings = useCallback2(() => {
+    setSettingsClosing(true);
+    setTimeout(() => {
+      setShowSettings(false);
+      setSettingsClosing(false);
+    }, 150);
+  }, []);
+  if (!mounted) return null;
+  const issueVariant = !liveScanEnabled ? "default" : hasIssues ? "warning" : isComplete ? "success" : "default";
+  const bottomPosition = nextjsOverlayVisible ? "80px" : "20px";
   const content = /* @__PURE__ */ jsxs4(
     "div",
     {
       "data-ui-lint": true,
       style: {
         position: "fixed",
-        bottom: "70px",
+        bottom: bottomPosition,
         left: "20px",
         zIndex: 99999,
-        fontFamily: STYLES.font
+        fontFamily: TOKENS.fontFamily,
+        transition: `bottom ${TOKENS.transitionSlow}`
       },
       children: [
-        /* @__PURE__ */ jsx5("style", { children: `
-        @keyframes uilint-fade-in {
-          from { opacity: 0; transform: translateY(8px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes uilint-spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      ` }),
+        /* @__PURE__ */ jsx5("style", { children: globalStyles }),
         /* @__PURE__ */ jsxs4(
           "div",
           {
+            className: `uilint-hint ${liveScanEnabled ? "uilint-hint--visible" : ""}`,
             style: {
               textAlign: "center",
-              marginBottom: "8px",
+              marginBottom: "10px",
               fontSize: "11px",
-              color: STYLES.textDim,
-              letterSpacing: "0.01em"
+              color: TOKENS.textMuted,
+              letterSpacing: "0.02em",
+              // Subtle dark halo for readability on any background
+              textShadow: `
+            0 0 4px rgba(0, 0, 0, 0.8),
+            0 0 8px rgba(0, 0, 0, 0.5),
+            0 1px 2px rgba(0, 0, 0, 0.9)
+          `
             },
+            "aria-hidden": !liveScanEnabled,
             children: [
-              /* @__PURE__ */ jsx5("span", { style: { color: STYLES.textMuted }, children: "\u2325+Click" }),
-              " to inspect"
+              /* @__PURE__ */ jsx5(
+                "kbd",
+                {
+                  style: {
+                    display: "inline-block",
+                    padding: "2px 5px",
+                    marginRight: "4px",
+                    borderRadius: "4px",
+                    backgroundColor: TOKENS.bgElevated,
+                    border: `1px solid ${TOKENS.border}`,
+                    fontSize: "10px",
+                    fontFamily: TOKENS.fontMono,
+                    color: TOKENS.textSecondary,
+                    boxShadow: `0 1px 3px rgba(0, 0, 0, 0.5)`
+                  },
+                  children: "\u2325"
+                }
+              ),
+              /* @__PURE__ */ jsx5("span", { children: "+ Click to inspect element" })
             ]
           }
         ),
@@ -987,144 +1531,85 @@ function UILintToolbar() {
           "div",
           {
             ref: toolbarRef,
+            role: "toolbar",
+            "aria-label": "UI Lint toolbar",
             style: {
               position: "relative",
               display: "inline-flex",
               alignItems: "center",
-              height: STYLES.pillHeight,
-              borderRadius: STYLES.pillRadius,
-              border: `1px solid ${STYLES.border}`,
-              backgroundColor: STYLES.bg,
-              backdropFilter: STYLES.blur,
-              WebkitBackdropFilter: STYLES.blur,
-              boxShadow: STYLES.shadow,
-              overflow: "hidden"
+              height: TOKENS.pillHeight,
+              borderRadius: TOKENS.pillRadius,
+              border: `1px solid ${TOKENS.border}`,
+              backgroundColor: TOKENS.bgBase,
+              backdropFilter: TOKENS.blur,
+              WebkitBackdropFilter: TOKENS.blur,
+              boxShadow: liveScanEnabled && hasIssues ? `${TOKENS.shadowMd}, ${TOKENS.shadowGlow(
+                `${TOKENS.warning}30`
+              )}` : TOKENS.shadowMd,
+              overflow: "hidden",
+              transition: `box-shadow ${TOKENS.transitionBase}`
             },
             children: [
               /* @__PURE__ */ jsx5(
-                "button",
+                ToolbarButton,
                 {
                   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
-                  }
+                  active: liveScanEnabled,
+                  title: liveScanEnabled ? "Stop scanning (\u2325S)" : "Start scanning (\u2325S)",
+                  ariaLabel: liveScanEnabled ? "Stop live scanning" : "Start live scanning",
+                  width: "48px",
+                  children: liveScanEnabled ? /* @__PURE__ */ jsx5(Icons.Eye, {}) : /* @__PURE__ */ jsx5(Icons.EyeOff, {})
                 }
               ),
+              /* @__PURE__ */ jsx5(Divider, {}),
               /* @__PURE__ */ jsx5(
-                "button",
+                ToolbarButton,
                 {
                   onClick: handleIssuesClick,
-                  disabled: !liveScanEnabled,
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: "4px",
-                    height: "100%",
-                    padding: "0 12px",
-                    border: "none",
-                    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: liveScanEnabled ? "pointer" : "default",
-                    transition: STYLES.transition,
-                    opacity: liveScanEnabled ? 1 : 0.6
-                  },
-                  onMouseEnter: (e) => {
-                    if (liveScanEnabled && !showResults) {
-                      e.currentTarget.style.backgroundColor = STYLES.bgSegmentHover;
+                  active: showResults && liveScanEnabled,
+                  variant: issueVariant,
+                  title: !liveScanEnabled ? "Click to enable scanning" : `${totalIssues} issue${totalIssues !== 1 ? "s" : ""} found`,
+                  ariaLabel: !liveScanEnabled ? "Enable scanning to see issues" : `View ${totalIssues} issues`,
+                  width: "auto",
+                  children: /* @__PURE__ */ jsx5("span", { style: { padding: "0 12px" }, children: /* @__PURE__ */ jsx5(
+                    ScanStatus,
+                    {
+                      status: autoScanState.status,
+                      issueCount: totalIssues,
+                      enabled: liveScanEnabled
                     }
-                  },
-                  onMouseLeave: (e) => {
-                    if (liveScanEnabled && !showResults) {
-                      e.currentTarget.style.backgroundColor = "transparent";
-                    }
-                  },
-                  title: liveScanEnabled ? `${totalIssues} issues found` : "Enable scanning to see issues",
-                  children: getIssuesContent()
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "div",
-                {
-                  style: {
-                    width: "1px",
-                    height: "20px",
-                    backgroundColor: STYLES.divider
-                  }
+                  ) })
                 }
               ),
+              /* @__PURE__ */ jsx5(Divider, {}),
               /* @__PURE__ */ jsx5(
-                "button",
+                ToolbarButton,
                 {
                   onClick: handleSettingsClick,
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    height: "100%",
-                    width: "40px",
-                    border: "none",
-                    backgroundColor: showSettings ? STYLES.bgSegmentHover : "transparent",
-                    color: showSettings ? STYLES.text : STYLES.textMuted,
-                    cursor: "pointer",
-                    transition: STYLES.transition
-                  },
-                  onMouseEnter: (e) => {
-                    if (!showSettings) {
-                      e.currentTarget.style.backgroundColor = STYLES.bgSegmentHover;
-                      e.currentTarget.style.color = STYLES.text;
-                    }
-                  },
-                  onMouseLeave: (e) => {
-                    if (!showSettings) {
-                      e.currentTarget.style.backgroundColor = "transparent";
-                      e.currentTarget.style.color = STYLES.textMuted;
-                    }
-                  },
+                  active: showSettings,
                   title: "Settings",
-                  children: /* @__PURE__ */ jsx5(EllipsisIcon, {})
+                  ariaLabel: "Open settings",
+                  width: "44px",
+                  children: /* @__PURE__ */ jsx5(Icons.Settings, {})
                 }
               )
             ]
           }
         ),
-        showSettings && /* @__PURE__ */ jsx5("div", { ref: settingsRef, children: /* @__PURE__ */ jsx5(SettingsPopover, { settings }) }),
+        showSettings && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            ref: settingsRef,
+            className: `uilint-popover ${settingsClosing ? "uilint-popover--closing" : ""}`,
+            style: {
+              position: "absolute",
+              bottom: "100%",
+              left: 0,
+              marginBottom: "8px"
+            },
+            children: /* @__PURE__ */ jsx5(SettingsPopover, { settings })
+          }
+        ),
         /* @__PURE__ */ jsx5(
           ScanPanelStack,
           {