@plitzi/sdk-dev-tools 0.32.24 → 0.33.0

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogNavigation/LogNavigationBody.mjs

@@ -1,60 +1,60 @@
 import { useMemo as e } from "react";
-import { useCommonStore as t } from "@plitzi/sdk-shared/store";
-import { get as n } from "@plitzi/plitzi-ui/helpers";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useCommonStore as r } from "@plitzi/sdk-shared/store";
+import { get as i } from "@plitzi/plitzi-ui/helpers";
 import { formatDate as a } from "@plitzi/sdk-shared/helpers";
 //#region src/components/DevToolsPanel/tabs/Logs/categories/LogNavigation/LogNavigationBody.tsx
 var o = ({ elementId: o, startTime: s, endTime: c, duration: l }) => {
-	let [u] = t("schema.flat"), d = e(() => o ? n(u, o) : void 0, [o, u]);
-	return /* @__PURE__ */ i("div", {
+	let [u] = r("schema.flat"), d = e(() => o ? i(u, o) : void 0, [o, u]);
+	return /* @__PURE__ */ n("div", {
 		className: "m-2 flex justify-around gap-4",
 		children: [
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ n("div", {
 				className: "flex min-w-0 grow basis-0 flex-col gap-2",
-				children: [/* @__PURE__ */ i("div", {
+				children: [/* @__PURE__ */ n("div", {
 					className: "flex items-center gap-1 font-bold",
-					children: [/* @__PURE__ */ r("i", { className: "fa-regular fa-clock" }), "Times"]
-				}), /* @__PURE__ */ i("div", {
+					children: [/* @__PURE__ */ t("i", { className: "fa-regular fa-clock" }), "Times"]
+				}), /* @__PURE__ */ n("div", {
 					className: "flex flex-col",
 					children: [
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ n("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ r("span", { children: "Started:" }), typeof s == "string" ? s : a(s)]
+							children: [/* @__PURE__ */ t("span", { children: "Started:" }), typeof s == "string" ? s : a(s)]
 						}),
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ n("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ r("span", { children: "End:" }), typeof c == "string" ? c : a(c)]
+							children: [/* @__PURE__ */ t("span", { children: "End:" }), typeof c == "string" ? c : a(c)]
 						}),
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ n("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ r("span", { children: "Duration:" }), l]
+							children: [/* @__PURE__ */ t("span", { children: "Duration:" }), l]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ r("div", { className: "border-r border-gray-300" }),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ t("div", { className: "border-r border-gray-300" }),
+			/* @__PURE__ */ n("div", {
 				className: "flex min-w-0 grow basis-0 flex-col gap-2",
-				children: [/* @__PURE__ */ i("div", {
+				children: [/* @__PURE__ */ n("div", {
 					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-circle-info" }), "Details"]
-				}), /* @__PURE__ */ i("div", {
+					children: [/* @__PURE__ */ t("i", { className: "fa-solid fa-circle-info" }), "Details"]
+				}), /* @__PURE__ */ n("div", {
 					className: "flex flex-col",
 					children: [
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ n("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ r("span", { children: "Type:" }), /* @__PURE__ */ r("span", { children: "Navigation" })]
+							children: [/* @__PURE__ */ t("span", { children: "Type:" }), /* @__PURE__ */ t("span", { children: "Navigation" })]
 						}),
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ n("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ r("span", { children: "Trigger:" }), /* @__PURE__ */ r("span", {
+							children: [/* @__PURE__ */ t("span", { children: "Trigger:" }), /* @__PURE__ */ t("span", {
 								className: "truncate",
 								children: "-"
 							})]
 						}),
-						d && /* @__PURE__ */ i("div", {
+						d && /* @__PURE__ */ n("div", {
 							className: "flex gap-1",
-							children: [/* @__PURE__ */ r("span", { children: "Element:" }), /* @__PURE__ */ i("span", {
+							children: [/* @__PURE__ */ t("span", { children: "Element:" }), /* @__PURE__ */ n("span", {
 								className: "cursor-pointer truncate text-blue-500",
 								children: [
 									d.definition.label,

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/LogNetwork.d.ts

@@ -0,0 +1,10 @@
+import { LogNetwork as TLogNetwork } from '@plitzi/sdk-shared';
+import { ReactNode } from 'react';
+export type LogNetworkProps = {
+    className?: string;
+    message?: ReactNode;
+    params: TLogNetwork['params'];
+    time?: string;
+};
+declare const LogNetwork: ({ time, message, params: { event, issues, payload } }: LogNetworkProps) => import("react").JSX.Element;
+export default LogNetwork;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/LogNetwork.mjs

@@ -0,0 +1,52 @@
+import e from "../../LogStatus.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/ContainerCollapsable";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/LogNetwork.tsx
+var i = /* @__PURE__ */ t("i", { className: "fa-solid fa-angle-right text-[10px]" }), a = /* @__PURE__ */ t("i", { className: "fa-solid fa-angle-down text-[10px]" }), o = ({ time: o, message: s, params: { event: c, issues: l, payload: u } }) => /* @__PURE__ */ n(r, {
+	className: "last:border-b-none w-full border-b border-l-2 border-b-zinc-200 border-l-red-500 px-2 py-1 transition-colors hover:bg-zinc-50 dark:border-b-zinc-700 dark:hover:bg-zinc-800/50",
+	collapsed: !0,
+	children: [/* @__PURE__ */ t(r.Header, {
+		title: /* @__PURE__ */ n("div", {
+			className: "flex w-full items-center gap-2 overflow-hidden",
+			children: [
+				/* @__PURE__ */ t("span", {
+					className: "shrink-0 font-mono text-zinc-400 tabular-nums dark:text-zinc-500",
+					children: o
+				}),
+				/* @__PURE__ */ t(e, {
+					logType: "danger",
+					children: "Invalid"
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "grow basis-0 truncate text-zinc-700 dark:text-zinc-300",
+					children: s
+				})
+			]
+		}),
+		placement: "left",
+		className: { headerTitle: "overflow-hidden" },
+		iconCollapsed: i,
+		iconExpanded: a,
+		children: /* @__PURE__ */ t("span", {
+			className: "font-mono text-zinc-400 dark:text-zinc-500",
+			children: c
+		})
+	}), /* @__PURE__ */ t(r.Content, { children: /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-1 py-1 pl-4",
+		children: [l.map((e) => /* @__PURE__ */ n("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ t("span", {
+				className: "font-mono text-red-600 dark:text-red-400",
+				children: e.path || "(root)"
+			}), /* @__PURE__ */ t("span", {
+				className: "text-zinc-600 dark:text-zinc-300",
+				children: e.message
+			})]
+		}, `${e.path}-${e.message}`)), u !== void 0 && /* @__PURE__ */ t("pre", {
+			className: "mt-1 overflow-x-auto rounded bg-zinc-50 p-2 text-[11px] text-zinc-600 dark:bg-zinc-800/60 dark:text-zinc-300",
+			children: JSON.stringify(u, null, 2)
+		})]
+	}) })]
+});
+//#endregion
+export { o as default };

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/index.d.ts

@@ -0,0 +1,3 @@
+import { default as LogNetwork } from './LogNetwork';
+export * from './LogNetwork';
+export default LogNetwork;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/index.mjs

@@ -0,0 +1,5 @@
+import e from "./LogNetwork.mjs";
+//#region src/components/DevToolsPanel/tabs/Logs/categories/LogNetwork/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.mjs

@@ -1,55 +1,58 @@
-import { useSelectedStore as e } from "../../../../scope/useScope.mjs";
-import t from "../../../../scope/useStoreState.mjs";
-import n from "@plitzi/plitzi-ui/hooks/useStorage";
-import r from "clsx";
-import { use as i, useCallback as a } from "react";
-import o from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "@uiw/react-json-view";
-import * as u from "@uiw/react-json-view/vscode";
-import { emptyObject as d } from "@plitzi/sdk-shared/helpers/utils";
+import e from "./helpers/mapFunctionValues.mjs";
+import t from "./helpers/renderFunctionValue.mjs";
+import { useSelectedStore as n } from "../../../../scope/useScope.mjs";
+import r from "../../../../scope/useStoreState.mjs";
+import i from "clsx";
+import { use as a, useCallback as o, useMemo as s } from "react";
+import c from "@plitzi/sdk-shared/devTools/DevToolsContext";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "@plitzi/plitzi-ui/hooks/useStorage";
+import f from "@uiw/react-json-view";
+import * as p from "@uiw/react-json-view/vscode";
+import { emptyObject as m } from "@plitzi/sdk-shared/helpers/utils";
 //#region src/components/DevToolsPanel/tabs/StoreViewer/StoreViewer.tsx
-var f = {
-	...u.vscodeTheme,
+var h = {
+	...p.vscodeTheme,
 	width: "100%",
 	height: "100%",
 	overflow: "auto",
 	padding: "8px",
 	fontSize: "14px"
-}, p = (e) => r("cursor-pointer rounded px-2 py-0.5 font-medium transition-colors", e ? "bg-violet-500/15 text-violet-600 dark:text-violet-300" : "text-zinc-500 hover:bg-zinc-200/70 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-100"), m = ({ elementSelected: r }) => {
-	let { getData: u } = i(o), m = e(), [h, g] = n("plitzi-sdk.dev-tools.store.view", "own"), _ = t(r ? void 0 : m, h === "merged"), v = a(() => g("own"), [g]), y = a(() => g("merged"), [g]), b = r ? u?.(`getElementDataSource-${r}`) : _;
-	return /* @__PURE__ */ c("div", {
+}, g = (e) => i("cursor-pointer rounded px-2 py-0.5 font-medium transition-colors", e ? "bg-violet-500/15 text-violet-600 dark:text-violet-300" : "text-zinc-500 hover:bg-zinc-200/70 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700/50 dark:hover:text-zinc-100"), _ = ({ elementSelected: i }) => {
+	let { getData: p } = a(c), _ = n(), [v, y] = d("plitzi-sdk.dev-tools.store.view", "own"), b = r(i ? void 0 : _, v === "merged"), x = o(() => y("own"), [y]), S = o(() => y("merged"), [y]), C = i ? p?.(`getElementDataSource-${i}`) : b, w = s(() => e(C), [C]);
+	return /* @__PURE__ */ u("div", {
 		className: "flex h-full w-full flex-col",
-		children: [!r && /* @__PURE__ */ c("div", {
+		children: [!i && /* @__PURE__ */ u("div", {
 			className: "flex shrink-0 items-center gap-1 border-b border-zinc-200 px-2 py-1 text-[11px] dark:border-zinc-800",
 			children: [
-				/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ l("span", {
 					className: "mr-1 text-zinc-400 dark:text-zinc-500",
 					children: "View"
 				}),
-				/* @__PURE__ */ s("button", {
-					className: p(h === "own"),
-					onClick: v,
+				/* @__PURE__ */ l("button", {
+					className: g(v === "own"),
+					onClick: x,
 					title: "Only this scope's own layer",
 					children: "Own"
 				}),
-				/* @__PURE__ */ s("button", {
-					className: p(h === "merged"),
-					onClick: y,
+				/* @__PURE__ */ l("button", {
+					className: g(v === "merged"),
+					onClick: S,
 					title: "Own layer merged over the parent scope chain",
 					children: "Merged"
 				})
 			]
-		}), /* @__PURE__ */ s(l, {
-			value: b ?? d,
-			style: f,
+		}), /* @__PURE__ */ l(f, {
+			value: w ?? m,
+			style: h,
 			enableClipboard: !1,
 			indentWidth: 15,
 			collapsed: 2,
 			displayObjectSize: !1,
-			displayDataTypes: !1
+			displayDataTypes: !1,
+			children: /* @__PURE__ */ l(f.String, { render: t })
 		})]
 	});
 };
 //#endregion
-export { m as default };
+export { _ as default };

package/dist/components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues.d.ts

@@ -0,0 +1,3 @@
+export declare const readFunctionLabel: (value: string) => string;
+declare const mapFunctionValues: (state?: Record<string, unknown>) => Record<string, unknown> | undefined;
+export default mapFunctionValues;

package/dist/components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues.mjs

@@ -0,0 +1,22 @@
+//#region src/components/DevToolsPanel/tabs/StoreViewer/helpers/mapFunctionValues.ts
+var e = "\0fn:", t = (t) => t.startsWith(e) ? t.slice(4) : "", n = (e) => Array.isArray(e), r = (e) => {
+	if (typeof e != "object" || !e) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === Object.prototype || t === null;
+}, i = (t) => {
+	if (typeof t == "function") return `${e}ƒ ${t.name || "anonymous"}()`;
+	if (n(t)) {
+		let e = t.map(i);
+		return e.every((e, n) => e === t[n]) ? t : e;
+	}
+	if (!r(t)) return t;
+	let a = {}, o = !1;
+	for (let [e, n] of Object.entries(t)) a[e] = i(n), o ||= a[e] !== n;
+	return o ? a : t;
+}, a = (e) => {
+	if (!e) return;
+	let t = i(e);
+	return r(t) ? t : e;
+};
+//#endregion
+export { a as default, t as readFunctionLabel };

package/dist/components/DevToolsPanel/tabs/StoreViewer/helpers/renderFunctionValue.d.ts

@@ -0,0 +1,3 @@
+import { TypesElement } from '@uiw/react-json-view';
+declare const renderFunctionValue: NonNullable<TypesElement<'span'>['render']>;
+export default renderFunctionValue;

package/dist/components/DevToolsPanel/tabs/StoreViewer/helpers/renderFunctionValue.mjs

@@ -0,0 +1,13 @@
+import { readFunctionLabel as e } from "./mapFunctionValues.mjs";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/StoreViewer/helpers/renderFunctionValue.tsx
+var n = (n, { type: r, value: i }) => {
+	if (r !== "value" || typeof i != "string") return null;
+	let a = e(i);
+	return a ? /* @__PURE__ */ t("span", {
+		className: "w-rjv-value text-violet-400 italic",
+		children: a
+	}) : null;
+};
+//#endregion
+export { n as default };

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

@@ -5,155 +5,154 @@ import i from "./components/HotspotsList/HotspotsList.mjs";
 import a from "./components/RankedList/RankedList.mjs";
 import o from "./components/TracingToolbar/TracingToolbar.mjs";
 import s from "./useHighlightElement.mjs";
-import c from "@plitzi/plitzi-ui/hooks/useStorage";
-import { use as l, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
-import h from "@plitzi/sdk-navigation/NavigationContext";
+import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h from "@plitzi/plitzi-ui/hooks/useStorage";
 import { useCommonStore as g } from "@plitzi/sdk-shared/store";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useTracing as y } from "@plitzi/sdk-shared/store/tracing";
+import { useTracing as _ } from "@plitzi/sdk-shared/store/tracing";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/TracingViewer.tsx
-var b = () => {
-	let { enabled: b, hydrated: x, commits: S, tree: C, clear: w } = y(), [T] = g("schema.flat"), { currentPageId: E } = l(h), [D, O] = c("plitzi-sdk.dev-tools.tracing.view", "ranked"), [k, A] = c("plitzi-sdk.dev-tools.tracing.persist", !1), [j, M] = c("plitzi-sdk.dev-tools.tracing.sidebar-open", !1), [N, P] = m(), [F, I] = m(), L = p(E);
-	d(() => {
-		L.current !== E && (L.current = E, k || (w(), P(void 0), I(void 0)));
+var v = () => {
+	let { enabled: v, hydrated: y, commits: b, tree: x, clear: S } = _(), [[C, w]] = g(["schema.flat", "navigation.currentPageId"]), [T, E] = h("plitzi-sdk.dev-tools.tracing.view", "ranked"), [D, O] = h("plitzi-sdk.dev-tools.tracing.persist", !1), [k, A] = h("plitzi-sdk.dev-tools.tracing.sidebar-open", !1), [j, M] = f(), [N, P] = f(), F = d(w);
+	l(() => {
+		F.current !== w && (F.current = w, D || (S(), M(void 0), P(void 0)));
 	}, [
-		E,
-		k,
-		w
+		w,
+		D,
+		S
 	]);
-	let R = f(() => {
-		if (!(!x || S.length === 0)) return {
+	let I = u(() => {
+		if (!(!y || b.length === 0)) return {
 			commitId: 0,
-			timestamp: S[0].timestamp,
+			timestamp: b[0].timestamp,
 			duration: 0,
-			elementCount: Object.keys(C).length,
+			elementCount: Object.keys(x).length,
 			elements: [],
 			causes: []
 		};
 	}, [
+		y,
+		b,
+		x
+	]), L = u(() => I ? [I, ...b] : b, [I, b]), R = b[0]?.commitId, z = u(() => {
+		if (L.length === 0) return -1;
+		let e = L.findIndex((e) => e.commitId === j);
+		return e === -1 ? L.length - 1 : e;
+	}, [L, j]), B = z === -1 ? void 0 : L[z], V = B?.commitId === 0, H = u(() => B && !V ? e(B, x, C) : void 0, [
+		B,
+		V,
 		x,
-		S,
 		C
-	]), z = f(() => R ? [R, ...S] : S, [R, S]), B = S[0]?.commitId, V = f(() => {
-		if (z.length === 0) return -1;
-		let e = z.findIndex((e) => e.commitId === N);
-		return e === -1 ? z.length - 1 : e;
-	}, [z, N]), H = V === -1 ? void 0 : z[V], U = H?.commitId === 0, W = f(() => H && !U ? e(H, C, T) : void 0, [
-		H,
-		U,
-		C,
-		T
-	]), G = f(() => W?.nodes.find((e) => e.id === F), [W, F]);
-	s(G?.id);
-	let K = f(() => H ? t(H, x, H.commitId === B) : "update", [
-		H,
-		x,
-		B
-	]), q = u((e) => {
-		P(e), I(void 0);
-	}, []), J = u((e) => {
-		I(e), e && M(!0);
-	}, [M]), Y = u(() => M((e) => !e), [M]), X = u((e) => {
-		let t = V + e;
-		t >= 0 && t < z.length && (P(z[t].commitId), I(void 0));
-	}, [z, V]), Z = u((e) => {
-		(e.key === "ArrowLeft" || e.key === "ArrowRight") && (e.preventDefault(), X(e.key === "ArrowLeft" ? -1 : 1));
-	}, [X]);
-	return b ? H ? /* @__PURE__ */ v("div", {
+	]), U = u(() => H?.nodes.find((e) => e.id === N), [H, N]);
+	s(U?.id);
+	let W = u(() => B ? t(B, y, B.commitId === R) : "update", [
+		B,
+		y,
+		R
+	]), G = c((e) => {
+		M(e), P(void 0);
+	}, []), K = c((e) => {
+		P(e), e && A(!0);
+	}, [A]), q = c(() => A((e) => !e), [A]), J = c((e) => {
+		let t = z + e;
+		t >= 0 && t < L.length && (M(L[t].commitId), P(void 0));
+	}, [L, z]), Y = c((e) => {
+		(e.key === "ArrowLeft" || e.key === "ArrowRight") && (e.preventDefault(), J(e.key === "ArrowLeft" ? -1 : 1));
+	}, [J]);
+	return v ? B ? /* @__PURE__ */ m("div", {
 		className: "flex h-full min-h-0 w-full flex-col",
-		onKeyDown: Z,
+		onKeyDown: Y,
 		children: [
-			/* @__PURE__ */ _(o, {
-				view: D,
-				persist: k,
-				commitCount: S.length,
-				onClear: w,
-				onViewChange: O,
-				onPersistChange: A
+			/* @__PURE__ */ p(o, {
+				view: T,
+				persist: D,
+				commitCount: b.length,
+				onClear: S,
+				onViewChange: E,
+				onPersistChange: O
 			}),
-			D !== "hotspots" && /* @__PURE__ */ _(n, {
-				commits: z,
-				selectedIndex: V,
-				hydrated: x,
-				onSelect: q
+			T !== "hotspots" && /* @__PURE__ */ p(n, {
+				commits: L,
+				selectedIndex: z,
+				hydrated: y,
+				onSelect: G
 			}),
-			D !== "hotspots" && U && /* @__PURE__ */ v("div", {
+			T !== "hotspots" && V && /* @__PURE__ */ m("div", {
 				className: "flex grow flex-col items-center justify-center gap-3 px-6 text-center text-zinc-500 dark:text-zinc-400",
 				children: [
-					/* @__PURE__ */ _("i", { className: "fa-solid fa-server text-3xl opacity-30" }),
-					/* @__PURE__ */ _("span", {
+					/* @__PURE__ */ p("i", { className: "fa-solid fa-server text-3xl opacity-30" }),
+					/* @__PURE__ */ p("span", {
 						className: "text-sm font-medium text-zinc-600 dark:text-zinc-300",
 						children: "Server render (SSR)"
 					}),
-					/* @__PURE__ */ v("span", {
+					/* @__PURE__ */ m("span", {
 						className: "max-w-md text-xs leading-relaxed",
 						children: [
 							"This page was rendered on the server first. React's Profiler doesn't run during server rendering, so there's no per-element timing for it — this commit marks that baseline. Commit\xA0#",
-							B,
+							R,
 							" ",
 							"is the client ",
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ p("span", {
 								className: "font-medium text-violet-600 dark:text-violet-400",
 								children: "hydration"
 							}),
 							" of this tree."
 						]
 					}),
-					/* @__PURE__ */ v("span", {
+					/* @__PURE__ */ m("span", {
 						className: "text-[11px] opacity-70",
-						children: [H.elementCount, " elements in the rendered tree"]
+						children: [B.elementCount, " elements in the rendered tree"]
 					})
 				]
 			}),
-			D === "ranked" && W && /* @__PURE__ */ _(a, {
-				commit: H,
-				model: W,
-				active: G,
-				origin: K,
-				sidebarOpen: j,
-				onSelectElement: J,
-				onToggleSidebar: Y
+			T === "ranked" && H && /* @__PURE__ */ p(a, {
+				commit: B,
+				model: H,
+				active: U,
+				origin: W,
+				sidebarOpen: k,
+				onSelectElement: K,
+				onToggleSidebar: q
 			}),
-			D === "flamegraph" && W && /* @__PURE__ */ _(r, {
-				commit: H,
-				model: W,
-				active: G,
-				origin: K,
-				sidebarOpen: j,
-				onSelectElement: J,
-				onToggleSidebar: Y
+			T === "flamegraph" && H && /* @__PURE__ */ p(r, {
+				commit: B,
+				model: H,
+				active: U,
+				origin: W,
+				sidebarOpen: k,
+				onSelectElement: K,
+				onToggleSidebar: q
 			}),
-			D === "hotspots" && /* @__PURE__ */ _(i, {
-				commits: S,
-				tree: C,
-				flat: T,
-				selectedId: F,
-				onSelectElement: J
+			T === "hotspots" && /* @__PURE__ */ p(i, {
+				commits: b,
+				tree: x,
+				flat: C,
+				selectedId: N,
+				onSelectElement: K
 			})
 		]
-	}) : /* @__PURE__ */ v("div", {
+	}) : /* @__PURE__ */ m("div", {
 		className: "flex h-full min-h-0 w-full flex-col",
-		children: [/* @__PURE__ */ _(o, {
-			view: D,
-			persist: k,
-			commitCount: S.length,
-			onClear: w,
-			onViewChange: O,
-			onPersistChange: A
-		}), /* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ p(o, {
+			view: T,
+			persist: D,
+			commitCount: b.length,
+			onClear: S,
+			onViewChange: E,
+			onPersistChange: O
+		}), /* @__PURE__ */ m("div", {
 			className: "flex grow flex-col items-center justify-center gap-2 text-zinc-400 dark:text-zinc-500",
-			children: [/* @__PURE__ */ _("i", { className: "fa-solid fa-chart-column text-3xl opacity-20" }), /* @__PURE__ */ _("span", {
+			children: [/* @__PURE__ */ p("i", { className: "fa-solid fa-chart-column text-3xl opacity-20" }), /* @__PURE__ */ p("span", {
 				className: "text-xs",
 				children: "No commits recorded yet — interact with the page"
 			})]
 		})]
-	}) : /* @__PURE__ */ v("div", {
+	}) : /* @__PURE__ */ m("div", {
 		className: "flex h-full w-full flex-col items-center justify-center gap-2 text-zinc-400 dark:text-zinc-500",
-		children: [/* @__PURE__ */ _("i", { className: "fa-solid fa-gauge-high text-3xl opacity-20" }), /* @__PURE__ */ _("span", {
+		children: [/* @__PURE__ */ p("i", { className: "fa-solid fa-gauge-high text-3xl opacity-20" }), /* @__PURE__ */ p("span", {
 			className: "text-xs",
 			children: "Enable debugMode to record render tracing"
 		})]
 	});
 };
 //#endregion
-export { b as default };
+export { v as default };

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

@@ -5,10 +5,12 @@ import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/components/CommitStrip/CommitStrip.tsx
 var p = 6, m = ({ commits: m, selectedIndex: h, hydrated: g, onSelect: _ }) => {
 	let v = u(null), y = l(() => Math.max(1, ...m.map((e) => e.duration)), [m]), b = l(() => m.find((e) => e.commitId !== 0)?.commitId, [m]);
-	c(() => v.current?.scrollIntoView({
-		block: "nearest",
-		inline: "nearest"
-	}), [h]);
+	c(() => {
+		v.current?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [h]);
 	let x = s((e) => () => _(e), [_]), S = s((e) => {
 		if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 		e.preventDefault(), e.stopPropagation();