@dxtmisha/wiki 0.25.1 → 0.39.2

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

@@ -0,0 +1,52 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/DesignStructureClasses - Bộ phân giải CSS Class'/>
+
+# Lớp DesignStructureClasses
+
+Lớp `DesignStructureClasses` chịu trách nhiệm chuyển đổi siêu dữ liệu cấu trúc của thành phần thành một danh sách phẳng các định nghĩa lớp CSS. Nó xác định các token cụ thể được đánh dấu là lớp con (subclasses) và xây dựng các tên lớp một cách đệ quy theo các quy ước đặt tên BEM (Block Element Modifier), đảm bảo tính nhất quán trên toàn bộ kiến trúc kiểu dáng của hệ thống thiết kế.
+
+## Các tính năng chính
+
+- **Khám phá lớp đệ quy** — Duyệt sâu các cây thuộc tính để tìm các phần tử và bộ sửa đổi (modifiers) lồng nhau.
+- **Xây dựng tên BEM** — Tự động kết hợp các mã định danh cha và con bằng cách sử dụng dấu gạch dưới kép (`__`) cho các phần tử.
+- **Lập chỉ mục CamelCase** — Tạo ra các tên sạch, thân thiện với biến để sử dụng trong logic TypeScript/Vue.
+- **Hỗ trợ tên đầy đủ (Full-Name)** — Cho phép các token cụ thể bỏ qua các phân cấp cha và sử dụng tên lớp toàn cục khi cần thiết.
+- **Ánh xạ thuộc tính tự động** — Tích hợp trực tiếp với siêu dữ liệu thuộc tính tiêu chuẩn để xác định các mục nào đóng góp vào API tạo kiểu dáng.
+
+## Khởi tạo
+
+Để khởi tạo bộ phân giải lớp, hãy cung cấp tên thành phần cơ sở. Lớp sẽ tự động tải siêu dữ liệu cấu trúc liên quan thông qua trừu tượng cha của nó.
+
+**Tham số:**
+- `component: string` — Mã định danh của thành phần cần xử lý (ví dụ: `'button'`).
+
+```typescript
+import { DesignStructureClasses } from '@dxtmisha/scripts'
+
+const resolver = new DesignStructureClasses('button')
+const classes = resolver.get()
+```
+
+## Các phương thức
+
+### Thông tin
+
+- `get(): DesignStructureClassesList` — Trả về danh sách đầy đủ các đối tượng ánh xạ lớp đã được xử lý.
+
+## Các thao tác (Operations)
+
+### Quy trình phân giải lớp
+
+Khi được khởi tạo, lớp sẽ tự động thực thi logic phân giải của nó:
+1. **Phân tích thuộc tính**: Động cơ quét danh sách `PropertyItem` của thành phần để tìm các thẻ cho biết kiểu `subclass`.
+2. **Xây dựng không gian tên**: Nó theo dõi phân cấp của các tên. Ví dụ, một `label` bên trong `button` sẽ trở thành `button__label`.
+3. **Cấu trúc dữ liệu**: Đối với mỗi lớp được xác định, nó tạo ra một đối tượng chứa:
+    - **index**: Phiên bản CamelCase của tên (ví dụ: `buttonLabel`) cho các tham chiếu mã.
+    - **className**: Chuỗi lớp CSS thực tế (ví dụ: `button__label`).
+    - **full**: Một cờ cho biết tên đó có phải là một lớp toàn cục tuyệt đối hay không.
+4. **Làm phẳng**: Cây đệ quy được làm phẳng thành một mảng duy nhất, cung cấp khả năng tra cứu nhanh chóng cho các động cơ mẫu.
+
+### Tích hợp với các trình tạo mã
+
+Lớp này cung cấp ánh xạ thiết yếu được `DesignReplace` sử dụng để tiêm các định nghĩa lớp vào các triển khai thành phần. Bằng cách tập trung logic đặt tên, nó đảm bảo rằng các thay đổi đối với quy ước đặt tên có thể được áp dụng chung cho tất cả các thành phần mà không cần chỉnh sửa tệp thủ công.

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

@@ -0,0 +1,49 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/DesignStructureItemAbstract - Base Structural Resolver'/>
+
+# DesignStructureItemAbstract Class
+
+The `DesignStructureItemAbstract` class serves as the fundamental building block for all specialized structural resolvers within the design system. It handles the low-level orchestration of the `Properties` engine, ensuring that every inheriting class has instant access to validated component metadata and design system tokens.
+
+## Key Features
+
+- **Standardized Initialization** — Automatically sets up the `Properties` environment for any inheriting resolver.
+- **Unified Link Generation** — Centralizes the logic for creating internal cross-references within the design system's JSON metadata.
+- **Metadata Fetching** — Automatically retrieves the component-specific slice of structural data during construction.
+- **Contract Enforcement** — Uses abstract properties to ensure all subclasses implement a standardized data-access pattern.
+
+## Initialization
+
+As an abstract class, `DesignStructureItemAbstract` cannot be instantiated directly. Inheriting classes must call `super()` with the component's identifier.
+
+**Parameters:**
+- `component: string` — The identifier of the component whose structure is being analyzed (e.g., `'button'`).
+
+**Internal State:**
+- `properties`: An instance of the global `Properties` manager.
+- `items`: The specific subset of structural data resolved for the given component.
+
+## Methods
+
+### Data Access
+
+- `get(): D` — Implementation-specific method that returns the fully processed data object.
+
+### Internal Logic (Protected)
+
+- `getLink(): string` — Generates the formatted internal link (e.g., `{misha.button}`) used to look up tokens in the global design metadata.
+
+## Operations
+
+### The Resolver Foundation
+
+When a subclass is instantiated (e.g., `DesignStructureClasses`), the abstract parent coordinates the following lifecycle:
+1. **Engine Setup**: A new `Properties` instance is initialized to provide access to the design system's global state.
+2. **Identity Linkage**: The `getLink()` method generates a specialized string identifier that bridges the component name with the current design theme.
+3. **Data Localization**: Using the generated link, the class queries the global property store to isolate only the relevant metadata for the current component, storing it in the `items` property.
+4. **Subclass Extension**: The subclass can then access `this.items` to perform its specific logic (like building class trees or formatting styles) without needing to worry about the underlying file resolution or caching.
+
+### Architecture Role
+
+This abstract class ensures that the "Read" and "Resolver" layers of the script library follow a consistent pattern. By abstracting the property loading logic, it allows developer to create new types of structural analyzers by simply focusing on the transformation logic, rather than the data fetching mechanics.

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

@@ -0,0 +1,49 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/DesignStructureItemAbstract - Базовый структурный разрешитель'/>
+
+# Класс DesignStructureItemAbstract
+
+Класс `DesignStructureItemAbstract` служит фундаментальным строительным блоком для всех специализированных структурных разрешителей в рамках дизайн-системы. Он управляет низкоуровневой оркестрацией движка `Properties`, гарантируя, что каждый наследующий класс имеет мгновенный доступ к валидированным метаданным компонентов и токенам дизайн-системы.
+
+## Ключевые особенности
+
+- **Стандартизированная инициализация** — автоматически настраивает окружение `Properties` для любого наследуемого разрешителя.
+- **Унифицированная генерация ссылок** — централизует логику создания внутренних перекрестных ссылок внутри JSON-метаданных дизайн-системы.
+- **Извлечение метаданных** — автоматически извлекает специфический для компонента срез структурных данных во время конструирования.
+- **Соблюдение контрактов** — использует абстрактные свойства, чтобы гарантировать реализацию стандартизированного паттерна доступа к данным во всех подклассах.
+
+## Инициализация
+
+Являясь абстрактным классом, `DesignStructureItemAbstract` не может быть инстанцирован напрямую. Наследуемые классы должны вызывать `super()` с идентификатором компонента.
+
+**Параметры:**
+- `component: string` — идентификатор компонента, структура которого анализируется (например, `'button'`).
+
+**Внутреннее состояние:**
+- `properties`: экземпляр глобального менеджера `Properties`.
+- `items`: специфический подмножество структурных данных, разрешенных для данного компонента.
+
+## Методы
+
+### Доступ к данным
+
+- `get(): D` — специфичный для реализации метод, который возвращает полностью обработанный объект данных.
+
+### Внутренняя логика (защищенная)
+
+- `getLink(): string` — генерирует отформатированную внутреннюю ссылку (например, `{misha.button}`), используемую для поиска токенов в глобальных метаданных дизайна.
+
+## Операции
+
+### Основа разрешителя
+
+При создании экземпляра подкласса (например, `DesignStructureClasses`), абстрактный родитель координирует следующий жизненный цикл:
+1. **Настройка движка**: инициализируется новый экземпляр `Properties` для обеспечения доступа к глобальному состоянию дизайн-системы.
+2. **Привязка идентификатора**: метод `getLink()` генерирует специализированный строковый идентификатор, который связывает имя компонента с текущей темой дизайна.
+3. **Локализация данных**: используя сгенерированную ссылку, класс опрашивает глобальное хранилище свойств, чтобы изолировать только релевантные метаданные для текущего компонента, сохраняя их в свойстве `items`.
+4. **Расширение в подклассах**: подкласс затем может получить доступ к `this.items` для выполнения своей специфической логики (например, построения деревьев классов или форматирования стилей), не беспокоясь о механизмах разрешения файлов или кэшировании.
+
+### Роль в архитектуре
+
+Этот абстрактный класс гарантирует, что уровни «Read» и «Resolver» библиотеки сценариев следуют единому шаблону. Абстрагируя логику загрузки свойств, он позволяет разработчикам создавать новые типы структурных анализаторов, сосредоточившись исключительно на логике трансформации, а не на механике получения данных.

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

