prime-ui-kit 0.15.0 → 0.16.0

package/dist/skill/reference/components/chat/examples/screen.tsx

@@ -5,9 +5,9 @@ import {
   Card,
   Chat,
   ChatList,
+  type ChatMessageEntry,
   Composer,
   type ComposerActivity,
-  type ComposerMediaItem,
   type ComposerMessage,
   type ComposerRecording,
   Dropdown,
@@ -232,12 +232,8 @@ const excerpt = (message: ChatMessage) => {
   }
 };
 
-/** An album holds up to ten photos and videos: more go as the next album. */
-const ALBUM_MAX = 10;
-const albumsOf = (media: readonly ComposerMediaItem[]) =>
-  Array.from({ length: Math.ceil(media.length / ALBUM_MAX) }, (_, index) =>
-    media.slice(index * ALBUM_MAX, (index + 1) * ALBUM_MAX),
-  );
+/** A dialog's history as the server returns it: its own message objects for every load. */
+const historyOf = () => HISTORY.map((message) => ({ ...message }));
 
 /** The local object URLs a message plays from (photos, videos and recordings sent here). */
 const localSourcesOf = (message: Content): string[] =>
@@ -282,7 +278,7 @@ type ChatComposerProps = {
 };
 
 /** The Composer with its upload queue: an upload tick re-renders the composer, not the thread. */
