uilint-react 0.1.23 → 0.1.25

package/dist/{chunk-XPAUSE5Z.js → chunk-45MPASAN.js}

@@ -1,44 +1,5 @@
 "use client";
 
-// src/components/ui-lint/types.ts
-var FILE_COLORS = [
-  "#3B82F6",
-  // blue
-  "#8B5CF6",
-  // violet
-  "#EC4899",
-  // pink
-  "#10B981",
-  // emerald
-  "#F59E0B",
-  // amber
-  "#06B6D4",
-  // cyan
-  "#EF4444",
-  // red
-  "#84CC16",
-  // lime
-  "#6366F1",
-  // indigo
-  "#F97316",
-  // orange
-  "#14B8A6",
-  // teal
-  "#A855F7"
-  // purple
-];
-var DEFAULT_SETTINGS = {
-  hideNodeModules: true,
-  autoScanEnabled: false
-};
-var DEFAULT_AUTO_SCAN_STATE = {
-  status: "idle",
-  currentIndex: 0,
-  totalElements: 0,
-  elements: []
-};
-var DATA_UILINT_ID = "data-ui-lint-id";
-
 // src/components/ui-lint/fiber-utils.ts
 var DATA_ATTR = "data-ui-lint-id";
 var COLORS = [
@@ -66,6 +27,16 @@ var SKIP_TAGS = /* @__PURE__ */ new Set([
   "LINK"
 ]);
 var elementCounter = 0;
+function generateStableId(element, source) {
+  const dataLoc = element.getAttribute("data-loc");
+  if (dataLoc) {
+    return `loc:${dataLoc}`;
+  }
+  if (source) {
+    return `src:${source.fileName}:${source.lineNumber}:${source.columnNumber ?? 0}`;
+  }
+  return `uilint-${++elementCounter}`;
+}
 function getFiberFromElement(element) {
   const keys = Object.keys(element);
   const fiberKey = keys.find((k) => k.startsWith("__reactFiber$"));
@@ -145,9 +116,6 @@ function shouldSkipElement(element) {
   if (rect.width === 0 || rect.height === 0) return true;
   return false;
 }
-function generateElementId() {
-  return `uilint-${++elementCounter}`;
-}
 function scanDOMForSources(root = document.body, hideNodeModules = true) {
   const elements = [];
   elementCounter = 0;
@@ -186,7 +154,7 @@ function scanDOMForSources(root = document.body, hideNodeModules = true) {
         }
       }
       if (source) {
-        const id = generateElementId();
+        const id = generateStableId(node, source);
         node.setAttribute(DATA_ATTR, id);
         const scannedElement = {
           id,
@@ -254,6 +222,45 @@ function buildEditorUrl(source, editor = "cursor") {
   )}:${lineNumber}:${column}`;
 }
 
+// src/components/ui-lint/types.ts
+var FILE_COLORS = [
+  "#3B82F6",
+  // blue
+  "#8B5CF6",
+  // violet
+  "#EC4899",
+  // pink
+  "#10B981",
+  // emerald
+  "#F59E0B",
+  // amber
+  "#06B6D4",
+  // cyan
+  "#EF4444",
+  // red
+  "#84CC16",
+  // lime
+  "#6366F1",
+  // indigo
+  "#F97316",
+  // orange
+  "#14B8A6",
+  // teal
+  "#A855F7"
+  // purple
+];
+var DEFAULT_SETTINGS = {
+  hideNodeModules: true,
+  autoScanEnabled: false
+};
+var DEFAULT_AUTO_SCAN_STATE = {
+  status: "idle",
+  currentIndex: 0,
+  totalElements: 0,
+  elements: []
+};
+var DATA_UILINT_ID = "data-ui-lint-id";
+
 // src/components/ui-lint/UILintProvider.tsx
 import {
   createContext,
@@ -261,9 +268,210 @@ import {
   useState,
   useEffect,
   useCallback,
-  useMemo,
-  useRef
+  useMemo
 } from "react";
+
+// src/components/ui-lint/store.ts
+import { create } from "zustand";
+async function scanElementForIssues(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"
+    };
+  }
+}
+var useUILintStore = create()((set, get) => ({
+  // ============ Settings ============
+  settings: DEFAULT_SETTINGS,
+  updateSettings: (partial) => set((state) => ({
+    settings: { ...state.settings, ...partial }
+  })),
+  // ============ Locator Mode ============
+  altKeyHeld: false,
+  setAltKeyHeld: (held) => set({ altKeyHeld: held }),
+  locatorTarget: null,
+  setLocatorTarget: (target) => set({ locatorTarget: target }),
+  locatorStackIndex: 0,
+  setLocatorStackIndex: (index) => set({ locatorStackIndex: index }),
+  locatorGoUp: () => {
+    const { locatorTarget, locatorStackIndex } = get();
+    if (!locatorTarget) return;
+    const maxIndex = locatorTarget.componentStack.length;
+    set({ locatorStackIndex: Math.min(locatorStackIndex + 1, maxIndex) });
+  },
+  locatorGoDown: () => {
+    const { locatorStackIndex } = get();
+    set({ locatorStackIndex: Math.max(locatorStackIndex - 1, 0) });
+  },
+  // ============ Inspection ============
+  inspectedElement: null,
+  setInspectedElement: (el) => set({ inspectedElement: el }),
+  // ============ Auto-Scan ============
+  autoScanState: DEFAULT_AUTO_SCAN_STATE,
+  elementIssuesCache: /* @__PURE__ */ new Map(),
+  scanLock: false,
+  scanPaused: false,
+  scanAborted: false,
+  _setScanState: (partial) => set((state) => ({
+    autoScanState: { ...state.autoScanState, ...partial }
+  })),
+  updateElementIssue: (id, issue) => set((state) => {
+    const newCache = new Map(state.elementIssuesCache);
+    newCache.set(id, issue);
+    return { elementIssuesCache: newCache };
+  }),
+  startAutoScan: async (hideNodeModules) => {
+    const state = get();
+    if (state.scanLock) {
+      console.warn("UILint: Scan already in progress");
+      return;
+    }
+    set({
+      scanLock: true,
+      scanPaused: false,
+      scanAborted: false
+    });
+    const elements = scanDOMForSources(document.body, hideNodeModules);
+    const initialCache = /* @__PURE__ */ new Map();
+    for (const el of elements) {
+      initialCache.set(el.id, {
+        elementId: el.id,
+        issues: [],
+        status: "pending"
+      });
+    }
+    set({
+      elementIssuesCache: initialCache,
+      autoScanState: {
+        status: "scanning",
+        currentIndex: 0,
+        totalElements: elements.length,
+        elements
+      }
+    });
+    await get()._runScanLoop(elements, 0);
+  },
+  pauseAutoScan: () => {
+    set({ scanPaused: true });
+    get()._setScanState({ status: "paused" });
+  },
+  resumeAutoScan: () => {
+    const state = get();
+    if (state.autoScanState.status !== "paused") return;
+    set({ scanPaused: false });
+    get()._setScanState({ status: "scanning" });
+    get()._runScanLoop(
+      state.autoScanState.elements,
+      state.autoScanState.currentIndex
+    );
+  },
+  stopAutoScan: () => {
+    set({
+      scanAborted: true,
+      scanPaused: false,
+      scanLock: false,
+      autoScanState: DEFAULT_AUTO_SCAN_STATE,
+      elementIssuesCache: /* @__PURE__ */ new Map()
+    });
+  },
+  _runScanLoop: async (elements, startIndex) => {
+    for (let i = startIndex; i < elements.length; i++) {
+      if (get().scanAborted) {
+        set({
+          scanLock: false,
+          autoScanState: { ...get().autoScanState, status: "idle" }
+        });
+        return;
+      }
+      while (get().scanPaused) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        if (get().scanAborted) {
+          set({
+            scanLock: false,
+            autoScanState: { ...get().autoScanState, status: "idle" }
+          });
+          return;
+        }
+      }
+      const element = elements[i];
+      get()._setScanState({ currentIndex: i });
+      get().updateElementIssue(element.id, {
+        elementId: element.id,
+        issues: [],
+        status: "scanning"
+      });
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const result = await scanElementForIssues(element);
+      get().updateElementIssue(element.id, result);
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+    set({
+      scanLock: false,
+      autoScanState: {
+        ...get().autoScanState,
+        status: "complete",
+        currentIndex: elements.length
+      }
+    });
+  }
+}));
+function useEffectiveLocatorTarget() {
+  const locatorTarget = useUILintStore((s) => s.locatorTarget);
+  const locatorStackIndex = useUILintStore(
+    (s) => s.locatorStackIndex
+  );
+  if (!locatorTarget) return null;
+  return {
+    ...locatorTarget,
+    stackIndex: locatorStackIndex
+  };
+}
+
+// src/components/ui-lint/UILintProvider.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var UILintContext = createContext(null);
 function useUILintContext() {
@@ -280,201 +488,37 @@ function UILintProvider({
   children,
   enabled = true
 }) {
-  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
   const [isMounted, setIsMounted] = useState(false);
-  const [altKeyHeld, setAltKeyHeld] = useState(false);
-  const [locatorTarget, setLocatorTarget] = useState(
-    null
+  const settings = useUILintStore((s) => s.settings);
+  const updateSettings = useUILintStore((s) => s.updateSettings);
+  const altKeyHeld = useUILintStore((s) => s.altKeyHeld);
+  const setAltKeyHeld = useUILintStore((s) => s.setAltKeyHeld);
+  const setLocatorTarget = useUILintStore(
+    (s) => s.setLocatorTarget
   );
-  const [locatorStackIndex, setLocatorStackIndex] = useState(0);
-  const [inspectedElement, setInspectedElement] = useState(null);
-  const [autoScanState, setAutoScanState] = useState(
-    DEFAULT_AUTO_SCAN_STATE
+  const locatorStackIndex = useUILintStore(
+    (s) => s.locatorStackIndex
   );
-  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 setLocatorStackIndex = useUILintStore(
+    (s) => s.setLocatorStackIndex
   );
-  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 locatorGoUp = useUILintStore((s) => s.locatorGoUp);
+  const locatorGoDown = useUILintStore((s) => s.locatorGoDown);
+  const inspectedElement = useUILintStore(
+    (s) => s.inspectedElement
   );
-  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;
-    setLocatorStackIndex((prev) => Math.min(prev + 1, maxIndex));
-  }, [locatorTarget]);
-  const locatorGoDown = useCallback(() => {
-    setLocatorStackIndex((prev) => Math.max(prev - 1, 0));
-  }, []);
+  const setInspectedElement = useUILintStore(
+    (s) => s.setInspectedElement
+  );
+  const autoScanState = useUILintStore((s) => s.autoScanState);
+  const elementIssuesCache = useUILintStore(
+    (s) => s.elementIssuesCache
+  );
+  const startAutoScan = useUILintStore((s) => s.startAutoScan);
+  const pauseAutoScan = useUILintStore((s) => s.pauseAutoScan);
+  const resumeAutoScan = useUILintStore((s) => s.resumeAutoScan);
+  const stopAutoScan = useUILintStore((s) => s.stopAutoScan);
+  const effectiveLocatorTarget = useEffectiveLocatorTarget();
   const getLocatorTargetFromElement = useCallback(
     (element) => {
       if (element.closest("[data-ui-lint]")) return null;
@@ -530,31 +574,44 @@ function UILintProvider({
       }
       setLocatorTarget(null);
     },
-    [altKeyHeld, inspectedElement, getLocatorTargetFromElement]
+    [
+      altKeyHeld,
+      inspectedElement,
+      getLocatorTargetFromElement,
+      setLocatorTarget
+    ]
   );
   const handleLocatorClick = useCallback(
     (e) => {
-      if (!altKeyHeld || !locatorTarget) return;
+      if (!altKeyHeld || !effectiveLocatorTarget) return;
       e.preventDefault();
       e.stopPropagation();
-      let source = locatorTarget.source;
-      if (locatorStackIndex > 0 && locatorTarget.componentStack.length > 0) {
-        const stackItem = locatorTarget.componentStack[locatorStackIndex - 1];
+      let source = effectiveLocatorTarget.source;
+      if (locatorStackIndex > 0 && effectiveLocatorTarget.componentStack.length > 0) {
+        const stackItem = effectiveLocatorTarget.componentStack[locatorStackIndex - 1];
         if (stackItem?.source) {
           source = stackItem.source;
         }
       }
       setInspectedElement({
-        element: locatorTarget.element,
+        element: effectiveLocatorTarget.element,
         source,
-        componentStack: locatorTarget.componentStack,
-        rect: locatorTarget.rect
+        componentStack: effectiveLocatorTarget.componentStack,
+        rect: effectiveLocatorTarget.rect
       });
       setAltKeyHeld(false);
       setLocatorTarget(null);
       setLocatorStackIndex(0);
     },
-    [altKeyHeld, locatorTarget, locatorStackIndex]
+    [
+      altKeyHeld,
+      effectiveLocatorTarget,
+      locatorStackIndex,
+      setInspectedElement,
+      setAltKeyHeld,
+      setLocatorTarget,
+      setLocatorStackIndex
+    ]
   );
   useEffect(() => {
     if (!isBrowser() || !enabled) return;
@@ -584,7 +641,7 @@ function UILintProvider({
       window.removeEventListener("keyup", handleKeyUp);
       window.removeEventListener("blur", handleBlur);
     };
-  }, [enabled]);
+  }, [enabled, setAltKeyHeld, setLocatorTarget, setLocatorStackIndex]);
   useEffect(() => {
     if (!isBrowser() || !enabled) return;
     if (!altKeyHeld && !inspectedElement) return;
@@ -606,7 +663,7 @@ function UILintProvider({
   useEffect(() => {
     if (!isBrowser() || !enabled || !altKeyHeld) return;
     const handleWheel = (e) => {
-      if (!locatorTarget) return;
+      if (!effectiveLocatorTarget) return;
       e.preventDefault();
       if (e.deltaY > 0) {
         locatorGoUp();
@@ -616,7 +673,7 @@ function UILintProvider({
     };
     window.addEventListener("wheel", handleWheel, { passive: false });
     return () => window.removeEventListener("wheel", handleWheel);
-  }, [enabled, altKeyHeld, locatorTarget, locatorGoUp, locatorGoDown]);
+  }, [enabled, altKeyHeld, effectiveLocatorTarget, locatorGoUp, locatorGoDown]);
   useEffect(() => {
     if (!isBrowser() || !enabled) return;
     const handleKeyDown = (e) => {
@@ -626,17 +683,13 @@ function UILintProvider({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [enabled, inspectedElement]);
+  }, [enabled, inspectedElement, setInspectedElement]);
   useEffect(() => {
     setIsMounted(true);
   }, []);
-  const effectiveLocatorTarget = useMemo(() => {
-    if (!locatorTarget) return null;
-    return {
-      ...locatorTarget,
-      stackIndex: locatorStackIndex
-    };
-  }, [locatorTarget, locatorStackIndex]);
+  const wrappedStartAutoScan = useCallback(() => {
+    startAutoScan(settings.hideNodeModules);
+  }, [startAutoScan, settings.hideNodeModules]);
   const contextValue = useMemo(
     () => ({
       settings,
@@ -649,7 +702,7 @@ function UILintProvider({
       setInspectedElement,
       autoScanState,
       elementIssuesCache,
-      startAutoScan,
+      startAutoScan: wrappedStartAutoScan,
       pauseAutoScan,
       resumeAutoScan,
       stopAutoScan
@@ -662,9 +715,10 @@ function UILintProvider({
       locatorGoUp,
       locatorGoDown,
       inspectedElement,
+      setInspectedElement,
       autoScanState,
       elementIssuesCache,
-      startAutoScan,
+      wrappedStartAutoScan,
       pauseAutoScan,
       resumeAutoScan,
       stopAutoScan
@@ -681,10 +735,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-7TFNXFZJ.js"),
-      import("./InspectionPanel-54HO4UI5.js"),
-      import("./LocatorOverlay-AXB5VERJ.js"),
-      import("./ElementBadges-64UOI6QT.js")
+      import("./UILintToolbar-57XAWTGK.js"),
+      import("./InspectionPanel-FRJB6CJ6.js"),
+      import("./LocatorOverlay-O4XZCAPC.js"),
+      import("./ElementBadges-2WRRHFLI.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,
@@ -710,9 +764,6 @@ function UILintUI() {
 }
 
 export {
-  FILE_COLORS,
-  DEFAULT_SETTINGS,
-  DATA_UILINT_ID,
   getFiberFromElement,
   getDebugSource,
   getDebugOwner,
@@ -725,6 +776,9 @@ export {
   getElementById,
   updateElementRects,
   buildEditorUrl,
+  FILE_COLORS,
+  DEFAULT_SETTINGS,
+  DATA_UILINT_ID,
   useUILintContext,
   UILintProvider
 };