@dxtmisha/wiki 0.25.1 → 0.39.2

package/src/media/functional/scripts/classes/DesignComponent/DesignComponent.ru.mdx

@@ -0,0 +1,60 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/DesignComponent - Генератор компонентов дизайна'/>
+
+# Класс DesignComponent
+
+Класс `DesignComponent` — это специализированная реализация `DesignCommand`, предназначенная для автоматизированного создания и обслуживания компонентов дизайн-системы. Он координирует генерацию множества типов файлов — от стилей и логики компонентов до документации и метаданных интеграции.
+
+## Ключевые особенности
+
+- **Полный цикл развертывания** — автоматически генерирует более 10 основных файлов для нового компонента (Vue, SCSS, TS, MDX).
+- **Интеллектуальное разрешение свойств** — использует `DesignTypescript` для внедрения свойств компонентов непосредственно в сгенерированные файлы.
+- **Автоматизация Storybook** — генерирует файлы `.stories.ts` и `.mdx` с автоматическим разрешением рендеринга и импорта.
+- **AI-усиленная Вики** — создает специальные сопутствующие компоненты для поиска и отображения документации с помощью ИИ.
+- **Интеграция с воркспейсом** — бесшовно регистрирует новые компоненты в корневом `package.json` и в глобальном списке экспорта библиотеки.
+- **Маппинг стилевых токенов** — автоматически преобразует структуры проекта в SCSS-токены стилей.
+
+## Инициализация
+
+Для инициализации экземпляра генератора используйте конструктор. Он настраивает целевую директорию на основе конфигурации проекта.
+
+**Параметры:**
+- `command: string` — идентификатор компонента (например, `'button'`, `'input'`).
+- `options: Record<string, string>` — необязательные конфигурационные флаги.
+
+```typescript
+import { DesignComponent } from '@dxtmisha/scripts'
+
+const generator = new DesignComponent('button')
+generator.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): void` — запускает комплексный процесс генерации для всех файлов, связанных с компонентом.
+
+## Операции
+
+### Структура генерируемых файлов
+
+При выполнении `make()` внутри директории компонента создается или обновляется следующая иерархия файлов:
+
+- `properties.json` — хранит основные данные маппинга для компонента.
+- `props.ts` — TypeScript-определение пропсов компонента, разрешенное из шаблонов конструктора.
+- `styleToken.scss` — токены стилей SCSS на основе структуры дизайна компонента.
+- `[Name].vue` — основной файл компонента Vue с предварительно настроенными классами и стилями.
+- `[Name]AiWiki.vue` — сопутствующий компонент для AI-усиленной вики-документации.
+- `index.ts` — точка входа компонента для публичного экспорта.
+- `wiki.ts` и `wikiData.ts` — метаданные и структурированная информация о свойствах для сайта документации.
+- `[Name].stories.ts` — автоматизированные истории Storybook с динамическим разрешением компонентов.
+- `[Name].mdx` — MDX-документация для Storybook с предварительно заполненными слотами и данными пропсов.
+
+### Процесс интеграции
+
+Класс обеспечивает полную интеграцию нового компонента в среду дизайн-системы:
+1. **Обновление пакета**: добавляет запись в корневой `package.json` в секцию `exports`.
+2. **Экспорт библиотеки**: создает прокси-файл в директории библиотеки для обеспечения возможности глобального импорта компонентов.
+3. **Сопоставление описаний Вики**: сканирует `wikiDescriptions` для автоматического заполнения историй Storybook соответствующими примерами.

package/src/media/functional/scripts/classes/DesignComponent/DesignComponent.vi.mdx

