prime-ui-kit 0.21.2 → 0.21.3

package/dist/skill/composition.md

@@ -18,7 +18,7 @@ playground page. What each screen teaches is in [Screen rules](#screen-rules) at
 | [Settings page](#settings-page) | page | [screen.tsx](reference/layout/page/examples/screen.tsx) | the path in a collapsing top bar, the large title in the flow, a card with its own header per section, form with its own save, Switches that apply at once, danger zone with a confirm |
 | [Form in a Drawer](#form-in-a-drawer) | drawer | [screen.tsx](reference/components/drawer/examples/screen.tsx) | the title, counts and the Drawer trigger in the top bar, the search in the table's toolbar; Drawer form: groups, errors on submit, focus on the first invalid field, loading, toast |
 | [Record editor](#record-editor) | field-list | [screen.tsx](reference/components/field-list/examples/screen.tsx) | a document page (a long form): the title and a line of description in `Page.Heading`, «Сохранить тариф» in `Page.Actions`, both in a `Page.Header` in the flow; a plan card edited in card sections: name and description, specs in a `FieldList` (icon-only `Select` and `ColorPresets` in compact columns, pinned rows, reorder), the price and its changes by month in one list with the base row pinned, a setup fee in three currencies in one row under one heading, save with «Сохранено» on the button |
-| [Dashboard](#dashboard) | card | [screen.tsx](reference/components/card/examples/screen.tsx) | the large title + a line of data in the flow, period switch and report in a collapsing `Page.TopBar`; KPI row that cross-fades to the new period, a Sparkline revenue trend, invoiced vs paid in a ChartFrame, panels with progress and a split, short table + link to the list |
+| [Dashboard](#dashboard) | card | [screen.tsx](reference/components/card/examples/screen.tsx) | an overview titled in its `Page.TopBar`: the title + a line of data, the period switch and the report; KPI row that cross-fades to the new period, a Sparkline revenue trend, invoiced vs paid in a ChartFrame, panels with progress and a split, short table + link to the list |
 | [Screen states](#screen-states) | crossfade | [screen.tsx](reference/components/crossfade/examples/screen.tsx) | title + the statement date in `Page.TopBar`, page error in a Banner with retry, region loading with a Skeleton, Crossfade between states, table error in place, first-run EmptyPage |
 | [Messenger](#messenger) | chat | [screen.tsx](reference/components/chat/examples/screen.tsx) | title + the unread count in `Page.TopBar`; a full-height Page.Split of a `ChatList` with its search (live last message, ticks, unread counts, «печатает…») and a `Chat`: `Chat.Header` with the back button, avatar, title, the status that turns into «печатает…» (`typing`) and the search button, `Chat.Search`, `Chat.Messages` from `items` + `renderMessage` (dates, runs and the unread band from the data, history loaded above with `hasOlder` / `onLoadOlder`, a first load in skeletons), text, a photo, a file and sent voice, reply and edit from the menu through `Composer.Context messageId` (`replyTo` / `editOf`), the jump to the quoted message (`Message.Reply target`), optimistic sends whose messages rise from the composer while the client's answer slides in, «печатает…» both ways (`onActivityChange` → `Chat.Root typing`), unread counts from `onNewMessage` and `onRead`, the Composer with attachments in `Chat.Footer` |
 | [Sales pipeline board](#sales-pipeline-board) | kanban | [screen.tsx](reference/components/kanban/examples/screen.tsx) | `Page.TopBar` titles the page (`h1` + a Description with the open deals and their sum) with SmartFilter search and a board / list SegmentedControl in `Page.Tools` and the one primary action in `Page.Actions`; Crossfade between a `plain` Kanban (stages without wells, deal cards on the page) and a DataTable of the same deals, column totals in `renderColumnMeta`, moves saved through an `onValueChange` promise that the server can refuse, the deal in a Drawer with a DescriptionList and stage actions, skeleton first load |
@@ -38,22 +38,57 @@ its `Page.TopBar` (sticky) and its `Page.Body`, plus a `Page.Header` in the flow
 **One title per page.** `Page.Title` is the page's only `<h1>`, a `Page.Description` with it is one
 line that carries data («Среда, 14 октября · 3 задачи», «Отправлен · оплатить до 14 октября»), and a
 nested record puts the path up (a `Breadcrumb.Root` before the title) — all three inside
-`Page.Heading`, the title group. Where the heading stands follows the kind of page; its size follows
+`Page.Heading`, the title group. Where the heading stands follows what the body is; its size follows
 the place:
 
-- **Work screens** — a list, a board, a chat, a schedule, a record: `Page.Heading` stands in
+- **Every screen of data** — a list, a board, a chat, a schedule, a record, and every overview
+  (a dashboard, analytics, statistics, finances, a builder): `Page.Heading` stands in
   `Page.TopBar` beside the page's tools and buttons ([the top bar](#the-top-bar)); there is no header
-  in the flow.
-- **Document pages** — settings, a long form, an article or help text: `Page.Header` in the flow
-  holds `Page.Heading` (the large title with one sentence of `Page.Description`) and the page's save
+  in the flow, and the body starts with the first block.
+- **Document pages** — settings, a long form, an article or help text, read top to bottom in one
+  column with no page tools (no period, view or sections): `Page.Header` in the flow holds
+  `Page.Heading` (the large title with one sentence of `Page.Description`) and the page's save
   action in `Page.Actions`; optionally a `Page.TopBar collapse` with only the path in its
   `Page.Heading`, which repeats the title once it scrolls away.
-- **Overviews** — dashboards: a `Page.TopBar collapse` with the page's tools (the period) in
-  `Page.Tools` and its buttons (a report) in `Page.Actions`, and the titled `Page.Header` in the flow.
 
+The test: a page with tools (a period, a view, sections), tiles or charts is a screen of data, and its
+title stands in the bar. `collapse` belongs only to a bar that holds a `Page.Heading` (the path of a
+document page); a bar of tools alone over a large title in the flow is two headers for one page.
 Never two titles; never no `<h1>`. A bar whose page shows no title still holds a `Page.Title` — inside
 `VisuallyHidden` — unless a flow `Page.Header` has one.
 
+```tsx partial
+// bad — an overview split in two: the bar holds only the period, the title stands in the flow
+<Page.Root>
+  <Page.TopBar collapse>
+    <Page.Tools aria-label="Аналитика">…</Page.Tools>
+  </Page.TopBar>
+  <Page.Header>
+    <Page.Heading>
+      <Page.Title>Аналитика</Page.Title>
+      <Page.Description>Продажи · на 8 октября, 9:40</Page.Description>
+    </Page.Heading>
+  </Page.Header>
+  <Page.Body>…</Page.Body>
+</Page.Root>
+```
+
+```tsx good
+// good — the overview titles itself in its bar, like every screen of data
+<Page.Root>
+  <Page.TopBar>
+    <Page.Heading>
+      <Page.Title>Аналитика</Page.Title>
+      <Page.Description>Продажи · на 8 октября, 9:40</Page.Description>
+    </Page.Heading>
+    <Page.Tools aria-label="Аналитика">
+      <Datepicker.Root mode="range" aria-label="Период" />
+    </Page.Tools>
+  </Page.TopBar>
+  <Page.Body>…</Page.Body>
+</Page.Root>
+```
+
 ```
 AppShell.Root                      once per app (layouts.md#app-frame-once-per-app)
 ├─ AppShell.Nav → Sidebar          navigation rail, one layer above the page
@@ -74,9 +109,9 @@ AppShell.Root                      once per app (layouts.md#app-frame-once-per-a
             │  └─ Page.Cell        span (of 12), rows; the tile fills it
             └─ Page.Section        a new topic: h2 label (+ Page.Actions), 40 from its neighbours
 
-Document page or overview: the title in the flow
+Document page: the title in the flow
    └─ Page.Root maxWidth="wide" | "readable"
-      ├─ Page.TopBar collapse      the path (an overview: its tools and buttons); repeats the title once it scrolls away
+      ├─ Page.TopBar collapse      only the path in its Page.Heading; repeats the title once it scrolls away
       ├─ Page.Header               Page.Heading (the one h1, a sentence of description) + Page.Actions; 24 above the body
       └─ Page.Body
 ```
@@ -191,8 +226,9 @@ with «Сделки» and «Документы». Each facet is a route of its o
   the current link of the switch, never a second title or a title that names the facet.
 - **The switch is links in `Page.Tools`**: a `SegmentedControl` whose items are router links
   (`SegmentedControl.Item asChild`), `value` = the current path. It is a navigation (Tab moves
-  through the links, the current one is `aria-current="page"`), on a phone it takes a line of its
-  own under the title by itself.
+  through the links, the current one is `aria-current="page"`), and the bar always gives it a line
+  of its own under the title, at the start edge, so the switch stands still from one sub-page to the
+  next whatever each sub-page puts beside the title.
 - **The body is the sub-page**, swapped in a `Crossfade` keyed by the path (`Routes` given the
   `location`, so the leaving sub-page stays on its route while it fades).
 - **The Sidebar stays on the section.** Its item is current on every sub-route: a `NavLink` to
@@ -345,7 +381,7 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
 - **One primary per area** (the page, card, dialog, form): `solid`, last in its row. Secondary:
   `soft` + `tone="neutral"`. Dismiss / revert: `ghost` + `neutral` in pages and cards, `outline` +
   `neutral` in Modal / Drawer footers.
-- Placement: every button of the page in one `Page.Actions` — of `Page.TopBar` on a work screen, of the flow `Page.Header` on a document page — the primary last; card actions in `Card.Footer`; dialog actions in
+- Placement: every button of the page in one `Page.Actions` — of `Page.TopBar` on a screen of data, of the flow `Page.Header` on a document page — the primary last; card actions in `Card.Footer`; dialog actions in
   `Modal.Footer` / `Drawer.Footer`; row actions in the last column; actions on the selected rows of a
   table in its selection menu ([controls of a table](#controls-of-a-table)).
 - A dialog footer is the dialog's answer: Cancel and the primary. Deleting the record the dialog
@@ -444,7 +480,8 @@ row of a `FieldList` follows the same count ([forms](#7-forms)).
 
 ### Where the filters go
 
-A control stands with what it changes. Ask of each one: what does it narrow or switch?
+A control stands with what it changes. Ask of each one: what does it narrow or switch? (In a
+drawer, the open tab is a «what» too: [a control for the whole tab](#a-record-in-a-drawer).)
 
 - **One table** — its search and filter fields, their chips, its column chooser and the actions on
   its selected rows belong to the `DataTable`, on every page: the page that is only this table, a
@@ -619,8 +656,10 @@ A control stands with what it changes. Ask of each one: what does it narrow or s
 
 ### Tables
 
-- Paging is built in: `paging="pages"` (default, Pagination and the «Показано 1–6 из 10» range in the
-  footer), `paging="infinite"` for feeds, `paging="none"` for short lists on dashboards and details.
+- Paging is built in: `paging="pages"` (default, Pagination in the footer once there is a second
+  page), `paging="infinite"` for feeds (its footer shows only while the next rows load),
+  `paging="none"` for short lists on dashboards and details. The «Показано 1–6 из 10» range is
+  `showRange`, only where the count matters to the task ([helper text is opt-in](ux.md#3-label-economy)).
 - When the server holds more than you load (a CRM list, a register): `source="server"` — `rows` is the
   page the server returned, `rowCount` its total; `sort` / `page` / the SmartFilter value make the
   request, a new search or filter sets `page` to 1, and the old rows stay with `loading` until the
@@ -642,6 +681,8 @@ A control stands with what it changes. Ask of each one: what does it narrow or s
   first child of a `Dnd.SortableItem` — so the on / off state reads first, like a checkbox, and the
   grip keeps the end edge ([reorder.tsx](reference/components/list/examples/reorder.tsx)).
 - Never a toggle between the label and the grip: «Почта … [Switch] [grip]» reads as two handles.
+- Rows that cannot move stay in the same list with `List.Item locked` — the lock takes the grip's
+  place, so every row keeps one grid ([one kind, one list](ux.md#2-the-shape-of-the-data-decides-the-layout)).
 
 ## 9. Feedback
 
@@ -685,7 +726,8 @@ changes) instead.
 A toast is no layer of that stack: `notify()` from inside a Drawer leaves it open, and a press on
 the toast closes nothing below it. Titled groups of a dialog's body (a client's contacts, its deals)
 are `Drawer.Section` / `Modal.Section` with their own `Drawer.Actions` / `Modal.Actions`, not a
-hand-made heading row; a footer's `Drawer.Meta` / `Modal.Meta` goes above the buttons by itself when
+hand-made heading row — and only where the heading names what the blocks do not
+([label economy](ux.md#3-label-economy)); a footer's `Drawer.Meta` / `Modal.Meta` goes above the buttons by itself when
 the footer runs short.
 
 ### A record in a drawer
@@ -716,6 +758,13 @@ wherever it opens:
   the save the button leaves, so the success is a `Notification`.
 - **Tabs are topics.** Each tab holds one topic, and a record's history (its log) is always a tab of
   its own. Tabs that outgrow the width never merge: the strip scrolls ([switchers](responsive.md#switchers)).
+- **A control for the whole tab stands in the header.** A switch that changes every block of the
+  open tab — the language of its texts, the period of its figures — is one control in
+  `Drawer.Actions`, before the buttons, rendered only while a tab it applies to is open
+  ([tab-switcher.tsx](reference/components/drawer/examples/tab-switcher.tsx)). It is the same rule as
+  [where the filters go](#where-the-filters-go): what it changes is the tab, and the tab's place is
+  the header. A control that changes one block stays in that block. A period starts from the
+  period of the page the drawer opened from, so the drawer's figures match the row it came from.
 - **Data at the drawer's level.** The drawer loads the record and the data of its tabs; a tab never
   fetches on mount, so coming back to it shows what it showed instead of a skeleton that collapses
   it. A tab that keeps a draft or its scroll keeps its panel with `Tabs.Panel keepMounted`. The
@@ -758,6 +807,45 @@ wherever it opens:
 </Drawer.Content>
 ```
 
+```tsx partial
+// bad — the tab's language switch repeated in the heading of every section
+<Tabs.Panel value="description">
+  <Drawer.Section label="Название">
+    <Drawer.Actions>
+      <SegmentedControl.Root aria-label="Язык" defaultValue="ru">…</SegmentedControl.Root>
+    </Drawer.Actions>
+    …
+  </Drawer.Section>
+  <Drawer.Section label="Описание">
+    <Drawer.Actions>
+      <SegmentedControl.Root aria-label="Язык" defaultValue="ru">…</SegmentedControl.Root>
+    </Drawer.Actions>
+    …
+  </Drawer.Section>
+</Tabs.Panel>
+```
+
+```tsx good
+// good — one switch for the open tab, in the header before ⋯, only on the tab it applies to
+// declare: const tab: string
+<Drawer.Header>
+  <Drawer.Title>Кресло «Орион»</Drawer.Title>
+  <Drawer.Actions>
+    {tab === "description" ? (
+      <SegmentedControl.Root aria-label="Язык текстов" defaultValue="ru">
+        <SegmentedControl.Item value="ru">RU</SegmentedControl.Item>
+        <SegmentedControl.Item value="en">EN</SegmentedControl.Item>
+      </SegmentedControl.Root>
+    ) : null}
+    <Button.Root variant="ghost" tone="neutral" aria-label="Действия с моделью">
+      <Button.Icon>
+        <Icon name="action.more" />
+      </Button.Icon>
+    </Button.Root>
+  </Drawer.Actions>
+</Drawer.Header>
+```
+
 ## 11. Narrow screens
 
 - Layouts are [intrinsic](responsive.md#intrinsic-grids) — no breakpoints needed, and they work in
@@ -836,7 +924,7 @@ export function RevenuePanel() {
 
 For a plain KPI row use `Card.Root variant="stat-trend"` (Label · Value · Delta), each in a
 `Page.Cell span={3}` of the page's `Page.Grid` — see [the dashboard screen](reference/components/card/examples/screen.tsx). When the trend over days matters, put a
-`Sparkline` in the `Card.Body` instead: it brings the value, the change and a line to scrub.
+`Sparkline` in the `Card.Body` instead: it brings the value and a line to scrub, the change with `compareTo`.
 
 ## Screen rules
 
@@ -906,11 +994,11 @@ What each screen in [the index](#screens) demonstrates — keep these when you s
 
 [card/examples/screen.tsx](reference/components/card/examples/screen.tsx)
 
-- An overview: the large `Page.Title` «Обзор» with a `Page.Description` line of data (what and as of when) in a `Page.Header` in the flow; a `Page.TopBar collapse` above it keeps the page's tools and buttons in reach and repeats the title once it scrolls away; the body starts with the tiles.
+- An overview titles itself in its `Page.TopBar` like any screen of data: `Page.Title` «Обзор» with a `Page.Description` line of data (what and as of when) in `Page.Heading`, beside the page's tools and buttons; no header in the flow, the body starts with the tiles.
 - The period is a `SegmentedControl` in the bar's `Page.Tools` and the report a `soft` + `neutral` button with an icon in its `Page.Actions`: the period changes the values on this same screen. Tabs (`Tabs`) are for different content, not for a period.
 - Every tile of the screen is one `Page.Grid`: KPI `Card variant="stat-trend"` in `Page.Cell span={3}`, 16 px on both axes; `Card.Delta` with a `tone` by the meaning of the change: overdue growing is `danger`, its decline `success`.
 - Another period — other values: each KPI tile is wrapped in `Crossfade state={period}` and flows instead of blinking; a Crossfade right in a `Page.Cell` fills it, so the tiles of a row keep one height.
-- A trend over days is a `Sparkline` in a `Card` in a full-width cell: the last value, the change and a line you can scrub with a finger; a new series appears by itself.
+- A trend over days is a `Sparkline` in a `Card` in a full-width cell: the period's sum (`summary`) and a line you can scrub with a finger; a new series appears by itself.
 - A chart with axes and several series is a `ChartFrame` in `Page.Cell span={8} rows={2}` beside two panels; `ChartFrame.Plot height="fill"` takes their height. A sized plot area (`renderPlot`), a legend that turns series off and a table for screen readers; series colors come from `series`, never your own.
 - Panels are `Card variant="panel"` with `Card.Title as="h2"` in `Card.Header` and quiet context on the right after the title (`caption` + `muted`).
 - Progress of one value is a `ProgressBar` with `label` and `showValue`; parts of a whole are `ProgressBar segments` with `legend` and `formatValue`: statuses are colored by `tone`, categories by `color`.

package/dist/skill/foundations.md

@@ -146,7 +146,7 @@ A chart color does one job, and the job picks the colors:
 | `title-m` | 16/24 600 | page section heading (`Page.Section` draws it), modal title |
 | `title-l` | 18/24 600 | large block title |
 | `heading-s` | 20/28 600 | page sub-heading |
-| `heading-m` | 24/32 600 | the page title in the flow (`Page.Title` of a document page or an overview); in `Page.TopBar` the same `Page.Title` is `title-m` |
+| `heading-m` | 24/32 600 | the page title in the flow (`Page.Title` of a document page); in `Page.TopBar` the same `Page.Title` is `title-m` |
 | `heading-l` | 30/36 600 | marketing / auth title |
 | `display-*` | 36–60 | hero numbers only |
 | `code` | 13/20 mono | identifiers, inline code |

package/dist/skill/layouts.md

@@ -112,8 +112,8 @@ export function OrdersPage() {
 ```
 
 What stands in the bar — the path ending in the title, the tools, every button, the active filters —
-is [the top bar](composition.md#the-top-bar); where the title stands on a document page or an
-overview is [the page skeleton](composition.md#1-page-skeleton).
+is [the top bar](composition.md#the-top-bar); the one exception, a document page with its title in
+the flow, is [the page skeleton](composition.md#1-page-skeleton).
 
 With React Router the frame's `children` is `<Outlet />` and every item is `Sidebar.Item asChild`
 around a `NavLink` ([the router example](reference/layout/sidebar/examples/router.tsx)). The same frame
@@ -152,8 +152,8 @@ shows only icons); none on the children of a sub-list.
 
 ## Page wrapper
 
-- App pages (dashboard, list, detail, a board): `Page.Root` — the full width of the panel; the
-  page's title and tools are in its `Page.TopBar`, its blocks go into `Page.Body`
+- App pages (dashboard, analytics, list, detail, a board): `Page.Root` — the full width of the
+  panel; the page's title and tools are in its `Page.TopBar`, its blocks go into `Page.Body`
   ([the page skeleton](composition.md#1-page-skeleton)).
 - Document pages — settings and long forms: `Page.Root maxWidth="wide"` with `Page.Header` in the
   flow (the page's h1) and a `Card.Root` with its own `Card.Header` per section

package/dist/skill/reference/components/card/COMPONENT.md

@@ -220,7 +220,7 @@ No `labels`.
 | [flat.tsx](examples/flat.tsx) | A flat tile without the raised shadow next to the default one, for dense grids — `flat`. |
 | [states.tsx](examples/states.tsx) | A KPI tile while its report loads next to the loaded one, in the `stat-trend` and `mini` templates — `loading`. |
 | [narrow.tsx](examples/narrow.tsx) | The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem — `variant`. |
-| [screen.tsx](examples/screen.tsx) | A dashboard: the title and a line of data in the page flow, the period switch and the report in the top bar that keeps the title once it scrolls away; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `collapse`, `Page.Grid`. |
+| [screen.tsx](examples/screen.tsx) | A dashboard: the title with a line of data, the period switch and the report in the page's top bar; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `Page.TopBar`, `Page.Grid`. |
 
 ## Mistakes
 - A `<div>` with a border styled as a card → use `Card.Root`; depth comes from fill, not lines.

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

@@ -1,4 +1,4 @@
-/** A dashboard: the title and a line of data in the page flow, the period switch and the report in the top bar that keeps the title once it scrolls away; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `collapse`, `Page.Grid`. */
+/** A dashboard: the title with a line of data, the period switch and the report in the page's top bar; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `Page.TopBar`, `Page.Grid`. */
 import {
   Badge,
   Button,
@@ -157,10 +157,14 @@ export default function CardScreenExample() {
 
   return (
     <Page.Root>
-      {/* An overview: the large title in the flow; the bar keeps the period and the report in
-          reach and repeats the title once it scrolls away. */}
-      <Page.TopBar collapse>
-        <Page.Tools>
+      {/* An overview titles itself in its bar like any work screen: the title with its line of
+          data, the period that drives the tiles, the report. */}
+      <Page.TopBar>
+        <Page.Heading>
+          <Page.Title>Обзор</Page.Title>
+          <Page.Description>Продажи и оплаты · на 8 октября, 9:40</Page.Description>
+        </Page.Heading>
+        <Page.Tools aria-label="Обзор">
           <SegmentedControl.Root
             aria-label="Период"
             value={period}
@@ -180,12 +184,6 @@ export default function CardScreenExample() {
           </Button.Root>
         </Page.Actions>
       </Page.TopBar>
-      <Page.Header>
-        <Page.Heading>
-          <Page.Title>Обзор</Page.Title>
-          <Page.Description>Продажи и оплаты · на 8 октября, 9:40</Page.Description>
-        </Page.Heading>
-      </Page.Header>
       <Page.Body>
         {/* One board: every tile of the screen in one grid, 16 apart on both axes. */}
         <Page.Grid>

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

@@ -29,7 +29,7 @@ ChatList.Root                 <div> column filling its host (container `chat-lis
 │  └─ 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> | your element (asChild); current from value; one Tab stop
-│           ├─ ChatList.ItemIcon         before the name: avatar slot (aria-hidden); after it: a glyph
+│           ├─ ChatList.ItemIcon         before the name: avatar slot (aria-hidden); after it: a glyph (role="img" with aria-label)
 │           ├─ ChatList.ItemText         the name; muted glyph after it
 │           ├─ ChatList.ItemDescription  author · media word · text — cross-fades with draft and «печатает…»
 │           ├─ (meta)                    delivery ticks · time
@@ -89,12 +89,12 @@ ChatList.Root                 <div> column filling its host (container `chat-lis
 | `…rest` | `ButtonHTMLAttributes<HTMLButtonElement>` | — | `className` and the native attributes of the row element. |
 
 ### ChatList.ItemIcon
-`ref` → `HTMLSpanElement`. Before the name: the avatar slot (`aria-hidden`), an `Avatar.Root` sized by the row. After the name: a glyph beside it (verified, bot, group).
+`ref` → `HTMLSpanElement`. Before the name: the avatar slot (`aria-hidden`), an `Avatar.Root` sized by the row. After the name: a glyph beside it (verified, bot, channel type), any kit icon sized by the row; with `aria-label` it is `role="img"` of that name.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | An `Avatar.Root` (with `Avatar.Status`), or after the name an `Icon` with a `label`. |
-| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other `span` attributes. |
+| `children` | `ReactNode` | — (required) | An `Avatar.Root` (with `Avatar.Status`), or after the name an icon: `<Icon name>` or a glyph of `prime-ui-kit/icons` (`<SendIcon />`), as is. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className`, `aria-label` (names a glyph after the name: its channel, «Официальный аккаунт») and the other `span` attributes. |
 
 ### ChatList.ItemText
 `ref` → `HTMLSpanElement`. The name of the dialog: one line, truncated, the glyphs after it kept whole; the search query is marked.
@@ -200,7 +200,7 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 
 - 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`.
+- The row is named by its content: the name, the glyphs (`ChatList.ItemIcon` `aria-label`, «Без звука»), 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 «Черновик: …».
 - A row with a menu has `aria-keyshortcuts="Shift+F10"`; the menu is a `Dropdown` (`menu` / `menuitem`).
 - The search field is `type="search"` named «Поиск по диалогам»; after a search a polite status says «Найдено: 4» or «Ничего не найдено».
@@ -257,6 +257,7 @@ Root attribute: `data-size`. Every motion honours reduced motion (durations coll
 - Filtering inside `renderItem` (returning `null`) → filter `items`: the list counts, announces and glides by `items`.
 - Pinned dialogs mixed into the time order → put them first in `items`; `pinned` only draws the pin.
 - `onValueChange` used to mark a dialog read on focus → arrows only move the focus; mark read when the conversation shows it (`Chat.Messages onRead`) or on open.
+- A glyph after the name cloned with `label` and `size` → put the icon in `ChatList.ItemIcon` as is and name the part with `aria-label`: the row sizes it.
 - 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.

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

@@ -111,13 +111,13 @@ export default function ChatListStructureExample() {
             </ChatList.ItemIcon>
             <ChatList.ItemText>{item.name}</ChatList.ItemText>
             {item.verified ? (
-              <ChatList.ItemIcon>
-                <Icon name="status.success" tone="accent" label="Официальный аккаунт" />
+              <ChatList.ItemIcon aria-label="Официальный аккаунт">
+                <Icon name="status.success" tone="accent" />
               </ChatList.ItemIcon>
             ) : null}
             {item.group ? (
-              <ChatList.ItemIcon>
-                <Icon name="object.users" label="Группа" />
+              <ChatList.ItemIcon aria-label="Группа">
+                <Icon name="object.users" />
               </ChatList.ItemIcon>
             ) : null}
             <ChatList.ItemDescription

package/dist/skill/reference/components/command-menu/COMPONENT.md

@@ -136,7 +136,7 @@ CommandMenu.Root                 Modal + top-aligned palette panel, query and lo
 | `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children` (the title), `className` and the other span attributes. |
 
 ### CommandMenu.Empty
-`ref` → `HTMLDivElement`. A compact EmptyPage (`role="status"`) shown while nothing matches and nothing loads: `labels.empty` and `labels.emptyHint`, text only. An action for the query is a `persistent` `CommandMenu.Item` at the end of the list.
+`ref` → `HTMLDivElement`. A compact EmptyPage (`role="status"`) shown while nothing matches and nothing loads: `labels.empty`, text only. An action for the query is a `persistent` `CommandMenu.Item` at the end of the list.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -236,7 +236,6 @@ One look: the floating layer of the ladder (it is a Modal), `--prime-modal-radiu
 |---|---|---|
 | `search` | `"Поиск"` | Default placeholder and accessible name of `CommandMenu.Input`. |
 | `empty` | `"Ничего не найдено"` | `CommandMenu.Empty`: nothing matches the query. |
-| `emptyHint` | `"Попробуйте изменить запрос"` | Second line of `CommandMenu.Empty`; `""` hides it. |
 | `loading` | `"Загрузка…"` | Announced while `loading` or `loadingMore`. |
 | `retry` | `"Повторить"` | The retry button under `loadError` (`onRetry`). |
 

package/dist/skill/reference/components/command-menu/examples/states.tsx

@@ -46,7 +46,7 @@ export default function CommandMenuStatesExample() {
         onSearchChange={setSearch}
         loading={state === "loading"}
         aria-label="Выбор склада"
-        labels={{ empty: "Склад не найден", emptyHint: "В этом городе склада пока нет" }}
+        labels={{ empty: "В этом городе склада пока нет" }}
       >
         <CommandMenu.Input placeholder="Город склада" />
         <CommandMenu.List>

package/dist/skill/reference/components/composer/COMPONENT.md

@@ -109,7 +109,7 @@ In an optimistic chat the send returns at once: add the message to the list with
 | `defaultRecordMode` | `"voice" \| "video"` | `"voice"` | Initial record mode, uncontrolled. |
 | `onRecordModeChange` | `(mode: "voice" \| "video") => void` | — | A double click / double tap on the record button (or ↑ / ↓ on it) switched voice and video. |
 | `queue` | `Pick<UploadQueue, "items" \| "add" \| "retry" \| "remove" \| "clear" \| "move">` | — | Attachments, usually `useUploadQueue(…)`: the paperclip, a paste and a drop add to it, and a tray above the row shows them as one reorderable strip of tiles. Without `queue` paste and drop of files do nothing. |
-| `formatting` | `boolean` | `true` | Selecting text shows a floating toolbar of seven Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. `false` turns both off. |
+| `formatting` | `boolean` | `true` | Selecting text shows a floating toolbar of eight Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. `false` turns both off. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the field, the buttons and the bar text. Without it the tier of its host, else `m`. |
 | `disabled` | `boolean` | `false` | A closed conversation: the field, the paperclip and the button are disabled; nothing is pasted or dropped. A disabled `Fieldset` around it sets it too (`data-disabled` included). |
 | `inputRef` | `Ref<HTMLTextAreaElement>` | — | The message `<textarea>`: focus it after «Ответить» in a message menu. |
@@ -197,7 +197,7 @@ Composer has no `variant`; what the row shows follows its state.
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `formatting` | a floating toolbar over a selection (bold, italic, strikethrough, code, spoiler, link, quote); Mod-hotkeys | always, unless the chat shows plain text only | `true` |
+| `formatting` | a floating toolbar over a selection (bold, italic, underline, strikethrough, code, spoiler, link, quote); Mod-hotkeys | always, unless the chat shows plain text only | `true` |
 | `disabled` | the field, paperclip and button disabled | a closed conversation, no permission to write | `false` |
 | `queue` | the tray above the field: one strip of tiles — photos, videos and files; paste and drop take files | the chat accepts files | — |
 | `onSendVoice` / `onSendVideoNote` | an empty field offers the record button | the chat takes voice / video messages | — |
@@ -250,7 +250,7 @@ Motion: the tray opens and closes as a Crossfade (fade and height glide, the row
 | `Mod + Enter` | Always sends, on a touch screen too. |
 | `↑` | In an empty field opens your last message for editing (`onEditLast`). |
 | `Escape` | Clears a selection with the toolbar, then cancels the reply or edit; while recording throws the recording away and stops there, so an enclosing Modal or Drawer stays open. |
-| `Mod + B` · `Mod + I` · `Mod + Shift + X` · `Mod + E` · `Mod + Shift + H` · `Mod + K` · `Mod + Shift + 9` | Bold, italic, strikethrough, code, spoiler, link and quote for the selection; the physical key counts, so any layout works. |
+| `Mod + B` · `Mod + I` · `Mod + U` · `Mod + Shift + X` · `Mod + E` · `Mod + Shift + H` · `Mod + K` · `Mod + Shift + 9` | Bold, italic, underline, strikethrough, code, spoiler, link and quote for the selection; the physical key counts, so any layout works. |
 | `Enter` · `Space` | On the record button: record hands-free at once. During a hands-free recording, wherever the focus is in the composer: Enter sends the recording (a paused one too), Space pauses and resumes it — the timer and the waveform stand, the dot turns into a pause glyph. |
 | `↑` · `↓` | On the record button, with voice and video both offered: switches voice and video (`aria-keyshortcuts`, named in the button's description). |
 | `←` · `→` | Move between the formatting buttons. |
@@ -310,6 +310,7 @@ Motion: the tray opens and closes as a Crossfade (fade and height glide, the row
 | `formatting` | `"Форматирование"` | Accessible name of the formatting toolbar. |
 | `bold` | `"Жирный"` | Bold tool. |
 | `italic` | `"Курсив"` | Italic tool. |
+| `underline` | `"Подчёркнутый"` | Underline tool (`__…__`). |
 | `strikethrough` | `"Зачёркнутый"` | Strikethrough tool. |
 | `code` | `"Моноширинный"` | Code tool. |
 | `spoiler` | `"Скрытый текст"` | Spoiler tool (`\|\|…\|\|`). |
@@ -333,7 +334,7 @@ Motion: the tray opens and closes as a Crossfade (fade and height glide, the row
 | [attach-menu.tsx](examples/attach-menu.tsx) | The paperclip as a menu of attachment kinds: photos and videos, documents, any file, and an invoice from the system that puts its link into the message and returns the focus to the field — `Composer.Item`, `Composer.ItemIcon`, `accept`, `onSelect`, `inputRef`. |
 | [reply-edit.tsx](examples/reply-edit.tsx) | Answering a client's message and correcting your own: the bar above the field quotes the message, Escape or the cross cancels, ↑ in an empty field opens your last message, send becomes save and hands over the message id — `Composer.Context`, `mode`, `messageId`, `onDismiss`, `onEditLast`. |
 | [typing.tsx](examples/typing.tsx) | The other side's status line follows what you do: typing, recording a voice or a video message, then nothing — `onActivityChange`. |
-| [formatting.tsx](examples/formatting.tsx) | Selected text gets a toolbar of bold, italic, strikethrough, code, spoiler, link and quote, each with its shortcut, written as Markdown around the selection — `formatting`. |
+| [formatting.tsx](examples/formatting.tsx) | Selected text gets a toolbar of bold, italic, underline, strikethrough, code, spoiler, link and quote, each with its shortcut, written as Markdown around the selection — `formatting`. |
 | [voice.tsx](examples/voice.tsx) | Voice and round video messages: hold the button to record and release to send, slide left to cancel, slide up or tap to record hands-free; a double tap or double click switches voice and video — `onSendVoice`, `onSendVideoNote`, `recordMode`. |
 | [bot-keyboard.tsx](examples/bot-keyboard.tsx) | A bot's reply keyboard under the field: a key sends its text as a message, the field asks for a key, the keyboard hides after use and the toggle brings it back — `Composer.Keyboard`, `rows`, `placeholder`, `oneTime`. |
 | [states.tsx](examples/states.tsx) | A closed conversation is disabled, a slow send keeps the text with a busy button until the server answers — `disabled`, `onSend`. |

package/dist/skill/reference/components/composer/examples/formatting.tsx

@@ -1,4 +1,4 @@
-/** Selected text gets a toolbar of bold, italic, strikethrough, code, spoiler, link and quote, each with its shortcut, written as Markdown around the selection — `formatting`. */
+/** Selected text gets a toolbar of bold, italic, underline, strikethrough, code, spoiler, link and quote, each with its shortcut, written as Markdown around the selection — `formatting`. */
 import { Composer } from "prime-ui-kit";
 
 import styles from "./examples.module.css";