prime-ui-kit 0.21.2 → 0.21.4

package/src/components/sparkline/examples/own-value.tsx

@@ -0,0 +1,41 @@
+/** Unique clients in dialogs: the period's own count is neither the sum nor the mean of the days, so the card passes it with the previous period's count — `value`, `compareTo`. */
+import { Card, Sparkline, type SparklinePoint } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Clients who wrote each day, 2 — 15 October 2026; one client writes on many days. */
+const CLIENTS_BY_DAY: SparklinePoint[] = [
+  { label: "2 окт", value: 184 },
+  { label: "3 окт", value: 201 },
+  { label: "4 окт", value: 146 },
+  { label: "5 окт", value: 132 },
+  { label: "6 окт", value: 218 },
+  { label: "7 окт", value: 226 },
+  { label: "8 окт", value: 209 },
+  { label: "9 окт", value: 231 },
+  { label: "10 окт", value: 240 },
+  { label: "11 окт", value: 158 },
+  { label: "12 окт", value: 141 },
+  { label: "13 окт", value: 237 },
+  { label: "14 окт", value: 252 },
+  { label: "15 окт", value: 244 },
+];
+
+/** Unique clients over the period and over the 14 days before. */
+const UNIQUE_CLIENTS = 1_386;
+const PREVIOUS_UNIQUE_CLIENTS = 1_270;
+
+export default function SparklineOwnValueExample() {
+  return (
+    <Card.Root className={styles.card}>
+      <Card.Body>
+        <Sparkline
+          data={CLIENTS_BY_DAY}
+          label="Клиенты в диалогах"
+          value={UNIQUE_CLIENTS}
+          compareTo={PREVIOUS_UNIQUE_CLIENTS}
+        />
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/src/components/sparkline/examples/reference.tsx

@@ -1,4 +1,4 @@
-/** Checkout conversion against its plan: a dashed reference line, the scale from zero to 5% and the change over the whole period — `reference`, `min`, `max`, `change`. */
+/** Checkout conversion against its plan: a dashed reference line, the scale from zero to 5% and the change over the whole period in percentage points — `reference`, `min`, `max`, `change`, `changeUnit`. */
 import { Card, Sparkline, type SparklinePoint } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -29,6 +29,7 @@ export default function SparklineReferenceExample() {
           min={0}
           max={5}
           change="first"
+          changeUnit="points"
           formatValue={formatPercent}
           labels={{ reference: "План: {value}" }}
         />

package/src/components/tabs/COMPONENT.md

@@ -199,7 +199,7 @@ Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-
 
 ## Layout & spacing
 - Tabs are a bar, not a surface: the root has no fill, padding, radius or `data-depth`. On a page or in a `Card.Body`, put it straight into the host's padded region and the panel content straight into `Tabs.Panel`. The strip's edges and the panel content share the host's content edge; the panel stands one tier gap below the strip (`--prime-space-3` … `--prime-space-8`).
-- In a Modal or Drawer the tabs belong to the header: `Tabs.Root` wraps `X.Header` and `X.Body`, `Tabs.List` goes last into the header, the panels into the body. The header becomes the strip (painted like it, no hairline, edge to edge — the header hands the bar its side padding as `--prime-bleed-inline`), the active tab is the body rising into it, and the root renders no box (`display: contents`), so only the body scrolls and the tabs stay in view.
+- In a Modal or Drawer the tabs belong to the header: `Tabs.Root` wraps `X.Header` and `X.Body`, `Tabs.List` goes last into the header, the panels into the body. The header becomes the strip (painted like it, no hairline, edge to edge — the header hands the bar its side padding as `--prime-bleed-inline`), the active tab is the body rising into it, and the root renders no box (`display: contents`), so only the body scrolls and the tabs stay in view. A panel in the body stands its blocks 32 apart — the step between the body's sections — so a tab of self-titled blocks (charts, titled cards) or of `X.Section`s needs no spacing wrapper.
 
 ```tsx
 <Drawer.Content>

package/src/components/tabs/examples/orientation.tsx

@@ -38,7 +38,7 @@ export default function TabsOrientationExample() {
         <div className={styles.form}>
           <Input.Root label="Имя и фамилия">
             <Input.Wrapper>
-              <Input.Field defaultValue="Анна Смирнова" autoComplete="name" />
+              <Input.Field defaultValue="Анна Смирнова" />
             </Input.Wrapper>
           </Input.Root>
           <Input.Root label="Должность">

package/src/components/tag-select/COMPONENT.md

@@ -30,7 +30,6 @@ TagSelect                       field frame: label · control · hint/error (sin
 │   ├── input[type=hidden] × value   with `name`
 │   └── chevron
 └── list (portal)               role="listbox", multi-select
-    ├── panel hint              labels.panelHint (`""` hides it)
     ├── «Создать» row           with `creatable`: plus icon · labels.create · preview Badge
     └── option row              Checkbox.Indicator · Badge [· «⋯» Button → Popover menu]; picked options first
 ```
@@ -150,7 +149,6 @@ No `variant` or `tone`. The control is the field look; chips are the kit's soft
 
 | Key | Default | Used for |
 |---|---|---|
-| `panelHint` | `"Выберите вариант или создайте новый"` | Line above the list; `""` hides it. |
 | `create` | `"Создать"` | Action text before the preview of a new tag. |
 | `remove` | `"Удалить {label}"` | Accessible name of a chip's remove button; `{label}` is the tag text. |
 | `more` | `"Показать ещё {count}"` | Accessible name of the «+N» chip; `{count}` is the number of hidden tags. |

package/src/components/tag-select/examples/overview.tsx

@@ -15,7 +15,6 @@ export default function TagSelectOverviewExample() {
       options={OPTIONS}
       defaultValue={["design"]}
       placeholder="Добавить метку"
-      labels={{ panelHint: "Выберите метку" }}
     />
   );
 }

package/src/components/tag-select/examples/sizes.tsx

@@ -19,7 +19,6 @@ export default function TagSelectSizesExample() {
           label={size}
           options={OPTIONS}
           defaultValue={["design", "backend"]}
-          labels={{ panelHint: "Выберите метку" }}
         />
       ))}
     </div>

