@react-perfscope/ui 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -147,6 +147,9 @@ var en = {
   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",
+  leaksTitle: "Suspected leaks",
+  leakHint: "Components whose unmounted instances stayed in memory with a count that kept climbing. Shows which component leaks and how many instances \u2014 not what retains them (a heap snapshot, unavailable in-page, is needed for that).",
+  leakSuspect: (component, retained, unmounted) => `${component} \u2014 ${retained} retained of ${unmounted} unmounted, climbing`,
   fpsLabel: "fps",
   fpsUnsupported: "frame timing unavailable",
   fpsBadge: (minFps, dropped) => `min ${minFps}fps \xB7 ${dropped} dropped`,
@@ -179,7 +182,8 @@ var en = {
   processingTime: "processing",
   presentation: "presentation",
   interactionThresholdHint: "Only interactions \u226540ms are shown \u2014 INP surfaces the slow ones; fast clicks are omitted.",
-  layoutShiftHint: "Every layout shift, including ones triggered by your interactions. The CLS metric excludes input-driven shifts, so this is not a CLS score."
+  layoutShiftHint: "Every layout shift, including ones triggered by your interactions. The CLS metric excludes input-driven shifts, so this is not a CLS score.",
+  unsupportedInBrowser: (kinds) => `Not measurable in this browser (the API is missing, not that nothing happened): ${kinds}.`
 };
 var KIND_LABELS_KO = {
   render: "\uB80C\uB354",
@@ -241,6 +245,9 @@ var ko = {
   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",
+  leaksTitle: "\uB204\uC218 \uC758\uC2EC",
+  leakHint: "\uC5B8\uB9C8\uC6B4\uD2B8\uB410\uB294\uB370 \uBA54\uBAA8\uB9AC\uC5D0 \uB0A8\uACE0 \uADF8 \uC218\uAC00 \uACC4\uC18D \uB298\uC5B4\uB09C \uCEF4\uD3EC\uB10C\uD2B8\uC608\uC694. \uC5B4\uB5A4 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uBA87 \uAC1C \uB204\uC218\uD558\uB294\uC9C0\uB294 \uBCF4\uC5EC\uC8FC\uC9C0\uB9CC, \uBB34\uC5C7\uC774 \uBD99\uC7A1\uACE0 \uC788\uB294\uC9C0\uB294(\uD799 \uC2A4\uB0C5\uC0F7\uC774 \uD544\uC694\uD55C\uB370 in-page\uC5D0\uC120 \uBD88\uAC00) \uC54C \uC218 \uC5C6\uC5B4\uC694.",
+  leakSuspect: (component, retained, unmounted) => `${component} \u2014 \uC5B8\uB9C8\uC6B4\uD2B8 ${unmounted}\uAC1C \uC911 ${retained}\uAC1C \uBCF4\uC720, \uC99D\uAC00 \uC911`,
   fpsLabel: "fps",
   fpsUnsupported: "\uD504\uB808\uC784 \uCE21\uC815 \uBBF8\uC9C0\uC6D0",
   fpsBadge: (minFps, dropped) => `\uCD5C\uC800 ${minFps}fps \xB7 \uB4DC\uB78D ${dropped}`,
@@ -273,7 +280,8 @@ var ko = {
   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.",
-  layoutShiftHint: "\uC0AC\uC6A9\uC790 \uC778\uD130\uB799\uC158\uC73C\uB85C \uC0DD\uAE34 \uAC83\uAE4C\uC9C0 \uD3EC\uD568\uD55C \uBAA8\uB4E0 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8\uC608\uC694. CLS \uC9C0\uD45C\uB294 \uC785\uB825\uC73C\uB85C \uC778\uD55C \uC2DC\uD504\uD2B8\uB97C \uC81C\uC678\uD558\uBBC0\uB85C, \uC774\uAC74 CLS \uC810\uC218\uAC00 \uC544\uB2C8\uC5D0\uC694."
+  layoutShiftHint: "\uC0AC\uC6A9\uC790 \uC778\uD130\uB799\uC158\uC73C\uB85C \uC0DD\uAE34 \uAC83\uAE4C\uC9C0 \uD3EC\uD568\uD55C \uBAA8\uB4E0 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8\uC608\uC694. CLS \uC9C0\uD45C\uB294 \uC785\uB825\uC73C\uB85C \uC778\uD55C \uC2DC\uD504\uD2B8\uB97C \uC81C\uC678\uD558\uBBC0\uB85C, \uC774\uAC74 CLS \uC810\uC218\uAC00 \uC544\uB2C8\uC5D0\uC694.",
+  unsupportedInBrowser: (kinds) => `\uC774 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC120 \uCE21\uC815\uD560 \uC218 \uC5C6\uC5B4\uC694 (\uC544\uBB34 \uC77C\uB3C4 \uC5C6\uB358 \uAC8C \uC544\uB2C8\uB77C API\uAC00 \uC5C6\uC74C): ${kinds}.`
 };
 var STRINGS = { en, ko };
 function isLang(v) {
@@ -383,6 +391,7 @@ function Widget(props) {
 
 // src/panel.tsx
 var import_hooks3 = require("preact/hooks");
+var import_core4 = require("@react-perfscope/core");
 
 // src/overlay.ts
 var OVERLAY_MARKER = "data-perfscope-overlay";
@@ -1795,8 +1804,39 @@ function TooltipContent({ s, startedAt }) {
   }
 }
 
-// src/render-insights.tsx
+// src/leaks.tsx
 var import_jsx_runtime4 = require("preact/jsx-runtime");
+function LeakList({ suspects }) {
+  const { t } = useI18n();
+  if (!suspects || suspects.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-leaks": "", style: { padding: "8px 10px", borderBottom: "1px solid #1c1c1c" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "6px" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "#ef4444", fontSize: "11px", fontWeight: 600 }, children: t.leaksTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { color: "#666", fontSize: "10px" }, children: [
+            "\xD7",
+            suspects.length
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: suspects.map((s) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "li",
+      {
+        style: { color: "#e6e6e6", fontSize: "11px", padding: "2px 0", fontVariantNumeric: "tabular-nums" },
+        children: t.leakSuspect(s.component, s.retained, s.unmounted)
+      },
+      s.component
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { color: "#666", fontSize: "10px", margin: "6px 0 0", lineHeight: 1.4 }, children: t.leakHint })
+  ] });
+}
+
+// src/render-insights.tsx
+var import_jsx_runtime5 = require("preact/jsx-runtime");
 function aggregate(signals) {
   const byName = /* @__PURE__ */ new Map();
   for (const s of signals) {
@@ -1827,7 +1867,7 @@ function RenderInsights({ signals, onSelect }) {
   const top = rows.slice(0, TOP_N);
   const max = top.length > 0 ? top[0].totalMs : 1;
   const hiddenCount = rows.length - top.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       style: {
@@ -1838,12 +1878,12 @@ function RenderInsights({ signals, onSelect }) {
         borderRadius: "8px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#888", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: "6px" }, children: t.topRenderers }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "10px", color: "#888", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: "6px" }, children: t.topRenderers }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime4.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
                 "data-component": a.component,
@@ -1859,8 +1899,8 @@ function RenderInsights({ signals, onSelect }) {
                 },
                 title: t.rendererDetail(a.component, a.count, a.totalMs, a.maxMs),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { flex: "0 0 30%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.component }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: "1", position: "relative", height: "14px", background: "#1f1f1f", borderRadius: "2px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { style: { flex: "0 0 30%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.component }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: "1", position: "relative", height: "14px", background: "#1f1f1f", borderRadius: "2px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
                       style: {
@@ -1875,11 +1915,11 @@ function RenderInsights({ signals, onSelect }) {
                       }
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { flex: "0 0 auto", color, minWidth: "56px", textAlign: "right" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { flex: "0 0 auto", color, minWidth: "56px", textAlign: "right" }, children: [
                     a.totalMs.toFixed(1),
                     "ms"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { flex: "0 0 auto", color: "#888", minWidth: "32px", textAlign: "right" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { flex: "0 0 auto", color: "#888", minWidth: "32px", textAlign: "right" }, children: [
                     "\xD7",
                     a.count
                   ] })
@@ -1888,7 +1928,7 @@ function RenderInsights({ signals, onSelect }) {
               a.component
             );
           }),
-          hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "10px", color: "#666", marginTop: "2px" }, children: t.moreComponents(hiddenCount) })
+          hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "10px", color: "#666", marginTop: "2px" }, children: t.moreComponents(hiddenCount) })
         ] })
       ]
     }
