prime-ui-kit 0.9.3 → 0.11.0

package/dist/internal/listbox.d.ts

@@ -38,3 +38,22 @@ export declare function useTypeahead(): {
     find: (key: string, items: HTMLElement[], highlighted: string | undefined) => HTMLElement | undefined;
     isTyping: () => boolean;
 };
+export type LoadMoreOptions = {
+    /** More can be requested now: `hasMore`, a handler, nothing loading, no load error. */
+    enabled: boolean;
+    onLoadMore: (() => void | Promise<void>) | undefined;
+    /** The list's own scroller: the observer root. */
+    scrollRef: React.RefObject<HTMLElement | null>;
+    /** Changes when the list changes (a batch arrived): re-arms the request. */
+    rearm: unknown;
+};
+/**
+ * Load more at the end of a list (Select, CommandMenu): a sentinel after the last option asks once
+ * per round when it scrolls into the list's own scroller; `request` asks the same way from the
+ * keyboard (the highlight reached the last option). Without `IntersectionObserver` (jsdom, old
+ * engines) only `request` asks.
+ */
+export declare function useLoadMore({ enabled, onLoadMore, scrollRef, rearm }: LoadMoreOptions): {
+    sentinelRef: React.RefObject<HTMLDivElement | null>;
+    request: () => void;
+};

package/dist/internal/mediaDisk.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The still disk over media: the look of `Button shape="circle" variant="shade"` (`l`) for a disk
+ * that is not a control. A host positions it; it may shrink it to a small frame (the glyph follows
+ * at half the diameter).
+ */
+export declare const mediaDiskClass: string;
+/**
+ * The play mark of a video frame: the still media disk with the play glyph — the same size, ground
+ * and glyph as the play and transfer disks over media. Decorative: the tile around it is the
+ * button and says what it opens.
+ */
+export declare function MediaPlayMark({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/internal/mediaFrame.d.ts

@@ -0,0 +1,2 @@
+/** Browsers draw a frame for `preload="metadata"` only past the start: ask for the first one. */
+export declare function firstFrame(src: string): string;

package/dist/internal/mediaKind.d.ts

@@ -0,0 +1,7 @@
+/** What a file shows: a picture, a clip, or neither (a document, an archive). */
+export type MediaKind = "image" | "video";
+/**
+ * The media kind of a file: by its MIME type, and by the extension of its name when the browser
+ * gives none (a drop from some file managers, a paste from some apps). `null` for anything else.
+ */
+export declare function mediaKind(file: Pick<File, "type" | "name">): MediaKind | null;

package/dist/internal/mediaPlayer.d.ts

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { type Transcript, type TranscriptLabels, type TranscriptProps } from "./transcript";
+import { type TransferLabels, type TransferProps } from "./transfer";
+import { type TransferDiskProps } from "./transferDisk";
+/**
+ * What every chat player shares (VoicePlayer, VideoNote), one name, type and default for each:
+ * the media (`src`, `duration`, `unplayed`, `disabled`), the `playing` triad and `onEnded`, one
+ * sound at a time on the page (`internal/mediaSession`), the keyboard seek, the transcript
+ * (`internal/transcript`) and the transfer (`internal/transfer`, drawn by `internal/transferDisk`).
+ * A player adds only what its media really has of its own (the voice waveform and rate, the
+ * circle's poster) and keeps its own media logic.
+ */
+export type MediaPlayerProps = TranscriptProps & TransferProps & {
+    /** The media file; loaded with `preload="metadata"`. */
+    src: string;
+    /** Length in seconds, shown until the media reports its own. */
+    duration?: number;
+    /** Nobody has played it yet: an accent dot after the time. Clear it on `onPlayingChange(true)`. */
+    unplayed?: boolean;
+    /** Playing with sound (controlled). One sound plays at a time on the page. */
+    playing?: boolean;
+    /** Initial playing state (uncontrolled). Default `false`. */
+    defaultPlaying?: boolean;
+    /** Playback with sound started or stopped: a press, another sound taking over, the end. */
+    onPlayingChange?: (playing: boolean) => void;
+    /** Playback reached the end; the player is back at the start. */
+    onEnded?: () => void;
+    /**
+     * Nothing can be played: the play control, the seek, the transcript button and the transfer
+     * actions are off. A disabled `Fieldset` around the player disables it too.
+     */
+    disabled?: boolean;
+};
+/** The root of every player: a `role="group"` div with its native attributes and `ref`. */
+export type MediaPlayerRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onPlay" | "onPause" | "onEnded" | "onRateChange"> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The strings every player has, same keys and templates; the defaults name its kind of media. */
+export type MediaPlayerLabels = {
+    /** Name of the player group. */
+    player: string;
+    /** Name of the play control while it does not play. */
+    play: string;
+    /** Name of the play control while it plays. */
+    pause: string;
+    /** The position: `{current}` and `{duration}` as m:ss. */
+    position: string;
+    /** Read after the time while `unplayed`. */
+    unplayed: string;
+} & TranscriptLabels & TransferLabels;
+/** The shared defaults that do not name the media. */
+export declare const MEDIA_PLAYER_LABELS: {
+    cancelUpload: string;
+    cancelDownload: string;
+    retryUpload: string;
+    retryDownload: string;
+    uploadProgress: string;
+    downloadProgress: string;
+    notSent: string;
+    notReceived: string;
+    download: string;
+    cancelFailed: string;
+    retryFailed: string;
+    downloadFailed: string;
+    transcribe: string;
+    hideTranscript: string;
+    transcribeFailed: string;
+    pause: string;
+    position: string;
+};
+/** Where a player's playback is: at the start, playing, or stopped past the start. */
+export type PlaybackState = "idle" | "playing" | "paused";
+/**
+ * The keyboard seek of every player (on the voice waveform, on the circle): ArrowRight / ArrowUp
+ * 5 s forward, ArrowLeft / ArrowDown 5 s back (mirrored in RTL), PageUp / PageDown a tenth, Home
+ * / End the edges. The next position in seconds, or `null` for any other key.
+ */
+export declare function seekByKey(event: React.KeyboardEvent<HTMLElement>, current: number, total: number): number | null;
+/** Splits a player's props: the shared player ones, and the rest (its own and the DOM's). */
+export declare function splitMediaPlayerProps<P extends MediaPlayerProps>(props: P): [MediaPlayerProps, Omit<P, keyof MediaPlayerProps>];
+/** The transfer disk's props a player hands on (it adds its own `look` and `className`). */
+export type PlayerTransferDisk = Pick<TransferDiskProps, "state" | "progress" | "labels" | "onCancel" | "onRetry" | "onDownload" | "disabled">;
+export type MediaPlayer = {
+    /** The triad: what the owner (or the player's last act) wants — it may lead the media. */
+    wanted: boolean;
+    setWanted: (playing: boolean) => void;
+    transcript: Transcript | null;
+    /** Its own `disabled` or a disabled `Fieldset` around it. */
+    disabled: boolean;
+    /** The content is not there to play: in flight, failed or not fetched — it does not play. */
+    covered: boolean;
+    /** Nothing plays: disabled or covered. */
+    inactive: boolean;
+    /** The transfer disk to draw, or `null` without a transfer. */
+    transferDisk: PlayerTransferDisk | null;
+};
+/**
+ * The shared half of a chat player: registers `mediaRef` with the one-sound session, holds the
+ * `playing` triad, the transcript and the transfer. The player drives its media from `wanted`
+ * and reports what the media does through `setWanted`.
+ */
+export declare function useMediaPlayer(mediaRef: React.RefObject<HTMLMediaElement | null>, props: MediaPlayerProps, labels: MediaPlayerLabels): MediaPlayer;
+/**
+ * The play disk of every player: one `Button shape="circle"` (control `l`) for every state — play
+ * ⇄ pause, and while the media is on its way, failed or not fetched, the transfer's ×, retry or
+ * download arrow (`useTransferDisk`), the share as the Button's `progress` ring along its inner
+ * edge. Glyphs cross-fade in place (`Button.Icon`); done, the ring fades and play comes back.
+ * `solid` is the accent disk of a voice message (an outgoing bubble recolours it); `shade` the
+ * media shade with a blur over a video circle.
+ */
+export declare function PlayDisk({ look, state, labels, disabled, covered, transferDisk, onToggle, onKeyDown, describedBy, className, }: {
+    look: "solid" | "shade";
+    /** `idle` — at the start; `playing`; `paused` — stopped past the start. On the disk as `data-state`. */
+    state: PlaybackState;
+    labels: Pick<MediaPlayerLabels, "play" | "pause">;
+    disabled: boolean;
+    covered: boolean;
+    transferDisk: PlayerTransferDisk | null;
+    onToggle: () => void;
+    /** Keys on the disk (the circle seeks from it: it has no slider of its own). */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** The id of the text that describes the disk (a circle's duration or position). */
+    describedBy?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The transcript button of every player, so a voice message and a circle never drift: a soft `xs`
+ * icon Button with the transcript mark («→A») that cross-fades into a chevron up while the text is
+ * open, spinning (`loading`) while it is asked for. The player places it at its top end.
+ */
+export declare function TranscriptButton({ transcript, disabled, className, }: {
+    transcript: Transcript;
+    disabled?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/internal/mediaSession.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/** `media` started playing (or got its sound back while playing): it takes the session. */
+export declare function claimPlayback(media: HTMLMediaElement): void;
+/** `media` paused, ended or went away: the session is free. */
+export declare function releasePlayback(media: HTMLMediaElement): void;
+/** The media element now holding the session (tests and diagnostics). */
+export declare function activePlayback(): HTMLMediaElement | null;
+/**
+ * Registers a media element with the session: playing it with sound pauses whatever else plays.
+ * Listens to the element itself, so native controls, `play()` from code and the kit's own buttons
+ * all count.
+ */
+export declare function useMediaSession(ref: React.RefObject<HTMLMediaElement | null>): void;

package/dist/internal/messageList.d.ts

@@ -0,0 +1,121 @@
+import * as React from "react";
+import type { MessageDirection, MessageReactionOption, MessageUser } from "../components/message/types";
+import type { RangeSelectionHandlers } from "./useRangeSelection";
+/**
+ * The contract between a message list (`Chat.Messages`) and the messages in it (`Message.Root`,
+ * `Message.Typing`).
+ *
+ * The list owns what spans messages: the selection, the window of rendered rows, jumps, read
+ * receipts, the quick reaction and the reaction bar's options. A message reads it here and never
+ * imports the list. Outside a list every value is the inert default: a message stands alone.
+ */
+/** A message row of a list (`Message.Root` marks its `<article>` with it). */
+export declare const ARTICLE = "[data-message-article]";
+/** The quick reaction of a double tap. */
+export declare const DEFAULT_QUICK_REACTION = "\uD83D\uDC4D";
+/** The values of the selected messages, `null` while not selecting. */
+export type Selection = readonly string[] | null;
+/**
+ * The selection of a list, outside React state: each message subscribes to its own state in it
+ * (`useMessageSelection`), so a toggle re-renders the messages whose state changed, not the list.
+ */
+export type SelectionStore = {
+    get: () => Selection;
+    /** `0` — not selecting, `1` — selecting, not selected, `2` — selected. */
+    stateOf: (value: string) => 0 | 1 | 2;
+    set: (next: Selection) => void;
+    subscribe: (listener: () => void) => () => void;
+};
+export declare function createSelectionStore(initial: Selection): SelectionStore;
+export type MessageListContextValue = {
+    /** Inside a list: messages stand in rows of it. `false` — a message on its own. */
+    inList: boolean;
+    /**
+     * A group chat: incoming messages keep a gutter for the author's avatar, the first message of an
+     * author's run shows the author's header and the last one the avatar.
+     */
+    group: boolean;
+    /**
+     * A message's article mounted (its layout effect): it enters when the list planned it as new at
+     * the end, and is watched for `onRead`. Returns the unregister.
+     */
+    register: (article: HTMLElement, value: string, direction: MessageDirection) => () => void;
+    /** A message was new at the end in this commit. */
+    arrivedNow: () => boolean;
+    /**
+     * Brings a message into view and points at it (unless `flash` is `false`: the others blink
+     * around it); `focus` moves the focus to it too.
+     */
+    reveal: (value: string, focus?: boolean, flash?: boolean) => boolean;
+    /** The selection; read it through `useMessageSelection` / `useListSelection`. */
+    selection: SelectionStore;
+    /** Selection mode can be entered (the list owns a selection). */
+    selectable: boolean;
+    setSelected: (next: Selection) => void;
+    /** Selection by click, Shift range and drag over the messages (`internal/useRangeSelection`). */
+    range: RangeSelectionHandlers;
+    /** The place of a message in the list. */
+    indexOf: (article: Element) => number;
+    /** What the parts of a message keep while its row is out of the window, by message value. */
+    memoryOf: (value: string) => Map<string, unknown>;
+    /** A message changes size in place: the scroller keeps the view still while it plays. */
+    hold: (() => void) | undefined;
+    /** The emoji of a double tap; `false` — off. */
+    quickReaction: string | false;
+    /** The reactions of the reaction bar; `null` — the message's defaults. */
+    reactionOptions: readonly MessageReactionOption[] | null;
+    /** The reader: joins a reaction's avatars at once when they put it. */
+    reader: MessageUser | undefined;
+    /** Says `text` in the list's polite live region. */
+    announce: (text: string) => void;
+};
+/** The list provides it to its messages. */
+export declare const MessageListProvider: React.Provider<MessageListContextValue>;
+/**
+ * The list's settings. Stable while the list's props are: the selection is not in it, so a toggle
+ * or a drag step does not re-render the messages.
+ */
+export declare function useMessageList(): MessageListContextValue;
+/** This message in selection mode: whether the list is selecting and whether it is selected. */
+export declare function useMessageSelection(value: string): {
+    selecting: boolean;
+    selected: boolean;
+};
+/** The whole selection of the list. */
+export declare function useListSelection(): Selection;
+/** What a message row says about itself from its props alone, before it renders. */
+export type MessageRowDescription = {
+    value: string | undefined;
+    direction: MessageDirection;
+    /** The row's height before it is measured (px). */
+    estimate: number;
+    /** The text a search looks in: the message's text and transcripts. */
+    text: string;
+};
+/**
+ * What a top-level child of a list is. Every child is a row (a message, a fragment with one, a
+ * date, a service line, the unread band) except the parts that live at the list's end (`tail`:
+ * typing, the selection bar). A `message` row describes itself; a `sticky` row is a date that
+ * sticks while its day scrolls.
+ */
+export type RowKind = {
+    tail?: boolean;
+    sticky?: boolean;
+    message?: (props: Record<string, unknown>) => MessageRowDescription;
+};
+/** The parts of the kit declare how a list lays them out (compared by element type). */
+export declare function defineRowKind(type: object, kind: RowKind): void;
+/** The row kind of an element, if its type declared one. */
+export declare function rowKindOf(node: React.ReactNode): RowKind | undefined;
+/**
+ * A message row as the list sees it: its value (the message's own `value`, else the row's key)
+ * and its place among the messages of the list (`aria-posinset` / `aria-setsize`).
+ */
+export type MessageRowInfo = {
+    value: string;
+    position: number;
+    size: number;
+};
+/** The list wraps every row in it. */
+export declare const MessageRowProvider: React.Provider<MessageRowInfo | null>;
+export declare function useMessageRow(): MessageRowInfo | null;

package/dist/internal/messagePart.d.ts

@@ -0,0 +1,106 @@
+import * as React from "react";
+import type { SurfaceDepth } from "./surfaceDepth";
+/**
+ * The contract between a chat message (`Message.Root`) and the content parts inside it (text,
+ * media, a video circle, voice, file, location, contact, link preview).
+ *
+ * A content part renders its own box only. It never knows about bubbles, tails, reactions or where
+ * the meta goes: it declares what it is once, on its component type (`defineMessagePart`), and the
+ * message decides the shell, the tail, the meta and the edges from the declarations of its children
+ * (fragments flattened, `null` / `false` ignored). Inside, a part reads `useMessagePart()` for the
+ * two things only the message can hand it: the meta's spacer or its overlay.
+ */
+export type MessagePartSpec = {
+    /**
+     * The shell the part asks for: `fill` — a bubble (text, voice, file, a card); `media` — a picture,
+     * a video or an album: alone in a message it is the shell itself (no backing, the meta on a pill
+     * over it, reactions under it); `round` — a video circle (no backing, reactions under it).
+     */
+    shell: "fill" | "media" | "round";
+    /**
+     * How the meta (time, «изменено», ticks) stands with the part when it ends the message: `inline`
+     * — the part renders `spacer` at the end of its last line and the meta sits over it in the
+     * bubble's bottom-end corner; `overlay` — the part renders `overlay` (the meta on a dark pill)
+     * inside its own positioned box, at the bottom-end corner.
+     */
+    meta: "inline" | "overlay";
+    /** A picture: a bubble holding it curls no tail. */
+    picture?: boolean;
+    /**
+     * The part's box reaches the bubble's edges: its root carries `data-message-bleed` (the message
+     * pulls it over the bubble's inline padding) and the message drops its block padding on the side
+     * the part starts or ends the bubble. The part pads its own text with `--message-pad-x` /
+     * `--message-pad-y`.
+     */
+    bleed?: boolean;
+    /**
+     * The part sets its own inline size (a picture, a card): the bubble is exactly as wide as it
+     * (`min-content`), a caption wraps under it.
+     */
+    sized?: boolean;
+    /**
+     * An estimate of the part's block size in px from its props, before it renders: the row's
+     * `contain-intrinsic-size` while it is off screen (`content-visibility: auto`).
+     */
+    estimate?: (props: never) => number;
+    /**
+     * The text a chat's search looks in, from the part's props (a text, a transcript). Only what the
+     * part also marks as a match (`useMessageHighlight`).
+     */
+    text?: (props: never) => string;
+};
+/** Declares `component` a message content part. Returns it, for `export const X = define(…)`. */
+export declare function defineMessagePart<C extends object>(component: C, spec: MessagePartSpec): C;
+/** The declaration of an element type, or `null` for anything that is not a content part. */
+export declare function messagePartOf(type: unknown): MessagePartSpec | null;
+export type MessagePartContextValue = {
+    /**
+     * For the part that ends the message with `meta: "inline"`: an invisible copy of the meta to put
+     * at the very end of the part's last line (inline, after the last word). It reserves the meta's
+     * room; the meta wraps to a line of its own only when the last line is too long. Render it in
+     * one place at a time. `null` anywhere else.
+     */
+    spacer: React.ReactNode;
+    /**
+     * For the part that ends the message with `meta: "overlay"`: the meta on a dark pill, absolutely
+     * positioned at the bottom-end corner of its nearest positioned ancestor — put it inside the
+     * picture's box or the circle. `null` anywhere else.
+     */
+    overlay: React.ReactNode;
+    /**
+     * The depth of an incoming bubble, in both directions: a box that must stay neutral inside an
+     * outgoing message (the gaps of an album) sets `data-depth={neutralDepth}` and paints
+     * `--prime-color-layer-current`.
+     */
+    neutralDepth: SurfaceDepth;
+    /**
+     * State of the message's parts that outlives its row: a long conversation renders only the rows
+     * near the view, so a row that scrolls away unmounts and mounts again. One entry per part kind
+     * (`memory.get("transcript")`); `null` outside a list.
+     */
+    memory?: Map<string, unknown> | null;
+    /**
+     * Call right before the part changes its own size in place (a transcript that opens or closes):
+     * the conversation keeps what the reader sees still while it plays, so the message grows past
+     * the edge instead of pushing the list. `undefined` outside a list.
+     */
+    holdPosition?: () => void;
+    /**
+     * A press inside the part starts (`true`) or ends: the whole message presses as one (a picture
+     * with its caption), never the part alone. `undefined` outside a message.
+     */
+    press?: (pressed: boolean) => void;
+};
+/** `Message.Root` wraps each content part in it. */
+export declare const MessagePartProvider: React.Provider<MessagePartContextValue | null>;
+/** What the message hands this part; outside a message every slot is empty. */
+export declare function useMessagePart(): MessagePartContextValue;
+/** Whether the caller renders inside a chat message. */
+export declare function useInMessage(): boolean;
+/**
+ * The search query of a chat (`Chat.Search`): texts and transcripts mark its matches.
+ * Its own context: typing a query re-renders the texts, not the messages.
+ */
+export declare const MessageHighlightContext: React.Context<string>;
+/** The query a chat text marks; `""` outside a chat. */
+export declare function useMessageHighlight(): string;

package/dist/internal/overlay/FloatingPanel.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import type { ControlSize } from "../states";
 import type { FloatingLayer } from "./useFloatingLayer";
 export type FloatingPanelProps = Omit<React.HTMLAttributes<HTMLElement>, "onAnimationEnd"> & {
     floating: FloatingLayer;

package/dist/internal/overlay/focus.d.ts

@@ -1,12 +1,33 @@
 /** Tab stops inside `container`, in DOM order (hidden and `aria-hidden` ones skipped). */
 export declare function getFocusable(container: HTMLElement): HTMLElement[];
+/**
+ * The element is, or holds, a tab stop by nature (a native control, a link, editable text): focus
+ * reaches it without an added `tabindex`.
+ */
+export declare function hasNativeTabStop(el: HTMLElement): boolean;
 /**
  * Moves focus into a layer that just opened, unless focus is already inside (a child `autoFocus`):
  * `[data-autofocus]`, else the first tab stop, else the container itself.
  */
 export declare function focusInto(container: HTMLElement): void;
-/** Focuses `el` when it is still in the document. */
-export declare function focusBack(el: HTMLElement | null | undefined): void;
+/**
+ * Focuses `el` when it is still in the document. `quiet` — the layer was opened with a pointer:
+ * focus returns without the focus ring, also when a key (Escape) closed the layer; the next key
+ * brings the ring back.
+ */
+export declare function focusBack(el: HTMLElement | null | undefined, quiet?: boolean): void;
+/** Who opened a layer, to return focus to on close, and whether a pointer did it. */
+export type Opener = {
+    element: HTMLElement | null;
+    byPointer: boolean;
+};
+/**
+ * The opener of a layer, read while rendering the open transition (before a child `autoFocus`
+ * moves focus in). After a press: the control pressed — a click leaves focus elsewhere in Safari
+ * (the body, or a `tabindex="-1"` region around the button) — and `byPointer`, so focus goes
+ * back without a focus ring. After a key: the focused element, and the ring shows.
+ */
+export declare function captureOpener(): Opener;
 /**
  * The element focused right now — read while rendering the open transition, before a child
  * `autoFocus` moves focus into the new layer, so it is the opener to return to on close.

package/dist/internal/overlay/useFloatingLayer.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type PositionOptions, type PositionSide } from "@/hooks/usePosition";
-import { type MotionDurationToken, type Presence } from "@/hooks/usePresence";
+import { type PositionOptions, type PositionSide } from "../../hooks/usePosition";
+import { type MotionDurationToken, type Presence } from "../../hooks/usePresence";
 import { type LayerEntry } from "./layerStack";
 export type UseFloatingLayerOptions = PositionOptions & {
     open: boolean;

package/dist/internal/palette.d.ts

@@ -0,0 +1,7 @@
+import { type PaletteColor } from "./states";
+/**
+ * A palette hue for a person, stable per `id`: the same id always gets the same hue, on every
+ * render and every device (a string hash, no state). For names in a group chat and initials of
+ * avatars that carry no meaning of their own.
+ */
+export declare function hueOf(id: string): PaletteColor;

package/dist/internal/progressSegments.d.ts

@@ -2,7 +2,7 @@
  * Shared props, math and accessible text of the progress indicators (ProgressBar, ProgressCircle):
  * one `value`, or `segments` that split a whole.
  */
-import type { Tone } from "./states";
+import type { PaletteColor, Tone } from "./states";
 /** The two modes of a progress indicator; the component adds its own common props. */
 export type ProgressModeProps = {
     /** Current value; clamped to `0…max`. */
@@ -14,6 +14,8 @@ export type ProgressModeProps = {
     segments?: never;
     segmentGap?: never;
     labels?: never;
+    legend?: never;
+    formatValue?: never;
 } | {
     /** Parts in order (left to right, clockwise from the top); each one's size is its share of `max`. */
     segments: ProgressSegment[];
@@ -23,6 +25,10 @@ export type ProgressModeProps = {
     segmentGap?: "none" | "hairline";
     /** Built-in accessible strings for empty distributions. */
     labels?: Partial<ProgressSegmentsLabels>;
+    /** A legend of the parts: color · name · value · share. Default `false`. */
+    legend?: boolean;
+    /** Display of a value in the legend (and in ProgressBar rows). Default: Russian digit groups. */
+    formatValue?: (value: number) => string;
     value?: never;
     tone?: never;
 };
@@ -33,13 +39,44 @@ export declare function resolveValue(value: number, max: number | undefined): {
     ratio: number;
     percent: number;
 };
+/**
+ * One part of a whole. `tone` names a meaning (done, overdue), `color` names a category (a
+ * platform, a source) with its chart color; one or the other. Neither → `accent`.
+ */
 export type ProgressSegment = {
     /** Non-negative weight; negative or non-finite values count as 0. */
     value: number;
     label?: string;
-    /** Segment fill. Default `accent`. */
+} & ({
+    /** Fill by meaning. Default `accent`. */
     tone?: Tone;
+    color?: never;
+} | {
+    /** Fill by category: the hue's step of the chart palette (`--prime-color-chart-*`). */
+    color: PaletteColor;
+    tone?: never;
+});
+/** `data-tone` / `data-color` of a part: a category color, else a tone (default `accent`). */
+export declare function segmentFill(segment: ProgressSegment): {
+    tone: Tone | undefined;
+    color: PaletteColor | undefined;
 };
+/** What 100% of a row is in the `rows` layout. */
+export type ProgressScale = "sum" | "max" | "first";
+export type ResolvedRow = {
+    segment: ProgressSegment;
+    /** Bar length, 0–1. */
+    ratio: number;
+    /** Rounded share shown at the end of the row, 0–100. */
+    percent: number;
+};
+/**
+ * Rows of a ranking: `sum` — length and share of the total (`max` raises the total); `max` — the
+ * leader is a full bar, the share is still of the total; `first` — both against the first row
+ * (a funnel: the first step is 100%).
+ */
+export declare function resolveRows(input: ProgressSegment[], scale: ProgressScale, max: number | undefined): ResolvedRow[];
+export declare const formatProgressValue: (value: number) => string;
 export type ProgressSegmentsLabels = {
     /** Accessible description when `segments` is empty. */
     empty: string;

package/dist/internal/readReceipts.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Read receipts of a list: reports each registered element once, when it has been seen — at least
+ * half of it inside the view (or half the view, for an element taller than the view) — while the
+ * page is visible. Reports are batched: everything seen in one frame comes in one call.
+ */
+export type ReadReceipts = {
+    observe: (element: Element, value: string) => void;
+    unobserve: (element: Element) => void;
+    disconnect: () => void;
+};
+export declare function createReadReceipts(onRead: (values: string[]) => void): ReadReceipts;

package/dist/internal/richText.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+export type RichInline = {
+    type: "text";
+    text: string;
+} | {
+    type: "bold" | "italic" | "strike";
+    children: RichInline[];
+} | {
+    type: "code";
+    text: string;
+} | {
+    type: "link";
+    href: string;
+    children: RichInline[];
+};
+export type RichBlock = {
+    type: "text";
+    children: RichInline[];
+} | {
+    type: "quote";
+    children: RichInline[];
+} | {
+    type: "code";
+    text: string;
+};
+/** The address when it is a safe link, else `null`. */
+export declare function safeHref(raw: string): string | null;
+/** Inline markup of one run of text. */
+export declare function parseInline(source: string): RichInline[];
+/** Blocks of a message: runs of text, quotes (`> ` lines) and fenced code. */
+export declare function parseRichText(source: string): RichBlock[];
+export type RichTextProps = {
+    source: string;
+    /** Rendered at the very end of the last line (a chat bubble's meta reserve). */
+    end?: React.ReactNode;
+    /** Marks every case-insensitive match of this text (a search through a chat). */
+    highlight?: string;
+};
+/** A message text with its Markdown subset rendered safely; `end` closes the last text line. */
+export declare function RichText({ source, end, highlight }: RichTextProps): import("react/jsx-runtime").JSX.Element;