uilint-react 0.1.35 → 0.1.37

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

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-I4JDR36K.js";
+} from "./chunk-DEHJKJNT.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -167,6 +167,18 @@ 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;
@@ -318,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;
@@ -353,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",
@@ -370,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: [
@@ -415,8 +431,8 @@ 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",

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

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

package/dist/{LocatorOverlay-YTDVYPJQ.js → LocatorOverlay-IUZV5OVI.js}

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

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

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

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

@@ -1033,10 +1033,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-WF5WHENS.js"),
-      import("./InspectionPanel-Z2F7PDVS.js"),
-      import("./LocatorOverlay-YTDVYPJQ.js"),
-      import("./ElementBadges-M7WT4MWJ.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-IGVNY64A.js → chunk-EYWLUDXI.js}

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

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

@@ -2,7 +2,7 @@
 import {
   buildEditorUrl,
   useUILintContext
-} from "./chunk-I4JDR36K.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-3YZH4UAT.js → chunk-LZX53CPI.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-I4JDR36K.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-IGVNY64A.js";
+} from "./chunk-EYWLUDXI.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-GKYWTCFU.js";
+} from "./chunk-ITKEGCAZ.js";
 import {
   LocatorOverlay
-} from "./chunk-3YZH4UAT.js";
+} from "./chunk-LZX53CPI.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-I4JDR36K.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.35",
+  "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.35",
+    "uilint-core": "^0.1.37",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {