@dxtmisha/wiki 0.39.1 → 0.39.3

package/src/media/functional/ui/properties/type-state/type-state.ru.mdx

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Состояние (state)'/>
+
+# Состояние (state)
+
+Тип `state` предназначен для описания вариаций, интерактивных режимов или сеток модификаторов (например, размеров). Привязка этого типа предписывает компилятору сгенерировать класс-модификатор по методологии BEM (например, `&--primary` или составной `&--size-sm`).
+
+Объявить состояние можно с помощью префикса `~` или явно через `_type: "state"`. В `dxt-ui` каждое объявленное состояние автоматически типизируется в `props.ts` и привязывается к реактивным свойствам Vue.
+
+В системе выделяют два основных подхода к формированию состояний:
+- **Одиночное состояние:** Используется для простых булевых флагов (например, `~primary`). Результирующий класс-модификатор строится напрямую (`&--primary`).
+- **Сгруппированные состояния:** Используется для многозначных параметров (например, размерной сетки `~size`). Вложенные в него ключи образуют составные модификаторы (`&--size-sm`).
+
+> Ключ `_default` определяет базовое значение свойства при инициализации компонента. Для булевых флагов задается значение `true`, а для сгруппированных параметров — строковой идентификатор активного узла (например, `"md"`). Компилятор автоматически транслирует это значение в файле `props.ts`.
+
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": "12px",
+    
+    "~primary": {                // Одиночное состояние (алиас ~)
+      "background-color": "blue",
+      "_default": true           // Булево значение по умолчанию
+    },
+    
+    "disabled": {                // Явное объявление типа (state)
+      "_type": "state",
+      "opacity": "0.5"
+    },
+    
+    "~size": {                   // Сгруппированные состояния
+      "sm": { "height": "32px" },
+      "md": { "height": "40px" },
+      "_default": "md"           // Строковое значение по умолчанию
+    }
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+.button {
+  padding: 12px;
+
+  &--primary { background-color: blue; }
+  &--disabled { opacity: 0.5; }
+  &--size-sm { height: 32px; }
+  &--size-md { height: 40px; }
+}
+```
+
+**Интеграция с Vue (`props.ts` и `Component.vue`):**
+```typescript
+// --- props.ts ---
+primary?: boolean
+disabled?: boolean
+size?: 'sm' | 'md'
+
+// --- Component.vue (classes) ---
+'d1-button--primary': props.primary,
+'d1-button--disabled': props.disabled,
+[`d1-button--size--${props.size}`]: inArray(propsValues.size, props.size)
+```

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

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Trạng thái (state)'/>
+
+# Trạng thái (state)
+
+Type cấu trúc `state` được sinh ra để đặc tả các luồng biến thể, chế độ tương tác phụ trợ, hoặc lưới modifier đa dạng (như size grid). Phân bổ Type này sẽ ấn định cỗ máy Compiler gen dòng mã class CSS modifier tuân thủ nguyên lý BEM đính trực tiếp vào block cha (Ví dụ: `&--primary` hoặc chuỗi phức hợp `&--size-sm`).
+
+Lập trình viên có thể khởi tạo state bằng mã phím tắt rút gọn `~` hoặc ghim cứng bằng lệnh qua định danh tham số `_type: "state"`. Trong lõi `dxt-ui`, mọi state khởi tạo sẽ tự động rễ bám sâu vào lớp type (`props.ts`) lẫn luồng chốt class binding reactive của Vue.
+
+Bên trong hệ sinh thái của compiler, chúng ta phân tách làm hai thủ pháp chủ đạo:
+- **Trạng thái đơn lẻ:** Được trưng dụng cho các cờ boolean cơ sở (Ví dụ: thiết lập `~primary`). Compiler sẽ đúc thẳng tắp ra class modifier gốc (`&--primary`).
+- **Trạng thái gom nhóm đa cực:** Được trưng dụng cho bộ thông số nhiều lớp giá trị (Ví dụ: scale `~size`). Các nhánh lồng bên trong sẽ ép dính thành chuỗi modifier ghép nối tiếp (`&--size-sm`).
+
+> Khóa `_default` xác định giá trị cơ sở mặc định trong quá trình khởi tạo component. Cờ Boolean nhận trạng thái `true`, trong khi các tham số nhóm yêu cầu chuỗi định danh của node mục tiêu (ví dụ: `"md"`). Compiler sẽ tự động dịch chuyển thiết lập này thành giá trị ẩn định trong cấu hình `props.ts`.
+
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": "12px",
+    
+    "~primary": {                // Trạng thái cục bộ (lối tắt ~)
+      "background-color": "blue",
+      "_default": true           // Cấu hình cờ boolean mặc định
+    },
+    
+    "disabled": {                // Khai báo explicit state
+      "_type": "state",
+      "opacity": "0.5"
+    },
+    
+    "~size": {                   // Gom nhóm trạng thái đa cực
+      "sm": { "height": "32px" },
+      "md": { "height": "40px" },
+      "_default": "md"           // Cấu hình string mặc định
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.button {
+  padding: 12px;
+
+  &--primary { background-color: blue; }
+  &--disabled { opacity: 0.5; }
+  &--size-sm { height: 32px; }
+  &--size-md { height: 40px; }
+}
+```
+
+**Đồng bộ Tích hợp Vue (`props.ts` và `Component.vue`):**
+```typescript
+// --- props.ts ---
+primary?: boolean
+disabled?: boolean
+size?: 'sm' | 'md'
+
+// --- Component.vue (dynamic class bindings) ---
+'d1-button--primary': props.primary,
+'d1-button--disabled': props.disabled,
+[`d1-button--size--${props.size}`]: inArray(propsValues.size, props.size)
+```

