@platned/ui 0.6.0 → 0.7.0

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, ReactElement, RefObject, AnchorHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, Key } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, RefObject, ReactElement, Ref, AnchorHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, Component, ErrorInfo } from 'react';
 import { ClassValue } from 'clsx';
+import { Column, Table as Table$1, ColumnDef, RowData, SortingState, ColumnFiltersState, PaginationState, VisibilityState, RowSelectionState, TableOptions } from '@tanstack/react-table';
+export { CellContext, ColumnDef, ColumnFiltersState, Column as DataTableColumn, Table as DataTableInstance, HeaderContext, PaginationState, Row, RowSelectionState, SortingState, VisibilityState, createColumnHelper } from '@tanstack/react-table';
 
 type ButtonVariant = 'primary' | 'neutral' | 'subtle' | 'danger' | 'danger-subtle';
 type ButtonSize = 'lg' | 'md' | 'sm';
@@ -15,8 +17,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     asChild?: boolean;
     /**
-     * Swaps the leading icon for a spinner and disables the button. `aria-busy` is set so
-     * assistive tech reports the pending state rather than only the disabled one.
+     * Swaps the leading icon for a spinner and stops the button acting on a press.
+     * `aria-busy` is set so assistive tech reports the pending state.
+     *
+     * From 0.7.0 this uses `aria-disabled`, not the native `disabled` attribute. A natively
+     * disabled button loses focus, so pressing "Save" dropped keyboard focus to <body> the
+     * moment the request started. Now focus stays on the button and moves on normally when it
+     * finishes.
      */
     loading?: boolean;
     /** Announced while `loading`. Defaults to the button's own content. */