@@ -0,0 +1,49 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/DesignStructureItemAbstract - Bộ phân giải cấu trúc cơ sở'/>
+
+# Lớp DesignStructureItemAbstract
+
+Lớp `DesignStructureItemAbstract` đóng vai trò là khối xây dựng nền tảng cho tất cả các bộ phân giải cấu trúc chuyên biệt trong hệ thống thiết kế. Nó xử lý việc điều phối cấp thấp của động cơ `Properties`, đảm bảo rằng mọi lớp kế thừa đều có quyền truy cập tức thì vào siêu dữ liệu thành phần và các token hệ thống thiết kế đã được xác thực.
+
+## Các tính năng chính
+
+- **Khởi tạo tiêu chuẩn hóa** — Tự động thiết lập môi trường `Properties` cho bất kỳ bộ phân giải kế thừa nào.
+- **Tạo liên kết thống nhất** — Tập trung logic để tạo các tham chiếu chéo nội bộ trong siêu dữ liệu JSON của hệ thống thiết kế.
+- **Lấy siêu dữ liệu** — Tự động truy xuất lát cắt dữ liệu cấu trúc cụ thể của thành phần trong quá trình xây dựng.
+- **Thực thi hợp đồng** — Sử dụng các thuộc tính trừu tượng để đảm bảo tất cả các lớp con đều triển khai một mẫu truy cập dữ liệu tiêu chuẩn hóa.
+
+## Khởi tạo
+
+Là một lớp trừu tượng, `DesignStructureItemAbstract` không thể được khởi tạo trực tiếp. Các lớp kế thừa phải gọi `super()` với mã định danh của thành phần.
+
+**Tham số:**
+- `component: string` — Mã định danh của thành phần có cấu trúc đang được phân tích (ví dụ: `'button'`).
+
+**Trạng thái nội bộ:**
+- `properties`: Một phiên bản của trình quản lý `Properties` toàn cục.
+- `items`: Tập hợp con cụ thể của dữ liệu cấu trúc được phân giải cho thành phần đã cho.
+
+## Các phương thức
+
+### Truy cập dữ liệu
+
+- `get(): D` — Phương thức cụ thể theo triển khai trả về đối tượng dữ liệu đã được xử lý hoàn chỉnh.
+
+### Logic nội bộ (Được bảo vệ)
+
+- `getLink(): string` — Tạo liên kết nội bộ đã được định dạng (ví dụ: `{misha.button}`) được dùng để tra cứu các token trong siêu dữ liệu thiết kế toàn cục.
+
+## Các thao tác (Operations)
+
+### Nền tảng của bộ phân giải
+
+Khi một lớp con được khởi tạo (ví dụ: `DesignStructureClasses`), lớp cha trừu tượng sẽ điều phối vòng đời sau:
+1. **Thiết lập động cơ**: Một thực thể `Properties` mới được khởi tạo để cung cấp quyền truy cập vào trạng thái toàn cục của hệ thống thiết kế.
+2. **Liên kết định danh**: Phương thức `getLink()` tạo ra một mã định danh chuỗi chuyên biệt kết nối tên thành phần với chủ đề thiết kế hiện tại.
+3. **Bản địa hóa dữ liệu**: Sử dụng liên kết đã tạo, lớp sẽ truy vấn kho lưu trữ thuộc tính toàn cục để tách biệt chỉ các siêu dữ liệu liên quan cho thành phần hiện tại, lưu trữ nó trong thuộc tính `items`.
+4. **Mở rộng lớp con**: Lớp con sau đó có thể truy cập `this.items` để thực hiện logic cụ thể của nó (như xây dựng cây lớp hoặc định dạng kiểu dáng) mà không cần lo lắng về việc phân giải tệp hoặc bộ nhớ đệm bên dưới.
+
+### Vai trò kiến trúc
+
+Lớp trừu tượng này đảm bảo rằng các lớp "Read" và "Resolver" của thư viện tập lệnh tuân theo một mẫu nhất quán. Bằng cách trừu tượng hóa logic tải thuộc tính, nó cho phép nhà phát triển tạo ra các loại trình phân tích cấu trúc mới bằng cách chỉ tập trung vào logic chuyển đổi, thay vì cơ chế lấy dữ liệu.

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

@@ -0,0 +1,55 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/DesignStructureRead - Property Dependency Resolver'/>
+
+# DesignStructureRead Class
+
+The `DesignStructureRead` class is the primary parser for resolving dependencies and states between component properties. It transforms raw design system tokens into a structured list of properties, identifying which items should be exposed as public props and which represent internal interactive states or linked CSS class dependencies.
+
+## Key Features
+
+- **State Discovery** — Identifies property tokens defined as interactive states (e.g., `:hover`, `:active`) and builds their dependency chains.
+- **Link Class Resolution** — Detects and resolves references to external component classes to maintain BEM hierarchy.
+- **Value Compilation** — Aggregates all possible values for a property, including those derived from nested state structures, to generate accurate TypeScript unions.
+- **Prop Validation** — Filters and validates which property tokens are eligible for export as public component properties based on system rules.
+- **Independant Value Synthesis** — Automatically injects boolean flags for properties that lack explicit value tokens but require state tracking.
+
+## Initialization
+
+To initialize the property reader, provide the base component name. The class will automatically resolve the component's metadata via its parent abstraction and trigger the multi-stage parsing pipeline.
+
+**Parameters:**
+- `component: string` — The identifier of the component to analyze (e.g., `'input'`).
+
+```typescript
+import { DesignStructureRead } from '@dxtmisha/scripts'
+
+const reader = new DesignStructureRead('button')
+const structureList = reader.get()
+const states = reader.getStates()
+```
+
+## Methods
+
+### Information
+
+- `get(): DesignStructureList` — Returns the fully resolved linear list of component properties.
+- `getStates(): DesignStructureStateList` — Returns the hierarchical list of states and their associated property dependencies.
+
+## Operations
+
+### The Parsing Pipeline
+
+Upon construction, `DesignStructureRead` executes a series of transformations to build the final data model:
+1. **State Mapping (`makeState`)**: Recursively traverses the property tree to isolate tokens marked as `state` or `linkClass`.
+2. **Main Structure Initialization (`makeMain`)**: Creates the base entry for each identified prop, normalizing names and metadata.
+3. **Base Value Extraction (`makeValue`)**: Resolves the direct immediate values assigned to each property.
+4. **Value Expansion (`makeValueAll`)**: Aggregates values from all possible interactive states to ensure the property API covers every logical case.
+5. **Deduplication (`makeValueUnique`)**: Normalizes the value lists, removing duplicates and ensuring boolean fallbacks exist where necessary.
+
+### Handling Linked Classes
+
+Special logic is applied when a property references another component class (`linkClass`). The resolver:
+1. **Identifies the reference**: Locates the specific variable link in the global design metadata.
+2. **Naming Transformation**: Converts the reference into a standardized BEM class name (e.g., `theme-button--primary`).
+3. **Recursive Resolution**: Triggers a sub-parsing cycle for the linked component to ensure its properties and states are accounted for in the primary component's dependency tree.

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

@@ -0,0 +1,55 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/DesignStructureRead - Разрешитель зависимостей свойств'/>
+
+# Класс DesignStructureRead
+
+Класс `DesignStructureRead` является основным парсером для разрешения зависимостей и состояний между свойствами компонентов. Он преобразует сырые токены дизайн-системы в структурированный список свойств, определяя, какие элементы должны быть представлены как публичные пропсы, а какие представляют собой внутренние интерактивные состояния или зависимости связанных CSS-классов.
+
+## Ключевые особенности
+
+- **Обнаружение состояний** — идентифицирует токены свойств, определенные как интерактивные состояния (например, `:hover`, `:active`), и выстраивает цепочки их зависимостей.
+- **Разрешение связанных классов** — обнаруживает и разрешает ссылки на внешние классы компонентов для сохранения иерархии BEM.
+- **Компиляция значений** — агрегирует все возможные значения для свойства, включая те, что получены из вложенных структур состояний, для генерации точных объединений TypeScript.
+- **Валидация пропсов** — фильтрует и проверяет, какие токены свойств имеют право на экспорт в качестве публичных свойств компонента на основе системных правил.
+- **Синтез независимых значений** — автоматически внедряет булевы флаги для свойств, у которых отсутствуют явные токены значений, но требуется отслеживание состояния.
+
+## Инициализация
+
+Для инициализации читателя свойств укажите базовое имя компонента. Класс автоматически разрешит метаданные компонента через свою родительскую абстракцию и запустит многоэтапный конвейер парсинга.
+
+**Параметры:**
+- `component: string` — идентификатор компонента для анализа (например, `'input'`).
+
+```typescript
+import { DesignStructureRead } from '@dxtmisha/scripts'
+
+const reader = new DesignStructureRead('button')
+const structureList = reader.get()
+const states = reader.getStates()
+```
+
+## Методы
+
+### Информация
+
+- `get(): DesignStructureList` — возвращает полностью разрешенный линейный список свойств компонента.
+- `getStates(): DesignStructureStateList` — возвращает иерархический список состояний и связанных с ними зависимостей свойств.
+
+## Операции
+
+### Конвейер парсинга
+
+При создании экземпляра `DesignStructureRead` выполняет серию трансформаций для построения финальной модели данных:
+1. **Маппинг состояний (`makeState`)**: рекурсивно обходит дерево свойств для изоляции токенов, помеченных как `state` или `linkClass`.
+2. **Инициализация основной структуры (`makeMain`)**: создает базовую запись для каждого идентифицированного пропса, нормализуя имена и метаданные.
+3. **Извлечение базовых значений (`makeValue`)**: разрешает прямые непосредственные значения, назначенные каждому свойству.
+4. **Расширение значений (`makeValueAll`)**: агрегирует значения из всех возможных интерактивных состояний, чтобы API свойств охватывало все логические случаи.
+5. **Дедупликация (`makeValueUnique`)**: нормализует списки значений, удаляя дубликаты и обеспечивая наличие булевых фолбэков там, где это необходимо.
+
+### Обработка связанных классов
+
+Специальная логика применяется, когда свойство ссылается на класс другого компонента (`linkClass`). Разрешитель:
+1. **Идентифицирует ссылку**: находит конкретную ссылку на переменную в глобальных метаданных дизайна.
+2. **Трансформация имени**: преобразует ссылку в стандартизированное имя класса BEM (например, `theme-button--primary`).
+3. **Рекурсивное разрешение**: запускает цикл подпарсинга для связанного компонента, чтобы гарантировать учет его свойств и состояний в дереве зависимостей основного компонента.

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

@@ -0,0 +1,55 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/DesignStructureRead - Bộ phân giải phụ thuộc thuộc tính'/>
+
+# Lớp DesignStructureRead
+
+Lớp `DesignStructureRead` là trình phân tích cú pháp chính để phân giải các phụ thuộc và trạng thái giữa các thuộc tính của thành phần. Nó chuyển đổi các token hệ thống thiết kế thô thành một danh sách các thuộc tính có cấu trúc, xác định mục nào sẽ được hiển thị dưới dạng props công khai và mục nào đại diện cho các trạng thái tương tác nội bộ hoặc các phụ thuộc lớp CSS được liên kết.
+
+## Các tính năng chính
+
+- **Khám phá trạng thái** — Xác định các token thuộc tính được định nghĩa là trạng thái tương tác (ví dụ: `:hover`, `:active`) và xây dựng các chuỗi phụ thuộc của chúng.
+- **Phân giải lớp liên kết** — Phát hiện và phân giải các tham chiếu đến các lớp thành phần bên ngoài để duy trì phân cấp BEM.
+- **Biên soạn giá trị** — Tập hợp tất cả các giá trị có thể có cho một thuộc tính, bao gồm cả các giá trị bắt nguồn từ các cấu trúc trạng thái lồng nhau, để tạo ra các union TypeScript chính xác.
+- **Xác thực Prop** — Lọc và xác thực các token thuộc tính nào đủ điều kiện để xuất dưới dạng thuộc tính thành phần công khai dựa trên các quy tắc hệ thống.
+- **Tổng hợp giá trị độc lập** — Tự động chèn các cờ boolean cho các thuộc tính thiếu các token giá trị rõ ràng nhưng yêu cầu theo dõi trạng thái.
+
+## Khởi tạo
+
+Để khởi tạo trình đọc thuộc tính, hãy cung cấp tên thành phần cơ sở. Lớp sẽ tự động phân giải siêu dữ liệu của thành phần thông qua trừu tượng cha của nó và kích hoạt quy trình phân tích cú pháp nhiều giai đoạn.
+
+**Tham số:**
+- `component: string` — Mã định danh của thành phần cần phân tích (ví dụ: `'input'`).
+
+```typescript
+import { DesignStructureRead } from '@dxtmisha/scripts'
+
+const reader = new DesignStructureRead('button')
+const structureList = reader.get()
+const states = reader.getStates()
+```
+
+## Các phương thức
+
+### Thông tin
+
+- `get(): DesignStructureList` — Trả về danh sách tuyến tính đã được phân giải hoàn chỉnh của các thuộc tính thành phần.
+- `getStates(): DesignStructureStateList` — Trả về danh sách phân cấp các trạng thái và các phụ thuộc thuộc tính liên quan của chúng.
+
+## Các thao tác (Operations)
+
+### Quy trình phân tích cú pháp (The Parsing Pipeline)
+
+Khi được xây dựng, `DesignStructureRead` thực hiện một chuỗi các chuyển đổi để xây dựng mô hình dữ liệu cuối cùng:
+1. **Ánh xạ trạng thái (`makeState`)**: Duyệt đệ quy cây thuộc tính để tách biệt các token được đánh dấu là `state` hoặc `linkClass`.
+2. **Khởi tạo cấu trúc chính (`makeMain`)**: Tạo mục nhập cơ sở cho mỗi prop được xác định, chuẩn hóa tên và siêu dữ liệu.
+3. **Trích xuất giá trị cơ sở (`makeValue`)**: Phân giải các giá trị trực tiếp được gán cho mỗi thuộc tính.
+4. **Mở rộng giá trị (`makeValueAll`)**: Tập hợp các giá trị từ tất cả các trạng thái tương tác có thể để đảm bảo API thuộc tính bao quát mọi trường hợp logic.
+5. **Duy nhất hóa giá trị (`makeValueUnique`)**: Chuẩn hóa các danh sách giá trị, loại bỏ các mục trùng lặp và đảm bảo các fallback boolean tồn tại khi cần thiết.
+
+### Xử lý các lớp liên kết (Linked Classes)
+
+Logic đặc biệt được áp dụng khi một thuộc tính tham chiếu đến một lớp thành phần khác (`linkClass`). Bộ phân giải sẽ:
+1. **Xác định tham chiếu**: Tìm liên kết biến cụ thể trong siêu dữ liệu thiết kế toàn cục.
+2. **Chuyển đổi tên**: Chuyển đổi tham chiếu thành tên lớp BEM tiêu chuẩn hóa (ví dụ: `theme-button--primary`).
+3. **Phân giải đệ quy**: Kích hoạt một chu kỳ phân tích cú pháp phụ cho thành phần được liên kết để đảm bảo các thuộc tính và trạng thái của nó được tính đến trong cây phụ thuộc của thành phần chính.

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

