MikrotikManager/docs/ui-design-contract.md

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 · llms.txt · Get Started · Styling · Blocks · MCP

Surface

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

Эталон CRUD: 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.local (gitignored)
REUI_LICENSE_KEY=

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