@plitzi/sdk-dev-tools 0.32.0 → 0.32.2

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/DetailSidebar/index.mjs

@@ -0,0 +1,2 @@
+import e from "./DetailSidebar.mjs";
+export { e as default };

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

@@ -0,0 +1,2 @@
+declare const DurationLegend: () => import("react").JSX.Element;
+export default DurationLegend;

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

@@ -0,0 +1,38 @@
+import { BUBBLED_COLOR as e, DURATION_LEGEND as t } from "../../helpers.mjs";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/DurationLegend/DurationLegend.tsx
+var a = () => /* @__PURE__ */ i("div", {
+	className: "flex shrink-0 items-center gap-2 overflow-x-auto border-t border-zinc-200 px-2 py-1 text-[9px] text-zinc-400 dark:border-zinc-800 dark:text-zinc-500",
+	children: [
+		/* @__PURE__ */ r("span", {
+			className: "font-medium",
+			children: "Render budget"
+		}),
+		t.map((e) => /* @__PURE__ */ i("span", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [/* @__PURE__ */ r("span", { className: n("h-2 w-2 rounded-sm", e.color) }), e.label]
+		}, e.label)),
+		/* @__PURE__ */ i("span", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [/* @__PURE__ */ r("span", { className: n("h-2 w-2 rounded-sm", e) }), "subtree only"]
+		}),
+		/* @__PURE__ */ i("span", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [/* @__PURE__ */ r("span", {
+				className: "h-2 w-2 rounded-sm border border-zinc-400/60 bg-zinc-200 dark:bg-zinc-800",
+				style: { backgroundImage: "repeating-linear-gradient(45deg, rgba(113,113,122,0.4) 0, rgba(113,113,122,0.4) 1px, transparent 1px, transparent 3px)" }
+			}), "no render"]
+		}),
+		/* @__PURE__ */ i("span", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [/* @__PURE__ */ r("span", { className: "h-2 w-2 rounded-sm bg-violet-600" }), "selected"]
+		}),
+		/* @__PURE__ */ r("span", {
+			className: "ml-auto shrink-0",
+			children: "60fps ≈ 16ms · 50ms long task"
+		})
+	]
+});
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/DurationLegend/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DurationLegend';

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/DurationLegend/index.mjs

@@ -0,0 +1,2 @@
+import e from "./DurationLegend.mjs";
+export { e as default };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/Flamegraph/FlameFrame.d.ts

@@ -0,0 +1,12 @@
+import { FlameNode } from '../../helpers';
+export declare const ROW_HEIGHT = 18;
+export type FlameFrameProps = {
+    node: FlameNode;
+    left: number;
+    width: number;
+    top: number;
+    selected: boolean;
+    onClick: (node: FlameNode) => void;
+};
+declare const FlameFrame: ({ node, left, width, top, selected, onClick }: FlameFrameProps) => import("react").JSX.Element;
+export default FlameFrame;

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/Flamegraph/FlameFrame.mjs

@@ -0,0 +1,29 @@
+import { HATCH_STYLE as e, formatMs as t, formatPercent as n, frameColor as r, frameTextColor as i } from "../../helpers.mjs";
+import a from "clsx";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = ({ node: c, left: l, width: u, top: d, selected: f, onClick: p }) => {
+	let m = {
+		left: `${l}%`,
+		width: `${u}%`,
+		top: d,
+		height: 18,
+		...c.state === "hatched" && !f ? e : void 0
+	}, h = f ? "bg-violet-600" : c.state === "hatched" ? "bg-zinc-200 dark:bg-zinc-800" : r(c);
+	return /* @__PURE__ */ s("button", {
+		type: "button",
+		onClick: () => p(c),
+		title: `${c.name} (${c.type})${c.visible ? "" : " · hidden"}\n${t(c.selfDuration)} self · ${t(c.actualDuration)} total · ${n(c.baseDuration > 0 ? c.width : 0)} width`,
+		style: m,
+		className: a("absolute flex cursor-pointer items-center gap-1 overflow-hidden rounded-[1px] border border-zinc-50 px-1 text-left text-[11px] leading-none whitespace-nowrap dark:border-zinc-900", h, f ? "z-10 text-white" : a(i(c), "hover:brightness-110")),
+		children: [
+			c.trigger && /* @__PURE__ */ o("i", { className: "fa-solid fa-bolt shrink-0 text-[8px] text-violet-200" }),
+			!c.visible && /* @__PURE__ */ o("i", { className: "fa-solid fa-eye-slash shrink-0 text-[8px] opacity-80" }),
+			/* @__PURE__ */ o("span", {
+				className: "truncate",
+				children: c.name
+			})
+		]
+	});
+};
+//#endregion
+export { c as default };

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

