@dxtmisha/wiki 0.39.2 → 0.39.3

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

@@ -0,0 +1,155 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/# Cấu trúc'/>
+
+# Cấu trúc
+
+Cấu hình `properties.json` thiết lập chuẩn dạng nhánh cây, bao gồm hệ thống module các khóa làm phân tử lựa chọn và thuộc tính setup cấu trúc thông số đối tượng `PropertyItem`. Mọi thuộc tính CSS được khai báo dưới dạng khóa sẽ tự động kết xuất ra mã CSS tương ứng.
+
+Cấu trúc cơ bản sau đây minh họa cách khai báo giao diện CSS gốc, kết hợp trạng thái tương tác (`hover`, `disabled`), và bộ biến thể động tự động kết xuất qua Vue Props.
+
+```json
+{
+  "padding": "var(--sys-height) * {sys.spacing.adaptive.md}",
+  
+  "hover": {
+    "gradient-opacity": "{sys.opacity.hover}"
+  },
+
+  "disabled": {
+    "color": "{sys.palette.onSurface}",
+    "color-opacity": "{sys.opacity.surface.disabled}"
+  },
+
+  "~primary": {
+    "color": "{sys.palette.onPrimary}",
+    "palette-background": "{sys.palette.primary}",
+    "active": {
+      "box-shadow": "{sys.shadow.lg}"
+    },
+    "_category": "style",
+    "_default": true
+  },
+
+  "~size": {
+    "sm": {
+      "height": "{ref.spacing.10}"
+    },
+    "md": {
+      "height": "{ref.spacing.12}"
+    },
+    "_default": "md"
+  }
+}
+```
+
+Trình phân tích properties (Generator) xử lý file JSON theo bộ quy tắc biên dịch cụ thể:
+1. Thông số thuộc tính thuần CSS (ví dụ `padding`) xuất thẳng vào class `.component`.
+2. Giá trị tham chiếu Design Tokens dạng ngoặc `{...}` được truy xuất qua biến chuẩn CSS định nghĩa sẵn theo hệ thống.
+3. Nhóm biến thể sử dụng chỉ dấu tiền tố `~` trực tiếp sinh mảng modifier của SCSS class (như `--primary`), đồng hành trích xuất thành thuộc tính Component (props TypeScript).
+
+Kết xuất chuỗi mã SCSS:
+```scss
+.component {
+  padding: calc(var(--sys-height) * var(--sys-spacing-adaptive-md));
+
+  /* Pseudo-classes states */
+  &:hover {
+    --component-gradient-opacity: var(--sys-opacity-hover);
+  }
+  &:disabled {
+    color: var(--sys-palette-onSurface);
+    --component-color-opacity: var(--sys-opacity-surface-disabled);
+  }
+
+  /* Modifiers danh mục "style": --primary */
+  &--primary {
+    color: var(--sys-palette-onPrimary);
+    background-color: var(--sys-palette-primary);
+    
+    &:active {
+      box-shadow: var(--sys-shadow-lg);
+    }
+  }
+
+  /* Các modifiers chuỗi kích cỡ "size" */
+  &--size-sm { height: var(--ref-spacing-10); }
+  &--size-md { height: var(--ref-spacing-12); }
+}
+```
+
+Kết xuất Vue Props interface (`props.ts`):
+```typescript
+type PropsToken = {
+  // :type [!] System label / Системная метка
+  primary?: boolean
+  size?: 'sm' | 'md'
+  // :type [!] System label / Системная метка
+}
+
+export const defaults: object = {
+  // :default [!] System label / Системная метка
+  primary: true,
+  size: 'md'
+  // :default [!] System label / Системная метка
+}
+```
+
+Kết xuất logic gán class động Vue:
+```typescript
+const classesToken = computed<ConstrClasses>(() => ({
+  main: {
+    // :classes-values [!] System label / Системная метка
+    'component': true,
+    'component--primary': props.primary,
+    [`component--size--${props.size}`]: inArray(propsValues.size, props.size)
+    // :classes-values [!] System label / Системная метка
+  }
+}))
+```
+
+## Khởi xướng phân nhánh cấu hình
+
+Bố cục thứ bậc thiết đặt thường làm theo cú pháp chuẩn:
+1. Thẻ Gốc — `[Tên Domain gốc hay Group]` (như `ui`, `d1`)
+2. Thẻ Cấp Độ Con — `[Tên thành phần Component UI]` (như `component`)
+3. Thông số xử lý — `[Thuộc tính thành phần, CSS rules, hay state]` (như `background`, `size`, `hover`, `--padding`)
+
+## Ràng buộc tham chiếu (Links)
+
+Các giá trị được bọc trong các dấu ngoặc nhọn (ví dụ: `"{sys.palette.primary}"` hay `"{ref.spacing.10}"`) cho phép bạn tham chiếu động đến các token của design system. Khi build, chúng tự động chuyển đổi thành CSS variable hoặc mã màu gốc tương ứng từ hệ thống.
+
+## Các tuỳ chọn cờ (Flags)
+
+Tất cả thẻ thuộc thông số khai báo đóng vai trò quyết định đến cách framework làm việc với node đều bắt đầu nhờ một gạch dưới `_`.
+
+### Thẻ phân loại chính
+
+- `_type: string` — Quy định phương thức framework biến đổi code (`var`, `state`, `subclass`, `media` v.v..).
+- `_category: string` — Cung cấp tuỳ chọn sắp xếp lọc bộ xử lý phân cấp.
+
+### Thuộc tính hành vi
+
+- `_var: boolean` — Ép hệ thống tạo riêng cho node một variable kiểu dạng `--name: value`.
+- `_state: boolean` — Định thẻ cho giao diện làm component theo chuẩn logic rendering của State format nội bộ (như kiểu `_type: "state"`).
+- `_subclass: boolean` — Quy ước thẻ như phân nhánh phân cấp nhánh con phụ subclass nội tạng layout render logic module nội tại.
+- `_prop: boolean` — Lấy nhánh này cho luồng tự tạo code `props.ts` áp dụng Vue/React props truyền dữ liệu lập trình thông số xử lý code logic thành phần.
+- `_theme: string` — Cột bộ layout tương đương giao diện phân nhóm cho việc đổi màu Theme format động.
+
+### Override thay thế giá trị tên gọi
+
+- `_rename: string` — Ép class khi xuất có một tên khác (ví dụ khoá `backgroundItem` thêm thuộc tính flag `_rename: "bg"` sẽ cho ra css `.component__bg`).
+- `_replace: string` — Tính năng ghi đè qua bộ lệnh Pattern match biểu thức regex text tuỳ biến thông qua kịch bản cho thuộc tính code logic text tuỳ chọn.
+- `_fullName: string` — Định nghĩa tên cuối cố định không màng ngữ cảnh JSON tree path logic.
+- `_fullValue: string` — Giá trị thuần tuyệt đối bỏ qua khả năng tự gán hậu tố px của JS plugin CSS.
+- `_default: any` — Giá trị dùng để backup cấu trúc cho component lỡ không mang biến khai báo chuẩn.
+
+### Quản trị hoạt động và cấu trúc
+
+- `_important: boolean` — CSS `!important`.
+- `_modification: boolean` — Quản lý logic class component modifier áp dụng mã tuỳ chỉnh form module class render output component.
+- `_drag: string` — Gắp cả cụm nội dung tree path nhét qua ngách khác của chuỗi quá trình build (giống Alias).
+- `_dragSetting: boolean` — Đẩy thiết lập nội bộ hoặc cấu trúc thừa kế truyền cập nhật xuống các node con tự động.
+- `_settingClone: boolean` — Dùng để copy lặp toàn bộ thuộc tính cấu hình từ node cha tới trực tiếp node con lồng chép dữ liệu nhanh lẹ.
+- `_style: boolean` — Gen cấu trúc làm inline style format biến inline layout thay vì render CSS file class riêng.
+- `_remove: boolean` — Ra lệnh bộ máy SCSS xoá bỏ nhánh cấu hình không gán xuất ra CSS document.

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

@@ -0,0 +1,42 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/Animation (animate)'/>
+
+# Animation (animate)
+
+The `animate` structural type is utilized to generate native CSS `@keyframes` rules. Each nested object property is interpreted as an individual animation frame (frame), where the keys serve as either percentages (`0%`, `50%`, `100%`) or keywords (`from`, `to`).
+
+The animation identifier is generated automatically based on its nesting position (utilizing parent prefixes), ensuring local name uniqueness across the `dxt-ui` design landscape.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "fade": {
+      "_type": "animate",
+      "from": { "opacity": "0" },
+      "to": { "opacity": "1" }
+    },
+    
+    "~loading": {
+      "animation-name": "button-fade",
+      "animation-duration": "0.3s"
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+@keyframes button-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.button {
+  &--loading {
+    animation-name: button-fade;
+    animation-duration: 0.3s;
+  }
+}
+```

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

@@ -0,0 +1,42 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Анимация (animate)'/>
+
+# Анимация (animate)
+
+Тип `animate` используется для генерации нативных CSS-правил `@keyframes`. Каждое вложенное объектное свойство интерпретируется как отдельный кадр (frame) анимации, где ключами выступают проценты (`0%`, `50%`, `100%`) или ключевые слова (`from`, `to`).
+
+Название анимации формируется автоматически с учетом вложенности (префиксы родителей), что гарантирует уникальность имен внутри системы `dxt-ui`.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "fade": {
+      "_type": "animate",
+      "from": { "opacity": "0" },
+      "to": { "opacity": "1" }
+    },
+    
+    "~loading": {
+      "animation-name": "button-fade",
+      "animation-duration": "0.3s"
+    }
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+@keyframes button-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.button {
+  &--loading {
+    animation-name: button-fade;
+    animation-duration: 0.3s;
+  }
+}
+```

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

@@ -0,0 +1,42 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Hoạt ảnh (animate)'/>
+
+# Hoạt ảnh (animate)
+
+Type cấu trúc `animate` được trưng dụng để tạo ra các quy tắc mã nguồn `@keyframes` thuần túy của CSS. Mỗi thuộc tính đối tượng lồng bên trong sẽ được Compiler diễn giải thành một khung hình riêng biệt (frame), với các khóa đại diện cho tỷ lệ phần trăm (`0%`, `50%`, `100%`) hoặc từ khóa điều hướng (`from`, `to`).
+
+Định danh của hoạt ảnh được thiết lập tự động dựa trên cấp độ phân cấp (ghép nối cùng tiền tố của cha), đảm bảo tính duy nhất và cô lập của mã định danh bên trong hệ sinh thái `dxt-ui`.
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "fade": {
+      "_type": "animate",
+      "from": { "opacity": "0" },
+      "to": { "opacity": "1" }
+    },
+    
+    "~loading": {
+      "animation-name": "button-fade",
+      "animation-duration": "0.3s"
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+@keyframes button-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.button {
+  &--loading {
+    animation-name: button-fade;
+    animation-duration: 0.3s;
+  }
+}
+```

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

@@ -0,0 +1,56 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/Responsiveness (media, container)'/>
+
+# Responsiveness (media, container)
+
+The `media` and `container` structural types manage the generation of adaptive rules (`@media` and `@container`). They enable precise scaling of the interface based on viewport dimensions or parent block constraints.
+
+The system distinguishes four primary responsiveness types, deeply integrated with the design system's breakpoints:
+- **media**: Generates a `min-width` condition (from the specified point and above). If two values are passed (e.g., `sm,md`), it generates a range: `(min-width: ...) and (max-width: ...)`.
+- **media-max**: Generates a `max-width` condition. The system automatically subtracts `1px` from the breakpoint value to prevent style overlap at the exact boundary.
+- **container** / **container-max**: Operate identically to media queries but generate `@container` rules, allowing elements to adapt to their parent container's dimensions. Requires `container-type` to be defined on the parent element.
+
+Adaptive queries can be initialized using the `|` separator shortcut (e.g., `media-max|md`) or explicitly via the `_type` property. The `value` field accepts both design tokens (sm, md, lg) and raw CSS units (768px).
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "24px",
+    
+    "media-max|md": {            // Viewport-based query (media-max)
+      "padding": "16px"
+    },
+    
+    "mobile": {                  // Explicit type declaration (explicit)
+      "_type": "container-max",  // Parent-based query (container-max)
+      "value": "400px",
+      "padding": "8px"
+    },
+    
+    "container-max|lg": {        // Container-max shortcut
+       "padding": "20px"
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.card {
+  padding: 24px;
+
+  @media (max-width: 960px) {    // media-max|md
+    padding: 16px;
+  }
+
+  @container (max-width: 400px) { // _type: container-max
+    padding: 8px;
+  }
+  
+  @container (max-width: 1200px) { // container-max|lg
+    padding: 20px;
+  }
+}
+```

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

@@ -0,0 +1,56 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Адаптивность (media, container)'/>
+
+# Адаптивность (media, container)
+
+Типы `media` и `container` управляют генерацией адаптивных правил (`@media` и `@container`). Они позволяют масштабировать интерфейс в зависимости от размеров вьюпорта или родительского блока.
+
+В системе выделяют четыре основных типа адаптивности, которые тесно интегрированы с точками останова (breakpoints) дизайна:
+- **media**: Генерирует условие `min-width` (от указанной точки и выше). Если передать два значения через запятую (например, `sm,md`), будет сформирован диапазон `(min-width: ...) and (max-width: ...)`.
+- **media-max**: Генерирует условие `max-width`. Система автоматически вычитает `1px` из значения точки останова, чтобы исключить наложение стилей на границе.
+- **container** / **container-max**: Работают идентично медиа-запросам, но генерируют правила `@container`, позволяя элементу адаптироваться к размеру родителя. Требуют наличия `container-type` у родительского элемента.
+
+Объявить адаптивный запрос можно через шорткат с разделителем `|` (например, `media-max|md`) или явно через свойство `_type`. В качестве значения (`value`) принимаются как ключи дизайна (sm, md, lg), так и конкретные значения (768px).
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "24px",
+    
+    "media-max|md": {            // Query по ширине экрана (media-max)
+      "padding": "16px"
+    },
+    
+    "mobile": {                  // Явное объявление типа (explicit)
+      "_type": "container-max",  // Query по ширине родителя (container-max)
+      "value": "400px",
+      "padding": "8px"
+    },
+    
+    "container-max|lg": {        // Шорткат для контейнера
+       "padding": "20px"
+    }
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+.card {
+  padding: 24px;
+
+  @media (max-width: 960px) {    // media-max|md
+    padding: 16px;
+  }
+
+  @container (max-width: 400px) { // _type: container-max
+    padding: 8px;
+  }
+  
+  @container (max-width: 1200px) { // container-max|lg
+    padding: 20px;
+  }
+}
+```

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

@@ -0,0 +1,56 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Tính tương thích (media, container)'/>
+
+# Tính tương thích (media, container)
+
+Các loại cấu trúc `media` và `container` điều phối việc khởi tạo các quy tắc thích nghi (`@media` và `@container`). Chúng cho phép co giãn giao diện linh hoạt dựa trên kích thước khung nhìn (viewport) hoặc giới hạn của khối cha (parent block).
+
+Hệ thống phân tách làm bốn dạng thức thích nghi chủ đạo, được tích hợp sâu với các điểm dừng (breakpoints) của thiết kế:
+- **media**: Khởi tạo điều kiện `min-width` (từ điểm chỉ định trở lên). Nếu truyền hai giá trị (ví dụ `sm,md`), hệ thống sẽ tạo dải giới hạn `(min-width: ...) and (max-width: ...)`.
+- **media-max**: Khởi tạo điều kiện `max-width`. Hệ thống tự động trừ đi `1px` từ giá trị breakpoint để tránh xung đột render tại ranh giới chính xác.
+- **container** / **container-max**: Vận hành tương tự media query nhưng xuất ra các quy tắc `@container`, cho phép phần tử co giãn theo kích thước của khối cha. Yêu cầu phần tử cha phải được thiết lập `container-type`.
+
+Truy vấn thích ứng có thể được thiết lập thông qua phím tắt sử dụng ký tự phân tách `|` (ví dụ: `media-max|md`) hoặc khai báo tường minh qua thuộc tính `_type`. Giá trị (`value`) chấp nhận cả các điểm dừng được định danh trong hệ thống thiết kế (md, lg) lẫn các đơn vị CSS thô (768px).
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "card": {
+    "padding": "24px",
+    
+    "media-max|md": {            // Truy vấn dựa trên Viewport (media-max)
+      "padding": "16px"
+    },
+    
+    "mobile": {                  // Khai báo loại tường minh (explicit)
+      "_type": "container-max",  // Truy vấn dựa trên Parent (container-max)
+      "value": "400px",
+      "padding": "8px"
+    },
+    
+    "container-max|lg": {        // Phím tắt container-max
+       "padding": "20px"
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.card {
+  padding: 24px;
+
+  @media (max-width: 960px) {    // media-max|md
+    padding: 16px;
+  }
+
+  @container (max-width: 400px) { // _type: container-max
+    padding: 8px;
+  }
+  
+  @container (max-width: 1200px) { // container-max|lg
+    padding: 20px;
+  }
+}
+```

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

@@ -0,0 +1,57 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/types/Properties (property)'/>
+
+# Property (property)
+
+The `property` structural type serves as the foundational base for the generator. It instructs the compiler to assemble the target node into a standard native CSS property with its corresponding literal value.
+
+> **Implicit Auto-detection:** If no explicit `_type` is declared and the parser matching engine detects no symbolic aliases in the node key, the system **automatically and natively defaults** to the `property` type.
+
+## Standard Assignment (Implicit)
+
+In the vast majority of configurations, explicitly declaring the `property` type is redundant. Passing a primitive key-value pair (string or number) inherently forces the engine to compile a standard CSS property.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": "12px 16px",
+    "border-radius": "8px"
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.button {
+  padding: 12px 16px;
+  border-radius: 8px;
+}
+```
+
+## Expanded Assignment (Explicit `property` type)
+
+Declaring the type explicitly becomes mandatory when the value demands a complex object architecture utilizing compiler configuration logic (such as passing the `_var: true` modifier to initialize a variable alongside it, or utilizing internal `_rename` logic), all while maintaining the core structural behavior of a native CSS property.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "custom-offset": {
+      "_type": "property",
+      "value": "24px",
+      "_rename": "margin-bottom"
+    }
+  }
+}
+```
+
+**Conceptual Compiled Output (SCSS):**
+```scss
+.button {
+  margin-bottom: 24px;
+}
+```
+
+The `property` type fundamentally drives all localized stylesheet generations inside `dxt-ui`, laying the pure CSS architectural groundwork preceding any BEM logic, media query compilation, or dynamic variable evaluations.

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

@@ -0,0 +1,57 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/types/Свойство (property)'/>
+
+# Свойство (property)
+
+Тип `property` — это базовый, фундаментальный тип генератора. Он предписывает компилятору собрать узел в стандартное CSS-свойство с его значением.
+
+> **Автоопределение:** Если вы не указываете `_type` явно и парсер не находит никаких алиасов-префиксов в имени узла, система **автоматически (по умолчанию)** назначает узлу тип `property`.
+
+## Стандартное объявление (Неявное)
+
+В 90% случаев тип `property` не нужно указывать руками. Если вы передаете простую пару ключ-значение (строку или число), движок самостоятельно сгенерирует CSS-свойство.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": "12px 16px",
+    "border-radius": "8px"
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+.button {
+  padding: 12px 16px;
+  border-radius: 8px;
+}
+```
+
+## Развернутое объявление (Явный тип `property`)
+
+Явное указание типа требуется тогда, когда значение свойства — это сложный объект, и вам нужно использовать конфигурационные флаги компилятора (например, `_var: true` для создания переменной или `_rename` для подмены имени на выходе), но при этом вы хотите сохранить логику обычного CSS-свойства.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "custom-offset": {
+      "_type": "property",
+      "value": "24px",
+      "_rename": "margin-bottom"
+    }
+  }
+}
+```
+
+**Ожидаемый результат генерации (SCSS):**
+```scss
+.button {
+  margin-bottom: 24px;
+}
+```
+
+Именно тип `property` лежит в основе всех стилей `dxt-ui`, формируя каркас CSS-выборок до применения продвинутой логики BEM, медиа-запросов и переменных.

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

@@ -0,0 +1,57 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/types/Thuộc tính (property)'/>
+
+# Thuộc tính (property)
+
+Kiểu kiến trúc `property` đóng vai trò là nền tảng cốt lõi cơ sở của bộ máy generator. Việc thiết lập type này chỉ đạo trực tiếp compiler tiến hành kết xuất node mục tiêu thành một quy chuẩn thuộc tính Native CSS phổ quát đi kèm giá trị.
+
+> **Nhận diện Tự động Phân bổ:** Nếu không khai báo rõ tham số `_type` và bộ Parser không quét ra bất kỳ mã alias phím tắt nào gắn ở tiền tố key, hệ thống sẽ **tự động fallback mặc định** gán node đó thành chuẩn `property`.
+
+## Khai báo Tiêu chuẩn (Ngầm định tĩnh)
+
+Trong phần lớn nhu cầu sử dụng, việc gọi khai báo mảng `property` thủ công hoàn toàn thừa thãi. Bạn chỉ việc truyền vô một cặp key-value cơ bản (dạng số hoặc chuỗi literal), bộ máy Engine tự ngầm nắm thóp và xuất ra thuộc tính CSS tuần tự.
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": "12px 16px",
+    "border-radius": "8px"
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.button {
+  padding: 12px 16px;
+  border-radius: 8px;
+}
+```
+
+## Khai báo Cấu trúc Mở rộng (Cứng type `property`)
+
+Việc ép thẳng tham số mảng khai báo type thủ công chỉ được trưng dụng một khi tham số node vượt quy chuẩn primitive, đòi hỏi khai báo mảng object sâu lồng các flag logic của compiler (chẳng hạn ép cờ `_var: true` hoặc kích nổ bộ thay tên `_rename`), nhưng vẫn một mực bám lấy kết xuất là thuộc tính gốc của CSS.
+
+**File Cấu hình Đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "custom-offset": {
+      "_type": "property",
+      "value": "24px",
+      "_rename": "margin-bottom"
+    }
+  }
+}
+```
+
+**Kết quả Biên dịch Dự kiến (SCSS Output):**
+```scss
+.button {
+  margin-bottom: 24px;
+}
+```
+
+Kiểu phân bổ `property` là trọng điểm cấu trúc mọi file cục diện style nội tại của `dxt-ui`, tạo móng CSS vững chắc trước khi những tầng nâng cao (logic BEM, media query, variable động) nhào lộn xâm nhập.