@dxtmisha/scripts 0.4.3 → 0.4.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/scripts",
   "private": false,
-  "version": "0.4.3",
+  "version": "0.4.5",
   "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'
 
 /**

package/src/config.ts

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

package/src/library.ts

@@ -1,105 +1,105 @@
-// Classes
-export * from './classes/Ai/AiAbstract'
-export * from './classes/Ai/AiGoogle'
-export * from './classes/Component/ComponentCreator'
-export * from './classes/Component/ComponentItem'
-export * from './classes/Component/ComponentWiki'
-export * from './classes/Component/ComponentWikiFile'
-export * from './classes/Design/DesignCommand'
-export * from './classes/Design/DesignComponent'
-export * from './classes/Design/DesignConstructor'
-export * from './classes/Design/DesignConstructors'
-export * from './classes/Design/DesignReplace'
-export * from './classes/Design/DesignStructure'
-export * from './classes/Design/DesignStructureClasses'
-export * from './classes/Design/DesignStructureItemAbstract'
-export * from './classes/Design/DesignStructureRead'
-export * from './classes/Design/DesignStructureStyles'
-export * from './classes/Design/DesignTypescript'
-export * from './classes/Design/DesignUi'
-export * from './classes/Design/DesignWiki'
-export * from './classes/Library/LibraryExport'
-export * from './classes/Library/LibraryFlags'
-export * from './classes/Library/LibraryItems'
-export * from './classes/Library/LibraryMedia'
-export * from './classes/Package/PackageInit'
-export * from './classes/Package/PackageItem'
-export * from './classes/Properties/Properties'
-export * from './classes/Properties/PropertiesCache'
-export * from './classes/Properties/PropertiesConfig'
-export * from './classes/Properties/PropertiesConvector'
-export * from './classes/Properties/PropertiesFile'
-export * from './classes/Properties/PropertiesImport'
-export * from './classes/Properties/PropertiesItems'
-export * from './classes/Properties/PropertiesKeys'
-export * from './classes/Properties/PropertiesMain'
-export * from './classes/Properties/PropertiesPalette'
-export * from './classes/Properties/PropertiesPath'
-export * from './classes/Properties/PropertiesScss'
-export * from './classes/Properties/PropertiesSeparator'
-export * from './classes/Properties/PropertiesSettings'
-export * from './classes/Properties/PropertiesStandard'
-export * from './classes/Properties/PropertiesTool'
-export * from './classes/Properties/PropertiesTypes'
-export * from './classes/Properties/PropertiesValues'
-export * from './classes/Properties/PropertiesWrap'
-export * from './classes/Properties/convector/convectorColor'
-export * from './classes/Properties/convector/convectorFontFamilies'
-export * from './classes/Properties/convector/convectorShadow'
-export * from './classes/Properties/convector/convectorTypography'
-export * from './classes/Properties/to/PropertiesToAbstract'
-export * from './classes/Properties/to/PropertiesToAnimate'
-export * from './classes/Properties/to/PropertiesToClass'
-export * from './classes/Properties/to/PropertiesToClone'
-export * from './classes/Properties/to/PropertiesToComponent'
-export * from './classes/Properties/to/PropertiesToDrag'
-export * from './classes/Properties/to/PropertiesToDuplicate'
-export * from './classes/Properties/to/PropertiesToFull'
-export * from './classes/Properties/to/PropertiesToLink'
-export * from './classes/Properties/to/PropertiesToMedia'
-export * from './classes/Properties/to/PropertiesToMulti'
-export * from './classes/Properties/to/PropertiesToNone'
-export * from './classes/Properties/to/PropertiesToPalette'
-export * from './classes/Properties/to/PropertiesToProperty'
-export * from './classes/Properties/to/PropertiesToRemove'
-export * from './classes/Properties/to/PropertiesToReplace'
-export * from './classes/Properties/to/PropertiesToRoot'
-export * from './classes/Properties/to/PropertiesToSimilar'
-export * from './classes/Properties/to/PropertiesToSort'
-export * from './classes/Properties/to/PropertiesToState'
-export * from './classes/Properties/to/PropertiesToStyle'
-export * from './classes/Properties/to/PropertiesToSub'
-export * from './classes/Properties/to/PropertiesToSubclass'
-export * from './classes/Properties/to/PropertiesToVar'
-export * from './classes/Properties/to/PropertiesToVariable'
-export * from './classes/Styles/Styles'
-export * from './classes/Styles/StylesClasses'
-export * from './classes/Styles/StylesProperties'
-export * from './classes/Styles/StylesRoot'
-export * from './classes/Styles/StylesTool'
-export * from './classes/Styles/to/StylesToAbstract'
-export * from './classes/Styles/to/StylesToAnimate'
-export * from './classes/Styles/to/StylesToClass'
-export * from './classes/Styles/to/StylesToClassFull'
-export * from './classes/Styles/to/StylesToContainer'
-export * from './classes/Styles/to/StylesToMedia'
-export * from './classes/Styles/to/StylesToProperty'
-export * from './classes/Styles/to/StylesToRoot'
-export * from './classes/Styles/to/StylesToSelector'
-export * from './classes/Styles/to/StylesToVar'
-export * from './classes/Styles/to/StylesToVirtual'
-
-// Composables
-export * from './composables/useAi'
-
-// Functions
-export * from './functions/getComponentPaths'
-export * from './functions/getConstructorProperties'
-export * from './functions/getNameDirByPaths'
-export * from './functions/toPathStandardSep'
-
-// Types
-export * from './types/configTypes'
-export * from './types/designTypes'
-export * from './types/libraryTypes'
-export * from './types/propertyTypes'
+// Classes
+export * from './classes/Ai/AiAbstract'
+export * from './classes/Ai/AiGoogle'
+export * from './classes/Component/ComponentCreator'
+export * from './classes/Component/ComponentItem'
+export * from './classes/Component/ComponentWiki'
+export * from './classes/Component/ComponentWikiFile'
+export * from './classes/Design/DesignCommand'
+export * from './classes/Design/DesignComponent'
+export * from './classes/Design/DesignConstructor'
+export * from './classes/Design/DesignConstructors'
+export * from './classes/Design/DesignReplace'
+export * from './classes/Design/DesignStructure'
+export * from './classes/Design/DesignStructureClasses'
+export * from './classes/Design/DesignStructureItemAbstract'
+export * from './classes/Design/DesignStructureRead'
+export * from './classes/Design/DesignStructureStyles'
+export * from './classes/Design/DesignTypescript'
+export * from './classes/Design/DesignUi'
+export * from './classes/Design/DesignWiki'
+export * from './classes/Library/LibraryExport'
+export * from './classes/Library/LibraryFlags'
+export * from './classes/Library/LibraryItems'
+export * from './classes/Library/LibraryMedia'
+export * from './classes/Package/PackageInit'
+export * from './classes/Package/PackageItem'
+export * from './classes/Properties/Properties'
+export * from './classes/Properties/PropertiesCache'
+export * from './classes/Properties/PropertiesConfig'
+export * from './classes/Properties/PropertiesConvector'
+export * from './classes/Properties/PropertiesFile'
+export * from './classes/Properties/PropertiesImport'
+export * from './classes/Properties/PropertiesItems'
+export * from './classes/Properties/PropertiesKeys'
+export * from './classes/Properties/PropertiesMain'
+export * from './classes/Properties/PropertiesPalette'
+export * from './classes/Properties/PropertiesPath'
+export * from './classes/Properties/PropertiesScss'
+export * from './classes/Properties/PropertiesSeparator'
+export * from './classes/Properties/PropertiesSettings'
+export * from './classes/Properties/PropertiesStandard'
+export * from './classes/Properties/PropertiesTool'
+export * from './classes/Properties/PropertiesTypes'
+export * from './classes/Properties/PropertiesValues'
+export * from './classes/Properties/PropertiesWrap'
+export * from './classes/Properties/convector/convectorColor'
+export * from './classes/Properties/convector/convectorFontFamilies'
+export * from './classes/Properties/convector/convectorShadow'
+export * from './classes/Properties/convector/convectorTypography'
+export * from './classes/Properties/to/PropertiesToAbstract'
+export * from './classes/Properties/to/PropertiesToAnimate'
+export * from './classes/Properties/to/PropertiesToClass'
+export * from './classes/Properties/to/PropertiesToClone'
+export * from './classes/Properties/to/PropertiesToComponent'
+export * from './classes/Properties/to/PropertiesToDrag'
+export * from './classes/Properties/to/PropertiesToDuplicate'
+export * from './classes/Properties/to/PropertiesToFull'
+export * from './classes/Properties/to/PropertiesToLink'
+export * from './classes/Properties/to/PropertiesToMedia'
+export * from './classes/Properties/to/PropertiesToMulti'
+export * from './classes/Properties/to/PropertiesToNone'
+export * from './classes/Properties/to/PropertiesToPalette'
+export * from './classes/Properties/to/PropertiesToProperty'
+export * from './classes/Properties/to/PropertiesToRemove'
+export * from './classes/Properties/to/PropertiesToReplace'
+export * from './classes/Properties/to/PropertiesToRoot'
+export * from './classes/Properties/to/PropertiesToSimilar'
+export * from './classes/Properties/to/PropertiesToSort'
+export * from './classes/Properties/to/PropertiesToState'
+export * from './classes/Properties/to/PropertiesToStyle'
+export * from './classes/Properties/to/PropertiesToSub'
+export * from './classes/Properties/to/PropertiesToSubclass'
+export * from './classes/Properties/to/PropertiesToVar'
+export * from './classes/Properties/to/PropertiesToVariable'
+export * from './classes/Styles/Styles'
+export * from './classes/Styles/StylesClasses'
+export * from './classes/Styles/StylesProperties'
+export * from './classes/Styles/StylesRoot'
+export * from './classes/Styles/StylesTool'
+export * from './classes/Styles/to/StylesToAbstract'
+export * from './classes/Styles/to/StylesToAnimate'
+export * from './classes/Styles/to/StylesToClass'
+export * from './classes/Styles/to/StylesToClassFull'
+export * from './classes/Styles/to/StylesToContainer'
+export * from './classes/Styles/to/StylesToMedia'
+export * from './classes/Styles/to/StylesToProperty'
+export * from './classes/Styles/to/StylesToRoot'
+export * from './classes/Styles/to/StylesToSelector'
+export * from './classes/Styles/to/StylesToVar'
+export * from './classes/Styles/to/StylesToVirtual'
+
+// Composables
+export * from './composables/useAi'
+
+// Functions
+export * from './functions/getComponentPaths'
+export * from './functions/getConstructorProperties'
+export * from './functions/getNameDirByPaths'
+export * from './functions/toPathStandardSep'
+
+// Types
+export * from './types/configTypes'
+export * from './types/designTypes'
+export * from './types/libraryTypes'
+export * from './types/propertyTypes'

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,27 +9,36 @@ 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
 [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:
+- 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.
@@ -46,167 +55,189 @@ 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 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 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.
+Document structure (strict):
 
-Slot description example (don't copy verbatim, adapt):
-### `suffix`
+**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
 
-Slot for placing content at the end of the component, after the main content.
+**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
 
-**Returns:** `VNode` — element with class `{className}__suffix` and attribute `data-event-type="suffix"`
+**3. Special sections (if present):**
 
-```html
-<Component>
-  <template #suffix>
-    <Icon name="check" />
-  </template>
-</Component>
+**Props (only for complex cases):**
+- Describe Props only if they have complex interaction logic, dependencies, or composite types
+- DO NOT describe simple boolean/string props in a list - JSDoc comments in types are enough for them
+- Format: `## Props`, then `### PropName` for each complex prop
+
+Example of complex prop description:
+```md
+## Props
+### `adaptive`
+
+Window adaptive behavior mode.
+
+**Type:** `'modal' | 'menu' | 'actionSheet' | 'static'`
+
+**Default:** `'modal'`
+
+**Possible values:**
+- `'modal'` — modal window in screen center with overlay
+- `'menu'` — dropdown menu attached to control element
+- `'actionSheet'` — bottom panel for mobile interfaces
+- `'static'` — static mode without overlay and positioning
 ```
 
-### `control`
+**4. Mandatory sections (if present in component):**
 
-Slot for placing window control elements (close buttons, minimize, etc.).
+**Expose methods/properties:**
+```md
+## Expose Methods
+### `methodName`
+
+Method description.
+
+**Type:** `(param: Type) => ReturnType`
 
 **Parameters:**
-- `props: WindowControlItem` — object with window control data
+- `param: Type` — parameter description
 
-```html
-<Window>
-  <template #control="{ onclick, open }">
-    <button @click="onclick">
-      {{ open ? 'Close' : 'Open' }}
-    </button>
-  </template>
-</Window>
+**Returns:** return value description
+
+[code example]
 ```
 
-Event description example (adapt to context):
-### `window`
+**Slots:**
+```md
+## Slots
+### `slotName`
 
-Event fires when the window state changes (open/close).
+Slot description.
 
 **Parameters:**
-- `options: WindowEmitOptions` — object with window data
+- `param: Type` — slot parameter description
 
-**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)
+[code example]
+```
 
-```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>
+**Events:**
+```md
+## Events
+### `eventName`
 
-<template>
-  <Window @window="handleWindow">
-    <template #default>
-      <p>Window content</p>
-    </template>
-  </Window>
-</template>
+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}/>`
 
-Canvas usage example:
-<Canvas of={Chip.ChipSkeleton}/>
+**Strict formatting rules:**
 
-====================================
-5) Final return
-====================================
-Return the result strictly in the format (nothing extra before or after):
-[types.ts]
-#########
-[ComponentDoc.stories.ts]
-#########
-[UiPlayerLite.mdx]
+- Heading levels:
+  - `##` — main sections (Props, Expose Methods, Slots, Events)
+  - `###` — specific elements (method, slot, event names)
+  - `####` — subsections within description (Behavior, Examples)
 
-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).
+- Code:
+  - Types and interfaces: ` ```ts `
+  - Component markup: ` ```html ` (NOT ` ```vue `)
+  - Inline code: wrap in backticks `` `code` ``
 
-====================================
-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.
+- 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} />
 
-====================================
-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.
@@ -231,6 +262,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
@@ -241,34 +274,20 @@ 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:
+## Props
+### `adaptive`
 
-- **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
+Window adaptive behavior mode.
 
-Static mode is especially useful for embedding window content directly into the interface without modal behavior.
+**Type:** `'modal' | 'menu' | 'actionSheet' | 'static'`
 
-## 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"`).
+**Default:** `'modal'`
 
 **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)
+- `'modal'` — modal window in screen center
+- `'menu'` — dropdown menu attached to element
+- `'actionSheet'` — bottom panel for mobile devices
+- `'static'` — static mode without overlay
 
 ## State Management via v-model
 
@@ -368,3 +387,61 @@ const handleWindow = (options) => {
 </template>
 ```
 
+## 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):
+
+[types.ts]
+#########
+[ComponentDoc.stories.ts]
+#########
+[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
+====================================
+
+**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,27 +11,36 @@
 ```
 [code]
 ```
-Проанализируй структуру, props, события, слоты, типы, внутреннюю логику.
+
+Проанализируй:
+- Структуру компонента (props, computed, methods)
+- События (emit) и их параметры
+- Слоты (slots) и их параметры
+- Типы данных (interfaces, types)
+- Expose методы и свойства
+- Внутреннюю логику и поведение
+- Зависимости от других компонентов
 
 ====================================
 2) Добавь недостающие комментарии к типам
 ====================================
 Добавь краткие одноязычные (на [wikiLanguage]) JSDoc-комментарии к отсутствующим типам и их свойствам.
+
 Код для исправления:
 ```ts
 // types.ts
 [types]
 ```
-Ниже продублируй итог без обёртки:
-[types]
 
 Требования к комментариям:
-- Однострочные для простых полей.
-- Многострочные для блоков логики.
-- Без дублирования очевидного.
-- Адаптированы к storybook.
-
-Пример:
+- Однострочные для простых полей (/** Описание */)
+- Многострочные для сложных типов или блоков логики
+- Без дублирования очевидного (не комментируй "id" как "id компонента")
+- Адаптированы для отображения в Storybook
+- Используй технические термины правильно
+- Для union типов опиши каждое значение отдельно в коде
+
+Пример (строго следуй формату):
 ```ts
 /**
  * Basic properties for image components.
@@ -46,167 +57,189 @@ 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].
-- Можно дорабатывать существующий текст, изменяя, но не удалять. Удаляй только лишнее или неактуальное.
-- Обязательно перечисли слоты (если есть) и события (если есть) в заданном формате.
-- Не описывай props списком, если они простые. Подробно описывай только сложные связки (например, зависимые props) или составные типы.
-- Пример использования — в конце соответствующего смыслового блока или в самом низу, если один общий пример.
-- Слоты и события — строго в формате ниже. Если типов нет — блок с типом опускается.
-- Добавь Canvas, если есть пример использования. Если нет — добавь stories.
-
-Формат слотов:
-```
-## Слоты
-### `имяСлота`
-Краткое описание назначения слота. Можно маркированным списком выделить особенности.
-Если есть props, добавить описание props. `props: any` - это значит, что нет пропсов, его не надо писать.
-Если слотов несколько — каждый с подпунктом `###`.
-Если возвращает просто VNode, не надо описывать.
-Не надо писать что-то в таком виде: `Этот слот принимает любые VNode и не передает никаких свойств.`
-Если нет событий, не описывать блок событий.
-Если нет слотов, не описывать блок слотов.
-
-Формат событий:
-```
-## События
-### `имяСобытия`
-Описание, когда и зачем испускается.
+Структура документа (строго):
 
-Пример описания слота (не вставляй дословно, адаптируй):
-### `suffix`
+**1. Краткое описание (description):**
+- Одно предложение, максимально кратко передающее суть компонента
+- Не используй фразы типа "Этот компонент", начинай сразу с назначения
 
-Слот для размещения контента в конце компонента, после основного содержимого.
+**2. Основной текст документации (doc):**
+- Начинается БЕЗ заголовка
+- Детальное описание функциональности (2-4 абзаца)
+- Блок "**Основные возможности:**" (список ключевых фич)
+- Блок "**Типичные сценарии использования:**" (список примеров применения)
+- Можно дорабатывать существующий текст, но НЕ удалять актуальную информацию
+- Удаляй только устаревшее или избыточное
 
-**Возвращает:** `VNode` — элемент с классом `{className}__suffix` и атрибутом `data-event-type="suffix"`
+**3. Специальные разделы (если есть):**
 
-```html
-<Component>
-  <template #suffix>
-    <Icon name="check" />
-  </template>
-</Component>
+**Props (только для сложных случаев):**
+- Описывай Props только если они имеют сложную логику взаимодействия, зависимости или составные типы
+- НЕ описывай простые boolean/string props списком - для них достаточно JSDoc комментариев в типах
+- Формат: `## Props`, затем `### НазваниеProp` для каждого сложного prop
+
+Пример описания сложного prop:
+```md
+## Props
+### `adaptive`
+
+Режим адаптивного поведения окна.
+
+**Тип:** `'modal' | 'menu' | 'actionSheet' | 'static'`
+
+**По умолчанию:** `'modal'`
+
+**Возможные значения:**
+- `'modal'` — модальное окно по центру экрана с оверлеем
+- `'menu'` — выпадающее меню, привязанное к элементу управления
+- `'actionSheet'` — нижняя панель для мобильных интерфейсов
+- `'static'` — статичный режим без оверлея и позиционирования
 ```
 
-### `control`
+**4. Обязательные секции (если присутствуют в компоненте):**
 
-Слот для размещения элементов управления окном (кнопки закрытия, минимизации и т.д.).
+**Expose методы/свойства:**
+```md
+## Expose методы
+### `methodName`
+
+Описание метода.
+
+**Тип:** `(param: Type) => ReturnType`
 
 **Параметры:**
-- `props: WindowControlItem` — объект с данными управления окном
+- `param: Type` — описание параметра
 
-```html
-<Window>
-  <template #control="{ onclick, open }">
-    <button @click="onclick">
-      {{ open ? 'Закрыть' : 'Открыть' }}
-    </button>
-  </template>
-</Window>
+**Возвращает:** описание возвращаемого значения
+
+[пример кода]
 ```
 
-Пример описания события (адаптируй под контекст):
-### `window`
+**Слоты:**
+```md
+## Слоты
+### `slotName`
 
-Событие срабатывает при изменении состояния окна (открытие/закрытие).
+Описание слота.
 
 **Параметры:**
-- `options: WindowEmitOptions` — объект с данными окна
+- `param: Type` — описание параметра слота
 
-**Структура 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>
+**События:**
+```md
+## События
+### `eventName`
 
-<template>
-  <Window @window="handleWindow">
-    <template #default>
-      <p>Содержимое окна</p>
-    </template>
-  </Window>
-</template>
+Описание события.
+
+**Параметры:**
+- `param: Type` — описание параметра события
+
+**Структура Type:** (если параметр сложный)
+- `field: string` — описание поля
+- `field2: number` — описание поля
+
+[пример кода]
 ```
 
+**5. Примеры использования:**
+- Добавляй Canvas для демонстрации конкретных сценариев
+- НЕ добавляй базовый `<Canvas of={Component.Component}/>` — он уже есть в начале
+- Формат: `<Canvas of={Component.StoryName}/>`
 
-Пример использования Canvas:
-<Canvas of={Chip.ChipSkeleton}/>
+**Строгие правила форматирования:**
 
-====================================
-5) Итоговый возврат
-====================================
-Верни результат строго в формате (ничего лишнего до или после):
-[types.ts]
-#########
-[ComponentDoc.stories.ts]
-#########
-[UiPlayerLite.mdx]
+- Заголовки уровней:
+  - `##` — основные разделы (Props, Expose методы, Слоты, События)
+  - `###` — конкретные элементы (названия методов, слотов, событий)
+  - `####` — подразделы внутри описания (Поведение, Примеры)
 
-Где:
-- Не добавляй ничего лишнего (типа ```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).
+- Код:
+  - Типы и интерфейсы: ` ```ts `
+  - Разметка компонентов: ` ```html ` (НЕ ` ```vue `)
+  - Inline код: обёртка в обратные кавычки `` `код` ``
 
-====================================
-Ограничения и стилистика
-====================================
-- Никаких таблиц.
-- Никаких произвольных дополнительных разделов.
-- Не добавляй раздел "Props", если нет сложных зависимостей.
-- Не дублируй описание одного и того же.
-- Уважай язык [wikiLanguage] — если это "en" используй английский, иначе соответствующий язык.
-- Не используй placeholder'ы вне оговорённых.
-- Кодовые блоки: для типов и событий — ```ts, для разметки — ```html при необходимости.
-- Сторисы: только необходимые сценарии, без лишних визуальных украшений.
+- Meta и StorybookMain:
+  - СТРОГО ЗАПРЕЩЕНО трогать блоки Meta и StorybookMain
+  - Они должны остаться как есть в начале файла
+  - Не добавлять, не удалять, не изменять их
+
+- Структурные элементы:
+  - Используй `**Жирный текст:**` для подзаголовков внутри описаний
+  - Используй `>` для важных замечаний и предупреждений
+  - Списки только там, где они улучшают читаемость
+
+**Пример полной структуры документа:**
+
+```md
+import { Meta, Canvas } from '@storybook/addon-docs/blocks'
+import * as Component from './Component.stories'
+
+<Meta of={Component} />
 
-====================================
-Пример (не включать в ответ, только как ориентир стиля)
-====================================
 Компонент для создания модальных окон, диалогов и всплывающих элементов с гибким позиционированием и адаптивным поведением.
 
 Window управляет отображением контента поверх основного интерфейса, поддерживает различные типы позиционирования (модальные окна, выпадающие меню, action sheets), анимации открытия/закрытия и интеграцию с системой событий. Компонент автоматически обрабатывает клики вне области, управление фокусом и адаптацию под различные размеры экранов.
@@ -231,6 +264,8 @@ Window управляет отображением контента поверх
 
 ## CSS классы для управления поведением
 
+Компонент использует специальные CSS классы для управления поведением:
+
 - `*--block` — предотвращает закрытие окна при клике вне его границ
 - `*--blockChildren` — предотвращает закрытие текущего окна
 - `*--blockOther` — предотвращает закрытие других окон до закрытия текущего
@@ -241,34 +276,20 @@ Window управляет отображением контента поверх
 
 Где `*` — название класса компонента (например, `d1-window`, `m3-window`).
 
-## Статический режим (staticMode)
-
-Компонент Window поддерживает статический режим работы через свойство `staticMode`. В этом режиме окно работает как встроенный компонент без модального поведения:
-
-- **Содержимое отображается сразу** — окно не скрывается и не требует активации
-- **Отключены анимации** — нет эффектов появления/исчезновения
-- **Отключено позиционирование** — окно встраивается в поток документа
-- **Работает с adaptive** — когда свойство `adaptive` имеет один из статичных режимов (например, `static`), включается статичный режим
+## Props
+### `adaptive`
 
-Статический режим особенно полезен для встраивания содержимого окна непосредственно в интерфейс без модального поведения.
+Режим адаптивного поведения окна.
 
-## Направление позиционирования (axis)
+**Тип:** `'modal' | 'menu' | 'actionSheet' | 'static'`
 
-Управляет осью размещения окна относительно элемента-якоря. По умолчанию: `y`.
-
-> Применяется только в режиме меню (`adaptive="menu"` или `adaptive="menuWindow"`).
+**По умолчанию:** `'modal'`
 
 **Возможные значения:**
-- `'x'` — горизонтальная ось (слева или справа от якоря)
-- `'y'` — вертикальная ось (сверху или снизу от якоря)
-- `'on'` — поверх якоря (окно центрируется над элементом)
-
-### Поведение
-
-- Компонент автоматически выбирает сторону размещения с наибольшим доступным пространством
-- При использовании контекстного меню (`contextmenu`) позиционирование происходит от координат курсора
-- Окно всегда остается в пределах видимой области экрана (viewport)
-- Отступ от якоря задается через свойство `indent` (по умолчанию 4px)
+- `'modal'` — модальное окно по центру экрана
+- `'menu'` — выпадающее меню, привязанное к элементу
+- `'actionSheet'` — нижняя панель для мобильных устройств
+- `'static'` — статичный режим без оверлея
 
 ## Управление состоянием через v-model
 
@@ -367,3 +388,62 @@ const handleWindow = (options) => {
   </Window>
 </template>
 ```
+
+## Примеры использования
+### Базовое модальное окно
+
+<Canvas of={Component.BasicModal}/>
+
+### Выпадающее меню
+
+<Canvas of={Component.DropdownMenu}/>
+```
+
+====================================
+5) Итоговый возврат
+====================================
+Верни результат СТРОГО в формате (ничего лишнего до или после):
+
+[types.ts]
+#########
+[ComponentDoc.stories.ts]
+#########
+[ComponentName.mdx]
+
+**Требования к формату вывода:**
+- НЕ добавляй метки файлов типа `// filepath: ...`
+- НЕ оборачивай в блоки кода (` ```ts `, ` ```md `)
+- НЕ добавляй комментарии с названиями файлов
+- НЕ включай в сам результат текст `[types.ts]`, `[ComponentDoc.stories.ts]`, `[ComponentName.mdx]`
+- Только чистый код, разделённый строкой из девяти символов решётки: `#########`
+- Порядок строго: типы → истории → документация
+- Каждый блок начинается с первой строки кода, без пробелов и переносов перед
+
+**Структура каждого блока:**
+- `[types.ts]` — итоговый файл типов с JSDoc комментариями (только содержимое файла)
+- `[ComponentDoc.stories.ts]` — итоговый файл историй (только содержимое файла)
+- `[ComponentName.mdx]` — итоговая MDX-документация (только содержимое файла)
+
+====================================
+Ограничения и стилистика
+====================================
+
+**Запрещено:**
+- Таблицы в любом виде
+- Произвольные дополнительные разделы вне указанных
+- Раздел "Props" для простых свойств без сложной логики
+- Дублирование описаний одного и того же
+- Placeholder'ы вне указанных в промпте (`[code]`, `[types]`, `[stories]`, `[md]`)
+- Использование ` ```vue ` для примеров кода (только ` ```html `)
+- Изменение Meta блока в MDX
+- Добавление базового Canvas (`<Canvas of={Component.Component}/>`)
+
+**Обязательно:**
+- Язык документации соответствует [wikiLanguage]
+- Если [wikiLanguage] = "en", используй английский для ВСЕЙ документации
+- Если [wikiLanguage] = "ru", используй русский для ВСЕЙ документации
+- Кодовые блоки: типы и события — ` ```ts `, разметка — ` ```html `
+- Истории: только необходимые сценарии, без визуальных украшений
+- Краткость и информативность без "воды"
+- Технически корректные термины
+- Примеры кода работоспособны и актуальны

package/src/media/templates/packages/library/design.config.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../design.config.json"
-}