@@ -1899,7 +1939,7 @@ function RenderInsights({ signals, onSelect }) {
 var import_core2 = require("@react-perfscope/core");
 
 // src/episode-shared.tsx
-var import_jsx_runtime5 = require("preact/jsx-runtime");
+var import_jsx_runtime6 = require("preact/jsx-runtime");
 function memberLabel(m) {
   const s = m.signal;
   if (s.kind === "render") return `${s.component} (${s.reason})`;
@@ -1910,18 +1950,18 @@ function memberLabel(m) {
   return `layout shift ${s.value.toFixed(3)}`;
 }
 function EpisodeMemberRow({ member }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       "data-member-kind": member.signal.kind,
       style: { display: "flex", alignItems: "center", gap: "6px", padding: "1px 0", color: "#ccc" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: memberLabel(member) }),
-        member.causedBy && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { flex: "0 0 auto", color: "#888" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: memberLabel(member) }),
+        member.causedBy && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { flex: "0 0 auto", color: "#888" }, children: [
           "\u2190 ",
           member.causedBy.component
         ] }),
-        member.confidence === "caused" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        member.confidence === "caused" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             style: {
@@ -1940,12 +1980,12 @@ function EpisodeMemberRow({ member }) {
   );
 }
 function EpisodeMemberList({ members }) {
-  if (members.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#555" }, children: "\u2014" });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: members.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EpisodeMemberRow, { member: m }, i)) });
+  if (members.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#555" }, children: "\u2014" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: members.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EpisodeMemberRow, { member: m }, i)) });
 }
 
 // src/inp-episode.tsx
-var import_jsx_runtime6 = require("preact/jsx-runtime");
+var import_jsx_runtime7 = require("preact/jsx-runtime");
 var PHASES = [
   { phase: "input-delay", labelKey: "inputDelay" },
   { phase: "processing", labelKey: "processingTime" },
@@ -1970,7 +2010,7 @@ function InpEpisode({ signals }) {
   if (!episode || episode.anchor.kind !== "interaction") return null;
   const a = episode.anchor;
   const target = a.target ? ` on ${a.target}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       "data-inp-episode": true,
@@ -1984,33 +2024,33 @@ function InpEpisode({ signals }) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: a.eventType }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: a.eventType }),
           target,
           " \u2014 ",
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("strong", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("strong", { children: [
             Math.round(a.duration),
             "ms"
           ] }),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#888" }, children: "INP" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: "#888" }, children: "INP" })
         ] }),
         PHASES.map(({ phase, labelKey }) => {
           const members = episode.members.filter((m) => m.phase === phase);
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
               "data-inp-phase": phase,
               style: { display: "flex", gap: "8px", padding: "5px 8px", borderTop: "1px solid #1a1a1a" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: "0 0 92px", color: "#aaa" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: "0 0 92px", color: "#aaa" }, children: [
                   t[labelKey],
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { color: "#666", fontSize: "10px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { color: "#666", fontSize: "10px" }, children: [
                     Math.round(phaseMs(episode, phase)),
                     "ms"
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EpisodeMemberList, { members }) })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EpisodeMemberList, { members }) })
               ]
             },
             phase
@@ -2023,7 +2063,7 @@ function InpEpisode({ signals }) {
 
 // src/long-task-episode.tsx
 var import_core3 = require("@react-perfscope/core");
-var import_jsx_runtime7 = require("preact/jsx-runtime");
+var import_jsx_runtime8 = require("preact/jsx-runtime");
 function worstLongTaskEpisode(signals) {
   let worst = null;
   for (const ep of (0, import_core3.correlate)(signals)) {
@@ -2038,7 +2078,7 @@ function LongTaskEpisode({ signals }) {
   if (!episode || episode.anchor.kind !== "long-task") return null;
   if (episode.members.length === 0) return null;
   const a = episode.anchor;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       "data-long-task-episode": true,
@@ -2052,15 +2092,15 @@ function LongTaskEpisode({ signals }) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: t.kindLabel("long-task") }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: t.kindLabel("long-task") }),
           " \u2014 ",
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("strong", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("strong", { children: [
             Math.round(a.duration),
             "ms"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "5px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EpisodeMemberList, { members: episode.members }) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "5px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EpisodeMemberList, { members: episode.members }) })
       ]
     }
   );
@@ -2106,7 +2146,7 @@ function signalMatchesFilter(signal, query) {
 }
 
 // src/panel.tsx
-var import_jsx_runtime8 = require("preact/jsx-runtime");
+var import_jsx_runtime9 = require("preact/jsx-runtime");
 var RENDER_REASON_COLOR = {
   mount: "#5ac8fa",
   state: "#34c759",
@@ -2130,7 +2170,7 @@ function RenderReasonTag({ reason, changedProps }) {
   const color = RENDER_REASON_COLOR[reason];
   const label = renderReasonLabel(t, reason);
   const keys = reason === "props" && changedProps && changedProps.length > 0 ? `: ${changedProps.join(", ")}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "span",
     {
       style: {
@@ -2186,7 +2226,7 @@ var WEB_VITAL_UNIT2 = {
 };
 function RatingDot({ rating }) {
   const { t } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
       "data-rating": rating,
@@ -2244,18 +2284,18 @@ var monoStyle = {
 };
 function LayoutShiftDetail({ s }) {
   const { t } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.value }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.value.toFixed(4) })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.value.toFixed(4) })
     ] }),
-    s.sources.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666" }, children: t.noSourceRects }) : s.sources.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
+    s.sources.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666" }, children: t.noSourceRects }) : s.sources.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#888" }, children: [
         t.rect,
         " ",
         i + 1
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         "x=",
         r.x.toFixed(0),
         " y=",
@@ -2270,25 +2310,25 @@ function LayoutShiftDetail({ s }) {
 }
 function NetworkDetail({ s }) {
   const { t } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.url }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.started }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.url }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.started }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.startedAt.toFixed(0),
         "ms"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.duration.toFixed(0),
         "ms"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.size }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.size }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         (s.size / 1024).toFixed(2),
         "KB (",
         s.size,
@@ -2297,69 +2337,69 @@ function NetworkDetail({ s }) {
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.renderBlocking }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.blocking ? t.yes : t.no })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.renderBlocking }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.blocking ? t.yes : t.no })
     ] })
   ] });
 }
 function WebVitalDetail({ s }) {
   const { t } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.metric }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.name })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.metric }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.name })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.value }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.value.toFixed(2) })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.value.toFixed(2) })
     ] })
   ] });
 }
 function RenderDetail({ s }) {
   const { t } = useI18n();
   if (s.members && s.members.length > 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
           s.duration.toFixed(3),
           "ms"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.at }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.at }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
           s.at.toFixed(2),
           "ms"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CascadeMembers, { members: s.members }) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CascadeMembers, { members: s.members }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.component }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.component })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.component }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.component })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.reason }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: s.reason, changedProps: s.changedProps })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.reason }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderReasonTag, { reason: s.reason, changedProps: s.changedProps })
     ] }),
