@react-perfscope/ui 0.4.0 → 0.6.0

package/dist/index.js

@@ -145,7 +145,9 @@ var en = {
   inputDelay: "input delay",
   processingTime: "processing",
   presentation: "presentation",
-  interactionThresholdHint: "Only interactions \u226540ms are shown \u2014 INP surfaces the slow ones; fast clicks are omitted."
+  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.",
+  unsupportedInBrowser: (kinds) => `Not measurable in this browser (the API is missing, not that nothing happened): ${kinds}.`
 };
 var KIND_LABELS_KO = {
   render: "\uB80C\uB354",
@@ -238,7 +240,9 @@ var ko = {
   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."
+  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.",
+  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) {
@@ -348,6 +352,7 @@ function Widget(props) {
 
 // src/panel.tsx
 import { useState as useState3, useMemo as useMemo3, useEffect, useRef as useRef2 } from "preact/hooks";
+import { unsupportedKinds } from "@react-perfscope/core";
 
 // src/overlay.ts
 var OVERLAY_MARKER = "data-perfscope-overlay";
@@ -1860,6 +1865,177 @@ function RenderInsights({ signals, onSelect }) {
   );
 }
 
+// src/inp-episode.tsx
+import { correlate } from "@react-perfscope/core";
+
+// src/episode-shared.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
+function memberLabel(m) {
+  const s = m.signal;
+  if (s.kind === "render") return `${s.component} (${s.reason})`;
+  if (s.kind === "forced-reflow") {
+    const top = s.stack[0];
+    return top ? `forced reflow \xB7 ${top.file}:${top.line}` : "forced reflow";
+  }
+  return `layout shift ${s.value.toFixed(3)}`;
+}
+function EpisodeMemberRow({ member }) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-member-kind": member.signal.kind,
+      style: { display: "flex", alignItems: "center", gap: "6px", padding: "1px 0", color: "#ccc" },
+      children: [
+        /* @__PURE__ */ jsx5("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: memberLabel(member) }),
+        member.causedBy && /* @__PURE__ */ jsxs5("span", { style: { flex: "0 0 auto", color: "#888" }, children: [
+          "\u2190 ",
+          member.causedBy.component
+        ] }),
+        member.confidence === "caused" && /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              flex: "0 0 auto",
+              fontSize: "9px",
+              color: "#e0a030",
+              border: "1px solid #5a4410",
+              borderRadius: "3px",
+              padding: "0 4px"
+            },
+            children: "caused"
+          }
+        )
+      ]
+    }
+  );
+}
+function EpisodeMemberList({ members }) {
+  if (members.length === 0) return /* @__PURE__ */ jsx5("span", { style: { color: "#555" }, children: "\u2014" });
+  return /* @__PURE__ */ jsx5(Fragment2, { children: members.map((m, i) => /* @__PURE__ */ jsx5(EpisodeMemberRow, { member: m }, i)) });
+}
+
+// src/inp-episode.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "preact/jsx-runtime";
+var PHASES = [
+  { phase: "input-delay", labelKey: "inputDelay" },
+  { phase: "processing", labelKey: "processingTime" },
+  { phase: "presentation", labelKey: "presentation" }
+];
+function worstInteractionEpisode(signals) {
+  let worst = null;
+  for (const ep of correlate(signals)) {
+    if (ep.anchor.kind !== "interaction") continue;
+    if (!worst || ep.anchor.duration > worst.anchor.duration) worst = ep;
+  }
+  return worst;
+}
+function phaseMs(episode, phase) {
+  const a = episode.anchor;
+  if (a.kind !== "interaction") return 0;
+  return phase === "input-delay" ? a.inputDelay : phase === "processing" ? a.processing : a.presentation;
+}
+function InpEpisode({ signals }) {
+  const { t } = useI18n();
+  const episode = worstInteractionEpisode(signals);
+  if (!episode || episode.anchor.kind !== "interaction") return null;
+  const a = episode.anchor;
+  const target = a.target ? ` on ${a.target}` : "";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-inp-episode": true,
+      style: {
+        margin: "0 0 8px",
+        border: "1px solid #1f1f1f",
+        borderRadius: "6px",
+        background: "#121212",
+        fontFamily: "SF Mono, Menlo, Consolas, monospace",
+        fontSize: "11px",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
+          /* @__PURE__ */ jsx6("strong", { children: a.eventType }),
+          target,
+          " \u2014 ",
+          /* @__PURE__ */ jsxs6("strong", { children: [
+            Math.round(a.duration),
+            "ms"
+          ] }),
+          " ",
+          /* @__PURE__ */ jsx6("span", { style: { color: "#888" }, children: "INP" })
+        ] }),
+        PHASES.map(({ phase, labelKey }) => {
+          const members = episode.members.filter((m) => m.phase === phase);
+          return /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              "data-inp-phase": phase,
+              style: { display: "flex", gap: "8px", padding: "5px 8px", borderTop: "1px solid #1a1a1a" },
+              children: [
+                /* @__PURE__ */ jsxs6("div", { style: { flex: "0 0 92px", color: "#aaa" }, children: [
+                  t[labelKey],
+                  /* @__PURE__ */ jsxs6("div", { style: { color: "#666", fontSize: "10px" }, children: [
+                    Math.round(phaseMs(episode, phase)),
+                    "ms"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx6(EpisodeMemberList, { members }) })
+              ]
+            },
+            phase
+          );
+        })
+      ]
+    }
+  );
+}
+
+// src/long-task-episode.tsx
+import { correlate as correlate2 } from "@react-perfscope/core";
+import { jsx as jsx7, jsxs as jsxs7 } from "preact/jsx-runtime";
+function worstLongTaskEpisode(signals) {
+  let worst = null;
+  for (const ep of correlate2(signals)) {
+    if (ep.anchor.kind !== "long-task") continue;
+    if (!worst || ep.anchor.duration > worst.anchor.duration) worst = ep;
+  }
+  return worst;
+}
+function LongTaskEpisode({ signals }) {
+  const { t } = useI18n();
+  const episode = worstLongTaskEpisode(signals);
+  if (!episode || episode.anchor.kind !== "long-task") return null;
+  if (episode.members.length === 0) return null;
+  const a = episode.anchor;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-long-task-episode": true,
+      style: {
+        margin: "0 0 8px",
+        border: "1px solid #1f1f1f",
+        borderRadius: "6px",
+        background: "#121212",
+        fontFamily: "SF Mono, Menlo, Consolas, monospace",
+        fontSize: "11px",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs7("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
+          /* @__PURE__ */ jsx7("strong", { children: t.kindLabel("long-task") }),
+          " \u2014 ",
+          /* @__PURE__ */ jsxs7("strong", { children: [
+            Math.round(a.duration),
+            "ms"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx7("div", { style: { padding: "5px 8px" }, children: /* @__PURE__ */ jsx7(EpisodeMemberList, { members: episode.members }) })
+      ]
+    }
+  );
+}
+
 // src/filter.ts
 function signalSearchText(signal) {
   switch (signal.kind) {
@@ -1900,7 +2076,7 @@ function signalMatchesFilter(signal, query) {
 }
 
 // src/panel.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "preact/jsx-runtime";
 var RENDER_REASON_COLOR = {
   mount: "#5ac8fa",
   state: "#34c759",
@@ -1924,7 +2100,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__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(
     "span",
     {
       style: {
@@ -1980,7 +2156,7 @@ var WEB_VITAL_UNIT2 = {
 };
 function RatingDot({ rating }) {
   const { t } = useI18n();
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       "data-rating": rating,
@@ -2038,18 +2214,18 @@ var monoStyle = {
 };
 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) })
+  return /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.value }),
+      /* @__PURE__ */ jsx8("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: [
+    s.sources.length === 0 ? /* @__PURE__ */ jsx8("div", { style: { color: "#666" }, children: t.noSourceRects }) : s.sources.map((r, i) => /* @__PURE__ */ jsxs8("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      /* @__PURE__ */ jsxs8("span", { style: { color: "#888" }, children: [
         t.rect,
         " ",
         i + 1
       ] }),
-      /* @__PURE__ */ jsxs5("span", { children: [
+      /* @__PURE__ */ jsxs8("span", { children: [
         "x=",
         r.x.toFixed(0),
         " y=",
@@ -2064,25 +2240,25 @@ function LayoutShiftDetail({ s }) {
 }
 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: [
+  return /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsx8("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ jsx8("span", { children: s.url }) }),
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.started }),
+      /* @__PURE__ */ jsxs8("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: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ jsxs8("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: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.size }),
+      /* @__PURE__ */ jsxs8("span", { children: [
         (s.size / 1024).toFixed(2),
         "KB (",
         s.size,
@@ -2091,69 +2267,69 @@ function NetworkDetail({ s }) {
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.renderBlocking }),
-      /* @__PURE__ */ jsx5("span", { children: s.blocking ? t.yes : t.no })
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.renderBlocking }),
+      /* @__PURE__ */ jsx8("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 })
+  return /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.metric }),
+      /* @__PURE__ */ jsx8("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) })
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.value }),
+      /* @__PURE__ */ jsx8("span", { children: s.value.toFixed(2) })
     ] })
   ] });
 }
 function RenderDetail({ s }) {
   const { t } = useI18n();
   if (s.members && s.members.length > 0) {
-    return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
-      /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
-        /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.duration }),
-        /* @__PURE__ */ jsxs5("span", { children: [
+    return /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
+      /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.duration }),
+        /* @__PURE__ */ jsxs8("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: [
+      /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.at }),
+        /* @__PURE__ */ jsxs8("span", { children: [
           s.at.toFixed(2),
           "ms"
         ] })
       ] }),
