@react-perfscope/ui 0.4.0 → 0.5.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 +390 -198
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +390 -198
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -3
package/dist/index.cjs CHANGED
@@ -178,7 +178,8 @@ 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."
182
183
  };
183
184
  var KIND_LABELS_KO = {
184
185
  render: "\uB80C\uB354",
@@ -271,7 +272,8 @@ var ko = {
271
272
  inputDelay: "\uC785\uB825 \uC9C0\uC5F0",
272
273
  processingTime: "\uCC98\uB9AC",
273
274
  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."
275
+ 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
+ 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."
275
277
  };
276
278
  var STRINGS = { en, ko };
277
279
  function isLang(v) {
@@ -1893,6 +1895,177 @@ function RenderInsights({ signals, onSelect }) {
1893
1895
  );
1894
1896
  }
1895
1897
 
1898
+ // src/inp-episode.tsx
1899
+ var import_core2 = require("@react-perfscope/core");
1900
+
1901
+ // src/episode-shared.tsx
1902
+ var import_jsx_runtime5 = require("preact/jsx-runtime");
1903
+ function memberLabel(m) {
1904
+ const s = m.signal;
1905
+ if (s.kind === "render") return `${s.component} (${s.reason})`;
1906
+ if (s.kind === "forced-reflow") {
1907
+ const top = s.stack[0];
1908
+ return top ? `forced reflow \xB7 ${top.file}:${top.line}` : "forced reflow";
1909
+ }
1910
+ return `layout shift ${s.value.toFixed(3)}`;
1911
+ }
1912
+ function EpisodeMemberRow({ member }) {
1913
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1914
+ "div",
1915
+ {
1916
+ "data-member-kind": member.signal.kind,
1917
+ style: { display: "flex", alignItems: "center", gap: "6px", padding: "1px 0", color: "#ccc" },
1918
+ children: [
1919
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: memberLabel(member) }),
1920
+ member.causedBy && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { flex: "0 0 auto", color: "#888" }, children: [
1921
+ "\u2190 ",
1922
+ member.causedBy.component
1923
+ ] }),
1924
+ member.confidence === "caused" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1925
+ "span",
1926
+ {
1927
+ style: {
1928
+ flex: "0 0 auto",
1929
+ fontSize: "9px",
1930
+ color: "#e0a030",
1931
+ border: "1px solid #5a4410",
1932
+ borderRadius: "3px",
1933
+ padding: "0 4px"
1934
+ },
1935
+ children: "caused"
1936
+ }
1937
+ )
1938
+ ]
1939
+ }
1940
+ );
1941
+ }
1942
+ function EpisodeMemberList({ members }) {
1943
+ if (members.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#555" }, children: "\u2014" });
1944
+ 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)) });
1945
+ }
1946
+
1947
+ // src/inp-episode.tsx
1948
+ var import_jsx_runtime6 = require("preact/jsx-runtime");
1949
+ var PHASES = [
1950
+ { phase: "input-delay", labelKey: "inputDelay" },
1951
+ { phase: "processing", labelKey: "processingTime" },
1952
+ { phase: "presentation", labelKey: "presentation" }
1953
+ ];
1954
+ function worstInteractionEpisode(signals) {
1955
+ let worst = null;
1956
+ for (const ep of (0, import_core2.correlate)(signals)) {
1957
+ if (ep.anchor.kind !== "interaction") continue;
1958
+ if (!worst || ep.anchor.duration > worst.anchor.duration) worst = ep;
1959
+ }
1960
+ return worst;
1961
+ }
1962
+ function phaseMs(episode, phase) {
1963
+ const a = episode.anchor;
1964
+ if (a.kind !== "interaction") return 0;
1965
+ return phase === "input-delay" ? a.inputDelay : phase === "processing" ? a.processing : a.presentation;
1966
+ }
1967
+ function InpEpisode({ signals }) {
1968
+ const { t } = useI18n();
1969
+ const episode = worstInteractionEpisode(signals);
1970
+ if (!episode || episode.anchor.kind !== "interaction") return null;
1971
+ const a = episode.anchor;
1972
+ const target = a.target ? ` on ${a.target}` : "";
1973
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1974
+ "div",
1975
+ {
1976
+ "data-inp-episode": true,
1977
+ style: {
1978
+ margin: "0 0 8px",
1979
+ border: "1px solid #1f1f1f",
1980
+ borderRadius: "6px",
1981
+ background: "#121212",
1982
+ fontFamily: "SF Mono, Menlo, Consolas, monospace",
1983
+ fontSize: "11px",
1984
+ overflow: "hidden"
1985
+ },
1986
+ children: [
1987
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
1988
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: a.eventType }),
1989
+ target,
1990
+ " \u2014 ",
1991
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("strong", { children: [
1992
+ Math.round(a.duration),
1993
+ "ms"
1994
+ ] }),
1995
+ " ",
1996
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#888" }, children: "INP" })
1997
+ ] }),
1998
+ PHASES.map(({ phase, labelKey }) => {
1999
+ const members = episode.members.filter((m) => m.phase === phase);
2000
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2001
+ "div",
2002
+ {
2003
+ "data-inp-phase": phase,
2004
+ style: { display: "flex", gap: "8px", padding: "5px 8px", borderTop: "1px solid #1a1a1a" },
2005
+ children: [
2006
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: "0 0 92px", color: "#aaa" }, children: [
2007
+ t[labelKey],
2008
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { color: "#666", fontSize: "10px" }, children: [
2009
+ Math.round(phaseMs(episode, phase)),
2010
+ "ms"
2011
+ ] })
2012
+ ] }),
2013
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EpisodeMemberList, { members }) })
2014
+ ]
2015
+ },
2016
+ phase
2017
+ );
2018
+ })
2019
+ ]
2020
+ }
2021
+ );
2022
+ }
2023
+
2024
+ // src/long-task-episode.tsx
2025
+ var import_core3 = require("@react-perfscope/core");
2026
+ var import_jsx_runtime7 = require("preact/jsx-runtime");
2027
+ function worstLongTaskEpisode(signals) {
2028
+ let worst = null;
2029
+ for (const ep of (0, import_core3.correlate)(signals)) {
2030
+ if (ep.anchor.kind !== "long-task") continue;
2031
+ if (!worst || ep.anchor.duration > worst.anchor.duration) worst = ep;
2032
+ }
2033
+ return worst;
2034
+ }
2035
+ function LongTaskEpisode({ signals }) {
2036
+ const { t } = useI18n();
2037
+ const episode = worstLongTaskEpisode(signals);
2038
+ if (!episode || episode.anchor.kind !== "long-task") return null;
2039
+ if (episode.members.length === 0) return null;
2040
+ const a = episode.anchor;
2041
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
2042
+ "div",
2043
+ {
2044
+ "data-long-task-episode": true,
2045
+ style: {
2046
+ margin: "0 0 8px",
2047
+ border: "1px solid #1f1f1f",
2048
+ borderRadius: "6px",
2049
+ background: "#121212",
2050
+ fontFamily: "SF Mono, Menlo, Consolas, monospace",
2051
+ fontSize: "11px",
2052
+ overflow: "hidden"
2053
+ },
2054
+ children: [
2055
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
2056
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: t.kindLabel("long-task") }),
2057
+ " \u2014 ",
2058
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("strong", { children: [
2059
+ Math.round(a.duration),
2060
+ "ms"
2061
+ ] })
2062
+ ] }),
2063
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "5px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EpisodeMemberList, { members: episode.members }) })
2064
+ ]
2065
+ }
2066
+ );
2067
+ }
2068
+
1896
2069
  // src/filter.ts
