uilint-react 0.1.34 → 0.1.37

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

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-MO4NS6EG.js";
+} from "./chunk-DEHJKJNT.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -167,6 +167,29 @@ function formatElementLabel(element) {
   return componentName ? `${tag} > ${componentName}` : tag;
 }
 var NEARBY_THRESHOLD = 30;
+var WINDOW_EDGE_THRESHOLD = 20;
+var BADGE_SIZE = 18;
+function snapToWindowBounds(x, y) {
+  const minX = WINDOW_EDGE_THRESHOLD;
+  const maxX = window.innerWidth - BADGE_SIZE - WINDOW_EDGE_THRESHOLD;
+  const minY = WINDOW_EDGE_THRESHOLD;
+  const maxY = window.innerHeight - BADGE_SIZE - WINDOW_EDGE_THRESHOLD;
+  return {
+    x: Math.max(minX, Math.min(maxX, x)),
+    y: Math.max(minY, Math.min(maxY, y))
+  };
+}
+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 +203,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 +283,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
@@ -278,6 +330,10 @@ function NudgedBadge({
   const closeTimeoutRef = React.useRef(null);
   const { element, issue, rect, nudgedX, nudgedY } = position;
   const hasNearbyBadges = nearbyBadges.length > 1;
+  const snappedPosition = useMemo(
+    () => snapToWindowBounds(nudgedX, nudgedY),
+    [nudgedX, nudgedY]
+  );
   const badgeColor = useMemo(() => {
     if (issue.status === "error") return STYLES.error;
     if (issue.status === "scanning") return STYLES.highlight;
@@ -313,14 +369,14 @@ function NudgedBadge({
     return nearbyBadges[hoveredIndex] ?? null;
   }, [hoveredIndex, nearbyBadges]);
   const dropdownStyle = useMemo(() => {
-    const preferRight = nudgedX < window.innerWidth - 220;
-    const preferBelow = nudgedY < window.innerHeight - 200;
+    const preferRight = snappedPosition.x < window.innerWidth - 220;
+    const preferBelow = snappedPosition.y < window.innerHeight - 200;
     return {
       position: "fixed",
-      top: preferBelow ? nudgedY + 12 : void 0,
-      bottom: preferBelow ? void 0 : window.innerHeight - nudgedY + 12,
-      left: preferRight ? nudgedX - 8 : void 0,
-      right: preferRight ? void 0 : window.innerWidth - nudgedX - 8,
+      top: preferBelow ? snappedPosition.y + 12 : void 0,
+      bottom: preferBelow ? void 0 : window.innerHeight - snappedPosition.y + 12,
+      left: preferRight ? snappedPosition.x - 8 : void 0,
+      right: preferRight ? void 0 : window.innerWidth - snappedPosition.x - 8,
       zIndex: 1e5,
       backgroundColor: STYLES.bg,
       borderRadius: "8px",
@@ -330,7 +386,7 @@ function NudgedBadge({
       minWidth: "200px",
       fontFamily: STYLES.font
     };
-  }, [nudgedX, nudgedY]);
+  }, [snappedPosition]);
   const scale = isExpanded ? 1.1 : getScaleFromDistance(distance);
   const issueCount = issue.status === "complete" ? issue.issues.length : 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -375,11 +431,11 @@ function NudgedBadge({
       {
         style: {
           position: "fixed",
-          top: nudgedY - 9,
-          left: nudgedX - 9,
+          top: snappedPosition.y - 0,
+          left: snappedPosition.x - 0,
           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-FY7QVWP5.js}

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

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

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

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

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

package/dist/{chunk-MO4NS6EG.js → chunk-DEHJKJNT.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-TM3DVGPO.js"),
+      import("./InspectionPanel-FY7QVWP5.js"),
+      import("./LocatorOverlay-IUZV5OVI.js"),
+      import("./ElementBadges-BASN6P5L.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

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

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

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

@@ -2,7 +2,7 @@
 import {
   buildEditorUrl,
   useUILintContext
-} from "./chunk-MO4NS6EG.js";
+} from "./chunk-DEHJKJNT.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback, useMemo } from "react";
@@ -666,26 +666,6 @@ function ScanSection({ element }) {
           }
         ),
         showCachedResult && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginBottom: "12px",
-                padding: "8px 12px",
-                backgroundColor: "rgba(16, 185, 129, 0.1)",
-                borderRadius: "6px",
-                fontSize: "11px",
-                color: STYLES.success
-              },
-              children: [
-                /* @__PURE__ */ jsx(CheckIconSmall, {}),
-                "Scan complete"
-              ]
-            }
-          ),
           eslintIssues.length > 0 && /* @__PURE__ */ jsx(ESLintIssuesSection, { issues: eslintIssues }),
           eslintIssues.length === 0 && /* @__PURE__ */ jsx(
             "div",
@@ -831,18 +811,6 @@ function ESLintIssuesSection({ issues }) {
     )
   ] });
 }
-function CheckIconSmall() {
-  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M20 6L9 17l-5-5",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
 function Section({
   title,
   children

package/dist/{chunk-Z6PWYQGW.js → chunk-LZX53CPI.js}

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

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-HTNIKCEM.js";
+} from "./chunk-EYWLUDXI.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-JBBUE3Y5.js";
+} from "./chunk-ITKEGCAZ.js";
 import {
   LocatorOverlay
-} from "./chunk-Z6PWYQGW.js";
+} from "./chunk-LZX53CPI.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-MO4NS6EG.js";
+} from "./chunk-DEHJKJNT.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.37",
   "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.37",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {