@plitzi/sdk-dev-tools 0.32.1 → 0.32.2

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

@@ -1,11 +1,11 @@
 import { useMemo as e } from "react";
-import { createStoreHook as t } from "@plitzi/nexus/createStore";
+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 { 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 { useStore: u } = t(), [d] = u("schema.flat"), f = e(() => o ? n(d, o) : void 0, [o, d]);
+	let [u] = t("schema.flat"), d = e(() => o ? n(u, o) : void 0, [o, u]);
 	return /* @__PURE__ */ i("div", {
 		className: "m-2 flex justify-around gap-4",
 		children: [
@@ -52,12 +52,12 @@ var o = ({ elementId: o, startTime: s, endTime: c, duration: l }) => {
 								children: "-"
 							})]
 						}),
-						f && /* @__PURE__ */ i("div", {
+						d && /* @__PURE__ */ i("div", {
 							className: "flex gap-1",
 							children: [/* @__PURE__ */ r("span", { children: "Element:" }), /* @__PURE__ */ i("span", {
 								className: "cursor-pointer truncate text-blue-500",
 								children: [
-									f.definition.label,
+									d.definition.label,
 									" [",
 									o,
 									"]"

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogNavigation/LogNavigationHeader.d.ts

@@ -6,5 +6,5 @@ export type LogNavigationHeaderProps = {
     message?: ReactNode;
     time?: string | Date;
 };
-declare const LogNavigationHeader: ({ status, message, time }: LogNavigationHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const LogNavigationHeader: ({ status, message, time }: LogNavigationHeaderProps) => import("react").JSX.Element;
 export default LogNavigationHeader;

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

@@ -5,5 +5,5 @@ export type LogStoreProps = {
     params?: TLogStore['params'];
     time?: string | Date;
 };
-declare const LogStore: ({ time, message, params }: LogStoreProps) => import("react/jsx-runtime").JSX.Element;
+declare const LogStore: ({ time, message, params }: LogStoreProps) => import("react").JSX.Element;
 export default LogStore;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/LogStoreBody.d.ts

@@ -22,5 +22,5 @@ export type LogStoreBodyProps = {
     next?: unknown;
     contextLines?: number;
 };
-declare const LogStoreBody: ({ path, prev, next, contextLines }: LogStoreBodyProps) => import("react/jsx-runtime").JSX.Element;
+declare const LogStoreBody: ({ path, prev, next, contextLines }: LogStoreBodyProps) => import("react").JSX.Element;
 export default LogStoreBody;

package/dist/components/DevToolsPanel/tabs/Logs/categories/LogStore/LogStoreHeader.d.ts

@@ -5,5 +5,5 @@ export type LogStoreHeaderProps = {
     message?: ReactNode;
     time?: string | Date;
 };
-declare const LogStoreHeader: ({ storeName, path, message, time }: LogStoreHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const LogStoreHeader: ({ storeName, path, message, time }: LogStoreHeaderProps) => import("react").JSX.Element;
 export default LogStoreHeader;

package/dist/components/DevToolsPanel/tabs/PluginsViewer/PluginDetails.d.ts

@@ -4,5 +4,5 @@ export type PluginDetailsProps = {
     author?: string;
     settings?: Record<string, unknown>;
 };
-declare const PluginDetails: ({ author, settings, label, version }: PluginDetailsProps) => import("react/jsx-runtime").JSX.Element;
+declare const PluginDetails: ({ author, settings, label, version }: PluginDetailsProps) => import("react").JSX.Element;
 export default PluginDetails;

package/dist/components/DevToolsPanel/tabs/PluginsViewer/PluginsViewer.d.ts

@@ -1,5 +1,5 @@
 export type PluginsViewerProps = {
     className?: string;
 };
-declare const PluginsViewer: ({ className }: PluginsViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const PluginsViewer: ({ className }: PluginsViewerProps) => import("react").JSX.Element;
 export default PluginsViewer;

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

@@ -1,5 +1,5 @@
 export type StoreViewerProps = {
     elementSelected?: string;
 };
-declare const StoreViewer: ({ elementSelected }: StoreViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const StoreViewer: ({ elementSelected }: StoreViewerProps) => import("react").JSX.Element;
 export default StoreViewer;

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

@@ -1,6 +1,6 @@
 import { use as e } from "react";
 import t from "@plitzi/sdk-shared/devTools/DevToolsContext";
-import { createStoreHook as n } from "@plitzi/nexus/createStore";
+import { useCommonStore as n } from "@plitzi/sdk-shared/store";
 import { jsx as r } from "react/jsx-runtime";
 import i from "@uiw/react-json-view";
 import * as a from "@uiw/react-json-view/vscode";
@@ -14,11 +14,11 @@ var s = {
 	padding: "8px",
 	fontSize: "14px"
 }, c = ({ elementSelected: a }) => {
-	let { getData: c } = e(t), { useStore: l } = n(), [u] = l();
+	let { getData: c } = e(t), [l] = n();
 	return /* @__PURE__ */ r("div", {
 		className: "flex h-full w-full flex-col",
 		children: /* @__PURE__ */ r(i, {
-			value: (a ? c?.(`getElementDataSource-${a}`) : u) ?? o,
+			value: (a ? c?.(`getElementDataSource-${a}`) : l) ?? o,
 			style: s,
 			enableClipboard: !1,
 			indentWidth: 15,

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

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

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

@@ -0,0 +1,159 @@
+import { buildFlameModel as e, commitOrigin as t } from "./helpers.mjs";
+import n from "./components/CommitStrip/CommitStrip.mjs";
+import r from "./components/Flamegraph/Flamegraph.mjs";
+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 { 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";
+//#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)));
+	}, [
+		E,
+		k,
+		w
+	]);
+	let R = f(() => {
+		if (!(!x || S.length === 0)) return {
+			commitId: 0,
+			timestamp: S[0].timestamp,
+			duration: 0,
+			elementCount: Object.keys(C).length,
+			elements: [],
+			causes: []
+		};
+	}, [
+		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", {
+		className: "flex h-full min-h-0 w-full flex-col",
+		onKeyDown: Z,
+		children: [
+			/* @__PURE__ */ _(o, {
+				view: D,
+				persist: k,
+				commitCount: S.length,
+				onClear: w,
+				onViewChange: O,
+				onPersistChange: A
+			}),
+			D !== "hotspots" && /* @__PURE__ */ _(n, {
+				commits: z,
+				selectedIndex: V,
+				hydrated: x,
+				onSelect: q
+			}),
+			D !== "hotspots" && U && /* @__PURE__ */ v("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", {
+						className: "text-sm font-medium text-zinc-600 dark:text-zinc-300",
+						children: "Server render (SSR)"
+					}),
+					/* @__PURE__ */ v("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,
+							" ",
+							"is the client ",
+							/* @__PURE__ */ _("span", {
+								className: "font-medium text-violet-600 dark:text-violet-400",
+								children: "hydration"
+							}),
+							" of this tree."
+						]
+					}),
+					/* @__PURE__ */ v("span", {
+						className: "text-[11px] opacity-70",
+						children: [H.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
+			}),
+			D === "flamegraph" && W && /* @__PURE__ */ _(r, {
+				commit: H,
+				model: W,
+				active: G,
+				origin: K,
+				sidebarOpen: j,
+				onSelectElement: J,
+				onToggleSidebar: Y
+			}),
+			D === "hotspots" && /* @__PURE__ */ _(i, {
+				commits: S,
+				tree: C,
+				flat: T,
+				selectedId: F,
+				onSelectElement: J
+			})
+		]
+	}) : /* @__PURE__ */ v("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", {
+			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", {
+				className: "text-xs",
+				children: "No commits recorded yet — interact with the page"
+			})]
+		})]
+	}) : /* @__PURE__ */ v("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", {
+			className: "text-xs",
+			children: "Enable debugMode to record render tracing"
+		})]
+	});
+};
+//#endregion
+export { b as default };

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

@@ -0,0 +1,10 @@
+import { FlameModel, FlameNode } from '../../helpers';
+import { CommitEntry } from '@plitzi/sdk-shared';
+export type CommitCauseProps = {
+    commit: CommitEntry;
+    model: FlameModel;
+    active: FlameNode | undefined;
+    onSelectElement: (id: string | undefined) => void;
+};
+declare const CommitCause: ({ commit, model, active, onSelectElement }: CommitCauseProps) => import("react").JSX.Element | null;
+export default CommitCause;

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

@@ -0,0 +1,52 @@
+import e from "clsx";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/CommitCause/CommitCause.tsx
+var i = 6, a = ({ commit: a, model: o, active: s, onSelectElement: c }) => {
+	let l = o.nodes.filter((e) => e.trigger);
+	if (l.length === 0 && a.causes.length === 0) return null;
+	let u = l.slice(0, i), d = l.length - u.length, f = a.causes.slice(0, i), p = a.causes.length - f.length;
+	return /* @__PURE__ */ r(t, { children: [l.length > 0 && /* @__PURE__ */ r("span", {
+		className: "flex flex-wrap items-center gap-1",
+		children: [
+			/* @__PURE__ */ n("span", {
+				className: "mr-0.5 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+				children: "Triggered by"
+			}),
+			u.map((t) => /* @__PURE__ */ r("button", {
+				onClick: () => c(t.id === s?.id ? void 0 : t.id),
+				title: `${t.name} (${t.type}) — root-cause re-render of this commit`,
+				className: e("flex items-center gap-1 rounded px-1 py-0.5 text-violet-600 dark:text-violet-300", t.id === s?.id ? "bg-violet-500/25" : "bg-violet-500/10 hover:bg-violet-500/20"),
+				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-bolt text-[8px]" }), /* @__PURE__ */ n("span", {
+					className: "max-w-32 truncate",
+					children: t.name
+				})]
+			}, t.id)),
+			d > 0 && /* @__PURE__ */ r("span", {
+				className: "text-zinc-400 dark:text-zinc-500",
+				children: ["+", d]
+			})
+		]
+	}), a.causes.length > 0 && /* @__PURE__ */ r("span", {
+		className: "flex flex-wrap items-center gap-1",
+		children: [
+			/* @__PURE__ */ n("span", {
+				className: "mr-0.5 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+				children: "Store write"
+			}),
+			f.map((e) => /* @__PURE__ */ r("span", {
+				title: e.preview ? `${e.path}\n${e.preview}` : e.path,
+				className: "max-w-56 truncate rounded bg-zinc-500/10 px-1 py-0.5 font-mono text-[9px] text-zinc-600 dark:text-zinc-300",
+				children: [e.path, e.preview && /* @__PURE__ */ n("span", {
+					className: "ml-1 text-zinc-400 dark:text-zinc-500",
+					children: e.preview
+				})]
+			}, e.path)),
+			p > 0 && /* @__PURE__ */ r("span", {
+				className: "text-zinc-400 dark:text-zinc-500",
+				children: ["+", p]
+			})
+		]
+	})] });
+};
+//#endregion
+export { a as default };

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { CommitEntry } from '@plitzi/sdk-shared';
+export type CommitStripProps = {
+    commits: CommitEntry[];
+    selectedIndex: number;
+    hydrated: boolean;
+    onSelect: (commitId: number) => void;
+};
+declare const CommitStrip: ({ commits, selectedIndex, hydrated, onSelect }: CommitStripProps) => import("react").JSX.Element;
+export default CommitStrip;

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

@@ -0,0 +1,70 @@
+import { COMMIT_ORIGIN_BADGE as e, COMMIT_ORIGIN_LABEL as t, COMMIT_ORIGIN_LEGEND as n, commitOrigin as r, durationColor as i, formatMs as a } from "../../helpers.mjs";
+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/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]);
+	let x = s((e) => () => _(e), [_]);
+	return /* @__PURE__ */ f("div", {
+		className: "flex shrink-0 flex-col border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900",
+		children: [/* @__PURE__ */ d("div", {
+			role: "listbox",
+			"aria-label": "Commits, total render time",
+			"aria-orientation": "horizontal",
+			tabIndex: 0,
+			onKeyDown: s((e) => {
+				if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+				e.preventDefault(), e.stopPropagation();
+				let t = h + (e.key === "ArrowLeft" ? -1 : 1);
+				t >= 0 && t < m.length && _(m[t].commitId);
+			}, [
+				m,
+				h,
+				_
+			]),
+			className: "flex h-20 items-end gap-1 overflow-x-auto px-2 pt-2 outline-none focus-visible:ring-1 focus-visible:ring-violet-400",
+			children: m.map((n, s) => {
+				let c = s === h, l = n.commitId === 0, u = l ? 100 : Math.max(6, Math.round(n.duration / y * 100)), m = r(n, g, n.commitId === b), _ = n.causes.slice(0, p).map((e) => e.path).join(", "), S = n.causes.length > p ? ` +${n.causes.length - p}` : "", C = n.causes.length > 0 ? `\nCaused by ${_}${S}` : "";
+				return /* @__PURE__ */ f("button", {
+					ref: c ? v : void 0,
+					role: "option",
+					"aria-selected": c,
+					onClick: x(n.commitId),
+					title: l ? `Commit #${n.commitId} · ${t[m]} · no client timing · ${n.elementCount} elements` : `Commit #${n.commitId} · ${t[m]} · ${a(n.duration)} total · ${n.elementCount} elements${C}`,
+					className: "flex h-full shrink-0 flex-col items-center justify-end gap-0.5 px-0.5",
+					children: [/* @__PURE__ */ d("div", {
+						style: { height: `${u}%` },
+						className: o("w-3.5 rounded-sm transition-all", l ? "bg-violet-400/40" : i(n.duration), {
+							"border border-dashed border-violet-400/70": l,
+							"opacity-100 ring-2 ring-violet-400": c,
+							"opacity-40 hover:opacity-80": !c
+						})
+					}), /* @__PURE__ */ d("span", {
+						className: o("text-[8px] leading-none font-semibold", {
+							"text-violet-600 dark:text-violet-300": m === "ssr" || m === "hydration",
+							"text-zinc-500 dark:text-zinc-400": m === "mount" || m === "mixed",
+							"text-transparent": m === "update"
+						}),
+						children: e[m]
+					})]
+				}, n.commitId);
+			})
+		}), /* @__PURE__ */ d("div", {
+			className: "flex items-center gap-x-3 gap-y-0.5 overflow-x-auto px-2 pb-1 text-[9px] text-zinc-400 dark:text-zinc-500",
+			children: n.map((t) => /* @__PURE__ */ f("span", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [/* @__PURE__ */ d("span", {
+					className: "font-semibold text-zinc-500 dark:text-zinc-300",
+					children: e[t.origin]
+				}), t.label]
+			}, t.origin))
+		})]
+	});
+};
+//#endregion
+export { m as default };

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { FlameModel, FlameNode } from '../../helpers';
+import { CommitEntry } from '@plitzi/sdk-shared';
+export type DetailSidebarProps = {
+    node: FlameNode;
+    commit: CommitEntry;
+    model: FlameModel;
+};
+declare const DetailSidebar: ({ node, commit, model }: DetailSidebarProps) => import("react").JSX.Element;
+export default DetailSidebar;

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

