@mastra/playground-ui 56.0.0 → 57.0.0-alpha.0

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

@@ -0,0 +1,36 @@
+import { FilterBarExpression, FilterBarGroup, FilterBarItem, FilterBarLogic } from './types';
+export type FilterBarValueInput = FilterBarItem[] | FilterBarExpression;
+export declare const ROOT_GROUP_ID = "root";
+export declare const normalize: (value: FilterBarValueInput) => FilterBarExpression;
+/** Hands back the shape the consumer gave us: flat arrays only ever contain items. */
+export declare const denormalize: (expr: FilterBarExpression, flat: boolean) => FilterBarValueInput;
+export type FlatEntry = {
+    item: FilterBarItem;
+    groupId?: string;
+};
+/**
+ * Items in document order (pre-order, depth-first), each tagged with the group it lives
+ * in. A group's leaves sit where its advanced chip sits in the bar, so arrow navigation
+ * walks the bar left to right.
+ */
+export declare const flattenItems: (expr: FilterBarExpression) => FlatEntry[];
+export declare const findGroup: (expr: FilterBarExpression, groupId: string) => FilterBarGroup | undefined;
+export declare const findItem: (expr: FilterBarExpression, itemId: string) => FlatEntry | undefined;
+/** Nesting level of a group: root-level groups are at depth 1; `0` when not found. */
+export declare const groupDepth: (expr: FilterBarExpression, groupId: string) => number;
+/** Number of leaf conditions under a group, at any depth. */
+export declare const countLeaves: (group: FilterBarGroup) => number;
+/** Ids of a group and every node below it. */
+export declare const collectIds: (group: FilterBarGroup) => string[];
+export declare const updateItem: (expr: FilterBarExpression, itemId: string, patch: Partial<Omit<FilterBarItem, "id">>) => FilterBarExpression;
+/** Removes an item or a group by id at any depth. Groups left empty are kept (see `pruneEmptyGroups`). */
+export declare const removeNode: (expr: FilterBarExpression, id: string) => FilterBarExpression;
+export declare const removeNodes: (expr: FilterBarExpression, ids: Iterable<string>) => FilterBarExpression;
+/** Drops every group with no leaf left, bottom-up. */
+export declare const pruneEmptyGroups: (expr: FilterBarExpression) => FilterBarExpression;
+export declare const insertItem: (expr: FilterBarExpression, groupId: string | undefined, item: FilterBarItem) => FilterBarExpression;
+export declare const setGroupLogic: (expr: FilterBarExpression, groupId: string, logic: FilterBarLogic) => FilterBarExpression;
+/** Appends a group to the root, or inside `parentId`. */
+export declare const createGroup: (expr: FilterBarExpression, parentId: string | undefined, group: FilterBarGroup) => FilterBarExpression;
+/** Drops removable items at any depth and every group that ends up empty; pinned items stay. */
+export declare const clearRemovable: (expr: FilterBarExpression, pinned: ReadonlySet<string>) => FilterBarExpression;

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

@@ -1,18 +1,31 @@
 import { ReactNode } from 'react';
+import { FilterBarAdvancedChip } from './filter-bar-advanced-chip';
 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[];
