@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/src/domains/traces/utils/to-searchable-spans.d.ts

@@ -1,5 +1,4 @@
-import { LightSpanRecord } from '@mastra/core/storage';
-import { SearchableSpan } from '../types';
+import { LightSpanRecord, SearchableSpan } from '../types';
 /**
  * Attach a precomputed search haystack to each span.
  *
@@ -14,7 +13,9 @@ import { SearchableSpan } from '../types';
  *
  * Inputs are left untouched; each result is a new object.
  */
-export declare function toSearchableSpans(spans: LightSpanRecord[]): SearchableSpan[];
+export declare function toSearchableSpans<Span extends LightSpanRecord>(spans: Span[]): Array<Span & {
+    searchText: string;
+}>;
 /**
  * React Query `select` for the `{ traceId, spans }` payload returned by
  * `getTraceLight` and `getBranch`.

package/dist/src/ds/components/Activity/activity.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+export type ActivityStatus = 'initializing' | 'working' | 'ready';
+export declare function ActivityBelt({ status, label, className, ...props }: ComponentProps<'span'> & {
+    status: ActivityStatus;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function ActivityWick({ status, label, className, ...props }: ComponentProps<'span'> & {
+    status: ActivityStatus;
+    label?: string;
+}): import("react").JSX.Element;

package/dist/src/ds/components/Activity/activity.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ActivityWick } from './activity';
+declare const meta: {
+    title: string;
+    component: typeof ActivityWick;
+    args: {
+        status: "working";
+    };
+    argTypes: {
+        status: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Wick: Story;
+export declare const Belts: Story;
+export declare const StateTransitions: Story;

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

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

package/dist/src/ds/components/Collapsible/collapsible.d.ts

@@ -9,6 +9,8 @@ type CollapsibleTriggerProps = Omit<CollapsiblePrimitive.Trigger.Props, 'classNa
 declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 type CollapsibleContentProps = Omit<CollapsiblePrimitive.Panel.Props, 'className'> & {
     className?: string;
+    /** Stretch the content to the space its parent leaves, so a scroll area inside can fill it. */
+    fill?: boolean;
 };
 declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/src/ds/components/Collapsible/collapsible.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const DefaultOpen: Story;
 export declare const SettingsSection: Story;
 export declare const MultipleCollapsibles: Story;
+export declare const FillsConstrainedPanel: Story;

package/dist/src/ds/components/Composer/composer.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 export type ComposerProps = ComponentPropsWithoutRef<'form'>;
 export interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {
-    /** Maximum height of the scrolling input viewport. */
+    variant?: 'inline' | 'textarea';
     maxHeight?: string;
 }
 export declare const Composer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
@@ -9,18 +9,19 @@ export interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {
     sendingPulseKey?: number;
 }
 export declare const ComposerBox: import('react').ForwardRefExoticComponent<ComposerBoxProps & import('react').RefAttributes<HTMLDivElement>>;
+export type ComposerTone = 'default' | 'green' | 'purple' | 'orange';
 export interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {
     busy?: boolean;
+    tone?: ComposerTone;
 }
-/**
- * Edge for the composer box it wraps: a conic arc lit under the cursor on hover,
- * spinning on its own while the agent runs, never both at once. Wraps rather
- * than decorates because the box clips its overflow and would cut the arc off.
- */
 export declare const ComposerRing: {
-    ({ busy, className, ...props }: ComposerRingProps): import("react").JSX.Element;
+    ({ busy, tone, className, style, onPointerEnter, onPointerMove, ...props }: ComposerRingProps): import("react").JSX.Element;
     displayName: string;
 };
 export declare const ComposerAttachments: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ComposerInput: import('react').ForwardRefExoticComponent<ComposerInputProps & import('react').RefAttributes<HTMLTextAreaElement>>;
 export declare const ComposerActions: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export interface ComposerToneLabelProps extends ComponentPropsWithoutRef<'span'> {
+    tone: ComposerTone;
+}
+export declare function ComposerToneLabel({ tone, className, ...props }: ComposerToneLabelProps): import("react").JSX.Element;

package/dist/src/ds/components/Composer/composer.stories.d.ts

@@ -6,6 +6,12 @@ type Story = StoryObj<typeof Composer>;
 export declare const Empty: Story;
 export declare const WithAttachmentsAndActions: Story;
 export declare const DisabledAndRunning: Story;
-/** Hover the box and move around: the lit arc follows the cursor. */
 export declare const RingIdle: Story;
 export declare const RingBusy: Story;
+export declare const ModeStates: Story;
+export declare const ModeStatesLight: Story;
+export declare const WithModeControls: Story;
+export declare const WithModelAndVoiceControls: Story;
+export declare const TallDraft: Story;
+export declare const Disabled: Story;
+export declare const CustomMode: Story;

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

@@ -1,5 +1,5 @@
-export { Composer, ComposerActions, ComposerAttachments, ComposerBox, ComposerInput, ComposerRing } from './composer';
-export type { ComposerBoxProps, ComposerInputProps, ComposerProps, ComposerRingProps } from './composer';
+export { Composer, ComposerActions, ComposerAttachments, ComposerBox, ComposerInput, ComposerRing, ComposerToneLabel, } from './composer';
+export type { ComposerBoxProps, ComposerInputProps, ComposerProps, ComposerRingProps, ComposerTone, ComposerToneLabelProps, } from './composer';
 export { ComposerSuggestions } from './commands/composer-suggestions';
 export type { ComposerSuggestionItem, ComposerSuggestionsProps } from './commands/composer-suggestions';
 export { useComposerCommands } from './commands/use-composer-commands';

package/dist/src/ds/components/Composer/use-composer-pointer.d.ts

@@ -0,0 +1,9 @@
+import { PointerEvent } from 'react';
+export declare function useComposerPointer(enabled: boolean): {
+    trackPointer: (event: PointerEvent<HTMLDivElement>) => void;
+    pointerStyle: {
+        '--composer-spotlight-x': string | undefined;
+        '--composer-spotlight-y': string | undefined;
+        '--composer-ring-angle': string | undefined;
+    };
+};

package/dist/src/ds/components/DataCodeSection/data-code-section.d.ts

@@ -13,5 +13,7 @@ export interface DataCodeSectionProps {
     className?: string;
     /** Highlight lines that differ from another document. */
     diff?: DataCodeSectionDiff;
+    /** Extra controls rendered in the header, before the built-in copy/expand buttons. */
+    actions?: React.ReactNode;
 }
-export declare function DataCodeSection({ codeStr, title, dialogTitle, icon, simplified, className, diff, }: DataCodeSectionProps): import("react").JSX.Element | null;
+export declare function DataCodeSection({ codeStr, title, dialogTitle, icon, simplified, className, diff, actions, }: DataCodeSectionProps): import("react").JSX.Element | null;

package/dist/src/ds/components/DataDetailsPanel/data-details-panel-code-section.d.ts

@@ -4,5 +4,7 @@ export interface DataDetailsPanelCodeSectionProps {
     codeStr?: string;
     simplified?: boolean;
     className?: string;
+    /** Extra controls rendered in the header, before the built-in copy button. */
+    actions?: React.ReactNode;
 }
-export declare function DataDetailsPanelCodeSection({ codeStr, title, icon, simplified, className, }: DataDetailsPanelCodeSectionProps): import("react").JSX.Element | null;
+export declare function DataDetailsPanelCodeSection({ codeStr, title, icon, simplified, className, actions, }: DataDetailsPanelCodeSectionProps): import("react").JSX.Element | null;

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

@@ -1,6 +1,8 @@
+import { ButtonProps } from '../Button';
 export interface DataPanelCloseButtonProps {
     onClick: () => void;
     tooltip?: string;
     className?: string;
+    variant?: ButtonProps['variant'];
 }
