@plitzi/sdk-dev-tools 0.32.0 → 0.32.2

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

@@ -0,0 +1,157 @@
+import { COMMIT_ORIGIN_LABEL as e, durationColor as t, formatMs as n, formatPercent as r, rowDuration as i } from "../../helpers.mjs";
+import a from "../CommitCause/CommitCause.mjs";
+import o from "../DetailSidebar/DetailSidebar.mjs";
+import s from "../DurationLegend/DurationLegend.mjs";
+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 "@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] = 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)));
+		T(A[n].id);
+	}, [
+		A,
+		M,
+		T
+	]);
+	return /* @__PURE__ */ y("div", {
+		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
+		children: [
+			/* @__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__ */ y("span", {
+						className: "font-medium text-zinc-700 dark:text-zinc-200",
+						children: ["Commit #", b.commitId]
+					}),
+					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__ */ y("span", { children: [n(b.duration), " total"] }),
+					/* @__PURE__ */ y("span", {
+						title: "Elements that re-rendered, of all in this commit's subtree",
+						children: [
+							"· ",
+							x.renderedCount,
+							" of ",
+							b.elementCount,
+							" rendered"
+						]
+					}),
+					/* @__PURE__ */ v(a, {
+						commit: b,
+						model: x,
+						active: S,
+						onSelectElement: T
+					}),
+					/* @__PURE__ */ v(d, {
+						className: "ml-auto",
+						metric: D,
+						onChange: O
+					}),
+					/* @__PURE__ */ v(u, {
+						open: w,
+						onToggle: E
+					})
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex min-h-0 flex-1 overflow-hidden",
+				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__ */ 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), 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): ${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__ */ y("span", {
+									className: "flex w-40 shrink-0 flex-col",
+									children: [/* @__PURE__ */ y("span", {
+										className: "flex items-center gap-1 text-zinc-700 dark:text-zinc-200",
+										children: [
+											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__ */ 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__ */ v("i", {
+												className: "fa-solid fa-eye-slash shrink-0 text-[9px] text-amber-500",
+												title: "Hidden (visibility)"
+											}),
+											/* @__PURE__ */ v("span", {
+												className: "truncate",
+												children: e.name
+											})
+										]
+									}), /* @__PURE__ */ v("span", {
+										className: "truncate text-[9px] text-zinc-400 dark:text-zinc-500",
+										children: m
+									})]
+								}),
+								/* @__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__ */ v("div", {
+									className: "h-2 flex-1 overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-800",
+									children: /* @__PURE__ */ v("div", {
+										style: { width: `${Math.max(2, Math.round(a / j * 100))}%` },
+										className: p("h-full rounded-sm", t(a))
+									})
+								}),
+								/* @__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__ */ 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__ */ v(c, { children: S ? /* @__PURE__ */ v(o, {
+					node: S,
+					commit: b,
+					model: x
+				}) : /* @__PURE__ */ v(l, {}) })]
+			}),
+			/* @__PURE__ */ v(s, {})
+		]
+	});
+};
+//#endregion
+export { b as default };

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/SidebarShell/SidebarEmpty.tsx
+var n = () => /* @__PURE__ */ t("div", {
+	className: "flex h-full flex-col items-center justify-center gap-2 px-2 text-center text-zinc-400 dark:text-zinc-500",
+	children: [/* @__PURE__ */ e("i", { className: "fa-solid fa-arrow-pointer text-xl opacity-30" }), /* @__PURE__ */ e("span", {
+		className: "text-[10px] leading-relaxed",
+		children: "Select an element to inspect its timing and why it rendered"
+	})]
+});
+//#endregion
+export { n as default };

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type SidebarShellProps = {
+    children: ReactNode;
+};
+declare const SidebarShell: ({ children }: SidebarShellProps) => import("react").JSX.Element;
+export default SidebarShell;

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

@@ -0,0 +1,26 @@
+import e from "@plitzi/plitzi-ui/ContainerResizable";
+import t from "@plitzi/plitzi-ui/hooks/useStorage";
+import { useCallback as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/SidebarShell/SidebarShell.tsx
+var i = 180, a = 480, o = 224, s = ({ children: s }) => {
+	let [c, l] = t("plitzi-sdk.dev-tools.tracing.sidebar-width", o);
+	return /* @__PURE__ */ r(e, {
+		className: "shrink-0 border-l border-zinc-200 dark:border-zinc-800",
+		resizeHandles: ["w"],
+		axis: "x",
+		autoGrow: !1,
+		width: c,
+		minConstraintsX: i,
+		maxConstraintsX: a,
+		onChange: n((e) => {
+			Number.isFinite(e) && l(e);
+		}, [l]),
+		children: /* @__PURE__ */ r("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
+		})
+	});
+};
+//#endregion
+export { s as default };

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

