@qwik.dev/devtools 2.0.0-beta.43 → 2.0.0-beta.47

package/dist/ui/packages/devtools/ui/src/features/Packages/components/SearchResultCard/SearchResultCard.qwik.mjs

@@ -1,32 +1,43 @@
-import { _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+import { _capturesObj, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.result.npmUrl;
+var _hf0_str = "p0.result.npmUrl";
 var _hf1 = (p0) => p0.result.name;
+var _hf1_str = "p0.result.name";
 var _hf2 = (p0) => p0.result.latestVersion;
+var _hf2_str = "p0.result.latestVersion";
 var _hf3 = (p0) => p0.result.installedVersion;
+var _hf3_str = "p0.result.installedVersion";
 var _hf4 = (p0) => p0.result.description || "No description available";
+var _hf4_str = "p0.result.description||\"No description available\"";
 var _hf5 = (p0, p1) => p1.result.isInstalled || p0;
+var _hf5_str = "p1.result.isInstalled||p0";
 var _hf6 = (p0, p1) => p1.result.isInstalled ? "Installed" : p0 ? "Installing..." : "Install";
+var _hf6_str = "p1.result.isInstalled?\"Installed\":p0?\"Installing...\":\"Install\"";
 var SearchResultCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
 	const isInstalling = props.activeOperationKey === `install:${props.result.name}`;
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-xl border p-4" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-col gap-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-start justify-between gap-3" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "min-w-0" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center gap-2" }, [
-		/*#__PURE__*/ _jsxSorted("a", { href: _fnSignal(_hf0, [props]) }, {
+		/*#__PURE__*/ _jsxSorted("a", { href: _fnSignal(_hf0, [props], _hf0_str) }, {
 			target: "_blank",
 			class: "text-foreground hover:text-primary truncate text-sm font-semibold"
-		}, _fnSignal(_hf1, [props]), 1, null),
-		/*#__PURE__*/ _jsxSorted("span", null, { class: "bg-primary/10 text-primary rounded-md px-2 py-0.5 text-xs" }, ["v", _fnSignal(_hf2, [props])], 1, null),
-		props.result.isInstalled ? /*#__PURE__*/ _jsxSorted("span", null, { class: "rounded-md border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-xs text-emerald-300" }, ["Installed ", _fnSignal(_hf3, [props])], 1, "LR_0") : null
-	], 1, null), /*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground mt-2 line-clamp-2 text-sm" }, _fnSignal(_hf4, [props]), 1, null)], 1, null), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center justify-between gap-3" }, [/*#__PURE__*/ _jsxSorted("select", {
-		disabled: _fnSignal(_hf5, [isInstalling, props]),
-		"q-e:change": /*#__PURE__*/ inlinedQrl((_, target, props) => props.onTypeChange$(props.result.name, target.value), "SearchResultCard_component_div_div_div_select_q_e_change_157XuaUcsW4").m(),
-		"q:p": props,
+		}, _fnSignal(_hf1, [props], _hf1_str), 1, null),
+		/*#__PURE__*/ _jsxSorted("span", null, { class: "bg-primary/10 text-primary rounded-md px-2 py-0.5 text-xs" }, ["v", _fnSignal(_hf2, [props], _hf2_str)], 1, null),
+		props.result.isInstalled ? /*#__PURE__*/ _jsxSorted("span", null, { class: "rounded-md border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-xs text-emerald-300" }, ["Installed ", _fnSignal(_hf3, [props], _hf3_str)], 1, "04_0") : null
+	], 1, null), /*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground mt-2 line-clamp-2 text-sm" }, _fnSignal(_hf4, [props], _hf4_str), 1, null)], 1, null), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center justify-between gap-3" }, [/*#__PURE__*/ _jsxSorted("select", {
+		disabled: _fnSignal(_hf5, [isInstalling, props], _hf5_str),
 		value: _wrapProp(props, "selectedType")
-	}, { class: "border-border bg-background/60 rounded-lg border px-2 py-1.5 text-xs" }, [/*#__PURE__*/ _jsxSorted("option", null, { value: "devDependencies" }, "devDependencies", 3, null), /*#__PURE__*/ _jsxSorted("option", null, { value: "dependencies" }, "dependencies", 3, null)], 6, null), /*#__PURE__*/ _jsxSorted("button", {
-		disabled: _fnSignal(_hf5, [isInstalling, props]),
-		"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, props) => props.onInstall$(props.result.name, props.selectedType), "SearchResultCard_component_div_div_div_button_q_e_click_0DlfMgOZNRQ").m(),
-		"q:p": props
 	}, {
+		"q-e:change": /*#__PURE__*/ inlinedQrl((_, target) => {
+			let props = _capturesObj._[0];
+			return props.onTypeChange$(props.result.name, target.value);
+		}, "SearchResultCard_component_div_div_div_select_q_e_change_157XuaUcsW4", [props]),
+		class: "border-border bg-background/60 rounded-lg border px-2 py-1.5 text-xs"
+	}, [/*#__PURE__*/ _jsxSorted("option", null, { value: "devDependencies" }, "devDependencies", 3, null), /*#__PURE__*/ _jsxSorted("option", null, { value: "dependencies" }, "dependencies", 3, null)], 3, null), /*#__PURE__*/ _jsxSorted("button", { disabled: _fnSignal(_hf5, [isInstalling, props], _hf5_str) }, {
 		type: "button",
+		"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+			let props = _capturesObj._[0];
+			return props.onInstall$(props.result.name, props.selectedType);
+		}, "SearchResultCard_component_div_div_div_button_q_e_click_0DlfMgOZNRQ", [props]),
 		class: "bg-primary/10 hover:bg-primary/20 text-primary rounded-lg px-3 py-1.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-	}, _fnSignal(_hf6, [isInstalling, props]), 4, null)], 1, null)], 1, null), 1, "LR_1");
