uilint-react 0.1.21 → 0.1.23

package/dist/{chunk-EBU7YY73.js → chunk-XPAUSE5Z.js}

@@ -28,7 +28,14 @@ var FILE_COLORS = [
   // purple
 ];
 var DEFAULT_SETTINGS = {
-  hideNodeModules: true
+  hideNodeModules: true,
+  autoScanEnabled: false
+};
+var DEFAULT_AUTO_SCAN_STATE = {
+  status: "idle",
+  currentIndex: 0,
+  totalElements: 0,
+  elements: []
 };
 var DATA_UILINT_ID = "data-ui-lint-id";
 
@@ -254,7 +261,8 @@ import {
   useState,
   useEffect,
   useCallback,
-  useMemo
+  useMemo,
+  useRef
 } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var UILintContext = createContext(null);
@@ -280,9 +288,185 @@ function UILintProvider({
   );
   const [locatorStackIndex, setLocatorStackIndex] = useState(0);
   const [inspectedElement, setInspectedElement] = useState(null);
+  const [autoScanState, setAutoScanState] = useState(
+    DEFAULT_AUTO_SCAN_STATE
+  );
+  const [elementIssuesCache, setElementIssuesCache] = useState(/* @__PURE__ */ new Map());
+  const scanPausedRef = useRef(false);
+  const scanAbortRef = useRef(false);
   const updateSettings = useCallback((partial) => {
     setSettings((prev) => ({ ...prev, ...partial }));
   }, []);
+  const scanElementForIssues = useCallback(
+    async (element) => {
+      if (!element.source) {
+        return {
+          elementId: element.id,
+          issues: [],
+          status: "complete"
+        };
+      }
+      try {
+        const sourceResponse = await fetch(
+          `/api/.uilint/source?path=${encodeURIComponent(
+            element.source.fileName
+          )}`
+        );
+        if (!sourceResponse.ok) {
+          return {
+            elementId: element.id,
+            issues: [],
+            status: "error"
+          };
+        }
+        const sourceData = await sourceResponse.json();
+        const analyzeResponse = await fetch("/api/.uilint/analyze", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sourceCode: sourceData.content,
+            filePath: sourceData.relativePath || element.source.fileName,
+            componentName: element.componentStack[0]?.name || element.tagName,
+            componentLine: element.source.lineNumber
+          })
+        });
+        if (!analyzeResponse.ok) {
+          return {
+            elementId: element.id,
+            issues: [],
+            status: "error"
+          };
+        }
+        const result = await analyzeResponse.json();
+        return {
+          elementId: element.id,
+          issues: result.issues || [],
+          status: "complete"
+        };
+      } catch {
+        return {
+          elementId: element.id,
+          issues: [],
+          status: "error"
+        };
+      }
+    },
+    []
+  );
+  const runScanLoop = useCallback(
+    async (elements, startIndex) => {
+      const fileToElements = /* @__PURE__ */ new Map();
+      const scannedFiles = /* @__PURE__ */ new Set();
+      for (const el of elements) {
+        if (el.source) {
+          const file = el.source.fileName;
+          const existing = fileToElements.get(file) || [];
+          existing.push(el);
+          fileToElements.set(file, existing);
+        }
+      }
+      for (let i = startIndex; i < elements.length; i++) {
+        if (scanAbortRef.current) {
+          setAutoScanState((prev) => ({ ...prev, status: "idle" }));
+          return;
+        }
+        while (scanPausedRef.current) {
+          await new Promise((resolve) => setTimeout(resolve, 100));
+          if (scanAbortRef.current) {
+            setAutoScanState((prev) => ({ ...prev, status: "idle" }));
+            return;
+          }
+        }
+        const element = elements[i];
+        setAutoScanState((prev) => ({
+          ...prev,
+          currentIndex: i
+        }));
+        if (element.source && scannedFiles.has(element.source.fileName)) {
+          const existingElements = fileToElements.get(element.source.fileName);
+          if (existingElements && existingElements.length > 0) {
+            const firstId = existingElements[0].id;
+            setElementIssuesCache((prev) => {
+              const cached = prev.get(firstId);
+              if (cached) {
+                const newCache = new Map(prev);
+                newCache.set(element.id, { ...cached, elementId: element.id });
+                return newCache;
+              }
+              return prev;
+            });
+          }
+          continue;
+        }
+        setElementIssuesCache((prev) => {
+          const newCache = new Map(prev);
+          newCache.set(element.id, {
+            elementId: element.id,
+            issues: [],
+            status: "scanning"
+          });
+          return newCache;
+        });
+        const result = await scanElementForIssues(element);
+        setElementIssuesCache((prev) => {
+          const newCache = new Map(prev);
+          newCache.set(element.id, result);
+          return newCache;
+        });
+        if (element.source) {
+          scannedFiles.add(element.source.fileName);
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      setAutoScanState((prev) => ({
+        ...prev,
+        status: "complete",
+        currentIndex: elements.length
+      }));
+    },
+    [scanElementForIssues]
+  );
+  const startAutoScan = useCallback(() => {
+    scanPausedRef.current = false;
+    scanAbortRef.current = false;
+    const elements = scanDOMForSources(document.body, settings.hideNodeModules);
+    const initialCache = /* @__PURE__ */ new Map();
+    for (const el of elements) {
+      initialCache.set(el.id, {
+        elementId: el.id,
+        issues: [],
+        status: "pending"
+      });
+    }
+    setElementIssuesCache(initialCache);
+    setAutoScanState({
+      status: "scanning",
+      currentIndex: 0,
+      totalElements: elements.length,
+      elements
+    });
+    runScanLoop(elements, 0);
+  }, [settings.hideNodeModules, runScanLoop]);
+  const pauseAutoScan = useCallback(() => {
+    scanPausedRef.current = true;
+    setAutoScanState((prev) => ({ ...prev, status: "paused" }));
+  }, []);
+  const resumeAutoScan = useCallback(() => {
+    scanPausedRef.current = false;
+    setAutoScanState((prev) => {
+      if (prev.status === "paused") {
+        runScanLoop(prev.elements, prev.currentIndex);
+        return { ...prev, status: "scanning" };
+      }
+      return prev;
+    });
+  }, [runScanLoop]);
+  const stopAutoScan = useCallback(() => {
+    scanAbortRef.current = true;
+    scanPausedRef.current = false;
+    setAutoScanState(DEFAULT_AUTO_SCAN_STATE);
+    setElementIssuesCache(/* @__PURE__ */ new Map());
+  }, []);
   const locatorGoUp = useCallback(() => {
     if (!locatorTarget) return;
     const maxIndex = locatorTarget.componentStack.length;
@@ -329,7 +513,7 @@ function UILintProvider({
   );
   const handleMouseMove = useCallback(
     (e) => {
-      if (!altKeyHeld) return;
+      if (!altKeyHeld && !inspectedElement) return;
       const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
       if (!elementAtPoint) {
         setLocatorTarget(null);
@@ -346,7 +530,7 @@ function UILintProvider({
       }
       setLocatorTarget(null);
     },
-    [altKeyHeld, getLocatorTargetFromElement]
+    [altKeyHeld, inspectedElement, getLocatorTargetFromElement]
   );
   const handleLocatorClick = useCallback(
     (e) => {
@@ -402,14 +586,23 @@ function UILintProvider({
     };
   }, [enabled]);
   useEffect(() => {
-    if (!isBrowser() || !enabled || !altKeyHeld) return;
+    if (!isBrowser() || !enabled) return;
+    if (!altKeyHeld && !inspectedElement) return;
     window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("click", handleLocatorClick, true);
+    if (altKeyHeld) {
+      window.addEventListener("click", handleLocatorClick, true);
+    }
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("click", handleLocatorClick, true);
     };
-  }, [enabled, altKeyHeld, handleMouseMove, handleLocatorClick]);
+  }, [
+    enabled,
+    altKeyHeld,
+    inspectedElement,
+    handleMouseMove,
+    handleLocatorClick
+  ]);
   useEffect(() => {
     if (!isBrowser() || !enabled || !altKeyHeld) return;
     const handleWheel = (e) => {
@@ -453,7 +646,13 @@ function UILintProvider({
       locatorGoUp,
       locatorGoDown,
       inspectedElement,
-      setInspectedElement
+      setInspectedElement,
+      autoScanState,
+      elementIssuesCache,
+      startAutoScan,
+      pauseAutoScan,
+      resumeAutoScan,
+      stopAutoScan
     }),
     [
       settings,
@@ -462,7 +661,13 @@ function UILintProvider({
       effectiveLocatorTarget,
       locatorGoUp,
       locatorGoDown,
-      inspectedElement
+      inspectedElement,
+      autoScanState,
+      elementIssuesCache,
+      startAutoScan,
+      pauseAutoScan,
+      resumeAutoScan,
+      stopAutoScan
     ]
   );
   const shouldRenderUI = enabled && isMounted;
@@ -472,27 +677,31 @@ function UILintProvider({
   ] });
 }
 function UILintUI() {
-  const { altKeyHeld, inspectedElement } = useUILintContext();
+  const { altKeyHeld, inspectedElement, autoScanState } = useUILintContext();
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-C6HOAJA4.js"),
-      import("./InspectionPanel-ZBDXQ2LU.js"),
-      import("./LocatorOverlay-3H446RPO.js")
-    ]).then(([toolbar, panel, locator]) => {
+      import("./UILintToolbar-7TFNXFZJ.js"),
+      import("./InspectionPanel-54HO4UI5.js"),
+      import("./LocatorOverlay-AXB5VERJ.js"),
+      import("./ElementBadges-64UOI6QT.js")
+    ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,
         Panel: panel.InspectionPanel,
         LocatorOverlay: locator.LocatorOverlay,
-        InspectedHighlight: locator.InspectedElementHighlight
+        InspectedHighlight: locator.InspectedElementHighlight,
+        ElementBadges: badges.ElementBadges
       });
     });
   }, []);
   if (!components) return null;
-  const { Toolbar, Panel, LocatorOverlay, InspectedHighlight } = components;
+  const { Toolbar, Panel, LocatorOverlay, InspectedHighlight, ElementBadges } = components;
+  const showBadges = autoScanState.status !== "idle";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Toolbar, {}),
-    altKeyHeld && /* @__PURE__ */ jsx(LocatorOverlay, {}),
+    (altKeyHeld || inspectedElement) && /* @__PURE__ */ jsx(LocatorOverlay, {}),
+    showBadges && /* @__PURE__ */ jsx(ElementBadges, {}),
     inspectedElement && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(InspectedHighlight, {}),
       /* @__PURE__ */ jsx(Panel, {})

package/dist/{chunk-3DNDKMZ4.js → chunk-ZMGUWRAO.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-EBU7YY73.js";
+} from "./chunk-XPAUSE5Z.js";
 
 // src/components/ui-lint/LocatorOverlay.tsx
 import { useState, useEffect, useMemo } from "react";

package/dist/index.d.ts

@@ -47,6 +47,27 @@ interface SourceFile {
  */
 interface UILintSettings {
     hideNodeModules: boolean;
+    autoScanEnabled: boolean;
+}
+/**
+ * State for the auto-scan feature
+ */
+interface AutoScanState {
+    status: "idle" | "scanning" | "paused" | "complete";
+    currentIndex: number;
+    totalElements: number;
+    elements: ScannedElement[];
+}
+/**
+ * Cached issue data for a scanned element
+ */
+interface ElementIssue {
+    elementId: string;
+    issues: Array<{
+        line?: number;
+        message: string;
+    }>;
+    status: "pending" | "scanning" | "complete" | "error";
 }
 /**
  * Element detected under the cursor during Alt-key locator mode
@@ -86,6 +107,18 @@ interface UILintContextValue {
     inspectedElement: InspectedElement | null;
     /** Set the element to inspect (opens sidebar) */
     setInspectedElement: (element: InspectedElement | null) => void;
+    /** Auto-scan state */
+    autoScanState: AutoScanState;
+    /** Cache of element issues from auto-scan */
+    elementIssuesCache: Map<string, ElementIssue>;
+    /** Start auto-scanning all page elements */
+    startAutoScan: () => void;
+    /** Pause the auto-scan */
+    pauseAutoScan: () => void;
+    /** Resume the auto-scan */
+    resumeAutoScan: () => void;
+    /** Stop and reset the auto-scan */
+    stopAutoScan: () => void;
 }
 /**
  * Props for the UILintProvider component

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-GUF36FGA.js";
+} from "./chunk-7M2NF7HT.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-CWCKS753.js";
+} from "./chunk-7BJIS7PI.js";
 import {
   LocatorOverlay
-} from "./chunk-3DNDKMZ4.js";
+} from "./chunk-ZMGUWRAO.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-EBU7YY73.js";
+} from "./chunk-XPAUSE5Z.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "React component for AI-powered UI consistency checking",
   "author": "Peter Suggate",
   "repository": {
@@ -34,7 +34,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "uilint-core": "^0.1.21"
+    "uilint-core": "^0.1.23"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/dist/chunk-GUF36FGA.js

@@ -1,276 +0,0 @@
-"use client";
-import {
-  useUILintContext
-} from "./chunk-EBU7YY73.js";
-
-// src/components/ui-lint/UILintToolbar.tsx
-import { useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
-var STYLES = {
-  bg: "rgba(17, 24, 39, 0.9)",
-  bgHover: "rgba(31, 41, 55, 0.95)",
-  border: "rgba(75, 85, 99, 0.5)",
-  text: "#F9FAFB",
-  textMuted: "#9CA3AF",
-  accent: "#3B82F6",
-  accentHover: "#2563EB",
-  shadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
-  blur: "blur(12px)",
-  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
-};
-function UILintToolbar() {
-  const { settings, updateSettings, inspectedElement } = useUILintContext();
-  const [showSettings, setShowSettings] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  const settingsRef = useRef(null);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (settingsRef.current && !settingsRef.current.contains(e.target)) {
-        setShowSettings(false);
-      }
-    };
-    if (showSettings) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [showSettings]);
-  if (!mounted) return null;
-  if (inspectedElement) return null;
-  const content = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-ui-lint": true,
-      style: {
-        position: "fixed",
-        top: "24px",
-        right: "24px",
-        zIndex: 99999,
-        fontFamily: STYLES.font
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes uilint-fade-in {
-          from { opacity: 0; transform: scale(0.95); }
-          to { opacity: 1; transform: scale(1); }
-        }
-      ` }),
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: settingsRef, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setShowSettings(!showSettings),
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "48px",
-                height: "48px",
-                borderRadius: "50%",
-                border: `1px solid ${STYLES.border}`,
-                backgroundColor: showSettings ? STYLES.bgHover : STYLES.bg,
-                backdropFilter: STYLES.blur,
-                WebkitBackdropFilter: STYLES.blur,
-                boxShadow: STYLES.shadow,
-                cursor: "pointer",
-                transition: "all 0.2s ease-out",
-                color: showSettings ? STYLES.text : STYLES.textMuted,
-                fontSize: "20px"
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.transform = "scale(1.05)";
-                e.currentTarget.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.5)";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.transform = "scale(1)";
-                e.currentTarget.style.boxShadow = STYLES.shadow;
-              },
-              title: "UILint Settings (Alt+Click any element to inspect)",
-              children: /* @__PURE__ */ jsx(UILintIcon, { active: showSettings })
-            }
-          ),
-          showSettings && /* @__PURE__ */ jsx(SettingsPopover, { settings, onUpdate: updateSettings }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: "100%",
-                top: "50%",
-                transform: "translateY(-50%)",
-                marginLeft: "12px",
-                padding: "8px 12px",
-                borderRadius: "8px",
-                backgroundColor: STYLES.bg,
-                border: `1px solid ${STYLES.border}`,
-                backdropFilter: STYLES.blur,
-                WebkitBackdropFilter: STYLES.blur,
-                boxShadow: STYLES.shadow,
-                fontSize: "12px",
-                color: STYLES.textMuted,
-                whiteSpace: "nowrap",
-                opacity: 0,
-                transition: "opacity 0.2s",
-                pointerEvents: "none"
-              },
-              className: "uilint-hint",
-              children: [
-                /* @__PURE__ */ jsx("span", { style: { color: STYLES.text }, children: "Alt+Click" }),
-                " any element to inspect"
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-  return createPortal(content, document.body);
-}
-function SettingsPopover({
-  settings,
-  onUpdate
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: "100%",
-        right: 0,
-        marginTop: "8px",
-        width: "280px",
-        padding: "16px",
-        borderRadius: "12px",
-        border: `1px solid ${STYLES.border}`,
-        backgroundColor: STYLES.bg,
-        backdropFilter: STYLES.blur,
-        WebkitBackdropFilter: STYLES.blur,
-        boxShadow: STYLES.shadow,
-        animation: "uilint-fade-in 0.15s ease-out"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: "13px",
-              fontWeight: 600,
-              color: STYLES.text,
-              marginBottom: "12px"
-            },
-            children: "UILint Settings"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SettingToggle,
-          {
-            label: "Hide node_modules",
-            checked: settings.hideNodeModules,
-            onChange: (checked) => onUpdate({ hideNodeModules: checked })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              marginTop: "12px",
-              paddingTop: "12px",
-              borderTop: `1px solid ${STYLES.border}`,
-              fontSize: "11px",
-              color: STYLES.textMuted,
-              lineHeight: 1.5
-            },
-            children: [
-              /* @__PURE__ */ jsx("strong", { style: { color: STYLES.text }, children: "Alt+Click" }),
-              " any element to open the inspector sidebar"
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function SettingToggle({
-  label,
-  checked,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "8px 0",
-        cursor: "pointer"
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: STYLES.textMuted }, children: label }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: () => onChange(!checked),
-            style: {
-              width: "36px",
-              height: "20px",
-              borderRadius: "10px",
-              backgroundColor: checked ? STYLES.accent : "rgba(75, 85, 99, 0.5)",
-              position: "relative",
-              transition: "background-color 0.2s"
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: "2px",
-                  left: checked ? "18px" : "2px",
-                  width: "16px",
-                  height: "16px",
-                  borderRadius: "50%",
-                  backgroundColor: "#FFFFFF",
-                  transition: "left 0.2s",
-                  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function UILintIcon({ active }) {
-  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: "3",
-        y: "3",
-        width: "18",
-        height: "18",
-        rx: "3",
-        stroke: active ? STYLES.accent : "currentColor",
-        strokeWidth: "2"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M7 12h10M12 7v10",
-        stroke: active ? STYLES.accent : "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    )
-  ] });
-}
-
-export {
-  UILintToolbar
-};