@@ -0,0 +1,60 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/DesignComponent - Trình tạo thành phần thiết kế'/>
+
+# Lớp DesignComponent
+
+Lớp `DesignComponent` là một triển khai chuyên biệt của `DesignCommand` dành riêng cho việc tự động tạo và bảo trì các thành phần hệ thống thiết kế. Nó điều phối việc tạo ra đa dạng các loại tệp — từ kiểu dáng và logic thành phần đến tài liệu và siêu dữ liệu tích hợp.
+
+## Các tính năng chính
+
+- **Tạo khung đầy đủ (Full-Cycle Scaffolding)** — Tự động tạo hơn 10 tệp thiết yếu cho một thành phần mới (Vue, SCSS, TS, MDX).
+- **Phân giải thuộc tính thông minh** — Sử dụng `DesignTypescript` để đưa các thuộc tính (props) của thành phần trực tiếp vào các tệp được tạo.
+- **Tự động hóa Storybook** — Tạo các tệp `.stories.ts` và `.mdx` với tính năng tự động phân giải render và import.
+- **Wiki tăng cường AI** — Tạo các thành phần bổ trợ chuyên biệt để tìm kiếm và hiển thị tài liệu do AI hỗ trợ.
+- **Tích hợp Workspace** — Đăng ký các thành phần mới một cách liền mạch trong tệp `package.json` gốc và danh sách xuất bản toàn cầu của thư viện.
+- **Ánh xạ Style Token** — Tự động chuyển đổi cấu trúc dự án thành các style token SCSS.
+
+## Khởi tạo
+
+Để khởi tạo một thực thể trình tạo, hãy sử dụng hàm khởi tạo. Lưu ý rằng nó sẽ thiết lập thư mục mục tiêu dựa trên cấu hình dự án.
+
+**Tham số:**
+- `command: string` — Mã định danh cho thành phần (ví dụ: `'button'`, `'input'`).
+- `options: Record<string, string>` — Các cờ cấu hình tùy chọn.
+
+```typescript
+import { DesignComponent } from '@dxtmisha/scripts'
+
+const generator = new DesignComponent('button')
+generator.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): void` — Bắt đầu quá trình tạo toàn diện cho tất cả các tệp liên quan đến thành phần.
+
+## Các thao tác (Operations)
+
+### Cấu trúc các tệp được tạo
+
+Khi `make()` được thực thi, hệ thống phân cấp tệp sau sẽ được tạo hoặc cập nhật trong thư mục của thành phần:
+
+- `properties.json` — Lưu trữ dữ liệu ánh xạ chính cho thành phần.
+- `props.ts` — Định nghĩa TypeScript cho các props của thành phần, được phân giải từ các mẫu constructor.
+- `styleToken.scss` — Các style token SCSS dựa trên cấu trúc thiết kế của thành phần.
+- `[Name].vue` — Tệp thành phần Vue chính với các lớp và kiểu dáng được cấu hình sẵn.
+- `[Name]AiWiki.vue` — Thành phần hỗ trợ cho tài liệu wiki tăng cường AI.
+- `index.ts` — Điểm nhập của thành phần cho các xuất bản công khai.
+- `wiki.ts` & `wikiData.ts` — Siêu dữ liệu và thông tin thuộc tính có cấu trúc cho trang web tài liệu.
+- `[Name].stories.ts` — Các câu chuyện Storybook tự động với phân giải thành phần động.
+- `[Name].mdx` — Tài liệu Markdown cho Storybook với các slot và dữ liệu props được điền sẵn.
+
+### Quy trình tích hợp
+
+Lớp này đảm bảo rằng thành phần mới được tích hợp hoàn toàn vào môi trường hệ thống thiết kế:
+1. **Cập nhật gói**: Thêm một mục vào `package.json` gốc trong phần `exports`.
+2. **Xuất bản thư viện**: Tạo một tệp proxy trong thư mục thư viện để cho phép nhập thành phần toàn cầu.
+3. **Khớp mô tả Wiki**: Quét `wikiDescriptions` để tự động điền các câu chuyện Storybook với các ví dụ liên quan.

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

