@mastra/playground-ui 52.0.0 → 53.0.0-alpha.1

package/dist/src/ds/components/DataList/data-list-root.d.ts

@@ -1,13 +1,5 @@
 import { ReactNode, RefObject } from 'react';
 import { ScrollAreaMask, ScrollAreaProps } from '../ScrollArea/scroll-area';
-/**
- * Visual treatment for the whole list.
- *
- * Both are borderless and full-bleed, with a contrasting sticky header band and
- * no row separators. `striped` adds a zebra tint to every other row; `plain`
- * leaves rows transparent so only hover and selection tint them.
- */
-export type DataListVariant = 'striped' | 'plain';
 /**
  * Horizontal sizing of the list grid.
  *
@@ -18,19 +10,20 @@ export type DataListVariant = 'striped' | 'plain';
  *   instead of widening the table.
  */
 export type DataListFit = 'content' | 'container';
-export type DataListStickyHeaderBackground = 'tinted' | 'surface' | 'transparent';
+/**
+ * Surface treatment of the list.
+ *
+ * - `default`: rows sit on a rounded `surface4` panel.
+ * - `light`: no panel behind the rows; rows sit directly on the page.
+ */
+export type DataListVariant = 'default' | 'light';
 export type DataListRootProps = Omit<ScrollAreaProps, 'children' | 'orientation' | 'mask' | 'viewportRef'> & {
     children: ReactNode;
     columns: string;
-    variant?: DataListVariant;
     /** Grid width behavior; defaults to `content` (existing horizontal-scroll sizing). */
     fit?: DataListFit;
-    /**
-     * Shared fill for the sticky top header and sticky row-header column.
-     * `tinted` is the opaque `--surface-header` band, so sticky headers do not
-     * reveal scrolled content beneath them.
-     */
-    stickyHeaderBackground?: DataListStickyHeaderBackground;
+    /** Surface treatment; defaults to `default` (rows on a `surface4` panel). */
+    variant?: DataListVariant;
     /**
      * Edge fades from the underlying ScrollArea. DataList keeps the top fade off
      * by default so it does not fade the sticky top header.
@@ -43,4 +36,4 @@ export type DataListRootProps = Omit<ScrollAreaProps, 'children' | 'orientation'
      */
     scrollRef?: RefObject<HTMLDivElement | null>;
 };
-export declare function DataListRoot({ children, columns, className, variant, fit, stickyHeaderBackground, mask, scrollRef, ...props }: DataListRootProps): import("react").JSX.Element;
+export declare function DataListRoot({ children, columns, className, fit, variant, mask, scrollRef, ...props }: DataListRootProps): import("react").JSX.Element;

package/dist/src/ds/components/DataList/data-list-skeleton.d.ts

@@ -1,7 +1,12 @@
-import { DataListFit } from './data-list-root';
+import { DataListFit, DataListVariant } from './data-list-root';
 export type DataListSkeletonProps = {
     columns?: string;
     numberOfRows?: number;
     fit?: DataListFit;
+    variant?: DataListVariant;
 };
-export declare function DataListSkeleton({ columns, numberOfRows, fit }: DataListSkeletonProps): import("react").JSX.Element;
+/**
+ * Loading placeholder mirroring the real list: same root, a sticky header
+ * band with one placeholder label per column, then rows of placeholder cells.
+ */
+export declare function DataListSkeleton({ columns, numberOfRows, fit, variant, }: DataListSkeletonProps): import("react").JSX.Element;

package/dist/src/ds/components/DataList/data-list.d.ts

@@ -8,7 +8,7 @@ import { DataListSpacer } from './data-list-spacer';
 import { DataListSubHeading } from './data-list-subheading';
 import { DataListTop } from './data-list-top';
 import { DataListTopCellWithTooltip, DataListTopCellSmart, DataListTopSelectCell } from './data-list-top-cell';
