@sovereignfs/ui 0.41.0 → 0.45.0

package/dist/index.d.ts

@@ -1,12 +1,21 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, SelectHTMLAttributes, ReactElement, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, PointerEvent, MouseEvent, KeyboardEvent } from 'react';
+import { ReactNode, ButtonHTMLAttributes, SelectHTMLAttributes, ReactElement, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, LabelHTMLAttributes, ElementType, PointerEvent, KeyboardEvent, MouseEvent } from 'react';
 
 type BadgeVariant = 'role' | 'status' | 'mono';
+type BadgeSize = 'sm' | 'md' | 'lg';
 type BadgeStatus = 'active' | 'enabled' | 'deactivated' | 'failed' | 'invited' | 'pending' | 'neutral';
 interface BadgeProps {
     variant?: BadgeVariant;
+    /** 'sm' | 'md' (default) | 'lg'. 'md' is the badge's original — and until
+     * now, only — size, so the default renders unchanged. */
+    size?: BadgeSize;
     /** Only relevant when variant="status" — determines the dot colour. */
     status?: BadgeStatus;
+    /** Forces ALL CAPS display regardless of the case `children` is passed
+     * in. Defaults to `true` — every existing badge in the app relies on
+     * this. Set `false` for a title-case badge that renders exactly the text
+     * passed in (e.g. "Owner" instead of "OWNER"). */
+    uppercase?: boolean;
     children: ReactNode;
 }
 /**
@@ -15,10 +24,13 @@ interface BadgeProps {
  * - `role`   neutral surface + border, semibold — for Owner / Admin / User
  * - `status` tinted chip with leading colour dot — for Active / Deactivated / etc.
  * - `mono`   monospace font, neutral surface — for platform / community / v0.1.0
+ *
+ * Three sizes (`sm`/`md`/`lg`, default `md`). ALL CAPS by default
+ * (`uppercase`) — set `uppercase={false}` for a title-case badge instead.
  */
-declare function Badge({ variant, status, children }: BadgeProps): react.JSX.Element;
+declare function Badge({ variant, size, status, uppercase, children, }: BadgeProps): react.JSX.Element;
 
