@qwik.dev/devtools 0.2.6 → 0.2.7

package/dist/ui/features/Performance/Performance.qwik.mjs

@@ -2,18 +2,68 @@ import { computeEventRows, computePerfViewModel } from "./computePerfViewModel.q
 import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, isBrowser, useComputedQrl, useSignal, useTaskQrl } from "@qwik.dev/core";
 import { Fragment } from "@qwik.dev/core/jsx-runtime";
 //#region src/features/Performance/Performance.tsx
-var _hf0 = (p0) => p0.value.overview.slowestComponent?.componentName || "-";
-var _hf1 = (p0) => p0.value.overview.totalCalls;
-var _hf2 = (p0) => p0.value.components.length;
-var _hf3 = (p0) => typeof p0.ssr?.ssrCount === "number" ? p0.ssr.ssrCount : "-";
-var _hf4 = (p0) => p0.value.componentName;
-var _hf5 = (p0) => p0.value.calls;
+var _hf0 = (p0) => p0?.componentName || "-";
+var _hf1 = (p0) => typeof p0.ssr?.ssrCount === "number" ? p0.ssr.ssrCount : "-";
+var _hf2 = (p0) => p0.row.eventName;
+var _hf3 = (p0) => p0.row.calls;
+var _hf4 = (p0) => p0.component.componentName;
+var _hf5 = (p0) => p0.component.calls;
+var _hf6 = (p0) => p0.value.overview;
+var _hf7 = (p0) => p0.value.components.length;
+var _hf8 = (p0, p1) => p1.value === p0.componentName;
 function formatMs(ms) {
 	if (!Number.isFinite(ms)) return "-";
 	if (ms >= 1e3) return `${(ms / 1e3).toFixed(2)}s`;
 	if (ms >= 10) return `${ms.toFixed(0)}ms`;
 	return `${ms.toFixed(2)}ms`;
 }
+/** Single stat card shown in the overview row. */ var StatCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex-1" }, [
+	/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs font-medium" }, _wrapProp(props, "label"), 1, null),
+	/* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-3xl font-semibold" }, _wrapProp(props), 1, null),
+	props.subtitle && /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, _wrapProp(props, "subtitle"), 1, "qe_0")
+], 1, null), 1, "qe_1"), "StatCard_component_mWodOf0kFyU"));
+/** Top overview row of four stat cards. */ var PerformanceOverview = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+	const { overview } = props;
+	const slowest = overview.slowestComponent;
+	return /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-5 md:grid-cols-4" }, [
+		/* @__PURE__ */ _jsxSorted(StatCard, { value: formatMs(overview.totalRenderTime) }, { label: "TOTAL RENDER TIME" }, null, 3, "qe_2"),
+		/* @__PURE__ */ _jsxSorted(StatCard, { subtitle: slowest ? `${formatMs(slowest.avgTime)} avg` : "-" }, {
+			label: "SLOWEST COMPONENT",
+			value: _fnSignal(_hf0, [slowest])
+		}, null, 3, "qe_3"),
+		/* @__PURE__ */ _jsxSorted(StatCard, { value: formatMs(overview.avgTime) }, { label: "AVG TIME" }, null, 3, "qe_4"),
+		/* @__PURE__ */ _jsxSorted(StatCard, { value: String(overview.totalCalls) }, { label: "TOTAL CALLS" }, null, 3, "qe_5")
+	], 1, "qe_6");
+}, "PerformanceOverview_component_PccfcJbBcQM"));
+/** A single component card in the left-hand list. */ var ComponentCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+	const { component: c, selected } = props;
+	return /* @__PURE__ */ _jsxSorted("button", {
+		class: ["border-border bg-card-item-bg hover:bg-card-item-hover-bg w-full rounded-xl border p-4 text-left transition-all duration-200 hover:-translate-y-0.5", selected ? "ring-primary-active ring-2" : ""].join(" "),
+		"q-e:click": props.onClick$
+	}, null, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex items-start justify-between gap-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "min-w-0 flex-1" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate text-base font-semibold" }, _wrapProp(c, "componentName"), 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, ["Avg: ", formatMs(c.avgTime)], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "shrink-0 text-right" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-primary text-lg font-semibold" }, formatMs(c.totalTime), 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, ["SSR: ", _fnSignal(_hf1, [c])], 1, null)], 1, null)], 1, null), 0, c.componentName);
+}, "ComponentCard_component_shbcW80ev2U"));
+/** Single row inside the hook-details table. */ var HookRow = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-3 px-3 py-2 text-sm" }, [
+	/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate" }, _fnSignal(_hf2, [props]), 1, null),
+	/* @__PURE__ */ _jsxSorted("div", null, { class: "text-right" }, formatMs(props.row.time), 1, null),
+	/* @__PURE__ */ _jsxSorted("div", null, { class: "text-right" }, _fnSignal(_hf3, [props]), 1, null)
+], 1, "qe_7"), "HookRow_component_rMs9Cl7A50U"));
+/** Right-hand panel showing hook-level details for a selected component. */ var HookDetailsPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+	const rows = computeEventRows(props.component.csrItems);
+	return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "min-w-0" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate text-base font-semibold" }, [_fnSignal(_hf4, [props]), " Hook Details"], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, [
+		"Total: ",
+		formatMs(props.component.totalTime),
+		" • ",
+		_fnSignal(_hf5, [props]),
+		" calls"
+	], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("button", { "q-e:click": props.onClose$ }, {
+		"aria-label": "close",
+		class: "text-muted-foreground hover:text-foreground rounded p-2 transition-colors"
+	}, "✕", 2, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "min-h-0 flex-1 overflow-y-auto p-4" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg rounded-lg border" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border grid grid-cols-3 border-b px-3 py-2 text-xs font-medium" }, [
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground" }, "HOOK NAME", 3, null),
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-right" }, "TIME", 3, null),
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-right" }, "CALLS", 3, null)
+	], 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "divide-y divide-glass-border" }, [rows.map((row) => /* @__PURE__ */ _jsxSorted(HookRow, { row }, null, null, 3, row.eventName)), rows.length === 0 && /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground px-3 py-4 text-center text-sm" }, "No CSR records for this component.", 3, "qe_8")], 1, null)], 1, null), 1, null)], 1, "qe_9");
+}, "HookDetailsPanel_component_SLSFgmtRaew"));
 var Performance = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
 	const perf = useSignal(null);
 	const selectedComponent = useSignal(null);
