prime-ui-kit 0.9.3 → 0.11.0

package/dist/components/color-picker/ColorPresets.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import type { PositionAlign, PositionSide } from "@/hooks/usePosition";
-import type { ControlSize } from "@/internal/states";
-import { COLOR_PRESETS, type ColorPreset } from "@/internal/swatch";
+import { type PositionAlign, type PositionSide } from "../../hooks/usePosition";
+import type { ControlSize } from "../../internal/states";
+import { COLOR_PRESETS, type ColorPreset } from "../../internal/swatch";
 export { COLOR_PRESETS, type ColorPreset };
 export type ColorPresetsLabels = {
     /** Trigger name prefix: `aria-label` = "<trigger>: <color name>". */
@@ -33,7 +33,7 @@ export type ColorPresetsRootProps = {
     labels?: Partial<ColorPresetsLabels>;
     children: React.ReactNode;
 };
-declare function ColorPresetsRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, presets, columns: columnsProp, size: sizeProp, disabled, allowEmpty, closeOnSelect, labels: labelsProp, children, }: ColorPresetsRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ColorPresetsRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, presets, columns: columnsProp, size: sizeProp, disabled: disabledProp, allowEmpty, closeOnSelect, labels: labelsProp, children, }: ColorPresetsRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ColorPresetsRoot {
     var displayName: string;
 }
