prime-ui-kit 0.13.0 → 0.14.0

package/dist/skill/reference/components/kanban/COMPONENT.md

@@ -32,7 +32,7 @@ import {
 ```
 Kanban.Root                          board: horizontal strip of columns, its own Dnd.Root if none above
 └─ <ul> (Dnd.Sortable, axis x)       the columns in `columnOrder`
-   └─ <li> column (from `columns`)   `fill-muted` well (one ladder step off the board's surface)
+   └─ <li> column (from `columns`)   no well with a header plate (`plain`) or a header line (`line`), or a `fill-muted` well (`well`)
       ├─ header                      title (h3) · count Badge (the stage color) · renderColumnActions(column) · [grip Dnd.Handle, a lock when `locked`]
       │  ├─ description              muted line under the title (`column.description`)
       │  └─ meta                     the stage's figures (`renderColumnMeta(column)`)
@@ -73,7 +73,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | `renderColumnActions` | `(column: KanbanColumn) => ReactNode` | — | Trailing actions of a column header (add a card, a menu); kit controls inside take the `s` tier. |
 | `renderColumnMeta` | `(column: KanbanColumn) => ReactNode` | — | The meta line under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»). |
 | `canDrop` | `(id: string, columnId: string) => boolean \| string` | — | A workflow rule: refuses card `id` in column `columnId` — `false`, or a string that says why (spoken and shown under the carried card). |
-| `variant` | `"well" \| "plain"` | `"well"` | `well`: every column is a filled well with its cards inside. `plain`: no wells — a filled header plate and wider cards carry the column. |
+| `variant` | `"plain" \| "line" \| "well"` | `"plain"` | No wells: `plain` — a filled header plate over the cards, `line` — a bare header over a faint line; cards stand on the host. `well`: every column is a filled well holding its cards (bounded queues). |
 | `loading` | `boolean` | `false` | Columns show skeleton cards in the card geometry; the cards cross-fade in when it turns off. |
 | `disabled` | `boolean` | `false` | Read-only board: no drag, no keyboard moves, no column grips; `onItemClick` and `getItemHref` still open cards. |
 | `labels` | `Partial<KanbanLabels>` | — | Built-in strings, see Labels. |
@@ -126,8 +126,11 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `well` | every column is a filled well (`fill-muted`, radius `l`), cards inside it | the default board; columns must read as areas | yes |
-| `plain` | no wells: the column is its header — a filled plate (`fill-muted`, radius `l`) as wide as the cards — and its cards, which widen to almost the full column, so neighbouring columns stand closer | a lighter board on a page that already has its own surface | |
+| `plain` | no wells: the column is its header — a filled plate as wide as the cards (title, count) — and its cards, which stand on the board's host, each a surface one ladder step off it (white on the light page), as a Card on the page | the board is the page's main region (a pipeline, a task board, a queue screen) or sits in a Card or Drawer — one level of nesting, cards are the only boxes | yes |
+| `line` | no wells, like `plain`, but the header is bare: title and count over a faint inset hairline as wide as the cards | the same places as `plain` when the headers should stay quiet — many columns, a calm board, the column headers are not the focus | |
+| `well` | every column is a filled well (`fill-muted`, radius `l`) holding its cards (the selected step of the well) | columns must read as bounded queues: WIP limits and capacity, many sparse or empty columns whose drop area must show, a dense board of many narrow columns | |
+
+Do not wrap a `plain` board's columns in your own boxes, and do not put a `well` board inside a filled box of your own — both are the double nesting the variants exist to avoid.
 
 ### Flags
 | Value | Looks like | Use when | Default |
@@ -167,11 +170,11 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - Give the root a height (`className`): columns span it and every column body scrolls on its own; without one the columns take the height of the tallest.
 - The board is a size container. From 40rem of its own width columns keep a fixed 18rem; below it a column takes 85% of the board and snaps (`scroll-snap-type: x mandatory`), so the next column peeks. Snapping is off while a drag auto-scrolls the strip.
 - The strip scrolls sideways inside the board, never the page. Cards sit at the top of their column; the drop area runs to the bottom of the column, so a card can be released anywhere in it.
-- `well`: column gap `--prime-space-3`, cards inset `--prime-space-2` from the column edge, column radius `l`. `plain`: column gap `--prime-space-3`, cards inset `--prime-space-1` (room for the focus ring). Card gap `--prime-space-2`, card padding `--prime-space-3`, card radius `m`.
+- `plain` / `line`: column gap `--prime-space-3`, cards inset `--prime-space-1` (room for the focus ring); a card sets `data-depth` one above the board's host and paints `--prime-color-layer-current`, so it keeps its color in flight too. `well`: column gap `--prime-space-3`, cards inset `--prime-space-2` from the column edge, column radius `l`. Card gap `--prime-space-2`, card padding `--prime-space-3`, card radius `m`.
 - The column title is `title-m`; the header is at least a control `m` tall, its text starts where the card text does.
-- A faint inset hairline (`--prime-color-border-faint`, as in a dialog header) separates the header from the cards.
+- `well` and `line`: a faint inset hairline (`--prime-color-border-faint`, as in a dialog header) separates the header from the cards. `plain`: the header is a filled plate (`--prime-color-fill-muted`, `--prime-radius-l`) as wide as the cards, in place of the hairline.
 - The header is a grid: the title, the count, the actions and the grip at the end on the first row; the description under the title on the second, the meta line under it (`--prime-space-1` above, caption, `text-secondary`).
-- A card is `--prime-color-control-selected` (two ladder steps off its column; white in light) on `--prime-shadow-raised`.
+- A card is on `--prime-shadow-raised`: in `plain` / `line` the next layer of the board's host (`--prime-color-layer-current` of its own depth), in `well` `--prime-color-control-selected` (two ladder steps off its well; white in light).
 - `Kanban.ItemHeader` is a muted caption row over a faint hairline (`--prime-color-border-faint`); a card without it starts with its title or a full-width `Thumbnail` cover.
 - Header actions get the `s` tier; inside a card, kit controls take the `m` host tier (a `Badge` is `s`). Pick a small `Avatar` (`size="s"`).
 
@@ -215,10 +218,10 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A release board: cards move within and between columns by drag, a touch hold or Alt + arrows; a card shows its meta line, labels, comments and assignee — `Kanban.Root`, `Kanban.Item`, `renderItem`, `renderColumnActions`. |
-| [variants.tsx](examples/variants.tsx) | The same release board in both looks: columns as filled wells, and bare columns where the header and wider cards carry each column — `variant`. |
+| [variants.tsx](examples/variants.tsx) | The same release board in three looks: no wells with a header plate, no wells with a header over a line, and columns as filled wells holding their cards — `variant`. |
 | [structure.tsx](examples/structure.tsx) | Cards take only the parts they need: a title alone, a meta line, labels, a footer with counts and an assignee — `Kanban.ItemTitle`, `Kanban.ItemDescription`, `Kanban.ItemBadges`, `Kanban.ItemFooter`, `Kanban.ItemCount`. |
 | [cards.tsx](examples/cards.tsx) | Three kinds of cards on one board: a plain note, a ticket with a header row of key and priority, a design task with a cover — `Kanban.ItemHeader`, `Thumbnail`, `Kanban.ItemFooter`. |
-| [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`. |
+| [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. |
 | [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
 | [saving.tsx](examples/saving.tsx) | Every move is saved on the server: the card waits busy in its new place, and an invoice the server refuses to close glides back to its column — `onValueChange`. |
 | [item-link.tsx](examples/item-link.tsx) | Tickets that open: each card is a link to its page, so ⌘-click or a middle click opens a new tab, a plain click, Enter or Space opens it in place, and a drag only moves it — `getItemHref`, `onItemClick`. |
@@ -234,6 +237,7 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - A hover-only action on a card → touch has no hover; put the action in the card or open the card on click (`onItemClick`).
 - `onClick` / `onKeyDown` on `Kanban.Item` to open a card → `onItemClick` (click, Enter, Space, never after a drag) or `getItemHref` for a page of its own.
 - `getItemHref` without `getLabel` → the link is named by the card id; pass a human name.
+- Drawing your own box (a Card, a filled `div`) around each column, or around a `well` board → pick the `variant`: `plain` or `line` for one level of nesting, `well` when columns must read as bounded queues.
 - Styling a card from an ancestor (`.board .card`) → the flying clone is portalled to `<body>` and loses it; put the class on `Kanban.Item`.
 - Keeping the column order in `columns` and reordering that array → pass `columnOrder` / `onColumnOrderChange`; `columns` stays the data.
 - Putting a system stage back first after every move → `locked: true` on that column.

package/dist/skill/reference/components/kanban/examples/limits.tsx

@@ -1,4 +1,4 @@
-/** A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`. */
+/** A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. */
 import { Badge, Kanban } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -33,6 +33,7 @@ export default function KanbanLimitsExample() {
     <Kanban.Root
       aria-label="Очередь поддержки"
       className={styles.board}
+      variant="well"
       columns={COLUMNS}
       items={TICKETS}
       getId={(ticket) => ticket.id}

package/dist/skill/reference/components/kanban/examples/variants.tsx

@@ -1,11 +1,11 @@
-/** The same release board in both looks: columns as filled wells, and bare columns where the header and wider cards carry each column — `variant`. */
-import { Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
+/** The same release board in three looks: no wells with a header plate, no wells with a header over a line, and columns as filled wells holding their cards — `variant`. */
+import { Badge, Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-type Task = { id: string; title: string; due: string };
+type Task = { id: string; title: string; due: string; label: string };
 
-const VARIANTS: KanbanVariant[] = ["well", "plain"];
+const VARIANTS: KanbanVariant[] = ["plain", "line", "well"];
 
 const COLUMNS = [
   { id: "todo", title: "К выполнению", description: "Берём после планирования" },
@@ -14,10 +14,15 @@ const COLUMNS = [
 ];
 
 const TASKS: Task[] = [
-  { id: "PRJ-214", title: "Экспорт счетов в CSV для бухгалтерии", due: "14 окт" },
-  { id: "PRJ-221", title: "Фильтр заказов по складу", due: "17 окт" },
-  { id: "PRJ-198", title: "Повторная отправка приглашений в команду", due: "10 окт" },
-  { id: "PRJ-176", title: "Онбординг нового проекта", due: "3 окт" },
+  { id: "PRJ-214", title: "Экспорт счетов в CSV для бухгалтерии", due: "14 окт", label: "Финансы" },
+  { id: "PRJ-221", title: "Фильтр заказов по складу", due: "17 окт", label: "Заказы" },
+  {
+    id: "PRJ-198",
+    title: "Повторная отправка приглашений в команду",
+    due: "10 окт",
+    label: "Команда",
+  },
+  { id: "PRJ-176", title: "Онбординг нового проекта", due: "3 окт", label: "Проекты" },
 ];
 
 const PLACEMENT = {
@@ -45,6 +50,9 @@ export default function KanbanVariantsExample() {
               <Kanban.ItemDescription>
                 {task.id} · до {task.due}
               </Kanban.ItemDescription>
+              <Kanban.ItemBadges>
+                <Badge.Root>{task.label}</Badge.Root>
+              </Kanban.ItemBadges>
             </Kanban.Item>
           )}
         />

package/dist/skill/reference/components/list/COMPONENT.md

@@ -134,7 +134,7 @@ A second line or an avatar makes a row taller than the one-line height; the vert
 | current | `current` | `aria-current="true"` (button) or `"page"` (link); `fill-muted-hover` fill, primary text |
 | focus-visible | keyboard | the focus ring inside the row edge |
 | disabled | `disabled` | `disabled` on a button; `aria-disabled="true"`, no `href` on a link, `tabindex="-1"` on an `asChild` element; `data-disabled="true"`; disabled text; in a reorderable list the handle is disabled and the row holds its place |
-| reorderable | `onReorder` | `data-reorderable="true"` on the root (a `Dnd.Sortable` `<ul>`); each `<li>` is a sortable item (`data-dnd-item` = `value`) with a leading `Dnd.Handle`; drag by the handle (a touch hold on touch), Alt + ↑ / ↓ from the handle or the row; a lifted row leaves a dashed gap, its neighbours glide, the copy follows the pointer and sets down in its new place |
+| reorderable | `onReorder` | `data-reorderable="true"` on the root (a `Dnd.Sortable` `<ul>`); each `<li>` is a sortable item (`data-dnd-item` = `value`) with a leading `Dnd.Handle`; drag by the handle (a touch hold on touch), Alt + ↑ / ↓ from the handle or the row; a lifted row leaves a dashed gap in the row's radius, its neighbours glide, the copy (handle and row, in the row's padding and radius) follows the pointer and sets down in its new place without a jump |
 | saving a move | `onReorder` returned a pending promise | the row stays in its new place, `aria-busy="true"`, a `Spinner` stands in for the handle, the row content dims to 0.6 (`--prime-motion-duration-fast` both ways); a rejection glides the row back |
 
 Root attribute: `data-size`. The fill changes on `background-color` with `--prime-motion-duration-xfast` both ways (0 under reduced motion).

package/dist/skill/reference/components/media-viewer/COMPONENT.md

@@ -93,8 +93,8 @@ MediaViewer has no `variant`, `size` or `tone`: the stage is always near black,
 | gesture | a finger or the mouse dragging | `data-gesture="page \| pan \| pinch \| dismiss"` on the dialog |
 | chrome hidden | a tap, a pinch or a double tap (Tab brings it back); a playing video after 2.5 s without the pointer moving | `data-chrome="hidden"`: the bars fade and drift aside, take no presses; while a video plays the pointer hides too (`data-playing`). A video standing still always keeps its bar |
 | flight | open and close | `data-phase="opening \| open \| closing"`: only the picture moves; the play disk and the bars come after it lands and go before it takes off |
-| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a Spinner |
-| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel with «Повторить» |
+| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a Spinner that fades out as the picture arrives |
+| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel with «Повторить»; it fades in, and on a retry cross-fades with the Spinner in the same place |
 | sound | the sound button, its level panel (hover, focus, a tap), ↑ / ↓, M | one `volume` and mute for every video of the viewer; `data-open` on the sound control while the level shows; `autoPlay` refused with sound starts muted |
 
 Motion: it opens out of the thumbnail it was opened from — the picture grows from the thumbnail's shape to its fit over `base` on the `emphasized` curve while the stage fades in — and closes back into the thumbnail of the item on screen (`getOrigin`; without it the opener for the item it opened at, and for any other item the picture on the page that shows its `thumbnail`, `src` or `poster`, nearest the opener — paging on in a grid still closes into the right tile); without one, or with less than a fifth of it in view, it rises from a slight shrink and fades. The shape is what the page shows of the thumbnail: its media box, cut by every clipping ancestor (a scroller, a rounded album, a bubble) and the viewport, and the radius of each corner taken from the frame whose corner it is — an album's inner tiles fly square, its corner tiles round only on the outer side, and the corners glide all the way, never snap. During the flight only the picture moves; a video flies as the frame of the thumbnail it opened from (drawn before the first paint), starts only after it lands (`autoPlay`) and pauses before it takes off. Released gestures settle with a spring: a page turns past half its width or on a flick, and any other item — a thumbnail far along the strip, `Home` / `End` — arrives by the same slide, never a cut or a fade; the filmstrip follows the track on every frame, so its glide and the emphasis of its thumbnails move with the finger and settle with the page; a zoomed picture coasts with iOS momentum (deceleration 0.998 / ms) and springs back from its edges, and at its edge a sideways drag turns the page; a pinch past its range resists like a rubber band and settles inside it, a swipe away shrinks the picture and thins the stage and closes past 12% of the height or on a flick. Under `prefers-reduced-motion` the open and close are instant and the springs land at once; the picture still follows the finger.

package/dist/skill/reference/components/message/COMPONENT.md

@@ -116,7 +116,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 |---|---|---|---|
 | `author` | `ReactNode` | — (required) | Who wrote the quoted message. |
 | `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"blue"` | The author's hue (the same as their `Message.Author`). |
-| `target` | `string` | — | The `value` of the quoted message: a press brings the chat to it (rendering it first in a window), the other messages blink back around it, and the focus moves to it. Makes the quote a button. |
+| `target` | `string` | — | The `value` of the quoted message: a press brings the chat to it (rendering it first in a window), the message blinks, and the focus moves to it. Makes the quote a button. |
 | `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | — | A press on the quote, after `target` is shown: load the original when it is not in the list yet. Makes the quote a button. |
 | `labels` | `Partial<MessageReplyLabels>` | — | `reply` — the hidden prefix read before the quote. |
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "color" \| "onClick">` | — | `children` (the quoted text, one line), `className`. |
@@ -302,7 +302,7 @@ The list-level settings a message reads — the group chat's author header and a
 | author header | `Message.Author` in a group chat (`Chat.Messages type="group"`) on `single` / `first`; any message on its own | the header line at the top of the bubble; over a picture or a circle on the media pill at the top-start corner; hidden on `middle` / `last` and in a direct chat (the author still names the message) |
 | avatar | `Message.Avatar` in a group chat on `single` / `last` | the avatar in the gutter at the bubble's bottom; the gutter stays empty on the others |
 | new at the end | the chat's list decided it (`data-enter="incoming"` / `"outgoing"`) | the message column floats up `--prime-space-3` from below and fades in (`fast`, enter easing, `transform` + `opacity` only; the row box clips it); never on a first render, history or a status change. See Chat |
-| pointed at / stepping back | the chat's jump, search or selection (`data-pointed`, `data-selected` on the message; `data-pointing`, `data-selecting` on the list) | nothing is drawn on the message: it stays at full strength while the others — the bubble, picture or circle with its tail and reactions, the avatar, the retry — step back to `--prime-message-dim-opacity` with a slight desaturation (selection: `fast`, both ways; a jump: three blinks, `base` each; the current search match: while it is current). Reduced motion: no blink |
+| pointed at / stepping back | the chat's jump, search or selection (`data-pointed`, `data-selected` on the message; `data-pointing`, `data-selecting` on the list) | nothing is drawn on the message: it stays at full strength while the others — the bubble, picture or circle with its tail and reactions, the avatar, the retry — step back to `--prime-message-dim-opacity` with a slight desaturation (selection: `fast`, both ways; the current search match: while it is current); a jump instead blinks the message itself three times, `base` each, the others stay still. Reduced motion: no blink |
 | search match | the chat's search query | every case-insensitive match in `Message.Text` and the transcripts under a soft accent wash (`<mark>`) |
 | typing | `Message.Typing active` | an incoming bubble of three dots rising and fading in turn on the loading loop (reduced motion slows it); enters floating up while its height opens (`fast`), leaves closing its height (`fast`) — or at once when a reply arrives at the end of the list in the same update; its block axis clips, so a closed row leaves nothing under the list |
 | status change | `status` | the ticks cross-fade and scale (`base`, `emphasized`), interruptible |

package/dist/skill/reference/components/notification/COMPONENT.md

@@ -152,6 +152,7 @@ Collapsed stacks show up to 3 cards peeking behind each other. Hover or keyboard
 ### ARIA
 - Each stack is an `<ol>` named by the region label of its position; each card is an `<article>`: `role="status"` + `aria-live="polite"`, or `role="alert"` + `aria-live="assertive"` for `warning` / `danger`.
 - The icon and the countdown are `aria-hidden`; the close button is named by `labels.close`.
+- A toast is a non-modal live region, not a layer of the overlay stack: Escape and a press elsewhere belong to the page and to the topmost open layer, so a toast takes no `closeOnEscape` / `closeOnOutsideClick` — it leaves by its timer, the close button, a swipe or `dismiss()`.
 - Do not keep the only copy of important information in a toast with a timer — use `persistent` or a Banner.
 
 ### Labels

package/dist/skill/reference/components/page-content/COMPONENT.md

@@ -3,12 +3,14 @@
 **Category:** page
 **Kind:** layout
 
-> Page structure inside the main column: title, description, page actions and content sections; a page as high as the panel and the list + detail layout.
+> Page structure inside the main column: title, page actions and content blocks, titled sections and the tile grid of a dashboard; a page as high as the panel and the list + detail layout.
 
 ## When to use
 - Every route rendered inside `AppShell.Main`: a page heading (`<h1>`), an intro line, page-level actions and the page body.
 - A text page held to a reading measure (`PageContent.Root maxWidth="readable"`).
 - A wide dashboard page capped at the content width (`maxWidth="wide"`).
+- The tiles of a dashboard — KPI cards, charts, panels — as one board (`PageContent.Grid` + `PageContent.Cell`).
+- A new topic of the page with its own heading and a link or button beside it (`PageContent.Section`); a settings page with a heading column beside each panel (`layout="aside"`).
 - A page whose body takes the rest of the panel's height — a log table, a board, a chat (`fill`).
 - Mail, a messenger, a ticket queue: a list and the chosen record side by side, one at a time on a narrow panel (`PageContent.Split`).
 
@@ -16,7 +18,8 @@
 - The app frame (navigation rail, header, scrolling main column) → use [AppShell](../../layout/app-shell/COMPONENT.md).
 - A bounded block inside the page → use [Card](../card/COMPONENT.md).
 - An empty / error / not-found page → use [EmptyPage](../empty-page/COMPONENT.md).
-- Arbitrary headings inside content → use [Typography](../typography/COMPONENT.md).
+- A heading inside a card → `Card.Title`; text headings inside prose → use [Typography](../typography/COMPONENT.md).
+- A grid inside one block (thumbnails, fields, bars in a panel) → the block's own CSS grid; `PageContent.Grid` places the page's tiles.
 - Details that open over the list and close again (a record from a table) → use [Drawer](../drawer/COMPONENT.md); `Split` is for a list people work through record by record.
 
 ## Import
@@ -26,12 +29,16 @@ import { PageContent } from "prime-ui-kit";
 
 ## Anatomy
 ```
-PageContent.Root | PageContent.Section     column; Root adds maxWidth and fill, Section renders <section>
+PageContent.Root | PageContent.Page        column; Root adds maxWidth and fill, Page renders <section>
 ├─ PageContent.Header                      heading column + actions in one wrapping row
 │  ├─ PageContent.Title                    <h1>, heading-m
 │  ├─ PageContent.Description              <p>, secondary body-m
 │  └─ PageContent.Actions                  page buttons (moved to the end of the header row)
-└─ PageContent.Body                        page content, blocks 40 apart
+└─ PageContent.Body                        page content, blocks 24 apart
+   ├─ PageContent.Grid                     12-column tile grid, 16 on both axes; a container (prime-grid)
+   │  └─ PageContent.Cell                  one tile place: span, rows; its child fills it
+   ├─ PageContent.Section                  <section> + <h2> label, 40 from its neighbours
+   │  └─ PageContent.Actions               a link or button at the end of the section heading
    └─ PageContent.Split                    list + detail; a container (prime-split)
       ├─ PageContent.List                  list pane: 16–20rem column, or the whole split while closed
       └─ PageContent.Detail                detail pane: the rest, or the whole split while open
@@ -43,7 +50,7 @@ PageContent.Root | PageContent.Section     column; Root adds maxWidth and fill,
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### PageContent.Root
-`ref` → `HTMLDivElement`. The page column inside `main`: header → body 32 apart, centred under its cap.
+`ref` → `HTMLDivElement`. The page column inside `main`: header → body 24 apart, centred under its cap.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -51,8 +58,8 @@ PageContent.Root | PageContent.Section     column; Root adds maxWidth and fill,
 | `fill` | `boolean` | `false` | The page takes the height of main (`AppShell.Root fillViewport`) and the body takes what the header leaves: for a full-height table, board, chat or `PageContent.Split`. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (Header, Body), `className` and the other div attributes. |
 
-### PageContent.Section
-`ref` → `HTMLElement`. The same column as a `<section>`, without a cap; name it with `aria-labelledby` → the Title `id`.
+### PageContent.Page
+`ref` → `HTMLElement`. The whole app page as a `<section>` (the same column, the full panel width); name it with `aria-labelledby` → the Title `id`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -88,12 +95,38 @@ PageContent.Root | PageContent.Section     column; Root adds maxWidth and fill,
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (Buttons), `className` and the other div attributes. |
 
 ### PageContent.Body
-`ref` → `HTMLDivElement`. The page content; blocks 40 apart.
+`ref` → `HTMLDivElement`. The page content: blocks of one screen 24 apart, a `PageContent.Section` 40 from its neighbours.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
 
+### PageContent.Section
+`ref` → `HTMLElement`. A titled section of the page — a `<section>` named by its `h2` (title-m): the heading with an optional description and `PageContent.Actions` at its end, then the content 16 below. Stands 40 from its neighbours in Body.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `ReactNode` | — (required) | The visible heading (`h2`); it also names the section. |
+| `description` | `ReactNode` | — | One line of context under the heading, in secondary body-s. |
+| `layout` | `"stack" \| "aside"` | `"stack"` | `stack` — the heading over the content; `aside` — a ~16rem heading column beside it (a settings page), above it once the content would get narrower than 30rem. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "title">` | — | `children` (the content; `PageContent.Actions` goes to the heading row), `className` and the other section attributes. |
+
+### PageContent.Grid
+`ref` → `HTMLDivElement`. The grid of the page's tiles (KPI cards, charts, panels): 12 columns, 16 apart on both axes, so its rows read as one board. A size container: cells fold by its own width (see Grid columns).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (`PageContent.Cell`), `className` and the other div attributes. |
+
+### PageContent.Cell
+`ref` → `HTMLDivElement`. One tile place in `PageContent.Grid`; its child (a Card, a ChartFrame) stretches to it, so the tiles of a row share one height.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `span` | `1 \| 2 \| … \| 12` | `12` | Columns of 12 on a wide grid (64rem+). Narrower grids round it: see Grid columns in COMPONENT.md. |
+| `rows` | `1 \| 2 \| 3 \| 4` | `1` | Rows the cell spans from 40rem: a chart beside two stacked tiles (`ChartFrame.Plot height="fill"` fills the height). |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (one tile), `className` and the other div attributes. |
+
 ### PageContent.Split
 `ref` → `HTMLDivElement`. List + detail (mail, a messenger, a ticket queue): side by side from 48rem of its own width, one pane at a time below it, focus following the pane that comes into view.
 
@@ -141,13 +174,27 @@ PageContent.Root | PageContent.Section     column; Root adds maxWidth and fill,
 | `readable` | Intro line wraps at the reading width | Default, most pages | yes |
 | `full` | Intro uses the full header width | The column is already narrow | |
 
-One `PageContent.Title` (`<h1>`) per page; sub-sections inside Body use `title-s` / `title-m` headings (`h2`). One primary button in Actions, the rest `soft` / `ghost` neutral.
+One `PageContent.Title` (`<h1>`) per page; a topic inside Body is a `PageContent.Section` (its `h2`). One primary button in Actions, the rest `soft` / `ghost` neutral.
 
 ### Flags
 | Flag | Looks like when on | Use when | Default |
 |---|---|---|---|
 | `fill` (Root) | the page is as high as main; the body takes what the header leaves; main keeps gutter-high air under it | a full-height table, board, chat or `PageContent.Split` in an `AppShell.Root fillViewport` | `false` |
 
+### layout (Section)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `stack` | the heading row over the content, 16 apart | a topic of a dashboard, a list or a detail page | ✓ |
+| `aside` | a ~16rem heading column beside the content, above it once the content would get < 30rem | a settings page: a heading column beside each panel | |
+
+### Grid columns
+| Grid width | Cell `span` 1–3 | `span` 4 | `span` 5–6 | `span` 7–12 | `rows` |
+|---|---|---|---|---|---|
+| < 30rem | the row | the row | the row | the row | — |
+| 30–40rem | half | the row | the row | the row | — |
+| 40–64rem | half | a third | half | the row | spans |
+| ≥ 64rem | its span | its span | its span | its span | spans |
+
 ### Split layout
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
@@ -161,14 +208,18 @@ One `PageContent.Title` (`<h1>`) per page; sub-sections inside Body use `title-s
 | filling | `fill` | `data-fill="true"` on Root; `AppShell.Main` drops its long bottom air for it |
 | full-width intro | `measure="full"` | `data-measure="full"` on Description |
 | with actions | `PageContent.Actions` child | `data-has-actions="true"` on Header |
+| section heading column | `layout="aside"` on Section | `data-layout="aside"` on Section (absent for `stack`) |
+| section with actions | `PageContent.Actions` child of Section | `data-has-actions="true"` on the section heading row |
+| tile span | `span` / `rows` on Cell | `data-span="1"…"12"` (always), `data-rows="2"…"4"` (absent for 1) |
 | detail open | `open` / `defaultOpen` on Split | `data-open="true"` on Split; narrow: the list is `display: none`, else the detail is |
 | pane swap | `open` changes on a narrow split | the pane that comes into view enters once (`enterMotion.enterBase`: base, opacity + a 4 px rise); focus moves into the detail, or back to the list control; a wide split moves nothing |
 
 ## Layout & spacing
 - No outer padding: edge gutters come from `AppShell.Main`.
-- Header → Body `--prime-space-8` (32); blocks inside Body `--prime-space-10` (40); Title → Description `--prime-space-2` (8); buttons in Actions `--prime-space-2`; heading → Actions `--prime-space-6` (24) side by side, `--prime-space-4` (16) once they wrap below.
+- Header → Body `--prime-space-6` (24); blocks inside Body `--prime-space-6` (24); a `PageContent.Section` 40 from its neighbours (the body's 24 + `--prime-space-4`); tile → tile in a Grid `--prime-space-4` (16) on both axes; section heading → content `--prime-space-4` (16), heading → description `--prime-space-1` (4); Title → Description `--prime-space-2` (8); buttons in Actions `--prime-space-2`; heading → Actions `--prime-space-6` (24) side by side, `--prime-space-4` (16) once they wrap below.
 - Header is a wrapping row: actions stay to the right of the title while the heading keeps half a reading measure, otherwise they wrap below it — no breakpoint needed, works from 320px.
 - Title and Description wrap long words (`overflow-wrap: anywhere`).
+- Grid lays itself out from its own width (container `prime-grid`), never from the window, so a board beside an open Sidebar folds on its own. A Cell stretches its child: the tiles of a row share one height; a chart in a `rows={2}` cell fills it with `ChartFrame.Plot height="fill"`. `dense` flow lets a small tile fill a hole left by a wide one.
 - `fill` needs a main with a height: `AppShell.Root fillViewport` (main scrolls inside the panel). The body passes its free height on to a filling child — DataTable `scrollHeight="fill"`, Crossfade `fill`, `PageContent.Split`.
 - Split takes the free height of a filling page and lays itself out from its own width (container `prime-split`), never from the window: a split beside an open Sidebar may be narrow on a wide screen. Each pane is a column whose last child takes the free height — put a Card with its own `ScrollContainer` there, so the list and the thread scroll separately. The records of the list pane are a [List](../list/COMPONENT.md).
 - The detail pane is on screen all the time on a wide split: while nothing is chosen it shows a short hint («Выберите диалог»), never an empty card.
@@ -182,7 +233,8 @@ One `PageContent.Title` (`<h1>`) per page; sub-sections inside Body use `title-s
 
 ### ARIA
 - Title is an `<h1>`; use one per page.
-- Give `PageContent.Section` an `aria-labelledby` that points at the Title `id` to name the region.
+- Give `PageContent.Page` an `aria-labelledby` that points at the Title `id` to name the region.
+- `PageContent.Section` is a `<section>` named by its own `<h2>` (`label`) through `aria-labelledby`, so it is a region landmark with the heading's name; the heading levels go h1 (page) → h2 (section) → h3 (a card title inside it).
 - Name `PageContent.List` and `PageContent.Detail` with `aria-label`. On a narrow split opening the detail moves focus into it and going back returns focus to the list control; the hidden pane is `display: none`, out of Tab and the accessibility tree. The panes take focus from code only (`tabindex="-1"`, no ring).
 - `PageContent.BackButton` is named by `labels.back` and is shown only while the split shows one pane.
 
@@ -198,18 +250,22 @@ One `PageContent.Title` (`<h1>`) per page; sub-sections inside Body use `title-s
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A page in the main column: title, description and page actions, then the body blocks — `PageContent.Actions`. |
 | [variants.tsx](examples/variants.tsx) | The same page column at three caps: the whole main, a wide dashboard column, a reading column — `maxWidth`. |
+| [grid.tsx](examples/grid.tsx) | A dashboard board: four KPI tiles, a chart two rows high beside two panels, one gap on both axes — `PageContent.Grid`, `PageContent.Cell`, `span`, `rows`. |
+| [sections.tsx](examples/sections.tsx) | A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `PageContent.Section`, `label`, `description`, `PageContent.Actions`, `layout`. |
 | [list-detail.tsx](examples/list-detail.tsx) | A support inbox as list + detail on a full-height page: side by side on a wide panel, one pane at a time with a back button on a narrow one — `PageContent.Split`, `PageContent.BackButton`, `fill`. |
 | [narrow.tsx](examples/narrow.tsx) | In a phone-width column the page actions wrap under the heading instead of squeezing it. |
 
 ## Mistakes
 - Padding on `PageContent.Root` to imitate gutters → gutters come from `AppShell.Main`.
 - Actions placed outside Header → put `PageContent.Actions` inside `PageContent.Header` so it aligns with the title and wraps.
-- Several `PageContent.Title` on one page → one `<h1>`, sub-headings via Typography.
-- Margins between blocks in Body → Body already sets the 40 gap.
+- Several `PageContent.Title` on one page → one `<h1>`; a topic of the page is a `PageContent.Section` with its `<h2>`.
+- A hand-made `<section>` + `Typography as="h2"` + own gap CSS → `PageContent.Section label`.
+- Each row of cards in its own auto-fit grid → the rows stand 24 apart instead of 16; put every tile of the screen in one `PageContent.Grid`.
+- Margins between blocks in Body → Body already sets the 24 gap and the 40 around a Section.
 - Computing a height from `100vh` minus the header for a full-height table or chat → `PageContent.Root fill` and a filling child.
 - A list + detail built with window media queries → `PageContent.Split` follows its own width.
 - Unmounting the detail content the moment the narrow split goes back → keep the last record until another is chosen (the pane leaves with it on screen).
 
 ## Related
 - **Built from:** [Button](../button/COMPONENT.md) (`PageContent.BackButton`), Icon (`nav.chevronLeft`)
-- **See also:** [AppShell](../../layout/app-shell/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md), [Card](../card/COMPONENT.md), [List](../list/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md), [Drawer](../drawer/COMPONENT.md)
+- **See also:** [AppShell](../../layout/app-shell/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md), [Card](../card/COMPONENT.md), [ChartFrame](../chart-frame/COMPONENT.md), [List](../list/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md), [Drawer](../drawer/COMPONENT.md)

package/dist/skill/reference/components/page-content/examples/grid.tsx

@@ -0,0 +1,107 @@
+/** A dashboard board: four KPI tiles, a chart two rows high beside two panels, one gap on both axes — `PageContent.Grid`, `PageContent.Cell`, `span`, `rows`. */
+import { Card, ChartFrame, type ChartFrameSeries, chartColors, PageContent } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const KPIS = [
+  { label: "Выручка", value: "4,8 млн ₽", delta: "+12% к сентябрю", tone: "success" },
+  { label: "Заказы", value: "1 284", delta: "+6% к сентябрю", tone: "success" },
+  { label: "Средний чек", value: "3 740 ₽", delta: "−2% к сентябрю", tone: "danger" },
+  { label: "Возвраты", value: "1,8%", delta: "без изменений", tone: "neutral" },
+] as const;
+
+const SERIES: ChartFrameSeries[] = [{ id: "orders", label: "Заказы" }];
+
+const WEEKS = [
+  { week: "1 нед", orders: 268 },
+  { week: "2 нед", orders: 301 },
+  { week: "3 нед", orders: 287 },
+  { week: "4 нед", orders: 334 },
+  { week: "5 нед", orders: 352 },
+];
+
+const MARGIN = { top: 8, right: 8, bottom: 24, left: 8 };
+
+const formatOrders = (value: number) => `${value.toLocaleString("ru-RU")} заказов`;
+
+export default function PageContentGridExample() {
+  return (
+    <div className={styles.main}>
+      <PageContent.Body>
+        <PageContent.Grid>
+          {KPIS.map((kpi) => (
+            <PageContent.Cell key={kpi.label} span={3}>
+              <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.Cell span={8} rows={2}>
+            <ChartFrame.Root series={SERIES} formatValue={formatOrders}>
+              <ChartFrame.Header>
+                <ChartFrame.Title>Заказы по неделям</ChartFrame.Title>
+                <ChartFrame.Description>Октябрь</ChartFrame.Description>
+              </ChartFrame.Header>
+              <ChartFrame.Plot
+                height="fill"
+                renderPlot={({ width, height, series }) => {
+                  const max = Math.max(...WEEKS.map((w) => w.orders));
+                  const innerW = width - MARGIN.left - MARGIN.right;
+                  const innerH = height - MARGIN.top - MARGIN.bottom;
+                  const slot = innerW / WEEKS.length;
+                  const bar = slot * 0.56;
+                  return (
+                    <svg width={width} height={height} aria-hidden="true">
+                      <line
+                        x1={MARGIN.left}
+                        x2={width - MARGIN.right}
+                        y1={MARGIN.top + innerH}
+                        y2={MARGIN.top + innerH}
+                        stroke={chartColors.axis}
+                      />
+                      {WEEKS.map((w, i) => {
+                        const h = (innerH * w.orders) / max;
+                        const x = MARGIN.left + slot * i + (slot - bar) / 2;
+                        return (
+                          <g key={w.week} data-hidden={series[0].hidden}>
+                            <rect
+                              x={x}
+                              y={MARGIN.top + innerH - h}
+                              width={bar}
+                              height={h}
+                              rx={4}
+                              fill={series[0].color}
+                            />
+                            <text x={x + bar / 2} y={height - 4} textAnchor="middle">
+                              {w.week}
+                            </text>
+                          </g>
+                        );
+                      })}
+                    </svg>
+                  );
+                }}
+              />
+            </ChartFrame.Root>
+          </PageContent.Cell>
+          <PageContent.Cell span={4}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>Новые клиенты</Card.Label>
+              <Card.Value>86</Card.Value>
+              <Card.Delta tone="success">+14 к сентябрю</Card.Delta>
+            </Card.Root>
+          </PageContent.Cell>
+          <PageContent.Cell span={4}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>Ждут оплаты</Card.Label>
+              <Card.Value>312 400 ₽</Card.Value>
+              <Card.Delta tone="warning">7 счетов</Card.Delta>
+            </Card.Root>
+          </PageContent.Cell>
+        </PageContent.Grid>
+      </PageContent.Body>
+    </div>
+  );
+}

package/dist/skill/reference/components/page-content/examples/overview.tsx

@@ -6,7 +6,7 @@ import styles from "./examples.module.css";
 export default function PageContentOverviewExample() {
   return (
     <div className={styles.main}>
-      <PageContent.Section aria-labelledby="settings-heading">
+      <PageContent.Page aria-labelledby="settings-heading">
         <PageContent.Header>
           <PageContent.Title id="settings-heading">Настройки</PageContent.Title>
           <PageContent.Description>
@@ -35,7 +35,7 @@ export default function PageContentOverviewExample() {
             </Card.Body>
           </Card.Root>
         </PageContent.Body>
-      </PageContent.Section>
+      </PageContent.Page>
     </div>
   );
 }

package/dist/skill/reference/components/page-content/examples/sections.tsx

@@ -0,0 +1,81 @@
+/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `PageContent.Section`, `label`, `description`, `PageContent.Actions`, `layout`. */
+import {
+  Card,
+  DataTable,
+  type DataTableColumn,
+  LinkButton,
+  PageContent,
+  Typography,
+} from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Invoice = { id: string; client: string; amount: number };
+
+const INVOICES: Invoice[] = [
+  { id: "СЧ-1042", client: "ООО «Север»", amount: 184_000 },
+  { id: "СЧ-1041", client: "ИП Лаптева", amount: 42_500 },
+  { id: "СЧ-1039", client: "АО «Техносфера»", amount: 610_000 },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Invoice>[] = [
+  { id: "id", header: "Счёт", cell: (row) => row.id },
+  { id: "client", header: "Клиент", cell: (row) => row.client },
+  {
+    id: "amount",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+];
+
+export default function PageContentSectionsExample() {
+  return (
+    <div className={styles.main}>
+      <PageContent.Body>
+        <PageContent.Grid>
+          <PageContent.Cell span={6}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>Выставлено</Card.Label>
+              <Card.Value>2,4 млн ₽</Card.Value>
+              <Card.Delta tone="success">+9% к сентябрю</Card.Delta>
+            </Card.Root>
+          </PageContent.Cell>
+          <PageContent.Cell span={6}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>Оплачено</Card.Label>
+              <Card.Value>1,9 млн ₽</Card.Value>
+              <Card.Delta tone="neutral">79% выставленного</Card.Delta>
+            </Card.Root>
+          </PageContent.Cell>
+        </PageContent.Grid>
+        <PageContent.Section label="Последние счета" description="Три последних за октябрь">
+          <PageContent.Actions>
+            <LinkButton href="#invoices">Все счета</LinkButton>
+          </PageContent.Actions>
+          <DataTable columns={COLUMNS} rows={INVOICES} getRowKey={(row) => row.id} paging="none" />
+        </PageContent.Section>
+        <PageContent.Section
+          layout="aside"
+          label="Реквизиты в счетах"
+          description="Попадают в каждый новый счёт."
+        >
+          <Card.Root variant="panel">
+            <Card.Body>
+              <Typography variant="body-m" tone="secondary">
+                ООО «Прайм Софт», ИНН 7701234567, р/с в Т-Банке.
+              </Typography>
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
+      </PageContent.Body>
+    </div>
+  );
+}

package/dist/skill/reference/components/page-toolbar/COMPONENT.md

@@ -111,7 +111,7 @@ PageToolbar has no variants: the layout follows the toolbar's width.
 No keyboard interaction.
 
 ### ARIA
-- A plain `<div>`: name it with `aria-label` when a page has more than one panel.
+- A plain `<div>`: when a page has more than one panel, give each `role="group"` and an `aria-label` (a name on a `<div>` without a role is ignored by assistive tech).
 - Slots move only visually (`order`); the Tab order is the JSX order. Write the slots in the reading order of the wide layout — Tools, Sections, View, Actions, Chips. In the narrow layout the action is shown beside the tools but reached after the view.
 - An icon-only primary action on a narrow page carries `aria-label`.