uilint-react 0.1.38 → 0.1.39

package/dist/{chunk-V4273T5B.js → chunk-7434TUMX.js}

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

package/dist/{chunk-PU6XPNPN.js → chunk-ILK73X6L.js}

@@ -70,6 +70,7 @@ function shouldSkipElement(element) {
 function scanDOMForSources(root = document.body, hideNodeModules = true) {
   const elements = [];
   elementCounter = 0;
+  const occurrenceByDataLoc = /* @__PURE__ */ new Map();
   cleanupDataAttributes();
   const locElements = root.querySelectorAll("[data-loc]");
   for (const el of locElements) {
@@ -80,7 +81,9 @@ function scanDOMForSources(root = document.body, hideNodeModules = true) {
       continue;
     }
     const dataLoc = el.getAttribute("data-loc");
-    const id = `loc:${dataLoc}`;
+    const occurrence = (occurrenceByDataLoc.get(dataLoc) ?? 0) + 1;
+    occurrenceByDataLoc.set(dataLoc, occurrence);
+    const id = `loc:${dataLoc}#${occurrence}`;
     el.setAttribute(DATA_ATTR, id);
     elements.push({
       id,
@@ -186,7 +189,8 @@ var DATA_UILINT_ID = "data-ui-lint-id";
 import { create } from "zustand";
 function getDataLocFromId(id) {
   if (id.startsWith("loc:")) {
-    return id.slice(4);
+    const raw = id.slice(4);
+    return raw.split("#")[0] || null;
   }
   return null;
 }
@@ -211,21 +215,25 @@ async function scanFileForIssues(sourceFile, store) {
   return { issues };
 }
 function distributeIssuesToElements(issues, elements, updateElementIssue, hasError) {
-  const dataLocToElementId = /* @__PURE__ */ new Map();
+  const dataLocToElementIds = /* @__PURE__ */ new Map();
   for (const el of elements) {
     const dataLoc = getDataLocFromId(el.id);
     if (dataLoc) {
-      dataLocToElementId.set(dataLoc, el.id);
+      const existing = dataLocToElementIds.get(dataLoc);
+      if (existing) existing.push(el.id);
+      else dataLocToElementIds.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);
+      const elementIds = dataLocToElementIds.get(issue.dataLoc);
+      if (elementIds) {
+        for (const elementId of elementIds) {
+          const existing = issuesByElement.get(elementId) || [];
+          existing.push(issue);
+          issuesByElement.set(elementId, existing);
+        }
       }
     }
   }
@@ -265,12 +273,11 @@ var useUILintStore = create()((set, get) => ({
   // ============ Inspection ============
   inspectedElement: null,
   setInspectedElement: (el) => set({ inspectedElement: el }),
-  // ============ Auto-Scan ============
+  // ============ Live Scanning ============
+  liveScanEnabled: false,
   autoScanState: DEFAULT_AUTO_SCAN_STATE,
   elementIssuesCache: /* @__PURE__ */ new Map(),
   scanLock: false,
-  scanPaused: false,
-  scanAborted: false,
   _setScanState: (partial) => set((state) => ({
     autoScanState: { ...state.autoScanState, ...partial }
   })),
@@ -279,17 +286,15 @@ var useUILintStore = create()((set, get) => ({
     newCache.set(id, issue);
     return { elementIssuesCache: newCache };
   }),
-  startAutoScan: async (hideNodeModules) => {
+  enableLiveScan: async (hideNodeModules) => {
     const state = get();
     if (state.scanLock) {
       console.warn("UILint: Scan already in progress");
       return;
     }
     set({
-      scanLock: true,
-      scanPaused: false,
-      scanAborted: false,
-      pendingNewElements: 0
+      liveScanEnabled: true,
+      scanLock: true
     });
     const elements = scanDOMForSources(document.body, hideNodeModules);
     const initialCache = /* @__PURE__ */ new Map();
@@ -309,60 +314,72 @@ var useUILintStore = create()((set, get) => ({
         elements
       }
     });
-    await get()._runScanLoop(elements, 0);
-  },
-  pauseAutoScan: () => {
-    set({ scanPaused: true });
-    get()._setScanState({ status: "paused" });
+    await get()._runScanLoop(elements);
   },
-  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: () => {
+  disableLiveScan: () => {
     set({
-      scanAborted: true,
-      scanPaused: false,
+      liveScanEnabled: false,
       scanLock: false,
       autoScanState: DEFAULT_AUTO_SCAN_STATE,
-      elementIssuesCache: /* @__PURE__ */ new Map(),
-      pendingNewElements: 0
+      elementIssuesCache: /* @__PURE__ */ new Map()
     });
   },
-  _runScanLoop: async (elements, startIndex) => {
+  scanNewElements: async (newElements) => {
+    const state = get();
+    if (!state.liveScanEnabled) return;
+    if (newElements.length === 0) return;
+    set((s) => {
+      const newCache = new Map(s.elementIssuesCache);
+      for (const el of newElements) {
+        newCache.set(el.id, {
+          elementId: el.id,
+          issues: [],
+          status: "pending"
+        });
+      }
+      return {
+        elementIssuesCache: newCache,
+        autoScanState: {
+          ...s.autoScanState,
+          elements: [...s.autoScanState.elements, ...newElements],
+          totalElements: s.autoScanState.totalElements + newElements.length
+        }
+      };
+    });
+    const sourceFiles = groupBySourceFile(newElements);
+    for (const sourceFile of sourceFiles) {
+      for (const el of sourceFile.elements) {
+        get().updateElementIssue(el.id, {
+          elementId: el.id,
+          issues: [],
+          status: "scanning"
+        });
+      }
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const { issues, error } = await scanFileForIssues(sourceFile, get());
+      distributeIssuesToElements(
+        issues,
+        sourceFile.elements,
+        get().updateElementIssue,
+        error ?? false
+      );
+      if (get().wsConnected && get().wsConnection) {
+        get().subscribeToFile(sourceFile.path);
+      }
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+  },
+  _runScanLoop: async (elements) => {
     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) {
+      if (!get().liveScanEnabled) {
         set({
           scanLock: false,
-          autoScanState: { ...get().autoScanState, status: "idle" }
+          autoScanState: DEFAULT_AUTO_SCAN_STATE
         });
         return;
       }
-      while (get().scanPaused) {
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        if (get().scanAborted) {
-          set({
-            scanLock: false,
-            autoScanState: { ...get().autoScanState, status: "idle" }
-          });
-          return;
-        }
-      }
       get()._setScanState({ currentIndex: processedElements });
       for (const el of sourceFile.elements) {
         get().updateElementIssue(el.id, {
@@ -394,10 +411,7 @@ var useUILintStore = create()((set, get) => ({
       }
     });
   },
-  // ============ Navigation Detection ============
-  pendingNewElements: 0,
-  setPendingNewElements: (count) => set({ pendingNewElements: count }),
-  clearPendingNewElements: () => set({ pendingNewElements: 0 }),
+  // ============ DOM Observer ============
   removeStaleResults: (elementIds) => set((state) => {
     const newCache = new Map(state.elementIssuesCache);
     const newElements = state.autoScanState.elements.filter(
@@ -415,6 +429,15 @@ var useUILintStore = create()((set, get) => ({
       }
     };
   }),
+  // ============ File/Element Selection ============
+  hoveredFilePath: null,
+  selectedFilePath: null,
+  selectedElementId: null,
+  hoveredElementId: null,
+  setHoveredFilePath: (path) => set({ hoveredFilePath: path }),
+  setSelectedFilePath: (path) => set({ selectedFilePath: path }),
+  setSelectedElementId: (id) => set({ selectedElementId: id }),
+  setHoveredElementId: (id) => set({ hoveredElementId: id }),
   // ============ WebSocket ============
   wsConnection: null,
   wsConnected: false,
@@ -573,7 +596,7 @@ var useUILintStore = create()((set, get) => ({
           return { eslintIssuesCache: next };
         });
         const state = get();
-        if (state.autoScanState.status !== "idle") {
+        if (state.liveScanEnabled) {
           const sourceFiles = groupBySourceFile(state.autoScanState.elements);
           const sf = sourceFiles.find((s) => s.path === filePath);
           if (sf) {
@@ -633,7 +656,7 @@ var useUILintStore = create()((set, get) => ({
           return { eslintIssuesCache: next };
         });
         const state = get();
-        if (state.autoScanState.status !== "idle") {
+        if (state.liveScanEnabled) {
           const sourceFiles = groupBySourceFile(state.autoScanState.elements);
           const sf = sourceFiles.find((s) => s.path === filePath);
           if (sf) {
@@ -685,50 +708,53 @@ function useDOMObserver(enabled = true) {
   const reconcileTimeoutRef = useRef(
     null
   );
-  const lastScanElementIdsRef = useRef(/* @__PURE__ */ new Set());
-  const setPendingNewElements = useUILintStore(
-    (s) => s.setPendingNewElements
-  );
+  const knownElementIdsRef = useRef(/* @__PURE__ */ new Set());
+  const liveScanEnabled = useUILintStore((s) => s.liveScanEnabled);
+  const settings = useUILintStore((s) => s.settings);
+  const autoScanState = useUILintStore((s) => s.autoScanState);
   const removeStaleResults = useUILintStore(
     (s) => s.removeStaleResults
   );
-  const autoScanState = useUILintStore((s) => s.autoScanState);
+  const scanNewElements = useUILintStore((s) => s.scanNewElements);
   useEffect(() => {
-    if (autoScanState.status === "complete") {
+    if (autoScanState.elements.length > 0) {
       const ids = new Set(autoScanState.elements.map((el) => el.id));
-      lastScanElementIdsRef.current = ids;
+      knownElementIdsRef.current = ids;
     }
-  }, [autoScanState.status, autoScanState.elements]);
+  }, [autoScanState.elements]);
   const reconcileElements = useCallback(() => {
-    const currentElements = document.querySelectorAll("[data-loc]");
-    const currentIds = /* @__PURE__ */ new Set();
+    if (!liveScanEnabled) return;
+    const currentElements = scanDOMForSources(
+      document.body,
+      settings.hideNodeModules
+    );
+    const currentIds = new Set(currentElements.map((el) => el.id));
+    const knownIds = knownElementIdsRef.current;
+    const newElements = [];
     for (const el of currentElements) {
-      const dataLoc = el.getAttribute("data-loc");
-      if (dataLoc) {
-        currentIds.add(`loc:${dataLoc}`);
-      }
-    }
-    const lastScanIds = lastScanElementIdsRef.current;
-    if (lastScanIds.size === 0) return;
-    const newElementIds = [];
-    for (const id of currentIds) {
-      if (!lastScanIds.has(id)) {
-        newElementIds.push(id);
+      if (!knownIds.has(el.id)) {
+        newElements.push(el);
       }
     }
     const removedElementIds = [];
-    for (const id of lastScanIds) {
+    for (const id of knownIds) {
       if (!currentIds.has(id)) {
         removedElementIds.push(id);
       }
     }
-    if (newElementIds.length > 0) {
-      setPendingNewElements(newElementIds.length);
+    knownElementIdsRef.current = currentIds;
+    if (newElements.length > 0) {
+      scanNewElements(newElements);
     }
     if (removedElementIds.length > 0) {
       removeStaleResults(removedElementIds);
     }
-  }, [setPendingNewElements, removeStaleResults]);
+  }, [
+    liveScanEnabled,
+    settings.hideNodeModules,
+    scanNewElements,
+    removeStaleResults
+  ]);
   const debouncedReconcile = useCallback(() => {
     if (reconcileTimeoutRef.current) {
       clearTimeout(reconcileTimeoutRef.current);
@@ -819,14 +845,15 @@ function UILintProvider({
   const setInspectedElement = useUILintStore(
     (s) => s.setInspectedElement
   );
+  const liveScanEnabled = useUILintStore((s) => s.liveScanEnabled);
   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 storeEnableLiveScan = useUILintStore(
+    (s) => s.enableLiveScan
+  );
+  const disableLiveScan = useUILintStore((s) => s.disableLiveScan);
   const connectWebSocket = useUILintStore(
     (s) => s.connectWebSocket
   );
@@ -961,9 +988,9 @@ function UILintProvider({
       disconnectWebSocket();
     };
   }, [enabled, isMounted, connectWebSocket, disconnectWebSocket]);
-  const wrappedStartAutoScan = useCallback2(() => {
-    startAutoScan(settings.hideNodeModules);
-  }, [startAutoScan, settings.hideNodeModules]);
+  const enableLiveScan = useCallback2(() => {
+    storeEnableLiveScan(settings.hideNodeModules);
+  }, [storeEnableLiveScan, settings.hideNodeModules]);
   const contextValue = useMemo(
     () => ({
       settings,
@@ -972,12 +999,11 @@ function UILintProvider({
       locatorTarget,
       inspectedElement,
       setInspectedElement,
+      liveScanEnabled,
       autoScanState,
       elementIssuesCache,
-      startAutoScan: wrappedStartAutoScan,
-      pauseAutoScan,
-      resumeAutoScan,
-      stopAutoScan
+      enableLiveScan,
+      disableLiveScan
     }),
     [
       settings,
@@ -986,12 +1012,11 @@ function UILintProvider({
       locatorTarget,
       inspectedElement,
       setInspectedElement,
+      liveScanEnabled,
       autoScanState,
       elementIssuesCache,
-      wrappedStartAutoScan,
-      pauseAutoScan,
-      resumeAutoScan,
-      stopAutoScan
+      enableLiveScan,
+      disableLiveScan
     ]
   );
   const shouldRenderUI = enabled && isMounted;
@@ -1001,14 +1026,14 @@ function UILintProvider({
   ] });
 }
 function UILintUI() {
-  const { altKeyHeld, inspectedElement, autoScanState } = useUILintContext();
+  const { altKeyHeld, inspectedElement, liveScanEnabled } = useUILintContext();
   const [components, setComponents] = useState(null);
   useEffect2(() => {
     Promise.all([
-      import("./UILintToolbar-OQY2V7Q7.js"),
-      import("./InspectionPanel-7N56XBWA.js"),
-      import("./LocatorOverlay-RDDLASGB.js"),
-      import("./ElementBadges-J2ELN2PU.js")
+      import("./UILintToolbar-4SH33QJU.js"),
+      import("./InspectionPanel-VAHZBVVL.js"),
+      import("./LocatorOverlay-BEJYHU6S.js"),
+      import("./ElementBadges-3AFD2W4Z.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,
@@ -1021,11 +1046,10 @@ function UILintUI() {
   }, []);
   if (!components) return null;
   const { Toolbar, Panel, LocatorOverlay, InspectedHighlight, ElementBadges } = components;
-  const showBadges = autoScanState.status !== "idle";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Toolbar, {}),
     (altKeyHeld || inspectedElement) && /* @__PURE__ */ jsx(LocatorOverlay, {}),
-    showBadges && /* @__PURE__ */ jsx(ElementBadges, {}),
+    liveScanEnabled && /* @__PURE__ */ jsx(ElementBadges, {}),
     inspectedElement && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(InspectedHighlight, {}),
       /* @__PURE__ */ jsx(Panel, {})

package/dist/{chunk-GZOQ6QWC.js → chunk-NCNRCF5A.js}

@@ -2,7 +2,7 @@
 import {
   buildEditorUrl,
   useUILintContext
-} from "./chunk-PU6XPNPN.js";
+} from "./chunk-ILK73X6L.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback, useMemo } from "react";

package/dist/index.d.ts

@@ -19,7 +19,10 @@ interface SourceLocation {
  * Source is always present from data-loc attribute
  */
 interface ScannedElement {
-    /** Unique ID from data-loc value (format: "loc:path:line:column") */
+    /**
+     * Unique per-instance ID derived from data-loc.
+     * Format: "loc:path:line:column#occurrence"
+     */
     id: string;
     element: Element;
     tagName: string;
@@ -109,18 +112,16 @@ interface UILintContextValue {
     inspectedElement: InspectedElement | null;
     /** Set the element to inspect (opens sidebar) */
     setInspectedElement: (element: InspectedElement | null) => void;
-    /** Auto-scan state */
+    /** Whether live scanning is enabled */
+    liveScanEnabled: boolean;
+    /** Auto-scan state (for progress tracking) */
     autoScanState: AutoScanState;
-    /** Cache of element issues from auto-scan */
+    /** Cache of element issues from scanning */
     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;
+    /** Enable live scanning */
+    enableLiveScan: () => void;
+    /** Disable live scanning */
+    disableLiveScan: () => void;
 }
 /**
  * Props for the UILintProvider component
@@ -168,17 +169,22 @@ declare function useUILintContext(): UILintContextValue;
 declare function UILintProvider({ children, enabled, }: UILintProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
- * UILint Toolbar - Segmented pill with Scan button and settings
+ * UILint Toolbar - Three-segment pill for live scanning
  *
  * Design:
- * ┌─────────────────────────────────────┐
- * │  [🔍 Scan]  │  [...]               │
- * └─────────────────────────────────────┘
- *        ⌥+Click to inspect
+ * ┌────────────────────────────────────────┐
+ * │  [👁 Toggle]  │  [Issues]  │  [...]   │
+ * └────────────────────────────────────────┘
+ *              ⌥+Click to inspect
+ *
+ * Segments:
+ * 1. Toggle: Enable/disable live scanning mode
+ * 2. Issues: Show issue count, opens results panel
+ * 3. Settings: Ellipsis for settings popover
  */
 
 /**
- * Main Toolbar Component - Segmented pill with Scan + Settings
+ * Main Toolbar Component - Three-segment pill
  */
 declare function UILintToolbar(): React$1.ReactPortal | null;
 

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-WEBVLQL5.js";
+} from "./chunk-4TLFW7LD.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-GZOQ6QWC.js";
+} from "./chunk-NCNRCF5A.js";
 import {
   LocatorOverlay
-} from "./chunk-V4273T5B.js";
+} from "./chunk-7434TUMX.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -28,7 +28,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-PU6XPNPN.js";
+} from "./chunk-ILK73X6L.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "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.38",
+    "uilint-core": "^0.1.39",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {