@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/functional/scripts/bin/dxt-ai-doc/ai-doc.en.mdx

@@ -0,0 +1,65 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/bin/dxt-ai-doc - AI Documentation Generator'/>
+
+# dxt-ai-doc
+
+The `ai-doc.ts` script is an automated AI-driven documentation generator for the project. It uses `vite-node` to run a generation workflow that analyzes TypeScript source code (classes, composables, and functions), communicates with an AI model to summarize or explain the code, and creates or updates MDX documentation files.
+
+## Key Features
+
+- **Context-Aware Prompts**: Generates the documentation by using specific prompt templates depending on the file type (Class, Composable, or standard Function).
+- **Multi-language Support**: Automatically injects the target documentation language (`[wikiLanguage]`) into the prompt.
+- **Real-time compilation**: Before sending the context to AI, it creates a build context to get accurate TypeScript behavior context.
+
+## How does it work?
+
+The script orchestrates several key processes to automate your project's documentation:
+
+1. It reads the files from the specified directories in your configuration.
+2. It determines the code type (Class, Composable, standard Function) and prepares the specific context needed.
+3. It performs a real-time build compilation to capture accurate TypeScript information.
+4. It sends all gathered context along with customized prompt templates to the AI model.
+5. It parses the final response and updates or creates the `MDX` files directly in your repository.
+
+## How to configure and run
+
+Configuration for the AI generator is defined centrally in your project's `design.config.json` file. **Create this file in the root of your project.** Follow these exact steps to set it up:
+
+1. **Set up AI parameters in `design.config.json`**:
+   Add the API key, model target, and the language specification directly to your configuration object.
+   ```json
+   {
+     "wikiLanguage": "en",
+     "aiType": "gemini",
+     "aiModel": "gemini-2.0-flash",
+     "aiKey": "YOUR_API_KEY_HERE"
+   }
+   ```
+2. **Configure target directories**:
+   In the same `design.config.json`, configure which directories should be scanned by overriding the default `aiDocDirectory` paths. (Defaults are `/classes/`, `/composables/`, and `/functions/`).
+   ```json
+   {
+     "aiDocDirectory": [
+       "/path/to/my/classes/",
+       "/path/to/my/composables/"
+     ]
+   }
+   ```
+3. **Run the command**:
+   The generator is registered in your `package.json` under `@dxtmisha/scripts`. Simply run the `dxt-ai-doc` command via `npx` or `npm`:
+   ```bash
+   npx dxt-ai-doc
+   ```
+   The script requires no arguments—it will automatically scan the configured paths in `design.config.json` and update the documentation files.
+
+## Additional Information
+
+### Dependency on Project Build
+
+The generator depends heavily on the project's build process. **It executes `npm run build`** inside a temporary distribution directory (`dist-temporary`) to accurately capture your TypeScript definitions, exports, and structure. **If your project has TypeScript or build errors, the AI documentation script will fail.**
+
+### Excluding Files (Skip Directive)
+
+You can prevent `dxt-ai-doc` from running on specific files by adding the `// wiki:build-none` directive anywhere in the file.
+

package/src/media/functional/scripts/bin/dxt-ai-doc/ai-doc.ru.mdx

@@ -0,0 +1,65 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/bin/dxt-ai-doc - Генератор AI-документации'/>
+
+# dxt-ai-doc
+
+Скрипт `ai-doc.ts` представляет собой автоматизированный генератор документации проекта на базе ИИ. Он использует `vite-node` для запуска процесса, который анализирует исходный код TypeScript (классы, композитные функции и обычные функции), связывается с моделью ИИ для получения описания кода и создаёт или обновляет файлы документации в формате MDX.
+
+## Ключевые возможности
+
+- **Контекстные промпты**: Генерирует документацию с использованием различных шаблонов промптов в зависимости от типа файла (Class, Composable или стандартная функция).
+- **Многоязычная поддержка**: Автоматически подставляет целевой язык документации (`[wikiLanguage]`) в промпт для ИИ.
+- **Компиляция в реальном времени**: Перед отправкой контекста ИИ скрипт создаёт сборку, чтобы получить точный контекст поведения TypeScript.
+
+## Как это работает?
+
+Скрипт координирует ряд ключевых процессов для автоматизации создания документации:
+
+1. Скрипт считывает список файлов из директорий, указанных в ваших конфигурационных файлах свойств проекта.
+2. Он определяет тип кода (класс, композитная функция, обычная функция) и подготавливает специфичный для него контекст.
+3. Выполняется компиляция кода в реальном времени для получения точной информации о типах TypeScript.
+4. Собранный контекст вместе с шаблонами промптов отправляется в модель ИИ.
+5. ИИ формирует ответ, скрипт анализирует его и напрямую создаёт или обновляет `MDX` файлы в репозитории.
+
+## Настройка и запуск
+
+Конфигурация генератора ИИ определяется централизованно в файле `design.config.json` вашего проекта. **Создайте этот файл в корне вашего проекта.** Выполните эти точные шаги для настройки:
+
+1. **Настройте параметры ИИ в `design.config.json`**:
+   Добавьте ключ API, целевую модель и язык напрямую в конфигурационный объект.
+   ```json
+   {
+     "wikiLanguage": "ru",
+     "aiType": "gemini",
+     "aiModel": "gemini-2.0-flash",
+     "aiKey": "ВАШ_API_КЛЮЧ"
+   }
+   ```
+2. **Настройте целевые директории**:
+   В том же `design.config.json` укажите, какие директории следует сканировать, переопределив пути по умолчанию `aiDocDirectory`. (По умолчанию это `/classes/`, `/composables/` и `/functions/`).
+   ```json
+   {
+     "aiDocDirectory": [
+       "/path/to/my/classes/",
+       "/path/to/my/composables/"
+     ]
+   }
+   ```
+3. **Запустите команду**:
+   Скрипт зарегистрирован в `package.json` как часть `@dxtmisha/scripts`. Просто выполните команду `dxt-ai-doc` через `npx` или `npm`:
+   ```bash
+   npx dxt-ai-doc
+   ```
+   Скрипту не нужны никакие аргументы — он автоматически прочитает настройки из `design.config.json` и обновит нужные файлы документации.
+
+## Дополнительная информация
+
+### Зависимость от сборки проекта
+
+Генератор сильно зависит от процесса сборки проекта. **Он выполняет команду `npm run build`** во временной директории сборки (`dist-temporary`), чтобы точно получить ваши определения TypeScript, экспорты и структуру компонентов. **Если в вашем проекте есть ошибки TypeScript или сборки, скрипт генерации документации завершится сбоем.**
+
+### Исключение файлов (Директива пропуска)
+
+Вы можете исключить конкретные файлы из обработки `dxt-ai-doc`, добавив комментарий `// wiki:build-none` в любом месте файла.
+

package/src/media/functional/scripts/bin/dxt-ai-doc/ai-doc.vi.mdx

@@ -0,0 +1,65 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/bin/dxt-ai-doc - Trình tạo Sinh Bằng AI'/>
+
+# dxt-ai-doc
+
+Tập lệnh `ai-doc.ts` là một công cụ tạo tài liệu tự động dựa trên trí tuệ nhân tạo (AI) cho dự án. Nó sử dụng `vite-node` để chạy một luồng công việc phân tích mã nguồn phân tích TypeScript (lớp, composables và các hàm), giao tiếp với một mô hình AI để tóm tắt hoặc giải thích mã nguồn và tạo hoặc cập nhật các tệp tài liệu MDX.
+
+## Các tính năng chính
+
+- **Lời nhắc AI theo Ngữ cảnh**: Tạo tài liệu bằng cách sử dụng các định dạng câu lệnh (prompt) tối ưu tuỳ thuộc vào loại phân tích tệp (ví dụ Class, Composable hoặc Function tiêu chuẩn).
+- **Hỗ trợ Đa Ngôn ngữ**: Có khả năng tự động đưa ngôn ngữ được yêu cầu tạo tài liệu (`[wikiLanguage]`) vào phần mô tả của câu lệnh AI.
+- **Biên dịch Thời gian thực**: Trước khi gửi giao tiếp ngữ cảnh tới AI, quá trình sẽ tạo ra một bộ thực thi (build context) để nhận dạng cấu trúc dữ liệu theo TypeScript một cách chính xác.
+
+## Nó hoạt động như thế nào?
+
+Tập lệnh phối hợp một số quá trình cốt lõi nhằm tự động hóa việc tạo tài liệu cho dự án của bạn:
+
+1. Nó đọc danh sách tệp từ các thư mục được chỉ định trong tệp cấu hình thuộc tính của dự án.
+2. Phân loại cấu trúc mã nguồn (Lớp, Composable, Hàm tiêu chuẩn) để chuẩn bị ngữ cảnh chuyên dụng cho loại mã nguồn đó.
+3. Thực hiện quá trình biên dịch mã ngay trong thời gian thực nhằm nắm bắt thông tin dữ liệu TypeScript chính xác.
+4. Nó tổng hợp mọi bối cảnh và kết hợp với các mẫu câu lệnh để gửi đi phân tích bởi mô hình AI.
+5. Giải mã phản hồi cuối cùng và trực tiếp tạo mới hoặc cập nhật các tệp `MDX` tài liệu bên trong hệ thống dự án.
+
+## Cách thiết lập và khởi chạy
+
+Cấu hình của trình tạo AI được định nghĩa tập trung trong tệp `design.config.json` của dự án của bạn. **Hãy tạo tệp này tại thư mục gốc của dự án.** Làm theo các bước chính xác dưới đây để thiết lập:
+
+1. **Thiết lập các tham số AI trong `design.config.json`**:
+   Bạn cần thêm trực tiếp khóa API (API key), loại mô hình mục tiêu và ngôn ngữ tạo tài liệu vào trong đối tượng cấu hình dự án.
+   ```json
+   {
+     "wikiLanguage": "vi",
+     "aiType": "gemini",
+     "aiModel": "gemini-2.0-flash",
+     "aiKey": "API_KEY_CUA_BAN"
+   }
+   ```
+2. **Cấu hình các thư mục cần quét**:
+   Trực tiếp trong tệp `design.config.json`, cấu hình cho nó biết thư mục nào nên được theo dõi và quét thông qua thuộc tính mảng `aiDocDirectory`. (Các thư mục mặc định là `/classes/`, `/composables/`, và `/functions/`).
+   ```json
+   {
+     "aiDocDirectory": [
+       "/path/to/my/classes/",
+       "/path/to/my/composables/"
+     ]
+   }
+   ```
+3. **Chạy lệnh**:
+   Công cụ tạo mã tập lệnh được đăng ký trong `package.json` với tên gọi thành phần thuộc nhánh `@dxtmisha/scripts`. Bạn chỉ việc đơn giản chạy lệnh `dxt-ai-doc` qua `npx` hoặc `npm`:
+   ```bash
+   npx dxt-ai-doc
+   ```
+   Tập lệnh không yêu cầu sử dụng thêm đối số vì toàn bộ tài nguyên sẽ được tự nhận diện và cập nhật dự theo thông số lưu trữ qua `design.config.json`.
+
+## Thông tin chi tiết bổ sung
+
+### Phụ thuộc vào quá trình Biên dịch
+
+Công cụ tạo tài liệu phụ thuộc rất nhiều vào quá trình biên dịch (build) của dự án. **Nó sẽ chạy lệnh `npm run build`** trong một thư mục tạm thời (`dist-temporary`) để có thể nắm bắt chính xác các định nghĩa TypeScript, các thành phần xuất (exports) và cấu trúc của dự án. **Nếu dự án của bạn có lỗi TypeScript hoặc bị lỗi trong quá trình biên dịch, tập lệnh tạo tài liệu AI sẽ gặp lỗi (fail).**
+
+### Loại trừ các Tệp (Chỉ thị bỏ qua)
+
+Ngoài ra, bạn có thể ngăn không cho `dxt-ai-doc` tiếp cận và xử lý đối với những tệp cụ thể bằng cách thêm chỉ thị `// wiki:build-none` vào bất kỳ đâu trong tệp.
+

