Выравнивание UI с vps-tracker: тема b2fA, ReUI DataGrid и shell

Синхронизированы тема и layout (ModeToggle, sticky header), списки переведены на DataGridCard, дашборд на компактные SectionCards.

Co-authored-by: Cursor <[email protected]>

.cursor/rules/frontend-shadcn.mdc

@@ -47,15 +47,14 @@ Monorepo layout — [`frontend-monorepo.mdc`](frontend-monorepo.mdc). MCP workfl
 | `EmptyState` | `empty-state.tsx` |
 | `QueryState` | `query-state.tsx` |
 | `ConfirmDialog` | `confirm-dialog.tsx` |
-| `DataTableCard` | `data-table-card.tsx` |
+| `DataGridCard` | `data-grid-card.tsx` |
 | `SectionCards` | `section-cards.tsx` |
 | `StatusBadge` | `status-badge.tsx` |
 | `FormSheet` | `form-sheet.tsx` |
 | `FormField` | `form-field.tsx` |
 | `TableCard` | `table-card.tsx` |
 | `LoadingButton` | `loading-button.tsx` |
-| `SectionCardsSkeleton` | `section-cards-skeleton.tsx` |
-| `TableSkeleton` | `table-skeleton.tsx` |
+| `SectionCardsSkeleton` / `TableSkeleton` | `skeletons.tsx` |
 
 **Overlay:** Sheet — forms; AlertDialog — destructive confirm.
 

.cursor/rules/frontend-ui-patterns.mdc

@@ -29,15 +29,14 @@ apps/web/src/components/  ← shared + domain + layout
   empty-state.tsx
   query-state.tsx
   confirm-dialog.tsx
-  data-table-card.tsx
+  data-grid-card.tsx
   section-cards.tsx
   status-badge.tsx
   form-sheet.tsx          ← Sheet + RHF FormProvider
   form-field.tsx          ← Field + Controller + aria-invalid
   table-card.tsx          ← Card + Table wrapper
   loading-button.tsx      ← Button + Spinner + label swap