1897
2070
  function signalSearchText(signal) {
1898
2071
  switch (signal.kind) {
@@ -1933,7 +2106,7 @@ function signalMatchesFilter(signal, query) {
1933
2106
  }
1934
2107
 
1935
2108
  // src/panel.tsx
1936
- var import_jsx_runtime5 = require("preact/jsx-runtime");
2109
+ var import_jsx_runtime8 = require("preact/jsx-runtime");
1937
2110
  var RENDER_REASON_COLOR = {
1938
2111
  mount: "#5ac8fa",
1939
2112
  state: "#34c759",
@@ -1957,7 +2130,7 @@ function RenderReasonTag({ reason, changedProps }) {
1957
2130
  const color = RENDER_REASON_COLOR[reason];
1958
2131
  const label = renderReasonLabel(t, reason);
1959
2132
  const keys = reason === "props" && changedProps && changedProps.length > 0 ? `: ${changedProps.join(", ")}` : "";
1960
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2133
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1961
2134
  "span",
1962
2135
  {
1963
2136
  style: {
@@ -2013,7 +2186,7 @@ var WEB_VITAL_UNIT2 = {
2013
2186
  };
2014
2187
  function RatingDot({ rating }) {
2015
2188
  const { t } = useI18n();
2016
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2189
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2017
2190
  "span",
2018
2191
  {
2019
2192
  "data-rating": rating,
@@ -2071,18 +2244,18 @@ var monoStyle = {
2071
2244
  };
2072
2245
  function LayoutShiftDetail({ s }) {
2073
2246
  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) })
2247
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2248
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2249
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.value }),
2250
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.value.toFixed(4) })
2078
2251
  ] }),
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: [
2252
+ 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: [
2253
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
2081
2254
  t.rect,
2082
2255
  " ",
2083
2256
  i + 1
2084
2257
  ] }),
