uilint-react 0.1.45 → 0.1.47

package/dist/{chunk-BJD2V2LF.js → chunk-RAPUZC5J.js}

@@ -1063,10 +1063,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect2(() => {
     Promise.all([
-      import("./UILintToolbar-5NK77IQJ.js"),
-      import("./InspectionPanel-QC6WR5IG.js"),
-      import("./LocatorOverlay-Z24VU27L.js"),
-      import("./ElementBadges-RV7I6QXS.js")
+      import("./UILintToolbar-FWVC6MNG.js"),
+      import("./InspectionPanel-4P7I4QVY.js"),
+      import("./LocatorOverlay-L3EPYQEF.js"),
+      import("./ElementBadges-N2N3CBLI.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

package/dist/chunk-S4IWHBOQ.js

@@ -0,0 +1,178 @@
+"use client";
+
+// src/components/ui-lint/Badge.tsx
+import { jsx } from "react/jsx-runtime";
+var BADGE_COLORS = {
+  success: "#68d391",
+  // Soft green
+  warning: "#f6ad55",
+  // Warm orange
+  error: "#ef4444"
+  // Red (for future use)
+};
+var FONT_MONO = `"SF Mono", Monaco, "Cascadia Code", monospace`;
+function getBadgeTextColor(issueCount) {
+  if (issueCount === 0) return BADGE_COLORS.success;
+  return BADGE_COLORS.warning;
+}
+function getBadgeBackgroundColor(issueCount) {
+  const color = getBadgeTextColor(issueCount);
+  return `${color}20`;
+}
+var BADGE_STYLES = {
+  default: {
+    minWidth: "20px",
+    height: "20px",
+    padding: "0 6px",
+    borderRadius: "10px",
+    fontSize: "11px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
+  },
+  small: {
+    minWidth: "18px",
+    height: "18px",
+    padding: "0 5px",
+    borderRadius: "9px",
+    fontSize: "10px",
+    fontWeight: 700,
+    letterSpacing: "0"
+  },
+  // For file row badges (slightly larger than small)
+  medium: {
+    minWidth: "22px",
+    height: "18px",
+    padding: "0 6px",
+    borderRadius: "9px",
+    fontSize: "10px",
+    fontWeight: 700,
+    letterSpacing: "0"
+  }
+};
+function Badge({
+  count,
+  size = "default",
+  backgroundColor,
+  color
+}) {
+  const sizeStyles = BADGE_STYLES[size];
+  const bgColor = backgroundColor ?? getBadgeBackgroundColor(count);
+  const textColor = color ?? getBadgeTextColor(count);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...sizeStyles,
+        backgroundColor: bgColor,
+        color: textColor,
+        fontFamily: FONT_MONO
+      },
+      children: count
+    }
+  );
+}
+
+// src/components/ui-lint/source-fetcher.ts
+var sourceCache = /* @__PURE__ */ new Map();
+var CACHE_TTL = 5 * 60 * 1e3;
+var API_ENDPOINT = "/api/.uilint/source";
+async function fetchSource(filePath) {
+  const cached = sourceCache.get(filePath);
+  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) {
+    return {
+      content: cached.content,
+      relativePath: cached.relativePath
+    };
+  }
+  try {
+    const response = await fetch(
+      `${API_ENDPOINT}?path=${encodeURIComponent(filePath)}`
+    );
+    if (!response.ok) {
+      console.warn(`[UILint] Failed to fetch source: ${response.statusText}`);
+      return null;
+    }
+    const data = await response.json();
+    sourceCache.set(filePath, {
+      ...data,
+      fetchedAt: Date.now()
+    });
+    return data;
+  } catch (error) {
+    console.error("[UILint] Error fetching source:", error);
+    return null;
+  }
+}
+async function fetchSourceWithContext(source, contextLines = 5) {
+  const result = await fetchSource(source.fileName);
+  if (!result) return null;
+  const allLines = result.content.split("\n");
+  const targetLine = source.lineNumber - 1;
+  const startLine = Math.max(0, targetLine - contextLines);
+  const endLine = Math.min(allLines.length, targetLine + contextLines + 1);
+  return {
+    lines: allLines.slice(startLine, endLine),
+    startLine: startLine + 1,
+    // Back to 1-indexed
+    highlightLine: source.lineNumber,
+    relativePath: result.relativePath
+  };
+}
+async function fetchSourceWithWindow(source, window) {
+  const result = await fetchSource(source.fileName);
+  if (!result) return null;
+  const allLines = result.content.split("\n");
+  const targetLine = source.lineNumber - 1;
+  const startLine = Math.max(0, targetLine - Math.max(0, window.linesAbove));
+  const endLine = Math.min(
+    allLines.length,
+    targetLine + Math.max(0, window.linesBelow) + 1
+  );
+  return {
+    lines: allLines.slice(startLine, endLine),
+    startLine: startLine + 1,
+    // Back to 1-indexed
+    highlightLine: source.lineNumber,
+    relativePath: result.relativePath
+  };
+}
+function clearSourceCache() {
+  sourceCache.clear();
+}
+function getCachedSource(filePath) {
+  const cached = sourceCache.get(filePath);
+  if (!cached) return null;
+  if (Date.now() - cached.fetchedAt >= CACHE_TTL) {
+    sourceCache.delete(filePath);
+    return null;
+  }
+  return {
+    content: cached.content,
+    relativePath: cached.relativePath
+  };
+}
+async function prefetchSources(filePaths) {
+  const uniquePaths = [...new Set(filePaths)].filter((path) => {
+    const cached = sourceCache.get(path);
+    return !cached || Date.now() - cached.fetchedAt >= CACHE_TTL;
+  });
+  const BATCH_SIZE = 5;
+  for (let i = 0; i < uniquePaths.length; i += BATCH_SIZE) {
+    const batch = uniquePaths.slice(i, i + BATCH_SIZE);
+    await Promise.all(batch.map(fetchSource));
+  }
+}
+
+export {
+  BADGE_COLORS,
+  Badge,
+  fetchSource,
+  fetchSourceWithContext,
+  fetchSourceWithWindow,
+  clearSourceCache,
+  getCachedSource,
+  prefetchSources
+};

package/dist/{chunk-ZZOKTGSU.js → chunk-UF6KN2JJ.js}

@@ -1,12 +1,13 @@
 "use client";
 import {
-  Badge
-} from "./chunk-W42PI2OF.js";
+  Badge,
+  fetchSourceWithWindow
+} from "./chunk-S4IWHBOQ.js";
 import {
   buildEditorUrl,
   useUILintContext,
   useUILintStore
-} from "./chunk-BJD2V2LF.js";
+} from "./chunk-RAPUZC5J.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import React, {
@@ -18,97 +19,6 @@ import React, {
 } from "react";
 import { createPortal } from "react-dom";
 
