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

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

@@ -8,8 +8,11 @@ import { HookFiltersCard } from "../RenderTree/components/HookFiltersCard.qwik.m
 import { IconButton } from "../../components/IconButton/IconButton.qwik.mjs";
 import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.value ? "Picking..." : "Pick";
+var _hf0_str = "p0.value?\"Picking...\":\"Pick\"";
 var _hf1 = (p0) => p0.value ? "Collapse all" : "Expand all";
+var _hf1_str = "p0.value?\"Collapse all\":\"Expand all\"";
 var _hf2 = (p0) => p0.value ? "Collapse" : "Expand";
+var _hf2_str = "p0.value?\"Collapse\":\"Expand\"";
 var EXPAND_ANIMATION_DELAY_MS = 250;
 var HIGHLIGHT_FLASH_MS = 1500;
 var LOAD_RETRY_DELAY_MS = 300;
@@ -110,7 +113,8 @@ function buildDetailTree(entries) {
 	}
 	return result;
 }
-/** DOM helpers for expand/scroll/highlight */ function expandAndScrollToNode(targetName) {
+/** DOM helpers for expand/scroll/highlight */
+function expandAndScrollToNode(targetName) {
 	requestAnimationFrame(() => {
 		const container = document.getElementById("hook-tree-left");
 		if (!container) return;
@@ -165,7 +169,7 @@ var HookTree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 	const editValue = useSignal("");
 	const inspecting = useSignal(false);
 	const handleElementPicked = /*#__PURE__*/ inlinedQrl((payload) => {
-		const inspecting = _captures[0], treeData = _captures[1];
+		const inspecting = _captures[0], onNodeClick = _captures[1], treeData = _captures[2];
 		inspecting.value = false;
 		let found = null;
 		if (payload.treeNodeId) found = findNodeById(treeData.value, payload.treeNodeId);
@@ -174,7 +178,11 @@ var HookTree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 			onNodeClick(found);
 			expandAndScrollToNode(found.label || found.name || "");
 		}
-	}, "HookTree_component_handleElementPicked_Tg1fX7eTA88", [inspecting, treeData]);
+	}, "HookTree_component_handleElementPicked_Tg1fX7eTA88", [
+		inspecting,
+		onNodeClick,
+		treeData
+	]);
 	const applyFilters = /*#__PURE__*/ inlinedQrl((tree, filters) => {
 		if (filters.length === 0) return tree;
 		return tree.filter((node) => filters.some((f) => f.key === node.label && f.display));
@@ -441,81 +449,84 @@ var HookTree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 		}, [/*#__PURE__*/ _jsxSorted("div", null, { class: "mb-2 flex items-center gap-1" }, [/*#__PURE__*/ _jsxSorted(IconButton, { onClick$: inspecting.value ? stopInspect : startInspect }, {
 			active: _wrapProp(inspecting),
 			title: "Select a component on the page"
-		}, [/*#__PURE__*/ _jsxSorted(IconTarget, null, { class: "h-3.5 w-3.5" }, null, 3, "uB_0"), _fnSignal(_hf0, [inspecting])], 0, "uB_1"), /*#__PURE__*/ _jsxSorted(IconButton, null, {
+		}, [/*#__PURE__*/ _jsxSorted(IconTarget, null, { class: "h-3.5 w-3.5" }, null, 3, "n0_2"), _fnSignal(_hf0, [inspecting], _hf0_str)], 0, "n0_3"), /*#__PURE__*/ _jsxSorted(IconButton, null, {
 			onClick$: toggleTreeExpand,
-			title: _fnSignal(_hf1, [treeExpanded])
+			title: _fnSignal(_hf1, [treeExpanded], _hf1_str)
 		}, [/*#__PURE__*/ _jsxSorted(IconExpandShrink, null, {
 			class: "h-3.5 w-3.5",
 			expanded: _wrapProp(treeExpanded)
-		}, null, 3, "uB_2"), _fnSignal(_hf2, [treeExpanded])], 1, "uB_3")], 1, null), /*#__PURE__*/ _jsxSorted("div", null, {
+		}, null, 3, "n0_4"), _fnSignal(_hf2, [treeExpanded], _hf2_str)], 1, "n0_5")], 1, null), /*#__PURE__*/ _jsxSorted("div", null, {
 			id: "hook-tree-left",
 			class: "min-h-0 flex-1 overflow-y-auto"
-		}, treeData.value.length === 0 ? /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex h-full items-center justify-center text-sm" }, "Waiting for component tree...", 3, "uB_4") : /*#__PURE__*/ _jsxSorted(Tree, { onRevealed$: /*#__PURE__*/ inlinedQrl(() => {
-			const _rawProps = _captures[0];
-			return _rawProps.state.componentReveal = null;
-		}, "HookTree_component_div_div_div_div_Tree_onRevealed_bBy7gH7s5cA", [_rawProps]) }, {
-			data: treeData,
+		}, treeData.value.length === 0 ? /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex h-full items-center justify-center text-sm" }, "Waiting for component tree...", 3, "n0_6") : /*#__PURE__*/ _jsxSorted(Tree, {
 			onNodeClick,
+			onRevealed$: /*#__PURE__*/ inlinedQrl(() => {
+				const _rawProps = _captures[0];
+				return _rawProps.state.componentReveal = null;
+			}, "HookTree_component_div_div_div_div_Tree_onRevealed_bBy7gH7s5cA", [_rawProps])
+		}, {
+			data: treeData,
 			revealNode
 		}, null, 2, treeVersion.value), 1, null)], 1, null),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border border-l" }, 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(RenderTreeTabs, {
-				onCodeClick$: /*#__PURE__*/ inlinedQrl(() => {
-					const currentTab = _captures[0];
-					return currentTab.value = "code";
-				}, "HookTree_component_div_div_div_RenderTreeTabs_onCodeClick_0lAe8vTbWRQ", [currentTab]),
+			/*#__PURE__*/ _jsxSorted(RenderTreeTabs, null, {
+				currentTab: _wrapProp(currentTab),
 				onStateClick$: /*#__PURE__*/ inlinedQrl(() => {
 					const currentTab = _captures[0];
 					return currentTab.value = "state";
-				}, "HookTree_component_div_div_div_RenderTreeTabs_onStateClick_91eAngQRRXU", [currentTab])
-			}, { currentTab: _wrapProp(currentTab) }, null, 2, "uB_5"),
-			currentTab.value === "state" && /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-5 flex min-h-0 flex-1 flex-col" }, [hookFilters.value.length > 0 && /*#__PURE__*/ _jsxSorted(HookFiltersCard, { onToggleOpen$: /*#__PURE__*/ inlinedQrl(() => {
-				const hooksOpen = _captures[0];
-				return hooksOpen.value = !hooksOpen.value;
-			}, "HookTree_component_div_div_div_div_HookFiltersCard_onToggleOpen_wb4o4GAUjKQ", [hooksOpen]) }, {
+				}, "HookTree_component_div_div_div_RenderTreeTabs_onStateClick_91eAngQRRXU", [currentTab]),
+				onCodeClick$: /*#__PURE__*/ inlinedQrl(() => {
+					const currentTab = _captures[0];
+					return currentTab.value = "code";
+				}, "HookTree_component_div_div_div_RenderTreeTabs_onCodeClick_0lAe8vTbWRQ", [currentTab])
+			}, null, 3, "n0_7"),
+			currentTab.value === "state" && /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-5 flex min-h-0 flex-1 flex-col" }, [hookFilters.value.length > 0 && /*#__PURE__*/ _jsxSorted(HookFiltersCard, null, {
 				filters: _wrapProp(hookFilters),
 				isOpen: _wrapProp(hooksOpen),
 				onSelectAll$: handleSelectAll,
 				onClear$: handleClear,
+				onToggleOpen$: /*#__PURE__*/ inlinedQrl(() => {
+					const hooksOpen = _captures[0];
+					return hooksOpen.value = !hooksOpen.value;
+				}, "HookTree_component_div_div_div_div_HookFiltersCard_onToggleOpen_wb4o4GAUjKQ", [hooksOpen]),
 				onFilterChange$: handleFilterChange
-			}, null, 2, "uB_6"), stateTree.value.length > 0 ? /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-4 min-h-0 flex-1 overflow-y-auto p-2" }, /*#__PURE__*/ _jsxSorted(Tree, { renderNode: /*#__PURE__*/ inlinedQrl((node) => {
-				const cancelEdit = _captures[0], commitEdit = _captures[1], editValue = _captures[2];
-				if (_captures[3].value === node.id) return /*#__PURE__*/ _jsxSorted("form", null, {
-					"preventdefault:submit": true,
-					"q-e:submit": commitEdit,
-					class: "inline-flex items-center gap-1"
-				}, [/*#__PURE__*/ _jsxSorted("input", {
-					"q-e:input": /*#__PURE__*/ inlinedQrl((_, el, _2, editValue) => {
-						editValue.value = el.value;
-					}, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_input_z05hdrGPzhg").m(),
-					"q-e:keydown": /*#__PURE__*/ inlinedQrl((e, _1, cancelEdit) => {
-						if (e.key === "Escape") cancelEdit();
-					}, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_keydown_0AuxXsO3Wa0").m(),
-					"q:ps": [cancelEdit, editValue]
-				}, {
-					type: "text",
-					class: "border-primary/50 bg-card-item-hover-bg text-foreground focus:border-primary w-32 rounded border px-1.5 py-0.5 text-xs outline-none",
-					value: _wrapProp(editValue),
-					autoFocus: true
-				}, null, 6, null), /*#__PURE__*/ _jsxSorted("button", null, {
-					type: "submit",
-					class: "bg-primary/20 text-primary hover:bg-primary/30 rounded px-1.5 py-0.5 text-xs"
-				}, "ok", 3, null)], 1, "uB_7");
-				return /*#__PURE__*/ _jsxSorted(StateTreeNodeLabel, { node }, null, null, 3, "uB_8");
-			}, "HookTree_component_div_div_div_div_div_Tree_renderNode_vC6C4CEUHF8", [
-				cancelEdit,
-				commitEdit,
-				editValue,
-				editingNodeId
-			]) }, {
+			}, null, 3, "n0_8"), stateTree.value.length > 0 ? /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-4 min-h-0 flex-1 overflow-y-auto p-2" }, /*#__PURE__*/ _jsxSorted(Tree, { onNodeClick: onStateNodeClick }, {
 				data: stateTree,
 				gap: 10,
 				animate: true,
 				animationDuration: 200,
 				isHover: true,