package/src/media/functional/ui/properties/type-subclass/type-subclass.en.mdx

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/Subclass (subclass)'/>
+
+# Subclass (subclass)
+
+The `subclass` type is designated for conceptualizing nested structural blocks conforming to the BEM (Block-Element-Modifier) architectural methodology. Assigning this type forces the compiler to generate a deeply nested descendant CSS class firmly rooted to the parent identifier (e.g., `&__element`).
+
+The optimal standard practice for initiating a subclass branch utilizes the `#` prefix. For rigid and explicit structural assignments, the `subclass` type may be statically assigned utilizing the internal `_type` property. Both methodologies emit parallel internal structures.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "16px",
+    
+    "#icon": {                   // Utilizing the # alias prefix
+      "width": "24px"
+    },
+    
+    "content": {                 // Explicit structural type assignment
+      "_type": "subclass",
+      "display": "flex"
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.card {
+  padding: 16px;
+
+  &__icon {
+    width: 24px;
+  }
+
+  &__content {
+    display: flex;
+  }
+}
+```
+
+Utilizing `subclass` explicitly governs CSS scope isolation, fundamentally averting global namespace collisions and tying dependent components intimately to the primary architectural parent.

package/src/media/functional/ui/properties/type-subclass/type-subclass.ru.mdx

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Подкласс (subclass)'/>
+
+# Подкласс (subclass)
+
+Тип `subclass` используется для создания вложенных структурных элементов по методологии BEM (Блок-Элемент-Модификатор). Привязка этого типа к узлу предписывает компилятору сгенерировать дочерний CSS-класс, используя родительское имя как основу (например, `&__element`).
+
+Наиболее частый и лаконичный способ создать подкласс — использование префикса `#`. Для строгой, развернутой структурной разметки тип `subclass` можно объявить явно через свойство `_type`. Оба подхода генерируют идентичный результат.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "16px",
+    
+    "#icon": {                   // Использование алиаса #
+      "width": "24px"
+    },
+    
+    "content": {                 // Явное объявление типа
+      "_type": "subclass",
+      "display": "flex"
+    }
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+.card {
+  padding: 16px;
+
+  &__icon {
+    width: 24px;
+  }
+
+  &__content {
+    display: flex;
+  }
+}
+```
+
+Использование типа `subclass` гарантирует надежную инкапсуляцию стилей и предотвращает глобальное загрязнение CSS, жестко привязывая внутренние элементы к их компоненту-родителю.

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

@@ -0,0 +1,44 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Lớp con (subclass)'/>
+
+# Lớp con (subclass)
+
+Type cấu trúc `subclass` được sinh ra chuyên dụng để khởi tạo các thực thể mảng lồng nhau (nested element) tuân thủ quy chuẩn hình thái BEM (Block-Element-Modifier). Phân bổ Type này sẽ cưỡng chế bộ máy Compiler xuất bản dòng mã chuỗi class CSS con trực tiếp được gắn kèm đằng sau tên định danh cha gốc (Ví dụ: biên dịch vòng lặp qua cấu trúc `&__element`).
+
+Giải pháp tối ưu và lả lướt nhất để sản sinh một class lồng con vĩnh viễn là sử dụng mã ký hiệu `#` ở tiền tố. Tuỳ nhiên đối với những cấu trúc rập khuôn cứng nhắc, thao tác cấu hình bung rộng tham số type explicit `_type: "subclass"` vẫn được trưng dụng đồng tâm hiệp lực. Cả hai giải pháp gen cùng một kết quả biên dịch hệ thống.
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "16px",
+    
+    "#icon": {                   // Áp dụng định danh lối tắt #
+      "width": "24px"
+    },
+    
+    "content": {                 // Phân rã cấu trúc type explicit
+      "_type": "subclass",
+      "display": "flex"
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.card {
+  padding: 16px;
+
+  &__icon {
+    width: 24px;
+  }
+
+  &__content {
+    display: flex;
+  }
+}
+```
+
+Sức mạnh trọng tâm của dạng thức `subclass` đảm nhận nhiệm vụ cô lập tầm vực scope CSS. Toàn bộ code gắn Subclass đóng chốt hiện tượng tranh chấp lớp class CSS trên toàn cục, ráp chặt mối nối UI phụ tùng vào thẳng lõi gốc cha.

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

@@ -0,0 +1,63 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/Variables (var)'/>
+
+# Variables (var)
+
+The property generation engine provides two distinct methodologies for managing CSS Custom Properties (variables): explicit variable declaration utilizing the structural `var` type, and combinatorial generation encompassing both properties and variables via the `_var: true` boolean flag.
+
+## Declarative Assignment (Type `var`)
+
+Assigning the `var` type (or utilizing its symbolic alias `$`) instructs the compiler to bypass standard CSS property generation. The target node is compiled strictly as a native CSS variable injected securely into the local compilation scope of the component.
+
+> **Type Inheritance:** The `var` type propagates structurally. If a parent node is declared as `var` (or prefixed with `$`), all structurally nested child nodes will inherently adopt the exact same type. There is no need to iteratively declare `var` on succeeding descendants.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": {
+      "_type": "var",
+      "value": "16px"
+    }
+  }
+}
+```
+*(Deploying the symbol alias `$padding: "16px"` yields an identical output structural tree).*
+
+**Conceptual Compiled Output (SCSS):** 
+```scss
+.card {
+  --card-padding: 16px;
+}
+```
+
+## Combinatorial Generation (Flag `_var`)
+
+Component architectures frequently require rendering a conventional physical CSS attribute while abstracting its core value strictly behind a dynamic CSS variable (vital for theming integrations or dynamic Vue runtime bindings).
+
+This is achieved securely using the configuration flag `_var: true`. This modifier retains the target node's designated structure type (inherently `property` unless overridden), coercing the compiler to execute a dual-stage emission:
+1. Formulating and compiling a robust CSS variable initialized with the active literal value.
+2. Formulating the target physical CSS property, structurally pointing its value to the evaluated `var()` function output.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "background": {
+      "_var": true,
+      "value": "blue"
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.button {
+  --button-background: blue;
+  background: var(--button-background);
+}
+```
+
+Effectively, deploying the `_var: true` modifier permanently mitigates manual assignment repetition, automating the structural linkage between dynamic CSS variables and literal CSS properties inside configuration trees.

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

@@ -0,0 +1,63 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Переменные (var)'/>
+
+# Переменные (var)
+
+Система генерации свойств предлагает два механизма работы с пользовательскими CSS-переменными (Custom Properties): явное объявление узла как переменной с помощью системного типа `var` и комбинированную генерацию свойств и переменных с помощью флага `_var: true`.
+
+## Декларативное объявление (Тип `var`)
+
+Тип `var` (или его алиас `$`) предписывает компилятору отказаться от создания обычного CSS-свойства. Узел компилируется исключительно как CSS-переменная и становится доступен в области видимости (scope) текущего компонента.
+
+> **Каскадное наследование:** Тип `var` обладает свойством структурного нисхождения. Если родительский узел объявлен как `var` (или через алиас `$`), все его вложенные дочерние узлы автоматически унаследуют этот же тип. Вам не нужно дублировать объявление `var` для каждого потомка.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": {
+      "_type": "var",
+      "value": "16px"
+    }
+  }
+}
+```
+*(Использование алиаса `$padding: "16px"` приведет к абсолютно идентичному результату).*
+
+**Ожидаемый результат генерации (SCSS):** 
+```scss
+.card {
+  --card-padding: 16px;
+}
+```
+
+## Комбинированная генерация (Флаг `_var`)
+
+Часто возникает архитектурная потребность сгенерировать классическое физическое CSS-свойство, но при этом "запитать" его от изменяемой CSS-переменной (например, для динамической смены тем или состояний во Vue-компоненте).
+
+Для этого используется конфигурационный флаг `_var: true`. Он позволяет узлу сохранить свой изначальный тип (по умолчанию `property`), но заставляет компилятор выполнить сразу два действия:
+1. Сгенерировать CSS-переменную со значением свойства.
+2. Присвоить самому CSS-свойству значение через функцию `var()`.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "background": {
+      "_var": true,
+      "value": "blue"
+    }
+  }
+}
+```
+
+**Ожидаемый результат компиляции (SCSS/CSS):**
+```scss
+.button {
+  --button-background: blue;
+  background: var(--button-background);
+}
+```
+
+Таким образом, использование мульти-флага `_var: true` полностью устраняет необходимость писать дублирующийся код рутинной привязки переменных к свойствам.

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;
+  }
+}
+```