prime-ui-kit 0.13.1 → 0.15.0

package/dist/skill/checklist.md

@@ -3,15 +3,37 @@
 Answer every item yes or no. Any «no» is fixed before handing over.
 
 ## Composition
-- [ ] The screen starts from the closest pattern in [composition.md](composition.md) (list, detail,
+- [ ] The screen starts from the closest screen in [composition.md](composition.md#screens) (list, detail,
       settings, form in a Drawer, dashboard, states, messenger) and keeps its skeleton.
-- [ ] One `PageContent.Header` with title, one-line description and actions; blocks in `PageContent.Body`.
+- [ ] The page titles itself in its `AppHeader`: `AppHeader.Title`, a line of data in
+      `AppHeader.Description`, the page's tools in `AppHeader.Tools` (`PageToolbar`); main has no
+      `PageContent.Header`. Only a document page (settings, a long form, help) has `PageContent.Header`
+      and no title in the header. Blocks in `PageContent.Body`.
+- [ ] The header row holds only what this page needs: no global search, no app-wide buttons.
 - [ ] Cards only for standalone blocks; no card around a table, a single field or the whole page.
 
+## UX ([ux.md](ux.md))
+- [ ] I wrote the brief first: who and what for, the data and its shape, the main action, the states, the narrow screen.
+- [ ] Every entity is laid out by its shape: one record is one row or one block, never split over lines;
+      records a person edits are a `FieldList`, records a person reads a `DataTable`.
+- [ ] Labels on a form of rows ≤ columns + the list label: no label repeated per row, none numbered
+      («Пункт 1»), none repeating its heading; a unit in one place (the field's affix).
+- [ ] No text that explains the layout; every hint says what the person cannot see.
+- [ ] Buttons say the verb and the object; errors say how to fix it; empty states offer the next step.
+- [ ] Money, numbers and dates through `Intl` with `ru-RU`; «ёлочки», `…`, a non-breaking space before units.
+- [ ] Friction matches the cost: reversible → do it and offer «Отменить»; irreversible → `ConfirmDialog`
+      naming the thing and the loss; bulk → the count.
+- [ ] A disabled control says why when the reason is off screen; an action without permission is hidden.
+- [ ] Defaults prefill what the system knows; each field has the control and `inputMode` its data needs;
+      rare settings sit behind a disclosure.
+- [ ] Tabs, filters, search, page and the open record are in the URL.
+- [ ] I looked at the screen in a browser: both themes, 1280 and 375 px, the longest real values, an
+      empty list, an error on every field.
+
 ## Grid and spacing
 - [ ] Every spacing, size and gap in my CSS is a `--prime-space-*` (or another `--prime-*`) token on the 4px grid.
 - [ ] Spacing is `gap` on the parent; no margins on children; no outer padding duplicating `AppShell.Main` / `PageContent.Body`.
-- [ ] Proximity holds: field→field 20, inline controls 8, group→group 32, section→section 40.
+- [ ] Proximity holds: inline controls 8, tile→tile 16 (one `PageContent.Grid`), field→field 20, block→block 24, group→group 32, section→section 40 (`PageContent.Section`).
 - [ ] Inside a group things are visibly closer than between groups.
 
 ## Sizes and alignment
@@ -23,8 +45,8 @@ Answer every item yes or no. Any «no» is fixed before handing over.
 
 ## Text
 - [ ] Every text goes through a kit component or `Typography` with a role; no custom font sizes/weights.
-- [ ] One page title (`PageContent.Title`, `<h1>`); headings descend without skipping levels
-      (`Card.Title as="h2"` directly under the page title).
+- [ ] One page title, one `<h1>` (`AppHeader.Title`, or `PageContent.Title` on a document page);
+      headings descend without skipping levels (`Card.Title as="h2"` directly under the page title).
 - [ ] Secondary text uses `tone="secondary"`/`"muted"`; numbers in tables and prices are tabular.
 - [ ] No filler copy, no emoji, no text that restates the heading.
 
@@ -82,7 +104,7 @@ Answer every item yes or no. Any «no» is fixed before handing over.
 - [ ] Screen checked with `data-theme="dark"`: no hard-coded colors, everything readable.
 - [ ] Screen works at 320px: no horizontal page scroll, grids collapse, toolbars rearrange (`PageToolbar`) and switchers scroll, long text truncates or wraps.
 - [ ] The responsive checklist in [responsive.md](responsive.md#checklist-before-handing-a-screen-over) passes: widths 320 · 390 · 768 · 1024 · 1280 · 1920, the primary action in the top row, one height per row, no hover-only functions, zoom 400%.
-- [ ] Below 768px `AppHeader.MenuButton` opens the Sidebar; the header holds the title or path on every width.
+- [ ] Below 768px `AppHeader.MenuButton` opens the Sidebar; the page title stays in the header on every width, the page's tools wrap under it.
 
 ## Keyboard and a11y
 - [ ] Every action is reachable by Tab in a logical order and works with Enter/Space.

package/dist/skill/choosing.md

@@ -8,16 +8,15 @@ confuse. Links: [components.md](components.md). Whole screens: [composition.md](
 | The user needs to… | Category |
 |---|---|
 | trigger an action (save, delete, go on) | Actions — Button, ButtonGroup, LinkButton |
-| type a value (text, number, code, file, photos), group the fields of a form | Inputs — Input, Textarea, DigitInput, FileUpload, Label, Hint, Fieldset |
+| type a value (text, number, code, file, photos), group the fields of a form, edit a list of records of one shape | Inputs — Input, Textarea, DigitInput, FileUpload, Label, Hint, Fieldset, FieldList |
 | pick from options, toggle, set a range, filter, a date or a color | Selection — Checkbox, Radio, Switch, SegmentedControl, Slider, Select, NativeSelect, TagSelect, SmartFilter, Datepicker, ColorField, ColorPicker, ColorSwatches |
 | see data: status labels, people, objects, numbers and their trend, properties of a record, rows, a board, a schedule, events, code, disclosed sections | Data display — Badge, Avatar, Thumbnail, Kbd, Card, DescriptionList, DataTable, Kanban, Gantt, Timeline, CodeBlock, Accordion, Sparkline, ChartFrame |
 | hold a conversation: pick a dialog, read and send chat messages of every kind | Messages — Chat, ChatList, Message, Gallery, VoicePlayer, VideoNote, Composer |
 | learn what happened, how far along it is, or watch a region load and change state; say it to a screen reader | Status and loading — Banner, Notification, ProgressBar, ProgressCircle, Spinner, Skeleton, Crossfade, EmptyPage, VisuallyHidden |
 | move between places: app sections, panels of a screen, the records of a list, the path, pages, steps | Navigation — Tabs, Breadcrumb, Pagination, List, Stepper, Sidebar, BottomNav |
 | see something on top of the page, or a photo or video full screen | Overlays — Tooltip, Popover, Dropdown, Modal, ConfirmDialog, Drawer, Sheet, CommandMenu, MediaViewer |
-| get the app frame and the structure of a page | Page — AppShell, AppHeader, PageContent, PageToolbar, Divider, ScrollContainer |
+| get the app frame and the structure of a page, or a whole ready-made screen block (sign-in, sign-up, password reset, code) | Page — AppShell, AppHeader, PageContent, PageToolbar, Divider, ScrollContainer, LoginForm |
 | drag things by hand | Interaction — Dnd (a status board: Kanban in Data display) |
-| show a whole ready-made screen block (sign-in, sign-up, password reset, code) | Composition — LoginForm |
 | style text | Foundations — Typography |
 
 ## 2. Inside a category
@@ -33,7 +32,8 @@ Input with `Input.InlineAffix`. Search and filters above a list or table → Sma
 (`fields={[]}`); a lone search
 field outside a list (a picker, a settings section, a panel) → Input with `Input.Icon` + `type="search"`
 and `aria-label`. Several fields of a form under one heading → Fieldset (`label`, `disabled` while the
-form saves).
+form saves). Several records of the same fields that a person adds, edits and removes (invoice lines,
+contacts, specs, prices by period) → FieldList: one row per record, the headings once.
 
 **Selection.**
 
@@ -62,12 +62,15 @@ numbers/content → Card (pick the template; a whole tile that opens its details
 with a link). Read-only properties of one record («label — value») → DescriptionList, never a
 hand-made grid of text pairs. Rows with columns, sorting, selection → DataTable.
 Items that flow through statuses and are moved by hand → Kanban (a single list to reorder, or items
-dropped onto folders or assignees → Dnd directly).
+dropped onto folders or assignees → Dnd directly). Its look: `plain` (default; `line` for a quieter header over a line) when the board is
+the page's main region or sits in a Card / Drawer — headers and cards stand on the host, one level of
+nesting; `variant="well"` when columns must read as bounded queues (WIP limits, many sparse or empty
+columns, a dense board of narrow columns). Never your own box around a column.
 Records with a start and an end compared across time — who is busy when, a project plan with
 phases and milestones → Gantt (never a DataTable of dates or hand-drawn bars); moved and resized by
 hand through `onBarChange`.
 Chronological events → Timeline; a conversation between people (support, a team chat) → Message —
-never a Timeline or a list of Cards styled as bubbles. Code → CodeBlock. A number with its trend over days or weeks (revenue, orders, sign-ups) → Sparkline: the latest value, its change and a line you can scrub; values with a sign by period → Sparkline `variant="bars"`; a chart with axes or several series → ChartFrame around a chart library or your own SVG (the panel, legend, tooltip, states and the screen-reader table come from the kit, the colors from `series` / `chartColors` — never status tones); values to read, sort or compare row by row → DataTable, not a chart.
+never a Timeline or a list of Cards styled as bubbles. Code → CodeBlock. A number with its trend over days or weeks (revenue, orders, sign-ups) → Sparkline: the latest value, its change and a line you can scrub; values with a sign by period → Sparkline `variant="bars"`; against a plan → `reference`; missing days → `value: null`; a chart with axes or several series → ChartFrame around a chart library or your own SVG (the panel, legend, tooltip, states and the screen-reader table come from the kit, the colors from `series` / `chartColors` — never status tones); values to read, sort or compare row by row → DataTable, not a chart.
 
 **Messages.** A whole conversation → `Chat`: `Chat.Root` with `Chat.Header` (avatar, `Chat.Title`,
 `Chat.Description`, `Chat.Actions` with `Chat.SearchButton`), `Chat.Search`, `Chat.Pinned`,
@@ -120,13 +123,12 @@ Drawer menu.
 `Sidebar.Header` — at the header's end while expanded, a small round button on the rail's edge while
 compact (the default for a branded rail); `Sidebar.Toggle` (`variant="item"`) in `Sidebar.Footer` when
 the rail has no brand header. On phones neither replaces `AppHeader.MenuButton` that
-opens the off-canvas Sidebar (`open` / `onOpenChange`). The bar at the top of the panel (where you are,
-⌘K search, a few app actions) is `AppHeader`; the page's own heading and actions are `PageContent`, its
-data tools `PageToolbar`. Use `PageToolbar` when a page has several tools above its data — sections,
-search and filters, a view switch, an action — and they must rearrange on a phone; one search or one
-filter above a single table goes into the DataTable `toolbar` instead. A page that gives all its
-height to the work (a board, a chat) may let `AppHeader` carry the page instead: `AppHeader.Title
-as="h1"` and the PageToolbar in `AppHeader.Tools` — then main has no `PageContent.Header`. A record
+opens the off-canvas Sidebar (`open` / `onOpenChange`). The bar at the top of the panel is the page's
+`AppHeader`: the page title (`AppHeader.Title` + a line of data), the page's own buttons and its
+tools — a `PageToolbar` in `AppHeader.Tools` when the page has several tools above its data (sections,
+search and filters, a view switch, the primary action) that must rearrange on a phone; one search or one
+filter above a single table goes into the DataTable `toolbar` instead. Only a document page (settings,
+a long form, help) has its title in main, `PageContent.Header`, and no title in the header. A record
 opened from a table: its own page → DataTable `getRowHref`; in place → `onRowClick` + Drawer; a list
 worked through record by record (mail, chat, tickets) → `PageContent.Split` with a `List` of the records
 (`current` on the open one). Sections of a long rail → `Sidebar.Group
@@ -138,6 +140,7 @@ collapsible`; a section with sub-pages → `Sidebar.Sub`; the signed-in user →
 | Pair | Rule |
 |---|---|
 | List / Sidebar / Tabs / Card list / DataTable | List: the records of a list + detail screen (dialogs, tickets, mail), one open at a time (`current`), each row a button or a link with a text line, a preview, meta and a count. Sidebar: the sections of the **app**. Tabs: panels of **one screen**. `Card.List` (`variant="list"`): static facts in a card, nothing opens. DataTable: many records compared by columns, sorted, filtered, selected in bulk. |
+| FieldList / DataTable / Fieldset / TagSelect | FieldList: records of one shape a person **edits** in a form, a row of fields each, added and removed by hand, up to four short fields per row. DataTable: records a person **reads**, sorts, filters and selects; edits open a Drawer. Fieldset: **one** record's fields under a heading. TagSelect: values **picked** from options, shown as tags. One value in several units is none of them — fields in one row under one heading. |
 | Tabs / SegmentedControl | Tabs switch **panels of content** (navigation inside a screen). SegmentedControl switches a **value or mode** of the same content (period, view mode, filter). |
 | Modal / Drawer / Sheet / Popover / Tooltip | Modal: blocking decision or a short form (≤ 4 fields) that needs full attention. Drawer: long form, filters, record details beside the page, while keeping page context. Sheet: a short task that ends by itself — a pick, an action, a short note — raised from the bottom edge. Popover: small non-modal panel anchored to a control (quick edit, explanation with a link). Tooltip: a few words naming or explaining a control, no interactive content. |
 | Select / NativeSelect | Select: the kit's floating list — icons, descriptions, groups, search, `multiple`, `clearable`. NativeSelect: a plain text list where the OS picker is better (phones) or the value must post with a form by `name`. |
@@ -151,7 +154,7 @@ collapsible`; a section with sub-pages → `Sidebar.Sub`; the signed-in user →
 | Gallery / MediaViewer / Thumbnail | Thumbnail: one picture or video of an object in a list, card or picker (selectable with `checked`). Gallery: an album of 1–10 photos and videos laid out by their ratios; it opens MediaViewer itself. MediaViewer: the full-screen viewer on its own, opened from your own thumbnails or a button (`getOrigin` for the zoom out of the tile). A grid of many images to browse → a CSS grid of Thumbnails, not a Gallery. |
 | Sparkline / ChartFrame | Sparkline: one series as a headline number with its change and a small line or bars you can scrub (`variant="bars"` for signed values). ChartFrame: a panel around a real chart (axes, several series, legend, tooltip, states) drawn by a library or your SVG. Rows to compare → DataTable. |
 | VoicePlayer / VideoNote | The same player props (`src`, `duration`, `playing`, transcript, `transfer`). VoicePlayer: audio, a waveform seek slider and a playback rate. VideoNote: a round face-to-camera video with a `poster`; alone in `Message.Root` it is the message. A video with controls → `Thumbnail.Video` / `Message.Media`. |
-| Card / plain section | Card for a bounded block of related content that stands out (metric, settings panel, side facts). A page section that is the only thing in its region needs no card: a `title-m` heading and the content. Never wrap a single field, a DataTable or a whole page in a Card. |
+| Card / plain section / Grid | Card for a bounded block of related content that stands out (metric, settings panel, side facts). A page section that is the only thing in its region needs no card: `PageContent.Section label` and the content. Several tiles of one screen → one `PageContent.Grid` with a `PageContent.Cell span` each; a grid inside one block (thumbnails, fields) is the block's own CSS. Never wrap a single field, a DataTable or a whole page in a Card. |
 | EmptyPage / empty DataTable | Empty table (no rows yet or nothing matches the filter): the DataTable `empty` prop — headers and toolbar stay. Whole page or region with no data at all (first run): EmptyPage with one action. |
 | Accordion / Tabs | Accordion when the user may need several sections open or reads them in order (FAQ, settings groups). Tabs when sections are alternatives viewed one at a time. |
 | Divider / gap | Divider inside a block between rows or a form and its footer. Between blocks and groups use air (`gap`), not lines. |

package/dist/skill/components.md

@@ -4,8 +4,8 @@ Index of every kit component, grouped like the playground menu — by the task t
 categories as [choosing.md](choosing.md)). Each row links to the full reference
 (`COMPONENT.md`: API, variants, states, a11y, mistakes) and to copyable scenarios (`examples/`).
 Paths are relative to this folder in the kit repository; in a consumer project prefix them with
-`node_modules/prime-ui-kit/` instead of `../`. Whole screens built from these components are in
-[composition.md](composition.md) and [patterns/](patterns/).
+`node_modules/prime-ui-kit/` instead of `../`. Whole screens built from these components are the `screen.tsx` example of
+their main component, indexed in [composition.md](composition.md#screens).
 
 ## Actions (`actions`)
 
@@ -30,6 +30,7 @@ Type a value, and the field anatomy: label, hint, error.
 | Label | Field label (native `<label>`) with required and optional markers. | [COMPONENT.md](reference/components/label/COMPONENT.md) · [examples](reference/components/label/examples/) |
 | Hint | Help text or a validation error under a field. | [COMPONENT.md](reference/components/hint/COMPONENT.md) · [examples](reference/components/hint/examples/) |
 | Fieldset | A frameless group of form fields: a `title-s` legend, the form rhythm and one `disabled` for all of them. | [COMPONENT.md](reference/components/fieldset/COMPONENT.md) · [examples](reference/components/fieldset/examples/) |
+| FieldList | An editable list of records of one shape: one row of fields per record, the column headings once, add, remove, reorder, pinned rows. | [COMPONENT.md](reference/components/field-list/COMPONENT.md) · [examples](reference/components/field-list/examples/) |
 
 ## Selection (`selection`)
 
@@ -60,13 +61,13 @@ Show data: labels, people, objects, cards, tables, boards, feeds, code, disclose
 | Badge | The kit's one chip: a static label for a status, category or count, a removable value or applied filter, and a pressable toggle with a hover action — in a palette color. | [COMPONENT.md](reference/components/badge/COMPONENT.md) · [examples](reference/components/badge/examples/) |
 | Avatar | A round photo of a person or organization with an initials or icon fallback, a presence dot and overlapping groups. | [COMPONENT.md](reference/components/avatar/COMPONENT.md) · [examples](reference/components/avatar/examples/) |
 | Thumbnail | A preview of an object — product, vehicle, file, cover — at a fixed aspect ratio (`ratio`), an image or a video (`Thumbnail.Video`, first frame and length), a colored icon fallback, and a selectable tile (`checked`). | [COMPONENT.md](reference/components/thumbnail/COMPONENT.md) · [examples](reference/components/thumbnail/examples/) |
-| Sparkline | A small line or bar chart with its headline — the value at rest, its change against the point before and its date — where any point can be scrubbed; `layout="compact"` — just the plot, for a table cell. | [COMPONENT.md](reference/components/sparkline/COMPONENT.md) · [examples](reference/components/sparkline/examples/) |
+| Sparkline | A small chart — a smooth line over a fading area, a bare line or bars — with its headline: the value at rest, its change and its date; any point can be scrubbed; a tooltip beside the scrubbed point; `layout="compact"` — just the plot, for a table cell. | [COMPONENT.md](reference/components/sparkline/COMPONENT.md) · [examples](reference/components/sparkline/examples/) |
 | ChartFrame | A dashboard panel around any chart (Recharts, ECharts, visx, Chart.js or a hand-drawn SVG): title, headline value, a measured plot area, a series legend that hides series (`hiddenSeries`), loading / empty / error states (`state`, `onRetry`) that cross-fade, a tooltip body and a data table for screen readers. | [COMPONENT.md](reference/components/chart-frame/COMPONENT.md) · [examples](reference/components/chart-frame/examples/) |
 | Kbd | A key cap for a keyboard key or a shortcut, rendered as a native `<kbd>`. | [COMPONENT.md](reference/components/kbd/COMPONENT.md) · [examples](reference/components/kbd/examples/) |
 | Card | A filled surface block with structural templates for metrics, charts, lists, calls to action and covers. | [COMPONENT.md](reference/components/card/COMPONENT.md) · [examples](reference/components/card/examples/) |
 | DescriptionList | Read-only properties of a record: «label — value» pairs on a `<dl>` that stack by themselves where the room is narrow, with a muted dash for an empty value. | [COMPONENT.md](reference/components/description-list/COMPONENT.md) · [examples](reference/components/description-list/examples/) |
 | DataTable | A data table with sorting, pages or infinite scroll (on the client or by the server, `source="server"`), row selection, row groups, rows reordered by drag (`onReorder`), rows that open a record (link or in place), a column chooser (`DataTable.ColumnsMenu`), nested rows and loading / empty / error states. | [COMPONENT.md](reference/components/data-table/COMPONENT.md) · [examples](reference/components/data-table/examples/) |
-| Kanban | A board of status columns: cards move by drag, touch hold and Alt + arrows, columns reorder by a grip in their header (`reorderableColumns`, `columnOrder`), with column descriptions and colors, WIP limits, loading and empty columns. | [COMPONENT.md](reference/components/kanban/COMPONENT.md) · [examples](reference/components/kanban/examples/) |
+| Kanban | A board of status columns — without wells — cards on the page under a header plate (`plain`, default) or a header line (`line`) — or filled wells (`well`): cards move by drag, touch hold and Alt + arrows, columns reorder by a grip in their header (`reorderableColumns`, `columnOrder`), with column descriptions and colors, WIP limits, loading and empty columns. | [COMPONENT.md](reference/components/kanban/COMPONENT.md) · [examples](reference/components/kanban/examples/) |
 | Gantt | A resource or project schedule: rows with bars on a day / week / month axis, lanes for overlaps, milestones, a today line, a pinned first column, moves and resizes by pointer and keyboard through an async `onBarChange`, new bars drawn on empty space (`onBarCreate`), virtualized rows and days for thousands of rows. | [COMPONENT.md](reference/components/gantt/COMPONENT.md) · [examples](reference/components/gantt/examples/) |
 | Timeline | An event feed: dots on a thin line, event title and date, an optional amount on the right, grouped under labels. | [COMPONENT.md](reference/components/timeline/COMPONENT.md) · [examples](reference/components/timeline/examples/) |
 | CodeBlock | A static TypeScript / TSX snippet with syntax highlighting, on a filled panel or bare inside a host. | [COMPONENT.md](reference/components/code-block/COMPONENT.md) · [examples](reference/components/code-block/examples/) |
@@ -134,16 +135,17 @@ Floating layers above the page, from tooltip to modal.
 
 ## Page (`page`)
 
-The frame and structure of a screen: app shell, app header, page column, page panel, separators, scroll regions.
+The frame and structure of a screen: app shell, app header, page column, page panel, separators, scroll regions, and ready-made screen blocks (sign-in).
 
 | Component | Purpose | Docs |
 |---|---|---|
 | AppShell | The app frame: a content panel that is the page itself and a navigation rail one layer above it. | [COMPONENT.md](reference/layout/app-shell/COMPONENT.md) · [examples](reference/layout/app-shell/examples/) |
-| AppHeader | The bar at the top of the content panel: where you are, ⌘K search, a few actions, the phone menu button; as high as the Sidebar brand row. May carry the page title (`AppHeader.Title as="h1"`) and the page tools (`AppHeader.Tools`). | [COMPONENT.md](reference/layout/app-header/COMPONENT.md) · [examples](reference/layout/app-header/examples/) |
-| PageContent | Page structure inside the main column: title, description, page actions and content sections; a page as high as the panel (`fill`) and list + detail (`PageContent.Split`). | [COMPONENT.md](reference/components/page-content/COMPONENT.md) · [examples](reference/components/page-content/examples/) |
+| AppHeader | The page's bar at the top of the content panel: the page title (`AppHeader.Title`) with a line of data, the page's own buttons, its tools (`AppHeader.Tools` with a PageToolbar) and the phone menu button; as high as the Sidebar brand row. | [COMPONENT.md](reference/layout/app-header/COMPONENT.md) · [examples](reference/layout/app-header/examples/) |
+| PageContent | Page structure inside the main column: title, page actions, titled sections (`PageContent.Section`) and the tile grid (`PageContent.Grid`); a page as high as the panel (`fill`) and list + detail (`PageContent.Split`). | [COMPONENT.md](reference/components/page-content/COMPONENT.md) · [examples](reference/components/page-content/examples/) |
 | PageToolbar | The panel at the top of a page — search and filter, sections, view options and the primary action — laid out from its own width: one row when wide, stacked rows when narrow, the active filters right under the search. | [COMPONENT.md](reference/components/page-toolbar/COMPONENT.md) · [examples](reference/components/page-toolbar/examples/) |
 | Divider | A hairline separator inside one surface, horizontal or vertical, with or without a label. | [COMPONENT.md](reference/components/divider/COMPONENT.md) · [examples](reference/components/divider/examples/) |
 | ScrollContainer | The kit's one scroll region: a thin scrollbar or none (`scrollbar="hidden"`), soft edges where content is hidden (`edges` fade / shadow), `snap`, `lock`, correct shrinking inside flex and grid parents; pinned to the end for chats (`anchor="end"`), edge events for loading more (`onReachStart` / `onReachEnd`). | [COMPONENT.md](reference/components/scroll-container/COMPONENT.md) · [examples](reference/components/scroll-container/examples/) |
+| LoginForm | A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation. | [COMPONENT.md](reference/components/login-form/COMPONENT.md) · [examples](reference/components/login-form/examples/) |
 
 ## Interaction (`interaction`)
 
@@ -153,14 +155,6 @@ Direct manipulation: drag and drop (Kanban builds a board on it).
 |---|---|---|
 | Dnd | Pointer-driven drag and drop: reorderable lists, draggable items and drop zones, with touch and keyboard support. | [COMPONENT.md](reference/components/dnd/COMPONENT.md) · [examples](reference/components/dnd/examples/) |
 
-## Composition (`composition`)
-
-Ready-made screen blocks; whole screens are in [composition.md](composition.md) and [patterns/](patterns/).
-
-| Component | Purpose | Docs |
-|---|---|---|
-| LoginForm | A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation. | [COMPONENT.md](reference/components/login-form/COMPONENT.md) · [examples](reference/components/login-form/examples/) |
-
 ## Foundations (`foundations`)
 
 Text roles and icons.