prime-ui-kit 0.15.0 → 0.17.0

package/src/components/voice-player/COMPONENT.md

@@ -51,7 +51,7 @@ VoicePlayer            <div role="group">; state in data-*
 |---|---|---|---|
 | `src` | `string` | — (required) | Audio URL, loaded with `preload="metadata"`: nothing plays before a press. |
 | `duration` | `number` | — | Length in seconds, shown until the media reports its own. |
-| `unplayed` | `boolean` | `false` | Nobody has played it yet: an accent dot after the time and `labels.unplayed` for screen readers. Clear it when `onPlayingChange(true)` comes; the dot leaves with a fade. |
+| `unplayed` | `boolean` | `false` | Nobody has played it yet: an accent dot after the time and `labels.unplayed` for screen readers. Clear it when `onPlayingChange(true)` comes; the dot fades out and the row closes up in place. |
 | `disabled` | `boolean` | `false` | Nothing can be played: the play disk, the waveform slider and the rate chip, the transcript button and the transfer actions are off (native `disabled`). A disabled `Fieldset` around it disables it too. |
 | `waveform` | `readonly number[]` | — | Levels 0…1 from data, resampled to the bars that fit the width. Without it: a calm flat row. Voice only: a circle shows a face, not levels. |
 | `rate` | `1 \| 1.5 \| 2` | — | Playback speed (controlled). Voice only: speech is listened to faster; a face is watched at its own pace. |
@@ -75,8 +75,12 @@ VoicePlayer            <div role="group">; state in data-*
 | `labels` | `Partial<VoicePlayerLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "onPlay" \| "onPause" \| "onEnded" \| "onRateChange">` | — | `className`, `aria-label` (replaces `labels.player`), `data-*` and the other div attributes. |
 
-### getWaveform
-`getWaveform(source, bars = 48)`: the 0…1 peaks of a `Blob` or URL with no stored levels, for `waveform`.
+### Functions
+
+#### `getWaveform(source, bars)`
+`(source: Blob \| string, bars?: number) => Promise<number[]>`
+
+The 0…1 peaks of a `Blob` or URL with no stored levels, for `waveform`; `bars` defaults to 48. Rejects when the audio cannot be fetched or decoded.
 
 ## Variants
 One look. Colors are semantic roles only (`accent-default`, `accent-fg`, `fill-strong`, `text-muted`), so an outgoing chat bubble restyles the player by overriding them for its subtree.
