First Commit

docs/ui-design-contract.md

@@ -0,0 +1,41 @@
+# UI Design Contract — Auth Portal
+
+Surface lock: **`frame`** (ReUI Frame). Не смешивать shadcn Card и Frame на ops-экранах.
+
+Эталоны: [app-shell-12](https://reui.io/preview/base/app-shell-12) · [solution-users-1](https://reui.io/preview/base/solution-users-1) · [solution-users-2](https://reui.io/preview/base/solution-users-2) · [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) · [empty-state-12](https://reui.io/preview/base/empty-state-12)
+
+## Shared App Shell chrome
+
+Эталон: CFDM / EvoBGP + ReUI [app-shell-12](https://reui.io/preview/base/app-shell-12).
+
+При переключении между portal / CFDM / EvoBGP / vps-tracker меняются **только** sidebar nav labels/hrefs и `main` content. Разметка, ширина, фон и hover chrome идентичны.
+
+| Токен / зона | Значение |
+|--------------|----------|
+| `--sidebar-width` | `240px` |
+| Sidebar / hover colors | theme `--sidebar` / `--sidebar-accent` — **без** AppShell `color-mix` override |
+| Header | `h-12`, `sticky`, `border-b`, `px-4 md:px-6` |
+| Header left | `SidebarTrigger` + `Separator` + Breadcrumb |
+| Header right | **AppsMenu** → **ModeToggle** (+ account menu; SystemMonitor — stub/нет) |
+| Sidebar | AppSwitcher → groups → icons `size-4` → **пустой** `SidebarFooter` |
+| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |
+
+Запрещено в chrome: `SidebarRail`, `NavUser` footer, Search pill в header.
+
+Nav groups Auth Portal:
+
+- **Портал:** Приложения (`/apps`)
+- **Админ** (только `is_admin`): Пользователи (`/admin`)
+
+## 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 (`Badge` / `Alert` variants) — no raw `bg-emerald-*`
+
+## Forbidden
+
+- Card as ops list/dashboard shell
+- Hand-rolled data tables when ReUI DataGrid exists
+- Mixing Card and Frame on the same ops screen