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

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

@@ -1,10 +1,16 @@
 import * as React from 'react';
 export type EmptyStateProps = {
-    iconSlot: React.ReactNode;
+    /** Defaults to a circle-slash icon. Pass `null` to render no icon. */
+    iconSlot?: React.ReactNode;
     titleSlot: React.ReactNode;
     descriptionSlot?: React.ReactNode;
     actionSlot?: React.ReactNode;
     className?: string;
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * `inline` (default) renders the block in place.
+     * `fill` centers it in the full height of its parent — the parent must have a definite height.
+     */
+    variant?: 'inline' | 'fill';
 };
-export declare function EmptyState({ iconSlot, titleSlot, descriptionSlot, actionSlot, className, as: HeadingTag, }: EmptyStateProps): React.JSX.Element;
+export declare function EmptyState({ iconSlot, titleSlot, descriptionSlot, actionSlot, className, as: HeadingTag, variant, }: EmptyStateProps): React.JSX.Element;

package/dist/src/ds/components/EmptyState/empty-state.stories.d.ts

@@ -9,3 +9,4 @@ export declare const NoFiles: Story;
 export declare const NoTeamMembers: Story;
 export declare const WithoutAction: Story;
 export declare const CustomHeading: Story;
+export declare const Fill: Story;

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

@@ -1,6 +1,8 @@
+import { EmptyStateProps } from '../EmptyState';
 export type ErrorStateProps = {
     title: string;
     message: string;
     action?: React.ReactNode;
+    variant?: EmptyStateProps['variant'];
 };
-export declare function ErrorState({ title, message, action }: ErrorStateProps): import("react").JSX.Element;
+export declare function ErrorState({ title, message, action, variant }: ErrorStateProps): import("react").JSX.Element;

package/dist/src/ds/components/ErrorState/error-state.stories.d.ts

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

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

@@ -0,0 +1,10 @@
+import { FilterBarGroup } from './types';
+export type FilterBarAdvancedChipProps = {
+    group: FilterBarGroup;
+    className?: string;
+};
+/**
+ * A root-level group rendered as one "Advanced filter" chip. Its popover hosts the
+ * recursive rule builder; the chip's remove button drops the whole subtree.
+ */
+export declare function FilterBarAdvancedChip({ group, className }: FilterBarAdvancedChipProps): import("react").JSX.Element;

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

@@ -1,30 +1,61 @@
 import { ReactNode } from 'react';
