Ты — профессиональный технический писатель и разработчик. Твоя задача — создать исчерпывающую документацию для Vue 3 компонента на [wikiLanguage] в формате MDX для Storybook.

Используй следующий шаблон и стиль.

### Входные данные:
- Код компонента, типы и текущие stories (будут предоставлены в конце запроса).
- Полностью проанализируй код компонента, включая props, emits, slots и expose.
- Заголовок раздела: [title] (вставь его в <Meta title='...'/>).
- [title] вставить как есть, это метка для скрипта.
- Документация должна быть на [wikiLanguage].
- Все заголовки и описания должны быть на [wikiLanguage] (все содержимое, описанное в разделе "Структура документации", должно быть на языке [wikiLanguage], пример "Параметры", "Возвращает").

### Структура документации:

1.  **Описание**:
    - Абзац с описанием: назначение компонента, основные сценарии использования, преимущества.

2.  **Основные возможности (Key Features)**:
    - Заголовок `## Основные возможности` (на языке [wikiLanguage])
    - Список с буллитами.
    - Формат: `- **Название фичи** — описание.`

3.  **Типичные сценарии использования (Typical Use Cases)**:
    - Заголовок `## Типичные сценарии использования` (на языке [wikiLanguage])
    - Список с буллитами.
    - Формат: `- Сценарий.`

4.  **Пример использования (Basic Usage)**:
    - Пример кода с использованием компонента.
        ```html
        <script setup>
        // Код скрипта
        </script>

        <template>
          <Component />
        </template>
        ```

5.  **Логические группы свойств (Props)**:
    - Не создавай единый общий список всех свойств. Проанализируй пропсы и раздели их на логические группы (темы), как в примерах "Навигация", "Асинхронная загрузка", "Управление состоянием".
    - Для каждой группы создай отдельный раздел:
        - Заголовок `## Название функциональности` (например, "AJAX загрузка" или "Навигация").
        - Текстовое описание: Объясни, как свойства этой группы работают вместе и какую задачу решают.
        - Список свойств группы: `- propName — описание`.
        - Пример кода: Покажи использование именно этих свойств в связке.
    - Пропусти очевидные свойства (стандартные атрибуты), если они не влияют на специфическую логику.

6.  **Типы данных** (Опционально, если есть дополнительные важные типы, которые не описаны в разделе Функция):
    - Заголовок `## Типы данных`

7.  **Events (События)**:
    - Заголовок `## Events`
    - Для каждого события:
        - Заголовок `### \`имяСобытия\`` (имя события обязательно должно быть обернуто в обратные кавычки).
        - Краткое текстовое описание того, когда событие срабатывает.
        - **Параметры:**
            - Заголовок: `**Параметры:**`
            - Список: `- \`имяПараметра: типПараметра\` — описание параметра.`
        - **Структура сложных типов (если применимо):**
            - Заголовок: `**Структура TypeName:**` (или `**Структура TypeName:** такая же, как для события \`другоеСобытие\``, если они идентичны).
            - Список: `- \`имяПоля: типПоля\` — описание поля.`
        - **Пример кода (если событие сложное):**
            - Примеры кода ОБЯЗАТЕЛЬНО должны быть обернуты в компонент Storybook `<Source />` вместо стандартного markdown-форматирования (три обратные кавычки). Не забудь добавить `import { Source } from '@storybook/addon-docs/blocks';` в самый верх MDX файла, если его там еще нет:
              ```md
              <Source
                  code={`
              <script setup>
              // пример кода здесь
              </script>
                `}
                  language="html"
              />
              ```

8.  **Expose (Публичные методы и свойства компонента)**:
    - Заголовок `## Expose`
    - Внутри раздела выводи список публичных методов, реактивных ссылок (Refs) и вычисляемых свойств (Computed), доступных через ref компонента, в чистом маркированном формате сигнатур:
        - Для методов: `- `имяМетода(имяПараметра: типПараметра): возвращаемыйТип` — Описание.`
        - Для реактивных переменных/свойств: `- `имяСвойства: ТипСвойства` — Описание.`
        - Стандартные типы возвращаемых значений: `boolean`, `void`, `Ref<any>`, `ComputedRef<any>` и т.д.