package/src/media/functional/scripts/bin/dxt-component/design-component.en.mdx

@@ -0,0 +1,41 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/bin/dxt-component - Component Scaffolding'/>
+
+# dxt-component
+
+The `dxt-component` command provides fast structural scaffolding for the design system. It uses `ComponentCreator` and `ComponentItem` to automatically identify and bootstrap completely empty component directories.
+
+## Key Features
+
+- **Automated Directory Scaffolding**: Detects empty structural folders inside `src/components` and scaffolds boilerplate vue code.
+- **Dynamic Template Injection**: Injects generic placeholders (such as `ComponentDoc` and current `[project]` name) using the internal system templates seamlessly.
+
+## How does it work?
+
+The scaffolding workflow automates repetitive folder structures:
+
+1. The `ComponentCreator` acts as a scanner, verifying all nested structures strictly placed inside `src/components`. It flags directories that are completely empty.
+2. For each empty directory, it instantiates the `ComponentItem` class which loads pre-defined component template files.
+3. It performs string replacements substituting marker placeholders with the actual derived component names and active project context, subsequently writing the fresh boilerplate directly to the file system.
+
+## How to configure and run
+
+No complex configurations are necessary for pure structural scaffolding. The tool dynamically reads your `package.json` to extract the `name` field, which it will automatically inject in place of any `[project]` template markers.
+
+To detect empty folders and initiate base component creation across the workspace, simply execute:
+```bash
+npx dxt-component
+```
+
+## Generated File Structure
+
+When a new component is scaffolded, it inherits the structure from internal templates:
+
+- `[ComponentName].vue`: Base Vue 3 component with `<script setup>`, types import, and `<style lang="scss">` scaffolding.
+- `index.ts`: Standard Vue component export mapping (`export const [ComponentName]`).
+- `types.ts`: TypeScript definitions for standard `Props`, `Emits`, `Slots`, and `Defaults`.
+- `subcomponents/`: An empty directory (with `.gitignore`) ready for internal nested components.
+- `wiki/[ComponentName].mdx`: A ready-to-run Storybook MDX documentation file utilizing `@dxtmisha/wiki/storybook`.
+- `wiki/[ComponentName].stories.ts`: The actual Storybook Vue 3 implementation script defining the component's preview.
+- `wiki/run.ts`: A shortcut executable node script designed to quickly trigger the `dxt-component-wiki` AI generation command specifically for this component.