-type IconName = 'house' | 'settings' | 'log-out' | 'chevron-right' | 'chevron-left' | 'chevron-down' | 'chevron-up' | 'x' | 'check' | 'plus' | 'trash-2' | 'pencil' | 'rotate-ccw' | 'search' | 'user' | 'shield' | 'lock' | 'eye' | 'eye-off' | 'mail' | 'bell' | 'activity' | 'package' | 'grid-2x2' | 'info' | 'alert-triangle' | 'calendar' | 'sliders-horizontal' | 'ellipsis-vertical' | 'file' | 'upload' | 'external-link' | 'banana' | 'apple' | 'carrot' | 'egg' | 'beef' | 'fish' | 'coffee' | 'wine' | 'beer' | 'cookie' | 'pizza' | 'candy' | 'salad' | 'milk' | 'drumstick' | 'croissant' | 'cup-soda' | 'spray-can' | 'snowflake' | 'shopping-basket';
+type IconName = 'house' | 'settings' | 'log-out' | 'chevron-right' | 'chevron-left' | 'chevron-down' | 'chevron-up' | 'x' | 'check' | 'plus' | 'trash-2' | 'pencil' | 'rotate-ccw' | 'search' | 'user' | 'shield' | 'lock' | 'eye' | 'eye-off' | 'mail' | 'bell' | 'activity' | 'package' | 'grid-2x2' | 'info' | 'alert-triangle' | 'circle-check' | 'circle-x' | 'calendar' | 'sliders-horizontal' | 'ellipsis-vertical' | 'file' | 'upload' | 'external-link' | 'banana' | 'apple' | 'carrot' | 'egg' | 'beef' | 'fish' | 'coffee' | 'wine' | 'beer' | 'cookie' | 'pizza' | 'candy' | 'salad' | 'milk' | 'drumstick' | 'croissant' | 'cup-soda' | 'spray-can' | 'snowflake' | 'shopping-basket';
 
 /** Decorative icon — visually meaningful but described by surrounding text. */
 type DecorativeProps = {
@@ -194,7 +206,7 @@ interface PopoverProps {
 declare function Popover({ trigger, open, onClose, align, width, panelStyle, 'aria-label': ariaLabel, children, }: PopoverProps): react.JSX.Element;
 
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
-type ButtonSize = 'sm' | 'md';
+type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -569,6 +581,17 @@ interface MenuProps {
  * Selecting an item both closes the menu and calls its `onSelect` — a
  * consumer's `onSelect` never needs to call `onClose` itself.
  */
+/**
+ * MenuEntries — the `<ul role="menu">` item list itself, factored out of
+ * `Menu` so other adaptive-surface components (e.g. `ContextMenu`) can
+ * render the exact same items/destructive/checked/icon markup inside their
+ * own positioning shell, instead of re-deriving it and risking drift.
+ */
+declare function MenuEntries({ items, onSelect, }: {
+    items: MenuEntry[];
+    /** Called after an item's own onSelect — typically the surface's onClose. */
+    onSelect: (entry: MenuItem) => void;
+}): react.JSX.Element;
 declare function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, align }: MenuProps): react.JSX.Element;
 
 interface ToastItem {
@@ -689,6 +712,595 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'typ
 }
 declare function Checkbox({ checked, onChange, label, strikeThrough, disabled, className, id, ...rest }: CheckboxProps): react.JSX.Element;
 
+interface RadioGroupItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    items: RadioGroupItem[];
+    value: string;
+    onChange: (value: string) => void;
+    /** Groups the underlying native radios. Auto-generated when omitted —
+     * only pass this to participate in a native, non-React form submission. */
+    name?: string;
+    /** Disables every item. Use `items[].disabled` to disable one. */
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    required?: boolean;
+}
+/**
+ * RadioGroup — single-select list of options.
+ *
+ * Renders real `<input type="radio">` elements sharing one `name`, visually
+ * hidden behind a custom circle (same technique as `Checkbox`). Keyboard
+ * arrow-key navigation between options is native browser behavior for
+ * grouped radio inputs — nothing to hand-roll here.
+ */
+declare function RadioGroup({ items, value, onChange, name, disabled, id, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, required, }: RadioGroupProps): react.JSX.Element;
+
+interface SliderProps {
+    value: number;
+    onChange: (value: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+    /** Renders a visible label above the track. Omit and pass `aria-label`
+     * instead for a standalone, unlabeled slider. */
+    label?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    required?: boolean;
+}
+/**
+ * Slider — single-thumb range input.
+ *
+ * A native `<input type="range">` under custom track/thumb styling — arrow
+ * key (adjust by `step`), Home/End (jump to min/max), and touch-drag
+ * support all come from the browser, nothing hand-rolled. Dual-thumb/range
+ * selection is out of scope until a consumer needs it.
+ */
+declare function Slider({ value, onChange, min, max, step, label, disabled, id, className, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, required, }: SliderProps): react.JSX.Element;
+
+interface ProgressProps {
+    /** 0–100. Values outside that range are clamped. */
+    value: number;
+    /** Accessible name — Progress has no visible text of its own. */
+    label?: string;
+    id?: string;
+    className?: string;
+}
+/**
+ * Progress — determinate bar.
+ *
+ * `role="progressbar"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
+ * so screen readers announce the current value. Indeterminate state is out
+ * of scope until a consumer needs it.
+ */
+declare function Progress({ value, label, id, className }: ProgressProps): react.JSX.Element;
+
+interface TableProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Table — thin, styled wrappers around the native table elements.
+ *
+ * Not a data grid: no sort, filter, or virtualization. `Table` wraps its
+ * content in a horizontally-scrolling container (masked-edge fade, hidden
+ * scrollbar — same technique as `NavTabs`) so a table wider than its
+ * container scrolls instead of overflowing the page, at any viewport size.
+ */
+declare function Table({ children, className }: TableProps): react.JSX.Element;
+declare function TableHead({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function TableBody({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function TableRow({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function TableHeaderCell({ children, ...rest }: ThHTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
+declare function TableCell({ children, ...rest }: TdHTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+interface AlertProps {
+    variant: AlertVariant;
+    heading?: string;
+    /** Leading icon next to the heading. Defaults to a per-variant icon (see
+     * `DEFAULT_ICON`) — pass an `IconName` to override it, or `false` to
+     * suppress the icon entirely. Purely decorative: the variant's colour and
+     * `heading`/`children` text already carry the meaning. */
+    icon?: IconName | false;
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+/**
+ * Alert — inline, non-dismissible banner.
+ *
+ * Distinct from `Toast` (transient, auto-dismissing) and `SystemBanner`
+ * (instance-wide): Alert is for in-context messaging — form-level errors,
+ * or explaining an empty/blocked state.
+ *
+ * `role="alert"` for `error` (interrupts screen readers immediately, since
+ * an error demands attention); `role="status"` for the other variants
+ * (announced politely, without interrupting).
+ */
+declare function Alert({ variant, heading, icon, children, id, className }: AlertProps): react.JSX.Element;
+
+interface BreadcrumbItem {
+    label: string;
+    /** Omit for the current page — rendered as plain text with aria-current. */
+    href?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    /** Renders a linked item. Defaults to a plain `<a href>`, which causes a
+     * full page reload — pass Next's `<Link>` (or equivalent) to keep
+     * navigation client-side, which matters inside overlay-shell plugins
+     * where a full reload breaks the router.back()-driven dismiss flow. */
+    renderLink?: (item: BreadcrumbItem, children: ReactNode) => ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+declare function Breadcrumb({ items, renderLink, className, 'aria-label': ariaLabel, }: BreadcrumbProps): react.JSX.Element;
+
+interface PaginationProps {
+    /** 1-indexed current page. */
+    page: number;
+    totalPages: number;
+    onChange: (page: number) => void;
+    className?: string;
+    'aria-label'?: string;
+}
+declare function Pagination({ page, totalPages, onChange, className, 'aria-label': ariaLabel, }: PaginationProps): react.JSX.Element;
+
+interface KbdProps {
+    children: ReactNode;
+    className?: string;
+}
+/** Kbd — inline keyboard-key styling. Renders a real `<kbd>` element. */
+declare function Kbd({ children, className }: KbdProps): react.JSX.Element;
+
+interface CollapsibleProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: ReactNode;
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+/**
+ * Collapsible — single expand/collapse primitive. Independently useful
+ * (e.g. a "show more" toggle), and composed internally by `Accordion`.
+ *
+ * The expand/collapse animation uses `grid-template-rows: 0fr` → `1fr`
+ * rather than animating `height`, which can't transition to/from `auto`
+ * in CSS without JS-measuring pixel heights. Collapsed content stays in
+ * the DOM (so no layout jump on re-open) but is marked `inert` — removed
+ * from the tab order and the accessibility tree — so it isn't reachable
+ * while hidden.
+ */
+declare function Collapsible({ open, onOpenChange, trigger, children, id, className, }: CollapsibleProps): react.JSX.Element;
+
+interface AccordionItem {
+    id: string;
+    trigger: ReactNode;
+    content: ReactNode;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    /** `single` closes other sections when one opens. `multiple` allows any
+     * number of sections open at once. */
+    type: 'single' | 'multiple';
+    openIds: string[];
+    onOpenIdsChange: (openIds: string[]) => void;
+    className?: string;
+}
+/**
+ * Accordion — one or more `Collapsible` sections.
+ *
+ * Keyboard support (Enter/Space toggles the focused trigger) comes from
+ * `Collapsible`'s real `<button>` — no arrow-key roving-tabindex handling
+ * here, since accordion sections aren't a roving-tabindex widget per the
+ * WAI-ARIA accordion pattern (each trigger is independently Tab-focusable).
+ */
+declare function Accordion({ items, type, openIds, onOpenIdsChange, className }: AccordionProps): react.JSX.Element;
+
+interface AspectRatioProps {
+    /** Width / height, e.g. 16 / 9 or 1. */
+    ratio: number;
+    children: ReactNode;
+    className?: string;
+}
+/** AspectRatio — constrains content (image, video, embed) to a fixed ratio. */
+declare function AspectRatio({ ratio, children, className }: AspectRatioProps): react.JSX.Element;
+
+interface ButtonGroupProps {
+    /** Adjacent Button elements. */
+    children: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * ButtonGroup — visually joins adjacent `Button`s into one control (shared
+ * border, connected corners). Targets its children's rendered `<button>`/
+ * `<a>` elements directly rather than requiring a special child component,
+ * so it works with plain `Button`.
+ */
+declare function ButtonGroup({ children, className, 'aria-label': ariaLabel }: ButtonGroupProps): react.JSX.Element;
+
+interface ItemProps {
+    leading?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    trailing?: ReactNode;
+    /** Renders as a button when given; a plain row otherwise. */
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Item — generic row primitive: leading slot, title + optional description,
+ * trailing slot. The building block for settings rows, list rows, and
+ * menu-adjacent rows that don't fit `Menu`'s own item shape.
+ */
+declare function Item({ leading, title, description, trailing, onClick, disabled, className, }: ItemProps): react.JSX.Element;
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+}
+/**
+ * Label — standalone accessible form label, independent of `FormField`.
+ * Use `FormField` when a control needs hint/error text too; use `Label`
+ * directly for a bare label (e.g. next to a `Checkbox` group heading).
+ */
+declare function Label({ disabled, className, children, ...rest }: LabelProps): react.JSX.Element;
+
+interface ScrollAreaProps {
+    children: ReactNode;
+    /** Constrains the scrollable direction; content taller/wider than this scrolls. */
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+}
+/**
+ * ScrollArea — a styled scrollable container (thin, token-colored scrollbar
+ * instead of the OS default). Native overflow scrolling underneath — no
+ * virtualization, no custom scroll physics.
+ */
+declare function ScrollArea({ children, maxHeight, maxWidth, className }: ScrollAreaProps): react.JSX.Element;
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'caption' | 'label';
+interface TypographyProps {
+    variant: TypographyVariant;
+    children: ReactNode;
+    /** Override the rendered tag while keeping the variant's visual style —
+     * e.g. `variant="h1" as="div"` to avoid a second `<h1>` on a page that
+     * already has one. */
+    as?: ElementType;
+    className?: string;
+}
+/** Typography — text bound to the design system's font-size/weight scale. */
+declare function Typography({ variant, children, as, className }: TypographyProps): react.JSX.Element;
+
+interface MarkerProps {
+    /** The number shown in the marker, e.g. 1, 2, 3. */
+    index: number;
+    /** Accessible label describing the citation, e.g. "Source: Notes". */
+    label: string;
+    /** Reveals source details (e.g. opens a source trace panel) when given. */
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * Marker — inline citation/reference marker, for attributing part of an
+ * assistant's answer to a source (matches RFC 0040's "source trace" —
+ * Harness shows which plugin/data source informed an answer).
+ */
+declare function Marker({ index, label, onClick, className }: MarkerProps): react.JSX.Element;
+
+type MessageSender = 'user' | 'assistant' | 'tool';
+interface MessageProps {
+    /** Matches the three roles Sovereign Harness stores per RFC 0040:
+     * user, assistant, and tool messages. Named `sender`, not `role`, to
+     * avoid colliding with the ARIA `role` attribute in JSX tooling. */
+    sender: MessageSender;
+    children?: ReactNode;
+    /** Shows a "thinking" indicator instead of children — before the first
+     * token of a streaming response arrives. Once content starts streaming
+     * in, pass it as children and stop passing `pending`. */
+    pending?: boolean;
+    /** Rendered in a small row below the bubble — e.g. "Forget this" (RFC
+     * 0040's per-message memory action), "Copy", "Regenerate". */
+    actions?: ReactNode;
+    className?: string;
+}
+/** Message — a single chat turn. Content is caller-controlled `ReactNode`
+ * (markdown rendering, if any, is the consumer's choice, not baked in here). */
+declare function Message({ sender, children, pending, actions, className }: MessageProps): react.JSX.Element;
+
+interface MessageScrollerProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * MessageScroller — auto-scrolling chat container.
+ *
+ * Scrolls to the newest message automatically, but only while the user is
+ * already near the bottom. If they've scrolled up to read history, new
+ * content does not yank them back down — a "New messages" button appears
+ * instead, matching the pattern every chat product (Slack, Discord,
+ * ChatGPT) already uses.
+ */
+declare function MessageScroller({ children, className }: MessageScrollerProps): react.JSX.Element;
+
+interface HoverCardProps {
+    /** The element that opens the card — cloned with hover/focus handlers
+     * (desktop) or a tap handler (touch). */
+    trigger: ReactElement;
+    children: ReactNode;
+    align?: 'left' | 'right';
+    width?: number | 'trigger';
+    'aria-label': string;
+}
+/**
+ * HoverCard — hover-triggered popover on desktop, tap-to-toggle on touch.
+ *
+ * Built on `Popover` rather than reimplementing positioning/collision
+ * detection: this only adds the hover-intent open/close timing (avoids
+ * flicker on an accidental mouse pass-over, and gives the pointer time to
+ * travel from the trigger to the card itself across the gap between them)
+ * and the touch fallback. Also opens on keyboard focus and closes on blur —
+ * a hover-only trigger is a WCAG failure, since keyboard users can't hover.
+ */
+declare function HoverCard({ trigger, children, align, width, 'aria-label': ariaLabel, }: HoverCardProps): react.JSX.Element;
+
+interface ContextMenuProps {
+    /** The element that gets right-click (desktop) / long-press (touch)
+     * behavior — cloned with the trigger handlers, rendered as-is otherwise.
+     * Typed with `<any>` props (not a bare `ReactElement`, whose implicit
+     * `unknown` props type makes `cloneElement` reject *both* branches of
+     * the long-press/onContextMenu union below — an interface value like
+     * `LongPressHandlers` isn't assignable to an indexed props type without
+     * its own index signature) — the standard, narrowly-scoped escape hatch
+     * for "clone an arbitrary child with props not known ahead of time". */
+    children: ReactElement<any>;
+    items: MenuEntry[];
+    'aria-label': string;
+}
+/**
+ * ContextMenu — right-click menu on desktop, long-press on touch.
+ *
+ * Desktop positioning reuses `Popover`'s existing collision-detection logic
+ * rather than reimplementing it: the panel is wrapped in a zero-size,
+ * `position: fixed` anchor placed at the click coordinates, so `Popover`
+ * measures and flips against *that* point exactly as it would a normal
+ * trigger element.
+ *
+ * Touch uses `useLongPress` (which already handles the OS's own long-press
+ * callout/context-menu suppression) and opens the same items in a `Drawer`
+ * bottom sheet — the same adaptive-surface split `Menu` already uses,
+ * because a floating panel positioned at a touch point isn't a pattern
+ * touch interfaces have in the first place.
+ */
+declare function ContextMenu({ children, items, 'aria-label': ariaLabel }: ContextMenuProps): react.JSX.Element;
+
+interface NavigationMenuItem {
+    label: string;
+    /** A plain link with no flyout — mutually exclusive with `content`. */
+    href?: string;
+    /** Flyout panel content shown when this item is triggered. Pass a
+     * function instead of a plain node when the content needs to close its
+     * own flyout after an action (e.g. `Menubar`'s menu items) — it receives
+     * a `close` callback. */
+    content?: ReactNode | ((close: () => void) => ReactNode);
+}
+interface NavigationMenuProps {
+    items: NavigationMenuItem[];
+    /** Renders a plain-link item's anchor. Defaults to `<a href>`, which
+     * causes a full page reload — pass Next's `<Link>` (or equivalent) to
+     * keep navigation client-side. */
+    renderLink?: (href: string, children: ReactNode) => ReactNode;
+    'aria-label'?: string;
+}
+/**
+ * NavigationMenu — top-level nav bar where some items open a flyout panel.
+ *
+ * Desktop-oriented by design — a hover-triggered flyout bar has no mobile
+ * equivalent (Research 0004); it renders as-is on touch rather than
+ * attempting a redesign no consumer has asked for yet.
+ *
+ * Each flyout is its own `Popover` instance rather than one shared
+ * positioned panel, reusing its collision detection per item. Once one
+ * flyout is open, moving the pointer to a sibling trigger switches directly
+ * to that one — standard menu-bar behavior — and ArrowLeft/ArrowRight move
+ * focus between top-level triggers (a roving-tabindex bar, per the
+ * WAI-ARIA menu pattern), Escape closes.
+ */
+declare function NavigationMenu({ items, renderLink, 'aria-label': ariaLabel, }: NavigationMenuProps): react.JSX.Element;
+
+interface MenubarMenu {
+    label: string;
+    items: MenuEntry[];
+}
+interface MenubarProps {
+    menus: MenubarMenu[];
+    'aria-label'?: string;
+}
+/**
+ * Menubar — desktop app-style menu bar (File / Edit / View...). A thin
+ * composition of `NavigationMenu` (top-level triggers, per-item flyout
+ * positioning, hover-switches-when-one-is-open, arrow-key navigation) with
+ * `MenuEntries` (the same item list markup `Menu`'s dropdowns use) as each
+ * item's flyout content — no positioning or list-rendering logic
+ * duplicated from either.
+ */
+declare function Menubar({ menus, 'aria-label': ariaLabel }: MenubarProps): react.JSX.Element;
+
+interface CommandItem {
+    id: string;
+    label: string;
+    onSelect: () => void;
+    icon?: IconName;
+    /** Section header this item is grouped under. */
+    group?: string;
+    /** Extra searchable text beyond the label (keywords, description). */
+    keywords?: string;
+}
+interface CommandProps {
+    open: boolean;
+    onClose: () => void;
+    items: CommandItem[];
+    placeholder?: string;
+    'aria-label'?: string;
+}
+/**
+ * Command — a ⌘K-style palette. Opened via `Dialog`, which supplies the
+ * modal shell (scrim, panel, mobile full-screen sheet, focus handling) —
+ * this only adds the search input, filtering, and arrow-key/Enter
+ * selection on top of it. Controlled (`open`/`onClose`): the consumer wires
+ * up their own global shortcut listener to flip `open` — a DS primitive
+ * shouldn't own a document-level keydown listener itself.
+ */
+declare function Command({ open, onClose, items, placeholder, 'aria-label': ariaLabel, }: CommandProps): react.JSX.Element;
+
+type ResizableDirection = 'horizontal' | 'vertical';
+interface ResizablePanelProps {
+    /** Initial size as a percentage of the group's main axis. Defaults to an
+     * equal split across all panels in the group. */
+    defaultSize?: number;
+    /** Minimum size as a percentage. Defaults to 10. */
+    minSize?: number;
+    /** Maximum size as a percentage. Defaults to 90. */
+    maxSize?: number;
+    children?: ReactNode;
+    className?: string;
+    /** Injected by ResizablePanelGroup — not part of the public API. */
+    style?: CSSProperties;
+}
+/** One pane of a ResizablePanelGroup. Sizing is computed and injected by the
+ * group (via defaultSize/minSize/maxSize read off this element's props) —
+ * this component only renders the scrollable content box. */
+declare function ResizablePanel({ children, className, style }: ResizablePanelProps): react.JSX.Element;
+interface ResizableHandleProps {
+    'aria-label'?: string;
+    /** Injected by ResizablePanelGroup — not part of the public API. */
+    direction?: ResizableDirection;
+    onPointerDown?: (e: PointerEvent<HTMLDivElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+    'aria-valuenow'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuemax'?: number;
+}
+/** The draggable divider between two ResizablePanels. Placed directly
+ * between the two ResizablePanel elements it resizes — the group pairs each
+ * handle with its preceding and following panel by position.
+ *
+ * A `div` with `role="separator"` and `tabIndex=0` (the WAI-ARIA "window
+ * splitter" pattern), not a `<button>` — `separator` is a non-interactive
+ * role, and a native button's implicit role can't be overridden to it. */
+declare function ResizableHandle({ 'aria-label': ariaLabel, direction, onPointerDown, onKeyDown, 'aria-valuenow': valueNow, 'aria-valuemin': valueMin, 'aria-valuemax': valueMax, }: ResizableHandleProps): react.JSX.Element;
+interface ResizablePanelGroupProps {
+    direction: ResizableDirection;
+    /** Alternating ResizablePanel / ResizableHandle elements — N panels
+     * separated by N-1 handles. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * ResizablePanelGroup — a row or column of resizable panes (editor layouts,
+ * multi-pane inspectors). Each handle resizes only its two immediate
+ * neighbor panels (drag redistributes size between them, clamped to both
+ * panels' own min/max, so their combined size is a fixed invariant for the
+ * duration of one drag) — the same handle-local model most resizable-panel
+ * implementations use, rather than redistributing across the whole group.
+ *
+ * Desktop-oriented, like NavigationMenu — a drag handle has no direct touch
+ * equivalent; panels render at their default sizes on touch rather than
+ * attempting a redesign no consumer has asked for yet. For a two-pane
+ * layout that also needs a mobile single-column fallback, use SplitPane
+ * instead.
+ *
+ * `direction="vertical"` needs a definite-height ancestor — percentage
+ * flex-basis on a column's children only resolves against one.
+ */
+declare function ResizablePanelGroup({ direction, children, className }: ResizablePanelGroupProps): react.JSX.Element;
+
+type SortDirection = 'asc' | 'desc';
+interface DataTableColumn<T> {
+    key: string;
+    header: string;
+    sortable?: boolean;
+    /** Cell content. Defaults to String(row[key]) when omitted. */
+    render?: (row: T) => ReactNode;
+    /** Value compared when sorting by this column. Defaults to row[key].
+     * Required if `key` isn't a property on T (a computed/joined column). */
+    sortValue?: (row: T) => string | number;
+    align?: 'start' | 'end';
+}
+interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    getRowKey: (row: T) => string;
+    /** Initial sort — uncontrolled after mount, like Table itself has no
+     * externally-controlled state. */
+    defaultSortKey?: string;
+    defaultSortDirection?: SortDirection;
+    emptyMessage?: string;
+    className?: string;
+}
+/**
+ * DataTable — sortable table built on Table's own primitives (no
+ * virtualization or filtering — those stay out of scope, matching Table's
+ * own "not a data grid" boundary). Column-driven: pass `columns` + `data`
+ * rather than composing `<TableRow>`/`<TableCell>` by hand.
+ *
+ * Sort state is internal (uncontrolled) and click-cycles
+ * ascending → descending → unsorted for a sortable column, mirroring the
+ * "toggle → toggle → clear" pattern most sortable tables use rather than
+ * being permanently stuck in whichever direction was clicked last.
+ */
+declare function DataTable<T>({ columns, data, getRowKey, defaultSortKey, defaultSortDirection, emptyMessage, className, }: DataTableProps<T>): react.JSX.Element;
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    value: string | null;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    'aria-label': string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Combobox — a searchable single-select: `Popover` on desktop, a bottom-sheet
+ * `Drawer` on mobile (the platform's standard adaptive-surface pattern,
+ * matching `Menu` and `DatePicker`). For a fixed, short option list where
+ * search adds no value, use `Select`'s native `<select>` instead — this is
+ * for option lists long enough that typing to filter beats scanning.
+ *
+ * The trigger is built in, like `DatePicker` — a combobox is a form field,
+ * not an arbitrary action-menu trigger.
+ */
+declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, 'aria-label': ariaLabel, disabled, className, }: ComboboxProps): react.JSX.Element;
+
 interface DragHandleRowProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /** Pass drag-listener and drag-control props from dnd-kit here. */
@@ -1127,4 +1739,4 @@ interface CommitOnEnterOrBlurHandlers {
  */
 declare function useCommitOnEnterOrBlur(onCommit: () => void): CommitOnEnterOrBlurHandlers;
 
-export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, BalanceChip, type BalanceChipProps, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, CheckableListRow, type CheckableListRowProps, Checkbox, type CheckboxProps, CodeTextarea, type CodeTextareaProps, type CommitOnEnterOrBlurHandlers, ConfirmDialog, type ConfirmDialogProps, CurrencyInput, type CurrencyInputProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneProps, FormField, type FormFieldProps, type FormFieldRenderProps, Icon, type IconName, IconPicker, type IconPickerProps, type IconProps, Input, type InputProps, type LongPressHandlers, MOBILE_BREAKPOINT_PX, MemberMultiSelect, type MemberMultiSelectOption, type MemberMultiSelectProps, Menu, type MenuEntry, type MenuItem, type MenuLabel, type MenuProps, type MenuSeparator, type NavTabItem, NavTabs, type NavTabsProps, OverlayHeader, type OverlayHeaderProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, QuantityStepper, type QuantityStepperProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Sheet, type SheetProps, Spinner, type SpinnerProps, type SplitMethod, SplitMethodSelector, type SplitMethodSelectorProps, SplitPane, type SplitPaneProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, SuggestionInput, type SuggestionInputProps, type SuggestionOption, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseLongPressOptions, useCommitOnEnterOrBlur, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, BalanceChip, type BalanceChipProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, CheckableListRow, type CheckableListRowProps, Checkbox, type CheckboxProps, CodeTextarea, type CodeTextareaProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandItem, type CommandProps, type CommitOnEnterOrBlurHandlers, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuProps, CurrencyInput, type CurrencyInputProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneProps, FormField, type FormFieldProps, type FormFieldRenderProps, HoverCard, type HoverCardProps, Icon, type IconName, IconPicker, type IconPickerProps, type IconProps, Input, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Label, type LabelProps, type LongPressHandlers, MOBILE_BREAKPOINT_PX, Marker, type MarkerProps, MemberMultiSelect, type MemberMultiSelectOption, type MemberMultiSelectProps, Menu, MenuEntries, type MenuEntry, type MenuItem, type MenuLabel, type MenuProps, type MenuSeparator, Menubar, type MenubarMenu, type MenubarProps, Message, type MessageProps, MessageScroller, type MessageScrollerProps, type MessageSender, type NavTabItem, NavTabs, type NavTabsProps, NavigationMenu, type NavigationMenuItem, type NavigationMenuProps, OverlayHeader, type OverlayHeaderProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, QuantityStepper, type QuantityStepperProps, RadioGroup, type RadioGroupItem, type RadioGroupProps, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, ScrollArea, type ScrollAreaProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Sheet, type SheetProps, Slider, type SliderProps, type SortDirection, Spinner, type SpinnerProps, type SplitMethod, SplitMethodSelector, type SplitMethodSelectorProps, SplitPane, type SplitPaneProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, SuggestionInput, type SuggestionInputProps, type SuggestionOption, SystemBanner, type SystemBannerProps, type TabItem, Table, TableBody, TableCell, TableHead, TableHeaderCell, type TableProps, TableRow, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, type UseLongPressOptions, useCommitOnEnterOrBlur, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };