uilint-react 0.1.43 → 0.1.44

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

@@ -1,9 +1,13 @@
 "use client";
+import {
+  BADGE_COLORS,
+  Badge
+} from "./chunk-W42PI2OF.js";
 import {
   groupBySourceFile,
   useUILintContext,
   useUILintStore
-} from "./chunk-LAL3JTAA.js";
+} from "./chunk-HECINZHM.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
@@ -55,10 +59,6 @@ var STYLES = {
   transition: "all 0.15s ease-out",
   transitionFast: "all 0.1s ease-out"
 };
-function getStatusColor(issueCount) {
-  if (issueCount === 0) return STYLES.success;
-  return STYLES.warning;
-}
 
 // src/components/ui-lint/SettingsPopover.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -235,9 +235,6 @@ import { useState, useCallback, useMemo } from "react";
 
 // src/components/ui-lint/toolbar-icons.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function StopIcon() {
-  return /* @__PURE__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx2("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1", fill: "currentColor" }) });
-}
 function ChevronIcon() {
   return /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx2(
     "path",
@@ -252,7 +249,7 @@ function ChevronIcon() {
 }
 
 // src/components/ui-lint/ScanResultsPopover.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+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;
@@ -268,11 +265,12 @@ function getDisambiguatedName(path, allPaths) {
   }
   return fileName;
 }
-function ScanResultsPopover() {
-  const { autoScanState, liveScanEnabled, disableLiveScan } = useUILintContext();
+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
   );
@@ -286,6 +284,7 @@ function ScanResultsPopover() {
   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 = [];
@@ -301,26 +300,44 @@ function ScanResultsPopover() {
           elementsWithIssues.push({ element: el, issueCount, ruleIds });
         }
       }
-      if (elementsWithIssues.length > 0) {
+      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
         );
-        const totalIssues2 = elementsWithIssues.reduce(
-          (sum, e) => sum + e.issueCount,
-          0
-        );
         result.push({
           path: sf.path,
           displayName: sf.displayName,
           disambiguatedName: getDisambiguatedName(sf.path, allPaths),
           issueCount: totalIssues2,
-          elementsWithIssues
+          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]);
+  }, [autoScanState.elements, elementIssuesCache, fileIssuesCache]);
   const filesWithIssues = useMemo(() => {
     if (!searchQuery.trim()) {
       return allFilesWithIssues;
@@ -403,15 +420,32 @@ function ScanResultsPopover() {
     },
     [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: "absolute",
-        bottom: "100%",
-        left: 0,
-        marginBottom: "8px",
+        position: "relative",
         width: "320px",
         maxHeight: "450px",
         borderRadius: STYLES.popoverRadius,
@@ -454,25 +488,33 @@ function ScanResultsPopover() {
                         children: allFilesWithIssues.length === 0 ? "No issues found" : searchQuery ? `${filesWithIssues.length} of ${allFilesWithIssues.length} files` : `${filesWithIssues.length} ${filesWithIssues.length === 1 ? "file" : "files"} with ${totalAllIssues} ${totalAllIssues === 1 ? "issue" : "issues"}`
                       }
                     ),
-                    liveScanEnabled && /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
-                        onClick: disableLiveScan,
+                        onClick: onClose,
                         style: {
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "center",
-                          width: "24px",
-                          height: "24px",
+                          width: "26px",
+                          height: "26px",
                           borderRadius: "6px",
-                          border: `1px solid ${STYLES.border}`,
+                          border: "none",
                           backgroundColor: "transparent",
                           color: STYLES.textMuted,
                           cursor: "pointer",
-                          transition: STYLES.transitionFast
+                          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: "Disable live scanning",
-                        children: /* @__PURE__ */ jsx3(StopIcon, {})
+                        title: "Close",
+                        children: /* @__PURE__ */ jsx3(CloseIcon, {})
                       }
                     )
                   ]
@@ -612,7 +654,8 @@ function ScanResultsPopover() {
                 isExpanded: expandedFiles.has(file.path),
                 onToggle: () => toggleFile(file.path),
                 onElementHover: handleElementHover,
-                onElementClick: handleElementClick
+                onElementClick: handleElementClick,
+                onFileLevelIssueClick: handleFileLevelIssueClick
               },
               file.path
             ))
