@react-perfscope/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,2991 @@
+// src/shadow-mount.ts
+import { render } from "preact";
+var HOST_MARKER = "data-perfscope-host";
+var SCROLLBAR_CSS = `
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background: #3a3a3a;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: #555;
+  background-clip: padding-box;
+  border: 2px solid transparent;
+}
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+/* Firefox-only fallback. Chrome 121+ supports the standard scrollbar-width/
+   -color too, but setting them there DISABLES the ::-webkit-scrollbar styling
+   above (losing our 8px rounded thumb). Gate on lack of webkit support so only
+   non-webkit engines (Firefox) pick these up. */
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #3a3a3a transparent;
+  }
+}
+`;
+function mountShadow(vnode, opts = {}) {
+  const parent = opts.parent ?? document.body;
+  const host = document.createElement("div");
+  host.setAttribute(HOST_MARKER, "");
+  const root = host.attachShadow({ mode: "open" });
+  parent.appendChild(host);
+  render(vnode, root);
+  const style = document.createElement("style");
+  style.textContent = SCROLLBAR_CSS;
+  root.appendChild(style);
+  let torn = false;
+  return () => {
+    if (torn) return;
+    torn = true;
+    try {
+      render(null, root);
+    } catch {
+    }
+    if (host.parentNode) host.parentNode.removeChild(host);
+  };
+}
+
+// src/app.tsx
+import { useState as useState4, useRef as useRef3, useEffect as useEffect2 } from "preact/hooks";
+
+// src/i18n.ts
+import { h, createContext } from "preact";
+import { useContext, useState, useCallback, useMemo } from "preact/hooks";
+var STORAGE_KEY = "react-perfscope-lang";
+var en = {
+  save: "Save",
+  saveAria: "Save recording",
+  saveTitle: "Save recording as JSON",
+  closeAria: "Close panel",
+  noSignals: "No signals recorded.",
+  sort: "Sort",
+  sortChronological: "chronological",
+  sortSeverity: "severity (worst first)",
+  groupBy: "Group by",
+  groupChronological: "chronological",
+  groupComponent: "component",
+  groupSource: "source",
+  groupCommit: "cascade (commit)",
+  timeline: "timeline",
+  value: "value",
+  started: "started",
+  duration: "duration",
+  size: "size",
+  bytes: "bytes",
+  renderBlocking: "render-blocking",
+  metric: "metric",
+  component: "component",
+  reason: "reason",
+  at: "at",
+  ended: "ended",
+  yes: "yes",
+  no: "no",
+  rect: "rect",
+  noSourceRects: "No source rects.",
+  noStack: "No stack captured.",
+  resolvingSourceMaps: "resolving source maps\u2026",
+  anonymous: "(anonymous)",
+  blocking: "blocking",
+  sourceCount: (n) => `${n} source(s)`,
+  moreItems: (n) => `+ ${n} more`,
+  startRecording: "Start recording",
+  stopRecording: "Stop recording",
+  rec: "rec",
+  signalsTitle: (n, kind) => `${n} ${kind} signals`,
+  noTimeBound: "No time-bound signals to plot.",
+  timeAxis: "time",
+  heapLabel: "heap",
+  heapUnsupported: "heap size unavailable (Chromium only)",
+  heapExtensionHint: "Heap size includes browser extensions injected into the page (e.g. React DevTools), so it can rise even while your app is idle. For app-only measurement, record in an incognito window or a profile with extensions disabled.",
+  heapTrendLabel: (cls) => cls === "leak-suspected" ? "leak suspected" : cls === "growing" ? "growing" : "stable",
+  fpsLabel: "fps",
+  fpsUnsupported: "frame timing unavailable",
+  fpsBadge: (minFps, dropped) => `min ${minFps}fps \xB7 ${dropped} dropped`,
+  fpsWorst: (ms) => `worst ${ms}ms`,
+  topRenderers: "Top renderers \xB7 by total time",
+  moreComponents: (n) => `+ ${n} more component${n === 1 ? "" : "s"}`,
+  rendererDetail: (c, n, total, max) => `${c} \xB7 ${n} renders \xB7 total ${total.toFixed(1)}ms \xB7 max ${max.toFixed(1)}ms`,
+  language: "Language",
+  panelRegion: "react-perfscope panel",
+  ratingLabel: (rating) => `rating: ${rating}`,
+  severityLabel: (sev) => `severity: ${sev}`,
+  worstLabel: (sev) => `worst: ${sev}`,
+  kindLabel: (kind) => kind,
+  reasonMounted: "mounted",
+  reasonState: "state changed",
+  reasonProps: "props changed",
+  reasonParent: "parent re-rendered",
+  cascadeRoot: "root",
+  changedProps: "changed",
+  unnecessaryRenders: (n) => `${n} unnecessary render${n === 1 ? "" : "s"} (parent-driven)`,
+  scripts: "scripts",
+  invoker: "invoker",
+  source: "source",
+  blockingTime: "blocking",
+  noScripts: "No script attribution (LoAF unsupported).",
+  hotFunctions: "your hot functions",
+  hotFunctionsHint: "sampled time spent in your own source",
+  interactionEvent: "event",
+  inputDelay: "input delay",
+  processingTime: "processing",
+  presentation: "presentation",
+  interactionThresholdHint: "Only interactions \u226540ms are shown \u2014 INP surfaces the slow ones; fast clicks are omitted."
+};
+var KIND_LABELS_KO = {
+  render: "\uB80C\uB354",
+  "layout-shift": "\uB808\uC774\uC544\uC6C3 \uC774\uB3D9",
+  "long-task": "\uAE34 \uC791\uC5C5",
+  "forced-reflow": "\uAC15\uC81C \uB9AC\uD50C\uB85C\uC6B0",
+  network: "\uB124\uD2B8\uC6CC\uD06C",
+  interaction: "\uC0C1\uD638\uC791\uC6A9",
+  "web-vital": "\uC6F9 \uBC14\uC774\uD0C8"
+};
+var ko = {
+  save: "\uC800\uC7A5",
+  saveAria: "\uB179\uD654 \uC800\uC7A5",
+  saveTitle: "\uB179\uD654\uB97C JSON\uC73C\uB85C \uC800\uC7A5",
+  closeAria: "\uD328\uB110 \uB2EB\uAE30",
+  noSignals: "\uB179\uD654\uB41C \uC2DC\uADF8\uB110\uC774 \uC5C6\uC5B4\uC694.",
+  sort: "\uC815\uB82C",
+  sortChronological: "\uC2DC\uAC04\uC21C",
+  sortSeverity: "\uC2EC\uAC01\uB3C4\uC21C (\uB192\uC740 \uAC83\uBD80\uD130)",
+  groupBy: "\uADF8\uB8F9\uD654",
+  groupChronological: "\uC2DC\uAC04\uC21C",
+  groupComponent: "\uCEF4\uD3EC\uB10C\uD2B8",
+  groupSource: "\uC18C\uC2A4",
+  groupCommit: "\uC5F0\uC1C4 (\uCEE4\uBC0B)",
+  timeline: "\uD0C0\uC784\uB77C\uC778",
+  value: "\uAC12",
+  started: "\uC2DC\uC791",
+  duration: "\uC9C0\uC18D\uC2DC\uAC04",
+  size: "\uD06C\uAE30",
+  bytes: "\uBC14\uC774\uD2B8",
+  renderBlocking: "\uB80C\uB354 \uCC28\uB2E8",
+  metric: "\uC9C0\uD45C",
+  component: "\uCEF4\uD3EC\uB10C\uD2B8",
+  reason: "\uC6D0\uC778",
+  at: "\uC2DC\uC810",
+  ended: "\uC885\uB8CC",
+  yes: "\uC608",
+  no: "\uC544\uB2C8\uC624",
+  rect: "\uC601\uC5ED",
+  noSourceRects: "\uC18C\uC2A4 \uC601\uC5ED\uC774 \uC5C6\uC5B4\uC694.",
+  noStack: "\uCEA1\uCC98\uB41C \uC2A4\uD0DD\uC774 \uC5C6\uC5B4\uC694.",
+  resolvingSourceMaps: "\uC18C\uC2A4\uB9F5 \uD574\uC11D \uC911\u2026",
+  anonymous: "(\uC775\uBA85)",
+  blocking: "\uCC28\uB2E8",
+  sourceCount: (n) => `\uC18C\uC2A4 ${n}\uAC1C`,
+  moreItems: (n) => `\uC678 ${n}\uAC1C \uB354`,
+  startRecording: "\uB179\uD654 \uC2DC\uC791",
+  stopRecording: "\uB179\uD654 \uC885\uB8CC",
+  rec: "\uB179\uD654",
+  signalsTitle: (n, kind) => `${kind} \uC2DC\uADF8\uB110 ${n}\uAC1C`,
+  noTimeBound: "\uD45C\uC2DC\uD560 \uC2DC\uAC04 \uAE30\uBC18 \uC2DC\uADF8\uB110\uC774 \uC5C6\uC5B4\uC694.",
+  timeAxis: "\uC2DC\uAC04",
+  heapLabel: "\uD799",
+  heapUnsupported: "\uD799 \uCE21\uC815 \uBBF8\uC9C0\uC6D0 (\uD06C\uB86C \uC804\uC6A9)",
+  heapExtensionHint: "\uD799 \uD06C\uAE30\uC5D4 \uD398\uC774\uC9C0\uC5D0 \uC8FC\uC785\uB41C \uBE0C\uB77C\uC6B0\uC800 \uD655\uC7A5(\uC608: React DevTools) \uBA54\uBAA8\uB9AC\uB3C4 \uD3EC\uD568\uB3FC\uC694. \uADF8\uB798\uC11C \uC571\uC774 idle\uC774\uC5B4\uB3C4 \uC62C\uB77C\uAC08 \uC218 \uC788\uC5B4\uC694. \uC571\uB9CC \uC815\uD655\uD788 \uC7AC\uB824\uBA74 \uC2DC\uD06C\uB9BF \uCC3D\uC774\uB098 \uD655\uC7A5\uC774 \uAEBC\uC9C4 \uD504\uB85C\uD544\uC5D0\uC11C \uB179\uD654\uD558\uC138\uC694.",
+  heapTrendLabel: (cls) => cls === "leak-suspected" ? "\uB204\uC218 \uC758\uC2EC" : cls === "growing" ? "\uC99D\uAC00 \uC911" : "\uC548\uC815",
+  fpsLabel: "fps",
+  fpsUnsupported: "\uD504\uB808\uC784 \uCE21\uC815 \uBBF8\uC9C0\uC6D0",
+  fpsBadge: (minFps, dropped) => `\uCD5C\uC800 ${minFps}fps \xB7 \uB4DC\uB78D ${dropped}`,
+  fpsWorst: (ms) => `\uCD5C\uC545 ${ms}ms`,
+  topRenderers: "\uC0C1\uC704 \uB80C\uB354\uB7EC \xB7 \uCD1D \uC2DC\uAC04\uC21C",
+  moreComponents: (n) => `\uC678 \uCEF4\uD3EC\uB10C\uD2B8 ${n}\uAC1C \uB354`,
+  rendererDetail: (c, n, total, max) => `${c} \xB7 \uB80C\uB354 ${n}\uD68C \xB7 \uCD1D ${total.toFixed(1)}ms \xB7 \uCD5C\uB300 ${max.toFixed(1)}ms`,
+  language: "\uC5B8\uC5B4",
+  panelRegion: "react-perfscope \uD328\uB110",
+  ratingLabel: (rating) => `\uD3C9\uAC00: ${rating}`,
+  severityLabel: (sev) => `\uC2EC\uAC01\uB3C4: ${sev}`,
+  worstLabel: (sev) => `\uAC00\uC7A5 \uC2EC\uAC01: ${sev}`,
+  kindLabel: (kind) => KIND_LABELS_KO[kind],
+  reasonMounted: "\uB9C8\uC6B4\uD2B8\uB428",
+  reasonState: "state \uBCC0\uACBD",
+  reasonProps: "props \uBCC0\uACBD",
+  reasonParent: "\uBD80\uBAA8 \uB530\uB77C \uB9AC\uB80C\uB354",
+  cascadeRoot: "\uC2DC\uC791\uC810",
+  changedProps: "\uBCC0\uACBD\uB41C props",
+  unnecessaryRenders: (n) => `\uBD88\uD544\uC694\uD55C \uB9AC\uB80C\uB354 ${n}\uAC1C (\uBD80\uBAA8 \uB54C\uBB38\uC5D0)`,
+  scripts: "\uC2A4\uD06C\uB9BD\uD2B8",
+  invoker: "\uD638\uCD9C\uC790",
+  source: "\uC18C\uC2A4",
+  blockingTime: "\uCC28\uB2E8 \uC2DC\uAC04",
+  noScripts: "\uC2A4\uD06C\uB9BD\uD2B8 \uCD9C\uCC98 \uC5C6\uC74C (LoAF \uBBF8\uC9C0\uC6D0).",
+  hotFunctions: "\uB0B4 \uCF54\uB4DC \uD56B\uC2A4\uD31F",
+  hotFunctionsHint: "\uB0B4 \uC18C\uC2A4\uC5D0\uC11C \uC0D8\uD50C\uB9C1\uB41C \uC810\uC720 \uC2DC\uAC04",
+  interactionEvent: "\uC774\uBCA4\uD2B8",
+  inputDelay: "\uC785\uB825 \uC9C0\uC5F0",
+  processingTime: "\uCC98\uB9AC",
+  presentation: "\uD654\uBA74 \uBC18\uC601",
+  interactionThresholdHint: "40ms \uC774\uC0C1 \uAC78\uB9B0 \uC0C1\uD638\uC791\uC6A9\uB9CC \uD45C\uC2DC\uB3FC\uC694 \u2014 \uB290\uB9B0 \uAC83\uB9CC INP\uB85C \uC7A1\uACE0, \uBE60\uB978 \uD074\uB9AD\uC740 \uC0DD\uB7B5\uD574\uC694."
+};
+var STRINGS = { en, ko };
+function isLang(v) {
+  return v === "en" || v === "ko";
+}
+function readStoredLang() {
+  if (typeof localStorage === "undefined") return "en";
+  try {
+    const v = localStorage.getItem(STORAGE_KEY);
+    return isLang(v) ? v : "en";
+  } catch {
+    return "en";
+  }
+}
+var I18nContext = createContext({
+  lang: "en",
+  setLang: () => {
+  },
+  t: en
+});
+function I18nProvider({ children }) {
+  const [lang, setLangState] = useState(() => readStoredLang());
+  const setLang = useCallback((l) => {
+    setLangState(l);
+    if (typeof localStorage !== "undefined") {
+      try {
+        localStorage.setItem(STORAGE_KEY, l);
+      } catch {
+      }
+    }
+  }, []);
+  const value = useMemo(() => ({ lang, setLang, t: STRINGS[lang] }), [lang, setLang]);
+  return h(I18nContext.Provider, { value }, children);
+}
+function useI18n() {
+  return useContext(I18nContext);
+}
+
+// src/widget.tsx
+import { jsx, jsxs } from "preact/jsx-runtime";
+var POSITION_STYLES = {
+  "bottom-right": { bottom: "16px", right: "16px" },
+  "bottom-left": { bottom: "16px", left: "16px" },
+  "top-right": { top: "16px", right: "16px" },
+  "top-left": { top: "16px", left: "16px" }
+};
+function formatElapsed(ms) {
+  const totalSeconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds - minutes * 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+function Widget(props) {
+  const { recording, elapsedMs = 0, onToggle, position = "bottom-right" } = props;
+  const positionStyle = POSITION_STYLES[position];
+  const { t } = useI18n();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-position": position,
+      style: {
+        position: "fixed",
+        ...positionStyle,
+        zIndex: "2147483647",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+      },
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": recording,
+          "aria-label": recording ? t.stopRecording : t.startRecording,
+          onClick: onToggle,
+          style: {
+            background: "#1a1a1a",
+            color: "#e6e6e6",
+            border: "1px solid #2a2a2a",
+            borderRadius: "20px",
+            padding: "8px 14px",
+            fontSize: "12px",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.2)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "50%",
+                  background: recording ? "#ff3b30" : "#666",
+                  display: "inline-block"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: recording ? formatElapsed(elapsedMs) : t.rec })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/panel.tsx
+import { useState as useState3, useMemo as useMemo3, useEffect, useRef as useRef2 } from "preact/hooks";
+
+// src/overlay.ts
+var OVERLAY_MARKER = "data-perfscope-overlay";
+var ARROW_MARKER = "data-perfscope-overlay-arrow";
+var FADE_MS = 80;
+var DEFAULT_BORDER = "#ff3b30";
+var DEFAULT_FILL = "rgba(255, 59, 48, 0.12)";
+function getOrCreate(id) {
+  const existing = document.querySelector(`[${OVERLAY_MARKER}="${id}"]`);
+  if (existing) return existing;
+  const el = document.createElement("div");
+  el.setAttribute(OVERLAY_MARKER, id);
+  el.style.position = "absolute";
+  el.style.pointerEvents = "none";
+  el.style.boxSizing = "border-box";
+  el.style.border = `2px solid ${DEFAULT_BORDER}`;
+  el.style.background = DEFAULT_FILL;
+  el.style.zIndex = "2147483646";
+  el.style.borderRadius = "2px";
+  el.style.transition = `opacity ${FADE_MS}ms ease-out`;
+  document.body.appendChild(el);
+  return el;
+}
+function showOverlay(id, rect, style) {
+  const el = getOrCreate(id);
+  el.style.left = `${rect.left}px`;
+  el.style.top = `${rect.top}px`;
+  el.style.width = `${rect.width}px`;
+  el.style.height = `${rect.height}px`;
+  el.style.opacity = "1";
+  const border = style?.border ?? DEFAULT_BORDER;
+  const fill = style?.fill ?? DEFAULT_FILL;
+  el.style.borderStyle = style?.dashed ? "dashed" : "solid";
+  el.style.borderColor = border;
+  el.style.background = fill;
+}
+function showArrow(id, from, to, color = DEFAULT_BORDER) {
+  let svg = document.querySelector(`[${ARROW_MARKER}="${id}"]`);
+  if (!svg) {
+    svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute(ARROW_MARKER, id);
+    svg.style.position = "absolute";
+    svg.style.pointerEvents = "none";
+    svg.style.overflow = "visible";
+    svg.style.zIndex = "2147483646";
+    svg.style.transition = `opacity ${FADE_MS}ms ease-out`;
+    document.body.appendChild(svg);
+  }
+  const minX = Math.min(from.x, to.x);
+  const minY = Math.min(from.y, to.y);
+  const w = Math.max(2, Math.abs(to.x - from.x));
+  const h3 = Math.max(2, Math.abs(to.y - from.y));
+  svg.style.left = `${minX}px`;
+  svg.style.top = `${minY}px`;
+  svg.setAttribute("width", `${w}`);
+  svg.setAttribute("height", `${h3}`);
+  svg.setAttribute("viewBox", `0 0 ${w} ${h3}`);
+  svg.style.opacity = "1";
+  while (svg.firstChild) svg.removeChild(svg.firstChild);
+  const fx = from.x - minX;
+  const fy = from.y - minY;
+  const tx = to.x - minX;
+  const ty = to.y - minY;
+  const markerId = `perfscope-arrowhead-${id}`;
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+  marker.setAttribute("id", markerId);
+  marker.setAttribute("viewBox", "0 0 10 10");
+  marker.setAttribute("refX", "8");
+  marker.setAttribute("refY", "5");
+  marker.setAttribute("markerWidth", "6");
+  marker.setAttribute("markerHeight", "6");
+  marker.setAttribute("orient", "auto-start-reverse");
+  const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  arrowPath.setAttribute("d", "M 0 0 L 10 5 L 0 10 z");
+  arrowPath.setAttribute("fill", color);
+  marker.appendChild(arrowPath);
+  defs.appendChild(marker);
+  svg.appendChild(defs);
+  const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+  line.setAttribute("x1", `${fx}`);
+  line.setAttribute("y1", `${fy}`);
+  line.setAttribute("x2", `${tx}`);
+  line.setAttribute("y2", `${ty}`);
+  line.setAttribute("stroke", color);
+  line.setAttribute("stroke-width", "3");
+  line.setAttribute("stroke-linecap", "round");
+  line.setAttribute("marker-end", `url(#${markerId})`);
+  svg.appendChild(line);
+}
+function hideArrow(id) {
+  const svg = document.querySelector(`[${ARROW_MARKER}="${id}"]`);
+  if (svg) svg.remove();
+}
+function hideOverlay(id) {
+  const el = document.querySelector(`[${OVERLAY_MARKER}="${id}"]`);
+  if (!el) return;
+  el.style.opacity = "0";
+  setTimeout(() => {
+    const stillThere = document.querySelector(`[${OVERLAY_MARKER}="${id}"]`);
+    if (stillThere && stillThere.style.opacity === "0") {
+      stillThere.remove();
+    }
+  }, FADE_MS + 20);
+}
+function hideAllOverlays() {
+  for (const el of Array.from(document.querySelectorAll(`[${OVERLAY_MARKER}]`))) {
+    el.remove();
+  }
+  for (const el of Array.from(document.querySelectorAll(`[${ARROW_MARKER}]`))) {
+    el.remove();
+  }
+}
+
+// src/severity.ts
+var SEVERITY_COLOR = {
+  low: "#666",
+  medium: "#ff9500",
+  high: "#ff3b30"
+};
+var SEVERITY_OVERLAY_COLOR = {
+  low: "#3b82f6",
+  medium: "#ff9500",
+  high: "#ff3b30"
+};
+var RATING_COLOR = {
+  good: "#34c759",
+  needs: "#ff9500",
+  poor: "#ff3b30"
+};
+var WEB_VITAL_THRESHOLDS = {
+  LCP: [2500, 4e3],
+  INP: [200, 500],
+  CLS: [0.1, 0.25],
+  FCP: [1800, 3e3],
+  TTFB: [800, 1800]
+};
+function webVitalRating(name, value) {
+  const [good, needs] = WEB_VITAL_THRESHOLDS[name];
+  if (value <= good) return "good";
+  if (value <= needs) return "needs";
+  return "poor";
+}
+var SEVERITY_RANK = { low: 0, medium: 1, high: 2 };
+function severityForSignal(s) {
+  switch (s.kind) {
+    case "long-task":
+      if (s.duration >= 100) return "high";
+      if (s.duration >= 50) return "medium";
+      return "low";
+    case "forced-reflow":
+      if (s.duration >= 20) return "high";
+      if (s.duration >= 5) return "medium";
+      return "low";
+    case "layout-shift":
+      if (s.value >= 0.1) return "high";
+      if (s.value >= 0.05) return "medium";
+      return "low";
+    case "render":
+      if (s.duration >= 33) return "high";
+      if (s.duration >= 16) return "medium";
+      return "low";
+    case "network":
+      if (s.blocking && s.duration >= 500) return "high";
+      if (s.duration >= 1e3) return "high";
+      if (s.duration >= 500) return "medium";
+      return "low";
+    case "web-vital": {
+      const rating = webVitalRating(s.name, s.value);
+      return rating === "poor" ? "high" : rating === "needs" ? "medium" : "low";
+    }
+    case "interaction":
+      if (s.duration >= 500) return "high";
+      if (s.duration >= 200) return "medium";
+      return "low";
+  }
+}
+function worstSeverity(signals) {
+  let worst = "low";
+  for (const s of signals) {
+    const sev = severityForSignal(s);
+    if (SEVERITY_RANK[sev] > SEVERITY_RANK[worst]) worst = sev;
+  }
+  return worst;
+}
+function severityRank(sev) {
+  return SEVERITY_RANK[sev];
+}
+
+// src/summary.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+var WEB_VITAL_UNIT = {
+  LCP: "ms",
+  INP: "ms",
+  CLS: "",
+  FCP: "ms",
+  TTFB: "ms"
+};
+function formatVitalValue(name, value) {
+  if (name === "CLS") return value.toFixed(3);
+  if (value >= 1e3) return (value / 1e3).toFixed(2) + "s";
+  return value.toFixed(0);
+}
+function VitalChip({ s }) {
+  const { t } = useI18n();
+  const rating = webVitalRating(s.name, s.value);
+  const color = RATING_COLOR[rating];
+  const unit = WEB_VITAL_UNIT[s.name];
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      "data-vital": s.name,
+      "data-rating": rating,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "5px",
+        padding: "3px 8px",
+        borderRadius: "999px",
+        background: "#1a1a1a",
+        border: `1px solid ${color}33`,
+        fontSize: "11px",
+        fontFamily: "SF Mono, Menlo, Consolas, monospace"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "aria-label": t.ratingLabel(rating),
+            style: {
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              background: color,
+              flex: "0 0 6px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2("strong", { style: { color: "#e6e6e6" }, children: s.name }),
+        /* @__PURE__ */ jsxs2("span", { style: { color }, children: [
+          formatVitalValue(s.name, s.value),
+          unit !== "s" ? unit : ""
+        ] })
+      ]
+    }
+  );
+}
+function SummaryHeader({ signals, grouped, kindsPresent, onKindClick }) {
+  const { t } = useI18n();
+  const latestVitals = /* @__PURE__ */ new Map();
+  for (const s of signals) {
+    if (s.kind === "web-vital") latestVitals.set(s.name, s);
+  }
+  const vitals = Array.from(latestVitals.values());
+  const nonVitalKinds = kindsPresent.filter((k) => k !== "web-vital");
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        marginBottom: "8px",
+        padding: "8px 10px",
+        background: "#141414",
+        border: "1px solid #1f1f1f",
+        borderRadius: "8px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px"
+      },
+      children: [
+        vitals.length > 0 && /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: vitals.map((v) => /* @__PURE__ */ jsx2(VitalChip, { s: v }, v.name)) }),
+        nonVitalKinds.length > 0 && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "10px",
+              fontSize: "11px",
+              color: "#aaa",
+              fontFamily: "SF Mono, Menlo, Consolas, monospace"
+            },
+            children: nonVitalKinds.map((k) => {
+              const list = grouped[k];
+              const sev = worstSeverity(list);
+              const color = sev === "low" ? "#aaa" : SEVERITY_COLOR[sev];
+              return /* @__PURE__ */ jsxs2(
+                "span",
+                {
+                  "data-summary-kind": k,
+                  onClick: () => onKindClick?.(k),
+                  style: {
+                    cursor: onKindClick ? "pointer" : "default",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px"
+                  },
+                  title: t.signalsTitle(list.length, t.kindLabel(k)),
+                  children: [
+                    sev !== "low" && /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          width: "6px",
+                          height: "6px",
+                          borderRadius: "50%",
+                          background: color,
+                          flex: "0 0 6px"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { children: t.kindLabel(k) }),
+                    /* @__PURE__ */ jsx2("strong", { style: { color }, children: list.length })
+                  ]
+                },
+                k
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/timeline.tsx
+import { Fragment } from "preact";
+import { useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "preact/hooks";
+import { analyzeHeapTrend, analyzeFrames } from "@react-perfscope/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "preact/jsx-runtime";
+var LANE_ORDER = [
+  "long-task",
+  "interaction",
+  "forced-reflow",
+  "layout-shift",
+  "render",
+  "network"
+];
+function signalAbsoluteTime(s) {
+  if (s.kind === "web-vital") return null;
+  if (s.kind === "network") return s.startedAt;
+  return s.at;
+}
+function signalDuration(s) {
+  if (s.kind === "long-task" || s.kind === "forced-reflow" || s.kind === "render" || s.kind === "network" || s.kind === "interaction") {
+    return s.duration;
+  }
+  return 0;
+}
+function formatTime(ms) {
+  if (ms >= 1e3) return `${(ms / 1e3).toFixed(1)}s`;
+  if (ms >= 1) return `${ms.toFixed(0)}ms`;
+  return `${ms.toFixed(1)}ms`;
+}
+function niceStep(span, target) {
+  const raw = Math.max(span, 1) / target;
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const norm = raw / mag;
+  if (norm < 1.5) return 1 * mag;
+  if (norm < 3) return 2 * mag;
+  if (norm < 7) return 5 * mag;
+  return 10 * mag;
+}
+function niceTicks(start, end, target = 5) {
+  const span = Math.max(end - start, 1);
+  const step = niceStep(span, target);
+  const first = Math.ceil(start / step) * step;
+  const ticks = [];
+  for (let t = first; t <= end + 1e-6; t += step) ticks.push(t);
+  return ticks;
+}
+var LANE_HEIGHT = 28;
+var NET_BAR_H = 7;
+var NET_ROW_GAP = 3;
+var NET_ROW_BRIGHTNESS = [1, 0.78, 1.22, 0.9, 1.12];
+var LABEL_COL_WIDTH = 124;
+var AXIS_HEIGHT = 22;
+var TRACK_PAD_X = 4;
+var MIN_BAR_W = 6;
+var MARKER_D = 9;
+var CLUSTER_BIN_MS = 16;
+var MIN_PX_PER_SEC = 80;
+function plotLane(signals, kind, winStart, winEnd, startedAt) {
+  const span = Math.max(winEnd - winStart, 1);
+  const out = [];
+  for (const s of signals) {
+    if (s.kind !== kind) continue;
+    const tAbs = signalAbsoluteTime(s);
+    if (tAbs == null) continue;
+    const t = tAbs - startedAt - winStart;
+    const d = signalDuration(s);
+    const startFrac = Math.max(0, Math.min(1, t / span));
+    const widthFrac = Math.max(0, Math.min(1 - startFrac, d / span));
+    out.push({ s, startFrac, widthFrac });
+  }
+  return out;
+}
+function packRows(bars, trackInnerPx) {
+  const GAP_PX = 2;
+  const rowEnds = [];
+  const rows = [];
+  for (const b of bars) {
+    const startPx = b.startFrac * trackInnerPx;
+    const endPx = startPx + Math.max(MIN_BAR_W, b.widthFrac * trackInnerPx);
+    let placed = -1;
+    for (let r = 0; r < rowEnds.length; r++) {
+      if (startPx >= rowEnds[r] + GAP_PX) {
+        placed = r;
+        break;
+      }
+    }
+    if (placed === -1) {
+      placed = rowEnds.length;
+      rowEnds.push(0);
+    }
+    rowEnds[placed] = endPx;
+    rows.push(placed);
+  }
+  return { rows, rowCount: Math.max(1, rowEnds.length) };
+}
+var SEV_RANK = { low: 0, medium: 1, high: 2 };
+function clusterLane(items, binFrac) {
+  const bars = [];
+  const pts = [];
+  for (const it of items) {
+    if (it.widthFrac >= binFrac) bars.push(it);
+    else pts.push(it);
+  }
+  pts.sort((a, b) => a.startFrac - b.startFrac);
+  const clusters = [];
+  let i = 0;
+  while (i < pts.length) {
+    const start = pts[i].startFrac;
+    let rep = pts[i].s;
+    let worst = severityForSignal(pts[i].s);
+    let sum = 0;
+    let j = i;
+    const members = [];
+    while (j < pts.length && pts[j].startFrac - start <= binFrac) {
+      const sev = severityForSignal(pts[j].s);
+      if (SEV_RANK[sev] > SEV_RANK[worst]) {
+        worst = sev;
+        rep = pts[j].s;
+      }
+      members.push(pts[j].s);
+      sum += pts[j].startFrac;
+      j++;
+    }
+    clusters.push({ startFrac: sum / members.length, count: members.length, rep, worst, members });
+    i = j;
+  }
+  return { bars, clusters };
+}
+function renderBreakdown(members) {
+  const order = [];
+  const counts = /* @__PURE__ */ new Map();
+  for (const s of members) {
+    if (s.kind !== "render") continue;
+    if (!counts.has(s.component)) order.push(s.component);
+    counts.set(s.component, (counts.get(s.component) ?? 0) + 1);
+  }
+  return order.map((c) => ({ component: c, count: counts.get(c) }));
+}
+var HEAP_STRIP_H = 46;
+var HEAP_VB_W = 100;
+var HEAP_VB_H = 100;
+var HEAP_TREND_COLOR = {
+  stable: "#3b82f6",
+  growing: "#f59e0b",
+  "leak-suspected": "#ef4444"
+};
+function formatBytes(b) {
+  if (b >= 1024 * 1024) return `${(b / (1024 * 1024)).toFixed(1)}MB`;
+  if (b >= 1024) return `${(b / 1024).toFixed(0)}KB`;
+  return `${b}B`;
+}
+function buildHeapPaths(samples, startedAt, safeDur) {
+  if (samples.length === 0) return null;
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const s of samples) {
+    if (s.used < lo) lo = s.used;
+    if (s.used > hi) hi = s.used;
+  }
+  const range = Math.max(hi - lo, 1);
+  const pts = samples.map((s) => {
+    const x = Math.max(0, Math.min(HEAP_VB_W, (s.at - startedAt) / safeDur * HEAP_VB_W));
+    const y = HEAP_VB_H - (s.used - lo) / range * HEAP_VB_H;
+    return { x, y };
+  });
+  const line = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(" ");
+  const last = pts[pts.length - 1];
+  const first = pts[0];
+  const area = `${line} L${last.x.toFixed(2)} ${HEAP_VB_H} L${first.x.toFixed(2)} ${HEAP_VB_H} Z`;
+  return { area, line, min: lo, max: hi };
+}
+function HeapStrip({
+  samples,
+  startedAt,
+  safeDur,
+  trackWidth,
+  scrolls
+}) {
+  const { t } = useI18n();
+  const has = !!samples && samples.length > 0;
+  const trend = useMemo2(() => has ? analyzeHeapTrend(samples) : null, [samples, has]);
+  const paths = useMemo2(
+    () => has ? buildHeapPaths(samples, startedAt, safeDur) : null,
+    [samples, has, startedAt, safeDur]
+  );
+  const color = trend ? HEAP_TREND_COLOR[trend.classification] : "#3b82f6";
+  const [hintAnchor, setHintAnchor] = useState2(
+    null
+  );
+  const hintRef = useRef(null);
+  const [hintPos, setHintPos] = useState2(null);
+  useLayoutEffect(() => {
+    if (!hintAnchor) {
+      setHintPos(null);
+      return;
+    }
+    const el = hintRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const gap = 6;
+    let left = hintAnchor.left;
+    if (left + r.width + 8 > vw) left = vw - r.width - 8;
+    if (left < 8) left = 8;
+    let top = hintAnchor.bottom + gap;
+    if (top + r.height + 8 > vh) top = hintAnchor.top - r.height - gap;
+    if (top < 8) top = 8;
+    setHintPos({ left, top });
+  }, [hintAnchor]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-heap-strip": "",
+      style: {
+        display: "flex",
+        alignItems: "stretch",
+        height: `${HEAP_STRIP_H}px`,
+        background: "#111",
+        borderBottom: "1px solid #1c1c1c"
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              flex: `0 0 ${LABEL_COL_WIDTH}px`,
+              minWidth: 0,
+              boxSizing: "border-box",
+              position: "sticky",
+              left: 0,
+              zIndex: 5,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: "2px",
+              padding: "0 8px",
+              borderRight: "1px solid #1c1c1c",
+              background: "#0f0f0f"
+            },
+            children: [
+              /* @__PURE__ */ jsxs3("span", { style: { display: "flex", alignItems: "center", gap: "4px", color: "#9a9a9a" }, children: [
+                t.heapLabel,
+                has && /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    "data-heap-hint": "",
+                    "aria-label": t.heapExtensionHint,
+                    onMouseEnter: (e) => {
+                      const r = e.currentTarget.getBoundingClientRect();
+                      setHintAnchor({ left: r.left, top: r.top, bottom: r.bottom });
+                    },
+                    onMouseLeave: () => setHintAnchor(null),
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "12px",
+                      height: "12px",
+                      borderRadius: "50%",
+                      border: "1px solid #555",
+                      color: "#888",
+                      fontSize: "9px",
+                      lineHeight: 1,
+                      cursor: "help"
+                    },
+                    children: "i"
+                  }
+                )
+              ] }),
+              has && trend && /* @__PURE__ */ jsxs3("span", { "data-heap-trend": trend.classification, style: { color, fontSize: "10px" }, children: [
+                t.heapTrendLabel(trend.classification),
+                trend.classification !== "stable" && ` \xB7 +${(trend.slopeBytesPerMin / (1024 * 1024)).toFixed(1)}MB/min`
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              flex: scrolls ? "0 0 auto" : 1,
+              width: scrolls ? `${trackWidth}px` : void 0,
+              position: "relative",
+              padding: `0 ${TRACK_PAD_X}px`
+            },
+            children: has && paths ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsxs3(
+                "svg",
+                {
+                  width: "100%",
+                  height: HEAP_STRIP_H,
+                  viewBox: `0 0 ${HEAP_VB_W} ${HEAP_VB_H}`,
+                  preserveAspectRatio: "none",
+                  style: { display: "block" },
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx3("path", { d: paths.area, fill: color, fillOpacity: 0.16 }),
+                    /* @__PURE__ */ jsx3("path", { d: paths.line, fill: "none", stroke: color, strokeWidth: 1.2, vectorEffect: "non-scaling-stroke" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "2px",
+                    right: "6px",
+                    color: "#666",
+                    fontSize: "10px",
+                    pointerEvents: "none"
+                  },
+                  children: [
+                    formatBytes(paths.min),
+                    "\u2013",
+                    formatBytes(paths.max)
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx3(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "8px",
+                  transform: "translateY(-50%)",
+                  color: "#666",
+                  fontSize: "10px"
+                },
+                children: t.heapUnsupported
+              }
+            )
+          }
+        ),
+        hintAnchor && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ref: hintRef,
+            role: "tooltip",
+            style: {
+              position: "fixed",
+              left: `${hintPos ? hintPos.left : 0}px`,
+              top: `${hintPos ? hintPos.top : 0}px`,
+              visibility: hintPos ? "visible" : "hidden",
+              width: "220px",
+              padding: "7px 9px",
+              background: "#0d0d0d",
+              border: "1px solid #2a2a2a",
+              borderRadius: "6px",
+              color: "#cfcfcf",
+              fontSize: "10px",
+              fontWeight: 400,
+              lineHeight: 1.5,
+              whiteSpace: "normal",
+              boxShadow: "0 4px 14px rgba(0,0,0,0.5)",
+              zIndex: 2147483647,
+              pointerEvents: "none"
+            },
+            children: t.heapExtensionHint
+          }
+        )
+      ]
+    }
+  );
+}
+var FPS_GOOD = "#34c759";
+var FPS_OK = "#f59e0b";
+var FPS_BAD = "#ef4444";
+function fpsColor(minFps) {
+  if (minFps >= 50) return FPS_GOOD;
+  if (minFps >= 30) return FPS_OK;
+  return FPS_BAD;
+}
+function buildFpsPaths(series, startedAt, safeDur) {
+  if (series.length === 0) return null;
+  let max = 60;
+  for (const s of series) if (s.fps > max) max = s.fps;
+  const pts = series.map((s) => {
+    const x = Math.max(0, Math.min(HEAP_VB_W, (s.at - startedAt) / safeDur * HEAP_VB_W));
+    const y = HEAP_VB_H - Math.min(s.fps, max) / max * HEAP_VB_H;
+    return { x, y };
+  });
+  if (pts.length === 1) pts.push({ x: HEAP_VB_W, y: pts[0].y });
+  pts[0].x = 0;
+  pts[pts.length - 1].x = HEAP_VB_W;
+  const line = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(" ");
+  const last = pts[pts.length - 1];
+  const first = pts[0];
+  const area = `${line} L${last.x.toFixed(2)} ${HEAP_VB_H} L${first.x.toFixed(2)} ${HEAP_VB_H} Z`;
+  return { area, line, max };
+}
+function FpsStrip({
+  frames,
+  startedAt,
+  safeDur,
+  trackWidth,
+  scrolls
+}) {
+  const { t } = useI18n();
+  const has = !!frames && frames.length > 0;
+  const stats = useMemo2(() => has ? analyzeFrames(frames) : null, [frames, has]);
+  const paths = useMemo2(
+    () => stats ? buildFpsPaths(stats.series, startedAt, safeDur) : null,
+    [stats, startedAt, safeDur]
+  );
+  const color = stats ? fpsColor(stats.minFps) : FPS_GOOD;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-fps-strip": "",
+      style: {
+        display: "flex",
+        alignItems: "stretch",
+        height: `${HEAP_STRIP_H}px`,
+        background: "#111",
+        borderBottom: "1px solid #1c1c1c"
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              flex: `0 0 ${LABEL_COL_WIDTH}px`,
+              minWidth: 0,
+              boxSizing: "border-box",
+              position: "sticky",
+              left: 0,
+              zIndex: 5,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: "2px",
+              padding: "0 8px",
+              borderRight: "1px solid #1c1c1c",
+              background: "#0f0f0f"
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { style: { color: "#9a9a9a" }, children: t.fpsLabel }),
+              stats && /* @__PURE__ */ jsx3("span", { "data-fps-min": Math.round(stats.minFps), style: { color, fontSize: "10px" }, children: t.fpsBadge(Math.round(stats.minFps), stats.droppedFrames) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              flex: scrolls ? "0 0 auto" : 1,
+              width: scrolls ? `${trackWidth}px` : void 0,
+              position: "relative",
+              padding: `0 ${TRACK_PAD_X}px`
+            },
+            children: stats && paths ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsxs3(
+                "svg",
+                {
+                  width: "100%",
+                  height: HEAP_STRIP_H,
+                  viewBox: `0 0 ${HEAP_VB_W} ${HEAP_VB_H}`,
+                  preserveAspectRatio: "none",
+                  style: { display: "block" },
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx3("path", { d: paths.area, fill: color, fillOpacity: 0.16 }),
+                    /* @__PURE__ */ jsx3("path", { d: paths.line, fill: "none", stroke: color, strokeWidth: 1.2, vectorEffect: "non-scaling-stroke" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  style: { position: "absolute", top: "2px", right: "6px", color: "#666", fontSize: "10px", pointerEvents: "none" },
+                  children: t.fpsWorst(Math.round(stats.longestFrameMs))
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx3(
+              "span",
+              {
+                style: { position: "absolute", top: "50%", left: "8px", transform: "translateY(-50%)", color: "#666", fontSize: "10px" },
+                children: t.fpsUnsupported
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Timeline({ signals, duration, startedAt, heapSamples, frames, onJump }) {
+  const { t } = useI18n();
+  const trackRef = useRef(null);
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const [cursorLeftPx, setCursorLeftPx] = useState2(null);
+  const [hovered, setHovered] = useState2(null);
+  const [cursorFrac, setCursorFrac] = useState2(null);
+  const tipRef = useRef(null);
+  const [tipPos, setTipPos] = useState2(null);
+  const [viewportTrackWidth, setViewportTrackWidth] = useState2(0);
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const measure = () => setViewportTrackWidth(Math.max(0, el.clientWidth - LABEL_COL_WIDTH));
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    if (!hovered) {
+      setTipPos(null);
+      return;
+    }
+    const el = tipRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const gap = 10;
+    let left = hovered.clientX + gap;
+    if (left + r.width + 8 > vw) left = hovered.clientX - r.width - gap;
+    if (left < 8) left = Math.max(8, Math.min(vw - r.width - 8, hovered.clientX - r.width / 2));
+    let top = hovered.clientY - r.height - 6;
+    if (top < 8) top = hovered.clientY + 18;
+    if (top + r.height + 8 > vh) top = Math.max(8, vh - r.height - 8);
+    setTipPos({ left, top });
+  }, [hovered]);
+  const presentLanes = useMemo2(
+    () => LANE_ORDER.filter((k) => signals.some((s) => s.kind === k)),
+    [signals]
+  );
+  const winStart = 0;
+  const winEnd = Math.max(duration, 1);
+  const safeDur = winEnd;
+  const ticks = useMemo2(() => niceTicks(winStart, winEnd), [winStart, winEnd]);
+  const neededTrackWidth = safeDur / 1e3 * MIN_PX_PER_SEC;
+  const trackWidth = Math.max(viewportTrackWidth, neededTrackWidth);
+  const scrolls = viewportTrackWidth > 0 && trackWidth > viewportTrackWidth + 0.5;
+  const hasHeap = !!heapSamples && heapSamples.length > 0;
+  const hasFrames = !!frames && frames.length > 0;
+  if (presentLanes.length === 0 && !hasHeap && !hasFrames) {
+    return /* @__PURE__ */ jsx3("div", { style: { color: "#888", padding: "20px", textAlign: "center", fontSize: "11px" }, children: t.noTimeBound });
+  }
+  function handleMouseMove(e) {
+    const track = trackRef.current;
+    const content = contentRef.current;
+    if (!track || !content) return;
+    const rect = track.getBoundingClientRect();
+    const inner = rect.width - 2 * TRACK_PAD_X;
+    const frac = Math.max(0, Math.min(1, (e.clientX - rect.left - TRACK_PAD_X) / inner));
+    setCursorFrac(frac);
+    const contLeft = content.getBoundingClientRect().left;
+    setCursorLeftPx(rect.left - contLeft + TRACK_PAD_X + inner * frac);
+  }
+  function handleMouseLeave() {
+    setCursorFrac(null);
+    setCursorLeftPx(null);
+    setHovered(null);
+  }
+  const cursorTime = cursorFrac != null ? winStart + cursorFrac * safeDur : null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        userSelect: "none",
+        fontFamily: "SF Mono, Menlo, Consolas, monospace",
+        fontSize: "11px"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ref: containerRef,
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            style: {
+              position: "relative",
+              overflowX: scrolls ? "auto" : "visible",
+              // overflow-x:auto forces overflow-y to auto too, which would clip the
+              // cursor time label sitting at top:-14px — reserve that space.
+              paddingTop: scrolls ? "14px" : 0
+            },
+            children: /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                ref: contentRef,
+                style: {
+                  position: "relative",
+                  width: scrolls ? `${LABEL_COL_WIDTH + trackWidth}px` : "100%"
+                },
+                children: [
+                  cursorFrac != null && /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        bottom: 0,
+                        left: `${cursorLeftPx ?? 0}px`,
+                        width: "1px",
+                        background: "#3b82f680",
+                        pointerEvents: "none",
+                        zIndex: 1
+                      }
+                    }
+                  ),
+                  cursorFrac != null && cursorTime != null && /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      style: {
+                        position: "absolute",
+                        top: "-14px",
+                        left: `${cursorLeftPx ?? 0}px`,
+                        transform: cursorFrac < 0.06 ? "translateX(0)" : cursorFrac > 0.94 ? "translateX(-100%)" : "translateX(-50%)",
+                        fontSize: "10px",
+                        color: "#3b82f6",
+                        background: "#0d0d0d",
+                        padding: "0 4px",
+                        borderRadius: "3px",
+                        pointerEvents: "none",
+                        whiteSpace: "nowrap",
+                        zIndex: 2
+                      },
+                      children: formatTime(cursorTime)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    HeapStrip,
+                    {
+                      samples: heapSamples,
+                      startedAt,
+                      safeDur,
+                      trackWidth,
+                      scrolls
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    FpsStrip,
+                    {
+                      frames,
+                      startedAt,
+                      safeDur,
+                      trackWidth,
+                      scrolls
+                    }
+                  ),
+                  presentLanes.map((kind, li) => {
+                    const items = plotLane(signals, kind, winStart, winEnd, startedAt);
+                    const { bars, clusters } = clusterLane(items, CLUSTER_BIN_MS / safeDur);
+                    const altBg = li % 2 === 0 ? "#131313" : "#161616";
+                    const isNet = kind === "network";
+                    const trackInner = Math.max(1, trackWidth - 2 * TRACK_PAD_X);
+                    let laneBars = bars;
+                    let barRows = [];
+                    let laneHeight = LANE_HEIGHT;
+                    if (isNet && bars.length > 0) {
+                      laneBars = [...bars].sort((a, b) => a.startFrac - b.startFrac);
+                      const packed = packRows(laneBars, trackInner);
+                      barRows = packed.rows;
+                      laneHeight = Math.max(LANE_HEIGHT, packed.rowCount * (NET_BAR_H + NET_ROW_GAP) + NET_ROW_GAP);
+                    }
+                    return /* @__PURE__ */ jsxs3(
+                      "div",
+                      {
+                        "data-lane": kind,
+                        style: {
+                          display: "flex",
+                          alignItems: "stretch",
+                          height: `${laneHeight}px`,
+                          background: altBg,
+                          borderBottom: "1px solid #1c1c1c"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs3(
+                            "div",
+                            {
+                              style: {
+                                flex: `0 0 ${LABEL_COL_WIDTH}px`,
+                                minWidth: 0,
+                                boxSizing: "border-box",
+                                position: "sticky",
+                                left: 0,
+                                zIndex: 5,
+                                display: "flex",
+                                alignItems: "center",
+                                padding: "0 8px",
+                                color: "#9a9a9a",
+                                borderRight: "1px solid #1c1c1c",
+                                background: "#0f0f0f"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx3("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: t.kindLabel(kind) }),
+                                /* @__PURE__ */ jsx3("span", { style: { color: "#555", fontSize: "10px", marginLeft: "4px" }, children: items.length })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs3(
+                            "div",
+                            {
+                              ref: li === 0 ? trackRef : void 0,
+                              style: {
+                                flex: scrolls ? "0 0 auto" : 1,
+                                width: scrolls ? `${trackWidth}px` : void 0,
+                                position: "relative",
+                                padding: `0 ${TRACK_PAD_X}px`
+                              },
+                              children: [
+                                ticks.map((t2, ti) => {
+                                  const leftPct = (t2 - winStart) / safeDur * 100;
+                                  return /* @__PURE__ */ jsx3(
+                                    "div",
+                                    {
+                                      style: {
+                                        position: "absolute",
+                                        top: 0,
+                                        bottom: 0,
+                                        left: `calc(${TRACK_PAD_X}px + (100% - ${2 * TRACK_PAD_X}px) * ${leftPct / 100})`,
+                                        width: "1px",
+                                        background: "#1f1f1f"
+                                      }
+                                    },
+                                    `tg-${ti}`
+                                  );
+                                }),
+                                laneBars.map((p, i) => {
+                                  const sev = severityForSignal(p.s);
+                                  const color = SEVERITY_OVERLAY_COLOR[sev];
+                                  const isHot = hovered?.s === p.s;
+                                  const baseOpacity = sev === "low" ? 0.85 : sev === "medium" ? 0.95 : 1;
+                                  const glow = sev === "high" ? `0 0 8px ${color}cc, 0 0 0 1px ${color}` : `0 0 0 1px ${color}`;
+                                  const row = isNet ? barRows[i] ?? 0 : 0;
+                                  const barTop = isNet ? `${NET_ROW_GAP + row * (NET_BAR_H + NET_ROW_GAP)}px` : "6px";
+                                  const netBrightness = isNet ? NET_ROW_BRIGHTNESS[row % NET_ROW_BRIGHTNESS.length] : 1;
+                                  return /* @__PURE__ */ jsx3(
+                                    "div",
+                                    {
+                                      "data-bar": kind,
+                                      onMouseEnter: (e) => {
+                                        const r = e.currentTarget.getBoundingClientRect();
+                                        setHovered({ s: p.s, clientX: r.left + r.width / 2, clientY: r.top });
+                                      },
+                                      onMouseLeave: () => setHovered(null),
+                                      onClick: () => onJump?.(p.s),
+                                      title: formatTime((signalAbsoluteTime(p.s) ?? startedAt) - startedAt),
+                                      style: {
+                                        position: "absolute",
+                                        top: barTop,
+                                        bottom: isNet ? void 0 : "6px",
+                                        height: isNet ? `${NET_BAR_H}px` : void 0,
+                                        left: `clamp(${TRACK_PAD_X}px, calc(${TRACK_PAD_X}px + (100% - ${2 * TRACK_PAD_X}px) * ${p.startFrac.toFixed(4)}), calc(100% - ${MIN_BAR_W + TRACK_PAD_X}px))`,
+                                        width: `min(calc(100% - ${2 * TRACK_PAD_X}px), max(${MIN_BAR_W}px, calc((100% - ${2 * TRACK_PAD_X}px) * ${p.widthFrac.toFixed(4)})))`,
+                                        background: `linear-gradient(180deg, ${color}, ${color}cc)`,
+                                        opacity: isHot ? 1 : baseOpacity,
+                                        borderRadius: "3px",
+                                        boxShadow: isHot ? `0 0 10px ${color}, 0 0 0 1px #fff6` : glow,
+                                        cursor: onJump ? "pointer" : "default",
+                                        transition: "transform 90ms ease, box-shadow 90ms ease",
+                                        transform: isHot ? "scaleY(1.18)" : "scaleY(1)",
+                                        filter: isNet ? `brightness(${netBrightness})` : void 0,
+                                        zIndex: isHot ? 3 : 2
+                                      }
+                                    },
+                                    `bar-${kind}-${i}`
+                                  );
+                                }),
+                                clusters.map((c, i) => {
+                                  const color = SEVERITY_OVERLAY_COLOR[c.worst];
+                                  const leftPct = c.startFrac * 100;
+                                  const isHot = hovered?.s === c.rep;
+                                  const baseOpacity = c.worst === "low" ? 0.85 : c.worst === "medium" ? 0.95 : 1;
+                                  const d = MARKER_D + Math.min(6, Math.log2(c.count) * 1.6);
+                                  const glow = c.worst === "high" ? `0 0 8px ${color}cc, 0 0 0 1px ${color}` : `0 0 0 1px ${color}`;
+                                  const ring = c.count > 1 ? `, inset 0 0 0 1.5px #0d0d0d` : "";
+                                  const markerLeft = `clamp(${d / 2}px, calc(${TRACK_PAD_X}px + (100% - ${2 * TRACK_PAD_X}px) * ${c.startFrac.toFixed(4)}), calc(100% - ${d / 2}px))`;
+                                  const badgeFlip = c.startFrac > 0.85;
+                                  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+                                    /* @__PURE__ */ jsx3(
+                                      "div",
+                                      {
+                                        "data-bar": kind,
+                                        onMouseEnter: (e) => {
+                                          const r = e.currentTarget.getBoundingClientRect();
+                                          setHovered({
+                                            s: c.rep,
+                                            clientX: r.left + r.width / 2,
+                                            clientY: r.top,
+                                            count: c.count,
+                                            members: c.members
+                                          });
+                                        },
+                                        onMouseLeave: () => setHovered(null),
+                                        onClick: () => onJump?.(c.rep),
+                                        title: formatTime((signalAbsoluteTime(c.rep) ?? startedAt) - startedAt),
+                                        style: {
+                                          position: "absolute",
+                                          top: "50%",
+                                          left: markerLeft,
+                                          width: `${d}px`,
+                                          height: `${d}px`,
+                                          marginLeft: `-${d / 2}px`,
+                                          transform: isHot ? "translateY(-50%) scale(1.35)" : "translateY(-50%)",
+                                          background: color,
+                                          opacity: isHot ? 1 : baseOpacity,
+                                          borderRadius: "50%",
+                                          boxShadow: (isHot ? `0 0 8px ${color}, 0 0 0 1px ${color}` : glow) + ring,
+                                          cursor: onJump ? "pointer" : "default",
+                                          transition: "transform 90ms ease, box-shadow 90ms ease",
+                                          zIndex: isHot ? 3 : 2
+                                        }
+                                      }
+                                    ),
+                                    c.count > 1 && /* @__PURE__ */ jsxs3(
+                                      "span",
+                                      {
+                                        "aria-hidden": "true",
+                                        style: {
+                                          position: "absolute",
+                                          top: "50%",
+                                          left: markerLeft,
+                                          marginLeft: badgeFlip ? `-${d / 2 + 3}px` : `${d / 2 + 3}px`,
+                                          transform: badgeFlip ? "translate(-100%, -50%)" : "translateY(-50%)",
+                                          fontSize: "9px",
+                                          fontWeight: 600,
+                                          lineHeight: 1,
+                                          color: "#e8e8e8",
+                                          background: "#0d0d0dcc",
+                                          padding: "1px 3px",
+                                          borderRadius: "3px",
+                                          whiteSpace: "nowrap",
+                                          pointerEvents: "none",
+                                          zIndex: isHot ? 4 : 3
+                                        },
+                                        children: [
+                                          "\xD7",
+                                          c.count
+                                        ]
+                                      }
+                                    )
+                                  ] }, `pt-${kind}-${i}`);
+                                })
+                              ]
+                            }
+                          )
+                        ]
+                      },
+                      kind
+                    );
+                  }),
+                  /* @__PURE__ */ jsxs3(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        height: `${AXIS_HEIGHT}px`,
+                        background: "#0f0f0f",
+                        color: "#666",
+                        fontSize: "10px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3(
+                          "div",
+                          {
+                            style: {
+                              flex: `0 0 ${LABEL_COL_WIDTH}px`,
+                              minWidth: 0,
+                              boxSizing: "border-box",
+                              position: "sticky",
+                              left: 0,
+                              zIndex: 5,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "flex-end",
+                              padding: "0 8px",
+                              borderRight: "1px solid #1c1c1c",
+                              background: "#0f0f0f",
+                              color: "#555"
+                            },
+                            children: t.timeAxis
+                          }
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          "div",
+                          {
+                            style: {
+                              flex: scrolls ? "0 0 auto" : 1,
+                              width: scrolls ? `${trackWidth}px` : void 0,
+                              position: "relative",
+                              padding: `0 ${TRACK_PAD_X}px`
+                            },
+                            children: ticks.map((t2, ti) => {
+                              const leftPct = (t2 - winStart) / safeDur * 100;
+                              const align = leftPct < 6 ? "translateX(0)" : leftPct > 94 ? "translateX(-100%)" : "translateX(-50%)";
+                              return /* @__PURE__ */ jsxs3(Fragment, { children: [
+                                /* @__PURE__ */ jsx3(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "absolute",
+                                      top: 0,
+                                      height: "4px",
+                                      width: "1px",
+                                      background: "#444",
+                                      left: `calc(${TRACK_PAD_X}px + (100% - ${2 * TRACK_PAD_X}px) * ${leftPct / 100})`
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx3(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "absolute",
+                                      top: "5px",
+                                      left: `calc(${TRACK_PAD_X}px + (100% - ${2 * TRACK_PAD_X}px) * ${leftPct / 100})`,
+                                      transform: align,
+                                      whiteSpace: "nowrap"
+                                    },
+                                    children: formatTime(t2)
+                                  }
+                                )
+                              ] }, `tl-${ti}`);
+                            })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        hovered && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ref: tipRef,
+            role: "tooltip",
+            style: {
+              position: "fixed",
+              // Until measured, park at the origin (hidden) so the un-flipped
+              // nowrap box can't overflow the viewport right edge and flash a
+              // scrollbar. useLayoutEffect then flips/clamps and reveals it.
+              left: `${tipPos ? tipPos.left : 0}px`,
+              top: `${tipPos ? tipPos.top : 0}px`,
+              visibility: tipPos ? "visible" : "hidden",
+              background: "#0d0d0d",
+              border: "1px solid #2a2a2a",
+              borderRadius: "4px",
+              padding: "4px 8px",
+              fontSize: "11px",
+              color: "#e6e6e6",
+              pointerEvents: "none",
+              zIndex: 2147483647,
+              whiteSpace: "nowrap",
+              boxShadow: "0 4px 12px rgba(0,0,0,0.5)"
+            },
+            children: hovered.s.kind === "render" && hovered.members && hovered.count && hovered.count > 1 ? /* @__PURE__ */ jsx3(
+              RenderClusterTip,
+              {
+                members: hovered.members,
+                count: hovered.count,
+                s: hovered.s,
+                startedAt
+              }
+            ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsx3(TooltipContent, { s: hovered.s, startedAt }),
+              hovered.count != null && hovered.count > 1 && /* @__PURE__ */ jsxs3("span", { style: { color: "#888", marginLeft: "6px" }, children: [
+                "\xD7",
+                hovered.count
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+var BREAKDOWN_MAX = 6;
+function RenderClusterTip({
+  members,
+  count,
+  s,
+  startedAt
+}) {
+  const tAbs = signalAbsoluteTime(s);
+  const at = tAbs == null ? "" : `@ ${formatTime(tAbs - startedAt)}`;
+  const bd = renderBreakdown(members);
+  const shown = bd.slice(0, BREAKDOWN_MAX);
+  const more = bd.length - shown.length;
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsxs3("strong", { children: [
+        count,
+        " renders"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx3("span", { style: { color: "#888" }, children: at })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: { color: "#9a9a9a", marginTop: "2px" }, children: [
+      shown.map((b, i) => /* @__PURE__ */ jsxs3("span", { children: [
+        i > 0 ? " \xB7 " : "",
+        b.component,
+        b.count > 1 ? ` \xD7${b.count}` : ""
+      ] }, b.component)),
+      more > 0 ? ` \xB7 +${more}` : ""
+    ] })
+  ] });
+}
+function TooltipContent({ s, startedAt }) {
+  const sev = severityForSignal(s);
+  const color = SEVERITY_OVERLAY_COLOR[sev];
+  const tAbs = signalAbsoluteTime(s);
+  const t = tAbs == null ? null : tAbs - startedAt;
+  const at = t == null ? "" : `@ ${formatTime(t)}`;
+  switch (s.kind) {
+    case "long-task":
+      return /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "long-task" }),
+        " ",
+        /* @__PURE__ */ jsxs3("span", { style: { color }, children: [
+          s.duration.toFixed(0),
+          "ms"
+        ] }),
+        " ",
+        at
+      ] });
+    case "forced-reflow":
+      return /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "forced-reflow" }),
+        " ",
+        /* @__PURE__ */ jsxs3("span", { style: { color }, children: [
+          s.duration.toFixed(2),
+          "ms"
+        ] }),
+        " ",
+        at
+      ] });
+    case "layout-shift":
+      return /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "layout-shift" }),
+        " ",
+        /* @__PURE__ */ jsx3("span", { style: { color }, children: s.value.toFixed(3) }),
+        " ",
+        at
+      ] });
+    case "render":
+      return /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: s.component }),
+        " ",
+        /* @__PURE__ */ jsxs3("span", { style: { color }, children: [
+          s.duration.toFixed(2),
+          "ms"
+        ] }),
+        " ",
+        at
+      ] });
+    case "network":
+      return /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: s.url.slice(0, 40) }),
+        " ",
+        /* @__PURE__ */ jsxs3("span", { style: { color }, children: [
+          s.duration.toFixed(0),
+          "ms"
+        ] }),
+        " ",
+        at
+      ] });
+    case "interaction":
+      return /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: s.eventType }),
+        " ",
+        /* @__PURE__ */ jsxs3("span", { style: { color }, children: [
+          s.duration.toFixed(0),
+          "ms"
+        ] }),
+        " ",
+        at
+      ] });
+    case "web-vital":
+      return null;
+  }
+}
+
+// src/render-insights.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "preact/jsx-runtime";
+function aggregate(signals) {
+  const byName = /* @__PURE__ */ new Map();
+  for (const s of signals) {
+    if (!byName.has(s.component)) byName.set(s.component, []);
+    byName.get(s.component).push(s);
+  }
+  const result = [];
+  for (const [name, list] of byName) {
+    let total = 0;
+    let max = 0;
+    let worst = "low";
+    for (const s of list) {
+      total += s.duration;
+      if (s.duration > max) max = s.duration;
+      const sev = severityForSignal(s);
+      if (sev === "high" || sev === "medium" && worst === "low") worst = sev;
+    }
+    result.push({ component: name, count: list.length, totalMs: total, maxMs: max, worstSeverity: worst });
+  }
+  result.sort((a, b) => b.totalMs - a.totalMs);
+  return result;
+}
+var TOP_N = 5;
+function RenderInsights({ signals, onSelect }) {
+  const { t } = useI18n();
+  if (signals.length === 0) return null;
+  const rows = aggregate(signals);
+  const top = rows.slice(0, TOP_N);
+  const max = top.length > 0 ? top[0].totalMs : 1;
+  const hiddenCount = rows.length - top.length;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        marginBottom: "8px",
+        padding: "8px 10px",
+        background: "#141414",
+        border: "1px solid #1f1f1f",
+        borderRadius: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsx4("div", { style: { fontSize: "10px", color: "#888", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: "6px" }, children: t.topRenderers }),
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+          top.map((a) => {
+            const widthPct = max > 0 ? Math.max(2, a.totalMs / max * 100) : 0;
+            const color = SEVERITY_COLOR[a.worstSeverity];
+            return /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                "data-component": a.component,
+                onClick: () => onSelect?.(a.component),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  fontSize: "11px",
+                  fontFamily: "SF Mono, Menlo, Consolas, monospace",
+                  cursor: onSelect ? "pointer" : "default",
+                  padding: "3px 0"
+                },
+                title: t.rendererDetail(a.component, a.count, a.totalMs, a.maxMs),
+                children: [
+                  /* @__PURE__ */ jsx4("strong", { style: { flex: "0 0 30%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.component }),
+                  /* @__PURE__ */ jsx4("div", { style: { flex: "1", position: "relative", height: "14px", background: "#1f1f1f", borderRadius: "2px" }, children: /* @__PURE__ */ jsx4(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        height: "100%",
+                        width: `${widthPct}%`,
+                        background: color,
+                        opacity: a.worstSeverity === "low" ? 0.4 : 0.7,
+                        borderRadius: "2px"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs4("span", { style: { flex: "0 0 auto", color, minWidth: "56px", textAlign: "right" }, children: [
+                    a.totalMs.toFixed(1),
+                    "ms"
+                  ] }),
+                  /* @__PURE__ */ jsxs4("span", { style: { flex: "0 0 auto", color: "#888", minWidth: "32px", textAlign: "right" }, children: [
+                    "\xD7",
+                    a.count
+                  ] })
+                ]
+              },
+              a.component
+            );
+          }),
+          hiddenCount > 0 && /* @__PURE__ */ jsx4("div", { style: { fontSize: "10px", color: "#666", marginTop: "2px" }, children: t.moreComponents(hiddenCount) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/panel.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
+var RENDER_REASON_COLOR = {
+  mount: "#5ac8fa",
+  state: "#34c759",
+  props: "#8e8e93",
+  parent: "#ff9500"
+};
+function renderReasonLabel(t, reason) {
+  switch (reason) {
+    case "mount":
+      return t.reasonMounted;
+    case "state":
+      return t.reasonState;
+    case "props":
+      return t.reasonProps;
+    case "parent":
+      return t.reasonParent;
+  }
+}
+function RenderReasonTag({ reason, changedProps }) {
+  const { t } = useI18n();
+  const color = RENDER_REASON_COLOR[reason];
+  const label = renderReasonLabel(t, reason);
+  const keys = reason === "props" && changedProps && changedProps.length > 0 ? `: ${changedProps.join(", ")}` : "";
+  return /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      style: {
+        color,
+        border: `1px solid ${color}`,
+        borderRadius: "4px",
+        padding: "0 5px",
+        fontSize: "10px",
+        fontWeight: 600,
+        whiteSpace: "nowrap"
+      },
+      children: [
+        label,
+        keys
+      ]
+    }
+  );
+}
+var KIND_ORDER = [
+  "forced-reflow",
+  "layout-shift",
+  "long-task",
+  "interaction",
+  "network",
+  "web-vital",
+  "render"
+];
+var POSITION_STYLES2 = {
+  "bottom-right": { bottom: "16px", right: "16px" },
+  "bottom-left": { bottom: "16px", left: "16px" },
+  "top-right": { top: "16px", right: "16px" },
+  "top-left": { top: "16px", left: "16px" }
+};
+function groupByKind(signals) {
+  const acc = {
+    "forced-reflow": [],
+    "layout-shift": [],
+    "long-task": [],
+    "interaction": [],
+    "network": [],
+    "web-vital": [],
+    "render": []
+  };
+  for (const s of signals) acc[s.kind].push(s);
+  return acc;
+}
+var WEB_VITAL_UNIT2 = {
+  LCP: "ms",
+  INP: "ms",
+  CLS: "",
+  FCP: "ms",
+  TTFB: "ms"
+};
+function RatingDot({ rating }) {
+  const { t } = useI18n();
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      "data-rating": rating,
+      "aria-label": t.ratingLabel(rating),
+      style: {
+        display: "inline-block",
+        width: "8px",
+        height: "8px",
+        borderRadius: "50%",
+        background: RATING_COLOR[rating],
+        marginRight: "6px",
+        verticalAlign: "middle"
+      }
+    }
+  );
+}
+function hexToRgba(hex, alpha) {
+  const m = /^#([0-9a-f]{6})$/i.exec(hex);
+  if (!m) return hex;
+  const v = m[1];
+  const r = parseInt(v.slice(0, 2), 16);
+  const g = parseInt(v.slice(2, 4), 16);
+  const b = parseInt(v.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function formatCls(value) {
+  if (value === 0) return "0";
+  if (value < 1e-3) return value.toExponential(2);
+  if (value < 0.01) return value.toFixed(4);
+  return value.toFixed(3);
+}
+function summary(s) {
+  switch (s.kind) {
+    case "forced-reflow":
+      return `@ ${s.at.toFixed(1)}ms \u2022 duration ${s.duration.toFixed(2)}ms`;
+    case "layout-shift":
+      return `@ ${s.at.toFixed(1)}ms \u2022 value ${formatCls(s.value)} \u2022 ${s.sources.length} source(s)`;
+    case "long-task":
+      return `@ ${s.at.toFixed(1)}ms \u2022 duration ${s.duration.toFixed(1)}ms`;
+    case "interaction":
+      return `${s.eventType}${s.target ? ` ${s.target}` : ""} \u2022 ${s.duration.toFixed(0)}ms`;
+    case "network":
+      return `${s.url.length > 60 ? s.url.slice(0, 57) + "..." : s.url} \u2022 ${s.duration.toFixed(0)}ms${s.blocking ? " \u2022 blocking" : ""}`;
+    case "web-vital":
+      return `${s.name}: ${s.value.toFixed(2)}`;
+    case "render":
+      return `${s.component} \u2022 ${s.reason} \u2022 ${s.duration.toFixed(2)}ms`;
+  }
+}
+var detailLabelStyle = { color: "#888", marginRight: "6px" };
+var detailRowStyle = { padding: "2px 0", display: "flex", gap: "6px" };
+var monoStyle = {
+  fontFamily: "SF Mono, Menlo, Consolas, monospace",
+  fontSize: "11px"
+};
+function LayoutShiftDetail({ s }) {
+  const { t } = useI18n();
+  return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.value }),
+      /* @__PURE__ */ jsx5("span", { children: s.value.toFixed(4) })
+    ] }),
+    s.sources.length === 0 ? /* @__PURE__ */ jsx5("div", { style: { color: "#666" }, children: t.noSourceRects }) : s.sources.map((r, i) => /* @__PURE__ */ jsxs5("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      /* @__PURE__ */ jsxs5("span", { style: { color: "#888" }, children: [
+        t.rect,
+        " ",
+        i + 1
+      ] }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        "x=",
+        r.x.toFixed(0),
+        " y=",
+        r.y.toFixed(0),
+        " w=",
+        r.width.toFixed(0),
+        " h=",
+        r.height.toFixed(0)
+      ] })
+    ] }, i))
+  ] });
+}
+function NetworkDetail({ s }) {
+  const { t } = useI18n();
+  return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsx5("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ jsx5("span", { children: s.url }) }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.started }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.startedAt.toFixed(0),
+        "ms"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.duration.toFixed(0),
+        "ms"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.size }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        (s.size / 1024).toFixed(2),
+        "KB (",
+        s.size,
+        " ",
+        t.bytes,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.renderBlocking }),
+      /* @__PURE__ */ jsx5("span", { children: s.blocking ? t.yes : t.no })
+    ] })
+  ] });
+}
+function WebVitalDetail({ s }) {
+  const { t } = useI18n();
+  return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.metric }),
+      /* @__PURE__ */ jsx5("span", { children: s.name })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.value }),
+      /* @__PURE__ */ jsx5("span", { children: s.value.toFixed(2) })
+    ] })
+  ] });
+}
+function RenderDetail({ s }) {
+  const { t } = useI18n();
+  return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.component }),
+      /* @__PURE__ */ jsx5("span", { children: s.component })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.reason }),
+      /* @__PURE__ */ jsx5(RenderReasonTag, { reason: s.reason, changedProps: s.changedProps })
+    ] }),
+    s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ jsxs5("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.changedProps }),
+      /* @__PURE__ */ jsx5("span", { children: s.changedProps.join(", ") })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.duration.toFixed(3),
+        "ms"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.at }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.at.toFixed(2),
+        "ms"
+      ] })
+    ] })
+  ] });
+}
+function StackFrames({
+  raw,
+  resolveFrame,
+  limit = 8
+}) {
+  const { t } = useI18n();
+  const original = raw.slice(0, limit);
+  const [frames, setFrames] = useState3(original);
+  const [resolving, setResolving] = useState3(false);
+  useEffect(() => {
+    if (!resolveFrame || original.length === 0) return;
+    let cancelled = false;
+    setResolving(true);
+    Promise.all(original.map((f) => resolveFrame(f))).then((resolved) => {
+      if (!cancelled) setFrames(resolved);
+    }).catch(() => {
+    }).finally(() => {
+      if (!cancelled) setResolving(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [raw]);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    resolving && /* @__PURE__ */ jsx5("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
+    frames.length === 0 ? /* @__PURE__ */ jsx5("div", { style: { color: "#666" }, children: t.noStack }) : frames.map((f, i) => /* @__PURE__ */ jsxs5("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      f.fnName ? /* @__PURE__ */ jsx5("span", { children: f.fnName }) : /* @__PURE__ */ jsx5("span", { style: { color: "#666" }, children: t.anonymous }),
+      /* @__PURE__ */ jsxs5("span", { style: { color: "#888" }, children: [
+        f.file,
+        ":",
+        f.line,
+        ":",
+        f.col
+      ] })
+    ] }, i))
+  ] });
+}
+function ForcedReflowDetail({
+  s,
+  resolveFrame
+}) {
+  return /* @__PURE__ */ jsx5("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ jsx5(StackFrames, { raw: s.stack, resolveFrame }) });
+}
+function HotFunctions({
+  attribution,
+  resolveFrame
+}) {
+  const { t } = useI18n();
+  const [frames, setFrames] = useState3(attribution.map((a) => a.frame));
+  useEffect(() => {
+    if (!resolveFrame) return;
+    let cancelled = false;
+    Promise.all(attribution.map((a) => resolveFrame(a.frame))).then((resolved) => {
+      if (!cancelled) setFrames(resolved);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [attribution]);
+  return /* @__PURE__ */ jsxs5("div", { style: { marginTop: "6px" }, children: [
+    /* @__PURE__ */ jsx5("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
+    /* @__PURE__ */ jsx5("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.hotFunctionsHint }),
+    attribution.map((a, i) => {
+      const f = frames[i] ?? a.frame;
+      const pct = Math.round(a.selfRatio * 100);
+      return /* @__PURE__ */ jsxs5("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("span", { style: { color: "#ff9f0a", fontWeight: 600 }, children: f.fnName || /* @__PURE__ */ jsx5("span", { style: { color: "#666" }, children: t.anonymous }) }),
+          /* @__PURE__ */ jsxs5("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
+            pct,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxs5("span", { style: { color: "#666", marginLeft: "6px" }, children: [
+            "(",
+            a.sampleCount,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
+          f.file,
+          ":",
+          f.line,
+          ":",
+          f.col
+        ] })
+      ] }, i);
+    })
+  ] });
+}
+function LongTaskDetail({
+  s,
+  resolveFrame
+}) {
+  const { t } = useI18n();
+  const scripts = s.scripts ? [...s.scripts].sort((a, b) => b.duration - a.duration) : [];
+  return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.started }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.at.toFixed(2),
+        "ms"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.ended }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        (s.at + s.duration).toFixed(2),
+        "ms"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.duration.toFixed(2),
+        "ms"
+      ] })
+    ] }),
+    typeof s.blockingDuration === "number" && /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.blockingTime }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.blockingDuration.toFixed(2),
+        "ms"
+      ] })
+    ] }),
+    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ jsx5(HotFunctions, { attribution: s.attribution, resolveFrame }),
+    s.scripts !== void 0 && /* @__PURE__ */ jsxs5("div", { style: { marginTop: "6px" }, children: [
+      /* @__PURE__ */ jsx5("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
+      scripts.length === 0 ? /* @__PURE__ */ jsx5("div", { style: { color: "#666" }, children: t.noScripts }) : scripts.map((script, i) => /* @__PURE__ */ jsxs5("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("span", { children: script.sourceFunctionName || /* @__PURE__ */ jsx5("span", { style: { color: "#666" }, children: t.anonymous }) }),
+          /* @__PURE__ */ jsx5("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
+          /* @__PURE__ */ jsxs5("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
+            script.duration.toFixed(1),
+            "ms"
+          ] })
+        ] }),
+        script.sourceURL && /* @__PURE__ */ jsxs5("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
+          script.sourceURL,
+          script.charPosition >= 0 ? `@${script.charPosition}` : ""
+        ] }),
+        script.invoker && /* @__PURE__ */ jsxs5("div", { style: { color: "#666" }, children: [
+          t.invoker,
+          ": ",
+          script.invoker
+        ] })
+      ] }, i))
+    ] }),
+    s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */ jsx5("div", { style: { marginTop: "4px" }, children: /* @__PURE__ */ jsx5(StackFrames, { raw: s.stack, resolveFrame, limit: 5 }) })
+  ] });
+}
+var INTERACTION_PHASE_COLOR = { input: "#8e8e93", processing: "#5ac8fa", presentation: "#34c759" };
+function InteractionDetail({
+  s,
+  resolveFrame
+}) {
+  const { t } = useI18n();
+  const total = Math.max(s.duration, 1);
+  const phases = [
+    { label: t.inputDelay, ms: s.inputDelay, color: INTERACTION_PHASE_COLOR.input },
+    { label: t.processingTime, ms: s.processing, color: INTERACTION_PHASE_COLOR.processing },
+    { label: t.presentation, ms: s.presentation, color: INTERACTION_PHASE_COLOR.presentation }
+  ];
+  return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.interactionEvent }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.eventType,
+        s.target ? ` \xB7 ${s.target}` : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        s.duration.toFixed(0),
+        "ms"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { style: { display: "flex", height: "10px", borderRadius: "3px", overflow: "hidden", margin: "5px 0 7px", background: "#1a1a1a" }, children: phases.map((p, i) => /* @__PURE__ */ jsx5("div", { style: { width: `${p.ms / total * 100}%`, background: p.color } }, i)) }),
+    phases.map((p, i) => /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsxs5("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
+        /* @__PURE__ */ jsx5("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
+        p.label
+      ] }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        p.ms.toFixed(0),
+        "ms"
+      ] })
+    ] }, i)),
+    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ jsx5(HotFunctions, { attribution: s.attribution, resolveFrame })
+  ] });
+}
+function SignalDetail({
+  s,
+  resolveFrame
+}) {
+  switch (s.kind) {
+    case "forced-reflow":
+      return /* @__PURE__ */ jsx5(ForcedReflowDetail, { s, resolveFrame });
+    case "layout-shift":
+      return /* @__PURE__ */ jsx5(LayoutShiftDetail, { s });
+    case "long-task":
+      return /* @__PURE__ */ jsx5(LongTaskDetail, { s, resolveFrame });
+    case "interaction":
+      return /* @__PURE__ */ jsx5(InteractionDetail, { s, resolveFrame });
+    case "network":
+      return /* @__PURE__ */ jsx5(NetworkDetail, { s });
+    case "web-vital":
+      return /* @__PURE__ */ jsx5(WebVitalDetail, { s });
+    case "render":
+      return /* @__PURE__ */ jsx5(RenderDetail, { s });
+  }
+}
+function SeverityDot({ sev, title }) {
+  const { t } = useI18n();
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      "data-severity": sev,
+      "aria-label": t.severityLabel(sev),
+      title: title ?? sev,
+      style: {
+        display: "inline-block",
+        width: "8px",
+        height: "8px",
+        borderRadius: "50%",
+        background: SEVERITY_COLOR[sev],
+        flex: "0 0 8px",
+        boxShadow: sev === "high" ? "0 0 6px rgba(255,59,48,0.6)" : "none"
+      }
+    }
+  );
+}
+function SummaryLine({ signal }) {
+  const { t } = useI18n();
+  if (signal.kind === "web-vital") {
+    const rating = webVitalRating(signal.name, signal.value);
+    const unit = WEB_VITAL_UNIT2[signal.name];
+    return /* @__PURE__ */ jsxs5("span", { children: [
+      /* @__PURE__ */ jsx5(RatingDot, { rating }),
+      /* @__PURE__ */ jsx5("strong", { children: signal.name }),
+      ": ",
+      signal.value.toFixed(2),
+      unit
+    ] });
+  }
+  const sev = severityForSignal(signal);
+  const color = SEVERITY_COLOR[sev];
+  if (signal.kind === "long-task") {
+    return /* @__PURE__ */ jsxs5("span", { children: [
+      "@ ",
+      signal.at.toFixed(1),
+      "ms \u2022 duration",
+      " ",
+      /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
+        signal.duration.toFixed(1),
+        "ms"
+      ] })
+    ] });
+  }
+  if (signal.kind === "forced-reflow") {
+    return /* @__PURE__ */ jsxs5("span", { children: [
+      "@ ",
+      signal.at.toFixed(1),
+      "ms \u2022 duration",
+      " ",
+      /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
+        signal.duration.toFixed(2),
+        "ms"
+      ] })
+    ] });
+  }
+  if (signal.kind === "layout-shift") {
+    return /* @__PURE__ */ jsxs5("span", { children: [
+      "@ ",
+      signal.at.toFixed(1),
+      "ms \u2022 value",
+      " ",
+      /* @__PURE__ */ jsx5("span", { style: { color }, children: formatCls(signal.value) }),
+      " \u2022 ",
+      t.sourceCount(signal.sources.length)
+    ] });
+  }
+  if (signal.kind === "render") {
+    return /* @__PURE__ */ jsxs5("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx5("strong", { children: signal.component }),
+      /* @__PURE__ */ jsx5(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
+      /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
+        signal.duration.toFixed(2),
+        "ms"
+      ] })
+    ] });
+  }
+  if (signal.kind === "network") {
+    const url = signal.url.length > 60 ? signal.url.slice(0, 57) + "..." : signal.url;
+    return /* @__PURE__ */ jsxs5("span", { children: [
+      url,
+      " \u2022 ",
+      /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
+        signal.duration.toFixed(0),
+        "ms"
+      ] }),
+      signal.blocking && /* @__PURE__ */ jsxs5("span", { style: { color: SEVERITY_COLOR.high }, children: [
+        " \u2022 ",
+        t.blocking
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx5("span", { children: summary(signal) });
+}
+function cascadeRootOf(list) {
+  return list.find((s) => s.reason === "state") ?? list.find((s) => s.reason === "mount") ?? [...list].sort((a, b) => a.depth - b.depth)[0];
+}
+function tabSupportsGrouping(kind) {
+  return kind === "render" || kind === "forced-reflow";
+}
+function sortSignalsBySeverity(signals) {
+  return [...signals].sort((a, b) => {
+    const ra = severityRank(severityForSignal(a));
+    const rb = severityRank(severityForSignal(b));
+    if (rb !== ra) return rb - ra;
+    return a.kind === "web-vital" || b.kind === "web-vital" ? 0 : ("at" in a ? a.at : 0) - ("at" in b ? b.at : 0);
+  });
+}
+function downloadRecording(result) {
+  const exportable = {
+    ...result,
+    signals: result.signals.map((s) => {
+      if (s.kind === "forced-reflow" || s.kind === "long-task") {
+        return { ...s, stack: s.stack };
+      }
+      return s;
+    })
+  };
+  const json = JSON.stringify(exportable, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  try {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `react-perfscope-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  } finally {
+    setTimeout(() => URL.revokeObjectURL(url), 1e3);
+  }
+}
+function groupSignals(signals, mode, kind) {
+  if (mode === "chronological") {
+    return signals.map((s, i) => ({ label: `#${i + 1}`, count: 1, signals: [s] }));
+  }
+  if (mode === "component" && kind === "render") {
+    const byName = /* @__PURE__ */ new Map();
+    for (const s of signals) {
+      if (s.kind !== "render") continue;
+      const k = s.component;
+      if (!byName.has(k)) byName.set(k, []);
+      byName.get(k).push(s);
+    }
+    return Array.from(byName.entries()).sort((a, b) => b[1].length - a[1].length).map(([label, list]) => ({ label, count: list.length, signals: list }));
+  }
+  if (mode === "commit" && kind === "render") {
+    const byCommit = /* @__PURE__ */ new Map();
+    for (const s of signals) {
+      if (s.kind !== "render") continue;
+      if (!byCommit.has(s.commitId)) byCommit.set(s.commitId, []);
+      byCommit.get(s.commitId).push(s);
+    }
+    return Array.from(byCommit.entries()).sort((a, b) => a[0] - b[0]).map(([id, list]) => {
+      const root = cascadeRootOf(list);
+      return { label: root?.component ?? `commit ${id}`, count: list.length, signals: list };
+    });
+  }
+  if (mode === "source" && kind === "forced-reflow") {
+    const bySource = /* @__PURE__ */ new Map();
+    for (const s of signals) {
+      if (s.kind !== "forced-reflow") continue;
+      const top = s.stack[0];
+      const k = top ? `${top.file}:${top.line}:${top.col}` : "(no stack)";
+      if (!bySource.has(k)) bySource.set(k, []);
+      bySource.get(k).push(s);
+    }
+    return Array.from(bySource.entries()).sort((a, b) => b[1].length - a[1].length).map(([label, list]) => ({ label, count: list.length, signals: list }));
+  }
+  return signals.map((s, i) => ({ label: `#${i + 1}`, count: 1, signals: [s] }));
+}
+function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveFrame }) {
+  const hasGeometry = signal.kind === "layout-shift" && signal.sources.length > 0;
+  const sev = severityForSignal(signal);
+  return /* @__PURE__ */ jsxs5(
+    "li",
+    {
+      "aria-expanded": expanded,
+      "data-severity": sev,
+      onClick: onToggleExpand,
+      onMouseEnter: () => {
+        if (hasGeometry && signal.kind === "layout-shift") onHoverGeometry(signal);
+      },
+      onMouseLeave: () => {
+        if (hasGeometry) onHoverGeometry(null);
+      },
+      style: {
+        padding: "6px 8px",
+        borderTop: "1px solid #1a1a1a",
+        borderLeft: `3px solid ${sev === "low" ? "transparent" : SEVERITY_COLOR[sev]}`,
+        fontFamily: "SF Mono, Menlo, Consolas, monospace",
+        fontSize: "11px",
+        cursor: "pointer",
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx5("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ jsx5(SeverityDot, { sev }),
+          /* @__PURE__ */ jsx5(SummaryLine, { signal })
+        ] }),
+        expanded && /* @__PURE__ */ jsx5("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a" }, children: /* @__PURE__ */ jsx5(SignalDetail, { s: signal, resolveFrame }) })
+      ]
+    }
+  );
+}
+function CascadeMembers({ members }) {
+  const minDepth = members.reduce((m, s) => Math.min(m, s.depth), Infinity);
+  return /* @__PURE__ */ jsx5("div", { children: members.map((m, i) => {
+    const indent = (m.depth - minDepth) * 14;
+    const isCascade = m.reason === "parent";
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        style: {
+          marginLeft: `${indent}px`,
+          padding: "2px 0",
+          display: "flex",
+          alignItems: "center",
+          gap: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsx5("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
+          /* @__PURE__ */ jsx5("strong", { children: m.component }),
+          /* @__PURE__ */ jsx5(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
+          /* @__PURE__ */ jsxs5("span", { style: { color: "#888" }, children: [
+            m.duration.toFixed(2),
+            "ms"
+          ] })
+        ]
+      },
+      i
+    );
+  }) });
+}
+function LanguageToggle() {
+  const { lang, setLang, t } = useI18n();
+  const langs = ["en", "ko"];
+  const labels = { en: "EN", ko: "\uD55C" };
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      role: "group",
+      "aria-label": t.language,
+      style: {
+        display: "inline-flex",
+        border: "1px solid #2a2a2a",
+        borderRadius: "4px",
+        overflow: "hidden"
+      },
+      children: langs.map((l) => {
+        const active = lang === l;
+        return /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": active,
+            "data-lang": l,
+            onClick: () => setLang(l),
+            style: {
+              background: active ? "#2a2a2a" : "transparent",
+              color: active ? "#e6e6e6" : "#888",
+              border: "none",
+              cursor: "pointer",
+              fontSize: "11px",
+              padding: "2px 8px",
+              fontWeight: active ? 600 : 400
+            },
+            children: labels[l]
+          },
+          l
+        );
+      })
+    }
+  );
+}
+function Panel(props) {
+  const { result, onClose, position = "bottom-right", resolveFrame } = props;
+  const { t } = useI18n();
+  const grouped = useMemo3(() => groupByKind(result.signals), [result.signals]);
+  const kindsPresent = KIND_ORDER.filter((k) => grouped[k].length > 0);
+  const hasTimelineSignals = result.signals.some((s) => s.kind !== "web-vital") || (result.heapSamples?.length ?? 0) > 0 || (result.frames?.length ?? 0) > 0;
+  const [activeTab, setActiveTab] = useState3(
+    kindsPresent[0] ?? "forced-reflow"
+  );
+  const activeKind = activeTab === "timeline" ? null : activeTab;
+  const setActiveKind = (k) => setActiveTab(k);
+  const [expandedKey, setExpandedKey] = useState3(null);
+  const [groupMode, setGroupMode] = useState3({});
+  const [sortMode, setSortMode] = useState3({});
+  const activeOverlayCount = useRef2(0);
+  useEffect(() => () => hideAllOverlays(), []);
+  function handleHover(signal) {
+    if (!signal) {
+      for (let i = 0; i < activeOverlayCount.current; i++) {
+        hideOverlay(`signal-${i}`);
+        hideOverlay(`signal-prev-${i}`);
+        hideArrow(`signal-arrow-${i}`);
+      }
+      activeOverlayCount.current = 0;
+      return;
+    }
+    const sev = severityForSignal(signal);
+    const color = SEVERITY_OVERLAY_COLOR[sev];
+    const fillAlpha = sev === "high" ? 0.2 : sev === "medium" ? 0.16 : 0.14;
+    const fillRgba = hexToRgba(color, fillAlpha);
+    signal.sources.forEach((r, i) => {
+      if (r.width <= 0 || r.height <= 0) return;
+      showOverlay(`signal-${i}`, r, { border: color, fill: fillRgba });
+      const prev = signal.previousSources?.[i] ?? null;
+      if (prev && prev.width > 0 && prev.height > 0) {
+        showOverlay(`signal-prev-${i}`, prev, {
+          border: color,
+          fill: "transparent",
+          dashed: true
+        });
+        const from = { x: prev.x + prev.width / 2, y: prev.y + prev.height / 2 };
+        const to = { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        if (Math.hypot(dx, dy) > 8) {
+          showArrow(`signal-arrow-${i}`, from, to, color);
+        }
+      }
+    });
+    activeOverlayCount.current = signal.sources.length;
+  }
+  const panelStyle = {
+    position: "fixed",
+    ...POSITION_STYLES2[position],
+    width: "460px",
+    maxHeight: "70vh",
+    background: "#0d0d0d",
+    color: "#e6e6e6",
+    border: "1px solid #2a2a2a",
+    borderRadius: "12px",
+    padding: "12px",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: "12px",
+    zIndex: "2147483647",
+    boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsxs5("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
+    /* @__PURE__ */ jsxs5("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
+      /* @__PURE__ */ jsx5("strong", { children: "react-perfscope" }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx5(LanguageToggle, {}),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "aria-label": t.saveAria,
+            onClick: () => downloadRecording(result),
+            title: t.saveTitle,
+            style: {
+              background: "transparent",
+              color: "#e6e6e6",
+              border: "1px solid #2a2a2a",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "11px",
+              padding: "2px 8px"
+            },
+            children: t.save
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "aria-label": t.closeAria,
+            onClick: onClose,
+            style: { background: "transparent", color: "#e6e6e6", border: "none", cursor: "pointer", fontSize: "16px" },
+            children: "\xD7"
+          }
+        )
+      ] })
+    ] }),
+    kindsPresent.length === 0 && /* @__PURE__ */ jsx5("div", { style: { color: "#888" }, children: t.noSignals }),
+    kindsPresent.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        SummaryHeader,
+        {
+          signals: result.signals,
+          grouped,
+          kindsPresent,
+          onKindClick: (k) => {
+            setActiveTab(k);
+            setExpandedKey(null);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs5("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
+        hasTimelineSignals && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "data-kind": "timeline",
+            onClick: () => {
+              setActiveTab("timeline");
+              setExpandedKey(null);
+            },
+            style: {
+              background: activeTab === "timeline" ? "#2a2a2a" : "#1a1a1a",
+              color: "#e6e6e6",
+              border: "1px solid #2a2a2a",
+              borderRadius: "6px",
+              padding: "4px 8px",
+              cursor: "pointer",
+              fontSize: "11px"
+            },
+            children: t.timeline
+          },
+          "timeline"
+        ),
+        kindsPresent.map((kind) => {
+          const worst = worstSeverity(grouped[kind]);
+          const active = activeKind === kind;
+          return /* @__PURE__ */ jsxs5(
+            "button",
+            {
+              type: "button",
+              "data-kind": kind,
+              "data-worst-severity": worst,
+              onClick: () => {
+                setActiveTab(kind);
+                setExpandedKey(null);
+              },
+              style: {
+                background: active ? "#2a2a2a" : "#1a1a1a",
+                color: "#e6e6e6",
+                border: `1px solid ${worst === "low" ? "#2a2a2a" : SEVERITY_COLOR[worst]}`,
+                borderRadius: "6px",
+                padding: "4px 8px",
+                cursor: "pointer",
+                fontSize: "11px",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "6px"
+              },
+              children: [
+                worst !== "low" && /* @__PURE__ */ jsx5(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
+                t.kindLabel(kind),
+                " ",
+                grouped[kind].length
+              ]
+            },
+            kind
+          );
+        })
+      ] }),
+      activeKind && activeTab !== "timeline" && /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px", fontSize: "11px", color: "#888", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxs5("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          t.sort,
+          /* @__PURE__ */ jsxs5(
+            "select",
+            {
+              "aria-label": t.sort,
+              value: sortMode[activeKind] ?? "chronological",
+              onChange: (e) => {
+                const v = e.target.value;
+                setSortMode({ ...sortMode, [activeKind]: v });
+                setExpandedKey(null);
+              },
+              style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
+              children: [
+                /* @__PURE__ */ jsx5("option", { value: "chronological", children: t.sortChronological }),
+                /* @__PURE__ */ jsx5("option", { value: "severity", children: t.sortSeverity })
+              ]
+            }
+          )
+        ] }),
+        tabSupportsGrouping(activeKind) && /* @__PURE__ */ jsxs5("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          t.groupBy,
+          /* @__PURE__ */ jsxs5(
+            "select",
+            {
+              "aria-label": t.groupBy,
+              value: groupMode[activeKind] ?? "chronological",
+              onChange: (e) => {
+                const v = e.target.value;
+                setGroupMode({ ...groupMode, [activeKind]: v });
+                setExpandedKey(null);
+              },
+              style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
+              children: [
+                /* @__PURE__ */ jsx5("option", { value: "chronological", children: t.groupChronological }),
+                activeKind === "render" && /* @__PURE__ */ jsx5("option", { value: "commit", children: t.groupCommit }),
+                activeKind === "render" && /* @__PURE__ */ jsx5("option", { value: "component", children: t.groupComponent }),
+                activeKind === "forced-reflow" && /* @__PURE__ */ jsx5("option", { value: "source", children: t.groupSource })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      activeTab === "timeline" && /* @__PURE__ */ jsx5("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: /* @__PURE__ */ jsx5(
+        Timeline,
+        {
+          signals: result.signals,
+          duration: result.duration,
+          startedAt: result.startedAt,
+          heapSamples: result.heapSamples,
+          frames: result.frames,
+          onJump: (s) => {
+            setActiveTab(s.kind);
+            const inOrder = grouped[s.kind];
+            const idx = inOrder.indexOf(s);
+            if (idx >= 0) setExpandedKey(`${s.kind}-${idx}`);
+          }
+        }
+      ) }),
+      activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ jsx5(
+        RenderInsights,
+        {
+          signals: grouped.render.filter((s) => s.kind === "render"),
+          onSelect: () => {
+            setGroupMode({ ...groupMode, render: "component" });
+            setExpandedKey(null);
+          }
+        }
+      ),
+      activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ jsx5(
+        "div",
+        {
+          style: {
+            padding: "6px 8px",
+            marginBottom: "6px",
+            fontSize: "11px",
+            color: "#888",
+            background: "#141414",
+            border: "1px solid #1f1f1f",
+            borderRadius: "6px"
+          },
+          children: t.interactionThresholdHint
+        }
+      ),
+      /* @__PURE__ */ jsx5("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
+        const baseSignals = (sortMode[activeKind] ?? "chronological") === "severity" ? sortSignalsBySeverity(grouped[activeKind]) : grouped[activeKind];
+        return groupSignals(baseSignals, groupMode[activeKind] ?? "chronological", activeKind);
+      })().map((g, gi) => {
+        const currentMode = groupMode[activeKind] ?? "chronological";
+        if (currentMode === "chronological") {
+          const key2 = `${activeKind}-${gi}`;
+          return /* @__PURE__ */ jsx5(
+            SignalRow,
+            {
+              signal: g.signals[0],
+              expanded: expandedKey === key2,
+              onToggleExpand: () => setExpandedKey(expandedKey === key2 ? null : key2),
+              onHoverGeometry: handleHover,
+              resolveFrame
+            },
+            key2
+          );
+        }
+        const key = `${activeKind}-group-${gi}`;
+        const isOpen = expandedKey === key;
+        const isCascade = activeKind === "render" && currentMode === "commit";
+        const renderMembers = g.signals.filter((s) => s.kind === "render");
+        const unnecessary = isCascade ? renderMembers.filter((s) => s.reason === "parent").length : 0;
+        return /* @__PURE__ */ jsxs5(
+          "li",
+          {
+            "aria-expanded": isOpen,
+            onClick: () => setExpandedKey(isOpen ? null : key),
+            style: {
+              padding: "6px 8px",
+              borderTop: "1px solid #1a1a1a",
+              borderLeft: unnecessary > 0 ? `3px solid ${RENDER_REASON_COLOR.parent}` : void 0,
+              fontFamily: "SF Mono, Menlo, Consolas, monospace",
+              fontSize: "11px",
+              cursor: "pointer",
+              userSelect: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx5("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
+                /* @__PURE__ */ jsxs5("span", { children: [
+                  /* @__PURE__ */ jsx5("strong", { children: g.label }),
+                  " \xD7",
+                  g.count
+                ] }),
+                isCascade && unnecessary > 0 && /* @__PURE__ */ jsxs5("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
+                  "\u26A0 ",
+                  t.unnecessaryRenders(unnecessary)
+                ] })
+              ] }),
+              isOpen && /* @__PURE__ */ jsx5("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a", paddingLeft: "8px" }, children: isCascade ? /* @__PURE__ */ jsx5(CascadeMembers, { members: renderMembers }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */ jsx5("div", { style: { padding: "2px 0" }, children: /* @__PURE__ */ jsx5(SummaryLine, { signal: s }) }, si)),
+                g.signals.length > 20 && /* @__PURE__ */ jsx5("div", { style: { color: "#888", marginTop: "4px" }, children: t.moreItems(g.signals.length - 20) })
+              ] }) })
+            ]
+          },
+          key
+        );
+      }) })
+    ] })
+  ] });
+}
+
+// src/app.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "preact/jsx-runtime";
+function App(props) {
+  const { recorder, position = "bottom-right", resolveFrame, finalize } = props;
+  const [recording, setRecording] = useState4(false);
+  const [result, setResult] = useState4(null);
+  const [elapsedMs, setElapsedMs] = useState4(0);
+  const startedAtRef = useRef3(0);
+  const rafRef = useRef3(null);
+  const resultTokenRef = useRef3(0);
+  useEffect2(() => {
+    if (!recording) {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      return;
+    }
+    const tick = () => {
+      setElapsedMs(performance.now() - startedAtRef.current);
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [recording]);
+  function onToggle() {
+    if (!recording) {
+      startedAtRef.current = performance.now();
+      setElapsedMs(0);
+      setResult(null);
+      recorder.start();
+      setRecording(true);
+    } else {
+      const r = recorder.stop();
+      const token = ++resultTokenRef.current;
+      setRecording(false);
+      setResult(r);
+      if (finalize) {
+        finalize(r).then((enriched) => {
+          if (resultTokenRef.current === token) setResult(enriched);
+        }).catch(() => {
+        });
+      }
+    }
+  }
+  function onClose() {
+    setResult(null);
+  }
+  return /* @__PURE__ */ jsxs6(I18nProvider, { children: [
+    result === null && /* @__PURE__ */ jsx6(
+      Widget,
+      {
+        recording,
+        elapsedMs,
+        onToggle,
+        position
+      }
+    ),
+    result !== null && /* @__PURE__ */ jsx6(Panel, { result, position, onClose, resolveFrame })
+  ] });
+}
+
+// src/mount.tsx
+import { jsx as jsx7 } from "preact/jsx-runtime";
+function mount(opts) {
+  const { recorder, position = "bottom-right", host = document.body, resolveFrame, finalize } = opts;
+  return mountShadow(
+    /* @__PURE__ */ jsx7(App, { recorder, position, resolveFrame, finalize }),
+    { parent: host }
+  );
+}
+export {
+  App,
+  Panel,
+  Widget,
+  hideAllOverlays,
+  hideOverlay,
+  mount,
+  mountShadow,
+  showOverlay
+};
+//# sourceMappingURL=index.js.map