uilint-react 0.1.28 → 0.1.29

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

@@ -2,11 +2,131 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-5VJ2Q2QW.js";
+} from "./chunk-MDEVC3SQ.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
+
+// src/components/ui-lint/badge-layout.ts
+var DEFAULT_CONFIG = {
+  repulsionForce: 50,
+  anchorStrength: 0.3,
+  minDistance: 24,
+  iterations: 50,
+  damping: 0.9
+};
+function computeLayout(positions, config) {
+  if (positions.length === 0) return [];
+  if (positions.length === 1) {
+    return [{ ...positions[0], nudgedX: positions[0].x, nudgedY: positions[0].y }];
+  }
+  const nodes = positions.map((p) => ({
+    position: p,
+    nudgedX: p.x,
+    nudgedY: p.y,
+    velocityX: 0,
+    velocityY: 0
+  }));
+  for (let iter = 0; iter < config.iterations; iter++) {
+    for (let i = 0; i < nodes.length; i++) {
+      let fx = 0;
+      let fy = 0;
+      for (let j = 0; j < nodes.length; j++) {
+        if (i === j) continue;
+        const dx = nodes[i].nudgedX - nodes[j].nudgedX;
+        const dy = nodes[i].nudgedY - nodes[j].nudgedY;
+        const dist = Math.max(Math.hypot(dx, dy), 1);
+        if (dist < config.minDistance) {
+          const force = config.repulsionForce / (dist * dist);
+          fx += dx / dist * force;
+          fy += dy / dist * force;
+        }
+      }
+      const anchorDx = positions[i].x - nodes[i].nudgedX;
+      const anchorDy = positions[i].y - nodes[i].nudgedY;
+      fx += anchorDx * config.anchorStrength;
+      fy += anchorDy * config.anchorStrength;
+      nodes[i].velocityX = (nodes[i].velocityX + fx) * config.damping;
+      nodes[i].velocityY = (nodes[i].velocityY + fy) * config.damping;
+      nodes[i].nudgedX += nodes[i].velocityX;
+      nodes[i].nudgedY += nodes[i].velocityY;
+    }
+  }
+  return nodes.map((node) => ({
+    ...node.position,
+    nudgedX: node.nudgedX,
+    nudgedY: node.nudgedY
+  }));
+}
+var BadgeLayoutBuilder = class _BadgeLayoutBuilder {
+  config;
+  positions;
+  constructor(positions) {
+    this.positions = positions;
+    this.config = { ...DEFAULT_CONFIG };
+  }
+  /**
+   * Create a new layout builder with badge positions
+   */
+  static create(positions) {
+    return new _BadgeLayoutBuilder(positions);
+  }
+  /**
+   * Set the repulsion force (how strongly badges push apart)
+   * Higher values = badges spread more aggressively
+   */
+  repulsion(force) {
+    this.config.repulsionForce = force;
+    return this;
+  }
+  /**
+   * Set the anchor strength (how strongly badges stay near origin)
+   * Higher values = badges stay closer to their original positions
+   */
+  anchorStrength(strength) {
+    this.config.anchorStrength = strength;
+    return this;
+  }
+  /**
+   * Set the minimum distance between badge centers
+   * Badges closer than this will be pushed apart
+   */
+  minDistance(distance) {
+    this.config.minDistance = distance;
+    return this;
+  }
+  /**
+   * Set the number of simulation iterations
+   * More iterations = more stable but slower
+   */
+  iterations(count) {
+    this.config.iterations = count;
+    return this;
+  }
+  /**
+   * Set the damping factor (velocity decay per step)
+   * Lower values = system settles faster but may be less stable
+   */
+  damping(factor) {
+    this.config.damping = factor;
+    return this;
+  }
+  /**
+   * Run the simulation and return nudged positions
+   */
+  compute() {
+    return computeLayout(this.positions, this.config);
+  }
+};
+function findNearbyBadges(positions, x, y, threshold) {
+  return positions.filter((p) => {
+    const dist = Math.hypot(p.nudgedX - x, p.nudgedY - y);
+    return dist <= threshold;
+  });
+}
+
+// src/components/ui-lint/ElementBadges.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var STYLES = {
   bg: "rgba(17, 24, 39, 0.95)",
