@mastra/playground-ui 58.0.0 → 58.1.0-alpha.0

package/dist/src/ds/components/ai/task-list/task-graph-node.d.ts

@@ -0,0 +1,8 @@
+import { TaskItem } from '@mastra/core/signals';
+type TaskStatus = TaskItem['status'];
+export declare const TASK_ROW_HEIGHT = 28;
+export declare const TASK_GRAPH_MOTION_MS = 600;
+export declare const taskGraphMotion = "duration-[600ms] ease-(--resize-ease) motion-reduce:transition-none";
+export declare const taskGraphNodeClass = "absolute top-1/2 left-0.5 -translate-y-1/2 transition-[translate]";
+export declare const taskGraphLaneShift: Record<TaskStatus, string>;
+export {};

package/dist/src/ds/components/ai/task-list/task-graph.d.ts

@@ -0,0 +1,8 @@
+import { TaskItem } from '@mastra/core/signals';
+type TaskStatus = TaskItem['status'];
+interface TaskGraphLinesProps {
+    statuses: TaskStatus[];
+    singleLane?: boolean;
+}
+export declare const TaskGraphLines: ({ statuses, singleLane }: TaskGraphLinesProps) => import("react").JSX.Element;
+export {};

package/dist/src/ds/components/ai/task-list/task-list.d.ts

@@ -1,9 +1,7 @@
 import { TaskItem } from '@mastra/core/signals';
-import { ComponentProps, ReactNode } from 'react';
-import { CollapsibleTrigger } from '../../Collapsible';
+import { ComponentProps } from 'react';
 export type TaskListItem = TaskItem;
 export declare const TaskListContainer: ({ className, ...props }: ComponentProps<"section">) => import("react").JSX.Element;
-export declare const TaskListHeader: ({ className, ...props }: ComponentProps<typeof CollapsibleTrigger>) => import("react").JSX.Element;
 export interface TaskListProgressProps extends Omit<ComponentProps<'span'>, 'children'> {
     tasks: TaskListItem[];
 }
@@ -15,13 +13,11 @@ export declare const TaskListStatusIcon: ({ status, className, ...props }: TaskL
 export interface TaskListRowProps extends ComponentProps<'li'> {
     task: TaskListItem;
 }
-export declare const TaskListRow: ({ task, className, ...props }: TaskListRowProps) => import("react").JSX.Element;
-export interface TaskListProps extends Omit<ComponentProps<typeof TaskListContainer>, 'children' | 'title'> {
+export declare const TaskListRow: ({ task, className, style, ...props }: TaskListRowProps) => import("react").JSX.Element;
+export interface TaskListProps extends Omit<ComponentProps<typeof TaskListContainer>, 'children'> {
     tasks: TaskListItem[];
-    title?: ReactNode;
-    hideWhenEmpty?: boolean;
     hideWhenComplete?: boolean;
     scrollActiveIntoView?: boolean;
     defaultOpen?: boolean;
 }
-export declare const TaskList: ({ tasks, title, hideWhenEmpty, hideWhenComplete, scrollActiveIntoView, defaultOpen, ...props }: TaskListProps) => import("react").JSX.Element | null;
+export declare const TaskList: ({ tasks, hideWhenComplete, scrollActiveIntoView, defaultOpen, className, ...props }: TaskListProps) => import("react").JSX.Element | null;

package/dist/src/ds/components/ai/task-list/task-list.stories.d.ts

@@ -7,5 +7,5 @@ export declare const MixedProgress: Story;
 export declare const OneActiveTask: Story;
 export declare const Collapsed: Story;
 export declare const LongList: Story;
-export declare const Empty: Story;
 export declare const Completed: Story;
+export declare const Live: Story;

package/dist/src/ds/components/ai/task-list/use-focused-row-scroll.d.ts

@@ -0,0 +1,12 @@
+export declare const taskWindowHeight: (rowCount: number, open: boolean) => number;
+interface FocusedRowScrollOptions {
+    focusIndex: number;
+    rowCount: number;
+    open: boolean;
+    followFocus: boolean;
+}
+export declare const useFocusedRowScroll: ({ focusIndex, rowCount, open, followFocus }: FocusedRowScrollOptions) => {
+    viewportRef: import('react').RefObject<HTMLDivElement | null>;
+    glideForOpen: (nextOpen: boolean) => void;
+};
+export {};

package/dist/src/ds/new/layout/page-header/page-header.stories.d.ts

@@ -64,6 +64,7 @@ export declare const Default: Story;
 export declare const AllSlots: Story;
 export declare const MetaBeside: Story;
 export declare const MetaBoth: Story;
+export declare const MetaText: Story;
 export declare const IconOnly: Story;
 export declare const TitleOnly: Story;
 export declare const MetaOnly: Story;

package/dist/style.css

@@ -2037,6 +2037,11 @@
     height: 1.125rem;
   }
 
+  .size-\[7px\] {
+    width: 7px;
+    height: 7px;
+  }
+
   .size-control-md {
     width: var(--spacing-control-md);
     height: var(--spacing-control-md);
@@ -3409,6 +3414,16 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .translate-x-4 {
+    --tw-translate-x: calc(var(--spacing) * 4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3424,8 +3439,13 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .-translate-y-px {
-    --tw-translate-y: -1px;
+  .translate-y-0 {
+    --tw-translate-y: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-1 {
+    --tw-translate-y: var(--spacing);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
@@ -3600,6 +3620,10 @@
     grid-template-columns: 0 repeat(9, 1fr);
   }
 
+  .grid-cols-\[0fr\] {
+    grid-template-columns: 0fr;
+  }
+
   .grid-cols-\[0px_1fr_0fr\] {
     grid-template-columns: 0 1fr 0fr;
   }
@@ -3608,6 +3632,10 @@
     grid-template-columns: 0 1fr 1fr;
   }
 
+  .grid-cols-\[1fr\] {
+    grid-template-columns: 1fr;
+  }
+
   .grid-cols-\[1fr_2fr\] {
     grid-template-columns: 1fr 2fr;
   }
@@ -3744,10 +3772,6 @@
     grid-template-rows: 1fr auto;
   }
 
-  .grid-rows-\[4rem_1fr\] {
-    grid-template-rows: 4rem 1fr;
-  }
-
   .grid-rows-\[auto_1fr\] {
     grid-template-rows: auto 1fr;
   }
@@ -4106,6 +4130,10 @@
     overflow: hidden;
   }
 
+  .overflow-hidden\! {
+    overflow: hidden !important;
+  }
+
   .overflow-visible {
     overflow: visible;
   }
@@ -4294,6 +4322,11 @@
     border-width: 2px;
   }
 
+  .border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
+
   .border-x {
     border-inline-style: var(--tw-border-style);
     border-inline-width: 1px;
@@ -4378,6 +4411,10 @@
     border-color: var(--color-accent3);
   }
 
+  .border-accent6 {
+    border-color: var(--color-accent6);
+  }
+
   .border-background {
     border-color: var(--background);
   }
@@ -4518,6 +4555,16 @@
     }
   }
 
