uilint-react 0.1.37 → 0.1.39

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

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/ui-lint/fiber-utils.ts
+// src/components/ui-lint/dom-utils.ts
 var DATA_ATTR = "data-ui-lint-id";
 var COLORS = [
   "#3B82F6",
@@ -27,30 +27,6 @@ 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$"));
-  if (!fiberKey) return null;
-  return element[fiberKey];
-}
-function getDebugSource(fiber) {
-  if (!fiber._debugSource) return null;
-  return {
-    fileName: fiber._debugSource.fileName,
-    lineNumber: fiber._debugSource.lineNumber,
-    columnNumber: fiber._debugSource.columnNumber
-  };
-}
 function getSourceFromDataLoc(element) {
   const loc = element.getAttribute("data-loc");
   if (!loc) return null;
@@ -74,31 +50,6 @@ function getSourceFromDataLoc(element) {
   }
   return null;
 }
-function getDebugOwner(fiber) {
-  return fiber._debugOwner ?? null;
-}
-function getComponentName(fiber) {
-  if (!fiber.type) return "Unknown";
-  if (typeof fiber.type === "string") return fiber.type;
-  if (typeof fiber.type === "function") {
-    const fn = fiber.type;
-    return fn.displayName || fn.name || "Anonymous";
-  }
-  return "Unknown";
-}
-function getComponentStack(fiber) {
-  const stack = [];
-  let current = fiber._debugOwner ?? null;
-  while (current && stack.length < 20) {
-    const name = getComponentName(current);
-    const source = getDebugSource(current);
-    if (current.tag <= 2 && name !== "Unknown") {
-      stack.push({ name, source });
-    }
-    current = current._debugOwner ?? current.return;
-  }
-  return stack;
-}
 function isNodeModulesPath(path) {
   return path.includes("node_modules");
 }
@@ -119,57 +70,29 @@ function shouldSkipElement(element) {
 function scanDOMForSources(root = document.body, hideNodeModules = true) {
   const elements = [];
   elementCounter = 0;
+  const occurrenceByDataLoc = /* @__PURE__ */ new Map();
   cleanupDataAttributes();
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: (node2) => {
-      const el = node2;
-      if (shouldSkipElement(el)) return NodeFilter.FILTER_REJECT;
-      return NodeFilter.FILTER_ACCEPT;
-    }
-  });
-  let node = walker.currentNode;
-  while (node) {
-    if (node instanceof Element) {
-      let source = null;
-      let componentStack = [];
-      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(
-          (c) => c.source && !isNodeModulesPath(c.source.fileName)
-        );
-        if (appSource?.source) {
-          source = appSource.source;
-        } else {
-          node = walker.nextNode();
-          continue;
-        }
-      }
-      if (source) {
-        const id = generateStableId(node, source);
-        node.setAttribute(DATA_ATTR, id);
-        const scannedElement = {
-          id,
-          element: node,
-          tagName: node.tagName.toLowerCase(),
-          className: typeof node.className === "string" ? node.className : "",
-          source,
-          componentStack,
-          rect: node.getBoundingClientRect()
-        };
-        elements.push(scannedElement);
-      }
+  const locElements = root.querySelectorAll("[data-loc]");
+  for (const el of locElements) {
+    if (shouldSkipElement(el)) continue;
+    const source = getSourceFromDataLoc(el);
+    if (!source) continue;
+    if (hideNodeModules && isNodeModulesPath(source.fileName)) {
+      continue;
     }
-    node = walker.nextNode();
+    const dataLoc = el.getAttribute("data-loc");
+    const occurrence = (occurrenceByDataLoc.get(dataLoc) ?? 0) + 1;
+    occurrenceByDataLoc.set(dataLoc, occurrence);
+    const id = `loc:${dataLoc}#${occurrence}`;
+    el.setAttribute(DATA_ATTR, id);
+    elements.push({
+      id,
+      element: el,
+      tagName: el.tagName.toLowerCase(),
+      className: typeof el.className === "string" ? el.className : "",
+      source,
+      rect: el.getBoundingClientRect()
+    });
   }
   return elements;
 }
@@ -184,12 +107,12 @@ function groupBySourceFile(elements) {
   }
   const sourceFiles = [];
   let colorIndex = 0;
-  for (const [path, elements2] of fileMap) {
+  for (const [path, fileElements] of fileMap) {
     sourceFiles.push({
       path,
       displayName: getDisplayName(path),
       color: COLORS[colorIndex % COLORS.length],
-      elements: elements2
+      elements: fileElements
     });
     colorIndex++;
   }
@@ -266,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;
 }
@@ -291,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);
+        }
       }
     }
   }
@@ -342,27 +270,14 @@ var useUILintStore = create()((set, get) => ({
   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 ============
+  // ============ 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 }
   })),
@@ -371,16 +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
+      liveScanEnabled: true,
+      scanLock: true
     });
     const elements = scanDOMForSources(document.body, hideNodeModules);
     const initialCache = /* @__PURE__ */ new Map();
@@ -400,59 +314,72 @@ var useUILintStore = create()((set, get) => ({
         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
-    );
+    await get()._runScanLoop(elements);
   },
-  stopAutoScan: () => {
+  disableLiveScan: () => {
     set({
-      scanAborted: true,
-      scanPaused: false,
+      liveScanEnabled: false,
       scanLock: false,
       autoScanState: DEFAULT_AUTO_SCAN_STATE,
       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, {
@@ -484,6 +411,33 @@ var useUILintStore = create()((set, get) => ({
       }
     });
   },
+  // ============ DOM Observer ============
+  removeStaleResults: (elementIds) => set((state) => {
+    const newCache = new Map(state.elementIssuesCache);
+    const newElements = state.autoScanState.elements.filter(
+      (el) => !elementIds.includes(el.id)
+    );
+    for (const id of elementIds) {
+      newCache.delete(id);
+    }
+    return {
+      elementIssuesCache: newCache,
+      autoScanState: {
+        ...state.autoScanState,
+        elements: newElements,
+        totalElements: newElements.length
+      }
+    };
+  }),
+  // ============ 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,
@@ -642,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) {
@@ -702,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) {
@@ -735,27 +689,131 @@ var useUILintStore = create()((set, get) => ({
     get().connectWebSocket(wsUrl);
   }
 }));
-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 {
   createContext,
   useContext,
   useState,
-  useEffect,
-  useCallback,
+  useEffect as useEffect2,
+  useCallback as useCallback2,
   useMemo
 } from "react";
+
+// src/components/ui-lint/useDOMObserver.ts
+import { useEffect, useRef, useCallback } from "react";
+var RECONCILE_DEBOUNCE_MS = 100;
+function useDOMObserver(enabled = true) {
+  const observerRef = useRef(null);
+  const reconcileTimeoutRef = useRef(
+    null
+  );
+  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 scanNewElements = useUILintStore((s) => s.scanNewElements);
+  useEffect(() => {
+    if (autoScanState.elements.length > 0) {
+      const ids = new Set(autoScanState.elements.map((el) => el.id));
+      knownElementIdsRef.current = ids;
+    }
+  }, [autoScanState.elements]);
+  const reconcileElements = useCallback(() => {
+    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) {
+      if (!knownIds.has(el.id)) {
+        newElements.push(el);
+      }
+    }
+    const removedElementIds = [];
+    for (const id of knownIds) {
+      if (!currentIds.has(id)) {
+        removedElementIds.push(id);
+      }
+    }
+    knownElementIdsRef.current = currentIds;
+    if (newElements.length > 0) {
+      scanNewElements(newElements);
+    }
+    if (removedElementIds.length > 0) {
+      removeStaleResults(removedElementIds);
+    }
+  }, [
+    liveScanEnabled,
+    settings.hideNodeModules,
+    scanNewElements,
+    removeStaleResults
+  ]);
+  const debouncedReconcile = useCallback(() => {
+    if (reconcileTimeoutRef.current) {
+      clearTimeout(reconcileTimeoutRef.current);
+    }
+    reconcileTimeoutRef.current = setTimeout(() => {
+      reconcileElements();
+      reconcileTimeoutRef.current = null;
+    }, RECONCILE_DEBOUNCE_MS);
+  }, [reconcileElements]);
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof window === "undefined") return;
+    const observer = new MutationObserver((mutations) => {
+      let hasRelevantChanges = false;
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (node instanceof Element) {
+            if (node.hasAttribute("data-loc")) {
+              hasRelevantChanges = true;
+              break;
+            }
+            if (node.querySelector("[data-loc]")) {
+              hasRelevantChanges = true;
+              break;
+            }
+          }
+        }
+        if (hasRelevantChanges) break;
+        for (const node of mutation.removedNodes) {
+          if (node instanceof Element) {
+            if (node.hasAttribute("data-loc") || node.querySelector("[data-loc]")) {
+              hasRelevantChanges = true;
+              break;
+            }
+          }
+        }
+        if (hasRelevantChanges) break;
+      }
+      if (hasRelevantChanges) {
+        debouncedReconcile();
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    observerRef.current = observer;
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+      if (reconcileTimeoutRef.current) {
+        clearTimeout(reconcileTimeoutRef.current);
+        reconcileTimeoutRef.current = null;
+      }
+    };
+  }, [enabled, debouncedReconcile]);
+}
+
+// src/components/ui-lint/UILintProvider.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var UILintContext = createContext(null);
 function useUILintContext() {
@@ -777,76 +835,49 @@ function UILintProvider({
   const updateSettings = useUILintStore((s) => s.updateSettings);
   const altKeyHeld = useUILintStore((s) => s.altKeyHeld);
   const setAltKeyHeld = useUILintStore((s) => s.setAltKeyHeld);
+  const locatorTarget = useUILintStore((s) => s.locatorTarget);
   const setLocatorTarget = useUILintStore(
     (s) => s.setLocatorTarget
   );
-  const locatorStackIndex = useUILintStore(
-    (s) => s.locatorStackIndex
-  );
-  const setLocatorStackIndex = useUILintStore(
-    (s) => s.setLocatorStackIndex
-  );
-  const locatorGoUp = useUILintStore((s) => s.locatorGoUp);
-  const locatorGoDown = useUILintStore((s) => s.locatorGoDown);
   const inspectedElement = useUILintStore(
     (s) => s.inspectedElement
   );
   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
   );
   const disconnectWebSocket = useUILintStore(
     (s) => s.disconnectWebSocket
   );
-  const effectiveLocatorTarget = useEffectiveLocatorTarget();
-  const getLocatorTargetFromElement = useCallback(
+  useDOMObserver(enabled && isMounted);
+  const getLocatorTargetFromElement = useCallback2(
     (element) => {
       if (element.closest("[data-ui-lint]")) return null;
-      let source = null;
-      let componentStack = [];
-      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)) {
-        const appSource = componentStack.find(
-          (c) => c.source && !isNodeModulesPath(c.source.fileName)
-        );
-        if (appSource?.source) {
-          source = appSource.source;
-        } else if (componentStack.length === 0) {
-          return null;
-        }
+      const source = getSourceFromDataLoc(element);
+      if (!source) return null;
+      if (settings.hideNodeModules && isNodeModulesPath(source.fileName)) {
+        return null;
       }
       return {
         element,
         source,
-        componentStack,
-        rect: element.getBoundingClientRect(),
-        stackIndex: 0
+        rect: element.getBoundingClientRect()
       };
     },
     [settings.hideNodeModules]
   );
-  const handleMouseMove = useCallback(
+  const handleMouseMove = useCallback2(
     (e) => {
       if (!altKeyHeld && !inspectedElement) return;
       const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
@@ -872,58 +903,44 @@ function UILintProvider({
       setLocatorTarget
     ]
   );
-  const handleLocatorClick = useCallback(
+  const handleLocatorClick = useCallback2(
     (e) => {
-      if (!altKeyHeld && !inspectedElement || !effectiveLocatorTarget) return;
+      if (!altKeyHeld && !inspectedElement || !locatorTarget) return;
       const targetEl = e.target;
       if (targetEl?.closest?.("[data-ui-lint]")) return;
       e.preventDefault();
       e.stopPropagation();
-      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: effectiveLocatorTarget.element,
-        source,
-        componentStack: effectiveLocatorTarget.componentStack,
-        rect: effectiveLocatorTarget.rect
+        element: locatorTarget.element,
+        source: locatorTarget.source,
+        rect: locatorTarget.rect
       });
       setLocatorTarget(null);
-      setLocatorStackIndex(0);
     },
     [
       altKeyHeld,
-      effectiveLocatorTarget,
+      locatorTarget,
       inspectedElement,
-      locatorStackIndex,
       setInspectedElement,
-      setLocatorTarget,
-      setLocatorStackIndex
+      setLocatorTarget
     ]
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (!isBrowser() || !enabled) return;
     const handleKeyDown = (e) => {
       if (e.key === "Alt") {
         setAltKeyHeld(true);
-        setLocatorStackIndex(0);
       }
     };
     const handleKeyUp = (e) => {
       if (e.key === "Alt") {
         setAltKeyHeld(false);
         setLocatorTarget(null);
-        setLocatorStackIndex(0);
       }
     };
     const handleBlur = () => {
       setAltKeyHeld(false);
       setLocatorTarget(null);
-      setLocatorStackIndex(0);
     };
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
@@ -933,8 +950,8 @@ function UILintProvider({
       window.removeEventListener("keyup", handleKeyUp);
       window.removeEventListener("blur", handleBlur);
     };
-  }, [enabled, setAltKeyHeld, setLocatorTarget, setLocatorStackIndex]);
-  useEffect(() => {
+  }, [enabled, setAltKeyHeld, setLocatorTarget]);
+  useEffect2(() => {
     if (!isBrowser() || !enabled) return;
     if (!altKeyHeld && !inspectedElement) return;
     window.addEventListener("mousemove", handleMouseMove);
@@ -950,21 +967,7 @@ function UILintProvider({
     handleMouseMove,
     handleLocatorClick
   ]);
-  useEffect(() => {
-    if (!isBrowser() || !enabled || !altKeyHeld) return;
-    const handleWheel = (e) => {
-      if (!effectiveLocatorTarget) return;
-      e.preventDefault();
-      if (e.deltaY > 0) {
-        locatorGoUp();
-      } else {
-        locatorGoDown();
-      }
-    };
-    window.addEventListener("wheel", handleWheel, { passive: false });
-    return () => window.removeEventListener("wheel", handleWheel);
-  }, [enabled, altKeyHeld, effectiveLocatorTarget, locatorGoUp, locatorGoDown]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isBrowser() || !enabled) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && inspectedElement) {
@@ -974,10 +977,10 @@ function UILintProvider({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [enabled, inspectedElement, setInspectedElement]);
-  useEffect(() => {
+  useEffect2(() => {
     setIsMounted(true);
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isBrowser() || !enabled) return;
     if (!isMounted) return;
     connectWebSocket();
@@ -985,41 +988,35 @@ function UILintProvider({
       disconnectWebSocket();
     };
   }, [enabled, isMounted, connectWebSocket, disconnectWebSocket]);
-  const wrappedStartAutoScan = useCallback(() => {
-    startAutoScan(settings.hideNodeModules);
-  }, [startAutoScan, settings.hideNodeModules]);
+  const enableLiveScan = useCallback2(() => {
+    storeEnableLiveScan(settings.hideNodeModules);
+  }, [storeEnableLiveScan, settings.hideNodeModules]);
   const contextValue = useMemo(
     () => ({
       settings,
       updateSettings,
       altKeyHeld,
-      locatorTarget: effectiveLocatorTarget,
-      locatorGoUp,
-      locatorGoDown,
+      locatorTarget,
       inspectedElement,
       setInspectedElement,
+      liveScanEnabled,
       autoScanState,
       elementIssuesCache,
-      startAutoScan: wrappedStartAutoScan,
-      pauseAutoScan,
-      resumeAutoScan,
-      stopAutoScan
+      enableLiveScan,
+      disableLiveScan
     }),
     [
       settings,
       updateSettings,
       altKeyHeld,
-      effectiveLocatorTarget,
-      locatorGoUp,
-      locatorGoDown,
+      locatorTarget,
       inspectedElement,
       setInspectedElement,
+      liveScanEnabled,
       autoScanState,
       elementIssuesCache,
-      wrappedStartAutoScan,
-      pauseAutoScan,
-      resumeAutoScan,
-      stopAutoScan
+      enableLiveScan,
+      disableLiveScan
     ]
   );
   const shouldRenderUI = enabled && isMounted;
@@ -1029,14 +1026,14 @@ function UILintProvider({
   ] });
 }
 function UILintUI() {
-  const { altKeyHeld, inspectedElement, autoScanState } = useUILintContext();
+  const { altKeyHeld, inspectedElement, liveScanEnabled } = useUILintContext();
   const [components, setComponents] = useState(null);
-  useEffect(() => {
+  useEffect2(() => {
     Promise.all([
-      import("./UILintToolbar-TM3DVGPO.js"),
-      import("./InspectionPanel-FY7QVWP5.js"),
-      import("./LocatorOverlay-IUZV5OVI.js"),
-      import("./ElementBadges-BASN6P5L.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,
@@ -1049,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, {})
@@ -1062,10 +1058,7 @@ function UILintUI() {
 }
 
 export {
-  getFiberFromElement,
-  getDebugSource,
-  getDebugOwner,
-  getComponentStack,
+  getSourceFromDataLoc,
   isNodeModulesPath,
   getDisplayName,
   scanDOMForSources,