-      /* @__PURE__ */ jsx5("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ jsx5(CascadeMembers, { members: s.members }) })
+      /* @__PURE__ */ jsx8("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ jsx8(CascadeMembers, { members: s.members }) })
     ] });
   }
-  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 })
+  return /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.component }),
+      /* @__PURE__ */ jsx8("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 })
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.reason }),
+      /* @__PURE__ */ jsx8(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(", ") })
+    s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ jsxs8("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.changedProps }),
+      /* @__PURE__ */ jsx8("span", { children: s.changedProps.join(", ") })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.duration }),
-      /* @__PURE__ */ jsxs5("span", { children: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ jsxs8("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: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.at }),
+      /* @__PURE__ */ jsxs8("span", { children: [
         s.at.toFixed(2),
         "ms"
       ] })
@@ -2183,11 +2359,11 @@ function StackFrames({
       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: [
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    resolving && /* @__PURE__ */ jsx8("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
+    frames.length === 0 ? /* @__PURE__ */ jsx8("div", { style: { color: "#666" }, children: t.noStack }) : frames.map((f, i) => /* @__PURE__ */ jsxs8("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
+      f.fnName ? /* @__PURE__ */ jsx8("span", { children: f.fnName }) : /* @__PURE__ */ jsx8("span", { style: { color: "#666" }, children: t.anonymous }),
+      /* @__PURE__ */ jsxs8("span", { style: { color: "#888" }, children: [
         f.file,
         ":",
         f.line,
@@ -2201,7 +2377,7 @@ function ForcedReflowDetail({
   s,
   resolveFrame
 }) {
-  return /* @__PURE__ */ jsx5("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ jsx5(StackFrames, { raw: s.stack, resolveFrame }) });
+  return /* @__PURE__ */ jsx8("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ jsx8(StackFrames, { raw: s.stack, resolveFrame }) });
 }
 function HotFunctions({
   attribution,
@@ -2220,26 +2396,26 @@ function HotFunctions({
       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 }),
+  return /* @__PURE__ */ jsxs8("div", { style: { marginTop: "6px" }, children: [
+    /* @__PURE__ */ jsx8("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
+    /* @__PURE__ */ jsx8("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: [
+      return /* @__PURE__ */ jsxs8("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx8("span", { style: { color: "#ff9f0a", fontWeight: 600 }, children: f.fnName || /* @__PURE__ */ jsx8("span", { style: { color: "#666" }, children: t.anonymous }) }),
+          /* @__PURE__ */ jsxs8("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
             pct,
             "%"
           ] }),
-          /* @__PURE__ */ jsxs5("span", { style: { color: "#666", marginLeft: "6px" }, children: [
+          /* @__PURE__ */ jsxs8("span", { style: { color: "#666", marginLeft: "6px" }, children: [
             "(",
             a.sampleCount,
             ")"
           ] })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
+        /* @__PURE__ */ jsxs8("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
           f.file,
           ":",
           f.line,
@@ -2256,59 +2432,59 @@ function LongTaskDetail({
 }) {
   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: [
+  return /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.started }),
+      /* @__PURE__ */ jsxs8("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: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.ended }),
+      /* @__PURE__ */ jsxs8("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: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ jsxs8("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: [
+    typeof s.blockingDuration === "number" && /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.blockingTime }),
+      /* @__PURE__ */ jsxs8("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: [
+    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ jsx8(HotFunctions, { attribution: s.attribution, resolveFrame }),
+    s.scripts !== void 0 && /* @__PURE__ */ jsxs8("div", { style: { marginTop: "6px" }, children: [
+      /* @__PURE__ */ jsx8("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
+      scripts.length === 0 ? /* @__PURE__ */ jsx8("div", { style: { color: "#666" }, children: t.noScripts }) : scripts.map((script, i) => /* @__PURE__ */ jsxs8("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx8("span", { children: script.sourceFunctionName || /* @__PURE__ */ jsx8("span", { style: { color: "#666" }, children: t.anonymous }) }),
+          /* @__PURE__ */ jsx8("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
+          /* @__PURE__ */ jsxs8("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 && /* @__PURE__ */ jsxs8("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
           script.sourceURL,
           script.charPosition >= 0 ? `@${script.charPosition}` : ""
         ] }),
-        script.invoker && /* @__PURE__ */ jsxs5("div", { style: { color: "#666" }, children: [
+        script.invoker && /* @__PURE__ */ jsxs8("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 }) })
+    s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */ jsx8("div", { style: { marginTop: "4px" }, children: /* @__PURE__ */ jsx8(StackFrames, { raw: s.stack, resolveFrame, limit: 5 }) })
   ] });
 }
 var INTERACTION_PHASE_COLOR = { input: "#8e8e93", processing: "#5ac8fa", presentation: "#34c759" };
@@ -2323,33 +2499,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__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
-    /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
-      /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.interactionEvent }),
-      /* @__PURE__ */ jsxs5("span", { children: [
+  return /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.interactionEvent }),
+      /* @__PURE__ */ jsxs8("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: [
+    /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsx8("span", { style: detailLabelStyle, children: t.duration }),
+      /* @__PURE__ */ jsxs8("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" } }),
+    /* @__PURE__ */ jsx8("div", { style: { display: "flex", height: "10px", borderRadius: "3px", overflow: "hidden", margin: "5px 0 7px", background: "#1a1a1a" }, children: phases.map((p, i) => /* @__PURE__ */ jsx8("div", { style: { width: `${p.ms / total * 100}%`, background: p.color } }, i)) }),
+    phases.map((p, i) => /* @__PURE__ */ jsxs8("div", { style: detailRowStyle, children: [
+      /* @__PURE__ */ jsxs8("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
+        /* @__PURE__ */ jsx8("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
         p.label
       ] }),
-      /* @__PURE__ */ jsxs5("span", { children: [
+      /* @__PURE__ */ jsxs8("span", { children: [
         p.ms.toFixed(0),
         "ms"
       ] })
     ] }, i)),
-    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ jsx5(HotFunctions, { attribution: s.attribution, resolveFrame })
+    s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ jsx8(HotFunctions, { attribution: s.attribution, resolveFrame })
   ] });
 }
 function SignalDetail({
@@ -2358,24 +2534,24 @@ function SignalDetail({
 }) {
   switch (s.kind) {
     case "forced-reflow":
-      return /* @__PURE__ */ jsx5(ForcedReflowDetail, { s, resolveFrame });
+      return /* @__PURE__ */ jsx8(ForcedReflowDetail, { s, resolveFrame });
     case "layout-shift":
-      return /* @__PURE__ */ jsx5(LayoutShiftDetail, { s });
+      return /* @__PURE__ */ jsx8(LayoutShiftDetail, { s });
     case "long-task":
-      return /* @__PURE__ */ jsx5(LongTaskDetail, { s, resolveFrame });
+      return /* @__PURE__ */ jsx8(LongTaskDetail, { s, resolveFrame });
     case "interaction":
-      return /* @__PURE__ */ jsx5(InteractionDetail, { s, resolveFrame });
+      return /* @__PURE__ */ jsx8(InteractionDetail, { s, resolveFrame });
     case "network":
-      return /* @__PURE__ */ jsx5(NetworkDetail, { s });
+      return /* @__PURE__ */ jsx8(NetworkDetail, { s });
     case "web-vital":
-      return /* @__PURE__ */ jsx5(WebVitalDetail, { s });
+      return /* @__PURE__ */ jsx8(WebVitalDetail, { s });
     case "render":
-      return /* @__PURE__ */ jsx5(RenderDetail, { s });
+      return /* @__PURE__ */ jsx8(RenderDetail, { s });
   }
 }
 function SeverityDot({ sev, title }) {
   const { t } = useI18n();
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       "data-severity": sev,
@@ -2398,9 +2574,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__ */ jsxs5("span", { children: [
-      /* @__PURE__ */ jsx5(RatingDot, { rating }),
-      /* @__PURE__ */ jsx5("strong", { children: signal.name }),
+    return /* @__PURE__ */ jsxs8("span", { children: [
+      /* @__PURE__ */ jsx8(RatingDot, { rating }),
+      /* @__PURE__ */ jsx8("strong", { children: signal.name }),
       ": ",
       signal.value.toFixed(2),
       unit
@@ -2409,12 +2585,12 @@ function SummaryLine({ signal }) {
   const sev = severityForSignal(signal);
   const color = SEVERITY_COLOR[sev];
   if (signal.kind === "long-task") {
-    return /* @__PURE__ */ jsxs5("span", { children: [
+    return /* @__PURE__ */ jsxs8("span", { children: [
       "@ ",
       signal.at.toFixed(1),
       "ms \u2022 duration",
       " ",
-      /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
+      /* @__PURE__ */ jsxs8("span", { style: { color }, children: [
         signal.duration.toFixed(1),
         "ms"
       ] })
@@ -2422,59 +2598,59 @@ function SummaryLine({ signal }) {
   }
   if (signal.kind === "forced-reflow") {
     const count = signal.count ?? 1;
-    return /* @__PURE__ */ jsxs5("span", { children: [
+    return /* @__PURE__ */ jsxs8("span", { children: [
       "@ ",
       signal.at.toFixed(1),
       "ms \u2022 duration",
       " ",
-      /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
+      /* @__PURE__ */ jsxs8("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
       ] }),
-      count > 1 && /* @__PURE__ */ jsxs5("span", { style: { color: "#888" }, children: [
+      count > 1 && /* @__PURE__ */ jsxs8("span", { style: { color: "#888" }, children: [
         " \u2022 ",
         t.coalescedReads(count)
       ] })
     ] });
   }
   if (signal.kind === "layout-shift") {
-    return /* @__PURE__ */ jsxs5("span", { children: [
+    return /* @__PURE__ */ jsxs8("span", { children: [
       "@ ",
       signal.at.toFixed(1),
       "ms \u2022 value",
       " ",
-      /* @__PURE__ */ jsx5("span", { style: { color }, children: formatCls(signal.value) }),
+      /* @__PURE__ */ jsx8("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: [
+    return /* @__PURE__ */ jsxs8("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx8("strong", { children: signal.component }),
+      /* @__PURE__ */ jsx8(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
+      /* @__PURE__ */ jsxs8("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
       ] }),
-      signal.count && signal.count > 1 && /* @__PURE__ */ jsx5("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
+      signal.count && signal.count > 1 && /* @__PURE__ */ jsx8("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__ */ jsxs5("span", { children: [
+    return /* @__PURE__ */ jsxs8("span", { children: [
       url,
       " \u2022 ",
-      /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
+      /* @__PURE__ */ jsxs8("span", { style: { color }, children: [
         signal.duration.toFixed(0),
         "ms"
       ] }),
-      signal.blocking && /* @__PURE__ */ jsxs5("span", { style: { color: SEVERITY_COLOR.high }, children: [
+      signal.blocking && /* @__PURE__ */ jsxs8("span", { style: { color: SEVERITY_COLOR.high }, children: [
         " \u2022 ",
         t.blocking
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx5("span", { children: summary(signal) });
+  return /* @__PURE__ */ jsx8("span", { children: summary(signal) });
 }
 function tabSupportsGrouping(kind) {
   return kind === "render" || kind === "forced-reflow";
@@ -2548,7 +2724,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__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(
     "li",
     {
       "aria-expanded": expanded,
@@ -2570,22 +2746,22 @@ function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveF
         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 })
+        /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx8("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ jsx8(SeverityDot, { sev }),
+          /* @__PURE__ */ jsx8(SummaryLine, { signal })
         ] }),
-        expanded && /* @__PURE__ */ jsx5("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a" }, children: /* @__PURE__ */ jsx5(SignalDetail, { s: signal, resolveFrame }) })
+        expanded && /* @__PURE__ */ jsx8("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a" }, children: /* @__PURE__ */ jsx8(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) => {
+  return /* @__PURE__ */ jsx8("div", { children: members.map((m, i) => {
     const indent = (m.depth - minDepth) * 14;
     const isCascade = m.reason === "parent";
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         style: {
@@ -2596,10 +2772,10 @@ function CascadeMembers({ members }) {
           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: [
+          /* @__PURE__ */ jsx8("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
+          /* @__PURE__ */ jsx8("strong", { children: m.component }),
+          /* @__PURE__ */ jsx8(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
+          /* @__PURE__ */ jsxs8("span", { style: { color: "#888" }, children: [
             m.duration.toFixed(2),
             "ms"
           ] })
@@ -2613,7 +2789,7 @@ function LanguageToggle() {
   const { lang, setLang, t } = useI18n();
   const langs = ["en", "ko"];
   const labels = { en: "EN", ko: "\uD55C" };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       role: "group",
@@ -2626,7 +2802,7 @@ function LanguageToggle() {
       },
       children: langs.map((l) => {
         const active = lang === l;
-        return /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -2655,6 +2831,7 @@ function Panel(props) {
   const { t } = useI18n();
   const grouped = useMemo3(() => groupByKind(result.signals), [result.signals]);
   const kindsPresent = KIND_ORDER.filter((k) => grouped[k].length > 0);
+  const unsupported = useMemo3(() => unsupportedKinds(), []);
   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"
@@ -2720,12 +2897,12 @@ function Panel(props) {
     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(
+  return /* @__PURE__ */ jsxs8("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
+    /* @__PURE__ */ jsxs8("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
+      /* @__PURE__ */ jsx8("strong", { children: "react-perfscope" }),
+      /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx8(LanguageToggle, {}),
+        /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -2744,7 +2921,7 @@ function Panel(props) {
             children: t.save
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -2756,9 +2933,24 @@ function Panel(props) {
         )
       ] })
     ] }),
-    kindsPresent.length === 0 && /* @__PURE__ */ jsx5("div", { style: { color: "#888" }, children: t.noSignals }),
-    kindsPresent.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsx5(
+    unsupported.length > 0 && /* @__PURE__ */ jsx8(
+      "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__ */ jsx8("div", { style: { color: "#888" }, children: t.noSignals }),
+    kindsPresent.length > 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx8(
         SummaryHeader,
         {
           signals: result.signals,
@@ -2770,8 +2962,8 @@ function Panel(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsxs5("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
-        hasTimelineSignals && /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsxs8("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
+        hasTimelineSignals && /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -2796,7 +2988,7 @@ function Panel(props) {
         kindsPresent.map((kind) => {
           const worst = worstSeverity(grouped[kind]);
           const active = activeKind === kind;
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs8(
             "button",
             {
               type: "button",
@@ -2819,7 +3011,7 @@ function Panel(props) {
                 gap: "6px"
               },
               children: [
-                worst !== "low" && /* @__PURE__ */ jsx5(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
+                worst !== "low" && /* @__PURE__ */ jsx8(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
                 t.kindLabel(kind),
                 " ",
                 grouped[kind].length
@@ -2829,10 +3021,10 @@ function Panel(props) {
           );
         })
       ] }),
-      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: [
+      activeKind && activeTab !== "timeline" && /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px", fontSize: "11px", color: "#888", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxs8("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
           t.sort,
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs8(
             "select",
             {
               "aria-label": t.sort,
@@ -2844,15 +3036,15 @@ function Panel(props) {
               },
               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 })
+                /* @__PURE__ */ jsx8("option", { value: "chronological", children: t.sortChronological }),
+                /* @__PURE__ */ jsx8("option", { value: "severity", children: t.sortSeverity })
               ]
             }
           )
         ] }),
-        tabSupportsGrouping(activeKind) && /* @__PURE__ */ jsxs5("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+        tabSupportsGrouping(activeKind) && /* @__PURE__ */ jsxs8("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
           t.groupBy,
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs8(
             "select",
             {
               "aria-label": t.groupBy,
@@ -2864,15 +3056,15 @@ function Panel(props) {
               },
               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 })
+                /* @__PURE__ */ jsx8("option", { value: "chronological", children: t.groupChronological }),
+                activeKind === "render" && /* @__PURE__ */ jsx8("option", { value: "commit", children: t.groupCommit }),
+                activeKind === "render" && /* @__PURE__ */ jsx8("option", { value: "component", children: t.groupComponent }),
+                activeKind === "forced-reflow" && /* @__PURE__ */ jsx8("option", { value: "source", children: t.groupSource })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             type: "text",
@@ -2887,7 +3079,7 @@ function Panel(props) {
           }
         )
       ] }),
-      activeTab === "timeline" && /* @__PURE__ */ jsx5("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: /* @__PURE__ */ jsx5(
+      activeTab === "timeline" && /* @__PURE__ */ jsx8("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: /* @__PURE__ */ jsx8(
         Timeline,
         {
           signals: result.signals,
@@ -2903,7 +3095,7 @@ function Panel(props) {
           }
         }
       ) }),
-      activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ jsx5(
+      activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ jsx8(
         RenderInsights,
         {
           signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
@@ -2913,7 +3105,8 @@ function Panel(props) {
           }
         }
       ),
-      activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ jsx5(
+      activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */ jsx8(LongTaskEpisode, { signals: result.signals }),
+      activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */ jsx8(
         "div",
         {
           style: {
@@ -2925,10 +3118,28 @@ function Panel(props) {
             border: "1px solid #1f1f1f",
             borderRadius: "6px"
           },
-          children: t.interactionThresholdHint
+          children: t.layoutShiftHint
         }
       ),
-      /* @__PURE__ */ jsx5("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
+      activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        /* @__PURE__ */ jsx8(InpEpisode, { signals: result.signals }),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              padding: "6px 8px",
+              marginBottom: "6px",
+              fontSize: "11px",
+              color: "#888",
+              background: "#141414",
+              border: "1px solid #1f1f1f",
+              borderRadius: "6px"
+            },
+            children: t.interactionThresholdHint
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx8("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] ?? "")
         );
@@ -2938,7 +3149,7 @@ function Panel(props) {
         const currentMode = groupMode[activeKind] ?? "chronological";
         if (currentMode === "chronological") {
           const key2 = `${activeKind}-${gi}`;
-          return /* @__PURE__ */ jsx5(
+          return /* @__PURE__ */ jsx8(
             SignalRow,
             {
               signal: g.signals[0],
@@ -2955,7 +3166,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__ */ jsxs5(
+        return /* @__PURE__ */ jsxs8(
           "li",
           {
             "aria-expanded": isOpen,
@@ -2970,34 +3181,34 @@ function Panel(props) {
               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 }),
+              /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx8("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
+                /* @__PURE__ */ jsxs8("span", { children: [
+                  /* @__PURE__ */ jsx8("strong", { children: g.label }),
                   " \xD7",
                   g.count
                 ] }),
-                isCascade && unnecessary > 0 && /* @__PURE__ */ jsxs5("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
+                isCascade && unnecessary > 0 && /* @__PURE__ */ jsxs8("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) })
+              isOpen && /* @__PURE__ */ jsx8("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a", paddingLeft: "8px" }, children: isCascade ? /* @__PURE__ */ jsx8(CascadeMembers, { members: renderMembers }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */ jsx8("div", { style: { padding: "2px 0" }, children: /* @__PURE__ */ jsx8(SummaryLine, { signal: s }) }, si)),
+                g.signals.length > 20 && /* @__PURE__ */ jsx8("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__ */ jsx5("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__ */ jsx8("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
     ] })
   ] });
 }
 
 // src/app.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "preact/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "preact/jsx-runtime";
 function App(props) {
   const { recorder, position = "bottom-right", resolveFrame, finalize } = props;
   const [recording, setRecording] = useState4(false);
@@ -3043,8 +3254,8 @@ function App(props) {
   function onClose() {
     setResult(null);
   }
-  return /* @__PURE__ */ jsxs6(I18nProvider, { children: [
-    result === null && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs9(I18nProvider, { children: [
+    result === null && /* @__PURE__ */ jsx9(
       Widget,
       {
         recording,
@@ -3053,16 +3264,16 @@ function App(props) {
         position
       }
     ),
-    result !== null && /* @__PURE__ */ jsx6(Panel, { result, position, onClose, resolveFrame })
+    result !== null && /* @__PURE__ */ jsx9(Panel, { result, position, onClose, resolveFrame })
   ] });
 }
 
 // src/mount.tsx
-import { jsx as jsx7 } from "preact/jsx-runtime";
+import { jsx as jsx10 } 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 }),
+    /* @__PURE__ */ jsx10(App, { recorder, position, resolveFrame, finalize }),
     { parent: host }
   );
 }