prime-ui-kit 0.16.0 → 0.18.0

package/src/components/chat/COMPONENT.md

@@ -81,6 +81,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 - `renderMessage` may be an inline function: an item renders again only when it or its place changes, so whatever a row shows lives in its item (an edit, a reaction, a pin). Another message (a reply's original) comes from `entry.find(key)`.
 - `onRead` reports an incoming message once at least half of it, or half the view, has been on screen while the page is visible (`IntersectionObserver`); batched per frame, each `value` once per mount.
 - One sound at a time on the page: a `VoicePlayer`, a `VideoNote` and a video in `Message.Media` pause each other; nothing to wire.
+- Times in a profile's zone: `timeZone` (an IANA name) on `Chat.Messages` moves the date separators, the runs and every message's time to it; without it they follow the browser.
 
 ## API
 
@@ -107,7 +108,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (a `PageContent.BackButton`, an `Avatar`, `Chat.Title`, `Chat.Description`, `Chat.Actions`), `className`. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (a `Page.BackButton`, an `Avatar`, `Chat.Title`, `Chat.Description`, `Chat.Actions`), `className`. |
 
 ### Chat.Title
 `ref` → `HTMLHeadingElement`. Who the chat is with, one line that ellipsizes; it also names the message list (`aria-labelledby`).
@@ -174,7 +175,8 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `unread` | `string` | — | The key of the first unread item: the «Непрочитанные сообщения» band stands above it. |
 | `groupWindow` | `number` | `5` | Messages of one author further apart than this many minutes start a new run. |
 | `now` | `Date` | today | «Today» for the dates. |
-| `formatDate` | `(date: Date, now: Date) => string` | `formatMessageDate` | The label of a date. |
+| `timeZone` | `string` | the browser's zone | The IANA zone of the date separators, the runs and every message time (`"Asia/Vladivostok"`): a profile's zone, not the browser's. |
+| `formatDate` | `(date: Date, now: Date, timeZone?: string) => string` | `formatMessageDate` | The label of a date; gets the `timeZone`. |
 | `loading` | `boolean` | `false` | The first load: bubble-shaped `Skeleton`s on both sides stand in the list's place (`aria-busy`, `labels.loading` announced), then cross-fade into the messages; none of them counts as new. |
 | `hasOlder` | `boolean` | `false` | Older history exists: a bubble-shaped placeholder stands above the first message and `onLoadOlder` runs when the reader reaches the top. |
 | `onLoadOlder` | `() => void \| Promise<void>` | — | Load older messages and prepend them (while `hasOlder`); the reader's place is kept. |
@@ -193,7 +195,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` — the actions (`Button.Root size="s"`: Переслать, Удалить), `className`. |
 
 ### Chat.Separator
-`ref` → `HTMLDivElement`. A date between messages (`items` add them for you) («Сегодня», «12 марта» — `formatMessageDate`): a pill in the middle that stays at the top while its day scrolls.
+`ref` → `HTMLDivElement`. A date between messages (`items` add them for you) («Сегодня», «12 марта» — `formatMessageDate`): a pill a step above the bubbles that stays at the top while its day scrolls, until the next date pushes it out.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -308,7 +310,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `newMessages` | `"Новых сообщений: {count}. К последним сообщениям"` | The name of that button while new messages wait below. |
 | `typing` | `"печатает…"` | The status line of the header while the other side types. |
 | `search` | `"Поиск по переписке"` | The search button and the name of the search field. |
-| `searchPlaceholder` | `"Поиск по сообщениям"` | The placeholder of the search field. |
+| `searchPlaceholder` | `"Поиск"` | The placeholder of the search field. |
 | `matches` | `"{index} из {count}"` | The place of the current match, counted from the newest. |
 | `noMatches` | `"Нет совпадений"` | The search found nothing. |
 | `previousMatch` | `"Предыдущее совпадение"` | The button that goes to the older match. |
@@ -334,10 +336,11 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | [reactions.tsx](examples/reactions.tsx) | A team's own reactions for approvals: a double tap or `L` puts the approval mark, a long press or `R` opens the team's set, and a chip toggles them back — `quickReaction`, `reactionOptions`, `onReactionToggle`. |
 | [live.tsx](examples/live.tsx) | A live support chat: the client types — the header and the end of the list say so — then answers; new messages enter at the end, read receipts come from what is on screen, and scrolled up the round button counts what arrived — `typing`, `onNewMessage`, `onRead`. |
 | [search.tsx](examples/search.tsx) | Search and pinned messages: the search bar marks every match in the texts and transcripts, counts them and steps between them while the others step back; a pinned message's press jumps to it and blinks it — `Chat.SearchButton`, `Chat.Search`, `defaultSearch`, `Chat.Pinned`. |
+| [time-zone.tsx](examples/time-zone.tsx) | The conversation in the zone of the manager's profile, not the browser's: the date separators, the runs and every time follow it — `timeZone`, `items`, `renderMessage`. |
 | [states.tsx](examples/states.tsx) | 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`. |
 | [controlled.tsx](examples/controlled.tsx) | Selection mode owned by the screen: the Select item of a message's menu starts it, a check stands beside every message, a press toggles one while the others step back, the bar counts and acts, Escape leaves — `selected`, `onSelectedChange`, `Chat.SelectionBar`. |
 | [narrow.tsx](examples/narrow.tsx) | At phone width the header keeps its actions and lets the title ellipsize, bubbles take up to 85% of the chat, long links wrap and an album keeps its layout — `Chat.Root`, `Chat.Header`, `Chat.Messages`, `Chat.Footer`. |
-| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in the app header, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. |
+| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in its top bar, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. |
 
 ## Mistakes
 - A header, a search bar and a scroller of your own around the messages → `Chat.Header`, `Chat.Search`, `Chat.Messages`: the chat wires typing, search, jumps and selection between them.

package/src/components/chat/examples/screen.module.css

@@ -1,5 +1,5 @@
 /* Messenger: a work screen — the header carries the title, the page fills the app panel
-   (`AppShell.Root fillViewport` + `PageContent.Root fill`); each pane is a card with a scrolling
+   (`AppShell.Root fillViewport` + `Page.Root fill`); each pane is a card with a scrolling
    region. */
 
 .paneCard {

package/src/components/chat/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** A support messenger as a work screen: the title and the unread count in the app header, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. */
+/** A support messenger as a work screen: the title and the unread count in its top bar, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. */
 import {
-  AppHeader,
   Avatar,
   Card,
   Chat,
@@ -16,7 +15,7 @@ import {
   Icon,
   Message,
   type MessageStatus,
-  PageContent,
+  Page,
   type UploadContext,
   useUploadQueue,
   VoicePlayer,
@@ -573,123 +572,117 @@ export default function ChatScreenExample() {
   };
 
   return (
-    <>
-      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
-          the only h1 and one line of data; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Поддержка
-            <AppHeader.Description>{unreadLabel(unreadTotal)}</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-      </AppHeader.Root>
-
-      <PageContent.Root fill>
-        <PageContent.Body>
-          <PageContent.Split
-            open={dialogId !== null}
-            onOpenChange={(next) => {
-              if (!next) setDialogId(null);
-            }}
-          >
-            <PageContent.Panel kind="list">
-              <Card.Root className={styles.paneCard}>
-                <ChatList.Root
-                  items={foundDialogs}
-                  getKey={(item) => item.id}
-                  value={dialogId}
-                  onValueChange={setDialogId}
-                  search={dialogQuery}
-                  onSearchChange={setDialogQuery}
+    <Page.Root fill>
+      {/* A work screen titles itself in its top bar: the only h1 and one line of data. */}
+      <Page.TopBar>
+        <Page.Heading>
+          <Page.Title>Поддержка</Page.Title>
+          <Page.Description>{unreadLabel(unreadTotal)}</Page.Description>
+        </Page.Heading>
+      </Page.TopBar>
+      <Page.Body>
+        <Page.Split
+          open={dialogId !== null}
+          onOpenChange={(next) => {
+            if (!next) setDialogId(null);
+          }}
+        >
+          <Page.List>
+            <Card.Root className={styles.paneCard}>
+              <ChatList.Root
+                items={foundDialogs}
+                getKey={(item) => item.id}
+                value={dialogId}
+                onValueChange={setDialogId}
+                search={dialogQuery}
+                onSearchChange={setDialogQuery}
+                now={NOW}
+                renderItem={(item) => {
+                  const last = lastOf(item);
+                  return (
+                    <ChatList.Item
+                      time={last?.sentAt ?? item.at}
+                      status={last?.from === "me" ? last.status : undefined}
+                      unread={unread[item.id] ?? 0}
+                      typing={item.id === dialogId && clientTyping}
+                    >
+                      <ChatList.ItemIcon>
+                        <Avatar.Root color={hueOf(item.id)}>
+                          <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                          {item.id === "vector" ? <Avatar.Status status="online" /> : null}
+                        </Avatar.Root>
+                      </ChatList.ItemIcon>
+                      <ChatList.ItemText>{item.name}</ChatList.ItemText>
+                      <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
+                        {previewOf(item)}
+                      </ChatList.ItemDescription>
+                    </ChatList.Item>
+                  );
+                }}
+              />
+            </Card.Root>
+          </Page.List>
+
+          <Page.Detail>
+            <Card.Root className={styles.paneCard}>
+              <Chat.Root typing={clientTyping}>
+                <Chat.Header>
+                  <Page.BackButton />
+                  <Avatar.Root color={hueOf(dialog.id)}>
+                    <Avatar.Fallback>{dialog.initials}</Avatar.Fallback>
+                    {dialog.id === "vector" ? <Avatar.Status status="online" /> : null}
+                  </Avatar.Root>
+                  <Chat.Title>{dialog.name}</Chat.Title>
+                  <Chat.Description>{dialog.contact}</Chat.Description>
+                  <Chat.Actions>
+                    <Chat.SearchButton />
+                  </Chat.Actions>
+                </Chat.Header>
+                <Chat.Search />
+                <Chat.Messages
+                  loading={loadedId !== dialogId}
+                  items={messages}
+                  getKey={(message) => message.id}
+                  getAuthor={(message) => message.from}
+                  getDate={(message) => message.sentAt}
+                  renderMessage={renderMessage}
+                  unread={FIRST_UNREAD}
                   now={NOW}
-                  renderItem={(item) => {
-                    const last = lastOf(item);
-                    return (
-                      <ChatList.Item
-                        time={last?.sentAt ?? item.at}
-                        status={last?.from === "me" ? last.status : undefined}
-                        unread={unread[item.id] ?? 0}
-                        typing={item.id === dialogId && clientTyping}
-                      >
-                        <ChatList.ItemIcon>
-                          <Avatar.Root color={hueOf(item.id)}>
-                            <Avatar.Fallback>{item.initials}</Avatar.Fallback>
-                            {item.id === "vector" ? <Avatar.Status status="online" /> : null}
-                          </Avatar.Root>
-                        </ChatList.ItemIcon>
-                        <ChatList.ItemText>{item.name}</ChatList.ItemText>
-                        <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
-                          {previewOf(item)}
-                        </ChatList.ItemDescription>
-                      </ChatList.Item>
-                    );
+                  hasOlder={hasOlder}
+                  onLoadOlder={loadOlder}
+                  onNewMessage={(_, { direction }) => {
+                    if (direction !== "incoming" || !dialogId) return;
+                    setUnread((current) => ({
+                      ...current,
+                      [dialogId]: (current[dialogId] ?? 0) + 1,
+                    }));
+                  }}
+                  onRead={(values) => {
+                    if (!dialogId) return;
+                    setUnread((current) => ({
+                      ...current,
+                      [dialogId]: Math.max(0, (current[dialogId] ?? 0) - values.length),
+                    }));
                   }}
                 />
-              </Card.Root>
-            </PageContent.Panel>
-
-            <PageContent.Panel kind="detail">
-              <Card.Root className={styles.paneCard}>
-                <Chat.Root typing={clientTyping}>
-                  <Chat.Header>
-                    <PageContent.BackButton />
-                    <Avatar.Root color={hueOf(dialog.id)}>
-                      <Avatar.Fallback>{dialog.initials}</Avatar.Fallback>
-                      {dialog.id === "vector" ? <Avatar.Status status="online" /> : null}
-                    </Avatar.Root>
-                    <Chat.Title>{dialog.name}</Chat.Title>
-                    <Chat.Description>{dialog.contact}</Chat.Description>
-                    <Chat.Actions>
-                      <Chat.SearchButton />
-                    </Chat.Actions>
-                  </Chat.Header>
-                  <Chat.Search />
-                  <Chat.Messages
-                    loading={loadedId !== dialogId}
-                    items={messages}
-                    getKey={(message) => message.id}
-                    getAuthor={(message) => message.from}
-                    getDate={(message) => message.sentAt}
-                    renderMessage={renderMessage}
-                    unread={FIRST_UNREAD}
-                    now={NOW}
-                    hasOlder={hasOlder}
-                    onLoadOlder={loadOlder}
-                    onNewMessage={(_, { direction }) => {
-                      if (direction !== "incoming" || !dialogId) return;
-                      setUnread((current) => ({
-                        ...current,
-                        [dialogId]: (current[dialogId] ?? 0) + 1,
-                      }));
-                    }}
-                    onRead={(values) => {
-                      if (!dialogId) return;
-                      setUnread((current) => ({
-                        ...current,
-                        [dialogId]: Math.max(0, (current[dialogId] ?? 0) - values.length),
-                      }));
-                    }}
+                <Chat.Footer>
+                  <ChatComposer
+                    replyTo={replyTo}
+                    replyAuthor={dialog.contactTo}
+                    editing={editing}
+                    onReplyDismiss={() => setReplyTo(null)}
+                    onEditDismiss={() => setEditing(null)}
+                    onEditLast={editLast}
+                    onPost={post}
+                    onSave={save}
+                    onActivityChange={reportActivity}
                   />
-                  <Chat.Footer>
-                    <ChatComposer
-                      replyTo={replyTo}
-                      replyAuthor={dialog.contactTo}
-                      editing={editing}
-                      onReplyDismiss={() => setReplyTo(null)}
-                      onEditDismiss={() => setEditing(null)}
-                      onEditLast={editLast}
-                      onPost={post}
-                      onSave={save}
-                      onActivityChange={reportActivity}
-                    />
-                  </Chat.Footer>
-                </Chat.Root>
-              </Card.Root>
-            </PageContent.Panel>
-          </PageContent.Split>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+                </Chat.Footer>
+              </Chat.Root>
+            </Card.Root>
+          </Page.Detail>
+        </Page.Split>
+      </Page.Body>
+    </Page.Root>
   );
 }

package/src/components/chat/examples/time-zone.tsx

@@ -0,0 +1,83 @@
+/** The conversation in the zone of the manager's profile, not the browser's: the date separators, the runs and every time follow it — `timeZone`, `items`, `renderMessage`. */
+import { Card, Chat, Message, SegmentedControl } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const ZONES = [
+  { value: "Europe/Moscow", label: "Москва" },
+  { value: "Asia/Vladivostok", label: "Владивосток" },
+];
+
+const NOW = new Date(Date.UTC(2026, 9, 15, 4, 0));
+const utc = (day: number, hour: number, minute: number) =>
+  new Date(Date.UTC(2026, 9, day, hour, minute));
+
+const MESSAGES = [
+  {
+    id: "tz-1",
+    author: "client",
+    sentAt: utc(14, 12, 40),
+    text: "Добрый вечер! Машина с заказом № 4821 уже вышла?",
+  },
+  {
+    id: "tz-2",
+    author: "manager",
+    sentAt: utc(14, 13, 5),
+    text: "Вышла в 18:00, будет у вас завтра до обеда.",
+  },
+  {
+    id: "tz-3",
+    author: "client",
+    sentAt: utc(14, 14, 30),
+    text: "Спасибо, предупрежу склад.",
+  },
+  {
+    id: "tz-4",
+    author: "manager",
+    sentAt: utc(15, 0, 10),
+    text: "Водитель на месте, выгрузка через 10 минут.",
+  },
+];
+
+type ChatMessage = (typeof MESSAGES)[number];
+
+export default function ChatTimeZoneExample() {
+  const [zone, setZone] = React.useState("Asia/Vladivostok");
+
+  return (
+    <div className={styles.live}>
+      <div className={styles.liveBar}>
+        <SegmentedControl.Root value={zone} onValueChange={setZone} aria-label="Пояс профиля">
+          {ZONES.map((item) => (
+            <SegmentedControl.Item key={item.value} value={item.value}>
+              {item.label}
+            </SegmentedControl.Item>
+          ))}
+        </SegmentedControl.Root>
+      </div>
+      <Card.Root className={styles.short}>
+        <Chat.Root>
+          <Chat.Messages
+            aria-label="Переписка по заказу № 4821"
+            timeZone={zone}
+            now={NOW}
+            items={MESSAGES}
+            getKey={(message: ChatMessage) => message.id}
+            getAuthor={(message: ChatMessage) => message.author}
+            getDate={(message: ChatMessage) => message.sentAt}
+            renderMessage={(message: ChatMessage) => (
+              <Message.Root
+                direction={message.author === "manager" ? "outgoing" : "incoming"}
+                time={message.sentAt}
+                status={message.author === "manager" ? "read" : undefined}
+              >
+                <Message.Text>{message.text}</Message.Text>
+              </Message.Root>
+            )}
+          />
+        </Chat.Root>
+      </Card.Root>
+    </div>
+  );
+}

package/src/components/chat-list/COMPONENT.md

@@ -28,7 +28,7 @@ ChatList.Root                 <div> column filling its host (container `chat-lis
 ├─ ScrollContainer            the list's own scroller; onReachEnd → onLoadMore while hasMore
 │  └─ Crossfade               loading (placeholder List rows) ⇄ empty (EmptyPage compact) ⇄ the list
 │     └─ List.Root <ul>       aria-label «Диалоги»; spacer <li aria-hidden> stand for rows out of view
-│        └─ ChatList.Item     List.Item <li> + <button> | <a href>; current from value; one Tab stop
+│        └─ ChatList.Item     List.Item <li> + <button> | <a href> | your element (asChild); current from value; one Tab stop
 │           ├─ ChatList.ItemIcon         before the name: avatar slot (aria-hidden); after it: a glyph
 │           ├─ ChatList.ItemText         the name; muted glyph after it
 │           ├─ ChatList.ItemDescription  author · media word · text — cross-fades with draft and «печатает…»
@@ -62,12 +62,13 @@ ChatList.Root                 <div> column filling its host (container `chat-lis
 | `empty` | `ReactNode` | — | The empty state without a search (an `EmptyPage` with an action). Default: «Нет диалогов». |
 | `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». |
+| `timeZone` | `string` | the browser's zone | The IANA zone the times of the rows are read in (`"Asia/Vladivostok"`): a profile's zone, not the browser's. |
+| `formatTime` | `(date: Date, now: Date, timeZone?: string) => string` | `formatChatTime` | Display of a row's `Date` time: «14:32» today, «пн» this week, «12 мар», «12.03.2025»; gets the `timeZone`. |
 | `labels` | `Partial<ChatListLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other `div` attributes of the column. |
 
 ### ChatList.Item
-`ref` → `HTMLElement` (the `<button>` or `<a>`, not the `<li>`). A dialog: a `List.Item` row with the avatar, the name and the time over the preview and the counts. Its key and `current` come from the root.
+`ref` → `HTMLElement` (the `<button>`, `<a>` or `asChild` element, not the `<li>`). A dialog: a `List.Item` row with the avatar, the name and the time over the preview and the counts. Its key and `current` come from the root.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -83,7 +84,8 @@ ChatList.Root                 <div> column filling its host (container `chat-lis
 | `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`. |
+| `asChild` | `boolean` | `false` | The one child element (a router `Link`) is the row; the parts go inside it. |
+| `children` | `ReactNode` | — | `ChatList.ItemIcon`, `ChatList.ItemText`, `ChatList.ItemDescription`, `ChatList.ItemMenu` — inside the child element with `asChild`. |
 | `…rest` | `ButtonHTMLAttributes<HTMLButtonElement>` | — | `className` and the native attributes of the row element. |
 
 ### ChatList.ItemIcon
@@ -150,6 +152,7 @@ The search field takes the tier too; counts are one tier down (the Badge's own r
 | `muted` | a muted glyph after the name; the count soft gray | notifications are off | `false` |
 | `mention` | a solid «@» before the count | the reader is mentioned | `false` |
 | `pinned` | a pin under the time while nothing is unread | pinned by the reader — order pinned first in `items` | `false` |
+| `asChild` | the same row, rendered as your one child element with the parts inside it | a router's `Link` opens the dialog without a reload | `false` |
 | `status` | ✓ / ✓✓ in the accent / clock / failure mark before the time | the reader wrote the last message | — |
 
 ## States
@@ -171,7 +174,7 @@ The search field takes the tier too; counts are one tier down (the Badge's own r
 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.Panel kind="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 `Page.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.
@@ -195,7 +198,7 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 ### 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 list is a `<ul>` named «Диалоги» (`labels.list`); each row an `<li>` with a button, a link with `href`, or your link with `asChild`.
 - 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`.
 - While the other side types, the preview is `aria-hidden` and «печатает…» is read; a draft reads «Черновик: …».
@@ -243,7 +246,8 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 | [search.tsx](examples/search.tsx) | The search field filters dialogs by name and by the last message, marks the match in both, says how many were found and shows a quiet state when none match — `defaultSearch`, `onSearchChange`. |
 | [live.tsx](examples/live.tsx) | A live inbox: a client types, then writes — the preview turns into the typing line and back, the count rolls up and the dialog glides to the top; opening it clears the count — `typing`, `unread`, `items`. |
 | [long-list.tsx](examples/long-list.tsx) | A sales inbox of a thousand dialogs: only the rows around the view render, arrows walk through all of them, and the next page loads as the end comes near — `hasMore`, `onLoadMore`. |
-| [links.tsx](examples/links.tsx) | Dialogs with their own address: every row is a link the router opens, the time reads as how long ago, and the list is named for its queue — `href`, `formatTime`, `labels`. |
+| [links.tsx](examples/links.tsx) | Dialogs with their own address: every row is a link to the ticket's page, the time reads as how long ago, and the list is named for its queue — `href`, `formatTime`, `labels`. |
+| [router.tsx](examples/router.tsx) | Router links as the dialogs, the times in the zone of the operator's profile; render it inside a router — `asChild`, `timeZone`. |
 | [states.tsx](examples/states.tsx) | Loading and empty: placeholder rows in the rows' geometry cross-fade into the dialogs; a new workspace without dialogs shows its own empty state with an action — `loading`, `empty`. |
 | [controlled.tsx](examples/controlled.tsx) | The open dialog lives in the screen: a row opens it beside the list, and a next-unread button opens the next one from outside — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | At phone width long names and previews truncate while the time and counts stay whole; a pane squeezed under 240px keeps only the names and the counts — `ChatList.Root`, `search`. |
@@ -256,7 +260,9 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 - An `Avatar.Root size="s"` to fit the row → leave `size` out; the slot sizes the avatar to the tier.
 - A «⋯» button nested inside the row for the menu → `ChatList.ItemMenu`: it opens on right click, a long press and Shift+F10.
 - Deleting from the menu without a question → open a `ConfirmDialog` from the menu item.
+- `href` with an `onClick` that calls `preventDefault()` and the router's `navigate` → `asChild` with the router's `Link`, the parts inside it.
+- Times shifted by hand to a profile's zone before `time` → `timeZone` on the root: «сегодня», the weekday and the clock are read in it.
 
 ## 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), [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)
+- **See also:** [Chat](../chat/COMPONENT.md), [Message](../message/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [Page](../../layout/page/COMPONENT.md), [ConfirmDialog](../confirm-dialog/COMPONENT.md)

package/src/components/chat-list/examples/controlled.tsx

@@ -56,7 +56,7 @@ export default function ChatListControlledExample() {
   const dialog = dialogs.find((item) => item.id === dialogId);
 
   return (
-    <div className={styles.stage}>
+    <div className={styles.screen}>
       <div className={styles.bar}>
         <Button.Root
           variant="soft"
@@ -93,7 +93,7 @@ export default function ChatListControlledExample() {
         <Card.Root>
           <Card.Body>
             <Typography variant="body-m" tone={dialog ? "default" : "muted"}>
-              {dialog ? `Открыт диалог: ${dialog.name}` : "Выберите диалог слева"}
+              {dialog ? `Открыт диалог: ${dialog.name}` : "Выберите диалог в списке"}
             </Typography>
           </Card.Body>
         </Card.Root>

package/src/components/chat-list/examples/examples.module.css

@@ -29,6 +29,14 @@
   gap: var(--prime-space-2);
 }
 
+/* controlled: a list + detail screen, as wide as the preview gives (no pane cap). */
+.screen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  inline-size: 100%;
+}
+
 /* controlled: the list beside the open dialog; they stack in a narrow column. */
 .split {
   display: flex;

package/src/components/chat-list/examples/links.tsx

@@ -1,4 +1,4 @@
-/** Dialogs with their own address: every row is a link the router opens, the time reads as how long ago, and the list is named for its queue — `href`, `formatTime`, `labels`. */
+/** Dialogs with their own address: every row is a link to the ticket's page, the time reads as how long ago, and the list is named for its queue — `href`, `formatTime`, `labels`. */
 import { Avatar, Card, ChatList, hueOf } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/src/components/chat-list/examples/router.tsx

@@ -0,0 +1,63 @@
+/** Router links as the dialogs, the times in the zone of the operator's profile; render it inside a router — `asChild`, `timeZone`. */
+import { Avatar, Card, ChatList, hueOf } from "prime-ui-kit";
+import { Link } from "react-router-dom";
+
+import styles from "./examples.module.css";
+
+const NOW = new Date(Date.UTC(2026, 9, 15, 4, 0));
+const utc = (day: number, hour: number, minute: number) =>
+  new Date(Date.UTC(2026, 9, day, hour, minute));
+
+const DIALOGS = [
+  {
+    id: "c-311",
+    name: "ООО «Вектор»",
+    initials: "ВК",
+    preview: "Машина на месте, начинаем выгрузку",
+    at: utc(15, 0, 10),
+    unread: 1,
+  },
+  {
+    id: "c-308",
+    name: "ООО «Гранит»",
+    initials: "ГР",
+    preview: "Счёт № 2041 оплачен",
+    at: utc(14, 14, 30),
+    unread: 0,
+  },
+  {
+    id: "c-297",
+    name: "ИП Козлов",
+    initials: "ИК",
+    preview: "Пришлите, пожалуйста, акт сверки",
+    at: utc(12, 6, 15),
+    unread: 0,
+  },
+];
+
+export default function ChatListRouterExample() {
+  return (
+    <Card.Root className={styles.short}>
+      <ChatList.Root
+        items={DIALOGS}
+        getKey={(item) => item.id}
+        defaultValue="c-311"
+        now={NOW}
+        timeZone="Asia/Vladivostok"
+        renderItem={(item) => (
+          <ChatList.Item asChild time={item.at} unread={item.unread}>
+            <Link to={`/chats/${item.id}`}>
+              <ChatList.ItemIcon>
+                <Avatar.Root color={hueOf(item.id)}>
+                  <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                </Avatar.Root>
+              </ChatList.ItemIcon>
+              <ChatList.ItemText>{item.name}</ChatList.ItemText>
+              <ChatList.ItemDescription>{item.preview}</ChatList.ItemDescription>
+            </Link>
+          </ChatList.Item>
+        )}
+      />
+    </Card.Root>
+  );
+}

package/src/components/checkbox/COMPONENT.md

@@ -50,6 +50,7 @@ Checkbox.Indicator     the box alone, no input — a mark inside option / menu r
 | `optional` | `boolean` | `false` | Muted `labels.optional` after the label text; the field may stay off. |
 | `labels` | `Partial<CheckboxLabels>` | — | Built-in strings, see Labels. |
 | `hint` | `ReactNode` | — | Help text under the label text. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger ring on the unchecked box and `aria-invalid`. A non-empty `error` implies it. |
 | `disabled` | `boolean` | `false` | Disabled fill, dimmed label and hint, no toggling. |

package/src/components/checkbox/examples/examples.module.css

@@ -19,12 +19,13 @@
   width: min(100%, var(--prime-layout-form-width-s));
 }
 
-/* indicator.tsx: selectable tiles in a fluid grid. */
+/* indicator.tsx: selectable tiles in a fluid grid; a column holds a whole module name (a tile
+   label stays on one line), so a narrow column stacks the tiles instead of truncating them. */
 .tiles {
   display: grid;
   grid-template-columns: repeat(
       auto-fit,
-      minmax(min(100%, var(--prime-layout-tile-min-width)), 1fr)
+      minmax(min(100%, calc(var(--prime-layout-tile-min-width) * 1.5)), 1fr)
     );
   gap: var(--prime-space-4);
   width: 100%;

package/src/components/code-block/COMPONENT.md

@@ -69,7 +69,7 @@ Syntax tokens: keywords purple (weight 500), strings teal, numbers orange, JSX t
 ## Layout & spacing
 - `max-width: 100%`; the block takes the column width and long lines scroll horizontally inside it (`white-space: pre`, tab size 2), with the kit's thin scrollbar.
 - Heading / text → code block: space step 2–4 (8–16px).
-- Constrain the column (PageContent `maxWidth="readable"` for docs), not the block.
+- Constrain the column (`Page.Root maxWidth="readable"` for docs), not the block.
 
 ## Accessibility