@qwik.dev/devtools 0.1.2 → 0.2.0

package/dist/plugin/index.js

@@ -8570,18 +8570,21 @@ function getServerFunctions(ctx) {
 //#region src/utils/useCollectHooks.ts
 const useCollectHooks = `import { $, useSignal, useVisibleTask$ } from "@qwik.dev/core"
 export const useCollectHooks = (src) => {
-  const hooksList = useSignal([])
+  const hooksList = useSignal(new Set())
   useVisibleTask$(({ track }) => {
     const newdata  = track(() => hooksList.value);
     if(!window.QWIK_DEVTOOLS_GLOBAL_STATE) {
       window.QWIK_DEVTOOLS_GLOBAL_STATE = {}
-      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = newdata || []
+      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = [...newdata]
     }else {
-      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = newdata
+      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = [...newdata]
     }
-  })
+  }, { strategy: 'document-ready'})
   return $((args) => {
-    hooksList.value.push(args)
+    if(hooksList.value.has(args)) {
+      return
+    }
+    hooksList.value.add(args)
   })
 }
 `;

package/dist/ui/_virtual/index.qwik.cjs

@@ -1,5 +1,6 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/index.qwik.cjs");
-var reactDomExports = index.__require();
-exports.reactDomExports = reactDomExports;
+const _commonjsHelpers = require("./_commonjsHelpers.qwik.cjs");
+const index = require("../node_modules/.pnpm/brace-expansion@2.0.1/node_modules/brace-expansion/index.qwik.cjs");
+var braceExpansionExports = index.__require();
+const expand = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(braceExpansionExports);
+module.exports = expand;

package/dist/ui/_virtual/index.qwik.mjs

@@ -1,5 +1,7 @@
-import { __require as requireReactDom } from "../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/index.qwik.mjs";
-var reactDomExports = requireReactDom();
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.qwik.mjs";
+import { __require as requireBraceExpansion } from "../node_modules/.pnpm/brace-expansion@2.0.1/node_modules/brace-expansion/index.qwik.mjs";
+var braceExpansionExports = requireBraceExpansion();
+const expand = /* @__PURE__ */ getDefaultExportFromCjs(braceExpansionExports);
 export {
-  reactDomExports as r
+  expand as default
 };

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

@@ -42,26 +42,46 @@ const TreeNodeComponent = core.component$((props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "w-full",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
         style: {
           paddingLeft: `${props.level * props.gap}px`
         },
-        class: `flex w-full cursor-pointer items-center rounded-md p-1 transition-colors duration-150 
-                ${isActive ? "bg-primary  text-white " : "hover:bg-primary-hover "}`,
+        class: `flex w-full cursor-pointer items-center p-1 ${isActive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-700/40 font-semibold" : ""}`,
         onClick$: handleNodeClick,
-        children: [
-          hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiChevronUpMini, {
-            class: `mr-2 h-4 w-4 flex-shrink-0 transition-transform duration-200 ${isExpanded.value ? "rotate-90" : "rotate-180"}`
-          }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
-            class: "mr-2 w-4 flex-shrink-0"
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            class: "cursor-pointer whitespace-nowrap text-sm",
-            children: props.renderNode ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-              children: props.renderNode(props.node)
-            }) : `<${props.node.label || props.node.name} ${iterateProps(props.node.props || {})}>`
-          })
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: `inline-flex items-center rounded-md  px-2 py-1`,
+          children: [
+            hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiChevronUpMini, {
+              class: `mr-2 h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform duration-200 ${isExpanded.value ? "rotate-90" : "rotate-180"}`
+            }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "mr-2 w-4 flex-shrink-0"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "cursor-pointer whitespace-nowrap text-sm",
+              children: props.renderNode ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+                children: props.renderNode(props.node)
+              }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "text-foreground/70",
+                    children: "<"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    class: "text-violet-400 dark:text-violet-300",
+                    children: props.node.label || props.node.name
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                    class: "text-muted-foreground",
+                    children: [
+                      ` ${iterateProps(props.node.props || {})}`,
+                      ">"
+                    ]
+                  })
+                ]
+              })
+            })
+          ]
+        })
       }),
       hasChildren ? props.animate ? /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: `overflow-hidden transition-all ease-in-out`,

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