+import { FilterBarExpression, FilterBarField, FilterBarItem, FilterBarOperator } from './types';
+type FilterBarValueProps = {
+    /** Flat list of filters, implicitly joined with `and`. Advanced filters are never offered. */
     value: FilterBarItem[];
     onValueChange: (items: FilterBarItem[]) => void;
+} | {
+    /**
+     * Tree of filters and groups. Root nodes are joined with `and`; each root group renders
+     * as one "Advanced filter" chip whose popover edits the nested `and` / `or` logic.
+     */
+    value: FilterBarExpression;
+    onValueChange: (expression: FilterBarExpression) => void;
+};
+export type FilterBarProps = FilterBarValueProps & {
+    fields: FilterBarField[];
+    operators: FilterBarOperator[];
     /**
      * Id given to a newly added item. Defaults to a random id. Consumers that rebuild `value` from
      * their own store (URL, query params…) should return the id they will rebuild it with, so the
      * draft chip and the committed chip are the same element.
      */
     createItemId?: (fieldId: string) => string;
+    /** How deep advanced-filter groups may nest (root-level group = 1). Defaults to 3. */
+    maxDepth?: number;
     'aria-label'?: string;
     /** Accessible label of the trailing "remove every filter" button. */
     clearLabel?: string;
@@ -24,21 +37,28 @@ export type FilterBarProps = {
  * single typeahead input, rendered as inline editable chips. Domain-agnostic —
  * fields, operators and values are plain strings supplied by the consumer.
  *
+ * Pass a `FilterBarExpression` as `value` to enable Linear-style advanced filters:
+ * the input offers "Advanced filter…", which adds one chip whose popover hosts a
+ * recursive rule builder (`and` / `or` connectors, nested groups). The bar itself
+ * stays flat. A flat `FilterBarItem[]` stays flat.
+ *
  * @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, createItemId, 'aria-label': ariaLabel, clearLabel, className, children, }: FilterBarProps): import("react").JSX.Element;
