@mastra/playground-ui 22.1.3-alpha.2 → 22.2.0-alpha.8

package/dist/index.css

@@ -106,19 +106,18 @@
     --color-red-700: oklch(50.5% .213 27.518);
     --color-red-900: oklch(39.6% .141 25.723);
     --color-orange-400: oklch(75% .183 55.934);
+    --color-orange-500: oklch(70.5% .213 47.604);
     --color-yellow-500: oklch(79.5% .184 86.047);
-    --color-yellow-700: oklch(55.4% .135 66.442);
-    --color-yellow-900: oklch(42.1% .095 57.708);
+    --color-green-500: oklch(72.3% .219 149.579);
     --color-green-600: oklch(62.7% .194 149.214);
-    --color-green-900: oklch(39.3% .095 152.535);
-    --color-cyan-900: oklch(39.8% .07 227.392);
-    --color-blue-800: oklch(42.4% .199 265.638);
-    --color-purple-900: oklch(38.1% .176 304.987);
-    --color-pink-900: oklch(40.8% .153 2.432);
+    --color-cyan-500: oklch(71.5% .143 215.221);
+    --color-blue-500: oklch(62.3% .214 259.815);
+    --color-purple-500: oklch(62.7% .265 303.9);
+    --color-pink-500: oklch(65.6% .241 354.308);
     --color-gray-100: oklch(96.7% .003 264.542);
     --color-gray-300: oklch(87.2% .01 258.338);
     --color-gray-700: oklch(37.3% .034 259.733);
-    --color-neutral-700: oklch(37.1% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
     --color-black: #000;
     --color-white: #fff;
     --container-md: 28rem;
@@ -176,6 +175,7 @@
     --spacing-24: 6rem;
     --spacing-28: 7rem;
     --spacing-32: 8rem;
+    --spacing-44: 11rem;
     --spacing-48: 12rem;
     --spacing-52: 13rem;
     --spacing-56: 14rem;
@@ -183,6 +183,7 @@
     --spacing-64: 16rem;
     --spacing-72: 18rem;
     --spacing-80: 20rem;
+    --spacing-96: 24rem;
     --spacing-px: .0625rem;
     --spacing-0_5: .125rem;
     --spacing-1_5: .375rem;
@@ -771,6 +772,10 @@
     margin-inline: calc(var(--spacing-1) * -1);
   }
 
+  .-mx-1\.5 {
+    margin-inline: calc(var(--spacing-1_5) * -1);
+  }
+
   .mx-1 {
     margin-inline: var(--spacing-1);
   }
@@ -966,6 +971,10 @@
     height: var(--radix-select-trigger-height);
   }
 
+  .h-0\.5 {
+    height: var(--spacing-0_5);
+  }
+
   .h-1 {
     height: var(--spacing-1);
   }
@@ -1038,6 +1047,10 @@
     height: var(--spacing-48) !important;
   }
 
+  .h-64 {
+    height: var(--spacing-64);
+  }
+
   .h-\[0\.6rem\] {
     height: .6rem;
   }
@@ -1171,6 +1184,10 @@
     max-height: 400px;
   }
 
+  .max-h-\[min\(20rem\,var\(--radix-dropdown-menu-content-available-height\)\)\] {
+    max-height: min(20rem, var(--radix-dropdown-menu-content-available-height));
+  }
+
   .max-h-dropdown-max-height {
     max-height: var(--max-height-dropdown-max-height);
   }
@@ -1195,6 +1212,10 @@
     min-height: var(--spacing-12);
   }
 
+  .min-h-14 {
+    min-height: var(--spacing-14);
+  }
+
   .min-h-72 {
     min-height: var(--spacing-72);
   }
@@ -1323,6 +1344,10 @@
     width: var(--spacing-80);
   }
 
+  .w-96 {
+    width: var(--spacing-96);
+  }
+
   .w-\[\.75rem\] {
     width: .75rem;
   }
@@ -1568,6 +1593,10 @@
     min-width: var(--spacing-32);
   }
 
+  .min-w-44 {
+    min-width: var(--spacing-44);
+  }
+
   .min-w-60 {
     min-width: var(--spacing-60);
   }
@@ -2046,6 +2075,10 @@
     overflow: hidden;
   }
 
