uilint-react 0.2.1 → 0.2.4

package/dist/DevTool.d.ts

@@ -0,0 +1,11 @@
+export type DevToolProps = {
+    enabled?: boolean;
+};
+/**
+ * Main devtool React root.
+ *
+ * NOTE: UILintProvider is responsible for rendering the actual UI (toolbar, panels)
+ * via portals, so this component renders no visible children itself.
+ */
+export declare function DevTool({ enabled }: DevToolProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DevTool.d.ts.map

package/dist/DevTool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevTool.d.ts","sourceRoot":"","sources":["../src/DevTool.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAc,EAAE,EAAE,YAAY,2CAMvD"}

package/dist/ElementBadges-BNRIjtRW.js

@@ -0,0 +1,672 @@
+import { u as Q, a as z, j as s, g as ee } from "./index-BGzkrD0y.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-BNRIjtRW.js.map