+  .border-muted-foreground\/45 {
+    border-color: var(--muted-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-muted-foreground\/45 {
+      border-color: color-mix(in oklab, var(--muted-foreground) 45%, transparent);
+    }
+  }
+
   .border-notice-destructive\/20 {
     border-color: var(--color-notice-destructive);
   }
@@ -4778,6 +4825,16 @@
     background-color: var(--color-accent3Dark);
   }
 
+  .bg-accent6\/25 {
+    background-color: var(--color-accent6);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-accent6\/25 {
+      background-color: color-mix(in oklab, var(--color-accent6) 25%, transparent);
+    }
+  }
+
   .bg-accent6Dark {
     background-color: var(--color-accent6Dark);
   }
@@ -5482,6 +5539,20 @@
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
+  .bg-linear-to-r {
+    --tw-gradient-position: to right;
+  }
+
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    .bg-linear-to-r {
+      --tw-gradient-position: to right in oklab;
+    }
+  }
+
+  .bg-linear-to-r {
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
   .bg-linear-to-t {
     --tw-gradient-position: to top;
   }
@@ -5496,6 +5567,15 @@
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
+  .bg-\[linear-gradient\(currentColor\,currentColor\)\] {
+    background-image: linear-gradient(currentColor, currentColor);
+  }
+
+  .from-accent6 {
+    --tw-gradient-from: var(--color-accent6);
+    --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-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));
@@ -5536,11 +5616,29 @@
     --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));
+  }
+
+  .to-foreground {
+    --tw-gradient-to: var(--foreground);
+    --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));
+  }
+
   .to-transparent {
     --tw-gradient-to: 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));
   }
 
+  .to-30\% {
+    --tw-gradient-to-position: 30%;
+  }
+
+  .to-\[1\.5rem\] {
+    --tw-gradient-to-position: 1.5rem;
+  }
+
   .mask-r-from-\[calc\(100\%-min\(100\%\,160px\)\)\] {
     -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);
@@ -5577,6 +5675,70 @@
     mask-composite: intersect;
   }
 
