@nxgt/material 3.70.0 → 3.72.0

package/dist/lib/components/ui/actions/fab/fab-dock.d.ts

@@ -13,5 +13,10 @@ export type FabDockProps = ComponentProps<'div'> & {
  * (`env(safe-area-inset-bottom)`) and above a docked bar that sets
  * `--nxgt-media-dock` (0 otherwise). Several FABs stack, the main one last.
  * While an expressive `FabMenu` in it is open, a light scrim covers the page.
+ *
+ * While a viewport dock shows its button it sets `--fab-dock-inset` on the
+ * document: the space the button covers at the end of the page. Pad the
+ * scroller with `padding-block-end: var(--fab-dock-inset, 0px)`. The
+ * property is removed where the dock is hidden (`display: none`).
  */
-export declare function FabDock({ contained, className, ...props }: FabDockProps): import("react").JSX.Element;
+export declare function FabDock({ contained, className, ref, ...props }: FabDockProps): import("react").JSX.Element;

package/dist/lib/components/ui/collections/data-table/select-checkbox.d.ts

@@ -16,8 +16,9 @@ export declare const SELECT_CHECKBOX_CLASS = "relative before:absolute before:to
 export declare const SELECT_CHECKBOX_LABEL_CLASS = "ms-2 me-3 flex w-fit items-center justify-center pointer-coarse:size-11 pointer-coarse:-ms-1 pointer-coarse:me-2 pointer-coarse:-my-2";
 /** The same label with its text beside the box (`SelectAllCheckbox`'s
  * `visibleLabel`): on a coarse pointer it is as tall and at least as wide as
- * the 44px box, the text inside it, so a tap on the words toggles the box. */
-export declare const SELECT_CHECKBOX_LABELLED_CLASS = "ms-2 me-3 flex w-fit items-center gap-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 pointer-coarse:-ms-1 pointer-coarse:me-2 pointer-coarse:-my-2 pointer-coarse:ps-3.5 pointer-coarse:pe-2";
+ * the 44px box, the text inside it, so a tap on the words toggles the box. It
+ * shrinks with its row, the text truncating (#2168). */
+export declare const SELECT_CHECKBOX_LABELLED_CLASS = "ms-2 me-3 flex w-fit max-w-full min-w-0 items-center gap-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 pointer-coarse:-ms-1 pointer-coarse:me-2 pointer-coarse:-my-2 pointer-coarse:ps-3.5 pointer-coarse:pe-2";
 /** The `select` column's header: disabled while the table loads, when the
  * rows it would select are inert, and when no row on the page can be
  * selected (`enableRowSelection`). Its state counts only selectable rows. */

package/dist/lib/components/ui/collections/filter/use-filter-field-config.d.ts

@@ -4877,6 +4877,7 @@ export declare function useFilterFieldConfig({ field, value, onChange, error, di
         maxSize?: number | undefined;
         helperText?: import('react').ReactNode;
         onRemove?: ((value: string) => void | Promise<void>) | undefined;
+        acceptLabel?: string | undefined;
         maxFiles?: number | undefined;
         resolveUrl?: ((value: string) => string | null | undefined) | undefined;
         onUpload: (file: File, onProgress?: (percent: number) => void, signal?: AbortSignal) => Promise<string>;
@@ -5211,6 +5212,7 @@ export declare function useFilterFieldConfig({ field, value, onChange, error, di
         error?: boolean;
         disabled?: boolean;
         accept?: string;
+        acceptLabel?: string;
         maxSize?: number;
         maxFiles?: number;
         onUpload: (file: File, onProgress?: (percent: number) => void, signal?: AbortSignal) => Promise<string>;
@@ -5508,6 +5510,7 @@ export declare function useFilterFieldConfig({ field, value, onChange, error, di
         error?: boolean;
         disabled?: boolean;
         accept?: string;
+        acceptLabel?: string;
         maxSize?: number;
         maxFiles?: number;
         onUpload: (file: File, onProgress?: (percent: number) => void, signal?: AbortSignal) => Promise<string>;

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

@@ -8,6 +8,7 @@ export * from './list-empty/index.js';
 export * from './list-pane/index.js';
 export * from './page-footer/index.js';
 export * from './pagination/index.js';
+export * from './record-actions-menu/index.js';
 export * from './row-menu/index.js';
 export * from './server-table/index.js';
 export * from './tree/index.js';

package/dist/lib/components/ui/collections/record-actions-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './record-actions-menu.js';
+export * from './use-record-actions.js';

package/dist/lib/components/ui/collections/record-actions-menu/record-actions-dialogs.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { ConfirmRefusalContext } from '../../feedback/confirm-dialog/confirm-dialog.js';
+import { ArchivePolicy, RecordConsequence } from './record-actions-rules.js';
+import { useRecordActions } from './use-record-actions.js';
+/**
+ * The confirm dialogs of `RecordActionsMenu`: archive (under `'confirm'`) and
+ * delete. They stay mounted while open, even once the record's state no
+ * longer offers their action, so closing returns the focus to the trigger.
+ */
+export declare function RecordActionsDialogs({ actions, archivePolicy, consequence, refusal, }: {
+    actions: ReturnType<typeof useRecordActions>;
+    archivePolicy: ArchivePolicy;
+    consequence?: RecordConsequence;
+    refusal?: (refusal: ConfirmRefusalContext) => ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/collections/record-actions-menu/record-actions-menu.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { ConfirmRefusalContext } from '../../feedback/confirm-dialog/confirm-dialog.js';
+import { RowMenuItem, RowMenuTriggerAttrs } from '../row-menu/row-menu.js';
+import { ArchivePolicy, RecordConsequence, RecordIntent, RecordSuccessActions } from './record-actions-rules.js';
+import { RecordActionsMessages } from './use-record-actions.js';
+export type { ArchivePolicy, ConsequenceIntent, RecordConsequence, RecordIntent, RecordSuccessActions, } from './record-actions-rules.js';
+export type { RecordActionsMessages } from './use-record-actions.js';
+export type RecordActionsMenuProps = {
+    /** What the record is called: the button's name ("Actions for {name}"), the toasts' and the dialog's text. */
+    name: string;
+    /** `true` offers Restore, then Delete permanently; `false` offers Archive. */
+    archived: boolean;
+    /** Whether the user may do an action; the ones refused are left out. Everything by default. */
+    can?: (intent: RecordIntent) => boolean;
+    /**
+     * How Archive goes: `'undo'` (default) archives at once with an Undo toast;
+     * `'confirm'` asks in a dialog first, and its success toast has no Undo.
+     */
+    archivePolicy?: ArchivePolicy;
+    /**
+     * A note of what the action entails, shown in the confirm dialog (delete,
+     * and archive under `'confirm'`): one for all, or one per intent.
+     */
+    consequence?: RecordConsequence;
+    /**
+     * An action on the success toast of an archive or a restore, such as a
+     * "View archive" link. Beside Undo it is shown in the toast's text.
+     */
+    successAction?: RecordSuccessActions;
+    /**
+     * Does the action. A rejection's message is shown in a toast for archive
+     * and restore, and inside the dialog for delete (and a confirmed archive).
+     * Reject with an `ActionRefusal` to add an action to that message.
+     */
+    send: (intent: RecordIntent) => Promise<unknown>;
+    /**
+     * Runs once an action succeeded (after an archive's Undo too, with
+     * `'restore'`): refresh a list, or leave a deleted record's route.
+     */
+    onDone?: (intent: RecordIntent) => void;
+    /** Items of your own, before the record's actions. */
+    items?: RowMenuItem[];
+    /** Menu content of your own (submenus, groups), above `items`. */
+    children?: ReactNode;
+    /** Wording overrides, for grammatical agreement; `{name}` is the record's name. */
+    messages?: RecordActionsMessages;
+    /**
+     * Renders a refusal inside the delete dialog and the archive dialog
+     * (`archivePolicy="confirm"`), instead of `ConfirmDialog`'s default (the
+     * message, and the `ActionRefusal`'s details and action when it has them).
+     */
+    refusal?: (refusal: ConfirmRefusalContext) => ReactNode;
+    /** As `RowMenu`'s. */
+    rowId?: string;
+    triggerProps?: RowMenuTriggerAttrs;
+    className?: string;
+};
+/**
+ * The archive / restore / delete menu of a record, over `RowMenu`.
+ *
+ * - Archive runs at once and shows a toast with an Undo action that stays
+ *   until dismissed; Undo restores.
+ * - With `archivePolicy="confirm"` Archive asks first and leaves no Undo.
+ * - Restore runs at once.
+ * - Delete permanently is offered only for an archived record, after a
+ *   separator, in the error colour, and always asks first; a refusal stays in
+ *   the dialog, whose confirm button is then locked.
+ *
+ * It renders nothing when `can` leaves no action and there is no item of
+ * your own.
+ */
+export declare function RecordActionsMenu({ name, archived, can, send, onDone, items, children, messages, refusal, archivePolicy, consequence, successAction, rowId, triggerProps, className, }: RecordActionsMenuProps): import("react").JSX.Element | null;

package/dist/lib/components/ui/collections/record-actions-menu/record-actions-rules.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+import { RecordAction } from '../../feedback/confirm-dialog/action-refusal.js';
+/** What a record's menu can do. */
+export type RecordIntent = 'archive' | 'restore' | 'delete';
+/** Whether Archive applies at once with an Undo toast, or asks first in a dialog. */
+export type ArchivePolicy = 'undo' | 'confirm';
+/** The actions a success toast offers, per intent (delete leaves no toast: the record is gone). */
+export type RecordSuccessActions = Partial<Record<'archive' | 'restore', RecordAction>>;
+/** The intents whose confirm dialog can carry a note (restore has no dialog). */
+export type ConsequenceIntent = 'archive' | 'delete';
+/** A note of what an action entails: one for every dialog, or one per intent (`archive`, `delete`). */
+export type RecordConsequence = ReactNode | Partial<Record<ConsequenceIntent, ReactNode>>;
+/**
+ * The note for `intent`: `consequence` itself, or its entry when it is a map
+ * of intents (a plain object, not a React element or an array).
+ */
+export declare function consequenceFor(consequence: RecordConsequence, intent: ConsequenceIntent): ReactNode;
+/** Which record actions the menu offers: an archived record is restored or deleted, any other archived. */
+export declare function allowedIntents(archived: boolean, can?: (intent: RecordIntent) => boolean): RecordIntent[];
+/** The message of a refusal, or `fallback` when it carries none. */
+export declare function messageOf(thrown: unknown, fallback: string): string;
+/** What the actions tell the user, apart from the delete dialog (which the dialog itself shows). */
+export type RecordNotifier = {
+    /** The record is archived; `undo` restores it (absent when the archive was confirmed first). */
+    archived: (outcome: {
+        undo?: () => void;
+        action?: RecordAction;
+    }) => void;
+    restored: (action?: RecordAction) => void;
+    /** An archive, a restore or an undo was refused; `action` is the one the refusal carries. */
+    failed: (message: string, intent: RecordIntent, action?: RecordAction) => void;
+};
+export type RecordActionsDeps = {
+    send: (intent: RecordIntent) => Promise<unknown>;
+    onDone?: (intent: RecordIntent) => void;
+    notify: RecordNotifier;
+    /** `'confirm'` archives only after the user confirmed: no Undo then. */
+    archivePolicy?: ArchivePolicy;
+    successAction?: RecordSuccessActions;
+    /**
+     * Runs the Undo through the caller's flight (so the menu is busy
+     * meanwhile); the Undo runs on its own when absent. The task resolves
+     * `true` when the record was restored.
+     */
+    runUndo?: (task: () => Promise<boolean>) => Promise<unknown>;
+    /** The text of a refusal that has no message. */
+    fallbackMessage: string;
+    /** Where a throwing `onDone` is reported. `console.error` by default. */
+    reportError?: (error: unknown) => void;
+};
+/** Runs `task` unless a previous one has not ended: a second call returns `undefined`. */
+export declare function singleFlight(): <T>(task: () => Promise<T>) => Promise<T | undefined>;
+/**
+ * The actions' logic, free of React. `archive` and `restore` run at once and
+ * tell the outcome through `notify`; `remove` lets a refusal throw so the
+ * confirm dialog shows it. `onDone` runs after the outcome is shown, and a
+ * throw of it is reported, never taken for a refusal.
+ */
+export declare function createRecordActions(deps: RecordActionsDeps): {
+    /** Resolves `true` when the record was archived. */
+    archive(): Promise<boolean>;
+    /** The confirmed archive: a refusal throws, for the dialog to show. */
+    archiveConfirmed(): Promise<void>;
+    /** Resolves `true` when the record was restored. */
+    restore(): Promise<boolean>;
+    remove(): Promise<void>;
+    undo: () => Promise<void>;
+};

package/dist/lib/components/ui/collections/record-actions-menu/record-actions-words.d.ts

@@ -0,0 +1,52 @@
+import { RecordNotifier } from './record-actions-rules.js';
+/**
+ * The words of a record's actions, for grammatical agreement in your
+ * language. `{name}` is replaced by the record's name. Anything left out is
+ * the translated `material.record-actions.*` default.
+ */
+export type RecordActionsMessages = Partial<{
+    /** Menu items. */
+    archive: string;
+    restore: string;
+    delete: string;
+    /** Toasts: "{name} archived", "{name} restored", the Undo button, a refused action. */
+    archived: string;
+    restored: string;
+    undo: string;
+    failed: string;
+    /** The archive dialog (`archivePolicy="confirm"`). */
+    archiveTitle: string;
+    archiveDescription: string;
+    archiveConfirm: string;
+    /** The delete dialog. */
+    deleteTitle: string;
+    deleteDescription: string;
+    deleteConfirm: string;
+}>;
+/** The words of the menu, the dialog and the toasts, from `messages` or the translated defaults. */
+export declare function useRecordWords(name: string, messages?: RecordActionsMessages): {
+    text: {
+        archive: string;
+        restore: string;
+        delete: string;
+        archiveTitle: string;
+        archiveDescription: string;
+        archiveConfirm: string;
+        deleteTitle: string;
+        deleteDescription: string;
+        deleteConfirm: string;
+    };
+    toastText: {
+        archived: string;
+        restored: string;
+        undo: string;
+        failed: string;
+    };
+};
+export type RecordToastText = ReturnType<typeof useRecordWords>['toastText'];
+/**
+ * The outcome toasts. A toast has one button: the archive's is Undo, and a
+ * success action then goes in the description as a link; without Undo (or for
+ * a restore or a refusal) the action is the toast's button.
+ */
+export declare function toastNotifier(toastText: RecordToastText): RecordNotifier;

package/dist/lib/components/ui/collections/record-actions-menu/use-record-actions.d.ts

@@ -0,0 +1,51 @@
+import { ArchivePolicy, RecordIntent, RecordSuccessActions } from './record-actions-rules.js';
+import { RecordActionsMessages } from './record-actions-words.js';
+export type { RecordActionsMessages } from './record-actions-words.js';
+export type UseRecordActionsOptions = {
+    name: string;
+    archived: boolean;
+    can?: (intent: RecordIntent) => boolean;
+    send: (intent: RecordIntent) => Promise<unknown>;
+    onDone?: (intent: RecordIntent) => void;
+    messages?: RecordActionsMessages;
+    /** `'confirm'` asks in a dialog before archiving, with no Undo. Default `'undo'`. */
+    archivePolicy?: ArchivePolicy;
+    /** An action on the success toast of an archive or a restore. */
+    successAction?: RecordSuccessActions;
+};
+/**
+ * The logic of `RecordActionsMenu`: which actions are offered, the running
+ * one, the dialogs' state and the words. Archive and restore run at
+ * once and report through toasts (an archive's Undo stays until dismissed);
+ * delete goes through the confirm dialog, whose `onConfirm` is `deleteConfirmed`.
+ */
+export declare function useRecordActions({ name, archived, can, send, onDone, messages, archivePolicy, successAction, }: UseRecordActionsOptions): {
+    intents: RecordIntent[];
+    running: ("archive" | "restore") | null;
+    /** The delete dialog's open state. */
+    confirmingDelete: boolean;
+    setConfirmingDelete: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    /** The archive dialog's open state (`archivePolicy="confirm"`). */
+    confirmingArchive: boolean;
+    setConfirmingArchive: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    /** Archives the first time `archive` is chosen: asks first under `'confirm'`, else runs at once. */
+    chooseArchive: () => void;
+    run: (intent: "archive" | "restore") => Promise<void>;
+    /** The archive toast's Undo: restores through the same single flight, so `running` is set meanwhile. */
+    runUndo: () => Promise<void>;
+    /** The archive dialog's `onConfirm`: sends `archive`, throws a refusal. */
+    archiveConfirmed: () => Promise<void>;
+    /** The delete dialog's `onConfirm`: sends `delete`, throws a refusal. */
+    deleteConfirmed: () => Promise<void>;
+    text: {
+        archive: string;
+        restore: string;
+        delete: string;
+        archiveTitle: string;
+        archiveDescription: string;
+        archiveConfirm: string;
+        deleteTitle: string;
+        deleteDescription: string;
+        deleteConfirm: string;
+    };
+};

package/dist/lib/components/ui/collections/record-actions-menu/use-record-flight.d.ts

@@ -0,0 +1,16 @@
+type Flight = 'archive' | 'restore';
+/**
+ * The record's one action in flight: an archive, a restore or an Undo. A
+ * second archive or restore started while one is pending is ignored;
+ * `running` names the pending one. An Undo is queued instead: it runs once the
+ * pending action ends, and only if the record is archived by then, as the
+ * settled outcomes tell (a failed archive or a successful restore leaves
+ * nothing to undo): the hook owns that state, so a late update of `archived`
+ * does not matter. Another Undo while one waits or runs is ignored.
+ */
+export declare function useRecordFlight(archived: boolean): {
+    running: Flight | null;
+    inFlight: (intent: Flight, task: () => Promise<unknown>) => Promise<void | undefined>;
+    runUndo: (task: () => Promise<boolean>) => Promise<void>;
+};
+export {};

package/dist/lib/components/ui/collections/row-menu/row-menu-column.d.ts

@@ -19,6 +19,10 @@ export type RowMenuColumnOptions<T extends RowData> = {
  * (`material.row-menu.column`). Call it once, outside the render (or in a
  * `useMemo`), so the cells keep their identity and a dialog opened from an
  * item is not remounted with the table.
+ *
+ * A row whose `items(row)` is empty (or absent) and whose `menu(row)` is
+ * `null`, `undefined` or `false` (`cond && <X />`) renders nothing in its cell;
+ * the column keeps its width. A fragment counts as content, even an empty one.
  */
 export declare function rowMenuColumn<T extends RowData>({ label, items, menu, id, className, }: RowMenuColumnOptions<T>): import('@tanstack/table-core').DisplayColumnDef<{
     columnFilteringFeature: import('@tanstack/table-core').TableFeature;

package/dist/lib/components/ui/collections/row-menu/row-menu.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { RowMenuTriggerProps } from './row-menu-trigger.js';
-/** One action of a `RowMenu`. */
+/** One action of a `RowMenu`. When any item has an `icon`, those without one are inset to keep the labels aligned. */
 export type RowMenuItem = {
     /** The key; the label when it is a string. */
     id?: string;

package/dist/lib/components/ui/collections/server-table/partials/server-table-band-classes.d.ts

@@ -15,13 +15,15 @@ export declare const SERVER_TABLE_SEARCH_INLINE_CLASS = "max-md:order-none max-m
 /** Below 768px with a list in cards or tiles (#1719): the band's second row,
  * after the search's (both are `order-last`, the DOM order breaks the tie):
  * the list bar's start group (the room left), then the sort, "Filters (N)"
- * and the page's actions. */
-export declare const SERVER_TABLE_PHONE_ROW_CLASS = "order-last flex min-w-0 basis-full items-center gap-1 md:hidden";
-/** The row's start slot: "Select all", or the count and "Clear selection". */
-export declare const SERVER_TABLE_PHONE_ROW_START_CLASS = "min-w-0 flex-1";
+ * and the page's actions. The row wraps: wide actions drop to a line of their own
+ * (#2168) rather than crushing the start group. */
+export declare const SERVER_TABLE_PHONE_ROW_CLASS = "order-last flex min-w-0 basis-full flex-wrap items-center gap-1 md:hidden";
+/** The row's start slot: "Select all", or the count and "Clear selection".
+ * Never under 6rem (the box and a clipped label); a wider end wraps below. */
+export declare const SERVER_TABLE_PHONE_ROW_START_CLASS = "min-w-24 flex-1";
 /** The row's end: the sort slot (`contents`, its child is the item), then
  * "Filters (N)" and the actions. */
-export declare const SERVER_TABLE_PHONE_ROW_END_CLASS = "flex shrink-0 items-center gap-1";
+export declare const SERVER_TABLE_PHONE_ROW_END_CLASS = "flex max-w-full shrink-0 items-center gap-1";
 /** The bar's search floor in the band: from md the band lowers it to 8rem,
  * though `SERVER_TABLE_BAR_CLASS` (shared with Vue, so left as is) says 10rem:
  * the search gives up that much more room before "Add filter" wraps alone to

package/dist/lib/components/ui/collections/server-table/partials/server-table-column-sorting.d.ts

@@ -0,0 +1,7 @@
+import { RowData } from '@tanstack/react-table';
+import { DataTableProps } from '../../data-table/types.js';
+type Columns<T extends RowData> = DataTableProps<T>['columns'];
+/** Without `sorting` the URL holds no sort, so no column offers one (neither
+ * the header's menu nor the cards' sort band), unless it sets `enableSorting`. */
+export declare function defaultColumnSorting<T extends RowData>(columns: Columns<T>, hasSorting: boolean): Columns<T>;
+export {};

package/dist/lib/components/ui/collections/server-table/types.d.ts

@@ -35,7 +35,9 @@ export type ServerTableProps<T extends RowData> = PassedThrough<T> & ServerTable
     pageSize: number;
     /** A row's id: the selection's key. */
     getRowId: (row: T) => string;
-    /** `createSorting(...)`: the headers' sort, read from and written to the URL. */
+    /** `createSorting(...)`: the headers' sort, read from and written to the URL.
+     * Without it, no column is sortable (the server sorts, so pass `sorting`
+     * to let people sort), and the phone list bar shows only for selection. */
     sorting?: Pick<TableSorting, 'readSort' | 'withSort'>;
     /** The list's Filter, in the band and in the URL. */
     filter?: ServerTableFilter;

package/dist/lib/components/ui/display/markdown/markdown.d.ts

@@ -3,5 +3,16 @@ import { EmojiItem } from '../../widgets/emoji/types.js';
 export type MarkdownProps = {
     children: string;
     emojis?: EmojiItem[];
+    /**
+     * Render `$...$` and `$$...$$` with KaTeX. Default `true`. Under a strict CSP
+     * it needs nothing on a client render; server-rendered math needs
+     * `style-src-attr 'unsafe-inline'` (csp.md).
+     */
+    math?: boolean;
+    /**
+     * Draw ```` ```mermaid ```` fences as diagrams. Default `true`. Off, they
+     * show as code blocks and `mermaid` is never loaded.
+     */
+    mermaid?: boolean;
 } & Omit<ComponentProps<'div'>, 'children'>;
-export declare function Markdown({ children, emojis, className, ...props }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, emojis, math, mermaid, className, ...props }: MarkdownProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/markdown/markdown.utils.d.ts

@@ -1 +1,3 @@
 export declare function sanitizeHref(href: string | undefined): string | null;
+/** An absolute `http(s):` or protocol-relative URL: it leaves the page. */
+export declare function isExternalHref(href: string): boolean;

package/dist/lib/components/ui/display/markdown/mermaid-csp-scope.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Opens the scope of the render of diagram `id` (the id given to
+ * `mermaid.render`). Returns its `end`, safe to call more than once: call it
+ * when the render settles and when the component unmounts.
+ */
+export declare function beginMermaidScope(id: string, nonce: string | undefined): () => void;
+/** Runs `render` inside the scope of diagram `id`. */
+export declare function withMermaidCspScope<T>(id: string, nonce: string | undefined, render: () => Promise<T>): Promise<T>;

package/dist/lib/components/ui/display/markdown/mermaid-markup.d.ts

@@ -0,0 +1,20 @@
+/** The name `style` is parked under while a strict CSP would report it. */
+export declare const PARKED_STYLE = "data-nxgt-style";
+/** Renames the attribute `from` to `to` in every start tag of `markup`. */
+export declare function renameAttribute(markup: string, from: string, to: string): string;
+/** `style` attributes parked, so parsing the markup reports nothing. */
+export declare function parkStyles(markup: string): string;
+/** The reverse, for the sanitised SVG that becomes an image. */
+export declare function unparkStyles(markup: string): string;
+/**
+ * mermaid serialises its labels as HTML (`<img src=…>`), which is not
+ * well-formed XML: as an image the SVG would not load. Self-closes the void
+ * elements, drops `<img>` and unparks the `style` attributes.
+ */
+export declare function toImageSvg(markup: string): string;
+/**
+ * An `<img>` in a label: mermaid draws the diagram in the page first, where the
+ * request would go out (and be reported by `img-src`), and the final image
+ * could not show it. Removed from the source before the render.
+ */
+export declare function stripChartImages(chart: string): string;

package/dist/lib/components/ui/display/markdown/partials/markdown-code.d.ts

@@ -1,2 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
-export declare function MarkdownCode({ className, children, ...props }: ComponentPropsWithoutRef<'code'>): import("react").JSX.Element;
+export declare function MarkdownCodeNoMermaid(props: ComponentPropsWithoutRef<'code'>): import("react").JSX.Element;
+export declare function MarkdownCode({ className, children, mermaid, node: _node, ...props }: ComponentPropsWithoutRef<'code'> & {
+    mermaid?: boolean;
+    node?: unknown;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/action-refusal.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/** An action offered beside a message: a link (`href`, a full page load) or a handler (`onAction`, for client-side navigation), with its label. `onAction` wins when both are given. */
+export type RecordAction = {
+    label: string;
+    href?: string;
+    onAction?: () => void;
+};
+/**
+ * A refusal that carries an action ("Remove the 3 invoices", "View what
+ * blocks it") and optional details. An `onConfirm` (or a record action's `send`) rejects with it; a plain
+ * `Error` keeps showing its message only.
+ */
+export declare class ActionRefusal extends Error {
+    readonly action: RecordAction;
+    readonly details?: ReactNode;
+    constructor(message: string, options: {
+        action: RecordAction;
+        details?: ReactNode;
+    });
+}
+/** Whether `thrown` is an `ActionRefusal` (also one from another copy of the package). */
+export declare function isActionRefusal(thrown: unknown): thrown is ActionRefusal;
+/** The action a refusal carries, if any. */
+export declare function refusalActionOf(thrown: unknown): RecordAction | undefined;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-alert.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+/** What `ConfirmDialog`'s `refusal` receives when `onConfirm` has refused. */
+export interface ConfirmRefusalContext {
+    /** The thrown error's message, or the translated `material.confirm-dialog.failed` text. */
+    message: string;
+    /** What `onConfirm` threw. */
+    cause: unknown;
+    /** Closes the dialog, so a link in the refusal can dismiss it on navigation. */
+    close: () => void;
+}
+/**
+ * The error alert of a refused confirm: the message, or what `refusal` makes
+ * of it.
+ */
+export declare function ConfirmAlert({ message, cause, close, refusal, }: ConfirmRefusalContext & {
+    refusal?: (refusal: ConfirmRefusalContext) => ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-description.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+/**
+ * What describes a confirm dialog (`aria-describedby`): the description and
+ * the `details` note. A plain string alone is a paragraph; block content or a
+ * note goes in a `div`, so block children are valid HTML.
+ */
+export declare function ConfirmDescription({ children, details, }: {
+    children: ReactNode;
+    details?: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-dialog.d.ts

@@ -1,9 +1,23 @@
+import { ReactNode } from 'react';
 import { ButtonVariant } from '../../actions/button/button.js';
+import { ConfirmRefusalContext } from './confirm-alert.js';
+export type { ConfirmRefusalContext };
 export interface ConfirmDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title: string;
-    description: string;
+    /**
+     * The text under the title. A string renders in a paragraph; any other node
+     * (several paragraphs, a list, a link) renders in a `div`, so block children
+     * are valid HTML. Either way it names the dialog (`aria-describedby`).
+     */
+    description: ReactNode;
+    /**
+     * A note under the description, for what the user should know before
+     * confirming (what else is affected, what cannot be undone). It is part of
+     * what describes the dialog.
+     */
+    details?: ReactNode;
     confirmLabel?: string;
     cancelLabel?: string;
     /**
@@ -28,6 +42,14 @@ export interface ConfirmDialogProps {
      * dialog reopens. Off by default: the refused action may be retried.
      */
     lockOnRefusal?: boolean;
+    /**
+     * Renders the refusal inside the dialog's error alert instead of the plain
+     * message, so it can carry a link (to the records that block a delete, for
+     * example). Receives the message, what `onConfirm` threw and `close()`. The alert keeps `role="alert"`.
+     * By default an `ActionRefusal` thrown by `onConfirm` shows its details and
+     * its action under the message; any other error shows its message.
+     */
+    refusal?: (refusal: ConfirmRefusalContext) => ReactNode;
     /**
      * Called as the dialog closes, before the focus goes back to what opened
      * it. `event.preventDefault()` places the focus yourself, for example
@@ -36,4 +58,4 @@ export interface ConfirmDialogProps {
      */
     onCloseAutoFocus?: (event: Event) => void;
 }
-export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, cancelVariant, onConfirm, variant, loading, confirmDisabled, lockOnRefusal, onCloseAutoFocus, }: ConfirmDialogProps): import("react").JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, title, description, details, confirmLabel, cancelLabel, cancelVariant, onConfirm, variant, loading, confirmDisabled, lockOnRefusal, refusal, onCloseAutoFocus, }: ConfirmDialogProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-refusal.d.ts

@@ -0,0 +1,7 @@
+import { ConfirmRefusalContext } from './confirm-alert.js';
+/**
+ * The default refusal of `ConfirmDialog`: the message, and for an
+ * `ActionRefusal` its details and its action. Any other error is its
+ * message alone.
+ */
+export declare function ConfirmRefusal({ message, cause, close, }: ConfirmRefusalContext): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/index.d.ts

@@ -1 +1,2 @@
+export { ActionRefusal, isActionRefusal, type RecordAction, } from './action-refusal.js';
 export * from './confirm-dialog.js';

package/dist/lib/components/ui/feedback/confirm-dialog/use-confirm-action.d.ts

@@ -11,6 +11,12 @@ export declare function useConfirmAction({ open, onOpenChange, onConfirm, }: {
 }): {
     pending: boolean;
     error: string | null;
+    cause: unknown;
     handleOpenChange: (value: boolean) => void;
     handleConfirm: (event: MouseEvent<HTMLButtonElement>) => Promise<void>;
 };
+/**
+ * A ref for a modal's content that takes the focus while `pending`: the
+ * buttons it disables would otherwise drop the focus to the page behind it.
+ */
+export declare function useKeepFocusWhile(pending: boolean): import('react').RefObject<HTMLDivElement | null>;

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

@@ -18,6 +18,7 @@ export * from './progress/index.js';
 export * from './scroll-progress/index.js';
 export * from './skeleton/index.js';
 export * from './spinner/index.js';
+export * from './stale-notice/index.js';
 export * from './step-dots/index.js';
 export * from './step-up-dialog/index.js';
 export * from './toast/index.js';

package/dist/lib/components/ui/feedback/stale-notice/index.d.ts

@@ -0,0 +1 @@
+export * from './stale-notice.js';

package/dist/lib/components/ui/feedback/stale-notice/stale-notice.d.ts

@@ -0,0 +1,15 @@
+export interface StaleNoticeProps {
+    /** Runs on "Reload the record": read the record again. */
+    onReload: () => void;
+    /** Shows the reload button as loading while the record is read again. */
+    busy?: boolean;
+    /** Replaces the description (translated by default). */
+    message?: string;
+    className?: string;
+}
+/**
+ * Another write came first (a `stale-version` refusal): what was typed stays,
+ * a warning alert takes the focus and scrolls into view when it mounts, and
+ * the only way out is to read the record again. There is no "overwrite".
+ */
+export declare function StaleNotice({ onReload, busy, message, className, }: StaleNoticeProps): import("react").JSX.Element;