-  section-cards-skeleton.tsx
-  table-skeleton.tsx
+  skeletons.tsx           ← SectionCardsSkeleton, TableSkeleton
   layout/                 ← app-shell, site-header
   domain-*                ← бизнес-компоненты
 ```
@@ -49,7 +48,7 @@ apps/web/src/components/  ← shared + domain + layout
 | Page wrapper | `PageShell` | — |
 | Page title | `PageHeader` | — |
 | Stat metrics | `SectionCards` | `Card` |
-| Data list | `DataTableCard` | `Table`, `InputGroup` |
+| Data list | `DataGridCard` | ReUI `data-grid` |
 | Empty | `EmptyState` | `Empty` |
 | Loading / Error | `QueryState` | `Skeleton`, `Alert` |
 | Status | `StatusBadge` | `Badge` |

.cursor/rules/reui-mcp.mdc

@@ -0,0 +1,109 @@
+---
+description: ReUI registry (@reui) — enterprise-компоненты, MCP workflow, зависимости, матрица выбора shadcn vs ReUI
+alwaysApply: true
+---
+
+# ReUI MCP — обязательно для enterprise-компонентов
+
+ReUI — first-class shadcn registry с enterprise-компонентами (Data Grid, Filters, Stepper и др.). Проект использует **Base UI** (`style: base-nova`), не Radix.
+
+Связанные правила: [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`frontend-monorepo.mdc`](frontend-monorepo.mdc), [`frontend-shadcn.mdc`](frontend-shadcn.mdc).
+
+| Документ | URL |
+|----------|-----|
+| **llms.txt (карта для ИИ)** | https://reui.io/llms.txt |
+| **Get Started** | https://reui.io/docs/get-started |
+| **Styling (semantic tokens)** | https://reui.io/docs/styling |
+| **MCP** | https://reui.io/docs/mcp |
+| **Base UI components** | https://reui.io/docs/components/base/<name> |
+
+## Когда использовать ReUI vs shadcn
+
+| Задача | Registry | Импорт |
+|--------|----------|--------|
+| Button, Card, Sheet, Field, Sidebar | `@shadcn` | `@cfdm/ui/components/*` |
+| Blocks (sidebar-07, dashboard-01) | `@shadcn` | blocks → `apps/web/src/components/` |
+| Data Grid (sort, pagination, virtual, columns) | `@reui` | `@/components/reui/data-grid/*` → обёртка `DataGridCard` |
+| Мультифильтры | `@reui` | `@/components/reui/filters` → `DomainsFiltersToolbar` |
+| Number field со stepper | `@reui` | `@/components/reui/number-field` |
+| Autocomplete | `@reui` | `@/components/reui/autocomplete` → `AutoCompleteInput` |
+| Date selector / range | `@reui` | `@/components/reui/date-selector` |
+| Color picker (формы) | `@reui` | `@/components/reui/color-picker` — hex только в swatch data |
+| Semantic badge (success/info/warning) | `@reui` | `@/components/reui/badge` или `StatusBadge` |
+
+**Простые списки** — shadcn `Table`. **Сложные data-списки** — `DataGridCard` (ReUI data-grid), не shadcn Data Table.
+
+## Источники для ИИ (порядок)
+
+1. [ReUI llms.txt](https://reui.io/llms.txt) — полный каталог компонентов
+2. MCP `plugin-shadcn-shadcn` с `registries: ["@reui"]`
+3. Docs с **Copy Markdown**: `https://reui.io/docs/components/base/<name>`
+4. CLI dry-run: `cd apps/web && pnpm dlx shadcn@latest add @reui/<name> --dry-run`
+
+## MCP workflow (ветка ReUI)
+
+0. **Codegraph** `codegraph_explore` — найти `DataGridCard`, `DomainsFiltersToolbar` и существующие `@/components/reui/*`
+1. **`get_project_registries`** — должен содержать `@reui`
+2. **`search_items_in_registries`** с `registries: ["@reui"]`, `query`: `"data grid"`, `"filters"`, `"stepper"` и т.д.
+3. **`get_item_examples_from_registries`** — полный код перед JSX
+4. **`get_add_command_for_items`** — точная CLI-команда
+5. Выполнить add из `apps/web` (см. [`frontend-monorepo.mdc`](frontend-monorepo.mdc))
+6. **Docs:** ReUI `https://reui.io/docs/components/base/<name>` + llms.txt — **не** ui.shadcn.com для `@reui/*`
+7. Post-add: импорты shadcn-примитивов → `@cfdm/ui/components/*`
+8. `pnpm install` + `pnpm --filter web build`
+
+## Размещение и импорты
+
+| Слой | Путь | Импорт |
+|------|------|--------|
+| shadcn primitives | `packages/ui/src/components/` | `@cfdm/ui/components/*` |
+| ReUI enterprise | `apps/web/src/components/reui/` | `@/components/reui/*` |
+| Проектные обёртки | `apps/web/src/components/` | `@/components/data-grid-card` и т.д. |
+
+```bash
+cd apps/web
+pnpm dlx shadcn@latest add @reui/data-grid
+pnpm dlx shadcn@latest add @reui/filters
+```
+
+## Уже установленные ReUI-компоненты
+
+`badge`, `data-grid/*`, `filters` — в [`apps/web/src/components/reui/`](apps/web/src/components/reui/).
+
+Перед добавлением дубликата — проверить Codegraph и существующие обёртки.
+
+## Зависимости (только `apps/web`, не `packages/ui`)
+
+| npm-пакет | ReUI-компоненты |
+|-----------|-----------------|
+| `@tanstack/react-table` | data-grid |
+| `@tanstack/react-virtual` | data-grid (virtual) |
+| `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/modifiers`, `@dnd-kit/utilities` | data-grid dnd, sortable, kanban |
+| `date-fns`, `react-day-picker` | date-selector |
+
+После `shadcn add @reui/...` — проверить, что CLI добавил недостающие deps в [`apps/web/package.json`](apps/web/package.json).
+
+## Semantic tokens (Styling)
+
+ReUI расширяет тему shadcn токенами `--success`, `--info`, `--warning`, `--destructive-foreground`, `--invert` — уже в [`packages/ui/src/styles/globals.css`](packages/ui/src/styles/globals.css).
+
+- Badge/Alert: `variant="success"` / `"info"` / `"warning"` — не `bg-emerald-*`
+- Базовая тема: `pnpm dlx shadcn@latest apply b2fA --only theme`
+- ReUI-токены: по [Styling guide](https://reui.io/docs/styling); не править `globals.css` вручную без сверки с docs
+
+## Запрещено
+
+- Копипаст с reui.io без CLI `add @reui/...`
+- Класть ReUI в `packages/ui` или импортировать как `@cfdm/ui`
+- Radix-варианты (`/docs/components/radix/...`) — только Base UI
+- Raw Tailwind-цвета вместо ReUI semantic `variant`
+- Писать data-grid/filters с нуля, если есть `@reui/*` и shared-обёртки
+
+## Чеклист
+
+- [ ] Задача требует ReUI? (см. матрицу выше)
+- [ ] MCP search с `registries: ["@reui"]` + examples
+- [ ] `shadcn add @reui/<name>` из `apps/web`
+- [ ] Импорты: `@cfdm/ui` для примитивов, `@/components/reui` для ReUI
+- [ ] Зависимости в `apps/web/package.json`
+- [ ] `pnpm --filter web build` без ошибок

.cursor/rules/shadcn-ui-production.mdc

@@ -20,7 +20,7 @@ UI строится **исключительно** по [shadcn/ui](https://ui.s
 - Monorepo: `apps/web` + `packages/ui` (`@cfdm/ui`), pnpm workspaces
 - Vite + TanStack Router/Query + shadcn **base-nova**
 - Конфиг: [`apps/web/components.json`](apps/web/components.json), [`packages/ui/components.json`](packages/ui/components.json)
-- Тема: `pnpm dlx shadcn@latest apply b2fA --only theme -y` — единственный способ менять `packages/ui/src/styles/globals.css`
+- Тема: `pnpm dlx shadcn@latest apply b2fA --only theme -y` — единственный способ менять базовую тему `globals.css`; ReUI semantic tokens — [Styling](https://reui.io/docs/styling)
 
 ## Backend → UI