@dxtmisha/scripts 0.4.2 → 0.4.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/scripts",
   "private": false,
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "description": "Development scripts and CLI tools for DXT UI projects - automated component generation, library building and project management tools",
   "keywords": [

package/src/classes/Component/ComponentWiki.ts

@@ -20,7 +20,7 @@ import { isFilled } from '@dxtmisha/functional'
 // Sample Vite config template path / Путь к шаблону Vite-конфига
 const FILE_VITE_SAMPLE = [__dirname, '..', '..', 'media', 'templates', 'viteComponentTemplateConfig.ts']
 // Sample AI prompt template path / Путь к шаблону AI-промпта
-const FILE_PROMPT_SAMPLE = [__dirname, '..', '..', 'media', 'templates', 'componentPrompt.txt']
+const FILE_PROMPT_SAMPLE = [__dirname, '..', '..', 'media', 'templates', 'componentPrompt.en.txt']
 
 // Async exec wrapper / Обёртка для асинхронного exec
 const execAsync = promisify(exec)

package/src/media/templates/componentPrompt.en.txt

@@ -0,0 +1,370 @@
+You need to prepare documentation for a component in the [wikiLanguage] language. Follow the format and requirements strictly. Do not add anything beyond what is described.
+Stack: Storybook 9.x, TypeScript, MDX.
+
+Canvas component is imported from '@storybook/addon-docs/blocks'
+
+====================================
+1) Study the current component code
+====================================
+```
+[code]
+```
+Analyze the structure, props, events, slots, types, internal logic.
+
+====================================
+2) Add missing type comments
+====================================
+Add brief single-language (in [wikiLanguage]) JSDoc comments to missing types and their properties.
+Code to fix:
+```ts
+// types.ts
+[types]
+```
+Duplicate the result below without wrapper:
+[types]
+
+Comment requirements:
+- Single-line for simple fields.
+- Multi-line for logic blocks.
+- No duplication of the obvious.
+- Adapted for storybook.
+
+Example:
+```ts
+/**
+ * Basic properties for image components.
+ */
+export interface IconPropsBasic<
+  Image extends ImagePropsBasic = ImagePropsBasic
+> extends SkeletonPropsInclude {
+  // Status
+  /** Active state of the icon */
+  active?: boolean
+
+  // Icon
+  /** Main icon value */
+  icon?: ImageValue<Image>
+  /** Active icon value */
+  iconActive?: ImageValue<Image>
+}
+```
+
+====================================
+3) Stories for Storybook
+====================================
+Create only the minimum necessary examples. Each example is as simple as possible, without extra wrappers, only what demonstrates the essence.
+Code to fix:
+```ts
+// ComponentDoc.stories.ts
+[stories]
+```
+Rules:
+- Don't touch existing stories, only additions.
+- Don't touch const meta. DO NOT CHANGE ANYTHING IN META.
+- Don't touch existing constants.
+- Don't add stories just for filling.
+- If the component has different modes (e.g., states or display variants), show one example each.
+- Story names in PascalCase style without extra words.
+- Minimize imports: only what is required.
+
+====================================
+4) MDX documentation (component description)
+====================================
+Prepare a complete component description in MDX format. Strict style: no tables, no extra sections.
+Code to fix:
+```md
+// UiPlayerLite.mdx
+[md]
+```
+
+MDX structure rules:
+- At the beginning: [description] — Brief description of the purpose (1–3 sentences): conveys the essence of the component as briefly as possible.
+- Next: main text (documentation) — starts without a heading. This is [doc].
+- You can refine existing text by changing it, but don't delete. Delete only unnecessary or outdated content.
+- Be sure to list slots (if any) and events (if any) in the given format.
+- Don't describe props in a list if they are simple. Describe only complex relationships (e.g., dependent props) or composite types in detail.
+- Usage example — at the end of the corresponding semantic block or at the very bottom if there is one general example.
+- Slots and events — strictly in the format below. If there are no types, the type block is omitted.
+- Add Canvas if there is a usage example. If not, add stories.
+
+Slot format:
+```
+## Slots
+### `slotName`
+Brief description of the slot's purpose. You can highlight features with a bulleted list.
+If there are props, add props description. `props: any` means there are no props, no need to write it.
+If there are multiple slots — each with `###` subheading.
+If it just returns VNode, no need to describe.
+Don't write something like: `This slot accepts any VNode and doesn't pass any properties.`
+If there are no events, don't describe the events block.
+If there are no slots, don't describe the slots block.
+
+Event format:
+```
+## Events
+### `eventName`
+Description of when and why it is emitted.
+
+Slot description example (don't copy verbatim, adapt):
+### `suffix`
+
+Slot for placing content at the end of the component, after the main content.
+
+**Returns:** `VNode` — element with class `{className}__suffix` and attribute `data-event-type="suffix"`
+
+```html
+<Component>
+  <template #suffix>
+    <Icon name="check" />
+  </template>
+</Component>
+```
+
+### `control`
+
+Slot for placing window control elements (close buttons, minimize, etc.).
+
+**Parameters:**
+- `props: WindowControlItem` — object with window control data
+
+```html
+<Window>
+  <template #control="{ onclick, open }">
+    <button @click="onclick">
+      {{ open ? 'Close' : 'Open' }}
+    </button>
+  </template>
+</Window>
+```
+
+Event description example (adapt to context):
+### `window`
+
+Event fires when the window state changes (open/close).
+
+**Parameters:**
+- `options: WindowEmitOptions` — object with window data
+
+**WindowEmitOptions structure:**
+- `id: string` — unique window identifier
+- `element: HTMLDivElement` — window DOM element
+- `control: HTMLElement` — control DOM element
+- `open: boolean` — window open state (`true` - open, `false` - closed)
+
+```html
+<script setup>
+const handleWindow = (options) => {
+  console.log('Window ID:', options.id)
+  console.log('Window open:', options.open)
+  console.log('Window element:', options.element)
+  console.log('Control element:', options.control)
+}
+</script>
+
+<template>
+  <Window @window="handleWindow">
+    <template #default>
+      <p>Window content</p>
+    </template>
+  </Window>
+</template>
+```
+
+
+Canvas usage example:
+<Canvas of={Chip.ChipSkeleton}/>
+
+====================================
+5) Final return
+====================================
+Return the result strictly in the format (nothing extra before or after):
+[types.ts]
+#########
+[ComponentDoc.stories.ts]
+#########
+[UiPlayerLite.mdx]
+
+Where:
+- Don't add anything extra (like ```ts)
+- Don't wrap in blocks.
+- Don't wrap in ```ts or anything similar.
+- [types.ts] — final types block with comments (only content, without file name comments).
+- [ComponentDoc.stories.ts] — final stories file (only content, without file name comments).
+- [UiPlayerLite.mdx] — final MDX documentation (only content, without file name comments).
+
+====================================
+Constraints and style
+====================================
+- No tables.
+- No arbitrary additional sections.
+- Don't add "Props" section if there are no complex dependencies.
+- Don't duplicate descriptions of the same thing.
+- Respect the [wikiLanguage] language — if it's "en" use English, otherwise the corresponding language.
+- Don't use placeholders outside those specified.
+- Code blocks: for types and events — ```ts, for markup — ```html when necessary.
+- Stories: only necessary scenarios, without extra visual decorations.
+
+====================================
+Example (don't include in response, only as style guide)
+====================================
+Component for creating modal windows, dialogs, and popup elements with flexible positioning and adaptive behavior.
+
+Window manages content display over the main interface, supports various positioning types (modal windows, dropdown menus, action sheets), open/close animations, and event system integration. The component automatically handles clicks outside the area, focus management, and adaptation to different screen sizes.
+
+**Key Features:**
+
+- Flexible positioning (center, edges, screen corners)
+- Adaptive modes (modal, menu, actionSheet, static)
+- Open/close animations with origin configuration
+- State management via v-model or expose methods
+- Scrollbar integration for scrollable content
+- Background interaction blocking (persistent mode)
+- Window lifecycle events
+
+**Typical Use Cases:**
+
+- Modal windows for forms and confirmations
+- Dropdown menus and context menus
+- Side panels and drawer components
+- Action sheets for mobile interfaces
+- Tooltips and dialogs
+
+## CSS Classes for Behavior Control
+
+- `*--block` — prevents window from closing when clicking outside its boundaries
+- `*--blockChildren` — prevents current window from closing
+- `*--blockOther` — prevents other windows from closing until current one is closed
+- `*--close` — applies to elements for closing the window
+- `*--controlOpenOnly` — applies to control elements that only open the window
+- `*--controlStatic` — applies to control elements in static mode
+- `*--static` — applies to elements inside window, canceling all actions
+
+Where `*` is the component class name (e.g., `d1-window`, `m3-window`).
+
+## Static Mode (staticMode)
+
+The Window component supports static mode operation through the `staticMode` property. In this mode, the window works as an embedded component without modal behavior:
+
+- **Content displays immediately** — window doesn't hide and doesn't require activation
+- **Animations disabled** — no appearance/disappearance effects
+- **Positioning disabled** — window is embedded in document flow
+- **Works with adaptive** — when the `adaptive` property has one of the static modes (e.g., `static`), static mode is enabled
+
+Static mode is especially useful for embedding window content directly into the interface without modal behavior.
+
+## Positioning Direction (axis)
+
+Controls the axis of window placement relative to the anchor element. Default: `y`.
+
+> Applies only in menu mode (`adaptive="menu"` or `adaptive="menuWindow"`).
+
+**Possible values:**
+- `'x'` — horizontal axis (left or right of anchor)
+- `'y'` — vertical axis (top or bottom of anchor)
+- `'on'` — over anchor (window centers on element)
+
+### Behavior
+
+- Component automatically selects the placement side with the most available space
+- When using context menu (`contextmenu`), positioning occurs from cursor coordinates
+- Window always stays within visible screen area (viewport)
+- Indent from anchor is set via `indent` property (default 4px)
+
+## State Management via v-model
+
+Two-way binding of window open state via `v-model:open`.
+
+**Parameters:**
+- `open: boolean` — window open state
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <button @click="isOpen = true">Open</button>
+
+  <Window v-model:open="isOpen">
+    <template #default>
+      <p>Window content</p>
+      <button @click="isOpen = false">Close</button>
+    </template>
+  </Window>
+</template>
+```
+
+## Expose Methods
+### `id`
+
+Unique window identifier.
+
+**Type:** `string`
+
+```html
+<script setup>
+const windowRef = ref()
+
+onMounted(() => {
+  console.log(windowRef.value.id) // "window-123"
+})
+</script>
+
+<template>
+  <Window ref="windowRef" />
+</template>
+```
+
+## Slots
+### `control`
+
+Slot for placing window control elements (close buttons, minimize, etc.).
+
+**Parameters:**
+- `props: WindowControlItem` — object with window control data
+
+```html
+<Window>
+  <template #control="{ onclick, open }">
+    <button @click="onclick">
+      {{ open ? 'Close' : 'Open' }}
+    </button>
+  </template>
+</Window>
+```
+
+## Events
+### `window`
+
+Event fires when the window state changes (open/close).
+
+**Parameters:**
+- `options: WindowEmitOptions` — object with window data
+
+**WindowEmitOptions structure:**
+- `id: string` — unique window identifier
+- `element: HTMLDivElement` — window DOM element
+- `control: HTMLElement` — control DOM element
+- `open: boolean` — window open state (`true` - open, `false` - closed)
+
+```html
+<script setup>
+const handleWindow = (options) => {
+  console.log('Window ID:', options.id)
+  console.log('Window open:', options.open)
+  console.log('Window element:', options.element)
+  console.log('Control element:', options.control)
+}
+</script>
+
+<template>
+  <Window @window="handleWindow">
+    <template #default>
+      <p>Window content</p>
+    </template>
+  </Window>
+</template>
+```
+

package/src/media/templates/componentPrompt.ru.txt

@@ -0,0 +1,369 @@
+Нужно подготовить документацию для компонента на языке [wikiLanguage]. Следуй строго формату и требованиям ниже. Не добавляй ничего лишнего вне описанного.
+Стек Storybook 9.x, TypeScript, MDX.
+
+Компонент Canvas подключается из '@storybook/addon-docs/blocks'
+
+====================================
+1) Изучи текущий код компонента
+====================================
+```
+[code]
+```
+Проанализируй структуру, props, события, слоты, типы, внутреннюю логику.
+
+====================================
+2) Добавь недостающие комментарии к типам
+====================================
+Добавь краткие одноязычные (на [wikiLanguage]) JSDoc-комментарии к отсутствующим типам и их свойствам.
+Код для исправления:
+```ts
+// types.ts
+[types]
+```
+Ниже продублируй итог без обёртки:
+[types]
+
+Требования к комментариям:
+- Однострочные для простых полей.
+- Многострочные для блоков логики.
+- Без дублирования очевидного.
+- Адаптированы к storybook.
+
+Пример:
+```ts
+/**
+ * Basic properties for image components.
+ */
+export interface IconPropsBasic<
+  Image extends ImagePropsBasic = ImagePropsBasic
+> extends SkeletonPropsInclude {
+  // Status
+  /** Active state of the icon */
+  active?: boolean
+
+  // Icon
+  /** Значение основной иконки */
+  icon?: ImageValue<Image>
+  /** Значение активной иконки */
+  iconActive?: ImageValue<Image>
+}
+```
+
+====================================
+3) Истории (stories) для Storybook
+====================================
+Создай только минимально необходимые примеры. Каждый пример — максимально простой, без лишних обёрток, только то, что демонстрирует суть.
+Код для исправления:
+```ts
+// ComponentDoc.stories.ts
+[stories]
+```
+Правила:
+- Не трогать те stories, которые уже есть, только добавления.
+- Не трогать const meta. НИЧЕГО НЕ МЕНЯТЬ В META.
+- Не трогать существующие константы.
+- Не добавляй истории ради заполнения.
+- Если компонент имеет разные режимы (например, состояния или варианты отображения), покажи по одному примеру.
+- Имена историй — в стиле PascalCase без лишних слов.
+- Минимизируй импорты: только то, что требуется.
+
+====================================
+4) MDX-документация (описание компонента)
+====================================
+Подготовь полное описание компонента в формате MDX. Строгая стилистика: никаких таблиц, никаких лишних разделов.
+Код для исправления:
+```md
+// UiPlayerLite.mdx
+[md]
+```
+
+Правила структуры MDX:
+- В начале: [description] — Краткое описание назначения (1–3 предложения): максимально коротко передаёт суть компонента.
+- Далее: основной текст (документация) — начинается без заголовка. Это [doc].
+- Можно дорабатывать существующий текст, изменяя, но не удалять. Удаляй только лишнее или неактуальное.
+- Обязательно перечисли слоты (если есть) и события (если есть) в заданном формате.
+- Не описывай props списком, если они простые. Подробно описывай только сложные связки (например, зависимые props) или составные типы.
+- Пример использования — в конце соответствующего смыслового блока или в самом низу, если один общий пример.
+- Слоты и события — строго в формате ниже. Если типов нет — блок с типом опускается.
+- Добавь Canvas, если есть пример использования. Если нет — добавь stories.
+
+Формат слотов:
+```
+## Слоты
+### `имяСлота`
+Краткое описание назначения слота. Можно маркированным списком выделить особенности.
+Если есть props, добавить описание props. `props: any` - это значит, что нет пропсов, его не надо писать.
+Если слотов несколько — каждый с подпунктом `###`.
+Если возвращает просто VNode, не надо описывать.
+Не надо писать что-то в таком виде: `Этот слот принимает любые VNode и не передает никаких свойств.`
+Если нет событий, не описывать блок событий.
+Если нет слотов, не описывать блок слотов.
+
+Формат событий:
+```
+## События
+### `имяСобытия`
+Описание, когда и зачем испускается.
+
+Пример описания слота (не вставляй дословно, адаптируй):
+### `suffix`
+
+Слот для размещения контента в конце компонента, после основного содержимого.
+
+**Возвращает:** `VNode` — элемент с классом `{className}__suffix` и атрибутом `data-event-type="suffix"`
+
+```html
+<Component>
+  <template #suffix>
+    <Icon name="check" />
+  </template>
+</Component>
+```
+
+### `control`
+
+Слот для размещения элементов управления окном (кнопки закрытия, минимизации и т.д.).
+
+**Параметры:**
+- `props: WindowControlItem` — объект с данными управления окном
+
+```html
+<Window>
+  <template #control="{ onclick, open }">
+    <button @click="onclick">
+      {{ open ? 'Закрыть' : 'Открыть' }}
+    </button>
+  </template>
+</Window>
+```
+
+Пример описания события (адаптируй под контекст):
+### `window`
+
+Событие срабатывает при изменении состояния окна (открытие/закрытие).
+
+**Параметры:**
+- `options: WindowEmitOptions` — объект с данными окна
+
+**Структура WindowEmitOptions:**
+- `id: string` — уникальный идентификатор окна
+- `element: HTMLDivElement` — DOM элемент окна
+- `control: HTMLElement` — DOM элемент управления
+- `open: boolean` — состояние открытия окна (`true` - открыто, `false` - закрыто)
+
+```html
+<script setup>
+const handleWindow = (options) => {
+  console.log('ID окна:', options.id)
+  console.log('Окно открыто:', options.open)
+  console.log('Элемент окна:', options.element)
+  console.log('Элемент управления:', options.control)
+}
+</script>
+
+<template>
+  <Window @window="handleWindow">
+    <template #default>
+      <p>Содержимое окна</p>
+    </template>
+  </Window>
+</template>
+```
+
+
+Пример использования Canvas:
+<Canvas of={Chip.ChipSkeleton}/>
+
+====================================
+5) Итоговый возврат
+====================================
+Верни результат строго в формате (ничего лишнего до или после):
+[types.ts]
+#########
+[ComponentDoc.stories.ts]
+#########
+[UiPlayerLite.mdx]
+
+Где:
+- Не добавляй ничего лишнего (типа ```ts)
+- Не оборачивай в блоки.
+- Не оборачивай в ```ts или что-то подобное.
+- [types.ts] — итоговый блок типов с комментариями (only content, without file name comments).
+- [ComponentDoc.stories.ts] — итоговый файл историй (only content, without file name comments).
+- [UiPlayerLite.mdx] — итоговая MDX-документация (only content, without file name comments).
+
+====================================
+Ограничения и стилистика
+====================================
+- Никаких таблиц.
+- Никаких произвольных дополнительных разделов.
+- Не добавляй раздел "Props", если нет сложных зависимостей.
+- Не дублируй описание одного и того же.
+- Уважай язык [wikiLanguage] — если это "en" используй английский, иначе соответствующий язык.
+- Не используй placeholder'ы вне оговорённых.
+- Кодовые блоки: для типов и событий — ```ts, для разметки — ```html при необходимости.
+- Сторисы: только необходимые сценарии, без лишних визуальных украшений.
+
+====================================
+Пример (не включать в ответ, только как ориентир стиля)
+====================================
+Компонент для создания модальных окон, диалогов и всплывающих элементов с гибким позиционированием и адаптивным поведением.
+
+Window управляет отображением контента поверх основного интерфейса, поддерживает различные типы позиционирования (модальные окна, выпадающие меню, action sheets), анимации открытия/закрытия и интеграцию с системой событий. Компонент автоматически обрабатывает клики вне области, управление фокусом и адаптацию под различные размеры экранов.
+
+**Основные возможности:**
+
+- Гибкое позиционирование (центр, края, углы экрана)
+- Адаптивные режимы (modal, menu, actionSheet, static)
+- Анимации открытия/закрытия с настройкой origin
+- Управление состоянием через v-model или expose методы
+- Интеграция со Scrollbar для прокручиваемого контента
+- Блокировка взаимодействия с фоном (persistent режим)
+- События жизненного цикла окна
+
+**Типичные сценарии использования:**
+
+- Модальные окна для форм и подтверждений
+- Выпадающие меню и контекстные меню
+- Боковые панели и drawer компоненты
+- Action sheets для мобильных интерфейсов
+- Всплывающие подсказки и диалоги
+
+## CSS классы для управления поведением
+
+- `*--block` — предотвращает закрытие окна при клике вне его границ
+- `*--blockChildren` — предотвращает закрытие текущего окна
+- `*--blockOther` — предотвращает закрытие других окон до закрытия текущего
+- `*--close` — применяется к элементам для закрытия окна
+- `*--controlOpenOnly` — применяется к элементам управления, которые только открывают окно
+- `*--controlStatic` — применяется к элементам управления в статическом режиме
+- `*--static` — применяется к элементам внутри окна, отменяя все действия
+
+Где `*` — название класса компонента (например, `d1-window`, `m3-window`).
+
+## Статический режим (staticMode)
+
+Компонент Window поддерживает статический режим работы через свойство `staticMode`. В этом режиме окно работает как встроенный компонент без модального поведения:
+
+- **Содержимое отображается сразу** — окно не скрывается и не требует активации
+- **Отключены анимации** — нет эффектов появления/исчезновения
+- **Отключено позиционирование** — окно встраивается в поток документа
+- **Работает с adaptive** — когда свойство `adaptive` имеет один из статичных режимов (например, `static`), включается статичный режим
+
+Статический режим особенно полезен для встраивания содержимого окна непосредственно в интерфейс без модального поведения.
+
+## Направление позиционирования (axis)
+
+Управляет осью размещения окна относительно элемента-якоря. По умолчанию: `y`.
+
+> Применяется только в режиме меню (`adaptive="menu"` или `adaptive="menuWindow"`).
+
+**Возможные значения:**
+- `'x'` — горизонтальная ось (слева или справа от якоря)
+- `'y'` — вертикальная ось (сверху или снизу от якоря)
+- `'on'` — поверх якоря (окно центрируется над элементом)
+
+### Поведение
+
+- Компонент автоматически выбирает сторону размещения с наибольшим доступным пространством
+- При использовании контекстного меню (`contextmenu`) позиционирование происходит от координат курсора
+- Окно всегда остается в пределах видимой области экрана (viewport)
+- Отступ от якоря задается через свойство `indent` (по умолчанию 4px)
+
+## Управление состоянием через v-model
+
+Двусторонняя привязка состояния открытия окна через `v-model:open`.
+
+**Параметры:**
+- `open: boolean` — состояние открытия окна
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <button @click="isOpen = true">Открыть</button>
+
+  <Window v-model:open="isOpen">
+    <template #default>
+      <p>Содержимое окна</p>
+      <button @click="isOpen = false">Закрыть</button>
+    </template>
+  </Window>
+</template>
+```
+
+## Expose методы
+### `id`
+
+Уникальный идентификатор окна.
+
+**Тип:** `string`
+
+```html
+<script setup>
+const windowRef = ref()
+
+onMounted(() => {
+  console.log(windowRef.value.id) // "window-123"
+})
+</script>
+
+<template>
+  <Window ref="windowRef" />
+</template>
+```
+
+## Слоты
+### `control`
+
+Слот для размещения элементов управления окном (кнопки закрытия, минимизации и т.д.).
+
+**Параметры:**
+- `props: WindowControlItem` — объект с данными управления окном
+
+```html
+<Window>
+  <template #control="{ onclick, open }">
+    <button @click="onclick">
+      {{ open ? 'Закрыть' : 'Открыть' }}
+    </button>
+  </template>
+</Window>
+```
+
+## События
+### `window`
+
+Событие срабатывает при изменении состояния окна (открытие/закрытие).
+
+**Параметры:**
+- `options: WindowEmitOptions` — объект с данными окна
+
+**Структура WindowEmitOptions:**
+- `id: string` — уникальный идентификатор окна
+- `element: HTMLDivElement` — DOM элемент окна
+- `control: HTMLElement` — DOM элемент управления
+- `open: boolean` — состояние открытия окна (`true` - открыто, `false` - закрыто)
+
+```html
+<script setup>
+const handleWindow = (options) => {
+  console.log('ID окна:', options.id)
+  console.log('Окно открыто:', options.open)
+  console.log('Элемент окна:', options.element)
+  console.log('Элемент управления:', options.control)
+}
+</script>
+
+<template>
+  <Window @window="handleWindow">
+    <template #default>
+      <p>Содержимое окна</p>
+    </template>
+  </Window>
+</template>
+```

