@qwik.dev/devtools 0.2.0 → 0.2.2

package/dist/ui/features/CodeBreack/StateParser.qwik.mjs

@@ -0,0 +1,161 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal, $, useVisibleTask$ } from "@qwik.dev/core";
+import { _preprocessState, _dumpState } from "@qwik.dev/core/internal";
+import { getHighlighter } from "../../utils/shiki.qwik.mjs";
+const StateParser = component$(() => {
+  useStyles$(`
+    pre.shiki { overflow: auto; padding: 10px;  height: 100%; }
+  `);
+  const inputState = useSignal("");
+  const parsingTime = useSignal(null);
+  const stateResult = useSignal("");
+  const highlightedState = useSignal("");
+  const onParseState$ = $(() => {
+    if (!inputState.value.trim()) {
+      parsingTime.value = null;
+      stateResult.value = "// Paste state on the left to parse";
+      return;
+    }
+    const startTime = performance.now();
+    try {
+      const stateData = JSON.parse(inputState.value);
+      const container = {
+        $getObjectById$: (id) => id,
+        element: null,
+        getSyncFn: () => () => {
+        },
+        $storeProxyMap$: /* @__PURE__ */ new WeakMap(),
+        $forwardRefs$: null,
+        $initialQRLsIndexes$: null,
+        $scheduler$: null
+      };
+      _preprocessState(stateData, container);
+      const dumpedState = _dumpState(stateData, false, "", null).replace(/\n/, "");
+      parsingTime.value = performance.now() - startTime;
+      stateResult.value = dumpedState;
+      return;
+    } catch (error) {
+      try {
+        const cleanInput = inputState.value.replace(/<script[^>]*>/gi, "").replace(/<\/script>/gi, "").trim();
+        if (cleanInput) {
+          const stateData = JSON.parse(cleanInput);
+          const container = {
+            $getObjectById$: (id) => id,
+            element: null,
+            getSyncFn: () => () => {
+            },
+            $storeProxyMap$: /* @__PURE__ */ new WeakMap(),
+            $forwardRefs$: null,
+            $initialQRLsIndexes$: null,
+            $scheduler$: null
+          };
+          _preprocessState(stateData, container);
+          const dumpedState = _dumpState(stateData, false, "", null);
+          parsingTime.value = performance.now() - startTime;
+          stateResult.value = dumpedState;
+          return;
+        }
+      } catch (secondError) {
+        parsingTime.value = performance.now() - startTime;
+        stateResult.value = `// Error parsing state: ${error instanceof Error ? error.message : "Invalid state format"}
+
+// Raw input:
+${inputState.value}`;
+        return;
+      }
+    }
+    parsingTime.value = performance.now() - startTime;
+    stateResult.value = "// Unable to parse the provided state";
+  });
+  const shikiRef = useSignal(null);
+  useVisibleTask$(async ({ track }) => {
+    track(() => stateResult.value);
+    if (!stateResult.value) {
+      highlightedState.value = "";
+      return;
+    }
+    if (!shikiRef.value) {
+      shikiRef.value = await getHighlighter();
+    }
+    highlightedState.value = shikiRef.value.codeToHtml(stateResult.value, {
+      lang: "json",
+      theme: "nord"
+    });
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "grid grid-cols-1 gap-4 md:grid-cols-2",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "border-border flex items-center justify-between border-b p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Input State"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "min-h-0 flex-1 flex-col space-y-3 p-3",
+            children: [
+              /* @__PURE__ */ jsx("textarea", {
+                value: inputState.value,
+                onInput$: (e, t) => inputState.value = t.value,
+                placeholder: "Paste Qwik state and click to parse/format.",
+                class: "border-border bg-background h-full min-h-0 w-full flex-1 resize-none rounded-md border p-3 font-mono text-sm"
+              }),
+              /* @__PURE__ */ jsx("div", {
+                class: "flex items-center gap-3",
+                children: /* @__PURE__ */ jsx("button", {
+                  onClick$: onParseState$,
+                  class: "bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90",
+                  children: "Parse State"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col overflow-hidden rounded-xl border",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "border-border flex items-center justify-between border-b p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Parsed State"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "h-full min-h-0 flex-1",
+            children: /* @__PURE__ */ jsx("pre", {
+              class: "h-full overflow-auto",
+              dangerouslySetInnerHTML: highlightedState.value || ""
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  StateParser
+};

package/dist/ui/features/Overview/Overview.qwik.mjs

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, $, sync$ } from "@qwik.dev/core";
-import { HiCubeOutline, HiPhotoOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
-import { LuFolderTree } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
+import { HiCubeOutline, HiPhotoOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { LuFolderTree } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
 const Overview = component$(({ state }) => {
   const pageJump = $((pageName) => {
     state.activeTab = pageName;
@@ -19,12 +19,12 @@ const Overview = component$(({ state }) => {
               $(() => pageJump("routes")),
               stopPropagation
             ],
-            class: "flex cursor-pointer items-center gap-5 rounded-xl border border-border bg-card-item-bg p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card-item-hover-bg",
+            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",
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
+                class: "bg-foreground/5 border-border rounded-lg border p-3.5",
                 children: /* @__PURE__ */ jsx(LuFolderTree, {
-                  class: "h-6 w-6 text-accent"
+                  class: "text-accent h-6 w-6"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
@@ -34,7 +34,7 @@ const Overview = component$(({ state }) => {
                     children: state.routes?.length
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-muted-foreground",
+                    class: "text-muted-foreground text-sm",
                     children: "pages"
                   })
                 ]
@@ -46,12 +46,12 @@ const Overview = component$(({ state }) => {
               $(() => pageJump("components")),
               stopPropagation
             ],
-            class: "flex cursor-pointer items-center gap-5 rounded-xl border border-border bg-card-item-bg p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card-item-hover-bg",
+            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",
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
+                class: "bg-foreground/5 border-border rounded-lg border p-3.5",
                 children: /* @__PURE__ */ jsx(HiCubeOutline, {
-                  class: "h-6 w-6 text-accent"
+                  class: "text-accent h-6 w-6"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
@@ -61,7 +61,7 @@ const Overview = component$(({ state }) => {
                     children: state.components.length
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-muted-foreground",
+                    class: "text-muted-foreground text-sm",
                     children: "components"
                   })
                 ]
@@ -73,12 +73,12 @@ const Overview = component$(({ state }) => {
               $(() => pageJump("assets")),
               stopPropagation
             ],
-            class: "flex cursor-pointer items-center gap-5 rounded-xl border border-border bg-card-item-bg p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card-item-hover-bg",
+            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",
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
+                class: "bg-foreground/5 border-border rounded-lg border p-3.5",
                 children: /* @__PURE__ */ jsx(HiPhotoOutline, {
-                  class: "h-6 w-6 text-accent"
+                  class: "text-accent h-6 w-6"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
@@ -88,7 +88,7 @@ const Overview = component$(({ state }) => {
                     children: state.assets.length || 0
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-muted-foreground",
+                    class: "text-muted-foreground text-sm",
                     children: "assets"
                   })
                 ]
@@ -102,7 +102,7 @@ const Overview = component$(({ state }) => {
           $(() => pageJump("packages")),
           stopPropagation
         ],
-        class: "cursor-pointer space-y-4 rounded-xl border border-border bg-card-item-bg p-5 hover:-translate-y-0.5 hover:bg-card-item-hover-bg",
+        class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg mt-6 cursor-pointer space-y-4 rounded-xl border p-5 hover:-translate-y-0.5 md:mt-6",
         children: [
           /* @__PURE__ */ jsx("h3", {
             class: "text-lg font-semibold",
@@ -118,7 +118,7 @@ const Overview = component$(({ state }) => {
                   children: name
                 }),
                 /* @__PURE__ */ jsx("div", {
-                  class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
+                  class: "bg-foreground/5 border-border text-muted-foreground rounded-full border px-2 py-1 text-xs",
                   children: version
                 })
               ]
@@ -127,7 +127,7 @@ const Overview = component$(({ state }) => {
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: "space-y-4 rounded-xl border border-border bg-card-item-bg p-5",
+        class: "border-border bg-card-item-bg mt-6 space-y-4 rounded-xl border p-5 md:mt-6",
         children: [
           /* @__PURE__ */ jsx("h3", {
             class: "text-lg font-semibold",
@@ -137,7 +137,7 @@ const Overview = component$(({ state }) => {
             class: "space-y-3",
             children: [
               /* @__PURE__ */ jsxs("div", {
-                class: "flex justify-between border-b border-border py-2",
+                class: "border-border flex justify-between border-b py-2",
                 children: [
                   /* @__PURE__ */ jsx("span", {
                     class: "text-muted-foreground",
@@ -150,7 +150,7 @@ const Overview = component$(({ state }) => {
                 ]
               }),
               /* @__PURE__ */ jsxs("div", {
-                class: "flex justify-between border-b border-border py-2",
+                class: "border-border flex justify-between border-b py-2",
                 children: [
                   /* @__PURE__ */ jsx("span", {
                     class: "text-muted-foreground",

package/dist/ui/features/Packages/Packages.qwik.mjs

@@ -1,93 +1,53 @@
-import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, useSignal, $, useResource$, Resource } from "@qwik.dev/core";
-import { useDebouncer } from "../../hooks/useDebouncer.qwik.mjs";
-import { InstallButton } from "./components/InstallButton/InstallButton.qwik.mjs";
-const Packages = component$(() => {
-  const debouncedQuery = useSignal("");
-  const installingPackage = useSignal(null);
-  const debounceSearch = useDebouncer($((value) => {
-    debouncedQuery.value = value;
-  }), 300);
-  const searchResults = useResource$(async ({ track }) => {
-    const query = track(() => debouncedQuery.value);
-    if (!query || query.length < 2) {
-      return [];
-    }
-    const response = await fetch(`https://registry.npmjs.org/-/v1/search?text=${query}`);
-    const data = await response.json();
-    const packages = data.objects.map((obj) => ({
-      name: obj.package.name,
-      version: obj.package.version,
-      description: obj.package.description || "No description available"
-    }));
-    return packages;
-  });
-  return /* @__PURE__ */ jsxs("div", {
-    class: "space-y-4",
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        class: "relative",
-        children: /* @__PURE__ */ jsx("input", {
-          type: "text",
-          onInput$: (_, target) => {
-            debounceSearch(target.value);
-          },
-          placeholder: "Search npm packages...",
-          class: "w-full rounded-lg border border-border bg-input px-4 py-2 text-sm text-foreground placeholder-muted-foreground outline-none focus:border-ring"
-        })
-      }),
-      /* @__PURE__ */ jsx(Resource, {
-        value: searchResults,
-        onPending: () => /* @__PURE__ */ jsx("div", {
-          class: "absolute right-3 top-1",
-          children: /* @__PURE__ */ jsx("div", {
-            class: "border-t-foreground/40 animate-spin h-5 w-5 rounded-full border-2 border-border"
+import { jsx, jsxs } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+import { DependencyCard } from "./components/DependencyCard/DependencyCard.qwik.mjs";
+const Packages = component$(({ state }) => {
+  const packages = state.allDependencies;
+  const isLoading = state.isLoadingDependencies;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", {
+      class: "flex items-center justify-center py-8",
+      children: /* @__PURE__ */ jsxs("div", {
+        class: "flex flex-col items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "border-t-foreground/40 border-border h-5 w-5 animate-spin rounded-full border-2"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                class: "text-muted-foreground text-sm",
+                children: "Loading dependencies..."
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "text-muted-foreground text-center text-xs",
+            children: [
+              "Dependencies are being preloaded in the background...",
+              /* @__PURE__ */ jsx("br", {}),
+              "This should only take a moment"
+            ]
           })
-        }),
-        onRejected: (error) => /* @__PURE__ */ jsx("div", {
-          class: "mt-2 text-xs text-red-400",
-          children: error.message || "Failed to fetch packages"
-        }),
-        onResolved: (packages) => {
-          return /* @__PURE__ */ jsx("div", {
-            class: "grid gap-3 md:grid-cols-2",
-            children: packages.map((pkg) => {
-              return /* @__PURE__ */ jsxs("div", {
-                class: "bg-foreground/5 flex flex-col gap-2 rounded-lg p-3",
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "flex items-center justify-between",
-                    children: [
-                      /* @__PURE__ */ jsx("div", {
-                        class: "text-sm",
-                        children: pkg.name
-                      }),
-                      /* @__PURE__ */ jsxs("div", {
-                        class: "flex items-center gap-2",
-                        children: [
-                          /* @__PURE__ */ jsx("div", {
-                            class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
-                            children: pkg.version
-                          }),
-                          /* @__PURE__ */ jsx(InstallButton, {
-                            pkg,
-                            installingPackage
-                          })
-                        ]
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "line-clamp-2 text-xs text-muted-foreground",
-                    children: pkg.description
-                  })
-                ]
-              }, pkg.name);
-            })
-          });
-        }
+        ]
+      })
+    });
+  }
+  if (!packages || packages.length === 0) {
+    return /* @__PURE__ */ jsx("div", {
+      class: "py-8 text-center",
+      children: /* @__PURE__ */ jsx("div", {
+        class: "text-muted-foreground text-sm",
+        children: "No dependencies found in package.json"
       })
-    ]
+    });
+  }
+  return /* @__PURE__ */ jsx("div", {
+    class: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+    children: packages.map((pkg) => /* @__PURE__ */ jsx(DependencyCard, {
+      pkg
+    }, pkg.name))
   });
 });
 export {

package/dist/ui/features/Packages/components/DependencyCard/DependencyCard.qwik.mjs

@@ -0,0 +1,170 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, $ } from "@qwik.dev/core";
+import { PackageIcon } from "../PackageIcon/PackageIcon.qwik.mjs";
+const DependencyCard = component$(({ pkg }) => {
+  const handleAuthorClick = $(() => {
+    if (pkg.author?.url) {
+      window.open(pkg.author.url, "_blank");
+    } else if (pkg.author?.email) {
+      window.open(`mailto:${pkg.author.email}`, "_blank");
+    }
+  });
+  const handlePackageClick = $(() => {
+    if (pkg.npmUrl) {
+      window.open(pkg.npmUrl, "_blank");
+    }
+  });
+  const handleHomepageClick = $(() => {
+    if (pkg.homepage) {
+      window.open(pkg.homepage, "_blank");
+    }
+  });
+  const handleRepositoryClick = $(() => {
+    if (pkg.repository) {
+      window.open(pkg.repository, "_blank");
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "bg-card border-border/50 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",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        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"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "relative flex flex-col gap-4",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-start gap-4",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                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:rotate-3 hover:scale-110",
+                onClick$: handlePackageClick,
+                title: `View ${pkg.name} on npm`,
+                children: /* @__PURE__ */ jsx(PackageIcon, {
+                  packageName: pkg.name,
+                  iconUrl: pkg.iconUrl
+                })
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "min-w-0 flex-1",
+                children: [
+                  /* @__PURE__ */ jsx("h3", {
+                    class: "text-foreground hover:text-primary mb-1.5 cursor-pointer truncate text-base font-bold transition-colors",
+                    onClick$: handlePackageClick,
+                    title: pkg.name,
+                    children: pkg.name
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    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",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", {
+                        class: "h-3 w-3",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsx("path", {
+                          "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"
+                        })
+                      }),
+                      "v",
+                      pkg.version
+                    ]
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("p", {
+            class: "text-muted-foreground line-clamp-2 min-h-[2.5rem] text-sm leading-relaxed",
+            children: pkg.description || "No description available"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "border-border border-t"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between gap-3",
+            children: [
+              pkg.author ? /* @__PURE__ */ jsxs("div", {
+                class: "flex min-w-0 flex-1 items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    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",
+                    onClick$: handleAuthorClick,
+                    title: `Contact ${pkg.author.name}`,
+                    children: /* @__PURE__ */ jsx("span", {
+                      class: "text-accent text-[10px] font-semibold",
+                      children: pkg.author.name.split(" ").map((n) => n.charAt(0)).join("").substring(0, 2).toUpperCase()
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-muted-foreground truncate text-xs",
+                    children: /* @__PURE__ */ jsx("span", {
+                      class: "text-foreground font-medium",
+                      children: pkg.author.name
+                    })
+                  })
+                ]
+              }) : /* @__PURE__ */ jsx("div", {
+                class: "flex-1"
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "flex items-center gap-1.5",
+                children: [
+                  pkg.homepage && /* @__PURE__ */ jsx("button", {
+                    onClick$: 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",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        "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"
+                      })
+                    })
+                  }),
+                  pkg.repository && /* @__PURE__ */ jsx("button", {
+                    onClick$: 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",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        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"
+                      })
+                    })
+                  }),
+                  pkg.npmUrl && /* @__PURE__ */ jsx("button", {
+                    onClick$: 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",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        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"
+                      })
+                    })
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  DependencyCard
+};

package/dist/ui/features/Packages/components/PackageIcon/PackageIcon.qwik.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, $ } from "@qwik.dev/core";
+const PackageIcon = component$(({ packageName, iconUrl }) => {
+  const iconError = useSignal(false);
+  const handleIconError = $(() => {
+    iconError.value = true;
+  });
+  const fallbackInitial = packageName.split("/").pop()?.charAt(0).toUpperCase() || packageName.charAt(0).toUpperCase();
+  if (!iconUrl || iconError.value) {
+    return /* @__PURE__ */ jsx("span", {
+      class: "text-primary text-sm font-bold",
+      children: fallbackInitial
+    });
+  }
+  return /* @__PURE__ */ jsx("img", {
+    src: iconUrl,
+    alt: `${packageName} icon`,
+    class: "h-6 w-6 rounded",
+    width: "24",
+    height: "24",
+    onError$: handleIconError,
+    loading: "lazy"
+  });
+});
+export {
+  PackageIcon
+};