2085
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2258
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2086
2259
  "x=",
2087
2260
  r.x.toFixed(0),
2088
2261
  " y=",
@@ -2097,25 +2270,25 @@ function LayoutShiftDetail({ s }) {
2097
2270
  }
2098
2271
  function NetworkDetail({ s }) {
2099
2272
  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: [
2273
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2274
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.url }) }),
2275
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2276
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.started }),
2277
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2105
2278
  s.startedAt.toFixed(0),
2106
2279
  "ms"
2107
2280
  ] })
2108
2281
  ] }),
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: [
2282
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2283
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2284
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2112
2285
  s.duration.toFixed(0),
2113
2286
  "ms"
2114
2287
  ] })
2115
2288
  ] }),
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: [
2289
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2290
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.size }),
2291
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2119
2292
  (s.size / 1024).toFixed(2),
2120
2293
  "KB (",
2121
2294
  s.size,
@@ -2124,69 +2297,69 @@ function NetworkDetail({ s }) {
2124
2297
  ")"
2125
2298
  ] })
2126
2299
  ] }),
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 })
2300
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2301
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.renderBlocking }),
2302
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.blocking ? t.yes : t.no })
2130
2303
  ] })
2131
2304
  ] });
2132
2305
  }
2133
2306
  function WebVitalDetail({ s }) {
2134
2307
  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 })
2308
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2309
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2310
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.metric }),
2311
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.name })
2139
2312
  ] }),
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) })
2313
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2314
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.value }),
2315
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.value.toFixed(2) })
2143
2316
  ] })
2144
2317
  ] });
2145
2318
  }
2146
2319
  function RenderDetail({ s }) {
2147
2320
  const { t } = useI18n();
2148
2321
  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: [
2322
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2323
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2324
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2325
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2153
2326
  s.duration.toFixed(3),
2154
2327
  "ms"
2155
2328
  ] })
2156
2329
  ] }),
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: [
2330
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2331
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.at }),
2332
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2160
2333
  s.at.toFixed(2),
2161
2334
  "ms"
2162
2335
  ] })
2163
2336
  ] }),
2164
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CascadeMembers, { members: s.members }) })
2337
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CascadeMembers, { members: s.members }) })
2165
2338
  ] });
2166
2339
  }
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 })
2340
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2341
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2342
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.component }),
2343
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.component })
2171
2344
  ] }),
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 })
2345
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2346
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.reason }),
2347
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: s.reason, changedProps: s.changedProps })
2175
2348
  ] }),
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(", ") })
2349
+ s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
2350
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.changedProps }),
2351
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: s.changedProps.join(", ") })
2179
2352
  ] }),
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: [
2353
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2354
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2355
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2183
2356
  s.duration.toFixed(3),
2184
2357
  "ms"
2185
2358
  ] })
2186
2359
  ] }),
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: [
2360
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2361
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.at }),
2362
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2190
2363
  s.at.toFixed(2),
2191
2364
  "ms"
2192
2365
  ] })
@@ -2216,11 +2389,11 @@ function StackFrames({
2216
2389
  cancelled = true;
2217
2390
  };
2218
2391
  }, [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: [
2392
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
2393
+ resolving && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
2394
+ 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: [
2395
+ 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 }),
2396
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
2224
2397
  f.file,
2225
2398
  ":",
2226
2399
  f.line,
@@ -2234,7 +2407,7 @@ function ForcedReflowDetail({
2234
2407
  s,
2235
2408
  resolveFrame
2236
2409
  }) {
2237
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StackFrames, { raw: s.stack, resolveFrame }) });
2410
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StackFrames, { raw: s.stack, resolveFrame }) });
2238
2411
  }
2239
2412
  function HotFunctions({
2240
2413
  attribution,
@@ -2253,26 +2426,26 @@ function HotFunctions({
2253
2426
  cancelled = true;
2254
2427
  };
2255
2428
  }, [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 }),
2429
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginTop: "6px" }, children: [
2430
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
2431
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.hotFunctionsHint }),
2259
2432
  attribution.map((a, i) => {
2260
2433
  const f = frames[i] ?? a.frame;
2261
2434
  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: [
2435
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
2436
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
2437
+ /* @__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 }) }),
2438
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
2266
2439
  pct,
2267
2440
  "%"
2268
2441
  ] }),
2269
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#666", marginLeft: "6px" }, children: [
2442
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#666", marginLeft: "6px" }, children: [
2270
2443
  "(",
2271
2444
  a.sampleCount,
2272
2445
  ")"
2273
2446
  ] })
2274
2447
  ] }),
2275
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
2448
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
2276
2449
  f.file,
2277
2450
  ":",
2278
2451
  f.line,
@@ -2289,59 +2462,59 @@ function LongTaskDetail({
2289
2462
  }) {
2290
2463
  const { t } = useI18n();
2291
2464
  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: [
2465
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2466
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2467
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.started }),
2468
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2296
2469
  s.at.toFixed(2),
2297
2470
  "ms"
2298
2471
  ] })
2299
2472
  ] }),
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: [
2473
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2474
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.ended }),
2475
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2303
2476
  (s.at + s.duration).toFixed(2),
2304
2477
  "ms"
2305
2478
  ] })
2306
2479
  ] }),
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: [
2480
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2481
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2482
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2310
2483
  s.duration.toFixed(2),
2311
2484
  "ms"
2312
2485
  ] })
2313
2486
  ] }),
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: [
2487
+ typeof s.blockingDuration === "number" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2488
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.blockingTime }),
2489
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2317
2490
  s.blockingDuration.toFixed(2),
2318
2491
  "ms"
2319
2492
  ] })
2320
2493
  ] }),
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: [
2494
+ s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame }),
2495
+ s.scripts !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginTop: "6px" }, children: [
2496
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
2497
+ 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: [
2498
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
2499
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: script.sourceFunctionName || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
2500
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
2501
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
2329
2502
  script.duration.toFixed(1),
2330
2503
  "ms"
2331
2504
  ] })
2332
2505
  ] }),
2333
- script.sourceURL && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
2506
+ script.sourceURL && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
2334
2507
  script.sourceURL,
2335
2508
  script.charPosition >= 0 ? `@${script.charPosition}` : ""
2336
2509
  ] }),
2337
- script.invoker && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "#666" }, children: [
2510
+ script.invoker && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "#666" }, children: [
2338
2511
  t.invoker,
2339
2512
  ": ",
2340
2513
  script.invoker
2341
2514
  ] })
2342
2515
  ] }, i))
2343
2516
  ] }),
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 }) })
2517
+ 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
2518
  ] });
2346
2519
  }
2347
2520
  var INTERACTION_PHASE_COLOR = { input: "#8e8e93", processing: "#5ac8fa", presentation: "#34c759" };
@@ -2356,33 +2529,33 @@ function InteractionDetail({
2356
2529
  { label: t.processingTime, ms: s.processing, color: INTERACTION_PHASE_COLOR.processing },
2357
2530
  { label: t.presentation, ms: s.presentation, color: INTERACTION_PHASE_COLOR.presentation }
2358
2531
  ];
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: [
2532
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
2533
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2534
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.interactionEvent }),
2535
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2363
2536
  s.eventType,
2364
2537
  s.target ? ` \xB7 ${s.target}` : ""
2365
2538
  ] })
2366
2539
  ] }),
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: [
2540
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2541
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: detailLabelStyle, children: t.duration }),
2542
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2370
2543
  s.duration.toFixed(0),
2371
2544
  "ms"
2372
2545
  ] })
2373
2546
  ] }),
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" } }),
2547
+ /* @__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)) }),
2548
+ phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: detailRowStyle, children: [
2549
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
2550
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
2378
2551
  p.label
2379
2552
  ] }),
2380
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2553
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2381
2554
  p.ms.toFixed(0),
2382
2555
  "ms"
2383
2556
  ] })
2384
2557
  ] }, i)),
2385
- s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame })
2558
+ s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame })
2386
2559
  ] });
2387
2560
  }
2388
2561
  function SignalDetail({
@@ -2391,24 +2564,24 @@ function SignalDetail({
2391
2564
  }) {
2392
2565
  switch (s.kind) {
2393
2566
  case "forced-reflow":
2394
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ForcedReflowDetail, { s, resolveFrame });
2567
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ForcedReflowDetail, { s, resolveFrame });
2395
2568
  case "layout-shift":
2396
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LayoutShiftDetail, { s });
2569
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutShiftDetail, { s });
2397
2570
  case "long-task":
2398
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LongTaskDetail, { s, resolveFrame });
2571
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LongTaskDetail, { s, resolveFrame });
2399
2572
  case "interaction":
2400
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InteractionDetail, { s, resolveFrame });
2573
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InteractionDetail, { s, resolveFrame });
2401
2574
  case "network":
2402
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NetworkDetail, { s });
2575
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NetworkDetail, { s });
2403
2576
  case "web-vital":
2404
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WebVitalDetail, { s });
2577
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(WebVitalDetail, { s });
2405
2578
  case "render":
2406
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderDetail, { s });
2579
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderDetail, { s });
2407
2580
  }
2408
2581
  }
2409
2582
  function SeverityDot({ sev, title }) {
2410
2583
  const { t } = useI18n();
2411
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2584
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2412
2585
  "span",
2413
2586
  {
2414
2587
  "data-severity": sev,
@@ -2431,9 +2604,9 @@ function SummaryLine({ signal }) {
2431
2604
  if (signal.kind === "web-vital") {
2432
2605
  const rating = webVitalRating(signal.name, signal.value);
2433
2606
  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 }),
2607
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2608
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RatingDot, { rating }),
2609
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: signal.name }),
2437
2610
  ": ",
2438
2611
  signal.value.toFixed(2),
2439
2612
  unit
@@ -2442,12 +2615,12 @@ function SummaryLine({ signal }) {
2442
2615
  const sev = severityForSignal(signal);
2443
2616
  const color = SEVERITY_COLOR[sev];
2444
2617
  if (signal.kind === "long-task") {
2445
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2618
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2446
2619
  "@ ",
2447
2620
  signal.at.toFixed(1),
2448
2621
  "ms \u2022 duration",
2449
2622
  " ",
2450
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
2623
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
2451
2624
  signal.duration.toFixed(1),
2452
2625
  "ms"
2453
2626
  ] })
@@ -2455,59 +2628,59 @@ function SummaryLine({ signal }) {
2455
2628
  }
2456
2629
  if (signal.kind === "forced-reflow") {
2457
2630
  const count = signal.count ?? 1;
2458
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2631
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2459
2632
  "@ ",
2460
2633
  signal.at.toFixed(1),
2461
2634
  "ms \u2022 duration",
2462
2635
  " ",
2463
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
2636
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
2464
2637
  signal.duration.toFixed(2),
2465
2638
  "ms"
2466
2639
  ] }),
2467
- count > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#888" }, children: [
2640
+ count > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
2468
2641
  " \u2022 ",
2469
2642
  t.coalescedReads(count)
2470
2643
  ] })
2471
2644
  ] });
2472
2645
  }
2473
2646
  if (signal.kind === "layout-shift") {
2474
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2647
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2475
2648
  "@ ",
2476
2649
  signal.at.toFixed(1),
2477
2650
  "ms \u2022 value",
2478
2651
  " ",
2479
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color }, children: formatCls(signal.value) }),
2652
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color }, children: formatCls(signal.value) }),
2480
2653
  " \u2022 ",
2481
2654
  t.sourceCount(signal.sources.length)
2482
2655
  ] });
2483
2656
  }
2484
2657
  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: [
2658
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
2659
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: signal.component }),
2660
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
2661
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
2489
2662
  signal.duration.toFixed(2),
2490
2663
  "ms"
2491
2664
  ] }),
2492
- signal.count && signal.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
2665
+ signal.count && signal.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
2493
2666
  ] });
2494
2667
  }
2495
2668
  if (signal.kind === "network") {
2496
2669
  const url = signal.url.length > 60 ? signal.url.slice(0, 57) + "..." : signal.url;
2497
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
2670
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
2498
2671
  url,
2499
2672
  " \u2022 ",
2500
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
2673
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color }, children: [
2501
2674
  signal.duration.toFixed(0),
2502
2675
  "ms"
2503
2676
  ] }),
2504
- signal.blocking && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: SEVERITY_COLOR.high }, children: [
2677
+ signal.blocking && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: SEVERITY_COLOR.high }, children: [
2505
2678
  " \u2022 ",
2506
2679
  t.blocking
2507
2680
  ] })
2508
2681
  ] });
2509
2682
  }
2510
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: summary(signal) });
2683
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: summary(signal) });
2511
2684
  }
2512
2685
  function tabSupportsGrouping(kind) {
2513
2686
  return kind === "render" || kind === "forced-reflow";
@@ -2581,7 +2754,7 @@ function groupSignals(signals, mode, kind) {
2581
2754
  function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveFrame }) {
2582
2755
  const hasGeometry = signal.kind === "layout-shift" && signal.sources.length > 0;
2583
2756
  const sev = severityForSignal(signal);
2584
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2757
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2585
2758
  "li",
2586
2759
  {
2587
2760
  "aria-expanded": expanded,
@@ -2603,22 +2776,22 @@ function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveF
2603
2776
  userSelect: "none"
2604
2777
  },
2605
2778
  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 })
2779
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
2780
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
2781
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SeverityDot, { sev }),
2782
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SummaryLine, { signal })
2610
2783
  ] }),
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 }) })
2784
+ 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
2785
  ]
2613
2786
  }
2614
2787
  );
2615
2788
  }
2616
2789
  function CascadeMembers({ members }) {
2617
2790
  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) => {
2791
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: members.map((m, i) => {
2619
2792
  const indent = (m.depth - minDepth) * 14;
2620
2793
  const isCascade = m.reason === "parent";
2621
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2794
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2622
2795
  "div",
2623
2796
  {
2624
2797
  style: {
@@ -2629,10 +2802,10 @@ function CascadeMembers({ members }) {
2629
2802
  gap: "6px"
2630
2803
  },
2631
2804
  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: [
2805
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
2806
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: m.component }),
2807
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
2808
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: "#888" }, children: [
2636
2809
  m.duration.toFixed(2),
2637
2810
  "ms"
2638
2811
  ] })
@@ -2646,7 +2819,7 @@ function LanguageToggle() {
2646
2819
  const { lang, setLang, t } = useI18n();
2647
2820
  const langs = ["en", "ko"];
2648
2821
  const labels = { en: "EN", ko: "\uD55C" };
2649
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2822
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2650
2823
  "div",
2651
2824
  {
2652
2825
  role: "group",
@@ -2659,7 +2832,7 @@ function LanguageToggle() {
2659
2832
  },
2660
2833
  children: langs.map((l) => {
2661
2834
  const active = lang === l;
2662
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2835
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2663
2836
  "button",
2664
2837
  {
2665
2838
  type: "button",
@@ -2753,12 +2926,12 @@ function Panel(props) {
2753
2926
  flexDirection: "column",
2754
2927
  overflow: "hidden"
2755
2928
  };
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)(
2929
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
2930
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
2931
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: "react-perfscope" }),
2932
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
2933
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LanguageToggle, {}),
2934
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2762
2935
  "button",
2763
2936
  {
2764
2937
  type: "button",
@@ -2777,7 +2950,7 @@ function Panel(props) {
2777
2950
  children: t.save
2778
2951
  }
2779
2952
  ),
2780
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2953
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2781
2954
  "button",
2782
2955
  {
2783
2956
  type: "button",
@@ -2789,9 +2962,9 @@ function Panel(props) {
2789
2962
  )
2790
2963
  ] })
2791
2964
  ] }),
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)(
2965
+ kindsPresent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#888" }, children: t.noSignals }),
2966
+ kindsPresent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
2967
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2795
2968
  SummaryHeader,
2796
2969
  {
2797
2970
  signals: result.signals,
@@ -2803,8 +2976,8 @@ function Panel(props) {
2803
2976
  }
2804
2977
  }
2805
2978
  ),
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)(
2979
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
2980
+ hasTimelineSignals && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2808
2981
  "button",
2809
2982
  {
2810
2983
  type: "button",
@@ -2829,7 +3002,7 @@ function Panel(props) {
2829
3002
  kindsPresent.map((kind) => {
2830
3003
  const worst = worstSeverity(grouped[kind]);
2831
3004
  const active = activeKind === kind;
2832
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3005
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2833
3006
  "button",
2834
3007
  {
2835
3008
  type: "button",
@@ -2852,7 +3025,7 @@ function Panel(props) {
2852
3025
  gap: "6px"
2853
3026
  },
2854
3027
  children: [
2855
- worst !== "low" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
3028
+ worst !== "low" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
2856
3029
  t.kindLabel(kind),
2857
3030
  " ",
2858
3031
  grouped[kind].length
@@ -2862,10 +3035,10 @@ function Panel(props) {
2862
3035
  );
2863
3036
  })
2864
3037
  ] }),
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: [
3038
+ 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: [
3039
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
2867
3040
  t.sort,
2868
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3041
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2869
3042
  "select",
2870
3043
  {
2871
3044
  "aria-label": t.sort,
@@ -2877,15 +3050,15 @@ function Panel(props) {
2877
3050
  },
2878
3051
  style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
2879
3052
  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 })
3053
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "chronological", children: t.sortChronological }),
3054
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "severity", children: t.sortSeverity })
2882
3055
  ]
2883
3056
  }
2884
3057
  )
2885
3058
  ] }),
2886
- tabSupportsGrouping(activeKind) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
3059
+ tabSupportsGrouping(activeKind) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
2887
3060
  t.groupBy,
2888
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3061
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2889
3062
  "select",
2890
3063
  {
2891
3064
  "aria-label": t.groupBy,
@@ -2897,15 +3070,15 @@ function Panel(props) {
2897
3070
  },
2898
3071
  style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
2899
3072
  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 })
3073
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "chronological", children: t.groupChronological }),
3074
+ activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "commit", children: t.groupCommit }),
3075
+ activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "component", children: t.groupComponent }),
3076
+ activeKind === "forced-reflow" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "source", children: t.groupSource })
2904
3077
  ]
2905
3078
  }
2906
3079
  )
2907
3080
  ] }),
2908
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3081
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2909
3082
  "input",
2910
3083
  {
2911
3084
  type: "text",
@@ -2920,7 +3093,7 @@ function Panel(props) {
2920
3093
  }
2921
3094
  )
2922
3095
  ] }),
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)(
3096
+ 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
3097
  Timeline,
2925
3098
  {
2926
3099
  signals: result.signals,
@@ -2936,7 +3109,7 @@ function Panel(props) {
2936
3109
  }
2937
3110
  }
2938
3111
  ) }),
2939
- activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3112
+ activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2940
3113
  RenderInsights,
2941
3114
  {
2942
3115
  signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
@@ -2946,7 +3119,8 @@ function Panel(props) {
2946
3119
  }
2947
3120
  }
2948
3121
  ),
2949
- activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3122
+ activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LongTaskEpisode, { signals: result.signals }),
3123
+ activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2950
3124
  "div",
2951
3125
  {
2952
3126
  style: {
@@ -2958,10 +3132,28 @@ function Panel(props) {
2958
3132
  border: "1px solid #1f1f1f",
2959
3133
  borderRadius: "6px"
2960
3134
  },
2961
- children: t.interactionThresholdHint
3135
+ children: t.layoutShiftHint
2962
3136
  }
2963
3137
  ),
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 && (() => {
3138
+ activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
3139
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InpEpisode, { signals: result.signals }),
3140
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
3141
+ "div",
3142
+ {
3143
+ style: {
3144
+ padding: "6px 8px",
3145
+ marginBottom: "6px",
3146
+ fontSize: "11px",
3147
+ color: "#888",
3148
+ background: "#141414",
3149
+ border: "1px solid #1f1f1f",
3150
+ borderRadius: "6px"
3151
+ },
3152
+ children: t.interactionThresholdHint
3153
+ }
3154
+ )
3155
+ ] }),
3156
+ /* @__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
3157
  const filtered = grouped[activeKind].filter(
2966
3158
  (s) => signalMatchesFilter(s, filterText[activeKind] ?? "")
2967
3159
  );
@@ -2971,7 +3163,7 @@ function Panel(props) {
2971
3163
  const currentMode = groupMode[activeKind] ?? "chronological";
2972
3164
  if (currentMode === "chronological") {
2973
3165
  const key2 = `${activeKind}-${gi}`;
2974
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3166
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2975
3167
  SignalRow,
2976
3168
  {
2977
3169
  signal: g.signals[0],
@@ -2988,7 +3180,7 @@ function Panel(props) {
2988
3180
  const isCascade = activeKind === "render" && currentMode === "commit";
2989
3181
  const renderMembers = g.signals.filter((s) => s.kind === "render");
2990
3182
  const unnecessary = isCascade ? renderMembers.filter((s) => s.reason === "parent").length : 0;
2991
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3183
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
2992
3184
  "li",
2993
3185
  {
2994
3186
  "aria-expanded": isOpen,
@@ -3003,34 +3195,34 @@ function Panel(props) {
3003
3195
  userSelect: "none"
3004
3196
  },
3005
3197
  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 }),
3198
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
3199
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
3200
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
3201
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: g.label }),
3010
3202
  " \xD7",
3011
3203
  g.count
3012
3204
  ] }),
3013
- isCascade && unnecessary > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
3205
+ isCascade && unnecessary > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
3014
3206
  "\u26A0 ",
3015
3207
  t.unnecessaryRenders(unnecessary)
3016
3208
  ] })
3017
3209
  ] }),
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) })
3210
+ 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: [
3211
+ 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)),
3212
+ g.signals.length > 20 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { color: "#888", marginTop: "4px" }, children: t.moreItems(g.signals.length - 20) })
3021
3213
  ] }) })
3022
3214
  ]
3023
3215
  },
3024
3216
  key
3025
3217
  );
3026
3218
  }) }),
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 })
3219
+ 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
3220
  ] })
3029
3221
  ] });
3030
3222
  }
3031
3223
 
3032
3224
  // src/app.tsx
3033
- var import_jsx_runtime6 = require("preact/jsx-runtime");
3225
+ var import_jsx_runtime9 = require("preact/jsx-runtime");
3034
3226
  function App(props) {
3035
3227
  const { recorder, position = "bottom-right", resolveFrame, finalize } = props;
3036
3228
  const [recording, setRecording] = (0, import_hooks4.useState)(false);
@@ -3076,8 +3268,8 @@ function App(props) {
3076
3268
  function onClose() {
3077
3269
  setResult(null);
3078
3270
  }
3079
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(I18nProvider, { children: [
3080
- result === null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3271
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(I18nProvider, { children: [
3272
+ result === null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3081
3273
  Widget,
3082
3274
  {
3083
3275
  recording,
@@ -3086,16 +3278,16 @@ function App(props) {
3086
3278
  position
3087
3279
  }
3088
3280
  ),
3089
- result !== null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Panel, { result, position, onClose, resolveFrame })
3281
+ result !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Panel, { result, position, onClose, resolveFrame })
3090
3282
  ] });
3091
3283
  }
3092
3284
 
3093
3285
  // src/mount.tsx
3094
- var import_jsx_runtime7 = require("preact/jsx-runtime");
3286
+ var import_jsx_runtime10 = require("preact/jsx-runtime");
3095
3287
  function mount(opts) {
3096
3288
  const { recorder, position = "bottom-right", host = document.body, resolveFrame, finalize } = opts;
3097
3289
  return mountShadow(
3098
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(App, { recorder, position, resolveFrame, finalize }),
3290
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(App, { recorder, position, resolveFrame, finalize }),
3099
3291
  { parent: host }
3100
3292
  );
3101
3293
  }