@dxtmisha/wiki 0.39.1 → 0.39.3

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-запросов.

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

@@ -0,0 +1,59 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/DesignFlags - Trình tạo Sprite cờ'/>
+
+# Lớp DesignFlags
+
+Lớp `DesignFlags` cung cấp một giải pháp tự động để tạo các sprite hình ảnh được tối ưu hóa từ một bộ sưu tập các biểu tượng cờ SVG. Nó xử lý việc hiển thị dựa trên canvas, tính toán bố cục lưới và tạo các tệp ánh xạ CSS để hiển thị biểu tượng hiệu quả bằng cách sử dụng định vị nền (background positioning).
+
+## Các tính năng chính
+
+- **Tự động đóng gói Sprite** — Kết hợp nhiều tệp SVG riêng lẻ thành một sprite `.webp` duy nhất được tối ưu hóa.
+- **Tạo CSS động** — Tự động tạo các lớp tiện ích với các giá trị `background-position` chính xác cho mỗi lá cờ.
+- **Bố cục lưới có thể cấu hình** — Cho phép tùy chỉnh kích thước cờ và số lượng cột trong hình ảnh kết quả.
+- **Hiển thị bằng Canvas** — Sử dụng xử lý hình ảnh hiệu suất cao để chuyển đổi và thu phóng mượt mà.
+- **Duy trì tỷ lệ khung hình** — Đảm bảo cờ được căn giữa trong các ô lưới của chúng trong khi vẫn duy trì tỷ lệ thiết kế ban đầu.
+
+## Khởi tạo
+
+Để khởi tạo trình tạo, hãy chỉ định thư mục nguồn và tỷ lệ đầu ra mong muốn.
+
+**Tham số:**
+- `dir: string` — Đường dẫn thư mục nơi đặt các biểu tượng cờ `.svg` nguồn.
+- `width: number` — Chiều rộng mục tiêu của một lá cờ trong sprite được tạo (mặc định: 96).
+- `height: number` — Chiều cao mục tiêu của một lá cờ trong sprite được tạo (mặc định: 72).
+- `columns: number` — Số lượng cột biểu tượng cần sắp xếp trong lưới sprite (mặc định: 12).
+
+```typescript
+import { DesignFlags } from '@dxtmisha/scripts'
+
+const generator = new DesignFlags('assets/flags', 64, 48)
+generator.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): Promise<void>` — Điều phối toàn bộ quy trình: đọc tệp, vẽ lên canvas, lưu hình ảnh và ghi tệp CSS.
+
+### Thông tin
+
+- `getLines(): number` — Tính toán tổng số hàng cần thiết trong lưới sprite dựa trên số lượng tệp và giới hạn cột.
+
+## Các thao tác (Operations)
+
+### Quy trình tạo
+
+Khi `make()` được thực thi, lớp sẽ thực hiện các bước sau:
+1. **Khám phá**: Quét thư mục nguồn để tìm các tệp `.svg` và khởi tạo kích thước lưới.
+2. **Tính toán bố cục**: Xác định khoảng cách lát gạch (tiling) và lề căn giữa cho các kích thước cờ cụ thể.
+3. **Vẽ Canvas**: Tải từng hình ảnh theo chu kỳ và vẽ nó lên canvas sprite tại tọa độ lưới đã tính toán.
+4. **Thu thập dữ liệu**: Ghi lại tên và tọa độ của mỗi lá cờ để xây dựng dữ liệu ánh xạ.
+5. **Xuất tài nguyên**: 
+    - Lưu nội dung canvas dưới dạng hình ảnh `webp` trong thư mục `assets`.
+    - Tạo tệp `flags.css` với các định nghĩa biến gốc và các lớp sửa đổi `--[name]` riêng lẻ.
+
+### Triển khai kiểu dáng (Style Implementation)
+
+CSS được tạo sử dụng một lớp tập trung `.ui-sys-flags` lưu trữ các biến kích thước và liên kết hình ảnh nền. Các bộ sửa đổi riêng lẻ (ví dụ: `.ui-sys-flags--vn`) sau đó cập nhật `background-position` để tách biệt các biểu tượng cụ thể, giảm thiểu các lệnh vẽ lại của trình duyệt và các yêu cầu HTTP.

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

