@dxtmisha/wiki 0.25.1 → 0.39.2

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

@@ -0,0 +1,92 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/PropertiesWrap - Оптимизация структуры'/>
+
+# Класс PropertiesWrap
+
+Класс `PropertiesWrap` предназначен для автоматической оптимизации структуры токенов в дизайн-системе. Его основная задача — находить повторяющиеся значения свойств на одном уровне вложенности и выносить их на родительский уровень. Это позволяет существенно сократить объем JSON/JS конфигов и упростить их поддержку.
+
+## Ключевые особенности
+
+- **Устранение дубликатов** — автоматически выносит общие свойства группы компонентов выше по иерархии.
+- **Рекурсивная оптимизация** — обрабатывает дерево свойств на любую глубину.
+- **Умное слияние** — находит свойства с максимальным количеством повторений для наиболее эффективного сжатия структуры.
+- **Прозрачность** — использует системный ключ `wrap` для идентификации блоков, требующих оптимизации.
+
+## Инициализация
+
+Класс предоставляет статические методы и не требует создания экземпляра через `new`.
+
+```typescript
+import { PropertiesWrap } from '@dxtmisha/scripts'
+
+// Оптимизация структуры свойств (мутирует исходный объект)
+PropertiesWrap.to(myProperties)
+```
+
+## Методы
+
+### `to`
+Статический метод, который запускает процесс оптимизации. Он обходит дерево свойств и, если встречает блок с флагом `_wrap`, анализирует его содержимое. Если внутри блока обнаружены идентичные свойства у дочерних элементов, они будут вынесены на уровень текущего блока, а дубликаты у дочерних элементов — удалены.
+
+**Параметры:**
+- `properties: PropertyList` — объект со списком свойств, который необходимо оптимизировать.
+
+```typescript
+const tokens = {
+  button: {
+    _wrap: true,
+    value: {
+      primary: { value: { padding: '10px', color: 'red' } },
+      secondary: { value: { padding: '10px', color: 'blue' } }
+    }
+  }
+};
+
+PropertiesWrap.to(tokens);
+
+/* Результат оптимизации:
+{
+  button: {
+    padding: '10px', // Вынесено на уровень выше
+    value: {
+      primary: { value: { color: 'red' } },
+      secondary: { value: { color: 'blue' } }
+    }
+  }
+}
+*/
+```
+
+## Операции
+
+### Алгоритм оптимизации (How it works)
+
+Процесс сжатия структуры проходит через следующие этапы:
+1. **Поиск флага**: Система ищет в объекте свойство `_wrap` (определено в `PropertyKey.wrap`).
+2. **Сбор статистики (getSelectors)**: Если флаг найден, класс собирает информацию о всех свойствах дочерних элементов (названия и их значения).
+3. **Анализ повторов (getMaxRepeat)**: Определяется свойство, которое чаще всего встречается с одним и тем же значением.
+4. **Перенос данных**: Найденное общее свойство добавляется в текущий (родительский) блок.
+5. **Очистка (removeProperties)**: Данное свойство удаляется из всех дочерних элементов, где оно имело идентичное значение.
+6. **Завершение**: Флаг `_wrap` удаляется из объекта.
+
+## Примеры
+
+### Сжатие конфигурации темы
+```typescript
+import { PropertiesWrap } from '@dxtmisha/scripts'
+
+const designData = {
+  typography: {
+    _wrap: true,
+    value: {
+      h1: { value: { 'font-family': 'Inter', 'font-size': '32px' } },
+      h2: { value: { 'font-family': 'Inter', 'font-size': '24px' } },
+      p: { value: { 'font-family': 'Inter', 'font-size': '16px' } }
+    }
+  }
+}
+
+PropertiesWrap.to(designData)
+// Результат: 'font-family': 'Inter' будет вынесен в корень объекта typography
+```

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

@@ -0,0 +1,92 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/PropertiesWrap - Tối ưu hóa cấu trúc'/>
+
+# Lớp PropertiesWrap
+
+Lớp `PropertiesWrap` được thiết kế để tự động tối ưu hóa cấu trúc token trong hệ thống thiết kế. Nhiệm vụ chính của nó là tìm các giá trị thuộc tính lặp lại ở cùng một mức lồng nhau và đưa chúng lên mức cha. Điều này giúp giảm đáng kể kích thước của các tệp cấu hình JSON/JS và đơn giản hóa việc bảo trì chúng.
+
+## Các tính năng chính
+
+- **Loại bỏ trùng lặp** — tự động chuyển các thuộc tính chung của một nhóm thành phần lên cao hơn trong hệ phân cấp.
+- **Tối ưu hóa đệ quy** — xử lý cây thuộc tính ở bất kỳ độ sâu nào.
+- **Hợp nhất thông minh** — xác định các thuộc tính có số lần lặp lại tối đa để nén cấu trúc hiệu quả nhất.
+- **Tính minh bạch** — sử dụng khóa hệ thống `wrap` để xác định các khối yêu cầu tối ưu hóa.
+
+## Khởi tạo
+
+Lớp này cung cấp các phương thức tĩnh và không yêu cầu khởi tạo thông qua `new`.
+
+```typescript
+import { PropertiesWrap } from '@dxtmisha/scripts'
+
+// Tối ưu hóa cấu trúc thuộc tính (làm thay đổi đối tượng gốc)
+PropertiesWrap.to(myProperties)
+```
+
+## Các phương thức
+
+### `to`
+Một phương thức tĩnh khởi động quá trình tối ưu hóa. Nó duyệt qua cây thuộc tính và khi gặp một khối có cờ `_wrap`, nó sẽ phân tích nội dung của khối đó. Nếu tìm thấy các thuộc tính giống hệt nhau giữa các phần tử con trong khối, chúng sẽ được chuyển lên mức của khối hiện tại và các bản trùng lặp ở các phần tử con sẽ bị xóa bỏ.
+
+**Tham số:**
+- `properties: PropertyList` — đối tượng chứa danh sách các thuộc tính cần được tối ưu hóa.
+
+```typescript
+const tokens = {
+  button: {
+    _wrap: true,
+    value: {
+      primary: { value: { padding: '10px', color: 'red' } },
+      secondary: { value: { padding: '10px', color: 'blue' } }
+    }
+  }
+};
+
+PropertiesWrap.to(tokens);
+
+/* Kết quả tối ưu hóa:
+{
+  button: {
+    padding: '10px', // Được chuyển lên trên một mức
+    value: {
+      primary: { value: { color: 'red' } },
+      secondary: { value: { color: 'blue' } }
+    }
+  }
+}
+*/
+```
+
+## Các thao tác (Operations)
+
+### Thuật toán tối ưu hóa (Cách thức hoạt động)
+
+Quá trình nén cấu trúc diễn ra qua các giai đoạn sau:
+1. **Tìm kiếm cờ**: Hệ thống tìm kiếm trong đối tượng thuộc tính `_wrap` (được định nghĩa trong `PropertyKey.wrap`).
+2. **Thu thập thống kê (getSelectors)**: Nếu tìm thấy cờ, lớp sẽ thu thập thông tin về tất cả các thuộc tính của các phần tử con (tên và giá trị của chúng).
+3. **Phân tích lặp lại (getMaxRepeat)**: Nó xác định thuộc tính xuất hiện thường xuyên nhất với cùng một giá trị.
+4. **Chuyển dữ liệu**: Thuộc tính chung đã xác định được thêm vào khối hiện tại (khối cha).
+5. **Làm sạch (removeProperties)**: Thuộc tính này được xóa khỏi tất cả các phần tử con nơi nó có giá trị giống hệt nhau.
+6. **Hoàn tất**: Cờ `_wrap` được gỡ bỏ khỏi đối tượng.
+
+## Ví dụ (Examples)
+
+### Nén cấu trúc cấu hình chủ đề (Theme)
+```typescript
+import { PropertiesWrap } from '@dxtmisha/scripts'
+
+const designData = {
+  typography: {
+    _wrap: true,
+    value: {
+      h1: { value: { 'font-family': 'Inter', 'font-size': '32px' } },
+      h2: { value: { 'font-family': 'Inter', 'font-size': '24px' } },
+      p: { value: { 'font-family': 'Inter', 'font-size': '16px' } }
+    }
+  }
+}
+
+PropertiesWrap.to(designData)
+// Kết quả: 'font-family': 'Inter' sẽ được chuyển vào gốc của đối tượng typography
+```

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

