@mastra/playground-ui 29.0.0 → 30.0.0-alpha.1

package/dist/src/ds/components/Checkbox/checkbox.d.ts

@@ -1,4 +1,20 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import * as React from 'react';
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Radix-style tri-state value for the controlled `checked` prop. Base UI splits
+ * this into a strict `checked` boolean plus a separate `indeterminate` boolean —
+ * we keep the Radix union here so existing consumers (which pass
+ * `checked="indeterminate"`) keep working without changes.
+ *
+ * `defaultChecked` is intentionally a plain boolean: an uncontrolled checkbox
+ * cannot start "indeterminate" and then be toggled out of it (the indeterminate
+ * state is inherently controlled), so `'indeterminate'` is not allowed there.
+ */
+export type CheckedState = boolean | 'indeterminate';
+type CheckboxProps = Omit<CheckboxPrimitive.Root.Props, 'className' | 'checked'> & {
+    className?: string;
+    checked?: CheckedState;
+};
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Checkbox };
+export type { CheckboxProps };

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

@@ -7,8 +7,12 @@ import { ScoresDataListDateCell, ScoresDataListTimeCell, ScoresDataListInputCell
 declare function ScoresDataListRoot(props: ComponentProps<typeof DataListRoot>): import("react/jsx-runtime").JSX.Element;
 export declare const ScoresDataList: typeof ScoresDataListRoot & {
     Top: typeof DataListTop;
-    TopCell: import('react').ForwardRefExoticComponent<import('../data-list-top-cell').DataListTopCellProps & import('react').RefAttributes<HTMLSpanElement>>;
-    RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    TopCell: import('react').ForwardRefExoticComponent<{
+        children: import('react').ReactNode;
+        className?: string;
+        as?: import('react').ElementType;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "children" | "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('../shared').DataListRowSharedProps & import('react').RefAttributes<HTMLButtonElement>>;
     NoMatch: typeof DataListNoMatch;
     NextPageLoading: typeof DataListNextPageLoading;
     DateCell: typeof ScoresDataListDateCell;

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

@@ -1,15 +1,3 @@
-export interface TracesDataListIdCellProps {
-    traceId: string;
-}
-export declare function TracesDataListIdCell({ traceId }: TracesDataListIdCellProps): import("react/jsx-runtime").JSX.Element;
-export interface TracesDataListDateCellProps {
-    timestamp: Date | string;
-}
-export declare function TracesDataListDateCell({ timestamp }: TracesDataListDateCellProps): import("react/jsx-runtime").JSX.Element;
-export interface TracesDataListTimeCellProps {
-    timestamp: Date | string;
-}
-export declare function TracesDataListTimeCell({ timestamp }: TracesDataListTimeCellProps): import("react/jsx-runtime").JSX.Element;
 export interface TracesDataListNameCellProps {
     name?: string | null;
     /** `null`/missing → root span (Trace). Set → nested span (Subtrace). Drives the leading level icon. */

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

@@ -1,4 +1,5 @@
 import { ComponentProps } from 'react';
+import { DataListDateCell, DataListIdCell, DataListTimeCell } from '../data-list-cells';
 import { DataListNextPageLoading } from '../data-list-next-page-loading';
 import { DataListNoMatch } from '../data-list-no-match';
 import { DataListRoot } from '../data-list-root';
@@ -6,20 +7,24 @@ import { DataListSpacer } from '../data-list-spacer';
 import { DataListSubHeading } from '../data-list-subheading';
 import { DataListTop } from '../data-list-top';
 import { DataListTopCellWithTooltip } from '../data-list-top-cell';
-import { TracesDataListIdCell, TracesDataListDateCell, TracesDataListTimeCell, TracesDataListNameCell, TracesDataListInputCell, TracesDataListEntityCell, TracesDataListStatusCell } from './traces-data-list-cells';
+import { TracesDataListNameCell, TracesDataListInputCell, TracesDataListEntityCell, TracesDataListStatusCell } from './traces-data-list-cells';
 declare function TracesDataListRoot(props: ComponentProps<typeof DataListRoot>): import("react/jsx-runtime").JSX.Element;
 export declare const TracesDataList: typeof TracesDataListRoot & {
     Top: typeof DataListTop;
-    TopCell: import('react').ForwardRefExoticComponent<import('../data-list-top-cell').DataListTopCellProps & import('react').RefAttributes<HTMLSpanElement>>;
+    TopCell: import('react').ForwardRefExoticComponent<{
+        children: import('react').ReactNode;
+        className?: string;
+        as?: import('react').ElementType;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "children" | "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
     TopCellWithTooltip: typeof DataListTopCellWithTooltip;
-    RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('../shared').DataListRowSharedProps & import('react').RefAttributes<HTMLButtonElement>>;
     NoMatch: typeof DataListNoMatch;
     Subheader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     SubHeading: typeof DataListSubHeading;
     Spacer: typeof DataListSpacer;
-    IdCell: typeof TracesDataListIdCell;
-    DateCell: typeof TracesDataListDateCell;
-    TimeCell: typeof TracesDataListTimeCell;
+    IdCell: typeof DataListIdCell;
+    DateCell: typeof DataListDateCell;
+    TimeCell: typeof DataListTimeCell;
     NameCell: typeof TracesDataListNameCell;
     InputCell: typeof TracesDataListInputCell;
     EntityCell: typeof TracesDataListEntityCell;

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

@@ -1,10 +1,53 @@
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 export type DataListCellProps = {
     children: ReactNode;
     className?: string;
     height?: 'default' | 'compact';
-};
-export declare function DataListCell({ children, className, height }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * HTML element rendered for the cell. Defaults to `span`. Use `'label'` when
+     * the cell wraps a labelable control (e.g. a Checkbox), so the whole cell
+     * area acts as the click/hover target.
+     */
+    as?: ElementType;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className'>;
+export declare function DataListCell({ children, className, height, as, ...rest }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
 export declare function DataListTextCell({ children, className }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
 export declare function DataListNameCell({ children, className }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
 export declare function DataListDescriptionCell({ children, className }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
+export interface DataListIdCellProps {
+    id: string;
+}
+export declare function DataListIdCell({ id }: DataListIdCellProps): import("react/jsx-runtime").JSX.Element;
+export interface DataListSelectCellProps {
+    checked: boolean;
+    /**
+     * Called when the checkbox is clicked. Receives the click event's `shiftKey`
+     * so callers can implement range-select. The event's propagation is stopped
+     * before `onToggle` runs, so the host row's `onClick` doesn't fire.
+     */
+    onToggle: (shiftKey: boolean) => void;
+    'aria-label'?: string;
+}
+export declare function DataListSelectCell({ checked, onToggle, ...rest }: DataListSelectCellProps): import("react/jsx-runtime").JSX.Element;
+export interface DataListMonoCellProps {
+    children: ReactNode;
+    /** Override classes on the inner span (e.g. swap the default `text-neutral3` tone). */
+    className?: string;
+    /** Cell vertical padding. Defaults to `compact` to match other identifier cells. */
+    height?: 'default' | 'compact';
+}
+/**
+ * Mono-typography cell with truncation. Shared by any column that
+ * shows code-like text (input previews, JSON summaries, identifiers, etc.).
+ */
+export declare function DataListMonoCell({ children, className, height }: DataListMonoCellProps): import("react/jsx-runtime").JSX.Element;
+export interface DataListDateCellProps {
+    timestamp: Date | string;
+}
+/** Compact date cell — `Today` or `MMM dd` (e.g. `May 19`). */
+export declare function DataListDateCell({ timestamp }: DataListDateCellProps): import("react/jsx-runtime").JSX.Element;
+export interface DataListTimeCellProps {
+    timestamp: Date | string;
+}
+/** Compact monospace time cell — `HH:mm:ss.SSS` with the millisecond portion tinted. */
+export declare function DataListTimeCell({ timestamp }: DataListTimeCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
-export type DataListRowButtonProps = ComponentPropsWithoutRef<'button'>;
+import { DataListRowSharedProps } from './shared';
+export type DataListRowButtonProps = ComponentPropsWithoutRef<'button'> & DataListRowSharedProps;
 /**
  * Forwarded ref + spread props so virtualizers (`useVirtualizer.measureElement`)
  * can attach a ref and `data-index` to each rendered row.
  */
-export declare const DataListRowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const DataListRowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & DataListRowSharedProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,9 +1,11 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { DataListRowSharedProps } from './shared';
 import { LinkComponent } from '../../types/link-component';
-export type DataListRowLinkProps = {
+export type DataListRowLinkProps = DataListRowSharedProps & {
     children: ReactNode;
     to: string;
     className?: string;
+    style?: CSSProperties;
     LinkComponent: LinkComponent;
 };
-export declare function DataListRowLink({ children, to, className, LinkComponent: Link }: DataListRowLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataListRowLink({ children, to, className, style, LinkComponent: Link, flushLeft, flushRight, colStart, colEnd, featured, }: DataListRowLinkProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,12 @@
 import { ComponentPropsWithoutRef } from 'react';
 export type DataListRowProps = ComponentPropsWithoutRef<'div'>;
 /**
- * Forwarded ref + spread props so virtualizers (`useVirtualizer.measureElement`)
- * can attach a ref and `data-index` to each rendered row.
+ * Non-interactive grid wrapper. Used to host a leading or trailing cell (e.g. a
+ * selection checkbox or row actions) alongside a `DataList.RowButton` so
+ * hover/focus/click only apply to the button portion. For standalone
+ * interactive rows, use `DataList.RowButton` directly without this wrapper.
+ *
+ * Carries the row-level border + `.data-list-row` marker so separators and
+ * sibling-aware rules behave the same in wrapped and standalone rows.
  */
 export declare const DataListRow: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,9 +1,22 @@
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 export type DataListTopCellProps = {
     children: ReactNode;
     className?: string;
-};
-export declare const DataListTopCell: import('react').ForwardRefExoticComponent<DataListTopCellProps & import('react').RefAttributes<HTMLSpanElement>>;
+    /**
+     * HTML element rendered for the top cell. Defaults to `span`. Use `'label'`
+     * when the cell wraps a labelable control (e.g. a select-all Checkbox).
+     */
+    as?: ElementType;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'ref'>;
+export declare const DataListTopCell: import('react').ForwardRefExoticComponent<{
+    children: ReactNode;
+    className?: string;
+    /**
+     * HTML element rendered for the top cell. Defaults to `span`. Use `'label'`
+     * when the cell wraps a labelable control (e.g. a select-all Checkbox).
+     */
+    as?: ElementType;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "children" | "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
 export type DataListTopCellWithTooltipProps = {
     children: ReactNode;
     tooltip: ReactNode;
@@ -18,3 +31,11 @@ export type DataListTopCellSmartProps = {
     className?: string;
 };
 export declare function DataListTopCellSmart({ long, short, tooltip, breakpoint, className, }: DataListTopCellSmartProps): import("react/jsx-runtime").JSX.Element;
+export interface DataListTopSelectCellProps {
+    /** Pass `'indeterminate'` when some — but not all — rows are selected. */
+    checked: boolean | 'indeterminate';
+    /** Toggles the global selection. Typically clears when fully selected, otherwise selects all. */
+    onToggle: () => void;
+    'aria-label'?: string;
+}
+export declare function DataListTopSelectCell({ checked, onToggle, ...rest }: DataListTopSelectCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type DataListTopCellsProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Drop the group's default left margin. Use when this sits as the second
+     * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that
+     * owns the leading column.
+     */
+    flushLeft?: boolean;
+    /**
+     * Place the group starting at this column line, spanning through to the
+     * last column. Defaults to the full grid (`col-span-full`). Use when this
+     * sits beside a leading cell that owns column 1.
+     */
+    colStart?: number;
+};
+/**
+ * Non-interactive header equivalent of `DataList.RowButton`. Groups a set of
+ * `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as
+ * `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the
+ * columns inside a wrapped `Row`.
+ */
+export declare const DataListTopCells: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Drop the group's default left margin. Use when this sits as the second
+     * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that
+     * owns the leading column.
+     */
+    flushLeft?: boolean;
+    /**
+     * Place the group starting at this column line, spanning through to the
+     * last column. Defaults to the full grid (`col-span-full`). Use when this
+     * sits beside a leading cell that owns column 1.
+     */
+    colStart?: number;
+} & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -2,5 +2,12 @@ import { ReactNode } from 'react';
 export type DataListTopProps = {
     children: ReactNode;
     className?: string;
+    /**
+     * Switch to a "leading cell" layout: drops the default gap between children
+     * and the default left padding, so a leading cell (e.g. `TopSelectCell`)
+     * sits flush against the grid edge and an inner `TopCells` group owns the
+     * remaining column spacing. Mirrors how `Row` + `RowButton` compose.
+     */
+    hasLeadingCell?: boolean;
 };
-export declare function DataListTop({ children, className }: DataListTopProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataListTop({ children, className, hasLeadingCell }: DataListTopProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { DataListCell, DataListTextCell, DataListNameCell, DataListDescriptionCell } from './data-list-cells';
+import { DataListCell, DataListTextCell, DataListNameCell, DataListDescriptionCell, DataListIdCell, DataListSelectCell, DataListMonoCell, DataListDateCell, DataListTimeCell } from './data-list-cells';
 import { DataListNextPageLoading } from './data-list-next-page-loading';
 import { DataListNoMatch } from './data-list-no-match';
 import { DataListPagination } from './data-list-pagination';
@@ -7,19 +7,33 @@ import { DataListRowLink } from './data-list-row-link';
 import { DataListSpacer } from './data-list-spacer';
 import { DataListSubHeading } from './data-list-subheading';
 import { DataListTop } from './data-list-top';
-import { DataListTopCellWithTooltip, DataListTopCellSmart } from './data-list-top-cell';
+import { DataListTopCellWithTooltip, DataListTopCellSmart, DataListTopSelectCell } from './data-list-top-cell';
 export declare const DataList: typeof DataListRoot & {
     Top: typeof DataListTop;
-    TopCell: import('react').ForwardRefExoticComponent<import('./data-list-top-cell').DataListTopCellProps & import('react').RefAttributes<HTMLSpanElement>>;
+    TopCells: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        flushLeft?: boolean;
+        colStart?: number;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    TopCell: import('react').ForwardRefExoticComponent<{
+        children: import('react').ReactNode;
+        className?: string;
+        as?: import('react').ElementType;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "children" | "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
     TopCellWithTooltip: typeof DataListTopCellWithTooltip;
     TopCellSmart: typeof DataListTopCellSmart;
     Row: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('./shared').DataListRowSharedProps & import('react').RefAttributes<HTMLButtonElement>>;
     RowLink: typeof DataListRowLink;
     Cell: typeof DataListCell;
     TextCell: typeof DataListTextCell;
     NameCell: typeof DataListNameCell;
     DescriptionCell: typeof DataListDescriptionCell;
+    IdCell: typeof DataListIdCell;
+    MonoCell: typeof DataListMonoCell;
+    DateCell: typeof DataListDateCell;
+    TimeCell: typeof DataListTimeCell;
+    SelectCell: typeof DataListSelectCell;
+    TopSelectCell: typeof DataListTopSelectCell;
     NoMatch: typeof DataListNoMatch;
     Subheader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     SubHeading: typeof DataListSubHeading;

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+/** 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. */
+export declare const Default: 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. */
+export declare const WithSelection: Story;
+/** Trailing actions column: the row click area is bounded by `colEnd={-2}` + `flushRight`, 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. */
+export declare const Empty: 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`. */
+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;

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

@@ -1 +1,44 @@
-export declare const dataListRowStyles: readonly ["mx-1 data-list-row grid grid-cols-subgrid gap-10 col-span-full px-5 outline-none cursor-pointer border-y border-b-border1 border-t-transparent", "hover:bg-surface4 hover:border-transparent focus-visible:bg-surface4 focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "[.data-list-row:hover+&]:border-t-transparent [.data-list-row:focus-visible+&]:border-t-transparent", "[.data-list-subheader+&]:border-t-transparent", "[&:has(+.data-list-subheader)]:border-b-transparent", "[&:not(:has(~.data-list-row))]:border-b-transparent", "transition-colors duration-200 rounded-lg"];
+/**
+ * Row-level styling shared by anything that participates in the row sibling
+ * chain — applied to `DataList.RowButton` / `DataList.RowLink` when used
+ * standalone, and to `DataList.Row` when used as a wrapper around them.
+ *
+ * Contains the `.data-list-row` marker class (used by the sibling-aware border
+ * rules), the bottom/top border treatment, and rounded corners.
+ */
+export declare const dataListRowOuterStyles: readonly ["data-list-row col-span-full border-y border-b-border1 border-t-transparent", "[.data-list-row:hover+&]:border-t-transparent [.data-list-row:focus-visible+&]:border-t-transparent", "[.data-list-subheader+&]:border-t-transparent", "[&:has(+.data-list-subheader)]:border-b-transparent", "[&:not(:has(~.data-list-row))]:border-b-transparent", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowStyles: readonly ["mx-1 grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "hover:bg-surface4 hover:border-transparent focus-visible:bg-surface4 focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "data-list-row col-span-full border-y border-b-border1 border-t-transparent", "[.data-list-row:hover+&]:border-t-transparent [.data-list-row:focus-visible+&]:border-t-transparent", "[.data-list-subheader+&]:border-t-transparent", "[&:has(+.data-list-subheader)]:border-b-transparent", "[&:not(:has(~.data-list-row))]:border-b-transparent", "transition-colors duration-200 rounded-lg"];
+/**
+ * Layout/state modifiers shared by interactive row primitives
+ * (`DataList.RowButton`, `DataList.RowLink`).
+ */
+export type DataListRowSharedProps = {
+    /**
+     * Drop the row's default left margin. Use when the row is wrapped in a
+     * `DataList.Row` that owns the leading inset (e.g. for selection rows where
+     * the checkbox cell sits on the left).
+     */
+    flushLeft?: boolean;
+    /**
+     * Drop the row's default right margin. Use when the row is wrapped in a
+     * `DataList.Row` that owns the trailing inset (e.g. for rows with a
+     * trailing actions cell on the right).
+     */
+    flushRight?: boolean;
+    /**
+     * Place the row starting at this column line. Defaults to column 1. Use
+     * when the row sits beside a leading cell that owns column 1.
+     */
+    colStart?: number;
+    /**
+     * Place the row ending at this column line (use negative values to count
+     * from the end, e.g. `-2`). Defaults to `-1` (the last line). Use when the
+     * row sits beside a trailing cell that owns the last column.
+     */
+    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).
+     */
+    featured?: boolean;
+};

package/dist/src/ds/components/Label/label.d.ts

@@ -1,5 +1,3 @@
-import { VariantProps } from 'class-variance-authority';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import * as React from 'react';
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import('class-variance-authority/types').ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

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

@@ -3,14 +3,6 @@ export interface LogsDataListLevelCellProps {
     level: LogLevel;
 }
 export declare function LogsDataListLevelCell({ level }: LogsDataListLevelCellProps): import("react/jsx-runtime").JSX.Element;
-export interface LogsDataListDateCellProps {
-    timestamp: Date | string;
-}
-export declare function LogsDataListDateCell({ timestamp }: LogsDataListDateCellProps): import("react/jsx-runtime").JSX.Element;
-export interface LogsDataListTimeCellProps {
-    timestamp: Date | string;
-}
-export declare function LogsDataListTimeCell({ timestamp }: LogsDataListTimeCellProps): import("react/jsx-runtime").JSX.Element;
 export interface LogsDataListEntityCellProps {
     entityType?: string | null;
     entityName?: string | null;

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

@@ -1,3 +1,4 @@
+import { DataListDateCell, DataListTimeCell } from '../DataList/data-list-cells';
 import { DataListNextPageLoading } from '../DataList/data-list-next-page-loading';
 import { DataListNoMatch } from '../DataList/data-list-no-match';
 import { DataListRoot } from '../DataList/data-list-root';
@@ -5,19 +6,23 @@ import { DataListRowLink } from '../DataList/data-list-row-link';
 import { DataListSpacer } from '../DataList/data-list-spacer';
 import { DataListTop } from '../DataList/data-list-top';
 import { DataListTopCellWithTooltip, DataListTopCellSmart } from '../DataList/data-list-top-cell';
-import { LogsDataListLevelCell, LogsDataListDateCell, LogsDataListTimeCell, LogsDataListEntityCell, LogsDataListMessageCell, LogsDataListDataCell } from './logs-data-list-cells';
+import { LogsDataListLevelCell, LogsDataListEntityCell, LogsDataListMessageCell, LogsDataListDataCell } from './logs-data-list-cells';
 export declare const LogsDataList: typeof DataListRoot & {
     Top: typeof DataListTop;
-    TopCell: import('react').ForwardRefExoticComponent<import('../DataList/data-list-top-cell').DataListTopCellProps & import('react').RefAttributes<HTMLSpanElement>>;
+    TopCell: import('react').ForwardRefExoticComponent<{
+        children: import('react').ReactNode;
+        className?: string;
+        as?: import('react').ElementType;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "children" | "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
     TopCellWithTooltip: typeof DataListTopCellWithTooltip;
     TopCellSmart: typeof DataListTopCellSmart;
     Row: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('../DataList/shared').DataListRowSharedProps & import('react').RefAttributes<HTMLButtonElement>>;
     RowLink: typeof DataListRowLink;
     Spacer: typeof DataListSpacer;
     NoMatch: typeof DataListNoMatch;
-    DateCell: typeof LogsDataListDateCell;
-    TimeCell: typeof LogsDataListTimeCell;
+    DateCell: typeof DataListDateCell;
+    TimeCell: typeof DataListTimeCell;
     LevelCell: typeof LogsDataListLevelCell;
     EntityCell: typeof LogsDataListEntityCell;
     MessageCell: typeof LogsDataListMessageCell;

package/dist/src/ds/components/RadioGroup/radio-group.d.ts

@@ -1,5 +1,12 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import * as React from 'react';
-declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type RadioGroupProps = Omit<RadioGroupPrimitive.Props, 'className'> & {
+    className?: string;
+};
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type RadioGroupItemProps = Omit<RadioPrimitive.Root.Props, 'className'> & {
+    className?: string;
+};
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { RadioGroup, RadioGroupItem };

package/dist/src/ds/components/Switch/switch.d.ts

@@ -1,4 +1,9 @@
-import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
 import * as React from 'react';
-declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type SwitchProps = Omit<SwitchPrimitive.Root.Props, 'className'> & {
+    className?: string;
+    asChild?: boolean;
+};
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };
+export type { SwitchProps };

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

@@ -1,11 +1,13 @@
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import { Theme } from '../ThemeProvider/theme-context';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 export interface ThemeToggleOption {
     value: Theme;
     label: string;
     icon: React.ReactNode;
 }
-type RadioRootProps = Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'value' | 'onChange' | 'onValueChange' | 'orientation' | 'defaultValue'>;
+type RadioRootProps = Omit<RadioGroupPrimitive.Props, 'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'> & {
+    className?: string;
+};
 type ControlledProps = {
     value: Theme;
     onChange: (next: Theme) => void;

package/dist/src/index.d.ts

@@ -52,7 +52,6 @@ export * from './ds/components/MainContent';
 export * from './ds/components/MainHeader';
 export * from './ds/components/Sections';
 export * from './ds/components/DateTimePicker';
-export * from './ds/components/EntryList';
 export * from './ds/components/JSONSchemaForm';
 export * from './ds/components/KeyValueList';
 export * from './ds/components/MainSidebar';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "29.0.0",
+  "version": "30.0.0-alpha.1",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -62,17 +62,13 @@
     "@hello-pangea/dnd": "^18.0.1",
     "@lezer/highlight": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@tanstack/react-virtual": "^3.13.22",
@@ -98,8 +94,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.20.0",
-    "@mastra/react": "0.4.0"
+    "@mastra/client-js": "^1.21.0-alpha.1",
+    "@mastra/react": "0.4.1-alpha.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.3.6",
@@ -135,10 +131,10 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.5",
+    "@mastra/core": "1.37.0-alpha.1",
     "@internal/lint": "0.0.97",
-    "@mastra/client-js": "^1.20.0",
-    "@mastra/core": "1.36.0",
-    "@mastra/react": "0.4.0"
+    "@mastra/react": "0.4.1-alpha.1",
+    "@mastra/client-js": "^1.21.0-alpha.1"
   },
   "homepage": "https://mastra.ai",
   "repository": {

package/dist/src/ds/components/EntryList/entry-list-entries-skeleton.d.ts

@@ -1,6 +0,0 @@
-import { ColumnType } from './types';
-export type EntryListEntriesSkeletonProps = {
-    columns?: ColumnType[];
-    numberOfRows?: number;
-};
-export declare function EntryListEntriesSkeleton({ columns, numberOfRows }: EntryListEntriesSkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/EntryList/entry-list-entries.d.ts

@@ -1,5 +0,0 @@
-import { default as React } from 'react';
-export type EntryListEntriesProps = {
-    children?: React.ReactNode;
-};
-export declare function EntryListEntries({ children }: EntryListEntriesProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/EntryList/entry-list-entry-col.d.ts

@@ -1,9 +0,0 @@
-export type EntryListEntryTextColProps = {
-    children: React.ReactNode;
-    isLoading?: boolean;
-};
-export declare function EntryListEntryTextCol({ children, isLoading }: EntryListEntryTextColProps): import("react/jsx-runtime").JSX.Element;
-export type EntryListEntryStatusColProps = {
-    status?: 'success' | 'failed';
-};
-export declare function EntryListEntryStatusCol({ status }: EntryListEntryStatusColProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/EntryList/entry-list-entry.d.ts

@@ -1,10 +0,0 @@
-import { ColumnType } from './types';
-export type EntryListEntryProps = {
-    entry?: any;
-    isSelected?: boolean;
-    children?: React.ReactNode;
-    onClick?: (itemId: string) => void;
-    columns?: ColumnType[];
-    isLoading?: boolean;
-};
-export declare function EntryListEntry({ entry, isSelected, onClick, children, columns }: EntryListEntryProps): import("react/jsx-runtime").JSX.Element;