@sberbusiness/triplex-next-mcp-server 1.41.0-beta → 1.42.0-beta

package/bundle/components/ComposedKeyDownListener.md

@@ -0,0 +1,323 @@
+---
+component: ComposedKeyDownListener
+category: KeyDownListener
+related: [KeyDownListener, TriggerClickOnKeyDownEvent, SelectExtendedField, SliderExtended]
+tokens: []
+stories: stories/ComposedKeyDownListener/ComposedKeyDownListener.stories.tsx
+version: "1.0"
+---
+
+# ComposedKeyDownListener
+
+## Назначение
+
+Сервисный headless-компонент, композитор `KeyDownListener`. Принимает массив
+конфигураций `keyDownListeners` и рендерит по одному `KeyDownListener` на элемент
+массива — соседями к `children`. Каждый слушатель подписывается на `keydown` на
+`window` независимо, поэтому компонент — это только способ описать несколько
+горячих клавиш одним объявлением вместо ручного вложения нескольких
+`KeyDownListener`.
+
+Собственной разметки не рендерит: `children` выводятся как есть, без обёртки;
+без `children` (и при любом наборе слушателей) DOM остаётся пустым — сами
+`KeyDownListener` рендерят `null`.
+
+Используй когда: у экрана или оверлея несколько глобальных горячих клавиш с
+разными обработчиками — `Enter` подтверждает, `Esc` отменяет, стрелки листают.
+
+Не используй когда:
+- Клавиша всего одна — достаточно `KeyDownListener` напрямую.
+- Клавиши разные, но обработчик один — у `KeyDownListener` `eventKeyCode`
+  принимает массив кодов; различить нажатую можно по `event.keyCode`.
+- Клавиша должна обрабатываться только внутри конкретного элемента — навесь
+  `onKeyDown` на сам элемент: слушатели здесь глобальные и сработают при вводе в
+  любое поле на странице.
+- Нужно кликнуть по конкретной кнопке по нажатию клавиши — есть готовый
+  `TriggerClickOnKeyDownEvent`.
+
+---
+
+## Варианты и props
+
+### Обязательные props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `keyDownListeners` | `IKeyDownListenerProps[]` | Конфигурация слушателей. Из каждого элемента используются только `eventKeyCode` и `onMatch`; поле `children` элемента игнорируется — содержимое задаётся `children` самого композитора |
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `children` | `React.ReactNode` | — | Рендерится как есть, без обёртки. При пустом `keyDownListeners` компонент сводится к `children` |
+
+### Особенности поведения
+
+- Слушатели рендерятся **соседями** к `children`
+  (`<>{listeners}{children}</>`), а не оборачивают их. Поэтому `children` не
+  зависят от длины и порядка массива: набор горячих клавиш можно менять между
+  рендерами, содержимое при этом не перемонтируется — DOM-узлы, значения
+  инпутов, фокус и анимации сохраняются.
+- `onMatch` вызываются в порядке элементов `keyDownListeners`: слушатели
+  монтируются в порядке массива, а `window` вызывает обработчики в порядке
+  подписки. На нём завязан только порядок вызова — «перехватить» событие у
+  соседнего слушателя нельзя, все подписаны на `window` независимо.
+- Несколько элементов массива могут слушать одну и ту же клавишу — сработают
+  все.
+- Слушатели подписываются на `window` **до** `children`, потому что монтируются
+  раньше них. Если внутри `children` есть собственный глобальный
+  `keydown`-обработчик той же клавиши, `onMatch` сработает первым.
+- Компонент ничего не мемоизирует: массив можно собирать инлайн в рендере.
+  Каждый `KeyDownListener` читает свежие `eventKeyCode` и `onMatch` из props в
+  момент события, переподписки на новые ссылки не происходит.
+- `keyDownListeners` сопоставляются между рендерами по индексу (`key={index}`).
+  Для элементов конфигурации это безопасно: `KeyDownListener` не рендерит
+  разметку и не хранит внутренний state, поэтому переиспользование инстанса по
+  позиции наблюдаемого эффекта не даёт.
+
+---
+
+## Дизайн-токены
+
+Собственных стилей и CSS-переменных нет — компонент не рендерит разметку.
+
+---
+
+## Инварианты
+
+- **Имя prop `keyDownListeners`, `children` и интерфейс
+  `IComposedKeyDownListenerProps`** (экспортируется из barrel
+  `src/components/KeyDownListener/index.ts`) — публичное API, не менять.
+- **Элементы `keyDownListeners` типизированы `IKeyDownListenerProps`** —
+  переиспользование типа `KeyDownListener` осознанное; не заводить отдельный тип
+  ради «более узкого» `Pick`, это сузит публичный контракт.
+- **Плоский рендер слушателей** — не возвращаться к вложению
+  (`reduce` с оборачиванием `children`): вложенность делает глубину дерева
+  зависимой от длины массива и перемонтирует `children` при её изменении.
+- **Собственной разметки нет** — не добавлять обёртку (`div`, `span`) вокруг
+  `children`: потребители рассчитывают, что компонент прозрачен для layout,
+  в том числе внутри flex/grid-контейнеров.
+- **Без `forwardRef`** — осознанное исключение, как и у `KeyDownListener`:
+  компонент не рендерит собственный host-элемент, форвардить `ref` некуда.
+- Реализация остаётся React 17-совместимой (функциональный компонент без
+  React 18-only API): код синхронизируется в `release-0`.
+
+---
+
+## Accessibility
+
+- Собственной ARIA-семантики нет — компонент прозрачен для accessibility-дерева
+  и не рендерит фокусируемых элементов.
+- Горячие клавиши глобальные: перехватываются независимо от позиции фокуса и не
+  анонсируются screen reader'ом. Действия, повешенные на клавиши, должны быть
+  доступны и обычным путём (кнопкой) — шорткат не единственный способ выполнить
+  действие.
+- Компонент не проверяет, где находится фокус: `Enter` и `Esc` сработают и во
+  время ввода в поле. Если это нежелательно, фильтруй в `onMatch` по
+  `event.target`.
+
+---
+
+## Связанные компоненты
+
+- `KeyDownListener` (`src/components/KeyDownListener/KeyDownListener.tsx`) —
+  элементарный слушатель, из которого собирается композитор; там же описано
+  сравнение по устаревшему `event.keyCode` и константы `EVENT_KEY_CODES`.
+- `TriggerClickOnKeyDownEvent` (`src/components/Triggers/`) — по нажатию клавиши
+  вызывает `click` на элементе из `targetRef`.
+- `SelectExtendedField`, `SliderExtendedDot`, `SliderExtendedTrack` — потребители
+  `KeyDownListener` внутри библиотеки.
+
+---
+
+## Stories
+
+Основные истории: `stories/ComposedKeyDownListener/ComposedKeyDownListener.stories.tsx`
+Файлы примеров: `stories/ComposedKeyDownListener/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Набор клавиш выбирается чекбоксами: слушатели пересобираются, введённый текст сохраняется |
+| `Default` | `Default.tsx` | Две клавиши с разными обработчиками: `Enter` подтверждает, `Esc` отменяет |
+| `WithDynamicListeners` | `WithDynamicListeners.tsx` | Слушатель добавляется на лету — `children` не перемонтируются |
+| `Example` | `Example.tsx` | Панель подтверждения: горячие клавиши смонтированы вместе с панелью, те же действия доступны кнопками |
+
+Набор целиком исключён из скриншот-тестов (`testRunner: { skip: true }` в `meta`):
+собственной разметки компонент не рендерит, на скриншот попадала бы только
+обвязка примеров. Поведение слушателей покрыто unit-тестами.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-08-11 | Создан документ (TRI-112). Слушатели рендерятся соседями к `children` вместо вложения — смена длины `keyDownListeners` больше не перемонтирует содержимое (покрыто unit-тестом). Добавлен собственный набор stories по modern pattern; демонстрационная story `Example` перенесена из набора `KeyDownListener`. Публичный API не изменён. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/ComposedKeyDownListener/examples/Default.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ComposedKeyDownListener, EVENT_KEY_CODES } from "@sberbusiness/triplex-next";
+
+export const Default = () => {
+    const [result, setResult] = useState("Ожидание нажатия клавиши");
+
+    const keyDownListeners = [
+        { eventKeyCode: EVENT_KEY_CODES.ENTER, onMatch: () => setResult("Подтверждено по Enter") },
+        { eventKeyCode: EVENT_KEY_CODES.ESCAPE, onMatch: () => setResult("Отменено по Esc") },
+    ];
+
+    return (
+        <ComposedKeyDownListener keyDownListeners={keyDownListeners}>
+            <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "400px" }}>
+                <div>Две горячие клавиши с разными обработчиками: Enter подтверждает, Esc отменяет.</div>
+                <div style={{ border: "1px dashed rgb(125, 131, 138)", borderRadius: "4px", padding: "16px" }}>
+                    {result}
+                </div>
+            </div>
+        </ComposedKeyDownListener>
+    );
+};
+```
+
+### WithDynamicListeners
+
+`stories/ComposedKeyDownListener/examples/WithDynamicListeners.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ComposedKeyDownListener, EVENT_KEY_CODES } from "@sberbusiness/triplex-next";
+
+export const WithDynamicListeners = () => {
+    const [arrowsEnabled, setArrowsEnabled] = useState(false);
+    const [result, setResult] = useState("Ожидание нажатия клавиши");
+
+    const keyDownListeners = [
+        { eventKeyCode: EVENT_KEY_CODES.ESCAPE, onMatch: () => setResult("Отменено по Esc") },
+        ...(arrowsEnabled
+            ? [
+                  {
+                      eventKeyCode: [EVENT_KEY_CODES.ARROW_LEFT, EVENT_KEY_CODES.ARROW_RIGHT],
+                      onMatch: (event: KeyboardEvent) =>
+                          setResult(event.keyCode === EVENT_KEY_CODES.ARROW_LEFT ? "Стрелка влево" : "Стрелка вправо"),
+                  },
+              ]
+            : []),
+    ];
+
+    return (
+        <ComposedKeyDownListener keyDownListeners={keyDownListeners}>
+            <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "400px" }}>
+                <div>Набор слушателей меняется на лету — содержимое при этом не перемонтируется.</div>
+                <input type="text" placeholder="Введите текст" style={{ padding: "8px", width: "100%" }} />
+                <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                    <input
+                        type="checkbox"
+                        checked={arrowsEnabled}
+                        onChange={(event) => setArrowsEnabled(event.target.checked)}
+                    />
+                    Добавить слушатель стрелок — введённый текст и фокус сохранятся
+                </label>
+                <div style={{ border: "1px dashed rgb(125, 131, 138)", borderRadius: "4px", padding: "16px" }}>
+                    {result}
+                </div>
+            </div>
+        </ComposedKeyDownListener>
+    );
+};
+```
+
+### Example
+
+`stories/ComposedKeyDownListener/examples/Example.tsx`
+
+```tsx
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    ComposedKeyDownListener,
+    EButtonTheme,
+    EComponentSize,
+    EVENT_KEY_CODES,
+} from "@sberbusiness/triplex-next";
+
+export const Example = () => {
+    const [opened, setOpened] = useState(true);
+    const [status, setStatus] = useState("Черновик не сохранён");
+    const panelRef = useRef<HTMLDivElement>(null);
+
+    const handleSave = () => {
+        setStatus("Черновик сохранён");
+        setOpened(false);
+    };
+
+    const handleCancel = () => {
+        setStatus("Сохранение отменено");
+        setOpened(false);
+    };
+
+    // Слушатели глобальные, поэтому Enter на сфокусированной кнопке панели дошёл бы
+    // и до onMatch, и до её onClick. Отфильтровываем такие события по event.target —
+    // действие кнопки должно выигрывать у горячей клавиши.
+    const handleSaveOnEnter = (event: KeyboardEvent) => {
+        if (event.target instanceof HTMLButtonElement && panelRef.current?.contains(event.target)) {
+            return;
+        }
+
+        handleSave();
+    };
+
+    // Слушатели монтируются только вместе с панелью, поэтому горячие клавиши
+    // работают лишь пока она открыта.
+    const keyDownListeners = [
+        { eventKeyCode: EVENT_KEY_CODES.ENTER, onMatch: handleSaveOnEnter },
+        { eventKeyCode: EVENT_KEY_CODES.ESCAPE, onMatch: handleCancel },
+    ];
+
+    if (!opened) {
+        return (
+            <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "400px" }}>
+                <div>{status}</div>
+                <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => setOpened(true)}>
+                    Открыть панель снова
+                </Button>
+            </div>
+        );
+    }
+
+    return (
+        <ComposedKeyDownListener keyDownListeners={keyDownListeners}>
+            <div
+                ref={panelRef}
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "16px",
+                    maxWidth: "400px",
+                    border: "1px solid rgb(125, 131, 138)",
+                    borderRadius: "8px",
+                    padding: "16px",
+                }}
+            >
+                <div>Сохранить черновик? Enter — сохранить, Esc — отменить.</div>
+                <div style={{ display: "flex", gap: "8px" }}>
+                    <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD} onClick={handleSave}>
+                        Сохранить
+                    </Button>
+                    <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleCancel}>
+                        Отменить
+                    </Button>
+                </div>
+            </div>
+        </ComposedKeyDownListener>
+    );
+};
+```
+

package/bundle/components/FooterPage.md

@@ -39,7 +39,7 @@ version: "1.0"
 
 | Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `sticky` | `boolean` | `false` | Футер прилипает к нижней границе при скролле. **Только для `type=FIRST`** (внутри `LightBox`); для `type=SECOND` типизирован как `never`. |
+| `sticky` | `boolean` | `false` | Футер прилипает к нижней границе при скролле, если ширина viewport от 992px, а высота больше 800px. **Только для `type=FIRST`**; для `type=SECOND` типизирован как `never`. |
 | `size` | `EComponentSize` | — | Размер острова (Island). **Доступен только для `type=FIRST`**; для `type=SECOND` типизирован как `never`. |
 
 ### Ограничения по типам
@@ -111,6 +111,7 @@ version: "1.0"
 
 | Дата | Изменение |
 |---|---|
+| 2026-08-06 | Sticky-позиционирование доступно вне `LightBox` при ширине viewport от 992px и отключено при высоте viewport не больше 800px. |
 | 2026-06-19 | Создан документ. AI-рефакторинг (clsx order, JSDoc на props, displayName), unit-тесты, миграция stories на modern pattern. |
 
 ---

package/bundle/components/HeaderPage.md

@@ -40,7 +40,7 @@ version: "1.0"
 
 | Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `sticky` | `boolean` | `false` | Заголовок прилипает к верхней границе при скролле. **Только для `type=FIRST`** (внутри `LightBox`); для `type=SECOND` типизирован как `never`. |
+| `sticky` | `boolean` | `false` | Заголовок прилипает к верхней границе при скролле, если ширина viewport от 992px, а высота больше 800px. **Только для `type=FIRST`**; для `type=SECOND` типизирован как `never`. |
 | `size` | `EComponentSize` | — | Размер острова (Island). **Доступен только для `type=FIRST`**; для `type=SECOND` типизирован как `never`. |
 
 ### Ограничения по типам
@@ -114,6 +114,7 @@ version: "1.0"
 
 | Дата | Изменение |
 |---|---|
+| 2026-08-06 | Sticky-позиционирование доступно вне `LightBox` при ширине viewport от 992px и отключено при высоте viewport не больше 800px. |
 | 2026-06-23 | Создан документ. AI-рефакторинг (clsx order, JSDoc на props, displayName), unit-тесты, миграция stories на modern pattern. |
 
 ---

package/bundle/components/Island.md

@@ -1,7 +1,7 @@
 ---
 component: Island
 category: Layout
-related: [IslandAccordion, IslandWidget, BodyPage, HeaderPage, FooterPage, Confirm, ModalWindowBody]
+related: [IslandAccordion, IslandWidget, LoaderScreen, ModalWindow]
 tokens:
   - --triplex-next-Island-Type1_Background
   - --triplex-next-Island-Type1_Shadow
