@exsto/ds 0.0.1-rc.1 → 0.0.1-rc.13

package/dist/ui/src/components/edyn/multi-select/multi-select.d.ts

@@ -0,0 +1,106 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+/** An option: `leading` goes before its label (an avatar, a status dot), `count` after it (how many it would show). */
+export type TMultiSelectOption = {
+    value: string;
+    label: string;
+    count?: number;
+    leading?: ReactNode;
+};
+/** Every word the component prints, so a product can translate it. */
+export interface IMultiSelectLabels {
+    noMatches: string;
+    loading: string;
+    /** Shown when `error` is `true`; a string `error` replaces it. */
+    error: string;
+    retry: string;
+    loadMore: string;
+    loadingMore: string;
+    clear: string;
+    selectedCount: (count: number) => string;
+}
+export declare const DEFAULT_MULTI_SELECT_LABELS: IMultiSelectLabels;
+/** Above this many options a list draws only the rows on screen. */
+export declare const VIRTUALIZE_FROM = 100;
+/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */
+export interface IMultiSelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'placeholder' | 'value' | 'defaultValue' | 'id' | 'disabled' | 'className' | 'children' | 'onChange'> {
+    /** The trigger's text with nothing picked, which means no filter ("All dealer groups"). */
+    placeholder: string;
+    /** The search field's prompt ("Search dealer groups…"). */
+    searchPlaceholder: string;
+    /** The options to show now: all of a short fixed list, or in async mode the ones for the typed text. */
+    options: readonly TMultiSelectOption[];
+    value: readonly string[];
+    onValueChange: (value: string[]) => void;
+    /**
+     * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;
+     * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is
+     * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.
+     */
+    summary?: 'selection' | 'label';
+    /** For a Label's htmlFor. */
+    id?: string;
+    'aria-label'?: string;
+    /**
+     * Marks the trigger invalid: the kit's destructive border, and a screen reader says so. For a form that does not use
+     * Field; inside one, its invalid state already does this.
+     */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /**
+     * The id of the text that explains it (the error). Added to what a Field names already, never replacing it.
+     */
+    'aria-describedby'?: string;
+    /** Shown but not changeable (a read-only form). */
+    disabled?: boolean;
+    /** Layout only (a width); the look is the kit's. */
+    className?: string;
+    /**
+     * Passing this turns on ASYNC MODE, for lists that grow (people, dealer groups) and must
+     * be searched by the API rather than loaded whole and filtered in the browser. The
+     * component then never filters: it reports the typed text (after `searchDelay`) and shows
+     * whatever `options` the caller supplies for it. It is also called with '' each time the
+     * list opens, so the first page is fetched on demand, not at page load.
+     */
+    onSearchChange?: (text: string) => void;
+    /** How long typing must pause before `onSearchChange` is called. Async mode only. */
+    searchDelay?: number;
+    /**
+     * The options behind the chosen values, for the ones not in the current `options`. A
+     * search that no longer returns a chosen value must not make it vanish from the trigger
+     * or the count, so the caller says what it is called. Without a label a value shows as
+     * itself.
+     */
+    selectedOptions?: readonly TMultiSelectOption[];
+    /** The options for the typed text are on their way. The old ones stay until they arrive. */
+    loading?: boolean;
+    /** The request failed: `true` for the default message, or the message itself. */
+    error?: boolean | string;
+    onRetry?: () => void;
+    /** There is another page after `options`. */
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    /** The next page is on its way. */
+    loadingMore?: boolean;
+    labels?: Partial<IMultiSelectLabels>;
+}
+/**
+ * The options behind the chosen values, in the order they were chosen. A value with no
+ * known option is kept and shown as itself rather than dropped: a selection must never
+ * change just because a list did.
+ */
+export declare const resolveChosen: (value: readonly string[], options: readonly TMultiSelectOption[], selectedOptions?: readonly TMultiSelectOption[]) => TMultiSelectOption[];
+/** What the trigger says: the placeholder, the one picked, or a count. */
+export declare const summarize: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels, summary?: "selection" | "label") => string;
+/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */
+export declare const fullSelection: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels, summary?: "selection" | "label") => string;
+/**
+ * A choice of several from a list: a trigger shaped like a Select that says what is picked
+ * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox
+ * options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization
+ * past VIRTUALIZE_FROM options. Nothing chosen means no filter.
+ *
+ * For a short fixed list pass `options` and nothing else: the component filters them as the
+ * user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a
+ * server: the caller fetches the options for the typed text, and says when they are loading,
+ * failed, or have another page.
+ */
+export declare const MultiSelect: ({ placeholder, searchPlaceholder, options, value, onValueChange, id, disabled, className, onSearchChange, searchDelay, selectedOptions, loading, error, onRetry, hasMore, onLoadMore, loadingMore, labels: labelOverrides, summary, ...rest }: IMultiSelectProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/multi-select/multi-select.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * MultiSelect: what stays chosen, what the trigger says, and what words it prints.
+ *
+ * PATH TAKEN: the rules that keep a selection stable while the list under it changes
+ * are plain functions, and the closed trigger renders in happy-dom. Opening the popup,
+ * typing, the server round trips and virtualization need a real browser, so
+ * e2e/multi-select.spec.ts drives those against a fake server.
+ */
+export {};

package/dist/ui/src/components/edyn/progress-line/index.d.ts

@@ -0,0 +1 @@
+export * from './progress-line';

package/dist/ui/src/components/edyn/progress-line/progress-line.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, CSSProperties } from 'react';
+/**
+ * The line's colour: an app sets --progress-line (on :root, or on any element above the
+ * line) to match its accent. The fallback is read where the line is, so it follows the
+ * theme, which a default declared once on :root would not.
+ */
+export declare const PROGRESS_LINE_COLOR = "var(--progress-line, var(--primary))";
+export interface IProgressLineProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'style' | 'role'> {
+    /** Work is under way. */
+    active: boolean;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A thin line in the accent (--progress-line, by default --primary) that runs along the top of what is loading (a table's rows
+ * under its header, a page under the top bar). It waits a moment before it shows, so
+ * quick work never flashes it; it eases towards the end without reaching it while the
+ * work runs; when the work is done it runs to the end and only then fades. More work
+ * before it has gone carries on from where it is. With reduced motion it is a
+ * full-width line that fades.
+ */
+export declare const ProgressLine: ({ active, label, className, style, ...props }: IProgressLineProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/progress-line/progress-line.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ProgressLine: waits before it shows, eases while the work runs, finishes before it fades.
+ *
+ * PATH TAKEN: the phase machine is timers and state, so happy-dom with the real
+ * clock covers it (the delays are 150, 150 and 200ms, waited out with margin
+ * rather than faked). Carrying on from where the line is after more work arrives
+ * mid-fade needs a real computed transform, so e2e/progress-line.spec.ts covers it.
+ */
+export {};

package/dist/ui/src/components/edyn/rich-text-content/allow-list.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The HTML the rich-text editor emits, and the only HTML RichTextContent renders. An app that
+ * sanitises on a server takes its allow-list from here: nothing outside these elements and this
+ * attribute ever comes out of the editor, whatever was pasted into it.
+ */
+export declare const RICH_TEXT_ELEMENTS: readonly ["p", "br", "hr", "strong", "em", "u", "ul", "ol", "li", "a"];
+/** The attributes each element may carry. Every other element carries none (no class, no style). */
+export declare const RICH_TEXT_ATTRIBUTES: Readonly<Record<string, readonly string[]>>;
+/** A link must be absolute and use one of these. `javascript:`, `data:` and relative links are refused. */
+export declare const RICH_TEXT_LINK_PROTOCOLS: readonly ["http", "https", "mailto"];
+export declare const isAllowedRichTextHref: (href: string) => boolean;

package/dist/ui/src/components/edyn/rich-text-content/index.d.ts

@@ -0,0 +1,2 @@
+export * from './allow-list';
+export * from './rich-text-content';

package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * How rich text looks, shared by the editor and by RichTextContent so a comment reads the same while it is typed and
+ * after it is saved. Descendant selectors rather than classes on the elements, because the HTML that is stored carries
+ * no classes.
+ */
+export declare const RICH_TEXT_BODY_CLASS = "text-sm leading-6 wrap-break-word [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_hr]:my-3 [&_hr]:border-0 [&_hr]:border-t [&_hr]:border-border [&_ol]:list-decimal [&_ol]:ps-5 [&_p+p]:mt-2 [&_ul]:list-disc [&_ul]:ps-5 [&_ul+p]:mt-2 [&_ol+p]:mt-2 [&_p+ul]:mt-2 [&_p+ol]:mt-2";
+export declare const RICH_TEXT_MENTION_CLASS = "rounded-sm bg-primary/10 px-1 py-0.5 font-medium text-primary";
+/** The HTML as React elements, keeping only what the editor can produce. Browser only (it needs a DOM parser). */
+export declare const richTextToNodes: (html: string) => ReactNode[];
+export interface IRichTextContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> {
+    /** The HTML to show. Only the editor's elements are rendered, whatever else it holds. */
+    html: string;
+}
+/**
+ * Shows rich text the editor produced (or any HTML), as the same elements the editor emits and nothing else:
+ * `p`, `br`, `hr`, `strong`, `em`, `u`, `ul`, `ol`, `li` and `a` with an `href` (http, https or mailto; it opens in a new tab
+ * with `rel="noopener noreferrer"`). Everything else is dropped and its text kept. Built as React elements, not injected
+ * as markup, so it is safe on HTML that has not been cleaned. A run like `@name@example.test` or `@assignees` is shown
+ * as a chip.
+ */
+export declare const RichTextContent: ({ html, className, ...props }: IRichTextContentProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/rich-text-content/rich-text-content.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * RichTextContent shows saved HTML as the editor's own elements and nothing else. It is built as React elements,
+ * so these assertions read the markup it renders: a script or a javascript: link that survived would show here.
+ *
+ * PATH TAKEN: happy-dom parses the input (DOMParser) and renderToStaticMarkup prints the result, which is enough
+ * for what this component decides (what stays, what goes, what is added). How it looks is the browser spec's.
+ */
+export {};

package/dist/ui/src/components/edyn/rich-text-editor/extensions.d.ts

@@ -0,0 +1,18 @@
+import { Extension } from '@tiptap/core';
+import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
+import { TMentionToText } from './serialize';
+import { IRichTextMentionItem } from './types';
+/** What the editor needs from the component while it runs. Held in a ref, so the extensions are built once. */
+export interface IEditorHost {
+    mentionEnabled: () => boolean;
+    maxLength: () => number | undefined;
+    toText: () => TMentionToText;
+    onSuggestion: (props: SuggestionProps<IRichTextMentionItem, IRichTextMentionItem> | null) => void;
+    onSuggestionKey: (props: SuggestionKeyDownProps) => boolean;
+}
+/**
+ * The editor's whole schema: paragraph, line break, bold, italic, underline, bullet and numbered lists, link, and the
+ * mention chip. Whatever else arrives (a paste, `value`) is not in the schema, so ProseMirror drops the markup and keeps
+ * the text.
+ */
+export declare const buildExtensions: (host: IEditorHost) => (Extension<any, any> | import('@tiptap/core').Node<any, any> | import('@tiptap/core').Node<import('@tiptap/extension-paragraph').ParagraphOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-hard-break').HardBreakOptions, any> | import('@tiptap/core').Mark<import('@tiptap/extension-bold').BoldOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-list').BulletListOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-list').ListItemOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-horizontal-rule').HorizontalRuleOptions, any> | import('@tiptap/core').Mark<import('@tiptap/extension-link').LinkOptions, any> | Extension<import('@tiptap/extensions').UndoRedoOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>)[];

package/dist/ui/src/components/edyn/rich-text-editor/index.d.ts

@@ -0,0 +1,3 @@
+export { RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS } from '../rich-text-content/allow-list';
+export * from './rich-text-editor';
+export * from './types';

package/dist/ui/src/components/edyn/rich-text-editor/mention-list.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { IRichTextLabels, IRichTextMention, IRichTextMentionItem } from './types';
+export interface IMentionListProps {
+    query: string;
+    /** Where the @ was typed. */
+    rect: (() => DOMRect | null) | null;
+    config: IRichTextMention;
+    labels: IRichTextLabels;
+    listId: string;
+    onPick: (item: IRichTextMentionItem) => void;
+    /** The editor keeps focus, so the list is driven by its keys: the editor calls this one. */
+    keyHandler: RefObject<((event: KeyboardEvent) => boolean) | null>;
+    /** The id of the option the editor should name as `aria-activedescendant`. */
+    onActiveChange: (optionId: string | undefined) => void;
+}
+/** The list that opens under the caret when the writer types @. */
+export declare const MentionList: ({ query, rect, config, labels, listId, onPick, keyHandler, onActiveChange }: IMentionListProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.d.ts

@@ -0,0 +1,53 @@
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import { IRichTextEditorHandle, IRichTextField, IRichTextLabels, IRichTextMention } from './types';
+export interface IRichTextEditorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'id'> {
+    /** The HTML, when the parent owns it. Pass back what `onChange` gave. An empty editor is `""`. */
+    value?: string;
+    /** The HTML to start from when the editor owns its own value. */
+    defaultValue?: string;
+    /** Called with the HTML after every edit. Only the elements in `RICH_TEXT_ELEMENTS` can appear, and `""` when there is no text. */
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Shows the content and keeps it selectable and copyable, with no toolbar. */
+    readOnly?: boolean;
+    /** Draws the error border and sets `aria-invalid`. The message is the form's to draw: point `aria-describedby` at it. */
+    invalid?: boolean;
+    /**
+     * Lines the box is tall when empty.
+     * @default 6
+     */
+    minRows?: number;
+    /**
+     * Lines it grows to before it scrolls inside.
+     * @default 20
+     */
+    maxRows?: number;
+    /** The most characters of text (a mention counts as the text it is written as). An edit past it is refused. Off by default. */
+    maxLength?: number;
+    /** Turns @ into a search the app answers. Without it, @ is an ordinary character. */
+    mention?: IRichTextMention;
+    /** Adds an "Insert a field" menu that writes `{{id}}` at the caret. */
+    fields?: IRichTextField[];
+    /**
+     * Whether the formatting toolbar shows.
+     * @default true
+     */
+    toolbar?: boolean;
+    /** Replaces any of the strings the editor shows (the defaults are English). */
+    labels?: Partial<IRichTextLabels>;
+    /** On the editable element, so a form can name it. */
+    id?: string;
+    autoFocus?: boolean;
+    /** Called with the files when the writer pastes only files (a screenshot). Without it, such a paste does nothing. */
+    onPasteFiles?: (files: File[]) => void;
+    /** Gives `insertText` and `focus`, for buttons outside the editor. */
+    ref?: Ref<IRichTextEditorHandle>;
+}
+/**
+ * A small rich-text field: paragraphs, bold, italic, underline, bulleted and numbered lists and links, with optional
+ * @mentions the app answers asynchronously. The value is HTML in and out, and only the elements in `RICH_TEXT_ELEMENTS`
+ * can come out (no class, no style), whatever is pasted. A mention is a chip while editing and plain text in the HTML.
+ * The server should still sanitise: this is a convenience for the writer, not a security boundary.
+ */
+export declare const RichTextEditor: ({ value, defaultValue, onChange, placeholder, disabled, readOnly, invalid, minRows, maxRows, maxLength, mention, fields, toolbar, labels, id, autoFocus, onPasteFiles, ref, className, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: IRichTextEditorProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The editor's schema decides what HTML can come out, whatever goes in. These tests drive the real extension set
+ * through a headless ProseMirror editor and read what it serialises, so the allow-list the docs promise is the one
+ * that is checked. Typing, focus and the mention list need a real browser: e2e/rich-text-editor.spec.ts.
+ */
+export {};

package/dist/ui/src/components/edyn/rich-text-editor/serialize.d.ts

@@ -0,0 +1,13 @@
+import { Node as TProseNode } from '@tiptap/pm/model';
+import { IRichTextMention } from './types';
+export type TMentionToText = NonNullable<IRichTextMention['toText']>;
+export declare const defaultMentionToText: TMentionToText;
+/**
+ * The document as HTML. Not `editor.getHTML()`: that would write a mention as its chip element, and
+ * the HTML must carry the plain text the app chose (`@person@example.test`) and nothing else.
+ */
+export declare const serializeDocument: (doc: TProseNode, toText: TMentionToText) => string;
+/** No text and no mention. A document of blank paragraphs, spaces and line breaks is empty too. */
+export declare const isDocumentEmpty: (doc: TProseNode) => boolean;
+/** Characters the HTML text will have: a mention counts as the text it is written as. */
+export declare const countCharacters: (doc: TProseNode, toText: TMentionToText) => number;

package/dist/ui/src/components/edyn/rich-text-editor/sync.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+/**
+ * Whether commands may be called on the editor. TipTap builds an editor during the render, mounts its view later, and
+ * destroys one that has not been mounted within a moment (useEditor then makes a new one), so an effect can be handed an
+ * editor that is not there yet or no longer is. `isDestroyed` is true for both: it reads true until the view exists. A
+ * destroyed editor has no command manager, so `editor.commands` throws on it.
+ */
+export declare const isLive: (editor: Editor) => boolean;
+/**
+ * Brings the editor to a value the parent passed in, if it is one the editor did not just report itself.
+ * `known` is the last HTML the editor and the parent agree on (the starting value, then whatever the editor emitted or was
+ * given). The caret stays where it was, kept inside the new content, so a value changed from outside while the writer is
+ * typing does not throw the caret to the start.
+ */
+export declare const syncValue: (editor: Editor, value: string | undefined, known: {
+    current: string | undefined;
+}) => void;
+/** Sets whether the editor can be edited without telling the app something changed (TipTap emits an update by default). */
+export declare const syncEditable: (editor: Editor, editable: boolean) => void;

package/dist/ui/src/components/edyn/rich-text-editor/sync.test.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Keeping the editor in step with the parent's value without ever touching an editor that is not there. A controlled
+ * RichTextEditor crashed on mount in rc.7 ("Cannot read properties of null (reading 'commands')"): TipTap makes the editor
+ * during the render, mounts its view later and destroys one that is not mounted in time, and the value effect ran at the
+ * first commit for every controlled value and called a command on whatever editor it was handed.
+ *
+ * PATH TAKEN: the destroyed editor is reproduced as the state TipTap leaves it in (no command manager, so `commands`
+ * throws), because the timing that produces it in an app cannot be driven from a test. The real behaviour in a browser,
+ * mount order included, is e2e/rich-text-editor-lifecycle.spec.ts.
+ */
+export {};

package/dist/ui/src/components/edyn/rich-text-editor/toolbar.d.ts

@@ -0,0 +1,20 @@
+import { Editor } from '@tiptap/core';
+import { RefObject } from 'react';
+import { IRichTextField, IRichTextLabels } from './types';
+/** A typed address becomes a link: "name@example.test" a mailto, "example.test" an https address. */
+export declare const normalizeHref: (raw: string) => string;
+/** Where the writer's selection was when the link box opened: moving focus into the box must not lose it. */
+export interface ILinkRange {
+    from: number;
+    to: number;
+}
+export interface IRichTextToolbarProps {
+    linkRange: RefObject<ILinkRange | null>;
+    editor: Editor;
+    labels: IRichTextLabels;
+    fields: IRichTextField[] | undefined;
+    disabled: boolean;
+    linkOpen: boolean;
+    onLinkOpenChange: (open: boolean) => void;
+}
+export declare const RichTextToolbar: ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }: IRichTextToolbarProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/rich-text-editor/types.d.ts

@@ -0,0 +1,68 @@
+/** One person (or anything else) the app offers when the writer types @. */
+export interface IRichTextMentionItem {
+    /** What the HTML carries. By default the value is written as `@${id}`, so an email address works as an id. */
+    id: string;
+    /** What the chip shows while the text is being edited. */
+    label: string;
+    /** A second, muted line in the list (a role, an email address). */
+    secondary?: string;
+}
+/** A page of results. Return a plain array instead when there is only ever one page. */
+export interface IRichTextMentionPage {
+    items: IRichTextMentionItem[];
+    /** True when asking for `page + 1` would return more. The list loads it when it is scrolled to the end. */
+    hasMore?: boolean;
+}
+export interface IRichTextMentionSearchOptions {
+    /** 1-based. */
+    page: number;
+    /** Aborted when the writer types on or closes the list: pass it to `fetch` so a stale search stops. */
+    signal: AbortSignal;
+}
+export type TRichTextMentionSearch = (query: string, options: IRichTextMentionSearchOptions) => Promise<IRichTextMentionItem[] | IRichTextMentionPage>;
+export interface IRichTextMention {
+    /** Asked for the first page when the writer types @ and again for every change of the text after it, debounced. */
+    search: TRichTextMentionSearch;
+    /**
+     * How a mention is written into the HTML. The chip exists only while editing; the HTML carries this text
+     * and no element. Default: `@${item.id}`.
+     */
+    toText?: (item: Pick<IRichTextMentionItem, 'id' | 'label'>) => string;
+    /** Milliseconds to wait after the last keystroke before searching. Default 250. */
+    debounce?: number;
+}
+/** A field of a template (a mail merge token). Inserted as the plain text `{{id}}`. */
+export interface IRichTextField {
+    id: string;
+    label: string;
+}
+/** What a ref to the editor can do, for a button outside it (a merge tag, say). */
+export interface IRichTextEditorHandle {
+    /** Writes plain text at the caret (over the selection), and puts focus back in the editor. */
+    insertText: (text: string) => void;
+    focus: () => void;
+}
+/** Every string the editor shows, so an app can translate them. */
+export interface IRichTextLabels {
+    toolbar: string;
+    bold: string;
+    italic: string;
+    underline: string;
+    bulletList: string;
+    numberedList: string;
+    link: string;
+    horizontalRule: string;
+    insertField: string;
+    linkAddress: string;
+    linkApply: string;
+    linkRemove: string;
+    linkInvalid: string;
+    mentionList: string;
+    mentionSearching: string;
+    mentionEmpty: string;
+    mentionError: string;
+    mentionLoadingMore: string;
+    /** Announced as the list changes. `{count}` is replaced. */
+    mentionResults: string;
+}
+export declare const DEFAULT_RICH_TEXT_LABELS: IRichTextLabels;

package/dist/ui/src/components/edyn/video-player/video-player.d.ts

@@ -1,6 +1,6 @@
 import { TCssLength } from '../../../lib/utils';
 import * as React from 'react';
-export interface IVideoPlayerProps {
+export interface IVideoPlayerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'title' | 'onPlay' | 'onPause' | 'onEnded' | 'onTimeUpdate'> {
     /** Video source URL. */
     src?: string;
     /** Still frame shown before playback starts. */
@@ -52,4 +52,4 @@ export interface IVideoPlayerProps {
  * both themes. Video is dark, so the letterbox and controls must stay dark and
  * light-on-dark; this re-scopes existing tokens rather than hardcoding a colour.
  */
-export declare const VideoPlayer: ({ src, poster, title, description, muted, loop, disabled, width, height, ratio, className, "aria-label": ariaLabel, onPlay, onPause, onEnded, onTimeUpdate, }: IVideoPlayerProps) => React.JSX.Element;
+export declare const VideoPlayer: ({ src, poster, title, description, muted, loop, disabled, width, height, ratio, className, "aria-label": ariaLabel, style, onPlay, onPause, onEnded, onTimeUpdate, ...props }: IVideoPlayerProps) => React.JSX.Element;

package/dist/ui/src/components/forwarded-props.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Every exported component hands `aria-label`, `id` and `data-testid` to the element it documents as its root or main part.
+ * A component that took a closed list of props dropped the rest (Tabs' tablist had no accessible name even though the app
+ * passed `aria-label`), so this renders each one with the three and finds them again.
+ *
+ * Components that are not covered here, and why, are listed in INTENTIONAL_DROPS.
+ */
+export {};

package/dist/ui/src/components/ui/accordion/accordion.d.ts

@@ -1,5 +1,6 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import type * as React from 'react';
-export interface IAccordionProps {
+export interface IAccordionProps extends Omit<BaseAccordion.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'className' | 'children'> {
     value?: string[];
     defaultValue?: string[];
     onValueChange?: (value: string[]) => void;
@@ -7,21 +8,21 @@ export interface IAccordionProps {
     className?: string;
     children: React.ReactNode;
 }
-export declare const Accordion: ({ value, defaultValue, onValueChange, multiple, className, children }: IAccordionProps) => React.JSX.Element;
-export interface IAccordionItemProps {
+export declare const Accordion: ({ value, defaultValue, onValueChange, multiple, className, children, ...props }: IAccordionProps) => React.JSX.Element;
+export interface IAccordionItemProps extends Omit<BaseAccordion.Item.Props, 'value' | 'disabled' | 'className' | 'children'> {
     value: string;
     disabled?: boolean;
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionItem: ({ value, disabled, className, children }: IAccordionItemProps) => React.JSX.Element;
-export interface IAccordionTriggerProps {
+export declare const AccordionItem: ({ value, disabled, className, children, ...props }: IAccordionItemProps) => React.JSX.Element;
+export interface IAccordionTriggerProps extends Omit<BaseAccordion.Trigger.Props, 'className' | 'children'> {
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionTrigger: ({ className, children }: IAccordionTriggerProps) => React.JSX.Element;
-export interface IAccordionContentProps {
+export declare const AccordionTrigger: ({ className, children, ...props }: IAccordionTriggerProps) => React.JSX.Element;
+export interface IAccordionContentProps extends Omit<BaseAccordion.Panel.Props, 'className' | 'children'> {
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionContent: ({ className, children }: IAccordionContentProps) => React.JSX.Element;
+export declare const AccordionContent: ({ className, children, ...props }: IAccordionContentProps) => React.JSX.Element;

package/dist/ui/src/components/ui/attachment/attachment.d.ts

@@ -10,7 +10,7 @@ export declare const Attachment: ({ className, state, size, orientation, ...prop
     state?: "idle" | "uploading" | "processing" | "error" | "done";
 }) => React.JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-    variant?: "image" | "icon" | null | undefined;
+    variant?: "icon" | "image" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const AttachmentMedia: ({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>) => React.JSX.Element;
 export declare const AttachmentContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/ui/src/components/ui/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 export declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "success" | "warning" | "info" | null | undefined;
     size?: "default" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Badge: ({ className, variant, size, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/ui/src/components/ui/button/button.behavior.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A Button that renders a link has to stay a link.
+ *
+ * PATH TAKEN: the roles and attributes Base UI emits do not depend on layout, so
+ * happy-dom is enough to assert what assistive technology would be told. The
+ * axe scan over the demo pages covers it again in a real browser.
+ */
+export {};

package/dist/ui/src/components/ui/button/button.d.ts

@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Button: ({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => import('react').JSX.Element;

package/dist/ui/src/components/ui/command/command.d.ts

@@ -10,7 +10,23 @@ export declare const CommandDialog: ({ title, description, children, className,
     children: React.ReactNode;
 }) => React.JSX.Element;
 export declare const CommandInput: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) => React.JSX.Element;
-export declare const CommandList: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) => React.JSX.Element;
+/**
+ * The palette's results list. The scroll container is the DS ScrollArea rather
+ * than the primitive's own `overflow-y-auto`, because a list of results that
+ * continues past the fold with no bar and no fade reads as a complete list. The
+ * cap stays overridable: `cn` lets a caller's own `max-h-*` replace the default.
+ *
+ * The ScrollArea wraps the list from OUTSIDE rather than lining it: cmdk's list
+ * carries `role="listbox"`, and a listbox may not contain presentation wrappers
+ * (axe flags that as a critical aria-required-children violation). The options
+ * have to stay direct children of the element that holds the role.
+ *
+ * cmdk keeps the active item in view with `scrollIntoView({ block: 'nearest' })`
+ * on the item, which acts on the nearest scrollable ancestor, so that keeps
+ * working now that the viewport is the one that scrolls. `scroll-py-1` goes on
+ * the viewport for the same reason: it is what pads that scroll.
+ */
+export declare const CommandList: ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) => React.JSX.Element;
 export declare const CommandEmpty: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) => React.JSX.Element;
 export declare const CommandGroup: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) => React.JSX.Element;
 export declare const CommandSeparator: ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) => React.JSX.Element;

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.d.ts

@@ -3,7 +3,18 @@ import type * as React from 'react';
 export declare const DropdownMenu: ({ ...props }: MenuPrimitive.Root.Props) => React.JSX.Element;
 export declare const DropdownMenuPortal: ({ ...props }: MenuPrimitive.Portal.Props) => React.JSX.Element;
 export declare const DropdownMenuTrigger: ({ ...props }: MenuPrimitive.Trigger.Props) => React.JSX.Element;
-export declare const DropdownMenuContent: ({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
+/**
+ * Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown
+ * for as long as the menu overflows and a fade on whichever end is cut off.
+ *
+ * Base UI puts `role="menu"` on this popup itself and offers no inner list part
+ * to move it onto, so the ScrollArea sits INSIDE the role. That is only legal
+ * because ScrollArea drops the `role="presentation"` Base UI gives its root,
+ * viewport and content: a menu may not own presentation wrappers (axe reports
+ * a critical aria-required-children violation), but it may own plain divs.
+ * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.
+ */
+export declare const DropdownMenuContent: ({ align, alignOffset, side, sideOffset, className, children, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
 export declare const DropdownMenuGroup: ({ ...props }: MenuPrimitive.Group.Props) => React.JSX.Element;
 export declare const DropdownMenuLabel: ({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
     inset?: boolean;

package/dist/ui/src/components/ui/input-group/input-group.d.ts

@@ -6,7 +6,7 @@ export interface IInputGroupProps extends React.ComponentProps<'div'> {
 export declare const InputGroup: ({ className, ...props }: IInputGroupProps) => React.JSX.Element;
 export type TInputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IInputGroupAddonProps extends React.ComponentProps<'div'>, VariantProps<typeof inputGroupAddonVariants> {
 }

package/dist/ui/src/components/ui/item/item.d.ts

@@ -10,7 +10,7 @@ declare const itemVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Item: ({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "image" | "icon" | null | undefined;
+    variant?: "default" | "icon" | "image" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const ItemMedia: ({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) => React.JSX.Element;
 export declare const ItemContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;