@@ -48,20 +48,27 @@ declare function Swatch(props: ColorPresetsSwatchProps): import("react/jsx-runti
 declare namespace Swatch {
     var displayName: string;
 }
-export type ColorPresetsTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "value"> & {
-    /**
-     * `false` (default) — the kit square swatch button of the Root tier. `true` — `children` (one
-     * element, e.g. `Button.Root` with `ColorPresets.Swatch`) becomes the trigger.
-     */
-    asChild?: boolean;
-    children?: React.ReactElement;
-    ref?: React.Ref<HTMLButtonElement>;
+export type ColorPresetsTriggerProps = {
+    /** One element that opens the panel: `ColorPresets.SwatchButton`, or e.g. `Button.Root` with `ColorPresets.Swatch`. */
+    children: React.ReactElement;
 };
-/** Opens the panel. Name: `aria-label` ?? "<labels.trigger>: <color name>". */
-declare function Trigger({ asChild, children, className, onKeyDown, "aria-label": ariaLabel, ref: forwardedRef, ...rest }: ColorPresetsTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A slot: clones its one child into the panel's trigger. Name «<labels.trigger>: <color name>»,
+ * `disabled` from the root, ArrowDown / ArrowUp open the panel; the child's own `aria-label`,
+ * `disabled` and handlers win (Slot merge rules).
+ */
+declare function Trigger({ children }: ColorPresetsTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Trigger {
     var displayName: string;
 }
+export type ColorPresetsSwatchButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/** The kit square swatch button of the root tier: the current color, for `ColorPresets.Trigger`. */
+declare function SwatchButton({ className, ...rest }: ColorPresetsSwatchButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SwatchButton {
+    var displayName: string;
+}
 export type ColorPresetsContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
     /** Visible heading above the grid; also the list's accessible name (else `labels.list`). */
     label?: React.ReactNode;
@@ -78,6 +85,7 @@ declare namespace Content {
 export declare const ColorPresets: {
     Root: typeof ColorPresetsRoot;
     Trigger: typeof Trigger;
+    SwatchButton: typeof SwatchButton;
     Swatch: typeof Swatch;
     Content: typeof Content;
 };

package/dist/components/color-swatches/ColorSwatches.d.ts

@@ -1,6 +1,6 @@
-import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
-import type { ControlSize } from "@/internal/states";
-import { type ColorPreset } from "@/internal/swatch";
+import { type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
+import type { ControlSize } from "../../internal/states";
+import { type ColorPreset } from "../../internal/swatch";
 export type ColorSwatchesLabels = {
     /** Accessible name of the group when there is no visible `label` and no `aria-label`. */
     group: string;
@@ -33,8 +33,13 @@ export type ColorSwatchesProps = FieldRootDomProps & Omit<FieldFrameProps, "focu
     "aria-describedby"?: string;
     labels?: Partial<ColorSwatchesLabels>;
 };
+/**
+ * Columns of a grid of `count` swatches in `width`: as many tier-sized swatches as fit, then spread
+ * evenly over the rows that needs (16 in a row of 14 → two rows of 8, not 14 + 2).
+ */
+export declare function balancedColumns(count: number, width: number, cell: number, gap: number): number;
 /**
  * Inline color choice: a wrapping grid of swatches, one selected (`role="radiogroup"`).
  * Fits forms and dialogs where opening a palette popover would be one step too many.
  */
-export declare function ColorSwatches({ value: valueProp, defaultValue, onValueChange, presets, size: sizeProp, disabled, invalid, allowEmpty, name, id, className, label, required, optional, hint, error, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorSwatchesProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorSwatches({ value: valueProp, defaultValue, onValueChange, presets, size: sizeProp, disabled: disabledProp, invalid, allowEmpty, name, id, className, label, required, optional, hint, error, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorSwatchesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/command-menu/CommandMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import type { ControlSize } from "../../internal/states";
 export type CommandMenuLabels = {
     /** Default placeholder and accessible name of `CommandMenu.Input`. */
     search: string;
@@ -7,17 +7,42 @@ export type CommandMenuLabels = {
     empty: string;
     /** Second line of `CommandMenu.Empty`; `""` hides it. */
     emptyHint: string;
+    /** Announced while `loading` or `loadingMore`. */
+    loading: string;
+    /** The retry button of the load error (`onRetry`). */
+    retry: string;
 };
 export type CommandMenuRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue"> & {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** The query (controlled); together with `onValueChange`. Cleared when the palette closes. */
-    value?: string;
+    /** The query (controlled); together with `onSearchChange`. Cleared when the palette closes. */
+    search?: string;
     /** The initial query, uncontrolled. Default `""`. */
-    defaultValue?: string;
+    defaultSearch?: string;
     /** Called with the new query (typing, and `""` when the palette closes). */
-    onValueChange?: (value: string) => void;
+    onSearchChange?: (search: string) => void;
+    /**
+     * The palette filters its items by the query. `false` when the results come from a server:
+     * every item shows, highlighting of the query stays.
+     */
+    filter?: boolean;
+    /** The first results are loading: skeleton rows while no item matches; `aria-busy`. */
+    loading?: boolean;
+    /** More results are loading at the end: skeleton rows after the items. */
+    loadingMore?: boolean;
+    /** More results exist: reaching the end of the list calls `onLoadMore`. */
+    hasMore?: boolean;
+    /** Asked once per round when the end of the list scrolls into view or the arrows reach it. */
+    onLoadMore?: () => void | Promise<void>;
+    /** The results failed to load: replaces the list with the message in `role="alert"`. */
+    loadError?: React.ReactNode;
+    /**
+     * A retry button (`labels.retry`) under `loadError`; Enter in the search field runs it too.
+     * Return the request's promise: the button is loading and takes no second press until it
+     * settles; resolve — swap `loadError` for the results; reject — the error stays.
+     */
+    onRetry?: () => void | Promise<void>;
     /** Escape closes the palette. Default `true`. */
     closeOnEscape?: boolean;
     /** A click on the scrim closes the palette. Default `true`. */
@@ -33,7 +58,7 @@ export type CommandMenuRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "c
     /** The dialog panel. */
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function CommandMenuRoot({ open, defaultOpen, onOpenChange, value, defaultValue, onValueChange, closeOnEscape, closeOnOutsideClick, size, labels: labelsProp, className, children, ...rest }: CommandMenuRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandMenuRoot({ open, defaultOpen, onOpenChange, search: searchProp, defaultSearch, onSearchChange, filter, loading, loadingMore, hasMore, onLoadMore, loadError, onRetry, closeOnEscape, closeOnOutsideClick, size, labels: labelsProp, className, children, ...rest }: CommandMenuRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CommandMenuRoot {
     var displayName: string;
 }
@@ -57,7 +82,7 @@ export type CommandMenuInputProps = Omit<React.InputHTMLAttributes<HTMLInputElem
     ref?: React.Ref<HTMLInputElement>;
 };
 /**
- * The search row: a search icon and the query field (the query is `CommandMenu.Root` `value`). It
+ * The search row: a search icon and the query field (the query is `CommandMenu.Root` `search`). It
  * is the permanent focus of the palette, so it draws no focus ring (foundation §7); focus lands
  * here on open; arrows, Home, End and Enter drive the list from it.
  */
@@ -68,8 +93,12 @@ declare namespace CommandMenuInput {
 export type CommandMenuListProps = Omit<React.HTMLAttributes<HTMLElement>, "role" | "id"> & {
     ref?: React.Ref<HTMLElement>;
 };
-/** The scrolling `role="listbox"` of results under the search row. */
-declare function CommandMenuList({ className, ...rest }: CommandMenuListProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The scrolling `role="listbox"` of results under the search row. It also draws the load states:
+ * skeleton rows while the first results load, a load error with a retry, skeleton rows at the end
+ * while more load; the states cross-fade.
+ */
+declare function CommandMenuList({ className, children, ref, ...rest }: CommandMenuListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CommandMenuList {
     var displayName: string;
 }
@@ -129,8 +158,9 @@ export type CommandMenuEmptyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
- * Shown only while nothing matches the query: `labels.empty` and `labels.emptyHint`; `children`
- * is an action under them.
+ * Shown only while nothing matches the query and nothing loads: `labels.empty` and
+ * `labels.emptyHint`; `children` is an action under them — a button, or a `CommandMenu.Item`
+ * («Создать «…»») that the arrows and Enter reach and that never counts as a match.
  */
 declare function CommandMenuEmpty({ children, ...rest }: CommandMenuEmptyProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace CommandMenuEmpty {

package/dist/components/composer/Composer.d.ts

@@ -0,0 +1,234 @@
+import * as React from "react";
+import type { UploadItem, UploadQueue } from "../../hooks/useUploadQueue";
+import { type MediaKind } from "../../internal/mediaKind";
+import { type ControlSize } from "../../internal/states";
+import { type ComposerRecording, type ComposerRecordMode } from "./useRecorder";
+export type { ComposerFormat } from "./format";
+export type { ComposerRecording, ComposerRecordMode } from "./useRecorder";
+export type ComposerLabels = {
+    /** Accessible name of the composer `<form>`. */
+    region: string;
+    /** Placeholder and accessible name of the message field. */
+    placeholder: string;
+    /** Name of the send button. */
+    send: string;
+    /** Name of the send button while a message is edited. */
+    save: string;
+    /** Name of the record button in voice mode. */
+    recordVoice: string;
+    /** Name of the record button in video mode. */
+    recordVideo: string;
+    /** Description of the record button: how to record. */
+    recordHint: string;
+    /** Description of the record button when it also switches voice and video. */
+    recordSwitchHint: string;
+    /** Announced when the record button switches to voice messages. */
+    recordModeVoice: string;
+    /** Announced when the record button switches to video messages. */
+    recordModeVideo: string;
+    /** Name of the send button while recording. */
+    sendRecording: string;
+    /** Name of the button that throws a recording away. */
+    cancelRecording: string;
+    /** Name of the button that pauses a recording. */
+    pauseRecording: string;
+    /** Name of the button that resumes a paused recording. */
+    resumeRecording: string;
+    /** Hint while a recording is held: slide the pointer away to cancel. */
+    slideToCancel: string;
+    /** Announced when a recording starts. */
+    recordingStarted: string;
+    /** Announced when a held recording is locked and goes on without holding. */
+    recordingLocked: string;
+    /** Announced when a recording is thrown away. */
+    recordingCanceled: string;
+    /** Announced when a recording is paused. */
+    recordingPaused: string;
+    /** Announced when a paused recording goes on. */
+    recordingResumed: string;
+    /** Announced when a recording is handed over to send. */
+    recordingSent: string;
+    /** Error when the browser refuses the microphone or the camera. */
+    recordDenied: string;
+    /** Error when there is no microphone or camera. */
+    recordMissing: string;
+    /** Error when a recording cannot start for another reason. */
+    recordFailed: string;
+    /** Name of the paperclip (the picker, or the menu of attachment kinds). */
+    attach: string;
+    /** Accessible name of the strip of attachments. */
+    attachments: string;
+    /** The option that sends the attached photos and videos as files, uncompressed. */
+    sendAsFiles: string;
+    /** Accessible name of the formatting toolbar. */
+    formatting: string;
+    bold: string;
+    italic: string;
+    strikethrough: string;
+    code: string;
+    link: string;
+    quote: string;
+    /** Name of the close button of a reply bar. */
+    cancelReply: string;
+    /** Name of the close button of an edit bar. */
+    cancelEdit: string;
+};
+/** An attached photo or video: the uploaded queue item and what it shows. */
+export type ComposerMediaItem = UploadItem & {
+    type: MediaKind;
+};
+/**
+ * What `onSend` receives: the text (trimmed); the uploaded `media` (photos and videos, in the order
+ * of the tray — one album) and `files` (everything else, or every file with «как файлы»); and the
+ * `value` of the shown `Composer.Context` — `replyTo` for a reply, `editOf` for an edit.
+ */
+export type ComposerMessage = {
+    text: string;
+    media: readonly ComposerMediaItem[];
+    files: readonly UploadItem[];
+    replyTo?: string;
+    editOf?: string;
+};
+/**
+ * What the person is doing in the composer, for the «печатает…» signal of the other side:
+ * `typing`, recording a `voice` message or a `video` message.
+ */
+export type ComposerActivity = "typing" | "voice" | "video";
+/** The queue the composer attaches files to (`useUploadQueue`). */
+export type ComposerQueue = Pick<UploadQueue, "items" | "add" | "retry" | "remove" | "clear" | "move">;
+/** A slow event: return a Promise to show it pending (resolve = done, reject = nothing changes). */
+type AsyncEvent<T> = (value: T) => void | Promise<unknown>;
+/** Reply to a message, or edit one of yours. */
+export type ComposerContextMode = "reply" | "edit";
+export type ComposerRootProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "children" | "defaultValue" | "onSubmit"> & {
+    /** The text of the message (controlled). */
+    value?: string;
+    /** Initial text, uncontrolled (a saved draft). */
+    defaultValue?: string;
+    /** Every change of the text: typing, formatting, the field cleared after a send. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Sends the message: Enter, Mod+Enter or the send button. Return a Promise to keep the text
+     * while it runs (the send button is busy, the field read-only): resolve clears the field and the
+     * attachments and closes the reply / edit bar (its `onDismiss`), reject leaves everything as it was.
+     */
+    onSend?: AsyncEvent<ComposerMessage>;
+    /**
+     * What the person is doing changed: `typing` from the first keystroke until the text is sent,
+     * cleared or rests for 3 s; `voice` / `video` while a recording shows; `null` — nothing. Fires on
+     * a change only (and `null` on unmount while active): send the signal to the other side from here.
+     */
+    onActivityChange?: (activity: ComposerActivity | null) => void;
+    /** A voice message was recorded. With it (or `onSendVideoNote`) an empty field shows the record button. */
+    onSendVoice?: AsyncEvent<ComposerRecording>;
+    /**
+     * A round video message was recorded. With it a double click / double tap (or ↑ ↓) on the record
+     * button switches voice and video.
+     */
+    onSendVideoNote?: AsyncEvent<ComposerRecording>;
+    /** ↑ in an empty field: open your last message for editing. */
+    onEditLast?: () => void;
+    /** What the record button records (controlled); `video` needs `onSendVideoNote`. */
+    recordMode?: ComposerRecordMode;
+    /** Initial record mode, uncontrolled. */
+    defaultRecordMode?: ComposerRecordMode;
+    /** A double click / double tap (or ↑ ↓) on the record button switched voice and video. */
+    onRecordModeChange?: (mode: ComposerRecordMode) => void;
+    /** Attachments: the files of the paperclip, a paste and a drop go into it and show above the field. */
+    queue?: ComposerQueue;
+    /** The formatting toolbar on a text selection and the formatting hotkeys. */
+    formatting?: boolean;
+    /** Tier. Default: the tier of the surrounding control, else `m`. */
+    size?: ControlSize;
+    disabled?: boolean;
+    labels?: Partial<ComposerLabels>;
+    /** The message `<textarea>` (focus it after «Ответить» in a message menu). */
+    inputRef?: React.Ref<HTMLTextAreaElement>;
+    /** `Composer.Attach` (the start of the row) and `Composer.Context` (above the field). */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLFormElement>;
+};
+declare function ComposerRoot({ value: valueProp, defaultValue, onValueChange, onSend, onActivityChange, onSendVoice, onSendVideoNote, onEditLast, recordMode: recordModeProp, defaultRecordMode, onRecordModeChange, queue, formatting, size: sizeProp, disabled: disabledProp, labels: labelsProp, inputRef, className, children, ref, onKeyDown, onDragEnter, onDragOver, onDragLeave, onDrop, ...rest }: ComposerRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ComposerRoot {
+    var displayName: string;
+}
+export type ComposerContextProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** `reply` — a reply to a message; `edit` — your message is being edited (send saves). */
+    mode?: ComposerContextMode;
+    /** The id of the message answered or edited: `onSend` gets it as `replyTo` / `editOf`. */
+    value?: string;
+    /**
+     * Stop replying or editing: the close button, Escape in the field, and a send that went through.
+     * Without it no close button.
+     */
+    onDismiss?: () => void;
+    /** `Composer.Title` and `Composer.Description`. */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The bar above the field: «Ответ Анне» with the quoted text, or «Редактирование». */
+declare function ComposerContext({ mode, value, onDismiss, id: idProp, className, children, ...rest }: ComposerContextProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ComposerContext {
+    var displayName: string;
+}
+export type ComposerTitleProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The first line of the bar: who is answered («Ответ Анне»), or «Редактирование». */
+declare function ComposerTitle({ className, ...rest }: ComposerTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ComposerTitle {
+    var displayName: string;
+}
+export type ComposerDescriptionProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The second line: the quoted message, one line. */
+declare function ComposerDescription({ className, ...rest }: ComposerDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ComposerDescription {
+    var displayName: string;
+}
+export type ComposerAttachProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** File types of the picker without a menu. */
+    accept?: string;
+    /** `Composer.Item` kinds of attachment: with them the paperclip opens a menu. */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The paperclip at the start of the row. Alone it opens the file picker (FileUpload
+ * `trigger="button"`); with `Composer.Item` kinds it opens a menu, each item a picker of its types.
+ * Picked files go to the root's `queue`.
+ */
+declare function ComposerAttach({ accept, children, className, "aria-label": ariaLabel, ...rest }: ComposerAttachProps): React.ReactPortal | null;
+declare namespace ComposerAttach {
+    var displayName: string;
+}
+export type ComposerItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "type"> & {
+    /** File types this item picks («image/*,video/*»). Without it the item only runs `onSelect`. */
+    accept?: string;
+    /** The item's own action (a poll, a location), after the picker opens when `accept` is set. */
+    onSelect?: () => void;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/** A kind of attachment in the paperclip menu: `Composer.ItemIcon` and the label. */
+declare function ComposerItem({ accept, onSelect, ...rest }: ComposerItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ComposerItem {
+    var displayName: string;
+}
+export type ComposerItemIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The leading glyph of a menu item. */
+declare function ComposerItemIcon(props: ComposerItemIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ComposerItemIcon {
+    var displayName: string;
+}
+export declare const Composer: {
+    Root: typeof ComposerRoot;
+    Context: typeof ComposerContext;
+    Title: typeof ComposerTitle;
+    Description: typeof ComposerDescription;
+    Attach: typeof ComposerAttach;
+    Item: typeof ComposerItem;
+    ItemIcon: typeof ComposerItemIcon;
+};

package/dist/components/composer/format.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Markdown formatting of a plain-text message (the Composer's toolbar and hotkeys): pure functions
+ * over the text and its selection, so the component only applies the result to its textarea.
+ */
+/** A formatting command: what the toolbar button or the hotkey applies to the selection. */
+export type ComposerFormat = "bold" | "italic" | "strikethrough" | "code" | "link" | "quote";
+/** Text with its selection, `start <= end` (a caret when equal). */
+export type TextSelection = {
+    text: string;
+    start: number;
+    end: number;
+};
+/** The text and selection after `format` is applied to the selection. */
+export declare function applyFormat(selection: TextSelection, format: ComposerFormat): TextSelection;
+/**
+ * The one span that differs between two texts (common prefix and suffix removed), so the change can
+ * be typed into the textarea as one edit and stay on its undo stack.
+ */
+export declare function diffRange(before: string, after: string): {
+    start: number;
+    end: number;
+    insert: string;
+};
+/** The format a key press asks for: Mod+B · Mod+I · Mod+Shift+X · Mod+E · Mod+K · Mod+Shift+9. */
+export declare function formatForKey(event: {
+    key: string;
+    code: string;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+}): ComposerFormat | null;
+/** Shortcut of every format, by modifier names: rendered as `⌘B` on Apple systems, `Ctrl+B` elsewhere. */
+export declare const FORMAT_SHORTCUTS: Record<ComposerFormat, {
+    shift: boolean;
+    key: string;
+}>;
+/** `⌘⇧X` on Apple systems, `Ctrl+Shift+X` elsewhere. */
+export declare function shortcutText(format: ComposerFormat, apple: boolean): string;

package/dist/components/composer/liveWave.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The live waveform of a recording, drawn straight to a canvas every animation frame (no React
+ * state). Same look as VoicePlayer's waveform: rounded bars of `--prime-space-1 × 0.75` with a
+ * `--prime-space-1 / 2` gap, centred on the line, never thinner than a dot. The newest sample
+ * enters at the end and the row scrolls toward the start between samples.
+ */
+export type LiveWaveStyle = {
+    /** Bar width, CSS px. */
+    bar: number;
+    /** Gap between bars, CSS px. */
+    gap: number;
+    /** Bars that carry a sample. */
+    color: string;
+    /** Slots without a sample yet: the calm line before (and behind) the voice. */
+    idleColor: string;
+};
+export type LiveWaveFrame = {
+    /** Levels 0…1, oldest first. */
+    samples: readonly number[];
+    /** 0…1: how far the time is from the last sample to the next one (the scroll phase). */
+    phase: number;
+    /** Right-to-left writing: the newest bar enters at the left. */
+    rtl: boolean;
+};
+/** The canvas box in CSS px, as the caller last measured it (a `ResizeObserver`, not per frame). */
+export type LiveWaveSize = {
+    width: number;
+    height: number;
+};
+export declare function drawLiveWave(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, size: LiveWaveSize, style: LiveWaveStyle, frame: LiveWaveFrame): void;

package/dist/components/composer/useRecorder.d.ts

@@ -0,0 +1,72 @@
+/** What the record button records: a voice message, or a round video message. */
+export type ComposerRecordMode = "voice" | "video";
+/** A finished recording, handed to `onSendVoice` / `onSendVideoNote`. */
+export type ComposerRecording = {
+    /** The recorded media (`audio/webm`, `audio/mp4`… — whatever the browser records). */
+    blob: Blob;
+    /** Length of the recording in milliseconds. */
+    durationMs: number;
+    /** Loudness over the recording: `WAVEFORM_BARS` values, 0…1, to draw the message's waveform. */
+    waveform: number[];
+};
+/** Why a recording could not start: the browser refused the device, found none, or failed. */
+export type RecorderError = "denied" | "missing" | "failed";
+/** `starting` — the press is answered, the device is not granted yet; `recording` — media flows. */
+export type RecorderStatus = "idle" | "starting" | "recording";
+/** Bars in a recording's `waveform`. */
+export declare const WAVEFORM_BARS = 48;
+/** Recordings shorter than this are dropped, like an accidental tap. */
+export declare const MIN_RECORDING_MS = 700;
+/** A round video message stops and sends itself at this length. */
+export declare const VIDEO_MAX_MS = 60000;
+/** One level sample (one bar of the live waveform) per this many milliseconds. */
+export declare const SAMPLE_MS = 100;
+/** Whether this browser can record `mode` at all (the record button hides otherwise). */
+export declare function canRecord(mode: ComposerRecordMode): boolean;
+/** Averages `samples` into `bars` buckets and scales the loudest to 1. */
+export declare function toWaveform(samples: readonly number[], bars?: number): number[];
+/**
+ * The live side of a recording, read by the view every animation frame — never React state, so
+ * the timer and the waveform cost no render.
+ */
+export type RecorderMeter = {
+    mode: ComposerRecordMode;
+    /** `performance.now()` of the press: the timer counts from here. */
+    pressedAt: number;
+    /** Loudness per `SAMPLE_MS`, 0…1, oldest first; empty until the device answers. */
+    samples: number[];
+    /** `performance.now()` of the last sample: the waveform scrolls between samples. */
+    sampledAt: number;
+    /** `performance.now()` of a pause in progress, or null: the timer and the waveform stand. */
+    pausedAt: number | null;
+    /** Milliseconds spent in finished pauses: the timer leaves them out. */
+    pausedMs: number;
+};
+/** Milliseconds recorded by `now`: from the press, without the pauses. */
+export declare function recordedMs(meter: RecorderMeter, now: number): number;
+export type Recorder = {
+    status: RecorderStatus;
+    mode: ComposerRecordMode;
+    /** The camera stream of a video recording, for the round preview (null until granted). */
+    stream: MediaStream | null;
+    error: RecorderError | null;
+    /** The live meter of the current recording, or null. Read it in an animation frame. */
+    meter: () => RecorderMeter | null;
+    /** Starts at once (`status` → `starting`) and asks for the device in parallel. */
+    start: (mode: ComposerRecordMode, pressedAt?: number) => void;
+    /** Ends the recording: `send` hands it over (when long enough), otherwise it is dropped. */
+    stop: (send: boolean) => void;
+    /** The recording is paused (`MediaRecorder.pause()`): no media, no samples, the timer stands. */
+    paused: boolean;
+    /** Pauses or resumes a recording whose media flows; false when it cannot (still starting). */
+    setPaused: (paused: boolean) => boolean;
+    clearError: () => void;
+};
+/**
+ * Records a voice or a video message with `MediaRecorder`. `start` switches the state at once and
+ * asks for the device in parallel; the loudness is metered through one `AnalyserNode` on one
+ * `AudioContext` that lives as long as the composer (suspended between recordings). On
+ * `stop(true)` the blob, its length and its waveform go to `onRecorded`. Permission errors come
+ * back as `error`, never thrown. Only status changes render; the meter is read per frame.
+ */
+export declare function useRecorder(onRecorded: (mode: ComposerRecordMode, recording: ComposerRecording) => void): Recorder;

package/dist/components/confirm-dialog/ConfirmDialog.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { type DialogTriggerProps } from "../modal/DialogParts";
+export type ConfirmDialogLabels = {
+    /** The cancel button. */
+    cancel: string;
+    /** `aria-label` of the header close button. */
+    close: string;
+    /** The message when `onConfirm` rejects and there is no `error`. */
+    error: string;
+};
+export type ConfirmDialogRootProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The question, as a heading («Удалить проект?»). */
+    title: React.ReactNode;
+    /** What happens and what cannot be undone. */
+    description?: React.ReactNode;
+    /** The confirm button: the action as a verb («Удалить»), never «Да» / «ОК». */
+    confirmLabel: React.ReactNode;
+    /**
+     * `danger` (default) — a destructive action, solid danger confirm; `accent` — a weighty but safe
+     * one (send, publish), solid accent confirm.
+     */
+    tone?: "danger" | "accent";
+    /**
+     * The action. May return a Promise: while it runs the confirm button shows `loading`, Cancel,
+     * the close button and Escape are off. Resolve — the dialog closes; reject — it stays open with
+     * `error` (else `labels.error`) under the text, ready to try again.
+     */
+    onConfirm: () => unknown;
+    /** Why the action failed, from the owner; shown while set. */
+    error?: React.ReactNode;
+    labels?: Partial<ConfirmDialogLabels>;
+    /** `ConfirmDialog.Trigger`, or nothing when `open` is driven from code. */
+    children?: React.ReactNode;
+};
+/**
+ * The confirm of a destructive or weighty action in one piece: a small dialog (Modal `s`) with the
+ * question, the consequence, Cancel and the confirm; no dismiss by a press outside; while the
+ * action runs nothing closes it; a failure keeps it open with the reason.
+ */
+declare function ConfirmDialogRoot({ open, defaultOpen, onOpenChange, title, description, confirmLabel, tone, onConfirm, error, labels, children, }: ConfirmDialogRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ConfirmDialogRoot {
+    var displayName: string;
+}
+export type ConfirmDialogTriggerProps = DialogTriggerProps;
+/** Wraps one element (the action's button); its click opens the dialog. */
+declare function ConfirmDialogTrigger(props: ConfirmDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ConfirmDialogTrigger {
+    var displayName: string;
+}
+export declare const ConfirmDialog: {
+    Root: typeof ConfirmDialogRoot;
+    Trigger: typeof ConfirmDialogTrigger;
+};
+export {};

package/dist/components/crossfade/Crossfade.d.ts

@@ -5,10 +5,16 @@ export type CrossfadeProps = React.HTMLAttributes<HTMLDivElement> & {
      * A new value cross-fades the old content into the new one; the same value updates in place.
      */
     state: string | number;
+    /**
+     * The region takes its parent's height (a flex / grid item, or a sized block) and every state
+     * fills it; the height never glides.
+     */
+    fill?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
  * Cross-fades a region between its states (loading → data → empty → error) and glides its height,
- * so the page below does not jump. Nothing moves on the first render.
+ * so the page below does not jump. Nothing moves on the first render. A region with nothing to
+ * show takes no room (no gap in a grid or a flex column).
  */
-export declare function Crossfade({ state, children, className, ref, ...rest }: CrossfadeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Crossfade({ state, fill, children, className, ref, ...rest }: CrossfadeProps): import("react/jsx-runtime").JSX.Element;