@@ -0,0 +1,2 @@
+export { default } from './SidebarShell';
+export { default as SidebarEmpty } from './SidebarEmpty';

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

@@ -0,0 +1,3 @@
+import e from "./SidebarShell.mjs";
+import t from "./SidebarEmpty.mjs";
+export { t as SidebarEmpty, e as default };

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

@@ -0,0 +1,7 @@
+export type SidebarToggleProps = {
+    open: boolean;
+    onToggle: () => void;
+    className?: string;
+};
+declare const SidebarToggle: ({ open, onToggle, className }: SidebarToggleProps) => import("react").JSX.Element;
+export default SidebarToggle;

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

@@ -0,0 +1,12 @@
+import e from "clsx";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/SidebarToggle/SidebarToggle.tsx
+var n = ({ open: n, onToggle: r, className: i }) => /* @__PURE__ */ t("button", {
+	onClick: r,
+	title: n ? "Hide detail panel" : "Show detail panel",
+	"aria-pressed": n,
+	className: e("flex h-4 w-4 items-center justify-center rounded text-[10px]", n ? "bg-violet-500/15 text-violet-600 dark:text-violet-300" : "text-zinc-400 hover:bg-zinc-500/10 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300", i),
+	children: /* @__PURE__ */ t("i", { className: "fa-solid fa-circle-info" })
+});
+//#endregion
+export { n as default };

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { TracingView } from '../../helpers';
+export type TracingToolbarProps = {
+    view: TracingView;
+    persist: boolean;
+    commitCount: number;
+    onClear: () => void;
+    onViewChange: (view: TracingView) => void;
+    onPersistChange: (persist: boolean) => void;
+};
+declare const TracingToolbar: ({ view, persist, commitCount, onClear, onViewChange, onPersistChange }: TracingToolbarProps) => import("react").JSX.Element;
+export default TracingToolbar;

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