@@ -0,0 +1,13 @@
+import { CommitOrigin, FlameModel, FlameNode } from '../../helpers';
+import { CommitEntry } from '@plitzi/sdk-shared';
+export type FlamegraphProps = {
+    commit: CommitEntry;
+    model: FlameModel;
+    active: FlameNode | undefined;
+    origin: CommitOrigin;
+    sidebarOpen: boolean;
+    onSelectElement: (id: string | undefined) => void;
+    onToggleSidebar: () => void;
+};
+declare const Flamegraph: ({ commit, model, active, origin, sidebarOpen, onSelectElement, onToggleSidebar }: FlamegraphProps) => import("react").JSX.Element;
+export default Flamegraph;

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

@@ -0,0 +1,105 @@
+import { COMMIT_ORIGIN_LABEL as e } from "../../helpers.mjs";
+import t from "../CommitCause/CommitCause.mjs";
+import n from "../DetailSidebar/DetailSidebar.mjs";
+import r from "../DurationLegend/DurationLegend.mjs";
+import i from "../SidebarShell/SidebarShell.mjs";
+import a from "../SidebarShell/SidebarEmpty.mjs";
+import o from "../SidebarToggle/SidebarToggle.mjs";
+import s from "./FlameFrame.mjs";
+import { useCallback as c, useEffect as l, useMemo as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/Flamegraph/Flamegraph.tsx
+var m = 1e-6, h = ({ commit: h, model: g, active: _, origin: v, sidebarOpen: y, onSelectElement: b, onToggleSidebar: x }) => {
+	let [S, C] = d();
+	l(() => C(void 0), [h.commitId, g]);
+	let w = u(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of g.nodes) e.set(t.id, t);
+		return e;
+	}, [g]), T = S ? w.get(S) : void 0, E = T ? T.x : 0, D = T ? T.width : 1, O = T ? T.depth : 0, k = u(() => {
+		if (!T) return [];
+		let e = [], t = T.parentId;
+		for (; t !== void 0;) {
+			let n = w.get(t);
+			if (!n) break;
+			e.push(n), t = n.parentId;
+		}
+		return e.reverse();
+	}, [T, w]), A = u(() => g.nodes.filter((e) => e.depth >= O && e.x >= E - m && e.x + e.width <= E + D + m), [
+		g,
+		E,
+		D,
+		O
+	]), j = u(() => A.reduce((e, t) => Math.max(e, t.depth), O), [A, O]), M = c((e) => {
+		let t = e.id === _?.id;
+		b(t ? void 0 : e.id), C(t ? void 0 : e.id);
+	}, [_, b]), N = c((e) => {
+		let t = e.id === _?.id;
+		b(t ? void 0 : e.id), C(t ? void 0 : e.id);
+	}, [_, b]);
+	return /* @__PURE__ */ p("div", {
+		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 border-b border-zinc-200 px-2 py-1 text-[10px] text-zinc-500 dark:border-zinc-800 dark:text-zinc-400",
+				children: [
+					/* @__PURE__ */ p("span", {
+						className: "font-medium text-zinc-700 dark:text-zinc-200",
+						children: ["Commit #", h.commitId]
+					}),
+					v !== "update" && /* @__PURE__ */ f("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[v]
+					}),
+					/* @__PURE__ */ f("span", {
+						className: "opacity-60",
+						children: "click a frame to zoom · click the focused frame to zoom out"
+					}),
+					/* @__PURE__ */ f(t, {
+						commit: h,
+						model: g,
+						active: _,
+						onSelectElement: b
+					}),
+					/* @__PURE__ */ f(o, {
+						className: "ml-auto",
+						open: y,
+						onToggle: x
+					})
+				]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "flex min-h-0 flex-1 overflow-hidden",
+				children: [/* @__PURE__ */ f("div", {
+					className: "min-h-0 flex-1 overflow-auto p-1",
+					children: /* @__PURE__ */ p("div", {
+						className: "relative w-full",
+						style: { height: (j + 1) * 18 },
+						children: [k.map((e) => /* @__PURE__ */ f(s, {
+							node: e,
+							left: 0,
+							width: 100,
+							top: e.depth * 18,
+							selected: e.id === _?.id,
+							onClick: N
+						}, e.id)), A.map((e) => /* @__PURE__ */ f(s, {
+							node: e,
+							left: (e.x - E) / D * 100,
+							width: e.width / D * 100,
+							top: e.depth * 18,
+							selected: e.id === _?.id,
+							onClick: M
+						}, e.id))]
+					})
+				}), y && /* @__PURE__ */ f(i, { children: _ ? /* @__PURE__ */ f(n, {
+					node: _,
+					commit: h,
+					model: g
+				}) : /* @__PURE__ */ f(a, {}) })]
+			}),
+			/* @__PURE__ */ f(r, {})
+		]
+	});
+};
+//#endregion
+export { h as default };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/Flamegraph/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Flamegraph';

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/Flamegraph/index.mjs

