@plitzi/sdk-dev-tools 0.37.9 → 0.38.1

package/dist/components/DevToolsPanel/tabs/QaViewer/QaInspectorDetails.mjs

@@ -0,0 +1,135 @@
+import e from "../../../../qa/QaContext.mjs";
+import t from "../../../../qa/overlays/QaContrastBadge.mjs";
+import n from "../../../../qa/overlays/QaSwatch.mjs";
+import { summarize as r } from "../../../../qa/inspect/describe.mjs";
+import i from "./QaProperty.mjs";
+import a from "./QaRuleItem.mjs";
+import { matchedRules as o } from "../../../../qa/inspect/rules.mjs";
+import { use as s, useCallback as c, useMemo as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaInspectorDetails.tsx
+var f = ({ element: f }) => {
+	let { setPinned: p } = s(e), m = l(() => r(f), [f]), h = l(() => o(f), [f]), g = c(() => f.scrollIntoView({
+		block: "center",
+		behavior: "smooth"
+	}), [f]), _ = c(() => p(void 0), [p]);
+	return m ? /* @__PURE__ */ d("div", {
+		className: "flex min-w-0 flex-col gap-2",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ u("span", {
+						className: "min-w-0 truncate font-mono font-semibold text-violet-700 dark:text-violet-300",
+						children: m.name
+					}),
+					/* @__PURE__ */ d("span", {
+						className: "shrink-0 font-mono text-zinc-400",
+						children: [
+							m.width,
+							" × ",
+							m.height
+						]
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						className: "ml-auto shrink-0 rounded px-1.5 py-0.5 hover:bg-zinc-100 dark:hover:bg-zinc-800",
+						title: "Scroll the page to it",
+						onClick: g,
+						children: /* @__PURE__ */ u("i", { className: "fa-solid fa-crosshairs" })
+					}),
+					/* @__PURE__ */ u("button", {
+						type: "button",
+						className: "shrink-0 rounded px-1.5 py-0.5 hover:bg-zinc-100 dark:hover:bg-zinc-800",
+						title: "Let it go",
+						onClick: _,
+						children: /* @__PURE__ */ u("i", { className: "fa-solid fa-xmark" })
+					})
+				]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "grid grid-cols-1 gap-x-4 rounded border border-zinc-200 px-2.5 py-1.5 @lg:grid-cols-2 dark:border-zinc-700",
+				children: [
+					/* @__PURE__ */ d(i, {
+						name: "display",
+						children: [
+							m.display,
+							" · ",
+							m.position
+						]
+					}),
+					/* @__PURE__ */ u(i, {
+						name: "font",
+						children: m.font
+					}),
+					/* @__PURE__ */ u(i, {
+						name: "padding",
+						children: m.padding
+					}),
+					/* @__PURE__ */ d(i, {
+						name: "line / track",
+						children: [
+							m.lineHeight,
+							" · ",
+							m.letterSpacing
+						]
+					}),
+					/* @__PURE__ */ u(i, {
+						name: "margin",
+						children: m.margin
+					}),
+					/* @__PURE__ */ u(i, {
+						name: "colour",
+						children: /* @__PURE__ */ u(n, { colour: m.colour })
+					}),
+					/* @__PURE__ */ d(i, {
+						name: "border",
+						children: [
+							m.border,
+							" · r ",
+							m.radius
+						]
+					}),
+					/* @__PURE__ */ u(i, {
+						name: "background",
+						children: m.background && /* @__PURE__ */ u(n, { colour: m.background })
+					}),
+					/* @__PURE__ */ d(i, {
+						name: "gap · z",
+						children: [
+							m.gap || "—",
+							" · ",
+							m.zIndex
+						]
+					}),
+					/* @__PURE__ */ u(i, {
+						name: "contrast",
+						children: m.contrast && /* @__PURE__ */ u(t, {
+							ratio: m.contrast.ratio,
+							needs: m.contrast.needs
+						})
+					})
+				]
+			}),
+			m.classes.length > 0 && /* @__PURE__ */ u("div", {
+				className: "flex flex-wrap gap-1",
+				children: m.classes.map((e) => /* @__PURE__ */ d("span", {
+					className: "rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-[11px] dark:bg-zinc-800",
+					children: [".", e]
+				}, e))
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ d("span", {
+					className: "mb-1 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+					children: ["CSS that reaches it · ", h.length]
+				}), /* @__PURE__ */ u("div", {
+					className: "overflow-hidden rounded border border-zinc-200 dark:border-zinc-700",
+					children: h.map((e, t) => /* @__PURE__ */ u(a, { rule: e }, `${e.selector}-${String(t)}`))
+				})]
+			})
+		]
+	}) : null;
+};
+//#endregion
+export { f as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaInspectorEmpty.d.ts

@@ -0,0 +1,3 @@
+/** What the inspector side says before anything is picked. */
+declare const QaInspectorEmpty: () => import('react').JSX.Element;
+export default QaInspectorEmpty;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaInspectorEmpty.mjs

@@ -0,0 +1,17 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaInspectorEmpty.tsx
+var n = () => /* @__PURE__ */ t("div", {
+	className: "flex flex-col gap-1.5 rounded border border-dashed border-zinc-200 p-3 text-zinc-500 dark:border-zinc-700 dark:text-zinc-400",
+	children: [/* @__PURE__ */ e("span", {
+		className: "font-medium text-zinc-700 dark:text-zinc-200",
+		children: "Nothing inspected yet"
+	}), /* @__PURE__ */ t("span", { children: [
+		"Turn on ",
+		/* @__PURE__ */ e("b", { children: "Inspect" }),
+		" and point at anything on the page: its box, type, colours and contrast show by the pointer. Click it to keep it here, with the CSS that reaches it. With one kept, hold ",
+		/* @__PURE__ */ e("b", { children: "Alt" }),
+		" over another to measure the distance between them."
+	] })]
+});
+//#endregion
+export { n as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaInspectorPanel.d.ts

@@ -0,0 +1,3 @@
+/** The inspector's side of the tab: the element kept with a click, or how to keep one. */
+declare const QaInspectorPanel: () => import('react').JSX.Element;
+export default QaInspectorPanel;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaInspectorPanel.mjs

@@ -0,0 +1,22 @@
+import e from "../../../../qa/QaContext.mjs";
+import t from "./QaInspectorDetails.mjs";
+import n from "./QaInspectorEmpty.mjs";
+import { use as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaInspectorPanel.tsx
+var o = () => {
+	let { pinned: o, round: s } = r(e), c = o?.isConnected ? o : void 0;
+	return /* @__PURE__ */ a("section", {
+		className: "flex min-w-0 flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
+				children: [/* @__PURE__ */ i("i", { className: "fa-solid fa-magnifying-glass" }), "Inspector"]
+			}),
+			c && /* @__PURE__ */ i(t, { element: c }, s),
+			!c && /* @__PURE__ */ i(n, {})
+		]
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaProperty.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type QaPropertyProps = {
+    name: string;
+    children: ReactNode;
+};
+/** One computed property of the inspected element. */
+declare const QaProperty: ({ name, children }: QaPropertyProps) => import('react').JSX.Element;
+export default QaProperty;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaProperty.mjs

@@ -0,0 +1,14 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaProperty.tsx
+var n = ({ name: n, children: r }) => /* @__PURE__ */ t("div", {
+	className: "grid grid-cols-[88px_minmax(0,1fr)] items-baseline gap-2 py-0.5",
+	children: [/* @__PURE__ */ e("span", {
+		className: "text-zinc-400 dark:text-zinc-500",
+		children: n
+	}), /* @__PURE__ */ e("span", {
+		className: "min-w-0 truncate font-mono text-zinc-800 dark:text-zinc-200",
+		children: r
+	})]
+});
+//#endregion
+export { n as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaRescanButton.d.ts

@@ -0,0 +1,3 @@
+/** Has the checks look again — after opening a menu, say, or switching a tab on the page. */
+declare const QaRescanButton: () => import('react').JSX.Element;
+export default QaRescanButton;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaRescanButton.mjs

@@ -0,0 +1,15 @@
+import e from "../../../../qa/QaContext.mjs";
+import { use as t, useCallback as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaRescanButton.tsx
+var i = () => {
+	let { rescan: i } = t(e), a = n(() => i(), [i]);
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		className: "rounded px-1.5 py-0.5 font-medium normal-case hover:bg-zinc-100 dark:hover:bg-zinc-800",
+		onClick: a,
+		children: "Look again"
+	});
+};
+//#endregion
+export { i as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaRuleItem.d.ts

@@ -0,0 +1,7 @@
+import { MatchedRule } from '../../../../qa/inspect/rules';
+export type QaRuleItemProps = {
+    rule: MatchedRule;
+};
+/** A rule that reaches the element, as written: its selector, its media query, its declarations — and a copy of it. */
+declare const QaRuleItem: ({ rule: { selector, declarations, media } }: QaRuleItemProps) => import('react').JSX.Element;
+export default QaRuleItem;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaRuleItem.mjs

@@ -0,0 +1,38 @@
+import { useCallback as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaRuleItem.tsx
+var i = 1200, a = ({ rule: { selector: a, declarations: o, media: s } }) => {
+	let [c, l] = t(!1), u = c ? "Copied" : "Copy", d = e(() => {
+		navigator.clipboard.writeText(`${a} { ${o} }`).then(() => {
+			l(!0), setTimeout(() => l(!1), i);
+		});
+	}, [a, o]);
+	return /* @__PURE__ */ r("div", {
+		className: "group border-b border-zinc-100 px-2.5 py-1.5 last:border-b-0 dark:border-zinc-800",
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ n("span", {
+					className: "min-w-0 truncate font-mono text-violet-700 dark:text-violet-300",
+					title: a,
+					children: a
+				}),
+				s && /* @__PURE__ */ r("span", {
+					className: "shrink-0 font-mono text-[10px] text-amber-600 dark:text-amber-400",
+					children: ["@media ", s]
+				}),
+				/* @__PURE__ */ n("button", {
+					type: "button",
+					className: "ml-auto shrink-0 rounded px-1 text-[10px] text-zinc-400 opacity-0 group-hover:opacity-100 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
+					onClick: d,
+					children: u
+				})
+			]
+		}), /* @__PURE__ */ n("div", {
+			className: "mt-0.5 font-mono text-[11px] leading-relaxed break-words text-zinc-600 dark:text-zinc-400",
+			children: o
+		})]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaToolChip.d.ts

@@ -0,0 +1,13 @@
+import { QaSwitch } from '../../../../qa/qaSettings';
+export type QaToolChipProps = {
+    setting: QaSwitch;
+    label: string;
+    icon: string;
+    /** What it shows, said on hover. */
+    title: string;
+    /** The one tool the bar leads with. */
+    primary?: boolean;
+};
+/** One tool in the bar, on or off. */
+declare const QaToolChip: ({ setting, label, icon, title, primary }: QaToolChipProps) => import('react').JSX.Element;
+export default QaToolChip;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaToolChip.mjs

@@ -0,0 +1,27 @@
+import e from "../../../../qa/QaContext.mjs";
+import t from "clsx";
+import { use as n, useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaToolChip.tsx
+var o = ({ setting: o, label: s, icon: c, title: l, primary: u = !1 }) => {
+	let { settings: d, setSetting: f } = n(e), p = d[o], m = r(() => f(o, !p), [
+		f,
+		o,
+		p
+	]);
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		"aria-pressed": p,
+		title: l,
+		className: t("flex h-6 shrink-0 cursor-pointer items-center gap-1.5 rounded-md border px-2 font-medium whitespace-nowrap transition-colors", {
+			"border-violet-500 bg-violet-500 text-white": p && u,
+			"border-violet-400/60 bg-violet-500/10 text-violet-700 dark:text-violet-300": p && !u,
+			"border-violet-300 text-violet-700 hover:bg-violet-500/10 dark:border-violet-500/50 dark:text-violet-300": !p && u,
+			"border-zinc-200 text-zinc-600 hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800": !p && !u
+		}),
+		onClick: m,
+		children: [/* @__PURE__ */ i("i", { className: t(c, "text-[10px]") }), s]
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaToolbar.d.ts

@@ -0,0 +1,3 @@
+/** Every tool that draws over the page, in one row that wraps: the inspector first, then layout, motion and colour. */
+declare const QaToolbar: () => import('react').JSX.Element;
+export default QaToolbar;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaToolbar.mjs

@@ -0,0 +1,58 @@
+import e from "./QaDivider.mjs";
+import t from "./QaToolChip.mjs";
+import n from "./QaVisionSelect.mjs";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaToolbar.tsx
+var a = () => /* @__PURE__ */ i("div", {
+	className: "flex shrink-0 flex-wrap items-center gap-1.5 border-b border-zinc-200 px-3 py-2 dark:border-zinc-700",
+	children: [
+		/* @__PURE__ */ r(t, {
+			setting: "inspect",
+			label: "Inspect",
+			icon: "fa-solid fa-arrow-pointer",
+			title: "Point at an element for its box and style; click to keep it here; hold Alt over another to measure. Esc stops.",
+			primary: !0
+		}),
+		/* @__PURE__ */ r(e, {}),
+		/* @__PURE__ */ r(t, {
+			setting: "grid",
+			label: "Grid",
+			icon: "fa-solid fa-table-columns",
+			title: "The page's 12, 8 or 4 columns"
+		}),
+		/* @__PURE__ */ r(t, {
+			setting: "outlines",
+			label: "Outlines",
+			icon: "fa-regular fa-square",
+			title: "Every element's box"
+		}),
+		/* @__PURE__ */ r(t, {
+			setting: "tabOrder",
+			label: "Tab order",
+			icon: "fa-solid fa-arrow-right-to-bracket",
+			title: "The order the Tab key walks the controls in"
+		}),
+		/* @__PURE__ */ r(t, {
+			setting: "viewport",
+			label: "Viewport",
+			icon: "fa-solid fa-ruler-horizontal",
+			title: "The window's size and the breakpoint showing"
+		}),
+		/* @__PURE__ */ r(e, {}),
+		/* @__PURE__ */ r(t, {
+			setting: "paused",
+			label: "Pause",
+			icon: "fa-solid fa-pause",
+			title: "Hold every animation where it is"
+		}),
+		/* @__PURE__ */ r(t, {
+			setting: "reducedMotion",
+			label: "Reduced motion",
+			icon: "fa-solid fa-person-walking",
+			title: "The page as a visitor who asked for less motion gets it"
+		}),
+		/* @__PURE__ */ r(n, {})
+	]
+});
+//#endregion
+export { a as default };

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

@@ -0,0 +1,8 @@
+/**
+ * Tools for checking a build in the browser it will be used in — a pre-production deployment, say — rather than in the
+ * builder: an inspector for any element, what lines things up, motion, colour, and the checks a tester runs on every
+ * page. The bar on top; the checks and the inspector side by side below, one over the other when the panel is narrow.
+ * All of it stays on while the panel is folded away, and in this browser only.
+ */
+declare const QaViewer: () => import('react').JSX.Element;
+export default QaViewer;

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

@@ -0,0 +1,14 @@
+import e from "./QaChecks.mjs";
+import t from "./QaInspectorPanel.mjs";
+import n from "./QaToolbar.mjs";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaViewer.tsx
+var a = () => /* @__PURE__ */ i("div", {
+	className: "@container flex h-full min-h-0 w-full flex-col",
+	children: [/* @__PURE__ */ r(n, {}), /* @__PURE__ */ i("div", {
+		className: "grid min-h-0 grow grid-cols-1 content-start gap-3 overflow-y-auto p-3 @3xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]",
+		children: [/* @__PURE__ */ r(e, {}), /* @__PURE__ */ r(t, {})]
+	})]
+});
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaVisionSelect.d.ts

@@ -0,0 +1,3 @@
+/** The page as somebody who sees it differently does — whether a state still reads without its colour. */
+declare const QaVisionSelect: () => import('react').JSX.Element;
+export default QaVisionSelect;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaVisionSelect.mjs

@@ -0,0 +1,50 @@
+import e from "../../../../qa/QaContext.mjs";
+import t from "clsx";
+import { use as n, useCallback as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaVisionSelect.tsx
+var a = [
+	{
+		mode: "none",
+		label: "Vision: as it is"
+	},
+	{
+		mode: "grayscale",
+		label: "No colour"
+	},
+	{
+		mode: "protanopia",
+		label: "Protanopia (red)"
+	},
+	{
+		mode: "deuteranopia",
+		label: "Deuteranopia (green)"
+	},
+	{
+		mode: "tritanopia",
+		label: "Tritanopia (blue)"
+	},
+	{
+		mode: "blurred",
+		label: "Low vision (blur)"
+	}
+], o = (e) => a.some(({ mode: t }) => t === e), s = () => {
+	let { settings: s, setSetting: c } = n(e), l = r((e) => {
+		o(e.target.value) && c("vision", e.target.value);
+	}, [c]);
+	return /* @__PURE__ */ i("select", {
+		value: s.vision,
+		title: "See the page without one kind of colour, or out of focus",
+		onChange: l,
+		className: t("h-6 shrink-0 rounded-md border bg-white py-0 pr-6 pl-2 text-[11px] leading-[22px] dark:bg-zinc-900", {
+			"border-violet-400/60 text-violet-700 dark:text-violet-300": s.vision !== "none",
+			"border-zinc-200 text-zinc-600 dark:border-zinc-700 dark:text-zinc-300": s.vision === "none"
+		}),
+		children: a.map(({ mode: e, label: t }) => /* @__PURE__ */ i("option", {
+			value: e,
+			children: t
+		}, e))
+	});
+};
+//#endregion
+export { s as default };

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

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

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

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

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

@@ -1,18 +1,18 @@
-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 e from "../../../../highlight/index.mjs";
+import { buildFlameModel as t, commitOrigin as n } from "./helpers.mjs";
+import r from "./components/CommitStrip/CommitStrip.mjs";
+import i from "./components/Flamegraph/Flamegraph.mjs";
+import a from "./components/HotspotsList/HotspotsList.mjs";
+import o from "./components/RankedList/RankedList.mjs";
+import s from "./components/TracingToolbar/TracingToolbar.mjs";
 import c from "@plitzi/plitzi-ui/hooks/useStorage";
 import { useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useCommonStore as g } from "@plitzi/sdk-shared/store";
+import { useCommonStore as m } from "@plitzi/sdk-shared/store";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useTracing as _ } from "@plitzi/sdk-shared/store/tracing";
 //#region src/components/DevToolsPanel/tabs/TracingViewer/TracingViewer.tsx
 var v = () => {
-	let { enabled: v, hydrated: y, commits: b, tree: x, clear: S } = _(), [[C, w]] = g(["schema.flat", "navigation.currentPageId"]), [T, E] = c("plitzi-sdk.dev-tools.tracing.view", "ranked"), [D, O] = c("plitzi-sdk.dev-tools.tracing.persist", !1), [k, A] = c("plitzi-sdk.dev-tools.tracing.sidebar-open", !1), [j, M] = p(), [N, P] = p(), F = f(w);
+	let { enabled: v, hydrated: y, commits: b, tree: x, clear: S } = _(), [[C, w]] = m(["schema.flat", "navigation.currentPageId"]), [T, E] = c("plitzi-sdk.dev-tools.tracing.view", "ranked"), [D, O] = c("plitzi-sdk.dev-tools.tracing.persist", !1), [k, A] = c("plitzi-sdk.dev-tools.tracing.sidebar-open", !1), [j, M] = p(), [N, P] = p(), F = f(w);
 	u(() => {
 		F.current !== w && (F.current = w, D || (S(), M(void 0), P(void 0)));
 	}, [
@@ -37,14 +37,14 @@ var v = () => {
 		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 = d(() => B && !V ? e(B, x, C) : void 0, [
+	}, [L, j]), B = z === -1 ? void 0 : L[z], V = B?.commitId === 0, H = d(() => B && !V ? t(B, x, C) : void 0, [
 		B,
 		V,
 		x,
 		C
 	]), U = d(() => H?.nodes.find((e) => e.id === N) ?? H?.nodes.find((e) => e.elementId === N), [H, N]);
-	s(U?.elementId ?? N);
-	let W = d(() => B ? t(B, y, B.commitId === R) : "update", [
+	e(U?.elementId ?? N);
+	let W = d(() => B ? n(B, y, B.commitId === R) : "update", [
 		B,
 		y,
 		R
@@ -58,11 +58,11 @@ var v = () => {
 	}, [L, z]), Y = l((e) => {
 		(e.key === "ArrowLeft" || e.key === "ArrowRight") && (e.preventDefault(), J(e.key === "ArrowLeft" ? -1 : 1));
 	}, [J]);
-	return v ? B ? /* @__PURE__ */ h("div", {
+	return v ? B ? /* @__PURE__ */ g("div", {
 		className: "flex h-full min-h-0 w-full flex-col",
 		onKeyDown: Y,
 		children: [
-			/* @__PURE__ */ m(o, {
+			/* @__PURE__ */ h(s, {
 				view: T,
 				persist: D,
 				commitCount: b.length,
@@ -70,41 +70,41 @@ var v = () => {
 				onViewChange: E,
 				onPersistChange: O
 			}),
-			T !== "hotspots" && /* @__PURE__ */ m(n, {
+			T !== "hotspots" && /* @__PURE__ */ h(r, {
 				commits: L,
 				selectedIndex: z,
 				hydrated: y,
 				onSelect: G
 			}),
-			T !== "hotspots" && V && /* @__PURE__ */ h("div", {
+			T !== "hotspots" && V && /* @__PURE__ */ g("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__ */ m("i", { className: "fa-solid fa-server text-3xl opacity-30" }),
-					/* @__PURE__ */ m("span", {
+					/* @__PURE__ */ h("i", { className: "fa-solid fa-server text-3xl opacity-30" }),
+					/* @__PURE__ */ h("span", {
 						className: "text-sm font-medium text-zinc-600 dark:text-zinc-300",
 						children: "Server render (SSR)"
 					}),
-					/* @__PURE__ */ h("span", {
+					/* @__PURE__ */ g("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#",
 							R,
 							" ",
 							"is the client ",
-							/* @__PURE__ */ m("span", {
+							/* @__PURE__ */ h("span", {
 								className: "font-medium text-violet-600 dark:text-violet-400",
 								children: "hydration"
 							}),
 							" of this tree."
 						]
 					}),
-					/* @__PURE__ */ h("span", {
+					/* @__PURE__ */ g("span", {
 						className: "text-[11px] opacity-70",
 						children: [B.elementCount, " elements in the rendered tree"]
 					})
 				]
 			}),
-			T === "ranked" && H && /* @__PURE__ */ m(a, {
+			T === "ranked" && H && /* @__PURE__ */ h(o, {
 				commit: B,
 				model: H,
 				active: U,
@@ -113,7 +113,7 @@ var v = () => {
 				onSelectElement: K,
 				onToggleSidebar: q
 			}),
-			T === "flamegraph" && H && /* @__PURE__ */ m(r, {
+			T === "flamegraph" && H && /* @__PURE__ */ h(i, {
 				commit: B,
 				model: H,
 				active: U,
@@ -122,7 +122,7 @@ var v = () => {
 				onSelectElement: K,
 				onToggleSidebar: q
 			}),
-			T === "hotspots" && /* @__PURE__ */ m(i, {
+			T === "hotspots" && /* @__PURE__ */ h(a, {
 				commits: b,
 				tree: x,
 				flat: C,
@@ -130,25 +130,25 @@ var v = () => {
 				onSelectElement: K
 			})
 		]
-	}) : /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ g("div", {
 		className: "flex h-full min-h-0 w-full flex-col",
-		children: [/* @__PURE__ */ m(o, {
+		children: [/* @__PURE__ */ h(s, {
 			view: T,
 			persist: D,
 			commitCount: b.length,
 			onClear: S,
 			onViewChange: E,
 			onPersistChange: O
-		}), /* @__PURE__ */ h("div", {
+		}), /* @__PURE__ */ g("div", {
 			className: "flex grow flex-col items-center justify-center gap-2 text-zinc-400 dark:text-zinc-500",
-			children: [/* @__PURE__ */ m("i", { className: "fa-solid fa-chart-column text-3xl opacity-20" }), /* @__PURE__ */ m("span", {
+			children: [/* @__PURE__ */ h("i", { className: "fa-solid fa-chart-column text-3xl opacity-20" }), /* @__PURE__ */ h("span", {
 				className: "text-xs",
 				children: "No commits recorded yet — interact with the page"
 			})]
 		})]
-	}) : /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ g("div", {
 		className: "flex h-full w-full flex-col items-center justify-center gap-2 text-zinc-400 dark:text-zinc-500",
-		children: [/* @__PURE__ */ m("i", { className: "fa-solid fa-gauge-high text-3xl opacity-20" }), /* @__PURE__ */ m("span", {
+		children: [/* @__PURE__ */ h("i", { className: "fa-solid fa-gauge-high text-3xl opacity-20" }), /* @__PURE__ */ h("span", {
 			className: "text-xs",
 			children: "Enable debugMode to record render tracing"
 		})]