@rt-tools/ui-kit-v2 0.18.0 → 0.19.0

package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup.component.scss

@@ -4,42 +4,63 @@
     /* rt-dynamic-selector-popup — панель выбора в CDK Overlay. ViewEncapsulation.None.
        Размер и вид сняты с кадров первого кита: 20rem на 30rem, поверхность с рамкой и тенью. */
 
+    /* Свойства окна приложение задаёт на любом предке — на панели оверлея или на своём контейнере:
+       на самом окне объявлены только умолчания с приставкой `-default`, а читается свойство с
+       запасным значением. Объявленное на окне под публичным именем перебило бы правило предка. */
     .rt-dynamic-selector-popup {
-        --rt-dynamic-selector-popup-width: calc(var(--rt-size-40) * 2);
-        --rt-dynamic-selector-popup-max-height: calc(var(--rt-size-100) + var(--rt-size-20));
-        --rt-dynamic-selector-popup-radius: var(--rt-radius-md);
-        --rt-dynamic-selector-popup-border-width: var(--rt-border-width-thin);
-        --rt-dynamic-selector-popup-shadow: var(--rt-shadow-lg);
+        --rt-dynamic-selector-popup-width-default: calc(var(--rt-size-40) * 2);
+        --rt-dynamic-selector-popup-max-height-default: calc(var(--rt-size-100) + var(--rt-size-20));
+        --rt-dynamic-selector-popup-radius-default: var(--rt-radius-md);
+        --rt-dynamic-selector-popup-border-width-default: var(--rt-border-width-thin);
+        --rt-dynamic-selector-popup-shadow-default: var(--rt-shadow-lg);
+        --rt-dynamic-selector-popup-bg-default: var(--rt-color-bg-surface);
+        --rt-dynamic-selector-popup-min-height-default: 0;
+        --rt-dynamic-selector-popup-padding-default: var(--rt-space-md);
+        --rt-dynamic-selector-popup-foot-border-width-default: var(
+            --rt-dynamic-selector-popup-border-width,
+            var(--rt-dynamic-selector-popup-border-width-default)
+        );
+        --rt-dynamic-selector-popup-nav-color-default: var(--rt-color-text-link);
+
+        /* Кнопки «Отмена» и «Применить» по умолчанию той же высоты и кегля, что кнопка кита среднего шага. */
+        --rt-dynamic-selector-popup-button-height-default: var(--rt-control-height-md);
+        --rt-dynamic-selector-popup-button-font-size-default: 0.95rem;
+
+        /* Заглушка «ничего не нашлось» по умолчанию повторяет свойства самой заглушки. */
+        --rt-dynamic-selector-popup-empty-icon-size-default: var(--rt-size-8);
+        --rt-dynamic-selector-popup-empty-icon-wrap-bg-default: var(--rt-color-bg-subtle);
+        --rt-dynamic-selector-popup-empty-text-size-default: var(--rt-text-md);
+        --rt-dynamic-selector-popup-empty-text-weight-default: var(--rt-font-weight-medium);
+        --rt-dynamic-selector-popup-empty-text-color-default: var(--rt-color-text-primary);
 
         display: flex;
-        width: var(--rt-dynamic-selector-popup-width);
+        width: var(--rt-dynamic-selector-popup-width, var(--rt-dynamic-selector-popup-width-default));
         max-width: calc(100vw - var(--rt-space-md) * 2);
-        max-height: var(--rt-dynamic-selector-popup-max-height);
+        min-height: var(--rt-dynamic-selector-popup-min-height, var(--rt-dynamic-selector-popup-min-height-default));
+        max-height: var(--rt-dynamic-selector-popup-max-height, var(--rt-dynamic-selector-popup-max-height-default));
         box-sizing: border-box;
         flex-direction: column;
-        border: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
-        border-radius: var(--rt-dynamic-selector-popup-radius);
-        background: var(--rt-color-bg-surface);
-        box-shadow: var(--rt-dynamic-selector-popup-shadow);
+        border: var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid
+            var(--rt-color-border-subtle);
+        border-radius: var(--rt-dynamic-selector-popup-radius, var(--rt-dynamic-selector-popup-radius-default));
+        background: var(--rt-dynamic-selector-popup-bg, var(--rt-dynamic-selector-popup-bg-default));
+        box-shadow: var(--rt-dynamic-selector-popup-shadow, var(--rt-dynamic-selector-popup-shadow-default));
         color: var(--rt-color-text-primary);
         gap: var(--rt-space-sm);
-        padding-block: var(--rt-space-md);
+        padding-block: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
 
         &__head {
             display: flex;
             flex-direction: column;
             gap: var(--rt-space-sm);
-            padding-inline: var(--rt-space-md);
-        }
-
-        &__search {
-            display: block;
+            padding-inline: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
         }
 
         &__controls {
             display: flex;
             flex-direction: column;
-            border-bottom: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+            border-bottom: var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid
+                var(--rt-color-border-subtle);
 
             /* Строка переключателя и «Выбрать все» — два разных решения; при зазоре 2xs флажок
                прилипал к переключателю и читался его частью. */
@@ -84,8 +105,11 @@
             display: block;
         }
 
+        // Тело окна — загрузка, список или пустой результат — занимает высоту, которую оставили шапка и
+        // футер: при заданной наименьшей высоте окна футер стоит у нижней кромки, а не под коротким телом.
         &__state {
             display: flex;
+            flex: 1 1 auto;
             align-items: center;
             justify-content: center;
             padding: var(--rt-space-md);
@@ -97,7 +121,7 @@
             flex: 1 1 auto;
             flex-direction: column;
             overflow-y: auto;
-            padding-inline: var(--rt-space-md);
+            padding-inline: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
         }
 
         // Шаг строки снят с первого кита: флажок и по отступу сверху и снизу — около 36px.
@@ -106,7 +130,8 @@
             padding-block: var(--rt-space-sm);
 
             &--separated {
-                border-bottom: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+                border-bottom: var(--rt-dynamic-selector-popup-border-width, var(--rt-dynamic-selector-popup-border-width-default)) solid
+                    var(--rt-color-border-subtle);
                 margin-block-end: var(--rt-space-2xs);
                 padding-block-end: var(--rt-space-sm);
             }
@@ -129,18 +154,44 @@
         }
 
         &__empty {
-            display: block;
-            padding-inline: var(--rt-space-md);
+            flex: 1 1 auto;
+            padding-inline: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
+        }
+
+        /* Свойства заглушки переставляются правилом из двух классов: объявление самой заглушки
+           стоит на том же элементе, и одним классом его не перебить. */
+        &__empty.rt-empty-state {
+            --rt-empty-state-icon-size: var(
+                --rt-dynamic-selector-popup-empty-icon-size,
+                var(--rt-dynamic-selector-popup-empty-icon-size-default)
+            );
+            --rt-empty-state-icon-wrap-bg: var(
+                --rt-dynamic-selector-popup-empty-icon-wrap-bg,
+                var(--rt-dynamic-selector-popup-empty-icon-wrap-bg-default)
+            );
+            --rt-empty-state-title-size: var(
+                --rt-dynamic-selector-popup-empty-text-size,
+                var(--rt-dynamic-selector-popup-empty-text-size-default)
+            );
+            --rt-empty-state-title-weight: var(
+                --rt-dynamic-selector-popup-empty-text-weight,
+                var(--rt-dynamic-selector-popup-empty-text-weight-default)
+            );
+            --rt-empty-state-title-color: var(
+                --rt-dynamic-selector-popup-empty-text-color,
+                var(--rt-dynamic-selector-popup-empty-text-color-default)
+            );
         }
 
         &__foot {
             display: flex;
             align-items: center;
             justify-content: flex-end;
-            border-top: var(--rt-dynamic-selector-popup-border-width) solid var(--rt-color-border-subtle);
+            border-top: var(--rt-dynamic-selector-popup-foot-border-width, var(--rt-dynamic-selector-popup-foot-border-width-default)) solid
+                var(--rt-color-border-subtle);
             gap: var(--rt-space-sm);
             padding-block-start: var(--rt-space-sm);
-            padding-inline: var(--rt-space-md);
+            padding-inline: var(--rt-dynamic-selector-popup-padding, var(--rt-dynamic-selector-popup-padding-default));
 
             &--nav {
                 justify-content: space-between;
@@ -151,7 +202,7 @@
         &__nav {
             overflow: hidden;
             min-width: 0;
-            color: var(--rt-color-text-link);
+            color: var(--rt-dynamic-selector-popup-nav-color, var(--rt-dynamic-selector-popup-nav-color-default));
             font-size: var(--rt-text-sm);
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -166,5 +217,13 @@
             flex: 0 0 auto;
             gap: var(--rt-space-sm);
         }
+
+        &__actions .rt-button {
+            --rt-btn-height: var(--rt-dynamic-selector-popup-button-height, var(--rt-dynamic-selector-popup-button-height-default));
+            --rt-btn-font-size: var(
+                --rt-dynamic-selector-popup-button-font-size,
+                var(--rt-dynamic-selector-popup-button-font-size-default)
+            );
+        }
     }
 }

package/src/lib/components/empty-state/CONTEXT.md

@@ -34,7 +34,8 @@
 - Слот действия существует всегда, даже пустым; прячет его `:empty` в стилях.
 - Размеры и подложка — свойства блока: `--rt-empty-state-icon-wrap-size`,
   `--rt-empty-state-icon-wrap-bg`, `--rt-empty-state-icon-size`, `--rt-empty-state-title-size`,
-  `--rt-empty-state-title-weight`. Список ставит им назначения `--rt-list-empty-*`. Под
+  `--rt-empty-state-title-weight`, `--rt-empty-state-title-color`,
+  `--rt-empty-state-description-size`. Список ставит им назначения `--rt-list-empty-*`. Под
   материальным набором его заглушка рисуется как у первого кита: значок 48px без круга, заголовок
   32px весом 400.
 

package/src/lib/components/empty-state/rt-empty-state.component.scss

@@ -13,6 +13,8 @@
         --rt-empty-state-icon-size: var(--rt-size-8);
         --rt-empty-state-title-size: var(--rt-text-md);
         --rt-empty-state-title-weight: var(--rt-font-weight-medium);
+        --rt-empty-state-title-color: var(--rt-color-text-primary);
+        --rt-empty-state-description-size: var(--rt-text-sm);
         --rt-empty-state-frame-width: var(--rt-border-width-medium);
         --rt-empty-state-frame-color: var(--rt-color-border-strong);
         --rt-empty-state-frame-radius: var(--rt-radius-lg);
@@ -62,7 +64,7 @@
 
         &__title {
             margin: 0;
-            color: var(--rt-color-text-primary);
+            color: var(--rt-empty-state-title-color);
             font-size: var(--rt-empty-state-title-size);
             font-weight: var(--rt-empty-state-title-weight);
         }
@@ -71,7 +73,7 @@
             max-width: 320px;
             margin: 0;
             color: var(--rt-color-text-muted);
-            font-size: var(--rt-text-sm);
+            font-size: var(--rt-empty-state-description-size);
             line-height: var(--rt-leading-normal);
         }
 

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

@@ -4,19 +4,23 @@
 <rt-icon name="check" size="md" color="current" [rotate]="null" />
 ```
 
-| вход     | тип                                                                                 | умолчание   |
-| -------- | ----------------------------------------------------------------------------------- | ----------- |
-| `name`   | `IRtIcon.Name \| null` — литеральный union из `rt-icon-names.ts`; побеждает `glyph` | `null`      |
-| `glyph`  | `string \| null` — имя Material: пара кита или лигатура шрифта                      | `null`      |
-| `size`   | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| number` — число в пикселях        | `'md'`      |
-| `color`  | `'current' \| 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` | `'current'` |
-| `rotate` | `number \| string \| null`                                                          | `null`      |
-| `fill`   | `boolean` — залитый рисунок материального набора и заливка шрифта лигатуры          | `false`     |
-| `spin`   | `boolean` — вращение, медленнее при просьбе системы о меньшем движении              | `false`     |
+| вход            | тип                                                                                                                                                            | умолчание   |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `name`          | `IRtIcon.Name \| null` — литеральный union из `rt-icon-names.ts`; побеждает `glyph`                                                                            | `null`      |
+| `glyph`         | `string \| null` — имя Material: пара кита или лигатура шрифта                                                                                                 | `null`      |
+| `glyphStrategy` | `'map-first' \| 'font' \| null` — способ рисовать `glyph` у этого значка; `null` — настройка `provideRtIcons`                                                  | `null`      |
+| `size`          | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| number` — ступень берёт свойство `--rt-icon-step-*`, число — пиксели                       | `'md'`      |
+| `color`         | `'current' \| 'primary' \| 'muted' \| 'disabled' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'inverse'` — кроме `current`, свойство `--rt-icon-color-*` | `'current'` |
+| `rotate`        | `number \| string \| null`                                                                                                                                     | `null`      |
+| `fill`          | `boolean` — залитый рисунок материального набора и заливка шрифта лигатуры                                                                                     | `false`     |
+| `spin`          | `boolean` — вращение, медленнее при просьбе системы о меньшем движении                                                                                         | `false`     |
 
-Выходов нет. Размер и цвет едут инлайновым стилем host-а (`width`/`height`/`color`), не классом:
-`xs` 12px, `sm` 16px, `md` 20px, `lg` 24px, `xl` 32px, `2xl` 40px, или число пикселей. Лигатура
-глифа скрыта, пока шрифты страницы не готовы: её ждёт `RtIconFontService`.
+Выходов нет. Размер и цвет едут инлайновым стилем host-а (`width`/`height`/`color`), не классом.
+Ступень — свойство `--rt-icon-step-<ступень>`, по умолчанию `xs` 12px, `sm` 16px, `md` 20px,
+`lg` 24px, `xl` 32px, `2xl` 40px, `3xl` 48px, `4xl` 64px; число — пиксели. Цвет, кроме `current`, —
+свойство `--rt-icon-color-<цвет>` с ролью кита по умолчанию. Оси шрифта лигатуры — свойства
+`--rt-icon-glyph-weight`, `-grade`, `-opsz`. Лигатура глифа скрыта, пока шрифты страницы не готовы:
+её ждёт `RtIconFontService`.
 
 ## Главное, что нужно знать
 

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

@@ -19,15 +19,25 @@
 
         /* Лигатура шрифта Material Symbols для глифа без пары. Шрифт подключает приложение,
            семью можно переназначить свойством сверху. Размер шрифта — встроенным стилем, он равен
-           ширине значка. До готовности шрифтов лигатура скрыта: иначе на её месте видно слово. */
+           ширине значка. До готовности шрифтов лигатура скрыта: иначе на её месте видно слово.
+           Оси шрифта — вес, градация и оптический размер — приложение задаёт свойствами сверху,
+           заливка идёт от входа `fill` и переставляется модификатором. Оптический размер по
+           умолчанию — сторона значка: её пишет компонент встроенным стилем, как делал браузер. */
         &__glyph {
+            --rt-icon-glyph-fill: 0;
+            --rt-icon-glyph-opsz-auto: 24;
+
             display: block;
             overflow: hidden;
             width: 100%;
             font-family: var(--rt-icon-glyph-font, 'Material Symbols Outlined'), sans-serif;
             font-feature-settings: 'liga';
             font-style: normal;
-            font-variation-settings: 'FILL' 0;
+            font-variation-settings:
+                'FILL' var(--rt-icon-glyph-fill),
+                'wght' var(--rt-icon-glyph-weight, 400),
+                'GRAD' var(--rt-icon-glyph-grade, 0),
+                'opsz' var(--rt-icon-glyph-opsz, var(--rt-icon-glyph-opsz-auto));
             font-weight: var(--rt-font-weight-regular);
             letter-spacing: normal;
             line-height: 1;
@@ -36,7 +46,7 @@
             white-space: nowrap;
 
             &--filled {
-                font-variation-settings: 'FILL' 1;
+                --rt-icon-glyph-fill: 1;
             }
 
             &--pending {

package/src/lib/components/prompt-suggestion/CONTEXT.md

@@ -0,0 +1,29 @@
+# `rt-prompt-suggestion`
+
+```html
+@for (q of suggestions(); track q) {
+<rt-prompt-suggestion [label]="q" (picked)="ask($event)" />
+}
+```
+
+| вход       | тип       | умолчание  |
+| ---------- | --------- | ---------- |
+| `label`    | `string`  | обязателен |
+| `disabled` | `boolean` | `false`    |
+
+Выход: `picked` — текст вопроса.
+
+Спек — `docs/specs/ui-kit-v2/prompt-suggestion/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Карточка занимает всю ширину родителя**, стрелка прижата к правому краю. В столбце подсказок
+разной длины стрелки стоят на одной вертикали.
+
+## Края
+
+- Класс блока висит и на хосте, и на кнопке: правила вложены в селектор хоста.
+
+## Рядом
+
+- [`rt-empty-state`](../empty-state/CONTEXT.md) — пустой экран, на котором стоят подсказки.

package/src/lib/components/prompt-suggestion/rt-prompt-suggestion.component.scss

@@ -0,0 +1,58 @@
+@layer rt-kit.components {
+    /* rt-prompt-suggestion — карточка готового вопроса. ViewEncapsulation.None.
+       Класс блока висит и на хосте, и на кнопке шаблона, поэтому правила вложены в хост. */
+
+    rt-prompt-suggestion {
+        display: block;
+
+        .rt-prompt-suggestion {
+            --rt-prompt-suggestion-radius: var(--rt-radius-lg);
+            --rt-prompt-suggestion-focus-shadow: var(--rt-shadow-focus-ring);
+            --rt-prompt-suggestion-transition-duration: var(--rt-duration-fast);
+
+            display: flex;
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-space-sm) var(--rt-space-md);
+            border: 0;
+            border-radius: var(--rt-prompt-suggestion-radius);
+            margin: 0;
+            background: var(--rt-color-bg-hover);
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+            gap: var(--rt-space-sm);
+            inline-size: 100%;
+            line-height: var(--rt-leading-snug);
+            text-align: start;
+            transition: background-color var(--rt-prompt-suggestion-transition-duration) ease;
+
+            &:hover:not(:disabled) {
+                background: var(--rt-color-bg-subtle);
+            }
+
+            &:focus-visible {
+                box-shadow: var(--rt-prompt-suggestion-focus-shadow);
+                outline: 2px solid transparent;
+                outline-offset: 2px;
+            }
+
+            &:disabled {
+                color: var(--rt-color-text-disabled);
+                cursor: default;
+            }
+
+            &__label {
+                min-inline-size: 0;
+            }
+
+            &__arrow {
+                flex: none;
+                color: var(--rt-color-text-muted);
+            }
+        }
+    }
+}

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

