react-dev-profiler 1.1.0 → 1.2.0

package/README.md

@@ -88,11 +88,12 @@ All observers are created lazily (only when the panel is open) and cleaned up on
 
 ### `<DevProfiler>`
 
-| Prop       | Type            | Default         | Description                              |
-| ---------- | --------------- | --------------- | ---------------------------------------- |
-| `children` | `ReactNode`     | —               | The subtree to profile                   |
-| `position` | `PanelPosition` | `'bottom-left'` | Where to anchor the panel                |
-| `id`       | `string`        | auto-generated  | Instance label (shown with multi-panels) |
+| Prop          | Type            | Default         | Description                                |
+| ------------- | --------------- | --------------- | ------------------------------------------ |
+| `children`    | `ReactNode`     | —               | The subtree to profile                     |
+| `position`    | `PanelPosition` | `'bottom-left'` | Where to anchor the panel                  |
+| `id`          | `string`        | auto-generated  | Instance label (shown with multi-panels)   |
+| `accentColor` | `string`        | `'#6366f1'`     | Accent color for the toggle button's glow  |
 
 ### `PanelPosition`
 

package/dist/index.cjs

@@ -55,6 +55,25 @@ function percentile(sorted, p) {
   return sorted[Math.max(0, idx)];
 }
 
+// src/constants.ts
+var COLOR_GREEN = "#4ade80";
+var COLOR_AMBER = "#f59e0b";
+var COLOR_RED = "#ef4444";
+var COLOR_MUTED = "#888";
+var COLOR_DIM = "#444";
+var COLOR_ACCENT = "#6366f1";
+var FPS_60_MS = 16.67;
+var FPS_30_MS = 33;
+var GRAPH_BG = "#111";
+var GRAPH_60FPS_LINE = "#1a3a1a";
+var GRAPH_30FPS_LINE = "#3a1a1a";
+var PANEL_GAP = 8;
+function ftColor(ms) {
+  if (ms > FPS_30_MS) return COLOR_RED;
+  if (ms > FPS_60_MS) return COLOR_AMBER;
+  return COLOR_GREEN;
+}
+
 // src/env.ts
 var __DEV__ = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
 
@@ -101,7 +120,7 @@ var s = {
   },
   instanceBadge: {
     background: "#222",
-    color: "#888",
+    color: COLOR_MUTED,
     fontSize: 8,
     padding: "1px 5px",
     borderRadius: 4,
@@ -116,7 +135,7 @@ var s = {
   iconBtn: {
     background: "none",
     border: "none",
-    color: "#444",
+    color: COLOR_DIM,
     cursor: "pointer",
     padding: 4,
     margin: -4,
@@ -126,12 +145,12 @@ var s = {
     transition: "color 0.15s"
   },
   iconBtnActive: {
-    color: "#4ade80"
+    color: COLOR_GREEN
   },
   closeBtn: {
     background: "none",
     border: "none",
-    color: "#444",
+    color: COLOR_DIM,
     cursor: "pointer",
     fontSize: 13,
     padding: 4,
@@ -144,7 +163,7 @@ var s = {
     gap: 5
   },
   section: {
-    color: "#444",
+    color: COLOR_DIM,
     fontSize: 8,
     fontWeight: 600,
     letterSpacing: 1,
@@ -173,7 +192,7 @@ var s = {
   miniRow: {
     display: "flex",
     justifyContent: "space-between",
-    color: "#444",
+    color: COLOR_DIM,
     fontSize: 9,
     marginTop: -2,
     marginBottom: 2
@@ -226,9 +245,9 @@ var s = {
     textAlign: "center"
   }
 };
-var FLASH_OUTLINE = "2px solid rgba(99, 102, 241, 0.8)";
+var FLASH_OUTLINE = `2px solid ${COLOR_ACCENT}cc`;
 
-// src/hooks.ts
+// src/utils.ts
 function getEffectiveRect(el) {
   const rect = el.getBoundingClientRect();
   if (rect.width > 0 || rect.height > 0) return rect;
@@ -255,6 +274,8 @@ function getObservableChildren(el) {
   }
   return result;
 }
+
+// src/hooks.ts
 function useAnchorPosition(ref, position = "bottom-left") {
   const [pos, setPos] = (0, import_react.useState)({ top: 0, left: 0 });
   (0, import_react.useEffect)(() => {
@@ -400,22 +421,24 @@ function useLongTasks(enabled) {
 // src/DevStatsPanel.tsx
 var import_react2 = require("react");
 var import_react_dom = require("react-dom");
+
+// src/FrameTimeGraph.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function FrameTimeGraph({ history }) {
-  const max = Math.max(33, ...history);
+  const max = Math.max(FPS_30_MS, ...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", { 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)("rect", { width: w, height: h, rx: 3, fill: GRAPH_BG }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "line",
       {
         x1: 0,
-        y1: h - 16.67 / max * h,
+        y1: h - FPS_60_MS / max * h,
         x2: w,
-        y2: h - 16.67 / max * h,
-        stroke: "#1a3a1a",
+        y2: h - FPS_60_MS / max * h,
+        stroke: GRAPH_60FPS_LINE,
         strokeWidth: 1
       }
     ),
@@ -423,31 +446,36 @@ function FrameTimeGraph({ history }) {
       "line",
       {
         x1: 0,
-        y1: h - 33 / max * h,
+        y1: h - FPS_30_MS / max * h,
         x2: w,
-        y2: h - 33 / max * h,
-        stroke: "#3a1a1a",
+        y2: h - FPS_30_MS / max * h,
+        stroke: GRAPH_30FPS_LINE,
         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);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x, y: h - barH, width: barW, height: barH, fill: ftColor(ms), opacity: 0.8, rx: 0.5 }, i);
     })
   ] }) });
 }
-function StatRow({ label, value, sub, color = "#4ade80" }) {
-  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", { style: { ...s.rowValue, color }, children: value }),
-      sub && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#444", fontSize: 9, marginLeft: 4 }, children: sub })
+
+// src/StatRow.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function StatRow({ label, value, sub, color = COLOR_GREEN }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: s.row, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: s.rowLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { ...s.rowValue, color }, children: value }),
+      sub && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: COLOR_DIM, fontSize: 9, marginLeft: 4 }, children: sub })
     ] })
   ] });
 }