-    s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.changedProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.changedProps.join(", ") })
+    s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.changedProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.changedProps.join(", ") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.duration.toFixed(3),
         "ms"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.at }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.at }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.at.toFixed(2),
         "ms"
       ] })
@@ -2389,11 +2429,11 @@ function StackFrames({
       cancelled = true;
     };
   }, [raw]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    resolving && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
-    frames.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666" }, children: t.noStack }) : frames.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
-      f.fnName ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: f.fnName }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#666" }, children: t.anonymous }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    resolving && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
+    frames.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666" }, children: t.noStack }) : frames.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      f.fnName ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: f.fnName }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#666" }, children: t.anonymous }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#888" }, children: [
         f.file,
         ":",
         f.line,
@@ -2407,7 +2447,7 @@ function ForcedReflowDetail({
   s,
   resolveFrame
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StackFrames, { raw: s.stack, resolveFrame }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StackFrames, { raw: s.stack, resolveFrame }) });
 }
 function HotFunctions({
   attribution,
@@ -2426,26 +2466,26 @@ function HotFunctions({
       cancelled = true;
     };
   }, [attribution]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginTop: "6px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.hotFunctionsHint }),
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginTop: "6px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#ff9f0a", fontWeight: 600 }, children: f.fnName || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#ff9f0a", fontWeight: 600 }, children: f.fnName || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
             pct,
             "%"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#666", marginLeft: "6px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#666", marginLeft: "6px" }, children: [
             "(",
             a.sampleCount,
             ")"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
           f.file,
           ":",
           f.line,
@@ -2462,59 +2502,59 @@ function LongTaskDetail({
 }) {
   const { t } = useI18n();
   const scripts = s.scripts ? [...s.scripts].sort((a, b) => b.duration - a.duration) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.started }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.started }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.at.toFixed(2),
         "ms"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.ended }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.ended }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         (s.at + s.duration).toFixed(2),
         "ms"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.duration.toFixed(2),
         "ms"
       ] })
     ] }),