@@ -29,260 +149,29 @@ function getScaleFromDistance(distance) {
   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;
   if (issueCount <= 2) return STYLES.warning;
   return STYLES.error;
 }
-function ElementBadge({
-  element,
-  issue,
-  distance,
-  onSelect
-}) {
-  const [rect, setRect] = useState(null);
-  const [isHovered, setIsHovered] = useState(false);
-  useEffect(() => {
-    const updateRect = () => {
-      if (element.element && document.contains(element.element)) {
-        setRect(element.element.getBoundingClientRect());
-      } else {
-        setRect(null);
-      }
-    };
-    updateRect();
-    let rafId;
-    const handleUpdate = () => {
-      updateRect();
-      rafId = requestAnimationFrame(handleUpdate);
-    };
-    rafId = requestAnimationFrame(handleUpdate);
-    return () => {
-      cancelAnimationFrame(rafId);
-    };
-  }, [element.element]);
-  const handleClick = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onSelect(element, issue);
-    },
-    [element, issue, onSelect]
-  );
-  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.1s ease-out",
-    transform: `scale(${scale})`,
-    transformOrigin: "center center"
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isHovered && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          top: rect.top - 2,
-          left: rect.left - 2,
-          width: rect.width + 4,
-          height: rect.height + 4,
-          border: `2px solid ${STYLES.highlight}`,
-          borderRadius: "4px",
-          pointerEvents: "none",
-          zIndex: 99994,
-          boxShadow: `0 0 0 1px rgba(59, 130, 246, 0.3)`
-        },
-        "data-ui-lint": true
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: badgeStyle,
-        "data-ui-lint": true,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
-        onClick: handleClick,
-        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, {})
-        ]
-      }
-    )
-  ] });
-}
-function IssueBadge({ count }) {
-  const color = getBadgeColor(count);
-  if (count === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "18px",
-          height: "18px",
-          borderRadius: "50%",
-          backgroundColor: color,
-          boxShadow: STYLES.shadow,
-          border: `1px solid ${STYLES.border}`
-        },
-        children: /* @__PURE__ */ jsx(CheckIcon, {})
-      }
-    );
+function formatElementLabel(element) {
+  const tag = element.tagName.toLowerCase();
+  const source = element.source;
+  if (source) {
+    const fileName = source.fileName.split("/").pop() || "Unknown";
+    return `${tag} > ${fileName}`;
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minWidth: "18px",
-        height: "18px",
-        padding: "0 5px",
-        borderRadius: "9px",
-        backgroundColor: color,
-        color: STYLES.text,
-        fontSize: "10px",
-        fontWeight: 700,
-        fontFamily: STYLES.font,
-        boxShadow: STYLES.shadow,
-        border: `1px solid ${STYLES.border}`
-      },
-      children: count > 9 ? "9+" : count
-    }
-  );
+  const componentName = element.componentStack[0]?.name;
+  return componentName ? `${tag} > ${componentName}` : tag;
 }
-function ScanningBadge() {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "18px",
-        height: "18px",
-        borderRadius: "50%",
-        backgroundColor: STYLES.bg,
-        boxShadow: STYLES.shadow,
-        border: `1px solid ${STYLES.border}`
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes uilint-badge-spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      ` }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: "10px",
-              height: "10px",
-              border: "2px solid rgba(59, 130, 246, 0.3)",
-              borderTopColor: "#3B82F6",
-              borderRadius: "50%",
-              animation: "uilint-badge-spin 0.8s linear infinite"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function PendingBadge() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: "10px",
-        height: "10px",
-        borderRadius: "50%",
-        backgroundColor: "rgba(156, 163, 175, 0.5)",
-        boxShadow: STYLES.shadow
+var NEARBY_THRESHOLD = 30;
+function BadgeAnimationStyles() {
+  return /* @__PURE__ */ jsx("style", { children: `
+      @keyframes uilint-badge-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
       }