@@ -84,7 +88,7 @@ One look. Colors are semantic roles only (`accent-default`, `accent-fg`, `fill-s
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `unplayed` | an accent dot after the time; it rises in with a fade and sinks out the same way | the recipient has not listened yet | |
+| `unplayed` | an accent dot after the time; it rises in, and fades as the row closes up in place when it clears | the recipient has not listened yet | |
 | `disabled` | muted disk, no played bars, disabled time | the recording cannot be played (deleted, expired) | |
 
 ## States
@@ -122,6 +126,8 @@ One look. Colors are semantic roles only (`accent-default`, `accent-fg`, `fill-s
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Moves focus: the disk (or the transfer disk), the waveform slider, the rate chip, the transcript button. |
@@ -132,6 +138,8 @@ One look. Colors are semantic roles only (`accent-default`, `accent-fg`, `fill-s
 | `Home` · `End` | On the waveform: to the start or the end. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The root is `role="group"` named by `labels.player` (or your `aria-label`).
 - The disk is named `labels.play` while paused and `labels.pause` while playing. While the recording is sent, received or not fetched the same button is the transfer, named by the direction — `cancelUpload` / `cancelDownload` described by `uploadProgress` / `downloadProgress` (`aria-busy`), after a failure `retryUpload` / `retryDownload` described by `notSent` / `notReceived`, `download` for a remote one; its ring is `aria-hidden`; a refused cancel, retry or download is announced (`role="status"`).
 - The waveform is `role="slider"` with `aria-valuemin`, `aria-valuemax` (seconds), `aria-valuenow` and `aria-valuetext` from `labels.position`.
@@ -146,11 +154,11 @@ One look. Colors are semantic roles only (`accent-default`, `accent-fg`, `fill-s
 |---|---|---|
 | `player` | `"Голосовое сообщение"` | Name of the player group. |
 | `play` | `"Воспроизвести голосовое сообщение"` | Name of the play disk while it does not play. |
-| `pause` | `"Пауза"` | Name of the play disk while it plays. |
-| `position` | `"{current} из {duration}"` | The position: `{current}` and `{duration}` as m:ss. |
 | `unplayed` | `"Не прослушано"` | Visually hidden text read while `unplayed`. |
 | `seek` | `"Перемотка"` | Name of the waveform slider (its `aria-valuetext` is `position`). |
 | `rate` | `"Скорость воспроизведения: {rate}"` | Name of the rate chip; `{rate}` as shown on it. |
+| `pause` | `"Пауза"` | Name of the play disk while it plays. |
+| `position` | `"{current} из {duration}"` | The position: `{current}` and `{duration}` as m:ss. |
 | `transcribe` | `"Расшифровать"` | Name of the transcript button while the text is closed. |
 | `hideTranscript` | `"Скрыть расшифровку"` | Name of the transcript button while the text is open. |
 | `transcribeFailed` | `"Не удалось расшифровать сообщение"` | Announced when `onTranscribe` rejects. |
@@ -188,5 +196,5 @@ One look. Colors are semantic roles only (`accent-default`, `accent-fg`, `fill-s
 - `onTranscribe` that resolves `undefined` or returns `true` → resolve the text itself, or return nothing and pass `transcript` when it comes.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (the play disk, `shape="circle"`; the transcript button), [Spinner](../spinner/COMPONENT.md), Icon (`action.play`, `action.pause`, `action.transcribe`, `nav.chevronUp`); `internal/disabledContext` (a disabled `Fieldset`), `internal/mediaPlayer` (the playing triad, the transcript button and the transfer shared with VideoNote), `internal/transferDisk` (the transfer's logic on the play disk: `useTransferDisk`), `internal/transcript` + `internal/Disclosure` (the transcript), `internal/mediaSession` (one sound at a time)
+- **Built from:** [Button](../button/COMPONENT.md) (the play disk, `shape="circle"`; the transcript button; the rate chip, soft neutral `density="inline"`), [Spinner](../spinner/COMPONENT.md), Icon (`action.play`, `action.pause`, `action.transcribe`, `nav.chevronUp`); `internal/disabledContext` (a disabled `Fieldset`), `internal/mediaPlayer` (the playing triad, the transcript button and the transfer shared with VideoNote), `internal/transferDisk` (the transfer's logic on the play disk: `useTransferDisk`), `internal/transcript` + `internal/Disclosure` (the transcript), `internal/mediaSession` (one sound at a time), `internal/audio` (`getWaveform`'s decoding and peaks, shared with the Composer's recorder), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [VideoNote](../video-note/COMPONENT.md) — the round video message, the same player contract; [Message](../message/COMPONENT.md) — the bubble a voice message sits in; [Composer](../composer/COMPONENT.md) — records the voice message; [Slider](../slider/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md)

package/src/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) as a child of Root.
-- 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,24 +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)
-├─ AppHeader.Root            sticky top bar of the panel (a separate component)
-├─ 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.
+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 (Sidebar, a surface one layer above the page) and the content panel (the page itself); every child that is not `AppShell.Nav` goes into the panel.
+`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>`).
@@ -52,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
@@ -67,54 +66,68 @@ 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 top bar of the panel, an `AppHeader.Root`; no header when omitted. |
 | `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
+
+#### `AppShellNavState`
+The navigation of the shell, as its Sidebar publishes it.
+
+| Field | Type | Default | Description |
+|---|---|---|---|
+| `navId` | `string` | — | `id` of the navigation landmark, for `aria-controls`. |
+| `offCanvas` | `boolean` | — | The navigation is an off-canvas panel now (a phone, or `offCanvas="always"`). |
+| `open` | `boolean` | — | The off-canvas panel is open. |
+| `setOpen` | `(open: boolean) => void` | — | Opens or closes the off-canvas panel. |
+| `expanded` | `boolean` | — | The navigation is in view: the off-canvas panel open, or the rail expanded. |
+| `toggle` | `() => void` | — | Opens or closes the off-canvas panel; on screen, expands or folds the rail. |
+
+### Functions
+
+#### `useAppShellNav()`
+`() => AppShellNavState \| null`
+
+The navigation of the nearest `AppShell.Root` for a trigger outside the rail (a BottomNav «Ещё», an own menu button); `null` outside a shell or without a Sidebar in it.
+
 ## Variants
 
 ### fillViewport (Root)
 | 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 at the top of the panel | The page title (or the path and the record), the page's tools and buttons, the mobile 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 |
 
 ## 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 an `AppHeader.Root` in the panel): `--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`. Children of Main start from their own gutters, 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`. 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.
 - 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`.
@@ -124,11 +137,15 @@ Every child of Root that is not `AppShell.Nav` is placed into the content panel.
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
-- Main is the `<main>` landmark; the banner comes from AppHeader (`<header>`), the navigation landmarks from Sidebar and BottomNav (`<nav>`).
-- Give the page one `<h1>` (PageContent.Title).
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- 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. -->
@@ -138,20 +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` with `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, the AppHeader with the menu button, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`. |
+| [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 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/src/layout/app-shell/examples/examples.module.css

@@ -1,4 +1,4 @@
-/* Layout for the AppShell examples: a small "app window" frame. Semantic tokens only. */
+/* Layout for the AppShell examples: a small app window. The preview stage is the page; the window only sizes and clips. Semantic tokens only. */
 
 .stage {
   box-sizing: border-box;
@@ -6,21 +6,6 @@
   width: 100%;
   height: calc(var(--prime-space-24) * 5);
   overflow: hidden;
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-layer-current);
-  /* The window is a page on the preview's page: a hairline keeps its edge visible. */
-  box-shadow:
-    0 0 0 var(--prime-border-width) var(--prime-color-border-subtle),
-    var(--prime-shadow-raised);
-}
-
-/* The product mark inside `Sidebar.BrandLogo`: an accent tile with a glyph. */
-.logo {
-  display: grid;
-  place-items: center;
-  border-radius: var(--prime-radius-m);
-  background: var(--prime-color-accent-default);
-  color: var(--prime-color-accent-fg);
 }
 
 /* The shell fills the window frame instead of the viewport. */
@@ -32,13 +17,8 @@
 .phone {
   box-sizing: border-box;
   display: flex;
-  width: min(100%, var(--prime-drawer-width-s));
+  width: min(100%, var(--prime-layout-narrow-width));
   height: calc(var(--prime-space-24) * 5);
   margin-inline: auto;
   overflow: hidden;
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-layer-current);
-  box-shadow:
-    0 0 0 var(--prime-border-width) var(--prime-color-border-subtle),
-    var(--prime-shadow-raised);
 }

package/src/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.Page>
-            <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.Page>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root>

package/src/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";
 
@@ -13,9 +13,7 @@ export default function AppShellOverviewExample() {
             <Sidebar.Header>
               <Sidebar.Brand href="#home" description="Отдел продаж">
                 <Sidebar.BrandLogo>
-                  <span className={styles.logo}>
-                    <Icon name="nav.layoutGrid" />
-                  </span>
+                  <Icon name="nav.layoutGrid" />
                 </Sidebar.BrandLogo>
                 Acme CRM
               </Sidebar.Brand>
@@ -37,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.Page>
-            <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.Page>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
       </AppShell.Root>
     </div>

package/src/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/src/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, the AppHeader with the menu button, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`. */
+/** 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,9 +7,10 @@ import {
   Crossfade,
   Icon,
   type IconName,
-  PageContent,
+  Page,
   Sidebar,
   Typography,
+  useAppShellNav,
 } from "prime-ui-kit";
 import * as React from "react";
 
@@ -92,19 +92,33 @@ const PAGES: Record<Exclude<SectionId, "today">, { description: string; rows: Ro
 
 const isMore = (id: SectionId) => MORE.some((section) => section.id === id);
 
+/** «Ещё» opens the Sidebar as a panel: it reads the shell's navigation, so it renders inside the shell. */
+function MoreItem({ current }: { current: boolean }) {
+  const nav = useAppShellNav();
+  return (
+    <BottomNav.Item
+      current={current}
+      aria-expanded={nav?.open}
+      aria-controls={nav?.navId}
+      onClick={() => nav?.setOpen(true)}
+    >
+      <BottomNav.ItemIcon>
+        <Icon name="action.more" />
+      </BottomNav.ItemIcon>
+      Ещё
+    </BottomNav.Item>
+  );
+}
+
 export default function AppShellScreenExample() {
   const [current, setCurrent] = React.useState<SectionId>("today");
-  const [menuOpen, setMenuOpen] = React.useState(false);
   const [done, setDone] = React.useState<ReadonlySet<string>>(() => new Set(["t1"]));
 
   const openTasks = TASKS.length - done.size;
   const section = SECTIONS.find((item) => item.id === current) ?? SECTIONS[0];
 
-  // One handler for every way into a section: the Sidebar and the bar.
-  const go = (id: SectionId) => {
-    setCurrent(id);
-    setMenuOpen(false);
-  };
+  // One handler for every way into a section: the Sidebar (an item closes its panel) and the bar.
+  const go = (id: SectionId) => setCurrent(id);
 
   const toggleTask = (id: string, checked: boolean) =>
     setDone((prev) => {
@@ -137,7 +151,7 @@ export default function AppShellScreenExample() {
       fillViewport
       scrollResetKey={current}
       nav={
-        <Sidebar.Root open={menuOpen} onOpenChange={setMenuOpen}>
+        <Sidebar.Root>
           <Sidebar.Header>
             <Sidebar.Brand description="Отдел продаж">
               <Sidebar.BrandLogo>
@@ -153,22 +167,6 @@ export default function AppShellScreenExample() {
           <Sidebar.Footer>{MORE.map(sidebarItem)}</Sidebar.Footer>
         </Sidebar.Root>
       }
-      header={
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.MenuButton aria-expanded={menuOpen} onClick={() => setMenuOpen(true)} />
-            {/* 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) => (
@@ -183,36 +181,39 @@ export default function AppShellScreenExample() {
             </BottomNav.Item>
           ))}
           {/* The rest of the map lives in the Sidebar: «Ещё» opens it as a panel. */}
-          <BottomNav.Item
-            current={isMore(current)}
-            aria-expanded={menuOpen}
-            onClick={() => setMenuOpen(true)}
-          >
-            <BottomNav.ItemIcon>
-              <Icon name="action.more" />
-            </BottomNav.ItemIcon>
-            Ещё
-          </BottomNav.Item>
+          <MoreItem current={isMore(current)} />
         </BottomNav.Root>
       }
     >
-      {/* Another section is another page: it cross-fades instead of flipping. */}
-      <Crossfade state={current}>
-        <PageContent.Page>
-          <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>
@@ -254,9 +255,9 @@ export default function AppShellScreenExample() {
                 </Card.List>
               </Card.Root>
             )}
-          </PageContent.Body>
-        </PageContent.Page>
-      </Crossfade>
+          </Page.Body>
+        </Crossfade>
+      </Page.Root>
     </AppShell.Template>
   );
 }

package/src/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` with `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.Page>
-          <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.Page>
+          </Page.Body>
+        </Page.Root>
       </AppShell.Template>
     </div>
   );