-    typeof s.blockingDuration === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.blockingTime }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    typeof s.blockingDuration === "number" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.blockingTime }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.blockingDuration.toFixed(2),
         "ms"
       ] })
     ] }),
-    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame }),
-    s.scripts !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginTop: "6px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
-      scripts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666" }, children: t.noScripts }) : scripts.map((script, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: script.sourceFunctionName || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
+    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame }),
+    s.scripts !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginTop: "6px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
+      scripts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666" }, children: t.noScripts }) : scripts.map((script, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: script.sourceFunctionName || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
             script.duration.toFixed(1),
             "ms"
           ] })
         ] }),
-        script.sourceURL && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
+        script.sourceURL && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
           script.sourceURL,
           script.charPosition >= 0 ? `@${script.charPosition}` : ""
         ] }),
-        script.invoker && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#666" }, children: [
+        script.invoker && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#666" }, children: [
           t.invoker,
           ": ",
           script.invoker
         ] })
       ] }, i))
     ] }),
-    s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StackFrames, { raw: s.stack, resolveFrame, limit: 5 }) })
+    s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StackFrames, { raw: s.stack, resolveFrame, limit: 5 }) })
   ] });
 }
 var INTERACTION_PHASE_COLOR = { input: "#8e8e93", processing: "#5ac8fa", presentation: "#34c759" };
@@ -2529,33 +2569,33 @@ function InteractionDetail({
     { label: t.processingTime, ms: s.processing, color: INTERACTION_PHASE_COLOR.processing },
     { label: t.presentation, ms: s.presentation, color: INTERACTION_PHASE_COLOR.presentation }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.interactionEvent }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.interactionEvent }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.eventType,
         s.target ? ` \xB7 ${s.target}` : ""
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         s.duration.toFixed(0),
         "ms"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", height: "10px", borderRadius: "3px", overflow: "hidden", margin: "5px 0 7px", background: "#1a1a1a" }, children: phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { width: `${p.ms / total * 100}%`, background: p.color } }, i)) }),
-    phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", height: "10px", borderRadius: "3px", overflow: "hidden", margin: "5px 0 7px", background: "#1a1a1a" }, children: phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { width: `${p.ms / total * 100}%`, background: p.color } }, i)) }),
+    phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
         p.label
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         p.ms.toFixed(0),
         "ms"
       ] })
     ] }, i)),
