uilint-react 0.1.46 → 0.1.47

package/dist/{ElementBadges-E35MQ2SV.js → ElementBadges-N2N3CBLI.js}

@@ -3,7 +3,7 @@
 import {
   useUILintContext,
   useUILintStore
-} from "./chunk-OU5EEQT6.js";
+} from "./chunk-RAPUZC5J.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";

package/dist/{InspectionPanel-EOW6OJFT.js → InspectionPanel-4P7I4QVY.js}

@@ -2,9 +2,9 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-JURUYCUC.js";
+} from "./chunk-UF6KN2JJ.js";
 import "./chunk-S4IWHBOQ.js";
-import "./chunk-OU5EEQT6.js";
+import "./chunk-RAPUZC5J.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-BF6EED4N.js → LocatorOverlay-L3EPYQEF.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-LQ3WQYIF.js";
-import "./chunk-OU5EEQT6.js";
+} from "./chunk-LNLTM7N6.js";
+import "./chunk-RAPUZC5J.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-XJN6LFWZ.js → UILintToolbar-FWVC6MNG.js}

@@ -2,9 +2,9 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-XUMLILUN.js";
+} from "./chunk-OSYIUF52.js";
 import "./chunk-S4IWHBOQ.js";
-import "./chunk-OU5EEQT6.js";
+import "./chunk-RAPUZC5J.js";
 export {
   UILintToolbar
 };

package/dist/{chunk-LQ3WQYIF.js → chunk-LNLTM7N6.js}

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

package/dist/{chunk-XUMLILUN.js → chunk-OSYIUF52.js}

@@ -9,10 +9,10 @@ import {
   groupBySourceFile,
   useUILintContext,
   useUILintStore
-} from "./chunk-OU5EEQT6.js";
+} from "./chunk-RAPUZC5J.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import React3, { useState as useState2, useRef as useRef2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/ui-lint/toolbar-styles.ts
@@ -1117,10 +1117,10 @@ function ScanPanelStack({ show, onClose }) {
 }
 
 // src/components/ui-lint/UILintToolbar.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var TOKENS = {
   // Colors
-  bgBase: "rgba(15, 15, 15, 0.85)",
+  bgBase: "rgba(15, 15, 15, 0.92)",
   bgElevated: "rgba(25, 25, 25, 0.95)",
   bgHover: "rgba(255, 255, 255, 0.08)",
   bgActive: "rgba(255, 255, 255, 0.12)",
@@ -1131,26 +1131,17 @@ var TOKENS = {
   textMuted: "rgba(255, 255, 255, 0.4)",
   textDisabled: "rgba(255, 255, 255, 0.25)",
   accent: "#63b3ed",
-  // Calm blue
   success: BADGE_COLORS.success,
-  // Soft green (shared with Badge)
   warning: BADGE_COLORS.warning,
-  // Warm orange (shared with Badge)
-  // Typography
+  error: "#f56565",
   fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,
   fontMono: `"SF Mono", Monaco, "Cascadia Code", monospace`,
-  // Sizing
-  pillHeight: "44px",
-  // Touch-friendly
-  pillRadius: "22px",
-  buttonMinWidth: "44px",
-  // Touch target minimum
-  // Effects
-  blur: "blur(20px)",
-  shadowSm: "0 2px 8px rgba(0, 0, 0, 0.3)",
+  pillHeight: "40px",
+  pillRadius: "20px",
+  buttonMinWidth: "40px",
+  blur: "blur(16px)",
   shadowMd: "0 4px 20px rgba(0, 0, 0, 0.4)",
-  shadowGlow: (color) => `0 0 20px ${color}`,
-  // Animation
+  shadowGlow: (color) => `0 0 16px ${color}`,
   transitionFast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
   transitionBase: "200ms cubic-bezier(0.4, 0, 0.2, 1)",
   transitionSlow: "300ms cubic-bezier(0.4, 0, 0.2, 1)"
@@ -1159,8 +1150,8 @@ var Icons = {
   Eye: () => /* @__PURE__ */ jsxs4(
     "svg",
     {
-      width: "18",
-      height: "18",
+      width: "16",
+      height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -1173,11 +1164,11 @@ var Icons = {
       ]
     }
   ),
-  EyeOff: () => /* @__PURE__ */ jsxs4(
+  Settings: () => /* @__PURE__ */ jsxs4(
     "svg",
     {
-      width: "18",
-      height: "18",
+      width: "15",
+      height: "15",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -1185,16 +1176,30 @@ var Icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx5("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
-        /* @__PURE__ */ jsx5("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" }),
+        /* @__PURE__ */ jsx5("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
       ]
     }
   ),
-  Scan: () => /* @__PURE__ */ jsxs4(
+  Check: () => /* @__PURE__ */ jsx5(
     "svg",
     {
-      width: "16",
-      height: "16",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" })
+    }
+  ),
+  AlertTriangle: () => /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "12",
+      height: "12",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -1202,29 +1207,27 @@ var Icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx5("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
-        /* @__PURE__ */ jsx5("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
-        /* @__PURE__ */ jsx5("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
-        /* @__PURE__ */ jsx5("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
-        /* @__PURE__ */ jsx5("line", { x1: "7", y1: "12", x2: "17", y2: "12" })
+        /* @__PURE__ */ jsx5("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+        /* @__PURE__ */ jsx5("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ jsx5("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
       ]
     }
   ),
-  Check: () => /* @__PURE__ */ jsx5(
+  ChevronDown: () => /* @__PURE__ */ jsx5(
     "svg",
     {
-      width: "14",
-      height: "14",
+      width: "12",
+      height: "12",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: "2.5",
+      strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ jsx5("polyline", { points: "6 9 12 15 18 9" })
     }
   ),
-  AlertTriangle: () => /* @__PURE__ */ jsxs4(
+  X: () => /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "14",
@@ -1236,17 +1239,16 @@ var Icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx5("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-        /* @__PURE__ */ jsx5("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-        /* @__PURE__ */ jsx5("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+        /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   ),
-  Settings: () => /* @__PURE__ */ jsxs4(
+  Unplug: () => /* @__PURE__ */ jsxs4(
     "svg",
     {
-      width: "16",
-      height: "16",
+      width: "14",
+      height: "14",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -1254,12 +1256,15 @@ var Icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" }),
-        /* @__PURE__ */ jsx5("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+        /* @__PURE__ */ jsx5("path", { d: "M19 5l3-3" }),
+        /* @__PURE__ */ jsx5("path", { d: "M2 22l3-3" }),
+        /* @__PURE__ */ jsx5("path", { d: "M6.3 6.3a10 10 0 0 1 13.4 1.3" }),
+        /* @__PURE__ */ jsx5("path", { d: "M17.7 17.7a10 10 0 0 1-13.4-1.3" }),
+        /* @__PURE__ */ jsx5("path", { d: "m8 15 8-8" })
       ]
     }
   ),
-  ChevronRight: () => /* @__PURE__ */ jsx5(
+  Scan: () => /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "14",
@@ -1270,7 +1275,13 @@ var Icons = {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx5("polyline", { points: "9 18 15 12 9 6" })
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+        /* @__PURE__ */ jsx5("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+        /* @__PURE__ */ jsx5("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+        /* @__PURE__ */ jsx5("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
+        /* @__PURE__ */ jsx5("line", { x1: "7", y1: "12", x2: "17", y2: "12" })
+      ]
     }
   )
 };
@@ -1287,101 +1298,72 @@ var globalStyles = `
   
   @keyframes uilint-pulse {
     0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-  
-  @keyframes uilint-scan-line {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    50% { opacity: 0.6; }
   }
   
-  @keyframes uilint-spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+  @keyframes uilint-slide-up {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
   }
   
-  .uilint-toolbar-btn {
+  .uilint-btn {
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 6px;
     height: 100%;
+    padding: 0 14px;
     border: none;
     background: transparent;
     color: ${TOKENS.textSecondary};
+    font-family: ${TOKENS.fontFamily};
+    font-size: 13px;
+    font-weight: 500;
     cursor: pointer;
     transition: 
       background-color ${TOKENS.transitionFast},
-      color ${TOKENS.transitionFast},
-      transform ${TOKENS.transitionFast};
+      color ${TOKENS.transitionFast};
     outline: none;
-    position: relative;
+    white-space: nowrap;
   }
   
-  .uilint-toolbar-btn:hover:not(:disabled) {
+  .uilint-btn:hover:not(:disabled) {
     background: ${TOKENS.bgHover};
     color: ${TOKENS.textPrimary};
   }
   
-  .uilint-toolbar-btn:active:not(:disabled) {
+  .uilint-btn:active:not(:disabled) {
     background: ${TOKENS.bgActive};
-    transform: scale(0.97);
   }
   
-  .uilint-toolbar-btn:focus-visible {
+  .uilint-btn:focus-visible {
     box-shadow: inset 0 0 0 2px ${TOKENS.borderFocus};
   }
   
-  .uilint-toolbar-btn:disabled {
+  .uilint-btn:disabled {
     cursor: not-allowed;
     color: ${TOKENS.textDisabled};
   }
   
-  .uilint-toolbar-btn--active {
-    background: ${TOKENS.bgActive} !important;
-    color: ${TOKENS.accent} !important;
-  }
-  
-  .uilint-toolbar-btn--warning {
-    color: ${TOKENS.warning} !important;
-  }
-  
-  .uilint-toolbar-btn--success {
-    color: ${TOKENS.success} !important;
+  .uilint-btn--icon {
+    padding: 0;
+    min-width: ${TOKENS.buttonMinWidth};
   }
   
-  .uilint-hint {
-    opacity: 0;
-    transform: translateY(4px);
-    transition: 
-      opacity ${TOKENS.transitionBase},
-      transform ${TOKENS.transitionBase};
-    pointer-events: none;
+  .uilint-btn--primary {
+    color: ${TOKENS.textPrimary};
   }
   
-  .uilint-hint--visible {
-    opacity: 1;
-    transform: translateY(0);
+  .uilint-btn--accent {
+    color: ${TOKENS.accent};
   }
   
-  .uilint-scanning-indicator {
-    position: relative;
-    overflow: hidden;
+  .uilint-btn--warning {
+    color: ${TOKENS.warning};
   }
   
-  .uilint-scanning-indicator::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(99, 179, 237, 0.3),
-      transparent
-    );
-    animation: uilint-scan-line 1.5s ease-in-out infinite;
+  .uilint-btn--success {
+    color: ${TOKENS.success};
   }
   
   .uilint-popover {
@@ -1392,80 +1374,65 @@ var globalStyles = `
     animation: uilint-fade-out ${TOKENS.transitionBase} forwards;
   }
   
-  /* Custom scrollbar styling for dark mode - scoped to uilint components */
-  [data-ui-lint] *,
-  [data-ui-lint] {
-    /* Firefox */
+  .uilint-scanning-bar {
+    animation: uilint-slide-up ${TOKENS.transitionSlow} forwards;
+  }
+  
+  .uilint-scanning-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: ${TOKENS.accent};
+    animation: uilint-pulse 1.5s ease-in-out infinite;
+  }
+
+  /* Scrollbar styling */
+  [data-ui-lint] * {
     scrollbar-width: thin;
     scrollbar-color: rgba(255, 255, 255, 0.15) rgba(15, 15, 15, 0.3);
   }
   
-  /* WebKit browsers (Chrome, Safari, Edge) */
-  [data-ui-lint] *::-webkit-scrollbar,
-  [data-ui-lint]::-webkit-scrollbar {
+  [data-ui-lint] *::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
   
-  [data-ui-lint] *::-webkit-scrollbar-track,
-  [data-ui-lint]::-webkit-scrollbar-track {
+  [data-ui-lint] *::-webkit-scrollbar-track {
     background: rgba(15, 15, 15, 0.3);
     border-radius: 4px;
   }
   
-  [data-ui-lint] *::-webkit-scrollbar-thumb,
-  [data-ui-lint]::-webkit-scrollbar-thumb {
+  [data-ui-lint] *::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.15);
     border-radius: 4px;
-    border: 1px solid rgba(15, 15, 15, 0.2);
-    transition: background ${TOKENS.transitionFast};
   }
   
-  [data-ui-lint] *::-webkit-scrollbar-thumb:hover,
-  [data-ui-lint]::-webkit-scrollbar-thumb:hover {
+  [data-ui-lint] *::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.25);
   }
-  
-  [data-ui-lint] *::-webkit-scrollbar-thumb:active,
-  [data-ui-lint]::-webkit-scrollbar-thumb:active {
-    background: rgba(255, 255, 255, 0.35);
-  }
-  
-  [data-ui-lint] *::-webkit-scrollbar-corner,
-  [data-ui-lint]::-webkit-scrollbar-corner {
-    background: rgba(15, 15, 15, 0.3);
-  }
 `;
-function ToolbarButton({
-  onClick,
-  disabled,
-  active,
-  variant = "default",
-  title,
-  ariaLabel,
-  width = TOKENS.buttonMinWidth,
-  children
-}) {
-  const classes = [
-    "uilint-toolbar-btn",
-    active && "uilint-toolbar-btn--active",
-    variant === "warning" && "uilint-toolbar-btn--warning",
-    variant === "success" && "uilint-toolbar-btn--success"
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx5(
-    "button",
-    {
-      className: classes,
-      onClick,
-      disabled,
-      title,
-      "aria-label": ariaLabel,
-      "aria-pressed": active,
-      style: { minWidth: width },
-      children
-    }
-  );
-}
+var PillContainer = React3.forwardRef(({ children, glow, style }, ref) => /* @__PURE__ */ jsx5(
+  "div",
+  {
+    ref,
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      height: TOKENS.pillHeight,
+      borderRadius: TOKENS.pillRadius,
+      border: `1px solid ${TOKENS.border}`,
+      backgroundColor: TOKENS.bgBase,
+      backdropFilter: TOKENS.blur,
+      WebkitBackdropFilter: TOKENS.blur,
+      boxShadow: glow ? `${TOKENS.shadowMd}, ${TOKENS.shadowGlow(glow)}` : TOKENS.shadowMd,
+      overflow: "hidden",
+      transition: `box-shadow ${TOKENS.transitionBase}`,
+      ...style
+    },
+    children
+  }
+));
+PillContainer.displayName = "PillContainer";
 function Divider() {
   return /* @__PURE__ */ jsx5(
     "div",
@@ -1480,98 +1447,112 @@ function Divider() {
     }
   );
 }
-function ScanStatus({ status, issueCount, enabled }) {
-  if (!enabled) {
-    return /* @__PURE__ */ jsx5(
-      "span",
-      {
-        style: {
-          fontSize: "12px",
-          color: TOKENS.textDisabled,
-          fontStyle: "italic"
-        },
-        children: "Off"
-      }
-    );
-  }
-  if (status === "scanning" || status === "paused") {
-    return /* @__PURE__ */ jsxs4(
-      "span",
+function Kbd({ children }) {
+  return /* @__PURE__ */ jsx5(
+    "kbd",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 6px",
+        borderRadius: "4px",
+        backgroundColor: TOKENS.bgElevated,
+        border: `1px solid ${TOKENS.border}`,
+        fontSize: "11px",
+        fontFamily: TOKENS.fontMono,
+        color: TOKENS.textSecondary,
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.4)"
+      },
+      children
+    }
+  );
+}
+function DisconnectedToolbar({
+  onSettingsClick,
+  showSettings
+}) {
+  return /* @__PURE__ */ jsxs4(PillContainer, { children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
       {
-        className: "uilint-scanning-indicator",
         style: {
           display: "flex",
           alignItems: "center",
           gap: "6px",
-          padding: "0 4px"
+          padding: "0 12px",
+          color: TOKENS.textMuted,
+          fontSize: "12px"
         },
         children: [
-          /* @__PURE__ */ jsx5(Icons.Scan, {}),
-          /* @__PURE__ */ jsx5(
-            "span",
-            {
-              style: {
-                fontSize: "12px",
-                fontFamily: TOKENS.fontMono,
-                animation: `uilint-pulse 1s ease-in-out infinite`
-              },
-              children: "Scanning"
-            }
-          )
+          /* @__PURE__ */ jsx5(Icons.Unplug, {}),
+          /* @__PURE__ */ jsx5("span", { children: "Not connected" })
         ]
       }
-    );
-  }
-  if (issueCount === 0) {
-    return /* @__PURE__ */ jsxs4(
-      "span",
+    ),
+    /* @__PURE__ */ jsx5(Divider, {}),
+    /* @__PURE__ */ jsx5(
+      "button",
       {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "5px"
-        },
+        className: `uilint-btn uilint-btn--icon ${showSettings ? "uilint-btn--accent" : ""}`,
+        onClick: onSettingsClick,
+        title: "Settings",
+        "aria-label": "Open settings",
+        "aria-pressed": showSettings,
+        children: /* @__PURE__ */ jsx5(Icons.Settings, {})
+      }
+    )
+  ] });
+}
+function IdleToolbar({
+  onStartScan,
+  onSettingsClick,
+  showSettings
+}) {
+  return /* @__PURE__ */ jsxs4(PillContainer, { children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        className: "uilint-btn uilint-btn--primary",
+        onClick: onStartScan,
+        title: "Start scanning (\u2325S)",
+        "aria-label": "Start live scanning",
         children: [
-          /* @__PURE__ */ jsx5(
-            "span",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "18px",
-                height: "18px",
-                borderRadius: "50%",
-                backgroundColor: `${TOKENS.success}20`,
-                color: TOKENS.success
-              },
-              children: /* @__PURE__ */ jsx5(Icons.Check, {})
-            }
-          ),
-          /* @__PURE__ */ jsx5(
-            "span",
-            {
-              style: {
-                fontSize: "12px",
-                fontWeight: 500,
-                color: TOKENS.success
-              },
-              children: "Clear"
-            }
-          )
+          /* @__PURE__ */ jsx5(Icons.Eye, {}),
+          /* @__PURE__ */ jsx5("span", { children: "Start Scanning" })
         ]
       }
-    );
-  }
-  return /* @__PURE__ */ jsxs4(
-    "span",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "5px"
-      },
-      children: [
+    ),
+    /* @__PURE__ */ jsx5(Divider, {}),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        className: `uilint-btn uilint-btn--icon ${showSettings ? "uilint-btn--accent" : ""}`,
+        onClick: onSettingsClick,
+        title: "Settings",
+        "aria-label": "Open settings",
+        "aria-pressed": showSettings,
+        children: /* @__PURE__ */ jsx5(Icons.Settings, {})
+      }
+    )
+  ] });
+}
+function ScanningToolbar({
+  issueCount,
+  isScanning,
+  showResults,
+  onToggleResults,
+  onStopScan
+}) {
+  const hasIssues = issueCount > 0;
+  const getStatusContent = () => {
+    if (isScanning) {
+      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx5("div", { className: "uilint-scanning-dot" }),
+        /* @__PURE__ */ jsx5("span", { style: { fontFamily: TOKENS.fontMono, fontSize: "12px" }, children: "Scanning..." })
+      ] });
+    }
+    if (hasIssues) {
+      return /* @__PURE__ */ jsxs4(Fragment2, { children: [
         /* @__PURE__ */ jsx5(
           "span",
           {
@@ -1579,8 +1560,8 @@ function ScanStatus({ status, issueCount, enabled }) {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              width: "18px",
-              height: "18px",
+              width: "16px",
+              height: "16px",
               borderRadius: "50%",
               backgroundColor: `${TOKENS.warning}20`,
               color: TOKENS.warning
@@ -1589,6 +1570,72 @@ function ScanStatus({ status, issueCount, enabled }) {
           }
         ),
         /* @__PURE__ */ jsx5(Badge, { count: issueCount })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        "span",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "16px",
+            height: "16px",
+            borderRadius: "50%",
+            backgroundColor: `${TOKENS.success}20`,
+            color: TOKENS.success
+          },
+          children: /* @__PURE__ */ jsx5(Icons.Check, {})
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "span",
+        {
+          style: { fontSize: "12px", fontWeight: 500, color: TOKENS.success },
+          children: "All clear"
+        }
+      )
+    ] });
+  };
+  const statusVariant = hasIssues ? "warning" : isScanning ? "accent" : "success";
+  const glowColor = hasIssues ? `${TOKENS.warning}25` : void 0;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "uilint-scanning-bar",
+      style: { display: "flex", alignItems: "center", gap: "10px" },
+      children: [
+        /* @__PURE__ */ jsxs4(PillContainer, { glow: glowColor, children: [
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              className: `uilint-btn uilint-btn--${statusVariant}`,
+              onClick: onToggleResults,
+              title: hasIssues ? `${issueCount} issue${issueCount !== 1 ? "s" : ""} found` : "View scan results",
+              "aria-label": "Toggle scan results",
+              "aria-expanded": showResults,
+              style: { paddingRight: "10px" },
+              children: [
+                getStatusContent(),
+                /* @__PURE__ */ jsx5(Icons.ChevronDown, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx5(Divider, {}),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              className: "uilint-btn uilint-btn--icon",
+              onClick: onStopScan,
+              title: "Stop scanning (\u2325S)",
+              "aria-label": "Stop scanning",
+              children: /* @__PURE__ */ jsx5(Icons.X, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5(Kbd, { children: "\u2325 + Click" }),
+        /* @__PURE__ */ jsx5("span", { style: { fontSize: "12px", color: TOKENS.textMuted }, children: "to inspect" })
       ]
     }
   );
@@ -1605,6 +1652,7 @@ function UILintToolbar() {
     (s) => s.elementIssuesCache
   );
   const fileIssuesCache = useUILintStore((s) => s.fileIssuesCache);
+  const wsConnected = useUILintStore((s) => s.wsConnected);
   const [showSettings, setShowSettings] = useState2(false);
   const [showResults, setShowResults] = useState2(false);
   const [mounted, setMounted] = useState2(false);
@@ -1612,6 +1660,16 @@ function UILintToolbar() {
   const [nextjsOverlayVisible, setNextjsOverlayVisible] = useState2(false);
   const toolbarRef = useRef2(null);
   const settingsRef = useRef2(null);
+  const isScanning = autoScanState.status === "scanning" || autoScanState.status === "paused";
+  let elementIssues = 0;
+  elementIssuesCache.forEach((el) => {
+    elementIssues += el.issues.length;
+  });
+  let fileLevelIssues = 0;
+  fileIssuesCache.forEach((issues) => {
+    fileLevelIssues += issues.length;
+  });
+  const totalIssues = elementIssues + fileLevelIssues;
   useEffect3(() => {
     const checkForNextOverlay = () => {
       const overlaySelectors = [
@@ -1639,32 +1697,21 @@ function UILintToolbar() {
     });
     return () => observer.disconnect();
   }, []);
-  const isScanning = autoScanState.status === "scanning";
-  const isComplete = autoScanState.status === "complete";
-  let elementIssues = 0;
-  elementIssuesCache.forEach((el) => {
-    elementIssues += el.issues.length;
-  });
-  let fileLevelIssues = 0;
-  fileIssuesCache.forEach((issues) => {
-    fileLevelIssues += issues.length;
-  });
-  const totalIssues = elementIssues + fileLevelIssues;
-  const hasIssues = totalIssues > 0;
   useEffect3(() => {
     setMounted(true);
   }, []);
   useEffect3(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
-      if (target?.closest?.("[data-ui-lint]")) {
-        return;
-      }
+      if (target?.closest?.("[data-ui-lint]")) return;
       if (showSettings && settingsRef.current && toolbarRef.current) {
         if (!settingsRef.current.contains(target) && !toolbarRef.current.contains(target)) {
           handleCloseSettings();
         }
       }
+      if (showResults) {
+        setShowResults(false);
+      }
     };
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -1679,28 +1726,19 @@ function UILintToolbar() {
       document.removeEventListener("keydown", handleEscape);
     };
   }, [showSettings, showResults]);
-  const handleToggleClick = useCallback2(() => {
-    if (liveScanEnabled) {
-      disableLiveScan();
-      setShowResults(false);
-    } else {
-      enableLiveScan();
-    }
-    if (showSettings) handleCloseSettings();
-  }, [liveScanEnabled, enableLiveScan, disableLiveScan, showSettings]);
-  const handleIssuesClick = useCallback2(() => {
-    if (!liveScanEnabled) {
-      enableLiveScan();
-      return;
-    }
-    setShowResults((prev) => !prev);
-  }, [liveScanEnabled, enableLiveScan]);
+  const handleStartScan = useCallback2(() => {
+    enableLiveScan();
+    setShowSettings(false);
+  }, [enableLiveScan]);
+  const handleStopScan = useCallback2(() => {
+    disableLiveScan();
+    setShowResults(false);
+  }, [disableLiveScan]);
   const handleSettingsClick = useCallback2(() => {
     if (showSettings) {
       handleCloseSettings();
     } else {
       setShowSettings(true);
-      setShowResults(false);
     }
   }, [showSettings]);
   const handleCloseSettings = useCallback2(() => {
@@ -1710,6 +1748,9 @@ function UILintToolbar() {
       setSettingsClosing(false);
     }, 150);
   }, []);
+  const handleToggleResults = useCallback2(() => {
+    setShowResults((prev) => !prev);
+  }, []);
   const handleUILintInteraction = useCallback2(
     (e) => {
       e.stopPropagation();
@@ -1717,8 +1758,38 @@ function UILintToolbar() {
     []
   );
   if (!mounted) return null;
-  const issueVariant = !liveScanEnabled ? "default" : hasIssues ? "warning" : isComplete ? "success" : "default";
   const bottomPosition = nextjsOverlayVisible ? "80px" : "20px";
+  const renderToolbar = () => {
+    if (!wsConnected) {
+      return /* @__PURE__ */ jsx5(
+        DisconnectedToolbar,
+        {
+          onSettingsClick: handleSettingsClick,
+          showSettings
+        }
+      );
+    }
+    if (!liveScanEnabled) {
+      return /* @__PURE__ */ jsx5(
+        IdleToolbar,
+        {
+          onStartScan: handleStartScan,
+          onSettingsClick: handleSettingsClick,
+          showSettings
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx5(
+      ScanningToolbar,
+      {
+        issueCount: totalIssues,
+        isScanning,
+        showResults,
+        onToggleResults: handleToggleResults,
+        onStopScan: handleStopScan
+      }
+    );
+  };
   const content = /* @__PURE__ */ jsxs4(
     "div",
     {
@@ -1734,116 +1805,20 @@ function UILintToolbar() {
         fontFamily: TOKENS.fontFamily,
         transition: `bottom ${TOKENS.transitionSlow}`,
         pointerEvents: "none"
-        // Allow clicks to pass through empty space
       },
       children: [
         /* @__PURE__ */ jsx5("style", { children: globalStyles }),
         /* @__PURE__ */ jsx5(
-          "div",
-          {
-            className: `uilint-hint ${liveScanEnabled ? "uilint-hint--visible" : ""}`,
-            style: {
-              textAlign: "center",
-              marginBottom: "10px",
-              fontSize: "11px",
-              color: TOKENS.textMuted,
-              letterSpacing: "0.02em",
-              pointerEvents: "auto"
-              // Re-enable pointer events for hint
-            },
-            "aria-hidden": !liveScanEnabled,
-            children: /* @__PURE__ */ jsx5(
-              "kbd",
-              {
-                style: {
-                  display: "inline-block",
-                  padding: "2px 5px",
-                  marginRight: "4px",
-                  borderRadius: "4px",
-                  backgroundColor: TOKENS.bgElevated,
-                  border: `1px solid ${TOKENS.border}`,
-                  fontSize: "10px",
-                  fontFamily: TOKENS.fontMono,
-                  color: TOKENS.textSecondary,
-                  boxShadow: `0 1px 3px rgba(0, 0, 0, 0.5)`
-                },
-                children: "\u2325 + Click to inspect element"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs4(
           "div",
           {
             ref: toolbarRef,
             role: "toolbar",
             "aria-label": "UI Lint toolbar",
-            style: {
-              position: "relative",
-              display: "inline-flex",
-              alignItems: "center",
-              height: TOKENS.pillHeight,
-              borderRadius: TOKENS.pillRadius,
-              border: `1px solid ${TOKENS.border}`,
-              backgroundColor: TOKENS.bgBase,
-              backdropFilter: TOKENS.blur,
-              WebkitBackdropFilter: TOKENS.blur,
-              boxShadow: liveScanEnabled && hasIssues ? `${TOKENS.shadowMd}, ${TOKENS.shadowGlow(
-                `${TOKENS.warning}30`
-              )}` : TOKENS.shadowMd,
-              overflow: "hidden",
-              transition: `box-shadow ${TOKENS.transitionBase}`,
-              pointerEvents: "auto"
-              // Re-enable pointer events for interactive toolbar
-            },
-            children: [
-              /* @__PURE__ */ jsx5(
-                ToolbarButton,
-                {
-                  onClick: handleToggleClick,
-                  active: liveScanEnabled,
-                  title: liveScanEnabled ? "Stop scanning (\u2325S)" : "Start scanning (\u2325S)",
-                  ariaLabel: liveScanEnabled ? "Stop live scanning" : "Start live scanning",
-                  width: "48px",
-                  children: liveScanEnabled ? /* @__PURE__ */ jsx5(Icons.Eye, {}) : /* @__PURE__ */ jsx5(Icons.EyeOff, {})
-                }
-              ),
-              /* @__PURE__ */ jsx5(Divider, {}),
-              /* @__PURE__ */ jsx5(
-                ToolbarButton,
-                {
-                  onClick: handleIssuesClick,
-                  active: showResults && liveScanEnabled,
-                  variant: issueVariant,
-                  title: !liveScanEnabled ? "Click to enable scanning" : `${totalIssues} issue${totalIssues !== 1 ? "s" : ""} found`,
-                  ariaLabel: !liveScanEnabled ? "Enable scanning to see issues" : `View ${totalIssues} issues`,
-                  width: "auto",
-                  children: /* @__PURE__ */ jsx5("span", { style: { padding: "0 12px" }, children: /* @__PURE__ */ jsx5(
-                    ScanStatus,
-                    {
-                      status: autoScanState.status,
-                      issueCount: totalIssues,
-                      enabled: liveScanEnabled
-                    }
-                  ) })
-                }
-              ),
-              /* @__PURE__ */ jsx5(Divider, {}),
-              /* @__PURE__ */ jsx5(
-                ToolbarButton,
-                {
-                  onClick: handleSettingsClick,
-                  active: showSettings,
-                  title: "Settings",
-                  ariaLabel: "Open settings",
-                  width: "44px",
-                  children: /* @__PURE__ */ jsx5(Icons.Settings, {})
-                }
-              )
-            ]
+            style: { pointerEvents: "auto" },
+            children: renderToolbar()
           }
         ),
-        showSettings && /* @__PURE__ */ jsx5(
+        showSettings && !liveScanEnabled && /* @__PURE__ */ jsx5(
           "div",
           {
             ref: settingsRef,
@@ -1854,7 +1829,6 @@ function UILintToolbar() {
               left: 0,
               marginBottom: "8px",
               pointerEvents: "auto"
-              // Re-enable pointer events for popover
             },
             children: /* @__PURE__ */ jsx5(SettingsPopover, { settings })
           }

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

@@ -1063,10 +1063,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect2(() => {
     Promise.all([
-      import("./UILintToolbar-XJN6LFWZ.js"),
-      import("./InspectionPanel-EOW6OJFT.js"),
-      import("./LocatorOverlay-BF6EED4N.js"),
-      import("./ElementBadges-E35MQ2SV.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-JURUYCUC.js → chunk-UF6KN2JJ.js}

@@ -7,7 +7,7 @@ import {
   buildEditorUrl,
   useUILintContext,
   useUILintStore
-} from "./chunk-OU5EEQT6.js";
+} from "./chunk-RAPUZC5J.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import React, {

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,10 +1,10 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-XUMLILUN.js";
+} from "./chunk-OSYIUF52.js";
 import {
   InspectionPanel
-} from "./chunk-JURUYCUC.js";
+} from "./chunk-UF6KN2JJ.js";
 import {
   clearSourceCache,
   fetchSource,
@@ -14,7 +14,7 @@ import {
 } from "./chunk-S4IWHBOQ.js";
 import {
   LocatorOverlay
-} from "./chunk-LQ3WQYIF.js";
+} from "./chunk-LNLTM7N6.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -30,7 +30,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-OU5EEQT6.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.46",
+  "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.46",
+    "uilint-core": "^0.1.47",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {