@qwik.dev/devtools 0.1.0 → 0.1.2

package/dist/ui/features/Components/components/Tree.qwik.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../_virtual/jsx-runtime.qwik.cjs");
+const index_qwik = require("../../../node_modules/.pnpm/@qwik.dev_react@2.0.0-beta.9_@qwik.dev_core@2.0.0-beta.9_prettier@3.3.3_vite@7.1.3_@typ_acdb3a1fab641cc17ee740fd3c684547/node_modules/@qwik.dev/react/lib/index.qwik.qwik.cjs");
+const UncontrolledTreeEnvironment = require("../../../node_modules/.pnpm/react-complex-tree@2.4.6_react@18.2.0/node_modules/react-complex-tree/lib/esm/uncontrolledEnvironment/UncontrolledTreeEnvironment.qwik.cjs");
+const StaticTreeDataProvider = require("../../../node_modules/.pnpm/react-complex-tree@2.4.6_react@18.2.0/node_modules/react-complex-tree/lib/esm/uncontrolledEnvironment/StaticTreeDataProvider.qwik.cjs");
+const Tree = require("../../../node_modules/.pnpm/react-complex-tree@2.4.6_react@18.2.0/node_modules/react-complex-tree/lib/esm/tree/Tree.qwik.cjs");
+const readTemplate = (template, data = {
+  items: {}
+}) => {
+  for (const [key, value] of Object.entries(template)) {
+    data.items[key] = {
+      index: key,
+      canMove: true,
+      isFolder: value !== null,
+      children: value !== null ? Object.keys(value) : void 0,
+      data: key,
+      canRename: true
+    };
+    if (value !== null) {
+      readTemplate(value, data);
+    }
+  }
+  return data;
+};
+const longTree = {
+  root: {
+    "<QwikRouterProvider />": {
+      "<RouterHead />": null,
+      "<RouterOutlet />": null
+    }
+  }
+};
+function Greetings() {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(UncontrolledTreeEnvironment.UncontrolledTreeEnvironment, {
+    dataProvider: new StaticTreeDataProvider.StaticTreeDataProvider(readTemplate(longTree).items, (item, data) => ({
+      ...item,
+      data
+    })),
+    getItemTitle: (item) => item.data,
+    canDragAndDrop: false,
+    canReorderItems: false,
+    canDropOnFolder: false,
+    canDropOnNonFolder: false,
+    viewState: {
+      "tree-1": {
+        expandedItems: []
+      }
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tree.Tree, {
+      treeId: "tree-1",
+      rootItem: "root",
+      treeLabel: "Tree Example"
+    })
+  });
+}
+const QGreetings = index_qwik.qwikify$(Greetings, {
+  eagerness: "load"
+});
+exports.QGreetings = QGreetings;

package/dist/ui/features/Components/components/Tree.qwik.mjs

@@ -0,0 +1,60 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.qwik.mjs";
+import { qwikify$ } from "../../../node_modules/.pnpm/@qwik.dev_react@2.0.0-beta.9_@qwik.dev_core@2.0.0-beta.9_prettier@3.3.3_vite@7.1.3_@typ_acdb3a1fab641cc17ee740fd3c684547/node_modules/@qwik.dev/react/lib/index.qwik.qwik.mjs";
+import { UncontrolledTreeEnvironment } from "../../../node_modules/.pnpm/react-complex-tree@2.4.6_react@18.2.0/node_modules/react-complex-tree/lib/esm/uncontrolledEnvironment/UncontrolledTreeEnvironment.qwik.mjs";
+import { StaticTreeDataProvider } from "../../../node_modules/.pnpm/react-complex-tree@2.4.6_react@18.2.0/node_modules/react-complex-tree/lib/esm/uncontrolledEnvironment/StaticTreeDataProvider.qwik.mjs";
+import { Tree } from "../../../node_modules/.pnpm/react-complex-tree@2.4.6_react@18.2.0/node_modules/react-complex-tree/lib/esm/tree/Tree.qwik.mjs";
+const readTemplate = (template, data = {
+  items: {}
+}) => {
+  for (const [key, value] of Object.entries(template)) {
+    data.items[key] = {
+      index: key,
+      canMove: true,
+      isFolder: value !== null,
+      children: value !== null ? Object.keys(value) : void 0,
+      data: key,
+      canRename: true
+    };
+    if (value !== null) {
+      readTemplate(value, data);
+    }
+  }
+  return data;
+};
+const longTree = {
+  root: {
+    "<QwikRouterProvider />": {
+      "<RouterHead />": null,
+      "<RouterOutlet />": null
+    }
+  }
+};
+function Greetings() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(UncontrolledTreeEnvironment, {
+    dataProvider: new StaticTreeDataProvider(readTemplate(longTree).items, (item, data) => ({
+      ...item,
+      data
+    })),
+    getItemTitle: (item) => item.data,
+    canDragAndDrop: false,
+    canReorderItems: false,
+    canDropOnFolder: false,
+    canDropOnNonFolder: false,
+    viewState: {
+      "tree-1": {
+        expandedItems: []
+      }
+    },
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tree, {
+      treeId: "tree-1",
+      rootItem: "root",
+      treeLabel: "Tree Example"
+    })
+  });
+}
+const QGreetings = qwikify$(Greetings, {
+  eagerness: "load"
+});
+export {
+  QGreetings
+};

package/dist/ui/features/Components/styles.css.qwik.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const styles = ":root {\n  --rct-color-tree-bg: transparent;\n  --rct-item-height: 32px;\n  --rct-color-search-highlight-bg: rgba(59, 130, 246, 0.2);\n\n  --rct-color-tree-focus-outline: transparent;\n  --rct-item-margin: 1px;\n  --rct-item-padding: 8px;\n  --rct-radius: 6px;\n  --rct-bar-offset: 6px;\n  --rct-bar-width: 2px;\n  --rct-bar-color: rgb(16, 185, 129);\n  --rct-focus-outline: #000000;\n\n  --rct-color-focustree-item-selected-bg: #fff;\n  --rct-color-focustree-item-hover-bg: rgba(255, 255, 255, 0.03);\n  --rct-color-focustree-item-hover-text: #fff;\n  --rct-color-focustree-item-active-bg: rgba(255, 255, 255, 0.08);\n  --rct-color-focustree-item-active-text: #fff;\n\n  --rct-arrow-size: 10px;\n  --rct-arrow-container-size: 16px;\n  --rct-arrow-padding: 6px;\n  --rct-color-arrow: rgb(16 185 129 / var(--tw-bg-opacity, 1));\n  --rct-cursor: pointer;\n\n  --rct-search-width: 100%;\n  --rct-search-height: 32px;\n  --rct-search-padding: 8px;\n  --rct-search-border: rgba(255, 255, 255, 0.1);\n  --rct-search-border-bottom: rgb(16, 185, 129);\n  --rct-search-bg: rgba(255, 255, 255, 0.03);\n  --rct-search-text: #fff;\n  --rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);\n}\n\n/* Add these additional styles to match devtools theme */\n.rct-tree-item-button {\n  color: rgb(16 185 129 / var(--tw-bg-opacity, 1)) !important;\n  font-size: 14px !important;\n  transition: all 0.2s ease !important;\n}\n\n.rct-tree-item-button:hover {\n  color: rgb(16 185 129 / var(--tw-bg-opacity, 1)) !important;\n}\n\n.rct-tree-item-button[aria-expanded='true'] {\n  color: #fff !important;\n}\n\n.rct-tree-item-title-container {\n  border-radius: var(--rct-radius) !important;\n}\n\n.rct-tree-search-input {\n  border: 1px solid var(--rct-search-border) !important;\n  border-radius: var(--rct-radius) !important;\n  margin-bottom: 12px !important;\n  font-size: 14px !important;\n}\n\n.rct-tree-search-input:focus {\n  border-color: rgb(16, 185, 129) !important;\n  outline: none !important;\n  box-shadow: 0 0 0 1px rgb(16, 185, 129) !important;\n}\n";
+module.exports = styles;

package/dist/ui/features/Components/styles.css.qwik.mjs

@@ -0,0 +1,4 @@
+const styles = ":root {\n  --rct-color-tree-bg: transparent;\n  --rct-item-height: 32px;\n  --rct-color-search-highlight-bg: rgba(59, 130, 246, 0.2);\n\n  --rct-color-tree-focus-outline: transparent;\n  --rct-item-margin: 1px;\n  --rct-item-padding: 8px;\n  --rct-radius: 6px;\n  --rct-bar-offset: 6px;\n  --rct-bar-width: 2px;\n  --rct-bar-color: rgb(16, 185, 129);\n  --rct-focus-outline: #000000;\n\n  --rct-color-focustree-item-selected-bg: #fff;\n  --rct-color-focustree-item-hover-bg: rgba(255, 255, 255, 0.03);\n  --rct-color-focustree-item-hover-text: #fff;\n  --rct-color-focustree-item-active-bg: rgba(255, 255, 255, 0.08);\n  --rct-color-focustree-item-active-text: #fff;\n\n  --rct-arrow-size: 10px;\n  --rct-arrow-container-size: 16px;\n  --rct-arrow-padding: 6px;\n  --rct-color-arrow: rgb(16 185 129 / var(--tw-bg-opacity, 1));\n  --rct-cursor: pointer;\n\n  --rct-search-width: 100%;\n  --rct-search-height: 32px;\n  --rct-search-padding: 8px;\n  --rct-search-border: rgba(255, 255, 255, 0.1);\n  --rct-search-border-bottom: rgb(16, 185, 129);\n  --rct-search-bg: rgba(255, 255, 255, 0.03);\n  --rct-search-text: #fff;\n  --rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);\n}\n\n/* Add these additional styles to match devtools theme */\n.rct-tree-item-button {\n  color: rgb(16 185 129 / var(--tw-bg-opacity, 1)) !important;\n  font-size: 14px !important;\n  transition: all 0.2s ease !important;\n}\n\n.rct-tree-item-button:hover {\n  color: rgb(16 185 129 / var(--tw-bg-opacity, 1)) !important;\n}\n\n.rct-tree-item-button[aria-expanded='true'] {\n  color: #fff !important;\n}\n\n.rct-tree-item-title-container {\n  border-radius: var(--rct-radius) !important;\n}\n\n.rct-tree-search-input {\n  border: 1px solid var(--rct-search-border) !important;\n  border-radius: var(--rct-radius) !important;\n  margin-bottom: 12px !important;\n  font-size: 14px !important;\n}\n\n.rct-tree-search-input:focus {\n  border-color: rgb(16, 185, 129) !important;\n  outline: none !important;\n  box-shadow: 0 0 0 1px rgb(16, 185, 129) !important;\n}\n";
+export {
+  styles as default
+};

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", {

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

@@ -1,20 +1,30 @@
 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";