+	}, _fnSignal(_hf6, [isInstalling, props], _hf6_str), 1, null)], 1, null)], 1, null), 1, "04_1");
 }, "SearchResultCard_component_3Z58OZETbL0"));
 export { SearchResultCard };

package/dist/ui/packages/devtools/ui/src/features/Performance/Performance.qwik.mjs

@@ -3,24 +3,28 @@ import { computePerfViewModel } from "./computePerfViewModel.qwik.mjs";
 import { ComponentCard } from "./components/ComponentCard.qwik.mjs";
 import { HookDetailsPanel } from "./components/HookDetailsPanel.qwik.mjs";
 import { PerformanceOverview } from "./components/PerformanceOverview.qwik.mjs";
-import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useTaskQrl, useVisibleTaskQrl } from "@qwik.dev/core";
+import { _capturesObj, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useTaskQrl, useVisibleTaskQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.value.overview;
+var _hf0_str = "p0.value.overview";
 var _hf1 = (p0) => p0.value.components.length;
+var _hf1_str = "p0.value.components.length";
 var _hf2 = (p0, p1) => p1.value === p0.componentName;
+var _hf2_str = "p1.value===p0.componentName";
 var _hf3 = (p0) => p0.value.length;
+var _hf3_str = "p0.value.length";
 var Performance = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	const perf = useSignal(null);
 	const selectedComponent = useSignal(null);
 	const renderEvents = useSignal([]);
 	useTaskQrl(/*#__PURE__*/ inlinedQrl(async () => {
-		const perf = _captures[0];
+		let perf = _capturesObj._[0];
 		perf.value = await getPageDataSource().readPerfData() ?? {
 			ssr: [],
 			csr: []
 		};
 	}, "Performance_component_useTask_WHiyTVV6c8g", [perf]));
 	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async ({ cleanup }) => {
-		const renderEvents = _captures[0];
+		let renderEvents = _capturesObj._[0];
 		const source = getPageDataSource();
 		const data = await source.readPerfData();
 		const all = [...data?.ssr || [], ...data?.csr || []];
@@ -36,29 +40,29 @@ var Performance = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps
 		if (unsub) cleanup(unsub);
 	}, "Performance_component_useVisibleTask_jEYvQu47TE8", [renderEvents]));
 	const vm = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