@@ -0,0 +1,76 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/DesignReplace - Template Transformation Engine'/>
+
+# DesignReplace Class
+
+The `DesignReplace` class is the core engine for transforming raw file templates into project-ready source code. It uses a specialized marking system to identify sections of text that should be dynamically replaced with component names, property definitions, types, or styling logic derived from the component's `DesignStructure`.
+
+## Key Features
+
+- **Smart Label Resolution** — Identifies and replaces text blocks bounded by specific comments (e.g., `// :type` or `<!-- :props -->`).
+- **Context-Aware Naming** — Automatically transforms generic placeholders like `[project]`, `[design]`, and `[component]` based on configuration.
+- **Type Injection** — Generates complex TypeScript type unions and interfaces directly from property metadata.
+- **Default Value Mapping** — Resolves and injects default values for properties into object literals or constructor arguments.
+- **Conditional Class Generation** — Produces optimized Vue/TS class binding objects and CSS selector mappings.
+- **Path Normalization** — Automatically resolves relative import paths based on the target file's location in the project tree.
+
+## Initialization
+
+To initialize a replacement engine, pass the component's data structure, the target mark identifier, and the template string.
+
+**Parameters:**
+- `structure: DesignStructure` — The source of truth for component metadata and structural rules.
+- `mark: string` — The primary label used in templates to identify components (e.g., `'button'`).
+- `sample: string` — The text content of the template to be modified.
+
+```typescript
+import { DesignReplace } from '@dxtmisha/scripts'
+
+const engine = new DesignReplace(structure, 'button', templateContent)
+engine.replaceName().replaceType()
+const output = engine.get()
+```
+
+## Methods
+
+### Control
+
+- `get(): string` — Returns the final version of the template after all transformations.
+- `getNameFile(name: string): string` — Processes a filename or string to replace project-level placeholders.
+- `replaceName(): this` — Replaces the primary component name marks throughout the template.
+- `replacePath(): this` — Fixes relative paths (`../../../`) to point to the correct project root location.
+- `replaceMark(name: string, data: string[], end = ''): this` — Performs block replacement for a specific label by injecting an array of strings.
+- `replaceOnce(name?: string, removeReplacement?: boolean | Function): this` — Handles single-use replacement markers (`.once`).
+
+### Property & Type Automation
+
+- `replaceType(constructor?: string): this` — Generates and injects TypeScript types for all component properties.
+- `replaceDefault(): this` — Injects default values for properties into the template.
+- `replaceProps(): this` — Generates Vue-style property definition objects.
+- `replacePropsValues(): this` — Creates arrays of allowed values for properties (enums/unions).
+
+### Styling & Classes
+
+- `replaceClasses(template?: Function, end = ''): this` — Generates a list of available CSS classes based on the structure.
+- `replaceClassesValues(): this` — Produces dynamic class binding logic for logic implementation files.
+- `replaceStylesValues(): this` — Maps component properties to CSS custom variables (CSS Variables).
+- `replaceConstructorClasses(): this` — Specialized class generator for component constructors.
+
+## Operations
+
+### The Marking System
+
+The engine scans for specific comment patterns to identify where to inject code. It supports multiple comment styles:
+
+1. **Inline Logic**: `// :label data` or `/* :label */ content /* :label.end */`
+2. **Template Comments**: `<!-- :label --> content <!-- :label.end -->`
+3. **Property Specificity**: `:label.propertyName.none` (used to exclude specific properties from a block).
+
+### Transformation Flow
+
+When a replacement method like `replaceType()` is called, the class:
+1. **Scans**: Locates the start and end markers for the `type` label.
+2. **Consults Structure**: Iterates over the properties in the provided `DesignStructure`.
+3. **Resolves Logic**: Determines the correct TypeScript syntax for each property based on its value type (boolean, string, or union).
+4. **Injects**: Replaces the content between the markers with the new generated code, maintaining original indentation.

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