+  .overflow-visible {
+    overflow: visible;
+  }
+
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -2090,6 +2123,10 @@
     border-radius: var(--radius-md) !important;
   }
 
+  .rounded-none {
+    border-radius: var(--radius-none);
+  }
+
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
@@ -2217,7 +2254,17 @@
     }
   }
 
-  .border-accent2, .border-accent2\/30 {
+  .border-accent2, .border-accent2\/20 {
+    border-color: var(--color-accent2);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-accent2\/20 {
+      border-color: color-mix(in oklab, var(--color-accent2) 20%, transparent);
+    }
+  }
+
+  .border-accent2\/30 {
     border-color: var(--color-accent2);
   }
 
@@ -2267,10 +2314,16 @@
     }
   }
 
-  .border-border1 {
+  .border-border1, .border-border1\/50 {
     border-color: var(--color-border1);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-border1\/50 {
+      border-color: color-mix(in oklab, var(--color-border1) 50%, transparent);
+    }
+  }
+
   .border-border2 {
     border-color: var(--color-border2);
   }
@@ -2449,45 +2502,53 @@
     background-color: var(--color-accent6Darker);
   }
 
-  .bg-black\/10 {
-    background-color: #0000001a;
+  .bg-blue-500\/10 {
+    background-color: #3080ff1a;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-black\/10 {
-      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    .bg-blue-500\/10 {
+      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
     }
   }
 
-  .bg-blue-800 {
-    background-color: var(--color-blue-800);
+  .bg-blue-500\/30 {
+    background-color: #3080ff4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-blue-500\/30 {
+      background-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
+    }
   }
 
-  .bg-blue-800\/80 {
-    background-color: #193cb8cc;
+  .bg-border1, .bg-border1\/50 {
+    background-color: var(--color-border1);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-blue-800\/80 {
-      background-color: color-mix(in oklab, var(--color-blue-800) 80%, transparent);
+    .bg-border1\/50 {
+      background-color: color-mix(in oklab, var(--color-border1) 50%, transparent);
     }
   }
 
-  .bg-border1 {
-    background-color: var(--color-border1);
+  .bg-cyan-500\/10 {
+    background-color: #00b7d71a;
   }
 
-  .bg-cyan-900 {
-    background-color: var(--color-cyan-900);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-cyan-500\/10 {
+      background-color: color-mix(in oklab, var(--color-cyan-500) 10%, transparent);
+    }
   }
 
-  .bg-cyan-900\/80 {
-    background-color: #104e64cc;
+  .bg-cyan-500\/30 {
+    background-color: #00b7d74d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-cyan-900\/80 {
-      background-color: color-mix(in oklab, var(--color-cyan-900) 80%, transparent);
+    .bg-cyan-500\/30 {
+      background-color: color-mix(in oklab, var(--color-cyan-500) 30%, transparent);
     }
   }
 
@@ -2495,35 +2556,47 @@
     background-color: var(--color-gray-100);
   }
 
-  .bg-green-600 {
-    background-color: var(--color-green-600);
+  .bg-green-500\/10 {
+    background-color: #00c7581a;
   }
 
-  .bg-green-900 {
-    background-color: var(--color-green-900);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-green-500\/10 {
+      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+    }
   }
 
-  .bg-green-900\/80 {
-    background-color: #0d542bcc;
+  .bg-green-500\/30 {
+    background-color: #00c7584d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-green-900\/80 {
-      background-color: color-mix(in oklab, var(--color-green-900) 80%, transparent);
+    .bg-green-500\/30 {
+      background-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
     }
   }
 
-  .bg-neutral-700 {
-    background-color: var(--color-neutral-700);
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
+
+  .bg-neutral-500\/10 {
+    background-color: #7373731a;
   }
 
-  .bg-neutral-700\/80 {
-    background-color: #404040cc;
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neutral-500\/10 {
+      background-color: color-mix(in oklab, var(--color-neutral-500) 10%, transparent);
+    }
+  }
+
+  .bg-neutral-500\/30 {
+    background-color: #7373734d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-neutral-700\/80 {
-      background-color: color-mix(in oklab, var(--color-neutral-700) 80%, transparent);
+    .bg-neutral-500\/30 {
+      background-color: color-mix(in oklab, var(--color-neutral-500) 30%, transparent);
     }
   }
 
@@ -2545,63 +2618,101 @@
     }
   }
 
+  .bg-orange-500\/10 {
+    background-color: #fe6e001a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-orange-500\/10 {
+      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
+    }
+  }
+
+  .bg-orange-500\/30 {
+    background-color: #fe6e004d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-orange-500\/30 {
+      background-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
+    }
+  }
+
   .bg-overlay {
     background-color: var(--color-overlay);
   }
 
-  .bg-pink-900 {
-    background-color: var(--color-pink-900);
+  .bg-pink-500\/10 {
+    background-color: #f6339a1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-pink-500\/10 {
+      background-color: color-mix(in oklab, var(--color-pink-500) 10%, transparent);
+    }
   }
 
-  .bg-pink-900\/80 {
-    background-color: #861043cc;
+  .bg-pink-500\/30 {
+    background-color: #f6339a4d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-pink-900\/80 {
-      background-color: color-mix(in oklab, var(--color-pink-900) 80%, transparent);
+    .bg-pink-500\/30 {
+      background-color: color-mix(in oklab, var(--color-pink-500) 30%, transparent);
     }
   }
 
-  .bg-purple-900 {
-    background-color: var(--color-purple-900);
+  .bg-purple-500\/10 {
+    background-color: #ac4bff1a;
   }
 
-  .bg-purple-900\/80 {
-    background-color: #59168bcc;
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-purple-500\/10 {
+      background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
+    }
+  }
+
+  .bg-purple-500\/30 {
+    background-color: #ac4bff4d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-purple-900\/80 {
-      background-color: color-mix(in oklab, var(--color-purple-900) 80%, transparent);
+    .bg-purple-500\/30 {
+      background-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
     }
   }
 
-  .bg-red-700 {
-    background-color: var(--color-red-700);
+  .bg-red-500\/10 {
+    background-color: #fb2c361a;
   }
 
-  .bg-red-900 {
-    background-color: var(--color-red-900);
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-red-500\/10 {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    }
   }
 
-  .bg-red-900\/10 {
-    background-color: #82181a1a;
+  .bg-red-500\/30 {
+    background-color: #fb2c364d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-red-900\/10 {
-      background-color: color-mix(in oklab, var(--color-red-900) 10%, transparent);
+    .bg-red-500\/30 {
+      background-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
     }
   }
 
-  .bg-red-900\/80 {
-    background-color: #82181acc;
+  .bg-red-700 {
+    background-color: var(--color-red-700);
+  }
+
+  .bg-red-900\/10 {
+    background-color: #82181a1a;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-red-900\/80 {
-      background-color: color-mix(in oklab, var(--color-red-900) 80%, transparent);
+    .bg-red-900\/10 {
+      background-color: color-mix(in oklab, var(--color-red-900) 10%, transparent);
     }
   }
 
@@ -2667,31 +2778,23 @@
     background-color: var(--color-yellow-500);
   }
 
-  .bg-yellow-700 {
-    background-color: var(--color-yellow-700);
-  }
-
-  .bg-yellow-700\/80 {
-    background-color: #a36100cc;
+  .bg-yellow-500\/10 {
+    background-color: #edb2001a;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-yellow-700\/80 {
-      background-color: color-mix(in oklab, var(--color-yellow-700) 80%, transparent);
+    .bg-yellow-500\/10 {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
     }
   }
 
-  .bg-yellow-900 {
-    background-color: var(--color-yellow-900);
-  }
-
-  .bg-yellow-900\/80 {
-    background-color: #733e0acc;
+  .bg-yellow-500\/30 {
+    background-color: #edb2004d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .bg-yellow-900\/80 {
-      background-color: color-mix(in oklab, var(--color-yellow-900) 80%, transparent);
+    .bg-yellow-500\/30 {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
     }
   }
 
@@ -2800,6 +2903,10 @@
     padding-inline: var(--spacing-3);
   }
 
+  .px-3\.5 {
+    padding-inline: var(--spacing-3_5);
+  }
+
   .px-4 {
     padding-inline: var(--spacing-4);
   }
@@ -2828,10 +2935,6 @@
     padding-inline: .85em;
   }
 
-  .px-\[0\.5em\] {
-    padding-inline: .5em;
-  }
-
   .px-\[1em\] {
     padding-inline: 1em;
   }
@@ -2864,6 +2967,10 @@
     padding-block: var(--spacing-3);
   }
 
+  .py-3\.5 {
+    padding-block: var(--spacing-3_5);
+  }
+
   .py-4 {
     padding-block: var(--spacing-4);
   }
@@ -2936,6 +3043,10 @@
     padding-right: var(--spacing-4);
   }
 
+  .pr-6 {
+    padding-right: var(--spacing-6);
+  }
+
   .pr-8 {
     padding-right: var(--spacing-8);
   }
@@ -3078,20 +3189,20 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 
-  .text-\[10px\] {
-    font-size: 10px;
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
   }
 
-  .text-\[11px\] {
-    font-size: 11px;
+  .text-\[10px\] {
+    font-size: 10px;
   }
 
-  .text-\[12px\] {
-    font-size: 12px;
+  .text-\[11\.5px\] {
+    font-size: 11.5px;
   }
 
-  .text-\[13px\] {
-    font-size: 13px;
+  .text-\[12\.5px\] {
+    font-size: 12.5px;
   }
 
   .text-header-lg {
@@ -3334,6 +3445,16 @@
     }
   }
 
+  .text-neutral3\/90 {
+    color: var(--color-neutral3);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-neutral3\/90 {
+      color: color-mix(in oklab, var(--color-neutral3) 90%, transparent);
+    }
+  }
+
   .text-neutral4, .text-neutral4\/80 {
     color: var(--color-neutral4);
   }
@@ -3344,6 +3465,16 @@
     }
   }
 
+  .text-neutral4\/90 {
+    color: var(--color-neutral4);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-neutral4\/90 {
+      color: color-mix(in oklab, var(--color-neutral4) 90%, transparent);
+    }
+  }
+
   .text-neutral5 {
     color: var(--color-neutral5);
   }
@@ -4217,10 +4348,6 @@
     opacity: .7;
   }
 
-  .focus-visible\:rounded-sm:focus-visible {
-    border-radius: var(--radius-sm);
-  }
-
   .focus-visible\:border-accent1:focus-visible {
     border-color: var(--color-accent1);
   }
@@ -4258,16 +4385,6 @@
     }
   }
 
-  .focus-visible\:ring-white\/30:focus-visible {
-    --tw-ring-color: #ffffff4d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .focus-visible\:ring-white\/30:focus-visible {
-      --tw-ring-color: color-mix(in oklab, var(--color-white) 30%, transparent);
-    }
-  }
-
   .focus-visible\:outline-hidden:focus-visible {
     --tw-outline-style: none;
     outline-style: none;
@@ -5557,6 +5674,10 @@
     float: left;
   }
 
+  .\[\&\>svg\]\:mx-0 > svg {
+    margin-inline: var(--spacing-0);
+  }
+
   .\[\&\>svg\]\:mx-\[-\.3em\] > svg {
     margin-inline: -.3em;
   }
@@ -7595,3 +7716,69 @@ html.light {
     transform: translateX(100%);
   }
 }
+.brand-loader svg {
+  filter: drop-shadow(0 0 0.7px currentcolor);
+  shape-rendering: geometricprecision;
+}
+
+.brand-loader circle {
+  fill: currentcolor;
+}
+
+.brand-loader line {
+  stroke: currentcolor;
+  stroke-width: 2.8;
+  stroke-linecap: round;
+}
+
+.brand-loader circle,
+.brand-loader line {
+  animation: brand-loader-pulse 1.8s ease-in-out infinite;
+}
+
+.brand-loader .brand-loader-b1 {
+  animation-delay: 0s;
+}
+
+.brand-loader .brand-loader-b2 {
+  animation-delay: 0.09s;
+}
+
+.brand-loader .brand-loader-ln23 {
+  animation-delay: 0.135s;
+}
+
+.brand-loader .brand-loader-b3 {
+  animation-delay: 0.18s;
+}
+
+.brand-loader .brand-loader-ln34 {
+  animation-delay: 0.225s;
+}
+
+.brand-loader .brand-loader-b4 {
+  animation-delay: 0.27s;
+}
+
+.brand-loader .brand-loader-ln45 {
+  animation-delay: 0.315s;
+}
+
+.brand-loader .brand-loader-b5 {
+  animation-delay: 0.36s;
+}
+
+@keyframes brand-loader-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  40% {
+    opacity: 0;
+  }
+
+  70% {
+    opacity: 1;
+  }
+}