package/src/media/functional/scripts/bin/dxt-component/design-component.ru.mdx

@@ -0,0 +1,41 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/bin/dxt-component - Генерация базовой структуры компонентов'/>
+
+# dxt-component
+
+Команда `dxt-component` обеспечивает быструю генерацию базовой структуры (скафолдинг) для дизайн-системы. Инструмент использует `ComponentCreator` и `ComponentItem` для автоматического обнаружения и первичной инициализации пустых директорий компонентов.
+
+## Ключевые возможности
+
+- **Автоматическое создание директорий**: Обнаруживает пустые папки внутри `src/components` и разворачивает базовый vue код из встроенных шаблонов.
+- **Динамическое внедрение шаблонов**: Автоматически заменяет общие системные плейсхолдеры (такие как имя `ComponentDoc` и имя `[project]`), используя внутренние шаблоны незаметно для разработчика.
+
+## Как это работает?
+
+Этот процесс автоматизирует создание повторяющихся структур папок:
+
+1. Класс `ComponentCreator` действует как сканнер, проверяя все вложенные структуры строго внутри `src/components`. Он фильтрует директории, которые полностью пусты.
+2. Для каждой пустой папки он инициирует `ComponentItem`, который в свою очередь загружает предустановленные файлы шаблонов компонентов.
+3. Выполняется строковая замена плейсхолдеров на реальные названия компонента и текущего рабочего проекта. Затем получившийся код записывается прямо в файловую систему.
+
+## Настройка и запуск
+
+Для работы генератора не требуются сложные конфигурации. Инструмент динамически читает ваш `package.json`, чтобы извлечь поле `name`, которое затем автоматически подставляется вместо всех шаблонных маркеров `[project]`.
+
+Чтобы найти все пустые папки компонентов и инициализировать создание базовой структуры в рабочем пространстве, просто выполните:
+```bash
+npx dxt-component
+```
+
+## Структура генерируемых файлов
+
+При инициализации нового компонента он наследует структуру из внутренних шаблонов:
+
+- `[ComponentName].vue`: Базовый компонент Vue 3 со структурой `<script setup>`, импортом типов и скафолдингом `<style lang="scss">`.
+- `index.ts`: Стандартный экспорт компонента Vue (`export const [ComponentName]`).
+- `types.ts`: Определения TypeScript для стандартных `Props`, `Emits`, `Slots` и `Defaults`.
+- `subcomponents/`: Пустая директория (с `.gitignore`), готовая для внутренних вложенных компонентов.
+- `wiki/[ComponentName].mdx`: Готовый к запуску файл документации Storybook MDX, использующий `@dxtmisha/wiki/storybook`.
+- `wiki/[ComponentName].stories.ts`: Исполняемый скрипт Storybook Vue 3, определяющий превью компонента.
+- `wiki/run.ts`: Исполняемый node-скрипт (сокращение), предназначенный для быстрого запуска команды ИИ-генерации `dxt-component-wiki` специально для этого компонента.

package/src/media/functional/scripts/bin/dxt-component/design-component.vi.mdx

