@sberbusiness/triplex-next-mcp-server 0.24.0-beta1

package/bundle/components/OrderedList.md

@@ -0,0 +1,169 @@
+---
+component: OrderedList
+category: Typography
+figma-node: ""
+figma-file: ""
+related: [UnorderedList, Typography, Text]
+tokens: []
+stories: stories/OrderedList/OrderedList.stories.tsx
+version: "1.0"
+---
+
+# OrderedList
+
+## Назначение
+
+Семантический нумерованный список — `<ol>` с собственной нумерацией через
+CSS counter (а не нативные list-style-маркеры). Это даёт контроль над
+типографикой нумерации и позиционированием. Элементы — `<li>` с
+типографикой `Text size=B3`. Поддерживает `start` (с какой цифры начать).
+
+Используй когда: нужен пронумерованный список с типографикой проекта.
+Для маркированного — `UnorderedList`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/OrderedList/
+├── OrderedList.tsx      # forwardRef<HTMLOListElement> + Object.assign({Item})
+├── OrderedListItem.tsx  # forwardRef<HTMLLIElement>
+├── types.ts             # IOrderedListProps, IOrderedListItemProps
+├── index.ts             # Barrel
+├── styles/
+│   ├── OrderedList.module.less       # counter-reset
+│   └── OrderedListItem.module.less   # counter-increment + ::before
+└── __tests__/
+```
+
+---
+
+## Compound-структура
+
+```tsx
+<OrderedList start={5}>
+    <OrderedList.Item>Пятый</OrderedList.Item>
+    <OrderedList.Item>Шестой</OrderedList.Item>
+</OrderedList>
+```
+
+`OrderedList.Item` — единственный валидный child.
+
+---
+
+## Варианты и props
+
+### `IOrderedListProps extends React.OlHTMLAttributes<HTMLOListElement>`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `start` | `number` | — | С какой цифры начать (как у нативного `<ol>`). Влияет на CSS-counter (`--start-index-tx = start - 1`). |
+| `...OlHTMLAttributes` | — | — | Все атрибуты `<ol>`. |
+
+### `IOrderedListItemProps extends React.LiHTMLAttributes<HTMLLIElement>`
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `...LiHTMLAttributes` | — | Все атрибуты `<li>`. |
+
+Внутри: `<Text tag="li" size=B3>` — типографика B3 фиксирована.
+
+---
+
+## Ключевые особенности реализации
+
+### Нумерация — через CSS counter, не нативный list-style
+
+```less
+.orderedList {
+    --start-index-tx: 0;
+    list-style: none;
+    counter-reset: list-item-tx var(--start-index-tx);
+}
+.orderedListItem {
+    counter-increment: list-item-tx;
+    &::before { content: counter(list-item-tx) "."; ... }
+}
+```
+
+- **`list-style: none`** + `::before` с `counter()` — позволяет полностью контролировать визуал нумерации (font, цвет, позиционирование).
+- **`+ .orderedListItem { margin-top: 8px }`** — gap между соседними items.
+- **`position: absolute; left: 0`** на `::before` — нумерация ровняется по левому краю; `padding-left: 25px` на `<ol>` оставляет место.
+
+### `start` через CSS-переменную
+
+```tsx
+style={start !== undefined ? { ...style, "--start-index-tx": start - 1 } : style}
+```
+
+- React inline-style с CSS-переменной (`as keyof React.CSSProperties` cast — TS-хак).
+- `start - 1` потому что `counter-increment` срабатывает **до** рендера `::before`, поэтому нужно начать на 1 меньше.
+- Также пробрасывается **нативный `start` атрибут** на `<ol>` — для семантики (скринридеры, copy-paste).
+
+### `OrderedListItem` — типография зашита
+
+```tsx
+<Text tag="li" size={ETextSize.B3}>
+```
+
+- Размер **`B3`** — изменение требует копирования компонента или создания новой `size`-prop'ы.
+
+### `Object.assign` — `OrderedList.Item`
+
+Стандартный pattern для compound.
+
+### `data-tx` — версия пакета
+
+На обоих корнях (`<ol>` и `<li>`).
+
+---
+
+## Инварианты
+
+- **`<ol>` с `list-style: none`** — нумерация рисуется через CSS-counter (`::before` с `counter()`).
+- **`OrderedListItem` — `<li>` через `<Text tag="li" size=B3>`** — типография B3 не настраивается.
+- **`start - 1`** в CSS-переменной (counter-increment-механика). При смене на `counter-reset` без `-1` — начнётся со start+1.
+- **Gap = 8px** между items (`+ .orderedListItem`).
+- **`start` дублируется** в DOM (`<ol start>`) и CSS-переменной — оба источника правды (DOM — для семантики, CSS — для рендера).
+- **ForwardRef** на обоих компонентах.
+- **Compound — `OrderedList.Item`** через `Object.assign`.
+- **`--start-index-tx`** — публичное имя CSS-переменной; не переименовывать.
+
+---
+
+## Accessibility
+
+- `<ol>` + `<li>` — нативная семантика списка → скринридеры читают «список из N элементов, элемент 1 из N».
+- `start` пробрасывается в DOM — скринридер читает корректные номера.
+- `list-style: none` отключает **нативные маркеры**, но семантика `<ol>` сохраняется (Safari/VoiceOver на старых версиях иногда теряют семантику с `list-style: none` — известный edge case).
+- `::before` content `"1."` — может быть прочитан в зависимости от reader (не на всех — спецификация неоднозначна).
+
+---
+
+## Дизайн-токены
+
+Нет собственных. Типография — `B3` от `Text`. Размер padding-left = 25px, gap = 8px — захардкожены в LESS (не переменные).
+
+---
+
+## Связанные компоненты
+
+- `UnorderedList` — маркированный аналог.
+- `Text` (Typography) — типография элементов.
+- `ETextSize.B3` — размер.
+
+---
+
+## Stories
+
+`stories/OrderedList/OrderedList.stories.tsx`
+Примеры: `stories/OrderedList/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/Overlay.md

@@ -0,0 +1,237 @@
+---
+component: Overlay
+category: Overlays
+figma-node: ""
+figma-file: ""
+related: [SideOverlay, ModalWindow, LightBox]
+tokens: [triplex-next-Overlay-Panel_Background]
+stories: stories/Overlay/Overlay.stories.tsx
+version: "1.0"
+---
+
+# Overlay
+
+## Назначение
+
+Низкоуровневый строительный блок для всплывающих панелей с CSS-анимацией
+выезда из четырёх направлений (top/right/bottom/left). Сам компонент —
+**stage manager** жизненного цикла (opening → opened → closing → closed)
+и контейнер с position absolute/fixed; визуальная панель и затемнение —
+`Overlay.Panel` и `Overlay.Mask`, рендерятся через render-prop'ы.
+
+Используй когда: строишь свой нестандартный overlay (drawer, side-sheet)
+и нужны хуки на фазах жизненного цикла. Для готовых решений —
+`SideOverlay` (на основе Overlay), `ModalWindow`, `LightBox`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/Overlay/
+├── Overlay.tsx       # FC + slots; контейнер-обёртка, локальный closing для css-класса
+├── OverlayBase.tsx   # FC; render-prop, lifecycle (opening/closing), enum direction
+├── OverlayMask.tsx   # forwardRef; полупрозрачный фон
+├── OverlayPanel.tsx  # forwardRef; выезжающая панель + onTransitionEnd
+├── index.ts          # Barrel: Overlay, OverlayBase, OverlayMask, OverlayPanel + enum
+└── styles/Overlay.module.less
+```
+
+---
+
+## Compound-структура (через render-prop)
+
+```tsx
+<Overlay
+    direction={EOverlayDirection.RIGHT}
+    opened={opened}
+    setOpened={setOpened}
+    onOpen={...}
+    onClose={...}
+    fixed
+>
+    {(provided) => (
+        <>
+            <Overlay.Mask opened={provided.opened} onClick={() => provided.setOpened(false)} />
+            <Overlay.Panel {...provided}>
+                {/* контент */}
+            </Overlay.Panel>
+        </>
+    )}
+</Overlay>
+```
+
+`Overlay.children` — **функция**, не ReactNode. Получает `IOverlayChildrenProvideProps`.
+
+---
+
+## Варианты и props
+
+### Overlay — `IOverlayProps extends IOverlayBaseProps, Omit<HTMLAttributes<HTMLDivElement>, "children">`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `direction` | `EOverlayDirection` | (default `RIGHT` в `OverlayBase`) | Направление выезда. |
+| `opened` | `boolean` | — | Контролируемое состояние открытия. |
+| `setOpened` | `(opened: boolean) => void` | — | Сеттер `opened` (передаётся в render-prop). |
+| `fixed` | `boolean` | `false` | `position: fixed` (на всю страницу) vs `absolute` (поверх родителя). |
+| `onOpening` / `onOpen` / `onClosing` / `onClose` | `() => void` | — | Lifecycle-callback'и (см. ниже). |
+| `children` | `(props) => ReactElement` | — | render-prop. |
+| `...HTMLAttributes` | — | — | На корневой `<div>`. |
+
+### OverlayBase — `IOverlayBaseProps`
+
+То же подмножество, что и Overlay (без `fixed` и без HTML-атрибутов). Можно использовать **без** wrapper'а Overlay, если не нужна обёртка-`<div>`.
+
+### `IOverlayChildrenProvideProps`
+
+```ts
+{
+    direction: EOverlayDirection;
+    opened: boolean;
+    setOpened: (opened: boolean) => void;
+    closing: boolean;
+    opening: boolean;
+    setClosing: (closing: boolean) => void;
+    setOpening: (opening: boolean) => void;
+}
+```
+
+### EOverlayDirection
+
+`BOTTOM | LEFT | RIGHT | TOP`.
+
+### OverlayMask — `IOverlayMaskProps extends Pick<IOverlayChildrenProvideProps, "opened">, HTMLAttributes<HTMLDivElement>`
+
+- `opened: boolean` — управляет CSS-классом `overlayOpened` (тригерит fade-in).
+- `forwardRef<HTMLDivElement>`.
+- Не реагирует на клик сам — потребитель вешает `onClick` для закрытия.
+
+### OverlayPanel — `IOverlayPanelProps extends HTMLAttributes<HTMLDivElement>, IOverlayChildrenProvideProps`
+
+- `forwardRef<HTMLDivElement>`.
+- Внутренний `onTransitionEnd` сбрасывает `closing`/`opening` в `false` **только если** `event.target === currentTarget` (защита от вложенных transitions).
+- Контент оборачивается в `<div className={overlayContent}>`.
+
+---
+
+## Ключевые особенности реализации
+
+### Lifecycle: `opening` → `opened` → `closing` → `closed`
+
+```ts
+useLayoutEffect(() => {
+    if (prevOpened.current && !opened) { setClosing(true); onClosing?.(); }
+    else if (!prevOpened.current && opened) { setOpening(true); onOpening?.(); }
+    prevOpened.current = opened;
+}, [opened]);
+
+useEffect(() => { closing ? onClosing?.() : onClose?.(); }, [closing]);
+useEffect(() => { opening ? onOpening?.() : onOpen?.(); }, [opening]);
+```
+
+- **`useLayoutEffect`** при смене `opened` — намеренно (комментарий в коде: «иначе в браузере может быть мигание при закрытии»).
+- `closing` / `opening` сбрасываются в `false` через `onTransitionEnd` в `OverlayPanel` → тогда вызывается `onClose` / `onOpen`.
+- **`onClosing` / `onOpening`** вызывается **дважды** в начале (явно из `useLayoutEffect` + из `useEffect` на `closing`/`opening`). Известный нюанс — потребитель должен быть идемпотентен.
+
+### Двойной слой `closing` (Overlay + OverlayBase)
+
+- `Overlay` хранит свой `closing` для CSS-класса `styles.closing` (виден до окончания анимации).
+- `OverlayBase` хранит свой `closing` для render-prop'ов.
+- **Причина**: `OverlayBase` без обёртки не имеет доступа к корневому `<div>` — нужно дублировать.
+
+### `fixed` vs `absolute`
+
+```less
+.overlay { position: absolute; ... &.fixed { position: fixed; } }
+```
+
+- По умолчанию — `absolute` (поверх родителя). `fixed` — на весь viewport.
+
+### `left: -10000px; visibility: hidden` для closed-state
+
+```less
+.overlay {
+    left: -10000px;
+    visibility: hidden;
+    &.closing, &.opened { visibility: visible; left: 0; right: 0; }
+}
+```
+
+- Закрытый overlay уезжает за viewport, чтобы:
+  - Анимация при закрытии не была обрезана `display: none`.
+  - Внутренние элементы не получали focus (через `visibility: hidden`).
+
+### Transform-based анимация в Panel
+
+```less
+.overlayPanel { transition: transform 0.3s ease-in-out; }
+.right { transform: translateX(100%); ... &.opened { transform: translateX(0); } }
+```
+
+- Каждое направление — свой `translate` (100% начальное, 0 открытое).
+- **Длительность 300ms** — захардкожена.
+- **`box-shadow`** — захардкожен (`rgba(0,0,0,0.14)` 13px-blur 17px), не из токенов.
+
+### Mask — отдельный компонент, не часть Panel
+
+- Потребитель сам решает, нужна ли маска и как она реагирует на клик. Это даёт гибкость: можно сделать non-modal overlay (без затемнения).
+
+### Render-prop, не Context
+
+- API через render-prop, а не Context, чтобы дочерние Mask/Panel могли быть переданы по-разному в каждом случае.
+- Минус: верстать вложенные компоненты сложнее (handler'ы внутри замыкания).
+
+---
+
+## Инварианты
+
+- **`children` — render-prop** (`(props) => ReactElement`), не ReactNode. Изменение API — breaking.
+- **`direction` default `RIGHT`** в `OverlayBase`, в `Overlay` — без default'а (пробрасывается как-есть).
+- **`closing`/`opening` сбрасываются через `onTransitionEnd`** на `OverlayPanel` — если потребитель не использует `OverlayPanel` или ломает transition, lifecycle зависнет.
+- **`onClosing`/`onOpening` вызываются дважды** на каждое открытие/закрытие. Делай идемпотентным.
+- **Двойной `closing` state** (Overlay + OverlayBase) — не упрощать без миграции CSS.
+- **`fixed` — `position: fixed`** на корневой `<div>`, иначе `absolute`. Не работает в transformed-родителях (фундаментальный CSS).
+- **300ms transition** — захардкожена, не настраивается.
+- **CSS-переменная `--triplex-next-Overlay-Panel_Background`** — публичный токен.
+- **Mask и Panel — `forwardRef`**, Overlay/OverlayBase — `FC`.
+- **Overlay slots — `Object.assign`-style** (`Overlay.Mask = OverlayMask`) — но через property assignment.
+
+---
+
+## Accessibility
+
+- **Нет встроенного focus management / focus trap** — потребитель должен реализовать сам (или использовать SideOverlay/ModalWindow поверх).
+- **Нет ESC-обработчика** — закрытие зависит от `setOpened` через клик по Mask или явный close-button.
+- **Нет `role="dialog"` / `aria-modal`** — overlay семантически нейтрален. Потребитель должен добавить через `...htmlDivAttributes`.
+- `visibility: hidden` в closed-state — корректно убирает focusable-элементы из tab-последовательности.
+- Mask — `<div>`, не интерактивный по умолчанию; клик-обработчик потребитель добавляет сам.
+
+---
+
+## Дизайн-токены
+
+- `--triplex-next-Overlay-Panel_Background` — фон панели.
+- `box-shadow` — захардкожен, не из токенов (тех-долг).
+
+---
+
+## Связанные компоненты
+
+- `SideOverlay` — высокоуровневая обёртка (Overlay + Mask + ESC + focus + контент).
+- `ModalWindow` — модал на отдельном механизме (Portal + CSSTransition).
+- `LightBox` — full-screen viewer на отдельном механизме.
+
+---
+
+## Stories
+
+`stories/Overlay/Overlay.stories.tsx`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/Page.md

@@ -0,0 +1,246 @@
+---
+component: Page
+category: Layout
+figma-node: ""
+figma-file: ""
+related: [Header, Body, Footer, Island, LightBox, Spoiler]
+tokens: []
+stories: stories/Page/Page.stories.tsx
+version: "1.0"
+---
+
+# Page
+
+## Назначение
+
+Layout-компонент **страницы**: контейнер `<div class="global-page">` +
+три compound-слота `Header`, `Body`, `Footer`, каждый из которых
+существует в **двух типах**:
+
+- **`FIRST`** — заворачивает контент в `Island` (карточка с фоном,
+  скруглением, padding'ом). Используется для типичной layout'ной
+  страницы.
+- **`SECOND`** — оставляет «голый» Header/Body/Footer без `Island` —
+  для случаев, когда фон/обёртка управляется внешним контейнером
+  (например, `LightBox`).
+
+Дополнительно `HeaderPage` / `FooterPage` поддерживают **`sticky`** —
+sticky-позиционирование с **плавным обнулением скруглений углов** при
+прилипании (через `useStickyCornerRadius`).
+
+Используй когда: компонуешь страницу из секций. Если нужен только
+header / footer без всей структуры — используй `Header`/`Footer`/`Body`
+напрямую.
+
+---
+
+## Файловая структура
+
+```text
+src/components/Page/
+├── Page.tsx                              # forwardRef + Object.assign({Header, Body, Footer})
+├── components/
+│   ├── HeaderPage.tsx                    # forwardRef; FIRST=Island+Header, SECOND=Header
+│   ├── BodyPage.tsx                      # forwardRef; FIRST=Island+Body, SECOND=Body
+│   ├── FooterPage.tsx                    # forwardRef; FIRST=Island+Footer, SECOND=Footer
+│   ├── enums.ts                          # EHeaderPageType / EBodyPageType / EFooterPageType / EBodyPageVerticalMargin
+│   └── useStickyCornerRadius.ts          # rAF-анимация corner-radius при sticky-прилипании
+├── styles/Page.module.less + BodyPage.module.less
+├── index.ts                              # Barrel: Page + enums
+└── __tests__/
+```
+
+---
+
+## Compound-структура
+
+```tsx
+<Page>
+    <Page.Header type={EHeaderPageType.FIRST} sticky size={EComponentSize.MD}>
+        <Page.Header.Title>Заголовок</Page.Header.Title>
+        <Page.Header.Subhead>Подзаголовок</Page.Header.Subhead>
+        <Page.Header.Tabs>...</Page.Header.Tabs>
+    </Page.Header>
+    <Page.Body type={EBodyPageType.FIRST} verticalMargin={EBodyPageVerticalMargin.LARGE}>
+        Контент
+    </Page.Body>
+    <Page.Footer type={EFooterPageType.FIRST} sticky>
+        <Page.Footer.Description>Подпись</Page.Footer.Description>
+        <Button>Действие</Button>
+    </Page.Footer>
+</Page>
+```
+
+`HeaderPage.Title/Subhead/Tabs/LayoutSidebar` — **реэкспорты** `Header.*`. То же — `FooterPage.Description = Footer.Description`.
+
+---
+
+## Варианты и props
+
+### Page — `IPageProps extends HTMLAttributes<HTMLDivElement>`
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `...HTMLAttributes` | — | На корневой `<div>`. |
+| `children` | `ReactNode` | Только Header / Body / Footer (контракт). |
+
+CSS-классы: `styles.page` + **`styles["global-page"]`** (последний — публичный, для глобальных стилей вне модуля).
+
+### HeaderPage — `IHeaderPageTypeFirstProps | IHeaderPageTypeSecondProps`
+
+| Prop | FIRST | SECOND | Default | Описание |
+|---|---|---|---|---|
+| `type` | `EHeaderPageType.FIRST` | `EHeaderPageType.SECOND` | — (обязателен) | Discriminator. |
+| `sticky` | `boolean` | `never` | — | Sticky к верху. **Только FIRST** и **только внутри LightBox** (по комментарию). |
+| `size` | `EComponentSize` | `never` | — | Размер `Island`. **Только FIRST**. |
+| `...IHeaderProps` | — | — | — | От `Header`. |
+
+- FIRST: `<Island type=TYPE_1 size={size}><Header /></Island>`.
+- SECOND: `<Header className={headerPageTypeSecond} />`.
+- Slots: **`HeaderPage.Title / Subhead / Tabs / LayoutSidebar`** = реэкспорты `Header.*`.
+
+### BodyPage — `IBodyPageTypeFirstProps | IBodyPageTypeSecondProps`
+
+| Prop | FIRST | SECOND | Default | Описание |
+|---|---|---|---|---|
+| `type` | `EBodyPageType.FIRST` | `EBodyPageType.SECOND` | — | Discriminator. |
+| `size` | `EComponentSize` | `never` | — | Размер `Island`. Только FIRST. |
+| `verticalMargin` | `EBodyPageVerticalMargin` | (то же) | `LARGE` | `LARGE` = 24px, `SMALL` = 16px. В LightBox — `SMALL`. |
+| `...IBodyProps` | — | — | — | От `Body`. |
+
+### FooterPage — `IFooterPageTypeFirstProps | IFooterPageTypeSecondProps`
+
+| Prop | FIRST | SECOND | Default | Описание |
+|---|---|---|---|---|
+| `type` | `EFooterPageType.FIRST` | `EFooterPageType.SECOND` | — | Discriminator. |
+| `sticky` | `boolean` | `never` | — | Sticky к низу. **Только FIRST внутри LightBox** (по комментарию). |
+| `size` | `EComponentSize` | `never` | — | Размер `Island`. Только FIRST. |
+| `...IFooterProps` | — | — | — | От `Footer`. |
+
+- Slots: **`FooterPage.Description`** = `Footer.Description`.
+
+### Enums
+
+- `EHeaderPageType.FIRST | SECOND`
+- `EBodyPageType.FIRST | SECOND`
+- `EFooterPageType.FIRST | SECOND`
+- `EBodyPageVerticalMargin.LARGE` (24px) | `SMALL` (16px)
+
+---
+
+## Ключевые особенности реализации
+
+### `useStickyCornerRadius(ref, edge, isEnabled)`
+
+```ts
+useEffect(() => {
+    // Подписка на scroll/resize/transitionend ближайшего scroll-родителя.
+    // ResizeObserver на всех предках до scroller.
+    // На каждом frame: вычисляем расстояние до edge → r = clamp(0, 24, dist).
+    // Пишем в --r-top / --r-bottom (CSS-var) и dataset.stuck = "true" если r ≤ 0.5.
+}, [ref, edge, isEnabled]);
+```
+
+- **Нативный sticky** + **анимированный corner-radius**:
+  - Когда элемент далеко от прилипшей границы → `--r-top: 24px`.
+  - При прилипании → `--r-top: 0px` плавно (через rAF).
+  - `data-stuck="true"` — для подключения тени через CSS.
+- **`getScrollParent`**: ищет ближайший `overflowY: auto/scroll/overlay`. Default — `window`.
+- **`ResizeObserver`** на ВСЕХ предках до scroller — нужен для случая, когда `Spoiler` раскрывается без scroll-события, но меняет высоту контента.
+- **`transitionend` listener** — обновление при завершении анимации `lightBoxSideOverlayContent` (cross-component contract по className!).
+- **`setTimeout(initialize, 100)`** — задержка для совместимости с открытием LightBox (без задержки анимация не работает).
+- **Жёсткие зависимости**: ref, edge, isEnabled — пересоздание подписки при изменении.
+
+### CSS-переменные `--r-top`, `--r-bottom`
+
+- Публичный контракт: устанавливаются JS, читаются в LESS (`border-radius: var(--r-top, 24px) var(--r-top, 24px) 0 0` или подобное).
+- При `isEnabled=false` или unmount — переменная удаляется через `style.removeProperty`.
+
+### Cross-component className-зависимость: `lightBoxSideOverlayContent`
+
+```ts
+event.target.classList.contains("lightBoxSideOverlayContent")
+```
+
+- Hardcoded substring matching на className из `LightBox` package. **При переименовании в LightBox — sticky-corner для page внутри SideOverlay перестанет реагировать на анимацию**. Тех-долг.
+
+### `setIslandRef` — мерж forwardRef + локального ref
+
+```ts
+const setIslandRef = (instance) => {
+    islandRef.current = instance;
+    if (typeof ref === "function") ref(instance);
+    else if (ref) ref.current = instance;
+};
+```
+
+- Стандартный паттерн merge. Используется в HeaderPage и FooterPage.
+
+### Discriminated union по `type`
+
+- TypeScript обеспечивает: `sticky` / `size` доступны только при `FIRST`. При `SECOND` — `never`.
+- Discriminator обязателен на потребителе: `<Page.Header type={EHeaderPageType.FIRST} ...>`.
+
+### `Island type=TYPE_1` — фиксирован
+
+- При `FIRST` Island всегда `TYPE_1` (нельзя сменить на `TYPE_2`).
+
+### `Page.tsx` — `global-page` className
+
+- Кроме CSS-Modules класса `styles.page` добавляется `styles["global-page"]` (это композитный класс, не глобальный селектор `:global` — но имя зарезервированное). Используется для cross-component хуков.
+
+---
+
+## Инварианты
+
+- **Page может содержать только Header / Body / Footer** (контракт документации; типы шире).
+- **Discriminated union по `type`** — `EHeaderPageType.FIRST | SECOND` (то же для Body/Footer). Несовместимо с runtime-вычисляемым type без cast'а.
+- **`sticky` — только FIRST**, и **только внутри LightBox** (по комментарию в коде; вне LightBox поведение не специфицировано).
+- **`useStickyCornerRadius`** жёстко завязан на:
+  - className `lightBoxSideOverlayContent` (cross-package contract).
+  - CSS-переменные `--r-top` / `--r-bottom` (публичный контракт со стилями).
+- **`maxRadius = 24`** — захардкожен в JS.
+- **`Island type=TYPE_1`** при FIRST — фиксирован.
+- **`verticalMargin` default `LARGE` (24px)**, в LightBox — `SMALL` (16px).
+- **HeaderPage slots = `Header.*`** (Title/Subhead/Tabs/LayoutSidebar) — реэкспорты, не свои реализации.
+- **FooterPage slots = `Footer.Description`** — реэкспорт.
+- **ForwardRef** на всех уровнях.
+- **`global-page` className** на Page — публичное имя.
+
+---
+
+## Accessibility
+
+- Базовая семантика наследуется от `Header`, `Body`, `Footer` (заголовки h1/h2 — внутри `Header.Title`).
+- `Page` сам — нейтральный `<div>`, не landmark. Если нужен `<main>` — потребитель должен обернуть/передать `role`.
+- Sticky-поведение — клавиатурно нормально (sticky == native CSS), screen readers видят корректный flow.
+
+---
+
+## Дизайн-токены
+
+Нет собственных. Цвета/spacing — от `Island`, `Header`, `Body`, `Footer`. CSS-переменные `--r-top` / `--r-bottom` — управляющие, не токены.
+
+---
+
+## Связанные компоненты
+
+- `Header`, `Body`, `Footer` — нижележащие компоненты (FIRST оборачивает в Island).
+- `Island` (TYPE_1) — карточка-обёртка для FIRST.
+- `LightBox` — типичный контекст для `type=SECOND` и `sticky`.
+- `Spoiler` — потребитель ResizeObserver (срабатывание sticky-corner при раскрытии).
+
+---
+
+## Stories
+
+`stories/Page/Page.stories.tsx`
+Примеры: `stories/Page/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |