@dxtmisha/wiki 0.25.1 → 0.39.2

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

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesRoot - Trình tạo biến Root'/>
+
+# Lớp StylesRoot
+
+Lớp `StylesRoot` chịu trách nhiệm tạo khối CSS `:root` toàn cục từ các token thiết kế. Nó chuyển đổi các token thành các biến CSS và giải quyết các biểu thức `calc()` phức tạp một cách thông minh để đảm bảo tính tương thích của trình duyệt.
+
+## Các tính năng chính
+
+- **Tạo khối Root** — Tạo cấu trúc `:root { ... }` tiêu chuẩn chứa tất cả các token thiết kế.
+- **Chuyển đổi biến** — Sử dụng `StylesToVar` để chuyển đổi các mục thuộc tính thành các biến CSS hợp lệ.
+- **Giải quyết tính toán động** — Giải quyết đệ quy các biểu thức `calc()` tham chiếu đến các biến khác, đảm bảo rằng các giá trị cuối cùng được tính toán trước nếu có thể.
+- **Tích hợp SCSS** — Tự động bao gồm các chỉ thị SCSS `@use` cần thiết cho các định nghĩa thuộc tính.
+
+## Khởi tạo
+
+Để khởi tạo đối tượng, hãy gọi hàm khởi tạo `StylesRoot(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 { StylesRoot, PropertiesItems } from '@dxtmisha/scripts'
+
+// 1. Khởi tạo PropertiesItems
+const items = new PropertiesItems(designData)
+
+// 2. Khởi tạo StylesRoot
+const generator = new StylesRoot(items)
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `init(): string[]` — Điểm bắt đầu chính. Xử lý danh sách thuộc tính, giải quyết các tính toán và trả về một mảng các chuỗi đại diện cho khối `:root` hoàn chỉnh cùng với các import của nó.

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

@@ -0,0 +1,50 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToAbstract - Base Class for Style Conversion'/>
+
+# StylesToAbstract Class
+
+The `StylesToAbstract` class serves as the foundation for all style conversion mechanisms. It provides a standardized interface and a set of helper methods for translating design properties into CSS-compatible structures.
+
+## Key Features
+
+- **Standardized Processing Pipeline** — Ensures all sub-classes follow the same `make` → `treatment` → `addSpace` workflow.
+- **Property Context Management** — Automatically manages the current design property, indentation levels, and tree position.
+- **Flexible Content Delegation** — Supports recursive property processing via callables.
+- **Path and Name Resolution** — Built-in helpers to extract and normalize property names and CSS values.
+
+## Initialization
+
+As an abstract class, `StylesToAbstract` cannot be instantiated directly. It serves as a base for specific style converters.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string (e.g., `"  "` or `"\t"`).
+- `content?: () => string[]` — a callable function used to process sub-properties (optional).
+- `first?: boolean` — indicates if this is the first element in the current list/tree level (optional, default: `true`).
+
+```typescript
+import { StylesToAbstract } from '@dxtmisha/scripts'
+
+// Example: Creating a concrete implementation
+class StylesToCustom extends StylesToAbstract {
+  protected treatment(): string[] {
+    // Defines the specific conversion logic
+    return [
+      `${this.getName()} {`,
+      `  content: ${this.getValue()};`,
+      '}'
+    ]
+  }
+}
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the transformation and adds the required indentation to each line.
+
+### Abstract
+
+- `treatment(): string[]` — Defines the specific conversion logic for translating property data into a style structure. Subclasses must implement this method.

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

