@sxl-studio/token-transformer 1.0.0 → 2.0.0

package/README.md

@@ -1,715 +1,107 @@
-# SXL Studio — Token Transformer
+# SXL Token Transformer
 
-Инструмент для трансформации дизайн-токенов из JSON (DTCG-формат) в валидный код для трёх платформ:
-- **Web** — CSS Custom Properties
-- **iOS** — SwiftUI
-- **Android** — Kotlin Compose
-- **Vue 3** — Composition JSON → Vue 3 SFC (`.vue`)
+YAML-first утилита для преобразования дизайн-токенов в:
+- CSS custom properties
+- Swift-константы (SwiftUI)
+- Kotlin-константы (Compose)
+- Android XML ресурсы (`colors.xml`, `dimens.xml`, `strings.xml`, `bools.xml`, `integers.xml`)
 
----
-
-## Быстрый старт
+## Установка
 
 ```bash
-# Установка зависимостей
 npm install
-
-# Запуск с конфигом по умолчанию
-npx tsx src/cli.ts
-
-# Запуск с указанием конфига
-npx tsx src/cli.ts --config=config.example.json
-
-# Генерация конфига по умолчанию
-npx tsx src/cli.ts --init
-
-# Трансформация composition → Vue 3
-npx tsx src/cli.ts --composition=path/to/composition.json --output=./output/dir
-```
-
----
-
-## Структура проекта
-
-```
-Transformer/
-├── src/
-│   ├── cli.ts                    # Точка входа CLI
-│   ├── core/
-│   │   ├── types.ts              # Типы и интерфейсы
-│   │   ├── parser.ts             # Парсинг JSON, резолв алиасов, мат. выражения
-│   │   ├── loader.ts             # Загрузка токенов из файлов
-│   │   └── writer.ts             # Трансформация и запись файлов
-│   ├── transformers/
-│   │   ├── css.ts                # Генерация CSS Custom Properties
-│   │   ├── swiftui.ts            # Генерация SwiftUI-кода
-│   │   ├── kotlin.ts             # Генерация Kotlin Compose-кода
-│   │   └── vue3.ts               # Composition JSON → Vue 3 SFC
-│   └── utils/
-│       ├── naming.ts             # Утилиты именования (kebab, camel, pascal)
-│       ├── color.ts              # Парсинг и форматирование цветов
-│       └── dimension.ts          # Парсинг и форматирование размеров
-├── config.example.json           # Конфиг для тестовых токенов
-├── config.admin-ui.json          # Конфиг для admin-ui проекта
-├── config.site-ui.json           # Конфиг для site-ui проекта
-├── project-style/                # Выходные файлы (генерируется)
-└── package.json
-```
-
----
-
-## Конфигурация
-
-Конфиг — JSON-файл со следующей структурой:
-
-### Полная схема
-
-```json
-{
-  "source": {
-    "tokenDir": "../Plugin/tokens",
-    "configFile": "config.json",
-    "include": ["example/*.json", "core/*.json"],
-    "exclude": ["config.json", "**/diff-id*.json", "**/composition*"]
-  },
-  "platforms": {
-    "css": {
-      "outputDir": "./project-style/example",
-      "prefix": "ds",
-      "resolveAliases": false,
-      "splitEffects": true,
-      "showDescriptions": true,
-      "codeSyntax": {
-        "colorFormat": "hex",
-        "prefix": "ds"
-      },
-      "fileMapping": [
-        {
-          "sources": ["example/*.json"],
-          "output": "all-tokens.css",
-          "filter": {
-            "types": ["color", "dimension"],
-            "paths": ["color.", "spacing."],
-            "excludePaths": ["color.internal."]
-          }
-        }
-      ]
-    },
-    "swiftui": {
-      "outputDir": "./project-style/example",
-      "prefix": "DS",
-      "resolveAliases": true,
-      "showDescriptions": true,
-      "fileMapping": [
-        {
-          "sources": ["example/*.json"],
-          "output": "AllTokens.swift"
-        }
-      ]
-    },
-    "kotlin": {
-      "outputDir": "./project-style/example",
-      "prefix": "DS",
-      "resolveAliases": true,
-      "showDescriptions": true,
-      "fileMapping": [
-        {
-          "sources": ["example/*.json"],
-          "output": "AllTokens.kt"
-        }
-      ]
-    }
-  },
-  "settings": {
-    "remBase": 16,
-    "verbose": false
-  }
-}
-```
-
----
-
-### Описание полей конфига
-
-#### `source` — Источник токенов
-
-| Поле | Тип | По умолчанию | Описание |
-|------|-----|-------------|----------|
-| `tokenDir` | `string` | обязательный | Путь к папке с JSON-токенами |
-| `configFile` | `string` | `"config.json"` | Путь к config.json плагина (внутри tokenDir) |
-| `include` | `string[]` | все `**/*.json` | Glob-паттерны файлов для включения |
-| `exclude` | `string[]` | `["config.json"]` | Glob-паттерны файлов для исключения |
-
-#### `platforms` — Настройки платформ
-
-Каждая платформа (`css`, `swiftui`, `kotlin`) настраивается независимо:
-
-| Поле | Тип | По умолчанию | Описание |
-|------|-----|-------------|----------|
-| `outputDir` | `string` | обязательный | Папка для выходных файлов |
-| `prefix` | `string` | `""` | Префикс для имён переменных |
-| `resolveAliases` | `boolean` | CSS: `false`, Swift/Kotlin: `true` | Резолвить ли алиасы в финальные значения |
-| `splitEffects` | `boolean` | `true` | Разделять ли эффекты на отдельные переменные (только CSS) |
-| `showDescriptions` | `boolean` | `true` | Включать ли `$description` как комментарии в код |
-| `codeSyntax` | `object` | — | Настройки формата кода |
-| `fileMapping` | `array` | — | Правила объединения токенов в файлы |
-
-#### `resolveAliases` — Управление алиасами
-
-Ключевая настройка, определяющая как обрабатываются алиасные ссылки (`{token.path}`) в составных токенах.
-
-**CSS (`resolveAliases: false` — по умолчанию):**
-```css
-/* Алиасы сохраняются как var() */
---typography-heading-xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-relaxed) var(--font-family-sans);
---shadow-sm: var(--number-fx-offset-xs) var(--number-fx-offset-none) var(--number-fx-blur-xs) var(--number-fx-offset-none) var(--color-hex-alpha);
-```
-
-**CSS (`resolveAliases: true`):**
-```css
-/* Все значения полностью разрешены */
---ds-typography-heading-xl: 700 30px/24px Inter;
---ds-shadow-sm: 2px 0px 8px 0px rgba(255, 85, 0, 0.502);
-```
-
-**SwiftUI/Kotlin (`resolveAliases: false`):**
-- Чистые алиасы (весь токен = ссылка) → ссылка на константу в том же scope
-- Составные токены с алиасными полями → комментарий `/// @ref` / `/** @ref */` с путями
-
-```swift
-/// @ref {color.hex-full}
-static let primary = hexFull                    // ← прямая ссылка
-
-/// @ref {fontFamily.sans}, {fontWeight.bold}, {fontSize.3xl}, {lineHeight.relaxed}
-static let headingXl: Font = .system(size: 30, weight: .bold)  // ← значения + ref-комментарий
-```
-
-**SwiftUI/Kotlin (`resolveAliases: true` — по умолчанию):**
-```swift
-static let primary = Color(red: 1, green: 0.3333, blue: 0, opacity: 1)  // ← полностью разрешено
-```
-
-#### `splitEffects` — Разделение эффектов (только CSS)
-
-Управляет поведением смешанных эффектов (shadow + blur + backdrop-blur).
-
-**`splitEffects: true` (по умолчанию):**
-
-Смешанные эффекты разделяются на отдельные переменные с суффиксами. Каждая переменная соответствует конкретному CSS-свойству:
-
-```css
-/* box-shadow */
---effects-full-mix: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.5);
-/* filter */
---effects-full-mix-blur: blur(2px);
-/* backdrop-filter */
---effects-full-mix-backdrop-blur: blur(20px);
-```
-
-Использование:
-```css
-.card {
-  box-shadow: var(--effects-full-mix);
-  filter: var(--effects-full-mix-blur);
-  backdrop-filter: var(--effects-full-mix-backdrop-blur);
-}
-```
-
-**`splitEffects: false`:**
-
-Все эффекты выводятся в одну переменную, только shadow-часть:
-
-```css
---effects-full-mix: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.5);
-```
-
-#### `showDescriptions` — Описания токенов
-
-Управляет выводом `$description` из JSON в качестве комментариев. Работает на всех платформах.
-
-**`showDescriptions: true` (по умолчанию):**
-```css
-/* Heading XL — all values raw */
---typography-heading-xl: 700 30px/24px Inter;
-```
-
-```swift
-/// Heading XL — all values raw
-static let headingXl: Font = .system(size: 30, weight: .bold)
-```
-
-```kotlin
-/** Heading XL — all values raw */
-val HeadingXl = TextStyle(...)
-```
-
-**`showDescriptions: false`:**
-```css
---typography-heading-xl: 700 30px/24px Inter;
-```
-
-```swift
-static let headingXl: Font = .system(size: 30, weight: .bold)
-```
-
-```kotlin
-val HeadingXl = TextStyle(...)
-```
-
-#### `fileMapping` — Правила объединения файлов
-
-Позволяет собрать токены из нескольких JSON-файлов в один выходной файл.
-
-```json
-{
-  "sources": ["core/palette.json", "projects/aui/colors.json", "projects/modes/themes/light.json"],
-  "output": "core.css",
-  "filter": {
-    "types": ["color", "dimension"],
-    "paths": ["color.primary"],
-    "excludePaths": ["color.internal"]
-  }
-}
-```
-
-| Поле | Описание |
-|------|----------|
-| `sources` | Массив путей к JSON-файлам (поддерживает `*` wildcards) |
-| `output` | Имя выходного файла (относительно `outputDir`) |
-| `filter.types` | Фильтр по типу токена |
-| `filter.paths` | Включить только пути начинающиеся с указанных |
-| `filter.excludePaths` | Исключить пути начинающиеся с указанных |
-
-#### `settings` — Глобальные настройки
-
-| Поле | Тип | По умолчанию | Описание |
-|------|-----|-------------|----------|
-| `remBase` | `number` | `16` | Базовое значение для вычисления rem |
-| `verbose` | `boolean` | `false` | Подробный вывод логов |
-
----
-
-## Поддерживаемые типы токенов
-
-### Простые типы
-
-| Тип | CSS | SwiftUI | Kotlin |
-|-----|-----|---------|--------|
-| `color` | `#hex` / `rgba()` | `Color(red:green:blue:opacity:)` | `Color(0xAARRGGBB)` |
-| `dimension` | `16px` / `1rem` | `CGFloat` | `Dp` |
-| `spacing`, `sizing` | `16px` | `CGFloat` | `Dp` |
-| `borderRadius`, `borderWidth` | `4px` | `CGFloat` | `Dp` |
-| `opacity` | `0.5` | `Double` | `Float` |
-| `number` | `42` | числовое значение | числовое значение |
-| `fontFamily` | `"Inter"` | `String` | `String` |
-| `fontWeight` | `700` | `Font.Weight` | `FontWeight` |
-| `fontSize`, `lineHeight` | `16px` | `CGFloat` | `TextUnit (sp)` |
-| `letterSpacing` | `0.5px` | `CGFloat` | `TextUnit (sp)` |
-| `duration` | `200ms` | `String` | `String` |
-| `cubicBezier` | `cubic-bezier(...)` | `String` | `String` |
-| `boolean` | `true` | `Bool` | `Boolean` |
-| `text`, `string` | `"value"` | `String` | `String` |
-| `textCase` | `uppercase` | `String` | `String` |
-| `textDecoration` | `underline` | `String` | `String` |
-| `strokeStyle` | `dashed /* ... */` | `String` | `String` |
-
-### Составные типы
-
-| Тип | CSS | SwiftUI | Kotlin |
-|-----|-----|---------|--------|
-| `typography` | `700 16px/24px Inter` | `Font.system(size:weight:)` | `TextStyle(...)` |
-| `shadow` | `0 4px 8px rgba(...)` | `.shadow(color:radius:x:y:)` | `elevation (Dp)` |
-| `border` | `1px solid #000` | `(color:width:style:)` | `BorderStroke(...)` |
-| `fill` | `#hex` / `gradient(...)` | `Color(...)` / `Gradient(...)` | `Color(...)` / `Brush(...)` |
-| `gradient` | `linear-gradient(...)` | `LinearGradient(...)` | `Brush.linearGradient(...)` |
-| `effects` | см. ниже | `.shadow(...)` | `elevation (Dp)` |
-| `blur` | `blur(4px)` | `.blur(radius:)` | `Modifier.blur(...)` |
-| `backdrop-blur` | `blur(16px)` | `.blur(radius:)` | `Modifier.blur(...)` |
-| `transition` | `all 200ms ease` | `String` | `String` |
-| `grid` | `repeat(12, 1fr)` | `String` | `String` |
-
----
-
-## Обработка Effects (CSS)
-
-В CSS разные типы эффектов используют разные CSS-свойства. Трансформер автоматически создаёт отдельные переменные для каждого типа:
-
-### Один тип эффекта
-
-```css
-/* box-shadow */
---effects-card: 0 4px 8px rgba(0,0,0,0.1);
-
-/* filter */
---blur-sm: blur(4px);
-
-/* backdrop-filter */
---backdrop-blur-md: blur(12px);
-```
-
-### Смешанные эффекты (shadow + blur + backdrop-blur)
-
-Когда токен содержит несколько типов эффектов, они разделяются на отдельные переменные с суффиксами:
-
-```css
-/* box-shadow */
---effects-full-mix: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.5);
-/* filter */
---effects-full-mix-blur: blur(2px);
-/* backdrop-filter */
---effects-full-mix-backdrop-blur: blur(20px);
-```
-
-Использование в CSS:
-```css
-.card {
-  box-shadow: var(--effects-full-mix);
-  filter: var(--effects-full-mix-blur);
-  backdrop-filter: var(--effects-full-mix-backdrop-blur);
-}
-```
-
----
-
-## Алиасы в составных токенах
-
-Все составные токены (typography, shadow, border, fill, gradient, effects) поддерживают алиасные ссылки `{token.path}` в любом подсвойстве.
-
-### Пример JSON
-
-```json
-{
-  "heading": {
-    "xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{fontFamily.sans}",
-        "fontWeight": "{fontWeight.bold}",
-        "fontSize": "{fontSize.3xl}",
-        "lineHeight": "{lineHeight.relaxed}"
-      }
-    }
-  }
-}
-```
-
-### Результат CSS (resolveAliases: false)
-
-```css
---typography-heading-xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-relaxed) var(--font-family-sans);
-```
-
-### Результат CSS (resolveAliases: true)
-
-```css
---typography-heading-xl: 700 30px/24px Inter;
-```
-
----
-
-## codeSyntax (Figma)
-
-Если токен содержит `$extensions.figma.codeSyntax`, трансформер использует указанные имена переменных:
-
-```json
-{
-  "primary": {
-    "$value": "#0066FF",
-    "$extensions": {
-      "figma.codeSyntax": {
-        "Web": "var(--color-primary)",
-        "iOS": "Color.primary",
-        "Android": "@color/primary"
-      }
-    }
-  }
-}
 ```
 
