@ceebee/ui 0.5.0 → 0.6.0

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as _base_ui_react from '@base-ui/react';
 
 /**
@@ -117,6 +117,35 @@ interface ButtonProps extends NativeButtonProps {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+type FloatButtonPlacement = 'bottom-start' | 'bottom-end';
+type NativeFloatButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'aria-labelledby' | 'children' | 'className' | 'color' | 'role' | 'style'>;
+type FloatButtonCommonProps = NativeFloatButtonProps & {
+    /** Required accessible name. It is also rendered when `visibleLabel` is enabled. */
+    label: string;
+    tone?: Tone;
+    size?: Size;
+    placement?: FloatButtonPlacement;
+    /** These native escape hatches are rejected so FloatButton owns its name and fixed layout. */
+    'aria-label'?: never;
+    'aria-labelledby'?: never;
+    style?: never;
+};
+type FloatButtonProps = FloatButtonCommonProps & ({
+    /** Renders `label` beside the optional icon. */
+    visibleLabel: true;
+    icon?: ReactNode;
+} | {
+    /** An icon-only action must still expose a visible affordance. */
+    visibleLabel?: false;
+    icon: ReactElement;
+});
+/**
+ * A persistent, fixed-viewport action. It intentionally remains one native
+ * button: navigation, grouped actions, and scroll-to-top behaviour are separate
+ * contracts rather than variants of this component.
+ */
+declare const FloatButton: react.ForwardRefExoticComponent<FloatButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface FieldWiring {
     controlId: string;
     describedBy: string | undefined;
@@ -436,6 +465,250 @@ interface NumberInputProps extends NumberBounds {
  */
 declare function InputNumber({ value, defaultValue, onValueChange, min, max, step, size, disabled, invalid, name, placeholder, suffix, className, }: NumberInputProps): react.JSX.Element;
 
+interface SliderSkeletonProps {
+    orientation?: SliderOrientation;
+    range?: boolean;
+    size?: Size;
+}
+/** Placeholder geometry for a one- or two-thumb Slider (ADR 0009). */
+declare function SliderSkeleton({ orientation, range, size }: SliderSkeletonProps): react.JSX.Element;
+
+type SliderOrientation = 'horizontal' | 'vertical';
+type SliderRangeValue = readonly [number, number];
+interface SliderCommonProps {
+    /** Names the value control. Range thumbs become “Minimum {label}” and “Maximum {label}”. */
+    label: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    largeStep?: number;
+    minStepsBetweenValues?: number;
+    /** Disables visual thumb transitions without changing Slider state feedback. */
+    motion?: boolean;
+    disabled?: boolean;
+    orientation?: SliderOrientation;
+    tone?: Tone;
+    size?: Size;
+    name?: string;
+    /** Announces a formatted value without changing the numeric form value. */
+    getAriaValueText?: (value: number, index: number) => string;
+}
+type SliderProps = SliderCommonProps & ({
+    range?: false;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    onValueCommitted?: (value: number) => void;
+} | {
+    range: true;
+    value?: SliderRangeValue;
+    defaultValue?: SliderRangeValue;
+    onValueChange?: (value: SliderRangeValue) => void;
+    onValueCommitted?: (value: SliderRangeValue) => void;
+});
+/**
+ * A continuous numeric value, or two bounded values when `range` is true.
+ * Base UI owns the hidden range inputs, keyboard map, pointer and touch dragging,
+ * thumb collision, and form submission semantics.
+ */
+declare function SliderComponent(props: SliderProps): react.JSX.Element;
+declare const Slider: typeof SliderComponent & {
+    Skeleton: typeof SliderSkeleton;
+};
+
+interface MentionsSkeletonProps {
+    rows?: number;
+}
+declare function MentionsSkeleton({ rows }: MentionsSkeletonProps): react.JSX.Element;
+
+interface MentionOption {
+    /** Stable text inserted after the trigger character. */
+    value: string;
+    label: ReactNode;
+    searchText?: string;
+    disabled?: boolean;
+}
+interface MentionsProps {
+    options: MentionOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    trigger?: string;
+    separator?: string;
+    placeholder?: string;
+    rows?: number;
+    name?: string;
+    disabled?: boolean;
+    motion?: boolean;
+}
+/** Inline textarea editing with an anchored mention-list contract, not a text-field combobox. */
+declare function MentionsRoot({ options, value, defaultValue, onValueChange, trigger, separator, placeholder, rows, name, disabled, motion, }: MentionsProps): react.JSX.Element;
+declare const Mentions: typeof MentionsRoot & {
+    Skeleton: typeof MentionsSkeleton;
+};
+
+interface TransferSkeletonProps {
+    items?: number;
+}
+/** Static two-list loading geometry matching Transfer without controls or destination state. */
+declare function TransferSkeleton({ items }: TransferSkeletonProps): react.JSX.Element;
+
+interface TransferItem {
+    /** Stable identity. Keys must be unique within one Transfer. */
+    key: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+interface TransferProps {
+    /** The application supplies the complete, stable collection; Transfer never fetches it. */
+    items: TransferItem[];
+    /** Keys currently assigned to the target list. Supplying this makes assignment controlled. */
+    targetKeys?: string[];
+    defaultTargetKeys?: string[];
+    onTargetKeysChange?: (keys: string[]) => void;
+    sourceTitle?: ReactNode;
+    targetTitle?: ReactNode;
+    disabled?: boolean;
+    'aria-label'?: string;
+}
+/**
+ * Two persistent checkbox lists for assigning supplied records between source and target.
+ * `targetKeys` is controlled or uncontrolled assignment state; transient per-list checkbox
+ * selection is deliberately internal, cleared only for records that are moved.
+ */
+declare function TransferRoot({ items, targetKeys, defaultTargetKeys, onTargetKeysChange, sourceTitle, targetTitle, disabled, 'aria-label': ariaLabel, }: TransferProps): react.JSX.Element;
+declare const Transfer: typeof TransferRoot & {
+    Skeleton: typeof TransferSkeleton;
+};
+
+interface TreeSkeletonProps {
+    items?: number;
+    size?: 'sm' | 'md' | 'lg';
+    tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+    'aria-label'?: string;
+}
+/** Placeholder geometry for an inline tree whose static nodes are still loading. */
+declare function TreeSkeleton({ items, size, tone, 'aria-label': ariaLabel }: TreeSkeletonProps): react.JSX.Element;
+
+type TreeTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+type TreeSize = 'sm' | 'md' | 'lg';
+interface TreeNode {
+    key: string;
+    label: ReactNode;
+    /** Static supplementary content, such as a count or status. It must not introduce controls. */
+    content?: ReactNode;
+    disabled?: boolean;
+    children?: TreeNode[];
+}
+interface TreeProps {
+    nodes: TreeNode[];
+    expandedPaths?: string[];
+    defaultExpandedPaths?: string[];
+    onExpandedPathsChange?: (paths: string[]) => void;
+    selectedPath?: string;
+    defaultSelectedPath?: string;
+    onSelectedPathChange?: (path: string) => void;
+    size?: TreeSize;
+    tone?: TreeTone;
+    motion?: boolean;
+    'aria-label'?: string;
+}
+/**
+ * Inline hierarchy with the ARIA tree keyboard model. It is neither a navigation menu nor a
+ * disclosure: Tree owns one roving treeitem focus and independently controlled expansion.
+ */
+declare function TreeRoot({ nodes, expandedPaths, defaultExpandedPaths, onExpandedPathsChange, selectedPath, defaultSelectedPath, onSelectedPathChange, size, tone, motion, 'aria-label': ariaLabel, }: TreeProps): react.JSX.Element;
+declare const Tree: typeof TreeRoot & {
+    Skeleton: typeof TreeSkeleton;
+};
+
+interface TreeSelectSkeletonProps {
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function TreeSelectSkeleton({ size }: TreeSelectSkeletonProps): react.JSX.Element;
+
+interface TreeSelectProps {
+    nodes: TreeNode[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (path: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    label: string;
+    placeholder?: string;
+    name?: string;
+    disabled?: boolean;
+    motion?: boolean;
+}
+/** One value chosen from injected hierarchy. Popover owns anchoring/dismissal; Tree owns traversal. */
+declare function TreeSelectRoot({ nodes, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, label, placeholder, name, disabled, motion }: TreeSelectProps): react.JSX.Element;
+declare const TreeSelect: typeof TreeSelectRoot & {
+    Skeleton: typeof TreeSelectSkeleton;
+};
+
+interface CascaderSkeletonProps {
+    rows?: number;
+}
+declare function CascaderSkeleton({ rows }: CascaderSkeletonProps): react.JSX.Element;
+
+interface CascaderOption {
+    key: string;
+    label: ReactNode;
+    disabled?: boolean;
+    children?: CascaderOption[];
+}
+interface CascaderProps {
+    options: CascaderOption[];
+    label: string;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (path: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    motion?: boolean;
+}
+/** A hierarchical, column-by-column selection surface. It is not an inline tree or a flat Select. */
+declare function CascaderRoot({ options, label, value, defaultValue, onValueChange, placeholder, disabled, motion, }: CascaderProps): react.JSX.Element;
+declare const Cascader: typeof CascaderRoot & {
+    Skeleton: typeof CascaderSkeleton;
+};
+
+declare function ColorPickerSkeleton(): react.JSX.Element;
+
+interface ColorPickerOption {
+    tone: Tone;
+    label: string;
+    disabled?: boolean;
+}
+interface ColorPickerProps {
+    label: string;
+    value?: Tone;
+    defaultValue?: Tone;
+    onValueChange?: (tone: Tone) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    options?: ColorPickerOption[];
+    name?: string;
+    disabled?: boolean;
+    motion?: boolean;
+}
+declare function ColorPickerRoot({ label, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, options, name, disabled, motion }: ColorPickerProps): react.JSX.Element;
+declare const ColorPicker: typeof ColorPickerRoot & {
+    Skeleton: typeof ColorPickerSkeleton;
+};
+
+interface ModalSkeletonProps {
+    size?: 'sm' | 'md' | 'lg';
+    lines?: number;
+    withActions?: boolean;
+    className?: string;
+}
+/** Static loading geometry for content that will resolve into a Modal (ADR 0009). */
+declare function ModalSkeleton({ size, lines, withActions, className, }: ModalSkeletonProps): react.JSX.Element;
+
 interface DialogProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -456,7 +729,28 @@ interface DialogProps {
  * (ADR 0003). Enter and exit are CSS transitions driven by Base UI's own state attributes,
  * because Base UI owns this element's mount lifecycle — motion is used where we own it.
  */
-declare function Modal({ open, defaultOpen, onOpenChange, title, description, children, footer, size, placement, trigger, className, }: DialogProps): react.JSX.Element;
+declare function ModalRoot({ open, defaultOpen, onOpenChange, title, description, children, footer, size, placement, trigger, className, }: DialogProps): react.JSX.Element;
+interface ModalConfirmProps extends Omit<DialogProps, 'children' | 'footer' | 'placement' | 'size'> {
+    /** Optional supporting content below the description. */
+    children?: ReactNode;
+    /** Action that dismisses without applying the decision. Rendered first. */
+    cancelAction?: ReactNode;
+    /** Action that applies the decision. Rendered last. */
+    confirmAction: ReactNode;
+    /** Semantic treatment for the confirmation icon and emphasis. */
+    tone?: Tone;
+    /** Replaces the semantic icon supplied by the consumer. */
+    icon?: ReactNode;
+}
+/**
+ * A composable counterpart to Ant's modal confirmation family. It intentionally reuses Modal's
+ * dialog contract: this is viewport-modal confirmation, never an anchored Popconfirm.
+ */
+declare function ModalConfirm({ title, description, children, cancelAction, confirmAction, tone, icon, className, ...rootProps }: ModalConfirmProps): react.JSX.Element;
+declare const Modal: typeof ModalRoot & {
+    Confirm: typeof ModalConfirm;
+    Skeleton: typeof ModalSkeleton;
+};
 declare const DialogClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 interface DrawerProps {
@@ -572,6 +866,41 @@ interface TooltipProps {
 }
 declare function Tooltip({ children, label, side, align, sideOffset, showArrow, delay, }: TooltipProps): react.JSX.Element;
 
+interface PopconfirmSkeletonProps {
+    withDescription?: boolean;
+    withCancel?: boolean;
+}
+/** Static loading geometry matching the anchored confirmation surface. */
+declare function PopconfirmSkeleton({ withDescription, withCancel, }: PopconfirmSkeletonProps): react.JSX.Element;
+
+interface PopconfirmProps {
+    /** Native interactive element that anchors and opens the confirmation. */
+    trigger: ReactElement;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Dismisses the confirmation after the rendered action handles its click. */
+    cancelAction?: ReactElement;
+    /** Dismisses the confirmation after the rendered action handles its click. */
+    confirmAction: ReactElement;
+    tone?: Extract<Tone, 'neutral' | 'warning' | 'danger'>;
+    icon?: ReactNode;
+    side?: Side;
+    align?: Align;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    motion?: boolean;
+}
+/**
+ * Anchored, lightweight confirmation. Base UI owns anchoring, outside dismissal, Escape,
+ * initial focus, and focus restoration when dismissal does not move focus elsewhere.
+ * Viewport-modal confirmation remains Modal.Confirm.
+ */
+declare function PopconfirmRoot({ trigger, title, description, cancelAction, confirmAction, tone, icon, side, align, open, defaultOpen, onOpenChange, motion, }: PopconfirmProps): react.JSX.Element;
+declare const Popconfirm: typeof PopconfirmRoot & {
+    Skeleton: typeof PopconfirmSkeleton;
+};
+
 interface TagProps {
     children: ReactNode;
     tone?: Tone;
@@ -676,6 +1005,33 @@ declare function useToast(): {
     promise: <Value, T extends any = any>(promise: Promise<Value>, options: _base_ui_react.ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 };
 
+interface WatermarkSkeletonProps {
+    content?: WatermarkContent;
+    tone?: Tone;
+    density?: WatermarkDensity;
+    direction?: WatermarkDirection;
+    lines?: number;
+}
+/** Matching marked content surface while the wrapped content is loading (ADR 0009). */
+declare function WatermarkSkeleton({ content, tone, density, direction, lines, }: WatermarkSkeletonProps): react.JSX.Element;
+
+type WatermarkContent = string | string[];
+type WatermarkDensity = 'sm' | 'md' | 'lg';
+type WatermarkDirection = 'horizontal' | 'vertical';
+interface WatermarkProps {
+    /** One mark, or a sequence that repeats in order across the overlay. */
+    content: WatermarkContent;
+    children: ReactNode;
+    tone?: Tone;
+    density?: WatermarkDensity;
+    direction?: WatermarkDirection;
+}
+/** A presentational overlay that keeps its supplied content's semantics untouched. */
+declare function WatermarkRoot({ content, children, tone, density, direction, }: WatermarkProps): react.JSX.Element;
+declare const Watermark: typeof WatermarkRoot & {
+    Skeleton: typeof WatermarkSkeleton;
+};
+
 interface TabItem {
     value: string;
     label: ReactNode;
@@ -726,6 +1082,58 @@ type DropdownMenuProps = DropdownMenuBaseProps & ({
 /** Typeahead, roving focus, and dismissal are Base UI's; the surface and the rhythm are ours. */
 declare function Dropdown({ trigger, items, sections, align, side, className }: DropdownMenuProps): react.JSX.Element;
 
+interface MenuSkeletonProps {
+    items?: number;
+    size?: 'sm' | 'md' | 'lg';
+    tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+    'aria-label'?: string;
+}
+/** Placeholder rows for a persistent navigation menu whose destinations have not loaded yet. */
+declare function MenuSkeleton({ items, size, tone, 'aria-label': ariaLabel, }: MenuSkeletonProps): react.JSX.Element;
+
+type MenuTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+type MenuSize = 'sm' | 'md' | 'lg';
+interface PersistentMenuLeaf {
+    key: string;
+    label: ReactNode;
+    href: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface PersistentMenuBranch {
+    key: string;
+    label: ReactNode;
+    /** Explicit accessible name for the disclosure control; labels may contain arbitrary React nodes. */
+    ariaLabel: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children: PersistentMenuItem[];
+    href?: never;
+}
+type PersistentMenuItem = PersistentMenuLeaf | PersistentMenuBranch;
+interface MenuProps {
+    items: PersistentMenuItem[];
+    selectedPath?: string;
+    defaultSelectedPath?: string;
+    onSelectedPathChange?: (path: string) => void;
+    openKeys?: string[];
+    defaultOpenKeys?: string[];
+    onOpenKeysChange?: (keys: string[]) => void;
+    size?: MenuSize;
+    tone?: MenuTone;
+    motion?: boolean;
+    'aria-label'?: string;
+}
+/**
+ * Persistent navigation in normal document flow. Native links retain their normal browser
+ * behaviour; nested branches are disclosure buttons. This is intentionally not Dropdown:
+ * Dropdown is an anchored, dismissible action menu with roving focus.
+ */
+declare function MenuRoot({ items, selectedPath, defaultSelectedPath, onSelectedPathChange, openKeys, defaultOpenKeys, onOpenKeysChange, size, tone, motion, 'aria-label': ariaLabel, }: MenuProps): react.JSX.Element;
+declare const Menu: typeof MenuRoot & {
+    Skeleton: typeof MenuSkeleton;
+};
+
 interface NavItem {
     label: ReactNode;
     icon?: ReactNode;
@@ -849,6 +1257,101 @@ interface PaginationProps {
 }
 declare function Pagination({ page, pageSize, total, onPageChange, showSummary, siblings, className, }: PaginationProps): react.JSX.Element;
 
+interface CollapseSkeletonProps {
+    items?: number;
+    openItems?: number[];
+    lines?: number;
+    size?: 'sm' | 'md' | 'lg';
+    bordered?: boolean;
+    expandIconPosition?: 'start' | 'end';
+    className?: string;
+}
+/** Matching disclosure-row geometry for a Collapse that has not loaded yet (ADR 0009). */
+declare function CollapseSkeleton({ items, openItems, lines, size, bordered, expandIconPosition, className, }: CollapseSkeletonProps): react.JSX.Element;
+
+interface CollapseItem {
+    key: string;
+    label: ReactNode;
+    children: ReactNode;
+    disabled?: boolean;
+}
+interface CollapseProps {
+    items: CollapseItem[];
+    /** One key in single mode; an array of keys when `multiple` is true. */
+    value?: string | string[];
+    /** Initial key or keys for an uncontrolled Collapse. */
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[] | undefined) => void;
+    multiple?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    bordered?: boolean;
+    expandIconPosition?: 'start' | 'end';
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    disabled?: boolean;
+    /** Keeps closed panels in the DOM, for content whose local state must survive toggles. */
+    keepMounted?: boolean;
+    /** Allows browser page search to reveal matching content in closed panels. */
+    hiddenUntilFound?: boolean;
+    motion?: boolean;
+    className?: string;
+}
+declare function CollapseRoot({ items, value, defaultValue, onValueChange, multiple, size, bordered, expandIconPosition, headingLevel, disabled, keepMounted, hiddenUntilFound, motion, className, }: CollapseProps): react.JSX.Element;
+/** A disclosure group. Base UI owns expansion state, button semantics, and panel association. */
+declare const Collapse: typeof CollapseRoot & {
+    Skeleton: typeof CollapseSkeleton;
+};
+
+interface CalendarSkeletonProps {
+    weekStartsOn?: 0 | 1;
+}
+/** A fixed six-week placeholder matching Calendar's inline month-grid geometry. */
+declare function CalendarSkeleton({ weekStartsOn }: CalendarSkeletonProps): react.JSX.Element;
+
+interface CalendarDay {
+    date: Date;
+    inMonth: boolean;
+    selected: boolean;
+    today: boolean;
+    disabled: boolean;
+}
+interface CalendarProps {
+    /** Selected local calendar day. Supplying it makes date selection controlled. */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date) => void;
+    /** Month being displayed. Supplying it makes month navigation controlled. */
+    month?: Date;
+    defaultMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (date: Date) => boolean;
+    /** Renders static, noninteractive content inside each day button without changing its grid or selection contract. */
+    renderDay?: (day: CalendarDay) => ReactNode;
+    locale?: string | string[];
+    weekStartsOn?: 0 | 1;
+    disabled?: boolean;
+}
+/** Inline month grid: it owns neither a field, a popup, nor dismissal. */
+declare function CalendarRoot({ value, defaultValue, onValueChange, month, defaultMonth, onMonthChange, minDate, maxDate, disabledDate, renderDay, locale, weekStartsOn, disabled, }: CalendarProps): react.JSX.Element;
+declare const Calendar: typeof CalendarRoot & {
+    Skeleton: typeof CalendarSkeleton;
+};
+
+interface ImageSkeletonProps {
+    aspectRatio?: number;
+    radius?: "none" | "sm" | "md" | "lg" | "xl";
+    className?: string;
+}
+interface ImagePreviewGroupSkeletonProps extends ImageSkeletonProps {
+    items?: number;
+}
+/** Reserves the same aspect-ratio and radius geometry as Image (ADR 0009). */
+declare function ImageSkeleton({ aspectRatio, radius, className, }: ImageSkeletonProps): react.JSX.Element;
+/** Mirrors the responsive thumbnail collection owned by Image.PreviewGroup. */
+declare function ImagePreviewGroupSkeleton({ items, aspectRatio, radius, className, }: ImagePreviewGroupSkeletonProps): react.JSX.Element;
+
+type TokenReference = `var(--${string})`;
 interface ImageProps {
     src: string;
     /** Empty string is allowed, and means "decorative" — but it has to be said out loud. */
@@ -858,17 +1361,59 @@ interface ImageProps {
     /** A tiny data URI, blurred up while the real image loads. */
     blurDataUrl?: string;
     /** Flat colour to sit behind the image when there is no blur placeholder. */
-    background?: string;
-    fit?: 'cover' | 'contain';
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    loading?: 'lazy' | 'eager';
+    background?: TokenReference;
+    fit?: "cover" | "contain";
+    radius?: "none" | "sm" | "md" | "lg" | "xl";
+    loading?: "lazy" | "eager";
+    /** Opts this image out of its loading fade without changing its visibility. */
+    motion?: boolean;
+    className?: string;
+}
+declare function ImageRoot({ src, alt, aspectRatio, blurDataUrl, background, fit, radius, loading, motion, className, }: ImageProps): react.JSX.Element;
+interface ImagePreviewItem extends ImageProps {
+    /** Stable identity for React and controlled collections. */
+    id: string;
+    /** Optional larger source used only inside the preview. */
+    previewSrc?: string;
+    /** Optional content shown below the fullscreen image. */
+    caption?: ReactNode;
+}
+interface ImagePreviewLabels {
+    close: string;
+    previous: string;
+    next: string;
+    zoomIn: string;
+    zoomOut: string;
+    resetZoom: string;
+    open: (item: ImagePreviewItem, index: number) => string;
+    position: (current: number, total: number) => string;
+}
+interface ImagePreviewGroupProps {
+    items: readonly ImagePreviewItem[];
+    /** Accessible name for the thumbnail collection. */
+    label: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    loop?: boolean;
+    labels?: Partial<ImagePreviewLabels>;
+    motion?: boolean;
     className?: string;
 }
+declare function ImagePreviewGroupRoot({ items, label, open, defaultOpen, onOpenChange, index, defaultIndex, onIndexChange, loop, labels: labelOverrides, motion, className, }: ImagePreviewGroupProps): react.JSX.Element;
 /**
- * An `<img>` that reserves its space and fades in. It is not a Next.js Image and does not want to
- * be: no resizing service, no loader — those belong to the framework the app already chose.
+ * `Image` stays an image-loading composition. Preview is a separate compound contract because it
+ * adds dialog semantics, keyboard navigation, focus ownership, and a zoom gesture (ADR 0014).
  */
-declare function Image({ src, alt, aspectRatio, blurDataUrl, background, fit, radius, loading, className, }: ImageProps): react.JSX.Element;
+declare const Image: typeof ImageRoot & {
+    PreviewGroup: typeof ImagePreviewGroupRoot & {
+        Skeleton: typeof ImagePreviewGroupSkeleton;
+    };
+    Skeleton: typeof ImageSkeleton;
+};
 
 interface CarouselProps {
     children: ReactNode;
@@ -1049,4 +1594,52 @@ interface StaggerProps {
 /** Wraps each child in a Reveal with an increasing delay — the list arrives, it does not pop. */
 declare function Stagger({ children, step, from, onView, className }: StaggerProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type Align, AutoComplete, type AutoplayConditions, Button, type ButtonProps, Carousel, type CarouselProps, type CarouselSkeletonProps, type CarouselSlideProps, Checkbox, type CheckboxProps, Checklist, type ChecklistProps, type ChecklistTask, Coachmark, type CoachmarkProps, type Column, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DataTableProps, type DataTableSkeletonProps, type DateInputProps, DatePicker, type DayCell, DialogClose, type DialogProps, Drawer, DrawerClose, type DrawerProps, Dropdown, type DropdownMenuProps, type DurationToken, Field, type FieldProps, type FileRules, Image, type ImageProps, Input, InputNumber, type Labels, LabelsProvider, type LabelsProviderProps, type MenuItem, type MenuSection, Modal, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type NumberBounds, type NumberInputProps, type PageRange, Pagination, type PaginationProps, type PaletteCommand, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, type RankedCommand, Rate, type RateProps, type Rejection, Reveal, type RevealProps, type SeenStore, Select, type SelectOption, type SelectProps, type Side, Sidebar, type SidebarProps, type SortDirection, type SortState, type SpringPreset, Stagger, type StaggerProps, type StepTarget, Switch, type SwitchProps, type TabItem, Table, Tabs, type TabsProps, Tag, type TagProps, type TextInputProps, Textarea, type TextareaProps, type ThemeChoice, ThemeProvider, type TimeInputProps, TimePicker, type TimeValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tour, type TourAction, type TourProps, type TourState, type TourStatus, type TourStep, Upload, type UploadProps, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };
+interface BorderBeamProps {
+    /** Content keeps its own semantics and interactions; the beam is decorative. */
+    children: ReactNode;
+    tone?: Tone;
+    /** Controls the beam thickness and the geometry of its visible sweep. */
+    size?: Size;
+    /** Opt out of the decorative movement while retaining a visible border. */
+    motion?: boolean;
+}
+/**
+ * Wraps content with a decorative moving border. The overlay is deliberately
+ * not an interaction layer: it is hidden from assistive technology and cannot
+ * intercept pointer events.
+ */
+declare function BorderBeam({ children, tone, size, motion }: BorderBeamProps): react.JSX.Element;
+
+interface SplitterSkeletonProps {
+    orientation?: SplitterOrientation;
+    size?: number;
+    handleSize?: SplitterHandleSize;
+}
+declare function SplitterSkeleton({ orientation, size, handleSize, }: SplitterSkeletonProps): react.JSX.Element;
+
+type SplitterOrientation = 'horizontal' | 'vertical';
+type SplitterHandleSize = 'sm' | 'md' | 'lg';
+interface SplitterProps {
+    /** Percentage assigned to the first pane. Supplying this makes the Splitter controlled. */
+    size?: number;
+    /** Initial percentage assigned to the first pane when uncontrolled. */
+    defaultSize?: number;
+    /** Lowest allowed percentage for the first pane. */
+    minSize?: number;
+    /** Highest allowed percentage for the first pane. */
+    maxSize?: number;
+    onSizeChange?: (size: number) => void;
+    orientation?: SplitterOrientation;
+    /** Handle geometry only; it does not alter the resize contract. */
+    handleSize?: SplitterHandleSize;
+    disabled?: boolean;
+    /** Accessible name for the separator. */
+    handleLabel?: string;
+    children: ReactNode;
+}
+declare function SplitterRoot({ size, defaultSize, minSize, maxSize, onSizeChange, orientation, handleSize, disabled, handleLabel, children, }: SplitterProps): react.JSX.Element;
+declare const Splitter: typeof SplitterRoot & {
+    Skeleton: typeof SplitterSkeleton;
+};
+
+export { Alert, type AlertProps, type Align, AutoComplete, type AutoplayConditions, BorderBeam, type BorderBeamProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarProps, CalendarSkeleton, type CalendarSkeletonProps, Carousel, type CarouselProps, type CarouselSkeletonProps, type CarouselSlideProps, Cascader, type CascaderOption, type CascaderProps, CascaderSkeleton, type CascaderSkeletonProps, Checkbox, type CheckboxProps, Checklist, type ChecklistProps, type ChecklistTask, Coachmark, type CoachmarkProps, Collapse, type CollapseItem, type CollapseProps, CollapseSkeleton, type CollapseSkeletonProps, ColorPicker, type ColorPickerOption, type ColorPickerProps, ColorPickerSkeleton, type Column, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DataTableProps, type DataTableSkeletonProps, type DateInputProps, DatePicker, type DayCell, DialogClose, type DialogProps, Drawer, DrawerClose, type DrawerProps, Dropdown, type DropdownMenuProps, type DurationToken, Field, type FieldProps, type FileRules, FloatButton, type FloatButtonPlacement, type FloatButtonProps, Image, type ImagePreviewGroupProps, type ImagePreviewGroupSkeletonProps, type ImagePreviewItem, type ImagePreviewLabels, type ImageProps, type ImageSkeletonProps, Input, InputNumber, type Labels, LabelsProvider, type LabelsProviderProps, type MentionOption, Mentions, type MentionsProps, MentionsSkeleton, type MentionsSkeletonProps, Menu, type MenuItem, type MenuProps, type MenuSection, type MenuSize, MenuSkeleton, type MenuSkeletonProps, type MenuTone, Modal, type ModalConfirmProps, type ModalSkeletonProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type NumberBounds, type NumberInputProps, type PageRange, Pagination, type PaginationProps, type PaletteCommand, type PersistentMenuItem, Popconfirm, type PopconfirmProps, PopconfirmSkeleton, type PopconfirmSkeletonProps, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, type RankedCommand, Rate, type RateProps, type Rejection, Reveal, type RevealProps, type SeenStore, Select, type SelectOption, type SelectProps, type Side, Sidebar, type SidebarProps, Slider, type SliderOrientation, type SliderProps, type SliderRangeValue, SliderSkeleton, type SliderSkeletonProps, type SortDirection, type SortState, Splitter, type SplitterHandleSize, type SplitterOrientation, type SplitterProps, SplitterSkeleton, type SplitterSkeletonProps, type SpringPreset, Stagger, type StaggerProps, type StepTarget, Switch, type SwitchProps, type TabItem, Table, Tabs, type TabsProps, Tag, type TagProps, type TextInputProps, Textarea, type TextareaProps, type ThemeChoice, ThemeProvider, type TimeInputProps, TimePicker, type TimeValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tour, type TourAction, type TourProps, type TourState, type TourStatus, type TourStep, Transfer, type TransferItem, type TransferProps, TransferSkeleton, type TransferSkeletonProps, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, TreeSelectSkeleton, type TreeSelectSkeletonProps, type TreeSize, TreeSkeleton, type TreeSkeletonProps, type TreeTone, Upload, type UploadProps, Watermark, type WatermarkContent, type WatermarkDensity, type WatermarkDirection, type WatermarkProps, WatermarkSkeleton, type WatermarkSkeletonProps, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };