@dxtmisha/wiki 0.39.4 → 0.39.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/wiki",
   "private": false,
-  "version": "0.39.4",
+  "version": "0.39.6",
   "type": "module",
   "description": "Wiki documentation and storybook utilities for DXT UI design system",
   "keywords": [
@@ -30,16 +30,12 @@
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
-    "publish": "npm publish --access public"
+    "publish-to-npm": "npm publish --access public"
   },
   "files": [
     "dist",
-    "src/assets",
-    "src/documentation",
     "src/media/functional",
-    "src/styles/storybookStyle.scss",
-    "src/media.ts",
-    "src/storybook.tsx",
+    "src/styles",
     "README.md",
     "package.json",
     "LICENSE"
@@ -52,11 +48,16 @@
       "import": "./dist/library.js",
       "types": "./dist/library.d.ts"
     },
-    "./media": "./src/media.ts",
+    "./media": {
+      "import": "./dist/media.js",
+      "types": "./dist/media.d.ts"
+    },
     "./functional/*": "./src/media/functional/*.mdx",
-    "./storybook": "./src/storybook.tsx",
-    "./storybook/styles": "./src/styles/storybookStyle.scss",
-    "./package.json": "./package.json"
+    "./storybook": {
+      "import": "./dist/storybook.js",
+      "types": "./dist/storybook.d.ts"
+    },
+    "./storybook/styles": "./src/styles/storybookStyle.scss"
   },
   "engines": {
     "node": ">=20.0.0"
@@ -64,10 +65,11 @@
   "peerDependencies": {
     "@dxtmisha/functional": "*",
     "@dxtmisha/media": "*",
+    "@dxtmisha/styles": "*",
     "@storybook/addon-docs": "*",
     "@mdx-js/react": "*",
     "react": "*",
     "vue": "*"
   },
   "dependencies": {}
-}
+}

package/src/library.ts

@@ -7,7 +7,3 @@ export * from './classes/WikiStorybookProp'
 // Types
 export * from './types/storybookTypes'
 export * from './types/wikiTypes'
-
-// Media
-export * from './media/props/wiki'
-export * from './media/descriptions/wikiDescriptions'

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

@@ -1,20 +1,21 @@
 import {Meta} from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/en/# UI/properties/! About the module'/>
+<Meta title='@dxtmisha/en/# UI/properties/! About properties.json'/>
 
-# Properties
+# Configuration (properties.json)
 
-The `Properties` module is designed for declarative management of design system styles using JSON configurations. Component developers no longer need to manually write SCSS code for states, media queries, and variables—instead, all design tokens are described in a `properties.json` file.
+The `properties.json` file is a declarative manifest of your component. In it, you describe the structure, styles, states, and parameters, which are then automatically transformed into production-ready SCSS code and typed TypeScript interfaces (`props.ts`).
 
-## Why do we need this file?
+## How to work with this file?
 
-In every scalable UI component library, there is a common problem of managing spacing, colors, and states (hover, focus, disabled). Creating a `properties.json` file allows to:
-- Centralize all tokens in one clear place next to the component.
-- Automatically generate typed props for Vue/React from it.
-- Obtain ready-to-use SCSS classes, variables, and themes without code duplication.
+Instead of manually writing hundreds of lines of CSS for every pseudo-class or media query, you populate a **property tree**. The system analyzes this file and performs all the routine work for you:
+- **Style Generation (SCSS)**: Creates BEM-style classes, variables, and themes.
+- **Interface Generation (Props)**: Forms public component properties for Vue/React.
+- **Synchronization**: Ensures that styles and the programmatic interface always correspond to each other.
 
-## Core Concepts
+## Core Concept
 
-- **Token**: A unit of style in the configuration object.
-- **Nesting**: The JSON structure determines the nesting of descendant CSS classes.
-- **Typing**: The JSON configuration is strictly divided by types: `var`, `state`, `media`, etc., which tells the generator exactly how the token will work in the output.
+1.  **Tokens**: JSON tree nodes representing specific CSS properties or nested objects.
+2.  **Types & Flags (_type, _var...)**: Service parameters defining the node processing logic (generating variables, states, or exporting to Props).
+3.  **Links**: The `{...}` system for inheriting values from other tokens or global design variables.
+4.  **Markers & Shortcuts**: Special prefixes (`~`, `group|`) and link placeholders (`?`, `??`) that accelerate the creation of complex configurations.

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

