@mastra/playground-ui 48.0.0-alpha.8 → 48.0.0

package/dist/style.css

@@ -155,6 +155,7 @@
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-6xl: 72rem;
@@ -328,6 +329,7 @@
     --color-green-600: var(--brand-green-600);
     --font-display: ui-serif, georgia, cambria, "Times New Roman", times, serif;
     --font-body: system-ui, ui-sans-serif, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --duration-normal: .2s;
     --duration-slow: .3s;
     --ease-out-custom: cubic-bezier(.33, 1, .68, 1);
     --shadow-dialog: 0 8px 24px -8px oklch(0% 0 0 / .28), 0 24px 56px -16px oklch(0% 0 0 / .36);
@@ -649,6 +651,10 @@
     container-type: inline-size;
   }
 
+  .\[container-type\:size\] {
+    container-type: size;
+  }
+
   .pointer-events-auto {
     pointer-events: auto;
   }
@@ -745,6 +751,14 @@
     top: var(--spacing-3);
   }
 
+  .top-4 {
+    top: var(--spacing-4);
+  }
+
+  .top-7 {
+    top: var(--spacing-7);
+  }
+
   .top-11 {
     top: var(--spacing-11);
   }
@@ -789,6 +803,11 @@
     bottom: calc(100% + .5rem);
   }
 
+  .bottom-px {
+    bottom: 1px;
+    bottom: var(--spacing-px);
+  }
+
   .-left-2 {
     left: calc(var(--spacing-2) * -1);
   }
@@ -825,6 +844,10 @@
     left: var(--spacing-3);
   }
 
+  .left-5 {
+    left: var(--spacing-5);
+  }
+
   .left-\[-10\%\] {
     left: -10%;
   }
@@ -901,14 +924,6 @@
     grid-column: 1 / -1;
   }
 
-  .col-start-1 {
-    grid-column-start: 1;
-  }
-
-  .row-start-1 {
-    grid-row-start: 1;
-  }
-
   .container {
     width: 100%;
   }
@@ -1056,6 +1071,10 @@
     margin-top: calc(var(--spacing-12) * -1);
   }
 
+  .mt-\(--chat-fade\) {
+    margin-top: var(--chat-fade);
+  }
+
   .mt-0 {
     margin-top: var(--spacing-0);
   }
@@ -1453,6 +1472,10 @@
     height: var(--spacing-1_5);
   }
 
+  .h-2 {
+    height: var(--spacing-2);
+  }
+
   .h-3 {
     height: var(--spacing-3);
   }
@@ -1838,6 +1861,10 @@
     width: 75%;
   }
 
+  .w-3\/5 {
+    width: 60%;
+  }
+
   .w-3xl {
     width: var(--container-3xl);
   }
@@ -1846,6 +1873,10 @@
     width: var(--spacing-4);
   }
 
+  .w-4\/5 {
+    width: 80%;
+  }
+
   .w-5 {
     width: var(--spacing-5);
   }
@@ -1902,6 +1933,10 @@
     width: var(--spacing-40);
   }
 
+  .w-52 {
+    width: var(--spacing-52);
+  }
+
   .w-56 {
     width: var(--spacing-56);
   }
@@ -2091,6 +2126,10 @@
     width: var(--container-sm);
   }
 
+  .w-xl {
+    width: var(--container-xl);
+  }
+
   .max-w-\(--available-width\) {
     max-width: var(--available-width);
   }
@@ -2311,6 +2350,10 @@
     flex-grow: 1;
   }
 
+  .basis-0 {
+    flex-basis: var(--spacing-0);
+  }
+
   .basis-4 {
     flex-basis: var(--spacing-4);
   }