-		const perf = _captures[0];
+		let perf = _capturesObj._[0];
 		return computePerfViewModel(perf.value);
 	}, "Performance_component_vm_useComputed_go9mqCd7Rk0", [perf]));
 	const selectedVm = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
-		const selectedComponent = _captures[0], vm = _captures[1];
+		let selectedComponent = _capturesObj._[0], vm = _capturesObj._[1];
 		const name = selectedComponent.value;
 		if (!name) return null;
 		return vm.value.components.find((c) => c.componentName === name) ?? null;
 	}, "Performance_component_selectedVm_useComputed_9gMJskA6xTk", [selectedComponent, vm]));
 	const onSelect = /*#__PURE__*/ inlinedQrl((name) => {
-		const selectedComponent = _captures[0];
+		let selectedComponent = _capturesObj._[0];
 		selectedComponent.value = name;
 	}, "Performance_component_onSelect_iR9qDY0SnqQ", [selectedComponent]);
 	const clearSelect = /*#__PURE__*/ inlinedQrl(() => {
-		const selectedComponent = _captures[0];
+		let selectedComponent = _capturesObj._[0];
 		selectedComponent.value = null;
 	}, "Performance_component_clearSelect_r3DeYHRX6Wc", [selectedComponent]);
 	const clearRenderEvents = /*#__PURE__*/ inlinedQrl(() => {
-		const renderEvents = _captures[0];
+		let renderEvents = _capturesObj._[0];
 		renderEvents.value = [];
 	}, "Performance_component_clearRenderEvents_HK009X9J0PU", [renderEvents]);
 	useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track }) => {
-		const _rawProps = _captures[0], renderEvents = _captures[1], selectedComponent = _captures[2];
+		let _rawProps = _capturesObj._[0], renderEvents = _capturesObj._[1], selectedComponent = _capturesObj._[2];
 		if (!track(() => _rawProps.state.clearPerformanceRequested)) return;
 		renderEvents.value = [];
 		selectedComponent.value = null;
@@ -70,32 +74,32 @@ var Performance = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps
 	]));
 	const hasData = (perf.value?.ssr?.length ?? 0) > 0 || (perf.value?.csr?.length ?? 0) > 0;
 	const hasRenderEvents = renderEvents.value.length > 0;
-	if (!hasData && !hasRenderEvents) 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, "pZ_0");
+	if (!hasData && !hasRenderEvents) 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, "nz_0");
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "h-full w-full flex-1 overflow-y-auto" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-h-0 flex-col gap-4" }, [
-		hasData && /*#__PURE__*/ _jsxSorted(PerformanceOverview, null, { overview: _fnSignal(_hf0, [vm]) }, null, 3, "pZ_1"),
+		hasData && /*#__PURE__*/ _jsxSorted(PerformanceOverview, null, { overview: _fnSignal(_hf0, [vm], _hf0_str) }, null, 3, "nz_1"),
 		hasData && /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex min-h-0 overflow-hidden rounded-2xl border" }, [
 			/*#__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(_hf1, [vm]),
+				_fnSignal(_hf1, [vm], _hf1_str),
 				" 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) => /*#__PURE__*/ _jsxSorted(ComponentCard, {
 				component: c,
 				onClick$: /*#__PURE__*/ inlinedQrl(() => {
-					const c = _captures[0], onSelect = _captures[1];
+					let c = _capturesObj._[0], onSelect = _capturesObj._[1];
 					return onSelect(c.componentName);
 				}, "Performance_component_div_div_div_div_div_ComponentCard_onClick_oHPGixzaMYc", [c, onSelect]),
-				selected: _fnSignal(_hf2, [c, selectedComponent])
+				selected: _fnSignal(_hf2, [c, selectedComponent], _hf2_str)
 			}, null, null, 2, c.componentName)), 1, null)], 1, null),
 			/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-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(HookDetailsPanel, null, {
 				component: _wrapProp(selectedVm),
 				onClose$: clearSelect
-			}, null, 3, "pZ_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, "pZ_3"), 1, null)
-		], 1, "pZ_4"),
-		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-2xl border 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" }, "Live Renders", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, [_fnSignal(_hf3, [renderEvents]), " events captured"], 3, null)], 3, null), hasRenderEvents && /*#__PURE__*/ _jsxSorted("button", null, {
+			}, null, 3, "nz_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, "nz_3"), 1, null)
+		], 1, "nz_4"),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-2xl border 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" }, "Live Renders", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, [_fnSignal(_hf3, [renderEvents], _hf3_str), " events captured"], 3, null)], 3, null), hasRenderEvents && /*#__PURE__*/ _jsxSorted("button", null, {
 			class: "text-muted-foreground hover:text-foreground rounded px-2 py-1 text-xs transition-colors",
 			"q-e:click": clearRenderEvents