-    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame })
+    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame })
   ] });
 }
 function SignalDetail({
@@ -2564,24 +2604,24 @@ function SignalDetail({
 }) {
   switch (s.kind) {
     case "forced-reflow":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ForcedReflowDetail, { s, resolveFrame });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ForcedReflowDetail, { s, resolveFrame });
     case "layout-shift":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutShiftDetail, { s });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LayoutShiftDetail, { s });
     case "long-task":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LongTaskDetail, { s, resolveFrame });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LongTaskDetail, { s, resolveFrame });
     case "interaction":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InteractionDetail, { s, resolveFrame });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InteractionDetail, { s, resolveFrame });
     case "network":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NetworkDetail, { s });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NetworkDetail, { s });
     case "web-vital":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(WebVitalDetail, { s });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WebVitalDetail, { s });
     case "render":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderDetail, { s });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderDetail, { s });
   }
 }
 function SeverityDot({ sev, title }) {
   const { t } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
       "data-severity": sev,
@@ -2604,9 +2644,9 @@ function SummaryLine({ signal }) {
   if (signal.kind === "web-vital") {
     const rating = webVitalRating(signal.name, signal.value);
     const unit = WEB_VITAL_UNIT2[signal.name];
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RatingDot, { rating }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: signal.name }),
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RatingDot, { rating }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: signal.name }),
       ": ",
       signal.value.toFixed(2),
       unit
@@ -2615,12 +2655,12 @@ function SummaryLine({ signal }) {
   const sev = severityForSignal(signal);
   const color = SEVERITY_COLOR[sev];
   if (signal.kind === "long-task") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
       "@ ",
       signal.at.toFixed(1),
       "ms \u2022 duration",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color }, children: [
         signal.duration.toFixed(1),
         "ms"
       ] })
@@ -2628,59 +2668,59 @@ function SummaryLine({ signal }) {
   }
   if (signal.kind === "forced-reflow") {
     const count = signal.count ?? 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
       "@ ",
       signal.at.toFixed(1),
       "ms \u2022 duration",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
       ] }),
-      count > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
+      count > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#888" }, children: [
         " \u2022 ",
         t.coalescedReads(count)
       ] })
     ] });
   }
   if (signal.kind === "layout-shift") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
       "@ ",
       signal.at.toFixed(1),
       "ms \u2022 value",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color }, children: formatCls(signal.value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color }, children: formatCls(signal.value) }),
       " \u2022 ",
       t.sourceCount(signal.sources.length)
     ] });
   }
   if (signal.kind === "render") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: signal.component }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: signal.component }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
       ] }),
-      signal.count && signal.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
+      signal.count && signal.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
     ] });
   }
   if (signal.kind === "network") {
     const url = signal.url.length > 60 ? signal.url.slice(0, 57) + "..." : signal.url;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
       url,
       " \u2022 ",
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color }, children: [
         signal.duration.toFixed(0),
         "ms"
       ] }),
-      signal.blocking && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.high }, children: [
+      signal.blocking && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: SEVERITY_COLOR.high }, children: [
         " \u2022 ",
         t.blocking
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: summary(signal) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: summary(signal) });
 }
 function tabSupportsGrouping(kind) {
   return kind === "render" || kind === "forced-reflow";
@@ -2754,7 +2794,7 @@ function groupSignals(signals, mode, kind) {
 function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveFrame }) {
   const hasGeometry = signal.kind === "layout-shift" && signal.sources.length > 0;
   const sev = severityForSignal(signal);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "li",
     {
       "aria-expanded": expanded,
@@ -2776,22 +2816,22 @@ function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveF
         userSelect: "none"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SeverityDot, { sev }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SummaryLine, { signal })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SeverityDot, { sev }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SummaryLine, { signal })
         ] }),
