@qwik.dev/devtools 0.2.7 → 0.3.0-beta.3

package/dist/ui/styles.css

@@ -1,14 +1,4 @@
-.themeIcon {
-  opacity: 0;
-  transition: opacity 400ms ease-in-out;
-}
-
-html[data-theme='light'] .themeIcon.light,
-html[data-theme='dark'] .themeIcon.dark,
-html:not([data-theme]) .themeIcon.auto {
-  opacity: 1;
-}
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
@@ -82,16 +72,28 @@ html:not([data-theme]) .themeIcon.auto {
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-300: oklch(80.8% .114 19.571);
     --color-red-400: oklch(70.4% .191 22.216);
+    --color-red-500: oklch(63.7% .237 25.331);
+    --color-amber-200: oklch(92.4% .12 95.746);
+    --color-amber-300: oklch(87.9% .169 91.605);
     --color-amber-400: oklch(82.8% .189 84.429);
+    --color-amber-500: oklch(76.9% .188 70.08);
+    --color-amber-700: oklch(55.5% .163 48.998);
     --color-green-400: oklch(79.2% .209 151.711);
+    --color-green-500: oklch(72.3% .219 149.579);
+    --color-emerald-300: oklch(84.5% .143 164.978);
+    --color-emerald-500: oklch(69.6% .17 162.48);
+    --color-emerald-700: oklch(50.8% .118 165.612);
     --color-blue-400: oklch(70.7% .165 254.624);
+    --color-blue-500: oklch(62.3% .214 259.815);
     --color-purple-400: oklch(71.4% .203 305.504);
     --color-pink-400: oklch(71.8% .202 349.761);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
-    --container-7xl: 80rem;
+    --container-xs: 20rem;
+    --container-3xl: 48rem;
     --text-xs: .75rem;
     --text-xs--line-height: calc(1 / .75);
     --text-sm: .875rem;
@@ -104,10 +106,13 @@ html:not([data-theme]) .themeIcon.auto {
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-tight: -.025em;
+    --tracking-wide: .025em;
     --leading-relaxed: 1.625;
     --radius-md: .375rem;
     --radius-lg: .5rem;
@@ -391,6 +396,10 @@ html:not([data-theme]) .themeIcon.auto {
     pointer-events: none;
   }
 
+  .qwik-devtools .collapse {
+    visibility: collapse;
+  }
+
   .qwik-devtools .visible {
     visibility: visible;
   }
@@ -411,10 +420,18 @@ html:not([data-theme]) .themeIcon.auto {
     position: static;
   }
 
+  .qwik-devtools .sticky {
+    position: sticky;
+  }
+
   .qwik-devtools .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
 
+  .qwik-devtools .inset-x-4 {
+    inset-inline: calc(var(--spacing) * 4);
+  }
+
   .qwik-devtools .start {
     inset-inline-start: var(--spacing);
   }
@@ -423,6 +440,10 @@ html:not([data-theme]) .themeIcon.auto {
     inset-inline-end: var(--spacing);
   }
 
+  .qwik-devtools .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+
   .qwik-devtools .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -431,26 +452,34 @@ html:not([data-theme]) .themeIcon.auto {
     right: calc(var(--spacing) * 0);
   }
 
-  .qwik-devtools .right-4 {
-    right: calc(var(--spacing) * 4);
+  .qwik-devtools .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
   }
 
-  .qwik-devtools .right-6 {
-    right: calc(var(--spacing) * 6);
+  .qwik-devtools .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
   }
 
-  .qwik-devtools .bottom-0 {
-    bottom: calc(var(--spacing) * 0);
+  .qwik-devtools .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+
+  .qwik-devtools .left-full {
+    left: 100%;
   }
 
-  .qwik-devtools .bottom-6 {
-    bottom: calc(var(--spacing) * 6);
+  .qwik-devtools .z-10 {
+    z-index: 10;
   }
 
   .qwik-devtools .z-20 {
     z-index: 20;
   }
 
+  .qwik-devtools .z-30 {
+    z-index: 30;
+  }
+
   .qwik-devtools .z-\[9990\] {
     z-index: 9990;
   }
@@ -459,8 +488,8 @@ html:not([data-theme]) .themeIcon.auto {
     z-index: 9991;
   }
 
-  .qwik-devtools .z-\[9999\] {
-    z-index: 9999;
+  .qwik-devtools .z-\[2147483647\] {
+    z-index: 2147483647;
   }
 
   .qwik-devtools .col-start-1 {
@@ -509,6 +538,14 @@ html:not([data-theme]) .themeIcon.auto {
     margin-top: calc(var(--spacing) * 1);
   }
 
+  .qwik-devtools .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  .qwik-devtools .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+
   .qwik-devtools .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -525,6 +562,10 @@ html:not([data-theme]) .themeIcon.auto {
     margin-top: auto;
   }
 
+  .qwik-devtools .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+
   .qwik-devtools .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -545,6 +586,10 @@ html:not([data-theme]) .themeIcon.auto {
     margin-bottom: calc(var(--spacing) * 4);
   }
 
+  .qwik-devtools .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
+
   .qwik-devtools .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -556,6 +601,14 @@ html:not([data-theme]) .themeIcon.auto {
     overflow: hidden;
   }
 
+  .qwik-devtools .block {
+    display: block;
+  }
+
+  .qwik-devtools .contents {
+    display: contents;
+  }
+
   .qwik-devtools .flex {
     display: flex;
   }
@@ -568,6 +621,10 @@ html:not([data-theme]) .themeIcon.auto {
     display: none;
   }
 
+  .qwik-devtools .inline {
+    display: inline;
+  }
+
   .qwik-devtools .inline-flex {
     display: inline-flex;
   }
@@ -576,10 +633,18 @@ html:not([data-theme]) .themeIcon.auto {
     aspect-ratio: 1;
   }
 
+  .qwik-devtools .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+
   .qwik-devtools .h-3 {
     height: calc(var(--spacing) * 3);
   }
 
+  .qwik-devtools .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
+
   .qwik-devtools .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -620,14 +685,22 @@ html:not([data-theme]) .themeIcon.auto {
     height: 60vh;
   }
 
-  .qwik-devtools .h-\[calc\(100vh-3rem\)\] {
-    height: calc(100vh - 3rem);
-  }
-
   .qwik-devtools .h-full {
     height: 100%;
   }
 
+  .qwik-devtools .max-h-80 {
+    max-height: calc(var(--spacing) * 80);
+  }
+
+  .qwik-devtools .max-h-\[400px\] {
+    max-height: 400px;
+  }
+
+  .qwik-devtools .max-h-full {
+    max-height: 100%;
+  }
+
   .qwik-devtools .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -636,14 +709,30 @@ html:not([data-theme]) .themeIcon.auto {
     min-height: 2.5rem;
   }
 
+  .qwik-devtools .min-h-\[680px\] {
+    min-height: 680px;
+  }
+
+  .qwik-devtools .min-h-full {
+    min-height: 100%;
+  }
+
   .qwik-devtools .w-1\/2 {
     width: 50%;
   }
 
+  .qwik-devtools .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+
   .qwik-devtools .w-3 {
     width: calc(var(--spacing) * 3);
   }
 
+  .qwik-devtools .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+
   .qwik-devtools .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -684,30 +773,54 @@ html:not([data-theme]) .themeIcon.auto {
     width: calc(var(--spacing) * 16);
   }
 
-  .qwik-devtools .w-\[420px\] {
-    width: 420px;
+  .qwik-devtools .w-32 {
+    width: calc(var(--spacing) * 32);
   }
 
-  .qwik-devtools .w-\[calc\(100vw-3rem\)\] {
-    width: calc(100vw - 3rem);
+  .qwik-devtools .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+
+  .qwik-devtools .w-\[32rem\] {
+    width: 32rem;
+  }
+
+  .qwik-devtools .w-\[420px\] {
+    width: 420px;
   }
 
   .qwik-devtools .w-full {
     width: 100%;
   }
 
-  .qwik-devtools .max-w-7xl {
-    max-width: var(--container-7xl);
+  .qwik-devtools .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+
+  .qwik-devtools .max-w-full {
+    max-width: 100%;
+  }
+
+  .qwik-devtools .max-w-xs {
+    max-width: var(--container-xs);
   }
 
   .qwik-devtools .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
 
+  .qwik-devtools .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
+
   .qwik-devtools .min-w-\[320px\] {
     min-width: 320px;
   }
 
+  .qwik-devtools .min-w-\[1080px\] {
+    min-width: 1080px;
+  }
+
   .qwik-devtools .flex-1 {
     flex: 1;
   }
@@ -716,10 +829,6 @@ html:not([data-theme]) .themeIcon.auto {
     flex-shrink: 0;
   }
 
-  .qwik-devtools .origin-bottom-right {
-    transform-origin: 100% 100%;
-  }
-
   .qwik-devtools .origin-center {
     transform-origin: center;
   }
@@ -754,18 +863,46 @@ html:not([data-theme]) .themeIcon.auto {
     animation: var(--animate-spin);
   }
 
+  .qwik-devtools .cursor-default {
+    cursor: default;
+  }
+
+  .qwik-devtools .cursor-ew-resize {
+    cursor: ew-resize;
+  }
+
+  .qwik-devtools .cursor-grab {
+    cursor: grab;
+  }
+
   .qwik-devtools .cursor-grabbing {
     cursor: grabbing;
   }
 
+  .qwik-devtools .cursor-nesw-resize {
+    cursor: nesw-resize;
+  }
+
   .qwik-devtools .cursor-not-allowed {
     cursor: not-allowed;
   }
 
+  .qwik-devtools .cursor-ns-resize {
+    cursor: ns-resize;
+  }
+
+  .qwik-devtools .cursor-nwse-resize {
+    cursor: nwse-resize;
+  }
+
   .qwik-devtools .cursor-pointer {
     cursor: pointer;
   }
 
+  .qwik-devtools .resize {
+    resize: both;
+  }
+
   .qwik-devtools .resize-none {
     resize: none;
   }
@@ -790,6 +927,10 @@ html:not([data-theme]) .themeIcon.auto {
     flex-direction: column;
   }
 
+  .qwik-devtools .flex-wrap {
+    flex-wrap: wrap;
+  }
+
   .qwik-devtools .place-items-center {
     place-items: center;
   }
@@ -798,6 +939,10 @@ html:not([data-theme]) .themeIcon.auto {
     align-items: center;
   }
 
+  .qwik-devtools .items-end {
+    align-items: flex-end;
+  }
+
   .qwik-devtools .items-start {
     align-items: flex-start;
   }
@@ -810,6 +955,10 @@ html:not([data-theme]) .themeIcon.auto {
     justify-content: center;
   }
 
+  .qwik-devtools .justify-end {
+    justify-content: flex-end;
+  }
+
   .qwik-devtools .justify-start {
     justify-content: flex-start;
   }
@@ -868,8 +1017,8 @@ html:not([data-theme]) .themeIcon.auto {
     margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  .qwik-devtools .gap-x-6 {
-    column-gap: calc(var(--spacing) * 6);
+  .qwik-devtools .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
   }
 
   :where(.qwik-devtools .space-x-2 > :not(:last-child)) {
@@ -936,6 +1085,10 @@ html:not([data-theme]) .themeIcon.auto {
     border-radius: var(--radius-md);
   }
 
+  .qwik-devtools .rounded-none {
+    border-radius: 0;
+  }
+
   .qwik-devtools .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -945,6 +1098,11 @@ html:not([data-theme]) .themeIcon.auto {
     border-width: 1px;
   }
 
+  .qwik-devtools .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
   .qwik-devtools .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -980,6 +1138,26 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
+  .qwik-devtools .border-amber-500\/20 {
+    border-color: #f99c0033;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .border-amber-500\/20 {
+      border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
+    }
+  }
+
+  .qwik-devtools .border-amber-500\/30 {
+    border-color: #f99c004d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .border-amber-500\/30 {
+      border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
+    }
+  }
+
   .qwik-devtools .border-border {
     border-color: var(--color-border);
   }
@@ -988,10 +1166,50 @@ html:not([data-theme]) .themeIcon.auto {
     border-color: currentColor;
   }
 
+  .qwik-devtools .border-emerald-500\/20 {
+    border-color: #00bb7f33;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .border-emerald-500\/20 {
+      border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
+    }
+  }
+
+  .qwik-devtools .border-emerald-500\/30 {
+    border-color: #00bb7f4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .border-emerald-500\/30 {
+      border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
+    }
+  }
+
   .qwik-devtools .border-glass-border {
     border-color: var(--color-glass-border);
   }
 
+  .qwik-devtools .border-glass-border\/50 {
+    border-color: #fff3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .border-glass-border\/50 {
+      border-color: color-mix(in oklab, var(--color-glass-border) 50%, transparent);
+    }
+  }
+
+  .qwik-devtools .border-glass-border\/80 {
+    border-color: #ffffff52;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .border-glass-border\/80 {
+      border-color: color-mix(in oklab, var(--color-glass-border) 80%, transparent);
+    }
+  }
+
   .qwik-devtools .border-primary\/20 {
     border-color: #16b6f633;
   }
@@ -1002,6 +1220,26 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
+  .qwik-devtools .border-primary\/50 {
+    border-color: #16b6f680;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .border-primary\/50 {
+      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+    }
+  }
+
+  .qwik-devtools .border-red-500\/20 {
+    border-color: #fb2c3633;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .border-red-500\/20 {
+      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    }
+  }
+
   .qwik-devtools .border-t-foreground\/40 {
     border-top-color: #0006;
   }
@@ -1020,10 +1258,50 @@ html:not([data-theme]) .themeIcon.auto {
     background-color: var(--color-accent);
   }
 
+  .qwik-devtools .bg-amber-500\/10 {
+    background-color: #f99c001a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-amber-500\/10 {
+      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
+    }
+  }
+
+  .qwik-devtools .bg-amber-500\/15 {
+    background-color: #f99c0026;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-amber-500\/15 {
+      background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
+    }
+  }
+
   .qwik-devtools .bg-background {
     background-color: var(--color-background);
   }
 
+  .qwik-devtools .bg-background\/60 {
+    background-color: #fff9;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-background\/60 {
+      background-color: color-mix(in oklab, var(--color-background) 60%, transparent);
+    }
+  }
+
+  .qwik-devtools .bg-black\/40 {
+    background-color: #0006;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-black\/40 {
+      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+    }
+  }
+
   .qwik-devtools .bg-black\/50 {
     background-color: #00000080;
   }