@@ -0,0 +1,202 @@
+import { HATCH_STYLE as e, formatMs as t, formatPercent as n, frameColor as r } from "../../helpers.mjs";
+import i from "clsx";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/DetailSidebar/DetailSidebar.tsx
+var c = ({ node: c, commit: l, model: u }) => /* @__PURE__ */ s(a, { children: [
+	/* @__PURE__ */ s("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			/* @__PURE__ */ o("span", {
+				className: i("h-2.5 w-2.5 shrink-0 rounded-sm", r(c)),
+				style: c.state === "hatched" ? e : void 0
+			}),
+			/* @__PURE__ */ o("span", {
+				className: "truncate text-xs font-medium text-zinc-700 dark:text-zinc-100",
+				children: c.name
+			}),
+			!c.visible && /* @__PURE__ */ o("i", {
+				className: "fa-solid fa-eye-slash shrink-0 text-amber-500",
+				title: "Hidden via visibility"
+			})
+		]
+	}),
+	/* @__PURE__ */ o("span", {
+		className: "truncate text-zinc-400 dark:text-zinc-500",
+		children: c.type
+	}),
+	!c.visible && /* @__PURE__ */ o("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__ */ s("span", {
+		className: i("w-fit rounded px-1 py-0.5 text-[9px]", {
+			"bg-emerald-500/15 text-emerald-600 dark:text-emerald-400": c.state === "rendered",
+			"bg-zinc-500/15 text-zinc-500 dark:text-zinc-400": c.state !== "rendered"
+		}),
+		children: [
+			c.state === "rendered" && `rendered · ${c.phase ?? "update"}`,
+			c.state === "bubbled" && "a descendant rendered",
+			c.state === "hatched" && "did not render"
+		]
+	}),
+	c.trigger && /* @__PURE__ */ s("span", {
+		className: "w-fit rounded bg-violet-500/15 px-1 py-0.5 text-[9px] text-violet-600 dark:text-violet-400",
+		title: "A root cause of this commit — no ancestor re-rendered",
+		children: [/* @__PURE__ */ o("i", { className: "fa-solid fa-bolt mr-1" }), "trigger"]
+	}),
+	/* @__PURE__ */ o("div", {
+		className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+		children: "Durations"
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("span", {
+			className: "text-zinc-400 dark:text-zinc-500",
+			children: "Self"
+		}), /* @__PURE__ */ o("span", {
+			className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+			children: t(c.selfDuration)
+		})]
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("span", {
+			className: "text-zinc-400 dark:text-zinc-500",
+			children: "Total (subtree)"
+		}), /* @__PURE__ */ o("span", {
+			className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+			children: t(c.actualDuration)
+		})]
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("span", {
+			className: "text-zinc-400 dark:text-zinc-500",
+			children: "Base"
+		}), /* @__PURE__ */ o("span", {
+			className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+			children: t(c.baseDuration)
+		})]
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("span", {
+			className: "text-zinc-400 dark:text-zinc-500",
+			children: "% of commit"
+		}), /* @__PURE__ */ o("span", {
+			className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+			children: n(c.actualDuration / l.duration)
+		})]
+	}),
+	c.state === "rendered" && /* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("span", {
+			className: "text-zinc-400 dark:text-zinc-500",
+			children: "% of work"
+		}), /* @__PURE__ */ o("span", {
+			className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+			children: n(u.totalSelf > 0 ? c.selfDuration / u.totalSelf : 0)
+		})]
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+		children: ["Commit #", l.commitId]
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("span", {
+			className: "text-zinc-400 dark:text-zinc-500",
+			children: "Committed at"
+		}), /* @__PURE__ */ s("span", {
+			className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+			children: [(l.timestamp / 1e3).toFixed(1), "s"]
+		})]
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("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: t(l.duration)
+		})]
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("span", {
+			className: "text-zinc-400 dark:text-zinc-500",
+			children: "Rendered"
+		}), /* @__PURE__ */ s("span", {
+			className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+			children: [
+				u.renderedCount,
+				" of ",
+				l.elementCount
+			]
+		})]
+	}),
+	/* @__PURE__ */ s("div", {
+		className: "flex justify-between gap-2",
+		children: [/* @__PURE__ */ o("span", {
+			className: "text-zinc-400 dark:text-zinc-500",
+			children: "Triggers"
+		}), /* @__PURE__ */ o("span", {
+			className: "text-zinc-700 tabular-nums dark:text-zinc-200",
+			children: u.triggers.length
+		})]
+	}),
+	c.state === "rendered" && /* @__PURE__ */ s(a, { children: [
+		/* @__PURE__ */ o("div", {
+			className: "mt-1 font-medium tracking-wide text-zinc-400 uppercase dark:text-zinc-500",
+			children: "Why it rendered"
+		}),
+		c.phase === "mount" && /* @__PURE__ */ o("span", {
+			className: "text-zinc-400 italic dark:text-zinc-500",
+			children: "first mount"
+		}),
+		c.phase !== "mount" && c.changedProps === void 0 && /* @__PURE__ */ s("span", {
+			className: "w-fit rounded bg-sky-500/15 px-1 py-0.5 text-[9px] text-sky-600 dark:text-sky-400",
+			children: [/* @__PURE__ */ o("i", { className: "fa-solid fa-microchip mr-1" }), "internal React — own state or a hook (props & store inputs unchanged)"]
+		}),
+		c.phase !== "mount" && c.changedProps?.length === 0 && c.trigger && /* @__PURE__ */ s("span", {
+			className: "w-fit rounded bg-sky-500/15 px-1 py-0.5 text-[9px] text-sky-600 dark:text-sky-400",
+			children: [/* @__PURE__ */ o("i", { className: "fa-solid fa-microchip mr-1" }), "internal — a hook or consumed context changed, not props or store"]
+		}),
+		c.phase !== "mount" && c.changedProps?.length === 0 && !c.trigger && /* @__PURE__ */ s("span", {
+			className: "w-fit rounded bg-amber-500/15 px-1 py-0.5 text-[9px] text-amber-600 dark:text-amber-400",
+			children: [/* @__PURE__ */ o("i", { className: "fa-solid fa-triangle-exclamation mr-1" }), "no input changed — re-rendered by an ancestor"]
+		}),
+		c.changedProps?.map((e) => /* @__PURE__ */ s("div", {
+			className: "flex flex-col gap-0.5 border-l border-zinc-200 pl-1.5 dark:border-zinc-700",
+			children: [/* @__PURE__ */ s("span", {
+				className: "flex flex-wrap items-center gap-1",
+				children: [/* @__PURE__ */ o("span", {
+					className: "font-mono text-[9px] font-medium break-all text-zinc-600 dark:text-zinc-300",
+					children: e.key
+				}), e.ref && /* @__PURE__ */ o("span", {
+					className: "shrink-0 rounded bg-amber-500/15 px-1 text-[8px] text-amber-600 dark:text-amber-400",
+					title: "Reference changed but the content is shallow-equal — a new object/array, likely a missing memo",
+					children: "new ref"
+				})]
+			}), /* @__PURE__ */ s("div", {
+				className: "flex flex-col gap-0.5 font-mono text-[9px] leading-snug",
+				children: [/* @__PURE__ */ s("span", {
+					className: "break-all text-zinc-400 dark:text-zinc-500",
+					children: [/* @__PURE__ */ o("span", {
+						className: "text-rose-400/70 select-none dark:text-rose-400/60",
+						children: "− "
+					}), e.prev]
+				}), /* @__PURE__ */ s("span", {
+					className: "break-all text-zinc-600 dark:text-zinc-300",
+					children: [/* @__PURE__ */ o("span", {
+						className: "text-emerald-500/80 select-none",
+						children: "+ "
+					}), e.next]
+				})]
+			})]
+		}, e.key))
+	] })
+] });
+//#endregion
+export { c as default };

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

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

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

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