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

package/dist/index.css

@@ -176,6 +176,7 @@
     --radius-xl: 14px;
     --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, .2, 1);
+    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-xs: 4px;
@@ -714,6 +715,10 @@
     isolation: isolate;
   }
 
+  .z-0 {
+    z-index: 0;
+  }
+
   .z-10 {
     z-index: 10;
   }
@@ -738,6 +743,14 @@
     z-index: 100;
   }
 
+  .order-first {
+    order: -9999;
+  }
+
+  .order-last {
+    order: 9999;
+  }
+
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -1067,6 +1080,10 @@
     height: var(--radix-select-trigger-height);
   }
 
+  .h-0\.5 {
+    height: var(--spacing-0_5);
+  }
+
   .h-1 {
     height: var(--spacing-1);
   }
@@ -1175,10 +1192,6 @@
     height: 30vh;
   }
 
-  .h-\[54px\] {
-    height: 54px;
-  }
-
   .h-\[80px\] {
     height: 80px;
   }
@@ -1211,6 +1224,10 @@
     height: 560px;
   }
 
+  .h-\[calc\(100\%-0\.5rem\)\] {
+    height: calc(100% - .5rem);
+  }
+
   .h-\[calc\(100vh-6rem\)\]\! {
     height: calc(100vh - 6rem) !important;
   }
@@ -1356,6 +1373,10 @@
     min-height: var(--spacing-72);
   }
 
+  .min-h-\[60px\] {
+    min-height: 60px;
+  }
+
   .min-h-\[80px\] {
     min-height: 80px;
   }
@@ -1364,10 +1385,6 @@
     min-height: 240px;
   }
 
-  .min-h-full {
-    min-height: 100%;
-  }
-
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
@@ -1392,10 +1409,6 @@
     width: 50%;
   }
 
-  .w-1\/3 {
-    width: 33.3333%;
-  }
-
   .w-2 {
     width: var(--spacing-2);
   }
@@ -1568,6 +1581,10 @@
     width: 250px;
   }
 
+  .w-\[260px\] {
+    width: 260px;
+  }
+
   .w-\[280px\] {
     width: 280px;
   }
@@ -1632,6 +1649,10 @@
     width: 1200px;
   }
 
+  .w-\[var\(--active-tab-width\)\] {
+    width: var(--active-tab-width);
+  }
+
   .w-auto {
     width: auto;
   }
@@ -1689,6 +1710,10 @@
     width: 100vw;
   }
 
+  .max-w-\(--available-width\) {
+    max-width: var(--available-width);
+  }
+
   .max-w-\(--sidebar-width-mobile\) {
     max-width: var(--sidebar-width-mobile);
   }
@@ -1709,10 +1734,6 @@
     max-width: 16.5rem;
   }
 
-  .max-w-\[20rem\] {
-    max-width: 20rem;
-  }
-
   .max-w-\[30rem\] {
     max-width: 30rem;
   }
@@ -1757,10 +1778,6 @@
     max-width: 200px;
   }
 
-  .max-w-\[500px\] {
-    max-width: 500px;
-  }
-
   .max-w-\[800px\] {
     max-width: 800px;
   }
@@ -1849,6 +1866,14 @@
     flex: 1;
   }
 
+  .flex-none {
+    flex: none;
+  }
+
+  .shrink {
+    flex-shrink: 1;
+  }
+
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -2151,6 +2176,10 @@
     align-items: flex-start;
   }
 
+  .items-stretch {
+    align-items: stretch;
+  }
+
   .justify-between {
     justify-content: space-between;
   }
@@ -2339,6 +2368,10 @@
     row-gap: var(--spacing-1_5);
   }
 
+  .gap-y-3 {
+    row-gap: var(--spacing-3);
+  }
+
   .gap-y-px {
     row-gap: 1px;
     row-gap: var(--spacing-px);
@@ -2410,6 +2443,10 @@
     border-radius: var(--radius-2xl);
   }
 
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
+
   .rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -2463,10 +2500,6 @@
     border-bottom-left-radius: var(--radius-md);
   }
 
-  .rounded-tl-none {
-    border-top-left-radius: var(--radius-none);
-  }
-
   .rounded-r {
     border-top-right-radius: .25rem;
     border-bottom-right-radius: .25rem;
@@ -2481,10 +2514,6 @@
     border-bottom-left-radius: var(--radius-lg);
   }
 
-  .rounded-bl-none {
-    border-bottom-left-radius: var(--radius-none);
-  }
-
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2505,11 +2534,6 @@
     border-block-width: 1px;
   }
 
-  .border-y-2 {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 2px;
-  }
-
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -2525,21 +2549,11 @@
     border-right-width: 0;
   }
 
-  .border-r-1 {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
-
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
 
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-  }
-
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -2713,10 +2727,6 @@
     border-bottom-color: var(--color-border1);
   }
 
-  .border-l-transparent {
-    border-left-color: #0000;
-  }
-
   .bg-accent1 {
     background-color: var(--color-accent1);
   }
@@ -3209,10 +3219,6 @@
     padding: var(--spacing-4);
   }
 
-  .p-5 {
-    padding: var(--spacing-5);
-  }
-
   .p-6 {
     padding: var(--spacing-6);
   }
@@ -3482,6 +3488,10 @@
     padding-left: var(--spacing-2);
   }
 
+  .pl-2\.5 {
+    padding-left: var(--spacing-2_5);
+  }
+
   .pl-3 {
     padding-left: var(--spacing-3);
   }
@@ -4135,12 +4145,6 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
-  .transition-\[width\,background-color\] {
-    transition-property: width, background-color;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
   .transition-\[width\] {
     transition-property: width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4202,6 +4206,11 @@
     transition-timing-function: cubic-bezier(.32, .72, 0, 1);
   }
 
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+
   .ease-out {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
@@ -4234,6 +4243,10 @@
     scrollbar-width: none;
   }
 
+  .fade-out {
+    --tw-exit-opacity: 0;
+  }
+
   .paused {
     animation-play-state: paused;
   }
@@ -4283,8 +4296,12 @@
       opacity: 1;
     }
 
-    .group-hover\/separator\:w-0\.5:is(:where(.group\/separator):hover *) {
-      width: var(--spacing-0_5);
+    .group-hover\/separator\:h-12:is(:where(.group\/separator):hover *) {
+      height: var(--spacing-12);
+    }
+
+    .group-hover\/separator\:w-1:is(:where(.group\/separator):hover *) {
+      width: var(--spacing-1);
     }
 
     .group-hover\/separator\:bg-surface5:is(:where(.group\/separator):hover *) {
@@ -4300,8 +4317,12 @@
     background-color: var(--color-accent1);
   }
 
-  .group-focus-visible\/separator\:w-0\.5:is(:where(.group\/separator):focus-visible *) {
-    width: var(--spacing-0_5);
+  .group-focus-visible\/separator\:h-12:is(:where(.group\/separator):focus-visible *) {
+    height: var(--spacing-12);
+  }
+
+  .group-focus-visible\/separator\:w-1:is(:where(.group\/separator):focus-visible *) {
+    width: var(--spacing-1);
   }
 
   .group-focus-visible\/separator\:bg-accent1:is(:where(.group\/separator):focus-visible *) {
@@ -4312,22 +4333,91 @@
     opacity: 1;
   }
 
-  .group-data-\[separator\=\'active\'\]\/separator\:w-0\.5:is(:where(.group\/separator)[data-separator="active"] *) {
-    width: var(--spacing-0_5);
+  .group-has-\[\:disabled\]\/input-group\:opacity-50:is(:where(.group\/input-group):has(:disabled) *) {
+    opacity: .5;
+  }
+
+  .group-data-\[separator\=\'active\'\]\/separator\:h-12:is(:where(.group\/separator)[data-separator="active"] *) {
+    height: var(--spacing-12);
+  }
+
+  .group-data-\[separator\=\'active\'\]\/separator\:w-1:is(:where(.group\/separator)[data-separator="active"] *) {
+    width: var(--spacing-1);
   }
 
   .group-data-\[separator\=\'active\'\]\/separator\:bg-accent1:is(:where(.group\/separator)[data-separator="active"] *) {
     background-color: var(--color-accent1);
   }
 
-  .group-data-\[separator\=\'hover\'\]\/separator\:w-0\.5:is(:where(.group\/separator)[data-separator="hover"] *) {
-    width: var(--spacing-0_5);
+  .group-data-\[separator\=\'hover\'\]\/separator\:h-12:is(:where(.group\/separator)[data-separator="hover"] *) {
+    height: var(--spacing-12);
+  }
+
+  .group-data-\[separator\=\'hover\'\]\/separator\:w-1:is(:where(.group\/separator)[data-separator="hover"] *) {
+    width: var(--spacing-1);
   }
 
   .group-data-\[separator\=\'hover\'\]\/separator\:bg-surface5:is(:where(.group\/separator)[data-separator="hover"] *) {
     background-color: var(--color-surface5);
   }
 
+  .group-data-\[variant\=line\]\/tabs-list\:border-b-2:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+
+  .group-data-\[variant\=line\]\/tabs-list\:border-transparent:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    border-color: #0000;
+  }
+
+  .group-data-\[variant\=line\]\/tabs-list\:px-5:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    padding-inline: var(--spacing-5);
+  }
+
+  .group-data-\[variant\=line\]\/tabs-list\:py-2:is(:where(.group\/tabs-list)[data-variant="line"] *) {
+    padding-block: var(--spacing-2);
+  }
+
+  .group-data-\[variant\=pill\]\/tabs-list\:relative:is(:where(.group\/tabs-list)[data-variant="pill"] *) {
+    position: relative;
+  }
+
+  .group-data-\[variant\=pill\]\/tabs-list\:z-10:is(:where(.group\/tabs-list)[data-variant="pill"] *) {
+    z-index: 10;
+  }
+
+  .group-data-\[variant\=pill\]\/tabs-list\:rounded-full:is(:where(.group\/tabs-list)[data-variant="pill"] *) {
+    border-radius: 3.40282e38px;
+  }
+
+  .group-data-\[variant\=pill\]\/tabs-list\:px-3:is(:where(.group\/tabs-list)[data-variant="pill"] *) {
+    padding-inline: var(--spacing-3);
+  }
+
+  .group-data-\[variant\=pill\]\/tabs-list\:py-1:is(:where(.group\/tabs-list)[data-variant="pill"] *) {
+    padding-block: var(--spacing-1);
+  }
+
+  .group-data-\[variant\=pill-ghost\]\/tabs-list\:relative:is(:where(.group\/tabs-list)[data-variant="pill-ghost"] *) {
+    position: relative;
+  }
+
+  .group-data-\[variant\=pill-ghost\]\/tabs-list\:z-10:is(:where(.group\/tabs-list)[data-variant="pill-ghost"] *) {
+    z-index: 10;
+  }
+
+  .group-data-\[variant\=pill-ghost\]\/tabs-list\:rounded-full:is(:where(.group\/tabs-list)[data-variant="pill-ghost"] *) {
+    border-radius: 3.40282e38px;
+  }
+
+  .group-data-\[variant\=pill-ghost\]\/tabs-list\:px-3:is(:where(.group\/tabs-list)[data-variant="pill-ghost"] *) {
+    padding-inline: var(--spacing-3);
+  }
+
+  .group-data-\[variant\=pill-ghost\]\/tabs-list\:py-1:is(:where(.group\/tabs-list)[data-variant="pill-ghost"] *) {
+    padding-block: var(--spacing-1);
+  }
+
   .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
     cursor: not-allowed;
   }
@@ -4796,10 +4886,6 @@
       color: var(--color-accent1);
     }
 
-    .hover\:text-accent2:hover {
-      color: var(--color-accent2);
-    }
-
     .hover\:text-neutral4:hover {
       color: var(--color-neutral4);
     }
@@ -5041,6 +5127,10 @@
     scale: .99;
   }
 
+  .active\:bg-surface3:active {
+    background-color: var(--color-surface3);
+  }
+
   .active\:bg-surface4:active {
     background-color: var(--color-surface4);
   }
@@ -5111,6 +5201,39 @@
     align-content: flex-start;
   }
 
+  .has-\[\:disabled\]\:cursor-not-allowed:has(:disabled) {
+    cursor: not-allowed;
+  }
+
+  .has-\[\:disabled\]\:opacity-50:has(:disabled) {
+    opacity: .5;
+  }
+
+  .has-\[\[aria-invalid\=true\]\]\:border-error:has([aria-invalid="true"]) {
+    border-color: var(--color-error);
+  }
+
+  .has-\[\[aria-invalid\=true\]\]\:focus-within\:shadow-glow-accent2:has([aria-invalid="true"]):focus-within {
+    --tw-shadow: 0 0 20px var(--tw-shadow-color, oklch(63.7% .237 25.331 / .25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .has-\[\[aria-invalid\=true\]\]\:focus-within\:ring-error:has([aria-invalid="true"]):focus-within {
+    --tw-ring-color: var(--color-error);
+  }
+
+  .has-\[\>\[data-align\=block-end\]\]\:flex-col:has( > [data-align="block-end"]), .has-\[\>\[data-align\=block-start\]\]\:flex-col:has( > [data-align="block-start"]) {
+    flex-direction: column;
+  }
+
+  .has-\[\>button\]\:pr-1:has( > button) {
+    padding-right: var(--spacing-1);
+  }
+
+  .has-\[\>button\]\:pl-1:has( > button) {
+    padding-left: var(--spacing-1);
+  }
+
   .aria-selected\:bg-surface5[aria-selected="true"], .aria-selected\:bg-surface5\/50[aria-selected="true"] {
     background-color: var(--color-surface5);
   }
@@ -5175,6 +5298,10 @@
     opacity: 0;
   }
 
+  .data-\[active\]\:text-neutral5[data-active] {
+    color: var(--color-neutral5);
+  }
+
   .data-\[disabled\]\:cursor-not-allowed[data-disabled] {
     cursor: not-allowed;
   }
@@ -5205,6 +5332,10 @@
     color: var(--color-neutral6);
   }
 
+  .data-\[hovering\]\:opacity-100[data-hovering] {
+    opacity: 1;
+  }
+
   .data-\[overflow-x-end\]\:mask-r-from-\[calc\(100\%-2rem\)\][data-overflow-x-end] {
     -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);
@@ -5269,6 +5400,15 @@
     color: var(--color-neutral6);
   }
 
+  .data-\[scrolling\]\:opacity-100[data-scrolling] {
+    opacity: 1;
+  }
+
+  .data-\[scrolling\]\:duration-0[data-scrolling] {
+    --tw-duration: 0s;
+    transition-duration: 0s;
+  }
+
   .data-\[selected\=true\]\:bg-surface4[data-selected="true"] {
     background-color: var(--color-surface4);
   }
@@ -5313,14 +5453,6 @@
     --tw-enter-translate-y: calc(1*var(--spacing));
   }
 
-  .data-\[state\=active\]\:border-neutral3[data-state="active"] {
-    border-color: var(--color-neutral3);
-  }
-
-  .data-\[state\=active\]\:text-neutral5[data-state="active"] {
-    color: var(--color-neutral5);
-  }
-
   .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
     --tw-translate-x: var(--spacing-4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -5458,10 +5590,6 @@
     background-color: var(--color-neutral2);
   }
 
-  .data-\[state\=visible\]\:opacity-100[data-state="visible"] {
-    opacity: 1;
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .motion-reduce\:transition-none {
       transition-property: none;
@@ -5942,6 +6070,11 @@
     }
   }
 
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+  }
+
   .\[\&\.selected-row\]\:border.selected-row {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -6168,9 +6301,17 @@
     border-bottom-color: #0000;
   }
 
-  .\[\&\>\*\:not\(\:first-child\)\]\:-ml-px > :not(:first-child) {
-    margin-left: -1px;
-    margin-left: calc(var(--spacing-px) * -1);
+  .\[\&\>\*\:focus-visible\]\:relative > :focus-visible {
+    position: relative;
+  }
+
+  .\[\&\>\*\:focus-visible\]\:z-10 > :focus-visible {
+    z-index: 10;
+  }
+
+  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none > :not(:first-child) {
+    border-top-left-radius: var(--radius-none);
+    border-top-right-radius: var(--radius-none);
   }
 
   .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none > :not(:first-child) {
@@ -6183,6 +6324,21 @@
     border-bottom-right-radius: var(--radius-none);
   }
 
+  .\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none > :not(:last-child) {
+    border-bottom-right-radius: var(--radius-none);
+    border-bottom-left-radius: var(--radius-none);
+  }
+
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\:first-child\)\]\:-mt-px > :not([data-slot="buttons-group-separator"]):not(:first-child) {
+    margin-top: -1px;
+    margin-top: calc(var(--spacing-px) * -1);
+  }
+
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\:first-child\)\]\:-ml-px > :not([data-slot="buttons-group-separator"]):not(:first-child) {
+    margin-left: -1px;
+    margin-left: calc(var(--spacing-px) * -1);
+  }
+
   .\[\&\>\.absolute\]\:hidden > .absolute {
     display: none;
   }
@@ -6195,6 +6351,40 @@
     flex: 1;
   }
 
+  .\[\&\>\:first-child\]\:rounded-t-xl > :first-child {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
+
+  .\[\&\>\:last-child\]\:rounded-b-xl > :last-child {
+    border-bottom-right-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+  }
+
+  .has-\[\>\[data-align\=block-end\]\]\:\[\&\>\[data-slot\=input-group-control\]\]\:w-full:has( > [data-align="block-end"]) > [data-slot="input-group-control"] {
+    width: 100%;
+  }
+
+  .has-\[\>\[data-align\=block-end\]\]\:\[\&\>\[data-slot\=input-group-control\]\]\:flex-none:has( > [data-align="block-end"]) > [data-slot="input-group-control"] {
+    flex: none;
+  }
+
+  .has-\[\>\[data-align\=block-start\]\]\:\[\&\>\[data-slot\=input-group-control\]\]\:w-full:has( > [data-align="block-start"]) > [data-slot="input-group-control"] {
+    width: 100%;
+  }
+
+  .has-\[\>\[data-align\=block-start\]\]\:\[\&\>\[data-slot\=input-group-control\]\]\:flex-none:has( > [data-align="block-start"]) > [data-slot="input-group-control"] {
+    flex: none;
+  }
+
+  .has-\[\>\[data-align\=inline-end\]\]\:\[\&\>\[data-slot\=input-group-control\]\]\:pr-0:has( > [data-align="inline-end"]) > [data-slot="input-group-control"] {
+    padding-right: var(--spacing-0);
+  }
+
+  .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>\[data-slot\=input-group-control\]\]\:pl-0:has( > [data-align="inline-start"]) > [data-slot="input-group-control"] {
+    padding-left: var(--spacing-0);
+  }
+
   .\[\&\>a\]\:flex > a {
     display: flex;
   }
@@ -6356,10 +6546,6 @@
     color: var(--color-neutral5);
   }
 
-  .\[\&\>div\]\:block\! > div {
-    display: block !important;
-  }
-
   .\[\&\>label\]\:absolute > label {
     position: absolute;
   }
@@ -6630,6 +6816,11 @@
     opacity: 1;
   }
 
+  .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 > svg:not([class*="size-"]) {
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+  }
+
   .\[\&\>tbody\>tr\]\:h-table-row > tbody > tr {
     height: var(--height-table-row);
   }