@qwik.dev/devtools 0.1.2 → 0.2.1

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, 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 { 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 } 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";
@@ -20,10 +20,10 @@ 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 { QwikThemeToggle } from "./components/ThemeToggle/QwikThemeToggle.qwik.mjs";
 import { ThemeScript } from "./components/ThemeToggle/theme-script.qwik.mjs";
+import { CodeBreack } from "./features/CodeBreack/CodeBreack.qwik.mjs";
 function getClientRpcFunctions() {
   return {
     healthCheck: () => true
@@ -37,9 +37,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, [
       "/"
     ]);
@@ -48,36 +51,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) {
+      console.error("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) {
+      console.error("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) {
+      console.error("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) {
+      console.error("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) {
+      console.error("Failed to load all dependencies:", error);
+    } finally {
+      state.isLoadingDependencies = false;
+    }
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
@@ -135,23 +180,23 @@ const QwikDevtools = component$(() => {
                   }),
                   /* @__PURE__ */ jsx(Tab, {
                     state,
-                    id: "components",
-                    title: "Components Tree",
-                    children: /* @__PURE__ */ jsx(HiCodeBracketMini, {
+                    id: "inspect",
+                    title: "inspect",
+                    children: /* @__PURE__ */ jsx(HiMegaphoneMini, {
                       class: "h-5 w-5"
                     })
                   }),
                   /* @__PURE__ */ jsx(Tab, {
                     state,
-                    id: "inspect",
-                    title: "inspect",
-                    children: /* @__PURE__ */ jsx(HiMegaphoneMini, {
+                    id: "codeBreack",
+                    title: "codeBreack",
+                    children: /* @__PURE__ */ jsx(HiCodeBracketSolid, {
                       class: "h-5 w-5"
                     })
                   }),
                   /* @__PURE__ */ jsx("div", {
                     class: "mt-auto",
-                    children: /* @__PURE__ */ jsx(ThemeToggle, {})
+                    children: /* @__PURE__ */ jsx(QwikThemeToggle, {})
                   })
                 ]
               }),
@@ -218,10 +263,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"
                       })
                     ]
@@ -238,17 +284,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"
@@ -264,6 +299,17 @@ 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"
+                      })
+                    ]
                   })
                 ]
               })

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: "space-y-6 h-full overflow-hidden",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "flex justify-center",
+        children: /* @__PURE__ */ jsxs("div", {
+          class: "inline-flex rounded-xl border border-border bg-background p-0.5",
+          children: [
+            /* @__PURE__ */ jsx("button", {
+              onClick$: () => currentTab.value = "state",
+              class: {
+                "px-3 md:px-4 py-2 rounded-lg text-sm font-medium transition-colors": 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: {
+                "px-3 md:px-4 py-2 rounded-lg text-sm font-medium transition-colors": 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,155 @@
+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 { createHighlighter } from "../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.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 createHighlighter({
+        themes: [
+          "nord"
+        ],
+        langs: [
+          "html"
+        ]
+      });
+    }
+    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: "rounded-xl border border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between border-b border-border p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Input HTML"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "p-3 space-y-3 flex-1 min-h-0 flex-col",
+            children: [
+              /* @__PURE__ */ jsx("textarea", {
+                value: inputHtml.value,
+                onInput$: (e, t) => inputHtml.value = t.value,
+                placeholder: "Paste HTML and click to parse/format.",
+                class: "h-full min-h-0 w-full flex-1 resize-none rounded-md border border-border bg-background p-3 font-mono text-sm"
+              }),
+              /* @__PURE__ */ jsx("div", {
+                class: "flex items-center gap-3",
+                children: /* @__PURE__ */ jsx("button", {
+                  onClick$: onParseHtml$,
+                  class: "bg-accent hover:opacity-90 rounded-md px-3 py-1.5 text-sm text-white",
+                  children: "Parse HTML"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "rounded-xl border border-border bg-card-item-bg overflow-hidden flex h-[60vh] min-h-0 flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between border-b border-border p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "VNode Tree"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "flex-1 min-h-0 h-full",
+            children: /* @__PURE__ */ jsx("pre", {
+              class: "overflow-auto h-full",
+              dangerouslySetInnerHTML: highlightedHtml.value || ""
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  HtmlParser
+};

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

@@ -0,0 +1,168 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal, $, useVisibleTask$ } from "@qwik.dev/core";
+import { _preprocessState, _dumpState } from "@qwik.dev/core/internal";
+import { createHighlighter } from "../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.mjs";
+const StateParser = component$(() => {
+  useStyles$(`
+    pre.shiki { overflow: auto; padding: 10px;  height: 100%; }
+  `);
+  const inputState = useSignal("");
+  const parsingTime = useSignal(null);
+  const stateResult = useSignal("");
+  const highlightedState = useSignal("");
+  const onParseState$ = $(() => {
+    if (!inputState.value.trim()) {
+      parsingTime.value = null;
+      stateResult.value = "// Paste state on the left to parse";
+      return;
+    }
+    const startTime = performance.now();
+    try {
+      const stateData = JSON.parse(inputState.value);
+      const container = {
+        $getObjectById$: (id) => id,
+        element: null,
+        getSyncFn: () => () => {
+        },
+        $storeProxyMap$: /* @__PURE__ */ new WeakMap(),
+        $forwardRefs$: null,
+        $initialQRLsIndexes$: null,
+        $scheduler$: null
+      };
+      _preprocessState(stateData, container);
+      const dumpedState = _dumpState(stateData, false, "", null).replace(/\n/, "");
+      parsingTime.value = performance.now() - startTime;
+      stateResult.value = dumpedState;
+      return;
+    } catch (error) {
+      try {
+        const cleanInput = inputState.value.replace(/<script[^>]*>/gi, "").replace(/<\/script>/gi, "").trim();
+        if (cleanInput) {
+          const stateData = JSON.parse(cleanInput);
+          const container = {
+            $getObjectById$: (id) => id,
+            element: null,
+            getSyncFn: () => () => {
+            },
+            $storeProxyMap$: /* @__PURE__ */ new WeakMap(),
+            $forwardRefs$: null,
+            $initialQRLsIndexes$: null,
+            $scheduler$: null
+          };
+          _preprocessState(stateData, container);
+          const dumpedState = _dumpState(stateData, false, "", null);
+          parsingTime.value = performance.now() - startTime;
+          stateResult.value = dumpedState;
+          return;
+        }
+      } catch (secondError) {
+        parsingTime.value = performance.now() - startTime;
+        stateResult.value = `// Error parsing state: ${error instanceof Error ? error.message : "Invalid state format"}
+
+// Raw input:
+${inputState.value}`;
+        return;
+      }
+    }
+    parsingTime.value = performance.now() - startTime;
+    stateResult.value = "// Unable to parse the provided state";
+  });
+  const shikiRef = useSignal(null);
+  useVisibleTask$(async ({ track }) => {
+    track(() => stateResult.value);
+    if (!stateResult.value) {
+      highlightedState.value = "";
+      return;
+    }
+    if (!shikiRef.value) {
+      shikiRef.value = await createHighlighter({
+        themes: [
+          "nord"
+        ],
+        langs: [
+          "json"
+        ]
+      });
+    }
+    highlightedState.value = shikiRef.value.codeToHtml(stateResult.value, {
+      lang: "json",
+      theme: "nord"
+    });
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "grid grid-cols-1 gap-4 md:grid-cols-2",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "rounded-xl border border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between border-b border-border p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Input State"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "p-3 space-y-3 flex-1 min-h-0 flex-col",
+            children: [
+              /* @__PURE__ */ jsx("textarea", {
+                value: inputState.value,
+                onInput$: (e, t) => inputState.value = t.value,
+                placeholder: "Paste Qwik state and click to parse/format.",
+                class: "h-full min-h-0 w-full flex-1 resize-none rounded-md border border-border bg-background p-3 font-mono text-sm"
+              }),
+              /* @__PURE__ */ jsx("div", {
+                class: "flex items-center gap-3",
+                children: /* @__PURE__ */ jsx("button", {
+                  onClick$: onParseState$,
+                  class: "bg-accent hover:opacity-90 rounded-md px-3 py-1.5 text-sm text-white",
+                  children: "Parse State"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "rounded-xl border border-border bg-card-item-bg overflow-hidden flex h-[60vh] min-h-0 flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between border-b border-border p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Parsed State"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "flex-1 min-h-0 h-full",
+            children: /* @__PURE__ */ jsx("pre", {
+              class: "overflow-auto h-full",
+              dangerouslySetInnerHTML: highlightedState.value || ""
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  StateParser
+};

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

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "@qwik.dev/core/jsx-runtime";
 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";
+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.6._02d306fcbd9f637dd624291702bff9c0/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.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
 const Overview = component$(({ state }) => {
   const pageJump = $((pageName) => {
     state.activeTab = pageName;
@@ -102,7 +102,7 @@ const Overview = component$(({ state }) => {
           $(() => 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",
+        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 mt-6 md:mt-6",
         children: [
           /* @__PURE__ */ jsx("h3", {
             class: "text-lg font-semibold",
@@ -127,7 +127,7 @@ const Overview = component$(({ state }) => {
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: "space-y-4 rounded-xl border border-border bg-card-item-bg p-5",
+        class: "space-y-4 rounded-xl border border-border bg-card-item-bg p-5 mt-6 md:mt-6",
         children: [
           /* @__PURE__ */ jsx("h3", {
             class: "text-lg font-semibold",