----
-
-## Математические выражения
-
-Токены поддерживают математические выражения, которые вычисляются при трансформации:
-
-```json
-{
-  "spacing": {
-    "sm": { "$value": "{spacing.base} * 2" },
-    "md": { "$value": "{spacing.base} * 4" }
-  }
-}
-```
-
-Поддерживаемые операции: `+`, `-`, `*`, `/`, `round()`.
-
-Выражения вычисляются рекурсивно, включая подсвойства составных токенов.
-
----
-
-## Примеры запуска
-
-### Трансформация всех проектов
+## Команды
 
 ```bash
-# Тестовые токены (example)
-npx tsx src/cli.ts --config=config.example.json
+# трансформация в smart incremental режиме (по умолчанию)
+npx tsx src/cli.ts sync --config ./config/sxl-transform.config.yaml
 
-# Боевые проекты
-npx tsx src/cli.ts --config=config.admin-ui.json
-npx tsx src/cli.ts --config=config.site-ui.json
-```
+# принудительный полный rebuild
+npx tsx src/cli.ts sync --config ./config/sxl-transform.config.yaml --force
 
-### Пример конфига для нового проекта
+# валидация конфига
+npx tsx src/cli.ts validate-config --config ./config/sxl-transform.config.yaml
 
-```json
-{
-  "source": {
-    "tokenDir": "./path/to/tokens",
-    "exclude": ["config.json"]
-  },
-  "platforms": {
-    "css": {
-      "outputDir": "./dist/css",
-      "prefix": "my",
-      "resolveAliases": false,
-      "splitEffects": true,
-      "showDescriptions": true,
-      "fileMapping": [
-        {
-          "sources": ["core/*.json", "themes/light.json"],
-          "output": "core.css"
-        },
-        {
-          "sources": ["themes/dark.json"],
-          "output": "themes/dark.css"
-        }
-      ]
-    },
-    "swiftui": {
-      "outputDir": "./dist/ios",
-      "prefix": "My",
-      "resolveAliases": false,
-      "showDescriptions": true,
-      "fileMapping": [
-        {
-          "sources": ["core/*.json", "themes/light.json"],
-          "output": "MyTokens.swift"
-        }
-      ]
-    },
-    "kotlin": {
-      "outputDir": "./dist/android",
-      "prefix": "My",
-      "resolveAliases": true,
-      "showDescriptions": false,
-      "fileMapping": [
-        {
-          "sources": ["core/*.json", "themes/light.json"],
-          "output": "MyTokens.kt"
-        }
-      ]
-    }
-  },
-  "settings": {
-    "remBase": 16
-  }
-}
+# генерация стартового конфига
+npx tsx src/cli.ts init --path ./sxl-transform.config.yaml
 ```
 