@@ -227,7 +234,7 @@ interface FieldSetProps extends HTMLAttributes<HTMLFieldSetElement> {
  * A real `<fieldset>`. Required for radio groups and checkbox groups: the group needs a
  * name of its own, and only `<legend>` gives it one that is announced before each option.
  */
-declare function FieldSet({ children, className, ...rest }: FieldSetProps): react.JSX.Element;
+declare const FieldSet: react.ForwardRefExoticComponent<FieldSetProps & react.RefAttributes<HTMLFieldSetElement>>;
 interface FieldLegendProps extends HTMLAttributes<HTMLLegendElement> {
     children: ReactNode;
     /** `label` matches a field label's weight; `legend` is the larger section heading. */
@@ -283,9 +290,9 @@ interface SelectControlProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     defaultValue?: string | null;
     onValueChange?: (value: string) => void;
     /**
-     * Submits with a surrounding form, through a hidden input. Note that hidden inputs are
-     * exempt from constraint validation, so `required` no longer blocks submit — see the
-     * note on `Select`.
+     * Submits with a surrounding form. With `required`, the value posts through a visually
+     * hidden real input, so an empty required select blocks submit like a native one (from
+     * 0.7.0) — see the note on `Select`.
      */
     name?: string;
     size?: InputSize;
@@ -318,11 +325,15 @@ interface SelectProps extends SelectControlProps {
  * Two consequences of dropping the native element, neither papered over:
  *
  *  - **No OS picker on mobile.** The wheel/sheet a native select opens is gone.
- *  - **`required` no longer blocks submit.** The value posts through a hidden input, and
- *    hidden inputs are exempt from constraint validation. `required` remains semantic and
- *    visual — `aria-required` on the control and the `*` on its label — which is already
- *    true of `Combobox`, `RadioGroup` and `MultiSelectCard`. In react-hook-form, register
- *    it with `Controller` rather than `register`.
+ *  - **`required` blocks submit again from 0.7.0**, for a select with a `name`. 0.5 and 0.6
+ *    posted through a hidden input, which constraint validation ignores. A required select
+ *    now posts through an invisible real input that the browser validates. In
+ *    react-hook-form, register it with `Controller` rather than `register`.
+ *
+ * Kept as our own component rather than Radix Select in 0.7.0, deliberately. Radix Select is
+ * modal (it locks page scroll and hides the page while open), which is wrong for a form field,
+ * and it needs pointer-capture polyfills to run in jsdom, so adopting it would have broken
+ * every consumer's test suite.
  *
  * For a list long enough to need filtering, use `Combobox`.
  */
@@ -340,7 +351,7 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 's
  * A native `<input type="date">`.
  *
  * The `::-webkit-calendar-picker-indicator` styling below is Chromium-only — on Firefox
- * and Safari the native affordance differs, so the drawn `LuCalendar` sits alongside
+ * and Safari the native affordance differs, so the drawn `CalendarIcon` sits alongside
  * whatever the platform renders rather than replacing it. That is a known limitation of
  * this component, not a bug to paper over: for a real month grid, range selection, locale
  * control or min/max navigation, use `Calendar` and `DateField` instead.
@@ -394,6 +405,14 @@ interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onC
     description?: ReactNode;
     /** Track size. `sm` is 36×20, `md` is 44×24. */
     size?: SwitchSize;
+    /**
+     * Submits with a surrounding form, as `name=value` while on. New in 0.7.0: through 0.6 a
+     * Switch posted nothing, so it could not take part in a plain form.
+     */
+    name?: string;
+    /** The value posted while on. Default `"on"`, as for a native checkbox. */
+    value?: string;
+    required?: boolean;
 }
 /**
  * An on/off switch — a setting that takes effect immediately, with no save step.
@@ -519,8 +538,81 @@ interface FileDropZoneProps {
     onFileSelected?: (file: File) => void;
     disabled?: boolean;
 }
+/** Human-readable byte count: "820 KB", "1.4 MB". New in 0.7.0, from SCIC. */
+declare function formatFileSize(bytes: number): string;
+interface UseFilePickerOptions {
+    accept?: string;
+    maxSizeBytes?: number;
+    onFileSelected?: (file: File) => void;
+}
+interface UseFilePicker {
+    /** Spread onto a hidden `<input type="file">`, which must be rendered. */
+    inputProps: InputHTMLAttributes<HTMLInputElement> & {
+        ref: RefObject<HTMLInputElement>;
+    };
+    /** Opens the native picker. */
+    open: () => void;
+    /** Runs the same accept and size checks on dropped files. */
+    handleFiles: (files: FileList | null) => void;
+    /** Validation message for the last rejected file, if any. */
+    error: string | null;
+}
+/**
+ * The accept-list and size validation behind every way into a file upload: the drop zone, and
+ * any "Replace" button that skips it. One implementation, so the checks cannot drift apart.
+ * New in 0.7.0, from SCIC.
+ */
+declare function useFilePicker({ accept, maxSizeBytes, onFileSelected, }?: UseFilePickerOptions): UseFilePicker;
 declare function FileDropZone({ className, description, accept, maxSizeBytes, onFileSelected, disabled, }: FileDropZoneProps): react.JSX.Element;
 
+type TagInputParseResult = {
+    value: string;
+} | {
+    error: string;
+};
+interface TagInputProps {
+    label?: string;
+    hint?: string;
+    /** An error from outside (e.g. the server). Takes precedence over a parse error. */
+    error?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    /** The committed chips, controlled. */
+    value?: string[];
+    /** The initial chips, uncontrolled. Default none. */
+    defaultValue?: string[];
+    /** Receives the whole next array when a chip is added or removed. */
+    onValueChange?: (value: string[]) => void;
+    /** Posts each chip with a surrounding form, as repeated fields of this name. */
+    name?: string;
+    /** Validates and normalises each token, e.g. lower-case an email or reject a bad one. */
+    parse?: (raw: string) => TagInputParseResult;
+    /** What separates tokens when typed or pasted. Default whitespace. A `g` or `y` flag is safe. */
+    delimiter?: RegExp;
+    maxTags?: number;
+    /** Told whenever rejected text is sitting in the field, so a form can block saving. */
+    onInvalidChange?: (invalid: boolean) => void;
+    id?: string;
+    className?: string;
+}
+/**
+ * A multi-value text field: type or paste values, and each becomes a removable chip. Emails,
+ * domains, tags. New in 0.7.0, from SCIC (whose `onChange` is `onValueChange` here, matching
+ * every other DS control).
+ *
+ * Controlled with `value`, or uncontrolled with `defaultValue`. With `name` it posts each chip
+ * with a form, and `required` then blocks submit while there are none.
+ *
+ * Enter, the delimiter, blur and a delimited paste all commit. Backspace in an empty field removes
+ * the last chip. Duplicates are ignored. A token `parse` rejects stays in the field with its error
+ * rather than being dropped, so nothing the user typed silently disappears.
+ *
+ * Wired through `Field` like the other text fields: the label names the input, and the error or
+ * hint describes it.
+ */
+declare function TagInput({ label, hint, error, required, disabled, id, className, ...rest }: TagInputProps): react.JSX.Element;
+
 declare function FormCard({ children, className, }: {
     children: ReactNode;
     className?: string;
@@ -535,10 +627,14 @@ interface FormCardFooterProps {
     onBack?: () => void;
     onContinue?: () => void;
     continueLabel?: string;
+    /** The continue button's trailing glyph. Default an arrow; `null` for none (e.g. "Submit"). */
+    continueIcon?: ReactNode | null;
     backDisabled?: boolean;
     continueDisabled?: boolean;
+    /** Disable "Save as draft" while keeping it visible, e.g. while a draft save is in flight. */
+    saveDraftDisabled?: boolean;
 }
-declare function FormCardFooter({ onSaveDraft, onBack, onContinue, continueLabel, backDisabled, continueDisabled, }: FormCardFooterProps): react.JSX.Element;
+declare function FormCardFooter({ onSaveDraft, onBack, onContinue, continueLabel, continueIcon, backDisabled, continueDisabled, saveDraftDisabled, }: FormCardFooterProps): react.JSX.Element;
 
 type BadgeColor = 'gray' | 'red' | 'yellow' | 'lime' | 'green' | 'teal' | 'blue' | 'pink' | 'slate';
 type BadgeSize = 'sm' | 'lg';
@@ -680,6 +776,8 @@ declare function countryOptions(codes?: readonly string[], locale?: string): Com
  *
  * A thin layer over `Combobox` — same keyboard contract, same panel — that adds the list and
  * lets the query match the code as well as the name, so typing `GB` finds United Kingdom.
+ * A value outside `countries` is still listed, so a saved country never renders as an empty
+ * field.
  */
 declare function CountrySelect({ countries, locale, placeholder, emptyMessage, ...props }: CountrySelectProps): react.JSX.Element;
 
@@ -692,12 +790,17 @@ interface TimeZoneSelectProps extends Omit<ComboboxProps<string>, 'options' | 'f
      */
     at?: Date;
 }
+/** The current IANA name for a zone: `Asia/Kolkata` for `Asia/Calcutta`. */
+declare const currentZoneName: (zone: string) => string;
 /** `"+05:30"` for Asia/Colombo. Minutes east of UTC are returned alongside for sorting. */
 declare function timeZoneOffset(timeZone: string, at?: Date): {
     label: string;
     minutes: number;
 };
-/** One option per zone, labelled `(UTC+05:30) Asia/Colombo`, west to east then by name. */
+/**
+ * One option per zone, labelled `(UTC+05:30) Asia/Colombo`, west to east then by name.
+ * Renamed zones are listed under their current name, once.
+ */
 declare function timeZoneOptions(zones?: readonly string[], at?: Date): ComboboxOption<string>[];
 /**
  * Searchable IANA time-zone picker. The value is the zone name (`"Asia/Colombo"`), never an
@@ -705,6 +808,8 @@ declare function timeZoneOptions(zones?: readonly string[], at?: Date): Combobox
  *
  * Labels show the current UTC offset, and the query matches the zone name with or without
  * underscores and the offset itself, so `colombo`, `new york` and `+05:30` all find a zone.
+ * A value missing from the list — stored under another name, or outside `timeZones` — is
+ * still listed, so a saved zone never renders as an empty field.
  */
 declare function TimeZoneSelect({ timeZones, at, placeholder, emptyMessage, ...props }: TimeZoneSelectProps): react.JSX.Element;
 
@@ -768,7 +873,7 @@ interface StatusBadgeProps {
     /** Leading dot. On by default — the Figma status pills all carry one. */
     dot?: boolean;
     /**
-     * Leading glyph, replacing the dot — e.g. `<LuCheck className="size-3" />`.
+     * Leading glyph, replacing the dot — e.g. `<CheckIcon className="size-3" />`.
      * Use for states a colour alone under-states, like verified or rejected.
      */
     icon?: ReactNode;
@@ -968,6 +1073,84 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
 }
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
+/** Matches `MultiSelectCard`'s sizes, so the single- and multi-select cards line up. */
+type RadioCardsSize = 'default' | 'sm';
+interface RadioCardsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Shared `name` for the underlying radios, which also submit with a form. Generated when omitted. */
+    name?: string;
+    /** Names the group. Prefer a visible `FieldLegend` in a `FieldSet` when there is one. */
+    label?: string;
+    size?: RadioCardsSize;
+    disabled?: boolean;
+    required?: boolean;
+}
+/**
+ * Choose one of a few options shown as cards: a plan, a workspace type, an import source. The
+ * single-select sibling of `MultiSelectCard`, new in 0.7.0 (Radix Themes' `Radio Cards`).
+ *
+ * Each card is a `<label>` around a real `<input type="radio">`, for the same reason
+ * `RadioGroup` uses native radios: arrows move *and* select, only the checked card is a tab
+ * stop, and the group announces "2 of 3", with nothing reimplemented. The card's selected look
+ * is styled from the input's own `:checked` state (`peer-checked:`), so the visual and the
+ * semantics cannot disagree.
+ *
+ * The grid is the caller's: pass layout classes, e.g. `className="sm:grid-cols-3"`.
+ */
+declare const RadioCards: react.ForwardRefExoticComponent<RadioCardsProps & react.RefAttributes<HTMLDivElement>>;
+interface RadioCardsItemProps {
+    value: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Leading glyph in a tinted box, as on `MultiSelectCard`. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+declare const RadioCardsItem: react.ForwardRefExoticComponent<RadioCardsItemProps & react.RefAttributes<HTMLInputElement>>;
+
+interface CheckboxGroupProps {
+    children: ReactNode;
+    /** The group's visible name, rendered as the fieldset's `<legend>`. */
+    legend: ReactNode;
+    /** Checked values. Controlled; omit and pass `defaultValue` for uncontrolled. */
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Shared `name`, so every checked value posts with a form. Generated when omitted. */
+    name?: string;
+    size?: CheckboxSize;
+    orientation?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+    /**
+     * At least one option must be checked. While none is, every checkbox carries the native
+     * `required`, so the form will not submit and the browser points at the first one. Checking
+     * any of them lifts it from all. The legend gets
+     * the same marker as a required field label.
+     */
+    required?: boolean;
+    className?: string;
+}
+/**
+ * A named set of checkboxes sharing one value array, new in 0.7.0 (Radix Themes'
+ * `Checkbox Group`).
+ *
+ * A real `<fieldset>` and `<legend>`, which is the only markup that announces the group's name
+ * before each option. Each item is the library's native `Checkbox`, so keyboard, form and
+ * validation behaviour are the browser's.
+ */
+declare const CheckboxGroup: react.ForwardRefExoticComponent<CheckboxGroupProps & react.RefAttributes<HTMLFieldSetElement>>;
+interface CheckboxGroupItemProps {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+declare const CheckboxGroupItem: react.ForwardRefExoticComponent<CheckboxGroupItemProps & react.RefAttributes<HTMLInputElement>>;
+
 interface SegmentedControlOption {
     value: string;
     label: string;
@@ -1165,9 +1348,12 @@ type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 type ModalTone = 'default' | 'info' | 'positive' | 'warning' | 'danger';
 type ModalFooterAlign = 'start' | 'between' | 'end';
 interface ModalProps {
-    open: boolean;
+    /** Controlled open state. Omit it, with `ModalTrigger`, for an uncontrolled dialog. */
+    open?: boolean;
+    /** Initial state when uncontrolled. */
+    defaultOpen?: boolean;
     /** Fired with `false` on Escape, an outside press, or the close button. */
-    onOpenChange: (open: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
     /**
      * Accessible name. Only needed when the dialog renders no `ModalTitle` — with one, the
      * name comes from the heading itself via `aria-labelledby`, so it cannot drift.
@@ -1191,6 +1377,11 @@ interface ModalProps {
     onInteractOutside?: (event: PointerEvent) => void;
     /** Focus this on open instead of the first tabbable element. */
     initialFocus?: React.RefObject<HTMLElement | null>;
+    /**
+     * Where to portal the dialog. Defaults to `document.body`. Pass the element the design
+     * tokens are declared on when the app renders inside a shadow root or a scoped theme.
+     */
+    container?: HTMLElement | null;
 }
 /**
  * A centred dialog above `sm`, a bottom sheet below it.
@@ -1199,34 +1390,54 @@ interface ModalProps {
  * parts — so a modal can take any layout a card can, including headerless. Tone lives
  * on `ModalHeader` (the part that draws the glyph); `ConfirmDialog` and
  * `NoteConfirmModal` accept `tone` at their top level and forward it.
+ *
+ * Built on Radix Dialog from 0.7.0. Radix supplies the focus trap, focus return, Escape and
+ * outside-press handling scoped to the topmost layer, scroll lock, and hiding the page behind
+ * the dialog from assistive tech. The 0.6 overlay stack got the last of those wrong when
+ * modals were stacked. Toasts stay reachable: their region is `aria-live`, which Radix leaves
+ * exposed, and pressing one is not treated as an outside press.
  */
-declare function Modal(props: ModalProps): react.JSX.Element | null;
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
+interface ModalTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    /** Render onto the single child (e.g. a `Button`) instead of a bare `<button>`. */
+    asChild?: boolean;
+}
+/**
+ * Opens an uncontrolled `Modal`. Place it as a direct child of `Modal`; it renders in place,
+ * not in the dialog. New in 0.7.0. Controlled modals (`open` + `onOpenChange`) do not need it.
+ */
+declare const ModalTrigger: react.ForwardRefExoticComponent<ModalTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface ModalCloseProps extends HTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+/** Closes the enclosing `Modal`, e.g. a footer "Cancel" button. New in 0.7.0. */
+declare const ModalClose: react.ForwardRefExoticComponent<ModalCloseProps & react.RefAttributes<HTMLButtonElement>>;
 interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /** Adds a tinted glyph circle. `default` renders none. */
     tone?: ModalTone;
     divider?: boolean;
 }
-declare function ModalHeader({ children, tone, divider, className, ...rest }: ModalHeaderProps): react.JSX.Element;
+declare const ModalHeader: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
 interface ModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
     children: ReactNode;
 }
-declare function ModalTitle({ children, className, id, ...rest }: ModalTitleProps): react.JSX.Element;
+declare const ModalTitle: react.ForwardRefExoticComponent<ModalTitleProps & react.RefAttributes<HTMLHeadingElement>>;
 interface ModalDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
     children: ReactNode;
 }
-declare function ModalDescription({ children, className, id, ...rest }: ModalDescriptionProps): react.JSX.Element;
+declare const ModalDescription: react.ForwardRefExoticComponent<ModalDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
 interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
 /** Must not carry its own `overflow` — the panel is the scroll container. */
-declare function ModalBody({ children, className, ...rest }: ModalBodyProps): react.JSX.Element;
+declare const ModalBody: react.ForwardRefExoticComponent<ModalBodyProps & react.RefAttributes<HTMLDivElement>>;
 interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     align?: ModalFooterAlign;
     divider?: boolean;
 }
-declare function ModalFooter({ children, align, divider, className, ...rest }: ModalFooterProps): react.JSX.Element;
+declare const ModalFooter: react.ForwardRefExoticComponent<ModalFooterProps & react.RefAttributes<HTMLDivElement>>;
 
 type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
 type FloatingAlign = 'start' | 'center' | 'end';
@@ -1244,9 +1455,13 @@ interface TooltipProps {
     body?: ReactNode;
     side?: FloatingSide;
     align?: FloatingAlign;
-    /** Delay before opening, in ms. Default `150`. */
+    /** Delay before opening on hover, in ms. Default `150`. Keyboard focus opens at once. */
     openDelay?: number;
-    /** Delay before closing, in ms. Default `0`. */
+    /**
+     * @deprecated Ignored from 0.7.0. The tooltip now stays open while the pointer travels
+     * from the trigger onto it and while it is hovered, as WCAG 1.4.13 requires, which is what
+     * a close delay used to approximate. Remove it from call sites; it will be dropped in 0.8.
+     */
     closeDelay?: number;
     open?: boolean;
     defaultOpen?: boolean;
@@ -1267,18 +1482,21 @@ interface TooltipProps {
  * Tooltip. Matches Figma's `Tooltip` set — `Placement: Top | Left | Right | Bottom`, with
  * a title and an optional body.
  *
- * Things this gets right that a naive tooltip does not:
+ * Built on Radix Tooltip from 0.7.0, which gets right what a naive tooltip does not:
+ *
+ * - **Keyboard and touch reachable.** Opens on keyboard focus as well as hover, and closes
+ *   on Escape. A hover-only tooltip is inaccessible to half the people using it.
+ * - **Hoverable (WCAG 1.4.13).** It stays open while the pointer moves onto it, so a
+ *   magnifier user can read it. 0.6 closed it the moment the pointer left the trigger.
+ * - **Escape closes only the tooltip.** It goes through the same layer stack as `Modal`, so
+ *   dismissing a tooltip inside a dialog no longer closes the dialog too.
+ * - **Referenced, not floating text.** The trigger is `aria-describedby` the tooltip (or
+ *   `aria-labelledby` it), so it is announced *with* the control.
+ * - **`role="tooltip"` and no interactive content.** Use `Popover` for anything a user acts on.
  *
- * - **Keyboard and touch reachable.** Opens on `focus` as well as hover, and closes on
- *   Escape. A hover-only tooltip is inaccessible to half the people using it.
- * - **Referenced, not floating text.** The panel is wired to the trigger with
- *   `aria-describedby` (or `aria-labelledby`), so it is announced *with* the control
- *   rather than being an orphan region a screen reader may never reach.
- * - **`role="tooltip"` and no interactive content.** A tooltip cannot be hovered into or
- *   focused, so anything interactive inside it is unreachable — use `Popover` for that.
- * - Not modal: no focus trap, no scroll lock, no inert background.
+ * Each tooltip carries its own Radix provider, so there is nothing to mount at the app root.
  */
-declare function Tooltip({ children, title, body, side, align, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, association, className, }: TooltipProps): react.JSX.Element | null;
+declare function Tooltip({ children, title, body, side, align, openDelay, open, defaultOpen, onOpenChange, association, className, }: TooltipProps): react.JSX.Element;
 
 interface PopoverProps {
     children: ReactNode;
@@ -1286,7 +1504,8 @@ interface PopoverProps {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     /**
-     * Trap focus, lock scroll and mark the rest of the page inert. Default `false`.
+     * Trap focus, lock scroll and hide the rest of the page from assistive tech. Default
+     * `false`.
      *
      * A popover is normally non-modal: the page behind stays usable, and Tab moves out of the
      * panel and on through the document. Set `modal` when the panel is a small form whose
@@ -1301,14 +1520,24 @@ interface PopoverProps {
  * into or focused, so anything interactive inside one is unreachable. If the panel holds a
  * link, a button or a field, it has to be a popover — which means a real trigger with
  * `aria-expanded`/`aria-controls`, focus moving into the panel on open, and focus returning
- * to the trigger on close. All of that is here; none of it is in `Tooltip`, by design.
+ * to the trigger on close.
+ *
+ * Built on Radix Popover from 0.7.0. Escape and outside press act on the topmost layer only,
+ * so a popover inside a `Modal` closes without taking the modal with it, and focus leaving a
+ * non-modal panel dismisses it rather than stranding it open.
  */
-declare function Popover({ children, open: openProp, defaultOpen, onOpenChange, modal, }: PopoverProps): react.JSX.Element;
-interface PopoverTriggerProps extends HTMLAttributes<HTMLElement> {
+declare function Popover({ children, open, defaultOpen, onOpenChange, modal }: PopoverProps): react.JSX.Element;
+interface PopoverTriggerProps extends HTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
+    /** Render onto the single child (e.g. a `Button`) instead of a bare `<button>`. */
     asChild?: boolean;
 }
-declare function PopoverTrigger({ children, asChild, className, ...rest }: PopoverTriggerProps): react.JSX.Element;
+/**
+ * Toggles the popover. Radix sets `aria-haspopup="dialog"`, `aria-expanded`,
+ * `aria-controls` and `data-state`, and composes your handlers with its own rather than
+ * replacing them (0.6's `onClick` overrode the toggle).
+ */
+declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     side?: FloatingSide;
@@ -1316,8 +1545,18 @@ interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
     sideOffset?: number;
     /** Accessible name for the panel. Falls back to being labelled by the trigger. */
     label?: string;
+    /** Where to portal the panel. Defaults to the enclosing dialog, else `document.body`. */
+    container?: HTMLElement | null;
 }
-declare function PopoverContent({ children, side, align, sideOffset, label, className, ...rest }: PopoverContentProps): react.JSX.Element | null;
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
+/** Closes the enclosing popover, e.g. an "Apply" or "Cancel" button. New in 0.7.0. */
+declare const PopoverClose: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+/** Positions the panel against an element other than the trigger. New in 0.7.0. */
+declare const PopoverAnchor: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
 
 interface HoverCardProps {
     /** The trigger. Must be a single focusable element — normally a link. */
@@ -1353,17 +1592,20 @@ interface HoverCardProps {
  * reachable here is unreachable on a phone. The panel is `aria-labelledby` the trigger and
  * exposed as a group; the trigger keeps its own name and destination.
  *
- * The close delay is what makes the panel usable: without it, moving the pointer from the
- * trigger to the panel crosses a gap and dismisses the thing you were reaching for.
+ * Built on Radix HoverCard from 0.7.0: the open and close delays, the pointer grace area
+ * between trigger and panel, and Escape through the shared layer stack (so it closes only
+ * the card, not a dialog behind it) come from Radix. The `group` role and the
+ * `aria-describedby` wiring are ours; Radix gives the panel no role at all.
  */
-declare function HoverCard({ children, content, side, align, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, className, }: HoverCardProps): react.JSX.Element | null;
+declare function HoverCard({ children, content, side, align, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, className, }: HoverCardProps): react.JSX.Element;
 
 type OverlayItemTone = 'default' | 'danger';
 
 type MenuItemTone = OverlayItemTone;
 interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     children: ReactNode;
-    onSelect?: () => void;
+    /** Called on activation. Call `event.preventDefault()` to keep the menu open. */
+    onSelect?: (event: Event) => void;
     tone?: MenuItemTone;
     disabled?: boolean;
     /** Leading glyph. Marked decorative automatically. Matches Figma's `Icon` / `Has Icon`. */
@@ -1375,42 +1617,46 @@ interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'>
     /** Typeahead match text, when `children` is not a plain string. */
     textValue?: string;
 }
-declare function MenuItem({ children, onSelect, tone, disabled, icon, description, shortcut, textValue, className, ...rest }: MenuItemProps): react.JSX.Element;
 interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'onSelect' | 'icon'> {
     checked: boolean;
     onCheckedChange?: (checked: boolean) => void;
 }
-declare function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, tone, shortcut, textValue, className, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
 interface MenuRadioGroupProps {
     children: ReactNode;
     value?: string;
     onValueChange?: (value: string) => void;
 }
-declare function MenuRadioGroup({ children, value, onValueChange }: MenuRadioGroupProps): react.JSX.Element;
 interface MenuRadioItemProps extends Omit<MenuItemProps, 'onSelect' | 'icon'> {
     value: string;
 }
-declare function MenuRadioItem({ children, value, disabled, tone, textValue, className, ...rest }: MenuRadioItemProps): react.JSX.Element;
 interface MenuGroupProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /** Names the group. Rendered as a heading when set. */
     label?: string;
 }
-declare function MenuGroup({ children, label, className, ...rest }: MenuGroupProps): react.JSX.Element;
 interface MenuLabelProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
-/** A non-interactive heading inside the menu. Matches Figma's `Menu Heading`. */
-declare function MenuLabel({ children, className, ...rest }: MenuLabelProps): react.JSX.Element;
 interface MenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
 }
-/** Matches Figma's `Menu Separator`. Was a bare unlabelled `div` before 0.4.0. */
-declare function MenuSeparator({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
 interface MenuShortcutProps extends HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
 }
-/** Trailing keyboard hint, for use outside an item's `shortcut` prop. */
-declare function MenuShortcut({ children, className, ...rest }: MenuShortcutProps): react.JSX.Element;
+interface MenuSubProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+interface MenuSubTriggerProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    textValue?: string;
+}
+interface MenuSubContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
 
 interface ContextMenuProps {
     children: ReactNode;
@@ -1419,93 +1665,136 @@ interface ContextMenuProps {
     onOpenChange?: (open: boolean) => void;
 }
 /**
- * Right-click menu.
+ * Right-click menu, built on Radix ContextMenu from 0.7.0.
  *
- * Shares every item and the whole keyboard contract with `DropdownMenu` via `menu-core`;
+ * Shares every item and the whole keyboard contract with `DropdownMenu` (see `menu-core`);
  * the only difference is how it opens — at the pointer, with no trigger element to anchor
- * to, so it is positioned from coordinates rather than by Floating UI's reference/floating
- * pair.
+ * to.
  *
  * **A context menu must never be the only way to reach an action.** `contextmenu` fires on
  * right-click and on the Windows Menu / Shift+F10 keys, but not on touch, and plenty of
  * users never right-click at all. `ContextMenuTrigger` therefore also opens on Shift+F10 and
- * the ContextMenu key, and anything in here should have a visible equivalent elsewhere —
- * usually a `DropdownMenu` on the same row.
+ * the ContextMenu key even where the browser would not, and anything in here should have a
+ * visible equivalent elsewhere — usually a `DropdownMenu` on the same row.
+ *
+ * Radix ContextMenu has no `open` prop (it is opened by the pointer only), so a controlled
+ * `open={false}` closes it, but `open={true}` cannot open it without a position.
  */
-declare function ContextMenu({ children, open: openProp, defaultOpen, onOpenChange, }: ContextMenuProps): react.JSX.Element;
+declare function ContextMenu({ children, open: openProp, defaultOpen, onOpenChange }: ContextMenuProps): react.JSX.Element;
 interface ContextMenuTriggerProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     disabled?: boolean;
 }
-declare function ContextMenuTrigger({ children, disabled, className, ...rest }: ContextMenuTriggerProps): react.JSX.Element;
+/**
+ * The area that responds to right-click. A wrapper with no tab stop of its own: the keyboard
+ * path is Shift+F10 or the ContextMenu key from whatever inside it has focus.
+ */
+declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuTriggerProps & react.RefAttributes<HTMLDivElement>>;
 interface ContextMenuContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /** Minimum gap from the viewport edge, in px. Default `8`. */
     collisionPadding?: number;
+    /** Where to portal the menu. Defaults to the enclosing dialog, else `document.body`. */
+    container?: HTMLElement | null;
 }
-declare function ContextMenuContent({ children, collisionPadding, className, ...rest }: ContextMenuContentProps): react.JSX.Element | null;
+declare const ContextMenuContent: react.ForwardRefExoticComponent<ContextMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuCheckboxItem: react.ForwardRefExoticComponent<MenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuRadioGroup: ({ children, value, onValueChange }: MenuRadioGroupProps) => react.JSX.Element;
+declare const ContextMenuRadioItem: react.ForwardRefExoticComponent<MenuRadioItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuGroup: react.ForwardRefExoticComponent<MenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuLabel: react.ForwardRefExoticComponent<MenuLabelProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: react.ForwardRefExoticComponent<MenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuShortcut: react.ForwardRefExoticComponent<MenuShortcutProps & react.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuSub: ({ children, open, defaultOpen, onOpenChange }: MenuSubProps) => react.JSX.Element;
+declare const ContextMenuSubTrigger: react.ForwardRefExoticComponent<MenuSubTriggerProps & react.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: react.ForwardRefExoticComponent<MenuSubContentProps & react.RefAttributes<HTMLDivElement>>;
 
-interface MenubarProps extends HTMLAttributes<HTMLDivElement> {
+interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'dir' | 'defaultValue'> {
     children: ReactNode;
-    /** Names the menubar. Required by the APG. */
+    /** Reading direction, which flips Left/Right along the bar. */
+    dir?: 'ltr' | 'rtl';
+    /** Accessible name for the bar, e.g. "Editor". Required: a menubar is a landmark-like group. */
     label: string;
+    /** The open menu's `value`, controlled. New in 0.7.0. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
 }
 /**
- * An application menu bar — a horizontal row of menus, as in a desktop app.
+ * A persistent horizontal bar of menus, as in a desktop application's File / Edit / View.
  *
- * Two things distinguish it from a row of `DropdownMenu`s, and both are in the APG:
- *
- * - **The bar is one tab stop.** Left/Right move between the top-level menus; Tab leaves the
- *   bar entirely. A row of independent dropdowns is N tab stops.
- * - **Only one menu is open at a time**, and once any is open, moving along the bar switches
- *   directly to the next menu rather than closing and reopening.
- *
- * Items and the vertical keyboard contract come from `menu-core`, shared with
- * `DropdownMenu` and `ContextMenu`.
+ * Built on Radix Menubar from 0.7.0, which supplies the contract: one tab stop for the whole
+ * bar, Left/Right along it, Down/Up into a menu, Left/Right from inside an open menu to its
+ * sibling, and moving the pointer across the bar switching menus once one is open. Items are
+ * the same parts as `DropdownMenu` (see `menu-core`).
  */
-declare function Menubar({ children, label, className, ...rest }: MenubarProps): react.JSX.Element;
+declare const Menubar: react.ForwardRefExoticComponent<MenubarProps & react.RefAttributes<HTMLDivElement>>;
 interface MenubarMenuProps {
     children: ReactNode;
-    /** Identifies this menu within the bar. */
+    /** Identifies the menu within the bar. */
     value: string;
 }
-/** One menu in the bar. Wraps a `MenubarTrigger` and a `MenubarContent`. */
 declare function MenubarMenu({ children, value }: MenubarMenuProps): react.JSX.Element;
 interface MenubarTriggerProps extends HTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
 }
-declare function MenubarTrigger({ children, className, ...rest }: MenubarTriggerProps): react.JSX.Element;
+declare const MenubarTrigger: react.ForwardRefExoticComponent<MenubarTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 interface MenubarContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
+    /** Where to portal the menu. Defaults to the enclosing dialog, else `document.body`. */
+    container?: HTMLElement | null;
 }
-declare function MenubarContent({ children, className, ...rest }: MenubarContentProps): react.JSX.Element | null;
+declare const MenubarContent: react.ForwardRefExoticComponent<MenubarContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarCheckboxItem: react.ForwardRefExoticComponent<MenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarRadioGroup: ({ children, value, onValueChange }: MenuRadioGroupProps) => react.JSX.Element;
+declare const MenubarRadioItem: react.ForwardRefExoticComponent<MenuRadioItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarGroup: react.ForwardRefExoticComponent<MenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarLabel: react.ForwardRefExoticComponent<MenuLabelProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarSeparator: react.ForwardRefExoticComponent<MenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarShortcut: react.ForwardRefExoticComponent<MenuShortcutProps & react.RefAttributes<HTMLSpanElement>>;
+declare const MenubarSub: ({ children, open, defaultOpen, onOpenChange }: MenuSubProps) => react.JSX.Element;
+declare const MenubarSubTrigger: react.ForwardRefExoticComponent<MenuSubTriggerProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarSubContent: react.ForwardRefExoticComponent<MenuSubContentProps & react.RefAttributes<HTMLDivElement>>;
 
 type DrawerSide = 'right' | 'left';
+type DrawerFooterAlign = 'end' | 'between';
 interface DrawerProps {
-    open: boolean;
+    /** Controlled open state. Omit it, with `DrawerTrigger`, for an uncontrolled drawer. */
+    open?: boolean;
+    defaultOpen?: boolean;
     /** Fired with `false` on Escape, an outside press, or the close button. */
-    onOpenChange: (open: boolean) => void;
-    /** Header content (left side). The copies this replaces differ only here — a status badge +
-     *  title in one, an avatar + title + category in another — so it is a slot, not props. */
-    header: ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Header content (left side). The copies this replaces differ only here — a status badge +
+     * title in one, an avatar + title + category in another — so it is a slot, not props.
+     *
+     * Put a `DrawerTitle` in it and the drawer is named by that heading. Leave `header` out
+     * altogether to compose the panel from `DrawerHeader` / `DrawerBody` / `DrawerFooter`.
+     */
+    header?: ReactNode;
     children: ReactNode;
+    /** Footer content, with the `header` layout. Composed drawers use `DrawerFooter`. */
     footer?: ReactNode;
     /** `between` when the footer has a left-aligned secondary action. */
-    footerAlign?: 'end' | 'between';
-    /** Panel width. Defaults to the `w-[440px] max-w-[90vw]` shared by every existing drawer. */
+    footerAlign?: DrawerFooterAlign;
+    /**
+     * Panel width. Defaults to the `w-[440px] max-w-[90vw]` shared by every existing drawer.
+     * `className` is merged with `cn` from 0.7.0, so a width there works too.
+     */
     width?: string;
     /** Which edge the panel slides in from. Default `right`. */
     side?: DrawerSide;
     /**
-     * Accessible name for the dialog. **Required** as of 0.4.0.
+     * Accessible name, for a drawer that renders no `DrawerTitle`.
      *
-     * It was optional through 0.3.0 while `Modal.label` was required, which meant the
-     * public API allowed a `role="dialog" aria-modal="true"` element with no accessible
-     * name at all — a screen reader announced "dialog" and nothing else. Unlike `Modal`
-     * there is no `DrawerTitle` part to infer a name from, because `header` is a free
-     * slot, so the string is the only place it can come from.
+     * Required from 0.4.0 to 0.6, because a free `header` slot gave the name nowhere else
+     * to come from. From 0.7.0 a `DrawerTitle` anywhere in the drawer names it by reference,
+     * the way `ModalTitle` names a `Modal`, so `label` is only needed without one. With
+     * neither, Radix warns in development.
      */
-    label: string;
+    label?: string;
     className?: string;
     /** Call `preventDefault()` to keep the drawer open — e.g. unsaved input. */
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
@@ -1513,12 +1802,66 @@ interface DrawerProps {
     onInteractOutside?: (event: PointerEvent) => void;
     /** Focus this on open instead of the first tabbable element. */
     initialFocus?: RefObject<HTMLElement | null>;
+    /** Where to portal the drawer. Defaults to `document.body`. */
+    container?: HTMLElement | null;
 }
 /**
- * Side panel. Handles Esc, traps Tab focus, locks background scroll, marks the rest of
- * the page inert, and restores focus to the trigger on close.
+ * Side panel, built on Radix Dialog from 0.7.0. Radix handles Escape, the focus trap,
+ * scroll lock, hiding the page from assistive tech, and returning focus on close.
+ *
+ * Two ways to fill it:
+ *
+ *     // Slots: the layout every 0.6 drawer used.
+ *     <Drawer open={open} onOpenChange={setOpen}
+ *       header={<DrawerTitle>Supplier</DrawerTitle>} footer={<Button>Save</Button>}>
+ *       …body…
+ *     </Drawer>
+ *
+ *     // Parts: for a header with a description, or a body that is not one scroll region.
+ *     <Drawer open={open} onOpenChange={setOpen}>
+ *       <DrawerHeader><DrawerTitle>Supplier</DrawerTitle><DrawerDescription>…</DrawerDescription></DrawerHeader>
+ *       <DrawerBody>…</DrawerBody>
+ *       <DrawerFooter><Button>Save</Button></DrawerFooter>
+ *     </Drawer>
  */
-declare function Drawer(props: DrawerProps): react.JSX.Element | null;
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+interface DrawerTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+/** Opens an uncontrolled `Drawer`. A direct child of `Drawer`; it renders in place. */
+declare const DrawerTrigger: react.ForwardRefExoticComponent<DrawerTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface DrawerCloseProps extends HTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+/** Closes the enclosing `Drawer`, e.g. a footer "Cancel" button. */
+declare const DrawerClose: react.ForwardRefExoticComponent<DrawerCloseProps & react.RefAttributes<HTMLButtonElement>>;
+interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Renders the close button at the end of the header row. Default `true`. */
+    showClose?: boolean;
+}
+/** The header row, with the close button. The `header` slot renders inside one of these. */
+declare const DrawerHeader: react.ForwardRefExoticComponent<DrawerHeaderProps & react.RefAttributes<HTMLDivElement>>;
+interface DrawerTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+}
+/** Names the drawer (`aria-labelledby`). Use it inside the `header` slot or `DrawerHeader`. */
+declare const DrawerTitle: react.ForwardRefExoticComponent<DrawerTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+interface DrawerDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+/** Describes the drawer (`aria-describedby`). */
+declare const DrawerDescription: react.ForwardRefExoticComponent<DrawerDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+interface DrawerBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Accessible name for the scroll region, which becomes focusable when it overflows.
+     * Defaults to "Content". It is not the drawer's own name, which would be announced twice.
+     */
+    label?: string;
+}
+/** The scrolling body. It fills the space between header and footer. */
+declare const DrawerBody: react.ForwardRefExoticComponent<DrawerBodyProps & react.RefAttributes<HTMLDivElement>>;
+interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+    align?: DrawerFooterAlign;
+}
+declare const DrawerFooter: react.ForwardRefExoticComponent<DrawerFooterProps & react.RefAttributes<HTMLDivElement>>;
 
 interface ConfirmDialogProps {
     open: boolean;
@@ -1534,7 +1877,12 @@ interface ConfirmDialogProps {
     confirmLabel?: string;
     cancelLabel?: string;
     confirmVariant?: 'primary' | 'danger';
-    /** Disables the confirm button and swaps its label — the double-submit guard. */
+    /**
+     * The double-submit guard. While true, the confirm button shows a spinner and its
+     * `confirmingLabel`, and ignores presses while keeping focus. The dialog also cannot be
+     * dismissed (Escape, outside press, Cancel, the close button), so a request in flight
+     * cannot lose the dialog that is waiting on it.
+     */
     isConfirming?: boolean;
     /** Label shown on the confirm button while `isConfirming`. */
     confirmingLabel?: string;
@@ -1553,6 +1901,10 @@ interface ConfirmDialogProps {
  * just layout — the `isConfirming` guard that disables the button and swaps its label
  * is the thing call sites get wrong when they hand-roll a confirm. For any other
  * shape, compose `Modal` and its parts directly.
+ *
+ * Focus opens on **Cancel**, the least destructive action, as the WAI-ARIA alert dialog
+ * pattern recommends. Through 0.6 it opened on the close button, one Tab away from
+ * "Delete".
  */
 declare function ConfirmDialog({ open, title, subtitle, tone, size, confirmLabel, cancelLabel, confirmVariant, isConfirming, confirmingLabel, children, className, onConfirm, onOpenChange, }: ConfirmDialogProps): react.JSX.Element;
 
@@ -1568,7 +1920,10 @@ interface NoteConfirmModalProps {
     /** Block confirmation until the note has content. */
     requireNote?: boolean;
     notePlaceholder?: string;
+    /** Accessible name of the note field. The placeholder is not a label. Defaults to "Note". */
+    noteLabel?: string;
     submittingLabel?: string;
+    /** Shows a spinner on confirm and keeps the dialog from being dismissed mid-request. */
     isSubmitting?: boolean;
     className?: string;
     /** Fired with `false` on cancel, Escape, or an outside press. */
@@ -1589,24 +1944,19 @@ interface NoteConfirmModalProps {
 declare function NoteConfirmModal({ open, ...rest }: NoteConfirmModalProps): react.JSX.Element | null;
 
 /**
- * Overflow / row-actions menu, rebuilt in 0.4.0.
- *
- * The previous version declared `role="menu"` and `role="menuitem"` and implemented none of
- * the WAI-ARIA menu contract. Announcing a pattern you do not implement is worse than
- * announcing nothing, because a screen reader tells the user which keys should work. Fixed:
- * arrow keys, Home/End and typeahead; a roving tabindex (every item used to be a natively
- * tabbable `<button>`, so Tab walked all of them); focus moving into the menu on open and
- * back to the trigger on close; a portal, so the panel is no longer clipped by `Card`'s
- * `overflow-hidden` or `DataTable`'s `overflow-x-auto` — both named in its own doc comment
- * as the reason it exists; collision handling instead of a static `left`/`right`; correct
- * ARIA ownership; and `open`/`onOpenChange`, where open state used to be unreachable.
- *
- * The items and keyboard model now live in `menu-core`, shared with `ContextMenu` and
- * `Menubar`.
- *
- * Not implemented: submenus. Doing them properly needs hover intent and a safe-travel
- * polygon between trigger and panel, and a half-built version is worse than none — nest a
- * second `DropdownMenu` in the meantime.
+ * Overflow / row-actions menu.
+ *
+ * 0.4.0 rebuilt it to the WAI-ARIA menu contract after a version that declared the roles
+ * and implemented none of the keys. 0.7.0 moves that contract onto Radix DropdownMenu, which
+ * also brings submenus (`DropdownMenuSub`), the one thing 0.4.0 deliberately left out because
+ * a half-built safe-travel path is worse than none.
+ *
+ * Kept from ours, on top of Radix:
+ * - **ArrowUp on the trigger opens on the last item**, as the APG describes.
+ * - **Tab closes the menu** so focus moves on through the page; Radix keeps Tab inside.
+ * - **It works inside a clickable table row.** Presses on the trigger and in the panel stop
+ *   short of the row, the behaviour 0.2.0's `RowMenu` existed for.
+ * - **Non-modal by default.** The page behind stays readable and interactive.
  */
 interface DropdownMenuProps {
     children: ReactNode;
@@ -1614,28 +1964,104 @@ interface DropdownMenuProps {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Block the page while open (Radix's default). Default `false`, matching 0.6: a menu is
+     * not a dialog, and the page behind it stays usable.
+     */
+    modal?: boolean;
 }
-declare function DropdownMenu({ children, open: openProp, defaultOpen, onOpenChange, }: DropdownMenuProps): react.JSX.Element;
-interface DropdownMenuTriggerProps extends HTMLAttributes<HTMLElement> {
+declare function DropdownMenu({ children, open: openProp, defaultOpen, onOpenChange, modal, }: DropdownMenuProps): react.JSX.Element;
+interface DropdownMenuTriggerProps extends HTMLAttributes<HTMLButtonElement> {
     children?: ReactNode;
     /** Render the child element instead of the default overflow button. */
     asChild?: boolean;
     /** Accessible name for the default `⋯` button. Ignored when `asChild` is set. */
     label?: string;
 }
-declare function DropdownMenuTrigger({ children, asChild, label, ...rest }: DropdownMenuTriggerProps): react.JSX.Element;
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 interface DropdownMenuContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     side?: FloatingSide;
     align?: FloatingAlign;
     sideOffset?: number;
+    /** Where to portal the menu. Defaults to the enclosing dialog, else `document.body`. */
+    container?: HTMLElement | null;
+    /** Called when focus returns on close. Call `preventDefault()` to stop it moving to the trigger. */
+    onCloseAutoFocus?: (event: Event) => void;
+}
+declare const DropdownMenuContent: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<MenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioGroup: ({ children, value, onValueChange }: MenuRadioGroupProps) => react.JSX.Element;
+declare const DropdownMenuRadioItem: react.ForwardRefExoticComponent<MenuRadioItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuGroup: react.ForwardRefExoticComponent<MenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: react.ForwardRefExoticComponent<MenuLabelProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<MenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: react.ForwardRefExoticComponent<MenuShortcutProps & react.RefAttributes<HTMLSpanElement>>;
+declare const DropdownMenuSub: ({ children, open, defaultOpen, onOpenChange }: MenuSubProps) => react.JSX.Element;
+declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<MenuSubTriggerProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<MenuSubContentProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ScrimProps {
+    /** Dismiss the overlay this scrim sits behind. */
+    onClose?: () => void;
+    /**
+     * Accessible name. With one, the scrim is a real `<button>`, which it must be when clicking it
+     * is the *only* pointer route out. Without one it is `aria-hidden` decoration, and the overlay
+     * must offer another exit (a close button, Escape).
+     */
+    label?: string;
+    /** `absolute` when the scrim sits inside a wrapper that is already positioned. */
+    position?: 'fixed' | 'absolute';
+    /**
+     * Fade instead of mounting and unmounting, for a panel that slides in and out. While closed
+     * the scrim stops taking pointer events; an always-mounted scrim that kept them would silently
+     * eat every click on the page. Set as `data-state`.
+     */
+    open?: boolean;
+    /** Stacking and breakpoint gating, e.g. `z-overlay lg:hidden`. */
+    className?: string;
 }
-declare function DropdownMenuContent({ children, side, align, sideOffset, className, ...rest }: DropdownMenuContentProps): react.JSX.Element | null;
+/**
+ * The dimming layer behind an overlay, for overlays `Modal` and `Drawer` do not cover (a
+ * non-modal side panel, a mobile nav). New in 0.7.0, from SCIC. It exists so "I need a scrim"
+ * never again means hand-writing `fixed inset-0 bg-black/40`, which is how SCIC ended up with
+ * three scrim colours. The colour comes from `OVERLAY_SCRIM`.
+ */
+declare function Scrim({ onClose, label, position, open, className }: ScrimProps): react.JSX.Element;
+
+/**
+ * `base` (the default) sits on the overlay layer, so a dialog opened from inside it appears above
+ * it. `elevated` sits above another surface, e.g. a widget preview opened from a full-screen
+ * dashboard. SCIC defaulted to `elevated`.
+ */
+type FullscreenStacking = 'base' | 'elevated';
+interface FullscreenSurfaceProps {
+    /** Called on Escape and on the close button. The surface renders while mounted. */
+    onClose: () => void;
+    /** Accessible name of the surface, e.g. "Supply risk dashboard". */
+    label: string;
+    /** Text on the close button. Default "Close". */
+    closeLabel?: string;
+    stacking?: FullscreenStacking;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * An opaque, scrollable surface that fills the viewport, with a close button: "full screen" and
+ * "expand this widget". New in 0.7.0, from SCIC.
+ *
+ * No scrim, because nothing behind it is visible. But it *is* modal: SCIC's version left the page
+ * underneath in the tab order, so Tab walked into content covered by the surface. Built on Radix
+ * Dialog, it traps focus, hides the page from assistive tech, returns focus on close, and takes
+ * Escape through the shared layer stack, so a dialog opened on top closes first.
+ */
+declare function FullscreenSurface({ onClose, label, closeLabel, stacking, children, className, }: FullscreenSurfaceProps): react.JSX.Element;
 
 interface PortalProps {
     children: ReactNode;
     /**
-     * Where to mount. Defaults to `document.body`.
+     * Where to mount. Defaults to the nearest `PortalContainerProvider`, else `document.body`.
      *
      * Pass a container when the app renders inside a shadow root or a scoped theme
      * wrapper — the portal must stay inside whatever element the design tokens are
@@ -1643,6 +2069,12 @@ interface PortalProps {
      */
     container?: HTMLElement | null;
 }
+declare function PortalContainerProvider({ container, children, }: {
+    container: HTMLElement | null;
+    children: ReactNode;
+}): react.JSX.Element;
+/** The container a `Portal` here would mount into, for Radix parts that take `container`. */
+declare function usePortalContainer(): HTMLElement | null;
 /**
  * Renders `children` outside the parent DOM hierarchy.
  *
@@ -1761,6 +2193,99 @@ declare function useOverlayDismiss({ onDismiss, panelRef, active, closeOnEscape,
  */
 declare function cn(...inputs: ClassValue[]): string;
 
+/**
+ * `Slot` renders its own props onto its single child element instead of emitting a
+ * wrapper of its own. It is what makes `asChild` work.
+ *
+ * Why the library needs it: before 0.4.0 there was no way to render a `Button` as a
+ * router `<Link>`, or to use any component as a tooltip/popover anchor, because every
+ * component hardcoded its host element. The usual workaround — a `component`/`as` prop —
+ * multiplies generics across the whole surface and still cannot forward a ref through
+ * two levels. Delegating to the child instead keeps the type surface flat.
+ *
+ *     <Button asChild><Link to="/x">Go</Link></Button>
+ *
+ * Merge rules, in order of who wins:
+ * - `className` — concatenated, slot first, so the child's classes come last
+ * - `style`     — shallow-merged, child wins on conflicting keys
+ * - `on*`       — both run, slot's handler first; the child's runs even if the slot's
+ *                 called `preventDefault`, matching normal DOM listener behaviour
+ * - everything else — child wins, so a child's explicit `type` or `role` is never
+ *                     clobbered by a default the slot happens to carry
+ */
+interface SlotProps extends HTMLAttributes<HTMLElement> {
+    /** The single element to merge into. */
+    children?: ReactNode;
+    /**
+     * Rebuilds the child's children, so a component that decorates its content can keep
+     * doing so through `asChild`.
+     *
+     * `Button` renders `leadingIcon`, a padded label span and `trailingIcon` around whatever
+     * it is given. Without this, `<Button asChild><Link>Go</Link></Button>` would either drop
+     * the icons (cloning the Link untouched) or drop "Go" (replacing the Link's children
+     * outright). It receives the child's own children — "Go" — and returns the decorated
+     * tree to place inside the child.
+     */
+    wrapChildren?: (childChildren: ReactNode) => ReactNode;
+}
+declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement>>;
+/** Fan one node out to several refs, callback or object. */
+declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void;
+
+/**
+ * The keyboard focus ring, as one string, so every control draws the same one.
+ *
+ * Before 0.7.0 this exact class list was written out by hand in 18 places, with six
+ * near-misses beside it (a missing offset colour, `ring-offset-2`). Use it in new and migrated
+ * components rather than re-typing it.
+ *
+ * `FOCUS_RING` sits outside the element and needs room around it. Inside a scrolling or
+ * `overflow-hidden` panel, such as a menu, a listbox or a table cell, the offset ring is clipped,
+ * so items there use `FOCUS_RING_INSET`, which draws inside the element's own box.
+ *
+ * Highlight is not focus: menu and option items also tint their background when highlighted
+ * (by pointer or by keyboard), but the tint alone does not meet WCAG 2.4.7 next to a hovered
+ * sibling with the same tint. The ring is what marks the keyboard position.
+ */
+declare const FOCUS_RING = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default";
+declare const FOCUS_RING_INSET = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand";
+
+interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Render the hiding styles onto the single child element instead of a `<span>`. */
+    asChild?: boolean;
+}
+/**
+ * Content that screen readers announce and nobody sees: a dialog title the design does
+ * not show, a "(opens in new tab)" suffix, the label of an icon-only control.
+ *
+ * Tailwind's `sr-only` does the same job in markup the library owns, and nine components still
+ * use it. This is for the call site, where a component is clearer than a utility class and
+ * survives a `className` override that would otherwise drop `sr-only` along with the rest.
+ */
+declare const VisuallyHidden: react.ForwardRefExoticComponent<VisuallyHiddenProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface AccessibleIconProps {
+    /** The icon. A single element; it is hidden from assistive technology. */
+    children: ReactElement;
+    /** What the icon means. It is announced in place of the icon. */
+    label: string;
+}
+/**
+ * An icon that carries meaning on its own, with no visible text beside it: a "verified" tick
+ * in a table cell, a warning glyph standing in for a status word.
+ *
+ * Icons are decorative by default (`lucide-react` hides them, and so does the library wherever
+ * it renders one for you). That is right beside a label and wrong here, where the icon *is*
+ * the information. This hides the SVG and adds the label as visually hidden text, which reads
+ * reliably in every screen reader, unlike `aria-label` on an `<svg>`.
+ *
+ * Inside a button, use `IconButton` with `aria-label` instead: the name belongs to the control,
+ * not to the glyph.
+ *
+ *     <AccessibleIcon label="Verified"><CircleCheckBigIcon className="size-4" /></AccessibleIcon>
+ */
+declare function AccessibleIcon({ children, label }: AccessibleIconProps): react.JSX.Element;
+
 type CardSize = 'sm' | 'md' | 'lg';
 type CardRadius = 'lg' | 'xl' | '2xl';
 type CardTone = 'default' | 'brand' | 'positive' | 'warning' | 'danger';
@@ -1841,7 +2366,7 @@ interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
 declare function CardFooter({ children, size, divider, align, className, ...rest }: CardFooterProps): react.JSX.Element;
 
 type AccordionType = 'single' | 'multiple';
-interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'> {
     children: ReactNode;
     /** `single` closes the open item when another opens. Default `single`. */
     type?: AccordionType;
@@ -1859,6 +2384,7 @@ interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
      * right level depends on what surrounds it, which only the caller knows.
      */
     headingLevel?: 2 | 3 | 4;
+    disabled?: boolean;
 }
 /**
  * Accordion. Matches Figma's `Accordion` / `Accordion Item` (`State: Closed | Open`).
@@ -1866,24 +2392,34 @@ interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
  * Width is deliberately not set — Figma's own note on `Accordion Item` says the 640px in
  * the component set is a container artefact and the parent should own width, so this is
  * `w-full` and nothing more.
+ *
+ * Built on Radix Accordion from 0.7.0. The contract is unchanged: real headings, triggers with
+ * `aria-expanded` / `aria-controls`, labelled `region` panels, Up/Down/Home/End between
+ * triggers, and closed panels unmounted so they are not tabbable. New: your handlers on the
+ * trigger compose with the toggle, every part forwards its ref, each part carries
+ * `data-state`, and open content exposes `--radix-accordion-content-height` for animation.
  */
-declare function Accordion({ children, type, value: valueProp, defaultValue, onValueChange, collapsible, headingLevel, className, ...rest }: AccordionProps): react.JSX.Element;
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
 interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     value: string;
     disabled?: boolean;
 }
-declare function AccordionItem({ children, value, disabled, className, ...rest }: AccordionItemProps): react.JSX.Element;
+declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
 interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
     /** Hide the chevron — for a trigger that supplies its own affordance. */
     hideIndicator?: boolean;
 }
-declare function AccordionTrigger({ children, hideIndicator, className, ...rest }: AccordionTriggerProps): react.JSX.Element;
+declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
-declare function AccordionContent({ children, className, ...rest }: AccordionContentProps): react.JSX.Element | null;
+/**
+ * Unmounted while closed rather than height-collapsed: a `height: 0` panel keeps its content
+ * focusable and announceable, so keyboard users would tab into a closed section.
+ */
+declare const AccordionContent: react.ForwardRefExoticComponent<AccordionContentProps & react.RefAttributes<HTMLDivElement>>;
 
 interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
@@ -1900,13 +2436,18 @@ interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
  * `aria-labelledby`, and the panel must be genuinely removed from the accessibility tree
  * when closed — `height: 0` with `overflow: hidden` leaves its content focusable and
  * announceable, so a keyboard user tabs into a collapsed section.
+ *
+ * Built on Radix Collapsible from 0.7.0: your `onClick` on the trigger now runs alongside the
+ * toggle instead of replacing it, every part forwards its ref, and the open content exposes
+ * `--radix-collapsible-content-height` for a height animation. Each part carries
+ * `data-state="open" | "closed"`.
  */
-declare function Collapsible({ children, open: openProp, defaultOpen, onOpenChange, disabled, className, ...rest }: CollapsibleProps): react.JSX.Element;
+declare const Collapsible: react.ForwardRefExoticComponent<CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
 interface CollapsibleTriggerProps extends HTMLAttributes<HTMLButtonElement> {
     children?: ReactNode;
     asChild?: boolean;
 }
-declare function CollapsibleTrigger({ children, asChild, className, ...rest }: CollapsibleTriggerProps): react.JSX.Element;
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 interface CollapsibleContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /**
@@ -1918,7 +2459,92 @@ interface CollapsibleContentProps extends HTMLAttributes<HTMLDivElement> {
      */
     keepMounted?: boolean;
 }
-declare function CollapsibleContent({ children, keepMounted, className, ...rest }: CollapsibleContentProps): react.JSX.Element | null;
+declare const CollapsibleContent: react.ForwardRefExoticComponent<CollapsibleContentProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Layout primitives, new in 0.7.0: `Box`, `Flex`, `Grid`, `Container` and `Section`, the Radix
+ * Themes layout set.
+ *
+ * Each is a thin, typed wrapper over the Tailwind utilities a page would otherwise hand-write.
+ * Spacing props take the Figma spacing tokens by name (`gap="400"` is 16px), so layout uses the
+ * same scale as the components inside it and an arbitrary `gap-[13px]` has nowhere to go. All of
+ * them take `asChild` to lay out an element of your own (a `<ul>`, a `<form>`, a `<main>`) and
+ * merge `className` with `cn`, so a class you pass wins.
+ *
+ * The class maps below are written out literally on purpose: Tailwind only generates classes
+ * that appear verbatim in source, so building them with template strings would emit no CSS.
+ */
+/** A Figma spacing step, by name: `100` is 4px, `400` is 16px, `1600` is 64px. */
+type SpaceToken = '0' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '1000' | '1200' | '1600';
+interface LayoutBaseProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** Lay out your own single child element instead of a `<div>`. */
+    asChild?: boolean;
+    /** Padding on every side, as a spacing token. */
+    p?: SpaceToken;
+    /** Horizontal padding, as a spacing token. */
+    px?: SpaceToken;
+    /** Vertical padding, as a spacing token. */
+    py?: SpaceToken;
+}
+type BoxProps = LayoutBaseProps;
+/** A plain block with token padding. The base the others build on. */
+declare const Box: react.ForwardRefExoticComponent<LayoutBaseProps & react.RefAttributes<HTMLDivElement>>;
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+interface FlexProps extends LayoutBaseProps {
+    /** Default `row`. */
+    direction?: FlexDirection;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    gap?: SpaceToken;
+    /** Let items wrap onto new lines. */
+    wrap?: boolean;
+    /** `inline-flex` instead of `flex`. */
+    inline?: boolean;
+}
+/** A flex row or column with token gaps. */
+declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttributes<HTMLDivElement>>;
+type GridColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridBreakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl';
+interface GridProps extends LayoutBaseProps {
+    /**
+     * Column count, fixed or per breakpoint: `columns={3}` or
+     * `columns={{ base: 1, md: 2, lg: 4 }}`.
+     */
+    columns?: GridColumnCount | Partial<Record<GridBreakpoint, GridColumnCount>>;
+    /**
+     * As many columns as fit, each at least this wide, e.g. `"16rem"`. Responds to the grid's own
+     * width, not the viewport's, so it suits form fields and card lists inside panels of any size
+     * (what SCIC's `FormGrid` did). Ignored when `columns` is set.
+     */
+    minColumnWidth?: string;
+    gap?: SpaceToken;
+    gapX?: SpaceToken;
+    gapY?: SpaceToken;
+    align?: FlexAlign;
+}
+/** A CSS grid with token gaps: fixed, responsive or auto-fitting columns. */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
+type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface ContainerProps extends LayoutBaseProps {
+    /** Maximum content width. Default `lg` (1136px). */
+    size?: ContainerSize;
+}
+/** Centres content at a maximum width, with a 16px side gutter by default. */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
+type SectionSize = 'sm' | 'md' | 'lg';
+interface SectionProps extends LayoutBaseProps {
+    /** Vertical rhythm: 24, 40 or 64px above and below. Default `md`. */
+    size?: SectionSize;
+}
+/**
+ * A page band with vertical rhythm, rendered as a `<section>`. Give it a heading (or an
+ * `aria-label`) when it should be a landmark; an unnamed `<section>` is announced as nothing at
+ * all, which is the right default for a purely visual band.
+ */
+declare const Section: react.ForwardRefExoticComponent<SectionProps & react.RefAttributes<HTMLElement>>;
 
 interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
@@ -2114,6 +2740,13 @@ declare function PageHeading({ title, subtitle, size, as, actions, truncateTitle
 type PageToolbarSize = 'sm' | 'md';
 interface PageToolbarProps {
     children: ReactNode;
+    /**
+     * Renders an icon-only back control at the far left, ahead of the heading: the Page Header's
+     * `backButton` in Figma (node 3473:16837). New in 0.7.0, from SCIC. Omit for no back control.
+     */
+    onBack?: () => void;
+    /** Accessible name for the back control. Default "Go back". */
+    backLabel?: string;
     /** Allow the row to wrap when the action cluster is wide (entity-detail has seven buttons). */
     wrap?: boolean;
     /**
@@ -2135,7 +2768,7 @@ interface PageToolbarProps {
  * variant is adopted here, which is a deliberate improvement below `md` where the
  * fixed 28px padding was cramped.
  */
-declare function PageToolbar({ children, wrap, size, className }: PageToolbarProps): react.JSX.Element;
+declare function PageToolbar({ children, onBack, backLabel, wrap, size, className, }: PageToolbarProps): react.JSX.Element;
 
 type FilterBarSize = 'sm' | 'md';
 interface FilterBarProps {
@@ -2180,6 +2813,7 @@ interface TabItem<K extends string = string> {
     count?: number;
     disabled?: boolean;
 }
+/** The `items` form: a tab strip only, with `TabsPanel`s placed wherever the page needs them. */
 interface TabsProps<K extends string = string> {
     items: TabItem<K>[];
     /** Controlled selection. Omit and pass `defaultValue` for uncontrolled. */
@@ -2196,30 +2830,53 @@ interface TabsProps<K extends string = string> {
     orientation?: TabsOrientation;
     activation?: TabsActivation;
     /**
-     * Shared prefix for the generated tab and panel ids. Pass the same value to `TabsPanel`
-     * to wire `aria-controls` / `aria-labelledby`. Generated when omitted.
+     * Shared prefix for the tab and panel ids. Pass the same value to each `TabsPanel` and the
+     * tabs point `aria-controls` at their panels. Without it, `aria-controls` is left off: a
+     * generated prefix would point it at ids no panel has. The composable form needs neither.
      */
     idPrefix?: string;
     /** Names the tab strip. Required by the APG when there is more than one on a page. */
     label?: string;
     className?: string;
 }
+/**
+ * The composable form, new in 0.7.0 and built on Radix Tabs: `Tabs` wraps a `TabsList` of
+ * `TabsTrigger`s and the `TabsContent` panels, and wires every id itself.
+ */
+interface TabsRootProps {
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    orientation?: TabsOrientation;
+    activation?: TabsActivation;
+    /** Reading direction, which flips Left/Right in a horizontal strip. */
+    dir?: 'ltr' | 'rtl';
+    className?: string;
+}
 declare const tabId: (prefix: string, key: string) => string;
 declare const tabPanelId: (prefix: string, key: string) => string;
 /**
- * Tab strip.
+ * Tabs, in two forms.
+ *
+ *     // items: a strip; panels live anywhere, linked by idPrefix.
+ *     <Tabs items={items} value={tab} onValueChange={setTab} idPrefix="entity" />
+ *     <TabsPanel tabKey="overview" idPrefix="entity" active={tab === 'overview'}>…</TabsPanel>
  *
- * Reworked in 0.4.0. It previously carried `role="tablist"`, `role="tab"` and
- * `aria-selected` with **no `onKeyDown` at all** — no Arrow keys, no Home/End, no roving
- * tabindex, no `aria-controls`, and no `role="tabpanel"` counterpart anywhere in the
- * library. That combination is worse than shipping no ARIA: a screen reader announces
- * "tab 3 of 5", the user presses the arrow keys it implies, and nothing happens. Every
- * tab was also individually tabbable, so Tab walked the strip instead of leaving it.
+ *     // composable (0.7.0, Radix): strip and panels in one tree, ids wired for you.
+ *     <Tabs defaultValue="overview">
+ *       <TabsList label="Sections"><TabsTrigger value="overview">Overview</TabsTrigger></TabsList>
+ *       <TabsContent value="overview">…</TabsContent>
+ *     </Tabs>
  *
- * The `underline` active colour is `background-brand` (#0C2D58), which is what Figma
- * specifies.
+ * Both implement the WAI-ARIA tabs pattern: one tab stop on the selected tab, arrows along the
+ * strip (wrapping), Home/End, disabled tabs skipped, automatic or manual activation, and
+ * `role="tabpanel"` regions labelled by their tabs. 0.3.0 had the roles and none of the keys.
  */
-declare function Tabs<K extends string = string>({ items, value: valueProp, defaultValue, onValueChange, variant, size, orientation, activation, idPrefix, label, className, }: TabsProps<K>): react.JSX.Element;
+declare function Tabs<K extends string = string>(props: TabsProps<K>): ReactElement;
+declare function Tabs(props: TabsRootProps): ReactElement;
 interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
     /** The `key` of the tab this panel belongs to. */
     tabKey: string;
@@ -2235,15 +2892,31 @@ interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
     keepMounted?: boolean;
 }
 /**
- * The `role="tabpanel"` half of the pattern, which the library had no equivalent of —
- * so `aria-controls` on a tab pointed at nothing and there was no labelled region for a
- * screen reader to move into.
+ * The `role="tabpanel"` half of the `items` form.
  *
  * `tabIndex={0}` is deliberate and required: when a panel contains no focusable element,
  * it must be reachable itself, otherwise Tab from the selected tab skips the content
- * entirely.
+ * entirely. So it also needs a visible focus ring, which 0.6 suppressed (WCAG 2.4.7).
  */
 declare function TabsPanel({ tabKey, idPrefix, active, children, keepMounted, className, ...rest }: TabsPanelProps): react.JSX.Element | null;
+interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the tab strip. Required by the APG when there is more than one on a page. */
+    label?: string;
+}
+declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    value: string;
+    disabled?: boolean;
+    /** Renders a count chip after the label. */
+    count?: number;
+}
+declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    /** Keep the panel mounted while hidden, preserving its state. Default `false`. */
+    keepMounted?: boolean;
+}
+declare const TabsContent: react.ForwardRefExoticComponent<TabsContentProps & react.RefAttributes<HTMLDivElement>>;
 
 type NavItemSize = 'sm' | 'md';
 type NavItemVariant = 'card' | 'plain';
@@ -2254,6 +2927,12 @@ interface NavItemProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
      */
     icon?: ReactNode;
     label: string;
+    /**
+     * A destination that exists but cannot be opened right now (no permission, coming soon).
+     * Dimmed, out of the tab order and inert under `asChild`, with `aria-disabled` so it is
+     * still announced. New in 0.7.0; replaces `pointer-events-none opacity-40` at the call site.
+     */
+    disabled?: boolean;
     /**
      * The row you are on — the current route. Paints the brand fill and, under `asChild`, sets
      * `aria-current="page"`; it also reflects to `data-state="active"`.
@@ -2291,7 +2970,7 @@ interface NavItemProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
      * nav row that looks interactive and cannot be focused or activated. `asChild` is the
      * fix for anyone using it outside that wrapper:
      *
-     *     <NavItem asChild icon={<LuHouse />} label="Home">
+     *     <NavItem asChild icon={<HouseIcon />} label="Home">
      *       <NavLink to="/" />
      *     </NavItem>
      */
@@ -2299,7 +2978,7 @@ interface NavItemProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     children?: ReactNode;
     className?: string;
 }
-declare function NavItem({ icon, label, isActive, indicator, collapsed, size, variant, asChild, children, className, ...rest }: NavItemProps): react.JSX.Element;
+declare function NavItem({ icon, label, isActive, indicator, collapsed, size, variant, asChild, disabled, children, className, onClick, ...rest }: NavItemProps): react.JSX.Element;
 
 type EyebrowLabelVariant = 'uppercase' | 'plain';
 interface EyebrowLabelProps {
@@ -2445,6 +3124,33 @@ declare function paginationRange(page: number, pageCount: number, siblingCount?:
  *   announced as an unavailable control.
  */
 declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+interface PaginationBarProps {
+    /** 1-based. */
+    page: number;
+    /** Rows per page. */
+    pageSize: number;
+    /** Total rows across every page. */
+    total: number;
+    onPageChange: (page: number) => void;
+    /** Offer a page-size selector. Omit it, or pass `[]` as `pageSizeOptions`, to hide one. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Page sizes on offer. Default `[10, 20, 50]`. */
+    pageSizeOptions?: number[];
+    /** Replaces the "Showing 1–10 of 57" summary. */
+    summary?: ReactNode;
+    /** Names the page-button landmark. Default "Pages". */
+    label?: string;
+    className?: string;
+}
+/**
+ * A full pager row: a range summary, an optional page-size selector, and the page buttons.
+ * New in 0.7.0, from SCIC's `Pagination` (whose `limit` is `pageSize` here). `DataTable` renders
+ * one; use it directly for a list that pages without a table.
+ *
+ * Only the page buttons are the `<nav>` landmark. The summary and the size selector sit beside
+ * it, because a landmark should hold navigation and nothing else.
+ */
+declare function PaginationBar({ page, pageSize, total, onPageChange, onPageSizeChange, pageSizeOptions, summary, label, className, }: PaginationBarProps): react.JSX.Element;
 
 type NavigationMenuOrientation = 'horizontal' | 'vertical';
 type NavigationMenuVariant = 'pill' | 'link';
@@ -2498,66 +3204,115 @@ declare const NavigationMenuItem: react.ForwardRefExoticComponent<NavigationMenu
  * All of them take `asChild`, because the right element is contextual — a `Heading` is an
  * `<h2>` on a page and an `<h3>` inside a card, and only the caller knows the outline.
  */
+/**
+ * The text colour as a meaning, new in 0.7.0. `muted` and `subtle` are the secondary and
+ * tertiary steps; the rest are the status tones. It replaces the
+ * `className={denied ? 'text-danger' : 'text-positive'}` that consumers were writing, so state
+ * is a prop and the colour stays a token. Omit it to keep each component's own colour.
+ */
+type TextTone = 'default' | 'muted' | 'subtle' | 'brand' | 'positive' | 'warning' | 'danger';
 type BaseProps = HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 };
 type TextProps = BaseProps;
 /** `Text` — the default body paragraph. */
 declare const Text: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Small` — secondary body copy. */
 declare const TextSmall: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Tiny` — the smallest readable step; captions and table meta. */
 declare const TextTiny: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Strong` — emphasis by weight, in a real `<strong>`. */
 declare const TextStrong: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Emphasis` — emphasis by slant, in a real `<em>`. */
 declare const TextEmphasis: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
+} & react.RefAttributes<HTMLElement>>;
+/** An inline quotation, in a real `<q>` so the browser adds locale-correct quote marks. New in 0.7.0. */
+declare const Quote: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Code` — inline monospace. */
 declare const TextCode: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Title Hero` — the largest step, one per page at most. */
 declare const TitleHero: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Title Page` — page title. */
 declare const TitlePage: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Subtitle` — a lead paragraph under a title; regular weight by design. */
 declare const Subtitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Heading` — section heading. */
 declare const Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
 /** `Text Subheading` — subsection heading; regular weight, matching Figma. */
 declare const Subheading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
     asChild?: boolean;
+    /** Text colour as a meaning. See `TextTone`. */
+    tone?: TextTone;
 } & react.RefAttributes<HTMLElement>>;
+interface BlockquoteProps extends HTMLAttributes<HTMLQuoteElement> {
+    children?: ReactNode;
+    /** URL of the source, set as the `cite` attribute. Not shown; pair with a visible credit. */
+    cite?: string;
+    tone?: TextTone;
+}
+/**
+ * A block quotation, new in 0.7.0, matching Radix Themes' `Blockquote`. A real
+ * `<blockquote>`, so assistive tech announces where the quotation starts and ends.
+ */
+declare const Blockquote: react.ForwardRefExoticComponent<BlockquoteProps & react.RefAttributes<HTMLQuoteElement>>;
 interface TextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children?: ReactNode;
     asChild?: boolean;
@@ -2614,6 +3369,91 @@ interface WidgetFooterProps {
 }
 declare function WidgetFooter({ caption, subcaption, action, className }: WidgetFooterProps): react.JSX.Element;
 
+/**
+ * The dashboard grid vocabulary, ported from SCIC in 0.7.0: a 12-column row, five widget widths
+ * and three canonical card heights. The heights are modular (364 = 170·2 + 24, 752 = 170·4 +
+ * 24·3), so two stacked `medium` cards bottom-align with one `large`.
+ *
+ * Not included: SCIC's drag-and-drop masonry dashboard, which needs `@dnd-kit` and stays in the
+ * app until it earns a subpath of its own.
+ */
+/** Column span within the 12-column grid. */
+type ColSize = 'tiny' | 'small' | 'medium' | 'large' | 'full';
+/** Canonical widget card heights. */
+type WidgetHeight = 'small' | 'medium' | 'large';
+/**
+ * Viewport-driven spans: everything stacks (tiny tiles pair up 2×2) below `lg`, then the
+ * 12-column spans apply. Right when the grid gets the whole viewport. For a grid that shares
+ * its row with a rail or drawer, size by its own width: see `useWidthTier` and
+ * `COL_SPAN_BY_TIER`.
+ */
+declare const COL_SPAN: Record<ColSize, string>;
+declare const HEIGHT_CLASS: Record<WidgetHeight, string>;
+/** The same heights in px, for layout maths. Keep in step with `HEIGHT_CLASS`. */
+declare const HEIGHT_PX: Record<WidgetHeight, number>;
+interface WidgetGridProps {
+    children: ReactNode;
+    className?: string;
+}
+/** A vertical stack of `WidgetGridRow`s with the dashboard gutters. */
+declare function WidgetGrid({ children, className }: WidgetGridProps): react.JSX.Element;
+interface WidgetGridRowProps {
+    children: ReactNode;
+    className?: string;
+}
+/** A 12-column row. Place `WidgetGridItem`s in it. */
+declare function WidgetGridRow({ children, className }: WidgetGridRowProps): react.JSX.Element;
+interface WidgetGridItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** How many columns the widget claims. */
+    size: ColSize;
+    /** Fixes the card height to the canonical scale. Omit for content height. */
+    height?: WidgetHeight;
+}
+/**
+ * One widget's cell. Takes `size` and `height` as props, so a dashboard never composes span
+ * classes itself. They are also set as `data-size` / `data-height`.
+ */
+declare function WidgetGridItem({ size, height, className, ...rest }: WidgetGridItemProps): react.JSX.Element;
+
+/**
+ * Container-width tiers for grids that cannot use viewport breakpoints, because they share their
+ * row with a nav rail or a docked drawer. Pure functions, ported from SCIC in 0.7.0. The hook that
+ * measures and debounces is `useWidthTier`.
+ */
+type GridTier = 'stacked' | 'narrow' | 'standard' | 'wide';
+declare const GRID_TIERS: readonly GridTier[];
+/** The narrowest width, in px, at which each tier applies. */
+declare const TIER_MIN_PX: Record<GridTier, number>;
+declare function quantizeWidth(px: number): number;
+/** The tier for a width, with no hysteresis. */
+declare function tierForWidth(px: number): GridTier;
+/** The next tier from `current`, holding still inside the hysteresis band. */
+declare function nextTier(current: GridTier, px: number): GridTier;
+/** Columns (of 12) each widget width claims, per tier. */
+declare const TIER_COLS: Record<GridTier, Record<ColSize, number>>;
+/** `TIER_COLS` as literal classes (Tailwind only emits classes it finds verbatim). */
+declare const COL_SPAN_BY_TIER: Record<GridTier, Record<ColSize, string>>;
+declare function colsFor(tier: GridTier, size: ColSize): number;
+/** The pixel width of a cell spanning `cols` of 12, given the grid width and column gap. */
+declare function slotWidthPx(gridWidthPx: number, columnGapPx: number, cols: number): number;
+
+interface UseWidthTierOptions {
+    /** Stop committing new widths, e.g. while a drawer animates. Unfreezing flushes the latest. */
+    frozen?: boolean;
+}
+interface UseWidthTierResult {
+    ref: (node: HTMLElement | null) => void;
+    /** The quantised width, or `null` before the first measurement. */
+    widthPx: number | null;
+    tier: GridTier;
+}
+/**
+ * Measures an element and reports its `GridTier`, debounced and with hysteresis. Ported from
+ * SCIC in 0.7.0. Without `ResizeObserver` (jsdom, very old browsers) it measures once on mount
+ * rather than throwing.
+ */
+declare function useWidthTier({ frozen }?: UseWidthTierOptions): UseWidthTierResult;
+
 interface StatTileProps {
     label: string;
     value: string | number;
@@ -2624,9 +3464,34 @@ interface StatTileProps {
      * which is how competing status palettes drift apart.
      */
     dotColor?: string;
+    /** A muted line under the value: a comparison, a unit, "of 240". New in 0.7.0, from SCIC. */
+    hint?: ReactNode;
+    /**
+     * Makes the tile a toggle button, for a row of tiles that filter a list below. New in 0.7.0.
+     * Pair with `selected`.
+     */
+    onClick?: () => void;
+    /**
+     * The tile's filter is the active one. Sets `aria-pressed` (with `onClick`) or `aria-current`
+     * (with `asChild`), and `data-state="selected"`, which the tile styles: no conditional border
+     * classes needed.
+     */
+    selected?: boolean;
+    /** Render onto the single child instead, e.g. a router `<Link>` to a filtered page. */
+    asChild?: boolean;
+    /** The element to render onto, with `asChild`. Its own children are replaced by the tile. */
+    children?: ReactElement;
     className?: string;
 }
-declare function StatTile({ label, value, tone, dotColor, className }: StatTileProps): react.JSX.Element;
+/**
+ * A labelled figure: "Open cases 42".
+ *
+ * From 0.7.0 a tile can also be the filter for the list beneath it, which is what Cleo's
+ * Companies, Employees and Users screens hand-built with
+ * `className={filter === t.f ? 'border-brand …' : ''}`. Give it `onClick` and `selected` and it
+ * is a real toggle button (`aria-pressed`), styled from its own state.
+ */
+declare function StatTile({ label, value, tone, dotColor, hint, onClick, selected, asChild, children, className, }: StatTileProps): react.JSX.Element;
 
 type StatNumberSize = 'sm' | 'md' | 'lg';
 type StatNumberWeight = 'medium' | 'bold';
@@ -3029,6 +3894,28 @@ interface ListRowProps {
     /** Render an `<li>` instead of a `<div>` — use inside a `<ul>`/`<ol>`. */
     as?: 'div' | 'li';
     onClick?: () => void;
+    /**
+     * Render onto the single child instead, e.g. a router `<Link>` for a row that navigates.
+     * The child is the interactive element and the slots render inside it. New in 0.7.0.
+     *
+     *     <ListRow asChild title="Acme" description="Supplier"><Link to="/acme" /></ListRow>
+     */
+    asChild?: boolean;
+    /** The element to render onto, with `asChild`. Its own children are replaced by the slots. */
+    children?: ReactElement;
+    /**
+     * The row is chosen, in a set where rows toggle on and off (a picker, a multi-select list).
+     * Sets `aria-pressed` on a clickable row and `data-state="selected"`, which the row styles.
+     * New in 0.7.0; it replaces conditional `bg-brand-tertiary` classes at the call site.
+     */
+    selected?: boolean;
+    /**
+     * The row is the current one in a navigation-like list (the open section, this page). Sets
+     * `aria-current` and is styled like `selected`. New in 0.7.0.
+     */
+    current?: boolean | 'page' | 'step' | 'location';
+    /** A clickable row that cannot be activated right now. Sets `aria-disabled`. New in 0.7.0. */
+    disabled?: boolean;
     /**
      * Accessible name for a clickable row. Strongly recommended whenever `onClick` is set:
      * without it the name is the concatenation of every slot's text.
@@ -3043,8 +3930,12 @@ interface ListRowProps {
  * document-upload flow — its status vocabulary, its five raw-hex pills and its
  * unicode-glyph labels — into the library. Every feature of those rows is reachable by
  * composing this with `FileRow`, `FileDropZone` and `StatusBadge`; see the docs.
+ *
+ * State is a prop, not a class: `selected`, `current` and `disabled` set the attributes that
+ * announce them (`aria-pressed`, `aria-current`, `aria-disabled`, `data-state`) and the row
+ * styles itself from those.
  */
-declare function ListRow({ leading, title, titleMeta, description, meta, trailing, footer, density, divider, as: Tag, onClick, 'aria-label': ariaLabel, className, }: ListRowProps): react.JSX.Element;
+declare function ListRow({ leading, title, titleMeta, description, meta, trailing, footer, density, divider, as: Tag, onClick, asChild, children, selected, current, disabled, 'aria-label': ariaLabel, className, }: ListRowProps): react.JSX.Element;
 
 interface FileRowProps {
     name: string;
@@ -3121,6 +4012,16 @@ interface ProgressBarProps {
     radius?: string;
     /** Accessible name when there is no visible `label`. */
     'aria-label'?: string;
+    /**
+     * Draw the bar as this many equal steps, filled in whole steps, e.g. a password-strength
+     * meter. New in 0.7.0; replaces hand-built rows of tinted bars.
+     */
+    segments?: number;
+    /**
+     * What the value means, announced instead of the number (`aria-valuetext`), e.g. "Strong".
+     * A strength meter at 75 means nothing as "75 percent".
+     */
+    valueText?: string;
     /**
      * Applied to the track. This is how you set a fixed width — `className="w-16"`.
      * It genuinely overrides the base `w-full` because this file uses `cn`.
@@ -3134,7 +4035,7 @@ interface ProgressBarProps {
  * `widgets/` despite being a general-purpose primitive — so `TableCellProgress`
  * hand-rolled a second copy rather than reuse it. It also had no ARIA at all.
  */
-declare function ProgressBar({ value, tone, size, label, showValue, radius, 'aria-label': ariaLabel, className, }: ProgressBarProps): react.JSX.Element;
+declare function ProgressBar({ value, tone, size, label, showValue, radius, 'aria-label': ariaLabel, segments, valueText, className, }: ProgressBarProps): react.JSX.Element;
 
 interface NumberedListItem {
     title: string;
@@ -3274,6 +4175,58 @@ interface DetailGridProps {
  */
 declare function DetailGrid({ children, columns, className }: DetailGridProps): react.JSX.Element;
 
+/**
+ * Label/value rows for a detail page, as a real `<dl>`. New in 0.7.0, from SCIC.
+ *
+ * Use it for a profile or account summary read top to bottom. `DetailGrid` / `DetailItem`
+ * are for a multi-column summary card. The rows here are width-aware without a breakpoint: the
+ * label has a fixed basis and the value a minimum one, and the row wraps, so in a narrow panel
+ * (a one-third column, a 320px phone, 200% zoom) the value drops below its label instead of
+ * being squeezed into a sliver beside it.
+ */
+interface DescriptionListProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function DescriptionList({ children, className }: DescriptionListProps): react.JSX.Element;
+interface DescriptionItemProps {
+    label: string;
+    /** An empty value renders an em dash. */
+    value: ReactNode;
+    /**
+     * Adds a copy-to-clipboard button. Pass the plain string to copy: emails and ids are long,
+     * unbroken and commonly pasted elsewhere.
+     */
+    copyValue?: string;
+    className?: string;
+}
+declare function DescriptionItem({ label, value, copyValue, className }: DescriptionItemProps): react.JSX.Element;
+interface CopyButtonProps {
+    /** The text to copy. */
+    value: string;
+    /** The button's accessible name, e.g. "Copy email". */
+    label: string;
+    /** Announced after a copy. Default "Copied". */
+    copiedLabel?: string;
+    className?: string;
+}
+/**
+ * An icon button that copies `value` to the clipboard, shows a tick for two seconds, and
+ * announces the copy in a polite live region. Exported for ids and codes outside a
+ * `DescriptionList`.
+ */
+declare function CopyButton({ value, label, copiedLabel, className }: CopyButtonProps): react.JSX.Element;
+/**
+ * A one-line email that truncates the local part and keeps the domain:
+ * `alexandra.konstan…@example.com`. The full address stays in the DOM (screen readers and copy
+ * get all of it) and in `title`. Pair it with `copyValue`, so touch users, who cannot hover, can
+ * still get the address.
+ */
+declare function EmailText({ email, className }: {
+    email: string;
+    className?: string;
+}): react.JSX.Element;
+
 type CheckedGroupListColumns = 1 | 2 | 3;
 /** One labelled group of ticked items. */
 interface CheckedGroup {
@@ -3384,8 +4337,18 @@ declare const TableCaption: react.ForwardRefExoticComponent<TableCaptionProps &
 declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * A row's state tint. Each is a meaning, not a colour: `muted` for an inactive or ended
+ * record, `danger` for a denied or failed one, and so on. New in 0.7.0, to replace the
+ * `className={active ? '' : 'bg-default-secondary'}` consumers were writing on every row.
+ */
+type TableRowTone = 'default' | 'muted' | 'brand' | 'positive' | 'warning' | 'danger';
 interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     selected?: boolean;
+    /** State tint; see `TableRowTone`. Selection wins over tone. */
+    tone?: TableRowTone;
+    /** De-emphasises the row (an expired or archived record) without hiding it. */
+    dimmed?: boolean;
 }
 declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
 interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
@@ -3411,50 +4374,67 @@ interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
 }
 declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
 
-interface ColumnDef<T> {
-    key: string;
-    header: string;
-    /**
-     * CSS width value — e.g. `"320px"`, `"10rem"`. When `grow` is true this becomes the
-     * column's floor: it counts toward the table's min-width, below which the wrapper
-     * scrolls sideways rather than crushing the columns.
-     */
-    width: string;
-    /**
-     * When true the column absorbs the remaining table width.
-     *
-     * With no `grow` column, `table-fixed` distributes surplus width proportionally
-     * across every column — the old flex layout left it blank on the right instead. Mark
-     * whichever column should soak it up.
-     */
-    grow?: boolean;
-    render: (row: T) => ReactNode;
-}
-type DataTableDensity = 'default' | 'compact';
-type DataTableAlign = 'center' | 'top';
-interface DataTableProps<T> {
-    columns: ColumnDef<T>[];
-    rows: T[];
-    getRowKey: (row: T, index: number) => Key;
-    /** Row and header padding. `compact` also steps the header and cell type down. */
-    density?: DataTableDensity;
-    /** Vertical alignment of every body cell. Use `top` for multi-line or ragged cells. */
-    align?: DataTableAlign;
-    onRowClick?: (row: T) => void;
-    /** Rendered as one full-width row when `rows` is empty. Omit to render nothing. */
-    emptyLabel?: string;
+/** How a column appears in card mode. */
+type ColumnMobileRole = 'title' | 'status' | 'actions' | 'field' | 'hidden';
+
+/**
+ * The composable parts of `DataTable`. `DataTable` renders all of them for you; they are
+ * exported for a table that needs its own layout around them (a toolbar elsewhere on the
+ * page, a pager in a sticky footer) or a custom header renderer.
+ */
+/** The id `createSelectColumn` gives its column, so `DataTable` can find and place it. */
+declare const SELECT_COLUMN_ID = "select";
+interface DataTableColumnHeaderProps<TData, TValue> {
+    column: Column<TData, TValue>;
+    /** Header text. Defaults to the column's label. */
+    title?: string;
     className?: string;
 }
 /**
- * A real `<table>` with `table-fixed` and a `<colgroup>`.
+ * A header that sorts its column when the column can sort, and plain text when it cannot.
+ * `DataTable` uses it for every string `header`. Use it yourself inside a `header` render
+ * function to keep the sort control while adding something next to it.
  *
- * 0.2.0 laid each row out as its own flex container sized `w-max`, so a `grow` column
- * sized itself per row and one long cell shunted that row's remaining columns out of
- * line with its neighbours. `table-fixed` resolves column widths once for the whole
- * table, which is the property the consuming app hand-rolled a separate audit table
- * to get.
+ * A click cycles the sort (ascending → descending → off). Shift-click adds the column to a
+ * multi-column sort. The direction is announced through `aria-sort` on the `<th>`, which
+ * `DataTable` sets, so this button carries only the visible chevron.
+ */
+declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): react.JSX.Element;
+interface CreateSelectColumnOptions<TData> {
+    /** Names each row's checkbox, e.g. `(row) => \`Select ${row.name}\``. Default "Select row". */
+    getRowLabel?: (row: TData) => string;
+    /** Names the header checkbox. Default "Select all rows on this page". */
+    selectAllLabel?: string;
+}
+/**
+ * A leading checkbox column. `DataTable` adds one automatically when `enableRowSelection` is
+ * set and the columns have none, so call this only to place it yourself or to name the rows.
+ *
+ * The header checkbox selects the current *page*, which is what a user can see, and shows
+ * indeterminate while some of the page is selected.
+ */
+declare function createSelectColumn<TData>(options?: CreateSelectColumnOptions<TData>): ColumnDef<TData, unknown>;
+interface DataTableViewOptionsProps<TData> {
+    table: Table$1<TData>;
+    /** Trigger text. Default "Columns". */
+    label?: string;
+}
+/** A "Columns" menu that shows and hides every column whose `enableHiding` is not false. */
+declare function DataTableViewOptions<TData>({ table, label }: DataTableViewOptionsProps<TData>): react.JSX.Element | null;
+interface DataTablePaginationProps<TData> {
+    table: Table$1<TData>;
+    /** Page sizes on offer. An empty array hides the selector. Default `[10, 20, 50]`. */
+    pageSizeOptions?: number[];
+    /** Replaces the "Showing 1–10 of 57" summary. */
+    summary?: ReactNode;
+}
+/** The pager row: a range summary, a page-size selector, and page buttons. */
+declare function DataTablePagination<TData>({ table, pageSizeOptions, summary, }: DataTablePaginationProps<TData>): react.JSX.Element;
+
+/**
+ * Cell renderers for `DataTable` (and the `Table` parts). Unchanged in 0.7.0; moved out of
+ * `data-table.tsx` when the table itself was rebuilt on TanStack Table.
  */
-declare function DataTable<T>({ columns, rows, getRowKey, density, align, onRowClick, emptyLabel, className, }: DataTableProps<T>): react.JSX.Element;
 /**
  * Cell type scale.
  *
@@ -3502,6 +4482,206 @@ interface TableCellProgressProps {
 /** Mini progress bar with a percentage label below. */
 declare function TableCellProgress({ percent, tone, size, className, }: TableCellProgressProps): react.JSX.Element;
 
+type DataTableColumnAlign = 'start' | 'center' | 'end';
+/**
+ * Per-column layout options, carried on TanStack's `meta`. Declared by augmenting TanStack's
+ * own `ColumnMeta`, so `meta` on your `ColumnDef` is typed with no extra import:
+ *
+ *     const columns: ColumnDef<Supplier>[] = [
+ *       { accessorKey: 'name', header: 'Supplier', meta: { width: '280px', grow: true, mobile: 'title' } },
+ *     ];
+ */
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * CSS width for the column's `<col>`, e.g. `"320px"` or `"10rem"`. A column is never
+         * narrower than its header text. With `grow`, this is the floor instead.
+         */
+        width?: string;
+        /** Absorbs the table's remaining width, with `width` as its floor. Usually one column. */
+        grow?: boolean;
+        /** Horizontal alignment of the header and cells. Default `start`. */
+        align?: DataTableColumnAlign;
+        /**
+         * The cell renders its own controls (a button, a toggle, a menu). Presses inside it stop
+         * before reaching the row's `onRowClick`, and the cell stops clipping its overflow, so
+         * focus rings are not cut off.
+         */
+        interactive?: boolean;
+        /** Keep the header for screen readers but hide it visually, e.g. an actions column. */
+        hideHeader?: boolean;
+        /** The column's part in card mode. See `ColumnMobileRole`. Default `field`. */
+        mobile?: ColumnMobileRole;
+        /** Pin the first (`start`) or last (`end`) visible column while the table scrolls sideways. */
+        sticky?: 'start' | 'end';
+        /** The column's name where its header cannot be shown as text: menus, card labels. */
+        label?: string;
+        /** Extra classes on the header cell. An escape hatch; prefer `align`. */
+        headerClassName?: string;
+        /** Extra classes on each body cell. An escape hatch; prefer `align`. */
+        cellClassName?: string;
+    }
+}
+type DataTableDensity = 'default' | 'compact';
+type DataTableAlign = 'center' | 'top';
+/** The table state you can control. Every key is optional and independently controlled. */
+interface DataTableState {
+    sorting: SortingState;
+    globalFilter: string;
+    columnFilters: ColumnFiltersState;
+    pagination: PaginationState;
+    columnVisibility: VisibilityState;
+    rowSelection: RowSelectionState;
+}
+/** Hand an operation to the server. The table then shows `data` as given for that operation. */
+interface DataTableManual {
+    sorting?: boolean;
+    filtering?: boolean;
+    pagination?: boolean;
+    /** Total rows on the server. Needed with `pagination`, so the pager knows the page count. */
+    rowCount?: number;
+}
+interface DataTableSearchOptions {
+    /** Filter one column instead of every column. */
+    columnId?: string;
+    placeholder?: string;
+    /** Accessible name. Default "Search". */
+    label?: string;
+}
+interface DataTableRowLinkProps {
+    href: string;
+    className: string;
+    children: ReactNode;
+    'data-row-link': '';
+}
+interface DataTableProps<TData, TValue = unknown> {
+    /** TanStack column definitions. Layout options go in each column's `meta`. */
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    /** A stable id per row. Defaults to the row index, which breaks selection across re-sorts. */
+    getRowId?: (row: TData, index: number) => string;
+    /**
+     * Accessible name, rendered as a visually hidden `<caption>`. Give the table either this or
+     * `caption`: an unnamed table is announced as just "table".
+     */
+    label?: string;
+    /** A visible caption above the table, which also names it. */
+    caption?: ReactNode;
+    /** A search box. `true` filters across every column; pass options to filter one column. */
+    searchable?: boolean | DataTableSearchOptions;
+    /** A "Columns" menu to show and hide columns. */
+    columnVisibility?: boolean;
+    /** Page the rows. Default `true`. */
+    pagination?: boolean;
+    /** Rows per page to start with. Default `10`. */
+    pageSize?: number;
+    /** Page sizes to offer. Default `[10, 20, 50]`; `[]` hides the selector. */
+    pageSizeOptions?: number[];
+    /**
+     * Adds a leading checkbox column (unless the columns already include `createSelectColumn()`).
+     * Pass a function to make only some rows selectable.
+     */
+    enableRowSelection?: boolean | ((row: TData) => boolean);
+    /** The selected rows, every time the selection changes. */
+    onSelectionChange?: (rows: TData[]) => void;
+    /** Names a row for its selection checkbox and its card, e.g. `(s) => s.name`. */
+    getRowLabel?: (row: TData) => string;
+    /**
+     * Whole-row activation for rows that open something in place (a drawer, a modal). Keyboard
+     * users focus the row and press Enter or Space. Rows that navigate should use `getRowHref`.
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * The row's destination. The title cell renders as a real link (so middle-click, open in a
+     * new tab and screen-reader link lists all work) and a click anywhere else on the row follows
+     * it. Takes precedence over `onRowClick`.
+     */
+    getRowHref?: (row: TData) => string;
+    /** Renders the row link, e.g. through your router's `Link`. Default: a plain `<a>`. */
+    renderRowLink?: (props: DataTableRowLinkProps) => ReactElement;
+    /** A state tint per row, e.g. `(u) => (u.active ? undefined : 'muted')`. */
+    getRowTone?: (row: TData) => TableRowTone | undefined;
+    /** De-emphasise some rows, e.g. expired ones. */
+    getRowDimmed?: (row: TData) => boolean;
+    /** Shows skeleton rows in place of `data`. */
+    loading?: boolean;
+    /** How many skeleton rows. Default `5`. */
+    loadingRows?: number;
+    /** A load failure, shown in place of the rows. Takes precedence over loading and empty. */
+    error?: ReactNode;
+    /** Adds a Retry button to the error state. */
+    onRetry?: () => void;
+    /** Shown when there are no rows. A string, or your own node. Default "No results found." */
+    empty?: ReactNode;
+    /** Extra toolbar content beside the search box: filters, a primary action. */
+    toolbar?: ReactNode;
+    /** Extra content below the pager, e.g. a "refreshed 2 min ago" note. */
+    footer?: ReactNode;
+    density?: DataTableDensity;
+    /** Vertical alignment of body cells. Use `top` for multi-line or ragged cells. */
+    align?: DataTableAlign;
+    /**
+     * Render rows as cards when the table's own width is below the breakpoint. Default `true`
+     * at 560px. `false` always renders a table.
+     */
+    responsive?: boolean | {
+        breakpoint?: number;
+    };
+    manual?: DataTableManual;
+    /** Controlled state. Any key you pass is controlled; the rest stay internal. */
+    state?: Partial<DataTableState>;
+    onSortingChange?: (sorting: SortingState) => void;
+    onGlobalFilterChange?: (value: string) => void;
+    onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+    onPaginationChange?: (pagination: PaginationState) => void;
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Passed to `useReactTable` last, for anything this API does not cover. */
+    tableOptions?: Partial<TableOptions<TData>>;
+    /** Classes on the bordered wrapper. Layout only, e.g. margins. */
+    className?: string;
+}
+/**
+ * A data table on TanStack Table: sorting, search, pagination, column visibility and row
+ * selection built in, client-side by default and server-driven through `manual`.
+ *
+ *     <DataTable label="Suppliers" columns={columns} data={suppliers} searchable columnVisibility />
+ *
+ * `TData` and `TValue` are inferred from `columns`, so `cell: ({ row }) => row.original.name`
+ * is typed. Layout options (width, alignment, card-mode role, sticky) go in each column's `meta`.
+ *
+ * Layout, from SCIC's table:
+ * - `table-fixed` plus one `<colgroup>`, so one set of widths governs every row and cells can
+ *   ellipsise. A column is never narrower than its header.
+ * - Whatever does not fit scrolls inside a focusable, named region with edge shadows and
+ *   optional sticky first or last columns.
+ * - Below 560px of its own width (not the viewport's) each row becomes a card: the title column
+ *   leads, `status` and `actions` sit at the top, the rest become labelled values.
+ *
+ * Accessibility: a real `<table>` with a caption, `aria-sort` on sortable headers, `aria-busy`
+ * while loading, a polite announcement of the result count after a search, keyboard row
+ * activation, and named selection checkboxes.
+ */
+declare function DataTable<TData, TValue = unknown>({ columns, data, getRowId, label, caption, searchable, columnVisibility: showColumnMenu, pagination: paginated, pageSize, pageSizeOptions, enableRowSelection, onSelectionChange, getRowLabel, onRowClick, getRowHref, renderRowLink, getRowTone, getRowDimmed, loading, loadingRows, error, onRetry, empty, toolbar, footer, density, align, responsive, manual, state, onSortingChange, onGlobalFilterChange, onColumnFiltersChange, onPaginationChange, onColumnVisibilityChange, onRowSelectionChange, tableOptions, className, }: DataTableProps<TData, TValue>): react.JSX.Element;
+
+/**
+ * Tracks an element's rendered content-box width. New in 0.7.0, from SCIC.
+ *
+ * Use this when a component must switch *structure*, not just styling, based on the space it
+ * actually has, e.g. `DataTable` swapping table rows for cards. Viewport breakpoints lie there:
+ * a docked drawer or a one-third-width detail panel shrinks a component without the viewport
+ * changing.
+ *
+ * Returns `[ref, width]`. `width` is `undefined` until the first measurement, which happens in
+ * a layout effect so the first paint already uses it. Attach `ref` to a node whose width does
+ * NOT depend on the structure you switch (typically the component's outer wrapper), or the
+ * switch becomes a feedback loop.
+ */
+declare function useElementWidth<T extends HTMLElement = HTMLElement>(): [
+    (node: T | null) => void,
+    number | undefined
+];
+
 type InlineAlertTone = 'info' | 'warning' | 'danger' | 'positive';
 interface InlineAlertProps {
     tone: InlineAlertTone;
@@ -3562,6 +4742,35 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
  */
 declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
 
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    /** Shown in place of the children when they throw. Default a quiet "Something went wrong". */
+    fallback?: ReactNode;
+    /** Changing this resets the boundary. Use the identity of whatever is being rendered. */
+    resetKey?: string;
+    onError?: (error: Error, info: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+/**
+ * Stops one broken subtree from taking down the whole app. New in 0.7.0, from SCIC.
+ *
+ * React unmounts the entire root when a render throws with no boundary above it, so one widget
+ * that trips over an unexpected API shape blanks the screen instead of one card. This is the
+ * floor under that: everything outside the boundary keeps working.
+ *
+ * A class, because error boundaries can only be classes. The error is still logged: the
+ * fallback deliberately says nothing technical, so the console is how the cause is found.
+ */
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidUpdate(previous: ErrorBoundaryProps): void;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | boolean | Iterable<ReactNode> | react.JSX.Element | null | undefined;
+}
+
 type SkeletonShape = 'line' | 'block' | 'circle';
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     shape?: SkeletonShape;
@@ -3693,6 +4902,44 @@ interface QuickActionsBarProps {
 }
 declare function QuickActionsBar({ actions, active, onSelect, className }: QuickActionsBarProps): react.JSX.Element;
 
+/**
+ * Presentational pieces of an AI chat transcript, ported from SCIC in 0.7.0. Markup only: the
+ * conversation state and streaming stay in the app. SCIC's hard-coded hex colours are replaced
+ * by tokens, so the bubbles follow dark mode.
+ */
+interface AiAvatarProps {
+    className?: string;
+    /** The glyph. Default a chip, SCIC's assistant mark. */
+    icon?: ReactNode;
+}
+/** The assistant's round mark, decorative. */
+declare function AiAvatar({ className, icon }: AiAvatarProps): react.JSX.Element;
+interface TypingIndicatorProps {
+    /** What the assistant is doing, read aloud. Default "Assistant is typing". */
+    label?: string;
+    className?: string;
+}
+/**
+ * "The assistant is working": an avatar, the label and three pulsing dots. A polite live region,
+ * so a screen reader hears the label once rather than nothing. The dots stop under
+ * `prefers-reduced-motion`.
+ */
+declare function TypingIndicator({ label, className }: TypingIndicatorProps): react.JSX.Element;
+type ChatBubbleSender = 'user' | 'assistant';
+interface ChatBubbleProps {
+    /**
+     * Who wrote the message. Called `role` in SCIC; renamed so it cannot be mistaken for (or
+     * linted as) an ARIA role.
+     */
+    sender: ChatBubbleSender;
+    children: ReactNode;
+    /** `assistant` only: the failed-turn palette, set as `data-state="failed"`. */
+    failed?: boolean;
+    className?: string;
+}
+/** One message. The user's sits right in a dark bubble; the assistant's spans the column. */
+declare function ChatBubble({ sender, children, failed, className }: ChatBubbleProps): react.JSX.Element;
+
 /** Soft aurora atmosphere used by the public-facing screens (auth, event
  *  onboarding) — mirrors AuroraBackground in pages/intelligence. Blobs are
  *  corner-anchored so the effect scales from phones to kiosk displays.
@@ -3700,4 +4947,4 @@ declare function QuickActionsBar({ actions, active, onSelect, className }: Quick
  *  with `relative`. */
 declare function AuroraBackdrop(): react.JSX.Element;
 
-export { AIChatBar, type AIChatBarProps, AISuggestionChip, type AISuggestionChipProps, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, AspectRatio, type AspectRatioProps, AuroraBackdrop, Avatar, AvatarBlock, type AvatarBlockProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, BarChart, type BarChartOrientation, type BarChartProps, type BarChartSeries, type BarChartSize, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, CHART_SEQUENCE, CHART_TONE, CHART_TRACK, COUNTRY_CODES, Calendar, type CalendarMode, type CalendarProps, Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterAlign, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardRadius, type CardSize, CardTitle, type CardTitleProps, type CardTone, Carousel, CarouselControls, type CarouselControlsProps, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselViewport, type CarouselViewportProps, ChartLegend, type ChartLegendItem, type ChartLegendOrientation, type ChartLegendProps, type ChartTone, CheckIndicator, type CheckIndicatorProps, type CheckIndicatorStatus, Checkbox, type CheckboxProps, type CheckboxSize, type CheckedGroup, CheckedGroupList, type CheckedGroupListColumns, type CheckedGroupListProps, ChecklistRow, type ChecklistRowProps, type ChecklistRowState, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, type ColumnDef, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandItem, type CommandProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, MenuCheckboxItem as ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, MenuGroup as ContextMenuGroup, MenuItem as ContextMenuItem, MenuLabel as ContextMenuLabel, type ContextMenuProps, MenuRadioGroup as ContextMenuRadioGroup, MenuRadioItem as ContextMenuRadioItem, MenuSeparator as ContextMenuSeparator, MenuShortcut as ContextMenuShortcut, ContextMenuTrigger, type ContextMenuTriggerProps, ControlSizeProvider, type ControlSizeProviderProps, CountBadge, type CountBadgeProps, CountrySelect, type CountrySelectProps, DEFAULT_SCORE_THRESHOLDS, DataTable, type DataTableAlign, type DataTableDensity, type DataTableProps, DatePicker, type DatePickerProps, type DateRange, DetailGrid, type DetailGridColumns, type DetailGridProps, DetailItem, type DetailItemLayout, type DetailItemProps, type DetailItemSpan, DonutChart, type DonutChartProps, type DonutChartSize, type DonutSegment, Drawer, type DrawerProps, DropdownMenu, MenuCheckboxItem as DropdownMenuCheckboxItem, type MenuCheckboxItemProps as DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, MenuGroup as DropdownMenuGroup, type MenuGroupProps as DropdownMenuGroupProps, MenuItem as DropdownMenuItem, type MenuItemProps as DropdownMenuItemProps, type MenuItemTone as DropdownMenuItemTone, MenuLabel as DropdownMenuLabel, type MenuLabelProps as DropdownMenuLabelProps, type DropdownMenuProps, MenuRadioGroup as DropdownMenuRadioGroup, type MenuRadioGroupProps as DropdownMenuRadioGroupProps, MenuRadioItem as DropdownMenuRadioItem, type MenuRadioItemProps as DropdownMenuRadioItemProps, MenuSeparator as DropdownMenuSeparator, type MenuSeparatorProps as DropdownMenuSeparatorProps, MenuShortcut as DropdownMenuShortcut, type MenuShortcutProps as DropdownMenuShortcutProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateVariant, EntityIconBadge, type EntityIconBadgeProps, type EntityIconBadgeSize, type EntityIconBadgeTone, EyebrowLabel, type EyebrowLabelProps, type EyebrowLabelVariant, Field, type FieldContextValue, FieldDescription, FieldError, FieldGroup, type FieldGroupProps, FieldHint, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldOrientation, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, type FieldTextProps, FileDropZone, type FileDropZoneProps, FileRow, type FileRowProps, FilterBar, type FilterBarProps, type FilterBarSize, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, Heading, HoverCard, type HoverCardProps, IconButton, type IconButtonProps, type IconButtonVariant, IconTextRow, type IconTextRowProps, InlineAlert, type InlineAlertProps, type InlineAlertTone, Input, InputControl, type InputControlProps, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupAlign, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputOTP, type InputOTPMode, type InputOTPProps, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, Label, type LabelProps, LegendDot, type LegendDotProps, type LegendDotShape, type LegendDotSize, ListRow, type ListRowDensity, type ListRowDivider, type ListRowProps, Menubar, MenuCheckboxItem as MenubarCheckboxItem, MenubarContent, type MenubarContentProps, MenuGroup as MenubarGroup, MenuItem as MenubarItem, MenuLabel as MenubarLabel, MenubarMenu, type MenubarMenuProps, type MenubarProps, MenuRadioGroup as MenubarRadioGroup, MenuRadioItem as MenubarRadioItem, MenuSeparator as MenubarSeparator, MenuShortcut as MenubarShortcut, MenubarTrigger, type MenubarTriggerProps, MiniBarChart, type MiniBarChartOrientation, type MiniBarChartProps, type MiniBarChartSize, Modal, ModalBody, type ModalBodyProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterAlign, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, type ModalTone, MultiSelectCard, type MultiSelectCardProps, type MultiSelectCardSize, NavItem, type NavItemProps, type NavItemSize, type NavItemVariant, NavigationMenu, NavigationMenuItem, type NavigationMenuItemProps, type NavigationMenuOrientation, type NavigationMenuProps, type NavigationMenuVariant, NoteConfirmModal, type NoteConfirmModalProps, NumberedList, type NumberedListGap, type NumberedListItem, type NumberedListProps, OVERLAY_SCRIM, PageHeading, type PageHeadingProps, type PageHeadingSize, PageToolbar, type PageToolbarProps, type PageToolbarSize, Pagination, type PaginationProps, type PaginationType, PasswordInput, type PasswordInputProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarTone, type QuickAction, QuickActionsBar, type QuickActionsBarProps, ROLE_COMBO_OPTIONS, RadialGauge, type RadialGaugeProps, type RadialGaugeSize, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, Resizable, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, type ResizableProps, RoleBadge, type RoleBadgeProps, type RoleBadgeTone, RoleComboBox, type RoleComboBoxProps, type RoleOption, SCROLLBAR_CLASSES, type ScoreDirection, type ScoreRampTone, type ScoreThresholds, type ScoreTone, ScoreValue, type ScoreValueProps, type ScoreValueSize, type ScoreValueTone, type ScoreValueWeight, ScoredRow, type ScoredRowAlign, type ScoredRowGap, type ScoredRowProps, ScrollArea, type ScrollAreaAxis, type ScrollAreaProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectControl, type SelectControlProps, type SelectOption, type SelectOptionGroup, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sparkline, type SparklineProps, type SparklineSize, type SparklineVariant, Spinner, type SpinnerProps, type SpinnerSize, StatNumber, type StatNumberProps, type StatNumberSize, type StatNumberWeight, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusChip, type StatusChipProps, StatusDot, type StatusDotProps, type StatusDotTone, type StatusTone, type StepItem, type StepStatus, Stepper, type StepperProps, type StepperSize, StepsList, type StepsListProps, Subheading, Subtitle, Switch, type SwitchProps, type SwitchSize, type TabItem, Table, TableBody, TableCaption, type TableCaptionProps, TableCell, TableCellBadge, type TableCellBadgeProps, TableCellLeadText, type TableCellLeadTextProps, TableCellProgress, type TableCellProgressProps, type TableCellProps, type TableCellSize, TableCellText, type TableCellTextProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSortDirection, Tabs, type TabsActivation, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, type TabsVariant, TagPill, type TagPillProps, type TagPillTone, Text, TextCode, TextEmphasis, TextLink, type TextLinkProps, TextList, type TextListDensity, TextListItem, type TextListItemProps, type TextListProps, type TextListVariant, type TextProps, TextSmall, TextStrong, TextTiny, Textarea, TextareaControl, type TextareaControlProps, type TextareaProps, TileGrid, type TileGridBreakpoint, type TileGridColumns, type TileGridProps, TimeZoneSelect, type TimeZoneSelectProps, TitleHero, TitlePage, type ToastOptions, type ToastRecord, type ToastTone, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleGroupType, type ToggleProps, type ToggleSize, type ToggleVariant, Tooltip, type TooltipProps, TrailChip, type TrailChipProps, type TreeItemState, TreeView, type TreeViewProps, type TreeViewSize, type TrendDirection, TrendLabel, type TrendLabelProps, type TrendLabelSize, type TrendLabelWeight, type UserAccountStatus, UserStatusPill, type UserStatusPillProps, WidgetFooter, type WidgetFooterProps, WidgetHeader, type WidgetHeaderEyebrowVariant, type WidgetHeaderProps, WidgetTitle, type WidgetTitleProps, type WidgetTitleSize, cn, countryOptions, getScoreTone, paginationRange, resolveChartColor, tabId, tabPanelId, timeZoneOffset, timeZoneOptions, useControlSize, useFieldContext, useFieldControl, useOverlayDismiss, useToast };
+export { AIChatBar, type AIChatBarProps, AISuggestionChip, type AISuggestionChipProps, AccessibleIcon, type AccessibleIconProps, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, AiAvatar, type AiAvatarProps, AspectRatio, type AspectRatioProps, AuroraBackdrop, Avatar, AvatarBlock, type AvatarBlockProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, BarChart, type BarChartOrientation, type BarChartProps, type BarChartSeries, type BarChartSize, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, CHART_SEQUENCE, CHART_TONE, CHART_TRACK, COL_SPAN, COL_SPAN_BY_TIER, COUNTRY_CODES, Calendar, type CalendarMode, type CalendarProps, Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterAlign, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardRadius, type CardSize, CardTitle, type CardTitleProps, type CardTone, Carousel, CarouselControls, type CarouselControlsProps, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselViewport, type CarouselViewportProps, ChartLegend, type ChartLegendItem, type ChartLegendOrientation, type ChartLegendProps, type ChartTone, ChatBubble, type ChatBubbleProps, type ChatBubbleSender, CheckIndicator, type CheckIndicatorProps, type CheckIndicatorStatus, Checkbox, CheckboxGroup, CheckboxGroupItem, type CheckboxGroupItemProps, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckedGroup, CheckedGroupList, type CheckedGroupListColumns, type CheckedGroupListProps, ChecklistRow, type ChecklistRowProps, type ChecklistRowState, type ColSize, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, type ColumnMobileRole, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandItem, type CommandProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, type ContainerSize, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, type ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type ContextMenuTriggerProps, ControlSizeProvider, type ControlSizeProviderProps, CopyButton, type CopyButtonProps, CountBadge, type CountBadgeProps, CountrySelect, type CountrySelectProps, type CreateSelectColumnOptions, DEFAULT_SCORE_THRESHOLDS, DataTable, type DataTableAlign, type DataTableColumnAlign, DataTableColumnHeader, type DataTableColumnHeaderProps, type DataTableDensity, type DataTableManual, DataTablePagination, type DataTablePaginationProps, type DataTableProps, type DataTableRowLinkProps, type DataTableSearchOptions, type DataTableState, DataTableViewOptions, type DataTableViewOptionsProps, DatePicker, type DatePickerProps, type DateRange, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, DetailGrid, type DetailGridColumns, type DetailGridProps, DetailItem, type DetailItemLayout, type DetailItemProps, type DetailItemSpan, DonutChart, type DonutChartProps, type DonutChartSize, type DonutSegment, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterAlign, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, type DrawerSide, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type MenuCheckboxItemProps as DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type MenuGroupProps as DropdownMenuGroupProps, DropdownMenuItem, type MenuItemProps as DropdownMenuItemProps, type MenuItemTone as DropdownMenuItemTone, DropdownMenuLabel, type MenuLabelProps as DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, type MenuRadioGroupProps as DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type MenuRadioItemProps as DropdownMenuRadioItemProps, DropdownMenuSeparator, type MenuSeparatorProps as DropdownMenuSeparatorProps, DropdownMenuShortcut, type MenuShortcutProps as DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type MenuSubContentProps as DropdownMenuSubContentProps, type MenuSubProps as DropdownMenuSubProps, DropdownMenuSubTrigger, type MenuSubTriggerProps as DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmailText, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateVariant, EntityIconBadge, type EntityIconBadgeProps, type EntityIconBadgeSize, type EntityIconBadgeTone, ErrorBoundary, type ErrorBoundaryProps, EyebrowLabel, type EyebrowLabelProps, type EyebrowLabelVariant, FOCUS_RING, FOCUS_RING_INSET, Field, type FieldContextValue, FieldDescription, FieldError, FieldGroup, type FieldGroupProps, FieldHint, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldOrientation, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, type FieldTextProps, FileDropZone, type FileDropZoneProps, FileRow, type FileRowProps, FilterBar, type FilterBarProps, type FilterBarSize, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, type FullscreenStacking, FullscreenSurface, type FullscreenSurfaceProps, GRID_TIERS, Grid, type GridBreakpoint, type GridColumnCount, type GridProps, type GridTier, HEIGHT_CLASS, HEIGHT_PX, Heading, HoverCard, type HoverCardProps, IconButton, type IconButtonProps, type IconButtonVariant, IconTextRow, type IconTextRowProps, InlineAlert, type InlineAlertProps, type InlineAlertTone, Input, InputControl, type InputControlProps, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupAlign, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputOTP, type InputOTPMode, type InputOTPProps, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, Label, type LabelProps, LegendDot, type LegendDotProps, type LegendDotShape, type LegendDotSize, ListRow, type ListRowDensity, type ListRowDivider, type ListRowProps, Menubar, MenubarCheckboxItem, MenubarContent, type MenubarContentProps, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, type MenubarProps, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type MenubarTriggerProps, MiniBarChart, type MiniBarChartOrientation, type MiniBarChartProps, type MiniBarChartSize, Modal, ModalBody, type ModalBodyProps, ModalClose, type ModalCloseProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterAlign, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, type ModalTone, ModalTrigger, type ModalTriggerProps, MultiSelectCard, type MultiSelectCardProps, type MultiSelectCardSize, NavItem, type NavItemProps, type NavItemSize, type NavItemVariant, NavigationMenu, NavigationMenuItem, type NavigationMenuItemProps, type NavigationMenuOrientation, type NavigationMenuProps, type NavigationMenuVariant, NoteConfirmModal, type NoteConfirmModalProps, NumberedList, type NumberedListGap, type NumberedListItem, type NumberedListProps, OVERLAY_SCRIM, PageHeading, type PageHeadingProps, type PageHeadingSize, PageToolbar, type PageToolbarProps, type PageToolbarSize, Pagination, PaginationBar, type PaginationBarProps, type PaginationProps, type PaginationType, PasswordInput, type PasswordInputProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, PortalContainerProvider, type PortalProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarTone, type QuickAction, QuickActionsBar, type QuickActionsBarProps, Quote, ROLE_COMBO_OPTIONS, RadialGauge, type RadialGaugeProps, type RadialGaugeSize, Radio, RadioCards, RadioCardsItem, type RadioCardsItemProps, type RadioCardsProps, type RadioCardsSize, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, Resizable, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, type ResizableProps, RoleBadge, type RoleBadgeProps, type RoleBadgeTone, RoleComboBox, type RoleComboBoxProps, type RoleOption, SCROLLBAR_CLASSES, SELECT_COLUMN_ID, type ScoreDirection, type ScoreRampTone, type ScoreThresholds, type ScoreTone, ScoreValue, type ScoreValueProps, type ScoreValueSize, type ScoreValueTone, type ScoreValueWeight, ScoredRow, type ScoredRowAlign, type ScoredRowGap, type ScoredRowProps, Scrim, type ScrimProps, ScrollArea, type ScrollAreaAxis, type ScrollAreaProps, SearchInput, type SearchInputProps, Section, type SectionProps, type SectionSize, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectControl, type SelectControlProps, type SelectOption, type SelectOptionGroup, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Slot, type SlotProps, type SpaceToken, Sparkline, type SparklineProps, type SparklineSize, type SparklineVariant, Spinner, type SpinnerProps, type SpinnerSize, StatNumber, type StatNumberProps, type StatNumberSize, type StatNumberWeight, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusChip, type StatusChipProps, StatusDot, type StatusDotProps, type StatusDotTone, type StatusTone, type StepItem, type StepStatus, Stepper, type StepperProps, type StepperSize, StepsList, type StepsListProps, Subheading, Subtitle, Switch, type SwitchProps, type SwitchSize, TIER_COLS, TIER_MIN_PX, type TabItem, Table, TableBody, TableCaption, type TableCaptionProps, TableCell, TableCellBadge, type TableCellBadgeProps, TableCellLeadText, type TableCellLeadTextProps, TableCellProgress, type TableCellProgressProps, type TableCellProps, type TableCellSize, TableCellText, type TableCellTextProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableRowTone, type TableSortDirection, Tabs, type TabsActivation, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsRootProps, type TabsSize, TabsTrigger, type TabsTriggerProps, type TabsVariant, TagInput, type TagInputParseResult, type TagInputProps, TagPill, type TagPillProps, type TagPillTone, Text, TextCode, TextEmphasis, TextLink, type TextLinkProps, TextList, type TextListDensity, TextListItem, type TextListItemProps, type TextListProps, type TextListVariant, type TextProps, TextSmall, TextStrong, TextTiny, type TextTone, Textarea, TextareaControl, type TextareaControlProps, type TextareaProps, TileGrid, type TileGridBreakpoint, type TileGridColumns, type TileGridProps, TimeZoneSelect, type TimeZoneSelectProps, TitleHero, TitlePage, type ToastOptions, type ToastRecord, type ToastTone, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleGroupType, type ToggleProps, type ToggleSize, type ToggleVariant, Tooltip, type TooltipProps, TrailChip, type TrailChipProps, type TreeItemState, TreeView, type TreeViewProps, type TreeViewSize, type TrendDirection, TrendLabel, type TrendLabelProps, type TrendLabelSize, type TrendLabelWeight, TypingIndicator, type TypingIndicatorProps, type UseFilePicker, type UseFilePickerOptions, type UseWidthTierOptions, type UseWidthTierResult, type UserAccountStatus, UserStatusPill, type UserStatusPillProps, VisuallyHidden, type VisuallyHiddenProps, WidgetFooter, type WidgetFooterProps, WidgetGrid, WidgetGridItem, type WidgetGridItemProps, type WidgetGridProps, WidgetGridRow, type WidgetGridRowProps, WidgetHeader, type WidgetHeaderEyebrowVariant, type WidgetHeaderProps, type WidgetHeight, WidgetTitle, type WidgetTitleProps, type WidgetTitleSize, cn, colsFor, composeRefs, countryOptions, createSelectColumn, currentZoneName, formatFileSize, getScoreTone, nextTier, paginationRange, quantizeWidth, resolveChartColor, slotWidthPx, tabId, tabPanelId, tierForWidth, timeZoneOffset, timeZoneOptions, useControlSize, useElementWidth, useFieldContext, useFieldControl, useFilePicker, useOverlayDismiss, usePortalContainer, useToast, useWidthTier };