@@ -0,0 +1,41 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/Styles - Style Orchestrator'/>
+
+# Styles Class
+
+The `Styles` class is the central orchestrator for generating all style-related systemic files within the design system. it manages the initialization of root variables, base classes, SCSS properties, and design-specific style setups.
+
+## Key Features
+
+- **Systemic Generation** — Coordinates the creation of `vars`, `classes`, `properties`, and `list` files.
+- **Root Variable Initialization** — Uses `StylesRoot` to generate global CSS variables.
+- **Base Class Management** — Uses `StylesClasses` to generate standard utility classes.
+- **Design-Aware Setup** — Automatically creates `main`, `basic`, and `style` files tailored to specific designs.
+- **SCSS Integration** — Transforms property data into SCSS-compatible structures using `PropertiesScss`.
+- **Automatic Cleanup** — Filters out redundant data to keep the generated list files clean.
+
+## Initialization
+
+Initialize the `Styles` orchestrator. It internally manages a `Properties` instance to retrieve design data.
+
+```typescript
+import { Styles } from '@dxtmisha/scripts'
+
+const orchestrator = new Styles()
+orchestrator.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): this` — The main entry point. Triggers the full generation cycle for all designs.
+
+### Internal Initialization
+
+- `initRoot(items: PropertiesItems): this` — Generates global variables and writes them to the `vars` file.
+- `initClasses(items: PropertiesItems): this` — Generates base classes and individual class files.
+- `initProperties(items: PropertiesItems): this` — Generates SCSS property structures.
+- `initList(items: PropertiesItems): this` — Generates a cleaned-up property list for references.
+- `initBasic(design: string): this` — Generates the basic connection files and design-specific style anchors.

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

@@ -0,0 +1,41 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/Styles - Оркестратор стилей'/>
+
+# Класс Styles
+
+Класс `Styles` является центральным оркестратором для создания всех системных файлов, связанных со стилями, внутри дизайн-системы. Он управляет инициализацией корневых переменных, базовых классов, SCSS-свойств и специфичных для дизайна настроек стилей.
+
+## Ключевые возможности
+
+- **Системная генерация** — Координирует создание файлов `vars`, `classes`, `properties` и `list`.
+- **Инициализация корневых переменных** — Использует `StylesRoot` для создания глобальных CSS-переменных.
+- **Управление базовыми классами** — Использует `StylesClasses` для генерации стандартных утилитарных классов.
+- **Настройка с учетом дизайна** — Автоматически создает файлы `main`, `basic` и `style`, адаптированные для конкретных дизайнов.
+- **Интеграция с SCSS** — Преобразует данные о свойствах в структуры, совместимые с SCSS, используя `PropertiesScss`.
+- **Автоматическая чистка** — Отфильтровывает лишние данные, чтобы файлы списков оставались чистыми.
+
+## Инициализация
+
+Инициализируйте оркестратор `Styles`. Он внутренне управляет экземпляром `Properties` для получения данных дизайна.
+
+```typescript
+import { Styles } from '@dxtmisha/scripts'
+
+const orchestrator = new Styles()
+orchestrator.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): this` — Основная точка входа. Запускает полный цикл генерации для всех дизайнов.
+
+### Внутренняя инициализация
+
+- `initRoot(items: PropertiesItems): this` — Генерирует глобальные переменные и записывает их в файл `vars`.
+- `initClasses(items: PropertiesItems): this` — Генерирует базовые классы и отдельные файлы классов.
+- `initProperties(items: PropertiesItems): this` — Генерирует структуры свойств SCSS.
+- `initList(items: PropertiesItems): this` — Генерирует очищенный список свойств для ссылок.
+- `initBasic(design: string): this` — Генерирует базовые файлы подключения и стилевые привязки для конкретного дизайна.

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