----
-
-## Composition → Vue 3 (SFC)
-
-Трансформер поддерживает преобразование composition-токенов из JSON в готовые Vue 3 Single File Components (`.vue`).
+### Smart vs force
 
-### Запуск
+- `smart` (по умолчанию): пересобирает только затронутые output-файлы на основе изменённых/удалённых source-файлов и state предыдущего запуска.
+- `force`: пересобирает все output-файлы из конфига безусловно.
 
-```bash
-npx tsx src/cli.ts --composition=path/to/composition.json --output=./output/dir
-```
-
-| Параметр | Описание |
-|----------|----------|
-| `--composition` | Путь к JSON-файлу с composition-токеном |
-| `--output` | Папка для выходного `.vue` файла (по умолчанию — рядом с исходником) |
-
-### Формат входного JSON
-
-```json
-{
-  "$type": "composition",
-  "name": "WButton",
-  "props": {
-    "state": ["default", "hover", "active", "disabled"],
-    "style": ["accent", "secondary", "tertiary"],
-    "size": ["sm", "md", "lg"]
-  },
-  "structure": {
-    "tag": "FRAME", "class": "btn",
-    "children": [
-      { "tag": "INSTANCE", "class": "btn-icon-left", "ref": { "component": "icon-name" } },
-      { "tag": "TEXT", "class": "btn-label", "content": "Button" }
-    ]
-  },
-  "componentProperties": {
-    "label": { "type": "TEXT", "layer": "btn-label", "defaultValue": "Button" },
-    "isIconLeft": { "type": "BOOLEAN", "layer": "btn-icon-left", "defaultValue": false }
-  },
-  "styles": { "btn": { "layoutMode": "HORIZONTAL", "fills": ["{accent.medium}"], ... } },
-  "adapters": {
-    "style=accent": { "btn": { "fills": ["{info.medium}"] } },
-    "size=sm": { "btn": { "paddingLeft": "12", ... } },
-    "state=hover": { "btn": { "opacity": "0.88" } }
-  }
-}
-```
+Дополнительные флаги:
 