@@ -1034,10 +1312,44 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
+  .qwik-devtools .bg-blue-500\/10 {
+    background-color: #3080ff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-blue-500\/10 {
+      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
+    }
+  }
+
   .qwik-devtools .bg-card-item-bg {
     background-color: var(--color-card-item-bg);
   }
 
+  .qwik-devtools .bg-card-item-hover-bg {
+    background-color: var(--color-card-item-hover-bg);
+  }
+
+  .qwik-devtools .bg-emerald-500\/10 {
+    background-color: #00bb7f1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-emerald-500\/10 {
+      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
+    }
+  }
+
+  .qwik-devtools .bg-emerald-500\/15 {
+    background-color: #00bb7f26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-emerald-500\/15 {
+      background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
+    }
+  }
+
   .qwik-devtools .bg-foreground\/5 {
     background-color: #0000000d;
   }
@@ -1048,6 +1360,30 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
+  .qwik-devtools .bg-foreground\/10 {
+    background-color: #0000001a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-foreground\/10 {
+      background-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+    }
+  }
+
+  .qwik-devtools .bg-green-500\/10 {
+    background-color: #00c7581a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-green-500\/10 {
+      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+    }
+  }
+
+  .qwik-devtools .bg-primary {
+    background-color: var(--color-primary);
+  }
+
   .qwik-devtools .bg-primary\/5 {
     background-color: #16b6f60d;
   }