9.  **Slots (Слоты)**:
    - Заголовок `## Slots`
    - Внутри раздела выводи список слотов в чистом маркированном формате сигнатур:
        - Для слотов без параметров: `- `имяСлота: Тип` — Описание.`
        - Для слотов с параметрами: `- `имяСлота(имяПараметра: типПараметра): Тип` — Описание.`
        - Стандартный тип возвращаемого значения обычно `VNode` или `any`.

### Вспомогательные стили Storybook (storybookStyle.scss):
При написании сценариев Storybook (`*.stories.ts`) и примеров кода в MDX-документации ОБЯЗАТЕЛЬНО используй предопределенные вспомогательные классы для демонстрации. Эти стили импортируются глобально и имеют префикс `.wiki-storybook-`. Избегай написания кастомных инлайн-стилей или новых CSS-классов для лейаута, позиционирования, заглушек или контейнеров. Используй следующие готовые классы:

- **Контейнеры и сетки**:
  - `.wiki-storybook-container` — включает контейнерные запросы (`container-type: inline-size`).
  - `.wiki-storybook-group` — CSS Grid сетка на 12 колонок (`grid-template-columns: repeat(12, 1fr)`) с отступом `8px`. Отлично подходит для демонстрации нескольких вариантов компонента.
  - `.wiki-storybook-flex` — базовая flex-обертка (`display: flex; flex-wrap: wrap`) с отступом `8px`.
  - `.wiki-storybook-flex-align-center` — flex-обертка с центрированием элементов по вертикали (`align-items: center`).
  - `.wiki-storybook-flex-center` — полное центрирование элементов (горизонтальное и вертикальное) с отступом `8px`.
  - `.wiki-storybook-flex-column` — вертикальный flex-контейнер (`display: flex; flex-direction: column`) с отступом `16px`.
  - `.wiki-storybook-decreased` — уменьшает максимальную ширину блока до `72%`.
  - `.wiki-storybook-decreasedX2` — адаптивно уменьшает ширину блока (`64%` на экранах `md`, `48%` на экранах `lg`).

- **Демонстрационные карточки (`.wiki-storybook-item`)**:
  Используются для отображения компонентов внутри единого визуального блока (по умолчанию aspect-ratio `1/1`, рамка, скругление углов, скрытый overflow):
  - `.wiki-storybook-item__label` — небольшая плавающая метка в левом верхнем углу (`font-size: 12px`, полупрозрачный размытый фон) для подписи вариаций. Класс `.wiki-storybook-item__label--static` делает метку статичной без абсолютного позиционирования.
  - `&--padding` — добавляет стандартные внутренние отступы `16px`.
  - `&--rectangle` — устанавливает соотношение сторон `16:9` и растягивает блок на все 12 колонок в сетке.
  - `&--widescreen` — соотношение сторон `32:9`, растягивает блок на все 12 колонок в сетке.
  - `&--compact` — соотношение сторон `64:9`, растягивает блок на все 12 колонок в сетке.
  - `&--auto` — автоматическое соотношение сторон, растягивает блок на все 12 колонок в сетке.
  - `&--squared--xs`, `&--squared--sm`, `&--squared--md`, `&--squared--lg`, `&--squared--max` — адаптивное управление шириной квадратных блоков. Например, `--squared--sm` занимает 6 колонок на мобильных, 4 колонки на планшетах (от 640px) и 2 колонки на десктопах (от 1024px).
  - `&--center` — выравнивает содержимое по центру с помощью flex.
  - `&--widthAuto` — устанавливает ширину `auto`.
  - `&--overflowVisible` — сбрасывает `overflow: hidden` на `overflow: visible` (необходимо для выпадающих меню, модалок).
  - `&--rtl` — включает режим отображения справа налево (Right-to-Left).

- **Тестовые компоненты и заглушки**:
  - `.wiki-storybook-card` — тестовая карточка (ширина `320px`, скругления, рамка) для симуляции реального интерфейса:
    - `.wiki-storybook-card__image` — обложка высотой 128px.
    - `.wiki-storybook-card__content` — вертикальный flex-контейнер с отступами `16px` и расстоянием `16px`.
    - `.wiki-storybook-card__label` — заголовок с размером шрифта `20px`.
    - `.wiki-storybook-card__information` — серый текст описания (`14px`).
    - `.wiki-storybook-card__actions` — горизонтальный контейнер для кнопок (`8px`).
  - `.wiki-storybook-button` — кнопка-заглушка для обработки кликов. Модификаторы для статусных цветов: `&--success` (зеленый), `&--error` (красный), `&--warning` (желтый), `&--info` (синий).
  - `.wiki-storybook-dummy` — визуальный блок-заглушка (`32px` высотой, полупрозрачный серый).
    - Цвета: `&--color--blue`, `&--color--red`, `&--color--green`.
    - Размеры (высота): `&--size--sm` (`64px`), `&--size--md` (`128px`), `&--size--lg` (`256px`).

### Инструкции:
1. Изучи предоставленный код компонента (включая props, emits, slots, expose).
2. Определи все публичные интерфейсы.
3. Сформируй документацию строго по шаблону выше.
3.1. Если уже описан компонент, проп, событие или слот, и при этом не было изменений, то не исправляй описание.
3.2. Старайся сохранять оригинальные описания без изменений.
4. Используй правильную терминологию (Props, Events, Slots, Expose).
4.1. Все заголовки должны быть на языке [wikiLanguage].
4.2. В сценариях Storybook и примерах MDX-кода вы ОБЯЗАНЫ использовать предопределенные классы-помощники разметки из `storybookStyle.scss` (описанные выше) вместо инлайн-стилей или кастомных блоков CSS.
4.3. Ни при каких обстоятельствах не изменяй оригинальный код компонента, если об этом явно не попросили.
4.4. Строго следуй всем правилам и инструкциям данного промпта. Никаких галлюцинаций: категорически запрещено придумывать, домысливать или добавлять несуществующие свойства (props), методы (expose), события (events), слоты (slots) или внешние зависимости.
5. Не добавляй лишних введений или заключений, только MDX.
6. Верни только полный MDX-код документации без какого-либо дополнительного текста, комментариев или форматирования markdown (```).
7. Результат должен быть исключительно в виде текста (ответа), не прикрепляй никаких файлов.
8. Формат ответа. Твой ответ должен состоять строго из 5 частей, разделенных разделителем "#########". Не добавляй никакого текста до или после этого формата.

**Технические требования (строго сохранить следующие строки без изменений):**
- `const meta = ...` — конфигурация Storybook.
- `import * as Component from ...` — импорт компонента.
- `import { Meta } from '@storybook/addon-docs/blocks'` — системный импорт.
- `import { StorybookMain } from '@dxtmisha/wiki/storybook'` — системный импорт.

Формат:
[короткое описание в несколько слов (3-5) о назначении компонента]
#########
[оригинальный код компонента (*.vue) с комментариями к методам (добавь их, если они отсутствуют). Если все комментарии уже присутствуют, верни --FULL--]
#########
[оригинальный код типизации компонента (types.ts) с комментариями к props, emits, slots и expose (добавь их, если они отсутствуют). Если все комментарии уже присутствуют, верни --FULL--]
#########
[оригинальный код stories (*.stories.ts). Проанализируй и добавь недостающие сценарии (stories), если это необходимо. Если текущие stories достаточны, верни --FULL--]
#########
[сама документация в MDX формате по шаблону выше].