@@ -1,20 +1,21 @@
 import {Meta} from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/ru/# UI/properties/! О модуле'/>
+<Meta title='@dxtmisha/ru/# UI/properties/! О файле properties.json'/>
 
-# Properties
+# Конфигурация (properties.json)
 
-Модуль `Properties` служит для декларативного управления стилями дизайн-системы с помощью JSON-конфигураций. Разработчику компонентов больше не нужно вручную прописывать SCSS-код для состояний, медиа-запросов и переменных — вместо этого все дизайн-токены описываются в файле `properties.json`.
+Файл `properties.json` является декларативным манифестом вашего компонента. В нем вы описываете структуру, стили, состояния и параметры, которые затем автоматически преобразуются в готовый SCSS-код и типизированные TypeScript-интерфейсы (`props.ts`).
 
-## Для чего нужен этот файл?
+## Как работать с этим файлом?
 
-В каждой масштабируемой библиотеке UI-компонентов присутствует общая проблема управления отступами, цветами и состояниями (hover, focus, disabled). Создание файла `properties.json` позволяет:
-- Централизовать все токены в одном понятном месте рядом с компонентом.
-- Автоматически генерировать из него типизированные пропсы для Vue/React.
-- Получать готовые SCSS-классы, переменные и темы без дублирования кода.
+Вместо того чтобы вручную писать сотни строк CSS для каждого псевдокласса или медиа-запроса, вы наполняете **дерево свойств**. Система анализирует этот файл и выполняет всю рутинную работу:
+- **Генерация стилей (SCSS)**: Создает классы по методологии BEM, переменные и темы.
+- **Генерация интерфейса (Props)**: Формирует публичные свойства компонента для Vue/React.
+- **Синхронизация**: Гарантирует, что стили и программный интерфейс всегда соответствуют друг другу.
 
-## Основные концепции
+## Основная концепция
 
-- **Токен**: Единица стиля в объекте конфигурации.
-- **Вложенность**: Структура JSON определяет вложенность CSS классов-потомков.
-- **Типизация**: JSON-конфигурация строго разделена по типам: `var`, `state`, `media` и т.д., что подсказывает генератору, как именно будет работать токен на выходе.
+1.  **Токены (Tokens)**: Узлы дерева JSON, описывающие конкретные CSS-свойства или вложенные объекты.
+2.  **Типы и Флаги (_type, _var...)**: Служебные параметры, определяющие логику обработки узла (генерация переменной, состояния или экспорт в Props).
+3.  **Ссылки (Links)**: Система `{...}`, позволяющая заимствовать значения из других токенов или глобальных переменных дизайна.
+4.  **Маркеры и Шорткаты**: Специальные префиксы (`~`, `group|`) и подстановки (`?`, `??`), ускоряющие написание сложных конфигураций.

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

@@ -1,20 +1,21 @@
 import {Meta} from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/vi/# UI/properties/! Về module'/>
+<Meta title='@dxtmisha/vi/# UI/properties/! Về properties.json'/>
 
-# Properties
+# Cấu hình (properties.json)
 
-Module `Properties` phục vụ cho việc quản lý khai báo các style của hệ thống thiết kế thông qua cấu hình JSON. Nhờ đó, người phát triển component không còn phải code SCSS cho các trạng thái, media-query hay biến theo cách thủ công — thay vào đó, toàn bộ design-token được khai báo tại tệp `properties.json`.
+Tệp `properties.json` là bản tuyên ngôn khai báo cho thành phần của bạn. Trong đó, bạn mô tả cấu trúc, kiểu dáng, trạng thái và tham số, sau đó chúng sẽ tự động được chuyển đổi thành mã SCSS hoàn chỉnh và các giao diện TypeScript có kiểu dữ liệu (`props.ts`).
 
-## Tại sao cần có tệp này?
+## Làm thế nào để làm việc với tệp này?
 
