@qwik.dev/devtools 0.2.0 → 0.2.2

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

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.qwik.mjs";
+import { __require as requireBrowser } from "../node_modules/.pnpm/debug@4.4.3_supports-color@5.5.0/node_modules/debug/src/browser.qwik.mjs";
+var browserExports = requireBrowser();
+const debug = /* @__PURE__ */ getDefaultExportFromCjs(browserExports);
+export {
+  browserExports as b,
+  debug as default
+};

package/dist/ui/_virtual/browser.qwik2.mjs

@@ -0,0 +1,4 @@
+var browser = { exports: {} };
+export {
+  browser as __module
+};

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

@@ -76,7 +76,7 @@ const DevtoolsButton = component$(({ state }) => {
   return /* @__PURE__ */ jsx("div", {
     ref: elementRef,
     class: {
-      "fixed flex h-9 w-9 origin-center select-none items-center justify-center rounded-lg border border-border bg-background backdrop-blur-md": true,
+      "border-border bg-background fixed flex h-9 w-9 origin-center select-none items-center justify-center rounded-lg border backdrop-blur-md": true,
       "border-accent/50 bg-background/95 shadow-accent/35 rotate-90 shadow-lg": state.isOpen.value && !isDragging.value,
       "cursor-grab": !isDragging.value,
       "cursor-grabbing": isDragging.value,

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

@@ -2,9 +2,12 @@ import { jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, Slot } from "@qwik.dev/core";
 const DevtoolsContainer = component$(() => {
   return /* @__PURE__ */ jsx("div", {
-    class: "fixed bottom-0 right-0 z-[9999] font-sans",
-    "q:slot": "content",
-    children: /* @__PURE__ */ jsx(Slot, {})
+    class: "qwik-devtools",
+    children: /* @__PURE__ */ jsx("div", {
+      class: "fixed bottom-0 right-0 z-[9999] font-sans",
+      "q:slot": "content",
+      children: /* @__PURE__ */ jsx(Slot, {})
+    })
   });
 });
 export {

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

@@ -26,7 +26,7 @@ const DevtoolsPanel = component$(({ state }) => {
   });
   return /* @__PURE__ */ jsx("div", {
     ref: panelRef,
-    class: "fixed bottom-6 right-6 flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] translate-y-0 transform overflow-hidden rounded-lg border-2 border-border bg-background text-foreground backdrop-blur-lg transition-transform duration-300 ease-in-out",
+    class: "border-border bg-background text-foreground fixed bottom-6 right-6 flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] translate-y-0 transform overflow-hidden rounded-lg border-2 backdrop-blur-lg transition-transform duration-300 ease-in-out",
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });

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

@@ -6,7 +6,7 @@ const Tab = component$(({ state, id, title }) => {
     title,
     class: {
       "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
-      "bg-foreground/5 hover:bg-foreground/10 text-muted-foreground hover:bg-primary-hover hover:text-foreground": state.activeTab !== id,
+      "hover:bg-foreground/5 text-muted-foreground hover:text-foreground bg-transparent": state.activeTab !== id,
       "shadow-accent/35 bg-accent text-white shadow-lg": state.activeTab === id
     },
     children: /* @__PURE__ */ jsx(Slot, {})

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

@@ -5,13 +5,16 @@ const TabContent = component$(() => {
     class: "flex h-full w-full flex-col space-y-6",
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: "flex items-center justify-between border-b border-border pb-4",
+        class: "border-border flex items-center justify-between border-b pb-4",
         children: /* @__PURE__ */ jsx(Slot, {
           name: "title"
         })
       }),
-      /* @__PURE__ */ jsx(Slot, {
-        name: "content"
+      /* @__PURE__ */ jsx("div", {
+        class: "flex-1 overflow-y-auto pb-6",
+        children: /* @__PURE__ */ jsx(Slot, {
+          name: "content"
+        })
       })
     ]
   });

package/dist/ui/components/ThemeToggle/{ThemeToggle.qwik.mjs → QwikThemeToggle.qwik.mjs}

@@ -1,8 +1,8 @@
 import { jsx, Fragment, jsxs } from "@qwik.dev/core/jsx-runtime";
 import { component$, useStyles$, event$, isServer } from "@qwik.dev/core";
 import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
-import { HiSunOutline, HiMoonOutline } 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 { BsBrilliance } 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 { HiSunOutline, HiMoonOutline } 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.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { BsBrilliance } 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.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
 import themeTogglecss from "./themToggle.css.qwik.mjs";
 const getTheme = () => {
   if (isServer) {
@@ -23,7 +23,7 @@ const setTheme = (theme) => {
   }
   localStorage.setItem(themeStorageKey, theme);
 };
-const ThemeToggle = component$(() => {
+const QwikThemeToggle = component$(() => {
   useStyles$(themeTogglecss);
   const onClick$ = event$(() => {
     let currentTheme = getTheme();
@@ -31,15 +31,15 @@ const ThemeToggle = component$(() => {
       currentTheme = "light";
     } else if (currentTheme === "light") {
       currentTheme = "auto";
-    } else {
-      currentTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark";
+    } else if (currentTheme === "auto") {
+      currentTheme = "dark";
     }
     setTheme(currentTheme);
   });
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("button", {
       onClick$,
-      class: "group relative flex h-8 w-8 items-center justify-center rounded-md bg-background text-foreground hover:opacity-60",
+      class: "bg-background text-foreground group relative flex h-8 w-8 items-center justify-center rounded-md hover:opacity-60",
       children: /* @__PURE__ */ jsxs("div", {
         class: "absolute inset-0 grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75",
         children: [
@@ -58,7 +58,7 @@ const ThemeToggle = component$(() => {
   });
 });
 export {
-  ThemeToggle,
+  QwikThemeToggle,
   getTheme,
   setTheme
 };

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
 import { component$, useSignal, $ } from "@qwik.dev/core";
-import { HiChevronUpMini } 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 { HiChevronUpMini } 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.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
 const TreeNodeComponent = component$((props) => {
   const isExpanded = useSignal(props.expandLevel <= props.level);
   const hasChildren = props.node.children && props.node.children.length > 0;
@@ -44,13 +44,13 @@ const TreeNodeComponent = component$((props) => {
         style: {
           paddingLeft: `${props.level * props.gap}px`
         },
-        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" : ""}`,
+        class: `flex w-full cursor-pointer items-center p-1 ${isActive ? "border border-emerald-300 bg-emerald-100 font-semibold text-emerald-700 dark:border-emerald-700/40 dark:bg-emerald-900/30 dark:text-emerald-300" : ""}`,
         onClick$: handleNodeClick,
         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"}`
+              class: `text-muted-foreground 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"
             }),

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

@@ -1,4 +1,4 @@
-import { _vnode_isVirtualVNode, _vnode_getAttrKeys, _vnode_getProps, _vnode_getAttr, _vnode_getFirstChild, _vnode_isMaterialized, _vnode_getNextSibling } from "@qwik.dev/core/internal";
+import { _vnode_isVirtualVNode, _vnode_getAttrKeys, _vnode_getFirstChild, _vnode_isMaterialized } from "@qwik.dev/core/internal";
 import { normalizeName } from "./vnode.qwik.mjs";
 import { htmlContainer } from "../../utils/location.qwik.mjs";
 import "../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
@@ -38,8 +38,8 @@ function buildTreeRecursive(vnode, materialize) {
       _vnode_getAttrKeys(currentVNode).forEach((key) => {
         if (key === QTYPE) return;
         const value = container.getHostProp(currentVNode, key);
-        _vnode_getProps(currentVNode)[_vnode_getProps(currentVNode).indexOf(key) + 1] = value;
-        vnodeObject.props[key] = _vnode_getAttr(currentVNode, key);
+        currentVNode?.setProp(key, value);
+        vnodeObject.props[key] = currentVNode?.getAttr(key);
         if (key === QRENDERFN) {
           vnodeObject.label = normalizeName(value.getSymbol());
           vnodeObject.name = normalizeName(value.getSymbol());
@@ -57,7 +57,7 @@ function buildTreeRecursive(vnode, materialize) {
         result.push(...buildTreeRecursive(firstChild));
       }
     }
-    currentVNode = _vnode_getNextSibling(currentVNode);
+    currentVNode = currentVNode.nextSibling;
   }
   return result;
 }

package/dist/ui/devtools.qwik.mjs

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, useStyles$, useStore, useSignal, useVisibleTask$, noSerialize } from "@qwik.dev/core";
-import { tryCreateHotContext } from "./node_modules/.pnpm/vite-hot-client@2.0.4_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0_/node_modules/vite-hot-client/dist/index.qwik.mjs";
-import { HiBoltOutline, HiCubeOutline, HiPhotoOutline, HiMegaphoneMini } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
-import { BsDiagram3 } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
-import { LuFolderTree } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
+import { tryCreateHotContext } from "./node_modules/.pnpm/vite-hot-client@2.0.4_vite@7.1.3_@types_node@20.14.11_jiti@2.6.1_lightningcss@1.30.1_tsx@4.19.2_yaml@2.8.1_/node_modules/vite-hot-client/dist/index.qwik.mjs";
+import { HiBoltOutline, HiCubeOutline, HiPhotoOutline, HiMegaphoneMini, HiCodeBracketSolid, HiClockOutline } 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.6._02d306fcbd9f637dd624291702bff9c0/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.6._02d306fcbd9f637dd624291702bff9c0/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.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
 import { createClientRpc } from "./packages/kit/src/client.qwik.mjs";
 import "./node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
 import { setViteClientContext, getViteClientRpc } from "./packages/kit/src/context.qwik.mjs";
@@ -21,8 +21,12 @@ import { DevtoolsContainer } from "./components/DevtoolsContainer/DevtoolsContai
 import { DevtoolsPanel } from "./components/DevtoolsPanel/DevtoolsPanel.qwik.mjs";
 import { Packages } from "./features/Packages/Packages.qwik.mjs";
 import { Inspect } from "./features/inspect/Inspect.qwik.mjs";
-import { ThemeToggle } from "./components/ThemeToggle/ThemeToggle.qwik.mjs";
+import { QwikThemeToggle } from "./components/ThemeToggle/QwikThemeToggle.qwik.mjs";
 import { ThemeScript } from "./components/ThemeToggle/theme-script.qwik.mjs";
+import { CodeBreack } from "./features/CodeBreack/CodeBreack.qwik.mjs";
+import { Performance } from "./features/Performance/Performance.qwik.mjs";
+import { b as browserExports } from "./_virtual/browser.qwik.mjs";
+const log = browserExports.debug("qwik:devtools:devtools");
 function getClientRpcFunctions() {
   return {
     healthCheck: () => true
@@ -36,9 +40,12 @@ const QwikDevtools = component$(() => {
     npmPackages: [],
     assets: [],
     components: [],
-    routes: void 0
+    routes: void 0,
+    allDependencies: [],
+    isLoadingDependencies: false
   });
-  useVisibleTask$(async ({ track }) => {
+  const clientReady = useSignal(false);
+  useVisibleTask$(async () => {
     const hot = await tryCreateHotContext(void 0, [
       "/"
     ]);
@@ -47,36 +54,78 @@ const QwikDevtools = component$(() => {
     }
     setViteClientContext(hot);
     createClientRpc(getClientRpcFunctions());
-    track(() => {
-      if (state.isOpen.value) {
-        const rpc = getViteClientRpc();
-        rpc.getAssetsFromPublicDir().then((data) => {
-          state.assets = data;
-        });
-        rpc.getComponents().then((data) => {
-          state.components = data;
-        });
-        rpc.getRoutes().then((data) => {
-          const children = data?.children || [];
-          const directories = children.filter((child) => child.type === "directory");
-          const values = [
-            {
-              relativePath: "",
-              name: "index",
-              type: re.DIRECTORY,
-              path: "",
-              isSymbolicLink: false,
-              children: void 0
-            },
-            ...directories
-          ];
-          state.routes = noSerialize(values);
-        });
-        rpc.getQwikPackages().then((data) => {
-          state.npmPackages = data;
-        });
-      }
-    });
+    clientReady.value = true;
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    try {
+      const assets = await rpc.getAssetsFromPublicDir();
+      state.assets = assets;
+    } catch (error) {
+      log("Failed to load assets:", error);
+    }
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    try {
+      const components = await rpc.getComponents();
+      state.components = components;
+    } catch (error) {
+      log("Failed to load components:", error);
+    }
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    try {
+      const routes = await rpc.getRoutes();
+      const children = routes?.children || [];
+      const directories = children.filter((child) => child.type === "directory");
+      const values = [
+        {
+          relativePath: "",
+          name: "index",
+          type: re.DIRECTORY,
+          path: "",
+          isSymbolicLink: false,
+          children: void 0
+        },
+        ...directories
+      ];
+      state.routes = noSerialize(values);
+    } catch (error) {
+      log("Failed to load routes:", error);
+    }
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    try {
+      const qwikPackages = await rpc.getQwikPackages();
+      state.npmPackages = qwikPackages;
+    } catch (error) {
+      log("Failed to load Qwik packages:", error);
+    }
+  });
+  useVisibleTask$(async ({ track }) => {
+    track(() => clientReady.value);
+    if (!clientReady.value) return;
+    const rpc = getViteClientRpc();
+    state.isLoadingDependencies = true;
+    try {
+      const allDeps = await rpc.getAllDependencies();
+      state.allDependencies = allDeps;
+    } catch (error) {
+      log("Failed to load all dependencies:", error);
+    } finally {
+      state.isLoadingDependencies = false;
+    }
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
@@ -90,7 +139,7 @@ const QwikDevtools = component$(() => {
             state,
             children: [
               /* @__PURE__ */ jsxs("div", {
-                class: "bg-background/95 flex flex-col gap-2 border-r border-border p-3",
+                class: "bg-background/95 border-border flex flex-col gap-2 border-r p-3",
                 children: [
                   /* @__PURE__ */ jsx(Tab, {
                     state,
@@ -140,9 +189,25 @@ const QwikDevtools = component$(() => {
                       class: "h-5 w-5"
                     })
                   }),
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "codeBreack",
+                    title: "CodeBreack",
+                    children: /* @__PURE__ */ jsx(HiCodeBracketSolid, {
+                      class: "h-5 w-5"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "performance",
+                    title: "Performance",
+                    children: /* @__PURE__ */ jsx(HiClockOutline, {
+                      class: "h-5 w-5"
+                    })
+                  }),
                   /* @__PURE__ */ jsx("div", {
                     class: "mt-auto",
-                    children: /* @__PURE__ */ jsx(ThemeToggle, {})
+                    children: /* @__PURE__ */ jsx(QwikThemeToggle, {})
                   })
                 ]
               }),
@@ -181,7 +246,7 @@ const QwikDevtools = component$(() => {
                         "q:slot": "title"
                       }),
                       /* @__PURE__ */ jsxs("div", {
-                        class: "flex gap-4 text-sm text-muted-foreground",
+                        class: "text-muted-foreground flex gap-4 text-sm",
                         children: [
                           /* @__PURE__ */ jsxs("span", {
                             children: [
@@ -209,10 +274,11 @@ const QwikDevtools = component$(() => {
                   state.activeTab === "packages" && /* @__PURE__ */ jsxs(TabContent, {
                     children: [
                       /* @__PURE__ */ jsx(TabTitle, {
-                        title: "Install an npm package",
+                        title: "Project Dependencies",
                         "q:slot": "title"
                       }),
                       /* @__PURE__ */ jsx(Packages, {
+                        state,
                         "q:slot": "content"
                       })
                     ]
@@ -244,6 +310,28 @@ const QwikDevtools = component$(() => {
                         "q:slot": "content"
                       })
                     ]
+                  }),
+                  state.activeTab === "codeBreack" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "codeBreack",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(CodeBreack, {
+                        "q:slot": "content"
+                      })
+                    ]
+                  }),
+                  state.activeTab === "performance" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "performance",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(Performance, {
+                        "q:slot": "content"
+                      })
+                    ]
                   })
                 ]
               })

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

@@ -7,7 +7,7 @@ const Assets = component$(({ state }) => {
       const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
       const fileExt = asset.path.split(".").pop()?.toUpperCase();
       return /* @__PURE__ */ jsxs("div", {
-        class: "overflow-hidden rounded-xl border border-border bg-card-item-bg transition-all duration-200 hover:bg-card-item-hover-bg",
+        class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg overflow-hidden rounded-xl border transition-all duration-200",
         children: [
           isImage ? /* @__PURE__ */ jsx("div", {
             class: "aspect-square overflow-hidden bg-black/20",
@@ -21,7 +21,7 @@ const Assets = component$(({ state }) => {
           }) : /* @__PURE__ */ jsx("div", {
             class: "flex aspect-square items-center justify-center bg-black/20",
             children: /* @__PURE__ */ jsx("span", {
-              class: "font-mono text-2xl text-muted-foreground",
+              class: "text-muted-foreground font-mono text-2xl",
               children: fileExt
             })
           }),
@@ -34,7 +34,7 @@ const Assets = component$(({ state }) => {
                 children: asset.path.split("/").pop()
               }),
               /* @__PURE__ */ jsxs("div", {
-                class: "flex items-center justify-between text-xs text-muted-foreground",
+                class: "text-muted-foreground flex items-center justify-between text-xs",
                 children: [
                   /* @__PURE__ */ jsxs("span", {
                     children: [

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

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal } from "@qwik.dev/core";
+import { StateParser } from "./StateParser.qwik.mjs";
+import { HtmlParser } from "./HtmlParser.qwik.mjs";
+const CodeBreack = component$(() => {
+  useStyles$(`
+  .code-output-container {
+    overflow-x: auto;
+    overflow-y: auto;
+  }
+  .code-output-container > div {
+    width: fit-content;
+    min-width: 100%;
+  }
+  .code-output-container pre[class*='language-'] {
+    margin: 0;
+    min-width: max-content;
+  }
+  `);
+  const currentTab = useSignal("state");
+  return /* @__PURE__ */ jsxs("div", {
+    class: "h-full space-y-6 overflow-hidden",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "flex justify-center",
+        children: /* @__PURE__ */ jsxs("div", {
+          class: "border-border bg-background inline-flex rounded-xl border p-0.5",
+          children: [
+            /* @__PURE__ */ jsx("button", {
+              onClick$: () => currentTab.value = "state",
+              class: {
+                "rounded-lg px-3 py-2 text-sm font-medium transition-colors md:px-4": true,
+                "bg-accent text-white shadow": currentTab.value === "state",
+                "text-muted-foreground hover:bg-foreground/5": currentTab.value !== "state"
+              },
+              children: "State Parser"
+            }),
+            /* @__PURE__ */ jsx("button", {
+              onClick$: () => currentTab.value = "html",
+              class: {
+                "rounded-lg px-3 py-2 text-sm font-medium transition-colors md:px-4": true,
+                "bg-accent text-white shadow": currentTab.value === "html",
+                "text-muted-foreground hover:bg-foreground/5": currentTab.value !== "html"
+              },
+              children: "HTML Parser"
+            })
+          ]
+        })
+      }),
+      currentTab.value === "state" && /* @__PURE__ */ jsx(StateParser, {}),
+      currentTab.value === "html" && /* @__PURE__ */ jsx(HtmlParser, {})
+    ]
+  });
+});
+export {
+  CodeBreack
+};

package/dist/ui/features/CodeBreack/HtmlParser.qwik.mjs

@@ -0,0 +1,148 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal, $, useVisibleTask$ } from "@qwik.dev/core";
+import { _getDomContainer, _vnode_toString } from "@qwik.dev/core/internal";
+import { getHighlighter } from "../../utils/shiki.qwik.mjs";
+const HtmlParser = component$(() => {
+  useStyles$(`
+    pre.shiki { overflow: auto; padding: 10px; height: 100%; }
+  `);
+  const inputHtml = useSignal("");
+  const parsingTime = useSignal(null);
+  const htmlResult = useSignal("");
+  const highlightedHtml = useSignal("");
+  const onParseHtml$ = $(() => {
+    if (!inputHtml.value.trim()) {
+      parsingTime.value = null;
+      htmlResult.value = "// Paste HTML on the left to parse";
+      return;
+    }
+    const startTime = performance.now();
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(inputHtml.value, "text/html");
+      let output = "";
+      try {
+        const container = _getDomContainer(doc.documentElement);
+        if (container) {
+          output += "// Qwik Container Found:\n";
+          output += `- Container Type: ${container.qContainer}
+`;
+          output += `- Manifest Hash: ${container.qManifestHash}
+
+`;
+          try {
+            const vdomTree = _vnode_toString.call(container.rootVNode, Number.MAX_SAFE_INTEGER, "", true, false, false);
+            output += "// VNode Tree:\n" + vdomTree + "\n\n";
+          } catch (vnodeErr) {
+            output += "// VNode parsing error: " + vnodeErr + "\n\n";
+          }
+        } else {
+          output = "// No Qwik container found in the HTML";
+        }
+      } catch (containerErr) {
+        output = "// No Qwik container found or error: " + containerErr;
+      }
+      parsingTime.value = performance.now() - startTime;
+      htmlResult.value = output;
+      return;
+    } catch (error) {
+      parsingTime.value = performance.now() - startTime;
+      htmlResult.value = `// Error parsing HTML: ${error instanceof Error ? error.message : "Invalid HTML format"}
+
+// Raw input:
+${inputHtml.value}`;
+      return;
+    }
+  });
+  const shikiRef = useSignal(null);
+  useVisibleTask$(async ({ track }) => {
+    track(() => htmlResult.value);
+    if (!htmlResult.value) {
+      highlightedHtml.value = "";
+      return;
+    }
+    if (!shikiRef.value) {
+      shikiRef.value = await getHighlighter();
+    }
+    highlightedHtml.value = shikiRef.value.codeToHtml(htmlResult.value, {
+      lang: "html",
+      theme: "nord"
+    });
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "grid grid-cols-1 gap-4 md:grid-cols-2",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "border-border flex items-center justify-between border-b p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Input HTML"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "min-h-0 flex-1 flex-col space-y-3 p-3",
+            children: [
+              /* @__PURE__ */ jsx("textarea", {
+                value: inputHtml.value,
+                onInput$: (e, t) => inputHtml.value = t.value,
+                placeholder: "Paste HTML and click to parse/format.",
+                class: "border-border bg-background h-full min-h-0 w-full flex-1 resize-none rounded-md border p-3 font-mono text-sm"
+              }),
+              /* @__PURE__ */ jsx("div", {
+                class: "flex items-center gap-3",
+                children: /* @__PURE__ */ jsx("button", {
+                  onClick$: onParseHtml$,
+                  class: "bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90",
+                  children: "Parse HTML"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col overflow-hidden rounded-xl border",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "border-border flex items-center justify-between border-b p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "VNode Tree"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "h-full min-h-0 flex-1",
+            children: /* @__PURE__ */ jsx("pre", {
+              class: "h-full overflow-auto",
+              dangerouslySetInnerHTML: highlightedHtml.value || ""
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  HtmlParser
+};