@nxgt/material 3.68.0 → 3.71.0

package/dist/lib/components/ui/fields/postal-address/utils.d.ts

@@ -2,3 +2,18 @@ import { PostalAddressFieldValue } from './models.js';
 export declare function isPostalAddressEmpty(data?: PostalAddressFieldValue | null): boolean;
 export declare function postalAddressCountryName(iso?: string | null, language?: string): string;
 export declare function cityLine(data?: PostalAddressFieldValue | null): string;
+export type FormatPostalAddressOptions = {
+    /** The language of the country name (default `'en'`). */
+    language?: string;
+    /** Between the parts (default `', '`). */
+    separator?: string;
+};
+/**
+ * One line for a read view: street, city line, country name. The city line is
+ * "74000 Annecy" or, for GB, US, CA, IE, AU, NZ and IN, "London SW1A 2AA";
+ * the region follows the city. Empty parts are skipped and the country is
+ * named like `postalAddressCountryName`.
+ * @example formatPostalAddress({ street: '12 rue du Lac', postalCode: '74000', locality: 'Annecy', country: 'FR' }, { language: 'fr' })
+ * // "12 rue du Lac, 74000 Annecy, France"
+ */
+export declare function formatPostalAddress(address?: PostalAddressFieldValue | null, { language, separator }?: FormatPostalAddressOptions): string;

package/dist/lib/components/ui/fields/quantity-field/index.d.ts

@@ -0,0 +1,3 @@
+export { QuantityField } from './quantity-field.js';
+export * from './quantity-form-field.js';
+export type { QuantityFieldProps, QuantityUnit, QuantityValue, } from './types.js';

package/dist/lib/components/ui/fields/quantity-field/quantity-field.d.ts

