auth-portal/docs/ui-design-contract.md

UI Design Contract — Auth Portal

Surface lock: frame (ReUI Frame). Не смешивать shadcn Card и Frame на ops-экранах.

Эталоны: app-shell-12 · solution-users-1 · solution-users-2 · data-grid-filtering-2 · empty-state-12

Shared App Shell chrome

Эталон: CFDM / EvoBGP + ReUI 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