@qwik.dev/devtools 0.2.1 → 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/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,6 +24,9 @@ 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
@@ -61,7 +64,7 @@ const QwikDevtools = component$(() => {
       const assets = await rpc.getAssetsFromPublicDir();
       state.assets = assets;
     } catch (error) {
-      console.error("Failed to load assets:", error);
+      log("Failed to load assets:", error);
     }
   });
   useVisibleTask$(async ({ track }) => {
@@ -72,7 +75,7 @@ const QwikDevtools = component$(() => {
       const components = await rpc.getComponents();
       state.components = components;
     } catch (error) {
-      console.error("Failed to load components:", error);
+      log("Failed to load components:", error);
     }
   });
   useVisibleTask$(async ({ track }) => {
@@ -96,7 +99,7 @@ const QwikDevtools = component$(() => {
       ];
       state.routes = noSerialize(values);
     } catch (error) {
-      console.error("Failed to load routes:", error);
+      log("Failed to load routes:", error);
     }
   });
   useVisibleTask$(async ({ track }) => {
@@ -107,7 +110,7 @@ const QwikDevtools = component$(() => {
       const qwikPackages = await rpc.getQwikPackages();
       state.npmPackages = qwikPackages;
     } catch (error) {
-      console.error("Failed to load Qwik packages:", error);
+      log("Failed to load Qwik packages:", error);
     }
   });
   useVisibleTask$(async ({ track }) => {
@@ -119,7 +122,7 @@ const QwikDevtools = component$(() => {
       const allDeps = await rpc.getAllDependencies();
       state.allDependencies = allDeps;
     } catch (error) {
-      console.error("Failed to load all dependencies:", error);
+      log("Failed to load all dependencies:", error);
     } finally {
       state.isLoadingDependencies = false;
     }
@@ -136,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,
@@ -189,11 +192,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 +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: [
@@ -310,6 +321,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 || ""
             })
           })

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

@@ -19,12 +19,12 @@ const Overview = component$(({ state }) => {
               $(() => pageJump("routes")),
               stopPropagation
             ],
-            class: "flex cursor-pointer items-center gap-5 rounded-xl border border-border bg-card-item-bg p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card-item-hover-bg",
+            class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5",
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
+                class: "bg-foreground/5 border-border rounded-lg border p-3.5",
                 children: /* @__PURE__ */ jsx(LuFolderTree, {
-                  class: "h-6 w-6 text-accent"
+                  class: "text-accent h-6 w-6"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
@@ -34,7 +34,7 @@ const Overview = component$(({ state }) => {
                     children: state.routes?.length
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-muted-foreground",
+                    class: "text-muted-foreground text-sm",
                     children: "pages"
                   })
                 ]
@@ -46,12 +46,12 @@ const Overview = component$(({ state }) => {
               $(() => pageJump("components")),
               stopPropagation
             ],
-            class: "flex cursor-pointer items-center gap-5 rounded-xl border border-border bg-card-item-bg p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card-item-hover-bg",
+            class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5",
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
+                class: "bg-foreground/5 border-border rounded-lg border p-3.5",
                 children: /* @__PURE__ */ jsx(HiCubeOutline, {
-                  class: "h-6 w-6 text-accent"
+                  class: "text-accent h-6 w-6"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
@@ -61,7 +61,7 @@ const Overview = component$(({ state }) => {
                     children: state.components.length
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-muted-foreground",
+                    class: "text-muted-foreground text-sm",
                     children: "components"
                   })
                 ]
@@ -73,12 +73,12 @@ const Overview = component$(({ state }) => {
               $(() => pageJump("assets")),
               stopPropagation
             ],
-            class: "flex cursor-pointer items-center gap-5 rounded-xl border border-border bg-card-item-bg p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card-item-hover-bg",
+            class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-5 rounded-xl border p-5 transition-all duration-200 hover:-translate-y-0.5",
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "bg-foreground/5 rounded-lg border border-border p-3.5",
+                class: "bg-foreground/5 border-border rounded-lg border p-3.5",
                 children: /* @__PURE__ */ jsx(HiPhotoOutline, {
-                  class: "h-6 w-6 text-accent"
+                  class: "text-accent h-6 w-6"
                 })
               }),
               /* @__PURE__ */ jsxs("div", {
@@ -88,7 +88,7 @@ const Overview = component$(({ state }) => {
                     children: state.assets.length || 0
                   }),
                   /* @__PURE__ */ jsx("div", {
-                    class: "text-sm text-muted-foreground",
+                    class: "text-muted-foreground text-sm",
                     children: "assets"
                   })
                 ]
@@ -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 mt-6 md:mt-6",
+        class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg mt-6 cursor-pointer space-y-4 rounded-xl border p-5 hover:-translate-y-0.5 md:mt-6",
         children: [
           /* @__PURE__ */ jsx("h3", {
             class: "text-lg font-semibold",
@@ -118,7 +118,7 @@ const Overview = component$(({ state }) => {
                   children: name
                 }),
                 /* @__PURE__ */ jsx("div", {
-                  class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
+                  class: "bg-foreground/5 border-border text-muted-foreground rounded-full border px-2 py-1 text-xs",
                   children: version
                 })
               ]
@@ -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 mt-6 md:mt-6",
+        class: "border-border bg-card-item-bg mt-6 space-y-4 rounded-xl border p-5 md:mt-6",
         children: [
           /* @__PURE__ */ jsx("h3", {
             class: "text-lg font-semibold",
@@ -137,7 +137,7 @@ const Overview = component$(({ state }) => {
             class: "space-y-3",
             children: [
               /* @__PURE__ */ jsxs("div", {
-                class: "flex justify-between border-b border-border py-2",
+                class: "border-border flex justify-between border-b py-2",
                 children: [
                   /* @__PURE__ */ jsx("span", {
                     class: "text-muted-foreground",
@@ -150,7 +150,7 @@ const Overview = component$(({ state }) => {
                 ]
               }),
               /* @__PURE__ */ jsxs("div", {
-                class: "flex justify-between border-b border-border py-2",
+                class: "border-border flex justify-between border-b py-2",
                 children: [
                   /* @__PURE__ */ jsx("span", {
                     class: "text-muted-foreground",

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

@@ -14,16 +14,16 @@ const Packages = component$(({ state }) => {
             class: "flex items-center gap-2",
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "border-t-foreground/40 animate-spin h-5 w-5 rounded-full border-2 border-border"
+                class: "border-t-foreground/40 border-border h-5 w-5 animate-spin rounded-full border-2"
               }),
               /* @__PURE__ */ jsx("span", {
-                class: "text-sm text-muted-foreground",
+                class: "text-muted-foreground text-sm",
                 children: "Loading dependencies..."
               })
             ]
           }),
           /* @__PURE__ */ jsxs("div", {
-            class: "text-center text-xs text-muted-foreground",
+            class: "text-muted-foreground text-center text-xs",
             children: [
               "Dependencies are being preloaded in the background...",
               /* @__PURE__ */ jsx("br", {}),
@@ -38,7 +38,7 @@ const Packages = component$(({ state }) => {
     return /* @__PURE__ */ jsx("div", {
       class: "py-8 text-center",
       children: /* @__PURE__ */ jsx("div", {
-        class: "text-sm text-muted-foreground",
+        class: "text-muted-foreground text-sm",
         children: "No dependencies found in package.json"
       })
     });