@react-perfscope/ui 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +409 -198
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +409 -198
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -3
package/dist/index.cjs CHANGED
@@ -178,7 +178,9 @@ var en = {
178
178
  inputDelay: "input delay",
179
179
  processingTime: "processing",
180
180
  presentation: "presentation",
181
- interactionThresholdHint: "Only interactions \u226540ms are shown \u2014 INP surfaces the slow ones; fast clicks are omitted."
181
+ interactionThresholdHint: "Only interactions \u226540ms are shown \u2014 INP surfaces the slow ones; fast clicks are omitted.",
182
+ layoutShiftHint: "Every layout shift, including ones triggered by your interactions. The CLS metric excludes input-driven shifts, so this is not a CLS score.",
183
+ unsupportedInBrowser: (kinds) => `Not measurable in this browser (the API is missing, not that nothing happened): ${kinds}.`
182
184
  };
183
185
  var KIND_LABELS_KO = {
184
186
  render: "\uB80C\uB354",
@@ -271,7 +273,9 @@ var ko = {
271
273
  inputDelay: "\uC785\uB825 \uC9C0\uC5F0",
272
274
  processingTime: "\uCC98\uB9AC",
273
275
  presentation: "\uD654\uBA74 \uBC18\uC601",
274
- 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."
276
+ 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.",
277
+ 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.",
278
+ 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}.`
275
279
  };
276
280
  var STRINGS = { en, ko };
277
281
  function isLang(v) {
@@ -381,6 +385,7 @@ function Widget(props) {
381
385
 
382
386
  // src/panel.tsx
383
387
  var import_hooks3 = require("preact/hooks");
388
+ var import_core4 = require("@react-perfscope/core");
384
389
 
385
390
  // src/overlay.ts
386
391
  var OVERLAY_MARKER = "data-perfscope-overlay";
@@ -1893,6 +1898,177 @@ function RenderInsights({ signals, onSelect }) {
1893
1898
  );
1894
1899
  }
1895
1900
 
1901
+ // src/inp-episode.tsx
1902
+ var import_core2 = require("@react-perfscope/core");
1903
+
1904
+ // src/episode-shared.tsx
1905
+ var import_jsx_runtime5 = require("preact/jsx-runtime");
1906
+ function memberLabel(m) {
1907
+ const s = m.signal;
1908
+ if (s.kind === "render") return `${s.component} (${s.reason})`;
1909
+ if (s.kind === "forced-reflow") {
1910
+ const top = s.stack[0];
1911
+ return top ? `forced reflow \xB7 ${top.file}:${top.line}` : "forced reflow";
1912
+ }
1913
+ return `layout shift ${s.value.toFixed(3)}`;
1914
+ }
1915
+ function EpisodeMemberRow({ member }) {
1916
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1917
+ "div",
1918
+ {
1919
+ "data-member-kind": member.signal.kind,
1920
+ style: { display: "flex", alignItems: "center", gap: "6px", padding: "1px 0", color: "#ccc" },
1921
+ children: [
1922
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: memberLabel(member) }),
1923
+ member.causedBy && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { flex: "0 0 auto", color: "#888" }, children: [
1924
+ "\u2190 ",
1925
+ member.causedBy.component
1926
+ ] }),
1927
+ member.confidence === "caused" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1928
+ "span",
1929
+ {
1930
+ style: {
1931
+ flex: "0 0 auto",
1932
+ fontSize: "9px",
1933
+ color: "#e0a030",
1934
+ border: "1px solid #5a4410",
1935
+ borderRadius: "3px",
1936
+ padding: "0 4px"
1937
+ },
1938
+ children: "caused"
1939
+ }
1940
+ )
1941
+ ]
1942
+ }
1943
+ );
1944
+ }
1945
+ function EpisodeMemberList({ members }) {
1946
+ if (members.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#555" }, children: "\u2014" });
1947
+ 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)) });
1948
+ }
1949
+
1950
+ // src/inp-episode.tsx
1951
+ var import_jsx_runtime6 = require("preact/jsx-runtime");
1952
+ var PHASES = [
1953
+ { phase: "input-delay", labelKey: "inputDelay" },
1954
+ { phase: "processing", labelKey: "processingTime" },
1955
+ { phase: "presentation", labelKey: "presentation" }
1956
+ ];
1957
+ function worstInteractionEpisode(signals) {
1958
+ let worst = null;
1959
+ for (const ep of (0, import_core2.correlate)(signals)) {
1960
+ if (ep.anchor.kind !== "interaction") continue;
1961
+ if (!worst || ep.anchor.duration > worst.anchor.duration) worst = ep;
1962
+ }
1963
+ return worst;
1964
+ }
1965
+ function phaseMs(episode, phase) {
1966
+ const a = episode.anchor;
1967
+ if (a.kind !== "interaction") return 0;
1968
+ return phase === "input-delay" ? a.inputDelay : phase === "processing" ? a.processing : a.presentation;
1969
+ }
1970
+ function InpEpisode({ signals }) {
1971
+ const { t } = useI18n();
1972
+ const episode = worstInteractionEpisode(signals);
1973
+ if (!episode || episode.anchor.kind !== "interaction") return null;
1974
+ const a = episode.anchor;
1975
+ const target = a.target ? ` on ${a.target}` : "";
1976
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1977
+ "div",
1978
+ {
1979
+ "data-inp-episode": true,
1980
+ style: {
1981
+ margin: "0 0 8px",
1982
+ border: "1px solid #1f1f1f",
1983
+ borderRadius: "6px",
1984
+ background: "#121212",
1985
+ fontFamily: "SF Mono, Menlo, Consolas, monospace",
1986
+ fontSize: "11px",
1987
+ overflow: "hidden"
1988
+ },
1989
+ children: [
1990
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
1991
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: a.eventType }),
1992
+ target,
1993
+ " \u2014 ",
1994
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("strong", { children: [
1995
+ Math.round(a.duration),
1996
+ "ms"
1997
+ ] }),
1998
+ " ",
1999
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#888" }, children: "INP" })
2000
+ ] }),
2001
+ PHASES.map(({ phase, labelKey }) => {
2002
+ const members = episode.members.filter((m) => m.phase === phase);
2003
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2004
+ "div",
2005
+ {
2006
+ "data-inp-phase": phase,
2007
+ style: { display: "flex", gap: "8px", padding: "5px 8px", borderTop: "1px solid #1a1a1a" },
2008
+ children: [
2009
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: "0 0 92px", color: "#aaa" }, children: [
2010
+ t[labelKey],
2011
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { color: "#666", fontSize: "10px" }, children: [
2012
+ Math.round(phaseMs(episode, phase)),
2013
+ "ms"
2014
+ ] })
2015
+ ] }),
2016
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EpisodeMemberList, { members }) })
2017
+ ]
2018
+ },
2019
+ phase
2020
+ );
2021
+ })
2022
+ ]
2023
+ }
2024
+ );
2025
+ }
2026
+
2027
+ // src/long-task-episode.tsx
2028
+ var import_core3 = require("@react-perfscope/core");
2029
+ var import_jsx_runtime7 = require("preact/jsx-runtime");
2030
+ function worstLongTaskEpisode(signals) {
2031
+ let worst = null;
2032
+ for (const ep of (0, import_core3.correlate)(signals)) {
2033
+ if (ep.anchor.kind !== "long-task") continue;
2034
+ if (!worst || ep.anchor.duration > worst.anchor.duration) worst = ep;
2035
+ }
2036
+ return worst;
2037
+ }
2038
+ function LongTaskEpisode({ signals }) {
2039
+ const { t } = useI18n();
2040
+ const episode = worstLongTaskEpisode(signals);
2041
+ if (!episode || episode.anchor.kind !== "long-task") return null;
2042
+ if (episode.members.length === 0) return null;
2043
+ const a = episode.anchor;
2044
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
2045
+ "div",
2046
+ {
2047
+ "data-long-task-episode": true,
2048
+ style: {
2049
+ margin: "0 0 8px",
2050
+ border: "1px solid #1f1f1f",
2051
+ borderRadius: "6px",
2052
+ background: "#121212",
2053
+ fontFamily: "SF Mono, Menlo, Consolas, monospace",
2054
+ fontSize: "11px",
2055
+ overflow: "hidden"
2056
+ },
2057
+ children: [
2058
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
2059
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: t.kindLabel("long-task") }),
2060
+ " \u2014 ",
2061
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("strong", { children: [
2062
+ Math.round(a.duration),
2063
+ "ms"
2064
+ ] })
2065
+ ] }),
2066
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "5px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EpisodeMemberList, { members: episode.members }) })
2067
+ ]
2068
+ }
2069
+ );
2070
+ }
2071
+
1896
2072
  // src/filter.ts
1897
2073
  function signalSearchText(signal) {
1898
2074
  switch (signal.kind) {
@@ -1933,7 +2109,7 @@ function signalMatchesFilter(signal, query) {
1933
2109
  }
1934
2110
 
1935
2111
  // src/panel.tsx
1936
- var import_jsx_runtime5 = require("preact/jsx-runtime");
2112
+ var import_jsx_runtime8 = require("preact/jsx-runtime");
1937
2113
  var RENDER_REASON_COLOR = {
1938
2114
  mount: "#5ac8fa",
1939
2115
  state: "#34c759",
@@ -1957,7 +2133,7 @@ function RenderReasonTag({ reason, changedProps }) {
1957
2133
  const color = RENDER_REASON_COLOR[reason];
1958
2134
  const label = renderReasonLabel(t, reason);
1959
2135
  const keys = reason === "props" && changedProps && changedProps.length > 0 ? `: ${changedProps.join(", ")}` : "";
1960
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2136
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1961
2137
  "span",
1962
2138
  {
1963
2139
  style: {
@@ -2013,7 +2189,7 @@ var WEB_VITAL_UNIT2 = {
2013
2189
  };
2014
2190
  function RatingDot({ rating }) {
2015
2191
  const { t } = useI18n();
2016
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2192
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2017
2193
  "span",
2018
2194
  {
2019
2195
  "data-rating": rating,
@@ -2071,18 +2247,18 @@ var monoStyle = {
2071
2247
  };
2072
2248
  function LayoutShiftDetail({ s }) {
2073
2249
  const { t } = useI18n();
2074
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2075
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2076
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.value }),
2077
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: s.value.toFixed(4) })
2250
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2251
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2252
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.value }),
2253
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.value.toFixed(4) })
2078
2254
  ] }),
2079
- s.sources.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#666" }, children: t.noSourceRects }) : s.sources.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
2080
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#888" }, children: [
2255
+ 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: [
2256
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
2081
2257
  t.rect,
2082
2258
  " ",
2083
2259
  i + 1
2084
2260
  ] }),
2085
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2261
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2086
2262
  "x=",
2087
2263
  r.x.toFixed(0),
2088
2264
  " y=",
@@ -2097,25 +2273,25 @@ function LayoutShiftDetail({ s }) {
2097
2273
  }
2098
2274
  function NetworkDetail({ s }) {
2099
2275
  const { t } = useI18n();
2100
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2101
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: s.url }) }),
2102
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2103
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.started }),
2104
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2276
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2277
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.url }) }),
2278
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2279
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.started }),
2280
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2105
2281
  s.startedAt.toFixed(0),
2106
2282
  "ms"
2107
2283
  ] })
2108
2284
  ] }),
2109
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2110
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2111
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2285
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2286
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2287
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2112
2288
  s.duration.toFixed(0),
2113
2289
  "ms"
2114
2290
  ] })
2115
2291
  ] }),
2116
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2117
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.size }),
2118
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2292
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2293
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.size }),
2294
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2119
2295
  (s.size / 1024).toFixed(2),
2120
2296
  "KB (",
2121
2297
  s.size,
@@ -2124,69 +2300,69 @@ function NetworkDetail({ s }) {
2124
2300
  ")"
2125
2301
  ] })
2126
2302
  ] }),
2127
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2128
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.renderBlocking }),
2129
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: s.blocking ? t.yes : t.no })
2303
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2304
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.renderBlocking }),
2305
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.blocking ? t.yes : t.no })
2130
2306
  ] })
2131
2307
  ] });
2132
2308
  }
2133
2309
  function WebVitalDetail({ s }) {
2134
2310
  const { t } = useI18n();
2135
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2136
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2137
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.metric }),
2138
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: s.name })
2311
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2312
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2313
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.metric }),
2314
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.name })
2139
2315
  ] }),
2140
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2141
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.value }),
2142
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: s.value.toFixed(2) })
2316
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2317
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.value }),
2318
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.value.toFixed(2) })
2143
2319
  ] })
2144
2320
  ] });
2145
2321
  }
2146
2322
  function RenderDetail({ s }) {
2147
2323
  const { t } = useI18n();
2148
2324
  if (s.members && s.members.length > 0) {
2149
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2150
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2151
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2152
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2325
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2326
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2327
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2328
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2153
2329
  s.duration.toFixed(3),
2154
2330
  "ms"
2155
2331
  ] })
2156
2332
  ] }),
2157
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2158
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.at }),
2159
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2333
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2334
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.at }),
2335
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2160
2336
  s.at.toFixed(2),
2161
2337
  "ms"
2162
2338
  ] })
2163
2339
  ] }),
2164
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CascadeMembers, { members: s.members }) })
2340
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CascadeMembers, { members: s.members }) })
2165
2341
  ] });
2166
2342
  }
2167
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2168
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2169
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.component }),
2170
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: s.component })
2343
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2344
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2345
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.component }),
2346
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.component })
2171
2347
  ] }),
2172
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2173
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.reason }),
2174
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderReasonTag, { reason: s.reason, changedProps: s.changedProps })
2348
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2349
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.reason }),
2350
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: s.reason, changedProps: s.changedProps })
2175
2351
  ] }),
2176
- s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
2177
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.changedProps }),
2178
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: s.changedProps.join(", ") })
2352
+ s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
2353
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.changedProps }),
2354
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.changedProps.join(", ") })
2179
2355
  ] }),
2180
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2181
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2182
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2356
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2357
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2358
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2183
2359
  s.duration.toFixed(3),
2184
2360
  "ms"
2185
2361
  ] })
2186
2362
  ] }),
2187
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2188
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.at }),
2189
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2363
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2364
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.at }),
2365
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2190
2366
  s.at.toFixed(2),
2191
2367
  "ms"
2192
2368
  ] })
@@ -2216,11 +2392,11 @@ function StackFrames({
2216
2392
  cancelled = true;
2217
2393
  };
2218
2394
  }, [raw]);
2219
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2220
- resolving && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
2221
- frames.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#666" }, children: t.noStack }) : frames.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
2222
- f.fnName ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: f.fnName }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#666" }, children: t.anonymous }),
2223
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#888" }, children: [
2395
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
2396
+ resolving && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
2397
+ 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: [
2398
+ 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 }),
2399
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
2224
2400
  f.file,
2225
2401
  ":",
2226
2402
  f.line,
@@ -2234,7 +2410,7 @@ function ForcedReflowDetail({
2234
2410
  s,
2235
2411
  resolveFrame
2236
2412
  }) {
2237
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StackFrames, { raw: s.stack, resolveFrame }) });
2413
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StackFrames, { raw: s.stack, resolveFrame }) });
2238
2414
  }
2239
2415
  function HotFunctions({
2240
2416
  attribution,
@@ -2253,26 +2429,26 @@ function HotFunctions({
2253
2429
  cancelled = true;
2254
2430
  };
2255
2431
  }, [attribution]);
2256
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginTop: "6px" }, children: [
2257
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
2258
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.hotFunctionsHint }),
2432
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginTop: "6px" }, children: [
2433
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
2434
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.hotFunctionsHint }),
2259
2435
  attribution.map((a, i) => {
2260
2436
  const f = frames[i] ?? a.frame;
2261
2437
  const pct = Math.round(a.selfRatio * 100);
2262
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
2263
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
2264
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#ff9f0a", fontWeight: 600 }, children: f.fnName || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
2265
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
2438
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
2439
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
2440
+ /* @__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 }) }),
2441
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
2266
2442
  pct,
2267
2443
  "%"
2268
2444
  ] }),
2269
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#666", marginLeft: "6px" }, children: [
2445
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#666", marginLeft: "6px" }, children: [
2270
2446
  "(",
2271
2447
  a.sampleCount,
2272
2448
  ")"
2273
2449
  ] })
2274
2450
  ] }),
2275
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
2451
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
2276
2452
  f.file,
2277
2453
  ":",
2278
2454
  f.line,
@@ -2289,59 +2465,59 @@ function LongTaskDetail({
2289
2465
  }) {
2290
2466
  const { t } = useI18n();
2291
2467
  const scripts = s.scripts ? [...s.scripts].sort((a, b) => b.duration - a.duration) : [];
2292
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2293
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2294
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.started }),
2295
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2468
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2469
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2470
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.started }),
2471
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2296
2472
  s.at.toFixed(2),
2297
2473
  "ms"
2298
2474
  ] })
2299
2475
  ] }),
2300
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2301
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.ended }),
2302
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2476
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2477
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.ended }),
2478
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2303
2479
  (s.at + s.duration).toFixed(2),
2304
2480
  "ms"
2305
2481
  ] })
2306
2482
  ] }),
2307
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2308
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2309
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2483
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2484
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2485
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2310
2486
  s.duration.toFixed(2),
2311
2487
  "ms"
2312
2488
  ] })
2313
2489
  ] }),
2314
- typeof s.blockingDuration === "number" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2315
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.blockingTime }),
2316
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2490
+ typeof s.blockingDuration === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2491
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.blockingTime }),
2492
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2317
2493
  s.blockingDuration.toFixed(2),
2318
2494
  "ms"
2319
2495
  ] })
2320
2496
  ] }),
2321
- s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame }),
2322
- s.scripts !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginTop: "6px" }, children: [
2323
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
2324
- scripts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#666" }, children: t.noScripts }) : scripts.map((script, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
2325
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
2326
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: script.sourceFunctionName || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
2327
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
2328
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
2497
+ s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame }),
2498
+ s.scripts !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginTop: "6px" }, children: [
2499
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
2500
+ 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: [
2501
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
2502
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: script.sourceFunctionName || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
2503
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
2504
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
2329
2505
  script.duration.toFixed(1),
2330
2506
  "ms"
2331
2507
  ] })
2332
2508
  ] }),
2333
- script.sourceURL && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
2509
+ script.sourceURL && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
2334
2510
  script.sourceURL,
2335
2511
  script.charPosition >= 0 ? `@${script.charPosition}` : ""
2336
2512
  ] }),
2337
- script.invoker && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "#666" }, children: [
2513
+ script.invoker && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#666" }, children: [
2338
2514
  t.invoker,
2339
2515
  ": ",
2340
2516
  script.invoker
2341
2517
  ] })
2342
2518
  ] }, i))
2343
2519
  ] }),
2344
- s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StackFrames, { raw: s.stack, resolveFrame, limit: 5 }) })
2520
+ 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 }) })
2345
2521
  ] });
2346
2522
  }
2347
2523
  var INTERACTION_PHASE_COLOR = { input: "#8e8e93", processing: "#5ac8fa", presentation: "#34c759" };
@@ -2356,33 +2532,33 @@ function InteractionDetail({
2356
2532
  { label: t.processingTime, ms: s.processing, color: INTERACTION_PHASE_COLOR.processing },
2357
2533
  { label: t.presentation, ms: s.presentation, color: INTERACTION_PHASE_COLOR.presentation }
2358
2534
  ];
2359
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2360
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2361
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.interactionEvent }),
2362
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2535
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2536
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2537
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.interactionEvent }),
2538
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2363
2539
  s.eventType,
2364
2540
  s.target ? ` \xB7 ${s.target}` : ""
2365
2541
  ] })
2366
2542
  ] }),
2367
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2368
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2369
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2543
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2544
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2545
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2370
2546
  s.duration.toFixed(0),
2371
2547
  "ms"
2372
2548
  ] })
2373
2549
  ] }),
2374
- /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("div", { style: { width: `${p.ms / total * 100}%`, background: p.color } }, i)) }),
2375
- phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
2376
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
2377
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
2550
+ /* @__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)) }),
2551
+ phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2552
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
2553
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
2378
2554
  p.label
2379
2555
  ] }),
2380
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2556
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2381
2557
  p.ms.toFixed(0),
2382
2558
  "ms"
2383
2559
  ] })
2384
2560
  ] }, i)),
2385
- s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame })
2561
+ s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame })
2386
2562
  ] });
2387
2563
  }
2388
2564
  function SignalDetail({
@@ -2391,24 +2567,24 @@ function SignalDetail({
2391
2567
  }) {
2392
2568
  switch (s.kind) {
2393
2569
  case "forced-reflow":
2394
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ForcedReflowDetail, { s, resolveFrame });
2570
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ForcedReflowDetail, { s, resolveFrame });
2395
2571
  case "layout-shift":
2396
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LayoutShiftDetail, { s });
2572
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutShiftDetail, { s });
2397
2573
  case "long-task":
2398
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LongTaskDetail, { s, resolveFrame });
2574
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LongTaskDetail, { s, resolveFrame });
2399
2575
  case "interaction":
2400
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InteractionDetail, { s, resolveFrame });
2576
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InteractionDetail, { s, resolveFrame });
2401
2577
  case "network":
2402
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NetworkDetail, { s });
2578
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NetworkDetail, { s });
2403
2579
  case "web-vital":
2404
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WebVitalDetail, { s });
2580
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(WebVitalDetail, { s });
2405
2581
  case "render":
2406
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderDetail, { s });
2582
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderDetail, { s });
2407
2583
  }
2408
2584
  }
2409
2585
  function SeverityDot({ sev, title }) {
2410
2586
  const { t } = useI18n();
2411
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2587
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2412
2588
  "span",
2413
2589
  {
2414
2590
  "data-severity": sev,
@@ -2431,9 +2607,9 @@ function SummaryLine({ signal }) {
2431
2607
  if (signal.kind === "web-vital") {
2432
2608
  const rating = webVitalRating(signal.name, signal.value);
2433
2609
  const unit = WEB_VITAL_UNIT2[signal.name];
2434
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2435
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RatingDot, { rating }),
2436
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: signal.name }),
2610
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2611
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RatingDot, { rating }),
2612
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: signal.name }),
2437
2613
  ": ",
2438
2614
  signal.value.toFixed(2),
2439
2615
  unit
@@ -2442,12 +2618,12 @@ function SummaryLine({ signal }) {
2442
2618
  const sev = severityForSignal(signal);
2443
2619
  const color = SEVERITY_COLOR[sev];
2444
2620
  if (signal.kind === "long-task") {
2445
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2621
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2446
2622
  "@ ",
2447
2623
  signal.at.toFixed(1),
2448
2624
  "ms \u2022 duration",
2449
2625
  " ",
2450
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
2626
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
2451
2627
  signal.duration.toFixed(1),
2452
2628
  "ms"
2453
2629
  ] })
@@ -2455,59 +2631,59 @@ function SummaryLine({ signal }) {
2455
2631
  }
2456
2632
  if (signal.kind === "forced-reflow") {
2457
2633
  const count = signal.count ?? 1;
2458
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2634
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2459
2635
  "@ ",
2460
2636
  signal.at.toFixed(1),
2461
2637
  "ms \u2022 duration",
2462
2638
  " ",
2463
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
2639
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
2464
2640
  signal.duration.toFixed(2),
2465
2641
  "ms"
2466
2642
  ] }),
2467
- count > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#888" }, children: [
2643
+ count > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
2468
2644
  " \u2022 ",
2469
2645
  t.coalescedReads(count)
2470
2646
  ] })
2471
2647
  ] });
2472
2648
  }
2473
2649
  if (signal.kind === "layout-shift") {
2474
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2650
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2475
2651
  "@ ",
2476
2652
  signal.at.toFixed(1),
2477
2653
  "ms \u2022 value",
2478
2654
  " ",
2479
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color }, children: formatCls(signal.value) }),
2655
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color }, children: formatCls(signal.value) }),
2480
2656
  " \u2022 ",
2481
2657
  t.sourceCount(signal.sources.length)
2482
2658
  ] });
2483
2659
  }
2484
2660
  if (signal.kind === "render") {
2485
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
2486
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: signal.component }),
2487
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
2488
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
2661
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
2662
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: signal.component }),
2663
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
2664
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
2489
2665
  signal.duration.toFixed(2),
2490
2666
  "ms"
2491
2667
  ] }),
2492
- signal.count && signal.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
2668
+ signal.count && signal.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
2493
2669
  ] });
2494
2670
  }
2495
2671
  if (signal.kind === "network") {
2496
2672
  const url = signal.url.length > 60 ? signal.url.slice(0, 57) + "..." : signal.url;
2497
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2673
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2498
2674
  url,
2499
2675
  " \u2022 ",
2500
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
2676
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
2501
2677
  signal.duration.toFixed(0),
2502
2678
  "ms"
2503
2679
  ] }),
2504
- signal.blocking && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: SEVERITY_COLOR.high }, children: [
2680
+ signal.blocking && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.high }, children: [
2505
2681
  " \u2022 ",
2506
2682
  t.blocking
2507
2683
  ] })
2508
2684
  ] });
2509
2685
  }
2510
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: summary(signal) });
2686
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: summary(signal) });
2511
2687
  }
2512
2688
  function tabSupportsGrouping(kind) {
2513
2689
  return kind === "render" || kind === "forced-reflow";
@@ -2581,7 +2757,7 @@ function groupSignals(signals, mode, kind) {
2581
2757
  function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveFrame }) {
2582
2758
  const hasGeometry = signal.kind === "layout-shift" && signal.sources.length > 0;
2583
2759
  const sev = severityForSignal(signal);
2584
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2760
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2585
2761
  "li",
2586
2762
  {
2587
2763
  "aria-expanded": expanded,
@@ -2603,22 +2779,22 @@ function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveF
2603
2779
  userSelect: "none"
2604
2780
  },
2605
2781
  children: [
2606
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
2607
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
2608
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SeverityDot, { sev }),
2609
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SummaryLine, { signal })
2782
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
2783
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
2784
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SeverityDot, { sev }),
2785
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SummaryLine, { signal })
2610
2786
  ] }),
2611
- expanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SignalDetail, { s: signal, resolveFrame }) })
2787
+ 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 }) })
2612
2788
  ]
2613
2789
  }
2614
2790
  );
2615
2791
  }
2616
2792
  function CascadeMembers({ members }) {
2617
2793
  const minDepth = members.reduce((m, s) => Math.min(m, s.depth), Infinity);
2618
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: members.map((m, i) => {
2794
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: members.map((m, i) => {
2619
2795
  const indent = (m.depth - minDepth) * 14;
2620
2796
  const isCascade = m.reason === "parent";
2621
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2797
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2622
2798
  "div",
2623
2799
  {
2624
2800
  style: {
@@ -2629,10 +2805,10 @@ function CascadeMembers({ members }) {
2629
2805
  gap: "6px"
2630
2806
  },
2631
2807
  children: [
2632
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
2633
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: m.component }),
2634
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
2635
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#888" }, children: [
2808
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
2809
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: m.component }),
2810
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
2811
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
2636
2812
  m.duration.toFixed(2),
2637
2813
  "ms"
2638
2814
  ] })
@@ -2646,7 +2822,7 @@ function LanguageToggle() {
2646
2822
  const { lang, setLang, t } = useI18n();
2647
2823
  const langs = ["en", "ko"];
2648
2824
  const labels = { en: "EN", ko: "\uD55C" };
2649
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2825
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2650
2826
  "div",
2651
2827
  {
2652
2828
  role: "group",
@@ -2659,7 +2835,7 @@ function LanguageToggle() {
2659
2835
  },
2660
2836
  children: langs.map((l) => {
2661
2837
  const active = lang === l;
2662
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2838
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2663
2839
  "button",
2664
2840
  {
2665
2841
  type: "button",
@@ -2688,6 +2864,7 @@ function Panel(props) {
2688
2864
  const { t } = useI18n();
2689
2865
  const grouped = (0, import_hooks3.useMemo)(() => groupByKind(result.signals), [result.signals]);
2690
2866
  const kindsPresent = KIND_ORDER.filter((k) => grouped[k].length > 0);
2867
+ const unsupported = (0, import_hooks3.useMemo)(() => (0, import_core4.unsupportedKinds)(), []);
2691
2868
  const hasTimelineSignals = result.signals.some((s) => s.kind !== "web-vital") || (result.heapSamples?.length ?? 0) > 0 || (result.frames?.length ?? 0) > 0;
2692
2869
  const [activeTab, setActiveTab] = (0, import_hooks3.useState)(
2693
2870
  kindsPresent[0] ?? "forced-reflow"
@@ -2753,12 +2930,12 @@ function Panel(props) {
2753
2930
  flexDirection: "column",
2754
2931
  overflow: "hidden"
2755
2932
  };
2756
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
2757
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
2758
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "react-perfscope" }),
2759
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
2760
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LanguageToggle, {}),
2761
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2933
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
2934
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
2935
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: "react-perfscope" }),
2936
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
2937
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LanguageToggle, {}),
2938
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2762
2939
  "button",
2763
2940
  {
2764
2941
  type: "button",
@@ -2777,7 +2954,7 @@ function Panel(props) {
2777
2954
  children: t.save
2778
2955
  }
2779
2956
  ),
2780
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2957
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2781
2958
  "button",
2782
2959
  {
2783
2960
  type: "button",
@@ -2789,9 +2966,24 @@ function Panel(props) {
2789
2966
  )
2790
2967
  ] })
2791
2968
  ] }),
2792
- kindsPresent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#888" }, children: t.noSignals }),
2793
- kindsPresent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2794
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2969
+ unsupported.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2970
+ "div",
2971
+ {
2972
+ style: {
2973
+ padding: "6px 8px",
2974
+ marginBottom: "8px",
2975
+ fontSize: "11px",
2976
+ color: "#888",
2977
+ background: "#141414",
2978
+ border: "1px solid #1f1f1f",
2979
+ borderRadius: "6px"
2980
+ },
2981
+ children: t.unsupportedInBrowser(unsupported.map((k) => t.kindLabel(k)).join(", "))
2982
+ }
2983
+ ),
2984
+ kindsPresent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#888" }, children: t.noSignals }),
2985
+ kindsPresent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
2986
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2795
2987
  SummaryHeader,
2796
2988
  {
2797
2989
  signals: result.signals,
@@ -2803,8 +2995,8 @@ function Panel(props) {
2803
2995
  }
2804
2996
  }
2805
2997
  ),
2806
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
2807
- hasTimelineSignals && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2998
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
2999
+ hasTimelineSignals && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2808
3000
  "button",
2809
3001
  {
2810
3002
  type: "button",
@@ -2829,7 +3021,7 @@ function Panel(props) {
2829
3021
  kindsPresent.map((kind) => {
2830
3022
  const worst = worstSeverity(grouped[kind]);
2831
3023
  const active = activeKind === kind;
2832
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3024
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2833
3025
  "button",
2834
3026
  {
2835
3027
  type: "button",
@@ -2852,7 +3044,7 @@ function Panel(props) {
2852
3044
  gap: "6px"
2853
3045
  },
2854
3046
  children: [
2855
- worst !== "low" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
3047
+ worst !== "low" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
2856
3048
  t.kindLabel(kind),
2857
3049
  " ",
2858
3050
  grouped[kind].length
@@ -2862,10 +3054,10 @@ function Panel(props) {
2862
3054
  );
2863
3055
  })
2864
3056
  ] }),
2865
- activeKind && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px", fontSize: "11px", color: "#888", flexWrap: "wrap" }, children: [
2866
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
3057
+ 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: [
3058
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
2867
3059
  t.sort,
2868
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3060
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2869
3061
  "select",
2870
3062
  {
2871
3063
  "aria-label": t.sort,
@@ -2877,15 +3069,15 @@ function Panel(props) {
2877
3069
  },
2878
3070
  style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
2879
3071
  children: [
2880
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "chronological", children: t.sortChronological }),
2881
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "severity", children: t.sortSeverity })
3072
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "chronological", children: t.sortChronological }),
3073
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "severity", children: t.sortSeverity })
2882
3074
  ]
2883
3075
  }
2884
3076
  )
2885
3077
  ] }),
2886
- tabSupportsGrouping(activeKind) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
3078
+ tabSupportsGrouping(activeKind) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
2887
3079
  t.groupBy,
2888
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3080
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2889
3081
  "select",
2890
3082
  {
2891
3083
  "aria-label": t.groupBy,
@@ -2897,15 +3089,15 @@ function Panel(props) {
2897
3089
  },
2898
3090
  style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
2899
3091
  children: [
2900
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "chronological", children: t.groupChronological }),
2901
- activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "commit", children: t.groupCommit }),
2902
- activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "component", children: t.groupComponent }),
2903
- activeKind === "forced-reflow" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "source", children: t.groupSource })
3092
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "chronological", children: t.groupChronological }),
3093
+ activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "commit", children: t.groupCommit }),
3094
+ activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "component", children: t.groupComponent }),
3095
+ activeKind === "forced-reflow" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "source", children: t.groupSource })
2904
3096
  ]
2905
3097
  }
2906
3098
  )
2907
3099
  ] }),
2908
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3100
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2909
3101
  "input",
2910
3102
  {
2911
3103
  type: "text",
@@ -2920,7 +3112,7 @@ function Panel(props) {
2920
3112
  }
2921
3113
  )
2922
3114
  ] }),
2923
- activeTab === "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3115
+ 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)(
2924
3116
  Timeline,
2925
3117
  {
2926
3118
  signals: result.signals,
@@ -2936,7 +3128,7 @@ function Panel(props) {
2936
3128
  }
2937
3129
  }
2938
3130
  ) }),
2939
- activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3131
+ activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2940
3132
  RenderInsights,
2941
3133
  {
2942
3134
  signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
@@ -2946,7 +3138,8 @@ function Panel(props) {
2946
3138
  }
2947
3139
  }
2948
3140
  ),
2949
- activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3141
+ activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LongTaskEpisode, { signals: result.signals }),
3142
+ activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2950
3143
  "div",
2951
3144
  {
2952
3145
  style: {
@@ -2958,10 +3151,28 @@ function Panel(props) {
2958
3151
  border: "1px solid #1f1f1f",
2959
3152
  borderRadius: "6px"
2960
3153
  },
2961
- children: t.interactionThresholdHint
3154
+ children: t.layoutShiftHint
2962
3155
  }
2963
3156
  ),
2964
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
3157
+ activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
3158
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InpEpisode, { signals: result.signals }),
3159
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
3160
+ "div",
3161
+ {
3162
+ style: {
3163
+ padding: "6px 8px",
3164
+ marginBottom: "6px",
3165
+ fontSize: "11px",
3166
+ color: "#888",
3167
+ background: "#141414",
3168
+ border: "1px solid #1f1f1f",
3169
+ borderRadius: "6px"
3170
+ },
3171
+ children: t.interactionThresholdHint
3172
+ }
3173
+ )
3174
+ ] }),
3175
+ /* @__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 && (() => {
2965
3176
  const filtered = grouped[activeKind].filter(
2966
3177
  (s) => signalMatchesFilter(s, filterText[activeKind] ?? "")
2967
3178
  );
@@ -2971,7 +3182,7 @@ function Panel(props) {
2971
3182
  const currentMode = groupMode[activeKind] ?? "chronological";
2972
3183
  if (currentMode === "chronological") {
2973
3184
  const key2 = `${activeKind}-${gi}`;
2974
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3185
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2975
3186
  SignalRow,
2976
3187
  {
2977
3188
  signal: g.signals[0],
@@ -2988,7 +3199,7 @@ function Panel(props) {
2988
3199
  const isCascade = activeKind === "render" && currentMode === "commit";
2989
3200
  const renderMembers = g.signals.filter((s) => s.kind === "render");
2990
3201
  const unnecessary = isCascade ? renderMembers.filter((s) => s.reason === "parent").length : 0;
2991
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3202
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2992
3203
  "li",
2993
3204
  {
2994
3205
  "aria-expanded": isOpen,
@@ -3003,34 +3214,34 @@ function Panel(props) {
3003
3214
  userSelect: "none"
3004
3215
  },
3005
3216
  children: [
3006
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
3007
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
3008
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
3009
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: g.label }),
3217
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
3218
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
3219
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
3220
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: g.label }),
3010
3221
  " \xD7",
3011
3222
  g.count
3012
3223
  ] }),
3013
- isCascade && unnecessary > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
3224
+ isCascade && unnecessary > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
3014
3225
  "\u26A0 ",
3015
3226
  t.unnecessaryRenders(unnecessary)
3016
3227
  ] })
3017
3228
  ] }),
3018
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a", paddingLeft: "8px" }, children: isCascade ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CascadeMembers, { members: renderMembers }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
3019
- g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { padding: "2px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SummaryLine, { signal: s }) }, si)),
3020
- g.signals.length > 20 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#888", marginTop: "4px" }, children: t.moreItems(g.signals.length - 20) })
3229
+ 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: [
3230
+ 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)),
3231
+ g.signals.length > 20 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#888", marginTop: "4px" }, children: t.moreItems(g.signals.length - 20) })
3021
3232
  ] }) })
3022
3233
  ]
3023
3234
  },
3024
3235
  key
3025
3236
  );
3026
3237
  }) }),
3027
- activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
3238
+ 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 })
3028
3239
  ] })
3029
3240
  ] });
3030
3241
  }
3031
3242
 
3032
3243
  // src/app.tsx
3033
- var import_jsx_runtime6 = require("preact/jsx-runtime");
3244
+ var import_jsx_runtime9 = require("preact/jsx-runtime");
3034
3245
  function App(props) {
3035
3246
  const { recorder, position = "bottom-right", resolveFrame, finalize } = props;
3036
3247
  const [recording, setRecording] = (0, import_hooks4.useState)(false);
@@ -3076,8 +3287,8 @@ function App(props) {
3076
3287
  function onClose() {
3077
3288
  setResult(null);
3078
3289
  }
3079
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(I18nProvider, { children: [
3080
- result === null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3290
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(I18nProvider, { children: [
3291
+ result === null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3081
3292
  Widget,
3082
3293
  {
3083
3294
  recording,
@@ -3086,16 +3297,16 @@ function App(props) {
3086
3297
  position
3087
3298
  }
3088
3299
  ),
3089
- result !== null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Panel, { result, position, onClose, resolveFrame })
3300
+ result !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Panel, { result, position, onClose, resolveFrame })
3090
3301
  ] });
3091
3302
  }
3092
3303
 
3093
3304
  // src/mount.tsx
3094
- var import_jsx_runtime7 = require("preact/jsx-runtime");
3305
+ var import_jsx_runtime10 = require("preact/jsx-runtime");
3095
3306
  function mount(opts) {
3096
3307
  const { recorder, position = "bottom-right", host = document.body, resolveFrame, finalize } = opts;
3097
3308
  return mountShadow(
3098
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(App, { recorder, position, resolveFrame, finalize }),
3309
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(App, { recorder, position, resolveFrame, finalize }),
3099
3310
  { parent: host }
3100
3311
  );
3101
3312
  }