@dxtmisha/scripts 0.4.4 → 0.4.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/scripts",
   "private": false,
-  "version": "0.4.4",
+  "version": "0.4.7",
   "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/Library/LibraryExport.ts

@@ -5,7 +5,8 @@ import type { LibraryFiles } from '../../types/libraryTypes'
 import {
   UI_DIRS_LIST_EXPORT,
   UI_DIRS_FILE_EXPORT,
-  UI_DIR_IN, UI_FLAG_NOT_EXPORT
+  UI_DIR_IN,
+  UI_FLAG_NOT_EXPORT
 } from '../../config'
 
 /**
@@ -47,7 +48,7 @@ export class LibraryExport {
    * @param path filename/ имя файла
    */
   protected isExport(path: string | string[]): boolean {
-    return !this.getFile(path).match(UI_FLAG_NOT_EXPORT)
+    return !PropertiesFile.joinPath(path).match('.test.') && !this.getFile(path).match(UI_FLAG_NOT_EXPORT)
   }
 
   /**

package/src/classes/Properties/to/PropertiesToLink.ts

@@ -114,8 +114,9 @@ export class PropertiesToLink extends PropertiesToAbstract {
             this.addIgnore(data.value)
           }
         } else {
-          expect = true
-          break
+          // TODO: зачем это надо?
+          // expect = true
+          // break
         }
       } else if (
         isObjectNotArray(item.value)

package/src/config.ts

@@ -58,6 +58,7 @@ export const UI_DIRS_LIST_EXPORT = [
   'components',
   'composables',
   'functions',
+  'global',
   'types'
 ]
 

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

@@ -1,5 +1,5 @@
 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.
+Stack: Storybook 9.x, TypeScript, MDX, Vue 3 Composition API.
 
 Canvas component is imported from '@storybook/addon-docs/blocks'
 
@@ -9,12 +9,21 @@ Canvas component is imported from '@storybook/addon-docs/blocks'
 ```
 [code]
 ```
-Analyze the structure, props, events, slots, types, internal logic.
+
+Analyze:
+- Component structure (props, computed, methods)
+- Events (emit) and their parameters
+- Slots and their parameters
+- Data types (interfaces, types)
+- Expose methods and properties
+- Internal logic and behavior
+- Dependencies on other components
 
 ====================================
 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
@@ -22,12 +31,14 @@ Code to fix:
 ```
 
 Comment requirements:
-- Single-line for simple fields.
-- Multi-line for logic blocks.
-- No duplication of the obvious.
-- Adapted for storybook.
-
-Example:
+- Single-line for simple fields (/** Description */)
+- Multi-line for complex types or logic blocks
+- No duplication of the obvious (don't comment "id" as "component id")
+- Adapted for display in Storybook
+- Use technical terms correctly
+- For union types, describe each value separately in code
+
+Example (strictly follow the format):
 ```ts
 /**
  * Basic properties for image components.
@@ -44,52 +55,261 @@ export interface IconPropsBasic<
   icon?: ImageValue<Image>
   /** Active icon value */
   iconActive?: ImageValue<Image>
+
+  // Design
+  /**
+   * Icon size
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large'
 }
 ```
 
 ====================================
 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.
+Create minimum necessary examples. Each story demonstrates a specific usage scenario.
+
 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 rename 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.
+- STRICTLY FORBIDDEN to touch const meta. DO NOT CHANGE ANYTHING IN META.
+- Don't touch existing constants and stories
+- Don't rename existing constants
+- Don't add stories just for filling
+- Each story must have a purpose and demonstrate specific functionality
+- If component has different modes, show one clear example for each
+- Story names in PascalCase style without extra words (e.g.: `Basic`, `WithIcon`, `Disabled`)
+- Minimize imports: only necessary
+- Don't use extra wrappers (div, section) without necessity
+- Simple, readable code
+
+Example:
+```ts
+export const Basic: Story = {
+  args: {
+    label: 'Click me'
+  }
+}
+
+export const WithIcon: Story = {
+  args: {
+    label: 'Click me',
+    icon: 'check'
+  }
+}
+```
 
 ====================================
 4) MDX documentation (component description)
 ====================================
-Prepare a complete component description in MDX format. Strict style: no tables, no extra sections.
+Prepare complete component description in MDX format. Strict style: no tables, no extra sections, only necessary information.
+
 Code to fix:
 ```md
-// UiPlayerLite.mdx
+// ComponentName.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 Expose (if any), 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.
-- Expose, 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.
-- Don't add <Canvas of={Component.Component}/>
-- Don't touch Meta and StorybookMain. They must remain as they are and be at the top. Don't add, don't delete, don't modify them.
-
-Example MDX documentation (don't include in response, only as style guide)
-Make sure to follow the style and formatting as shown in the example
-====================================
+Document structure (strict):
+
+**1. Brief description:**
+- One sentence, conveying the essence of the component as briefly as possible
+- Don't use phrases like "This component", start immediately with the purpose
+
+**2. Main documentation text:**
+- Starts WITHOUT a heading
+- Detailed functionality description (2-4 paragraphs)
+- Block "**Key Features:**" (list of key features)
+- Block "**Typical Use Cases:**" (list of usage examples)
+- Can refine existing text, but DO NOT delete relevant information
+- Delete only outdated or redundant content
+
+**3. Special sections (if present):**
+
+Instead of simply listing Props, describe **specific component capabilities**.
+
+Each section should:
+- Have a second-level heading (`##`) describing the capability, not just the prop name
+- Briefly explain the purpose and behavior of the functionality
+- List related properties (if there are several)
+- Describe property interaction with each other and their effect on the component
+- Include usage examples with code
+
+**Capability description format:**
+
+```md
+## Capability Name
+
+Brief description of the capability and its purpose (1-2 paragraphs).
+
+**Properties:** (if several related properties)
+
+- `propName` — property description
+- `propName2` — property description
+
+**Possible values:** (for enum/union types)
+
+- `'value1'` — value description and its behavior
+- `'value2'` — value description and its behavior
+
+Additional description of behavior, property interaction, features, and limitations.
+
+[code examples]
+```
+
+**Examples of correct capability descriptions:**
+
+```md
+## Header Position Animation
+
+The `animationHeadPosition` property defines the behavior of the Head area during show/hide animations.
+
+**Possible values:**
+
+- `'top'` — keeps Head at the top during transition (default)
+- `'toBottom'` — animates Head down along with content
+
+Synchronizes header movement with content animation using CSS transforms for smooth transitions.
+
+[code example]
+```
+
+```md
+## Navigation and Arrows
+
+Properties `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext`, and `align` are designed for managing built-in navigation elements and content alignment.
+
+**Properties:**
+
+- `arrowCarousel` — enables navigation arrows (left/right) for switching elements
+- `arrowStepper` — enables numeric step buttons (minus/plus)
+- `disabledPrevious` — disables left button (back/minus)
+- `disabledNext` — disables right button (forward/plus)
+- `align` — horizontal content alignment (`left`, `center`, `right`)
+
+Properties work together: only one arrow mode is active — if `arrowCarousel = true`, `arrowStepper` mode is ignored and vice versa.
+
+[code example]
+```
+
+```md
+## Outline Buttons
+
+Button component supports outline mode via the `outline` property. In this mode, buttons have a minimalist visual style with transparent background and colored border:
+
+- **Minimalist design** - suitable for interfaces requiring reduced visual load
+- **Transparent background** - maintains clean appearance while remaining interactive
+- **Hover feedback** - background appears on hover for better user interaction
+
+Outline mode is especially useful for creating tertiary actions and secondary options.
+
+[code example]
+```
+
+**When NOT to describe Props in separate sections:**
+
+- Simple boolean/string/number properties without complex logic — JSDoc comments in types are sufficient
+- Properties with obvious behavior (e.g., `disabled`, `label`, `placeholder`)
+- Single independent properties without interaction with others
+
+**When to describe capabilities in separate sections:**
+
+- Properties with complex interaction logic (e.g., `cancel` and `cancelShow`)
+- Groups of related properties working together (e.g., navigation arrows)
+- Properties with multiple operation modes (e.g., `adaptive` with different values)
+- Properties affecting other component parts or having priority over others
+- Component display modes (e.g., `primary`, `secondary`, `outline`)
+- CSS classes for behavior control
+
+**4. Mandatory sections (if present in component):**
+
+**Expose methods/properties:**
+```md
+## Expose Methods
+### `methodName`
+
+Method description.
+
+**Type:** `(param: Type) => ReturnType`
+
+**Parameters:**
+- `param: Type` — parameter description
+
+**Returns:** return value description
+
+[code example]
+```
+
+**Slots:**
+```md
+## Slots
+### `slotName`
+
+Slot description.
+
+**Parameters:**
+- `param: Type` — slot parameter description
+
+[code example]
+```
+
+**Events:**
+```md
+## Events
+### `eventName`
+
+Event description.
+
+**Parameters:**
+- `param: Type` — event parameter description
+
+**Type structure:** (if parameter is complex)
+- `field: string` — field description
+- `field2: number` — field description
+
+[code example]
+```
+
+**5. Usage examples:**
+- Add Canvas to demonstrate specific scenarios
+- DO NOT add base `<Canvas of={Component.Component}/>` — it's already at the beginning
+- Format: `<Canvas of={Component.StoryName}/>`
+
+**Strict formatting rules:**
+
+- Heading levels:
+  - `##` — main sections (Props, Expose Methods, Slots, Events)
+  - `###` — specific elements (method, slot, event names)
+  - `####` — subsections within description (Behavior, Examples)
+
+- Code:
+  - Types and interfaces: ` ```ts `
+  - Component markup: ` ```html ` (NOT ` ```vue `)
+  - Inline code: wrap in backticks `` `code` ``
+
+- Meta and StorybookMain:
+  - STRICTLY FORBIDDEN to touch Meta and StorybookMain blocks
+  - They must remain as is at the beginning of the file
+  - Don't add, don't delete, don't modify them
+
+- Structural elements:
+  - Use `**Bold text:**` for subheadings within descriptions
+  - Use `>` for important notes and warnings
+  - Lists only where they improve readability
+
+**Example of full document structure:**
+
+```md
+import { Meta, Canvas } from '@storybook/addon-docs/blocks'
+import * as Component from './Component.stories'
+
+<Meta of={Component} />
+
 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.
@@ -114,6 +334,8 @@ Window manages content display over the main interface, supports various positio
 
 ## CSS Classes for Behavior Control
 
+Component uses special 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
@@ -124,53 +346,45 @@ Window manages content display over the main interface, supports various positio
 
 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:
+## Header Position Animation
 
-- **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
+The `animationHeadPosition` property defines the behavior of the Head area during show/hide animations.
 
-Static mode is especially useful for embedding window content directly into the interface without modal behavior.
-
-## Positioning Direction (axis)
+**Possible values:**
 
-Controls the axis of window placement relative to the anchor element. Default: `y`.
+- `'top'` — keeps Head at the top during transition (default)
+- `'toBottom'` — animates Head down along with content
 
-> Applies only in menu mode (`adaptive="menu"` or `adaptive="menuWindow"`).
+Synchronizes header movement with content animation using CSS transforms for smooth transitions.
 
-**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)
+```html
+<template>
+  <Window v-model:open="isOpen" :animationHeadPosition="'toBottom'">
+    <template #default>
+      <p>Window content</p>
+      <button @click="isOpen = false">Close</button>
+    </template>
+  </Window>
+</template>
+```
 
-### Behavior
+## Navigation and Arrows
 
-- 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)
+Properties `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext`, and `align` are designed for managing built-in navigation elements and content alignment.
 
-## State Management via v-model
+**Properties:**
 
-Two-way binding of window open state via `v-model:open`.
+- `arrowCarousel` — enables navigation arrows (left/right) for switching elements
+- `arrowStepper` — enables numeric step buttons (minus/plus)
+- `disabledPrevious` — disables left button (back/minus)
+- `disabledNext` — disables right button (forward/plus)
+- `align` — horizontal content alignment (`left`, `center`, `right`)
 
-**Parameters:**
-- `open: boolean` — window open state
+Properties work together: only one arrow mode is active — if `arrowCarousel = true`, `arrowStepper` mode is ignored and vice versa.
 
 ```html
-<script setup>
-import { ref } from 'vue'
-
-const isOpen = ref(false)
-</script>
-
 <template>
-  <button @click="isOpen = true">Open</button>
-
-  <Window v-model:open="isOpen">
+  <Window v-model:open="isOpen" :arrowCarousel="true" :align="'center'">
     <template #default>
       <p>Window content</p>
       <button @click="isOpen = false">Close</button>
@@ -179,6 +393,22 @@ const isOpen = ref(false)
 </template>
 ```
 
+## Outline Buttons
+
+Button component supports outline mode via the `outline` property. In this mode, buttons have a minimalist visual style with transparent background and colored border:
+
+- **Minimalist design** - suitable for interfaces requiring reduced visual load
+- **Transparent background** - maintains clean appearance while remaining interactive
+- **Hover feedback** - background appears on hover for better user interaction
+
+Outline mode is especially useful for creating tertiary actions and secondary options.
+
+```html
+<template>
+  <Button outline @click="handleClick">Click me</Button>
+</template>
+```
+
 ## Expose Methods
 ### `id`
 
