@voltstack/bravais 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,1318 @@
+import * as react from 'react';
+import react__default, { ElementType, HTMLAttributes, ReactNode, Ref, ReactElement, ButtonHTMLAttributes, MouseEventHandler, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ChangeEventHandler } from 'react';
+import { Placement } from '@floating-ui/react';
+
+/**
+ * Shared design tokens for Volt primitives.
+ *
+ * These tokens map 1:1 to utility classes already declared in
+ * `src/shared/presentation/assets/stylesheets/general.css` and `base.css`.
+ * Primitives MUST NOT emit classes whose CSS definitions don't exist.
+ */
+type Display = 'flex' | 'grid' | 'block' | 'none';
+type FlexDirection = 'row' | 'column' | 'row-reverse';
+type AlignItems = 'start' | 'center' | 'end';
+type JustifyContent = 'start' | 'center' | 'end' | 'between' | 'around';
+type GapToken = '01' | '02' | '025' | '035' | '05' | '075' | '1' | '1-5' | '2' | '3';
+type PaddingToken = '0' | '025' | '05' | '075' | '1' | '1-5' | '2' | '3';
+type PaddingXToken = '1';
+type MarginTopToken = '05' | '1' | '3';
+type MarginBottomToken = '1-5' | '3';
+type MarginXToken = 'auto';
+type RadiusToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+type BorderToken = 'soft' | 'none' | 'bottom-soft' | 'top-soft';
+type PositionToken = 'relative' | 'sticky' | 'absolute' | 'fixed';
+type OverflowToken = 'auto' | 'hidden' | 'x-auto' | 'x-scroll' | 'y-auto' | 'y-scroll';
+type WidthToken = 'max' | '50' | 'vw-max';
+type HeightToken = 'max' | 'vh-max';
+type FlexToken = '1';
+type TransitionToken = 'fast' | 'normal';
+/**
+ * Typography tokens. These match `font-size-*` / `font-weight-*` / `color-*`
+ * utilities declared in `general.css`.
+ */
+type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+type TextTone = 'primary' | 'secondary' | 'muted' | 'muted-foreground';
+type TextAlign = 'left' | 'center' | 'right';
+type SurfaceVariant = 'primary' | 'glass' | 'elevated' | 'danger' | 'warning';
+/**
+ * Canonical semantic tone shared by every status/feedback primitive
+ * (Tag, StatusBadge, StatusDot, InlineStatus, IconFrame, Callout, StatCard, Timeline).
+ * Maps 1:1 to the `--status-*` / accent tokens and the `.color-*` text utilities.
+ */
+type StatusTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+/** Canonical control size scale shared by interactive primitives. */
+type ControlSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Canonical shape vocabulary shared by button-like / chip-like primitives. */
+type Shape = 'rounded' | 'pill' | 'square' | 'circle';
+/**
+ * Resolves a {@link StatusTone} to the CSS custom properties that express it.
+ * Single source of truth so primitives stop hardcoding per-tone colors.
+ */
+declare const STATUS_TONE_VARS: Record<StatusTone, {
+    fg: string;
+    bg: string;
+    border: string;
+}>;
+
+/**
+ * Style-related props shared by all box-like primitives: `Box`, `Stack`, `Row`,
+ * `Surface`, `Card`, `Alert`, etc.
+ *
+ * Every value maps to an existing CSS utility class. Unknown values are never
+ * emitted so we don't produce dead classnames.
+ */
+interface BoxStyleProps {
+    display?: Display;
+    direction?: FlexDirection;
+    align?: AlignItems;
+    justify?: JustifyContent;
+    wrap?: boolean;
+    gap?: GapToken;
+    p?: PaddingToken;
+    px?: PaddingXToken;
+    m?: '0';
+    mt?: MarginTopToken;
+    mb?: MarginBottomToken;
+    mx?: MarginXToken;
+    radius?: RadiusToken;
+    border?: BorderToken;
+    position?: PositionToken;
+    overflow?: OverflowToken;
+    width?: WidthToken;
+    height?: HeightToken;
+    flex?: FlexToken;
+    textAlign?: TextAlign;
+    shrink?: '0';
+    minH?: '0';
+    minW?: '0';
+    inset?: '0';
+    top?: '0' | '1';
+    left?: '0' | '1';
+    bottom?: '0' | '1';
+    right?: '0' | '1';
+    zIndex?: '5' | '10' | '20';
+    transition?: TransitionToken;
+    cursor?: 'pointer';
+    selectNone?: boolean;
+}
+declare const buildBoxClasses: (props: BoxStyleProps) => string[];
+/**
+ * Keys of `BoxStyleProps`. Used by primitives to strip style-only props
+ * from the rest passed through to the DOM element.
+ */
+declare const BOX_STYLE_KEYS: readonly ["display", "direction", "align", "justify", "wrap", "gap", "p", "px", "m", "mt", "mb", "mx", "radius", "border", "position", "overflow", "width", "height", "flex", "textAlign", "shrink", "minH", "minW", "inset", "top", "left", "bottom", "right", "zIndex", "transition", "cursor", "selectNone"];
+declare const splitBoxProps: <T extends BoxStyleProps>(props: T) => {
+    styleProps: BoxStyleProps;
+    rest: Omit<T, keyof BoxStyleProps>;
+};
+
+interface TypographyClassOptions {
+    size?: TextSize;
+    weight?: TextWeight;
+    tone?: TextTone;
+    align?: TextAlign;
+    truncate?: boolean;
+    lineHeight?: '5';
+    className?: string;
+}
+declare const buildTypographyClasses: ({ size, weight, tone, align, truncate, lineHeight, className }: TypographyClassOptions) => string;
+
+type PolymorphicProps<E extends ElementType> = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    as?: E;
+    children?: ReactNode;
+    className?: string;
+};
+type BoxProps<E extends ElementType = 'div'> = PolymorphicProps<E> & BoxStyleProps;
+declare const BoxImpl: <E extends ElementType = "div">({ as, className, children, ...props }: BoxProps<E>, ref: Ref<Element>) => react.JSX.Element;
+declare const Box: <E extends ElementType = "div">(props: BoxProps<E> & {
+    ref?: Ref<Element>;
+}) => ReturnType<typeof BoxImpl>;
+
+/**
+ * Vertical flex stack. Defaults to `d-flex column`.
+ * Accepts every `Box` style prop.
+ */
+type StackProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'display' | 'direction'>;
+declare const Stack: <E extends ElementType = "div">(props: StackProps<E> & {
+    ref?: Ref<HTMLElement>;
+}) => ReactElement;
+
+/**
+ * Horizontal flex row. Defaults to `d-flex items-center`.
+ * Accepts every `Box` style prop plus `reverse`.
+ */
+type RowProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'display' | 'direction'> & {
+    reverse?: boolean;
+};
+declare const Row: <E extends ElementType = "div">(props: RowProps<E> & {
+    ref?: Ref<HTMLElement>;
+}) => ReactElement;
+
+type GridColumns = 2 | 3 | 4 | 'auto-fit' | 'auto-fill';
+/**
+ * CSS-grid layout primitive. Defaults to `d-grid` and accepts every `Box` style prop
+ * (gap, padding, etc.). Use `columns` for fixed/auto tracks; `minColumnWidth` tunes the
+ * auto-fit/auto-fill minimum track size.
+ */
+type GridProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'display'> & {
+    columns?: GridColumns;
+    /** Min track size for auto-fit/auto-fill (e.g. '180px', '12rem'). Defaults to 180px. */
+    minColumnWidth?: string;
+};
+declare const Grid: <E extends ElementType = "div">(props: GridProps<E> & {
+    ref?: Ref<HTMLElement>;
+}) => ReactElement;
+
+interface SurfaceProps extends Omit<HTMLAttributes<HTMLElement>, 'children'>, BoxStyleProps {
+    as?: ElementType;
+    variant?: SurfaceVariant;
+    children?: ReactNode;
+    className?: string;
+}
+declare const Surface: react.ForwardRefExoticComponent<SurfaceProps & react.RefAttributes<HTMLElement>>;
+
+interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-orientation'> {
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * Thin divider line. Maps to the existing `.volt-divider` + orientation variant
+ * CSS declared in `general.css`.
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TextProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    as?: 'span' | 'p' | 'div' | 'label' | 'small' | 'strong' | 'em' | 'li';
+    size?: TextSize;
+    weight?: TextWeight;
+    tone?: TextTone;
+    align?: TextAlign;
+    truncate?: boolean;
+    lineHeight?: '5';
+    children?: ReactNode;
+    className?: string;
+}
+declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'children'> {
+    level: HeadingLevel;
+    size?: TextSize;
+    weight?: TextWeight;
+    tone?: TextTone;
+    truncate?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<HTMLHeadingElement>>;
+
+interface SectionLabelProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}
+/**
+ * Eyebrow / section label. Uppercase, letter-spaced, muted.
+ * Replaces ad-hoc `text-uppercase` + `font-size-05` combos.
+ */
+declare const SectionLabel: react.ForwardRefExoticComponent<SectionLabelProps & react.RefAttributes<HTMLSpanElement>>;
+
+type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+interface ButtonProps extends NativeButtonProps {
+    variant?: 'solid' | 'soft' | 'outline' | 'ghost' | 'toggle';
+    children?: ReactNode;
+    intent?: 'neutral' | 'brand' | 'danger' | 'success' | 'white' | 'canvas';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'rounded' | 'pill' | 'square' | 'circle';
+    block?: boolean;
+    align?: 'start' | 'center' | 'end';
+    isLoading?: boolean;
+    to?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    iconOnly?: boolean;
+    iconSize?: number;
+    premium?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: 'default' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CloseButtonProps {
+    onClick?: () => void;
+    /** For dialog command API - use with commandfor */
+    command?: 'close';
+    /** Dialog ID for command API */
+    commandfor?: string;
+    'aria-label'?: string;
+}
+declare const CloseButton: react.ForwardRefExoticComponent<CloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface SelectOption {
+    value: string;
+    title: string;
+    description?: string;
+}
+interface SelectProps {
+    options: SelectOption[];
+    id?: string;
+    value?: string | null;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    onDark?: boolean;
+    placeholder?: string;
+    className?: string;
+    style?: react__default.CSSProperties;
+    optionClassName?: string;
+    showSelectionIcon?: boolean;
+    isLoading?: boolean;
+    onScrollEnd?: () => void;
+    renderOptionAction?: (option: SelectOption, isSelected: boolean) => react__default.ReactNode;
+    isEditable?: boolean;
+    inputClassName?: string;
+    title?: string;
+    onFocusCapture?: react__default.FocusEventHandler<HTMLElement>;
+    /** Multi-select mode */
+    isMulti?: boolean;
+    /** Currently selected values in multi-select mode */
+    selectedValues?: string[];
+    /** Callback when multi-select values change */
+    onMultiChange?: (values: string[]) => void;
+    /** "All" option rendered as the first item in multi-select */
+    allOption?: {
+        value: string;
+        title: string;
+    };
+    /** Custom trigger label for multi-select */
+    renderTriggerLabel?: (selectedCount: number, total: number) => string;
+    /** Render a search input inside the dropdown body */
+    hasSearch?: boolean;
+    /** Placeholder for the dropdown search input */
+    searchPlaceholder?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-errormessage'?: string;
+}
+declare const Select: react__default.ForwardRefExoticComponent<SelectProps & react__default.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
+
+interface SegmentedTabOption<TId extends string = string> {
+    id: TId;
+    label: string;
+    icon?: ReactNode;
+}
+interface SegmentedTabsProps<TId extends string = string> {
+    tabs: ReadonlyArray<SegmentedTabOption<TId>>;
+    activeTab: TId;
+    onChange: (id: TId) => void;
+    ariaLabel: string;
+    /** Unique per instance. Defaults to a React-generated id — override only to share animation across mount boundaries. */
+    layoutId?: string;
+    size?: 'sm' | 'md';
+    fullWidth?: boolean;
+    className?: string;
+}
+declare const SegmentedTabs: <TId extends string>(props: SegmentedTabsProps<TId> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+
+interface SliderProps {
+    min: number;
+    max: number;
+    value: number;
+    onChange: (value: number) => void;
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const _default$1: react.NamedExoticComponent<SliderProps & react.RefAttributes<HTMLDivElement>>;
+
+interface LiquidToggleProps {
+    className?: string;
+    id?: string;
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onChange?: (pressed: boolean) => void;
+    bounce?: boolean;
+    disabled?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-errormessage'?: string;
+}
+declare const LiquidToggle: react.ForwardRefExoticComponent<LiquidToggleProps & react.RefAttributes<HTMLDivElement>>;
+
+interface Step<K extends string> {
+    key: K;
+    content: ReactNode;
+}
+interface StepTitle {
+    title: string;
+    subtitle: string;
+}
+type StepTitles<K extends string> = Record<K, StepTitle>;
+interface StepIndicator<K extends string> {
+    key: K;
+    label: string;
+    description?: string;
+}
+interface StepperProps<K extends string> {
+    steps: Step<K>[];
+    activeStep: K;
+    className?: string;
+    indicators?: StepIndicator<K>[];
+    onStepClick?: (key: K) => void;
+    canNavigateTo?: (key: K) => boolean;
+}
+declare const Stepper: <K extends string>(props: StepperProps<K> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+
+type InputSize = 'sm' | 'md' | 'lg';
+interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Vertical rhythm of the control. Surface tokens stay constant across sizes. */
+    size?: InputSize;
+    /** Renders the danger border treatment; pair with `aria-invalid`. */
+    hasError?: boolean;
+    /** Leading adornment (e.g. a lucide icon). Decorative — kept out of the a11y tree. */
+    leftIcon?: ReactNode;
+    /** Trailing adornment (e.g. a lucide icon or action). Decorative. */
+    rightIcon?: ReactNode;
+    /** Stretch the control to fill its container. */
+    fullWidth?: boolean;
+    /** Extra class for the outer surface wrapper. */
+    containerClassName?: string;
+}
+declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type TextareaSize = 'sm' | 'md' | 'lg';
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'rows'> {
+    /** Vertical rhythm of the control. Surface tokens stay constant across sizes. */
+    size?: TextareaSize;
+    /** Renders the danger border treatment; pair with `aria-invalid`. */
+    hasError?: boolean;
+    /** Grow the field with its content (up to `maxRows`) instead of scrolling. */
+    autosize?: boolean;
+    /** Minimum visible rows (and the floor for autosize). */
+    minRows?: number;
+    /** Ceiling for autosize growth; beyond this the field scrolls. */
+    maxRows?: number;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface NumberInputProps extends Omit<TextInputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {
+    min?: number;
+    max?: number;
+    /** Increment applied by the steppers and arrow keys. Defaults to 1. */
+    step?: number;
+    value?: number | '';
+    defaultValue?: number;
+    /** Native change passthrough (fires with the raw string event). */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Parsed-number callback; receives `NaN` when the field is cleared/invalid. */
+    onValueChange?: (value: number) => void;
+    /** Render the increment/decrement stepper buttons. */
+    showSteppers?: boolean;
+}
+declare const NumberInput: react.ForwardRefExoticComponent<NumberInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    containerClassName?: string;
+    variant?: 'default' | 'small';
+    overlayContent?: ReactNode;
+    overlayVisible?: boolean;
+}
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type FormFieldLayout = 'stacked' | 'inline';
+interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Visible field label. Rendered as a `<label>` bound to `htmlFor` when present. */
+    label?: ReactNode;
+    /** Associates the label with the control it wraps (the control's `id`). */
+    htmlFor?: string;
+    /** Marks the field as required and renders a danger-toned asterisk after the label. */
+    required?: boolean;
+    /** Error message. When set, the field is described by a danger-toned message. */
+    error?: ReactNode;
+    /** Secondary helper text shown when there's no error. */
+    helpText?: ReactNode;
+    /** `stacked` (default) renders label above the control; `inline` uses a label-column grid. */
+    layout?: FormFieldLayout;
+    /** The control (input/select/checkbox/etc.) this field wraps. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Generic field wrapper that pairs a label and helper/error messaging with an
+ * arbitrary control. Composes {@link Stack} + {@link Text}; carries no input
+ * styling of its own so any control primitive can sit inside it.
+ *
+ * Accessibility: the label is a real `<label htmlFor>` when `htmlFor` is given,
+ * and the helper/error text gets a stable id so callers can wire
+ * `aria-describedby` on the control (exposed via the resolved id on the message).
+ */
+declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+type NativeCheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
+interface CheckboxProps extends NativeCheckboxProps {
+    /** Controlled checked state. */
+    checked?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Inline text label rendered after the box and wired to the input. */
+    label?: ReactNode;
+    /** Renders the mixed (—) state. Maps to the input's `indeterminate` property. */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: CheckboxSize;
+    className?: string;
+    /** Class applied to the outer wrapper `<label>`. */
+    containerClassName?: string;
+}
+/**
+ * Accessible custom-styled checkbox built on a real `<input type="checkbox">`.
+ * The native input is visually hidden but remains the source of truth for state,
+ * keyboard interaction (Space toggles), and assistive tech. The brand-tinted box
+ * is purely presentational (`aria-hidden`).
+ *
+ * `--color-brand-primary` fills the checked box; `--color-on-accent` colors the check.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type RadioSize = 'sm' | 'md' | 'lg';
+type NativeRadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
+interface RadioProps extends NativeRadioProps {
+    /** Controlled checked state. */
+    checked?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Inline text label rendered after the dot and wired to the input. */
+    label?: ReactNode;
+    /** Radio group name. Required for native single-selection within a group. */
+    name?: string;
+    /** Submitted value for this option. */
+    value?: string;
+    disabled?: boolean;
+    size?: RadioSize;
+    className?: string;
+    /** Class applied to the outer wrapper `<label>`. */
+    containerClassName?: string;
+}
+/**
+ * Accessible custom-styled radio built on a real `<input type="radio">`.
+ * The native input remains the source of truth for state, keyboard interaction
+ * (arrow keys move within a `name` group), and assistive tech; the brand-tinted
+ * circle is presentational (`aria-hidden`).
+ *
+ * `--color-brand-primary` fills the selected circle; `--color-on-accent` is the dot.
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+/** Tabs supports the standard control sizes; underline content tabs read best at sm/md/lg. */
+type TabsSize = Extract<ControlSize, 'sm' | 'md' | 'lg'>;
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled selected value. Pair with `onChange`. */
+    value?: string;
+    /** Initial selected value when uncontrolled. */
+    defaultValue?: string;
+    /** Fires with the next value whenever selection changes. */
+    onChange?: (value: string) => void;
+    /** Visual scale shared by every tab + panel. */
+    size?: TabsSize;
+    children?: ReactNode;
+    className?: string;
+}
+interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> {
+    List: typeof TabsList;
+    Tab: typeof Tab;
+    Panel: typeof TabsPanel;
+}
+interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+}
+declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
+type NativeTabButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onClick'>;
+interface TabProps extends NativeTabButtonProps {
+    /** Identifies this tab; must match the Panel `value` it controls. */
+    value: string;
+    children?: ReactNode;
+    /** Optional leading icon, rendered decoratively (aria-hidden). */
+    leftIcon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
+interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Identifies the tab whose selection reveals this panel. */
+    value: string;
+    children?: ReactNode;
+    /**
+     * Keep the panel mounted (just hidden) when inactive. Defaults to `false`,
+     * which unmounts inactive panels so heavy 3D/chart content does not stay live.
+     */
+    keepMounted?: boolean;
+    className?: string;
+}
+declare const TabsPanel: react.ForwardRefExoticComponent<TabsPanelProps & react.RefAttributes<HTMLDivElement>>;
+declare const Tabs: TabsComponent;
+
+interface BreadcrumbItem {
+    id: string;
+    title: string;
+    leftIcon?: ReactNode;
+    onClick?: () => void;
+}
+type BreadcrumbsVariant = 'default' | 'compact' | 'pill';
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    variant?: BreadcrumbsVariant;
+    separator?: ReactNode;
+    ariaLabel?: string;
+    title?: string;
+    className?: string;
+    onItemClick?: (item: BreadcrumbItem, index: number) => void;
+}
+declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
+
+type CollapsibleSectionHeadingTag = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface CollapsibleSectionProps {
+    title: string;
+    children: ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (next: boolean) => void;
+    className?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    iconClassName?: string;
+    bodyClassName?: string;
+    contentClassName?: string;
+    noSpacing?: boolean;
+    arrowSize?: number;
+    useDefaultHeaderStyles?: boolean;
+    useDefaultTitleStyles?: boolean;
+    onDelete?: () => void;
+    deleteActionLabel?: string;
+    deleteActionAlwaysVisible?: boolean;
+    onAdd?: () => void;
+    icon?: ReactNode;
+    headerAction?: ReactNode;
+    collapsible?: boolean;
+    titleAs?: CollapsibleSectionHeadingTag;
+}
+declare const _default: react.NamedExoticComponent<CollapsibleSectionProps & react.RefAttributes<HTMLElement>>;
+
+declare module 'react' {
+    interface ButtonHTMLAttributes<T> extends react__default.HTMLAttributes<T> {
+        command?: string;
+        commandfor?: string;
+    }
+}
+interface ModalProps {
+    id: string;
+    trigger?: ReactNode;
+    title?: string;
+    description?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    width?: string;
+    onClose?: () => void;
+    dismissible?: boolean;
+    lazyMount?: boolean;
+}
+declare const Modal: ({ id, trigger, title, description, children, footer, className, width, onClose, dismissible, lazyMount }: ModalProps) => react__default.JSX.Element;
+
+/** Opens a modal dialog by id when it is not already open. */
+declare const openModal: (id: string) => void;
+/** Closes a modal dialog by id when it is open. */
+declare const closeModal: (id: string) => void;
+/** Closes a modal and runs reset work after the close animation delay. */
+declare const resetModal: (id: string, reset: () => void, delay?: number) => void;
+
+type PopoverRole = 'dialog' | 'menu' | 'listbox' | 'tooltip';
+type ContextMenuOpenPredicate = (event: react__default.MouseEvent<Element>) => boolean;
+interface PopoverProps {
+    id: string;
+    trigger: ReactNode;
+    children: ReactNode | ((close: () => void) => ReactNode);
+    className?: string;
+    noPadding?: boolean;
+    triggerAction?: 'click' | 'contextmenu';
+    onOpenChange?: (isOpen: boolean) => void;
+    placement?: Placement;
+    role?: PopoverRole;
+    triggerAriaHaspopup?: 'menu' | 'dialog';
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    shouldOpenOnContextMenu?: ContextMenuOpenPredicate;
+}
+declare const Popover: ({ id, trigger, children, className, noPadding, triggerAction, onOpenChange, placement, role: popoverRole, triggerAriaHaspopup, ariaLabel, ariaLabelledBy, ariaDescribedBy, shouldOpenOnContextMenu }: PopoverProps) => react__default.JSX.Element;
+
+interface PopoverMenuProps {
+    children: ReactNode;
+    label?: string;
+    onClose?: () => void;
+}
+declare const PopoverMenu: react__default.ForwardRefExoticComponent<PopoverMenuProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type PopoverMenuItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
+interface PopoverMenuItemProps {
+    icon?: ReactNode;
+    label?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+    variant?: 'default' | 'danger';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    isLoading?: boolean;
+    rightAdornment?: ReactNode;
+    role?: PopoverMenuItemRole;
+    ariaHaspopup?: 'menu' | 'dialog';
+    ariaExpanded?: boolean;
+    ariaControls?: string;
+    tabIndex?: number;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare const PopoverMenuItem: react.ForwardRefExoticComponent<PopoverMenuItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+type MenuSize = 'sm' | 'md';
+/**
+ * A single actionable entry in a {@link Menu}.
+ *
+ * Set `divider: true` to render a visual separator instead of an action;
+ * separator entries ignore every other field except `id`.
+ */
+interface MenuItem {
+    /** Stable, unique key for this entry. */
+    id: string;
+    /** Visible label. Required for actionable items, unused for dividers. */
+    label?: ReactNode;
+    /** Optional leading icon node (e.g. a lucide-react icon element). */
+    icon?: ReactNode;
+    /** Invoked when the item is chosen; the menu closes afterwards. */
+    onSelect?: () => void;
+    /** Semantic tone. Only `danger` is visually distinct (maps to the danger item style). */
+    tone?: StatusTone;
+    /** Disabled items are not focusable and cannot be selected. */
+    disabled?: boolean;
+    /** Render this entry as a separator rule instead of an action. */
+    divider?: boolean;
+}
+/** Render-prop form of the trigger; receives the menu's open state. */
+type MenuTriggerRenderProp = (state: {
+    isOpen: boolean;
+}) => ReactNode;
+interface MenuProps {
+    /**
+     * The element (or render-prop) that opens the menu. A render-prop receives
+     * `{ isOpen }`. The trigger is wrapped in a focusable element so any node works.
+     */
+    trigger: ReactNode | MenuTriggerRenderProp;
+    /** The menu entries. Use `divider: true` entries to group sections. */
+    items: MenuItem[];
+    /** Floating-ui placement of the menu relative to the trigger. */
+    placement?: Placement;
+    /** Control density passed through to each item. */
+    size?: MenuSize;
+    /** Stable id for the popover; auto-generated when omitted. */
+    id?: string;
+    /** Accessible name announced for the menu region. Falls back to `menuLabel`. */
+    ariaLabel?: string;
+    /** Human label for the menu list (also used as the accessible name fallback). */
+    menuLabel?: string;
+    /** Accessible name for the auto-generated trigger wrapper. */
+    triggerAriaLabel?: string;
+    /** Rendered when `items` is empty (after filtering dividers). */
+    emptyContent?: ReactNode;
+    /** Notified whenever the menu opens or closes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Extra classes for the popover panel. */
+    className?: string;
+    /** Extra classes for the trigger wrapper. */
+    triggerClassName?: string;
+}
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLSpanElement>>;
+
+type TooltipPlacement = Placement;
+interface TooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    delay?: number;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Tooltip: ({ children, content, placement, delay, disabled, className }: TooltipProps) => react__default.JSX.Element;
+
+interface CursorTooltipProps {
+    isOpen: boolean;
+    x: number;
+    y: number;
+    content?: ReactNode;
+    className?: string;
+    autoPosition?: boolean;
+    interactive?: boolean;
+    offset?: number;
+    ariaLabel?: string;
+}
+declare const CursorTooltip: ({ isOpen, x, y, content, className, autoPosition, interactive, offset: cursorOffset, ariaLabel }: CursorTooltipProps) => react.JSX.Element | null;
+
+type FloatingToolbarPlacement = 'top' | 'bottom';
+type FloatingToolbarAlign = 'start' | 'center' | 'end';
+interface FloatingToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    placement?: FloatingToolbarPlacement;
+    align?: FloatingToolbarAlign;
+    /** Offset distance (rem) from the edge the toolbar is anchored to. */
+    offset?: number;
+    children?: ReactNode;
+}
+/**
+ * Centered floating pill toolbar (glass-bg) used over canvases/viewports.
+ * Positions itself absolute relative to its nearest positioned ancestor.
+ */
+declare const FloatingToolbar: react.ForwardRefExoticComponent<FloatingToolbarProps & react.RefAttributes<HTMLDivElement>>;
+
+type TagTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+type TagSize = 'xs' | 'sm' | 'md';
+type TagVariant = 'soft' | 'solid' | 'outline';
+type TagShape = 'pill' | 'square';
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: TagTone;
+    size?: TagSize;
+    variant?: TagVariant;
+    shape?: TagShape;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    children?: ReactNode;
+}
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+
+type StatusBadgeVariant = 'active' | 'inactive' | 'danger' | 'neutral' | 'success' | 'warning' | 'brand' | 'primary';
+interface StatusBadgeProps {
+    /**
+     * Status string - will be mapped to variant automatically
+     */
+    status?: string;
+    /**
+     * Visual variant override
+     */
+    variant?: StatusBadgeVariant;
+    /**
+     * Size variant
+     * @default 'default'
+     */
+    size?: 'default' | 'compact';
+    /**
+     * Badge content (alternative to status)
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+type StatusDotTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'brand';
+interface StatusDotProps {
+    tone?: StatusDotTone;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    label?: string;
+    /** Animates the dot with a gentle pulse. */
+    pulse?: boolean;
+    /** Adds a soft glow halo (same color as the dot). */
+    glow?: boolean;
+}
+declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;
+
+type InlineStatusTone = 'neutral' | 'muted' | 'success' | 'warning' | 'danger';
+interface InlineStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    tone?: InlineStatusTone;
+    icon?: ReactNode;
+    live?: 'polite' | 'assertive' | 'off';
+    severity?: 'status' | 'alert';
+    children?: ReactNode;
+}
+/**
+ * Inline live-region status/alert row (icon + message). Use for form-save
+ * feedback, toast-lite inline messages, etc.
+ */
+declare const InlineStatus: react.ForwardRefExoticComponent<InlineStatusProps & react.RefAttributes<HTMLDivElement>>;
+
+type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
+interface SaveStatusIndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    status: SaveStatus;
+    savingLabel?: string;
+    savedLabel?: string;
+    errorLabel?: string;
+    /** Hide when `idle`. Default: true. */
+    hideIdle?: boolean;
+}
+/**
+ * Inline save-state indicator (saving / saved / error) with live-region
+ * announcement. Consolidates plugin/latex/whiteboard "Saved" pills.
+ */
+declare const SaveStatusIndicator: react.ForwardRefExoticComponent<SaveStatusIndicatorProps & react.RefAttributes<HTMLDivElement>>;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+/** Minimal user-like shape the Avatar renders from. Local to the primitive so
+ *  the design system carries no domain (auth) coupling; a domain `User` is
+ *  structurally assignable. */
+interface AvatarUser {
+    firstName?: string | null;
+    lastName?: string | null;
+    email?: string | null;
+    avatar?: string | null;
+}
+interface AvatarProps {
+    src?: string | null;
+    alt?: string;
+    fallback?: string;
+    user?: AvatarUser | null;
+    size?: AvatarSize;
+    className?: string;
+    isOnline?: boolean;
+    showStatus?: boolean;
+    icon?: ReactNode;
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
+
+type StackSize = 'xs' | 'sm' | 'md';
+type AvatarStackUser = AvatarUser & {
+    isOnline?: boolean | null;
+    _id?: string;
+    id?: string;
+};
+interface AvatarStackProps {
+    users: AvatarStackUser[];
+    maxDisplay?: number;
+    size?: StackSize;
+    className?: string;
+}
+declare const AvatarStack: react.ForwardRefExoticComponent<AvatarStackProps & react.RefAttributes<HTMLElement>>;
+
+type IconFrameSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconFrameTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+type IconFrameShape = 'square' | 'circle';
+interface IconFrameProps extends HTMLAttributes<HTMLDivElement> {
+    size?: IconFrameSize;
+    tone?: IconFrameTone;
+    shape?: IconFrameShape;
+    children?: ReactNode;
+}
+/**
+ * Tinted rounded container for a decorative icon. Unifies the
+ * ~5 hand-rolled "icon bubbles" scattered across dashboards, tiles and menus.
+ */
+declare const IconFrame: react.ForwardRefExoticComponent<IconFrameProps & react.RefAttributes<HTMLDivElement>>;
+
+type CardVariant = 'elevated' | 'glass' | 'plain';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Background/elevation treatment. Defaults to `elevated`. */
+    variant?: CardVariant;
+    /**
+     * Makes the whole card clickable/focusable. Renders a `<button>` (unless
+     * `as`/`to` overrides the element) with keyboard activation. Requires an
+     * accessible name.
+     */
+    interactive?: boolean;
+    /** Applies the brand selected ring + `aria-selected` when interactive. */
+    selected?: boolean;
+    /**
+     * Convenience body padding applied directly to the root. Prefer
+     * `Card.Header`/`Card.Body`/`Card.Footer` slots for structured content;
+     * use this for simple single-region cards. Defaults to `none`.
+     */
+    padding?: CardPadding;
+    /** Element/component to render as. Defaults to `button` when interactive, else `div`. */
+    as?: ElementType;
+    children?: ReactNode;
+    className?: string;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+interface CardSlotProps extends HTMLAttributes<HTMLDivElement> {
+    as?: ElementType;
+    children?: ReactNode;
+    className?: string;
+}
+interface CardBodyProps extends CardSlotProps {
+    /** Body padding. Defaults to `md`. Use `none` to pad children manually. */
+    padding?: CardPadding;
+}
+declare const CardHeader: react.ForwardRefExoticComponent<CardSlotProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardBody: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: react.ForwardRefExoticComponent<CardSlotProps & react.RefAttributes<HTMLDivElement>>;
+type CardComponent = typeof Card & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+declare const CardWithSlots: CardComponent;
+
+type StatCardTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+type StatCardState = 'ready' | 'loading';
+interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    value?: ReactNode;
+    unit?: ReactNode;
+    icon?: ReactNode;
+    trend?: ReactNode;
+    footer?: ReactNode;
+    tone?: StatCardTone;
+    state?: StatCardState;
+    tabular?: boolean;
+    surface?: 'elevated' | 'soft';
+}
+/**
+ * Metric/stat display card. Consolidates the hand-rolled stat-card JSX
+ * used across dashboard, cluster metrics, container metrics and secret-key
+ * usage panels.
+ */
+declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SelectableCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'onSelect'> {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    iconTone?: IconFrameTone;
+    selected?: boolean;
+    badge?: ReactNode;
+    /**
+     * `radio` for mutually-exclusive groups (single selection),
+     * `checkbox` for multi-select.
+     */
+    selectionRole?: 'radio' | 'checkbox';
+    onSelect?: () => void;
+}
+/**
+ * Toggleable card with selected ring. Consolidates ~3 onboarding/creation
+ * card shapes (template cards, cluster-onboarding choices, create-container
+ * template selectors).
+ */
+declare const SelectableCard: react.ForwardRefExoticComponent<SelectableCardProps & react.RefAttributes<HTMLButtonElement>>;
+
+type DashedActionTone = 'muted' | 'brand';
+type DashedActionSize = 'sm' | 'md' | 'lg';
+interface DashedActionBoxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon?: ReactNode;
+    label: ReactNode;
+    tone?: DashedActionTone;
+    size?: DashedActionSize;
+    block?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Dashed-border "add X" call-to-action button. Consolidates the
+ * add-argument, add-option, add-field, file-dropzone patterns.
+ */
+declare const DashedActionBox: react.ForwardRefExoticComponent<DashedActionBoxProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface KeyValueRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    label: ReactNode;
+    value: ReactNode;
+    copyValue?: string;
+    action?: ReactNode;
+    tabular?: boolean;
+}
+/**
+ * Single label/value pair row with optional copy action or custom trailing
+ * action slot. Intended for use inside `KeyValueList`.
+ */
+declare const KeyValueRow: react.ForwardRefExoticComponent<KeyValueRowProps & react.RefAttributes<HTMLDivElement>>;
+interface KeyValueListProps extends HTMLAttributes<HTMLDivElement> {
+    dividers?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Definition-style list. Renders each child `KeyValueRow` with consistent
+ * spacing and optional inter-row dividers.
+ */
+declare const KeyValueList: react.ForwardRefExoticComponent<KeyValueListProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ListRowProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    leading?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    meta?: ReactNode;
+    trailing?: ReactNode;
+    selected?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    to?: string;
+    /** When `onClick`/`to` are absent, renders as a passive `div`. */
+    as?: 'button' | 'div' | 'li';
+    disabled?: boolean;
+}
+/**
+ * Hoverable list row with leading / primary / subtitle / trailing slots.
+ * Consolidates team member rows, chat list items, user cells, and similar list entries.
+ */
+declare const ListRow: react.ForwardRefExoticComponent<ListRowProps & react.RefAttributes<HTMLElement>>;
+
+declare enum TableSortDirection {
+    Ascending = "ascending",
+    Descending = "descending",
+    None = "none"
+}
+interface Column<T> {
+    key: string;
+    header: string;
+    render?: (row: T) => React.ReactNode;
+    headerClassName?: string;
+    cellClassName?: string;
+    sortable?: boolean;
+}
+interface TableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    getRowKey: (row: T, index: number) => string | number;
+    isLoading?: boolean;
+    skeletonRows?: number;
+    onRowClick?: (row: T) => void;
+    rowClassName?: string | ((row: T) => string);
+    className?: string;
+    getAriaSort?: (column: Column<T>) => TableSortDirection;
+    onSort?: (column: Column<T>) => void;
+    caption?: string;
+}
+declare const TableImpl: <T>({ columns, data, getRowKey, isLoading, skeletonRows, onRowClick, rowClassName, className, getAriaSort, onSort, caption }: TableProps<T>, ref: Ref<HTMLDivElement>) => react.JSX.Element;
+declare const Table: (<T>(props: TableProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReturnType<typeof TableImpl>) & {
+    displayName?: string;
+};
+
+type TimelineTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+interface TimelineItemProps extends HTMLAttributes<HTMLLIElement> {
+    icon?: ReactNode;
+    tone?: TimelineTone;
+    connector?: boolean;
+    children?: ReactNode;
+}
+/** A single timeline entry — dot/icon column + content column. */
+declare const TimelineItem: react.ForwardRefExoticComponent<TimelineItemProps & react.RefAttributes<HTMLLIElement>>;
+interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    children?: ReactNode;
+}
+/** Vertical timeline container. Children should be `TimelineItem` instances. */
+declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLOListElement>>;
+
+interface SparklineProps {
+    color: string;
+    values: number[];
+    labels?: string[];
+    yDomain?: {
+        min: number;
+        max: number;
+    };
+    width?: number | `${number}%`;
+    height?: number;
+    strokeWidth?: number;
+    fillOpacityStart?: number;
+    fillOpacityEnd?: number;
+    interpolation?: 'linear' | 'monotone';
+    animate?: boolean;
+    minDataMax?: number;
+}
+declare const Sparkline: ({ color, values, labels, yDomain, width, height, strokeWidth, fillOpacityStart, fillOpacityEnd, interpolation, animate, minDataMax }: SparklineProps) => react.JSX.Element;
+
+type CalloutTone = 'danger' | 'warning' | 'info' | 'success';
+interface CalloutAction {
+    label: string;
+    onClick: () => void;
+    icon?: ReactNode;
+    isLoading?: boolean;
+    disabled?: boolean;
+}
+interface CalloutProps {
+    tone: CalloutTone;
+    title?: string;
+    description?: string;
+    message?: ReactNode;
+    icon?: ReactNode;
+    action?: CalloutAction;
+    children?: ReactNode;
+    className?: string;
+    ariaLabel?: string;
+    role?: string;
+    ariaLive?: 'off' | 'polite' | 'assertive';
+}
+declare const Callout: react.ForwardRefExoticComponent<CalloutProps & react.RefAttributes<HTMLDivElement>>;
+
+interface EmptyStateProps {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    buttonText?: string;
+    buttonOnClick?: () => void;
+    buttonIsLoading?: boolean;
+    className?: string;
+    headingLevel?: 'h1' | 'h2' | 'h3';
+    announce?: boolean;
+}
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLElement>>;
+
+type ToastTone = StatusTone;
+interface ToastProps {
+    /** Semantic tone — drives the default icon, tint and aria-live politeness. */
+    tone?: ToastTone;
+    /** Optional bold heading shown above the message. */
+    title?: ReactNode;
+    /** Primary body content. Required. */
+    message: ReactNode;
+    /** Override the default tone icon. Pass `null` to hide it entirely. */
+    icon?: ReactNode;
+    /** When provided, renders a dismiss (close) button wired to this handler. */
+    onDismiss?: () => void;
+    /** Optional trailing action node (e.g. a Button or link). */
+    action?: ReactNode;
+    /** Accessible label for the dismiss button. */
+    dismissLabel?: string;
+    /**
+     * Override the live-region politeness. Defaults to `assertive` for
+     * `danger`, `polite` otherwise.
+     */
+    ariaLive?: 'polite' | 'assertive' | 'off';
+    className?: string;
+}
+/**
+ * Presentational toast / notification unit. This is the visual surface the
+ * app's `AppToaster` system renders — it owns no timers, no portal and no
+ * stacking; it is a pure, accessible building block.
+ *
+ * Composes {@link Surface} (elevated card), {@link IconFrame} (tinted tone
+ * glyph), {@link Text} and {@link CloseButton}.
+ */
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
+
+interface LoaderProps {
+    scale: number;
+    isFixed?: boolean;
+    fillParent?: boolean;
+    className?: string;
+    label?: string;
+    announce?: boolean;
+    reducedMotionLabel?: string;
+}
+declare const Loader: react.ForwardRefExoticComponent<LoaderProps & react.RefAttributes<HTMLDivElement>>;
+
+type SkeletonVariant = 'text' | 'rectangular' | 'rounded' | 'circular';
+type SkeletonAnimation = 'wave' | 'pulse' | 'none';
+interface SkeletonProps {
+    variant?: SkeletonVariant;
+    animation?: SkeletonAnimation;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ThinkingDotsProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role'> {
+    label?: string;
+    size?: 'sm' | 'md';
+}
+/**
+ * Three-dot typing indicator (chat/AI "thinking" state).
+ * Renders a visually-hidden label for assistive tech.
+ */
+declare const ThinkingDots: react.ForwardRefExoticComponent<ThinkingDotsProps & react.RefAttributes<HTMLSpanElement>>;
+
+type ProgressBarSize = 'sm' | 'md';
+interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** Completion in the range 0–100. Clamped. Ignored when `indeterminate`. */
+    value?: number;
+    /** Semantic color of the fill. @default 'brand' */
+    tone?: StatusTone;
+    /** Track / fill thickness. @default 'md' */
+    size?: ProgressBarSize;
+    /** Visible label rendered above the track and used as the accessible name. */
+    label?: ReactNode;
+    /** Render the numeric percentage next to the label. @default false */
+    showValue?: boolean;
+    /** Animate an undetermined-duration bar; drops `aria-valuenow`. @default false */
+    indeterminate?: boolean;
+}
+/**
+ * Linear determinate (or indeterminate) progress indicator.
+ *
+ * Track uses `--color-surface-2/3`; the fill resolves from the {@link StatusTone}
+ * via {@link STATUS_TONE_VARS}, defaulting to `--color-brand-primary`. Replaces the
+ * hand-rolled bars in `ProcessingLoader` and `TrajectoryUploadProgressPanel`.
+ */
+declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarProps & react.RefAttributes<HTMLDivElement>>;
+
+interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** Measured value, between `min` and `max`. Clamped. */
+    value: number;
+    /** Lower bound of the range. @default 0 */
+    min?: number;
+    /** Upper bound of the range. @default 100 */
+    max?: number;
+    /** Semantic color of the fill. @default 'brand' */
+    tone?: StatusTone;
+    /** Inline leading label, also used as the accessible name. */
+    label?: ReactNode;
+    /** Render the value (formatted by `formatValue`) at the trailing edge. @default false */
+    showValue?: boolean;
+    /** Formats the trailing value text; defaults to the raw number. */
+    formatValue?: (value: number, min: number, max: number) => ReactNode;
+}
+/**
+ * Compact inline gauge for a known-range scalar (e.g. quota, utilization,
+ * confidence). A `role="meter"` sibling of {@link default ProgressBar}: shares the
+ * track/fill visual but expresses a measurement rather than task completion.
+ */
+declare const Meter: react.ForwardRefExoticComponent<MeterProps & react.RefAttributes<HTMLDivElement>>;
+
+interface AsyncBoundaryState {
+    loading?: boolean;
+    error?: unknown;
+    accessDenied?: boolean;
+    /** When empty is true, the `empty` slot renders instead of children. */
+    empty?: boolean;
+}
+interface AsyncBoundaryProps {
+    state: AsyncBoundaryState;
+    loading: ReactNode;
+    error: (err: unknown) => ReactNode;
+    accessDenied?: ReactNode;
+    empty?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Renders the appropriate fallback based on async state. Consolidates the
+ * loading → error → access-denied → empty → content switch hand-rolled in
+ * every data-backed panel.
+ *
+ * The `error` slot is a function so callers can decide how to derive
+ * retry/description from the error value.
+ */
+declare const AsyncBoundary: ({ state, loading, error, accessDenied, empty, children }: AsyncBoundaryProps) => react.JSX.Element;
+
+interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    children?: ReactNode;
+}
+/**
+ * Screen-reader-only wrapper. Hides its children visually but keeps them
+ * reachable by assistive technology. Maps to the `.sr-only` utility.
+ */
+declare const VisuallyHidden: react.ForwardRefExoticComponent<VisuallyHiddenProps & react.RefAttributes<HTMLElement>>;
+
+export { type AlignItems, AsyncBoundary, type AsyncBoundaryProps, type AsyncBoundaryState, Avatar, AvatarStack, type AvatarUser, BOX_STYLE_KEYS, type BorderToken, Box, type BoxProps, type BoxStyleProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsVariant, Button, type ButtonProps, Callout, type CalloutTone, CardWithSlots as Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardPadding, type CardProps, type CardSlotProps, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseButton, _default as CollapsibleSection, type Column, type ControlSize, CursorTooltip, DashedActionBox, type DashedActionBoxProps, type DashedActionSize, type DashedActionTone, type Display, Divider, type DividerProps, EmptyState, type FlexDirection, type FlexToken, FloatingToolbar, type FloatingToolbarAlign, type FloatingToolbarPlacement, type FloatingToolbarProps, FormField, type FormFieldLayout, type FormFieldProps, type GapToken, Grid, type GridProps, Heading, type HeadingLevel, type HeadingProps, type HeightToken, IconButton, IconFrame, type IconFrameProps, type IconFrameShape, type IconFrameSize, type IconFrameTone, InlineStatus, type InlineStatusProps, type InlineStatusTone, type JustifyContent, KeyValueList, type KeyValueListProps, KeyValueRow, type KeyValueRowProps, LiquidToggle, ListRow, type ListRowProps, Loader, type MarginBottomToken, type MarginTopToken, type MarginXToken, Menu, type MenuItem, type MenuProps, type MenuTriggerRenderProp, Meter, type MeterProps, Modal, NumberInput, type NumberInputProps, type OverflowToken, type PaddingToken, type PaddingXToken, Popover, PopoverMenu, PopoverMenuItem, type PositionToken, ProgressBar, type ProgressBarProps, type ProgressBarSize, Radio, type RadioProps, type RadioSize, type RadiusToken, Row, type RowProps, STATUS_TONE_VARS, type SaveStatus, SaveStatusIndicator, type SaveStatusIndicatorProps, SearchInput, SectionLabel, type SectionLabelProps, type SegmentedTabOption, SegmentedTabs, Select, type SelectOption, type SelectProps, SelectableCard, type SelectableCardProps, type Shape, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonVariant, _default$1 as Slider, type SliderProps, Sparkline, type SparklineProps, Stack, type StackProps, StatCard, type StatCardProps, type StatCardState, type StatCardTone, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotTone, type StatusTone, type Step, type StepIndicator, type StepTitles, Stepper, Surface, type SurfaceProps, type SurfaceVariant, Tab, type TabProps, Table, TableSortDirection, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, Tag, type TagProps, type TagShape, type TagSize, type TagTone, type TagVariant, Text, type TextAlign, TextInput, type TextInputProps, type TextProps, type TextSize, type TextTone, type TextWeight, Textarea, type TextareaProps, ThinkingDots, type ThinkingDotsProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, type TimelineTone, Toast, type ToastProps, type ToastTone, Tooltip, type TooltipPlacement, type TransitionToken, VisuallyHidden, type VisuallyHiddenProps, type WidthToken, buildBoxClasses, buildTypographyClasses, closeModal, openModal, resetModal, splitBoxProps };