feat(web): обновить компоненты и добавить новые элементы интерфейса

- Добавлены новые правила для использования ReUI и обновлены существующие правила.
- Внедрены новые компоненты, такие как Frame, Alert, IconStack и DetailPanel, для улучшения интерфейса.
- Обновлены существующие компоненты, включая DataGridCard и EmptyState, с использованием новых элементов.
- Добавлены новые утилиты для фильтрации данных и управления состоянием.
- Обновлен .gitignore для исключения файлов окружения.

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

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

@@ -6,110 +6,68 @@ alwaysApply: false
 
 # Frontend UI Patterns
 
-См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`reui-mcp.mdc`](reui-mcp.mdc), [Components](https://ui.shadcn.com/docs/components), [ReUI llms.txt](https://reui.io/llms.txt).
+См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`reui-mcp.mdc`](reui-mcp.mdc), [`docs/ui-design-contract.md`](../../docs/ui-design-contract.md), [ReUI llms.txt](https://reui.io/llms.txt).
+
+## Surface
+
+**`UI_SURFACE = 'frame'`** (`lib/ui-surface.ts`). Ops/list/dashboard/detail/settings — ReUI Frame, не Card shell.
 
 ## Docs workflow (обязательно)
 
-0. Codegraph `codegraph_explore` — найти существующие shared/domain-компоненты
-1. [`reui-mcp.mdc`](reui-mcp.mdc) — если нужен Data Grid, Filters, Autocomplete и др.
-2. MCP `plugin-shadcn-shadcn` — search → examples → add command (`@shadcn` / `@reui`)
-3. CLI: `@shadcn/*` → `pnpm dlx shadcn@latest docs <component>`; `@reui/*` → ReUI docs + llms.txt
-4. Код по examples + docs API (только после совпадения MCP ↔ docs)
-5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn/ReUI primitives)
-6. MCP `get_audit_checklist` — перед merge
-7. Codegraph `codegraph_status` — Pending sync пустой
+0. Codegraph / поиск `reui-kit/*`
+1. MCP **`user-reui`** — search → `get_block` / `compose_page` (`surface: "frame"`) — cite `previewUrl` + `docsUrl`
+2. Primitives: MCP `plugin-shadcn-shadcn` + CLI docs
+3. CLI: `cd apps/web && pnpm dlx shadcn@latest add @reui/...`
+4. Adapt в kit — не hand-roll
+5. Context7 — только TanStack / Recharts
+6. `validate_usage` / `get_audit_checklist`
 
 ## Иерархия компонентов
 
 ```
 @cfdm/ui/components/*     ← shadcn CLI (packages/ui)
 @/components/reui/*       ← ReUI CLI @reui/* (apps/web)
-apps/web/src/components/  ← shared + domain + layout
-  page-shell.tsx          ← обёртка страницы
+apps/web/src/components/
+  reui-kit/               ← ResourcePage, KpiStatGrid, OpsDashboard, SettingsShell
+  page-shell.tsx
   page-header.tsx
-  empty-state.tsx
+  empty-state.tsx         ← Empty + IconStack (empty-state-12)
   query-state.tsx
-  confirm-dialog.tsx
-  data-grid-card.tsx
-  section-cards.tsx
-  status-badge.tsx
-  form-sheet.tsx          ← Sheet + RHF FormProvider
-  form-field.tsx          ← Field + Controller + aria-invalid
-  loading-button.tsx      ← Button + Spinner + label swap
-  section-cards-skeleton.tsx
-  table-skeleton.tsx
-  layout/                 ← app-shell, site-header
-  domain-*                ← бизнес-компоненты
+  form-sheet.tsx
+  layout/
+  domain-*
 ```
 
 ## Матрица стандартизации
 
-| Элемент | Shared | Primitive |
-|---------|--------|-----------|
+| Элемент | Shared | Primitive / Preview |
+|---------|--------|---------------------|
 | Page wrapper | `PageShell` | — |
 | Page title | `PageHeader` | — |