@@ -0,0 +1,41 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/bin/dxt-component - Tạo Cấu Trúc Thành Phần'/>
+
+# dxt-component
+
+Lệnh `dxt-component` cung cấp khả năng tự thiết lập cấu trúc (scaffolding) nhanh chóng cho hệ thống thiết kế. Lệnh này sử dụng các kiến trúc `ComponentCreator` và `ComponentItem` chuyên dành cho việc tự động thu thập và nạp tự động hệ sinh thái mã chuẩn vào các thư mục cấu thành hiện đang trống rỗng.
+
+## Các tính năng chính
+
+- **Tự động Khởi tạo Thư mục**: Truy tìm những cấu trúc thư mục rỗng bên trong kiến trúc `src/components` để bắt đầu dàn dựng hàng loạt đoạn mã vue từ hệ mẫu tích hợp.
+- **Nạp Mẫu Tự Động Đầu Vào**: Quá trình nhanh chóng đẩy mọi khuôn khai báo chuỗi (`ComponentDoc` hay tên danh định hiện tại `[project]`) thế vào tài nguyên chung một cách mượt mà và ẩn danh.
+
+## Nó hoạt động như thế nào?
+
+Cấu hình phân luồng này chủ động tự thay thế việc tổ chức các thư mục với lặp đi lặp lại:
+
+1. Cấu trúc `ComponentCreator` với vai trò là một luồng quét, tự động phân hóa các kiến trúc nằm tập trung chặt chẽ tại `src/components`. Nó sẽ làm nổi bật các ngăn chứa (directory) đang được cho là hoàn toàn không chứa dữ liệu.
+2. Phân tách mỗi một nhánh rỗng đó, mã sẽ điều phối kích hoạt cấp `ComponentItem`. Tại đây công cụ nạp vào những dạng thức tệp khuôn mẫu cấu trúc đã cho trước.
+3. Kế tiếp sẽ là một quy trình hoán đổi dữ liệu chuỗi ký tự cơ bản, thay thế nội dung vùng nhắm bằng dữ liệu danh xưng cấu trúc chính xác cộng hưởng cùng bối cảnh ứng dụng hiện hành. Cho ra kết quả mã hóa nguồn cơ bản dán thẳng cập nhật vào định dạng tệp chuẩn.
+
+## Cách thiết lập và khởi chạy
+
+Toàn bộ quy trình sẽ không thiết lập ràng buộc với những cấu hình phức tạp. Công cụ này chủ động phân tích tệp `package.json` của bạn nhằm trích xuất trường `name`, và nó sẽ tự động được sử dụng để đưa vào thế chỗ cho bất kỳ trình đánh dấu mẫu `[project]` nào.
+
+Với khả năng nhận diện thư mục rỗng cùng khởi động tự động toàn bộ vùng không gian làm việc, lệnh cần thiết chỉ bao gồm gọi đoạn thực thi sau:
+```bash
+npx dxt-component
+```
+
+## Cấu trúc tệp được tạo sinh
+
+Khi một thành phần mới được tự động thiết lập khung, nó sẽ kế thừa cấu trúc từ các mẫu nội bộ:
+
+- `[ComponentName].vue`: Cấu trúc thành phần Vue 3 dạng chuẩn chứa `<script setup>`, khai báo kiểu và khởi tạo sẵn `<style lang="scss">`.
+- `index.ts`: Ánh xạ luồng xuất dữ liệu cho thành phần Vue (`export const [ComponentName]`).
+- `types.ts`: Các định dạng kiểu cốt lõi TypeScript dành cho hệ `Props`, `Emits`, `Slots`, và `Defaults`.
+- `subcomponents/`: Một danh mục trống (đi kèm `.gitignore`) để sẵn sàng chứa các thành phần con cục bộ bên trong.
+- `wiki/[ComponentName].mdx`: Tệp tài liệu ghi chú Storybook chuẩn MDX gọi cấu trúc tích hợp từ `@dxtmisha/wiki/storybook`.
+- `wiki/[ComponentName].stories.ts`: Tệp mã lệnh hoạt động Storybook Vue 3 nguyên bản định danh trực quan của bản demo xuất thành phần.
+- `wiki/run.ts`: Tệp văn bản thực thi phím tắt node, ra đời nhằm kích hoạt siêu tốc chuỗi lệnh chỉ huy khởi sinh bằng AI (`dxt-component-wiki`) nhắm đích cụ thể tới duy nhất thành phần tại thư mục đó.

package/src/media/functional/scripts/bin/dxt-component-wiki/design-component-wiki.en.mdx

@@ -0,0 +1,54 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/bin/dxt-component-wiki - AI Component Docs'/>
+
+# dxt-component-wiki
+
+The `dxt-component-wiki` command provides automated generation of highly detailed AI-driven component documentation, types, and stories for the design system.
+
+## Key Features
+
+- **Granular AI File Generation**: Given a standalone component path, the AI runner can completely redefine or update standard artifacts such as `MDX` notes, `types.ts`, and `stories.ts`.
+- **Legacy Backup Mechanism**: Safely saves the preceding versions of files appending `__old.txt` when creating meaningful changes, to prevent accidental code loss.
+- **Customizable AI Instructions**: Includes the ability to append your own ad-hoc instructions to the executed prompt.
+
+## How does it work?
+
+The AI Wiki Generation flow processes an existing component path:
+1. It runs an ephemeral background compilation mapping the output to a temporary distribution environment to capture correct TypeScript behaviors.
+2. It reads your configuration parameters to locate localized system prompts (e.g., `componentPrompt.en.txt`) and synthesizes your component's real original data (MDX, vue source, storybook implementation).
+3. A single unified response from the AI model intelligently distributes new code segments via the `ComponentWikiFile` engine directly into your repository.
+
+## How to configure and run
+
+Configuration for the AI generator is defined centrally in your project's `design.config.json` file. **Create this file in the root of your project.** Follow these exact steps to set it up:
+
+1. **Set up AI parameters in `design.config.json`**:
+   Add the API key, model target, and the language specification directly to your configuration object. This `wikiLanguage` key determines both the language injected in the MDX generated and the localized system prompt target (e.g., `componentPrompt.en.txt`).
+   ```json
+   {
+     "wikiLanguage": "en",
+     "aiType": "gemini",
+     "aiModel": "gemini-2.0-flash",
+     "aiKey": "YOUR_API_KEY_HERE"
+   }
+   ```
+2. **Execute AI Generation for a Component**:
+   To analyze a specific component utilizing the AI, feed its relative path (e.g. `Button` or `MyComponent`) to the runner. You can optionally include an instructional prompt override:
+   ```bash
+   npx dxt-component-wiki <component-path> "[optional-prompt-instruction]"
+   ```
+   **Example:**
+   ```bash
+   npx dxt-component-wiki "ButtonBase" "Ensure documentation mentions it is disabled by default"
+   ```
+
+## Additional Information
+
+### Dependency on Project Build
+
+The AI generation capability deeply couples with real-time application states. It initiates `npm run build` during interpretation underneath `dist-temporary`. **If your project has preexisting TypeScript implementation failures or active build errors, the AI documentation context will systematically fail.**
+
+### Automated Backup Generation (`__old.txt`)
+
+If `ComponentWikiFile` determines that incoming documentation updates heavily differ from outgoing states, it actively replicates the former structures under the `[filename]__old.txt` format allowing roll-backs with minimal fuss.