package/src/components/textarea/COMPONENT.md

@@ -59,7 +59,8 @@ Unlike Input, Textarea has no Wrapper / Field parts: `Textarea.Root` renders the
 | `id` | `string` | — | Id of the `<textarea>` (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
 | `aria-describedby` | `string` | — | Merged before the hint/error ids. |
 | `onCommit` | `(value: string) => void \| Promise<void>` | — | Inline save: fires with a changed value on blur and Mod+Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`. |
-| `formatting` | `boolean` | `false` | Selecting text shows a floating toolbar of seven Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. Off: plain text. |
+| `formatting` | `boolean` | `false` | Selecting text shows a floating toolbar of eight Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. Off: plain text. |
+| `autoComplete` | `string` | `"off"` with the password-manager opt-outs; inside `LoginForm.Form`, left to the browser | A token opts in to autofill and drops the password-manager opt-outs; without one the field stays off. Pass one only on sign-in and sign-up fields and for a new password (`new-password`). |
 | `children` | `ReactNode` | — | Actions in the field's top end corner: `Textarea.CopyButton`, `Textarea.Action`. |
 | `labels` | `Partial<TextareaLabels>` | — | Built-in strings, see Labels. |
 | `className` | `string` | — | Class on the field frame `<div>` (label, field box, support row), as on every field root. |
@@ -116,7 +117,7 @@ Textarea has no `variant` or `tone`: one field treatment (fill, no visible borde
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `focusRing` | `false`: no focus ring; focus fill and caret remain | A single composer field where focus is obvious | `true` |
-| `formatting` | A floating toolbar over a selection (bold, italic, strikethrough, code, spoiler, link, quote) and the Mod-hotkeys; each writes Markdown around the selection | The text is shown later with its Markdown (Message renders the same subset) | `false` |
+| `formatting` | A floating toolbar over a selection (bold, italic, underline, strikethrough, code, spoiler, link, quote) and the Mod-hotkeys; each writes Markdown around the selection | The text is shown later with its Markdown (Message renders the same subset) | `false` |
 | `reserveSupportRow` | Empty support row of hint height | Live validation, fields side by side | `false` |
 | `required` / `optional` | Red `*` / muted «необязательно» after the label | Mark the minority of the form | — / `false` |
 
@@ -164,7 +165,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 | `Tab` | Focuses the field, then the buttons in its corner; Enter inserts a line break instead of submitting the form. |
 | `Mod+Enter` | With `onCommit`: saves a changed text; focus stays in the field. |
 | `Escape` | With `formatting`: first clears a selection with the toolbar. With `onCommit`: puts the committed text back. |
-| `Mod + B` · `Mod + I` · `Mod + Shift + X` · `Mod + E` · `Mod + Shift + H` · `Mod + K` · `Mod + Shift + 9` | With `formatting`: 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` | With `formatting`: bold, italic, underline, strikethrough, code, spoiler, link and quote for the selection; the physical key counts, so any layout works. |
 | `←` · `→` | Move between the formatting buttons. |
 | `Home` · `End` | Jump to the first / last formatting button. |
 
@@ -194,6 +195,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 | `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 (`\|\|…\|\|`). |
@@ -225,6 +227,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 - A copy `Button` under a read-only result → `Textarea.CopyButton` as a child of the root.
 - Other children than `Textarea.CopyButton` / `Textarea.Action` → the root renders the textarea itself; children are only the corner actions.
 - `formatting` on text that is shown as plain text → the reader sees `**` and `||`; turn it on only where the text is rendered with its Markdown.
+- Expecting the browser to offer saved addresses in a note → autofill is off unless you pass `autoComplete` (a token such as `street-address` opts in).
 
 ## Related
 - **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (corner actions, formatting tools), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [Button](../button/COMPONENT.md) and [Kbd](../kbd/COMPONENT.md) (formatting tools), Icon (`format.*`); `internal/textFormatting` + `internal/textFormattingToolbar` (the formatting shared with Composer), [VisuallyHidden](../visually-hidden/COMPONENT.md)

package/src/layout/page/COMPONENT.md

@@ -9,8 +9,8 @@
 - Every route rendered inside `AppShell.Main`: the app is navigation and the page, and the page carries its own top (`Page.TopBar`), title (`Page.Title`, the `<h1>`) and body.
 - A work screen (a list, a board, a chat, a schedule): `Page.TopBar` with the title (`Page.Heading`), the page's tools (`Page.Tools`: sections, search and filter, view), all its buttons (`Page.Actions`) and the active filters (`Page.Chips`).
 - A filter stands next to what it filters. `Page.Tools` holds what acts on the whole page: sections, the view, a period that drives several blocks (the KPI cards and the table), and a search and filter only when it narrows several views of one set (a board and its list). A table's search, filter, chips, «Колонки» and selection menu always belong to its own tools row (DataTable `toolbar` + `toolbarChips`), on a page that is only the table too.
-- A section with sub-pages (the «Мессенджеры» item of the Sidebar with «Каналы» and «Статистика»): each sub-page is a route of its own, `Page.Title` stays the section's name, and the switch is a `SegmentedControl` of links (`SegmentedControl.Item asChild`) in `Page.Tools`; the body is the current sub-page. The Sidebar keeps the section's item current on every sub-route — a router `NavLink` to the section's path without `end`, or `current={pathname.startsWith("/messengers")}`.
-- A document page (settings, a long form, help) or an overview (a dashboard): `Page.Header` in the flow — the large title and its buttons — and `Page.TopBar collapse`, which repeats the title once it scrolls away and keeps the path and the buttons in reach.
+- A section with sub-pages (the «Мессенджеры» item of the Sidebar with «Каналы», «Шаблоны» and «Статистика»): each sub-page is a route of its own, `Page.Title` stays the section's name, and the switch is a `SegmentedControl` of links (`SegmentedControl.Item asChild`) in `Page.Tools`, on a line of its own under the title at the start (see Top bar plan), so it stays put while each sub-page brings its own `Page.Actions` or none; the body is the current sub-page. The Sidebar keeps the section's item current on every sub-route — a router `NavLink` to the section's path without `end`, or `current={pathname.startsWith("/messengers")}`.
+- A document page (settings, a long form, help) read top to bottom with no page tools: `Page.Header` in the flow — the large title and its buttons — and `Page.TopBar collapse` with the path in its `Page.Heading`, which repeats the title once it scrolls away. A dashboard or an analytics page titles itself in `Page.TopBar` like a list.
 - A nested record: a `Breadcrumb` path in `Page.Heading`; in the bar the title reads as its last level.
 - A text page held to a reading measure (`maxWidth="readable"`), a wide dashboard capped at the content width (`maxWidth="wide"`).
 - The tiles of a dashboard — KPI cards, charts, panels — as one board (`Page.Grid` + `Page.Cell`).
@@ -94,7 +94,7 @@ Page.Root                          the page column (<div>); maxWidth, fill, labe
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children` (`Page.Heading`, `Page.Tools`, `Page.Actions`, `Page.Chips` — direct children), `className` and the other attributes. |
 
 ### Page.Header
-`ref` → `HTMLDivElement`. The document header in the page flow (settings, long forms, overviews): a `Page.Heading` and its `Page.Actions` in one row; the actions wrap under it on a narrow column.
+`ref` → `HTMLDivElement`. The document header in the page flow (settings, long forms): a `Page.Heading` and its `Page.Actions` in one row; the actions wrap under it on a narrow column.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -123,7 +123,7 @@ Page.Root                          the page column (<div>); maxWidth, fill, labe
 | `…rest` | `HTMLAttributes<HTMLParagraphElement>` | — | `children`, `className` and the other paragraph attributes. |
 
 ### Page.Tools
-`ref` → `HTMLDivElement`. What acts on the whole page: sections (route links of sub-pages), view, a shared period; a filter only over several views — a table's go in its `toolbar`. The DataTable tool row: a search takes the free room, the rest keep their width. Named, a `group`.
+`ref` → `HTMLDivElement`. What acts on the whole page: sub-page links, view, a shared period, a filter over several views (a table's tools go in its `toolbar`). Sub-page links take a line of their own at the start. Named, a `group`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -226,8 +226,8 @@ No DOM, no ref. Holds the page from anywhere inside it: a press on a `Sidebar.It
 ### Place of Page.Heading
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| in `Page.TopBar` | one line as high as the Sidebar brand row: path › title-m, the caption description under the whole line; both truncate | work screens: lists, boards, chats, records | |
-| in `Page.Header` in the flow | the large document header: path over a heading-m title, body-m description, the header's `Page.Actions` beside it, wrapping under it | document pages and overviews | |
+| in `Page.TopBar` | one line as high as the Sidebar brand row: path › title-m, the caption description under the whole line; both truncate | screens of data: lists, boards, chats, records, dashboards and analytics | |
+| in `Page.Header` in the flow | the large document header: path over a heading-m title, body-m description, the header's `Page.Actions` beside it, wrapping under it | document pages with no page tools: settings, long forms, help | |
 
 The size follows the place; the consumer passes nothing, and there are no title size props. One `Page.Title` (`<h1>`) per page, in one of the two places. A bar with no visible title still holds the `<h1>`: a `Page.Title` wrapped in `VisuallyHidden`, or a flow `Page.Title` (with `collapse` the bar repeats it).
 
@@ -236,7 +236,7 @@ The size follows the place; the consumer passes nothing, and there are no title
 |---|---|---|---|
 | `fill` (Root) | the page is as high as main; the body takes what the bar and the header leave; main keeps gutter-high air under it | a full-height table, board, chat or `Page.Split` in an `AppShell.Root fillViewport` | `false` |
 | `sticky` (TopBar) | the bar stays at the top of main while the page scrolls under it | every page; `false` for a bar that should scroll away | `true` |
-| `collapse` (TopBar) | the flow title rises into the bar's title row once it scrolls away | a document page or an overview with the title in the flow | `false` |
+| `collapse` (TopBar) | the flow title rises into the bar's title row once it scrolls away | a document page with the path in the bar and the title in the flow | `false` |
 | `dirty` (Guard) | nothing until a person leaves: a press on the navigation or the path asks «leave without saving?» | a form that is the page has unsaved changes | `false` |
 | `busy` (Guard) | nothing until a person leaves: a press on the navigation or the path does nothing | the page's save request runs | `false` |
 
@@ -245,13 +245,13 @@ One plan, chosen from the natural widths of the groups (`data-plan` on the bar's
 
 | Step | Looks like | Use when | Default |
 |---|---|---|---|
-| `one` | `[Heading 1fr][Tools][Actions]` on one line | everything fits | yes |
-| `below` | the tools on a line of their own under the heading and the actions — the one tool row, as the DataTable `toolbar`: a search (`SmartFilter.Toolbar`, `Input.Root`) takes the free room, switchers, pickers and buttons keep their width at the end; under 36rem the search takes a line of its own and a `SegmentedControl.Root` / `Datepicker.Root` / Select fills the line it stands on | heading + tools + actions do not fit | |
+| `one` | `[Heading 1fr][Tools][Actions]` on one line | everything fits, and the tools hold no navigation | yes |
+| `below` | the tools on a line of their own under the heading and the actions — the one tool row, as the DataTable `toolbar`: a search (`SmartFilter.Toolbar`, `Input.Root`) takes the free room, switchers, pickers and buttons keep their width at the end; under 36rem the search takes a line of its own and a `SegmentedControl.Root` / `Datepicker.Root` / Select fills the line it stands on | heading + tools + actions do not fit; always for a section's sub-pages (the tools hold a navigation — a `SegmentedControl` of links), gathered at the start | |
 | `icons-secondary` | as `below`; secondary Buttons with a `Button.Icon` show only the icon, the label is their name and their tooltip | heading + actions still do not fit | |
 | `icons` | the primary Button gives way to its icon too | still too wide | |
 | `fold` | the secondary Buttons fold into «⋯» (`labels.more`); the primary stays | still too wide, and «⋯» is narrower than their icons (a single secondary keeps its icon); past it a Breadcrumb path folds into «…»; if the path and the title still do not share the line, the heading stacks: the path on its own line over the title, the title and the description wrapping (`data-heading="stack"`); a heading without a path truncates | |
 
-The actions stay on the first line beside the heading at every step; `Page.Chips` is always a line under everything; nothing overflows. The primary is the first solid `Button.Root`; a Button without an icon keeps its label at every step; anything that is not a `Button.Root` stays as it is.
+A section's sub-pages never share the first line: there they would stand where each sub-page's own heading and actions leave room, and those differ («Подключить канал» on one, none on another), so the switch would move under the pointer. On a line of their own at the start they stand at one place on every sub-page and at every width. The actions stay on the first line beside the heading at every step; `Page.Chips` is always a line under everything; nothing overflows. The primary is the first solid `Button.Root`; a Button without an icon keeps its label at every step; anything that is not a `Button.Root` stays as it is.
 
 ### Grid columns
 | Grid width | Cell `span` 1–3 | `span` 4 | `span` 5–6 | `span` 7–12 | `rows` |
@@ -342,9 +342,9 @@ A wide cell (`span` 7–11) written next to a narrow one (`span` 4–5) is a pai
 | [structure.tsx](examples/structure.tsx) | A document page in the flow: the path over the large title, its line of data and the page's buttons beside them, then the body with a section — `Page.Header`, `Page.Heading`, `Page.Description`, `Page.Section`. |
 | [top-bar.tsx](examples/top-bar.tsx) | A nested record in the top bar: the path ending in the title, a line of data, the page's tools and its buttons — `Page.TopBar`, `Page.Heading`, `Page.Tools`, `Page.Actions`. |
 | [loading.tsx](examples/loading.tsx) | A page whose figures load after it opens: the line of data keeps its place under the title while it loads, so nothing in the bar moves — `loading`. |
-| [collapse.tsx](examples/collapse.tsx) | An overview whose large title scrolls away under the top bar: the bar repeats it with its line of data and keeps the period and the page's buttons in reach — `collapse`. |
+| [collapse.tsx](examples/collapse.tsx) | A document page whose large title scrolls away under the top bar: the bar holds the path and repeats the title after it once the title is out of view — `collapse`, `Page.Header`. |
 | [tools.tsx](examples/tools.tsx) | The orders page's tools in its top bar: sections with counts, the search and filter that narrow both views, the view, in the order written; the active filters on a line under everything — `Page.Tools`, `Page.Chips`. |
-| [router.tsx](examples/router.tsx) | A section with sub-pages: the title is the section, each sub-page is a route of its own, the switch in the bar is their links and the body cross-fades between them; render it inside a router — `Page.Tools`, `asChild`. |
+| [router.tsx](examples/router.tsx) | A section with sub-pages: the title is the section, each sub-page is a route of its own with its own actions, the switch in the bar is their links on a line of their own and the body cross-fades between them; render it inside a router — `Page.Tools`, `asChild`. |
 | [actions-collapse.tsx](examples/actions-collapse.tsx) | The buttons of an invoices page on a tablet-wide column: the line runs short, so the secondary buttons show only their icons with the label as the name and the tooltip, the primary keeps its label — `Page.Actions`, `Button.Icon`. |
 | [sections.tsx](examples/sections.tsx) | A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading — `Page.Section`, `label`, `description`, `Page.Actions`. |
 | [grid.tsx](examples/grid.tsx) | A dashboard board: four KPI tiles, a chart two rows high beside two panels, one gap on both axes — `Page.Grid`, `Page.Cell`, `span`, `rows`. |
@@ -365,6 +365,7 @@ A wide cell (`span` 7–11) written next to a narrow one (`span` 4–5) is a pai
 - `SmartFilter.Root` inside the bar, around `Page.Tools` → it holds no DOM; wrap it around `Page.Root` so its Toolbar (in `Page.Tools`) and its Chips (in `Page.Chips`) share it.
 - A table's search, filter, chips or «Колонки» in `Page.Tools` / `Page.Chips` → they read as filters of the whole page and move when the page grows a block; they go in the table's `toolbar` / `toolbarChips` on every page, the one that is only the table too. The bar keeps the title, sections, the view, a period that drives every block and the page's buttons.
 - Sub-pages of a section as a second Sidebar level, a tab strip inside `Page.Body`, or a title that names the sub-page → the title stays the section, the sub-pages are route links in `Page.Tools` (`SegmentedControl.Item asChild`), and the section's Sidebar item stays current on every sub-route.
+- A dashboard or analytics page with a bar of tools only (`collapse`) over a large title in the flow → the title and its line of data go in the bar's `Page.Heading` beside the tools, as on a list; the flow header is for document pages.
 - `Page.Header` inside `Page.TopBar` → the bar takes `Page.Heading` and `Page.Actions` directly; `Page.Header` is the flow's document header.
 - A hand-made menu button for the phone Sidebar → the bar draws it while the Sidebar is off-canvas.
 - Hiding buttons with media queries on a phone → `Page.Actions` in the bar collapses and folds them by measured width.

package/src/layout/page/examples/collapse.tsx

@@ -1,60 +1,74 @@
-/** An overview whose large title scrolls away under the top bar: the bar repeats it with its line of data and keeps the period and the page's buttons in reach — `collapse`. */
-import { AppShell, Button, Card, Icon, Page, SegmentedControl, Typography } from "prime-ui-kit";
-import * as React from "react";
+/** A document page whose large title scrolls away under the top bar: the bar holds the path and repeats the title after it once the title is out of view — `collapse`, `Page.Header`. */
+import { AppShell, Breadcrumb, Button, Card, Icon, Page, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-const WEEKS = [
+const SECTIONS = [
   {
-    id: "w41",
-    title: "6–12 октября",
-    text: "Выручка 1,2 млн ₽, 312 заказов, средний чек 3 850 ₽.",
+    id: "terms",
+    title: "Сроки",
+    text: "Клиент может вернуть заказ в течение 14 дней после получения. Срок считается от даты в акте приёмки.",
+  },
+  {
+    id: "condition",
+    title: "Состояние товара",
+    text: "Товар принимается в заводской упаковке, без следов использования, с ярлыками и полным комплектом.",
+  },
+  {
+    id: "refund",
+    title: "Возврат денег",
+    text: "Деньги возвращаются тем же способом, которым был оплачен заказ, в течение 10 рабочих дней после проверки.",
+  },
+  {
+    id: "delivery",
+    title: "Доставка при возврате",
+    text: "Если товар с браком, доставку оплачивает магазин. В остальных случаях — клиент по тарифу службы доставки.",
+  },
+  {
+    id: "exceptions",
+    title: "Исключения",
+    text: "Не возвращаются товары, изготовленные по индивидуальному заказу, и цифровые лицензии после активации.",
   },
-  { id: "w40", title: "29 сентября – 5 октября", text: "Выручка 1,1 млн ₽, 298 заказов." },
-  { id: "w39", title: "22–28 сентября", text: "Выручка 0,9 млн ₽, 264 заказа." },
-  { id: "w38", title: "15–21 сентября", text: "Выручка 1,0 млн ₽, 281 заказ." },
-  { id: "w37", title: "8–14 сентября", text: "Выручка 0,8 млн ₽, 240 заказов." },
 ];
 
 export default function PageCollapseExample() {
-  const [period, setPeriod] = React.useState("week");
-
   return (
     <div className={`${styles.window} ${styles.tall}`}>
       <AppShell.Root fillViewport className={styles.shell}>
         <AppShell.Main>
-          <Page.Root>
+          <Page.Root maxWidth="readable">
             <Page.TopBar collapse>
-              <Page.Tools aria-label="Продажи">
-                <SegmentedControl.Root value={period} onValueChange={setPeriod} aria-label="Период">
-                  <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-                  <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-                </SegmentedControl.Root>
-              </Page.Tools>
+              <Page.Heading>
+                <Breadcrumb.Root>
+                  <Breadcrumb.Item href="#documents">Документы</Breadcrumb.Item>
+                </Breadcrumb.Root>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Header>
+              <Page.Heading>
+                <Page.Title>Политика возвратов</Page.Title>
+                <Page.Description>
+                  Действует с 1 сентября для всех заказов магазина.
+                </Page.Description>
+              </Page.Heading>
               <Page.Actions>
                 <Button.Root variant="soft" tone="neutral">
                   <Button.Icon>
                     <Icon name="action.download" />
                   </Button.Icon>
-                  Отчёт
+                  Скачать PDF
                 </Button.Root>
               </Page.Actions>
-            </Page.TopBar>
-            <Page.Header>
-              <Page.Heading>
-                <Page.Title>Продажи</Page.Title>
-                <Page.Description>Интернет-магазин · на 14 октября, 9:40</Page.Description>
-              </Page.Heading>
             </Page.Header>
             <Page.Body>
-              {WEEKS.map((week) => (
-                <Card.Root key={week.id} variant="panel">
+              {SECTIONS.map((section) => (
+                <Card.Root key={section.id} variant="panel">
                   <Card.Header>
-                    <Card.Title as="h2">{week.title}</Card.Title>
+                    <Card.Title as="h2">{section.title}</Card.Title>
                   </Card.Header>
                   <Card.Body>
                     <Typography variant="body-m" tone="secondary">
-                      {week.text}
+                      {section.text}
                     </Typography>
                   </Card.Body>
                 </Card.Root>

package/src/layout/page/examples/router.tsx

@@ -1,4 +1,4 @@
-/** A section with sub-pages: the title is the section, each sub-page is a route of its own, the switch in the bar is their links and the body cross-fades between them; render it inside a router — `Page.Tools`, `asChild`. */
+/** A section with sub-pages: the title is the section, each sub-page is a route of its own with its own actions, the switch in the bar is their links on a line of their own and the body cross-fades between them; render it inside a router — `Page.Tools`, `asChild`. */
 import {
   Button,
   Card,
@@ -12,10 +12,13 @@ import {
 import { Link, Route, Routes, useLocation } from "react-router-dom";
 
 type Channel = { id: string; name: string; dialogs: number; reply: string };
+type Template = { id: string; name: string; uses: number };
 
+// The action of each sub-page: its own label, none on the statistics.
 const SUB_PAGES = [
-  { to: "/messengers/channels", label: "Каналы" },
-  { to: "/messengers/stats", label: "Статистика" },
+  { to: "/messengers/channels", label: "Каналы", action: "Подключить канал" },
+  { to: "/messengers/templates", label: "Шаблоны", action: "Новый шаблон" },
+  { to: "/messengers/stats", label: "Статистика", action: null },
 ];
 
 const CHANNELS: Channel[] = [
@@ -25,6 +28,23 @@ const CHANNELS: Channel[] = [
   { id: "avito", name: "Авито · Склад на Южной", dialogs: 59, reply: "25 мин" },
 ];
 
+const TEMPLATES: Template[] = [
+  { id: "greeting", name: "Приветствие в рабочее время", uses: 812 },
+  { id: "night", name: "Ответ ночью", uses: 264 },
+  { id: "delivery", name: "Сроки доставки", uses: 151 },
+];
+
+const TEMPLATE_COLUMNS: DataTableColumn<Template>[] = [
+  { id: "name", header: "Шаблон", cell: (row) => row.name },
+  {
+    id: "uses",
+    header: "Отправок",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => row.uses,
+  },
+];
+
 const COLUMNS: DataTableColumn<Channel>[] = [
   { id: "name", header: "Канал", cell: (row) => row.name },
   {
@@ -46,7 +66,7 @@ const COLUMNS: DataTableColumn<Channel>[] = [
 export default function PageRouterExample() {
   const location = useLocation();
   // The first sub-page answers every other path of the section (here the preview's «/»).
-  const current = SUB_PAGES.find((page) => page.to === location.pathname)?.to ?? SUB_PAGES[0].to;
+  const current = SUB_PAGES.find((page) => page.to === location.pathname) ?? SUB_PAGES[0];
 
   return (
     <Page.Root>
@@ -56,7 +76,7 @@ export default function PageRouterExample() {
           <Page.Description>4 канала · 1 280 диалогов за октябрь</Page.Description>
         </Page.Heading>
         <Page.Tools aria-label="Мессенджеры">
-          <SegmentedControl.Root value={current} aria-label="Подразделы">
+          <SegmentedControl.Root value={current.to} aria-label="Подразделы">
             {SUB_PAGES.map((page) => (
               <SegmentedControl.Item key={page.to} value={page.to} asChild>
                 <Link to={page.to}>{page.label}</Link>
@@ -64,18 +84,20 @@ export default function PageRouterExample() {
             ))}
           </SegmentedControl.Root>
         </Page.Tools>
-        <Page.Actions>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Подключить канал
-          </Button.Root>
-        </Page.Actions>
+        {current.action ? (
+          <Page.Actions>
+            <Button.Root>
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              {current.action}
+            </Button.Root>
+          </Page.Actions>
+        ) : null}
       </Page.TopBar>
       <Page.Body>
         {/* `location` keeps the leaving sub-page on its own route while it fades out. */}
-        <Crossfade state={current}>
+        <Crossfade state={current.to}>
           <Routes location={location}>
             <Route
               path="/messengers/stats"
@@ -105,6 +127,17 @@ export default function PageRouterExample() {
                 </Page.Grid>
               }
             />
+            <Route
+              path="/messengers/templates"
+              element={
+                <DataTable
+                  columns={TEMPLATE_COLUMNS}
+                  rows={TEMPLATES}
+                  getRowKey={(row) => row.id}
+                  paging="none"
+                />
+              }
+            />
             <Route
               path="*"
               element={