@qwik.dev/devtools 0.1.1 → 0.2.0

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..."

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

@@ -0,0 +1,332 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const Tree = require("../../components/Tree/Tree.qwik.cjs");
+const filterVnode = require("../../components/Tree/filterVnode.qwik.cjs");
+const location = require("../../utils/location.qwik.cjs");
+const type$1 = require("../../components/Tree/type.qwik.cjs");
+const vnode = require("../../components/Tree/vnode.qwik.cjs");
+const type = require("../../utils/type.qwik.cjs");
+const formatTreeData = require("./formatTreeData.qwik.cjs");
+const internal = require("@qwik.dev/core/internal");
+require("../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
+const constants = require("../../packages/kit/src/constants.qwik.cjs");
+const context = require("../../packages/kit/src/context.qwik.cjs");
+require("../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
+const data = require("./data.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 bundleFull = require("../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.cjs");
+function getValueColorClass(node, valueText) {
+  switch (node.elementType) {
+    case "string":
+      return "text-red-400";
+    case "number":
+      return "text-green-400";
+    case "boolean":
+      return "text-amber-400";
+    case "function":
+      return "text-purple-400";
+    case "array":
+      return "text-muted-foreground";
+    case "object":
+      return /(Array\[|Object\s\{|Class\s\{)/.test(valueText) ? "text-muted-foreground" : "text-foreground";
+    default:
+      return "text-foreground";
+  }
+}
+const RenderTree = core.component$(() => {
+  core.useStyles$(`
+    pre.shiki {
+      overflow: auto;
+      padding: 10px;
+    }
+  `);
+  const codes = core.useSignal([]);
+  const data$1 = core.useSignal([]);
+  const stateTree = core.useSignal([]);
+  const hookFilters = core.useSignal([]);
+  const hooksOpen = core.useSignal(true);
+  const qwikContainer = core.useComputed$(() => {
+    try {
+      return location.htmlContainer();
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  });
+  const highlightedCodes = core.useSignal([]);
+  core.useVisibleTask$(async ({ track }) => {
+    track(() => codes.value);
+    if (!codes.value.length) {
+      highlightedCodes.value = [];
+      return;
+    }
+    const highlighter = await bundleFull.createHighlighter({
+      themes: [
+        "nord"
+      ],
+      langs: [
+        "tsx",
+        "js",
+        "ts",
+        "jsx"
+      ]
+    });
+    highlightedCodes.value = codes.value.map((item) => {
+      let lang = "tsx";
+      if (item.pathId.endsWith(".js")) lang = "js";
+      if (item.pathId.endsWith(".ts")) lang = "ts";
+      if (item.pathId.endsWith(".jsx")) lang = "jsx";
+      if (item.pathId.endsWith(".tsx")) lang = "tsx";
+      return item?.modules?.code ? highlighter.codeToHtml(item.modules.code, {
+        lang,
+        theme: "nord"
+      }) : "";
+    });
+  });
+  core.useVisibleTask$(() => {
+    data$1.value = vnode.removeNodeFromTree(filterVnode.vnode_toObject(qwikContainer.value.rootVNode), (node) => {
+      return node.name === type$1.ISDEVTOOL;
+    });
+  });
+  const onNodeClick = core.$(async (node) => {
+    console.log("current node", node);
+    const rpc = context.getViteClientRpc();
+    let parsed = [];
+    formatTreeData.clearAll();
+    if (node.props?.[constants.QRENDERFN]) {
+      formatTreeData.formatData("render", {
+        data: {
+          render: node.props[constants.QRENDERFN]
+        }
+      });
+      const qrl = formatTreeData.getQrlChunkName(node.props[constants.QRENDERFN]);
+      parsed = data.getQwikState(qrl);
+    }
+    if (Array.isArray(node.props?.[constants.QSEQ]) && parsed.length > 0) {
+      const normalizedData = [
+        ...parsed,
+        ...data.returnQrlData(node.props?.[constants.QSEQ])
+      ];
+      normalizedData.forEach((item) => {
+        formatTreeData.formatData(item.hookType, item);
+      });
+    }
+    if (node.props?.[constants.QPROPS]) {
+      const props = internal.unwrapStore(node.props[constants.QPROPS]);
+      Object.entries(props).forEach(([key, value]) => {
+        formatTreeData.formatData(type.isListen(key) ? "listens" : "props", {
+          data: {
+            [key]: value
+          }
+        });
+      });
+    }
+    codes.value = [];
+    const res = await rpc?.getModulesByPathIds(formatTreeData.findAllQrl());
+    codes.value = res.filter((item) => item.modules);
+    stateTree.value = formatTreeData.buildTree();
+    hookFilters.value = formatTreeData.getHookFilterList();
+  });
+  const currentTab = core.useSignal("state");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: "h-full w-full flex-1 overflow-hidden rounded-md border border-border bg-background",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      class: "flex h-full w-full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "w-1/2 overflow-hidden p-4",
+          style: {
+            minWidth: "400px"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Tree.Tree, {
+            data: data$1,
+            onNodeClick
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "border-l border-border"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "flex h-full min-h-0 w-1/2 flex-col overflow-hidden p-4",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "border-b border-border",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "flex space-x-4 border-b border-border",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("button", {
+                    onClick$: () => currentTab.value = "state",
+                    style: currentTab.value === "state" ? {
+                      borderBottom: "2px solid var(--color-primary-active)"
+                    } : {},
+                    class: "border-b-2 border-b-transparent px-4 py-3 text-sm font-medium transition-all duration-300 ease-in-out text-muted-foreground hover:text-foreground",
+                    children: "State"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", {
+                    onClick$: () => currentTab.value = "code",
+                    style: currentTab.value === "code" ? {
+                      borderBottom: "2px solid var(--color-primary-active)"
+                    } : {},
+                    class: "border-b-2 border-b-transparent px-4 py-3 text-sm font-medium transition-all duration-300 ease-in-out text-muted-foreground hover:text-foreground",
+                    children: "Code"
+                  })
+                ]
+              })
+            }),
+            currentTab.value === "state" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              class: "mt-5 flex min-h-0 flex-1 flex-col",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                  class: "rounded-lg border border-border bg-card-item-bg shadow-sm",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                      class: "flex items-center justify-between border-b border-border px-2 py-2",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", {
+                          class: "text-xs font-medium text-muted-foreground",
+                          children: "Hooks"
+                        }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                          class: "flex items-center space-x-2",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("button", {
+                              class: "text-xs text-primary hover:underline px-2 py-1",
+                              onClick$: core.$(() => {
+                                hookFilters.value = hookFilters.value.map((item) => {
+                                  item.display = true;
+                                  return item;
+                                });
+                                stateTree.value = formatTreeData.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
+                              }),
+                              children: "Select all"
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("button", {
+                              class: "text-xs text-muted-foreground hover:text-foreground hover:underline px-2 py-1",
+                              onClick$: core.$(() => {
+                                hookFilters.value = hookFilters.value.map((item) => {
+                                  item.display = false;
+                                  return item;
+                                });
+                                stateTree.value = formatTreeData.buildTree().filter((item) => hookFilters.value.some((hook) => hook.key === item?.label && hook.display));
+                              }),
+                              children: "Clear"
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("button", {
+                              "aria-label": "toggle hooks",
+                              onClick$: core.$(() => hooksOpen.value = !hooksOpen.value),
+                              class: "rounded p-1 text-muted-foreground hover:text-foreground",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiChevronUpMini, {
+                                class: `h-4 w-4 transition-transform duration-200 ${hooksOpen.value ? "rotate-180" : "-rotate-90"}`
+                              })
+                            })
+                          ]
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", {
+                      class: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-3 px-3 py-2 text-sm overflow-hidden",
+                      style: {
+                        maxHeight: hooksOpen.value ? "800px" : "0px",
+                        opacity: hooksOpen.value ? "1" : "0",
+                        transition: "max-height 200ms ease, opacity 200ms ease"
+                      },
+                      children: hookFilters.value.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("label", {
+                        class: "flex items-center",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("input", {
+                            class: "h-4 w-4 rounded-full border-border focus:ring-primary-active focus:ring-offset-0 dark:bg-[#1F2937] dark:border-[#374151]",
+                            style: {
+                              accentColor: "var(--color-primary-active)"
+                            },
+                            type: "checkbox",
+                            checked: item.display,
+                            onChange$: (ev) => {
+                              const target = ev.target;
+                              hookFilters.value[idx].display = target.checked;
+                              stateTree.value = formatTreeData.buildTree().filter((item2) => hookFilters.value.some((hook) => hook.key === item2?.label && hook.display));
+                            }
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", {
+                            class: "ml-2 select-none",
+                            children: item.key
+                          })
+                        ]
+                      }, idx))
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  class: "min-h-0 flex-1 overflow-y-auto p-2 mt-4",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Tree.Tree, {
+                    data: stateTree,
+                    gap: 10,
+                    animate: true,
+                    animationDuration: 200,
+                    isHover: true,
+                    renderNode: core.$((node) => {
+                      const label = node.label || node.name || "";
+                      const parts = label.split(":");
+                      if (node.children && parts.length === 1) {
+                        return /* @__PURE__ */ jsxRuntime.jsx("span", {
+                          class: "font-semibold text-pink-400",
+                          children: label
+                        });
+                      }
+                      if (parts.length > 1) {
+                        const key = parts[0];
+                        const value = parts.slice(1).join(":").trim();
+                        const valueClass = getValueColorClass(node, value);
+                        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", {
+                              class: "text-blue-400",
+                              children: key
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", {
+                              class: "text-foreground/70",
+                              children: " : "
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", {
+                              class: valueClass,
+                              children: value
+                            })
+                          ]
+                        });
+                      }
+                      return /* @__PURE__ */ jsxRuntime.jsx("span", {
+                        children: label
+                      });
+                    })
+                  })
+                })
+              ]
+            }),
+            currentTab.value === "code" && /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "mt-5 min-h-0 flex-1 overflow-y-auto rounded-lg border border-border p-2 shadow-sm",
+              children: codes.value.map((item, idx) => {
+                return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "mb-4 rounded-xl border border-border bg-card-item-bg p-4 shadow-sm hover:bg-card-item-hover-bg transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        class: "mb-2 break-all text-base font-semibold text-primary",
+                        children: item.pathId
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx("pre", {
+                        class: "overflow-hidden",
+                        dangerouslySetInnerHTML: highlightedCodes.value[idx] || ""
+                      })
+                    ]
+                  })
+                });
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+exports.RenderTree = RenderTree;