@@ -0,0 +1,76 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/DesignReplace - Движок трансформации шаблонов'/>
+
+# Класс DesignReplace
+
+Класс `DesignReplace` — это основное ядро для преобразования необработанных шаблонов файлов в готовый к использованию исходный код проекта. Он использует специализированную систему меток для идентификации участков текста, которые должны быть динамически заменены именами компонентов, определениями свойств, типами или логикой стилизации, полученными из `DesignStructure` компонента.
+
+## Ключевые особенности
+
+- **Интеллектуальное разрешение меток** — идентифицирует и заменяет блоки текста, ограниченные специфическими комментариями (например, `// :type` или `<!-- :props -->`).
+- **Контекстное именование** — автоматически преобразует универсальные плейсхолдеры, такие как `[project]`, `[design]` и `[component]`, на основе конфигурации.
+- **Внедрение типов** — генерирует сложные объединения типов TypeScript и интерфейсы непосредственно из метаданных свойств.
+- **Маппинг значений по умолчанию** — разрешает и внедряет значения по умолчанию для свойств в объектные литералы или аргументы конструктора.
+- **Условная генерация классов** — создает оптимизированные объекты привязки классов Vue/TS и маппинги селекторов CSS.
+- **Нормализация путей** — автоматически разрешает относительные пути импорта в зависимости от расположения целевого файла в дереве проекта.
+
+## Инициализация
+
+Для инициализации движка замены передайте структуру данных компонента, идентификатор целевой метки и строку шаблона.
+
+**Параметры:**
+- `structure: DesignStructure` — источник истины для метаданных компонента и структурных правил.
+- `mark: string` — основная метка, используемая в шаблонах для идентификации компонентов (например, `'button'`).
+- `sample: string` — текстовое содержимое шаблона для модификации.
+
+```typescript
+import { DesignReplace } from '@dxtmisha/scripts'
+
+const engine = new DesignReplace(structure, 'button', templateContent)
+engine.replaceName().replaceType()
+const output = engine.get()
+```
+
+## Методы
+
+### Управление
+
+- `get(): string` — возвращает финальную версию шаблона после всех преобразований.
+- `getNameFile(name: string): string` — обрабатывает имя файла или строку для замены плейсхолдеров уровня проекта.
+- `replaceName(): this` — заменяет основные метки имени компонента во всем шаблоне.
+- `replacePath(): this` — исправляет относительные пути (`../../../`), чтобы они указывали на правильное корневое расположение проекта.
+- `replaceMark(name: string, data: string[], end = ''): this` — выполняет блочную замену для конкретной метки, внедряя массив строк.
+- `replaceOnce(name?: string, removeReplacement?: boolean | Function): this` — обрабатывает одноразовые маркеры замены (`.once`).
+
+### Автоматизация свойств и типов
+
+- `replaceType(constructor?: string): this` — генерирует и внедряет типы TypeScript для всех свойств компонента.
+- `replaceDefault(): this` — внедряет значения по умолчанию для свойств в шаблон.
+- `replaceProps(): this` — генерирует объекты определения свойств в стиле Vue.
+- `replacePropsValues(): this` — создает массивы допустимых значений для свойств (enums/unions).
+
+### Стилизация и классы
+
+- `replaceClasses(template?: Function, end = ''): this` — генерирует список доступных CSS-классов на основе структуры.
+- `replaceClassesValues(): this` — создает логику динамической привязки классов для файлов реализации логики.
+- `replaceStylesValues(): this` — сопоставляет свойства компонента с пользовательскими переменными CSS (CSS Variables).
+- `replaceConstructorClasses(): this` — специализированный генератор классов для конструкторов компонентов.
+
+## Операции
+
+### Система меток
+
+Движок сканирует специфические паттерны комментариев, чтобы определить, куда внедрять код. Поддерживаются несколько стилей комментариев:
+
+1. **Инлайн логика**: `// :label data` или `/* :label */ content /* :label.end */`
+2. **Комментарии шаблонов**: `<!-- :label --> content <!-- :label.end -->`
+3. **Специфичность свойств**: `:label.propertyName.none` (используется для исключения конкретных свойств из блока).
+
+### Поток трансформации
+
+При вызове метода замены, такого как `replaceType()`, класс:
+1. **Сканирует**: находит начальный и конечный маркеры для метки `type`.
+2. **Обращается к структуре**: итерирует по свойствам в предоставленной `DesignStructure`.
+3. **Разрешает логику**: определяет правильный синтаксис TypeScript для каждого свойства на основе типа его значения (boolean, string или union).
+4. **Внедряет**: заменяет содержимое между маркерами новым сгенерированным кодом, сохраняя исходные отступы.