@@ -0,0 +1,48 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/DesignStructureStyles - Component Style Compiler'/>
+
+# DesignStructureStyles Class
+
+The `DesignStructureStyles` class is responsible for converting a component's structural design tokens into a standardized array of CSS property strings. By leveraging the `StylesProperties` engine, it ensures that every component inherits its base visual identity directly from the design system's central theme configuration.
+
+## Key Features
+
+- **Token-to-CSS Transformation** — Automatically maps abstract design tokens to concrete CSS properties.
+- **BEM Selector Scoping** — Wraps generated styles in a component-level selector (`& { ... }`) to ensure style isolation.
+- **Hierarchical Inheritance** — Utilizes parent structural metadata to resolve nested property variables accurately.
+- **Standardized Formatting** — Applies consistent indentation and line breaks, ensuring generated style files remain readable.
+
+## Initialization
+
+To initialize the style compiler, provide the identifier of the component whose styles needs to be generated. The class will automatically load the relevant structural metadata.
+
+**Parameters:**
+- `component: string` — The identifier of the component (e.g., `'button'`).
+
+```typescript
+import { DesignStructureStyles } from '@dxtmisha/scripts'
+
+const compiler = new DesignStructureStyles('button')
+const stylesArray = compiler.get()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — Triggers the transformation process and returns the array of CSS property strings.
+
+## Operations
+
+### The Style Compilation Flow
+
+When the compiler is initialized, it follows a structured pipeline:
+1. **Metadata Loading**: It uses the parent `DesignStructureItemAbstract` logic to fetch the specific `PropertyItemsItem` associated with the component.
+2. **Contextual Selection**: The engine wraps all output properties within a self-referencing CSS selector (`& { ... }`) to maintain compatibility with CSS-in-JS and preprocessors.
+3. **Property Resolution**: It instantiates `StylesProperties`, passing the collected metadata. This sub-engine then traverses every token, resolving theme variables, units, and fallbacks.
+4. **Output Buffering**: The final list of properties is joined into a flat array of strings, ready for injection into a CSS file or a style tag.
+
+### Integration with Theme Engine
+
+This class acts as the bridge between raw design data and the final visual representation. By centralizing the style compilation logic, the system ensures that changes to the theme's core architecture (such as variable naming conventions or unit logic) are automatically propagated to all components during the next build cycle.

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

@@ -0,0 +1,48 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/DesignStructureStyles - Компилятор стилей компонента'/>
+
+# Класс DesignStructureStyles
+
+Класс `DesignStructureStyles` отвечает за преобразование структурных дизайн-токенов компонента в стандартизированный массив строк свойств CSS. Используя движок `StylesProperties`, он гарантирует, что каждый компонент наследует свою базовую визуальную идентичность напрямую из центральной конфигурации темы дизайн-системы.
+
+## Ключевые особенности
+
+- **Трансформация токенов в CSS** — автоматически сопоставляет абстрактные токены дизайна с конкретными свойствами CSS.
+- **Изоляция селекторов (BEM)** — оборачивает сгенерированные стили в селектор уровня компонента (`& { ... }`) для обеспечения изоляции стилей.
+- **Иерархическое наследование** — использует родительские структурные метаданные для точного разрешения вложенных переменных свойств.
+- **Стандартизированное форматирование** — применяет согласованные отступы и переносы строк, гарантируя читаемость сгенерированных файлов стилей.
+
+## Инициализация
+
+Для инициализации компилятора стилей укажите идентификатор компонента, стили которого необходимо сгенерировать. Класс автоматически загрузит релевантные структурные метаданные.
+
+**Параметры:**
+- `component: string` — идентификатор компонента (например, `'button'`).
+
+```typescript
+import { DesignStructureStyles } from '@dxtmisha/scripts'
+
+const compiler = new DesignStructureStyles('button')
+const stylesArray = compiler.get()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — запускает процесс трансформации и возвращает массив строк свойств CSS.
+
+## Операции
+
+### Рабочий процесс компиляции стилей
+
+При инициализации компилятор следует структурированному конвейеру:
+1. **Загрузка метаданных**: использует логику родительского `DesignStructureItemAbstract` для получения специфического `PropertyItemsItem`, связанного с компонентом.
+2. **Контекстный селектор**: движок оборачивает все выходные свойства в самоссылающийся CSS-селектор (`& { ... }`) для поддержания совместимости с CSS-in-JS и препроцессорами.
+3. **Разрешение свойств**: создается экземпляр `StylesProperties`, которому передаются собранные метаданные. Этот суб-движок обходит каждый токен, разрешая переменные темы, юниты и фолбэки.
+4. **Буферизация вывода**: финальный список свойств объединяется в плоский массив строк, готовый к внедрению в CSS-файл или тег стиля.
+
+### Интеграция с движком тем
+
+Этот класс выступает в качестве моста между необработанными данными дизайна и финальным визуальным представлением. Централизуя логику компиляции стилей, система гарантирует, что изменения в основной архитектуре темы (такие как соглашения об именовании переменных или логика единиц измерения) автоматически распространяются на все компоненты во время следующего цикла сборки.

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

@@ -0,0 +1,48 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/DesignStructureStyles - Trình biên dịch kiểu dáng thành phần'/>
+
+# Lớp DesignStructureStyles
+
+Lớp `DesignStructureStyles` chịu trách nhiệm chuyển đổi các token thiết kế cấu trúc của thành phần thành một mảng chuẩn hóa các chuỗi thuộc tính CSS. Bằng cách tận dụng động cơ `StylesProperties`, nó đảm bảo rằng mọi thành phần đều kế thừa bản sắc hình ảnh cơ bản của mình trực tiếp từ cấu hình chủ đề trung tâm của hệ thống thiết kế.
+
+## Các tính năng chính
+
+- **Chuyển đổi Token sang CSS** — Tự động ánh xạ các token thiết kế trừu tượng sang các thuộc tính CSS cụ thể.
+- **Phạm vi bộ chọn BEM** — Gói các kiểu dáng được tạo trong một bộ chọn cấp thành phần (`& { ... }`) để đảm bảo cách ly kiểu dáng.
+- **Kế thừa phân cấp** — Sử dụng siêu dữ liệu cấu trúc của cha để phân giải chính xác các biến thuộc tính lồng nhau.
+- **Định dạng chuẩn hóa** — Áp dụng thụt lề và ngắt dòng nhất quán, đảm bảo các tệp kiểu dáng được tạo ra vẫn dễ đọc.
+
+## Khởi tạo
+
+Để khởi tạo trình biên dịch kiểu dáng, hãy cung cấp mã định danh của thành phần cần tạo kiểu dáng. Lớp sẽ tự động tải siêu dữ liệu cấu trúc liên quan.
+
+**Tham số:**
+- `component: string` — Mã định danh của thành phần (ví dụ: `'button'`).
+
+```typescript
+import { DesignStructureStyles } from '@dxtmisha/scripts'
+
+const compiler = new DesignStructureStyles('button')
+const stylesArray = compiler.get()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Kích hoạt quá trình chuyển đổi và trả về mảng các chuỗi thuộc tính CSS.
+
+## Các thao tác (Operations)
+
+### Quy trình biên dịch kiểu dáng
+
+Khi trình biên dịch được khởi tạo, nó tuân theo một quy trình có cấu trúc:
+1. **Tải siêu dữ liệu**: Nó sử dụng logic của lớp cha `DesignStructureItemAbstract` để lấy `PropertyItemsItem` cụ thể liên quan đến thành phần.
+2. **Lựa chọn ngữ cảnh**: Động cơ gói tất cả các thuộc tính đầu ra bên trong một bộ chọn CSS tự tham chiếu (`& { ... }`) để duy trì tính tương thích với CSS-in-JS và các trình tiền xử lý.
+3. **Phân giải thuộc tính**: Nó khởi tạo `StylesProperties`, chuyển siêu dữ liệu đã thu thập. Động cơ phụ này sau đó duyệt qua mọi token, phân giải các biến chủ đề, đơn vị và các phương án dự phòng (fallbacks).
+4. **Đệm đầu ra**: Danh sách các thuộc tính cuối cùng được kết hợp thành một mảng phẳng các chuỗi, sẵn sàng để tiêm vào tệp CSS hoặc thẻ style.
+
+### Tích hợp với Động cơ Chủ đề (Theme Engine)
+
+Lớp này đóng vai trò là cầu nối giữa dữ liệu thiết kế thô và biểu diễn hình ảnh cuối cùng. Bằng cách tập trung logic biên dịch kiểu dáng, hệ thống đảm bảo rằng các thay đổi đối với kiến trúc cốt lõi của chủ đề (chẳng hạn như quy ước đặt tên biến hoặc logic đơn vị) sẽ tự động được truyền bá đến tất cả các thành phần trong chu kỳ xây dựng tiếp theo.

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

@@ -0,0 +1,50 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/DesignTypes - AI Type Generator'/>
+
+# DesignTypes Class
+
+The `DesignTypes` class is a specialized utility designed to bridge the gap between complex codebase type definitions and AI coding assistants. It automates the extraction, sanitation, and compression of TypeScript declaration files (`.d.ts`), using AI to generate a hyper-minimalized version of the project's type system that provides maximum context with minimum token usage.
+
+## Key Features
+
+- **Automated Discovery** — Recursively scans distribution directories to find relevant type declaration files.
+- **Intelligent Filtering** — Automatically excludes internal constructor props and non-essential logic types while preserving public APIs.
+- **AI-Driven Compression** — Uses LLM prompts to strip unnecessary metadata (imports, Russian comments, empty lines) and consolidate definitions.
+- **Unified Output** — Combines multiple fragmented declaration files into a single, cohesive type library.
+- **Context Optimization** — Prioritizes interfaces, enums, and type aliases that are most critical for AI understanding.
+
+## Initialization
+
+Initialize the generator by specifying the source directory where the compiled declaration files are located.
+
+**Parameters:**
+- `dir: string` — The path to the input directory (default is `'dist'`).
+
+```typescript
+import { DesignTypes } from '@dxtmisha/scripts'
+
+const generator = new DesignTypes('packages/core/dist')
+generator.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): void` — Starts the full generation pipeline: discovery, combination, AI processing, and storage.
+
+## Operations
+
+### The Type Generation Pipeline
+
+When `make()` is executed, the class coordinates a multi-stage workflow:
+1. **File Filtering (`getListByFilter`)**: The engine scans the directory for `.d.ts` files, filtering out internal implementation details like `props.d.ts` or `types.d.ts` within constructor folders.
+2. **Content Validation (`isContent`)**: It verifies that each file actually contains meaningful type definitions (interfaces, types, or enums) before processing.
+3. **Consolidation (`toOneFile`)**: All identified file contents are merged into a single large string, tagged with their original file paths for context.
+4. **AI Transformation (`toAiEdit`)**: The merged content is sent to an AI assistant with specific instructions to strip boilerplate, remove non-English comments, and minimize syntax.
+5. **Persistence (`save`)**: The final, high-density type library is saved to the configured output path (usually specified in `UI_FILE_AI_TYPES`).
+
+### Use Case: AI Context Injection
+
+The primary goal of this class is to create a "knowledge artifact" that can be injected into the system prompt of LLMs working on the project. By providing a clean, compressed overview of all available types and interfaces, the AI can write type-safe code and understand component architectures with significantly higher accuracy and lower cost.