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

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

@@ -1,42 +1,43 @@
-import { _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.isSearching ? "Searching..." : "Search";
+var _hf0_str = "p0.isSearching?\"Searching...\":\"Search\"";
 var _hf1 = (p0) => p0.isRefreshing ? "Refreshing..." : "Refresh";
+var _hf1_str = "p0.isRefreshing?\"Refreshing...\":\"Refresh\"";
 var DependencyToolbar = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-xl border p-4" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "grid gap-3 lg:grid-cols-[1fr_1fr_auto]" }, [
-		/*#__PURE__*/ _jsxSorted("label", null, { class: "flex min-w-0 flex-col gap-1.5" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground text-xs font-medium" }, "Installed dependencies", 3, null), /*#__PURE__*/ _jsxSorted("input", {
-			"q-e:input": /*#__PURE__*/ inlinedQrl((_, target, props) => props.onInstalledSearch$(target.value), "DependencyToolbar_component_div_div_label_input_q_e_input_nhSJP6PYDI0").m(),
-			"q:p": props,
-			value: _wrapProp(props, "installedSearch")
-		}, {
+		/*#__PURE__*/ _jsxSorted("label", null, { class: "flex min-w-0 flex-col gap-1.5" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground text-xs font-medium" }, "Installed dependencies", 3, null), /*#__PURE__*/ _jsxSorted("input", { value: _wrapProp(props, "installedSearch") }, {
+			"q-e:input": /*#__PURE__*/ inlinedQrl((_, target) => {
+				return _captures[0].onInstalledSearch$(target.value);
+			}, "DependencyToolbar_component_div_div_label_input_q_e_input_nhSJP6PYDI0", [props]),
 			class: "border-border bg-background/60 text-foreground placeholder:text-muted-foreground rounded-lg border px-3 py-2 text-sm outline-none focus:border-primary",
 			placeholder: "Search installed packages",
 			type: "search"
-		}, null, 6, null)], 1, null),
-		/*#__PURE__*/ _jsxSorted("label", null, { class: "flex min-w-0 flex-col gap-1.5" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground text-xs font-medium" }, "Search npm", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex gap-2" }, [/*#__PURE__*/ _jsxSorted("input", {
-			"q-e:input": /*#__PURE__*/ inlinedQrl((_, target, props) => props.onPackageSearch$(target.value), "DependencyToolbar_component_div_div_label_div_input_q_e_input_mwHCBr4jtxk").m(),
-			"q-e:keydown": /*#__PURE__*/ inlinedQrl((event, _1, props) => {
+		}, null, 3, null)], 1, null),
+		/*#__PURE__*/ _jsxSorted("label", null, { class: "flex min-w-0 flex-col gap-1.5" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground text-xs font-medium" }, "Search npm", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex gap-2" }, [/*#__PURE__*/ _jsxSorted("input", { value: _wrapProp(props, "packageSearch") }, {
+			"q-e:input": /*#__PURE__*/ inlinedQrl((_, target) => {
+				return _captures[0].onPackageSearch$(target.value);
+			}, "DependencyToolbar_component_div_div_label_div_input_q_e_input_mwHCBr4jtxk", [props]),
+			"q-e:keydown": /*#__PURE__*/ inlinedQrl((event) => {
+				const props = _captures[0];
 				if (event.key === "Enter") props.onSearch$();
-			}, "DependencyToolbar_component_div_div_label_div_input_q_e_keydown_NtKT2JkJI0g").m(),
-			"q:p": props,
-			value: _wrapProp(props, "packageSearch")
-		}, {
+			}, "DependencyToolbar_component_div_div_label_div_input_q_e_keydown_NtKT2JkJI0g", [props]),
 			class: "border-border bg-background/60 text-foreground placeholder:text-muted-foreground min-w-0 flex-1 rounded-lg border px-3 py-2 text-sm outline-none focus:border-primary",
 			placeholder: "Find new packages",
 			type: "search"
-		}, null, 6, null), /*#__PURE__*/ _jsxSorted("button", {
+		}, null, 3, null), /*#__PURE__*/ _jsxSorted("button", {
 			disabled: _wrapProp(props, "isSearching"),
 			"q-e:click": props.onSearch$
 		}, {
 			type: "button",
 			class: "bg-primary/10 hover:bg-primary/20 text-primary rounded-lg px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-		}, _fnSignal(_hf0, [props]), 0, null)], 1, null)], 1, null),
+		}, _fnSignal(_hf0, [props], _hf0_str), 0, null)], 1, null)], 1, null),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-end" }, /*#__PURE__*/ _jsxSorted("button", {
 			disabled: _wrapProp(props, "isRefreshing"),
 			"q-e:click": props.onRefresh$
 		}, {
 			type: "button",
 			class: "border-border bg-foreground/5 hover:bg-foreground/10 rounded-lg border px-3 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-		}, _fnSignal(_hf1, [props]), 0, null), 1, null)
-	], 1, null), 1, "DU_0");
+		}, _fnSignal(_hf1, [props], _hf1_str), 0, null), 1, null)
+	], 1, null), 1, "0M_0");
 }, "DependencyToolbar_component_A01yfmGXjeo"));
 export { DependencyToolbar };

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

@@ -6,16 +6,16 @@ var InstalledDependencyList = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQr
 		"Dependencies are being preloaded in the background...",
 		/*#__PURE__*/ _jsxSorted("br", null, null, null, 3, null),
 		"This should only take a moment"
