@webority/ui-react 0.53.0 → 0.54.0

package/dist/types/components/AppButton.d.ts

@@ -1,4 +1,4 @@
-export default function AppButton({ children, variant, size, type, loading, disabled, block, leftIcon, rightIcon, href, static: isStatic, tooltip, tooltipPlacement, className, ...rest }: {
+export default function AppButton({ children, variant, size, type, loading, disabled, block, leftIcon, rightIcon, href, static: isStatic, tooltip, tooltipPlacement, shortcut, className, ...rest }: {
     [x: string]: any;
     block?: boolean;
     children: any;
@@ -8,6 +8,7 @@ export default function AppButton({ children, variant, size, type, loading, disa
     leftIcon?: any;
     loading?: boolean;
     rightIcon?: any;
+    shortcut: any;
     size?: string;
     static?: boolean;
     tooltip: any;

package/dist/types/components/AppButtonGroup.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Related buttons joined into one control: a view switch, a bulk-action row, a text-style set
+ * ("Bold", "Italic"). The buttons touch, share one outline and keep their own variants and
+ * handlers; give every button in the group the same `variant` and leave `size` to the group.
+ * The group is announced by `label`; each button is still its own tab stop (this is a set of
+ * actions, not a single-choice control; for one choice of several use `AppSegmented`).
+ *
+ * @param {object} props
+ * @param {string} props.label Accessible name for the group ("Text style").
+ * @param {import('react').ReactNode} props.children `AppButton`s (or button-styled links).
+ * @param {'sm'|'md'|'lg'} [props.size='md'] One size for every button in the group.
+ * @param {boolean} [props.vertical=false] Stack the buttons top to bottom.
+ * @param {boolean} [props.fullWidth=false] Fill the container, the buttons sharing the row equally.
+ * @param {string} [props.className]
+ */
+export default function AppButtonGroup({ label, children, size, vertical, fullWidth, className, ...rest }: {
+    label: string;
+    children: import('react').ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    vertical?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppCarousel.d.ts

@@ -0,0 +1,52 @@
+import "@webority/ui-elements/elements/carousel";
+/**
+ * A row of slides you can step through, drag or swipe: previous and next buttons, a dot per page, and
+ * optional auto-advance that can always be stopped. Each child is one slide.
+ *
+ * With `autoplay` it advances every that many milliseconds and shows a visible Pause / Play button
+ * before the slides. It holds while the pointer is over it or focus is inside, while the tab is hidden,
+ * and not at all when the user prefers reduced motion (the button is hidden then). It wraps to the
+ * first slide; the buttons wrap only with `loop`. The slides are named "2 of 5", and the page that
+ * comes into view is announced politely when the user, not the autoplay, moved it. The focused slide
+ * row also takes Left, Right, Home and End.
+ *
+ * `perView` shows several slides at once (its `Md` and `Lg` forms apply from those breakpoints), and
+ * the dots then stand for pages of slides. Wraps the shared `<wui-carousel>` element, which owns the
+ * stepping and the autoplay; the Razor `<app-carousel>` renders the same markup.
+ *
+ * @param {object} props
+ * @param {string} props.label What the slides are ("Customer stories"): the carousel's accessible name.
+ * @param {number} [props.autoplay] Milliseconds between automatic steps (5000 is typical). Omit for none.
+ * @param {boolean} [props.loop=false] The previous and next buttons wrap around at the ends.
+ * @param {number} [props.perView=1] Slides in view on a phone.
+ * @param {number} [props.perViewMd] Slides in view from the md breakpoint. Defaults to `perView`.
+ * @param {number} [props.perViewLg] Slides in view from the lg breakpoint. Defaults to `perViewMd`.
+ * @param {boolean} [props.arrows=true] Show the previous and next buttons.
+ * @param {boolean} [props.dots=true] Show the page dots.
+ * @param {string} [props.previousLabel="Previous slide"] The previous button's name.
+ * @param {string} [props.nextLabel="Next slide"] The next button's name.
+ * @param {string} [props.dotLabel="Go to slide"] The words before the slide number in each dot's name.
+ * @param {string} [props.pauseLabel="Pause"] The pause button's text and name while playing.
+ * @param {string} [props.playLabel="Play"] The pause button's text and name while paused.
+ * @param {string} [props.className]
+ * @param {import('react').CSSProperties} [props.style] Merged after the per-view custom properties.
+ * @param {import('react').ReactNode} props.children The slides.
+ */
+export default function AppCarousel({ label, autoplay, loop, perView, perViewMd, perViewLg, arrows, dots, previousLabel, nextLabel, dotLabel, pauseLabel, playLabel, className, children, style, ...rest }: {
+    label: string;
+    autoplay?: number;
+    loop?: boolean;
+    perView?: number;
+    perViewMd?: number;
+    perViewLg?: number;
+    arrows?: boolean;
+    dots?: boolean;
+    previousLabel?: string;
+    nextLabel?: string;
+    dotLabel?: string;
+    pauseLabel?: string;
+    playLabel?: string;
+    className?: string;
+    style?: import('react').CSSProperties;
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

package/dist/types/components/AppChipGroup.d.ts

@@ -0,0 +1,22 @@
+import "@webority/ui-elements/elements/overflow";
+/**
+ * A row of chips (`AppChip`, `AppChoiceChip`) that either wraps onto more lines or, with
+ * `overflow="menu"`, keeps one line and moves the chips that do not fit into a More menu
+ * (`<wui-overflow>`, which Razor `<app-chip-group>` renders too). Choosing a chip in the menu
+ * clicks that chip's own control, so a clickable `AppChip` runs its `onClick` and an
+ * `AppChoiceChip` toggles. A chip with no control (static or only removable) is listed greyed out.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children The chips.
+ * @param {"wrap"|"menu"} [props.overflow="wrap"] `wrap` lets the chips wrap; `menu` moves the extras into a More menu.
+ * @param {string} [props.moreLabel="More"] The More button's text when `overflow="menu"`.
+ * @param {string} [props.label] Accessible name for the group.
+ * @param {string} [props.className]
+ */
+export default function AppChipGroup({ children, overflow, moreLabel, label, className, ...rest }: {
+    children: import('react').ReactNode;
+    overflow?: "wrap" | "menu";
+    moreLabel?: string;
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppCodeBlock.d.ts

@@ -0,0 +1,28 @@
+import "@webority/ui-elements/elements/code-block";
+/**
+ * Source code with syntax colours (light and dark), a Copy button with a confirmation, optional
+ * line numbers and optional wrapping, for docs pages, API keys, webhook payloads and request
+ * examples. The colouring is a small built-in tokenizer in `<wui-code-block>`, which Razor
+ * `<app-code-block>` renders too; the source is only ever drawn as text, never as HTML. Source
+ * beyond 100,000 characters is shown uncoloured. Not an editor: it shows code, it does not edit it.
+ *
+ * @param {object} props
+ * @param {string} props.code The source text. A single trailing newline is dropped.
+ * @param {"text"|"json"|"js"|"cs"|"sql"|"bash"|"http"|"html"|"css"} [props.language="text"] What to colour; `text` shows it as written.
+ * @param {boolean} [props.lineNumbers=false] Number the lines. The numbers are not copied or selected.
+ * @param {boolean} [props.wrap=false] Wrap long lines instead of scrolling sideways.
+ * @param {string} [props.label] The header title ("webhook.json") and the code region's accessible name. Without it the header names the language.
+ * @param {string} [props.copyLabel="Copy"] The copy button's label.
+ * @param {string} [props.copiedLabel="Copied"] The copy button's label for two seconds after a copy.
+ * @param {string} [props.className]
+ */
+export default function AppCodeBlock({ code, language, lineNumbers, wrap, label, copyLabel, copiedLabel, className, ...rest }: {
+    code: string;
+    language?: "text" | "json" | "js" | "cs" | "sql" | "bash" | "http" | "html" | "css";
+    lineNumbers?: boolean;
+    wrap?: boolean;
+    label?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppCommandPalette.d.ts

@@ -12,6 +12,15 @@ import "@webority/ui-elements/elements/command-palette";
  * You own the search: `query` is controlled, and `groups` is whatever your search returned
  * for it. The palette does not filter. Selecting a result calls its `onSelect`, then `onClose`.
  *
+ * Nested pages are controlled the same way. An item with a `page` opens it instead of acting:
+ * the palette calls `onPathChange` with the new path and `onQueryChange("")`, and you pass the
+ * groups of the page `path` names. A Back button and a breadcrumb appear while the path is not
+ * empty; Backspace in an empty search goes back. Reset `path` yourself when you close the palette.
+ *
+ * With `recentsKey` the palette remembers what was chosen on this device and lists it first, under
+ * "Recent", while the search is empty on the first page. Items are remembered by group key and
+ * item key, so keep both stable, and only items present in the root `groups` are listed again.
+ *
  * @param {object} props
  * @param {boolean} props.open
  * @param {() => void} props.onClose Called on Escape, a backdrop click, and after a selection.
@@ -21,13 +30,28 @@ import "@webority/ui-elements/elements/command-palette";
  * @param {{ key: string, label: import('react').ReactNode, items: { key: string,
  *   label: import('react').ReactNode, description?: import('react').ReactNode,
  *   icon?: string | import('react').ReactNode, meta?: import('react').ReactNode,
- *   disabled?: boolean, ariaLabel?: string, onSelect?: () => void }[] }[]} [props.groups=[]]
+ *   disabled?: boolean, ariaLabel?: string, shortcut?: string,
+ *   page?: { key: string, label: string }, onSelect?: () => void }[] }[]} [props.groups=[]]
  *   Results, rendered in order under their group headings. Keys must be unique within their
  *   group; groups with no items are left out. `icon` is a library icon name or a node; `meta` is
  *   short trailing text or a node. A `disabled` item is listed but cannot be chosen: the arrow
  *   keys skip it. `ariaLabel` is the option's accessible name, by default a string `label`, so a
  *   screen reader reads the name whole rather than in the pieces the search emphasis splits it
  *   into; give it for a label passed as a node. The description and meta describe the option.
+ *   `shortcut` is the key that runs the item elsewhere ("N", "Ctrl K"), drawn as a key chip at
+ *   the end of the row; it is a hint, your page binds the key. `page` makes the item open a
+ *   nested page ({ key, label }, the label shows in the breadcrumb) instead of calling `onSelect`.
+ * @param {{ key: string, label: string }[]} [props.path=[]] The open nested pages, outermost first
+ *   (controlled). Empty shows the first page.
+ * @param {(path: { key: string, label: string }[]) => void} [props.onPathChange] Called with the
+ *   new path when the user opens a page, presses Back, picks a breadcrumb entry, or presses
+ *   Backspace in an empty search. The search is cleared with it.
+ * @param {string} [props.rootLabel='All'] Breadcrumb text for the first page.
+ * @param {string} [props.backLabel='Back'] Accessible name of the Back button.
+ * @param {string} [props.recentsKey] localStorage key to remember chosen items under; omit for no
+ *   recents. Make it per user, for example from the user's public id.
+ * @param {number} [props.recentsLimit=5] How many recent items to keep (at most 20).
+ * @param {string} [props.recentsLabel='Recent'] Heading of the recent items.
  * @param {boolean} [props.loading=false] Shows the library spinner in the input.
  * @param {import('react').ReactNode} [props.emptyText='No results'] Shown when the query is
  *   not blank, nothing is loading, and no group has items.
@@ -38,7 +62,7 @@ import "@webority/ui-elements/elements/command-palette";
  * @param {string} [props.id] Seeds the result and heading ids; defaults to a generated id.
  * @param {string} [props.className] Extra classes on the dialog card.
  */
-export default function AppCommandPalette({ open, onClose, query, onQueryChange, placeholder, groups, loading, emptyText, footer, ariaLabel, highlight, id, className, ...rest }: {
+export default function AppCommandPalette({ open, onClose, query, onQueryChange, placeholder, groups, path, onPathChange, rootLabel, backLabel, recentsKey, recentsLimit, recentsLabel, loading, emptyText, footer, ariaLabel, highlight, id, className, ...rest }: {
     open: boolean;
     onClose: () => void;
     query?: string;
@@ -55,9 +79,27 @@ export default function AppCommandPalette({ open, onClose, query, onQueryChange,
             meta?: import('react').ReactNode;
             disabled?: boolean;
             ariaLabel?: string;
+            shortcut?: string;
+            page?: {
+                key: string;
+                label: string;
+            };
             onSelect?: () => void;
         }[];
     }[];
+    path?: {
+        key: string;
+        label: string;
+    }[];
+    onPathChange?: (path: {
+        key: string;
+        label: string;
+    }[]) => void;
+    rootLabel?: string;
+    backLabel?: string;
+    recentsKey?: string;
+    recentsLimit?: number;
+    recentsLabel?: string;
     loading?: boolean;
     emptyText?: import('react').ReactNode;
     footer?: import('react').ReactNode;

package/dist/types/components/AppCommentThread.d.ts

@@ -0,0 +1,115 @@
+export type CommentThreadItem = {
+    /**
+     * The comment's public id.
+     */
+    id: string;
+    /**
+     * Who wrote it; `src` is a photo URL.
+     */
+    author: {
+        name: string;
+        src?: string;
+    };
+    /**
+     * When it was written: an ISO instant with its zone, epoch ms or a Date. Shown in IST.
+     */
+    at: string | number | Date;
+    /**
+     * The stored body, with mentions as `@[Label](id)`.
+     */
+    value?: string;
+    /**
+     * Shows "Edited" beside the time.
+     */
+    edited?: boolean;
+    /**
+     * Shows "This comment was deleted." in place of the body; replies stay.
+     */
+    deleted?: boolean;
+    /**
+     * This person may edit it.
+     */
+    canEdit?: boolean;
+    /**
+     * This person may delete it.
+     */
+    canDelete?: boolean;
+    reactions?: {
+        emoji: string;
+        count: number;
+        mine?: boolean;
+    }[];
+    /**
+     * Replies, oldest first. Replies to a reply are not nested.
+     */
+    replies?: CommentThreadItem[];
+};
+/**
+ * A discussion: comments with their author, time in IST, replies one level deep, reactions and
+ * mentions. People reply, edit and delete in place (Delete asks first), react from a small panel,
+ * and write with "@" to mention someone (see `AppMentionInput`). Ctrl or Cmd+Enter sends a box,
+ * Escape closes it and returns focus. Changes are announced to screen readers.
+ *
+ * The comments are yours: each callback persists a change and the thread waits for it, then you
+ * pass the updated `comments` back. Throw (or reject) with a message written for the person and it
+ * shows where they acted. Bodies are stored mention values (`Thanks @[Asha Rao](u-12)`) and always
+ * render as text, never HTML.
+ *
+ * Wraps the shared `<wui-comment-thread>` element, which owns the boxes, keys and states; Razor
+ * `<app-comment-thread>` renders the same markup.
+ *
+ * @typedef {object} CommentThreadItem
+ * @property {string} id The comment's public id.
+ * @property {{ name: string, src?: string }} author Who wrote it; `src` is a photo URL.
+ * @property {string | number | Date} at When it was written: an ISO instant with its zone, epoch ms or a Date. Shown in IST.
+ * @property {string} [value] The stored body, with mentions as `@[Label](id)`.
+ * @property {boolean} [edited] Shows "Edited" beside the time.
+ * @property {boolean} [deleted] Shows "This comment was deleted." in place of the body; replies stay.
+ * @property {boolean} [canEdit] This person may edit it.
+ * @property {boolean} [canDelete] This person may delete it.
+ * @property {{ emoji: string, count: number, mine?: boolean }[]} [reactions]
+ * @property {CommentThreadItem[]} [replies] Replies, oldest first. Replies to a reply are not nested.
+ *
+ * @param {object} props
+ * @param {CommentThreadItem[]} [props.comments] Top-level comments, oldest first.
+ * @param {(body: string) => unknown | Promise<unknown>} [props.onPost] A new comment.
+ * @param {(parentId: string, body: string) => unknown | Promise<unknown>} [props.onReply]
+ * @param {(commentId: string, body: string) => unknown | Promise<unknown>} [props.onEdit]
+ * @param {(commentId: string) => unknown | Promise<unknown>} [props.onDelete]
+ * @param {(commentId: string, emoji: string) => unknown | Promise<unknown>} [props.onReact] Toggle
+ *   this person's reaction.
+ * @param {{ value: string, label: string, description?: string, src?: string }[]} [props.people]
+ *   The people the boxes offer after "@".
+ * @param {(query: string) => Promise<{ value: string, label: string, description?: string, src?: string }[]>} [props.loadPeople]
+ *   Look people up instead of `people`.
+ * @param {string[]} [props.reactionChoices] The reactions the panel offers (default 👍 ❤️ 🎉 😄 👀 🙏).
+ * @param {boolean} [props.readOnly=false] Show the thread without the box, actions or reacting.
+ * @param {string} [props.label="Comments"] The list's accessible name.
+ * @param {string} [props.id] The root's id. Generated when omitted.
+ * @param {string} [props.className] Extra classes on the root.
+ */
+export default function AppCommentThread({ comments, onPost, onReply, onEdit, onDelete, onReact, people, loadPeople, reactionChoices, readOnly, label, id, className, ...rest }: {
+    comments?: CommentThreadItem[];
+    onPost?: (body: string) => unknown | Promise<unknown>;
+    onReply?: (parentId: string, body: string) => unknown | Promise<unknown>;
+    onEdit?: (commentId: string, body: string) => unknown | Promise<unknown>;
+    onDelete?: (commentId: string) => unknown | Promise<unknown>;
+    onReact?: (commentId: string, emoji: string) => unknown | Promise<unknown>;
+    people?: {
+        value: string;
+        label: string;
+        description?: string;
+        src?: string;
+    }[];
+    loadPeople?: (query: string) => Promise<{
+        value: string;
+        label: string;
+        description?: string;
+        src?: string;
+    }[]>;
+    reactionChoices?: string[];
+    readOnly?: boolean;
+    label?: string;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppDataTable.d.ts

@@ -48,14 +48,48 @@
  *   on it, for in-page actions (open a drawer). Same nested-control rule as rowHref.
  * @param {(row: object) => 'success'|'warning'|'danger'|'info'|undefined} [props.rowStatus] A coloured
  *   bar on the row's leading edge, e.g. danger for an overdue invoice. Undefined draws none.
+ * @param {string|number} [props.activeRowKey] The key (what `rowKey` returns) of the row whose record is
+ *   open, e.g. in a detail pane beside the table. That row gets `aria-current="true"` and the subtle
+ *   primary background; it is separate from `rowStatus`'s edge bar and from selected (checkbox) rows.
+ *   Razor: `active-row-key` against each row's `data-row-key`.
  * @param {boolean} [props.selectable=false] Render a leading checkbox column.
  * @param {Set<string|number>} [props.selectedIds] Currently selected row keys.
  * @param {(id: string|number) => void} [props.onToggleRow]
  * @param {(checked: boolean) => void} [props.onToggleAll] Toggle all current rows.
+ * @param {(keys: Array<string|number>, checked: boolean) => void} [props.onSelectRange] Shift+click on a row
+ *   checkbox selects (or clears) every row from the last clicked one to this one; this receives the keys
+ *   of the other rows that change. Without it, `onToggleRow` is called once per key, so it must be safe
+ *   to call several times in a row (a functional state update). Razor: built in.
  * @param {(row: object) => import('react').ReactNode} [props.renderExpanded] When given, each row
  *   gets a leading expand toggle; the returned content renders in a full-width row beneath it.
+ * @param {boolean} [props.resizableColumns=false] Each column but the last gets a handle on its end edge:
+ *   drag it, or focus it and press the arrow keys (Shift for bigger steps, Home or a double-click to
+ *   undo). The table then keeps fixed widths measured from its rows, and the last column takes the rest.
+ *   Razor: `resizable-columns`.
+ * @param {string} [props.viewKey] Remembers resized widths in this browser under this name (the same name
+ *   `useTableView` takes). Razor: `view-key`, with `data-key` on each header cell.
+ * @param {string} [props.groupBy] A column key: rows gather under a header row per value of it, in the
+ *   order each value first appears (sort within groups by sorting `rows`), each header collapsing its
+ *   rows and showing their count. Razor: `group-by`, against the header cells' `data-key`.
+ * @param {(value: unknown, rows: object[]) => import('react').ReactNode} [props.groupLabel] A group
+ *   header's label; without it the value shows as a cell would.
+ * @param {boolean} [props.virtual=false] Renders only the rows in view (plus a margin) for a long
+ *   client-side list. Needs `maxHeight`; rows are taken to share one height, so it is not for
+ *   `renderExpanded` or `stackOnMobile`. Razor: `virtual`.
+ * @param {(row: object) => boolean} [props.rowSaving] True while the row's add or change is on its way to
+ *   the server: the row shows at once, tinted and marked busy, instead of waiting for the answer. Put an
+ *   added row in `rows` straight away with this true (give it its final key if you can, so the outcome is
+ *   announced). Razor: `data-wui-save-state="saving"` on the <tr>, or a server table's `saveRow`.
+ * @param {(row: object) => string|undefined} [props.rowSaveError] Why the row's last save failed: the row
+ *   shows the error look with this line under its first cell. Put a changed row's old values back in `rows`
+ *   as you set it, so the row shows what is really saved; keep a failed added row until the person retries
+ *   or removes it. When a row leaves `rowSaving`, screen readers hear "Ana Rao saved." or "Ana Rao was not
+ *   saved. <reason>" (the name is the first column's value). Razor: `data-wui-save-state="error"`.
+ *
+ * A sort or reorder of up to 200 rows glides each row to its new place; not under reduced motion, and not
+ * on a `virtual` table.
  */
-export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, renderExpanded, density, striped, maxHeight, stickyFirstColumn, stickyActions, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, ...rest }: {
+export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, onSelectRange, renderExpanded, density, striped, maxHeight, stickyFirstColumn, stickyActions, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, activeRowKey, resizableColumns, viewKey, groupBy, groupLabel, virtual, rowSaving, rowSaveError, ...rest }: {
     columns: object[];
     rows: object[];
     rowKey?: (row: object, index: number) => string | number;
@@ -85,9 +119,18 @@ export default function AppDataTable({ columns, rows, rowKey, sort, onSort, load
     rowHref?: (row: object) => string;
     onRowClick?: (row: object) => void;
     rowStatus?: (row: object) => 'success' | 'warning' | 'danger' | 'info' | undefined;
+    activeRowKey?: string | number;
     selectable?: boolean;
     selectedIds?: Set<string | number>;
     onToggleRow?: (id: string | number) => void;
     onToggleAll?: (checked: boolean) => void;
+    onSelectRange?: (keys: Array<string | number>, checked: boolean) => void;
     renderExpanded?: (row: object) => import('react').ReactNode;
+    resizableColumns?: boolean;
+    viewKey?: string;
+    groupBy?: string;
+    groupLabel?: (value: unknown, rows: object[]) => import('react').ReactNode;
+    virtual?: boolean;
+    rowSaving?: (row: object) => boolean;
+    rowSaveError?: (row: object) => string | undefined;
 }): import("react").JSX.Element;

package/dist/types/components/AppDateRangePicker.d.ts

@@ -25,6 +25,11 @@ import "@webority/ui-elements/elements/date-range";
  * @param {'sm'|'md'|'lg'} [props.size] Control height tier, matching AppInput.
  * @param {0|1|2|3|4|5|6} [props.firstDay] First weekday of the calendar, 0 Sunday to 6 Saturday. Unset, it
  *   follows the theme's `--wui-first-day` token, which is 1 (Monday) unless the product sets it.
+ * @param {(('today'|'last7Days'|'thisMonth'|'lastMonth'|'thisFinancialYear')|{ label: string, start: string, end: string })[]} [props.presets]
+ *   Quick ranges, listed beside the calendar (above it on a phone); picking one fills the range and
+ *   closes the calendar. An item is a name, resolved against today in IST (`thisFinancialYear` runs
+ *   1 April to 31 March; `thisMonth` and `lastMonth` span the whole month), or `{ label, start, end }`
+ *   with ISO dates. A preset outside `min`/`max` is disabled.
  * @param {string} [props.id]
  * @param {string} [props.ariaLabel]
  * @param {string} [props.className] Class to apply to the control element.

package/dist/types/components/AppDrawer.d.ts

@@ -0,0 +1,46 @@
+import "@webority/ui-elements/elements/drawer";
+/**
+ * A panel over the page that is a side drawer from md up and a bottom sheet below it. The sheet
+ * rests on `snapPoints` (percent of the screen height), follows a finger on its handle or header,
+ * flicks to the next point and is dragged down to close; its handle is a vertical slider the arrow
+ * keys, Home and End also move. Focus moves in on open, Tab stays inside, Escape closes, and
+ * focus returns to what opened it. Controlled: set `open` and close it in `onClose`. Distinct from
+ * `AppModal`, which is a centred dialog on every screen. Wraps `<wui-drawer>`, which Razor
+ * `<app-drawer>` renders too. Place it where no ancestor has a transform, since it is fixed to the
+ * viewport.
+ *
+ * @param {object} props
+ * @param {boolean} [props.open=false]
+ * @param {() => void} [props.onClose] Called when the backdrop, Escape, the close button or a drag
+ *   down asks to close it. It stays open until `open` becomes false.
+ * @param {string} [props.title] The heading, and the dialog's accessible name.
+ * @param {string} [props.subtitle] A line under the title.
+ * @param {string} [props.ariaLabel] The dialog's accessible name when there is no `title`.
+ * @param {'end'|'start'} [props.side="end"] Which edge the side drawer slides from.
+ * @param {'sm'|'md'|'lg'} [props.size="md"] The side drawer's width: 360, 480 or 640 px.
+ * @param {number[]} [props.snapPoints=[50, 90]] The sheet's resting heights, each 10 to 100 percent of the screen.
+ * @param {number} [props.defaultSnap=0] Which of the sorted snap points it opens on.
+ * @param {(index: number, percent: number) => void} [props.onSnapChange] Called when the sheet moves to another point.
+ * @param {boolean} [props.dismissible=true] Show the close button.
+ * @param {boolean} [props.staticBackdrop=false] The backdrop, Escape and a drag down no longer close it; only the close button or `open` can.
+ * @param {import('react').ReactNode} [props.footer] Pinned below the scrolling body.
+ * @param {string} [props.className]
+ * @param {import('react').ReactNode} props.children
+ */
+export default function AppDrawer({ open, onClose, title, subtitle, ariaLabel, side, size, snapPoints, defaultSnap, onSnapChange, dismissible, staticBackdrop, footer, className, children, ...rest }: {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+    subtitle?: string;
+    ariaLabel?: string;
+    side?: 'end' | 'start';
+    size?: 'sm' | 'md' | 'lg';
+    snapPoints?: number[];
+    defaultSnap?: number;
+    onSnapChange?: (index: number, percent: number) => void;
+    dismissible?: boolean;
+    staticBackdrop?: boolean;
+    footer?: import('react').ReactNode;
+    className?: string;
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

package/dist/types/components/AppDropdown.d.ts

@@ -15,8 +15,10 @@
  * @param {string} [props.label] Tooltip + accessible-name fallback for the toggle.
  * @param {"start"|"end"} [props.align="end"] Menu alignment.
  * @param {string} [props.ariaLabel]
- * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, divider?: true }[]} [props.items]
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: true }[]} [props.items]
  *   `icon` is a glyph name OR a custom node (e.g. an iconsax glyph); `image` is a picture URL (external logo/avatar) — pass one.
+ *   `shortcut` is the key that runs the item ("E"), drawn as a key chip at the end of the row; the
+ *   page binds the key itself (useListShortcuts).
  *   An item with `divider: true` renders a separator instead of an action; it needs no
  *   `label`/`onClick`, just a unique `key`.
  * @param {string} [props.menuClassName]
@@ -53,6 +55,7 @@ export default function AppDropdown({ icon, iconSize, toggleClassName, label, ar
         to?: string;
         onClick?: () => void;
         danger?: boolean;
+        shortcut?: string;
         divider?: true;
     }[];
     menuClassName?: string;

package/dist/types/components/AppEmptyState.d.ts

@@ -11,6 +11,8 @@
  *
  * @param {object} props
  * @param {string|import('react').ReactNode} props.icon  Semantic icon name for the bubble, or a custom node
+ * @param {"no-results"|"no-data"|"empty-inbox"|"no-notifications"|"no-files"|"no-access"|"offline"|"error"} [props.illustration]
+ *   Decorative drawing by name, in theme colours. Replaces the icon bubble when set.
  * @param {number} [props.iconSize=24]
  * @param {"md"|"sm"} [props.size="md"]
  * @param {import('react').ReactNode} props.title
@@ -19,8 +21,9 @@
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style]
  */
-export default function AppEmptyState({ icon, iconSize, size, title, text, action, className, style, ...rest }: {
+export default function AppEmptyState({ icon, illustration, iconSize, size, title, text, action, className, style, ...rest }: {
     icon: string | import('react').ReactNode;
+    illustration?: "no-results" | "no-data" | "empty-inbox" | "no-notifications" | "no-files" | "no-access" | "offline" | "error";
     iconSize?: number;
     size?: "md" | "sm";
     title: import('react').ReactNode;

package/dist/types/components/AppFilterBar.d.ts

@@ -10,6 +10,12 @@
  * and clears itself. The controls, chips and Clear all share one row, the search box wider and
  * selects and date ranges narrow; it wraps only when full, and each facet takes its own line on a phone.
  *
+ * Only the first `inline` facets sit in the row. The rest go in a panel behind a "Filters (n)" button,
+ * n counting the active ones among them (no number while none is active); their chips stay in the row.
+ * The panel is a `<details>` that closes on an outside click or Escape. On a phone every facet folds
+ * into that one button and the panel becomes a sheet from the bottom edge. The button and Clear all
+ * never wrap.
+ *
  * @param {object} props
  * @param {{ key: string, label: string, type: 'enum'|'multiEnum'|'dateRange'|'text',
  *   options?: { value: string, label: string }[] }[]} props.facets `options` fills an `enum` or `multiEnum`;
@@ -17,9 +23,10 @@
  * @param {Record<string, string|string[]|{ from: string, to: string }>} props.value The current filters.
  * @param {(key: string, value: string|string[]|{ from: string, to: string }) => void} props.onChange
  *   Called with the facet key and its new value. Clear all calls it once per active facet, with the empty value.
+ * @param {number} [props.inline=3] How many facets stay in the row; the rest fold into the Filters button.
  * @param {string} [props.className]
  */
-export default function AppFilterBar({ facets: allFacets, value, onChange, className, ...rest }: {
+export default function AppFilterBar({ facets: allFacets, value, onChange, inline, className, ...rest }: {
     facets: {
         key: string;
         label: string;
@@ -37,5 +44,6 @@ export default function AppFilterBar({ facets: allFacets, value, onChange, class
         from: string;
         to: string;
     }) => void;
+    inline?: number;
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppHoverCard.d.ts

@@ -0,0 +1,35 @@
+import "@webority/ui-elements/elements/hover-card";
+/**
+ * A small preview card that opens beside a name or record link: who someone is, a record's status,
+ * without opening the record. It opens after `openDelay` ms of mouse hover or when the trigger takes
+ * keyboard focus, and closes `closeDelay` ms after the pointer or focus leaves the trigger and the
+ * card (the pointer can cross into the card to read or click inside it). Escape closes it. Touch
+ * never opens it, so the trigger must itself lead to the same information (a link to the record).
+ * Distinct from `AppPopover` (opened by a click, for a panel of actions) and `AppTooltip` (one line of
+ * text, no interactive content). Wraps `<wui-hover-card>`, which Razor `<app-hover-card>` renders too.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.trigger The name or link the card belongs to. Make it a link
+ *   or button so keyboard users can focus it.
+ * @param {import('react').ReactNode} [props.children] The card's content. The card is phrasing content, so it can
+ *   sit on a name inside a sentence; there, build the content from spans (a `<div>` cannot be inside a `<p>`).
+ * @param {boolean} [props.loading=false] Shows a spinner and `loadingLabel` in place of the children while
+ *   the preview is fetched; open the fetch from `onOpenChange`.
+ * @param {string} [props.loadingLabel="Loading"] The text beside the spinner.
+ * @param {string} [props.label] The card's accessible name ("Asha Verma, profile").
+ * @param {number} [props.openDelay=300] Milliseconds of hover or focus before it opens.
+ * @param {number} [props.closeDelay=150] Milliseconds after leaving before it closes.
+ * @param {(open: boolean) => void} [props.onOpenChange] Called when the card opens or closes.
+ * @param {string} [props.className]
+ */
+export default function AppHoverCard({ trigger, children, loading, loadingLabel, label, openDelay, closeDelay, onOpenChange, className, ...rest }: {
+    trigger: import('react').ReactNode;
+    children?: import('react').ReactNode;
+    loading?: boolean;
+    loadingLabel?: string;
+    label?: string;
+    openDelay?: number;
+    closeDelay?: number;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppInlineEdit.d.ts

@@ -0,0 +1,57 @@
+import "@webority/ui-elements/elements/datepicker";
+import "@webority/ui-elements/elements/select";
+/**
+ * One value edited where it is shown: a table cell or a fact on a detail page. It reads as plain
+ * text with a pencil on hover and focus; a click or Enter turns it into the matching library control
+ * (a text or number input, a textarea, a select or a date picker, whose list opens at once).
+ *
+ * Enter saves a text or number, Ctrl or Cmd+Enter a textarea, picking saves a select or date, and
+ * leaving the control saves whatever it holds; Escape cancels. An unchanged value closes without
+ * saving. While `onSave` runs the new value shows with a spinner, then a tick for two seconds; a
+ * rejection puts the old value back and shows the rejection's message under it (so write it for the
+ * person editing), and the next edit starts from the value that failed. Saved and failed are
+ * announced to screen readers.
+ *
+ * Inside an `AppDataTable` row that opens on click or Enter, clicks and keys on the value never
+ * reach the row.
+ *
+ * Wraps the shared `<wui-inline-edit>` element, which owns the editing, the keys and the states;
+ * the Razor `<app-inline-edit>` renders the same markup.
+ *
+ * @param {object} props
+ * @param {string | number | null} [props.value] The saved value. A date is `yyyy-MM-dd`; a select
+ *   value is one of the `options` values.
+ * @param {(next: string | number | null) => void | Promise<unknown>} [props.onSave] Persist the new
+ *   value. A number field passes a number (null when cleared); the others pass a string. Reject to
+ *   refuse it: the rejection's message is shown.
+ * @param {'text'|'number'|'select'|'date'|'textarea'} [props.type='text'] The control it turns into.
+ * @param {{ value: string | number, label: string }[]} [props.options] The choices of a select.
+ * @param {string} props.label What the value is ("Owner"): the accessible name of the value and
+ *   the control, and the subject of what screen readers hear ("Owner saved.").
+ * @param {string} [props.placeholder] Shown, muted, when there is no value, and in the empty
+ *   control. Without it an empty value shows a hyphen.
+ * @param {(next: string | number | null) => string | null | undefined} [props.validate] Checked
+ *   before saving: return a message to keep the control open with that message, or nothing to save.
+ * @param {(value: string | number | null) => import('react').ReactNode} [props.renderValue] How a
+ *   saved, non-empty value reads (a formatted amount, a status badge). Text and markup only: the
+ *   value is a button, so it must not hold its own controls or links.
+ * @param {boolean} [props.disabled=false] Show the value without the edit affordance.
+ * @param {string} [props.className] Extra classes on the root element.
+ * @param {string} [props.id] The root's id; the control and error ids derive from it. Generated when omitted.
+ */
+export default function AppInlineEdit({ value, onSave, type, options, label, placeholder, validate, renderValue, disabled, className, id, ...rest }: {
+    value?: string | number | null;
+    onSave?: (next: string | number | null) => void | Promise<unknown>;
+    type?: 'text' | 'number' | 'select' | 'date' | 'textarea';
+    options?: {
+        value: string | number;
+        label: string;
+    }[];
+    label: string;
+    placeholder?: string;
+    validate?: (next: string | number | null) => string | null | undefined;
+    renderValue?: (value: string | number | null) => import('react').ReactNode;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+}): import("react").JSX.Element;