uilint-react 0.1.25 → 0.1.26

package/dist/{ElementBadges-2WRRHFLI.js → ElementBadges-HFQNIIO2.js}

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-45MPASAN.js";
+} from "./chunk-5VJ2Q2QW.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";

package/dist/{InspectionPanel-FRJB6CJ6.js → InspectionPanel-4OWY4FVY.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-SIVHTQ2P.js";
-import "./chunk-45MPASAN.js";
+} from "./chunk-QYRESGFG.js";
+import "./chunk-5VJ2Q2QW.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-O4XZCAPC.js → LocatorOverlay-JJDOKNOS.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-RA27RIJ2.js";
-import "./chunk-45MPASAN.js";
+} from "./chunk-XLIDEQXH.js";
+import "./chunk-5VJ2Q2QW.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-57XAWTGK.js → UILintToolbar-GMZ6YSI2.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-ORYG2TNM.js";
-import "./chunk-45MPASAN.js";
+} from "./chunk-7X5HN55P.js";
+import "./chunk-5VJ2Q2QW.js";
 export {
   UILintToolbar
 };

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

@@ -130,17 +130,18 @@ function scanDOMForSources(root = document.body, hideNodeModules = true) {
   let node = walker.currentNode;
   while (node) {
     if (node instanceof Element) {
-      let source = getSourceFromDataLoc(node);
+      let source = null;
       let componentStack = [];
-      if (!source) {
-        const fiber = getFiberFromElement(node);
-        if (fiber) {
-          source = getDebugSource(fiber);
-          if (!source && fiber._debugOwner) {
-            source = getDebugSource(fiber._debugOwner);
-          }
-          componentStack = getComponentStack(fiber);
+      const fiber = getFiberFromElement(node);
+      if (fiber) {
+        source = getDebugSource(fiber);
+        if (!source && fiber._debugOwner) {
+          source = getDebugSource(fiber._debugOwner);
         }
+        componentStack = getComponentStack(fiber);
+      }
+      if (!source) {
+        source = getSourceFromDataLoc(node);
       }
       if (hideNodeModules && source && isNodeModulesPath(source.fileName)) {
         const appSource = componentStack.find(
@@ -261,67 +262,78 @@ var DEFAULT_AUTO_SCAN_STATE = {
 };
 var DATA_UILINT_ID = "data-ui-lint-id";
 
-// src/components/ui-lint/UILintProvider.tsx
-import {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  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"
-    };
+function getDataLocFromId(id) {
+  if (id.startsWith("loc:")) {
+    return id.slice(4);
   }
+  return null;
+}
+async function scanFileForIssues(sourceFile) {
+  if (sourceFile.elements.length === 0) {
+    return { issues: [] };
+  }
+  const filePath = sourceFile.path;
   try {
     const sourceResponse = await fetch(
-      `/api/.uilint/source?path=${encodeURIComponent(element.source.fileName)}`
+      `/api/.uilint/source?path=${encodeURIComponent(filePath)}`
     );
     if (!sourceResponse.ok) {
-      return {
-        elementId: element.id,
-        issues: [],
-        status: "error"
-      };
+      return { issues: [], error: true };
     }
     const sourceData = await sourceResponse.json();
+    const dataLocs = [];
+    for (const el of sourceFile.elements) {
+      const dataLoc = getDataLocFromId(el.id);
+      if (dataLoc) {
+        dataLocs.push(dataLoc);
+      }
+    }
     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
+        filePath: sourceData.relativePath || filePath,
+        dataLocs
       })
     });
     if (!analyzeResponse.ok) {
-      return {
-        elementId: element.id,
-        issues: [],
-        status: "error"
-      };
+      return { issues: [], error: true };
     }
     const result = await analyzeResponse.json();
-    return {
-      elementId: element.id,
-      issues: result.issues || [],
-      status: "complete"
-    };
+    return { issues: result.issues || [] };
   } catch {
-    return {
-      elementId: element.id,
-      issues: [],
-      status: "error"
-    };
+    return { issues: [], error: true };
+  }
+}
+function distributeIssuesToElements(issues, elements, updateElementIssue, hasError) {
+  const dataLocToElementId = /* @__PURE__ */ new Map();
+  for (const el of elements) {
+    const dataLoc = getDataLocFromId(el.id);
+    if (dataLoc) {
+      dataLocToElementId.set(dataLoc, el.id);
+    }
+  }
+  const issuesByElement = /* @__PURE__ */ new Map();
+  for (const issue of issues) {
+    if (issue.dataLoc) {
+      const elementId = dataLocToElementId.get(issue.dataLoc);
+      if (elementId) {
+        const existing = issuesByElement.get(elementId) || [];
+        existing.push(issue);
+        issuesByElement.set(elementId, existing);
+      }
+    }
+  }
+  for (const el of elements) {
+    const elementIssues = issuesByElement.get(el.id) || [];
+    updateElementIssue(el.id, {
+      elementId: el.id,
+      issues: elementIssues,
+      status: hasError ? "error" : "complete"
+    });
   }
 }
 var useUILintStore = create()((set, get) => ({
@@ -350,6 +362,31 @@ var useUILintStore = create()((set, get) => ({
   // ============ Inspection ============
   inspectedElement: null,
   setInspectedElement: (el) => set({ inspectedElement: el }),
+  // ============ Manual Scan (InspectionPanel) ============
+  manualScanCache: /* @__PURE__ */ new Map(),
+  upsertManualScan: (key, patch) => set((state) => {
+    const next = new Map(state.manualScanCache);
+    const existing = next.get(key);
+    const base = existing ?? {
+      key,
+      status: "idle",
+      issues: [],
+      updatedAt: Date.now()
+    };
+    next.set(key, {
+      ...base,
+      ...patch,
+      key,
+      updatedAt: Date.now()
+    });
+    return { manualScanCache: next };
+  }),
+  clearManualScan: (key) => set((state) => {
+    if (!state.manualScanCache.has(key)) return state;
+    const next = new Map(state.manualScanCache);
+    next.delete(key);
+    return { manualScanCache: next };
+  }),
   // ============ Auto-Scan ============
   autoScanState: DEFAULT_AUTO_SCAN_STATE,
   elementIssuesCache: /* @__PURE__ */ new Map(),
@@ -419,7 +456,16 @@ var useUILintStore = create()((set, get) => ({
     });
   },
   _runScanLoop: async (elements, startIndex) => {
-    for (let i = startIndex; i < elements.length; i++) {
+    const sourceFiles = groupBySourceFile(elements);
+    let processedElements = 0;
+    let skipElements = startIndex;
+    for (const sourceFile of sourceFiles) {
+      if (skipElements >= sourceFile.elements.length) {
+        skipElements -= sourceFile.elements.length;
+        processedElements += sourceFile.elements.length;
+        continue;
+      }
+      skipElements = 0;
       if (get().scanAborted) {
         set({
           scanLock: false,
@@ -437,16 +483,23 @@ var useUILintStore = create()((set, get) => ({
           return;
         }
       }
-      const element = elements[i];
-      get()._setScanState({ currentIndex: i });
-      get().updateElementIssue(element.id, {
-        elementId: element.id,
-        issues: [],
-        status: "scanning"
-      });
+      get()._setScanState({ currentIndex: processedElements });
+      for (const el of sourceFile.elements) {
+        get().updateElementIssue(el.id, {
+          elementId: el.id,
+          issues: [],
+          status: "scanning"
+        });
+      }
       await new Promise((resolve) => requestAnimationFrame(resolve));
-      const result = await scanElementForIssues(element);
-      get().updateElementIssue(element.id, result);
+      const { issues, error } = await scanFileForIssues(sourceFile);
+      distributeIssuesToElements(
+        issues,
+        sourceFile.elements,
+        get().updateElementIssue,
+        error ?? false
+      );
+      processedElements += sourceFile.elements.length;
       await new Promise((resolve) => requestAnimationFrame(resolve));
     }
     set({
@@ -472,6 +525,14 @@ function useEffectiveLocatorTarget() {
 }
 
 // src/components/ui-lint/UILintProvider.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo
+} from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var UILintContext = createContext(null);
 function useUILintContext() {
@@ -522,17 +583,18 @@ function UILintProvider({
   const getLocatorTargetFromElement = useCallback(
     (element) => {
       if (element.closest("[data-ui-lint]")) return null;
-      let source = getSourceFromDataLoc(element);
+      let source = null;
       let componentStack = [];
-      if (!source) {
-        const fiber = getFiberFromElement(element);
-        if (fiber) {
-          source = getDebugSource(fiber);
-          if (!source && fiber._debugOwner) {
-            source = getDebugSource(fiber._debugOwner);
-          }
-          componentStack = getComponentStack(fiber);
+      const fiber = getFiberFromElement(element);
+      if (fiber) {
+        source = getDebugSource(fiber);
+        if (!source && fiber._debugOwner) {
+          source = getDebugSource(fiber._debugOwner);
         }
+        componentStack = getComponentStack(fiber);
+      }
+      if (!source) {
+        source = getSourceFromDataLoc(element);
       }
       if (!source && componentStack.length === 0) return null;
       if (settings.hideNodeModules && source && isNodeModulesPath(source.fileName)) {
@@ -583,7 +645,9 @@ function UILintProvider({
   );
   const handleLocatorClick = useCallback(
     (e) => {
-      if (!altKeyHeld || !effectiveLocatorTarget) return;
+      if (!altKeyHeld && !inspectedElement || !effectiveLocatorTarget) return;
+      const targetEl = e.target;
+      if (targetEl?.closest?.("[data-ui-lint]")) return;
       e.preventDefault();
       e.stopPropagation();
       let source = effectiveLocatorTarget.source;
@@ -599,16 +663,15 @@ function UILintProvider({
         componentStack: effectiveLocatorTarget.componentStack,
         rect: effectiveLocatorTarget.rect
       });
-      setAltKeyHeld(false);
       setLocatorTarget(null);
       setLocatorStackIndex(0);
     },
     [
       altKeyHeld,
       effectiveLocatorTarget,
+      inspectedElement,
       locatorStackIndex,
       setInspectedElement,
-      setAltKeyHeld,
       setLocatorTarget,
       setLocatorStackIndex
     ]
@@ -646,9 +709,7 @@ function UILintProvider({
     if (!isBrowser() || !enabled) return;
     if (!altKeyHeld && !inspectedElement) return;
     window.addEventListener("mousemove", handleMouseMove);
-    if (altKeyHeld) {
-      window.addEventListener("click", handleLocatorClick, true);
-    }
+    window.addEventListener("click", handleLocatorClick, true);
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("click", handleLocatorClick, true);
@@ -735,10 +796,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-57XAWTGK.js"),
-      import("./InspectionPanel-FRJB6CJ6.js"),
-      import("./LocatorOverlay-O4XZCAPC.js"),
-      import("./ElementBadges-2WRRHFLI.js")
+      import("./UILintToolbar-GMZ6YSI2.js"),
+      import("./InspectionPanel-4OWY4FVY.js"),
+      import("./LocatorOverlay-JJDOKNOS.js"),
+      import("./ElementBadges-HFQNIIO2.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,
@@ -779,6 +840,7 @@ export {
   FILE_COLORS,
   DEFAULT_SETTINGS,
   DATA_UILINT_ID,
+  useUILintStore,
   useUILintContext,
   UILintProvider
 };

package/dist/{chunk-ORYG2TNM.js → chunk-7X5HN55P.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-45MPASAN.js";
+} from "./chunk-5VJ2Q2QW.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { useState, useRef, useEffect } from "react";