react-dev-profiler 1.0.1 → 1.1.0

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,32 +60,228 @@ 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,
+    cursor: "grab",
+    touchAction: "none"
+  },
+  panelHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  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: 4,
+    margin: -4,
+    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: 4,
+    margin: -4,
+    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,
+    height: 26,
+    borderRadius: 13,
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    background: "rgba(28, 28, 30, 0.92)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "0 10px 0 8px",
+    backdropFilter: "blur(20px)",
+    WebkitBackdropFilter: "blur(20px)",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.4), inset 0 0.5px 0 rgba(255, 255, 255, 0.06)"
+  },
+  toggleDot: {
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    flexShrink: 0
+  },
+  toggleFps: {
+    fontFamily: "'SF Mono', 'Fira Code', monospace",
+    fontSize: 11,
+    fontWeight: 600,
+    color: "rgba(255, 255, 255, 0.85)",
+    letterSpacing: -0.3,
+    lineHeight: 1
+  },
+  toggleLabel: {
+    fontFamily: "'SF Mono', 'Fira Code', monospace",
+    fontSize: 9,
+    fontWeight: 500,
+    color: "rgba(255, 255, 255, 0.35)",
+    letterSpacing: 0,
+    textTransform: "lowercase"
+  },
+  footer: {
+    marginTop: 8,
+    color: "#333",
+    fontSize: 8,
+    textAlign: "center"
+  }
+};
+var FLASH_OUTLINE = "2px solid rgba(99, 102, 241, 0.8)";
+
+// src/hooks.ts
+function getEffectiveRect(el) {
+  const rect = el.getBoundingClientRect();
+  if (rect.width > 0 || rect.height > 0) return rect;
+  const children = el.children;
+  if (children.length === 0) return rect;
+  let top = Infinity, left = Infinity, bottom = -Infinity, right = -Infinity;
+  for (let i = 0; i < children.length; i++) {
+    const cr = children[i].getBoundingClientRect();
+    if (cr.width === 0 && cr.height === 0) continue;
+    top = Math.min(top, cr.top);
+    left = Math.min(left, cr.left);
+    bottom = Math.max(bottom, cr.bottom);
+    right = Math.max(right, cr.right);
+  }
+  if (top === Infinity) return rect;
+  return new DOMRect(left, top, right - left, bottom - top);
+}
+function getObservableChildren(el) {
+  const result = [];
+  for (let i = 0; i < el.children.length; i++) {
+    const child = el.children[i];
+    const r = child.getBoundingClientRect();
+    if (r.width > 0 || r.height > 0) result.push(child);
+  }
+  return result;
+}
 function useAnchorPosition(ref, position = "bottom-left") {
   const [pos, setPos] = (0, import_react.useState)({ top: 0, left: 0 });
   (0, import_react.useEffect)(() => {
     if (!ref.current) return;
+    const el = ref.current;
     const update = () => {
-      if (!ref.current) return;
-      const rect = ref.current.getBoundingClientRect();
-      const margin = 8;
+      const rect = getEffectiveRect(el);
       switch (position) {
         case "top-left":
-          setPos({ top: rect.top + margin, left: rect.left + margin });
+          setPos({ top: rect.top, left: rect.left });
           break;
         case "top-right":
-          setPos({ top: rect.top + margin, left: rect.right - margin });
+          setPos({ top: rect.top, left: rect.right });
           break;
         case "bottom-right":
-          setPos({ top: rect.bottom - margin, left: rect.right - margin });
+          setPos({ top: rect.bottom, left: rect.right });
           break;
         case "bottom-left":
         default:
-          setPos({ top: rect.bottom - margin, left: rect.left + margin });
+          setPos({ top: rect.bottom, left: rect.left });
           break;
       }
     };
+    update();
     const observer = new ResizeObserver(update);
-    observer.observe(ref.current);
+    observer.observe(el);
+    for (const child of getObservableChildren(el)) observer.observe(child);
     observer.observe(document.documentElement);
     return () => observer.disconnect();
   }, [ref, position]);
@@ -99,9 +292,10 @@ function useDraggable() {
   const dragging = (0, import_react.useRef)(false);
   const start = (0, import_react.useRef)({ x: 0, y: 0 });
   const onPointerDown = (0, import_react.useCallback)((e) => {
+    if (e.target.closest("button, a, [data-no-drag]")) return;
     dragging.current = true;
     start.current = { x: e.clientX - offset.x, y: e.clientY - offset.y };
-    e.target.setPointerCapture(e.pointerId);
+    e.currentTarget.setPointerCapture(e.pointerId);
   }, [offset]);
   const onPointerMove = (0, import_react.useCallback)((e) => {
     if (!dragging.current) return;
@@ -121,21 +315,13 @@ function useDomTracker(wrapperRef, enabled) {
   const dirty = (0, import_react.useRef)(true);
   (0, import_react.useEffect)(() => {
     if (!enabled || !wrapperRef.current) return;
-    const observer = new MutationObserver((records) => {
-      let realMutation = false;
-      for (const record of records) {
-        if (record.type === "attributes" && record.attributeName === "class") continue;
-        realMutation = true;
-      }
-      if (realMutation) {
-        mutations.current++;
-        dirty.current = true;
-      }
+    const observer = new MutationObserver(() => {
+      mutations.current++;
+      dirty.current = true;
     });
     observer.observe(wrapperRef.current, {
       childList: true,
       subtree: true,
-      attributes: true,
       attributeFilter: ["style"]
     });
     return () => observer.disconnect();
@@ -176,14 +362,19 @@ function useRenderFlash(wrapperRef, open) {
   const mutationCount = (0, import_react.useRef)(0);
   (0, import_react.useEffect)(() => {
     if (!open || !wrapperRef.current) return;
+    const wrapper = wrapperRef.current;
     const observer = new MutationObserver(() => {
       mutationCount.current++;
-      if (!wrapperRef.current || mutationCount.current <= 1) return;
-      const el = wrapperRef.current;
-      el.classList.add(DevProfiler_default.flash);
-      setTimeout(() => el.classList.remove(DevProfiler_default.flash), 150);
+      if (mutationCount.current <= 1) return;
+      const target = getObservableChildren(wrapper)[0] ?? wrapper;
+      target.style.outline = FLASH_OUTLINE;
+      target.style.outlineOffset = "-2px";
+      setTimeout(() => {
+        target.style.outline = "";
+        target.style.outlineOffset = "";
+      }, 150);
     });
-    observer.observe(wrapperRef.current, { childList: true, subtree: true });
+    observer.observe(wrapper, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [wrapperRef, open]);
 }
@@ -215,7 +406,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,27 +439,29 @@ 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 })
     ] })
   ] });
 }
+var GAP = 8;
 function getPanelStyle(pos, offset, position) {
   const style = {
+    ...s.panel,
     transform: `translate(${offset.x}px, ${offset.y}px)`
   };
   if (position.startsWith("bottom")) {
-    style.bottom = window.innerHeight - pos.top;
+    style.bottom = window.innerHeight - pos.top + GAP;
   } else {
-    style.top = pos.top;
+    style.top = pos.top + GAP;
   }
   if (position.endsWith("right")) {
-    style.right = window.innerWidth - pos.left;
+    style.right = window.innerWidth - pos.left + GAP;
   } else {
-    style.left = pos.left;
+    style.left = pos.left + GAP;
   }
   return style;
 }
@@ -310,7 +503,8 @@ function DevStatsPanel({
         allFrameTimes.current.push(avgFrameTime);
         const sorted = [...allFrameTimes.current].sort((a, b) => a - b);
         const el = targetRef.current;
-        const dims = el ? `${el.offsetWidth} x ${el.offsetHeight}` : "\u2013";
+        const r = el ? getEffectiveRect(el) : null;
+        const dims = r ? `${Math.round(r.width)} x ${Math.round(r.height)}` : "\u2013";
         const perf = performance;
         const mem = perf.memory ? Math.round(perf.memory.usedJSHeapSize / 1024 / 1024) : 0;
         setStats({
@@ -345,23 +539,17 @@ function DevStatsPanel({
   const handleExport = (0, import_react2.useCallback)(() => {
     const payload = { timestamp: (/* @__PURE__ */ new Date()).toISOString(), ...stats };
     const json = JSON.stringify(payload, null, 2);
-    try {
-      navigator.clipboard.writeText(json).then(() => {
-        setExported(true);
-        setTimeout(() => setExported(false), 1200);
-      });
-    } catch {
-      const ta = document.createElement("textarea");
-      ta.value = json;
-      ta.style.position = "fixed";
-      ta.style.opacity = "0";
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-      setExported(true);
-      setTimeout(() => setExported(false), 1200);
-    }
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `devprofiler-${Date.now()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    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";
@@ -369,42 +557,33 @@ 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",
-        {
-          className: DevProfiler_default.panelHeader,
-          ...dragHandlers,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: DevProfiler_default.panelTitle, children: [
-              "Dev Profiler",
-              instanceCount > 1 && instanceId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.instanceBadge, children: instanceId })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DevProfiler_default.headerActions, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "button",
-                {
-                  className: `${DevProfiler_default.exportBtn} ${exported ? DevProfiler_default.exportBtnActive : ""}`,
-                  onClick: handleExport,
-                  title: exported ? "Copied!" : "Copy stats to clipboard",
-                  children: exported ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25z" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25z" })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: DevProfiler_default.resetBtn, onClick: handleReset, title: "Reset counters", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.6A6 6 0 0 0 2.07 7.5a1 1 0 1 1-1.97-.36A8 8 0 0 1 13 3.35V2a1 1 0 0 1 1-1zM2 15a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 0 2H4.4A6 6 0 0 0 13.93 8.5a1 1 0 1 1 1.97.36A8 8 0 0 1 3 12.65V14a1 1 0 0 1-1 1z" }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: DevProfiler_default.closeBtn, onClick: onClose, children: "\u2715" })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DevProfiler_default.body, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: DevProfiler_default.section, children: "Rendering" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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: [
+          "Dev Profiler",
+          instanceCount > 1 && instanceId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.instanceBadge, children: instanceId })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: s.headerActions, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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" }) })
+            }
+          ),
+          /* @__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", { 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 +599,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
   );
@@ -446,35 +625,35 @@ function DevStatsPanel({
 var import_react3 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var GAP2 = 8;
 function getButtonStyle(pos, position) {
-  const style = {};
+  const style = { ...s.toggleBtn };
   if (position.startsWith("bottom")) {
-    style.bottom = window.innerHeight - pos.top + 8;
+    style.bottom = window.innerHeight - pos.top + GAP2;
   } else {
-    style.top = pos.top + 8;
+    style.top = pos.top + GAP2;
   }
   if (position.endsWith("right")) {
-    style.right = window.innerWidth - pos.left;
+    style.right = window.innerWidth - pos.left + GAP2;
   } else {
-    style.left = pos.left;
+    style.left = pos.left + GAP2;
   }
   return style;
 }
 function ToggleButton({
   targetRef,
   onClick,
-  position = "bottom-left"
+  position = "bottom-left",
+  accentColor = "#6366f1"
 }) {
   const pos = useAnchorPosition(targetRef, position);
   const [fps, setFps] = (0, import_react3.useState)(0);
-  const lastFrame = (0, import_react3.useRef)(performance.now());
   (0, import_react3.useEffect)(() => {
     let animId;
     let count = 0;
     let lastSecond = performance.now();
     const tick = () => {
       const now = performance.now();
-      lastFrame.current = now;
       count++;
       if (now - lastSecond >= 1e3) {
         setFps(count);
@@ -486,16 +665,18 @@ function ToggleButton({
     animId = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(animId);
   }, []);
-  const fpsColor = fps < 30 ? "#ef4444" : fps < 55 ? "#f59e0b" : "#4ade80";
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "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.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" })
+        ]
       }
     ),
     document.body
@@ -520,7 +701,8 @@ var activeInstances = /* @__PURE__ */ new Set();
 function DevProfiler({
   children,
   position = "bottom-left",
-  id
+  id,
+  accentColor = "#6366f1"
 }) {
   const wrapperRef = (0, import_react4.useRef)(null);
   const [open, setOpen] = (0, import_react4.useState)(false);
@@ -558,9 +740,9 @@ 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)(ToggleButton, { targetRef: wrapperRef, onClick: toggle, position, accentColor }),
     open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       DevStatsPanel,
       {
@@ -594,6 +776,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.