prime-ui-kit 0.11.1 → 0.13.0

package/dist/skill/reference/components/data-table/examples/trend.tsx

@@ -0,0 +1,85 @@
+/** Clients with revenue by month as a compact Sparkline in a cell of each row, next to the half-year total — `cell`, `width`. */
+import { DataTable, type DataTableColumn, Sparkline, type SparklinePoint } from "prime-ui-kit";
+
+type Client = { id: string; name: string; manager: string; revenue: number[] };
+type Row = Client & { trend: SparklinePoint[]; total: number };
+
+const MONTHS = ["май", "июн", "июл", "авг", "сен", "окт"];
+
+const CLIENTS: Client[] = [
+  {
+    id: "C-118",
+    name: "ООО «Северный ветер»",
+    manager: "Ольга Смирнова",
+    revenue: [184_000, 196_500, 172_300, 210_800, 238_000, 251_400],
+  },
+  {
+    id: "C-102",
+    name: "АО «Технопарк»",
+    manager: "Игорь Волков",
+    revenue: [612_000, 580_400, 545_900, 498_200, 470_000, 455_600],
+  },
+  {
+    id: "C-131",
+    name: "ООО «Гранит»",
+    manager: "Мария Орлова",
+    revenue: [96_000, 88_400, 121_700, 134_000, 129_300, 152_800],
+  },
+  {
+    id: "C-147",
+    name: "ИП Козлов",
+    manager: "Глеб Котов",
+    revenue: [27_900, 31_200, 26_800, 35_400, 33_100, 41_000],
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+// The series are built once: a new array per render would cross-fade every plot again.
+const ROWS: Row[] = CLIENTS.map((client) => ({
+  ...client,
+  trend: client.revenue.map((value, i) => ({ label: MONTHS[i] ?? "", value })),
+  total: client.revenue.reduce((sum, value) => sum + value, 0),
+}));
+
+const COLUMNS: DataTableColumn<Row>[] = [
+  { id: "name", header: "Клиент", accessor: "name", sortable: true },
+  { id: "manager", header: "Менеджер", accessor: "manager" },
+  {
+    id: "trend",
+    header: "По месяцам",
+    width: "10rem",
+    cell: (row) => (
+      <Sparkline
+        layout="compact"
+        data={row.trend}
+        label={`Выручка по месяцам, ${row.name}`}
+        formatValue={(value) => RUB.format(value)}
+      />
+    ),
+  },
+  {
+    id: "total",
+    header: "За полгода",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+export default function DataTableTrendExample() {
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ROWS}
+      getRowKey={(row) => row.id}
+      getRowLabel={(row) => row.name}
+      paging="none"
+    />
+  );
+}

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

@@ -30,7 +30,7 @@ Drawer.Root                    state and dismiss policy (no DOM)
 └─ Drawer.Content              portal + scrim + role="dialog" panel at the side
    ├─ Drawer.Guard             no DOM: holds the drawer (busy / dirty) from inside
    ├─ Drawer.Header            grid: [Icon] [Title + Description] [Actions] [close Button]
-   │  ├─ Drawer.Icon
+   │  ├─ Drawer.Icon           tone tile around an Icon, or an Avatar.Root / Thumbnail.Root with no tile
    │  ├─ Drawer.Title          <h2>
    │  ├─ Drawer.Description    <p>
    │  └─ Drawer.Actions        row of tier-s controls before the close button
@@ -82,12 +82,12 @@ No DOM, no ref. State and dismiss policy.
 `ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`. + native `<div>` props.
 
 ### Drawer.Icon
-`ref` → `HTMLSpanElement`. An `aria-hidden` 40 px tile with a tone fill.
+`ref` → `HTMLSpanElement`. An `aria-hidden` 40 px tile with a tone fill; around an `Avatar.Root` or a `Thumbnail.Root` (the record's picture) no tile — `data-media`, the avatar sized to 40 px.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Soft fill and icon color. |
-| `children` | `ReactNode` | — (required) | Icon glyph (sized to the m icon). |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Soft fill and icon color; not used around a picture. |
+| `children` | `ReactNode` | — (required) | An icon glyph (sized to the m icon), or the record's picture: an `Avatar.Root` (sized to the tile) or a `Thumbnail.Root`. |
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the tile. |
 
 ### Drawer.Title · Drawer.Description
@@ -146,7 +146,7 @@ Below 640px of viewport every size is full width and loses its corners.
 | `fill` | equal-width buttons in one row | one full-width action («Понятно») | |
 
 ### tone (Icon)
-`neutral` (default) · `accent` · `success` · `warning` · `danger` · `info` — soft tile fill and icon color, as in Modal.
+`neutral` (default) · `accent` · `success` · `warning` · `danger` · `info` — soft tile fill and icon color, as in Modal. Around the record's picture — an `Avatar.Root` or a `Thumbnail.Root` (found by element type) — there is no tile and no tone: `data-media`, the avatar sized to 40 px, so a person's or an object's card shows its picture in the header.
 
 ## States
 | State | Driven by | DOM |
@@ -206,6 +206,7 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 | [sizes.tsx](examples/sizes.tsx) | Every panel width, 360 to 800 px; below 640 px of viewport the panel takes the full width — `size`. |
 | [placement.tsx](examples/placement.tsx) | The panel slides from the right for details and from the left for filters, rounded only on the edge facing the page — `side`. |
 | [header-actions.tsx](examples/header-actions.tsx) | A record card: its status and a ⋯ menu sit in the header before the close button, one tier smaller — `Drawer.Actions`. |
+| [client-card.tsx](examples/client-card.tsx) | A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details — `Drawer.Icon`, `Avatar.Root`. |
 | [guard.tsx](examples/guard.tsx) | A form that holds the drawer from inside: after an edit Escape, the scrim and Cancel ask before discarding, the footer says so, and saving locks every way out — `Drawer.Guard`, `Drawer.Meta`. |
 | [long-content.tsx](examples/long-content.tsx) | A long body scrolls on its own while the header and the footer stay in place — `Drawer.Body`. |
 | [dismiss.tsx](examples/dismiss.tsx) | An import closes only from its buttons, and not at all while it runs — `closeOnOutsideClick`, `closeOnEscape`. |
@@ -226,4 +227,4 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 
 ## Related
 - **Built from:** [Button](../button/COMPONENT.md) (close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Drawer.Body`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Drawer.Guard` discard confirm), `Icon` (the close glyph)
-- **See also:** [Modal](../modal/COMPONENT.md) (the same header, body, footer and `Guard` in the centre), [Sheet](../sheet/COMPONENT.md) (the same parts raised from the bottom edge for a short task), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (a destructive confirm), [Sidebar](../../layout/sidebar/COMPONENT.md), [Popover](../popover/COMPONENT.md)
+- **See also:** [Modal](../modal/COMPONENT.md) (the same header, body, footer and `Guard` in the centre), [Sheet](../sheet/COMPONENT.md) (the same parts raised from the bottom edge for a short task), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (a destructive confirm), [Sidebar](../../layout/sidebar/COMPONENT.md), [Popover](../popover/COMPONENT.md), [Avatar](../avatar/COMPONENT.md) (a person's picture in `Drawer.Icon`)

package/dist/skill/reference/components/drawer/examples/client-card.tsx

@@ -0,0 +1,50 @@
+/** A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details — `Drawer.Icon`, `Avatar.Root`. */
+import { Avatar, Button, DescriptionList, Drawer } from "prime-ui-kit";
+
+const CLIENT = {
+  name: "Анна Соколова",
+  company: "ООО «Северный ветер»",
+  role: "Финансовый директор",
+  phone: "+7 495 120-44-18",
+  email: "a.sokolova@sev-veter.ru",
+  manager: "Игорь Лебедев",
+};
+
+export default function DrawerClientCardExample() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Открыть клиента
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Icon>
+            <Avatar.Root color="blue">
+              <Avatar.Fallback>АС</Avatar.Fallback>
+            </Avatar.Root>
+          </Drawer.Icon>
+          <Drawer.Title>{CLIENT.name}</Drawer.Title>
+          <Drawer.Description>{CLIENT.company}</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body>
+          <DescriptionList.Root>
+            <DescriptionList.Item label="Должность">{CLIENT.role}</DescriptionList.Item>
+            <DescriptionList.Item label="Телефон">{CLIENT.phone}</DescriptionList.Item>
+            <DescriptionList.Item label="Почта">{CLIENT.email}</DescriptionList.Item>
+            <DescriptionList.Item label="Менеджер">{CLIENT.manager}</DescriptionList.Item>
+          </DescriptionList.Root>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close>
+            <Button.Root variant="outline" tone="neutral">
+              Закрыть
+            </Button.Root>
+          </Drawer.Close>
+          <Button.Root>Написать</Button.Root>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}

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

@@ -14,6 +14,7 @@
 - One choice among options with a heading → [Radio](../radio/COMPONENT.md) `Radio.Group label`, a [SegmentedControl](../segmented-control/COMPONENT.md) or [ButtonGroup](../button-group/COMPONENT.md) `label`.
 - A bounded block with a surface (a settings panel) → [Card](../card/COMPONENT.md) `Card.Root`; a Fieldset inside it groups the fields.
 - A page section with a title and actions → [PageContent](../page-content/COMPONENT.md) sections.
+- A group of settings with a title and a trailing control (a «Сбросить» button, a master switch) → `Card.Root variant="panel"` with `Card.Header` (`Card.Title` + the control) and the Fieldset in `Card.Body`, named by the title (`aria-labelledby`), as the settings page pattern names its Fieldset by the section heading.
 - A single field's label → the field's own `label`.
 
 ## Import

package/dist/skill/reference/components/file-upload/COMPONENT.md

@@ -33,9 +33,11 @@
 
 ## Import
 ```tsx
-import { FileUpload, type FileUploadFile, useUploadQueue } from "prime-ui-kit";
+import { FileUpload, type FileUploadFile, formatFileSize, useUploadQueue } from "prime-ui-kit";
 ```
 
+`formatFileSize(bytes)` writes a size the way the rows do («820 КБ», «1,2 МБ»): use it wherever a file size appears beside the kit's.
+
 ## Anatomy
 ```
 FileUpload.Root                 field frame: label → trigger → files → hint | error
@@ -66,9 +68,9 @@ FileUpload.Item                 a file row the set does not draw (own actions, a
 ```
 The built-in zone body (icon, `labels.title`, `labels.description` and a decorative soft Button) renders when there are no children; the built-in button content is the paperclip and `labels.browse`. The set draws its rows and tiles itself from `value` and `queue`; the `Item` parts are for a row it does not draw (a download button, a report being prepared).
 
-**One set of files.** The files are application data: `value` (`{ id, name, size?, type?, src?, alt? }`, controlled, or `defaultValue`) in its order, then every upload of `queue` that is not in it, in the queue's order. A file of `value` whose `id` is an upload's id shows that upload's state. `type` is the MIME type (without it the kind — picture, video, other — is read from the name's extension); `src` is a picture or a video; `alt` is spoken in place of the name and never drawn. Every change — a reorder by drag or Alt + ← / →, a removal, files added to the queue — goes through `onValueChange` with the whole new list, uploads included; the queue follows (a removed upload leaves it and stops, a moved one keeps its order through `queue.move`). Without `value` and `defaultValue` the set is the queue alone: an uncontrolled list of uploads that reorders through `queue.move`. Return a promise from `onValueChange` to save on a server: the touched files wait busy, a moved file or new files stand in their new places meanwhile, a removed file stays until the answer. Resolve and the change stands (a controlled owner applies `value` before resolving); reject and the set goes back and `labels.changeFailed` is announced.
+**One set of files.** The files are application data: `value` (`{ id, name, size?, type?, src?, alt?, href? }`, controlled, or `defaultValue`) in its order, then every upload of `queue` that is not in it, in the queue's order. A file of `value` whose `id` is an upload's id shows that upload's state. `type` is the MIME type (without it the kind — picture, video, other — is read from the name's extension); `src` is a picture or a video; `alt` is spoken in place of the name and never drawn. `href` is the file's address: the row's name (a neutral `LinkButton`) or the whole tile under its chips becomes a link that opens the file in a new tab — the server's `Content-Disposition` decides open or download. Every change — a reorder by drag or Alt + ← / →, a removal, files added to the queue — goes through `onValueChange` with the whole new list, uploads included; the queue follows (a removed upload leaves it and stops, a moved one keeps its order through `queue.move`). Without `value` and `defaultValue` the set is the queue alone: an uncontrolled list of uploads that reorders through `queue.move`. Return a promise from `onValueChange` to save on a server: the touched files wait busy, a moved file or new files stand in their new places meanwhile, a removed file stays until the answer. Resolve and the change stands (a controlled owner applies `value` before resolving); reject and the set goes back and `labels.changeFailed` is announced.
 
-**The queue.** `useUploadQueue({ upload, concurrency })` owns the uploads: `upload(file, { signal, onProgress })` is yours and returns a Promise of the server's answer; `concurrency` files (3 by default) go at once and the rest wait as `queued`. It returns `{ items, add, retry, remove, clear, move }`. An item is `{ id, file, status, progress, error?, result?, preview? }`: `status` is `queued | loading | done | failed` — the kit's transfer states (`TransferState` without `remote`), so an item maps onto a message part as `transfer={item.status}`; `progress` is 0…1; `error` the rejection's message; `result` what `upload` resolved with; `preview` a local object URL of an image or video file (by MIME type, else by the name's extension). `add(files)` returns the new items; `remove(id)` aborts an upload in flight and revokes its preview; `clear()` takes every file out; `move(id, beforeId)` puts a file in front of another (`null` = last) — the order FileUpload tiles and the Composer tray reorder. `queue` takes `useUploadQueue(…)` or any object of that shape (`items`, `retry`, `remove`, optional `add` and `move`). Hand it to the root and picked or dropped files go into it (only with `add`; `onFilesChange` is not called then) and enter the set at once as their local previews, their `id` the queue item's id:
+**The queue.** `useUploadQueue({ upload, concurrency })` owns the uploads: `upload(file, { id, signal, onProgress })` is yours and returns a Promise of the server's answer; run after-upload work (attach the file to a record, save the set) inside `upload` after the request resolves — `context.id` is the item, and a rejection of that work fails it; `concurrency` files (3 by default) go at once and the rest wait as `queued`. It returns `{ items, add, retry, remove, clear, move }`. An item is `{ id, file, status, progress, error?, result?, preview? }`: `status` is `queued | loading | done | failed` — the kit's transfer states (`TransferState` without `remote`), so an item maps onto a message part as `transfer={item.status}`; `progress` is 0…1; `error` the rejection's message; `result` what `upload` resolved with; `preview` a local object URL of an image or video file (by MIME type, else by the name's extension). `add(files)` returns the new items; `remove(id)` aborts an upload in flight and revokes its preview; `clear()` takes every file out; `move(id, beforeId)` puts a file in front of another (`null` = last) — the order FileUpload tiles and the Composer tray reorder. `queue` takes `useUploadQueue(…)` or any object of that shape (`items`, `retry`, `remove`, optional `add` and `move`). Hand it to the root and picked or dropped files go into it (only with `add`; `onFilesChange` is not called then) and enter the set at once as their local previews, their `id` the queue item's id:
 
 ```tsx
 const queue = useUploadQueue({ upload: sendFile, concurrency: 2 });
@@ -106,7 +108,7 @@ A rejection of `upload` fails the file with its message as the reason; retry que
 | `trigger` | `"dropzone" \| "button" \| "tile"` | `"dropzone"` | `dropzone`: the drop area. `button`: a compact picker button, no zone and no drop (a composer paperclip). `tile`: an add tile as the last cell of the files. |
 | `variant` | `"dashed" \| "solid"` | `"dashed"` | The look of the drop zone: `dashed` shows the drop line; `solid` keeps only the fill (cards, modals). |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the zone padding, icon, title, button, label, hint and the rows. Without it the tier of its host (a form, a panel), else `m`. Tiles keep their own size. |
-| `value` | `readonly FileUploadFile[]` | — | Files in their order (controlled): `{ id, name, size?, type?, src?, alt? }` — on the server, or uploads of `queue` by their ids. `type` is the MIME type; `src` a picture or a video; `alt` is spoken in place of the name. |
+| `value` | `readonly FileUploadFile[]` | — | Files in their order (controlled): `{ id, name, size?, type?, src?, alt?, href? }` — on the server or uploads of `queue` by id. `src`: picture or video; `alt` spoken for the name; `href` links name or tile to the file. |
 | `defaultValue` | `readonly FileUploadFile[]` | `[]` | Initial files (uncontrolled). |
 | `onValueChange` | `(value: readonly FileUploadFile[]) => void \| Promise<void>` | — | The set changed (a reorder, a removal, files added to `queue`), with the whole new list. Return the save's promise: the touched files wait busy, a rejection puts the set back and is announced. |
 | `queue` | `Pick<UploadQueue, "items" \| "retry" \| "remove"> & Partial<Pick<UploadQueue, "add" \| "move">>` | — | The uploads: `useUploadQueue(…)` or an object of that shape. Each file on its way shows its upload; removing a file aborts it. With `add`, picked and dropped files go into the queue. |
@@ -153,7 +155,7 @@ A rejection of `upload` fails the file with its message as the reason; retry que
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` | `readonly FileUploadFile[]` | — | Files in their order (controlled): `{ id, name, size?, type?, src?, alt? }` — on the server, or uploads of `queue` by their ids. `type` is the MIME type; `src` a picture or a video; `alt` is spoken in place of the name. |
+| `value` | `readonly FileUploadFile[]` | — | Files in their order (controlled): `{ id, name, size?, type?, src?, alt?, href? }` — on the server or uploads of `queue` by id. `src`: picture or video; `alt` spoken for the name; `href` links name or tile to the file. |
 | `defaultValue` | `readonly FileUploadFile[]` | `[]` | Initial files (uncontrolled). |
 | `onValueChange` | `(value: readonly FileUploadFile[]) => void \| Promise<void>` | — | The set changed (a reorder, a removal, files added to `queue`), with the whole new list. Return the save's promise: the touched files wait busy, a rejection puts the set back and is announced. |
 | `queue` | `Pick<UploadQueue, "items" \| "retry" \| "remove"> & Partial<Pick<UploadQueue, "add" \| "move">>` | — | The uploads: `useUploadQueue(…)` or an object of that shape. Each file on its way shows its upload; removing a file aborts it. With `add`, picked and dropped files go into the queue. |
@@ -208,7 +210,7 @@ A rejection of `upload` fails the file with its message as the reason; retry que
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `upload` | `(file: File, context: { signal: AbortSignal; onProgress: (progress: number) => void }) => Promise<TResult>` | — (required) | Sends one file. Report the share sent with `onProgress` (0…1), stop on `signal`; resolve with the server's answer (kept as `result`), reject to fail the item with the rejection's message as the reason. |
+| `upload` | `(file: File, context: { id: string; signal: AbortSignal; onProgress: (progress: number) => void }) => Promise<TResult>` | — (required) | Sends one file: progress through `onProgress` (0…1), stop on `signal`, resolve with the answer (`result`), reject to fail. `id` is the item: after-upload work runs here once the request resolves. |
 | `concurrency` | `number` | `3` | How many files upload at once; the rest wait as `queued`. |
 
 ## Variants
@@ -330,6 +332,7 @@ Also `data-size`, `data-variant` on the zone, `data-size` on Item, `data-status`
 - Icon-only buttons in `ItemActions` need an `aria-label` with the file name; the set names its own («Убрать …», «Повторить загрузку: …»).
 - A row in flight has its progress bar named by the file; a polite live region speaks a file that finished, the reason of one that failed, a removed file, the new cover after a reorder («Обложка: name», `labels.coverChanged`) and a refused change (`labels.changeFailed`); a file whose change is saved has `aria-busy`.
 - Tiles are `<li>` of a Dnd.Sortable `<ul>`, named «Фото 2: склад.jpg · Загрузка 45%» («Видео …», «Файл …»; the file's `alt` in place of its name), with `aria-roledescription` and `aria-keyshortcuts`; the position and format on a tile are hidden (the name says them); the disk is a circle button («Отменить загрузку: …» described by the state, «В очереди» / «Загрузка 45%», `aria-busy`, its ring `aria-hidden`; on a failure «Повторить загрузку: …» described by the reason); without a remove handler the disk is no button but a `progressbar` (`aria-valuenow`) while the file is queued or uploading; Dnd's live region announces moves.
+- A file with `href`: in a row its name is a link (`<a target="_blank">`, named by the name); a tile holds a link over its middle named «Открыть name» (`labels.open`), a Tab stop after the tile itself.
 - Touch: a tile drag starts after a hold; the buttons on a tile are always shown, never hover-only.
 
 ### Labels
@@ -355,6 +358,7 @@ Also `data-size`, `data-variant` on the zone, `data-size` on Item, `data-status`
 | `cancel` | `"Отменить загрузку: {name}"` | Name of the disk that cancels a tile's upload in flight. |
 | `retry` | `"Повторить загрузку: {name}"` | Name of the retry button of a failed row (the retry disk of a failed tile). |
 | `remove` | `"Убрать {name}"` | Name of the remove button of a file (it also stops an upload). |
+| `open` | `"Открыть {name}"` | Name of a tile's link to the file (`href`); a row's link is named by the file name. |
 | `removed` | `"{name}: убран"` | Live region: a file was removed. |
 | `coverChanged` | `"Обложка: {name}"` | Live region: a reorder put another file first, the new cover (`cover`). |
 | `changeFailed` | `"Не удалось сохранить изменение, файлы на прежних местах"` | Live region: the `onValueChange` promise of a change rejected and the set is as it was. |
@@ -367,7 +371,7 @@ Also `data-size`, `data-variant` on the zone, `data-size` on Item, `data-status`
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | Documents of a deal: a drop zone, the files already attached as rows, and new files uploading through a queue with progress, a reason and a retry — `label`, `hint`, `multiple`, `defaultValue`, `queue`. |
+| [overview.tsx](examples/overview.tsx) | Documents of a deal: a drop zone, the files already attached as rows whose names open them, and new files uploading through a queue with progress, a reason and a retry — `label`, `hint`, `multiple`, `defaultValue`, `href`, `queue`. |
 | [variants.tsx](examples/variants.tsx) | How files are added: the dashed drop zone, the zone with only its fill for cards and modals, the compact picker button and the add tile after the files — `variant`, `trigger`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier of the zone and of its file rows: padding, icon, button, text and the format badge follow it — `size`. |
 | [states.tsx](examples/states.tsx) | A default zone, a disabled one whose files are read-only and an invalid one without a message — `disabled`, `invalid`. |
@@ -403,5 +407,5 @@ Also `data-size`, `data-variant` on the zone, `data-size` on Item, `data-status`
 - Styling a tile from an ancestor (`.gallery li`) → the carried clone is portalled to `<body>` and loses it.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`, `Description`), [Button](../button/COMPONENT.md) (browse button, `trigger="button"`, row and tile actions, the tile's upload disk `shape="circle"` `variant="shade"`), [Badge](../badge/COMPONENT.md) (`FormatBadge`), [Thumbnail](../thumbnail/COMPONENT.md) (`ItemPreview`, video tiles), [ProgressBar](../progress-bar/COMPONENT.md) (`ItemProgress`), [Dnd](../dnd/COMPONENT.md) and [ScrollContainer](../scroll-container/COMPONENT.md) (tiles), the shared attachment tile (`src/internal/attachmentTile`) and transfer disk (`src/internal/transferDisk`), `Icon`; the files of `queue` come from `useUploadQueue`
+- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`, `Description`), [LinkButton](../link-button/COMPONENT.md) (a row's name with `href`), [Button](../button/COMPONENT.md) (browse button, `trigger="button"`, row and tile actions, the tile's upload disk `shape="circle"` `variant="shade"`), [Badge](../badge/COMPONENT.md) (`FormatBadge`), [Thumbnail](../thumbnail/COMPONENT.md) (`ItemPreview`, video tiles), [ProgressBar](../progress-bar/COMPONENT.md) (`ItemProgress`), [Dnd](../dnd/COMPONENT.md) and [ScrollContainer](../scroll-container/COMPONENT.md) (tiles), the shared attachment tile (`src/internal/attachmentTile`) and transfer disk (`src/internal/transferDisk`), `Icon`; the files of `queue` come from `useUploadQueue`
 - **See also:** [Composer](../composer/COMPONENT.md) (its attachment tray is `FileUpload.Queue layout="strip"`), [LinkButton](../link-button/COMPONENT.md) (an inline browse link in a custom body), [Avatar](../avatar/COMPONENT.md), [Thumbnail](../thumbnail/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md)

package/dist/skill/reference/components/file-upload/examples/overview.tsx

@@ -1,4 +1,4 @@
-/** Documents of a deal: a drop zone, the files already attached as rows, and new files uploading through a queue with progress, a reason and a retry — `label`, `hint`, `multiple`, `defaultValue`, `queue`. */
+/** Documents of a deal: a drop zone, the files already attached as rows whose names open them, and new files uploading through a queue with progress, a reason and a retry — `label`, `hint`, `multiple`, `defaultValue`, `href`, `queue`. */
 import { FileUpload, type FileUploadFile, type UploadContext, useUploadQueue } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -6,8 +6,19 @@ import styles from "./examples.module.css";
 const MAX_SIZE = 10 * 1024 * 1024;
 
 const ATTACHED: readonly FileUploadFile[] = [
-  { id: "deal-contract", name: "Договор № 48-П.pdf", size: 1_840_000, type: "application/pdf" },
-  { id: "deal-estimate", name: "Смета.xlsx", size: 240_000 },
+  {
+    id: "deal-contract",
+    name: "Договор № 48-П.pdf",
+    size: 1_840_000,
+    type: "application/pdf",
+    href: "https://files.example.com/deals/48-P/contract.pdf",
+  },
+  {
+    id: "deal-estimate",
+    name: "Смета.xlsx",
+    size: 240_000,
+    href: "https://files.example.com/deals/48-P/estimate.xlsx",
+  },
 ];
 
 /** A stand-in for the server: sends a file in a few steps and answers with its address. */

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

