prime-ui-kit 0.21.0 → 0.21.2

package/dist/index.js

@@ -88,7 +88,7 @@ import {
   useSidebar,
   useTokenValue,
   useUploadQueue
-} from "./chunks/chunk-S4H2ZKWJ.js";
+} from "./chunks/chunk-ME4VEAQ5.js";
 import {
   Avatar,
   Badge,
@@ -123,11 +123,11 @@ import {
   tierMappings,
   tones,
   variants
-} from "./chunks/chunk-S27VR4ON.js";
+} from "./chunks/chunk-7JYPFRZ3.js";
 import {
   ControlSizeProvider,
   useOptionalControlSize
-} from "./chunks/chunk-QFHE5GKW.js";
+} from "./chunks/chunk-T7IEJSTH.js";
 export {
   Accordion,
   AppShell,

package/dist/internal/overlay/DialogParts.d.ts

@@ -214,7 +214,7 @@ export declare namespace DialogActions {
 export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
-/** The only scrolling zone; header and footer stay put. */
+/** The only scrolling zone; header and footer stay put. An open layer: its end never scrolls the page. */
 export declare function DialogBody({ className, ...rest }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogBody {
     var displayName: string;

package/dist/internal/selectionIndicator.d.ts

@@ -12,11 +12,17 @@ export declare function setFlag(element: HTMLElement, name: `data-${string}`, on
 /**
  * Places the indicator over `target` — its offset box in the parent they share — straight in the
  * DOM, so a resize or a font swap never re-renders the host. With `animate` (a person's choice) a
- * move of a visible indicator glides; every other placement snaps. Without a target the
- * indicator fades out.
+ * move of a visible indicator glides, and an indicator that appears or leaves fades
+ * (`data-fade`); every other placement snaps, and its first one shows it at once: a fade on mount
+ * would leave the selected item without its fill while the host opens (a Drawer sliding in), and
+ * an opacity transition makes the indicator a composited layer that browsers paint over the
+ * item's text inside the row's edge-fade mask until it ends.
  */
 export declare function placeIndicator(indicator: HTMLElement, target: HTMLElement | null, animate: boolean): void;
-/** `onTransitionEnd` of the indicator: the glide is over, so the next layout change snaps. */
+/**
+ * `onTransitionEnd` of the indicator: the glide or the fade is over, so the next layout change
+ * snaps.
+ */
 export declare function endIndicatorGlide(event: Pick<React.TransitionEvent<HTMLElement>, "target" | "currentTarget" | "propertyName">): void;
 /**
  * Scrolls a sideways scroller (never the page: `scrollIntoView` would scroll it too) so `item` is

package/dist/layout/page/Page.d.ts

@@ -128,7 +128,7 @@ declare namespace PageActions {
 }
 export type PageToolsProps = DivProps;
 /**
- * The page's tools — sections, search and filter, view — as kit controls in the order written, laid
+ * The page's tools — sections, view, a shared period, a filter over several views — as kit controls in the order written, laid
  * out by the one tool row (`ToolRow`, as the DataTable `toolbar`). On the bar's first line each keeps
  * its natural width; on a line of their own a search takes the free room, switchers and pickers
  * keep their width at the end (a `SegmentedControl.Root` and a `Datepicker.Root` are `fullWidth`

package/dist/skill/api-contract.md

@@ -377,7 +377,7 @@ crumb of your own.
 <!-- icons:start -->
 `<Icon name="…" />` names:
 - `nav.*`: `chevronDown`, `chevronLeft`, `chevronRight`, `chevronUp`, `chevronsLeft`, `chevronsUpDown`, `dashboard`, `home`, `itemDot`, `layoutGrid`, `menu`, `sidebarCollapse`, `sidebarExpand`;
-- `action.*`: `add`, `addContact`, `attach`, `check`, `close`, `copy`, `delete`, `download`, `drag`, `edit`, `externalLink`, `eyedropper`, `filter`, `forward`, `login`, `logout`, `more`, `pause`, `pin`, `play`, `react`, `refresh`, `report`, `remove`, `reply`, `search`, `send`, `settings`, `transcribe`, `upload`, `video`, `voice`, `zoomIn`, `zoomOut`;
+- `action.*`: `add`, `addContact`, `attach`, `check`, `close`, `copy`, `delete`, `download`, `drag`, `edit`, `externalLink`, `eyedropper`, `filter`, `forward`, `login`, `logout`, `more`, `openApp`, `pause`, `pin`, `play`, `react`, `refresh`, `report`, `remove`, `reply`, `search`, `send`, `settings`, `transcribe`, `upload`, `video`, `voice`, `zoomIn`, `zoomOut`;
 - `field.*`: `calendar`, `email`, `password.show`, `password.hide`;
 - `format.*`: `bold`, `code`, `italic`, `link`, `list`, `quote`, `spoiler`, `strikethrough`, `underline`;
 - `object.*`: `activity`, `bell`, `bike`, `book`, `cart`, `chart`, `crown`, `disc`, `document`, `file`, `fuel`, `funnel`, `globe`, `headset`, `image`, `inbox`, `key`, `mapPin`, `megaphone`, `message`, `motorbike`, `package`, `phone`, `receipt`, `rocket`, `scale`, `storage`, `tasks`, `trophy`, `truck`, `user`, `users`, `wallet`;

package/dist/skill/checklist.md

@@ -10,6 +10,7 @@ checks.
 - [ ] A nested record's path ends in its title on one line inside `Page.Heading`; no title row under the path ([the top bar](composition.md#the-top-bar)).
 - [ ] Every button of the page is in one `Page.Actions`, the primary last, each with a `Button.Icon` ([the top bar](composition.md#the-top-bar)).
 - [ ] `SmartFilter.Root` wraps `Page.Root`; its toolbar is in `Page.Tools`, its chips in `Page.Chips` ([the top bar](composition.md#the-top-bar)).
+- [ ] A section's sub-pages are route links (`SegmentedControl.Item asChild`) in its `Page.Tools`; the title stays the section and its Sidebar item stays current on every sub-route — no second Sidebar level, no tab strip in the body ([a section with sub-pages](composition.md#a-section-with-sub-pages)).
 - [ ] A control stands with what it changes: a table's search, filter, chips and chooser are in its `toolbar` / `toolbarChips` on every page; the bar keeps the title, sections, the view, the shared period and the buttons ([where the filters go](composition.md#where-the-filters-go)).
 - [ ] A table section has an `options` filter field for each categorical column and a `date-range` field per date column, its value in the URL ([where the filters go](composition.md#where-the-filters-go)).
 - [ ] Actions on selected rows are `renderSelectionActions` — one «Действия · N» menu added to the tools row, which stays ([controls of a table](composition.md#controls-of-a-table)).

package/dist/skill/choosing.md

@@ -143,8 +143,9 @@ outside the bar), with an optional `Page.TopBar collapse` that repeats it once i
 `onRowClick` + Drawer; a list worked through record by record → `Page.Split` with a `List` of
 the records (tickets, letters, invoices; `current` on the open one; a row's own Switch or menu in
 `List.ItemActions`) or a `ChatList` of the conversations. A record edited on a page of its own →
-`Page.Guard` holds leaving it with unsaved changes. Sections of a long rail → `Sidebar.Group collapsible`; a section with sub-pages →
-`Sidebar.Sub`; the signed-in user → `Sidebar.Account` in a `Dropdown.Trigger` at the bottom of
+`Page.Guard` holds leaving it with unsaved changes. Sections of a long rail → `Sidebar.Group collapsible`; views of one set of objects
+opened straight from the rail → `Sidebar.Sub`; the facets of one section («Каналы» / «Статистика»)
+→ route links in its `Page.Tools` ([a section with sub-pages](composition.md#a-section-with-sub-pages)); the signed-in user → `Sidebar.Account` in a `Dropdown.Trigger` at the bottom of
 `Sidebar.Footer`.
 
 ### A flag, a level, a set

package/dist/skill/composition.md

@@ -99,7 +99,8 @@ order is Heading, Tools, Actions, Chips whatever the JSX order.
   `Page.Description` under the whole line. The title is never a row of its own under the path, and
   the path never repeats the title as its last item.
 - **`Page.Tools`** — what acts on the whole page, as kit controls in the order a person reads them:
-  sections (a `SegmentedControl` with counts), the view, a period that drives several blocks; a
+  sections (a `SegmentedControl` with counts; of route links for
+  [a section with sub-pages](#a-section-with-sub-pages)), the view, a period that drives several blocks; a
   search and filter (`SmartFilter.Toolbar`) only when it governs more than one table — a board and
   its list, a media grid ([where the filters go](#where-the-filters-go)). Named with `aria-label`;
   no buttons and no wrappers inside.
@@ -180,6 +181,62 @@ export function DealsPage({ fields, filter, onFilterChange, view, onViewChange,
 }
 ```
 
+### A section with sub-pages
+
+One place of the app, several facets of it: «Мессенджеры» with «Каналы» and «Статистика», a client
+with «Сделки» and «Документы». Each facet is a route of its own (`/messengers/channels`,
+`/messengers/stats`), and the section stays one page:
+
+- **The title is the section.** `Page.Title` reads «Мессенджеры» on every sub-route; the facet is
+  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.
+- **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
+  `/messengers` without `end`, or `current={pathname.startsWith("/messengers")}`.
+- Never a second Sidebar level for facets, never a `Tabs` strip inside `Page.Body` for sub-pages.
+  `Sidebar.Sub` is for views of one set of objects people open straight from the rail («Сделки» →
+  «Новые», «В работе»); `Tabs` switch panels that are not routes.
+
+Live: [router.tsx](reference/layout/page/examples/router.tsx).
+
+```tsx
+import { Page, SegmentedControl } from "prime-ui-kit";
+import type { ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
+
+const MESSENGER_PAGES = [
+  { to: "/messengers/channels", label: "Каналы" },
+  { to: "/messengers/stats", label: "Статистика" },
+];
+
+export function MessengersPage({ children }: { children: ReactNode }) {
+  const { pathname } = useLocation();
+  return (
+    <Page.Root>
+      <Page.TopBar>
+        <Page.Heading>
+          <Page.Title>Мессенджеры</Page.Title>
+        </Page.Heading>
+        <Page.Tools aria-label="Мессенджеры">
+          <SegmentedControl.Root value={pathname} aria-label="Подразделы">
+            {MESSENGER_PAGES.map((page) => (
+              <SegmentedControl.Item key={page.to} value={page.to} asChild>
+                <Link to={page.to}>{page.label}</Link>
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+        </Page.Tools>
+      </Page.TopBar>
+      <Page.Body>{children}</Page.Body>
+    </Page.Root>
+  );
+}
+```
+
 ## 2. Rhythm — the 4px grid
 
 Every gap is a `--prime-space-N` token (N × 4px) set as `gap` on the parent. Closer means related.

package/dist/skill/layouts.md

@@ -142,6 +142,7 @@ when a count gets a colour — are in
 | Everyday places | `Sidebar.Group` without `label` at the top, never folded |
 | Category of work | `Sidebar.Group label collapsible` |
 | Views of one section | `Sidebar.Sub`, one level only |
+| Facets of one section (its list, its statistics) | none: route links in the page's `Page.Tools` ([a section with sub-pages](composition.md#a-section-with-sub-pages)) |
 | Meta | `Sidebar.Footer`: help, settings, then `Sidebar.Account` with its menu last |
 
 ### Sidebar icons

package/dist/skill/reference/components/data-table/COMPONENT.md

@@ -305,6 +305,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 
 ## Layout & spacing
 - The root is a layer of the surface ladder (`data-depth`, one above its host): it fills its container on `--prime-color-layer-current`, radius 12, and clips full-bleed head and rows; zebra rows and the sticky column are one ladder step off it, the head two. On a card or in a modal it is the next layer by itself — never wrap it in a Card.
+- The table scrolls inside its own viewport (a ScrollContainer, `axis="both"`): at its top or bottom — or when it fits and does not scroll — the wheel and the trackpad go on to the page; sideways it stops at its edge without a bounce, so the sticky column stays on its rows and the browser never swipes back.
 - A filter stands next to what it filters. `toolbar` is the table's own tools row, always — on a page with other blocks (KPI cards, a chart) and on a page that is the table: its search and filter (`SmartFilter.Toolbar`, chips in `toolbarChips`), `DataTableColumnsMenu`, a table / cards view. Actions on the selected rows go to `renderSelectionActions`, never into `toolbar`: while rows are selected the table adds a «Действия · N» menu button last in the tool row — the search, filter and chooser stay, the selection never replaces the row. The page's bar keeps what acts on the whole page — the title with its line of data, sections or a view switch, a period that drives several blocks, the actions (`Page.Actions`). One control never gets a row of its own.
 - The tools row is the one tool row of the kit (`Page.Tools` lays out the same way): controls in the order written, a search or a line of text (`Typography`) takes the free room, switchers, pickers and buttons keep their content width at the end edge. Under 36rem of table width the search takes a line of its own and a `SegmentedControl` (`fullWidth` unless set) fills the line it shares with the buttons; a search never parts from its filter button (`SmartFilter.Toolbar` keeps both). Wrap the table in `SmartFilter.Root` so the toolbar and the chips share one state.
 - Pass the tools as direct children of `toolbar` or a fragment: the row lays out each element as a cell. A wrapper component that returns several controls is one cell — no gaps between them, no growing search.

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

@@ -233,7 +233,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes. |
 
 ### Message.Actions
-`ref` → `HTMLDivElement`. A row of a bot's inline keyboard under the bubble: `Button.Root` keys (`soft` `neutral` by default) share one line equally, long labels ellipsize. A link key gets the link mark; a key whose `onClick` returns a promise loads until it settles.
+`ref` → `HTMLDivElement`. A bot's inline keyboard row under the bubble: `Button.Root` keys (`soft` `neutral` by default) share one line, long labels ellipsize. A link key gets a corner mark: ↗ out of the product, a window into it; a promise from `onClick` keeps a key loading.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -363,7 +363,7 @@ The list-level settings a message reads — the group chat's author header and a
 - `Message.Text` wraps anywhere; the meta stands at the end of its last line.
 - Round controls (download, cancel, retry, play) are a Button `shape="circle"`: hover, press, focus ring and the touch area follow the circle. A file's action is its round tile (48): the transfer disk (`internal/transferDisk`, `xl`) with its ring, the retry or the download stand on it — never a separate button beside the name. Every transfer, either way (media, file, video note, voice), is that one disk.
 - `Message.Typing` is the last row of a list; a chat puts it there itself (`Chat.Root typing`).
-- **A bot's inline keyboard** (`Message.Actions`): each part is a row under the bubble, `--prime-space-1` below it and between rows and keys, on the chat's own surface (outside the bubble's fill). The keyboard is as wide as the message: the column takes the wider of the bubble and the keyboard (up to the bubble's cap) and the bubble widens to it, so their edges line up. A row is one line, as in Telegram: its keys share it equally (`flex: 1 1 0`, each key `fullWidth`), and a label longer than its share ellipsizes. Keys keep the control radius; the last row's outer bottom corners take the bubble's (`--prime-message-radius`), so the keyboard closes the message. A key is `Button.Root` `variant="soft" tone="neutral"` at the host tier unless it sets its own: Telegram's button `style` maps onto `tone` — `primary` → `accent`, `success`, `danger` (`variant="solid"` for a filled key). A custom emoji before the label is a `Button.Icon`. A link key (`asChild` around an `<a href>`) carries the link mark (`action.externalLink`, `xs`) at its top-end corner, out of the label's flow. A callback key whose `onClick` returns a promise is `loading` until it settles: the spinner takes its leading icon's place or covers the label, the width never changes. A message with a keyboard has no tail: the keyboard closes it.
+- **A bot's inline keyboard** (`Message.Actions`): each part is a row under the bubble, `--prime-space-1` below it and between rows and keys, on the chat's own surface (outside the bubble's fill). The keyboard is as wide as the message: the column takes the wider of the bubble and the keyboard (up to the bubble's cap) and the bubble widens to it, so their edges line up. A row is one line, as in Telegram: its keys share it equally (`flex: 1 1 0`, each key `fullWidth`), and a label longer than its share ellipsizes. Keys keep the control radius; the last row's outer bottom corners take the bubble's (`--prime-message-radius`), so the keyboard closes the message. A key is `Button.Root` `variant="soft" tone="neutral"` at the host tier unless it sets its own: Telegram's button `style` maps onto `tone` — `primary` → `accent`, `success`, `danger` (`variant="solid"` for a filled key). A custom emoji before the label is a `Button.Icon`. A link key (`asChild` around an element with `href`, or a router link's `to`) carries one mark (`xs`) at its top-end corner, out of the label's flow, chosen by where the address leads, as Telegram tells a url key from a web app key: `action.externalLink` when it leaves the product (another origin, or another scheme — `mailto:`, `tel:`, an app link — which opens another program), `action.openApp` when it opens a page of the product (a relative path, a hash, an absolute address on this origin; on the server, without `location`, every address that is not absolute). A callback key whose `onClick` returns a promise is `loading` until it settles: the spinner takes its leading icon's place or covers the label, the width never changes. A message with a keyboard has no tail: the keyboard closes it.
 
 ## Accessibility
 
@@ -390,7 +390,7 @@ The list-level settings a message reads — the group chat's author header and a
 - Reactions are a group of buttons with `aria-pressed`; a chip is named «{emoji}: {count}», with `users` «{emoji} {count}: {users}» («❤️ 3: Анна, Пётр, Мария», «ещё N» when not everyone is listed); its avatars are `aria-hidden`; without `onReactionToggle` the chips are `disabled`. The reaction bar is a `toolbar` of toggle buttons named by the reaction («Нравится», «Огонь»…); its «⌄» is `aria-expanded`. The quick reaction is announced in the list's polite live region.
 - `VideoNote` and `VoicePlayer` carry their own ARIA (see their pages); inside a message their transcript is a plain paragraph, selectable and marked by the chat's search.
 - Media tiles are buttons «Открыть: {alt}» that open the album in MediaViewer, the focus returning to the tile on close; a transfer is the round cancel, retry or download button, the share its accessible description; a refused retry or cancel is announced politely; a done transfer's disk is `inert`.
-- `Message.Actions` are plain buttons and links (`Button.Root`, `asChild`) with visible labels, in row order; in a chat's selection mode they take no presses.
+- `Message.Actions` are plain buttons and links (`Button.Root`, `asChild`) with visible labels, in row order; the corner mark of a link key is decorative (`aria-hidden`), the link is named by its label; in a chat's selection mode they take no presses.
 - Color is never the only signal: the status is named, the own reaction is `aria-pressed`, a selected message is `aria-selected` with a check, the author is text.
 
 ### Labels
@@ -506,7 +506,7 @@ The list-level settings a message reads — the group chat's author header and a
 | [location.tsx](examples/location.tsx) | A place on a map picture from your map service with a pin, the place and its address, and a live location of a courier on its way — `Message.Location`, `href`, `live`. |
 | [contact.tsx](examples/contact.tsx) | A shared contact: initials or a photo, name and phone, with the actions to write or save — `Message.Contact`, `phone`. |
 | [link-preview.tsx](examples/link-preview.tsx) | A message with a link and the card of the page under it: site, title, description and picture — `Message.LinkPreview`, `site`, `image`. |
-| [bot-actions.tsx](examples/bot-actions.tsx) | A bot's message with an inline keyboard: one-line rows whose keys share the row equally, a coloured key with an icon that loads while its promise runs, a link with its mark — `Message.Actions`, `tone`, `Button.Icon`, `asChild`. |
+| [bot-actions.tsx](examples/bot-actions.tsx) | A bot's message with an inline keyboard: one-line rows whose keys share the row equally, a coloured key with an icon that loads while its promise runs, links marked by where they lead: a page of the product or another site — `Message.Actions`, `tone`, `Button.Icon`, `asChild`. |
 | [sticker.tsx](examples/sticker.tsx) | Stickers in a conversation: a picture by its address and a video sticker in your own player, no bubble, the time on a pill over the corner — `Message.Sticker`, `src`, `loading`. |
 | [preview.tsx](examples/preview.tsx) | A bot's welcome message as its settings page shows it: the same bubble with its keyboard, nothing in it pressed or opened, the time in the zone of the profile — `preview`, `timeZone`. |
 | [narrow.tsx](examples/narrow.tsx) | At phone width bubbles take up to 85% of the chat, long words and links wrap inside, an album keeps its rows — `Message.Root`, `Message.Media`. |
@@ -532,7 +532,8 @@ The list-level settings a message reads — the group chat's author header and a
 - A transcript as a separate `Message.Text`, or a height animation of your own around it → `transcript` / `onTranscribe` on `VoicePlayer` and `VideoNote`: the text opens inside the same message, in one stroke with its height.
 - A list, dates, search or selection built around messages → [Chat](../chat/COMPONENT.md).
 - A bot's buttons placed inside `Message.Text`, or a row of buttons of your own under a message → `Message.Actions` with `Button.Root` children: one row per part, at the message's width.
+- An arrow icon of your own in a link key (`Button.Icon` with `action.externalLink`) → leave the label alone: `Message.Actions` draws the key's one corner mark itself, ↗ for another site and a window for a page of the product; a second arrow doubles it.
 
 ## Related
-- **Built from:** [Dropdown](../dropdown/COMPONENT.md) (`Message.Menu`), [ScrollContainer](../scroll-container/COMPONENT.md) (the floating panel of the reaction bar), [Gallery](../gallery/COMPONENT.md) (`Message.Media`), [Avatar](../avatar/COMPONENT.md) (`Avatar.Group` + `Avatar.Overflow` in reaction chips), [Badge](../badge/COMPONENT.md) (the «Трансляция» mark of a live location), [Thumbnail](../thumbnail/COMPONENT.md) (the map, the link preview picture, a file's preview), [Button](../button/COMPONENT.md) (retry, the transfer disk, `shape="circle"`, the buttons of `Message.Actions`), [Checkbox](../checkbox/COMPONENT.md) (`Checkbox.Indicator` in selection mode), [Spinner](../spinner/COMPONENT.md) (pending transfers and transcripts), [Skeleton](../skeleton/COMPONENT.md) (a sticker while it loads), Icon (status ticks, file glyphs, `action.forward`, `action.refresh`, `action.externalLink` — the link mark of a key); `internal/messagePart` (the contract of content parts), `internal/messageList` (the contract with a chat's list), `internal/palette` (`hueOf`), `internal/Disclosure` (the reactions row, transcripts), `bubbleMorph` (every size change as one stroke), `bubbleHug` (a bubble of text as wide as its widest line), `internal/transferDisk` (the transfer of a file), `internal/mediaPill` (the meta, the author's pill), `internal/HighlightMatch` (search marks), `internal/richText` (Markdown), [VisuallyHidden](../visually-hidden/COMPONENT.md)
+- **Built from:** [Dropdown](../dropdown/COMPONENT.md) (`Message.Menu`), [ScrollContainer](../scroll-container/COMPONENT.md) (the floating panel of the reaction bar), [Gallery](../gallery/COMPONENT.md) (`Message.Media`), [Avatar](../avatar/COMPONENT.md) (`Avatar.Group` + `Avatar.Overflow` in reaction chips), [Badge](../badge/COMPONENT.md) (the «Трансляция» mark of a live location), [Thumbnail](../thumbnail/COMPONENT.md) (the map, the link preview picture, a file's preview), [Button](../button/COMPONENT.md) (retry, the transfer disk, `shape="circle"`, the buttons of `Message.Actions`), [Checkbox](../checkbox/COMPONENT.md) (`Checkbox.Indicator` in selection mode), [Spinner](../spinner/COMPONENT.md) (pending transfers and transcripts), [Skeleton](../skeleton/COMPONENT.md) (a sticker while it loads), Icon (status ticks, file glyphs, `action.forward`, `action.refresh`, `action.externalLink` and `action.openApp` — the marks of a link key); `internal/messagePart` (the contract of content parts), `internal/messageList` (the contract with a chat's list), `internal/palette` (`hueOf`), `internal/Disclosure` (the reactions row, transcripts), `bubbleMorph` (every size change as one stroke), `bubbleHug` (a bubble of text as wide as its widest line), `internal/transferDisk` (the transfer of a file), `internal/mediaPill` (the meta, the author's pill), `internal/HighlightMatch` (search marks), `internal/richText` (Markdown), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Chat](../chat/COMPONENT.md) — the conversation the messages stand in; [Gallery](../gallery/COMPONENT.md) — the album of `Message.Media`; [VideoNote](../video-note/COMPONENT.md) — the round video message; [VoicePlayer](../voice-player/COMPONENT.md) — the content of a voice message; [Composer](../composer/COMPONENT.md) — the input under the list; [RichText](../rich-text/COMPONENT.md) — the text of `Message.Text` outside a message; [Timeline](../timeline/COMPONENT.md)

package/dist/skill/reference/components/message/examples/bot-actions.tsx

@@ -1,10 +1,11 @@
-/** A bot's message with an inline keyboard: one-line rows whose keys share the row equally, a coloured key with an icon that loads while its promise runs, a link with its mark — `Message.Actions`, `tone`, `Button.Icon`, `asChild`. */
+/** A bot's message with an inline keyboard: one-line rows whose keys share the row equally, a coloured key with an icon that loads while its promise runs, links marked by where they lead: a page of the product or another site — `Message.Actions`, `tone`, `Button.Icon`, `asChild`. */
 import { Button, Icon, Message } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 const INVOICE_URL = "https://vector.example/invoices/4821";
+const CATALOG_PATH = "#catalog";
 const CONFIRM_DELAY_MS = 1200;
 
 export default function MessageBotActionsExample() {
@@ -58,9 +59,12 @@ export default function MessageBotActionsExample() {
           </Message.Actions>
         ) : null}
         <Message.Actions>
+          <Button.Root asChild>
+            <a href={CATALOG_PATH}>Каталог</a>
+          </Button.Root>
           <Button.Root asChild>
             <a href={INVOICE_URL} target="_blank" rel="noreferrer">
-              Открыть счёт
+              Счёт
             </a>
           </Button.Root>
         </Message.Actions>

package/dist/skill/reference/components/scroll-container/COMPONENT.md

@@ -48,7 +48,7 @@ ScrollContainer   <div> (or the `as` tag); thin scrollbar, soft hidden edges
 | `anchor` | `"start" \| "end"` | `"start"` | `end` — a chat or a log: opens at the end and follows new content while the person is at the end; scrolled away, the view holds still. |
 | `onReachStart` | `() => void \| Promise<void>` | — | Fires within 120 px of the start, once per approach: load older content. A returned promise blocks repeats and sets `aria-busy`; content added above keeps the view. |
 | `onReachEnd` | `() => void \| Promise<void>` | — | The scroll position came within 120 px of the end: load the next page. Same once-per-approach and promise rules as `onReachStart`. |
-| `overscrollBehavior` | `"auto" \| "contain" \| "none"` | `"contain"` | CSS `overscroll-behavior` along the region's own axes; `contain` stops scroll chaining into the page, a scroll across them still reaches the region around. |
+| `overscrollBehavior` | `"auto" \| "contain" \| "none"` | `"auto"` | At the region's end: `auto` hands the scroll on to the page (sideways it stops); `contain` / `none` hold both axes — an open layer, where the page behind must not move. |
 | `as` | `"div" \| "main" \| "aside" \| "section" \| "nav" \| "article" \| "pre"` | `"div"` | Root element; a landmark tag when the region is one, `pre` for preformatted text (CodeBlock). |
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` (height, padding), `aria-label`, `tabIndex`, `role`, event handlers and the other attributes. |
 
@@ -64,9 +64,9 @@ ScrollContainer   <div> (or the `as` tag); thin scrollbar, soft hidden edges
 ### overscrollBehavior
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `contain` | Reaching the end does not scroll the page behind | Nested panels, lists inside a page | yes |
-| `auto` | Browser default: scroll chains to the parent | The region is the page's main scroller and should hand off | |
-| `none` | No chaining and no overscroll glow / bounce | Full-screen app regions | |
+| `auto` | At its end up or down the scroll goes on to the page (or the region around); a region that does not scroll never holds the wheel. Sideways it stops without a bounce: a page never scrolls sideways, and a sideways chain would swipe the browser's history | every region on a page: lists, tables, boards, chats, code | yes |
+| `contain` | Reaching the end on either axis does not scroll what is behind | an open layer — Modal / Drawer / Sheet body, a floating panel, the CommandMenu list set it themselves; a panel of your own that floats over the page | |
+| `none` | `contain` without the overscroll glow / bounce | a full-screen layer of your own | |
 
 ### edges
 | Value | Looks like | Use when | Default |
@@ -165,7 +165,7 @@ No `labels`.
 | [snap.tsx](examples/snap.tsx) | A strip of warehouse cards that always comes to rest on a card's start, scrolled by touch, a trackpad or the mouse wheel — `snap`, `axis`. |
 | [lock.tsx](examples/lock.tsx) | While an order is opened for review, the queue behind it holds still: no wheel, touch, key or drag moves it — `lock`. |
 | [auto-scroll.tsx](examples/auto-scroll.tsx) | A task dragged to the top or bottom edge of a scrolling list scrolls it, faster the closer it comes — `ScrollContainer`, `Dnd.Sortable`. |
-| [overscroll.tsx](examples/overscroll.tsx) | At the end of the list the scroll passes on to the page instead of stopping — `overscrollBehavior`. |
+| [overscroll.tsx](examples/overscroll.tsx) | A panel that keeps its scroll: at the end of the list the page behind stays put — `overscrollBehavior`. |
 | [log.tsx](examples/log.tsx) | A live exchange log pinned to its last entry: a new entry keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. |
 | [load-more.tsx](examples/load-more.tsx) | An order log that loads the next page as the reader nears its end, with loading lines in the rows' place — `onReachEnd`. |
 

package/dist/skill/reference/components/scroll-container/examples/overscroll.tsx

@@ -1,4 +1,4 @@
-/** At the end of the list the scroll passes on to the page instead of stopping — `overscrollBehavior`. */
+/** A panel that keeps its scroll: at the end of the list the page behind stays put — `overscrollBehavior`. */
 import { Card, ScrollContainer, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -11,7 +11,7 @@ export default function ScrollContainerOverscrollExample() {
       <Card.Header>
         <Card.Title>Журнал выгрузок</Card.Title>
       </Card.Header>
-      <ScrollContainer overscrollBehavior="auto" tabIndex={0} aria-label="Журнал выгрузок">
+      <ScrollContainer overscrollBehavior="contain" tabIndex={0} aria-label="Журнал выгрузок">
         <Card.List>
           {HOURS.map((hour) => (
             <Card.ListItem key={hour}>

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

@@ -216,7 +216,7 @@ Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-
 ```
 - The folder paints the host's `layer-current`, so the active tab is always the colour of the surface it stands on; controls in a panel read the host's field and fill tokens.
 - Vertical: the column is as wide as its widest section (at least four control heights, at most 40% of the root) and as tall as its sections; the panel sits beside it, one gap away.
-- The list is a switcher (foundation §9): it never wraps — it collapses, then scrolls horizontally with faded edges (hidden scrollbar, `overscroll-behavior: contain`). Give the list's container a width (`min-width: 0` on flex children).
+- The list is a switcher (foundation §9): it never wraps — it collapses, then scrolls horizontally with faded edges (hidden scrollbar; at its sideways edge it stops, a vertical wheel goes on to the page). Give the list's container a width (`min-width: 0` on flex children).
 - Without `size` the tabs take the tier of their host (a Card, a Drawer, a form), else `m`.
 - A horizontal tab is never narrower than its content (`min-width: max-content`; the tab bounds that content between `minItemWidth` and `maxItemWidth`), so a label is never cut to make room. Full width, tabs tend to equal widths, not widths in proportion to their labels (`flex: 1 1 0`): a long label keeps its width, the short ones share the rest.
 - A vertical Tabs.Root is a size container: give it a width (it measures itself to switch to a row).

package/dist/skill/reference/icon-set.ts

@@ -20,6 +20,7 @@ export { AlignVerticalSpaceAround as AlignVerticalSpaceAroundIcon } from "./icon
 export { Ambulance as AmbulanceIcon } from "./icons/glyphs/ambulance";
 export { Angry as AngryIcon } from "./icons/glyphs/angry";
 export { Annoyed as AnnoyedIcon } from "./icons/glyphs/annoyed";
+export { AppWindow as AppWindowIcon } from "./icons/glyphs/app-window";
 export { Archive as ArchiveIcon } from "./icons/glyphs/archive";
 export { ArrowBigDown as ArrowBigDownIcon } from "./icons/glyphs/arrow-big-down";
 export { ArrowBigDownDash as ArrowBigDownDashIcon } from "./icons/glyphs/arrow-big-down-dash";

package/dist/skill/reference/layout/app-shell/COMPONENT.md

@@ -128,7 +128,7 @@ The navigation of the nearest `AppShell.Root` for a trigger outside the rail (a
 - Two full-height planes edge to edge: no inset, radius, shadow or border — the boundary is the fill change (the Sidebar rail is layer 1, the panel the page: white rail beside a gray page in light, a rail one step lighter than the near-black page in dark).
 - Main hands the page its edge air: `--page-gutter` is the page gutter `--prime-layout-gutter` — `--prime-layout-gutter-s` (16) → `-m` (24) from 640px → `-l` (32) from 1024px; `--page-top` is `--prime-space-6` (24) → `--prime-space-8` (32) from 1024px. `Page.Root` pads itself with them (its top bar steps out to the panel's edges). Main itself pads only the bottom: `--prime-space-16`, the scroll tail of a long page. Inside Main the page gutter is the small one again, so a frame nested in the page starts from its own gutter, not the shell's.
 - A page that fills the panel height (`Page.Root fill`): Main's bottom padding drops to the side gutter, so no long scroll tail stays under it — beside the Sidebar rail too.
-- Main scrolls with `overscroll-behavior: contain`, so its scroll never chains to the document.
+- Main hands its scroll on at its end (ScrollContainer `overscrollBehavior="auto"`): without `fillViewport` it is not a scroller and the document scrolls under the pointer.
 - Nav column: sticky at the top, viewport high, `z-index: --prime-z-sticky` (above the panel, so the compact Sidebar toggle can ride the rail edge); with `fillViewport` it fills the shell height instead.
 - Footer: no padding of its own (BottomNav keeps the bottom safe-area inset), sticky at the bottom, `z-index: --prime-z-sticky`.
 - A floating BottomNav (`floating`) in the footer: the footer takes no height, the capsule overlays the page, and Main keeps extra bottom room (the capsule height and the safe-area inset) so its last line never ends up under it.

package/dist/skill/reference/layout/page/COMPONENT.md

@@ -8,7 +8,8 @@
 ## When to use
 - 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). The search, filter, chips and column chooser of a page that is one list stay there too — the list is the page. On a page that holds more than its table (KPI cards, a chart), they belong to the table's own tools row (DataTable `toolbar` + `toolbarChips`), not the bar.
+- 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 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"`).
@@ -44,8 +45,8 @@ Page.Root                          the page column (<div>); maxWidth, fill, labe
 │  │  ├─ Page.Title                <h1>, title-m, the path's last level, truncates
 │  │  └─ Page.Description          <p>, muted caption under the whole line, truncates
 │  ├─ Page.Tools                   what acts on the whole page, in the order written: the one tool row (as the DataTable toolbar)
-│  │  ├─ SegmentedControl.Root     sections, view (fullWidth unless set)
-│  │  ├─ SmartFilter.Toolbar       search and filter: grows first on a line of its own
+│  │  ├─ SegmentedControl.Root     sections (route links of sub-pages), view (fullWidth unless set)
+│  │  ├─ SmartFilter.Toolbar       a search and filter over several views: grows first on a line of its own
 │  │  ├─ Datepicker.Root           a period (fullWidth unless set)
 │  │  └─ Select.Root …             a period, columns; the trigger fills its place
 │  ├─ Page.Actions                 every button of the page; icons, then «⋯» when short
@@ -122,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, a shared period, view; the search of a one-list page. The tool row of the DataTable `toolbar`: a search takes the free room, the rest keep their width at the end. Named, a `group`.
+`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`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -342,7 +343,8 @@ A wide cell (`span` 7–11) written next to a narrow one (`span` 4–5) is a pai
 | [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`. |
-| [tools.tsx](examples/tools.tsx) | The orders page's tools in its top bar: sections with counts, search and filter, the period, in the order written; the active filters on a line under everything — `Page.Tools`, `Page.Chips`. |
+| [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`. |
 | [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`. |
@@ -361,7 +363,8 @@ A wide cell (`span` 7–11) written next to a narrow one (`span` 4–5) is a pai
 - Buttons without an icon in a crowded bar → they cannot give way to an icon; give each `Button.Root` a `Button.Icon` beside its label.
 - Two places for buttons (some beside the title, the primary among the tools) → every button of the page goes into the one `Page.Actions`, the primary last.
 - `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` above KPI cards or a chart they do not filter → they read as filters of the whole page; move them into the table's `toolbar` / `toolbarChips`. The bar keeps the title, a period that drives every block, sections and the primary action.
+- 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.
 - `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/dist/skill/reference/layout/page/examples/router.tsx

@@ -0,0 +1,124 @@
+/** 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`. */
+import {
+  Button,
+  Card,
+  Crossfade,
+  DataTable,
+  type DataTableColumn,
+  Icon,
+  Page,
+  SegmentedControl,
+} from "prime-ui-kit";
+import { Link, Route, Routes, useLocation } from "react-router-dom";
+
+type Channel = { id: string; name: string; dialogs: number; reply: string };
+
+const SUB_PAGES = [
+  { to: "/messengers/channels", label: "Каналы" },
+  { to: "/messengers/stats", label: "Статистика" },
+];
+
+const CHANNELS: Channel[] = [
+  { id: "tg", name: "Telegram · @prime_support", dialogs: 642, reply: "4 мин" },
+  { id: "wa", name: "WhatsApp · +7 495 120-44-10", dialogs: 391, reply: "7 мин" },
+  { id: "vk", name: "ВКонтакте · Прайм CRM", dialogs: 188, reply: "12 мин" },
+  { id: "avito", name: "Авито · Склад на Южной", dialogs: 59, reply: "25 мин" },
+];
+
+const COLUMNS: DataTableColumn<Channel>[] = [
+  { id: "name", header: "Канал", cell: (row) => row.name },
+  {
+    id: "dialogs",
+    header: "Диалогов",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => row.dialogs,
+  },
+  {
+    id: "reply",
+    header: "Первый ответ",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => row.reply,
+  },
+];
+
+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;
+
+  return (
+    <Page.Root>
+      <Page.TopBar sticky={false}>
+        <Page.Heading>
+          <Page.Title>Мессенджеры</Page.Title>
+          <Page.Description>4 канала · 1 280 диалогов за октябрь</Page.Description>
+        </Page.Heading>
+        <Page.Tools aria-label="Мессенджеры">
+          <SegmentedControl.Root value={current} aria-label="Подразделы">
+            {SUB_PAGES.map((page) => (
+              <SegmentedControl.Item key={page.to} value={page.to} asChild>
+                <Link to={page.to}>{page.label}</Link>
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+        </Page.Tools>
+        <Page.Actions>
+          <Button.Root>
+            <Button.Icon>
+              <Icon name="action.add" />
+            </Button.Icon>
+            Подключить канал
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+      <Page.Body>
+        {/* `location` keeps the leaving sub-page on its own route while it fades out. */}
+        <Crossfade state={current}>
+          <Routes location={location}>
+            <Route
+              path="/messengers/stats"
+              element={
+                <Page.Grid>
+                  <Page.Cell span={4}>
+                    <Card.Root variant="stat-trend">
+                      <Card.Label>Диалогов</Card.Label>
+                      <Card.Value>1 280</Card.Value>
+                      <Card.Delta tone="success">+14% к сентябрю</Card.Delta>
+                    </Card.Root>
+                  </Page.Cell>
+                  <Page.Cell span={4}>
+                    <Card.Root variant="stat-trend">
+                      <Card.Label>Первый ответ</Card.Label>
+                      <Card.Value>6 мин</Card.Value>
+                      <Card.Delta tone="success">на 2 мин быстрее</Card.Delta>
+                    </Card.Root>
+                  </Page.Cell>
+                  <Page.Cell span={4}>
+                    <Card.Root variant="stat-trend">
+                      <Card.Label>Без ответа</Card.Label>
+                      <Card.Value>23</Card.Value>
+                      <Card.Delta tone="danger">+5 за сутки</Card.Delta>
+                    </Card.Root>
+                  </Page.Cell>
+                </Page.Grid>
+              }
+            />
+            <Route
+              path="*"
+              element={
+                <DataTable
+                  columns={COLUMNS}
+                  rows={CHANNELS}
+                  getRowKey={(row) => row.id}
+                  paging="none"
+                />
+              }
+            />
+          </Routes>
+        </Crossfade>
+      </Page.Body>
+    </Page.Root>
+  );
+}