prime-ui-kit 0.16.0 → 0.18.0

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

@@ -3,16 +3,16 @@
 **Category:** page
 **Kind:** layout
 
-> The app frame: a content panel that is the page itself and a navigation rail one layer above it.
+> The app frame — navigation and the page: a content panel that is the page itself and a navigation rail one layer above it.
 
 ## When to use
-- The root layout of an application: navigation column, an optional AppHeader, scrolling main column, a bottom bar for phone navigation.
+- The root layout of an application: navigation column, the scrolling main where the page renders, a bottom bar for phone navigation.
 - Any page that needs the kit's responsive gutters and the surface ladder for cards and fields.
 
 ## When not to use
 - The navigation itself → use [Sidebar](../sidebar/COMPONENT.md) inside `AppShell.Nav`, [BottomNav](../bottom-nav/COMPONENT.md) inside `AppShell.Footer`.
-- The page's top bar (the page title, its tools, the menu button) → use [AppHeader](../app-header/COMPONENT.md) anywhere in the shell: it renders in the shell's header row.
-- Page heading, actions and sections inside main → use [PageContent](../../components/page-content/COMPONENT.md).
+- Anything at the top of the page — the title, its actions and tools, the phone menu button → the page's own top bar, [Page](../page/COMPONENT.md) `Page.TopBar`; the shell has no header.
+- Page heading, actions and sections inside main → use [Page](../page/COMPONENT.md).
 - A temporary side panel over the page → use [Drawer](../../components/drawer/COMPONENT.md).
 - A scroll region inside a page → use [ScrollContainer](../../components/scroll-container/COMPONENT.md).
 
@@ -25,25 +25,24 @@ import { AppShell } from "prime-ui-kit";
 ```
 AppShell.Root                grid: nav column | content panel (the page, layer 0)
 ├─ AppShell.Nav              navigation column (usually Sidebar.Root, a surface one layer above the page)
-├─ (header row)              the panel's top: the latest AppHeader.Root in the shell renders here
-├─ AppShell.Main             <main>, scrolls, carries the gutters
+├─ AppShell.Main             <main>, scrolls; hands the page (Page.Root) its gutters and top air
 └─ AppShell.Footer           sticky bottom bar of the panel (usually BottomNav.Root)
-AppShell.Template            Root + Nav + the header + Main + Footer in one component
+AppShell.Template            Root + Nav + Main + Footer in one component
 useAppShellNav()             the navigation the Sidebar publishes, for triggers outside the rail
 ```
-Every child of Root that is not `AppShell.Nav` is placed into the content panel. An `AppHeader.Root` anywhere in the shell — a child of Root, `Template.header`, a page's own one in main — renders in the header row; the latest one on screen wins, so a page's header replaces the default while that page is shown.
+Every child of Root that is not `AppShell.Nav` is placed into the content panel. Everything at the top of the panel belongs to the page: its `Page.TopBar` sticks to the top of main.
 
 ## API
 
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### AppShell.Root
-`ref` → `HTMLDivElement`. Grid of the nav column and the content panel (the page itself); every child but `AppShell.Nav` goes into the panel. Owns the navigation its Sidebar publishes (`useAppShellNav`) and the header row an `AppHeader.Root` anywhere in it renders in.
+`ref` → `HTMLDivElement`. Grid of the nav column and the content panel (the page itself); every child but `AppShell.Nav` goes into the panel. Owns the navigation its Sidebar publishes (`useAppShellNav`).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `fillViewport` | `boolean` | `false` | The shell is exactly the viewport high and only `AppShell.Main` scrolls; otherwise the document scrolls and the nav is sticky. |
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (Nav, `AppHeader.Root`, Main, Footer), `className` and the other div attributes. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (Nav, Main, Footer), `className` and the other div attributes. |
 
 ### AppShell.Nav
 `ref` → `HTMLDivElement`. The navigation column slot (not a landmark: Sidebar renders the `<nav>`).
@@ -53,11 +52,10 @@ Every child of Root that is not `AppShell.Nav` is placed into the content panel.
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (usually `Sidebar.Root`), `className` and the other div attributes. |
 
 ### AppShell.Main
