prime-ui-kit 0.10.0 → 0.11.1

package/dist/components/chat/Chat.d.ts

@@ -0,0 +1,192 @@
+import * as React from "react";
+import type { MessagePosition } from "../message/types";
+import type { Selection } from "../../internal/messageList";
+import { ChatPinned } from "./ChatPinned";
+import { ChatSeparator, ChatService, ChatUnread } from "./ChatRows";
+import { type ChatLabels } from "./chatContext";
+import { ChatSelectionBar, type MessageListProps } from "./MessageList";
+export type { ChatPinnedItem, ChatPinnedLabels, ChatPinnedProps } from "./ChatPinned";
+export type { ChatSeparatorProps, ChatServiceProps, ChatUnreadLabels, ChatUnreadProps, } from "./ChatRows";
+export type { ChatLabels } from "./chatContext";
+export type { ChatSelectionBarProps } from "./MessageList";
+export type ChatRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
+    /**
+     * Selection mode (controlled): the `value`s of the selected messages, `null` while not selecting.
+     * Any of the triad lets a message's menu start selection («Выбрать»).
+     */
+    selected?: Selection;
+    /** Initial selection (uncontrolled). */
+    defaultSelected?: Selection;
+    /** The selection changed: a message toggled, selection started (`[value]`) or ended (`null`). */
+    onSelectedChange?: (selected: Selection) => void;
+    /** The search query (controlled); `null` — the search bar is closed. */
+    search?: string | null;
+    /** The initial search (uncontrolled). Default `null`. */
+    defaultSearch?: string | null;
+    /** The search opened, changed its query or closed (`null`). */
+    onSearchChange?: (search: string | null) => void;
+    /**
+     * A message to bring into view and point at (a link, a notification): the others blink around
+     * it. A search's current match takes its place while the search is open.
+     */
+    current?: string | null;
+    /** The other side is typing: the header's status turns into «печатает…» and the list ends with the typing bubble. */
+    typing?: boolean;
+    labels?: Partial<ChatLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A chat, assembled: the frame of a conversation that owns its state — the selection, the search
+ * and its current match, the typing signal, the jump to a message — and hands it to its parts.
+ * A column that fills its host: the header, the search and the pinned bar on top, the messages
+ * scrolling in the middle, the footer with the Composer at the bottom. Every part is optional but
+ * `Chat.Messages`: a list without the rest is `Chat.Root` with `Chat.Messages` alone.
+ */
+declare function ChatRoot({ selected: selectedProp, defaultSelected, onSelectedChange, search: searchProp, defaultSearch, onSearchChange, current: currentProp, typing, labels: labelsProp, className, children, ref, ...rest }: ChatRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatRoot {
+    var displayName: string;
+}
+export type ChatHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The top of the chat: who it is with. A row of the leading element (an `Avatar`), the title over
+ * the description, and the actions at the end.
+ */
+declare function ChatHeader({ className, ...rest }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatHeader {
+    var displayName: string;
+}
+export type ChatTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    /** Heading level that fits the page outline (the look does not change). Default `h2`. */
+    as?: "h2" | "h3" | "h4";
+    ref?: React.Ref<HTMLHeadingElement>;
+};
+/** Who the chat is with, one line; it also names the conversation for assistive tech. */
+declare function ChatTitle({ as: Tag, className, id, ...rest }: ChatTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatTitle {
+    var displayName: string;
+}
+export type ChatDescriptionProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The status line under the title («в сети», «12 участников»). While the other side types
+ * (`Chat.Root typing`) it cross-fades into «печатает…» in the accent, and back.
+ */
+declare function ChatDescription({ className, children, ...rest }: ChatDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatDescription {
+    var displayName: string;
+}
+export type ChatActionsProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The buttons at the end of the header: `Chat.SearchButton`, a call, a `Dropdown` of more. */
+declare function ChatActions({ className, ...rest }: ChatActionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatActions {
+    var displayName: string;
+}
+export type ChatSearchButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-pressed"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/** Opens and closes the search bar: a ghost icon button, pressed while the search is open. */
+declare function ChatSearchButton({ onClick, ref, ...rest }: ChatSearchButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatSearchButton {
+    var displayName: string;
+}
+export type ChatSearchProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The search bar, shown while the search is open: the field (focused as it opens), the place of
+ * the current match («2 из 5», announced), and the steps to the older and newer match. Every match
+ * in the messages' text and transcripts is marked; the current one is brought into view while the
+ * others step back. Enter goes to the older match, Escape closes.
+ */
+declare function ChatSearch({ className, ...rest }: ChatSearchProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ChatSearch {
+    var displayName: string;
+}
+/** Where a message of `Chat.Messages items` stands, handed to `renderMessage`. */
+export type ChatMessageEntry = {
+    /** The place in its author's run; set on the rendered `Message.Root` for you. */
+    position: MessagePosition;
+    /** The first of a run: the author's header shows here in a group chat. */
+    showAuthor: boolean;
+    /** The last of a run: the avatar shows here in a group chat. */
+    showAvatar: boolean;
+};
+export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "group" | "selected" | "defaultSelected" | "onSelectedChange" | "current" | "highlight" | "onMatchesChange" | "revealRef" | "labels"> & {
+    /**
+     * `direct` — a conversation of two; `group` — many authors: the first message of an author's run
+     * shows the author's header (`Message.Author`), the last one the avatar (`Message.Avatar`), and
+     * incoming messages keep the avatar's gutter. Default `direct`.
+     */
+    type?: "direct" | "group";
+    /** Older history exists: a placeholder stands above the first message and `onLoadOlder` runs at the top. */
+    hasOlder?: boolean;
+    /** The reader reached the top while `hasOlder`: load older messages and prepend them. */
+    onLoadOlder?: () => void | Promise<void>;
+    /** Messages as application data, in time order: the list adds the dates and runs itself. */
+    items?: readonly T[];
+    /** A stable key of an item (with `items`): it is also its message's `value`. */
+    getKey?: (item: T) => string;
+    /** Who wrote an item (an id, with `items`): a change of author starts a new run. */
+    getAuthor?: (item: T) => string;
+    /** When an item was sent (with `items`): a new day gets a date. */
+    getDate?: (item: T) => Date;
+    /** An event of the chat, not a message: it stands alone and breaks the runs around it. */
+    isService?: (item: T) => boolean;
+    /**
+     * Renders an item (with `items`): a `Message.Root` (its `value` and `position` are set for you)
+     * or a `Chat.Service`. Called again only for items whose data or place changed, or when this
+     * function changes — keep it stable (`useCallback`) for a long history.
+     */
+    renderMessage?: (item: T, entry: ChatMessageEntry) => React.ReactElement;
+    /** The key of the first unread item: the «Непрочитанные» band stands above it. */
+    unread?: string;
+    /** Messages of one author further apart than this many minutes start a new run. Default 5. */
+    groupWindow?: number;
+    /** «Today» for the dates. Default: now. */
+    now?: Date;
+    /** The label of a date. Default «Сегодня», «Вчера», «12 марта». */
+    formatDate?: (date: Date, now: Date) => string;
+};
+/**
+ * The conversation: the one message list of the kit, in its own scroller. A `role="log"` of rows
+ * (new messages are announced politely) with one tab stop — arrows, Home and End move between
+ * messages. Rows come from `items` (dates, runs and the unread band added for you) or from
+ * children (`Message.Root`, `Chat.Separator`, `Chat.Service`, `Chat.Unread`; `Chat.SelectionBar`
+ * and `Message.Typing` close the list). Only the rows around the view render; the list opens at
+ * the end and keeps the reader's place.
+ */
+declare function ChatMessages<T>({ type, hasOlder, onLoadOlder, items, getKey, getAuthor, getDate, isService, renderMessage, unread, groupWindow, now, formatDate, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ChatMessagesProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatMessages {
+    var displayName: string;
+}
+export type ChatFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The bottom of the chat, under the messages: the `Composer`. */
+declare function ChatFooter({ className, ...rest }: ChatFooterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatFooter {
+    var displayName: string;
+}
+export declare const Chat: {
+    Root: typeof ChatRoot;
+    Header: typeof ChatHeader;
+    Title: typeof ChatTitle;
+    Description: typeof ChatDescription;
+    Actions: typeof ChatActions;
+    SearchButton: typeof ChatSearchButton;
+    Search: typeof ChatSearch;
+    Pinned: typeof ChatPinned;
+    Messages: typeof ChatMessages;
+    SelectionBar: typeof ChatSelectionBar;
+    Separator: typeof ChatSeparator;
+    Service: typeof ChatService;
+    Unread: typeof ChatUnread;
+    Footer: typeof ChatFooter;
+};
+export type { GroupMessagesOptions, MessageListEntry } from "./groupMessages";
+export { formatMessageDate, groupMessages } from "./groupMessages";

package/dist/components/chat/ChatPinned.d.ts

@@ -0,0 +1,44 @@
+import type * as React from "react";
+/** A pinned message: its `value` (the `Message.Root value`) and one line of its text. */
+export type ChatPinnedItem = {
+    value: string;
+    /** One line of the message: its text, «Фото», «Голосовое сообщение». */
+    text: string;
+};
+export type ChatPinnedLabels = {
+    /** The title with one pinned message. */
+    pinned: string;
+    /** The title with several: `{index}` of `{count}`, the newest last. */
+    pinnedOf: string;
+    /** Name of the unpin button. */
+    unpin: string;
+};
+export type ChatPinnedProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onSelect"> & {
+    /** The pinned messages, oldest first. Without any the bar is not rendered. */
+    items: readonly ChatPinnedItem[];
+    /** The pinned message shown (controlled). */
+    value?: string;
+    /** The one shown first (uncontrolled). Default: the newest (the last item). */
+    defaultValue?: string;
+    /** The shown pinned message changed: a press went on to the next older one. */
+    onValueChange?: (value: string) => void;
+    /**
+     * A press on the bar, after the chat has brought the message into view and blinked the others
+     * around it: load it when it is not in the list yet. The bar then moves on to the next older
+     * pinned message, the oldest wraps to the newest.
+     */
+    onSelect?: (value: string) => void;
+    /** Unpin the shown message: the close button. Without it no button. */
+    onRemove?: (value: string) => void;
+    labels?: Partial<ChatPinnedLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The pinned messages above the conversation: a rail of segments (which one of several is shown),
+ * the title and one line of the message. A press shows it in the chat (the chat's jump) and steps
+ * to the next older one; the text cross-fades into the next.
+ */
+export declare function ChatPinned({ items, value: valueProp, defaultValue, onValueChange, onSelect, onRemove, labels: labelsProp, className, ...rest }: ChatPinnedProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace ChatPinned {
+    var displayName: string;
+}

package/dist/components/chat/ChatRows.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+export type ChatSeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** A date between messages («Сегодня», «12 марта»): a small pill that sticks while its day scrolls. */
+export declare function ChatSeparator({ className, children, ...rest }: ChatSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatSeparator {
+    var displayName: string;
+}
+export type ChatServiceProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** An event in the chat, not a message («Анна добавила Олега»): a centered pill that wraps. */
+export declare function ChatService({ className, children, ...rest }: ChatServiceProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatService {
+    var displayName: string;
+}
+export type ChatUnreadLabels = {
+    /** The text of the band. */
+    unread: string;
+};
+export type ChatUnreadProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    labels?: Partial<ChatUnreadLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** «Непрочитанные сообщения»: a band across the list above the first unread message. */
+export declare function ChatUnread({ labels, className, ...rest }: ChatUnreadProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatUnread {
+    var displayName: string;
+}

package/dist/components/chat/MessageList.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+import type { MessageDirection, MessageReactionOption, MessageUser } from "../message/types";
+import { type Selection } from "../../internal/messageList";
+export type MessageListLabels = {
+    /** The count of the selection bar: `{count}`. */
+    selectedCount: string;
+    /** The button of the selection bar that leaves selection mode. */
+    cancel: string;
+    /** Name of the button that goes to the newest message. */
+    scrollToEnd: string;
+    /** Name of that button while new messages wait below: `{count}`. */
+    newMessages: string;
+};
+export declare const MESSAGE_LIST_LABELS: MessageListLabels;
+export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * A group chat: incoming messages keep a gutter for the author's avatar, the first message of a
+     * run shows its author's header, the last one the avatar. Default `false`.
+     */
+    group?: boolean;
+    /**
+     * Selection mode (controlled): the `value`s of the selected messages, `null` while not selecting.
+     * Any of the triad lets a message's menu start selection («Выбрать»).
+     */
+    selected?: Selection;
+    /** Initial selection (uncontrolled). Default `null`. */
+    defaultSelected?: Selection;
+    /** The selection changed: a message toggled, selection started (`[value]`) or ended (`null`). */
+    onSelectedChange?: (selected: Selection) => void;
+    /** The emoji a double tap (or `L` on a focused message) puts or takes back. Default «👍»; `false` — off. */
+    quickReaction?: string | false;
+    /**
+     * The reactions of the reaction bar (long press, a long hover, `R`): the first seven in its row,
+     * the rest behind «⌄». `label` names each for assistive tech.
+     */
+    reactionOptions?: readonly MessageReactionOption[];
+    /**
+     * The reader (`{ id, name: "Вы", src }`): a reaction they put shows their avatar among
+     * `MessageReaction.users` at once, before the data comes back.
+     */
+    reader?: MessageUser;
+    /**
+     * A message was added at the end after the list mounted — sent or received; never the first
+     * render, history loaded above or a message put back in the middle. For a sound, a counter,
+     * a title badge. The message enters on its own either way.
+     */
+    onNewMessage?: (value: string, details: {
+        direction: MessageDirection;
+    }) => void;
+    /**
+     * Incoming messages the reader has seen: at least half of each (or half the view) on screen
+     * while the page is visible. Batched per frame, each `value` once per mount. Send read receipts
+     * from here and set `status="read"` on the other side.
+     */
+    onRead?: (values: string[]) => void;
+    /**
+     * The current message of a search or a jump: when it changes the list brings it into view in
+     * its scroller and points at it: the other messages step back and forth around it, or, while a
+     * search `highlight` is on, stay back while it is current. Focus stays where it is (the search
+     * field).
+     */
+    current?: string | null;
+    /** A search query: every match in `Message.Text` and transcripts is marked. */
+    highlight?: string;
+    /** The messages whose text holds `highlight`, in list order (oldest first), as they change. */
+    onMatchesChange?: (values: readonly string[]) => void;
+    /** Receives the list's jump: bring a message into view and blink the others around it. */
+    revealRef?: React.Ref<((value: string) => void) | null>;
+    labels?: Partial<MessageListLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The conversation: a `role="log"` (new messages are announced politely) of `Message.Root` rows,
+ * date separators and service lines. One tab stop for the whole list: arrows move between
+ * messages, Home / End go to the first / last; Tab goes into the controls of a message. In
+ * selection mode it is a multiselectable listbox; Escape leaves it.
+ *
+ * Inside a ScrollContainer it renders only the rows around the view (`useVirtualRows`): rows in
+ * normal flow between two spacers, each measured once and cached by key, sticky dates kept. The
+ * scroller keeps what the reader looks at in place when rows above change (ScrollContainer
+ * `anchor="end"`); jumps, search, selection ranges, the keyboard and playing media reach or keep
+ * rows that are not rendered.
+ */
+export declare function MessageList({ group, selected: selectedProp, defaultSelected, onSelectedChange, quickReaction, reactionOptions, reader, onNewMessage, onRead, current: currentProp, highlight, onMatchesChange, revealRef, labels: labelsProp, className, children, onKeyDown, onFocus, ref, ...rest }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export type ChatSelectionBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The bar of selection mode, at the bottom of the conversation while it is on: «Выбрано: N», your
+ * actions (`children`: Переслать, Удалить…) and «Отмена», which leaves selection. Hidden otherwise.
+ */
+export declare function ChatSelectionBar({ className, children, ref, ...rest }: ChatSelectionBarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace ChatSelectionBar {
+    var displayName: string;
+}

package/dist/components/chat/chatContext.d.ts

@@ -0,0 +1,54 @@
+import type * as React from "react";
+import type { Selection } from "../../internal/messageList";
+import type { MessageListLabels } from "./MessageList";
+export type ChatLabels = MessageListLabels & {
+    /** The status line of the header while the other side types (`Chat.Root typing`). */
+    typing: string;
+    /** The search button of the header and the name of the search field. */
+    search: string;
+    /** The placeholder of the search field. */
+    searchPlaceholder: string;
+    /** The place of the current match: `{index}` of `{count}`, counted from the newest. */
+    matches: string;
+    /** The search found nothing. */
+    noMatches: string;
+    /** The button that goes to the older match. */
+    previousMatch: string;
+    /** The button that goes to the newer match. */
+    nextMatch: string;
+    /** The name of the conversation when the header has no `Chat.Title`. */
+    messages: string;
+    /** The band above the first unread message of `items` (`Chat.Messages unread`). */
+    unread: string;
+};
+/** What the parts of a chat share; `Chat.Root` owns it. */
+export type ChatContextValue = {
+    /** Selection mode: `undefined` — the chat has no selection (no triad on the root). */
+    selected: Selection | undefined;
+    setSelected: (next: Selection) => void;
+    /** The search query, `null` while the search bar is closed. */
+    search: string | null;
+    setSearch: (next: string | null) => void;
+    /** The messages that match the query, oldest first (reported by the list). */
+    matches: readonly string[];
+    setMatches: (values: readonly string[]) => void;
+    /** The current match, counted from the newest (`0` — the newest). */
+    matchIndex: number;
+    setMatchIndex: (index: number) => void;
+    /** The message the list brings into view: the current match while searching, else `current`. */
+    current: string | null;
+    /** The other side types. */
+    typing: boolean;
+    /** Brings a message into view and blinks the others around it (a pinned message's press). */
+    jump: (value: string) => void;
+    /** `Chat.SearchButton`: the focus goes back to it when the search closes from its field. */
+    searchButtonRef: React.RefObject<HTMLButtonElement | null>;
+    /** The list hands its jump here. */
+    revealRef: React.RefObject<((value: string) => void) | null>;
+    /** The id of `Chat.Title`, the name of the list. */
+    titleId: string;
+    hasTitle: boolean;
+    setHasTitle: (has: boolean) => void;
+    labels: ChatLabels;
+};
+export declare const ChatProvider: React.Provider<ChatContextValue | null>, useChat: () => ChatContextValue;

package/dist/components/chat/groupMessages.d.ts

@@ -0,0 +1,50 @@
+import type { MessagePosition } from "../message/types";
+/**
+ * Pure helpers for a conversation: a flat array of messages → the rows of a chat with date
+ * separators and the place of each message in a run of one author (`Message.Root position`).
+ * `Chat.Messages items` runs it for you.
+ */
+export type MessageListEntry<T> = {
+    type: "date";
+    key: string;
+    /** The start of the day (local time). */
+    date: Date;
+    /** «Сегодня», «Вчера», «12 марта», «12 марта 2025». */
+    label: string;
+} | {
+    type: "message";
+    key: string;
+    item: T;
+    position: MessagePosition;
+    /** First of its run: the place for the author's name (group chats). */
+    showAuthor: boolean;
+    /** Last of its run: the place for the author's avatar (group chats). */
+    showAvatar: boolean;
+};
+export type GroupMessagesOptions<T> = {
+    /** Who wrote the message (an id); a change of author starts a new run. */
+    getAuthor: (item: T) => string;
+    /** When it was sent. */
+    getDate: (item: T) => Date;
+    /** A stable key of the message. Default: its index. */
+    getKey?: (item: T, index: number) => string;
+    /**
+     * A service message («Анна добавила Олега»): it stands alone and breaks the runs around it.
+     * Its entry is `single`.
+     */
+    isService?: (item: T) => boolean;
+    /** Messages of one author further apart than this many minutes start a new run. Default 5. */
+    groupWindow?: number;
+    /** «Today» for the date labels. Default: now. */
+    now?: Date;
+    /** The label of a date separator. Default `formatMessageDate`. */
+    formatDate?: (date: Date, now: Date) => string;
+};
+/** «Сегодня», «Вчера», «12 марта» this year, «12 марта 2025» another year. */
+export declare function formatMessageDate(date: Date, now?: Date): string;
+/**
+ * The rows of a chat from messages in time order: a date separator before the first message of
+ * every day, and for every message its `position` in the run of one author (a new run starts with
+ * another author, another day, a service message or a pause longer than `groupWindow`).
+ */
+export declare function groupMessages<T>(items: readonly T[], options: GroupMessagesOptions<T>): MessageListEntry<T>[];

package/dist/components/chat/messageFlow.d.ts

@@ -0,0 +1,42 @@
+import type { MessageDirection } from "../message/types";
+import type { ScrollRegion } from "../scroll-container/useScrollEdges";
+/** A message of the conversation in data order: its value and side. */
+export type FlowEntry = {
+    value: string;
+    direction: MessageDirection;
+};
+/**
+ * The flow of a conversation: which messages are new at its end, decided from the data — never
+ * from the DOM, so a row that mounts because it scrolled into view is never taken for a new one.
+ *
+ * Each render the group plans the list against the last committed one (`plan`): values after the
+ * last value it already knew are new at the end; values before it are history loaded above. A new
+ * message's row (if it renders) enters (`isFresh` → `data-enter`, one CSS keyframe on its column).
+ * When the commit lands (`commit`), the owner hears `onNewMessage` for each, an own message brings
+ * the reader to the end, and incoming ones count on the «новых» button while the reader is away.
+ * The first commit and a list replaced as a whole (another conversation) are never new — except a
+ * single message in a conversation that was empty.
+ */
+export type MessageFlow = {
+    /** Plans the values of this render against the last commit (pure: same input, same plan). */
+    plan: (values: readonly string[]) => void;
+    /** The message is new at the end in the planned render: its row enters. */
+    isFresh: (value: string) => boolean;
+    /** The render with these entries committed: arrivals are heard. */
+    commit: (entries: readonly FlowEntry[]) => void;
+    /** Incoming messages that arrived while the reader was away from the end. */
+    unseen: () => number;
+    /**
+     * A message is new at the end in the commit under way (`Message.Typing` gives way to the reply
+     * that replaces it).
+     */
+    arrivedNow: () => boolean;
+    subscribe: (listener: () => void) => () => void;
+    clearUnseen: () => void;
+};
+type FlowOptions = {
+    region: () => ScrollRegion | null;
+    onNew: (value: string, direction: MessageDirection) => void;
+};
+export declare function createMessageFlow({ region, onNew }: FlowOptions): MessageFlow;
+export {};

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { type ChoiceLabelProps } from "@/internal/ChoiceField";
-import type { ControlSize } from "@/internal/states";
+import { type ChoiceLabelProps } from "../../internal/ChoiceField";
+import type { ControlSize } from "../../internal/states";
+export type CheckboxShape = "square" | "circle";
 export type CheckboxRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange"> & {
     checked?: boolean;
     defaultChecked?: boolean;
@@ -15,12 +16,14 @@ export type CheckboxRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>
     error?: React.ReactNode;
     /** Tier. Default: the tier of the surrounding control (a form, a panel, a table), else `m`. */
     size?: ControlSize;
+    /** Outline of the box: rounded square or full circle (a selection mark, like in messengers). */
+    shape?: CheckboxShape;
     /** `Checkbox.Label`; without it the bare box renders (give it an `aria-label`). */
     children?: React.ReactNode;
     /** The native checkbox input. */
     ref?: React.Ref<HTMLInputElement>;
 };
-declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, error, size: sizeProp, disabled, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, error, size: sizeProp, shape, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CheckboxRoot {
     var displayName: string;
 }
@@ -34,6 +37,8 @@ export type CheckboxIndicatorProps = Omit<React.HTMLAttributes<HTMLSpanElement>,
     /** Mixed state; wins over `checked` visually. */
     indeterminate?: boolean;
     disabled?: boolean;
+    /** Outline of the box: rounded square or full circle. */
+    shape?: CheckboxShape;
     /** Box tier; without it the nearest control size (e.g. the Select or menu it sits in), else `m`. */
     size?: ControlSize;
     ref?: React.Ref<HTMLSpanElement>;
@@ -43,7 +48,7 @@ export type CheckboxIndicatorProps = Omit<React.HTMLAttributes<HTMLSpanElement>,
  * the state (`role="option"` with `aria-selected`, `role="menuitemcheckbox"` with `aria-checked`).
  * Used outside `Checkbox.Root`; it is `aria-hidden` and takes no focus or clicks.
  */
-declare function CheckboxIndicator({ checked, indeterminate, disabled, size: sizeProp, className, ...rest }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxIndicator({ checked, indeterminate, disabled, size: sizeProp, shape, className, ...rest }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CheckboxIndicator {
     var displayName: string;
 }

package/dist/components/code-block/CodeBlock.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { Variant } from "@/internal/states";
+import type { Variant } from "../../internal/states";
 export type CodeBlockColorScheme = "light" | "dark";
 /** `soft` — filled panel with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. */
 export type CodeBlockVariant = Extract<Variant, "soft" | "ghost">;

package/dist/components/color-field/ColorField.d.ts

@@ -0,0 +1,44 @@
+import { type ColorPickerLabels } from "../color-picker/ColorPicker";
+import { type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
+import type { ControlSize } from "../../internal/states";
+import { type ColorPreset } from "../../internal/swatch";
+export type ColorFieldLabels = ColorPickerLabels & {
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+    /** Accessible name of the preset swatches in the panel (`presets`). */
+    presets: string;
+};
+export type ColorFieldProps = FieldRootDomProps & FieldFrameProps & {
+    /** Controlled color: a CSS color string (hex, `rgb()`, `hsl()`). */
+    value?: string;
+    defaultValue?: string;
+    /** Called with the new color as hex: `#RRGGBB`, or `#RRGGBBAA` when `alpha` lowers the opacity. */
+    onValueChange?: (value: string) => void;
+    /** Ready colors under the channels: `{ value, label }`, picked in one click. */
+    presets?: readonly ColorPreset[];
+    /** Adds the opacity slider; the value then carries alpha. */
+    alpha?: boolean;
+    /** Field tier; the panel uses the same tier. */
+    size?: ControlSize;
+    disabled?: boolean;
+    /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
+    invalid?: boolean;
+    /** Form field name: a hidden input submits the hex value. */
+    name?: string;
+    /** Id of the field button; generated when omitted. */
+    id?: string;
+    /** Accessible name when there is no `label`; the current value is appended. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    labels?: Partial<ColorFieldLabels>;
+};
+/**
+ * A color field: the field frame around a button with the color swatch and its hex; a click opens
+ * the ColorPicker panel (area, hue, optional opacity, channels with the eyedropper, presets) in a
+ * Popover.
+ */
+export declare function ColorField({ value: valueProp, defaultValue, onValueChange, presets, alpha, size, disabled: disabledProp, invalid: invalidProp, focusRing, name, id, label, required, optional, hint, error, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ColorField {
+    var displayName: string;
+}

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { type ColorAreaProps as AriaColorAreaProps, type ColorSliderProps as AriaColorSliderProps, type ColorThumbProps as AriaColorThumbProps, type SliderTrackProps as AriaSliderTrackProps, type Color, parseColor } from "react-aria-components";
-import { Button } from "@/components/button/Button";
-import { type ColorSwatchesProps } from "@/components/color-swatches/ColorSwatches";
-import type { FieldRootDomProps } from "@/internal/FieldFrame";
-import type { ControlSize } from "@/internal/states";
+import { Button } from "../button/Button";
+import { type ColorSwatchesProps } from "../color-swatches/ColorSwatches";
+import type { FieldRootDomProps } from "../../internal/FieldFrame";
+import type { ControlSize } from "../../internal/states";
 export type { Color as ColorPickerColorValue } from "react-aria-components";
 export type ColorValueFormat = "hsl" | "rgb" | "hex";
 declare global {
@@ -31,6 +31,7 @@ export type ColorPickerLabels = {
     green: string;
     blue: string;
 };
+export declare const COLOR_PICKER_LABELS: ColorPickerLabels;
 export type ColorPickerRootProps = {
     /** Controlled color: a CSS color string or a `Color` from `parseColor`. */
     value?: string | Color;