-export declare function DataPanelCloseButton({ onClick, tooltip, className }: DataPanelCloseButtonProps): import("react").JSX.Element;
+export declare function DataPanelCloseButton({ onClick, tooltip, className, variant, }: DataPanelCloseButtonProps): import("react").JSX.Element;

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

@@ -2,5 +2,7 @@ import { ReactNode, Ref } from 'react';
 export interface DataPanelContentProps {
     children: ReactNode;
     ref?: Ref<HTMLDivElement>;
+    /** Layout overrides (e.g. padding) for the scroll container. */
+    className?: string;
 }
-export declare function DataPanelContent({ children, ref }: DataPanelContentProps): import("react").JSX.Element;
+export declare function DataPanelContent({ children, ref, className }: DataPanelContentProps): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+export interface DataPanelHeaderActionsProps {
+    children: React.ReactNode;
+}
+/**
+ * Right-side action slot of a `DataPanel.Header`. Mirrors `HeaderAction` with `gap-2`
+ * (these are `size="sm"` controls, like the page header actions) and wraps when the panel is too narrow.
+ */
+export declare function DataPanelHeaderActions({ children }: DataPanelHeaderActionsProps): import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+export interface DataPanelHeaderContentProps {
+    children: React.ReactNode;
+}
+/** Left block of a `DataPanel.Header`: heading on top, optional `Metadata` below. */
+export declare function DataPanelHeaderContent({ children }: DataPanelHeaderContentProps): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+export interface DataPanelMetadataProps {
+    children: React.ReactNode;
+}
+/** Row of small `Meta` pills under a `DataPanel.Heading`. */
+export declare function DataPanelMetadata({ children }: DataPanelMetadataProps): import("react").JSX.Element;
+export interface DataPanelMetaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {
+    /** Element/component to render as (e.g. a router `Link`). Defaults to `span`. */
+    as?: React.ElementType;
+    href?: string;
+    to?: string;
+    /** Prefix icon (bare SVG). */
+    icon?: React.ReactNode;
+    /** Shown on hover/focus; for a static (non-link) meta a string tooltip also becomes the accessible name. */
+    tooltip?: React.ReactNode;
+    children: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare function DataPanelMeta({ as, icon, tooltip, children, className, ...props }: DataPanelMetaProps): import("react").JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel-next-prev-nav.d.ts

@@ -1,7 +1,9 @@
+import { ButtonProps } from '../Button';
 export interface DataPanelNextPrevNavProps {
     onPrevious?: () => void;
     onNext?: () => void;
     previousLabel?: string;
     nextLabel?: string;
+    variant?: ButtonProps['variant'];
 }
-export declare function DataPanelNextPrevNav({ onPrevious, onNext, previousLabel, nextLabel, }: DataPanelNextPrevNavProps): import("react").JSX.Element;
+export declare function DataPanelNextPrevNav({ onPrevious, onNext, previousLabel, nextLabel, variant, }: DataPanelNextPrevNavProps): import("react").JSX.Element;

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

@@ -1,6 +1,28 @@
+import * as React from 'react';
 export interface DataPanelProps {
-    collapsed?: boolean;
+    /** Whether the panel is shown. The panel is always a modal Drawer dialog. */
+    open: boolean;
+    /** Called when the user dismisses the panel (close button, Escape, backdrop, swipe). */
+    onClose?: () => void;
+    /** Accessible dialog name (screen-reader only; the visible title comes from `DataPanel.Heading`). */
+    title: string;
+    /** Accessible dialog description (screen-reader only). */
+    description?: string;
+    /**
+     * Elevation level when several sibling panels are open at once (not nested in
+     * the React tree, so Base UI's own stacking doesn't apply). A deeper panel is
+     * narrower so the one beneath peeks out on the left. Siblings stack in mount
+     * order: render the deeper panel after the shallower one.
+     */
+    depth?: 1 | 2 | 3;
+    /**
+     * 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.
+     */
+    size?: 'md' | 'half' | 'wide' | 'full';
     children: React.ReactNode;
     className?: string;
 }
-export declare function DataPanelRoot({ collapsed, children, className }: DataPanelProps): import("react").JSX.Element;
+export declare function DataPanelRoot({ open, onClose, title, description, depth, size, children, className, }: DataPanelProps): React.JSX.Element;

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

@@ -1,8 +1,11 @@
 import { DataPanelCloseButton } from './data-panel-close-button';
 import { DataPanelContent } from './data-panel-content';
 import { DataPanelHeader } from './data-panel-header';
+import { DataPanelHeaderActions } from './data-panel-header-actions';
+import { DataPanelHeaderContent } from './data-panel-header-content';
 import { DataPanelHeading } from './data-panel-heading';
 import { DataPanelLoadingData } from './data-panel-loading-data';
+import { DataPanelMeta, DataPanelMetadata } from './data-panel-metadata';
 import { DataPanelNextPrevNav } from './data-panel-next-prev-nav';
 import { DataPanelNoData } from './data-panel-no-data';
 import { DataPanelRoot } from './data-panel-root';
@@ -10,7 +13,11 @@ import { DataPanelSectionHeading } from './data-panel-section-heading';
 import { DataCodeSection } from '../DataCodeSection';
 export declare const DataPanel: typeof DataPanelRoot & {
     Header: typeof DataPanelHeader;
+    HeaderContent: typeof DataPanelHeaderContent;
+    HeaderActions: typeof DataPanelHeaderActions;
     Heading: typeof DataPanelHeading;
+    Metadata: typeof DataPanelMetadata;
+    Meta: typeof DataPanelMeta;
     CloseButton: typeof DataPanelCloseButton;
     NextPrevNav: typeof DataPanelNextPrevNav;
     LoadingData: typeof DataPanelLoadingData;

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

@@ -6,7 +6,10 @@ export default meta;
 type Story = StoryObj<DataPanelProps>;
 export declare const Default: Story;
 export declare const WithNavigation: Story;
+export declare const WithMetadata: Story;
 export declare const NoData: Story;
 export declare const Loading: Story;
-export declare const Collapsed: Story;
+export declare const Wide: Story;
 export declare const DisabledNav: Story;
+export declare const Stacked: Story;
+export declare const SiblingsWithDepth: Story;

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

@@ -1,7 +1,10 @@
 export { DataPanel } from './data-panel';
 export type { DataPanelProps } from './data-panel-root';
 export type { DataPanelHeaderProps } from './data-panel-header';
+export type { DataPanelHeaderContentProps } from './data-panel-header-content';
+export type { DataPanelHeaderActionsProps } from './data-panel-header-actions';
 export type { DataPanelHeadingProps } from './data-panel-heading';
+export type { DataPanelMetadataProps, DataPanelMetaProps } from './data-panel-metadata';
 export type { DataPanelCloseButtonProps } from './data-panel-close-button';
 export type { DataPanelNextPrevNavProps } from './data-panel-next-prev-nav';
 export type { DataPanelLoadingDataProps } from './data-panel-loading-data';

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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { ButtonProps } from '../Button/Button';
 export type DateRangePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';
 export interface DateTimeRangePickerProps {
@@ -6,10 +7,23 @@ export interface DateTimeRangePickerProps {
     dateFrom?: Date;
     dateTo?: Date;
     onDateChange?: (value: Date | undefined, type: 'from' | 'to') => void;
+    /**
+     * Called once with both ends when a custom range is applied. When provided it replaces
+     * the two `onDateChange` calls for that step, so consumers can write the range atomically.
+     */
+    onDateRangeChange?: (from: Date | undefined, to: Date | undefined) => void;
     disabled?: boolean;
     /** 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'];
+    /**
+     * 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.
+     */
+    renderTrigger?: (props: {
+        label: string;
+        disabled?: boolean;
+    }) => ReactElement;
 }
-export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, disabled, presets, size, }: DateTimeRangePickerProps): import("react").JSX.Element;
+export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, presets, size, renderTrigger, }: DateTimeRangePickerProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/default-operators.d.ts

@@ -0,0 +1,3 @@
+import { FilterBarOperator } from './types';
+/** Opt-in starter set. Pure data: the component attaches no semantics to ids. */
+export declare const DEFAULT_FILTER_OPERATORS: FilterBarOperator[];

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { FilterBarField, FilterBarItem, FilterBarValue } from './types';
+export declare const segmentClass: string;
+export declare const editableSegmentClass: string;
+/** Field label with its optional leading icon — used by chips, the draft chip and field option lists. */
+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;
+export declare const formatValue: (value: FilterBarValue, field: FilterBarField | undefined) => string;
+export type FilterBarChipProps = {
+    item: FilterBarItem;
+    /** Locked chip: plain labels, no editors, no remove button. */
+    readOnly?: boolean;
+    /** `false` keeps the chip editable but drops the remove button and ignores Backspace/Delete. */
+    removable?: boolean;
+    className?: string;
+    /** Custom segment composition; defaults to Field · Operator · Value · Remove. */
+    children?: ReactNode;
+};
+export declare function FilterBarChip({ item, readOnly, removable, className, children }: FilterBarChipProps): import("react").JSX.Element;
+export declare namespace FilterBarChip {
+    var Field: typeof FilterBarChipField;
+    var Operator: typeof FilterBarChipOperator;
+    var Value: typeof FilterBarChipValue;
+    var Remove: typeof FilterBarChipRemove;
+}
+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;
+export declare function FilterBarChipRemove(): import("react").JSX.Element | null;

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

@@ -0,0 +1,4 @@
+/** Removes every removable filter. Rendered by FilterBar at its trailing edge; hidden while nothing can be removed. */
+export declare function FilterBarClear({ label }: {
+    label: string;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSegment } from './types';
+export type FilterBarContextValue = {
+    fields: FilterBarField[];
+    operators: FilterBarOperator[];
+    items: FilterBarItem[];
+    addItem: (item: Omit<FilterBarItem, 'id'>) => void;
+    updateItem: (id: string, patch: Partial<Omit<FilterBarItem, 'id'>>) => void;
+    removeItem: (id: string) => void;
+    /** Removes every removable item (chips rendered with `removable={false}` stay). */
+    clear: () => void;
+    /** Whether at least one item can be removed, i.e. whether Clear has anything to do. */
+    hasRemovableItems: boolean;
+    /** Called by chips so `clear` and the Clear button know which items are pinned. */
+    registerNonRemovable: (itemId: string, nonRemovable: boolean) => void;
+    getField: (fieldId: string) => FilterBarField | undefined;
+    getOperator: (operatorId: string) => FilterBarOperator | undefined;
+    /** Operators allowed for a field (`field.operators` or every root operator). */
+    getFieldOperators: (field: FilterBarField) => FilterBarOperator[];
+    registerSegment: (itemId: string, segment: FilterBarSegment, el: HTMLElement | null) => void;
+    registerInput: (el: HTMLInputElement | null) => void;
+    /**
+     * Focus a segment of the nearest editable chip starting at `fromIndex` and
+     * walking in `direction` (read-only chips register no segments and are skipped).
+     * Returns false if nothing was focused.
+     */
+    focusChip: (fromIndex: number, direction: -1 | 1, segment: FilterBarSegment) => boolean;
+    focusInput: () => void;
+    /** Called by chips to move focus after a removal. */
+    focusAfterRemove: (removedIndex: number) => void;
+    announce: (message: string) => void;
+    announcement: string;
+    ariaLabel: string;
+};
+export declare function useFilterBarContext(): FilterBarContextValue;
+export declare function createFilterId(): string;
+export declare function emptyValueFor(operator: FilterBarOperator | undefined): string | string[];
+export type FilterBarProviderProps = {
+    fields: FilterBarField[];
+    operators: FilterBarOperator[];
+    value: FilterBarItem[];
+    onValueChange: (items: FilterBarItem[]) => void;
+    ariaLabel: string;
+    children: ReactNode;
+};
+export declare function FilterBarProvider({ fields, operators, value, onValueChange, ariaLabel, children, }: FilterBarProviderProps): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { FilterBarField, FilterBarOperator } from './types';
+export type FilterBarDraftChipProps = {
+    field: FilterBarField | undefined;
+    operator: FilterBarOperator | undefined;
+};
+/**
+ * The in-progress filter, accumulated inline next to the input as its segments
+ * get picked (`Status` → `Status · is`). Purely presentational: the input owns
+ * the draft and handles stepping back (Escape / Backspace).
+ */
+export declare function FilterBarDraftChip({ field, operator }: FilterBarDraftChipProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,10 @@
+export type FilterBarInputProps = {
+    placeholder?: string;
+    className?: string;
+    'aria-label'?: string;
+};
+/**
+ * Typeahead entry point: type to pick a field, then an operator, then a value.
+ * Focus never leaves the input; the popup is driven with the arrow keys.
+ */
+export declare function FilterBarInput({ placeholder, className, 'aria-label': ariaLabel, }: FilterBarInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export type FilterBarOptionListProps<T> = {
+    getKey: (option: T) => string;
+    renderOption: (option: T) => ReactNode;
+    /** Explicit check mark, used where Base UI's selection state is not the source of truth (multi-value step). */
+    isSelected?: (option: T) => boolean;
+    isLoading?: boolean;
+    error?: unknown;
+    emptyText?: string;
+    'aria-label': string;
+    'aria-multiselectable'?: boolean;
+};
+/**
+ * List/status/empty rows for a `ComboboxPrimitive.Root`. Items come from the
+ * root's `items`; highlight and keyboard navigation are owned by Base UI.
+ */
+export declare function FilterBarOptionList<T>({ getKey, renderOption, isSelected, isLoading, error, emptyText, 'aria-label': ariaLabel, 'aria-multiselectable': multiselectable, }: FilterBarOptionListProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { FilterBarChip } from './filter-bar-chip';
+import { FilterBarInput } from './filter-bar-input';
+import { FilterBarField, FilterBarItem, FilterBarOperator } from './types';
+export type FilterBarProps = {
+    fields: FilterBarField[];
+    operators: FilterBarOperator[];
+    value: FilterBarItem[];
+    onValueChange: (items: FilterBarItem[]) => void;
+    'aria-label'?: string;
+    /** Accessible label of the trailing "remove every filter" button. */
+    clearLabel?: string;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * Braintrust-style filter bar: `field → operator → value` filters built from a
+ * single typeahead input, rendered as inline editable chips. Domain-agnostic —
+ * fields, operators and values are plain strings supplied by the consumer.
+ *
+ * @example
+ * <FilterBar value={items} onValueChange={setItems} fields={fields} operators={DEFAULT_FILTER_OPERATORS}>
+ *   <FilterBar.Chips />
+ *   <FilterBar.Input />
+ * </FilterBar>
+ */
+export declare function FilterBar({ fields, operators, value, onValueChange, 'aria-label': ariaLabel, clearLabel, className, children, }: FilterBarProps): import("react").JSX.Element;
+export declare namespace FilterBar {
+    var Chips: typeof FilterBarChips;
+    var Chip: typeof FilterBarChip;
+    var Input: typeof FilterBarInput;
+}
+/** Default layout: one editable chip per item, in order. */
+export declare function FilterBarChips(): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithPrefilledFilters: Story;
+export declare const LazyValues: Story;
+export declare const LockedChip: Story;
+export declare const CustomLayout: Story;
+export declare const KeyboardOnly: Story;

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

@@ -0,0 +1,8 @@
+export { FilterBar, FilterBarChips } from './filter-bar';
+export type { 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 type { FilterBarInputProps } from './filter-bar-input';
+export { DEFAULT_FILTER_OPERATORS } from './default-operators';
+export type { FilterBarArity, FilterBarField, FilterBarFieldType, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarScalar, FilterBarSegment, FilterBarSuggestionsContext, FilterBarSuggestionsResolver, FilterBarValue, } from './types';

package/dist/src/ds/components/FilterBar/match-query.d.ts

@@ -0,0 +1,4 @@
+/** Every whitespace-separated term of `query` must appear in `text` (case-insensitive). */
+export declare function matchesQuery(text: string, query: string): boolean;
+/** Base UI `filter` for `ComboboxPrimitive.Root`, matching on the item label. */
+export declare function matchesQueryFilter<T>(item: T, query: string, itemToString?: (item: T) => string): boolean;

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

@@ -0,0 +1,59 @@
+import { LucideIcon } from 'lucide-react';
+/** How many values an operator takes: `none` (is empty), `one` (default) or `many` (string[]). */
+export type FilterBarArity = 'none' | 'one' | 'many';
+export type FilterBarOperator = {
+    id: string;
+    label: string;
+    arity?: FilterBarArity;
+};
+export type FilterBarOption = {
+    value: string;
+    label?: string;
+};
+export type FilterBarSuggestionsContext = {
+    query: string;
+    operatorId: string;
+    signal: AbortSignal;
+};
+export type FilterBarSuggestionsResolver = (ctx: FilterBarSuggestionsContext) => FilterBarOption[] | Promise<FilterBarOption[]>;
+/**
+ * Value kind of a field. Defaults to `text`.
+ * - `number`: free text must parse as a finite number; the input gets a decimal keyboard.
+ * - `boolean`: strict `true` / `false` suggestions are provided unless the field supplies its own.
+ */
+export type FilterBarFieldType = 'text' | 'number' | 'boolean';
+/** A committed scalar value, typed according to the field's `type`. */
+export type FilterBarScalar = string | number | boolean;
+export type FilterBarValue = FilterBarScalar | FilterBarScalar[];
+/** Parses raw input text into the field's value type. Suggestion values and free text both go through this. */
+export declare const parseFieldValue: (type: FilterBarFieldType | undefined, text: string) => FilterBarScalar;
+export type FilterBarField = {
+    id: string;
+    label: string;
+    /** Leading icon, shown in the field step and on the chip's field segment. */
+    icon?: LucideIcon;
+    /** Accent (any CSS color) applied to the chip's field segment (label + icon). */
+    color?: string;
+    type?: FilterBarFieldType;
+    /** Operator ids allowed for this field. Defaults to every root operator. */
+    operators?: string[];
+    /**
+     * Optional value suggestions. Absent → free text.
+     * - array: static list, filtered locally by the query.
+     * - function: lazy resolver, called only once the value step opens (never at
+     *   mount), re-invoked (debounced) when the query changes. Receives an
+     *   AbortSignal; stale responses are discarded.
+     */
+    suggestions?: FilterBarOption[] | FilterBarSuggestionsResolver;
+    /** When true, the value must come from suggestions (no free text). */
+    strict?: boolean;
+    /** Never offered in the input's field step; existing chips for it still render with the field label. */
+    hidden?: boolean;
+};
+export type FilterBarItem = {
+    id: string;
+    fieldId: string;
+    operatorId: string;
+    value: FilterBarValue;
+};
+export type FilterBarSegment = 'field' | 'operator' | 'value' | 'remove';