@@ -28,6 +28,10 @@
 Тот же массив строк передаётся входом `[rtThreadListRow]` в шаблон строки: из него выводится тип
 `row`. Без этого входа строгая сборка приложения отказывает — атрибут без значения приходит строкой.
 
+Действия строки — `<ng-template let-row [rtThreadListRowActions]="rows()">`: кнопки стоят поверх
+правого края строки, рядом с её кнопкой, а не внутри: вложенная кнопка в `<button>` недопустима и
+забирала бы клик выбора. Видны при наведении и фокусе. Без шаблона строка стоит без обёртки.
+
 ## Главное, что нужно знать
 
 **Ctrl/Cmd+клик просит открыть в новой вкладке, а не выбирает строку.** Список — это навигация,

package/src/lib/components/thread-list/rt-thread-list.component.scss

@@ -125,6 +125,35 @@
             }
         }
 
+        // Действия строки стоят поверх правого края строки, а не внутри её кнопки: вложенная
+        // кнопка в `<button>` недопустима. Подложка повторяет фон строки, чтобы закрыть время.
+        &__row-wrap {
+            position: relative;
+
+            &:hover .rt-thread-list__row-actions,
+            &:focus-within .rt-thread-list__row-actions {
+                opacity: 1;
+                pointer-events: auto;
+            }
+        }
+
+        &__row-actions {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            background: var(--rt-color-bg-subtle);
+            gap: var(--rt-space-1);
+            inset-block: 0;
+            inset-inline-end: 0;
+            opacity: 0;
+            padding-inline: var(--rt-space-2) var(--rt-space-4);
+            pointer-events: none;
+        }
+
+        &__row--active + .rt-thread-list__row-actions {
+            background: var(--rt-color-state-info-bg);
+        }
+
         &__row-body {
             display: flex;
             flex-direction: column;

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

@@ -23,3 +23,7 @@
 
 **Отступ полосы сверху и снизу — свойства блока** `--rt-toolbar-padding-top` и
 `--rt-toolbar-padding-bottom`, по умолчанию 8px. Список ставит им свои имена.
+
+**Плотная полоса остаётся строкой на любой ширине, и её левая часть сжимается.** Длинный
+заголовок в ней переносится по словам и не выходит за правый край. Кнопки справа держат свою
+ширину. Обычная полоса левую часть не сжимает: на узком экране она стекает в колонку.

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

@@ -65,6 +65,13 @@
         }
     }
 