@@ -18,8 +18,9 @@ version: "1.0"
 ## Назначение
 
 Базовый контейнер-карточка библиотеки: `<div>` с фоном, тенью, скруглением и внутренними
-отступами. Собственной логики не имеет — задаёт поверхность, на которой лежит контент, и
-вертикальные отступы между своими частями `Island.Header`, `Island.Body`, `Island.Footer`.
+отступами. Собственной логики не имеет — задаёт поверхность, на которой лежит контент,
+вертикальные отступы между своими частями `Island.Header`, `Island.Body`, `Island.Footer` и
+состояние загрузки (`loading`), в котором поверх контента показывается `LoaderScreen`.
 
 Используй когда: контент нужно визуально выделить карточкой на фоне страницы — блок страницы
 (`BodyPage`, `HeaderPage`, `FooterPage`), диалог подтверждения (`Confirm`), элемент аккордеона
@@ -46,10 +47,39 @@ version: "1.0"
 |---|---|---|---|
 | `type` | `EIslandType` | `EIslandType.TYPE_1` | Визуальный тип. Влияет только на фон и тень, на размеры — нет |
 | `size` | `EComponentSize` | `EComponentSize.MD` | Скругление, внутренние отступы карточки и отступы между Header / Body / Footer |
+| `loading` | `boolean` | `false` | Показывает `LoaderScreen` поверх контента карточки |
+| `loaderScreenProps` | `ILoaderScreenMiddleProps` | `undefined` | Props лоадера: `description`, `controls`, `className` и остальные атрибуты `<div>`. `type` задаёт Island (`middle`) |
 
 Компонент расширяет `React.HTMLAttributes<HTMLDivElement>` — все стандартные атрибуты `<div>`
 (`className`, `style`, `role`, `aria-*`, `data-*`, обработчики событий) попадают на корневой элемент.
 
+### Состояние загрузки
+
+При `loading` последним потомком карточки рендерится `<LoaderScreen type="middle">` — абсолютно
+спозиционированный по всей карточке (`inset: 0` от padding-box, то есть включая внутренние отступы)
+блок с полупрозрачной подложкой и спиннером по центру.
+
+- **Контент остаётся в DOM** — он не размонтируется, только перекрывается подложкой. Форма под
+  лоадером остаётся заполненной и фокусируемой: лоадер не блокирует клавиатуру и не ставит
+  `inert`/`aria-hidden`. Если ввод нужно запретить, потребитель сам дизейблит контролы.
+- **Скругление подложки — `border-radius: inherit`**, поэтому лоадер повторяет скругление карточки
+  при любом `size` и в адаптиве. Дублировать значения по размерам не нужно.
+- **`z-index` лоадера внутри Island — `@z-index-step` (100), а не `@z-index-loader-screen` (10100)**
+  из его собственных стилей: правило `.island .islandLoaderScreen` перебивает базовое по
+  специфичности. Подложка перекрывает контент карточки, но не глобальные оверлеи (`Dropdown`,
+  `ModalWindow`, `Tooltip`), лежащие над ней. Тот же приём — у `List` и `TableBasic`.
+- **Лоадер идёт после `Island.Footer`**, поэтому селекторы отступов между частями
+  (`.islandBody + .islandFooter` и т.п.) он не ломает.
+- **Карточка не должна скроллиться.** Лоадер позиционируется абсолютно и растягивается по padding-box
+  карточки. Если потребитель задал Island `overflow: auto`/`scroll`, подложка окажется в
+  scrollable-overflow: она перекроет только область, видимую в начале прокрутки, и уедет вверх
+  вместе с контентом. Для скроллируемой области состояние загрузки вешают на нескроллируемого
+  родителя.
+- **В `ModalWindowBody` этих props нет** — `IModalWindowBodyProps` объявлен как
+  `Omit<IIslandProps, "loading" | "loaderScreenProps">` ровно по причине выше: тело модалки
+  скроллируется (`overflow: auto`). Состояние загрузки модального окна задаётся одноимёнными props
+  `ModalWindowContent` — он не скроллится и перекрывает окно целиком.
+
 ### Размеры
 
 | `size` | `border-radius` | `padding` | Отступ между частями | Адаптив (`max-width: @screen-sm-max`) |