+  .\[mask-image\:linear-gradient\(black\,black\)\,linear-gradient\(to_bottom\,black_40\%\,transparent\)\,linear-gradient\(to_top\,black_40\%\,transparent\)\] {
+    -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000 40%, #0000), linear-gradient(to top, #000 40%, #0000);
+    mask-image: linear-gradient(#000, #000), linear-gradient(#000 40%, #0000), linear-gradient(to top, #000 40%, #0000);
+  }
+
+  .bg-size-\[0\%_1px\] {
+    background-size: 0% 1px;
+  }
+
+  .bg-size-\[100\%_1px\] {
+    background-size: 100% 1px;
+  }
+
+  .bg-size-\[200\%_100\%\] {
+    background-size: 200% 100%;
+  }
+
+  .bg-clip-text {
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  .bg-position-\[0\%_0\] {
+    background-position: 0 0;
+  }
+
+  .bg-position-\[100\%_0\] {
+    background-position: 100% 0;
+  }
+
+  .bg-position-\[left_55\%\] {
+    background-position: 0 55%;
+  }
+
+  .bg-position-\[right_55\%\] {
+    background-position: right 55%;
+  }
+
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .\[mask-composite\:subtract\,add\] {
+    -webkit-mask-composite: source-out, source-over;
+    -webkit-mask-composite: source-out, source-over;
+    mask-composite: subtract, add;
+  }
+
+  .\[mask-size\:100\%_100\%\,100\%_var\(--fade-top\)\,100\%_var\(--fade-bottom\)\] {
+    -webkit-mask-size: 100% 100%,100% var(--fade-top),100% var(--fade-bottom);
+    -webkit-mask-size: 100% 100%,100% var(--fade-top),100% var(--fade-bottom);
+    mask-size: 100% 100%,100% var(--fade-top),100% var(--fade-bottom);
+  }
+
+  .\[mask-position\:0_0\,0_0\,0_100\%\] {
+    -webkit-mask-position: 0 0, 0 0, 0 100%;
+    mask-position: 0 0, 0 0, 0 100%;
+  }
+
+  .mask-no-repeat {
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .fill-card {
     fill: var(--card);
   }
@@ -6925,6 +7087,11 @@
     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, );
   }
 
+  .blur-\[2px\] {
+    --tw-blur: blur(2px);
+    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, );
+  }
+
   .blur-none {
     --tw-blur:  ;
     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, );
