claude-harness/skills/aura-design/reference/components.md

# AURA — компоненты

## Что есть в `kit/ui` (импорт из `./ui/index.ts`)

| Компонент | API | Правило |
|---|---|---|
| `Button` | `variant` primary/secondary/danger/ghost (по умолч. secondary), `size` md 32/lg 40, `icon`, `loading` | одна `primary` на экран/форму; `loading` — крутилка вместо иконки, вид варианта сохраняется, `disabled` + `aria-busy`; переключатель — `secondary` с `aria-pressed` |
| `IconButton` | `label` (обязателен → `aria-label` и `title`), `icon` | 32×32, радиус 10; для действий без подписи |
| `Segmented` | `label`, `value`, `options[{value,label,href?}]`, `onChange` / `link` | 2–4 взаимоисключающих варианта на сером треке; с `href` — ссылки (`aria-current`), иначе `radiogroup` |
| `ThemeSwitch` | — | солнце/луна, `role=switch`; пока не трогали — системная тема |
| `Field` | `label`, `hint`, `error`, один дочерний контрол | подпись 14/20 600 над полем; ошибка 12/16 цвета ошибки, `role=alert`, ставит `aria-invalid` |
| `TextInput`, `Textarea`, `Select`, `SearchInput`, `Checkbox` | как у родных элементов + `size` | `Select` — родной `<select>` со своей стрелкой; `SearchInput` с иконкой и «Очистить» |
| `Badge` | `tone` neutral/success/error/warning/info | статус, счётчик; текст обязателен (не только цвет) |
| `Chip` | `onRemove`, `removeLabel` | снимаемая плашка выбранного фильтра: «Категория: Видео ✕» |
| `Notice` | `tone` success/error/warning/info, `title`, `action` | иконка в круге, заголовок 14/20 600, текст 12/16; error/warning — `role=alert` |
| `Panel` | `as`, `padding` none/md/lg | поверхность, граница, радиус 16 — контейнер любого блока |
| `PageHeader` | `title`, `subtitle`, `actions`, `children` | `h1` 20/28 + подзаголовок вторичным; действия справа, переносятся |
| `Dialog` | `label`, `onClose`, `size` sm 480/md 640/lg 1000 | родной `<dialog>` (`showModal`): фокус и Esc бесплатно; ≤700 px — во весь экран. Внутри: `h2.ui-dialog__title`, `form.ui-form`, внизу `div.ui-actions` |
| `Confirm` | `title`, `text`, `confirmLabel`, `danger`, `onConfirm`, `onCancel` | подтверждение вместо `window.confirm`/`alert` (удаление, потеря ввода) |
| `Dropdown` | `button({open,toggle})`, `children(close)` | выпадающая панель (мультиселект фильтра) |
| `Menu`, `MenuItem`, `MenuSeparator` | `label`, `align`, `up`; `onSelect`, `pressed`, `danger` | меню «⋯» для редких действий; переключатели — `pressed` (галочка) |
| иконки `Icon*` | `size` 16/20 | линейные SVG, `currentColor`; новые рисуй тем же `make()`. Есть: Plus, Edit, Trash, Download, Upload, Refresh, Search, Filter, More, Close, ChevronDown/Up, Check, Error, Warning, Info, Calendar, Link, External, Open, Board, List, Menu, Sidebar, Home, Settings, User, Sun, Moon |
| `AppShell` (`kit/shell`) | `brand`, `nav`, `current`, `link`, `top`, `bottom`, `topbarEnd`, `menu`, `storageKey`, `wide` | см. layout-ux.md |

CSS-классы без компонента:
- `.ui-toolbar` — строка фильтров (в ней `SearchInput` растягивается до 480); `.ui-chips` — ряд `Chip` под ней;
- `.ui-table` + `.ui-table-wrap` (на `Panel padding="none"`), `--table-min`, `td.num` — числа вправо, `td.actions` — кнопки строки; `.ui-late` — просрочка;
- `.ui-form`, `.ui-actions`, `.ui-dialog__title`, `.ui-dialog__text` — форма и окно;
- `.ui-empty`, `.ui-empty__title` — пустое состояние; `.ui-dot` + `style={{"--dot": "var(--color-cat-3)"}}` — точка
  категории; `.ui-spinner`, `.visually-hidden`, `.mono`.

Мультиселект фильтра (список с флажками) — `Dropdown` с кнопкой `secondary` («Категория (2)» с `IconFilter`) и
разметкой:

```tsx
<Dropdown button={({ open, toggle }) => <Button icon={<IconFilter />} aria-expanded={open} onClick={toggle}>Категория{n ? ` (${n})` : ""}</Button>}>
  {() => <div className="dd-list">{options.map((o) => (
    <label key={o} className="dd-item"><input type="checkbox" checked={sel.has(o)} onChange={() => flip(o)} />{o}<span className="n">{count[o]}</span></label>
  ))}</div>}
</Dropdown>
```

## Контракты AURA, которых нет в наборе (строить по ним, когда понадобятся)

Геометрия и состояния — из `tokens.json`; литералы ниже переводить в токены (`#fafaf8` → `--color-bg-subtle`,
`#7cac58`/`#83b766` → `color-mix(in srgb, var(--color-action-primary) 80%, var(--color-bg-surface))`).

| Компонент | Геометрия | Состояния |
|---|---|---|
| Плитка выбора (radio/checkbox-карточка) | высота 84, контрол 16 по центру по вертикали, текст с отступа 45, заголовок 14/20 600, описание 12/16 через 2, padding 14/12, радиус 12, gap между плитками 8 | default: subtle + граница default; hover: зеленоватая граница + тень `0 4px 12px` 7%; selected: surface + граница action-primary |
| Компактная опция с иконкой | высота 54, контрол с 13, иконка 32 с 45, текст с 85 | как плитка |
| Загрузка файла (dragger) | пусто 84 / с файлом 86, padding 12/16, gap 12, иконка 40, радиус 20, граница 1.5 **пунктир** | empty: subtle + зеленоватый пунктир; hover/drag: selected-фон + action-primary пунктир; added: сплошная граница |
| Плашка файла | высота ≥28, радиус 8, gap 4 | фон selected, зелёная граница и текст; «удалить» на hover — цвет ошибки |
| Шаги процесса | высота ≥60, иконка 28, радиус 20, gap 12 | pending: иконка тёмная; active: зелёная; complete: зелёная с галочкой |
| Панель действия (низ формы) | высота ≥64, кнопка ≥176 шириной, gap 16 | пусто: кнопка недоступна; выбрано: доступна; обработка: loading; готово: статус успеха + «Ещё раз»; ошибка: статус ошибки |
| Переключатель (switch) | 44×22, «таблетка» | выкл: серый трек; вкл: action-primary; ручка белая |

Правило AURA: не вводить состояний, которых интерфейс не рисует; не придумывать новых цветов, радиусов, отступов и
иконок вне системы — сначала токен, потом использование.