uilint-react 0.1.37 → 0.1.38

package/dist/chunk-WEBVLQL5.js

@@ -0,0 +1,911 @@
+"use client";
+import {
+  groupBySourceFile,
+  useUILintContext,
+  useUILintStore
+} from "./chunk-PU6XPNPN.js";
+
+// src/components/ui-lint/UILintToolbar.tsx
+import { useState, useRef, useEffect, useCallback } 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"
+};
+function getStatusColor(issueCount) {
+  if (issueCount === 0) return STYLES.success;
+  if (issueCount <= 2) return STYLES.warning;
+  return STYLES.error;
+}
+
+// src/components/ui-lint/toolbar-icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PauseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", fill: "currentColor" })
+  ] });
+}
+function PlayIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7L8 5z", fill: "currentColor" }) });
+}
+function StopIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1", fill: "currentColor" }) });
+}
+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 MagnifyingGlassIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "11",
+        cy: "11",
+        r: "7",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M21 21l-4.35-4.35",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function CheckCircleIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__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"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui-lint/SettingsPopover.tsx
+import { jsx as jsx2, jsxs as jsxs2 } 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__ */ jsxs2(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: "100%",
+        right: 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__ */ jsx2(
+          "div",
+          {
+            style: {
+              fontSize: "12px",
+              fontWeight: 600,
+              color: STYLES.text,
+              marginBottom: "12px"
+            },
+            children: "UILint Settings"
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              padding: "10px 12px",
+              borderRadius: STYLES.buttonRadius,
+              border: `1px solid ${STYLES.border}`,
+              backgroundColor: STYLES.bgSegment
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    marginBottom: "8px"
+                  },
+                  children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                    /* @__PURE__ */ jsx2(
+                      "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__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          fontWeight: 600,
+                          color: wsConnected ? STYLES.success : STYLES.error
+                        },
+                        children: wsConnected ? "Connected" : "Disconnected"
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    fontSize: "10px",
+                    color: STYLES.textDim,
+                    fontFamily: STYLES.fontMono,
+                    wordBreak: "break-all",
+                    marginBottom: "10px"
+                  },
+                  children: wsUrl
+                }
+              ),
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx2(
+                  "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__ */ jsx2(
+                  "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__ */ jsxs2(
+          "div",
+          {
+            style: {
+              marginTop: "12px",
+              fontSize: "11px",
+              color: STYLES.textMuted,
+              lineHeight: 1.5
+            },
+            children: [
+              /* @__PURE__ */ jsx2("strong", { style: { color: STYLES.text }, children: "\u2325+Click" }),
+              " any element to open the inspector sidebar"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui-lint/ScanResultsPopover.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ScanResultsPopover() {
+  const {
+    autoScanState,
+    pauseAutoScan,
+    resumeAutoScan,
+    stopAutoScan
+  } = useUILintContext();
+  const elementIssuesCache = useUILintStore(
+    (s) => s.elementIssuesCache
+  );
+  const isScanning = autoScanState.status === "scanning";
+  const isPaused = autoScanState.status === "paused";
+  const isComplete = autoScanState.status === "complete";
+  const sourceFiles = groupBySourceFile(autoScanState.elements);
+  const fileResults = sourceFiles.map((sf) => {
+    let issueCount = 0;
+    for (const el of sf.elements) {
+      const cached = elementIssuesCache.get(el.id);
+      if (cached) {
+        issueCount += cached.issues.length;
+      }
+    }
+    return {
+      path: sf.path,
+      displayName: sf.displayName,
+      issueCount,
+      elementCount: sf.elements.length
+    };
+  });
+  fileResults.sort((a, b) => {
+    if (b.issueCount !== a.issueCount) {
+      return b.issueCount - a.issueCount;
+    }
+    return a.displayName.localeCompare(b.displayName);
+  });
+  const totalFiles = fileResults.length;
+  const totalIssues = fileResults.reduce((sum, f) => sum + f.issueCount, 0);
+  const filesWithIssues = fileResults.filter((f) => f.issueCount > 0).length;
+  const progress = autoScanState.totalElements > 0 ? autoScanState.currentIndex / autoScanState.totalElements * 100 : 0;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: "100%",
+        right: 0,
+        marginBottom: "8px",
+        width: "280px",
+        maxHeight: "400px",
+        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__ */ jsxs3(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          fontWeight: 600,
+                          color: STYLES.text
+                        },
+                        children: [
+                          totalFiles,
+                          " files \xB7 ",
+                          totalIssues,
+                          " issues"
+                        ]
+                      }
+                    ),
+                    (isScanning || isPaused) && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "4px" }, children: [
+                      isScanning && /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          onClick: pauseAutoScan,
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "24px",
+                            height: "24px",
+                            borderRadius: "6px",
+                            border: `1px solid ${STYLES.border}`,
+                            backgroundColor: "transparent",
+                            color: STYLES.textMuted,
+                            cursor: "pointer",
+                            transition: STYLES.transitionFast
+                          },
+                          title: "Pause scan",
+                          children: /* @__PURE__ */ jsx3(PauseIcon, {})
+                        }
+                      ),
+                      isPaused && /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          onClick: resumeAutoScan,
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "24px",
+                            height: "24px",
+                            borderRadius: "6px",
+                            border: "none",
+                            backgroundColor: STYLES.accent,
+                            color: "#FFFFFF",
+                            cursor: "pointer",
+                            transition: STYLES.transitionFast
+                          },
+                          title: "Resume scan",
+                          children: /* @__PURE__ */ jsx3(PlayIcon, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          onClick: stopAutoScan,
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "24px",
+                            height: "24px",
+                            borderRadius: "6px",
+                            border: `1px solid ${STYLES.border}`,
+                            backgroundColor: "transparent",
+                            color: STYLES.textMuted,
+                            cursor: "pointer",
+                            transition: STYLES.transitionFast
+                          },
+                          title: "Stop scan",
+                          children: /* @__PURE__ */ jsx3(StopIcon, {})
+                        }
+                      )
+                    ] }),
+                    isComplete && /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        onClick: stopAutoScan,
+                        style: {
+                          padding: "4px 8px",
+                          borderRadius: "6px",
+                          border: `1px solid ${STYLES.border}`,
+                          backgroundColor: "transparent",
+                          color: STYLES.textMuted,
+                          fontSize: "10px",
+                          fontWeight: 500,
+                          cursor: "pointer",
+                          transition: STYLES.transitionFast
+                        },
+                        title: "Clear results",
+                        children: "Clear"
+                      }
+                    )
+                  ]
+                }
+              ),
+              (isScanning || isPaused) && /* @__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: isPaused ? "Paused" : "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: isPaused ? STYLES.warning : STYLES.accent,
+                          transition: "width 0.2s ease-out"
+                        }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "6px 0"
+            },
+            children: fileResults.length === 0 ? /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  padding: "20px 14px",
+                  textAlign: "center",
+                  fontSize: "11px",
+                  color: STYLES.textMuted
+                },
+                children: isScanning ? "Scanning page elements..." : "No files scanned"
+              }
+            ) : fileResults.map((file) => /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "8px 14px",
+                  cursor: "default",
+                  transition: STYLES.transitionFast
+                },
+                title: file.path,
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "12px",
+                        fontFamily: STYLES.fontMono,
+                        color: STYLES.text,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        flex: 1,
+                        marginRight: "12px"
+                      },
+                      children: file.displayName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        minWidth: "24px",
+                        height: "20px",
+                        padding: "0 6px",
+                        borderRadius: "10px",
+                        backgroundColor: file.issueCount > 0 ? getStatusColor(file.issueCount) : "rgba(75, 85, 99, 0.4)",
+                        color: file.issueCount > 0 ? "#FFFFFF" : STYLES.textMuted,
+                        fontSize: "10px",
+                        fontWeight: 700
+                      },
+                      children: file.issueCount
+                    }
+                  )
+                ]
+              },
+              file.path
+            ))
+          }
+        ),
+        isComplete && totalFiles > 0 && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              padding: "10px 14px",
+              borderTop: `1px solid ${STYLES.border}`,
+              fontSize: "10px",
+              color: STYLES.textMuted
+            },
+            children: totalIssues === 0 ? /* @__PURE__ */ jsxs3("span", { style: { color: STYLES.success }, children: [
+              "\u2713 No issues found across ",
+              totalFiles,
+              " files"
+            ] }) : /* @__PURE__ */ jsxs3("span", { children: [
+              filesWithIssues,
+              " of ",
+              totalFiles,
+              " files have issues"
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui-lint/UILintToolbar.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function UILintToolbar() {
+  const { settings, inspectedElement, autoScanState, startAutoScan } = useUILintContext();
+  const elementIssuesCache = useUILintStore(
+    (s) => s.elementIssuesCache
+  );
+  const [showSettings, setShowSettings] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const toolbarRef = useRef(null);
+  const settingsRef = useRef(null);
+  const resultsRef = useRef(null);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (showSettings && settingsRef.current) {
+        if (!settingsRef.current.contains(target) && !toolbarRef.current?.contains(target)) {
+          setShowSettings(false);
+        }
+      }
+      if (showResults && resultsRef.current) {
+        if (!resultsRef.current.contains(target) && !toolbarRef.current?.contains(target)) {
+          setShowResults(false);
+        }
+      }
+    };
+    if (showSettings || showResults) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [showSettings, showResults]);
+  const handleScanClick = useCallback(() => {
+    if (autoScanState.status === "idle") {
+      startAutoScan();
+      setShowResults(true);
+    } else {
+      setShowResults(!showResults);
+    }
+    setShowSettings(false);
+  }, [autoScanState.status, startAutoScan, showResults]);
+  const handleSettingsClick = useCallback(() => {
+    setShowSettings(!showSettings);
+    setShowResults(false);
+  }, [showSettings]);
+  if (!mounted) return null;
+  if (inspectedElement) return null;
+  const isScanning = autoScanState.status === "scanning";
+  const isPaused = autoScanState.status === "paused";
+  const isComplete = autoScanState.status === "complete";
+  const hasResults = autoScanState.status !== "idle";
+  let totalIssues = 0;
+  elementIssuesCache.forEach((el) => {
+    totalIssues += el.issues.length;
+  });
+  const sourceFiles = hasResults ? groupBySourceFile(autoScanState.elements) : [];
+  const filesWithIssues = sourceFiles.filter((sf) => {
+    const issues = sf.elements.reduce((sum, el) => {
+      const cached = elementIssuesCache.get(el.id);
+      return sum + (cached?.issues.length || 0);
+    }, 0);
+    return issues > 0;
+  }).length;
+  const getScanButtonContent = () => {
+    if (isScanning) {
+      return /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4(SpinnerIcon, {}),
+        /* @__PURE__ */ jsx4("span", { children: "Scanning..." })
+      ] });
+    }
+    if (isPaused) {
+      return /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4(MagnifyingGlassIcon, {}),
+        /* @__PURE__ */ jsx4("span", { children: "Paused" })
+      ] });
+    }
+    if (isComplete) {
+      return /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4(CheckCircleIcon, {}),
+        /* @__PURE__ */ jsx4("span", { children: totalIssues === 0 ? "All clear" : `${totalIssues} issues` })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx4(MagnifyingGlassIcon, {}),
+      /* @__PURE__ */ jsx4("span", { children: "Scan" })
+    ] });
+  };
+  const content = /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-ui-lint": true,
+      style: {
+        position: "fixed",
+        bottom: "24px",
+        right: "24px",
+        zIndex: 99999,
+        fontFamily: STYLES.font
+      },
+      children: [
+        /* @__PURE__ */ jsx4("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__ */ jsxs4(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginBottom: "8px",
+              fontSize: "11px",
+              color: STYLES.textDim,
+              letterSpacing: "0.01em"
+            },
+            children: [
+              /* @__PURE__ */ jsx4("span", { style: { color: STYLES.textMuted }, children: "\u2325+Click" }),
+              " to inspect"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            ref: toolbarRef,
+            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"
+            },
+            children: [
+              /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  onClick: handleScanClick,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    height: "100%",
+                    padding: "0 16px",
+                    border: "none",
+                    backgroundColor: showResults || hasResults ? STYLES.bgSegmentHover : "transparent",
+                    color: hasResults ? totalIssues > 0 ? STYLES.warning : STYLES.success : STYLES.text,
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    fontFamily: STYLES.font,
+                    cursor: "pointer",
+                    transition: STYLES.transition
+                  },
+                  onMouseEnter: (e) => {
+                    if (!showResults && !hasResults) {
+                      e.currentTarget.style.backgroundColor = STYLES.bgSegmentHover;
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (!showResults && !hasResults) {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    }
+                  },
+                  title: hasResults ? `${sourceFiles.length} files scanned, ${totalIssues} issues found` : "Scan page for style issues",
+                  children: [
+                    getScanButtonContent(),
+                    isComplete && filesWithIssues > 0 && /* @__PURE__ */ jsx4(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          minWidth: "18px",
+                          height: "18px",
+                          padding: "0 5px",
+                          borderRadius: "9px",
+                          backgroundColor: STYLES.error,
+                          color: STYLES.badgeText,
+                          fontSize: "10px",
+                          fontWeight: 700
+                        },
+                        children: filesWithIssues
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  style: {
+                    width: "1px",
+                    height: "20px",
+                    backgroundColor: STYLES.divider
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  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;
+                    }
+                  },
+                  title: "Settings",
+                  children: /* @__PURE__ */ jsx4(EllipsisIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        showSettings && /* @__PURE__ */ jsx4("div", { ref: settingsRef, children: /* @__PURE__ */ jsx4(SettingsPopover, { settings }) }),
+        showResults && hasResults && /* @__PURE__ */ jsx4("div", { ref: resultsRef, children: /* @__PURE__ */ jsx4(ScanResultsPopover, {}) })
+      ]
+    }
+  );
+  return createPortal(content, document.body);
+}
+
+export {
+  UILintToolbar
+};