-				onNodeClick: onStateNodeClick
-			}, null, 3, "uB_9"), 1, "uB_10") : /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex h-full items-center justify-center text-sm" }, "Select a component to inspect its state", 3, "uB_11")], 1, "uB_12"),
+				renderNode: /*#__PURE__*/ inlinedQrl((node) => {
+					const cancelEdit = _captures[0], commitEdit = _captures[1], editValue = _captures[2];
+					if (_captures[3].value === node.id) return /*#__PURE__*/ _jsxSorted("form", null, {
+						"preventdefault:submit": true,
+						"q-e:submit": commitEdit,
+						class: "inline-flex items-center gap-1"
+					}, [/*#__PURE__*/ _jsxSorted("input", { value: _wrapProp(editValue) }, {
+						type: "text",
+						class: "border-primary/50 bg-card-item-hover-bg text-foreground focus:border-primary w-32 rounded border px-1.5 py-0.5 text-xs outline-none",
+						"q-e:input": /*#__PURE__*/ inlinedQrl((_, el) => {
+							const editValue = _captures[0];
+							editValue.value = el.value;
+						}, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_input_z05hdrGPzhg", [editValue]),
+						"q-e:keydown": /*#__PURE__*/ inlinedQrl((e) => {
+							const cancelEdit = _captures[0];
+							if (e.key === "Escape") cancelEdit();
+						}, "HookTree_component_div_div_div_div_div_Tree_renderNode_form_input_q_e_keydown_0AuxXsO3Wa0", [cancelEdit]),
+						autoFocus: true
+					}, null, 3, null), /*#__PURE__*/ _jsxSorted("button", null, {
+						type: "submit",
+						class: "bg-primary/20 text-primary hover:bg-primary/30 rounded px-1.5 py-0.5 text-xs"
+					}, "ok", 3, null)], 1, "n0_0");
+					return /*#__PURE__*/ _jsxSorted(StateTreeNodeLabel, { node }, null, null, 3, "n0_1");
+				}, "HookTree_component_div_div_div_div_div_Tree_renderNode_vC6C4CEUHF8", [
+					cancelEdit,
+					commitEdit,
+					editValue,
+					editingNodeId
+				])
+			}, null, 3, "n0_9"), 1, "n0_10") : /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex h-full items-center justify-center text-sm" }, "Select a component to inspect its state", 3, "n0_11")], 1, "n0_12"),
 			currentTab.value === "code" && /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg mt-4 flex min-h-0 flex-1 items-center justify-center rounded-xl border p-4" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "text-center" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "font-medium" }, "Code", 3, null), " requires the Qwik DevTools Vite plugin."], 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground/60 mt-2 text-xs" }, [
 				"Available in the in-app overlay when running",
 				" ",
@@ -523,8 +534,8 @@ var HookTree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 				" with",
 				" ",
 				/*#__PURE__*/ _jsxSorted("code", null, { class: "bg-card-item-hover-bg rounded px-1.5 py-0.5" }, "@qwik.dev/devtools", 3, null)
-			], 3, null)], 3, null), 3, "uB_13")
+			], 3, null)], 3, null), 3, "n0_13")
 		], 1, null)
-	], 1, null), 1, "uB_14");
+	], 1, null), 1, "n0_14");
 }, "HookTree_component_Q5wO3ucVIeA"));
 export { HookTree };

package/dist/ui/packages/devtools/ui/src/features/HookTree/hookTreeHelpers.qwik.mjs

@@ -1,4 +1,5 @@
-/** VNodeTreeNode -> TreeNode conversion */ function toTreeNodes(vnodes) {
+/** VNodeTreeNode -> TreeNode conversion */
+function toTreeNodes(vnodes) {
 	return vnodes.map((v) => ({
 		id: v.id,
 		name: v.name,
@@ -7,7 +8,8 @@
 		children: v.children ? toTreeNodes(v.children) : void 0
 	}));
 }
-/** Quick structural fingerprint from node IDs. */ function treeIdFingerprint(nodes) {
+/** Quick structural fingerprint from node IDs. */
+function treeIdFingerprint(nodes) {
 	const ids = [];
 	const walk = (list) => {
 		for (const n of list) {
@@ -18,7 +20,8 @@
 	walk(nodes);
 	return ids.join(",");
 }
-/** Tree search helpers */ function findNodeById(nodes, id) {
+/** Tree search helpers */
+function findNodeById(nodes, id) {
 	for (const node of nodes) {
 		if (node.id === id) return node;
 		if (node.children) {

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

@@ -5,24 +5,25 @@ import { _jsxSorted, componentQrl, inlinedQrl, isBrowser } from "@qwik.dev/core"
 * Inspect iframe must load under app root (Vite `BASE_URL` + origin), not `location.pathname`, so
 * deep routes do not produce `.../nested/route__inspect/`. SSR: no `location` — return empty until
 * the client runs.
-*/ function getInspectIframeSrc() {
+*/
+function getInspectIframeSrc() {
 	if (!isBrowser) return "";
 	const base = new URL("/", location.origin);
 	return new URL(inspectorLink, base).href;
 }
 var Inspect = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
-	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg h-full w-full flex-1 overflow-hidden rounded-2xl border" }, /*#__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_yjJo1Bx5M0w") }, {
-		src: getInspectIframeSrc(),
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg h-full w-full flex-1 overflow-hidden rounded-2xl border" }, /*#__PURE__*/ _jsxSorted("iframe", { src: getInspectIframeSrc() }, {
 		width: "100%",
 		height: "100%",
 		id: "inspect_qwik",
-		class: "h-full w-full rounded-xl"
-	}, null, 2, null), 1, "XI_0");
+		class: "h-full w-full rounded-xl",
+		"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_yjJo1Bx5M0w")
+	}, null, 3, null), 1, "sh_0");
 }, "Inspect_component_domPlQHzbck"));
 export { Inspect };

package/dist/ui/packages/devtools/ui/src/features/Inspect/iframe-theme.qwik.mjs

@@ -26,7 +26,8 @@ var GLASSMORPHISM_CSS = `
   html.dark { color: #fafafa !important; }
   html, body, #app { overflow-x: hidden !important; max-width: 100vw !important; }
 `;
-/** 在 iframe onLoad 中调用，同步父主题 + 注入透明背景样式 */ function setupIframeThemeSync(iframe) {
+/** 在 iframe onLoad 中调用，同步父主题 + 注入透明背景样式 */
+function setupIframeThemeSync(iframe) {
 	const doc = iframe.contentDocument;
 	const win = iframe.contentWindow;
 	if (!doc || !win) return;

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

@@ -3,9 +3,13 @@ import { InfoBanner } from "../../components/InfoBanner/InfoBanner.qwik.mjs";
 import { _captures, _fnSignal, _jsxSorted, _qrlSync, componentQrl, inlinedQrl } from "@qwik.dev/core";
 import { Fragment } from "@qwik.dev/core/jsx-runtime";
 var _hf0 = (p0) => p0.state.routes?.length;
+var _hf0_str = "p0.state.routes?.length";
 var _hf1 = (p0) => p0.state.components.length;
+var _hf1_str = "p0.state.components.length";
 var _hf2 = (p0) => p0.state.assets.length || 0;
+var _hf2_str = "p0.state.assets.length||0";
 var Overview = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const isExtension = _rawProps.state.isExtension;
 	const pageJump = /*#__PURE__*/ inlinedQrl((pageName) => {
 		const _rawProps = _captures[0];
 		_rawProps.state.activeTab = pageName;
@@ -14,33 +18,33 @@ var Overview = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 		e.preventDefault();
 	}, "e=>{e.preventDefault();}");
 	return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [
-		_rawProps.state.isExtension && _rawProps.state.vitePluginDetected && /*#__PURE__*/ _jsxSorted(InfoBanner, null, { class: "mb-5" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground font-medium" }, "Vite plugin detected", 3, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, [" ", "- the in-app overlay has additional features (routes, assets, packages, code inspection)"], 3, null)], 3, "G0_0"),
+		isExtension && _rawProps.state.vitePluginDetected && /*#__PURE__*/ _jsxSorted(InfoBanner, null, { class: "mb-5" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground font-medium" }, "Vite plugin detected", 3, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, [" ", "- the in-app overlay has additional features (routes, assets, packages, code inspection)"], 3, null)], 3, "pG_0"),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-5 md:grid-cols-3" }, [
-			!_rawProps.state.isExtension && /*#__PURE__*/ _jsxSorted("div", { "q-e:click": [/*#__PURE__*/ inlinedQrl(() => {
+			!isExtension && /*#__PURE__*/ _jsxSorted("div", { "q-e:click": [/*#__PURE__*/ inlinedQrl(() => {
 				const pageJump = _captures[0];
 				return pageJump("routes");
-			}, "Overview_component_Fragment_div_div_q_e_click_qb0eJJi67Us", [pageJump]), stopPropagation] }, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 border-border rounded-lg border p-3.5" }, /*#__PURE__*/ _jsxSorted(IconFolderTree, null, { class: "text-accent h-6 w-6" }, null, 3, "G0_1"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, null, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-3xl font-semibold" }, _fnSignal(_hf0, [_rawProps]), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, "pages", 3, null)], 1, null)], 0, "G0_2"),
+			}, "Overview_component_Fragment_div_div_q_e_click_qb0eJJi67Us", [pageJump]), stopPropagation] }, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 border-border rounded-lg border p-3.5" }, /*#__PURE__*/ _jsxSorted(IconFolderTree, null, { class: "text-accent h-6 w-6" }, null, 3, "pG_1"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, null, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-3xl font-semibold" }, _fnSignal(_hf0, [_rawProps], _hf0_str), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, "pages", 3, null)], 1, null)], 0, "pG_2"),
 			/*#__PURE__*/ _jsxSorted("div", { "q-e:click": [/*#__PURE__*/ inlinedQrl(() => {
 				const pageJump = _captures[0];
 				return pageJump("renderTree");
-			}, "Overview_component_Fragment_div_div_q_e_click_1_B7lsWRRqMVk", [pageJump]), stopPropagation] }, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 border-border rounded-lg border p-3.5" }, /*#__PURE__*/ _jsxSorted(IconCubeOutline, null, { class: "text-accent h-6 w-6" }, null, 3, "G0_3"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, null, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-3xl font-semibold" }, _fnSignal(_hf1, [_rawProps]), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, "components", 3, null)], 1, null)], 0, null),
-			!_rawProps.state.isExtension && /*#__PURE__*/ _jsxSorted("div", { "q-e:click": [/*#__PURE__*/ inlinedQrl(() => {
+			}, "Overview_component_Fragment_div_div_q_e_click_1_B7lsWRRqMVk", [pageJump]), stopPropagation] }, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 border-border rounded-lg border p-3.5" }, /*#__PURE__*/ _jsxSorted(IconCubeOutline, null, { class: "text-accent h-6 w-6" }, null, 3, "pG_3"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, null, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-3xl font-semibold" }, _fnSignal(_hf1, [_rawProps], _hf1_str), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, "components", 3, null)], 1, null)], 0, null),
+			!isExtension && /*#__PURE__*/ _jsxSorted("div", { "q-e:click": [/*#__PURE__*/ inlinedQrl(() => {
 				const pageJump = _captures[0];
 				return pageJump("assets");
-			}, "Overview_component_Fragment_div_div_q_e_click_2_ZsZbMuPvZFo", [pageJump]), stopPropagation] }, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 border-border rounded-lg border p-3.5" }, /*#__PURE__*/ _jsxSorted(IconPhotoOutline, null, { class: "text-accent h-6 w-6" }, null, 3, "G0_4"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, null, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-3xl font-semibold" }, _fnSignal(_hf2, [_rawProps]), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, "assets", 3, null)], 1, null)], 0, "G0_5")
+			}, "Overview_component_Fragment_div_div_q_e_click_2_ZsZbMuPvZFo", [pageJump]), stopPropagation] }, { class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 border-border rounded-lg border p-3.5" }, /*#__PURE__*/ _jsxSorted(IconPhotoOutline, null, { class: "text-accent h-6 w-6" }, null, 3, "pG_4"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, null, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-3xl font-semibold" }, _fnSignal(_hf2, [_rawProps], _hf2_str), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, "assets", 3, null)], 1, null)], 0, "pG_5")
 		], 1, null),
 		_rawProps.state.npmPackages.length > 0 && /*#__PURE__*/ _jsxSorted("div", {
-			class: ["border-border bg-card-item-bg mt-6 space-y-4 rounded-xl border p-5 md:mt-6", !_rawProps.state.isExtension && "hover:bg-card-item-hover-bg cursor-pointer hover:-translate-y-0.5"],
-			"q-e:click": _rawProps.state.isExtension ? void 0 : [/*#__PURE__*/ inlinedQrl(() => {
+			class: ["border-border bg-card-item-bg mt-6 space-y-4 rounded-xl border p-5 md:mt-6", !isExtension && "hover:bg-card-item-hover-bg cursor-pointer hover:-translate-y-0.5"],
+			"q-e:click": isExtension ? void 0 : [/*#__PURE__*/ inlinedQrl(() => {
 				const pageJump = _captures[0];
 				return pageJump("packages");
 			}, "Overview_component_Fragment_div_q_e_click_vcC0WjWKJuE", [pageJump]), stopPropagation]
-		}, null, [/*#__PURE__*/ _jsxSorted("h3", null, { class: "text-lg font-semibold" }, "Installed Packages", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-3 md:grid-cols-2" }, _rawProps.state.npmPackages.map(([name, version]) => /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 flex items-center justify-between rounded-lg p-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-sm" }, name, 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 border-border text-muted-foreground rounded-full border px-2 py-1 text-xs" }, version, 1, null)], 1, name)), 1, null)], 0, "G0_6"),
+		}, null, [/*#__PURE__*/ _jsxSorted("h3", null, { class: "text-lg font-semibold" }, "Installed Packages", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-3 md:grid-cols-2" }, _rawProps.state.npmPackages.map(([name, version]) => /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 flex items-center justify-between rounded-lg p-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-sm" }, name, 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 border-border text-muted-foreground rounded-full border px-2 py-1 text-xs" }, version, 1, null)], 1, name)), 1, null)], 0, "pG_6"),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-border bg-card-item-bg mt-6 space-y-4 rounded-xl border p-5 md:mt-6" }, [/*#__PURE__*/ _jsxSorted("h3", null, { class: "text-lg font-semibold" }, "Performance", 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "space-y-3" }, [
 			/*#__PURE__*/ _jsxSorted("div", null, { class: "border-border flex justify-between border-b py-2" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, "SSR to full load", 3, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "font-medium" }, "-", 3, null)], 3, null),
 			/*#__PURE__*/ _jsxSorted("div", null, { class: "border-border flex justify-between border-b py-2" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, "Page load", 3, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "font-medium" }, "-", 3, null)], 3, null),
 			/*#__PURE__*/ _jsxSorted("div", null, { class: "flex justify-between py-2" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, "Navigation", 3, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "font-medium" }, "-", 3, null)], 3, null)
 		], 3, null)], 3, null)
-	], 1, "G0_7");
+	], 1, "pG_7");
 }, "Overview_component_05j1MjtAwR0"));
 export { Overview };

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

@@ -10,6 +10,7 @@ import { PackageSearchResults } from "./components/PackageSearchResults/PackageS
 import "./components/PackageSearchResults/index.qwik.mjs";
 import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useStore, useVisibleTaskQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.state.isLoadingDependencies;
+var _hf0_str = "p0.state.isLoadingDependencies";
 var Packages = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	const installedSearch = useSignal("");
 	const packageSearch = useSignal("");
@@ -202,7 +203,11 @@ var Packages = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 		cleanup(() => window.clearInterval(interval));
 	}, "Packages_component_useVisibleTask_XrRVvgaLnoU", [_rawProps]));
 	return /*#__PURE__*/ _jsxSorted("div", null, { class: "flex h-full min-h-0 flex-col gap-4" }, [
-		/*#__PURE__*/ _jsxSorted(DependencyToolbar, {
+		/*#__PURE__*/ _jsxSorted(DependencyToolbar, null, {
+			installedSearch: _wrapProp(installedSearch),
+			packageSearch: _wrapProp(packageSearch),
+			isRefreshing: _wrapProp(isRefreshing),
+			isSearching: _wrapProp(isSearching),
 			onInstalledSearch$: /*#__PURE__*/ inlinedQrl((value) => {
 				const installedSearch = _captures[0];
 				installedSearch.value = value;
@@ -210,26 +215,19 @@ var Packages = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 			onPackageSearch$: /*#__PURE__*/ inlinedQrl((value) => {
 				const packageSearch = _captures[0];
 				packageSearch.value = value;
-			}, "Packages_component_div_DependencyToolbar_onPackageSearch_RhfweH40tz8", [packageSearch])
-		}, {
-			installedSearch: _wrapProp(installedSearch),
-			packageSearch: _wrapProp(packageSearch),
-			isRefreshing: _wrapProp(isRefreshing),
-			isSearching: _wrapProp(isSearching),
+			}, "Packages_component_div_DependencyToolbar_onPackageSearch_RhfweH40tz8", [packageSearch]),
 			onSearch$: runPackageSearch,
 			onRefresh$: refreshDependencies
-		}, null, 2, "Kn_0"),
-		/*#__PURE__*/ _jsxSorted(DependencyOperationFeedback, { onDismiss$: /*#__PURE__*/ inlinedQrl(() => {
-			const feedback = _captures[0];
-			feedback.value = null;
-		}, "Packages_component_div_DependencyOperationFeedback_onDismiss_Vs5uHnyH1n8", [feedback]) }, {
+		}, null, 3, "Kq_0"),
+		/*#__PURE__*/ _jsxSorted(DependencyOperationFeedback, null, {
 			feedback: _wrapProp(feedback),
-			onRetry$: retryLastOperation
-		}, null, 2, "Kn_1"),
-		/*#__PURE__*/ _jsxSorted(PackageSearchResults, { onTypeChange$: /*#__PURE__*/ inlinedQrl((packageName, dependencyType) => {
-			const selectedTypes = _captures[0];
-			selectedTypes[packageName] = dependencyType;
-		}, "Packages_component_div_PackageSearchResults_onTypeChange_DUQ8MUEyaY4", [selectedTypes]) }, {
+			onRetry$: retryLastOperation,
+			onDismiss$: /*#__PURE__*/ inlinedQrl(() => {
+				const feedback = _captures[0];
+				feedback.value = null;
+			}, "Packages_component_div_DependencyOperationFeedback_onDismiss_Vs5uHnyH1n8", [feedback])
+		}, null, 3, "Kq_1"),
+		/*#__PURE__*/ _jsxSorted(PackageSearchResults, null, {
 			query: _wrapProp(packageSearch),
 			results: _wrapProp(searchResults),
 			error: _wrapProp(searchError),
@@ -237,16 +235,19 @@ var Packages = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) =
 			activeOperationKey: _wrapProp(activeOperationKey),
 			selectedTypes,
 			onRetrySearch$: runPackageSearch,
+			onTypeChange$: /*#__PURE__*/ inlinedQrl((packageName, dependencyType) => {
+				const selectedTypes = _captures[0];
+				selectedTypes[packageName] = dependencyType;
+			}, "Packages_component_div_PackageSearchResults_onTypeChange_DUQ8MUEyaY4", [selectedTypes]),
 			onInstall$: installPackage
-		}, null, 2, "Kn_2"),
-		/*#__PURE__*/ _jsxSorted(InstalledDependencyList, null, {
+		}, null, 3, "Kq_2"),
+		/*#__PURE__*/ _jsxSorted(InstalledDependencyList, { isLoading: _fnSignal(_hf0, [_rawProps], _hf0_str) }, {
 			dependencies: _wrapProp(packages),
 			filteredDependencies: _wrapProp(filteredPackages),
-			isLoading: _fnSignal(_hf0, [_rawProps]),
 			searchKeyword: _wrapProp(installedSearch),
 			activeOperationKey: _wrapProp(activeOperationKey),
 			onUpdate$: updatePackage
-		}, null, 3, "Kn_3")
-	], 1, "Kn_4");
+		}, null, 3, "Kq_3")
+	], 1, "Kq_4");
 }, "Packages_component_M0NSps63wxg"));
 export { Packages };

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