-		}, "Clear", 3, "pZ_5")], 1, null), !hasRenderEvents ? /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground py-6 text-center text-sm" }, "No renders captured yet. Interact with the app to trigger component renders.", 3, "pZ_6") : /*#__PURE__*/ _jsxSorted("div", null, { class: "max-h-[400px] overflow-y-auto" }, /*#__PURE__*/ _jsxSorted("table", null, { class: "w-full text-sm" }, [/*#__PURE__*/ _jsxSorted("thead", null, null, /*#__PURE__*/ _jsxSorted("tr", null, { class: "text-muted-foreground border-glass-border border-b text-left text-xs" }, [
+		}, "Clear", 3, "nz_5")], 1, null), !hasRenderEvents ? /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground py-6 text-center text-sm" }, "No renders captured yet. Interact with the app to trigger component renders.", 3, "nz_6") : /*#__PURE__*/ _jsxSorted("div", null, { class: "max-h-[400px] overflow-y-auto" }, /*#__PURE__*/ _jsxSorted("table", null, { class: "w-full text-sm" }, [/*#__PURE__*/ _jsxSorted("thead", null, null, /*#__PURE__*/ _jsxSorted("tr", null, { class: "text-muted-foreground border-glass-border border-b text-left text-xs" }, [
 			/*#__PURE__*/ _jsxSorted("th", null, { class: "py-1.5 pr-3 font-medium" }, "Time", 3, null),
 			/*#__PURE__*/ _jsxSorted("th", null, { class: "py-1.5 pr-3 font-medium" }, "Component", 3, null),
 			/*#__PURE__*/ _jsxSorted("th", null, { class: "py-1.5 pr-3 text-right font-medium" }, "Duration", 3, null),
@@ -105,7 +109,7 @@ var Performance = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps
 			/*#__PURE__*/ _jsxSorted("td", null, { class: "text-primary/80 py-1.5 pr-3 font-mono" }, _wrapProp(evt, "component"), 1, null),
 			/*#__PURE__*/ _jsxSorted("td", null, { class: "py-1.5 pr-3 text-right font-mono" }, evt.duration > 0 ? `${evt.duration.toFixed(1)}ms` : "-", 1, null),
 			/*#__PURE__*/ _jsxSorted("td", null, { class: "py-1.5" }, /*#__PURE__*/ _jsxSorted("span", { class: ["rounded-full px-2 py-0.5 text-xs font-medium", evt.phase === "ssr" ? "bg-blue-500/10 text-blue-400" : "bg-green-500/10 text-green-400"].join(" ") }, null, _wrapProp(evt, "phase"), 1, null), 1, null)
-		], 1, i)), 1, null)], 1, null), 1, "pZ_7")], 1, null)
-	], 1, null), 1, "pZ_8");
+		], 1, i)), 1, null)], 1, null), 1, "nz_7")], 1, null)
+	], 1, null), 1, "nz_8");
 }, "Performance_component_srUJ38wM5RE"));
 export { Performance };

package/dist/ui/packages/devtools/ui/src/features/Performance/components/ComponentCard.qwik.mjs

@@ -1,11 +1,13 @@
 import { formatMs } from "../utils/formatMs.qwik.mjs";
 import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.component.componentName;