@@ -0,0 +1,58 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/DesignConstructor - Design Constructor Generator'/>
+
+# DesignConstructor Class
+
+The `DesignConstructor` class is a specialized implementation of `DesignCommand` focused on generating the internal logic and "constructors" for components. It automates the creation of property definitions, TypeScript types, and styling hooks that form the foundation of a component's behavioral layer.
+
+## Key Features
+
+- **Constructor Scaffolding** — Automatically generates the entire file set required for a component's behavioral logic.
+- **Type Safety Automation** — Generates `props.ts`, `types.ts`, and `basicTypes.ts` to ensure strict typing across the component.
+- **Styling Foundation** — Creates the initial `style.scss` file compatible with the constructor's class system.
+- **Unified Logic Generation** — Produces both `.ts` and `.tsx` files for flexible component logic implementation.
+- **System Integration** — Automatically updates `package.json` and creates library exports for the new constructor.
+
+## Initialization
+
+To initialize a generator instance, use the constructor. It automatically resolves the target directory within the `src/constructors` folder.
+
+**Parameters:**
+- `command: string` — The unique identifier for the component (e.g., `'button'`, `'list'`).
+- `options: Record<string, string>` — Optional configuration key-value pairs.
+
+```typescript
+import { DesignConstructor } from '@dxtmisha/scripts'
+
+const generator = new DesignConstructor('button')
+generator.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): void` — Executes the full sequence of directory creation, file generation, and system registration.
+
+## Operations
+
+### Generated Files Structure
+
+When initialized, `DesignConstructor` processes several template-driven files:
+
+- `properties.json` — Mapping configuration for the constructor's internal properties.
+- `props.ts` — Property definitions including types and default values.
+- `types.ts` & `basicTypes.ts` — TypeScript interfaces and type definitions for component state and configuration.
+- `style.scss` — Initial style definitions linked to the constructor's class structure.
+- `Constructors.ts` — The main logic implementation file.
+- `ConstructorsDesign.tsx` — The visual/render layer implementation using TSX.
+- `index.ts` — The entry point for the constructor's exports.
+
+### Lifecycle of Execution
+
+The `make()` process executes in a precise order to maintain data integrity:
+1. **Directory Setup**: Resolves and confirms the target path in the `src/constructors` directory.
+2. **File Generation**: Sequentially calls specialized `make[File]()` methods to transform templates into project code.
+3. **Internal Integration**: Updates the project's root `package.json` mapping to expose the new constructor.
+4. **Library Publication**: Generates an export file in the library's root directory to enable global consumption.

package/src/media/functional/scripts/classes/DesignConstructor/DesignConstructor.ru.mdx

@@ -0,0 +1,58 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/DesignConstructor - Генератор конструктора дизайна'/>
+
+# Класс DesignConstructor
+
+Класс `DesignConstructor` — это специализированная реализация `DesignCommand`, ориентированная на генерацию внутренней логики и «конструкторов» компонентов. Он автоматизирует создание определений свойств, типов TypeScript и стилевых хуков, которые формируют основу поведенческого слоя компонента.
+
+## Ключевые особенности
+
+- **Развертывание конструктора** — автоматически генерирует полный набор файлов, необходимых для реализации поведенческой логики компонента.
+- **Автоматизация типизации** — создает `props.ts`, `types.ts` и `basicTypes.ts` для обеспечения строгой типизации всех частей компонента.
+- **Стилевой фундамент** — создает начальный файл `style.scss`, совместимый с системой классов конструктора.
+- **Генерация унифицированной логики** — создает файлы `.ts` и `.tsx` для гибкой реализации логики компонентов.
+- **Системная интеграция** — автоматически обновляет `package.json` и создает экспорты библиотеки для нового конструктора.
+
+## Инициализация
+
+Для инициализации экземпляра генератора используйте конструктор. Он автоматически определяет целевую директорию внутри папки `src/constructors`.
+
+**Параметры:**
+- `command: string` — уникальный идентификатор компонента (например, `'button'`, `'list'`).
+- `options: Record<string, string>` — дополнительные параметры конфигурации в формате ключ-значение.
+
+```typescript
+import { DesignConstructor } from '@dxtmisha/scripts'
+
+const generator = new DesignConstructor('button')
+generator.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): void` — запускает полную последовательность создания директорий, генерации файлов и системной регистрации.
+
+## Операции
+
+### Структура генерируемых файлов
+
+При инициализации `DesignConstructor` обрабатывает несколько файлов на основе шаблонов:
+
+- `properties.json` — конфигурация маппинга для внутренних свойств конструктора.
+- `props.ts` — определения свойств, включая типы и значения по умолчанию.
+- `types.ts` и `basicTypes.ts` — интерфейсы TypeScript и определения типов для состояния и конфигурации компонента.
+- `style.scss` — начальные определения стилей, связанные со структурой классов конструктора.
+- `Constructors.ts` — основной файл реализации логики.
+- `ConstructorsDesign.tsx` — реализация визуального слоя/рендеринга с использованием TSX.
+- `index.ts` — точка входа для экспортов конструктора.
+
+### Жизненный цикл выполнения
+
+Процесс `make()` выполняется в строгом порядке для сохранения целостности данных:
+1. **Настройка директорий**: определяет и подтверждает целевой путь в директории `src/constructors`.
+2. **Генерация файлов**: последовательно вызывает специализированные методы `make[File]()` для преобразования шаблонов в код проекта.
+3. **Внутренняя интеграция**: обновляет `package.json` проекта для предоставления доступа к новому конструктору.
+4. **Публикация библиотеки**: генерирует файл экспорта в корневой директории библиотеки для обеспечения глобального использования.

package/src/media/functional/scripts/classes/DesignConstructor/DesignConstructor.vi.mdx

@@ -0,0 +1,58 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/DesignConstructor - Trình tạo hàm khởi tạo thiết kế'/>
+
+# Lớp DesignConstructor
+
+Lớp `DesignConstructor` là một triển khai chuyên biệt của `DesignCommand` tập trung vào việc tạo logic nội bộ và các "constructor" cho các thành phần. Nó tự động hóa việc tạo các định nghĩa thuộc tính, loại TypeScript và các điểm nối (hooks) kiểu dáng hình thành nên nền tảng của lớp hành vi của thành phần.
+
+## Các tính năng chính
+
+- **Tạo khung Constructor** — Tự động tạo toàn bộ bộ tệp cần thiết cho logic hành vi của thành phần.
+- **Tự động hóa an toàn kiểu (Type Safety)** — Tạo các tệp `props.ts`, `types.ts` và `basicTypes.ts` để đảm bảo định kiểu nghiêm ngặt trong toàn bộ thành phần.
+- **Nền tảng kiểu dáng** — Tạo tệp `style.scss` ban đầu tương thích với hệ thống lớp của constructor.
+- **Tạo logic thống nhất** — Tạo cả tệp `.ts` và `.tsx` để triển khai logic thành phần linh hoạt.
+- **Tích hợp hệ thống** — Tự động cập nhật `package.json` và tạo các xuất bản thư viện cho constructor mới.
+
+## Khởi tạo
+
+Để khởi tạo một thực thể trình tạo, hãy sử dụng hàm khởi tạo. Nó tự động phân giải thư mục mục tiêu trong thư mục `src/constructors`.
+
+**Tham số:**
+- `command: string` — Mã định danh duy nhất cho thành phần (ví dụ: `'button'`, `'list'`).
+- `options: Record<string, string>` — Các cặp khóa-giá trị cấu hình tùy chọn.
+
+```typescript
+import { DesignConstructor } from '@dxtmisha/scripts'
+
+const generator = new DesignConstructor('button')
+generator.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): void` — Thực hiện toàn bộ chuỗi tạo thư mục, tạo tệp và đăng ký hệ thống.
+
+## Các thao tác (Operations)
+
+### Cấu trúc các tệp được tạo
+
+Khi được khởi tạo, `DesignConstructor` xử lý một số tệp do mẫu điều khiển:
+
+- `properties.json` — Cấu hình ánh xạ cho các thuộc tính nội bộ của constructor.
+- `props.ts` — Định nghĩa thuộc tính bao gồm các kiểu và giá trị mặc định.
+- `types.ts` & `basicTypes.ts` — Các giao diện TypeScript và định nghĩa kiểu cho trạng thái và cấu hình thành phần.
+- `style.scss` — Định nghĩa kiểu dáng ban đầu được liên kết với cấu trúc lớp của constructor.
+- `Constructors.ts` — Tệp triển khai logic chính.
+- `ConstructorsDesign.tsx` — Triển khai lớp hiển thị/render bằng TSX.
+- `index.ts` — Điểm nhập cho các xuất bản của constructor.
+
+### Vòng đời thực thi
+
+Quy trình `make()` thực thi theo một thứ tự chính xác để duy trì tính toàn vẹn của dữ liệu:
+1. **Thiết lập thư mục**: Phân giải và xác nhận đường dẫn mục tiêu trong thư mục `src/constructors`.
+2. **Tạo tệp**: Lần lượt gọi các phương thức `make[File]()` chuyên biệt để chuyển đổi các mẫu thành mã dự án.
+3. **Tích hợp nội bộ**: Cập nhật tệp `package.json` gốc của dự án để hiển thị constructor mới.
+4. **Xuất bản thư viện**: Tạo một tệp xuất bản trong thư mục gốc của thư viện để cho phép sử dụng toàn cầu.

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