@@ -1078,6 +1414,34 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
+  .qwik-devtools .bg-primary\/20 {
+    background-color: #16b6f633;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-primary\/20 {
+      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
+
+  .qwik-devtools .bg-red-500\/10 {
+    background-color: #fb2c361a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .bg-red-500\/10 {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    }
+  }
+
+  .qwik-devtools .bg-transparent {
+    background-color: #0000;
+  }
+
+  .qwik-devtools .bg-white {
+    background-color: var(--color-white);
+  }
+
   .qwik-devtools .bg-gradient-to-br {
     --tw-gradient-position: to bottom right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1248,6 +1612,10 @@ html:not([data-theme]) .themeIcon.auto {
     padding: calc(var(--spacing) * 5);
   }
 
+  .qwik-devtools .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+
   .qwik-devtools .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -1256,6 +1624,10 @@ html:not([data-theme]) .themeIcon.auto {
     padding-inline: calc(var(--spacing) * 1);
   }
 
+  .qwik-devtools .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+
   .qwik-devtools .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -1272,6 +1644,10 @@ html:not([data-theme]) .themeIcon.auto {
     padding-inline: calc(var(--spacing) * 4);
   }
 
+  .qwik-devtools .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+
   .qwik-devtools .py-0\.5 {
     padding-block: calc(var(--spacing) * .5);
   }
@@ -1292,18 +1668,38 @@ html:not([data-theme]) .themeIcon.auto {
     padding-block: calc(var(--spacing) * 2.5);
   }
 
+  .qwik-devtools .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
   .qwik-devtools .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .qwik-devtools .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+
   .qwik-devtools .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
 
+  .qwik-devtools .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
+  .qwik-devtools .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
+
   .qwik-devtools .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
 
+  .qwik-devtools .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+
   .qwik-devtools .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -1324,6 +1720,10 @@ html:not([data-theme]) .themeIcon.auto {
     text-align: right;
   }
 
+  .qwik-devtools .align-top {
+    vertical-align: top;
+  }
+
   .qwik-devtools .font-mono {
     font-family: var(--font-mono);
   }
@@ -1342,6 +1742,11 @@ html:not([data-theme]) .themeIcon.auto {
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
 
+  .qwik-devtools .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+
   .qwik-devtools .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1366,6 +1771,15 @@ html:not([data-theme]) .themeIcon.auto {
     font-size: 10px;
   }
 
+  .qwik-devtools .text-\[11px\] {
+    font-size: 11px;
+  }
+
+  .qwik-devtools .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+
   .qwik-devtools .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1391,6 +1805,11 @@ html:not([data-theme]) .themeIcon.auto {
     letter-spacing: var(--tracking-tight);
   }
 
+  .qwik-devtools .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+
   .qwik-devtools .break-all {
     word-break: break-all;
   }
@@ -1403,14 +1822,30 @@ html:not([data-theme]) .themeIcon.auto {
     color: var(--color-accent);
   }
 
+  .qwik-devtools .text-amber-200 {
+    color: var(--color-amber-200);
+  }
+
   .qwik-devtools .text-amber-400 {
     color: var(--color-amber-400);
   }
 
+  .qwik-devtools .text-amber-700 {
+    color: var(--color-amber-700);
+  }
+
   .qwik-devtools .text-blue-400 {
     color: var(--color-blue-400);
   }
 
+  .qwik-devtools .text-emerald-300 {
+    color: var(--color-emerald-300);
+  }
+
+  .qwik-devtools .text-emerald-700 {
+    color: var(--color-emerald-700);
+  }
+
   .qwik-devtools .text-foreground {
     color: var(--color-foreground);
   }
@@ -1443,6 +1878,36 @@ html:not([data-theme]) .themeIcon.auto {
     color: var(--color-muted-foreground);
   }
 
+  .qwik-devtools .text-muted-foreground\/40 {
+    color: #6b728066;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .text-muted-foreground\/40 {
+      color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
+    }
+  }
+
+  .qwik-devtools .text-muted-foreground\/50 {
+    color: #6b728080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .text-muted-foreground\/50 {
+      color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
+    }
+  }
+
+  .qwik-devtools .text-muted-foreground\/60 {
+    color: #6b728099;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .text-muted-foreground\/60 {
+      color: color-mix(in oklab, var(--color-muted-foreground) 60%, transparent);
+    }
+  }
+
   .qwik-devtools .text-pink-400 {
     color: var(--color-pink-400);
   }
