@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/src/ds/components/CodeBlock/code-block.d.ts

@@ -1,4 +1,5 @@
 export type CodeBlockSelector = 'select' | 'tabs';
+export type CodeBlockOverflow = 'wrap' | 'scroll';
 export interface CodeBlockOption {
     label: string;
     value: string;
@@ -11,8 +12,11 @@ export interface CodeBlockProps {
     selector?: CodeBlockSelector;
     fileName?: string;
     lang?: string;
+    /** `wrap` (default) breaks long lines — best for commands and snippets.
+     *  `scroll` preserves columns behind a horizontal scroll — best for source code. */
+    overflow?: CodeBlockOverflow;
     copyMessage?: string;
     copyTooltip?: string;
     className?: string;
 }
-export declare function CodeBlock({ code, options, value, onValueChange, selector, fileName, lang, copyMessage, copyTooltip, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlock({ code, options, value, onValueChange, selector, fileName, lang, overflow, copyMessage, copyTooltip, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/CodeBlock/code-block.stories.d.ts

@@ -9,4 +9,5 @@ export declare const LongCommand: Story;
 export declare const WithFileName: Story;
 export declare const WithTabs: Story;
 export declare const TabsWithCode: Story;
+export declare const OverflowScroll: Story;
 export declare const Highlighted: Story;

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

@@ -1,18 +1,33 @@
+import { TextButtonSize } from '../Button/Button';
+import { ControlTriggerVisualVariant } from '../../primitives/control-size';
+/**
+ * A combobox is a form field, so it reuses the same button looks as everywhere,
+ * mirroring `SelectTrigger`: `default` (the Button's filled default surface —
+ * the default here too), `outline` (bordered, transparent) and `ghost`
+ * (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`
+ * look is intentionally NOT offered (a field is not a call-to-action).
+ */
+export type ComboboxVisualVariant = ControlTriggerVisualVariant;
+export type ComboboxLegacyVariant = 'link';
+export type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;
+/**
+ * Single source of truth for both the single- and multi-select combobox
+ * triggers. A combobox = a button + a trailing chevron, so it reuses the Button
+ * recipe (variant colors, size = height/text/padding/radius, unified border
+ * focus, disabled) and layers only the combobox-specific extras — exactly like
+ * `SelectTrigger`.
+ */
+export declare function comboboxTriggerClass({ variant, size, error, className, }: {
+    variant: ComboboxVariant;
+    size: TextButtonSize;
+    error?: boolean;
+    className?: string;
+}): string;
 export declare const comboboxStyles: {
     /** Root wrapper */
     readonly root: "flex flex-col gap-1.5";
-    /** Trigger base — shared layout/typography for all variants. */
-    readonly trigger: string;
-    /** Variant: default — bordered form input look. */
-    readonly triggerDefault: string;
-    /** Variant: ghost — borderless, hover-only surface. */
-    readonly triggerGhost: string;
-    /** Variant: link — text-only trigger. */
-    readonly triggerLink: string;
-    /** Trigger with error state */
-    readonly triggerError: "border-accent2 hover:border-accent2 focus-visible:border-accent2";
-    /** Chevron icon in trigger */
-    readonly chevron: "ml-2 h-4 w-4 shrink-0 text-neutral3 opacity-70";
+    /** Chevron icon in trigger — inherits the variant's text color via currentColor. */
+    readonly chevron: "ml-2 h-4 w-4 shrink-0 opacity-60";
     /** Placeholder text color */
     readonly placeholder: "text-neutral3";
     /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */

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

@@ -1,5 +1,7 @@
-import { FormElementSize } from '../../primitives/form-element';
+import { ComboboxVariant } from './combobox-styles';
+import { TextButtonSize } from '../Button/Button';
 import * as React from 'react';
+export type { ComboboxVariant } from './combobox-styles';
 export type ComboboxOption = {
     label: string;
     value: string;
@@ -7,7 +9,6 @@ export type ComboboxOption = {
     start?: React.ReactNode;
     end?: React.ReactNode;
 };
-export type ComboboxVariant = 'default' | 'ghost' | 'link';
 export type ComboboxProps = {
     options: ComboboxOption[];
     value?: string;
@@ -18,7 +19,7 @@ export type ComboboxProps = {
     className?: string;
     disabled?: boolean;
     variant?: ComboboxVariant;
-    size?: Exclude<FormElementSize, 'lg'>;
+    size?: TextButtonSize;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;

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

@@ -1,5 +1,6 @@
 import { ComboboxOption } from './combobox';
-import { FormElementSize } from '../../primitives/form-element';
+import { ComboboxVariant } from './combobox-styles';
+import { TextButtonSize } from '../Button/Button';
 import * as React from 'react';
 export type { ComboboxOption };
 export type MultiComboboxProps = {
@@ -11,12 +12,11 @@ export type MultiComboboxProps = {
     emptyText?: string;
     className?: string;
     disabled?: boolean;
-    /** Kept for API compatibility; trigger styling is intrinsic to the Combobox now. */
-    variant?: 'default' | 'outline' | 'ghost';
-    size?: FormElementSize;
+    variant?: ComboboxVariant;
+    size?: TextButtonSize;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;
     error?: string;
 };
-export declare function MultiCombobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, className, disabled, size, open, onOpenChange, container, error, }: MultiComboboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiCombobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, className, disabled, variant, size, open, onOpenChange, container, error, }: MultiComboboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 export type DataListCellProps = {
-    children: ReactNode;
+    children?: ReactNode;
     className?: string;
     height?: 'default' | 'compact';
     /**
@@ -11,7 +11,7 @@ export type DataListCellProps = {
     as?: ElementType;
 } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className'>;
 export declare function DataListCell({ children, className, height, as, ...rest }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
-export declare function DataListTextCell({ children, className }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataListTextCell({ children, className, ...rest }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
 export declare function DataListNameCell({ children, className }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
 export declare function DataListDescriptionCell({ children, className }: DataListCellProps): import("react/jsx-runtime").JSX.Element;
 export interface DataListIdCellProps {

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

@@ -0,0 +1,2 @@
+export declare const DataListRowWrapperContext: import('react').Context<boolean>;
+export declare function useDataListRowWrapperContext(): boolean;

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

@@ -18,6 +18,8 @@ export declare const Featured: Story;
 export declare const WithDateAndTimeCells: Story;
 /** Empty / no-match state — usually shown when a search filter yields zero rows. */
 export declare const Empty: Story;
+/** Wide grid with constrained columns, horizontal scrolling, and a long badge that must stay inside its cell. */
+export declare const WideColumnsOverflow: Story;
 /** Loading placeholder for any column layout. Pass the same `columns` string the real list uses. */
 export declare const Loading: Story;
 /** Page-based pagination footer — `Previous` shows when `currentPage > 0`, `Next` shows when `hasMore`. */

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

@@ -1,13 +1,15 @@
 /**
- * Row-level styling shared by anything that participates in the row sibling
+ * Row-level styling for the element that participates in the row sibling
  * chain — applied to `DataList.RowButton` / `DataList.RowLink` when used
- * standalone, and to `DataList.RowWrapper` when used as a wrapper around them.
+ * standalone, and to `DataList.RowWrapper` when used as a shell around them.
  *
- * Contains the `.data-list-row` marker class (used by the sibling-aware border
- * rules), the bottom/top border treatment, and rounded corners.
+ * Contains the `.data-list-row` marker class (used by the sibling-aware
+ * separator rules), the full-width separator treatment, and rounded corners.
  */
-export declare const dataListRowOuterStyles: readonly ["data-list-row col-span-full border-y border-b-border1 border-t-transparent", "[.data-list-row:hover+&]:border-t-transparent [.data-list-row:focus-visible+&]:border-t-transparent", "[.data-list-subheader+&]:border-t-transparent", "[&:has(+.data-list-subheader)]:border-b-transparent", "[&:not(:has(~.data-list-row))]:border-b-transparent", "transition-colors duration-200 rounded-lg"];
-export declare const dataListRowStyles: readonly ["mx-1 grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "hover:bg-surface4 hover:border-transparent focus-visible:bg-surface4 focus-visible:border-transparent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "data-list-row col-span-full border-y border-b-border1 border-t-transparent", "[.data-list-row:hover+&]:border-t-transparent [.data-list-row:focus-visible+&]:border-t-transparent", "[.data-list-subheader+&]:border-t-transparent", "[&:has(+.data-list-subheader)]:border-b-transparent", "[&:not(:has(~.data-list-row))]:border-b-transparent", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowOuterStyles: readonly ["data-list-row col-span-full relative mt-[3px] mb-1", "after:absolute after:inset-x-[-0.25rem] after:bottom-[-0.25rem] after:h-px after:bg-border1 after:content-[\"\"] after:pointer-events-none", "[&:has(+.data-list-subheader)]:after:hidden [&:not(:has(~.data-list-row))]:after:hidden", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "hover:bg-surface4 focus-visible:bg-surface4 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowStyles: readonly ["mx-1", "grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "hover:bg-surface4 focus-visible:bg-surface4 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg", "data-list-row col-span-full relative mt-[3px] mb-1", "after:absolute after:inset-x-[-0.25rem] after:bottom-[-0.25rem] after:h-px after:bg-border1 after:content-[\"\"] after:pointer-events-none", "[&:has(+.data-list-subheader)]:after:hidden [&:not(:has(~.data-list-row))]:after:hidden", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowStaticStyles: readonly ["mx-1 grid grid-cols-subgrid gap-8 px-5", "data-list-row col-span-full relative mt-[3px] mb-1", "after:absolute after:inset-x-[-0.25rem] after:bottom-[-0.25rem] after:h-px after:bg-border1 after:content-[\"\"] after:pointer-events-none", "[&:has(+.data-list-subheader)]:after:hidden [&:not(:has(~.data-list-row))]:after:hidden", "transition-colors duration-200 rounded-lg"];
 /**
  * Layout/state modifiers shared by interactive row primitives
  * (`DataList.RowButton`, `DataList.RowLink`).

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

@@ -9,7 +9,7 @@ export interface DateTimeRangePickerProps {
     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 'default'. */
+    /** Size passed through to the trigger Button. Defaults to 'md'. */
     size?: ButtonProps['size'];
 }
 export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, disabled, presets, size, }: DateTimeRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,11 +2,13 @@ import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import * as React from 'react';
 declare const Dialog: typeof DialogPrimitive.Root;
 type DialogTriggerProps = DialogPrimitive.Trigger.Props & {
+    /** @deprecated Use Base UI's `render` prop instead, e.g. `render={<Button />}`. */
     asChild?: boolean;
 };
 declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type DialogCloseProps = DialogPrimitive.Close.Props & {
+    /** @deprecated Use Base UI's `render` prop instead, e.g. `render={<Button />}`. */
     asChild?: boolean;
 };
 declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/ds/components/DropdownMenu/dropdown-menu.d.ts

@@ -1,6 +1,7 @@
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import * as React from 'react';
 type DropdownMenuTriggerProps = MenuPrimitive.Trigger.Props & {
+    /** @deprecated Use Base UI's `render` prop instead, e.g. `render={<Button />}`. */
     asChild?: boolean;
 };
 type DropdownMenuSubTriggerProps = MenuPrimitive.SubmenuTrigger.Props & {

package/dist/src/ds/components/Input/input.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const inputVariants: (props?: ({
     variant?: "default" | "outline" | "unstyled" | "filled" | null | undefined;
-    size?: "default" | "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants> & {
     testId?: string;
@@ -10,7 +10,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | "unstyled" | "filled" | null | undefined;
-    size?: "default" | "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     testId?: string;
     error?: boolean;

package/dist/src/ds/components/InputGroup/input-group.d.ts

@@ -1,15 +1,15 @@
 import { VariantProps } from 'class-variance-authority';
 import { ButtonProps } from '../Button/Button';
-import { FormElementSize } from '../../primitives/form-element';
+import { ControlSize } from '../../primitives/control-size';
 import * as React from 'react';
 declare const inputGroupVariants: (props?: ({
     variant?: "default" | "outline" | "filled" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {
-    size?: FormElementSize;
+    size?: ControlSize;
 } & VariantProps<typeof inputGroupVariants>;
 declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    size?: FormElementSize;
+    size?: ControlSize;
 } & VariantProps<(props?: ({
     variant?: "default" | "outline" | "filled" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,2 +1 @@
 export { MetricsCard } from './metrics-card';
-export { MetricsKpiCard } from '../MetricsKpiCard';

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

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

package/dist/src/ds/components/PendingIndicator/pending-indicator.d.ts

@@ -0,0 +1,9 @@
+export interface PendingIndicatorProps {
+    className?: string;
+    testId?: string;
+}
+/**
+ * A single dot that fades in and out indefinitely, signalling the agent is
+ * working before any visible output has streamed.
+ */
+export declare const PendingIndicator: ({ className, testId }: PendingIndicatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/Popover/popover.d.ts

@@ -2,6 +2,7 @@ import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import * as React from 'react';
 declare const Popover: typeof PopoverPrimitive.Root;
 type PopoverTriggerProps = PopoverPrimitive.Trigger.Props & {
+    /** @deprecated Use Base UI's `render` prop instead, e.g. `render={<Button />}`. */
     asChild?: boolean;
 };
 declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/ds/components/Searchbar/searchbar.d.ts

@@ -1,11 +1,11 @@
-import { FormElementSize } from '../../primitives/form-element';
+import { ControlSize } from '../../primitives/control-size';
 type SearchbarVariant = 'default' | 'filled' | 'outline';
 export type SearchbarProps = {
     onSearch: (search: string) => void;
     label: string;
     placeholder: string;
     debounceMs?: number;
-    size?: FormElementSize;
+    size?: ControlSize;
     variant?: SearchbarVariant;
     className?: string;
 };

package/dist/src/ds/components/Select/select.d.ts

@@ -1,6 +1,5 @@
 import { Select as SelectPrimitive } from '@base-ui/react/select';
-import { ButtonProps } from '../Button';
-import { FormElementSize } from '../../primitives/form-element';
+import { TextButtonSize } from '../Button/Button';
 import * as React from 'react';
 type SelectRootProps<Value> = SelectPrimitive.Root.Props<Value, false>;
 type SelectChangeDetails = Parameters<NonNullable<SelectRootProps<unknown>['onValueChange']>>[1];
@@ -27,11 +26,19 @@ export type SelectValueProps = Omit<SelectPrimitive.Value.Props, 'className'> &
  * `placeholder` when nothing is selected), so this is a thin passthrough.
  */
 declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * A select is a form field, so it reuses the same button looks consumers see
+ * everywhere: `default` (the Button's filled default surface — the default
+ * here too), `outline` (bordered, transparent) and `ghost` (borderless, for
+ * dense toolbars/inline pickers). The high-emphasis `primary` look is the only
+ * one intentionally NOT offered (a field is not a call-to-action).
+ */
+export type SelectTriggerVariant = 'default' | 'outline' | 'ghost';
+type SelectTriggerLegacyVariant = 'primary';
 export type SelectTriggerProps = Omit<SelectPrimitive.Trigger.Props, 'className'> & {
     className?: string;
-    size?: FormElementSize;
-    /** Kept for API compatibility; styling is now intrinsic to the trigger. */
-    variant?: ButtonProps['variant'];
+    size?: TextButtonSize;
+    variant?: SelectTriggerVariant | SelectTriggerLegacyVariant;
 };
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export type SelectContentProps = Omit<SelectPrimitive.Popup.Props, 'className'> & {

package/dist/src/ds/components/Select/select.stories.d.ts

@@ -5,6 +5,14 @@ export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
 export declare const Experimental: Story;
+export declare const Sizes: Story;
+/**
+ * A select is a field, so it offers the same button looks as everywhere:
+ * `default` (the filled Button surface, the default here too), `outline`
+ * (bordered, transparent) and `ghost` (borderless, for dense toolbars). It does
+ * not expose the high-emphasis `primary` look.
+ */
+export declare const Variants: Story;
 export declare const WithValue: Story;
 export declare const Disabled: Story;
 export declare const WithGroups: Story;

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

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

package/dist/src/ds/components/Shimmer/shimmer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface ShimmerProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const Shimmer: ({ children, className }: ShimmerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/Textarea/textarea.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const textareaVariants: (props?: ({
     variant?: "default" | "outline" | "unstyled" | "filled" | null | undefined;
-    size?: "default" | "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & VariantProps<typeof textareaVariants> & {
     testId?: string;
@@ -10,7 +10,7 @@ export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElemen
 };
 declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | "unstyled" | "filled" | null | undefined;
-    size?: "default" | "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     testId?: string;
     error?: boolean;

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

@@ -0,0 +1,5 @@
+export type ControlSize = 'xs' | 'sm' | 'md' | 'default' | 'lg';
+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, string>;

package/dist/src/ds/primitives/form-element.d.ts

@@ -1,17 +1,9 @@
-export declare const formElementSizes: {
-    readonly sm: "h-form-sm";
-    readonly md: "h-form-md";
-    readonly default: "h-form-default";
-    readonly lg: "h-form-lg";
-};
-export declare const formElementFocus = "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
-export declare const sharedFormElementFocusStyle = "outline-hidden focus-visible:outline-hidden focus-visible:border-accent1 focus-visible:ring-1 focus-visible:ring-accent1/40";
 export declare const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
 export declare const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
 export declare const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+export declare const controlFocusBorderVisible = "outline-hidden focus-visible:outline-hidden focus-visible:border-neutral5/50";
 export declare const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
 export declare const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
 export declare const inputSurfaceAndFocusStyle: string;
 export declare const inputOutlineAndFocusStyle: string;
 export declare const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
-export type FormElementSize = keyof typeof formElementSizes;

package/dist/src/ds/primitives/resize-handle-indicator.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const indicatorVariants: (props?: ({
+    variant?: "line" | "pill" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ResizeHandleIndicatorProps = VariantProps<typeof indicatorVariants> & {
+    className?: string;
+};
+export declare const ResizeHandleIndicator: ({ variant, className }: ResizeHandleIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ds/tokens/sizes.d.ts

@@ -2,6 +2,7 @@ export declare const Sizes: {
     'icon-default': string;
     'icon-lg': string;
     'icon-sm': string;
+    'form-xs': string;
     'form-sm': string;
     'form-md': string;
     'form-default': string;

package/dist/src/index.d.ts

@@ -17,7 +17,7 @@ export * from './ds/components/Checkbox';
 export * from './ds/components/Collapsible';
 export * from './ds/components/Combobox';
 export * from './ds/components/Command';
-export * from './ds/components/ContextMenu';
+export * from './ds/components/Code';
 export * from './ds/components/CodeBlock';
 export * from './ds/components/CopyButton';
 export * from './ds/components/DashboardCard';
@@ -39,8 +39,10 @@ export * from './ds/components/Popover';
 export * from './ds/components/PropertyFilter';
 export * from './ds/components/RadioGroup';
 export * from './ds/components/ScrollArea';
+export * from './ds/components/PendingIndicator';
 export * from './ds/components/Searchbar';
 export * from './ds/components/Select';
+export * from './ds/components/Shimmer';
 export * from './ds/components/Skeleton';
 export * from './ds/components/Slider';
 export * from './ds/components/Spinner';
@@ -61,8 +63,6 @@ export * from './ds/components/MainSidebar';
 export * from './ds/components/PageHeader';
 export * from './ds/components/Section';
 export * from './ds/components/SectionCard';
-export * from './ds/components/SettingsRow';
-export * from './ds/components/SideDialog';
 export * from './ds/components/Steps';
 export * from './ds/components/Tabs';
 export * from './ds/components/Text';
@@ -88,13 +88,12 @@ export * from './ds/components/DataPanel';
 export * from './ds/components/DateTimeRangePicker';
 export * from './ds/components/HorizontalBars';
 export * from './ds/components/MetricsDataTable';
-export * from './ds/components/MetricsKpiCard';
 export * from './ds/components/MetricsLineChart';
-export * from './ds/components/PrevNextNav';
 export * from './ds/components/ScrollableContainer';
 export * from './ds/components/StatusBadge';
 export * from './ds/icons/index';
 export * from './ds/tokens';
+export * from './ds/primitives/control-size';
 export * from './ds/primitives/form-element';
 export * from './ds/primitives/transitions';
 export * from './hooks/use-copy-to-clipboard';

package/dist/src/lib/as-child.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * Transitional shim for the legacy Radix-style `asChild` boolean on our Base UI
+ * wrappers.
+ *
+ * Base UI's native composition API is the `render` prop (`render={<Button />}`):
+ * it is better typed (accepts an element OR a `(props, state) => element`
+ * function, and pairs with `nativeButton` for non-`<button>` elements) and is
+ * the idiom this design system is moving to. Because our trigger props already
+ * extend the Base UI primitive props, `render` works today with no shim.
+ *
+ * This helper keeps `asChild` working by translating it into `render`, so the
+ * single deprecated code path lives in one place instead of being copy-pasted
+ * across every trigger/close wrapper.
+ *
+ * @returns `{ render }` when `asChild` should compose its child, otherwise
+ * `undefined` (safe to spread as a no-op).
+ * @deprecated Pass Base UI's `render` prop directly; `asChild` will be removed.
+ */
+export declare function asChildRenderProps(asChild: boolean | undefined, children: React.ReactNode): {
+    render: React.ReactElement;
+} | undefined;

package/dist/src/lib/file/downloadJson.d.ts

@@ -0,0 +1 @@
+export declare const downloadJson: (filename: string, data: unknown) => void;

package/dist/src/lib/file/index.d.ts

@@ -1,3 +1,4 @@
 export * from './constants';
 export * from './contentTypeFromUrl';
+export * from './downloadJson';
 export * from './toBase64';

package/dist/src/lib/resize/separator.d.ts

@@ -1 +1,5 @@
-export declare const PanelSeparator: () => import("react/jsx-runtime").JSX.Element;
+export type PanelSeparatorProps = {
+    /** `line` fits a visible container edge; `pill` floats when there is none. */
+    variant?: 'line' | 'pill';
+};
+export declare const PanelSeparator: ({ variant }: PanelSeparatorProps) => import("react/jsx-runtime").JSX.Element;