# UI Design Contract (MikrotikManager)

Surface: **ReUI Frame**. Kit: `components/reui-kit/`.  
Иерархия: **ReUI PRO > shadcn primitives**.  
Стек: Next.js 16 App Router + Turbopack + shadcn **base-nova** + ReUI `@reui`.

Карта: [docs](https://reui.io/docs) · [llms.txt](https://reui.io/llms.txt) · [Get Started](https://reui.io/docs/get-started) · [Styling](https://reui.io/docs/styling) · [Blocks](https://reui.io/blocks) · [MCP](https://reui.io/docs/mcp)

## Surface

Project lock: **`surface: frame`**. Ops / list / dashboard / detail / settings — только **Frame**, не shadcn Card как page shell. Не смешивать Card и Frame на одном ops-экране.

Эталон CRUD: [`app/(main)/servers`](../app/(main)/servers).  
Оболочка списков: `DataPageCard` → Frame. Панели: `OpsPanel` → Frame.

## Canonical PRO references

| Зона | Preview |
|------|---------|
| Shell | https://reui.io/preview/base/app-shell-12 |
| KPI | https://reui.io/preview/base/stats-12 · https://reui.io/docs/components/base/icon-tile |
| Lists | https://reui.io/preview/base/data-grid-filtering-2 |
| Server rail | https://reui.io/preview/base/list-9 · https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/icon-tile |
| Settings | https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-3 |
| Forms / Sheet | https://reui.io/preview/base/form-7 · https://reui.io/preview/base/sheet-8 |
| Alert / Badge | https://reui.io/docs/components/base/alert · https://reui.io/docs/components/base/badge |
| Empty | https://reui.io/preview/base/empty-state-12 |

## Kit (`components/reui-kit/`)

| Component | Role |
|-----------|------|
KPI: только `KpiStatGrid` (hybrid IconTile elevated `size-10.5`, эталон `/wireguard`). Не hand-roll Frame KPI.
| `CodeExportSheet` | Экспорт кода (.rsc / .conf) — Sheet + Frame + ScrollArea |

Переключение сервера (ops-контекст): **`ServerTileRail` + `ServerRailLayout`** (`w-60` = `--sidebar-width`). Desktop rail сворачивается (persist `mm:server-rail-collapsed`); mobile — Sheet. Не Combobox. Страницы: OSPF, Filters, GRE, Recursive Routes, WireGuard, Terminal, Certificates, Probes, **Firewall** (live `/api/firewall`). Combobox — generic primitive, не доменный селектор хостов.

Слои:

| Слой | Путь |
|------|------|
| shadcn | `components/ui/` |
| ReUI CLI | `components/reui/` |
| Kit | `components/reui-kit/` |
| Domain grids | `components/data-grids/` |

## Shared App Shell chrome

| Токен / зона | Значение |
|--------------|----------|
| `--sidebar-width` | `240px` |
| Header right | AppsMenu → SystemMonitorPopover (тема — в NavUser) |
| Search | ⌘K / Ctrl+K only |
| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |

## Spacing & tokens

- `flex` + `gap-*` — не `space-y-*` / `space-x-*`
- Semantic tokens / ReUI Badge variants — не raw `bg-emerald-*` / hex
- Max 1 primary CTA на экран

## Exceptions (не Frame ops shell)

- `network-map` — canvas / topology UX
- `terminal` — terminal chrome

## Forbidden

- Card как ops list/dashboard shell
- Hand-roll data-grid / KPI / code-export при наличии kit
- Дубль Copy в header + footer export sheet
- Mixing Card и Frame на одном ops-экране
- Radix-варианты docs — только Base UI (`base-nova`)
- Combobox / toolbar-фильтр как переключатель сервера (SoT — `ServerTileRail`)

## License

```env
# .env.local (gitignored)
REUI_LICENSE_KEY=
```

`components.json` → `@reui` с `Authorization: Bearer ${REUI_LICENSE_KEY}`.