prime-ui-kit 0.15.0 → 0.17.0

package/dist/skill/reference/layout/sidebar/examples/narrow.tsx

@@ -1,53 +1,58 @@
-/** Below 768px the rail leaves the layout and slides in over the page from the menu button; from 768px it is the rail again, and the button leaves — `offCanvas`, `labels`. */
-import { AppHeader, Icon, Sidebar } from "prime-ui-kit";
-import * as React from "react";
+/** Below 768px the rail leaves the layout and slides in over the page from the menu button the page top bar draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. */
+import { AppShell, Icon, Page, Sidebar } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 const LABELS = { close: "Закрыть меню" };
 
 export default function SidebarNarrowExample() {
-  const [open, setOpen] = React.useState(false);
-
   return (
     <div className={styles.stage}>
-      <Sidebar.Root open={open} onOpenChange={setOpen} labels={LABELS}>
-        <Sidebar.Header>
-          <Sidebar.Brand href="#home" description="Отдел продаж">
-            <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
-            </Sidebar.BrandLogo>
-            Прайм CRM
-          </Sidebar.Brand>
-          <Sidebar.Toggle variant="header" />
-        </Sidebar.Header>
-        <Sidebar.Content>
-          <Sidebar.Item href="#deals" current>
-            <Sidebar.ItemIcon>
-              <Icon name="object.document" />
-            </Sidebar.ItemIcon>
-            Сделки
-          </Sidebar.Item>
-          <Sidebar.Item href="#clients">
-            <Sidebar.ItemIcon>
-              <Icon name="object.users" />
-            </Sidebar.ItemIcon>
-            Клиенты
-          </Sidebar.Item>
-          <Sidebar.Item href="#tasks">
-            <Sidebar.ItemIcon>
-              <Icon name="object.tasks" />
-            </Sidebar.ItemIcon>
-            Задачи
-            <Sidebar.ItemCount>5</Sidebar.ItemCount>
-          </Sidebar.Item>
-        </Sidebar.Content>
-      </Sidebar.Root>
-      <div className={styles.content}>
-        <AppHeader.MenuButton aria-expanded={open} onClick={() => setOpen(true)} />
-      </div>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Nav>
+          <Sidebar.Root labels={LABELS}>
+            <Sidebar.Header>
+              <Sidebar.Brand href="#home" description="Отдел продаж">
+                <Sidebar.BrandLogo>
+                  <Icon name="nav.layoutGrid" />
+                </Sidebar.BrandLogo>
+                Прайм CRM
+              </Sidebar.Brand>
+              <Sidebar.Toggle variant="header" />
+            </Sidebar.Header>
+            <Sidebar.Content>
+              <Sidebar.Item href="#deals" current>
+                <Sidebar.ItemIcon>
+                  <Icon name="object.document" />
+                </Sidebar.ItemIcon>
+                Сделки
+              </Sidebar.Item>
+              <Sidebar.Item href="#clients">
+                <Sidebar.ItemIcon>
+                  <Icon name="object.users" />
+                </Sidebar.ItemIcon>
+                Клиенты
+              </Sidebar.Item>
+              <Sidebar.Item href="#tasks">
+                <Sidebar.ItemIcon>
+                  <Icon name="object.tasks" />
+                </Sidebar.ItemIcon>
+                Задачи
+                <Sidebar.ItemCount>5</Sidebar.ItemCount>
+              </Sidebar.Item>
+            </Sidebar.Content>
+          </Sidebar.Root>
+        </AppShell.Nav>
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Сделки</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+          </Page.Root>
+        </AppShell.Main>
+      </AppShell.Root>
     </div>
   );
 }

package/dist/skill/reference/layout/sidebar/examples/nested-items.tsx

@@ -17,9 +17,7 @@ export default function SidebarNestedItemsExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

package/dist/skill/reference/layout/sidebar/examples/overview.tsx

@@ -10,9 +10,7 @@ export default function SidebarOverviewExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

package/dist/skill/reference/layout/sidebar/examples/persist.tsx

@@ -10,9 +10,7 @@ export default function SidebarPersistExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

package/dist/skill/reference/layout/sidebar/examples/router.tsx

@@ -1,13 +1,13 @@
-/** Router links as the brand and the items: the router sets `aria-current` and the item shows as current; render it inside a router — `asChild`. */
-import { Icon, Sidebar } from "prime-ui-kit";
+/** Router links as the brand and the items: the router marks the current link and the item shows it as current; render it inside a router — `asChild`. */
+import { Icon, type IconName, Sidebar } from "prime-ui-kit";
 import { Link, NavLink } from "react-router-dom";
 
 import styles from "./examples.module.css";
 
-const LINKS = [
-  { to: "/app-shell", label: "AppShell" },
-  { to: "/page-content", label: "PageContent" },
-  { to: "/sidebar", label: "Sidebar" },
+const LINKS: { to: string; label: string; icon: IconName }[] = [
+  { to: "/", label: "Обзор", icon: "nav.home" },
+  { to: "/deals", label: "Сделки", icon: "object.funnel" },
+  { to: "/clients", label: "Клиенты", icon: "object.users" },
 ];
 
 export default function SidebarRouterExample() {
@@ -15,23 +15,22 @@ export default function SidebarRouterExample() {
     <div className={styles.stage}>
       <Sidebar.Root offCanvas="never">
         <Sidebar.Header>
-          <Sidebar.Brand asChild description="Документация">
+          <Sidebar.Brand asChild description="Отдел продаж">
             <Link to="/">
               <Sidebar.BrandLogo>
-                <span className={styles.logo}>
-                  <Icon name="object.book" />
-                </span>
+                <Icon name="nav.layoutGrid" />
               </Sidebar.BrandLogo>
-              Prime UI
+              Прайм CRM
             </Link>
           </Sidebar.Brand>
         </Sidebar.Header>
         <Sidebar.Content>
           {LINKS.map((link) => (
             <Sidebar.Item key={link.to} asChild>
-              <NavLink to={link.to}>
+              {/* `end`: the overview is current only on its own page, not under every route. */}
+              <NavLink to={link.to} end={link.to === "/"}>
                 <Sidebar.ItemIcon>
-                  <Icon name="nav.layoutGrid" />
+                  <Icon name={link.icon} />
                 </Sidebar.ItemIcon>
                 {link.label}
               </NavLink>

package/dist/skill/reference/layout/sidebar/examples/sizes.tsx

@@ -7,12 +7,9 @@ const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function SidebarSizesExample() {
   return (
-    <div className={styles.sizes}>
+    <>
       {SIZES.map((size) => (
-        <div key={size} className={styles.sizeColumn}>
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
           <div className={`${styles.stage} ${styles.stageShort}`}>
             <Sidebar.Root size={size} offCanvas="never">
               <Sidebar.Content>
@@ -32,8 +29,11 @@ export default function SidebarSizesExample() {
               </Sidebar.Content>
             </Sidebar.Root>
           </div>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
         </div>
       ))}
-    </div>
+    </>
   );
 }

package/dist/skill/responsive.md

@@ -22,84 +22,84 @@ single function. Most of it is built into the components; this file says what th
 
 ## Breakpoints
 
-The kit has one set: **640 · 768 · 1024 · 1280**. Use them only in media queries of the app frame;
+The kit has one set: **640 · 768 · 1024 · 1280**. Use them only in media queries of the app frame and
+of an overlay's form (a panel that becomes a bottom sheet on a phone) — the kit's own scope;
 everything inside a page breaks by its container.
 
 | Width | Typical | What changes |
 |---|---|---|
 | < 640 | phone | one column; floating layers become bottom sheets; Modal is a bottom sheet; Drawer full width; `BottomNav` in `AppShell.Footer` |
-| 640–767 | small tablet | gutters 24; two-column grids by `auto-fill`; the Sidebar is still off-canvas, so BottomNav stays |
+| 640–767 | small tablet | gutters 24; intrinsic grids reach two columns; the Sidebar is still off-canvas, so BottomNav stays |
 | 768–1023 | tablet | Sidebar on-canvas (`offCanvas="auto"`) |
-| 1024–1279 | laptop | gutters 32; list + details side by side when the content asks for it |
+| 1024–1279 | laptop | gutters 32 |
 | ≥ 1280 | desktop | extra columns or a side panel; tables and dashboards use every pixel |
 
 - Write "below 640" as `@media (max-width: 639px)`, "from 640" as `@media (min-width: 640px)`.
 - CSS custom properties cannot be used inside media / container conditions: write the number.
 - Inside your own blocks prefer container queries: `container-type: inline-size` on the block,
   `@container (min-width: 30rem)` inside it.
-- The app takes the full width; cap only text (`PageContent.Root maxWidth="readable"`).
+- The app takes the full width; cap only text (`Page.Root maxWidth="readable"`).
 - Required minimum: `<meta name="viewport" content="width=device-width, initial-scale=1">`, no
   `user-scalable=no`, no horizontal page scroll at 320px.
 
+## Intrinsic grids
+
+A layout inside a page needs no breakpoint: it takes its columns from the room it has.
+
+- The tiles of a page (KPI cards, charts, panels) are one `Page.Grid` with a
+  `Page.Cell span` per tile: it folds by its own width (below 30rem every tile takes the row,
+  then small tiles pair up, from 64rem each its span).
+- A grid inside one block (thumbnails, short fields of one record) is the block's own
+  `grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--prime-layout-tile-min-width)), 1fr))`
+  — `auto-fill`, so a lone item keeps its column width instead of stretching across the row.
+- A main column with a side column: flex-wrap with a large `flex-grow` on the main one; the side one
+  drops below when the main one runs out of room.
+
 ## What the kit already does
 
 Use these as they are; never wrap them in your own breakpoints.
 
 | Need | Built in |
 |---|---|
-| app frame | AppShell gutters 16 → 24 → 32; `AppHeader` un-sticks on screens lower than 480px, respects safe areas and, below 36rem of its width, drops the title icon, the title and its line of data truncate |
-| app navigation | Sidebar: on-canvas from 768px, an off-canvas panel below (`offCanvas="auto"`) opened by `AppHeader.MenuButton`, which shows itself below 768px; `BottomNav` in `AppShell.Footer` for 2–6 app sections on phones — flat or a floating glass capsule (`floating`) with an optional round `BottomNav.Action`, icons with or without labels (`iconOnly`); the shell hides it by itself while the Sidebar rail is on screen (from 768px with `offCanvas="auto"`) |
-| page panel | `PageToolbar` — search and filter first, one row when wide, stacked rows when narrow (below) |
-| page header | `AppHeader`: the page's tools wrap under the title (`AppHeader.Tools`), the primary action takes its own row when the search would be squeezed; a document page's `PageContent.Header`: actions wrap under the title |
-| switchers | SegmentedControl and Tabs never wrap: they scroll inside themselves (hidden scrollbar, faded edges, a vertical wheel scrolls them sideways), the active item is scrolled into view, stretched items tend to equal width, the indicator moves only after a person's choice; Tabs collapse icons and descriptions first |
+| app frame | `AppShell.Main` hands the page its gutters 16 → 24 → 32 and top air 24 → 32; `Page.TopBar` un-sticks on screens lower than 480px and respects the top safe area; in the bar the title and its line of data truncate |
+| app navigation | Sidebar: on-canvas from 768px, an off-canvas panel below (`offCanvas="auto"`) opened by the menu button `Page.TopBar` draws by itself while the Sidebar is off-canvas; `BottomNav` in `AppShell.Footer` for 2–6 app sections on phones — flat or a floating glass capsule (`floating`) with an optional round `BottomNav.Action`, icons with or without labels (`iconOnly`); the shell hides it by itself while the Sidebar rail is on screen (from 768px with `offCanvas="auto"`) |
+| page top bar | `Page.TopBar` lays out its groups from their natural widths: one line while they fit, then the tools on a line of their own, then icon-only buttons, then «⋯», and the heading truncates last ([below](#the-pages-top-bar--pagetopbar)). `Page.Header` in the flow: actions wrap under the title |
+| switchers | [Switchers](#switchers) never wrap or truncate: they scroll inside themselves |
 | tables | DataTable scrolls inside itself, edge shadows show hidden columns, `stickyFirstColumn`, `DataTable.ColumnsMenu` for a column chooser, the toolbar stacks below a 30rem table, sticky head off on short screens |
 | floating layers | Popover (opened from a Trigger), Dropdown, Select (and Datepicker, ColorPresets) never wider than the viewport − 16, 8 from the edges, flip when out of room; below 640 they open as a bottom sheet — scrim, grab handle, swipe down to close, page scroll locked; Tooltip and TagSelect stay anchored |
 | dialogs | Modal is a bottom sheet with a handle below 640 (swipe down closes it while `closeOnOutsideClick` allows); footer actions stack on phones and in a dialog narrower than 360px; `Sheet` is a bottom sheet for a short task at every width (centred at 560 on a tablet or desktop) and closes with a swipe down from its handle or header; a Drawer has no swipe — buttons, Escape and the scrim close it |
 | date picking | Datepicker shows two months and side presets only when they fit; otherwise one month and presets above |
 | system messages | Banner actions move under the text in a narrow container; Notification stays within the viewport with safe-area insets |
-| chat | `Message` bubbles fit their content in CSS and cap at 30rem and 85% of the chat column, file / contact / location cards at 16rem and 75%, a round video at its size token × 1.15 and the row width (the Composer's recording preview at 70%), so a chat works from 320px; the message menu is a bottom sheet below 640, the reaction bar opens on a long press; `Composer` takes its container's width, keeps 16px text and 44px hit areas on touch, and the recording bar covers the field without changing the row height; `VoicePlayer` shrinks its waveform to fit; `Chat` fills its pane, a chat beside its dialogs is `PageContent.Split` (one pane at a time when narrow); `Chat.Header` keeps the avatar, a title that truncates and icon-only actions, `Chat.Search` puts its counter and arrows after a shrinking field, `Chat.Pinned` truncates its line, the «к последним» button floats inside the thread at its bottom-end, and the Composer stays one row (paperclip · field · button) from 320px with its bars above it |
+| chat | `Message` bubbles fit their content in CSS and cap at 30rem and 85% of the chat column, file / contact / location cards at 16rem and 75%, a round video at its size token × 1.15 and the row width (the Composer's recording preview at 70%), so a chat works from 320px; the message menu is a bottom sheet below 640, the reaction bar opens on a long press; `Composer` takes its container's width, keeps 16px text and 44px hit areas on touch, and the recording bar covers the field without changing the row height; `VoicePlayer` shrinks its waveform to fit; `Chat` fills its pane, a chat beside its dialogs is `Page.Split` (one pane at a time when narrow); `Chat.Header` keeps the avatar, a title that truncates and icon-only actions, `Chat.Search` puts its counter and arrows after a shrinking field, `Chat.Pinned` truncates its line, the «к последним» button floats inside the thread at its bottom-end, and the Composer stays one row (paperclip · field · button) from 320px with its bars above it |
 | schedules and boards | `Gantt` scrolls inside itself with the header and the first column pinned; the first column narrows (12 → 10 → 6rem by the chart's width, or only the avatar); a long press on touch creates a one-unit bar; rows and days are virtualized. `Kanban` columns are 18rem from 40rem of board width, below that 85% of it with snapping so the next column peeks; the strip scrolls sideways inside the board |
 | cards and properties | Card templates stack and wrap in a narrow container; `DescriptionList` stacks label over value below 24rem of its width; FileUpload `layout="grid"` shows 5 · 4 · 3 · 2 tiles across by its own width |
 | fields | text ≥ 16px under a coarse pointer (no iOS zoom on focus); labels above fields; affixes in the field row |
 | codes | DigitInput cells 36–64px, `fullWidth` cells share a phone column |
 | touch | hover effects only under `(hover: hover)`; under `(pointer: coarse)` small controls get a 44px hit area; nothing is hover-only |
 
-## Page panel — `PageToolbar`
+## The page's top bar — `Page.TopBar`
 
-One strip at the top of the page holds up to five slots, each in a fixed place. The order is a rule:
-search and filter first, then the sections, the view and the primary action last; the active filters
-always sit right under the search and filter. Every row is 12 from the next; a slot alone in its row
-stretches to the full width. Write the slots in JSX in that order — it is the Tab order.
+The bar holds up to four groups ([what goes in each](composition.md#the-top-bar)) and lays them out
+by one plan chosen from their natural widths. As the width runs out it gives way in five steps, always
+in this order, and nothing ever overflows:
 
-| Slot | Holds | Place |
-|---|---|---|
-| `PageToolbar.Tools` | search + filter button: `SmartFilter.Toolbar` | first, the stretchy item of the top row |
-| `PageToolbar.Sections` | sections of the page: a `fullWidth` SegmentedControl with counts | after the Tools when wide; its own row under the chips when narrow |
-| `PageToolbar.View` | period, table / cards, columns | by content when wide; its own row when narrow |
-| `PageToolbar.Actions` | the primary action («Создать», «Сохранить 3 изменения») | top row, at the end, always |
-| `PageToolbar.Chips` | active filters: `SmartFilter.Chips` | right under the search and filter, only while there are chips |
-
-```text
-Wide (toolbar ≥ 56rem) — one row, chips under the search:
-[ Search ————————— ][ Filter ][ Sections ][ Period ][ + Create ]
-[ Город: Москва × ][ + Добавить фильтр ]
-
-Narrow — rows, every one 12 from the next:
-[ Search ———————————— ][ Filter ]   [ + ]
-[ Город: Москва × ][ + Добавить фильтр ]
-[ Section 1 ][ Section 2 ][ Section 3 ] —— stretch ——
-[ ⏱ 7 дней ———————————————————————————— ⌄ ]
-
-Narrow, no search — the sections take the first row:
-[ Overview ][ Activity ][ Resources ]
-[ ⏱ 24 часа ———————————————————————————————— ⌄ ]
-```
+1. **One line** — `Page.Heading`, `Page.Tools` and `Page.Actions` side by side while they fit.
+2. **Tools below** — the tools take a line of their own under the first one and fill its width: a
+   search (`SmartFilter.Toolbar`, `Input.Root`) grows first, the switchers share the rest and wrap
+   when one line is not enough. The actions stay on the first line beside the heading at every width.
+3. **Icons** — every Button with an icon shows only the icon, the secondary ones first, then the
+   primary; its label stays its accessible name and becomes its tooltip.
+4. **«⋯»** — the secondary Buttons fold into a menu (`labels.more`); the primary always stays.
+5. **The heading truncates** — only after every button step: the path levels first, then the title.
+
+`Page.Chips` is always a line of its own under everything, gone while no filter is set. The heading
+keeps its natural width: the bar sizes the title, so there is nothing to tune.
 
 ```tsx
 import {
   Button,
   Icon,
-  PageToolbar,
+  Page,
   SegmentedControl,
   Select,
   SmartFilter,
@@ -112,7 +112,7 @@ const FIELDS: SmartFilterField[] = [
   { key: "city", label: "Город", options: [{ value: "msk", label: "Москва" }] },
 ];
 
-export function OrdersPanel() {
+export function OrdersPage() {
   const [section, setSection] = useState("all");
   const [period, setPeriod] = useState("30d");
   const [filter, setFilter] = useState<SmartFilterValue>({});
@@ -126,78 +126,92 @@ export function OrdersPanel() {
       search={search}
       onSearchChange={setSearch}
     >
-      <PageToolbar.Root aria-label="Заказы">
-        <PageToolbar.Tools>
-          <SmartFilter.Toolbar />
-        </PageToolbar.Tools>
-        <PageToolbar.Sections>
-          <SegmentedControl.Root fullWidth value={section} onValueChange={setSection} aria-label="Раздел">
-            <SegmentedControl.Item value="all">
-              Все<SegmentedControl.Count>128</SegmentedControl.Count>
-            </SegmentedControl.Item>
-            <SegmentedControl.Item value="active">
-              В работе<SegmentedControl.Count>12</SegmentedControl.Count>
-            </SegmentedControl.Item>
-          </SegmentedControl.Root>
-        </PageToolbar.Sections>
-        <PageToolbar.View>
-          <Select.Root value={period} onValueChange={setPeriod}>
-            <Select.Trigger aria-label="Период">
-              <Select.Value />
-            </Select.Trigger>
-            <Select.Content>
-              <Select.Item value="7d">7 дней</Select.Item>
-              <Select.Item value="30d">30 дней</Select.Item>
-            </Select.Content>
-          </Select.Root>
-        </PageToolbar.View>
-        <PageToolbar.Actions>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Новый заказ
-          </Button.Root>
-        </PageToolbar.Actions>
-        <PageToolbar.Chips>
-          <SmartFilter.Chips />
-        </PageToolbar.Chips>
-      </PageToolbar.Root>
+      <Page.Root>
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Заказы</Page.Title>
+            <Page.Description>128 в работе · 6 ждут оплаты</Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Заказы">
+            <SegmentedControl.Root value={section} onValueChange={setSection} aria-label="Раздел">
+              <SegmentedControl.Item value="all">
+                Все<SegmentedControl.Count>128</SegmentedControl.Count>
+              </SegmentedControl.Item>
+              <SegmentedControl.Item value="active">
+                В работе<SegmentedControl.Count>12</SegmentedControl.Count>
+              </SegmentedControl.Item>
+            </SegmentedControl.Root>
+            <SmartFilter.Toolbar />
+            <Select.Root value={period} onValueChange={setPeriod}>
+              <Select.Trigger aria-label="Период">
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Content>
+                <Select.Item value="7d">7 дней</Select.Item>
+                <Select.Item value="30d">30 дней</Select.Item>
+              </Select.Content>
+            </Select.Root>
+          </Page.Tools>
+          <Page.Actions>
+            <Button.Root variant="soft" tone="neutral">
+              <Button.Icon>
+                <Icon name="action.download" />
+              </Button.Icon>
+              Экспорт
+            </Button.Root>
+            <Button.Root>
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              Новый заказ
+            </Button.Root>
+          </Page.Actions>
+          <Page.Chips>
+            <SmartFilter.Chips />
+          </Page.Chips>
+        </Page.TopBar>
+        <Page.Body>{/* the orders table */}</Page.Body>
+      </Page.Root>
     </SmartFilter.Root>
   );
 }
 ```
 
-- Write the slots in the reading order of the wide layout; the toolbar reorders them visually.
-- One tier for the whole panel (default `m`): never `size` on one control inside — wrapped rows must
-  stay level. A denser page wraps the toolbar in `<ControlSizeProvider value="s">` and gives
-  `SmartFilter.Root` and `Select.Root` `size="s"` too — they do not read the host tier.
-- The primary action never leaves the top row. On a phone it may become icon-only with `aria-label`;
-  it never disappears.
+- One tier for the whole bar (default `m`): never `size` on one control inside — wrapped lines must
+  stay level. A denser page wraps the bar in `<ControlSizeProvider value="s">`; every kit control
+  inside takes that tier.
+- A Button without an icon keeps its label at every step and leaves the bar less room before it
+  folds: give each one a `Button.Icon`.
+- A SegmentedControl in `Page.Tools` needs no `fullWidth`: the bar sets it.
+- The primary action is on screen at every width — as its icon at the narrowest; it never folds and
+  never disappears.
 - Section totals go into `SegmentedControl.Count`, not into stat cards above the table.
-- A long form saves through the panel's action with a count («Сохранить 3 изменения»), never a sticky
-  bar at the bottom of a phone screen.
-- The search first, the filter button after it at its own width (`SmartFilter.Toolbar` lays them out);
-  chips under the panel, one tier smaller, wrapping, with «Сбросить все».
-- Do not duplicate search: if the panel has one, the list below filters by it.
+- A long form saves through the bar's primary action with a count («Сохранить 3 изменения»), never a
+  sticky bar at the bottom of a phone screen.
+- Do not duplicate search: if the bar has one, the list below filters by it.
 
 ## Switchers
 
-- **Three width modes:** by content (`fullWidth` off), full width (`fullWidth`), full width only when
-  narrow (a `fullWidth` SegmentedControl inside `PageToolbar.Sections` — the toolbar decides).
-- Sections of a page → SegmentedControl in `PageToolbar.Sections`; panels inside a card or a section →
+- **Three width modes:** by content (`fullWidth` off), full width (`fullWidth`), full width only on
+  a line of its own (a SegmentedControl in `Page.Tools` — the bar decides).
+- Sections of a page → SegmentedControl in `Page.Tools`; panels inside a card or a section →
   Tabs (the folder look belongs to its panel).
-- Items that do not fit scroll inside the switcher — never wrap to a second line, never truncate. The
-  switcher is a sideways `ScrollContainer`: its hidden edges fade, a vertical mouse wheel scrolls it
-  sideways, touch pans it.
+- Every switcher — Tabs, SegmentedControl, a horizontal ButtonGroup and BottomNav — scrolls inside
+  itself when its items do not fit: never a second line, never a truncated item. Its hidden edges
+  fade, a vertical mouse wheel scrolls it sideways, touch pans it, the current item is scrolled into
+  view, and the indicator moves only after a person's choice. A SegmentedControl whose items all have
+  icons collapses to icons (each named by its tooltip) before it scrolls.
+- Your duty as its host: give the switcher a bounded width. A flex or grid child that holds one sets
+  `min-width: 0`, otherwise the switcher grows the row instead of scrolling
+  ([foundation §9](reference/foundation.md#9-layout-and-responsiveness)).
 - A long page split into sections (settings, dashboard): the switcher scrolls to the section and marks
   the current one.
 
 ## List + details, side panels
 
-- A list people work through record by record (mail, a messenger, tickets) is `PageContent.Split`:
-  the list in a 16–20rem column with the details beside it from 48rem of the split's own width, one
-  pane at a time with `PageContent.BackButton` below it. Details opened now and then from a table
+- A list people work through record by record (mail, a messenger, tickets) is `Page.Split`:
+  the list (`Page.List`) in a 16–20rem column with the details (`Page.Detail`) beside it from 48rem
+  of the split's own width, one pane at a time with `Page.BackButton` below it. Details opened now and then from a table
   open in a Drawer.
 - A side panel of details becomes full-screen on a phone (`Drawer.Content` is full width below 640).
 - Its period / view controls stay visible on every tab of the panel.
@@ -205,14 +219,11 @@ export function OrdersPanel() {
 ## Components on narrow widths — what you still decide
 
 **Tables.** Let DataTable scroll inside itself; offer a column chooser (`DataTable.ColumnsMenu` in
-`toolbar`; the key column `hideable: false`); `stickyFirstColumn` for the name. On phones a table / cards switch in `PageToolbar.View` is fine — silently dropping columns
+`toolbar`; the key column `hideable: false`); `stickyFirstColumn` for the name. On phones a table / cards switch in `Page.Tools` is fine — silently dropping columns
 by breakpoint is not. Never ask to rotate the phone.
 
-**Card grids.** The tiles of a page are `PageContent.Grid` + `PageContent.Cell span`: it folds by its own
-width (below 30rem every tile takes the row, then small tiles pair up, from 64rem each its span),
-not by the window. Tiles of a row share one height; a card with a list shows 6–8 rows and scrolls inside
-(`ScrollContainer`). A grid inside one block (thumbnails, fields) is the block's own
-`repeat(auto-fill, minmax(min(100%, …), 1fr))`.
+**Card grids.** [Intrinsic grids](#intrinsic-grids), never a breakpoint. Tiles of a row share one
+height; a card with a list shows 6–8 rows and scrolls inside (`ScrollContainer`).
 
 **Forms.** One column on phones. Pairs («от / до», two buttons) wrap with
 `flex: 1 1 calc(var(--prime-space-24) * 2)` instead of shrinking. Labels above fields (the kit's
@@ -232,7 +243,7 @@ images with `srcset` + `sizes` (Thumbnail and Avatar already reserve their box).
 | minimum touch target (WCAG 2.5.8 AA) | 24 × 24px or a free 24px circle |
 | recommended target for primary actions and `(pointer: coarse)` | 44 × 44px |
 | reflow without horizontal scroll (WCAG 1.4.10) | 320px wide = 1280px at 400% zoom |
-| text contrast | 4.5:1; large (≥ 24px) 3:1 |
+| text contrast | 4.5:1; large text (≥ 24px, or ≥ 18.66px bold) 3:1 |
 
 - Nothing important only on hover: whatever hover shows is reachable by focus and visible (or a tap
   away) under `(hover: none)`. Your own hover styles go inside `@media (hover: hover)`.
@@ -260,7 +271,7 @@ Target CLS ≤ 0.1: nothing moves while loading or when a filter changes.
 Drag the window through 320, 390, 768, 1024, 1280 and 1920px — continuously, not only at these points.
 
 - [ ] No horizontal page scroll at any width (tables and switchers scroll inside themselves).
-- [ ] The primary action is in the top row of the panel at every width.
+- [ ] The primary action is on screen at every width — never hidden ([the page's top bar](#the-pages-top-bar--pagetopbar)).
 - [ ] Every item alone in its row stretches; items of stretched switchers are equal.
 - [ ] All controls in a row share one height; no «staircase» after a wrap.
 - [ ] Text never overlaps and is cut only at its own block's edge; cut text has a tooltip or `title`.