-`ref` → `HTMLElement`. The `<main>` with the canonical gutters: a vertical `ScrollContainer`.
+`ref` → `HTMLElement`. The `<main>` where the page renders: a vertical `ScrollContainer` that hands `Page.Root` the gutters and top air (`--page-gutter`, `--page-top`).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `contentWidth` | `"contained" \| "full"` | `"full"` | `full` — the whole panel with gutters; `contained` — a centred column up to `--prime-layout-content-max-width`. |
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes. |
 
 ### AppShell.Footer
@@ -68,17 +66,16 @@ Every child of Root that is not `AppShell.Nav` is placed into the content panel.
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (usually `BottomNav.Root`), `className` and the other div attributes. |
 
 ### AppShell.Template
-`ref` → the `<main>`. Root + Nav + the header + Main + Footer in one; main scrolls to the top when `scrollResetKey` changes.
+`ref` → the `<main>`. Root + Nav + Main + Footer in one; main scrolls to the top when `scrollResetKey` changes.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `fillViewport` | `boolean` | `false` | As on `AppShell.Root`: only `<main>` scrolls. |
 | `nav` | `ReactNode` | — | Navigation column content; without it the panel takes the full width. |
-| `header` | `ReactNode` | — | The default header row, an `AppHeader.Root`: a page that renders its own header replaces it while that page is on screen. |
 | `footer` | `ReactNode` | — | Footer content (`BottomNav`); no footer when omitted. |
-| `mainProps` | `Omit<AppShellMainProps, "children">` | — | Props for Main (e.g. `contentWidth`). |
+| `mainProps` | `Omit<AppShellMainProps, "children">` | — | Props for Main (`id`, `tabIndex` for a skip link). |
 | `scrollResetKey` | `unknown` | — | Main scrolls back to the top whenever this value changes; pass the router pathname. |
-| `children` | `ReactNode` | — | Page content inside Main. |
+| `children` | `ReactNode` | — | The page inside Main (`Page.Root`). |
 | `…rest` | `Omit<AppShellRootProps, "children">` | — | Root props: `fillViewport`, `className` and the div attributes. |
 
 ### Types
