@rt-tools/ui-kit-v2 0.1.0 → 0.3.0

package/src/lib/components/tag/CONTEXT.md

@@ -0,0 +1,47 @@
+# `rt-tag`
+
+```html
+<rt-tag value="Активен" severity="success" shape="pill" appearance="solid" icon="check" [closable]="true" (closed)="onClosed($event)" />
+```
+
+| вход               | тип                                                                        | умолчание      |
+| ------------------ | -------------------------------------------------------------------------- | -------------- |
+| `value`            | `string`                                                                   | **обязателен** |
+| `severity`         | `'info' \| 'success' \| 'warning' \| 'danger' \| 'secondary' \| 'neutral'` | `'neutral'`    |
+| `shape`            | `'pill' \| 'square'`                                                       | `'pill'`       |
+| `appearance`       | `'solid' \| 'outlined'`                                                    | `'solid'`      |
+| `radius`           | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full' \| null`                         | `null`         |
+| `icon` / `iconEnd` | `IRtIcon.Name \| null`                                                     | `null`         |
+| `closable`         | `boolean`                                                                  | `false`        |
+
+| выход    | тип          |
+| -------- | ------------ |
+| `closed` | `MouseEvent` |
+
+## Главное, что нужно знать
+
+**Крестик не закрывает тег.** `closed` только сообщает о клике — убрать тег из списка обязан
+потребитель. Компонент состояния не держит.
+
+Клик по крестику **не всплывает** (`stopPropagation`): пилюля целиком часто сама кликабельна,
+и без этого одно нажатие срабатывало бы дважды.
+
+## Как этим пользоваться
+
+- `radius` перебивает скругление, заданное формой. Без него класс скругления не выводится
+  вовсе — радиус берётся из `shape`.
+- Палитра дублируется атрибутом `data-severity` — по нему тег находят проверки и внешние стили,
+  не завязываясь на BEM-класс.
+- Подпись крестика для скринридера берётся из словаря кита (`rtKit.uiRemove`). Без
+  `provideRtKitTranslations()` там будет пусто.
+
+## Края
+
+- `value` — обязательный вход: тег без текста не бывает. Иконка без текста — это
+  [`rt-icon-button`](../icon-button/CONTEXT.md), а не тег.
+- Модификаторы выводятся BEM-директивами: `rt-tag--severity--success`, `rt-tag--shape--square`,
+  булев `closable` даёт `rt-tag--closable` без значения.
+
+## Рядом
+
+- [`rt-live-badge`](../live-badge/CONTEXT.md) — пилюля живого счётчика, а не статуса.

package/src/lib/components/tag/rt-tag.component.scss

@@ -1,6 +1,9 @@
-/* rt-tag — status pill в common/ui (Emulated encapsulation; :host обязательно). */
+/* rt-tag — status pill в common/ui. ViewEncapsulation.None.
+   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-tag` висит
+   и на `<rt-tag>`, и на корне шаблона, поэтому правила блока вложены в хост —
+   так они достаются только корню шаблона. */
 
-:host {
+rt-tag {
     display: inline-flex;
 
     .rt-tag {

package/src/lib/components/textarea/CONTEXT.md

@@ -0,0 +1,38 @@
+# `rt-textarea`
+
+```html
+<rt-field label="Комментарий">
+    <rt-textarea resize="vertical" placeholder="Что уточнить" [formControl]="comment" [rows]="5" />
+</rt-field>
+```
+
+Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md):
+
+| вход          | тип                    | умолчание    |
+| ------------- | ---------------------- | ------------ |
+| `placeholder` | `string`               | `''`         |
+| `rows`        | `number \| string`     | `3`          |
+| `resize`      | `'none' \| 'vertical'` | `'vertical'` |
+| `readonly`    | `boolean`              | `false`      |
+
+Значение — `string`.
+
+## Главное, что нужно знать
+
+**Крестик очистки не рисуется.** Вход `clearable` наследуется от общей основы полей, но разметка
+многострочного поля его не использует: в многострочном вводе он нетипичен.
+
+**Два разных «только для чтения»:**
+
+- свой вход `[readonly]` оставляет `<textarea>` на месте и запрещает правку (нативный `readOnly`);
+- режим от вмещающего [`rt-field`](../field/CONTEXT.md) подменяет контрол плоским текстом.
+
+## Края
+
+- `font-family: inherit` прописан явно: без него `<textarea>` падает на моноширинный шрифт
+  браузера.
+- Горизонтальное растягивание не предусмотрено — только `none` и `vertical`.
+
+## Рядом
+
+- [`rt-rich-editor`](../rich-editor/CONTEXT.md) — когда нужна разметка внутри текста.

package/src/lib/components/theme-toggle/CONTEXT.md

@@ -0,0 +1,28 @@
+# `rt-theme-toggle`
+
+Переключатель светлой и тёмной темы.
+
+```html
+<rt-theme-toggle appearance="icon" />
+```
+
+| вход         | тип                  | умолчание |
+| ------------ | -------------------- | --------- |
+| `appearance` | `'icon' \| 'switch'` | `'icon'`  |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**Своего состояния у контрола нет — тему держит `ThemeService`.**
+Он пишет `data-theme` на `<html>` и сохраняет выбор в хранилище устройства, поэтому тема
+переживает перезагрузку, а два переключателя на странице всегда согласованы.
+
+**Иконка показывает, куда переключит**, а не текущее состояние: в светлой теме это луна.
+В виде кнопки текущая тёмная тема помечается `aria-pressed="true"`.
+
+## Края
+
+- Подпись берётся из словаря кита (`rtKit.themeToggleLabel`) и вычисляется один раз при создании.
+- В тестах между случаями надо чистить хранилище: иначе выбор предыдущего теста становится
+  начальным состоянием следующего.

package/src/lib/components/theme-toggle/rt-theme-toggle.component.scss

@@ -1,3 +1,7 @@
-:host {
+/* rt-theme-toggle — ViewEncapsulation.None: правило таргетирует BEM-класс блока.
+   `.rt-theme-toggle` — сам хост: своей разметки блока у компонента нет, внутри
+   только rt-toggle-switch либо rt-icon-button. */
+
+.rt-theme-toggle {
     display: inline-flex;
 }

package/src/lib/components/thread-list/CONTEXT.md

@@ -0,0 +1,42 @@
+# `rt-thread-list`
+
+Список переписок/заявок с поиском, фильтрами и бесконечной прокруткой. Строку рисует шаблон
+потребителя.
+
+```html
+<rt-thread-list
+    [rows]="rows()"
+    [activeId]="activeId()"
+    [loading]="loading()"
+    [hasMore]="hasMore()"
+    (selectRow)="open($event)"
+    (openInNewTab)="openInTab($event)"
+    (searchChange)="search($event)"
+    (loadMore)="next()">
+    <ng-template rtThreadListRow let-row>…</ng-template>
+    <ng-template rtThreadListFilters>…</ng-template>
+</rt-thread-list>
+```
+
+Входы: `rows`, `activeId`, `searchPlaceholder`, `emptyText`, `loading`, `fetching`, `hasMore`,
+`filtersActive`. Выходы: `selectRow`, `openInNewTab`, `searchChange`, `loadMore`.
+
+Строка обязана иметь `id`, `hasUnread` и (необязательно) `overdue` — это всё, что список о ней знает.
+
+## Главное, что нужно знать
+
+**Ctrl/Cmd+клик просит открыть в новой вкладке, а не выбирает строку.** Список — это навигация,
+и привычка «Ctrl+клик открывает рядом» должна работать.
+
+**`loading` подменяет строки заглушками только при пустом списке.** Загрузка поверх уже
+показанных строк их не трогает — иначе список мигал бы при каждой смене фильтра.
+
+**Поиск отдаёт значение с задержкой** и без повторов (`searchDebounce` + `distinctUntilChanged`),
+уже обрезанное по краям.
+
+## Края
+
+- Якорь догрузки (`rtInfiniteScroll`) появляется только при `hasMore`.
+- Кнопка фильтров рисуется, только если объявлен шаблон `[rtThreadListFilters]`;
+  `filtersActive` рисует на ней точку.
+- Собственное поле поиска можно заменить шаблоном `[rtThreadListSearch]`.

package/src/lib/components/timeline/CONTEXT.md

@@ -0,0 +1,33 @@
+# `rt-timeline`
+
+```html
+<rt-timeline
+    [steps]="[
+    { label: 'Заявка создана', meta: '12 марта, 10:00', actor: 'Иванов', status: 'complete' },
+    { label: 'На проверке', meta: '12 марта, 12:30', status: 'current' },
+    { label: 'Решение', status: 'pending' },
+]" />
+```
+
+| вход    | тип                                           | умолчание |
+| ------- | --------------------------------------------- | --------- |
+| `steps` | `readonly { label, meta?, actor?, status }[]` | `[]`      |
+
+`status` — `'complete' \| 'current' \| 'pending'`. Выходов нет: лента только показывает.
+
+## Главное, что нужно знать
+
+**Порядок шагов — часть смысла**, поэтому лента рисуется тегом `<ol>`, а не набором блоков.
+
+Соединительная линия рисуется **между** пунктами и не рисуется после последнего: хвост под
+последним шагом читался бы как «продолжение есть».
+
+## Края
+
+- `meta` и `actor` необязательны и рисуются по отдельности: исполнитель без времени допустим.
+- Состояние дублируется атрибутом `data-status` — по нему шаг находят проверки.
+- Пустой набор рисует пустой `<ol>`, а не заглушку: текст «событий нет» подставляет потребитель.
+
+## Рядом
+
+- [`rt-stepper`](../stepper/CONTEXT.md) — линейный прогресс по шагам, а не журнал событий.

package/src/lib/components/timeline/rt-timeline.component.scss

@@ -1,6 +1,9 @@
-/* rt-timeline — вертикальный таймлайн-степпер в common/ui (Emulated; :host обязателен). */
+/* rt-timeline — вертикальный таймлайн-степпер в common/ui. ViewEncapsulation.None.
+   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-timeline` висит
+   и на `<rt-timeline>`, и на корне шаблона, поэтому правила блока вложены в хост —
+   так они достаются только корню шаблона. */
 
-:host {
+rt-timeline {
     display: block;
 
     .rt-timeline {

package/src/lib/components/toast/CONTEXT.md

@@ -0,0 +1,53 @@
+# `rt-toaster` + `rt-toast`
+
+Стопка всплывающих уведомлений. В разметку ставится **один** `rt-toaster` — обычно в корне
+приложения; отдельные `rt-toast` он создаёт сам.
+
+```html
+<!-- один раз на приложение -->
+<rt-toaster position="bottom-right" [duration]="4000" [visibleToasts]="3" />
+```
+
+```typescript
+readonly #notifications: NotificationBus = inject(NotificationBus);
+
+this.#notifications.success('Сохранено');
+this.#notifications.error('Не удалось сохранить', 'danger', {
+    description: 'Проверьте соединение',
+    action: { label: 'Повторить', handler: (): void => this.retry() },
+});
+```
+
+| вход `rt-toaster` | тип                                                                                               | умолчание        |
+| ----------------- | ------------------------------------------------------------------------------------------------- | ---------------- |
+| `position`        | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'bottom-right'` |
+| `duration`        | `number \| string` (мс)                                                                           | `4000`           |
+| `visibleToasts`   | `number \| string`                                                                                | `3`              |
+| `expand`          | `boolean`                                                                                         | `false`          |
+
+## Главное, что нужно знать
+
+**Тосты показываются не входом, а шиной.** Стопка подписана на
+`NotificationBus` и других способов показать тост
+нет. Шина — `providedIn: 'root'`, поэтому её достаточно инжектировать где угодно.
+
+Четыре метода шины задают палитру и иконку: `success` → `check-circle`, `info` → `info-circle`,
+`warning` → `exclamation-circle`, `error` → `times-circle`.
+
+## Как этим пользоваться
+
+- Новый тост встаёт **первым** — стопка растёт сверху.
+- Наведение на стопку разворачивает её и приостанавливает исчезновение; нажатая кнопка мыши
+  удерживает развёрнутое состояние до отпускания.
+- `action` и `secondaryAction` рисуются кнопками внутри тоста и зовут переданные обработчики.
+- `meta` — приписка над сообщением (номер заявки), `description` — вторая строка под ним.
+- Положение раскладывается на два модификатора: `rt-toaster--y--bottom` и `rt-toaster--x--right`.
+
+## Доступность
+
+Стопка — `role="region"` с переведённой подписью, каждый тост — `role="status"` с
+`aria-atomic="true"`: скринридер читает уведомление целиком, а не по изменившимся кускам.
+
+## Рядом
+
+- [`rt-message`](../message/CONTEXT.md) — постоянное сообщение внутри страницы, а не всплывающее.

package/src/lib/components/toggle-button-group/CONTEXT.md

@@ -0,0 +1,38 @@
+# `rt-toggle-button-group<T>`
+
+Группа сегментированных кнопок: один выбранный вариант из нескольких.
+
+```html
+<rt-toggle-button-group
+    ariaLabel="Период"
+    [options]="[{ value: 'day', label: 'День' }, { value: 'week', label: 'Неделя' }]"
+    [value]="period()"
+    (valueChange)="period.set($event)" />
+```
+
+| вход                     | тип                                              | умолчание      |
+| ------------------------ | ------------------------------------------------ | -------------- |
+| `options`                | `ReadonlyArray<{ value, label, icon?, title? }>` | **обязателен** |
+| `value`                  | `T \| undefined`                                 | `undefined`    |
+| `ariaLabel`              | `string \| null`                                 | `null`         |
+| `size`                   | `'sm' \| 'md' \| 'lg'`                           | `'sm'`         |
+| `disabled` / `fullWidth` | `boolean`                                        | `false`        |
+
+Выход: `valueChange`.
+
+## Главное, что нужно знать
+
+**Группа не держит состояния.** Нажатие только просит сменить значение; подсветка сдвинется,
+когда потребитель вернёт новое `value`. Повторное нажатие по выбранному тоже поднимает событие —
+снимать выбор группа не умеет.
+
+## Края
+
+- Крайние кнопки помечены модификаторами `--first` / `--last`: по ним скругляются углы группы.
+- `title` варианта превращается во всплывающую подсказку.
+- Размер иконки выводится из размера группы: `sm` → 12px, `md`/`lg` → 16px.
+
+## Рядом
+
+- [`rt-filter-control`](../filter-control/CONTEXT.md) — та же группа, но с автоматическим
+  переключением на список на узком экране.

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -1,10 +1,13 @@
-/* rt-toggle-button-group — segmented control.
-   ViewEncapsulation = default (Emulated) → стили обёрнуты в :host { ... }.
+/* rt-toggle-button-group — segmented control. ViewEncapsulation.None.
+   Хост адресуется по имени элемента, а не по классу блока: класс
+   `.rt-toggle-button-group` висит и на `<rt-toggle-button-group>`, и на корне
+   шаблона, поэтому правила блока вложены в хост — так они достаются только
+   корню шаблона.
    Размеры — три тира sm/md/lg, общая высота совпадает с rt-button
    (sm 30 / md 40 / lg 50px).
    Цвета — только семантические --rt-* токены. */
 
-:host {
+rt-toggle-button-group {
     display: inline-flex;
 
     /* Локальные overridable custom properties — позволяют потребителю
@@ -114,7 +117,7 @@
 }
 
 /* full-width: группа растягивается на контейнер, опции делят ширину поровну. */
-:host(.rt-toggle-button-group--full-width) {
+rt-toggle-button-group.rt-toggle-button-group--full-width {
     display: flex;
     width: 100%;
 
@@ -131,8 +134,10 @@
 
 /* Dark theme: `--rt-color-bg-surface-subtle` совпадает с `--rt-color-bg-surface`
    в палитре (см. styles/_theme-dark.scss), поэтому track теряет контраст с
-   активным сегментом. Локально перекрашиваем track в более тёмный neutral. */
-:host-context(:root[data-theme='dark']),
-:host-context(html.rt-theme-dark) {
+   активным сегментом. Локально перекрашиваем track в более тёмный neutral.
+   Раньше правило было записано через `:host-context`, который под None не
+   совпадает ни с чем: тему задаёт предок, им же и адресуемся. */
+:root[data-theme='dark'] rt-toggle-button-group,
+html.rt-theme-dark rt-toggle-button-group {
     --rt-toggle-button-group-track-bg: var(--rt-neutral-900);
 }

package/src/lib/components/toggle-switch/CONTEXT.md

@@ -0,0 +1,35 @@
+# `rt-toggle-switch`
+
+```html
+<rt-toggle-switch ariaLabel="Тёмная тема" size="md" iconOff="ico-sun" iconOn="ico-moon" [formControl]="darkTheme" />
+```
+
+| вход                 | тип                    | умолчание |
+| -------------------- | ---------------------- | --------- |
+| `inputId`            | `string \| null`       | `null`    |
+| `ariaLabel`          | `string \| null`       | `null`    |
+| `size`               | `'sm' \| 'md' \| 'lg'` | `'sm'`    |
+| `iconOff` / `iconOn` | `IRtIcon.Name \| null` | `null`    |
+| `disabled`           | `boolean`              | `false`   |
+
+Значение — `boolean` через `ControlValueAccessor`. Своей подписи на экране нет.
+
+## Главное, что нужно знать
+
+**`role="switch"`, а не `checkbox`.** Скринридер произносит «switch off/on» вместо «checkbox
+unchecked» — для тумблера это точнее. Своего текста у контрола нет, поэтому подпись задаётся
+входом `ariaLabel` или внешним `<label for>` через `inputId`.
+
+## Как этим пользоваться
+
+- Умолчание размера — `sm`: он совпадает по высоте с плотными контролами формы, где тумблер
+  стоит в одном ряду с текстом.
+- Достаточно одной из двух иконок, чтобы включился режим с иконками
+  (`rt-toggle-switch--with-icons`). Бегунок непрозрачен и наезжает на иконку текущего состояния,
+  так что видна всегда иконка того состояния, куда переключится контрол.
+- Отключение приходит двумя путями — вход и `FormControl.disable()` — и оба пишут в один сигнал.
+
+## Рядом
+
+- [`rt-checkbox`](../checkbox/CONTEXT.md) — для «отмечено», а не «включено».
+- [`rt-theme-toggle`](../theme-toggle/CONTEXT.md) — готовый переключатель темы поверх этого.

package/src/lib/components/toggle-switch/rt-toggle-switch.component.scss

@@ -1,8 +1,13 @@
-:host {
+/* rt-toggle-switch — переключатель в common/ui. ViewEncapsulation.None.
+   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-toggle-switch` висит
+   и на `<rt-toggle-switch>`, и на корне шаблона, поэтому правила блока вложены в хост —
+   так они достаются только корню шаблона. */
+
+rt-toggle-switch {
     display: inline-flex;
 }
 
-.rt-toggle-switch {
+rt-toggle-switch .rt-toggle-switch {
     /* Геометрия размера. База — `sm`; модификаторы перекрывают только числа,
        правила ниже к размерам не привязаны. `thumb-travel` держим явным
        числом, а не calc из ширины: каждое значение сверяется с макетом. */

package/src/lib/components/toolbar/CONTEXT.md

@@ -0,0 +1,22 @@
+# `rt-toolbar`
+
+Полоса действий с тремя слотами. Слоты объявляются директивами на `ng-template`.
+
+```html
+<rt-toolbar dense>
+    <ng-template rtToolbarLeft><rt-icon-button icon="arrow-left" ariaLabel="Назад" /></ng-template>
+    <ng-template rtToolbarCenter><h3>Заявка №12</h3></ng-template>
+    <ng-template rtToolbarRight><rt-menu … /></ng-template>
+</rt-toolbar>
+```
+
+| вход    | тип       | умолчание |
+| ------- | --------- | --------- |
+| `dense` | `boolean` | `false`   |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**Без единого слота панель не рисуется вовсе** — ни одного узла в DOM. Необъявленный слот тоже
+не создаёт пустой полосы: пустая полоса занимала бы место и растягивала соседние.

package/src/lib/components/tooltip/CONTEXT.md

@@ -0,0 +1,34 @@
+# `[rtTooltip]`
+
+```html
+<button rtButton rtTooltipPlacement="top" [rtTooltip]="'Удалить строку'">…</button>
+<rt-icon-button icon="ico-trash" ariaLabel="Удалить" tooltip="Удалить" />
+```
+
+| вход                 | тип                           | умолчание |
+| -------------------- | ----------------------------- | --------- |
+| `rtTooltip`          | `string \| null \| undefined` | `''`      |
+| `rtTooltipPlacement` | `'top' \| 'bottom'`           | `'top'`   |
+
+Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
+
+## Главное, что нужно знать
+
+**Пустой текст выключает директиву целиком.** `''`, пробелы, `null`, `undefined` — всё это
+no-op, а не пустая панель под курсором. Поэтому директиву вешают на иконочные кнопки
+безусловно и «включают», выставив строку. Вход принимает `null`/`undefined` и нормализует их
+сам — так `[rtTooltip]="value | date"` не ломает строгую типизацию шаблона.
+
+**Подсказка появляется с задержкой 300 мс.** Она гасит мелькание при быстром проходе курсора по
+ряду кнопок. Уход курсора до истечения задержки не показывает ничего.
+
+## Как этим пользоваться
+
+- Показывают и наведение, и фокус с клавиатуры; прячут уход курсора, потеря фокуса и **клик**
+  (панель мешала бы смотреть на результат нажатия).
+- `rt-icon-button` уже несёт эту директиву — там достаточно входа `tooltip`.
+- Подсказка не заменяет `aria-label`: она вспомогательная, а имя контрола задаётся отдельно.
+
+## Рядом
+
+- [`[rtPopover]`](../popover/CONTEXT.md) — когда в панель нужно положить разметку.

package/src/lib/components/welcome-dialog/CONTEXT.md

@@ -0,0 +1,20 @@
+# `rt-welcome-dialog`
+
+Приветственное окно с текстом и одной кнопкой. Открывается через
+[`RtDialogService`](../dialog/CONTEXT.md).
+
+```typescript
+this.#dialog.open<RtWelcomeDialogComponent, IRtWelcomeDialog.Data>(RtWelcomeDialogComponent, {
+    data: { message: 'Добро пожаловать\n\nЗдесь появятся ваши заявки.', ctaLabel: 'Поехали' },
+});
+```
+
+Данные приходят токеном `RT_DIALOG_DATA`: `message`, необязательный `ctaLabel`.
+
+## Главное, что нужно знать
+
+**Заголовок компонент выбирает сам — это первый абзац сообщения.** Приветствие приходит одной
+строкой из настроек приложения, и делить её на заголовок и текст приходится здесь: абзацы
+разделяются пустой строкой, пустые отбрасываются.
+
+Без данных окно рисуется пустым, но не падает — остаётся одна кнопка.

package/src/lib/components/welcome-dialog/rt-welcome-dialog.component.scss

@@ -1,7 +1,11 @@
 /* Welcome-модалка первого входа — открывается через RtDialogService.open().
-   rt-dialog даёт styled-frame, контент внутри получает свой padding. */
+   rt-dialog даёт styled-frame, контент внутри получает свой padding.
 
-:host {
+   ViewEncapsulation.None. Хост адресуется по имени элемента, а не по классу
+   блока: класс `.rt-welcome-dialog` висит и на `<rt-welcome-dialog>`, и на
+   обёртке содержимого внутри него, поэтому правила обёртки вложены в хост. */
+
+rt-welcome-dialog {
     display: contents;
 
     .rt-welcome-dialog {

package/src/lib/components/workspace/CONTEXT.md

@@ -0,0 +1,46 @@
+# `rt-workspace`
+
+Трёхколоночный рабочий стол: список, карточка, панель подробностей. Колонки тянутся мышью и
+клавиатурой, ширины запоминаются.
+
+```html
+<rt-workspace storageKey="inbox" [hasActive]="!!active()" (backClicked)="clearActive()">
+    <ng-template rtWorkspaceList let-api><rt-thread-list … /></ng-template>
+    <ng-template rtWorkspaceCenter><app-card /></ng-template>
+    <ng-template rtWorkspaceAside><rt-workspace-details … /></ng-template>
+</rt-workspace>
+```
+
+| вход                                                    | тип                | умолчание       |
+| ------------------------------------------------------- | ------------------ | --------------- |
+| `storageKey`                                            | `string \| null`   | `null`          |
+| `hasActive`                                             | `boolean`          | `false`         |
+| `listMinWidth` / `listMaxWidth` / `listDefaultWidth`    | `number \| string` | 240 / 480 / 320 |
+| `asideMinWidth` / `asideMaxWidth` / `asideDefaultWidth` | `number \| string` | 280 / 560 / 360 |
+| `centerMinWidth`                                        | `number \| string` | 360             |
+
+Выход: `backClicked`. API панели: `openAside()`, `closeAside()`, `toggleAside()`,
+`toggleAsideCollapsed()`, сигналы `asideOpen()`, `asideCollapsed()`, `listWidth()`, `asideWidth()`.
+
+## Главное, что нужно знать
+
+**Без `storageKey` ширины не запоминаются.** С ключом они переживают пересоздание компонента:
+раскладку рабочего стола настраивают один раз, и сбрасывать её на каждом заходе было бы хуже.
+
+**Ручки — полноценные разделители**: `role="separator"`, в таб-порядке, стрелки двигают их с
+шагом 16px, двойной клик возвращает умолчание. Текущая ширина и границы объявлены через
+`aria-valuenow/min/max`.
+
+**Стрелки у правой ручки работают зеркально**: `ArrowLeft` расширяет панель подробностей, потому
+что она растёт влево.
+
+## Края
+
+- Ширина всегда зажимается в границы — и при перетаскивании, и с клавиатуры.
+- На узком экране появляется полоса с кнопками «назад» и «подробности» (только при `hasActive`);
+  «назад» закрывает панель подробностей и поднимает событие.
+- `asideCollapsed` — это «свернуть на широком экране», `asideOpen` — «показать на узком».
+
+## Рядом
+
+- [`rt-workspace-details`](../workspace-details/CONTEXT.md) — типовое наполнение правой панели.

package/src/lib/components/workspace-details/CONTEXT.md

@@ -0,0 +1,42 @@
+# `rt-workspace-details`
+
+Типовое наполнение правой панели рабочего стола: перечень полей, суммы, переключатели, переход
+по этапам, история и кнопки действий.
+
+```html
+<rt-workspace-details
+    title="Заявка №12"
+    [rows]="rows()"
+    [money]="money()"
+    [toggles]="toggles()"
+    [transition]="transition()"
+    [audit]="audit()"
+    [actions]="actions()"
+    [loading]="loading()"
+    (toggleChange)="onToggle($event)"
+    (transitionSubmit)="moveStage($event)"
+    (auditLoadMore)="loadMoreAudit()"
+    (actionClicked)="runAction($event)" />
+```
+
+Входы: `title`, `entityId`, `loading`, `busy`, `rows`, `agentEdit`, `money`, `toggles`,
+`toggleHint`, `transition`, `audit`, `actions`, `error`.
+Выходы: `toggleChange`, `agentReassign`, `transitionSubmit`, `transitionSuccessClose`,
+`transitionErrorClose`, `auditLoadMore`, `actionClicked`.
+
+## Главное, что нужно знать
+
+**Вкладки появляются только вместе с переходом или историей.** Пока есть одни поля, они рисуются
+сразу: одна вкладка вместо содержимого была бы лишним щелчком.
+
+**Ошибка не рисуется внутри панели — она уходит в [`NotificationBus`](../toast/CONTEXT.md).**
+Панель узкая, и сообщение в ней сдвигало бы данные; тост показывает ошибку поверх. Одна и та же
+строка не повторяется на каждой перерисовке.
+
+## Края
+
+- `loading` подменяет заглушками значения полей и сумм, подписи остаются.
+- Действие с `confirm` открывает [`[rtConfirm]`](../confirm-popover/CONTEXT.md), и
+  `actionClicked` приходит только после подтверждения.
+- Смена исполнителя (`agentEdit`) — отдельный сценарий с выбором и подтверждением; событие
+  `agentReassign` отдаёт идентификатор нового исполнителя.

package/styles/tokens.css

@@ -774,6 +774,20 @@ html.rt-theme-dark .rt-logo {
   --rt-btn-icon-size: 1.125rem;
   --rt-btn-spinner-size: 1.125rem;
 }
+.rt-button--xl {
+  --rt-btn-height: 60px;
+  --rt-btn-padding: 0 1.75rem;
+  --rt-btn-font-size: 1.125rem;
+  --rt-btn-icon-size: 1.25rem;
+  --rt-btn-spinner-size: 1.25rem;
+}
+.rt-button--2xl {
+  --rt-btn-height: 70px;
+  --rt-btn-padding: 0 2rem;
+  --rt-btn-font-size: 1.1875rem;
+  --rt-btn-icon-size: 1.375rem;
+  --rt-btn-spinner-size: 1.375rem;
+}
 .rt-button--icon-only {
   width: var(--rt-btn-height);
   padding: 0;