@mastra/playground-ui 33.0.0-alpha.4 → 34.0.0

package/dist/index.css

@@ -1451,6 +1451,10 @@
     max-height: 80vh;
   }
 
+  .max-h-\[320px\] {
+    max-height: 320px;
+  }
+
   .max-h-\[360px\] {
     max-height: 360px;
   }
@@ -2719,6 +2723,11 @@
     border-bottom-right-radius: var(--radius-xl);
   }
 
+  .rounded-b-md {
+    border-bottom-right-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+
   .rounded-b-xl {
     border-bottom-right-radius: var(--radius-xl);
     border-bottom-left-radius: var(--radius-xl);
@@ -3219,6 +3228,26 @@
     }
   }
 
+  .bg-notice-destructive, .bg-notice-destructive\/10 {
+    background-color: var(--color-notice-destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-notice-destructive\/10 {
+      background-color: color-mix(in oklab, var(--color-notice-destructive) 10%, transparent);
+    }
+  }
+
+  .bg-notice-destructive\/10\! {
+    background-color: var(--color-notice-destructive) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-notice-destructive\/10\! {
+      background-color: color-mix(in oklab, var(--color-notice-destructive) 10%, transparent) !important;
+    }
+  }
+
   .bg-notice-destructive\/20 {
     background-color: var(--color-notice-destructive);
   }
@@ -3419,7 +3448,15 @@
     }
   }
 
-  .bg-surface4, .bg-surface4\/40 {
+  .bg-surface4 {
+    background-color: var(--color-surface4);
+  }
+
+  .bg-surface4\! {
+    background-color: var(--color-surface4) !important;
+  }
+
+  .bg-surface4\/40 {
     background-color: var(--color-surface4);
   }
 
@@ -5509,6 +5546,16 @@
       }
     }
 
+    .hover\:bg-notice-destructive\/15\!:hover {
+      background-color: var(--color-notice-destructive) !important;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-notice-destructive\/15\!:hover {
+        background-color: color-mix(in oklab, var(--color-notice-destructive) 15%, transparent) !important;
+      }
+    }
+
     .hover\:bg-sidebar-nav-active:hover {
       background-color: var(--sidebar-nav-active);
     }
@@ -7047,6 +7094,111 @@
     flex: 1;
   }
 
