uilint-react 0.1.24 → 0.1.26

package/dist/{ElementBadges-T4N3VQRI.js → ElementBadges-HFQNIIO2.js}

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-I4C3NAUH.js";
+} from "./chunk-5VJ2Q2QW.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -19,7 +19,16 @@ var STYLES = {
   font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   shadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
 };
-var PROXIMITY_THRESHOLD = 100;
+var NEAR_DISTANCE = 0;
+var FAR_DISTANCE = 150;
+var MIN_SCALE = 0.5;
+var MAX_SCALE = 1;
+function getScaleFromDistance(distance) {
+  if (distance <= NEAR_DISTANCE) return MAX_SCALE;
+  if (distance >= FAR_DISTANCE) return MIN_SCALE;
+  const t = (distance - NEAR_DISTANCE) / (FAR_DISTANCE - NEAR_DISTANCE);
+  return MAX_SCALE - t * (MAX_SCALE - MIN_SCALE);
+}
 var CLUSTER_THRESHOLD = 24;
 function getBadgeColor(issueCount) {
   if (issueCount === 0) return STYLES.success;
@@ -29,7 +38,7 @@ function getBadgeColor(issueCount) {
 function ElementBadge({
   element,
   issue,
-  isNearCursor,
+  distance,
   onSelect
 }) {
   const [rect, setRect] = useState(null);
@@ -64,16 +73,17 @@ function ElementBadge({
   if (!rect) return null;
   if (rect.top < -50 || rect.top > window.innerHeight + 50) return null;
   if (rect.left < -50 || rect.left > window.innerWidth + 50) return null;
+  const scale = isHovered ? 1.1 : getScaleFromDistance(distance);
   const badgeStyle = {
     position: "fixed",
     top: rect.top - 8,
     left: rect.right - 8,
     zIndex: isHovered ? 99999 : 99995,
     cursor: "pointer",
-    transition: "transform 0.15s ease-out",
-    transform: isHovered ? "scale(1.1)" : "scale(1)"
+    transition: "transform 0.1s ease-out",
+    transform: `scale(${scale})`,
+    transformOrigin: "center center"
   };
-  const badgeColor = issue.status === "complete" ? getBadgeColor(issue.issues.length) : issue.status === "error" ? STYLES.error : issue.status === "scanning" ? STYLES.highlight : "rgba(156, 163, 175, 0.5)";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isHovered && /* @__PURE__ */ jsx(
       "div",
@@ -93,7 +103,7 @@ function ElementBadge({
         "data-ui-lint": true
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         style: badgeStyle,
@@ -101,32 +111,16 @@ function ElementBadge({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         onClick: handleClick,
-        children: isNearCursor || isHovered ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: [
           issue.status === "scanning" && /* @__PURE__ */ jsx(ScanningBadge, {}),
           issue.status === "complete" && /* @__PURE__ */ jsx(IssueBadge, { count: issue.issues.length }),
           issue.status === "error" && /* @__PURE__ */ jsx(ErrorBadge, {}),
           issue.status === "pending" && /* @__PURE__ */ jsx(PendingBadge, {})
-        ] }) : /* @__PURE__ */ jsx(MinimizedBadge, { color: badgeColor })
+        ]
       }
     )
   ] });
 }
-function MinimizedBadge({ color }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: "6px",
-        height: "6px",
-        borderRadius: "50%",
-        backgroundColor: color,
-        opacity: 0.7,
-        transition: "all 0.15s ease-out",
-        boxShadow: STYLES.shadow
-      }
-    }
-  );
-}
 function IssueBadge({ count }) {
   const color = getBadgeColor(count);
   if (count === 0) {
@@ -357,13 +351,12 @@ function ElementBadges() {
     if (cluster.badges.length === 1) {
       const { element, issue, x, y } = cluster.badges[0];
       const distance = Math.hypot(x - cursorPos.x, y - cursorPos.y);
-      const isNearCursor = distance <= PROXIMITY_THRESHOLD;
       return /* @__PURE__ */ jsx(
         ElementBadge,
         {
           element,
           issue,
-          isNearCursor,
+          distance,
           onSelect: handleSelect
         },
         element.id
@@ -373,12 +366,11 @@ function ElementBadges() {
         cluster.centroidX - cursorPos.x,
         cluster.centroidY - cursorPos.y
       );
-      const isNearCursor = distance <= PROXIMITY_THRESHOLD;
       return /* @__PURE__ */ jsx(
         ClusteredBadge,
         {
           cluster,
-          isNearCursor,
+          distance,
           onSelect: handleSelect
         },
         cluster.id
@@ -387,11 +379,7 @@ function ElementBadges() {
   }) });
   return createPortal(content, document.body);
 }
-function ClusteredBadge({
-  cluster,
-  isNearCursor,
-  onSelect
-}) {
+function ClusteredBadge({ cluster, distance, onSelect }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const closeTimeoutRef = React.useRef(null);
@@ -413,17 +401,6 @@ function ClusteredBadge({
       }
     });
   }, [cluster.badges]);
-  const worstColor = useMemo(() => {
-    let worst = 0;
-    for (const { issue } of cluster.badges) {
-      if (issue.status === "complete") {
-        worst = Math.max(worst, issue.issues.length);
-      } else if (issue.status === "error") {
-        worst = Math.max(worst, 10);
-      }
-    }
-    return getBadgeColor(worst);
-  }, [cluster.badges]);
   const handleMouseEnter = useCallback(() => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
@@ -484,12 +461,15 @@ function ClusteredBadge({
           top: cluster.centroidY - 9,
           left: cluster.centroidX - 9,
           zIndex: isExpanded ? 99999 : 99995,
-          cursor: "pointer"
+          cursor: "pointer",
+          transition: "transform 0.1s ease-out",
+          transform: `scale(${isExpanded ? 1.1 : getScaleFromDistance(distance)})`,
+          transformOrigin: "center center"
         },
         "data-ui-lint": true,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        children: isNearCursor || isExpanded ? /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -500,9 +480,7 @@ function ClusteredBadge({
               backgroundColor: STYLES.bg,
               boxShadow: STYLES.shadow,
               border: `1px solid ${STYLES.border}`,
-              overflow: "hidden",
-              transition: "transform 0.15s ease-out",
-              transform: isExpanded ? "scale(1.1)" : "scale(1)"
+              overflow: "hidden"
             },
             children: badgeSegments.map((segment, index) => /* @__PURE__ */ jsxs(
               "div",
@@ -560,7 +538,7 @@ function ClusteredBadge({
               index
             ))
           }
-        ) : /* @__PURE__ */ jsx(MinimizedBadge, { color: worstColor })
+        )
       }
     ),
     isExpanded && /* @__PURE__ */ jsx(

package/dist/{InspectionPanel-47JBBKBL.js → InspectionPanel-4OWY4FVY.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-FWYNI6JG.js";
-import "./chunk-I4C3NAUH.js";
+} from "./chunk-QYRESGFG.js";
+import "./chunk-5VJ2Q2QW.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-ADJUWU2H.js → LocatorOverlay-JJDOKNOS.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-EB6K2KGR.js";
-import "./chunk-I4C3NAUH.js";
+} from "./chunk-XLIDEQXH.js";
+import "./chunk-5VJ2Q2QW.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-5PG6WVW6.js → UILintToolbar-GMZ6YSI2.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-GFURSJEQ.js";
-import "./chunk-I4C3NAUH.js";
+} from "./chunk-7X5HN55P.js";
+import "./chunk-5VJ2Q2QW.js";
 export {
   UILintToolbar
 };