uilint-react 0.1.34 → 0.1.35

package/dist/{ElementBadges-TBAUB3KM.js → ElementBadges-M7WT4MWJ.js}

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-MO4NS6EG.js";
+} from "./chunk-I4JDR36K.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -167,6 +167,17 @@ function formatElementLabel(element) {
   return componentName ? `${tag} > ${componentName}` : tag;
 }
 var NEARBY_THRESHOLD = 30;
+function shouldShowBadge(issue, isAltKeyPressed) {
+  if (issue.status === "error") return true;
+  if (issue.status === "complete" && issue.issues.length > 0) return true;
+  if (issue.status === "complete" && issue.issues.length === 0) {
+    return isAltKeyPressed;
+  }
+  if (issue.status === "scanning" || issue.status === "pending") {
+    return isAltKeyPressed;
+  }
+  return false;
+}
 function BadgeAnimationStyles() {
   return /* @__PURE__ */ jsx("style", { children: `
       @keyframes uilint-badge-spin {
@@ -180,9 +191,33 @@ function ElementBadges() {
   const [mounted, setMounted] = useState(false);
   const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
   const [badgePositions, setBadgePositions] = useState([]);
+  const [isAltKeyPressed, setIsAltKeyPressed] = useState(false);
   useEffect(() => {
     setMounted(true);
   }, []);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.altKey) {
+        setIsAltKeyPressed(true);
+      }
+    };
+    const handleKeyUp = (e) => {
+      if (!e.altKey) {
+        setIsAltKeyPressed(false);
+      }
+    };
+    const handleBlur = () => {
+      setIsAltKeyPressed(false);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, []);
   useEffect(() => {
     const handleMouseMove = (e) => {
       setCursorPos({ x: e.clientX, y: e.clientY });
@@ -236,17 +271,22 @@ function ElementBadges() {
     () => BadgeLayoutBuilder.create(badgePositions).minDistance(24).repulsion(50).anchorStrength(0.3).iterations(50).compute(),
     [badgePositions]
   );
+  const visibleBadges = useMemo(() => {
+    return nudgedPositions.filter(
+      (pos) => shouldShowBadge(pos.issue, isAltKeyPressed)
+    );
+  }, [nudgedPositions, isAltKeyPressed]);
   if (!mounted) return null;
   if (autoScanState.status === "idle") return null;
   const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, children: [
     /* @__PURE__ */ jsx(BadgeAnimationStyles, {}),
-    nudgedPositions.map((nudgedPos) => {
+    visibleBadges.map((nudgedPos) => {
       const distance = Math.hypot(
         nudgedPos.nudgedX - cursorPos.x,
         nudgedPos.nudgedY - cursorPos.y
       );
       const nearbyBadges = findNearbyBadges(
-        nudgedPositions,
+        visibleBadges,
         nudgedPos.nudgedX,
         nudgedPos.nudgedY,
         NEARBY_THRESHOLD
@@ -379,7 +419,7 @@ function NudgedBadge({
           left: nudgedX - 9,
           zIndex: isExpanded ? 99999 : 99995,
           cursor: "pointer",
-          transition: "transform 0.1s ease-out, top 0.15s ease-out, left 0.15s ease-out",
+          transition: "transform 0.1s ease-out",
           transform: `scale(${scale})`,
           transformOrigin: "center center"
         },

package/dist/{InspectionPanel-JNLWBL4D.js → InspectionPanel-Z2F7PDVS.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-JBBUE3Y5.js";
-import "./chunk-MO4NS6EG.js";
+} from "./chunk-GKYWTCFU.js";
+import "./chunk-I4JDR36K.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-6SAH7LN2.js → LocatorOverlay-YTDVYPJQ.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-Z6PWYQGW.js";
-import "./chunk-MO4NS6EG.js";
+} from "./chunk-3YZH4UAT.js";
+import "./chunk-I4JDR36K.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-WNV5RS2L.js → UILintToolbar-WF5WHENS.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-HTNIKCEM.js";
-import "./chunk-MO4NS6EG.js";
+} from "./chunk-IGVNY64A.js";
+import "./chunk-I4JDR36K.js";
 export {
   UILintToolbar
 };

package/dist/{chunk-Z6PWYQGW.js → chunk-3YZH4UAT.js}

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

package/dist/{chunk-JBBUE3Y5.js → chunk-GKYWTCFU.js}

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

package/dist/{chunk-MO4NS6EG.js → chunk-I4JDR36K.js}

@@ -1033,10 +1033,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-WNV5RS2L.js"),
-      import("./InspectionPanel-JNLWBL4D.js"),
-      import("./LocatorOverlay-6SAH7LN2.js"),
-      import("./ElementBadges-TBAUB3KM.js")
+      import("./UILintToolbar-WF5WHENS.js"),
+      import("./InspectionPanel-Z2F7PDVS.js"),
+      import("./LocatorOverlay-YTDVYPJQ.js"),
+      import("./ElementBadges-M7WT4MWJ.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

package/dist/{chunk-HTNIKCEM.js → chunk-IGVNY64A.js}

@@ -2,7 +2,7 @@
 import {
   useUILintContext,
   useUILintStore
-} from "./chunk-MO4NS6EG.js";
+} from "./chunk-I4JDR36K.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-HTNIKCEM.js";
+} from "./chunk-IGVNY64A.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-JBBUE3Y5.js";
+} from "./chunk-GKYWTCFU.js";
 import {
   LocatorOverlay
-} from "./chunk-Z6PWYQGW.js";
+} from "./chunk-3YZH4UAT.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-MO4NS6EG.js";
+} from "./chunk-I4JDR36K.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

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