import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/# UI/properties/# Типы'/>

# Типы (\_type)

Системный флаг `_type` является ключевым мета-параметром конфигурационного узла. Он указывает процессору сборки, по какому архитектурному сценарию следует обрабатывать текущий узел (как CSS-переменную, медиа-запрос, псевдоэлемент, модификатор BEM и т.д.). Указание типа критически важно для корректной генерации SCSS-миксинов и интерфейсов TypeScript.

## Поведение по умолчанию и автоопределение
Если параметр `_type` явно не задан, интерпретатор применяет алгоритм автоматического вывода:

1. **Распознавание по ключу:** Движок сканирует имя свойства на наличие зарегистрированных символов-алиасов или префиксов вида `[тип]|[название_свойства]`. Если совпадение найдено, узлу автоматически присваивается соответствующий тип.
2. **Сквозная передача (Bypass):** Если ключ не содержит служебных префиксов, флаг `_type` остается `undefined`. Такие узлы игнорируются структурными конвертерами TypeScript и передаются непосредственно в глобальную генерацию SCSS-карт как базовые физические CSS-свойства (key-value).

## Доступные типы (PropertyType)
Система поддерживает обширный набор спецификаторов (`_type`), покрывающих любые потребности верстки:

### Базовые стили и Переменные
- `property` — Обозначает стандартное физическое CSS-свойство компонента.
- `var` — Указывает, что узел нужно сгенерировать как пользовательскую CSS-переменную (variable).

### Архитектурные узлы
- `design` — Системное имя основного дизайна сборки.
- `component` — Базовое наименование UI-компонента для формирования SCSS-карт.
- `class` — Явное задание кастомного имени CSS-класса под текущий узел.
- `theme` — Указывает, что ветка содержит переопределения для генерации специфичной темы.

### Элементы и Модификаторы (BEM)
- `subclass` — Подкласс (вложенный элемент компонента), находящийся внутри основного блока.
- `state` — Определяет вариации и дополнительные состояния элемента (например, модификаторы BEM).
- `virtual` — Виртуальный псевдоэлемент (`::before`, `::after`).
- `selector` — Определяет под-свойства и псевдоклассы элемента (например, `:hover`, `:focus`).

### Адаптивность (Responsive & Container)
- `media` / `media-max` — Определение свойств под конкретный медиа-запрос (с адаптацией по min-width / max-width).
- `media-group` / `media-max-group` — Логическая группировка множества свойств внутри медиа-запросов.
- `container` / `container-max` / `container-group` / `container-max-group` — Аналогичные типы адаптивности, но привязанные к `container queries` (@container).

### Анимации
- `animate` — Блок конфигурации свойств CSS-анимации.
- `animate-frame` — Выделенный кадр внутри `@keyframes` анимации.

### Логика и Шаблоны
- `link` — Системная ссылка на другой элемент внутри дерева для прямого глубокого слияния их свойств.
- `link-class` — Ссылка на другой элемент дерева исключительно для заимствования его CSS-класса.
- `file` — Ссылка на внешний физический конфигурационный файл для объединения.
- `mixin` — Вспомогательный примес (mixin), чьи свойства не выведутся напрямую в финальный CSS.

### SCSS интеграция и Служебные
- `scss` — Задает узел как нативную переменную/блок под формирование чистой SCSS сборки.
- `root` — Указывает, что данный узел глобален и должен быть эвакуирован в селектор `:root` (маршрутизация через `@at-root`).
- `none` — Узел пропускается и полностью исключается из генерации любых данных.
- `other` — Служебный маркер для неопределенных свойств (ведет себя аналогично `none`).

## Упрощенный синтаксис (Алиасы)
Чтобы избежать глубокой вложенности и дублирования служебного объекта `{"_type": "..."}` для каждого узла, система поддерживает краткий синтаксис конфигурации через префиксы ключей. Компилятор автоматически распознает префикс и назначает узлу соответствующий структурный тип (`_type`).

### 1. Символьные префиксы (SYMBOLS)
Ряд часто используемых архитектурных типов привязан к быстрым символам-идентификаторам. Достаточно начать имя ключа с этого спецсимвола:

- `$` *(эквивалент `var`)* — Описывает системную переменную (Пример: `"$border"`).
- `#` *(эквивалент `subclass`)* — Элемент структуры BEM (Пример: `"#icon"`).
- `~` *(эквивалент `state`)* — Вариации и модификаторы элемента (Пример: `"~primary"`).
- `:` *(эквивалент `selector`)* — Под-свойства и псевдоклассы элемента (Пример: `":hover"`).
- `::` *(эквивалент `virtual`)* — Виртуальный псевдоэлемент (Пример: `"::after"`).
- `@` *(эквивалент `link`)* — Системная ссылка на узел дерева.
- `@@` *(эквивалент `link-class`)* — Системная ссылка на CSS-класс.
- `&` *(эквивалент `scss`)* — Нативный SCSS-селектор.
- `&&` *(эквивалент `root`)* — Перенос логики в глобальную область видимости (через `@at-root`).
- `--` *(эквивалент `none`)* — Вырезание узла и блокировка его генерации при сборке.

### 2. Универсальный Pipe-синтаксис (`|`)
Если для целевого архитектурного типа не предусмотрен спецсимвол (например, `media` или `container-group`), применяется конструкция разделения через вертикальную черту: `[тип]|[название_свойства]`.

- Парсер автоматически извлекает подстроку слева от `|` и интерпретирует её как системный тип (`_type`).
- **Пример:** Конструкция `"media-group|adaptive-block"` определит тип узла как `media-group`.

## Пример генерации

**Входная конфигурация (`properties.json`):**
```json
{
  "padding": "12px",             // Без типа (свойство property)
  
  "sm": {                        // Явное указание типа (media)
    "_type": "media",
    "padding": "16px"
  },

  "$border": "8px",              // Алиас: var
  
  "#icon": {                     // Алиас: subclass
    "width": "24px"
  },
  
  ":hover": {                    // Алиас: selector
    "background-color": "#aaaaaa"
  },
  
  "~primary": {                  // Алиас: state
    "color": "#ff0000"
  }
}
```

**Ожидаемый результат генерации стилей (SCSS):**
```scss
.component-name {
  padding: 12px;
  --sys-[component]-border: 8px;

  @media (min-width: 576px) {  /* Ветка sm (media) */
    padding: 16px;
  }

  &__icon {                    /* Ветка #icon (subclass) */
    width: 24px;
  }

  &:hover {                    /* Ветка :hover (selector) */
    background-color: #aaaaaa;
  }

  &--primary {                 /* Ветка ~primary (state) */
    color: #ff0000;
  }
}
```