@@ -0,0 +1,2 @@
+import e from "./Flamegraph.mjs";
+export { e as default };

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

@@ -0,0 +1,9 @@
+import { HotspotRow } from '../../helpers';
+import { Element } from '@plitzi/sdk-shared';
+export type HotspotSidebarProps = {
+    row: HotspotRow;
+    flat: Record<string, Element> | undefined;
+    sessionSelf: number;
+};
+declare const HotspotSidebar: ({ row, flat, sessionSelf }: HotspotSidebarProps) => import("react").JSX.Element;
+export default HotspotSidebar;

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

@@ -0,0 +1,124 @@
+import { durationColor as e, elementVisible as t, formatMs as n, formatPercent as r } from "../../helpers.mjs";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/HotspotSidebar/HotspotSidebar.tsx
+var s = ({ row: s, flat: c, sessionSelf: l }) => {
+	let u = t(s.id, c);
+	return /* @__PURE__ */ o("aside", {
+		className: "flex w-52 shrink-0 flex-col gap-1.5 overflow-auto border-l border-zinc-200 bg-zinc-50 px-3 py-2 text-[10px] dark:border-zinc-800 dark:bg-zinc-900/50",
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ a("span", { className: i("h-2.5 w-2.5 shrink-0 rounded-sm", e(s.maxSelf)) }),
+					/* @__PURE__ */ a("span", {
+						className: "truncate text-xs font-medium text-zinc-700 dark:text-zinc-100",
+						children: s.name
+					}),
+					!u && /* @__PURE__ */ a("i", {
+						className: "fa-solid fa-eye-slash shrink-0 text-amber-500",
+						title: "Hidden via visibility"
+					})
+				]
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "truncate text-zinc-400 dark:text-zinc-500",
+				children: s.type
+			}),
+			!u && /* @__PURE__ */ a("span", {
+				className: "w-fit rounded bg-amber-500/15 px-1 py-0.5 text-[9px] text-amber-600 dark:text-amber-400",
+				children: "hidden (visibility)"
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+				children: "Renders (session)"
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-zinc-400 dark:text-zinc-500",
+					children: "Total"
+				}), /* @__PURE__ */ o("span", {
+					className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+					children: [s.renders, "×"]
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-zinc-400 dark:text-zinc-500",
+					children: "Mounts"
+				}), /* @__PURE__ */ a("span", {
+					className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+					children: s.mounts
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-zinc-400 dark:text-zinc-500",
+					children: "Updates"
+				}), /* @__PURE__ */ a("span", {
+					className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+					children: s.renders - s.mounts
+				})]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+				children: "Self time"
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-zinc-400 dark:text-zinc-500",
+					children: "Total"
+				}), /* @__PURE__ */ a("span", {
+					className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+					children: n(s.totalSelf)
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-zinc-400 dark:text-zinc-500",
+					children: "Average"
+				}), /* @__PURE__ */ a("span", {
+					className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+					children: n(s.avgSelf)
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-zinc-400 dark:text-zinc-500",
+					children: "Max"
+				}), /* @__PURE__ */ a("span", {
+					className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+					children: n(s.maxSelf)
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-zinc-400 dark:text-zinc-500",
+					children: "Last"
+				}), /* @__PURE__ */ a("span", {
+					className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+					children: n(s.lastSelf)
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-between gap-2",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-zinc-400 dark:text-zinc-500",
+					children: "% of session"
+				}), /* @__PURE__ */ a("span", {
+					className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+					children: r(l > 0 ? s.totalSelf / l : 0)
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/HotspotSidebar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './HotspotSidebar';

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/HotspotSidebar/index.mjs

@@ -0,0 +1,2 @@
+import e from "./HotspotSidebar.mjs";
+export { e as default };

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

@@ -0,0 +1,10 @@
+import { CommitEntry, Element, TracingTree } from '@plitzi/sdk-shared';
+export type HotspotsListProps = {
+    commits: CommitEntry[];
+    tree: TracingTree;
+    flat: Record<string, Element> | undefined;
+    selectedId: string | undefined;
+    onSelectElement: (id: string | undefined) => void;
+};
+declare const HotspotsList: ({ commits, tree, flat, selectedId, onSelectElement }: HotspotsListProps) => import("react").JSX.Element;
+export default HotspotsList;

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

@@ -0,0 +1,139 @@
+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 "@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 = [
+	{
+		id: "total",
+		label: "Total"
+	},
+	{
+		id: "renders",
+		label: "Renders"
+	},
+	{
+		id: "avg",
+		label: "Avg"
+	},
+	{
+		id: "max",
+		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] = 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 = 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)));
+		y(C[n].id);
+	}, [
+		C,
+		D,
+		y
+	]);
+	return /* @__PURE__ */ f("div", {
+		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
+		children: [
+			/* @__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__ */ d("span", {
+						className: "font-medium text-zinc-700 dark:text-zinc-200",
+						children: "Session hotspots"
+					}),
+					/* @__PURE__ */ f("span", { children: [
+						"· ",
+						C.length,
+						" elements · ",
+						h.length,
+						" commits"
+					] }),
+					/* @__PURE__ */ f("div", {
+						className: "ml-auto flex items-center gap-1",
+						children: [/* @__PURE__ */ d("span", { children: "sort" }), p.map((e) => /* @__PURE__ */ d("button", {
+							onClick: O(e.id),
+							"aria-pressed": b === e.id,
+							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
+							}),
+							children: e.label
+						}, e.id))]
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex min-h-0 flex-1 overflow-hidden",
+				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__ */ 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), 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: 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__ */ f("span", {
+									className: "flex w-40 shrink-0 flex-col",
+									children: [/* @__PURE__ */ d("span", {
+										className: "truncate text-zinc-700 dark:text-zinc-200",
+										children: e.name
+									}), /* @__PURE__ */ d("span", {
+										className: "truncate text-[9px] text-zinc-400 dark:text-zinc-500",
+										children: e.type
+									})]
+								}),
+								/* @__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__ */ d("div", {
+									className: "h-2 flex-1 overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-800",
+									children: /* @__PURE__ */ d("div", {
+										style: { width: `${Math.max(2, Math.round(a * 100))}%` },
+										className: o("h-full rounded-sm", t(e.maxSelf))
+									})
+								}),
+								/* @__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__ */ d(i, {
+					row: E,
+					flat: _,
+					sessionSelf: T
+				})]
+			}),
+			/* @__PURE__ */ d(r, {})
+		]
+	});
+};
+//#endregion
+export { h as default };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/HotspotsList/index.d.ts