package/src/media/functional/scripts/bin/dxt-component-wiki/design-component-wiki.ru.mdx

@@ -0,0 +1,54 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/bin/dxt-component-wiki - ИИ Документация Компонентов'/>
+
+# dxt-component-wiki
+
+Команда `dxt-component-wiki` отвечает за автоматическую генерацию детализированной MDX-документации, типов компонентов и Storybook историй с помощью ИИ для дизайн-системы.
+
+## Ключевые возможности
+
+- **Точечная AI-генерация файлов**: Учитывая путь к отдельному компоненту, генератор ИИ может полностью переопределить или обновить стандартные артефакты, такие как `MDX` заметки, `types.ts` и `stories.ts`.
+- **Резервное копирование (Legacy Backup)**: Безопасно сохраняет предыдущие версии измененных файлов, добавляя суффикс `__old.txt`, чтобы предотвратить случайную потерю кода.
+- **Настраиваемые инструкции для ИИ**: Включает возможность добавления ваших собственных точечных инструкций к выполняемому промпту ИИ при вызове команды.
+
+## Как это работает?
+
+Процесс AI Wiki генерации обрабатывает уже существующий путь компонента:
+1. Скрипт запускает временную фоновую компиляцию во временную среду дистрибуции для получения корректной информации о поведении TypeScript.
+2. Он читает конфигурацию для поиска файлов с локализованными системными промптами (например, `componentPrompt.ru.txt`) и объединяет их с вашим реальным оригинальным кодом компонента (MDX, исходники vue, истории storybook).
+3. Единый комплексный ответ от ИИ-модели интеллектуально распределяет новые фрагменты кода прямо в ваш репозиторий при помощи движка `ComponentWikiFile`.
+
+## Настройка и запуск
+
+Конфигурация генератора ИИ определяется централизованно в файле `design.config.json` вашего проекта. **Создайте этот файл в корне вашего проекта.** Выполните эти точные шаги для настройки:
+
+1. **Настройте параметры ИИ в `design.config.json`**:
+   Добавьте ключ API, целевую модель и язык документации напрямую в конфигурационный объект. Важно отметить, что `wikiLanguage` определяет не только язык текста, но и какой базовый промпт загрузит система (например, `componentPrompt.ru.txt`).
+   ```json
+   {
+     "wikiLanguage": "ru",
+     "aiType": "gemini",
+     "aiModel": "gemini-2.0-flash",
+     "aiKey": "ВАШ_API_КЛЮЧ"
+   }
+   ```
+2. **Запуск AI-документирования для компонента**:
+   Для анализа конкретного компонента с помощью ИИ, передайте генератору его относительный путь (например, `Button`). Вы можете опционально включить дополнительные инструкции для промпта:
+   ```bash
+   npx dxt-component-wiki <component-path> "[optional-prompt-instruction]"
+   ```
+   **Пример:**
+   ```bash
+   npx dxt-component-wiki "ButtonBase" "Убедись, что в документации указано, что он отключен по умолчанию"
+   ```
+
+## Дополнительная информация
+
+### Зависимость от сборки проекта
+
+Генерация через ИИ глубоко связана со сборкой приложения в реальном времени. Скрипт инициирует `npm run build` во временную папку `dist-temporary`. **Если в вашем проекте есть ошибки компиляции TypeScript, то генерация контекста для ИИ систематически завершится сбоем.**
+
+### Автоматическое создание бэкапов (`__old.txt`)
+
+Если `ComponentWikiFile` определяет, что применяемые ИИ обновления сильно отличаются от оригинальных исходных данных, механизм активно делает резервную копию файлов в формате `[filename]__old.txt`, что позволяет произвести откат без лишних сложностей.

