react-dev-profiler 1.0.0 → 1.0.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Frederic Denis (billywild87)
+Copyright (c) 2026 Frederic Denis (billywild87)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,8 +2,8 @@
 
 Real-time React performance monitoring for development. Zero overhead in production.
 
-![npm](https://img.shields.io/npm/v/react-dev-profiler)
-![license](https://img.shields.io/npm/l/react-dev-profiler)
+[![npm version](https://img.shields.io/npm/v/react-dev-profiler)](https://www.npmjs.com/package/react-dev-profiler)
+[![license](https://img.shields.io/npm/l/react-dev-profiler?v=2)](./LICENSE)
 
 ## What it does
 

package/dist/index.cjs

@@ -27,9 +27,6 @@ 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 = {
@@ -63,6 +60,156 @@ var __DEV__ = typeof process !== "undefined" ? process.env.NODE_ENV !== "product
 
 // src/hooks.ts
 var import_react = require("react");
+
+// src/styles.ts
+var s = {
+  wrapper: {
+    display: "contents"
+  },
+  panel: {
+    position: "fixed",
+    zIndex: 99999,
+    background: "rgba(8, 8, 8, 0.95)",
+    border: "1px solid #222",
+    borderRadius: 10,
+    padding: "10px 14px",
+    minWidth: 220,
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7)",
+    fontFamily: "'SF Mono', 'Fira Code', monospace",
+    backdropFilter: "blur(12px)",
+    userSelect: "none",
+    color: "#ccc",
+    fontSize: 11
+  },
+  panelHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8,
+    cursor: "grab",
+    touchAction: "none"
+  },
+  panelTitle: {
+    color: "#666",
+    fontSize: 9,
+    fontWeight: 700,
+    letterSpacing: 1.5,
+    textTransform: "uppercase",
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  instanceBadge: {
+    background: "#222",
+    color: "#888",
+    fontSize: 8,
+    padding: "1px 5px",
+    borderRadius: 4,
+    letterSpacing: 0.5,
+    textTransform: "none"
+  },
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  iconBtn: {
+    background: "none",
+    border: "none",
+    color: "#444",
+    cursor: "pointer",
+    padding: 0,
+    lineHeight: 1,
+    display: "flex",
+    alignItems: "center",
+    transition: "color 0.15s"
+  },
+  iconBtnActive: {
+    color: "#4ade80"
+  },
+  closeBtn: {
+    background: "none",
+    border: "none",
+    color: "#444",
+    cursor: "pointer",
+    fontSize: 13,
+    padding: 0,
+    lineHeight: 1
+  },
+  body: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 5
+  },
+  section: {
+    color: "#444",
+    fontSize: 8,
+    fontWeight: 600,
+    letterSpacing: 1,
+    textTransform: "uppercase",
+    marginTop: 2
+  },
+  separator: {
+    height: 1,
+    background: "#1a1a1a",
+    margin: "2px 0"
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "1px 0"
+  },
+  rowLabel: {
+    color: "#555",
+    fontSize: 10
+  },
+  rowValue: {
+    fontSize: 11,
+    fontWeight: 600
+  },
+  miniRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    color: "#444",
+    fontSize: 9,
+    marginTop: -2,
+    marginBottom: 2
+  },
+  graphWrap: {
+    marginTop: 4
+  },
+  toggleBtn: {
+    position: "fixed",
+    zIndex: 99998,
+    minWidth: 28,
+    height: 24,
+    borderRadius: 7,
+    border: "1px solid #2a2a2a",
+    background: "rgba(20, 20, 20, 0.9)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 6px",
+    backdropFilter: "blur(8px)"
+  },
+  toggleFps: {
+    fontFamily: "'SF Mono', 'Fira Code', monospace",
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: -0.5
+  },
+  footer: {
+    marginTop: 8,
+    color: "#333",
+    fontSize: 8,
+    textAlign: "center"
+  }
+};
+var FLASH_OUTLINE = "2px solid rgba(99, 102, 241, 0.8)";
+
+// src/hooks.ts
 function useAnchorPosition(ref, position = "bottom-left") {
   const [pos, setPos] = (0, import_react.useState)({ top: 0, left: 0 });
   (0, import_react.useEffect)(() => {
@@ -180,8 +327,12 @@ function useRenderFlash(wrapperRef, open) {
       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);
+      el.style.outline = FLASH_OUTLINE;
+      el.style.outlineOffset = "-2px";
+      setTimeout(() => {
+        el.style.outline = "";
+        el.style.outlineOffset = "";
+      }, 150);
     });
     observer.observe(wrapperRef.current, { childList: true, subtree: true });
     return () => observer.disconnect();
@@ -215,7 +366,7 @@ function FrameTimeGraph({ 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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: s.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",
@@ -248,16 +399,17 @@ function FrameTimeGraph({ history }) {
   ] }) });
 }
 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 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: s.row, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.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 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...s.rowValue, 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 = {
+    ...s.panel,
     transform: `translate(${offset.x}px, ${offset.y}px)`
   };
   if (position.startsWith("bottom")) {
@@ -369,23 +521,24 @@ function DevStatsPanel({
   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";
+  const exportStyle = exported ? { ...s.iconBtn, ...s.iconBtnActive } : s.iconBtn;
   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", { style: getPanelStyle(pos, offset, position), children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
-          className: DevProfiler_default.panelHeader,
+          style: s.panelHeader,
           ...dragHandlers,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: DevProfiler_default.panelTitle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: s.panelTitle, children: [
               "Dev Profiler",
-              instanceCount > 1 && instanceId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.instanceBadge, children: instanceId })
+              instanceCount > 1 && instanceId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.instanceBadge, children: instanceId })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DevProfiler_default.headerActions, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: s.headerActions, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "button",
                 {
-                  className: `${DevProfiler_default.exportBtn} ${exported ? DevProfiler_default.exportBtnActive : ""}`,
+                  style: exportStyle,
                   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: [
@@ -394,17 +547,17 @@ function DevStatsPanel({
                   ] })
                 }
               ),
-              /* @__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.jsx)("button", { style: s.iconBtn, 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", { style: s.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.jsxs)("div", { style: s.body, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.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)("div", { style: s.miniRow, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
             "min ",
             stats.frameTimeMin.toFixed(1)
@@ -420,23 +573,23 @@ function DevStatsPanel({
         ] }),
         /* @__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)("div", { style: s.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.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)("div", { style: s.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.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)("div", { style: s.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.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" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: s.footer, children: "Ctrl+I to toggle" })
     ] }),
     document.body
   );
@@ -447,7 +600,7 @@ 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 = {};
+  const style = { ...s.toggleBtn };
   if (position.startsWith("bottom")) {
     style.bottom = window.innerHeight - pos.top + 8;
   } else {
@@ -491,11 +644,10 @@ function ToggleButton({
     /* @__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 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { ...s.toggleFps, color: fpsColor }, children: fps })
       }
     ),
     document.body
@@ -558,7 +710,7 @@ function DevProfiler({
     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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: wrapperRef, style: { display: "contents" }, 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)(
@@ -594,6 +746,12 @@ function DevProfiler({
  * @author Frederic Denis (billywild87) — https://github.com/billywild87
  * @license MIT
  */
+/**
+ * @module react-dev-profiler
+ * @description Inline styles for the profiler UI — no external CSS needed.
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
 /**
  * @module react-dev-profiler
  * @description Custom hooks that power the profiler's data collection.

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/DevProfiler.tsx","../src/DevProfiler.module.css","../src/types.ts","../src/env.ts","../src/hooks.ts","../src/DevStatsPanel.tsx","../src/ToggleButton.tsx"],"sourcesContent":["/**\n * react-dev-profiler\n * Real-time React performance monitoring for development.\n *\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nexport { DevProfiler } from './DevProfiler'\nexport type { DevStats, ReactProfilerData, PanelPosition } from './types'\n","/**\n * @module react-dev-profiler\n * @description Main wrapper component — wraps your app and enables profiling.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport { Profiler, useRef, useState, useEffect, useCallback, type ReactNode } from 'react'\nimport styles from './DevProfiler.module.css'\nimport { type ReactProfilerData, type PanelPosition, INITIAL_PROFILER } from './types'\nimport { __DEV__ } from './env'\nimport { useDomTracker, useRenderRate, useRenderFlash, useLongTasks } from './hooks'\nimport { DevStatsPanel } from './DevStatsPanel'\nimport { ToggleButton } from './ToggleButton'\n\n/*\n * Global keyboard shortcut: Ctrl+I (or Cmd+I) to toggle the profiler.\n * Registered once and kept alive across HMR reloads via a window flag.\n */\nconst TOGGLE_EVENT = 'devprofiler:toggle'\nconst BOUND_KEY = '__devprofiler_bound'\n\nif (typeof window !== 'undefined' && __DEV__ && !(window as any)[BOUND_KEY]) {\n    (window as any)[BOUND_KEY] = true\n    window.addEventListener('keydown', (e) => {\n        if ((e.ctrlKey || e.metaKey) && e.key === 'i') {\n            e.preventDefault()\n            window.dispatchEvent(new CustomEvent(TOGGLE_EVENT))\n        }\n    })\n}\n\n/* Module-level registry to track active profiler instances. */\nlet instanceCounter = 0\nconst activeInstances = new Set<string>()\n\n/**\n * Wrap your application (or any subtree) with `<DevProfiler>` to enable\n * real-time performance monitoring during development.\n *\n * In production builds the profiler is completely stripped — children\n * are rendered as-is with zero overhead.\n *\n * @example\n * ```tsx\n * import { DevProfiler } from 'react-dev-profiler'\n *\n * function App() {\n *   return (\n *     <DevProfiler>\n *       <YourApp />\n *     </DevProfiler>\n *   )\n * }\n * ```\n */\nexport function DevProfiler({\n    children,\n    position = 'bottom-left',\n    id,\n}: {\n    children: ReactNode\n    /** Where to anchor the panel. @default 'bottom-left' */\n    position?: PanelPosition\n    /** Optional identifier — shown in the panel when multiple instances are active. */\n    id?: string\n}) {\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const [open, setOpen] = useState(false)\n    const toggle = useCallback(() => setOpen(prev => !prev), [])\n\n    // Generate a stable instance ID (user-provided or auto-incremented).\n    const instanceId = useRef(id ?? `profiler-${++instanceCounter}`).current\n\n    useEffect(() => {\n        activeInstances.add(instanceId)\n        return () => { activeInstances.delete(instanceId) }\n    }, [instanceId])\n\n    const domTracker = useDomTracker(wrapperRef, open)\n    const renderRate = useRenderRate()\n    const longTasks = useLongTasks(open)\n    useRenderFlash(wrapperRef, open)\n\n    const profilerData = useRef<ReactProfilerData>({ ...INITIAL_PROFILER })\n    const onRender = useCallback((_id: string, phase: string, actualDuration: number, baseDuration: number) => {\n        profilerData.current = {\n            phase,\n            actualDuration,\n            baseDuration,\n            commitCount: profilerData.current.commitCount + 1,\n        }\n        renderRate.tick()\n    }, [renderRate])\n\n    const handleReset = useCallback(() => {\n        domTracker.reset()\n        renderRate.reset()\n        longTasks.reset()\n        profilerData.current = { ...INITIAL_PROFILER }\n    }, [domTracker, renderRate, longTasks])\n\n    useEffect(() => {\n        const handler = () => setOpen(prev => !prev)\n        window.addEventListener(TOGGLE_EVENT, handler)\n        return () => window.removeEventListener(TOGGLE_EVENT, handler)\n    }, [])\n\n    if (!__DEV__) return <>{children}</>\n\n    return (\n        <div ref={wrapperRef} className={styles.wrapper}>\n            <Profiler id=\"DevProfiler\" onRender={onRender}>\n                {children}\n            </Profiler>\n            {!open && <ToggleButton targetRef={wrapperRef} onClick={toggle} position={position} />}\n            {open && (\n                <DevStatsPanel\n                    targetRef={wrapperRef}\n                    domTracker={domTracker}\n                    renderRate={renderRate}\n                    longTasks={longTasks}\n                    profilerData={profilerData}\n                    onClose={toggle}\n                    onReset={handleReset}\n                    position={position}\n                    instanceId={instanceId}\n                    instanceCount={activeInstances.size}\n                />\n            )}\n        </div>\n    )\n}\n","/**\n * react-dev-profiler — Styles\n * Dark, minimal overlay theme with glassmorphism.\n * Author: Frederic Denis (billywild87)\n */\n\n/* Wrapper — takes up the full space of the profiled subtree */\n.wrapper {\n    height: 100%;\n    width: 100%;\n}\n\n/* Panel — floating overlay anchored near the profiled element */\n.panel {\n    position: fixed;\n    z-index: 99999;\n    background: rgba(8, 8, 8, 0.95);\n    border: 1px solid #222;\n    border-radius: 10px;\n    padding: 10px 14px;\n    min-width: 220px;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    backdrop-filter: blur(12px);\n    user-select: none;\n}\n\n/* Draggable header */\n.panelHeader {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 8px;\n    cursor: grab;\n    touch-action: none;\n}\n\n.panelHeader:active {\n    cursor: grabbing;\n}\n\n.panelTitle {\n    color: #666;\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.instanceBadge {\n    background: #222;\n    color: #888;\n    font-size: 8px;\n    padding: 1px 5px;\n    border-radius: 4px;\n    letter-spacing: 0.5px;\n    text-transform: none;\n}\n\n.headerActions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* Export button */\n.exportBtn {\n    background: none;\n    border: none;\n    color: #444;\n    cursor: pointer;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    align-items: center;\n    transition: color 0.15s;\n}\n\n.exportBtn:hover {\n    color: #4ade80;\n}\n\n.exportBtnActive {\n    color: #4ade80;\n}\n\n/* Reset button */\n.resetBtn {\n    background: none;\n    border: none;\n    color: #444;\n    cursor: pointer;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    align-items: center;\n}\n\n.resetBtn:hover {\n    color: #4ade80;\n}\n\n.closeBtn {\n    background: none;\n    border: none;\n    color: #444;\n    cursor: pointer;\n    font-size: 13px;\n    padding: 0;\n    line-height: 1;\n}\n\n.closeBtn:hover {\n    color: #888;\n}\n\n.body {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n/* Stat rows */\n.section {\n    color: #444;\n    font-size: 8px;\n    font-weight: 600;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    margin-top: 2px;\n}\n\n.separator {\n    height: 1px;\n    background: #1a1a1a;\n    margin: 2px 0;\n}\n\n.row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1px 0;\n}\n\n.rowLabel {\n    color: #555;\n    font-size: 10px;\n}\n\n.rowValue {\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.miniRow {\n    display: flex;\n    justify-content: space-between;\n    color: #444;\n    font-size: 9px;\n    margin-top: -2px;\n    margin-bottom: 2px;\n}\n\n/* Frame time graph */\n.graphWrap {\n    margin-top: 4px;\n}\n\n/* Toggle button — small floating FPS pill */\n.toggleBtn {\n    position: fixed;\n    z-index: 99998;\n    min-width: 28px;\n    height: 24px;\n    border-radius: 7px;\n    border: 1px solid #2a2a2a;\n    background: rgba(20, 20, 20, 0.9);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n    backdrop-filter: blur(8px);\n}\n\n.toggleBtn:hover {\n    border-color: #333;\n}\n\n.toggleFps {\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: -0.5px;\n}\n\n/* Footer hint */\n.footer {\n    margin-top: 8px;\n    color: #333;\n    font-size: 8px;\n    text-align: center;\n}\n\n/* DOM mutation flash — brief outline pulse */\n.flash {\n    outline: 2px solid rgba(99, 102, 241, 0.8);\n    outline-offset: -2px;\n}\n","/**\n * @module react-dev-profiler\n * @description Type definitions and constants for the profiler.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\n/** Data captured from React's built-in <Profiler> callback. */\nexport type ReactProfilerData = {\n    phase: string\n    actualDuration: number\n    baseDuration: number\n    commitCount: number\n}\n\n/** Aggregated stats displayed in the profiler panel. */\nexport type DevStats = {\n    domMutations: number\n    domNodes: number\n    frameTime: number\n    frameTimeMin: number\n    frameTimeMax: number\n    frameTimeP99: number\n    frameTimeHistory: number[]\n    longTasks: number\n    rendersPerSecond: number\n    memory: number\n    dimensions: string\n    profiler: ReactProfilerData\n}\n\n/** Where the panel anchors relative to the profiled element. */\nexport type PanelPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'\n\n/** How many frames we keep in the rolling history graph. */\nexport const HISTORY_SIZE = 60\n\nexport const INITIAL_PROFILER: ReactProfilerData = {\n    phase: 'mount',\n    actualDuration: 0,\n    baseDuration: 0,\n    commitCount: 0,\n}\n\nexport const INITIAL_STATS: DevStats = {\n    domMutations: 0,\n    domNodes: 0,\n    frameTime: 0,\n    frameTimeMin: 0,\n    frameTimeMax: 0,\n    frameTimeP99: 0,\n    frameTimeHistory: [],\n    longTasks: 0,\n    rendersPerSecond: 0,\n    memory: 0,\n    dimensions: '–',\n    profiler: INITIAL_PROFILER,\n}\n\n/** Returns the value at a given percentile from a pre-sorted array. */\nexport function percentile(sorted: number[], p: number): number {\n    if (sorted.length === 0) return 0\n    const idx = Math.ceil((p / 100) * sorted.length) - 1\n    return sorted[Math.max(0, idx)]\n}\n","/**\n * @module react-dev-profiler\n * @description Environment detection — works with Vite, webpack, Next.js, and any bundler.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\n/**\n * True when running in a development environment.\n * Relies on `process.env.NODE_ENV` which all major bundlers replace at build time,\n * enabling dead-code elimination in production.\n */\nexport const __DEV__: boolean =\n    typeof process !== 'undefined'\n        ? process.env.NODE_ENV !== 'production'\n        : true\n","/**\n * @module react-dev-profiler\n * @description Custom hooks that power the profiler's data collection.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport { useState, useEffect, useCallback, useRef } from 'react'\nimport styles from './DevProfiler.module.css'\nimport type { PanelPosition } from './types'\n\n/**\n * Tracks a corner position of a referenced element using ResizeObserver.\n * Used to anchor the panel and toggle button near the profiled component.\n */\nexport function useAnchorPosition(\n    ref: React.RefObject<HTMLDivElement | null>,\n    position: PanelPosition = 'bottom-left'\n) {\n    const [pos, setPos] = useState({ top: 0, left: 0 })\n\n    useEffect(() => {\n        if (!ref.current) return\n        const update = () => {\n            if (!ref.current) return\n            const rect = ref.current.getBoundingClientRect()\n            const margin = 8\n            switch (position) {\n                case 'top-left':\n                    setPos({ top: rect.top + margin, left: rect.left + margin }); break\n                case 'top-right':\n                    setPos({ top: rect.top + margin, left: rect.right - margin }); break\n                case 'bottom-right':\n                    setPos({ top: rect.bottom - margin, left: rect.right - margin }); break\n                case 'bottom-left':\n                default:\n                    setPos({ top: rect.bottom - margin, left: rect.left + margin }); break\n            }\n        }\n        const observer = new ResizeObserver(update)\n        observer.observe(ref.current)\n        observer.observe(document.documentElement)\n        return () => observer.disconnect()\n    }, [ref, position])\n\n    return pos\n}\n\n/**\n * Makes an element draggable via Pointer Events.\n * Returns an offset to apply as CSS transform and event handlers for the drag handle.\n */\nexport function useDraggable() {\n    const [offset, setOffset] = useState({ x: 0, y: 0 })\n    const dragging = useRef(false)\n    const start = useRef({ x: 0, y: 0 })\n\n    const onPointerDown = useCallback((e: React.PointerEvent) => {\n        dragging.current = true\n        start.current = { x: e.clientX - offset.x, y: e.clientY - offset.y }\n        ;(e.target as HTMLElement).setPointerCapture(e.pointerId)\n    }, [offset])\n\n    const onPointerMove = useCallback((e: React.PointerEvent) => {\n        if (!dragging.current) return\n        setOffset({\n            x: e.clientX - start.current.x,\n            y: e.clientY - start.current.y,\n        })\n    }, [])\n\n    const onPointerUp = useCallback(() => {\n        dragging.current = false\n    }, [])\n\n    return { offset, handlers: { onPointerDown, onPointerMove, onPointerUp } }\n}\n\n/**\n * Counts real DOM mutations via MutationObserver (ignoring class-only changes).\n * The node count is cached and only recalculated when the DOM actually changes,\n * so we don't pay the cost of querySelectorAll('*') every frame.\n */\nexport function useDomTracker(wrapperRef: React.RefObject<HTMLDivElement | null>, enabled: boolean) {\n    const mutations = useRef(0)\n    const nodeCount = useRef(0)\n    const dirty = useRef(true)\n\n    useEffect(() => {\n        if (!enabled || !wrapperRef.current) return\n        const observer = new MutationObserver((records) => {\n            let realMutation = false\n            for (const record of records) {\n                if (record.type === 'attributes' && record.attributeName === 'class') continue\n                realMutation = true\n            }\n            if (realMutation) {\n                mutations.current++\n                dirty.current = true\n            }\n        })\n        observer.observe(wrapperRef.current, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['style'],\n        })\n        return () => observer.disconnect()\n    }, [wrapperRef, enabled])\n\n    const getNodeCount = useCallback(() => {\n        if (dirty.current && wrapperRef.current) {\n            nodeCount.current = wrapperRef.current.querySelectorAll('*').length\n            dirty.current = false\n        }\n        return nodeCount.current\n    }, [wrapperRef])\n\n    const reset = useCallback(() => {\n        mutations.current = 0\n        dirty.current = true\n    }, [])\n\n    return { mutations, getNodeCount, reset }\n}\n\n/**\n * Measures how many React renders happen per second.\n * Call `tick()` from the <Profiler> onRender callback; the hook\n * snapshots the count every second and resets it.\n */\nexport function useRenderRate() {\n    const renderCount = useRef(0)\n    const rendersPerSecond = useRef(0)\n\n    const tick = useCallback(() => {\n        renderCount.current++\n    }, [])\n\n    useEffect(() => {\n        const id = setInterval(() => {\n            rendersPerSecond.current = renderCount.current\n            renderCount.current = 0\n        }, 1000)\n        return () => clearInterval(id)\n    }, [])\n\n    const reset = useCallback(() => {\n        renderCount.current = 0\n        rendersPerSecond.current = 0\n    }, [])\n\n    return { rendersPerSecond, tick, reset }\n}\n\n/**\n * Flashes a subtle outline on the profiled element whenever the DOM mutates.\n * Skips the very first mutation (the initial mount) to avoid a flash on load.\n */\nexport function useRenderFlash(wrapperRef: React.RefObject<HTMLDivElement | null>, open: boolean) {\n    const mutationCount = useRef(0)\n\n    useEffect(() => {\n        if (!open || !wrapperRef.current) return\n        const observer = new MutationObserver(() => {\n            mutationCount.current++\n            if (!wrapperRef.current || mutationCount.current <= 1) return\n            const el = wrapperRef.current\n            el.classList.add(styles.flash)\n            setTimeout(() => el.classList.remove(styles.flash), 150)\n        })\n        observer.observe(wrapperRef.current, { childList: true, subtree: true })\n        return () => observer.disconnect()\n    }, [wrapperRef, open])\n}\n\n/**\n * Detects browser \"long tasks\" (>50 ms) using PerformanceObserver.\n * Falls back silently in browsers that don't support the longtask entry type.\n */\nexport function useLongTasks(enabled: boolean) {\n    const count = useRef(0)\n\n    useEffect(() => {\n        if (!enabled || typeof PerformanceObserver === 'undefined') return\n        try {\n            const observer = new PerformanceObserver((list) => {\n                count.current += list.getEntries().length\n            })\n            observer.observe({ entryTypes: ['longtask'] })\n            return () => observer.disconnect()\n        } catch {\n            // longtask not supported in this browser\n        }\n    }, [enabled])\n\n    const reset = useCallback(() => { count.current = 0 }, [])\n\n    return { count, reset }\n}\n","/**\n * @module react-dev-profiler\n * @description The main stats panel — renders all performance metrics in a floating overlay.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport { useState, useEffect, useCallback, useRef, type CSSProperties } from 'react'\nimport { createPortal } from 'react-dom'\nimport styles from './DevProfiler.module.css'\nimport { useAnchorPosition, useDraggable, useDomTracker, useRenderRate, useLongTasks } from './hooks'\nimport { type ReactProfilerData, type PanelPosition, type DevStats, HISTORY_SIZE, INITIAL_STATS, percentile } from './types'\n\n/** Rolling bar chart of frame times (last 60 samples). */\nfunction FrameTimeGraph({ history }: { history: number[] }) {\n    const max = Math.max(33, ...history)\n    const w = 140\n    const h = 32\n    const barW = Math.max(1, w / HISTORY_SIZE - 0.5)\n\n    return (\n        <div className={styles.graphWrap}>\n            <svg width={w} height={h} style={{ display: 'block' }}>\n                <rect width={w} height={h} rx={3} fill=\"#111\" />\n                {/* 60 fps guideline */}\n                <line x1={0} y1={h - (16.67 / max) * h} x2={w} y2={h - (16.67 / max) * h}\n                    stroke=\"#1a3a1a\" strokeWidth={1} />\n                {/* 30 fps guideline */}\n                <line x1={0} y1={h - (33 / max) * h} x2={w} y2={h - (33 / max) * h}\n                    stroke=\"#3a1a1a\" strokeWidth={1} />\n                {history.map((ms, i) => {\n                    const x = (i / HISTORY_SIZE) * w\n                    const barH = Math.min((ms / max) * h, h)\n                    const color = ms > 33 ? '#ef4444' : ms > 16.67 ? '#f59e0b' : '#4ade80'\n                    return <rect key={i} x={x} y={h - barH} width={barW} height={barH} fill={color} opacity={0.8} rx={0.5} />\n                })}\n            </svg>\n        </div>\n    )\n}\n\n/** Single label → value row used throughout the panel. */\nfunction StatRow({ label, value, sub, color = '#4ade80' }: { label: string, value: string, sub?: string, color?: string }) {\n    return (\n        <div className={styles.row}>\n            <span className={styles.rowLabel}>{label}</span>\n            <span>\n                <span className={styles.rowValue} style={{ color }}>{value}</span>\n                {sub && <span style={{ color: '#444', fontSize: 9, marginLeft: 4 }}>{sub}</span>}\n            </span>\n        </div>\n    )\n}\n\n/** Computes fixed-position styles based on the chosen panel position + drag offset. */\nfunction getPanelStyle(\n    pos: { top: number; left: number },\n    offset: { x: number; y: number },\n    position: PanelPosition,\n): CSSProperties {\n    const style: CSSProperties = {\n        transform: `translate(${offset.x}px, ${offset.y}px)`,\n    }\n    if (position.startsWith('bottom')) {\n        style.bottom = window.innerHeight - pos.top\n    } else {\n        style.top = pos.top\n    }\n    if (position.endsWith('right')) {\n        style.right = window.innerWidth - pos.left\n    } else {\n        style.left = pos.left\n    }\n    return style\n}\n\n/** Floating stats panel portaled to document.body. */\nexport function DevStatsPanel({\n    targetRef,\n    domTracker,\n    renderRate,\n    longTasks,\n    profilerData,\n    onClose,\n    onReset,\n    position = 'bottom-left',\n    instanceId,\n    instanceCount = 1,\n}: {\n    targetRef: React.RefObject<HTMLDivElement | null>\n    domTracker: ReturnType<typeof useDomTracker>\n    renderRate: ReturnType<typeof useRenderRate>\n    longTasks: ReturnType<typeof useLongTasks>\n    profilerData: React.RefObject<ReactProfilerData>\n    onClose: () => void\n    onReset: () => void\n    position?: PanelPosition\n    instanceId?: string\n    instanceCount?: number\n}) {\n    const [stats, setStats] = useState<DevStats>(INITIAL_STATS)\n    const [exported, setExported] = useState(false)\n    const lastFrame = useRef(performance.now())\n    const frameTimeHistory = useRef<number[]>([])\n    const allFrameTimes = useRef<number[]>([])\n    const pos = useAnchorPosition(targetRef, position)\n    const { offset, handlers: dragHandlers } = useDraggable()\n\n    // Collects frame timing data every rAF, then snapshots stats once per second.\n    useEffect(() => {\n        let animId: number\n        let frameCount = 0\n        let frameTotalMs = 0\n        let lastSecond = performance.now()\n\n        const tick = () => {\n            const now = performance.now()\n            const delta = now - lastFrame.current\n            lastFrame.current = now\n            frameCount++\n            frameTotalMs += delta\n\n            if (now - lastSecond >= 1000) {\n                const avgFrameTime = frameTotalMs / frameCount\n\n                const hist = frameTimeHistory.current\n                if (hist.length >= HISTORY_SIZE) hist.shift()\n                hist.push(avgFrameTime)\n\n                allFrameTimes.current.push(avgFrameTime)\n                const sorted = [...allFrameTimes.current].sort((a, b) => a - b)\n\n                const el = targetRef.current\n                const dims = el ? `${el.offsetWidth} x ${el.offsetHeight}` : '–'\n\n                // Chrome-only: performance.memory exposes JS heap usage\n                const perf = performance as any\n                const mem = perf.memory ? Math.round(perf.memory.usedJSHeapSize / 1024 / 1024) : 0\n\n                setStats({\n                    domMutations: domTracker.mutations.current,\n                    domNodes: domTracker.getNodeCount(),\n                    frameTime: avgFrameTime,\n                    frameTimeMin: sorted[0] ?? 0,\n                    frameTimeMax: sorted[sorted.length - 1] ?? 0,\n                    frameTimeP99: percentile(sorted, 99),\n                    frameTimeHistory: [...hist],\n                    longTasks: longTasks.count.current,\n                    rendersPerSecond: renderRate.rendersPerSecond.current,\n                    memory: mem,\n                    dimensions: dims,\n                    profiler: { ...profilerData.current },\n                })\n\n                frameCount = 0\n                frameTotalMs = 0\n                lastSecond = now\n            }\n            animId = requestAnimationFrame(tick)\n        }\n        animId = requestAnimationFrame(tick)\n        return () => cancelAnimationFrame(animId)\n    }, [targetRef, domTracker, renderRate, longTasks])\n\n    const handleReset = useCallback(() => {\n        frameTimeHistory.current = []\n        allFrameTimes.current = []\n        setStats(INITIAL_STATS)\n        onReset()\n    }, [onReset])\n\n    // Copy current stats as JSON to clipboard.\n    const handleExport = useCallback(() => {\n        const payload = { timestamp: new Date().toISOString(), ...stats }\n        const json = JSON.stringify(payload, null, 2)\n        try {\n            navigator.clipboard.writeText(json).then(() => {\n                setExported(true)\n                setTimeout(() => setExported(false), 1200)\n            })\n        } catch {\n            // Fallback for non-secure contexts\n            const ta = document.createElement('textarea')\n            ta.value = json\n            ta.style.position = 'fixed'\n            ta.style.opacity = '0'\n            document.body.appendChild(ta)\n            ta.select()\n            document.execCommand('copy')\n            document.body.removeChild(ta)\n            setExported(true)\n            setTimeout(() => setExported(false), 1200)\n        }\n    }, [stats])\n\n    // Color thresholds: green = good, amber = warning, red = bad\n    const ftColor = stats.frameTime > 33 ? '#ef4444' : stats.frameTime > 16.67 ? '#f59e0b' : '#4ade80'\n    const rpsColor = stats.rendersPerSecond > 30 ? '#ef4444' : stats.rendersPerSecond > 10 ? '#f59e0b' : '#4ade80'\n    const actualColor = stats.profiler.actualDuration > 16 ? '#ef4444' : stats.profiler.actualDuration > 8 ? '#f59e0b' : '#4ade80'\n    const fps = stats.frameTime > 0 ? Math.round(1000 / stats.frameTime) : 0\n    const memoGain = stats.profiler.baseDuration > 0\n        ? Math.round((1 - stats.profiler.actualDuration / stats.profiler.baseDuration) * 100)\n        : 0\n    const p99Color = stats.frameTimeP99 > 33 ? '#ef4444' : stats.frameTimeP99 > 16.67 ? '#f59e0b' : '#4ade80'\n\n    return createPortal(\n        <div className={styles.panel} style={getPanelStyle(pos, offset, position)}>\n            <div\n                className={styles.panelHeader}\n                {...dragHandlers}\n            >\n                <span className={styles.panelTitle}>\n                    Dev Profiler\n                    {instanceCount > 1 && instanceId && (\n                        <span className={styles.instanceBadge}>{instanceId}</span>\n                    )}\n                </span>\n                <div className={styles.headerActions}>\n                    <button\n                        className={`${styles.exportBtn} ${exported ? styles.exportBtnActive : ''}`}\n                        onClick={handleExport}\n                        title={exported ? 'Copied!' : 'Copy stats to clipboard'}\n                    >\n                        {exported ? (\n                            <svg width=\"10\" height=\"10\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                                <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\"/>\n                            </svg>\n                        ) : (\n                            <svg width=\"10\" height=\"10\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                                <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\"/>\n                                <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\"/>\n                            </svg>\n                        )}\n                    </button>\n                    <button className={styles.resetBtn} onClick={handleReset} title=\"Reset counters\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                            <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\"/>\n                        </svg>\n                    </button>\n                    <button className={styles.closeBtn} onClick={onClose}>✕</button>\n                </div>\n            </div>\n\n            <div className={styles.body}>\n                <span className={styles.section}>Rendering</span>\n                <StatRow label=\"Frame time\" value={`${stats.frameTime.toFixed(1)}ms`} sub={`${fps} fps`} color={ftColor} />\n                <FrameTimeGraph history={stats.frameTimeHistory} />\n                <div className={styles.miniRow}>\n                    <span>min {stats.frameTimeMin.toFixed(1)}</span>\n                    <span>max {stats.frameTimeMax.toFixed(1)}</span>\n                    <span style={{ color: p99Color }}>p99 {stats.frameTimeP99.toFixed(1)}</span>\n                </div>\n                <StatRow label=\"Renders/s\" value={String(stats.rendersPerSecond)} color={rpsColor} />\n                <StatRow label=\"Long tasks\" value={String(stats.longTasks)} color={stats.longTasks > 0 ? '#f59e0b' : '#4ade80'} />\n\n                <div className={styles.separator} />\n                <span className={styles.section}>React Profiler</span>\n                <StatRow label=\"Phase\" value={stats.profiler.phase} color=\"#888\" />\n                <StatRow label=\"Render\" value={`${stats.profiler.actualDuration.toFixed(2)}ms`} color={actualColor} />\n                <StatRow label=\"Base (no memo)\" value={`${stats.profiler.baseDuration.toFixed(2)}ms`} color=\"#888\" />\n                <StatRow label=\"Memo gain\" value={`${memoGain}%`} color={memoGain > 50 ? '#4ade80' : memoGain > 20 ? '#f59e0b' : '#ef4444'} />\n                <StatRow label=\"Commits\" value={String(stats.profiler.commitCount)} />\n\n                <div className={styles.separator} />\n                <span className={styles.section}>DOM</span>\n                <StatRow label=\"Nodes\" value={stats.domNodes.toLocaleString()} />\n                <StatRow label=\"Mutations\" value={String(stats.domMutations)} />\n                <StatRow label=\"Size\" value={stats.dimensions} color=\"#888\" />\n\n                <div className={styles.separator} />\n                <span className={styles.section}>Memory</span>\n                <StatRow label=\"JS Heap\" value={stats.memory > 0 ? `${stats.memory} MB` : 'N/A'} />\n            </div>\n\n            <div className={styles.footer}>Ctrl+I to toggle</div>\n        </div>,\n        document.body\n    )\n}\n","/**\n * @module react-dev-profiler\n * @description Minimal floating button that shows the current FPS at a glance.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport { useState, useEffect, useRef, type CSSProperties } from 'react'\nimport { createPortal } from 'react-dom'\nimport styles from './DevProfiler.module.css'\nimport { useAnchorPosition } from './hooks'\nimport type { PanelPosition } from './types'\n\n/** Computes fixed-position styles based on the chosen panel position. */\nfunction getButtonStyle(pos: { top: number; left: number }, position: PanelPosition): CSSProperties {\n    const style: CSSProperties = {}\n    if (position.startsWith('bottom')) {\n        style.bottom = window.innerHeight - pos.top + 8\n    } else {\n        style.top = pos.top + 8\n    }\n    if (position.endsWith('right')) {\n        style.right = window.innerWidth - pos.left\n    } else {\n        style.left = pos.left\n    }\n    return style\n}\n\n/** Small floating pill showing live FPS — click to open the full panel. */\nexport function ToggleButton({\n    targetRef,\n    onClick,\n    position = 'bottom-left',\n}: {\n    targetRef: React.RefObject<HTMLDivElement | null>\n    onClick: () => void\n    position?: PanelPosition\n}) {\n    const pos = useAnchorPosition(targetRef, position)\n    const [fps, setFps] = useState(0)\n    const lastFrame = useRef(performance.now())\n\n    useEffect(() => {\n        let animId: number\n        let count = 0\n        let lastSecond = performance.now()\n\n        const tick = () => {\n            const now = performance.now()\n            lastFrame.current = now\n            count++\n            if (now - lastSecond >= 1000) {\n                setFps(count)\n                count = 0\n                lastSecond = now\n            }\n            animId = requestAnimationFrame(tick)\n        }\n        animId = requestAnimationFrame(tick)\n        return () => cancelAnimationFrame(animId)\n    }, [])\n\n    const fpsColor = fps < 30 ? '#ef4444' : fps < 55 ? '#f59e0b' : '#4ade80'\n\n    return createPortal(\n        <button\n            className={styles.toggleBtn}\n            onClick={onClick}\n            title=\"Dev Profiler (Ctrl+I)\"\n            style={getButtonStyle(pos, position)}\n        >\n            <span className={styles.toggleFps} style={{ color: fpsColor }}>{fps}</span>\n        </button>,\n        document.body\n    )\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","import_react_dom","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/DevProfiler.tsx","../src/types.ts","../src/env.ts","../src/hooks.ts","../src/styles.ts","../src/DevStatsPanel.tsx","../src/ToggleButton.tsx"],"sourcesContent":["/**\n * react-dev-profiler\n * Real-time React performance monitoring for development.\n *\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nexport { DevProfiler } from './DevProfiler'\nexport type { DevStats, ReactProfilerData, PanelPosition } from './types'\n","/**\n * @module react-dev-profiler\n * @description Main wrapper component — wraps your app and enables profiling.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport { Profiler, useRef, useState, useEffect, useCallback, type ReactNode } from 'react'\nimport { type ReactProfilerData, type PanelPosition, INITIAL_PROFILER } from './types'\nimport { __DEV__ } from './env'\nimport { useDomTracker, useRenderRate, useRenderFlash, useLongTasks } from './hooks'\nimport { DevStatsPanel } from './DevStatsPanel'\nimport { ToggleButton } from './ToggleButton'\n\n/*\n * Global keyboard shortcut: Ctrl+I (or Cmd+I) to toggle the profiler.\n * Registered once and kept alive across HMR reloads via a window flag.\n */\nconst TOGGLE_EVENT = 'devprofiler:toggle'\nconst BOUND_KEY = '__devprofiler_bound'\n\nif (typeof window !== 'undefined' && __DEV__ && !(window as any)[BOUND_KEY]) {\n    (window as any)[BOUND_KEY] = true\n    window.addEventListener('keydown', (e) => {\n        if ((e.ctrlKey || e.metaKey) && e.key === 'i') {\n            e.preventDefault()\n            window.dispatchEvent(new CustomEvent(TOGGLE_EVENT))\n        }\n    })\n}\n\n/* Module-level registry to track active profiler instances. */\nlet instanceCounter = 0\nconst activeInstances = new Set<string>()\n\n/**\n * Wrap your application (or any subtree) with `<DevProfiler>` to enable\n * real-time performance monitoring during development.\n *\n * In production builds the profiler is completely stripped — children\n * are rendered as-is with zero overhead.\n *\n * @example\n * ```tsx\n * import { DevProfiler } from 'react-dev-profiler'\n *\n * function App() {\n *   return (\n *     <DevProfiler>\n *       <YourApp />\n *     </DevProfiler>\n *   )\n * }\n * ```\n */\nexport function DevProfiler({\n    children,\n    position = 'bottom-left',\n    id,\n}: {\n    children: ReactNode\n    /** Where to anchor the panel. @default 'bottom-left' */\n    position?: PanelPosition\n    /** Optional identifier — shown in the panel when multiple instances are active. */\n    id?: string\n}) {\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const [open, setOpen] = useState(false)\n    const toggle = useCallback(() => setOpen(prev => !prev), [])\n\n    // Generate a stable instance ID (user-provided or auto-incremented).\n    const instanceId = useRef(id ?? `profiler-${++instanceCounter}`).current\n\n    useEffect(() => {\n        activeInstances.add(instanceId)\n        return () => { activeInstances.delete(instanceId) }\n    }, [instanceId])\n\n    const domTracker = useDomTracker(wrapperRef, open)\n    const renderRate = useRenderRate()\n    const longTasks = useLongTasks(open)\n    useRenderFlash(wrapperRef, open)\n\n    const profilerData = useRef<ReactProfilerData>({ ...INITIAL_PROFILER })\n    const onRender = useCallback((_id: string, phase: string, actualDuration: number, baseDuration: number) => {\n        profilerData.current = {\n            phase,\n            actualDuration,\n            baseDuration,\n            commitCount: profilerData.current.commitCount + 1,\n        }\n        renderRate.tick()\n    }, [renderRate])\n\n    const handleReset = useCallback(() => {\n        domTracker.reset()\n        renderRate.reset()\n        longTasks.reset()\n        profilerData.current = { ...INITIAL_PROFILER }\n    }, [domTracker, renderRate, longTasks])\n\n    useEffect(() => {\n        const handler = () => setOpen(prev => !prev)\n        window.addEventListener(TOGGLE_EVENT, handler)\n        return () => window.removeEventListener(TOGGLE_EVENT, handler)\n    }, [])\n\n    if (!__DEV__) return <>{children}</>\n\n    return (\n        <div ref={wrapperRef} style={{ display: 'contents' }}>\n            <Profiler id=\"DevProfiler\" onRender={onRender}>\n                {children}\n            </Profiler>\n            {!open && <ToggleButton targetRef={wrapperRef} onClick={toggle} position={position} />}\n            {open && (\n                <DevStatsPanel\n                    targetRef={wrapperRef}\n                    domTracker={domTracker}\n                    renderRate={renderRate}\n                    longTasks={longTasks}\n                    profilerData={profilerData}\n                    onClose={toggle}\n                    onReset={handleReset}\n                    position={position}\n                    instanceId={instanceId}\n                    instanceCount={activeInstances.size}\n                />\n            )}\n        </div>\n    )\n}\n","/**\n * @module react-dev-profiler\n * @description Type definitions and constants for the profiler.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\n/** Data captured from React's built-in <Profiler> callback. */\nexport type ReactProfilerData = {\n    phase: string\n    actualDuration: number\n    baseDuration: number\n    commitCount: number\n}\n\n/** Aggregated stats displayed in the profiler panel. */\nexport type DevStats = {\n    domMutations: number\n    domNodes: number\n    frameTime: number\n    frameTimeMin: number\n    frameTimeMax: number\n    frameTimeP99: number\n    frameTimeHistory: number[]\n    longTasks: number\n    rendersPerSecond: number\n    memory: number\n    dimensions: string\n    profiler: ReactProfilerData\n}\n\n/** Where the panel anchors relative to the profiled element. */\nexport type PanelPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'\n\n/** How many frames we keep in the rolling history graph. */\nexport const HISTORY_SIZE = 60\n\nexport const INITIAL_PROFILER: ReactProfilerData = {\n    phase: 'mount',\n    actualDuration: 0,\n    baseDuration: 0,\n    commitCount: 0,\n}\n\nexport const INITIAL_STATS: DevStats = {\n    domMutations: 0,\n    domNodes: 0,\n    frameTime: 0,\n    frameTimeMin: 0,\n    frameTimeMax: 0,\n    frameTimeP99: 0,\n    frameTimeHistory: [],\n    longTasks: 0,\n    rendersPerSecond: 0,\n    memory: 0,\n    dimensions: '–',\n    profiler: INITIAL_PROFILER,\n}\n\n/** Returns the value at a given percentile from a pre-sorted array. */\nexport function percentile(sorted: number[], p: number): number {\n    if (sorted.length === 0) return 0\n    const idx = Math.ceil((p / 100) * sorted.length) - 1\n    return sorted[Math.max(0, idx)]\n}\n","/**\n * @module react-dev-profiler\n * @description Environment detection — works with Vite, webpack, Next.js, and any bundler.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\n/**\n * True when running in a development environment.\n * Relies on `process.env.NODE_ENV` which all major bundlers replace at build time,\n * enabling dead-code elimination in production.\n */\nexport const __DEV__: boolean =\n    typeof process !== 'undefined'\n        ? process.env.NODE_ENV !== 'production'\n        : true\n","/**\n * @module react-dev-profiler\n * @description Custom hooks that power the profiler's data collection.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport { useState, useEffect, useCallback, useRef } from 'react'\nimport { FLASH_OUTLINE } from './styles'\nimport type { PanelPosition } from './types'\n\n/**\n * Tracks a corner position of a referenced element using ResizeObserver.\n * Used to anchor the panel and toggle button near the profiled component.\n */\nexport function useAnchorPosition(\n    ref: React.RefObject<HTMLDivElement | null>,\n    position: PanelPosition = 'bottom-left'\n) {\n    const [pos, setPos] = useState({ top: 0, left: 0 })\n\n    useEffect(() => {\n        if (!ref.current) return\n        const update = () => {\n            if (!ref.current) return\n            const rect = ref.current.getBoundingClientRect()\n            const margin = 8\n            switch (position) {\n                case 'top-left':\n                    setPos({ top: rect.top + margin, left: rect.left + margin }); break\n                case 'top-right':\n                    setPos({ top: rect.top + margin, left: rect.right - margin }); break\n                case 'bottom-right':\n                    setPos({ top: rect.bottom - margin, left: rect.right - margin }); break\n                case 'bottom-left':\n                default:\n                    setPos({ top: rect.bottom - margin, left: rect.left + margin }); break\n            }\n        }\n        const observer = new ResizeObserver(update)\n        observer.observe(ref.current)\n        observer.observe(document.documentElement)\n        return () => observer.disconnect()\n    }, [ref, position])\n\n    return pos\n}\n\n/**\n * Makes an element draggable via Pointer Events.\n * Returns an offset to apply as CSS transform and event handlers for the drag handle.\n */\nexport function useDraggable() {\n    const [offset, setOffset] = useState({ x: 0, y: 0 })\n    const dragging = useRef(false)\n    const start = useRef({ x: 0, y: 0 })\n\n    const onPointerDown = useCallback((e: React.PointerEvent) => {\n        dragging.current = true\n        start.current = { x: e.clientX - offset.x, y: e.clientY - offset.y }\n        ;(e.target as HTMLElement).setPointerCapture(e.pointerId)\n    }, [offset])\n\n    const onPointerMove = useCallback((e: React.PointerEvent) => {\n        if (!dragging.current) return\n        setOffset({\n            x: e.clientX - start.current.x,\n            y: e.clientY - start.current.y,\n        })\n    }, [])\n\n    const onPointerUp = useCallback(() => {\n        dragging.current = false\n    }, [])\n\n    return { offset, handlers: { onPointerDown, onPointerMove, onPointerUp } }\n}\n\n/**\n * Counts real DOM mutations via MutationObserver (ignoring class-only changes).\n * The node count is cached and only recalculated when the DOM actually changes,\n * so we don't pay the cost of querySelectorAll('*') every frame.\n */\nexport function useDomTracker(wrapperRef: React.RefObject<HTMLDivElement | null>, enabled: boolean) {\n    const mutations = useRef(0)\n    const nodeCount = useRef(0)\n    const dirty = useRef(true)\n\n    useEffect(() => {\n        if (!enabled || !wrapperRef.current) return\n        const observer = new MutationObserver((records) => {\n            let realMutation = false\n            for (const record of records) {\n                if (record.type === 'attributes' && record.attributeName === 'class') continue\n                realMutation = true\n            }\n            if (realMutation) {\n                mutations.current++\n                dirty.current = true\n            }\n        })\n        observer.observe(wrapperRef.current, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['style'],\n        })\n        return () => observer.disconnect()\n    }, [wrapperRef, enabled])\n\n    const getNodeCount = useCallback(() => {\n        if (dirty.current && wrapperRef.current) {\n            nodeCount.current = wrapperRef.current.querySelectorAll('*').length\n            dirty.current = false\n        }\n        return nodeCount.current\n    }, [wrapperRef])\n\n    const reset = useCallback(() => {\n        mutations.current = 0\n        dirty.current = true\n    }, [])\n\n    return { mutations, getNodeCount, reset }\n}\n\n/**\n * Measures how many React renders happen per second.\n * Call `tick()` from the <Profiler> onRender callback; the hook\n * snapshots the count every second and resets it.\n */\nexport function useRenderRate() {\n    const renderCount = useRef(0)\n    const rendersPerSecond = useRef(0)\n\n    const tick = useCallback(() => {\n        renderCount.current++\n    }, [])\n\n    useEffect(() => {\n        const id = setInterval(() => {\n            rendersPerSecond.current = renderCount.current\n            renderCount.current = 0\n        }, 1000)\n        return () => clearInterval(id)\n    }, [])\n\n    const reset = useCallback(() => {\n        renderCount.current = 0\n        rendersPerSecond.current = 0\n    }, [])\n\n    return { rendersPerSecond, tick, reset }\n}\n\n/**\n * Flashes a subtle outline on the profiled element whenever the DOM mutates.\n * Skips the very first mutation (the initial mount) to avoid a flash on load.\n */\nexport function useRenderFlash(wrapperRef: React.RefObject<HTMLDivElement | null>, open: boolean) {\n    const mutationCount = useRef(0)\n\n    useEffect(() => {\n        if (!open || !wrapperRef.current) return\n        const observer = new MutationObserver(() => {\n            mutationCount.current++\n            if (!wrapperRef.current || mutationCount.current <= 1) return\n            const el = wrapperRef.current\n            el.style.outline = FLASH_OUTLINE\n            el.style.outlineOffset = '-2px'\n            setTimeout(() => {\n                el.style.outline = ''\n                el.style.outlineOffset = ''\n            }, 150)\n        })\n        observer.observe(wrapperRef.current, { childList: true, subtree: true })\n        return () => observer.disconnect()\n    }, [wrapperRef, open])\n}\n\n/**\n * Detects browser \"long tasks\" (>50 ms) using PerformanceObserver.\n * Falls back silently in browsers that don't support the longtask entry type.\n */\nexport function useLongTasks(enabled: boolean) {\n    const count = useRef(0)\n\n    useEffect(() => {\n        if (!enabled || typeof PerformanceObserver === 'undefined') return\n        try {\n            const observer = new PerformanceObserver((list) => {\n                count.current += list.getEntries().length\n            })\n            observer.observe({ entryTypes: ['longtask'] })\n            return () => observer.disconnect()\n        } catch {\n            // longtask not supported in this browser\n        }\n    }, [enabled])\n\n    const reset = useCallback(() => { count.current = 0 }, [])\n\n    return { count, reset }\n}\n","/**\n * @module react-dev-profiler\n * @description Inline styles for the profiler UI — no external CSS needed.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport type { CSSProperties } from 'react'\n\nexport const s = {\n    wrapper: {\n        display: 'contents',\n    } satisfies CSSProperties,\n\n    panel: {\n        position: 'fixed',\n        zIndex: 99999,\n        background: 'rgba(8, 8, 8, 0.95)',\n        border: '1px solid #222',\n        borderRadius: 10,\n        padding: '10px 14px',\n        minWidth: 220,\n        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.7)',\n        fontFamily: \"'SF Mono', 'Fira Code', monospace\",\n        backdropFilter: 'blur(12px)',\n        userSelect: 'none',\n        color: '#ccc',\n        fontSize: 11,\n    } satisfies CSSProperties,\n\n    panelHeader: {\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        marginBottom: 8,\n        cursor: 'grab',\n        touchAction: 'none',\n    } satisfies CSSProperties,\n\n    panelTitle: {\n        color: '#666',\n        fontSize: 9,\n        fontWeight: 700,\n        letterSpacing: 1.5,\n        textTransform: 'uppercase',\n        display: 'flex',\n        alignItems: 'center',\n        gap: 6,\n    } satisfies CSSProperties,\n\n    instanceBadge: {\n        background: '#222',\n        color: '#888',\n        fontSize: 8,\n        padding: '1px 5px',\n        borderRadius: 4,\n        letterSpacing: 0.5,\n        textTransform: 'none',\n    } satisfies CSSProperties,\n\n    headerActions: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n    } satisfies CSSProperties,\n\n    iconBtn: {\n        background: 'none',\n        border: 'none',\n        color: '#444',\n        cursor: 'pointer',\n        padding: 0,\n        lineHeight: 1,\n        display: 'flex',\n        alignItems: 'center',\n        transition: 'color 0.15s',\n    } satisfies CSSProperties,\n\n    iconBtnActive: {\n        color: '#4ade80',\n    } satisfies CSSProperties,\n\n    closeBtn: {\n        background: 'none',\n        border: 'none',\n        color: '#444',\n        cursor: 'pointer',\n        fontSize: 13,\n        padding: 0,\n        lineHeight: 1,\n    } satisfies CSSProperties,\n\n    body: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 5,\n    } satisfies CSSProperties,\n\n    section: {\n        color: '#444',\n        fontSize: 8,\n        fontWeight: 600,\n        letterSpacing: 1,\n        textTransform: 'uppercase',\n        marginTop: 2,\n    } satisfies CSSProperties,\n\n    separator: {\n        height: 1,\n        background: '#1a1a1a',\n        margin: '2px 0',\n    } satisfies CSSProperties,\n\n    row: {\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        padding: '1px 0',\n    } satisfies CSSProperties,\n\n    rowLabel: {\n        color: '#555',\n        fontSize: 10,\n    } satisfies CSSProperties,\n\n    rowValue: {\n        fontSize: 11,\n        fontWeight: 600,\n    } satisfies CSSProperties,\n\n    miniRow: {\n        display: 'flex',\n        justifyContent: 'space-between',\n        color: '#444',\n        fontSize: 9,\n        marginTop: -2,\n        marginBottom: 2,\n    } satisfies CSSProperties,\n\n    graphWrap: {\n        marginTop: 4,\n    } satisfies CSSProperties,\n\n    toggleBtn: {\n        position: 'fixed',\n        zIndex: 99998,\n        minWidth: 28,\n        height: 24,\n        borderRadius: 7,\n        border: '1px solid #2a2a2a',\n        background: 'rgba(20, 20, 20, 0.9)',\n        cursor: 'pointer',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: '0 6px',\n        backdropFilter: 'blur(8px)',\n    } satisfies CSSProperties,\n\n    toggleFps: {\n        fontFamily: \"'SF Mono', 'Fira Code', monospace\",\n        fontSize: 10,\n        fontWeight: 700,\n        letterSpacing: -0.5,\n    } satisfies CSSProperties,\n\n    footer: {\n        marginTop: 8,\n        color: '#333',\n        fontSize: 8,\n        textAlign: 'center',\n    } satisfies CSSProperties,\n}\n\n/** Flash outline class name applied directly via classList. */\nexport const FLASH_OUTLINE = '2px solid rgba(99, 102, 241, 0.8)'\n","/**\n * @module react-dev-profiler\n * @description The main stats panel — renders all performance metrics in a floating overlay.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport { useState, useEffect, useCallback, useRef, type CSSProperties } from 'react'\nimport { createPortal } from 'react-dom'\nimport { s } from './styles'\nimport { useAnchorPosition, useDraggable, useDomTracker, useRenderRate, useLongTasks } from './hooks'\nimport { type ReactProfilerData, type PanelPosition, type DevStats, HISTORY_SIZE, INITIAL_STATS, percentile } from './types'\n\n/** Rolling bar chart of frame times (last 60 samples). */\nfunction FrameTimeGraph({ history }: { history: number[] }) {\n    const max = Math.max(33, ...history)\n    const w = 140\n    const h = 32\n    const barW = Math.max(1, w / HISTORY_SIZE - 0.5)\n\n    return (\n        <div style={s.graphWrap}>\n            <svg width={w} height={h} style={{ display: 'block' }}>\n                <rect width={w} height={h} rx={3} fill=\"#111\" />\n                {/* 60 fps guideline */}\n                <line x1={0} y1={h - (16.67 / max) * h} x2={w} y2={h - (16.67 / max) * h}\n                    stroke=\"#1a3a1a\" strokeWidth={1} />\n                {/* 30 fps guideline */}\n                <line x1={0} y1={h - (33 / max) * h} x2={w} y2={h - (33 / max) * h}\n                    stroke=\"#3a1a1a\" strokeWidth={1} />\n                {history.map((ms, i) => {\n                    const x = (i / HISTORY_SIZE) * w\n                    const barH = Math.min((ms / max) * h, h)\n                    const color = ms > 33 ? '#ef4444' : ms > 16.67 ? '#f59e0b' : '#4ade80'\n                    return <rect key={i} x={x} y={h - barH} width={barW} height={barH} fill={color} opacity={0.8} rx={0.5} />\n                })}\n            </svg>\n        </div>\n    )\n}\n\n/** Single label → value row used throughout the panel. */\nfunction StatRow({ label, value, sub, color = '#4ade80' }: { label: string, value: string, sub?: string, color?: string }) {\n    return (\n        <div style={s.row}>\n            <span style={s.rowLabel}>{label}</span>\n            <span>\n                <span style={{ ...s.rowValue, color }}>{value}</span>\n                {sub && <span style={{ color: '#444', fontSize: 9, marginLeft: 4 }}>{sub}</span>}\n            </span>\n        </div>\n    )\n}\n\n/** Computes fixed-position styles based on the chosen panel position + drag offset. */\nfunction getPanelStyle(\n    pos: { top: number; left: number },\n    offset: { x: number; y: number },\n    position: PanelPosition,\n): CSSProperties {\n    const style: CSSProperties = {\n        ...s.panel,\n        transform: `translate(${offset.x}px, ${offset.y}px)`,\n    }\n    if (position.startsWith('bottom')) {\n        style.bottom = window.innerHeight - pos.top\n    } else {\n        style.top = pos.top\n    }\n    if (position.endsWith('right')) {\n        style.right = window.innerWidth - pos.left\n    } else {\n        style.left = pos.left\n    }\n    return style\n}\n\n/** Floating stats panel portaled to document.body. */\nexport function DevStatsPanel({\n    targetRef,\n    domTracker,\n    renderRate,\n    longTasks,\n    profilerData,\n    onClose,\n    onReset,\n    position = 'bottom-left',\n    instanceId,\n    instanceCount = 1,\n}: {\n    targetRef: React.RefObject<HTMLDivElement | null>\n    domTracker: ReturnType<typeof useDomTracker>\n    renderRate: ReturnType<typeof useRenderRate>\n    longTasks: ReturnType<typeof useLongTasks>\n    profilerData: React.RefObject<ReactProfilerData>\n    onClose: () => void\n    onReset: () => void\n    position?: PanelPosition\n    instanceId?: string\n    instanceCount?: number\n}) {\n    const [stats, setStats] = useState<DevStats>(INITIAL_STATS)\n    const [exported, setExported] = useState(false)\n    const lastFrame = useRef(performance.now())\n    const frameTimeHistory = useRef<number[]>([])\n    const allFrameTimes = useRef<number[]>([])\n    const pos = useAnchorPosition(targetRef, position)\n    const { offset, handlers: dragHandlers } = useDraggable()\n\n    // Collects frame timing data every rAF, then snapshots stats once per second.\n    useEffect(() => {\n        let animId: number\n        let frameCount = 0\n        let frameTotalMs = 0\n        let lastSecond = performance.now()\n\n        const tick = () => {\n            const now = performance.now()\n            const delta = now - lastFrame.current\n            lastFrame.current = now\n            frameCount++\n            frameTotalMs += delta\n\n            if (now - lastSecond >= 1000) {\n                const avgFrameTime = frameTotalMs / frameCount\n\n                const hist = frameTimeHistory.current\n                if (hist.length >= HISTORY_SIZE) hist.shift()\n                hist.push(avgFrameTime)\n\n                allFrameTimes.current.push(avgFrameTime)\n                const sorted = [...allFrameTimes.current].sort((a, b) => a - b)\n\n                const el = targetRef.current\n                const dims = el ? `${el.offsetWidth} x ${el.offsetHeight}` : '–'\n\n                // Chrome-only: performance.memory exposes JS heap usage\n                const perf = performance as any\n                const mem = perf.memory ? Math.round(perf.memory.usedJSHeapSize / 1024 / 1024) : 0\n\n                setStats({\n                    domMutations: domTracker.mutations.current,\n                    domNodes: domTracker.getNodeCount(),\n                    frameTime: avgFrameTime,\n                    frameTimeMin: sorted[0] ?? 0,\n                    frameTimeMax: sorted[sorted.length - 1] ?? 0,\n                    frameTimeP99: percentile(sorted, 99),\n                    frameTimeHistory: [...hist],\n                    longTasks: longTasks.count.current,\n                    rendersPerSecond: renderRate.rendersPerSecond.current,\n                    memory: mem,\n                    dimensions: dims,\n                    profiler: { ...profilerData.current },\n                })\n\n                frameCount = 0\n                frameTotalMs = 0\n                lastSecond = now\n            }\n            animId = requestAnimationFrame(tick)\n        }\n        animId = requestAnimationFrame(tick)\n        return () => cancelAnimationFrame(animId)\n    }, [targetRef, domTracker, renderRate, longTasks])\n\n    const handleReset = useCallback(() => {\n        frameTimeHistory.current = []\n        allFrameTimes.current = []\n        setStats(INITIAL_STATS)\n        onReset()\n    }, [onReset])\n\n    // Copy current stats as JSON to clipboard.\n    const handleExport = useCallback(() => {\n        const payload = { timestamp: new Date().toISOString(), ...stats }\n        const json = JSON.stringify(payload, null, 2)\n        try {\n            navigator.clipboard.writeText(json).then(() => {\n                setExported(true)\n                setTimeout(() => setExported(false), 1200)\n            })\n        } catch {\n            // Fallback for non-secure contexts\n            const ta = document.createElement('textarea')\n            ta.value = json\n            ta.style.position = 'fixed'\n            ta.style.opacity = '0'\n            document.body.appendChild(ta)\n            ta.select()\n            document.execCommand('copy')\n            document.body.removeChild(ta)\n            setExported(true)\n            setTimeout(() => setExported(false), 1200)\n        }\n    }, [stats])\n\n    // Color thresholds: green = good, amber = warning, red = bad\n    const ftColor = stats.frameTime > 33 ? '#ef4444' : stats.frameTime > 16.67 ? '#f59e0b' : '#4ade80'\n    const rpsColor = stats.rendersPerSecond > 30 ? '#ef4444' : stats.rendersPerSecond > 10 ? '#f59e0b' : '#4ade80'\n    const actualColor = stats.profiler.actualDuration > 16 ? '#ef4444' : stats.profiler.actualDuration > 8 ? '#f59e0b' : '#4ade80'\n    const fps = stats.frameTime > 0 ? Math.round(1000 / stats.frameTime) : 0\n    const memoGain = stats.profiler.baseDuration > 0\n        ? Math.round((1 - stats.profiler.actualDuration / stats.profiler.baseDuration) * 100)\n        : 0\n    const p99Color = stats.frameTimeP99 > 33 ? '#ef4444' : stats.frameTimeP99 > 16.67 ? '#f59e0b' : '#4ade80'\n\n    const exportStyle: CSSProperties = exported\n        ? { ...s.iconBtn, ...s.iconBtnActive }\n        : s.iconBtn\n\n    return createPortal(\n        <div style={getPanelStyle(pos, offset, position)}>\n            <div\n                style={s.panelHeader}\n                {...dragHandlers}\n            >\n                <span style={s.panelTitle}>\n                    Dev Profiler\n                    {instanceCount > 1 && instanceId && (\n                        <span style={s.instanceBadge}>{instanceId}</span>\n                    )}\n                </span>\n                <div style={s.headerActions}>\n                    <button\n                        style={exportStyle}\n                        onClick={handleExport}\n                        title={exported ? 'Copied!' : 'Copy stats to clipboard'}\n                    >\n                        {exported ? (\n                            <svg width=\"10\" height=\"10\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                                <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\"/>\n                            </svg>\n                        ) : (\n                            <svg width=\"10\" height=\"10\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                                <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\"/>\n                                <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\"/>\n                            </svg>\n                        )}\n                    </button>\n                    <button style={s.iconBtn} onClick={handleReset} title=\"Reset counters\">\n                        <svg width=\"10\" height=\"10\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                            <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\"/>\n                        </svg>\n                    </button>\n                    <button style={s.closeBtn} onClick={onClose}>✕</button>\n                </div>\n            </div>\n\n            <div style={s.body}>\n                <span style={s.section}>Rendering</span>\n                <StatRow label=\"Frame time\" value={`${stats.frameTime.toFixed(1)}ms`} sub={`${fps} fps`} color={ftColor} />\n                <FrameTimeGraph history={stats.frameTimeHistory} />\n                <div style={s.miniRow}>\n                    <span>min {stats.frameTimeMin.toFixed(1)}</span>\n                    <span>max {stats.frameTimeMax.toFixed(1)}</span>\n                    <span style={{ color: p99Color }}>p99 {stats.frameTimeP99.toFixed(1)}</span>\n                </div>\n                <StatRow label=\"Renders/s\" value={String(stats.rendersPerSecond)} color={rpsColor} />\n                <StatRow label=\"Long tasks\" value={String(stats.longTasks)} color={stats.longTasks > 0 ? '#f59e0b' : '#4ade80'} />\n\n                <div style={s.separator} />\n                <span style={s.section}>React Profiler</span>\n                <StatRow label=\"Phase\" value={stats.profiler.phase} color=\"#888\" />\n                <StatRow label=\"Render\" value={`${stats.profiler.actualDuration.toFixed(2)}ms`} color={actualColor} />\n                <StatRow label=\"Base (no memo)\" value={`${stats.profiler.baseDuration.toFixed(2)}ms`} color=\"#888\" />\n                <StatRow label=\"Memo gain\" value={`${memoGain}%`} color={memoGain > 50 ? '#4ade80' : memoGain > 20 ? '#f59e0b' : '#ef4444'} />\n                <StatRow label=\"Commits\" value={String(stats.profiler.commitCount)} />\n\n                <div style={s.separator} />\n                <span style={s.section}>DOM</span>\n                <StatRow label=\"Nodes\" value={stats.domNodes.toLocaleString()} />\n                <StatRow label=\"Mutations\" value={String(stats.domMutations)} />\n                <StatRow label=\"Size\" value={stats.dimensions} color=\"#888\" />\n\n                <div style={s.separator} />\n                <span style={s.section}>Memory</span>\n                <StatRow label=\"JS Heap\" value={stats.memory > 0 ? `${stats.memory} MB` : 'N/A'} />\n            </div>\n\n            <div style={s.footer}>Ctrl+I to toggle</div>\n        </div>,\n        document.body\n    )\n}\n","/**\n * @module react-dev-profiler\n * @description Minimal floating button that shows the current FPS at a glance.\n * @author Frederic Denis (billywild87) — https://github.com/billywild87\n * @license MIT\n */\n\nimport { useState, useEffect, useRef, type CSSProperties } from 'react'\nimport { createPortal } from 'react-dom'\nimport { s } from './styles'\nimport { useAnchorPosition } from './hooks'\nimport type { PanelPosition } from './types'\n\n/** Computes fixed-position styles based on the chosen panel position. */\nfunction getButtonStyle(pos: { top: number; left: number }, position: PanelPosition): CSSProperties {\n    const style: CSSProperties = { ...s.toggleBtn }\n    if (position.startsWith('bottom')) {\n        style.bottom = window.innerHeight - pos.top + 8\n    } else {\n        style.top = pos.top + 8\n    }\n    if (position.endsWith('right')) {\n        style.right = window.innerWidth - pos.left\n    } else {\n        style.left = pos.left\n    }\n    return style\n}\n\n/** Small floating pill showing live FPS — click to open the full panel. */\nexport function ToggleButton({\n    targetRef,\n    onClick,\n    position = 'bottom-left',\n}: {\n    targetRef: React.RefObject<HTMLDivElement | null>\n    onClick: () => void\n    position?: PanelPosition\n}) {\n    const pos = useAnchorPosition(targetRef, position)\n    const [fps, setFps] = useState(0)\n    const lastFrame = useRef(performance.now())\n\n    useEffect(() => {\n        let animId: number\n        let count = 0\n        let lastSecond = performance.now()\n\n        const tick = () => {\n            const now = performance.now()\n            lastFrame.current = now\n            count++\n            if (now - lastSecond >= 1000) {\n                setFps(count)\n                count = 0\n                lastSecond = now\n            }\n            animId = requestAnimationFrame(tick)\n        }\n        animId = requestAnimationFrame(tick)\n        return () => cancelAnimationFrame(animId)\n    }, [])\n\n    const fpsColor = fps < 30 ? '#ef4444' : fps < 55 ? '#f59e0b' : '#4ade80'\n\n    return createPortal(\n        <button\n            onClick={onClick}\n            title=\"Dev Profiler (Ctrl+I)\"\n            style={getButtonStyle(pos, position)}\n        >\n            <span style={{ ...s.toggleFps, color: fpsColor }}>{fps}</span>\n        </button>,\n        document.body\n    )\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","import_react_dom","import_jsx_runtime","import_jsx_runtime"]}