@plitzi/sdk-dev-tools 0.33.1 → 0.34.0

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/HotspotsList/HotspotsList.mjs

@@ -1,10 +1,10 @@
 import { buildHotspots as e, durationColor as t, formatMs as n } from "../../helpers.mjs";
 import r from "../DurationLegend/DurationLegend.mjs";
 import i from "../HotspotSidebar/HotspotSidebar.mjs";
-import a from "clsx";
-import { useCallback as o, useEffect as s, useMemo as c, useRef as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import f from "@plitzi/plitzi-ui/hooks/useStorage";
+import a from "@plitzi/plitzi-ui/hooks/useStorage";
+import o from "clsx";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/components/HotspotsList/HotspotsList.tsx
 var p = [
 	{
@@ -24,14 +24,14 @@ var p = [
 		label: "Max"
 	}
 ], m = (e, t) => t === "renders" ? e.renders : t === "avg" ? e.avgSelf : t === "max" ? e.maxSelf : e.totalSelf, h = ({ commits: h, tree: g, flat: _, selectedId: v, onSelectElement: y }) => {
-	let [b, x] = f("plitzi-sdk.dev-tools.tracing.sort", "total"), S = l(null), C = c(() => e(h, g, _).sort((e, t) => m(t, b) - m(e, b)), [
+	let [b, x] = a("plitzi-sdk.dev-tools.tracing.sort", "total"), S = u(null), C = l(() => e(h, g, _).sort((e, t) => m(t, b) - m(e, b)), [
 		h,
 		g,
 		_,
 		b
-	]), w = c(() => C.reduce((e, t) => Math.max(e, m(t, b)), 0) || 1, [C, b]), T = c(() => C.reduce((e, t) => e + t.totalSelf, 0), [C]), E = c(() => C.find((e) => e.id === v), [C, v]), D = c(() => C.findIndex((e) => e.id === v), [C, v]);
-	s(() => S.current?.scrollIntoView({ block: "nearest" }), [v]);
-	let O = o((e) => () => x(e), [x]), k = o((e) => {
+	]), w = l(() => C.reduce((e, t) => Math.max(e, m(t, b)), 0) || 1, [C, b]), T = l(() => C.reduce((e, t) => e + t.totalSelf, 0), [C]), E = l(() => C.find((e) => e.id === v), [C, v]), D = l(() => C.findIndex((e) => e.id === v), [C, v]);
+	c(() => S.current?.scrollIntoView({ block: "nearest" }), [v]);
+	let O = s((e) => () => x(e), [x]), k = s((e) => {
 		if (e.key !== "ArrowUp" && e.key !== "ArrowDown" || C.length === 0) return;
 		e.preventDefault();
 		let t = D === -1 ? 0 : D, n = Math.max(0, Math.min(C.length - 1, t + (e.key === "ArrowUp" ? -1 : 1)));
@@ -41,29 +41,29 @@ var p = [
 		D,
 		y
 	]);
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ f("div", {
 		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
 		children: [
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "flex shrink-0 items-center gap-2 border-b border-zinc-200 px-2 py-1.5 text-[10px] text-zinc-500 dark:border-zinc-800 dark:text-zinc-400",
 				children: [
-					/* @__PURE__ */ u("span", {
+					/* @__PURE__ */ d("span", {
 						className: "font-medium text-zinc-700 dark:text-zinc-200",
 						children: "Session hotspots"
 					}),
-					/* @__PURE__ */ d("span", { children: [
+					/* @__PURE__ */ f("span", { children: [
 						"· ",
 						C.length,
 						" elements · ",
 						h.length,
 						" commits"
 					] }),
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ f("div", {
 						className: "ml-auto flex items-center gap-1",
-						children: [/* @__PURE__ */ u("span", { children: "sort" }), p.map((e) => /* @__PURE__ */ u("button", {
+						children: [/* @__PURE__ */ d("span", { children: "sort" }), p.map((e) => /* @__PURE__ */ d("button", {
 							onClick: O(e.id),
 							"aria-pressed": b === e.id,
-							className: a("rounded px-1.5 py-0.5 text-[10px] font-medium", {
+							className: o("rounded px-1.5 py-0.5 text-[10px] font-medium", {
 								"bg-violet-500 text-white": b === e.id,
 								"text-zinc-600 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700": b !== e.id
 							}),
@@ -72,66 +72,66 @@ var p = [
 					})
 				]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "flex min-h-0 flex-1 overflow-hidden",
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ f("div", {
 					role: "listbox",
 					"aria-label": "Session hotspots",
 					tabIndex: 0,
 					onKeyDown: k,
 					className: "min-h-0 flex-1 overflow-auto outline-none focus-visible:ring-1 focus-visible:ring-violet-400",
-					children: [C.length === 0 && /* @__PURE__ */ u("div", {
+					children: [C.length === 0 && /* @__PURE__ */ d("div", {
 						className: "px-2 py-3 text-center text-[10px] text-zinc-400 dark:text-zinc-500",
 						children: "No renders recorded yet"
 					}), C.map((e) => {
-						let r = e.id === v, i = m(e, b), o = b === "renders" ? e.renders / w : i / w;
-						return /* @__PURE__ */ d("button", {
+						let r = e.id === v, i = m(e, b), a = b === "renders" ? e.renders / w : i / w;
+						return /* @__PURE__ */ f("button", {
 							ref: r ? S : void 0,
 							role: "option",
 							"aria-selected": r,
 							onClick: () => y(r ? void 0 : e.id),
 							title: `${e.name} (${e.type})\n${e.renders} renders (${e.mounts} mount)\ntotal ${n(e.totalSelf)} · avg ${n(e.avgSelf)} · max ${n(e.maxSelf)} · last ${n(e.lastSelf)}`,
-							className: a("flex w-full items-center gap-2 px-2 py-0.5 text-left", {
+							className: o("flex w-full items-center gap-2 px-2 py-0.5 text-left", {
 								"bg-violet-500/10": r,
 								"hover:bg-zinc-50 dark:hover:bg-zinc-800/50": !r
 							}),
 							children: [
-								/* @__PURE__ */ d("span", {
+								/* @__PURE__ */ f("span", {
 									className: "flex w-40 shrink-0 flex-col",
-									children: [/* @__PURE__ */ u("span", {
+									children: [/* @__PURE__ */ d("span", {
 										className: "truncate text-zinc-700 dark:text-zinc-200",
 										children: e.name
-									}), /* @__PURE__ */ u("span", {
+									}), /* @__PURE__ */ d("span", {
 										className: "truncate text-[9px] text-zinc-400 dark:text-zinc-500",
 										children: e.type
 									})]
 								}),
-								/* @__PURE__ */ d("span", {
+								/* @__PURE__ */ f("span", {
 									className: "w-12 shrink-0 text-right text-[10px] text-zinc-400 tabular-nums dark:text-zinc-500",
 									title: "Times this element rendered itself",
 									children: [e.renders, "×"]
 								}),
-								/* @__PURE__ */ u("div", {
+								/* @__PURE__ */ d("div", {
 									className: "h-2 flex-1 overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-800",
-									children: /* @__PURE__ */ u("div", {
-										style: { width: `${Math.max(2, Math.round(o * 100))}%` },
-										className: a("h-full rounded-sm", t(e.maxSelf))
+									children: /* @__PURE__ */ d("div", {
+										style: { width: `${Math.max(2, Math.round(a * 100))}%` },
+										className: o("h-full rounded-sm", t(e.maxSelf))
 									})
 								}),
-								/* @__PURE__ */ u("span", {
+								/* @__PURE__ */ d("span", {
 									className: "w-14 shrink-0 text-right text-zinc-500 tabular-nums dark:text-zinc-400",
 									children: b === "renders" ? `${e.renders}×` : n(i)
 								})
 							]
 						}, e.id);
 					})]
-				}), E && /* @__PURE__ */ u(i, {
+				}), E && /* @__PURE__ */ d(i, {
 					row: E,
 					flat: _,
 					sessionSelf: T
 				})]
 			}),
-			/* @__PURE__ */ u(r, {})
+			/* @__PURE__ */ d(r, {})
 		]
 	});
 };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/RankedList/RankedList.mjs

@@ -6,15 +6,15 @@ import c from "../SidebarShell/SidebarShell.mjs";
 import l from "../SidebarShell/SidebarEmpty.mjs";
 import u from "../SidebarToggle/SidebarToggle.mjs";
 import d from "../MetricToggle/MetricToggle.mjs";
-import f from "clsx";
-import { useCallback as p, useEffect as m, useMemo as h, useRef as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import y from "@plitzi/plitzi-ui/hooks/useStorage";
+import f from "@plitzi/plitzi-ui/hooks/useStorage";
+import p from "clsx";
+import { useCallback as m, useEffect as h, useMemo as g, useRef as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/components/RankedList/RankedList.tsx
 var b = ({ commit: b, model: x, active: S, origin: C, sidebarOpen: w, onSelectElement: T, onToggleSidebar: E }) => {
-	let [D, O] = y("plitzi-sdk.dev-tools.tracing.metric", "self"), k = g(null), A = h(() => x.nodes.filter((e) => e.state === "rendered").sort((e, t) => i(t, D) - i(e, D)), [x, D]), j = h(() => A.reduce((e, t) => Math.max(e, i(t, D)), 0) || 1, [A, D]), M = h(() => A.findIndex((e) => e.id === S?.id), [A, S]);
-	m(() => k.current?.scrollIntoView({ block: "nearest" }), [S]);
-	let N = p((e) => {
+	let [D, O] = f("plitzi-sdk.dev-tools.tracing.metric", "self"), k = _(null), A = g(() => x.nodes.filter((e) => e.state === "rendered").sort((e, t) => i(t, D) - i(e, D)), [x, D]), j = g(() => A.reduce((e, t) => Math.max(e, i(t, D)), 0) || 1, [A, D]), M = g(() => A.findIndex((e) => e.id === S?.id), [A, S]);
+	h(() => k.current?.scrollIntoView({ block: "nearest" }), [S]);
+	let N = m((e) => {
 		if (e.key !== "ArrowUp" && e.key !== "ArrowDown" || A.length === 0) return;
 		e.preventDefault();
 		let t = M === -1 ? 0 : M, n = Math.max(0, Math.min(A.length - 1, t + (e.key === "ArrowUp" ? -1 : 1)));
@@ -24,22 +24,22 @@ var b = ({ commit: b, model: x, active: S, origin: C, sidebarOpen: w, onSelectEl
 		M,
 		T
 	]);
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ y("div", {
 		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
 		children: [
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex shrink-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-zinc-200 px-2 py-1.5 text-[10px] text-zinc-500 dark:border-zinc-800 dark:text-zinc-400",
 				children: [
-					/* @__PURE__ */ v("span", {
+					/* @__PURE__ */ y("span", {
 						className: "font-medium text-zinc-700 dark:text-zinc-200",
 						children: ["Commit #", b.commitId]
 					}),
-					C !== "update" && /* @__PURE__ */ _("span", {
+					C !== "update" && /* @__PURE__ */ v("span", {
 						className: "rounded bg-violet-100 px-1 text-[9px] font-medium text-violet-700 uppercase dark:bg-violet-500/20 dark:text-violet-300",
 						children: e[C]
 					}),
-					/* @__PURE__ */ v("span", { children: [n(b.duration), " total"] }),
-					/* @__PURE__ */ v("span", {
+					/* @__PURE__ */ y("span", { children: [n(b.duration), " total"] }),
+					/* @__PURE__ */ y("span", {
 						title: "Elements that re-rendered, of all in this commit's subtree",
 						children: [
 							"· ",
@@ -49,107 +49,107 @@ var b = ({ commit: b, model: x, active: S, origin: C, sidebarOpen: w, onSelectEl
 							" rendered"
 						]
 					}),
-					/* @__PURE__ */ _(a, {
+					/* @__PURE__ */ v(a, {
 						commit: b,
 						model: x,
 						active: S,
 						onSelectElement: T
 					}),
-					/* @__PURE__ */ _(d, {
+					/* @__PURE__ */ v(d, {
 						className: "ml-auto",
 						metric: D,
 						onChange: O
 					}),
-					/* @__PURE__ */ _(u, {
+					/* @__PURE__ */ v(u, {
 						open: w,
 						onToggle: E
 					})
 				]
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex min-h-0 flex-1 overflow-hidden",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ y("div", {
 					role: "listbox",
 					"aria-label": "Rendered elements, ranked",
 					tabIndex: 0,
 					onKeyDown: N,
 					className: "min-h-0 flex-1 overflow-auto outline-none focus-visible:ring-1 focus-visible:ring-violet-400",
-					children: [A.length === 0 && /* @__PURE__ */ _("div", {
+					children: [A.length === 0 && /* @__PURE__ */ v("div", {
 						className: "px-2 py-3 text-center text-[10px] text-zinc-400 dark:text-zinc-500",
 						children: "No element re-rendered in this commit"
 					}), A.map((e) => {
-						let a = i(e, D), o = e.id === S?.id, s = x.totalSelf > 0 ? e.selfDuration / x.totalSelf : 0, c = e.phase !== "mount", l = c && (e.changedProps === void 0 || e.changedProps.length === 0 && e.trigger), u = c && e.changedProps?.length === 0 && !e.trigger, d = !!e.changedProps?.length && e.changedProps.every((e) => e.ref), p = e.changedProps?.map((e) => e.key).join(", "), m = p || (l ? "internal state / hook" : e.type);
-						return /* @__PURE__ */ v("button", {
+						let a = i(e, D), o = e.id === S?.id, s = x.totalSelf > 0 ? e.selfDuration / x.totalSelf : 0, c = e.phase !== "mount", l = c && (e.changedProps === void 0 || e.changedProps.length === 0 && e.trigger), u = c && e.changedProps?.length === 0 && !e.trigger, d = !!e.changedProps?.length && e.changedProps.every((e) => e.ref), f = e.changedProps?.map((e) => e.key).join(", "), m = f || (l ? "internal state / hook" : e.type);
+						return /* @__PURE__ */ y("button", {
 							ref: o ? k : void 0,
 							role: "option",
 							"aria-selected": o,
 							onClick: () => T(e.id === S?.id ? void 0 : e.id),
-							title: `${e.name} (${e.type})\n${n(e.selfDuration)} self · ${n(e.actualDuration)} total · ${n(e.baseDuration)} base\nphase: ${e.phase ?? "update"} · ${r(s)} of render work${u ? "\nno input changed — re-rendered by an ancestor" : l ? "\nno input changed — internal state/hook/context" : d ? `\nreference-only change (missing memo): ${p}` : p ? `\nchanged: ${p}` : ""}`,
-							className: f("flex w-full items-center gap-2 px-2 py-0.5 text-left", {
+							title: `${e.name} (${e.type})\n${n(e.selfDuration)} self · ${n(e.actualDuration)} total · ${n(e.baseDuration)} base\nphase: ${e.phase ?? "update"} · ${r(s)} of render work${u ? "\nno input changed — re-rendered by an ancestor" : l ? "\nno input changed — internal state/hook/context" : d ? `\nreference-only change (missing memo): ${f}` : f ? `\nchanged: ${f}` : ""}`,
+							className: p("flex w-full items-center gap-2 px-2 py-0.5 text-left", {
 								"bg-violet-500/10": o,
 								"hover:bg-zinc-50 dark:hover:bg-zinc-800/50": !o
 							}),
 							children: [
-								/* @__PURE__ */ v("span", {
+								/* @__PURE__ */ y("span", {
 									className: "flex w-40 shrink-0 flex-col",
-									children: [/* @__PURE__ */ v("span", {
+									children: [/* @__PURE__ */ y("span", {
 										className: "flex items-center gap-1 text-zinc-700 dark:text-zinc-200",
 										children: [
-											e.trigger && /* @__PURE__ */ _("i", {
+											e.trigger && /* @__PURE__ */ v("i", {
 												className: "fa-solid fa-bolt shrink-0 text-[9px] text-violet-500",
 												title: "Trigger — a root cause of this commit"
 											}),
-											(u || d) && /* @__PURE__ */ _("i", {
+											(u || d) && /* @__PURE__ */ v("i", {
 												className: "fa-solid fa-triangle-exclamation shrink-0 text-[9px] text-amber-500",
 												title: u ? "Re-rendered without any input change — possible unnecessary re-render" : "Only reference-changed props (shallow-equal content) — likely a missing memo"
 											}),
-											!e.visible && /* @__PURE__ */ _("i", {
+											!e.visible && /* @__PURE__ */ v("i", {
 												className: "fa-solid fa-eye-slash shrink-0 text-[9px] text-amber-500",
 												title: "Hidden (visibility)"
 											}),
-											/* @__PURE__ */ _("span", {
+											/* @__PURE__ */ v("span", {
 												className: "truncate",
 												children: e.name
 											})
 										]
-									}), /* @__PURE__ */ _("span", {
+									}), /* @__PURE__ */ v("span", {
 										className: "truncate text-[9px] text-zinc-400 dark:text-zinc-500",
 										children: m
 									})]
 								}),
-								/* @__PURE__ */ _("span", {
-									className: f("rounded px-1 text-[9px] uppercase", {
+								/* @__PURE__ */ v("span", {
+									className: p("rounded px-1 text-[9px] uppercase", {
 										"bg-sky-500/15 text-sky-600 dark:text-sky-400": e.phase === "mount",
 										"bg-amber-500/15 text-amber-600 dark:text-amber-400": e.phase !== "mount"
 									}),
 									children: e.phase === "mount" ? "mount" : "update"
 								}),
-								/* @__PURE__ */ _("div", {
+								/* @__PURE__ */ v("div", {
 									className: "h-2 flex-1 overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-800",
-									children: /* @__PURE__ */ _("div", {
+									children: /* @__PURE__ */ v("div", {
 										style: { width: `${Math.max(2, Math.round(a / j * 100))}%` },
-										className: f("h-full rounded-sm", t(a))
+										className: p("h-full rounded-sm", t(a))
 									})
 								}),
-								/* @__PURE__ */ _("span", {
+								/* @__PURE__ */ v("span", {
 									className: "w-10 shrink-0 text-right text-[10px] text-zinc-400 tabular-nums dark:text-zinc-500",
 									title: "Share of this commit's total render work",
 									children: r(s)
 								}),
-								/* @__PURE__ */ _("span", {
+								/* @__PURE__ */ v("span", {
 									className: "w-12 shrink-0 text-right text-zinc-500 tabular-nums dark:text-zinc-400",
 									children: n(a)
 								})
 							]
 						}, e.id);
 					})]
-				}), w && /* @__PURE__ */ _(c, { children: S ? /* @__PURE__ */ _(o, {
+				}), w && /* @__PURE__ */ v(c, { children: S ? /* @__PURE__ */ v(o, {
 					node: S,
 					commit: b,
 					model: x
-				}) : /* @__PURE__ */ _(l, {}) })]
+				}) : /* @__PURE__ */ v(l, {}) })]
 			}),
-			/* @__PURE__ */ _(s, {})
+			/* @__PURE__ */ v(s, {})
 		]
 	});
 };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/SidebarShell/SidebarShell.mjs

@@ -1,13 +1,13 @@
-import { useCallback as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import n from "@plitzi/plitzi-ui/ContainerResizable";
-import r from "@plitzi/plitzi-ui/hooks/useStorage";
+import e from "@plitzi/plitzi-ui/hooks/useStorage";
+import { useCallback as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/ContainerResizable";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/components/SidebarShell/SidebarShell.tsx
 var i = 180, a = 480, o = 224, s = ({ children: s }) => {
-	let [c, l] = r("plitzi-sdk.dev-tools.tracing.sidebar-width", o), u = e((e) => {
+	let [c, l] = e("plitzi-sdk.dev-tools.tracing.sidebar-width", o), u = t((e) => {
 		Number.isFinite(e) && l(e);
 	}, [l]);
-	return /* @__PURE__ */ t(n, {
+	return /* @__PURE__ */ n(r, {
 		className: "shrink-0 border-l border-zinc-200 dark:border-zinc-800",
 		resizeHandles: ["w"],
 		axis: "x",
@@ -16,7 +16,7 @@ var i = 180, a = 480, o = 224, s = ({ children: s }) => {
 		minConstraintsX: i,
 		maxConstraintsX: a,
 		onChange: u,
-		children: /* @__PURE__ */ t("aside", {
+		children: /* @__PURE__ */ n("aside", {
 			className: "flex h-full w-full flex-col gap-1.5 overflow-auto bg-zinc-50 px-3 py-2 text-[10px] dark:bg-zinc-900/50",
 			children: s
 		})

package/dist/components/DevToolsPanel/tabs/TracingViewer/helpers.d.ts

@@ -4,7 +4,10 @@ export type TracingView = 'ranked' | 'flamegraph' | 'hotspots';
 export type DurationMetric = 'self' | 'total';
 type RenderState = 'rendered' | 'bubbled' | 'hatched';
 export type FlameNode = {
+    /** This INSTANCE — a list's rows are one node each. See `CommitElementRender.id`. */
     id: string;
+    /** Which element the instance is: the label, the schema lookup, and what gets outlined on the page. */
+    elementId: string;
     name: string;
     type: string;
     state: RenderState;
@@ -28,6 +31,7 @@ export type FlameModel = {
     triggers: string[];
 };
 export type HotspotRow = {
+    /** The ELEMENT, not an instance: a list's hundred rows are one row here, with a hundred renders against it. */
     id: string;
     name: string;
     type: string;
@@ -81,6 +85,27 @@ export declare const frameColor: (node: FlameNode) => string;
 export declare const frameTextColor: (node: FlameNode) => string;
 export declare const elementVisible: (id: string, flat: Record<string, Element> | undefined) => boolean;
 export declare const rowDuration: (node: FlameNode, metric: DurationMetric) => number;
-export declare const buildFlameModel: (commit: CommitEntry, tree: TracingTree, flat: Record<string, Element> | undefined) => FlameModel;
+/**
+ * The accumulated tree, indexed once.
+ *
+ * Separate from any single commit because none of it depends on one: the parent links, the sizes and the child lists
+ * are facts about the tree. Rebuilding them per commit is what made the hotspots view — which walks every commit it
+ * has — quadratic in the size of the page.
+ */
+export type TreeIndex = {
+    parent: Map<string, string | undefined>;
+    base: Map<string, number>;
+    children: Map<string, string[]>;
+    elementOf: Map<string, string>;
+};
+export declare const buildTreeIndex: (tree: TracingTree) => TreeIndex;
+export declare const buildFlameModel: (commit: CommitEntry, tree: TracingTree, flat: Record<string, Element> | undefined, index?: TreeIndex) => FlameModel;
+/**
+ * Aggregates self time across ALL commits — chatty/expensive elements a single commit can't reveal.
+ *
+ * By ELEMENT and not by instance, which is the whole point of the view: a list's hundred rows are one element that
+ * rendered a hundred times, and a hundred rows of one render each would say nothing. The flamegraph is where the
+ * instances are told apart.
+ */
 export declare const buildHotspots: (commits: CommitEntry[], tree: TracingTree, flat: Record<string, Element> | undefined) => HotspotRow[];
 export {};