uilint-react 0.1.35 → 0.1.38

package/dist/{chunk-I4JDR36K.js → chunk-PU6XPNPN.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");
 }
@@ -120,56 +71,25 @@ function scanDOMForSources(root = document.body, hideNodeModules = true) {
   const elements = [];
   elementCounter = 0;
   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;
+  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;
     }
-  });
-  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);
-      }
-    }
-    node = walker.nextNode();
+    const dataLoc = el.getAttribute("data-loc");
+    const id = `loc:${dataLoc}`;
+    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 +104,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++;
   }
@@ -342,18 +262,6 @@ 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 }),
@@ -380,7 +288,8 @@ var useUILintStore = create()((set, get) => ({
     set({
       scanLock: true,
       scanPaused: false,
-      scanAborted: false
+      scanAborted: false,
+      pendingNewElements: 0
     });
     const elements = scanDOMForSources(document.body, hideNodeModules);
     const initialCache = /* @__PURE__ */ new Map();
@@ -422,7 +331,8 @@ var useUILintStore = create()((set, get) => ({
       scanPaused: false,
       scanLock: false,
       autoScanState: DEFAULT_AUTO_SCAN_STATE,
-      elementIssuesCache: /* @__PURE__ */ new Map()
+      elementIssuesCache: /* @__PURE__ */ new Map(),
+      pendingNewElements: 0
     });
   },
   _runScanLoop: async (elements, startIndex) => {
@@ -484,6 +394,27 @@ var useUILintStore = create()((set, get) => ({
       }
     });
   },
+  // ============ Navigation Detection ============
+  pendingNewElements: 0,
+  setPendingNewElements: (count) => set({ pendingNewElements: count }),
+  clearPendingNewElements: () => set({ pendingNewElements: 0 }),
+  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
+      }
+    };
+  }),
   // ============ WebSocket ============
   wsConnection: null,
   wsConnected: false,
@@ -735,27 +666,128 @@ 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 lastScanElementIdsRef = useRef(/* @__PURE__ */ new Set());
+  const setPendingNewElements = useUILintStore(
+    (s) => s.setPendingNewElements
+  );
+  const removeStaleResults = useUILintStore(
+    (s) => s.removeStaleResults
+  );
+  const autoScanState = useUILintStore((s) => s.autoScanState);
+  useEffect(() => {
+    if (autoScanState.status === "complete") {
+      const ids = new Set(autoScanState.elements.map((el) => el.id));
+      lastScanElementIdsRef.current = ids;
+    }
+  }, [autoScanState.status, autoScanState.elements]);
+  const reconcileElements = useCallback(() => {
+    const currentElements = document.querySelectorAll("[data-loc]");
+    const currentIds = /* @__PURE__ */ new Set();
+    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);
+      }
+    }
+    const removedElementIds = [];
+    for (const id of lastScanIds) {
+      if (!currentIds.has(id)) {
+        removedElementIds.push(id);
+      }
+    }
+    if (newElementIds.length > 0) {
+      setPendingNewElements(newElementIds.length);
+    }
+    if (removedElementIds.length > 0) {
+      removeStaleResults(removedElementIds);
+    }
+  }, [setPendingNewElements, 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,17 +809,10 @@ 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
   );
@@ -808,45 +833,24 @@ function UILintProvider({
   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 +876,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 +923,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 +940,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 +950,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,7 +961,7 @@ function UILintProvider({
       disconnectWebSocket();
     };
   }, [enabled, isMounted, connectWebSocket, disconnectWebSocket]);
-  const wrappedStartAutoScan = useCallback(() => {
+  const wrappedStartAutoScan = useCallback2(() => {
     startAutoScan(settings.hideNodeModules);
   }, [startAutoScan, settings.hideNodeModules]);
   const contextValue = useMemo(
@@ -993,9 +969,7 @@ function UILintProvider({
       settings,
       updateSettings,
       altKeyHeld,
-      locatorTarget: effectiveLocatorTarget,
-      locatorGoUp,
-      locatorGoDown,
+      locatorTarget,
       inspectedElement,
       setInspectedElement,
       autoScanState,
@@ -1009,9 +983,7 @@ function UILintProvider({
       settings,
       updateSettings,
       altKeyHeld,
-      effectiveLocatorTarget,
-      locatorGoUp,
-      locatorGoDown,
+      locatorTarget,
       inspectedElement,
       setInspectedElement,
       autoScanState,
@@ -1031,12 +1003,12 @@ function UILintProvider({
 function UILintUI() {
   const { altKeyHeld, inspectedElement, autoScanState } = useUILintContext();
   const [components, setComponents] = useState(null);
-  useEffect(() => {
+  useEffect2(() => {
     Promise.all([
-      import("./UILintToolbar-WF5WHENS.js"),
-      import("./InspectionPanel-Z2F7PDVS.js"),
-      import("./LocatorOverlay-YTDVYPJQ.js"),
-      import("./ElementBadges-M7WT4MWJ.js")
+      import("./UILintToolbar-OQY2V7Q7.js"),
+      import("./InspectionPanel-7N56XBWA.js"),
+      import("./LocatorOverlay-RDDLASGB.js"),
+      import("./ElementBadges-J2ELN2PU.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,
@@ -1062,10 +1034,7 @@ function UILintUI() {
 }
 
 export {
-  getFiberFromElement,
-  getDebugSource,
-  getDebugOwner,
-  getComponentStack,
+  getSourceFromDataLoc,
   isNodeModulesPath,
   getDisplayName,
   scanDOMForSources,