@qwik.dev/devtools 0.1.1 → 0.2.0

package/dist/ui/devtools.qwik.mjs

@@ -1,8 +1,9 @@
-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 { jsxs, Fragment, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useStore, useSignal, useVisibleTask$, noSerialize } from "@qwik.dev/core";
+import { tryCreateHotContext } from "./node_modules/.pnpm/vite-hot-client@2.0.4_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0_/node_modules/vite-hot-client/dist/index.qwik.mjs";
+import { HiBoltOutline, HiCubeOutline, HiPhotoOutline, HiMegaphoneMini } 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 { BsDiagram3 } 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/bs.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 { 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";
@@ -14,10 +15,14 @@ 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 { RenderTree } from "./features/RenderTree/RenderTree.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";
+import { Inspect } from "./features/inspect/Inspect.qwik.mjs";
+import { ThemeToggle } from "./components/ThemeToggle/ThemeToggle.qwik.mjs";
+import { ThemeScript } from "./components/ThemeToggle/theme-script.qwik.mjs";
 function getClientRpcFunctions() {
   return {
     healthCheck: () => true
@@ -26,10 +31,11 @@ function getClientRpcFunctions() {
 const QwikDevtools = component$(() => {
   useStyles$(globalCss);
   const state = useStore({
-    isOpen: false,
+    isOpen: useSignal(false),
     activeTab: "overview",
     npmPackages: [],
     assets: [],
+    components: [],
     routes: void 0
   });
   useVisibleTask$(async ({ track }) => {
@@ -42,13 +48,16 @@ const QwikDevtools = component$(() => {
     setViteClientContext(hot);
     createClientRpc(getClientRpcFunctions());
     track(() => {
-      if (state.isOpen) {
+      if (state.isOpen.value) {
         const rpc = getViteClientRpc();
         rpc.getAssetsFromPublicDir().then((data) => {
           state.assets = data;
         });
+        rpc.getComponents().then((data) => {
+          state.components = data;
+        });
         rpc.getRoutes().then((data) => {
-          const children = data.children || [];
+          const children = data?.children || [];
           const directories = children.filter((child) => child.type === "directory");
           const values = [
             {
@@ -69,131 +78,172 @@ const QwikDevtools = component$(() => {
       }
     });
   });
-  return /* @__PURE__ */ jsxs(DevtoolsContainer, {
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsx(DevtoolsButton, {
-        state
-      }),
-      state.isOpen && /* @__PURE__ */ jsxs(DevtoolsPanel, {
-        state,
+      /* @__PURE__ */ jsx(ThemeScript, {}),
+      /* @__PURE__ */ jsxs(DevtoolsContainer, {
         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__ */ jsx(DevtoolsButton, {
+            state
           }),
-          /* @__PURE__ */ jsxs("div", {
-            class: "custom-scrollbar flex-1 overflow-y-auto p-4",
+          state.isOpen.value && /* @__PURE__ */ jsxs(DevtoolsPanel, {
+            state,
             children: [
-              state.activeTab === "overview" && /* @__PURE__ */ jsxs(TabContent, {
+              /* @__PURE__ */ jsxs("div", {
+                class: "bg-background/95 flex flex-col gap-2 border-r border-border p-3",
                 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(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: "renderTree",
+                    title: "renderTree",
+                    children: /* @__PURE__ */ jsx(BsDiagram3, {
+                      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__ */ jsx(Overview, {
+                  /* @__PURE__ */ jsx(Tab, {
                     state,
-                    "q:slot": "content"
+                    id: "inspect",
+                    title: "inspect",
+                    children: /* @__PURE__ */ jsx(HiMegaphoneMini, {
+                      class: "h-5 w-5"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "mt-auto",
+                    children: /* @__PURE__ */ jsx(ThemeToggle, {})
                   })
                 ]
               }),
-              state.activeTab === "assets" && /* @__PURE__ */ jsxs(TabContent, {
+              /* @__PURE__ */ jsxs("div", {
+                class: "custom-scrollbar flex-1 overflow-y-auto p-4",
                 children: [
-                  /* @__PURE__ */ jsx(TabTitle, {
-                    title: "Public Assets",
-                    "q:slot": "title"
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "flex gap-4 text-sm text-zinc-400",
+                  state.activeTab === "overview" && /* @__PURE__ */ jsxs(TabContent, {
                     children: [
-                      /* @__PURE__ */ jsxs("span", {
+                      /* @__PURE__ */ jsxs("div", {
+                        class: "flex items-center gap-3",
+                        "q:slot": "title",
                         children: [
-                          "Total Size:",
-                          " ",
-                          (state.assets?.reduce((acc, asset) => acc + asset.size, 0) / 1024).toFixed(2),
-                          " ",
-                          "KB"
+                          /* @__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__ */ jsxs("span", {
+                      /* @__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-muted-foreground",
                         children: [
-                          "Count: ",
-                          state.assets?.length || 0
+                          /* @__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"
                       })
                     ]
                   }),
-                  /* @__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"
+                  state.activeTab === "packages" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "Install an npm package",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(Packages, {
+                        "q:slot": "content"
+                      })
+                    ]
                   }),
-                  /* @__PURE__ */ jsx(Packages, {
-                    "q:slot": "content"
-                  })
-                ]
-              }),
-              state.activeTab === "routes" && /* @__PURE__ */ jsxs(TabContent, {
-                children: [
-                  /* @__PURE__ */ jsx(TabTitle, {
-                    title: "Application Routes",
-                    "q:slot": "title"
+                  state.activeTab === "routes" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "Application Routes",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(Routes, {
+                        state,
+                        "q:slot": "content"
+                      })
+                    ]
                   }),
-                  /* @__PURE__ */ jsx(Routes, {
-                    state,
-                    "q:slot": "content"
+                  state.activeTab === "inspect" && /* @__PURE__ */ jsx(TabContent, {
+                    children: /* @__PURE__ */ jsx(Inspect, {
+                      "q:slot": "content"
+                    })
+                  }),
+                  state.activeTab === "renderTree" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "render Tree",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(RenderTree, {
+                        "q:slot": "content"
+                      })
+                    ]
                   })
                 ]
               })

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

@@ -9,7 +9,7 @@ const Assets = core.component$(({ state }) => {
       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]",
+        class: "overflow-hidden rounded-xl border border-border bg-card-item-bg transition-all duration-200 hover:bg-card-item-hover-bg",
         children: [
           isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", {
             class: "aspect-square overflow-hidden bg-black/20",
@@ -23,7 +23,7 @@ const Assets = core.component$(({ state }) => {
           }) : /* @__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",
+              class: "font-mono text-2xl text-muted-foreground",
               children: fileExt
             })
           }),
@@ -36,7 +36,7 @@ const Assets = core.component$(({ state }) => {
                 children: asset.path.split("/").pop()
               }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                class: "flex items-center justify-between text-xs text-zinc-400",
+                class: "flex items-center justify-between text-xs text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", {
                     children: [
@@ -45,7 +45,7 @@ const Assets = core.component$(({ state }) => {
                     ]
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", {
-                    class: "rounded-full bg-white/5 px-2 py-1",
+                    class: "bg-foreground/5 rounded-full px-2 py-1",
                     children: fileExt
                   })
                 ]

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

@@ -7,7 +7,7 @@ const Assets = component$(({ state }) => {
       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]",
+        class: "overflow-hidden rounded-xl border border-border bg-card-item-bg transition-all duration-200 hover:bg-card-item-hover-bg",
         children: [
           isImage ? /* @__PURE__ */ jsx("div", {
             class: "aspect-square overflow-hidden bg-black/20",
@@ -21,7 +21,7 @@ const Assets = component$(({ state }) => {
           }) : /* @__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",
+              class: "font-mono text-2xl text-muted-foreground",
               children: fileExt
             })
           }),
@@ -34,7 +34,7 @@ const Assets = component$(({ state }) => {
                 children: asset.path.split("/").pop()
               }),
               /* @__PURE__ */ jsxs("div", {
-                class: "flex items-center justify-between text-xs text-zinc-400",
+                class: "flex items-center justify-between text-xs text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxs("span", {
                     children: [
@@ -43,7 +43,7 @@ const Assets = component$(({ state }) => {
                     ]
                   }),
                   /* @__PURE__ */ jsx("span", {
-                    class: "rounded-full bg-white/5 px-2 py-1",
+                    class: "bg-foreground/5 rounded-full px-2 py-1",
                     children: fileExt
                   })
                 ]

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

@@ -2,21 +2,31 @@
 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 hi_qwik = require("../../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.cjs");
+const lu_qwik = require("../../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.cjs");
 const Overview = core.component$(({ state }) => {
+  const pageJump = core.$((pageName) => {
+    state.activeTab = pageName;
+  });
+  const stopPropagation = core.sync$((e) => {
+    e.preventDefault();
+  });
   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]",
+            onClick$: [
+              core.$(() => 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",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", {
-                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
                 children: /* @__PURE__ */ jsxRuntime.jsx(lu_qwik.LuFolderTree, {
-                  class: "h-6 w-6 text-emerald-500"
+                  class: "h-6 w-6 text-accent"
                 })
               }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -26,7 +36,7 @@ const Overview = core.component$(({ state }) => {
                     children: state.routes?.length
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", {
-                    class: "text-sm text-zinc-400",
+                    class: "text-sm text-muted-foreground",
                     children: "pages"
                   })
                 ]
@@ -34,22 +44,26 @@ const Overview = core.component$(({ state }) => {
             ]
           }),
           /* @__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]",
+            onClick$: [
+              core.$(() => 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",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", {
-                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
                 children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiCubeOutline, {
-                  class: "h-6 w-6 text-emerald-500"
+                  class: "h-6 w-6 text-accent"
                 })
               }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", {
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", {
                     class: "text-3xl font-semibold",
-                    children: state.assets.length
+                    children: state.components.length
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", {
-                    class: "text-sm text-zinc-400",
+                    class: "text-sm text-muted-foreground",
                     children: "components"
                   })
                 ]
@@ -57,12 +71,16 @@ const Overview = core.component$(({ state }) => {
             ]
           }),
           /* @__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]",
+            onClick$: [
+              core.$(() => 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",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", {
-                class: "rounded-lg border border-white/10 bg-white/5 p-3.5",
+                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
                 children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiPhotoOutline, {
-                  class: "h-6 w-6 text-emerald-500"
+                  class: "h-6 w-6 text-accent"
                 })
               }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -72,7 +90,7 @@ const Overview = core.component$(({ state }) => {
                     children: state.assets.length || 0
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", {
-                    class: "text-sm text-zinc-400",
+                    class: "text-sm text-muted-foreground",
                     children: "assets"
                   })
                 ]
@@ -82,7 +100,11 @@ const Overview = core.component$(({ state }) => {
         ]
       }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: "space-y-4 rounded-xl border border-white/10 bg-white/[0.03] p-5",
+        onClick$: [
+          core.$(() => 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",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", {
             class: "text-lg font-semibold",
@@ -91,14 +113,14 @@ const Overview = core.component$(({ state }) => {
           /* @__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",
+              class: "bg-foreground/5 flex items-center justify-between rounded-lg 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",
+                  class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
                   children: version
                 })
               ]
@@ -107,7 +129,7 @@ const Overview = core.component$(({ state }) => {
         ]
       }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: "space-y-4 rounded-xl border border-white/10 bg-white/[0.03] p-5",
+        class: "space-y-4 rounded-xl border border-border bg-card-item-bg p-5",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", {
             class: "text-lg font-semibold",
@@ -117,10 +139,10 @@ const Overview = core.component$(({ state }) => {
             class: "space-y-3",
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                class: "flex justify-between border-b border-white/10 py-2",
+                class: "flex justify-between border-b border-border py-2",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", {
-                    class: "text-zinc-400",
+                    class: "text-muted-foreground",
                     children: "SSR to full load"
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", {
@@ -130,10 +152,10 @@ const Overview = core.component$(({ state }) => {
                 ]
               }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                class: "flex justify-between border-b border-white/10 py-2",
+                class: "flex justify-between border-b border-border py-2",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", {
-                    class: "text-zinc-400",
+                    class: "text-muted-foreground",
                     children: "Page load"
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", {
@@ -146,7 +168,7 @@ const Overview = core.component$(({ state }) => {
                 class: "flex justify-between py-2",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", {
-                    class: "text-zinc-400",
+                    class: "text-muted-foreground",
                     children: "Navigation"
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", {