-Trong bất kì thư viện UI component có quy mô nào, vấn đề phổ biến nhất là quản lý khoảng cách, màu sắc và trạng thái (hover, focus, disabled). Tệp cấu hình `properties.json` cho phép:
-- Quản lý tập trung mọi token một cách dễ hiểu nằm ngay cạnh component.
-- Tự động sinh ra props chặt chẽ cho Vue/React.
-- Lấy SCSS class, biến và theme dựng sẵn mà không cần lặp code.
+Thay vì viết hàng trăm dòng CSS thủ công cho mọi pseudo-class hoặc media query, bạn điền vào một **cây thuộc tính**. Hệ thống phân tích tệp này và thực hiện mọi công việc lặp đi lặp lại:
+- **Tạo kiểu dáng (SCSS)**: Tạo ra các lớp theo phương pháp BEM, các biến và chủ đề.
+- **Tạo giao diện (Props)**: Hình thành các thuộc tính thành phần công khai cho Vue/React.
+- **Đồng bộ hóa**: Đảm bảo rằng các kiểu dáng và giao diện lập trình luôn tương ứng với nhau.
 
-## Các khái niệm cơ bản
+## Khái niệm cốt lõi
 
-- **Token**: Đơn vị khai báo style trong cấu hình đối tượng.
-- **Tính lồng nhau**: Cấu trúc lồng của JSON sẽ ánh xạ vào các lớp CSS lồng nhau khi render.
-- **Phân loại**: Khai báo JSON chia thành nhiều loại: `var`, `state`, `media`, v.v... định hướng chính xác kết quả đầu ra.
+1.  **Token**: Các nút cấp độ JSON mô tả thuộc tính CSS cụ thể hoặc các đối tượng lồng nhau.
+2.  **Loại và Cờ (_type, _var...)**: Các tham số dịch vụ xác định logic xử lý nút (tạo biến, trạng thái hoặc xuất ra Props).
+3.  **Liên kết (Links)**: Hệ thống `{...}` cho phép kế thừa giá trị từ các token khác hoặc các biến thiết kế toàn cục.
+4.  **Dấu hiệu và Phím tắt**: Các tiền tố đặc biệt (`~`, `group|`) và các trình giữ chỗ liên kết (`?`, `??`) giúp tăng tốc độ viết các cấu hình phức tạp.

package/src/media/functional/ui/properties/quick-start/quick-start.en.mdx

@@ -1,78 +1,108 @@
 import {Meta} from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/en/# UI/properties/Quick start'/>
+<Meta title='@dxtmisha/en/# UI/properties/! Quick start'/>
 
 # Quick Start
 
-This guide covers the basics of onboarding your UI components onto the properties generation pipeline via `properties.json`.
+This guide helps you quickly master working with the `properties.json` file using a typical UI component as an example. The file serves as the **single source of truth** — both styles (SCSS) and the programmatic interface (TypeScript Props) are generated from it.
 
-## 1. Setting Up Base Styles
+## 1. Base Properties and Tokens
 
-The simplest configuration pattern maps flat JSON keys directly to native CSS attributes. Let's declare standard background and padding values:
+Instead of fixed values (HEX, px), always use the design token system `{sys...}`. This ensures theme support and consistency.
 
 ```json
 {
-  "background-color": "#cccccc",
-  "padding": "12px 24px"
+  "padding": "{sys.spacing.md}",
+  "background-color": "{sys.palette.surface}",
+  "border-radius": "{sys.rounded.md}"
 }
 ```
 
-During compilation, the pipeline processes this directly into functional SCSS layout classes binding to your setup namespace automatically:
+**Result (SCSS):**
 ```scss
 .component {
-  background-color: #cccccc;
-  padding: 12px 24px;
+  padding: var(--sys-spacing-md);
+  background-color: var(--sys-palette-surface);
+  border-radius: var(--sys-rounded-md);
 }
 ```
 
-## 2. Emitting CSS Variables
+## 2. States
 
-Whenever an attribute must be dynamically manipulatable client-side (e.g. for custom scripting or interactive theming modes), utilize an object declaration bearing the `_var: true` flag.
+Use reserved keys to describe interactivity (hover, focus, active, disabled).
 
 ```json
 {
-  "border-radius": {
-    "_var": true,
-    "value": "8px"
+  "hover": {
+    "background-color": "{sys.palette.surfaceVariant}"
+  },
+  "disabled": {
+    "opacity": "{sys.opacity.disabled}",
+    "cursor": "not-allowed"
   }
 }
 ```
 
