uilint-react 0.2.1 → 0.2.4

package/dist/chunk-KKNPFLL2.js

@@ -1,1853 +0,0 @@
-"use client";
-import {
-  BADGE_COLORS,
-  Badge,
-  fetchSource,
-  getCachedSource
-} from "./chunk-S4IWHBOQ.js";
-import {
-  groupBySourceFile,
-  useUILintContext,
-  useUILintStore
-} from "./chunk-552GIJIQ.js";
-
-// src/components/ui-lint/UILintToolbar.tsx
-import React3, { 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
-var STYLES = {
-  // Backgrounds
-  bg: "rgba(17, 24, 39, 0.92)",
-  bgHover: "rgba(31, 41, 55, 0.95)",
-  bgSegment: "rgba(31, 41, 55, 0.6)",
-  bgSegmentHover: "rgba(55, 65, 81, 0.8)",
-  bgPopover: "rgba(17, 24, 39, 0.96)",
-  // Borders
-  border: "rgba(75, 85, 99, 0.5)",
-  borderLight: "rgba(107, 114, 128, 0.3)",
-  divider: "rgba(75, 85, 99, 0.4)",
-  // Text
-  text: "#F9FAFB",
-  textMuted: "#9CA3AF",
-  textDim: "#6B7280",
-  // Accent colors
-  accent: "#3B82F6",
-  accentHover: "#2563EB",
-  accentLight: "rgba(59, 130, 246, 0.15)",
-  // Status colors
-  success: "#10B981",
-  successLight: "rgba(16, 185, 129, 0.15)",
-  warning: "#F59E0B",
-  warningLight: "rgba(245, 158, 11, 0.15)",
-  error: "#EF4444",
-  errorLight: "rgba(239, 68, 68, 0.15)",
-  // Badge colors
-  badgeBg: "#3B82F6",
-  badgeText: "#FFFFFF",
-  // Effects
-  shadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
-  shadowLg: "0 12px 48px rgba(0, 0, 0, 0.5)",
-  blur: "blur(12px)",
-  // Typography
-  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-  // Sizing
-  pillHeight: "40px",
-  pillRadius: "20px",
-  popoverRadius: "12px",
-  buttonRadius: "8px",
-  // Transitions
-  transition: "all 0.15s ease-out",
-  transitionFast: "all 0.1s ease-out"
-};
-
-// src/components/ui-lint/SettingsPopover.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function SettingsPopover({ settings }) {
-  const wsConnected = useUILintStore((s) => s.wsConnected);
-  const wsUrl = useUILintStore((s) => s.wsUrl);
-  const connectWebSocket = useUILintStore(
-    (s) => s.connectWebSocket
-  );
-  const disconnectWebSocket = useUILintStore(
-    (s) => s.disconnectWebSocket
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        bottom: "100%",
-        left: 0,
-        marginBottom: "8px",
-        width: "260px",
-        padding: "14px",
-        borderRadius: STYLES.popoverRadius,
-        border: `1px solid ${STYLES.border}`,
-        backgroundColor: STYLES.bgPopover,
-        backdropFilter: STYLES.blur,
-        WebkitBackdropFilter: STYLES.blur,
-        boxShadow: STYLES.shadowLg,
-        animation: "uilint-fade-in 0.15s ease-out"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: "12px",
-              fontWeight: 600,
-              color: STYLES.text,
-              marginBottom: "12px"
-            },
-            children: "UILint Settings"
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              padding: "10px 12px",
-              borderRadius: STYLES.buttonRadius,
-              border: `1px solid ${STYLES.border}`,
-              backgroundColor: STYLES.bgSegment
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    marginBottom: "8px"
-                  },
-                  children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          width: "8px",
-                          height: "8px",
-                          borderRadius: "50%",
-                          backgroundColor: wsConnected ? STYLES.success : STYLES.error,
-                          boxShadow: wsConnected ? `0 0 8px ${STYLES.success}` : `0 0 8px ${STYLES.error}`
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "12px",
-                          fontWeight: 600,
-                          color: wsConnected ? STYLES.success : STYLES.error
-                        },
-                        children: wsConnected ? "Connected" : "Disconnected"
-                      }
-                    )
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: "10px",
-                    color: STYLES.textDim,
-                    fontFamily: STYLES.fontMono,
-                    wordBreak: "break-all",
-                    marginBottom: "10px"
-                  },
-                  children: wsUrl
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => connectWebSocket(wsUrl),
-                    style: {
-                      flex: 1,
-                      padding: "6px 10px",
-                      borderRadius: "6px",
-                      border: `1px solid ${STYLES.border}`,
-                      backgroundColor: wsConnected ? "transparent" : STYLES.accent,
-                      color: wsConnected ? STYLES.textMuted : "#FFFFFF",
-                      fontSize: "11px",
-                      fontWeight: 600,
-                      cursor: "pointer",
-                      transition: STYLES.transitionFast
-                    },
-                    title: "Reconnect to WebSocket server",
-                    children: wsConnected ? "Reconnect" : "Connect"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => disconnectWebSocket(),
-                    disabled: !wsConnected,
-                    style: {
-                      padding: "6px 10px",
-                      borderRadius: "6px",
-                      border: `1px solid ${STYLES.border}`,
-                      backgroundColor: "transparent",
-                      color: wsConnected ? STYLES.textMuted : STYLES.textDim,
-                      fontSize: "11px",
-                      fontWeight: 600,
-                      cursor: wsConnected ? "pointer" : "not-allowed",
-                      opacity: wsConnected ? 1 : 0.5,
-                      transition: STYLES.transitionFast
-                    },
-                    title: "Disconnect from WebSocket server",
-                    children: "Disconnect"
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              marginTop: "12px",
-              fontSize: "11px",
-              color: STYLES.textMuted,
-              lineHeight: 1.5
-            },
-            children: [
-              /* @__PURE__ */ jsx("strong", { style: { color: STYLES.text }, children: "\u2325+Click" }),
-              " any element to open the inspector sidebar"
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/components/ui-lint/ScanPanelStack.tsx
-import { useRef, useEffect as useEffect2 } from "react";
-
-// src/components/ui-lint/ScanResultsPopover.tsx
-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";
-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 { Fragment, 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({ onClose }) {
-  const { autoScanState, liveScanEnabled } = useUILintContext();
-  const elementIssuesCache = useUILintStore(
-    (s) => s.elementIssuesCache
-  );
-  const fileIssuesCache = useUILintStore((s) => s.fileIssuesCache);
-  const setLocatorTarget = useUILintStore(
-    (s) => s.setLocatorTarget
-  );
-  const setInspectedElement = useUILintStore(
-    (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 allFilesWithIssues = useMemo(() => {
-    const sourceFiles = groupBySourceFile(autoScanState.elements);
-    const allPaths = sourceFiles.map((sf) => sf.path);
-    const filePathsSet = new Set(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) {
-          const ruleIds = Array.from(
-            new Set(
-              (cached?.issues || []).map((i) => i.ruleId).filter((r) => typeof r === "string")
-            )
-          );
-          elementsWithIssues.push({ element: el, issueCount, ruleIds });
-        }
-      }
-      const fileLevelIssues = fileIssuesCache.get(sf.path) || [];
-      const elementIssueCount = elementsWithIssues.reduce(
-        (sum, e) => sum + e.issueCount,
-        0
-      );
-      const totalIssues2 = elementIssueCount + fileLevelIssues.length;
-      if (totalIssues2 > 0) {
-        elementsWithIssues.sort(
-          (a, b) => a.element.source.lineNumber - b.element.source.lineNumber
-        );
-        result.push({
-          path: sf.path,
-          displayName: sf.displayName,
-          disambiguatedName: getDisambiguatedName(sf.path, allPaths),
-          issueCount: totalIssues2,
-          elementsWithIssues,
-          fileLevelIssues
-        });
-      }
-    }
-    for (const [filePath, fileLevelIssues] of fileIssuesCache.entries()) {
-      if (!filePathsSet.has(filePath) && fileLevelIssues.length > 0) {
-        const parts = filePath.split("/");
-        const displayName = parts[parts.length - 1] || filePath;
-        const allPaths2 = Array.from(filePathsSet).concat([filePath]);
-        result.push({
-          path: filePath,
-          displayName,
-          disambiguatedName: getDisambiguatedName(filePath, allPaths2),
-          issueCount: fileLevelIssues.length,
-          elementsWithIssues: [],
-          fileLevelIssues
-        });
-      }
-    }
-    result.sort((a, b) => b.issueCount - a.issueCount);
-    return result;
-  }, [autoScanState.elements, elementIssuesCache, fileIssuesCache]);
-  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) => {
-      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]
-  );
-  const handleFileLevelIssueClick = useCallback(
-    (filePath, issue) => {
-      const dummyElement = document.createElement("div");
-      dummyElement.style.position = "fixed";
-      dummyElement.style.top = "-9999px";
-      dummyElement.style.left = "-9999px";
-      document.body.appendChild(dummyElement);
-      const source = {
-        fileName: filePath,
-        lineNumber: issue.line,
-        columnNumber: issue.column
-      };
-      setInspectedElement({
-        element: dummyElement,
-        source,
-        rect: new DOMRect(0, 0, 0, 0)
-      });
-    },
-    [setInspectedElement]
-  );
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      "data-ui-lint": true,
-      style: {
-        position: "relative",
-        width: "320px",
-        maxHeight: "450px",
-        borderRadius: STYLES.popoverRadius,
-        border: `1px solid ${STYLES.border}`,
-        backgroundColor: STYLES.bgPopover,
-        backdropFilter: STYLES.blur,
-        WebkitBackdropFilter: STYLES.blur,
-        boxShadow: STYLES.shadowLg,
-        animation: "uilint-fade-in 0.15s ease-out",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              padding: "12px 14px",
-              borderBottom: `1px solid ${STYLES.border}`
-            },
-            children: [
-              /* @__PURE__ */ jsxs3(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx3(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "12px",
-                          fontWeight: 600,
-                          color: STYLES.text
-                        },
-                        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"}`
-                      }
-                    ),
-                    /* @__PURE__ */ jsx3(
-                      "button",
-                      {
-                        onClick: onClose,
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          width: "26px",
-                          height: "26px",
-                          borderRadius: "6px",
-                          border: "none",
-                          backgroundColor: "transparent",
-                          color: STYLES.textMuted,
-                          cursor: "pointer",
-                          transition: "all 0.15s"
-                        },
-                        onMouseEnter: (e) => {
-                          e.currentTarget.style.backgroundColor = "rgba(55, 65, 81, 0.5)";
-                          e.currentTarget.style.color = STYLES.text;
-                        },
-                        onMouseLeave: (e) => {
-                          e.currentTarget.style.backgroundColor = "transparent";
-                          e.currentTarget.style.color = STYLES.textMuted;
-                        },
-                        title: "Close",
-                        children: /* @__PURE__ */ jsx3(CloseIcon, {})
-                      }
-                    )
-                  ]
-                }
-              ),
-              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",
-                  {
-                    style: {
-                      display: "flex",
-                      justifyContent: "space-between",
-                      fontSize: "10px",
-                      color: STYLES.textMuted,
-                      marginBottom: "4px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx3("span", { children: "Scanning..." }),
-                      /* @__PURE__ */ jsxs3("span", { children: [
-                        autoScanState.currentIndex,
-                        " / ",
-                        autoScanState.totalElements
-                      ] })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx3(
-                  "div",
-                  {
-                    style: {
-                      height: "3px",
-                      backgroundColor: "rgba(75, 85, 99, 0.5)",
-                      borderRadius: "2px",
-                      overflow: "hidden"
-                    },
-                    children: /* @__PURE__ */ jsx3(
-                      "div",
-                      {
-                        style: {
-                          height: "100%",
-                          width: `${progress}%`,
-                          backgroundColor: STYLES.accent,
-                          transition: "width 0.2s ease-out"
-                        }
-                      }
-                    )
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              flex: 1,
-              overflowY: "auto",
-              padding: "4px 0"
-            },
-            onMouseLeave: () => handleElementHover(null),
-            children: filesWithIssues.length === 0 ? /* @__PURE__ */ jsx3(
-              "div",
-              {
-                style: {
-                  padding: "24px 14px",
-                  textAlign: "center",
-                  fontSize: "11px",
-                  color: STYLES.textMuted
-                },
-                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,
-              {
-                file,
-                isExpanded: expandedFiles.has(file.path),
-                onToggle: () => toggleFile(file.path),
-                onElementHover: handleElementHover,
-                onElementClick: handleElementClick,
-                onFileLevelIssueClick: handleFileLevelIssueClick
-              },
-              file.path
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
-function FileRow({
-  file,
-  isExpanded,
-  onToggle,
-  onElementHover,
-  onElementClick,
-  onFileLevelIssueClick
-}) {
-  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(Badge, { count: file.issueCount, size: "medium" })
-        ]
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        style: {
-          backgroundColor: "rgba(17, 24, 39, 0.4)",
-          borderTop: `1px solid ${STYLES.border}`,
-          borderBottom: `1px solid ${STYLES.border}`
-        },
-        children: [
-          file.fileLevelIssues.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                style: {
-                  padding: "6px 12px 4px 34px",
-                  fontSize: "10px",
-                  fontWeight: 600,
-                  color: STYLES.textMuted,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.5px"
-                },
-                children: "File-level issues"
-              }
-            ),
-            file.fileLevelIssues.map((issue, index) => /* @__PURE__ */ jsx3(
-              FileLevelIssueRow,
-              {
-                filePath: file.path,
-                issue,
-                onClick: () => onFileLevelIssueClick(file.path, issue)
-              },
-              `${issue.line}-${issue.column}-${index}`
-            )),
-            file.elementsWithIssues.length > 0 && /* @__PURE__ */ jsx3(
-              "div",
-              {
-                style: {
-                  height: "1px",
-                  backgroundColor: STYLES.border,
-                  margin: "4px 12px"
-                }
-              }
-            )
-          ] }),
-          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: {
-              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(Badge, { count: issueCount, size: "small" })
-      ]
-    }
-  );
-}
-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",
-    {
-      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)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = "transparent";
-      },
-      onClick,
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "4px",
-              flex: 1,
-              marginRight: "12px"
-            },
-            children: [
-              tagName && /* @__PURE__ */ jsxs3(
-                "span",
-                {
-                  style: {
-                    fontSize: "11px",
-                    fontFamily: STYLES.fontMono,
-                    color: STYLES.accent
-                  },
-                  children: [
-                    "<",
-                    tagName,
-                    ">"
-                  ]
-                }
-              ),
-              !tagName && /* @__PURE__ */ jsx3(
-                "span",
-                {
-                  style: {
-                    fontSize: "11px",
-                    fontFamily: STYLES.fontMono,
-                    color: STYLES.textMuted
-                  },
-                  children: fileName
-                }
-              ),
-              /* @__PURE__ */ jsxs3(
-                "span",
-                {
-                  style: {
-                    fontSize: "10px",
-                    color: STYLES.textDim
-                  },
-                  children: [
-                    ":",
-                    issue.line,
-                    issue.column ? `:${issue.column}` : ""
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx3(Badge, { count: 1, size: "small" })
-      ]
-    }
-  );
-}
-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"
-    }
-  ) });
-}
-function CloseIcon() {
-  return /* @__PURE__ */ jsx3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(
-    "path",
-    {
-      d: "M18 6L6 18M6 6l12 12",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-
-// src/components/ui-lint/ScanPanelStack.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function ScanPanelStack({ show, onClose }) {
-  const containerRef = useRef(null);
-  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)) {
-        onClose();
-      }
-    };
-    const timeoutId = setTimeout(() => {
-      document.addEventListener("mousedown", handleClickOutside, true);
-    }, 100);
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener("mousedown", handleClickOutside, true);
-    };
-  }, [show, onClose]);
-  useEffect2(() => {
-    if (!show) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        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,
-      onPointerDown: handleUILintInteraction,
-      onClick: handleUILintInteraction,
-      onKeyDown: handleUILintInteraction,
-      style: {
-        position: "absolute",
-        bottom: "100%",
-        left: 0,
-        marginBottom: "8px",
-        pointerEvents: "auto"
-        // Ensure panel is interactive
-      },
-      children: /* @__PURE__ */ jsx4(ScanResultsPopover, { onClose })
-    }
-  );
-}
-
-// src/components/ui-lint/UILintToolbar.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var TOKENS = {
-  // Colors
-  bgBase: "rgba(15, 15, 15, 0.92)",
-  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",
-  success: BADGE_COLORS.success,
-  warning: BADGE_COLORS.warning,
-  error: "#f56565",
-  fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,
-  fontMono: `"SF Mono", Monaco, "Cascadia Code", monospace`,
-  pillHeight: "40px",
-  pillRadius: "20px",
-  buttonMinWidth: "40px",
-  blur: "blur(16px)",
-  shadowMd: "0 4px 20px rgba(0, 0, 0, 0.4)",
-  shadowGlow: (color) => `0 0 16px ${color}`,
-  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: "16",
-      height: "16",
-      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" })
-      ]
-    }
-  ),
-  Settings: () => /* @__PURE__ */ jsxs4(
-    "svg",
-    {
-      width: "15",
-      height: "15",
-      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" })
-      ]
-    }
-  ),
-  Check: () => /* @__PURE__ */ jsx5(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      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: "12",
-      height: "12",
-      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" })
-      ]
-    }
-  ),
-  ChevronDown: () => /* @__PURE__ */ jsx5(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx5("polyline", { points: "6 9 12 15 18 9" })
-    }
-  ),
-  X: () => /* @__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("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ]
-    }
-  ),
-  Unplug: () => /* @__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: "M19 5l3-3" }),
-        /* @__PURE__ */ jsx5("path", { d: "M2 22l3-3" }),
-        /* @__PURE__ */ jsx5("path", { d: "M6.3 6.3a10 10 0 0 1 13.4 1.3" }),
-        /* @__PURE__ */ jsx5("path", { d: "M17.7 17.7a10 10 0 0 1-13.4-1.3" }),
-        /* @__PURE__ */ jsx5("path", { d: "m8 15 8-8" })
-      ]
-    }
-  ),
-  Scan: () => /* @__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: "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" })
-      ]
-    }
-  )
-};
-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.6; }
-  }
-  
-  @keyframes uilint-slide-up {
-    from { opacity: 0; transform: translateY(12px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-  
-  .uilint-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    height: 100%;
-    padding: 0 14px;
-    border: none;
-    background: transparent;
-    color: ${TOKENS.textSecondary};
-    font-family: ${TOKENS.fontFamily};
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: 
-      background-color ${TOKENS.transitionFast},
-      color ${TOKENS.transitionFast};
-    outline: none;
-    white-space: nowrap;
-  }
-  
-  .uilint-btn:hover:not(:disabled) {
-    background: ${TOKENS.bgHover};
-    color: ${TOKENS.textPrimary};
-  }
-  
-  .uilint-btn:active:not(:disabled) {
-    background: ${TOKENS.bgActive};
-  }
-  
-  .uilint-btn:focus-visible {
-    box-shadow: inset 0 0 0 2px ${TOKENS.borderFocus};
-  }
-  
-  .uilint-btn:disabled {
-    cursor: not-allowed;
-    color: ${TOKENS.textDisabled};
-  }
-  
-  .uilint-btn--icon {
-    padding: 0;
-    min-width: ${TOKENS.buttonMinWidth};
-  }
-  
-  .uilint-btn--primary {
-    color: ${TOKENS.textPrimary};
-  }
-  
-  .uilint-btn--accent {
-    color: ${TOKENS.accent};
-  }
-  
-  .uilint-btn--warning {
-    color: ${TOKENS.warning};
-  }
-  
-  .uilint-btn--success {
-    color: ${TOKENS.success};
-  }
-  
-  .uilint-popover {
-    animation: uilint-fade-in ${TOKENS.transitionSlow} forwards;
-  }
-  
-  .uilint-popover--closing {
-    animation: uilint-fade-out ${TOKENS.transitionBase} forwards;
-  }
-  
-  .uilint-scanning-bar {
-    animation: uilint-slide-up ${TOKENS.transitionSlow} forwards;
-  }
-  
-  .uilint-scanning-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: ${TOKENS.accent};
-    animation: uilint-pulse 1.5s ease-in-out infinite;
-  }
-
-  /* Scrollbar styling */
-  [data-ui-lint] * {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.15) rgba(15, 15, 15, 0.3);
-  }
-  
-  [data-ui-lint] *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  
-  [data-ui-lint] *::-webkit-scrollbar-track {
-    background: rgba(15, 15, 15, 0.3);
-    border-radius: 4px;
-  }
-  
-  [data-ui-lint] *::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 4px;
-  }
-  
-  [data-ui-lint] *::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.25);
-  }
-`;
-var PillContainer = React3.forwardRef(({ children, glow, style }, ref) => /* @__PURE__ */ jsx5(
-  "div",
-  {
-    ref,
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      height: TOKENS.pillHeight,
-      borderRadius: TOKENS.pillRadius,
-      border: `1px solid ${TOKENS.border}`,
-      backgroundColor: TOKENS.bgBase,
-      backdropFilter: TOKENS.blur,
-      WebkitBackdropFilter: TOKENS.blur,
-      boxShadow: glow ? `${TOKENS.shadowMd}, ${TOKENS.shadowGlow(glow)}` : TOKENS.shadowMd,
-      overflow: "hidden",
-      transition: `box-shadow ${TOKENS.transitionBase}`,
-      ...style
-    },
-    children
-  }
-));
-PillContainer.displayName = "PillContainer";
-function Divider() {
-  return /* @__PURE__ */ jsx5(
-    "div",
-    {
-      style: {
-        width: "1px",
-        height: "20px",
-        backgroundColor: TOKENS.border,
-        flexShrink: 0
-      },
-      "aria-hidden": "true"
-    }
-  );
-}
-function Kbd({ children }) {
-  return /* @__PURE__ */ jsx5(
-    "kbd",
-    {
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        padding: "2px 6px",
-        borderRadius: "4px",
-        backgroundColor: TOKENS.bgElevated,
-        border: `1px solid ${TOKENS.border}`,
-        fontSize: "11px",
-        fontFamily: TOKENS.fontMono,
-        color: TOKENS.textSecondary,
-        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.4)"
-      },
-      children
-    }
-  );
-}
-function DisconnectedToolbar({
-  onSettingsClick,
-  showSettings
-}) {
-  return /* @__PURE__ */ jsxs4(PillContainer, { children: [
-    /* @__PURE__ */ jsxs4(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "6px",
-          padding: "0 12px",
-          color: TOKENS.textMuted,
-          fontSize: "12px"
-        },
-        children: [
-          /* @__PURE__ */ jsx5(Icons.Unplug, {}),
-          /* @__PURE__ */ jsx5("span", { children: "Not connected" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx5(Divider, {}),
-    /* @__PURE__ */ jsx5(
-      "button",
-      {
-        className: `uilint-btn uilint-btn--icon ${showSettings ? "uilint-btn--accent" : ""}`,
-        onClick: onSettingsClick,
-        title: "Settings",
-        "aria-label": "Open settings",
-        "aria-pressed": showSettings,
-        children: /* @__PURE__ */ jsx5(Icons.Settings, {})
-      }
-    )
-  ] });
-}
-function IdleToolbar({
-  onStartScan,
-  onSettingsClick,
-  showSettings
-}) {
-  return /* @__PURE__ */ jsxs4(PillContainer, { children: [
-    /* @__PURE__ */ jsxs4(
-      "button",
-      {
-        className: "uilint-btn uilint-btn--primary",
-        onClick: onStartScan,
-        title: "Start scanning (\u2325S)",
-        "aria-label": "Start live scanning",
-        children: [
-          /* @__PURE__ */ jsx5(Icons.Eye, {}),
-          /* @__PURE__ */ jsx5("span", { children: "Start Scanning" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx5(Divider, {}),
-    /* @__PURE__ */ jsx5(
-      "button",
-      {
-        className: `uilint-btn uilint-btn--icon ${showSettings ? "uilint-btn--accent" : ""}`,
-        onClick: onSettingsClick,
-        title: "Settings",
-        "aria-label": "Open settings",
-        "aria-pressed": showSettings,
-        children: /* @__PURE__ */ jsx5(Icons.Settings, {})
-      }
-    )
-  ] });
-}
-function ScanningToolbar({
-  issueCount,
-  isScanning,
-  showResults,
-  onToggleResults,
-  onStopScan
-}) {
-  const hasIssues = issueCount > 0;
-  const getStatusContent = () => {
-    if (isScanning) {
-      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsx5("div", { className: "uilint-scanning-dot" }),
-        /* @__PURE__ */ jsx5("span", { style: { fontFamily: TOKENS.fontMono, fontSize: "12px" }, children: "Scanning..." })
-      ] });
-    }
-    if (hasIssues) {
-      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsx5(
-          "span",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "16px",
-              height: "16px",
-              borderRadius: "50%",
-              backgroundColor: `${TOKENS.warning}20`,
-              color: TOKENS.warning
-            },
-            children: /* @__PURE__ */ jsx5(Icons.AlertTriangle, {})
-          }
-        ),
-        /* @__PURE__ */ jsx5(Badge, { count: issueCount })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx5(
-        "span",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "16px",
-            height: "16px",
-            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: "All clear"
-        }
-      )
-    ] });
-  };
-  const statusVariant = hasIssues ? "warning" : isScanning ? "accent" : "success";
-  const glowColor = hasIssues ? `${TOKENS.warning}25` : void 0;
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: "uilint-scanning-bar",
-      style: { display: "flex", alignItems: "center", gap: "10px" },
-      children: [
-        /* @__PURE__ */ jsxs4(PillContainer, { glow: glowColor, children: [
-          /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              className: `uilint-btn uilint-btn--${statusVariant}`,
-              onClick: onToggleResults,
-              title: hasIssues ? `${issueCount} issue${issueCount !== 1 ? "s" : ""} found` : "View scan results",
-              "aria-label": "Toggle scan results",
-              "aria-expanded": showResults,
-              style: { paddingRight: "10px" },
-              children: [
-                getStatusContent(),
-                /* @__PURE__ */ jsx5(Icons.ChevronDown, {})
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx5(Divider, {}),
-          /* @__PURE__ */ jsx5(
-            "button",
-            {
-              className: "uilint-btn uilint-btn--icon",
-              onClick: onStopScan,
-              title: "Stop scanning (\u2325S)",
-              "aria-label": "Stop scanning",
-              children: /* @__PURE__ */ jsx5(Icons.X, {})
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx5(Kbd, { children: "\u2325 + Click" }),
-        /* @__PURE__ */ jsx5("span", { style: { fontSize: "12px", color: TOKENS.textMuted }, children: "to inspect" })
-      ]
-    }
-  );
-}
-function UILintToolbar() {
-  const {
-    settings,
-    liveScanEnabled,
-    autoScanState,
-    enableLiveScan,
-    disableLiveScan
-  } = useUILintContext();
-  const elementIssuesCache = useUILintStore(
-    (s) => s.elementIssuesCache
-  );
-  const fileIssuesCache = useUILintStore((s) => s.fileIssuesCache);
-  const wsConnected = useUILintStore((s) => s.wsConnected);
-  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);
-  const isScanning = autoScanState.status === "scanning" || autoScanState.status === "paused";
-  let elementIssues = 0;
-  elementIssuesCache.forEach((el) => {
-    elementIssues += el.issues.length;
-  });
-  let fileLevelIssues = 0;
-  fileIssuesCache.forEach((issues) => {
-    fileLevelIssues += issues.length;
-  });
-  const totalIssues = elementIssues + fileLevelIssues;
-  useEffect3(() => {
-    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();
-  }, []);
-  useEffect3(() => {
-    setMounted(true);
-  }, []);
-  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();
-        }
-      }
-      if (showResults) {
-        setShowResults(false);
-      }
-    };
-    const handleEscape = (e) => {
-      if (e.key === "Escape") {
-        if (showSettings) handleCloseSettings();
-        if (showResults) setShowResults(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside, true);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside, true);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [showSettings, showResults]);
-  const handleStartScan = useCallback2(() => {
-    enableLiveScan();
-    setShowSettings(false);
-  }, [enableLiveScan]);
-  const handleStopScan = useCallback2(() => {
-    disableLiveScan();
-    setShowResults(false);
-  }, [disableLiveScan]);
-  const handleSettingsClick = useCallback2(() => {
-    if (showSettings) {
-      handleCloseSettings();
-    } else {
-      setShowSettings(true);
-    }
-  }, [showSettings]);
-  const handleCloseSettings = useCallback2(() => {
-    setSettingsClosing(true);
-    setTimeout(() => {
-      setShowSettings(false);
-      setSettingsClosing(false);
-    }, 150);
-  }, []);
-  const handleToggleResults = useCallback2(() => {
-    setShowResults((prev) => !prev);
-  }, []);
-  const handleUILintInteraction = useCallback2(
-    (e) => {
-      e.stopPropagation();
-    },
-    []
-  );
-  if (!mounted) return null;
-  const bottomPosition = nextjsOverlayVisible ? "80px" : "20px";
-  const renderToolbar = () => {
-    if (!wsConnected) {
-      return /* @__PURE__ */ jsx5(
-        DisconnectedToolbar,
-        {
-          onSettingsClick: handleSettingsClick,
-          showSettings
-        }
-      );
-    }
-    if (!liveScanEnabled) {
-      return /* @__PURE__ */ jsx5(
-        IdleToolbar,
-        {
-          onStartScan: handleStartScan,
-          onSettingsClick: handleSettingsClick,
-          showSettings
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx5(
-      ScanningToolbar,
-      {
-        issueCount: totalIssues,
-        isScanning,
-        showResults,
-        onToggleResults: handleToggleResults,
-        onStopScan: handleStopScan
-      }
-    );
-  };
-  const content = /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      "data-ui-lint": true,
-      onMouseDown: handleUILintInteraction,
-      onPointerDown: handleUILintInteraction,
-      onClick: handleUILintInteraction,
-      onKeyDown: handleUILintInteraction,
-      style: {
-        position: "fixed",
-        bottom: bottomPosition,
-        left: "20px",
-        zIndex: 99999,
-        fontFamily: TOKENS.fontFamily,
-        transition: `bottom ${TOKENS.transitionSlow}`,
-        pointerEvents: "none"
-      },
-      children: [
-        /* @__PURE__ */ jsx5("style", { children: globalStyles }),
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            ref: toolbarRef,
-            role: "toolbar",
-            "aria-label": "UI Lint toolbar",
-            style: { pointerEvents: "auto" },
-            children: renderToolbar()
-          }
-        ),
-        showSettings && !liveScanEnabled && /* @__PURE__ */ jsx5(
-          "div",
-          {
-            ref: settingsRef,
-            className: `uilint-popover ${settingsClosing ? "uilint-popover--closing" : ""}`,
-            style: {
-              position: "absolute",
-              bottom: "100%",
-              left: 0,
-              marginBottom: "8px",
-              pointerEvents: "auto"
-            },
-            children: /* @__PURE__ */ jsx5(SettingsPopover, { settings })
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          ScanPanelStack,
-          {
-            show: showResults && liveScanEnabled,
-            onClose: () => setShowResults(false)
-          }
-        )
-      ]
-    }
-  );
-  return createPortal(content, document.body);
-}
-
-export {
-  UILintToolbar
-};