@qwik.dev/devtools 0.2.1 → 0.2.3

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/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-transparent hover:bg-foreground/5 text-muted-foreground 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,7 +5,7 @@ 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"
         })

package/dist/ui/components/ThemeToggle/QwikThemeToggle.qwik.mjs

@@ -39,7 +39,7 @@ const QwikThemeToggle = component$(() => {
   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: [

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

@@ -50,7 +50,7 @@ const TreeNodeComponent = component$((props) => {
           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/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.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 { 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";
@@ -24,11 +24,29 @@ import { Inspect } from "./features/inspect/Inspect.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
   };
 }
+function toDevtoolsRoutes(routes) {
+  const children = routes?.children || [];
+  const directories = children.filter((child) => child.type === re.DIRECTORY);
+  return [
+    {
+      relativePath: "",
+      name: "index",
+      type: re.DIRECTORY,
+      path: "",
+      isSymbolicLink: false,
+      children: void 0
+    },
+    ...directories
+  ];
+}
 const QwikDevtools = component$(() => {
   useStyles$(globalCss);
   const state = useStore({
@@ -41,7 +59,6 @@ const QwikDevtools = component$(() => {
     allDependencies: [],
     isLoadingDependencies: false
   });
-  const clientReady = useSignal(false);
   useVisibleTask$(async () => {
     const hot = await tryCreateHotContext(void 0, [
       "/"
@@ -51,78 +68,43 @@ const QwikDevtools = component$(() => {
     }
     setViteClientContext(hot);
     createClientRpc(getClientRpcFunctions());
-    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();
+    const group1 = Promise.allSettled([
+      rpc.getAssetsFromPublicDir(),
+      rpc.getComponents(),
+      rpc.getRoutes(),
+      rpc.getQwikPackages()
+    ]);
     state.isLoadingDependencies = true;
-    try {
-      const allDeps = await rpc.getAllDependencies();
+    const depsPromise = rpc.getAllDependencies().then((allDeps) => {
       state.allDependencies = allDeps;
-    } catch (error) {
-      console.error("Failed to load all dependencies:", error);
-    } finally {
+    }).catch((error) => {
+      log("Failed to load all dependencies:", error);
+    }).finally(() => {
       state.isLoadingDependencies = false;
+    });
+    const [assetsRes, componentsRes, routesRes, packagesRes] = await group1;
+    if (assetsRes.status === "fulfilled") {
+      state.assets = assetsRes.value;
+    } else {
+      log("Failed to load assets:", assetsRes.reason);
+    }
+    if (componentsRes.status === "fulfilled") {
+      state.components = componentsRes.value;
+    } else {
+      log("Failed to load components:", componentsRes.reason);
     }
+    if (routesRes.status === "fulfilled") {
+      state.routes = noSerialize(toDevtoolsRoutes(routesRes.value));
+    } else {
+      log("Failed to load routes:", routesRes.reason);
+    }
+    if (packagesRes.status === "fulfilled") {
+      state.npmPackages = packagesRes.value;
+    } else {
+      log("Failed to load Qwik packages:", packagesRes.reason);
+    }
+    await depsPromise;
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
@@ -136,7 +118,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,
@@ -189,11 +171,19 @@ const QwikDevtools = component$(() => {
                   /* @__PURE__ */ jsx(Tab, {
                     state,
                     id: "codeBreack",
-                    title: "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(QwikThemeToggle, {})
@@ -235,7 +225,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: [
@@ -310,6 +300,17 @@ const QwikDevtools = component$(() => {
                         "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

@@ -19,17 +19,17 @@ const CodeBreack = component$(() => {
   `);
   const currentTab = useSignal("state");
   return /* @__PURE__ */ jsxs("div", {
-    class: "space-y-6 h-full overflow-hidden",
+    class: "h-full space-y-6 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",
+          class: "border-border bg-background inline-flex rounded-xl border 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,
+                "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"
               },
@@ -38,7 +38,7 @@ const CodeBreack = component$(() => {
             /* @__PURE__ */ jsx("button", {
               onClick$: () => currentTab.value = "html",
               class: {
-                "px-3 md:px-4 py-2 rounded-lg text-sm font-medium transition-colors": true,
+                "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"
               },

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

@@ -1,7 +1,7 @@
 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";
+import { getHighlighter } from "../../utils/shiki.qwik.mjs";
 const HtmlParser = component$(() => {
   useStyles$(`
     pre.shiki { overflow: auto; padding: 10px; height: 100%; }
@@ -62,14 +62,7 @@ ${inputHtml.value}`;
       return;
     }
     if (!shikiRef.value) {
-      shikiRef.value = await createHighlighter({
-        themes: [
-          "nord"
-        ],
-        langs: [
-          "html"
-        ]
-      });
+      shikiRef.value = await getHighlighter();
     }
     highlightedHtml.value = shikiRef.value.codeToHtml(htmlResult.value, {
       lang: "html",
@@ -80,17 +73,17 @@ ${inputHtml.value}`;
     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",
+        class: "border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border",
         children: [
           /* @__PURE__ */ jsxs("div", {
-            class: "flex items-center justify-between border-b border-border p-3",
+            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: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                class: "border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs",
                 children: [
                   parsingTime.value,
                   "ms"
@@ -99,19 +92,19 @@ ${inputHtml.value}`;
             ]
           }),
           /* @__PURE__ */ jsxs("div", {
-            class: "p-3 space-y-3 flex-1 min-h-0 flex-col",
+            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: "h-full min-h-0 w-full flex-1 resize-none rounded-md border border-border bg-background p-3 font-mono text-sm"
+                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 hover:opacity-90 rounded-md px-3 py-1.5 text-sm text-white",
+                  class: "bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90",
                   children: "Parse HTML"
                 })
               })
@@ -120,17 +113,17 @@ ${inputHtml.value}`;
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: "rounded-xl border border-border bg-card-item-bg overflow-hidden flex h-[60vh] min-h-0 flex-col",
+        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: "flex items-center justify-between border-b border-border p-3",
+            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: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                class: "border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs",
                 children: [
                   parsingTime.value,
                   "ms"
@@ -139,9 +132,9 @@ ${inputHtml.value}`;
             ]
           }),
           /* @__PURE__ */ jsx("div", {
-            class: "flex-1 min-h-0 h-full",
+            class: "h-full min-h-0 flex-1",
             children: /* @__PURE__ */ jsx("pre", {
-              class: "overflow-auto h-full",
+              class: "h-full overflow-auto",
               dangerouslySetInnerHTML: highlightedHtml.value || ""
             })
           })

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

@@ -1,7 +1,7 @@
 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";
+import { getHighlighter } from "../../utils/shiki.qwik.mjs";
 const StateParser = component$(() => {
   useStyles$(`
     pre.shiki { overflow: auto; padding: 10px;  height: 100%; }
@@ -75,14 +75,7 @@ ${inputState.value}`;
       return;
     }
     if (!shikiRef.value) {
-      shikiRef.value = await createHighlighter({
-        themes: [
-          "nord"
-        ],
-        langs: [
-          "json"
-        ]
-      });
+      shikiRef.value = await getHighlighter();
     }
     highlightedState.value = shikiRef.value.codeToHtml(stateResult.value, {
       lang: "json",
@@ -93,17 +86,17 @@ ${inputState.value}`;
     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",
+        class: "border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border",
         children: [
           /* @__PURE__ */ jsxs("div", {
-            class: "flex items-center justify-between border-b border-border p-3",
+            class: "border-border flex items-center justify-between border-b 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",
+                class: "border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs",
                 children: [
                   parsingTime.value,
                   "ms"
@@ -112,19 +105,19 @@ ${inputState.value}`;
             ]
           }),
           /* @__PURE__ */ jsxs("div", {
-            class: "p-3 space-y-3 flex-1 min-h-0 flex-col",
+            class: "min-h-0 flex-1 flex-col space-y-3 p-3",
             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"
+                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$: onParseState$,
-                  class: "bg-accent hover:opacity-90 rounded-md px-3 py-1.5 text-sm text-white",
+                  class: "bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90",
                   children: "Parse State"
                 })
               })
@@ -133,17 +126,17 @@ ${inputState.value}`;
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: "rounded-xl border border-border bg-card-item-bg overflow-hidden flex h-[60vh] min-h-0 flex-col",
+        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: "flex items-center justify-between border-b border-border p-3",
+            class: "border-border flex items-center justify-between border-b 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",
+                class: "border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs",
                 children: [
                   parsingTime.value,
                   "ms"
@@ -152,9 +145,9 @@ ${inputState.value}`;
             ]
           }),
           /* @__PURE__ */ jsx("div", {
-            class: "flex-1 min-h-0 h-full",
+            class: "h-full min-h-0 flex-1",
             children: /* @__PURE__ */ jsx("pre", {
-              class: "overflow-auto h-full",
+              class: "h-full overflow-auto",
               dangerouslySetInnerHTML: highlightedState.value || ""
             })
           })