-    }
-  );
-}
-function ErrorBadge() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "18px",
-        height: "18px",
-        borderRadius: "50%",
-        backgroundColor: STYLES.error,
-        boxShadow: STYLES.shadow,
-        border: `1px solid ${STYLES.border}`
-      },
-      children: /* @__PURE__ */ jsx(ExclamationIcon, {})
-    }
-  );
-}
-var UnionFind = class {
-  parent = /* @__PURE__ */ new Map();
-  find(x) {
-    if (!this.parent.has(x)) {
-      this.parent.set(x, x);
-    }
-    if (this.parent.get(x) !== x) {
-      this.parent.set(x, this.find(this.parent.get(x)));
-    }
-    return this.parent.get(x);
-  }
-  union(x, y) {
-    const px = this.find(x);
-    const py = this.find(y);
-    if (px !== py) {
-      this.parent.set(px, py);
-    }
-  }
-};
-function clusterBadges(positions, threshold) {
-  if (positions.length === 0) return [];
-  const uf = new UnionFind();
-  for (let i = 0; i < positions.length; i++) {
-    for (let j = i + 1; j < positions.length; j++) {
-      const dist = Math.hypot(
-        positions[i].x - positions[j].x,
-        positions[i].y - positions[j].y
-      );
-      if (dist <= threshold) {
-        uf.union(positions[i].element.id, positions[j].element.id);
-      }
-    }
-  }
-  const clusters = /* @__PURE__ */ new Map();
-  for (const pos of positions) {
-    const root = uf.find(pos.element.id);
-    if (!clusters.has(root)) {
-      clusters.set(root, []);
-    }
-    clusters.get(root).push(pos);
-  }
-  return Array.from(clusters.entries()).map(([id, badges]) => {
-    const centroidX = badges.reduce((sum, b) => sum + b.x, 0) / badges.length;
-    const centroidY = badges.reduce((sum, b) => sum + b.y, 0) / badges.length;
-    return { id, badges, centroidX, centroidY };
-  });
+    ` });
 }
 function ElementBadges() {
   const { autoScanState, elementIssuesCache, setInspectedElement } = useUILintContext();
@@ -341,66 +230,61 @@ function ElementBadges() {
     },
     [setInspectedElement]
   );
-  const clusters = useMemo(
-    () => clusterBadges(badgePositions, CLUSTER_THRESHOLD),
+  const nudgedPositions = useMemo(
+    () => BadgeLayoutBuilder.create(badgePositions).minDistance(24).repulsion(50).anchorStrength(0.3).iterations(50).compute(),
     [badgePositions]
   );
   if (!mounted) return null;
   if (autoScanState.status === "idle") return null;
-  const content = /* @__PURE__ */ jsx("div", { "data-ui-lint": true, children: clusters.map((cluster) => {
-    if (cluster.badges.length === 1) {
-      const { element, issue, x, y } = cluster.badges[0];
-      const distance = Math.hypot(x - cursorPos.x, y - cursorPos.y);
-      return /* @__PURE__ */ jsx(
-        ElementBadge,
-        {
-          element,
-          issue,
-          distance,
-          onSelect: handleSelect
-        },
-        element.id
-      );
-    } else {
+  const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, children: [
+    /* @__PURE__ */ jsx(BadgeAnimationStyles, {}),
+    nudgedPositions.map((nudgedPos) => {
       const distance = Math.hypot(
-        cluster.centroidX - cursorPos.x,
-        cluster.centroidY - cursorPos.y
+        nudgedPos.nudgedX - cursorPos.x,
+        nudgedPos.nudgedY - cursorPos.y
+      );
+      const nearbyBadges = findNearbyBadges(
+        nudgedPositions,
+        nudgedPos.nudgedX,
+        nudgedPos.nudgedY,
+        NEARBY_THRESHOLD
       );
       return /* @__PURE__ */ jsx(
-        ClusteredBadge,
+        NudgedBadge,
         {
-          cluster,
+          position: nudgedPos,
           distance,
+          nearbyBadges,
+          cursorPos,
           onSelect: handleSelect
         },
-        cluster.id
+        nudgedPos.element.id
       );
-    }
-  }) });
+    })
+  ] });
   return createPortal(content, document.body);
 }
-function ClusteredBadge({ cluster, distance, onSelect }) {
+function NudgedBadge({
+  position,
+  distance,
+  nearbyBadges,
+  cursorPos,
+  onSelect
+}) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const closeTimeoutRef = React.useRef(null);
-  const badgeSegments = useMemo(() => {
-    return cluster.badges.map(({ issue }) => {
-      if (issue.status === "complete") {
-        const count = issue.issues.length;
-        return {
-          type: "count",
-          count,
-          color: getBadgeColor(count)
-        };
-      } else if (issue.status === "error") {
-        return { type: "error", color: STYLES.error };
-      } else if (issue.status === "scanning") {
-        return { type: "scanning", color: STYLES.highlight };
-      } else {
-        return { type: "pending", color: "rgba(156, 163, 175, 0.5)" };
-      }
-    });
-  }, [cluster.badges]);
+  const { element, issue, rect, nudgedX, nudgedY } = position;
+  const hasNearbyBadges = nearbyBadges.length > 1;
+  const badgeColor = useMemo(() => {
+    if (issue.status === "error") return STYLES.error;
+    if (issue.status === "scanning") return STYLES.highlight;
+    if (issue.status === "pending") return "rgba(156, 163, 175, 0.7)";
+    if (issue.status === "complete") {
+      return getBadgeColor(issue.issues.length);
+    }
+    return STYLES.success;
+  }, [issue]);
   const handleMouseEnter = useCallback(() => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
@@ -414,27 +298,58 @@ function ClusteredBadge({ cluster, distance, onSelect }) {
       setHoveredIndex(null);
     }, 150);
   }, []);
-  const hoveredBadge = hoveredIndex !== null ? cluster.badges[hoveredIndex] : null;
+  const handleClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onSelect(element, issue);
+    },
+    [element, issue, onSelect]
+  );
+  const hoveredBadge = useMemo(() => {
+    if (hoveredIndex === null) return null;
+    return nearbyBadges[hoveredIndex] ?? null;
+  }, [hoveredIndex, nearbyBadges]);
   const dropdownStyle = useMemo(() => {
-    const preferRight = cluster.centroidX < window.innerWidth - 200;
-    const preferBelow = cluster.centroidY < window.innerHeight - 200;
+    const preferRight = nudgedX < window.innerWidth - 220;
+    const preferBelow = nudgedY < window.innerHeight - 200;
     return {
       position: "fixed",
-      top: preferBelow ? cluster.centroidY + 12 : void 0,
-      bottom: preferBelow ? void 0 : window.innerHeight - cluster.centroidY + 12,
-      left: preferRight ? cluster.centroidX - 8 : void 0,
-      right: preferRight ? void 0 : window.innerWidth - cluster.centroidX - 8,
+      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,
       zIndex: 1e5,
       backgroundColor: STYLES.bg,
       borderRadius: "8px",
       border: `1px solid ${STYLES.border}`,
       boxShadow: "0 4px 20px rgba(0, 0, 0, 0.4)",
       padding: "4px 0",
-      minWidth: "180px",
+      minWidth: "200px",
       fontFamily: STYLES.font
     };
-  }, [cluster.centroidX, cluster.centroidY]);
+  }, [nudgedX, nudgedY]);
+  const scale = isExpanded ? 1.1 : getScaleFromDistance(distance);
+  const issueCount = issue.status === "complete" ? issue.issues.length : 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isExpanded && !hoveredBadge && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top - 2,
+          left: rect.left - 2,
+          width: rect.width + 4,
+          height: rect.height + 4,
+          border: `2px solid ${STYLES.highlight}`,
+          borderRadius: "4px",
+          pointerEvents: "none",
+          zIndex: 99994,
+          boxShadow: `0 0 0 1px rgba(59, 130, 246, 0.3)`
+        },
+        "data-ui-lint": true
+      }
+    ),
     hoveredBadge && /* @__PURE__ */ jsx(
       "div",
       {
@@ -458,98 +373,79 @@ function ClusteredBadge({ cluster, distance, onSelect }) {
       {
         style: {
           position: "fixed",
-          top: cluster.centroidY - 9,
-          left: cluster.centroidX - 9,
+          top: nudgedY - 9,
+          left: nudgedX - 9,
           zIndex: isExpanded ? 99999 : 99995,
           cursor: "pointer",
-          transition: "transform 0.1s ease-out",
-          transform: `scale(${isExpanded ? 1.1 : getScaleFromDistance(distance)})`,
+          transition: "transform 0.1s ease-out, top 0.15s ease-out, left 0.15s ease-out",
+          transform: `scale(${scale})`,
           transformOrigin: "center center"
         },
         "data-ui-lint": true,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
         children: /* @__PURE__ */ jsx(
           "div",
           {
             style: {
               display: "flex",
               alignItems: "center",
-              height: "20px",
-              borderRadius: "10px",
-              backgroundColor: STYLES.bg,
+              justifyContent: "center",
+              width: "18px",
+              height: "18px",
+              borderRadius: "50%",
+              backgroundColor: badgeColor,
               boxShadow: STYLES.shadow,
-              border: `1px solid ${STYLES.border}`,
-              overflow: "hidden"
+              border: `1px solid ${STYLES.border}`
             },
-            children: badgeSegments.map((segment, index) => /* @__PURE__ */ jsxs(
+            children: issue.status === "scanning" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: "10px",
+                  height: "10px",
+                  border: "2px solid rgba(255, 255, 255, 0.3)",
+                  borderTopColor: "#FFFFFF",
+                  borderRadius: "50%",
+                  animation: "uilint-badge-spin 0.8s linear infinite"
+                }
+              }
+            ) : issue.status === "error" ? /* @__PURE__ */ jsx(ExclamationIconTiny, {}) : issue.status === "pending" ? /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  minWidth: "18px",
-                  height: "100%",
-                  padding: "0 4px",
-                  backgroundColor: segment.color,
-                  borderRight: index < badgeSegments.length - 1 ? `1px solid rgba(0, 0, 0, 0.2)` : void 0
+                  width: "6px",
+                  height: "6px",
+                  borderRadius: "50%",
+                  backgroundColor: "rgba(255, 255, 255, 0.4)"
+                }
+              }
+            ) : issueCount === 0 ? /* @__PURE__ */ jsx(CheckIconTiny, {}) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  color: STYLES.text,
+                  fontSize: "10px",
+                  fontWeight: 700,
+                  fontFamily: STYLES.font
                 },
-                children: [
-                  segment.type === "count" && (segment.count === 0 ? /* @__PURE__ */ jsx(CheckIconTiny, {}) : /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        color: STYLES.text,
-                        fontSize: "10px",
-                        fontWeight: 700,
-                        fontFamily: STYLES.font
-                      },
-                      children: segment.count > 9 ? "9+" : segment.count
-                    }
-                  )),
-                  segment.type === "error" && /* @__PURE__ */ jsx(ExclamationIconTiny, {}),
-                  segment.type === "scanning" && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        width: "8px",
-                        height: "8px",
-                        border: "1.5px solid rgba(255, 255, 255, 0.3)",
-                        borderTopColor: "#FFFFFF",
-                        borderRadius: "50%",
-                        animation: "uilint-badge-spin 0.8s linear infinite"
-                      }
-                    }
-                  ),
-                  segment.type === "pending" && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        width: "6px",
-                        height: "6px",
-                        borderRadius: "50%",
-                        backgroundColor: "rgba(255, 255, 255, 0.4)"
-                      }
-                    }
-                  )
-                ]
-              },
-              index
-            ))
+                children: issueCount > 9 ? "9+" : issueCount
+              }
+            )
           }
         )
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx(
+    isExpanded && hasNearbyBadges && /* @__PURE__ */ jsx(
       "div",
       {
         style: dropdownStyle,
         "data-ui-lint": true,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        children: cluster.badges.map((badge, index) => /* @__PURE__ */ jsx(
-          ClusterDropdownItem,
+        children: nearbyBadges.map((badge, index) => /* @__PURE__ */ jsx(
+          DropdownItem,
           {
             badge,
             isHovered: hoveredIndex === index,
@@ -563,14 +459,14 @@ function ClusteredBadge({ cluster, distance, onSelect }) {
     )
   ] });
 }
-function ClusterDropdownItem({
+function DropdownItem({
   badge,
   isHovered,
   onMouseEnter,
   onMouseLeave,
   onClick
 }) {
-  const componentName = badge.element.componentStack[0]?.name || badge.element.tagName.toLowerCase();
+  const elementLabel = formatElementLabel(badge.element);
   const issueCount = badge.issue.status === "complete" ? badge.issue.issues.length : 0;
   const color = getBadgeColor(issueCount);
   return /* @__PURE__ */ jsxs(
@@ -607,12 +503,12 @@ function ClusterDropdownItem({
               style: {
                 fontSize: "12px",
                 color: STYLES.text,
-                maxWidth: "120px",
+                maxWidth: "160px",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap"
               },
-              children: componentName
+              children: elementLabel
             }
           )
         ] }),

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

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

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

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

package/dist/{UILintToolbar-GMZ6YSI2.js → UILintToolbar-2FFHUGZF.js}

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

package/dist/{chunk-QYRESGFG.js → chunk-LULWI5RD.js}

@@ -3,7 +3,7 @@ import {
   buildEditorUrl,
   useUILintContext,
   useUILintStore
-} from "./chunk-5VJ2Q2QW.js";
+} from "./chunk-MDEVC3SQ.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback, useMemo } from "react";

package/dist/{chunk-5VJ2Q2QW.js → chunk-MDEVC3SQ.js}

@@ -796,10 +796,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-GMZ6YSI2.js"),
-      import("./InspectionPanel-4OWY4FVY.js"),
-      import("./LocatorOverlay-JJDOKNOS.js"),
-      import("./ElementBadges-HFQNIIO2.js")
+      import("./UILintToolbar-2FFHUGZF.js"),
+      import("./InspectionPanel-G6JJNNY4.js"),
+      import("./LocatorOverlay-MLZ3K4PZ.js"),
+      import("./ElementBadges-J4QLKPLG.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

package/dist/{chunk-7X5HN55P.js → chunk-PD24RVVC.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-5VJ2Q2QW.js";
+} from "./chunk-MDEVC3SQ.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/{chunk-XLIDEQXH.js → chunk-WUEPTJ24.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-5VJ2Q2QW.js";
+} from "./chunk-MDEVC3SQ.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-7X5HN55P.js";
+} from "./chunk-PD24RVVC.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-QYRESGFG.js";
+} from "./chunk-LULWI5RD.js";
 import {
   LocatorOverlay
-} from "./chunk-XLIDEQXH.js";
+} from "./chunk-WUEPTJ24.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-5VJ2Q2QW.js";
+} from "./chunk-MDEVC3SQ.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

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