react-dev-insight 1.0.0

package/dist/chunk-JOBOK6JI.js

@@ -0,0 +1,773 @@
+'use strict';
+
+var chunkSLJD3GYE_js = require('./chunk-SLJD3GYE.js');
+var React3 = require('react');
+var reactDom = require('react-dom');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+
+var RenderBadge = ({ count }) => {
+  return /* @__PURE__ */ React3__default.default.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: -10,
+        right: -10,
+        backgroundColor: "rgba(10, 10, 10, 0.75)",
+        backdropFilter: "blur(12px)",
+        WebkitBackdropFilter: "blur(12px)",
+        border: "1px solid rgba(255, 255, 255, 0.12)",
+        borderRadius: "10px",
+        padding: "2px 8px",
+        color: "#f1f5f9",
+        fontSize: "11px",
+        fontWeight: 600,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
+        zIndex: 1000001,
+        pointerEvents: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: "16px"
+      }
+    },
+    /* @__PURE__ */ React3__default.default.createElement("span", { style: { textShadow: "0 0 8px rgba(255,255,255,0.3)" } }, count)
+  );
+};
+var HighlightBox = ({
+  rect,
+  count,
+  changedProps,
+  name,
+  cause,
+  isFrequent,
+  showHighlight = true,
+  showBadge = true
+}) => {
+  const [visible, setVisible] = React3.useState(true);
+  React3.useEffect(() => {
+    setVisible(true);
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, 1200);
+    return () => clearTimeout(timer);
+  }, [count]);
+  if (!visible) return null;
+  if (!showHighlight && !showBadge) return null;
+  const borderColor = isFrequent ? "rgba(248, 113, 113, 0.4)" : "rgba(45, 212, 191, 0.4)";
+  const glowColor = isFrequent ? "rgba(248, 113, 113, 0.15)" : "rgba(45, 212, 191, 0.15)";
+  return /* @__PURE__ */ React3__default.default.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+        height: rect.height,
+        pointerEvents: "none",
+        zIndex: 1e6,
+        border: showHighlight ? `1px solid ${borderColor}` : "none",
+        borderRadius: "4px",
+        boxShadow: showHighlight ? `0 0 12px ${glowColor}, inset 0 0 8px ${glowColor}` : "none",
+        background: showHighlight ? "rgba(255, 255, 255, 0.02)" : "transparent",
+        transition: "opacity 0.2s ease-out",
+        animation: showHighlight ? "react-dev-insight-pulse 0.4s cubic-bezier(0.16, 1, 0.3, 1)" : "none"
+      }
+    },
+    showBadge && /* @__PURE__ */ React3__default.default.createElement(RenderBadge, { count }),
+    showHighlight && /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "100%",
+          marginTop: "6px",
+          left: 0,
+          background: "rgba(10, 10, 10, 0.85)",
+          backdropFilter: "blur(12px)",
+          WebkitBackdropFilter: "blur(12px)",
+          color: "#e2e8f0",
+          fontSize: "11px",
+          padding: "8px 10px",
+          borderRadius: "6px",
+          whiteSpace: "nowrap",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          border: "1px solid rgba(255,255,255,0.08)",
+          pointerEvents: "none",
+          zIndex: 1000002,
+          boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3)"
+        }
+      },
+      /* @__PURE__ */ React3__default.default.createElement(
+        "div",
+        {
+          style: {
+            fontWeight: 600,
+            color: "#f8fafc",
+            marginBottom: "3px",
+            letterSpacing: "0.02em"
+          }
+        },
+        name
+      ),
+      /* @__PURE__ */ React3__default.default.createElement("div", { style: { display: "flex", gap: "6px", alignItems: "center" } }, /* @__PURE__ */ React3__default.default.createElement("span", { style: { color: "#64748b" } }, "Cause:"), /* @__PURE__ */ React3__default.default.createElement("span", { style: { color: "#e2e8f0" } }, cause)),
+      changedProps.length > 0 && /* @__PURE__ */ React3__default.default.createElement("div", { style: { marginTop: "3px", display: "flex", gap: "6px" } }, /* @__PURE__ */ React3__default.default.createElement("span", { style: { color: "#64748b" } }, "Props:"), /* @__PURE__ */ React3__default.default.createElement("span", { style: { color: "#cbd5e1" } }, changedProps.join(", "))),
+      isFrequent && /* @__PURE__ */ React3__default.default.createElement(
+        "div",
+        {
+          style: {
+            marginTop: "6px",
+            color: "#f87171",
+            fontWeight: 500,
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
+            fontSize: "10px",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }
+        },
+        /* @__PURE__ */ React3__default.default.createElement(
+          "div",
+          {
+            style: {
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              background: "#f87171",
+              boxShadow: "0 0 4px #f87171"
+            }
+          }
+        ),
+        "Frequent"
+      )
+    )
+  );
+};
+function useDraggable(initialPos = { x: 20, y: 20 }) {
+  const [position, setPosition] = React3.useState(initialPos);
+  const [isDragging, setIsDragging] = React3.useState(false);
+  const dragRef = React3.useRef(null);
+  const offsetRef = React3.useRef({ x: 0, y: 0 });
+  React3.useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDragging) return;
+      setPosition({
+        x: e.clientX - offsetRef.current.x,
+        y: e.clientY - offsetRef.current.y
+      });
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+  const onMouseDown = (e) => {
+    if (dragRef.current) {
+      const rect = dragRef.current.getBoundingClientRect();
+      offsetRef.current = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+      setIsDragging(true);
+      e.preventDefault();
+    }
+  };
+  return { position, isDragging, dragRef, onMouseDown };
+}
+
+// src/overlay/Dashboard.tsx
+var Dashboard = ({
+  isVisible,
+  onClose,
+  totalRenders,
+  highlightBoxesEnabled,
+  setHighlightBoxesEnabled,
+  badgesEnabled,
+  setBadgesEnabled,
+  tracesEnabled,
+  setTracesEnabled,
+  componentStats
+}) => {
+  const { position, dragRef, onMouseDown } = useDraggable({
+    x: typeof window !== "undefined" ? window.innerWidth - 300 : 20,
+    y: typeof window !== "undefined" ? window.innerHeight - 380 : 20
+  });
+  if (!isVisible) return null;
+  return /* @__PURE__ */ React3__default.default.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        left: position.x,
+        top: position.y,
+        width: "260px",
+        maxHeight: "380px",
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: "12px",
+        background: "rgba(10, 10, 10, 0.75)",
+        backdropFilter: "blur(24px)",
+        WebkitBackdropFilter: "blur(24px)",
+        border: "1px solid rgba(255, 255, 255, 0.08)",
+        boxShadow: "0 10px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
+        zIndex: 1000004,
+        color: "#e2e8f0",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        overflow: "hidden",
+        animation: "react-dev-insight-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
+      }
+    },
+    /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        ref: dragRef,
+        onMouseDown,
+        style: {
+          padding: "12px 16px",
+          borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          cursor: "grab",
+          background: "rgba(255,255,255,0.02)"
+        }
+      },
+      /* @__PURE__ */ React3__default.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React3__default.default.createElement(
+        "div",
+        {
+          style: {
+            width: "6px",
+            height: "6px",
+            borderRadius: "50%",
+            background: "#f8fafc",
+            boxShadow: "0 0 8px rgba(255,255,255,0.8)"
+          }
+        }
+      ), /* @__PURE__ */ React3__default.default.createElement(
+        "span",
+        {
+          style: {
+            fontWeight: 500,
+            fontSize: "12px",
+            letterSpacing: "0.04em",
+            color: "#f8fafc"
+          }
+        },
+        "Dev Overlay"
+      )),
+      /* @__PURE__ */ React3__default.default.createElement(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            background: "none",
+            border: "none",
+            color: "#64748b",
+            cursor: "pointer",
+            padding: "2px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "4px",
+            transition: "color 0.2s"
+          },
+          onMouseOver: (e) => e.currentTarget.style.color = "#e2e8f0",
+          onMouseOut: (e) => e.currentTarget.style.color = "#64748b"
+        },
+        /* @__PURE__ */ React3__default.default.createElement(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          /* @__PURE__ */ React3__default.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ React3__default.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        )
+      )
+    ),
+    /* @__PURE__ */ React3__default.default.createElement("div", { style: { padding: "16px", overflowY: "auto" } }, /* @__PURE__ */ React3__default.default.createElement("div", { style: { marginBottom: "24px" } }, /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: {
+          fontSize: "10px",
+          color: "#64748b",
+          textTransform: "uppercase",
+          marginBottom: "8px",
+          letterSpacing: "0.06em"
+        }
+      },
+      "Performance"
+    ), /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React3__default.default.createElement("span", { style: { fontSize: "13px", color: "#cbd5e1" } }, "Total Renders"),
+      /* @__PURE__ */ React3__default.default.createElement(
+        "span",
+        {
+          style: { fontSize: "15px", fontWeight: 600, color: "#f8fafc" }
+        },
+        totalRenders
+      )
+    )), /* @__PURE__ */ React3__default.default.createElement("div", { style: { marginBottom: "24px" } }, /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: {
+          fontSize: "10px",
+          color: "#64748b",
+          textTransform: "uppercase",
+          marginBottom: "8px",
+          letterSpacing: "0.06em"
+        }
+      },
+      "Settings"
+    ), /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: { display: "flex", flexDirection: "column", gap: "10px" }
+      },
+      /* @__PURE__ */ React3__default.default.createElement(
+        "label",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            fontSize: "12px",
+            cursor: "pointer",
+            color: "#cbd5e1"
+          }
+        },
+        /* @__PURE__ */ React3__default.default.createElement("span", null, "Highlight Boxes"),
+        /* @__PURE__ */ React3__default.default.createElement(
+          "input",
+          {
+            type: "checkbox",
+            checked: highlightBoxesEnabled,
+            onChange: (e) => setHighlightBoxesEnabled(e.target.checked),
+            style: {
+              accentColor: "#475569",
+              width: "14px",
+              height: "14px",
+              cursor: "pointer"
+            }
+          }
+        )
+      ),
+      /* @__PURE__ */ React3__default.default.createElement(
+        "label",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            fontSize: "12px",
+            cursor: "pointer",
+            color: "#cbd5e1"
+          }
+        },
+        /* @__PURE__ */ React3__default.default.createElement("span", null, "Render Badges"),
+        /* @__PURE__ */ React3__default.default.createElement(
+          "input",
+          {
+            type: "checkbox",
+            checked: badgesEnabled,
+            onChange: (e) => setBadgesEnabled(e.target.checked),
+            style: {
+              accentColor: "#475569",
+              width: "14px",
+              height: "14px",
+              cursor: "pointer"
+            }
+          }
+        )
+      ),
+      /* @__PURE__ */ React3__default.default.createElement(
+        "label",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            fontSize: "12px",
+            cursor: "pointer",
+            color: "#cbd5e1"
+          }
+        },
+        /* @__PURE__ */ React3__default.default.createElement(
+          "div",
+          {
+            style: { display: "flex", alignItems: "center", gap: "6px" }
+          },
+          /* @__PURE__ */ React3__default.default.createElement("span", null, "Render Traces"),
+          /* @__PURE__ */ React3__default.default.createElement(
+            "span",
+            {
+              style: {
+                fontSize: "9px",
+                padding: "2px 4px",
+                background: "rgba(45, 212, 191, 0.2)",
+                color: "#2dd4bf",
+                borderRadius: "4px"
+              }
+            },
+            "NEW"
+          )
+        ),
+        /* @__PURE__ */ React3__default.default.createElement(
+          "input",
+          {
+            type: "checkbox",
+            checked: tracesEnabled,
+            onChange: (e) => setTracesEnabled(e.target.checked),
+            style: {
+              accentColor: "#475569",
+              width: "14px",
+              height: "14px",
+              cursor: "pointer"
+            }
+          }
+        )
+      )
+    )), /* @__PURE__ */ React3__default.default.createElement("div", null, /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: {
+          fontSize: "10px",
+          color: "#64748b",
+          textTransform: "uppercase",
+          marginBottom: "8px",
+          letterSpacing: "0.06em"
+        }
+      },
+      "Most Re-rendered"
+    ), componentStats.length === 0 ? /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: {
+          fontSize: "12px",
+          color: "#475569",
+          fontStyle: "italic"
+        }
+      },
+      "No tracking data."
+    ) : /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: { display: "flex", flexDirection: "column", gap: "6px" }
+      },
+      componentStats.map((stat, idx) => /* @__PURE__ */ React3__default.default.createElement(
+        "div",
+        {
+          key: idx,
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            fontSize: "12px",
+            alignItems: "center"
+          }
+        },
+        /* @__PURE__ */ React3__default.default.createElement(
+          "span",
+          {
+            style: {
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+              color: "#94a3b8"
+            }
+          },
+          stat.name
+        ),
+        /* @__PURE__ */ React3__default.default.createElement(
+          "span",
+          {
+            style: {
+              color: "#e2e8f0",
+              fontWeight: 500,
+              background: "rgba(255,255,255,0.05)",
+              padding: "2px 6px",
+              borderRadius: "4px"
+            }
+          },
+          stat.count
+        )
+      ))
+    )))
+  );
+};
+var FloatingToggle = ({
+  onClick,
+  isOpen
+}) => {
+  const { position, dragRef, onMouseDown, isDragging } = useDraggable({
+    x: typeof window !== "undefined" ? window.innerWidth - 80 : 20,
+    y: typeof window !== "undefined" ? window.innerHeight - 80 : 20
+  });
+  return /* @__PURE__ */ React3__default.default.createElement(
+    "div",
+    {
+      ref: dragRef,
+      onMouseDown,
+      onClick: () => {
+        if (!isDragging) onClick();
+      },
+      style: {
+        position: "fixed",
+        left: position.x,
+        top: position.y,
+        width: "44px",
+        height: "44px",
+        borderRadius: "50%",
+        background: "rgba(10, 10, 10, 0.65)",
+        backdropFilter: "blur(16px)",
+        WebkitBackdropFilter: "blur(16px)",
+        border: "1px solid rgba(255, 255, 255, 0.08)",
+        boxShadow: isOpen ? "0 0 16px rgba(255, 255, 255, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.05)" : "0 4px 12px rgba(0, 0, 0, 0.4)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: isDragging ? "grabbing" : "grab",
+        zIndex: 1000005,
+        transition: isDragging ? "none" : "box-shadow 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+        transform: isDragging ? "scale(1.05)" : "scale(1)",
+        color: "#e2e8f0"
+      }
+    },
+    /* @__PURE__ */ React3__default.default.createElement(
+      "svg",
+      {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: {
+          transition: "transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+          transform: isOpen ? "rotate(90deg)" : "rotate(0deg)"
+        }
+      },
+      /* @__PURE__ */ React3__default.default.createElement("path", { d: "M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9" }),
+      /* @__PURE__ */ React3__default.default.createElement("path", { d: "M12 8v8" }),
+      /* @__PURE__ */ React3__default.default.createElement("path", { d: "M8 12h8" })
+    )
+  );
+};
+
+// src/overlay/OverlayRoot.tsx
+var OverlayRoot = () => {
+  const [renders, setRenders] = React3.useState(/* @__PURE__ */ new Map());
+  const [totalRenders, setTotalRenders] = React3.useState(0);
+  const [componentStats, setComponentStats] = React3.useState(
+    {}
+  );
+  const [isDashboardVisible, setIsDashboardVisible] = React3.useState(false);
+  const [highlightBoxesEnabled, setHighlightBoxesEnabled] = React3.useState(true);
+  const [badgesEnabled, setBadgesEnabled] = React3.useState(true);
+  const [tracesEnabled, setTracesEnabled] = React3.useState(true);
+  React3.useEffect(() => {
+    if (typeof document !== "undefined") {
+      let style = document.getElementById("react-dev-insight-styles");
+      if (!style) {
+        style = document.createElement("style");
+        style.id = "react-dev-insight-styles";
+        style.innerHTML = `
+          @keyframes react-dev-insight-pulse {
+            0% { transform: scale(0.98); opacity: 0; }
+            30% { transform: scale(1.01); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
+          }
+          @keyframes react-dev-insight-slide-up {
+            from { transform: translateY(10px) scale(0.98); opacity: 0; }
+            to { transform: translateY(0) scale(1); opacity: 1; }
+          }
+        `;
+        document.head.appendChild(style);
+      }
+    }
+    const listener = (ref, data) => {
+      setTotalRenders((prev) => prev + 1);
+      setComponentStats((prev) => ({
+        ...prev,
+        [data.name]: Math.max(data.count, prev[data.name] || 0)
+      }));
+      if (!data.elementRef) return;
+      const rect = data.elementRef.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) return;
+      setRenders((prev) => {
+        const next = new Map(prev);
+        next.set(ref, {
+          rect,
+          count: data.count,
+          changedProps: Object.keys(data.changedProps),
+          name: data.name,
+          timestamp: data.timestamp,
+          cause: data.cause,
+          isFrequent: data.isFrequent,
+          sourceRef: data.sourceRef
+        });
+        return next;
+      });
+    };
+    const unsubscribe = chunkSLJD3GYE_js.subscribeToReRenders(listener);
+    return () => unsubscribe();
+  }, []);
+  React3.useEffect(() => {
+    const interval = setInterval(() => {
+      const now = performance.now();
+      setRenders((prev) => {
+        let changed = false;
+        const next = new Map(prev);
+        for (const [key, value] of next.entries()) {
+          if (now - value.timestamp > 1200) {
+            next.delete(key);
+            changed = true;
+          }
+        }
+        return changed ? next : prev;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  const statsList = React3.useMemo(() => {
+    return Object.entries(componentStats).map(([name, count]) => ({ name, count })).sort((a, b) => b.count - a.count).slice(0, 10);
+  }, [componentStats]);
+  if (typeof document === "undefined") return null;
+  const boxes = Array.from(renders.values()).map((r, i) => /* @__PURE__ */ React3__default.default.createElement(
+    HighlightBox,
+    {
+      key: `${r.name}-${i}`,
+      rect: r.rect,
+      count: r.count,
+      changedProps: r.changedProps,
+      name: r.name,
+      cause: r.cause,
+      isFrequent: r.isFrequent,
+      showHighlight: highlightBoxesEnabled,
+      showBadge: badgesEnabled
+    }
+  ));
+  const svgTraces = [];
+  if (tracesEnabled) {
+    const rendersArr = Array.from(renders.entries());
+    rendersArr.forEach(([key, r], i) => {
+      if (r.sourceRef && renders.has(r.sourceRef)) {
+        const sourceRect = renders.get(r.sourceRef).rect;
+        const targetRect = r.rect;
+        const startX = sourceRect.left + sourceRect.width / 2;
+        const startY = sourceRect.top + sourceRect.height / 2;
+        const endX = targetRect.left + targetRect.width / 2;
+        const endY = targetRect.top + targetRect.height / 2;
+        const cx1 = startX;
+        const cy1 = startY + (endY - startY) * 0.5;
+        const cx2 = endX;
+        const cy2 = startY + (endY - startY) * 0.5;
+        const age = performance.now() - r.timestamp;
+        const opacity = Math.max(0, 1 - age / 1200);
+        const pathId = `trace-path-${i}`;
+        svgTraces.push(
+          /* @__PURE__ */ React3__default.default.createElement("g", { key: pathId, style: { opacity } }, /* @__PURE__ */ React3__default.default.createElement(
+            "path",
+            {
+              d: `M ${startX} ${startY} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${endX} ${endY}`,
+              fill: "none",
+              stroke: "rgba(45, 212, 191, 0.4)",
+              strokeWidth: "2",
+              strokeDasharray: "4 4"
+            }
+          ), /* @__PURE__ */ React3__default.default.createElement("circle", { r: "3", fill: "#2dd4bf" }, /* @__PURE__ */ React3__default.default.createElement(
+            "animateMotion",
+            {
+              dur: "0.8s",
+              repeatCount: "1",
+              path: `M ${startX} ${startY} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${endX} ${endY}`,
+              fill: "freeze"
+            }
+          )))
+        );
+      }
+    });
+  }
+  return reactDom.createPortal(
+    /* @__PURE__ */ React3__default.default.createElement(React3__default.default.Fragment, null, tracesEnabled && svgTraces.length > 0 && /* @__PURE__ */ React3__default.default.createElement(
+      "svg",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          pointerEvents: "none",
+          zIndex: 999998
+        }
+      },
+      svgTraces
+    ), /* @__PURE__ */ React3__default.default.createElement(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          pointerEvents: "none",
+          zIndex: 999999
+        }
+      },
+      boxes
+    ), /* @__PURE__ */ React3__default.default.createElement("div", { style: { zIndex: 1000003, position: "fixed", top: 0, left: 0 } }, /* @__PURE__ */ React3__default.default.createElement(
+      FloatingToggle,
+      {
+        isOpen: isDashboardVisible,
+        onClick: () => setIsDashboardVisible((prev) => !prev)
+      }
+    ), /* @__PURE__ */ React3__default.default.createElement(
+      Dashboard,
+      {
+        isVisible: isDashboardVisible,
+        onClose: () => setIsDashboardVisible(false),
+        totalRenders,
+        componentStats: statsList,
+        highlightBoxesEnabled,
+        setHighlightBoxesEnabled,
+        badgesEnabled,
+        setBadgesEnabled,
+        tracesEnabled,
+        setTracesEnabled
+      }
+    ))),
+    document.body
+  );
+};
+
+exports.HighlightBox = HighlightBox;
+exports.OverlayRoot = OverlayRoot;
+exports.RenderBadge = RenderBadge;
+//# sourceMappingURL=chunk-JOBOK6JI.js.map
+//# sourceMappingURL=chunk-JOBOK6JI.js.map