@@ -15,6 +15,7 @@
 - Records compared by many attributes, sorted and selected → use [DataTable](../data-table/COMPONENT.md).
 - Work items moved between statuses → use [Kanban](../kanban/COMPONENT.md).
 - Picking a date or a range → use [Datepicker](../datepicker/COMPONENT.md).
+- Slots within a day (hours, meeting-room bookings, appointments) → not covered: the chart's unit is a calendar day, dates snap to local midnight and the finest zoom is a day.
 
 ## Import
 ```tsx
@@ -29,8 +30,8 @@ Gantt                          surface (layer of the ladder), size container
    └─ role="grid"
       ├─ head row (sticky)     corner (sticky) · axis: top tier (months / years) over bottom tier (days / weeks / months), today chip
       └─ rows                  backdrop: weekends, column lines, today line
-         ├─ rowheader (sticky) renderRowAvatar · renderRow (or getRowLabel)
-         └─ gridcell           bars in lanes: <button> + Tooltip, grips at both ends, diamond for a milestone
+         ├─ rowheader (sticky) renderRowAvatar · renderRow (or getRowLabel); inside an <a> with getRowHref
+         └─ gridcell           bars in lanes: <button> + Tooltip (title, dates, renderBarTooltip), grips at both ends, diamond for a milestone
 ```
 
 ## API