-### Что генерируется
+- `--mode smart|force`
+- `--force` (сокращение для `--mode force`)
+- `--state-file <path>` (переопределить путь state-файла, по умолчанию `<config-name>.state.json`)
 
-Готовый Vue 3 SFC с тремя секциями:
+## Формат конфига
 
-**`<template>`** — HTML-структура из `structure`:
-- `FRAME` → `<div>` / `<button>` (определяется по имени компонента)
-- `TEXT` → `<span>` с привязкой к props или слотам
-- `INSTANCE` → компонентный тег (`<WIcon>`, и т.д.)
-- `BOOLEAN` свойства → `v-if` директивы
-- `INSTANCE_SWAP` → динамический `:name` prop
+Поддерживается только YAML.
+JSON-конфиг умышленно не поддерживается.
 
-**`<script setup lang="ts">`** — логика:
-- `defineProps<Props>()` с типами из `props` и `componentProperties`
-- `withDefaults()` со значениями по умолчанию
-- `useCssModule()` для CSS Modules
-- `computed()` для variant/size классов с exhaustive `Record<>` маппингом
-- Prop `style` автоматически переименовывается в `variant` (конфликт с Vue)
-- `state=disabled` → отдельный `disabled` boolean prop
+Минимальная структура:
 
-**`<style module>`** — CSS:
-- Базовые стили из `styles` с маппингом Figma → CSS
-- Modifier-классы из `adapters` (`.btn--accent`, `.btn--sm`, и т.д.)
-- `state=hover/active/focus` → CSS псевдоклассы (`:hover`, `:active`, `:focus`)
-- `state=disabled` → `.btn--disabled` + `:disabled`
-- Токен-ссылки `{accent.medium}` → `var(--accent-medium)`
-- TEXT/INSTANCE слои: `fills` → `color` (не `background-color`)
+```yaml
+version: 1
+source:
+  tokenDir: ../../Plugin/test/tokens_project_new
+  configFile: config.json
+  include: ["**/*.json"]
+  exclude: ["config.json", "**/diff-id*.json"]
 
-### Маппинг Figma-свойств → CSS
+options:
+  remBase: 16
+  collisionStrategy: error # error | suffix | namespace-by-file | namespace-by-mode
+  unsupportedTypes:
+    default: warn
+    types:
+      template: skip
+      composition: skip
 
-| Figma | CSS |
-|-------|-----|
-| `layoutMode: "HORIZONTAL"` | `display: flex` |
-| `layoutMode: "VERTICAL"` | `display: flex; flex-direction: column` |
-| `primaryAxisAlignItems` | `justify-content` |
-| `counterAxisAlignItems` | `align-items` |
-| `layoutSizingHorizontal: "HUG"` | `width: fit-content` |
-| `layoutSizingHorizontal: "FILL"` | `flex: 1` |
-| `itemSpacing` | `gap` |
-| `padding*` | `padding` (shorthand) |
-| `cornerRadius` | `border-radius` |
-| `fills: ["{token}"]` | `background-color: var(--token)` / `color: var(--token)` |
-| `strokeWeight` + `strokes` | `border` |
-| `opacity` | `opacity` |
-| `clipsContent` | `overflow: hidden` |
-| `fontSize` | `font-size` |
-| `fontFamily` | `font-family` |
-| `fontWeight` | `font-weight` (с маппингом имён → числа) |
-| `textAlignHorizontal` | `text-align` |
+tokenSets:
+  - id: root
+    selectors:
+      - collection: Core
+        mode: Default
+      - collection: Themes
+        mode: Dark
+        refModeMap:
+          Projects: AUI
+          Core: Default
+      - files: ["projects/aui/*.json"]
 
-### Пример результата
-
-```vue
-<template>
-  <button :class="[$style['btn'], variantClass, sizeClass, { [$style['btn--disabled']]: disabled }]"
-    :disabled="disabled || undefined">
-    <WIcon v-if="isIconLeft" :class="$style['btn-icon-left']" :name="iconLeft" />
-    <span :class="$style['btn-label']">{{ label }}</span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed, useCssModule } from 'vue'
-
-type Props = {
-  variant?: 'accent' | 'secondary' | 'tertiary'
-  size?: 'sm' | 'md' | 'lg'
-  label?: string
-  isIconLeft?: boolean
-  iconLeft?: string
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'accent',
-  size: 'sm',
-  label: 'Button',
-  isIconLeft: false,
-  iconLeft: '',
-  disabled: false,
-})
-
-const $style = useCssModule()
-
-const variantClass = computed(() => {
-  const map: Record<NonNullable<Props['variant']>, string> = {
-    'accent': $style['btn--accent'],
-    'secondary': $style['btn--secondary'],
-    'tertiary': $style['btn--tertiary'],
-  }
-  return map[props.variant ?? 'accent']
-})
-</script>
-
-<style module>
-.btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: 8px;
-  background-color: var(--accent-medium);
-}
-
-.btn--accent { background-color: var(--info-medium); }
-.btn:hover { opacity: 0.88; }
-.btn--disabled, .btn:disabled { opacity: 0.4; pointer-events: none; }
-</style>
+outputs:
+  - id: css-root
+    platform: css # css | swift | kotlin | xml
+    outputDir: ./project-style/css/adminui
+    resolveAliases: false
+    splitEffects: true
+    showDescriptions: true
+    files:
+      - tokenSet: root
+        output: root.css
 ```
 
----
-
-## Справочник по настройке prefix
+## Quality gates
 
-| Платформа | prefix | Результат именования |
-|-----------|--------|---------------------|
-| CSS | `""` | `--color-primary` |
-| CSS | `"ds"` | `--ds-color-primary` |
-| SwiftUI | `""` | `Color.colorPrimary`, `enum Spacing` |
-| SwiftUI | `"DS"` | `Color.dsColorPrimary`, `enum DSSpacing` |
-| Kotlin | `""` | `DSColors.ColorPrimary`, `DSSpacing.SpacingXs` |
-| Kotlin | `"App"` | `AppColors.ColorPrimary`, `AppSpacing.SpacingXs` |
-
----
-
-## Troubleshooting
-
-### Файл конфига не найден
-```
-Config file not found: ...
-Run with --init to generate a default config.
+```bash
+npm run eslint
+npm run typecheck
+npm run test
+npm run build
+npm run check
 ```