@@ -0,0 +1,66 @@
+import e from "clsx";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/components/TracingToolbar/TracingToolbar.tsx
+var i = [
+	{
+		id: "ranked",
+		label: "Ranked",
+		icon: "fa-solid fa-ranking-star"
+	},
+	{
+		id: "flamegraph",
+		label: "Flamegraph",
+		icon: "fa-solid fa-fire"
+	},
+	{
+		id: "hotspots",
+		label: "Hotspots",
+		icon: "fa-solid fa-temperature-three-quarters"
+	}
+], a = ({ view: a, persist: o, commitCount: s, onClear: c, onViewChange: l, onPersistChange: u }) => {
+	let d = t((e) => () => l(e), [l]), f = t(() => u(!o), [o, u]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex shrink-0 items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-2 py-1.5 dark:border-zinc-800 dark:bg-zinc-900",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex items-stretch gap-1",
+			children: i.map((t) => {
+				let i = a === t.id;
+				return /* @__PURE__ */ r("button", {
+					onClick: d(t.id),
+					"aria-pressed": i,
+					className: e("flex h-6 items-center gap-1 rounded px-2 text-xs font-medium transition-colors", {
+						"bg-violet-500 text-white": i,
+						"text-zinc-600 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700": !i
+					}),
+					children: [/* @__PURE__ */ n("i", { className: t.icon }), t.label]
+				}, t.id);
+			})
+		}), /* @__PURE__ */ r("div", {
+			className: "ml-auto flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ r("span", {
+					className: "text-[10px] text-zinc-400 dark:text-zinc-500",
+					children: [s, " commits"]
+				}),
+				/* @__PURE__ */ r("button", {
+					onClick: f,
+					"aria-pressed": o,
+					title: "Keep the recorded commits when navigating to another page",
+					className: e("flex h-6 items-center gap-1 rounded px-2 text-xs font-medium transition-colors", {
+						"bg-violet-500 text-white": o,
+						"text-zinc-600 hover:bg-zinc-200 dark:text-zinc-300 dark:hover:bg-zinc-700": !o
+					}),
+					children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-thumbtack" }), "Persist"]
+				}),
+				/* @__PURE__ */ r("button", {
+					onClick: c,
+					className: "flex h-6 items-center gap-1 rounded px-2 text-xs font-medium text-zinc-600 hover:bg-zinc-200 dark:text-zinc-300 dark:hover:bg-zinc-700",
+					children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-trash" }), "Clear"]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { a as default };

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

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

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

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

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

@@ -0,0 +1,86 @@
+import { CommitEntry, Element, PropChange, RenderPhase, TracingTree } from '@plitzi/sdk-shared';
+import { CSSProperties } from 'react';
+export type TracingView = 'ranked' | 'flamegraph' | 'hotspots';
+export type DurationMetric = 'self' | 'total';
+type RenderState = 'rendered' | 'bubbled' | 'hatched';
+export type FlameNode = {
+    id: string;
+    name: string;
+    type: string;
+    state: RenderState;
+    visible: boolean;
+    trigger: boolean;
+    phase?: RenderPhase;
+    actualDuration: number;
+    baseDuration: number;
+    selfDuration: number;
+    depth: number;
+    parentId?: string;
+    changedProps?: PropChange[];
+    x: number;
+    width: number;
+};
+export type FlameModel = {
+    nodes: FlameNode[];
+    maxDepth: number;
+    totalSelf: number;
+    renderedCount: number;
+    triggers: string[];
+};
+export type HotspotRow = {
+    id: string;
+    name: string;
+    type: string;
+    renders: number;
+    mounts: number;
+    totalSelf: number;
+    maxSelf: number;
+    avgSelf: number;
+    lastSelf: number;
+};
+export type CommitOrigin = 'ssr' | 'hydration' | 'mount' | 'mixed' | 'update';
+export declare const SSR_COMMIT_ID = 0;
+export declare const commitOrigin: (commit: CommitEntry, hydrated: boolean, isFirstReal: boolean) => CommitOrigin;
+export declare const COMMIT_ORIGIN_LABEL: Record<CommitOrigin, string>;
+export declare const COMMIT_ORIGIN_BADGE: Record<CommitOrigin, string>;
+export declare const COMMIT_ORIGIN_LEGEND: readonly [{
+    readonly origin: "ssr";
+    readonly label: "SSR";
+}, {
+    readonly origin: "hydration";
+    readonly label: "Hydration";
+}, {
+    readonly origin: "mount";
+    readonly label: "Mount";
+}, {
+    readonly origin: "mixed";
+    readonly label: "Mount+update";
+}, {
+    readonly origin: "update";
+    readonly label: "Update";
+}];
+export declare const formatMs: (ms: number) => string;
+export declare const formatPercent: (ratio: number) => string;
+export declare const durationColor: (ms: number) => string;
+export declare const DURATION_LEGEND: readonly [{
+    readonly color: "bg-sky-500";
+    readonly label: "<8ms";
+}, {
+    readonly color: "bg-emerald-500";
+    readonly label: "8–16ms";
+}, {
+    readonly color: "bg-amber-500";
+    readonly label: "16–50ms";
+}, {
+    readonly color: "bg-red-500";
+    readonly label: "≥50ms";
+}];
+export declare const BUBBLED_COLOR = "bg-zinc-300 dark:bg-zinc-700";
+export declare const HATCH_STYLE: CSSProperties;
+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;
+export declare const buildHotspots: (commits: CommitEntry[], tree: TracingTree, flat: Record<string, Element> | undefined) => HotspotRow[];
+export {};

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

@@ -0,0 +1,175 @@
+import { get as e } from "@plitzi/plitzi-ui/helpers";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/helpers.ts
+var t = (e) => {
+	let t = 0, n = 0;
+	for (let r of e.elements) r.phase === "mount" ? t += 1 : n += 1;
+	return t > 0 && n === 0 ? "mount" : n > 0 && t === 0 ? "update" : "mixed";
+}, n = (e, n, r) => {
+	if (e.commitId === 0) return "ssr";
+	let i = t(e);
+	return i === "mount" ? n && r ? "hydration" : "mount" : i;
+}, r = {
+	ssr: "SSR render (server)",
+	hydration: "Hydration (SSR)",
+	mount: "Mount",
+	mixed: "Mount + update",
+	update: "Update"
+}, i = {
+	ssr: "S",
+	hydration: "H",
+	mount: "M",
+	mixed: "±",
+	update: "·"
+}, a = [
+	{
+		origin: "ssr",
+		label: "SSR"
+	},
+	{
+		origin: "hydration",
+		label: "Hydration"
+	},
+	{
+		origin: "mount",
+		label: "Mount"
+	},
+	{
+		origin: "mixed",
+		label: "Mount+update"
+	},
+	{
+		origin: "update",
+		label: "Update"
+	}
+], o = (e) => e < .1 ? "<0.1ms" : `${e.toFixed(1)}ms`, s = (e) => `${Math.round(e * 100)}%`, c = (e) => e >= 50 ? "bg-red-500" : e >= 16 ? "bg-amber-500" : e >= 8 ? "bg-emerald-500" : "bg-sky-500", l = [
+	{
+		color: "bg-sky-500",
+		label: "<8ms"
+	},
+	{
+		color: "bg-emerald-500",
+		label: "8–16ms"
+	},
+	{
+		color: "bg-amber-500",
+		label: "16–50ms"
+	},
+	{
+		color: "bg-red-500",
+		label: "≥50ms"
+	}
+], u = "bg-zinc-300 dark:bg-zinc-700", d = { backgroundImage: "repeating-linear-gradient(45deg, rgba(113,113,122,0.22) 0, rgba(113,113,122,0.22) 2px, transparent 2px, transparent 5px)" }, f = (e) => e.state === "rendered" ? c(e.selfDuration) : e.state === "bubbled" ? u : "bg-transparent", p = (e) => e.state === "bubbled" ? "text-zinc-600 dark:text-zinc-300" : e.state === "hatched" ? "text-zinc-400 dark:text-zinc-600" : c(e.selfDuration) === "bg-amber-500" ? "text-stone-900" : "text-white", m = (e, t) => {
+	let n = t?.[e];
+	if (!n) return e;
+	let { label: r, type: i } = n.definition;
+	return r || i || e;
+}, h = (e, t) => t?.[e]?.definition.type ?? "unknown", g = (t, n) => {
+	let r = e(n?.[t], "definition.initialState.visibility", !0);
+	return r !== !1 && r !== "false";
+}, _ = (e, t) => t === "self" ? e.selfDuration : e.actualDuration, v = .01, y = 1e-6, b = (e, t) => {
+	let n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+	for (let e of Object.keys(t)) n.set(e, t[e].parentId), r.set(e, t[e].baseDuration);
+	let i = new Map(e.elements.map((e) => [e.id, e])), a = /* @__PURE__ */ new Map();
+	for (let [e, t] of n) if (t !== void 0 && n.has(t)) {
+		let n = a.get(t);
+		n ? n.push(e) : a.set(t, [e]);
+	}
+	let o = /* @__PURE__ */ new Set();
+	for (let e of i.keys()) {
+		let t = e, r = n.get(e);
+		for (; r !== void 0 && n.has(r);) t = r, r = n.get(r);
+		o.add(t);
+	}
+	let s = (e) => {
+		let t = [], n = [...a.get(e) ?? []];
+		for (; n.length > 0;) {
+			let e = n.pop();
+			if (e === void 0) break;
+			i.has(e) ? t.push(e) : n.push(...a.get(e) ?? []);
+		}
+		return t;
+	}, c = (e) => {
+		let t = i.get(e);
+		if (!t) return 0;
+		let n = s(e).reduce((e, t) => e + (i.get(t)?.actualDuration ?? 0), 0);
+		return Math.max(0, t.actualDuration - n);
+	};
+	return {
+		rendered: i,
+		children: a,
+		base: r,
+		roots: [...o],
+		selfOf: c
+	};
+}, x = (e, t, n) => {
+	let { rendered: r, children: i, base: a, roots: o, selfOf: s } = b(e, t), c = (e) => {
+		let t = a.get(e) ?? 0;
+		if (t > 0) return t;
+		let n = r.get(e)?.actualDuration ?? 0;
+		return n > 0 ? n : v;
+	}, l = [], u = [], d = 0, f = 0, p = 0, _ = (e, t, o, b, x, S) => {
+		let C = r.get(e), w = s(e), T = C ? w > y ? "rendered" : "bubbled" : "hatched", E = T === "rendered" && !S;
+		T === "rendered" && (f += w, p += 1), E && u.push(e), d = Math.max(d, x), l.push({
+			id: e,
+			name: m(e, n),
+			type: h(e, n),
+			state: T,
+			visible: g(e, n),
+			trigger: E,
+			phase: C?.phase,
+			actualDuration: C?.actualDuration ?? 0,
+			baseDuration: a.get(e) ?? C?.baseDuration ?? 0,
+			selfDuration: w,
+			depth: x,
+			parentId: t,
+			changedProps: C?.changedProps,
+			x: o,
+			width: b
+		});
+		let D = i.get(e) ?? [], O = D.map(c), k = O.reduce((e, t) => e + t, 0), A = Math.max(c(e), k) || 1, j = o;
+		D.forEach((t, n) => {
+			let r = (O[n] || v) / A * b;
+			_(t, e, j, r, x + 1, S || T === "rendered"), j += r;
+		});
+	}, x = o.map(c), S = x.reduce((e, t) => e + t, 0) || 1, C = 0;
+	return o.forEach((e, t) => {
+		let n = (x[t] || v) / S;
+		_(e, void 0, C, n, 0, !1), C += n;
+	}), {
+		nodes: l,
+		maxDepth: d,
+		totalSelf: f,
+		renderedCount: p,
+		triggers: u
+	};
+}, S = (e, t, n) => {
+	let r = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let { selfOf: e } = b(n, t);
+		for (let t of n.elements) {
+			let n = e(t.id);
+			if (n <= y) continue;
+			let i = r.get(t.id) ?? {
+				renders: 0,
+				mounts: 0,
+				totalSelf: 0,
+				maxSelf: 0,
+				lastSelf: 0
+			};
+			i.renders += 1, i.mounts += +(t.phase === "mount"), i.totalSelf += n, i.maxSelf = Math.max(i.maxSelf, n), i.lastSelf = n, r.set(t.id, i);
+		}
+	}
+	return [...r.entries()].map(([e, t]) => ({
+		id: e,
+		name: m(e, n),
+		type: h(e, n),
+		renders: t.renders,
+		mounts: t.mounts,
+		totalSelf: t.totalSelf,
+		maxSelf: t.maxSelf,
+		avgSelf: t.totalSelf / t.renders,
+		lastSelf: t.lastSelf
+	}));
+};
+//#endregion
+export { u as BUBBLED_COLOR, i as COMMIT_ORIGIN_BADGE, r as COMMIT_ORIGIN_LABEL, a as COMMIT_ORIGIN_LEGEND, l as DURATION_LEGEND, d as HATCH_STYLE, x as buildFlameModel, S as buildHotspots, n as commitOrigin, c as durationColor, g as elementVisible, o as formatMs, s as formatPercent, f as frameColor, p as frameTextColor, _ as rowDuration };

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

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

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

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

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

@@ -0,0 +1,2 @@
+declare const useHighlightElement: (id: string | undefined) => void;
+export default useHighlightElement;

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

@@ -0,0 +1,11 @@
+import { useEffect as e } from "react";
+//#region src/components/DevToolsPanel/tabs/TracingViewer/useHighlightElement.ts
+var t = (t) => {
+	e(() => {
+		if (typeof document > "u" || !t) return;
+		let e = document.querySelectorAll(`[data-id="${t}"]`);
+		return e.forEach((e) => e.classList.add("devtools-element-hovered")), () => e.forEach((e) => e.classList.remove("devtools-element-hovered"));
+	}, [t]);
+};
+//#endregion
+export { t as default };

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariableValue.d.ts

@@ -4,5 +4,5 @@ export type VariableValueProps = {
     preffix?: string;
     value?: string;
 };
-declare const VariableValue: ({ className, type, preffix, value }: VariableValueProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableValue: ({ className, type, preffix, value }: VariableValueProps) => import("react").JSX.Element;
 export default VariableValue;

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesList.d.ts

@@ -3,5 +3,5 @@ export type VariablesListProps = {
     variables?: SchemaVariable[];
     variablesParsed?: Record<string, string>;
 };
-declare const VariablesList: ({ variables, variablesParsed }: VariablesListProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariablesList: ({ variables, variablesParsed }: VariablesListProps) => import("react").JSX.Element;
 export default VariablesList;

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesListItem.d.ts

@@ -4,5 +4,5 @@ export type VariablesListItemProps = {
     type?: string;
     value?: StyleVariableValue;
 };
-declare const VariablesListItem: ({ name, type, value }: VariablesListItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariablesListItem: ({ name, type, value }: VariablesListItemProps) => import("react").JSX.Element;
 export default VariablesListItem;

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesStyleList.d.ts

@@ -2,5 +2,5 @@ import { StyleVariables } from '@plitzi/sdk-shared';
 export type VariablesListProps = {
     variables?: Partial<StyleVariables>;
 };
-declare const VariablesStyleList: ({ variables }: VariablesListProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariablesStyleList: ({ variables }: VariablesListProps) => import("react").JSX.Element;
 export default VariablesStyleList;