@@ -48,6 +49,9 @@ Gantt                          surface (layer of the ladder), size container
 | `getRowBars` | `(row: Row) => Bar[]` | — (required) | Bars of a row (`GanttBar`); bars that overlap in time stack into lanes and grow the row. |
 | `renderRow` | `(row: Row) => ReactNode` | — | First-column content instead of the label (a name with a role or a code). |
 | `renderRowAvatar` | `(row: Row) => ReactNode` | — | A picture before the row content (an `Avatar`). Below 36rem of chart width the column keeps only it; the name stays for assistive tech. |
+| `getRowHref` | `(row: Row) => string` | — | The row header is a link: a real `<a>` fills the first column and is the row's stop in the grid, so a click, ⌘/Ctrl-click, a middle click and «open in new tab» work on it; Space follows it like Enter. |
+| `onRowClick` | `(row: Row, event: GanttRowClickEvent) => void` | — | Opens a row in place (a profile in a Drawer): a click on its header, Enter or Space; never from a control inside it. With `getRowHref` it gets plain clicks: `event.preventDefault()` routes in the app. |
+| `renderBarTooltip` | `(bar: Bar, row: Row) => ReactNode` | — | Extra lines of a bar's tooltip (a client, hours, an owner), under its title and the dates line — those always stay, the dates and the duration are what the bar means on the axis. |
 | `scale` | `"day" \| "week" \| "month"` | — | Zoom, controlled: a column per day (months over days), per week (months over weeks) or per month (years over months). |
 | `defaultScale` | `"day" \| "week" \| "month"` | `"week"` | Initial zoom, uncontrolled. |
 | `onScaleChange` | `(scale: GanttScale) => void` | — | The zoom switch changed. The day in the middle of the view stays in the middle. |
@@ -85,7 +89,7 @@ One bar of `getRowBars`: data, not a part. Dates are calendar days with an exclu
 ### scale
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `day` | a column per day (40 px at `m`), months over day numbers, weekends shaded, today's number in accent | shifts, bookings, a sprint | |
+| `day` | a column per day (40 px at `m`), months over day numbers, weekends shaded, today's number in accent | daily shifts, bookings by the day, a sprint | |
 | `week` | a day is 16 px at `m`, months over week ranges («6–12»), weekends shaded | a quarter of projects, team occupancy | yes |
 | `month` | a day is 4 px, years over month names, no weekend wash | a yearly roadmap | |
 
@@ -133,6 +137,7 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | pending | `onBarChange` returned a Promise | `data-pending`, `aria-busy`, a Spinner; reject → the bar glides back |
 | loading | `loading` without rows | Skeleton rows with one or two bars each in a real bar's height, radius and lane, under the column and today lines; `aria-busy`, status `labels.loading`; data cross-fades in |
 | empty | `rows` empty | a compact `EmptyPage` (`empty` or `labels.empty`), cross-faded in |
+| row opens | `onRowClick` / `getRowHref` | `data-clickable` on the row header: a pointer cursor and a hover wash under its content; with `getRowHref` the content is an `<a>` whose hit area fills the header |
 | scrolled | the axis hides content at an edge | `data-overflow-start` / `data-overflow-end`: an edge shadow from the pinned column / at the end |
 
 ## Layout & spacing
@@ -143,6 +148,8 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 - Virtualization: rows render only in view (plus an overscan) at offsets computed from their lanes and corrected by measuring, so the total height and the scrollbar stay exact; header cells, period lines and bars render only inside the visible time window plus a screen on each side; weekends and day / week column lines are CSS patterns, not elements. A focused, dragged, pending or new bar stays rendered wherever the chart scrolls.
 - Editing precision: a move, a resize and a drawing snap to whole days at every zoom (at the month zoom a day is 4 px, so the snap holds a day until the pointer clearly leaves it); hold Alt to snap to the zoom's week or month. A bar is at least one day long: a resize past the opposite edge stops there and never flips. On touch a long press picks a bar up, then it drags like a pointer.
 - Creating: on empty space the cursor is a crosshair and, on pointer devices, the cell under it is washed with a «+». Drag across a row to draw a range in days, double-click (or long-press on touch) for one unit of the zoom; a drag after the long press draws days. While drawing, a ghost with a dates and duration tooltip follows the pointer. Without `onBarCreate` (or with `readOnly`) nothing can be created and empty space shows no create cursor. Near the edges of the axis a drag, a resize and a drawing scroll the chart.
+- Tooltip: the bar's title, then its dates · duration · progress; `renderBarTooltip` adds lines under them (a client, planned hours) and never replaces them — the dates are what the bar means on the axis, and the same tooltip shows the new dates while dragging.
+- A legend of bar colours goes in `toolbar`: a row of `Badge.Root color` + `Badge.Dot` with the category name, one per hue the bars use; the toolbar wraps it. Say the category in the bar label or the tooltip too, never only by colour.
 - The default axis covers every bar and today with a unit of room on both sides; pass `range` for a fixed period.
 - The chart opens with today a third into the view; «Сегодня» and the arrow keys scroll only the chart's scroller, never the page.
 - A row grows by a lane for every overlapping bar: lanes are packed greedily by start date.
@@ -157,7 +164,7 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | `←` · `→` | Along the row: its header, then its bars in time order. A row off screen is rendered and scrolled into view. |
 | `↑` · `↓` | From a bar, the bar nearest in time in the row above / below (rows without bars are skipped); from a row header, the next row's header, empty rows too. |
 | `Home` · `End` | First / last bar of the row; with Ctrl, of the chart. |
-| `Enter` · `Space` | Selects the bar (`onSelect`). |
+| `Enter` · `Space` | On a bar: selects it (`onSelect`). On a row header: opens the row (`onRowClick`) or follows its link (`getRowHref`). |
 | `Shift + ←` · `Shift + →` | Moves the bar by one day, at every zoom. |
 | `Shift + Alt + ←` · `Shift + Alt + →` | Moves the bar by the zoom's unit (a week, a month). |
 | `Ctrl + Shift + ←` · `Ctrl + Shift + →` | Shortens / lengthens the bar by one day (⌘ on macOS); it stops at one day. |
@@ -172,6 +179,7 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 - While `onBarChange` runs the bar and the grid are `aria-busy`. Loading without rows hides the skeletons and announces `labels.loading`.
 - The axis tiers, weekends and the today line are `aria-hidden`: the dates live in the bar names.
 - A row header is a focusable cell; with `onBarCreate` it is described by `labels.createHint` and has `aria-keyshortcuts="N"`. A new bar is announced, a refused one with `labels.createFailed`; the ghost is `aria-hidden`.
+- With `getRowHref` the header's stop in the grid is a real `<a>` named by the row's content inside the `rowheader`: a click, ⌘/Ctrl-click, a middle click and «open in new tab» work, Space follows it like Enter, and the arrows rove from it as from any cell. With `onRowClick` alone the header itself opens the row by a click, Enter or Space; a click on a control inside it never does.
 - Rows are virtualized: only the rows in view are in the DOM, while `aria-rowcount` on the grid and `aria-rowindex` on each row keep the full count.
 
 ### Labels
@@ -206,6 +214,7 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | [sizes.tsx](examples/sizes.tsx) | Every tier: one-lane rows from 28 to 52 px, bars, header and toolbar controls of the tier — `size`. |
 | [occupancy.tsx](examples/occupancy.tsx) | Team occupancy by day: people with avatars, projects that overlap into lanes, locked vacations, a saved move held busy and a conflicting one gliding back, new work drawn on a free day — `renderRowAvatar`, `renderRow`, `onBarChange`, `onBarCreate`, `onSelect`, `readOnly`. |
 | [large.tsx](examples/large.tsx) | Two thousand people over two years stay fast: only the rows and days in view are rendered, keyboard focus reaches any row, and new bars are drawn on empty space — `rows`, `range`, `scrollHeight`, `onBarCreate`. |
+| [row-link.tsx](examples/row-link.tsx) | A team by client: each row header is a link to the person's profile that a plain click opens in place, each tooltip adds the client and the planned hours under the dates, and a legend of client hues stands in the toolbar — `getRowHref`, `onRowClick`, `renderBarTooltip`. |
 | [states.tsx](examples/states.tsx) | Skeleton rows in the chart's geometry while it loads, an empty period and a plan you may only look at — `loading`, `empty`, `readOnly`. |
 | [controlled.tsx](examples/controlled.tsx) | The zoom owned by the page: presets in the toolbar and the built-in switch change one state — `scale`, `onScaleChange`. |
 | [narrow.tsx](examples/narrow.tsx) | At 360 px the first column keeps only the avatars, the toolbar moves to its own row and the axis scrolls under the pinned column — `renderRowAvatar`. |
@@ -215,7 +224,8 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 - An inclusive `end` (`{ start: 3 July, end: 3 July }` for a one-day task) → that is a milestone; `end` is the day after the last one.
 - Status only by bar color → put it into the label too («Отпуск», «Просрочено»).
 - Dates with times expecting hour precision → the chart works in calendar days.
-- A `<div onClick>` inside `renderRow` to open a bar's record → use `onSelect`; the row header takes focus but not a press.
+- A `<div onClick>` inside `renderRow` to open a bar's or a row's record → use `onSelect` for a bar and `onRowClick` / `getRowHref` for a row: they work from the keyboard too.
+- Replacing the dates in the tooltip with your own text → `renderBarTooltip` adds lines under them; the dates stay.
 - Wrapping the chart in a Card → it is a surface itself; place it directly in the page or a Card body only as the card's one content.
 - Expecting the page to scroll to today → «Сегодня» scrolls only the chart.
 