@@ -0,0 +1,50 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToAbstract - Базовый класс для преобразования стилей'/>
+
+# Класс StylesToAbstract
+
+Класс `StylesToAbstract` является основой для всех механизмов преобразования стилей. Он предоставляет стандартизированный интерфейс и набор вспомогательных методов для перевода свойств дизайна в CSS-совместимые структуры.
+
+## Ключевые особенности
+
+- **Стандартизированный конвейер обработки** — Гарантирует, что все подклассы следуют одному и тому же рабочему процессу: `make` → `treatment` → `addSpace`.
+- **Управление контекстом свойств** — Автоматически управляет текущим свойством дизайна, уровнями отступов и положением в дереве.
+- **Гибкое делегирование контента** — Поддерживает рекурсивную обработку свойств через вызываемых функций.
+- **Разрешение путей и имен** — Встроенные помощники для извлечения и нормализации имен свойств и значений CSS.
+
+## Инициализация
+
+Являясь абстрактным классом, `StylesToAbstract` не может быть создан напрямую. Он служит базой для конкретных преобразователей стилей.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая ветка дерева свойств, которая обрабатывается.
+- `space: string` — строка отступа (например, `"  "` или `"\t"`).
+- `content?: () => string[]` — вызываемая функция, используемая для обработки подсвойств (необязательно).
+- `first?: boolean` — указывает, является ли этот элемент первым в текущем списке или на уровне дерева (необязательно, по умолчанию: `true`).
+
+```typescript
+import { StylesToAbstract } from '@dxtmisha/scripts'
+
+// Пример: Создание конкретной реализации
+class StylesToCustom extends StylesToAbstract {
+  protected treatment(): string[] {
+    // Определите здесь логику преобразования
+    return [
+      `${this.getName()} {`,
+      `  content: ${this.getValue()};`,
+      '}'
+    ]
+  }
+}
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует преобразование и добавляет необходимый отступ к каждой строке.
+
+### Абстрактные
+
+- `treatment(): string[]` — Определяет конкретную логику преобразования данных свойства в структуру стиля. Подклассы должны реализовать этот метод.

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

@@ -0,0 +1,50 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToAbstract - Lớp cơ sở để chuyển đổi Style'/>
+
+# Lớp StylesToAbstract
+
+Lớp `StylesToAbstract` đóng vai trò là nền tảng cho tất cả các cơ chế chuyển đổi style. Nó cung cấp một giao diện tiêu chuẩn hóa và một bộ các phương thức hỗ trợ để dịch các thuộc tính thiết kế sang các cấu trúc tương thích với CSS.
+
+## Các tính năng chính
+
+- **Luồng xử lý tiêu chuẩn hóa** — Đảm bảo tất cả các lớp con đều tuân theo cùng một quy trình xử lý: `make` → `treatment` → `addSpace`.
+- **Quản lý ngữ cảnh thuộc tính** — Tự động quản lý thuộc tính thiết kế hiện tại, mức độ thụt lề và vị trí trong cây thư mục.
+- **Ủy quyền nội dung linh hoạt** — Hỗ trợ xử lý thuộc tính đệ quy thông qua các hàm có thể gọi (callables).
+- **Phân giải đường dẫn và tên** — Các trình hỗ trợ tích hợp để trích xuất và chuẩn hóa tên thuộc tính và giá trị CSS.
+
+## Khởi tạo
+
+Là một lớp trừu tượng (abstract class), `StylesToAbstract` không thể được khởi tạo trực tiếp. Nó phục vụ như một lớp cơ sở cho các trình chuyển đổi style cụ thể.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề (ví dụ: `"  "` hoặc `"\t"`).
+- `content?: () => string[]` — một hàm có thể gọi được sử dụng để xử lý các thuộc tính con (tùy chọn).
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên trong danh sách/cấp độ cây hiện tại hay không (tùy chọn, mặc định: `true`).
+
+```typescript
+import { StylesToAbstract } from '@dxtmisha/scripts'
+
+// Ví dụ: Tạo một triển khai cụ thể
+class StylesToCustom extends StylesToAbstract {
+  protected treatment(): string[] {
+    // Xác định logic chuyển đổi tùy chỉnh tại đây
+    return [
+      `${this.getName()} {`,
+      `  content: ${this.getValue()};`,
+      '}'
+    ]
+  }
+}
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc chuyển đổi và thêm thụt lề cần thiết vào mỗi dòng.
+
+### Phương thức trừu tượng
+
+- `treatment(): string[]` — Xác định logic chuyển đổi cụ thể để dịch dữ liệu thuộc tính sang cấu trúc style. Các lớp con phải triển khai phương thức này.

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToAnimate - Animation Generator'/>
+
+# StylesToAnimate Class
+
+The `StylesToAnimate` class is responsible for generating CSS `@keyframes` animations from design properties. It implements the necessary logic to wrap nested keyframe rules within a named animation block.
+
+## Key Features
+
+- **Keyframes Wrapping** — Automatically wraps the generated style content within a `@keyframes` block.
+- **Dynamic Naming** — Uses the design property name to define the animation identifier.
+- **Indentation Management** — Correctly handles block indentation and optional leading empty lines.
+
+## Initialization
+
+Initialize the `StylesToAnimate` converter with the required property and a content callable for the keyframe steps.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string (e.g., `"  "` or `"\t"`).
+- `content?: () => string[]` — a callable function that returns an array of strings representing the keyframes.
+- `first?: boolean` — indicates if this is the first element in the current level (optional, default: `true`).
+
+```typescript
+import { StylesToAnimate } from '@dxtmisha/scripts'
+
+// Usage in conversion logic
+const converter = new StylesToAnimate(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the transformation and adds the required indentation to each line.
+

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToAnimate - Генератор анимаций'/>
+
+# Класс StylesToAnimate
+
+Класс `StylesToAnimate` отвечает за создание CSS-анимаций `@keyframes` на основе свойств дизайна. Он реализует логику для обертывания вложенных правил ключевых кадров в именованный блок анимации.
+
+## Ключевые возможности
+
+- **Обертка Keyframes** — Автоматически оборачивает созданный контент стилей в блок `@keyframes`.
+- **Динамическое именование** — Использует имя свойства дизайна для определения идентификатора анимации.
+- **Управление отступами** — Корректно обрабатывает отступы блоков и необязательные начальные пустые строки.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToAnimate` с помощью необходимого свойства и функции контента для шагов анимации.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая ветка дерева свойств, которая обрабатывается.
+- `space: string` — строка отступа (например, `"  "` или `"\t"`).
+- `content?: () => string[]` — вызываемая функция, которая возвращает массив строк, представляющих ключевые кадры.
+- `first?: boolean` — указывает, является ли этот элемент первым на текущем уровне (необязательно, по умолчанию: `true`).
+
+```typescript
+import { StylesToAnimate } from '@dxtmisha/scripts'
+
+// Использование в логике преобразования
+const converter = new StylesToAnimate(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует преобразование и добавляет необходимый отступ к каждой строке.
+

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToAnimate - Trình tạo hiệu ứng (Animation)'/>
+
+# Lớp StylesToAnimate
+
+Lớp `StylesToAnimate` chịu trách nhiệm tạo các hiệu ứng CSS `@keyframes` từ các thuộc tính thiết kế. Nó triển khai logic để bao bọc các quy tắc khung hình chính (keyframes) lồng nhau trong một khối animation có tên.
+
+## Các tính năng chính
+
+- **Bao bọc Keyframes** — Tự động bao bọc nội dung style được tạo bên trong một khối `@keyframes`.
+- **Đặt tên động** — Sử dụng tên của thuộc tính thiết kế để định nghĩa định danh cho hiệu ứng.
+- **Quản lý thụt lề** — Xử lý chính xác thụt lề khối và các dòng trống dẫn đầu tùy chọn.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToAnimate` với thuộc tính bắt buộc và một hàm gọi nội dung cho các bước khung hình chính (keyframes).
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề (ví dụ: `"  "` hoặc `"\t"`).
+- `content?: () => string[]` — một hàm có thể gọi trả về một mảng các chuỗi đại diện cho các keyframes.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên trong cấp độ hiện tại hay không (tùy chọn, mặc định: `true`).
+
+```typescript
+import { StylesToAnimate } from '@dxtmisha/scripts'
+
+// Sử dụng trong logic chuyển đổi
+const converter = new StylesToAnimate(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc chuyển đổi và thêm thụt lề cần thiết vào mỗi dòng.
+

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToClass - CSS Class Generator'/>
+
+# StylesToClass Class
+
+The `StylesToClass` class is used to generate standard CSS rules (selectors and their content) from design properties. It ensures that blocks are only generated if they contain nested rules.
+
+## Key Features
+
+- **Selective Generation** — Only produces output if the `content()` callable returns a non-empty array.
+- **Selector Resolution** — Uses the design property name as the CSS selector.
+- **Automatic Block Wrapping** — Correctly wraps properties within standard CSS braces `{}`.
+
+## Initialization
+
+Initialize the `StylesToClass` converter with the required property and a content callable for the nested style rules.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string (e.g., `"  "` or `"\t"`).
+- `content?: () => string[]` — a callable function that returns an array of strings representing the internal styles.
+- `first?: boolean` — indicates if this is the first element in the current level (optional, default: `true`).
+
+```typescript
+import { StylesToClass } from '@dxtmisha/scripts'
+
+// Usage in conversion logic
+const converter = new StylesToClass(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the transformation and adds the required indentation to each line.
+

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToClass - Генератор CSS-классов'/>
+
+# Класс StylesToClass
+
+Класс `StylesToClass` используется для создания стандартных CSS-правил (селекторов и их содержимого) на основе свойств дизайна. Он гарантирует, что блоки создаются только в том случае, если они содержат вложенные правила.
+
+## Ключевые возможности
+
+- **Выборочная генерация** — Создает вывод только в том случае, если вызываемая функция `content()` возвращает непустой массив.
+- **Разрешение селектора** — Использует имя свойства дизайна в качестве CSS-селектора.
+- **Автоматическая обертка блока** — Корректно оборачивает свойства в стандартные фигурные скобки CSS `{}`.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToClass` с помощью необходимого свойства и функции контента для вложенных правил стиля.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая ветка дерева свойств, которая обрабатывается.
+- `space: string` — строка отступа (например, `"  "` или `"\t"`).
+- `content?: () => string[]` — вызываемая функция, которая возвращает массив строк, представляющих внутренние стили.
+- `first?: boolean` — указывает, является ли этот элемент первым на текущем уровне (необязательно, по умолчанию: `true`).
+
+```typescript
+import { StylesToClass } from '@dxtmisha/scripts'
+
+// Использование в логике преобразования
+const converter = new StylesToClass(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует преобразование и добавляет необходимый отступ к каждой строке.
+

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToClass - Trình tạo CSS Class'/>
+
+# Lớp StylesToClass
+
+Lớp `StylesToClass` được sử dụng để tạo các quy tắc CSS tiêu chuẩn (selector và nội dung của chúng) từ các thuộc tính thiết kế. Nó đảm bảo rằng các khối chỉ được tạo nếu chúng chứa các quy tắc lồng nhau.
+
+## Các tính năng chính
+
+- **Tạo có chọn lọc** — Chỉ tạo đầu ra nếu hàm gọi `content()` trả về một mảng không trống.
+- **Phân giải Selector** — Sử dụng tên thuộc tính thiết kế làm CSS selector.
+- **Tự động bao bọc khối** — Bao bọc chính xác các thuộc tính bên trong dấu ngoặc nhọn CSS tiêu chuẩn `{}`.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToClass` với thuộc tính bắt buộc và một hàm gọi nội dung cho các quy tắc style lồng nhau.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề (ví dụ: `"  "` hoặc `"\t"`).
+- `content?: () => string[]` — một hàm có thể gọi trả về một mảng các chuỗi đại diện cho các style nội bộ.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên trong cấp độ hiện tại hay không (tùy chọn, mặc định: `true`).
+
+```typescript
+import { StylesToClass } from '@dxtmisha/scripts'
+
+// Sử dụng trong logic chuyển đổi
+const converter = new StylesToClass(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc chuyển đổi và thêm thụt lề cần thiết vào mỗi dòng.
+

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToClassFull - Full Class Name Generator'/>
+
+# StylesToClassFull Class
+
+The `StylesToClassFull` class is designed to generate CSS rules where the selector is provided as a full string. Unlike `StylesToClass`, this class always generates the CSS block, even if it contains no internal properties.
+
+## Key Features
+
+- **Mandatory Generation** — Always produces a CSS block with the specified selector.
+- **Full Selector Support** — Directly uses the provided string as the CSS selector without additional processing.
+- **Automatic Block Wrapping** — Correctly wraps content within standard CSS braces `{}`.
+
+## Initialization
+
+Initialize the `StylesToClassFull` converter with the required property and a content callable for the style rules.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string (e.g., `"  "` or `"\t"`).
+- `content?: () => string[]` — a callable function that returns an array of strings representing the internal style rules.
+- `first?: boolean` — indicates if this is the first element in the current level (optional, default: `true`).
+
+```typescript
+import { StylesToClassFull } from '@dxtmisha/scripts'
+
+// Usage in conversion logic
+const converter = new StylesToClassFull(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the transformation and adds the required indentation to each line.
+

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToClassFull - Генератор полных названий классов'/>
+
+# Класс StylesToClassFull
+
+Класс `StylesToClassFull` предназначен для создания CSS-правил, где селектор предоставляется в виде полной строки. В отличие от `StylesToClass`, этот класс всегда создает CSS-блок, даже если он не содержит внутренних свойств.
+
+## Ключевые возможности
+
+- **Обязательная генерация** — Всегда создает CSS-блок с указанным селектором.
+- **Поддержка полного селектора** — Напрямую использует предоставленную строку в качестве CSS-селектора без дополнительной обработки.
+- **Автоматическая обертка блока** — Корректно оборачивает содержимое в стандартные фигурные скобки CSS `{}`.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToClassFull` с помощью необходимого свойства и функции контента для правил стиля.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая ветка дерева свойств, которая обрабатывается.
+- `space: string` — строка отступа (например, `"  "` или `"\t"`).
+- `content?: () => string[]` — вызываемая функция, которая возвращает массив строк, представляющих внутренние правила стиля.
+- `first?: boolean` — указывает, является ли этот элемент первым на текущем уровне (необязательно, по умолчанию: `true`).
+
+```typescript
+import { StylesToClassFull } from '@dxtmisha/scripts'
+
+// Использование в логике преобразования
+const converter = new StylesToClassFull(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует преобразование и добавляет необходимый отступ к каждой строке.
+

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

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToClassFull - Trình tạo tên Class đầy đủ'/>
+
+# Lớp StylesToClassFull
+
+Lớp `StylesToClassFull` được thiết kế để tạo các quy tắc CSS trong đó selector được cung cấp dưới dạng một chuỗi đầy đủ. Khác với `StylesToClass`, lớp này luôn tạo khối CSS, ngay cả khi nó không chứa các thuộc tính nội bộ.
+
+## Các tính năng chính
+
+- **Tạo bắt buộc** — Luôn tạo một khối CSS với selector được chỉ định.
+- **Hỗ trợ Selector đầy đủ** — Sử dụng trực tiếp chuỗi được cung cấp làm CSS selector mà không cần xử lý thêm.
+- **Tự động bao bọc khối** — Bao bọc chính xác nội dung bên trong dấu ngoặc nhọn CSS tiêu chuẩn `{}`.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToClassFull` với thuộc tính bắt buộc và một hàm gọi nội dung cho các quy tắc style.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề (ví dụ: `"  "` hoặc `"\t"`).
+- `content?: () => string[]` — một hàm có thể gọi trả về một mảng các chuỗi đại diện cho các quy tắc style nội bộ.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên trong cấp độ hiện tại hay không (tùy chọn, mặc định: `true`).
+
+```typescript
+import { StylesToClassFull } from '@dxtmisha/scripts'
+
+// Sử dụng trong logic chuyển đổi
+const converter = new StylesToClassFull(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc chuyển đổi và thêm thụt lề cần thiết vào mỗi dòng.
+

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

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToContainer - Container Query Generator'/>
+
+# StylesToContainer Class
+
+The `StylesToContainer` class is responsible for generating CSS `@container` queries from design properties. It implements the logic to wrap nested style rules within a container query block.
+
+## Key Features
+
+- **Container Query Wrapping** — Automatically wraps the generated style content within a `@container` rule.
+- **Dynamic Query Resolution** — Uses the design property value to define the container query condition.
+- **Indentation Management** — Correctly handles block indentation and optional leading empty lines.
+
+## Initialization
+
+Initialize the `StylesToContainer` converter with the required property and a content callable for the nested rules.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string (e.g., `"  "` or `"\t"`).
+- `content?: () => string[]` — a callable function that returns an array of strings representing the internal style rules.
+- `first?: boolean` — indicates if this is the first element in the current level (optional, default: `true`).
+
+```typescript
+import { StylesToContainer } from '@dxtmisha/scripts'
+
+// Usage in conversion logic
+const converter = new StylesToContainer(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the transformation and adds the required indentation to each line.

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

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToContainer - Генератор Container Query'/>
+
+# Класс StylesToContainer
+
+Класс `StylesToContainer` отвечает за создание CSS-запросов `@container` на основе свойств дизайна. Он реализует логику для обертывания вложенных правил стилей в блок container query.
+
+## Ключевые возможности
+
+- **Обертка Container Query** — Автоматически оборачивает созданный контент стилей в правило `@container`.
+- **Динамическое разрешение запроса** — Использует значение свойства дизайна для определения условия container query.
+- **Управление отступами** — Корректно обрабатывает отступы блоков и необязательные начальные пустые строки.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToContainer` с помощью необходимого свойства и функции контента для вложенных правил.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая ветка дерева свойств, которая обрабатывается.
+- `space: string` — строка отступа (например, `"  "` или `"\t"`).
+- `content?: () => string[]` — вызываемая функция, которая возвращает массив строк, представляющих внутренние правила стиля.
+- `first?: boolean` — указывает, является ли этот элемент первым на текущем уровне (необязательно, по умолчанию: `true`).
+
+```typescript
+import { StylesToContainer } from '@dxtmisha/scripts'
+
+// Использование в логике преобразования
+const converter = new StylesToContainer(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует преобразование и добавляет необходимый отступ к каждой строке.