uilint-react 0.1.24 → 0.1.25

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

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-I4C3NAUH.js";
+} from "./chunk-45MPASAN.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -19,7 +19,16 @@ var STYLES = {
   font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   shadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
 };
-var PROXIMITY_THRESHOLD = 100;
+var NEAR_DISTANCE = 0;
+var FAR_DISTANCE = 150;
+var MIN_SCALE = 0.5;
+var MAX_SCALE = 1;
+function getScaleFromDistance(distance) {
+  if (distance <= NEAR_DISTANCE) return MAX_SCALE;
+  if (distance >= FAR_DISTANCE) return MIN_SCALE;
+  const t = (distance - NEAR_DISTANCE) / (FAR_DISTANCE - NEAR_DISTANCE);
+  return MAX_SCALE - t * (MAX_SCALE - MIN_SCALE);
+}
 var CLUSTER_THRESHOLD = 24;
 function getBadgeColor(issueCount) {
   if (issueCount === 0) return STYLES.success;
@@ -29,7 +38,7 @@ function getBadgeColor(issueCount) {
 function ElementBadge({
   element,
   issue,
-  isNearCursor,
+  distance,
   onSelect
 }) {
   const [rect, setRect] = useState(null);
@@ -64,16 +73,17 @@ function ElementBadge({
   if (!rect) return null;
   if (rect.top < -50 || rect.top > window.innerHeight + 50) return null;
   if (rect.left < -50 || rect.left > window.innerWidth + 50) return null;
+  const scale = isHovered ? 1.1 : getScaleFromDistance(distance);
   const badgeStyle = {
     position: "fixed",
     top: rect.top - 8,
     left: rect.right - 8,
     zIndex: isHovered ? 99999 : 99995,
     cursor: "pointer",
-    transition: "transform 0.15s ease-out",
-    transform: isHovered ? "scale(1.1)" : "scale(1)"
+    transition: "transform 0.1s ease-out",
+    transform: `scale(${scale})`,
+    transformOrigin: "center center"
   };
-  const badgeColor = issue.status === "complete" ? getBadgeColor(issue.issues.length) : issue.status === "error" ? STYLES.error : issue.status === "scanning" ? STYLES.highlight : "rgba(156, 163, 175, 0.5)";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isHovered && /* @__PURE__ */ jsx(
       "div",
@@ -93,7 +103,7 @@ function ElementBadge({
         "data-ui-lint": true
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         style: badgeStyle,
@@ -101,32 +111,16 @@ function ElementBadge({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         onClick: handleClick,
-        children: isNearCursor || isHovered ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: [
           issue.status === "scanning" && /* @__PURE__ */ jsx(ScanningBadge, {}),
           issue.status === "complete" && /* @__PURE__ */ jsx(IssueBadge, { count: issue.issues.length }),
           issue.status === "error" && /* @__PURE__ */ jsx(ErrorBadge, {}),
           issue.status === "pending" && /* @__PURE__ */ jsx(PendingBadge, {})
-        ] }) : /* @__PURE__ */ jsx(MinimizedBadge, { color: badgeColor })
+        ]
       }
     )
   ] });
 }
-function MinimizedBadge({ color }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: "6px",
-        height: "6px",
-        borderRadius: "50%",
-        backgroundColor: color,
-        opacity: 0.7,
-        transition: "all 0.15s ease-out",
-        boxShadow: STYLES.shadow
-      }
-    }
-  );
-}
 function IssueBadge({ count }) {
   const color = getBadgeColor(count);
   if (count === 0) {
@@ -357,13 +351,12 @@ function ElementBadges() {
     if (cluster.badges.length === 1) {
       const { element, issue, x, y } = cluster.badges[0];
       const distance = Math.hypot(x - cursorPos.x, y - cursorPos.y);
-      const isNearCursor = distance <= PROXIMITY_THRESHOLD;
       return /* @__PURE__ */ jsx(
         ElementBadge,
         {
           element,
           issue,
-          isNearCursor,
+          distance,
           onSelect: handleSelect
         },
         element.id
@@ -373,12 +366,11 @@ function ElementBadges() {
         cluster.centroidX - cursorPos.x,
         cluster.centroidY - cursorPos.y
       );
-      const isNearCursor = distance <= PROXIMITY_THRESHOLD;
       return /* @__PURE__ */ jsx(
         ClusteredBadge,
         {
           cluster,
-          isNearCursor,
+          distance,
           onSelect: handleSelect
         },
         cluster.id
@@ -387,11 +379,7 @@ function ElementBadges() {
   }) });
   return createPortal(content, document.body);
 }
-function ClusteredBadge({
-  cluster,
-  isNearCursor,
-  onSelect
-}) {
+function ClusteredBadge({ cluster, distance, onSelect }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const closeTimeoutRef = React.useRef(null);
@@ -413,17 +401,6 @@ function ClusteredBadge({
       }
     });
   }, [cluster.badges]);
-  const worstColor = useMemo(() => {
-    let worst = 0;
-    for (const { issue } of cluster.badges) {
-      if (issue.status === "complete") {
-        worst = Math.max(worst, issue.issues.length);
-      } else if (issue.status === "error") {
-        worst = Math.max(worst, 10);
-      }
-    }
-    return getBadgeColor(worst);
-  }, [cluster.badges]);
   const handleMouseEnter = useCallback(() => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
@@ -484,12 +461,15 @@ function ClusteredBadge({
           top: cluster.centroidY - 9,
           left: cluster.centroidX - 9,
           zIndex: isExpanded ? 99999 : 99995,
-          cursor: "pointer"
+          cursor: "pointer",
+          transition: "transform 0.1s ease-out",
+          transform: `scale(${isExpanded ? 1.1 : getScaleFromDistance(distance)})`,
+          transformOrigin: "center center"
         },
         "data-ui-lint": true,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        children: isNearCursor || isExpanded ? /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -500,9 +480,7 @@ function ClusteredBadge({
               backgroundColor: STYLES.bg,
               boxShadow: STYLES.shadow,
               border: `1px solid ${STYLES.border}`,
-              overflow: "hidden",
-              transition: "transform 0.15s ease-out",
-              transform: isExpanded ? "scale(1.1)" : "scale(1)"
+              overflow: "hidden"
             },
             children: badgeSegments.map((segment, index) => /* @__PURE__ */ jsxs(
               "div",
@@ -560,7 +538,7 @@ function ClusteredBadge({
               index
             ))
           }
-        ) : /* @__PURE__ */ jsx(MinimizedBadge, { color: worstColor })
+        )
       }
     ),
     isExpanded && /* @__PURE__ */ jsx(

package/dist/{InspectionPanel-47JBBKBL.js → InspectionPanel-FRJB6CJ6.js}

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

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

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

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

@@ -2,8 +2,8 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-GFURSJEQ.js";
-import "./chunk-I4C3NAUH.js";
+} from "./chunk-ORYG2TNM.js";
+import "./chunk-45MPASAN.js";
 export {
   UILintToolbar
 };

package/dist/{chunk-I4C3NAUH.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-5PG6WVW6.js"),
-      import("./InspectionPanel-47JBBKBL.js"),
-      import("./LocatorOverlay-ADJUWU2H.js"),
-      import("./ElementBadges-T4N3VQRI.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
 };

package/dist/{chunk-GFURSJEQ.js → chunk-ORYG2TNM.js}

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

package/dist/{chunk-EB6K2KGR.js → chunk-RA27RIJ2.js}

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

package/dist/{chunk-FWYNI6JG.js → chunk-SIVHTQ2P.js}

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

package/dist/index.d.ts

@@ -159,6 +159,7 @@ declare const DATA_UILINT_ID = "data-ui-lint-id";
 
 /**
  * Hook to access UILint context
+ * For backwards compatibility - delegates to Zustand store
  */
 declare function useUILintContext(): UILintContextValue;
 /**

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-GFURSJEQ.js";
+} from "./chunk-ORYG2TNM.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-FWYNI6JG.js";
+} from "./chunk-SIVHTQ2P.js";
 import {
   LocatorOverlay
-} from "./chunk-EB6K2KGR.js";
+} from "./chunk-RA27RIJ2.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-I4C3NAUH.js";
+} from "./chunk-45MPASAN.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "React component for AI-powered UI consistency checking",
   "author": "Peter Suggate",
   "repository": {
@@ -34,7 +34,8 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "uilint-core": "^0.1.24"
+    "uilint-core": "^0.1.25",
+    "zustand": "^5.0.5"
   },
   "peerDependencies": {
     "react": "^19.0.0",