package/src/media/templates/componentPrompt.txt

@@ -1,227 +0,0 @@
-Нужно подготовить документацию для компонента на языке [wikiLanguage]. Следуй строго формату и требованиям ниже. Не добавляй ничего лишнего вне описанного.
-Стек Storybook 9.x, TypeScript, MDX.
-
-компонент Canvas подключаеться из '@storybook/addon-docs/blocks'
-
-====================================
-1) Изучи текущий код компонента
-====================================
-```
-[code]
-```
-Проанализируй структуру, props, события, слоты, типы, внутреннюю логику.
-
-====================================
-2) Добавь недостающие комментарии к типам
-====================================
-Добавь краткие одноязычные (на [wikiLanguage]) JSDoc-комментарии к отсутствующим типам и его свойство.
-Код для испправления:
-```ts
-// types.ts
-[types]
-```
-Ниже продублируй итог без обёртки:
-[types]
-
-Требования к комментариям:
-- Однострочные для простых полей.
-- Многострочные для блоков логики.
-- Без дублирования очевидного.
-- адаптированы к storybook.
-
-Пример:
-```ts
-/**
- * Basic properties for image components.
- */
-export interface IconPropsBasic<
-  Image extends ImagePropsBasic = ImagePropsBasic
-> extends SkeletonPropsInclude {
-  // Status
-  /** Active state of the icon */
-  active?: boolean
-
-  // Icon
-  /** Значение основной иконки */
-  icon?: ImageValue<Image>
-  /** Значение активной иконки */
-  iconActive?: ImageValue<Image>
-}
-```
-
-====================================
-3) Истории (stories) для Storybook
-====================================
-Создай только минимально необходимые примеры. Каждый пример — максимально простой, без лишних обёрток, только то, что демонстрирует суть.
-Код для испправления:
-```ts
-// ComponentDoc.stories.ts
-[stories]
-```
-Правила:
-- Не трогать те сторис, который уже есть, только добавления.
-- Не трогать const meta. НЕЧЕГО НЕ МЕНЯТЬ В META.
-- Не трогать существующие константы.
-- Не добавляй истории ради заполнения.
-- Если компонент имеет разные режимы (например, состояния или варианты отображения), покажи по одному примеру.
-- Имена историй — в стиле PascalCase без лишних слов.
-- Минимизируй импорты: только то, что требуется.
-
-====================================
-4) MDX-документация (описание компонента)
-====================================
-Подготовь полное описание компонента в формате MDX. Строгая стилистика: никаких таблиц, никаких лишних разделов.
-Код для испправления:
-```md
-// UiPlayerLite.mdx
-[md]
-```
-
-Правила структуры MDX:
-- В начале: [description] — Краткое описание назначения (1–3 предложения): максимально коротко передаёт суть компонента.
-- Далее: основной текст (документация) — начинается без заголовка. Это [doc].
-- Можно дорабатывать существующий текст, изменя, но не удалять. Удаляй только лишнее или не актуальный.
-- Обязательно перечисли слоты (если есть) и события (если есть) в заданном формате.
-- Не описывай props списком, если они простые. Подробно описывай только сложные связки (например, зависимые props) или составные типы.
-- Пример использования — в конце соответствующего смыслового блока или в самом низу, если один общий пример.
-- Слоты и события — строго в формате ниже. Если типов нет — блок с типом опускается.
-- Добавит Canvas, если есть пример использования. Если нет — добавить сторис.
-
-Формат слотов:
-```
-## Слоты
-### `имяСлота`
-Краткое описание назначения слота. Можно маркированным списком выделить особенности.
-Если есть props, добавить описанике props. `props: any` - это значить что нету пропсов, его не надо писать.
-Если слотов несколько — каждый с подпунктом `###`.
-Если возврашет просто VNode, не надо описывать.
-Не надо что то в такой типе `Этот слот принимает любые VNode и не передает никаких свойств.`
-Если нету события, не описывать блок событий.
-Если нету слотов, не описывать блок слотов.
-
-Формат событий:
-```
-## События
-### `имяСобытия`
-Описание когда и зачем испускается.
-
-Пример описания слота (не вставляй дословно, адаптируй):
-### `suffix`
-
-Слот для размещения контента в конце компонента, после основного содержимого.
-
-**Возвращает:** `VNode` — элемент с классом `{className}__suffix` и атрибутом `data-event-type="suffix"`
-
-```html
-<Component>
-  <template #suffix>
-    <Icon name="check" />
-  </template>
-</Component>
-```
-
-### `control`
-
-Слот для размещения элементов управления окном (кнопки закрытия, минимизации и т.д.).
-
-**Параметры:**
-- `props: WindowControlItem` — объект с данными управления окном
-
-```html
-<Window>
-  <template #control="{ onclick, open }">
-    <button @click="onclick">
-      {{ open ? 'Закрыть' : 'Открыть' }}
-    </button>
-  </template>
-</Window>
-```
-
-Пример описания события (адаптируй под контекст):
-### `window`
-
-Событие срабатывает при изменении состояния окна (открытие/закрытие).
-
-**Параметры:**
-- `options: WindowEmitOptions` — объект с данными окна
-
-**Структура WindowEmitOptions:**
-- `id: string` — уникальный идентификатор окна
-- `element: HTMLDivElement` — DOM элемент окна
-- `control: HTMLElement` — DOM элемент управления
-- `open: boolean` — состояние открытия окна (`true` - открыто, `false` - закрыто)
-
-```html
-<script setup>
-const handleWindow = (options) => {
-  console.log('ID окна:', options.id)
-  console.log('Окно открыто:', options.open)
-  console.log('Элемент окна:', options.element)
-  console.log('Элемент управления:', options.control)
-}
-</script>
-
-<template>
-  <Window @window="handleWindow">
-    <template #default>
-      <p>Содержимое окна</p>
-    </template>
-  </Window>
-</template>
-```
-
-
-Пример использования Canvas:
-<Canvas of={Chip.ChipSkeleton}/>
-
-====================================
-5) Итоговый возврат
-====================================
-Верни результат строго в формате (ничего лишнего до или после):
-[types.ts]
-#########
-[ComponentDoc.stories.ts]
-#########
-[UiPlayerLite.mdx]
-
-Где:
-- не добавляй ничего лишнего. (типа ```ts)
-- не оборачивай в блоки.
-- не оборачивай в ```ts или что-то подбного.
-- [types.ts] — итоговый блок типов с комментариями (only content, without file name comments).
-- [ComponentDoc.stories.ts] — итоговый файл историй (only content, without file name comments).
-- [UiPlayerLite.mdx] — итоговая MDX-документация (only content, without file name comments).
-
-====================================
-Ограничения и стилистика
-====================================
-- Никаких таблиц.
-- Никаких произвольных дополнительных разделов.
-- Не добавляй раздел "Props", если нет сложных зависимостей.
-- Не дублируй описание одного и того же.
-- Уважай язык [wikiLanguage] — если это "en" используй английский, иначе соответствующий язык.
-- Не используй placeholder'ы вне оговорённых.
-- Кодовые блоки: для типов и событий — ```ts, для разметки — ```html при необходимости.
-- Сторисы: только необходимые сценарии, без лишних визуальных украшений.
-
-====================================
-Пример (не включать в ответ, только как ориентир стиля)
-====================================
-## Свойства выделения текста
-
-Свойства `highlight` и `highlightLengthStart` предназначены для управления выделением текста в компонентах.
-
-### Свойства
-
-- **highlight** — Текст для выделения в содержимом компоненте
-- **highlightLengthStart** — Минимальная длина значения highlight для начала выделения
-
-### Взаимосвязь свойств
-
-Свойства работают совместно для обеспечения интеллектуального выделения текста. `highlight` определяет что выделять, а `highlightLengthStart` контролирует когда начинать выделение.
-
-- `highlight` содержит строку текста, которую нужно найти и выделить в компоненте
-- `highlightLengthStart` устанавливает минимальную длину строки поиска для активации функции выделения
-- Выделение активируется только когда длина `highlight` достигает значения `highlightLengthStart`
-- Это предотвращает нежелательное выделение при вводе коротких строк поиска
-- Оба свойства обеспечивают оптимальный пользовательский опыт при работе с поиском и фильтрацией