uilint-react 0.1.22 → 0.1.23

package/dist/ElementBadges-64UOI6QT.js

@@ -0,0 +1,221 @@
+"use client";
+"use client";
+import {
+  useUILintContext
+} from "./chunk-XPAUSE5Z.js";
+
+// src/components/ui-lint/ElementBadges.tsx
+import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { 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)",
+  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  shadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+};
+function getBadgeColor(issueCount) {
+  if (issueCount === 0) return STYLES.success;
+  if (issueCount <= 2) return STYLES.warning;
+  return STYLES.error;
+}
+function ElementBadge({ element, issue }) {
+  const [rect, setRect] = useState(null);
+  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]);
+  if (!rect) return null;
+  const badgeStyle = {
+    position: "fixed",
+    top: rect.top - 8,
+    left: rect.right - 8,
+    zIndex: 99995,
+    pointerEvents: "none"
+  };
+  if (rect.top < -50 || rect.top > window.innerHeight + 50) return null;
+  if (rect.left < -50 || rect.left > window.innerWidth + 50) return null;
+  return /* @__PURE__ */ jsxs("div", { style: badgeStyle, "data-ui-lint": true, 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, {})
+    }
+  );
+}
+function ElementBadges() {
+  const { autoScanState, elementIssuesCache } = useUILintContext();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  if (autoScanState.status === "idle") return null;
+  const content = /* @__PURE__ */ jsx("div", { "data-ui-lint": true, children: autoScanState.elements.map((element) => {
+    const issue = elementIssuesCache.get(element.id);
+    if (!issue) return null;
+    return /* @__PURE__ */ jsx(ElementBadge, { element, issue }, element.id);
+  }) });
+  return createPortal(content, document.body);
+}
+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 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
+};

package/dist/{InspectionPanel-ZBDXQ2LU.js → InspectionPanel-54HO4UI5.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-CWCKS753.js";
-import "./chunk-EBU7YY73.js";
+} from "./chunk-7BJIS7PI.js";
+import "./chunk-XPAUSE5Z.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-3H446RPO.js → LocatorOverlay-AXB5VERJ.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-3DNDKMZ4.js";
-import "./chunk-EBU7YY73.js";
+} from "./chunk-ZMGUWRAO.js";
+import "./chunk-XPAUSE5Z.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-C6HOAJA4.js → UILintToolbar-7TFNXFZJ.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-GUF36FGA.js";
-import "./chunk-EBU7YY73.js";
+} from "./chunk-7M2NF7HT.js";
+import "./chunk-XPAUSE5Z.js";
 export {
   UILintToolbar
 };

package/dist/{chunk-CWCKS753.js → chunk-7BJIS7PI.js}

@@ -2,7 +2,7 @@
 import {
   buildEditorUrl,
   useUILintContext
-} from "./chunk-EBU7YY73.js";
+} from "./chunk-XPAUSE5Z.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback } from "react";