uilint-react 0.2.9 → 0.2.10

package/dist/ElementBadges-H5_y7fLt.js

@@ -1,672 +0,0 @@
-import { u as Q, a as z, j as s, g as ee } from "./index-Cu1-cGo1.js";
-import te, { useState as k, useEffect as B, useCallback as S, useMemo as I } from "react";
-import { createPortal as ne } from "react-dom";
-const ie = {
-  repulsionForce: 50,
-  anchorStrength: 0.3,
-  minDistance: 24,
-  iterations: 50,
-  damping: 0.9
-};
-function oe(e, t) {
-  if (e.length === 0) return [];
-  if (e.length === 1)
-    return [
-      { ...e[0], nudgedX: e[0].x, nudgedY: e[0].y }
-    ];
-  const n = e.map((o) => ({
-    position: o,
-    nudgedX: o.x,
-    nudgedY: o.y,
-    velocityX: 0,
-    velocityY: 0
-  }));
-  for (let o = 0; o < t.iterations; o++)
-    for (let i = 0; i < n.length; i++) {
-      let d = 0, p = 0;
-      for (let m = 0; m < n.length; m++) {
-        if (i === m) continue;
-        const b = n[i].nudgedX - n[m].nudgedX, u = n[i].nudgedY - n[m].nudgedY, v = Math.max(Math.hypot(b, u), 1);
-        if (v < t.minDistance) {
-          const j = t.repulsionForce / (v * v);
-          d += b / v * j, p += u / v * j;
-        }
-      }
-      const c = e[i].x - n[i].nudgedX, w = e[i].y - n[i].nudgedY;
-      d += c * t.anchorStrength, p += w * t.anchorStrength, n[i].velocityX = (n[i].velocityX + d) * t.damping, n[i].velocityY = (n[i].velocityY + p) * t.damping, n[i].nudgedX += n[i].velocityX, n[i].nudgedY += n[i].velocityY;
-    }
-  return n.map((o) => ({
-    ...o.position,
-    nudgedX: o.nudgedX,
-    nudgedY: o.nudgedY
-  }));
-}
-class W {
-  config;
-  positions;
-  constructor(t) {
-    this.positions = t, this.config = { ...ie };
-  }
-  /**
-   * Create a new layout builder with badge positions
-   */
-  static create(t) {
-    return new W(t);
-  }
-  /**
-   * Set the repulsion force (how strongly badges push apart)
-   * Higher values = badges spread more aggressively
-   */
-  repulsion(t) {
-    return this.config.repulsionForce = t, this;
-  }
-  /**
-   * Set the anchor strength (how strongly badges stay near origin)
-   * Higher values = badges stay closer to their original positions
-   */
-  anchorStrength(t) {
-    return this.config.anchorStrength = t, this;
-  }
-  /**
-   * Set the minimum distance between badge centers
-   * Badges closer than this will be pushed apart
-   */
-  minDistance(t) {
-    return this.config.minDistance = t, this;
-  }
-  /**
-   * Set the number of simulation iterations
-   * More iterations = more stable but slower
-   */
-  iterations(t) {
-    return this.config.iterations = t, this;
-  }
-  /**
-   * Set the damping factor (velocity decay per step)
-   * Lower values = system settles faster but may be less stable
-   */
-  damping(t) {
-    return this.config.damping = t, this;
-  }
-  /**
-   * Run the simulation and return nudged positions
-   */
-  compute() {
-    return oe(this.positions, this.config);
-  }
-}
-function se(e, t, n, o) {
-  return e.filter((i) => Math.hypot(i.nudgedX - t, i.nudgedY - n) <= o);
-}
-function D(e, t, n, o) {
-  const i = Math.max(0, n - e), d = Math.max(0, o - t);
-  return { left: e, top: t, right: n, bottom: o, width: i, height: d };
-}
-function N(e, t) {
-  const n = Math.max(e.left, t.left), o = Math.max(e.top, t.top), i = Math.min(e.right, t.right), d = Math.min(e.bottom, t.bottom);
-  return i <= n || d <= o ? null : D(n, o, i, d);
-}
-function re(e) {
-  return [e.overflow, e.overflowX, e.overflowY].some((n) => n && n !== "visible");
-}
-function de(e) {
-  const t = e, n = t.getBoundingClientRect();
-  let o = D(
-    n.left,
-    n.top,
-    n.right,
-    n.bottom
-  );
-  const i = D(0, 0, window.innerWidth, window.innerHeight);
-  if (o = N(o, i), !o) return null;
-  let d = t.parentElement;
-  for (; d; ) {
-    const p = window.getComputedStyle(d);
-    if (re(p)) {
-      const c = d.getBoundingClientRect(), w = D(c.left, c.top, c.right, c.bottom);
-      if (o = N(o, w), !o) return null;
-    }
-    d = d.parentElement;
-  }
-  return o;
-}
-function le(e, t, n) {
-  const o = document.elementsFromPoint(t, n);
-  for (const i of o) {
-    if (i.hasAttribute("data-ui-lint")) continue;
-    if (i === e || e.contains(i) || i.contains(e))
-      return !1;
-    const d = window.getComputedStyle(i), p = d.position, c = parseInt(d.zIndex, 10);
-    if ((p === "fixed" || p === "absolute") && (c > 0 || d.zIndex === "auto" || d.zIndex === "inherit"))
-      return !0;
-  }
-  return !1;
-}
-const a = {
-  bg: "var(--uilint-backdrop)",
-  success: "var(--uilint-success)",
-  warning: "var(--uilint-warning)",
-  error: "var(--uilint-error)",
-  text: "var(--uilint-text-primary)",
-  border: "var(--uilint-border)",
-  highlight: "var(--uilint-accent)",
-  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  shadow: "var(--uilint-shadow)"
-}, A = 0, H = 150, O = 0.5, P = 1;
-function ae(e) {
-  if (e <= A) return P;
-  if (e >= H) return O;
-  const t = (e - A) / (H - A);
-  return P - t * (P - O);
-}
-function U(e) {
-  return e === 0 ? a.success : a.warning;
-}
-function ce(e) {
-  const t = e.tagName.toLowerCase(), n = e.source;
-  if (n) {
-    const o = n.fileName.split("/").pop() || "Unknown";
-    return `${t} > ${o}`;
-  }
-  return t;
-}
-const ue = 30, Y = 20, _ = 18;
-function he(e, t) {
-  const n = Y, o = window.innerWidth - _ - Y, i = Y, d = window.innerHeight - _ - Y;
-  return {
-    x: Math.max(n, Math.min(o, e)),
-    y: Math.max(i, Math.min(d, t))
-  };
-}
-function pe(e, t) {
-  return e.status === "complete" && e.issues.length === 0 ? !1 : e.status === "error" || e.status === "complete" && e.issues.length > 0 ? !0 : e.status === "scanning" || e.status === "pending" ? t : !1;
-}
-function ge() {
-  return /* @__PURE__ */ s.jsx("style", { children: `
-      @keyframes uilint-badge-spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-      }
-    ` });
-}
-function Ce() {
-  const { autoScanState: e, elementIssuesCache: t, setInspectedElement: n } = Q(), [o, i] = k(!1), [d, p] = k({ x: 0, y: 0 }), [c, w] = k([]), [m, b] = k(!1), u = z((r) => r.hoveredFilePath), v = z(
-    (r) => r.selectedFilePath
-  );
-  B(() => {
-    i(!0);
-  }, []), B(() => {
-    const r = (f) => {
-      f.altKey && b(!0);
-    }, l = (f) => {
-      f.altKey || b(!1);
-    }, h = () => {
-      b(!1);
-    };
-    return window.addEventListener("keydown", r), window.addEventListener("keyup", l), window.addEventListener("blur", h), () => {
-      window.removeEventListener("keydown", r), window.removeEventListener("keyup", l), window.removeEventListener("blur", h);
-    };
-  }, []), B(() => {
-    const r = (l) => {
-      p({ x: l.clientX, y: l.clientY });
-    };
-    return window.addEventListener("mousemove", r), () => window.removeEventListener("mousemove", r);
-  }, []), B(() => {
-    if (e.status === "idle") {
-      w([]);
-      return;
-    }
-    const r = () => {
-      const L = [];
-      for (const g of e.elements) {
-        const E = t.get(g.id);
-        if (!E || !g.element || !document.contains(g.element)) continue;
-        const T = g.element.getBoundingClientRect(), y = de(g.element);
-        if (!y) continue;
-        const K = T.right - 8, $ = T.top - 8, G = Math.min(K, y.right - 8), V = Math.max(y.top + 2, $), q = y.left + Math.min(8, y.width / 2), Z = y.top + Math.min(8, y.height / 2);
-        if (le(g.element, q, Z))
-          continue;
-        const J = DOMRect.fromRect({
-          x: y.left,
-          y: y.top,
-          width: y.width,
-          height: y.height
-        });
-        L.push({ element: g, issue: E, x: G, y: V, rect: J });
-      }
-      w(L);
-    };
-    let l = null;
-    const h = () => {
-      l === null && (l = requestAnimationFrame(() => {
-        l = null, r();
-      }));
-    };
-    h();
-    const f = () => h(), C = () => h(), F = () => {
-      document.visibilityState === "visible" && h();
-    };
-    return window.addEventListener("scroll", f, !0), window.addEventListener("resize", C), document.addEventListener("visibilitychange", F), () => {
-      l !== null && cancelAnimationFrame(l), window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", C), document.removeEventListener("visibilitychange", F);
-    };
-  }, [e.status, e.elements, t]);
-  const j = S(
-    (r, l) => {
-      const h = {
-        element: r.element,
-        source: r.source,
-        rect: r.element.getBoundingClientRect(),
-        scannedElementId: r.id
-      };
-      n(h);
-    },
-    [n]
-  ), M = I(
-    () => W.create(c).minDistance(24).repulsion(50).anchorStrength(0.3).iterations(50).compute(),
-    [c]
-  ), R = I(() => {
-    let r = M.filter(
-      (h) => pe(h.issue, m)
-    );
-    const l = v || u;
-    return l && (r = r.filter(
-      (h) => h.element.source.fileName === l
-    )), r;
-  }, [M, m, v, u]), x = S(
-    (r) => {
-      r.stopPropagation();
-    },
-    []
-  );
-  if (!o || e.status === "idle") return null;
-  const X = /* @__PURE__ */ s.jsxs(
-    "div",
-    {
-      "data-ui-lint": !0,
-      onMouseDown: x,
-      onPointerDown: x,
-      onClick: x,
-      onKeyDown: x,
-      style: { pointerEvents: "none" },
-      children: [
-        /* @__PURE__ */ s.jsx(ge, {}),
-        R.filter((r, l, h) => {
-          const f = r.element.id;
-          return h.findIndex((C) => C.element.id === f) === l;
-        }).map((r) => {
-          const l = Math.hypot(
-            r.nudgedX - d.x,
-            r.nudgedY - d.y
-          ), h = se(
-            R,
-            r.nudgedX,
-            r.nudgedY,
-            ue
-          );
-          return /* @__PURE__ */ s.jsx(
-            fe,
-            {
-              position: r,
-              distance: l,
-              nearbyBadges: h,
-              cursorPos: d,
-              onSelect: j
-            },
-            r.element.id
-          );
-        })
-      ]
-    }
-  );
-  return ne(X, ee());
-}
-function fe({
-  position: e,
-  distance: t,
-  nearbyBadges: n,
-  cursorPos: o,
-  onSelect: i
-}) {
-  const [d, p] = k(!1), [c, w] = k(null), m = te.useRef(null), { element: b, issue: u, rect: v, nudgedX: j, nudgedY: M } = e, R = n.length > 1, x = I(
-    () => he(j, M),
-    [j, M]
-  ), X = I(() => u.status === "error" ? a.error : u.status === "scanning" ? a.highlight : u.status === "pending" ? "rgba(156, 163, 175, 0.7)" : u.status === "complete" ? U(u.issues.length) : a.success, [u]), r = S(() => {
-    m.current && (clearTimeout(m.current), m.current = null), p(!0);
-  }, []), l = S(() => {
-    m.current = setTimeout(() => {
-      p(!1), w(null);
-    }, 150);
-  }, []), h = S(
-    (g) => {
-      g.preventDefault(), g.stopPropagation(), i(b, u);
-    },
-    [b, u, i]
-  ), f = I(() => c === null ? null : n[c] ?? null, [c, n]), C = I(() => {
-    const g = x.x < window.innerWidth - 220, E = x.y < window.innerHeight - 200;
-    return {
-      position: "fixed",
-      top: E ? x.y + 12 : void 0,
-      bottom: E ? void 0 : window.innerHeight - x.y + 12,
-      left: g ? x.x - 8 : void 0,
-      right: g ? void 0 : window.innerWidth - x.x - 8,
-      zIndex: 1e5,
-      backgroundColor: a.bg,
-      borderRadius: "8px",
-      border: `1px solid ${a.border}`,
-      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.4)",
-      padding: "4px 0",
-      minWidth: "200px",
-      fontFamily: a.font,
-      pointerEvents: "auto"
-      // Re-enable pointer events for interactive dropdown
-    };
-  }, [x]), F = d ? 1.1 : ae(t), L = u.status === "complete" ? u.issues.length : 0;
-  return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-    d && !f && /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          top: v.top - 2,
-          left: v.left - 2,
-          width: v.width + 4,
-          height: v.height + 4,
-          border: `2px solid ${a.highlight}`,
-          borderRadius: "4px",
-          pointerEvents: "none",
-          zIndex: 99994,
-          boxShadow: "0 0 0 1px rgba(59, 130, 246, 0.3)"
-        },
-        "data-ui-lint": !0
-      }
-    ),
-    f && /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          top: f.rect.top - 2,
-          left: f.rect.left - 2,
-          width: f.rect.width + 4,
-          height: f.rect.height + 4,
-          border: `2px solid ${a.highlight}`,
-          borderRadius: "4px",
-          pointerEvents: "none",
-          zIndex: 99994,
-          boxShadow: "0 0 0 1px rgba(59, 130, 246, 0.3)"
-        },
-        "data-ui-lint": !0
-      }
-    ),
-    /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          top: x.y - 0,
-          left: x.x - 0,
-          zIndex: d ? 99999 : 99995,
-          cursor: "pointer",
-          transition: "transform 0.1s ease-out",
-          transform: `scale(${F})`,
-          transformOrigin: "center center",
-          pointerEvents: "auto"
-          // Re-enable pointer events for interactive badge
-        },
-        "data-ui-lint": !0,
-        onMouseEnter: r,
-        onMouseLeave: l,
-        onClick: h,
-        children: /* @__PURE__ */ s.jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "18px",
-              height: "18px",
-              borderRadius: "50%",
-              backgroundColor: X,
-              boxShadow: a.shadow,
-              border: `1px solid ${a.border}`
-            },
-            children: u.status === "scanning" ? /* @__PURE__ */ s.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"
-                }
-              }
-            ) : u.status === "error" ? /* @__PURE__ */ s.jsx(we, {}) : u.status === "pending" ? /* @__PURE__ */ s.jsx(
-              "div",
-              {
-                style: {
-                  width: "6px",
-                  height: "6px",
-                  borderRadius: "50%",
-                  backgroundColor: "rgba(255, 255, 255, 0.4)"
-                }
-              }
-            ) : L === 0 ? /* @__PURE__ */ s.jsx(ve, {}) : /* @__PURE__ */ s.jsx(
-              "span",
-              {
-                style: {
-                  color: a.text,
-                  fontSize: "10px",
-                  fontWeight: 700,
-                  fontFamily: a.font
-                },
-                children: L > 9 ? "9+" : L
-              }
-            )
-          }
-        )
-      }
-    ),
-    d && R && /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        style: C,
-        "data-ui-lint": !0,
-        onMouseEnter: r,
-        onMouseLeave: l,
-        children: n.map((g, E) => /* @__PURE__ */ s.jsx(
-          xe,
-          {
-            badge: g,
-            isHovered: c === E,
-            onMouseEnter: () => w(E),
-            onMouseLeave: () => w(null),
-            onClick: () => i(g.element, g.issue)
-          },
-          g.element.id
-        ))
-      }
-    )
-  ] });
-}
-function xe({
-  badge: e,
-  isHovered: t,
-  onMouseEnter: n,
-  onMouseLeave: o,
-  onClick: i
-}) {
-  const d = ce(e.element), p = e.issue.status === "complete" ? e.issue.issues.length : 0, c = U(p);
-  return /* @__PURE__ */ s.jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "8px 12px",
-        cursor: "pointer",
-        backgroundColor: t ? "rgba(59, 130, 246, 0.15)" : "transparent",
-        transition: "background-color 0.1s"
-      },
-      onMouseEnter: n,
-      onMouseLeave: o,
-      onClick: i,
-      children: [
-        /* @__PURE__ */ s.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ s.jsx(
-            "div",
-            {
-              style: {
-                width: "6px",
-                height: "6px",
-                borderRadius: "50%",
-                backgroundColor: c
-              }
-            }
-          ),
-          /* @__PURE__ */ s.jsx(
-            "span",
-            {
-              style: {
-                fontSize: "12px",
-                color: a.text,
-                maxWidth: "160px",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: d
-            }
-          )
-        ] }),
-        e.issue.status === "complete" && (p === 0 ? /* @__PURE__ */ s.jsx(
-          "div",
-          {
-            style: {
-              width: "14px",
-              height: "14px",
-              borderRadius: "50%",
-              backgroundColor: c,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: /* @__PURE__ */ s.jsx(me, {})
-          }
-        ) : /* @__PURE__ */ s.jsx(
-          "div",
-          {
-            style: {
-              minWidth: "16px",
-              height: "16px",
-              padding: "0 4px",
-              borderRadius: "8px",
-              backgroundColor: c,
-              color: a.text,
-              fontSize: "10px",
-              fontWeight: 700,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: p > 9 ? "9+" : p
-          }
-        )),
-        e.issue.status === "scanning" && /* @__PURE__ */ s.jsx(
-          "div",
-          {
-            style: {
-              width: "12px",
-              height: "12px",
-              border: "2px solid rgba(59, 130, 246, 0.3)",
-              borderTopColor: a.highlight,
-              borderRadius: "50%",
-              animation: "uilint-badge-spin 0.8s linear infinite"
-            }
-          }
-        ),
-        e.issue.status === "error" && /* @__PURE__ */ s.jsx(
-          "div",
-          {
-            style: {
-              width: "14px",
-              height: "14px",
-              borderRadius: "50%",
-              backgroundColor: a.error,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: /* @__PURE__ */ s.jsx(ye, {})
-          }
-        ),
-        e.issue.status === "pending" && /* @__PURE__ */ s.jsx(
-          "div",
-          {
-            style: {
-              width: "8px",
-              height: "8px",
-              borderRadius: "50%",
-              backgroundColor: "rgba(156, 163, 175, 0.5)"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function me() {
-  return /* @__PURE__ */ s.jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ s.jsx(
-    "path",
-    {
-      d: "M20 6L9 17l-5-5",
-      stroke: a.text,
-      strokeWidth: "3",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-function ve() {
-  return /* @__PURE__ */ s.jsx("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ s.jsx(
-    "path",
-    {
-      d: "M20 6L9 17l-5-5",
-      stroke: a.text,
-      strokeWidth: "4",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-function we() {
-  return /* @__PURE__ */ s.jsx("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ s.jsx(
-    "path",
-    {
-      d: "M12 8v4M12 16h.01",
-      stroke: a.text,
-      strokeWidth: "4",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-function ye() {
-  return /* @__PURE__ */ s.jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ s.jsx(
-    "path",
-    {
-      d: "M12 8v4M12 16h.01",
-      stroke: a.text,
-      strokeWidth: "3",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-export {
-  Ce as ElementBadges
-};
-//# sourceMappingURL=ElementBadges-H5_y7fLt.js.map