@@ -2359,6 +2402,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .translate-x-1\/2 {
+    --tw-translate-x: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .translate-x-\[50\%\] {
     --tw-translate-x: 50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2374,6 +2422,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .-translate-y-px {
     --tw-translate-y: calc(var(--spacing-px) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2857,6 +2910,12 @@
     margin-block-end: calc(calc(var(--spacing-3) * -1) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where(.space-y-0\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing-0_5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing-0_5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-1 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--spacing-1) * var(--tw-space-y-reverse));
@@ -2905,6 +2964,10 @@
     margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .gap-x-3 {
+    column-gap: var(--spacing-3);
+  }
+
   .gap-x-4 {
     column-gap: var(--spacing-4);
   }
@@ -2935,6 +2998,10 @@
     row-gap: var(--spacing-1_5);
   }
 
+  .gap-y-2 {
+    row-gap: var(--spacing-2);
+  }
+
   .gap-y-3 {
     row-gap: var(--spacing-3);
   }
@@ -3022,6 +3089,10 @@
     border-radius: .3125rem;
   }
 
+  .rounded-\[2px\] {
+    border-radius: 2px;
+  }
+
   .rounded-\[22px\] {
     border-radius: 22px;
   }
@@ -3208,7 +3279,7 @@
     border-style: none;
   }
 
-  .border-accent1\/30 {
+  .border-accent1, .border-accent1\/30 {
     border-color: var(--color-accent1);
   }
 
@@ -3458,10 +3529,24 @@
     border-color: var(--color-red-400);
   }
 
+  .border-red-400\/30 {
+    border-color: #ff65684d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-red-400\/30 {
+      border-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
+    }
+  }
+
   .border-red-900 {
     border-color: var(--color-red-900);
   }
 
+  .border-surface2 {
+    border-color: var(--color-surface2);
+  }
+
   .border-transparent {
     border-color: #0000;
   }
@@ -3490,10 +3575,6 @@
     background-color: var(--chat-surface);
   }
 
-  .bg-\(--chat-veil\) {
-    background-color: var(--chat-veil);
-  }
-
   .bg-\[var\(--data-list-sticky-header-background\)\] {
     background-color: var(--data-list-sticky-header-background);
   }
@@ -3668,6 +3749,20 @@
     background-color: var(--color-gray-100);
   }
 
+  .bg-green-400 {
+    background-color: var(--color-green-400);
+  }
+
+  .bg-green-500\/5 {
+    background-color: var(--color-green-500);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-green-500\/5 {
+      background-color: color-mix(in oklab, var(--color-green-500) 5%, transparent);
+    }
+  }
+
   .bg-green-500\/10 {
     background-color: var(--color-green-500);
   }
@@ -3952,6 +4047,16 @@
     }
   }
 
+  .bg-red-500\/5 {
+    background-color: #fb2c360d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-red-500\/5 {
+      background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
+    }
+  }
+
   .bg-red-500\/10 {
     background-color: #fb2c361a;
   }
@@ -4219,6 +4324,10 @@
     stroke: var(--color-border1);
   }
 
+  .stroke-neutral3 {
+    stroke: var(--color-neutral3);
+  }
+
   .object-cover {
     object-fit: cover;
   }
@@ -4536,10 +4645,6 @@
     padding-right: var(--spacing-9);
   }
 
-  .pr-10 {
-    padding-right: var(--spacing-10);
-  }
-
   .pr-12 {
     padding-right: var(--spacing-12);
   }
@@ -4726,6 +4831,10 @@
     font-size: 11.5px;
   }
 
+  .text-\[11px\] {
+    font-size: 11px;
+  }
+
   .text-\[12\.5px\] {
     font-size: 12.5px;
   }
@@ -5050,6 +5159,10 @@
     color: var(--color-green-600);
   }
 
+  .text-inherit {
+    color: inherit;
+  }
+
   .text-negative1 {
     color: var(--color-negative1);
   }
@@ -5186,6 +5299,11 @@
     font-style: italic;
   }
 
+  .ordinal {
+    --tw-ordinal: ordinal;
+    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
+  }
+
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
@@ -5223,6 +5341,10 @@
     opacity: .5;
   }
 
+  .opacity-55 {
+    opacity: .55;
+  }
+
   .opacity-60 {
     opacity: .6;
   }
@@ -5371,10 +5493,16 @@
     box-shadow: var(--shadow-main-frame);
   }
 
-  .ring-accent1 {
+  .ring-accent1, .ring-accent1\/70 {
     --tw-ring-color: var(--color-accent1);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-accent1\/70 {
+      --tw-ring-color: color-mix(in oklab, var(--color-accent1) 70%, transparent);
+    }
+  }
+
   .ring-border2 {
     --tw-ring-color: var(--color-border2);
   }
@@ -5460,6 +5588,11 @@
     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, );
   }
 
+  .invert {
+    --tw-invert: invert(100%);
+    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 {
     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, );
   }
@@ -5684,6 +5817,14 @@
     transition-duration: 1s;
   }
 