@@ -0,0 +1 @@
+export { default } from './HotspotsList';

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

@@ -0,0 +1,2 @@
+import e from "./HotspotsList.mjs";
+export { e as default };

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

@@ -0,0 +1,8 @@
+import { DurationMetric } from '../../helpers';
+export type MetricToggleProps = {
+    metric: DurationMetric;
+    onChange: (metric: DurationMetric) => void;
+    className?: string;
+};
+declare const MetricToggle: ({ metric, onChange, className }: MetricToggleProps) => import("react").JSX.Element;
+export default MetricToggle;

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

@@ -0,0 +1,30 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/MetricToggle/MetricToggle.tsx
+var r = [{
+	id: "self",
+	label: "Self",
+	title: "Own render work — the real per-element cost"
+}, {
+	id: "total",
+	label: "Total",
+	title: "Subtree-inclusive time (cascades up the tree)"
+}], i = ({ metric: i, onChange: a, className: o }) => {
+	let s = t((e) => () => a(e), [a]);
+	return /* @__PURE__ */ n("div", {
+		className: e("flex items-center overflow-hidden rounded border border-zinc-200 dark:border-zinc-700", o),
+		children: r.map((t) => /* @__PURE__ */ n("button", {
+			title: t.title,
+			"aria-pressed": i === t.id,
+			onClick: s(t.id),
+			className: e("px-1.5 py-0.5 text-[10px] font-medium", {
+				"bg-violet-500 text-white": i === t.id,
+				"text-zinc-500 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-700": i !== t.id
+			}),
+			children: t.label
+		}, t.id))
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/MetricToggle/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MetricToggle';

package/dist/components/DevToolsPanel/tabs/TracingViewer/components/MetricToggle/index.mjs

@@ -0,0 +1,2 @@
+import e from "./MetricToggle.mjs";
+export { e as default };

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

@@ -0,0 +1,13 @@
+import { CommitOrigin, FlameModel, FlameNode } from '../../helpers';
+import { CommitEntry } from '@plitzi/sdk-shared';
+export type RankedListProps = {
+    commit: CommitEntry;
+    model: FlameModel;
+    active: FlameNode | undefined;
+    origin: CommitOrigin;
+    sidebarOpen: boolean;
+    onSelectElement: (id: string | undefined) => void;
+    onToggleSidebar: () => void;
+};
+declare const RankedList: ({ commit, model, active, origin, sidebarOpen, onSelectElement, onToggleSidebar }: RankedListProps) => import("react").JSX.Element;
+export default RankedList;