@@ -251,36 +481,61 @@ const handleWindow = (options) => {
 </template>
 ```
 
-Canvas usage example:
-<Canvas of={Chip.ChipSkeleton}/>
+## Usage Examples
+### Basic Modal Window
+
+<Canvas of={Component.BasicModal}/>
+
+### Dropdown Menu
+
+<Canvas of={Component.DropdownMenu}/>
+```
 
 ====================================
 5) Final return
 ====================================
-Return the result strictly in the format (nothing extra before or after):
+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).
-- Result strictly in this order, separated by line #########.
+[ComponentName.mdx]
+
+**Output format requirements:**
+- DO NOT add file labels like `// filepath: ...`
+- DO NOT wrap in code blocks (` ```ts `, ` ```md `)
+- DO NOT add comments with file names
+- DO NOT include in the result text `[types.ts]`, `[ComponentDoc.stories.ts]`, `[ComponentName.mdx]`
+- Only clean code, separated by a line of nine hash symbols: `#########`
+- Order strictly: types → stories → documentation
+- Each block starts with the first line of code, without spaces and line breaks before
+
+**Structure of each block:**
+- `[types.ts]` — final types file with JSDoc comments (only file content)
+- `[ComponentDoc.stories.ts]` — final stories file (only file content)
+- `[ComponentName.mdx]` — final MDX documentation (only file content)
 
 ====================================
 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.
+
+**Forbidden:**
+- Tables in any form
+- Arbitrary additional sections outside specified ones
+- "Props" section for simple properties without complex logic
+- Duplication of descriptions of the same thing
+- Placeholders outside those specified in prompt (`[code]`, `[types]`, `[stories]`, `[md]`)
+- Using ` ```vue ` for code examples (only ` ```html `)
+- Changing Meta block in MDX
+- Adding base Canvas (`<Canvas of={Component.Component}/>`)
+
+**Required:**
+- Documentation language corresponds to [wikiLanguage]
+- If [wikiLanguage] = "en", use English for ALL documentation
+- If [wikiLanguage] = "ru", use Russian for ALL documentation
+- Code blocks: types and events — ` ```ts `, markup — ` ```html `
+- Stories: only necessary scenarios, without visual decorations
+- Brevity and informativeness without "fluff"
+- Technically correct terms
+- Code examples are functional and up-to-date

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

@@ -1,7 +1,9 @@
-Нужно подготовить документацию для компонента на языке [wikiLanguage]. Следуй строго формату и требованиям ниже. Не добавляй ничего лишнего вне описанного.
-Стек Storybook 9.x, TypeScript, MDX.
+Нужно подготовить документацию для компонента на языке [wikiLanguage].
+Следуй строго формату и требованиям ниже.
+Не добавляй ничего лишнего вне описанного.
+Стек: Storybook 9.x, TypeScript, MDX, Vue 3 Composition API.
 
-Компонент Canvas подключается из '@storybook/addon-docs/blocks'
+Canvas компонент импортируется из '@storybook/addon-docs/blocks'
 
 ====================================
 1) Изучи текущий код компонента
@@ -9,12 +11,21 @@
 ```
 [code]
 ```
-Проанализируй структуру, props, события, слоты, типы, внутреннюю логику.
+
+Проанализируй:
+- Структуру компонента (props, computed, methods)
+- События (emit) и их параметры
+- Слоты (slots) и их параметры
+- Типы данных (interfaces, types)
+- Expose методы и свойства
+- Внутреннюю логику и поведение
+- Зависимости от других компонентов
 
 ====================================
 2) Добавь недостающие комментарии к типам
 ====================================
 Добавь краткие одноязычные (на [wikiLanguage]) JSDoc-комментарии к отсутствующим типам и их свойствам.
+
 Код для исправления:
 ```ts
 // types.ts
@@ -22,12 +33,14 @@
 ```
 
 Требования к комментариям:
-- Однострочные для простых полей.
-- Многострочные для блоков логики.
-- Без дублирования очевидного.
-- Адаптированы к storybook.
-
-Пример:
+- Однострочные для простых полей (/** Описание */)
+- Многострочные для сложных типов или блоков логики
+- Без дублирования очевидного (не комментируй "id" как "id компонента")
+- Адаптированы для отображения в Storybook
+- Используй технические термины правильно
+- Для union типов опиши каждое значение отдельно в коде
+
+Пример (строго следуй формату):
 ```ts
 /**
  * Basic properties for image components.
@@ -44,53 +57,261 @@ export interface IconPropsBasic<
   icon?: ImageValue<Image>
   /** Значение активной иконки */
   iconActive?: ImageValue<Image>
+
+  // Design
+  /**
+   * Размер иконки
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large'
 }
 ```
 
 ====================================
 3) Истории (stories) для Storybook
 ====================================
-Создай только минимально необходимые примеры. Каждый пример — максимально простой, без лишних обёрток, только то, что демонстрирует суть.
+Создай минимально необходимые примеры. Каждая история демонстрирует конкретный сценарий использования.
+
 Код для исправления:
 ```ts
 // ComponentDoc.stories.ts
 [stories]
 ```
+
 Правила:
-- Не трогать те stories, которые уже есть, только добавления.
-- Не трогать const meta. НИЧЕГО НЕ МЕНЯТЬ В META.
-- Не трогать существующие константы.
-- Не переименовывай существующие константы.
-- Не добавляй истории ради заполнения.
-- Если компонент имеет разные режимы (например, состояния или варианты отображения), покажи по одному примеру.
-- Имена историй — в стиле PascalCase без лишних слов.
-- Минимизируй импорты: только то, что требуется.
+- СТРОГО ЗАПРЕЩЕНО трогать const meta. НИЧЕГО НЕ МЕНЯТЬ В META.
+- Не трогать существующие константы и истории
+- Не переименовывать существующие константы
+- Не добавлять истории ради заполнения
+- Каждая история должна иметь цель и демонстрировать конкретную функциональность
+- Если компонент имеет разные режимы, покажи по одному чёткому примеру для каждого
+- Имена историй в стиле PascalCase без лишних слов (например: `Basic`, `WithIcon`, `Disabled`)
+- Минимизируй импорты: только необходимое
+- Не используй лишние обёртки (div, section) без необходимости
+- Простой, читаемый код
+
+Пример:
+```ts
+export const Basic: Story = {
+  args: {
+    label: 'Click me'
+  }
+}
+
+export const WithIcon: Story = {
+  args: {
+    label: 'Click me',
+    icon: 'check'
+  }
+}
+```
 
 ====================================
 4) MDX-документация (описание компонента)
 ====================================
-Подготовь полное описание компонента в формате MDX. Строгая стилистика: никаких таблиц, никаких лишних разделов.
+Подготовь полное описание компонента в формате MDX. Строгая стилистика: никаких таблиц, никаких лишних разделов, только необходимая информация.
+
 Код для исправления:
 ```md
-// UiPlayerLite.mdx
+// ComponentName.mdx
 [md]
 ```
 