+  .duration-normal {
+    transition-duration: var(--duration-normal);
+  }
+
+  .duration-slow {
+    transition-duration: var(--duration-slow);
+  }
+
   .ease-\[cubic-bezier\(0\.32\,0\.72\,0\,1\)\] {
     --tw-ease: cubic-bezier(.32,.72,0,1);
     transition-timing-function: cubic-bezier(.32, .72, 0, 1);
@@ -5748,6 +5889,10 @@
     --chat-column: 48rem;
   }
 
+  .\[--chat-fade\:1\.5rem\] {
+    --chat-fade: 1.5rem;
+  }
+
   .\[--chat-gutter\:0\.75rem\] {
     --chat-gutter: .75rem;
   }
@@ -5760,6 +5905,10 @@
     --chat-surface: var(--color-surface2);
   }
 
+  .\[--chat-veil\:70\%\] {
+    --chat-veil: 70%;
+  }
+
   .\[--chat-veil\:color-mix\(in_oklab\,var\(--chat-surface\)_70\%\,transparent\)\] {
     --chat-veil: var(--chat-surface);
   }
@@ -5836,6 +5985,10 @@
       width: var(--spacing-2);
     }
 
+    .group-hover\:text-neutral6:is(:where(.group):hover *) {
+      color: var(--color-neutral6);
+    }
+
     .group-hover\:opacity-100:is(:where(.group):hover *) {
       opacity: 1;
     }
@@ -6165,6 +6318,15 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .placeholder\:duration-normal::placeholder {
+    transition-duration: var(--duration-normal);
+  }
+
+  .before\:pointer-events-none:before {
+    content: var(--tw-content);
+    pointer-events: none;
+  }
+
   .before\:absolute:before {
     content: var(--tw-content);
     position: absolute;
@@ -6190,11 +6352,21 @@
     inset-block: var(--spacing-1);
   }
 
+  .before\:-top-\(--chat-fade\):before {
+    content: var(--tw-content);
+    top: calc(var(--chat-fade) * -1);
+  }
+
   .before\:top-\[50\%\]:before {
     content: var(--tw-content);
     top: 50%;
   }
 
+  .before\:bottom-0:before {
+    content: var(--tw-content);
+    bottom: var(--spacing-0);
+  }
+
   .before\:left-0:before {
     content: var(--tw-content);
     left: var(--spacing-0);
@@ -6205,6 +6377,11 @@
     z-index: calc(1 * -1);
   }
 
+  .before\:-z-10:before {
+    content: var(--tw-content);
+    z-index: calc(10 * -1);
+  }
+
   .before\:h-0:before {
     content: var(--tw-content);
     height: var(--spacing-0);
@@ -6248,6 +6425,11 @@
     border-color: var(--color-neutral3);
   }
 
+  .before\:bg-\(--chat-surface\):before {
+    content: var(--tw-content);
+    background-color: var(--chat-surface);
+  }
+
   .before\:bg-surface4:before {
     content: var(--tw-content);
     background-color: var(--color-surface4);
@@ -6296,6 +6478,13 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .before\:\[mask-image\:linear-gradient\(to_bottom\,transparent\,rgb\(0_0_0\/var\(--chat-veil\)\)_calc\(var\(--chat-fade\)\*3\)\)\]:before {
+    content: var(--tw-content);
+    -webkit-mask-image: linear-gradient(to bottom,transparent,rgb(0 0 0 / var(--chat-veil)) calc(var(--chat-fade) * 3));
+    -webkit-mask-image: linear-gradient(to bottom,transparent,rgb(0 0 0 / var(--chat-veil)) calc(var(--chat-fade) * 3));
+    mask-image: linear-gradient(to bottom,transparent,rgb(0 0 0 / var(--chat-veil)) calc(var(--chat-fade) * 3));
+  }
+
   .before\:content-\[\"\"\]:before, .before\:content-\[\'\'\]:before {
     --tw-content: "";
     content: var(--tw-content);
@@ -6586,6 +6775,16 @@
       }
     }
 
+    .hover\:bg-accent1\/60:hover {
+      background-color: var(--color-accent1);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-accent1\/60:hover {
+        background-color: color-mix(in oklab, var(--color-accent1) 60%, transparent);
+      }
+    }
+
     .hover\:bg-accent1\/80\!:hover {
       background-color: var(--color-accent1) !important;
     }
