prime-ui-kit 0.21.0 → 0.21.1

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/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/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>
+  );
+}

package/dist/skill/reference/layout/page/examples/tools.tsx

@@ -1,10 +1,9 @@
-/** 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`. */
+/** 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`. */
 import {
   Button,
   Icon,
   Page,
   SegmentedControl,
-  Select,
   SmartFilter,
   type SmartFilterField,
   type SmartFilterValue,
@@ -18,10 +17,9 @@ const SECTIONS = [
   { value: "cancelled", label: "Отменены", count: 20 },
 ];
 
-const PERIODS = [
-  { value: "7d", label: "7 дней" },
-  { value: "30d", label: "30 дней" },
-  { value: "quarter", label: "Квартал" },
+const VIEWS = [
+  { value: "list", label: "Список" },
+  { value: "board", label: "Доска" },
 ];
 
 const FIELDS: SmartFilterField[] = [
@@ -46,7 +44,7 @@ const FIELDS: SmartFilterField[] = [
 
 export default function PageToolsExample() {
   const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("30d");
+  const [view, setView] = React.useState("list");
   const [filter, setFilter] = React.useState<SmartFilterValue>({
     city: { include: ["msk"], exclude: [] },
   });
@@ -75,21 +73,13 @@ export default function PageToolsExample() {
               ))}
             </SegmentedControl.Root>
             <SmartFilter.Toolbar />
-            <Select.Root value={period} onValueChange={setPeriod}>
-              <Select.Trigger aria-label="Период">
-                <Select.TriggerIcon>
-                  <Icon name="field.calendar" />
-                </Select.TriggerIcon>
-                <Select.Value />
-              </Select.Trigger>
-              <Select.Content>
-                {PERIODS.map((item) => (
-                  <Select.Item key={item.value} value={item.value}>
-                    {item.label}
-                  </Select.Item>
-                ))}
-              </Select.Content>
-            </Select.Root>
+            <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
+              {VIEWS.map((item) => (
+                <SegmentedControl.Item key={item.value} value={item.value}>
+                  {item.label}
+                </SegmentedControl.Item>
+              ))}
+            </SegmentedControl.Root>
           </Page.Tools>
           <Page.Actions>
             <Button.Root>

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

@@ -26,7 +26,10 @@ same place. Structure it by what people do, not by how the backend is split.
   it stays folded; its `…` row marks the page).
 - **One level of nesting.** `Sidebar.Sub` is one section with 2–6 views of the same objects
   (Сделки → Новые · В работе · Закрытые). The parent only discloses; an overview page is the first
-  child («Все сделки»). Never a sub-list inside a sub-list — split the section or use page tabs.
+  child («Все сделки»). Never a sub-list inside a sub-list — split the section. Facets of one section
+  («Мессенджеры» → «Каналы» · «Статистика») are no sub-list: they are route links in the page's
+  `Page.Tools`, and the section's item stays `current` on every sub-route (a `NavLink` without `end`,
+  or `current={pathname.startsWith("/messengers")}`).
 - **Icons.** Every top-level item and every sub-list parent has a distinct icon (on the rail the
   icon is all that is left); children of a sub-list have none.
 - **Numbers and dots.** A plain `Sidebar.ItemCount` is information (12 new deals): it leaves the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "packageManager": "bun@1.3.13",
   "description": "React 19 UI kit for product interfaces: 79 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y, Next.js App Router ready. Ships COMPONENT.md docs, copyable examples and an agent skill.",
   "bin": {

package/src/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/src/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>
+  );
+}

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

@@ -1,10 +1,9 @@
-/** 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`. */
+/** 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`. */
 import {
   Button,
   Icon,
   Page,
   SegmentedControl,
-  Select,
   SmartFilter,
   type SmartFilterField,
   type SmartFilterValue,
@@ -18,10 +17,9 @@ const SECTIONS = [
   { value: "cancelled", label: "Отменены", count: 20 },
 ];
 
-const PERIODS = [
-  { value: "7d", label: "7 дней" },
-  { value: "30d", label: "30 дней" },
-  { value: "quarter", label: "Квартал" },
+const VIEWS = [
+  { value: "list", label: "Список" },
+  { value: "board", label: "Доска" },
 ];
 
 const FIELDS: SmartFilterField[] = [
@@ -46,7 +44,7 @@ const FIELDS: SmartFilterField[] = [
 
 export default function PageToolsExample() {
   const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("30d");
+  const [view, setView] = React.useState("list");
   const [filter, setFilter] = React.useState<SmartFilterValue>({
     city: { include: ["msk"], exclude: [] },
   });
@@ -75,21 +73,13 @@ export default function PageToolsExample() {
               ))}
             </SegmentedControl.Root>
             <SmartFilter.Toolbar />
-            <Select.Root value={period} onValueChange={setPeriod}>
-              <Select.Trigger aria-label="Период">
-                <Select.TriggerIcon>
-                  <Icon name="field.calendar" />
-                </Select.TriggerIcon>
-                <Select.Value />
-              </Select.Trigger>
-              <Select.Content>
-                {PERIODS.map((item) => (
-                  <Select.Item key={item.value} value={item.value}>
-                    {item.label}
-                  </Select.Item>
-                ))}
-              </Select.Content>
-            </Select.Root>
+            <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
+              {VIEWS.map((item) => (
+                <SegmentedControl.Item key={item.value} value={item.value}>
+                  {item.label}
+                </SegmentedControl.Item>
+              ))}
+            </SegmentedControl.Root>
           </Page.Tools>
           <Page.Actions>
             <Button.Root>