prime-ui-kit 0.15.0 → 0.17.0

package/src/components/page-toolbar/examples/overview.tsx

@@ -1,113 +0,0 @@
-/** The panel of an orders page: search and filter, sections with counts, the period and the primary action in one row; active filters right under the search — `PageToolbar.Tools`, `PageToolbar.Sections`, `PageToolbar.View`, `PageToolbar.Actions`, `PageToolbar.Chips`. */
-import {
-  Button,
-  Icon,
-  PageToolbar,
-  SegmentedControl,
-  Select,
-  SmartFilter,
-  type SmartFilterField,
-  type SmartFilterValue,
-} from "prime-ui-kit";
-import * as React from "react";
-
-const SECTIONS = [
-  { value: "all", label: "Все", count: 128 },
-  { value: "active", label: "В работе", count: 12 },
-  { value: "done", label: "Доставлены", count: 96 },
-  { value: "cancelled", label: "Отменены", count: 20 },
-];
-
-const PERIODS = [
-  { value: "7d", label: "7 дней" },
-  { value: "30d", label: "30 дней" },
-  { value: "quarter", label: "Квартал" },
-];
-
-const FIELDS: SmartFilterField[] = [
-  {
-    key: "city",
-    label: "Город",
-    options: [
-      { value: "msk", label: "Москва" },
-      { value: "spb", label: "Санкт-Петербург" },
-      { value: "kzn", label: "Казань" },
-    ],
-  },
-  {
-    key: "payment",
-    label: "Оплата",
-    options: [
-      { value: "card", label: "Картой" },
-      { value: "invoice", label: "По счёту" },
-    ],
-  },
-];
-
-export default function PageToolbarOverviewExample() {
-  const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("30d");
-  const [filter, setFilter] = React.useState<SmartFilterValue>({
-    city: { include: ["msk"], exclude: [] },
-  });
-  const [search, setSearch] = React.useState("");
-
-  return (
-    <SmartFilter.Root
-      fields={FIELDS}
-      value={filter}
-      onValueChange={setFilter}
-      search={search}
-      onSearchChange={setSearch}
-    >
-      <PageToolbar.Root aria-label="Заказы">
-        <PageToolbar.Tools>
-          <SmartFilter.Toolbar />
-        </PageToolbar.Tools>
-        <PageToolbar.Sections>
-          <SegmentedControl.Root
-            fullWidth
-            value={section}
-            onValueChange={setSection}
-            aria-label="Раздел"
-          >
-            {SECTIONS.map((item) => (
-              <SegmentedControl.Item key={item.value} value={item.value}>
-                {item.label}
-                <SegmentedControl.Count>{item.count}</SegmentedControl.Count>
-              </SegmentedControl.Item>
-            ))}
-          </SegmentedControl.Root>
-        </PageToolbar.Sections>
-        <PageToolbar.View>
-          <Select.Root value={period} onValueChange={setPeriod}>
-            <Select.Trigger aria-label="Период">
-              <Select.TriggerIcon>
-                <Icon name="field.calendar" />
-              </Select.TriggerIcon>
-              <Select.Value />
-            </Select.Trigger>
-            <Select.Content>
-              {PERIODS.map((item) => (
-                <Select.Item key={item.value} value={item.value}>
-                  {item.label}
-                </Select.Item>
-              ))}
-            </Select.Content>
-          </Select.Root>
-        </PageToolbar.View>
-        <PageToolbar.Actions>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Новый заказ
-          </Button.Root>
-        </PageToolbar.Actions>
-        <PageToolbar.Chips>
-          <SmartFilter.Chips />
-        </PageToolbar.Chips>
-      </PageToolbar.Root>
-    </SmartFilter.Root>
-  );
-}

package/src/components/page-toolbar/examples/save-changes.tsx