+    // Плотная полоса не стекает в колонку, и длинный заголовок левой зоны ей некуда деть: зона
+    // сжимается, а заголовок переносится по словам. Правая зона с кнопками держит свою ширину
+    .rt-toolbar--dense .rt-toolbar__bar--left {
+        min-width: 0;
+        flex: 0 1 auto;
+    }
+
     // Мобилка: три зоны не влезают в строку — стекаем в колонку на всю ширину
     // (фильтр → поиск → действия), поиск растягивается. `--dense` (компактная
     // шапка вроде rt-chat) из стекинга исключён — остаётся в одну строку.

package/src/rich-editor/lib/components/ai-chat/CONTEXT.md

@@ -0,0 +1,58 @@
+# `rt-ai-chat`
+
+```html
+<rt-ai-chat
+    title="Ava"
+    placeholder="Ask Ava…"
+    fullScreenable
+    [messages]="messages()"
+    [suggestions]="suggestions"
+    [sending]="running()"
+    [error]="runError()"
+    [threads]="threads()"
+    [activeThreadId]="threadId()"
+    [(fullScreen)]="fullScreen"
+    (send)="ask($event)"
+    (stop)="stop()"
+    (retry)="retry()"
+    (newThread)="newThread()"
+    (selectThread)="open($event)"
+    (deleteThread)="confirmDelete($event)"
+    (feedbackChange)="rate($event)"
+    (closed)="close()">
+    <ng-template let-message rtAiChatMessageExtra>…графики ответа…</ng-template>
+</rt-ai-chat>
+```
+
+Спек — `docs/specs/ui-kit-v2/ai-chat/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Организм презентационный.** Сообщения с ходом работы, беседы и ошибка приходят входами, действия
+уходят выходами. Поток событий модели разбирает приложение и отдаёт готовый `IRtAiChat.Message[]`.
+
+**Живёт во входе `rich-editor`**: держит `rt-message-composer`, а тот тянет quill.
+
+**Высоту задаёт родитель.** Хост — колонка на `block-size: 100%`; без высоты у родителя лента
+меряется по содержимому и не прокручивается.
+
+## Края
+
+- `fullScreen`, `threadsOpen`, `draft` — `model()`: атрибут без значения даёт пустую строку, то
+  есть ложь. Пишется `[fullScreen]="true"`.
+- Фокус переводит сам организм: на «назад» при открытии бесед, в поле сообщения после выбора
+  беседы, новой беседы, «Стоп» и возврата к ленте. Приложению — `focusComposer()`.
+- Открытые шаги хода работы — внутреннее состояние (`openRuns`), по id ответа.
+- Лента держится у низа, пока человек внизу: `nextAtBottom` и `RT_CHAT_PIN_RETRY_DELAYS_MS` из
+  логики `rt-chat`. Отправка вопроса и выбор беседы прижимают ленту к низу всегда.
+- Удаление беседы — действие строки `rt-thread-list` (`rtThreadListRowActions`), подтверждение —
+  на приложении.
+- Подсветка совпадений поиска по беседам — `splitSideMenuTitle`.
+- Ответ рисует внутренний `rt-ai-chat-answer` (папка `answer/`): без него шаблон организма
+  превышает предел цикломатической сложности.
+
+## Рядом
+
+- [`rt-chat`](../chat/CONTEXT.md) — переписка людей.
+- [`rt-ai-run-status`](../../../../lib/components/ai-run-status/CONTEXT.md) — строка хода работы.
+- [`rt-thread-list`](../../../../lib/components/thread-list/CONTEXT.md) — список бесед.

package/src/rich-editor/lib/components/ai-chat/answer/rt-ai-chat-answer.component.scss

@@ -0,0 +1,12 @@
+@layer rt-kit.components {
+    .rt-ai-chat-answer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-sm);
+
+        &__feedback {
+            display: flex;
+            gap: var(--rt-space-xs);
+        }
+    }
+}