@@ -33,7 +83,7 @@ var Performance = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() =>
 		const selectedComponent = _captures[0], vm = _captures[1];
 		const name = selectedComponent.value;
 		if (!name) return null;
-		return vm.value.components.find((c) => c.componentName === name) || null;
+		return vm.value.components.find((c) => c.componentName === name) ?? null;
 	}, "Performance_component_selectedVm_useComputed_nZ4k4WZsvQ0", [selectedComponent, vm]));
 	const onSelect = /* @__PURE__ */ inlinedQrl((name) => {
 		const selectedComponent = _captures[0];
@@ -43,53 +93,26 @@ var Performance = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() =>
 		const selectedComponent = _captures[0];
 		selectedComponent.value = null;
 	}, "Performance_component_clearSelect_DiCJxQzE8DE", [selectedComponent]);
-	return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-hidden" }, !perf.value?.ssr?.length && !perf.value?.csr?.length ? /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg flex h-full items-center justify-center rounded-xl border p-8" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-center text-sm" }, ["No performance data found.", /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-xs" }, "Ensure instrumentation is enabled and interact with the app, then reopen this tab.", 3, null)], 3, null), 3, "qe_0") : /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full min-h-0 flex-col gap-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-5 md:grid-cols-4" }, [
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex-1" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs font-medium" }, "TOTAL RENDER TIME", 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-3xl font-semibold" }, formatMs(vm.value.overview.totalRenderTime), 1, null)], 1, null), 1, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex-1" }, [
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs font-medium" }, "SLOWEST COMPONENT", 3, null),
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-lg font-semibold" }, _fnSignal(_hf0, [vm]), 3, null),
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, vm.value.overview.slowestComponent ? `${formatMs(vm.value.overview.slowestComponent.avgTime)} avg` : "-", 1, null)
-		], 1, null), 1, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex-1" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs font-medium" }, "AVG TIME", 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-3xl font-semibold" }, formatMs(vm.value.overview.avgTime), 1, null)], 1, null), 1, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex-1" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs font-medium" }, "TOTAL CALLS", 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-3xl font-semibold" }, _fnSignal(_hf1, [vm]), 3, null)], 3, null), 3, null)
-	], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-background flex min-h-0 flex-1 overflow-hidden rounded-md border" }, [
+	if (!(perf.value?.ssr?.length || perf.value?.csr?.length)) return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-hidden" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg flex h-full items-center justify-center rounded-xl border p-8" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-center text-sm" }, ["No performance data found.", /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-1 text-xs" }, "Ensure instrumentation is enabled and interact with the app, then reopen this tab.", 3, null)], 3, null), 3, null), 3, "qe_10");
+	return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-hidden" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full min-h-0 flex-col gap-4" }, [/* @__PURE__ */ _jsxSorted(PerformanceOverview, null, { overview: _fnSignal(_hf6, [vm]) }, null, 3, "qe_11"), /* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border flex min-h-0 flex-1 overflow-hidden rounded-2xl border bg-card-item-bg" }, [
 		/* @__PURE__ */ _jsxSorted("div", null, { class: "min-h-0 flex-1 overflow-y-auto p-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "mb-3 flex items-center justify-between" }, /* @__PURE__ */ _jsxSorted("div", null, null, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-lg font-semibold" }, "Components", 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, [
 			"CSR only • ",
-			_fnSignal(_hf2, [vm]),
+			_fnSignal(_hf7, [vm]),
 			" total"
-		], 3, null)], 3, null), 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 md:grid-cols-2" }, vm.value.components.map((c) => {
-			const selected = selectedComponent.value === c.componentName;
-			const qrl_4294901764 = /* @__PURE__ */ inlinedQrl((_, _1, c) => {
-				const onSelect = _captures[0];
+		], 3, null)], 3, null), 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 md:grid-cols-2" }, vm.value.components.map((c) => /* @__PURE__ */ _jsxSorted(ComponentCard, {
+			component: c,
+			onClick$: /* @__PURE__ */ inlinedQrl(() => {
+				const c = _captures[0], onSelect = _captures[1];
 				return onSelect(c.componentName);
-			}, "Performance_component_div_div_div_div_div_button_q_e_click_85W8GUPoZnc", [onSelect]);
-			return /* @__PURE__ */ _jsxSorted("button", {
-				class: ["border-border bg-card-item-bg hover:bg-card-item-hover-bg w-full rounded-xl border p-4 text-left transition-all duration-200 hover:-translate-y-0.5", selected ? "ring-primary-active ring-2" : ""].join(" "),
-				"q-e:click": qrl_4294901764,
-				"q:p": c
-			}, null, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex items-start justify-between gap-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "min-w-0 flex-1" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate text-base font-semibold" }, _wrapProp(c, "componentName"), 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, ["Avg: ", formatMs(c.avgTime)], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "shrink-0 text-right" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-primary text-lg font-semibold" }, formatMs(c.totalTime), 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, ["SSR: ", _fnSignal(_hf3, [c])], 1, null)], 1, null)], 1, null), 4, c.componentName);
-		}), 1, null)], 1, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border border-l" }, null, 3, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "flex w-[420px] min-w-[320px] flex-col overflow-hidden" }, selectedVm.value ? /* @__PURE__ */ _jsxSorted(Fragment, null, null, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border flex items-center justify-between border-b p-4" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "min-w-0" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate text-base font-semibold" }, [_fnSignal(_hf4, [selectedVm]), " Hook Details"], 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, [
-			"Total: ",
-			formatMs(selectedVm.value.totalTime),
-			" • ",
-			_fnSignal(_hf5, [selectedVm]),
-			" calls"
-		], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("button", null, {
-			"aria-label": "close",
-			"q-e:click": clearSelect,
-			class: "text-muted-foreground hover:text-foreground rounded p-2 transition-colors"
-		}, "✕", 3, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "min-h-0 flex-1 overflow-y-auto p-4" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg rounded-lg border" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border grid grid-cols-3 border-b px-3 py-2 text-xs font-medium" }, [
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground" }, "HOOK NAME", 3, null),
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-right" }, "TIME", 3, null),
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-right" }, "CALLS", 3, null)
-		], 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "divide-border divide-y" }, [computeEventRows(selectedVm.value.csrItems).map((row) => /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-3 px-3 py-2 text-sm" }, [
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "truncate" }, _wrapProp(row, "eventName"), 1, null),
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "text-right" }, formatMs(row.time), 1, null),
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "text-right" }, _wrapProp(row, "calls"), 1, null)
-		], 1, row.eventName)), !selectedVm.value.csrItems.length && /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground px-3 py-4 text-center text-sm" }, "No CSR records for this component.", 3, "qe_1")], 1, null)], 1, null), 1, null)], 1, "qe_2") : /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full items-center justify-center p-8" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-center text-sm" }, "Select a component to view hook details.", 3, null), 3, "qe_3"), 1, null)
-	], 1, null)], 1, "qe_4"), 1, "qe_5");
+			}, "Performance_component_div_div_div_div_div_ComponentCard_onClick_Wdj23rRG0YU", [c, onSelect]),
+			selected: _fnSignal(_hf8, [c, selectedComponent])
+		}, null, null, 2, c.componentName)), 1, null)], 1, null),
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-l border-glass-border" }, null, 3, null),
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "flex w-[420px] min-w-[320px] flex-col overflow-hidden" }, selectedVm.value ? /* @__PURE__ */ _jsxSorted(HookDetailsPanel, null, {
+			component: _wrapProp(selectedVm),
+			onClose$: clearSelect
+		}, null, 3, "qe_12") : /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full items-center justify-center p-8" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground text-center text-sm" }, "Select a component to view hook details.", 3, null), 3, "qe_13"), 1, null)
+	], 1, null)], 1, null), 1, "qe_14");
 }, "Performance_component_7v0oxuZ12AM"));
 //#endregion
 export { Performance };