-// src/components/ui-lint/source-fetcher.ts
-var sourceCache = /* @__PURE__ */ new Map();
-var CACHE_TTL = 5 * 60 * 1e3;
-var API_ENDPOINT = "/api/.uilint/source";
-async function fetchSource(filePath) {
-  const cached = sourceCache.get(filePath);
-  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) {
-    return {
-      content: cached.content,
-      relativePath: cached.relativePath
-    };
-  }
-  try {
-    const response = await fetch(
-      `${API_ENDPOINT}?path=${encodeURIComponent(filePath)}`
-    );
-    if (!response.ok) {
-      console.warn(`[UILint] Failed to fetch source: ${response.statusText}`);
-      return null;
-    }
-    const data = await response.json();
-    sourceCache.set(filePath, {
-      ...data,
-      fetchedAt: Date.now()
-    });
-    return data;
-  } catch (error) {
-    console.error("[UILint] Error fetching source:", error);
-    return null;
-  }
-}
-async function fetchSourceWithContext(source, contextLines = 5) {
-  const result = await fetchSource(source.fileName);
-  if (!result) return null;
-  const allLines = result.content.split("\n");
-  const targetLine = source.lineNumber - 1;
-  const startLine = Math.max(0, targetLine - contextLines);
-  const endLine = Math.min(allLines.length, targetLine + contextLines + 1);
-  return {
-    lines: allLines.slice(startLine, endLine),
-    startLine: startLine + 1,
-    // Back to 1-indexed
-    highlightLine: source.lineNumber,
-    relativePath: result.relativePath
-  };
-}
-async function fetchSourceWithWindow(source, window2) {
-  const result = await fetchSource(source.fileName);
-  if (!result) return null;
-  const allLines = result.content.split("\n");
-  const targetLine = source.lineNumber - 1;
-  const startLine = Math.max(0, targetLine - Math.max(0, window2.linesAbove));
-  const endLine = Math.min(
-    allLines.length,
-    targetLine + Math.max(0, window2.linesBelow) + 1
-  );
-  return {
-    lines: allLines.slice(startLine, endLine),
-    startLine: startLine + 1,
-    // Back to 1-indexed
-    highlightLine: source.lineNumber,
-    relativePath: result.relativePath
-  };
-}
-function clearSourceCache() {
-  sourceCache.clear();
-}
-function getCachedSource(filePath) {
-  const cached = sourceCache.get(filePath);
-  if (!cached) return null;
-  if (Date.now() - cached.fetchedAt >= CACHE_TTL) {
-    sourceCache.delete(filePath);
-    return null;
-  }
-  return {
-    content: cached.content,
-    relativePath: cached.relativePath
-  };
-}
-async function prefetchSources(filePaths) {
-  const uniquePaths = [...new Set(filePaths)].filter((path) => {
-    const cached = sourceCache.get(path);
-    return !cached || Date.now() - cached.fetchedAt >= CACHE_TTL;
-  });
-  const BATCH_SIZE = 5;
-  for (let i = 0; i < uniquePaths.length; i += BATCH_SIZE) {
-    const batch = uniquePaths.slice(i, i + BATCH_SIZE);
-    await Promise.all(batch.map(fetchSource));
-  }
-}
-
 // src/components/ui-lint/code-formatting.ts
 function leadingWhitespace(s) {
   const match = s.match(/^[\t ]+/);
@@ -278,11 +188,11 @@ function InspectionPanel() {
       setInspectedElement(null);
     };
     const timer = setTimeout(() => {
-      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("click", handleClickOutside, true);
     }, 50);
     return () => {
       clearTimeout(timer);
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("click", handleClickOutside, true);
     };
   }, [inspectedElement, setInspectedElement]);
   const isFileLevelIssue = useMemo(() => {
@@ -439,13 +349,21 @@ function InspectionPanel() {
     );
     window.open(url, "_blank");
   }, [inspectedElement, editorBaseDir]);
