@mastra/playground-ui 7.0.0-beta.21 → 7.0.0-beta.22

package/dist/index.css

@@ -1,3 +1,18 @@
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 2rem;
+  padding-left: 2rem;
+}
+
+@media (min-width: 1400px) {
+
+  .container {
+    max-width: 1400px;
+  }
+}
+
 :root {
   --aui-background: 0 0% 100%;
   --aui-foreground: 240 10% 3.9%;
@@ -22,6 +37,28 @@
   --aui-thread-max-width: 42rem;
 }
 
+.dark {
+  --aui-background: 0 0% 7%;
+  --aui-foreground: 0 0% 98%;
+  --aui-card: 240 10% 3.9%;
+  --aui-card-foreground: 0 0% 98%;
+  --aui-popover: 240 10% 3.9%;
+  --aui-popover-foreground: 0 0% 98%;
+  --aui-primary: 0 0% 98%;
+  --aui-primary-foreground: 240 5.9% 10%;
+  --aui-secondary: 240 3.7% 15.9%;
+  --aui-secondary-foreground: 0 0% 98%;
+  --aui-muted: 240 3.7% 15.9%;
+  --aui-muted-foreground: 240 5% 64.9%;
+  --aui-accent: 240 3.7% 15.9%;
+  --aui-accent-foreground: 0 0% 98%;
+  --aui-destructive: 0 62.8% 30.6%;
+  --aui-destructive-foreground: 0 0% 98%;
+  --aui-border: 240 3.7% 15.9%;
+  --aui-input: 240 3.7% 15.9%;
+  --aui-ring: 240 4.9% 83.9%;
+}
+
 .aui-root {
   color: hsl(var(--aui-foreground));
 }
@@ -36,7 +73,7 @@
   justify-content: center;
   gap: 0.5rem;
   white-space: nowrap;
-  border-radius: 0.375rem;
+  border-radius: 4px;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
@@ -154,7 +191,7 @@
 .aui-tooltip-content {
   z-index: 50;
   overflow: hidden;
-  border-radius: 0.375rem;
+  border-radius: 4px;
   background-color: hsl(var(--aui-primary));
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -204,7 +241,7 @@
 
 .aui-dialog-overlay {
   position: fixed;
-  inset: 0px;
+  inset: 0rem;
   z-index: 50;
   background-color: rgb(0 0 0 / 0.8);
 }
@@ -320,7 +357,7 @@
 
 .aui-thread-viewport-footer {
   position: sticky;
-  bottom: 0px;
+  bottom: 0rem;
   margin-top: 0.75rem;
   display: flex;
   width: 100%;
@@ -328,8 +365,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
   background-color: inherit;
   padding-bottom: 1rem;
 }
@@ -408,11 +445,11 @@
   display: flex;
   max-width: 24rem;
   flex-grow: 1;
-  flex-basis: 0px;
+  flex-basis: 0rem;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border-radius: 0.5rem;
+  border-radius: 6px;
   border-width: 1px;
   padding: 0.75rem;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
@@ -442,7 +479,7 @@
   width: 100%;
   flex-wrap: wrap;
   align-items: flex-end;
-  border-radius: 0.5rem;
+  border-radius: 6px;
   border-width: 1px;
   background-color: inherit;
   padding-left: 0.625rem;
@@ -555,7 +592,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  border-radius: 0.5rem;
+  border-radius: 6px;
   border-width: 1px;
   padding: 0.25rem;
 }