-Используйте `--config=путь/к/файлу.json` или `--init` для генерации.
-
-### Токены не попадают в выходной файл
-Проверьте `fileMapping.sources` — пути указываются **относительно tokenDir**.
-
-### `var()` не появляются в CSS
-Убедитесь что `"resolveAliases": false` установлен для платформы `css`.
-
-### Алиасы не разрешаются
-Убедитесь что токен-источник существует в подключённых файлах (`include` / `sources`).
 
-### Эффекты не разделяются на отдельные переменные
-Убедитесь что `"splitEffects": true` установлен для платформы `css`. По умолчанию `true`.
+## Важно
 
-### Описания ($description) не отображаются
-Убедитесь что `"showDescriptions": true` установлен для нужной платформы. По умолчанию `true`.
+- Типы `template` и `composition` по умолчанию пропускаются.
+- Поддержан `figma.modify`, включая chain и alias-based параметры модификаторов.
+- Поддержана безопасная математика (`+ - * / %`, `round`, `floor`, `ceil`, `clamp`, и др.) без `eval`.
+- Для selector по `collection/mode` можно управлять зависимостями:
+  - `includeRefs: true|false` — подключать ли `ref`-цепочки из token `config.json` в resolver scope.
+  - `refModeMap` — принудительно выбрать mode для зависимых коллекций (например `Projects: AUI`).