-export type { DataListRootProps, DataListStickyHeaderBackground, DataListVariant } from './data-list-root';
+export type { DataListRootProps, DataListVariant } from './data-list-root';
 export declare const DataList: typeof DataListRoot & {
     Top: typeof DataListTop;
     TopCells: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/dist/src/ds/components/DataList/data-list.stories.d.ts

@@ -1,49 +1,23 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { DataListStickyHeaderBackground, DataListVariant } from './data-list-root';
-type DataListStoryArgs = {
-    variant: DataListVariant;
-    stickyHeaderBackground: DataListStickyHeaderBackground;
-};
-declare const meta: Meta<DataListStoryArgs>;
+import { DataList } from './data-list';
+declare const meta: Meta<typeof DataList>;
 export default meta;
-type Story = StoryObj<DataListStoryArgs>;
-/** The standard condensed look used by Traces, Logs, Scores, Dataset Items, and Skills. */
-export declare const Compact: Story;
-/** Taller rows — better for prose-heavy content where each row needs more breathing room. */
+type Story = StoryObj<typeof DataList>;
+/** Canonical DataList appearance and density. */
 export declare const Default: Story;
-/**
- * Per-row `variant="error"` lays a subtle, theme-aware destructive tint over the
- * row. Use the `variant` control to compare it with each list treatment.
- */
-export declare const WithErrorRows: Story;
-/** Use `RowLink` when each row should navigate to a detail page (preserves middle-click + open-in-new-tab). */
-export declare const WithRowLink: Story;
-/** Multi-select with a leading checkbox column. Click the header checkbox to toggle all rows. */
+/** `light` drops the panel behind the rows so the list sits directly on the page. */
+export declare const Light: Story;
+/** Semantic error and featured row states. */
+export declare const RowStates: Story;
+/** Multi-select with checkboxes that remain visible without hover. */
 export declare const WithSelection: Story;
-/** Trailing actions column: the row click area is bounded by `colEnd={-2}`, and the last cell hosts per-row controls. */
-export declare const WithTrailingCell: Story;
-/** Use `featured` to highlight the row whose detail panel is currently open. */
-export declare const Featured: Story;
-/** `DateCell` shows `Today` or `MMM dd`; `TimeCell` shows `HH:mm:ss.SSS` with monospaced glyphs. */
-export declare const WithDateAndTimeCells: Story;
-/** Empty / no-match state — usually shown when a search filter yields zero rows. */
+/** Trailing actions stay hidden until their row is hovered or focused. */
+export declare const WithActions: Story;
 export declare const Empty: Story;
-/** Wide grid with constrained columns, horizontal scrolling, and a long badge that must stay inside its cell. */
-export declare const WideColumnsOverflow: Story;
-/** Sticky row headers keep the first column visible while wide metric-like grids scroll horizontally. */
-export declare const StickyRowHeaders: Story;
-/** Loading placeholder for any column layout. Pass the same `columns` string the real list uses. */
 export declare const Loading: Story;
-/** Page-based pagination footer — `Previous` shows when `currentPage > 0`, `Next` shows when `hasMore`.
- *  `currentPage` is zero-based: the footer renders it as `currentPage + 1`, so page `0` reads as "Page 1". */
+/** Horizontal and vertical scrolling with a sticky header and first column. */
+export declare const StickyOverflow: Story;
 export declare const WithPagination: Story;
-/** Group rows under labelled sections using `Subheader` (and an optional `SubHeading` for a quieter sub-label). */
-export declare const WithSubheader: Story;
-/** Scorer data table: Score is always visible, Input/Entity are toggleable. */
-export declare const ScoresTable: Story;
-/**
- * Accessible keyboard navigation via `useTableKeydown` (roving tabindex).
- * Tab into the list to land on the active row, then use ArrowUp/ArrowDown,
- * Home/End, and PageUp/PageDown to move focus. Tab leaves the list in one stop.
- */
+export declare const WithSubheaders: Story;
+/** Roving focus with ArrowUp, ArrowDown, Home, End, PageUp and PageDown. */
 export declare const KeyboardNavigation: Story;

package/dist/src/ds/components/DataList/shared.d.ts

@@ -5,42 +5,37 @@
  *
  * Carries the `.data-list-row` marker class the root styles target.
  */
-export declare const dataListRowOuterStyles: readonly ["group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowOuterStyles: readonly ["group/data-list-row data-list-row col-span-full relative min-h-9 bg-surface2", "transition-colors duration-200"];
 /**
- * Layout + focus ring only. The root paints the hover/focus fill on
- * `.data-list-row`, so a wrapped row and its button never show two tints.
+ * Interactive state fills for the outer row element. Applied to standalone
+ * `RowButton` / `RowLink` and to `RowWrapper`. The `has-*` forms let a wrapper
+ * mirror the tone of the interactive row nested inside it.
  */
-export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg"];
-export declare const dataListRowStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg", "group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
-export declare const dataListRowStaticStyles: readonly ["grid grid-cols-subgrid gap-8 px-5", "group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowStateStyles: readonly ["hover:bg-surface3 active:bg-surface4", "data-featured:bg-surface3 has-data-featured:bg-surface3 has-data-selected:bg-surface3", "data-featured:hover:bg-surface4 has-data-featured:hover:bg-surface4 has-data-selected:hover:bg-surface4", "data-[variant=error]:bg-notice-destructive/10 has-data-[variant=error]:bg-notice-destructive/10"];
 /**
- * Row controls that stay out of the way until the row is hovered or focused.
+ * Layout and focus for the interactive element. The background lives on the
+ * outer row element so it sits inside the root surface.
+ */
+export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 cursor-pointer", "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1"];
+export declare const dataListRowStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 cursor-pointer", "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "group/data-list-row data-list-row col-span-full relative min-h-9 bg-surface2", "transition-colors duration-200", "hover:bg-surface3 active:bg-surface4", "data-featured:bg-surface3 has-data-featured:bg-surface3 has-data-selected:bg-surface3", "data-featured:hover:bg-surface4 has-data-featured:hover:bg-surface4 has-data-selected:hover:bg-surface4", "data-[variant=error]:bg-notice-destructive/10 has-data-[variant=error]:bg-notice-destructive/10"];
+export declare const dataListRowStaticStyles: readonly ["grid grid-cols-subgrid gap-8 px-5", "group/data-list-row data-list-row col-span-full relative min-h-9 bg-surface2", "transition-colors duration-200"];
+/**
+ * Row actions that stay out of the way until the row is hovered or focused.
  * Opacity, not display, so the column keeps its width and nothing shifts. A
  * coarse pointer never hovers, so there they stay visible — hidden controls
  * that still take taps would be worse than no reveal at all.
  */
-export declare const dataListRowRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-row:opacity-100 group-hover/data-list-row:opacity-100";
-/** Header counterpart of {@link dataListRowRevealStyles}. */
-export declare const dataListTopRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-top:opacity-100 group-hover/data-list-top:opacity-100";
+export declare const dataListRowActionRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-row:opacity-100 group-hover/data-list-row:opacity-100";
 export type DataListSticky = 'start';
-export declare const dataListStickyStartStyles: readonly ["data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible", "after:absolute after:-right-4 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-border2 after:content-[\"\"] after:pointer-events-none"];
-/** Tone for a single row. `error` lays a subtle, theme-aware destructive tint
- *  over whatever background the row already has. */
+export declare const dataListStickyStartStyles: readonly ["data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible"];
+/** Tone for a single row. Exposed as `data-variant`; `error` tints the row. */
 export type DataListRowVariant = 'default' | 'error';
-/**
- * Per-row tone. Kept as a `.ts` cva (safe to export — no react-refresh concern).
- * The error tint uses `!` so it wins over borderless table root-level styling
- * (higher-specificity descendant rules) and over the base row hover.
- */
-export declare const dataListRowVariants: (props?: ({
-    variant?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Layout/state modifiers shared by interactive row primitives
  * (`DataList.RowButton`, `DataList.RowLink`).
  */
 export type DataListRowSharedProps = {
-    /** Row tone — `error` applies a subtle destructive background tint. */
+    /** Row tone — exposed on the element as `data-variant`. */
     variant?: DataListRowVariant;
     /**
      * Place the row starting at this column line. Defaults to column 1. Use
@@ -54,8 +49,8 @@ export type DataListRowSharedProps = {
      */
     colEnd?: number;
     /**
-     * Apply the highlighted background. Use to mark the row that is currently
-     * featured (e.g. the row whose detail is open in a side panel).
+     * Mark the row as featured (e.g. the row whose detail is open in a side
+     * panel). Exposed on the element as `data-featured` and tints the row.
      */
     featured?: boolean;
 };

package/dist/src/ds/components/EnvironmentVariablesEditor/environment-variables-editor-read-only-list.d.ts

@@ -1,2 +1,2 @@
 import { EnvironmentVariablesEditorReadOnlyListProps } from './environment-variables-editor.types';
-export declare function EnvironmentVariablesEditorReadOnlyList({ className, children, columns, header, showHeader, showIcon, nameLabel, valueLabel, updatedAtLabel, variant, scrollRef, ...props }: EnvironmentVariablesEditorReadOnlyListProps): import("react").JSX.Element;
+export declare function EnvironmentVariablesEditorReadOnlyList({ className, children, columns, header, showHeader, showIcon, nameLabel, valueLabel, updatedAtLabel, scrollRef, ...props }: EnvironmentVariablesEditorReadOnlyListProps): import("react").JSX.Element;

package/dist/src/ds/components/LogsDataList/logs-data-list.stories.d.ts

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof LogsDataList>;
 export default meta;
 type Story = StoryObj<typeof LogsDataList>;
 export declare const Populated: Story;
-export declare const NoMatches: Story;
 export declare const Loading: Story;

package/dist/src/ds/components/ThemeToggle/theme-toggle.d.ts

@@ -5,6 +5,29 @@ export interface ThemeToggleOption {
     label: string;
     icon: React.ReactNode;
 }
+declare const SIZE_CONFIG: {
+    readonly md: {
+        readonly itemGap: 2;
+        readonly itemWidth: 28;
+        readonly root: "gap-0.5 p-0.5";
+        readonly indicator: "inset-y-0.5 left-0.5";
+        readonly item: "h-6 [&_svg]:size-3.5";
+    };
+    readonly xs: {
+        readonly itemGap: 1;
+        readonly itemWidth: 20;
+        readonly root: "gap-px p-px";
+        readonly indicator: "inset-y-px left-px";
+        readonly item: "h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm";
+    };
+    readonly sm: {
+        readonly itemGap: 1;
+        readonly itemWidth: 24;
+        readonly root: "gap-px p-px";
+        readonly indicator: "inset-y-px left-px";
+        readonly item: "h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm";
+    };
+};
 type RadioRootProps = Omit<RadioGroupPrimitive.Props, 'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'> & {
     className?: string;
 };
@@ -18,6 +41,7 @@ type UncontrolledProps = {
 };
 export type ThemeToggleProps = RadioRootProps & {
     options?: ReadonlyArray<ThemeToggleOption>;
+    size?: keyof typeof SIZE_CONFIG;
 } & (ControlledProps | UncontrolledProps);
-export declare const ThemeToggle: ({ value, onChange, options, className, "aria-label": ariaLabel, ...rest }: ThemeToggleProps) => import("react").JSX.Element;
+export declare const ThemeToggle: ({ value, onChange, options, size, className, "aria-label": ariaLabel, ...rest }: ThemeToggleProps) => import("react").JSX.Element;
 export {};

package/dist/src/ds/components/ThemeToggle/theme-toggle.stories.d.ts

@@ -4,4 +4,7 @@ declare const meta: Meta<typeof ThemeToggle>;
 export default meta;
 type Story = StoryObj<typeof ThemeToggle>;
 export declare const Default: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const Sizes: Story;
 export declare const Controlled: Story;

package/dist/src/hooks/use-debounced-value.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedValue<T>(value: T, delay: number): T;