@mastra/playground-ui 27.0.1 → 27.1.0-alpha.2

package/dist/index.css

@@ -144,6 +144,7 @@
     --color-neutral-500: oklch(55.6% 0 0);
     --color-black: #000;
     --color-white: #fff;
+    --breakpoint-lg: 64rem;
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-2xl: 42rem;
@@ -304,7 +305,7 @@
     --color-notice-note: var(--notice-note);
     --color-notice-note-fg: var(--notice-note-fg);
     --ease-out-custom: cubic-bezier(.33, 1, .68, 1);
-    --shadow-dialog: inset 0 1px 0 0 oklch(100% 0 0 / .04), 0 8px 24px -8px oklch(0% 0 0 / .28), 0 24px 56px -16px oklch(0% 0 0 / .36);
+    --shadow-dialog: 0 8px 24px -8px oklch(0% 0 0 / .28), 0 24px 56px -16px oklch(0% 0 0 / .36);
   }
 }
 
@@ -854,6 +855,10 @@
     margin-inline: var(--spacing-1);
   }
 
+  .mx-3 {
+    margin-inline: var(--spacing-3);
+  }
+
   .mx-4 {
     margin-inline: var(--spacing-4);
   }
@@ -950,6 +955,10 @@
     margin-bottom: var(--spacing-0);
   }
 
+  .mb-0\.5 {
+    margin-bottom: var(--spacing-0_5);
+  }
+
   .mb-1 {
     margin-bottom: var(--spacing-1);
   }
@@ -1066,6 +1075,11 @@
     height: var(--spacing-5);
   }
 
+  .size-7 {
+    width: var(--spacing-7);
+    height: var(--spacing-7);
+  }
+
   .size-9 {
     width: var(--spacing-9);
     height: var(--spacing-9);
@@ -1353,10 +1367,6 @@
     min-height: var(--spacing-9);
   }
 
-  .min-h-11 {
-    min-height: var(--spacing-11);
-  }
-
   .min-h-12 {
     min-height: var(--spacing-12);
   }
@@ -1754,10 +1764,6 @@
     max-width: 50%;
   }
 
-  .max-w-\[55rem\] {
-    max-width: 55rem;
-  }
-
   .max-w-\[62ch\] {
     max-width: 62ch;
   }
@@ -1798,6 +1804,10 @@
     max-width: var(--container-md);
   }
 
+  .max-w-screen-lg {
+    max-width: var(--breakpoint-lg);
+  }
+
   .min-w-\(--anchor-width\) {
     min-width: var(--anchor-width);
   }
@@ -2707,6 +2717,10 @@
     border-color: var(--color-red-900);
   }
 
+  .border-section-card {
+    border-color: var(--section-card-border);
+  }
+
   .border-surface5 {
     border-color: var(--color-surface5);
   }
@@ -3069,6 +3083,18 @@
     }
   }
 
+  .bg-section-card {
+    background-color: var(--section-card-bg);
+  }
+
+  .bg-section-card-header {
+    background-color: var(--section-card-header);
+  }
+
+  .bg-sidebar-nav-active {
+    background-color: var(--sidebar-nav-active);
+  }
+
   .bg-surface1, .bg-surface1\/50 {
     background-color: var(--color-surface1);
   }
@@ -3240,6 +3266,10 @@
     padding-inline: var(--spacing-0);
   }
 
+  .px-0\.5 {
+    padding-inline: var(--spacing-0_5);
+  }
+
   .px-1 {
     padding-inline: var(--spacing-1);
   }
@@ -3850,10 +3880,6 @@
     color: var(--color-green-600);
   }
 
-  .text-neutral-500 {
-    color: var(--color-neutral-500);
-  }
-
   .text-neutral1 {
     color: var(--color-neutral1);
   }
@@ -3862,13 +3888,13 @@
     color: var(--color-neutral2);
   }
 
-  .text-neutral3, .text-neutral3\/75 {
+  .text-neutral3, .text-neutral3\/70 {
     color: var(--color-neutral3);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .text-neutral3\/75 {
-      color: color-mix(in oklab, var(--color-neutral3) 75%, transparent);
+    .text-neutral3\/70 {
+      color: color-mix(in oklab, var(--color-neutral3) 70%, transparent);
     }
   }
 
@@ -4030,7 +4056,7 @@
   }
 
   .shadow-dialog {
-    --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, oklch(100% 0 0 / .04)), 0 8px 24px -8px var(--tw-shadow-color, oklch(0% 0 0 / .28)), 0 24px 56px -16px var(--tw-shadow-color, oklch(0% 0 0 / .36));
+    --tw-shadow: 0 8px 24px -8px var(--tw-shadow-color, oklch(0% 0 0 / .28)), 0 24px 56px -16px var(--tw-shadow-color, oklch(0% 0 0 / .36));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -4079,6 +4105,10 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-dialog {
+    box-shadow: var(--shadow-dialog);
+  }
+
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -4105,6 +4135,12 @@
     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, );
   }
 
+  .drop-shadow {
+    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
+    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
+    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, );
   }
@@ -4460,7 +4496,7 @@
     inset-block: var(--spacing-1);
   }
 
-  .before\:top-1\/2:before, .before\:top-\[50\%\]:before {
+  .before\:top-\[50\%\]:before {
     content: var(--tw-content);
     top: 50%;
   }
@@ -4475,21 +4511,11 @@
     z-index: calc(1 * -1);
   }
 
-  .before\:h-5:before {
-    content: var(--tw-content);
-    height: var(--spacing-5);
-  }
-
   .before\:h-\[0px\]:before {
     content: var(--tw-content);
     height: 0;
   }
 
-  .before\:w-1:before {
-    content: var(--tw-content);
-    width: var(--spacing-1);
-  }
-
   .before\:w-full:before {
     content: var(--tw-content);
     width: 100%;
@@ -4501,12 +4527,6 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .before\:-translate-y-1\/2:before {
-    content: var(--tw-content);
-    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .before\:animate-\[shimmer_2s_infinite\]:before {
     content: var(--tw-content);
     animation: 2s infinite shimmer;
@@ -4517,12 +4537,6 @@
     border-radius: var(--radius-md);
   }
 
-  .before\:rounded-r-full:before {
-    content: var(--tw-content);
-    border-top-right-radius: 3.40282e38px;
-    border-bottom-right-radius: 3.40282e38px;
-  }
-
   .before\:border-b-\[1px\]:before {
     content: var(--tw-content);
     border-bottom-style: var(--tw-border-style);
@@ -4540,11 +4554,6 @@
     border-color: var(--color-neutral3);
   }
 
-  .before\:bg-accent1:before {
-    content: var(--tw-content);
-    background-color: var(--color-accent1);
-  }
-
   .before\:bg-surface4:before {
     content: var(--tw-content);
     background-color: var(--color-surface4);
@@ -4593,13 +4602,6 @@
     --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\:transition-all:before {
-    content: var(--tw-content);
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
   .before\:content-\[\"\"\]:before {
     --tw-content: "";
     content: var(--tw-content);
@@ -4866,6 +4868,24 @@
       }
     }
 
+    .hover\:bg-neutral6\/5:hover {
+      background-color: var(--color-neutral6);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-neutral6\/5:hover {
+        background-color: color-mix(in oklab, var(--color-neutral6) 5%, transparent);
+      }
+    }
+
+    .hover\:bg-sidebar-nav-active:hover {
+      background-color: var(--sidebar-nav-active);
+    }
+
+    .hover\:bg-sidebar-nav-hover:hover {
+      background-color: var(--sidebar-nav-hover);
+    }
+
     .hover\:bg-surface2:hover {
       background-color: var(--color-surface2);
     }
@@ -5127,6 +5147,16 @@
     scale: .99;
   }
 
+  .active\:bg-neutral6\/10:active {
+    background-color: var(--color-neutral6);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .active\:bg-neutral6\/10:active {
+      background-color: color-mix(in oklab, var(--color-neutral6) 10%, transparent);
+    }
+  }
+
   .active\:bg-surface3:active {
     background-color: var(--color-surface3);
   }
@@ -5594,11 +5624,6 @@
     .motion-reduce\:transition-none {
       transition-property: none;
     }
-
-    .motion-reduce\:before\:transition-none:before {
-      content: var(--tw-content);
-      transition-property: none;
-    }
   }
 
   @media (min-width: 1536px) {
@@ -6020,18 +6045,18 @@
     color: var(--color-accent1);
   }
 
-  .\[\&_svg\]\:text-neutral3 svg, .\[\&_svg\]\:text-neutral3\/60 svg {
+  .\[\&_svg\]\:text-neutral3 svg, .\[\&_svg\]\:text-neutral3\/70 svg {
     color: var(--color-neutral3);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .\[\&_svg\]\:text-neutral3\/60 svg {
-      color: color-mix(in oklab, var(--color-neutral3) 60%, transparent);
+    .\[\&_svg\]\:text-neutral3\/70 svg {
+      color: color-mix(in oklab, var(--color-neutral3) 70%, transparent);
     }
   }
 
-  .\[\&_svg\]\:text-neutral5 svg {
-    color: var(--color-neutral5);
+  .\[\&_svg\]\:text-neutral6 svg {
+    color: var(--color-neutral6);
   }
 
   .\[\&_svg\]\:opacity-50 svg {
@@ -6223,8 +6248,12 @@
     color: var(--color-accent1);
   }
 
-  .\[\&\:hover_svg\]\:text-neutral3:hover svg {
-    color: var(--color-neutral3);
+  .\[\&\:hover_svg\]\:text-neutral5:hover svg {
+    color: var(--color-neutral5);
+  }
+
+  .\[\&\:hover_svg\]\:text-neutral6:hover svg {
+    color: var(--color-neutral6);
   }
 
   .dark\:\[\&\:hover_svg\]\:text-black:is(.dark *):hover svg {
@@ -8130,12 +8159,12 @@
   --font-inter: "Inter", sans-serif;
   --tasa-explorer: "TasaExplorer", sans-serif;
   --geist-mono: "GeistMonoVF", monospace;
-  --surface1: oklch(14.1% 0 0);
-  --surface2: oklch(17.9% 0 0);
-  --surface3: oklch(21% 0 0);
-  --surface4: oklch(25.1% 0 0);
-  --surface5: oklch(27.5% 0 0 / .9);
-  --surface6: oklch(34.5% 0 0);
+  --surface1: oklch(0% 0 0);
+  --surface2: oklch(16.84% 0 0);
+  --surface3: oklch(19.13% 0 0);
+  --surface4: oklch(21.78% 0 0);
+  --surface5: oklch(24.35% 0 0 / .9);
+  --surface6: oklch(30.92% 0 0);
   --accent1: oklch(72.3% .219 149.579);
   --accent2: oklch(63.7% .237 25.331);
   --accent3: oklch(62.3% .214 259.815);
@@ -8159,8 +8188,14 @@
   --neutral6: oklch(98.5% 0 0);
   --error: oklch(63.7% .237 25.331);
   --overlay: oklch(0% 0 0 / .75);
-  --border1: oklch(100% 0 0 / .08);
-  --border2: oklch(100% 0 0 / .12);
+  --border1: oklch(100% 0 0 / .06);
+  --border2: oklch(100% 0 0 / .1);
+  --shadow-main-frame: 0 14px 48px -36px oklch(0% 0 0 / .85);
+  --sidebar-nav-hover: oklch(100% 0 0 / .07);
+  --sidebar-nav-active: oklch(100% 0 0 / .11);
+  --section-card-bg: oklch(100% 0 0 / .014);
+  --section-card-header: oklch(100% 0 0 / .035);
+  --section-card-border: oklch(100% 0 0 / .045);
   --text1: var(--neutral6);
   --warning1: var(--accent6);
   --positive1: var(--accent1);
@@ -8178,12 +8213,12 @@
 }
 
 html.light {
-  --surface1: oklch(100% 0 0);
-  --surface2: oklch(98.4% 0 0);
-  --surface3: oklch(96.8% 0 0);
-  --surface4: oklch(92.9% 0 0);
-  --surface5: oklch(92.9% 0 0 / .9);
-  --surface6: oklch(86.9% 0 0);
+  --surface1: oklch(95.6% 0 0);
+  --surface2: oklch(98.5% 0 0);
+  --surface3: oklch(100% 0 0);
+  --surface4: oklch(96.5% 0 0);
+  --surface5: oklch(94.4% 0 0 / .94);
+  --surface6: oklch(89.5% 0 0);
   --accent1: oklch(62.7% .194 149.214);
   --accent2: oklch(57.7% .245 27.325);
   --accent3: oklch(54.6% .245 262.881);
@@ -8207,8 +8242,14 @@ html.light {
   --neutral6: oklch(13% 0 0);
   --error: oklch(57.7% .245 27.325);
   --overlay: oklch(20.8% 0 0 / .45);
-  --border1: oklch(20.8% 0 0 / .12);
-  --border2: oklch(20.8% 0 0 / .2);
+  --border1: oklch(20.8% 0 0 / .1);
+  --border2: oklch(20.8% 0 0 / .16);
+  --shadow-main-frame: 0 1px 2px oklch(24% 0 0 / .04), 0 18px 48px -34px oklch(24% 0 0 / .22);
+  --sidebar-nav-hover: oklch(20.8% 0 0 / .055);
+  --sidebar-nav-active: oklch(20.8% 0 0 / .085);
+  --section-card-bg: oklch(20.8% 0 0 / .014);
+  --section-card-header: oklch(20.8% 0 0 / .035);
+  --section-card-border: oklch(20.8% 0 0 / .06);
   --text1: var(--neutral6);
   --warning1: var(--accent6);
   --positive1: var(--accent1);