prime-ui-kit 0.18.0 → 0.20.0

package/dist/skill/composition.md

@@ -15,9 +15,9 @@ playground page. What each screen teaches is in [Screen rules](#screen-rules) at
 |---|---|---|---|
 | [List page](#list-page) | data-table | [screen.tsx](reference/components/data-table/examples/screen.tsx) | the title, a line of figures, SmartFilter search and filters, export and one primary action in the page's top bar; statuses, row menu, pages, filtered empty state |
 | [Detail page](#detail-page) | description-list | [screen.tsx](reference/components/description-list/examples/screen.tsx) | a nested record: the path ending in the title, status and due date and the record's actions by weight in the top bar; main column + side column of Cards, Timeline |
-| [Settings page](#settings-page) | page | [screen.tsx](reference/layout/page/examples/screen.tsx) | the path in a collapsing top bar, the large title in the flow, heading column + panel per section, form with its own save, Switches that apply at once, danger zone with a confirm |
+| [Settings page](#settings-page) | page | [screen.tsx](reference/layout/page/examples/screen.tsx) | the path in a collapsing top bar, the large title in the flow, a card with its own header per section, form with its own save, Switches that apply at once, danger zone with a confirm |
 | [Form in a Drawer](#form-in-a-drawer) | drawer | [screen.tsx](reference/components/drawer/examples/screen.tsx) | the title, counts, search and the Drawer trigger in the top bar; Drawer form: groups, errors on submit, focus on the first invalid field, loading, toast |
-| [Record editor](#record-editor) | field-list | [screen.tsx](reference/components/field-list/examples/screen.tsx) | a document page (a long form): the title and a line of description in `Page.Heading`, «Сохранить тариф» in `Page.Actions`, both in a `Page.Header` in the flow; a plan card edited in aside sections: name and description, specs in a `FieldList` (icon-only `Select` and `ColorPresets` in compact columns, pinned rows, reorder), the price and its changes by month in one list with the base row pinned, a setup fee in three currencies in one row under one heading, save with «Сохранено» on the button |
+| [Record editor](#record-editor) | field-list | [screen.tsx](reference/components/field-list/examples/screen.tsx) | a document page (a long form): the title and a line of description in `Page.Heading`, «Сохранить тариф» in `Page.Actions`, both in a `Page.Header` in the flow; a plan card edited in card sections: name and description, specs in a `FieldList` (icon-only `Select` and `ColorPresets` in compact columns, pinned rows, reorder), the price and its changes by month in one list with the base row pinned, a setup fee in three currencies in one row under one heading, save with «Сохранено» on the button |
 | [Dashboard](#dashboard) | card | [screen.tsx](reference/components/card/examples/screen.tsx) | the large title + a line of data in the flow, period switch and report in a collapsing `Page.TopBar`; KPI row that cross-fades to the new period, a Sparkline revenue trend, invoiced vs paid in a ChartFrame, panels with progress and a split, short table + link to the list |
 | [Screen states](#screen-states) | crossfade | [screen.tsx](reference/components/crossfade/examples/screen.tsx) | title + the statement date in `Page.TopBar`, page error in a Banner with retry, region loading with a Skeleton, Crossfade between states, table error in place, first-run EmptyPage |
 | [Messenger](#messenger) | chat | [screen.tsx](reference/components/chat/examples/screen.tsx) | title + the unread count in `Page.TopBar`; a full-height Page.Split of a `ChatList` with its search (live last message, ticks, unread counts, «печатает…») and a `Chat`: `Chat.Header` with the back button, avatar, title, the status that turns into «печатает…» (`typing`) and the search button, `Chat.Search`, `Chat.Messages` from `items` + `renderMessage` (dates, runs and the unread band from the data, history loaded above with `hasOlder` / `onLoadOlder`, a first load in skeletons), text, a photo, a file and sent voice, reply and edit from the menu through `Composer.Context messageId` (`replyTo` / `editOf`), the jump to the quoted message (`Message.Reply target`), optimistic sends whose messages rise from the composer while the client's answer slides in, «печатает…» both ways (`onActivityChange` → `Chat.Root typing`), unread counts from `onNewMessage` and `onRead`, the Composer with attachments in `Chat.Footer` |
@@ -66,7 +66,7 @@ AppShell.Root                      once per app (layouts.md#app-frame-once-per-a
          │  │  ├─ Breadcrumb.Root  only on a nested record: the levels above this page
          │  │  ├─ Page.Title       the one h1, the path's last level
          │  │  └─ Page.Description a line of data
-         │  ├─ Page.Tools          sections, search and filter, view — kit controls in reading order
+         │  ├─ Page.Tools          what acts on the whole page — sections, a period, view; a one-list page's search
          │  ├─ Page.Actions        every button of the page, each with an icon; the primary last
          │  └─ Page.Chips          SmartFilter.Chips: a line under everything, gone while empty
          └─ Page.Body              blocks 24 apart, the first 24 under the bar's controls
@@ -98,9 +98,11 @@ order is Heading, Tools, Actions, Chips whatever the JSX order.
   then `Page.Title` with its name, on one line (the heading draws the chevron between them), and
   `Page.Description` under the whole line. The title is never a row of its own under the path, and
   the path never repeats the title as its last item.
-- **`Page.Tools`** — the page's own tools as kit controls, in the order a person reads them: sections
-  (a `SegmentedControl` with counts), search and filter (`SmartFilter.Toolbar`), the view or the
-  period. Named with `aria-label`; no buttons and no wrappers inside.
+- **`Page.Tools`** — what acts on the whole page, as kit controls in the order a person reads them:
+  sections (a `SegmentedControl` with counts), the view, a period that drives several blocks; the
+  search and filter (`SmartFilter.Toolbar`) only when the page is one list
+  ([where the filters go](#where-the-filters-go)). Named with `aria-label`; no buttons and no
+  wrappers inside.
 - **`Page.Actions`** — the one place for the page's buttons: secondary ones (`soft` + `neutral`)
   first, the primary (`solid`) last. Every Button carries a `Button.Icon` beside its label: the bar
   shows it as the icon alone when the line runs short.
@@ -234,6 +236,39 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
 - **Card when** the block stands alone and has its own title: a KPI tile, a settings panel, facts in a
   side column, a chart. **No card when** the block is the only thing in its region: a section heading
   and the content are enough.
+- **A titled block stands in the flow, its heading inside it.** A panel with a title and a line of
+  description (a settings section, a group of a long form) is a `Card.Root` whose `Card.Header`
+  holds `Card.Title as="h2"` and `Card.Description`; the cards stack 24 apart. Never a heading column
+  beside its panel: it takes a third of the width from the fields and breaks the reading line.
+
+```tsx partial
+// bad — the heading in a column on the left, the panel on the right
+<div className={styles.headingColumnAndPanel}>
+  <div>
+    <Typography as="h2" variant="title-m">Компания</Typography>
+    <Typography tone="secondary">Попадают в счета и акты.</Typography>
+  </div>
+  <Card.Root variant="panel">…</Card.Root>
+</div>
+```
+
+```tsx good
+// good — the card carries its own heading, stacked in the flow
+<Card.Root variant="panel">
+  <Card.Header>
+    <Card.Title as="h2">Компания</Card.Title>
+    <Card.Description>Попадают в счета и акты.</Card.Description>
+  </Card.Header>
+  <Card.Body>
+    <Input.Root label="Название">
+      <Input.Wrapper>
+        <Input.Field name="name" />
+      </Input.Wrapper>
+    </Input.Root>
+  </Card.Body>
+</Card.Root>
+```
+
 - `DataTable` is already a filled block — never inside a Card; a card in a card only as
   [the next layer, sparingly](foundations.md#card-in-a-card). No borders around blocks; `Divider`
   only inside a block (list rows, a form and its footer).
@@ -257,6 +292,9 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
   table cell.
 - Placement: every button of the page in one `Page.Actions` — of `Page.TopBar` on a work screen, of the flow `Page.Header` on a document page — the primary last; card actions in `Card.Footer`; dialog actions in
   `Modal.Footer` / `Drawer.Footer`; row actions in the last column; bulk actions in the table toolbar.
+- A dialog footer is the dialog's answer: Cancel and the primary. Deleting the record the dialog
+  edits is not a third footer button: it is the last `tone="danger"` item of a ⋯ `Dropdown` in
+  `Modal.Actions` / `Drawer.Actions`, confirmed by a `ConfirmDialog`.
 - An empty state's action replaces the header's primary, it does not duplicate it.
 - Destructive: `tone="danger"`; a standalone trigger is `outline`, in a menu it is the last item, the
   confirm is a `ConfirmDialog` (its `onConfirm` returns the request's Promise).
@@ -268,13 +306,24 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
 - Labels above every field (`label`), placeholder is an example value, help in `hint`, problems in
   `error` — after blur or on submit. Mark the minority (`required` or `optional`).
 - Records of one shape that a person adds, edits and removes are a `FieldList`: one row per record,
-  the column headings once above the rows, small attributes (an icon, a color) in `compact`
+  the column headings once above the rows, small attributes (an icon, then its color) in `compact`
   columns. Never a label in every row, never numbered labels, never one record split over lines.
+  FieldList draws every row's actions itself — the remove «×» and the handle after it, a pinned
+  row's remove off with its reason (`labels.lockedReason`) — so never add your own.
+- The row's actions (`rowActions`): `"buttons"` (default) for short lists edited often on a desktop,
+  where moving rows is a main task — remove and handle in sight on every row; `"menu"` — one «⋯» with
+  «Выше», «Ниже», «Удалить» — for dense rows (three or more columns), touch-heavy screens, or a row
+  that would carry more than remove and move.
+- The look (`variant`): `"plain"` (default) when the list is the content of its card or section;
+  `"surface"` when the list stands among other fields of a form or card, so its rows read as one
+  block apart from the fields around it.
 - One value in several units is one row of fields under one heading, each unit in its field's
   `Input.InlineAffix`; a base value with overrides is one `FieldList` with the base pinned first.
   The shape of the data decides the layout: [ux.md](ux.md#2-the-shape-of-the-data-decides-the-layout).
 - Rows that add up (shares of a bonus, hours, amounts) carry their sums under them in the same list:
-  `FieldList renderTotals`, a short number in a `width: "xs"` column. Return the save's promise from
+  `FieldList renderTotals`, a short number in a `width: "xs"` column. A number with its unit
+  (`inputMode="decimal"` and an end `Input.InlineAffix`) ends at the field's end, and its column's
+  total follows it there by itself. Return the save's promise from
   its `onValueChange` when each edit saves at once.
 - Fields 20 apart; related short fields side by side in an
   [intrinsic grid](responsive.md#intrinsic-grids) with `align-items: start`
@@ -296,13 +345,130 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
 
 ### Where the filters go
 
-- The page's search and filters are the page's: `SmartFilter.Root` around `Page.Root`,
-  `SmartFilter.Toolbar` in the bar's `Page.Tools`, `SmartFilter.Chips` in its `Page.Chips`
-  ([the list page](#list-page)).
-  A search alone is the same SmartFilter with `fields={[]}`.
-- The DataTable `toolbar` keeps the table's own tools: `DataTable.ColumnsMenu`, a bulk bar of the
-  selected rows. Search and filters go there only when the table is not the page's main region (a
-  table in a section of a record, in a Drawer).
+A filter stands next to what it filters.
+
+- `Page.TopBar` holds only what acts on the whole page: the heading with its line of data, a period
+  or a date range that drives several blocks (the KPI cards and the table), the page's sections or
+  view, the primary action.
+- A page that holds more than its table — KPI cards, a chart, another block: the table's own
+  controls (search and filter, the chips, the column chooser, a table / cards view, bulk actions)
+  stand in the table's tools row. `SmartFilter.Root` wraps the `DataTable`; `SmartFilter.Toolbar`
+  and `DataTableColumnsMenu` go in its `toolbar`, `SmartFilter.Chips` in its `toolbarChips`
+  ([server.tsx](reference/components/data-table/examples/server.tsx)).
+- A page that is one list — the table, the board or the schedule is the whole page: «next to the
+  list» and «on the page» are one place, so its search and filter stay in the bar. `SmartFilter.Root`
+  wraps `Page.Root`, `SmartFilter.Toolbar` in `Page.Tools`, `SmartFilter.Chips` in `Page.Chips`
+  ([the list page](#list-page)). A search alone is the same SmartFilter with `fields={[]}`.
+- What picks the place: does the control change everything under the bar? A period that recomputes
+  the cards and the table does — the bar. A search that narrows only the rows does not — the
+  table's row.
+- Both rows are one tool row of the kit: written in reading order, a search takes the free room,
+  switchers and buttons keep their width at the end, and a short row wraps by itself — pass the
+  controls as they are, never inside a flex wrapper of your own.
+
+```tsx partial
+// bad — the table's search, filter, chips and chooser in the bar, above KPI cards they do not filter
+<SmartFilter.Root fields={FIELDS}>
+  <Page.Root>
+    <Page.TopBar>
+      <Page.Heading>
+        <Page.Title>Модели</Page.Title>
+      </Page.Heading>
+      <Page.Tools aria-label="Модели">
+        <SmartFilter.Toolbar />
+        <DataTableColumnsMenu columns={COLUMNS} hiddenColumns={hidden} onHiddenColumnsChange={setHidden} />
+      </Page.Tools>
+      <Page.Chips>
+        <SmartFilter.Chips />
+      </Page.Chips>
+    </Page.TopBar>
+    <Page.Body>
+      <Page.Grid>{/* four KPI cards */}</Page.Grid>
+      <DataTable columns={COLUMNS} rows={models} hiddenColumns={hidden} />
+    </Page.Body>
+  </Page.Root>
+</SmartFilter.Root>
+```
+
+```tsx good
+// good — the bar keeps the title, the period that drives the cards and the table, the primary
+// action; the table's search, filter, chips and chooser stand in the table's own tools row
+// declare: const FIELDS: Parameters<typeof SmartFilter.Root>[0]["fields"]
+// declare: const models: { id: string; name: string; rides: number }[]
+// declare: const kpis: { label: string; value: string }[]
+// declare: const hidden: string[]
+// declare: const setHidden: (hidden: string[]) => void
+<Page.Root>
+  <Page.TopBar>
+    <Page.Heading>
+      <Page.Title>Модели</Page.Title>
+    </Page.Heading>
+    <Page.Tools aria-label="Модели">
+      <Datepicker.Root mode="range" aria-label="Период" />
+    </Page.Tools>
+    <Page.Actions>
+      <Button.Root>
+        <Button.Icon>
+          <Icon name="action.add" />
+        </Button.Icon>
+        Добавить модель
+      </Button.Root>
+    </Page.Actions>
+  </Page.TopBar>
+  <Page.Body>
+    <Page.Grid>
+      {kpis.map((kpi) => (
+        <Page.Cell key={kpi.label} span={3}>
+          <Card.Root variant="stat-trend">
+            <Card.Label>{kpi.label}</Card.Label>
+            <Card.Value>{kpi.value}</Card.Value>
+          </Card.Root>
+        </Page.Cell>
+      ))}
+    </Page.Grid>
+    <SmartFilter.Root fields={FIELDS}>
+      <DataTable
+        columns={[
+          { id: "name", header: "Модель", accessor: "name", hideable: false },
+          { id: "rides", header: "Поездки", accessor: "rides", numeric: true },
+        ]}
+        rows={models}
+        getRowKey={(row) => row.id}
+        hiddenColumns={hidden}
+        toolbar={
+          <>
+            <SmartFilter.Toolbar />
+            <DataTableColumnsMenu
+              columns={[
+                { id: "name", header: "Модель", accessor: "name", hideable: false },
+                { id: "rides", header: "Поездки", accessor: "rides", numeric: true },
+              ]}
+              hiddenColumns={hidden}
+              onHiddenColumnsChange={setHidden}
+            />
+          </>
+        }
+        toolbarChips={<SmartFilter.Chips />}
+      />
+    </SmartFilter.Root>
+  </Page.Body>
+</Page.Root>
+```
+
+### Controls of a table
+
+- The column chooser has one place per table. Over the row actions: `columnsMenu` puts the icon
+  trigger in the head cell of the row-actions column (the last column, `hideHeader`), and it sticks
+  with `stickyLastColumn`. A table without row actions gets no chooser cell in its header: the
+  chooser is `<DataTableColumnsMenu>` beside the table's search ([where the filters go](#where-the-filters-go)),
+  bound to the same `hiddenColumns` / `columnOrder` state the table reads. Give the key column and
+  the actions column `hideable: false`.
+- The DataTable `toolbar` holds two or more controls of the table itself — its search and filter,
+  the chooser, a view, a bulk bar of the selected rows — as they are, in reading order; its chips go
+  to `toolbarChips`.
+- One control never gets a row of its own. A lone «Экспорт» or «Создать» is the page's
+  (`Page.Actions`); a lone chooser joins the table's search or the page's tools; a count or a total
+  of the list is data in `Page.Description`.
 
 ### Tables
 
@@ -321,6 +487,15 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
 - Phones: the table scrolls inside itself, `stickyFirstColumn` keeps the key column; never let the page
   scroll sideways. Short lists of objects can be `Card variant="list"` instead of a table.
 
+### List rows
+
+- A row's own controls stand beside its element in `List.ItemActions`, one tier below the row.
+- A plain settings row reads label first and ends with its toggle (the platform convention).
+- A row people reorder leads with its toggle — `<List.ItemActions side="start">`, or the Switch as the
+  first child of a `Dnd.SortableItem` — so the on / off state reads first, like a checkbox, and the
+  grip keeps the end edge ([reorder.tsx](reference/components/list/examples/reorder.tsx)).
+- Never a toggle between the label and the grip: «Почта … [Switch] [grip]» reads as two handles.
+
 ## 9. Feedback
 
 | Situation | Component |
@@ -455,10 +630,10 @@ What each screen in [the index](#screens) demonstrates — keep these when you s
 [data-table/examples/screen.tsx](reference/components/data-table/examples/screen.tsx)
 
 - A work screen titles itself in its `Page.TopBar`: `Page.Title` is the only heading, its `Page.Description` is one line of figures («10 счетов · просрочено 2 на …»), not a sentence about the page; there is no second header in the flow.
-- `SmartFilter.Root` wraps the page: `SmartFilter.Toolbar` in `Page.Tools`, `SmartFilter.Chips` in `Page.Chips`; export (`soft` + `neutral`, an icon beside its label) and the one primary action (`solid`, last) in `Page.Actions`. The table itself has no `toolbar`.
+- The table is the whole page, so its filters are the page's: `SmartFilter.Root` wraps the page, `SmartFilter.Toolbar` in `Page.Tools`, `SmartFilter.Chips` in `Page.Chips`; export (`soft` + `neutral`, an icon beside its label) and the one primary action (`solid`, last) in `Page.Actions`. The table itself has no `toolbar`; add a KPI row above it and the search, filter and chips move into the table's `toolbar` / `toolbarChips`.
 - A status is a `Badge` with one `tone` per meaning across the product (`STATUS` is one map); the text carries the meaning, the tone repeats it.
 - Numbers and dates are `numeric` columns with `headerAlign="end"` (tabular figures, values and heading on the end edge). On a phone the table scrolls inside itself and `stickyFirstColumn` keeps the number in place — the page never scrolls sideways.
-- Row actions are a `Dropdown` behind an `action.more` icon of size `s`: controls in cells are one tier below the table. Delete is `tone="danger"` at the end of the menu.
+- Row actions are a `Dropdown` behind an `action.more` icon of size `s` in the last column (`hideHeader`), pinned to the end edge with `stickyLastColumn` so they stay in reach while the columns scroll: controls in cells are one tier below the table. Delete is `tone="danger"` at the end of the menu.
 - Empty after a filter is the table's `empty` with `EmptyPage size="s"` and a «Сбросить фильтры» action; the header and the filters stay in place.
 
 ### Detail page
@@ -478,7 +653,7 @@ What each screen in [the index](#screens) demonstrates — keep these when you s
 [page/examples/screen.tsx](reference/layout/page/examples/screen.tsx)
 
 - A document page: `Page.Root maxWidth="wide"`, the large `Page.Title` with a sentence of `Page.Description` in the `Page.Heading` of a `Page.Header` in the flow, and a `Page.TopBar collapse` whose `Page.Heading` holds only the path and repeats the title once it scrolls away.
-- A section is `Page.Section layout="aside"`: a heading column (`label` + a line of `description`) and a `Card variant="panel"` panel; sections are 40 px apart; on a narrow screen the column moves above the panel by itself (flex-wrap, no breakpoints).
+- A section is a `Card variant="panel"` with its own `Card.Header` (`Card.Title as="h2"` + a line of `Card.Description`), the cards stacked in the flow ([a titled block](#4-surfaces)).
 - The form wraps the whole `Card.Root` in `<form noValidate>`; the buttons are in `Card.Footer`: «Отменить изменения» `ghost` + `neutral`, then the primary «Сохранить». While the request runs — `loading` on the button, and one `Fieldset disabled` turns the fields off; the form stays on screen, so success is the button text «Сохранено» for two seconds, without a notification.
 - Fields are 20 px apart; two short related fields side by side while there is width, with `align-items: start` and `reserveSupportRow`, so an error does not shift the neighbour.
 - An error comes through the field's `error` after submit, not while typing; a format hint goes in `hint`.
@@ -502,10 +677,10 @@ What each screen in [the index](#screens) demonstrates — keep these when you s
 
 [field-list/examples/screen.tsx](reference/components/field-list/examples/screen.tsx)
 
-- A record editor is a document page — a long form read top to bottom in aside sections, like Settings — so its title stands in the flow: `Page.Header` with the title and one line of description in `Page.Heading` and the primary action in `Page.Actions`; no second title anywhere.
+- A record editor is a document page — a long form read top to bottom in card sections, like Settings — so its title stands in the flow: `Page.Header` with the title and one line of description in `Page.Heading` and the primary action in `Page.Actions`; no second title anywhere.
 - The shape of the data decides the layout: records a person adds and removes are a `FieldList`, one row per record; the column headings stand once above the rows, and the fields in the cells take them as their labels.
 - No label in every row and no numbered one («Преимущество 1»): a one-column list has no headings at all — its section names it ([reorder.tsx](reference/components/field-list/examples/reorder.tsx)).
-- Small attributes of a record go in compact columns of its row: the icon is a `Select` with only `Select.TriggerIcon`, the color `ColorPresets`; the first specs are pinned (`getLocked`) — the lock says so itself, without explanatory text.
+- Small attributes of a record go in compact columns of its row, the color right after the icon it paints: the icon is a `Select` with only `Select.TriggerIcon`, the color `ColorPresets`; the first specs are pinned (`getLocked`) — the lock and the remove that is off say so themselves, without explanatory text.
 - The base price and its changes are one list: the base row is pinned first and shows when it applies, the changes are rows with a month and a price; the ruble sign is in the field (`Input.InlineAffix`), not in every heading.
 - One value in three currencies is three fields in one row under one group heading, each with its own name for screen readers and the currency inside the field.
 - The lists live in the page state, the name and description fields in the `<form>` of the first section; the primary «Сохранить тариф» in `Page.Actions` is tied to it through `form={formId}` and saves everything. While the request runs the fields and the lists are off (`Fieldset disabled`, `disabled`), afterwards «Сохранено» on the button.
@@ -566,7 +741,7 @@ What each screen in [the index](#screens) demonstrates — keep these when you s
 - The placement of deals is `value` as `{ [stage]: id[] }`; `onValueChange` returns the request's promise and applies `value` only after the answer; a server refusal returns the card to its place.
 - Stage totals are in `renderColumnMeta` («2 сделки · 3 575 000 ₽»), the stage color is the column's `color`.
 - A deal opens through `onItemOpen` of `Kanban.Root` (click, Enter, Space; never after a drag) in a `Drawer` with a `DescriptionList`; no `onClick` / `onKeyDown` of your own on the card; a deal with its own page — `getItemHref`. The stage change is available in the panel too — dragging is not the only way; `Drawer.Guard busy` holds the panel while saving.
-- The first load is `loading` on `Kanban` and `DataTable`: skeletons in the geometry of cards and rows.
+- The first load is `loading` on `Kanban` and `DataTable`: skeletons in the geometry of cards and rows. Stages that come from the server too: `loading` with empty `columns` draws `loadingColumns` placeholder columns — never a board skeleton of your own beside the `Kanban`.
 
 ### App frame
 

package/dist/skill/layouts.md

@@ -155,7 +155,7 @@ shows only icons); none on the children of a sub-list.
   page's title and tools are in its `Page.TopBar`, its blocks go into `Page.Body`
   ([the page skeleton](composition.md#1-page-skeleton)).
 - Document pages — settings and long forms: `Page.Root maxWidth="wide"` with `Page.Header` in the
-  flow (the page's h1) and a `Page.Section layout="aside"` (heading column + panel) per section
+  flow (the page's h1) and a `Card.Root` with its own `Card.Header` per section
   ([the settings page](reference/layout/page/examples/screen.tsx)), or `maxWidth="readable"` for a single
   narrow column of fields.
 - Long reading text (terms, help): `Page.Root maxWidth="readable"` with `Page.Header` in the flow.

package/dist/skill/reference/components/confirm-dialog/COMPONENT.md

@@ -134,5 +134,5 @@ The dialog is a Modal `s` with the floating surface, a header and a footer; ther
 - `tone="accent"` for a delete → destructive is always `danger`.
 
 ## Related
-- **Built from:** the dialog Modal stands on (`internal/overlay/ModalDialog` at `s`, the header, body and footer of `internal/overlay/DialogParts`), [ScrollContainer](../scroll-container/COMPONENT.md) (the body), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (pictures the shared icon slot recognises), [Button](../button/COMPONENT.md) (Cancel, the confirm with `loading`), [Banner](../banner/COMPONENT.md) (the failure message), `Icon` (`status.danger` in the Banner)
+- **Built from:** the dialog Modal stands on (`internal/overlay/ModalDialog` at `s`, the header, body and footer of `internal/overlay/DialogParts`), [ScrollContainer](../scroll-container/COMPONENT.md) (the body), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (pictures the shared icon slot recognises), [Skeleton](../skeleton/COMPONENT.md) (the shared description's loading line), [Button](../button/COMPONENT.md) (Cancel, the confirm with `loading`), [Banner](../banner/COMPONENT.md) (the failure message), `Icon` (`status.danger` in the Banner)
 - **See also:** [Modal](../modal/COMPONENT.md), [Drawer](../drawer/COMPONENT.md), [Notification](../notification/COMPONENT.md)