@@ -0,0 +1,41 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/Styles - Bộ điều phối Style'/>
+
+# Lớp Styles
+
+Lớp `Styles` là bộ điều phối trung tâm để tạo tất cả các tệp hệ thống liên quan đến style trong hệ thống thiết kế. Nó quản lý việc khởi tạo các biến gốc, các lớp cơ sở, các thuộc tính SCSS và các thiết lập style cụ thể cho từng thiết kế.
+
+## Các tính năng chính
+
+- **Tạo hệ thống** — Điều phối việc tạo các tệp `vars`, `classes`, `properties`, và `list`.
+- **Khởi tạo biến gốc** — Sử dụng `StylesRoot` để tạo các biến CSS toàn cục.
+- **Quản lý lớp cơ sở** — Sử dụng `StylesClasses` để tạo các lớp tiện ích tiêu chuẩn.
+- **Thiết lập theo thiết kế** — Tự động tạo các tệp `main`, `basic`, và `style` được tùy chỉnh cho các thiết kế cụ thể.
+- **Tích hợp SCSS** — Chuyển đổi dữ liệu thuộc tính thành các cấu trúc tương thích với SCSS bằng cách sử dụng `PropertiesScss`.
+- **Dọn dẹp tự động** — Lọc bỏ dữ liệu dư thừa để giữ cho các tệp danh sách được tạo luôn sạch sẽ.
+
+## Khởi tạo
+
+Khởi tạo bộ điều phối `Styles`. Nó quản lý nội bộ một phiên bản `Properties` để truy xuất dữ liệu thiết kế.
+
+```typescript
+import { Styles } from '@dxtmisha/scripts'
+
+const orchestrator = new Styles()
+orchestrator.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): this` — Điểm bắt đầu chính. Kích hoạt chu kỳ tạo đầy đủ cho tất cả các thiết kế.
+
+### Khởi tạo nội bộ
+
+- `initRoot(items: PropertiesItems): this` — Tạo các biến toàn cục và ghi chúng vào tệp `vars`.
+- `initClasses(items: PropertiesItems): this` — Tạo các lớp cơ sở và các tệp lớp riêng lẻ.
+- `initProperties(items: PropertiesItems): this` — Tạo cấu trúc thuộc tính SCSS.
+- `initList(items: PropertiesItems): this` — Tạo danh sách thuộc tính đã dọn dẹp để tham chiếu.
+- `initBasic(design: string): this` — Tạo các tệp kết nối cơ bản và các điểm neo style cụ thể cho thiết kế.

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

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesClasses - Base Class Generator'/>
+
+# StylesClasses Class
+
+The `StylesClasses` class is responsible for generating base CSS classes from design properties. It filters the property list for categories like `class` and `theme` and creates individual class structures.
+
+## Key Features
+
+- **Category Filtering** — Specifically targets properties categorized as `class` or `theme`.
+- **Dynamic Class Generation** — Creates a dictionary of SCSS blocks, where each key is a class name.
+- **Dependency Orchestration** — Uses `StylesProperties` to generate the internal style rules (properties, mixins, etc.) for each class.
+- **Import Management** — Automatically includes necessary SCSS `@use` directives to link the generated class files.
+
+## Initialization
+
+To initialize the object, call the `StylesClasses(items)` constructor.
+
+**Parameters:**
+- `items: PropertiesItems` — an object for working with the list of design properties.
+
+```typescript
+import { StylesClasses, PropertiesItems } from '@dxtmisha/scripts'
+
+// 1. Initialize PropertiesItems
+const items = new PropertiesItems(designData)
+
+// 2. Initialize StylesClasses
+const generator = new StylesClasses(items)
+```
+
+## Methods
+
+### Control
+
+- `init(): StylesClassesItem` — The main entry point. Processes the property list and returns an object containing the list of required imports and the generated class content.
+
+## Types
+
+### StylesClassesItem
+
+- `data: string[]` — An array of SCSS `@use` statements for the generated class files.
+- `classes: Record<string, string[]>` — A dictionary where each key is a class name and the value is an array of strings representing the SCSS content of that class.

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

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesClasses - Генератор базовых классов'/>
+
+# Класс StylesClasses
+
+Класс `StylesClasses` отвечает за создание базовых CSS-классов на основе свойств дизайна. Он фильтрует список свойств по таким категориям, как `class` и `theme`, и создает структуры отдельных классов.
+
+## Ключевые возможности
+
+- **Фильтрация по категориям** — Специально нацелен на свойства, классифицированные как `class` или `theme`.
+- **Динамическая генерация классов** — Создает словарь блоков SCSS, где каждый ключ является именем класса.
+- **Оркестрация зависимостей** — Использует `StylesProperties` для генерации внутренних правил стиля (свойств, миксинов и т. д.) для каждого класса.
+- **Управление импортом** — Автоматически включает необходимые директивы SCSS `@use` для связывания созданных файлов классов.
+
+## Инициализация
+
+Для инициализации объекта вызовите конструктор `StylesClasses(items)`.
+
+**Параметры:**
+- `items: PropertiesItems` — объект для работы со списком свойств дизайна.
+
+```typescript
+import { StylesClasses, PropertiesItems } from '@dxtmisha/scripts'
+
+// 1. Инициализация PropertiesItems
+const items = new PropertiesItems(designData)
+
+// 2. Инициализация StylesClasses
+const generator = new StylesClasses(items)
+```
+
+## Методы
+
+### Управление
+
+- `init(): StylesClassesItem` — Основная точка входа. Обрабатывает список свойств и возвращает объект, содержащий список необходимых импортов и сгенерированное содержимое классов.
+
+## Типы
+
+### StylesClassesItem
+
+- `data: string[]` — Массив операторов SCSS `@use` для созданных файлов классов.
+- `classes: Record<string, string[]>` — Словарь, где каждый ключ — это имя класса, а значение — массив строк, представляющих содержимое SCSS этого класса.

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

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesClasses - Trình tạo Class cơ sở'/>
+
+# Lớp StylesClasses
+
+Lớp `StylesClasses` chịu trách nhiệm tạo các lớp CSS cơ sở từ các thuộc tính thiết kế. Nó lọc danh sách thuộc tính cho các danh mục như `class` và `theme` và tạo ra các cấu trúc lớp riêng lẻ.
+
+## Các tính năng chính
+
+- **Lọc theo danh mục** — Nhắm mục tiêu cụ thể vào các thuộc tính được phân loại là `class` hoặc `theme`.
+- **Tạo Class động** — Tạo một từ điển các khối SCSS, trong đó mỗi khóa là tên lớp.
+- **Điều phối phụ thuộc** — Sử dụng `StylesProperties` để tạo các quy tắc kiểu nội bộ (thuộc tính, mixin, v.v.) cho mỗi lớp.
+- **Quản lý Import** — Tự động bao gồm các chỉ thị SCSS `@use` cần thiết để liên kết các tệp lớp được tạo.
+
+## Khởi tạo
+
+Để khởi tạo đối tượng, hãy gọi hàm khởi tạo `StylesClasses(items)`.
+
+**Tham số:**
+- `items: PropertiesItems` — một đối tượng để làm việc với danh sách các thuộc tính thiết kế.
+
+```typescript
+import { StylesClasses, PropertiesItems } from '@dxtmisha/scripts'
+
+// 1. Khởi tạo PropertiesItems
+const items = new PropertiesItems(designData)
+
+// 2. Khởi tạo StylesClasses
+const generator = new StylesClasses(items)
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `init(): StylesClassesItem` — Điểm bắt đầu chính. Xử lý danh sách thuộc tính và trả về một đối tượng chứa danh sách các import cần thiết và nội dung lớp được tạo.
+
+## Các kiểu dữ liệu
+
+### StylesClassesItem
+
+- `data: string[]` — Một mảng các câu lệnh SCSS `@use` cho các tệp lớp được tạo.
+- `classes: Record<string, string[]>` — Một từ điển trong đó mỗi khóa là tên lớp và giá trị là một mảng các chuỗi đại diện cho nội dung SCSS của lớp đó.

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

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesProperties - Property Conversion Dispatcher'/>
+
+# StylesProperties Class
+
+The `StylesProperties` class acts as a central dispatcher for converting design properties into SCSS. It iterates through property branches and delegates the actual transformation to specialized `StylesTo*` classes based on the property's variable type.
+
+## Key Features
+
+- **Type-Based Dispatching** — Automatically selects the correct converter (e.g., `StylesToVar`, `StylesToProperty`, `StylesToSelector`) based on the `PropertyType`.
+- **Recursive Processing** — Handles nested property structures by recursively initializing itself for sub-branches.
+- **Auxiliary Block Management** — Intelligently wraps selectors and virtual elements in `& { ... }` blocks when they are part of a larger nested structure.
+- **Indentation Tracking** — Manages and increases indentation levels as it descends into nested property branches.
+- **State Preservation** — Tracks whether it is processing the first element in a block to correctly manage vertical spacing.
+
+## Initialization
+
+To initialize the object, call the `StylesProperties(space, property, parent)` constructor.
+
+**Parameters:**
+- `space: string` — the indentation string.
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `parent?: PropertyItem` — the parent property item (optional).
+
+```typescript
+import { StylesProperties } from '@dxtmisha/scripts'
+
+// 1. Initialize StylesProperties
+const dispatcher = new StylesProperties(indentation, propertyBranch, parentItem)
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Iterates through the properties in the current branch and returns an array of SCSS strings representing the converted rules.

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

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesProperties - Диспетчер преобразования свойств'/>
+
+# Класс StylesProperties
+
+Класс `StylesProperties` выступает в роли центрального диспетчера для преобразования свойств дизайна в SCSS. Он обходит ветви свойств и делегирует фактическое преобразование специализированным классам `StylesTo*` в зависимости от типа переменной свойства.
+
+## Ключевые возможности
+
+- **Диспетчеризация по типу** — Автоматически выбирает нужный преобразователь (например, `StylesToVar`, `StylesToProperty`, `StylesToSelector`) на основе `PropertyType`.
+- **Рекурсивная обработка** — Обрабатывает вложенные структуры свойств, рекурсивно инициализируя себя для подветвей.
+- **Управление вспомогательными блоками** — Интеллектуально оборачивает селекторы и псевдоэлементы в блоки `& { ... }`, когда они являются частью более крупной вложенной структуры.
+- **Отслеживание отступов** — Управляет и увеличивает уровни отступов при переходе во вложенные ветви свойств.
+- **Сохранение состояния** — Отслеживает, обрабатывается ли первый элемент в блоке, для правильного управления вертикальными отступами.
+
+## Инициализация
+
+Для инициализации объекта вызовите конструктор `StylesProperties(space, property, parent)`.
+
+**Параметры:**
+- `space: string` — строка отступа.
+- `property: PropertyItemsItem` — текущая обрабатываемая ветвь дерева свойств.
+- `parent?: PropertyItem` — родительский элемент свойства (необязательно).
+
+```typescript
+import { StylesProperties } from '@dxtmisha/scripts'
+
+// 1. Инициализация StylesProperties
+const dispatcher = new StylesProperties(indentation, propertyBranch, parentItem)
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Обходит свойства в текущей ветке и возвращает массив строк SCSS, представляющих преобразованные правила.

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

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesProperties - Bộ điều phối chuyển đổi thuộc tính'/>
+
+# Lớp StylesProperties
+
+Lớp `StylesProperties` đóng vai trò là bộ điều phối trung tâm để chuyển đổi các thuộc tính thiết kế thành SCSS. Nó lặp qua các nhánh thuộc tính và ủy quyền việc chuyển đổi thực tế cho các lớp `StylesTo*` chuyên biệt dựa trên kiểu biến của thuộc tính.
+
+## Các tính năng chính
+
+- **Điều phối dựa trên kiểu** — Tự động chọn trình chuyển đổi chính xác (ví dụ: `StylesToVar`, `StylesToProperty`, `StylesToSelector`) dựa trên `PropertyType`.
+- **Xử lý đệ quy** — Xử lý các cấu trúc thuộc tính lồng nhau bằng cách tự khởi tạo đệ quy cho các nhánh con.
+- **Quản lý khối phụ trợ** — Bao bọc các selector và phần tử giả (pseudo-elements) trong các khối `& { ... }` một cách thông minh khi chúng là một phần của cấu trúc lồng nhau lớn hơn.
+- **Theo dõi thụt lề** — Quản lý và tăng mức thụt lề khi đi sâu vào các nhánh thuộc tính lồng nhau.
+- **Bảo toàn trạng thái** — Theo dõi xem nó có đang xử lý phần tử đầu tiên trong một khối hay không để quản lý khoảng cách dọc một cách chính xác.
+
+## Khởi tạo
+
+Để khởi tạo đối tượng, hãy gọi hàm khởi tạo `StylesProperties(space, property, parent)`.
+
+**Tham số:**
+- `space: string` — chuỗi thụt lề.
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `parent?: PropertyItem` — mục thuộc tính cha (tùy chọn).
+
+```typescript
+import { StylesProperties } from '@dxtmisha/scripts'
+
+// 1. Khởi tạo StylesProperties
+const dispatcher = new StylesProperties(indentation, propertyBranch, parentItem)
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Lặp qua các thuộc tính trong nhánh hiện tại và trả về một mảng các chuỗi SCSS đại diện cho các quy tắc đã được chuyển đổi.

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

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesRoot - Root Variable Generator'/>
+
+# StylesRoot Class
+
+The `StylesRoot` class is responsible for generating the global `:root` CSS block from design tokens. It converts tokens into CSS variables and intelligently resolves complex `calc()` expressions to ensure browser compatibility.
+
+## Key Features
+
+- **Root Block Generation** — Creates a standard `:root { ... }` structure containing all design tokens.
+- **Variable Conversion** — Uses `StylesToVar` to transform property items into valid CSS variables.
+- **Dynamic Calculation Resolution** — Recursively resolves `calc()` expressions that reference other variables, ensuring that final values are pre-calculated where possible.
+- **SCSS Integration** — Automatically includes the necessary SCSS `@use` directives for property definitions.
+
+## Initialization
+
+To initialize the object, call the `StylesRoot(items)` constructor.
+
+**Parameters:**
+- `items: PropertiesItems` — an object for working with the list of design properties.
+
+```typescript
+import { StylesRoot, PropertiesItems } from '@dxtmisha/scripts'
+
+// 1. Initialize PropertiesItems
+const items = new PropertiesItems(designData)
+
+// 2. Initialize StylesRoot
+const generator = new StylesRoot(items)
+```
+
+## Methods
+
+### Control
+
+- `init(): string[]` — The main entry point. Processes the property list, resolves calculations, and returns an array of strings representing the complete `:root` block with its imports.

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

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesRoot - Генератор корневых переменных'/>
+
+# Класс StylesRoot
+
+Класс `StylesRoot` отвечает за генерацию глобального блока CSS `:root` из токенов дизайна. Он преобразует токены в CSS-переменные и интеллектуально разрешает сложные выражения `calc()` для обеспечения совместимости с браузерами.
+
+## Ключевые возможности
+
+- **Генерация блока Root** — Создает стандартную структуру `:root { ... }`, содержащую все токены дизайна.
+- **Преобразование переменных** — Использует `StylesToVar` для трансформации элементов свойств в валидные CSS-переменные.
+- **Динамическое разрешение вычислений** — Рекурсивно разрешает выражения `calc()`, которые ссылаются на другие переменные, гарантируя, что конечные значения будут предварительно вычислены, где это возможно.
+- **Интеграция с SCSS** — Автоматически включает необходимые директивы SCSS `@use` для определений свойств.
+
+## Инициализация
+
+Для инициализации объекта вызовите конструктор `StylesRoot(items)`.
+
+**Параметры:**
+- `items: PropertiesItems` — объект для работы со списком свойств дизайна.
+
+```typescript
+import { StylesRoot, PropertiesItems } from '@dxtmisha/scripts'
+
+// 1. Инициализация PropertiesItems
+const items = new PropertiesItems(designData)
+
+// 2. Инициализация StylesRoot
+const generator = new StylesRoot(items)
+```
+
+## Методы
+
+### Управление
+
+- `init(): string[]` — Основная точка входа. Обрабатывает список свойств, разрешает вычисления и возвращает массив строк, представляющих полный блок `:root` с его импортами.