@@ -6997,6 +7164,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[background-size\] {
+    transition-property: background-size;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[border-color\,background-color\,box-shadow\] {
     transition-property: border-color, background-color, box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -7027,6 +7200,24 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[d\,stroke-dashoffset\,stroke\] {
+    transition-property: d, stroke-dashoffset, stroke;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-\[d\] {
+    transition-property: d;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-\[grid-template-columns\,opacity\] {
+    transition-property: grid-template-columns, opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[grid-template-columns\] {
     transition-property: grid-template-columns;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -7063,12 +7254,24 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[max-height\,mask-size\] {
+    transition-property: max-height, -webkit-mask-size, mask-size;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[min-height\] {
     transition-property: min-height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[opacity\,color\,translate\,filter\] {
+    transition-property: opacity, color, translate, filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[opacity\,filter\,scale\] {
     transition-property: opacity, filter, scale;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -7087,18 +7290,36 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[opacity\,translate\,filter\,background-position\] {
+    transition-property: opacity, translate, filter, background-position;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[opacity\,translate\] {
     transition-property: opacity, translate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[padding-left\] {
+    transition-property: padding-left;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[padding\] {
     transition-property: padding;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[rotate\] {
+    transition-property: rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[stroke-dashoffset\,transform\] {
     transition-property: stroke-dashoffset, transform;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -7123,6 +7344,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[translate\] {
+    transition-property: translate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    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));
@@ -7135,6 +7362,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[width\,height\,border-color\,background-color\] {
+    transition-property: width, height, border-color, background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[width\,transform\] {
     transition-property: width, transform;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -7210,6 +7443,11 @@
     transition-duration: .44s;
   }
 
+  .duration-\[600ms\] {
+    --tw-duration: .6s;
+    transition-duration: .6s;
+  }
+
   .duration-\[1500ms\] {
     --tw-duration: 1.5s;
     transition-duration: 1.5s;
@@ -7227,6 +7465,11 @@
     transition-duration: var(--duration-slow);
   }
 
+  .ease-\(--resize-ease\) {
+    --tw-ease: var(--resize-ease);
+    transition-timing-function: var(--resize-ease);
+  }
+
   .ease-\[cubic-bezier\(0\.2\,0\,0\.2\,1\)\] {
     --tw-ease: cubic-bezier(.2,0,.2,1);
     transition-timing-function: cubic-bezier(.2, 0, .2, 1);
@@ -7348,6 +7591,14 @@
     }
   }
 
+  .\[--fade-bottom\:0\.875rem\] {
+    --fade-bottom: .875rem;
+  }
+
+  .\[--fade-top\:0\.875rem\] {
+    --fade-top: .875rem;
+  }
+
   .\[--field-disabled\:var\(--field-on-surface\)\] {
     --field-disabled: var(--field-on-surface);
   }
@@ -7440,6 +7691,10 @@
     stroke-dashoffset: 28px;
   }
 
+  .\[text-box\:trim-both_cap_alphabetic\] {
+    text-box: trim-both cap alphabetic;
+  }
+
   .fade-out {
     --tw-exit-opacity: 0;
   }
@@ -7464,14 +7719,6 @@
     min-width: 0 !important;
   }
 
-  :is(.\*\:flex-1 > *) {
-    flex: 1;
-  }
-
-  :is(.\*\:basis-\(--metrics-card-group-basis\) > *) {
-    flex-basis: var(--metrics-card-group-basis);
-  }
-
   :is(.\*\:bg-background\! > *) {
     background-color: var(--background) !important;
   }
@@ -7553,6 +7800,10 @@
     .group-hover\/sidebar\:opacity-100:is(:where(.group\/sidebar):hover *) {
       opacity: 1;
     }
+
+    .group-hover\/task-list\:text-foreground:is(:where(.group\/task-list):hover *) {
+      color: var(--foreground);
+    }
   }
 
   .group-focus\:opacity-100:is(:where(.group):focus *) {
@@ -7617,6 +7868,15 @@
     color: var(--muted-foreground);
   }
 
+  .group-data-collapsed\/task-list\:translate-x-0:is(:where(.group\/task-list)[data-collapsed] *) {
+    --tw-translate-x: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .group-data-collapsed\/task-list\:pl-6:is(:where(.group\/task-list)[data-collapsed] *) {
+    padding-left: calc(var(--spacing) * 6);
+  }
+
   .group-data-\[checked\]\/checkbox-indicator\:scale-100:is(:where(.group\/checkbox-indicator)[data-checked] *) {
     --tw-scale-x: 100%;
     --tw-scale-y: 100%;
@@ -9944,6 +10204,10 @@
     mask-composite: intersect;
   }
 
+  .data-\[overflow-y-end\]\:\[--fade-bottom\:2rem\][data-overflow-y-end] {
+    --fade-bottom: 2rem;
+  }
+
   .data-\[overflow-y-start\]\:mask-t-from-\[calc\(100\%-2rem\)\][data-overflow-y-start] {
     -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);
@@ -9956,6 +10220,10 @@
     mask-composite: intersect;
   }
 
+  .data-\[overflow-y-start\]\:\[--fade-top\:2rem\][data-overflow-y-start] {
+    --fade-top: 2rem;
+  }
+
   .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
     color: var(--muted-foreground);
   }
@@ -10751,6 +11019,10 @@
       --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;
+    }
   }
 
   @media (min-width: 80rem) {
@@ -10887,6 +11159,20 @@
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
+  .dark\:from-\[color-mix\(in_oklab\,var\(--accent6\)_60\%\,var\(--foreground\)\)\]:is(.dark *) {
+    --tw-gradient-from: var(--accent6);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:from-\[color-mix\(in_oklab\,var\(--accent6\)_60\%\,var\(--foreground\)\)\]:is(.dark *) {
+      --tw-gradient-from: color-mix(in oklab,var(--accent6) 60%,var(--foreground));
+    }
+  }
+
+  .dark\:from-\[color-mix\(in_oklab\,var\(--accent6\)_60\%\,var\(--foreground\)\)\]:is(.dark *) {
+    --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));
+  }
+
   .dark\:from-white\/3:is(.dark *) {
     --tw-gradient-from: #ffffff08;
   }
@@ -11690,6 +11976,10 @@
     display: none;
   }
 
+  .\[\&\>\:first-child\]\:w-auto > :first-child {
+    width: auto;
+  }
+
   .\[\&\>\:first-child\]\:min-w-0 > :first-child {
     min-width: 0;
   }

package/dist/{traces-data-list-Dvi0s56v.js → traces-data-list-B5MkMMBi.js}

@@ -3,7 +3,7 @@ import { c as DataListCell, e as DataListTextCell, j as DataListCreatedCell, k a
 import { D as DataListNextPageLoading, b as DataListSpacer, a as DataListNoMatch, d as DataListRowButton, f as DataListSortableTopCell } from './data-list-spacer-BmorAN0V.js';
 import { a as DataListSubHeading, b as DataListSubheader } from './data-list-DisTjDHP.js';
 import { RouteIcon, DatabaseIcon, ListTreeIcon, CornerDownRightIcon } from 'lucide-react';
-import { B as Badge } from './Badge-TD55_qZJ.js';
+import { B as Badge } from './Badge-Bzn8Z-_I.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-BrDiP0RI.js';
 import { AgentIcon } from './icons/AgentIcon.es.js';
 import { McpServerIcon } from './icons/McpServerIcon.es.js';
@@ -92,4 +92,4 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
 });
 
 export { TracesDataList as T };
-//# sourceMappingURL=traces-data-list-Dvi0s56v.js.map
+//# sourceMappingURL=traces-data-list-B5MkMMBi.js.map