+  .\[\&_\.data-list-row\]\:mx-0 .data-list-row {
+    margin-inline: var(--spacing-0);
+  }
+
+  .\[\&_\.data-list-row\]\:my-0 .data-list-row {
+    margin-block: var(--spacing-0);
+  }
+
+  .\[\&_\.data-list-row\]\:rounded-md .data-list-row {
+    border-radius: var(--radius-md);
+  }
+
+  .\[\&_\.data-list-row\]\:after\:hidden .data-list-row:after {
+    content: var(--tw-content);
+    display: none;
+  }
+
+  .\[\&_\.data-list-row\]\:even\:bg-surface-overlay-soft .data-list-row:nth-child(2n) {
+    background-color: var(--color-surface-overlay-soft);
+  }
+
+  @media (hover: hover) {
+    .\[\&_\.data-list-row\]\:hover\:bg-surface-overlay-strong\! .data-list-row:hover {
+      background-color: var(--color-surface-overlay-strong) !important;
+    }
+  }
+
+  .\[\&_\.data-list-row\]\:focus-visible\:bg-surface-overlay-strong\! .data-list-row:focus-visible {
+    background-color: var(--color-surface-overlay-strong) !important;
+  }
+
+  .\[\&_\.data-list-top\]\:mx-0 .data-list-top {
+    margin-inline: var(--spacing-0);
+  }
+
+  .\[\&_\.data-list-top\]\:rounded-t-xl .data-list-top {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
+
+  .\[\&_\.data-list-top\]\:rounded-b-md .data-list-top {
+    border-bottom-right-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+
+  .\[\&_\.data-list-top\]\:bg-surface4 .data-list-top {
+    background-color: var(--color-surface4);
+  }
+
+  .\[\&_\.data-list-top\]\:after\:hidden .data-list-top:after {
+    content: var(--tw-content);
+    display: none;
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:relative .data-list-top > :not(:first-child) {
+    position: relative;
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:overflow-visible .data-list-top > :not(:first-child) {
+    overflow: visible;
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:absolute .data-list-top > :not(:first-child):before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:top-1\/2 .data-list-top > :not(:first-child):before {
+    content: var(--tw-content);
+    top: 50%;
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:-left-4 .data-list-top > :not(:first-child):before {
+    content: var(--tw-content);
+    left: calc(var(--spacing-4) * -1);
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:h-4 .data-list-top > :not(:first-child):before {
+    content: var(--tw-content);
+    height: var(--spacing-4);
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:w-px .data-list-top > :not(:first-child):before {
+    content: var(--tw-content);
+    content: var(--tw-content);
+    width: 1px;
+    width: var(--spacing-px);
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:-translate-y-1\/2 .data-list-top > :not(:first-child):before {
+    content: var(--tw-content);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:bg-border2 .data-list-top > :not(:first-child):before {
+    content: var(--tw-content);
+    background-color: var(--color-border2);
+  }
+
+  .\[\&_\.data-list-top\>\*\:not\(\:first-child\)\]\:before\:content-\[\"\"\] .data-list-top > :not(:first-child):before {
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+
   .\[\&_\[cmdk-group-heading\]\]\:text-ui-xs [cmdk-group-heading] {
     font-size: var(--text-ui-xs);
   }

package/dist/index.es.js

@@ -48,7 +48,7 @@ export { H as HoverPopover, P as Popover, a as PopoverContent, b as PopoverTrigg
 import { b as PropertyFilterApplied, a as PropertyFilterActions } from './property-filter-creator-CnuA0Otn.js';
 export { P as PickMultiPanel, c as PropertyFilterCreator } from './property-filter-creator-CnuA0Otn.js';
 export { R as RadioGroup, a as RadioGroupItem } from './radio-group-DIbajvIk.js';
-export { S as ScrollArea, a as ScrollBar, u as useAutoscroll } from './scroll-area-BCZiAvhR.js';
+export { S as ScrollArea, a as ScrollBar, u as useAutoscroll } from './scroll-area-BtDqmqBK.js';
 export { P as PendingIndicator } from './pending-indicator-DmowRHLo.js';
 export { S as Searchbar, a as SearchbarWrapper } from './searchbar-HmTfVgXd.js';
 import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-D2w0zRz4.js';
@@ -73,8 +73,8 @@ export { D as DateTimePicker, a as DateTimePickerContent, b as DefaultTrigger }
 export { D as DatePicker, T as TimePicker } from './time-picker-BtJz6IU2.js';
 export { AddField, Field, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, JSONSchemaForm, NestedFields, Root, createField, fieldsToJSONSchema, jsonSchemaToFields, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext } from './components/JSONSchemaForm.es.js';
 export { K as KeyValueList } from './key-value-list-BFGuMFbL.js';
-import { R as ResizeHandleIndicator } from './main-sidebar-0q7MXh2j.js';
-export { M as MainSidebar, a as MainSidebarMobileTrigger, b as MainSidebarProvider, c as MainSidebarTrigger, g as getIsLinkActive, n as navItemClasses, u as useMainSidebar, d as useMaybeSidebar } from './main-sidebar-0q7MXh2j.js';
+import { R as ResizeHandleIndicator } from './main-sidebar-Bk2U9O57.js';
+export { M as MainSidebar, a as MainSidebarMobileTrigger, b as MainSidebarProvider, c as MainSidebarTrigger, g as getIsLinkActive, n as navItemClasses, u as useMainSidebar, d as useMaybeSidebar } from './main-sidebar-Bk2U9O57.js';
 export { P as PageHeader } from './page-header-BS_LNnKw.js';
 export { S as Section, a as SectionRoot, b as SubSectionRoot } from './section-BUngbrvn.js';
 export { C as CardHeading, S as SectionCard } from './section-card-BMArnkcD.js';
@@ -91,10 +91,10 @@ export { C as Chip } from './chip-Dgrpa03p.js';
 export { C as ChipsGroup } from './chips-group-DgaAmiHe.js';
 export { T as Tree } from './tree-D04KhP5w.js';
 export { S as SelectDataFilter } from './select-data-filter-BFGZYkQ_.js';
-import { T as TracesDataList } from './traces-data-list-Dru2XnRN.js';
-export { D as DataList, S as ScoresDataList } from './traces-data-list-Dru2XnRN.js';
-import { W as WorkflowIcon, A as AgentIcon, D as DataListSkeleton } from './data-list-skeleton-C9Ncz3jM.js';
-import { T as ToolsIcon, L as LogsDataList } from './logs-data-list-B0Y5AHWL.js';
+import { T as TracesDataList } from './traces-data-list-JWUFbWnS.js';
+export { D as DataList, S as ScoresDataList } from './traces-data-list-JWUFbWnS.js';
+import { W as WorkflowIcon, A as AgentIcon, D as DataListSkeleton } from './data-list-skeleton-B3bHGBlU.js';
+import { T as ToolsIcon, L as LogsDataList } from './logs-data-list-Be970xP6.js';
 export { N as NoDataPageLayout, P as PageLayout } from './no-data-page-layout-CZzEj0NE.js';
 export { P as PageHeadingContext, u as usePageHeading } from './page-heading-context-D3yjYoJE.js';
 export { L as ListSearch } from './list-search-Dk2A1fUf.js';
@@ -106,8 +106,8 @@ import { DataDetailsPanel } from './components/DataDetailsPanel.es.js';
 import { D as DataKeysAndValues } from './data-keys-and-values-BSeQG7jb.js';
 import { D as DataPanel } from './data-panel-CaS60apX.js';
 import { D as DateTimeRangePicker } from './date-time-range-picker-iMvwOfiZ.js';
-import { H as HorizontalBars } from './horizontal-bars-B43f5B_S.js';
-import { M as MetricsDataTable } from './metrics-data-table-Dds2TkvE.js';
+import { H as HorizontalBars } from './horizontal-bars-DjLETHvH.js';
+import { M as MetricsDataTable } from './metrics-data-table-DryqJWoI.js';
 import { M as MetricsLineChart } from './metrics-line-chart-BUUqDQPW.js';
 export { a as MetricsLineChartTooltip } from './metrics-line-chart-BUUqDQPW.js';
 export { S as ScrollableContainer } from './scrollable-container-BqOFHwdb.js';
@@ -6385,7 +6385,7 @@ function TracesListView({
   const totalSize = virtualizer.getTotalSize();
   const paddingTop = virtualItems[0]?.start ?? 0;
   const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;
-  return /* @__PURE__ */ jsxs(TracesDataList, { columns: COLUMNS$1, scrollRef, className: "min-w-0", children: [
+  return /* @__PURE__ */ jsxs(TracesDataList, { columns: COLUMNS$1, variant: "striped", scrollRef, className: "min-w-0", children: [
     /* @__PURE__ */ jsxs(TracesDataList.Top, { children: [
       /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Date" }),
       /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Time" }),
@@ -7592,7 +7592,7 @@ function LogsListView({
   const totalSize = virtualizer.getTotalSize();
   const paddingTop = virtualItems[0]?.start ?? 0;
   const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;
-  return /* @__PURE__ */ jsxs(LogsDataList, { columns: COLUMNS, scrollRef, className: "min-w-0", children: [
+  return /* @__PURE__ */ jsxs(LogsDataList, { columns: COLUMNS, variant: "striped", scrollRef, className: "min-w-0", children: [
     /* @__PURE__ */ jsxs(LogsDataList.Top, { children: [
       /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Date" }),
       /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Time" }),
@@ -7616,6 +7616,7 @@ function LogsListView({
             "data-index": vi.index,
             onClick: () => onLogClick(log),
             featured: isFeatured,
+            variant: log.level === "error" || log.level === "fatal" ? "error" : "default",
             children: [
               /* @__PURE__ */ jsx(LogsDataList.DateCell, { timestamp: log.timestamp }),
               /* @__PURE__ */ jsx(LogsDataList.TimeCell, { timestamp: log.timestamp }),