@qwik.dev/devtools 0.2.7 → 0.3.0-beta.3

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

@@ -0,0 +1,295 @@
+import { componentQrl, inlinedQrl, useSignal, useStore, useComputedQrl, _captures, useVisibleTaskQrl, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
+import { getDevtoolsRpc } from "../../devtools/rpc.qwik.mjs";
+import { DependencyOperationFeedback } from "./components/DependencyOperationFeedback/DependencyOperationFeedback.qwik.mjs";
+import { DependencyToolbar } from "./components/DependencyToolbar/DependencyToolbar.qwik.mjs";
+import { InstalledDependencyList } from "./components/InstalledDependencyList/InstalledDependencyList.qwik.mjs";
+import { PackageSearchResults } from "./components/PackageSearchResults/PackageSearchResults.qwik.mjs";
+import { filterInstalledDependencies, markInstalledSearchResults, getOperationMessage, mergeDependencyRefresh } from "./package-utils.qwik.mjs";
+const _hf0 = (p0) => p0.state.isLoadingDependencies;
+const 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(() => {
+    const _rawProps2 = _captures[0];
+    return _rawProps2.state.allDependencies;
+  }, "Packages_component_packages_useComputed_5C0oZ6vArhA", [
+    _rawProps
+  ]));
+  const filteredPackages = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const installedSearch2 = _captures[0], packages2 = _captures[1];
+    return filterInstalledDependencies(packages2.value, installedSearch2.value);
+  }, "Packages_component_filteredPackages_useComputed_kTFXWZIh16k", [
+    installedSearch,
+    packages
+  ]));
+  const applyDependencies = /* @__PURE__ */ inlinedQrl((dependencies) => {
+    const _rawProps2 = _captures[0], searchResults2 = _captures[1];
+    _rawProps2.state.allDependencies = mergeDependencyRefresh(_rawProps2.state.allDependencies, dependencies);
+    searchResults2.value = markInstalledSearchResults(searchResults2.value, _rawProps2.state.allDependencies);
+  }, "Packages_component_applyDependencies_SU3TgVXkgJ8", [
+    _rawProps,
+    searchResults
+  ]);
+  const followDependencyEnrichment = /* @__PURE__ */ inlinedQrl(async () => {
+    const applyDependencies2 = _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 applyDependencies2(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 applyDependencies2 = _captures[0], followDependencyEnrichment2 = _captures[1], isRefreshing2 = _captures[2];
+    isRefreshing2.value = true;
+    try {
+      const rpc = await getDevtoolsRpc();
+      await applyDependencies2(await rpc.refreshDependencies());
+      void followDependencyEnrichment2();
+    } finally {
+      isRefreshing2.value = false;
+    }
+  }, "Packages_component_refreshDependencies_l0sTSKksGQk", [
+    applyDependencies,
+    followDependencyEnrichment,
+    isRefreshing
+  ]);
+  const runPackageSearch = /* @__PURE__ */ inlinedQrl(async () => {
+    const _rawProps2 = _captures[0], isSearching2 = _captures[1], lastRetry2 = _captures[2], packageSearch2 = _captures[3], searchError2 = _captures[4], searchResults2 = _captures[5];
+    const query = packageSearch2.value.trim();
+    searchError2.value = "";
+    lastRetry2.value = {
+      action: "search"
+    };
+    if (!query) {
+      searchResults2.value = [];
+      return;
+    }
+    isSearching2.value = true;
+    try {
+      const rpc = await getDevtoolsRpc();
+      const response = await rpc.searchPackages(query);
+      searchResults2.value = markInstalledSearchResults(response.results, _rawProps2.state.allDependencies);
+      searchError2.value = response.error || "";
+    } catch (error) {
+      searchResults2.value = [];
+      searchError2.value = error instanceof Error ? error.message : "Package search failed";
+    } finally {
+      isSearching2.value = false;
+    }
+  }, "Packages_component_runPackageSearch_n9CRJApcOX0", [
+    _rawProps,
+    isSearching,
+    lastRetry,
+    packageSearch,
+    searchError,
+    searchResults
+  ]);
+  const installPackage = /* @__PURE__ */ inlinedQrl(async (packageName, dependencyType) => {
+    const activeOperationKey2 = _captures[0], applyDependencies2 = _captures[1], feedback2 = _captures[2], followDependencyEnrichment2 = _captures[3], lastRetry2 = _captures[4];
+    activeOperationKey2.value = `install:${packageName}`;
+    lastRetry2.value = {
+      action: "install",
+      packageName,
+      dependencyType
+    };
+    feedback2.value = null;
+    try {
+      const rpc = await getDevtoolsRpc();
+      const result = await rpc.installPackage(packageName, dependencyType);
+      if (!result.success) {
+        feedback2.value = {
+          type: "error",
+          message: getOperationMessage("install", packageName, false, result.error),
+          retryAction: "install",
+          packageName
+        };
+        return;
+      }
+      await applyDependencies2(await rpc.getAllDependencies());
+      void followDependencyEnrichment2();
+      feedback2.value = {
+        type: "success",
+        message: getOperationMessage("install", packageName, true)
+      };
+    } catch (error) {
+      feedback2.value = {
+        type: "error",
+        message: getOperationMessage("install", packageName, false, error instanceof Error ? error.message : "Unknown error"),
+        retryAction: "install",
+        packageName
+      };
+    } finally {
+      activeOperationKey2.value = "";
+    }
+  }, "Packages_component_installPackage_kEiiy6cCh8M", [
+    activeOperationKey,
+    applyDependencies,
+    feedback,
+    followDependencyEnrichment,
+    lastRetry
+  ]);
+  const updatePackage = /* @__PURE__ */ inlinedQrl(async (packageName) => {
+    const activeOperationKey2 = _captures[0], applyDependencies2 = _captures[1], feedback2 = _captures[2], followDependencyEnrichment2 = _captures[3], lastRetry2 = _captures[4];
+    activeOperationKey2.value = `update:${packageName}`;
+    lastRetry2.value = {
+      action: "update",
+      packageName
+    };
+    feedback2.value = null;
+    try {
+      const rpc = await getDevtoolsRpc();
+      const result = await rpc.updatePackage(packageName);
+      if (!result.success) {
+        feedback2.value = {
+          type: "error",
+          message: getOperationMessage("update", packageName, false, result.error),
+          retryAction: "update",
+          packageName
+        };
+        return;
+      }
+      await applyDependencies2(await rpc.getAllDependencies());
+      void followDependencyEnrichment2();
+      feedback2.value = {
+        type: "success",
+        message: getOperationMessage("update", packageName, true)
+      };
+    } catch (error) {
+      feedback2.value = {
+        type: "error",
+        message: getOperationMessage("update", packageName, false, error instanceof Error ? error.message : "Unknown error"),
+        retryAction: "update",
+        packageName
+      };
+    } finally {
+      activeOperationKey2.value = "";
+    }
+  }, "Packages_component_updatePackage_H90S6llIA40", [
+    activeOperationKey,
+    applyDependencies,
+    feedback,
+    followDependencyEnrichment,
+    lastRetry
+  ]);
+  const retryLastOperation = /* @__PURE__ */ inlinedQrl(async () => {
+    const installPackage2 = _captures[0], lastRetry2 = _captures[1], runPackageSearch2 = _captures[2], updatePackage2 = _captures[3];
+    const retry = lastRetry2.value;
+    if (!retry) {
+      return;
+    }
+    if (retry.action === "search") {
+      await runPackageSearch2();
+      return;
+    }
+    if (retry.action === "install" && retry.packageName && retry.dependencyType) {
+      await installPackage2(retry.packageName, retry.dependencyType);
+      return;
+    }
+    if (retry.action === "update" && retry.packageName) {
+      await updatePackage2(retry.packageName);
+    }
+  }, "Packages_component_retryLastOperation_8kA2zKrvEK4", [
+    installPackage,
+    lastRetry,
+    runPackageSearch,
+    updatePackage
+  ]);
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async ({ cleanup }) => {
+    const _rawProps2 = _captures[0];
+    const rpc = await getDevtoolsRpc();
+    const interval = window.setInterval(async () => {
+      const status = await rpc.getDependenciesStatus();
+      if (status.phase === "phase2" || status.phase === "done") {
+        _rawProps2.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 installedSearch2 = _captures[0];
+        installedSearch2.value = value;
+      }, "Packages_component_div_DependencyToolbar_onInstalledSearch_Y4apO8fjc0s", [
+        installedSearch
+      ]),
+      onPackageSearch$: /* @__PURE__ */ inlinedQrl((value) => {
+        const packageSearch2 = _captures[0];
+        packageSearch2.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 feedback2 = _captures[0];
+        feedback2.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 selectedTypes2 = _captures[0];
+        selectedTypes2[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,218 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal, _captures } from "@qwik.dev/core";
+import { getDependencyStatusClass, getDependencyStatusLabel } from "../../package-utils.qwik.mjs";
+import { PackageIcon } from "../PackageIcon/PackageIcon.qwik.mjs";
+const _hf0 = (p0) => p0.pkg.name;
+const _hf1 = (p0) => p0.pkg.iconUrl;
+const _hf2 = (p0) => p0.pkg.currentVersion;
+const _hf3 = (p0) => p0.pkg.latestVersion;
+const _hf4 = (p0) => p0.pkg.description || "No description available";
+const _hf5 = (p0) => p0.activeOperationKey === `update:${p0.pkg.name}`;
+const _hf6 = (p0) => p0.activeOperationKey === `update:${p0.pkg.name}` ? "Updating..." : "Update Now";
+const DependencyCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  const authorName = typeof _rawProps.pkg.author === "string" ? _rawProps.pkg.author.trim() : (_rawProps.pkg.author?.name || "").trim();
+  const authorDisplayName = authorName || "Unknown";
+  const authorInitials = authorDisplayName.split(/\s+/).filter(Boolean).map((n) => n.charAt(0)).join("").substring(0, 2).toUpperCase() || "??";
+  const handleAuthorClick = /* @__PURE__ */ inlinedQrl(() => {
+    const _rawProps2 = _captures[0];
+    if (typeof _rawProps2.pkg.author !== "string") {
+      if (_rawProps2.pkg.author?.url) {
+        window.open(_rawProps2.pkg.author.url, "_blank");
+      } else if (_rawProps2.pkg.author?.email) {
+        window.open(`mailto:${_rawProps2.pkg.author.email}`, "_blank");
+      }
+    }
+  }, "DependencyCard_component_handleAuthorClick_Z27jxExGLYo", [
+    _rawProps
+  ]);
+  const handlePackageClick = /* @__PURE__ */ inlinedQrl(() => {
+    const _rawProps2 = _captures[0];
+    if (_rawProps2.pkg.npmUrl) {
+      window.open(_rawProps2.pkg.npmUrl, "_blank");
+    }
+  }, "DependencyCard_component_handlePackageClick_MvynAcdfp2g", [
+    _rawProps
+  ]);
+  const handleHomepageClick = /* @__PURE__ */ inlinedQrl(() => {
+    const _rawProps2 = _captures[0];
+    if (_rawProps2.pkg.homepage) {
+      window.open(_rawProps2.pkg.homepage, "_blank");
+    }
+  }, "DependencyCard_component_handleHomepageClick_G7v4ZbrD5Zs", [
+    _rawProps
+  ]);
+  const handleRepositoryClick = /* @__PURE__ */ inlinedQrl(() => {
+    const _rawProps2 = _captures[0];
+    if (_rawProps2.pkg.repository) {
+      window.open(_rawProps2.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, _rawProps2) => _rawProps2.onUpdate$(_rawProps2.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/DependencyOperationFeedback/DependencyOperationFeedback.qwik.mjs

@@ -0,0 +1,39 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal } from "@qwik.dev/core";
+const _hf0 = (p0) => p0.feedback.message;
+const 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/DependencyToolbar/DependencyToolbar.qwik.mjs

@@ -0,0 +1,75 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
+const _hf0 = (p0) => p0.isSearching ? "Searching..." : "Search";
+const _hf1 = (p0) => p0.isRefreshing ? "Refreshing..." : "Refresh";
+const 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, props2) => props2.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, props2) => props2.onPackageSearch$(target.value), "DependencyToolbar_component_div_div_label_div_input_q_e_input_mwHCBr4jtxk").m(),
+          "q-e:keydown": /* @__PURE__ */ inlinedQrl((event, _1, props2) => {
+            if (event.key === "Enter") {
+              props2.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
+};