@mastra/playground-ui 60.2.0 → 61.0.0-alpha.1

package/dist/style.css

@@ -216,6 +216,18 @@
     --text-label: .8125rem;
     --text-label--line-height: 150%;
     --text-label--font-weight: 500;
+    --text-card-title: .8125rem;
+    --text-card-title--line-height: 150%;
+    --text-card-title--font-weight: 550;
+    --text-card-title--letter-spacing: 0em;
+    --text-card-title-tight: var(--text-card-title);
+    --text-card-title-tight--line-height: var(--text-card-title--line-height);
+    --text-card-title-tight--font-weight: var(--text-card-title--font-weight);
+    --text-card-title-tight--letter-spacing: -.025rem;
+    --text-card-title-strong: var(--text-card-title);
+    --text-card-title-strong--line-height: var(--text-card-title--line-height);
+    --text-card-title-strong--font-weight: 600;
+    --text-card-title-strong--letter-spacing: var(--text-card-title--letter-spacing);
     --text-body-sm: .8125rem;
     --text-body-sm--line-height: 150%;
     --text-body-sm--font-weight: 400;
@@ -681,6 +693,10 @@
     inset-inline: 0;
   }
 
+  .inset-x-\[6\.5px\] {
+    inset-inline: 6.5px;
+  }
+
   .inset-x-px {
     inset-inline: 1px;
   }
@@ -1007,6 +1023,10 @@
     margin: var(--spacing);
   }
 
+  .m-2 {
+    margin: calc(var(--spacing) * 2);
+  }
+
   .m-2\! {
     margin: calc(var(--spacing) * 2) !important;
   }
@@ -1056,6 +1076,10 @@
     margin-inline: var(--spacing);
   }
 
+  .mx-1\.5 {
+    margin-inline: calc(var(--spacing) * 1.5);
+  }
+
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -1092,6 +1116,10 @@
     margin-block: calc(var(--spacing) * 2);
   }
 
+  .my-2\.5 {
+    margin-block: calc(var(--spacing) * 2.5);
+  }
+
   .my-3 {
     margin-block: calc(var(--spacing) * 3);
   }
@@ -1593,10 +1621,6 @@
     margin-top: calc(var(--spacing) * .5);
   }
 
-  .mt-0\.75 {
-    margin-top: calc(var(--spacing) * .75);
-  }
-
   .mt-1 {
     margin-top: var(--spacing);
   }
@@ -1641,6 +1665,10 @@
     margin-top: calc(var(--spacing) * 14);
   }
 
+  .mt-\[5px\] {
+    margin-top: 5px;
+  }
+
   .mt-auto {
     margin-top: auto;
   }
@@ -1657,6 +1685,10 @@
     margin-right: 0;
   }
 
+  .mr-1 {
+    margin-right: var(--spacing);
+  }
+
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -1989,6 +2021,11 @@
     height: 1.125rem;
   }
 
+  .size-\[3px\] {
+    width: 3px;
+    height: 3px;
+  }
+
   .size-\[7px\] {
     width: 7px;
     height: 7px;
@@ -2649,6 +2686,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  .w-5\/6 {
+    width: 83.3333%;
+  }
+
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -2685,10 +2726,18 @@
     width: calc(var(--spacing) * 16);
   }
 
+  .w-18 {
+    width: calc(var(--spacing) * 18);
+  }
+
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
 
+  .w-22 {
+    width: calc(var(--spacing) * 22);
+  }
+
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -2697,6 +2746,10 @@
     width: calc(var(--spacing) * 25);
   }
 
+  .w-26 {
+    width: calc(var(--spacing) * 26);
+  }
+
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
@@ -2845,6 +2898,10 @@
     width: calc(var(--spacing) * 270);
   }
 
+  .w-\[3px\] {
+    width: 3px;
+  }
+
   .w-\[20rem\] {
     width: 20rem;
   }
