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

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

@@ -0,0 +1,28 @@
+import { inspectorLink } from "./constant.qwik.mjs";
+import { setupIframeThemeSync } from "./iframe-theme.qwik.mjs";
+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() {
+	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(),
+		width: "100%",
+		height: "100%",
+		id: "inspect_qwik",
+		class: "h-full w-full rounded-xl"
+	}, null, 2, null), 1, "XI_0");
+}, "Inspect_component_domPlQHzbck"));
+export { Inspect };

package/dist/ui/{features/inspect → packages/devtools/ui/src/features/Inspect}/constant.qwik.mjs

@@ -1,4 +1,2 @@
-//#region src/features/inspect/constant.ts
 var inspectorLink = "__inspect/";
-//#endregion
 export { inspectorLink };

package/dist/ui/{features/inspect → packages/devtools/ui/src/features/Inspect}/iframe-theme.qwik.mjs

@@ -1,4 +1,3 @@
-//#region src/features/inspect/iframe-theme.ts
 var STYLE_ID = "qwik-inspect-custom-style";
 var GLASSMORPHISM_CSS = `
   :root {
@@ -62,5 +61,4 @@ var GLASSMORPHISM_CSS = `
 		styleObs.disconnect();
 	});
 }
-//#endregion
 export { setupIframeThemeSync };

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

