# UI Design Contract — Auth Portal

Единый контракт ops-семейства (CFDM / vps / EvoBGP / EvoFirewall / **auth-portal**).  
Surface: **ReUI Frame**. Иерархия: **ReUI PRO > shadcn primitives**.

Карта: [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) · [Registry](https://reui.io/docs/registry) · [License](https://reui.io/docs/license-setup) · [Blocks](https://reui.io/blocks) · [MCP](https://reui.io/docs/mcp) · [Agent Skills](https://reui.io/docs/agent-skills)

Эталоны: [app-shell-12](https://reui.io/preview/base/app-shell-12) · [solution-users-1](https://reui.io/preview/base/solution-users-1) · [solution-users-6](https://reui.io/preview/base/solution-users-6) · [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) · [empty-state-14](https://reui.io/preview/base/empty-state-14) · [empty-state-12](https://reui.io/preview/base/empty-state-12) · KPI [stats-12](https://reui.io/preview/base/stats-12)

## Surface

Project lock: **`surface: frame`**. Ops / list / settings — только Frame. Не смешивать Card и Frame.

## Kit (`reui-kit/`)

| Component | Role |
|-----------|------|
| `AdminUsersGrid` | Frame + Filters + DataGrid (admin users, solution-users-1) |
| `KpiStatGrid` | EvoBGP hybrid KPI (если нужен dashboard) |
| `QuickActionGrid` | Frame quick actions (sibling KPI) |
| `SettingsShell` | settings nav |

Markup KPI/QuickActions — SoT EvoBGP (diff только `@authportal/ui`).

## Shared App Shell chrome

При переключении portal / CFDM / EvoBGP / vps / fw меняются **только** sidebar nav и `main`.

| Токен / зона | Значение |
|--------------|----------|
| `--sidebar-width` | `240px` |
| Sidebar / hover | theme `--sidebar` / `--sidebar-accent` — без `color-mix` override |
| Header | `h-12`, sticky, `border-b`, `px-4 md:px-6` |
| Header left | `SidebarTrigger` + `Separator` + Breadcrumb |
| Header right | **AppsMenu → SystemMonitorPopover** (тема — в NavUser) |
| Sidebar footer | **NavUser** — аватар, имя, email, тема (segmented), выход · [app-shell-1](https://reui.io/preview/base/app-shell-1) |
| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |

Запрещено в chrome: `SidebarRail`, Search pill в header, `ModeToggle` в header (тема только в NavUser).

Nav groups Auth Portal:

- **Портал:** Приложения (`/apps`)
- **Админ** (только `is_admin`): Пользователи (`/admin`), Журнал (`/admin/audit`), Ссылки приложений (`/admin/apps`)

App Switcher: `portal_settings.app_switcher_json` → public `GET /api/v1/app-switcher`, admin `GET/PUT /api/v1/admin/app-switcher`. Ids: `cfdm` · `vps` · `bgp` · `fw` · `dns` · `cdn`.

## MCP workflow

1. MCP `user-reui` — `search` / `get_block` / `get_component` with `surface: "frame"`
2. Cite `previewUrl` + `docsUrl`
3. CLI from `apps/web`: `pnpm dlx shadcn@latest add @reui/...`
4. Adapt into kit
5. `validate_usage` / `get_audit_checklist`

Primitives: MCP `plugin-shadcn-shadcn` + `@authportal/ui`.

## License

```env
# apps/web/.env.local
REUI_LICENSE_KEY=
```

`apps/web/components.json` → `Authorization: Bearer ${REUI_LICENSE_KEY}`.

## Spacing

- AppShell main / PageShell: `gap-4 md:gap-6`
- No `space-y-*` / `space-x-*` — use `flex` + `gap-*`
- Max 1 primary CTA per screen
- Semantic tokens only — no raw `bg-emerald-*`

## Forbidden

- Card as ops list/dashboard shell
- Hand-rolled data tables when ReUI DataGrid exists
- Hand-rolled KPI / Quick Actions when kit exists
- Mixing Card and Frame on the same ops screen
- ModeToggle in header