-        expanded && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SignalDetail, { s: signal, resolveFrame }) })
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SignalDetail, { s: signal, resolveFrame }) })
       ]
     }
   );
 }
 function CascadeMembers({ members }) {
   const minDepth = members.reduce((m, s) => Math.min(m, s.depth), Infinity);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: members.map((m, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: members.map((m, i) => {
     const indent = (m.depth - minDepth) * 14;
     const isCascade = m.reason === "parent";
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         style: {
@@ -2802,10 +2842,10 @@ function CascadeMembers({ members }) {
           gap: "6px"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: m.component }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: m.component }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#888" }, children: [
             m.duration.toFixed(2),
             "ms"
           ] })
@@ -2819,7 +2859,7 @@ function LanguageToggle() {
   const { lang, setLang, t } = useI18n();
   const langs = ["en", "ko"];
   const labels = { en: "EN", ko: "\uD55C" };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       role: "group",
@@ -2832,7 +2872,7 @@ function LanguageToggle() {
       },
       children: langs.map((l) => {
         const active = lang === l;
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -2861,7 +2901,8 @@ function Panel(props) {
   const { t } = useI18n();
   const grouped = (0, import_hooks3.useMemo)(() => 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 unsupported = (0, import_hooks3.useMemo)(() => (0, import_core4.unsupportedKinds)(), []);
+  const hasTimelineSignals = result.signals.some((s) => s.kind !== "web-vital") || (result.heapSamples?.length ?? 0) > 0 || (result.frames?.length ?? 0) > 0 || (result.leakSuspects?.length ?? 0) > 0;
   const [activeTab, setActiveTab] = (0, import_hooks3.useState)(
     kindsPresent[0] ?? "forced-reflow"
   );
@@ -2926,12 +2967,12 @@ function Panel(props) {
     flexDirection: "column",
     overflow: "hidden"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: "react-perfscope" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LanguageToggle, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: "react-perfscope" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LanguageToggle, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -2950,7 +2991,7 @@ function Panel(props) {
             children: t.save
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -2962,9 +3003,24 @@ function Panel(props) {
         )
       ] })
     ] }),
-    kindsPresent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#888" }, children: t.noSignals }),
-    kindsPresent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    unsupported.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        style: {
+          padding: "6px 8px",
+          marginBottom: "8px",
+          fontSize: "11px",
+          color: "#888",
+          background: "#141414",
+          border: "1px solid #1f1f1f",
+          borderRadius: "6px"
+        },
+        children: t.unsupportedInBrowser(unsupported.map((k) => t.kindLabel(k)).join(", "))
+      }
+    ),
+    kindsPresent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#888" }, children: t.noSignals }),
+    kindsPresent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         SummaryHeader,
         {
           signals: result.signals,
@@ -2976,8 +3032,8 @@ function Panel(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
-        hasTimelineSignals && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
+        hasTimelineSignals && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -3002,7 +3058,7 @@ function Panel(props) {
         kindsPresent.map((kind) => {
           const worst = worstSeverity(grouped[kind]);
           const active = activeKind === kind;
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "button",
             {
               type: "button",
@@ -3025,7 +3081,7 @@ function Panel(props) {
                 gap: "6px"
               },
               children: [
-                worst !== "low" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
+                worst !== "low" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
                 t.kindLabel(kind),
                 " ",
                 grouped[kind].length
@@ -3035,10 +3091,10 @@ function Panel(props) {
           );
         })
       ] }),
-      activeKind && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px", fontSize: "11px", color: "#888", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+      activeKind && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px", fontSize: "11px", color: "#888", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
           t.sort,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "select",
             {
               "aria-label": t.sort,
@@ -3050,15 +3106,15 @@ function Panel(props) {
               },
               style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "chronological", children: t.sortChronological }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "severity", children: t.sortSeverity })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "chronological", children: t.sortChronological }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "severity", children: t.sortSeverity })
               ]
             }
           )
         ] }),
-        tabSupportsGrouping(activeKind) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+        tabSupportsGrouping(activeKind) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
           t.groupBy,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "select",
             {
               "aria-label": t.groupBy,
@@ -3070,15 +3126,15 @@ function Panel(props) {
               },
               style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "chronological", children: t.groupChronological }),