@@ -0,0 +1,46 @@
+import { IconCubeOutline, IconFolderTree, IconPhotoOutline } from "../../components/Icons/Icons.qwik.mjs";
+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 _hf1 = (p0) => p0.state.components.length;
+var _hf2 = (p0) => p0.state.assets.length || 0;
+var Overview = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const pageJump = /*#__PURE__*/ inlinedQrl((pageName) => {
+		const _rawProps = _captures[0];
+		_rawProps.state.activeTab = pageName;
+	}, "Overview_component_pageJump_0Fqlp0MwWqk", [_rawProps]);
+	const stopPropagation = _qrlSync((e) => {
+		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"),
+		/*#__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(() => {
+				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"),
+			/*#__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(() => {
+				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")
+		], 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(() => {
+				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"),
+		/*#__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");
+}, "Overview_component_05j1MjtAwR0"));
+export { Overview };

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

@@ -0,0 +1,252 @@
+import { getDevtoolsRpc } from "../../devtools/rpc.qwik.mjs";
+import { DependencyOperationFeedback } from "./components/DependencyOperationFeedback/DependencyOperationFeedback.qwik.mjs";
+import "./components/DependencyOperationFeedback/index.qwik.mjs";
+import { DependencyToolbar } from "./components/DependencyToolbar/DependencyToolbar.qwik.mjs";
+import "./components/DependencyToolbar/index.qwik.mjs";
+import { filterInstalledDependencies, getOperationMessage, markInstalledSearchResults, mergeDependencyRefresh } from "./package-utils.qwik.mjs";
+import { InstalledDependencyList } from "./components/InstalledDependencyList/InstalledDependencyList.qwik.mjs";
+import "./components/InstalledDependencyList/index.qwik.mjs";
+import { PackageSearchResults } from "./components/PackageSearchResults/PackageSearchResults.qwik.mjs";
+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 Packages = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const installedSearch = useSignal("");
+	const packageSearch = useSignal("");
+	const isSearching = useSignal(false);
+	const isRefreshing = useSignal(false);
+	const searchError = useSignal("");
+	const searchResults = useSignal([]);
+	const activeOperationKey = useSignal("");
+	const feedback = useSignal(null);
+	const selectedTypes = useStore({});
+	const lastRetry = useSignal(null);
+	const packages = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		return _captures[0].state.allDependencies;
+	}, "Packages_component_packages_useComputed_5C0oZ6vArhA", [_rawProps]));
+	const filteredPackages = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const installedSearch = _captures[0], packages = _captures[1];
+		return filterInstalledDependencies(packages.value, installedSearch.value);
+	}, "Packages_component_filteredPackages_useComputed_kTFXWZIh16k", [installedSearch, packages]));
+	const applyDependencies = /*#__PURE__*/ inlinedQrl((dependencies) => {
+		const _rawProps = _captures[0], searchResults = _captures[1];
+		_rawProps.state.allDependencies = mergeDependencyRefresh(_rawProps.state.allDependencies, dependencies);
+		searchResults.value = markInstalledSearchResults(searchResults.value, _rawProps.state.allDependencies);
+	}, "Packages_component_applyDependencies_SU3TgVXkgJ8", [_rawProps, searchResults]);
+	const followDependencyEnrichment = /*#__PURE__*/ inlinedQrl(async () => {
+		const applyDependencies = _captures[0];
+		const rpc = await getDevtoolsRpc();
+		for (let i = 0; i < 20; i++) {
+			const status = await rpc.getDependenciesStatus();
+			if (status.phase === "phase2" || status.phase === "done") await applyDependencies(await rpc.getAllDependencies());
+			if (status.phase === "done" || status.phase === "error") return;
+			await new Promise((resolve) => window.setTimeout(resolve, 1500));
+		}
+	}, "Packages_component_followDependencyEnrichment_Ggz9YsHENo0", [applyDependencies]);
+	const refreshDependencies = /*#__PURE__*/ inlinedQrl(async () => {
+		const applyDependencies = _captures[0], followDependencyEnrichment = _captures[1], isRefreshing = _captures[2];
+		isRefreshing.value = true;
+		try {
+			await applyDependencies(await (await getDevtoolsRpc()).refreshDependencies());
+			followDependencyEnrichment();
+		} finally {
+			isRefreshing.value = false;
+		}
+	}, "Packages_component_refreshDependencies_l0sTSKksGQk", [
+		applyDependencies,
+		followDependencyEnrichment,
+		isRefreshing
+	]);
+	const runPackageSearch = /*#__PURE__*/ inlinedQrl(async () => {
+		const _rawProps = _captures[0], isSearching = _captures[1], lastRetry = _captures[2], packageSearch = _captures[3], searchError = _captures[4], searchResults = _captures[5];
+		const query = packageSearch.value.trim();
+		searchError.value = "";
+		lastRetry.value = { action: "search" };
+		if (!query) {
+			searchResults.value = [];
+			return;
+		}
+		isSearching.value = true;
+		try {
+			const response = await (await getDevtoolsRpc()).searchPackages(query);
+			searchResults.value = markInstalledSearchResults(response.results, _rawProps.state.allDependencies);
+			searchError.value = response.error || "";
+		} catch (error) {
+			searchResults.value = [];
+			searchError.value = error instanceof Error ? error.message : "Package search failed";
+		} finally {
+			isSearching.value = false;
+		}
+	}, "Packages_component_runPackageSearch_n9CRJApcOX0", [
+		_rawProps,
+		isSearching,
+		lastRetry,
+		packageSearch,
+		searchError,
+		searchResults
+	]);
+	const installPackage = /*#__PURE__*/ inlinedQrl(async (packageName, dependencyType) => {
+		const activeOperationKey = _captures[0], applyDependencies = _captures[1], feedback = _captures[2], followDependencyEnrichment = _captures[3], lastRetry = _captures[4];
+		activeOperationKey.value = `install:${packageName}`;
+		lastRetry.value = {
+			action: "install",
+			packageName,
+			dependencyType
+		};
+		feedback.value = null;
+		try {
+			const rpc = await getDevtoolsRpc();
+			const result = await rpc.installPackage(packageName, dependencyType);
+			if (!result.success) {
+				feedback.value = {
+					type: "error",
+					message: getOperationMessage("install", packageName, false, result.error),
+					retryAction: "install",
+					packageName
+				};
+				return;
+			}
+			await applyDependencies(await rpc.getAllDependencies());
+			followDependencyEnrichment();
+			feedback.value = {
+				type: "success",
+				message: getOperationMessage("install", packageName, true)
+			};
+		} catch (error) {
+			feedback.value = {
+				type: "error",
+				message: getOperationMessage("install", packageName, false, error instanceof Error ? error.message : "Unknown error"),
+				retryAction: "install",
+				packageName
+			};
+		} finally {
+			activeOperationKey.value = "";
+		}
+	}, "Packages_component_installPackage_kEiiy6cCh8M", [
+		activeOperationKey,
+		applyDependencies,
+		feedback,
+		followDependencyEnrichment,
+		lastRetry
+	]);
+	const updatePackage = /*#__PURE__*/ inlinedQrl(async (packageName) => {
+		const activeOperationKey = _captures[0], applyDependencies = _captures[1], feedback = _captures[2], followDependencyEnrichment = _captures[3], lastRetry = _captures[4];
+		activeOperationKey.value = `update:${packageName}`;
+		lastRetry.value = {
+			action: "update",
+			packageName
+		};
+		feedback.value = null;
+		try {
+			const rpc = await getDevtoolsRpc();
+			const result = await rpc.updatePackage(packageName);
+			if (!result.success) {
+				feedback.value = {
+					type: "error",
+					message: getOperationMessage("update", packageName, false, result.error),
+					retryAction: "update",
+					packageName
+				};
+				return;
+			}
+			await applyDependencies(await rpc.getAllDependencies());
+			followDependencyEnrichment();
+			feedback.value = {
+				type: "success",
+				message: getOperationMessage("update", packageName, true)
+			};
+		} catch (error) {
+			feedback.value = {
+				type: "error",
+				message: getOperationMessage("update", packageName, false, error instanceof Error ? error.message : "Unknown error"),
+				retryAction: "update",
+				packageName
+			};
+		} finally {
+			activeOperationKey.value = "";
+		}
+	}, "Packages_component_updatePackage_H90S6llIA40", [
+		activeOperationKey,
+		applyDependencies,
+		feedback,
+		followDependencyEnrichment,
+		lastRetry
+	]);
+	const retryLastOperation = /*#__PURE__*/ inlinedQrl(async () => {
+		const installPackage = _captures[0], lastRetry = _captures[1], runPackageSearch = _captures[2], updatePackage = _captures[3];
+		const retry = lastRetry.value;
+		if (!retry) return;
+		if (retry.action === "search") {
+			await runPackageSearch();
+			return;
+		}
+		if (retry.action === "install" && retry.packageName && retry.dependencyType) {
+			await installPackage(retry.packageName, retry.dependencyType);
+			return;
+		}
+		if (retry.action === "update" && retry.packageName) await updatePackage(retry.packageName);
+	}, "Packages_component_retryLastOperation_8kA2zKrvEK4", [
+		installPackage,
+		lastRetry,
+		runPackageSearch,
+		updatePackage
+	]);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async ({ cleanup }) => {
+		const _rawProps = _captures[0];
+		const rpc = await getDevtoolsRpc();
+		const interval = window.setInterval(async () => {
+			const status = await rpc.getDependenciesStatus();
+			if (status.phase === "phase2" || status.phase === "done") _rawProps.state.allDependencies = await rpc.getAllDependencies();
+			if (status.phase === "done" || status.phase === "error") window.clearInterval(interval);
+		}, 1500);
+		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, {
+			onInstalledSearch$: /*#__PURE__*/ inlinedQrl((value) => {
+				const installedSearch = _captures[0];
+				installedSearch.value = value;
+			}, "Packages_component_div_DependencyToolbar_onInstalledSearch_Y4apO8fjc0s", [installedSearch]),
+			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),
+			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]) }, {
+			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]) }, {
+			query: _wrapProp(packageSearch),
+			results: _wrapProp(searchResults),
+			error: _wrapProp(searchError),
+			isSearching: _wrapProp(isSearching),
+			activeOperationKey: _wrapProp(activeOperationKey),
+			selectedTypes,
+			onRetrySearch$: runPackageSearch,
+			onInstall$: installPackage
+		}, null, 2, "Kn_2"),
+		/*#__PURE__*/ _jsxSorted(InstalledDependencyList, null, {
+			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");
+}, "Packages_component_M0NSps63wxg"));
+export { Packages };

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