@@ -627,7 +670,8 @@ function FileRow({
   isExpanded,
   onToggle,
   onElementHover,
-  onElementClick
+  onElementClick,
+  onFileLevelIssueClick
 }) {
   return /* @__PURE__ */ jsxs3("div", { children: [
     /* @__PURE__ */ jsxs3(
@@ -685,29 +729,11 @@ function FileRow({
               children: file.disambiguatedName
             }
           ),
-          /* @__PURE__ */ jsx3(
-            "span",
-            {
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                minWidth: "22px",
-                height: "18px",
-                padding: "0 6px",
-                borderRadius: "9px",
-                backgroundColor: getStatusColor(file.issueCount),
-                color: "#FFFFFF",
-                fontSize: "10px",
-                fontWeight: 700
-              },
-              children: file.issueCount
-            }
-          )
+          /* @__PURE__ */ jsx3(Badge, { count: file.issueCount, size: "medium" })
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx3(
+    isExpanded && /* @__PURE__ */ jsxs3(
       "div",
       {
         style: {
@@ -715,15 +741,52 @@ function FileRow({
           borderTop: `1px solid ${STYLES.border}`,
           borderBottom: `1px solid ${STYLES.border}`
         },
-        children: file.elementsWithIssues.map((item) => /* @__PURE__ */ jsx3(
-          ElementRow,
-          {
-            item,
-            onHover: onElementHover,
-            onClick: onElementClick
-          },
-          item.element.id
-        ))
+        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
+          ))
+        ]
       }
     )
   ] });
@@ -792,25 +855,76 @@ function ElementRow({ item, onHover, onClick }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx3(
-          "span",
+        /* @__PURE__ */ jsx3(Badge, { count: issueCount, size: "small" })
+      ]
+    }
+  );
+}
+function FileLevelIssueRow({
+  filePath,
+  issue,
+  onClick
+}) {
+  const fileName = filePath.split("/").pop() || filePath;
+  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: "inline-flex",
+              display: "flex",
               alignItems: "center",
-              justifyContent: "center",
-              minWidth: "18px",
-              height: "16px",
-              padding: "0 5px",
-              borderRadius: "8px",
-              backgroundColor: getStatusColor(issueCount),
-              color: "#FFFFFF",
-              fontSize: "9px",
-              fontWeight: 700
+              gap: "4px",
+              flex: 1,
+              marginRight: "12px"
             },
-            children: issueCount
+            children: [
+              /* @__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" })
       ]
     }
   );
@@ -861,6 +975,18 @@ function ClearIcon() {
     }
   ) });
 }
+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";
@@ -896,7 +1022,19 @@ function ScanPanelStack({ show, onClose }) {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [show, onClose]);
   if (!show) return null;
-  return /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { position: "relative" }, children: /* @__PURE__ */ jsx4(ScanResultsPopover, {}) });
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        position: "absolute",
+        bottom: "100%",
+        left: 0,
+        marginBottom: "8px"
+      },
+      children: /* @__PURE__ */ jsx4(ScanResultsPopover, { onClose })
+    }
+  );
 }
 
 // src/components/ui-lint/UILintToolbar.tsx