@@ -1475,6 +1940,10 @@ html:not([data-theme]) .themeIcon.auto {
     color: var(--color-purple-400);
   }
 
+  .qwik-devtools .text-red-300 {
+    color: var(--color-red-300);
+  }
+
   .qwik-devtools .text-red-400 {
     color: var(--color-red-400);
   }
@@ -1487,10 +1956,18 @@ html:not([data-theme]) .themeIcon.auto {
     color: var(--color-white);
   }
 
+  .qwik-devtools .uppercase {
+    text-transform: uppercase;
+  }
+
   .qwik-devtools .opacity-0 {
     opacity: 0;
   }
 
+  .qwik-devtools .opacity-40 {
+    opacity: .4;
+  }
+
   .qwik-devtools .opacity-80 {
     opacity: .8;
   }
@@ -1508,6 +1985,11 @@ html:not([data-theme]) .themeIcon.auto {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .qwik-devtools .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .qwik-devtools .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1519,7 +2001,7 @@ html:not([data-theme]) .themeIcon.auto {
   }
 
   .qwik-devtools .ring-2 {
-    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -1537,26 +2019,31 @@ html:not([data-theme]) .themeIcon.auto {
     --tw-ring-color: var(--color-primary-active);
   }
 
+  .qwik-devtools .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .qwik-devtools .drop-shadow-\[0_2px_4px_rgba\(0\,0\,0\,0\.2\)\] {
     --tw-drop-shadow-size: drop-shadow(0 2px 4px var(--tw-drop-shadow-color, #0003));
     --tw-drop-shadow: var(--tw-drop-shadow-size);
-    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
   .qwik-devtools .filter {
-    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
   .qwik-devtools .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
-    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   }
 
   .qwik-devtools .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
-    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   }
 
   .qwik-devtools .transition {
@@ -1565,6 +2052,12 @@ html:not([data-theme]) .themeIcon.auto {
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .qwik-devtools .transition-\[border-radius\,width\,height\,left\,top\] {
+    transition-property: border-radius, width, height, left, top;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .qwik-devtools .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1589,6 +2082,11 @@ html:not([data-theme]) .themeIcon.auto {
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .qwik-devtools .duration-0 {
+    --tw-duration: 0s;
+    transition-duration: 0s;
+  }
+
   .qwik-devtools .duration-150 {
     --tw-duration: .15s;
     transition-duration: .15s;
@@ -1619,6 +2117,11 @@ html:not([data-theme]) .themeIcon.auto {
     transition-timing-function: var(--ease-out);
   }
 
+  .qwik-devtools .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
   .qwik-devtools .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1658,6 +2161,21 @@ html:not([data-theme]) .themeIcon.auto {
     color: var(--color-muted-foreground);
   }
 
+  .qwik-devtools .placeholder\:text-muted-foreground\/70::placeholder {
+    color: #6b7280b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .qwik-devtools .placeholder\:text-muted-foreground\/70::placeholder {
+      color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
+    }
+  }
+
+  .qwik-devtools .last\:border-0:last-child {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
   @media (hover: hover) {
     .qwik-devtools .hover\:-translate-y-0\.5:hover {
       --tw-translate-y: calc(var(--spacing) * -.5);
@@ -1706,6 +2224,26 @@ html:not([data-theme]) .themeIcon.auto {
       }
     }
 
+    .qwik-devtools .hover\:bg-foreground\/10:hover {
+      background-color: #0000001a;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .qwik-devtools .hover\:bg-foreground\/10:hover {
+        background-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+      }
+    }
+
+    .qwik-devtools .hover\:bg-foreground\/20:hover {
+      background-color: #0003;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .qwik-devtools .hover\:bg-foreground\/20:hover {
+        background-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
+      }
+    }
+
     .qwik-devtools .hover\:bg-primary\/10:hover {
       background-color: #16b6f61a;
     }
@@ -1726,6 +2264,26 @@ html:not([data-theme]) .themeIcon.auto {
       }
     }
 
+    .qwik-devtools .hover\:bg-primary\/30:hover {
+      background-color: #16b6f64d;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .qwik-devtools .hover\:bg-primary\/30:hover {
+        background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+      }
+    }
+
+    .qwik-devtools .hover\:bg-red-500\/20:hover {
+      background-color: #fb2c3633;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .qwik-devtools .hover\:bg-red-500\/20:hover {
+        background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+      }
+    }
+
     .qwik-devtools .hover\:text-foreground:hover {
       color: var(--color-foreground);
     }
@@ -1771,8 +2329,12 @@ html:not([data-theme]) .themeIcon.auto {
     }
   }
 
+  .qwik-devtools .focus\:border-primary:focus {
+    border-color: var(--color-primary);
+  }
+
   .qwik-devtools .focus\:ring-0:focus {
-    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -1783,14 +2345,18 @@ html:not([data-theme]) .themeIcon.auto {
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
 
+  .qwik-devtools .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .qwik-devtools .disabled\:opacity-50:disabled {
+    opacity: .5;
+  }
+
   @media (min-width: 40rem) {
     .qwik-devtools .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-
-    .qwik-devtools .sm\:grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
   }
 
   @media (min-width: 48rem) {
@@ -1802,10 +2368,6 @@ html:not([data-theme]) .themeIcon.auto {
       width: calc(var(--spacing) * 20);
     }
 
-    .qwik-devtools .md\:w-\[90vw\] {
-      width: 90vw;
-    }
-
     .qwik-devtools .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -1824,16 +2386,28 @@ html:not([data-theme]) .themeIcon.auto {
   }
 
   @media (min-width: 64rem) {
-    .qwik-devtools .lg\:w-\[85vw\] {
-      width: 85vw;
-    }
-
     .qwik-devtools .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
-    .qwik-devtools .lg\:grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+    .qwik-devtools .lg\:grid-cols-\[1fr_1fr_auto\] {
+      grid-template-columns: 1fr 1fr auto;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .qwik-devtools .xl\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .qwik-devtools .dark\:text-amber-300 {
+      color: var(--color-amber-300);
+    }
+
+    .qwik-devtools .dark\:text-emerald-300 {
+      color: var(--color-emerald-300);
     }
   }
 
@@ -1955,12 +2529,12 @@ html:not([data-theme]) .themeIcon.auto {
 @keyframes slideUpFade {
   from {
     opacity: 0;
-    transform: translateY(20px)scale(.98);
+    transform: translateY(20px) scale(.98);
   }
 
   to {
     opacity: 1;
-    transform: translateY(0)scale(1);
+    transform: translateY(0) scale(1);
   }
 }
 
@@ -2320,4 +2894,13 @@ html:not([data-theme]) .themeIcon.auto {
     transform: rotate(360deg);
   }
 }
-/*$vite$:1*/
+.themeIcon {
+  opacity: 0;
+  transition: opacity 400ms ease-in-out;
+}
+
+html[data-theme='light'] .themeIcon.light,
+html[data-theme='dark'] .themeIcon.dark,
+html:not([data-theme]) .themeIcon.auto {
+  opacity: 1;
+}