+export declare function FilterBar({ fields, operators, value, onValueChange, createItemId, maxDepth, 'aria-label': ariaLabel, clearLabel, className, children, }: FilterBarProps): import("react").JSX.Element;
 export declare namespace FilterBar {
     var Chips: typeof FilterBarChips;
     var Chip: typeof FilterBarChip;
+    var AdvancedChip: typeof FilterBarAdvancedChip;
     var Input: typeof FilterBarInput;
 }
 /**
- * Default layout: one editable chip per item, in order, then the chip of the filter
- * being built in the input (which becomes the last item's chip once committed).
+ * Default layout: one editable chip per root item, one "Advanced filter" chip per root
+ * group, in order, then the chip of the filter being built in the bar's input (which
+ * becomes the last item's chip once committed).
  */
 export declare function FilterBarChips({ renderChip }: FilterBarChipsProps): import("react").JSX.Element;
 export type FilterBarChipsProps = {
@@ -48,3 +68,4 @@ export type FilterBarChipsProps = {
      */
     renderChip?: (item: FilterBarItem) => ReactNode;
 };
+export {};

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

@@ -4,7 +4,10 @@ export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
 export declare const WithPrefilledFilters: Story;
+export declare const FreeText: Story;
 export declare const LazyValues: Story;
 export declare const LockedChip: Story;
 export declare const CustomLayout: Story;
 export declare const KeyboardOnly: Story;
+export declare const WithAdvancedFilter: Story;
+export declare const BuildAdvancedFilterFromKeyboard: Story;

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

@@ -4,5 +4,10 @@ export { FilterBarChip, FilterBarChipField, FilterBarChipOperator, FilterBarChip
 export type { FilterBarChipProps } from './filter-bar-chip';
 export { FilterBarInput } from './filter-bar-input';
 export type { FilterBarInputProps } from './filter-bar-input';
+export { FilterBarAdvancedChip } from './filter-bar-advanced-chip';
+export type { FilterBarAdvancedChipProps } from './filter-bar-advanced-chip';
+export { FilterBarGroupEditor, FilterBarLogicToggle } from './filter-bar-group-editor';
+export type { FilterBarGroupEditorProps, FilterBarLogicToggleProps } from './filter-bar-group-editor';
 export { DEFAULT_FILTER_OPERATORS } from './default-operators';
-export type { FilterBarArity, FilterBarDraft, FilterBarField, FilterBarFieldType, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarScalar, FilterBarSegment, FilterBarSuggestionsContext, FilterBarSuggestionsResolver, FilterBarValue, } from './types';
+export { isFilterBarGroup } from './types';
+export type { FilterBarArity, FilterBarDraft, FilterBarExpression, FilterBarField, FilterBarFieldType, FilterBarGroup, FilterBarItem, FilterBarLogic, FilterBarNode, FilterBarOperator, FilterBarOption, FilterBarScalar, FilterBarSegment, FilterBarSuggestionsContext, FilterBarSuggestionsResolver, FilterBarValue, } from './types';

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

@@ -1,4 +1,5 @@
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
 /** How many values an operator takes: `none` (is empty), `one` (default) or `many` (string[]). */
 export type FilterBarArity = 'none' | 'one' | 'many';
 export type FilterBarOperator = {
@@ -9,6 +10,8 @@ export type FilterBarOperator = {
 export type FilterBarOption = {
     value: string;
     label?: string;
+    /** Leading node (avatar, swatch, icon) rendered before the label in value lists. */
+    start?: ReactNode;
 };
 export type FilterBarSuggestionsContext = {
     query: string;
@@ -49,6 +52,13 @@ export type FilterBarField = {
     strict?: boolean;
     /** Never offered in the input's field step; existing chips for it still render with the field label. */
     hidden?: boolean;
+    /**
+     * Free-text entry point. The field stays offered in the input's field step whatever the
+     * query, so typed text never dead-ends on "No matching field"; picking it with text typed
+     * commits that text as the value under the field's first operator, skipping both steps.
+     * List it first to make it the default landing option.
+     */
+    search?: boolean;
 };
 export type FilterBarItem = {
     id: string;
@@ -56,6 +66,28 @@ export type FilterBarItem = {
     operatorId: string;
     value: FilterBarValue;
 };
+export type FilterBarLogic = 'and' | 'or';
+/**
+ * Sub-filters joined by a single logic connector. Groups nest recursively (bounded by the
+ * bar's `maxDepth`); a root-level group renders as one "Advanced filter" chip whose popover
+ * edits the whole subtree.
+ */
+export type FilterBarGroup = {
+    id: string;
+    kind: 'group';
+    logic: FilterBarLogic;
+    nodes: FilterBarNode[];
+};
+export type FilterBarNode = FilterBarItem | FilterBarGroup;
+/**
+ * Tree-shaped value: root nodes joined by `logic`, groups nest their own. The bar itself
+ * always joins root nodes with `'and'`; `logic` is kept on the type for symmetry with groups.
+ */
+export type FilterBarExpression = {
+    logic: FilterBarLogic;
+    nodes: FilterBarNode[];
+};
+export declare const isFilterBarGroup: (node: FilterBarNode) => node is FilterBarGroup;
 /**
  * The filter being built in the typeahead input. Its `id` is kept when it becomes an
  * item, so the chip rendered for the draft is the very node the committed chip lands on.
@@ -66,6 +98,8 @@ export type FilterBarDraft = {
     operatorId?: string;
     /** What the draft chip showed before this step, so only the new segments animate in. */
     from: DraftStage;
+    /** Group the draft is being built inside; `undefined` = root. */
+    groupId?: string;
 };
 /** How far a draft had progressed: nothing yet, its field, or its field and operator. */
 export type DraftStage = 'none' | 'field' | 'operator';
@@ -77,5 +111,7 @@ export type FilterBarCommit = {
     item: FilterBarItem;
     from: DraftStage;
     glint: boolean;
+    /** Group the item was committed into; `undefined` = root. */
+    groupId?: string;
 };
 export type FilterBarSegment = 'field' | 'operator' | 'value' | 'remove';

package/dist/src/ds/components/FilterBar/use-settle-on-leave.d.ts

@@ -0,0 +1,2 @@
+/** Keeps a leaving node in the DOM until its exit animation has played, then releases it. */
+export declare function useSettleOnLeave(id: string, leaving: boolean, rootRef: React.RefObject<HTMLElement | null>): void;

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

@@ -1,3 +1,2 @@
-export { NoDataPageLayout } from './no-data-page-layout';
 export { PageLayout } from './page-layout';
-export { PageHeadingContext, usePageHeading } from './page-heading-context';
+export type { PageLayoutProps } from './page-layout';

package/dist/src/ds/components/PageLayout/page-layout.d.ts

@@ -1,11 +1,13 @@
-import { PageLayoutColumn } from './page-layout-column';
-import { PageLayoutMainArea } from './page-layout-main-area';
-import { PageLayoutRoot } from './page-layout-root';
-import { PageLayoutRow } from './page-layout-row';
-import { PageLayoutTopArea } from './page-layout-top-area';
-export declare const PageLayout: typeof PageLayoutRoot & {
-    TopArea: typeof PageLayoutTopArea;
-    MainArea: typeof PageLayoutMainArea;
-    Column: typeof PageLayoutColumn;
-    Row: typeof PageLayoutRow;
-};
+import { ReactNode } from 'react';
+export interface PageLayoutProps {
+    children: ReactNode;
+    /** Left side of the page header row. */
+    breadcrumbs?: ReactNode;
+    /** Right side of the page header row. */
+    headerActions?: ReactNode;
+    /** Controls pinned between the header and the scrollable body (search, filters, toggles…). */
+    actionRow?: ReactNode;
+    /** `container` pads the body (default); `fit` lets the body fill the page edge to edge. */
+    variant?: 'container' | 'fit';
+}
+export declare function PageLayout({ children, breadcrumbs, headerActions, actionRow, variant, }: PageLayoutProps): import("react").JSX.Element;

package/dist/src/ds/components/PageLayout/page-layout.stories.d.ts

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof PageLayout>;
 export default meta;
 type Story = StoryObj<typeof PageLayout>;
 export declare const FullPage: Story;
-export declare const NarrowSettings: Story;
-export declare const CenteredEmptyState: Story;
+export declare const Empty: Story;

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

@@ -1,3 +1,4 @@
+import { EmptyStateProps } from '../EmptyState';
 import * as React from 'react';
 export interface PermissionDeniedProps {
     /** Resource type (e.g., "agents", "workflows") */
@@ -10,5 +11,6 @@ export interface PermissionDeniedProps {
     actionSlot?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
+    variant?: EmptyStateProps['variant'];
 }
-export declare function PermissionDenied({ resource, title, description, actionSlot, className }: PermissionDeniedProps): React.JSX.Element;
+export declare function PermissionDenied({ resource, title, description, actionSlot, className, variant, }: PermissionDeniedProps): React.JSX.Element;

package/dist/src/ds/components/PermissionDenied/permission-denied.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof PermissionDenied>;
 export declare const Default: Story;
 export declare const ResourceSpecific: Story;
 export declare const CustomRecovery: Story;
+export declare const Fill: Story;

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

@@ -1,3 +1,4 @@
+import { EmptyStateProps } from '../EmptyState';
 export interface SessionExpiredProps {
     /** Custom title override */
     title?: string;
@@ -5,5 +6,6 @@ export interface SessionExpiredProps {
     description?: string;
     /** Additional CSS classes */
     className?: string;
+    variant?: EmptyStateProps['variant'];
 }
-export declare function SessionExpired({ title, description, className }: SessionExpiredProps): import("react").JSX.Element;
+export declare function SessionExpired({ title, description, className, variant }: SessionExpiredProps): import("react").JSX.Element;

package/dist/src/ds/components/SessionExpired/session-expired.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof SessionExpired>;
 export declare const Default: Story;
 export declare const CustomCopy: Story;
+export declare const Fill: Story;

package/dist/src/ds/components/Spinner/spinner.d.ts

@@ -1,12 +1,15 @@
 import { VariantProps } from 'class-variance-authority';
 import { ComponentPropsWithoutRef } from 'react';
 declare const spinnerVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     variant?: "default" | "pulse" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type SpinnerVariantsProps = VariantProps<typeof spinnerVariants>;
 export type SpinnerVariant = NonNullable<SpinnerVariantsProps['variant']>;
 export type SpinnerSize = NonNullable<SpinnerVariantsProps['size']>;
-export type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'color' | 'size'> & SpinnerVariantsProps;
-declare function Spinner({ className, size, variant, 'aria-label': ariaLabel, role, ...props }: SpinnerProps): import("react").JSX.Element;
+export type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'color' | 'size' | 'fill'> & SpinnerVariantsProps & {
+    /** Center the spinner in the full height of its parent — the parent must have a definite height. */
+    fill?: boolean;
+};
+declare function Spinner({ className, size, variant, fill, 'aria-label': ariaLabel, role, ...props }: SpinnerProps): import("react").JSX.Element;
 export { Spinner };

package/dist/src/ds/components/Spinner/spinner.stories.d.ts

@@ -11,3 +11,4 @@ export declare const InButton: Story;
 export declare const Sizes: Story;
 export declare const ClassNameSizeOverride: Story;
 export declare const AllVariants: Story;
+export declare const Fill: Story;

package/dist/src/ds/components/ai/ask-user/ask-user.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps, ReactNode } from 'react';
 import { Button } from '../../Button';
+import { Txt } from '../../Txt';
 export type AskUserSelectionMode = 'single_select' | 'multi_select';
 export type AskUserAnswer = string | string[];
 export interface AskUserOption {
@@ -16,16 +17,21 @@ export interface AskUserResult {
     isError?: boolean;
 }
 export declare const AskUserContainer: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
-export declare const AskUserQuestion: ({ className, ...props }: ComponentProps<"legend">) => import("react").JSX.Element;
-export declare const AskUserOptionDescription: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
-interface AskUserOptionControlProps extends Omit<ComponentProps<'input'>, 'type'> {
-    type: 'radio' | 'checkbox';
+export declare const AskUserLabel: ({ children, className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const AskUserBody: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const AskUserQuestion: ({ className, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
+export interface AskUserOptionRowProps extends Omit<ComponentProps<'label'>, 'children'> {
+    control: ReactNode;
     label: string;
     description?: string;
+    disabled?: boolean;
 }
-export declare const AskUserOptionControl: ({ type, label, description, className, ...props }: AskUserOptionControlProps) => import("react").JSX.Element;
-export declare const AskUserSubmit: ({ children, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
-export declare const AskUserPending: ({ children, className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
+export declare const AskUserOptionRow: ({ control, label, description, disabled, className, ...props }: AskUserOptionRowProps) => import("react").JSX.Element;
+export type AskUserSubmitProps = Omit<ComponentProps<typeof Button>, 'children'> & {
+    children?: ReactNode;
+};
+export declare const AskUserSubmit: ({ children, ...props }: AskUserSubmitProps) => import("react").JSX.Element;
+export declare const AskUserPending: ({ children, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
 export interface AskUserOutputProps extends ComponentProps<'div'> {
     result: AskUserResult;
 }
@@ -39,4 +45,3 @@ export interface AskUserProps extends Omit<ComponentProps<typeof AskUserContaine
     footer?: ReactNode;
 }
 export declare const AskUser: ({ payload, ...props }: AskUserProps) => import("react").JSX.Element;
-export {};

package/dist/src/ds/new/layout/app-shell/app-shell.d.ts

@@ -1,13 +1,7 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-export interface AppShellFrameProps {
-    children: ReactNode;
-    className: string;
-}
 export interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
     children: ReactNode;
-    mainLabel: string;
     mobileHeader?: ReactNode;
-    renderFrame?: (props: AppShellFrameProps) => ReactNode;
-    routeHeader?: ReactNode;
+    sidebar?: ReactNode;
 }
-export declare function AppShell({ children, className, mainLabel, mobileHeader, ref, renderFrame, routeHeader, ...props }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps): import("react").JSX.Element;

package/dist/src/ds/new/layout/app-shell/app-shell.stories.d.ts

@@ -8,7 +8,6 @@ declare const meta: {
     };
     args: {
         children: null;
-        mainLabel: string;
     };
 };
 export default meta;