@@ -0,0 +1,62 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/DesignConstructors - Design Constructors Manager'/>
+
+# DesignConstructors Class
+
+The `DesignConstructors` class serves as a high-level orchestrator for managing all component constructors within the design system. It handles bulk operations, such as updating all existing constructors at once, and manages the consolidation of component styles into the global library exports.
+
+## Key Features
+
+- **Bulk Lifecycle Management** — Can trigger updates for all components in the `constructors` directory or target a specific one.
+- **Cache Management** — Automatically clears property caches before starting the generation process to ensure data freshity.
+- **Automated Style Consolidation** — Scans all components and generates a centralized SCSS entry point for the global library.
+- **Directory Discovery** — Automatically identifies all component constructors located in the system's source path.
+
+## Initialization
+
+To initialize the manager, use the constructor. If a name is provided, operations will be restricted to that specific component.
+
+**Parameters:**
+- `name?: string` — Optional unique identifier of a component to process.
+
+```typescript
+import { DesignConstructors } from '@dxtmisha/scripts'
+
+// Manager for all constructors
+const manager = new DesignConstructors()
+manager.make()
+
+// Manager for a specific component
+const buttonManager = new DesignConstructors('button')
+buttonManager.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): void` — Starts the generation or update process for one or all identified constructors and refreshes global styles.
+
+### Information
+
+- `getComponents(): string[]` — Returns a list of all component identifiers found in the constructors directory.
+- `getComponentsStyle(): string[]` — Returns an array of SCSS `@forward` statements for all registered components.
+
+## Operations
+
+### Global Style Generation
+
+One of the primary responsibilities of this class is maintaining the `style.scss` file in the library root. The `makeStyle()` method performs the following:
+1. **Scanning**: It retrieves a list of all components via `getComponents()`.
+2. **Path Mapping**: It constructs `@forward` rules pointing to each component's individual style file.
+3. **Writing**: It writes these rules into the centralized `packages/library/style.scss` file, ensuring that the entire design system's styles are accessible through a single import.
+
+### Execution Workflow
+
+When `make()` is called, the class follows this sequence:
+1. **Cleanup**: It clears the `PropertiesCache` to prevent stale data from affecting the output.
+2. **Delegation**: 
+    - If a `name` was provided during initialization, it creates a new `DesignConstructor` for that component and calls its `make()` method.
+    - If no `name` was provided, it iterates through all discovered components, creating a `DesignConstructor` for each and triggering their updates.
+3. **Consolidation**: Finally, it calls `makeStyle()` to synchronize the global style exports with the current component list.

package/src/media/functional/scripts/classes/DesignConstructors/DesignConstructors.ru.mdx

@@ -0,0 +1,62 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/DesignConstructors - Менеджер конструкторов дизайна'/>
+
+# Класс DesignConstructors
+
+Класс `DesignConstructors` выступает в роли высокоуровневого оркестратора для управления всеми конструкторами компонентов внутри дизайн-системы. Он обрабатывает массовые операции, такие как одновременное обновление всех существующих конструкторов, и управляет объединением стилей компонентов в глобальные экспорты библиотеки.
+
+## Ключевые особенности
+
+- **Массовое управление жизненным циклом** — может запускать обновления для всех компонентов в директории `constructors` или целевое обновление для конкретного компонента.
+- **Управление кэшем** — автоматически очищает кэш свойств перед началом процесса генерации для обеспечения актуальности данных.
+- **Автоматическое объединение стилей** — сканирует все компоненты и генерирует централизованную точку входа SCSS для глобальной библиотеки.
+- **Обнаружение директорий** — автоматически идентифицирует все конструкторы компонентов, расположенные в исходном пути системы.
+
+## Инициализация
+
+Для инициализации менеджера используйте конструктор. Если имя передано, операции будут ограничены этим конкретным компонентом.
+
+**Параметры:**
+- `name?: string` — необязательный уникальный идентификатор компонента для обработки.
+
+```typescript
+import { DesignConstructors } from '@dxtmisha/scripts'
+
+// Менеджер для всех конструкторов
+const manager = new DesignConstructors()
+manager.make()
+
+// Менеджер для конкретного компонента
+const buttonManager = new DesignConstructors('button')
+buttonManager.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): void` — запускает процесс генерации или обновления для одного или всех идентифицированных конструкторов и обновляет глобальные стили.
+
+### Информация
+
+- `getComponents(): string[]` — возвращает список всех идентификаторов компонентов, найденных в директории конструкторов.
+- `getComponentsStyle(): string[]` — возвращает массив инструкций SCSS `@forward` для всех зарегистрированных компонентов.
+
+## Операции
+
+### Генерация глобальных стилей
+
+Одной из основных обязанностей этого класса является поддержка файла `style.scss` в корне библиотеки. Метод `makeStyle()` выполняет следующее:
+1. **Сканирование**: получает список всех компонентов через `getComponents()`.
+2. **Маппинг путей**: конструирует правила `@forward`, указывающие на файл стилей каждого отдельного компонента.
+3. **Запись**: записывает эти правила в централизованный файл `packages/library/style.scss`, обеспечивая доступность стилей всей дизайн-системы через один импорт.
+
+### Рабочий процесс выполнения
+
+При вызове `make()` класс следует этой последовательности:
+1. **Очистка**: очищает `PropertiesCache`, чтобы предотвратить влияние устаревших данных на результат.
+2. **Делегирование**: 
+    - Если при инициализации было передано `name`, создается новый `DesignConstructor` для этого компонента и вызывается его метод `make()`.
+    - Если `name` не было передано, класс перебирает все обнаруженные компоненты, создавая `DesignConstructor` для каждого и запуская их обновление.
+3. **Объединение**: в завершение вызывается `makeStyle()` для синхронизации глобальных экспортов стилей с актуальным списком компонентов.

package/src/media/functional/scripts/classes/DesignConstructors/DesignConstructors.vi.mdx

@@ -0,0 +1,62 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/DesignConstructors - Trình quản lý các hàm khởi tạo thiết kế'/>
+
+# Lớp DesignConstructors
+
+Lớp `DesignConstructors` đóng vai trò là trình điều phối cấp cao để quản lý tất cả các constructor của thành phần trong hệ thống thiết kế. Nó xử lý các hoạt động hàng loạt, chẳng hạn như cập nhật tất cả các constructor hiện có cùng một lúc và quản lý việc hợp nhất các kiểu dáng thành phần vào các xuất bản thư viện toàn cầu.
+
+## Các tính năng chính
+
+- **Quản lý vòng đời hàng loạt** — Có thể kích hoạt cập nhật cho tất cả các thành phần trong thư mục `constructors` hoặc nhắm mục tiêu vào một thành phần cụ thể.
+- **Quản lý bộ nhớ đệm (Cache)** — Tự động xóa bộ nhớ đệm thuộc tính trước khi bắt đầu quá trình tạo để đảm bảo dữ liệu luôn mới.
+- **Hợp nhất kiểu dáng tự động** — Quét tất cả các thành phần và tạo một điểm nhập SCSS tập trung cho thư viện toàn cầu.
+- **Khám phá danh mục** — Tự động xác định tất cả các constructor thành phần nằm trong đường dẫn nguồn của hệ thống.
+
+## Khởi tạo
+
+Để khởi tạo trình quản lý, hãy sử dụng hàm khởi tạo. Nếu một tên được cung cấp, các hoạt động sẽ bị giới hạn ở thành phần cụ thể đó.
+
+**Tham số:**
+- `name?: string` — Mã định danh duy nhất tùy chọn của một thành phần cần xử lý.
+
+```typescript
+import { DesignConstructors } from '@dxtmisha/scripts'
+
+// Trình quản lý cho tất cả các constructor
+const manager = new DesignConstructors()
+manager.make()
+
+// Trình quản lý cho một thành phần cụ thể
+const buttonManager = new DesignConstructors('button')
+buttonManager.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): void` — Bắt đầu quá trình tạo hoặc cập nhật cho một hoặc tất cả các constructor được xác định và làm mới các kiểu dáng toàn cục.
+
+### Thông tin
+
+- `getComponents(): string[]` — Trả về danh sách tất cả các mã định danh thành phần được tìm thấy trong thư mục constructors.
+- `getComponentsStyle(): string[]` — Trả về một mảng các câu lệnh SCSS `@forward` cho tất cả các thành phần đã đăng ký.
+
+## Các thao tác (Operations)
+
+### Tạo kiểu dáng toàn cục (Global Style Generation)
+
+Một trong những trách nhiệm chính của lớp này là duy trì tệp `style.scss` trong thư mục gốc của thư viện. Phương thức `makeStyle()` thực hiện các công việc sau:
+1. **Quét**: Lấy danh sách tất cả các thành phần thông qua `getComponents()`.
+2. **Ánh xạ đường dẫn**: Xây dựng các quy tắc `@forward` trỏ đến tệp kiểu dáng riêng lẻ của mỗi thành phần.
+3. **Ghi tệp**: Ghi các quy tắc này vào tệp `packages/library/style.scss` tập trung, đảm bảo rằng các kiểu dáng của toàn bộ hệ thống thiết kế có thể truy cập được thông qua một lần nhập (import) duy nhất.
+
+### Quy trình thực thi
+
+Khi `make()` được gọi, lớp sẽ tuân theo trình tự sau:
+1. **Dọn dẹp**: Xóa `PropertiesCache` để ngăn dữ liệu cũ ảnh hưởng đến kết quả đầu ra.
+2. **Ủy quyền**: 
+    - Nếu `name` được cung cấp trong quá trình khởi tạo, nó sẽ tạo một `DesignConstructor` mới cho thành phần đó và gọi phương thức `make()` của nó.
+    - Nếu không có `name` nào được cung cấp, nó sẽ lặp qua tất cả các thành phần được phát hiện, tạo một `DesignConstructor` cho mỗi thành phần và kích hoạt các bản cập nhật của chúng.
+3. **Hợp nhất**: Cuối cùng, nó gọi `makeStyle()` để đồng bộ hóa các xuất bản kiểu dáng toàn cục với danh sách thành phần hiện tại.

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

@@ -0,0 +1,59 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/DesignFlags - Flag Sprite Generator'/>
+
+# DesignFlags Class
+
+The `DesignFlags` class provides an automated solution for generating optimized image sprites from a collection of SVG flag icons. It handles the canvas-based rendering, grid layout calculation, and the generation of CSS mapping files for efficient icon display using background positioning.
+
+## Key Features
+
+- **Automated Sprite Assembly** — Combines multiple individual SVG files into a single optimized `.webp` sprite.
+- **Dynamic CSS Generation** — Automatically produces utility classes with precise `background-position` values for every flag.
+- **Configurable Grid Layout** — Allows customization of flag dimensions and the number of columns in the resulting image.
+- **Canvas-Powered Rendering** — Uses high-performance image processing for smooth conversion and scaling.
+- **Aspect Ratio Maintenance** — Ensures flags are centered within their grid tiles while maintaining their original design proportions.
+
+## Initialization
+
+To initialize the generator, specify the source directory and desired output proportions.
+
+**Parameters:**
+- `dir: string` — The directory path where the source `.svg` flag icons are located.
+- `width: number` — The target width of a single flag in the generated sprite (default: 96).
+- `height: number` — The target height of a single flag in the generated sprite (default: 72).
+- `columns: number` — The number of icon columns to arrange in the sprite grid (default: 12).
+
+```typescript
+import { DesignFlags } from '@dxtmisha/scripts'
+
+const generator = new DesignFlags('assets/flags', 64, 48)
+generator.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): Promise<void>` — Orchestrates the entire process: reading files, drawing to canvas, saving the image, and writing the CSS file.
+
+### Information
+
+- `getLines(): number` — Calculates the total number of rows required in the sprite grid based on the file count and column limit.
+
+## Operations
+
+### Generation Workflow
+
+When `make()` is executed, the class performs the following steps:
+1. **Discovery**: Scans the source directory for `.svg` files and initializes the grid dimensions.
+2. **Layout Calculation**: Determines tiling offsets and centering margins for the specified flag sizes.
+3. **Canvas Drawing**: Iteratively loads each image and draws it onto the sprite canvas at the calculated grid coordinate.
+4. **Data Collection**: Records the name and coordinates of each flag to build the mapping data.
+5. **Asset Export**: 
+    - Saves the canvas content as a `webp` image in the `assets` directory.
+    - Generates a `flags.css` file with root variable definitions and individual `--[name]` modifier classes.
+
+### Style Implementation
+
+The generated CSS uses a centralized class `.ui-sys-flags` that stores dimension variables and the background image link. Individual modifiers (e.g., `.ui-sys-flags--us`) then update the `background-position` to isolate specific icons, minimizing browser paint calls and HTTP requests.

