@qwik.dev/devtools 0.0.5 → 0.1.0

package/dist/ui/devtools.qwik.mjs

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

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const Assets = core.component$(({ state }) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", {
+            class: "aspect-square overflow-hidden bg-black/20",
+            children: /* @__PURE__ */ jsxRuntime.jsx("img", {
+              width: 176,
+              height: 176,
+              src: asset.publicPath,
+              alt: asset.path,
+              class: "h-full w-full object-cover"
+            })
+          }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+            class: "flex aspect-square items-center justify-center bg-black/20",
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+              class: "font-mono text-2xl text-zinc-400",
+              children: fileExt
+            })
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "space-y-2 p-4",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: "truncate text-sm",
+                title: asset.path,
+                children: asset.path.split("/").pop()
+              }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "flex items-center justify-between text-xs text-zinc-400",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                    children: [
+                      (asset.size / 1024).toFixed(2),
+                      " KB"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "rounded-full bg-white/5 px-2 py-1",
+                    children: fileExt
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      }, asset.filePath);
+    })
+  });
+});
+exports.Assets = Assets;

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
+};