-var GAP = 8;
+
+// src/DevStatsPanel.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var GAP = PANEL_GAP;
 function getPanelStyle(pos, offset, position) {
   const style = {
     ...s.panel,
@@ -551,71 +579,71 @@ function DevStatsPanel({
     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 frameTColor = ftColor(stats.frameTime);
+  const rpsColor = stats.rendersPerSecond > 30 ? COLOR_RED : stats.rendersPerSecond > 10 ? COLOR_AMBER : COLOR_GREEN;
+  const actualColor = stats.profiler.actualDuration > 16 ? COLOR_RED : stats.profiler.actualDuration > 8 ? COLOR_AMBER : COLOR_GREEN;
   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 p99Color = ftColor(stats.frameTimeP99);
   const exportStyle = exported ? { ...s.iconBtn, ...s.iconBtnActive } : s.iconBtn;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: getPanelStyle(pos, offset, position), ...dragHandlers, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: s.panelHeader, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: s.panelTitle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: getPanelStyle(pos, offset, position), ...dragHandlers, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s.panelHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: s.panelTitle, children: [
           "Dev Profiler",
-          instanceCount > 1 && instanceId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.instanceBadge, children: instanceId })
+          instanceCount > 1 && instanceId && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: s.instanceBadge, children: instanceId })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: s.headerActions, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s.headerActions, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               style: exportStyle,
               onClick: handleExport,
               title: exported ? "Exported!" : "Export stats as JSON",
-              children: exported ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "3.5 8.5 6.5 11.5 12.5 4.5" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 2v8M4 7l4 4 4-4M2 14h12" }) })
+              children: exported ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "3.5 8.5 6.5 11.5 12.5 4.5" }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 2v8M4 7l4 4 4-4M2 14h12" }) })
             }
           ),
