@dxtmisha/scripts 0.9.0 → 0.10.0

package/src/classes/Build/BuildPackages.ts

@@ -31,18 +31,14 @@ export class BuildPackages {
    * Сканирует директорию пакетов и собирает каждый пакет, содержащий package.json.
    */
   async make(): Promise<void> {
-    const list = PropertiesFile.readDir(this.path)
+    const list = this.getList()
     let changed = 0
 
     console.info(`Build packages(${list.length})...`)
 
-    for (const folder of list) {
-      const packageFile = new PackageFile([this.path, folder])
-
+    for (const packageFile of list) {
       if (
-        packageFile.is()
-        && !packageFile.isTest()
-        && this.isUpdate(packageFile)
+        this.isUpdate(packageFile)
         && await this.build(packageFile)
       ) {
         this.updateLog(packageFile)
@@ -80,6 +76,36 @@ export class BuildPackages {
     )
   }
 
+  /**
+   * Scans the packages directory and returns a list of packages sorted by the ui-priority property in package.json.
+   * If a package does not have a priority, it defaults to 500.
+   *
+   * Сканирует директорию пакетов и возвращает список пакетов, отсортированный по свойству ui-priority в package.json.
+   * Если у пакета нет приоритета, по умолчанию устанавливается значение 500.
+   * @returns sorted list of package files / отсортированный список файлов пакетов
+   */
+  private getList(): PackageFile[] {
+    const list = PropertiesFile.readDir(this.path)
+    const packages: PackageFile[] = []
+
+    for (const folder of list) {
+      const packageFile = new PackageFile([this.path, folder])
+
+      if (
+        packageFile.is()
+        && !packageFile.isTest()
+      ) {
+        packages.push(packageFile)
+      }
+    }
+
+    return packages.sort((a, b) => {
+      const priorityA = a.get()?.['ui-priority'] ?? 500
+      const priorityB = b.get()?.['ui-priority'] ?? 500
+      return priorityA - priorityB
+    })
+  }
+
   /**
    * Returns the cached version of the package from the build log.
    *

package/src/classes/Design/DesignComponent.ts

@@ -270,7 +270,7 @@ export class DesignComponent extends DesignCommand {
           const option = prop.option
           let item: string = ''
 
-          item += `{ name: '${prop.name}', type: '${prop.type}'`
+          item += `{ name: '${prop.name}', type: '${prop.type.replace('| undefined', '').trim()}'`
 
           if (
             option

package/src/classes/Library/LibraryAiPromptItem.ts

@@ -5,7 +5,8 @@ import {
   UI_FILE_AI_PROMPT_DESCRIPTION,
   UI_FILE_AI_PROMPT_INFO,
   UI_FILE_AI_PROMPT_TYPES,
-  UI_FILE_PACKAGE
+  UI_FILE_PACKAGE,
+  UI_FILE_AI_PROMPT_DEVELOPER
 } from '../../config'
 
 /**
@@ -53,6 +54,7 @@ export class LibraryAiPromptItem {
       || this.isInfo()
       || this.isTypes()
       || this.isScreenshot()
+      || this.isDeveloper()
   }
 
   /**
@@ -65,6 +67,16 @@ export class LibraryAiPromptItem {
     return PropertiesFile.is(this.getPath(UI_FILE_AI_PROMPT_DESCRIPTION))
   }
 
+  /**
+   * Checks if the developer prompt file exists.
+   *
+   * Проверяет, существует ли файл промпта разработчика.
+   * @returns true if developer prompt file exists / true, если файл промпта разработчика существует
+   */
+  isDeveloper(): boolean {
+    return PropertiesFile.is(this.getPath(UI_FILE_AI_PROMPT_DEVELOPER))
+  }
+
   /**
    * Checks if the information file exists.
    *
@@ -108,7 +120,8 @@ export class LibraryAiPromptItem {
       this.getDescription(),
       this.getInfo(),
       this.getTypes(),
-      this.getScreenshot()
+      this.getScreenshot(),
+      this.getDeveloper()
     ].filter(item => item !== undefined) as string[]
 
     if (data.length > 0) {
@@ -201,6 +214,27 @@ ${this.readFile(UI_FILE_AI_PROMPT_DESCRIPTION)}
     return undefined
   }
 
+  /**
+   * Formats and returns the developer prompt section.
+   *
+   * Форматирует и возвращает секцию промпта для разработчика.
+   * @returns formatted developer prompt or undefined / отформатированный промпт разработчика или undefined
+   * @protected
+   */
+  protected getDeveloper(): string | undefined {
+    if (this.isDeveloper()) {
+      console.log('-- Developer')
+
+      return `
+## Mandatory Study Before Development
+Before developing, modifying, or implementing any code for /${this.getPathString()}, you MUST first study the architectural rules and instructions located in the following file:
+'${this.getPathString()}/${UI_FILE_AI_PROMPT_DEVELOPER}'
+      `.trim()
+    }
+
+    return undefined
+  }
+
   /**
    * Formats and returns the info section for the prompt.
    *

package/src/composables/useAi.ts

@@ -1,8 +1,13 @@
 import { PropertiesConfig } from '../classes/Properties/PropertiesConfig'
 
 import { AiAbstract } from '../classes/Ai/AiAbstract'
+import { AiClaude } from '../classes/Ai/AiClaude'
+import { AiClaudeAgent } from '../classes/Ai/AiClaudeAgent'
+import { AiClaudeCli } from '../classes/Ai/AiClaudeCli'
 import { AiGoogle } from '../classes/Ai/AiGoogle'
 import { AiGoogleCli } from '../classes/Ai/AiGoogleCli'
+import { AiOpenAi } from '../classes/Ai/AiOpenAi'
+import { AiZAi } from '../classes/Ai/AiZAi'
 
 /**
  * Composable to obtain an AI instance based on configuration.
@@ -13,10 +18,20 @@ export function useAi(): AiAbstract | undefined {
   const type = PropertiesConfig.getAiType()
 
   switch (type) {
+    case 'claude':
+      return new AiClaude()
+    case 'claude-agent':
+      return new AiClaudeAgent()
+    case 'claude-cli':
+      return new AiClaudeCli()
     case 'gemini':
       return new AiGoogle()
     case 'gemini-cli':
       return new AiGoogleCli()
+    case 'openai':
+      return new AiOpenAi()
+    case 'zai':
+      return new AiZAi()
   }
 
   return undefined

package/src/config.ts

@@ -90,6 +90,8 @@ export const UI_FILE_AI_PROMPT_INSTRUCTION = 'ai-instruction.txt'
 export const UI_FILE_AI_PROMPT_PROMPT = 'ai-prompt.txt'
 /** AI prompt types file name / Название файла с типами промпта AI */
 export const UI_FILE_AI_PROMPT_TYPES = 'ai-types.txt'
+/** AI prompt developer file name / Название файла для разработчика AI */
+export const UI_FILE_AI_PROMPT_DEVELOPER = 'ai-developer.txt'
 
 /** File name for storing the list of flags/ Название файла для хранения списка флагов */
 export const UI_FILE_NAME_FLAGS = 'flags'

package/src/demo/ai.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env vite-node
+
+import { useAi } from '../composables/useAi'
+
+const ai = useAi()
+
+ai?.generate('Who are you?')
+  .then((response) => {
+    console.log('ai response: ', response)
+  })

package/src/library-ai.ts

@@ -2,9 +2,9 @@
 export * from './classes/Ai/AiAbstract'
 export * from './classes/Ai/AiGoogleLite'
 export * from './classes/Ai/AiGoogle'
-export * from './classes/Ai/AiGoogleCliLite'
-export * from './classes/Ai/AiGoogleCli'
 export * from './classes/Ai/AiClaudeLite'
 export * from './classes/Ai/AiClaude'
-export * from './classes/Ai/AiClaudeCliLite'
-export * from './classes/Ai/AiClaudeCli'
+export * from './classes/Ai/AiOpenAiLite'
+export * from './classes/Ai/AiOpenAi'
+export * from './classes/Ai/AiZAiLite'
+export * from './classes/Ai/AiZAi'

package/src/library.ts

@@ -1,54 +1,67 @@
-// Classes
-export * from './classes/Ai/AiAbstract'
-export * from './classes/Ai/AiClaude'
-export * from './classes/Ai/AiClaudeCli'
-export * from './classes/Ai/AiClaudeCliLite'
-export * from './classes/Ai/AiClaudeLite'
-export * from './classes/Ai/AiDoc'
-export * from './classes/Ai/AiDocItem'
-export * from './classes/Ai/AiDocItemAbstract'
-export * from './classes/Ai/AiDocItemClasses'
-export * from './classes/Ai/AiDocItemComposables'
-export * from './classes/Ai/AiDocType'
-export * from './classes/Ai/AiGoogle'
-export * from './classes/Ai/AiGoogleCli'
-export * from './classes/Ai/AiGoogleCliLite'
-export * from './classes/Ai/AiGoogleLite'
-export * from './classes/BrowserItem'
-export * from './classes/Build/BuildFunctional'
-export * from './classes/BuildItem'
-export * from './classes/Design/DesignFigma'
-export * from './classes/Design/DesignScreenshot'
-export * from './classes/Design/DesignTypes'
-export * from './classes/Design/DesignTypescript'
-export * from './classes/Design/DesignWikiStorm'
-export * from './classes/Design/DesignWikiStormItem'
-export * from './classes/FigmaApi'
-export * from './classes/Git/GitRead'
-export * from './classes/Library/LibraryAiWiki'
-export * from './classes/Library/LibraryAiWikiItem'
-export * from './classes/Library/LibraryExport'
-export * from './classes/Library/LibraryList'
-export * from './classes/Library/LibraryPlugin'
-export * from './classes/Library/LibraryTypes'
-export * from './classes/Properties/PropertiesFile'
-
-// Composables
-export * from './composables/useAi'
-
-// Functions
-export * from './functions/getConfigAi'
-export * from './functions/getDirname'
-export * from './functions/getPackageJson'
-export * from './functions/hasNativeDirname'
-
-// Types
-export * from './types/aiTypes'
-export * from './types/configTypes'
-export * from './types/designTypes'
-export * from './types/figmaApiTypes'
-export * from './types/gitTypes'
-export * from './types/libraryTypes'
-export * from './types/propertyTypes'
-export * from './types/screenshotTypes'
-export * from './types/webTypes'
+// Classes
+export * from './classes/Ai/AiAbstract'
+export * from './classes/Ai/AiClaude'
+export * from './classes/Ai/AiClaudeAgent'
+export * from './classes/Ai/AiClaudeAgentLite'
+export * from './classes/Ai/AiClaudeCli'
+export * from './classes/Ai/AiClaudeCliLite'
+export * from './classes/Ai/AiClaudeLite'
+export * from './classes/Ai/AiDoc'
+export * from './classes/Ai/AiDocItem'
+export * from './classes/Ai/AiDocItemAbstract'
+export * from './classes/Ai/AiDocItemClasses'
+export * from './classes/Ai/AiDocItemComposables'
+export * from './classes/Ai/AiDocType'
+export * from './classes/Ai/AiGoogle'
+export * from './classes/Ai/AiGoogleCli'
+export * from './classes/Ai/AiGoogleCliLite'
+export * from './classes/Ai/AiGoogleLite'
+export * from './classes/Ai/AiOpenAi'
+export * from './classes/Ai/AiOpenAiLite'
+export * from './classes/Ai/AiZAi'
+export * from './classes/Ai/AiZAiLite'
+export * from './classes/Ai/ApiTmp'
+export * from './classes/BrowserItem'
+export * from './classes/Build/BuildFunctional'
+export * from './classes/Build/BuildPackages'
+export * from './classes/Build/BuildPublishPackages'
+export * from './classes/BuildItem'
+export * from './classes/Design/DesignFigma'
+export * from './classes/Design/DesignScreenshot'
+export * from './classes/Design/DesignTypes'
+export * from './classes/Design/DesignTypescript'
+export * from './classes/Design/DesignWikiStorm'
+export * from './classes/Design/DesignWikiStormItem'
+export * from './classes/FigmaApi'
+export * from './classes/Git/GitRead'
+export * from './classes/Library/LibraryAiPrompt'
+export * from './classes/Library/LibraryAiPromptItem'
+export * from './classes/Library/LibraryAiWiki'
+export * from './classes/Library/LibraryAiWikiItem'
+export * from './classes/Library/LibraryExport'
+export * from './classes/Library/LibraryList'
+export * from './classes/Library/LibraryPlugin'
+export * from './classes/Library/LibraryTypes'
+export * from './classes/Package/PackageFile'
+export * from './classes/Properties/PropertiesFile'
+
+// Composables
+export * from './composables/useAi'
+
+// Functions
+export * from './functions/getConfigAi'
+export * from './functions/getDirname'
+export * from './functions/getPackageJson'
+export * from './functions/hasNativeDirname'
+export * from './functions/run'
+
+// Types
+export * from './types/aiTypes'
+export * from './types/configTypes'
+export * from './types/designTypes'
+export * from './types/figmaApiTypes'
+export * from './types/gitTypes'
+export * from './types/libraryTypes'
+export * from './types/propertyTypes'
+export * from './types/screenshotTypes'
+export * from './types/webTypes'

package/src/media/templates/componentDoc/materials/README.md

@@ -0,0 +1,8 @@
+# Work Materials
+
+This folder is designed to store all supporting design documents, component specifications, assets, research notes, and raw inputs utilized for generating high-quality component documentation and design integrations.
+
+### Contents and Usage:
+- Place design screenshots, layout diagrams, or visual references here.
+- Place text drafts, API research files, or functional notes here.
+- Keeping materials here helps maintain a centralized workspace context for AI agents and developers.

package/src/media/templates/componentDoc/materials/prompt.txt

@@ -0,0 +1,28 @@
+Task Goal:
+Based on the design assets, specifications, and other work materials located in this "materials" folder, you must implement a fully working, production-ready, and robust component.
+
+Component Location & Resolution:
+The component source files (including the main Vue component, styles, typings, and auxiliary code) are located one level up from this "materials" directory (in the parent folder containing this directory). You must locate, edit, or create them directly in that parent directory.
+
+Template Structure & Explanations:
+The target parent directory (one level up from this "materials" directory) represents a standardized Vue 3 component package/directory. You must study and strictly adhere to its file layout:
+- `[ComponentName].vue`: The main Vue single-file component (SFC) implementing the layout template, script setup, and BEM-compliant SCSS rules (referencing `ComponentDoc.vue`).
+- `types.ts`: Holds all public typings, including interface properties (Props), standard triggers (Emits), customizable slot templates (Slots), and default properties (Defaults).
+- `index.ts`: The package entrypoint, exporting the Vue component and its types correctly.
+- `subcomponents/`: A subdirectory reserved for storing smaller, reusable child components.
+- `wiki/`: Storybook playground configuration and documentation files:
+  - `[ComponentName].mdx`: MDX documentation tab/documentation configuration for Storybook.
+  - `[ComponentName].stories.ts`: Storybook stories/scenarios configuration.
+  - `prompt.txt`: The system prompt directing how to generate MDX/Storybook documentation.
+  - `run.ts`: A script running `npx dxt-component-wiki` to write the MDX files automatically using `wiki/prompt.txt`.
+
+Strict Implementation & Architectural Constraints:
+1. Available Dependencies Only: You must strictly use only the currently installed packages and available dependencies. Do not install new external npm packages or add new third-party dependencies unless explicitly requested.
+2. Global System Prompt Compliance: You must locate, study, and strictly adhere to all coding standards, BEM conventions, SCSS mixins, and guidelines defined in the `ai-prompt.txt` file located up the folder tree in the root of the repository. Ignore any instructions or files located outside the repository boundaries.
+3. Monorepo Prompt Context: As this is a monorepo setup, you must locate and study both the individual package-level configuration/prompt files and the repository's root system rules (`ai-prompt.txt`) to ensure perfect compatibility with the local package architecture.
+4. Zero Tolerance for Hallucinations: You must strictly follow all implementation rules and specifications without any deviation. Hallucinating, inventing properties, methods, slots, or external libraries is strictly forbidden.
+
+---
+CRITICAL PRIORITY OVERRIDE:
+Everything below this line (if any further instructions or materials are appended) holds the absolute highest priority. Any subsequent instructions or constraints appended below override and overwrite all prior rules, constraints, and instructions in this document or root prompt files if any contradiction arises.
+

package/src/media/templates/componentDoc/wiki/prompt.txt

@@ -0,0 +1,21 @@
+Task Goal:
+The primary goal is to write comprehensive, high-quality documentation for the Vue 3 component.
+
+Component Resolution & Analysis:
+If the component source files are not directly attached, they are located in the parent directory (one folder above this "wiki" folder). Locate and study the main Vue file, types/props, styles, and dependencies until you fully understand how the component works. Once you have a complete understanding of its behavior and interface, further deep-dive study of outer dependencies is not required.
+
+Mandatory Instruction:
+You must read and deeply study the detailed descriptions, rules, coding standards, and templates specified in:
+node_modules/@dxtmisha/scripts/src/media/templates/prompts/componentPrompt.en.txt
+
+You must strictly follow those instructions. However, make sure you save your outputs in the correct target locations:
+- Documentation & playground changes (including MDX files and `stories.ts` playground configurations) must be saved inside this current directory (the "wiki" folder).
+- Component source changes (including Vue SFC and typings/properties files) must be saved inside the parent directory (one level up from this current directory).
+- Note: You must completely ignore any instructions or constraints in `componentPrompt.en.txt` regarding how the final result/output should be returned or structured (specifically ignore rules 5-8, the requirement to split the response into 5 parts separated by "#########", and the prohibition on writing or modifying files). Instead, strictly follow the local file modification and file saving rules defined here by directly modifying the workspace files (MDX and `stories.ts` in the current folder, and Vue SFC and `types.ts` in the parent folder).
+
+All constraints, formatting standards, and styling helper classes described in that file must be adhered to without exception.
+(Warning: If this file is not accessible, missing, or cannot be read, you do not need to study or follow the instructions from it; instead, proceed with standard high-quality documentation practices.)
+
+---
+CRITICAL PRIORITY RULE:
+Everything below this line has a higher priority than the text above it.

package/src/media/templates/componentDoc/wiki/run.ts

@@ -2,11 +2,12 @@
 /// <reference types="node" />
 
 import { spawn } from 'node:child_process'
+import { readFileSync } from 'node:fs'
 
 ;(async () => {
   try {
     // You can add prompt generation logic here
-    const prompt = ''
+    const prompt = readFileSync(new URL('./prompt.txt', import.meta.url), 'utf-8')
 
     const child = spawn(
       'npx',

package/src/media/templates/prompts/aiCodeGlobalPrompt.en.txt

@@ -2,6 +2,17 @@
 
 Your primary goal is to generate flawless, industrial-grade code that adheres to dxt-ui standards. You promise to follow these rules strictly:
 
+0. **Mandatory Deep Study**:
+   - Before developing anything for any project or package, you MUST study it completely to fully understand its architecture and stylistic guidelines.
+   - Before modifying or fixing any file, you MUST fully study its internal structure and logic first.
+   - If any instructions, paths, or files are specified as located inside `node_modules/` or any other external/linked directory, you MUST first check if this package exists locally in the workspace (for example, under `packages/`). If it does exist locally, you MUST resolve the paths to the local workspace package directory and study/modify the local source files instead.
+   - **CRITICAL FIRST STEP:** If any project, module, or instruction contains links or references to specific files (e.g. types, developer guides, descriptions), you MUST study all these referenced files as your absolute first action. As soon as you start working with a project, or notice that it is imported/used in the code you are working with, you must immediately read and study all these referenced files before doing any planning, proposing code changes, or writing code. This is mandatory and applies even if the files are located in `node_modules/` (always resolve them to the local workspace directory first if they exist locally).
+   - **STRICT BLOCKING GUARD (CHRONOLOGICAL ORDER RULES):**
+     1. Identify all package paths involved in the user request (e.g. `/packages/constructor/...` maps to `@dxtmisha/constructor`).
+     2. Scan the prompt for sections corresponding to those packages.
+     3. Identify all paths to auxiliary documentation/types mentioned in those sections (e.g., `ai-types.txt`, `ai-developer.txt`).
+     4. You MUST use the `view_file` tool to read and study ALL of these referenced files BEFORE calling `list_dir` on component sub-folders, writing any plans/checklists, or proposing/making code changes. Bypassing this order is a critical protocol violation.
+
 1. **"Copy-Paste Ready" Principle**:
    - Generate code that can be copied and run without a single manual edit.
    - All imports must be absolute or correct relative paths.
@@ -16,6 +27,9 @@ Your primary goal is to generate flawless, industrial-grade code that adheres to
    - **DRY & KISS**: Avoid duplication, write as simply and clearly as possible.
    - **SOLID**: Every module, class, or function must have one clear responsibility.
    - **Declarative Approach**: Prefer a declarative programming style (array functional methods, composition).
+   - **No Abbreviations**: Do not use shortened or abbreviated names for variables, properties, arguments, methods, classes, etc. (e.g., do not use `el`, `rect1`/`r1`, `dx`/`dy`, `val`, `temp`). All identifiers must be descriptive, complete, and self-explanatory.
+   - **Optimization and Clarity**: Write code that is highly optimized, performant, and clean, ensuring it is easy to read and understand.
+   - **Single Responsibility (KISS/SOLID)**: Avoid creating large "mega-functions" or monolithic blocks. Each function must be concise and perform exactly one focused task (1 function = 1 functionality).
 
 4. **Uncompromising TypeScript**:
    - No `any`. Use `unknown` if the type is truly unknown, or create generic types.
@@ -38,3 +52,8 @@ Your primary goal is to generate flawless, industrial-grade code that adheres to
 8. **Aesthetics and Conciseness**:
    - The code must be beautiful. Use logical indentation and group code by meaning.
    - Save tokens by avoiding redundant comments where the code speaks for itself.
+
+9. **Strict Adherence to Instructions**:
+   - Perform all operations strictly in accordance with the provided commands and instructions.
+   - Avoid guessing, improvisation, or performing any unrequested or extra actions.
+   - Strictly adhere to the plan, checklists, and execution steps.

package/src/media/templates/prompts/aiCodeGlobalPrompt.ru.txt

@@ -2,6 +2,19 @@
 
 Твоя главная цель — генерировать безупречный, промышленный код, который соответствует стандартам dxt-ui. Ты обещаешь следовать этим правилам неукоснительно:
 
+0. **Обязательное глубокое изучение**:
+   - Прежде чем разрабатывать что-либо для любого проекта или пакета, ты ОБЯЗАН полностью изучить его, чтобы детально понять его архитектуру и стилистику.
+   - Прежде чем изменять или исправлять любой файл, ты ОБЯЗАН полностью изучить его внутреннюю структуру и логику.
+   - Если в инструкциях, путях или файлах указано расположение внутри `node_modules/` или любой другой внешней/привязанной директории, ты ОБЯЗАН сначала проверить, существует ли этот пакет локально в рабочей области (например, в каталоге `packages/`). Если пакет существует локально, ты ОБЯЗАН переопределить пути на локальный каталог пакета рабочей области и изучать/изменять локальные исходные файлы вместо указанных.
+    - **КРИТИЧЕСКИЙ ПЕРВЫЙ ШАГ:** Если какой-либо проект, модуль или инструкция содержит ссылки или пути к конкретным файлам (например, типы, руководства для разработчиков, описания), ты ОБЯЗАН подробно изучить все эти файлы по ссылкам в первую очередь. Как только ты начинаешь работу с проектом или видишь, что он импортируется/используется в коде, над которым ты работаешь, ты должен незамедлительно прочитать и изучить все эти файлы по ссылкам, прежде чем приступать к планированию, предложению изменений или написанию кода. Это требование обязательно и распространяется в том числе на файлы, находящиеся в `node_modules/` (всегда сначала переопределяй пути на локальный каталог рабочей области, если они существуют локально).
+   - **БЛОКИРУЮЩИЙ КОНТРОЛЬ ПОСЛЕДОВАТЕЛЬНОСТИ (ПРАВИЛО ХРОНОЛОГИИ):**
+     1. Определи все пути пакетов, связанных с запросом (например, `/packages/constructor/...` относится к `@dxtmisha/constructor`).
+     2. Найди в промпте секции, соответствующие этим пакетам.
+     3. Выпиши все пути к вспомогательным файлам типов и руководств, упомянутые в этих секциях (например, `ai-types.txt`, `ai-developer.txt`).
+     4. Ты ОБЯЗАН использовать инструмент `view_file` для чтения и изучения ВСЕХ этих файлов ДО ТОГО, как вызывать `list_dir` для папок компонентов, писать какие-либо планы/чек-листы или вносить/предлагать изменения в код. Нарушение этой последовательности является критическим нарушением протокола.
+
+
+
 1. **Принцип «Copy-Paste Ready» (Готовность к использованию)**:
    - Генерируй код, который можно скопировать и запустить без единой правки.
    - Все импорты должны быть абсолютными или корректными относительными.
@@ -16,6 +29,9 @@
    - **DRY & KISS**: Избегай дублирования, пиши максимально просто и понятно.
    - **SOLID**: Каждый модуль, класс или функция должны иметь одну четкую ответственность.
    - **Декларативность**: Отдавай предпочтение декларативному стилю программирования (функциональные методы массивов, композиция).
+   - **Никаких сокращений**: Запрещено использовать сокращенные имена для переменных, свойств, аргументов, методов, классов и т. д. (например, нельзя использовать `el`, `rect1`/`r1`, `dx`/`dy`, `val`, `temp`). Все идентификаторы должны быть информативными, полными и самодокументируемыми.
+   - **Оптимизация и понятность**: Код должен быть максимально оптимизированным, производительным и понятным, обеспечивающим легкое чтение и поддержку.
+   - **Принцип единой ответственности**: Избегай создания больших «мега-функций» или монолитных блоков. Каждая функция должна быть лаконичной и решать ровно одну задачу (1 функция — 1 функционал).
 
 4. **Бескомпромиссный TypeScript**:
    - Никаких `any`. Используй `unknown`, если тип действительно неизвестен, или создавай generic-типы.
@@ -38,3 +54,8 @@
 8. **Эстетика и Лаконичность**:
    - Код должен быть красивым. Используй логические отступы и группировку кода по смыслу.
    - Экономь токены, избегая избыточных комментариев там, где код говорит сам за себя.
+
+9. **Строгое следование инструкциям**:
+   - Выполняй все действия строго в соответствии с предоставленными командами и инструкциями.
+   - Никакой самодеятельности, додумывания или выполнения лишних/незапрошенных действий.
+   - Строго придерживайся планов, чек-листов и шагов выполнения.

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

@@ -52,27 +52,79 @@ Use the following template and style.
 7.  **Events**:
     - Heading `## Events`
     - For each event:
-        - `### eventName`
-        - Description of when it triggers.
+        - Header `### `eventName`` (the name must be wrapped in backticks).
+        - A brief paragraph describing when the event triggers.
         - **Parameters:**
-            - List: `- `name: type` — description`.
-        - Code example (if the event is complex).
-
-8.  **Expose (Component Methods)**:
+            - Header: `**Parameters:**`
+            - List: `- `paramName: paramType` — parameter description.`
+        - **Structure of Custom Types (if applicable):**
+            - Header: `**TypeName structure:**` (or `**TypeName structure:** same as for `otherEventName` event` if identical).
+            - List: `- `fieldName: fieldType` — field description.`
+        - **Code Example (if the event is complex):**
+            - Code examples MUST be wrapped using the Storybook `<Source />` component instead of standard markdown backticks. Remember to add `import { Source } from '@storybook/addon-docs/blocks';` at the top of the MDX file if not already present:
+              ```md
+              <Source
+                  code={`
+              <script setup>
+              // code example here
+              </script>
+                `}
+                  language="html"
+              />
+              ```
+
+8.  **Expose (Component Methods & Properties)**:
     - Heading `## Expose`
-    - For each public method (accessible via ref):
-        - `### methodName()`
-        - Description of the action.
-        - **Returns:** `Type` (or `void`).
+    - Under the heading, present the list of public methods, reactive references (Refs), and computed variables exposed by the component, in the clean, signature-based bullet format:
+        - For methods: `- `methodName(paramName: paramType): returnType` — Description.`
+        - For reactive states (Refs/Computed): `- `propertyName: PropertyType` — Description.`
+        - Standard types include `boolean`, `void`, `Ref<any>`, `ComputedRef<any>`, etc.
 
 9.  **Slots**:
     - Heading `## Slots`
-    - For each slot:
-        - `### slotName`
-        - Description of purpose.
-        - **Parameters (Scoped Props):**
-            - List: `- `name: type` — description`.
-        - Code example using the slot.
+    - Under the heading, present the list of slots in the clean, signature-based bullet format:
+        - For slots without parameters: `- `slotName: Type` — Description.`
+        - For slots with parameters: `- `slotName(paramName: paramType): Type` — Description.`
+        - Standard return type is usually `VNode` or `any`.
+
+### Storybook Layout Helpers (storybookStyle.scss):
+When writing Storybook stories (`*.stories.ts`) and examples in the MDX documentation, you MUST use the predefined showcase helper classes. These styles are imported globally and start with the `.wiki-storybook-` prefix. Do not write custom inline styles or new CSS classes for showcase layout, positioning, placeholders, or containers; use the following helper classes:
+
+- **Containers & Layouts**:
+  - `.wiki-storybook-container` — enables container queries (`container-type: inline-size`).
+  - `.wiki-storybook-group` — a 12-column CSS Grid layout (`grid-template-columns: repeat(12, 1fr)`) with an `8px` gap, perfect for presenting multiple items or variations.
+  - `.wiki-storybook-flex` — basic flexbox wrapper (`display: flex; flex-wrap: wrap`) with an `8px` gap.
+  - `.wiki-storybook-flex-align-center` — same as flex wrapper, but aligns items vertically (`align-items: center`).
+  - `.wiki-storybook-flex-center` — centers items horizontally and vertically with an `8px` gap.
+  - `.wiki-storybook-flex-column` — vertical flexbox layout (`display: flex; flex-direction: column`) with a `16px` gap.
+  - `.wiki-storybook-decreased` — constrains maximum width of the showcase block to `72%`.
+  - `.wiki-storybook-decreasedX2` — constrains showcase block width responsively (`64%` at `md` screens, `48%` at `lg` screens).
+
+- **Showcase Items (`.wiki-storybook-item`)**:
+  Used to display components inside a unified visual frame (aspect-ratio `1/1` by default, border, rounded corners, hidden overflow):
+  - `.wiki-storybook-item__label` — a small floaty label at the top-left corner (`font-size: 12px`, semi-transparent blurred background) for labeling specific variations. Use `.wiki-storybook-item__label--static` to make it flow statically inside the block without absolute positioning.
+  - `&--padding` — adds standard `16px` padding inside the item box.
+  - `&--rectangle` — sets a `16:9` aspect ratio and spans all 12 columns in a grid.
+  - `&--widescreen` — sets a `32:9` aspect ratio and spans all 12 columns in a grid.
+  - `&--compact` — sets a `64:9` aspect ratio and spans all 12 columns in a grid.
+  - `&--auto` — sets aspect ratio to `auto` and spans all 12 columns in a grid.
+  - `&--squared--xs`, `&--squared--sm`, `&--squared--md`, `&--squared--lg`, `&--squared--max` — responsive grid item spans. For instance, `--squared--sm` spans 6 columns on mobile, 4 columns on tablet (640px+), and 2 columns on desktop (1024px+).
+  - `&--center` — flex-centers internal elements.
+  - `&--widthAuto` — sets width to `auto`.
+  - `&--overflowVisible` — overrides `overflow: hidden` to `overflow: visible` (useful for dropdowns or modals).
+  - `&--rtl` — sets Right-to-Left (RTL) text and flex layout direction.
+
+- **Mock Components & Placeholders**:
+  - `.wiki-storybook-card` — a mock card (`320px` width, rounded borders) to simulate real-world layout placement:
+    - `.wiki-storybook-card__image` — 128px high cover image.
+    - `.wiki-storybook-card__content` — vertical flex layout with `16px` padding and `16px` gap.
+    - `.wiki-storybook-card__label` — title with `20px` font size.
+    - `.wiki-storybook-card__information` — muted descriptions (`14px` size, gray).
+    - `.wiki-storybook-card__actions` — horizontal actions flex wrapper (`8px` gap).
+  - `.wiki-storybook-button` — standard story action trigger button. Modifiers for status colors: `&--success` (green), `&--error` (red), `&--warning` (yellow), `&--info` (blue).
+  - `.wiki-storybook-dummy` — visual placeholder box (`32px` high, dark translucent grey).
+    - Colors: `&--color--blue`, `&--color--red`, `&--color--green`.
+    - Sizes: `&--size--sm` (height `64px`), `&--size--md` (height `128px`), `&--size--lg` (height `256px`).
 
 ### Instructions:
 1. Study the provided component code (including props, emits, slots, expose).
@@ -82,6 +134,9 @@ Use the following template and style.
 3.2. Try to keep original descriptions unchanged.
 4. Use the correct terminology (Props, Events, Slots, Expose).
 4.1. All headings must be in [wikiLanguage].
+4.2. In Storybook stories and MDX code examples, you MUST use the predefined layout helper classes from `storybookStyle.scss` (described above) instead of inline styles or custom CSS blocks.
+4.3. Do not modify the original component code under any circumstances unless explicitly requested.
+4.4. Strictly follow all rules in this prompt. There is zero tolerance for hallucinations: do not invent, assume, or add any non-existent properties, methods, events, slots, or external package dependencies.
 5. Do not add unnecessary introductions or conclusions, only MDX.
 6. Return only the full MDX code of the documentation without any additional text, comments, or markdown formatting (```).
 7. The result must be exclusively text (response), do not attach any files.