prime-ui-kit 0.14.0 → 0.16.0

package/dist/components/timeline/Timeline.d.ts

@@ -1,22 +1,36 @@
 import * as React from "react";
 import type { ControlSize, PaletteColor, Tone } from "../../internal/states";
 export type TimelineRootProps = {
-    /** Tier of text, dots and row rhythm. Default `m` (rows 64px). */
+    /**
+     * Text, dot and row rhythm: rows 40 · 52 · 64 · 68 · 76 px, dot column → text 8 · 12 · 16 · 16 · 20 px. Without it the tier of its host, else `m`.
+     */
     size?: ControlSize;
-    /** `Timeline.Group` elements. */
+    /**
+     * The `Timeline.Group`s.
+     */
     children: React.ReactNode;
+    /**
+     * Class on the element.
+     */
     className?: string;
     ref?: React.Ref<HTMLDivElement>;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
-declare function TimelineRoot({ size, children, className, ...rest }: TimelineRootProps): import("react/jsx-runtime").JSX.Element;
+declare function TimelineRoot({ size: sizeProp, children, className, ...rest }: TimelineRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace TimelineRoot {
     var displayName: string;
 }
 export type TimelineGroupProps = {
-    /** Group heading (e.g. «Недавно»); labels the list via `aria-labelledby`. */
+    /**
+     * Group heading («Недавно»); names the list via `aria-labelledby`.
+     */
     label?: React.ReactNode;
-    /** `Timeline.Item` and `Timeline.Gap` elements. */
+    /**
+     * `Timeline.Item` and `Timeline.Gap` rows.
+     */
     children: React.ReactNode;
+    /**
+     * Class on the element.
+     */
     className?: string;
     ref?: React.Ref<HTMLOListElement>;
 } & Omit<React.OlHTMLAttributes<HTMLOListElement>, "children">;
@@ -26,94 +40,101 @@ declare namespace TimelineGroup {
     var displayName: string;
 }
 export type TimelineItemProps = {
-    /** Decorative dot hue (categorization). Default `blue`, shown at reduced emphasis. */
+    /**
+     * Decorative dot hue for categories, at reduced emphasis.
+     */
     color?: PaletteColor;
-    /** Semantic dot color (status). Wins over `color`; shown at full emphasis. */
+    /**
+     * Status dot color at full emphasis; wins over `color`.
+     */
     tone?: Tone;
-    /** Renders the row as a link. */
+    /**
+     * Renders the row as a link (with `target`, `rel`, `download`).
+     */
     href?: string;
-    /** Renders the row as the single child element (router link etc.); the dot is prepended to its children. */
+    /**
+     * Renders the row as the single child element (a router link).
+     */
     asChild?: boolean;
-    /** Renders the row as a `button` (unless `href` / `asChild`). */
+    /**
+     * Renders the row as a `<button>`.
+     */
     onClick?: React.MouseEventHandler<HTMLElement>;
-    /** `Timeline.Title`, `Timeline.Meta`, `Timeline.Value`. */
+    /**
+     * `Timeline.ItemTitle`, `Timeline.ItemMeta`, `Timeline.ItemValue`.
+     */
     children: React.ReactNode;
+    /**
+     * Class on the element.
+     */
     className?: string;
-    /** The row element (`a`, `button`, `div` or the `asChild` element). */
     ref?: React.Ref<HTMLElement>;
 } & Omit<React.HTMLAttributes<HTMLElement>, "children" | "color" | "onClick"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel" | "download">;
-declare function TimelineItem({ color, tone, href, asChild, onClick, children, className, ref, ...rest }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
+declare function TimelineItem({ color, tone, href, asChild, onClick, children, className, ref, target, rel, download, ...rest }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TimelineItem {
     var displayName: string;
 }
-export type TimelineTitleProps = {
+type SpanPartProps = {
+    /**
+     * The amount.
+     */
     children: React.ReactNode;
+    /**
+     * Class on the element.
+     */
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+export type TimelineItemTitleProps = SpanPartProps;
 /** First line: the event. Medium, primary (accent on the highlighted row); wraps when narrow. */
-declare function TimelineTitle({ children, className, ...rest }: TimelineTitleProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TimelineTitle {
+declare function TimelineItemTitle({ children, className, ...rest }: TimelineItemTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineItemTitle {
     var displayName: string;
 }
-export type TimelineMetaProps = {
-    children: React.ReactNode;
-    className?: string;
-    ref?: React.Ref<HTMLSpanElement>;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
-/** Second line: date and relative time, muted, tabular numbers. Emphasize a part with `Timeline.MetaPrimary` or `<strong>`. */
-declare function TimelineMeta({ children, className, ...rest }: TimelineMetaProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TimelineMeta {
-    var displayName: string;
-}
-export type TimelineMetaPrimaryProps = {
-    children: React.ReactNode;
-    className?: string;
-    ref?: React.Ref<HTMLSpanElement>;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
-/** Emphasized part of the meta line (the date): primary, medium. */
-declare function TimelineMetaPrimary({ children, className, ...rest }: TimelineMetaPrimaryProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TimelineMetaPrimary {
+export type TimelineItemMetaProps = SpanPartProps;
+/**
+ * Secondary line of an event, muted, tabular numbers: under the title (date and relative time;
+ * emphasize a part with `<strong>`), or inside `Timeline.ItemValue` the value's second line
+ * (category, unit), right-aligned under it.
+ */
+declare function TimelineItemMeta({ children, className, ...rest }: TimelineItemMetaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineItemMeta {
     var displayName: string;
 }
-export type TimelineValueProps = {
-    /** Text color. Default `neutral` (primary text). */
+export type TimelineItemValueProps = SpanPartProps & {
+    /**
+     * Text color (income `success`, refund `danger`).
+     */
     tone?: Tone;
-    children: React.ReactNode;
-    className?: string;
-    ref?: React.Ref<HTMLSpanElement>;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+};
 /**
- * Trailing amount: right-aligned, vertically centered, tabular numbers. Add `Timeline.ValueMeta` for a
- * muted second line. Moves under the meta below 20rem.
+ * Trailing amount: right-aligned, vertically centered, tabular numbers; a `Timeline.ItemMeta`
+ * inside is its muted second line. Moves under the meta below 20rem.
  */
-declare function TimelineValue({ tone, children, className, ...rest }: TimelineValueProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TimelineValue {
-    var displayName: string;
-}
-export type TimelineValueMetaProps = {
-    children: React.ReactNode;
-    className?: string;
-    ref?: React.Ref<HTMLSpanElement>;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
-/** Second line inside `Timeline.Value` (category, unit): meta size, muted, right-aligned under the value. */
-declare function TimelineValueMeta({ children, className, ...rest }: TimelineValueMetaProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TimelineValueMeta {
+declare function TimelineItemValue({ tone, children, className, ...rest }: TimelineItemValueProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineItemValue {
     var displayName: string;
 }
-export type TimelineGapMetaProps = React.HTMLAttributes<HTMLSpanElement> & {
+export type TimelineDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
     ref?: React.Ref<HTMLSpanElement>;
 };
-/** A caption on the right of a gap (e.g. «сейчас»). */
-declare function TimelineGapMeta({ className, ...rest }: TimelineGapMetaProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TimelineGapMeta {
+/** The secondary caption of a gap, at its end (e.g. «сейчас»). */
+declare function TimelineDescription({ className, ...rest }: TimelineDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineDescription {
     var displayName: string;
 }
 export type TimelineGapProps = {
-    /** Caption color and hollow dot. Default `neutral` (muted); `warning` / `danger` flag a long interval. */
+    /**
+     * Caption and dot color; `warning` / `danger` flag a long interval.
+     */
     tone?: Tone;
-    /** Interval caption, e.g. «40 дней · 2 200 км без обслуживания», and an optional `Timeline.GapMeta`. */
+    /**
+     * The interval caption and an optional `Timeline.Description`.
+     */
     children: React.ReactNode;
+    /**
+     * Class on the element.
+     */
     className?: string;
     ref?: React.Ref<HTMLDivElement>;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
@@ -129,12 +150,10 @@ export declare const Timeline: {
     Root: typeof TimelineRoot;
     Group: typeof TimelineGroup;
     Item: typeof TimelineItem;
-    Title: typeof TimelineTitle;
-    Meta: typeof TimelineMeta;
-    MetaPrimary: typeof TimelineMetaPrimary;
-    Value: typeof TimelineValue;
-    ValueMeta: typeof TimelineValueMeta;
+    ItemTitle: typeof TimelineItemTitle;
+    ItemMeta: typeof TimelineItemMeta;
+    ItemValue: typeof TimelineItemValue;
     Gap: typeof TimelineGap;
-    GapMeta: typeof TimelineGapMeta;
+    Description: typeof TimelineDescription;
 };
 export {};

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { type PositionAlign, type PositionSide } from "../../hooks/usePosition";
-import type { ControlSize } from "../../internal/states";
+import type { SlotPartProps } from "../../internal/slot";
+import { type ControlSize } from "../../internal/states";
 export type TooltipSide = PositionSide;
 /**
  * The anchored-layer vocabulary. A tooltip centres on its trigger by default (foundation §8);
@@ -8,10 +9,17 @@ export type TooltipSide = PositionSide;
  */
 export type TooltipAlign = PositionAlign;
 export type TooltipProviderProps = {
-    /** Show delay in ms for every Tooltip.Root inside. */
+    /**
+     * Show delay in ms for every Tooltip.Root inside.
+     */
     delayDuration?: number;
-    /** Window in ms after a tooltip closes during which the next one opens instantly. */
+    /**
+     * Window in ms after a tooltip closes during which the next one opens instantly.
+     */
     skipDelayDuration?: number;
+    /**
+     * Subtree.
+     */
     children: React.ReactNode;
 };
 declare function TooltipProvider({ delayDuration, skipDelayDuration, children, }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
@@ -19,39 +27,61 @@ declare namespace TooltipProvider {
     var displayName: string;
 }
 export type TooltipRootProps = {
+    /**
+     * Tooltip.Trigger and Tooltip.Content.
+     */
     children: React.ReactNode;
+    /**
+     * Controlled visibility; together with `onOpenChange`.
+     */
     open?: boolean;
+    /**
+     * Initial visibility, uncontrolled.
+     */
     defaultOpen?: boolean;
+    /**
+     * Called on hover, focus, blur, pointer-leave, press, Escape, and when a neighbour in the group opens.
+     */
     onOpenChange?: (open: boolean) => void;
-    /** Show delay in ms for this tooltip; defaults to the Provider's (400). */
+    /**
+     * Show delay in ms for this tooltip (the Provider's when omitted); hiding never waits for it.
+     */
     delayDuration?: number;
 };
 declare function TooltipRoot({ children, open, defaultOpen, onOpenChange, delayDuration: delayProp, }: TooltipRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TooltipRoot {
     var displayName: string;
 }
-export type TooltipTriggerProps = {
-    /**
-     * One element. A focusable one (Button, link) is the trigger as is; a disabled control is wrapped
-     * in a focusable host that takes hover and Tab for it; a non-interactive one (Badge, Avatar,
-     * ProgressCircle, an `Icon` with `label`) becomes a tab stop.
-     */
-    children: React.ReactElement;
-    ref?: React.Ref<HTMLElement>;
-} & Omit<React.HTMLAttributes<HTMLElement>, "children">;
+export type TooltipTriggerProps = SlotPartProps;
 /**
- * The tooltip id joins the child's own `aria-describedby`; the child's handlers run first. Other
- * props (handlers, ARIA, `ref`) are forwarded to the child.
+ * Wraps one element. A focusable one (Button, link) is the trigger as is; a disabled control — by
+ * its own `disabled` or a disabled `Fieldset` around it — is wrapped in a focusable host that takes
+ * hover and Tab for it (around a button the host is the button: `role="button"`, `aria-disabled`,
+ * named by the control); a non-interactive
+ * one (Badge, Avatar, ProgressCircle, an `Icon` with `label`) becomes a tab stop. The tooltip id
+ * joins the child's own `aria-describedby`; the child's handlers run first. Props a wrapping trigger
+ * adds pass on to the child.
  */
-declare function TooltipTrigger({ children, ...forwarded }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger(props: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TooltipTrigger {
     var displayName: string;
 }
 export type TooltipContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "role" | "onPointerEnter" | "onPointerLeave"> & {
+    /**
+     * Hint text, optionally with a Kbd.
+     */
     children: React.ReactNode;
-    /** Text and padding tier; also the size context of controls inside (a Kbd). */
+    /**
+     * Text and padding tier; also the size context of controls inside (a Kbd).
+     */
     size?: ControlSize;
+    /**
+     * Preferred side; flips to the opposite one when it does not fit, then shifts inside the viewport.
+     */
     side?: TooltipSide;
+    /**
+     * Alignment along the trigger: centred by default; `auto` lines the chip up with the trigger edge that has more room beyond it; `start` or `end` fix the edge. The arrow keeps pointing at the trigger.
+     */
     align?: TooltipAlign;
     ref?: React.Ref<HTMLDivElement>;
 };

package/dist/components/typography/Typography.d.ts

@@ -6,21 +6,47 @@ export type TypographyWeight = "regular" | "medium" | "semibold";
 export type TypographyTracking = "normal" | "tight" | "tighter" | "wide";
 export type TypographyAs = "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "small" | "blockquote" | "article" | "section" | "header" | "footer" | "aside" | "nav" | "main";
 export type TypographyProps = {
+    /**
+     * The element, by the page outline; the role keeps the look.
+     */
     as?: TypographyAs;
-    /** Text role (`--prime-text-<role>-*`). */
+    /**
+     * Text role: size, line height, weight and tracking.
+     */
     variant: TypographyRole;
-    /** Overrides the role's weight. Omit to use the role's own weight. */
+    /**
+     * Overrides the role's weight.
+     */
     weight?: TypographyWeight;
-    /** Overrides the role's tracking. Omit to use the role's own tracking. */
+    /**
+     * Overrides the role's tracking with a `--prime-font-tracking-*` step.
+     */
     tracking?: TypographyTracking;
-    /** Clamp to one line with an ellipsis (set `title` when the full text matters). */
+    /**
+     * `tabular` — every digit as wide as the others: amounts, times and counts line up in a column and keep their width.
+     */
+    numeric?: "proportional" | "tabular";
+    /**
+     * One line with an ellipsis; set `title` when the full text matters.
+     */
     truncate?: boolean;
+    /**
+     * Italic, for quotes and titles of works.
+     */
     italic?: boolean;
-    /** Text color. Default `default` (primary text). */
+    /**
+     * Text color by meaning; `default` is primary text.
+     */
     tone?: TextTone;
+    /**
+     * The text.
+     */
     children?: React.ReactNode;
+    /**
+     * Class on the element.
+     */
     className?: string;
     ref?: React.Ref<HTMLElement>;
 } & React.HTMLAttributes<HTMLElement>;
 /** Any text element styled by one text role; state goes to `data-*`. */
-export declare function Typography({ as: Tag, variant, weight, tracking, truncate, italic, tone, className, children, ref, ...rest }: TypographyProps): import("react/jsx-runtime").JSX.Element;
+export declare function Typography({ as: Tag, variant, weight, tracking, numeric, truncate, italic, tone, className, children, ref, ...rest }: TypographyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/video-note/VideoNote.d.ts

@@ -7,14 +7,20 @@ export type VideoNoteLabels = MediaPlayerLabels & {
     /** The disk's description before playback: `{duration}`. */
     duration: string;
 };
+export declare const VIDEO_NOTE_LABELS: VideoNoteLabels;
 /**
  * The shared player props (`MediaPlayerProps`, the same as VoicePlayer's) and what only a video
  * has: a poster. No waveform (it shows a face, not levels) and no rate (a face is watched at its
  * own pace; a voice recording is the one listened to faster).
  */
 export type VideoNoteProps = MediaPlayerRootProps & MediaPlayerProps & {
-    /** A still to show before the video draws its first frame. */
+    /**
+     * A still shown before the first frame; without it the first frame is drawn. Video only.
+     */
     poster?: string;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<VideoNoteLabels>;
 };
 /**

package/dist/{internal → components/visually-hidden}/VisuallyHidden.d.ts

@@ -1,8 +1,7 @@
 import type * as React from "react";
-export type VisuallyHiddenProps = React.HTMLAttributes<HTMLSpanElement> & {
+export type VisuallyHiddenProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "role" | "aria-live" | "aria-atomic" | "aria-relevant"> & {
     /**
-     * An announcement region: `polite` — `role="status"`, read after what is being said; `assertive`
-     * — `role="alert"`, read at once. Both are atomic: the whole text is read on every change.
+     * An announcement region, read as a whole on every change: `polite` — `role="status"`, `assertive` — `role="alert"` (urgent only).
      */
     live?: "polite" | "assertive";
     ref?: React.Ref<HTMLSpanElement>;
@@ -11,8 +10,9 @@ export type VisuallyHiddenProps = React.HTMLAttributes<HTMLSpanElement> & {
 export declare const visuallyHiddenClass: string;
 /**
  * Text for screen readers only: spoken counters, live-region messages, names of icon-only parts.
- * Public as `VisuallyHidden` (docs in `src/components/visually-hidden/`); inside the kit it replaces
- * the per-component `.srOnly` / `.visuallyHidden` CSS copies.
+ * The one sr-only recipe and the one announcement region of the kit: a live region is
+ * `live="polite"` / `live="assertive"`, never a hand-set `role` / `aria-live` (the props type has
+ * none, and the region attributes win over the rest).
  */
 export declare function VisuallyHidden({ className, live, ...rest }: VisuallyHiddenProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace VisuallyHidden {

package/dist/components/voice-player/VoicePlayer.d.ts

@@ -9,19 +9,32 @@ export type VoicePlayerLabels = MediaPlayerLabels & {
     /** Name of the rate chip: `{rate}` as shown on it. */
     rate: string;
 };
+export declare const VOICE_PLAYER_LABELS: VoicePlayerLabels;
 /**
  * The shared player props (`MediaPlayerProps`, the same as VideoNote's) and what only a voice
  * message has: its waveform (the seek is drawn on it) and the speed chip (a recording of speech is
  * listened to faster; a round video is watched as a face at its own pace — VideoNote has no rate).
  */
 export type VoicePlayerProps = MediaPlayerRootProps & MediaPlayerProps & {
-    /** Levels 0…1 from data, resampled to the bars that fit the width. Without it: a calm flat row. */
+    /**
+     * Levels 0…1 from data, resampled to the bars that fit the width. Without it: a calm flat row. Voice only: a circle shows a face, not levels.
+     */
     waveform?: readonly number[];
-    /** Playback speed (controlled). */
+    /**
+     * Playback speed (controlled). Voice only: speech is listened to faster; a face is watched at its own pace.
+     */
     rate?: VoicePlayerRate;
-    /** Initial playback speed (uncontrolled). Default `1`. */
+    /**
+     * Initial playback speed (uncontrolled).
+     */
     defaultRate?: VoicePlayerRate;
+    /**
+     * The rate chip was pressed: 1× → 1.5× → 2× → 1×.
+     */
     onRateChange?: (rate: VoicePlayerRate) => void;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<VoicePlayerLabels>;
 };
 /**

package/dist/hooks/breakpoints.d.ts

@@ -0,0 +1,10 @@
+/** Viewport below the first breakpoint (640): overlays become bottom sheets. */
+export declare const COMPACT_QUERY = "(max-width: 639px)";
+/** Viewport below the tablet breakpoint (768): the side navigation leaves the page, off-canvas. */
+export declare const OFF_CANVAS_QUERY = "(max-width: 767px)";
+/** A touch screen: no hover and a coarse pointer (long press instead of hover, larger targets). */
+export declare const TOUCH_QUERY = "(hover: none) and (pointer: coarse)";
+/** A pointer that can hover: hover-only affordances (a reaction bar on a long hover). */
+export declare const HOVER_QUERY = "(hover: hover)";
+/** The person asked for less motion. */
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";

package/dist/hooks/floatingPosition.d.ts

@@ -0,0 +1,42 @@
+import type { PositionAlign, PositionSide } from "./usePosition";
+type FloatingOptions = {
+    side: PositionSide;
+    align: PositionAlign;
+    /** Gap between the anchor and the layer (px). */
+    offset: number;
+    /** Minimum distance from the viewport edge (px); `--prime-space-2` by default. */
+    viewportPad?: number;
+    /** Flip to the opposite side (and edge) when the layer does not fit. */
+    flip: boolean;
+    matchAnchorWidth: boolean;
+    /** Closest the arrow centre may come to a layer corner; computes `arrow` when set. */
+    arrowInset?: number;
+    /**
+     * The box the layer must stay in (viewport px), intersected with the viewport: a scroll region
+     * whose sticky parts the layer must not cover. Flipping, the cross-axis clamp and the size limits
+     * use it instead of the viewport.
+     */
+    boundary?: Pick<DOMRectReadOnly, "top" | "left" | "right" | "bottom">;
+};
+type FloatingPosition = {
+    top: number;
+    left: number;
+    /** The side after flipping. */
+    side: PositionSide;
+    minWidth?: number;
+    /** Room across: the viewport minus gutters (top / bottom) or the room on the side (left / right). */
+    maxWidth: number;
+    /** Room along the side the layer opened on (px). */
+    maxHeight: number;
+    /** Arrow centre along the edge facing the anchor (px from the layer's start). */
+    arrow?: number;
+};
+/**
+ * The geometry of `usePosition`, without the DOM. Places a layer on `side` of the anchor: flips to
+ * the opposite side when it does not fit there and does on the other (or has more room), aligns it
+ * along the cross axis (flipping the edge when it overflows), keeps it inside the viewport and,
+ * with `arrowInset`, points an arrow at the anchor's centre without leaving the layer's straight
+ * edge.
+ */
+export declare function computeFloatingPosition(anchor: Pick<DOMRectReadOnly, "top" | "left" | "right" | "bottom" | "width" | "height">, contentW: number, contentH: number, vw: number, vh: number, opts: FloatingOptions): FloatingPosition;
+export {};

package/dist/hooks/useDraft.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * The draft text of an input bound to a value: it follows `source` (the value as text) while the
+ * input is not focused, and is the person's own text while they edit. The host commits the draft
+ * on blur / Enter and puts the committed value back with `setDraft` (an unreadable draft reverts
+ * to `source`).
+ */
+export declare function useDraft<E extends HTMLElement = HTMLInputElement>(source: string): {
+    inputRef: React.RefObject<E | null>;
+    draft: string;
+    setDraft: React.Dispatch<React.SetStateAction<string>>;
+};

package/dist/hooks/useEdgeOverflow.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 /** The axes a region scrolls along: only those are measured. */
-export type EdgeOverflowAxis = "vertical" | "horizontal" | "both";
+type EdgeOverflowAxis = "vertical" | "horizontal" | "both";
 /**
  * Edges of a scroll region that hide content: `start` / `end` along the inline axis (logical,
  * RTL-aware), `top` / `bottom` along the block axis.
  */
-export type EdgeOverflow = {
+type EdgeOverflow = {
     start: boolean;
     end: boolean;
     top: boolean;
@@ -19,7 +19,9 @@ export type EdgeOverflow = {
  * With `depth` it also writes how far the hidden content reaches on each side to the region itself
  * (`--edge-top` / `--edge-bottom` / `--edge-start` / `--edge-end`, px), so a fade is as deep as
  * that distance at most: it grows as the region scrolls away from an edge and melts as it comes
- * back. A distance is written capped at `--prime-space-8` (the deepest fade) and only when it
+ * back. A distance is written capped at `--scroll-fade-depth` (the deepest fade, read on the
+ * region) and only when it
  * changes, so away from the edges a scroll frame writes nothing and restyles nothing.
  */
 export declare function useEdgeOverflow(ref: React.RefObject<HTMLElement | null>, axis: EdgeOverflowAxis | null, depth?: boolean): EdgeOverflow;
+export {};

package/dist/hooks/useElementSize.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/** The border box of an element in px, rounded. */
+type ElementSize = {
+    width: number;
+    height: number;
+};
+type ObserveOptions = {
+    /** Observe nothing while `false` (the element is not needed yet). Default `true`. */
+    enabled?: boolean;
+};
+type ResizeOptions = ObserveOptions & {
+    /**
+     * Also observe the element's children, including ones added later: a row whose own box keeps
+     * its size while an item in it grows (a label, a count, fonts loading).
+     */
+    children?: boolean;
+};
+/**
+ * The size of the element `ref` holds, as state: measured before paint and again whenever it
+ * changes (ResizeObserver), `null` while there is no element. A host that only re-lays out its own
+ * DOM (an indicator, a fit check) takes `useResizeEffect` instead and never re-renders.
+ */
+export declare function useElementSize<E extends Element>(ref: React.RefObject<E | null>, { enabled }?: ObserveOptions): ElementSize | null;
+/**
+ * Calls `onResize` whenever the element `ref` holds changes size (and, with `children`, any of its
+ * children, also ones added later). The callback runs outside React: a host writes its DOM there
+ * (places an indicator, re-fits a row) and re-renders only if it decides to. The first layout is
+ * the host's own; this follows the changes after it.
+ */
+export declare function useResizeEffect<E extends Element>(ref: React.RefObject<E | null>, onResize: () => void, { enabled, children }?: ResizeOptions): void;
+export {};

package/dist/hooks/useEnterConfirm.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type UseEnterConfirmOptions = {
+type UseEnterConfirmOptions = {
     enabled: boolean;
     containerRef: React.RefObject<HTMLElement | null>;
     /** Replaces the default (a `click()` on `confirmRef`). */
@@ -13,3 +13,4 @@ export type UseEnterConfirmOptions = {
  * the header (close button) is left alone.
  */
 export declare function useEnterConfirm({ enabled, containerRef, onEnterConfirm, confirmRef, }: UseEnterConfirmOptions): void;
+export {};

package/dist/hooks/useImageStatus.d.ts

@@ -4,16 +4,23 @@ export type ImageStatus = "idle" | "loading" | "loaded" | "error";
 type MediaHandlers<E extends Element> = {
     onLoad?: React.ReactEventHandler<E>;
     onError?: React.ReactEventHandler<E>;
+    /**
+     * An `<img>` counts as loaded only once it is decoded (`HTMLImageElement.decode()`), so it never
+     * paints half-ready or blank for a frame; a picture already in the cache counts at once (spread
+     * `ref` on the image). `onLoad` follows a load event once decoded. Default `false`.
+     */
+    decode?: boolean;
 };
 /**
- * Media side of an image-with-fallback component (Avatar, Thumbnail): tracks the `<img>` (or a
- * `<video>`'s first frame) and reports it to the root through `report`, so the root's Fallback
- * shows while loading and after an error. Key the element by `src`: a new source remounts it and
- * starts again at `loading`. Unmounting the media reports `idle`.
+ * Media side of an image-with-fallback component (Avatar, Thumbnail, a MediaViewer page): tracks
+ * the `<img>` (or a `<video>`'s first frame) and reports it to the root through `report`, so the
+ * root's Fallback shows while loading and after an error. Key the element by `src`: a new source
+ * remounts it and starts again at `loading`. Unmounting the media reports `idle`.
  */
-export declare function useImageStatus<E extends Element = HTMLImageElement>(report: (status: ImageStatus) => void, { onLoad, onError }?: MediaHandlers<E>): {
+export declare function useImageStatus<E extends Element = HTMLImageElement>(report: (status: ImageStatus) => void, { onLoad, onError, decode }?: MediaHandlers<E>): {
     status: "loading" | "error" | "loaded";
     onLoad: (event: React.SyntheticEvent<E>) => void;
     onError: (event: React.SyntheticEvent<E>) => void;
+    ref: (element: E | null) => void;
 };
 export {};