prime-ui-kit 0.12.0 → 0.13.1

package/dist/chunks/{chunk-VOZ7J72X.js → chunk-PK2GC77E.js}

@@ -1095,6 +1095,8 @@ var iconRegistry = {
   "format.link": Link2,
   "format.list": List,
   "format.quote": TextQuote,
+  /** Hidden text (a spoiler) in text formatting; `field.password.hide` masks a password. */
+  "format.spoiler": EyeOff,
   "format.strikethrough": Strikethrough,
   "format.underline": Underline,
   "object.activity": Activity,
@@ -1364,36 +1366,43 @@ function usePosition(enabled, anchorRef, layerRef, {
         };
       }
       const { offset, pad, arrow } = metricsRef.current;
-      const rect = anchor.getBoundingClientRect();
-      const pos = computeFloatingPosition(
-        resolveAnchorRect ? resolveAnchorRect(anchor, rect) : rect,
-        layer.offsetWidth,
-        layer.offsetHeight,
-        window.innerWidth,
-        window.innerHeight,
-        {
-          side: preferredSide,
-          align,
-          offset,
-          viewportPad: pad,
-          flip: true,
-          matchAnchorWidth,
-          arrowInset: arrow,
-          boundary: resolveBoundary?.(anchor) ?? void 0
-        }
-      );
-      setResolvedSide(pos.side);
+      const rawRect = anchor.getBoundingClientRect();
+      const rect = resolveAnchorRect ? resolveAnchorRect(anchor, rawRect) : rawRect;
+      const boundary = resolveBoundary?.(anchor) ?? void 0;
+      const compute = (width2, height2) => computeFloatingPosition(rect, width2, height2, window.innerWidth, window.innerHeight, {
+        side: preferredSide,
+        align,
+        offset,
+        viewportPad: pad,
+        flip: true,
+        matchAnchorWidth,
+        arrowInset: arrow,
+        boundary
+      });
       const set = (name, value) => {
         if (layer.style.getPropertyValue(name) !== value) layer.style.setProperty(name, value);
       };
       const px = (n) => n === void 0 ? "" : `${n}px`;
       set("position", "fixed");
+      let width = layer.offsetWidth;
+      let height = layer.offsetHeight;
+      let pos = compute(width, height);
+      for (let pass = 0; pass < 3; pass++) {
+        set(FLOAT_MIN_WIDTH_VAR, px(pos.minWidth));
+        set(FLOAT_MAX_WIDTH_VAR, px(pos.maxWidth));
+        set(FLOAT_MAX_HEIGHT_VAR, px(pos.maxHeight));
+        const nextWidth = layer.offsetWidth;
+        const nextHeight = layer.offsetHeight;
+        if (nextWidth === width && nextHeight === height) break;
+        width = nextWidth;
+        height = nextHeight;
+        pos = compute(width, height);
+      }
+      setResolvedSide(pos.side);
       set("top", px(pos.top));
       set("left", px(pos.left));
-      set(FLOAT_MIN_WIDTH_VAR, px(pos.minWidth));
-      set(FLOAT_MAX_WIDTH_VAR, px(pos.maxWidth));
-      set(FLOAT_MAX_HEIGHT_VAR, px(pos.maxHeight));
       set(FLOAT_ARROW_VAR, px(pos.arrow));
+      delete layer.dataset.floatPending;
     },
     [
       anchorRef,
@@ -1409,9 +1418,12 @@ function usePosition(enabled, anchorRef, layerRef, {
   );
   const updateRef = React12.useRef(update);
   updateRef.current = update;
+  const enabledRef = React12.useRef(enabled);
+  enabledRef.current = enabled;
   const attachLayer = React12.useCallback(
     (node) => {
       layerRef.current = node;
+      if (node && enabledRef.current) node.dataset.floatPending = "";
       setAttached(node !== null);
     },
     [layerRef]
@@ -1440,7 +1452,10 @@ function usePosition(enabled, anchorRef, layerRef, {
       target.addEventListener("scroll", follow, { passive: true });
     }
     window.visualViewport?.addEventListener("resize", resize);
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(follow);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      cancelAnimationFrame(frame2);
+      updateRef.current(false);
+    });
     if (layerRef.current) observer?.observe(layerRef.current);
     if (anchorRef.current) observer?.observe(anchorRef.current);
     return () => {
@@ -5939,6 +5954,7 @@ var Select_default = {
   search: "Select_search",
   group: "Select_group",
   separator: "Select_separator",
+  actions: "Select_actions",
   item: "Select_item",
   itemText: "Select_itemText",
   itemTitle: "Select_itemTitle",
@@ -6174,6 +6190,59 @@ function SelectItem({
   );
 }
 SelectItem.displayName = "Select.Item";
+var ACTION_PREFIX = "__prime_select_action";
+var isActionValue = (value) => value.startsWith(ACTION_PREFIX);
+function SelectAction({
+  onSelect,
+  disabled = false,
+  className,
+  children,
+  onClick: onClick2,
+  onMouseMove,
+  ref,
+  ...rest
+}) {
+  const { highlight, listboxId, setOpen, size } = useSelectContext();
+  const value = `${ACTION_PREFIX}${React50.useId()}`;
+  const isHighlighted = useStoreSlice(highlight, (current) => current === value);
+  const parts = splitItemChildren(children);
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox / search (aria-activedescendant)
+    // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard is handled on the listbox
+    /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        ...rest,
+        ref,
+        id: optionDomId(listboxId, value),
+        role: "option",
+        "aria-disabled": disabled || void 0,
+        className: cx(menu_default.item, className),
+        onClick: (event) => {
+          onClick2?.(event);
+          if (event.defaultPrevented || disabled) return;
+          onSelect();
+          setOpen(false);
+        },
+        onMouseMove: (event) => {
+          onMouseMove?.(event);
+          if (!disabled && !isHighlighted) highlight.set(value);
+        },
+        ...toDataAttributes({
+          value,
+          action: true,
+          highlighted: isHighlighted,
+          disabled
+        }),
+        children: [
+          sizeMedia(parts.leading, size),
+          /* @__PURE__ */ jsx38("span", { className: Select_default.itemText, children: parts.body })
+        ]
+      }
+    )
+  );
+}
+SelectAction.displayName = "Select.Action";
 
 // src/components/select/Select.tsx
 import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -6184,7 +6253,8 @@ var SELECT_LABELS = {
   loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
   retry: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C",
   clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
-  optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E"
+  optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
+  changeFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u0432\u044B\u0431\u043E\u0440"
 };
 function SelectRoot(props) {
   const {
@@ -6227,11 +6297,30 @@ function SelectRoot(props) {
   const disabled = useInheritedDisabled(disabledProp);
   const labels = React51.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
   const ids = useFieldFrame(id, { hint, error, invalid });
-  const [value, setValue] = useControllableState({
+  const [stored, setStored] = useControllableState({
     value: props.value,
-    defaultValue: props.defaultValue ?? (multiple ? [] : void 0),
-    onChange: props.onValueChange
+    defaultValue: props.defaultValue ?? (multiple ? [] : void 0)
   });
+  const changes = usePendingChanges(stored, takeNext);
+  const value = changes.shown;
+  const saving = changes.pending.length > 0;
+  const [announcement, setAnnouncement] = React51.useState("");
+  const onValueChange = props.onValueChange;
+  const commit = (next) => {
+    if (saving || Object.is(next, value)) return;
+    const outcome = onValueChange?.(next);
+    if (!isPromiseLike(outcome)) {
+      setStored(next);
+      return;
+    }
+    setAnnouncement("");
+    changes.track(next, outcome, {
+      onResolve: () => setStored(next),
+      onReject: () => setAnnouncement(labels.changeFailed)
+    });
+  };
+  const commitRef = React51.useRef(commit);
+  commitRef.current = commit;
   const selected = React51.useMemo(
     () => Array.isArray(value) ? value : value ? [value] : [],
     [value]
@@ -6257,18 +6346,18 @@ function SelectRoot(props) {
   const pick = React51.useCallback(
     (optionValue) => {
       if (multiple) {
-        setValue((prev) => {
-          const list = Array.isArray(prev) ? prev : [];
-          return list.includes(optionValue) ? list.filter((item) => item !== optionValue) : [...list, optionValue];
-        });
+        const list = Array.isArray(value) ? value : [];
+        commitRef.current(
+          list.includes(optionValue) ? list.filter((item) => item !== optionValue) : [...list, optionValue]
+        );
         return;
       }
-      setValue(optionValue);
+      commitRef.current(optionValue);
       setOpen(false);
     },
-    [multiple, setValue, setOpen]
+    [multiple, value, setOpen]
   );
-  const clear = React51.useCallback(() => setValue(multiple ? [] : ""), [multiple, setValue]);
+  const clear = React51.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
   const context = React51.useMemo(
     () => ({
       size,
@@ -6284,6 +6373,7 @@ function SelectRoot(props) {
       clear,
       clearable,
       loading,
+      saving,
       loadingMore,
       hasMore,
       onLoadMore,
@@ -6317,6 +6407,7 @@ function SelectRoot(props) {
       clear,
       clearable,
       loading,
+      saving,
       loadingMore,
       hasMore,
       onLoadMore,
@@ -6347,12 +6438,14 @@ function SelectRoot(props) {
       className,
       children: [
         /* @__PURE__ */ jsx39(SelectProvider, { value: context, children: /* @__PURE__ */ jsx39(ControlSizeProvider, { value: size, children }) }),
-        name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx39("input", { type: "hidden", name, value: item, disabled }, item)) : null
+        name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx39("input", { type: "hidden", name, value: item, disabled }, item)) : null,
+        /* @__PURE__ */ jsx39(VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement })
       ]
     }
   );
 }
 SelectRoot.displayName = "Select.Root";
+var takeNext = (_current, next) => next;
 function SelectTrigger({
   className,
   children,
@@ -6375,13 +6468,15 @@ function SelectTrigger({
     describedBy,
     triggerRef,
     loading,
+    saving,
     clearable,
     selected,
     clear,
     labels
   } = useSelectContext();
   const mergedRef = useMergedRefs(triggerRef, ref);
-  const showClear = clearable && selected.length > 0 && !disabled && !loading;
+  const busy = loading || saving;
+  const showClear = clearable && selected.length > 0 && !disabled && !busy;
   return /* @__PURE__ */ jsxs26(
     "button",
     {
@@ -6396,7 +6491,7 @@ function SelectTrigger({
       "aria-invalid": invalid || void 0,
       "aria-required": required || void 0,
       "aria-describedby": [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0,
-      "aria-busy": loading || void 0,
+      "aria-busy": busy || void 0,
       disabled,
       className: cx(fieldTriggerClass, Select_default.trigger, className),
       onClick: (event) => {
@@ -6418,7 +6513,7 @@ function SelectTrigger({
         state: isOpen ? "open" : "closed",
         size,
         invalid: invalid || void 0,
-        loading: loading || void 0,
+        loading: busy || void 0,
         disabled: disabled || void 0,
         "focus-ring": focusRing ? void 0 : false
       }),
@@ -6443,7 +6538,7 @@ function SelectTrigger({
             }
           )
         ) : null,
-        /* @__PURE__ */ jsx39("span", { className: Select_default.chevron, "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx39(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx39(Icon, { name: "nav.chevronDown" }) })
+        /* @__PURE__ */ jsx39("span", { className: Select_default.chevron, "aria-hidden": "true", children: busy ? /* @__PURE__ */ jsx39(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx39(Icon, { name: "nav.chevronDown" }) })
       ]
     }
   );
@@ -6516,6 +6611,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     query,
     setQuery,
     loading,
+    saving,
     loadingMore,
     hasMore,
     onLoadMore,
@@ -6526,6 +6622,12 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     registry
   } = useSelectContext();
   const listboxRef = React51.useRef(null);
+  const items = [];
+  const actions = [];
+  for (const child of React51.Children.toArray(children)) {
+    (React51.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
+  }
+  const actionsId = `${listboxId}-actions`;
   const floating = useFloatingLayer({
     open: isOpen,
     onOpenChange: setOpen,
@@ -6567,20 +6669,27 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     }
     const inSearch = event.target instanceof HTMLInputElement;
     if (inSearch && [" ", "Home", "End"].includes(event.key)) return;
-    const items = enabledOptions(listboxRef.current);
+    const stops = enabledOptions(panelRef.current);
     const printable = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
     if (printable && !inSearch && (event.key !== " " || typeahead.isTyping())) {
       event.preventDefault();
-      const match = typeahead.find(event.key, items, highlight.get());
+      const match = typeahead.find(event.key, stops, highlight.get());
       if (match) {
         highlight.set(match.dataset.value);
         match.scrollIntoView?.({ block: "nearest" });
       }
       return;
     }
-    handleListboxKeyDown(event, { items, highlight, onSelect: pick });
+    handleListboxKeyDown(event, {
+      items: stops,
+      highlight,
+      onSelect: (value) => {
+        if (isActionValue(value)) document.getElementById(optionDomId(listboxId, value))?.click();
+        else pick(value);
+      }
+    });
   };
-  if (!floating.mounted) return /* @__PURE__ */ jsx39("div", { hidden: true, children });
+  if (!floating.mounted) return /* @__PURE__ */ jsx39("div", { hidden: true, children: items });
   const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
   return /* @__PURE__ */ jsxs26(
     FloatingPanel,
@@ -6624,13 +6733,14 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
             "aria-multiselectable": multiple || void 0,
             "aria-labelledby": triggerId,
             "aria-activedescendant": searchable ? void 0 : activeDescendant,
-            "aria-busy": loading || loadingMore || void 0,
+            "aria-busy": loading || loadingMore || saving || void 0,
+            "aria-owns": actions.length > 0 && region !== "error" ? actionsId : void 0,
             tabIndex: -1,
             hidden: region === "error" ? true : void 0,
             "data-autofocus": searchable || region === "error" ? void 0 : "",
             className: cx(Select_default.listbox, swapClass),
             children: [
-              children,
+              items,
               region === "loading" ? /* @__PURE__ */ jsx39(SkeletonRows, { count: LOADING_ROWS2 }) : null,
               region === "ready" && hasMore ? /* @__PURE__ */ jsx39("div", { ref: sentinelRef, "aria-hidden": "true", className: menu_default.loadSentinel }) : null,
               region === "ready" && loadingMore ? /* @__PURE__ */ jsx39(SkeletonRows, { count: LOADING_MORE_ROWS }) : null
@@ -6642,6 +6752,12 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
           /* @__PURE__ */ jsx39(EmptyPage.Title, { as: "p", children: labels.empty }),
           query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx39(EmptyPage.Description, { children: labels.emptyHint }) : null
         ] }) : null,
+        actions.length > 0 && region !== "error" ? (
+          // Owned by the listbox (`aria-owns`): its options for assistive tech, pinned under the
+          // scroller and the empty state for the eye.
+          // biome-ignore lint/a11y/useSemanticElements: a group of options inside a listbox, not a form fieldset
+          /* @__PURE__ */ jsx39("div", { id: actionsId, role: "group", className: Select_default.actions, children: actions })
+        ) : null,
         region === "error" ? /* @__PURE__ */ jsxs26(EmptyPage.Root, { layout: "compact", size, role: "alert", className: swapClass, children: [
           /* @__PURE__ */ jsx39(EmptyPage.Title, { as: "p", children: loadError }),
           onRetry ? /* @__PURE__ */ jsx39(EmptyPage.Actions, { children: /* @__PURE__ */ jsxs26(Button.Root, { variant: "soft", tone: "neutral", onClick: onRetry, children: [
@@ -6650,7 +6766,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
           ] }) }) : null
         ] }) : null,
         /* @__PURE__ */ jsx39(VisuallyHidden, { "aria-live": "polite", children: loading || loadingMore ? labels.loading : "" }),
-        /* @__PURE__ */ jsx39(HighlightOnOpen, { listboxRef, highlight })
+        /* @__PURE__ */ jsx39(HighlightOnOpen, { listboxRef, panelRef, highlight })
       ]
     }
   );
@@ -6658,6 +6774,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
 SelectContent.displayName = "Select.Content";
 function HighlightOnOpen({
   listboxRef,
+  panelRef,
   highlight
 }) {
   const { isOpen, query, selected, registry } = useSelectContext();
@@ -6673,15 +6790,15 @@ function HighlightOnOpen({
     return () => highlight.set(void 0);
   }, [isOpen, listboxRef, highlight]);
   React51.useLayoutEffect(() => {
-    if (query !== "") highlight.set(enabledOptions(listboxRef.current)[0]?.dataset.value);
-  }, [query, listboxRef, highlight]);
+    if (query !== "") highlight.set(enabledOptions(panelRef.current)[0]?.dataset.value);
+  }, [query, panelRef, highlight]);
   React51.useLayoutEffect(() => {
     if (query === "") return;
     const options = enabledOptions(listboxRef.current);
     if (!options.some((item) => item.dataset.value === highlight.get())) {
-      highlight.set(options[0]?.dataset.value);
+      highlight.set((options[0] ?? enabledOptions(panelRef.current)[0])?.dataset.value);
     }
-  }, [version, query, listboxRef, highlight]);
+  }, [version, query, listboxRef, panelRef, highlight]);
   return null;
 }
 function SelectGroup({ className, ...rest }) {
@@ -6704,7 +6821,8 @@ var Select = {
   ItemDescription: SelectItemDescription,
   ItemMeta: SelectItemMeta,
   Group: SelectGroup,
-  Separator: SelectSeparator
+  Separator: SelectSeparator,
+  Action: SelectAction
 };
 
 export {

package/dist/chunks/{chunk-OTOIOHVE.js → chunk-XNOJEX55.js}

@@ -17,7 +17,7 @@ import {
   useControllableState,
   useFieldFrame,
   useInheritedDisabled
-} from "./chunk-VOZ7J72X.js";
+} from "./chunk-PK2GC77E.js";
 import {
   cx
 } from "./chunk-Q3BFRQHZ.js";
@@ -121,10 +121,19 @@ var FORMAT_LABELS = { hsl: "HSL", rgb: "RGB", hex: "Hex" };
 var isFormat = (value) => value in FORMAT_LABELS;
 function FormatSelect({ className, ...rest }) {
   const { format, setFormat, labels } = useColorPickerContext();
-  return /* @__PURE__ */ jsx("div", { ...rest, className: cx(ColorPicker_default.formatSelectWrap, className), children: /* @__PURE__ */ jsxs(Select.Root, { value: format, onValueChange: (value) => isFormat(value) && setFormat(value), children: [
-    /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": labels.format, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
-    /* @__PURE__ */ jsx(Select.Content, { children: Object.entries(FORMAT_LABELS).map(([value, label]) => /* @__PURE__ */ jsx(Select.Item, { label, value, children: label }, value)) })
-  ] }) });
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx(ColorPicker_default.formatSelectWrap, className), children: /* @__PURE__ */ jsxs(
+    Select.Root,
+    {
+      value: format,
+      onValueChange: (value) => {
+        if (isFormat(value)) setFormat(value);
+      },
+      children: [
+        /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": labels.format, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+        /* @__PURE__ */ jsx(Select.Content, { children: Object.entries(FORMAT_LABELS).map(([value, label]) => /* @__PURE__ */ jsx(Select.Item, { label, value, children: label }, value)) })
+      ]
+    }
+  ) });
 }
 function displayChannelValue(color, channel, space) {
   const raw = color.toFormat(space).getChannelValue(channel);

package/dist/color-picker.js

@@ -4,8 +4,8 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-OTOIOHVE.js";
-import "./chunks/chunk-VOZ7J72X.js";
+} from "./chunks/chunk-XNOJEX55.js";
+import "./chunks/chunk-PK2GC77E.js";
 import "./chunks/chunk-Q3BFRQHZ.js";
 export {
   ColorField,

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

@@ -50,10 +50,12 @@ 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.
+ * The top of the chat: who it is with. A row of the leading elements (a back button, an `Avatar`),
+ * the title over the description, and the actions at the end. Children are sorted by type:
+ * `Chat.Title`, `Chat.Description` and `Chat.Actions` take their places, everything else leads
+ * the row side by side, in the order written.
  */
-declare function ChatHeader({ className, ...rest }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function ChatHeader({ className, children, ...rest }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChatHeader {
     var displayName: string;
 }
@@ -123,6 +125,11 @@ export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "group" | "s
      * incoming messages keep the avatar's gutter. Default `direct`.
      */
     type?: "direct" | "group";
+    /**
+     * The first load of the conversation: bubble-shaped placeholders stand in the list's place
+     * (`aria-busy`, `labels.loading` announced), then cross-fade into the messages.
+     */
+    loading?: boolean;
     /** 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. */
@@ -152,15 +159,7 @@ export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "group" | "s
     /** 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 function ChatMessages<T>({ type, loading, 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;
 }

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

@@ -20,6 +20,8 @@ export type ChatLabels = MessageListLabels & {
     messages: string;
     /** The band above the first unread message of `items` (`Chat.Messages unread`). */
     unread: string;
+    /** Announced while the conversation loads for the first time (`Chat.Messages loading`). */
+    loading: string;
 };
 /** What the parts of a chat share; `Chat.Root` owns it. */
 export type ChatContextValue = {