-	], 3, null)], 3, null), 3, "Bb_0");
-	if (props.dependencies.length === 0) return /*#__PURE__*/ _jsxSorted("div", null, { class: "py-8 text-center" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, "No dependencies found in package.json", 3, null), 3, "Bb_1");
+	], 3, null)], 3, null), 3, "Jr_0");
+	if (props.dependencies.length === 0) return /*#__PURE__*/ _jsxSorted("div", null, { class: "py-8 text-center" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, "No dependencies found in package.json", 3, null), 3, "Jr_1");
 	if (props.filteredDependencies.length === 0) return /*#__PURE__*/ _jsxSorted("div", null, { class: "py-8 text-center" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, [
 		"No installed dependencies match \"",
 		_wrapProp(props, "searchKeyword"),
 		"\""
-	], 1, null), 1, "Bb_2");
+	], 1, null), 1, "Jr_2");
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "grid gap-4 md:grid-cols-2 lg:grid-cols-3" }, props.filteredDependencies.map((pkg) => /*#__PURE__*/ _jsxSorted(DependencyCard, {
 		onUpdate$: props.onUpdate$,
 		pkg
-	}, { activeOperationKey: _wrapProp(props, "activeOperationKey") }, null, 2, pkg.name)), 1, "Bb_3");
+	}, { activeOperationKey: _wrapProp(props, "activeOperationKey") }, null, 2, pkg.name)), 1, "Jr_3");
 }, "InstalledDependencyList_component_uodXFl0i7Y0"));
 export { InstalledDependencyList };

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

@@ -6,7 +6,7 @@ var PackageIcon = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps
 		iconError.value = true;
 	}, "PackageIcon_component_handleIconError_6GG7b4NJpQI", [iconError]);
 	const fallbackInitial = _rawProps.packageName.split("/").pop()?.charAt(0).toUpperCase() || _rawProps.packageName.charAt(0).toUpperCase();
-	if (!_rawProps.iconUrl || iconError.value) return /*#__PURE__*/ _jsxSorted("span", null, { class: "text-primary text-sm font-bold" }, fallbackInitial, 1, "JC_0");
+	if (!_rawProps.iconUrl || iconError.value) return /*#__PURE__*/ _jsxSorted("span", null, { class: "text-primary text-sm font-bold" }, fallbackInitial, 1, "6R_0");
 	return /*#__PURE__*/ _jsxSorted("img", {
 		alt: `${_rawProps.packageName} icon`,
 		src: _wrapProp(_rawProps, "iconUrl")
@@ -16,6 +16,6 @@ var PackageIcon = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps
 		height: "24",
 		"q-e:error": handleIconError,
 		loading: "lazy"
-	}, null, 3, "JC_1");
+	}, null, 3, "6R_1");
 }, "PackageIcon_component_JgJ0UtqxVLw"));
 export { PackageIcon };

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

@@ -2,23 +2,24 @@ import { SearchResultCard } from "../SearchResultCard/SearchResultCard.qwik.mjs"
 import "../SearchResultCard/index.qwik.mjs";
 import { _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
 var _hf0 = (p0, p1) => p0.selectedTypes[p1.name] || "devDependencies";
+var _hf0_str = "p0.selectedTypes[p1.name]||\"devDependencies\"";
 var PackageSearchResults = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
 	if (!props.query.trim()) return null;
-	if (props.isSearching) return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg text-muted-foreground rounded-xl border p-4 text-sm" }, "Searching packages...", 3, "bz_0");
+	if (props.isSearching) return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg text-muted-foreground rounded-xl border p-4 text-sm" }, "Searching packages...", 3, "RU_0");
 	if (props.error) return /*#__PURE__*/ _jsxSorted("div", null, { class: "rounded-xl border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-300" }, [/*#__PURE__*/ _jsxSorted("div", null, null, _wrapProp(props, "error"), 1, null), /*#__PURE__*/ _jsxSorted("button", { "q-e:click": props.onRetrySearch$ }, {
 		type: "button",
 		class: "mt-3 rounded-lg bg-red-500/10 px-3 py-1.5 text-xs font-medium hover:bg-red-500/20"
-	}, "Retry", 2, null)], 1, "bz_1");
+	}, "Retry", 2, null)], 1, "RU_1");
 	if (props.results.length === 0) return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg text-muted-foreground rounded-xl border p-4 text-sm" }, [
 		"No external packages found for \"",
 		_wrapProp(props, "query"),
 		"\"."
-	], 1, "bz_2");
+	], 1, "RU_2");
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-col gap-3" }, props.results.map((result) => /*#__PURE__*/ _jsxSorted(SearchResultCard, {
 		onInstall$: props.onInstall$,
 		onTypeChange$: props.onTypeChange$,
 		result,
-		selectedType: _fnSignal(_hf0, [props, result])
-	}, { activeOperationKey: _wrapProp(props, "activeOperationKey") }, null, 2, result.name)), 1, "bz_3");
+		selectedType: _fnSignal(_hf0, [props, result], _hf0_str)
+	}, { activeOperationKey: _wrapProp(props, "activeOperationKey") }, null, 2, result.name)), 1, "RU_3");
 }, "PackageSearchResults_component_EKXKiudzonI"));
 export { PackageSearchResults };

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 { _captures, _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) => {
+			const props = _captures[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(() => {
+			const props = _captures[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

@@ -5,9 +5,13 @@ 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";
 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);
@@ -70,13 +74,13 @@ 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,
@@ -84,18 +88,18 @@ var Performance = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps
 					const c = _captures[0], onSelect = _captures[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 = {