package/src/media/functional/scripts/classes/DesignFlags/DesignFlags.ru.mdx

@@ -0,0 +1,59 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/DesignFlags - Генератор спрайтов флагов'/>
+
+# Класс DesignFlags
+
+Класс `DesignFlags` предоставляет автоматизированное решение для генерации оптимизированных спрайтов изображений из коллекции SVG-иконок флагов. Он управляет рендерингом на основе холста, расчетом сетки и созданием файлов CSS-маппинга для эффективного отображения иконок с использованием позиционирования фона.
+
+## Ключевые особенности
+
+- **Автоматическая сборка спрайта** — объединяет множество отдельных SVG-файлов в один оптимизированный спрайт формата `.webp`.
+- **Динамическая генерация CSS** — автоматически создает утилитарные классы с точными значениями `background-position` для каждого флага.
+- **Настраиваемая сетка** — позволяет настраивать размеры флагов и количество колонок в результирующем изображении.
+- **Рендеринг на базе холста** — использует высокопроизводительную обработку изображений для плавного преобразования и масштабирования.
+- **Сохранение пропорций** — гарантирует центрирование флагов внутри ячеек сетки с сохранением оригинальных пропорций дизайна.
+
+## Инициализация
+
+Для инициализации генератора укажите исходную директорию и желаемые пропорции вывода.
+
+**Параметры:**
+- `dir: string` — путь к директории, где расположены исходные SVG-иконки флагов.
+- `width: number` — целевая ширина одного флага в сгенерированном спрайте (по умолчанию: 96).
+- `height: number` — целевая высота одного флага в сгенерированном спрайте (по умолчанию: 72).
+- `columns: number` — количество колонок иконок в сетке спрайта (по умолчанию: 12).
+
+```typescript
+import { DesignFlags } from '@dxtmisha/scripts'
+
+const generator = new DesignFlags('assets/flags', 64, 48)
+generator.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): Promise<void>` — координирует весь процесс: чтение файлов, отрисовку на холсте, сохранение изображения и запись CSS-файла.
+
+### Информация
+
+- `getLines(): number` — вычисляет общее количество строк, необходимых в сетке спрайта, на основе количества файлов и лимита колонок.
+
+## Операции
+
+### Рабочий процесс генерации
+
+При выполнении `make()` класс выполняет следующие шаги:
+1. **Обнаружение**: сканирует исходную директорию на наличие `.svg` файлов и инициализирует размеры сетки.
+2. **Расчет макета**: определяет смещения плиток и поля центрирования для указанных размеров флагов.
+3. **Отрисовка на холсте**: итеративно загружает каждое изображение и рисует его на холсте спрайта в рассчитанных координатах сетки.
+4. **Сбор данных**: записывает имя и координаты каждого флага для создания данных маппинга.
+5. **Экспорт ресурсов**: 
+    - сохраняет содержимое холста как изображение `webp` в директории `assets`.
+    - генерирует файл `flags.css` с определениями корневых переменных и индивидуальными классами-модификаторами `--[name]`.
+
+### Реализация стилей
+
+Сгенерированный CSS использует централизованный класс `.ui-sys-flags`, который хранит переменные размеров и ссылку на фоновое изображение. Индивидуальные модификаторы (например, `.ui-sys-flags--ru`) затем обновляют `background-position` для изоляции конкретных иконок, сводя к минимуму количество вызовов отрисовки в браузере и HTTP-запросов.