@@ -40,26 +40,46 @@ const TreeNodeComponent = component$((props) => {
   return /* @__PURE__ */ jsxs("div", {
     class: "w-full",
     children: [
-      /* @__PURE__ */ jsxs("div", {
+      /* @__PURE__ */ jsx("div", {
         style: {
           paddingLeft: `${props.level * props.gap}px`
         },
-        class: `flex w-full cursor-pointer items-center rounded-md p-1 transition-colors duration-150 
-                ${isActive ? "bg-primary  text-white " : "hover:bg-primary-hover "}`,
+        class: `flex w-full cursor-pointer items-center p-1 ${isActive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-700/40 font-semibold" : ""}`,
         onClick$: handleNodeClick,
-        children: [
-          hasChildren ? /* @__PURE__ */ jsx(HiChevronUpMini, {
-            class: `mr-2 h-4 w-4 flex-shrink-0 transition-transform duration-200 ${isExpanded.value ? "rotate-90" : "rotate-180"}`
-          }) : /* @__PURE__ */ jsx("div", {
-            class: "mr-2 w-4 flex-shrink-0"
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "cursor-pointer whitespace-nowrap text-sm",
-            children: props.renderNode ? /* @__PURE__ */ jsx(Fragment, {
-              children: props.renderNode(props.node)
-            }) : `<${props.node.label || props.node.name} ${iterateProps(props.node.props || {})}>`
-          })
-        ]
+        children: /* @__PURE__ */ jsxs("div", {
+          class: `inline-flex items-center rounded-md  px-2 py-1`,
+          children: [
+            hasChildren ? /* @__PURE__ */ jsx(HiChevronUpMini, {
+              class: `mr-2 h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform duration-200 ${isExpanded.value ? "rotate-90" : "rotate-180"}`
+            }) : /* @__PURE__ */ jsx("div", {
+              class: "mr-2 w-4 flex-shrink-0"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: "cursor-pointer whitespace-nowrap text-sm",
+              children: props.renderNode ? /* @__PURE__ */ jsx(Fragment, {
+                children: props.renderNode(props.node)
+              }) : /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-foreground/70",
+                    children: "<"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-violet-400 dark:text-violet-300",
+                    children: props.node.label || props.node.name
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    class: "text-muted-foreground",
+                    children: [
+                      ` ${iterateProps(props.node.props || {})}`,
+                      ">"
+                    ]
+                  })
+                ]
+              })
+            })
+          ]
+        })
       }),
       hasChildren ? props.animate ? /* @__PURE__ */ jsx("div", {
         class: `overflow-hidden transition-all ease-in-out`,

package/dist/ui/devtools.qwik.cjs

@@ -22,7 +22,6 @@ const DevtoolsButton = require("./components/DevtoolsButton/DevtoolsButton.qwik.
 const DevtoolsContainer = require("./components/DevtoolsContainer/DevtoolsContainer.qwik.cjs");
 const DevtoolsPanel = require("./components/DevtoolsPanel/DevtoolsPanel.qwik.cjs");
 const Packages = require("./features/Packages/Packages.qwik.cjs");
-const Components = require("./features/Components/Components.qwik.cjs");
 const Inspect = require("./features/inspect/Inspect.qwik.cjs");
 const ThemeToggle = require("./components/ThemeToggle/ThemeToggle.qwik.cjs");
 const themeScript = require("./components/ThemeToggle/theme-script.qwik.cjs");
@@ -135,14 +134,6 @@ const QwikDevtools = core.component$(() => {
                       class: "h-5 w-5"
                     })
                   }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
-                    state,
-                    id: "components",
-                    title: "Components Tree",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiCodeBracketMini, {
-                      class: "h-5 w-5"
-                    })
-                  }),
                   /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, {
                     state,
                     id: "inspect",
@@ -240,17 +231,6 @@ const QwikDevtools = core.component$(() => {
                       })
                     ]
                   }),
-                  state.activeTab === "components" && /* @__PURE__ */ jsxRuntime.jsxs(TabContent.TabContent, {
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(TabTitle.TabTitle, {
-                        title: "Components Tree",
-                        "q:slot": "title"
-                      }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Components.Components, {
-                        "q:slot": "content"
-                      })
-                    ]
-                  }),
                   state.activeTab === "inspect" && /* @__PURE__ */ jsxRuntime.jsx(TabContent.TabContent, {
                     children: /* @__PURE__ */ jsxRuntime.jsx(Inspect.Inspect, {
                       "q:slot": "content"

package/dist/ui/devtools.qwik.mjs

@@ -1,7 +1,7 @@
 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, HiCodeBracketMini, 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 { 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";
@@ -20,7 +20,6 @@ import { DevtoolsButton } from "./components/DevtoolsButton/DevtoolsButton.qwik.
 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 { Components } from "./features/Components/Components.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";
@@ -133,14 +132,6 @@ const QwikDevtools = component$(() => {
                       class: "h-5 w-5"
                     })
                   }),
-                  /* @__PURE__ */ jsx(Tab, {
-                    state,
-                    id: "components",
-                    title: "Components Tree",
-                    children: /* @__PURE__ */ jsx(HiCodeBracketMini, {
-                      class: "h-5 w-5"
-                    })
-                  }),
                   /* @__PURE__ */ jsx(Tab, {
                     state,
                     id: "inspect",
@@ -238,17 +229,6 @@ const QwikDevtools = component$(() => {
                       })
                     ]
                   }),
-                  state.activeTab === "components" && /* @__PURE__ */ jsxs(TabContent, {
-                    children: [
-                      /* @__PURE__ */ jsx(TabTitle, {
-                        title: "Components Tree",
-                        "q:slot": "title"
-                      }),
-                      /* @__PURE__ */ jsx(Components, {
-                        "q:slot": "content"
-                      })
-                    ]
-                  }),
                   state.activeTab === "inspect" && /* @__PURE__ */ jsx(TabContent, {
                     children: /* @__PURE__ */ jsx(Inspect, {
                       "q:slot": "content"

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

@@ -15,7 +15,26 @@ 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 {
@@ -27,6 +46,7 @@ const RenderTree = core.component$(() => {
   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();
@@ -111,7 +131,7 @@ const RenderTree = core.component$(() => {
   });
   const currentTab = core.useSignal("state");
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    class: "h-full w-full flex-1 overflow-hidden rounded-md border  border-border",
+    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: [
@@ -141,7 +161,7 @@ const RenderTree = core.component$(() => {
                     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",
+                    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", {
@@ -149,65 +169,96 @@ const RenderTree = core.component$(() => {
                     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",
+                    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 rounded-lg border border-border bg-card-item-bg shadow-sm",
+              class: "mt-5 flex min-h-0 flex-1 flex-col",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                  class: "flex flex-wrap items-center gap-2 border-b border-border px-2 py-2",
+                  class: "rounded-lg border border-border bg-card-item-bg shadow-sm",
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", {
-                      class: "text-xs text-muted-foreground",
-                      children: "Hooks:"
-                    }),
-                    hookFilters.value.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("label", {
-                      class: "flex items-center space-x-1 rounded border border-border px-2 py-1 text-xs",
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                      class: "flex items-center justify-between border-b border-border px-2 py-2",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("input", {
-                          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", {
-                          children: item.key
+                          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"}`
+                              })
+                            })
+                          ]
                         })
                       ]
-                    }, idx)),
-                    /* @__PURE__ */ jsxRuntime.jsx("button", {
-                      class: "ml-auto rounded border border-border px-2 py-1 text-xs",
-                      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: "rounded border border-border px-2 py-1 text-xs",
-                      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("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",
+                  class: "min-h-0 flex-1 overflow-y-auto p-2 mt-4",
                   children: /* @__PURE__ */ jsxRuntime.jsx(Tree.Tree, {
                     data: stateTree,
                     gap: 10,
@@ -216,23 +267,35 @@ const RenderTree = core.component$(() => {
                     isHover: true,
                     renderNode: core.$((node) => {
                       const label = node.label || node.name || "";
-                      const isProperty = label.split(":");
-                      return isProperty.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", {
-                            class: "text-red-300 dark:text-red-500",
-                            children: isProperty[0]
-                          }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("span", {
-                            class: "text-gray-700 dark:text-white",
-                            children: [
-                              " ",
-                              ": ",
-                              isProperty[1]
-                            ]
-                          })
-                        ]
-                      }) : /* @__PURE__ */ jsxRuntime.jsx("span", {
+                      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
                       });
                     })
@@ -241,11 +304,11 @@ const RenderTree = core.component$(() => {
               ]
             }),
             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",
+              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-background p-4 shadow-lg",
+                    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",