prime-ui-kit 0.16.0 → 0.17.0

package/src/components/banner/examples/page-strip.tsx

@@ -6,7 +6,7 @@ import styles from "./examples.module.css";
 export default function BannerPageStripExample() {
   return (
     <div className={styles.sections}>
-      {/* In an app the strip stands first in the page, edge to edge above its content. */}
+      {/* In an app the strip stands first in the page, edge to edge above its padded content. */}
       <Banner.Root
         tone="warning"
         placement="page"
@@ -21,27 +21,29 @@ export default function BannerPageStripExample() {
           <Banner.Title>Пробный период закончится 12 октября</Banner.Title>
         </Banner.Content>
       </Banner.Root>
-      <Card.Root variant="panel">
-        <Card.Header>
-          <Card.Title>Оплата</Card.Title>
-        </Card.Header>
-        <Card.Body>
-          <Banner.Root tone="danger">
-            <Banner.Content>
-              <Banner.Icon>
-                <Icon name="status.danger" />
-              </Banner.Icon>
-              <Banner.Title>Не удалось списать оплату</Banner.Title>
-              <Banner.Description>
-                Карта •••• 4242 отклонена банком. Обновите способ оплаты до 15 октября.
-              </Banner.Description>
-              <Banner.Actions>
-                <Button.Root tone="danger">Обновить карту</Button.Root>
-              </Banner.Actions>
-            </Banner.Content>
-          </Banner.Root>
-        </Card.Body>
-      </Card.Root>
+      <div className={styles.pageBody}>
+        <Card.Root variant="panel">
+          <Card.Header>
+            <Card.Title>Оплата</Card.Title>
+          </Card.Header>
+          <Card.Body>
+            <Banner.Root tone="danger">
+              <Banner.Content>
+                <Banner.Icon>
+                  <Icon name="status.danger" />
+                </Banner.Icon>
+                <Banner.Title>Не удалось списать оплату</Banner.Title>
+                <Banner.Description>
+                  Карта •••• 4242 отклонена банком. Обновите способ оплаты до 15 октября.
+                </Banner.Description>
+                <Banner.Actions>
+                  <Button.Root tone="danger">Обновить карту</Button.Root>
+                </Banner.Actions>
+              </Banner.Content>
+            </Banner.Root>
+          </Card.Body>
+        </Card.Root>
+      </div>
     </div>
   );
 }

package/src/components/breadcrumb/COMPONENT.md

@@ -32,7 +32,7 @@ Breadcrumb.Root           <nav aria-label> + <ol>; size; chevrons between levels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Breadcrumb.Root
-`ref` → `HTMLElement` (the `<nav>`). `<nav aria-label>` with an `<ol>`; draws the chevrons between levels, sets the size and, on narrow containers, collapses the middle levels into a «…» menu button that lists them.
+`ref` → `HTMLElement` (the `<nav>`). `<nav aria-label>` with an `<ol>`; draws the chevrons between levels, sets the size and folds levels that do not fit into a «…» menu button that lists them: the middle ones, then the first one too.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -85,15 +85,16 @@ Use links for every ancestor and `current` on the last item; `s` above a `headin
 |---|---|---|
 | current | `current` | `aria-current="page"` on the text span, or on the link when the item has `href` |
 | hover / focus-visible on links | pointer / keyboard | text → primary; focus ring from LinkButton |
-| truncation | width | each level truncates with an ellipsis, max width `2 × --prime-space-24` (192; `--prime-space-24 + --prime-space-6`, 120, when its container is below 30rem — its own for 3+ levels, the nearest one above for 1–2); the last item shrinks last |
-| auto-collapse | 3+ levels and a container `< 30rem` | `data-collapsible="true"`; middle levels are `display: none` and replaced by «… ›»: a ghost menu button (`Dropdown.Trigger`, named by `labels.ellipsis`) whose menu lists them — links stay links, a level without `href` is a disabled row |
+| truncation | width | each level truncates with an ellipsis, max width `2 × --prime-space-24` (192); the current page shrinks at half the rate of the others |
+| auto-collapse | 2+ levels whose whole path does not fit the width uncut (measured on every resize) | `data-collapsible="true"`, `data-collapsed="true"`; middle levels are `display: none` and replaced by «… ›»: a ghost menu button (`Dropdown.Trigger`, named by `labels.ellipsis`) whose menu lists them — links stay links, a level without `href` is a disabled row |
+| deep collapse | the path folded as above still does not fit | `data-collapsed="deep"`; the first level folds too: «…» › current page, the menu lists every level before it |
 | collapse menu open | a press, `Enter` or `ArrowDown` on the «…» | `aria-expanded="true"` on the button; a `role="menu"` panel at the tier size |
 
-Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
+Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`), `data-collapsed` (`"true"` / `"deep"`).
 
 ## Layout & spacing
-- A path of 1–2 levels takes its content width (at most the row), so in a flex row — the `AppHeader` start, before `AppHeader.Separator` and the title — what follows stands right after it. A path of 3+ levels is a size container (`container-type: inline-size`, `inline-size: 100%`) that folds its middle levels by its own width: inside a flex row give it `flex: 1 1 auto; min-width: 0`.
-- In an `AppHeader` the path up holds the list a record belongs to (1–2 levels); the record itself is the `AppHeader.Title` after the separator, not the breadcrumb's `current` item.
+- A single level takes its content width (at most the row). A path of 2+ levels fills the row (`inline-size: 100%`) and folds by that width, so a wider row unfolds it again; its intrinsic width stays the whole path, so a host that measures natural widths (the `Page.TopBar` plan) reads it uncut. Inside a flex row give it a box that takes the room it may use (`flex: 1 1 auto; min-width: 0`).
+- In a `Page.Heading` the path up holds the list a record belongs to (1–2 levels); the record itself is the `Page.Title` (in a top bar the path's last level, after the chevron), not the breadcrumb's `current` item.
 - Above a page title: `gap: var(--prime-space-2)` between the trail and the title row.
 - The list never wraps. Chevrons sit inside each level after the first, in the placeholder text color, at the tier icon size.
 
@@ -113,7 +114,7 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 
 - `nav` landmark with `aria-label` from `labels.nav`; an ordered list.
 - The current page has `aria-current="page"`; the chevrons are `aria-hidden` spans inside the levels, so every list item is a level.
-- Collapsed middle levels leave the layout and the tab order (no invisible focus stops); the automatic «…» is a menu button (`aria-haspopup="menu"`) named by `labels.ellipsis`, and its menu lists them as links.
+- Collapsed levels leave the layout and the tab order (no invisible focus stops); the automatic «…» is a menu button (`aria-haspopup="menu"`) named by `labels.ellipsis`, and its menu lists them as links.
 - Icon-only links need `aria-label` on the Item.
 
 ### Labels
@@ -141,4 +142,4 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 
 ## Related
 - **Built from:** [LinkButton](../link-button/COMPONENT.md) (`tone="muted"`), [Button](../button/COMPONENT.md) and [Dropdown](../dropdown/COMPONENT.md) (the collapse menu), Icon (`nav.chevronRight`), [VisuallyHidden](../visually-hidden/COMPONENT.md)
-- **See also:** [Tabs](../tabs/COMPONENT.md), [PageContent](../page-content/COMPONENT.md), [Stepper](../stepper/COMPONENT.md)
+- **See also:** [Tabs](../tabs/COMPONENT.md), [Page](../../layout/page/COMPONENT.md), [Stepper](../stepper/COMPONENT.md)

package/src/components/button/COMPONENT.md

@@ -144,6 +144,7 @@ A Button lines up exactly with Input, Select, Datepicker trigger, SegmentedContr
 |---|---|---|---|
 | `fullWidth` | button fills the row | narrow forms, cards, mobile footers | off |
 | icon-only (children are only `Button.Icon`) | square, width = height | toolbars; needs `aria-label` | — |
+| icon only by the host (`data-button-label="icon"` on a wrapper, the `Page.TopBar` plan) | a Button with an icon and a label shows only its icon, square; the label and anything else beside the icon (a `Kbd` hint) stay transparent over it, the label as the name | a host short of width | — |
 | `pressed` / `defaultPressed` | on: accent soft fill and accent text over any variant; off: the variant's own look | a single toggle (favourite, pin, «show archived») | — (not a toggle) |
 | `current` | the selected look, `aria-current="page"` | the current page of a set (page numbers) | off |
 

package/src/components/button/examples/hold-to-confirm.tsx

@@ -28,7 +28,7 @@ export default function ButtonHoldToConfirmExample() {
       <Button.Icon>
         <Icon name="action.delete" />
       </Button.Icon>
-      Удерживайте, чтобы удалить проект
+      Удержите, чтобы удалить
     </Button.Root>
   );
 }

package/src/components/button/examples/on-colored-host.tsx

@@ -13,15 +13,15 @@ export default function ButtonOnColoredHostExample() {
         <Banner.Root key={text} variant="solid" tone={tone}>
           <Banner.Content>
             <Banner.Title>{text}</Banner.Title>
+            <Banner.Actions>
+              <Button.Root variant="soft" tone="inherit">
+                {action}
+              </Button.Root>
+              <Button.Root variant="ghost" tone="inherit">
+                {later}
+              </Button.Root>
+            </Banner.Actions>
           </Banner.Content>
-          <Banner.Actions>
-            <Button.Root variant="soft" tone="inherit">
-              {action}
-            </Button.Root>
-            <Button.Root variant="ghost" tone="inherit">
-              {later}
-            </Button.Root>
-          </Banner.Actions>
         </Banner.Root>
       ))}
     </>

package/src/components/card/COMPONENT.md

@@ -13,7 +13,7 @@
 - A tile that is itself the way to its details — a KPI that opens its report, a project tile (`asChild` with a link or a button).
 
 ## When not to use
-- A whole page region with a title and description → [PageContent](../page-content/COMPONENT.md) sections; do not wrap every section in a card.
+- A whole page region with a title and description → [Page](../../layout/page/COMPONENT.md) sections (`Page.Section`); do not wrap every section in a card.
 - Tabular data → use [DataTable](../data-table/COMPONENT.md) (it has its own fill).
 - A message about the page state → [Banner](../banner/COMPONENT.md); nothing to show yet → [EmptyPage](../empty-page/COMPONENT.md).
 - Content that floats over the page → [Popover](../popover/COMPONENT.md), [Modal](../modal/COMPONENT.md) or [Drawer](../drawer/COMPONENT.md).
@@ -101,7 +101,7 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
 ### Card.Label · Card.Value
-`ref` → `HTMLSpanElement`. Metric text: the label (body-s, truncates) and the value (tabular, sized by the template and the card width).
+`ref` → `HTMLSpanElement`. Metric text: the label (body-s; truncates, wraps in a `mini` tile and a `split` cell) and the value (tabular, sized by the template and the card width).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -170,11 +170,11 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 Without `asChild` a card is static: no hover, focus or press of its own. With it: `data-interactive` on the element.
 
 ## Layout & spacing
-- Cards on a page: one `PageContent.Grid` with a `PageContent.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own intrinsic `auto-fill` grid on the tile width of the layout tokens (a lone card keeps its column width), gap `--prime-space-4`.
+- Cards on a page: one `Page.Grid` with a `Page.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own intrinsic `auto-fill` grid on the tile width of the layout tokens (a lone card keeps its column width), gap `--prime-space-4`.
 - Radius `--prime-card-radius`, no border. In `panel` and `list` the `Header` is a padded zone with a faint inset hairline below; in `stat-trend` it can pair a leading Badge or icon with a compact `Card.Value`.
 - Padding `--prime-card-padding-m` (20); `Body` gap `--prime-card-gap` (16); fields inside `Body` 20 apart, one ladder step off the card.
 - Depth comes from nesting (foundation §4): on the page — the AppShell panel is the page — a card is layer 1 (white in light) with the raised whisper; inside another card it is the next layer, a flat tile. The ladder stops at layer 4.
-- Long values wrap, labels truncate; a chart SVG needs a CSS height.
+- Long values wrap; labels truncate, except in a `mini` tile and a `split` cell, where a label beside the icon wraps instead; a chart SVG needs a CSS height.
 - In a `Header` the title takes the free width; a control or a caption after it sits at the end without a wrapper. A `Card.Description` in the header stacks under the title, 4 apart; the control stays at the end, centred on both lines.
 - `Card.Meta` in `stat-trend` takes the bottom of the tile (`margin-top: auto`), so tiles of one row line their meta up; in `mini` and a `split` cell it sits in the text column under the value.
 
@@ -212,11 +212,11 @@ No `labels`.
 | [content-templates.tsx](examples/content-templates.tsx) | Content templates: a call to action, an events list and a campaign tile with a cover — `Card.Footer`, `Card.List`, `Card.Media`. |
 | [flat.tsx](examples/flat.tsx) | A flat tile without the raised shadow next to the default one, for dense grids — `flat`. |
 | [narrow.tsx](examples/narrow.tsx) | The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem — `variant`. |
-| [screen.tsx](examples/screen.tsx) | A dashboard: the title, a line of data, the period switch and the report in the app header; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `AppHeader.Tools`, `PageContent.Grid`. |
+| [screen.tsx](examples/screen.tsx) | A dashboard: the title and a line of data in the page flow, the period switch and the report in the top bar that keeps the title once it scrolls away; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `collapse`, `Page.Grid`. |
 
 ## Mistakes
 - A `<div>` with a border styled as a card → use `Card.Root`; depth comes from fill, not lines.
-- Wrapping every page section in a card → use PageContent sections.
+- Wrapping every page section in a card → use `Page.Section`.
 - `Card.Delta tone="success"` for every «+» → choose the tone by meaning.
 - Custom padding on a `panel` root → padding belongs to `Header` / `Body` / `Footer`.
 - A wrapper `<div>` around the label and the value of `mini` → put `Icon`, `Label`, `Value` straight into the root (or into a `split` cell); the template lays them out.
@@ -228,4 +228,4 @@ No `labels`.
 
 ## Related
 - **Built from:** —
-- **See also:** [PageContent](../page-content/COMPONENT.md), [DescriptionList](../description-list/COMPONENT.md) (record details inside a `Card.Body`), [Fieldset](../fieldset/COMPONENT.md) (groups of fields inside a settings card), [DataTable](../data-table/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Sparkline](../sparkline/COMPONENT.md) (a trend with its total inside a `panel`), [ChartFrame](../chart-frame/COMPONENT.md) (a full chart with legend and states)
+- **See also:** [Page](../../layout/page/COMPONENT.md), [DescriptionList](../description-list/COMPONENT.md) (record details inside a `Card.Body`), [Fieldset](../fieldset/COMPONENT.md) (groups of fields inside a settings card), [DataTable](../data-table/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Sparkline](../sparkline/COMPONENT.md) (a trend with its total inside a `panel`), [ChartFrame](../chart-frame/COMPONENT.md) (a full chart with legend and states)

package/src/components/card/examples/screen.module.css

@@ -1,4 +1,4 @@
-/* Dashboard: the board of tiles is PageContent.Grid; here only the inside of the tiles. */
+/* Dashboard: the board of tiles is Page.Grid; here only the inside of the tiles. */
 
 /* Bars inside a panel: 20 apart, like fields. */
 .bars {

package/src/components/card/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** A dashboard: the title, a line of data, the period switch and the report in the app header; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `AppHeader.Tools`, `PageContent.Grid`. */
+/** A dashboard: the title and a line of data in the page flow, the period switch and the report in the top bar that keeps the title once it scrolls away; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `collapse`, `Page.Grid`. */
 import {
-  AppHeader,
   Badge,
   Button,
   Card,
@@ -12,8 +11,7 @@ import {
   type DataTableColumn,
   Icon,
   LinkButton,
-  PageContent,
-  PageToolbar,
+  Page,
   ProgressBar,
   type ProgressSegment,
   SegmentedControl,
@@ -158,206 +156,194 @@ export default function CardScreenExample() {
   const [period, setPeriod] = React.useState<Period>("month");
 
   return (
-    <>
-      {/* In an app this header fills the shell's `header` slot and carries the page: the only h1,
-          a line of data under it and the page's tools; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Обзор
-            <AppHeader.Description>Продажи и оплаты · на 8 октября, 9:40</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <PageToolbar.Root aria-label="Обзор">
-            <PageToolbar.View>
-              <SegmentedControl.Root
-                aria-label="Период"
-                value={period}
-                onValueChange={(next) => setPeriod(next as Period)}
-              >
-                <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-                <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-                <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
-              </SegmentedControl.Root>
-            </PageToolbar.View>
-            <PageToolbar.Actions>
-              <Button.Root variant="soft" tone="neutral">
-                <Button.Icon>
-                  <Icon name="action.download" />
-                </Button.Icon>
-                Отчёт
-              </Button.Root>
-            </PageToolbar.Actions>
-          </PageToolbar.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
+    <Page.Root>
+      {/* An overview: the large title in the flow; the bar keeps the period and the report in
+          reach and repeats the title once it scrolls away. */}
+      <Page.TopBar collapse>
+        <Page.Tools>
+          <SegmentedControl.Root
+            aria-label="Период"
+            value={period}
+            onValueChange={(next) => setPeriod(next as Period)}
+          >
+            <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
+            <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+            <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
+          </SegmentedControl.Root>
+        </Page.Tools>
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.download" />
+            </Button.Icon>
+            Отчёт
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+      <Page.Header>
+        <Page.Heading>
+          <Page.Title>Обзор</Page.Title>
+          <Page.Description>Продажи и оплаты · на 8 октября, 9:40</Page.Description>
+        </Page.Heading>
+      </Page.Header>
+      <Page.Body>
+        {/* One board: every tile of the screen in one grid, 16 apart on both axes. */}
+        <Page.Grid>
+          {KPIS[period].map((kpi) => (
+            <Page.Cell key={kpi.label} span={3}>
+              {/* Another period is another set of values: the tile cross-fades instead of flipping. */}
+              <Crossfade state={period}>
+                <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>
+              </Crossfade>
+            </Page.Cell>
+          ))}
 
-      <PageContent.Root>
-        <PageContent.Body>
-          {/* One board: every tile of the screen in one grid, 16 apart on both axes. */}
-          <PageContent.Grid>
-            {KPIS[period].map((kpi) => (
-              <PageContent.Cell key={kpi.label} span={3}>
-                {/* Another period is another set of values: the tile cross-fades instead of flipping. */}
-                <Crossfade state={period}>
-                  <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>
-                </Crossfade>
-              </PageContent.Cell>
-            ))}
-
-            <PageContent.Cell>
-              <Card.Root variant="panel">
-                <Card.Body>
-                  <Sparkline
-                    data={REVENUE[period]}
-                    label="Выручка по дням"
-                    summary="sum"
-                    formatValue={formatRubles}
-                  />
-                </Card.Body>
-              </Card.Root>
-            </PageContent.Cell>
+          <Page.Cell>
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Sparkline
+                  data={REVENUE[period]}
+                  label="Выручка по дням"
+                  summary="sum"
+                  formatValue={formatRubles}
+                />
+              </Card.Body>
+            </Card.Root>
+          </Page.Cell>
 
-            {/* The chart spans two rows beside the two panels and fills their height. */}
-            <PageContent.Cell span={8} rows={2}>
-              <ChartFrame.Root
-                series={BILLING_SERIES}
-                formatValue={formatMillionsShort}
-                rows={BILLING[period].map((row) => ({
-                  label: row.label,
-                  values: { invoiced: row.invoiced, paid: row.paid },
-                }))}
-              >
-                <ChartFrame.Header>
-                  <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
-                  <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
-                </ChartFrame.Header>
-                <ChartFrame.Plot
-                  height="fill"
-                  renderPlot={({ width, height, series }) => {
-                    const rows = BILLING[period];
-                    const top = Math.ceil(Math.max(...rows.map((row) => row.invoiced)));
-                    const innerH = height - BILLING_MARGIN.top - BILLING_MARGIN.bottom;
-                    const band = (width - BILLING_MARGIN.left) / rows.length;
-                    const bar = Math.min(28, (band - 16) / series.length);
-                    const y = (value: number) => BILLING_MARGIN.top + innerH * (1 - value / top);
-                    return (
-                      <svg width={width} height={height} aria-hidden="true">
-                        {[0, top / 2, top].map((tick) => (
-                          <g key={tick}>
-                            <line
-                              x1={BILLING_MARGIN.left}
-                              x2={width}
-                              y1={y(tick)}
-                              y2={y(tick)}
-                              stroke={tick === 0 ? chartColors.axis : chartColors.grid}
-                            />
-                            <text
-                              x={BILLING_MARGIN.left - 8}
-                              y={y(tick)}
-                              textAnchor="end"
-                              dominantBaseline="middle"
-                            >
-                              {tick.toLocaleString("ru-RU")}
+          {/* The chart spans two rows beside the two panels and fills their height. */}
+          <Page.Cell span={8} rows={2}>
+            <ChartFrame.Root
+              series={BILLING_SERIES}
+              formatValue={formatMillionsShort}
+              rows={BILLING[period].map((row) => ({
+                label: row.label,
+                values: { invoiced: row.invoiced, paid: row.paid },
+              }))}
+            >
+              <ChartFrame.Header>
+                <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
+                <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
+              </ChartFrame.Header>
+              <ChartFrame.Plot
+                height="fill"
+                renderPlot={({ width, height, series }) => {
+                  const rows = BILLING[period];
+                  const top = Math.ceil(Math.max(...rows.map((row) => row.invoiced)));
+                  const innerH = height - BILLING_MARGIN.top - BILLING_MARGIN.bottom;
+                  const band = (width - BILLING_MARGIN.left) / rows.length;
+                  const bar = Math.min(28, (band - 16) / series.length);
+                  const y = (value: number) => BILLING_MARGIN.top + innerH * (1 - value / top);
+                  return (
+                    <svg width={width} height={height} aria-hidden="true">
+                      {[0, top / 2, top].map((tick) => (
+                        <g key={tick}>
+                          <line
+                            x1={BILLING_MARGIN.left}
+                            x2={width}
+                            y1={y(tick)}
+                            y2={y(tick)}
+                            stroke={tick === 0 ? chartColors.axis : chartColors.grid}
+                          />
+                          <text
+                            x={BILLING_MARGIN.left - 8}
+                            y={y(tick)}
+                            textAnchor="end"
+                            dominantBaseline="middle"
+                          >
+                            {tick.toLocaleString("ru-RU")}
+                          </text>
+                        </g>
+                      ))}
+                      {rows.map((row, i) => {
+                        const center = BILLING_MARGIN.left + band * i + band / 2;
+                        return (
+                          <g key={row.label}>
+                            {series.map((s, j) => {
+                              const value = s.id === "paid" ? row.paid : row.invoiced;
+                              return (
+                                <rect
+                                  key={s.id}
+                                  data-hidden={s.hidden}
+                                  x={center - (bar * series.length) / 2 + bar * j}
+                                  y={y(value)}
+                                  width={bar - 2}
+                                  height={y(0) - y(value)}
+                                  rx={2}
+                                  fill={s.color}
+                                />
+                              );
+                            })}
+                            <text x={center} y={height - 4} textAnchor="middle">
+                              {row.label}
                             </text>
                           </g>
-                        ))}
-                        {rows.map((row, i) => {
-                          const center = BILLING_MARGIN.left + band * i + band / 2;
-                          return (
-                            <g key={row.label}>
-                              {series.map((s, j) => {
-                                const value = s.id === "paid" ? row.paid : row.invoiced;
-                                return (
-                                  <rect
-                                    key={s.id}
-                                    data-hidden={s.hidden}
-                                    x={center - (bar * series.length) / 2 + bar * j}
-                                    y={y(value)}
-                                    width={bar - 2}
-                                    height={y(0) - y(value)}
-                                    rx={2}
-                                    fill={s.color}
-                                  />
-                                );
-                              })}
-                              <text x={center} y={height - 4} textAnchor="middle">
-                                {row.label}
-                              </text>
-                            </g>
-                          );
-                        })}
-                      </svg>
-                    );
-                  }}
-                />
-                <ChartFrame.Legend />
-              </ChartFrame.Root>
-            </PageContent.Cell>
+                        );
+                      })}
+                    </svg>
+                  );
+                }}
+              />
+              <ChartFrame.Legend />
+            </ChartFrame.Root>
+          </Page.Cell>
 
-            <PageContent.Cell span={4}>
-              <Card.Root variant="panel">
-                <Card.Header>
-                  <Card.Title as="h2">План продаж</Card.Title>
-                  <Typography as="span" variant="caption" tone="muted">
-                    Октябрь
-                  </Typography>
-                </Card.Header>
-                <Card.Body>
-                  <div className={styles.bars}>
-                    {PLAN.map((row) => (
-                      <ProgressBar
-                        key={row.manager}
-                        value={row.value}
-                        label={row.manager}
-                        tone={row.value < 50 ? "warning" : "accent"}
-                        showValue
-                      />
-                    ))}
-                  </div>
-                </Card.Body>
-              </Card.Root>
-            </PageContent.Cell>
+          <Page.Cell span={4}>
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">План продаж</Card.Title>
+                <Typography as="span" variant="caption" tone="muted">
+                  Октябрь
+                </Typography>
+              </Card.Header>
+              <Card.Body>
+                <div className={styles.bars}>
+                  {PLAN.map((row) => (
+                    <ProgressBar
+                      key={row.manager}
+                      value={row.value}
+                      label={row.manager}
+                      tone={row.value < 50 ? "warning" : "accent"}
+                      showValue
+                    />
+                  ))}
+                </div>
+              </Card.Body>
+            </Card.Root>
+          </Page.Cell>
 
-            <PageContent.Cell span={4}>
-              <Card.Root variant="panel">
-                <Card.Header>
-                  <Card.Title as="h2">Дебиторка</Card.Title>
-                  <Typography as="span" variant="caption" tone="muted">
-                    8,2 млн ₽
-                  </Typography>
-                </Card.Header>
-                <Card.Body>
-                  <ProgressBar
-                    segments={RECEIVABLES}
-                    label="По сроку оплаты"
-                    legend
-                    formatValue={formatMillions}
-                  />
-                </Card.Body>
-              </Card.Root>
-            </PageContent.Cell>
-          </PageContent.Grid>
+          <Page.Cell span={4}>
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">Дебиторка</Card.Title>
+                <Typography as="span" variant="caption" tone="muted">
+                  8,2 млн ₽
+                </Typography>
+              </Card.Header>
+              <Card.Body>
+                <ProgressBar
+                  segments={RECEIVABLES}
+                  label="По сроку оплаты"
+                  legend
+                  formatValue={formatMillions}
+                />
+              </Card.Body>
+            </Card.Root>
+          </Page.Cell>
+        </Page.Grid>
 
-          {/* A new topic: a titled section, set off by more air than the tiles. */}
-          <PageContent.Section label="Последние оплаты">
-            <PageContent.Actions>
-              <LinkButton href="#invoices">Все счета</LinkButton>
-            </PageContent.Actions>
-            <DataTable
-              columns={COLUMNS}
-              rows={PAYMENTS}
-              getRowKey={(row) => row.id}
-              paging="none"
-            />
-          </PageContent.Section>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        {/* A new topic: a titled section, set off by more air than the tiles. */}
+        <Page.Section label="Последние оплаты">
+          <Page.Actions>
+            <LinkButton href="#invoices">Все счета</LinkButton>
+          </Page.Actions>
+          <DataTable columns={COLUMNS} rows={PAYMENTS} getRowKey={(row) => row.id} paging="none" />
+        </Page.Section>
+      </Page.Body>
+    </Page.Root>
   );
 }