+import { component$, $, sync$ } from "@qwik.dev/core";
+import { HiCubeOutline, HiPhotoOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { LuFolderTree } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
 const Overview = component$(({ state }) => {
+  const pageJump = $((pageName) => {
+    state.activeTab = pageName;
+  });
+  const stopPropagation = sync$((e) => {
+    e.preventDefault();
+  });
   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]",
+            onClick$: [
+              $(() => 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__ */ 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__ */ jsx(LuFolderTree, {
-                  class: "h-6 w-6 text-emerald-500"
+                  class: "h-6 w-6 text-accent"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
@@ -24,7 +34,7 @@ const Overview = component$(({ state }) => {
                     children: state.routes?.length
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-zinc-400",
+                    class: "text-sm text-muted-foreground",
                     children: "pages"
                   })
                 ]
@@ -32,22 +42,26 @@ const Overview = component$(({ state }) => {
             ]
           }),
           /* @__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]",
+            onClick$: [
+              $(() => 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__ */ 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__ */ jsx(HiCubeOutline, {
-                  class: "h-6 w-6 text-emerald-500"
+                  class: "h-6 w-6 text-accent"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
                 children: [
                   /* @__PURE__ */ jsx("div", {
                     class: "text-3xl font-semibold",
-                    children: state.assets.length
+                    children: state.components.length
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-zinc-400",
+                    class: "text-sm text-muted-foreground",
                     children: "components"
                   })
                 ]
@@ -55,12 +69,16 @@ const Overview = component$(({ state }) => {
             ]
           }),
           /* @__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]",
+            onClick$: [
+              $(() => 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__ */ 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__ */ jsx(HiPhotoOutline, {
-                  class: "h-6 w-6 text-emerald-500"
+                  class: "h-6 w-6 text-accent"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
@@ -70,7 +88,7 @@ const Overview = component$(({ state }) => {
                     children: state.assets.length || 0
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-zinc-400",
+                    class: "text-sm text-muted-foreground",
                     children: "assets"
                   })
                 ]
@@ -80,7 +98,11 @@ const Overview = component$(({ state }) => {
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: "space-y-4 rounded-xl border border-white/10 bg-white/[0.03] p-5",
+        onClick$: [
+          $(() => 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__ */ jsx("h3", {
             class: "text-lg font-semibold",
@@ -89,14 +111,14 @@ const Overview = component$(({ state }) => {
           /* @__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",
+              class: "bg-foreground/5 flex items-center justify-between rounded-lg 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",
+                  class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
                   children: version
                 })
               ]
@@ -105,7 +127,7 @@ const Overview = component$(({ state }) => {
         ]
       }),
       /* @__PURE__ */ 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__ */ jsx("h3", {
             class: "text-lg font-semibold",
@@ -115,10 +137,10 @@ const Overview = component$(({ state }) => {
             class: "space-y-3",
             children: [
               /* @__PURE__ */ 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__ */ jsx("span", {
-                    class: "text-zinc-400",
+                    class: "text-muted-foreground",
                     children: "SSR to full load"
                   }),
                   /* @__PURE__ */ jsx("span", {
@@ -128,10 +150,10 @@ const Overview = component$(({ state }) => {
                 ]
               }),
               /* @__PURE__ */ 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__ */ jsx("span", {
-                    class: "text-zinc-400",
+                    class: "text-muted-foreground",
                     children: "Page load"
                   }),
                   /* @__PURE__ */ jsx("span", {
@@ -144,7 +166,7 @@ const Overview = component$(({ state }) => {
                 class: "flex justify-between py-2",
                 children: [
                   /* @__PURE__ */ jsx("span", {
-                    class: "text-zinc-400",
+                    class: "text-muted-foreground",
                     children: "Navigation"
                   }),
                   /* @__PURE__ */ jsx("span", {

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

@@ -35,7 +35,7 @@ const Packages = core.component$(() => {
             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"
+          class: "w-full rounded-lg border border-border bg-input px-4 py-2 text-sm text-foreground placeholder-muted-foreground outline-none focus:border-ring"
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx(core.Resource, {
@@ -43,7 +43,7 @@ const Packages = core.component$(() => {
         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"
+            class: "border-t-foreground/40 animate-spin h-5 w-5 rounded-full border-2 border-border"
           })
         }),
         onRejected: (error) => /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -55,7 +55,7 @@ const Packages = core.component$(() => {
             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",
+                class: "bg-foreground/5 flex flex-col gap-2 rounded-lg p-3",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", {
                     class: "flex items-center justify-between",
@@ -68,7 +68,7 @@ const Packages = core.component$(() => {
                         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",
+                            class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
                             children: pkg.version
                           }),
                           /* @__PURE__ */ jsxRuntime.jsx(InstallButton.InstallButton, {
@@ -80,7 +80,7 @@ const Packages = core.component$(() => {
                     ]
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", {
-                    class: "line-clamp-2 text-xs text-zinc-400",
+                    class: "line-clamp-2 text-xs text-muted-foreground",
                     children: pkg.description
                   })
                 ]

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

@@ -33,7 +33,7 @@ const Packages = component$(() => {
             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"
+          class: "w-full rounded-lg border border-border bg-input px-4 py-2 text-sm text-foreground placeholder-muted-foreground outline-none focus:border-ring"
         })
       }),
       /* @__PURE__ */ jsx(Resource, {
@@ -41,7 +41,7 @@ const Packages = component$(() => {
         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"
+            class: "border-t-foreground/40 animate-spin h-5 w-5 rounded-full border-2 border-border"
           })
         }),
         onRejected: (error) => /* @__PURE__ */ jsx("div", {
@@ -53,7 +53,7 @@ const Packages = component$(() => {
             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",
+                class: "bg-foreground/5 flex flex-col gap-2 rounded-lg p-3",
                 children: [
                   /* @__PURE__ */ jsxs("div", {
                     class: "flex items-center justify-between",
@@ -66,7 +66,7 @@ const Packages = component$(() => {
                         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",
+                            class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
                             children: pkg.version
                           }),
                           /* @__PURE__ */ jsx(InstallButton, {
@@ -78,7 +78,7 @@ const Packages = component$(() => {
                     ]
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "line-clamp-2 text-xs text-zinc-400",
+                    class: "line-clamp-2 text-xs text-muted-foreground",
                     children: pkg.description
                   })
                 ]

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

@@ -18,13 +18,13 @@ const InstallButton = core.component$(({ pkg, installingPackage }) => {
     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"
+      installingPackage.value === pkg.name ? "bg-primary/5 text-primary/50 cursor-not-allowed" : "bg-primary/10 hover:bg-primary/20 text-primary"
     ].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"
+          class: "animate-spin h-3 w-3 rounded-full border border-current border-t-transparent"
         }),
         /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: "Installing..."

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

@@ -16,13 +16,13 @@ const InstallButton = component$(({ pkg, installingPackage }) => {
     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"
+      installingPackage.value === pkg.name ? "bg-primary/5 text-primary/50 cursor-not-allowed" : "bg-primary/10 hover:bg-primary/20 text-primary"
     ].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"
+          class: "animate-spin h-3 w-3 rounded-full border border-current border-t-transparent"
         }),
         /* @__PURE__ */ jsx("span", {
           children: "Installing..."