@qwik.dev/devtools 0.0.5 → 0.1.0

package/dist/plugin/index.cjs

@@ -12,6 +12,7 @@ const node_path = require('node:path');
 const node_os = require('node:os');
 const node_crypto = require('node:crypto');
 require('node:fs');
+const child_process = require('child_process');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -9464,6 +9465,22 @@ function getRouteFunctions({ config }) {
   };
 }
 
+async function detectPackageManager(projectRoot) {
+  try {
+    if (await fsp__default.access(require$$0__default$1.join(projectRoot, "pnpm-lock.yaml")).then(() => true).catch(() => false)) {
+      return "pnpm";
+    }
+    if (await fsp__default.access(require$$0__default$1.join(projectRoot, "yarn.lock")).then(() => true).catch(() => false)) {
+      return "yarn";
+    }
+    if (await fsp__default.access(require$$0__default$1.join(projectRoot, "package-lock.json")).then(() => true).catch(() => false)) {
+      return "npm";
+    }
+    return "pnpm";
+  } catch {
+    return "pnpm";
+  }
+}
 function getNpmFunctions({ config }) {
   return {
     async getQwikPackages() {
@@ -9480,6 +9497,28 @@ function getNpmFunctions({ config }) {
       } catch (error) {
         return [];
       }
+    },
+    async installPackage(packageName, isDev = true) {
+      try {
+        const projectRoot = require$$0__default$1.dirname(config.configFileDependencies[0]);
+        const pm = await detectPackageManager(projectRoot);
+        const devFlag = isDev ? pm === "npm" ? "--save-dev" : "-D" : "";
+        const command = {
+          npm: `npm install ${devFlag} ${packageName}`,
+          pnpm: `pnpm add ${devFlag} ${packageName}`,
+          yarn: `yarn add ${devFlag} ${packageName}`
+        }[pm];
+        child_process.execSync(command, {
+          cwd: projectRoot,
+          stdio: "pipe"
+        });
+        return { success: true };
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : "Unknown error occurred"
+        };
+      }
     }
   };
 }
@@ -10471,7 +10510,7 @@ function qwikDevtools() {
       handler(code, id) {
         _config.env.DEV;
         if (id.endsWith("root.tsx")) {
-          const importPath = "@qwik.dev/devtools/component";
+          const importPath = "@devtools/ui";
           if (!code.includes(importPath)) {
             code = `import { QwikDevtools } from '${importPath}';
 ${code}`;

package/dist/plugin/index.mjs

@@ -10,6 +10,7 @@ import { resolve as resolve$1, relative as relative$1, basename, extname } from
 import { homedir } from 'node:os';
 import { createHash } from 'node:crypto';
 import 'node:fs';
+import { execSync } from 'child_process';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -9452,6 +9453,22 @@ function getRouteFunctions({ config }) {
   };
 }
 
+async function detectPackageManager(projectRoot) {
+  try {
+    if (await fsp.access(require$$0$1.join(projectRoot, "pnpm-lock.yaml")).then(() => true).catch(() => false)) {
+      return "pnpm";
+    }
+    if (await fsp.access(require$$0$1.join(projectRoot, "yarn.lock")).then(() => true).catch(() => false)) {
+      return "yarn";
+    }
+    if (await fsp.access(require$$0$1.join(projectRoot, "package-lock.json")).then(() => true).catch(() => false)) {
+      return "npm";
+    }
+    return "pnpm";
+  } catch {
+    return "pnpm";
+  }
+}
 function getNpmFunctions({ config }) {
   return {
     async getQwikPackages() {
@@ -9468,6 +9485,28 @@ function getNpmFunctions({ config }) {
       } catch (error) {
         return [];
       }
+    },
+    async installPackage(packageName, isDev = true) {
+      try {
+        const projectRoot = require$$0$1.dirname(config.configFileDependencies[0]);
+        const pm = await detectPackageManager(projectRoot);
+        const devFlag = isDev ? pm === "npm" ? "--save-dev" : "-D" : "";
+        const command = {
+          npm: `npm install ${devFlag} ${packageName}`,
+          pnpm: `pnpm add ${devFlag} ${packageName}`,
+          yarn: `yarn add ${devFlag} ${packageName}`
+        }[pm];
+        execSync(command, {
+          cwd: projectRoot,
+          stdio: "pipe"
+        });
+        return { success: true };
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : "Unknown error occurred"
+        };
+      }
     }
   };
 }
@@ -10459,7 +10498,7 @@ function qwikDevtools() {
       handler(code, id) {
         _config.env.DEV;
         if (id.endsWith("root.tsx")) {
-          const importPath = "@qwik.dev/devtools/component";
+          const importPath = "@devtools/ui";
           if (!code.includes(importPath)) {
             code = `import { QwikDevtools } from '${importPath}';
 ${code}`;

package/dist/ui/components/DevtoolsButton/DevtoolsButton.qwik.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const DevtoolsButton = core.component$(({ state }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: {
+      "fixed bottom-4 right-4 flex h-9 w-9 origin-center cursor-pointer items-center justify-center rounded-lg border border-white/10 bg-zinc-900 backdrop-blur-md transition-all duration-300 ease-in-out": true,
+      "rotate-90 border-emerald-500/50 bg-zinc-900/95 shadow-lg shadow-emerald-500/35": state.isOpen
+    },
+    onClick$: () => state.isOpen = !state.isOpen,
+    children: /* @__PURE__ */ jsxRuntime.jsx("img", {
+      width: 20,
+      height: 20,
+      src: "https://qwik.dev/logos/qwik-logo.svg",
+      alt: "Qwik Logo",
+      class: "h-5 w-5 opacity-90 drop-shadow-md transition-all duration-300 ease-in-out hover:scale-110 hover:opacity-100"
+    })
+  });
+});
+exports.DevtoolsButton = DevtoolsButton;

package/dist/ui/components/DevtoolsButton/DevtoolsButton.qwik.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+const DevtoolsButton = component$(({ state }) => {
+  return /* @__PURE__ */ jsx("div", {
+    class: {
+      "fixed bottom-4 right-4 flex h-9 w-9 origin-center cursor-pointer items-center justify-center rounded-lg border border-white/10 bg-zinc-900 backdrop-blur-md transition-all duration-300 ease-in-out": true,
+      "rotate-90 border-emerald-500/50 bg-zinc-900/95 shadow-lg shadow-emerald-500/35": state.isOpen
+    },
+    onClick$: () => state.isOpen = !state.isOpen,
+    children: /* @__PURE__ */ jsx("img", {
+      width: 20,
+      height: 20,
+      src: "https://qwik.dev/logos/qwik-logo.svg",
+      alt: "Qwik Logo",
+      class: "h-5 w-5 opacity-90 drop-shadow-md transition-all duration-300 ease-in-out hover:scale-110 hover:opacity-100"
+    })
+  });
+});
+export {
+  DevtoolsButton
+};

package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const DevtoolsContainer = core.component$(() => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: "fixed bottom-0 right-0 z-[9999] font-sans",
+    "q:slot": "content",
+    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
+  });
+});
+exports.DevtoolsContainer = DevtoolsContainer;

package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.mjs

@@ -0,0 +1,12 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, Slot } from "@qwik.dev/core";
+const DevtoolsContainer = component$(() => {
+  return /* @__PURE__ */ jsx("div", {
+    class: "fixed bottom-0 right-0 z-[9999] font-sans",
+    "q:slot": "content",
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  DevtoolsContainer
+};

package/dist/ui/components/DevtoolsPanel/DevtoolsPanel.qwik.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const DevtoolsPanel = core.component$(({ state }) => {
+  const panelRef = core.useSignal();
+  core.useTask$(({ cleanup }) => {
+    const handleKeyPress = (e) => {
+      if (e.key === "`" && e.metaKey) {
+        state.isOpen = !state.isOpen;
+      }
+      if (e.key === "Escape" && state.isOpen) {
+        state.isOpen = false;
+      }
+    };
+    const handleClickOutside = (e) => {
+      if (state.isOpen && panelRef.value && !panelRef.value.contains(e.target)) {
+        state.isOpen = false;
+      }
+    };
+    window.addEventListener("keydown", handleKeyPress);
+    window.addEventListener("mousedown", handleClickOutside);
+    cleanup(() => {
+      window.removeEventListener("keydown", handleKeyPress);
+      window.removeEventListener("mousedown", handleClickOutside);
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: panelRef,
+    class: "fixed bottom-8 right-6 flex h-[50vh] w-full translate-y-0 transform overflow-hidden rounded-lg border-2 border-white/10 bg-zinc-900 text-white backdrop-blur-lg transition-transform duration-300 ease-in-out md:w-3/5",
+    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
+  });
+});
+exports.DevtoolsPanel = DevtoolsPanel;

package/dist/ui/components/DevtoolsPanel/DevtoolsPanel.qwik.mjs

@@ -0,0 +1,34 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useTask$, Slot } from "@qwik.dev/core";
+const DevtoolsPanel = component$(({ state }) => {
+  const panelRef = useSignal();
+  useTask$(({ cleanup }) => {
+    const handleKeyPress = (e) => {
+      if (e.key === "`" && e.metaKey) {
+        state.isOpen = !state.isOpen;
+      }
+      if (e.key === "Escape" && state.isOpen) {
+        state.isOpen = false;
+      }
+    };
+    const handleClickOutside = (e) => {
+      if (state.isOpen && panelRef.value && !panelRef.value.contains(e.target)) {
+        state.isOpen = false;
+      }
+    };
+    window.addEventListener("keydown", handleKeyPress);
+    window.addEventListener("mousedown", handleClickOutside);
+    cleanup(() => {
+      window.removeEventListener("keydown", handleKeyPress);
+      window.removeEventListener("mousedown", handleClickOutside);
+    });
+  });
+  return /* @__PURE__ */ jsx("div", {
+    ref: panelRef,
+    class: "fixed bottom-8 right-6 flex h-[50vh] w-full translate-y-0 transform overflow-hidden rounded-lg border-2 border-white/10 bg-zinc-900 text-white backdrop-blur-lg transition-transform duration-300 ease-in-out md:w-3/5",
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  DevtoolsPanel
+};

package/dist/ui/components/Tab/Tab.qwik.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const Tab = core.component$(({ state, id, title }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
+    onClick$: () => state.activeTab = id,
+    title,
+    class: {
+      "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
+      "bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white": state.activeTab !== id,
+      "bg-emerald-500 text-white shadow-lg shadow-emerald-500/35": state.activeTab === id
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
+  });
+});
+exports.Tab = Tab;

package/dist/ui/components/Tab/Tab.qwik.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, Slot } from "@qwik.dev/core";
+const Tab = component$(({ state, id, title }) => {
+  return /* @__PURE__ */ jsx("button", {
+    onClick$: () => state.activeTab = id,
+    title,
+    class: {
+      "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
+      "bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white": state.activeTab !== id,
+      "bg-emerald-500 text-white shadow-lg shadow-emerald-500/35": state.activeTab === id
+    },
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  Tab
+};

package/dist/ui/components/TabContent/TabContent.qwik.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const TabContent = core.component$(() => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "flex items-center justify-between border-b border-zinc-700 pb-4",
+        children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {
+          name: "title"
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {
+        name: "content"
+      })
+    ]
+  });
+});
+exports.TabContent = TabContent;

package/dist/ui/components/TabContent/TabContent.qwik.mjs

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, Slot } from "@qwik.dev/core";
+const TabContent = component$(() => {
+  return /* @__PURE__ */ jsxs("div", {
+    class: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "flex items-center justify-between border-b border-zinc-700 pb-4",
+        children: /* @__PURE__ */ jsx(Slot, {
+          name: "title"
+        })
+      }),
+      /* @__PURE__ */ jsx(Slot, {
+        name: "content"
+      })
+    ]
+  });
+});
+export {
+  TabContent
+};

package/dist/ui/components/TabTitle/TabTitle.qwik.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const TabTitle = core.component$(({ title }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", {
+    class: "text-xl font-semibold",
+    children: title
+  });
+});
+exports.TabTitle = TabTitle;

package/dist/ui/components/TabTitle/TabTitle.qwik.mjs

@@ -0,0 +1,11 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+const TabTitle = component$(({ title }) => {
+  return /* @__PURE__ */ jsx("h3", {
+    class: "text-xl font-semibold",
+    children: title
+  });
+});
+export {
+  TabTitle
+};

package/dist/ui/devtools.qwik.cjs

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const index = require("./node_modules/.pnpm/vite-hot-client@0.2.4_vite@5.4.10_@types_node@20.14.11_/node_modules/vite-hot-client/dist/index.qwik.cjs");
+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 client = require("./packages/kit/src/client.qwik.cjs");
+require("./node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
+const context = require("./packages/kit/src/context.qwik.cjs");
+const index_esm = require("./node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
+const global = require("./global.css.qwik.cjs");
+const Tab = require("./components/Tab/Tab.qwik.cjs");
+const TabContent = require("./components/TabContent/TabContent.qwik.cjs");
+const Overview = require("./features/Overview/Overview.qwik.cjs");
+const Assets = require("./features/Assets/Assets.qwik.cjs");
+const Routes = require("./features/Routes/Routes.qwik.cjs");
+const TabTitle = require("./components/TabTitle/TabTitle.qwik.cjs");
+const DevtoolsButton = require("./components/DevtoolsButton/DevtoolsButton.qwik.cjs");
+const DevtoolsContainer = require("./components/DevtoolsContainer/DevtoolsContainer.qwik.cjs");
+const DevtoolsPanel = require("./components/DevtoolsPanel/DevtoolsPanel.qwik.cjs");
+const Packages = require("./features/Packages/Packages.qwik.cjs");
+function getClientRpcFunctions() {
+  return {
+    healthCheck: () => true
+  };
+}
+const QwikDevtools = core.component$(() => {
+  core.useStyles$(global);
+  const state = core.useStore({
+    isOpen: false,
+    activeTab: "overview",
+    npmPackages: [],
+    assets: [],
+    routes: void 0
+  });
+  core.useVisibleTask$(async ({ track }) => {
+    const hot = await index.tryCreateHotContext(void 0, [
+      "/"
+    ]);
+    if (!hot) {
+      throw new Error("Vite Hot Context not connected");
+    }
+    context.setViteClientContext(hot);
+    client.createClientRpc(getClientRpcFunctions());
+    track(() => {
+      if (state.isOpen) {
+        const rpc = context.getViteClientRpc();
+        rpc.getAssetsFromPublicDir().then((data) => {
+          state.assets = data;
+        });
+        rpc.getRoutes().then((data) => {
+          const children = data.children || [];
+          const directories = children.filter((child) => child.type === "directory");
+          const values = [
+            {
+              relativePath: "",
+              name: "index",
+              type: index_esm.Type.DIRECTORY,
+              path: "",
+              isSymbolicLink: false,
+              children: void 0
+            },
+            ...directories
+          ];
+          state.routes = core.noSerialize(values);
+        });
+        rpc.getQwikPackages().then((data) => {
+          state.npmPackages = data;
+        });
+      }
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(DevtoolsContainer.DevtoolsContainer, {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DevtoolsButton.DevtoolsButton, {
+        state
+      }),
+      state.isOpen && /* @__PURE__ */ jsxRuntime.jsxs(DevtoolsPanel.DevtoolsPanel, {
+        state,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "flex flex-col gap-2 border-r border-zinc-700 bg-zinc-900/95 p-3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
+                state,
+                id: "overview",
+                title: "Overview",
+                children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiBoltOutline, {
+                  class: "h-5 w-5"
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
+                state,
+                id: "packages",
+                title: "Packages",
+                children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiCubeOutline, {
+                  class: "h-5 w-5"
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
+                state,
+                id: "routes",
+                title: "Routes",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lu_qwik.LuFolderTree, {
+                  class: "h-5 w-5"
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
+                state,
+                id: "assets",
+                title: "Assets",
+                children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiPhotoOutline, {
+                  class: "h-5 w-5"
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "custom-scrollbar flex-1 overflow-y-auto p-4",
+            children: [
+              state.activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "flex items-center gap-3",
+                    "q:slot": "title",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("img", {
+                        width: 32,
+                        height: 32,
+                        src: "https://qwik.dev/logos/qwik-logo.svg",
+                        alt: "Qwik Logo",
+                        class: "h-8 w-8"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx("h1", {
+                        class: "text-2xl font-semibold",
+                        children: "Qwik DevTools"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Overview.Overview, {
+                    state,
+                    "q:slot": "content"
+                  })
+                ]
+              }),
+              state.activeTab === "assets" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TabTitle.TabTitle, {
+                    title: "Public Assets",
+                    "q:slot": "title"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "flex gap-4 text-sm text-zinc-400",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                        children: [
+                          "Total Size:",
+                          " ",
+                          (state.assets?.reduce((acc, asset) => acc + asset.size, 0) / 1024).toFixed(2),
+                          " ",
+                          "KB"
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                        children: [
+                          "Count: ",
+                          state.assets?.length || 0
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Assets.Assets, {
+                    state,
+                    "q:slot": "content"
+                  })
+                ]
+              }),
+              state.activeTab === "packages" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TabTitle.TabTitle, {
+                    title: "Install an npm package",
+                    "q:slot": "title"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Packages.Packages, {
+                    "q:slot": "content"
+                  })
+                ]
+              }),
+              state.activeTab === "routes" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TabTitle.TabTitle, {
+                    title: "Application Routes",
+                    "q:slot": "title"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Routes.Routes, {
+                    state,
+                    "q:slot": "content"
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+exports.QwikDevtools = QwikDevtools;