-| Stat metrics | `SectionCards` | `Card` |
-| Data list | `DataGridCard` | `@reui/data-grid`, `Table` |
-| Filters toolbar | `VpsFiltersToolbar` | `@reui/filters` |
-| Autocomplete | `AutoCompleteInput` | `@reui/autocomplete` |
-| Number input | — | `@reui/number-field` |
-| Date range | `lib/date-selector-i18n.ts` | `@reui/date-selector` |
-| Empty | `EmptyState` | `Empty` |
-| Loading / Error | `QueryState` | `Skeleton`, `Alert` |
-| Status | `StatusBadge` | `Badge`, `@reui/badge` |
-| Create/Edit | `FormSheet` + `*-edit-sheet.tsx` | `Sheet`, `Field` |
-| Form field | `FormField` | `Field`, `Input`, `Select` |
-| Submit button | `LoadingButton` | `Button`, `Spinner` |
-| Table wrapper | `DataGridCard` | `Table`, `Card` |
-| Delete confirm | `ConfirmDialog` | `AlertDialog` |
-| List row | — | `Item variant="outline" size="sm"` |
-| Nav | `AppSidebar` | `Sidebar` |
-| Breadcrumbs | `SiteHeader` | `Breadcrumb` |
-| Dates | `lib/format.ts` | — |
+| KPI | `reui-kit/KpiStatGrid` | [stats-12](https://reui.io/preview/base/stats-12) |
+| Data list | `reui-kit/ResourcePage` | [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) |
+| Dashboard | `reui-kit/OpsDashboard` | [dashboard-1](https://reui.io/preview/base/dashboard-1) |
+| Settings | `reui-kit/SettingsShell` | [settings-16](https://reui.io/preview/base/settings-16) |
+| Filters | ResourcePage / domain toolbars | `@reui/filters` |
+| Empty | `EmptyState` | [empty-state-12](https://reui.io/preview/base/empty-state-12) |
+| Loading / Error | `QueryState` | Skeleton, ReUI Alert |
+| Status | `StatusBadge` | `@reui/badge` |
+| Create/Edit | `FormSheet` | Sheet, Field |
+| Delete confirm | `ConfirmDialog` | AlertDialog |
+| Nav | `AppShell` | [app-shell-12](https://reui.io/preview/base/app-shell-12) |
 
-## Overlay selection
-
-| Сценарий | Компонент |
-|----------|-----------|
-| Create/edit форма | `Sheet` |
-| Destructive confirm | `AlertDialog` via `ConfirmDialog` |
-| Modal preview | `Dialog` |
-
-## Block registry
-
-| Зона | Block |
-|------|-------|
-| Shell | sidebar-07 |
-| Dashboard | dashboard-01 |
-| Login | login-03 |
+**Устарело (не использовать на новых экранах):** `DataGridCard`, `SectionCards` (Card KPI).
 
 ## Spacing
 
 ```
-PageShell:     gap-4 md:gap-6, px-4 lg:px-6 py-4 md:py-6
-Card grid:     gap-4
-FieldGroup:    gap-4
-Item list:     gap-2
-Toolbar:       gap-2
+PageShell / main: gap-4 md:gap-6, px-4 md:px-6
+FieldGroup:       gap-4
+Toolbar:          gap-2
 ```
 
-**Запрещено:** `space-y-*`, raw colors (`bg-emerald-*`), custom empty divs, page-level Spinner.
+**Запрещено:** `space-y-*`, raw colors, Card как ops-shell, page-level Spinner.
 
-## UX/UI 2026 (состояния данных)
+## Button hierarchy
 
-Каждый блок: **default, hover, focus, disabled, empty, loading, error**.
-
-- **Loading** — `Skeleton` с размерами финального контента (`QueryState skeleton={…}`), не Spinner на странице
-- **Empty** — `EmptyState` с CTA (кнопка создания)
-- **Zero-results** — отдельный empty с «Сбросить фильтр» (не «Создать»)
-- **Error** — `QueryState` + `onRetry` + иконка + текст
-- **Overflow** — `truncate`, `max-w-*`, `Tooltip`; `tabular-nums` для чисел
-- **Density** — таблицы `h-10 text-sm`; max 1 primary CTA на экран
-- **A11y** — `aria-invalid` на полях, `aria-label`/`sr-only` на icon-only кнопках, цвет не единственный сигнал статуса
-
-## Button hierarchy (max 1 primary per screen)
-
-1. `default` — главный CTA
-2. `outline` — вторичные действия
-3. `ghost` / `link` — навигация, cancel
-4. `destructive` — только с `ConfirmDialog`
+Max 1 primary (`default`) на экран; остальные `outline` / `ghost`.

.cursor/rules/reui-mcp.mdc

@@ -5,105 +5,87 @@ alwaysApply: true
 
 # ReUI MCP — обязательно для enterprise-компонентов
 
-ReUI — first-class shadcn registry с enterprise-компонентами (Data Grid, Filters, Stepper и др.). Проект использует **Base UI** (`style: base-nova`), не Radix.
+ReUI — first-class shadcn registry. Проект: **Base UI** (`style: base-nova`), surface lock **`frame`**.
 
-Связанные правила: [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`frontend-monorepo.mdc`](frontend-monorepo.mdc), [`frontend-shadcn.mdc`](frontend-shadcn.mdc).
+Связанные: [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`frontend-monorepo.mdc`](frontend-monorepo.mdc), [`docs/ui-design-contract.md`](../../docs/ui-design-contract.md).
 
 | Документ | URL |
 |----------|-----|
-| **llms.txt (карта для ИИ)** | https://reui.io/llms.txt |
+| **llms.txt** | https://reui.io/llms.txt |
 | **Get Started** | https://reui.io/docs/get-started |
-| **Styling (semantic tokens)** | https://reui.io/docs/styling |
+| **Styling** | https://reui.io/docs/styling |
 | **MCP** | https://reui.io/docs/mcp |
-| **Base UI components** | https://reui.io/docs/components/base/<name> |
+| **License** | https://reui.io/docs/license-setup |
+| **Base UI** | https://reui.io/docs/components/base/<name> |
+
+## Primary MCP
+
+1. **`user-reui`** — `search` / `get_block` / `compose_page` (`surface: "frame"`) — cite `previewUrl`
+2. **`plugin-shadcn-shadcn`** — primitives `@shadcn`; `@reui` вторично
 
 ## Когда использовать 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` → `VpsFiltersToolbar` |
-| 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` |
+| Button, Sheet, Field, Sidebar | `@shadcn` | `@cfdm/ui/components/*` |
+| Frame surface | `@reui` | `@/components/reui/frame` |
+| Data Grid lists | `@reui` | `reui-kit/ResourcePage` |
+| KPI | `@reui` stats-12 | `reui-kit/KpiStatGrid` |
+| Filters | `@reui` | `@/components/reui/filters` |
+| Semantic badge | `@reui` | `@/components/reui/badge` / `StatusBadge` |
+| Number / date / autocomplete / color | `@reui` | `@/components/reui/*` |
 
-**Простые списки** — shadcn `Table`. **Сложные data-списки** — `DataGridCard` (ReUI data-grid), не shadcn Data Table.
+**Сложные списки** — `ResourcePage` (Frame + data-grid + filters), не Card `DataGridCard`, не raw `<table>`.
 
-## Источники для ИИ (порядок)
+## MCP workflow
 
-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`
+0. Поиск `reui-kit/*`, `@/components/reui/*`
+1. `user-reui` `search` (`surface: "frame"`)
+2. CLI из `apps/web`: `pnpm dlx shadcn@latest add @reui/<name> --yes`
+3. Post-add: shadcn imports → `@cfdm/ui/components/*`
+4. Adapt → kit / route
+5. `validate_usage` + `get_audit_checklist`
 
-## MCP workflow (ветка ReUI)
-
-0. **Codegraph** `codegraph_explore` — найти `DataGridCard`, `VpsFiltersToolbar` и существующие `@/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` и т.д. |
+| Kit | `apps/web/src/components/reui-kit/` | `@/components/reui-kit/*` |
 
-```bash
-cd apps/web
-pnpm dlx shadcn@latest add @reui/data-grid
-pnpm dlx shadcn@latest add @reui/filters
+## License
+
+```env
+# apps/web/.env.local
+REUI_LICENSE_KEY=
 ```
 
-## Уже установленные ReUI-компоненты
+`apps/web/components.json` → `@reui` с `Authorization: Bearer ${REUI_LICENSE_KEY}`.
 
-`autocomplete`, `badge`, `color-picker`, `data-grid/*`, `date-selector`, `filters`, `number-field` — в [`apps/web/src/components/reui/`](apps/web/src/components/reui/).
+## Эталоны preview
 
-Перед добавлением дубликата — проверить 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
+| Зона | Preview |
+|------|---------|
+| KPI | https://reui.io/preview/base/stats-12 |
+| List | https://reui.io/preview/base/data-grid-filtering-2 |
+| Settings | https://reui.io/preview/base/settings-16 |
+| Shell | https://reui.io/preview/base/app-shell-12 |
+| Empty | https://reui.io/preview/base/empty-state-12 |
+| Dashboard | https://reui.io/preview/base/dashboard-1 |
 
 ## Запрещено
 
-- Копипаст с 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.io без CLI
+- ReUI в `packages/ui`
+- Card как ops-shell
+- Hand-roll data-grid/filters/KPI при наличии kit
+- Смешивать Card и Frame на ops-экране
 
 ## Чеклист
 
-- [ ] Задача требует 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` без ошибок
+- [ ] `surface: frame`
+- [ ] `user-reui` + previewUrl
+- [ ] CLI add из `apps/web`
+- [ ] Kit / `@/components/reui` / `@cfdm/ui`
+- [ ] `pnpm --filter web build`