-          /* @__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_runtime3.jsx)("button", { style: s.iconBtn, onClick: handleReset, title: "Reset counters", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("button", { style: s.closeBtn, onClick: onClose, children: "\u2715" })
         ] })
       ] }),
-      /* @__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", { style: s.miniRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s.body, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: s.section, children: "Rendering" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Frame time", value: `${stats.frameTime.toFixed(1)}ms`, sub: `${fps} fps`, color: frameTColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FrameTimeGraph, { history: stats.frameTimeHistory }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s.miniRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
             "min ",
             stats.frameTimeMin.toFixed(1)
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
             "max ",
             stats.frameTimeMax.toFixed(1)
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: p99Color }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.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", { 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", { 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", { 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_runtime3.jsx)(StatRow, { label: "Renders/s", value: String(stats.rendersPerSecond), color: rpsColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Long tasks", value: String(stats.longTasks), color: stats.longTasks > 0 ? COLOR_AMBER : COLOR_GREEN }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: s.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: s.section, children: "React Profiler" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Phase", value: stats.profiler.phase, color: COLOR_MUTED }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Render", value: `${stats.profiler.actualDuration.toFixed(2)}ms`, color: actualColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Base (no memo)", value: `${stats.profiler.baseDuration.toFixed(2)}ms`, color: COLOR_MUTED }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Memo gain", value: `${memoGain}%`, color: memoGain > 50 ? COLOR_GREEN : memoGain > 20 ? COLOR_AMBER : COLOR_RED }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Commits", value: String(stats.profiler.commitCount) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: s.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: s.section, children: "DOM" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Nodes", value: stats.domNodes.toLocaleString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Mutations", value: String(stats.domMutations) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "Size", value: stats.dimensions, color: COLOR_MUTED }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: s.separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: s.section, children: "Memory" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatRow, { label: "JS Heap", value: stats.memory > 0 ? `${stats.memory} MB` : "N/A" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: s.footer, children: "Ctrl+I to toggle" })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: s.footer, children: "Ctrl+I to toggle" })
     ] }),
     document.body
   );
@@ -624,8 +652,8 @@ function DevStatsPanel({
 // src/ToggleButton.tsx
 var import_react3 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var GAP2 = 8;
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GAP2 = PANEL_GAP;
 function getButtonStyle(pos, position) {
   const style = { ...s.toggleBtn };
   if (position.startsWith("bottom")) {
@@ -644,7 +672,7 @@ function ToggleButton({
   targetRef,
   onClick,
   position = "bottom-left",
-  accentColor = "#6366f1"
+  accentColor = COLOR_ACCENT
 }) {
   const pos = useAnchorPosition(targetRef, position);
   const [fps, setFps] = (0, import_react3.useState)(0);
@@ -666,16 +694,16 @@ function ToggleButton({
     return () => cancelAnimationFrame(animId);
   }, []);
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "button",
       {
         onClick,
         title: "Dev Profiler (Ctrl+I)",
         style: getButtonStyle(pos, position),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { ...s.toggleDot, background: accentColor, boxShadow: `0 0 4px ${accentColor}` } }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: s.toggleFps, children: fps }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: s.toggleLabel, children: "fps" })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { ...s.toggleDot, background: accentColor, boxShadow: `0 0 4px ${accentColor}` } }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: s.toggleFps, children: fps }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: s.toggleLabel, children: "fps" })
         ]
       }
     ),
@@ -684,7 +712,7 @@ function ToggleButton({
 }
 
 // src/DevProfiler.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var TOGGLE_EVENT = "devprofiler:toggle";
 var BOUND_KEY = "__devprofiler_bound";
 if (typeof window !== "undefined" && __DEV__ && !window[BOUND_KEY]) {
@@ -702,7 +730,7 @@ function DevProfiler({
   children,
   position = "bottom-left",
   id,
-  accentColor = "#6366f1"
+  accentColor = COLOR_ACCENT
 }) {
   const wrapperRef = (0, import_react4.useRef)(null);
   const [open, setOpen] = (0, import_react4.useState)(false);
@@ -739,11 +767,11 @@ function DevProfiler({
     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, 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, accentColor }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  if (!__DEV__) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: wrapperRef, style: { display: "contents" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Profiler, { id: "DevProfiler", onRender, children }),
+    !open && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToggleButton, { targetRef: wrapperRef, onClick: toggle, position, accentColor }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       DevStatsPanel,
       {
         targetRef: wrapperRef,
@@ -770,6 +798,12 @@ function DevProfiler({
  * @author Frederic Denis (billywild87) — https://github.com/billywild87
  * @license MIT
  */
+/**
+ * @module react-dev-profiler
+ * @description Shared colors and thresholds used across the profiler UI.
+ * @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.
@@ -782,12 +816,30 @@ function DevProfiler({
  * @author Frederic Denis (billywild87) — https://github.com/billywild87
  * @license MIT
  */
+/**
+ * @module react-dev-profiler
+ * @description Pure utility functions for DOM measurement.
+ * @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 Rolling bar chart of frame times (last 60 samples).
+ * @author Frederic Denis (billywild87) — https://github.com/billywild87
+ * @license MIT
+ */
+/**
+ * @module react-dev-profiler
+ * @description Single label/value row used throughout the profiler panel.
+ * @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.