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

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

@@ -0,0 +1,53 @@
+# `[rtButton]`
+
+Это **директива**, а не компонент: она вешается на существующий `<button>` или `<a>`.
+
+```html
+<button rtButton label="Войти" theme="primary"></button>
+<button rtButton label="Скачать" icon="ico-download" iconPos="left" theme="success"></button>
+<button rtButton icon="ico-pencil" appearance="text"></button>
+<button rtButton label="Сохранение…" [loading]="saving()" [disabled]="saving()"></button>
+<a rtButton label="На главную" [routerLink]="'/'"></a>
+```
+
+| вход          | тип                                                                        | умолчание                  |
+| ------------- | -------------------------------------------------------------------------- | -------------------------- |
+| `label`       | `string \| null`                                                           | `null`                     |
+| `icon`        | `string \| null` (имя из набора `rt-icon`)                                 | `null`                     |
+| `iconPos`     | `'left' \| 'right'`                                                        | `'left'`                   |
+| `theme`       | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'`                |
+| `appearance`  | `'filled' \| 'outlined' \| 'text'`                                         | `'filled'`                 |
+| `size`        | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (30 / 40 / 50 / 60 / 70 px)        | `'md'`                     |
+| `rounded`     | `boolean`                                                                  | `false`                    |
+| `loading`     | `boolean`                                                                  | `false`                    |
+| `loadingIcon` | `string \| null`                                                           | `null` → встроенное кольцо |
+
+Своего выхода нет — клик слушается нативным `(click)` на самом элементе.
+
+## Главное, что нужно знать
+
+**Содержимое кнопки директива рисует сама** через `Renderer2` — подпись и иконка не проецируются.
+Поэтому `<button rtButton label="…"></button>` пишется с пустым телом: всё, что положить внутрь
+руками, будет соседствовать с дорисованным, а не заменять его.
+
+**Класс выводится только на отличие от умолчания.** `theme="primary"`, `appearance="filled"` и
+`size="md"` не дают ни одного класса — стиль по умолчанию живёт на самом блоке `rt-button`.
+
+## Края
+
+- **Выход из загрузки возвращает содержимое по концу затухания кольца, но не зависит от
+  анимации.** Основной путь — `animationend`; поверх него висит страховочный таймаут на ту же
+  длительность с запасом, и оба пути идемпотентны. Без страховки кнопка, спрятанная в момент
+  снятия `loading` (свёрнутая панель, неактивная вкладка), не получала бы `animationend` вовсе
+  и навсегда оставалась голым кольцом.
+- Очистка перед перерисовкой идёт **по классам**, а не по сохранённым ссылкам: после гидратации
+  серверной разметки ссылки принадлежат другому экземпляру директивы, и подпись удваивалась бы.
+- Имя иконки типизировано как обычная строка (совместимость со старыми потребителями). Неизвестное
+  имя не роняет ничего — `<use>` просто не разрешится, и место останется пустым.
+- Отключение — нативный атрибут `disabled` на самом элементе, у директивы своего входа для этого
+  нет.
+
+## Рядом
+
+- [`rt-icon-button`](../icon-button/CONTEXT.md) — кнопка без подписи, с обязательным `ariaLabel`.
+- [`rt-split-button`](../split-button/CONTEXT.md) — кнопка с прикреплённым меню.

package/src/lib/components/button/rt-button.directive.scss

@@ -225,6 +225,22 @@
         --rt-btn-spinner-size: 1.125rem;
     }
 
