prime-ui-kit 0.18.0 → 0.19.0

package/dist/index.js

@@ -87,7 +87,7 @@ import {
   useSidebar,
   useTokenValue,
   useUploadQueue
-} from "./chunks/chunk-MB4CXSLL.js";
+} from "./chunks/chunk-WYCTXD63.js";
 import {
   Avatar,
   Badge,
@@ -122,7 +122,7 @@ import {
   tierMappings,
   tones,
   variants
-} from "./chunks/chunk-OAXJWF3L.js";
+} from "./chunks/chunk-RZNGLELR.js";
 import {
   ControlSizeProvider,
   useOptionalControlSize

package/dist/internal/fieldCell.d.ts

@@ -17,6 +17,12 @@ export type FieldCell = {
     hidden: "wide" | "always";
     /** The column is required: the field in the cell is required too (`useFieldFrame`). */
     required: boolean;
+    /**
+     * The row's action the field holds at its end: a one-column list puts each row's remove button
+     * inside its field. A text field (`Input.Wrapper`, `Textarea`) renders it as its last action
+     * segment; a list whose field holds none keeps the remove in a column of its own.
+     */
+    action?: React.ReactNode;
 };
 export declare const FieldCellContext: React.Context<FieldCell | null>;
 export declare function useFieldCell(): FieldCell | null;

package/dist/internal/leaveGuard.d.ts

@@ -18,4 +18,10 @@ export declare function leaveGuardCapture(onClickCapture?: React.MouseEventHandl
  * it is `busy` or `dirty` the browser asks before the tab closes or reloads (`beforeunload`).
  */
 export declare function useLeaveGuard({ busy, dirty }: LeaveGuardState, ask: (leave: () => void) => void): void;
+/**
+ * While `hold` is true the browser asks before the tab closes or reloads (`beforeunload`): a page
+ * guard, and a dialog guard (`Modal.Guard`, `Drawer.Guard`, `Sheet.Guard`) whose form is not saved.
+ * `released` lets a leave the person already agreed to go without a second prompt.
+ */
+export declare function useUnloadGuard(hold: boolean, released?: () => boolean): void;
 export {};

package/dist/internal/overlay/DialogGuard.d.ts

@@ -10,8 +10,9 @@ export type DialogGuardProps = {
 };
 /**
  * Holds a Modal, Drawer or Sheet from inside its content, where the form state lives: put it anywhere in
- * `Content`. Renders nothing but the «discard changes?» confirm when it is asked. Closing from code
- * (`open={false}`) is never held.
+ * `Content`. Renders nothing but the «discard changes?» confirm when it is asked. While `busy` or
+ * `dirty` the browser also asks before the tab closes or reloads, as `Page.Guard` does. Closing from
+ * code (`open={false}`) is never held.
  */
 export declare function DialogGuard({ busy, dirty }: DialogGuardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogGuard {

package/dist/internal/overlay/DialogParts.d.ts

@@ -148,9 +148,17 @@ export declare namespace DialogTitle {
     var displayName: string;
 }
 export type DialogDescriptionProps = Omit<React.HTMLAttributes<HTMLParagraphElement>, "id"> & {
+    /**
+     * Its data loads: a `Skeleton` holds the line's place and `aria-busy` is set, so the header never moves; the data fades in.
+     */
+    loading?: boolean;
     ref?: React.Ref<HTMLParagraphElement>;
 };
-export declare function DialogDescription({ className, ...rest }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The line under the title. While its data loads (`loading`) it keeps its place with a Skeleton, so
+ * the header never moves when the data arrives; the data then fades in under the same element.
+ */
+export declare function DialogDescription({ loading, className, children, ...rest }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogDescription {
     var displayName: string;
 }
@@ -163,9 +171,10 @@ export type DialogHeaderProps = React.HTMLAttributes<HTMLElement> & {
 };
 /**
  * `[Icon] [Title + Description] [Actions] [close]` in one row. Layout is a CSS grid, so child
- * order does not matter; text children stack in the text column.
+ * order does not matter; text children stack in the text column. When the row is too narrow for
+ * the title beside the actions (a phone), the actions move under the text.
  */
-export declare function DialogHeader({ showClose, className, children, ...rest }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogHeader({ showClose, className, children, ref, ...rest }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogHeader {
     var displayName: string;
 }
@@ -205,13 +214,13 @@ export type DialogSectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title"
  * at the end of the heading row, then the content 16 below. Sections stand further apart than the
  * plain blocks of the body.
  */
-export declare function DialogSection({ label, description, className, children, ...rest }: DialogSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogSection({ label, description, className, children, ref, ...rest }: DialogSectionProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogSection {
     var displayName: string;
 }
 export type DialogFooterProps = React.HTMLAttributes<HTMLElement> & {
     /**
-     * `fill`: equal-width buttons in one row; `end`: auto width, at the end. Stacked on phones (viewport below 640 px) and in a dialog narrower than 360 px.
+     * `fill`: equal-width buttons in one row, wrapping rather than cutting a label; `end`: auto width, at the end. Stacked on phones (viewport below 640 px) and in a dialog narrower than 360 px.
      */
     layout?: DialogFooterLayout;
     ref?: React.Ref<HTMLElement>;

package/dist/layout/index.d.ts

@@ -2,7 +2,7 @@ export type { AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShell
 export { AppShell, useAppShellNav } from "./app-shell/AppShell";
 export type { BottomNavActionProps, BottomNavItemCountProps, BottomNavItemIconProps, BottomNavItemProps, BottomNavLabels, BottomNavRootProps, } from "./bottom-nav/BottomNav";
 export { BottomNav } from "./bottom-nav/BottomNav";
-export type { PageActionsProps, PageBackButtonProps, PageBodyProps, PageCellProps, PageCellRows, PageCellSpan, PageChipsProps, PageDescriptionProps, PageDetailProps, PageGridProps, PageGuardProps, PageHeaderProps, PageHeadingProps, PageLabels, PageListProps, PageMaxWidth, PageRootProps, PageSectionLayout, PageSectionProps, PageSplitProps, PageTitleProps, PageToolsProps, PageTopBarProps, } from "./page/Page";
+export type { PageActionsProps, PageBackButtonProps, PageBodyProps, PageCellProps, PageCellRows, PageCellSpan, PageChipsProps, PageDescriptionProps, PageDetailProps, PageGridProps, PageGuardProps, PageHeaderProps, PageHeadingProps, PageLabels, PageListProps, PageMaxWidth, PageRootProps, PageSectionProps, PageSplitProps, PageTitleProps, PageToolsProps, PageTopBarProps, } from "./page/Page";
 export { Page } from "./page/Page";
 export type { SidebarAccountProps, SidebarBrandLogoProps, SidebarBrandProps, SidebarContentProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemActionProps, SidebarItemCountProps, SidebarItemIconProps, SidebarItemProps, SidebarItemShortcutProps, SidebarLabels, SidebarMode, SidebarRootProps, SidebarSubContentProps, SidebarSubProps, SidebarSubTriggerProps, SidebarToggleProps, } from "./sidebar/Sidebar";
 export { Sidebar, useSidebar } from "./sidebar/Sidebar";

package/dist/layout/page/Page.d.ts

@@ -151,8 +151,6 @@ declare function PageBody({ className, ...rest }: PageBodyProps): import("react/
 declare namespace PageBody {
     var displayName: string;
 }
-/** Where the heading of a section stands: over its content or in a column beside it. */
-export type PageSectionLayout = "stack" | "aside";
 export type PageSectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     /**
      * The visible heading (`h2`); it also names the section.
@@ -162,10 +160,6 @@ export type PageSectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title">
      * One line of context under the heading, in secondary body-s.
      */
     description?: React.ReactNode;
-    /**
-     * `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.
-     */
-    layout?: PageSectionLayout;
     ref?: React.Ref<HTMLElement>;
 };
 /**
@@ -173,7 +167,7 @@ export type PageSectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title">
  * at its end) over its content. Sections stand further apart than the plain blocks of the body,
  * so the air shows where a new topic starts.
  */
-declare function PageSection({ label, description, layout, className, children, ...rest }: PageSectionProps): import("react/jsx-runtime").JSX.Element;
+declare function PageSection({ label, description, className, children, ...rest }: PageSectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageSection {
     var displayName: string;
 }

package/dist/skill/anti-slop.md

@@ -292,6 +292,29 @@ The same for one value in several units — one heading, the fields in a row, th
 />
 ```
 
+A bar above the table for a single button — the column chooser, an export — wastes a row and splits
+the page's actions ([controls of a table](composition.md#controls-of-a-table)):
+
+```tsx partial
+// bad — a toolbar that holds one control
+<DataTable columns={columns} rows={orders} toolbar={<Button.Root>Колонки</Button.Root>} />
+```
+
+```tsx good
+// good — the chooser sits in the header row; the page's own actions live in its top bar
+// declare: const orders: { id: string; client: string; total: number }[]
+<DataTable
+  columns={[
+    { id: "id", header: "Заказ", accessor: "id", hideable: false },
+    { id: "client", header: "Клиент", accessor: "client" },
+    { id: "total", header: "Сумма", accessor: "total", numeric: true },
+  ]}
+  rows={orders}
+  getRowKey={(row) => row.id}
+  columnsMenu
+/>
+```
+
 ## 7b. A top bar out of its groups
 
 The bar lays itself out only from its four groups ([the top bar](composition.md#the-top-bar)); a

package/dist/skill/api-contract.md

@@ -295,7 +295,7 @@ export function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 
 Leaving a form with unsaved changes is the same contract: `Modal.Guard` / `Drawer.Guard` inside the
 content with `dirty` (any dismiss asks «Не сохранять изменения?») and `busy` (nothing closes it while
-it saves). A form that is the whole page takes `Page.Guard` (`dirty`, `busy`) inside the page: it
+it saves); while either holds, the browser also asks before the tab closes or reloads. A form that is the whole page takes `Page.Guard` (`dirty`, `busy`) inside the page: it
 holds a press on `Sidebar.Item`, `BottomNav.Item` and `Breadcrumb.Item` links — router links
 included — and the browser's own close or reload; never a `beforeunload` or a ConfirmDialog on a
 crumb of your own.

package/dist/skill/cheatsheet.md

@@ -86,7 +86,7 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 - A work screen (a list, a board, a chat, a record) titles itself in `<Page.TopBar>`: `<Page.Heading>` with `<Page.Title>` + `<Page.Description>` carrying a line of data («128 в работе · 6 ждут оплаты») — not a sentence about the page.
 - The bar holds only its four groups: `<Page.Heading>`, `<Page.Tools aria-label>` (sections, `<SmartFilter.Toolbar />`, the view — in reading order), `<Page.Actions>`, `<Page.Chips>` (`<SmartFilter.Chips />`) — not a hand-made flex row of title, tabs, search and buttons ([the top bar](composition.md#the-top-bar)).
 - A nested record: `<Breadcrumb.Root>` first in `<Page.Heading>`, then `<Page.Title>` with the record's name — the path ends in the title on one line; not a title row under the path, not a breadcrumb in the body. With a router each crumb is `<Breadcrumb.Item asChild>` around its `Link`.
-- A line of data that loads after the page opens: `<Page.Description loading={!summary}>` from the first render — not a Description mounted when the data arrives, which moves the title.
+- A line of data that loads after the page opens: `<Page.Description loading={!summary}>` from the first render (`Drawer.Description` / `Modal.Description` alike) — not a Description mounted when the data arrives, which moves the title, nor a `Skeleton` placed in it by hand.
 - A page that edits a record: `<Page.Guard dirty={changed} busy={saving} />` inside `Page.Root` — the Sidebar, BottomNav and path links ask before the changes are lost; not your own `beforeunload` or a confirm wired to each link.
 - Every button of the page goes into one `<Page.Actions>`, secondary first, the primary last, each with a `<Button.Icon>` beside its label — not buttons split between two places, not a button with only text.
 - A filtered page: `<SmartFilter.Root>` wraps `<Page.Root>` — it draws nothing; not `SmartFilter.Root` inside the bar.
@@ -97,6 +97,7 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 
 - `Card.Root` only for a bounded block with its own title: a KPI tile (`variant="stat-trend"`), a settings panel (`variant="panel"`), side facts — not around a whole section, a form field or a page.
 - Never a `DataTable` inside a Card — the table is already a filled block; a card in a card only sparingly ([the rule](foundations.md#card-in-a-card)).
+- A titled panel (a settings section, a group of a long form) is `<Card.Root>` with `<Card.Header>` (`<Card.Title as="h2">`, `<Card.Description>`) stacked in the flow — never a heading column beside its panel ([a titled block](composition.md#4-surfaces)).
 - Section without a card: `<Page.Section label="…">` + the content (a link or button beside the heading in `Page.Actions`) — not a hand-made `<section>` + `Typography as="h2"` + own gap.
 - The tiles of a screen (KPI cards, charts, panels): one `<Page.Grid>` with a `<Page.Cell span>` per tile — not a grid per row (the rows would stand 24 apart instead of 16). A chart beside a panel is an 8 and a 4 written next to each other — the grid pairs them at mid widths; not 6 + 6 to dodge a hole.
 - A KPI tile whose figure loads: `<Card.Root variant="stat-trend" loading>` with its parts mounted — not Skeletons placed in `Card.Value` by hand.
@@ -108,6 +109,7 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 ## Tables
 
 - A list page is a `<DataTable columns rows getRowKey>` under the page's `<SmartFilter.Root fields value onValueChange>` with `<SmartFilter.Toolbar />` in its `Page.Tools` and `<SmartFilter.Chips />` in its `Page.Chips` ([where the filters go](composition.md#where-the-filters-go)); filter rows with `matchesSmartFilter` — not a search Input and a row of Selects above the table.
+- The column chooser is `<DataTable columnsMenu>` in the header row; `toolbar` only for several controls of the table itself (bulk actions, a section table's own search and filters) ([controls of a table](composition.md#controls-of-a-table)) — never a toolbar for one button.
 - Search over a table or a list page is always SmartFilter, even with no filter fields yet (`fields={[]}` is a plain search that grows into filters). A search `Input` only outside a filtered list: inside a picker, a settings section, a panel.
 - Paging is built in: `paging="pages"` (default) with `pageSize`, `paging="infinite"` for feeds, `paging="none"` for short lists — not a separate `<Pagination>` under a DataTable.
 - Long lists are virtualized inside the kit: pass the whole array to `DataTable` (with `scrollHeight` or `paging="infinite"`; over 100 rows — grouped, `onReorder` and `renderExpanded` bodies render every row, keep those short or paged), `TagSelect options`, `Chat.Messages items`, `Gantt rows` — never slice it by hand, never wrap a kit list in react-window / react-virtual or your own windowing. Big remote data is still paged or loaded on scroll by the server (`source="server"`, `onLoadMore`).
@@ -120,6 +122,8 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 - A list row with controls of its own (a Switch, a ⋯ menu): `List.ItemActions` inside `List.Item`, a stage colour as `Badge.Dot color` in `List.ItemIcon` — not a control inside the row's button, not a row rebuilt as a `div`.
 - Rows people order by hand: `onReorder(id, beforeId)` (apply it with `moveBefore`, return the save's Promise) — not a Dnd list rebuilt next to the table.
 - A short list of records people order by hand (stages, priorities) is `<List.Root onReorder>` with `List.Item value` — not up / down buttons or a hand-made `Dnd.Sortable`.
+- A toggle in a reorderable row leads it (`List.ItemActions side="start"`) and a plain settings row ends with it ([list rows](composition.md#list-rows)) — never a Switch between the label and the grip.
+- The grip ends its row: a `Dnd.Handle` is the last child of its item, after the row's own controls, and a locked row's lock takes the same place (List, FieldList and Kanban place theirs there) — not before the row's text.
 - Groups that fold: pass `defaultCollapsedGroups={[]}` (or the controlled `collapsedGroups` + `onCollapsedGroupsChange`) — not your own button in `renderGroupHeader` or filtering `rows`. One heatmap over several columns: the same `scale: { min, max }` on each.
 - A trend in a table row is `<Sparkline layout="compact">` in the column's `cell` (a column `width`, series built once, not inline, the same `min` / `max` on every row when rows compare by size); the number itself goes in its own column. A missing day is `value: null`, never `0`.
 - Properties of one record: `<DescriptionList.Root>` of `DescriptionList.Item` — not a hand-made grid of label / value text, not a one-row DataTable.
@@ -160,7 +164,7 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 - A destructive confirm is `<ConfirmDialog.Root title description confirmLabel onConfirm={remove}>` with a `ConfirmDialog.Trigger` — not a Modal assembled as a confirm with your own pending state; a reversible delete offers «Отменить» in the notification instead.
 - Overlays close smoothly only if they stay mounted: render the `Root` always and drive visibility with `open` alone — never `{open && <Drawer.Root>}`, never a changing `key` on the Root. The kit keeps the last content on screen while the exit plays.
 - Placement of a menu, popover, select or picker: leave the defaults — `side="bottom"`, `align="auto"`: it opens below the trigger, lines up with the trigger edge that has the room (a «⋯» at the end of a row grows toward the start) and flips to the top by itself. Never write `side` or `align` to restate that; set `align` only when the panel must line up with one edge of a block whatever room there is. A Popover under a wide anchor that must never be narrower than it: `<Popover.Content width="min-trigger">`.
-- While a request runs: `<Modal.Guard busy={saving} />` inside the content (`Drawer.Guard`, `Sheet.Guard` alike) — Escape, a press outside, × and `Close` are held, × and `Close` disabled; add `dirty` to ask before unsaved changes are lost. Not `closeOnEscape={false}` or `showClose={false}` by hand.
+- While a request runs: `<Modal.Guard busy={saving} />` inside the content (`Drawer.Guard`, `Sheet.Guard` alike) — Escape, a press outside, × and `Close` are held, × and `Close` disabled; add `dirty` to ask before unsaved changes are lost; both also hold the browser's tab close. Not `closeOnEscape={false}` or `showClose={false}` by hand, not your own `beforeunload`.
 
 ## Motion — it comes with the components
 
@@ -204,7 +208,7 @@ Full rules: [responsive.md](responsive.md).
 
 - Rearrange, never hide: every desktop function is on the phone, in another place or a menu — not `display: none` below a breakpoint.
 - Breakpoints only in [their scope](responsive.md#breakpoints); inside a page — [intrinsic grids](responsive.md#intrinsic-grids) and container queries.
-- A wide table scrolls inside itself; offer `DataTable.ColumnsMenu` in its `toolbar` — never drop columns by breakpoint, never hand-build the chooser.
+- A wide table scrolls inside itself; offer the column chooser with `columnsMenu` — never drop columns by breakpoint, never hand-build the chooser.
 - A row that opens a record page is `getRowHref` (a real link: ⌘-click, new tab), a row that opens a drawer is `onRowClick` — never `navigate()` in `onRowClick`, never your own `event.target` checks for buttons in the row.
 - A list + detail screen is `Page.Split` (`Page.List`, `Page.Detail`) in a `Page.Root fill` page, its records a `List` (`current` on the open one) — never ghost Buttons with a soft current; a full-height table is `scrollHeight="fill"` — never a height computed from `100vh`.
 - App sections on phones: `BottomNav` in `AppShell.Footer` — not in Main, not `position: fixed`, no own media query: the shell hides the footer while the Sidebar rail is on screen; a short task from the bottom edge: `Sheet` — Select, Dropdown, Popover and Modal become sheets below 640 by themselves.

package/dist/skill/checklist.md

@@ -11,6 +11,8 @@ checks.
 - [ ] Every button of the page is in one `Page.Actions`, the primary last, each with a `Button.Icon` ([the top bar](composition.md#the-top-bar)).
 - [ ] `SmartFilter.Root` wraps `Page.Root`; its toolbar is in `Page.Tools`, its chips in `Page.Chips` ([the top bar](composition.md#the-top-bar)).
 - [ ] A Card only for a standalone titled block — never around a table, a single field or the page ([surfaces](composition.md#4-surfaces)).
+- [ ] A titled panel carries its heading in its `Card.Header` and stacks in the flow; no heading column beside a panel ([surfaces](composition.md#4-surfaces)).
+- [ ] The column chooser is `columnsMenu` in the table's header row; a DataTable `toolbar` holds two or more table controls or does not exist ([controls of a table](composition.md#controls-of-a-table)).
 
 ## UX ([ux.md](ux.md))
 - [ ] I wrote the five-line brief before the JSX ([brief](ux.md#1-brief-before-code)).
@@ -35,6 +37,7 @@ checks.
 ## Sizes and alignment
 - [ ] Default size `m`; a tier changes for a whole region, never for one control ([the host tier](api-contract.md#size-and-the-host-tier)).
 - [ ] Every row of controls uses one size and its heights line up ([density](composition.md#5-density-and-size)).
+- [ ] A reorderable row's toggle leads it and the grip ends it; a plain settings row ends with its toggle ([list rows](composition.md#list-rows)).
 - [ ] Controls in table cells are one tier below the table; no CSS sets row or cell heights ([size axis](foundations.md#3-size-axis)).
 - [ ] Icon-only buttons are square (round only for media and transfers) and named ([icons](api-contract.md#icons)).
 
@@ -59,6 +62,7 @@ checks.
 
 ## Hierarchy
 - [ ] One primary action per area, last in its row; the rest `soft` / `ghost` / `outline` neutral ([actions](composition.md#6-actions)).
+- [ ] A dialog footer holds Cancel and the primary only; deleting the edited record is the last item of the header ⋯ menu ([actions](composition.md#6-actions)).
 - [ ] The same action has the same label and variant everywhere on the screen ([secondary actions](api-contract.md#secondary-actions)).
 
 ## States

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` |
@@ -234,6 +234,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 +290,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 +304,17 @@ 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 inside the field of a one-column list, a
+  pinned row's remove off with its reason (`labels.lockedReason`) — so never add your own.
 - 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`
@@ -300,9 +340,18 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
   `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).
+
+### Controls of a table
+
+- The column chooser is part of the table: `columnsMenu` puts it at the end of the header row — in
+  the head cell of a trailing row-actions column (`hideHeader`), else in a narrow cell of its own —
+  and it sticks with `stickyLastColumn`. Give the key column and the actions column `hideable: false`.
+- The DataTable `toolbar` holds several controls of the table itself: a bulk bar of the selected
+  rows, or the search and filters of a table that is not the page's main region (a table in a
+  section of a record, in a Drawer).
+- One control never gets a bar of its own. A lone «Экспорт» or «Создать» is the page's
+  (`Page.Actions`); the period, the view switch, the search and filters of the page go to
+  `Page.Tools`; a count or a total of the list is data in `Page.Description`.
 
 ### Tables
 
@@ -321,6 +370,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 |
@@ -458,7 +516,7 @@ What each screen in [the index](#screens) demonstrates — keep these when you 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`.
 - 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 +536,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 +560,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 +624,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)