-                activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "commit", children: t.groupCommit }),
-                activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "component", children: t.groupComponent }),
-                activeKind === "forced-reflow" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "source", children: t.groupSource })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "chronological", children: t.groupChronological }),
+                activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "commit", children: t.groupCommit }),
+                activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "component", children: t.groupComponent }),
+                activeKind === "forced-reflow" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "source", children: t.groupSource })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
             type: "text",
@@ -3093,23 +3149,26 @@ function Panel(props) {
           }
         )
       ] }),
-      activeTab === "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        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}`);
+      activeTab === "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LeakList, { suspects: result.leakSuspects }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsx)(
+        )
+      ] }),
+      activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         RenderInsights,
         {
           signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
@@ -3119,8 +3178,8 @@ function Panel(props) {
           }
         }
       ),
-      activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LongTaskEpisode, { signals: result.signals }),
-      activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LongTaskEpisode, { signals: result.signals }),
+      activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           style: {
@@ -3135,9 +3194,9 @@ function Panel(props) {
           children: t.layoutShiftHint
         }
       ),
-      activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InpEpisode, { signals: result.signals }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InpEpisode, { signals: result.signals }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -3153,7 +3212,7 @@ function Panel(props) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
         const filtered = grouped[activeKind].filter(
           (s) => signalMatchesFilter(s, filterText[activeKind] ?? "")
         );
@@ -3163,7 +3222,7 @@ function Panel(props) {
         const currentMode = groupMode[activeKind] ?? "chronological";
         if (currentMode === "chronological") {
           const key2 = `${activeKind}-${gi}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             SignalRow,
             {
               signal: g.signals[0],
@@ -3180,7 +3239,7 @@ function Panel(props) {
         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__ */ (0, import_jsx_runtime8.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "li",
           {
             "aria-expanded": isOpen,
@@ -3195,34 +3254,34 @@ function Panel(props) {
               userSelect: "none"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: g.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: g.label }),
                   " \xD7",
                   g.count
                 ] }),
-                isCascade && unnecessary > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
+                isCascade && unnecessary > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
                   "\u26A0 ",
                   t.unnecessaryRenders(unnecessary)
                 ] })
               ] }),
-              isOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a", paddingLeft: "8px" }, children: isCascade ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CascadeMembers, { members: renderMembers }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "2px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SummaryLine, { signal: s }) }, si)),
-                g.signals.length > 20 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#888", marginTop: "4px" }, children: t.moreItems(g.signals.length - 20) })
+              isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a", paddingLeft: "8px" }, children: isCascade ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CascadeMembers, { members: renderMembers }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "2px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SummaryLine, { signal: s }) }, si)),
+                g.signals.length > 20 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#888", marginTop: "4px" }, children: t.moreItems(g.signals.length - 20) })
               ] }) })
             ]
           },
           key
         );
       }) }),
-      activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
+      activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
     ] })
   ] });
 }
 
 // src/app.tsx
-var import_jsx_runtime9 = require("preact/jsx-runtime");
+var import_jsx_runtime10 = require("preact/jsx-runtime");
 function App(props) {
   const { recorder, position = "bottom-right", resolveFrame, finalize } = props;
   const [recording, setRecording] = (0, import_hooks4.useState)(false);
@@ -3268,8 +3327,8 @@ function App(props) {
   function onClose() {
     setResult(null);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(I18nProvider, { children: [
-    result === null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(I18nProvider, { children: [
+    result === null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Widget,
       {
         recording,
@@ -3278,16 +3337,16 @@ function App(props) {
         position
       }
     ),
-    result !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Panel, { result, position, onClose, resolveFrame })
+    result !== null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Panel, { result, position, onClose, resolveFrame })
   ] });
 }
 
 // src/mount.tsx
-var import_jsx_runtime10 = require("preact/jsx-runtime");
+var import_jsx_runtime11 = require("preact/jsx-runtime");
 function mount(opts) {
   const { recorder, position = "bottom-right", host = document.body, resolveFrame, finalize } = opts;
   return mountShadow(
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(App, { recorder, position, resolveFrame, finalize }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(App, { recorder, position, resolveFrame, finalize }),
     { parent: host }
   );
 }