@@ -1,40 +0,0 @@
-/** A settings page: sections of the form on the left, the save action with the number of changes at the end of the top row — never a sticky bar at the bottom of a phone screen — `PageToolbar.Actions`. */
-import { Button, PageToolbar, SegmentedControl } from "prime-ui-kit";
-import * as React from "react";
-
-const SECTIONS = [
-  { value: "profile", label: "Профиль" },
-  { value: "billing", label: "Оплата" },
-  { value: "team", label: "Команда" },
-];
-
-const CHANGES = 3;
-
-export default function PageToolbarSaveChangesExample() {
-  const [section, setSection] = React.useState("profile");
-
-  return (
-    <PageToolbar.Root aria-label="Настройки">
-      <PageToolbar.Sections>
-        <SegmentedControl.Root
-          fullWidth
-          value={section}
-          onValueChange={setSection}
-          aria-label="Раздел настроек"
-        >
-          {SECTIONS.map((item) => (
-            <SegmentedControl.Item key={item.value} value={item.value}>
-              {item.label}
-            </SegmentedControl.Item>
-          ))}
-        </SegmentedControl.Root>
-      </PageToolbar.Sections>
-      <PageToolbar.Actions>
-        <Button.Root variant="ghost" tone="neutral">
-          Отменить
-        </Button.Root>
-        <Button.Root>Сохранить {CHANGES} изменения</Button.Root>
-      </PageToolbar.Actions>
-    </PageToolbar.Root>
-  );
-}

package/src/components/page-toolbar/examples/without-search.tsx

@@ -1,60 +0,0 @@
-/** A dashboard panel without search on a tablet-width column: the sections fill the top row, the period selector alone in the bottom row stretches to the full width — `PageToolbar.Sections`, `PageToolbar.View`. */
-import { Icon, PageToolbar, SegmentedControl, Select } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const SECTIONS = [
-  { value: "overview", label: "Обзор" },
-  { value: "activity", label: "Активность" },
-  { value: "resources", label: "Ресурсы" },
-];
-
-const PERIODS = [
-  { value: "1h", label: "1 час" },
-  { value: "24h", label: "24 часа" },
-  { value: "7d", label: "7 дней" },
-];
-
-export default function PageToolbarWithoutSearchExample() {
-  const [section, setSection] = React.useState("overview");
-  const [period, setPeriod] = React.useState("24h");
-
-  return (
-    <div className={styles.tablet}>
-      <PageToolbar.Root aria-label="Панель мониторинга">
-        <PageToolbar.Sections>
-          <SegmentedControl.Root
-            fullWidth
-            value={section}
-            onValueChange={setSection}
-            aria-label="Раздел"
-          >
-            {SECTIONS.map((item) => (
-              <SegmentedControl.Item key={item.value} value={item.value}>
-                {item.label}
-              </SegmentedControl.Item>
-            ))}
-          </SegmentedControl.Root>
-        </PageToolbar.Sections>
-        <PageToolbar.View>
-          <Select.Root value={period} onValueChange={setPeriod}>
-            <Select.Trigger aria-label="Период">
-              <Select.TriggerIcon>
-                <Icon name="field.calendar" />
-              </Select.TriggerIcon>
-              <Select.Value />
-            </Select.Trigger>
-            <Select.Content>
-              {PERIODS.map((item) => (
-                <Select.Item key={item.value} value={item.value}>
-                  {item.label}
-                </Select.Item>
-              ))}
-            </Select.Content>
-          </Select.Root>
-        </PageToolbar.View>
-      </PageToolbar.Root>
-    </div>
-  );
-}

package/src/components/popover/examples/match-trigger-width.tsx

@@ -1,23 +0,0 @@
-/** In a narrow column the panel takes the exact width of a full-width trigger and its text wraps — `matchTriggerWidth`. */
-import { Button, Popover, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function PopoverMatchTriggerWidthExample() {
-  return (
-    <div className={styles.narrowColumn}>
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="neutral" fullWidth>
-            Условия тарифа
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content matchTriggerWidth>
-          <Typography variant="body-s" tone="secondary">
-            До 10 пользователей, 50 ГБ хранилища и приоритетная поддержка.
-          </Typography>
-        </Popover.Content>
-      </Popover.Root>
-    </div>
-  );
-}

package/src/components/scroll-container/examples/chat.tsx

@@ -1,101 +0,0 @@
-/** A support chat pinned to its last message: a sent message keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. */
-import { Button, Card, Icon, Input, ScrollContainer, Skeleton, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-type Message = { id: number; author: string; text: string };
-
-const HISTORY: Message[] = [
-  "Добрый день! Счёт № 4821 пришёл без НДС.",
-  "Здравствуйте, проверю реквизиты и вернусь.",
-  "Спасибо, ждём — нужно провести до пятницы.",
-  "Нашла: в карточке клиента стояла ставка 0 %.",
-  "Исправили ставку, выставляю счёт заново.",
-  "Новый счёт № 4830 отправлен на почту бухгалтерии.",
-  "Получили, всё верно. Оплатим сегодня.",
-  "Отлично! Закрывающие документы пришлём после оплаты.",
-  "Оплата прошла, платёжка во вложении.",
-  "Вижу поступление, спасибо. Акт отправим завтра.",
-  "Подскажите, можно ли подключить ЭДО?",
-  "Да, пришлите идентификатор в Диадоке.",
-].map((text, index) => ({ id: index + 1, author: index % 2 === 0 ? "Клиент" : "Поддержка", text }));
-
-const PAGE = 4;
-
-export default function ScrollContainerChatExample() {
-  // The newest messages first; older pages arrive when the reader scrolls up.
-  const [shown, setShown] = React.useState(PAGE);
-  const [loading, setLoading] = React.useState(false);
-  const [sent, setSent] = React.useState<Message[]>([]);
-  const [draft, setDraft] = React.useState("");
-  const messages = [...HISTORY.slice(-shown), ...sent];
-
-  const loadOlder = () => {
-    if (shown >= HISTORY.length) return;
-    setLoading(true);
-    // The promise keeps the region `aria-busy` and stops repeat calls until it settles.
-    return new Promise<void>((resolve) => {
-      window.setTimeout(() => {
-        setShown((count) => Math.min(count + PAGE, HISTORY.length));
-        setLoading(false);
-        resolve();
-      }, 800);
-    });
-  };
-
-  const send = (event: React.FormEvent) => {
-    event.preventDefault();
-    const text = draft.trim();
-    if (!text) return;
-    setSent((list) => [
-      ...list,
-      { id: HISTORY.length + list.length + 1, author: "Поддержка", text },
-    ]);
-    setDraft("");
-  };
-
-  return (
-    <Card.Root className={styles.chat}>
-      <Card.Header>
-        <Card.Title>ООО «Гранит» · счёт № 4821</Card.Title>
-      </Card.Header>
-      <ScrollContainer
-        anchor="end"
-        onReachStart={loadOlder}
-        tabIndex={0}
-        aria-label="Сообщения"
-        className={styles.messages}
-      >
-        {loading ? <Skeleton lines={2} className={styles.older} /> : null}
-        <ul className={styles.list}>
-          {messages.map((message) => (
-            <li key={message.id}>
-              <Typography as="span" variant="caption" tone="muted">
-                {message.author}
-              </Typography>
-              <Typography variant="body-m">{message.text}</Typography>
-            </li>
-          ))}
-        </ul>
-      </ScrollContainer>
-      <form className={styles.composer} onSubmit={send}>
-        <Input.Root className={styles.composerField}>
-          <Input.Wrapper>
-            <Input.Field
-              aria-label="Сообщение"
-              placeholder="Ответить клиенту"
-              value={draft}
-              onValueChange={setDraft}
-            />
-          </Input.Wrapper>
-        </Input.Root>
-        <Button.Root type="submit" aria-label="Отправить">
-          <Button.Icon>
-            <Icon name="action.send" />
-          </Button.Icon>
-        </Button.Root>
-      </form>
-    </Card.Root>
-  );
-}

package/src/components/spinner/examples/loading-region.tsx

@@ -1,22 +0,0 @@
-/** A card that loads its content: the region says it is busy and the spinner stays hidden from screen readers — `aria-hidden`. */
-import { Card, Spinner, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function SpinnerLoadingRegionExample() {
-  return (
-    <Card.Root
-      role="region"
-      aria-busy="true"
-      aria-label="Выручка за неделю"
-      className={styles.region}
-    >
-      <Card.Body className={styles.loading}>
-        <Spinner size="l" tone="muted" aria-hidden="true" />
-        <Typography as="p" variant="body-s" tone="secondary">
-          Считаем выручку за неделю
-        </Typography>
-      </Card.Body>
-    </Card.Root>
-  );
-}

package/src/layout/app-header/COMPONENT.md

@@ -1,186 +0,0 @@
-# AppHeader
-
-**Category:** page
-**Kind:** layout
-
-> The page's bar at the top of the app's content panel: the page title with a line of data, the page's tools and its own buttons — only what the current page needs.
-
-## When to use
-- Every page of an app built on [AppShell](../app-shell/COMPONENT.md): the page titles itself here — `AppHeader.Title` (the page's `<h1>`) with an `AppHeader.Description` that carries data, the path up (`Breadcrumb`) on a nested record.
-- The page's tools — its own search and filter, sections, the view, the primary action — as a [PageToolbar](../../components/page-toolbar/COMPONENT.md) in `AppHeader.Tools`.
-- The phone header: the menu button that opens the off-canvas Sidebar, the title, the page's action as an icon.
-
-## When not to use
-- A document page (settings, a long form, an article) → its title is `PageContent.Header` in main ([PageContent](../../components/page-content/COMPONENT.md)); the header then has no title.
-- App navigation → [Sidebar](../sidebar/COMPONENT.md) and, on a phone, [BottomNav](../bottom-nav/COMPONENT.md); the header holds at most the menu button.
-- Anything that is not about the current page (a global search, app-wide buttons) → the header row is per page; the app's own places live in the Sidebar.
-
-## Import
-```tsx
-import { AppHeader } from "prime-ui-kit";
-```
-
-## Anatomy
-```
-AppHeader.Root               <header>, the page's sticky row as high as the Sidebar brand row
-├─ AppHeader.Start           leading zone, takes the free width
-│  ├─ AppHeader.MenuButton   opens the off-canvas Sidebar (below 768px by default)
-│  ├─ Breadcrumb             the path up, only on a nested record
-│  ├─ AppHeader.Separator    short vertical line between the path and the title
-│  └─ AppHeader.Title        the page title, truncates
-│     ├─ AppHeader.Icon      decorative glyph on a tile shaped like a soft button m
-│     └─ AppHeader.Description  a muted line of data under the name
-├─ AppHeader.Actions         the page's own buttons at the end of the title row
-└─ AppHeader.Tools           second row, full width: the page's tools (a PageToolbar.Root)
-```
-The name of `AppHeader.Title` (not the icon or the description) is the page's `<h1>`.
-
-## API
-
-<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
-
-### AppHeader.Root
-`ref` → `HTMLElement`. The page's sticky `<header>` bar at the top of the content panel: only what the current page needs — its title, tools and own buttons. As high as the Sidebar brand row, lined up with the page. Icon buttons inside are `soft`, not `ghost`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `labels` | `Partial<AppHeaderLabels>` | — | Built-in strings, see Labels. |
-| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children` (`AppHeader.Start`, `AppHeader.Actions`, `AppHeader.Tools`), `className` and the other attributes. |
-
-### AppHeader.Start
-`ref` → `HTMLDivElement`. The leading zone that takes the free width: the menu button, the path up (a Breadcrumb) and the title.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
-
-### AppHeader.Title
-`ref` → `HTMLDivElement`. The page title: an optional `AppHeader.Icon`, the name (title-s, truncates) and an optional `AppHeader.Description` under it. The name is the page heading `<h1>`; the description stays outside its accessible name.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (the name, `AppHeader.Icon`, `AppHeader.Description` in any order), `className` and the other div attributes. |
-
-### AppHeader.Icon
-`ref` → `HTMLSpanElement`. Decorative glyph before the title (`aria-hidden`) on a tile shaped like the bar's soft buttons: control m square (36), its radius and the subtle fill.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children` (an `Icon`), `className` and the other span attributes. |
-
-### AppHeader.Description
-`ref` → `HTMLSpanElement`. Muted line under the title that carries data («128 в работе · 6 ждут оплаты», a status and a date); truncates on a narrow header, never hides.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
-
-### AppHeader.Separator
-`ref` → `HTMLDivElement`. A short vertical `Divider` (20) between groups in a zone — the path and the title — with 16 of air on each side.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `Omit<DividerProps, "orientation" \| "children">` | — | `className` and the other div attributes. |
-
-### AppHeader.Tools
-`ref` → `HTMLDivElement`. The page's tools in the header (a `PageToolbar.Root`): the header's second row, full width under the title row, wherever it is written.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (a `PageToolbar.Root`), `className` and the other div attributes. |
-
-### AppHeader.Actions
-`ref` → `HTMLDivElement`. The trailing row of the page's own buttons in the title row (export, a more menu); the page's primary action goes into the PageToolbar in `AppHeader.Tools` when the page has tools. Never wraps.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
-
-### AppHeader.MenuButton
-`ref` → `HTMLButtonElement`. A soft neutral icon `Button` named by `labels.menu` that opens the off-canvas Sidebar; wire `onClick` and `aria-expanded`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `show` | `"narrow" \| "always"` | `"narrow"` | `narrow` — only below 768px, where a Sidebar with `offCanvas="auto"` leaves the layout; `always` — on every width (`offCanvas="always"`). |
-| `…rest` | `ButtonHTMLAttributes<HTMLButtonElement>` | — | `onClick`, `aria-expanded`, `aria-label` (replaces `labels.menu`), `className` and the other button attributes. |
-
-## Variants
-
-### show (MenuButton)
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `narrow` | The menu button shows only below 768px | Sidebar with `offCanvas="auto"` | yes |
-| `always` | The menu button on every width | Sidebar with `offCanvas="always"`, or you decide visibility yourself | |
-
-### Structure
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `AppHeader.Title` | Icon, name and a line of data under it, like the Sidebar brand | A top-level page | |
-| Breadcrumb in Start | The path, `AppHeader.Separator` and the record as the title | A nested record page | |
-| with `AppHeader.Actions` | A row of the page's buttons at the end of the title row | Export, a more menu of the page | |
-| with `AppHeader.Tools` | A second row under the title row with the page's PageToolbar | The page has search, filters, sections, a view or a primary action | |
-| no `AppHeader.Title` | Only the menu button and the page's buttons | A document page: its title is `PageContent.Header` in main | |
-
-## States
-| State | Driven by | DOM |
-|---|---|---|
-| with page tools | an `AppHeader.Tools` child | Root renders it after the title row (DOM and Tab order follow the rows), full width, `--prime-space-3` under it |
-| narrow header | header width below 36rem (container `prime-app-header`) | the icon tile hides; the title and its line of data truncate |
-| menu button hidden | `show="narrow"` and viewport from 768px | `data-show="narrow"` on MenuButton |
-| short viewport | viewport below 480px high (a phone on its side) | Root stops sticking |
-
-## Layout & spacing
-- Row min height = control m + `--prime-space-2` (44), padding-block `--prime-space-3` (the top grows to the safe-area inset): 68 in all, the height of the Sidebar header, so the brand and the title share one line.
-- Inline padding: the shell gutters (16 → 24 → 32, the same as `AppShell.Main`) in the shell's panel, so the header lines up with the page; `--prime-space-4` elsewhere. Main's top air (24, 32 from 1024px) stands between the header and the page's first block.
-- Icon buttons are `soft` neutral (MenuButton is), never `ghost`: every button on the bar has a shape.
-- Gaps: `--prime-space-3` between zones, `--prime-space-2` inside Start and Actions; `AppHeader.Separator` adds `--prime-space-2` on each side (16 in all) and is 20 high.
-- `AppHeader.Icon` is a 36 tile with the radius and fill of a soft neutral button m, so it lines up with the buttons on the bar.
-- On the panel surface with no divider or shadow (depth from fill); `z-index: --prime-z-sticky`.
-- Sticky at `top: 0` of its scroller (static on a viewport below 480px high). The shared sticky surface paints its fill one border width past the top edge, so no sub-pixel seam of the scrolling rows shows above it.
-- Controls inside are size `m`.
-- `AppHeader.Tools` is the header's second row: the full width under the title row, 12 apart, sticky with it. The PageToolbar inside lays itself out from that width — one row from 56rem, stacked rows below, the primary action on its own row when the search would get less than 18rem beside it — so on a phone the page tools wrap under the title, never squeeze it.
-
-## Accessibility
-
-### Keyboard
-| Key | Action |
-|---|---|
-| `Tab` | Moves through the menu button, the path links and the page's buttons in reading order, then the page tools in the second row. |
-| `Enter` · `Space` | Presses the focused button: opens the menu or runs the action. |
-
-### ARIA
-- Root is a `<header>`: the banner landmark when it sits at the top level of the page.
-- MenuButton is named by `labels.menu`; pass `aria-expanded` (whether the Sidebar is open).
-- The name of `AppHeader.Title` is the page heading `<h1>`; the description sits next to it, outside its accessible name. One `<h1>` per page: in the header on app pages, `PageContent.Title` on a document page (whose header has no title).
-- `AppHeader.Tools` follows the title row in the DOM, so Tab and screen readers meet the page tools after the header's own buttons.
-
-### Labels
-<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
-
-| Key | Default | Used for |
-|---|---|---|
-| `menu` | `"Открыть меню"` | Name of `AppHeader.MenuButton`. |
-
-## Examples
-| Example | Shows |
-|---|---|
-| [overview.tsx](examples/overview.tsx) | The page's header: the page title with its icon and a line of data under it, the page's own buttons at the end — `AppHeader.Title`, `AppHeader.Description`, `AppHeader.Actions`. |
-| [breadcrumbs.tsx](examples/breadcrumbs.tsx) | A nested record: the path up, a separator and the record as the page title, the record's buttons at the end — `AppHeader.Separator`, `AppHeader.Actions`. |
-| [page-title.tsx](examples/page-title.tsx) | The header carries the page: the title is the page heading with a line of data, the page tools (sections, the period, the primary action) are its second row and lay themselves out from its width — `AppHeader.Title`, `AppHeader.Tools`. |
-| [in-app-shell.tsx](examples/in-app-shell.tsx) | The header in the app frame: one row with the Sidebar brand across the two planes, sticky over main — `AppShell`, `Sidebar.Brand`. |
-| [narrow.tsx](examples/narrow.tsx) | On a phone: the menu button opens the navigation, the title and its line of data truncate and the page's action keeps its icon — `AppHeader.MenuButton`, `show`. |
-
-## Mistakes
-- A border or shadow under the header → it sits on the panel surface; the fill is the boundary.
-- `AppHeader.Title` while main also has `PageContent.Title` → two titles; an app page titles itself in the header, only a document page keeps `PageContent.Header` (and then the header has no title).
-- No title at all on an app page → the page has no `<h1>`.
-- A description that describes the page («Все заказы магазина») → a line of data («128 в работе · 6 ждут оплаты») or nothing.
-- Page tools crammed into `AppHeader.Actions` → `AppHeader.Tools` with a PageToolbar: it wraps under the title instead of squeezing it.
-- A global search, notifications or app-wide buttons in the header → the row is per page; the app's own places live in the Sidebar.
-- A heading element of your own inside `AppHeader.Title` → the title's name is already the `<h1>`; a second heading nests inside it.
-- A hand-made menu button with a media query → `AppHeader.MenuButton` follows the Sidebar breakpoint.
-- `ghost` icon buttons in the header → `variant="soft" tone="neutral"`: a light fill gives each button a shape on the bar.
-
-## Related
-- **Built from:** [Button](../../components/button/COMPONENT.md), [Divider](../../components/divider/COMPONENT.md), Icon (`nav.menu`)
-- **See also:** [AppShell](../app-shell/COMPONENT.md), [Sidebar](../sidebar/COMPONENT.md), [PageContent](../../components/page-content/COMPONENT.md), [PageToolbar](../../components/page-toolbar/COMPONENT.md) (inside `AppHeader.Tools`), [Breadcrumb](../../components/breadcrumb/COMPONENT.md)

package/src/layout/app-header/examples/breadcrumbs.tsx

@@ -1,37 +0,0 @@
-/** A nested record: the path up, a separator and the record as the page title, the record's buttons at the end — `AppHeader.Separator`, `AppHeader.Actions`. */
-import { AppHeader, Breadcrumb, Button, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function AppHeaderBreadcrumbsExample() {
-  return (
-    <div className={styles.window}>
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <Breadcrumb.Root>
-            <Breadcrumb.Item href="#crm">CRM</Breadcrumb.Item>
-            <Breadcrumb.Item href="#clients">Клиенты</Breadcrumb.Item>
-          </Breadcrumb.Root>
-          <AppHeader.Separator />
-          <AppHeader.Title>
-            ООО «Север»
-            <AppHeader.Description>Клиент с 2021 года · 4 сделки</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Actions>
-          <Button.Root variant="soft" tone="neutral">
-            <Button.Icon>
-              <Icon name="action.send" />
-            </Button.Icon>
-            Написать
-          </Button.Root>
-          <Button.Root variant="soft" tone="neutral" aria-label="Ещё действия">
-            <Button.Icon>
-              <Icon name="action.more" />
-            </Button.Icon>
-          </Button.Root>
-        </AppHeader.Actions>
-      </AppHeader.Root>
-    </div>
-  );
-}

package/src/layout/app-header/examples/examples.module.css

@@ -1,47 +0,0 @@
-/* Layout of the AppHeader scenarios: an app window and a phone-wide screen. Semantic tokens only. */
-
-/* The top of an app window: the content panel (the page) with the header on it. */
-.window {
-  box-sizing: border-box;
-  width: 100%;
-  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);
-}
-
-/* narrow.tsx: the same window, phone-wide, so the title and its line of data truncate. */
-.phone {
-  width: min(100%, var(--prime-drawer-width-s));
-  margin-inline: auto;
-}
-
-/* in-app-shell.tsx: a whole app window with the rail on the page. */
-.stage {
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  height: calc(var(--prime-space-24) * 4);
-  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);
-}
-
-/* The shell fills the window frame instead of the viewport. */
-.shell {
-  height: 100%;
-}
-
-/* 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);
-}