uilint-react 0.1.35 → 0.1.38

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

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-I4JDR36K.js";
+} from "./chunk-PU6XPNPN.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -163,10 +163,21 @@ function formatElementLabel(element) {
     const fileName = source.fileName.split("/").pop() || "Unknown";
     return `${tag} > ${fileName}`;
   }
-  const componentName = element.componentStack[0]?.name;
-  return componentName ? `${tag} > ${componentName}` : tag;
+  return 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;
@@ -259,7 +270,6 @@ function ElementBadges() {
       const inspected = {
         element: element.element,
         source: element.source,
-        componentStack: element.componentStack,
         rect: element.element.getBoundingClientRect(),
         scannedElementId: element.id
       };
@@ -318,6 +328,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 +367,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 +384,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 +429,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-7N56XBWA.js}

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

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

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

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

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

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

@@ -2,7 +2,7 @@
 import {
   buildEditorUrl,
   useUILintContext
-} from "./chunk-I4JDR36K.js";
+} from "./chunk-PU6XPNPN.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback, useMemo } from "react";
@@ -199,7 +199,7 @@ function PanelHeader({
   element,
   onClose
 }) {
-  const componentName = element.componentStack[0]?.name || element.element.tagName.toLowerCase();
+  const tagName = element.element.tagName.toLowerCase();
   const handleOpenInCursor = useCallback(() => {
     if (element.source) {
       const url = buildEditorUrl(element.source, "cursor");
@@ -219,11 +219,15 @@ function PanelHeader({
       },
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: componentName }),
-          /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px", fontWeight: 600 }, children: [
             "<",
-            element.element.tagName.toLowerCase(),
+            tagName,
             ">"
+          ] }),
+          element.source && /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: [
+            element.source.fileName.split("/").pop(),
+            ":",
+            element.source.lineNumber
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
@@ -357,38 +361,6 @@ function InfoTab({ element }) {
           children: element.source.fileName
         }
       ) }),
-      element.componentStack.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Component Stack", children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: { display: "flex", flexDirection: "column", gap: "4px" },
-          children: [
-            element.componentStack.slice(0, 10).map((comp, index) => /* @__PURE__ */ jsx(
-              ComponentStackItem,
-              {
-                component: comp,
-                index,
-                isFirst: index === 0
-              },
-              index
-            )),
-            element.componentStack.length > 10 && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  fontSize: "11px",
-                  color: STYLES.textDim,
-                  marginTop: "4px"
-                },
-                children: [
-                  "...and ",
-                  element.componentStack.length - 10,
-                  " more"
-                ]
-              }
-            )
-          ]
-        }
-      ) }),
       /* @__PURE__ */ jsxs(Section, { title: "Dimensions", children: [
         /* @__PURE__ */ jsx(
           InfoRow,
@@ -666,26 +638,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 +783,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
@@ -899,70 +839,6 @@ function InfoRow({
     }
   );
 }
-function ComponentStackItem({
-  component,
-  index,
-  isFirst
-}) {
-  const handleClick = useCallback(() => {
-    if (component.source) {
-      const url = buildEditorUrl(component.source, "cursor");
-      window.open(url, "_blank");
-    }
-  }, [component.source]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: "6px 8px",
-        marginLeft: index * 8,
-        backgroundColor: isFirst ? "rgba(59, 130, 246, 0.1)" : "transparent",
-        borderRadius: "4px",
-        cursor: component.source ? "pointer" : "default",
-        transition: "background-color 0.15s"
-      },
-      onClick: handleClick,
-      onMouseEnter: (e) => {
-        if (component.source) {
-          e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.15)";
-        }
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = isFirst ? "rgba(59, 130, 246, 0.1)" : "transparent";
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: "12px",
-              fontWeight: isFirst ? 600 : 400,
-              color: isFirst ? STYLES.accent : STYLES.textMuted
-            },
-            children: component.name
-          }
-        ),
-        component.source && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            style: {
-              fontSize: "10px",
-              color: STYLES.textDim,
-              fontFamily: STYLES.fontMono
-            },
-            children: [
-              ":",
-              component.source.lineNumber
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
 function CursorIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
     "path",