@@ -2853,18 +2910,10 @@
     width: 32rem;
   }
 
-  .w-\[40\%\] {
-    width: 40%;
-  }
-
   .w-\[40rem\] {
     width: 40rem;
   }
 
-  .w-\[50\%\] {
-    width: 50%;
-  }
-
   .w-\[55\%\] {
     width: 55%;
   }
@@ -2881,26 +2930,10 @@
     width: 70vw;
   }
 
-  .w-\[75\%\] {
-    width: 75%;
-  }
-
   .w-\[75vw\] {
     width: 75vw;
   }
 
-  .w-\[80\%\] {
-    width: 80%;
-  }
-
-  .w-\[85\%\] {
-    width: 85%;
-  }
-
-  .w-\[90\%\] {
-    width: 90%;
-  }
-
   .w-\[120\%\] {
     width: 120%;
   }
@@ -3750,14 +3783,6 @@
     grid-template-columns: 0fr;
   }
 
-  .grid-cols-\[0px_1fr_0fr\] {
-    grid-template-columns: 0 1fr 0fr;
-  }
-
-  .grid-cols-\[0px_1fr_1fr\] {
-    grid-template-columns: 0 1fr 1fr;
-  }
-
   .grid-cols-\[1fr\] {
     grid-template-columns: 1fr;
   }
@@ -3814,14 +3839,6 @@
     grid-template-columns: 14rem 1fr;
   }
 
-  .grid-cols-\[18rem_1fr_0fr\] {
-    grid-template-columns: 18rem 1fr 0fr;
-  }
-
-  .grid-cols-\[18rem_1fr_1fr\] {
-    grid-template-columns: 18rem 1fr 1fr;
-  }
-
   .grid-cols-\[120px_1fr\] {
     grid-template-columns: 120px 1fr;
   }
@@ -3870,14 +3887,6 @@
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
 
-  .grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,0fr\)\] {
-    grid-template-columns: minmax(0, 2fr) minmax(0, 0fr);
-  }
-
-  .grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
-    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
-  }
-
   .grid-cols-\[minmax\(0\,10rem\)_5rem_minmax\(0\,1fr\)\] {
     grid-template-columns: minmax(0, 10rem) 5rem minmax(0, 1fr);
   }
@@ -4906,6 +4915,26 @@
     }
   }
 
+  .bg-current\/25 {
+    background-color: currentColor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-current\/25 {
+      background-color: color-mix(in oklab, currentcolor 25%, transparent);
+    }
+  }
+
+  .bg-current\/40 {
+    background-color: currentColor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-current\/40 {
+      background-color: color-mix(in oklab, currentcolor 40%, transparent);
+    }
+  }
+
   .bg-current\/80 {
     background-color: currentColor;
   }
@@ -5280,6 +5309,10 @@
     background-color: var(--warning-bright);
   }
 
+  .bg-warning-foreground {
+    background-color: var(--warning-foreground);
+  }
+
   .bg-warning-indicator {
     background-color: var(--warning-indicator);
   }
@@ -5326,29 +5359,10 @@
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
-  .bg-linear-to-t {
-    --tw-gradient-position: to top;
-  }
-
-  @supports (background-image: linear-gradient(in lab, red, red)) {
-    .bg-linear-to-t {
-      --tw-gradient-position: to top in oklab;
-    }
-  }
-
-  .bg-linear-to-t {
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-
   .bg-\[linear-gradient\(currentColor\,currentColor\)\] {
     background-image: linear-gradient(currentColor, currentColor);
   }
 
-  .from-sidebar {
-    --tw-gradient-from: var(--sidebar);
-    --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));
-  }
-
   .from-transparent {
     --tw-gradient-from: transparent;
     --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));
@@ -5374,21 +5388,6 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
 
-  .via-sidebar\/80 {
-    --tw-gradient-via: var(--sidebar);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .via-sidebar\/80 {
-      --tw-gradient-via: color-mix(in oklab, var(--sidebar) 80%, transparent);
-    }
-  }
-
-  .via-sidebar\/80 {
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
-
   .to-card {
     --tw-gradient-to: var(--card);
     --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));
@@ -5448,6 +5447,18 @@
     mask-composite: intersect;
   }
 
+  .mask-b-from-60 {
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+    --tw-mask-bottom-from-position: calc(var(--spacing) * 60);
+    -webkit-mask-composite: source-in;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
   .mask-b-from-60\% {
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -5472,6 +5483,18 @@
     mask-composite: intersect;
   }
 
+  .mask-b-to-100 {
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+    --tw-mask-bottom-to-position: calc(var(--spacing) * 100);
+    -webkit-mask-composite: source-in;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
   .mask-b-to-100\% {
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -5669,6 +5692,10 @@
     stroke-width: 2px;
   }
 
+  .object-contain {
+    object-fit: contain;
+  }
+
   .object-cover {
     object-fit: cover;
   }
@@ -6109,6 +6136,10 @@
     padding-left: .9em;
   }
 
+  .pl-\[18px\] {
+    padding-left: 18px;
+  }
+
   .pl-\[calc\(\.9em\+1\.1em\+\.75em\)\] {
     padding-left: 2.75em;
   }
@@ -6141,6 +6172,27 @@
     font-family: var(--font-mono);
   }
 
+  .text-card-title {
+    font-size: var(--text-card-title);
+    line-height: var(--tw-leading, var(--text-card-title--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-card-title--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-card-title--font-weight));
+  }
+
+  .text-card-title-strong {
+    font-size: var(--text-card-title-strong);
+    line-height: var(--tw-leading, var(--text-card-title-strong--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-card-title-strong--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-card-title-strong--font-weight));
+  }
+
+  .text-card-title-tight {
+    font-size: var(--text-card-title-tight);
+    line-height: var(--tw-leading, var(--text-card-title-tight--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-card-title-tight--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-card-title-tight--font-weight));
+  }
+
   .text-display {
     font-size: var(--text-display);
     line-height: var(--tw-leading, var(--text-display--line-height));
@@ -6371,6 +6423,10 @@
     color: var(--badge-blue-foreground);
   }
 
+  .text-badge-blue-indicator {
+    color: var(--badge-blue-indicator);
+  }
+
   .text-badge-cyan-foreground {
     color: var(--badge-cyan-foreground);
   }
@@ -6379,6 +6435,10 @@
     color: var(--badge-green-foreground);
   }
 
+  .text-badge-green-indicator {
+    color: var(--badge-green-indicator);
+  }
+
   .text-badge-neutral-foreground {
     color: var(--badge-neutral-foreground);
   }
@@ -6387,6 +6447,10 @@
     color: var(--badge-orange-foreground);
   }
 
+  .text-badge-orange-indicator {
+    color: var(--badge-orange-indicator);
+  }
+
   .text-badge-pink-foreground {
     color: var(--badge-pink-foreground);
   }
@@ -7137,6 +7201,10 @@
     transition-property: none;
   }
 
+  .delay-200 {
+    transition-delay: .2s;
+  }
+
   .delay-500 {
     transition-delay: .5s;
   }
@@ -7258,6 +7326,11 @@
     contain: inline-size;
   }
 
+  .delay-200 {
+    --tw-animation-delay: .2s;
+    animation-delay: .2s;
+  }
+
   .delay-500 {
     --tw-animation-delay: .5s;
     animation-delay: .5s;
@@ -7438,6 +7511,10 @@
     text-box: trim-both cap alphabetic;
   }
 
+  .fade-in {
+    --tw-enter-opacity: 0;
+  }
+
   .fade-out {
     --tw-exit-opacity: 0;
   }
@@ -8669,6 +8746,10 @@
       color: var(--color-white);
     }
 
+    .hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+
     .hover\:opacity-70:hover {
       opacity: .7;
     }
@@ -9081,6 +9162,10 @@
     transition-property: none;
   }
 
+  :where([data-slot="dialog-content"]) .in-data-\[slot\=dialog-content\]\:bg-transparent {
+    background-color: #0000;
+  }
+
   .has-focus-visible\:bg-surface-panel:has(:focus-visible) {
     background-color: var(--surface-panel);
   }
@@ -10586,14 +10671,6 @@
       grid-template-columns: 17.5rem 4.5rem 17.5rem 4.5rem minmax(0, 1fr);
     }
 
-    .lg\:grid-cols-\[24rem_1fr_0fr\] {
-      grid-template-columns: 24rem 1fr 0fr;
-    }
-
-    .lg\:grid-cols-\[24rem_1fr_1fr\] {
-      grid-template-columns: 24rem 1fr 1fr;
-    }
-
     .lg\:grid-cols-\[auto_minmax\(0\,1fr\)\] {
       grid-template-columns: auto minmax(0, 1fr);
     }
@@ -10606,26 +10683,10 @@
       grid-template-rows: 1fr;
     }
 
-    .lg\:flex-row {
-      flex-direction: row;
-    }
-
-    .lg\:items-center {
-      align-items: center;
-    }
-
-    .lg\:justify-between {
-      justify-content: space-between;
-    }
-
     .lg\:gap-0 {
       gap: 0;
     }
 
-    .lg\:gap-2 {
-      gap: calc(var(--spacing) * 2);
-    }
-
     .lg\:gap-6 {
       gap: calc(var(--spacing) * 6);
     }
@@ -10670,11 +10731,6 @@
       padding-left: calc(var(--spacing) * 2);
     }
 
-    .lg\: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, );
-    }
-
     :is(.lg\:\*\:flex-1 > *) {
       flex: 1;
     }
@@ -10740,6 +10796,32 @@
     }
   }
 
+  @container not (min-width: 501px) {
+    .\@max-\[501px\]\:sr-only {
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border-width: 0;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .\@max-\[501px\]\:w-control-sm {
+      width: var(--spacing-control-sm);
+    }
+
+    .\@max-\[501px\]\:rounded-full {
+      border-radius: 3.40282e38px;
+    }
+
+    .\@max-\[501px\]\:px-0 {
+      padding-inline: 0;
+    }
+  }
+
   @container (min-width: 28rem) {
     .\@md\:-my-1 {
       margin-block: calc(var(--spacing) * -1);
@@ -11117,6 +11199,10 @@
     font-weight: var(--tw-font-weight, var(--text-body--font-weight));
   }
 
+  .\[\&_pre\]\:p-4 pre {
+    padding: calc(var(--spacing) * 4);
+  }
+
   .\[\&_pre\]\:leading-relaxed pre {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -11194,10 +11280,6 @@
     rotate: 180deg;
   }
 
-  .data-\[selected\=true\]\:\[\&_svg\]\:text-foreground[data-selected="true"] svg {
-    color: var(--foreground);
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .motion-reduce\:\[\&_svg\]\:transition-none svg {
       transition-property: none;
@@ -11228,6 +11310,23 @@
     background-color: var(--success-indicator);
   }
 
+  .\[\&\:\:-moz-range-thumb\]\:h-full::-moz-range-thumb {
+    height: 100%;
+  }
+
+  .\[\&\:\:-moz-range-thumb\]\:w-4::-moz-range-thumb {
+    width: calc(var(--spacing) * 4);
+  }
+
+  .\[\&\:\:-moz-range-thumb\]\:border-0::-moz-range-thumb {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .\[\&\:\:-moz-range-thumb\]\:bg-transparent::-moz-range-thumb {
+    background-color: #0000;
+  }
+
   .\[\&\:\:-webkit-inner-spin-button\]\:m-0::-webkit-inner-spin-button {
     margin: 0;
   }
@@ -11256,6 +11355,30 @@
     appearance: none;
   }
 
+  .\[\&\:\:-webkit-slider-runnable-track\]\:h-full::-webkit-slider-runnable-track {
+    height: 100%;
+  }
+
+  .\[\&\:\:-webkit-slider-runnable-track\]\:bg-transparent::-webkit-slider-runnable-track {
+    background-color: #0000;
+  }
+
+  .\[\&\:\:-webkit-slider-thumb\]\:h-full::-webkit-slider-thumb {
+    height: 100%;
+  }
+
+  .\[\&\:\:-webkit-slider-thumb\]\:w-4::-webkit-slider-thumb {
+    width: calc(var(--spacing) * 4);
+  }
+
+  .\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb {
+    appearance: none;
+  }
+
+  .\[\&\:\:-webkit-slider-thumb\]\:bg-transparent::-webkit-slider-thumb {
+    background-color: #0000;
+  }
+
   .\[\&\:active\:not\(\:disabled\)\]\:\[--surface-tint\:var\(--fill\)\]:active:not(:disabled) {
     --surface-tint: var(--fill);
   }
@@ -11495,6 +11618,12 @@
     margin-left: -.3em;
   }
 
+  @container not (min-width: 501px) {
+    .\@max-\[501px\]\:\[\&\>\[data-slot\=button-icon\]\]\:ml-0 > [data-slot="button-icon"] {
+      margin-left: 0;
+    }
+  }
+
   .\[\&\>\[data-slot\=input-group-control\]\]\:min-w-0 > [data-slot="input-group-control"] {
     min-width: 0;
   }
@@ -11523,10 +11652,14 @@
     padding-right: 0;
   }
 
-  .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>\[data-slot\=input-group-control\]\]\:pl-0:has( > [data-align="inline-start"]) > [data-slot="input-group-control"] {
+  .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>\[data-slot\=input-group-control\]\]\:pl-0:has( > [data-align="inline-start"]) > [data-slot="input-group-control"], .has-\[\>\[data-slot\=input-number-decrement\]\]\:\[\&\>\[data-slot\=input-number-input\]\]\:pl-0:has( > [data-slot="input-number-decrement"]) > [data-slot="input-number-input"] {
     padding-left: 0;
   }
 
+  .has-\[\>\[data-slot\=input-number-increment\]\]\:\[\&\>\[data-slot\=input-number-input\]\]\:pr-0:has( > [data-slot="input-number-increment"]) > [data-slot="input-number-input"] {
+    padding-right: 0;
+  }
+
   .\[\&\>\[data-slot\=message\]\:first-child\]\:mt-0 > [data-slot="message"]:first-child {
     margin-top: 0;
   }
@@ -11641,6 +11774,18 @@
     }
   }
 
+  .\[\&\>div\]\:flex > div {
+    display: flex;
+  }
+
+  .\[\&\>div\]\:flex-1 > div {
+    flex: 1;
+  }
+
+  .\[\&\>div\]\:flex-col > div {
+    flex-direction: column;
+  }
+
   .\[\&\>form\]\:flex > form {
     display: flex;
   }
@@ -11850,6 +11995,10 @@
     opacity: .5;
   }
 
+  .data-\[selected\=true\]\:\[\&\>svg\]\:text-foreground[data-selected="true"] > svg {
+    color: var(--foreground);
+  }
+
   @container (min-width: 28rem) {
     .\@md\:\[\&\>svg\]\:size-8 > svg {
       width: calc(var(--spacing) * 8);
@@ -12037,7 +12186,7 @@
   --red-100: oklch(94% .029 24);
   --red-200: oklch(88% .062 24);
   --red-300: oklch(80% .112 24);
-  --red-400: oklch(76% .14 24);
+  --red-400: oklch(70% .18 24);
   --red-500: oklch(63% .22 24);
   --red-600: oklch(56% .22 24);
   --red-700: oklch(48% .19 24);