@@ -108,38 +105,29 @@ The navigation of the nearest `AppShell.Root` for a trigger outside the rail (a
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `false` | Shell at least viewport high; the document scrolls; nav sticks to the top | Content sites, simple apps | yes |
-| `true` | Shell exactly viewport high; only Main scrolls; header and nav stay put | Dense apps with a fixed frame | |
-
-### contentWidth (Main)
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `full` | Content spans the panel with responsive gutters | Tables, dashboards | yes |
-| `contained` | Centred column up to the content max width | Long-read pages | |
+| `true` | Shell exactly viewport high; only Main scrolls; nav and the page's sticky top bar stay put | Dense apps with a fixed frame | |
 
 ### Structure
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | with `AppShell.Nav` | Two columns: a rail one layer above the page + the panel that is the page | Apps with navigation | |
 | without Nav | Panel takes the full width | Single-page tools, auth screens | |
-| with `AppHeader.Root` | Sticky bar in the header row at the top of the panel, from anywhere in the shell | The page title (or the path and the record), the page's tools and buttons; on a phone it leads with the menu button | |
 | with `AppShell.Footer` | Sticky bar at the bottom of the panel, shown while no navigation column is on screen | BottomNav on a phone | |
 
-`AppShell.Template` with `nav={<Sidebar.Root …/>}` and `PageContent` inside is the standard app; `contentWidth="contained"` + `PageContent.Root maxWidth="readable"` for docs and articles.
+`AppShell.Template` with `nav={<Sidebar.Root …/>}` and a `Page.Root` inside is the standard app; `Page.Root maxWidth="readable"` for docs and articles.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
 | fixed frame | `fillViewport` | `data-fill-viewport="true"` on Root |
 | navigation column | an `AppShell.Nav` child | `data-nav="true"` on Root (two grid columns) |
-| content width | `contentWidth` | `data-content-width` on Main |
 | off-canvas navigation | the Sidebar publishes that it is an off-canvas panel (`offCanvas="auto"` on a phone, `"always"`) | `data-off-canvas="true"` on Root; `useAppShellNav()` reports `offCanvas`, `open`, `navId` |
 | footer bar | the navigation column: `AppShell.Nav` with a Sidebar that is not off-canvas | the footer is `display: none` while the rail is on screen; without Nav or with an off-canvas Sidebar it stays at any width |
-| header row | an `AppHeader.Root` in the shell | the latest one on screen renders at the top of the panel, before main |
 
 ## Layout & spacing
 - Two full-height planes edge to edge: no inset, radius, shadow or border — the boundary is the fill change (the Sidebar rail is layer 1, the panel the page: white rail beside a gray page in light, a rail one step lighter than the near-black page in dark).
-- Gutters in Main (and in the header row): the page gutter `--prime-layout-gutter` — `--prime-layout-gutter-s` (16) → `-m` (24) from 640px → `-l` (32) from 1024px. Main top padding `--prime-space-6` (24) → `--prime-space-8` (32) from 1024px; bottom `--prime-space-16`. Inside Main the page gutter is the small one again, so a frame nested in the page starts from its own gutter, not the shell's.
-- A page that fills the panel height (`PageContent.Root fill`): Main's bottom padding drops to the side gutter, so no long scroll tail stays under it.
+- Main hands the page its edge air: `--page-gutter` is the page gutter `--prime-layout-gutter` — `--prime-layout-gutter-s` (16) → `-m` (24) from 640px → `-l` (32) from 1024px; `--page-top` is `--prime-space-6` (24) → `--prime-space-8` (32) from 1024px. `Page.Root` pads itself with them (its top bar steps out to the panel's edges). Main itself pads only the bottom: `--prime-space-16`, the scroll tail of a long page. Inside Main the page gutter is the small one again, so a frame nested in the page starts from its own gutter, not the shell's.
+- A page that fills the panel height (`Page.Root fill`): Main's bottom padding drops to the side gutter, so no long scroll tail stays under it — beside the Sidebar rail too.
 - Main scrolls with `overscroll-behavior: contain`, so its scroll never chains to the document.
 - Nav column: sticky at the top, viewport high, `z-index: --prime-z-sticky` (above the panel, so the compact Sidebar toggle can ride the rail edge); with `fillViewport` it fills the shell height instead.
 - Footer: no padding of its own (BottomNav keeps the bottom safe-area inset), sticky at the bottom, `z-index: --prime-z-sticky`.
@@ -156,8 +144,8 @@ No keyboard interaction.
 ### ARIA
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-- Main is the `<main>` landmark; the banner comes from AppHeader (`<header>`), the navigation landmarks from Sidebar and BottomNav (`<nav>`).
-- One `<h1>` per page: `AppHeader.Title` on app pages, `PageContent.Title` on a document page (whose header then has no title).
+- Main is the `<main>` landmark; the navigation landmarks come from Sidebar and BottomNav (`<nav>`). The page's top bar is a `<header>` inside main, not a banner.
+- One `<h1>` per page: its `Page.Title`, in the top bar or in the flow.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -167,21 +155,20 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | The app frame: Sidebar in the nav column, the page title and its action in the AppHeader, the page in main; only main scrolls — `fillViewport`. |
-| [contained.tsx](examples/contained.tsx) | A shell without navigation whose main column is centred and capped for long reads — `contentWidth`. |
+| [overview.tsx](examples/overview.tsx) | The app frame: Sidebar in the nav column, the page in main with its title and action in its top bar; only main scrolls — `fillViewport`. |
 | [footer.tsx](examples/footer.tsx) | A phone app without a Sidebar: the bar in the footer stays at the bottom while main scrolls under it — `AppShell.Footer`. |
-| [template.tsx](examples/template.tsx) | Root, nav, header and main in one component; main scrolls back to the top whenever the page changes — `AppShell.Template`, `scrollResetKey`. |
-| [screen.tsx](examples/screen.tsx) | The app frame for desktop and phone: the Sidebar rail on a wide screen, the floating BottomNav in the footer on a phone whose More item opens the Sidebar, the AppHeader with the menu button it draws by itself, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`, `useAppShellNav`. |
+| [template.tsx](examples/template.tsx) | Root, nav, main and footer in one component; main scrolls back to the top whenever the page changes — `AppShell.Template`, `scrollResetKey`. |
+| [screen.tsx](examples/screen.tsx) | The app frame for desktop and phone: the Sidebar rail on a wide screen, the floating BottomNav in the footer on a phone whose More item opens the Sidebar, the page top bar with the menu button it draws by itself, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`, `useAppShellNav`. |
 
 ## Mistakes
-- Adding padding around the page content → Main already has the gutters.
+- Adding padding around the page content → `Page.Root` takes the gutters Main hands it.
 - Wrapping Main content in another scroll container → Main scrolls (with `fillViewport`) or the document does.
 - A border or shadow between nav and panel → the fill change is the boundary.
 - Putting the Sidebar directly in Root without `AppShell.Nav` → it lands inside the content panel.
 - BottomNav anywhere but `AppShell.Footer` → it stays next to the Sidebar rail on a desktop; the footer is what leaves while the rail is on screen.
 - `AppShell.Template` in a router app without `scrollResetKey` → a new page opens at the old scroll position; pass the pathname.
-- A hand-wired menu state shared by the Sidebar, a menu button and a BottomNav «Ещё» → the Sidebar publishes it to the shell: the AppHeader draws the menu button, other triggers read `useAppShellNav()`.
+- A hand-wired menu state shared by the Sidebar, a menu button and a BottomNav «Ещё» → the Sidebar publishes it to the shell: the page's `Page.TopBar` draws the menu button, other triggers read `useAppShellNav()`.
 
 ## Related
 - **Built from:** [ScrollContainer](../../components/scroll-container/COMPONENT.md)
-- **See also:** [AppHeader](../app-header/COMPONENT.md), [Sidebar](../sidebar/COMPONENT.md), [BottomNav](../bottom-nav/COMPONENT.md), [PageContent](../../components/page-content/COMPONENT.md), [Breadcrumb](../../components/breadcrumb/COMPONENT.md)
+- **See also:** [Page](../page/COMPONENT.md), [Sidebar](../sidebar/COMPONENT.md), [BottomNav](../bottom-nav/COMPONENT.md), [Breadcrumb](../../components/breadcrumb/COMPONENT.md)

package/dist/skill/reference/layout/app-shell/examples/footer.tsx

@@ -1,5 +1,5 @@
 /** A phone app without a Sidebar: the bar in the footer stays at the bottom while main scrolls under it — `AppShell.Footer`. */
-import { AppHeader, AppShell, BottomNav, Icon, PageContent, Typography } from "prime-ui-kit";
+import { AppShell, BottomNav, Icon, Page, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -25,21 +25,21 @@ export default function AppShellFooterExample() {
   return (
     <div className={styles.phone}>
       <AppShell.Root fillViewport className={styles.shell}>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Счета</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Счета</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Body>
               {INVOICES.map((invoice) => (
                 <Typography key={invoice} variant="body-m">
                   {invoice}
                 </Typography>
               ))}
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root>

package/dist/skill/reference/layout/app-shell/examples/overview.tsx

@@ -1,5 +1,5 @@
-/** The app frame: Sidebar in the nav column, the page title and its action in the AppHeader, the page in main; only main scrolls — `fillViewport`. */
-import { AppHeader, AppShell, Button, Icon, PageContent, Sidebar, Typography } from "prime-ui-kit";
+/** The app frame: Sidebar in the nav column, the page in main with its title and action in its top bar; only main scrolls — `fillViewport`. */
+import { AppShell, Button, Icon, Page, Sidebar, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -35,30 +35,28 @@ export default function AppShellOverviewExample() {
             </Sidebar.Content>
           </Sidebar.Root>
         </AppShell.Nav>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>
-              Обзор
-              <AppHeader.Description>Октябрь · 37 сделок в работе</AppHeader.Description>
-            </AppHeader.Title>
-          </AppHeader.Start>
-          <AppHeader.Actions>
-            <Button.Root>
-              <Button.Icon>
-                <Icon name="action.add" />
-              </Button.Icon>
-              Новая сделка
-            </Button.Root>
-          </AppHeader.Actions>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Обзор</Page.Title>
+                <Page.Description>Октябрь · 37 сделок в работе</Page.Description>
+              </Page.Heading>
+              <Page.Actions>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новая сделка
+                </Button.Root>
+              </Page.Actions>
+            </Page.TopBar>
+            <Page.Body>
               <Typography variant="body-m" tone="secondary">
                 Выручка за месяц — 4,8 млн ₽, на 12% больше, чем в сентябре.
               </Typography>
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
       </AppShell.Root>
     </div>

package/dist/skill/reference/layout/app-shell/examples/screen.module.css

@@ -1,5 +1,5 @@
-/* App shell: the frame (Sidebar / BottomNav / AppHeader) lays itself out; this file only places the
-   home page's blocks. The rhythm comes from PageContent.Body, the tiles from PageContent.Grid. */
+/* App shell: the frame (Sidebar / BottomNav / the page's top bar) lays itself out; this file only
+   places the home page's blocks. The rhythm comes from Page.Body, the tiles from Page.Grid. */
 
 /* A list row: the text at the start, the meta (time, sum) at the end. */
 .row {

package/dist/skill/reference/layout/app-shell/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** The app frame for desktop and phone: the Sidebar rail on a wide screen, the floating BottomNav in the footer on a phone whose More item opens the Sidebar, the AppHeader with the menu button it draws by itself, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`, `useAppShellNav`. */
+/** The app frame for desktop and phone: the Sidebar rail on a wide screen, the floating BottomNav in the footer on a phone whose More item opens the Sidebar, the page top bar with the menu button it draws by itself, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`, `useAppShellNav`. */
 import {
-  AppHeader,
   AppShell,
   BottomNav,
   Card,
@@ -8,7 +7,7 @@ import {
   Crossfade,
   Icon,
   type IconName,
-  PageContent,
+  Page,
   Sidebar,
   Typography,
   useAppShellNav,
@@ -168,22 +167,6 @@ export default function AppShellScreenExample() {
           <Sidebar.Footer>{MORE.map(sidebarItem)}</Sidebar.Footer>
         </Sidebar.Root>
       }
-      header={
-        <AppHeader.Root>
-          {/* On a phone the header leads with the menu button that opens the Sidebar by itself. */}
-          <AppHeader.Start>
-            {/* Every page titles itself here: the only h1 and a line of data under it. */}
-            <AppHeader.Title>
-              {section.label}
-              <AppHeader.Description>
-                {current === "today"
-                  ? `Среда, 14 октября · открытых задач: ${openTasks}`
-                  : PAGES[current].description}
-              </AppHeader.Description>
-            </AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
-      }
       footer={
         <BottomNav.Root floating>
           {MAIN.map((item) => (
@@ -202,23 +185,35 @@ export default function AppShellScreenExample() {
         </BottomNav.Root>
       }
     >
-      {/* Another section is another page: it cross-fades instead of flipping. */}
-      <Crossfade state={current}>
-        <PageContent.Root as="section">
-          <PageContent.Body>
+      <Page.Root>
+        {/* On a phone the bar leads with the menu button that opens the Sidebar by itself. */}
+        <Page.TopBar>
+          {/* Every page titles itself here: the only h1 and a line of data under it. */}
+          <Page.Heading>
+            <Page.Title>{section.label}</Page.Title>
+            <Page.Description>
+              {current === "today"
+                ? `Среда, 14 октября · открытых задач: ${openTasks}`
+                : PAGES[current].description}
+            </Page.Description>
+          </Page.Heading>
+        </Page.TopBar>
+        {/* Another section is another page: it cross-fades instead of flipping. */}
+        <Crossfade state={current}>
+          <Page.Body>
             {current === "today" ? (
               <>
-                <PageContent.Grid>
+                <Page.Grid>
                   {KPIS.map((kpi) => (
-                    <PageContent.Cell key={kpi.label} span={4}>
+                    <Page.Cell key={kpi.label} span={4}>
                       <Card.Root variant="stat-trend">
                         <Card.Label>{kpi.label}</Card.Label>
                         <Card.Value>{kpi.value}</Card.Value>
                         <Card.Delta tone={kpi.tone}>{kpi.delta}</Card.Delta>
                       </Card.Root>
-                    </PageContent.Cell>
+                    </Page.Cell>
                   ))}
-                </PageContent.Grid>
+                </Page.Grid>
                 <Card.Root variant="list">
                   <Card.Header>
                     <Card.Title as="h2">Задачи на сегодня</Card.Title>
@@ -260,9 +255,9 @@ export default function AppShellScreenExample() {
                 </Card.List>
               </Card.Root>
             )}
-          </PageContent.Body>
-        </PageContent.Root>
-      </Crossfade>
+          </Page.Body>
+        </Crossfade>
+      </Page.Root>
     </AppShell.Template>
   );
 }

package/dist/skill/reference/layout/app-shell/examples/template.tsx

@@ -1,5 +1,5 @@
-/** Root, nav, header and main in one component; main scrolls back to the top whenever the page changes — `AppShell.Template`, `scrollResetKey`. */
-import { AppHeader, AppShell, Icon, PageContent, Sidebar, Typography } from "prime-ui-kit";
+/** Root, nav, main and footer in one component; main scrolls back to the top whenever the page changes — `AppShell.Template`, `scrollResetKey`. */
+import { AppShell, Icon, Page, Sidebar, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -33,7 +33,7 @@ export default function AppShellTemplateExample() {
         className={styles.shell}
         scrollResetKey={pageId}
         nav={
-          <Sidebar.Root offCanvas="never">
+          <Sidebar.Root>
             <Sidebar.Content>
               {PAGES.map((item) => (
                 <Sidebar.Item
@@ -50,24 +50,20 @@ export default function AppShellTemplateExample() {
             </Sidebar.Content>
           </Sidebar.Root>
         }
-        header={
-          <AppHeader.Root>
-            <AppHeader.Start>
-              <AppHeader.Title>
-                {page.label}
-                <AppHeader.Description>{page.text}</AppHeader.Description>
-              </AppHeader.Title>
-            </AppHeader.Start>
-          </AppHeader.Root>
-        }
       >
-        <PageContent.Root as="section">
-          <PageContent.Body>
+        <Page.Root>
+          <Page.TopBar>
+            <Page.Heading>
+              <Page.Title>{page.label}</Page.Title>
+              <Page.Description>{page.text}</Page.Description>
+            </Page.Heading>
+          </Page.TopBar>
+          <Page.Body>
             <Typography variant="body-m" tone="secondary">
               {page.note}
             </Typography>
-          </PageContent.Body>
-        </PageContent.Root>
+          </Page.Body>
+        </Page.Root>
       </AppShell.Template>
     </div>
   );

package/dist/skill/reference/layout/bottom-nav/COMPONENT.md

@@ -12,7 +12,7 @@
 ## When not to use
 - More than six destinations or nested sections → use [Sidebar](../sidebar/COMPONENT.md) (off-canvas on a phone), put the rest under «Ещё».
 - Switching views inside one page → use [Tabs](../../components/tabs/COMPONENT.md) or [SegmentedControl](../../components/segmented-control/COMPONENT.md).
-- Several actions (create, filter, export) → use [Button](../../components/button/COMPONENT.md) in the page header; the bar holds at most one main action (`BottomNav.Action`).
+- Several actions (create, filter, export) → use [Button](../../components/button/COMPONENT.md) in the page's top bar ([Page](../page/COMPONENT.md): `Page.Actions`); the bar holds at most one main action (`BottomNav.Action`).
 
 ## Import
 ```tsx
@@ -107,6 +107,7 @@ Without flags the bar is flat at the screen edge on the surface, with a faint to
 | State | Driven by | DOM |
 |---|---|---|
 | current | `current` or a router link setting `aria-current` | `aria-current="page"` on the item; flat, its glyph on a `fill-muted` pill |
+| held | a `Page.Guard` that is `busy` or `dirty` on the page | a press on an item stops before it navigates (a router link included); `dirty` asks first, then repeats it |
 | pressed | pointer down | the glyph scales to `--prime-motion-press-scale-compact` (`internal/press`), flat and floating |
 | overflow | items wider than the bar | the items scroll inside the bar with faded edges; no label is cut |
 | focus | keyboard | focus ring inside the item edge |
@@ -162,14 +163,14 @@ Motion: the color of the icon and the label and the flat pill change over `fast`
 | [floating.tsx](examples/floating.tsx) | A glass capsule over the page across the width: the client list scrolls under its blur, the selection glides to a tapped section, with labels or icons alone — `floating`, `iconOnly`. |
 | [floating-action.tsx](examples/floating-action.tsx) | A round action beside the glass capsule for the screen's main action, with labels or icons alone — `BottomNav.Action`, `floating`. |
 | [router.tsx](examples/router.tsx) | A router link as the item: the router marks the open section and the item shows it as current; render it inside a router — `asChild`. |
-| [in-app-shell.tsx](examples/in-app-shell.tsx) | The app frame on a phone: the AppHeader, the page and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. |
+| [in-app-shell.tsx](examples/in-app-shell.tsx) | The app frame on a phone: the page with its top bar and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. |
 
 ## Mistakes
 - Seven or more items → keep 2–6; the rest goes to a «Ещё» section or Sidebar.
 - Long labels («Управление заказами») → one word; a long label widens its column and the bar scrolls.
 - `iconOnly` with icons that need a caption to be understood → keep the labels.
 - A floating bar outside a positioned container → it sits at the bottom of the nearest positioned ancestor; put it in `AppShell.Footer`.
-- An action as an item («Создать» among the sections) → items navigate; put the screen's one main action in `BottomNav.Action` beside the bar, the rest in the page header.
+- An action as an item («Создать» among the sections) → items navigate; put the screen's one main action in `BottomNav.Action` beside the bar, the rest in the page's top bar.
 - `BottomNav.Action` without `aria-label` → the button has no name; it is required.
 - The bar outside `AppShell.Footer` (in Main, Root or `position: fixed` on the page) → it never leaves and shows next to the Sidebar on a desktop; put it in `AppShell.Footer` (or the Template `footer` prop).
 - Hiding the bar with your own media query → the shell already hides the footer while the Sidebar rail is on screen.

package/dist/skill/reference/layout/bottom-nav/examples/floating-action.tsx

@@ -1,14 +1,5 @@
 /** A round action beside the glass capsule for the screen's main action, with labels or icons alone — `BottomNav.Action`, `floating`. */
-import {
-  AppHeader,
-  AppShell,
-  Avatar,
-  BottomNav,
-  Icon,
-  PageContent,
-  Switch,
-  Typography,
-} from "prime-ui-kit";
+import { AppShell, Avatar, BottomNav, Icon, Page, Switch, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -37,14 +28,14 @@ export default function BottomNavFloatingActionExample() {
   return (
     <div className={styles.phone}>
       <AppShell.Root fillViewport className={styles.shell}>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Клиенты</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Клиенты</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Body>
               <div className={styles.options}>
                 <Switch.Root checked={iconOnly} onCheckedChange={setIconOnly}>
                   <Switch.Label>Только иконки</Switch.Label>
@@ -63,8 +54,8 @@ export default function BottomNavFloatingActionExample() {
                   </div>
                 </div>
               ))}
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root floating iconOnly={iconOnly}>

package/dist/skill/reference/layout/bottom-nav/examples/floating.tsx

@@ -1,14 +1,5 @@
 /** A glass capsule over the page across the width: the client list scrolls under its blur, the selection glides to a tapped section, with labels or icons alone — `floating`, `iconOnly`. */
-import {
-  AppHeader,
-  AppShell,
-  Avatar,
-  BottomNav,
-  Icon,
-  PageContent,
-  Switch,
-  Typography,
-} from "prime-ui-kit";
+import { AppShell, Avatar, BottomNav, Icon, Page, Switch, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -38,14 +29,14 @@ export default function BottomNavFloatingExample() {
   return (
     <div className={styles.phone}>
       <AppShell.Root fillViewport className={styles.shell}>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Клиенты</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Клиенты</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Body>
               <div className={styles.options}>
                 <Switch.Root checked={iconOnly} onCheckedChange={setIconOnly}>
                   <Switch.Label>Только иконки</Switch.Label>
@@ -64,8 +55,8 @@ export default function BottomNavFloatingExample() {
                   </div>
                 </div>
               ))}
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root floating iconOnly={iconOnly}>

package/dist/skill/reference/layout/bottom-nav/examples/in-app-shell.tsx

@@ -1,13 +1,5 @@
-/** The app frame on a phone: the AppHeader, the page and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. */
-import {
-  AppHeader,
-  AppShell,
-  BottomNav,
-  Button,
-  Icon,
-  PageContent,
-  Typography,
-} from "prime-ui-kit";
+/** The app frame on a phone: the page with its top bar and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. */
+import { AppShell, BottomNav, Button, Icon, Page, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -24,14 +16,14 @@ export default function BottomNavInAppShellExample() {
   return (
     <div className={styles.phone}>
       <AppShell.Root fillViewport className={styles.shell}>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Заказы</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Заказы</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Body>
               {ORDERS.map((order) => (
                 <Typography key={order} variant="body-m">
                   {order}
@@ -43,8 +35,8 @@ export default function BottomNavInAppShellExample() {
                 </Button.Icon>
                 Новый заказ
               </Button.Root>
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root>