@@ -0,0 +1,114 @@
+import { getDependencyStatusClass, getDependencyStatusLabel } from "../../package-utils.qwik.mjs";
+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 _hf1 = (p0) => p0.pkg.iconUrl;
+var _hf2 = (p0) => p0.pkg.currentVersion;
+var _hf3 = (p0) => p0.pkg.latestVersion;
+var _hf4 = (p0) => p0.pkg.description || "No description available";
+var _hf5 = (p0) => p0.activeOperationKey === `update:${p0.pkg.name}`;
+var _hf6 = (p0) => 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 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");
+		}
+	}, "DependencyCard_component_handleAuthorClick_Z27jxExGLYo", [_rawProps]);
+	const handlePackageClick = /*#__PURE__*/ inlinedQrl(() => {
+		const _rawProps = _captures[0];
+		if (_rawProps.pkg.npmUrl) window.open(_rawProps.pkg.npmUrl, "_blank");
+	}, "DependencyCard_component_handlePackageClick_MvynAcdfp2g", [_rawProps]);
+	const handleHomepageClick = /*#__PURE__*/ inlinedQrl(() => {
+		const _rawProps = _captures[0];
+		if (_rawProps.pkg.homepage) window.open(_rawProps.pkg.homepage, "_blank");
+	}, "DependencyCard_component_handleHomepageClick_G7v4ZbrD5Zs", [_rawProps]);
+	const handleRepositoryClick = /*#__PURE__*/ inlinedQrl(() => {
+		const _rawProps = _captures[0];
+		if (_rawProps.pkg.repository) window.open(_rawProps.pkg.repository, "_blank");
+	}, "DependencyCard_component_handleRepositoryClick_g80bocL0Cfc", [_rawProps]);
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-card-item-bg border-glass-border hover:border-primary/30 hover:shadow-primary/5 group relative rounded-xl border p-5 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "from-primary/0 via-primary/0 to-primary/5 pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br opacity-0 transition-opacity duration-300 group-hover:opacity-100" }, null, 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "relative flex flex-col gap-4" }, [
+		/*#__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]) }, {
+			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" }, [
+			/*#__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",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24"
+				}, /*#__PURE__*/ _jsxSorted("path", null, {
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"stroke-width": "2",
+					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])
+			], 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
+		], 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("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}` }, {
+			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" }, [
+			_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,
+				title: `Update ${_rawProps.pkg.name}`
+			}, {
+				type: "button",
+				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"),
+			_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",
+				title: "Homepage"
+			}, /*#__PURE__*/ _jsxSorted("svg", null, {
+				class: "h-4 w-4",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24"
+			}, /*#__PURE__*/ _jsxSorted("path", null, {
+				"stroke-linecap": "round",
+				"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"),
+			_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",
+				title: "Repository"
+			}, /*#__PURE__*/ _jsxSorted("svg", null, {
+				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"),
+			_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",
+				title: "npm"
+			}, /*#__PURE__*/ _jsxSorted("svg", null, {
+				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")
+		], 1, null)], 1, null)
+	], 1, null)], 1, "ct_8");
+}, "DependencyCard_component_16iStPKJyzY"));
+export { DependencyCard };

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

