@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/src/domains/traces/trace-filters.d.ts

@@ -1,9 +1,11 @@
 import { EntityType } from '@mastra/core/observability';
 import { ListTracesArgs } from '@mastra/core/storage';
 import { TraceMetadataFilterField } from './hooks/use-trace-metadata-filter-fields';
+import { TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope } from './trace-query-filters';
 import { TraceDatePreset } from './types';
-import { FilterBarField, FilterBarItem, FilterBarOperator } from '../../ds/components/FilterBar/types';
+import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSuggestionsResolver } from '../../ds/components/FilterBar/types';
 import { PropertyFilterToken } from '../../ds/components/PropertyFilter/types';
+export type { TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope } from './trace-query-filters';
 type EntityTypeValue = `${EntityType}`;
 export type EntityOptions = {
     label: string;
@@ -84,8 +86,26 @@ export declare const TRACE_PROPERTY_FILTER_PARAM_BY_FIELD: {
     readonly serviceName: "filterServiceName";
     readonly environment: "filterEnvironment";
     readonly experimentId: "filterExperimentId";
+    readonly 'spans.name': "filterSpanName";
+    readonly 'spans.spanType': "filterSpanType";
+    readonly 'spans.model': "filterSpanModel";
+    readonly 'spans.provider': "filterSpanProvider";
+    readonly 'spans.durationMs': "filterSpanDurationMs";
+    readonly 'spans.error': "filterSpanError";
+    readonly 'scores.scorerId': "filterScorerId";
+    readonly 'scores.score': "filterScore";
+    readonly 'feedback.feedbackType': "filterFeedbackType";
+    readonly 'feedback.value': "filterFeedbackValue";
+    readonly 'feedback.comment': "filterFeedbackComment";
 };
 export declare const TRACE_PROPERTY_FILTER_FIELD_IDS: Array<keyof typeof TRACE_PROPERTY_FILTER_PARAM_BY_FIELD>;
+/** The operator of a filter lives in a sibling `<valueParam>.op` param; omitted
+ *  means the default (`is`). Metadata keys cannot contain dots, so the suffix is
+ *  unambiguous. */
+export declare const TRACE_FILTER_OPERATOR_PARAM_SUFFIX = ".op";
+export declare const traceFilterOperatorParam: (valueParam: string) => string;
+/** Default operator for a token without one: arrays mean set membership. */
+export declare const traceFilterTokenOperator: (token: TraceFilterToken) => TraceFilterOperatorId;
 export declare const TRACE_STATUS_VALUES: Set<TraceStatusFilter>;
 export declare const DEFAULT_TRACE_FILTERS_STORAGE_KEY = "mastra:traces:saved-filters";
 /** Serialize the filter-related URL params (relative date preset + rootEntityType +
@@ -103,9 +123,10 @@ export declare function loadTraceFiltersFromStorage(storageKey?: string): URLSea
  *  to hydrate from localStorage on page mount (we only hydrate when the URL is
  *  filter-clean, i.e. the user landed here via a plain sidebar nav). */
 export declare function hasAnyTraceFilterParams(params: URLSearchParams): boolean;
-/** The trace query API only runs equality (`eq`) and set membership (`in`)
- *  predicates, so the FilterBar offers exactly those two operators. */
-export declare const TRACE_FILTER_BAR_OPERATORS: FilterBarOperator[];
+/** Every operator the trace query API supports, keyed by the UI id that goes in the URL. */
+export declare const TRACE_FILTER_BAR_OPERATORS: (FilterBarOperator & {
+    id: TraceFilterOperatorId;
+})[];
 export declare const traceFilterFieldIcon: (fieldId: string) => any;
 /** Stable per-field accent; known keys use a curated hue, others fall back to a hashed one. */
 export declare const traceFilterFieldColor: (fieldId: string) => string;
@@ -114,26 +135,28 @@ export declare const traceFilterFieldColor: (fieldId: string) => string;
  *  `running` status, so no chip advertises a filter that has no effect. Hidden
  *  fields are never offered in the input's field step but still label existing
  *  (e.g. scoped, read-only) chips. */
-export declare function createTraceFilterBarFields({ availableRootEntityNames, availableEnvironments, hiddenFieldIds, metadataFields, }: {
+export declare function createTraceFilterBarFields({ availableRootEntityNames, availableEnvironments, hiddenFieldIds, metadataFields, valueSuggestions, }: {
     availableRootEntityNames: string[];
     availableEnvironments: string[];
     hiddenFieldIds?: readonly string[];
     /** Discovered `metadata.<key>` paths with a lazy value-suggestions resolver each. */
     metadataFields?: readonly TraceMetadataFilterField[];
+    /** Builds a lazy value resolver for a related-scope field (`spans.model`, …). Absent → free text. */
+    valueSuggestions?: (scope: TraceQueryRelatedScope, path: string) => FilterBarSuggestionsResolver;
 }): FilterBarField[];
 /** One FilterBar item per token, keyed by field id so chip order == URL order.
  *  Empty values ('' / []) are kept: that's a pending chip whose field was just
  *  changed and whose value hasn't been picked yet (the query builder skips it).
  *  Only the legacy 'Any' sentinel is mapped back to an empty value. */
-export declare function traceTokensToFilterBarItems(tokens: PropertyFilterToken[]): FilterBarItem[];
-export declare function filterBarItemsToTraceTokens(items: FilterBarItem[]): PropertyFilterToken[];
+export declare function traceTokensToFilterBarItems(tokens: TraceFilterToken[]): FilterBarItem[];
+export declare function filterBarItemsToTraceTokens(items: FilterBarItem[]): TraceFilterToken[];
 /**
  * Read filter tokens from URL search params preserving the order in which each
  * filter was first added (URLSearchParams iterates in insertion order). This
  * is used by the Filter popover + PropertyFilterApplied pills so the UI reflects the
  * order the user created the filters in.
  */
-export declare function getTracePropertyFilterTokens(searchParams: URLSearchParams): PropertyFilterToken[];
+export declare function getTracePropertyFilterTokens(searchParams: URLSearchParams): TraceFilterToken[];
 export declare function getPreservedTraceFilterParams(searchParams: URLSearchParams): URLSearchParams;
 /**
  * Clear all filter params from `params` and re-add them in the given `tokens`
@@ -141,7 +164,7 @@ export declare function getPreservedTraceFilterParams(searchParams: URLSearchPar
  * creation order of filters. Handles the generic `filterX` params plus the
  * dedicated synthetic params (rootEntityType, status).
  */
-export declare function applyTracePropertyFilterTokens(params: URLSearchParams, tokens: PropertyFilterToken[]): void;
+export declare function applyTracePropertyFilterTokens(params: URLSearchParams, tokens: TraceFilterToken[]): void;
 export declare function buildTraceListFilters({ rootEntityType, status, dateFrom, dateTo, tokens, }: {
     rootEntityType?: string;
     status?: TraceStatusFilter;
@@ -149,4 +172,3 @@ export declare function buildTraceListFilters({ rootEntityType, status, dateFrom
     dateTo?: Date;
     tokens: PropertyFilterToken[];
 }): ListTracesArgs['filters'];
-export {};

package/dist/src/domains/traces/trace-list-columns.d.ts

@@ -1,8 +1,13 @@
-export declare const TRACE_OPTIONAL_COLUMNS: readonly ["input", "entity", "duration", "inputTokens", "outputTokens", "estimatedCost"];
+export declare const TRACE_OPTIONAL_COLUMNS: readonly ["type", "input", "duration", "endTime", "environment", "inputTokens", "outputTokens", "totalTokens", "estimatedCost"];
 export type TraceOptionalColumn = (typeof TRACE_OPTIONAL_COLUMNS)[number];
-export declare const TRACE_USAGE_COLUMNS: readonly ["inputTokens", "outputTokens", "estimatedCost"];
+export declare const TRACE_USAGE_COLUMNS: readonly ["inputTokens", "outputTokens", "totalTokens", "estimatedCost"];
+/** Trace properties that are not regular columns but can be pinned as a custom column. */
+export declare const TRACE_CUSTOM_COLUMN_FIELDS: readonly ["traceId", "threadId", "resourceId", "entityId"];
+export type TraceCustomColumn = (typeof TRACE_CUSTOM_COLUMN_FIELDS)[number];
+export declare const TRACE_CUSTOM_COLUMN_LABELS: Record<TraceCustomColumn, string>;
 export type TraceColumnPreferences = {
     readonly visibleColumns: readonly TraceOptionalColumn[];
+    readonly customColumns: readonly TraceCustomColumn[];
     readonly metadataKeys: readonly string[];
 };
 export type TraceUsageSummary = {
@@ -12,9 +17,13 @@ export type TraceUsageSummary = {
     costUnit?: string;
 };
 export declare const DEFAULT_TRACE_COLUMN_PREFERENCES: TraceColumnPreferences;
+export declare function isTraceCustomColumn(value: unknown): value is TraceCustomColumn;
 export declare function parseTraceColumnPreferences(serialized: string | undefined): TraceColumnPreferences;
 export declare function serializeTraceColumnPreferences(preferences: TraceColumnPreferences): string;
 export declare function buildTraceListColumns(preferences: TraceColumnPreferences): string;
+/** Core names root spans `agent run: 'id'` (+ optional ` (resumed)`); the Type column already carries
+ *  the kind, so the list shows just the id and any suffix. Core names are untouched for exporters. */
+export declare function displayTraceName<T extends string | null | undefined>(name: T): T;
 export declare function formatTraceMetadataValue(metadata: Record<string, unknown> | null | undefined, key: string): string | undefined;
 export declare function hasTraceColumn(preferences: TraceColumnPreferences, column: TraceOptionalColumn): boolean;
 export declare function hasTraceUsageColumn(preferences: TraceColumnPreferences): boolean;

package/dist/src/domains/traces/trace-query-filters.d.ts

@@ -1,7 +1,24 @@
 import { QueryTracesInput } from '@mastra/client-js';
-import { buildTraceListFilters } from './trace-filters';
+import { buildTraceListFilters, TraceStatusFilter } from './trace-filters';
+import { PropertyFilterToken } from '../../ds/components/PropertyFilter/types';
 export declare const TRACE_QUERY_UNSUPPORTED_FILTER_FIELDS: Set<string>;
-export declare function buildTraceQueryRequest({ rootEntityType, status, dateFrom, dateTo, tokens, now, }: Parameters<typeof buildTraceListFilters>[0] & {
+export declare const TRACE_FILTER_OPERATOR_IDS: readonly ["is", "isNot", "in", "notIn", "exists", "notExists", "gt", "gte", "lt", "lte"];
+export type TraceFilterOperatorId = (typeof TRACE_FILTER_OPERATOR_IDS)[number];
+export declare const isTraceFilterOperatorId: (value: string) => value is TraceFilterOperatorId;
+/** A trace filter chip: `operatorId` defaults to `is` (equality / set membership). */
+export type TraceFilterToken = PropertyFilterToken & {
+    operatorId?: TraceFilterOperatorId;
+};
+/** Fields whose values must be sent as numbers. Non-numeric input is dropped. */
+export declare const TRACE_QUERY_NUMERIC_FIELD_IDS: Set<string>;
+/** Trace-level fields that may be unset. "is not X" on these must also keep traces
+ *  where the field is missing, so the predicate is `or[ne, notExists]`. */
+export declare const TRACE_QUERY_OPTIONAL_TRACE_FIELD_IDS: Set<string>;
+declare const TRACE_QUERY_RELATED_SCOPES: readonly ["spans", "scores", "feedback"];
+export type TraceQueryRelatedScope = (typeof TRACE_QUERY_RELATED_SCOPES)[number];
+export declare function buildTraceQueryRequest({ rootEntityType, status, dateFrom, dateTo, tokens, now, }: Omit<Parameters<typeof buildTraceListFilters>[0], 'tokens' | 'status'> & {
+    status?: TraceStatusFilter;
+    tokens: TraceFilterToken[];
     now: Date;
 }): Pick<QueryTracesInput, 'timeRange' | 'where'>;
 export declare const TRACE_QUERY_DISCOVERY_MAX_RANGE_MS: number;
@@ -15,3 +32,4 @@ export declare function clampTraceDiscoveryTimeRange(timeRange: {
     from: string;
     to: string;
 };
+export {};

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

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
 export declare const buttonVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | "primary" | "destructive" | "destructive-ghost" | null | undefined;
-    size?: "lg" | "sm" | "xs" | "md" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
 export type ButtonVariant = NonNullable<ButtonVariantsProps['variant']>;

package/dist/src/ds/components/ButtonsGroup/buttons-group.d.ts

@@ -1,20 +1,11 @@
-import { VariantProps } from 'class-variance-authority';
 import { ControlSize } from '../../primitives/control-size';
 import * as React from 'react';
 type Orientation = 'horizontal' | 'vertical';
-declare const buttonsGroupVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    spacing?: "default" | "close" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ButtonsGroupVariantsProps = VariantProps<typeof buttonsGroupVariants>;
-export type ButtonsGroupSpacing = NonNullable<ButtonsGroupVariantsProps['spacing']>;
 export type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {
     orientation?: Orientation;
-    spacing?: ButtonsGroupSpacing;
 };
 export declare const ButtonsGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     orientation?: Orientation;
-    spacing?: ButtonsGroupSpacing;
 } & React.RefAttributes<HTMLDivElement>>;
 export type ButtonsGroupSeparatorProps = React.ComponentPropsWithoutRef<'div'> & {
     orientation?: Orientation;
@@ -28,4 +19,4 @@ export type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'> & {
 export declare const ButtonsGroupText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     size?: ControlSize;
 } & React.RefAttributes<HTMLDivElement>>;
-export { buttonsGroupVariants };
+export {};

package/dist/src/ds/components/ButtonsGroup/buttons-group.stories.d.ts

@@ -4,8 +4,12 @@ declare const meta: Meta<typeof ButtonsGroup>;
 export default meta;
 type Story = StoryObj<typeof ButtonsGroup>;
 export declare const Default: Story;
-export declare const DefaultSpacing: Story;
-export declare const CloseSpacing: Story;
+/**
+ * A segmented view toggle: the selected segment is `default` (filled), the rest are `ghost`.
+ * The group draws one continuous ring whether or not a segment is filled, and the seam between
+ * two segments is a single pixel — never two stacked borders.
+ */
+export declare const AsSegmentedControl: Story;
 /**
  * A split button: a primary action joined to a chevron that opens a real menu of related
  * actions. The chevron is a `DropdownMenu.Trigger asChild`, so it stays a real `Button` and
@@ -15,7 +19,7 @@ export declare const CloseSpacing: Story;
  */
 export declare const AsSplitButton: Story;
 export declare const Vertical: Story;
-export declare const VerticalCloseSpacing: Story;
+export declare const VerticalOutline: Story;
 export declare const WithSeparator: Story;
 export declare const VerticalWithSeparator: Story;
 /**
@@ -42,3 +46,10 @@ export declare const WithText: Story;
  * `rounded-lg`). The `w-[420px]` on the group is just the demo container width.
  */
 export declare const SearchWithDropdown: Story;
+/**
+ * Two field triggers joined — Studio's composer pairs a provider picker with a model picker
+ * this way. A field's resting edge is its material's inset rim, which paints all four sides,
+ * so the group flattens the material and gives both segments the border it can halve at the
+ * seam. Hover and focus move that border instead of the rim.
+ */
+export declare const AsFieldPair: Story;

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

@@ -2,16 +2,14 @@ import { VariantProps } from 'class-variance-authority';
 import { LinkComponent } from '../../types/link-component';
 import * as React from 'react';
 declare const cardVariants: (props?: ({
-    appearance?: "outlined" | "surface" | null | undefined;
-    elevation?: "flat" | "raised" | "elevated" | null | undefined;
+    elevation?: "flat" | "raised" | null | undefined;
     interactive?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
     as?: React.ElementType;
 };
 export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    appearance?: "outlined" | "surface" | null | undefined;
-    elevation?: "flat" | "raised" | "elevated" | null | undefined;
+    elevation?: "flat" | "raised" | null | undefined;
     interactive?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     as?: React.ElementType;
@@ -20,7 +18,7 @@ export type CardLinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> &
     href: string;
     LinkComponent?: LinkComponent;
 };
-export declare function CardLink({ className, appearance, elevation, LinkComponent: Link, ...props }: CardLinkProps): React.JSX.Element;
+export declare function CardLink({ className, elevation, LinkComponent: Link, ...props }: CardLinkProps): React.JSX.Element;
 export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;

package/dist/src/ds/components/Card/card.stories.d.ts

@@ -4,5 +4,5 @@ declare const meta: Meta<typeof Card>;
 export default meta;
 type Story = StoryObj<typeof Card>;
 export declare const Default: Story;
-export declare const AppearancesAndElevation: Story;
+export declare const Elevation: Story;
 export declare const InteractiveLinks: Story;

package/dist/src/ds/components/ChartTooltip/chart-tooltip.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type ChartTooltipProps = ComponentPropsWithoutRef<'div'>;
+/**
+ * The floating readout a chart shows on hover — scatter points, line series,
+ * sankey nodes, lifeline markers.
+ *
+ * It is a raised surface, so it carries no border of its own: the rim lives in
+ * the `shadow-overlay` utility. Call sites pass only what is genuinely local — positioning
+ * and sizing — never background, border or shadow.
+ */
+export declare function ChartTooltip({ className, ...props }: ChartTooltipProps): import("react").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './chart-tooltip';

package/dist/src/ds/components/ChatShell/chat-shell.d.ts

@@ -8,8 +8,10 @@ export type ChatShellProps = ComponentPropsWithoutRef<'div'> & {
  * composer docks inside it, every region shares one column.
  *
  * Tuned through custom properties, all defaulted here: `--chat-column` (column
- * width), `--chat-surface` (page colour), `--chat-fade` (the band the veil ramps
- * in across, above the composer), `--chat-veil` (strongest it ever gets — the
+ * width), `--chat-surface` (the colour the composer veil ramps to — the shell
+ * paints no fill of its own and inherits whatever surface hosts it, so this has
+ * to name that same surface), `--chat-fade` (the band the veil ramps in
+ * across, above the composer), `--chat-veil` (strongest it ever gets — the
  * transcript keeps showing through), `--chat-gutter` (room below the composer),
  * `--chat-inset-end` (room an overlay panel claims on the end edge).
  */

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

@@ -23,10 +23,7 @@ export declare function comboboxTriggerClass({ variant, size, error, className,
     error?: boolean;
     className?: string;
 }): string;
-/**
- * Options are shared menu items. Options may carry a description (two lines),
- * so the fixed Button height becomes a minimum and the item grows with `py-1`.
- */
+/** Options are shared menu items, which already grow to fit a second line. */
 export declare const comboboxItemClass: (props?: ({
     multiple?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -55,7 +52,7 @@ export declare const comboboxStyles: {
     /** Options list */
     readonly list: "p-1 empty:p-0";
     /** Scroll container around the List; hosts the fluid highlight so it scrolls with the rows. */
-    readonly listScroller: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden";
+    readonly listScroller: "max-h-dropdown overflow-y-auto overflow-x-hidden";
     /** Option item base — rounded-lg sits concentrically inside rounded-xl + p-1. */
     readonly item: string;
     /** Multi-select item — same item rhythm with a right-aligned selected check. */
@@ -71,9 +68,9 @@ export declare const comboboxStyles: {
     /** Option label */
     readonly optionLabel: "truncate";
     /** Option description */
-    readonly optionDescription: "text-ui-sm text-muted-foreground truncate";
+    readonly optionDescription: "text-caption text-muted-foreground truncate";
     /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
     readonly optionEnd: "ml-auto flex items-center shrink-0";
     /** Error message */
-    readonly error: "text-ui-sm text-accent2";
+    readonly error: "text-caption text-accent2";
 };

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

@@ -23,7 +23,10 @@ type ComboboxSharedProps = {
     onOpenChange?: (open: boolean) => void;
     container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;
     error?: string;
+    id?: string;
+    name?: string;
     'aria-label'?: string;
+    'aria-describedby'?: string;
     /** Which edge of the trigger the popup lines up with. `end` opens it leftwards (e.g. an icon trigger at the end of a row). */
     align?: 'start' | 'center' | 'end';
     allowCustomValue?: boolean;

package/dist/src/ds/components/Combobox/combobox.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Combobox>;
 export default meta;
 type Story = StoryObj<typeof Combobox>;
 export declare const Default: Story;
+export declare const WithError: Story;
 export declare const WithValue: Story;
 export declare const ModelSelector: Story;
 export declare const Disabled: Story;

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

@@ -1 +1 @@
-export declare const dataKeysAndValuesValueStyles = "text-ui-smd text-neutral3 min-w-0 py-0.5 pr-6";
+export declare const dataKeysAndValuesValueStyles = "text-body-sm text-muted-foreground min-w-0 py-0.5 pr-6";

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

@@ -2,6 +2,7 @@ import { ComponentProps } from 'react';
 import { DataListNextPageLoading } from '../data-list-next-page-loading';
 import { DataListNoMatch } from '../data-list-no-match';
 import { DataListRoot } from '../data-list-root';
+import { DataListSortableTopCell } from '../data-list-sortable-top-cell';
 import { DataListTop } from '../data-list-top';
 import { ScoresDataListDateCell, ScoresDataListTimeCell, ScoresDataListInputCell, ScoresDataListEntityCell, ScoresDataListScoreCell } from './scores-data-list-cells';
 declare function ScoresDataListRoot(props: ComponentProps<typeof DataListRoot>): import("react").JSX.Element;
@@ -13,6 +14,7 @@ export declare const ScoresDataList: typeof ScoresDataListRoot & {
         as?: import('react').ElementType;
         sticky?: import('../shared').DataListSticky;
     } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "className" | "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    SortableTopCell: typeof DataListSortableTopCell;
     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;

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

@@ -11,11 +11,10 @@ export interface TracesDataListInputCellProps {
     input?: string | null;
 }
 export declare function TracesDataListInputCell({ input }: TracesDataListInputCellProps): import("react").JSX.Element;
-export interface TracesDataListEntityCellProps {
+export interface TracesDataListTypeCellProps {
     entityType?: string | null;
-    entityName?: string | null;
 }
-export declare function TracesDataListEntityCell({ entityType, entityName }: TracesDataListEntityCellProps): import("react").JSX.Element;
+export declare function TracesDataListTypeCell({ entityType }: TracesDataListTypeCellProps): import("react").JSX.Element;
 export interface TracesDataListStatusCellProps {
     status?: string | null;
 }

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

@@ -3,11 +3,12 @@ import { DataListCreatedCell, DataListIdCell } 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';
+import { DataListSortableTopCell } from '../data-list-sortable-top-cell';
 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 { TracesDataListNameCell, TracesDataListInputCell, TracesDataListEntityCell, TracesDataListStatusCell } from './traces-data-list-cells';
+import { TracesDataListNameCell, TracesDataListInputCell, TracesDataListTypeCell, TracesDataListStatusCell } from './traces-data-list-cells';
 declare function TracesDataListRoot(props: ComponentProps<typeof DataListRoot>): import("react").JSX.Element;
 export declare const TracesDataList: typeof TracesDataListRoot & {
     Top: typeof DataListTop;
@@ -17,6 +18,7 @@ export declare const TracesDataList: typeof TracesDataListRoot & {
         as?: import('react').ElementType;
         sticky?: import('../shared').DataListSticky;
     } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "className" | "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    SortableTopCell: typeof DataListSortableTopCell;
     TopCellWithTooltip: typeof DataListTopCellWithTooltip;
     RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('../shared').DataListRowSharedProps & import('react').RefAttributes<HTMLButtonElement>>;
     NoMatch: typeof DataListNoMatch;
@@ -27,7 +29,7 @@ export declare const TracesDataList: typeof TracesDataListRoot & {
     CreatedCell: typeof DataListCreatedCell;
     NameCell: typeof TracesDataListNameCell;
     InputCell: typeof TracesDataListInputCell;
-    EntityCell: typeof TracesDataListEntityCell;
+    TypeCell: typeof TracesDataListTypeCell;
     StatusCell: typeof TracesDataListStatusCell;
     NextPageLoading: typeof DataListNextPageLoading;
 };

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

@@ -35,7 +35,7 @@ export type DataListRowHeaderCellProps = Omit<DataListCellProps, 'sticky'>;
 export declare function DataListRowHeaderCell({ children, className, ...rest }: DataListRowHeaderCellProps): import("react").JSX.Element;
 export type DataListNumberCellProps = DataListCellProps & {
     /**
-     * Emphasizes the value with a brighter tone and semibold weight — use for the
+     * Emphasizes the value with the ink tone and the label role — use for the
      * primary metric in a row (e.g. a total or headline number).
      */
     highlight?: boolean;
@@ -70,7 +70,7 @@ export declare function DataListDateCell({ timestamp }: DataListDateCellProps):
 export interface DataListCreatedCellProps {
     timestamp: Date | string;
 }
-/** Combined date + time cell — `MMM dd h:mm:ss a` (e.g. `Aug 31 1:07:47 pm`), no milliseconds. */
+/** Compact date + time cell — always `MMM d HH:mm:ss` (e.g. `Aug 31 13:07:47`), 24h, no milliseconds. */
 export declare function DataListCreatedCell({ timestamp }: DataListCreatedCellProps): import("react").JSX.Element;
 export interface DataListTimeCellProps {
     timestamp: Date | string;

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

@@ -13,7 +13,8 @@ export type DataListFit = 'content' | 'container';
 /**
  * Surface treatment of the list.
  *
- * - `default`: rows sit on a rounded `surface4` panel.
+ * - `default`: rows sit as wells inside a raised card panel — the same material
+ *   and elevation as a card, a popover or a settings container.
  * - `light`: no panel behind the rows; rows sit directly on the page.
  */
 export type DataListVariant = 'default' | 'light';
@@ -22,7 +23,7 @@ export type DataListRootProps = Omit<ScrollAreaProps, 'children' | 'orientation'
     columns: string;
     /** Grid width behavior; defaults to `content` (existing horizontal-scroll sizing). */
     fit?: DataListFit;
-    /** Surface treatment; defaults to `default` (rows on a `surface4` panel). */
+    /** Surface treatment; defaults to `default` (rows on a raised card panel). */
     variant?: DataListVariant;
     /**
      * Edge fades from the underlying ScrollArea. DataList keeps the top fade off

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import { DataListTopCellProps } from './data-list-top-cell';
-export type DataListSortDirection = 'ascending' | 'descending';
-export type DataListSortableTopCellProps = Omit<DataListTopCellProps, 'aria-sort' | 'as' | 'children' | 'onClick' | 'role'> & {
+export type DataListSort = 'asc' | 'desc';
+export type DataListSortableTopCellProps<K extends string = string> = Omit<DataListTopCellProps, 'aria-sort' | 'as' | 'children' | 'onClick'> & {
     children: ReactNode;
-    sortDirection?: DataListSortDirection;
-    defaultSortDirection?: DataListSortDirection;
-    onSortChange: (direction: DataListSortDirection) => void;
+    sortKey: K;
+    sort?: DataListSort;
+    onSortChange: (sort: DataListSort, key: K) => void;
     align?: 'start' | 'end';
 };
-export declare function DataListSortableTopCell({ children, sortDirection, defaultSortDirection, onSortChange, align, className, ...props }: DataListSortableTopCellProps): import("react").JSX.Element;
+export declare function DataListSortableTopCell<K extends string = string>({ children, sortKey, sort, onSortChange, align, className, ...props }: DataListSortableTopCellProps<K>): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { DataListActionsCell, DataListCell, DataListTextCell, DataListNameCell, DataListDescriptionCell, DataListIdCell, DataListRowHeaderCell, DataListNumberCell, DataListSelectCell, DataListDateCell, DataListTimeCell } from './data-list-cells';
+import { DataListActionsCell, DataListCell, DataListTextCell, DataListNameCell, DataListDescriptionCell, DataListIdCell, DataListRowHeaderCell, DataListNumberCell, DataListSelectCell, DataListDateCell, DataListCreatedCell, 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';
@@ -9,7 +9,7 @@ import { DataListSubHeading } from './data-list-subheading';
 import { DataListTop } from './data-list-top';
 import { DataListTopCellWithTooltip, DataListTopCellSmart, DataListTopSelectCell } from './data-list-top-cell';
 export type { DataListRootProps, DataListVariant } from './data-list-root';
-export type { DataListSortableTopCellProps, DataListSortDirection } from './data-list-sortable-top-cell';
+export type { DataListSortableTopCellProps, DataListSort } from './data-list-sortable-top-cell';
 export declare const DataList: typeof DataListRoot & {
     Top: typeof DataListTop;
     TopCells: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -46,6 +46,7 @@ export declare const DataList: typeof DataListRoot & {
     RowHeaderCell: typeof DataListRowHeaderCell;
     NumberCell: typeof DataListNumberCell;
     DateCell: typeof DataListDateCell;
+    CreatedCell: typeof DataListCreatedCell;
     TimeCell: typeof DataListTimeCell;
     SelectCell: typeof DataListSelectCell;
     TopSelectCell: typeof DataListTopSelectCell;

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

@@ -13,6 +13,11 @@ export declare const RowStates: Story;
 export declare const WithSelection: Story;
 /** Trailing actions stay hidden until their row is hovered or focused. */
 export declare const WithActions: Story;
+/**
+ * Column sorting is opt-in per column via `SortableTopCell`. The parent owns the sort state:
+ * `sort` is set only on the active column, and `onSortChange` receives the next sort and the column key.
+ */
+export declare const WithSorting: Story;
 export declare const Empty: Story;
 export declare const Loading: Story;
 /** Horizontal and vertical scrolling with a sticky header and first column. */

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

@@ -5,20 +5,29 @@
  *
  * 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 bg-surface2", "transition-colors duration-200"];
+export declare const dataListRowOuterStyles: readonly ["group/data-list-row data-list-row col-span-full relative min-h-9", "before:absolute before:inset-0 before:-z-2 before:rounded-[inherit] before:bg-background before:content-['']"];
 /**
  * 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.
+ *
+ * Hover is not painted per row: the root renders one fluid `fill-subtle`
+ * highlight under the row content. Rows are sunken wells (`--background`) inside
+ * the card panel, whose material also shows through the 1px gaps between them,
+ * so a resting tone steps to `--surface-panel` — the opaque twin of a `--fill`
+ * rung over the well — rather than to `--card`, which would make a selected row
+ * the exact colour of the separators around it. Pressed rises a full `--fill`
+ * rung, the same rung a resting control carries, and error sits on the row
+ * element itself so it reads on top of the highlight.
  */
-export declare const dataListRowStateStyles: readonly ["hover:bg-surface3 active:bg-surface4", "focus-visible:bg-surface3 has-focus-visible:bg-surface3", "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 dataListRowStateStyles: readonly ["active:bg-fill", "focus-visible:bg-surface-panel has-focus-visible:bg-surface-panel", "data-featured:before:bg-surface-panel has-data-featured:before:bg-surface-panel has-data-selected:before:bg-surface-panel", "data-[variant=error]:bg-notice-destructive/10 has-data-[variant=error]:bg-notice-destructive/10"];
 /**
  * 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-4 px-3 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-4 px-3 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", "focus-visible:bg-surface3 has-focus-visible:bg-surface3", "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-4 px-3", "group/data-list-row data-list-row col-span-full relative min-h-9 bg-surface2", "transition-colors duration-200"];
+export declare const dataListRowStyles: readonly ["grid grid-cols-subgrid gap-4 px-3 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", "before:absolute before:inset-0 before:-z-2 before:rounded-[inherit] before:bg-background before:content-['']", "active:bg-fill", "focus-visible:bg-surface-panel has-focus-visible:bg-surface-panel", "data-featured:before:bg-surface-panel has-data-featured:before:bg-surface-panel has-data-selected:before:bg-surface-panel", "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-4 px-3", "group/data-list-row data-list-row col-span-full relative min-h-9", "before:absolute before:inset-0 before:-z-2 before:rounded-[inherit] before:bg-background before:content-['']"];
 /**
  * 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

package/dist/src/ds/components/DataPanel/data-panel-root.d.ts

@@ -19,7 +19,8 @@ export interface DataPanelProps {
      * Drawer width. `md` (default) is a narrow detail panel whose width shrinks
      * with `depth`. `half`/`wide`/`full` are for multi-column content (e.g. the
      * trace panel); each `depth` level trims them by a small fixed amount so a
-     * same-size parent still peeks out beneath.
+     * same-size parent still peeks out beneath. Changing `size` while open
+     * animates the width.
      */
     size?: 'md' | 'half' | 'wide' | 'full';
     children: React.ReactNode;

package/dist/src/ds/components/Dialog/dialog-context.d.ts

@@ -8,9 +8,8 @@ export type DialogContextValue = {
 export declare const DialogContext: import('react').Context<DialogContextValue>;
 export declare function useDialogContext(): DialogContextValue;
 export declare const dialogActionSizeClasses: {
-    readonly xs: "min-h-form-xs leading-ui-xs";
-    readonly sm: "min-h-form-sm leading-ui-sm";
-    readonly md: "min-h-form-md leading-ui-md";
-    readonly lg: "min-h-form-lg leading-ui-md";
+    readonly sm: "min-h-control-sm";
+    readonly md: "min-h-control-md";
+    readonly lg: "min-h-control-lg";
 };
 export declare const dialogActionLayoutClasses = "h-auto min-w-0 max-w-full whitespace-normal wrap-anywhere max-[22rem]:w-full";