-const ChatComposer = React.memo(function ChatComposer({
+function ChatComposer({
   replyTo,
   replyAuthor,
   editing,
@@ -304,15 +300,15 @@ const ChatComposer = React.memo(function ChatComposer({
   if (!editing && editedId !== null) setEditedId(null);
 
   // Optimistic: every message is in the list at once with `sending`, so the send returns at once
-  // and the field is free for the next one. The bar's `value` says what it answers or edits.
-  // Photos and videos go as albums with the text as their caption, other files as file messages.
-  // The tray's previews are revoked after the send, so an album plays from its own URLs.
-  const send = ({ text, media, files, replyTo: reply, editOf }: ComposerMessage) => {
+  // and the field is free for the next one. The bar's `messageId` says what it answers or edits.
+  // Photos and videos go as albums, the text as the first one's caption, other files as file
+  // messages. The tray's previews are revoked after the send, so an album plays from its own URLs.
+  const send = ({ text, albums, files, replyTo: reply, editOf }: ComposerMessage) => {
     if (editOf) {
       onSave(editOf, text);
       return;
     }
-    albumsOf(media).forEach((album, index) => {
+    albums.forEach((album, index) => {
       onPost(
         {
           kind: "media",
@@ -329,7 +325,7 @@ const ChatComposer = React.memo(function ChatComposer({
     for (const item of files) {
       onPost({ kind: "file", name: item.file.name, size: item.file.size, href: "#" }, reply);
     }
-    if (text && media.length === 0) onPost({ kind: "text", text }, reply);
+    if (text && albums.length === 0) onPost({ kind: "text", text }, reply);
   };
 
   const sendVoice = ({ blob, durationMs, waveform }: ComposerRecording) =>
@@ -355,7 +351,7 @@ const ChatComposer = React.memo(function ChatComposer({
     >
       <Composer.Attach />
       {replyTo ? (
-        <Composer.Context value={replyTo.id} onDismiss={onReplyDismiss}>
+        <Composer.Context messageId={replyTo.id} onDismiss={onReplyDismiss}>
           <Composer.Title>Ответ {replyTo.from === "me" ? "себе" : replyAuthor}</Composer.Title>
           <Composer.Description>{excerpt(replyTo)}</Composer.Description>
         </Composer.Context>
@@ -363,7 +359,7 @@ const ChatComposer = React.memo(function ChatComposer({
       {editing ? (
         <Composer.Context
           mode="edit"
-          value={editing.id}
+          messageId={editing.id}
           onDismiss={() => {
             onEditDismiss();
             setDraft("");
@@ -375,11 +371,11 @@ const ChatComposer = React.memo(function ChatComposer({
       ) : null}
     </Composer.Root>
   );
-});
+}
 
 export default function ChatScreenExample() {
   const [dialogId, setDialogId] = React.useState<string | null>("vector");
-  const [messages, setMessages] = React.useState<ChatMessage[]>(HISTORY);
+  const [messages, setMessages] = React.useState<ChatMessage[]>(historyOf);
   const [hasOlder, setHasOlder] = React.useState(true);
   const [replyTo, setReplyTo] = React.useState<ChatMessage | null>(null);
   const [editing, setEditing] = React.useState<ChatMessage | null>(null);
@@ -430,7 +426,11 @@ export default function ChatScreenExample() {
   const [loadedId, setLoadedId] = React.useState<string | null>(null);
   React.useEffect(() => {
     if (!dialogId) return;
-    const timer = window.setTimeout(() => setLoadedId(dialogId), DIALOG_MS);
+    const timer = window.setTimeout(() => {
+      setMessages(historyOf());
+      setHasOlder(true);
+      setLoadedId(dialogId);
+    }, DIALOG_MS);
     return () => window.clearTimeout(timer);
   }, [dialogId]);
 
@@ -444,19 +444,16 @@ export default function ChatScreenExample() {
     setHasOlder(false);
   };
 
-  // Every update touches one message: the rest keep their objects, so their rows stay memoized.
-  const patch = React.useCallback(
-    (id: string, next: (message: ChatMessage) => Partial<ChatMessage>) =>
-      setMessages((current) =>
-        current.map((message) =>
-          message.id === id ? ({ ...message, ...next(message) } as ChatMessage) : message,
-        ),
+  // Every update touches one message: the rest keep their objects, so their rows stay as they are.
+  const patch = (id: string, next: (message: ChatMessage) => Partial<ChatMessage>) =>
+    setMessages((current) =>
+      current.map((message) =>
+        message.id === id ? ({ ...message, ...next(message) } as ChatMessage) : message,
       ),
-    [],
-  );
+    );
 
   /** The client reads, waits while you are still typing, types for a moment and answers. */
-  const clientAnswers = React.useCallback(async () => {
+  const clientAnswers = async () => {
     await wait(MESSAGE_SEND_MS + MESSAGE_READ_MS);
     while (myActivity.current !== null) await wait(500);
     setClientTyping(true);
@@ -468,132 +465,112 @@ export default function ChatScreenExample() {
       ...current,
       { id: `client-${Date.now()}`, from: "client", sentAt: new Date(), kind: "text", text },
     ]);
-  }, []);
+  };
 
   /**
    * Adds an outgoing message at once (it rises from the composer into the list), sends it, then
    * marks it read when the client opens it. The id stays: the row is never re-keyed.
    */
-  const post = React.useCallback(
-    (content: Content, replyToId?: string) => {
-      for (const url of localSourcesOf(content)) localUrls.current.add(url);
-      const id = `own-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-      const message = {
-        ...content,
-        id,
-        from: "me",
-        sentAt: new Date(),
-        status: "sending",
-        replyTo: replyToId,
-      } as ChatMessage;
-      setMessages((current) => [...current, message]);
-      window.setTimeout(() => patch(id, () => ({ status: "sent" })), MESSAGE_SEND_MS);
-      window.setTimeout(
-        () => patch(id, () => ({ status: "read" })),
-        MESSAGE_SEND_MS + MESSAGE_READ_MS,
-      );
-      void clientAnswers();
-    },
-    [patch, clientAnswers],
-  );
+  const post = (content: Content, replyToId?: string) => {
+    for (const url of localSourcesOf(content)) localUrls.current.add(url);
+    const id = `own-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const message = {
+      ...content,
+      id,
+      from: "me",
+      sentAt: new Date(),
+      status: "sending",
+      replyTo: replyToId,
+    } as ChatMessage;
+    setMessages((current) => [...current, message]);
+    window.setTimeout(() => patch(id, () => ({ status: "sent" })), MESSAGE_SEND_MS);
+    window.setTimeout(
+      () => patch(id, () => ({ status: "read" })),
+      MESSAGE_SEND_MS + MESSAGE_READ_MS,
+    );
+    void clientAnswers();
+  };
 
-  const save = React.useCallback(
-    (id: string, text: string) => patch(id, () => ({ text, edited: true })),
-    [patch],
-  );
+  const save = (id: string, text: string) => patch(id, () => ({ text, edited: true }));
 
-  const editLast = React.useCallback(() => {
+  const editLast = () => {
     const last = [...messages].reverse().find((item) => item.from === "me" && item.kind === "text");
     if (!last) return;
     setReplyTo(null);
     setEditing(last);
-  }, [messages]);
+  };
 
-  const startEdit = React.useCallback((message: ChatMessage) => {
+  const startEdit = (message: ChatMessage) => {
     setReplyTo(null);
     setEditing(message);
-  }, []);
+  };
 
-  const startReply = React.useCallback((message: ChatMessage) => {
+  const startReply = (message: ChatMessage) => {
     setEditing(null);
     setReplyTo(message);
-  }, []);
+  };
 
-  const reportActivity = React.useCallback((activity: ComposerActivity | null) => {
+  const reportActivity = (activity: ComposerActivity | null) => {
     // A real chat sends it over its socket; here the simulated client reads it.
     myActivity.current = activity;
-  }, []);
-
-  const remove = React.useCallback(
-    (id: string) => setMessages((current) => current.filter((item) => item.id !== id)),
-    [],
-  );
+  };
 
-  const dismissReply = React.useCallback(() => setReplyTo(null), []);
-  const dismissEdit = React.useCallback(() => setEditing(null), []);
+  const remove = (id: string) => setMessages((current) => current.filter((item) => item.id !== id));
 
-  // The newest messages for what a row looks up (a reply's original), without making every row
-  // render again when one message changes.
-  const messagesRef = React.useRef(messages);
-  messagesRef.current = messages;
   const contact = dialog.contact;
 
-  // A message renders again only when its data, its place or this function change: a status or an
-  // upload tick re-renders the one message it touches.
-  const renderMessage = React.useCallback(
-    (message: ChatMessage) => {
-      const own = message.from === "me";
-      const original = message.replyTo
-        ? messagesRef.current.find((item) => item.id === message.replyTo)
-        : undefined;
-      return (
-        <Message.Root
-          direction={own ? "outgoing" : "incoming"}
-          time={message.sentAt}
-          status={message.status}
-          edited={message.edited}
-        >
-          {original ? (
-            <Message.Reply author={original.from === "me" ? "Вы" : contact} target={original.id}>
-              {excerpt(original)}
-            </Message.Reply>
-          ) : null}
-          {renderContent(message)}
-          <Message.Menu>
-            <Dropdown.Item onSelect={() => startReply(message)}>
+  // A message renders again only when its data or its place change: a status or an upload tick
+  // re-renders the one message it touches. A dialog loads its own messages, so a row never
+  // outlives the contact it names; a reply's original comes from the list (`entry.find`).
+  const renderMessage = (message: ChatMessage, entry: ChatMessageEntry<ChatMessage>) => {
+    const own = message.from === "me";
+    const original = message.replyTo ? entry.find(message.replyTo) : undefined;
+    return (
+      <Message.Root
+        direction={own ? "outgoing" : "incoming"}
+        time={message.sentAt}
+        status={message.status}
+        edited={message.edited}
+      >
+        {original ? (
+          <Message.Reply author={original.from === "me" ? "Вы" : contact} target={original.id}>
+            {excerpt(original)}
+          </Message.Reply>
+        ) : null}
+        {renderContent(message)}
+        <Message.Menu>
+          <Dropdown.Item onSelect={() => startReply(message)}>
+            <Dropdown.ItemIcon>
+              <Icon name="action.reply" />
+            </Dropdown.ItemIcon>
+            Ответить
+          </Dropdown.Item>
+          {own && message.kind === "text" ? (
+            <Dropdown.Item onSelect={() => startEdit(message)}>
               <Dropdown.ItemIcon>
-                <Icon name="action.reply" />
+                <Icon name="action.edit" />
               </Dropdown.ItemIcon>
-              Ответить
+              Изменить
             </Dropdown.Item>
-            {own && message.kind === "text" ? (
-              <Dropdown.Item onSelect={() => startEdit(message)}>
-                <Dropdown.ItemIcon>
-                  <Icon name="action.edit" />
-                </Dropdown.ItemIcon>
-                Изменить
-              </Dropdown.Item>
-            ) : null}
-            <Dropdown.Item onSelect={() => navigator.clipboard?.writeText(excerpt(message))}>
+          ) : null}
+          <Dropdown.Item onSelect={() => navigator.clipboard?.writeText(excerpt(message))}>
+            <Dropdown.ItemIcon>
+              <Icon name="action.copy" />
+            </Dropdown.ItemIcon>
+            Скопировать
+          </Dropdown.Item>
+          {own ? (
+            <Dropdown.Item tone="danger" onSelect={() => remove(message.id)}>
               <Dropdown.ItemIcon>
-                <Icon name="action.copy" />
+                <Icon name="action.delete" />
               </Dropdown.ItemIcon>
-              Скопировать
+              Удалить
             </Dropdown.Item>
-            {own ? (
-              <Dropdown.Item tone="danger" onSelect={() => remove(message.id)}>
-                <Dropdown.ItemIcon>
-                  <Icon name="action.delete" />
-                </Dropdown.ItemIcon>
-                Удалить
-              </Dropdown.Item>
-            ) : null}
-          </Message.Menu>
-        </Message.Root>
-      );
-    },
-    [contact, startReply, startEdit, remove],
-  );
+          ) : null}
+        </Message.Menu>
+      </Message.Root>
+    );
+  };
 
   return (
     <>
@@ -616,7 +593,7 @@ export default function ChatScreenExample() {
               if (!next) setDialogId(null);
             }}
           >
-            <PageContent.List aria-label="Диалоги">
+            <PageContent.Panel kind="list">
               <Card.Root className={styles.paneCard}>
                 <ChatList.Root
                   items={foundDialogs}
@@ -650,9 +627,9 @@ export default function ChatScreenExample() {
                   }}
                 />
               </Card.Root>
-            </PageContent.List>
+            </PageContent.Panel>
 
-            <PageContent.Detail aria-label="Переписка">
+            <PageContent.Panel kind="detail">
               <Card.Root className={styles.paneCard}>
                 <Chat.Root typing={clientTyping}>
                   <Chat.Header>
@@ -699,8 +676,8 @@ export default function ChatScreenExample() {
                       replyTo={replyTo}
                       replyAuthor={dialog.contactTo}
                       editing={editing}
-                      onReplyDismiss={dismissReply}
-                      onEditDismiss={dismissEdit}
+                      onReplyDismiss={() => setReplyTo(null)}
+                      onEditDismiss={() => setEditing(null)}
                       onEditLast={editLast}
                       onPost={post}
                       onSave={save}
@@ -709,7 +686,7 @@ export default function ChatScreenExample() {
                   </Chat.Footer>
                 </Chat.Root>
               </Card.Root>
-            </PageContent.Detail>
+            </PageContent.Panel>
           </PageContent.Split>
         </PageContent.Body>
       </PageContent.Root>

package/dist/skill/reference/components/chat/examples/states.tsx

@@ -1,9 +1,7 @@
 /** The first load of a conversation: bubble-shaped placeholders on both sides stand in the list's place, then cross-fade into the messages — `loading`. */
-import { Button, Card, Chat, Message } from "prime-ui-kit";
+import { Button, Card, Chat, Message, Typography } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 const LOAD_MS = 1500;
 
 const MESSAGES = [
@@ -67,8 +65,8 @@ export default function ChatStatesExample() {
   }, [loading]);
 
   return (
-    <div className={styles.live}>
-      <div className={styles.liveBar}>
+    <div>
+      <div>
         <Button.Root
           variant="soft"
           tone="neutral"
@@ -77,24 +75,27 @@ export default function ChatStatesExample() {
         >
           Открыть заново
         </Button.Root>
+        <Card.Root>
+          <Chat.Root>
+            <Chat.Messages aria-label="Переписка с ООО «Вектор»" loading={loading}>
+              {MESSAGES.map((message) => (
+                <Message.Root
+                  key={message.id}
+                  value={message.id}
+                  direction={message.direction}
+                  time={message.time}
+                  status={message.direction === "outgoing" ? "read" : undefined}
+                >
+                  <Message.Text>{message.text}</Message.Text>
+                </Message.Root>
+              ))}
+            </Chat.Messages>
+          </Chat.Root>
+        </Card.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          loading
+        </Typography>
       </div>
-      <Card.Root className={styles.short}>
-        <Chat.Root>
-          <Chat.Messages aria-label="Переписка с ООО «Вектор»" loading={loading}>
-            {MESSAGES.map((message) => (
-              <Message.Root
-                key={message.id}
-                value={message.id}
-                direction={message.direction}
-                time={message.time}
-                status={message.direction === "outgoing" ? "read" : undefined}
-              >
-                <Message.Text>{message.text}</Message.Text>
-              </Message.Root>
-            ))}
-          </Chat.Messages>
-        </Chat.Root>
-      </Card.Root>
     </div>
   );
 }

package/dist/skill/reference/components/chat-list/COMPONENT.md

@@ -60,7 +60,7 @@ ChatList.Root                 <div> column filling its host (container `chat-lis
 | `hasMore` | `boolean` | `false` | More dialogs exist: a placeholder row ends the list and `onLoadMore` runs near the end. |
 | `onLoadMore` | `() => void \| Promise<void>` | — | The reader came near the end while `hasMore`: append the next dialogs. A promise is awaited before the next call. |
 | `empty` | `ReactNode` | — | The empty state without a search (an `EmptyPage` with an action). Default: «Нет диалогов». |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Row tier: height, text, avatar, glyphs and the search field. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Row tier: height, text, avatar, glyphs and the search field. Without it the tier of the host. |
 | `now` | `Date` | — | «Now» for the times of the rows. Default: the moment of the render. |
 | `formatTime` | `(date: Date, now: Date) => string` | `formatChatTime` | Display of a row's `Date` time: «14:32» today, «пн» this week, «12 мар», «12.03.2025». |
 | `labels` | `Partial<ChatListLabels>` | — | Built-in strings, see Labels. |
@@ -81,6 +81,8 @@ ChatList.Root                 <div> column filling its host (container `chat-lis
 | `draft` | `string` | — | The reader's unsent text: the preview shows «Черновик:» in danger and the text. |
 | `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | — | Runs before the dialog opens; `preventDefault()` keeps it closed. |
 | `href` | `string` | — | Renders an `<a>` instead of a `<button>` (a dialog with its own URL). |
+| `target` | `string` | — | Where the `<a>` opens (`href` only). |
+| `rel` | `string` | — | Relationship of the `<a>` (`href` only). |
 | `children` | `ReactNode` | — | `ChatList.ItemIcon`, `ChatList.ItemText`, `ChatList.ItemDescription`, `ChatList.ItemMenu`. |
 | `…rest` | `ButtonHTMLAttributes<HTMLButtonElement>` | — | `className` and the native attributes of the row element. |
 
@@ -163,13 +165,13 @@ The search field takes the tier too; counts are one tier down (the Badge's own r
 | loading | `loading` | six placeholder `List` rows (`inert`, `aria-hidden`), the scroller `aria-busy`; cross-fade into the list |
 | empty | `items` empty | `EmptyPage layout="compact"` («Нет диалогов» or `empty`); with a query «Ничего не найдено» |
 | more | `hasMore` | one placeholder row after the list; `onLoadMore` near the end (`aria-busy` while its promise runs) |
-| menu | right click, long press, Shift+F10 | the row's `ChatList.ItemMenu` in a `Dropdown` anchored at the point; `data-menu="true"` rows take no callout or text selection |
+| menu | right click, long press, Shift+F10 | the row's `ChatList.ItemMenu` in a `Dropdown` anchored to the row (`Dropdown.Anchor`) at the point pressed, or under the row from the keyboard (`anchorPoint`); focus returns to the row; the row stays rendered while the menu is open; `data-menu="true"` rows take no callout or text selection |
 | reorder | a new order of `items` | rows glide from their old places (`transform`, `--prime-motion-duration-base`); new rows rise in (`enterMotion`); rows removed with nothing else changed close up in place |
 
 Root attribute: `data-size`. Every motion honours reduced motion (durations collapse, glides and ghosts are skipped).
 
 ## Layout & spacing
-- The root is a flex column that fills its host's height: put it straight into a `Card.Root` or a `PageContent.List` pane with a height; the scroller takes the rest under the search field.
+- The root is a flex column that fills its host's height: put it straight into a `Card.Root` or a `PageContent.Panel kind="list"` pane with a height; the scroller takes the rest under the search field.
 - One inset all round, the panel's 4px: the search field and the rows stand 4px from every edge of the host, so in a card (radius 12) their 8px corners follow the card's (nested radius = outer − padding). Rows stand 4px apart (a margin inside each `<li>`, so the virtual window measures rows with their space); the last row's margin is the inset below it.
 - A row: avatar · name and preview · time over the counts. The name and the preview truncate; glyphs, the time and the counts never do.
 - From 100 dialogs only the rows around the view render; spacers hold the rest of the height. The row with the Tab stop and the row with an open menu stay rendered.
@@ -179,6 +181,8 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Enters the list at one stop — the open dialog (or where the focus was last); the next Tab leaves the list. |
@@ -189,6 +193,8 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 | `Escape` | In the search field clears the query; in the menu closes it and returns the focus to the row. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The list is a `<ul>` named «Диалоги» (`labels.list`); each row an `<li>` with a button, or a link with `href`.
 - The open dialog is `aria-current="true"` on a button, `"page"` on a link. Selection does not follow the focus: arrows only move it (a dialog may load a conversation); Enter, Space and a click open.
 - The row is named by its content: the name, glyphs with a `label` («Без звука», a verified mark), the preview, the delivery mark («Прочитано»), the time, then «упоминание» and «непрочитанных: 3» instead of the bare badges; the avatar is `aria-hidden`.
@@ -227,7 +233,6 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 | `file` | `"Файл"` | Media word: `kind="file"`. |
 | `location` | `"Геопозиция"` | Media word: `kind="location"`. |
 | `contact` | `"Контакт"` | Media word: `kind="contact"`. |
-| `menu` | `"Действия с диалогом"` | `aria-label` of the point the row menu opens from. |
 
 ## Examples
 | Example | Shows |
@@ -253,5 +258,5 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 - Deleting from the menu without a question → open a `ConfirmDialog` from the menu item.
 
 ## Related
-- **Built from:** [List](../list/COMPONENT.md) (rows, current fill, focus, touch height), [Input](../input/COMPONENT.md) (search), [ScrollContainer](../scroll-container/COMPONENT.md), [Crossfade](../crossfade/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Badge](../badge/COMPONENT.md) (counts), [Dropdown](../dropdown/COMPONENT.md) (row menu), [Dnd](../dnd/COMPONENT.md) (the glide of a new order)
+- **Built from:** [List](../list/COMPONENT.md) (rows, current fill, focus, touch height), [Input](../input/COMPONENT.md) (search), [ScrollContainer](../scroll-container/COMPONENT.md), [Crossfade](../crossfade/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Badge](../badge/COMPONENT.md) (counts), [Dropdown](../dropdown/COMPONENT.md) (row menu), [VisuallyHidden](../visually-hidden/COMPONENT.md), `useFlipList` (the glide of a new order)
 - **See also:** [Chat](../chat/COMPONENT.md), [Message](../message/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [PageContent](../page-content/COMPONENT.md), [ConfirmDialog](../confirm-dialog/COMPONENT.md)

package/dist/skill/reference/components/chat-list/examples/examples.module.css

@@ -14,14 +14,6 @@
   block-size: calc(var(--prime-space-24) * 3);
 }
 
-/* sizes: a caption above each tier's list. */
-.tier {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  inline-size: min(100%, calc(var(--prime-space-24) * 4));
-}
-
 /* A pane with its controls above it. */
 .stage {
   display: flex;

package/dist/skill/reference/components/chat-list/examples/live.tsx

@@ -65,34 +65,37 @@ const INCOMING = [
 const TYPING_MS = 1600;
 
 export default function ChatListLiveExample() {
-  const [dialogs, setDialogs] = React.useState(DIALOGS);
-  const [dialogId, setDialogId] = React.useState<string | null>("vector");
+  // The dialogs and the open one in one state: a message that arrives later reads which dialog is
+  // open then, not when it was sent.
+  const [inbox, setInbox] = React.useState<{ dialogs: Dialog[]; open: string | null }>({
+    dialogs: DIALOGS,
+    open: "vector",
+  });
+  const { dialogs, open: dialogId } = inbox;
   const [step, setStep] = React.useState(0);
   const [busy, setBusy] = React.useState(false);
 
-  const patch = (id: string, next: Partial<Dialog>) =>
-    setDialogs((current) => current.map((item) => (item.id === id ? { ...item, ...next } : item)));
+  const patch = (id: string, next: (item: Dialog, open: string | null) => Partial<Dialog>) =>
+    setInbox((current) => ({
+      ...current,
+      dialogs: current.dialogs.map((item) =>
+        item.id === id ? { ...item, ...next(item, current.open) } : item,
+      ),
+    }));
 
   const receive = () => {
     const message = INCOMING[step % INCOMING.length];
     if (!message) return;
     setStep(step + 1);
     setBusy(true);
-    patch(message.id, { typing: true });
+    patch(message.id, () => ({ typing: true }));
     window.setTimeout(() => {
-      setDialogs((current) =>
-        current.map((item) =>
-          item.id === message.id
-            ? {
-                ...item,
-                typing: false,
-                preview: message.text,
-                at: new Date(),
-                unread: item.id === dialogId ? 0 : item.unread + 1,
-              }
-            : item,
-        ),
-      );
+      patch(message.id, (item, open) => ({
+        typing: false,
+        preview: message.text,
+        at: new Date(),
+        unread: item.id === open ? 0 : item.unread + 1,
+      }));
       setBusy(false);
     }, TYPING_MS);
   };
@@ -111,10 +114,14 @@ export default function ChatListLiveExample() {
           items={shown}
           getKey={(item) => item.id}
           value={dialogId}
-          onValueChange={(id) => {
-            setDialogId(id);
-            patch(id, { unread: 0 });
-          }}
+          onValueChange={(id) =>
+            setInbox((current) => ({
+              open: id,
+              dialogs: current.dialogs.map((item) =>
+                item.id === id ? { ...item, unread: 0 } : item,
+              ),
+            }))
+          }
           renderItem={(item) => (
             <ChatList.Item time={item.at} unread={item.unread} typing={item.typing}>
               <ChatList.ItemIcon>

package/dist/skill/reference/components/chat-list/examples/sizes.tsx

@@ -1,8 +1,6 @@
 /** Every size tier: row height, text, avatar, glyphs and the search field follow the tier — `size`. */
 import { Avatar, Card, ChatList, hueOf, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 const NOW = new Date(2026, 9, 14, 15, 0);
@@ -28,12 +26,9 @@ const DIALOGS = [
 
 export default function ChatListSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.tier}>
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
           <Card.Root>
             <ChatList.Root
               size={size}
@@ -54,8 +49,11 @@ export default function ChatListSizesExample() {
               )}
             />
           </Card.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
         </div>
       ))}
-    </>
+    </div>
   );
 }