-Result pipeline mapping:
+**Result (SCSS):**
 ```scss
 .component {
-  --component-border-radius: 8px;
-  border-radius: var(--component-border-radius);
+  &:hover { background-color: var(--sys-palette-surfaceVariant); }
+  &:disabled { 
+    opacity: var(--sys-opacity-disabled);
+    cursor: not-allowed;
+  }
 }
 ```
 
-## 3. Pseudo-classes and Variations
+## 3. Modifiers (Marker `~`)
 
-The generator inherently orchestrates logic-grouped structures into valid CSS pseudo-classes or exported modifier variants natively:
+To create a variation of a component (e.g., `primary` or `secondary`), use the `~` prefix. These keys are automatically transformed into **Props** in Vue/React and BEM modifiers in CSS.
 
 ```json
 {
-  "hover": {
-    "background-color": "#aaaaaa"
-  },
-  "~active": {
-    "background-color": "#555555"
+  "~primary": {
+    "color": "{sys.palette.onPrimary}",
+    "background-color": "{sys.palette.primary}",
+    "_default": true
   }
 }
 ```
 
-Compiled bindings logic:
+**Result (SCSS):**
 ```scss
 .component {
-  &:hover {
-    background-color: #aaaaaa;
+  &--primary {
+    color: var(--sys-palette-onPrimary);
+    background-color: var(--sys-palette-primary);
   }
-  
-  /* BEM modifier mapped via TypeScript Props */
-  &--active {
-    background-color: #555555;
+}
+```
+
+**Result (TypeScript Props):**
+```typescript
+type PropsToken = {
+  primary?: boolean // Generated automatically
+}
+```
+
+## 4. Custom Variables (`_var`)
+
+If you need a property to be available as a CSS variable for external control or use in scripts, add the `_var: true` flag.
+
+```json
+{
+  "height": {
+    "value": "48px",
+    "_var": true
   }
 }
 ```
 
-> **Note:** To leverage deep referencing design tokens (`{sys...}`) and systematic TypeScript props interfaces exports, review the full **Structure description** documentation.
+**Result (SCSS):**
+```scss
+.component {
+  --component-height: 48px;
+  height: var(--component-height);
+}
+```
+

package/src/media/functional/ui/properties/quick-start/quick-start.ru.mdx

@@ -1,78 +1,108 @@
 import {Meta} from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/ru/# UI/properties/Быстрый старт'/>
+<Meta title='@dxtmisha/ru/# UI/properties/! Быстрый старт'/>
 
 # Быстрый старт
 
-Данное руководство демонстрирует основы внедрения кодогенерации для вашего UI-компонента с помощью `properties.json`.
+Данное руководство поможет вам быстро освоить работу с файлом `properties.json` на примере типичного UI-компонента. Файл является **единым источником истины** — из него генерируются как стили (SCSS), так и программный интерфейс (TypeScript Props).
 
-## 1. Базовые стили
+## 1. Базовые свойства и токены
 
-Простейшая конфигурация строится на прямом соответствии ключей физическим CSS-свойствам. Добавим базовый фон и отступы:
+Вместо фиксированных значений (HEX, px) всегда используйте систему дизайн-токенов `{sys...}`. Это гарантирует поддержку тем и консистентность.
 
 ```json
 {
-  "background-color": "#cccccc",
-  "padding": "12px 24px"
+  "padding": "{sys.spacing.md}",
+  "background-color": "{sys.palette.surface}",
+  "border-radius": "{sys.rounded.md}"
 }
 ```
 
-Генератор свойств автоматически сформирует следующий SCSS-класс (название класса выводится из базовых настроек вашей дизайн-системы):
+**Результат (SCSS):**
 ```scss
 .component {
-  background-color: #cccccc;
-  padding: 12px 24px;
+  padding: var(--sys-spacing-md);
+  background-color: var(--sys-palette-surface);
+  border-radius: var(--sys-rounded-md);
 }
 ```
 
-## 2. Генерация CSS переменных
+## 2. Состояния (States)
 
-Если вам нужно, чтобы свойство выводилось как динамическая CSS-переменная (например, для использования в скриптах или темах), используйте конфигурационный объект с флагом `_var: true` или `_type: "var"`.
+Для описания интерактивности (hover, focus, active, disabled) используйте зарезервированные ключи.
 
 ```json
 {
-  "border-radius": {
-    "_var": true,
-    "value": "8px"
+  "hover": {
+    "background-color": "{sys.palette.surfaceVariant}"
+  },
+  "disabled": {
+    "opacity": "{sys.opacity.disabled}",
+    "cursor": "not-allowed"
   }
 }
 ```
 
-Результат:
+**Результат (SCSS):**
 ```scss
 .component {
-  --component-border-radius: 8px;
-  border-radius: var(--component-border-radius);
+  &:hover { background-color: var(--sys-palette-surfaceVariant); }
+  &:disabled { 
+    opacity: var(--sys-opacity-disabled);
+    cursor: not-allowed;
+  }
 }
 ```
 
-## 3. Состояния и модификаторы
+## 3. Модификаторы (Маркер `~`)
 
-Генератор автоматически транслирует вложенные древовидные структуры в псевдоклассы (состояния) и БЭМ-модификаторы:
+Чтобы создать вариацию компонента (например, `primary` или `secondary`), используйте префикс `~`. Такие ключи автоматически преобразуются в **Props** во Vue/React и в BEM-модификаторы в CSS.
 
 ```json
 {
-  "hover": {
-    "background-color": "#aaaaaa"
-  },
-  "~active": {
-    "background-color": "#555555"
+  "~primary": {
+    "color": "{sys.palette.onPrimary}",
+    "background-color": "{sys.palette.primary}",
+    "_default": true
   }
 }
 ```
 
-Результат:
+**Результат (SCSS):**
 ```scss
 .component {
-  &:hover {
-    background-color: #aaaaaa;
+  &--primary {
+    color: var(--sys-palette-onPrimary);
+    background-color: var(--sys-palette-primary);
   }
-  
-  /* БЭМ модификатор для Vue Props */
-  &--active {
-    background-color: #555555;
+}
+```
+
+**Результат (TypeScript Props):**
+```typescript
+type PropsToken = {
+  primary?: boolean // Генерируется автоматически
+}
+```
+
+## 4. Кастомные переменные (`_var`)
+
+Если вам нужно, чтобы свойство было доступно как CSS-переменная для внешнего управления или использования в скриптах, добавьте флаг `_var: true`.
+
+```json
+{
+  "height": {
+    "value": "48px",
+    "_var": true
   }
 }
 ```
 
-> **Важно:** Для более сложной конфигурации, работы с дизайн-токенами `{sys...}` и автоматической типизации интерфейса, изучите раздел **Описание структуры**.
+**Результат (SCSS):**
+```scss
+.component {
+  --component-height: 48px;
+  height: var(--component-height);
+}
+```
+

package/src/media/functional/ui/properties/quick-start/quick-start.vi.mdx

@@ -1,78 +1,108 @@
 import {Meta} from '@storybook/addon-docs/blocks'
 
-<Meta title='@dxtmisha/vi/# UI/properties/Bắt đầu nhanh'/>
+<Meta title='@dxtmisha/vi/# UI/properties/! Bắt đầu nhanh'/>
 
 # Bắt đầu nhanh
 
-Hướng dẫn này cung cấp nền tảng thiết lập gen-code cơ bản cho Component UI của bạn thông qua tệp hệ thống `properties.json`.
+Hướng dẫn này giúp bạn nhanh chóng nắm vững cách làm việc với tệp `properties.json` thông qua ví dụ về một UI component điển hình. Tệp này đóng vai trò là **nguồn chân lý duy nhất (single source of truth)** — từ đó cả style (SCSS) và giao diện lập trình (TypeScript Props) đều được tạo ra tự động.
 
-## 1. Thiết lập CSS cơ bản
+## 1. Thuộc tính cơ bản và Tokens
 
-Cấu hình dạng sơ cấp trực tiếp dựa dẫm vào gốc thuộc tính HTML CSS thông dụng làm khoá mã. Thiết đặt thử màu nền (background) và mã tuỳ chỉnh viền viền (padding):
+Thay vì sử dụng các giá trị cố định (HEX, px), hãy luôn sử dụng hệ thống design token `{sys...}`. Điều này đảm bảo hỗ trợ thay đổi giao diện (themes) và tính nhất quán của thiết kế.
 
 ```json
 {
-  "background-color": "#cccccc",
-  "padding": "12px 24px"
+  "padding": "{sys.spacing.md}",
+  "background-color": "{sys.palette.surface}",
+  "border-radius": "{sys.rounded.md}"
 }
 ```
 