+  const handleUILintInteraction = useCallback(
+    (e) => {
+      e.stopPropagation();
+    },
+    []
+  );
   if (!mounted || !inspectedElement) return null;
   const content = /* @__PURE__ */ jsxs(
     "div",
     {
       ref: popoverRef,
       "data-ui-lint": true,
-      onClick: (e) => e.stopPropagation(),
+      onMouseDown: handleUILintInteraction,
+      onClick: handleUILintInteraction,
+      onKeyDown: handleUILintInteraction,
       style: {
         position: "fixed",
         top: position.top,
@@ -462,7 +380,9 @@ function InspectionPanel() {
         color: STYLES.text,
         overflow: "hidden",
         zIndex: 99998,
-        animation: "uilint-popover-appear 0.15s ease-out"
+        animation: "uilint-popover-appear 0.15s ease-out",
+        pointerEvents: "auto"
+        // Ensure panel is interactive
       },
       children: [
         /* @__PURE__ */ jsx("style", { children: `
@@ -1008,10 +928,5 @@ function CollapseIcon() {
 }
 
 export {
-  fetchSource,
-  fetchSourceWithContext,
-  clearSourceCache,
-  getCachedSource,
-  prefetchSources,
   InspectionPanel
 };

package/dist/index.d.ts

@@ -169,18 +169,12 @@ declare function useUILintContext(): UILintContextValue;
 declare function UILintProvider({ children, enabled, }: UILintProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
- * UILint Toolbar - Improved UX Version
+ * UILint Toolbar - Simplified Mode-Based Design
  *
- * Key improvements:
- * - Clear visual hierarchy: Primary (toggle) → Secondary (issues) → Tertiary (settings)
- * - Contextual hints that only show when relevant
- * - CSS-based hover/focus states (no inline handlers)
- * - Full keyboard navigation with visible focus rings
- * - Smooth animations for all state changes
- * - Better disabled state communication
- * - Expanded panel that doesn't conflict with settings
- * - Touch-friendly targets (min 44px)
- * - ARIA labels and semantic markup
+ * Three distinct modes:
+ * 1. Disconnected: Minimal pill with settings only
+ * 2. Connected/Idle: Two-segment pill (Start Scanning + Settings)
+ * 3. Scanning: Compact floating UI with hint, status dropdown, and stop button
  */
 
 declare function UILintToolbar(): React$1.ReactPortal | null;

package/dist/index.js

@@ -1,19 +1,20 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-EQKEHJI4.js";
+} from "./chunk-OSYIUF52.js";
+import {
+  InspectionPanel
+} from "./chunk-UF6KN2JJ.js";
 import {
-  InspectionPanel,
   clearSourceCache,
   fetchSource,
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-ZZOKTGSU.js";
-import "./chunk-W42PI2OF.js";
+} from "./chunk-S4IWHBOQ.js";
 import {
   LocatorOverlay
-} from "./chunk-YLTHKMTO.js";
+} from "./chunk-LNLTM7N6.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -29,7 +30,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-BJD2V2LF.js";
+} from "./chunk-RAPUZC5J.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

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

package/dist/InspectionPanel-QC6WR5IG.js

@@ -1,10 +0,0 @@
-"use client";
-"use client";
-import {
-  InspectionPanel
-} from "./chunk-ZZOKTGSU.js";
-import "./chunk-W42PI2OF.js";
-import "./chunk-BJD2V2LF.js";
-export {
-  InspectionPanel
-};

package/dist/UILintToolbar-5NK77IQJ.js

@@ -1,10 +0,0 @@
-"use client";
-"use client";
-import {
-  UILintToolbar
-} from "./chunk-EQKEHJI4.js";
-import "./chunk-W42PI2OF.js";
-import "./chunk-BJD2V2LF.js";
-export {
-  UILintToolbar
-};

package/dist/chunk-W42PI2OF.js

@@ -1,81 +0,0 @@
-"use client";
-
-// src/components/ui-lint/Badge.tsx
-import { jsx } from "react/jsx-runtime";
-var BADGE_COLORS = {
-  success: "#68d391",
-  // Soft green
-  warning: "#f6ad55",
-  // Warm orange
-  error: "#ef4444"
-  // Red (for future use)
-};
-var FONT_MONO = `"SF Mono", Monaco, "Cascadia Code", monospace`;
-function getBadgeTextColor(issueCount) {
-  if (issueCount === 0) return BADGE_COLORS.success;
-  return BADGE_COLORS.warning;
-}
-function getBadgeBackgroundColor(issueCount) {
-  const color = getBadgeTextColor(issueCount);
-  return `${color}20`;
-}
-var BADGE_STYLES = {
-  default: {
-    minWidth: "20px",
-    height: "20px",
-    padding: "0 6px",
-    borderRadius: "10px",
-    fontSize: "11px",
-    fontWeight: 600,
-    letterSpacing: "-0.02em"
-  },
-  small: {
-    minWidth: "18px",
-    height: "18px",
-    padding: "0 5px",
-    borderRadius: "9px",
-    fontSize: "10px",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  // For file row badges (slightly larger than small)
-  medium: {
-    minWidth: "22px",
-    height: "18px",
-    padding: "0 6px",
-    borderRadius: "9px",
-    fontSize: "10px",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
-};
-function Badge({
-  count,
-  size = "default",
-  backgroundColor,
-  color
-}) {
-  const sizeStyles = BADGE_STYLES[size];
-  const bgColor = backgroundColor ?? getBadgeBackgroundColor(count);
-  const textColor = color ?? getBadgeTextColor(count);
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        ...sizeStyles,
-        backgroundColor: bgColor,
-        color: textColor,
-        fontFamily: FONT_MONO
-      },
-      children: count
-    }
-  );
-}
-
-export {
-  BADGE_COLORS,
-  Badge
-};