@@ -0,0 +1,2 @@
+import { DependencyCard } from "./DependencyCard.qwik.mjs";
+export { DependencyCard };

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

@@ -0,0 +1,14 @@
+import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => 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$ }, {
+		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$ }, {
+		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");
+}, "DependencyOperationFeedback_component_3LtTZiIpvzQ"));
+export { DependencyOperationFeedback };

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

@@ -0,0 +1,2 @@
+import { DependencyOperationFeedback } from "./DependencyOperationFeedback.qwik.mjs";
+export { DependencyOperationFeedback };

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

@@ -0,0 +1,42 @@
+import { _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.isSearching ? "Searching..." : "Search";
+var _hf1 = (p0) => 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")
+		}, {
+			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) => {
+				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")
+		}, {
+			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", {
+			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),
+		/*#__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");
+}, "DependencyToolbar_component_A01yfmGXjeo"));
+export { DependencyToolbar };

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

@@ -0,0 +1,2 @@
+import { DependencyToolbar } from "./DependencyToolbar.qwik.mjs";
+export { DependencyToolbar };

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

@@ -0,0 +1,21 @@
+import { DependencyCard } from "../DependencyCard/DependencyCard.qwik.mjs";
+import "../DependencyCard/index.qwik.mjs";
+import { _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var InstalledDependencyList = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	if (props.isLoading) return /*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center justify-center py-8" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-col items-center gap-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center gap-2" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-t-foreground/40 border-border h-5 w-5 animate-spin rounded-full border-2" }, null, 3, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground text-sm" }, "Loading dependencies...", 3, null)], 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-center text-xs" }, [
+		"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");
+	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");
+	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");
+}, "InstalledDependencyList_component_uodXFl0i7Y0"));
+export { InstalledDependencyList };

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

@@ -0,0 +1,2 @@
+import { InstalledDependencyList } from "./InstalledDependencyList.qwik.mjs";
+export { InstalledDependencyList };

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

@@ -0,0 +1,21 @@
+import { _captures, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal } from "@qwik.dev/core";
+var PackageIcon = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const iconError = useSignal(false);
+	const handleIconError = /*#__PURE__*/ inlinedQrl(() => {
+		const iconError = _captures[0];
+		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");
+	return /*#__PURE__*/ _jsxSorted("img", {
+		alt: `${_rawProps.packageName} icon`,
+		src: _wrapProp(_rawProps, "iconUrl")
+	}, {
+		class: "h-6 w-6 rounded",
+		width: "24",
+		height: "24",
+		"q-e:error": handleIconError,
+		loading: "lazy"
+	}, null, 3, "JC_1");
+}, "PackageIcon_component_JgJ0UtqxVLw"));
+export { PackageIcon };

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

@@ -0,0 +1,2 @@
+import { PackageIcon } from "./PackageIcon.qwik.mjs";
+export { PackageIcon };

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

@@ -0,0 +1,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 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.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");
+	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");
+	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");
+}, "PackageSearchResults_component_EKXKiudzonI"));
+export { PackageSearchResults };

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

@@ -0,0 +1,2 @@
+import { PackageSearchResults } from "./PackageSearchResults.qwik.mjs";
+export { PackageSearchResults };