prime-ui-kit 0.16.0 → 0.17.0

package/dist/skill/anti-slop.md

@@ -55,13 +55,13 @@ Text colour is not CSS: [foundations.md → Text colour](foundations.md#text-col
 ```tsx good
 // good — DataTable already is a filled block; a titled section is enough
 // declare: const payments: { id: string; client: string }[]
-<PageContent.Section label="Последние оплаты">
+<Page.Section label="Последние оплаты">
   <DataTable
     columns={[{ id: "client", header: "Клиент", accessor: "client" }]}
     rows={payments}
     getRowKey={(row) => row.id}
   />
-</PageContent.Section>
+</Page.Section>
 ```
 
 ## 3a. Hover that merges with the neighbour
@@ -225,7 +225,7 @@ The same for one value in several units — one heading, the fields in a row, th
 /* good — proximity scale */
 .form { display: grid; gap: var(--prime-space-8); }   /* group → group 32 */
 .group { display: grid; gap: var(--prime-space-5); }  /* field → field 20 */
-/* block → block 24 and section → section 40 come from PageContent.Body / PageContent.Section */
+/* block → block 24 and section → section 40 come from Page.Body / Page.Section */
 ```
 
 ## 7. `div` instead of a ready component
@@ -242,7 +242,7 @@ The same for one value in several units — one heading, the fields in a row, th
 | `<Button.Root onClick={() => location.assign(url)}>` | `<Button.Root asChild><a href={url}>…</a></Button.Root>` or `LinkButton` |
 | a hand-built spinner, shimmer, grey placeholder box or «Loading…» text | `loading` on Button / Select / DataTable; a region: `Skeleton` of its content inside `Crossfade`; no shape to hold: `Spinner` |
 | `{loading ? <Spinner /> : <List />}` — a state that flips | `<Crossfade state={status}>` around the region, `Skeleton` while loading |
-| a search Input + a row of filter Selects above a table | `SmartFilter` in the page's `PageToolbar` ([where the filters go](composition.md#where-the-filters-go)) |
+| a search Input + a row of filter Selects above a table | `SmartFilter` in the page's top bar: its toolbar in `Page.Tools`, its chips in `Page.Chips` ([where the filters go](composition.md#where-the-filters-go)) |
 | a grid of «label: value» text pairs for one record | `DescriptionList.Root` + `DescriptionList.Item` |
 | a Modal hand-built as «Удалить?» with your own pending flag | `ConfirmDialog.Root` with an async `onConfirm` |
 | a `<fieldset>` reset by hand, or `disabled` on every field while saving | `<Fieldset label disabled={saving}>` |
@@ -254,7 +254,7 @@ The same for one value in several units — one heading, the fields in a row, th
 | an `<img>` with your own radius and loading box | `Thumbnail.Root` / `Avatar.Root` |
 | a lightbox, or a Modal with an `<img>` | `Gallery` (opens `MediaViewer` itself) or `MediaViewer` |
 | a `position: fixed` bottom tab bar | `BottomNav` in `AppShell.Footer` |
-| a menu state and a menu button wired by hand to open the phone Sidebar | nothing: the `AppHeader` draws the menu button; another trigger reads `useAppShellNav()` ([the app frame](layouts.md#app-frame-once-per-app)) |
+| a menu state and a menu button wired by hand to open the phone Sidebar | nothing: the page's `Page.TopBar` draws the menu button; another trigger reads `useAppShellNav()` ([the app frame](layouts.md#app-frame-once-per-app)) |
 | a bottom panel built from a Drawer or a `div` | `Sheet` |
 
 ## 7a. Fighting the table
@@ -287,6 +287,102 @@ The same for one value in several units — one heading, the fields in a row, th
 />
 ```
 
+## 7b. A top bar out of its groups
+
+The bar lays itself out only from its four groups ([the top bar](composition.md#the-top-bar)); a
+bar assembled any other way cannot give way on a narrow panel.
+
+The title as a row of its own under the path:
+
+```tsx partial
+// bad — the path, then the title on a second line; the path repeats the title
+<Page.Heading>
+  <Breadcrumb.Root>
+    <Breadcrumb.Item href="/invoices">Счета</Breadcrumb.Item>
+    <Breadcrumb.Item current>Счёт № 1042</Breadcrumb.Item>
+  </Breadcrumb.Root>
+</Page.Heading>
+<Typography as="h1" variant="heading-m">Счёт № 1042</Typography>
+```
+
+```tsx good
+// good — the path ends in the title: the levels above, then Page.Title, on one line
+<Page.TopBar>
+  <Page.Heading>
+    <Breadcrumb.Root>
+      <Breadcrumb.Item href="/invoices">Счета</Breadcrumb.Item>
+    </Breadcrumb.Root>
+    <Page.Title>Счёт № 1042</Page.Title>
+    <Page.Description>Отправлен · оплатить до 14 октября</Page.Description>
+  </Page.Heading>
+</Page.TopBar>
+```
+
+Buttons in two places, buttons with only text:
+
+```tsx partial
+// bad — export beside the title, the primary among the tools; no icons, so nothing can collapse
+<Page.Heading>
+  <Page.Title>Заказы</Page.Title>
+  <Button.Root variant="soft" tone="neutral">Экспорт</Button.Root>
+</Page.Heading>
+<Page.Tools aria-label="Заказы">
+  <SmartFilter.Toolbar />
+  <Button.Root>Новый заказ</Button.Root>
+</Page.Tools>
+```
+
+```tsx good
+// good — every button in one Page.Actions, each with an icon, the primary last
+<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>
+```
+
+`SmartFilter.Root` inside the bar:
+
+```tsx partial
+// bad — the filter's state wraps one group, its chips land outside it
+<Page.TopBar>
+  <SmartFilter.Root fields={FIELDS}>
+    <Page.Tools aria-label="Заказы">
+      <SmartFilter.Toolbar />
+    </Page.Tools>
+  </SmartFilter.Root>
+</Page.TopBar>
+```
+
+```tsx good
+// good — SmartFilter.Root draws nothing and wraps the page; toolbar and chips sit in their groups
+// declare: const FIELDS: Parameters<typeof SmartFilter.Root>[0]["fields"]
+<SmartFilter.Root fields={FIELDS}>
+  <Page.Root>
+    <Page.TopBar>
+      <Page.Heading>
+        <Page.Title>Заказы</Page.Title>
+      </Page.Heading>
+      <Page.Tools aria-label="Заказы">
+        <SmartFilter.Toolbar />
+      </Page.Tools>
+      <Page.Chips>
+        <SmartFilter.Chips />
+      </Page.Chips>
+    </Page.TopBar>
+  </Page.Root>
+</SmartFilter.Root>
+```
+
 ## 8. Decoration and filler
 
 - No emoji in UI. No icon next to every label — an icon earns its place when it speeds recognition

package/dist/skill/api-contract.md

@@ -25,7 +25,7 @@ import type { ControlSize, PaletteColor, TextTone, Tone, Variant } from "prime-u
 | Text value | native `value` / `onChange` + `onValueChange(string)` | Input (`Input.Field`), Textarea. |
 | Other state | `x` / `defaultX` / `onXChange(x)` | Badge `pressed`; Button `pressed`; ChartFrame `hiddenSeries`; Chat `selected`, `search`; ChatList `search`; ColorPicker `format`; CommandMenu `search`; Composer `recordMode`; DataTable `hiddenColumns`, `page`, `sort`, `selected`, `expanded`, `collapsedGroups`; ExampleFrame `viewport`, `colorScheme`; Gallery `index`; Gantt `scale`; Kanban `columnOrder`; MediaViewer `index`; Message.Media `index`; Select `search`; SmartFilter `search`; VideoNote `playing`, `transcriptExpanded`; VoicePlayer `rate`, `playing`, `transcriptExpanded`; Sidebar `mode`. |
 | Checked | `checked` / `defaultChecked` / `onCheckedChange(checked)` | Checkbox, Dropdown.CheckboxItem, Switch, Thumbnail. |
-| Open | `open` / `defaultOpen` / `onOpenChange(open)` | ColorPresets, CommandMenu, ConfirmDialog, Datepicker, Drawer, Dropdown, Gallery, MediaViewer, Message.Media, Modal, PageContent.Split, Popover, Select, Sheet, TagSelect, Tooltip, Sidebar, Sidebar.Group, Sidebar.Sub. |
+| Open | `open` / `defaultOpen` / `onOpenChange(open)` | ColorPresets, CommandMenu, ConfirmDialog, Datepicker, Drawer, Dropdown, Gallery, MediaViewer, Message.Media, Modal, Popover, Select, Sheet, TagSelect, Tooltip, Page.Split, Sidebar, Sidebar.Group, Sidebar.Sub. |
 | Dismiss | `closeOnOutsideClick` (default `true`), `closeOnEscape` (default `true`) | Both on every overlay that opens a layer: the dialogs, the floating panels, the panels of Select, TagSelect, Datepicker and ColorPresets, the off-canvas Sidebar and the reaction bar of a message. `ConfirmDialog` takes both with `closeOnOutsideClick` default `false` (Escape is held while `onConfirm` runs). Tooltip and Notification take neither. A form holds closing with `Modal.Guard` / `Drawer.Guard` / `Sheet.Guard`. |
 | Selection mode | `multiple` | One vs many (Select, Accordion) — never `type`. `mode` only for structurally different values (Datepicker `single \| range`). |
 | Status words | `selected`, `current`, `pressed` | `current` marks a navigation location (`Sidebar.Item`, `Breadcrumb.Item`) and sets `aria-current`; `pressed` a toggle button. |

package/dist/skill/cheatsheet.md

@@ -78,24 +78,28 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 
 ## Page title and header
 
-- An app page titles itself in its header: `<AppHeader.Title>` + `<AppHeader.Description>` with a line of data («128 в работе · 6 ждут оплаты») — not a `PageContent.Header` in main and not a sentence about the page.
-- The page's tools — its own search and filter, sections, the view, the primary action — are a `<PageToolbar.Root>` in `<AppHeader.Tools>`; the page's other buttons in `<AppHeader.Actions>` — not a global search, notifications or app-wide buttons: the header row is per page.
-- A nested record: `Breadcrumb` + `<AppHeader.Separator />` + `<AppHeader.Title>` with the record's name — not a breadcrumb in main.
-- A document page (settings, a long form, help) is the only one with `<PageContent.Header>` + `PageContent.Title` in main, and then its header has no title — never two titles, never no `<h1>`.
+- The app is navigation and the page: everything at the top belongs to the page's `<Page.Root>` — not an app-wide header, a global search or notifications above every page.
+- A work screen (a list, a board, a chat, a record) titles itself in `<Page.TopBar>`: `<Page.Heading>` with `<Page.Title>` + `<Page.Description>` carrying a line of data («128 в работе · 6 ждут оплаты») — not a sentence about the page.
+- The bar holds only its four groups: `<Page.Heading>`, `<Page.Tools aria-label>` (sections, `<SmartFilter.Toolbar />`, the view — in reading order), `<Page.Actions>`, `<Page.Chips>` (`<SmartFilter.Chips />`) — not a hand-made flex row of title, tabs, search and buttons ([the top bar](composition.md#the-top-bar)).
+- A nested record: `<Breadcrumb.Root>` first in `<Page.Heading>`, then `<Page.Title>` with the record's name — the path ends in the title on one line; not a title row under the path, not a breadcrumb in the body.
+- Every button of the page goes into one `<Page.Actions>`, secondary first, the primary last, each with a `<Button.Icon>` beside its label — not buttons split between two places, not a button with only text.
+- A filtered page: `<SmartFilter.Root>` wraps `<Page.Root>` — it draws nothing; not `SmartFilter.Root` inside the bar.
+- No size knob on the title: the bar sizes the heading and gives way by width itself ([the five steps](responsive.md#the-pages-top-bar--pagetopbar)).
+- A document page (settings, a long form, help) and an overview (a dashboard) put `<Page.Header>` with its `<Page.Heading>` in the flow — the large title — with an optional `<Page.TopBar collapse>` above it that repeats the title once it scrolls away. One `<Page.Title>` per page — never two titles, never no `<h1>`.
 
 ## Cards and surfaces
 
 - `Card.Root` only for a bounded block with its own title: a KPI tile (`variant="stat-trend"`), a settings panel (`variant="panel"`), side facts — not around a whole section, a form field or a page.
 - Never a `DataTable` inside a Card — the table is already a filled block; a card in a card only sparingly ([the rule](foundations.md#card-in-a-card)).
-- Section without a card: `<PageContent.Section label="…">` + the content (a link or button beside the heading in `PageContent.Actions`) — not a hand-made `<section>` + `Typography as="h2"` + own gap.
-- The tiles of a screen (KPI cards, charts, panels): one `<PageContent.Grid>` with a `<PageContent.Cell span>` per tile — not a grid per row (the rows would stand 24 apart instead of 16).
+- Section without a card: `<Page.Section label="…">` + the content (a link or button beside the heading in `Page.Actions`) — not a hand-made `<section>` + `Typography as="h2"` + own gap.
+- The tiles of a screen (KPI cards, charts, panels): one `<Page.Grid>` with a `<Page.Cell span>` per tile — not a grid per row (the rows would stand 24 apart instead of 16).
 - Depth from fill, not lines: no borders around blocks; `<Divider />` only inside a block.
 - Every scroll region is a `ScrollContainer` — never `overflow: auto` on a `div`: its hidden edges fade by themselves (`edges="shadow"` on a filled surface, `"none"` only for a page column), `scrollbar="hidden"` on strips, `snap` on strips of cards, `lock` to hold a list still, `anchor="end"` for a log. Kit components already scroll through it; do not wrap them again.
 - Tabs are a bar, not a container: `Tabs.Root` stands in the host's padding and the panel content goes straight into `Tabs.Panel` — never a Card or a padded `div` around the tabs or inside a panel. In a Modal / Drawer, `Tabs.Root` wraps `X.Header` + `X.Body` and `Tabs.List` goes last into the header — not a tab strip at the top of the body.
 
 ## Tables
 
-- A list page is a `<DataTable columns rows getRowKey>` under the page's `<SmartFilter.Root fields value onValueChange>` with `<SmartFilter.Toolbar />` + `<SmartFilter.Chips />` in its `PageToolbar` ([where the filters go](composition.md#where-the-filters-go)); filter rows with `matchesSmartFilter` — not a search Input and a row of Selects above the table.
+- A list page is a `<DataTable columns rows getRowKey>` under the page's `<SmartFilter.Root fields value onValueChange>` with `<SmartFilter.Toolbar />` in its `Page.Tools` and `<SmartFilter.Chips />` in its `Page.Chips` ([where the filters go](composition.md#where-the-filters-go)); filter rows with `matchesSmartFilter` — not a search Input and a row of Selects above the table.
 - Search over a table or a list page is always SmartFilter, even with no filter fields yet (`fields={[]}` is a plain search that grows into filters). A search `Input` only outside a filtered list: inside a picker, a settings section, a panel.
 - Paging is built in: `paging="pages"` (default) with `pageSize`, `paging="infinite"` for feeds, `paging="none"` for short lists — not a separate `<Pagination>` under a DataTable.
 - Long lists are virtualized inside the kit: pass the whole array to `DataTable` (with `scrollHeight` or `paging="infinite"`; over 100 rows — grouped, `onReorder` and `renderExpanded` bodies render every row, keep those short or paged), `TagSelect options`, `Chat.Messages items`, `Gantt rows` — never slice it by hand, never wrap a kit list in react-window / react-virtual or your own windowing. Big remote data is still paged or loaded on scroll by the server (`source="server"`, `onLoadMore`).
@@ -167,12 +171,12 @@ State change is continuous in the whole kit: every region that changes what it s
 - Refreshing data already on screen: keep it, set `aria-busy` — not back to a skeleton on every refetch.
 - Table states in place: `loading` (+ `loadingRows`), `empty`, `loadError` on `DataTable` — the head and toolbar stay.
 - First run of a page or region: `EmptyPage.Root` + `EmptyPage.Icon` + `EmptyPage.Title` + `EmptyPage.Description` + `EmptyPage.Actions` with one action — not «Здесь пока ничего нет».
-- Page-level persistent problem: `<Banner.Root tone="danger">` first in `PageContent.Body`; the result of an action: `useNotifications().notify({ tone, title })`.
+- Page-level persistent problem: `<Banner.Root tone="danger">` first in `Page.Body`; the result of an action: `useNotifications().notify({ tone, title })`.
 
 ## Sidebar
 
 - Brand header: `Sidebar.Header` > `Sidebar.Brand href description` (with `Sidebar.BrandLogo`) + `<Sidebar.Toggle variant="header" />` — not a Toggle in the footer when the rail has a brand.
-- Off-canvas: `offCanvas="auto"` (default, below 768px), `"always"` for navigation behind a menu at any width, `"never"` for a rail that always stays; the AppHeader draws the menu button that opens it — no menu state of your own; another trigger reads `useAppShellNav()`.
+- Off-canvas: `offCanvas="auto"` (default, below 768px), `"always"` for navigation behind a menu at any width, `"never"` for a rail that always stays; the page's `Page.TopBar` draws the menu button that opens it — no menu state of your own; another trigger reads `useAppShellNav()`.
 - Every item is a link (`href` or `asChild` with the router `NavLink`; `current` marks the page), with a `Sidebar.ItemIcon` on the [top-level items and sub-list parents](layouts.md#sidebar-icons).
 - The signed-in user: `Sidebar.Account` inside `Dropdown.Trigger` at the end of `Sidebar.Footer`.
 - Structure: everyday places on top without a label, categories as `Sidebar.Group label collapsible` (one short word, 3–7 items), views of one section as `Sidebar.Sub` (one level, the parent only discloses) — not every group folded, not a sub-list inside a sub-list.
@@ -183,20 +187,19 @@ State change is continuous in the whole kit: every region that changes what it s
 
 Full rules: [responsive.md](responsive.md).
 
-- The page panel is `<PageToolbar.Root>` with `Tools` (`SmartFilter.Toolbar`), `Sections` (a `fullWidth` SegmentedControl), `View`, `Actions`, `Chips` — it orders and wraps them itself ([the page panel](responsive.md#page-panel--pagetoolbar)); not a hand-made flex row of tabs, search and buttons.
 - Rearrange, never hide: every desktop function is on the phone, in another place or a menu — not `display: none` below a breakpoint.
 - Breakpoints only in [their scope](responsive.md#breakpoints); inside a page — [intrinsic grids](responsive.md#intrinsic-grids) and container queries.
 - A wide table scrolls inside itself; offer `DataTable.ColumnsMenu` in its `toolbar` — never drop columns by breakpoint, never hand-build the chooser.
 - A row that opens a record page is `getRowHref` (a real link: ⌘-click, new tab), a row that opens a drawer is `onRowClick` — never `navigate()` in `onRowClick`, never your own `event.target` checks for buttons in the row.
-- A list + detail screen is `PageContent.Split` in a `PageContent.Root fill` page, its records a `List` (`current` on the open one) — never ghost Buttons with a soft current; a full-height table is `scrollHeight="fill"` — never a height computed from `100vh`.
+- A list + detail screen is `Page.Split` (`Page.List`, `Page.Detail`) in a `Page.Root fill` page, its records a `List` (`current` on the open one) — never ghost Buttons with a soft current; a full-height table is `scrollHeight="fill"` — never a height computed from `100vh`.
 - App sections on phones: `BottomNav` in `AppShell.Footer` — not in Main, not `position: fixed`, no own media query: the shell hides the footer while the Sidebar rail is on screen; a short task from the bottom edge: `Sheet` — Select, Dropdown, Popover and Modal become sheets below 640 by themselves.
 - Your hover styles inside `@media (hover: hover)`; nothing hover-only. Do not wrap kit fields to raise their text for iOS — they keep 16px on touch already.
 - A long form saves through the panel action with a count («Сохранить 3 изменения») — not a sticky bar at the bottom of a phone.
-- Sticky comes from the kit (`AppHeader` with `AppHeader.Tools`, the DataTable head, `stickyFirstColumn`, the Gantt header) — not your own `position: sticky` bar.
+- Sticky comes from the kit (`Page.TopBar`, the DataTable head, `stickyFirstColumn`, the Gantt header) — not your own `position: sticky` bar.
 
 ## Spacing and values
 
-- Gaps are `gap` on the parent with `--prime-space-N` (N × 4px): 8 in a row of buttons, 16 tile → tile, 20 field → field, 32 group → group; `PageContent` already spaces blocks 24 and sections 40 — not margins, not outer padding.
+- Gaps are `gap` on the parent with `--prime-space-N` (N × 4px): 8 in a row of buttons, 16 tile → tile, 20 field → field, 32 group → group; `Page` already spaces blocks 24 and sections 40 — not margins, not outer padding.
 - Tokens only: `var(--prime-space-4)`, `var(--prime-color-text-secondary)`, `var(--prime-radius-m)` — never raw `px` / `rem` / hex, never `--prime-ref-*`, never inline `style`.
 - Text through `Typography` roles (`title-m`, `title-s`, `body-m`, `caption`) and its `tone` — not `font-size` or `color` in CSS ([text colour](foundations.md#text-colour)).
 
@@ -231,19 +234,21 @@ applyTheme("light");
 The frame itself (providers, `AppShell` with the `Sidebar`) is built once too: copy it from
 [layouts.md](layouts.md#app-frame-once-per-app).
 
-A document page (a form) — its title is in main, its header carries none:
+A document page (a form) — its large title stands in the flow:
 
 ```tsx
-import { Button, Icon, Input, PageContent } from "prime-ui-kit";
+import { Button, Icon, Input, Page } from "prime-ui-kit";
 import styles from "./ProfilePage.module.css"; // .form { display: grid; gap: var(--prime-space-5); }
 
 export function ProfilePage() {
   return (
-    <PageContent.Root maxWidth="readable">
-      <PageContent.Header>
-        <PageContent.Title>Профиль</PageContent.Title>
-      </PageContent.Header>
-      <PageContent.Body>
+    <Page.Root maxWidth="readable">
+      <Page.Header>
+        <Page.Heading>
+          <Page.Title>Профиль</Page.Title>
+        </Page.Heading>
+      </Page.Header>
+      <Page.Body>
         <form className={styles.form} noValidate onSubmit={(event) => event.preventDefault()}>
           <Input.Root label="Рабочая почта" hint="На неё придут счета" required>
             <Input.Wrapper>
@@ -255,8 +260,8 @@ export function ProfilePage() {
           </Input.Root>
           <Button.Root type="submit">Сохранить</Button.Root>
         </form>
-      </PageContent.Body>
-    </PageContent.Root>
+      </Page.Body>
+    </Page.Root>
   );
 }
 ```

package/dist/skill/checklist.md

@@ -5,8 +5,11 @@ checks.
 
 ## Composition
 - [ ] The screen starts from the closest working screen and keeps its skeleton ([screens](composition.md#screens)).
-- [ ] An app page titles itself in its `AppHeader`; only a document page has `PageContent.Header` ([page skeleton](composition.md#1-page-skeleton)).
-- [ ] The header row holds only this page's title, buttons and tools — nothing app-wide ([page skeleton](composition.md#1-page-skeleton)).
+- [ ] One `Page.Title` per page, always an `<h1>`: a work screen titles itself in the `Page.Heading` of its `Page.TopBar`, a document page or an overview in a `Page.Header` in the flow ([page skeleton](composition.md#1-page-skeleton)).
+- [ ] The top bar holds only this page's groups — `Page.Heading`, `Page.Tools`, `Page.Actions`, `Page.Chips` — no app-wide header or global search ([the top bar](composition.md#the-top-bar)).
+- [ ] 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 Card only for a standalone titled block — never around a table, a single field or the page ([surfaces](composition.md#4-surfaces)).
 
 ## UX ([ux.md](ux.md))
@@ -72,7 +75,8 @@ checks.
 
 ## Themes and widths
 - [ ] The screen passes the responsive checklist in both themes ([responsive](responsive.md#checklist-before-handing-a-screen-over)).
-- [ ] On a phone the Sidebar opens from the menu button the header draws; the page title stays in the header ([app frame](layouts.md#app-frame-once-per-app)).
+- [ ] On a phone the Sidebar opens from the menu button the top bar draws; the page title stays in the bar ([app frame](layouts.md#app-frame-once-per-app)).
+- [ ] At every width the bar fits: tools on their own line, then icon-only buttons, then «⋯», the primary always on screen ([the page's top bar](responsive.md#the-pages-top-bar--pagetopbar)).
 
 ## Keyboard and a11y
 - [ ] Every action is reachable by Tab in reading order and works with Enter / Space ([interaction](responsive.md#interaction-and-accessibility)).

package/dist/skill/choosing.md

@@ -15,7 +15,7 @@ confuse. Links: [components.md](components.md). Whole screens: [composition.md](
 | learn what happened, how far along it is, or watch a region load and change state; say it to a screen reader | Status and loading — Banner, Notification, ProgressBar, ProgressCircle, Spinner, Skeleton, Crossfade, EmptyPage, VisuallyHidden |
 | move between places: app sections, panels of a screen, the records of a list, the path, pages, steps | Navigation — Tabs, Breadcrumb, Pagination, List, Stepper, Sidebar, BottomNav |
 | see something on top of the page, or a photo or video full screen | Overlays — Tooltip, Popover, Dropdown, Modal, ConfirmDialog, Drawer, Sheet, CommandMenu, MediaViewer |
-| get the app frame and the structure of a page, or a whole ready-made screen block (sign-in, sign-up, password reset, code) | Page — AppShell, AppHeader, PageContent, PageToolbar, Divider, ScrollContainer, LoginForm |
+| get the app frame and the structure of a page, or a whole ready-made screen block (sign-in, sign-up, password reset, code) | Page — AppShell, Page, Divider, ScrollContainer, LoginForm |
 | drag things by hand | Interaction — Dnd (a status board: Kanban in Data display) |
 | style text | Foundations — Typography |
 
@@ -122,12 +122,13 @@ Drawer menu.
 `Sidebar.Header` — at the header's end while expanded, a small round button on the rail's edge while
 compact (the default for a branded rail); `Sidebar.Toggle` (`variant="item"`) in `Sidebar.Footer` when
 the rail has no brand header. On phones the off-canvas Sidebar opens from the menu button the
-`AppHeader` draws by itself; a trigger of your own reads `useAppShellNav()`. The bar at the top of the
-panel is the page's `AppHeader`: the page title (`AppHeader.Title` + a line of data), the page's own
-buttons and its tools — [where the tools and filters go](composition.md#where-the-filters-go). Only a
-document page (settings, a long form, help) has its title in main, `PageContent.Header`, and no title
-in the header. A record opened from a table: its own page → DataTable `getRowHref`; in place →
-`onRowClick` + Drawer; a list worked through record by record → `PageContent.Split` with a `List` of
+page's `Page.TopBar` draws by itself; a trigger of your own reads `useAppShellNav()`. There is no
+app-wide header: the bar at the top of the panel is the page's `Page.TopBar` — on a work screen the
+title group (`Page.Heading`), the page's tools (`Page.Tools`), its buttons (`Page.Actions`) and the
+active filters (`Page.Chips`) — [the top bar](composition.md#the-top-bar). A document
+page (settings, a long form, help) or an overview has its large title in the flow (`Page.Header`
+outside the bar), with an optional `Page.TopBar collapse` that repeats it once it scrolls away. A record opened from a table: its own page → DataTable `getRowHref`; in place →
+`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) or a `ChatList` of the
 conversations. 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
@@ -152,7 +153,7 @@ conversations. Sections of a long rail → `Sidebar.Group collapsible`; a sectio
 | Gallery / MediaViewer / Thumbnail | Thumbnail: one picture or video of an object in a list, card or picker (selectable with `checked`). Gallery: an album of 1–10 photos and videos laid out by their ratios; it opens MediaViewer itself. MediaViewer: the full-screen viewer on its own, opened from your own thumbnails or a button (`getOrigin` for the zoom out of the tile). A grid of many images to browse → a CSS grid of Thumbnails, not a Gallery. |
 | Sparkline / ChartFrame | Sparkline: one series as a headline number with its change and a small line or bars you can scrub (`variant="bars"` for signed values). ChartFrame: a panel around a real chart (axes, several series, legend, tooltip, states) drawn by a library or your SVG. Rows to compare → DataTable. |
 | VoicePlayer / VideoNote | The same player props (`src`, `duration`, `playing`, transcript, `transfer`). VoicePlayer: audio, a waveform seek slider and a playback rate. VideoNote: a round face-to-camera video with a `poster`; alone in `Message.Root` it is the message. A video with controls → `Thumbnail.Video` / `Message.Media`. |
-| Card / plain section / Grid | Card for a bounded block of related content that stands out (metric, settings panel, side facts). A page section that is the only thing in its region needs no card: `PageContent.Section label` and the content. Several tiles of one screen → one `PageContent.Grid` with a `PageContent.Cell span` each; a grid inside one block (thumbnails, fields) is the block's own CSS. Never wrap a single field, a DataTable or a whole page in a Card. |
+| Card / plain section / Grid | Card for a bounded block of related content that stands out (metric, settings panel, side facts). A page section that is the only thing in its region needs no card: `Page.Section label` and the content. Several tiles of one screen → one `Page.Grid` with a `Page.Cell span` each; a grid inside one block (thumbnails, fields) is the block's own CSS. Never wrap a single field, a DataTable or a whole page in a Card. |
 | EmptyPage / empty DataTable | Empty table (no rows yet or nothing matches the filter): the DataTable `empty` prop — headers and toolbar stay. Whole page or region with no data at all (first run): EmptyPage with one action. |
 | Accordion / Tabs | Accordion when the user may need several sections open or reads them in order (FAQ, settings groups). Tabs when sections are alternatives viewed one at a time. |
 | Divider / gap | Divider inside a block between rows or a form and its footer. Between blocks and groups use air (`gap`), not lines. |

package/dist/skill/components.md

@@ -145,14 +145,12 @@ Floating layers above the page, from tooltip to modal.
 
 ## Page (`page`)
 
-The frame and structure of a screen: app shell, app header, page column, page panel, separators, scroll regions, and ready-made screen blocks (sign-in).
+The frame and structure of a screen: app shell, the page (its top bar, header, tools, sections, grid, list and detail), separators, scroll regions, and ready-made screen blocks (sign-in).
 
 | Component | Purpose | Docs |
 |---|---|---|
-| AppShell | The app frame: a content panel that is the page itself and a navigation rail one layer above it. | [COMPONENT.md](reference/layout/app-shell/COMPONENT.md) · [examples](reference/layout/app-shell/examples/) |
-| AppHeader | The page's bar at the top of the app's content panel: the page title with a line of data, the page's tools and its own buttons — only what the current page needs. | [COMPONENT.md](reference/layout/app-header/COMPONENT.md) · [examples](reference/layout/app-header/examples/) |
-| PageContent | Page structure inside the main column: title, page actions and content blocks, titled sections and the tile grid of a dashboard; a page as high as the panel and the list + detail layout. | [COMPONENT.md](reference/components/page-content/COMPONENT.md) · [examples](reference/components/page-content/examples/) |
-| PageToolbar | The panel at the top of a page — sections, filter and search, view options and the primary action — laid out from its own width: one row when wide, stacked rows when narrow, search and filter always first with the active filters under the top row. | [COMPONENT.md](reference/components/page-toolbar/COMPONENT.md) · [examples](reference/components/page-toolbar/examples/) |
+| AppShell | The app frame — navigation and the page: a content panel that is the page itself and a navigation rail one layer above it. | [COMPONENT.md](reference/layout/app-shell/COMPONENT.md) · [examples](reference/layout/app-shell/examples/) |
+| Page | The page inside the app frame: everything at the top belongs to it — a top bar with the title, tools and buttons, the large document title in the flow — then sections, the tile grid and the list + detail layout. | [COMPONENT.md](reference/layout/page/COMPONENT.md) · [examples](reference/layout/page/examples/) |
 | Divider | A hairline separator inside one surface, horizontal or vertical, with or without a label. | [COMPONENT.md](reference/components/divider/COMPONENT.md) · [examples](reference/components/divider/examples/) |
 | ScrollContainer | The kit's one scroll region: a thin scrollbar, soft edges wherever content is hidden, and correct shrinking inside flex and grid parents. | [COMPONENT.md](reference/components/scroll-container/COMPONENT.md) · [examples](reference/components/scroll-container/examples/) |
 | LoginForm | A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation. | [COMPONENT.md](reference/components/login-form/COMPONENT.md) · [examples](reference/components/login-form/examples/) |