@@ -0,0 +1,8 @@
+import { QuantityFieldProps } from './types.js';
+/**
+ * One labelled field holding an amount and its unit: a group named by the one
+ * label, a NumberField's number (locale decimal, min, max, step, steppers named
+ * after the field), a unit picker (or a typed unit), and one message under the
+ * pair. The value is `{ value, unit }`.
+ */
+export declare function QuantityField({ label, helperText, className, value, defaultValue, onChange, unitLabel, 'aria-label': ariaLabel, ...props }: QuantityFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/quantity-field/quantity-form-field.d.ts

@@ -0,0 +1,8 @@
+import { UseControllerProps } from 'react-hook-form';
+import { QuantityFieldProps } from './types.js';
+/**
+ * A QuantityField wired to React Hook Form. The field's value is
+ * `{ value, unit }`; an error on the whole field, on `<name>.value` or on
+ * `<name>.unit` shows as the one message under the pair.
+ */
+export declare function QuantityFormField<T extends Record<string, any>>({ control, name, ...props }: Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<QuantityFieldProps, 'name' | 'value' | 'onChange' | 'onBlur'>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/quantity-field/quantity-row.d.ts

@@ -0,0 +1,13 @@
+import { QuantityFieldProps, QuantityValue } from './types.js';
+type QuantityRowProps = Pick<QuantityFieldProps, 'name' | 'id' | 'placeholder' | 'onBlur' | 'min' | 'max' | 'step' | 'hideSteppers' | 'units' | 'allowCustomUnit' | 'unitPlaceholder' | 'disabled' | 'required' | 'error' | 'ref'> & {
+    current: QuantityValue;
+    change: (next: QuantityValue) => void;
+    labelId?: string;
+    ariaLabel?: string;
+    describedBy?: string;
+    unitName: string;
+    stepperName?: string;
+};
+/** The pair on one line: the number (NumberControl's row) shrinks, the unit keeps its width. */
+export declare function QuantityRow({ name, current, change, labelId, ariaLabel, describedBy, unitName, stepperName, unitPlaceholder, units, allowCustomUnit, ...props }: QuantityRowProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/quantity-field/quantity-unit.d.ts

@@ -0,0 +1,12 @@
+import { QuantityFieldProps } from './types.js';
+type QuantityUnitProps = Pick<QuantityFieldProps, 'units' | 'allowCustomUnit' | 'disabled' | 'required' | 'error'> & {
+    unit: string;
+    onUnit: (unit: string) => void;
+    name?: string;
+    label: string;
+    placeholder?: string;
+    describedBy?: string;
+};
+/** A quantity's unit: a picker over `units`, or a text input suggesting them. */
+export declare function QuantityUnitPicker({ units, allowCustomUnit, disabled, required, error, unit, onUnit, name, label, placeholder, describedBy, }: QuantityUnitProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/quantity-field/quantity-value.d.ts

@@ -0,0 +1,9 @@
+import { QuantityValue } from './types.js';
+/** The value of a quantity nobody has filled in. */
+export declare const EMPTY_QUANTITY: QuantityValue;
+/**
+ * The one message of a quantity's React Hook Form error: its own, else the
+ * number's, else the unit's (a resolver reports `dose.value` and `dose.unit`
+ * as children of `dose`).
+ */
+export declare function quantityErrorMessage(error: unknown): string | undefined;

package/dist/lib/components/ui/fields/quantity-field/types.d.ts

@@ -0,0 +1,45 @@
+import { FocusEventHandler, ReactNode, Ref } from 'react';
+/** What a QuantityField holds: the amount (`null` while empty) and its unit. */
+export type QuantityValue = {
+    value: number | null;
+    unit: string;
+};
+/** A unit the picker offers: `value` is stored, `label` is shown. */
+export type QuantityUnit = {
+    value: string;
+    label: string;
+};
+export type QuantityFieldProps = {
+    /** The one label of the pair; it names the group. */
+    label?: ReactNode;
+    /** The one message under the pair; the group, the number and the unit are described by it. */
+    helperText?: ReactNode;
+    error?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Names the parts `<name>.value` and `<name>.unit` for a native form. */
+    name?: string;
+    id?: string;
+    placeholder?: string;
+    value?: QuantityValue;
+    defaultValue?: QuantityValue;
+    onChange?: (value: QuantityValue) => void;
+    /** Fires when the number input loses focus. */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    min?: number;
+    max?: number;
+    step?: number;
+    hideSteppers?: boolean;
+    /** The units offered. */
+    units?: QuantityUnit[];
+    /** The unit is typed; `units` become suggestions. Without it the unit is picked from `units`. */
+    allowCustomUnit?: boolean;
+    unitPlaceholder?: string;
+    /** Names the unit part. Defaults to "<label> unit". */
+    unitLabel?: string;
+    /** Names the group when `label` is not plain text. */
+    'aria-label'?: string;
+    /** Reaches the number input (React Hook Form's `field.ref`, `setFocus`). */
+    ref?: Ref<HTMLInputElement>;
+};

package/dist/lib/components/ui/forms/index.d.ts

@@ -2,3 +2,4 @@ export * from './form-field.js';
 export * from './use-code-resolver.js';
 export * from './use-fast-form.js';
 export * from './use-focus-on-refusal.js';
+export * from './use-server-field-errors.js';

package/dist/lib/components/ui/forms/use-server-field-errors.d.ts

@@ -0,0 +1,21 @@
+import { FieldValues, UseFormSetError } from 'react-hook-form';
+/**
+ * Puts an action's field errors (`{ path: message }`) on the form, each under
+ * its field with `type: 'server'`, the first one taking the focus.
+ *
+ * It runs when the `fieldErrors` object changes: pass the answer's own object
+ * (one per answer), and `undefined` while a request runs or when the answer is
+ * not a refusal. Entries with an empty message are skipped. A form that resets
+ * itself after a submit resets in an effect declared before this call. The
+ * keys must be names of the form's fields (filter an API's answer first when
+ * it can name others).
+ *
+ * @example
+ * ```tsx
+ * const form = useFastForm<Values>({ defaultValues }, 'email');
+ * useServerFieldErrors(form, actionData?.fieldErrors);
+ * ```
+ */
+export declare function useServerFieldErrors<T extends FieldValues>(form: {
+    setError: UseFormSetError<T>;
+}, fieldErrors: Partial<Record<string, string>> | undefined): void;

package/dist/lib/components/ui/layout/index.d.ts

@@ -10,6 +10,7 @@ export * from './list-details-layout/index.js';
 export * from './navigation-rail/index.js';
 export * from './pager/index.js';
 export * from './pane-layout/index.js';
+export * from './record-page/index.js';
 export * from './resizable/index.js';
 export * from './responsive-grid/index.js';
 export * from './section-columns/index.js';

package/dist/lib/components/ui/layout/record-page/index.d.ts

@@ -0,0 +1,2 @@
+export * from './record-details.js';
+export * from './record-page.js';

package/dist/lib/components/ui/layout/record-page/record-details.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { CardTitleElement } from '../../primitives/card/card.js';
+/** One « label date » segment of the meta line. */
+export type RecordDetailsStamp = {
+    /** The words before the date: "Added on", "Updated on". */
+    label: string;
+    /** The instant: a `Date`, an ISO string or a timestamp. */
+    at: Date | string | number;
+};
+export type RecordDetailsProps = {
+    /** The card's heading. */
+    title?: ReactNode;
+    /** The heading level of `title`, `'h2'` by default (under the page's `h1`). */
+    titleAs?: CardTitleElement;
+    /** Beside the title: a `Badge` or `StatusIndicator`. */
+    status?: ReactNode;
+    /** « Added on … », the first segment of the meta line. */
+    created?: RecordDetailsStamp;
+    /** « Updated on … », the second segment. */
+    updated?: RecordDetailsStamp;
+    /**
+     * The IANA zone the dates are written in (`Europe/Paris`), `UTC` by
+     * default: no call reads the machine's zone, so a server and a browser
+     * print the same.
+     */
+    timeZone?: string;
+    /** The most columns of the facts when the panel is wide (stacked), 1 to 6. Default 4. */
+    maxColumns?: number;
+    /** The `Description`s. */
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * RecordDetails - the record's facts as one card: a title and a status, the
+ * `Description`s in a `DescriptionList` (one column in a side panel, up to
+ * `maxColumns` once the panel is stacked and wide) and a muted
+ * « Added on … · Updated on … » line under them, the dates written without
+ * seconds in `timeZone`. Made for `RecordPage`'s `details`.
+ */
+export declare function RecordDetails({ title, titleAs, status, created, updated, timeZone, maxColumns, children, className, }: RecordDetailsProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/record-page/record-page.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { ActivityContentProps } from '../app-shell/activity-content.js';
+export type RecordPageProps = Omit<ActivityContentProps, 'aside' | 'asideLabel' | 'asideLabelledBy' | 'asideStack' | 'asideClassName' | 'asideSide'> & {
+    /**
+     * The record's facts, usually a {@link RecordDetails}: a side panel from
+     * `asideFrom` (`xl` by default), sticky under the app bar, and stacked
+     * below it. A `complementary` landmark named by `detailsLabel`.
+     */
+    details?: ReactNode;
+    /** The side panel's accessible name (`aria-label`), such as "Item details". */
+    detailsLabel?: string;
+    /** The id of the heading inside the details that names the panel. */
+    detailsLabelledBy?: string;
+    /** Where the details go below `asideFrom`: `'after'` the content (default) or `'before'` it. */
+    detailsStack?: 'before' | 'after';
+    /** Classes for the side panel itself. */
+    detailsClassName?: string;
+};
+/**
+ * RecordPage - the page of one record: a header card (`header`, or `title`,
+ * `subtitle` and `actions`), the content, and the record's facts (`details`,
+ * a {@link RecordDetails}) as a side panel from `xl` that stacks after the
+ * content, or before it, below. It composes `ActivityContent`, so `width`,
+ * `notice`, `inset`, `titleAs` and the others work as there; only the side
+ * panel's props are renamed `details*`. A layout: no data, no state.
+ */
+export declare function RecordPage({ details, detailsLabel, detailsLabelledBy, detailsStack, detailsClassName, ...props }: RecordPageProps): import("react").JSX.Element;

package/dist/lib/components/ui/media/upload/index.d.ts

@@ -1,2 +1,3 @@
 export * from './network-upload-field/index.js';
 export * from './s3-upload-field/index.js';
+export * from './upload-error.js';

package/dist/lib/components/ui/media/upload/network-upload-field/network-upload-field.d.ts

@@ -7,7 +7,12 @@ export type NetworkUploadFieldProps = {
     accept?: string;
     maxSize?: number;
     maxFiles?: number;
-    onUpload: (file: File, onProgress?: (percent: number) => void) => Promise<string>;
+    /**
+     * Sends the file and resolves with the value to commit. `signal` aborts
+     * when the row is removed or the field unmounts: pass it to the request
+     * (`fetch`, `putFileWithProgress`) so a cancelled upload never lands.
+     */
+    onUpload: (file: File, onProgress?: (percent: number) => void, signal?: AbortSignal) => Promise<string>;
     onRemove?: (value: string) => void | Promise<void>;
     onError?: (file: File, error: unknown) => void;
     /**

package/dist/lib/components/ui/media/upload/network-upload-field/network-upload-field.errors.d.ts

@@ -0,0 +1,8 @@
+import { MaterialLocaleKey } from '../../../../../i18n/types.js';
+/**
+ * Translates an upload message: `useMaterialTranslation()`'s `t` fits. Without
+ * one, the English fallback is formatted.
+ */
+export type UploadMessageTranslate = (key: MaterialLocaleKey, fallback: string, values?: Record<string, string | number>) => string;
+export declare const inEnglish: UploadMessageTranslate;
+export declare function getUploadErrorMessage(error: unknown, t?: UploadMessageTranslate): string;

package/dist/lib/components/ui/media/upload/network-upload-field/network-upload-field.utils.d.ts

@@ -1,9 +1,4 @@
-import { MaterialLocaleKey } from '../../../../../i18n/types.js';
-/**
- * Translates an upload message: `useMaterialTranslation()`'s `t` fits. Without
- * one, the English fallback is formatted.
- */
-export type UploadMessageTranslate = (key: MaterialLocaleKey, fallback: string, values?: Record<string, string | number>) => string;
+import { UploadMessageTranslate } from './network-upload-field.errors.js';
 export type FileValidationError = 'accept' | 'max-size' | 'max-files';
 export type ValidateFileOptions = {
     accept?: string;
@@ -16,7 +11,6 @@ export declare function validateFile(file: File, options: ValidateFileOptions):
 export declare function getValidationMessage(error: FileValidationError, options: ValidateFileOptions, t?: UploadMessageTranslate): string;
 export declare function createFileId(): string;
 export declare function filenameFromValue(value: string): string;
-export declare function getUploadErrorMessage(error: unknown, t?: UploadMessageTranslate): string;
 /**
  * Whether a stored value looks like an image, judged by extension.
  *
@@ -43,3 +37,4 @@ export declare function isDisplayableSrc(value: string): boolean;
  * image is enough.
  */
 export declare function resolvePreviewUrl(value: string, resolveUrl?: (value: string) => string | null | undefined): string | undefined;
+export { getUploadErrorMessage, type UploadMessageTranslate, } from './network-upload-field.errors.js';

package/dist/lib/components/ui/media/upload/network-upload-field/use-start-upload.d.ts

@@ -1,15 +1,19 @@
 import { RefObject } from 'react';
 import { UploadItemActions } from './network-upload-field.slice.js';
 import { UploadMessageTranslate } from './network-upload-field.utils.js';
+type UploadFn = (file: File, onProgress?: (percent: number) => void, signal?: AbortSignal) => Promise<string>;
 /**
  * Runs `onUpload` for one local item: its progress, then the committed value
- * or the error. An item removed meanwhile (`removedIdsRef`) is left alone.
+ * or the error. An item removed meanwhile (`removedIdsRef`) has its request
+ * aborted (`controllersRef`) and is left alone: neither an error nor a value.
  */
-export declare function useStartUpload({ onUpload, onError, actions, removedIdsRef, commitUploaded, t, }: {
-    onUpload: (file: File, onProgress?: (percent: number) => void) => Promise<string>;
+export declare function useStartUpload({ onUpload, onError, actions, removedIdsRef, controllersRef, commitUploaded, t, }: {
+    onUpload: UploadFn;
     onError?: (file: File, error: unknown) => void;
     actions: UploadItemActions;
     removedIdsRef: RefObject<Set<string>>;
+    controllersRef: RefObject<Map<string, AbortController>>;
     commitUploaded: (value: string, file: File, replacesValue?: string) => void;
     t: UploadMessageTranslate;
 }): (uploadId: string, file: File, replacesValue?: string) => void;
+export {};

package/dist/lib/components/ui/media/upload/network-upload-field/use-upload-item-handlers.d.ts

@@ -10,6 +10,7 @@ export type UploadItemHandlerDeps = {
     onError?: (file: File, error: unknown) => void;
     actions: UploadItemActions;
     removedIdsRef: RefObject<Set<string>>;
+    controllersRef: RefObject<Map<string, AbortController>>;
     startUpload: (uploadId: string, file: File, replacesValue?: string) => void;
     addLocalItem: (file: File, options?: {
         replacesValue?: string;
@@ -18,7 +19,7 @@ export type UploadItemHandlerDeps = {
     t: UploadMessageTranslate;
 };
 /** What a row's Replace, Retry and Remove do, for a local item or a value. */
-export declare function useUploadItemHandlers({ disabled, accept, maxSize, onRemove, onError, actions, removedIdsRef, startUpload, addLocalItem, commitRemove, t, }: UploadItemHandlerDeps): {
+export declare function useUploadItemHandlers({ disabled, accept, maxSize, onRemove, onError, actions, removedIdsRef, controllersRef, startUpload, addLocalItem, commitRemove, t, }: UploadItemHandlerDeps): {
     handleItemReplace: (item: NetworkUploadDisplayItem, file: File) => void;
     handleItemRetry: (item: NetworkUploadDisplayItem) => void;
     handleItemRemove: (item: NetworkUploadDisplayItem) => void;

package/dist/lib/components/ui/media/upload/s3-upload-field/s3-upload-field.d.ts

@@ -1,10 +1,7 @@
 import { DistributiveOmit } from '../../../../../lib/distributive-omit.js';
 import { NetworkUploadFieldProps } from '../network-upload-field/network-upload-field.js';
-export type PresignedUploadTarget = {
-    uploadUrl: string;
-    publicUrl: string;
-    headers?: Record<string, string>;
-};
+import { PresignedUploadTarget } from './s3-upload-field.utils.js';
+export type { PresignedPostTarget, PresignedPutTarget, PresignedUploadTarget, } from './s3-upload-field.utils.js';
 export type S3UploadFieldProps = DistributiveOmit<NetworkUploadFieldProps, 'onUpload'> & {
     getPresignedUrl: (file: File) => Promise<PresignedUploadTarget>;
 };

package/dist/lib/components/ui/media/upload/s3-upload-field/s3-upload-field.utils.d.ts

@@ -1,5 +1,30 @@
 export type PutFileWithProgressOptions = {
     headers?: Record<string, string>;
     onProgress?: (percent: number) => void;
+    /** Aborts the request (`xhr.abort()`); the promise then rejects with an `UploadError` of kind `aborted` (named `AbortError`). */
+    signal?: AbortSignal;
 };
-export declare function putFileWithProgress(url: string, file: File, { headers, onProgress }?: PutFileWithProgressOptions): Promise<void>;
+/** A presigned PUT: the file is the request body. */
+export type PresignedPutTarget = {
+    method?: 'PUT';
+    uploadUrl: string;
+    publicUrl: string;
+    headers?: Record<string, string>;
+};
+/**
+ * A presigned POST policy: `fields` are sent first, in order, then the file
+ * as the last part, named `file`. `value` is what the field stores (the key).
+ */
+export type PresignedPostTarget = {
+    method: 'POST';
+    url: string;
+    fields: Record<string, string>;
+    value: string;
+};
+export type PresignedUploadTarget = PresignedPutTarget | PresignedPostTarget;
+/** Fields in insertion order, then the file last: S3 ignores what follows `file`. */
+export declare function buildPostFormData(fields: Record<string, string>, file: File): FormData;
+export declare function putFileWithProgress(url: string, file: File, { headers, onProgress, signal }?: PutFileWithProgressOptions): Promise<void>;
+export declare function postFileWithProgress(url: string, fields: Record<string, string>, file: File, { onProgress, signal, }?: Pick<PutFileWithProgressOptions, 'onProgress' | 'signal'>): Promise<void>;
+/** Sends `file` to a PUT or POST target and resolves with the value to store. */
+export declare function uploadToTarget(target: PresignedUploadTarget, file: File, onProgress?: (percent: number) => void, signal?: AbortSignal): Promise<string>;

package/dist/lib/components/ui/media/upload/upload-error.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Why a transport-level upload failed. The S3 helpers (`putFileWithProgress`,
+ * `postFileWithProgress`, `uploadToTarget`) reject with an `UploadError`, so a
+ * field can word the failure in the active language.
+ *
+ * - `status`: the storage answered a non-2xx `status`; `code` is the S3 error
+ *   code (`EntityTooLarge`) when the XML body carries one.
+ * - `network`: the request never completed (CORS, offline, blocked by CSP).
+ * - `aborted`: the request was cancelled through its `AbortSignal`. The error's
+ *   `name` is `AbortError`.
+ *
+ * `message` stays English, for logs and for code that reads it. An abort is an
+ * `UploadError` named `AbortError`, no longer a `DOMException`: test
+ * `error.name === 'AbortError'` or `error.kind === 'aborted'`, not `instanceof
+ * DOMException`. Across two copies of the package, use `isUploadError(e)`
+ * rather than `instanceof`.
+ */
+export type UploadErrorKind = 'status' | 'network' | 'aborted';
+export declare class UploadError extends Error {
+    /** Brand read by `isUploadError`, so a copy from another bundle is recognised. */
+    readonly isUploadError = true;
+    readonly kind: UploadErrorKind;
+    /** The HTTP status, for `kind: 'status'`. */
+    readonly status?: number;
+    /** The S3 error code, for `kind: 'status'` when the body carried one. */
+    readonly code?: string;
+    constructor(kind: UploadErrorKind, options?: {
+        status?: number;
+        code?: string;
+    });
+}
+/** Structural guard: an `UploadError`, even one made by another copy of the package. */
+export declare function isUploadError(error: unknown): error is UploadError;

package/dist/lib/components/ui/selection/autocomplete/autocomplete-enter.d.ts

@@ -0,0 +1,18 @@
+import { KeyboardEvent } from 'react';
+type Enter = {
+    freeSolo?: boolean;
+    /** Typed text that matches no option: the "Add" button shows. */
+    showAddButton: boolean;
+    open: boolean;
+    onAdd: () => void;
+};
+/**
+ * Enter in the input, as the WAI-ARIA combobox pattern has it: Enter acts on
+ * the list, so it never submits the surrounding form while it has something to
+ * do. A highlighted option is picked (Base UI), else a `freeSolo` text with no
+ * match is added; either way, as with an open list, the default action (the
+ * form's implicit submission) is cancelled. Enter on a closed list, or with
+ * nothing typed, still submits as a plain input does.
+ */
+export declare function enterHandler({ freeSolo, showAddButton, open, onAdd }: Enter): (event: KeyboardEvent<HTMLInputElement>) => void;
+export {};

package/dist/lib/components/ui/selection/autocomplete/partials/autocomplete-chip-input.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { AutocompleteOption, AutocompleteProps } from '../types.js';
+import { AutocompleteChipsProps, AutocompleteOption, AutocompleteProps } from '../types.js';
 /** The chips box: a chip for each selected option, then the input. */
 export declare function AutocompleteChipInput<T extends AutocompleteOption>({ id, labelId, helperId, values, getOptionValue, getOptionLabel, ...props }: AutocompleteProps<T> & {
     id: string;
@@ -8,6 +8,7 @@ export declare function AutocompleteChipInput<T extends AutocompleteOption>({ id
     values: string[];
     anchor: RefObject<HTMLDivElement | null>;
     onRemove: (value: string) => void;
+    onInputKeyDown?: AutocompleteChipsProps<T>['onInputKeyDown'];
     getOptionValue: (option: T) => string;
     getOptionLabel: (option: T) => string;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/selection/autocomplete/partials/autocomplete-text-input.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { AutocompleteOption, AutocompleteProps } from '../types.js';
+import { AutocompleteChipsProps, AutocompleteOption, AutocompleteProps } from '../types.js';
 /**
  * `display="text"`: the single value is the input's own text, in the field
  * box, with the clear button and the chevron at its end. The text is selected
@@ -12,4 +12,5 @@ export declare function AutocompleteTextInput<T extends AutocompleteOption>({ id
     helperId: string;
     /** The option picked, for its avatar before the text. */
     selected: T | null;
+    onInputKeyDown?: AutocompleteChipsProps<T>['onInputKeyDown'];
 }): import("react").JSX.Element;

package/dist/lib/components/ui/selection/autocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import { FocusEvent, ReactNode, RefObject } from 'react';
+import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
 import { InputGroupFieldProps } from '../../fields/input-group-field/input-group-field.js';
 export type AutocompleteOption = {
     value: string;
@@ -111,6 +111,8 @@ export type AutocompleteChipsProps<T extends AutocompleteOption> = AutocompleteP
     selected?: T | null;
     /** Focus left an element of the field (`text` display restores the label). */
     onFieldBlur?: (event: FocusEvent<HTMLElement>) => void;
+    /** Enter in the input: picks or adds, and keeps the form from submitting. */
+    onInputKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
     /** What the field's polite live region says about the list. */
     announcement?: ReactNode;
     /** The list, when it sits in the field's flow (in a dialog). */

package/dist/lib/components/ui/widgets/chat/chat-conversation-item.d.ts

@@ -3,7 +3,13 @@ import { StatusTone } from '../../display/status-indicator/status-indicator.js';
 export type ChatConversationItemProps = {
     avatarSrc?: string;
     avatarFallback?: ReactNode;
+    /**
+     * The conversation's name. A string also becomes the `title` attribute of
+     * the clipped line, so the full text stays readable on hover.
+     */
     title: ReactNode;
+    /** The full text of a clipped `title` that is not a string (a node). */
+    titleText?: string;
     preview?: ReactNode;
     timestamp?: ReactNode;
     unreadCount?: number;
@@ -13,5 +19,5 @@ export type ChatConversationItemProps = {
     status?: StatusTone;
     /** Shows a typing line instead of the preview. */
     isTyping?: boolean;
-} & Omit<ComponentProps<'button'>, 'children'>;
-export declare function ChatConversationItem({ avatarSrc, avatarFallback, title, preview, timestamp, unreadCount, isActive, isLoading, status, isTyping, className, ...props }: ChatConversationItemProps): import("react").JSX.Element;
+} & Omit<ComponentProps<'button'>, 'children' | 'title'>;
+export declare function ChatConversationItem({ avatarSrc, avatarFallback, title, titleText, preview, timestamp, unreadCount, isActive, isLoading, status, isTyping, className, ...props }: ChatConversationItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/chat/chat-markdown.d.ts

@@ -2,5 +2,9 @@ import { ComponentProps } from 'react';
 export { sanitizeHref } from '../../display/markdown/markdown.utils.js';
 export type ChatMarkdownProps = {
     content: string;
+    /** KaTeX maths, default `true`; see `Markdown`. */
+    math?: boolean;
+    /** Mermaid diagrams, default `true`; see `Markdown`. */
+    mermaid?: boolean;
 } & Omit<ComponentProps<'div'>, 'children'>;
 export declare function ChatMarkdown({ content, className, ...props }: ChatMarkdownProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/chat/chat-message-list.d.ts

@@ -1,4 +1,5 @@
 import { ComponentProps, ReactNode } from 'react';
+import { ScrollArea } from '../../primitives/scroll-area/scroll-area.js';
 import { ChatDensity, ChatLayout } from './chat-layout-context.js';
 export type ChatMessageListProps = {
     isTyping?: boolean;
@@ -14,5 +15,11 @@ export type ChatMessageListProps = {
     /** `comfortable` (default) or `compact`, for every `ChatMessage` inside. */
     density?: ChatDensity;
     children?: ReactNode;
+    /**
+     * Attributes for the scrolling element itself. It is a tab stop by default
+     * (`tabIndex={0}`), so a keyboard reader can scroll a transcript that holds
+     * nothing focusable; pass `tabIndex={-1}` to opt out.
+     */
+    viewportProps?: ComponentProps<typeof ScrollArea>['viewportProps'];
 } & Omit<ComponentProps<'div'>, 'children' | 'dir'>;
-export declare function ChatMessageList({ isTyping, typingLabel, typingAvatar, emptyState, scrollToBottomLabel, showScrollToBottom, bottomThreshold, layout, density, children, className, ...props }: ChatMessageListProps): import("react").JSX.Element;
+export declare function ChatMessageList({ isTyping, typingLabel, typingAvatar, emptyState, scrollToBottomLabel, showScrollToBottom, bottomThreshold, layout, density, children, className, viewportProps, ...props }: ChatMessageListProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/chat/index.d.ts

@@ -15,4 +15,6 @@ export * from './chat-typing-indicator.js';
 export * from './chat-widget.js';
 export * from './partials/chat-composer-attachment-chip.js';
 export * from './partials/chat-composer-attachments.js';
+export * from './proposal/chat-action-proposal.js';
+export * from './proposal/chat-tool-activity.js';
 export * from './use-chat-composer-attachments.js';

package/dist/lib/components/ui/widgets/chat/partials/chat-conversation-item-text.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 /** The title, timestamp, preview (or typing line) and unread badge of a conversation row. */
-export declare function ChatConversationItemText({ title, preview, timestamp, unreadCount, isActive, isTyping, }: {
+export declare function ChatConversationItemText({ title, titleText, preview, timestamp, unreadCount, isActive, isTyping, }: {
     title: ReactNode;
+    titleText?: string;
     preview?: ReactNode;
     timestamp?: ReactNode;
     unreadCount?: number;

package/dist/lib/components/ui/widgets/chat/partials/chat-empty-thread.d.ts

@@ -0,0 +1,2 @@
+/** The default empty state of a message list. */
+export declare function ChatEmptyThread(): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/chat/proposal/chat-action-proposal-parts.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode, RefObject } from 'react';
+import { ChatActionProposalStatus } from './chat-action-proposal.rules.js';
+export declare function ProposalFailure({ code, message, }: {
+    code?: string;
+    message?: ReactNode;
+}): import("react").JSX.Element | null;
+export declare function ProposalButtons({ actions, onConfirm, onReject, confirmLabel, rejectLabel, busy, locked, }: {
+    actions?: ReactNode;
+    onConfirm?: () => void;
+    onReject?: () => void;
+    confirmLabel?: string;
+    rejectLabel?: string;
+    busy: boolean;
+    locked: boolean;
+}): import("react").JSX.Element;
+export declare function Deadline({ at, status, }: {
+    at: Date | string | number;
+    status: ChatActionProposalStatus;
+}): import("react").JSX.Element | null;
+export declare function ProposalHeader({ toolLabel, status, statusRef, }: {
+    toolLabel?: ReactNode;
+    status: ChatActionProposalStatus;
+    statusRef: RefObject<HTMLSpanElement | null>;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/chat/proposal/chat-action-proposal.d.ts

@@ -0,0 +1,39 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ChatActionProposalStatus } from './chat-action-proposal.rules.js';
+export type { ChatActionProposalStatus };
+export type ChatActionProposalProps = {
+    /** What the assistant wants to do, in a few words. */
+    title: ReactNode;
+    /** The effect in plain words: what will change, and for whom. */
+    summary?: ReactNode;
+    /** The tool behind the action (a name, a badge, an icon with a name). */
+    toolLabel?: ReactNode;
+    /** Extra detail under the summary (a list of the records touched). */
+    children?: ReactNode;
+    /** The last moment to answer; written in the active language. */
+    deadline?: Date | string | number;
+    /** Default `pending`. Only `pending` shows the buttons. */
+    status?: ChatActionProposalStatus;
+    /** A `failed` proposal: the code the tool returned, shown beside the message. */
+    failureCode?: string;
+    /** A `failed` proposal: why, in words. */
+    failureMessage?: ReactNode;
+    /** The confirm button. With neither this nor `actions`, no buttons. */
+    onConfirm?: () => void;
+    /** The reject button. */
+    onReject?: () => void;
+    confirmLabel?: string;
+    rejectLabel?: string;
+    /** An answer is being sent: both buttons are disabled and Confirm shows its spinner. */
+    busy?: boolean;
+    /** Disables both buttons without the spinner (a read-only viewer). */
+    disabled?: boolean;
+    /** Replaces the two buttons (a split button, a reason dialog's trigger). Shown while `pending` only. */
+    actions?: ReactNode;
+} & Omit<ComponentProps<'section'>, 'title' | 'children'>;
+/**
+ * A card in a chat thread for an action an assistant proposes and the user
+ * confirms or rejects. Once answered, the focus moves to the status line so
+ * a screen reader reads the outcome.
+ */
+export declare function ChatActionProposal({ title, summary, toolLabel, children, deadline, status, failureCode, failureMessage, onConfirm, onReject, confirmLabel, rejectLabel, busy, disabled, actions, className, ...props }: ChatActionProposalProps): import("react").JSX.Element;