@@ -586,7 +623,7 @@
 
 .aui-attachment-text {
   flex-grow: 1;
-  flex-basis: 0px;
+  flex-basis: 0rem;
 }
 
 .aui-attachment-name {
@@ -712,7 +749,7 @@
   resize: none;
   background-color: transparent;
   padding: 1rem;
-  padding-bottom: 0px;
+  padding-bottom: 0rem;
   color: hsl(var(--aui-foreground));
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -791,7 +828,7 @@
 
 .aui-assistant-action-bar-root[data-floating] {
   position: absolute;
-  border-radius: 0.375rem;
+  border-radius: 4px;
   border-width: 1px;
   background-color: hsl(var(--aui-background));
   padding: 0.25rem;
@@ -865,7 +902,7 @@
 
 .aui-text-running::after {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --tw-content: '\25CF';
   content: var(--tw-content);
 }
@@ -889,7 +926,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  border-radius: 0.5rem;
+  border-radius: 6px;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -918,7 +955,7 @@
   align-items: center;
   justify-content: flex-start;
   gap: 0.25rem;
-  border-radius: 0.5rem;
+  border-radius: 6px;
   padding-left: 0.625rem;
   padding-right: 0.625rem;
   padding-top: 0.5rem;
@@ -958,7 +995,7 @@
   margin-right: 0.75rem;
   width: 1rem;
   height: 1rem;
-  padding: 0px;
+  padding: 0rem;
   color: hsl(var(--aui-foreground));
 }
 
@@ -974,7 +1011,7 @@
   border-radius: 0.75rem;
   border-width: 1px;
   background-color: hsl(var(--aui-popover));
-  padding: 0px;
+  padding: 0rem;
   color: hsl(var(--aui-popover-foreground));
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1147,7 +1184,7 @@
   > :where(:is(ol, ul):last-child)
   > :where(li:last-child)::after {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --tw-content: '\25CF';
   content: var(--tw-content);
 }
@@ -1204,7 +1241,7 @@
 }
 
 .aui-md-h1:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0rem;
 }
 
 .aui-md-h2 {
@@ -1218,11 +1255,11 @@
 }
 
 .aui-md-h2:first-child {
-  margin-top: 0px;
+  margin-top: 0rem;
 }
 
 .aui-md-h2:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0rem;
 }
 
 .aui-md-h3 {
@@ -1236,11 +1273,11 @@
 }
 
 .aui-md-h3:first-child {
-  margin-top: 0px;
+  margin-top: 0rem;
 }
 
 .aui-md-h3:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0rem;
 }
 
 .aui-md-h4 {
@@ -1254,11 +1291,11 @@
 }
 
 .aui-md-h4:first-child {
-  margin-top: 0px;
+  margin-top: 0rem;
 }
 
 .aui-md-h4:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0rem;
 }
 
 .aui-md-h5 {
@@ -1270,11 +1307,11 @@
 }
 
 .aui-md-h5:first-child {
-  margin-top: 0px;
+  margin-top: 0rem;
 }
 
 .aui-md-h5:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0rem;
 }
 
 .aui-md-h6 {
@@ -1284,11 +1321,11 @@
 }
 
 .aui-md-h6:first-child {
-  margin-top: 0px;
+  margin-top: 0rem;
 }
 
 .aui-md-h6:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0rem;
 }
 
 .aui-md-p {
@@ -1298,11 +1335,11 @@
 }
 
 .aui-md-p:first-child {
-  margin-top: 0px;
+  margin-top: 0rem;
 }
 
 .aui-md-p:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0rem;
 }
 
 .aui-md-a {
@@ -1351,8 +1388,8 @@
   margin-bottom: 1.25rem;
   width: 100%;
   border-collapse: separate;
-  --tw-border-spacing-x: 0px;
-  --tw-border-spacing-y: 0px;
+  --tw-border-spacing-x: 0rem;
+  --tw-border-spacing-y: 0rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
   overflow-y: auto;
 }
@@ -1368,11 +1405,11 @@
 }
 
 .aui-md-th:first-child {
-  border-top-left-radius: 0.5rem;
+  border-top-left-radius: 6px;
 }
 
 .aui-md-th:last-child {
-  border-top-right-radius: 0.5rem;
+  border-top-right-radius: 6px;
 }
 
 .aui-md-th[align=center] {
@@ -1406,9 +1443,9 @@
 }
 
 .aui-md-tr {
-  margin: 0px;
+  margin: 0rem;
   border-bottom-width: 1px;
-  padding: 0px;
+  padding: 0rem;
 }
 
 .aui-md-tr:first-child {
@@ -1416,11 +1453,11 @@
 }
 
 .aui-md-tr:last-child>td:first-child {
-  border-bottom-left-radius: 0.5rem;
+  border-bottom-left-radius: 6px;
 }
 
 .aui-md-tr:last-child>td:last-child {
-  border-bottom-right-radius: 0.5rem;
+  border-bottom-right-radius: 6px;
 }
 
 .aui-md-sup>a {
@@ -1431,8 +1468,8 @@
 
 .aui-md-pre {
   overflow-x: auto;
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
   padding: 1rem;
@@ -1452,8 +1489,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
   --tw-bg-opacity: 1;
   background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
   padding-left: 1rem;