uilint-react 0.1.23 → 0.1.25

package/dist/ElementBadges-2WRRHFLI.js

@@ -0,0 +1,745 @@
+"use client";
+"use client";
+import {
+  useUILintContext
+} from "./chunk-45MPASAN.js";
+
+// src/components/ui-lint/ElementBadges.tsx
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STYLES = {
+  bg: "rgba(17, 24, 39, 0.95)",
+  success: "#10B981",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  text: "#FFFFFF",
+  border: "rgba(255, 255, 255, 0.2)",
+  highlight: "#3B82F6",
+  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  shadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+};
+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;
+  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, {})
+      }
+    );
+  }
+  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
+    }
+  );
+}
+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
+      }
+    }
+  );
+}
+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();
+  const [mounted, setMounted] = useState(false);
+  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+  const [badgePositions, setBadgePositions] = useState([]);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      setCursorPos({ x: e.clientX, y: e.clientY });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+  useEffect(() => {
+    if (autoScanState.status === "idle") {
+      setBadgePositions([]);
+      return;
+    }
+    const updatePositions = () => {
+      const positions = [];
+      for (const element of autoScanState.elements) {
+        const issue = elementIssuesCache.get(element.id);
+        if (!issue) continue;
+        if (!element.element || !document.contains(element.element)) continue;
+        const rect = element.element.getBoundingClientRect();
+        const x = rect.right - 8;
+        const y = rect.top - 8;
+        if (rect.top < -50 || rect.top > window.innerHeight + 50) continue;
+        if (rect.left < -50 || rect.left > window.innerWidth + 50) continue;
+        positions.push({ element, issue, x, y, rect });
+      }
+      setBadgePositions(positions);
+    };
+    updatePositions();
+    let rafId;
+    const loop = () => {
+      updatePositions();
+      rafId = requestAnimationFrame(loop);
+    };
+    rafId = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(rafId);
+  }, [autoScanState, elementIssuesCache]);
+  const handleSelect = useCallback(
+    (element, issue) => {
+      const inspected = {
+        element: element.element,
+        source: element.source,
+        componentStack: element.componentStack,
+        rect: element.element.getBoundingClientRect(),
+        scannedElementId: element.id
+      };
+      setInspectedElement(inspected);
+    },
+    [setInspectedElement]
+  );
+  const clusters = useMemo(
+    () => clusterBadges(badgePositions, CLUSTER_THRESHOLD),
+    [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 distance = Math.hypot(
+        cluster.centroidX - cursorPos.x,
+        cluster.centroidY - cursorPos.y
+      );
+      return /* @__PURE__ */ jsx(
+        ClusteredBadge,
+        {
+          cluster,
+          distance,
+          onSelect: handleSelect
+        },
+        cluster.id
+      );
+    }
+  }) });
+  return createPortal(content, document.body);
+}
+function ClusteredBadge({ cluster, distance, 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 handleMouseEnter = useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setIsExpanded(true);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    closeTimeoutRef.current = setTimeout(() => {
+      setIsExpanded(false);
+      setHoveredIndex(null);
+    }, 150);
+  }, []);
+  const hoveredBadge = hoveredIndex !== null ? cluster.badges[hoveredIndex] : null;
+  const dropdownStyle = useMemo(() => {
+    const preferRight = cluster.centroidX < window.innerWidth - 200;
+    const preferBelow = cluster.centroidY < 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,
+      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",
+      fontFamily: STYLES.font
+    };
+  }, [cluster.centroidX, cluster.centroidY]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hoveredBadge && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: hoveredBadge.rect.top - 2,
+          left: hoveredBadge.rect.left - 2,
+          width: hoveredBadge.rect.width + 4,
+          height: hoveredBadge.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__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: cluster.centroidY - 9,
+          left: cluster.centroidX - 9,
+          zIndex: isExpanded ? 99999 : 99995,
+          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: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              height: "20px",
+              borderRadius: "10px",
+              backgroundColor: STYLES.bg,
+              boxShadow: STYLES.shadow,
+              border: `1px solid ${STYLES.border}`,
+              overflow: "hidden"
+            },
+            children: badgeSegments.map((segment, index) => /* @__PURE__ */ jsxs(
+              "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
+                },
+                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
+            ))
+          }
+        )
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: dropdownStyle,
+        "data-ui-lint": true,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: cluster.badges.map((badge, index) => /* @__PURE__ */ jsx(
+          ClusterDropdownItem,
+          {
+            badge,
+            isHovered: hoveredIndex === index,
+            onMouseEnter: () => setHoveredIndex(index),
+            onMouseLeave: () => setHoveredIndex(null),
+            onClick: () => onSelect(badge.element, badge.issue)
+          },
+          badge.element.id
+        ))
+      }
+    )
+  ] });
+}
+function ClusterDropdownItem({
+  badge,
+  isHovered,
+  onMouseEnter,
+  onMouseLeave,
+  onClick
+}) {
+  const componentName = badge.element.componentStack[0]?.name || badge.element.tagName.toLowerCase();
+  const issueCount = badge.issue.status === "complete" ? badge.issue.issues.length : 0;
+  const color = getBadgeColor(issueCount);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "8px 12px",
+        cursor: "pointer",
+        backgroundColor: isHovered ? "rgba(59, 130, 246, 0.15)" : "transparent",
+        transition: "background-color 0.1s"
+      },
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "6px",
+                height: "6px",
+                borderRadius: "50%",
+                backgroundColor: color
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "12px",
+                color: STYLES.text,
+                maxWidth: "120px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: componentName
+            }
+          )
+        ] }),
+        badge.issue.status === "complete" && (issueCount === 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "14px",
+              height: "14px",
+              borderRadius: "50%",
+              backgroundColor: color,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(CheckIcon, {})
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              minWidth: "16px",
+              height: "16px",
+              padding: "0 4px",
+              borderRadius: "8px",
+              backgroundColor: color,
+              color: STYLES.text,
+              fontSize: "10px",
+              fontWeight: 700,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: issueCount > 9 ? "9+" : issueCount
+          }
+        )),
+        badge.issue.status === "scanning" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "12px",
+              height: "12px",
+              border: "2px solid rgba(59, 130, 246, 0.3)",
+              borderTopColor: STYLES.highlight,
+              borderRadius: "50%",
+              animation: "uilint-badge-spin 0.8s linear infinite"
+            }
+          }
+        ),
+        badge.issue.status === "error" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "14px",
+              height: "14px",
+              borderRadius: "50%",
+              backgroundColor: STYLES.error,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(ExclamationIcon, {})
+          }
+        ),
+        badge.issue.status === "pending" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "8px",
+              height: "8px",
+              borderRadius: "50%",
+              backgroundColor: "rgba(156, 163, 175, 0.5)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M20 6L9 17l-5-5",
+      stroke: STYLES.text,
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function CheckIconTiny() {
+  return /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M20 6L9 17l-5-5",
+      stroke: STYLES.text,
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ExclamationIconTiny() {
+  return /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 8v4M12 16h.01",
+      stroke: STYLES.text,
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ExclamationIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 8v4M12 16h.01",
+      stroke: STYLES.text,
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+export {
+  ElementBadges
+};