-Máy biên dịch framework tiến hành trích xuất tự động qua block code hệ quy chiếu SCSS chuẩn của module (khóa parent):
+**Kết quả (SCSS):**
 ```scss
 .component {
-  background-color: #cccccc;
-  padding: 12px 24px;
+  padding: var(--sys-spacing-md);
+  background-color: var(--sys-palette-surface);
+  border-radius: var(--sys-rounded-md);
 }
 ```
 
-## 2. Khai báo biến CSS Variables Động
+## 2. Các trạng thái (States)
 
-Để đảm bảo giá trị giao diện có thể dễ dàng gọi tự động phục vụ đổi tham số Theme linh động ngay trên client, khai báo cấu trúc theo chuẩn Object mở rộng gắn cờ thuộc tính `_var: true`.
+Sử dụng các khóa đã được quy định sẵn để mô tả tính tương tác (hover, focus, active, disabled).
 
 ```json
 {
-  "border-radius": {
-    "_var": true,
-    "value": "8px"
+  "hover": {
+    "background-color": "{sys.palette.surfaceVariant}"
+  },
+  "disabled": {
+    "opacity": "{sys.opacity.disabled}",
+    "cursor": "not-allowed"
   }
 }
 ```
 
-Kết quả gen-code block SCSS:
+**Kết quả (SCSS):**
 ```scss
 .component {
-  --component-border-radius: 8px;
-  border-radius: var(--component-border-radius);
+  &:hover { background-color: var(--sys-palette-surfaceVariant); }
+  &:disabled { 
+    opacity: var(--sys-opacity-disabled);
+    cursor: not-allowed;
+  }
 }
 ```
 
-## 3. Tổ hợp Trạng thái và Modifiers BEM
+## 3. Các biến thể (Dấu hiệu `~`)
 
-Tiến trình phân bổ tự động nội suy nhóm mảng cho phần nhánh cấp thấp thành Pseudo-classes chuột hay các biến thể modifiers class:
+Để tạo ra một biến thể của component (ví dụ: `primary` hoặc `secondary`), hãy sử dụng tiền tố `~`. Các khóa này sẽ tự động được chuyển đổi thành **Props** trong Vue/React và các BEM modifiers trong CSS.
 
 ```json
 {
-  "hover": {
-    "background-color": "#aaaaaa"
-  },
-  "~active": {
-    "background-color": "#555555"
+  "~primary": {
+    "color": "{sys.palette.onPrimary}",
+    "background-color": "{sys.palette.primary}",
+    "_default": true
   }
 }
 ```
 
-Thành phẩm sau quy trình module framework nhận được:
+**Kết quả (SCSS):**
 ```scss
 .component {
-  &:hover {
-    background-color: #aaaaaa;
+  &--primary {
+    color: var(--sys-palette-onPrimary);
+    background-color: var(--sys-palette-primary);
   }
-  
-  /* Chuỗi BEM modifier tự động chuẩn bị map prop TypeScript */
-  &--active {
-    background-color: #555555;
+}
+```
+
+**Kết quả (TypeScript Props):**
+```typescript
+type PropsToken = {
+  primary?: boolean // Được tạo tự động
+}
+```
+
+## 4. Các biến tùy chỉnh (`_var`)
+
+Nếu bạn cần một thuộc tính có sẵn dưới dạng biến CSS để điều khiển từ bên ngoài hoặc sử dụng trong script, hãy thêm cờ `_var: true`.
+
+```json
+{
+  "height": {
+    "value": "48px",
+    "_var": true
   }
 }
 ```
 
-> **Ghi chú quan trọng:** Để phát huy sức mạnh gán biến ảo Token-System format (`{sys...}`) bằng cơ chế kết xuất nhanh Interface Types, bạn hãy tra cứu sâu thư viện **Mô tả cấu trúc**.
+**Kết quả (SCSS):**
+```scss
+.component {
+  --component-height: 48px;
+  height: var(--component-height);
+}
+```
+