package/src/media/functional/scripts/bin/dxt-component-wiki/design-component-wiki.vi.mdx

@@ -0,0 +1,54 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/bin/dxt-component-wiki - Tài Liệu Thành Phần Bằng AI'/>
+
+# dxt-component-wiki
+
+Lệnh `dxt-component-wiki` chịu trách nhiệm tự động hóa việc tạo ra các tài liệu AI chuyên sâu bao gồm tài liệu định dạng MDX, khai báo TypeScript theo loại (`types.ts`) và các bản phân tích Storybook cho hệ thống thiết kế.
+
+## Các tính năng chính
+
+- **Sinh Tệp Phân mảnh bằng AI**: Với một đường dẫn đến các thành phần gốc, bộ thực thi AI có khả năng định nghĩa hoàn toàn mới hoặc cập nhật thông minh cho những tệp định hướng tiêu chuẩn như ghi chú `MDX`, cấu trúc `types.ts`, hay `stories.ts`.
+- **Cơ chế Sao lưu Kế thừa**: Tiện ích lưu trữ an toàn các phiên bản trước được thay thế của tệp bằng cách gán thêm hậu tố `__old.txt` mỗi khi có những biến đổi dữ liệu, ngăn chặn sự mất mát mã nguồn vô ý.
+- **Tùy biến Thao tác AI**: Bao gồm khả năng tích hợp sẵn nhằm dễ dàng đính kèm lệnh hoặc dòng mô tả bổ sung của người dùng vào với câu lện prompt trước khi thực thi.
+
+## Nó hoạt động như thế nào?
+
+Luồng Tạo sinh Tài liệu AI xử lý dựa trên một đường dẫn thành phần đã có hiệu lực từ trước:
+1. Nó chạy tiến trình nền thiết kế mô phỏng nhằm đồng bộ tài nguyên xuất ra một hệ sinh thái phân phối tạm thời. Cho phép hệ thống ghi chú chính xác các hành vi của TypeScript.
+2. Nó truy vấn cấu hình cài đặt của bạn thông qua vị trí tệp để đặt bộ định dạng ngôn ngữ nội bộ cho prompt (ví dụ: `componentPrompt.vi.txt`) cũng như tổng hợp cả dữ liệu thực sự nguyên bản (Ghi chú MDX, nguồn Vue gốc, việc xây dựng mẫu storybook).
+3. Một hồi đáp hợp nhất được gửi về từ mô hình ngôn ngữ lớn có khả năng chia tách các phân đoạn mã hóa mới trên bộ trích xuất `ComponentWikiFile` trực tiếp đổ vào bên trong hệ thống kho lưu trữ của bạn.
+
+## Cách thiết lập và khởi chạy
+
+Cấu hình của trình tạo AI được định nghĩa tập trung trong tệp `design.config.json` của dự án của bạn. **Hãy tạo tệp này tại thư mục gốc của dự án.** Làm theo các bước sau để thiết lập:
+
+1. **Thiết lập các tham số AI trong `design.config.json`**:
+   Bạn cần thêm trực tiếp khóa API (API key), loại mô hình mục tiêu và ngôn ngữ tạo tài liệu vào trong đối tượng cấu hình dự án. Tham số `wikiLanguage` chịu trách nhiệm quy định cả ngôn ngữ phân tích bên trong MDX và cả câu lệnh (prompt) cơ sở tự động được triệu hồi cho riêng ngôn ngữ đó (ví dụ, `componentPrompt.vi.txt`).
+   ```json
+   {
+     "wikiLanguage": "vi",
+     "aiType": "gemini",
+     "aiModel": "gemini-2.0-flash",
+     "aiKey": "API_KEY_CUA_BAN"
+   }
+   ```
+2. **Thực thi Tạo sinh Tài liệu AI đối với một thành phần**:
+   Trong tình huống cần phân tích qua AI đối với 1 thành phần cụ thể, vui lòng đáp ứng tên của đường dẫn tương đối trỏ đến nó (ví dụ như `Button`). Bên cạnh đó, bạn cũng có quyền tùy chọn đính kèm riêng chỉ thị thông qua thông số tùy biến cuối:
+   ```bash
+   npx dxt-component-wiki <component-path> "[optional-prompt-instruction]"
+   ```
+   **Ví dụ:**
+   ```bash
+   npx dxt-component-wiki "ButtonBase" "Hãy đảm bảo rằng tài liệu đề cập đến việc nó bị vô hiệu hóa (disabled) theo mặc định"
+   ```
+
+## Thông tin chi tiết bổ sung
+
+### Phụ thuộc vào quá trình Biên dịch cấu trúc hệ thống
+
+Khả năng sinh tự động với bộ chứa dữ liệu AI phối hợp cực kỳ chặt chẽ với những trạng thái chương trình thời gian thực. Theo đó kĩ thuật sẽ khởi tạo ra luồng thông dịch `npm run build` trong suốt môi trường chạy `dist-temporary`. **Nếu dự án hiện tại rơi vào thất bại từ quá trình biên dịch dữ liệu hay cấu trúc TypeScript của hệ thống sinh ra lỗi chập chội bất kỳ, tài nguyên thực thi văn cảnh tài liệu tự sinh bởi AI đó sẽ ngay lập tức đối mặt với thất bại lỗi toàn tập.**
+
+### Sinh cơ chế Lưu Trữ Tự động (`__old.txt`)
+
+Ngay khi cơ chế của tệp `ComponentWikiFile` kết luận rằng sự đổi mới đến từ tài nguyên sau khi xử lý chênh lệch tính phân bổ về mã với độ đậm khác xa so với cấu tạo sẵn có. Một mô hình hoạt động thông minh sẽ tích cực lưu giữ lại thực thể dữ liệu gốc với đuôi mở rộng dưới dạng `[tên_tệp]__old.txt` thiết lập nên khả năng quay về phương pháp mã hồi phục (roll-back) không phức tạp nào.

package/src/media/functional/scripts/classes/AiAbstract/AiAbstract.en.mdx

@@ -0,0 +1,88 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/AiAbstract - Abstract AI Base Class'/>
+
+# AiAbstract Class
+
+An abstract base class designed to provide common mechanics for various AI integrations. It handles prompt accumulation, model selection, and provides a unified workflow for receiving responses from different AI providers.
+
+## Key Features
+
+- **Prompt Accumulation** — mechanisms to collect and compose prompt context before sending it to the model.
+- **Model Management** — easy switching between different AI models within the same instance.
+- **Unified Workflow** — a standardized `generate` method that normalizes the process of getting a response.
+- **Image & Content Support** — built-in methods to accumulate images and additional text contents for multimodal models.
+- **Chainable API** — most configuration methods support chaining for a more fluent developer experience.
+- **Implementation Hooks** — clear extension points (`init`, `response`, `toImages`, `toContents`) for concrete AI service implementations (e.g., OpenAI, Anthropic).
+
+## Initialization
+
+Since `AiAbstract` is an abstract class, it cannot be instantiated directly. You should use a concrete implementation (e.g., `AiOpenAI` or `AiAnthropic`).
+
+**Constructor Parameters:**
+- `key: string` — The API key for the AI service.
+- `model: string` — The initial model identifier (e.g., 'gpt-4o').
+
+```typescript
+// Example of a concrete implementation usage
+const ai = new AiOpenAI(process.env.OPENAI_API_KEY, 'gpt-4o')
+
+// Adding context
+ai.addPrompt('You are a helpful assistant.')
+  .addContent('Explain quantum physics in simple terms.')
+
+// Generating response
+const response = await ai.generate('Focus on wave-particle duality.')
+```
+
+## Methods
+
+### Information
+
+- `getImages(): AiImageList` — Returns the list of accumulated images.
+- `getContents(): string[]` — Returns the list of accumulated additional contents.
+
+### Configuration (Setters)
+
+Methods in this group support chaining.
+
+- `setKey(key: string): this` — Sets or switches the API key. Re-initializes the client if it's already active.
+- `setModel(model: string): this` — Switches the current model for generation.
+- `addPrompt(prompt: string): void` — Appends a new line to the persistent prompt buffer.
+- `addImage(image: AiImageItem): this` — Adds an image to the accumulation list.
+- `addContent(content: string): this` — Adds text content to the accumulation list.
+
+### Control
+
+- `generate(contents: string): Promise<string>` — The main method to trigger AI generation. It combines the accumulated prompt and the provided string, then calls the concrete implementation.
+- `resetImages(): this` — Clears the accumulated image list.
+- `resetContents(): this` — Clears the accumulated contents.
+- `resetPrompt(): void` — Clears the persistent prompt prefix.
+
+## Abstract Methods (Implementation)
+
+When extending `AiAbstract`, you must implement the following protected methods:
+
+- `init(): void` — Handle client initialization, authentication, and transport setup.
+- `toImages(): void` — Logic to convert accumulated images to a provider-specific format.
+- `toContents(): void` — Logic to convert accumulated contents to a provider-specific format.
+- `response(model: string, contents: string): Promise<string>` — The core logic to invoke the specific AI model and return the result as a string.
+
+## Types
+
+### AiImageList
+An array of `AiImageItem` objects.
+```typescript
+type AiImageList = AiImageItem[]
+```
+
+### AiImageItem
+Represents an image in base64 format.
+- `mime: string` — The MIME type of the image (e.g., 'image/png').
+- `base64: string` — The base64 encoded image data.
+```typescript
+type AiImageItem = {
+  mime: string
+  base64: string
+}
+```