@@ -6714,6 +6913,16 @@
       background-color: var(--color-surface5);
     }
 
+    .hover\:bg-white\/\[0\.03\]:hover {
+      background-color: #ffffff08;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-white\/\[0\.03\]:hover {
+        background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
+      }
+    }
+
     .hover\:text-accent1:hover {
       color: var(--color-accent1);
     }
@@ -6738,6 +6947,10 @@
       opacity: .7;
     }
 
+    .hover\:opacity-80:hover {
+      opacity: .8;
+    }
+
     .hover\:opacity-100:hover {
       opacity: 1;
     }
@@ -6766,6 +6979,11 @@
       --tw-brightness: brightness(110%);
       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, );
     }
+
+    .hover\:brightness-125:hover {
+      --tw-brightness: brightness(125%);
+      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, );
+    }
   }
 
   .focus\:bg-accent1\/80\!:focus {
@@ -6953,6 +7171,11 @@
     outline-width: 1px;
   }
 
+  .focus-visible\:outline-2:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+
   .focus-visible\:outline-offset-2:focus-visible {
     outline-offset: 2px;
   }
@@ -7205,6 +7428,10 @@
     cursor: not-allowed;
   }
 
+  .aria-disabled\:cursor-wait[aria-disabled="true"] {
+    cursor: wait;
+  }
+
   .aria-disabled\:opacity-50[aria-disabled="true"] {
     opacity: .5;
   }
@@ -7373,6 +7600,10 @@
     transition-timing-function: cubic-bezier(.23, 1, .32, 1);
   }
 
+  .data-\[anchor-hidden\]\:hidden[data-anchor-hidden] {
+    display: none;
+  }
+
   .data-\[checked\]\:translate-x-3[data-checked] {
     --tw-translate-x: var(--spacing-3);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -8071,6 +8302,17 @@
     .motion-safe\:animate-spin {
       animation: var(--animate-spin);
     }
+
+    .motion-safe\:transition-\[background-color\,border-color\,box-shadow\,scale\] {
+      transition-property: background-color, border-color, box-shadow, scale;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
+    .motion-safe\:duration-150 {
+      --tw-duration: .15s;
+      transition-duration: .15s;
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -8265,9 +8507,21 @@
       padding: var(--spacing-6);
     }
 
+    .sm\:px-4 {
+      padding-inline: var(--spacing-4);
+    }
+
+    .sm\:pt-5 {
+      padding-top: var(--spacing-5);
+    }
+
     .sm\:pt-7 {
       padding-top: var(--spacing-7);
     }
+
+    .sm\:pb-3 {
+      padding-bottom: var(--spacing-3);
+    }
   }
 
   @media (min-width: 48rem) {
@@ -8305,6 +8559,10 @@
   }
 
   @media (min-width: 64rem) {
+    .lg\:m-6 {
+      margin: var(--spacing-6);
+    }
+
     .lg\:mx-2 {
       margin-inline: var(--spacing-2);
     }
@@ -8353,9 +8611,21 @@
       gap: var(--spacing-8);
     }
 
+    .lg\:p-6 {
+      padding: var(--spacing-6);
+    }
+
+    .lg\:px-6 {
+      padding-inline: var(--spacing-6);
+    }
+
     .lg\:px-12 {
       padding-inline: var(--spacing-12);
     }
+
+    .lg\:pt-6 {
+      padding-top: var(--spacing-6);
+    }
   }
 
   @media (min-width: 80rem) {
@@ -8371,6 +8641,10 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    .xl\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
     .xl\:gap-10 {
       gap: var(--spacing-10);
     }
@@ -8949,6 +9223,10 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .\[\&_svg\]\:duration-normal svg {
+    transition-duration: var(--duration-normal);
+  }
+
   .data-\[direction\=start\]\:\[\&_svg\]\:rotate-180[data-direction="start"] svg {
     rotate: 180deg;
   }
@@ -9802,12 +10080,22 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .\[\&\>svg\]\:transition-opacity > svg {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .\[\&\>svg\]\:transition-transform > svg {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .\[\&\>svg\]\:duration-normal > svg {
+    transition-duration: var(--duration-normal);
+  }
+
   .\[\&\>svg\]\:ease-out-custom > svg {
     --tw-ease: var(--ease-out-custom);
     transition-timing-function: var(--ease-out-custom);