+var _hf0_str = "p0.component.componentName";
 var _hf1 = (p0) => typeof p0.component.ssr?.ssrCount === "number" ? p0.component.ssr.ssrCount : "-";
+var _hf1_str = "typeof p0.component.ssr?.ssrCount===\"number\"?p0.component.ssr.ssrCount:\"-\"";
 var ComponentCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	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", _rawProps.selected ? "ring-primary-active ring-2" : ""].join(" "),
 		"q-e:click": _rawProps.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" }, _fnSignal(_hf0, [_rawProps]), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, ["Avg: ", formatMs(_rawProps.component.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(_rawProps.component.totalTime), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, ["SSR: ", _fnSignal(_hf1, [_rawProps])], 1, null)], 1, null)], 1, null), 0, _rawProps.component.componentName);
+	}, 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" }, _fnSignal(_hf0, [_rawProps], _hf0_str), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, ["Avg: ", formatMs(_rawProps.component.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(_rawProps.component.totalTime), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-xs" }, ["SSR: ", _fnSignal(_hf1, [_rawProps], _hf1_str)], 1, null)], 1, null)], 1, null), 0, _rawProps.component.componentName);
 }, "ComponentCard_component_n3qw8GM0NvQ"));
 export { ComponentCard };

package/dist/ui/packages/devtools/ui/src/features/Performance/components/HookDetailsPanel.qwik.mjs

@@ -3,21 +3,25 @@ import { formatMs } from "../utils/formatMs.qwik.mjs";
 import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
 import { Fragment } from "@qwik.dev/core/jsx-runtime";
 var _hf0 = (p0) => p0.row.eventName;
+var _hf0_str = "p0.row.eventName";
 var _hf1 = (p0) => p0.row.calls;
+var _hf1_str = "p0.row.calls";
 var _hf2 = (p0) => p0.component.componentName;
+var _hf2_str = "p0.component.componentName";
 var _hf3 = (p0) => p0.component.calls;
+var _hf3_str = "p0.component.calls";
 var HookRow = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-3 px-3 py-2 text-sm" }, [
-	/*#__PURE__*/ _jsxSorted("div", null, { class: "truncate" }, _fnSignal(_hf0, [_rawProps]), 1, null),
+	/*#__PURE__*/ _jsxSorted("div", null, { class: "truncate" }, _fnSignal(_hf0, [_rawProps], _hf0_str), 1, null),
 	/*#__PURE__*/ _jsxSorted("div", null, { class: "text-right" }, formatMs(_rawProps.row.time), 1, null),
