@dxtmisha/wiki 0.39.2 → 0.39.3

package/src/media/functional/ui/properties/type-var/type-var.vi.mdx

@@ -0,0 +1,63 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Biến (var)'/>
+
+# Biến (var)
+
+Engine phân giải và xuất code properties cung cấp hai cơ chế chủ đạo nhằm thao tác Mảng CSS Custom Properties (biến hệ thống): khai báo biến minh bạch qua định danh kiểu `var`, và kết xuất song song mã thuộc tính CSS đi kèm cùng biến ẩn qua thiết lập cờ `_var: true`.
+
+## Khai báo Cấu hình Tiêu chuẩn (Type `var`)
+
+Lệnh gọi thiết lập Type `var` (hoặc thông qua phím tắt ký tự `$`) trực tiếp ra lệnh cho compiler loại bỏ hoàn toàn tiến trình sinh thành thuộc tính CSS tĩnh phổ thông. Node mục tiêu sẽ được ép khung đúc toàn diện thuần túy thành CSS variable, khu biệt gọn trong Scope Module Component sở hữu.
+
+> **Kế thừa Di truyền:** Đặc tính Type `var` có khả năng lan truyền. Nếu bạn cấu hình định danh node cấp cha là `var` (hoặc thông qua phím tắt tiền tố `$`), toàn bộ các node con lồng bên trong sẽ tự động kế thừa di truyền hệ Type tương ứng. Bạn không cần thiết lập thủ công lại cụm `var` cho từng nhánh con cấp dưới.
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": {
+      "_type": "var",
+      "value": "16px"
+    }
+  }
+}
+```
+*(Sử dụng lối tắt `$padding: "16px"` trả về kết quả mảng y hệt mà không cần khai báo type cụ thể).*
+
+**Kết quả Biên dịch Dự kiến (SCSS):** 
+```scss
+.card {
+  --card-padding: 16px;
+}
+```
+
+## Khai báo Luồng Song song (Cờ `_var`)
+
+Kiến trúc UI Component thường xuyên đòi hỏi phải định hình giao diện theo quy chuẩn CSS properties thông thường nhưng lại phải nối sâu các thông số vào một bộ khung chứa CSS variable để tiện tùy biến (nhúng giao diện Theme hoặc thay đổi trạng thái động ở Vue).
+
+Giải pháp là cờ cấu hình `_var: true`. Tham số này bảo lưu loại hình định danh kiến trúc gốc của node (mặc định thuộc base `property`), đồng thời bắt buộc compiler chạy lệnh phân giải thành hai khâu kết xuất:
+1. Sinh biên dịch một biến Custom CSS lưu giữ chuỗi giá trị (literal string/value).
+2. Dựng thiết lập Property thuộc tính CSS tĩnh nhưng được trỏ thẳng hàm để lấy dữ liệu cấp phát từ hàm `var()`.
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "background": {
+      "_var": true,
+      "value": "blue"
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS):**
+```scss
+.button {
+  --button-background: blue;
+  background: var(--button-background);
+}
+```
+
+Triển khai cấu trúc cờ `_var: true` loại trừ sự lặp đi lặp lại quy trình sao chép code cứng rườm rà. Chốt chặn thiết lập đảm bảo quá trình đồng bộ code tự động khi xử lý Property tĩnh và vòng lặp gán biến nội vi ngay trong quy trình Properties.

package/src/media/functional/ui/properties/types/types.en.mdx

@@ -0,0 +1,128 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/# Types'/>
+
+# Types (\_type)
+
+The `_type` meta-parameter defines the architectural classification of a configuration node. It dictates the structural pipeline by instructing the assembly engine on how to process the current node (e.g., as a CSS variable, media query, pseudo-element, or BEM modifier). Declaring the correct type is critical for the accurate generation of SCSS mixins and TypeScript interfaces.
+
+## Default Behavior and Auto-detection
+If `_type` is omitted, the interpreter invokes an automatic inference module (`Automatcher`):
+
+1. **Key Recognition:** The engine scans the property name for registered symbolic aliases or prefix patterns formatted as `[type]|[property_name]`. Upon detection, the extracted type is dynamically assigned to the node.
+2. **Pass-through (Bypass):** Nodes lacking system prefixes retain an `undefined` state for `_type`. These nodes bypass structural TS converters and pass directly into the global SCSS map generation phase, where they are rendered universally as standard CSS physical key-value properties.
+
+## Supported Types (PropertyType)
+The system supports a comprehensive set of structural specificators (`_type`) resolving any compilation requirement:
+
+### Base Properties & Variables
+- `property` — Defines a standard physical CSS style property.
+- `var` — Declares the node specifically to generate as a custom CSS variable (custom property).
+
+### Architectural Nodes
+- `design` — The system name of the root design structure.
+- `component` — Base designation of the UI component governing SCSS map hierarchies.
+- `class` — Binds an explicit, custom CSS class name to the active structural node.
+- `theme` — Specifies the branch properties are overrides utilized for generating themed classes.
+
+### Elements & Modifiers (BEM)
+- `subclass` — Identifies a BEM element (subclass) structurally nested within the core block.
+- `state` — Defines variations or additional states of the element (e.g., BEM modifiers).
+- `virtual` — Defines a virtual pseudo-element mapping (`::before`, `::after`).
+- `selector` — Defines sub-properties and pseudo-classes of the element (e.g., `:hover`, `:focus`).
+
+### Adaptability (Responsive & Container)
+- `media` / `media-max` — Structures properties mapped directly into viewport `@media` queries (scaling via min-width / max-width).
+- `media-group` / `media-max-group` — Wraps extensive property lists actively into isolated media group clusters.
+- `container`, `container-max`... — Equivalents to media rules but specifically tracking native `@container` contextual queries.
+
+### Animations
+- `animate` — Designates a block compiling native CSS animation attributes.
+- `animate-frame` — Represents a localized percentage structural frame bound inside `@keyframes`.
+
+### Logic & Scoped Merging
+- `link` — Defines an active dynamic link parsing and inheriting native property trees from another structural segment.
+- `link-class` — Acts as a structural link pointing towards an element specifically to resolve and copy its class mapping.
+- `file` — References an external physical configuration `.json` file for deep merging logic.
+- `mixin` — Designated purely as an accessory utility mixin block; explicitly pruned from finalizing CSS outputs natively.
+
+### SCSS Integration & Exclusions
+- `scss` — Evaluates the node actively targeting native SCSS scope parameters / nested builds.
+- `root` — Declares the node globally, forcing structure layout surfacing natively via SCSS `@at-root`.
+- `none` — Mutes the node entirely, aggressively dropping it from any output stream generation.
+- `other` — Natively functions identically to `none`; an internalized fallback flag for undefined states.
+
+## Simplified Syntax (Aliases)
+To prevent deep nesting hierarchies and redundant `{"_type": "..."}` bindings for every node, the system natively implements shorthand prefix aliasing built directly into the key nomenclature. The compiler automatically identifies the prefix and assigns the corresponding structural `_type`.
+
+### 1. Dedicated Symbol Prefixes (SYMBOLS)
+Frequently invoked architectural node types are securely bound to rapid symbol aliases. Prepending these characters dictates the node configuration:
+
+- `$` *(maps to `var`)* — System variable declaration (Example: `"$border"`).
+- `#` *(maps to `subclass`)* — Nested BEM element block (Example: `"#icon"`).
+- `~` *(maps to `state`)* — Element variations and additional states (Example: `"~primary"`).
+- `:` *(maps to `selector`)* — Element sub-properties and pseudo-classes (Example: `":hover"`).
+- `::` *(maps to `virtual`)* — Virtual pseudo-element targeting (Example: `"::after"`).
+- `@` *(maps to `link`)* — Scoped architectural tree linking.
+- `@@` *(maps to `link-class`)* — Explicit class-oriented structural referencing.
+- `&` *(maps to `scss`)* — Contextual native SCSS selection.
+- `&&` *(maps to `root`)* — Globals lifting via native `@at-root` SCSS scope breaking.
+- `--` *(maps to `none`)* — Pruned ignore forcing node exclusion from all system-generated outputs.
+
+### 2. Universal Pipe Syntax (`|`)
+For dynamic structure types lacking hardcoded symbolic shortcuts (e.g., `media` or `container-group`), the compiler parses a delimited string syntax: `[type]|[property_name]`.
+
+- Lexical sequences preceding the `|` delimiter are actively mapped via string parsing as the strict systemic `_type`.
+- **Example:** The string format `"media-group|adaptive-block"` explicitly executes mapping assigning the type natively as `media-group`.
+
+## Compilation Example
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "padding": "12px",             // Fallback type (property)
+  
+  "sm": {                        // Explicit type assignment (media)
+    "_type": "media",
+    "padding": "16px"
+  },
+
+  "$border": "8px",              // Alias: var
+  
+  "#icon": {                     // Alias: subclass
+    "width": "24px"
+  },
+  
+  ":hover": {                    // Alias: selector
+    "background-color": "#aaaaaa"
+  },
+  
+  "~primary": {                  // Alias: state
+    "color": "#ff0000"
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.component-name {
+  padding: 12px;
+  --sys-[component]-border: 8px;
+
+  @media (min-width: 576px) {  /* sm branch (media) */
+    padding: 16px;
+  }
+
+  &__icon {                    /* #icon branch (subclass) */
+    width: 24px;
+  }
+
+  &:hover {                    /* :hover branch (selector) */
+    background-color: #aaaaaa;
+  }
+
+  &--primary {                 /* ~primary branch (state) */
+    color: #ff0000;
+  }
+}
+```

package/src/media/functional/ui/properties/types/types.ru.mdx

@@ -0,0 +1,128 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/# Типы'/>
+
+# Типы (\_type)
+
+Системный флаг `_type` является ключевым мета-параметром конфигурационного узла. Он указывает процессору сборки, по какому архитектурному сценарию следует обрабатывать текущий узел (как CSS-переменную, медиа-запрос, псевдоэлемент, модификатор BEM и т.д.). Указание типа критически важно для корректной генерации SCSS-миксинов и интерфейсов TypeScript.
+
+## Поведение по умолчанию и автоопределение
+Если параметр `_type` явно не задан, интерпретатор применяет алгоритм автоматического вывода:
+
+1. **Распознавание по ключу:** Движок сканирует имя свойства на наличие зарегистрированных символов-алиасов или префиксов вида `[тип]|[название_свойства]`. Если совпадение найдено, узлу автоматически присваивается соответствующий тип.
+2. **Сквозная передача (Bypass):** Если ключ не содержит служебных префиксов, флаг `_type` остается `undefined`. Такие узлы игнорируются структурными конвертерами TypeScript и передаются непосредственно в глобальную генерацию SCSS-карт как базовые физические CSS-свойства (key-value).
+
+## Доступные типы (PropertyType)
+Система поддерживает обширный набор спецификаторов (`_type`), покрывающих любые потребности верстки:
+
+### Базовые стили и Переменные
+- `property` — Обозначает стандартное физическое CSS-свойство компонента.
+- `var` — Указывает, что узел нужно сгенерировать как пользовательскую CSS-переменную (variable).
+
+### Архитектурные узлы
+- `design` — Системное имя основного дизайна сборки.
+- `component` — Базовое наименование UI-компонента для формирования SCSS-карт.
+- `class` — Явное задание кастомного имени CSS-класса под текущий узел.
+- `theme` — Указывает, что ветка содержит переопределения для генерации специфичной темы.
+
+### Элементы и Модификаторы (BEM)
+- `subclass` — Подкласс (вложенный элемент компонента), находящийся внутри основного блока.
+- `state` — Определяет вариации и дополнительные состояния элемента (например, модификаторы BEM).
+- `virtual` — Виртуальный псевдоэлемент (`::before`, `::after`).
+- `selector` — Определяет под-свойства и псевдоклассы элемента (например, `:hover`, `:focus`).
+
+### Адаптивность (Responsive & Container)
+- `media` / `media-max` — Определение свойств под конкретный медиа-запрос (с адаптацией по min-width / max-width).
+- `media-group` / `media-max-group` — Логическая группировка множества свойств внутри медиа-запросов.
+- `container` / `container-max` / `container-group` / `container-max-group` — Аналогичные типы адаптивности, но привязанные к `container queries` (@container).
+
+### Анимации
+- `animate` — Блок конфигурации свойств CSS-анимации.
+- `animate-frame` — Выделенный кадр внутри `@keyframes` анимации.
+
+### Логика и Шаблоны
+- `link` — Системная ссылка на другой элемент внутри дерева для прямого глубокого слияния их свойств.
+- `link-class` — Ссылка на другой элемент дерева исключительно для заимствования его CSS-класса.
+- `file` — Ссылка на внешний физический конфигурационный файл для объединения.
+- `mixin` — Вспомогательный примес (mixin), чьи свойства не выведутся напрямую в финальный CSS.
+
+### SCSS интеграция и Служебные
+- `scss` — Задает узел как нативную переменную/блок под формирование чистой SCSS сборки.
+- `root` — Указывает, что данный узел глобален и должен быть эвакуирован в селектор `:root` (маршрутизация через `@at-root`).
+- `none` — Узел пропускается и полностью исключается из генерации любых данных.
+- `other` — Служебный маркер для неопределенных свойств (ведет себя аналогично `none`).
+
+## Упрощенный синтаксис (Алиасы)
+Чтобы избежать глубокой вложенности и дублирования служебного объекта `{"_type": "..."}` для каждого узла, система поддерживает краткий синтаксис конфигурации через префиксы ключей. Компилятор автоматически распознает префикс и назначает узлу соответствующий структурный тип (`_type`).
+
+### 1. Символьные префиксы (SYMBOLS)
+Ряд часто используемых архитектурных типов привязан к быстрым символам-идентификаторам. Достаточно начать имя ключа с этого спецсимвола:
+
+- `$` *(эквивалент `var`)* — Описывает системную переменную (Пример: `"$border"`).
+- `#` *(эквивалент `subclass`)* — Элемент структуры BEM (Пример: `"#icon"`).
+- `~` *(эквивалент `state`)* — Вариации и модификаторы элемента (Пример: `"~primary"`).
+- `:` *(эквивалент `selector`)* — Под-свойства и псевдоклассы элемента (Пример: `":hover"`).
+- `::` *(эквивалент `virtual`)* — Виртуальный псевдоэлемент (Пример: `"::after"`).
+- `@` *(эквивалент `link`)* — Системная ссылка на узел дерева.
+- `@@` *(эквивалент `link-class`)* — Системная ссылка на CSS-класс.
+- `&` *(эквивалент `scss`)* — Нативный SCSS-селектор.
+- `&&` *(эквивалент `root`)* — Перенос логики в глобальную область видимости (через `@at-root`).
+- `--` *(эквивалент `none`)* — Вырезание узла и блокировка его генерации при сборке.
+
+### 2. Универсальный Pipe-синтаксис (`|`)
+Если для целевого архитектурного типа не предусмотрен спецсимвол (например, `media` или `container-group`), применяется конструкция разделения через вертикальную черту: `[тип]|[название_свойства]`.
+
+- Парсер автоматически извлекает подстроку слева от `|` и интерпретирует её как системный тип (`_type`).
+- **Пример:** Конструкция `"media-group|adaptive-block"` определит тип узла как `media-group`.
+
+## Пример генерации
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "padding": "12px",             // Без типа (свойство property)
+  
+  "sm": {                        // Явное указание типа (media)
+    "_type": "media",
+    "padding": "16px"
+  },
+
+  "$border": "8px",              // Алиас: var
+  
+  "#icon": {                     // Алиас: subclass
+    "width": "24px"
+  },
+  
+  ":hover": {                    // Алиас: selector
+    "background-color": "#aaaaaa"
+  },
+  
+  "~primary": {                  // Алиас: state
+    "color": "#ff0000"
+  }
+}
+```
+
+**Ожидаемый результат генерации стилей (SCSS):**
+```scss
+.component-name {
+  padding: 12px;
+  --sys-[component]-border: 8px;
+
+  @media (min-width: 576px) {  /* Ветка sm (media) */
+    padding: 16px;
+  }
+
+  &__icon {                    /* Ветка #icon (subclass) */
+    width: 24px;
+  }
+
+  &:hover {                    /* Ветка :hover (selector) */
+    background-color: #aaaaaa;
+  }
+
+  &--primary {                 /* Ветка ~primary (state) */
+    color: #ff0000;
+  }
+}
+```

package/src/media/functional/ui/properties/types/types.vi.mdx

@@ -0,0 +1,128 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/# Kiểu'/>
+
+# Kiểu (\_type)
+
+Cờ `_type` là một tham số siêu dữ liệu (meta-parameter) cốt lõi định nghĩa mô hình xử lý kiến trúc của một node. Nó chỉ lệnh cho Engine biên dịch cách ứng xử với node hiện hành (đóng vai trò là chuỗi CSS biến variable, media query, pseudo-element, hay trạng thái BEM...). Việc xác định chuẩn xác type là nhân tố quan trọng để thiết lập mã nguồn SCSS-mixins hay TypeScript interfaces an toàn.
+
+## Hành vi Mặc định & Trình Tự động nhận diện
+Khi tham số `_type` không được gán, hệ thống sẽ tự động kích hoạt tiến trình rà soát logic ngầm định (Automatcher):
+
+1. **Bóc tách Prefix:** Engine quét tên khóa (key) để tìm kiếm các Alias (ký hiệu tắt) hoặc cấu trúc chỉ định loại cú pháp `[type]|[tên_thuộc_tính]`. Khi nhận diện trùng khớp, node sẽ được cài đặt tự động giá trị type tương ứng vào thuộc tính ẩn.
+2. **Sự kiện Bị Bypass (Pass-through):** Cụm node nào không kèm ký hiệu định danh, giá trị tham số `_type` của nó được thiết lập tại mức `undefined`. Chúng được máy TypeScript miễn trừ xử lý cấu trúc và được bảo lưu cấu hình lọt xuyên luồng nhúng thành CSS "key-value" Properties thô đơn giản dưới nền tảng cấu hình mảng Data SCSS.
+
+## Mảng Thông Số Types (PropertyType)
+Hệ thống cung cấp sẵn một chuỗi phân bộ loại thiết lập (`_type`) bao quát toàn diện các điểm rơi biên dịch SCSS/TS:
+
+### Thuộc tính Cơ Sở & Biến số
+- `property` — Định danh tham số sẽ sinh ra là một thuộc tính vật lý CSS thông thường.
+- `var` — Cưỡng chế node phải được dịch mã chuyên biệt thành cụm biến CSS (Custom Variable).
+
+### Khung Cấu trúc Node
+- `design` — Đặt tên hệ thống thiết kế cho khối dự án (nằm tại cấp độ cấu hình khung đầu).
+- `component` — Xác định tên gốc rễ của Component UI để làm khung sinh đối tượng mảng cây SCSS.
+- `class` — Gán áp đặt cứng một cụm tên class CSS tùy biến dành riêng cho Node đang được trỏ.
+- `theme` — Quyết định phần nhánh cây properties đảm đương vai trò biên dịch ra nhóm Classes riêng của Theme hiện hành.
+
+### Phân mảng Thành phần & Modifiers (BEM)
+- `subclass` — Đại diện cho phân vùng Class con cấp dưới (BEM element) bọc lồng tịnh tiến vào trong Block chính.
+- `state` — Xác định các biến thể và trạng thái phụ của phần tử (như các BEM modifiers).
+- `virtual` — Gọi tên khai báo kết xuất chuẩn ra cấp độ Pseudo-element ảo (`::before`, `::after`).
+- `selector` — Định nghĩa các thuộc tính con và pseudo-class của phần tử (ví dụ: `:hover`, `:focus`).
+
+### Responsive & Container Quy mô
+- `media` / `media-max` — Ràng buộc đóng khung chỉ số cấu hình CSS bọc ngay bên trong câu truy vấn `@media` màn hình (theo viền min-width / max-width).
+- `media-group` / `media-max-group` — Group logic túm gom quy nạp hệ số dữ liệu quy mô lớn trải qua các truy vấn Media queries.
+- `container` / `container-max`... — Tính năng tái thiết giao diện tương đương nhóm Media, nhưng quy chiếu theo mảng theo dõi thuộc tính khung `@container` gốc.
+
+### Lập đồ Animation
+- `animate` — Gọi lệnh biên dịch trỏ node làm gốc cài quy chuẩn hệ thuộc tính CSS Animation.
+- `animate-frame` — Đặc định node thiết lập khung frame nhỏ cấu trúc cho bảng thông báo khung bên trong lõi `@keyframes`.
+
+### Xử lý Logic & Link kế thừa
+- `link` — Gắn chỉ thị bóc tách dữ liệu và hợp nhất sao chép toàn bộ Properties nhắm mốc từ một element/node ngầm định khác.
+- `link-class` — Ràng buộc đường truyền móc nối element khác nhắm vào việc duy nhất để mượn vay tên CSS Class của bên đó.
+- `file` — Chèn địa chỉ nhúng tham kiến cấu trúc từ một file gốc Properties `.json` ngoại lai để hợp nhất.
+- `mixin` — Đi kèm vai trò block hỗ trợ dùng một lần (mixin module). Tham số sẽ không lọt cửa biên dịch vào nội lực CSS vật lý xuất ra sau cùng.
+
+### SCSS Thâm nhập & Exclusions
+- `scss` — Định danh khối node thuần gen mảng phục vụ trực tiếp thư viện code SCSS thuần trong cấu trúc.
+- `root` — Định vị bắt chuỗi node mang đặc quyền Global, phá vỡ mọi cấp lồng ngầm tự bốc hơi bay thẳng lên Root thông qua `@at-root`.
+- `none` — Phá bỏ toàn diện dữ liệu. Node bị đóng băng, cấm vĩnh viễn lọt vào tiến trình biên dịch file hệ thống output cuối cùng.
+- `other` — Mã hệ thống không phân giải nội bộ, bắt theo quy trình chém file y như Type `none`.
+
+## Cú pháp Rút Gọn (Aliases)
+Nhằm triệt tiêu việc phải code lồng khối quá sâu hoặc trùng lặp rườm rà chuỗi khai báo `{"_type": "..."}` ở mỗi node, hệ thống cung cấp lối tắt cấu hình bằng cơ chế tiền tố khóa (prefix). Trình biên dịch sẽ tự động nhận diện tiền tố và gắn chuẩn `_type` tương ứng cho node.
+
+### 1. Phím tắt Tiền tố Ký tự (SYMBOLS)
+Các kiến trúc Type trọng yếu được gắn liền cùng khoá mật danh Symbol. Phép màu bắt đầu chỉ bằng cách đặt chốt ký tự này ở đầu Node String:
+
+- `$` *(tương đương `var`)* — Biến hệ thống (Ví dụ: `"$border"`).
+- `#` *(tương đương `subclass`)* — Module Class con chuẩn BEM (Ví dụ: `"#icon"`).
+- `~` *(tương đương `state`)* — Các biến thể và trạng thái phụ của phần tử (Ví dụ: `"~primary"`).
+- `:` *(tương đương `selector`)* — Thuộc tính con và pseudo-class (Ví dụ: `":hover"`).
+- `::` *(tương đương `virtual`)* — Phân hóa thực thể ảo Pseudo-element (Ví dụ: `"::after"`).
+- `@` *(tương đương `link`)* — Liên kết vòng mạng dữ liệu nội tại hệ thống.
+- `@@` *(tương đương `link-class`)* — Trỏ cấp độ kế thừa Class kiến trúc rễ lưới.
+- `&` *(tương đương `scss`)* — Vòng quy chiếu bọc ghép mảng gốc SCSS.
+- `&&` *(tương đương `root`)* — Trích ly đóng khung nẩy khỏi mạng lồng tiến cấp về `@at-root`.
+- `--` *(tương đương `none`)* — Khoá vô hiệu loại triệt để Node String tránh lọt vào chu trình Build compile mã CSS Output.
+
+### 2. Cú pháp Phân cách Dọc dạng Thanh (`|`)
+Với các cụm tính năng không đi kèm phím tắt cứng gán sẵn (như `media`, `container-group`), Parser quét đáp ứng thông qua cú pháp vách ngăn đứng: `[type]|[tên_thuộc_tính]`.
+
+- Tiền tố trái vách ranh giới thanh `|` được càn quét trực diện làm tham số `_type` duy nhất.
+- **Ví dụ:** Vòng khóa cấu trúc `"media-group|adaptive-block"` sẽ nhận lệnh xác lập ngay lập tức Type thiết đặt hệ thống là `media-group`.
+
+## Minh Hoạ Code Mẫu / Phiên dịch SCSS
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "padding": "12px",             // Kiểu mặc định (thuộc tính CSS tĩnh)
+  
+  "sm": {                        // Khai báo thủ công Type (media)
+    "_type": "media",
+    "padding": "16px"
+  },
+
+  "$border": "8px",              // Lối tắt: var
+  
+  "#icon": {                     // Lối tắt: subclass
+    "width": "24px"
+  },
+  
+  ":hover": {                    // Lối tắt: selector
+    "background-color": "#aaaaaa"
+  },
+  
+  "~primary": {                  // Lối tắt: state
+    "color": "#ff0000"
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.component-name {
+  padding: 12px;
+  --sys-[component]-border: 8px;
+
+  @media (min-width: 576px) {  /* Nhánh sm (media) */
+    padding: 16px;
+  }
+
+  &__icon {                    /* Nhánh #icon (subclass) */
+    width: 24px;
+  }
+
+  &:hover {                    /* Nhánh :hover (selector) */
+    background-color: #aaaaaa;
+  }
+
+  &--primary {                 /* Nhánh ~primary (state) */
+    color: #ff0000;
+  }
+}
+```

package/src/media/functional/ui/properties/values/values.en.mdx

@@ -0,0 +1,103 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/# Values'/>
+
+# Working with values (Value)
+
+The `value` field in `properties.json` defines the final content of a property (color, dimension, path, etc.). The `value` content can consist of literals, dynamic references to other tokens, or system-provided markers.
+
+### Literals and Data Types
+The system supports standard JSON data types:
+- **Strings**: `"12px"`, `"relative"`, `"none"`.
+- **Numbers**: `24`, `0.5` (automatically converted to strings during compilation).
+- **Colors**: HEX formats are supported:
+    - `#FFF` / `#FFFFFF` — standard color.
+    - `#FFFFFF80` — color with alpha channel (8 characters).
+
+### References and System Markers (`{...}`)
+You can borrow values from other properties using curly braces. This mechanism enables token dependency management.
+
+#### Path Resolution Rules:
+1. **Absolute Path**: `{design.component.property}` — entire path from the root.
+2. **Relative Path (Auto-Design)**: `{primary-color}`. If the first path segment is not a registered design name, the system automatically prepends the current design name (`{current-design.primary-color}`).
+3. **Nesting**: Supports unlimited nesting through dot notation: `{base.spacing.small}`.
+
+#### Special Markers (Shortcuts):
+Special placeholders are used to shorten paths within references:
+- `?` — replaced by `[current_design].`.
+- `??` — replaced by `[current_design].[current_component].`.
+
+**Example:**
+```json
+{
+  "button": {
+    "color": "{?primary}",          // Resolves to {d1.primary}
+    "padding": "{??base-padding}"   // Resolves to {d1.button.base-padding}
+  }
+}
+```
+
+These markers enable portable configuration code that remains resilient to design or component renames.
+
+#### Expressions and Mixed Content:
+The `value` field can contain arbitrary text with one or more `{...}` references embedded within it. The system will identify and resolve each reference while preserving the surrounding text.
+
+This enables the use of tokens within CSS functions (e.g., `calc()`) or combination with native CSS variables.
+
+**Example:**
+```json
+{
+  "button": {
+    "padding": "var(--sys-height) * {sys.spacing.adaptive.md}"
+  }
+}
+```
+
+### Full Value Marker (`=`)
+If a value begins with the `=` character, the compiler treats it as a "complete" (full value). The value is passed to SCSS "as is" without any further automatic processing.
+
+This is highly useful for complex CSS functions or when raw paths must be preserved.
+
+**Usage Example:**
+```json
+{
+  "button": {
+    "color": "{?primary}",           // Reference via design marker
+    "padding": "{??base-padding}",   // Reference via component marker
+    "width": "=calc(100% - 20px)",   // Full value (no processing)
+    "border": "1px solid #00000030"  // HEX with opacity
+  }
+}
+```
+
+### Additional Meta-Parameters
+For more precise value control, special service flags (starting with `_`) can be used:
+
+- `_important: boolean` — adds the `!important` specifier to the property in CSS.
+- `_fullValue: boolean` — programmatic equivalent of the `=` marker. Disables automatic unit appending (`px`) and reference resolving `{}`.
+- `_replace: object` — allows performing text replacement in the final value using regular expressions. Accepts an object `{ pattern, flags, replace }`.
+- `_modification: boolean` — controls if the property can be modified in SCSS (defaults to `true`). If set to `false`, the property is considered static.
+
+**Usage Example:**
+```json
+{
+  "button": {
+    "width": { 
+      "value": "100%", 
+      "_important": true      // Output: width: 100% !important;
+    },
+    "padding": { 
+      "value": "16px", 
+      "_replace": {           // Output: padding: 16rem;
+        "pattern": "px", 
+        "replace": "rem", 
+        "flags": "g" 
+      }
+    },
+    "height": { 
+      "value": "calc(100vh - 20px)", 
+      "_fullValue": true      // Output: height: calc(100vh - 20px);
+    }
+  }
+}
+```

package/src/media/functional/ui/properties/values/values.ru.mdx

@@ -0,0 +1,103 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/# Значения'/>
+
+# Работа со значениями (Value)
+
+Поле `value` в `properties.json` определяет конечное содержимое свойства (цвет, размер, путь и т.д.). Содержимое `value` может быть представлено литералами, динамическими ссылками на другие токены или системными маркерами.
+
+### Литералы и Типы данных
+Система поддерживает стандартные типы данных JSON:
+- **Строки**: `"12px"`, `"relative"`, `"none"`.
+- **Числа**: `24`, `0.5` (автоматически преобразуются в строки при сборке).
+- **Цвета**: Поддерживаются HEX-форматы:
+    - `#FFF` / `#FFFFFF` — стандартный цвет.
+    - `#FFFFFF80` — цвет с альфа-каналом (8 символов).
+
+### Ссылки и системные маркеры (`{...}`)
+Вы можете заимствовать значения других свойств, используя фигурные скобки. Это позволяет создавать зависимости между токенами.
+
+#### Правила разрешения путей:
+1. **Абсолютный путь**: `{design.component.property}` — полное указание от корня.
+2. **Относительный путь (Авто-дизайн)**: `{primary-color}`. Если первый сегмент пути не является названием зарегистрированного дизайна, система автоматически подставляет имя текущего дизайна (`{current-design.primary-color}`).
+3. **Вложенность**: Поддерживается неограниченная вложенность через точку: `{base.spacing.small}`.
+
+#### Специальные метки (Шорткаты):
+Для сокращения путей внутри ссылок используются специальные символы-подстановки:
+- `?` — заменяется на `[текущий_дизайн].`.
+- `??` — заменяется на `[текущий_дизайн].[текущий_компонент].`.
+
+**Пример:**
+```json
+{
+  "button": {
+    "color": "{?primary}",          // Развернется в {d1.primary}
+    "padding": "{??base-padding}"   // Развернется в {d1.button.base-padding}
+  }
+}
+```
+
+Эти метки позволяют писать переносимый код, который не сломается при переименовании дизайна или компонента.
+
+#### Выражения и смешанный контент:
+Поле `value` может содержать произвольный текст, внутри которого находятся одна или несколько ссылок `{...}`. Система найдет и развернет каждую ссылку, сохранив остальной текст нетронутым.
+
+Это позволяет использовать ссылки внутри функций CSS (например, `calc()`) или комбинировать их с нативными CSS-переменными.
+
+**Пример:**
+```json
+{
+  "button": {
+    "padding": "var(--sys-height) * {sys.spacing.adaptive.md}"
+  }
+}
+```
+
+### Маркер «Полного значения» (`=`)
+Если значение начинается с символа `=`, компилятор считает его «завершенным» (full value). Значение передается в SCSS «как есть» без какой-либо дальнейшей обработки.
+
+Это полезно для сложных функций CSS или когда нужно передать сырой путь.
+
+**Пример использования:**
+```json
+{
+  "button": {
+    "color": "{?primary}",           // Ссылка через метку дизайна
+    "padding": "{??base-padding}",   // Ссылка через метку компонента
+    "width": "=calc(100% - 20px)",   // Полное значение (без обработки)
+    "border": "1px solid #00000030"  // HEX с прозрачностью
+  }
+}
+```
+
+### Дополнительные параметры
+Для более точной настройки обработки и вывода значения можно использовать специальные служебные флаги (начинающиеся с `_`):
+
+- `_important: boolean` — добавляет спецификатор `!important` к значению свойства в CSS.
+- `_fullValue: boolean` — программный аналог маркера `=`. Отключает автоматическое добавление единиц измерения (`px`) и разрешение ссылок `{}`.
+- `_replace: object` — позволяет выполнить замену текста в финальном значении через регулярное выражение. Принимает объект `{ pattern, flags, replace }`.
+- `_modification: boolean` — управляет возможностью модификации свойства в SCSS (по умолчанию `true`). При значении `false` свойство считается статичным.
+
+**Пример использования:**
+```json
+{
+  "button": {
+    "width": { 
+      "value": "100%", 
+      "_important": true      // Результат: width: 100% !important;
+    },
+    "padding": { 
+      "value": "16px", 
+      "_replace": {           // Результат: padding: 16rem;
+        "pattern": "px", 
+        "replace": "rem", 
+        "flags": "g" 
+      }
+    },
+    "height": { 
+      "value": "calc(100vh - 20px)", 
+      "_fullValue": true      // Результат: height: calc(100vh - 20px);
+    }
+  }
+}
+```