-Правила структуры MDX:
-- В начале: [description] — Краткое описание назначения (1–3 предложения): максимально коротко передаёт суть компонента.
-- Далее: основной текст (документация) — начинается без заголовка. Это [doc].
-- Можно дорабатывать существующий текст, изменяя, но не удалять. Удаляй только лишнее или неактуальное.
-- Обязательно перечисли Expose (если есть), слоты (если есть) и события (если есть) в заданном формате.
-- Не описывай props списком, если они простые. Подробно описывай только сложные связки (например, зависимые props) или составные типы.
-- Expose, Слоты и события — строго в формате ниже. Если типов нет — блок с типом опускается.
-- Добавь Canvas, если есть пример использования. Если нет — добавь stories.
-- Не надо добавлять <Canvas of={Component.Component}/>
-- Нельзя трогать Meta и StorybookMain. Они должны остаться как есть и находиться вверху. Не добавляй, не удаляй, не изменяй их.
+Структура документа (строго):
+
+**1. Краткое описание (description):**
+- Одно предложение, максимально кратко передающее суть компонента
+- Не используй фразы типа "Этот компонент", начинай сразу с назначения
+
+**2. Основной текст документации (doc):**
+- Начинается БЕЗ заголовка
+- Детальное описание функциональности (2-4 абзаца)
+- Блок "**Основные возможности:**" (список ключевых фич)
+- Блок "**Типичные сценарии использования:**" (список примеров применения)
+- Можно дорабатывать существующий текст, но НЕ удалять актуальную информацию
+- Удаляй только устаревшее или избыточное
+
+**3. Специальные разделы (если есть):**
+
+Вместо простого перечисления Props, описывай **конкретные возможности компонента**.
+
+Каждый раздел должен:
+- Иметь заголовок второго уровня (`##`), описывающий возможность, а не просто название prop
+- Кратко объяснять назначение и поведение функциональности
+- Перечислять связанные свойства (если их несколько)
+- Описывать взаимодействие свойств между собой и их влияние на компонент
+- Включать примеры использования с кодом
+
+**Формат описания возможности:**
+
+```md
+## Название возможности
+
+Краткое описание возможности и её назначения (1-2 абзаца).
+
+**Свойства:** (если несколько связанных свойств)
+
+- `propName` — описание свойства
+- `propName2` — описание свойства
+
+**Возможные значения:** (для enum/union типов)
+
+- `'value1'` — описание значения и его поведения
+- `'value2'` — описание значения и его поведения
+
+Дополнительное описание поведения, взаимодействия свойств, особенностей и ограничений.
+
+[примеры кода]
+```
+
+**Примеры правильного описания возможностей:**
+
+```md
+## Анимация позиции заголовка
+
+Свойство `animationHeadPosition` определяет поведение области Head во время анимаций показа/скрытия.
+
+**Возможные значения:**
+
+- `'top'` — сохраняет Head вверху во время перехода (по умолчанию)
+- `'toBottom'` — анимирует Head вниз вместе с контентом
+
+Синхронизирует движение заголовка с анимацией контента, используя CSS-трансформации для плавных переходов.
+
+[код примера]
+```
+
+```md
+## Навигация и стрелки
+
+Свойства `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext` и `align` предназначены для управления встроенными элементами навигации и выравнивания содержимого.
+
+**Свойства:**
+
+- `arrowCarousel` — включает стрелки навигации (влево/вправо) для переключения элементов
+- `arrowStepper` — включает числовые шаговые кнопки (минус/плюс)
+- `disabledPrevious` — отключает левую кнопку (назад/минус)
+- `disabledNext` — отключает правую кнопку (вперёд/плюс)
+- `align` — горизонтальное выравнивание содержимого (`left`, `center`, `right`)
+
+Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот.
+
+[код примера]
+```
+
+```md
+## Контурные кнопки (outline)
+
+Компонент Button поддерживает контурный режим через свойство `outline`. В этом режиме кнопки имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
+
+- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
+- **Прозрачный фон** - поддерживает чистый внешний вид, оставаясь интерактивными
+- **Обратная связь при наведении** - фон появляется при наведении
+
+Outline режим особенно полезен для создания третичных действий и второстепенных опций.
+
+[код примера]
+```
+
+**Когда НЕ нужно описывать Props отдельными разделами:**
+
+- Простые boolean/string/number свойства без сложной логики — достаточно JSDoc комментариев в типах
+- Свойства с очевидным поведением (например, `disabled`, `label`, `placeholder`)
+- Единичные независимые свойства без взаимодействия с другими
+
+**Когда НУЖНО описывать возможности отдельными разделами:**
+
+- Свойства со сложной логикой взаимодействия (например, `cancel` и `cancelShow`)
+- Группы связанных свойств, работающих вместе (например, стрелки навигации)
+- Свойства с несколькими режимами работы (например, `adaptive` с разными значениями)
+- Свойства, влияющие на другие части компонента или имеющие приоритет над другими
+- Режимы отображения компонента (например, `primary`, `secondary`, `outline`)
+- CSS классы для управления поведением
+
+**4. Обязательные секции (если присутствуют в компоненте):**
+
+**Expose методы/свойства:**
+```md
+## Expose методы
+### `methodName`
+
+Описание метода.
+
+**Тип:** `(param: Type) => ReturnType`
+
+**Параметры:**
+- `param: Type` — описание параметра
+
+**Возвращает:** описание возвращаемого значения
+
+[пример кода]
+```
+
+**Слоты:**
+```md
+## Слоты
+### `slotName`
+
+Описание слота.
+
+**Параметры:**
+- `param: Type` — описание параметра слота
+
+[пример кода]
+```
+
+**События:**
+```md
+## События
+### `eventName`
+
+Описание события.
+
+**Параметры:**
+- `param: Type` — описание параметра события
+
+**Структура Type:** (если параметр сложный)
+- `field: string` — описание поля
+- `field2: number` — описание поля
+
+[пример кода]
+```
+
+**5. Примеры использования:**
+- Добавляй Canvas для демонстрации конкретных сценариев
+- НЕ добавляй базовый `<Canvas of={Component.Component}/>` — он уже есть в начале
+- Формат: `<Canvas of={Component.StoryName}/>`
+
+**Строгие правила форматирования:**
+
+- Заголовки уровней:
+  - `##` — основные разделы (Props, Expose методы, Слоты, События)
+  - `###` — конкретные элементы (названия методов, слотов, событий)
+  - `####` — подразделы внутри описания (Поведение, Примеры)
+
+- Код:
+  - Типы и интерфейсы: ` ```ts `
+  - Разметка компонентов: ` ```html ` (НЕ ` ```vue `)
+  - Inline код: обёртка в обратные кавычки `` `код` ``
+
+- Meta и StorybookMain:
+  - СТРОГО ЗАПРЕЩЕНО трогать блоки Meta и StorybookMain
+  - Они должны остаться как есть в начале файла
+  - Не добавлять, не удалять, не изменять их
+
+- Структурные элементы:
+  - Используй `**Жирный текст:**` для подзаголовков внутри описаний
+  - Используй `>` для важных замечаний и предупреждений
+  - Списки только там, где они улучшают читаемость
+
+**Пример полной структуры документа:**
+
+```md
+import { Meta, Canvas } from '@storybook/addon-docs/blocks'
+import * as Component from './Component.stories'
+
+<Meta of={Component} />
 
-====================================
-Пример MDX-документация (не включать в ответ, только как ориентир стиля)
-Обязательно соблюдай стиль и форматирование как в примере
-====================================
 Компонент для создания модальных окон, диалогов и всплывающих элементов с гибким позиционированием и адаптивным поведением.
 
 Window управляет отображением контента поверх основного интерфейса, поддерживает различные типы позиционирования (модальные окна, выпадающие меню, action sheets), анимации открытия/закрытия и интеграцию с системой событий. Компонент автоматически обрабатывает клики вне области, управление фокусом и адаптацию под различные размеры экранов.
@@ -115,6 +336,8 @@ Window управляет отображением контента поверх
 
 ## CSS классы для управления поведением
 
+Компонент использует специальные CSS классы для управления поведением:
+
 - `*--block` — предотвращает закрытие окна при клике вне его границ
 - `*--blockChildren` — предотвращает закрытие текущего окна
 - `*--blockOther` — предотвращает закрытие других окон до закрытия текущего
@@ -125,59 +348,63 @@ Window управляет отображением контента поверх
 
 Где `*` — название класса компонента (например, `d1-window`, `m3-window`).
 
-## Статический режим (staticMode)
+## Анимация позиции заголовка
 
-Компонент Window поддерживает статический режим работы через свойство `staticMode`. В этом режиме окно работает как встроенный компонент без модального поведения:
+Свойство `animationHeadPosition` определяет поведение области Head во время анимаций показа/скрытия.
 
-- **Содержимое отображается сразу** — окно не скрывается и не требует активации
-- **Отключены анимации** — нет эффектов появления/исчезновения
-- **Отключено позиционирование** — окно встраивается в поток документа
-- **Работает с adaptive** — когда свойство `adaptive` имеет один из статичных режимов (например, `static`), включается статичный режим
+**Возможные значения:**
 
-Статический режим особенно полезен для встраивания содержимого окна непосредственно в интерфейс без модального поведения.
+- `'top'` — сохраняет Head вверху во время перехода (по умолчанию)
+- `'toBottom'` — анимирует Head вниз вместе с контентом
 
-## Направление позиционирования (axis)
+Синхронизирует движение заголовка с анимацией контента, используя CSS-трансформации для плавных переходов.
 
-Управляет осью размещения окна относительно элемента-якоря. По умолчанию: `y`.
+```html
+<Window
+  v-slot:default="{ animationHeadPosition }"
+  :style="{ '--head-animation': animationHeadPosition }"
+>
+  <Header>Заголовок</Header>
+  <Content>Содержимое</Content>
+</Window>
+```
 
-> Применяется только в режиме меню (`adaptive="menu"` или `adaptive="menuWindow"`).
+## Навигация и стрелки
 
-**Возможные значения:**
-- `'x'` — горизонтальная ось (слева или справа от якоря)
-- `'y'` — вертикальная ось (сверху или снизу от якоря)
-- `'on'` — поверх якоря (окно центрируется над элементом)
+Свойства `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext` и `align` предназначены для управления встроенными элементами навигации и выравнивания содержимого.
 
-### Поведение
+**Свойства:**
 
-- Компонент автоматически выбирает сторону размещения с наибольшим доступным пространством
-- При использовании контекстного меню (`contextmenu`) позиционирование происходит от координат курсора
-- Окно всегда остается в пределах видимой области экрана (viewport)
-- Отступ от якоря задается через свойство `indent` (по умолчанию 4px)
+- `arrowCarousel` — включает стрелки навигации (влево/вправо) для переключения элементов
+- `arrowStepper` — включает числовые шаговые кнопки (минус/плюс)
+- `disabledPrevious` — отключает левую кнопку (назад/минус)
+- `disabledNext` — отключает правую кнопку (вперёд/плюс)
+- `align` — горизонтальное выравнивание содержимого (`left`, `center`, `right`)
 
-## Управление состоянием через v-model
+Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот.
 
-Двусторонняя привязка состояния открытия окна через `v-model:open`.
+```html
+<Window
+  v-slot:default="{ arrowCarousel, arrowStepper }"
+  :arrow-carousel="arrowCarousel"
+  :arrow-stepper="arrowStepper"
+>
+  <Content>Содержимое</Content>
+</Window>
+```
 
-**Параметры:**
-- `open: boolean` — состояние открытия окна
+## Контурные кнопки (outline)
 
-```html
-<script setup>
-import { ref } from 'vue'
+Компонент Button поддерживает контурный режим через свойство `outline`. В этом режиме кнопки имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
 
-const isOpen = ref(false)
-</script>
+- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
+- **Прозрачный фон** - поддерживает чистый внешний вид, оставаясь интерактивными
+- **Обратная связь при наведении** - фон появляется при наведении
 
-<template>
-  <button @click="isOpen = true">Открыть</button>
+Outline режим особенно полезен для создания третичных действий и второстепенных опций.
 
-  <Window v-model:open="isOpen">
-    <template #default>
-      <p>Содержимое окна</p>
-      <button @click="isOpen = false">Закрыть</button>
-    </template>
-  </Window>
-</template>
+```html
+<Button outline>Контурная кнопка</Button>
 ```
 
 ## Expose методы
@@ -252,36 +479,61 @@ const handleWindow = (options) => {
 </template>
 ```
 
-Пример использования Canvas:
-<Canvas of={Chip.ChipSkeleton}/>
+## Примеры использования
+### Базовое модальное окно
+
+<Canvas of={Component.BasicModal}/>
+
+### Выпадающее меню
+
+<Canvas of={Component.DropdownMenu}/>
+```
 
 ====================================
 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).
-- Результат строго в этом порядке, разделённый строкой #########.
+[ComponentName.mdx]
+
+**Требования к формату вывода:**
+- НЕ добавляй метки файлов типа `// filepath: ...`
+- НЕ оборачивай в блоки кода (` ```ts `, ` ```md `)
+- НЕ добавляй комментарии с названиями файлов
+- НЕ включай в сам результат текст `[types.ts]`, `[ComponentDoc.stories.ts]`, `[ComponentName.mdx]`
+- Только чистый код, разделённый строкой из девяти символов решётки: `#########`
+- Порядок строго: типы → истории → документация
+- Каждый блок начинается с первой строки кода, без пробелов и переносов перед
+
+**Структура каждого блока:**
+- `[types.ts]` — итоговый файл типов с JSDoc комментариями (только содержимое файла)
+- `[ComponentDoc.stories.ts]` — итоговый файл историй (только содержимое файла)
+- `[ComponentName.mdx]` — итоговая MDX-документация (только содержимое файла)
 
 ====================================
 Ограничения и стилистика
 ====================================
-- Никаких таблиц.
-- Никаких произвольных дополнительных разделов.
-- Не добавляй раздел "Props", если нет сложных зависимостей.
-- Не дублируй описание одного и того же.
-- Уважай язык [wikiLanguage] — если это "en" используй английский, иначе соответствующий язык.
-- Не используй placeholder'ы вне оговорённых.
-- Кодовые блоки: для типов и событий — ```ts, для разметки — ```html при необходимости.
-- Сторисы: только необходимые сценарии, без лишних визуальных украшений.
+
+**Запрещено:**
+- Таблицы в любом виде
+- Произвольные дополнительные разделы вне указанных
+- Раздел "Props" для простых свойств без сложной логики
+- Дублирование описаний одного и того же
+- Placeholder'ы вне указанных в промпте (`[code]`, `[types]`, `[stories]`, `[md]`)
+- Использование ` ```vue ` для примеров кода (только ` ```html `)
+- Изменение Meta блока в MDX
+- Добавление базового Canvas (`<Canvas of={Component.Component}/>`)
+
+**Обязательно:**
+- Язык документации соответствует [wikiLanguage]
+- Если [wikiLanguage] = "en", используй английский для ВСЕЙ документации
+- Если [wikiLanguage] = "ru", используй русский для ВСЕЙ документации
+- Кодовые блоки: типы и события — ` ```ts `, разметка — ` ```html `
+- Истории: только необходимые сценарии, без визуальных украшений
+- Краткость и информативность без "воды"
+- Технически корректные термины
+- Примеры кода работоспособны и актуальны