-import { FilterBarCommit, FilterBarDraft, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSegment, FilterBarValue } from './types';
+import { FilterBarValueInput } from './filter-bar-tree';
+import { FilterBarCommit, FilterBarDraft, FilterBarExpression, FilterBarField, FilterBarItem, FilterBarLogic, FilterBarOperator, FilterBarSegment, FilterBarValue } from './types';
+/** Default nesting bound for advanced-filter groups (root-level group = depth 1). */
+export declare const DEFAULT_MAX_GROUP_DEPTH = 3;
+/**
+ * Marks a focus scope: the bar and each open advanced-filter popover. Arrow navigation
+ * never crosses scopes, so ←/→ inside a popover cannot land back in the bar.
+ */
+export declare const FILTER_BAR_SCOPE_ATTR = "data-filter-bar-scope";
 export type FilterBarContextValue = {
     fields: FilterBarField[];
     operators: FilterBarOperator[];
+    /** Every rendered item in visual order (groups flattened), including leaving ones. */
     items: FilterBarItem[];
+    /** The rendered tree, including the pending commit and leaving nodes. */
+    expression: FilterBarExpression;
+    /** False when the consumer passed a flat `FilterBarItem[]`: no groups are offered. */
+    groupsEnabled: boolean;
+    /** Deepest allowed group nesting (root-level group = 1). */
+    maxDepth: number;
     /** Filter under construction in the input, once a field is picked; `null` otherwise. */
     draft: FilterBarDraft | null;
     /** Progress or reset the draft. Its id is assigned on first field pick and kept afterwards. */
-    setDraft: (next: Omit<FilterBarDraft, 'id' | 'from'> | null) => void;
+    setDraft: (next: Omit<FilterBarDraft, 'id' | 'from' | 'groupId'> | null) => void;
     /** Append an item for the draft, reusing its id so the draft chip becomes the item's chip. */
-    commitDraft: (next: Required<Omit<FilterBarDraft, 'id' | 'from'>>, value: FilterBarValue) => void;
+    commitDraft: (next: Required<Omit<FilterBarDraft, 'id' | 'from' | 'groupId'>>, value: FilterBarValue) => void;
     /** The draft that just became an item, until its chip has glinted or the bar moves on. */
     lastCommit: FilterBarCommit | null;
     settleCommit: () => void;
     updateItem: (id: string, patch: Partial<Omit<FilterBarItem, 'id'>>) => void;
+    /** Removes a leaf. Its group stays, even empty, until the popover closes (see `setOpenGroup`). */
     removeItem: (id: string) => void;
-    /** Ids of removed items still rendered while their chip plays its exit animation. */
+    /** Ids of removed items and groups still rendered while their chip plays its exit animation. */
     leaving: ReadonlySet<string>;
     /** Called by a leaving chip once its exit animation has finished (or when nothing animates). */
     settleRemove: (id: string) => void;
-    /** Removes every removable item (chips rendered with `removable={false}` stay). */
+    /** Removes every removable item (chips rendered with `removable={false}` stay) and every group left empty. */
     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;
+    /** Appends an empty group to the root (`undefined`) or inside `parentId`, and points the input at it. */
+    addGroup: (parentId: string | undefined, logic: FilterBarLogic) => string;
+    /** Removes a group and everything below it. */
+    removeGroup: (groupId: string) => void;
+    setLogic: (groupId: string, logic: FilterBarLogic) => void;
+    /** Nesting level of a group (root-level = 1); 0 when unknown. */
+    getGroupDepth: (groupId: string) => number;
+    /** Root group whose advanced-filter popover is open. */
+    openGroupId: string | null;
+    /** Open a root group's popover, or close it with `null` (empty groups are pruned on close). */
+    setOpenGroup: (groupId: string | null) => void;
+    /** Group the input commits into; `undefined` = root. */
+    inputTarget: string | undefined;
+    /** Point the input at a group (or back at the root with `undefined`) and focus it. */
+    openGroupInput: (groupId: string | undefined) => void;
     getField: (fieldId: string) => FilterBarField | undefined;
     getOperator: (operatorId: string) => FilterBarOperator | undefined;
     /** Operators allowed for a field (`field.operators` or every root operator). */
@@ -34,7 +65,8 @@ export type FilterBarContextValue = {
     /**
      * 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.
+     * Never leaves the focus scope of the currently focused element. Returns false if
+     * nothing was focused.
      */
     focusChip: (fromIndex: number, direction: -1 | 1, segment: FilterBarSegment) => boolean;
     focusInput: () => void;
@@ -50,10 +82,15 @@ export declare function emptyValueFor(operator: FilterBarOperator | undefined):
 export type FilterBarProviderProps = {
     fields: FilterBarField[];
     operators: FilterBarOperator[];
-    value: FilterBarItem[];
-    onValueChange: (items: FilterBarItem[]) => void;
+    value: FilterBarValueInput;
+    /** Receives the same shape as `value` (method syntax so flat-only handlers stay assignable). */
+    onValueChange(value: FilterBarValueInput): void;
+    /** Derives ids for root-level items only; items inside groups always get a random id
+     *  because a group may hold several conditions on the same field. */
     createItemId?: (fieldId: string) => string;
+    /** Deepest allowed group nesting (root-level group = 1). Defaults to 3. */
+    maxDepth?: number;
     ariaLabel: string;
     children: ReactNode;
 };
-export declare function FilterBarProvider({ fields, operators, value, onValueChange, createItemId, ariaLabel, children, }: FilterBarProviderProps): import("react").JSX.Element;
+export declare function FilterBarProvider({ fields, operators, value, onValueChange, createItemId, maxDepth, ariaLabel, children, }: FilterBarProviderProps): import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { FilterBarGroup, FilterBarLogic } from './types';
+export type FilterBarLogicToggleProps = {
+    groupId: string;
+    logic: FilterBarLogic;
+    className?: string;
+};
+/** `and` / `or` connector in front of a row; every connector of a group shares its logic. */
+export declare function FilterBarLogicToggle({ groupId, logic, className }: FilterBarLogicToggleProps): import("react").JSX.Element;
+export type FilterBarGroupEditorProps = {
+    group: FilterBarGroup;
+    /** Nesting level of `group` (root-level group = 1). */
+    depth: number;
+    /** Drops this group; rendered as a trailing `Clear all` in the footer. */
+    onRemove?: () => void;
+    removeLabel?: string;
+    className?: string;
+};
+/**
+ * Recursive rule builder shown in an advanced-filter popover. Rows are laid out as
+ * `connector | condition`: the first row reads `where`, the following ones carry the
+ * group's `and` / `or` toggle. Nested groups render as bordered cards with their own
+ * header (logic switch + remove) and footer. The shared typeahead input renders as the
+ * last row of the group it is pointed at.
+ */
+export declare function FilterBarGroupEditor({ group, depth, onRemove, removeLabel, className, }: FilterBarGroupEditorProps): import("react").JSX.Element;

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

@@ -2,9 +2,16 @@ export type FilterBarInputProps = {
     placeholder?: string;
     className?: string;
     'aria-label'?: string;
+    /**
+     * Group this instance commits into; omit for the bar's own input. Only the instance whose
+     * `groupId` matches the provider's `inputTarget` renders, so a single input is ever mounted.
+     */
+    groupId?: string;
+    /** Called when Escape is pressed on an empty query inside a group, after the input hands back to the bar. */
+    onLeave?: () => void;
 };
 /**
  * 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;
+export declare function FilterBarInput(props: FilterBarInputProps): import("react").JSX.Element | null;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { FilterBarOption } from './types';
 export type FilterBarOptionListProps<T> = {
     getKey: (option: T) => string;
     renderOption: (option: T) => ReactNode;
@@ -10,6 +11,10 @@ export type FilterBarOptionListProps<T> = {
     'aria-label': string;
     'aria-multiselectable'?: boolean;
 };
+/** Default value row: the option's leading node (avatar, swatch…) followed by its label. */
+export declare function FilterBarOptionLabel({ option }: {
+    option: FilterBarOption;
+}): import("react").JSX.Element;
 /**
  * List/status/empty rows for a `ComboboxPrimitive.Root`, laid out like the DS
  * `Combobox` popup (fluid hover highlight, scroller around the list). Items come

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;

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

@@ -1,6 +1,8 @@
+import * as React from 'react';
 export type ControlSize = 'sm' | 'md' | 'lg';
+export declare const ControlSizeContext: React.Context<ControlSize | undefined>;
 export declare const controlHeight: Record<ControlSize, string>;
 export declare const controlSizeClasses: Record<ControlSize, string>;
 export type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';
-export declare const controlTriggerOpenState: Record<ControlTriggerVisualVariant | 'field', string>;
+export declare const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string>;
 export declare function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined;