react-dev-profiler 1.0.0

package/dist/index.cjs

@@ -0,0 +1,628 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DevProfiler: () => DevProfiler
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/DevProfiler.tsx
+var import_react4 = require("react");
+
+// src/DevProfiler.module.css
+var DevProfiler_default = {};
+
+// src/types.ts
+var HISTORY_SIZE = 60;
+var INITIAL_PROFILER = {
+  phase: "mount",
+  actualDuration: 0,
+  baseDuration: 0,
+  commitCount: 0
+};
+var INITIAL_STATS = {
+  domMutations: 0,
+  domNodes: 0,
+  frameTime: 0,
+  frameTimeMin: 0,
+  frameTimeMax: 0,
+  frameTimeP99: 0,
+  frameTimeHistory: [],
+  longTasks: 0,
+  rendersPerSecond: 0,
+  memory: 0,
+  dimensions: "\u2013",
+  profiler: INITIAL_PROFILER
+};
+function percentile(sorted, p) {
+  if (sorted.length === 0) return 0;
+  const idx = Math.ceil(p / 100 * sorted.length) - 1;
+  return sorted[Math.max(0, idx)];
+}
+
+// src/env.ts
+var __DEV__ = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
+
+// src/hooks.ts
+var import_react = require("react");
+function useAnchorPosition(ref, position = "bottom-left") {
+  const [pos, setPos] = (0, import_react.useState)({ top: 0, left: 0 });
+  (0, import_react.useEffect)(() => {
+    if (!ref.current) return;
+    const update = () => {
+      if (!ref.current) return;
+      const rect = ref.current.getBoundingClientRect();
+      const margin = 8;
+      switch (position) {
+        case "top-left":
+          setPos({ top: rect.top + margin, left: rect.left + margin });
+          break;
+        case "top-right":
+          setPos({ top: rect.top + margin, left: rect.right - margin });
+          break;
+        case "bottom-right":
+          setPos({ top: rect.bottom - margin, left: rect.right - margin });
+          break;
+        case "bottom-left":
+        default:
+          setPos({ top: rect.bottom - margin, left: rect.left + margin });
+          break;
+      }
+    };
+    const observer = new ResizeObserver(update);
+    observer.observe(ref.current);
+    observer.observe(document.documentElement);
+    return () => observer.disconnect();
+  }, [ref, position]);
+  return pos;
+}
+function useDraggable() {
+  const [offset, setOffset] = (0, import_react.useState)({ x: 0, y: 0 });
+  const dragging = (0, import_react.useRef)(false);
+  const start = (0, import_react.useRef)({ x: 0, y: 0 });
+  const onPointerDown = (0, import_react.useCallback)((e) => {
+    dragging.current = true;
+    start.current = { x: e.clientX - offset.x, y: e.clientY - offset.y };
+    e.target.setPointerCapture(e.pointerId);
+  }, [offset]);
+  const onPointerMove = (0, import_react.useCallback)((e) => {
+    if (!dragging.current) return;
+    setOffset({
+      x: e.clientX - start.current.x,
+      y: e.clientY - start.current.y
+    });
+  }, []);
+  const onPointerUp = (0, import_react.useCallback)(() => {
+    dragging.current = false;
+  }, []);
+  return { offset, handlers: { onPointerDown, onPointerMove, onPointerUp } };
+}
+function useDomTracker(wrapperRef, enabled) {
+  const mutations = (0, import_react.useRef)(0);
+  const nodeCount = (0, import_react.useRef)(0);
+  const dirty = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    if (!enabled || !wrapperRef.current) return;
+    const observer = new MutationObserver((records) => {
+      let realMutation = false;
+      for (const record of records) {
+        if (record.type === "attributes" && record.attributeName === "class") continue;
+        realMutation = true;
+      }
+      if (realMutation) {
+        mutations.current++;
+        dirty.current = true;
+      }
+    });
+    observer.observe(wrapperRef.current, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }, [wrapperRef, enabled]);
+  const getNodeCount = (0, import_react.useCallback)(() => {
+    if (dirty.current && wrapperRef.current) {
+      nodeCount.current = wrapperRef.current.querySelectorAll("*").length;
+      dirty.current = false;
+    }
+    return nodeCount.current;
+  }, [wrapperRef]);
+  const reset = (0, import_react.useCallback)(() => {
+    mutations.current = 0;
+    dirty.current = true;
+  }, []);
+  return { mutations, getNodeCount, reset };
+}
+function useRenderRate() {
+  const renderCount = (0, import_react.useRef)(0);
+  const rendersPerSecond = (0, import_react.useRef)(0);
+  const tick = (0, import_react.useCallback)(() => {
+    renderCount.current++;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const id = setInterval(() => {
+      rendersPerSecond.current = renderCount.current;
+      renderCount.current = 0;
+    }, 1e3);
+    return () => clearInterval(id);
+  }, []);
+  const reset = (0, import_react.useCallback)(() => {
+    renderCount.current = 0;
+    rendersPerSecond.current = 0;
+  }, []);
+  return { rendersPerSecond, tick, reset };
+}
+function useRenderFlash(wrapperRef, open) {
+  const mutationCount = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    if (!open || !wrapperRef.current) return;
+    const observer = new MutationObserver(() => {
+      mutationCount.current++;
+      if (!wrapperRef.current || mutationCount.current <= 1) return;
+      const el = wrapperRef.current;
+      el.classList.add(DevProfiler_default.flash);
+      setTimeout(() => el.classList.remove(DevProfiler_default.flash), 150);
+    });
+    observer.observe(wrapperRef.current, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [wrapperRef, open]);
+}
+function useLongTasks(enabled) {
+  const count = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    if (!enabled || typeof PerformanceObserver === "undefined") return;
+    try {
+      const observer = new PerformanceObserver((list) => {
+        count.current += list.getEntries().length;
+      });
+      observer.observe({ entryTypes: ["longtask"] });
+      return () => observer.disconnect();
+    } catch {
+    }
+  }, [enabled]);
+  const reset = (0, import_react.useCallback)(() => {
+    count.current = 0;
+  }, []);
+  return { count, reset };
+}
+
+// src/DevStatsPanel.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FrameTimeGraph({ history }) {
+  const max = Math.max(33, ...history);
+  const w = 140;
+  const h = 32;
+  const barW = Math.max(1, w / HISTORY_SIZE - 0.5);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: DevProfiler_default.graphWrap, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: w, height: h, style: { display: "block" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: w, height: h, rx: 3, fill: "#111" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "line",
+      {
+        x1: 0,
+        y1: h - 16.67 / max * h,
+        x2: w,
+        y2: h - 16.67 / max * h,
+        stroke: "#1a3a1a",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "line",
+      {
+        x1: 0,
+        y1: h - 33 / max * h,
+        x2: w,
+        y2: h - 33 / max * h,
+        stroke: "#3a1a1a",
+        strokeWidth: 1
+      }
+    ),
+    history.map((ms, i) => {
+      const x = i / HISTORY_SIZE * w;
+      const barH = Math.min(ms / max * h, h);
+      const color = ms > 33 ? "#ef4444" : ms > 16.67 ? "#f59e0b" : "#4ade80";
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x, y: h - barH, width: barW, height: barH, fill: color, opacity: 0.8, rx: 0.5 }, i);
+    })
+  ] }) });
+}
+function StatRow({ label, value, sub, color = "#4ade80" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DevProfiler_default.row, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.rowLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.rowValue, style: { color }, children: value }),
+      sub && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#444", fontSize: 9, marginLeft: 4 }, children: sub })
+    ] })
+  ] });
+}
+function getPanelStyle(pos, offset, position) {
+  const style = {
+    transform: `translate(${offset.x}px, ${offset.y}px)`
+  };
+  if (position.startsWith("bottom")) {
+    style.bottom = window.innerHeight - pos.top;
+  } else {
+    style.top = pos.top;
+  }
+  if (position.endsWith("right")) {
+    style.right = window.innerWidth - pos.left;
+  } else {
+    style.left = pos.left;
+  }
+  return style;
+}
+function DevStatsPanel({
+  targetRef,
+  domTracker,
+  renderRate,
+  longTasks,
+  profilerData,
+  onClose,
+  onReset,
+  position = "bottom-left",
+  instanceId,
+  instanceCount = 1
+}) {
+  const [stats, setStats] = (0, import_react2.useState)(INITIAL_STATS);
+  const [exported, setExported] = (0, import_react2.useState)(false);
+  const lastFrame = (0, import_react2.useRef)(performance.now());
+  const frameTimeHistory = (0, import_react2.useRef)([]);
+  const allFrameTimes = (0, import_react2.useRef)([]);
+  const pos = useAnchorPosition(targetRef, position);
+  const { offset, handlers: dragHandlers } = useDraggable();
+  (0, import_react2.useEffect)(() => {
+    let animId;
+    let frameCount = 0;
+    let frameTotalMs = 0;
+    let lastSecond = performance.now();
+    const tick = () => {
+      const now = performance.now();
+      const delta = now - lastFrame.current;
+      lastFrame.current = now;
+      frameCount++;
+      frameTotalMs += delta;
+      if (now - lastSecond >= 1e3) {
+        const avgFrameTime = frameTotalMs / frameCount;
+        const hist = frameTimeHistory.current;
+        if (hist.length >= HISTORY_SIZE) hist.shift();
+        hist.push(avgFrameTime);
+        allFrameTimes.current.push(avgFrameTime);
+        const sorted = [...allFrameTimes.current].sort((a, b) => a - b);
+        const el = targetRef.current;
+        const dims = el ? `${el.offsetWidth} x ${el.offsetHeight}` : "\u2013";
+        const perf = performance;
+        const mem = perf.memory ? Math.round(perf.memory.usedJSHeapSize / 1024 / 1024) : 0;
+        setStats({
+          domMutations: domTracker.mutations.current,
+          domNodes: domTracker.getNodeCount(),
+          frameTime: avgFrameTime,
+          frameTimeMin: sorted[0] ?? 0,
+          frameTimeMax: sorted[sorted.length - 1] ?? 0,
+          frameTimeP99: percentile(sorted, 99),
+          frameTimeHistory: [...hist],
+          longTasks: longTasks.count.current,
+          rendersPerSecond: renderRate.rendersPerSecond.current,
+          memory: mem,
+          dimensions: dims,
+          profiler: { ...profilerData.current }
+        });
+        frameCount = 0;
+        frameTotalMs = 0;
+        lastSecond = now;
+      }
+      animId = requestAnimationFrame(tick);
+    };
+    animId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(animId);
+  }, [targetRef, domTracker, renderRate, longTasks]);
+  const handleReset = (0, import_react2.useCallback)(() => {
+    frameTimeHistory.current = [];
+    allFrameTimes.current = [];
+    setStats(INITIAL_STATS);
+    onReset();
+  }, [onReset]);
+  const handleExport = (0, import_react2.useCallback)(() => {
+    const payload = { timestamp: (/* @__PURE__ */ new Date()).toISOString(), ...stats };
+    const json = JSON.stringify(payload, null, 2);
+    try {
+      navigator.clipboard.writeText(json).then(() => {
+        setExported(true);
+        setTimeout(() => setExported(false), 1200);
+      });
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = json;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      setExported(true);
+      setTimeout(() => setExported(false), 1200);
+    }
+  }, [stats]);
+  const ftColor = stats.frameTime > 33 ? "#ef4444" : stats.frameTime > 16.67 ? "#f59e0b" : "#4ade80";
+  const rpsColor = stats.rendersPerSecond > 30 ? "#ef4444" : stats.rendersPerSecond > 10 ? "#f59e0b" : "#4ade80";
+  const actualColor = stats.profiler.actualDuration > 16 ? "#ef4444" : stats.profiler.actualDuration > 8 ? "#f59e0b" : "#4ade80";
+  const fps = stats.frameTime > 0 ? Math.round(1e3 / stats.frameTime) : 0;
+  const memoGain = stats.profiler.baseDuration > 0 ? Math.round((1 - stats.profiler.actualDuration / stats.profiler.baseDuration) * 100) : 0;
+  const p99Color = stats.frameTimeP99 > 33 ? "#ef4444" : stats.frameTimeP99 > 16.67 ? "#f59e0b" : "#4ade80";
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DevProfiler_default.panel, style: getPanelStyle(pos, offset, position), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: DevProfiler_default.panelHeader,
+          ...dragHandlers,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: DevProfiler_default.panelTitle, children: [
+              "Dev Profiler",
+              instanceCount > 1 && instanceId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.instanceBadge, children: instanceId })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DevProfiler_default.headerActions, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  className: `${DevProfiler_default.exportBtn} ${exported ? DevProfiler_default.exportBtnActive : ""}`,
+                  onClick: handleExport,
+                  title: exported ? "Copied!" : "Copy stats to clipboard",
+                  children: exported ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25z" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25z" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: DevProfiler_default.resetBtn, onClick: handleReset, title: "Reset counters", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.6A6 6 0 0 0 2.07 7.5a1 1 0 1 1-1.97-.36A8 8 0 0 1 13 3.35V2a1 1 0 0 1 1-1zM2 15a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 0 2H4.4A6 6 0 0 0 13.93 8.5a1 1 0 1 1 1.97.36A8 8 0 0 1 3 12.65V14a1 1 0 0 1-1 1z" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: DevProfiler_default.closeBtn, onClick: onClose, children: "\u2715" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DevProfiler_default.body, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.section, children: "Rendering" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Frame time", value: `${stats.frameTime.toFixed(1)}ms`, sub: `${fps} fps`, color: ftColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FrameTimeGraph, { history: stats.frameTimeHistory }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DevProfiler_default.miniRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "min ",
+            stats.frameTimeMin.toFixed(1)
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "max ",
+            stats.frameTimeMax.toFixed(1)
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: p99Color }, children: [
+            "p99 ",
+            stats.frameTimeP99.toFixed(1)
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Renders/s", value: String(stats.rendersPerSecond), color: rpsColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Long tasks", value: String(stats.longTasks), color: stats.longTasks > 0 ? "#f59e0b" : "#4ade80" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: DevProfiler_default.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.section, children: "React Profiler" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Phase", value: stats.profiler.phase, color: "#888" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Render", value: `${stats.profiler.actualDuration.toFixed(2)}ms`, color: actualColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Base (no memo)", value: `${stats.profiler.baseDuration.toFixed(2)}ms`, color: "#888" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Memo gain", value: `${memoGain}%`, color: memoGain > 50 ? "#4ade80" : memoGain > 20 ? "#f59e0b" : "#ef4444" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Commits", value: String(stats.profiler.commitCount) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: DevProfiler_default.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.section, children: "DOM" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Nodes", value: stats.domNodes.toLocaleString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Mutations", value: String(stats.domMutations) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "Size", value: stats.dimensions, color: "#888" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: DevProfiler_default.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.section, children: "Memory" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatRow, { label: "JS Heap", value: stats.memory > 0 ? `${stats.memory} MB` : "N/A" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: DevProfiler_default.footer, children: "Ctrl+I to toggle" })
+    ] }),
+    document.body
+  );
+}
+
+// src/ToggleButton.tsx
+var import_react3 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getButtonStyle(pos, position) {
+  const style = {};
+  if (position.startsWith("bottom")) {
+    style.bottom = window.innerHeight - pos.top + 8;
+  } else {
+    style.top = pos.top + 8;
+  }
+  if (position.endsWith("right")) {
+    style.right = window.innerWidth - pos.left;
+  } else {
+    style.left = pos.left;
+  }
+  return style;
+}
+function ToggleButton({
+  targetRef,
+  onClick,
+  position = "bottom-left"
+}) {
+  const pos = useAnchorPosition(targetRef, position);
+  const [fps, setFps] = (0, import_react3.useState)(0);
+  const lastFrame = (0, import_react3.useRef)(performance.now());
+  (0, import_react3.useEffect)(() => {
+    let animId;
+    let count = 0;
+    let lastSecond = performance.now();
+    const tick = () => {
+      const now = performance.now();
+      lastFrame.current = now;
+      count++;
+      if (now - lastSecond >= 1e3) {
+        setFps(count);
+        count = 0;
+        lastSecond = now;
+      }
+      animId = requestAnimationFrame(tick);
+    };
+    animId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(animId);
+  }, []);
+  const fpsColor = fps < 30 ? "#ef4444" : fps < 55 ? "#f59e0b" : "#4ade80";
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        className: DevProfiler_default.toggleBtn,
+        onClick,
+        title: "Dev Profiler (Ctrl+I)",
+        style: getButtonStyle(pos, position),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: DevProfiler_default.toggleFps, style: { color: fpsColor }, children: fps })
+      }
+    ),
+    document.body
+  );
+}
+
+// src/DevProfiler.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TOGGLE_EVENT = "devprofiler:toggle";
+var BOUND_KEY = "__devprofiler_bound";
+if (typeof window !== "undefined" && __DEV__ && !window[BOUND_KEY]) {
+  window[BOUND_KEY] = true;
+  window.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "i") {
+      e.preventDefault();
+      window.dispatchEvent(new CustomEvent(TOGGLE_EVENT));
+    }
+  });
+}
+var instanceCounter = 0;
+var activeInstances = /* @__PURE__ */ new Set();
+function DevProfiler({
+  children,
+  position = "bottom-left",
+  id
+}) {
+  const wrapperRef = (0, import_react4.useRef)(null);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const toggle = (0, import_react4.useCallback)(() => setOpen((prev) => !prev), []);
+  const instanceId = (0, import_react4.useRef)(id ?? `profiler-${++instanceCounter}`).current;
+  (0, import_react4.useEffect)(() => {
+    activeInstances.add(instanceId);
+    return () => {
+      activeInstances.delete(instanceId);
+    };
+  }, [instanceId]);
+  const domTracker = useDomTracker(wrapperRef, open);
+  const renderRate = useRenderRate();
+  const longTasks = useLongTasks(open);
+  useRenderFlash(wrapperRef, open);
+  const profilerData = (0, import_react4.useRef)({ ...INITIAL_PROFILER });
+  const onRender = (0, import_react4.useCallback)((_id, phase, actualDuration, baseDuration) => {
+    profilerData.current = {
+      phase,
+      actualDuration,
+      baseDuration,
+      commitCount: profilerData.current.commitCount + 1
+    };
+    renderRate.tick();
+  }, [renderRate]);
+  const handleReset = (0, import_react4.useCallback)(() => {
+    domTracker.reset();
+    renderRate.reset();
+    longTasks.reset();
+    profilerData.current = { ...INITIAL_PROFILER };
+  }, [domTracker, renderRate, longTasks]);
+  (0, import_react4.useEffect)(() => {
+    const handler = () => setOpen((prev) => !prev);
+    window.addEventListener(TOGGLE_EVENT, handler);
+    return () => window.removeEventListener(TOGGLE_EVENT, handler);
+  }, []);
+  if (!__DEV__) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: wrapperRef, className: DevProfiler_default.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react4.Profiler, { id: "DevProfiler", onRender, children }),
+    !open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleButton, { targetRef: wrapperRef, onClick: toggle, position }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      DevStatsPanel,
+      {
+        targetRef: wrapperRef,
+        domTracker,
+        renderRate,
+        longTasks,
+        profilerData,
+        onClose: toggle,
+        onReset: handleReset,
+        position,
+        instanceId,
+        instanceCount: activeInstances.size
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DevProfiler
+});
+/**
+ * @module react-dev-profiler
+ * @description Type definitions and constants for the profiler.
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
+/**
+ * @module react-dev-profiler
+ * @description Environment detection — works with Vite, webpack, Next.js, and any bundler.
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
+/**
+ * @module react-dev-profiler
+ * @description Custom hooks that power the profiler's data collection.
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
+/**
+ * @module react-dev-profiler
+ * @description The main stats panel — renders all performance metrics in a floating overlay.
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
+/**
+ * @module react-dev-profiler
+ * @description Minimal floating button that shows the current FPS at a glance.
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
+/**
+ * @module react-dev-profiler
+ * @description Main wrapper component — wraps your app and enables profiling.
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
+/**
+ * react-dev-profiler
+ * Real-time React performance monitoring for development.
+ *
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
+//# sourceMappingURL=index.cjs.map