@exsto/ds 0.0.0-stage → 0.0.1-rc.10

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/index.d.ts

@@ -0,0 +1 @@
+export * from './video-player';

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

@@ -0,0 +1,55 @@
+import { TCssLength } from '../../../lib/utils';
+import * as React from 'react';
+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. */
+    poster?: string;
+    /** Primary label rendered in the control overlay. */
+    title?: string;
+    /** Secondary label rendered under the title. */
+    description?: string;
+    /** Start muted. Required by browsers for unattended autoplay. */
+    muted?: boolean;
+    /** Loop playback when the video ends. */
+    loop?: boolean;
+    /** Disable every control without hiding the player. */
+    disabled?: boolean;
+    /**
+     * Box width. A number is px, a string is any CSS length (`'100%'`, `'34rem'`).
+     * Omitted, the player fills the width it is given.
+     */
+    width?: TCssLength;
+    /**
+     * Box height. A number is px, a string is any CSS length. Omitted, the height
+     * comes from `ratio`. Setting this letterboxes a source that does not match.
+     */
+    height?: TCssLength;
+    /**
+     * Aspect ratio of the media box, as a CSS `aspect-ratio` value (`'16/9'`).
+     *
+     * Defaults to `auto`, so the height follows the source's own dimensions and a
+     * portrait or 4:3 clip is shown whole rather than letterboxed. Pair `auto`
+     * with a `poster`: a `<video>` reports a 300x150 intrinsic size until metadata
+     * arrives, and the poster's dimensions stand in for it, which is what stops
+     * the box from resizing when the first frame lands.
+     *
+     * Ignored when `height` is set.
+     */
+    ratio?: string;
+    className?: string;
+    'aria-label'?: string;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (currentTime: number, duration: number) => void;
+}
+/**
+ * Media surface with an overlaid control bar: title and description, elapsed and
+ * total time, a seekable scrubber, play/pause, volume, and fullscreen.
+ *
+ * The root carries the `dark` class so its tokens resolve to the dark palette in
+ * 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, 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.behavior.test.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A11y + interaction test for Accordion.
+ *
+ * Uses happy-dom to verify:
+ *   1. Triggers are rendered as buttons with aria-expanded.
+ *   2. Panels are present in the DOM (keepMounted=true on AccordionContent).
+ *   3. Clicking a trigger fires onValueChange with the correct value.
+ *   4. aria-expanded flips to true on the opened item after re-render.
+ *
+ * Full real-browser keyboard navigation (ArrowDown/Up/Home/End/Enter/Space) is
+ * proven separately in e2e/accordion-keyboard.spec.ts.
+ */
+export {};

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

@@ -0,0 +1,28 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import type * as React from 'react';
+export interface IAccordionProps extends Omit<BaseAccordion.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'className' | 'children'> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    multiple?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+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, ...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, ...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, ...props }: IAccordionContentProps) => React.JSX.Element;

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

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

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const Alert: ({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) => React.JSX.Element;
+export declare const AlertTitle: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export declare const AlertDescription: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export declare const AlertAction: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export {};

package/dist/ui/src/components/ui/alert/index.d.ts

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

package/dist/ui/src/components/ui/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,17 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { Button } from '../button';
+import type * as React from 'react';
+export declare const AlertDialog: ({ ...props }: AlertDialogPrimitive.Root.Props) => React.JSX.Element;
+export declare const AlertDialogTrigger: ({ ...props }: AlertDialogPrimitive.Trigger.Props) => React.JSX.Element;
+export declare const AlertDialogPortal: ({ ...props }: AlertDialogPrimitive.Portal.Props) => React.JSX.Element;
+export declare const AlertDialogOverlay: ({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) => React.JSX.Element;
+export declare const AlertDialogContent: ({ className, size, ...props }: AlertDialogPrimitive.Popup.Props & {
+    size?: "default" | "sm";
+}) => React.JSX.Element;
+export declare const AlertDialogHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export declare const AlertDialogFooter: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export declare const AlertDialogMedia: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export declare const AlertDialogTitle: ({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) => React.JSX.Element;
+export declare const AlertDialogDescription: ({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) => React.JSX.Element;
+export declare const AlertDialogAction: ({ className, ...props }: React.ComponentProps<typeof Button>) => React.JSX.Element;
+export declare const AlertDialogCancel: ({ className, variant, size, ...props }: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">) => React.JSX.Element;

package/dist/ui/src/components/ui/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './alert-dialog';

package/dist/ui/src/components/ui/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,3 @@
+export declare const AspectRatio: ({ ratio, className, ...props }: React.ComponentProps<"div"> & {
+    ratio: number;
+}) => import('react').JSX.Element;

package/dist/ui/src/components/ui/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+export * from './aspect-ratio';