prime-ui-kit 0.14.0 → 0.16.0

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

@@ -11,7 +11,7 @@
 
 ## When not to use
 - The navigation itself → use [Sidebar](../sidebar/COMPONENT.md) inside `AppShell.Nav`, [BottomNav](../bottom-nav/COMPONENT.md) inside `AppShell.Footer`.
-- The top bar (title, search, actions, the menu button) → use [AppHeader](../app-header/COMPONENT.md) as a child of Root.
+- 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).
 - 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,19 +25,20 @@ 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)
+├─ (header row)              the panel's top: the latest AppHeader.Root in the shell renders here
 ├─ AppShell.Main             <main>, scrolls, carries the gutters
 └─ AppShell.Footer           sticky bottom bar of the panel (usually BottomNav.Root)
 AppShell.Template            Root + Nav + the header + 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. 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.
 
 ## 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`) and the header row an `AppHeader.Root` anywhere in it renders in.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -71,14 +72,36 @@ Every child of Root that is not `AppShell.Nav` is placed into the content panel.
 
 | 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. |
+| `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`). |
 | `scrollResetKey` | `unknown` | — | Main scrolls back to the top whenever this value changes; pass the router pathname. |
 | `children` | `ReactNode` | — | Page content inside Main. |
 | `…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)
@@ -98,7 +121,7 @@ Every child of Root that is not `AppShell.Nav` is placed into the content panel.
 |---|---|---|---|
 | 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 | Title or breadcrumbs, global search, actions, the mobile menu button | |
+| 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.
@@ -109,11 +132,13 @@ Every child of Root that is not `AppShell.Nav` is placed into the content panel.
 | 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 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.
+- 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 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.
@@ -124,11 +149,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
+<!-- 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>`).
-- Give the page one `<h1>` (PageContent.Title).
+- One `<h1>` per page: `AppHeader.Title` on app pages, `PageContent.Title` on a document page (whose header then has no title).
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -138,10 +167,11 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | The app frame: Sidebar in the nav column, breadcrumbs in the AppHeader, the page in main; only main scrolls — `fillViewport`. |
+| [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`. |
 | [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`. |
+| [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`. |
 
 ## Mistakes
 - Adding padding around the page content → Main already has the gutters.
@@ -150,6 +180,7 @@ No `labels`.
 - 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()`.
 
 ## Related
 - **Built from:** [ScrollContainer](../../components/scroll-container/COMPONENT.md)

package/dist/skill/reference/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/dist/skill/reference/layout/app-shell/examples/footer.tsx

@@ -31,7 +31,7 @@ export default function AppShellFooterExample() {
           </AppHeader.Start>
         </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Page>
+          <PageContent.Root as="section">
             <PageContent.Body>
               {INVOICES.map((invoice) => (
                 <Typography key={invoice} variant="body-m">
@@ -39,7 +39,7 @@ export default function AppShellFooterExample() {
                 </Typography>
               ))}
             </PageContent.Body>
-          </PageContent.Page>
+          </PageContent.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root>

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

@@ -1,14 +1,5 @@
-/** The app frame: Sidebar in the nav column, breadcrumbs in the AppHeader, the page in main; only main scrolls — `fillViewport`. */
-import {
-  AppHeader,
-  AppShell,
-  Breadcrumb,
-  Button,
-  Icon,
-  PageContent,
-  Sidebar,
-  Typography,
-} from "prime-ui-kit";
+/** 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";
 
 import styles from "./examples.module.css";
 
@@ -22,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>
@@ -48,34 +37,28 @@ export default function AppShellOverviewExample() {
         </AppShell.Nav>
         <AppHeader.Root>
           <AppHeader.Start>
-            <Breadcrumb.Root>
-              <Breadcrumb.Item href="#crm">CRM</Breadcrumb.Item>
-              <Breadcrumb.Item current>Обзор</Breadcrumb.Item>
-            </Breadcrumb.Root>
+            <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.Header>
-              {/* In a real app this is PageContent.Title (the page h1). */}
-              <Typography as="h2" variant="heading-m">
-                Обзор
-              </Typography>
-              <PageContent.Actions>
-                <Button.Root>
-                  <Button.Icon>
-                    <Icon name="action.add" />
-                  </Button.Icon>
-                  Новая сделка
-                </Button.Root>
-              </PageContent.Actions>
-            </PageContent.Header>
+          <PageContent.Root as="section">
             <PageContent.Body>
               <Typography variant="body-m" tone="secondary">
-                Выручка за месяц — 4,8 млн ₽, 37 сделок в работе.
+                Выручка за месяц — 4,8 млн ₽, на 12% больше, чем в сентябре.
               </Typography>
             </PageContent.Body>
-          </PageContent.Page>
+          </PageContent.Root>
         </AppShell.Main>
       </AppShell.Root>
     </div>

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

@@ -0,0 +1,268 @@
+/** 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`. */
+import {
+  AppHeader,
+  AppShell,
+  BottomNav,
+  Card,
+  Checkbox,
+  Crossfade,
+  Icon,
+  type IconName,
+  PageContent,
+  Sidebar,
+  Typography,
+  useAppShellNav,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type SectionId = "today" | "deals" | "clients" | "tasks" | "reports" | "settings";
+type Section = { id: SectionId; label: string; icon: IconName };
+type Row = { id: string; title: string; meta: string };
+
+/** The main sections: the Sidebar's first group on a wide screen, the bar on a phone. */
+const MAIN: Section[] = [
+  { id: "today", label: "Сегодня", icon: "nav.home" },
+  { id: "deals", label: "Сделки", icon: "object.funnel" },
+  { id: "clients", label: "Клиенты", icon: "object.users" },
+  { id: "tasks", label: "Задачи", icon: "object.tasks" },
+];
+
+/** The rest of the map: in the Sidebar footer; on a phone «Ещё» opens the Sidebar panel. */
+const MORE: Section[] = [
+  { id: "reports", label: "Отчёты", icon: "object.chart" },
+  { id: "settings", label: "Настройки", icon: "action.settings" },
+];
+
+const SECTIONS = [...MAIN, ...MORE];
+
+/** Open deals: an informational count, plain in the Sidebar. */
+const OPEN_DEALS = 12;
+
+const KPIS = [
+  { label: "Сделки в работе", value: "37", delta: "+4 за неделю", tone: "success" },
+  { label: "Выручка за октябрь", value: "4,8 млн ₽", delta: "+12% к сентябрю", tone: "success" },
+  { label: "Ждут ответа", value: "5 клиентов", delta: "2 дольше суток", tone: "danger" },
+] as const;
+
+const TASKS: Row[] = [
+  { id: "t1", title: "Позвонить в ООО «Север» по договору поставки", meta: "10:30" },
+  { id: "t2", title: "Отправить КП для АО «Меридиан»", meta: "12:00" },
+  { id: "t3", title: "Согласовать скидку для ИП Котова", meta: "15:00" },
+  { id: "t4", title: "Подготовить отчёт по воронке за неделю", meta: "17:30" },
+];
+
+/** What every section other than «Сегодня» lists. */
+const PAGES: Record<Exclude<SectionId, "today">, { description: string; rows: Row[] }> = {
+  deals: {
+    description: "12 сделок в работе · 9,6 млн ₽",
+    rows: [
+      { id: "d1", title: "ООО «Север» · поставка оборудования", meta: "2 400 000 ₽" },
+      { id: "d2", title: "АО «Меридиан» · годовой сервис", meta: "1 180 000 ₽" },
+      { id: "d3", title: "ООО «Вектор» · внедрение CRM", meta: "860 000 ₽" },
+    ],
+  },
+  clients: {
+    description: "248 клиентов · 5 ждут ответа",
+    rows: [
+      { id: "c1", title: "ООО «Север»", meta: "4 сделки" },
+      { id: "c2", title: "АО «Меридиан»", meta: "2 сделки" },
+      { id: "c3", title: "ИП Котов", meta: "1 сделка" },
+    ],
+  },
+  tasks: {
+    description: "4 задачи на сегодня",
+    rows: TASKS.map((task) => ({ ...task, meta: `сегодня, ${task.meta}` })),
+  },
+  reports: {
+    description: "2 отчёта · обновлены сегодня",
+    rows: [
+      { id: "r1", title: "Воронка продаж", meta: "обновлён сегодня" },
+      { id: "r2", title: "План и факт по менеджерам", meta: "октябрь" },
+    ],
+  },
+  settings: {
+    description: "8 человек в команде · 2 интеграции",
+    rows: [
+      { id: "s1", title: "Команда и роли", meta: "8 человек" },
+      { id: "s2", title: "Почта и телефония", meta: "подключены" },
+    ],
+  },
+};
+
+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 [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 (an item closes its panel) and the bar.
+  const go = (id: SectionId) => setCurrent(id);
+
+  const toggleTask = (id: string, checked: boolean) =>
+    setDone((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  const countOf = (id: SectionId) => {
+    if (id === "deals") return <Sidebar.ItemCount>{OPEN_DEALS}</Sidebar.ItemCount>;
+    if (id === "tasks" && openTasks > 0) {
+      return <Sidebar.ItemCount color="red">{openTasks}</Sidebar.ItemCount>;
+    }
+    return null;
+  };
+
+  const sidebarItem = (item: Section) => (
+    <Sidebar.Item key={item.id} current={item.id === current} onClick={() => go(item.id)}>
+      <Sidebar.ItemIcon>
+        <Icon name={item.icon} />
+      </Sidebar.ItemIcon>
+      {item.label}
+      {countOf(item.id)}
+    </Sidebar.Item>
+  );
+
+  return (
+    <AppShell.Template
+      fillViewport
+      scrollResetKey={current}
+      nav={
+        <Sidebar.Root>
+          <Sidebar.Header>
+            <Sidebar.Brand description="Отдел продаж">
+              <Sidebar.BrandLogo>
+                <Icon name="object.funnel" />
+              </Sidebar.BrandLogo>
+              Acme CRM
+            </Sidebar.Brand>
+            <Sidebar.Toggle variant="header" />
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Sidebar.Group>{MAIN.map(sidebarItem)}</Sidebar.Group>
+          </Sidebar.Content>
+          <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) => (
+            <BottomNav.Item key={item.id} current={item.id === current} onClick={() => go(item.id)}>
+              <BottomNav.ItemIcon>
+                <Icon name={item.icon} />
+              </BottomNav.ItemIcon>
+              {item.id === "tasks" && openTasks > 0 ? (
+                <BottomNav.ItemCount>{openTasks}</BottomNav.ItemCount>
+              ) : null}
+              {item.label}
+            </BottomNav.Item>
+          ))}
+          {/* The rest of the map lives in the Sidebar: «Ещё» opens it as a panel. */}
+          <MoreItem current={isMore(current)} />
+        </BottomNav.Root>
+      }
+    >
+      {/* Another section is another page: it cross-fades instead of flipping. */}
+      <Crossfade state={current}>
+        <PageContent.Root as="section">
+          <PageContent.Body>
+            {current === "today" ? (
+              <>
+                <PageContent.Grid>
+                  {KPIS.map((kpi) => (
+                    <PageContent.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>
+                  ))}
+                </PageContent.Grid>
+                <Card.Root variant="list">
+                  <Card.Header>
+                    <Card.Title as="h2">Задачи на сегодня</Card.Title>
+                  </Card.Header>
+                  <Card.List>
+                    {TASKS.map((task) => (
+                      <Card.ListItem key={task.id}>
+                        <span className={styles.row}>
+                          <Checkbox.Root
+                            checked={done.has(task.id)}
+                            onCheckedChange={(checked) => toggleTask(task.id, checked)}
+                          >
+                            <Checkbox.Label>{task.title}</Checkbox.Label>
+                          </Checkbox.Root>
+                          <Typography as="span" variant="caption" tone="muted">
+                            {task.meta}
+                          </Typography>
+                        </span>
+                      </Card.ListItem>
+                    ))}
+                  </Card.List>
+                </Card.Root>
+              </>
+            ) : (
+              <Card.Root variant="list">
+                <Card.List>
+                  {PAGES[current].rows.map((row) => (
+                    <Card.ListItem key={row.id}>
+                      <span className={styles.row}>
+                        <Typography as="span" variant="body-m" truncate>
+                          {row.title}
+                        </Typography>
+                        <Typography as="span" variant="caption" tone="muted">
+                          {row.meta}
+                        </Typography>
+                      </span>
+                    </Card.ListItem>
+                  ))}
+                </Card.List>
+              </Card.Root>
+            )}
+          </PageContent.Body>
+        </PageContent.Root>
+      </Crossfade>
+    </AppShell.Template>
+  );
+}

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

@@ -1,12 +1,24 @@
-/** Root, nav, header and main in one component; main scrolls back to the top whenever the page changes — `AppShell.Template` with `scrollResetKey`. */
-import { AppShell, Icon, PageContent, Sidebar, Typography } from "prime-ui-kit";
+/** 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";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 const PAGES = [
-  { id: "mailings", label: "Рассылки", icon: "field.email", text: "3 активные кампании." },
-  { id: "calendar", label: "Календарь", icon: "field.calendar", text: "5 событий на неделе." },
+  {
+    id: "mailings",
+    label: "Рассылки",
+    icon: "field.email",
+    text: "3 активные кампании",
+    note: "Последняя рассылка ушла вчера в 10:00, её открыли 42% получателей.",
+  },
+  {
+    id: "calendar",
+    label: "Календарь",
+    icon: "field.calendar",
+    text: "5 событий на неделе",
+    note: "Ближайшее — созвон с ООО «Север» сегодня в 15:00.",
+  },
 ] as const;
 
 export default function AppShellTemplateExample() {
@@ -38,16 +50,24 @@ 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.Header>
-            {/* In a real app this is PageContent.Title (the page h1). */}
-            <Typography as="h2" variant="heading-m">
-              {page.label}
+        <PageContent.Root as="section">
+          <PageContent.Body>
+            <Typography variant="body-m" tone="secondary">
+              {page.note}
             </Typography>
-            <PageContent.Description>{page.text}</PageContent.Description>
-          </PageContent.Header>
-        </PageContent.Page>
+          </PageContent.Body>
+        </PageContent.Root>
       </AppShell.Template>
     </div>
   );