package/dist/ui/features/Performance/computePerfViewModel.qwik.mjs

@@ -38,33 +38,40 @@ function computeComponentVmFromCsr(componentName, csrItems, ssr) {
 		csrItems
 	};
 }
-function computePerfViewModel(perf) {
-	const safe = perf || {
-		ssr: [],
-		csr: []
-	};
-	const components = [];
-	if (safe.ssr?.length) {
-		const grouped = groupCsrBySsr(safe);
-		for (const ssrItem of safe.ssr) {
-			const componentName = parseComponentAndEventName(ssrItem.component).componentName;
-			const csrItems = grouped.get(ssrItem) || [];
-			components.push(computeComponentVmFromCsr(componentName, csrItems, ssrItem));
-		}
-	} else if (safe.csr?.length) {
-		const byName = /* @__PURE__ */ new Map();
-		for (const csrItem of safe.csr) {
-			const parsed = parseComponentAndEventName(csrItem.component);
-			const list = byName.get(parsed.componentName) || [];
-			list.push({
-				...csrItem,
-				...parsed
-			});
-			byName.set(parsed.componentName, list);
-		}
-		for (const [componentName, csrItems] of byName.entries()) components.push(computeComponentVmFromCsr(componentName, csrItems));
+/** Build component view-models when SSR entries are available. */ function groupComponentsBySsr(safe) {
+	const grouped = groupCsrBySsr(safe);
+	const result = [];
+	for (const raw of safe.ssr) {
+		const ssrItem = {
+			...raw,
+			phase: "ssr"
+		};
+		const componentName = parseComponentAndEventName(ssrItem.component).componentName;
+		const csrItems = grouped.get(raw) || [];
+		result.push(computeComponentVmFromCsr(componentName, csrItems, ssrItem));
 	}
-	components.sort((a, b) => b.totalTime - a.totalTime);
+	return result;
+}
+/** Build component view-models from CSR-only data, grouped by component name. */ function groupComponentsByName(csrRaw) {
+	const byName = /* @__PURE__ */ new Map();
+	for (const entry of csrRaw) {
+		const csrItem = {
+			...entry,
+			phase: "csr"
+		};
+		const parsed = parseComponentAndEventName(csrItem.component);
+		const list = byName.get(parsed.componentName) || [];
+		list.push({
+			...csrItem,
+			...parsed
+		});
+		byName.set(parsed.componentName, list);
+	}
+	const result = [];
+	for (const [componentName, csrItems] of byName.entries()) result.push(computeComponentVmFromCsr(componentName, csrItems));
+	return result;
+}
+function computeOverview(components) {
 	let totalRenderTime = 0;
 	let totalCalls = 0;
 	for (const c of components) {
@@ -77,17 +84,26 @@ function computePerfViewModel(perf) {
 		return cur.avgTime > acc.avgTime ? cur : acc;
 	}, void 0);
 	return {
-		overview: {
-			totalRenderTime,
-			totalCalls,
-			avgTime,
-			slowestComponent: slowest ? {
-				componentName: slowest.componentName,
-				avgTime: slowest.avgTime,
-				totalTime: slowest.totalTime,
-				calls: slowest.calls
-			} : void 0
-		},
+		totalRenderTime,
+		totalCalls,
+		avgTime,
+		slowestComponent: slowest ? {
+			componentName: slowest.componentName,
+			avgTime: slowest.avgTime,
+			totalTime: slowest.totalTime,
+			calls: slowest.calls
+		} : void 0
+	};
+}
+function computePerfViewModel(perf) {
+	const safe = perf || {
+		ssr: [],
+		csr: []
+	};
+	const components = safe.ssr?.length ? groupComponentsBySsr(safe) : safe.csr?.length ? groupComponentsByName(safe.csr) : [];
+	components.sort((a, b) => b.totalTime - a.totalTime);
+	return {
+		overview: computeOverview(components),
 		components
 	};
 }

package/dist/ui/features/RenderTree/RenderTree.qwik.mjs

@@ -18,8 +18,8 @@ import { Fragment } from "@qwik.dev/core/jsx-runtime";
 import { unwrapStore } from "@qwik.dev/core/internal";
 //#region src/features/RenderTree/RenderTree.tsx
 var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1);
-var _hf0 = (p0) => p0.value === "state" ? { borderBottom: "2px solid var(--color-primary-active)" } : {};
-var _hf1 = (p0) => p0.value === "code" ? { borderBottom: "2px solid var(--color-primary-active)" } : {};
+var _hf0 = (p0) => p0.value === "state" ? { boxShadow: "inset 0 -2px 0 0 var(--color-primary)" } : {};
+var _hf1 = (p0) => p0.value === "code" ? { boxShadow: "inset 0 -2px 0 0 var(--color-primary)" } : {};
 var _hf2 = (p0) => `h-4 w-4 transition-transform duration-200 ${p0.value ? "rotate-180" : "-rotate-90"}`;
 var _hf3 = (p0) => ({
 	maxHeight: p0.value ? "800px" : "0px",
@@ -115,30 +115,26 @@ var RenderTree = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
 		stateTree
 	]);
 	const currentTab = useSignal("state");
-	return /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-background h-full w-full flex-1 overflow-hidden rounded-md border" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full w-full" }, [
+	return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-hidden rounded-2xl border border-glass-border bg-card-item-bg" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full w-full" }, [
 		/* @__PURE__ */ _jsxSorted("div", null, {
-			class: "w-1/2 overflow-hidden p-4",
-			style: { minWidth: "400px" }
+			class: "w-1/2 overflow-hidden p-3 custom-scrollbar",
+			style: { minWidth: "360px" }
 		}, /* @__PURE__ */ _jsxSorted(Tree, null, {
 			data,
 			onNodeClick
 		}, null, 3, "N0_0"), 1, null),
-		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border border-l" }, null, 3, null),
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "border-l border-glass-border" }, null, 3, null),
 		/* @__PURE__ */ _jsxSorted("div", null, { class: "flex h-full min-h-0 w-1/2 flex-col overflow-hidden p-4" }, [
-			/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border border-b" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border flex space-x-4 border-b" }, [/* @__PURE__ */ _jsxSorted("button", {
+			/* @__PURE__ */ _jsxSorted("div", null, { class: "" }, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-b border-glass-border flex space-x-2 pb-1" }, [/* @__PURE__ */ _jsxSorted("button", {
+				class: ["px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200", currentTab.value === "state" ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground hover:bg-foreground/5"],
 				"q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, currentTab) => currentTab.value = "state", "RenderTree_component_div_div_div_div_div_button_q_e_click_0BjFkeQoET0"),
 				"q:p": currentTab
-			}, {
-				style: _fnSignal(_hf0, [currentTab]),
-				class: "text-muted-foreground hover:text-foreground border-b-2 border-b-transparent px-4 py-3 text-sm font-medium transition-all duration-300 ease-in-out"
-			}, "State", 6, null), /* @__PURE__ */ _jsxSorted("button", {
+			}, { style: _fnSignal(_hf0, [currentTab]) }, "State", 6, null), /* @__PURE__ */ _jsxSorted("button", {
+				class: ["px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200", currentTab.value === "code" ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground hover:bg-foreground/5"],
 				"q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, currentTab) => currentTab.value = "code", "RenderTree_component_div_div_div_div_div_button_q_e_click_1_39v2rkQNmhc"),
 				"q:p": currentTab
-			}, {
-				style: _fnSignal(_hf1, [currentTab]),
-				class: "text-muted-foreground hover:text-foreground border-b-2 border-b-transparent px-4 py-3 text-sm font-medium transition-all duration-300 ease-in-out"
-			}, "Code", 6, null)], 1, null), 1, null),
-			currentTab.value === "state" && /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-5 flex min-h-0 flex-1 flex-col" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg rounded-lg border shadow-sm" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-border flex items-center justify-between border-b px-2 py-2" }, [/* @__PURE__ */ _jsxSorted("span", null, { class: "text-muted-foreground text-xs font-medium" }, "Hooks", 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "flex items-center space-x-2" }, [
+			}, { style: _fnSignal(_hf1, [currentTab]) }, "Code", 6, null)], 1, null), 1, null),
+			currentTab.value === "state" && /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-5 flex min-h-0 flex-1 flex-col" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "rounded-xl border border-glass-border bg-card-item-bg" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-b border-glass-border flex items-center justify-between px-2 py-2" }, [/* @__PURE__ */ _jsxSorted("span", null, { class: "text-muted-foreground text-xs font-medium" }, "Hooks", 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "flex items-center space-x-2" }, [
 				/* @__PURE__ */ _jsxSorted("button", { "q-e:click": /* @__PURE__ */ inlinedQrl(() => {
 					const hookFilters = _captures[0], hookStore = _captures[1], stateTree = _captures[2];
 					hookFilters.value = hookFilters.value.map((item) => {
@@ -184,12 +180,12 @@ var RenderTree = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
 					hookStore,
 					stateTree
 				]);
-				return /* @__PURE__ */ _jsxSorted("label", null, { class: "flex items-center" }, [/* @__PURE__ */ _jsxSorted("input", {
+				return /* @__PURE__ */ _jsxSorted("label", null, { class: "flex items-center gap-2 cursor-pointer" }, [/* @__PURE__ */ _jsxSorted("input", {
 					checked: _wrapProp(item, "display"),
 					"q-e:change": qrl_4294901769,
 					"q:p": idx
 				}, {
-					class: "border-border focus:ring-primary-active h-4 w-4 rounded-full focus:ring-offset-0 dark:border-[#374151] dark:bg-[#1F2937]",
+					class: "h-4 w-4 rounded focus:ring-0 cursor-pointer",
 					style: { accentColor: "var(--color-primary-active)" },
 					type: "checkbox"
 				}, null, 6, null), /* @__PURE__ */ _jsxSorted("span", null, { class: "ml-2 select-none" }, _wrapProp(item, "key"), 1, null)], 1, idx);
@@ -215,10 +211,10 @@ var RenderTree = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
 				animationDuration: 200,
 				isHover: true
 			}, null, 3, "N0_5"), 1, null)], 1, "N0_6"),
-			currentTab.value === "code" && /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border mt-5 min-h-0 flex-1 overflow-y-auto rounded-lg border p-2 shadow-sm" }, /* @__PURE__ */ _jsxSorted(Resource, null, {
+			currentTab.value === "code" && /* @__PURE__ */ _jsxSorted("div", null, { class: "mt-4 min-h-0 flex-1 overflow-y-auto rounded-xl border border-glass-border bg-card-item-bg p-2" }, /* @__PURE__ */ _jsxSorted(Resource, null, {
 				value: highlightedCodesResource,
 				onPending: () => /* @__PURE__ */ _jsxSorted("div", null, { class: "text-muted-foreground p-2 text-sm" }, "Loading code highlights…", 3, "N0_7"),
-				onResolved: (highlighted) => /* @__PURE__ */ _jsxSorted(Fragment, null, null, codes.value.map((item, idx) => /* @__PURE__ */ _jsxSorted(Fragment, null, null, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg mb-4 rounded-xl border p-4 shadow-sm transition-colors" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-primary mb-2 break-all text-base font-semibold" }, _wrapProp(item, "pathId"), 1, null), /* @__PURE__ */ _jsxSorted("pre", { dangerouslySetInnerHTML: _fnSignal(_hf4, [highlighted, idx]) }, { class: "overflow-hidden" }, null, 3, null)], 1, null), 1, "N0_8")), 1, "N0_9")
+				onResolved: (highlighted) => /* @__PURE__ */ _jsxSorted(Fragment, null, null, codes.value.map((item, idx) => /* @__PURE__ */ _jsxSorted(Fragment, null, null, /* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg hover:bg-card-item-hover-bg mb-4 rounded-xl border p-4 transition-colors" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-primary mb-2 break-all text-base font-semibold" }, _wrapProp(item, "pathId"), 1, null), /* @__PURE__ */ _jsxSorted("pre", { dangerouslySetInnerHTML: _fnSignal(_hf4, [highlighted, idx]) }, { class: "overflow-hidden" }, null, 3, null)], 1, null), 1, "N0_8")), 1, "N0_9")
 			}, null, 3, "N0_10"), 1, "N0_11")
 		], 1, null)
 	], 1, null), 1, "N0_12");

