@dxtmisha/wiki 0.39.7 → 0.39.8

package/src/media/functional/functional-basic/functions/getSeparatingSearchExp/getSeparatingSearchExp.vi.mdx

@@ -9,10 +9,11 @@ Tiện ích tạo một `RegExp` toàn cục, không phân biệt chữ hoa/thư
 Mỗi từ được tách bởi dấu cách, escape và nối với nhau bằng toán tử OR `|`. Điều này hữu ích khi bạn muốn tìm kết quả khớp với ít nhất một trong các từ đã nhập.
 
 **Tham số:**
-- `search: string` — Chuỗi tìm kiếm gồm một hoặc nhiều từ phân cách bởi dấu cách.
+- `search: string | RegExp` — Chuỗi tìm kiếm gồm một hoặc nhiều từ phân cách bởi dấu cách, hoặc đối tượng `RegExp`.
+- `limit: number = 128` — Độ dài tối đa cho phép của chuỗi tìm kiếm (bị bỏ qua nếu một `RegExp` được truyền vào).
 
 **Trả về:**
-`RegExp` — Biểu thức chính quy với cờ `ig` (toàn cục, không phân biệt chữ hoa/thường).
+`RegExp` — Biễu thức chính quy với cờ `ig` (toàn cục, không phân biệt chữ hoa/thường). Nếu chuỗi tìm kiếm trống hoặc vượt quá giới hạn, một regex không khớp với bất kỳ thứ gì sẽ được trả về.
 
 ```typescript
 import { getSeparatingSearchExp } from '@dxtmisha/functional-basic'

package/src/media/functional/functional-basic/functions/toNumber/toNumber.en.mdx

@@ -1,21 +1,37 @@
-import { Meta } from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
 <Meta title='@dxtmisha/en/functional-basic/Functions/toNumber - Converting a value to a number'/>
 
 # `toNumber`
 
-Extracts a numeric value from a string or a number. The function removes extra characters and correctly handles various thousands and decimal separators (spaces, commas, periods).
+Converts a string or number into a finite floating-point number. The function is designed to handle various formatting styles, including thousands separators and different decimal markers.
 
 **Parameters:**
-- `value?: T` — The input value (a string or a number).
+- `value?: NumberOrString` — The input value for conversion.
 
 **Returns:**
-`number` — The transformed float number. If the value is empty or invalid, `0` is returned.
+`number` — The parsed float number or `0` if conversion fails or the value is non-finite.
 
-```typescript
+## Examples
+
+<Source
+  language='typescript'
+  code={`
 import { toNumber } from '@dxtmisha/functional-basic'
 
-console.log(toNumber('1 250,50')) // 1250.5
-console.log(toNumber('1,000,000.99')) // 1000000.99
-console.log(toNumber('abc-12.5')) // 12.5
-```
+// 1. Handling various separators
+toNumber('1 250,50')       // 1250.5
+toNumber('1,000,000.99')   // 1000000.99
+toNumber('1.250,50')       // 1250.5
+
+// 2. Stripping non-numeric characters
+toNumber('abc-12.5')       // -12.5
+toNumber('$1,234.56')      // 1234.56
+
+// 3. Numbers and special values
+toNumber(123.45)           // 123.45
+toNumber(-0)               // 0 (normalized)
+toNumber(Infinity)         // 0
+toNumber(undefined)        // 0
+  `}
+/>

package/src/media/functional/functional-basic/functions/toNumber/toNumber.ru.mdx

@@ -1,21 +1,37 @@
-import { Meta } from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
 <Meta title='@dxtmisha/ru/functional-basic/Functions/toNumber - Преобразование значения в число'/>
 
 # `toNumber`
 
-Извлекает числовое значение из строки или числа. Функция удаляет лишние символы и корректно обрабатывает различные разделители тысяч и дробной части (пробелы, запятые, точки).
+Преобразует строку или число в конечное число с плавающей точкой. Функция разработана для обработки различных стилей форматирования, включая разделители тысяч и различные десятичные маркеры.
 
 **Параметры:**
-- `value?: T` — Входное значение (строка или число).
+- `value?: NumberOrString` — Входное значение для преобразования.
 
 **Возвращает:**
-`number` — Преобразованное число типа float. Если значение пустое или невалидное, возвращается `0`.
+`number` — Распарсенное число float или `0`, если преобразование не удалось или значение не является конечным числом.
 
-```typescript
+## Примеры
+
+<Source
+  language='typescript'
+  code={`
 import { toNumber } from '@dxtmisha/functional-basic'
 
-console.log(toNumber('1 250,50')) // 1250.5
-console.log(toNumber('1,000,000.99')) // 1000000.99
-console.log(toNumber('abc-12.5')) // 12.5
-```
+// 1. Обработка различных разделителей
+toNumber('1 250,50')       // 1250.5
+toNumber('1,000,000.99')   // 1000000.99
+toNumber('1.250,50')       // 1250.5
+
+// 2. Очистка от нечисловых символов
+toNumber('abc-12.5')       // -12.5
+toNumber('$1,234.56')      // 1234.56
+
+// 3. Числа и специальные значения
+toNumber(123.45)           // 123.45
+toNumber(-0)               // 0 (нормализовано)
+toNumber(Infinity)         // 0
+toNumber(undefined)        // 0
+  `}
+/>

package/src/media/functional/functional-basic/functions/toNumber/toNumber.vi.mdx

@@ -1,21 +1,37 @@
-import { Meta } from '@storybook/addon-docs/blocks'
+import { Meta, Source } from '@storybook/addon-docs/blocks'
 
 <Meta title='@dxtmisha/vi/functional-basic/Functions/toNumber - Chuyển đổi giá trị sang kiểu số'/>
 
 # `toNumber`
 
-Trích xuất giá trị số từ một chuỗi hoặc một số. Hàm loại bỏ các ký tự thừa và xử lý chính xác các ký hiệu phân cách phần nghìn và phần thập phân khác nhau (khoảng trắng, dấu phẩy, dấu chấm).
+Chuyển đổi một chuỗi hoặc một số thành một số thực (float) hữu hạn. Hàm được thiết kế để xử lý nhiều kiểu định dạng khác nhau, bao gồm các ký tự phân cách phần nghìn và các dấu thập phân khác nhau.
 
 **Tham số:**
-- `value?: T` — Giá trị đầu vào (chuỗi hoặc số).
+- `value?: NumberOrString` — Giá trị đầu vào cần chuyển đổi.
 
 **Trả về:**
-`number` — Số thực (float) sau khi chuyển đổi. Nếu giá trị trống hoặc không hợp lệ, hàm trả về `0`.
+`number` — Số thực sau khi phân tách hoặc `0` nếu chuyển đổi thất bại hoặc giá trị là vô hạn.
 
-```typescript
+## Ví dụ
+
+<Source
+  language='typescript'
+  code={`
 import { toNumber } from '@dxtmisha/functional-basic'
 
-console.log(toNumber('1 250,50')) // 1250.5
-console.log(toNumber('1,000,000.99')) // 1000000.99
-console.log(toNumber('abc-12.5')) // 12.5
-```
+// 1. Xử lý các loại dấu phân cách
+toNumber('1 250,50')       // 1250.5
+toNumber('1,000,000.99')   // 1000000.99
+toNumber('1.250,50')       // 1250.5
+
+// 2. Loại bỏ các ký tự không phải số
+toNumber('abc-12.5')       // -12.5
+toNumber('$1,234.56')      // 1234.56
+
+// 3. Số và các giá trị đặc biệt
+toNumber(123.45)           // 123.45
+toNumber(-0)               // 0 (đã chuẩn hóa)
+toNumber(Infinity)         // 0
+toNumber(undefined)        // 0
+  `}
+/>

package/src/media/functional/functional-basic/functions/toString/toString.en.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Functions/toString - Conversion of a value to a string'/>
+
+# `toString`
+
+A utility for converting a value to a string. Returns an empty string if the value is null or undefined.
+
+**Parameters:**
+- `value: string | null | undefined` — The value for conversion.
+
+**Returns:**
+`string` — The string representation of the value.
+
+
+## Examples
+
+<Source
+  language='typescript'
+  code={`
+import { toString } from '@dxtmisha/functional-basic'
+
+toString('Hello')         // 'Hello'
+toString(null)            // ''
+toString(undefined)       // ''
+
+  `}
+/>

package/src/media/functional/functional-basic/functions/toString/toString.ru.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Functions/toString - Преобразование значения в строку'/>
+
+# `toString`
+
+Утилита для преобразования значения в строку. Возвращает пустую строку, если значение равно null или undefined.
+
+**Параметры:**
+- `value: string | null | undefined` — Значение для преобразования.
+
+**Возвращает:**
+`string` — Строковое представление значения.
+
+
+## Примеры
+
+<Source
+  language='typescript'
+  code={`
+import { toString } from '@dxtmisha/functional-basic'
+
+toString('Привет')        // 'Привет'
+toString(null)            // ''
+toString(undefined)       // ''
+
+  `}
+/>

package/src/media/functional/functional-basic/functions/toString/toString.vi.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Functions/toString - Chuyển đổi một giá trị thành chuỗi'/>
+
+# `toString`
+
+Một tiện ích để chuyển đổi một giá trị thành chuỗi. Trả về một chuỗi rỗng nếu giá trị là null hoặc undefined.
+
+**Tham số:**
+- `value: string | null | undefined` — Giá trị cần chuyển đổi.
+
+**Trả về:**
+`string` — Biểu diễn chuỗi của giá trị.
+
+
+## Ví dụ
+
+<Source
+  language='typescript'
+  code={`
+import { toString } from '@dxtmisha/functional-basic'
+
+toString('Xin chào')      // 'Xin chào'
+toString(null)            // ''
+toString(undefined)       // ''
+
+  `}
+/>

package/src/media/functional/ui/about/about.en.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/! About the library'/>
+
+# [@dxtmisha/ui](https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor)
+
+The `@dxtmisha/ui` project is developed as a technological foundation for designing new UI components based on design system principles. The primary goal of the project is to provide developers with a ready-made logical base that simplifies the creation of scalable and consistent interfaces in the Vue 3 environment.
+
+At the core of the system is the separation of concerns between component logic and its visual representation, allowing elements to be adapted to any design requirements without re-implementing complex mechanics.
+
+## Central Part of the Project: @dxtmisha/constructor
+
+The key element is the **`@dxtmisha/constructor`** package. It serves as the "engine" for components, encapsulating:
+- Reactive state and lifecycle management.
+- Standardized event and data input handling.
+- Accessibility logic (a11y) and keyboard control.
+- Typing of input parameters (props) and slots.
+
+Using this approach allows developers to focus on the visual implementation and UX, relying on the already tested and stable core logic.
+
+## Capabilities and Tools
+
+The system provides a comprehensive set of tools necessary for modern interface development:
+
+**Functional Base (@dxtmisha/functional)**
+A set of tools for integration with the Vue Composition API. Ensures reactive interaction with APIs, synchronization with web storage, and internationalization (i18n).
+
+**Visual Parameters System (@dxtmisha/styles)**
+A library of SCSS mixins and design tokens. It allows for managing component geometry and themes at the compilation level, ensuring a link between logical parameters and the resulting style.
+
+**Process Automation (@dxtmisha/scripts)**
+CLI tools to accelerate development. The package automates the scaffolding of new components, documentation generation, and export management. Includes AI integration capabilities for creating technical descriptions of elements.
+
+## Who the Project is For
+
+The project is aimed at developers and teams tasked with:
+- Creating their own component libraries with unique designs.
+- Designing complex interface systems with high architectural requirements.
+- Developing business applications where a clear separation of logic and data representation is critical.
+
+The library acts as a reliable foundation, allowing for consistent design standards throughout the product lifecycle.
+
+## Git
+
+[https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor](https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor)

package/src/media/functional/ui/about/about.ru.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/! О библиотеке'/>
+
+# [@dxtmisha/ui](https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor)
+
+Проект `@dxtmisha/ui` разработан как технологический фундамент для проектирования новых UI-компонентов на основе принципов дизайн-систем. Основная цель проекта — предоставить разработчикам готовую логическую базу, которая упрощает создание масштабируемых и консистентных интерфейсов в среде Vue 3.
+
+В основе системы лежит разделение ответственности между логикой компонента и его визуальным представлением, что позволяет адаптировать элементы под любые дизайнерские требования без повторной реализации сложной механики.
+
+## Центральная часть проекта: @dxtmisha/constructor
+
+Ключевым элементом является пакет **`@dxtmisha/constructor`**. Он выполняет роль «двигателя» компонентов, инкапсулируя в себе:
+- Управление состояниями (reactive state) и жизненным циклом.
+- Стандартизированную обработку событий и ввода данных.
+- Логику доступности (a11y) и клавиатурного управления.
+- Типизацию входных параметров (props) и слотов.
+
+Использование такого подхода позволяет сосредоточиться на визуальной реализации и UX, полагаясь на уже протестированную и стабильную логику ядра.
+
+## Возможности и инструменты
+
+Система предоставляет комплекс инструментов, необходимых для разработки современных интерфейсов:
+
+**Функциональная база (@dxtmisha/functional)**
+Набор инструментов для интеграции с Vue Composition API. Обеспечивает реактивное взаимодействие с API, синхронизацию с веб-хранилищами и работу с интернационализацией (i18n).
+
+**Система визуальных параметров (@dxtmisha/styles)**
+Библиотека SCSS-миксинов и дизайн-токенов. Позволяет управлять геометрией и темой компонентов на уровне компиляции, обеспечивая связь между логическими параметрами и итоговым стилем.
+
+**Автоматизация процессов (@dxtmisha/scripts)**
+CLI-инструменты для ускорения разработки. Пакет автоматизирует скаффолдинг новых компонентов, генерацию документации и управление экспортами. Включает возможности интеграции с AI для создания технического описания элементов.
+
+## Для кого предназначен проект
+
+Проект ориентирован на разработчиков и команды, перед которыми стоят задачи по:
+- Созданию собственных библиотек компонентов с уникальным дизайном.
+- Проектированию сложных интерфейсных систем с высокими требованиями к архитектуре.
+- Разработке бизнес-приложений, где критически важно четкое разделение логики и представления данных.
+
+Библиотека выступает в роли надежной основы, позволяющей следовать единым стандартам проектирования на протяжении всего жизненного цикла продукта.
+
+## Git
+
+[https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor](https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor)

package/src/media/functional/ui/about/about.vi.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/! Giới thiệu'/>
+
+# [@dxtmisha/ui](https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor)
+
+Dự án `@dxtmisha/ui` được phát triển như một nền tảng công nghệ để thiết kế các thành phần UI mới dựa trên các nguyên tắc của hệ thống thiết kế. Mục tiêu chính của dự án là cung cấp cho các nhà phát triển một cơ sở logic có sẵn giúp đơn giản hóa việc tạo ra các giao diện có khả năng mở rộng và nhất quán trong môi trường Vue 3.
+
+Cốt lõi của hệ thống là sự phân tách các mối quan tâm giữa logic thành phần và biểu diễn hình ảnh của nó, cho phép các phần tử được điều chỉnh theo bất kỳ yêu cầu thiết kế nào mà không cần triển khai lại các cơ chế phức tạp.
+
+## Phần trung tâm của dự án: @dxtmisha/constructor
+
+Yếu tố then chốt là gói **`@dxtmisha/constructor`**. Nó đóng vai trò là "động cơ" cho các thành phần, bao bọc:
+- Quản lý trạng thái phản hồi và vòng đời.
+- Xử lý nhập dữ liệu và sự kiện tiêu chuẩn hóa.
+- Logic truy cập (a11y) và điều khiển bàn phím.
+- Định kiểu cho các tham số đầu vào (props) và slots.
+
+Việc sử dụng phương pháp này cho phép các nhà phát triển tập trung vào triển khai hình ảnh và UX, dựa trên logic cốt lõi đã được kiểm chứng và ổn định.
+
+## Khả năng và Công cụ
+
+Hệ thống cung cấp một bộ công cụ toàn diện cần thiết cho việc phát triển giao diện hiện đại:
+
+**Cơ sở chức năng (@dxtmisha/functional)**
+Một bộ công cụ để tích hợp với Vue Composition API. Đảm bảo tương tác phản hồi với các API, đồng bộ hóa với bộ nhớ web và quốc tế hóa (i18n).
+
+**Hệ thống thông số hình ảnh (@dxtmisha/styles)**
+Thư viện các mixin SCSS và thiết kế token. Nó cho phép quản lý hình học và chủ đề của thành phần ở cấp độ biên dịch, đảm bảo liên kết giữa các thông số logic và kiểu dáng kết quả.
+
+**Tự động hóa quy trình (@dxtmisha/scripts)**
+Công cụ CLI để tăng tốc độ phát triển. Gói tự động hóa việc scaffolding các thành phần mới, tạo tài liệu và quản lý xuất bản. Bao gồm khả năng tích hợp AI để tạo mô tả kỹ thuật cho các phần tử.
+
+## Dự án này dành cho ai
+
+Dự án hướng tới các nhà phát triển và các nhóm có nhiệm vụ:
+- Tạo thư viện thành phần riêng với thiết kế độc đáo.
+- Thiết kế các hệ thống giao diện phức tạp với yêu cầu kiến trúc cao.
+- Phát triển các ứng dụng kinh doanh mà việc phân tách rõ ràng giữa logic và biểu diễn dữ liệu là cực kỳ quan trọng.
+
+Thư viện đóng vai trò như một nền tảng đáng tin cậy, cho phép duy trì các tiêu chuẩn thiết kế nhất quán trong suốt vòng đời của sản phẩm.
+
+## Git
+
+[https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor](https://github.com/dxtmisha/dxt-ui/tree/main/packages/constructor)

package/src/media/functional/ui/component/component.en.mdx

@@ -0,0 +1,104 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/# Creating and Managing Components'/>
+
+# Creating and Managing Components
+
+The development process in the **DXT UI** system is as automated as possible using code generation scripts. The core idea is that the developer describes the component metadata, and the system automatically creates and updates the necessary files (props, styles, templates).
+
+```bash
+npm run ui
+npm run ui [ComponentName]
+```
+
+The `npm run ui` command is the main tool for working with components. It automatically scans directories, finds new or modified folders, and synchronizes all related files (`props.ts`, `styleToken.scss`, `.vue`) based on the data in `properties.json`.
+
+- To create or update a specific component, simply run the command after making changes to its folder.
+- To fully rebuild the library and update all exports, run the command without parameters.
+
+## Creating a New Component
+
+To create a new component from scratch, follow these steps:
+
+1. **Create Directory**: In the `src/components/Ui/` folder (or in your project), create a new folder with the name of the component (e.g., `MyButton`).
+2. **Run Initialization**: Execute the `ui` command (or `npm run ui`). The script will automatically detect the new folder and create the necessary files inside it.
+
+```bash
+npm run ui
+```
+
+The system will create a `properties.json` file with a basic structure, along with all supporting files (props, styles, vue).
+
+3. **Fill Properties**: Edit the created `properties.json` file by adding modifiers and tokens.
+4. **Synchronize Changes**: Run the `ui` command again to update all associated files based on your changes.
+
+```bash
+npm run ui
+```
+
+### Generation Result
+The system will automatically create the following files based on your metadata and the selected constructor:
+- `props.ts` — typed properties extending the constructor and defining default values.
+- `styleToken.scss` — SCSS tokens and mixins.
+- `DesignComponent.vue` — main Vue component with initialization logic.
+- `index.ts`, `wiki.ts`, `stories.ts` — export, documentation, and stories files.
+
+
+In the generated `.vue` file, when initializing the `Design` class (e.g., `BarsDesign`), you can pass a `components` object. This allows you to connect child components required for the current one to function (e.g., icons or progress indicators).
+
+> Only connect the components that are actually used. If a dependent component (e.g., `ripple`) is not needed in your implementation, it can simply be omitted from the object.
+
+To manage the properties of child components, use the `compMod` parameter. This allows you to pass default values for the props of internal elements (e.g., setting the size or style of a button within a navigation bar).
+
+```typescript
+const design = new BarsDesign('my.bars', props, {
+  emits,
+  classes: classesToken,
+  components: {
+    button: MyButton
+  },
+  compMod: {
+    button: {
+      text: true,
+      size: 'xs',
+      inverse: true
+    }
+  }
+})
+
+### Working with Props and Defaults
+
+The `props.ts` file contains a `defaults` object that combines standard values from the constructor with settings specific to your component.
+
+Example in the `props.ts` file:
+```typescript
+export const defaults: object = {
+  ...defaultsBars,
+  iconBack: 'arrow_back',
+  paddingByIndent: true
+}
+```
+
+
+## Updating a Component
+
+If you need to change component properties (add a modifier, change a token, or a CSS value), follow the **"Source of Truth"** rule:
+
+1. Edit the `properties.json` file.
+2. Run the command again:
+   ```bash
+   npm run ui MyButton
+   ```
+
+The script will automatically update `props.ts` (adding new types), `styleToken.scss` (updating variables), and templates while maintaining architectural integrity.
+
+## Rebuilding the Entire Library
+
+When working on several components at once or if you want to update global library exports (media, plugins, types), use the `ui` command without arguments:
+
+```bash
+npm run ui
+```
+
+
+

package/src/media/functional/ui/component/component.ru.mdx

@@ -0,0 +1,106 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/# Создание и управление компонентом'/>
+
+# Создание и управление компонентом
+
+Процесс разработки в системе **DXT UI** максимально автоматизирован с помощью скриптов генерации кода. Основная идея заключается в том, что разработчик описывает метаданные компонента, а система сама создает и обновляет необходимые файлы (пропсы, стили, шаблоны).
+
+```bash
+npm run ui
+npm run ui [ComponentName]
+```
+
+Команда `npm run ui` — это основной инструмент для работы с компонентами. Она автоматически сканирует директории, находит новые или измененные папки и синхронизирует все связанные файлы (`props.ts`, `styleToken.scss`, `.vue`) на основе данных из `properties.json`.
+
+- Чтобы создать или обновить конкретный компонент, просто запустите команду после внесения изменений в его папку.
+- Чтобы полностью пересобрать библиотеку и обновить все экспорты, запустите команду без параметров.
+
+## Создание нового компонента
+
+Чтобы создать новый компонент "с нуля", выполните следующие шаги:
+
+1. **Создайте директорию**: В папке `src/components/Ui/` (или в вашем проекте) создайте новую папку с названием компонента (например, `MyButton`).
+2. **Запустите инициализацию**: Выполните команду `ui` (или `npm run ui`). Скрипт автоматически обнаружит новую папку и создаст в ней необходимые файлы.
+
+```bash
+npm run ui
+```
+
+Система создаст файл `properties.json` с базовой структурой, а также все вспомогательные файлы (props, styles, vue).
+
+3. **Заполните свойства**: Отредактируйте созданный файл `properties.json`, добавив модификаторы и токены.
+4. **Синхронизируйте изменения**: Снова запустите команду `ui`, чтобы обновить все связанные файлы на основе ваших изменений.
+
+```bash
+npm run ui
+```
+
+### Результат генерации
+Система автоматически создаст следующие файлы на основе ваших метаданных и выбранного конструктора:
+- `props.ts` — типизированные свойства, расширяющие конструктор и определяющие значения по умолчанию.
+- `styleToken.scss` — SCSS-токены и миксины.
+- `DesignComponent.vue` — основной Vue-компонент с логикой инициализации.
+- `index.ts`, `wiki.ts`, `stories.ts` — файлы экспорта, документации и историй.
+
+
+### Настройка зависимостей в Vue
+В созданном `.vue` файле при инициализации класса `Design` (например, `BarsDesign`) вы можете передать объект `components`. Это позволяет подключить дочерние компоненты, которые требуются для работы текущего (например, иконки или индикаторы загрузки).
+
+> Подключайте только те компоненты, которые действительно используются. Если какой-то зависимый компонент (например, `ripple`) не нужен в вашей реализации, его можно просто не указывать в объекте.
+
+Для управления свойствами дочерних компонентов используйте параметр `compMod`. Это позволяет передавать значения по умолчанию для пропсов внутренних элементов (например, установить размер или стиль кнопки внутри панели навигации).
+
+```typescript
+const design = new BarsDesign('my.bars', props, {
+  emits,
+  classes: classesToken,
+  components: {
+    button: MyButton
+  },
+  compMod: {
+    button: {
+      text: true,
+      size: 'xs',
+      inverse: true
+    }
+  }
+})
+```
+
+### Работа с Props и значениями по умолчанию
+
+Файл `props.ts` содержит объект `defaults`, который объединяет стандартные значения из конструктора и специфичные для вашего компонента настройки.
+
+Пример в файле `props.ts`:
+```typescript
+export const defaults: object = {
+  ...defaultsBars,
+  iconBack: 'arrow_back',
+  paddingByIndent: true
+}
+```
+
+
+## Обновление компонента
+
+Если вам нужно изменить свойства компонента (добавить модификатор, изменить токен или CSS-значение), следуйте правилу **"Source of Truth"**:
+
+1. Отредактируйте файл `properties.json`.
+2. Повторно запустите команду:
+   ```bash
+   npm run ui MyButton
+   ```
+
+Скрипт автоматически обновит `props.ts` (добавит новые типы), `styleToken.scss` (обновит переменные) и шаблоны, сохраняя при этом целостность архитектуры.
+
+## Пересборка всей библиотеки
+
+Когда вы работаете сразу над несколькими компонентами или хотите обновить глобальные экспорты библиотеки (media, plugins, types), используйте команду `ui` без аргументов:
+
+```bash
+npm run ui
+```
+
+
+