package/dist/skill/reference/components/gantt/examples/row-link.tsx

@@ -0,0 +1,96 @@
+/** A team by client: each row header is a link to the person's profile that a plain click opens in place, each tooltip adds the client and the planned hours under the dates, and a legend of client hues stands in the toolbar — `getRowHref`, `onRowClick`, `renderBarTooltip`. */
+import { addDays, startOfToday, startOfWeek } from "date-fns";
+import { Badge, Gantt, type GanttBar, type PaletteColor, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+type ClientId = "granit" | "tekhnostil" | "kvartal";
+
+type Work = GanttBar & { client: ClientId; hours: number };
+
+type Person = { id: string; name: string; bars: Work[] };
+
+const CLIENTS: Record<ClientId, { name: string; color: PaletteColor }> = {
+  granit: { name: "ООО «Гранит»", color: "teal" },
+  tekhnostil: { name: "АО «Техностиль»", color: "blue" },
+  kvartal: { name: "ООО «Зелёный квартал»", color: "pink" },
+};
+
+const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
+
+const work = (
+  id: string,
+  label: string,
+  client: ClientId,
+  from: number,
+  to: number,
+  hours: number,
+): Work => ({
+  id,
+  label,
+  client,
+  hours,
+  color: CLIENTS[client].color,
+  start: addDays(WEEK, from),
+  end: addDays(WEEK, to),
+});
+
+const TEAM: Person[] = [
+  {
+    id: "kotova",
+    name: "Анна Котова",
+    bars: [
+      work("k-1", "Обследование процессов", "granit", -2, 4, 32),
+      work("k-2", "ТЗ на интеграцию", "tekhnostil", 5, 12, 40),
+    ],
+  },
+  {
+    id: "gordeev",
+    name: "Илья Гордеев",
+    bars: [
+      work("g-1", "Интеграция с 1С", "tekhnostil", 0, 9, 56),
+      work("g-2", "Обмен с банком", "kvartal", 10, 16, 36),
+    ],
+  },
+  {
+    id: "belova",
+    name: "Ольга Белова",
+    bars: [
+      work("b-1", "Настройка ролей", "granit", 1, 6, 24),
+      work("b-2", "Обучение пользователей", "kvartal", 8, 13, 20),
+    ],
+  },
+];
+
+export default function GanttRowLinkExample() {
+  const [opened, setOpened] = React.useState<string | null>(null);
+
+  return (
+    <Gantt<Person, Work>
+      aria-label="Работы команды по клиентам"
+      rows={TEAM}
+      getRowKey={(person) => person.id}
+      getRowLabel={(person) => person.name}
+      getRowBars={(person) => person.bars}
+      getRowHref={(person) => `/team/${person.id}`}
+      onRowClick={(person, event) => {
+        // A client-side router goes here (navigate(href)); the page itself never reloads.
+        event.preventDefault();
+        setOpened(person.name);
+      }}
+      renderBarTooltip={(bar) => `${CLIENTS[bar.client].name} · ${bar.hours} ч по плану`}
+      toolbar={
+        <>
+          {(Object.keys(CLIENTS) as ClientId[]).map((client) => (
+            <Badge.Root key={client} color={CLIENTS[client].color}>
+              <Badge.Dot />
+              {CLIENTS[client].name}
+            </Badge.Root>
+          ))}
+          <Typography as="span" variant="body-s" tone="muted" aria-live="polite">
+            {opened ? `Открыт профиль: ${opened}` : null}
+          </Typography>
+        </>
+      }
+    />
+  );
+}

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

@@ -37,7 +37,7 @@ Kanban.Root                          board: horizontal strip of columns, its own
       │  ├─ description              muted line under the title (`column.description`)
       │  └─ meta                     the stage's figures (`renderColumnMeta(column)`)
       └─ <ul> (Dnd.Sortable)         own vertical scroll; Skeleton cards while loading; EmptyPage (Dnd `empty`) when empty
-         └─ Kanban.Item              <li> card from renderItem(item)
+         └─ Kanban.Item              <li> card from renderItem(item); with getItemHref an <a> covers it
             ├─ Kanban.ItemHeader     optional top row over a faint hairline: key · priority (or a full-width Thumbnail cover)
             ├─ Kanban.ItemTitle      title, up to three lines
             ├─ Kanban.ItemDescription  muted meta line: id, due date
@@ -68,12 +68,14 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | `defaultColumnOrder` | `readonly string[]` | `the order of `columns`` | Initial column ids in their order (uncontrolled). |
 | `onColumnOrderChange` | `(order: readonly string[], move: KanbanColumnMove) => void \| Promise<void>` | — | A column moved: the new order, then `{ id, index }` to save. Return the save's promise: the column waits busy in its new place; a rejection glides it back. |
 | `renderItem` | `(item: T) => ReactNode` | — (required) | Renders one card; return a `Kanban.Item`. |
+| `getItemHref` | `(item: T) => string` | — | The card is a link: a real `<a>` named by `getLabel` covers it and is its tab stop — a click, ⌘/Ctrl-click, a middle click, a new tab. A press on it still drags the card; a drag never follows it. |
+| `onItemClick` | `(item: T, event: KanbanItemClickEvent) => void` | — | Opens a card in place (a Drawer): a click, Enter or Space; never from a control inside it or after a drag. With `getItemHref` it gets plain clicks: `event.preventDefault()` routes in the app. |
 | `renderColumnActions` | `(column: KanbanColumn) => ReactNode` | — | Trailing actions of a column header (add a card, a menu); kit controls inside take the `s` tier. |
 | `renderColumnMeta` | `(column: KanbanColumn) => ReactNode` | — | The meta line under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»). |
 | `canDrop` | `(id: string, columnId: string) => boolean \| string` | — | A workflow rule: refuses card `id` in column `columnId` — `false`, or a string that says why (spoken and shown under the carried card). |
 | `variant` | `"well" \| "plain"` | `"well"` | `well`: every column is a filled well with its cards inside. `plain`: no wells — a filled header plate and wider cards carry the column. |
 | `loading` | `boolean` | `false` | Columns show skeleton cards in the card geometry; the cards cross-fade in when it turns off. |
-| `disabled` | `boolean` | `false` | Read-only board: no drag, no keyboard moves, no column grips; clicks on cards still work. |
+| `disabled` | `boolean` | `false` | Read-only board: no drag, no keyboard moves, no column grips; `onItemClick` and `getItemHref` still open cards. |
 | `labels` | `Partial<KanbanLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "defaultValue">` | — | `className` (the board height), `aria-label` and the other div attributes. |
 
@@ -83,7 +85,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `disabled` | `boolean` | `false` | This card cannot be dragged or moved. |
-| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "id">` | — | `children` (the card parts), `className`, `onClick` and the other attributes. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "id">` | — | `children` (the card parts), `className` and the other attributes; `onClick` / `onKeyDown` run before `onItemClick` opens the card — `preventDefault()` keeps it closed. |
 
 ### Kanban.ItemHeader
 `ref` → `HTMLDivElement`. Optional top row of a card: the key or project at the start, the last child (a priority `Badge`, an assignee) at the end.
@@ -154,6 +156,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | loading | `loading` | `aria-busy` and `data-loading` on the root; `Skeleton` cards; `Crossfade` swaps them for the cards |
 | disabled | `disabled` / `Kanban.Item disabled` | `data-disabled` on the root / card; no `aria-roledescription`, no shortcuts, no column grips |
 | saving | `onValueChange` / `onColumnOrderChange` returned a pending promise | the card (column) stays in its new place with `aria-busy` and `data-pending`; a card's content quiets to 0.6 under a centred `Spinner`, a column's heading quiets and a spinner stands in for its grip; it does not move again until the answer |
+| opens | `onItemClick` / `getItemHref` | `data-clickable` (in place) or `data-link` (a link over the card, its focus ring drawn on the card); a card that opens lifts on hover on a read-only board too |
 | refused save | the promise rejected | the card glides back to its old column and place (every card it pushed aside glides too), a column glides back in the strip; `labels.moveFailed` / `labels.columnMoveFailed` is announced |
 
 Motion: the hover lift (shadow, the card rises above its neighbours) and the empty slot fade (`fast`, `standard`); a card dropped under the mouse lands straight into its hover lift (`data-dnd-hover`); the swap from skeletons is `Crossfade`; drag motion is Dnd's (lift, gap, glide, landing); a saving card or column quiets (`fast`, both ways) and its spinner enters (`enterMotion`); a refused save glides back (`base`), never jumps. Under `prefers-reduced-motion` all of it is off.
@@ -178,6 +181,7 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | Key | Action |
 |---|---|
 | `Tab` | Moves through the cards, column by column. |
+| `Enter` · `Space` | Opens the focused card (`onItemClick`) or follows its link (`getItemHref`). |
 | `Alt + ↑` · `Alt + ↓` | Moves the card one place inside its column. |
 | `Alt + ←` · `Alt + →` | On a card: moves it to the neighbouring column at the same row (or its end). On a column grip: moves the column one place. Focus follows. The direction follows the writing direction (`dir="rtl"`: ← goes forward). |
 | `Escape` | Cancels a drag in flight. |
@@ -187,6 +191,7 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - The column grip is a button named «Переместить колонку «…»» with `aria-keyshortcuts`; a keyboard column move is announced with its position («Колонка «…»: позиция 2 из 4», `labels.column`). A locked column has a lock named «Закреплено» instead.
 - A live region (`role="status"`) announces grabbed, dropped, «position N of M», a move to another column by its title and a refusal with its reason (`labels`, Dnd's labels).
 - The count is spoken as text («Карточек: 3 из 5»), not only by colour; a full column also reads `count / limit`.
+- With `getItemHref` a real `<a>` named by `getLabel` covers the card and is its tab stop: a click, ⌘/Ctrl-click, a middle click and «open in new tab» work anywhere on the card, Space follows it like Enter, Alt + arrows move the card from it and a press on it drags the card; the release of a drag never follows it. Controls inside the card stand above the link. With `onItemClick` alone the card opens by a click, Enter or Space; a control inside the card never opens it, and a card that opens stays a tab stop on a `disabled` board.
 - Touch: a drag starts after a hold; a finger that moves first scrolls the board.
 - While loading the root has `aria-busy`; skeletons are hidden from assistive tech.
 - While a move is saved the card or column has `aria-busy` (its spinner is hidden from assistive tech); a refused save is announced (`labels.moveFailed`, `labels.columnMoveFailed`).
@@ -216,6 +221,7 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`. |
 | [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
 | [saving.tsx](examples/saving.tsx) | Every move is saved on the server: the card waits busy in its new place, and an invoice the server refuses to close glides back to its column — `onValueChange`. |
+| [item-link.tsx](examples/item-link.tsx) | Tickets that open: each card is a link to its page, so ⌘-click or a middle click opens a new tab, a plain click, Enter or Space opens it in place, and a drag only moves it — `getItemHref`, `onItemClick`. |
 | [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a read-only board drags nothing — `loading`, `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The placement lives in the parent: every move arrives with its source, target and position to save, and a button resets the board — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page. |
@@ -225,7 +231,9 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - Using the array index as the card id → ids must survive a move.
 - Keeping the status only on the item and no `value` → the board draws nothing; build `defaultValue` (or `value`) from your data: `{ [status]: ids }`.
 - No height on the root inside a fixed region → the page scrolls instead of the column.
-- A hover-only action on a card → touch has no hover; put the action in the card or open the card on click.
+- A hover-only action on a card → touch has no hover; put the action in the card or open the card on click (`onItemClick`).
+- `onClick` / `onKeyDown` on `Kanban.Item` to open a card → `onItemClick` (click, Enter, Space, never after a drag) or `getItemHref` for a page of its own.
+- `getItemHref` without `getLabel` → the link is named by the card id; pass a human name.
 - Styling a card from an ancestor (`.board .card`) → the flying clone is portalled to `<body>` and loses it; put the class on `Kanban.Item`.
 - Keeping the column order in `columns` and reordering that array → pass `columnOrder` / `onColumnOrderChange`; `columns` stays the data.
 - Putting a system stage back first after every move → `locked: true` on that column.