uilint-react 0.2.1 → 0.2.3

package/dist/ElementBadges-2CTPMJ6L.js

@@ -1,825 +0,0 @@
-"use client";
-"use client";
-import {
-  useUILintContext,
-  useUILintStore
-} from "./chunk-552GIJIQ.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/visibility-utils.ts
-function rectFromLTRB(left, top, right, bottom) {
-  const width = Math.max(0, right - left);
-  const height = Math.max(0, bottom - top);
-  return { left, top, right, bottom, width, height };
-}
-function intersectRects(a, b) {
-  const left = Math.max(a.left, b.left);
-  const top = Math.max(a.top, b.top);
-  const right = Math.min(a.right, b.right);
-  const bottom = Math.min(a.bottom, b.bottom);
-  if (right <= left || bottom <= top) return null;
-  return rectFromLTRB(left, top, right, bottom);
-}
-function isOverflowClipping(style) {
-  const vals = [style.overflow, style.overflowX, style.overflowY];
-  return vals.some((v) => v && v !== "visible");
-}
-function getElementVisibleRect(element) {
-  const el = element;
-  const base = el.getBoundingClientRect();
-  let visible = rectFromLTRB(
-    base.left,
-    base.top,
-    base.right,
-    base.bottom
-  );
-  const viewport = rectFromLTRB(0, 0, window.innerWidth, window.innerHeight);
-  visible = intersectRects(visible, viewport);
-  if (!visible) return null;
-  let cur = el.parentElement;
-  while (cur) {
-    const style = window.getComputedStyle(cur);
-    if (isOverflowClipping(style)) {
-      const r = cur.getBoundingClientRect();
-      const clip = rectFromLTRB(r.left, r.top, r.right, r.bottom);
-      visible = intersectRects(visible, clip);
-      if (!visible) return null;
-    }
-    cur = cur.parentElement;
-  }
-  return visible;
-}
-function isElementCoveredByOverlay(element, badgeX, badgeY) {
-  const elementsAtPoint = document.elementsFromPoint(badgeX, badgeY);
-  for (const el of elementsAtPoint) {
-    if (el.hasAttribute("data-ui-lint")) continue;
-    if (el === element || element.contains(el) || el.contains(element)) {
-      return false;
-    }
-    const style = window.getComputedStyle(el);
-    const position = style.position;
-    const zIndex = parseInt(style.zIndex, 10);
-    const isOverlay = (position === "fixed" || position === "absolute") && (zIndex > 0 || style.zIndex === "auto" || style.zIndex === "inherit");
-    if (isOverlay) {
-      return true;
-    }
-  }
-  return false;
-}
-
-// src/components/ui-lint/ElementBadges.tsx
-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);
-}
-function getBadgeColor(issueCount) {
-  if (issueCount === 0) return STYLES.success;
-  return STYLES.warning;
-}
-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 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 === "complete" && issue.issues.length === 0) {
-    return false;
-  }
-  if (issue.status === "error") return true;
-  if (issue.status === "complete" && issue.issues.length > 0) return true;
-  if (issue.status === "scanning" || issue.status === "pending") {
-    return isAltKeyPressed;
-  }
-  return false;
-}
-function BadgeAnimationStyles() {
-  return /* @__PURE__ */ jsx("style", { children: `
-      @keyframes uilint-badge-spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-      }
-    ` });
-}
-function ElementBadges() {
-  const { autoScanState, elementIssuesCache, setInspectedElement } = useUILintContext();
-  const [mounted, setMounted] = useState(false);
-  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
-  const [badgePositions, setBadgePositions] = useState([]);
-  const [isAltKeyPressed, setIsAltKeyPressed] = useState(false);
-  const hoveredFilePath = useUILintStore((s) => s.hoveredFilePath);
-  const selectedFilePath = useUILintStore(
-    (s) => s.selectedFilePath
-  );
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.altKey) {
-        setIsAltKeyPressed(true);
-      }
-    };
-    const handleKeyUp = (e) => {
-      if (!e.altKey) {
-        setIsAltKeyPressed(false);
-      }
-    };
-    const handleBlur = () => {
-      setIsAltKeyPressed(false);
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-    window.addEventListener("blur", handleBlur);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("keyup", handleKeyUp);
-      window.removeEventListener("blur", handleBlur);
-    };
-  }, []);
-  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 visible = getElementVisibleRect(element.element);
-        if (!visible) continue;
-        const desiredX = rect.right - 8;
-        const desiredY = rect.top - 8;
-        const x = Math.min(desiredX, visible.right - 8);
-        const y = Math.max(visible.top + 2, desiredY);
-        const testX = visible.left + Math.min(8, visible.width / 2);
-        const testY = visible.top + Math.min(8, visible.height / 2);
-        if (isElementCoveredByOverlay(element.element, testX, testY)) {
-          continue;
-        }
-        const visibleRect = DOMRect.fromRect({
-          x: visible.left,
-          y: visible.top,
-          width: visible.width,
-          height: visible.height
-        });
-        positions.push({ element, issue, x, y, rect: visibleRect });
-      }
-      setBadgePositions(positions);
-    };
-    let rafId = null;
-    const scheduleUpdate = () => {
-      if (rafId !== null) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = null;
-        updatePositions();
-      });
-    };
-    scheduleUpdate();
-    const handleScroll = () => scheduleUpdate();
-    const handleResize = () => scheduleUpdate();
-    const handleVisibility = () => {
-      if (document.visibilityState === "visible") {
-        scheduleUpdate();
-      }
-    };
-    window.addEventListener("scroll", handleScroll, true);
-    window.addEventListener("resize", handleResize);
-    document.addEventListener("visibilitychange", handleVisibility);
-    return () => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-      }
-      window.removeEventListener("scroll", handleScroll, true);
-      window.removeEventListener("resize", handleResize);
-      document.removeEventListener("visibilitychange", handleVisibility);
-    };
-  }, [autoScanState.status, autoScanState.elements, elementIssuesCache]);
-  const handleSelect = useCallback(
-    (element, issue) => {
-      const inspected = {
-        element: element.element,
-        source: element.source,
-        rect: element.element.getBoundingClientRect(),
-        scannedElementId: element.id
-      };
-      setInspectedElement(inspected);
-    },
-    [setInspectedElement]
-  );
-  const nudgedPositions = useMemo(
-    () => BadgeLayoutBuilder.create(badgePositions).minDistance(24).repulsion(50).anchorStrength(0.3).iterations(50).compute(),
-    [badgePositions]
-  );
-  const visibleBadges = useMemo(() => {
-    let filtered = nudgedPositions.filter(
-      (pos) => shouldShowBadge(pos.issue, isAltKeyPressed)
-    );
-    const activeFilePath = selectedFilePath || hoveredFilePath;
-    if (activeFilePath) {
-      filtered = filtered.filter(
-        (pos) => pos.element.source.fileName === activeFilePath
-      );
-    }
-    return filtered;
-  }, [nudgedPositions, isAltKeyPressed, selectedFilePath, hoveredFilePath]);
-  const handleUILintInteraction = useCallback(
-    (e) => {
-      e.stopPropagation();
-    },
-    []
-  );
-  if (!mounted) return null;
-  if (autoScanState.status === "idle") return null;
-  const content = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-ui-lint": true,
-      onMouseDown: handleUILintInteraction,
-      onPointerDown: handleUILintInteraction,
-      onClick: handleUILintInteraction,
-      onKeyDown: handleUILintInteraction,
-      style: { pointerEvents: "none" },
-      children: [
-        /* @__PURE__ */ jsx(BadgeAnimationStyles, {}),
-        visibleBadges.filter((pos, idx, arr) => {
-          const id = pos.element.id;
-          return arr.findIndex((p) => p.element.id === id) === idx;
-        }).map((nudgedPos) => {
-          const distance = Math.hypot(
-            nudgedPos.nudgedX - cursorPos.x,
-            nudgedPos.nudgedY - cursorPos.y
-          );
-          const nearbyBadges = findNearbyBadges(
-            visibleBadges,
-            nudgedPos.nudgedX,
-            nudgedPos.nudgedY,
-            NEARBY_THRESHOLD
-          );
-          return /* @__PURE__ */ jsx(
-            NudgedBadge,
-            {
-              position: nudgedPos,
-              distance,
-              nearbyBadges,
-              cursorPos,
-              onSelect: handleSelect
-            },
-            nudgedPos.element.id
-          );
-        })
-      ]
-    }
-  );
-  return createPortal(content, document.body);
-}
-function NudgedBadge({
-  position,
-  distance,
-  nearbyBadges,
-  cursorPos,
-  onSelect
-}) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [hoveredIndex, setHoveredIndex] = useState(null);
-  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;
-    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);
-      closeTimeoutRef.current = null;
-    }
-    setIsExpanded(true);
-  }, []);
-  const handleMouseLeave = useCallback(() => {
-    closeTimeoutRef.current = setTimeout(() => {
-      setIsExpanded(false);
-      setHoveredIndex(null);
-    }, 150);
-  }, []);
-  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 = snappedPosition.x < window.innerWidth - 220;
-    const preferBelow = snappedPosition.y < window.innerHeight - 200;
-    return {
-      position: "fixed",
-      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",
-      border: `1px solid ${STYLES.border}`,
-      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.4)",
-      padding: "4px 0",
-      minWidth: "200px",
-      fontFamily: STYLES.font,
-      pointerEvents: "auto"
-      // Re-enable pointer events for interactive dropdown
-    };
-  }, [snappedPosition]);
-  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",
-      {
-        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: snappedPosition.y - 0,
-          left: snappedPosition.x - 0,
-          zIndex: isExpanded ? 99999 : 99995,
-          cursor: "pointer",
-          transition: "transform 0.1s ease-out",
-          transform: `scale(${scale})`,
-          transformOrigin: "center center",
-          pointerEvents: "auto"
-          // Re-enable pointer events for interactive badge
-        },
-        "data-ui-lint": true,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onClick: handleClick,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "18px",
-              height: "18px",
-              borderRadius: "50%",
-              backgroundColor: badgeColor,
-              boxShadow: STYLES.shadow,
-              border: `1px solid ${STYLES.border}`
-            },
-            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: {
-                  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: issueCount > 9 ? "9+" : issueCount
-              }
-            )
-          }
-        )
-      }
-    ),
-    isExpanded && hasNearbyBadges && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: dropdownStyle,
-        "data-ui-lint": true,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: nearbyBadges.map((badge, index) => /* @__PURE__ */ jsx(
-          DropdownItem,
-          {
-            badge,
-            isHovered: hoveredIndex === index,
-            onMouseEnter: () => setHoveredIndex(index),
-            onMouseLeave: () => setHoveredIndex(null),
-            onClick: () => onSelect(badge.element, badge.issue)
-          },
-          badge.element.id
-        ))
-      }
-    )
-  ] });
-}
-function DropdownItem({
-  badge,
-  isHovered,
-  onMouseEnter,
-  onMouseLeave,
-  onClick
-}) {
-  const elementLabel = formatElementLabel(badge.element);
-  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: "160px",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: elementLabel
-            }
-          )
-        ] }),
-        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
-};