package/dist/ui/features/RenderTree/formatTreeData.qwik.mjs

@@ -103,21 +103,22 @@ var log = (0, (/* @__PURE__ */ __toESM(require_browser(), 1)).default)("qwik:dev
 		return this.getEntries(hookType).map((entry) => this.transformEntry(hookType, entry)).flat();
 	}
 	transformEntry(hookType, entry) {
-		const typedEntry = entry;
+		const variableName = "hookType" in entry ? entry.variableName : void 0;
+		const data = entry.data;
 		switch (hookType) {
 			case "props":
 			case "listens":
-			case "render": return this.treeBuilder.objectToTree(typedEntry.data);
+			case "render": return this.treeBuilder.objectToTree(data);
 			case "useTask":
 			case "useVisibleTask": {
-				const scopeVars = this.findScopeVariables(typedEntry);
-				return this.treeBuilder.objectToTree({ [`let ${typedEntry.variableName ?? hookType} =`]: scopeVars });
+				const scopeVars = this.findScopeVariables(entry);
+				return this.treeBuilder.objectToTree({ [`let ${variableName ?? hookType} =`]: scopeVars });
 			}
 			case "customhook": {
-				const captureRef = typedEntry.data?.[CAPTURE_REF_KEY];
-				return this.treeBuilder.objectToTree({ [`let ${typedEntry.variableName ?? "customhook"} = Scope `]: captureRef });
+				const captureRef = data?.[CAPTURE_REF_KEY];
+				return this.treeBuilder.objectToTree({ [`let ${variableName ?? "customhook"} = Scope `]: captureRef });
 			}
-			default: return this.treeBuilder.objectToTree({ [`let ${typedEntry.variableName ?? hookType} =`]: typedEntry.data });
+			default: return this.treeBuilder.objectToTree({ [`let ${variableName ?? hookType} =`]: data });
 		}
 	}
 	findScopeVariables(item) {
@@ -125,10 +126,9 @@ var log = (0, (/* @__PURE__ */ __toESM(require_browser(), 1)).default)("qwik:dev
 		if (!targets) return "Scope []";
 		const variableNames = [];
 		for (const entry of Object.values(this.store)) for (const storedEntry of entry.set) {
-			const entryData = storedEntry;
-			const data = entryData?.data ?? entryData;
+			const data = storedEntry.data;
 			if (!data) continue;
-			if (targets.find((target) => target === data) && entryData.variableName) variableNames.push(entryData.variableName);
+			if (targets.find((target) => target === data) && "variableName" in storedEntry && storedEntry.variableName) variableNames.push(storedEntry.variableName);
 		}
 		return `Scope [${variableNames.join(", ")}]`;
 	}
@@ -149,14 +149,14 @@ var log = (0, (/* @__PURE__ */ __toESM(require_browser(), 1)).default)("qwik:dev
 	}
 	extractQrlPath(hookType, entry) {
 		if (hookType === "listens") {
-			const data = entry.data ?? entry;
+			const data = entry.data;
 			return Object.values(data).map((v) => v?.$chunk$).filter((v) => typeof v === "string");
 		}
 		if (hookType === "render") {
-			const renderFn = entry.data?.render ?? entry;
+			const renderFn = entry.data?.render ?? entry.data;
 			return QrlUtils.getPath(renderFn);
 		}
-		const data = entry.data ?? entry;
+		const data = entry.data;
 		const qrlObj = data["$qrl$"] ?? data["$computeQrl$"];
 		return QrlUtils.getPath(qrlObj);
 	}

package/dist/ui/features/inspect/Inspect.qwik.mjs

@@ -1,12 +1,23 @@
 import { inspectorLink } from "./constant.qwik.mjs";
+import { setupIframeThemeSync } from "./iframe-theme.qwik.mjs";
 import { _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
 //#region src/features/inspect/Inspect.tsx
 var Inspect = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-	return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full flex-1 overflow-hidden" }, /* @__PURE__ */ _jsxSorted("iframe", { src: `${location.href}${inspectorLink}` }, {
+	return /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-hidden rounded-2xl border border-glass-border bg-card-item-bg" }, /* @__PURE__ */ _jsxSorted("iframe", {
+		"q-e:load": /* @__PURE__ */ inlinedQrl((_, el) => {
+			try {
+				setupIframeThemeSync(el);
+			} catch (err) {
+				console.error("Failed to inject theme into inspect iframe:", err);
+			}
+		}, "Inspect_component_div_iframe_q_e_load_dBYi9MiDVFM"),
+		src: `${location.href}${inspectorLink}`
+	}, {
 		width: "100%",
 		height: "100%",
-		id: "inspect_qwik"
-	}, null, 3, null), 1, "o0_0");
+		id: "inspect_qwik",
+		class: "rounded-xl w-full h-full"
+	}, null, 2, null), 1, "o0_0");
 }, "Inspect_component_hp0adRBjF9Q"));
 //#endregion
 export { Inspect };