+    &--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;
+    }
+
+    &--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;
+    }
+
     &--icon-only {
         width: var(--rt-btn-height);
         padding: 0;

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

@@ -0,0 +1,41 @@
+# `rt-calendar`
+
+Календарь-витрина: месяцы, дни с подписями (цена, занятость), стрелки переключения.
+
+```html
+<rt-calendar
+    prevAriaLabel="Предыдущий месяц"
+    [months]="months()"
+    [weekdayLabels]="weekdays"
+    [canPrev]="canPrev()"
+    [canNext]="canNext()"
+    (prevMonth)="shift(-1)"
+    (dayClick)="pick($event)" />
+```
+
+| вход                              | тип                 | умолчание      |
+| --------------------------------- | ------------------- | -------------- |
+| `months`                          | `readonly Month[]`  | **обязателен** |
+| `weekdayLabels`                   | `readonly string[]` | **обязателен** |
+| `canPrev` / `canNext`             | `boolean`           | `false`        |
+| `prevAriaLabel` / `nextAriaLabel` | `string`            | `''`           |
+| `sublabelsLoading`                | `boolean`           | `false`        |
+
+Выходы: `prevMonth`, `nextMonth`, `dayClick`. Слот `[calendarHint]` — подсказка в шапке.
+
+## Главное, что нужно знать
+
+**Календарь ничего не считает.** Раскладку месяца готовит потребитель: сколько пустых клеток в
+начале (`leadingBlanks`), какие дни заняты (`state`), что писать под числом (`sublabel`), какие
+дни недоступны (`disabled`). Компонент только показывает готовое — поэтому он одинаково годится
+и для выбора дат, и для витрины занятости.
+
+**Это не поле ввода.** Значение он не хранит и в форму не пишет; для ввода даты есть
+[`rt-date-picker`](../date-picker/CONTEXT.md).
+
+## Края
+
+- Недоступный день не кликается — `dayClick` для него не поднимается.
+- `sublabelsLoading` подменяет подписи под числами заглушками, оставляя сами числа.
+- Стрелки отключены, пока не разрешены явно: календарь не знает границ диапазона.
+- Подписи стрелок задаёт приложение — своих слов у календаря здесь нет.

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

@@ -1,116 +1,115 @@
-:host {
+/* rt-calendar — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+   `.rt-calendar` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
+.rt-calendar {
     display: block;
 
-    .rt-calendar {
-        &__header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: var(--rt-space-3);
-            gap: var(--rt-space-3);
-        }
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--rt-space-3);
+        gap: var(--rt-space-3);
+    }
 
-        &__nav {
-            flex: 0 0 auto;
-        }
+    &__nav {
+        flex: 0 0 auto;
+    }
 
-        &__months {
-            display: grid;
-            gap: var(--rt-space-6);
-            grid-template-columns: repeat(2, 1fr);
+    &__months {
+        display: grid;
+        gap: var(--rt-space-6);
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    &__month-title {
+        margin: 0 0 var(--rt-space-2);
+        color: var(--rt-color-text-primary);
+        font-weight: var(--rt-font-weight-semibold);
+        text-align: center;
+
+        &:first-letter {
+            text-transform: uppercase;
         }
+    }
 
-        &__month-title {
-            margin: 0 0 var(--rt-space-2);
-            color: var(--rt-color-text-primary);
-            font-weight: var(--rt-font-weight-semibold);
-            text-align: center;
+    &__grid {
+        display: grid;
+        gap: var(--rt-space-0-5);
+        grid-template-columns: repeat(7, 1fr);
+    }
 
-            &:first-letter {
-                text-transform: uppercase;
-            }
+    &__weekday {
+        padding: var(--rt-space-1) 0;
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-xs);
+        text-align: center;
+    }
+
+    &__day {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: var(--rt-space-1-5) var(--rt-space-0-5);
+        border: none;
+        border-radius: var(--rt-radius-md);
+        background: none;
+        color: var(--rt-color-text-primary);
+        cursor: pointer;
+        font: inherit;
+        gap: var(--rt-space-0-5);
+
+        &:hover:not(:disabled, [data-state='start'], [data-state='end'], [data-state='in-range']) {
+            background: var(--rt-color-bg-subtle);
         }
 
-        &__grid {
-            display: grid;
-            gap: var(--rt-space-0-5);
-            grid-template-columns: repeat(7, 1fr);
+        &:disabled {
+            cursor: not-allowed;
         }
 
-        &__weekday {
-            padding: var(--rt-space-1) 0;
+        &[data-state='past'],
+        &[data-state='blocked'] {
             color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-xs);
-            text-align: center;
+            opacity: 0.45;
         }
 
-        &__day {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: var(--rt-space-1-5) var(--rt-space-0-5);
-            border: none;
-            border-radius: var(--rt-radius-md);
-            background: none;
-            color: var(--rt-color-text-primary);
-            cursor: pointer;
-            font: inherit;
-            gap: var(--rt-space-0-5);
-
-            &:hover:not(:disabled, [data-state='start'], [data-state='end'], [data-state='in-range']) {
-                background: var(--rt-color-bg-subtle);
-            }
-
-            &:disabled {
-                cursor: not-allowed;
-            }
-
-            &[data-state='past'],
-            &[data-state='blocked'] {
-                color: var(--rt-color-text-muted);
-                opacity: 0.45;
-            }
-
-            &[data-state='busy'] {
-                color: var(--rt-color-text-muted);
-                opacity: 0.45;
-                text-decoration: line-through;
-            }
-
-            &[data-state='start'],
-            &[data-state='end'] {
-                background: var(--rt-color-action-primary);
-                color: var(--rt-color-action-on-primary);
-            }
-
-            &[data-state='in-range'] {
-                background: var(--rt-color-action-primary-soft);
-                color: var(--rt-color-text-link);
-                font-weight: var(--rt-font-weight-semibold);
-            }
+        &[data-state='busy'] {
+            color: var(--rt-color-text-muted);
+            opacity: 0.45;
+            text-decoration: line-through;
         }
 
-        &__day-num {
-            font-size: var(--rt-text-sm);
-            font-weight: var(--rt-font-weight-medium);
+        &[data-state='start'],
+        &[data-state='end'] {
+            background: var(--rt-color-action-primary);
+            color: var(--rt-color-action-on-primary);
         }
 
-        &__day-sublabel {
-            font-size: var(--rt-text-2xs);
-            opacity: 0.75;
+        &[data-state='in-range'] {
+            background: var(--rt-color-action-primary-soft);
+            color: var(--rt-color-text-link);
+            font-weight: var(--rt-font-weight-semibold);
         }
     }
 
+    &__day-num {
+        font-size: var(--rt-text-sm);
+        font-weight: var(--rt-font-weight-medium);
+    }
+
+    &__day-sublabel {
+        font-size: var(--rt-text-2xs);
+        opacity: 0.75;
+    }
+
     @media (width <= 640px) {
-        .rt-calendar {
-            &__months {
-                grid-template-columns: 1fr;
-            }
-
-            /* на мобиле показываем один месяц — навигация листает по одному */
-            &__month:last-child {
-                display: none;
-            }
+        &__months {
+            grid-template-columns: 1fr;
+        }
+
+        /* на мобиле показываем один месяц — навигация листает по одному */
+        &__month:last-child {
+            display: none;
         }
     }
 
@@ -119,14 +118,12 @@
        ширину боковыми отступами клетки и ступенью кегля, а не прячем цену:
        без неё календарь перестаёт быть прайс-листом */
     @media (width <= 374px) {
-        .rt-calendar {
-            &__day {
-                padding-inline: 0;
-            }
-
-            &__day-sublabel {
-                font-size: var(--rt-text-3xs);
-            }
+        &__day {
+            padding-inline: 0;
+        }
+
+        &__day-sublabel {
+            font-size: var(--rt-text-3xs);
         }
     }
 }

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

@@ -0,0 +1,34 @@
+# `rt-card`
+
+```html
+<rt-card header="Тариф" ariaLabel="Открыть тариф" [clickable]="true" (cardClick)="open()">
+    <rt-tag rtCardHeader value="Активен" severity="success" />
+    <p>Базовый, до 5 пользователей</p>
+    <button rtButton rtCardFooter label="Продлить"></button>
+</rt-card>
+```
+
+| вход        | тип              | умолчание |
+| ----------- | ---------------- | --------- |
+| `header`    | `string \| null` | `null`    |
+| `ariaLabel` | `string \| null` | `null`    |
+| `clickable` | `boolean`        | `false`   |
+
+| выход       | тип          |
+| ----------- | ------------ |
+| `cardClick` | `MouseEvent` |
+
+Три слота: `[rtCardHeader]` — рядом с заголовком, слот по умолчанию — тело, `[rtCardFooter]` — низ.
+
+## Главное, что нужно знать
+
+**Без `clickable` карточка не интерактивна вовсе**: ни `role`, ни `tabindex`, ни события. Это
+намеренно — иначе текст внутри нельзя было бы выделить, не «нажав» карточку.
+
+С `clickable` карточка объявляется `role="button"`, встаёт в таб-порядок и реагирует на Enter и
+Space. Подпись для скринридера задаётся входом: содержимое карточки именем контрола не служит.
+
+## Края
+
+- Карточка рисуется тегом `<article>` — она самостоятельный кусок содержимого.
+- Шапка и подвал существуют всегда, даже пустыми; прячут их стили.

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

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

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

@@ -0,0 +1,41 @@
+# `rt-chat`
+
+Переписка: лента сообщений, шапка и поле ответа.
+
+```html
+<rt-chat
+    title="Переписка по заявке"
+    showRefresh
+    [messages]="messages()"
+    [hasThread]="true"
+    [canReply]="canReply()"
+    [loading]="loading()"
+    [attachments]="true"
+    (send)="onSend($event)"
+    (refresh)="reload()" />
+```
+
+Основные входы: `messages`, `hasThread`, `canReply`, `replyBlockReason`, `loading`, `fetching`,
+`sending`, `attachments`, `accept`, `formatting`, `title`, `showRefresh`, `showExpand`, `fill`.
+Выходы: `send`, `refresh` и события по сообщениям (повтор, удаление).
+
+## Главное, что нужно знать
+
+**Без `hasThread` чат рисует только подсказку выбора.** Ни ленты, ни поля ответа не будет —
+это состояние «переписка не выбрана», а не «переписка пустая».
+
+**Шапка появляется только вместе с кнопками**: `showHeader = showRefresh || showExpand`.
+Один `title` шапку не создаёт.
+
+**Поле ответа гейтится `canReply`.** Когда отвечать нельзя, вместо него рисуется причина
+из `replyBlockReason`.
+
+**Удалённое сообщение остаётся в ленте** отдельной пометкой вместо текста: иначе непонятно, на
+что отвечали соседние реплики.
+
+## Края
+
+- Режим `formatting` подменяет простое поле [`rt-rich-editor`](../rich-editor/CONTEXT.md);
+  тот грузит Quill динамическим импортом.
+- Неотправленное сообщение (`status: 'failed'`) получает кнопку повтора.
+- Файлы можно бросать прямо в ленту — чат обёрнут в [`rt-file-drop`](../file-drop/CONTEXT.md).

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

@@ -0,0 +1,37 @@
+# `rt-checkbox`
+
+```html
+<rt-checkbox [formControl]="agreeControl">Согласен с условиями</rt-checkbox>
+<rt-checkbox ariaLabel="Выбрать всё" [indeterminate]="someSelected()" [formControl]="allControl" />
+```
+
+| вход            | тип              | умолчание |
+| --------------- | ---------------- | --------- |
+| `inputId`       | `string \| null` | `null`    |
+| `ariaLabel`     | `string \| null` | `null`    |
+| `disabled`      | `boolean`        | `false`   |
+| `indeterminate` | `boolean`        | `false`   |
+
+Значение — `boolean` через `ControlValueAccessor`. Подпись приходит проекцией.
+
+## Главное, что нужно знать
+
+**Это `<button role="checkbox">`, а не `<input type="checkbox">`.** Enter и Space обрабатывает
+браузер сам, поэтому собственных обработчиков клавиатуры здесь нет. `aria-checked` принимает три
+значения: `true`, `false`, `mixed`.
+
+**`indeterminate` — чисто визуальный вход, компонент его не сбрасывает.** Клик по смешанному
+состоянию разрешается в `true` (контракт трёхпозиционного чекбокса) и поднимает `true` наружу,
+но прочерк на экране останется, пока вход держит его сверху. Снимать вход — дело потребителя.
+
+## Как этим пользоваться
+
+- Отключение приходит двумя путями — вход `[disabled]` и `FormControl.disable()`, — и оба пишут
+  в один внутренний сигнал, поэтому ведут себя одинаково.
+- Проекция не видна скринридеру как имя контрола: если подпись важна для AT, задай `ariaLabel`.
+- `inputId` кладётся на кнопку — по нему связывается внешний `<label for>`.
+
+## Рядом
+
+- [`rt-toggle-switch`](../toggle-switch/CONTEXT.md) — то же булево значение, но для «включено /
+  выключено», а не «отмечено».

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

@@ -1,8 +1,13 @@
-:host {
+/* rt-checkbox — чекбокс в common/ui. ViewEncapsulation.None.
+   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-checkbox` висит
+   и на `<rt-checkbox>`, и на корне шаблона, поэтому правила блока вложены в хост —
+   так они достаются только корню шаблона. */
+
+rt-checkbox {
     display: inline-block;
 }
 
-.rt-checkbox {
+rt-checkbox .rt-checkbox {
     display: inline-flex;
     align-items: center;
     padding: 0;

package/src/lib/components/collapsible-text/CONTEXT.md

@@ -0,0 +1,29 @@
+# `rt-collapsible-text`
+
+Длинный текст, свёрнутый до нескольких строк, с кнопкой «ещё».
+
+```html
+<rt-collapsible-text [paragraphs]="description()" [clampLines]="4" />
+```
+
+| вход         | тип                 | умолчание      |
+| ------------ | ------------------- | -------------- |
+| `paragraphs` | `readonly string[]` | **обязателен** |
+| `clampLines` | `number \| string`  | `6`            |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**Кнопка «ещё» появляется по замеру, а не по длине текста.** После отрисовки компонент сравнивает
+`scrollHeight` с `clientHeight` и следит за изменением ширины через `ResizeObserver`: тот же текст
+в узкой колонке переполняет обрезку, а в широкой — нет.
+
+Отсюда следствие для тестов: в среде без раскладки (jsdom) высоты нулевые, переполнения нет, и
+кнопки не будет — это верное поведение, а не сбой.
+
+## Края
+
+- Текст приходит **массивом абзацев**, а не одной строкой: разбивать HTML компонент не умеет.
+- Разворот снимает и класс обрезки, и ограничение по строкам; свёрнутое состояние возвращается
+  повторным нажатием.

package/src/lib/components/confirm-popover/CONTEXT.md

@@ -0,0 +1,47 @@
+# `[rtConfirm]` + `rt-confirm-popover`
+
+Подтверждение прямо под кнопкой — вместо модального диалога.
+
+```html
+<rt-icon-button
+    icon="ico-trash"
+    variant="danger"
+    ariaLabel="Отклонить"
+    rtConfirmTitle="Отклонить заявку"
+    rtConfirmLabel="Отклонить"
+    [rtConfirm]="'Отклонить заявку? Оператор получит уведомление.'"
+    (confirmed)="reject()" />
+```
+
+| вход (алиас)           | тип                                  | умолчание                |
+| ---------------------- | ------------------------------------ | ------------------------ |
+| `rtConfirm`            | `string`                             | `''`                     |
+| `rtConfirmTitle`       | `string \| null`                     | `null`                   |
+| `rtConfirmLabel`       | `string`                             | `''` → `rtKit.uiConfirm` |
+| `rtConfirmCancelLabel` | `string`                             | `''` → `rtKit.uiCancel`  |
+| `rtConfirmTone`        | `'danger' \| 'warning' \| 'primary'` | `'danger'`               |
+| `rtConfirmDisabled`    | `boolean`                            | `false`                  |
+
+| выход       | тип    |
+| ----------- | ------ |
+| `confirmed` | `void` |
+
+## Главное, что нужно знать
+
+**Событие приходит только на подтверждение.** Отмена, Escape и клик мимо просто закрывают панель
+и молчат — отдельного «отменено» нет.
+
+**Пустой вопрос не открывает ничего.** Строка из одних пробелов равна отсутствию: подтверждать
+нечего. Значит `[rtConfirm]="maybeEmpty()"` — законный способ выключить подтверждение.
+
+## Как этим пользоваться
+
+- Тон по умолчанию красный: подтверждают обычно удаление.
+- Панель прижата к правому краю host-а и переворачивается вверх у нижней границы — так она
+  раскрывается внутрь асайда, а не за его край.
+- Компонент панели (`rt-confirm-popover`) создаётся директивой; в разметку его не ставят.
+
+## Рядом
+
+- [`rt-menu-item`](../menu/CONTEXT.md) — у пункта меню своё подтверждение, но **диалогом**, а не
+  поповером: пункт исчезает вместе с меню, и панели было бы не на чем держаться.

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

@@ -0,0 +1,42 @@
+# `rt-container`
+
+Каркас страницы: шапка, боковое меню, полосы панели инструментов, содержимое и правая
+выезжающая панель. Зоны объявляются директивами на `ng-template`.
+
+```html
+<rt-container height="viewport" mobileLeftNav="bottom">
+    <ng-template rtContainerHeader><rt-header /></ng-template>
+    <ng-template rtContainerLeftSidenav><rt-section-nav … /></ng-template>
+    <ng-template rtContainerToolbarLeft><rt-filter-control … /></ng-template>
+    <ng-template rtContainerContent><router-outlet /></ng-template>
+    <ng-template rtContainerRightSidenav><app-details /></ng-template>
+</rt-container>
+```
+
+| вход            | тип                    | умолчание |
+| --------------- | ---------------------- | --------- |
+| `mobileLeftNav` | `'keep' \| 'bottom'`   | `'keep'`  |
+| `height`        | `'auto' \| 'viewport'` | `'auto'`  |
+
+Выходы: `backdropClick`, `rightOpened`, `rightClosed`. Публичное API: `openRight()`,
+`closeRight()`, `rightOpen()`, `rightOverlayReady()`.
+
+## Главное, что нужно знать
+
+**Необъявленная зона не создаёт пустого узла** — каркас состоит ровно из того, что передали.
+Зоны рисуются смысловыми тегами: `<header>`, `<aside>`, `<main>`.
+
+**Правая панель существует, только когда её зона объявлена.** Оверлей под неё создаётся заранее
+(`rightOverlayReady()`), а `openRight()` без объявленной зоны — no-op.
+
+**`rightOpened` / `rightClosed` привязаны к `transitionend` панели.** Там, где анимаций нет
+(тест, `prefers-reduced-motion`), события не придут, а `rightOpen()` уже верен — смотреть надо
+на него.
+
+**Стопка уведомлений встроена в каркас** (`rt-toaster` внизу по центру): заводить её отдельно
+не нужно.
+
+## Рядом
+
+- [`rt-toaster`](../toast/CONTEXT.md) — та самая стопка.
+- [`rt-workspace`](../workspace/CONTEXT.md) — трёхколоночная раскладка внутри содержимого.