-	/*#__PURE__*/ _jsxSorted("div", null, { class: "text-right" }, _fnSignal(_hf1, [_rawProps]), 1, null)
-], 1, "Tx_0"), "HookRow_component_lEGVvl0yq4c"));
+	/*#__PURE__*/ _jsxSorted("div", null, { class: "text-right" }, _fnSignal(_hf1, [_rawProps], _hf1_str), 1, null)
+], 1, "M3_0"), "HookRow_component_lEGVvl0yq4c"));
 var HookDetailsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	const rows = computeEventRows(_rawProps.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(_hf2, [_rawProps]), " Hook Details"], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, [
+	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(_hf2, [_rawProps], _hf2_str), " Hook Details"], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, [
 		"Total: ",
 		formatMs(_rawProps.component.totalTime),
 		" • ",
-		_fnSignal(_hf3, [_rawProps]),
+		_fnSignal(_hf3, [_rawProps], _hf3_str),
 		" calls"
 	], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.onClose$ }, {
 		"aria-label": "close",
@@ -26,6 +30,6 @@ var HookDetailsPanel = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_raw
 		/*#__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-glass-border divide-y" }, [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, "Tx_1")], 1, null)], 1, null), 1, null)], 1, "Tx_2");
+	], 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "divide-glass-border divide-y" }, [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, "M3_1")], 1, null)], 1, null), 1, null)], 1, "M3_2");
 }, "HookDetailsPanel_component_8uC9a2UU5yo"));
 export { HookDetailsPanel };

package/dist/ui/packages/devtools/ui/src/features/Performance/components/PerformanceOverview.qwik.mjs

@@ -1,16 +1,18 @@
 import { formatMs } from "../utils/formatMs.qwik.mjs";
 import { StatCard } from "./StatCard.qwik.mjs";
 import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
-var _hf0 = (p0) => p0.overview.slowestComponent?.componentName || "-";
+var _hf0 = (p0) => p0?.componentName || "-";
+var _hf0_str = "p0?.componentName||\"-\"";
 var PerformanceOverview = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const slowestComponent = _rawProps.overview.slowestComponent;
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-5 md:grid-cols-4" }, [
-		/*#__PURE__*/ _jsxSorted(StatCard, { value: formatMs(_rawProps.overview.totalRenderTime) }, { label: "TOTAL RENDER TIME" }, null, 3, "BX_0"),
-		/*#__PURE__*/ _jsxSorted(StatCard, { subtitle: _rawProps.overview.slowestComponent ? `${formatMs(_rawProps.overview.slowestComponent.avgTime)} avg` : "-" }, {
-			label: "SLOWEST COMPONENT",
-			value: _fnSignal(_hf0, [_rawProps])
-		}, null, 3, "BX_1"),
-		/*#__PURE__*/ _jsxSorted(StatCard, { value: formatMs(_rawProps.overview.avgTime) }, { label: "AVG TIME" }, null, 3, "BX_2"),
-		/*#__PURE__*/ _jsxSorted(StatCard, { value: String(_rawProps.overview.totalCalls) }, { label: "TOTAL CALLS" }, null, 3, "BX_3")
-	], 1, "BX_4");
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: formatMs(_rawProps.overview.totalRenderTime) }, { label: "TOTAL RENDER TIME" }, null, 3, "XE_0"),
+		/*#__PURE__*/ _jsxSorted(StatCard, {
+			subtitle: slowestComponent ? `${formatMs(slowestComponent.avgTime)} avg` : "-",
+			value: _fnSignal(_hf0, [slowestComponent], _hf0_str)
+		}, { label: "SLOWEST COMPONENT" }, null, 3, "XE_1"),
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: formatMs(_rawProps.overview.avgTime) }, { label: "AVG TIME" }, null, 3, "XE_2"),
+		/*#__PURE__*/ _jsxSorted(StatCard, { value: String(_rawProps.overview.totalCalls) }, { label: "TOTAL CALLS" }, null, 3, "XE_3")
+	], 1, "XE_4");
 }, "PerformanceOverview_component_TcuA6nX9GNo"));
 export { PerformanceOverview };

package/dist/ui/packages/devtools/ui/src/features/Performance/components/StatCard.qwik.mjs

@@ -3,7 +3,7 @@ var StatCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 	return /*#__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(_rawProps, "label"), 1, null),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "mt-1 text-3xl font-semibold" }, _wrapProp(_rawProps), 1, null),
-		_rawProps.subtitle && /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, _wrapProp(_rawProps, "subtitle"), 1, "RV_0")
-	], 1, null), 1, "RV_1");
+		_rawProps.subtitle && /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground mt-1 text-xs" }, _wrapProp(_rawProps, "subtitle"), 1, "J2_0")
+	], 1, null), 1, "J2_1");
 }, "StatCard_component_Uisqt5fvHhk"));
 export { StatCard };

package/dist/ui/packages/devtools/ui/src/features/Performance/computePerfViewModel.qwik.mjs

@@ -37,7 +37,8 @@ function computeComponentVmFromCsr(componentName, csrItems, ssr) {
 		csrItems
 	};
 }
-/** Build component view-models when SSR entries are available. */ function groupComponentsBySsr(safe) {
+/** Build component view-models when SSR entries are available. */
+function groupComponentsBySsr(safe) {
 	const grouped = groupCsrBySsr(safe);
 	const result = [];
 	for (const raw of safe.ssr) {
@@ -51,7 +52,8 @@ function computeComponentVmFromCsr(componentName, csrItems, ssr) {
 	}
 	return result;
 }
-/** Build component view-models from CSR-only data, grouped by component name. */ function groupComponentsByName(csrRaw) {
+/** 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 = {