@@ -3,22 +3,30 @@ import { PackageIcon } from "../PackageIcon/PackageIcon.qwik.mjs";
 import "../PackageIcon/index.qwik.mjs";
 import { _captures, _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.pkg.name;
+var _hf0_str = "p0.pkg.name";
 var _hf1 = (p0) => p0.pkg.iconUrl;
+var _hf1_str = "p0.pkg.iconUrl";
 var _hf2 = (p0) => p0.pkg.currentVersion;
+var _hf2_str = "p0.pkg.currentVersion";
 var _hf3 = (p0) => p0.pkg.latestVersion;
+var _hf3_str = "p0.pkg.latestVersion";
 var _hf4 = (p0) => p0.pkg.description || "No description available";
+var _hf4_str = "p0.pkg.description||\"No description available\"";
 var _hf5 = (p0) => p0.activeOperationKey === `update:${p0.pkg.name}`;
+var _hf5_str = "p0.activeOperationKey===`update:${p0.pkg.name}`";
 var _hf6 = (p0) => p0.activeOperationKey === `update:${p0.pkg.name}` ? "Updating..." : "Update Now";
+var _hf6_str = "p0.activeOperationKey===`update:${p0.pkg.name}`?\"Updating...\":\"Update Now\"";
 var DependencyCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
-	const authorDisplayName = (typeof _rawProps.pkg.author === "string" ? _rawProps.pkg.author.trim() : (_rawProps.pkg.author?.name || "").trim()) || "Unknown";
+	const author = _rawProps.pkg.author;
+	const authorDisplayName = (typeof author === "string" ? author.trim() : (author?.name || "").trim()) || "Unknown";
 	const authorInitials = authorDisplayName.split(/\s+/).filter(Boolean).map((n) => n.charAt(0)).join("").substring(0, 2).toUpperCase() || "??";
 	const handleAuthorClick = /*#__PURE__*/ inlinedQrl(() => {
-		const _rawProps = _captures[0];
-		if (typeof _rawProps.pkg.author !== "string") {
-			if (_rawProps.pkg.author?.url) window.open(_rawProps.pkg.author.url, "_blank");
-			else if (_rawProps.pkg.author?.email) window.open(`mailto:${_rawProps.pkg.author.email}`, "_blank");
+		const author = _captures[0];
+		if (typeof author !== "string") {
+			if (author?.url) window.open(author.url, "_blank");
+			else if (author?.email) window.open(`mailto:${author.email}`, "_blank");
 		}
-	}, "DependencyCard_component_handleAuthorClick_Z27jxExGLYo", [_rawProps]);
+	}, "DependencyCard_component_handleAuthorClick_Z27jxExGLYo", [author]);
 	const handlePackageClick = /*#__PURE__*/ inlinedQrl(() => {
 		const _rawProps = _captures[0];
 		if (_rawProps.pkg.npmUrl) window.open(_rawProps.pkg.npmUrl, "_blank");
@@ -35,13 +43,13 @@ var DependencyCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-start gap-4" }, [/*#__PURE__*/ _jsxSorted("div", { title: `View ${_rawProps.pkg.name} on npm` }, {
 			class: "from-primary/10 via-primary/20 to-primary/30 border-primary/20 group-hover:shadow-primary/20 flex h-12 w-12 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xl border bg-gradient-to-br shadow-md transition-all duration-300 hover:scale-110 hover:rotate-3",
 			"q-e:click": handlePackageClick
-		}, /*#__PURE__*/ _jsxSorted(PackageIcon, null, {
-			packageName: _fnSignal(_hf0, [_rawProps]),
-			iconUrl: _fnSignal(_hf1, [_rawProps])
-		}, null, 3, "ct_0"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "min-w-0 flex-1" }, [/*#__PURE__*/ _jsxSorted("h3", { title: _fnSignal(_hf0, [_rawProps]) }, {
+		}, /*#__PURE__*/ _jsxSorted(PackageIcon, {
+			iconUrl: _fnSignal(_hf1, [_rawProps], _hf1_str),
+			packageName: _fnSignal(_hf0, [_rawProps], _hf0_str)
+		}, null, null, 3, "y7_0"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "min-w-0 flex-1" }, [/*#__PURE__*/ _jsxSorted("h3", { title: _fnSignal(_hf0, [_rawProps], _hf0_str) }, {
 			class: "text-foreground hover:text-primary mb-1.5 cursor-pointer truncate text-base font-bold transition-colors",
 			"q-e:click": handlePackageClick
-		}, _fnSignal(_hf0, [_rawProps]), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center gap-2" }, [
+		}, _fnSignal(_hf0, [_rawProps], _hf0_str), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center gap-2" }, [
 			/*#__PURE__*/ _jsxSorted("span", null, { class: "bg-primary/10 border-primary/20 text-primary inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-medium" }, [
 				/*#__PURE__*/ _jsxSorted("svg", null, {
 					class: "h-3 w-3",
@@ -55,26 +63,28 @@ var DependencyCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 					d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
 				}, null, 3, null), 3, null),
 				"v",
-				_fnSignal(_hf2, [_rawProps])
+				_fnSignal(_hf2, [_rawProps], _hf2_str)
 			], 1, null),
 			/*#__PURE__*/ _jsxSorted("span", { class: ["inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-medium", getDependencyStatusClass(_rawProps.pkg.status)].join(" ") }, null, getDependencyStatusLabel(_rawProps.pkg.status), 1, null),
-			_rawProps.pkg.latestVersion && _rawProps.pkg.status === "outdated" ? /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground text-xs" }, ["latest v", _fnSignal(_hf3, [_rawProps])], 1, "ct_1") : null
+			_rawProps.pkg.latestVersion && _rawProps.pkg.status === "outdated" ? /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground text-xs" }, ["latest v", _fnSignal(_hf3, [_rawProps], _hf3_str)], 1, "y7_1") : null
 		], 1, null)], 1, null)], 1, null),
