prime-ui-kit 0.14.0 → 0.15.0

package/dist/index.js

@@ -86,7 +86,7 @@ import {
   useSidebar,
   useTokenValue,
   useUploadQueue
-} from "./chunks/chunk-SYEX7OVT.js";
+} from "./chunks/chunk-THFZIHKU.js";
 import {
   Avatar,
   Badge,
@@ -118,7 +118,7 @@ import {
   textTones,
   tones,
   variants
-} from "./chunks/chunk-WXKRUVSE.js";
+} from "./chunks/chunk-XJAVS6FH.js";
 import {
   ControlSizeProvider,
   useOptionalControlSize

package/dist/internal/swatch.d.ts

@@ -11,11 +11,15 @@ export type ColorPreset = {
  * Take `COLOR_PRESETS.slice(0, 8)` for a single row of eight.
  */
 export declare const COLOR_PRESETS: readonly ColorPreset[];
-/** One selectable swatch: `null` is «no color». */
+/**
+ * One selectable swatch: `null` is «no color». `contrast` picks the check mark: `light` / `dark`
+ * by the color's luminance; `surface` (the «no color» checkerboard, drawn from the surface's own
+ * fills) follows the theme with the primary text color.
+ */
 export type SwatchOption = {
     value: string | null;
     label: string;
-    contrast: "light" | "dark";
+    contrast: "light" | "dark" | "surface";
 };
 /** The presets as swatch options, plus the «no color» option at the end when `allowEmpty`. */
 export declare function useSwatchOptions(presets: readonly ColorPreset[], allowEmpty: boolean, emptyLabel: string): SwatchOption[];

package/dist/layout/app-header/AppHeader.d.ts

@@ -14,9 +14,10 @@ export type AppHeaderRootProps = HeaderProps & {
     labels?: Partial<AppHeaderLabels>;
 };
 /**
- * The bar at the very top of the content panel: where you are, global search, a few actions.
- * One row as high as the Sidebar brand row, so the two read as one line; sticky; lays itself out
- * from its own width (narrow: the search folds into an icon, the title truncates).
+ * The page's bar at the very top of the content panel: its row holds only what the current page
+ * needs — the page title, the page's tools, per-page buttons. One row as high as the Sidebar brand
+ * row, so the two read as one line; sticky; lays itself out from its own width (narrow: the
+ * description goes, the title truncates).
  */
 declare function AppHeaderRoot({ labels, className, children, ...rest }: AppHeaderRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppHeaderRoot {
@@ -28,18 +29,14 @@ declare function AppHeaderStart({ className, ...rest }: AppHeaderStartProps): im
 declare namespace AppHeaderStart {
     var displayName: string;
 }
-export type AppHeaderTitleProps = DivProps & {
-    /**
-     * Tag of the name: `h1` when the header carries the page title (no `PageContent.Header` in
-     * main) — the description stays outside the heading's name. Default `span`.
-     */
-    as?: "span" | "h1";
-};
+export type AppHeaderTitleProps = DivProps;
 /**
  * Where you are: an optional `AppHeader.Icon`, the name and an optional `AppHeader.Description`
- * under it — the same anatomy as the Sidebar brand. The name truncates.
+ * under it — the same anatomy as the Sidebar brand. The name is the page's `<h1>` (an app page
+ * titles itself in the header); the description stays outside the heading's name. The name
+ * truncates.
  */
-declare function AppHeaderTitle({ as: NameTag, className, children, ...rest }: AppHeaderTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function AppHeaderTitle({ className, children, ...rest }: AppHeaderTitleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AppHeaderTitle {
     var displayName: string;
 }
@@ -68,21 +65,6 @@ declare function AppHeaderSeparator({ className, ...rest }: AppHeaderSeparatorPr
 declare namespace AppHeaderSeparator {
     var displayName: string;
 }
-export type AppHeaderSearchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
-    /** Placeholder text; also the button's name when the header is narrow and the field folds. */
-    children: React.ReactNode;
-    /** Key hint at the end. Default `⌘K`; `null` hides it. */
-    shortcut?: React.ReactNode;
-    ref?: React.Ref<HTMLButtonElement>;
-};
-/**
- * Global search entry: looks like a field, works as a button that opens your CommandMenu (wire
- * `onClick` and the shortcut). On a narrow header it folds into a square search button.
- */
-declare function AppHeaderSearch({ children, shortcut, className, ...rest }: AppHeaderSearchProps): import("react/jsx-runtime").JSX.Element;
-declare namespace AppHeaderSearch {
-    var displayName: string;
-}
 export type AppHeaderToolsProps = DivProps;
 /**
  * The page's tools in the header — a `PageToolbar.Root` (sections, period, filters, the primary
@@ -120,7 +102,6 @@ export declare const AppHeader: {
     Icon: typeof AppHeaderIcon;
     Description: typeof AppHeaderDescription;
     Separator: typeof AppHeaderSeparator;
-    Search: typeof AppHeaderSearch;
     Tools: typeof AppHeaderTools;
     Actions: typeof AppHeaderActions;
     MenuButton: typeof AppHeaderMenuButton;

package/dist/layout/index.d.ts

@@ -1,4 +1,4 @@
-export type { AppHeaderActionsProps, AppHeaderDescriptionProps, AppHeaderIconProps, AppHeaderLabels, AppHeaderMenuButtonProps, AppHeaderRootProps, AppHeaderSearchProps, AppHeaderSeparatorProps, AppHeaderStartProps, AppHeaderTitleProps, AppHeaderToolsProps, } from "./app-header/AppHeader";
+export type { AppHeaderActionsProps, AppHeaderDescriptionProps, AppHeaderIconProps, AppHeaderLabels, AppHeaderMenuButtonProps, AppHeaderRootProps, AppHeaderSeparatorProps, AppHeaderStartProps, AppHeaderTitleProps, AppHeaderToolsProps, } from "./app-header/AppHeader";
 export { AppHeader } from "./app-header/AppHeader";
 export type { AppShellContentWidth, AppShellFooterProps, AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
 export { AppShell } from "./app-shell/AppShell";

package/dist/skill/SKILL.md

@@ -32,13 +32,15 @@ region, `Skeleton` while it loads).
    the main action, the states, the narrow screen); the shape of the data decides the layout, every
    label must carry something new, friction matches the cost of a mistake.
 2. **The app frame, once per app** — [layouts.md](layouts.md): styles, theme, providers, `AppShell`
-   with `Sidebar` and `AppHeader`, page wrappers, auth screens. A screen you deliver renders only its page.
+   with `Sidebar` and `AppHeader`, page wrappers, auth screens. A screen you deliver renders only its
+   page: its header content (title, a line of data, its tools) and its body.
 3. **Choose** — [choosing.md](choosing.md): the category by task, then the component, then the pairs
    that are easy to confuse.
 4. **Read the component** — [components.md](components.md) links each `COMPONENT.md` (API, variants,
    states, a11y, mistakes) and its `examples/`. Never guess a prop; copy structure from an example.
-5. **Compose the screen** — [composition.md](composition.md): start from the closest working screen in
-   [patterns/](patterns/) and keep its skeleton; rhythm, hierarchy, surfaces and type in
+5. **Compose the screen** — [composition.md](composition.md): start from the closest working screen (the
+   [screens index](composition.md#screens): the `examples/screen.tsx` of its main component) and keep
+   its skeleton; rhythm, hierarchy, surfaces and type in
    [foundations.md](foundations.md).
 6. **Write the JSX** — [api-contract.md](api-contract.md): prop names, controlled state, events (async
    events return the request's Promise), forms and their submit flow (`Fieldset disabled`), uploads
@@ -64,7 +66,7 @@ project under `node_modules/prime-ui-kit/src/`.
 | Component reference | `reference/components/<dir>/COMPONENT.md` | `node_modules/prime-ui-kit/src/components/<dir>/COMPONENT.md` |
 | Copyable scenarios | `reference/components/<dir>/examples/*.tsx` | `node_modules/prime-ui-kit/src/components/<dir>/examples/*.tsx` |
 | AppShell, Sidebar, AppHeader, BottomNav | `reference/layout/<dir>/…` | `node_modules/prime-ui-kit/src/layout/<dir>/…` |
-| Whole screens | `patterns/*.tsx` | `node_modules/prime-ui-kit/dist/skill/patterns/*.tsx` |
+| Whole screens | `reference/<base>/<dir>/examples/screen.tsx` | `node_modules/prime-ui-kit/src/<base>/<dir>/examples/screen.tsx` |
 
 ## Files of this skill
 
@@ -75,8 +77,7 @@ project under `node_modules/prime-ui-kit/src/`.
 | [layouts.md](layouts.md) | once per app — the app frame, page wrappers, auth screens |
 | [choosing.md](choosing.md) | unsure which component fits (Gantt / Timeline / Kanban / DataTable, Message / Composer, FileUpload list / grid / gallery / strip, ColorField / ColorPicker…); how to confirm a destructive action |
 | [components.md](components.md) | finding a component and its `COMPONENT.md` / `examples/` |
-| [composition.md](composition.md) | building any screen — the patterns table, the rules of assembly, what to do when the kit lacks a component |
-| [patterns/](patterns/) | starting a screen — list, detail, settings, form in a Drawer, dashboard, states, messenger |
+| [composition.md](composition.md) | building any screen — the screens index (list, detail, settings, form in a Drawer, dashboard, states, messenger, board, app frame, media library, schedule, record editor) and what each one teaches, the rules of assembly, what to do when the kit lacks a component |
 | [foundations.md](foundations.md) | grid, proximity scale, sizes, surfaces, type, tone and color |
 | [api-contract.md](api-contract.md) | writing JSX — prop names, sizes and host tiers, controlled state, forms, helpers, icons |
 | [motion.md](motion.md) | every screen — loading / empty / error that flow, what the kit animates, when to move, recipes |
@@ -122,7 +123,8 @@ Take a semantic `<Icon name="…" />` first, else a glyph from the full animated
 7. Labels above fields, always — once per column for records in rows (`FieldList`), never numbered
    («Пункт 1»), never repeating their heading. Placeholder is an example value, never the label.
 8. Text through `Typography` roles (`title-m` section, `title-s` group, `body-m` text, `caption` meta;
-   the page title is `PageContent.Title`). No custom font sizes.
+   the page title is `AppHeader.Title` in the page's header, `PageContent.Title` only on a
+   document page). No custom font sizes.
 9. Overlays (Modal, ConfirmDialog, Drawer, Sheet, Popover, Dropdown, Tooltip, CommandMenu, Select,
    MediaViewer) come from the kit — never hand-made — and stay mounted: drive them with `open`,
    never `{open && …}`.

package/dist/skill/api-contract.md

@@ -157,7 +157,7 @@ export function InviteForm() {
 ```
 
 (`.form { display: grid; gap: var(--prime-space-5); }`.) A full create form with groups, validation,
-loading and a toast: [patterns/form-drawer.tsx](patterns/form-drawer.tsx).
+loading and a toast: [the Drawer screen](reference/components/drawer/examples/screen.tsx).
 
 ## Loading without DataTable
 
@@ -167,7 +167,7 @@ any other card or region that loads: wrap its content in `Crossfade state={statu
 (same rows, gaps and heights). A `Spinner` only where there is no shape to hold. Show the error in
 place (a `Banner` for the page, `EmptyPage` with `EmptyPage.Icon tone="danger"` and a retry for a
 region). Never draw your own spinners or shimmer blocks. See
-[patterns/screen-states.tsx](patterns/screen-states.tsx) and [motion.md](motion.md).
+[the screen states](reference/components/crossfade/examples/screen.tsx) and [motion.md](motion.md).
 
 ## Secondary actions
 

package/dist/skill/cheatsheet.md

@@ -76,6 +76,13 @@ reference is each component's `COMPONENT.md` ([components.md](components.md)), t
 - Busy action: `<Button.Root loading>` — not a hand-made spinner or «Загрузка…» text.
 - An action on a coloured host (a solid Banner, an accent strip): `<Button.Root variant="ghost" tone="inherit">` — it takes the host's text colour; never recolour a Button with a CSS override.
 
+## Page title and header
+
+- An app page titles itself in its header: `<AppHeader.Title>` + `<AppHeader.Description>` with a line of data («128 в работе · 6 ждут оплаты») — not a `PageContent.Header` in main and not a sentence about the page.
+- The page's tools — its own search and filter, sections, the view, the primary action — are a `<PageToolbar.Root>` in `<AppHeader.Tools>`; the page's other buttons in `<AppHeader.Actions>` — not a global search, notifications or app-wide buttons: the header row is per page.
+- A nested record: `Breadcrumb` + `<AppHeader.Separator />` + `<AppHeader.Title>` with the record's name — not a breadcrumb in main.
+- A document page (settings, a long form, help) is the only one with `<PageContent.Header>` + `PageContent.Title` in main, and then its header has no title — never two titles, never no `<h1>`.
+
 ## Cards and surfaces
 
 - `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.
@@ -176,7 +183,7 @@ State change is continuous in the whole kit: every region that changes what it s
 
 Full rules: [responsive.md](responsive.md).
 
-- The page panel is `<PageToolbar.Root>` with, in this order, `Tools` (`SmartFilter.Toolbar`: search, then filter), `Sections` (a `fullWidth` SegmentedControl), `View`, `Actions`, `Chips` — the active filters always sit right under the search, never under the sections; not a hand-made flex row of tabs, search and buttons.
+- The page panel is `<PageToolbar.Root>` with, in this order, `Tools` (`SmartFilter.Toolbar`: search, then filter), `Sections` (a `fullWidth` SegmentedControl), `View`, `Actions`, `Chips` — the active filters sit under the top row, never under the sections; on a phone the primary action takes its own row by itself when the search would be squeezed; not a hand-made flex row of tabs, search and buttons.
 - Rearrange, never hide: every desktop function is on the phone, in another place or a menu — not `display: none` below a breakpoint.
 - Breakpoints 640 · 768 · 1024 · 1280 only for the app frame; inside a page — intrinsic grids (`auto-fill, minmax`) 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.
@@ -224,7 +231,7 @@ applyTheme("light");
 The frame itself (providers, `AppShell` with `Sidebar` and the phone menu button) is built once too:
 copy it from [layouts.md](layouts.md#app-frame-once-per-app).
 
-A page with one primary action and a field frame:
+A document page (a form) — its title is in main, its header carries none:
 
 ```tsx
 import { Button, Icon, Input, PageContent } from "prime-ui-kit";

package/dist/skill/checklist.md

@@ -3,9 +3,13 @@
 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))
@@ -41,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.
 
@@ -100,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

@@ -15,9 +15,8 @@ confuse. Links: [components.md](components.md). Whole screens: [composition.md](
 | 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
@@ -124,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

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`)
 
@@ -135,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/) |
+| 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`)
 
@@ -154,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.