@@ -142,6 +172,10 @@ Island — неинтерактивный контейнер: не выстав
 `role="dialog"` и `aria-modal="true"`, `IslandAccordion` кладёт внутрь `Island.Header` собственную
 `<button>` с `aria-expanded` / `aria-controls`.
 
+Состояние `loading` тоже не объявляется автоматически: `LoaderScreen` приносит внутрь только
+`role="status"` от `LoaderMiddle`. Если загрузку карточки должен озвучивать скринридер, потребитель
+передаёт `aria-busy="true"` в `Island` — как и у `Button` с prop `loading`.
+
 Важно: `Island.Header` — это `<div>`, а не заголовок. Если нужен семантический заголовок карточки,
 положи внутрь `Title` с нужным тегом или собственный `<h*>`. Текстовые строки компонент не
 хардкодит (библиотека мультиязычная).
@@ -150,21 +184,50 @@ Island — неинтерактивный контейнер: не выстав
 
 ## Связанные компоненты
 
+### Альтернативы (в `related`)
+
+- `IslandAccordion` — раскрывающиеся элементы. Строит на Island; `IslandAccordionFooter`
+  оборачивает `Island.Footer` и передаёт в него свой `className`. Опирается на хрупкую деталь:
+  гасит отступ Island через `margin-top: 0 !important`, поэтому правка селекторов отступов ломает
+  его молча.
+- `IslandWidget` — виджет со сворачиванием в адаптиве; использует Island как контейнер, но своими
+  Header / Body / Footer, а не частями Island.
+
+### Контракты (в `related`)
+
+- `LoaderScreen` — экран загрузки, который Island рендерит при `loading` (всегда `type="middle"`).
+  Настраивается через `loaderScreenProps` (`ILoaderScreenMiddleProps`).
+- `ModalWindow` — `IModalWindowBodyProps` наследует `IIslandProps` через
+  `Omit<IIslandProps, "loading" | "loaderScreenProps">`, поэтому `type` и `size` в
+  `ModalWindowBody` доступны, а состояние загрузки — нет: тело модалки скроллируется, лоадер
+  задаётся на `ModalWindowContent`. Своего AI.md у `ModalWindowBody` нет — он описан в
+  `ModalWindow-ai.md`. Он же — направление из «Не используй когда», если нужен overlay, а не
+  карточка в потоке.
+
+### Другие направления из «Не используй когда» (в `related` не входят)
+
+Отводы в другой класс задач — промах такого масштаба виден из «Назначения», ссылка не нужна.
+
+- `LightBox`, `LightBoxSideOverlay` — если нужен overlay, а не карточка в потоке. У
+  `LightBoxSideOverlay` своего AI.md нет, смотри `LightBox`.
+- `Gap`, `Row`, `Col` — если нужен только отступ или сетка без визуальной карточки.
+
+### Части Island (своего AI.md не имеют)
+
 - `IslandHeader` (`components/IslandHeader.tsx`, он же `Island.Header`) — шапка карточки.
-  Тривиальная `<div>`-обёртка без собственных props; отдельного AI.md не имеет.
+  Тривиальная `<div>`-обёртка без собственных props.
 - `IslandBody` (`components/IslandBody.tsx`, он же `Island.Body`) — основное содержимое.
   Тривиальная `<div>`-обёртка без собственных props.
 - `IslandFooter` (`components/IslandFooter.tsx`, он же `Island.Footer`) — подвал карточки.
   Тривиальная `<div>`-обёртка без собственных props.
-- `IslandAccordion` — строит на Island раскрывающиеся элементы; `IslandAccordionFooter`
-  оборачивает `Island.Footer` и передаёт в него свой `className`.
-- `IslandWidget` — виджет со сворачиванием в адаптиве; использует Island как контейнер, но своими
-  Header / Body / Footer, а не частями Island.
+
+### Потребители (в `related` не входят — ссылка стоит с их стороны)
+
 - `BodyPage`, `HeaderPage`, `FooterPage` — оборачивают контент страницы в Island с `TYPE_1`, если
   их тип `FIRST`.
-- `Confirm` — диалог подтверждения на Island `TYPE_1` с `Island.Body` внутри.
-- `ModalWindowBody` — тело модального окна; `IModalWindowBodyProps` расширяет `IIslandProps`,
-  поэтому `type` и `size` Island доступны и там.
+- `Confirm` — диалог подтверждения на Island `TYPE_1` с `Island.Body` внутри. Наследует интерфейс:
+  `IConfirmProps extends IIslandProps` (`Confirm/Confirm.tsx:11`), поэтому добавление prop в Island
+  меняет публичный API `Confirm` без правок в его коде.
 
 ---
 
@@ -175,10 +238,14 @@ Island — неинтерактивный контейнер: не выстав
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
-| `Playground` | — | Интерактивный контроль `type`, `size` и состава (Header / Body / Footer) |
+| `Playground` | — | Интерактивный контроль `type`, `size`, `loading` и состава (Header / Body / Footer) |
 | `Default` | `DefaultExample.tsx` | Минимальная карточка: Header + Body + Footer |
 | `Types` | `TypesExample.tsx` | Все значения `EIslandType` рядом |
 | `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG: скругление, паддинги, отступы между частями |
+| `Loading` | `Loading.tsx` | `loading`: `LoaderScreen` поверх контента карточки |
+
+Файлы примеров с постфиксом `Example` — локальный legacy-паттерн папки; новые примеры называются
+по имени story (`Loading.tsx`).
 
 ---
 
@@ -186,6 +253,8 @@ Island — неинтерактивный контейнер: не выстав
 
 | Дата | Изменение |
 |---|---|
+| 2026-08-11 | Prop состояния загрузки переименован `isLoading` → `loading` — по преобладающей в библиотеке конвенции boolean-props без префикса `is` (`loading` у `Button`, `List`, `Dropdown`, `Suggest`, `Table`). Prop ещё не выпускался, поэтому breaking change нет; `Omit` в `IModalWindowBodyProps` обновлён на `"loading"`. Поведение не изменилось. |
+| 2026-08-06 | `related` приведён к правилу `docs/ai/CONTEXT.md` → «Как заполнять `related` в AI.md»: убраны потребители (`BodyPage`, `HeaderPage`, `FooterPage`, `Confirm`), `ModalWindowBody` заменён родителем `ModalWindow`, добавлен `LoaderScreen`. Раздел «Связанные компоненты» разбит по типам связи. Добавлено состояние загрузки: props `isLoading` и `loaderScreenProps` — при `isLoading` поверх контента карточки рендерится `LoaderScreen` типа `middle`. Подложка наследует скругление карточки, `z-index` понижен до локального. `ModalWindowBody` эти props не наследует (`Omit`) — его тело скроллируется, лоадер там задаётся на `ModalWindowContent`. Добавлены story `Loading` и unit-тесты. Остальной публичный API не изменён. |
 | 2026-08-04 | Создан документ. AI-рефакторинг: JSDoc на props, значениях `EIslandType` и субкомпонентах, `displayName` у `IslandHeader` / `IslandBody` / `IslandFooter`, unit-тесты на все типы и размеры, части острова и `mapTypeToClassName`. Исправлено: `className` в `IslandHeader` и `IslandFooter` больше не затирает базовый класс компонента; побочный отступ в `IslandAccordion` погашен в стилях аккордеона, вид библиотечных компонентов не изменился. Публичный API не изменён. |
 
 ---
@@ -287,3 +356,22 @@ export const SizesExample = () => (
 );
 ```
 
+### Loading
+
+`stories/Island/examples/Loading.tsx`
+
+```tsx
+import React from "react";
+import { Island, EIslandType, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const Loading = () => (
+    <div style={{ maxWidth: 360 }}>
+        <Island type={EIslandType.TYPE_1} size={EComponentSize.MD} loading>
+            <Island.Header>Island Header</Island.Header>
+            <Island.Body>Island Body</Island.Body>
+            <Island.Footer>Island Footer</Island.Footer>
+        </Island>
+    </div>
+);
+```
+