@mastra/playground-ui 68.0.0-alpha.0 → 68.0.0-alpha.2

package/dist/src/domains/spans/hooks/use-spans-filter-bar.d.ts

@@ -20,7 +20,7 @@ export type UseSpansFilterBarOptions = {
 };
 /**
  * The span filters as a filter bar value, and the handlers that write bar edits back.
- * The time-range chip is a synthetic, always-present item; it never round-trips to tokens.
+ * The time range is a synthetic, always-present item; it never round-trips to tokens.
  */
 export declare function useSpansFilterBar({ tokens, groups, onFiltersChange }: UseSpansFilterBarOptions): {
     filterBarValue: FilterBarExpression;

package/dist/src/domains/spans/span-filters.d.ts

@@ -2,7 +2,7 @@ import type { TraceQueryScalarPredicate } from '@mastra/core/storage';
 import type { StreamingTimingSupport } from '../traces/trace-filters';
 import type { TraceFilterGroup, TraceFilterToken } from '../traces/trace-query-filters';
 import type { FilterBarField, FilterBarSuggestionsResolver } from '../../ds/components/FilterBar/types';
-/** Span query fields every store accepts. `startedAt`/`endedAt` are left to the time-range chip. */
+/** Span query fields every store accepts. `startedAt`/`endedAt` are left to the time range. */
 export declare const SPAN_CORE_FILTER_FIELD_IDS: readonly ['name', 'spanType', 'status', 'error', 'durationMs', 'timeToFirstChunkMs', 'timeToFirstTokenMs', 'entityType', 'entityId', 'entityName', 'entityVersionId', 'parentEntityVersionId', 'rootEntityVersionId', 'runId', 'sessionId', 'userId', 'organizationId'];
 /** Span query fields the server only accepts when the store declares `spanQueryContextFields`. */
 export declare const SPAN_CONTEXT_FILTER_FIELD_IDS: readonly ['traceId', 'spanId', 'parentSpanId', 'threadId', 'resourceId', 'requestId', 'serviceName', 'experimentId', 'environment', 'executionSource', 'parentEntityType', 'parentEntityId', 'parentEntityName', 'rootEntityType', 'rootEntityId', 'rootEntityName'];

package/dist/src/domains/threads/components/threads-filter-bar.d.ts

@@ -14,5 +14,5 @@ export type ThreadsFilterBarProps = {
     onFiltersChange: (tokens: TraceFilterToken[], groups: TraceFilterGroup[]) => void;
     disabled?: boolean;
 };
-/** The threads filter bar: a time range chip plus the fields `queryTraceThreads()` accepts. */
+/** The threads filter bar: the time range plus the fields `queryTraceThreads()` accepts. */
 export declare function ThreadsFilterBar({ datePreset, dateFrom, dateTo, minDate, tokens, groups, onDatePresetChange, onDateChange, onDateRangeChange, onFiltersChange, disabled, }: ThreadsFilterBarProps): import("react").JSX.Element;

package/dist/src/domains/threads/hooks/use-threads-filter-bar.d.ts

@@ -12,7 +12,7 @@ export type UseThreadsFilterBarOptions = {
 };
 /**
  * The thread filters as a filter bar value, and the handlers that write bar edits back.
- * The time-range chip is a synthetic, always-present item; it never round-trips to tokens.
+ * The time range is a synthetic, always-present item; it never round-trips to tokens.
  */
 export declare function useThreadsFilterBar({ tokens, groups, onFiltersChange }: UseThreadsFilterBarOptions): {
     filterBarValue: FilterBarExpression;

package/dist/src/domains/threads/thread-filters.d.ts

@@ -2,7 +2,7 @@ import type { TraceQueryScalarPredicate } from '@mastra/core/storage';
 import type { StreamingTimingSupport } from '../traces/trace-filters';
 import type { TraceFilterGroup, TraceFilterToken } from '../traces/trace-query-filters';
 import type { FilterBarField } from '../../ds/components/FilterBar/types';
-/** Thread query fields the filter bar offers. `startedAt`/`endedAt` are left to the time-range chip. */
+/** Thread query fields the filter bar offers. `startedAt`/`endedAt` are left to the time range. */
 export declare const THREAD_FILTER_FIELD_IDS: readonly ['status', 'traceCount', 'timeToFirstChunkMs', 'timeToFirstTokenMs', 'entityType', 'entityId', 'entityName', 'entityVersionId', 'threadId', 'resourceId', 'userId', 'organizationId', 'runId', 'sessionId', 'requestId', 'serviceName', 'experimentId', 'environment', 'executionSource'];
 /** FilterBar fields for the threads page: only paths and operators `queryTraceThreads()` accepts. */
 export declare function createThreadFilterBarFields({ withTimeToFirstChunk, withTimeToFirstToken, entityNames, environments, }: StreamingTimingSupport & {

package/dist/src/domains/traces/components/traces-explorer/traces-explorer-filter-bar.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import type { TraceTimeRangeChipProps } from '../trace-time-range-chip';
 import type { FilterBarItem } from '../../../../ds/components/FilterBar';
+import type { FilterBarTimeRangeProps } from '../../../../ds/components/FilterBar/filter-bar-time-range';
 export type TracesExplorerFilterBarProps = {
     /** Replaces the default chips and input, e.g. to pass a configured `TracesExplorer.TimeRangeChip`. */
     children?: ReactNode;
@@ -17,8 +17,8 @@ export type TracesExplorerFilterChipsProps = {
     /** Renders every other item. Defaults to the design-system chip. */
     renderChip?: (item: FilterBarItem) => ReactNode;
 };
-/** The bar's chips: the time range chip in its slot, then one chip per filter. */
+/** The bar's chips: the time range in its slot, then one chip per filter. */
 export declare function TracesExplorerFilterChips({ timeRange, renderChip }: TracesExplorerFilterChipsProps): import("react").JSX.Element;
-export type TracesExplorerTimeRangeChipProps = Partial<Pick<TraceTimeRangeChipProps, 'presets' | 'minDate' | 'maxRangeMs'>>;
+export type TracesExplorerTimeRangeChipProps = Partial<Pick<FilterBarTimeRangeProps, 'presets' | 'minDate' | 'maxRangeMs'>>;
 /** Its own component so a list loading flip only re-renders the chip, not the whole bar. */
 export declare function TracesExplorerTimeRangeChip({ presets, minDate, maxRangeMs, }: TracesExplorerTimeRangeChipProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/traces-page-skeleton.d.ts

@@ -4,7 +4,7 @@ export type TracesPageSkeletonProps = {
 };
 /**
  * Page-level placeholder shown while filter-field discovery is pending. Pills sized like the
- * toolbar controls (time chip and filter input, then columns menu and auto-refresh) stand in
+ * toolbar controls (time range and filter input, then columns menu and auto-refresh) stand in
  * for the action row, spaced from the list skeleton as the action row is from the list.
  */
 export declare function TracesPageSkeleton({ columnPreferences }: TracesPageSkeletonProps): import("react").JSX.Element;

package/dist/src/ds/components/Button/Button.d.ts

@@ -31,6 +31,21 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     /** @deprecated Set it on the element passed to `render`. */
     prefetch?: boolean | null;
 }
+/** A trigger's leading icon. */
+export declare function ButtonIcon({ size, children }: {
+    size: ButtonSize;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * The down chevron of a trigger that opens a list; static, it does not turn while open. Lucide's
+ * chevron ink spans the middle half of its box, twice a regular icon's inset, so it pulls in by
+ * 1/8em on each side to sit where a regular icon's ink would. Pass it as a Button's `iconEnd`.
+ */
+export declare function TriggerChevron(): React.JSX.Element;
+/** The trigger chevron in a Button's end slot. */
+export declare function ButtonChevron({ size }: {
+    size: ButtonSize;
+}): React.JSX.Element;
 export declare function ButtonLabel({ variant, children }: {
     variant: ButtonVariant;
     children: React.ReactNode;

package/dist/src/ds/components/ClearFiltersButton/clear-filters-button.d.ts

@@ -0,0 +1,12 @@
+import type { MouseEventHandler } from 'react';
+export type ClearFiltersButtonProps = {
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    /** Tooltip and accessible name. */
+    label?: string;
+    disabled?: boolean;
+};
+/**
+ * Resets every filter in a toolbar: a round icon button at the toolbar's height, named by its
+ * tooltip. A single filter's own × removes just that filter, so this one never uses an ×.
+ */
+export declare function ClearFiltersButton({ onClick, label, disabled }: ClearFiltersButtonProps): import("react").JSX.Element;

package/dist/src/ds/components/ClearFiltersButton/index.d.ts

@@ -0,0 +1 @@
+export * from './clear-filters-button';

package/dist/src/ds/components/Combobox/combobox-styles.d.ts

@@ -29,7 +29,6 @@ export declare const comboboxStyles: {
     /** @deprecated A `Field` lays out the combobox and its error. */
     readonly root: 'flex flex-col gap-1.5';
     /** Chevron icon in trigger — decorative icon token shared by every field. */
-    readonly chevron: 'ml-2 h-4 w-4 shrink-0 text-muted-foreground';
     /** Placeholder text color */
     readonly placeholder: 'text-muted-foreground';
     /**

package/dist/src/ds/components/DateTimeRangePicker/date-time-range-picker.d.ts

@@ -1,5 +1,5 @@
-import type { ReactElement } from 'react';
-import type { ButtonProps } from '../Button/Button';
+import type { Ref } from 'react';
+import type { TextButtonSize } from '../Button/Button';
 export type DateRangePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';
 export interface DateTimeRangePickerProps {
     preset?: DateRangePreset;
@@ -19,15 +19,16 @@ export interface DateTimeRangePickerProps {
     minDate?: Date;
     /** Subset of presets to show. If omitted, all presets are shown. */
     presets?: readonly DateRangePreset[];
-    /** Size passed through to the trigger Button. Defaults to 'md'. */
-    size?: ButtonProps['size'];
+    /** Size of the trigger Button. Defaults to 'sm', the toolbar rung. */
+    size?: TextButtonSize;
     /**
-     * Replace the default Button trigger. Receives the current label (preset name or
-     * custom range) and must return an element the menu/popover can attach to.
+     * The preset a custom range resets to. While a custom range is applied, a × joined to the
+     * trigger takes the chevron's place and switches back to it.
      */
-    renderTrigger?: (props: {
-        label: string;
-        disabled?: boolean;
-    }) => ReactElement;
+    defaultPreset?: DateRangePreset;
+    /** Replaces what the reset × does, e.g. to undo a histogram zoom before falling back to `defaultPreset`. */
+    onReset?: () => void;
+    /** The trigger Button. */
+    ref?: Ref<HTMLButtonElement>;
 }
-export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, maxRangeMs, minDate, presets, size, renderTrigger, }: DateTimeRangePickerProps): import("react").JSX.Element;
+export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, maxRangeMs, minDate, presets, size, defaultPreset, onReset, ref, }: DateTimeRangePickerProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/filter-bar-chip.d.ts

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { FilterBarField, FilterBarItem, FilterBarValue } from './types';
 import type { ControlSize } from '../../primitives/control-size';
-export declare const segmentClass: string;
 export declare const FILTER_BAR_CONTROL_SIZE: ControlSize;
+export declare const segmentClass: string;
 export declare const alwaysHighlightProps: {
     autoHighlight: boolean;
 };
@@ -13,10 +13,12 @@ export declare function FilterBarFieldLabel({ field, label }: {
     field: FilterBarField | undefined;
     label?: string;
 }): import("react").JSX.Element;
-/** Inline style carrying a field's accent onto its field segment (text + icon). */
-export declare const fieldSegmentAccentStyle: (field: FilterBarField | undefined) => {
-    color: string;
-} | undefined;
+type AccentStyle = CSSProperties & {
+    '--control-icon-rest': string;
+    '--control-icon-hover': string;
+};
+/** Inline style carrying a field's accent onto its field segment: text and icon, at rest and on hover. */
+export declare const fieldSegmentAccentStyle: (field: FilterBarField | undefined) => AccentStyle | undefined;
 export declare const formatValue: (value: FilterBarValue, field: FilterBarField | undefined) => string;
 export type FilterBarChipProps = {
     item: FilterBarItem;
@@ -44,6 +46,7 @@ export declare namespace FilterBarChip {
 export declare function FilterBarChipField(): import("react").JSX.Element;
 export declare function FilterBarChipOperator(): import("react").JSX.Element | null;
 export declare function FilterBarChipValue(): import("react").JSX.Element | null;
-/** The trailing × segment of a chip. */
+/** The trailing × segment of a chip: its own cell, so it keeps an even inset instead of the pill's outer one. */
 export declare const removeSegmentClass: string;
 export declare function FilterBarChipRemove(): import("react").JSX.Element | null;
+export {};

package/dist/src/ds/components/FilterBar/filter-bar-time-range.d.ts

@@ -0,0 +1,19 @@
+import type { FilterBarField, FilterBarItem } from './types';
+import type { DateTimeRangePickerProps } from '../DateTimeRangePicker/date-time-range-picker';
+export declare const FILTER_BAR_TIME_RANGE_FIELD_ID = "timeRange";
+/**
+ * Synthetic field backing the time range control. Hidden from the input's field step (the
+ * range cannot be added twice) but registered so the bar resolves its label and takes it into
+ * keyboard navigation. Add it to the bar's `fields` and `FILTER_BAR_TIME_RANGE_ITEM` to its
+ * `items`, then render `FilterBar.TimeRange` for that item from `FilterBar.Chips`.
+ */
+export declare const FILTER_BAR_TIME_RANGE_FIELD: FilterBarField;
+export declare const FILTER_BAR_TIME_RANGE_ITEM: FilterBarItem;
+export type FilterBarTimeRangeProps = Omit<DateTimeRangePickerProps, 'size' | 'ref'>;
+/**
+ * A filter bar's time range: the `DateTimeRangePicker` itself at the bar's rung, so it looks and
+ * behaves exactly as it does anywhere else, reset × included. It scopes the bar rather than
+ * filtering it, so it is not a removable chip; the wrapper only joins it to the bar's arrow-key
+ * order.
+ */
+export declare function FilterBarTimeRange(props: FilterBarTimeRangeProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/filter-bar.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { FilterBarAdvancedChip } from './filter-bar-advanced-chip';
 import { FilterBarChip } from './filter-bar-chip';
 import { FilterBarInput } from './filter-bar-input';
+import { FilterBarTimeRange } from './filter-bar-time-range';
 import type { FilterBarExpression, FilterBarField, FilterBarItem, FilterBarOperator } from './types';
 type FilterBarValueProps = {
     /** Flat list of filters, implicitly joined with `and`. Advanced filters are never offered. */
@@ -59,6 +60,7 @@ export declare namespace FilterBar {
     export { FilterBarChip as Chip };
     export { FilterBarAdvancedChip as AdvancedChip };
     export { FilterBarInput as Input };
+    export { FilterBarTimeRange as TimeRange };
 }
 /**
  * Default layout: one editable chip per root item, one "Advanced filter" chip per root

package/dist/src/ds/components/FilterBar/index.d.ts

@@ -3,6 +3,8 @@ export type { FilterBarChipsProps, FilterBarProps } from './filter-bar';
 export { FilterBarChip, FilterBarChipField, FilterBarChipOperator, FilterBarChipValue, FilterBarChipRemove, } from './filter-bar-chip';
 export type { FilterBarChipProps } from './filter-bar-chip';
 export { FilterBarInput } from './filter-bar-input';
+export { FILTER_BAR_TIME_RANGE_FIELD, FILTER_BAR_TIME_RANGE_FIELD_ID, FILTER_BAR_TIME_RANGE_ITEM, FilterBarTimeRange, } from './filter-bar-time-range';
+export type { FilterBarTimeRangeProps } from './filter-bar-time-range';
 export type { FilterBarInputProps } from './filter-bar-input';
 export { FilterBarAdvancedChip } from './filter-bar-advanced-chip';
 export type { FilterBarAdvancedChipProps } from './filter-bar-advanced-chip';

package/dist/src/ds/components/FilterBar/use-filter-bar-item-keys.d.ts

@@ -0,0 +1,23 @@
+import type { KeyboardEvent, RefObject } from 'react';
+import type { FilterBarItem } from './types';
+/**
+ * An item's place in the bar's keyboard order, shared by every control the bar renders for an
+ * item (a chip, the time range): registers whether the input's Backspace may remove it, and moves
+ * focus with the arrows across the item's segments and on to its neighbours. Put `onKeyDown` on
+ * the element `rootRef` points at.
+ */
+export declare function useFilterBarItemKeys({ item, rootRef, pinned, removable, inert, segmentSelector, }: {
+    item: FilterBarItem;
+    rootRef: RefObject<HTMLElement | null>;
+    /** Never removed by the input's Backspace or by Clear. */
+    pinned: boolean;
+    /** Backspace / Delete on the item removes it. */
+    removable: boolean;
+    /** Ignore keys entirely (a draft, a read-only or a leaving chip). */
+    inert?: boolean;
+    /** The item's focusable segments, in order, inside `rootRef`. */
+    segmentSelector?: string;
+}): {
+    index: number;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+};

package/dist/src/ds/components/ListSearch/list-search.d.ts

@@ -4,6 +4,7 @@ export type ListSearchProps = {
     label: string;
     placeholder: string;
     debounceMs?: number;
+    /** Defaults to 'sm', the toolbar rung. */
     size?: SearchInputProps['size'];
     /**
      * Optional controlled value. When provided, ListSearch stays in sync with this

package/dist/src/ds/components/MetricsTable/metrics-table-rows.d.ts

@@ -6,10 +6,17 @@ export type MetricsTableBodyProps<Row> = RowBehavior<Row> & {
     rows: Row[];
     getRowKey: (row: Row) => string;
     empty: MetricsTableProps<Row>['empty'];
-    /** Rows drawn while loading. */
-    skeletonRows: number;
+    /** A paged table's rows per page: drawn while loading, and kept as the empty table's height. */
+    pageSize: number | undefined;
     isLoading: boolean;
 };
 /** Skeleton rows while loading, the empty message without rows, else the page's rows. */
-export declare function MetricsTableBody<Row>({ columns, rows, getRowKey, empty, skeletonRows, isLoading, ...behavior }: MetricsTableBodyProps<Row>): import("react").JSX.Element[] | import("react").JSX.Element | null;
+export declare function MetricsTableBody<Row>({ columns, rows, getRowKey, empty, pageSize, isLoading, ...behavior }: MetricsTableBodyProps<Row>): import("react").JSX.Element[] | import("react").JSX.Element | null;
+/**
+ * Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it
+ * shows. Rows of the same box, not a fixed height, so it follows the row's text size.
+ */
+export declare function MetricsTableFiller({ count }: {
+    count: number;
+}): import("react").JSX.Element | null;
 export {};

package/dist/src/ds/components/MetricsTable/metrics-table.d.ts

@@ -3,6 +3,6 @@ import type { MetricsTableProps } from './metrics-table-types';
  * A table for the numbers behind a chart: one row per series or group, columns for its figures,
  * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row
  * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.
- * With `pageSize` it pages long lists. For a share of a total, a compact `ShareBar` fits better.
+ * With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.
  */
 export declare function MetricsTable<Row>({ columns, rows, getRowKey, sort, defaultSort, onSortChange, onRowClick, onRowHover, isRowDimmed, isRowActive, rowTitle, empty, pageSize, isLoading, 'aria-label': ariaLabel, className, }: MetricsTableProps<Row>): import("react").JSX.Element;

package/dist/src/ds/primitives/control-icon.d.ts

@@ -0,0 +1,3 @@
+export declare const controlIconState: string;
+/** The same for a bare-glyph control that is not a Button (a chip's ×). */
+export declare const controlIconOnly = "[--control-icon-hover:var(--foreground)]";

package/dist/src/ds/primitives/control-size.d.ts

@@ -3,6 +3,7 @@ export type ControlSize = 'sm' | 'md' | 'lg';
 export declare const ControlSizeContext: React.Context<ControlSize | undefined>;
 export declare const controlHeight: Record<ControlSize, string>;
 export declare const controlSizeClasses: Record<ControlSize, string>;
+export declare const controlSpacing: Record<ControlSize, string>;
 export type ControlTriggerVisualVariant = 'default' | 'ghost';
 export declare const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string>;
 export declare function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined;