@qwik.dev/devtools 0.0.6 → 0.1.0

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

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+const Assets = component$(({ state }) => {
+  return /* @__PURE__ */ jsx("div", {
+    class: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+    children: state.assets?.map((asset) => {
+      const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+      const fileExt = asset.path.split(".").pop()?.toUpperCase();
+      return /* @__PURE__ */ jsxs("div", {
+        class: "overflow-hidden rounded-xl border border-white/10 bg-white/[0.03] transition-all duration-200 hover:bg-white/[0.05]",
+        children: [
+          isImage ? /* @__PURE__ */ jsx("div", {
+            class: "aspect-square overflow-hidden bg-black/20",
+            children: /* @__PURE__ */ jsx("img", {
+              width: 176,
+              height: 176,
+              src: asset.publicPath,
+              alt: asset.path,
+              class: "h-full w-full object-cover"
+            })
+          }) : /* @__PURE__ */ jsx("div", {
+            class: "flex aspect-square items-center justify-center bg-black/20",
+            children: /* @__PURE__ */ jsx("span", {
+              class: "font-mono text-2xl text-zinc-400",
+              children: fileExt
+            })
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "space-y-2 p-4",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "truncate text-sm",
+                title: asset.path,
+                children: asset.path.split("/").pop()
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "flex items-center justify-between text-xs text-zinc-400",
+                children: [
+                  /* @__PURE__ */ jsxs("span", {
+                    children: [
+                      (asset.size / 1024).toFixed(2),
+                      " KB"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "rounded-full bg-white/5 px-2 py-1",
+                    children: fileExt
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      }, asset.filePath);
+    })
+  });
+});
+export {
+  Assets
+};

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

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const hi_qwik = require("../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@5.4.10_@types_node@20.14.11__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.cjs");
+const lu_qwik = require("../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@5.4.10_@types_node@20.14.11__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.cjs");
+const Overview = core.component$(({ state }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: "grid grid-cols-1 gap-5 md:grid-cols-3",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "flex items-center gap-5 rounded-xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.05]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lu_qwik.LuFolderTree, {
+                  class: "h-6 w-6 text-emerald-500"
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "text-3xl font-semibold",
+                    children: state.routes?.length
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "text-sm text-zinc-400",
+                    children: "pages"
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "flex items-center gap-5 rounded-xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.05]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiCubeOutline, {
+                  class: "h-6 w-6 text-emerald-500"
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "text-3xl font-semibold",
+                    children: state.assets.length
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "text-sm text-zinc-400",
+                    children: "components"
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "flex items-center gap-5 rounded-xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.05]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiPhotoOutline, {
+                  class: "h-6 w-6 text-emerald-500"
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "text-3xl font-semibold",
+                    children: state.assets.length || 0
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "text-sm text-zinc-400",
+                    children: "assets"
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: "space-y-4 rounded-xl border border-white/10 bg-white/[0.03] p-5",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", {
+            class: "text-lg font-semibold",
+            children: "Installed Packages"
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            class: "grid grid-cols-1 gap-3 md:grid-cols-2",
+            children: state.npmPackages.map(([name, version]) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              class: "flex items-center justify-between rounded-lg bg-white/5 p-3",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  class: "text-sm",
+                  children: name
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  class: "rounded-full border border-white/10 bg-white/5 px-2 py-1 text-xs text-zinc-400",
+                  children: version
+                })
+              ]
+            }, name))
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: "space-y-4 rounded-xl border border-white/10 bg-white/[0.03] p-5",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", {
+            class: "text-lg font-semibold",
+            children: "Performance"
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "flex justify-between border-b border-white/10 py-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "text-zinc-400",
+                    children: "SSR to full load"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "font-medium",
+                    children: "-"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "flex justify-between border-b border-white/10 py-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "text-zinc-400",
+                    children: "Page load"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "font-medium",
+                    children: "-"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "flex justify-between py-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "text-zinc-400",
+                    children: "Navigation"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "font-medium",
+                    children: "-"
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+exports.Overview = Overview;

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

@@ -0,0 +1,165 @@
+import { jsxs, Fragment, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+import { HiCubeOutline, HiPhotoOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@5.4.10_@types_node@20.14.11__/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@5.4.10_@types_node@20.14.11__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
+const Overview = component$(({ state }) => {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "grid grid-cols-1 gap-5 md:grid-cols-3",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center gap-5 rounded-xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.05]",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                children: /* @__PURE__ */ jsx(LuFolderTree, {
+                  class: "h-6 w-6 text-emerald-500"
+                })
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-3xl font-semibold",
+                    children: state.routes?.length
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-sm text-zinc-400",
+                    children: "pages"
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center gap-5 rounded-xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.05]",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                children: /* @__PURE__ */ jsx(HiCubeOutline, {
+                  class: "h-6 w-6 text-emerald-500"
+                })
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-3xl font-semibold",
+                    children: state.assets.length
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-sm text-zinc-400",
+                    children: "components"
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center gap-5 rounded-xl border border-white/10 bg-white/[0.03] p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.05]",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                children: /* @__PURE__ */ jsx(HiPhotoOutline, {
+                  class: "h-6 w-6 text-emerald-500"
+                })
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-3xl font-semibold",
+                    children: state.assets.length || 0
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-sm text-zinc-400",
+                    children: "assets"
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "space-y-4 rounded-xl border border-white/10 bg-white/[0.03] p-5",
+        children: [
+          /* @__PURE__ */ jsx("h3", {
+            class: "text-lg font-semibold",
+            children: "Installed Packages"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "grid grid-cols-1 gap-3 md:grid-cols-2",
+            children: state.npmPackages.map(([name, version]) => /* @__PURE__ */ jsxs("div", {
+              class: "flex items-center justify-between rounded-lg bg-white/5 p-3",
+              children: [
+                /* @__PURE__ */ jsx("div", {
+                  class: "text-sm",
+                  children: name
+                }),
+                /* @__PURE__ */ jsx("div", {
+                  class: "rounded-full border border-white/10 bg-white/5 px-2 py-1 text-xs text-zinc-400",
+                  children: version
+                })
+              ]
+            }, name))
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "space-y-4 rounded-xl border border-white/10 bg-white/[0.03] p-5",
+        children: [
+          /* @__PURE__ */ jsx("h3", {
+            class: "text-lg font-semibold",
+            children: "Performance"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                class: "flex justify-between border-b border-white/10 py-2",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-zinc-400",
+                    children: "SSR to full load"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "font-medium",
+                    children: "-"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "flex justify-between border-b border-white/10 py-2",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-zinc-400",
+                    children: "Page load"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "font-medium",
+                    children: "-"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "flex justify-between py-2",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-zinc-400",
+                    children: "Navigation"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "font-medium",
+                    children: "-"
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  Overview
+};

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

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const useDebouncer = require("../../hooks/useDebouncer.qwik.cjs");
+const InstallButton = require("./components/InstallButton/InstallButton.qwik.cjs");
+const Packages = core.component$(() => {
+  const debouncedQuery = core.useSignal("");
+  const installingPackage = core.useSignal(null);
+  const debounceSearch = useDebouncer.useDebouncer(core.$((value) => {
+    debouncedQuery.value = value;
+  }), 300);
+  const searchResults = core.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__ */ jsxRuntime.jsxs("div", {
+    class: "space-y-4",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "relative",
+        children: /* @__PURE__ */ jsxRuntime.jsx("input", {
+          type: "text",
+          onInput$: (_, target) => {
+            debounceSearch(target.value);
+          },
+          placeholder: "Search npm packages...",
+          class: "w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-white placeholder-zinc-500 outline-none focus:border-white/20"
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Resource, {
+        value: searchResults,
+        onPending: () => /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "absolute right-3 top-1",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+            class: "h-5 w-5 animate-spin rounded-full border-2 border-white/10 border-t-white/40"
+          })
+        }),
+        onRejected: (error) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "mt-2 text-xs text-red-400",
+          children: error.message || "Failed to fetch packages"
+        }),
+        onResolved: (packages) => {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", {
+            class: "grid gap-3 md:grid-cols-2",
+            children: packages.map((pkg) => {
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "flex flex-col gap-2 rounded-lg bg-white/5 p-3",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        class: "text-sm",
+                        children: pkg.name
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "flex items-center gap-2",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "rounded-full border border-white/10 bg-white/5 px-2 py-1 text-xs text-zinc-400",
+                            children: pkg.version
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx(InstallButton.InstallButton, {
+                            pkg,
+                            installingPackage
+                          })
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "line-clamp-2 text-xs text-zinc-400",
+                    children: pkg.description
+                  })
+                ]
+              }, pkg.name);
+            })
+          });
+        }
+      })
+    ]
+  });
+});
+exports.Packages = Packages;

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

@@ -0,0 +1,95 @@
+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-white/10 bg-white/5 px-4 py-2 text-sm text-white placeholder-zinc-500 outline-none focus:border-white/20"
+        })
+      }),
+      /* @__PURE__ */ jsx(Resource, {
+        value: searchResults,
+        onPending: () => /* @__PURE__ */ jsx("div", {
+          class: "absolute right-3 top-1",
+          children: /* @__PURE__ */ jsx("div", {
+            class: "h-5 w-5 animate-spin rounded-full border-2 border-white/10 border-t-white/40"
+          })
+        }),
+        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: "flex flex-col gap-2 rounded-lg bg-white/5 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: "rounded-full border border-white/10 bg-white/5 px-2 py-1 text-xs text-zinc-400",
+                            children: pkg.version
+                          }),
+                          /* @__PURE__ */ jsx(InstallButton, {
+                            pkg,
+                            installingPackage
+                          })
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "line-clamp-2 text-xs text-zinc-400",
+                    children: pkg.description
+                  })
+                ]
+              }, pkg.name);
+            })
+          });
+        }
+      })
+    ]
+  });
+});
+export {
+  Packages
+};

package/dist/ui/features/Packages/components/InstallButton/InstallButton.qwik.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+require("../../../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
+const context = require("../../../../packages/kit/src/context.qwik.cjs");
+require("../../../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
+const core = require("@qwik.dev/core");
+const InstallButton = core.component$(({ pkg, installingPackage }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
+    onClick$: async () => {
+      installingPackage.value = pkg.name;
+      const rpc = context.getViteClientRpc();
+      const result = await rpc.installPackage(pkg.name);
+      if (!result.success) {
+        return Promise.reject(result.error || "Installation failed");
+      }
+    },
+    disabled: installingPackage.value === pkg.name,
+    class: [
+      "rounded-full px-2 py-1 text-xs",
+      installingPackage.value === pkg.name ? "cursor-not-allowed bg-blue-500/5 text-blue-400/50" : "bg-blue-500/10 text-blue-400 hover:bg-blue-500/20"
+    ].join(" "),
+    children: installingPackage.value === pkg.name ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      class: "flex items-center gap-1",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "h-3 w-3 animate-spin rounded-full border border-current border-t-transparent"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "Installing..."
+        })
+      ]
+    }) : "Install"
+  });
+});
+exports.InstallButton = InstallButton;

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "@qwik.dev/core/jsx-runtime";
+import "../../../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
+import { getViteClientRpc } from "../../../../packages/kit/src/context.qwik.mjs";
+import "../../../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.mjs";
+import { component$ } from "@qwik.dev/core";
+const InstallButton = component$(({ pkg, installingPackage }) => {
+  return /* @__PURE__ */ jsx("button", {
+    onClick$: async () => {
+      installingPackage.value = pkg.name;
+      const rpc = getViteClientRpc();
+      const result = await rpc.installPackage(pkg.name);
+      if (!result.success) {
+        return Promise.reject(result.error || "Installation failed");
+      }
+    },
+    disabled: installingPackage.value === pkg.name,
+    class: [
+      "rounded-full px-2 py-1 text-xs",
+      installingPackage.value === pkg.name ? "cursor-not-allowed bg-blue-500/5 text-blue-400/50" : "bg-blue-500/10 text-blue-400 hover:bg-blue-500/20"
+    ].join(" "),
+    children: installingPackage.value === pkg.name ? /* @__PURE__ */ jsxs("div", {
+      class: "flex items-center gap-1",
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          class: "h-3 w-3 animate-spin rounded-full border border-current border-t-transparent"
+        }),
+        /* @__PURE__ */ jsx("span", {
+          children: "Installing..."
+        })
+      ]
+    }) : "Install"
+  });
+});
+export {
+  InstallButton
+};