@@ -915,10 +1053,10 @@ var TOKENS = {
   textDisabled: "rgba(255, 255, 255, 0.25)",
   accent: "#63b3ed",
   // Calm blue
-  success: "#68d391",
-  // Soft green
-  warning: "#f6ad55",
-  // Warm orange
+  success: BADGE_COLORS.success,
+  // Soft green (shared with Badge)
+  warning: BADGE_COLORS.warning,
+  // Warm orange (shared with Badge)
   // Typography
   fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,
   fontMono: `"SF Mono", Monaco, "Cascadia Code", monospace`,
@@ -1146,20 +1284,6 @@ var globalStyles = `
     transform: translateY(0);
   }
   
-  .uilint-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 20px;
-    height: 20px;
-    padding: 0 6px;
-    border-radius: 10px;
-    font-size: 11px;
-    font-weight: 600;
-    font-family: ${TOKENS.fontMono};
-    letter-spacing: -0.02em;
-  }
-  
   .uilint-scanning-indicator {
     position: relative;
     overflow: hidden;
@@ -1341,17 +1465,7 @@ function ScanStatus({ status, issueCount, enabled }) {
             children: /* @__PURE__ */ jsx5(Icons.AlertTriangle, {})
           }
         ),
-        /* @__PURE__ */ jsx5(
-          "span",
-          {
-            className: "uilint-badge",
-            style: {
-              backgroundColor: `${TOKENS.warning}20`,
-              color: TOKENS.warning
-            },
-            children: issueCount
-          }
-        )
+        /* @__PURE__ */ jsx5(Badge, { count: issueCount })
       ]
     }
   );
@@ -1367,6 +1481,7 @@ function UILintToolbar() {
   const elementIssuesCache = useUILintStore(
     (s) => s.elementIssuesCache
   );
+  const fileIssuesCache = useUILintStore((s) => s.fileIssuesCache);
   const [showSettings, setShowSettings] = useState2(false);
   const [showResults, setShowResults] = useState2(false);
   const [mounted, setMounted] = useState2(false);
@@ -1403,10 +1518,15 @@ function UILintToolbar() {
   }, []);
   const isScanning = autoScanState.status === "scanning";
   const isComplete = autoScanState.status === "complete";
-  let totalIssues = 0;
+  let elementIssues = 0;
   elementIssuesCache.forEach((el) => {
-    totalIssues += el.issues.length;
+    elementIssues += el.issues.length;
+  });
+  let fileLevelIssues = 0;
+  fileIssuesCache.forEach((issues) => {
+    fileLevelIssues += issues.length;
   });
+  const totalIssues = elementIssues + fileLevelIssues;
   const hasIssues = totalIssues > 0;
   useEffect2(() => {
     setMounted(true);
@@ -1433,11 +1553,6 @@ function UILintToolbar() {
       document.removeEventListener("keydown", handleEscape);
     };
   }, [showSettings, showResults]);
-  useEffect2(() => {
-    if (hasIssues && liveScanEnabled && isComplete && !showSettings) {
-      setShowResults(true);
-    }
-  }, [hasIssues, liveScanEnabled, isComplete, showSettings]);
   const handleToggleClick = useCallback2(() => {
     if (liveScanEnabled) {
       disableLiveScan();
@@ -1486,7 +1601,7 @@ function UILintToolbar() {
       },
       children: [
         /* @__PURE__ */ jsx5("style", { children: globalStyles }),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: `uilint-hint ${liveScanEnabled ? "uilint-hint--visible" : ""}`,
@@ -1495,36 +1610,27 @@ function UILintToolbar() {
               marginBottom: "10px",
               fontSize: "11px",
               color: TOKENS.textMuted,
-              letterSpacing: "0.02em",
-              // Subtle dark halo for readability on any background
-              textShadow: `
-            0 0 4px rgba(0, 0, 0, 0.8),
-            0 0 8px rgba(0, 0, 0, 0.5),
-            0 1px 2px rgba(0, 0, 0, 0.9)
-          `
+              letterSpacing: "0.02em"
             },
             "aria-hidden": !liveScanEnabled,
-            children: [
-              /* @__PURE__ */ jsx5(
-                "kbd",
-                {
-                  style: {
-                    display: "inline-block",
-                    padding: "2px 5px",
-                    marginRight: "4px",
-                    borderRadius: "4px",
-                    backgroundColor: TOKENS.bgElevated,
-                    border: `1px solid ${TOKENS.border}`,
-                    fontSize: "10px",
-                    fontFamily: TOKENS.fontMono,
-                    color: TOKENS.textSecondary,
-                    boxShadow: `0 1px 3px rgba(0, 0, 0, 0.5)`
-                  },
-                  children: "\u2325"
-                }
-              ),
-              /* @__PURE__ */ jsx5("span", { children: "+ Click to inspect element" })
-            ]
+            children: /* @__PURE__ */ jsx5(
+              "kbd",
+              {
+                style: {
+                  display: "inline-block",
+                  padding: "2px 5px",
+                  marginRight: "4px",
+                  borderRadius: "4px",
+                  backgroundColor: TOKENS.bgElevated,
+                  border: `1px solid ${TOKENS.border}`,
+                  fontSize: "10px",
+                  fontFamily: TOKENS.fontMono,
+                  color: TOKENS.textSecondary,
+                  boxShadow: `0 1px 3px rgba(0, 0, 0, 0.5)`
+                },
+                children: "\u2325 + Click to inspect element"
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxs4(

package/dist/chunk-W42PI2OF.js

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