-		/*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground line-clamp-2 min-h-[2.5rem] text-sm leading-relaxed" }, _fnSignal(_hf4, [_rawProps]), 1, null),
+		/*#__PURE__*/ _jsxSorted("p", null, { class: "text-muted-foreground line-clamp-2 min-h-[2.5rem] text-sm leading-relaxed" }, _fnSignal(_hf4, [_rawProps], _hf4_str), 1, null),
 		/*#__PURE__*/ _jsxSorted("div", null, { class: "border-border border-t" }, null, 3, null),
-		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center justify-between gap-3" }, [_rawProps.pkg.author ? /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-w-0 flex-1 items-center gap-2" }, [/*#__PURE__*/ _jsxSorted("div", { title: `Contact ${authorDisplayName}` }, {
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center justify-between gap-3" }, [author ? /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-w-0 flex-1 items-center gap-2" }, [/*#__PURE__*/ _jsxSorted("div", { title: `Contact ${authorDisplayName}` }, {
 			class: "from-accent/20 to-accent/40 border-accent/30 flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border bg-gradient-to-br transition-transform hover:scale-110",
 			"q-e:click": handleAuthorClick
-		}, /*#__PURE__*/ _jsxSorted("span", null, { class: "text-accent text-[10px] font-semibold" }, authorInitials, 1, null), 1, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground truncate text-xs" }, /*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground font-medium" }, authorDisplayName, 1, null), 1, null)], 1, "ct_2") : /*#__PURE__*/ _jsxSorted("div", null, { class: "flex-1" }, null, 3, "ct_3"), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center gap-1.5" }, [
+		}, /*#__PURE__*/ _jsxSorted("span", null, { class: "text-accent text-[10px] font-semibold" }, authorInitials, 1, null), 1, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground truncate text-xs" }, /*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground font-medium" }, authorDisplayName, 1, null), 1, null)], 1, "y7_2") : /*#__PURE__*/ _jsxSorted("div", null, { class: "flex-1" }, null, 3, "y7_3"), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center gap-1.5" }, [
 			_rawProps.pkg.status === "outdated" && /*#__PURE__*/ _jsxSorted("button", {
-				disabled: _fnSignal(_hf5, [_rawProps]),
-				"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, _rawProps) => _rawProps.onUpdate$(_rawProps.pkg.name), "DependencyCard_component_div_div_div_div_button_q_e_click_0yYsxJjsZQk").m(),
-				"q:p": _rawProps,
+				disabled: _fnSignal(_hf5, [_rawProps], _hf5_str),
 				title: `Update ${_rawProps.pkg.name}`
 			}, {
 				type: "button",
+				"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+					const _rawProps = _captures[0];
+					return _rawProps.onUpdate$(_rawProps.pkg.name);
+				}, "DependencyCard_component_div_div_div_div_button_q_e_click_0yYsxJjsZQk", [_rawProps]),
 				class: "bg-primary/10 hover:bg-primary/20 text-primary rounded-lg px-2.5 py-1.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-			}, _fnSignal(_hf6, [_rawProps]), 4, "ct_4"),
+			}, _fnSignal(_hf6, [_rawProps], _hf6_str), 1, "y7_4"),
 			_rawProps.pkg.homepage && /*#__PURE__*/ _jsxSorted("button", null, {
 				"q-e:click": handleHomepageClick,
 				class: "hover:bg-primary/10 group/btn text-muted-foreground hover:text-primary rounded-lg p-1.5 transition-all duration-200",
@@ -89,7 +99,7 @@ var DependencyCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 				"stroke-linejoin": "round",
 				"stroke-width": "2",
 				d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-			}, null, 3, null), 3, null), 3, "ct_5"),
+			}, null, 3, null), 3, null), 3, "y7_5"),
 			_rawProps.pkg.repository && /*#__PURE__*/ _jsxSorted("button", null, {
 				"q-e:click": handleRepositoryClick,
 				class: "hover:bg-primary/10 group/btn text-muted-foreground hover:text-primary rounded-lg p-1.5 transition-all duration-200",
@@ -98,7 +108,7 @@ var DependencyCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 				class: "h-4 w-4",
 				fill: "currentColor",
 				viewBox: "0 0 24 24"
-			}, /*#__PURE__*/ _jsxSorted("path", null, { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }, null, 3, null), 3, null), 3, "ct_6"),
+			}, /*#__PURE__*/ _jsxSorted("path", null, { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }, null, 3, null), 3, null), 3, "y7_6"),
 			_rawProps.pkg.npmUrl && /*#__PURE__*/ _jsxSorted("button", null, {
 				"q-e:click": handlePackageClick,
 				class: "hover:bg-primary/10 group/btn text-muted-foreground hover:text-primary rounded-lg p-1.5 transition-all duration-200",
@@ -107,8 +117,8 @@ var DependencyCard = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawPr
 				class: "h-4 w-4",
 				fill: "currentColor",
 				viewBox: "0 0 24 24"
-			}, /*#__PURE__*/ _jsxSorted("path", null, { d: "M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z" }, null, 3, null), 3, null), 3, "ct_7")
+			}, /*#__PURE__*/ _jsxSorted("path", null, { d: "M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z" }, null, 3, null), 3, null), 3, "y7_7")
 		], 1, null)], 1, null)
-	], 1, null)], 1, "ct_8");
+	], 1, null)], 1, "y7_8");
 }, "DependencyCard_component_16iStPKJyzY"));
 export { DependencyCard };

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

@@ -1,14 +1,15 @@
 import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
 var _hf0 = (p0) => p0.feedback.message;
+var _hf0_str = "p0.feedback.message";
 var DependencyOperationFeedback = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
 	if (!_rawProps.feedback) return null;
 	const isError = _rawProps.feedback.type === "error";
-	return /*#__PURE__*/ _jsxSorted("div", { class: ["rounded-xl border px-4 py-3 text-sm", isError ? "border-red-500/20 bg-red-500/10 text-red-300" : "border-emerald-500/20 bg-emerald-500/10 text-emerald-300"].join(" ") }, null, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center justify-between gap-3" }, [/*#__PURE__*/ _jsxSorted("span", null, null, _fnSignal(_hf0, [_rawProps]), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center gap-2" }, [isError && _rawProps.feedback.retryAction ? /*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.onRetry$ }, {
+	return /*#__PURE__*/ _jsxSorted("div", { class: ["rounded-xl border px-4 py-3 text-sm", isError ? "border-red-500/20 bg-red-500/10 text-red-300" : "border-emerald-500/20 bg-emerald-500/10 text-emerald-300"].join(" ") }, null, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-wrap items-center justify-between gap-3" }, [/*#__PURE__*/ _jsxSorted("span", null, null, _fnSignal(_hf0, [_rawProps], _hf0_str), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center gap-2" }, [isError && _rawProps.feedback.retryAction ? /*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.onRetry$ }, {
 		type: "button",
 		class: "rounded-lg bg-foreground/10 px-2.5 py-1 text-xs hover:bg-foreground/20"
-	}, "Retry", 2, "yy_0") : null, /*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.onDismiss$ }, {
+	}, "Retry", 2, "Jo_0") : null, /*#__PURE__*/ _jsxSorted("button", { "q-e:click": _rawProps.onDismiss$ }, {
 		type: "button",
 		class: "rounded-lg bg-foreground/10 px-2.5 py-1 text-xs hover:bg-foreground/20"
-	}, "Dismiss", 2, null)], 1, null)], 1, null), 1, "yy_1");
+	}, "Dismiss", 2, null)], 1, null)], 1, null), 1, "Jo_1");
 }, "DependencyOperationFeedback_component_3LtTZiIpvzQ"));
 export { DependencyOperationFeedback };