package/dist/ui/features/inspect/iframe-theme.qwik.mjs

@@ -0,0 +1,66 @@
+//#region src/features/inspect/iframe-theme.ts
+var STYLE_ID = "qwik-inspect-custom-style";
+var GLASSMORPHISM_CSS = `
+  :root {
+    --c-bg-base: transparent !important;
+    --c-bg-nav: transparent !important;
+    --c-bg-active: transparent !important;
+    --iframe-border: rgba(0, 0, 0, 0.1) !important;
+    --iframe-hover: rgba(0, 0, 0, 0.04) !important;
+    color-scheme: light;
+  }
+  html.dark {
+    --c-bg-base: transparent !important;
+    --c-bg-nav: transparent !important;
+    --c-bg-active: transparent !important;
+    --iframe-border: rgba(255, 255, 255, 0.08) !important;
+    --iframe-hover: rgba(255, 255, 255, 0.06) !important;
+    color-scheme: dark;
+  }
+  /* 仅针对主视图容器做透明处理，不再暴力让所有 div/section 变透明 */
+  html, body, #app, main, header, nav, footer { background-color: transparent !important; }
+  .bg-active, .hover\\\\:bg-active:hover, tr:hover, li:hover,
+  .hover\\\\:bg-gray-400\\\\/10:hover, a:hover { background-color: var(--iframe-hover) !important; }
+  input, button, select, [role="button"] { background-color: var(--iframe-hover) !important; }
+  .border-base, [class*="border-b"], [class*="border-r"],
+  [class*="border-t"], [class*="border-l"], .border { border-color: var(--iframe-border) !important; }
+  html.dark { color: #fafafa !important; }
+  html, body, #app { overflow-x: hidden !important; max-width: 100vw !important; }
+`;
+/** 在 iframe onLoad 中调用，同步父主题 + 注入透明背景样式 */ function setupIframeThemeSync(iframe) {
+	const doc = iframe.contentDocument;
+	const win = iframe.contentWindow;
+	if (!doc || !win) return;
+	const syncTheme = () => {
+		const dark = document.documentElement.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark";
+		win.localStorage.setItem("vueuse-color-scheme", dark ? "dark" : "light");
+		if (dark) doc.documentElement.classList.add("dark");
+		else doc.documentElement.classList.remove("dark");
+	};
+	const ensureStyle = () => {
+		if (!doc.getElementById(STYLE_ID)) {
+			const s = doc.createElement("style");
+			s.id = STYLE_ID;
+			s.textContent = GLASSMORPHISM_CSS;
+			doc.head.appendChild(s);
+		}
+	};
+	syncTheme();
+	ensureStyle();
+	const themeObs = new MutationObserver(syncTheme);
+	themeObs.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class", "data-theme"]
+	});
+	const styleObs = new MutationObserver(ensureStyle);
+	styleObs.observe(doc.body || doc.documentElement, {
+		childList: true,
+		subtree: true
+	});
+	doc.defaultView?.addEventListener("unload", () => {
+		themeObs.disconnect();
+		styleObs.disconnect();
+	});
+}
+//#endregion
+export { setupIframeThemeSync };

package/dist/ui/lib-types/ui/src/components/Tree/Tree.d.ts

@@ -1,15 +1,7 @@
-import { QRL } from '@qwik.dev/core';
+import { type QRL } from '@qwik.dev/core';
 import type { JSXOutput, Signal } from '@qwik.dev/core';
-export interface TreeNode {
-    name?: string | 'text';
-    props?: Record<string, any>;
-    children?: TreeNode[];
-    elementType?: string;
-    label?: string;
-    isHover?: boolean;
-    id: string;
-}
-export declare const Tree: import("@qwik.dev/core").Component<{
+import type { TreeNode } from './type';
+export interface TreeProps {
     data: Signal<TreeNode[]>;
     onNodeClick?: QRL<(node: TreeNode) => void>;
     renderNode?: QRL<(node: TreeNode) => JSXOutput>;
@@ -18,4 +10,5 @@ export declare const Tree: import("@qwik.dev/core").Component<{
     animate?: boolean;
     animationDuration?: number;
     expandLevel?: number;
-}>;
+}
+export declare const Tree: import("@qwik.dev/core").Component<TreeProps>;

package/dist/ui/lib-types/ui/src/components/Tree/filterVnode.d.ts

@@ -1,3 +1,3 @@
 import { _VNode } from '@qwik.dev/core/internal';
-import { TreeNode } from './Tree';
+import { TreeNode } from './type';
 export declare function vnode_toObject(vnodeItem: _VNode | null): TreeNode[] | null;

package/dist/ui/lib-types/ui/src/components/Tree/type.d.ts

@@ -1,3 +1,21 @@
 export declare const ISDEVTOOL = "Qwikdevtools";
 export declare const QContainerAttr = "q:container";
-export type StoreTarget = Record<string | symbol, any>;
+/**
+ * A value stored inside a Qwik reactive store proxy.
+ * We intentionally keep a narrow union so that `Record<string | symbol, StoreValue>`
+ * is assignable without falling back to `any`.
+ */
+export type StoreValue = string | number | boolean | null | undefined | object;
+export type StoreTarget = Record<string | symbol, StoreValue>;
+/** Value types that a Qwik VNode prop can hold. */
+export type TreeNodePropValue = string | number | boolean | null | undefined | object;
+export type ElementType = 'null' | 'boolean' | 'number' | 'string' | 'function' | 'array' | 'object';
+export interface TreeNode {
+    name?: string;
+    props?: Record<string, TreeNodePropValue>;
+    children?: TreeNode[];
+    elementType?: ElementType;
+    label?: string;
+    isHover?: boolean;
+    id: string;
+}

package/dist/ui/lib-types/ui/src/components/Tree/vnode.d.ts

@@ -1,3 +1,3 @@
-import { TreeNode } from './Tree';
+import { TreeNode } from './type';
 export declare function normalizeName(str: string): string;
 export declare function removeNodeFromTree(tree: TreeNode[], callback: (node: TreeNode) => boolean): TreeNode[];

package/dist/ui/lib-types/ui/src/features/RenderTree/TreeBuilder.d.ts

@@ -1,4 +1,4 @@
-import type { TreeNode } from '../../components/Tree/Tree';
+import type { TreeNode } from '../../components/Tree/type';
 /**
  * Builder class for creating TreeNode structures from objects.
  * Handles all types of data transformation to tree format.

package/dist/ui/lib-types/ui/src/features/RenderTree/formatTreeData.d.ts

@@ -1,6 +1,6 @@
-import type { TreeNode } from '../../components/Tree/Tree';
+import type { TreeNode } from '../../components/Tree/type';
 import type { ParsedStructure } from '@devtools/kit';
-import { type HookType, type HookFilterItem, type QRLInternal } from './types';
+import { type HookType, type HookFilterItem, type QRLInternal, type HookDataEntry } from './types';
 /**
  * Manages hook data storage and tree building for the devtools.
  */
@@ -12,9 +12,7 @@ export declare class HookStore {
     /**
      * Add data to the store for a specific hook type
      */
-    add(type: HookType, data: ParsedStructure | {
-        data: Record<string, unknown>;
-    }): void;
+    add(type: HookType, data: HookDataEntry): void;
     /**
      * Clear all stored hook data
      */
@@ -26,7 +24,7 @@ export declare class HookStore {
     /**
      * Get entries for a specific hook type
      */
-    getEntries(type: HookType): unknown[];
+    getEntries(type: HookType): HookDataEntry[];
     /**
      * Check if a hook type has entries
      */
@@ -49,7 +47,7 @@ export declare class HookStore {
     buildTree(): TreeNode[];
     private transformEntries;
     private transformEntry;
-    findScopeVariables(item: Record<string, unknown>): string;
+    findScopeVariables(item: HookDataEntry): string;
     /**
      * Find all QRL paths for code lookup
      */