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

package/bundle/components/ThemeProvider.md

@@ -0,0 +1,181 @@
+---
+component: ThemeProvider
+category: Infrastructure
+figma-node: ""
+figma-file: ""
+related: [DesignTokens]
+tokens: []
+stories: ""
+version: "1.0"
+---
+
+# ThemeProvider
+
+## Назначение
+
+Провайдер темы и дизайн-токенов: задаёт область видимости CSS-переменных
+через scoped className на HTML-элементе и подставляет токены темы (LIGHT/
+DARK) + опциональные пользовательские override'ы. Токены доступны через
+контекст (`useToken`).
+
+Используй когда: нужно применить тему ко всему приложению или к
+изолированному поддереву (например, тёмная панель внутри светлого
+интерфейса). Вне `ThemeProvider` работает дефолтное `LIGHT` оформление.
+
+---
+
+## Файловая структура
+
+```text
+src/components/ThemeProvider/
+├── ThemeProvider.tsx                       # FC<IThemeProviderProps>; updateCSS/removeCSS + ThemeProviderView
+├── ThemeProviderContext.ts                 # IThemeProviderContext + контекст с дефолтом LIGHT
+├── ETriplexNextTheme.ts                    # enum LIGHT/DARK
+├── useToken.ts                             # хук-обёртка над контекстом
+├── components/
+│   └── ThemeProviderView.tsx               # классname на scopeRef + Context.Provider с merged-токенами
+├── __tests__/
+└── index.ts
+```
+
+---
+
+## Публичный API
+
+### `IThemeProviderProps`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Дерево, использующее тему. |
+| `scopeRef` | `RefObject<HTMLElement>` | — | **Обязателен**. Ref на DOM-элемент, к которому добавится `scopeClassName` (обычно `html`/`body`/корневой div). |
+| `scopeClassName?` | `string` | `triplex-next-theme-{n}` (uniqueId) | Класс для области видимости. Если не передан — генерируется автоматически. |
+| `theme?` | `ETriplexNextTheme` | `LIGHT` | Тема. |
+| `tokens?` | `TDesignTokensPartial` | `{}` | Override отдельных токенов. |
+
+### `ETriplexNextTheme`
+
+```ts
+enum ETriplexNextTheme {
+    LIGHT = "light",
+    DARK  = "dark",
+}
+```
+
+### `IThemeProviderContext`
+
+```ts
+{
+    scopeClassName: string;
+    theme: ETriplexNextTheme;
+    tokens: TDesignTokens;     // полные токены (Core + Components, по теме + override)
+}
+```
+
+### `useToken()`
+
+```ts
+() => { scopeClassName: string; theme: ETriplexNextTheme; tokens: TDesignTokens }
+```
+
+Чтение текущей темы и токенов из контекста.
+
+---
+
+## Поведение
+
+### Внедрение CSS
+
+`useLayoutEffect` (`ThemeProvider.tsx`):
+1. `DesignTokenUtils.getStyle(theme, tokens)` → строка `--var-name: value;`.
+2. `updateCSS(`.${scopeCssClassName} {…}`, ключ `triplex-next-dynamic-tokens-${scopeCssClassName}`)` — вставляет/обновляет `<style>` тег (через `rc-util/Dom/dynamicCSS`).
+3. SSR: `canUseDom() === false` → `console.log` warning, без вставки.
+
+При размонтировании — `removeCSS` по тому же ключу.
+
+### Применение области видимости (`ThemeProviderView`)
+
+`useEffect` на `[scopeClassName, scopeRef]`:
+- Добавляет `scopeClassName` в `scopeRef.current.classList`.
+- При cleanup — удаляет `prevScopeClassName.current` (хранит предыдущий класс для корректного removal).
+
+### Сборка токенов в Context
+
+`useMemo`:
+```ts
+defaultsDeep(
+    {},
+    tokensProps,                                              // 1. user override
+    theme === LIGHT ? DesignTokensCore : DesignTokensCoreThemeDark,
+    theme === LIGHT ? DesignTokensComponents : DesignTokensComponentsThemeDark,
+);
+```
+
+**Порядок важен** — `defaultsDeep` НЕ перезаписывает уже определённые ключи,
+поэтому первые источники имеют приоритет (user > Core > Components).
+
+---
+
+## Инварианты
+
+- **`FC, не forwardRef`** — `ThemeProvider` ref не пробрасывает; ref на DOM передаётся через `scopeRef`.
+- **`scopeRef` обязателен** — без него `classList.add` не выполнится → стили не применятся.
+- **`scopeClassName` авто-генерируется** через `uniqueId("triplex-next-theme-")`, если не передан. Стабилен между рендерами (memo по `[scopeClassName]`).
+- **`useLayoutEffect` для вставки CSS** — критично, чтобы стили применились ДО первого paint'а детей. Не менять на `useEffect`.
+- **Cleanup `removeCSS`** при размонтировании — иначе утечки `<style>` тегов в `<head>`.
+- **Порядок `defaultsDeep` зафиксирован комментарием** — `tokensProps` идёт первым (приоритет), не менять без обсуждения.
+- **`prevScopeClassName: useRef`** — нужен для удаления старого класса при изменении `scopeClassName` (обычный сценарий — не возникает, но защита от смены через props).
+- **SSR не поддержан** — фоллбек на `console.log`. Реальная тема применится только после hydration на клиенте.
+- **Дефолтный контекст содержит `LIGHT` токены** (`DesignTokensCore + DesignTokensComponents`), не пустой объект. Компоненты вне `ThemeProvider` получают дефолтную светлую тему через `useToken`.
+- **Контекст имеет полные токены `TDesignTokens`**, а не `Partial` — `useToken` гарантированно возвращает все ключи.
+
+---
+
+## Использование
+
+```tsx
+const App = () => {
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    return (
+        <div ref={rootRef}>
+            <ThemeProvider scopeRef={rootRef} theme={ETriplexNextTheme.DARK}>
+                <YourApp />
+            </ThemeProvider>
+        </div>
+    );
+};
+
+// Чтение токенов в компоненте:
+const { tokens, theme } = useToken();
+```
+
+Несколько `ThemeProvider` могут быть вложены — внутренний переопределяет
+внешний внутри своего scope.
+
+---
+
+## Accessibility
+
+- ARIA не задействована — это инфраструктурный компонент.
+- При смене темы для контрастности и читаемости — обеспечивается дизайн-токенами; компонент только применяет их.
+
+---
+
+## Связанные компоненты
+
+- `DesignTokens` (`DesignTokensCore`, `DesignTokensComponents`, `*ThemeDark` варианты, `DesignTokenUtils`) — источники значений.
+- Все компоненты дизайн-системы — потребители токенов через CSS-переменные `--triplex-next-*`.
+
+---
+
+## Stories
+
+Отдельных stories нет — оборачивает все остальные компоненты в Storybook на уровне preview.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/Tooltip.md

@@ -0,0 +1,254 @@
+---
+component: Tooltip
+category: Overlay
+figma-node: ""
+figma-file: ""
+related: [Dropdown, MobileView, MediaWidth]
+tokens: []
+stories: stories/Tooltip/Tooltip.stories.tsx
+version: "1.0"
+---
+
+# Tooltip
+
+## Назначение
+
+Всплывающая подсказка с автоматическим позиционированием
+(`above`/`below`/`right`/`left`) и адаптивным переключением desktop/mobile.
+Контент компонуется через слоты: `Target` (триггер) + `Body` (контент) +
+опционально `Link`, `XButton` (закрыть), `MobileHeader`. Управление —
+hover или click.
+
+Используй когда: нужна подсказка возле элемента (label-описание, ошибка,
+информация). Для модальных диалогов — `Modal`. Для меню действий — `Dropdown`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/Tooltip/
+├── Tooltip.tsx                         # FC + Composition; MobileView switcher; Provider
+├── TootlipContext.ts                   # ITooltipContext (опечатка имени файла зафиксирована)
+├── enums.ts                            # ETooltipSize, ETooltipPreferPlace, ETooltipAlign + внутренние enum'ы позиционирования
+├── types.ts                            # все интерфейсы
+├── components/
+│   ├── common/
+│   │   ├── TooltipTarget.tsx           # клонирование child'а с onClick/onKeyDown
+│   │   ├── TooltipBody.tsx             # forwardRef<HTMLDivElement>; MobileView для Text-обёртки
+│   │   ├── TooltipLink.tsx
+│   │   └── TooltipXButton.tsx          # children: never
+│   ├── desktop/
+│   │   ├── TooltipDesktop.tsx
+│   │   └── components/                 # позиционирование, портал
+│   └── mobile/
+│       ├── TooltipMobile.tsx
+│       └── components/TooltipMobileHeader.tsx
+├── utils/
+│   ├── Positioning.ts                  # геометрия для desktop размещения
+│   └── useTooltipTheme.ts              # инжект темы в renderContainer
+├── styles/
+└── index.ts
+```
+
+---
+
+## Композиция
+
+```tsx
+<Tooltip
+    targetRef={btnRef}
+    size={ETooltipSize.LG}
+    toggleType="hover"
+    preferPlace={ETooltipPreferPlace.ABOVE}
+    isOpen={open}
+    toggle={setOpen}
+>
+    <Tooltip.Target>
+        <button ref={btnRef}>?</button>
+    </Tooltip.Target>
+    <Tooltip.Body>Подсказка</Tooltip.Body>
+    <Tooltip.Link href="/help">Подробнее</Tooltip.Link>
+    <Tooltip.XButton aria-label="Закрыть" />
+    <Tooltip.MobileHeader>Заголовок</Tooltip.MobileHeader>
+</Tooltip>
+```
+
+Все слоты — статические свойства `Tooltip.X = X`. Дети распознаются по
+типу через `React.Children.map` (см. `getChildrenElements`); порядок
+расположения в JSX неважен.
+
+---
+
+## Публичный API
+
+### `ITooltipProps`
+
+```ts
+extends HTMLAttributes<HTMLDivElement>
+```
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `size` | `ETooltipSize` (`SM` \| `LG`) | — | **Обязателен**. |
+| `targetRef` | `MutableRefObject<HTMLElement \| null>` | — | **Обязателен**. Ref на якорный элемент (используется для расчёта позиции). |
+| `toggleType?` | `"click" \| "hover"` | — | Способ открытия. Если не передан — Tooltip управляется только программно через `isOpen`/`toggle`. |
+| `preferPlace?` | `ETooltipPreferPlace` (`ABOVE`/`BELOW`/`LEFT`/`RIGHT`) | — | Предпочтительная сторона. Если не помещается — flip автоматически. |
+| `alignTip?` | `ETooltipAlign` (`START`/`CENTER`/`END`) | — | Выравнивание указателя относительно target'а. |
+| `renderContainer?` | `Element` | `document.body` | Контейнер для портала. На mobile с включённой адаптивностью — игнорируется (всегда `document.body`). |
+| `disableAdaptiveMode?` | `boolean` | `false` | Отключить переключение на mobile-вариант. |
+| `isOpen?` | `boolean` | — | Контролируемое открытие. Если не передан — внутренний `openState`. |
+| `toggle?` | `(open: boolean) => void` | — | Колбэк изменения. |
+| `onShow?` | `(node: HTMLDivElement) => void` | — | После появления tooltip-DOM. |
+| `children` | `ReactNode` | — | Слоты `Tooltip.*`. |
+
+### Слоты
+
+#### `Tooltip.Target`
+
+```ts
+{ children: ReactElement }   // ровно один React-элемент
+```
+
+Клонирует child через `React.cloneElement`, добавляя `onClick` и `onKeyDown`:
+- `onClick` (если `toggleType === "click"` или `hover` + не висим в hovered-состоянии): `setTooltipOpen(!tooltipOpen)`.
+- `onKeyDown TAB` при открытом — закрывает.
+- Существующие хендлеры на child'е сохраняются (вызываются после).
+
+#### `Tooltip.Body`
+
+```ts
+extends HTMLAttributes<HTMLDivElement>
+```
+
+`forwardRef<HTMLDivElement>`. На desktop — `<div>`, на mobile — `<Text tag="div" size=B3 line=NORMAL>` (через `MobileView`).
+
+#### `Tooltip.Link`
+
+```ts
+extends AnchorHTMLAttributes<HTMLAnchorElement>
+```
+
+Ссылка внутри tooltip'а.
+
+#### `Tooltip.XButton`
+
+```ts
+extends ButtonHTMLAttributes<HTMLButtonElement>
+{ children: never }
+```
+
+Кнопка закрытия (без своего content'а — рендерится X-иконка).
+
+#### `Tooltip.MobileHeader`
+
+```ts
+extends Omit<IDropdownMobileHeaderProps, "closeButton">
+{ controlButtons?: ReactNode }
+```
+
+Заголовок мобильного полноэкранного варианта.
+
+### Enums
+
+- `ETooltipSize`: `SM` | `LG`
+- `ETooltipPreferPlace`: `ABOVE` | `BELOW` | `RIGHT` | `LEFT`
+- `ETooltipAlign`: `START` | `CENTER` | `END`
+- `ETooltipDirection`: `UP` | `DOWN` | `LEFT` | `RIGHT` (для указателя)
+
+Внутренние enum'ы (`ETooltipAxesType`, `ETooltipFlowTypes`, `ETooltipStartCoordinates`, `ETooltipEndCoordinates`, `ETooltipSizeParameter`, `ETooltipTypeName`) — экспортированы, но используются в основном `Positioning.ts`.
+
+---
+
+## Контекст (`TooltipContext`)
+
+```ts
+{
+    elements: ITooltipElements;     // распознанные слоты
+    tooltipOpen: boolean;
+    setTooltipOpen(open): void;
+    targetHoveredRef: MutableRefObject<boolean>;
+    toggleType?: TTooltipToggleType;
+}
+```
+
+`elements.body/link/closeButton/mobileHeader/target` — `null` или `ReactElement`.
+`getChildrenElements` распознаёт child'ов по `child.type === TooltipTarget` и т.п.
+
+---
+
+## Поведение
+
+### Адаптивность
+
+- `useMatchMedia(max-width: SM_MAX)` — определяет mobile.
+- `disableAdaptiveMode === true` → всегда desktop.
+- Иначе — `<MobileView fallback={Desktop}>{Mobile}</MobileView>`.
+
+### Контролируемое vs неконтролируемое
+
+- `isOpen` передан → контролируемое (внешний state). `setTooltipOpen` только зовёт `toggle?.(nextOpen)`, не пишет в `openState`.
+- `isOpen` не передан → внутренний `openState`.
+- Сброс `targetHoveredRef.current = false` при `openProp === false` (через `useEffect`) — чтобы повторный hover после программного закрытия снова открывал tooltip.
+
+### `useTooltipTheme(open, container)`
+
+Инжектит тему (CSS-переменные) в `renderContainer` (или `document.body`),
+чтобы tooltip-портал имел тот же стиль, что и текущий `ThemeProvider`.
+
+### Targeting
+
+- `targetRef` обязателен — без него desktop-позиционирование не сработает.
+- `toggleType: "hover"` — открывает на hover target'а; `"click"` — на клик.
+- Без `toggleType` — tooltip управляется только через `isOpen`/`toggle` (полностью контролируемый сценарий).
+
+---
+
+## Инварианты
+
+- **`Tooltip` — `FC` + composition** (`Tooltip.Target = TooltipTarget` и т.д.).
+- **`TooltipTarget` — `FC`**, ожидает **ровно одного** child'а (`React.Children.only`); должен быть `ReactElement` (не string/number).
+- **`TooltipBody` — `forwardRef<HTMLDivElement>`** — не убирать.
+- **Слоты распознаются по типу** (`child.type === TooltipTarget`) — нельзя оборачивать слоты в Fragment'ы или HOC'и (потеряется тип).
+- **`size` и `targetRef` обязательны** — проверять при использовании.
+- **Файл контекста назван `TootlipContext.ts`** (опечатка) — менять имя считается breaking change для импортов.
+- **`renderContainer` игнорируется в mobile + adaptiveMode** — всегда `document.body` (для полноэкранного листа).
+- **`toggleType === "hover"` использует `targetHoveredRef`**, чтобы не дёргать toggle при движении внутри target'а; при `isOpen=false` извне ref сбрасывается.
+- **На desktop body — `<div>`, на mobile — `<Text tag="div" size=B3>`** (через MobileView). Стили совпадают по className, но обёртка разная.
+- **`XButton.children: never`** — иконка X встроена, не передавать content.
+- **Все enum'ы экспортируются** — часть публичного API.
+
+---
+
+## Accessibility
+
+- `Tooltip.Target` — потребитель сам ставит `aria-describedby`/`aria-haspopup` на child-элементе (компонент это не делает автоматически — TODO).
+- TAB на target при открытом tooltip — закрывает (clean-up для tab-навигации).
+- `XButton` — `<button>`, `aria-label` ставит потребитель (через `aria-label="Закрыть"`).
+- Mobile-вариант — полноэкранный лист (управляется фокусом через `MobileHeader`/`closeButton`).
+- На hover-tooltip'ах screen-reader пользователи не видят содержимое — для критичной информации использовать `role="status"` или дублировать в `aria-describedby`.
+
+---
+
+## Связанные компоненты
+
+- `MobileView` / `useMatchMedia` — переключение desktop/mobile.
+- `Dropdown` — для меню/списков (другая UX-семантика).
+- `Typography.Text` — обёртка body на mobile.
+- `ThemeProvider` (через `useTooltipTheme`) — наследование темы в портал.
+- `IDropdownMobileHeaderProps` — родитель для `ITooltipMobileHeaderProps`.
+
+---
+
+## Stories
+
+Основные истории: `stories/Tooltip/Tooltip.stories.tsx`
+Примеры: `stories/Tooltip/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/TopOverlay.md

@@ -0,0 +1,145 @@
+---
+component: TopOverlay
+category: Overlay
+figma-node: ""
+figma-file: ""
+related: [Overlay, LightBox]
+tokens: []
+stories: stories/TopOverlay/TopOverlay.stories.tsx
+version: "1.0"
+---
+
+# TopOverlay
+
+## Назначение
+
+Оверлей, выезжающий из верха экрана: обёртка над `Overlay` с
+`direction=TOP`, `Mask` + `Panel`, FocusTrap, и автокоррекцией top-позиции
+при скролле родителя/`LightBox`-контейнера. Используется для системных
+сообщений, временных панелей.
+
+Используй когда: нужна верхняя shading-панель внутри `LightBox` или
+прокручиваемого родителя, со встроенной фиксацией фокуса. Для общего
+оверлея — `Overlay` напрямую.
+
+---
+
+## Файловая структура
+
+```text
+src/components/TopOverlay/
+├── TopOverlay.tsx     # FC<ITopOverlayProps>; FocusTrap + Overlay(direction=TOP)
+├── styles/TopOverlay.module.less
+├── __tests__/
+└── index.ts
+```
+
+---
+
+## Публичный API
+
+### `ITopOverlayProps`
+
+```ts
+extends Pick<IOverlayProps, "opened" | "onOpen" | "onClose">
+```
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `opened` | `boolean` | — | **Обязателен**. Контролируемое открытие. |
+| `onOpen?` | `() => void` | — | Колбэк при открытии (вызывается из `handleOpen`, после `updateTopPosition`). |
+| `onClose?` | `() => void` | — | Колбэк при закрытии (после анимации). |
+| `focusTrapProps?` | `FocusTrapProps` | — | Пропсы для `focus-trap-react`. По умолчанию `allowOutsideClick: true, preventScroll: true`. |
+| `children?` | `ReactNode` | — | Содержимое панели. |
+
+---
+
+## Поведение
+
+### Состояния
+
+| Имя | Тип | Назначение |
+|---|---|---|
+| `closing` | `boolean` | Анимация закрытия в процессе (`opened` стал `false`, ещё не отработал). |
+| `activeFocusTrap` | `boolean` | Включён ли FocusTrap (включается на open, отключается перед closing). |
+| `overlayWrapperTopPosition` | `number \| string` | Top-смещение wrapper'а (0 по умолчанию). |
+| `prevOpened` | `Ref<boolean>` | Для определения перехода `true → false` / `false → true`. |
+| `overlayWrapperRef` | `Ref<HTMLDivElement>` | Для расчёта `getBoundingClientRect`. |
+
+### `updateTopPosition`
+
+Вызывается в `handleOpen` и при `false → true`:
+1. Читает `--lightBox-screen-top` CSS-переменную из computed-style wrapper'а.
+2. Если `position.top < 0` (overlay выше viewport'а) — добавляет `Math.abs(position.top) + lightBoxTopPosition`.
+3. Иначе — вычитает `position.top - lightBoxTopPosition`.
+
+Цель: компенсировать прокрутку родителя/`LightBox`'а так, чтобы overlay
+встал у видимого верха.
+
+### Жизненный цикл
+
+- `opened: false → true`: `useEffect` зовёт `updateTopPosition`. `Overlay.onOpen` → `handleOpen` (внутри: `updateTopPosition` ещё раз + `setActiveFocusTrap(true)` + `onOpen?.()`).
+- `opened: true → false`: `setClosing(true)`. `Overlay.onClosing` (анимация началась) → `handleClosing` → `setActiveFocusTrap(false)`. `Overlay.onClose` (анимация завершилась) → `handleClose` → `setClosing(false)` + сброс `overlayWrapperTopPosition` + `onClose?.()`.
+
+### Структура
+
+```tsx
+<FocusTrap active={activeFocusTrap} focusTrapOptions={{allowOutsideClick: true, preventScroll: true, ...}}>
+    <div className={topOverlayWrapper {opened, closing}} ref={...} style={{top: ...}}>
+        <Overlay direction={TOP} opened={opened} onOpen={handleOpen} onClose={handleClose} onClosing={handleClosing}>
+            {(overlayProps) => (
+                <>
+                    <Overlay.Mask opened={overlayProps.opened} />
+                    <Overlay.Panel {...overlayProps}>{children}</Overlay.Panel>
+                </>
+            )}
+        </Overlay>
+    </div>
+</FocusTrap>
+```
+
+---
+
+## Инварианты
+
+- **`FC, не forwardRef`** — ref не пробрасывается.
+- **`opened` контролируемый** — внутреннего state открытости нет. `setOpened` передаётся в `Overlay`, но это пустой no-op (`() => {}`); закрытие должно идти через внешний `opened={false}`.
+- **`direction = EOverlayDirection.TOP`** — зашито; для других направлений использовать `Overlay` напрямую.
+- **`FocusTrap` использует `focus-trap-react`** — `allowOutsideClick: true` и `preventScroll: true` зашиты как defaults; потребитель может переопределить через `focusTrapProps.focusTrapOptions`.
+- **`activeFocusTrap` отключается ДО `onClose`** (на `onClosing`) — чтобы анимация уехала с уже разблокированным фокусом.
+- **`updateTopPosition` читает `--lightBox-screen-top`** — связь с `LightBox`. Без `LightBox` переменная отсутствует → `0`.
+- **`Overlay.Mask` и `Overlay.Panel` рендерятся внутри одного render-prop'а** — порядок Mask → Panel зашит.
+- **Стили `.topOverlay`/`.topOverlayMask`/`.topOverlayPanel`/`.topOverlayWrapper` + `.opened`/`.closing`** — публичные CSS-классы (используются для управления visual transitions).
+- **Без явной валидации `children`** — потребитель отвечает за содержимое.
+
+---
+
+## Accessibility
+
+- `FocusTrap` — фокус заперт внутри overlay при `activeFocusTrap = true`.
+- `allowOutsideClick: true` — клик вне overlay не блокируется (закрытие — на потребителе через external `opened`).
+- `preventScroll: true` — focus-trap не вызывает scroll при initial focus.
+- ARIA-роли (dialog/alertdialog) на overlay не выставляются — потребитель отвечает за разметку children (например, `<div role="dialog" aria-modal="true" aria-label>`).
+
+---
+
+## Связанные компоненты
+
+- `Overlay` (`Overlay.Mask`, `Overlay.Panel`) — основа.
+- `EOverlayDirection.TOP` — направление.
+- `LightBox` — типичный родитель (через CSS-переменную `--lightBox-screen-top`).
+- `focus-trap-react` (`FocusTrap`, `FocusTrapProps`) — npm-пакет для трапа фокуса.
+
+---
+
+## Stories
+
+Основные истории: `stories/TopOverlay/TopOverlay.stories.tsx`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |