From 72a4b3403b9c9f183275b34d073413c6830c67fb Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 30 Jun 2026 14:48:24 +0700
Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D1=80=D0=B0=D0=B2=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20UI=20=D1=81=20vps-tracker:=20?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BC=D0=B0=20b2fA,=20ReUI=20DataGrid=20=D0=B8=20s?=
 =?UTF-8?q?hell?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .agents/skills/reui/SKILL.md                  |   61 +
 .cursor/rules/frontend-shadcn.mdc             |    5 +-
 .cursor/rules/frontend-ui-patterns.mdc        |    7 +-
 .cursor/rules/reui-mcp.mdc                    |  109 +
 .cursor/rules/shadcn-ui-production.mdc        |    2 +-
 apps/web/components.json                      |    3 +
 apps/web/eslint.config.js                     |   21 +
 apps/web/package.json                         |    7 +-
 apps/web/src/components/app-sidebar.tsx       |   13 +-
 apps/web/src/components/data-grid-card.tsx    |  434 ++++
 apps/web/src/components/data-grid-cells.tsx   |   53 +
 apps/web/src/components/data-grid-types.ts    |   25 +
 apps/web/src/components/data-table-card.tsx   |   57 -
 apps/web/src/components/data-table-density.ts |   15 -
 .../src/components/data-table-pagination.tsx  |  119 -
 .../web/src/components/data-table-toolbar.tsx |  110 -
 apps/web/src/components/data-table-view.tsx   |  121 --
 .../src/components/dns-records-data-grid.tsx  |  188 ++
 apps/web/src/components/dns-records-table.tsx |  242 ---
 ...s-data-table.tsx => domains-data-grid.tsx} |  216 +-
 .../components/domains-filters-toolbar.tsx    |   85 +
 apps/web/src/components/kpi-card.tsx          |   99 -
 apps/web/src/components/layout/app-shell.tsx  |   11 +-
 .../web/src/components/layout/site-header.tsx |   17 +-
 apps/web/src/components/list-filters-bar.tsx  |  171 ++
 apps/web/src/components/mode-toggle.tsx       |   29 +
 apps/web/src/components/page-shell.tsx        |   11 +-
 apps/web/src/components/reui/autocomplete.tsx |  343 +++
 apps/web/src/components/reui/badge.tsx        |   98 +
 apps/web/src/components/reui/color-picker.tsx |  220 ++
 .../data-grid/data-grid-column-filter.tsx     |  165 ++
 .../data-grid/data-grid-column-header.tsx     |  345 +++
 .../data-grid/data-grid-column-visibility.tsx |   51 +
 .../reui/data-grid/data-grid-pagination.tsx   |  226 ++
 .../reui/data-grid/data-grid-scroll-area.tsx  |  419 ++++
 .../data-grid/data-grid-table-dnd-rows.tsx    |  309 +++
 .../reui/data-grid/data-grid-table-dnd.tsx    |  312 +++
 .../data-grid/data-grid-table-virtual.tsx     |  492 +++++
 .../reui/data-grid/data-grid-table.tsx        | 1431 ++++++++++++
 .../components/reui/data-grid/data-grid.tsx   |  270 +++
 .../web/src/components/reui/date-selector.tsx | 1330 ++++++++++++
 apps/web/src/components/reui/filters.tsx      | 1924 +++++++++++++++++
 apps/web/src/components/reui/number-field.tsx |  258 +++
 .../src/components/section-cards-skeleton.tsx |   53 -
 apps/web/src/components/section-cards.tsx     |  228 +-
 apps/web/src/components/skeletons.tsx         |   38 +
 apps/web/src/components/status-badge.tsx      |   33 +-
 .../src/components/subdomains-data-grid.tsx   |  197 ++
 apps/web/src/components/subdomains-table.tsx  |  208 --
 apps/web/src/components/table-skeleton.tsx    |   55 -
 apps/web/src/components/theme-provider.tsx    |   17 +-
 apps/web/src/components/truncated-text.tsx    |   36 +
 apps/web/src/main.tsx                         |    4 +-
 apps/web/src/routes/_auth/certificates.tsx    |  145 +-
 .../routes/_auth/domains/$domainId/dns.tsx    |  109 +-
 .../routes/_auth/domains/$domainId/index.tsx  |   65 +-
 apps/web/src/routes/_auth/domains/index.tsx   |   74 +-
 apps/web/src/routes/_auth/groups/$groupId.tsx |  220 +-
 apps/web/src/routes/_auth/index.tsx           |   86 +-
 apps/web/tsconfig.app.json                    |    2 +-
 packages/ui/package.json                      |    2 +
 packages/ui/src/components/button-group.tsx   |   87 +
 packages/ui/src/components/calendar.tsx       |  221 ++
 packages/ui/src/components/dropdown-menu.tsx  |    2 +
 packages/ui/src/components/input-group.tsx    |    2 +
 packages/ui/src/components/kbd.tsx            |   26 +
 packages/ui/src/components/scroll-area.tsx    |    2 +
 packages/ui/src/components/select.tsx         |    6 +-
 packages/ui/src/components/spinner.tsx        |    2 +-
 packages/ui/src/styles/globals.css            |  168 +-
 packages/ui/tsconfig.json                     |    2 +-
 pnpm-lock.yaml                                |   87 +-
 72 files changed, 10700 insertions(+), 1901 deletions(-)
 create mode 100644 .agents/skills/reui/SKILL.md
 create mode 100644 .cursor/rules/reui-mcp.mdc
 create mode 100644 apps/web/src/components/data-grid-card.tsx
 create mode 100644 apps/web/src/components/data-grid-cells.tsx
 create mode 100644 apps/web/src/components/data-grid-types.ts
 delete mode 100644 apps/web/src/components/data-table-card.tsx
 delete mode 100644 apps/web/src/components/data-table-density.ts
 delete mode 100644 apps/web/src/components/data-table-pagination.tsx
 delete mode 100644 apps/web/src/components/data-table-toolbar.tsx
 delete mode 100644 apps/web/src/components/data-table-view.tsx
 create mode 100644 apps/web/src/components/dns-records-data-grid.tsx
 delete mode 100644 apps/web/src/components/dns-records-table.tsx
 rename apps/web/src/components/{domains-data-table.tsx => domains-data-grid.tsx} (53%)
 create mode 100644 apps/web/src/components/domains-filters-toolbar.tsx
 delete mode 100644 apps/web/src/components/kpi-card.tsx
 create mode 100644 apps/web/src/components/list-filters-bar.tsx
 create mode 100644 apps/web/src/components/mode-toggle.tsx
 create mode 100644 apps/web/src/components/reui/autocomplete.tsx
 create mode 100644 apps/web/src/components/reui/badge.tsx
 create mode 100644 apps/web/src/components/reui/color-picker.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid-table.tsx
 create mode 100644 apps/web/src/components/reui/data-grid/data-grid.tsx
 create mode 100644 apps/web/src/components/reui/date-selector.tsx
 create mode 100644 apps/web/src/components/reui/filters.tsx
 create mode 100644 apps/web/src/components/reui/number-field.tsx
 delete mode 100644 apps/web/src/components/section-cards-skeleton.tsx
 create mode 100644 apps/web/src/components/skeletons.tsx
 create mode 100644 apps/web/src/components/subdomains-data-grid.tsx
 delete mode 100644 apps/web/src/components/subdomains-table.tsx
 delete mode 100644 apps/web/src/components/table-skeleton.tsx
 create mode 100644 apps/web/src/components/truncated-text.tsx
 create mode 100644 packages/ui/src/components/button-group.tsx
 create mode 100644 packages/ui/src/components/calendar.tsx
 create mode 100644 packages/ui/src/components/kbd.tsx

diff --git a/.agents/skills/reui/SKILL.md b/.agents/skills/reui/SKILL.md
new file mode 100644
index 0000000..28ba04d
--- /dev/null
+++ b/.agents/skills/reui/SKILL.md
@@ -0,0 +1,61 @@
+---
+name: reui
+description: ReUI enterprise-компоненты в cloudflare-domain-manager — registry @reui, CLI, импорты, матрица выбора. Использовать при Data Grid, Filters и других @reui/* задачах.
+---
+
+# ReUI (cloudflare-domain-manager)
+
+## Источники
+
+1. [llms.txt](https://reui.io/llms.txt) — каталог для ИИ
+2. MCP `plugin-shadcn-shadcn` с `registries: ["@reui"]`
+3. Docs: `https://reui.io/docs/components/base/<name>` (Copy Markdown)
+4. Правила: `.cursor/rules/reui-mcp.mdc`
+
+## CLI (только из apps/web)
+
+```bash
+cd apps/web
+pnpm dlx shadcn@latest add @reui/data-grid --dry-run
+pnpm dlx shadcn@latest add @reui/filters
+```
+
+## Размещение
+
+| Registry | Путь | Импорт |
+|----------|------|--------|
+| `@shadcn` | `packages/ui/src/components/` | `@cfdm/ui/components/*` |
+| `@reui` | `apps/web/src/components/reui/` | `@/components/reui/*` |
+
+Только **Base UI** (`base-nova`). Radix-варианты не использовать.
+
+## Уже установлено
+
+`badge`, `data-grid/*`, `filters` (+ `autocomplete`, `date-selector`, `number-field`, `color-picker` при необходимости)
+
+## Shared-обёртки проекта
+
+| ReUI | Обёртка |
+|------|---------|
+| data-grid | `DataGridCard` |
+| filters | `DomainsFiltersToolbar` |
+| badge | `StatusBadge` |
+
+## Матрица выбора
+
+- Простая таблица → shadcn `Table`
+- Списки с sort/pagination/virtual/columns → `DataGridCard` (`@reui/data-grid`)
+- Мультифильтры → `@reui/filters`
+- Semantic status → `StatusBadge` или `@reui/badge` variant
+
+## Зависимости (apps/web only)
+
+`@tanstack/react-table`, `@tanstack/react-virtual`, `@dnd-kit/*`, `date-fns`, `react-day-picker`
+
+После add — `pnpm install` + `pnpm --filter web build`.
+
+## Post-add
+
+- `@/components/ui/*` → `@cfdm/ui/components/*`
+- Не класть ReUI в `packages/ui`
+- Semantic colors: `variant="success"` — не `bg-emerald-*`
diff --git a/.cursor/rules/frontend-shadcn.mdc b/.cursor/rules/frontend-shadcn.mdc
index b44dae5..1825101 100644
--- a/.cursor/rules/frontend-shadcn.mdc
+++ b/.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.
 
diff --git a/.cursor/rules/frontend-ui-patterns.mdc b/.cursor/rules/frontend-ui-patterns.mdc
index d259ada..bd07566 100644
--- a/.cursor/rules/frontend-ui-patterns.mdc
+++ b/.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` |
diff --git a/.cursor/rules/reui-mcp.mdc b/.cursor/rules/reui-mcp.mdc
new file mode 100644
index 0000000..06a8cd8
--- /dev/null
+++ b/.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` без ошибок
diff --git a/.cursor/rules/shadcn-ui-production.mdc b/.cursor/rules/shadcn-ui-production.mdc
index dbe36f3..279c56b 100644
--- a/.cursor/rules/shadcn-ui-production.mdc
+++ b/.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
 
diff --git a/apps/web/components.json b/apps/web/components.json
index 83a5742..f6ce184 100644
--- a/apps/web/components.json
+++ b/apps/web/components.json
@@ -12,6 +12,9 @@
   },
   "iconLibrary": "lucide",
   "rtl": false,
+  "registries": {
+    "@reui": "https://reui.io/r/{style}/{name}.json"
+  },
   "aliases": {
     "components": "@/components",
     "utils": "@cfdm/ui/lib/utils",
diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
index 96da70d..e88a119 100644
--- a/apps/web/eslint.config.js
+++ b/apps/web/eslint.config.js
@@ -80,4 +80,25 @@ export default defineConfig([
       'no-restricted-syntax': 'off',
     },
   },
+  {
+    files: [
+      'src/components/reui/**/*.{ts,tsx}',
+      'src/components/data-grid-card.tsx',
+      'src/components/data-grid-types.ts',
+      'src/components/data-grid-cells.tsx',
+      'src/components/domains-filters-toolbar.tsx',
+      'src/components/list-filters-bar.tsx',
+    ],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+      'react-hooks/incompatible-library': 'off',
+      'react-hooks/use-memo': 'off',
+      'react-hooks/immutability': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'no-restricted-syntax': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      'prefer-const': 'off',
+    },
+  },
 ])
diff --git a/apps/web/package.json b/apps/web/package.json
index 5d21dea..d27becd 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -15,6 +15,7 @@
     "@cfdm/shared": "workspace:*",
     "@cfdm/ui": "workspace:*",
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.4.0",
@@ -22,12 +23,15 @@
     "@tanstack/react-query": "^5.101.0",
     "@tanstack/react-router": "^1.170.15",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.4",
     "@tanstack/router-vite-plugin": "^1.167.18",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
     "lucide-react": "^1.18.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.6",
+    "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.79.0",
     "recharts": "^3.8.0",
@@ -48,6 +52,7 @@
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2",
     "vite": "^8.0.12",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.8",
+    "tw-animate-css": "^1.0.0"
   }
 }
diff --git a/apps/web/src/components/app-sidebar.tsx b/apps/web/src/components/app-sidebar.tsx
index d00f703..d118c5c 100644
--- a/apps/web/src/components/app-sidebar.tsx
+++ b/apps/web/src/components/app-sidebar.tsx
@@ -76,12 +76,15 @@ export function AppSidebar() {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" render={<Link to="/" />}>
-              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                <CloudIcon />
+              <div
+                className="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-primary-foreground"
+                aria-hidden
+              >
+                <CloudIcon className="size-4" />
               </div>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">CF Domain Manager</span>
-                <span className="truncate text-xs">Управление доменами</span>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-semibold">CF Domain Manager</span>
+                <span className="text-xs text-muted-foreground">Управление доменами</span>
               </div>
             </SidebarMenuButton>
           </SidebarMenuItem>
diff --git a/apps/web/src/components/data-grid-card.tsx b/apps/web/src/components/data-grid-card.tsx
new file mode 100644
index 0000000..5d4132d
--- /dev/null
+++ b/apps/web/src/components/data-grid-card.tsx
@@ -0,0 +1,434 @@
+import { useState, useEffect, type ReactNode } from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  flexRender,
+  type ColumnDef,
+  type SortingState,
+  type RowSelectionState,
+  type VisibilityState,
+  type OnChangeFn,
+} from '@tanstack/react-table'
+import { InboxIcon, Columns3Icon } from 'lucide-react'
+
+import { Checkbox } from '@cfdm/ui/components/checkbox'
+import { Button } from '@cfdm/ui/components/button'
+import { cn } from '@cfdm/ui/lib/utils'
+import {
+  DataGrid,
+  DataGridContainer,
+} from '@/components/reui/data-grid/data-grid'
+import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
+import { DataGridTableVirtual } from '@/components/reui/data-grid/data-grid-table-virtual'
+import { DataGridScrollArea } from '@/components/reui/data-grid/data-grid-scroll-area'
+import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { DataGridColumnVisibility } from '@/components/reui/data-grid/data-grid-column-visibility'
+import { EmptyState } from './empty-state'
+import type { DataGridColumn } from './data-grid-types'
+
+const PAGINATION_LABELS = {
+  rowsPerPageLabel: 'Строк на странице',
+  info: '{from}–{to} из {count}',
+  previousPageLabel: 'Предыдущая страница',
+  nextPageLabel: 'Следующая страница',
+  pageLabel: 'Страница {page}',
+  previousPagesLabel: 'Предыдущие страницы',
+  nextPagesLabel: 'Следующие страницы',
+} as const
+
+function resolveHeaderTitle(header: ReactNode, headerTitle?: string): string {
+  if (headerTitle) return headerTitle
+  if (typeof header === 'string') return header
+  return ''
+}
+
+function loadStoredColumnVisibility(key: string): VisibilityState | undefined {
+  try {
+    const raw = localStorage.getItem(key)
+    if (!raw) return undefined
+    return JSON.parse(raw) as VisibilityState
+  } catch {
+    return undefined
+  }
+}
+
+export { loadStoredColumnVisibility }
+
+export interface DataGridColumnVisibilityOption {
+  id: string
+  label: string
+}
+
+export function dataGridColumnVisibilityOptions<T>(
+  cols: DataGridColumn<T>[],
+): DataGridColumnVisibilityOption[] {
+  return cols
+    .filter((c) => c.enableHiding !== false)
+    .map((c) => ({
+      id: c.key,
+      label: c.headerTitle ?? (typeof c.header === 'string' ? c.header : c.key),
+    }))
+}
+
+export interface DataGridCardProps<TData extends object> {
+  title?: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+  columns: ColumnDef<TData, unknown>[]
+  data: TData[]
+  /** Ключ строки — функция, возвращающая уникальный id. */
+  rowId?: (row: TData, index: number) => string
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyAction?: ReactNode
+  onRowClick?: (row: TData) => void
+  /** Включить пагинацию. По умолчанию true. */
+  pagination?: boolean
+  /** Размер страницы. По умолчанию 10. */
+  pageSize?: number
+  /** Footer-контент (итоги). */
+  footerContent?: ReactNode
+  /** Плотный layout. */
+  dense?: boolean
+  /** Колонка действий закреплена справа. */
+  pinLastColumn?: boolean
+  /** Сортировка по умолчанию. */
+  initialSorting?: SortingState
+  /** Включить виртуализацию строк (для тяжёлых таблиц). Требует height. */
+  virtualization?: boolean
+  /** Высота viewport для виртуализации (px). По умолчанию 480. */
+  height?: number
+  /** Включить выбор строк (чекбоксы). */
+  enableRowSelection?: boolean
+  /** Callback при изменении выбора. */
+  onRowSelectionChange?: (selectedIds: string[]) => void
+  /** Показать picker видимости колонок. */
+  enableColumnVisibility?: boolean
+  /** Управляемая видимость колонок (для внешнего UI, напр. тулбар «Вид»). */
+  columnVisibility?: VisibilityState
+  onColumnVisibilityChange?: OnChangeFn<VisibilityState>
+  /** Показать встроенную кнопку «Колонки». По умолчанию true при enableColumnVisibility. */
+  columnVisibilityTrigger?: boolean
+  /** Ключ localStorage для сохранения видимости колонок. */
+  columnVisibilityStorageKey?: string
+  /** Начальная видимость колонок (перекрывает localStorage для отсутствующих ключей). */
+  initialColumnVisibility?: VisibilityState
+  className?: string
+}
+
+function DataGridSectionHeader({
+  title,
+  description,
+  actions,
+}: {
+  title?: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+}) {
+  if (!title && !description && !actions) return null
+
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <div className="flex min-w-0 flex-col gap-0.5">
+        {title ? <h3 className="text-sm font-medium">{title}</h3> : null}
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+    </div>
+  )
+}
+
+function DataGridPaginationBar() {
+  return (
+    <div className="border-t border-border px-4 py-2.5">
+      <DataGridPagination {...PAGINATION_LABELS} />
+    </div>
+  )
+}
+
+function DataGridCardBody<TData extends object>({
+  table,
+  data,
+  emptyTitle,
+  onRowClick,
+  dense,
+  virtualization,
+  height,
+  footerContent,
+  showPagination,
+  enableColumnVisibility,
+}: {
+  table: ReturnType<typeof useReactTable<TData>>
+  data: TData[]
+  emptyTitle: string
+  onRowClick?: (row: TData) => void
+  dense: boolean
+  virtualization: boolean
+  height: number
+  footerContent?: ReactNode
+  showPagination: boolean
+  enableColumnVisibility: boolean
+}) {
+  return (
+    <DataGrid
+      table={table}
+      recordCount={data.length}
+      onRowClick={onRowClick}
+      emptyMessage={emptyTitle}
+      tableLayout={{
+        dense,
+        stripped: true,
+        rowBorder: true,
+        headerSticky: true,
+        headerBackground: true,
+        headerBorder: true,
+        width: 'auto',
+        columnsVisibility: enableColumnVisibility,
+        columnsResizable: false,
+        columnsPinnable: false,
+        columnsMovable: false,
+        rowsDraggable: false,
+        rowsPinnable: false,
+      }}
+      tableClassNames={{
+        header: 'text-xs font-medium text-muted-foreground',
+      }}
+    >
+      <DataGridContainer border={false}>
+        {virtualization ? (
+          <DataGridScrollArea orientation="vertical" style={{ height }}>
+            <DataGridTableVirtual height={height} footerContent={footerContent} />
+          </DataGridScrollArea>
+        ) : (
+          <DataGridTable footerContent={footerContent} />
+        )}
+      </DataGridContainer>
+      {showPagination ? <DataGridPaginationBar /> : null}
+    </DataGrid>
+  )
+}
+
+export function DataGridCard<TData extends object>({
+  title,
+  description,
+  actions,
+  columns,
+  data,
+  rowId,
+  emptyTitle = 'Нет записей',
+  emptyDescription,
+  emptyAction,
+  onRowClick,
+  pagination,
+  pageSize = 10,
+  footerContent,
+  dense = true,
+  pinLastColumn = false,
+  initialSorting,
+  virtualization = false,
+  height = 480,
+  enableRowSelection = false,
+  onRowSelectionChange,
+  enableColumnVisibility = false,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange,
+  columnVisibilityTrigger,
+  columnVisibilityStorageKey,
+  initialColumnVisibility,
+  className,
+}: DataGridCardProps<TData>) {
+  const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState<VisibilityState>(() => {
+    const stored = columnVisibilityStorageKey
+      ? loadStoredColumnVisibility(columnVisibilityStorageKey)
+      : undefined
+    return { ...initialColumnVisibility, ...stored }
+  })
+
+  const isColumnVisibilityControlled = columnVisibilityProp !== undefined
+  const columnVisibility = isColumnVisibilityControlled ? columnVisibilityProp : internalColumnVisibility
+  const setColumnVisibility: OnChangeFn<VisibilityState> = isColumnVisibilityControlled
+    ? (onColumnVisibilityChange ?? (() => undefined))
+    : setInternalColumnVisibility
+
+  useEffect(() => {
+    if (isColumnVisibilityControlled || !columnVisibilityStorageKey) return
+    localStorage.setItem(columnVisibilityStorageKey, JSON.stringify(columnVisibility))
+  }, [columnVisibility, columnVisibilityStorageKey, isColumnVisibilityControlled])
+
+  const selectColumn: ColumnDef<TData, unknown> = {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        indeterminate={table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Выбрать все"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Выбрать строку"
+        onClick={(e) => e.stopPropagation()}
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    meta: { cellClassName: 'w-10' },
+  }
+
+  const tableColumns = enableRowSelection ? [selectColumn, ...columns] : columns
+
+  const lastColId = pinLastColumn ? tableColumns[tableColumns.length - 1]?.id ?? '' : ''
+
+  const showPagination = pagination ?? true
+
+  const table = useReactTable<TData>({
+    data,
+    columns: tableColumns,
+    state: {
+      sorting,
+      columnVisibility,
+      ...(enableRowSelection ? { rowSelection } : {}),
+    },
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: enableRowSelection
+      ? (updater) => {
+          setRowSelection((prev) => {
+            const next = typeof updater === 'function' ? updater(prev) : updater
+            if (onRowSelectionChange && rowId) {
+              const ids = Object.keys(next).filter((k) => next[k])
+              onRowSelectionChange(ids)
+            }
+            return next
+          })
+        }
+      : undefined,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: showPagination ? getPaginationRowModel() : undefined,
+    initialState: {
+      ...(showPagination ? { pagination: { pageIndex: 0, pageSize } } : {}),
+      ...(pinLastColumn && lastColId ? { columnPinning: { right: [lastColId] } } : {}),
+    },
+    getRowId: rowId
+      ? (row, index) => rowId(row, index)
+      : undefined,
+    enableColumnPinning: pinLastColumn,
+    enableRowSelection,
+    enableHiding: enableColumnVisibility,
+  })
+
+  const showColumnVisibilityTrigger =
+    enableColumnVisibility && (columnVisibilityTrigger ?? true)
+
+  const columnVisibilityAction = showColumnVisibilityTrigger ? (
+    <DataGridColumnVisibility
+      table={table}
+      trigger={
+        <Button variant="ghost" size="sm">
+          <Columns3Icon data-icon="inline-start" />
+          Колонки
+        </Button>
+      }
+    />
+  ) : null
+
+  const headerActions = actions ? (
+    <div className="flex items-center gap-2">
+      {columnVisibilityAction}
+      {actions}
+    </div>
+  ) : (
+    columnVisibilityAction
+  )
+
+  const hasHeader = Boolean(title || description || actions || showColumnVisibilityTrigger)
+
+  if (data.length === 0) {
+    return (
+      <div className={cn('flex flex-col gap-3', className)}>
+        {hasHeader ? (
+          <DataGridSectionHeader title={title} description={description} actions={headerActions} />
+        ) : null}
+        <EmptyState icon={InboxIcon} title={emptyTitle} description={emptyDescription} action={emptyAction} />
+      </div>
+    )
+  }
+
+  const gridBody = (
+    <DataGridCardBody
+      table={table}
+      data={data}
+      emptyTitle={emptyTitle}
+      onRowClick={onRowClick}
+      dense={dense}
+      virtualization={virtualization}
+      height={height}
+      footerContent={footerContent}
+      showPagination={showPagination}
+      enableColumnVisibility={enableColumnVisibility}
+    />
+  )
+
+  return (
+    <div className={cn('flex flex-col gap-3', className)}>
+      {hasHeader ? (
+        <DataGridSectionHeader title={title} description={description} actions={headerActions} />
+      ) : null}
+      {gridBody}
+    </div>
+  )
+}
+
+/** Хелпер для конвертации DataGridColumn<T> → ColumnDef<T> с DataGridColumnHeader. */
+export function columnDefFromDataGrid<T>(
+  cols: DataGridColumn<T>[],
+): ColumnDef<T, unknown>[] {
+  return cols.map((c) => {
+    const title = resolveHeaderTitle(c.header, c.headerTitle)
+    const Icon = c.icon
+    const sortable = c.sortable ?? Boolean(Icon)
+
+    return {
+      id: c.key,
+      ...(sortable
+        ? {
+            accessorFn: c.sortValue
+              ? (row: T) => c.sortValue!(row)
+              : (row: T) => (row as Record<string, unknown>)[c.key] as string | number,
+          }
+        : {}),
+      header: Icon
+        ? ({ column }) => (
+            <DataGridColumnHeader
+              column={column}
+              title={title}
+              icon={<Icon />}
+            />
+          )
+        : () => c.header,
+      cell: ({ row }) => c.cell(row.original, row.index),
+      enableSorting: sortable,
+      enableHiding: c.enableHiding ?? true,
+      meta: {
+        headerTitle: title || undefined,
+        cellClassName: c.className,
+        headerClassName: c.headerClassName,
+      },
+    }
+  })
+}
+
+/** @deprecated Используйте columnDefFromDataGrid */
+export const columnDefFromDataTable = columnDefFromDataGrid
+
+/** re-export flexRender для удобства использования в колонках. */
+export { flexRender }
diff --git a/apps/web/src/components/data-grid-cells.tsx b/apps/web/src/components/data-grid-cells.tsx
new file mode 100644
index 0000000..8870f85
--- /dev/null
+++ b/apps/web/src/components/data-grid-cells.tsx
@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '@cfdm/ui/lib/utils'
+import { TruncatedText } from '@/components/truncated-text'
+
+export function dataGridCellStack(
+  primary: ReactNode,
+  secondary?: ReactNode,
+  className?: string,
+) {
+  return (
+    <div className={cn('flex min-w-0 flex-col leading-tight', className)}>
+      {typeof primary === 'string' || typeof primary === 'number' ? (
+        <TruncatedText className="font-medium">{primary}</TruncatedText>
+      ) : (
+        <span className="truncate font-medium">{primary}</span>
+      )}
+      {secondary ? (
+        typeof secondary === 'string' || typeof secondary === 'number' ? (
+          <TruncatedText className="max-w-[14rem] text-xs text-muted-foreground">{secondary}</TruncatedText>
+        ) : (
+          <span className="max-w-[14rem] truncate text-xs text-muted-foreground">{secondary}</span>
+        )
+      ) : null}
+    </div>
+  )
+}
+
+export function dataGridCellWithIcon(
+  icon: ReactNode,
+  children: ReactNode,
+  className?: string,
+) {
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <span className="shrink-0 text-muted-foreground">{icon}</span>
+      {children}
+    </div>
+  )
+}
+
+export function dataGridCellWithFlag(
+  flag: ReactNode,
+  primary: ReactNode,
+  secondary?: ReactNode,
+) {
+  return (
+    <div className="flex items-center gap-2.5">
+      <span className="flex size-4 shrink-0 items-center justify-center">{flag}</span>
+      {secondary ? dataGridCellStack(primary, secondary) : <span className="font-medium">{primary}</span>}
+    </div>
+  )
+}
diff --git a/apps/web/src/components/data-grid-types.ts b/apps/web/src/components/data-grid-types.ts
new file mode 100644
index 0000000..f1a98a4
--- /dev/null
+++ b/apps/web/src/components/data-grid-types.ts
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+
+export interface DataGridColumn<T> {
+  key: string
+  header: ReactNode
+  cell: (row: T, index: number) => ReactNode
+  icon?: LucideIcon
+  sortable?: boolean
+  sortValue?: (row: T) => string | number
+  headerTitle?: string
+  className?: string
+  headerClassName?: string
+  enableHiding?: boolean
+}
+
+/** @deprecated Используйте DataGridColumn */
+export type DataTableColumn<T> = DataGridColumn<T>
+
+/** Унифицированные классы колонок для DataGridCard. */
+export const COL = {
+  num: 'w-28 text-right tabular-nums',
+  date: 'w-32 text-right tabular-nums text-muted-foreground',
+  actions: 'w-24 text-right',
+} as const
diff --git a/apps/web/src/components/data-table-card.tsx b/apps/web/src/components/data-table-card.tsx
deleted file mode 100644
index 1413f48..0000000
--- a/apps/web/src/components/data-table-card.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { InboxIcon, type LucideIcon } from 'lucide-react'
-import { EmptyState } from '@/components/empty-state'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@cfdm/ui/components/card'
-
-interface DataTableCardProps {
-  title: string
-  description?: string
-  children: React.ReactNode
-  toolbar?: React.ReactNode
-  emptyTitle?: string
-  emptyDescription?: string
-  emptyIcon?: LucideIcon
-  emptyAction?: React.ReactNode
-  isEmpty?: boolean
-}
-
-export function DataTableCard({
-  title,
-  description,
-  children,
-  toolbar,
-  emptyTitle,
-  emptyDescription,
-  emptyIcon: EmptyIcon = InboxIcon,
-  emptyAction,
-  isEmpty,
-}: DataTableCardProps) {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
-        {description && <CardDescription>{description}</CardDescription>}
-      </CardHeader>
-      {toolbar && !isEmpty && (
-        <div className="flex items-center gap-2 px-6 pb-4">{toolbar}</div>
-      )}
-      <CardContent className="p-0">
-        {isEmpty && emptyTitle ? (
-          <EmptyState
-            icon={EmptyIcon}
-            title={emptyTitle}
-            description={emptyDescription}
-            action={emptyAction}
-          />
-        ) : (
-          children
-        )}
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/web/src/components/data-table-density.ts b/apps/web/src/components/data-table-density.ts
deleted file mode 100644
index 0acf344..0000000
--- a/apps/web/src/components/data-table-density.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type Density = 'compact' | 'comfortable' | 'spacious'
-
-export const densityRowClass: Record<Density, string> = {
-  compact: '[&_tr]:h-9 [&_tr_td]:py-1 [&_tr_th]:py-1 text-xs',
-  comfortable: '[&_tr]:h-10 [&_tr_td]:py-2 [&_tr_th]:py-2 text-sm',
-  spacious: '[&_tr]:h-12 [&_tr_td]:py-3 [&_tr_th]:py-3 text-sm',
-}
-
-export const densityLabel: Record<Density, string> = {
-  compact: 'Компактная',
-  comfortable: 'Обычная',
-  spacious: 'Просторная',
-}
-
-export const pageSizeOptions = [10, 20, 50] as const
diff --git a/apps/web/src/components/data-table-pagination.tsx b/apps/web/src/components/data-table-pagination.tsx
deleted file mode 100644
index 0d072f2..0000000
--- a/apps/web/src/components/data-table-pagination.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { Table } from '@tanstack/react-table'
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from '@cfdm/ui/components/pagination'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@cfdm/ui/components/select'
-import { pageSizeOptions } from '@/components/data-table-density'
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>
-  selectedCount?: number
-  pageSizeLabel?: string
-}
-
-function buildPageRange(current: number, total: number): (number | 'ellipsis')[] {
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, i) => i + 1)
-  }
-  const pages: (number | 'ellipsis')[] = [1]
-  const start = Math.max(2, current - 1)
-  const end = Math.min(total - 1, current + 1)
-  if (start > 2) pages.push('ellipsis')
-  for (let i = start; i <= end; i++) pages.push(i)
-  if (end < total - 1) pages.push('ellipsis')
-  pages.push(total)
-  return pages
-}
-
-export function DataTablePagination<TData>({
-  table,
-  selectedCount,
-  pageSizeLabel = 'Строк',
-}: DataTablePaginationProps<TData>) {
-  const { pageIndex, pageSize } = table.getState().pagination
-  const pageCount = table.getPageCount()
-
-  const total = table.getFilteredRowModel().rows.length
-  const from = total === 0 ? 0 : pageIndex * pageSize + 1
-  const to = Math.min((pageIndex + 1) * pageSize, total)
-
-  return (
-    <div className="flex flex-col items-center justify-between gap-4 px-4 py-3 text-sm sm:flex-row">
-      <div className="text-muted-foreground tabular-nums">
-        {selectedCount != null && selectedCount > 0
-          ? `Выбрано: ${selectedCount} из ${total}`
-          : `${from}–${to} из ${total}`}
-      </div>
-      <div className="flex items-center gap-6">
-        <div className="flex items-center gap-2">
-          <span className="text-muted-foreground">{pageSizeLabel}</span>
-          <Select
-            value={String(pageSize)}
-            onValueChange={(val) => table.setPageSize(Number(val))}
-          >
-            <SelectTrigger className="h-8 w-20">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {pageSizeOptions.map((size) => (
-                <SelectItem key={size} value={String(size)}>
-                  {size}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        {pageCount > 1 && (
-          <Pagination className="mx-0 w-auto">
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious
-                  text="Назад"
-                  onClick={() => table.previousPage()}
-                  aria-disabled={!table.getCanPreviousPage()}
-                  className={!table.getCanPreviousPage() ? 'pointer-events-none opacity-50' : undefined}
-                />
-              </PaginationItem>
-              {buildPageRange(pageIndex + 1, pageCount).map((page, idx) =>
-                page === 'ellipsis' ? (
-                  <PaginationItem key={`ellipsis-${idx}`}>
-                    <PaginationEllipsis />
-                  </PaginationItem>
-                ) : (
-                  <PaginationItem key={page}>
-                    <PaginationLink
-                      isActive={page === pageIndex + 1}
-                      onClick={() => table.setPageIndex(page - 1)}
-                    >
-                      {page}
-                    </PaginationLink>
-                  </PaginationItem>
-                ),
-              )}
-              <PaginationItem>
-                <PaginationNext
-                  text="Вперёд"
-                  onClick={() => table.nextPage()}
-                  aria-disabled={!table.getCanNextPage()}
-                  className={!table.getCanNextPage() ? 'pointer-events-none opacity-50' : undefined}
-                />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/data-table-toolbar.tsx b/apps/web/src/components/data-table-toolbar.tsx
deleted file mode 100644
index 918ed51..0000000
--- a/apps/web/src/components/data-table-toolbar.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import type { ReactNode } from 'react'
-import type { Table } from '@tanstack/react-table'
-import { ColumnsIcon, SearchIcon } from 'lucide-react'
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from '@cfdm/ui/components/input-group'
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from '@cfdm/ui/components/dropdown-menu'
-import { AppButton } from '@/components/app-button'
-import {
-  densityLabel,
-  type Density,
-} from '@/components/data-table-density'
-
-interface DataTableToolbarProps<TData> {
-  table: Table<TData>
-  searchPlaceholder?: string
-  searchValue?: string
-  onSearchChange?: (value: string) => void
-  filters?: ReactNode
-  density: Density
-  onDensityChange: (density: Density) => void
-}
-
-export function DataTableToolbar<TData>({
-  table,
-  searchPlaceholder = 'Поиск…',
-  searchValue,
-  onSearchChange,
-  filters,
-  density,
-  onDensityChange,
-}: DataTableToolbarProps<TData>) {
-  const columns = table
-    .getAllColumns()
-    .filter((col) => typeof col.getCanHide === 'function' && col.getCanHide())
-
-  return (
-    <div className="flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-center">
-        {onSearchChange && (
-          <InputGroup className="max-w-sm">
-            <InputGroupAddon>
-              <SearchIcon />
-            </InputGroupAddon>
-            <InputGroupInput
-              placeholder={searchPlaceholder}
-              value={searchValue ?? ''}
-              onChange={(event) => onSearchChange(event.target.value)}
-            />
-          </InputGroup>
-        )}
-        {filters}
-      </div>
-      <div className="flex items-center gap-2">
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={<AppButton variant="outline" size="sm" />}
-          >
-            <ColumnsIcon data-icon="inline-start" />
-            Колонки
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-44">
-            <DropdownMenuLabel>Видимость</DropdownMenuLabel>
-            {columns.map((column) => (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                checked={column.getIsVisible()}
-                onCheckedChange={(value) => column.toggleVisibility(!!value)}
-              >
-                {typeof column.columnDef.header === 'string'
-                  ? column.columnDef.header
-                  : column.id}
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={<AppButton variant="outline" size="sm" />}
-          >
-            Плотность
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-44">
-            <DropdownMenuLabel>Плотность строк</DropdownMenuLabel>
-            <DropdownMenuRadioGroup
-              value={density}
-              onValueChange={(val) => onDensityChange(val as Density)}
-            >
-              {(Object.keys(densityLabel) as Density[]).map((d) => (
-                <DropdownMenuRadioItem key={d} value={d}>
-                  {densityLabel[d]}
-                </DropdownMenuRadioItem>
-              ))}
-            </DropdownMenuRadioGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/data-table-view.tsx b/apps/web/src/components/data-table-view.tsx
deleted file mode 100644
index 02d2081..0000000
--- a/apps/web/src/components/data-table-view.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import type { ReactNode } from 'react'
-import { flexRender } from '@tanstack/react-table'
-import type { Table as TableType } from '@tanstack/react-table'
-import {
-  Empty,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle,
-} from '@cfdm/ui/components/empty'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@cfdm/ui/components/table'
-import { cn } from '@cfdm/ui/lib/utils'
-import { DataTablePagination } from '@/components/data-table-pagination'
-import { DataTableToolbar } from '@/components/data-table-toolbar'
-import { densityRowClass, type Density } from '@/components/data-table-density'
-
-interface DataTableViewProps<TData> {
-  table: TableType<TData>
-  density: Density
-  onDensityChange: (density: Density) => void
-  searchPlaceholder?: string
-  searchValue?: string
-  onSearchChange?: (value: string) => void
-  filters?: ReactNode
-  emptyTitle?: string
-  emptyDescription?: string
-  selectedCount?: number
-  className?: string
-}
-
-export function DataTableView<TData>({
-  table,
-  density,
-  onDensityChange,
-  searchPlaceholder,
-  searchValue,
-  onSearchChange,
-  filters,
-  emptyTitle = 'Ничего не найдено',
-  emptyDescription = 'Измените фильтры или поисковый запрос',
-  selectedCount,
-  className,
-}: DataTableViewProps<TData>) {
-  const columns = table.getAllColumns()
-  const showToolbar = onSearchChange || filters || columns.some((c) => c.getCanHide?.())
-
-  return (
-    <div className={cn('flex flex-col', className)}>
-      {showToolbar && (
-        <DataTableToolbar
-          table={table}
-          density={density}
-          onDensityChange={onDensityChange}
-          searchPlaceholder={searchPlaceholder}
-          searchValue={searchValue}
-          onSearchChange={onSearchChange}
-          filters={filters}
-        />
-      )}
-      <div className="overflow-hidden">
-        <div className="relative overflow-auto">
-          <Table className={densityRowClass[density]}>
-            <TableHeader className="sticky top-0 z-10 bg-card">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <TableHead
-                      key={header.id}
-                      className={header.column.id === 'actions' ? 'w-12 text-right' : undefined}
-                    >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows.length > 0 ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && 'selected'}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell
-                        key={cell.id}
-                        className={cell.column.id === 'actions' ? 'text-right' : undefined}
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell colSpan={columns.length} className="h-48 p-0">
-                    <Empty className="border-0">
-                      <EmptyHeader>
-                        <EmptyTitle>{emptyTitle}</EmptyTitle>
-                        <EmptyDescription>{emptyDescription}</EmptyDescription>
-                      </EmptyHeader>
-                    </Empty>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-      <DataTablePagination table={table} selectedCount={selectedCount} />
-    </div>
-  )
-}
diff --git a/apps/web/src/components/dns-records-data-grid.tsx b/apps/web/src/components/dns-records-data-grid.tsx
new file mode 100644
index 0000000..808ab37
--- /dev/null
+++ b/apps/web/src/components/dns-records-data-grid.tsx
@@ -0,0 +1,188 @@
+import { useMemo, useState } from 'react'
+import { cn } from '@cfdm/ui/lib/utils'
+import { Button } from '@cfdm/ui/components/button'
+import { Badge } from '@cfdm/ui/components/badge'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@cfdm/ui/components/tooltip'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import {
+  DataGridCard,
+  columnDefFromDataGrid,
+} from '@/components/data-grid-card'
+import type { DataGridColumn } from '@/components/data-grid-types'
+import { ListFiltersBar } from '@/components/list-filters-bar'
+import { StatusBadge } from '@/components/status-badge'
+import type { DnsRecord, IpHealthStatus } from '@/lib/schemas'
+import { formatDate } from '@/lib/format'
+
+interface DnsRecordsDataGridProps {
+  records: DnsRecord[]
+  onDelete: (recordId: number) => void
+  isDeleting?: boolean
+  healthByIp?: Record<string, IpHealthStatus>
+  search?: string
+  onSearchChange?: (value: string) => void
+  hideSearch?: boolean
+}
+
+const healthDotClass: Record<IpHealthStatus['status'], string> = {
+  up: 'bg-success',
+  degraded: 'bg-warning',
+  down: 'bg-destructive',
+  unknown: 'bg-muted-foreground/40',
+}
+
+const healthLabel: Record<IpHealthStatus['status'], string> = {
+  up: 'OK',
+  degraded: 'Деград.',
+  down: 'Down',
+  unknown: '—',
+}
+
+function IpHealthDot({ health }: { health: IpHealthStatus }) {
+  const tooltipParts: string[] = [`Статус: ${healthLabel[health.status]}`]
+  if (health.latency_ms != null) tooltipParts.push(`Задержка: ${health.latency_ms} мс`)
+  if (health.last_checked_at) tooltipParts.push(`Проверка: ${formatDate(health.last_checked_at)}`)
+  if (health.last_error) tooltipParts.push(`Ошибка: ${health.last_error}`)
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              className={cn(
+                'inline-flex size-2 shrink-0 cursor-default rounded-full',
+                healthDotClass[health.status],
+              )}
+              aria-label={`Health: ${healthLabel[health.status]}`}
+            />
+          }
+        />
+        <TooltipContent className="whitespace-pre-line">{tooltipParts.join('\n')}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+export function DnsRecordsDataGrid({
+  records,
+  onDelete,
+  isDeleting = false,
+  healthByIp,
+  search: controlledSearch,
+  onSearchChange,
+  hideSearch = false,
+}: DnsRecordsDataGridProps) {
+  const [internalSearch, setInternalSearch] = useState('')
+  const search = controlledSearch ?? internalSearch
+  const setSearch = onSearchChange ?? setInternalSearch
+
+  const filteredRecords = useMemo(() => {
+    const query = search.trim().toLowerCase()
+    if (!query) return records
+    return records.filter(
+      (r) =>
+        r.name.toLowerCase().includes(query) ||
+        r.content.toLowerCase().includes(query) ||
+        r.record_type.toLowerCase().includes(query),
+    )
+  }, [records, search])
+
+  const columns = useMemo<DataGridColumn<DnsRecord>[]>(
+    () => [
+      {
+        key: 'record_type',
+        header: 'Тип',
+        sortable: true,
+        sortValue: (row) => row.record_type,
+        cell: (row) => <Badge variant="outline">{row.record_type}</Badge>,
+      },
+      {
+        key: 'name',
+        header: 'Имя',
+        sortable: true,
+        sortValue: (row) => row.name,
+        cell: (row) => <span className="font-medium">{row.name}</span>,
+      },
+      {
+        key: 'content',
+        header: 'Значение',
+        sortable: true,
+        sortValue: (row) => row.content,
+        cell: (row) => {
+          const health = healthByIp?.[row.content]
+          return (
+            <div className="flex min-w-0 items-center gap-2">
+              {health ? <IpHealthDot health={health} /> : null}
+              <span className="truncate font-mono text-sm">{row.content}</span>
+            </div>
+          )
+        },
+      },
+      {
+        key: 'ttl',
+        header: 'TTL',
+        sortable: true,
+        sortValue: (row) => row.ttl,
+        className: 'tabular-nums',
+        cell: (row) => row.ttl,
+      },
+      {
+        key: 'sync_status',
+        header: 'Синхронизация',
+        cell: (row) => <StatusBadge status={row.sync_status} />,
+      },
+      {
+        key: 'actions',
+        header: '',
+        enableHiding: false,
+        className: 'text-right',
+        cell: (row) => (
+          <ConfirmDialog
+            trigger={
+              <Button variant="destructive" size="sm" disabled={isDeleting}>
+                Удалить
+              </Button>
+            }
+            title="Удалить DNS-запись?"
+            description={`Запись ${row.name} (${row.record_type}) будет удалена из зоны.`}
+            onConfirm={() => onDelete(row.id)}
+          />
+        ),
+      },
+    ],
+    [healthByIp, isDeleting, onDelete],
+  )
+
+  return (
+    <DataGridCard
+      title="DNS-записи"
+      description="Записи в зоне"
+      columns={columnDefFromDataGrid(columns)}
+      data={filteredRecords}
+      rowId={(row) => String(row.id)}
+      emptyTitle="DNS-записи не найдены"
+      emptyDescription="Создайте запись или измените фильтры"
+      pinLastColumn
+      actions={
+        hideSearch ? undefined : (
+          <ListFiltersBar
+            search={{
+              value: search,
+              onChange: setSearch,
+              placeholder: 'Поиск по имени или значению…',
+            }}
+            shown={filteredRecords.length}
+            total={records.length}
+            showReset={Boolean(search.trim())}
+            onReset={() => setSearch('')}
+          />
+        )
+      }
+    />
+  )
+}
diff --git a/apps/web/src/components/dns-records-table.tsx b/apps/web/src/components/dns-records-table.tsx
deleted file mode 100644
index 437588c..0000000
--- a/apps/web/src/components/dns-records-table.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import { StatusBadge } from '@/components/status-badge'
-import { ConfirmDialog } from '@/components/confirm-dialog'
-import { TableCard } from '@/components/table-card'
-import { groupDnsRecords, type DnsRecordGroup } from '@/lib/dns-grouping'
-import type { DnsRecord, IpHealthStatus } from '@/lib/schemas'
-import { formatDate } from '@/lib/format'
-import { AppBadge } from '@/components/app-badge'
-import { AppButton } from '@/components/app-button'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@cfdm/ui/components/tooltip'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@cfdm/ui/components/table'
-import { cn } from '@cfdm/ui/lib/utils'
-
-interface DnsRecordsTableProps {
-  records: DnsRecord[]
-  onDelete: (recordId: number) => void
-  isDeleting?: boolean
-  healthByIp?: Record<string, IpHealthStatus>
-}
-
-const healthDotClass: Record<IpHealthStatus['status'], string> = {
-  up: 'bg-emerald-500',
-  degraded: 'bg-amber-500',
-  down: 'bg-rose-500',
-  unknown: 'bg-muted-foreground/40',
-}
-
-const healthLabel: Record<IpHealthStatus['status'], string> = {
-  up: 'OK',
-  degraded: 'Деград.',
-  down: 'Down',
-  unknown: '—',
-}
-
-function IpHealthDot({ health }: { health: IpHealthStatus }) {
-  const tooltipParts: string[] = [`Статус: ${healthLabel[health.status]}`]
-  if (health.latency_ms != null) tooltipParts.push(`Задержка: ${health.latency_ms} мс`)
-  if (health.last_checked_at) tooltipParts.push(`Проверка: ${formatDate(health.last_checked_at)}`)
-  if (health.last_error) tooltipParts.push(`Ошибка: ${health.last_error}`)
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <span
-              className={cn(
-                'inline-flex size-2 shrink-0 cursor-default rounded-full',
-                healthDotClass[health.status],
-              )}
-              aria-label={`Health: ${healthLabel[health.status]}`}
-            />
-          }
-        />
-        <TooltipContent className="whitespace-pre-line">{tooltipParts.join('\n')}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}
-
-function DnsRecordCells({
-  record,
-  onDelete,
-  isDeleting,
-  healthByIp,
-}: {
-  record: DnsRecord
-  onDelete: (recordId: number) => void
-  isDeleting?: boolean
-  healthByIp?: Record<string, IpHealthStatus>
-}) {
-  const health = healthByIp?.[record.content]
-  return (
-    <>
-      <TableCell className="max-w-xs truncate font-mono text-sm">
-        <div className="flex items-center gap-2">
-          {health ? <IpHealthDot health={health} /> : null}
-          <span className="truncate">{record.content}</span>
-        </div>
-      </TableCell>
-      <TableCell className="tabular-nums">{record.ttl}</TableCell>
-      <TableCell>
-        <StatusBadge status={record.sync_status} />
-      </TableCell>
-      <TableCell>
-        <ConfirmDialog
-          trigger={
-            <AppButton variant="destructive" size="sm" disabled={isDeleting}>
-              Удалить
-            </AppButton>
-          }
-          title="Удалить DNS-запись?"
-          description={`Запись ${record.name} (${record.record_type}) будет удалена из зоны.`}
-          onConfirm={() => onDelete(record.id)}
-        />
-      </TableCell>
-    </>
-  )
-}
-
-function SingleRecordRow({
-  record,
-  onDelete,
-  isDeleting,
-  isFirstGroup,
-  healthByIp,
-}: {
-  record: DnsRecord
-  onDelete: (recordId: number) => void
-  isDeleting?: boolean
-  isFirstGroup: boolean
-  healthByIp?: Record<string, IpHealthStatus>
-}) {
-  return (
-    <TableRow className={cn(!isFirstGroup && 'border-t-4 border-muted')}>
-      <TableCell>{record.record_type}</TableCell>
-      <TableCell className="font-medium">{record.name}</TableCell>
-      <DnsRecordCells
-        record={record}
-        onDelete={onDelete}
-        isDeleting={isDeleting}
-        healthByIp={healthByIp}
-      />
-    </TableRow>
-  )
-}
-
-function MultiValueGroupRows({
-  group,
-  onDelete,
-  isDeleting,
-  isFirstGroup,
-  healthByIp,
-}: {
-  group: DnsRecordGroup
-  onDelete: (recordId: number) => void
-  isDeleting?: boolean
-  isFirstGroup: boolean
-  healthByIp?: Record<string, IpHealthStatus>
-}) {
-  const [first, ...rest] = group.records
-
-  return (
-    <>
-      <TableRow
-        className={cn(
-          'bg-muted/25',
-          !isFirstGroup && 'border-t-4 border-muted',
-        )}
-      >
-        <TableCell rowSpan={group.records.length} className="align-top">
-          <AppBadge variant="outline">{group.recordType}</AppBadge>
-        </TableCell>
-        <TableCell rowSpan={group.records.length} className="align-top font-medium">
-          <div className="flex flex-col gap-1">
-            <span>{group.name}</span>
-            <AppBadge variant="secondary" className="w-fit">
-              {group.records.length} адресов
-            </AppBadge>
-          </div>
-        </TableCell>
-        <DnsRecordCells
-          record={first}
-          onDelete={onDelete}
-          isDeleting={isDeleting}
-          healthByIp={healthByIp}
-        />
-      </TableRow>
-      {rest.map((record) => (
-        <TableRow key={record.id} className="bg-muted/25">
-          <DnsRecordCells
-            record={record}
-            onDelete={onDelete}
-            isDeleting={isDeleting}
-            healthByIp={healthByIp}
-          />
-        </TableRow>
-      ))}
-    </>
-  )
-}
-
-export function DnsRecordsTable({
-  records,
-  onDelete,
-  isDeleting,
-  healthByIp,
-}: DnsRecordsTableProps) {
-  const groups = groupDnsRecords(records)
-
-  return (
-    <TableCard>
-      <div className="relative overflow-auto max-h-[60vh]">
-        <Table className="text-sm [&_tr]:h-10 [&_tr_td]:py-2 [&_tr_th]:py-2">
-          <TableHeader className="sticky top-0 z-10 bg-card">
-            <TableRow>
-              <TableHead className="w-20">Тип</TableHead>
-              <TableHead>Имя</TableHead>
-              <TableHead>Значение</TableHead>
-              <TableHead className="w-16">TTL</TableHead>
-              <TableHead>Синхронизация</TableHead>
-              <TableHead className="w-28" />
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {groups.map((group, index) =>
-              group.isMultiValue ? (
-                <MultiValueGroupRows
-                  key={group.key}
-                  group={group}
-                  onDelete={onDelete}
-                  isDeleting={isDeleting}
-                  isFirstGroup={index === 0}
-                  healthByIp={healthByIp}
-                />
-              ) : (
-                <SingleRecordRow
-                  key={group.records[0].id}
-                  record={group.records[0]}
-                  onDelete={onDelete}
-                  isDeleting={isDeleting}
-                  isFirstGroup={index === 0}
-                  healthByIp={healthByIp}
-                />
-              ),
-            )}
-          </TableBody>
-        </Table>
-      </div>
-    </TableCard>
-  )
-}
diff --git a/apps/web/src/components/domains-data-table.tsx b/apps/web/src/components/domains-data-grid.tsx
similarity index 53%
rename from apps/web/src/components/domains-data-table.tsx
rename to apps/web/src/components/domains-data-grid.tsx
index 8f0cd8e..1a6b407 100644
--- a/apps/web/src/components/domains-data-table.tsx
+++ b/apps/web/src/components/domains-data-grid.tsx
@@ -1,22 +1,9 @@
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { Link } from '@tanstack/react-router'
-import {
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
-  type SortingState,
-} from '@tanstack/react-table'
-import { ArrowUpDownIcon, MoreHorizontalIcon } from 'lucide-react'
-import { ConfirmDialog } from '@/components/confirm-dialog'
-import { StatusBadge } from '@/components/status-badge'
-import type { DomainListItem } from '@/lib/schemas'
-import { AppBadge } from '@/components/app-badge'
-import { AppButton } from '@/components/app-button'
-import { DataTableView } from '@/components/data-table-view'
-import type { Density } from '@/components/data-table-density'
+import { GlobeIcon, MoreHorizontalIcon } from 'lucide-react'
+
+import { Badge } from '@cfdm/ui/components/badge'
+import { Button } from '@cfdm/ui/components/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -30,6 +17,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@cfdm/ui/components/select'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import {
+  DataGridCard,
+  columnDefFromDataGrid,
+} from '@/components/data-grid-card'
+import type { DataGridColumn } from '@/components/data-grid-types'
+import { DomainsFiltersToolbar } from '@/components/domains-filters-toolbar'
+import { StatusBadge } from '@/components/status-badge'
+import type { DomainListItem } from '@/lib/schemas'
+import { useState } from 'react'
 
 export type DomainTableRow = DomainListItem
 
@@ -38,123 +35,130 @@ interface GroupFilterItem {
   value: string
 }
 
-interface DomainsDataTableProps {
+export interface DomainsDataGridProps {
   data: DomainTableRow[]
+  totalCount: number
   groupFilterItems: GroupFilterItem[]
   groupFilterValue: string
   onGroupFilterChange: (value: string | null) => void
+  search: string
+  onSearchChange: (value: string) => void
   onDelete: (domain: DomainTableRow) => void
   isDeleting?: boolean
+  emptyAction?: React.ReactNode
 }
 
-export function DomainsDataTable({
+export function DomainsDataGrid({
   data,
+  totalCount,
   groupFilterItems,
   groupFilterValue,
   onGroupFilterChange,
+  search,
+  onSearchChange,
   onDelete,
   isDeleting = false,
-}: DomainsDataTableProps) {
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [globalFilter, setGlobalFilter] = useState('')
-  const [density, setDensity] = useState<Density>('comfortable')
+  emptyAction,
+}: DomainsDataGridProps) {
   const [deleteTarget, setDeleteTarget] = useState<DomainTableRow | null>(null)
 
-  const columns = useMemo<ColumnDef<DomainTableRow>[]>(
+  const filteredData = useMemo(() => {
+    const query = search.trim().toLowerCase()
+    if (!query) return data
+    return data.filter(
+      (d) =>
+        d.zone_name.toLowerCase().includes(query) ||
+        (d.group_name ?? '').toLowerCase().includes(query),
+    )
+  }, [data, search])
+
+  const columns = useMemo<DataGridColumn<DomainTableRow>[]>(
     () => [
       {
-        accessorKey: 'zone_name',
-        header: ({ column }) => (
-          <AppButton
-            variant="ghost"
-            className="-ml-3 h-8"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          >
-            Зона
-            <ArrowUpDownIcon />
-          </AppButton>
-        ),
-        cell: ({ row }) => (
-          <AppButton
+        key: 'zone_name',
+        header: 'Зона',
+        icon: GlobeIcon,
+        sortable: true,
+        sortValue: (row) => row.zone_name,
+        cell: (row) => (
+          <Button
             variant="link"
             className="h-auto p-0 font-medium"
             nativeButton={false}
             render={
-              <Link
-                to="/domains/$domainId"
-                params={{ domainId: String(row.original.id) }}
-              />
+              <Link to="/domains/$domainId" params={{ domainId: String(row.id) }} />
             }
           >
-            {row.original.zone_name}
-          </AppButton>
+            {row.zone_name}
+          </Button>
         ),
       },
       {
-        id: 'group',
-        accessorFn: (row) => row.group_name ?? 'Без группы',
+        key: 'group',
         header: 'Группа',
-        cell: ({ row }) => {
-          const domain = row.original
-          if (domain.group_id && domain.group_name) {
+        sortable: true,
+        sortValue: (row) => row.group_name ?? 'Без группы',
+        cell: (row) => {
+          if (row.group_id && row.group_name) {
             return (
-              <AppButton
+              <Button
                 variant="link"
                 className="h-auto p-0"
                 nativeButton={false}
                 render={
                   <Link
                     to="/groups/$groupId"
-                    params={{ groupId: String(domain.group_id) }}
+                    params={{ groupId: String(row.group_id) }}
                   />
                 }
               >
-                {domain.group_name}
-              </AppButton>
+                {row.group_name}
+              </Button>
             )
           }
-          return <AppBadge variant="outline">Без группы</AppBadge>
+          return <Badge variant="outline">Без группы</Badge>
         },
       },
       {
-        accessorKey: 'service_count',
+        key: 'service_count',
         header: 'Сервисы',
-        cell: ({ row }) => (
-          <AppButton
+        sortable: true,
+        sortValue: (row) => row.service_count,
+        className: 'tabular-nums',
+        cell: (row) => (
+          <Button
             variant="link"
             className="h-auto p-0 tabular-nums"
             nativeButton={false}
-            render={<Link to="/services" search={{ domainId: row.original.id }} />}
+            render={<Link to="/services" search={{ domainId: row.id }} />}
           >
-            {row.original.service_count}
-          </AppButton>
+            {row.service_count}
+          </Button>
         ),
       },
       {
-        accessorKey: 'status',
+        key: 'status',
         header: 'Статус',
-        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+        cell: (row) => <StatusBadge status={row.status} />,
       },
       {
-        accessorKey: 'last_synced_at',
+        key: 'last_synced_at',
         header: 'Синхронизация',
-        cell: ({ row }) => (
-          <span className="text-muted-foreground tabular-nums">
-            {row.original.last_synced_at ?? '—'}
-          </span>
-        ),
+        sortable: true,
+        sortValue: (row) => row.last_synced_at ?? '',
+        className: 'text-muted-foreground tabular-nums',
+        cell: (row) => row.last_synced_at ?? '—',
       },
       {
-        id: 'actions',
+        key: 'actions',
+        header: '',
         enableHiding: false,
-        header: () => <span className="sr-only">Действия</span>,
-        cell: ({ row }) => (
+        className: 'text-right',
+        cell: (row) => (
           <div className="text-right">
             <DropdownMenu>
               <DropdownMenuTrigger
-                render={
-                  <AppButton variant="outline" size="icon" className="size-8" />
-                }
+                render={<Button variant="outline" size="icon" className="size-8" />}
               >
                 <MoreHorizontalIcon />
                 <span className="sr-only">Действия</span>
@@ -162,10 +166,7 @@ export function DomainsDataTable({
               <DropdownMenuContent align="end">
                 <DropdownMenuItem
                   render={
-                    <Link
-                      to="/domains/$domainId"
-                      params={{ domainId: String(row.original.id) }}
-                    />
+                    <Link to="/domains/$domainId" params={{ domainId: String(row.id) }} />
                   }
                 >
                   Обзор
@@ -174,7 +175,7 @@ export function DomainsDataTable({
                   render={
                     <Link
                       to="/domains/$domainId/dns"
-                      params={{ domainId: String(row.original.id) }}
+                      params={{ domainId: String(row.id) }}
                       search={{ host: undefined }}
                     />
                   }
@@ -184,7 +185,7 @@ export function DomainsDataTable({
                 <DropdownMenuItem
                   variant="destructive"
                   disabled={isDeleting}
-                  onClick={() => setDeleteTarget(row.original)}
+                  onClick={() => setDeleteTarget(row)}
                 >
                   Удалить
                 </DropdownMenuItem>
@@ -197,28 +198,9 @@ export function DomainsDataTable({
     [isDeleting],
   )
 
-  const table = useReactTable({
-    data,
-    columns,
-    state: { sorting, globalFilter },
-    onSortingChange: setSorting,
-    onGlobalFilterChange: setGlobalFilter,
-    globalFilterFn: (row, _columnId, filterValue: string) => {
-      const value = filterValue.toLowerCase()
-      const zone = row.original.zone_name.toLowerCase()
-      const group = (row.original.group_name ?? '').toLowerCase()
-      return zone.includes(value) || group.includes(value)
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    initialState: { pagination: { pageSize: 10 } },
-  })
-
-  const filterSelect = (
+  const groupSelect = (
     <Select
-      items={groupFilterItems}
+      items={[{ label: 'Все группы', value: 'all' }, ...groupFilterItems]}
       value={groupFilterValue || 'all'}
       onValueChange={(value) => {
         if (!value || value === 'all') {
@@ -242,18 +224,34 @@ export function DomainsDataTable({
     </Select>
   )
 
+  const hasActiveFilters = Boolean(groupFilterValue) || Boolean(search.trim())
+
   return (
     <>
-      <DataTableView
-        table={table}
-        density={density}
-        onDensityChange={setDensity}
-        searchPlaceholder="Поиск по зоне или группе…"
-        searchValue={globalFilter}
-        onSearchChange={setGlobalFilter}
-        filters={filterSelect}
+      <DataGridCard
+        title="Список доменов"
+        description="Импортированные зоны Cloudflare"
+        columns={columnDefFromDataGrid(columns)}
+        data={filteredData}
+        rowId={(row) => String(row.id)}
         emptyTitle="Домены не найдены"
         emptyDescription="Импортируйте зону из Cloudflare или измените фильтры"
+        emptyAction={emptyAction}
+        pinLastColumn
+        actions={
+          <DomainsFiltersToolbar
+            search={search}
+            onSearchChange={onSearchChange}
+            groupSelect={groupSelect}
+            shownCount={filteredData.length}
+            totalCount={totalCount}
+            hasActiveFilters={hasActiveFilters}
+            onReset={() => {
+              onSearchChange('')
+              onGroupFilterChange(null)
+            }}
+          />
+        }
       />
       <ConfirmDialog
         open={deleteTarget !== null}
diff --git a/apps/web/src/components/domains-filters-toolbar.tsx b/apps/web/src/components/domains-filters-toolbar.tsx
new file mode 100644
index 0000000..8925ebd
--- /dev/null
+++ b/apps/web/src/components/domains-filters-toolbar.tsx
@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react'
+
+import { ListFiltersBar } from '@/components/list-filters-bar'
+import {
+  Filters,
+  createFilter,
+  type Filter,
+  type FilterFieldConfig,
+} from '@/components/reui/filters'
+
+const STATUS_FIELD: FilterFieldConfig = {
+  key: 'status',
+  label: 'Статус',
+  type: 'multiselect',
+  options: [
+    { value: 'active', label: 'Активен' },
+    { value: 'synced', label: 'Синхронизировано' },
+    { value: 'pending_push', label: 'Ожидает отправки' },
+    { value: 'error', label: 'Ошибка' },
+  ],
+}
+
+interface DomainsFiltersToolbarProps {
+  search: string
+  onSearchChange: (value: string) => void
+  groupSelect: ReactNode
+  statusFilters?: Filter[]
+  onStatusFiltersChange?: (filters: Filter[]) => void
+  shownCount: number
+  totalCount: number
+  hasActiveFilters: boolean
+  onReset: () => void
+}
+
+export function DomainsFiltersToolbar({
+  search,
+  onSearchChange,
+  groupSelect,
+  statusFilters = [],
+  onStatusFiltersChange,
+  shownCount,
+  totalCount,
+  hasActiveFilters,
+  onReset,
+}: DomainsFiltersToolbarProps) {
+  return (
+    <ListFiltersBar
+      search={{
+        value: search,
+        onChange: onSearchChange,
+        placeholder: 'Поиск по зоне или группе…',
+      }}
+      controls={
+        <>
+          {groupSelect}
+          {onStatusFiltersChange ? (
+            <Filters
+              filters={statusFilters}
+              fields={[STATUS_FIELD]}
+              onChange={onStatusFiltersChange}
+            />
+          ) : null}
+        </>
+      }
+      shown={shownCount}
+      total={totalCount}
+      showReset={hasActiveFilters}
+      onReset={onReset}
+    />
+  )
+}
+
+export function createStatusFilter(value: string): Filter {
+  return createFilter('status', 'is', [value])
+}
+
+export function applyStatusFilters<T extends { status: string }>(
+  rows: T[],
+  filters: Filter[],
+): T[] {
+  const statusFilter = filters.find((f) => f.field === 'status')
+  if (!statusFilter?.values?.length) return rows
+  const allowed = new Set(statusFilter.values.map(String))
+  return rows.filter((row) => allowed.has(row.status))
+}
diff --git a/apps/web/src/components/kpi-card.tsx b/apps/web/src/components/kpi-card.tsx
deleted file mode 100644
index 9929fe9..0000000
--- a/apps/web/src/components/kpi-card.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react'
-import type { LucideIcon } from 'lucide-react'
-import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from 'lucide-react'
-import { AppButton } from '@/components/app-button'
-import {
-  AppCard,
-  AppCardAction,
-  AppCardDescription,
-  AppCardFooter,
-  AppCardHeader,
-  AppCardTitle,
-} from '@/components/app-card'
-
-type TrendDirection = 'up' | 'down' | 'flat'
-
-export interface KpiTrend {
-  value: string
-  direction: TrendDirection
-  hint?: string
-}
-
-interface KpiCardProps {
-  label: string
-  value: number | string
-  icon: LucideIcon
-  trend?: KpiTrend
-  actionLabel?: string
-  actionRender?: ComponentProps<typeof AppButton>['render']
-  onAction?: () => void
-  footer?: ReactNode
-}
-
-const trendIcon: Record<TrendDirection, LucideIcon> = {
-  up: TrendingUpIcon,
-  down: TrendingDownIcon,
-  flat: MinusIcon,
-}
-
-const trendTone: Record<TrendDirection, string> = {
-  up: 'text-success',
-  down: 'text-destructive',
-  flat: 'text-muted-foreground',
-}
-
-export function KpiCard({
-  label,
-  value,
-  icon: Icon,
-  trend,
-  actionLabel,
-  actionRender,
-  onAction,
-  footer,
-}: KpiCardProps) {
-  const TrendIcon = trend ? trendIcon[trend.direction] : null
-  return (
-    <AppCard className="gap-0">
-      <AppCardHeader>
-        <AppCardDescription>{label}</AppCardDescription>
-        <AppCardTitle className="text-3xl font-semibold tabular-nums">
-          {value}
-        </AppCardTitle>
-        <AppCardAction>
-          <Icon className="size-4 text-muted-foreground" />
-        </AppCardAction>
-      </AppCardHeader>
-      <AppCardFooter className="flex items-center justify-between gap-2 text-sm">
-        {footer ??
-          (trend ? (
-            <span className="flex items-center gap-1 text-muted-foreground">
-              {TrendIcon && (
-                <TrendIcon
-                  className={`size-3.5 ${trendTone[trend.direction]}`}
-                  aria-hidden
-                />
-              )}
-              <span className="tabular-nums">{trend.value}</span>
-              {trend.hint && (
-                <span className="text-muted-foreground/70">· {trend.hint}</span>
-              )}
-            </span>
-          ) : (
-            <span className="text-muted-foreground">—</span>
-          ))}
-        {actionLabel && (actionRender || onAction) && (
-          <AppButton
-            variant="link"
-            className="h-auto p-0"
-            nativeButton={actionRender ? false : undefined}
-            render={actionRender}
-            onClick={onAction}
-          >
-            {actionLabel}
-          </AppButton>
-        )}
-      </AppCardFooter>
-    </AppCard>
-  )
-}
diff --git a/apps/web/src/components/layout/app-shell.tsx b/apps/web/src/components/layout/app-shell.tsx
index 6355c41..64c91b0 100644
--- a/apps/web/src/components/layout/app-shell.tsx
+++ b/apps/web/src/components/layout/app-shell.tsx
@@ -5,18 +5,11 @@ import { SidebarInset, SidebarProvider } from '@cfdm/ui/components/sidebar'
 
 export function AppShell({ children }: { children: ReactNode }) {
   return (
-    <SidebarProvider
-      style={
-        {
-          '--sidebar-width': 'calc(var(--spacing) * 72)',
-          '--header-height': 'calc(var(--spacing) * 12)',
-        } as React.CSSProperties
-      }
-    >
+    <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
         <SiteHeader />
-        <div className="flex flex-1 flex-col">{children}</div>
+        <main className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">{children}</main>
       </SidebarInset>
     </SidebarProvider>
   )
diff --git a/apps/web/src/components/layout/site-header.tsx b/apps/web/src/components/layout/site-header.tsx
index 29f84a3..977bc86 100644
--- a/apps/web/src/components/layout/site-header.tsx
+++ b/apps/web/src/components/layout/site-header.tsx
@@ -8,7 +8,8 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@cfdm/ui/components/breadcrumb'
-import { AppSeparator } from '@/components/app-separator'
+import { ModeToggle } from '@/components/mode-toggle'
+import { Separator } from '@cfdm/ui/components/separator'
 import { SidebarTrigger } from '@cfdm/ui/components/sidebar'
 
 export interface RouteBreadcrumbLoaderData {
@@ -83,14 +84,10 @@ export function SiteHeader() {
   const crumbs = getBreadcrumbs(pathname, dynamicLabels)
 
   return (
-    <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-      <div className="flex items-center gap-2 px-4">
-        <SidebarTrigger className="-ml-1" />
-        <AppSeparator
-          orientation="vertical"
-          className="mr-2 data-[orientation=vertical]:h-4"
-        />
-        <Breadcrumb>
+    <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <SidebarTrigger className="-ml-1" />
+      <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+      <Breadcrumb>
           <BreadcrumbList>
             {crumbs.map((crumb, index) => {
               const isLast = index === crumbs.length - 1
@@ -115,6 +112,8 @@ export function SiteHeader() {
             })}
           </BreadcrumbList>
         </Breadcrumb>
+      <div className="ml-auto flex items-center gap-2">
+        <ModeToggle />
       </div>
     </header>
   )
diff --git a/apps/web/src/components/list-filters-bar.tsx b/apps/web/src/components/list-filters-bar.tsx
new file mode 100644
index 0000000..e25f177
--- /dev/null
+++ b/apps/web/src/components/list-filters-bar.tsx
@@ -0,0 +1,171 @@
+import type { ReactNode } from 'react'
+import { SearchIcon, XIcon } from 'lucide-react'
+
+import { Input } from '@cfdm/ui/components/input'
+import { Button } from '@cfdm/ui/components/button'
+import { Badge } from '@cfdm/ui/components/badge'
+import { cn } from '@cfdm/ui/lib/utils'
+
+export interface FilterChip {
+  id: string
+  label: string
+  onRemove: () => void
+}
+
+interface ListFiltersSearchProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+  className?: string
+  name?: string
+  autoComplete?: string
+  spellCheck?: boolean
+}
+
+export function ListFiltersSearch({
+  value,
+  onChange,
+  placeholder,
+  className,
+  name,
+  autoComplete = 'off',
+  spellCheck = false,
+}: ListFiltersSearchProps) {
+  return (
+    <div className={cn('relative w-full', className)}>
+      <SearchIcon className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="pl-8"
+        autoComplete={autoComplete}
+        name={name}
+        spellCheck={spellCheck}
+      />
+    </div>
+  )
+}
+
+export function FilterActiveChips({ chips }: { chips: FilterChip[] }) {
+  if (chips.length === 0) return null
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {chips.map((chip) => (
+        <Badge key={chip.id} variant="secondary" className="gap-1 pr-1 font-normal">
+          <span className="max-w-[12rem] truncate">{chip.label}</span>
+          <button
+            type="button"
+            onClick={chip.onRemove}
+            className="rounded-sm p-0.5 hover:bg-muted"
+            aria-label={`Убрать фильтр: ${chip.label}`}
+          >
+            <XIcon className="size-3" />
+          </button>
+        </Badge>
+      ))}
+    </div>
+  )
+}
+
+export function FilterResultsCount({
+  shown,
+  total,
+  suffix,
+}: {
+  shown: number
+  total: number
+  suffix?: ReactNode
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+      <span>
+        Показано {shown} из {total}
+      </span>
+      {suffix ? <span className="text-muted-foreground/80">{suffix}</span> : null}
+    </div>
+  )
+}
+
+export function FilterResetButton({ onClick, visible }: { onClick: () => void; visible: boolean }) {
+  if (!visible) return null
+  return (
+    <Button type="button" variant="outline" size="sm" onClick={onClick}>
+      <XIcon data-icon="inline-start" />
+      Сбросить
+    </Button>
+  )
+}
+
+interface FilterToggleChipProps {
+  label: string
+  active: boolean
+  onClick: () => void
+}
+
+export function FilterToggleChip({ label, active, onClick }: FilterToggleChipProps) {
+  return (
+    <Button
+      type="button"
+      variant={active ? 'secondary' : 'outline'}
+      size="sm"
+      onClick={onClick}
+      className={cn(active && 'border-primary/40')}
+    >
+      {label}
+    </Button>
+  )
+}
+
+interface ListFiltersBarProps {
+  search?: ListFiltersSearchProps
+  controls?: ReactNode
+  chips?: FilterChip[]
+  shown?: number
+  total?: number
+  resultsSuffix?: ReactNode
+  onReset?: () => void
+  showReset?: boolean
+  toggles?: ReactNode
+}
+
+export function ListFiltersBar({
+  search,
+  controls,
+  chips,
+  shown,
+  total,
+  resultsSuffix,
+  onReset,
+  showReset,
+  toggles,
+}: ListFiltersBarProps) {
+  const hasMeta =
+    chips?.length ||
+    (shown != null && total != null) ||
+    resultsSuffix ||
+    (showReset && onReset)
+
+  return (
+    <div className="flex flex-col gap-2">
+      {search ? <ListFiltersSearch {...search} /> : null}
+      {controls || toggles ? (
+        <div className="flex flex-wrap items-center gap-2">
+          {controls}
+          {toggles}
+          {onReset ? <FilterResetButton onClick={onReset} visible={Boolean(showReset)} /> : null}
+        </div>
+      ) : null}
+      {hasMeta ? (
+        <div className="flex flex-col gap-1.5">
+          {chips?.length ? <FilterActiveChips chips={chips} /> : null}
+          {shown != null && total != null ? (
+            <FilterResultsCount shown={shown} total={total} suffix={resultsSuffix} />
+          ) : resultsSuffix ? (
+            <div className="text-xs text-muted-foreground">{resultsSuffix}</div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/apps/web/src/components/mode-toggle.tsx b/apps/web/src/components/mode-toggle.tsx
new file mode 100644
index 0000000..b7059fc
--- /dev/null
+++ b/apps/web/src/components/mode-toggle.tsx
@@ -0,0 +1,29 @@
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '@cfdm/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@cfdm/ui/components/dropdown-menu'
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="ghost" size="icon" />}>
+        <Sun className="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+        <Moon className="absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+        <span className="sr-only">Сменить тему</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>Светлая</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Тёмная</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>Системная</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/web/src/components/page-shell.tsx b/apps/web/src/components/page-shell.tsx
index 97297c6..da746c7 100644
--- a/apps/web/src/components/page-shell.tsx
+++ b/apps/web/src/components/page-shell.tsx
@@ -7,14 +7,5 @@ interface PageShellProps {
 }
 
 export function PageShell({ children, className }: PageShellProps) {
-  return (
-    <div
-      className={cn(
-        '@container/main flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:py-6 lg:px-6',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  )
+  return <div className={cn('flex flex-col gap-4 md:gap-6', className)}>{children}</div>
 }
diff --git a/apps/web/src/components/reui/autocomplete.tsx b/apps/web/src/components/reui/autocomplete.tsx
new file mode 100644
index 0000000..76710af
--- /dev/null
+++ b/apps/web/src/components/reui/autocomplete.tsx
@@ -0,0 +1,343 @@
+"use client"
+
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { ScrollArea } from "@cfdm/ui/components/scroll-area"
+import { XIcon, ChevronsUpDownIcon } from "lucide-react"
+
+const inputVariants = cva(
+  "outline-none flex w-full text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [[readonly]]:bg-muted/80 [[readonly]]:cursor-not-allowed border border-input focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg bg-transparent dark:bg-input/30 text-sm transition-colors focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-3",
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-2 [&~[data-slot=autocomplete-clear]]:end-1.5 [&~[data-slot=autocomplete-trigger]]:end-1.5",
+        default:
+          "h-8 px-2.5 [&~[data-slot=autocomplete-clear]]:end-1.75 [&~[data-slot=autocomplete-trigger]]:end-1.75",
+        lg: "h-9 px-2.5 [&~[data-slot=autocomplete-clear]]:end-2 [&~[data-slot=autocomplete-trigger]]:end-2",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const Autocomplete = AutocompletePrimitive.Root
+
+function AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props) {
+  return (
+    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
+  )
+}
+
+function AutocompleteInput({
+  className,
+  size = "default",
+  showClear = false,
+  showTrigger = false,
+  ...props
+}: Omit<AutocompletePrimitive.Input.Props, "size"> &
+  VariantProps<typeof inputVariants> & {
+    showClear?: boolean
+    showTrigger?: boolean
+  }) {
+  return (
+    <div className="relative w-full">
+      <AutocompletePrimitive.Input
+        data-slot="autocomplete-input"
+        data-size={size}
+        className={cn(inputVariants({ size }), className)}
+        {...props}
+      />
+      {showTrigger && <AutocompleteTrigger />}
+      {showClear && <AutocompleteClear />}
+    </div>
+  )
+}
+
+function AutocompleteStatus({
+  className,
+  ...props
+}: AutocompletePrimitive.Status.Props) {
+  return (
+    <AutocompletePrimitive.Status
+      data-slot="autocomplete-status"
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-sm empty:m-0 empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompletePortal({ ...props }: AutocompletePrimitive.Portal.Props) {
+  return (
+    <AutocompletePrimitive.Portal data-slot="autocomplete-portal" {...props} />
+  )
+}
+
+function AutocompleteBackdrop({
+  ...props
+}: AutocompletePrimitive.Backdrop.Props) {
+  return (
+    <AutocompletePrimitive.Backdrop
+      data-slot="autocomplete-backdrop"
+      {...props}
+    />
+  )
+}
+
+function AutocompletePositioner({
+  className,
+  ...props
+}: AutocompletePrimitive.Positioner.Props) {
+  return (
+    <AutocompletePrimitive.Positioner
+      data-slot="autocomplete-positioner"
+      className={cn("z-50 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteList({
+  className,
+  scrollAreaClassName,
+  ...props
+}: AutocompletePrimitive.List.Props & {
+  scrollAreaClassName?: string
+  scrollFade?: boolean
+  scrollbarGutter?: boolean
+}) {
+  return (
+    <ScrollArea
+      className={cn(
+        "size-full min-h-0 **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain",
+        scrollAreaClassName
+      )}
+    >
+      <AutocompletePrimitive.List
+        data-slot="autocomplete-list"
+        className={cn(
+          "not-empty:px-1 not-empty:py-1 not-empty:scroll-py-1 in-data-has-overflow-y:me-3",
+          className
+        )}
+        {...props}
+      />
+    </ScrollArea>
+  )
+}
+
+function AutocompleteCollection({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Collection>) {
+  return (
+    <AutocompletePrimitive.Collection
+      data-slot="autocomplete-collection"
+      {...props}
+    />
+  )
+}
+
+function AutocompleteRow({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Row>) {
+  return (
+    <AutocompletePrimitive.Row
+      data-slot="autocomplete-row"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {
+  return (
+    <AutocompletePrimitive.Item
+      data-slot="autocomplete-item"
+      className={cn(
+        "text-foreground data-highlighted:text-foreground data-highlighted:before:bg-accent gap-1.5 rounded-md px-1.5 py-1 text-sm data-highlighted:before:rounded-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([role=img]):not([class*=text-])]:opacity-60",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export interface AutocompleteContentProps extends React.ComponentProps<
+  typeof AutocompletePrimitive.Popup
+> {
+  align?: AutocompletePrimitive.Positioner.Props["align"]
+  sideOffset?: AutocompletePrimitive.Positioner.Props["sideOffset"]
+  alignOffset?: AutocompletePrimitive.Positioner.Props["alignOffset"]
+  side?: AutocompletePrimitive.Positioner.Props["side"]
+  anchor?: AutocompletePrimitive.Positioner.Props["anchor"]
+  showBackdrop?: boolean
+}
+
+function AutocompleteContent({
+  className,
+  children,
+  showBackdrop = false,
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  side = "bottom",
+  anchor,
+  ...props
+}: AutocompleteContentProps) {
+  return (
+    <AutocompletePortal>
+      {showBackdrop && <AutocompleteBackdrop />}
+      <AutocompletePositioner
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        side={side}
+        anchor={anchor}
+      >
+        <div className="relative flex max-h-full">
+          <AutocompletePrimitive.Popup
+            data-slot="autocomplete-popup"
+            className={cn(
+              "bg-popover text-popover-foreground rounded-lg shadow-md ring-foreground/10 flex max-h-[min(var(--available-height),24rem)] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) scroll-pt-2 scroll-pb-2 flex-col overscroll-contain py-0.5 ring-1 transition-[scale,opacity] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 has-data-[side=none]:scale-100 has-data-[side=none]:transition-none",
+              className
+            )}
+            {...props}
+          >
+            {children}
+          </AutocompletePrimitive.Popup>
+        </div>
+      </AutocompletePositioner>
+    </AutocompletePortal>
+  )
+}
+
+function AutocompleteGroup({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {
+  return (
+    <AutocompletePrimitive.Group data-slot="autocomplete-group" {...props} />
+  )
+}
+
+function AutocompleteGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {
+  return (
+    <AutocompletePrimitive.GroupLabel
+      data-slot="autocomplete-group-label"
+      className={cn(
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {
+  return (
+    <AutocompletePrimitive.Empty
+      data-slot="autocomplete-empty"
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-sm text-center empty:m-0 empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteClear({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {
+  return (
+    <AutocompletePrimitive.Clear
+      data-slot="autocomplete-clear"
+      className={cn(
+        "ring-offset-background focus:ring-ring absolute top-1/2 -translate-y-1/2 cursor-pointer opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      <XIcon className="size-4" />
+    </AutocompletePrimitive.Clear>
+  )
+}
+
+function AutocompleteTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {
+  return (
+    <AutocompletePrimitive.Trigger
+      data-slot="autocomplete-trigger"
+      className={cn(
+        "focus:ring-ring ring-offset-background absolute top-1/2 -translate-y-1/2 cursor-pointer focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none has-[+[data-slot=autocomplete-clear]]:hidden data-disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      <ChevronsUpDownIcon className="size-4 opacity-70" />
+    </AutocompletePrimitive.Trigger>
+  )
+}
+
+function AutocompleteArrow({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Arrow>) {
+  return (
+    <AutocompletePrimitive.Arrow data-slot="autocomplete-arrow" {...props} />
+  )
+}
+
+function AutocompleteSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Separator>) {
+  return (
+    <AutocompletePrimitive.Separator
+      data-slot="autocomplete-separator"
+      className={cn(
+        "bg-border my-1.5 h-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Autocomplete,
+  AutocompleteValue,
+  AutocompleteTrigger,
+  AutocompleteInput,
+  AutocompleteStatus,
+  AutocompletePortal,
+  AutocompleteBackdrop,
+  AutocompletePositioner,
+  AutocompleteContent,
+  AutocompleteList,
+  AutocompleteCollection,
+  AutocompleteRow,
+  AutocompleteItem,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteClear,
+  AutocompleteArrow,
+  AutocompleteSeparator,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/badge.tsx b/apps/web/src/components/reui/badge.tsx
new file mode 100644
index 0000000..670bcf6
--- /dev/null
+++ b/apps/web/src/components/reui/badge.tsx
@@ -0,0 +1,98 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@cfdm/ui/lib/utils"
+
+const badgeVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center w-fit border border-transparent font-medium whitespace-nowrap outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        outline: "border-border bg-transparent dark:bg-input/32",
+        secondary: "bg-secondary text-secondary-foreground",
+        info: "bg-info text-white",
+        success: "bg-success text-white",
+        warning: "bg-warning text-white",
+        destructive: "bg-destructive text-white",
+        focus: "bg-focus text-focus-foreground",
+        invert: "bg-invert text-invert-foreground",
+        "primary-light":
+          "bg-primary/10 border-none text-primary dark:bg-primary/20",
+        "warning-light":
+          "bg-warning/10 border-none text-warning-foreground dark:bg-warning/20",
+        "success-light":
+          "bg-success/10 border-none text-success-foreground dark:bg-success/20",
+        "info-light":
+          "bg-info/10 border-none text-info-foreground dark:bg-info/20",
+        "destructive-light":
+          "bg-destructive/10 border-none text-destructive-foreground dark:bg-destructive/20",
+        "invert-light":
+          "bg-invert/10 border-none text-foreground dark:bg-invert/20",
+        "focus-light":
+          "bg-focus/10 border-none text-focus-foreground dark:bg-focus/20",
+        "primary-outline":
+          "bg-background border-border text-primary dark:bg-input/30",
+        "warning-outline":
+          "bg-background border-border text-warning-foreground dark:bg-input/30",
+        "success-outline":
+          "bg-background border-border text-success-foreground dark:bg-input/30",
+        "info-outline":
+          "bg-background border-border text-info-foreground dark:bg-input/30",
+        "destructive-outline":
+          "bg-background border-border text-destructive-foreground dark:bg-input/30",
+        "invert-outline":
+          "bg-background border-border text-invert-foreground dark:bg-input/30",
+        "focus-outline":
+          "bg-background border-border text-focus-foreground dark:bg-input/30",
+      },
+      size: {
+        xs: "px-1 py-0.25 text-[0.6rem] leading-none h-4 min-w-4 gap-1",
+        sm: "px-1 py-0.25 text-[0.625rem] leading-none h-4.5 min-w-4.5 gap-1",
+        default: "px-1.25 py-0.5 text-xs h-5 min-w-5 gap-1",
+        lg: "px-1.5 py-0.5 text-xs h-5.5 min-w-5.5 gap-1",
+        xl: "px-2 py-0.75 text-sm h-6 min-w-6 gap-1.5",
+      },
+      /** `default`: per-theme radius. `full`: max radius per theme (Lyra stays `rounded-none`). */
+      radius: {
+        default:
+          "rounded-sm",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+    },
+  }
+)
+
+interface BadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"]
+  size?: VariantProps<typeof badgeVariants>["size"]
+  radius?: VariantProps<typeof badgeVariants>["radius"]
+}
+
+function Badge({
+  className,
+  variant,
+  size,
+  radius,
+  render,
+  ...props
+}: BadgeProps) {
+  const defaultProps = {
+    "data-slot": "badge",
+    className: cn(badgeVariants({ variant, size, radius, className })),
+  }
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  })
+}
+
+export { Badge, badgeVariants, type BadgeProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/color-picker.tsx b/apps/web/src/components/reui/color-picker.tsx
new file mode 100644
index 0000000..6adb0ce
--- /dev/null
+++ b/apps/web/src/components/reui/color-picker.tsx
@@ -0,0 +1,220 @@
+import { useId, useMemo, useState } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@cfdm/ui/lib/utils'
+import { Input } from '@cfdm/ui/components/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@cfdm/ui/components/popover'
+
+const PROJECT_COLOR_PRESETS = [
+  '#3b82f6',
+  '#6366f1',
+  '#8b5cf6',
+  '#ec4899',
+  '#ef4444',
+  '#f97316',
+  '#eab308',
+  '#22c55e',
+  '#14b8a6',
+  '#06b6d4',
+  '#64748b',
+  '#18181b',
+] as const
+
+const colorPickerGroupVariants = cva(
+  'relative flex w-full items-stretch overflow-hidden rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+  {
+    variants: {
+      size: {
+        sm: 'h-7 text-sm',
+        default: 'h-8 text-sm',
+        lg: 'h-9 text-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+)
+
+const colorPickerSwatchVariants = cva(
+  'flex shrink-0 cursor-pointer items-center justify-center border-e border-input transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'w-9',
+        default: 'w-10',
+        lg: 'w-11',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+)
+
+const colorPickerInputVariants = cva(
+  'min-w-0 flex-1 border-0 bg-transparent shadow-none focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent',
+  {
+    variants: {
+      size: {
+        sm: 'h-7 rounded-e-lg px-2',
+        default: 'h-8 rounded-e-lg px-2.5',
+        lg: 'h-9 rounded-e-lg px-2.5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+)
+
+function isValidHex(value: string): boolean {
+  return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value.trim())
+}
+
+function normalizeHex(value: string): string {
+  const trimmed = value.trim()
+  if (!trimmed) return ''
+  const withHash = trimmed.startsWith('#') ? trimmed : `#${trimmed}`
+  if (/^#[0-9A-Fa-f]{3}$/.test(withHash)) {
+    const [, r, g, b] = withHash
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase()
+  }
+  if (/^#[0-9A-Fa-f]{6}$/.test(withHash)) {
+    return withHash.toLowerCase()
+  }
+  return withHash
+}
+
+function toPickerValue(value: string): string {
+  const normalized = normalizeHex(value)
+  return isValidHex(normalized) ? normalized : '#3b82f6'
+}
+
+interface ColorPickerProps extends VariantProps<typeof colorPickerGroupVariants> {
+  id?: string
+  value?: string
+  onChange?: (value: string) => void
+  onBlur?: () => void
+  disabled?: boolean
+  placeholder?: string
+  'aria-invalid'?: boolean
+  className?: string
+}
+
+function ColorPicker({
+  id,
+  value = '',
+  onChange,
+  onBlur,
+  disabled,
+  placeholder = '#3b82f6',
+  size = 'default',
+  className,
+  'aria-invalid': ariaInvalid,
+}: ColorPickerProps) {
+  const generatedId = useId()
+  const inputId = id ?? generatedId
+  const [open, setOpen] = useState(false)
+  const sizeValue = size ?? 'default'
+
+  const displayValue = value ?? ''
+  const swatchColor = useMemo(() => {
+    const normalized = normalizeHex(displayValue)
+    return isValidHex(normalized) ? normalized : undefined
+  }, [displayValue])
+
+  const handleHexChange = (next: string) => {
+    onChange?.(next)
+  }
+
+  const handleHexBlur = () => {
+    const normalized = normalizeHex(displayValue)
+    if (normalized !== displayValue) {
+      onChange?.(normalized)
+    }
+    onBlur?.()
+  }
+
+  const applyColor = (next: string) => {
+    onChange?.(normalizeHex(next))
+  }
+
+  return (
+    <div
+      className={cn(colorPickerGroupVariants({ size: sizeValue }), className)}
+      data-slot="color-picker"
+      data-size={sizeValue}
+      aria-invalid={ariaInvalid}
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          disabled={disabled}
+          render={
+            <button
+              type="button"
+              className={cn(colorPickerSwatchVariants({ size: sizeValue }))}
+              aria-label="Выбрать цвет"
+              disabled={disabled}
+            >
+              <span
+                className={cn(
+                  'size-4 rounded-sm ring-1 ring-foreground/10',
+                  !swatchColor && 'bg-muted',
+                )}
+                style={swatchColor ? { backgroundColor: swatchColor } : undefined}
+              />
+            </button>
+          }
+        />
+        <PopoverContent align="start" className="w-64 gap-3 p-3">
+          <label className="flex flex-col gap-1.5 text-xs text-muted-foreground">
+            Палитра
+            <input
+              type="color"
+              value={toPickerValue(displayValue)}
+              disabled={disabled}
+              className="h-28 w-full cursor-pointer rounded-md border border-input bg-transparent p-1"
+              onChange={(e) => applyColor(e.target.value)}
+            />
+          </label>
+          <div className="flex flex-col gap-1.5">
+            <span className="text-xs text-muted-foreground">Быстрый выбор</span>
+            <div className="grid grid-cols-6 gap-1.5">
+              {PROJECT_COLOR_PRESETS.map((preset) => (
+                <button
+                  key={preset}
+                  type="button"
+                  aria-label={preset}
+                  disabled={disabled}
+                  className={cn(
+                    'aspect-square rounded-md ring-1 ring-foreground/10 transition-transform hover:scale-105',
+                    swatchColor === preset && 'ring-2 ring-ring',
+                  )}
+                  style={{ backgroundColor: preset }}
+                  onClick={() => {
+                    applyColor(preset)
+                    setOpen(false)
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <Input
+        id={inputId}
+        value={displayValue}
+        disabled={disabled}
+        placeholder={placeholder}
+        aria-invalid={ariaInvalid}
+        className={colorPickerInputVariants({ size: sizeValue })}
+        style={swatchColor ? { color: swatchColor } : undefined}
+        onChange={(e) => handleHexChange(e.target.value)}
+        onBlur={handleHexBlur}
+      />
+    </div>
+  )
+}
+
+export { ColorPicker, normalizeHex, isValidHex, PROJECT_COLOR_PRESETS }
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
new file mode 100644
index 0000000..f516d6c
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
@@ -0,0 +1,165 @@
+import { useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button } from "@cfdm/ui/components/button"
+import { Input } from "@cfdm/ui/components/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@cfdm/ui/components/popover"
+import { Separator } from "@cfdm/ui/components/separator"
+import { CirclePlusIcon, CheckIcon } from "lucide-react"
+
+interface DataGridColumnFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: {
+    label: string
+    value: string
+    icon?: React.ComponentType<{ className?: string }>
+  }[]
+}
+
+function DataGridColumnFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataGridColumnFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues()
+  const selectedValues = new Set(column?.getFilterValue() as string[])
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery) return options
+    return options.filter((option) =>
+      option.label.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  }, [options, searchQuery])
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button variant="outline" size="sm">
+            <CirclePlusIcon className="size-4" />
+            {title}
+            {selectedValues?.size > 0 && (
+              <>
+                <Separator orientation="vertical" className="mx-2 h-4" />
+                <Badge
+                  variant="secondary"
+                  className="rounded-sm px-1 font-normal lg:hidden"
+                >
+                  {selectedValues.size}
+                </Badge>
+                <div className="hidden space-x-1 lg:flex">
+                  {selectedValues.size > 2 ? (
+                    <Badge
+                      variant="secondary"
+                      className="rounded-sm px-1 font-normal"
+                    >
+                      {selectedValues.size} selected
+                    </Badge>
+                  ) : (
+                    options
+                      .filter((option) => selectedValues.has(option.value))
+                      .map((option) => (
+                        <Badge
+                          variant="secondary"
+                          key={option.value}
+                          className="rounded-sm px-1 font-normal"
+                        >
+                          {option.label}
+                        </Badge>
+                      ))
+                  )}
+                </div>
+              </>
+            )}
+          </Button>
+        }
+      />
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <div className="p-2">
+          <Input
+            placeholder={title}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="h-8"
+          />
+        </div>
+        <div className="max-h-[300px] overflow-y-auto">
+          {filteredOptions.length === 0 ? (
+            <div className="text-muted-foreground py-6 text-center text-sm">
+              No results found.
+            </div>
+          ) : (
+            <div className="p-1">
+              {filteredOptions.map((option) => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <div
+                    key={option.value}
+                    onClick={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value)
+                      } else {
+                        selectedValues.add(option.value)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      )
+                    }}
+                    className={cn(
+                      "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+                      "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className="h-4 w-4" />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="text-muted-foreground mr-2 h-4 w-4" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ms-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+          {selectedValues.size > 0 && (
+            <>
+              <div className="bg-border -mx-1 my-1 h-px" />
+              <div className="p-1">
+                <div
+                  onClick={() => column?.setFilterValue(undefined)}
+                  className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center justify-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
+                >
+                  Clear filters
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { DataGridColumnFilter, type DataGridColumnFilterProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
new file mode 100644
index 0000000..1f1c685
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
@@ -0,0 +1,345 @@
+"use client"
+
+import { HTMLAttributes, memo, ReactNode, useMemo } from "react"
+import {
+  getColumnHeaderLabel,
+  useDataGrid,
+} from "@/components/reui/data-grid/data-grid"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button } from "@cfdm/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@cfdm/ui/components/dropdown-menu"
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, CheckIcon, ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowLeftIcon, ArrowRightIcon, Settings2Icon, PinOffIcon } from "lucide-react"
+
+interface DataGridColumnHeaderProps<
+  TData,
+  TValue,
+> extends HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  /** When omitted, uses `column.columnDef.meta.headerTitle`, then a string `columnDef.header`, then `column.id`. */
+  title?: string
+  icon?: ReactNode
+  pinnable?: boolean
+  filter?: ReactNode
+  visibility?: boolean
+}
+
+function DataGridColumnHeaderInner<TData, TValue>({
+  column,
+  title,
+  icon,
+  className,
+  filter,
+  visibility = false,
+}: DataGridColumnHeaderProps<TData, TValue>) {
+  const { isLoading, table, props, recordCount } = useDataGrid()
+  const resolvedTitle = title ?? getColumnHeaderLabel(column)
+
+  const columnOrder = table.getState().columnOrder
+  const columnVisibilityKey = JSON.stringify(table.getState().columnVisibility)
+  const isSorted = column.getIsSorted()
+  const isPinned = column.getIsPinned()
+  const canSort = column.getCanSort()
+  const canPin = column.getCanPin()
+  const canResize = column.getCanResize()
+
+  const columnIndex = columnOrder.indexOf(column.id)
+  const canMoveLeft = columnIndex > 0
+  const canMoveRight = columnIndex < columnOrder.length - 1
+
+  const handleSort = () => {
+    if (isSorted === "asc") {
+      column.toggleSorting(true)
+    } else if (isSorted === "desc") {
+      column.clearSorting()
+    } else {
+      column.toggleSorting(false)
+    }
+  }
+
+  const headerLabelClassName = cn(
+    "text-secondary-foreground/80 inline-flex h-full items-center gap-1.5 font-normal [&_svg]:opacity-60 text-[0.8125rem] leading-[calc(1.125/0.8125)] [&_svg]:size-3.5",
+    className
+  )
+
+  const headerButtonClassName = cn(
+    "text-secondary-foreground/80 hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground -ms-2 px-2 font-normal h-6 rounded-lg",
+    className
+  )
+
+  const sortIcon =
+    canSort &&
+    (isSorted === "desc" ? (
+      <ArrowDownIcon className="size-3.25" />
+    ) : isSorted === "asc" ? (
+      <ArrowUpIcon className="size-3.25" />
+    ) : (
+      <ChevronsUpDownIcon className="mt-px size-3.25" />
+    ))
+
+  const hasControls =
+    props.tableLayout?.columnsMovable ||
+    (props.tableLayout?.columnsVisibility && visibility) ||
+    (props.tableLayout?.columnsPinnable && canPin) ||
+    filter
+
+  const menuItems = useMemo(() => {
+    const items: ReactNode[] = []
+    let hasPreviousSection = false
+
+    // Filter section
+    if (filter) {
+      items.push(
+        <DropdownMenuGroup key="group-filter">
+          <DropdownMenuLabel key="filter">{filter}</DropdownMenuLabel>
+        </DropdownMenuGroup>
+      )
+      hasPreviousSection = true
+    }
+
+    // Sort section
+    if (canSort) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-sort" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="sort-asc"
+          onClick={() => {
+            if (isSorted === "asc") {
+              column.clearSorting()
+            } else {
+              column.toggleSorting(false)
+            }
+          }}
+          disabled={!canSort}
+        >
+          <ArrowUpIcon className="size-3.5!" />
+          <span className="grow">Asc</span>
+          {isSorted === "asc" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="sort-desc"
+          onClick={() => {
+            if (isSorted === "desc") {
+              column.clearSorting()
+            } else {
+              column.toggleSorting(true)
+            }
+          }}
+          disabled={!canSort}
+        >
+          <ArrowDownIcon className="size-3.5!" />
+          <span className="grow">Desc</span>
+          {isSorted === "desc" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Pin section
+    if (props.tableLayout?.columnsPinnable && canPin) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-pin" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="pin-left"
+          onClick={() => column.pin(isPinned === "left" ? false : "left")}
+        >
+          <ArrowLeftToLineIcon className="size-3.5!" aria-hidden="true" />
+          <span className="grow">Pin to left</span>
+          {isPinned === "left" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="pin-right"
+          onClick={() => column.pin(isPinned === "right" ? false : "right")}
+        >
+          <ArrowRightToLineIcon className="size-3.5!" aria-hidden="true" />
+          <span className="grow">Pin to right</span>
+          {isPinned === "right" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Move section
+    if (props.tableLayout?.columnsMovable) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-move" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="move-left"
+          onClick={() => {
+            if (columnIndex > 0) {
+              const newOrder = [...columnOrder]
+              const [movedColumn] = newOrder.splice(columnIndex, 1)
+              newOrder.splice(columnIndex - 1, 0, movedColumn)
+              table.setColumnOrder(newOrder)
+            }
+          }}
+          disabled={!canMoveLeft || isPinned !== false}
+        >
+          <ArrowLeftIcon className="size-3.5!" aria-hidden="true" />
+          <span>Move to Left</span>
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="move-right"
+          onClick={() => {
+            if (columnIndex < columnOrder.length - 1) {
+              const newOrder = [...columnOrder]
+              const [movedColumn] = newOrder.splice(columnIndex, 1)
+              newOrder.splice(columnIndex + 1, 0, movedColumn)
+              table.setColumnOrder(newOrder)
+            }
+          }}
+          disabled={!canMoveRight || isPinned !== false}
+        >
+          <ArrowRightIcon className="size-3.5!" aria-hidden="true" />
+          <span>Move to Right</span>
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Visibility section
+    if (props.tableLayout?.columnsVisibility && visibility) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-visibility" />)
+      }
+      items.push(
+        <DropdownMenuSub key="visibility">
+          <DropdownMenuSubTrigger>
+            <Settings2Icon className="size-3.5!" />
+            <span>Columns</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent side="right">
+            {table
+              .getAllColumns()
+              .filter((col) => col.getCanHide())
+              .map((col) => (
+                <DropdownMenuCheckboxItem
+                  key={col.id}
+                  checked={col.getIsVisible()}
+                  onSelect={(event) => event.preventDefault()}
+                  onCheckedChange={(value) => col.toggleVisibility(!!value)}
+                  className="capitalize"
+                >
+                  {getColumnHeaderLabel(col)}
+                </DropdownMenuCheckboxItem>
+              ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      )
+    }
+
+    return items
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    filter,
+    canSort,
+    isSorted,
+    column,
+    props.tableLayout?.columnsPinnable,
+    props.tableLayout?.columnsMovable,
+    props.tableLayout?.columnsVisibility,
+    canPin,
+    isPinned,
+    canMoveLeft,
+    canMoveRight,
+    visibility,
+    table,
+    columnIndex,
+    columnOrder,
+    columnVisibilityKey, // Needed to update checkbox states when visibility changes
+  ])
+
+  if (hasControls) {
+    return (
+      <div className="flex h-full items-center justify-between gap-1.5">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="ghost"
+                className={headerButtonClassName}
+                disabled={isLoading || recordCount === 0}
+              >
+                {icon && icon}
+                {resolvedTitle}
+                {sortIcon}
+              </Button>
+            }
+          />
+          <DropdownMenuContent className="w-40" align="start">
+            {menuItems}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        {props.tableLayout?.columnsPinnable && canPin && isPinned && (
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="-me-1 size-7 rounded-md"
+            onClick={() => column.pin(false)}
+            aria-label={`Unpin ${resolvedTitle} column`}
+            title={`Unpin ${resolvedTitle} column`}
+          >
+            <PinOffIcon className="size-3.5! opacity-50!" aria-hidden="true" />
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  if (canSort || (props.tableLayout?.columnsResizable && canResize)) {
+    return (
+      <div className="flex h-full items-center">
+        <Button
+          variant="ghost"
+          className={headerButtonClassName}
+          disabled={isLoading || recordCount === 0}
+          onClick={handleSort}
+        >
+          {icon && icon}
+          {resolvedTitle}
+          {sortIcon}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={headerLabelClassName}>
+      {icon && icon}
+      {resolvedTitle}
+    </div>
+  )
+}
+
+const DataGridColumnHeader = memo(
+  DataGridColumnHeaderInner
+) as typeof DataGridColumnHeaderInner
+
+export { DataGridColumnHeader, type DataGridColumnHeaderProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
new file mode 100644
index 0000000..b1e272d
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
@@ -0,0 +1,51 @@
+import { ReactElement } from "react"
+import { getColumnHeaderLabel } from "@/components/reui/data-grid/data-grid"
+import { Table } from "@tanstack/react-table"
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@cfdm/ui/components/dropdown-menu"
+
+function DataGridColumnVisibility<TData>({
+  table,
+  trigger,
+}: {
+  table: Table<TData>
+  trigger: ReactElement<Record<string, unknown>>
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={trigger} />
+      <DropdownMenuContent align="end" className="min-w-[150px]">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="font-medium">
+            Toggle Columns
+          </DropdownMenuLabel>
+          {table
+            .getAllColumns()
+            .filter((column) => column.getCanHide())
+            .map((column) => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  className="capitalize"
+                  checked={column.getIsVisible()}
+                  onSelect={(event) => event.preventDefault()}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                >
+                  {getColumnHeaderLabel(column)}
+                </DropdownMenuCheckboxItem>
+              )
+            })}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export { DataGridColumnVisibility }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
new file mode 100644
index 0000000..b849436
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
@@ -0,0 +1,226 @@
+"use client"
+
+import React, { ReactNode } from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button } from "@cfdm/ui/components/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@cfdm/ui/components/select"
+import { Skeleton } from "@cfdm/ui/components/skeleton"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+interface DataGridPaginationProps {
+  sizes?: number[]
+  sizesInfo?: string
+  sizesLabel?: string
+  sizesDescription?: string
+  sizesSkeleton?: ReactNode
+  more?: boolean
+  moreLimit?: number
+  info?: string
+  infoSkeleton?: ReactNode
+  className?: string
+  rowsPerPageLabel?: string
+  previousPageLabel?: string
+  nextPageLabel?: string
+  ellipsisText?: string
+}
+
+function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
+  const { table, recordCount, isLoading } = useDataGrid()
+
+  const defaultProps: Partial<DataGridPaginationProps> = {
+    sizes: [5, 10, 25, 50, 100],
+    sizesLabel: "Show",
+    sizesDescription: "per page",
+    sizesSkeleton: <Skeleton className="h-8 w-44" />,
+    moreLimit: 5,
+    more: false,
+    info: "{from} - {to} of {count}",
+    infoSkeleton: <Skeleton className="h-8 w-60" />,
+    rowsPerPageLabel: "Rows per page",
+    previousPageLabel: "Go to previous page",
+    nextPageLabel: "Go to next page",
+    ellipsisText: "...",
+  }
+
+  const mergedProps: DataGridPaginationProps = { ...defaultProps, ...props }
+
+  const btnBaseClasses = "size-7 p-0 text-sm"
+  const btnArrowClasses = btnBaseClasses + " rtl:transform rtl:rotate-180"
+  const pageIndex = table.getState().pagination.pageIndex
+  const pageSize = table.getState().pagination.pageSize
+  const from = pageIndex * pageSize + 1
+  const to = Math.min((pageIndex + 1) * pageSize, recordCount)
+  const pageCount = table.getPageCount()
+
+  // Replace placeholders in paginationInfo
+  const paginationInfo = mergedProps?.info
+    ? mergedProps.info
+        .replace("{from}", from.toString())
+        .replace("{to}", to.toString())
+        .replace("{count}", recordCount.toString())
+    : `${from} - ${to} of ${recordCount}`
+
+  // Pagination limit logic
+  const paginationMoreLimit = mergedProps?.moreLimit || 5
+
+  // Determine the start and end of the pagination group
+  const currentGroupStart =
+    Math.floor(pageIndex / paginationMoreLimit) * paginationMoreLimit
+  const currentGroupEnd = Math.min(
+    currentGroupStart + paginationMoreLimit,
+    pageCount
+  )
+
+  // Render page buttons based on the current group
+  const renderPageButtons = () => {
+    const buttons = []
+    for (let i = currentGroupStart; i < currentGroupEnd; i++) {
+      buttons.push(
+        <Button
+          key={i}
+          size="icon-sm"
+          variant="ghost"
+          className={cn(btnBaseClasses, "text-muted-foreground", {
+            "bg-accent text-accent-foreground": pageIndex === i,
+          })}
+          onClick={() => {
+            if (pageIndex !== i) {
+              table.setPageIndex(i)
+            }
+          }}
+        >
+          {i + 1}
+        </Button>
+      )
+    }
+    return buttons
+  }
+
+  // Render a "previous" ellipsis button if there are previous pages to show
+  const renderEllipsisPrevButton = () => {
+    if (currentGroupStart > 0) {
+      return (
+        <Button
+          size="icon-sm"
+          className={btnBaseClasses}
+          variant="ghost"
+          onClick={() => table.setPageIndex(currentGroupStart - 1)}
+        >
+          {mergedProps.ellipsisText}
+        </Button>
+      )
+    }
+    return null
+  }
+
+  // Render a "next" ellipsis button if there are more pages to show after the current group
+  const renderEllipsisNextButton = () => {
+    if (currentGroupEnd < pageCount) {
+      return (
+        <Button
+          className={btnBaseClasses}
+          variant="ghost"
+          size="icon-sm"
+          onClick={() => table.setPageIndex(currentGroupEnd)}
+        >
+          {mergedProps.ellipsisText}
+        </Button>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div
+      data-slot="data-grid-pagination"
+      className={cn(
+        "flex grow flex-col flex-wrap items-center justify-between gap-2.5 py-2.5 sm:flex-row sm:py-0",
+        mergedProps?.className
+      )}
+    >
+      <div className="order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0">
+        {isLoading ? (
+          mergedProps?.sizesSkeleton
+        ) : (
+          <>
+            <div className="text-muted-foreground text-sm">
+              {mergedProps.rowsPerPageLabel}
+            </div>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                const newPageSize = Number(value)
+                table.setPageSize(newPageSize)
+              }}
+            >
+              <SelectTrigger className="w-14" size="sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent side="top" className="min-w-18">
+                {mergedProps?.sizes?.map((size: number) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </>
+        )}
+      </div>
+      <div className="order-1 flex flex-col items-center justify-center gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0">
+        {isLoading ? (
+          mergedProps?.infoSkeleton
+        ) : (
+          <>
+            <div className="text-muted-foreground text-sm order-2 text-nowrap sm:order-1">
+              {paginationInfo}
+            </div>
+            {pageCount > 1 && (
+              <div className="order-1 flex items-center space-x-1 sm:order-2">
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className={btnArrowClasses}
+                  onClick={() => table.previousPage()}
+                  disabled={!table.getCanPreviousPage()}
+                >
+                  <span className="sr-only">
+                    {mergedProps.previousPageLabel}
+                  </span>
+                  <ChevronLeftIcon className="size-4" />
+                </Button>
+
+                {renderEllipsisPrevButton()}
+
+                {renderPageButtons()}
+
+                {renderEllipsisNextButton()}
+
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className={btnArrowClasses}
+                  onClick={() => table.nextPage()}
+                  disabled={!table.getCanNextPage()}
+                >
+                  <span className="sr-only">{mergedProps.nextPageLabel}</span>
+                  <ChevronRightIcon className="size-4" />
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { DataGridPagination, type DataGridPaginationProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
new file mode 100644
index 0000000..44c0452
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
@@ -0,0 +1,419 @@
+import {
+  PointerEvent,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@cfdm/ui/lib/utils"
+
+const MIN_THUMB_SIZE = 24
+const FALLBACK_SCROLLBAR_SIZE = 12
+
+const INITIAL_METRICS = {
+  hasVerticalOverflow: false,
+  headerHeight: 0,
+  horizontalScrollbarSize: 0,
+  thumbHeight: 0,
+  thumbTop: 0,
+  trackHeight: 0,
+} as const
+
+type DataGridScrollAreaOrientation = "horizontal" | "vertical" | "both"
+
+type ScrollbarMetrics = {
+  hasVerticalOverflow: boolean
+  headerHeight: number
+  horizontalScrollbarSize: number
+  thumbHeight: number
+  thumbTop: number
+  trackHeight: number
+}
+
+type ObservedElements = {
+  header: HTMLElement | null
+  horizontalScrollbar: HTMLElement | null
+  table: HTMLElement | null
+  tableViewport: HTMLElement | null
+}
+
+type DataGridScrollAreaProps = Omit<
+  ScrollAreaPrimitive.Root.Props,
+  "children"
+> & {
+  children: ReactNode
+  orientation?: DataGridScrollAreaOrientation
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function areMetricsEqual(next: ScrollbarMetrics, prev: ScrollbarMetrics) {
+  return (
+    next.hasVerticalOverflow === prev.hasVerticalOverflow &&
+    next.headerHeight === prev.headerHeight &&
+    next.horizontalScrollbarSize === prev.horizontalScrollbarSize &&
+    next.thumbHeight === prev.thumbHeight &&
+    next.thumbTop === prev.thumbTop &&
+    next.trackHeight === prev.trackHeight
+  )
+}
+
+function applyMetrics(element: HTMLElement, metrics: ScrollbarMetrics) {
+  element.style.setProperty(
+    "--data-grid-scrollbar-header-height",
+    `${metrics.headerHeight}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-thumb-height",
+    `${metrics.thumbHeight}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-thumb-top",
+    `${metrics.thumbTop}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-track-height",
+    `${metrics.trackHeight}px`
+  )
+}
+
+function DataGridScrollArea({
+  children,
+  className,
+  orientation = "both",
+  ...props
+}: DataGridScrollAreaProps) {
+  const { props: dataGridProps } = useDataGrid()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewportRef = useRef<HTMLDivElement | null>(null)
+  const dragRef = useRef<{
+    pointerId: number
+    startScrollTop: number
+    startY: number
+  } | null>(null)
+  const metricsRef = useRef<ScrollbarMetrics>(INITIAL_METRICS)
+  const observedElementsRef = useRef<ObservedElements>({
+    header: null,
+    horizontalScrollbar: null,
+    table: null,
+    tableViewport: null,
+  })
+
+  const showHorizontal = orientation !== "vertical"
+  const showVertical = orientation !== "horizontal"
+  const usesCustomVerticalScrollbar =
+    showVertical && !!dataGridProps.tableLayout?.headerSticky
+  const [hasCustomVerticalOverflow, setHasCustomVerticalOverflow] =
+    useState(false)
+
+  const clearDragState = useCallback(() => {
+    dragRef.current = null
+    document.body.style.userSelect = ""
+    document.body.style.webkitUserSelect = ""
+  }, [])
+
+  const resetMetrics = useCallback(() => {
+    const container = containerRef.current
+
+    if (container && !areMetricsEqual(INITIAL_METRICS, metricsRef.current)) {
+      applyMetrics(container, INITIAL_METRICS)
+      metricsRef.current = INITIAL_METRICS
+    }
+
+    setHasCustomVerticalOverflow((prev) => (prev ? false : prev))
+  }, [])
+
+  const syncCustomVerticalScrollbar = useCallback(() => {
+    const container = containerRef.current
+    const viewport = viewportRef.current
+
+    if (!container || !viewport || !usesCustomVerticalScrollbar) {
+      resetMetrics()
+      return
+    }
+
+    const { header, horizontalScrollbar } = observedElementsRef.current
+    const headerHeight = header?.getBoundingClientRect().height ?? 0
+    const viewportHeight = viewport.clientHeight
+    const viewportWidth = viewport.clientWidth
+    const scrollHeight = viewport.scrollHeight
+    const scrollWidth = viewport.scrollWidth
+    const hasHorizontalOverflow =
+      showHorizontal && scrollWidth > viewportWidth + 0.5
+    const horizontalScrollbarSize = hasHorizontalOverflow
+      ? horizontalScrollbar?.offsetHeight || FALLBACK_SCROLLBAR_SIZE
+      : 0
+    const trackHeight = Math.max(
+      0,
+      viewportHeight - headerHeight - horizontalScrollbarSize
+    )
+    const maxScroll = Math.max(0, scrollHeight - viewportHeight)
+
+    let nextMetrics: ScrollbarMetrics
+
+    if (trackHeight === 0 || maxScroll === 0) {
+      nextMetrics = {
+        hasVerticalOverflow: false,
+        headerHeight,
+        horizontalScrollbarSize,
+        thumbHeight: trackHeight,
+        thumbTop: 0,
+        trackHeight,
+      }
+    } else {
+      const bodyContentHeight = Math.max(
+        trackHeight,
+        scrollHeight - headerHeight
+      )
+      const thumbHeight = clamp(
+        trackHeight * (trackHeight / bodyContentHeight),
+        MIN_THUMB_SIZE,
+        trackHeight
+      )
+      const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+      const thumbTop =
+        maxThumbTop > 0 ? (viewport.scrollTop / maxScroll) * maxThumbTop : 0
+
+      nextMetrics = {
+        hasVerticalOverflow: true,
+        headerHeight,
+        horizontalScrollbarSize,
+        thumbHeight,
+        thumbTop,
+        trackHeight,
+      }
+    }
+
+    if (!areMetricsEqual(nextMetrics, metricsRef.current)) {
+      applyMetrics(container, nextMetrics)
+      metricsRef.current = nextMetrics
+    }
+
+    setHasCustomVerticalOverflow((prev) =>
+      prev === nextMetrics.hasVerticalOverflow
+        ? prev
+        : nextMetrics.hasVerticalOverflow
+    )
+  }, [resetMetrics, showHorizontal, usesCustomVerticalScrollbar])
+
+  useEffect(() => {
+    const container = containerRef.current
+    const viewport = viewportRef.current
+
+    if (!container || !viewport) return
+
+    if (!usesCustomVerticalScrollbar) {
+      resetMetrics()
+      return
+    }
+
+    observedElementsRef.current = {
+      header: container.querySelector(
+        '[data-slot="data-grid-table"] thead'
+      ) as HTMLElement | null,
+      horizontalScrollbar: container.querySelector(
+        '[data-slot="data-grid-scrollbar"][data-orientation="horizontal"]'
+      ) as HTMLElement | null,
+      table: container.querySelector(
+        '[data-slot="data-grid-table"]'
+      ) as HTMLElement | null,
+      tableViewport: container.querySelector(
+        '[data-slot="data-grid-table-viewport"]'
+      ) as HTMLElement | null,
+    }
+
+    let frame = 0
+
+    const scheduleSync = () => {
+      cancelAnimationFrame(frame)
+      frame = window.requestAnimationFrame(syncCustomVerticalScrollbar)
+    }
+
+    scheduleSync()
+    viewport.addEventListener("scroll", scheduleSync, { passive: true })
+
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(scheduleSync)
+
+    observer?.observe(viewport)
+    observedElementsRef.current.header &&
+      observer?.observe(observedElementsRef.current.header)
+    observedElementsRef.current.table &&
+      observer?.observe(observedElementsRef.current.table)
+    observedElementsRef.current.tableViewport &&
+      observer?.observe(observedElementsRef.current.tableViewport)
+
+    return () => {
+      cancelAnimationFrame(frame)
+      observer?.disconnect()
+      viewport.removeEventListener("scroll", scheduleSync)
+      clearDragState()
+    }
+  }, [
+    clearDragState,
+    resetMetrics,
+    syncCustomVerticalScrollbar,
+    usesCustomVerticalScrollbar,
+  ])
+
+  const scrollToThumbOffset = (nextThumbTop: number) => {
+    const viewport = viewportRef.current
+    const { thumbHeight, trackHeight } = metricsRef.current
+
+    if (!viewport) return
+
+    const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
+    const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+
+    if (maxScroll === 0 || maxThumbTop === 0) {
+      viewport.scrollTop = 0
+      return
+    }
+
+    const ratio = clamp(nextThumbTop, 0, maxThumbTop) / maxThumbTop
+    viewport.scrollTop = ratio * maxScroll
+  }
+
+  const handleThumbPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current
+
+    if (!viewport) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    event.currentTarget.setPointerCapture(event.pointerId)
+
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startScrollTop: viewport.scrollTop,
+      startY: event.clientY,
+    }
+
+    document.body.style.userSelect = "none"
+    document.body.style.webkitUserSelect = "none"
+  }
+
+  const handleThumbPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current
+    const dragState = dragRef.current
+    const { thumbHeight, trackHeight } = metricsRef.current
+
+    if (!viewport || !dragState || dragState.pointerId !== event.pointerId) {
+      return
+    }
+
+    const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+    const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
+
+    if (maxThumbTop === 0 || maxScroll === 0) return
+
+    const deltaY = event.clientY - dragState.startY
+    const nextScrollTop =
+      dragState.startScrollTop + (deltaY / maxThumbTop) * maxScroll
+
+    viewport.scrollTop = clamp(nextScrollTop, 0, maxScroll)
+  }
+
+  const handleThumbPointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return
+    clearDragState()
+  }
+
+  const handleTrackPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    const { thumbHeight } = metricsRef.current
+
+    if (event.target !== event.currentTarget) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const rect = event.currentTarget.getBoundingClientRect()
+    const offsetY = event.clientY - rect.top - thumbHeight / 2
+
+    scrollToThumbOffset(offsetY)
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <ScrollAreaPrimitive.Root
+        data-slot="data-grid-scroll-area"
+        className={cn("relative", className)}
+        {...props}
+      >
+        <ScrollAreaPrimitive.Viewport
+          ref={viewportRef}
+          data-slot="scroll-area-viewport"
+          className="size-full"
+        >
+          <ScrollAreaPrimitive.Content data-slot="scroll-area-content">
+            {children}
+          </ScrollAreaPrimitive.Content>
+        </ScrollAreaPrimitive.Viewport>
+
+        {showHorizontal && (
+          <ScrollAreaPrimitive.Scrollbar
+            data-slot="data-grid-scrollbar"
+            data-orientation="horizontal"
+            orientation="horizontal"
+            className="flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"
+          >
+            <ScrollAreaPrimitive.Thumb
+              data-slot="data-grid-thumb"
+              className="bg-border rounded-full relative flex-1"
+            />
+          </ScrollAreaPrimitive.Scrollbar>
+        )}
+
+        {showVertical && !usesCustomVerticalScrollbar && (
+          <ScrollAreaPrimitive.Scrollbar
+            data-slot="data-grid-scrollbar"
+            data-orientation="vertical"
+            orientation="vertical"
+            className="flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"
+          >
+            <ScrollAreaPrimitive.Thumb
+              data-slot="data-grid-thumb"
+              className="bg-border rounded-full relative flex-1"
+            />
+          </ScrollAreaPrimitive.Scrollbar>
+        )}
+      </ScrollAreaPrimitive.Root>
+
+      {usesCustomVerticalScrollbar && hasCustomVerticalOverflow && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-e-0 top-(--data-grid-scrollbar-header-height) z-20 h-(--data-grid-scrollbar-track-height)"
+        >
+          <div
+            className="pointer-events-auto relative h-full w-2 touch-none p-px"
+            onPointerDown={handleTrackPointerDown}
+          >
+            <div
+              className={cn(
+                "bg-border absolute end-px w-2",
+                "top-(--data-grid-scrollbar-thumb-top) h-(--data-grid-scrollbar-thumb-height)",
+                "rounded-full"
+              )}
+              onLostPointerCapture={clearDragState}
+              onPointerCancel={handleThumbPointerUp}
+              onPointerDown={handleThumbPointerDown}
+              onPointerMove={handleThumbPointerMove}
+              onPointerUp={handleThumbPointerUp}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { DataGridScrollArea }
+export type { DataGridScrollAreaOrientation, DataGridScrollAreaProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
new file mode 100644
index 0000000..28b02d0
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
@@ -0,0 +1,309 @@
+"use client"
+
+import {
+  createContext,
+  CSSProperties,
+  ReactNode,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableBodyRow,
+  DataGridTableBodyRowCell,
+  DataGridTableBodyRowSkeleton,
+  DataGridTableBodyRowSkeletonCell,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+} from "@/components/reui/data-grid/data-grid-table"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  UniqueIdentifier,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type Modifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { Cell, flexRender, HeaderGroup, Row } from "@tanstack/react-table"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button } from "@cfdm/ui/components/button"
+import { GripHorizontalIcon } from "lucide-react"
+
+// Context to share sortable listeners from row to handle
+type SortableContextValue = ReturnType<typeof useSortable>
+const SortableRowContext = createContext<Pick<
+  SortableContextValue,
+  "attributes" | "listeners"
+> | null>(null)
+
+function DataGridTableDndRowHandle({ className }: { className?: string }) {
+  const context = useContext(SortableRowContext)
+
+  if (!context) {
+    // Fallback if context is not available (shouldn't happen in normal usage)
+    return (
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        className={cn(
+          "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
+          className
+        )}
+        disabled
+      >
+        <GripHorizontalIcon
+        />
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      className={cn(
+        "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
+        className
+      )}
+      {...context.attributes}
+      {...context.listeners}
+    >
+      <GripHorizontalIcon
+      />
+    </Button>
+  )
+}
+
+function DataGridTableDndRow<TData>({ row }: { row: Row<TData> }) {
+  const {
+    transform,
+    transition,
+    setNodeRef,
+    isDragging,
+    attributes,
+    listeners,
+  } = useSortable({
+    id: row.id,
+  })
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+    cursor: isDragging ? "grabbing" : undefined,
+  }
+
+  return (
+    <SortableRowContext.Provider value={{ attributes, listeners }}>
+      <DataGridTableBodyRow
+        row={row}
+        dndRef={setNodeRef}
+        dndStyle={style}
+        key={row.id}
+      >
+        {row.getVisibleCells().map((cell: Cell<TData, unknown>, colIndex) => {
+          return (
+            <DataGridTableBodyRowCell cell={cell} key={colIndex}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </DataGridTableBodyRowCell>
+          )
+        })}
+      </DataGridTableBodyRow>
+    </SortableRowContext.Provider>
+  )
+}
+
+function DataGridTableDndRows<TData>({
+  handleDragEnd,
+  dataIds,
+  footerContent,
+}: {
+  handleDragEnd: (event: DragEndEvent) => void
+  dataIds: UniqueIdentifier[]
+  footerContent?: ReactNode
+}) {
+  const { table, isLoading, props } = useDataGrid()
+  const pagination = table.getState().pagination
+  const tableContainerRef = useRef<HTMLDivElement>(null)
+  const [isDraggingRow, setIsDraggingRow] = useState(false)
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  useEffect(() => {
+    if (!isDraggingRow) return
+
+    const { body, documentElement } = document
+    const previousBodyCursor = body.style.cursor
+    const previousDocumentCursor = documentElement.style.cursor
+
+    body.style.cursor = "grabbing"
+    documentElement.style.cursor = "grabbing"
+
+    return () => {
+      body.style.cursor = previousBodyCursor
+      documentElement.style.cursor = previousDocumentCursor
+    }
+  }, [isDraggingRow])
+
+  const modifiers = useMemo(() => {
+    const restrictToTableContainer: Modifier = ({
+      transform,
+      draggingNodeRect,
+    }) => {
+      if (!tableContainerRef.current || !draggingNodeRect) {
+        return transform
+      }
+
+      const containerRect = tableContainerRef.current.getBoundingClientRect()
+      const { x, y } = transform
+
+      const minX = containerRect.left - draggingNodeRect.left
+      const maxX = containerRect.right - draggingNodeRect.right
+      const minY = containerRect.top - draggingNodeRect.top
+      const maxY = containerRect.bottom - draggingNodeRect.bottom
+
+      return {
+        ...transform,
+        x: Math.max(minX, Math.min(maxX, x)),
+        y: Math.max(minY, Math.min(maxY, y)),
+      }
+    }
+
+    return [restrictToVerticalAxis, restrictToTableContainer]
+  }, [])
+
+  return (
+    <DndContext
+      id={useId()}
+      collisionDetection={closestCenter}
+      modifiers={modifiers}
+      onDragCancel={() => setIsDraggingRow(false)}
+      onDragEnd={(event) => {
+        setIsDraggingRow(false)
+        handleDragEnd(event)
+      }}
+      onDragStart={() => setIsDraggingRow(true)}
+      sensors={sensors}
+    >
+      <DataGridTableViewport
+        viewportRef={tableContainerRef}
+        className={
+          isDraggingRow
+            ? "relative cursor-grabbing [&_*]:cursor-grabbing!"
+            : "relative"
+        }
+      >
+        <DataGridTableBase>
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => {
+                return (
+                  <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                    {headerGroup.headers.map((header, index) => {
+                      const { column } = header
+
+                      return (
+                        <DataGridTableHeadRowCell header={header} key={index}>
+                          {header.isPlaceholder ? null : props.tableLayout
+                              ?.columnsResizable && column.getCanResize() ? (
+                            <div className="truncate">
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                            </div>
+                          ) : (
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                          )}
+                          {props.tableLayout?.columnsResizable &&
+                            column.getCanResize() && (
+                              <DataGridTableHeadRowCellResize header={header} />
+                            )}
+                        </DataGridTableHeadRowCell>
+                      )
+                    })}
+                  </DataGridTableHeadRow>
+                )
+              })}
+          </DataGridTableHead>
+
+          {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+          <DataGridTableBody>
+            {props.loadingMode === "skeleton" &&
+            isLoading &&
+            pagination?.pageSize ? (
+              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+                <DataGridTableBodyRowSkeleton key={rowIndex}>
+                  {table.getVisibleFlatColumns().map((column, colIndex) => {
+                    return (
+                      <DataGridTableBodyRowSkeletonCell
+                        column={column}
+                        key={colIndex}
+                      >
+                        {column.columnDef.meta?.skeleton}
+                      </DataGridTableBodyRowSkeletonCell>
+                    )
+                  })}
+                </DataGridTableBodyRowSkeleton>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              <SortableContext
+                items={dataIds}
+                strategy={verticalListSortingStrategy}
+              >
+                {table.getRowModel().rows.map((row: Row<TData>) => {
+                  return <DataGridTableDndRow row={row} key={row.id} />
+                })}
+              </SortableContext>
+            ) : (
+              <DataGridTableEmpty />
+            )}
+          </DataGridTableBody>
+
+          {footerContent && (
+            <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+          )}
+        </DataGridTableBase>
+      </DataGridTableViewport>
+    </DndContext>
+  )
+}
+
+export { DataGridTableDndRowHandle, DataGridTableDndRows }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
new file mode 100644
index 0000000..b9c0c29
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
@@ -0,0 +1,312 @@
+import {
+  CSSProperties,
+  Fragment,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableBodyRow,
+  DataGridTableBodyRowCell,
+  DataGridTableBodyRowExpandded,
+  DataGridTableBodyRowSkeleton,
+  DataGridTableBodyRowSkeletonCell,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+} from "@/components/reui/data-grid/data-grid-table"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  Modifier,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core"
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  Cell,
+  flexRender,
+  Header,
+  HeaderGroup,
+  Row,
+} from "@tanstack/react-table"
+
+import { Button } from "@cfdm/ui/components/button"
+import { GripVerticalIcon } from "lucide-react"
+
+function DataGridTableDndHeader<TData>({
+  header,
+}: {
+  header: Header<TData, unknown>
+}) {
+  const { props } = useDataGrid()
+  const { column } = header
+
+  // Check if column ordering is enabled for this column
+  const canOrder =
+    (column.columnDef as { enableColumnOrdering?: boolean })
+      .enableColumnOrdering !== false
+
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: header.column.id,
+  })
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: isDragging ? "grabbing" : undefined,
+    whiteSpace: "nowrap",
+    width: props.tableLayout?.columnsResizable
+      ? `calc(var(--header-${header.id}-size) * 1px)`
+      : header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  }
+
+  return (
+    <DataGridTableHeadRowCell
+      header={header}
+      dndStyle={style}
+      dndRef={setNodeRef}
+    >
+      <div className="flex items-center justify-start gap-0.5">
+        {canOrder && (
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className={`-ms-2 size-6 ${isDragging ? "cursor-grabbing" : "cursor-grab active:cursor-grabbing"}`}
+            {...attributes}
+            {...listeners}
+            aria-label="Drag to reorder"
+          >
+            <GripVerticalIcon className="opacity-60 hover:opacity-100" aria-hidden="true" />
+          </Button>
+        )}
+        <span className="grow truncate">
+          {header.isPlaceholder
+            ? null
+            : flexRender(header.column.columnDef.header, header.getContext())}
+        </span>
+        {props.tableLayout?.columnsResizable && column.getCanResize() && (
+          <DataGridTableHeadRowCellResize header={header} />
+        )}
+      </div>
+    </DataGridTableHeadRowCell>
+  )
+}
+
+function DataGridTableDndCell<TData>({ cell }: { cell: Cell<TData, unknown> }) {
+  const { props } = useDataGrid()
+  const { isDragging, setNodeRef, transform, transition } = useSortable({
+    id: cell.column.id,
+  })
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: isDragging ? "grabbing" : undefined,
+    width: props.tableLayout?.columnsResizable
+      ? `calc(var(--col-${cell.column.id}-size) * 1px)`
+      : cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  }
+
+  return (
+    <DataGridTableBodyRowCell cell={cell} dndStyle={style} dndRef={setNodeRef}>
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </DataGridTableBodyRowCell>
+  )
+}
+
+function DataGridTableDnd<TData>({
+  handleDragEnd,
+  footerContent,
+}: {
+  handleDragEnd: (event: DragEndEvent) => void
+  footerContent?: ReactNode
+}) {
+  const { table, isLoading, props } = useDataGrid()
+  const pagination = table.getState().pagination
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isDraggingColumn, setIsDraggingColumn] = useState(false)
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  useEffect(() => {
+    if (!isDraggingColumn) return
+
+    const { body, documentElement } = document
+    const previousBodyCursor = body.style.cursor
+    const previousDocumentCursor = documentElement.style.cursor
+
+    body.style.cursor = "grabbing"
+    documentElement.style.cursor = "grabbing"
+
+    return () => {
+      body.style.cursor = previousBodyCursor
+      documentElement.style.cursor = previousDocumentCursor
+    }
+  }, [isDraggingColumn])
+
+  // Custom modifier to restrict dragging within table bounds with edge offset
+  const restrictToTableBounds: Modifier = ({ draggingNodeRect, transform }) => {
+    if (!draggingNodeRect || !containerRef.current) {
+      return { ...transform, y: 0 }
+    }
+
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const edgeOffset = 0
+
+    const minX = containerRect.left - draggingNodeRect.left - edgeOffset
+    const maxX =
+      containerRect.right -
+      draggingNodeRect.left -
+      draggingNodeRect.width +
+      edgeOffset
+
+    return {
+      ...transform,
+      x: Math.min(Math.max(transform.x, minX), maxX),
+      y: 0, // Lock vertical movement
+    }
+  }
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      id={useId()}
+      modifiers={[restrictToTableBounds]}
+      onDragCancel={() => setIsDraggingColumn(false)}
+      onDragEnd={(event) => {
+        setIsDraggingColumn(false)
+        handleDragEnd(event)
+      }}
+      onDragStart={() => setIsDraggingColumn(true)}
+      sensors={sensors}
+    >
+      <DataGridTableViewport
+        viewportRef={containerRef}
+        className={
+          isDraggingColumn
+            ? "relative cursor-grabbing [&_*]:cursor-grabbing!"
+            : "relative"
+        }
+      >
+        <DataGridTableBase>
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => {
+                return (
+                  <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                    <SortableContext
+                      items={table.getState().columnOrder}
+                      strategy={horizontalListSortingStrategy}
+                    >
+                      {headerGroup.headers.map((header) => (
+                        <DataGridTableDndHeader
+                          header={header}
+                          key={header.id}
+                        />
+                      ))}
+                    </SortableContext>
+                  </DataGridTableHeadRow>
+                )
+              })}
+          </DataGridTableHead>
+
+          {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+          <DataGridTableBody>
+            {props.loadingMode === "skeleton" &&
+            isLoading &&
+            pagination?.pageSize ? (
+              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+                <DataGridTableBodyRowSkeleton key={rowIndex}>
+                  {table.getVisibleFlatColumns().map((column, colIndex) => {
+                    return (
+                      <DataGridTableBodyRowSkeletonCell
+                        column={column}
+                        key={colIndex}
+                      >
+                        {column.columnDef.meta?.skeleton}
+                      </DataGridTableBodyRowSkeletonCell>
+                    )
+                  })}
+                </DataGridTableBodyRowSkeleton>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row: Row<TData>) => {
+                return (
+                  <Fragment key={row.id}>
+                    <DataGridTableBodyRow row={row}>
+                      {row
+                        .getVisibleCells()
+                        .map((cell: Cell<TData, unknown>) => {
+                          return (
+                            <SortableContext
+                              key={cell.id}
+                              items={table.getState().columnOrder}
+                              strategy={horizontalListSortingStrategy}
+                            >
+                              <DataGridTableDndCell cell={cell} />
+                            </SortableContext>
+                          )
+                        })}
+                    </DataGridTableBodyRow>
+                    {row.getIsExpanded() && (
+                      <DataGridTableBodyRowExpandded row={row} />
+                    )}
+                  </Fragment>
+                )
+              })
+            ) : (
+              <DataGridTableEmpty />
+            )}
+          </DataGridTableBody>
+
+          {footerContent && (
+            <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+          )}
+        </DataGridTableBase>
+      </DataGridTableViewport>
+    </DndContext>
+  )
+}
+
+export { DataGridTableDnd }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
new file mode 100644
index 0000000..2e42934
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
@@ -0,0 +1,492 @@
+"use client"
+
+import {
+  memo,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRenderedRow,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+  getDataGridTableRowSections,
+} from "@/components/reui/data-grid/data-grid-table"
+import { flexRender, HeaderGroup, Row, Table } from "@tanstack/react-table"
+import {
+  useVirtualizer,
+  VirtualItem,
+  Virtualizer,
+  VirtualizerOptions,
+} from "@tanstack/react-virtual"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Spinner } from "@cfdm/ui/components/spinner"
+
+type DataGridTableVirtualScrollElements = {
+  containerElement: HTMLDivElement | null
+  scrollElement: HTMLElement | null
+}
+
+type DataGridTableVirtualizerInstance = Virtualizer<
+  HTMLElement,
+  HTMLTableRowElement
+>
+
+type DataGridTableVirtualizerOptions<TData> = Omit<
+  VirtualizerOptions<HTMLElement, HTMLTableRowElement>,
+  "count" | "estimateSize" | "getItemKey" | "getScrollElement"
+> & {
+  estimateSize?: (index: number, row: Row<TData>) => number
+  getItemKey?: (index: number, row: Row<TData>) => string | number
+  getScrollElement?: (
+    elements: DataGridTableVirtualScrollElements
+  ) => HTMLElement | null
+}
+
+interface DataGridTableVirtualProps<TData> {
+  height?: number | string
+  estimateSize?: number
+  overscan?: number
+  footerContent?: ReactNode
+  renderHeader?: boolean
+  onFetchMore?: () => void
+  isFetchingMore?: boolean
+  hasMore?: boolean
+  fetchMoreOffset?: number
+  virtualizerOptions?: DataGridTableVirtualizerOptions<TData>
+}
+
+interface VirtualBodyProps<TData> {
+  table: Table<TData>
+  columnCount: number
+  topRows: Row<TData>[]
+  centerRows: Row<TData>[]
+  bottomRows: Row<TData>[]
+  virtualItems: VirtualItem[]
+  totalSize: number
+  isVirtualizationEnabled: boolean
+  isInfiniteMode: boolean
+  isFetchingMore: boolean
+  hasMore?: boolean
+  loadingMoreMessage: ReactNode
+  allRowsLoadedMessage: ReactNode
+  measureRowRef?: (element: HTMLTableRowElement | null) => void
+}
+
+function DataGridTableVirtualSpacer({
+  columnCount,
+  height,
+}: {
+  columnCount: number
+  height: number
+}) {
+  if (height <= 0) return null
+
+  return (
+    <tr aria-hidden="true">
+      <td colSpan={columnCount} style={{ height, padding: 0 }} />
+    </tr>
+  )
+}
+
+function DataGridTableVirtualStatusRow({
+  children,
+  className,
+  columnCount,
+}: {
+  children: ReactNode
+  className?: string
+  columnCount: number
+}) {
+  return (
+    <tr>
+      <td
+        colSpan={columnCount}
+        className={cn(
+          "text-muted-foreground py-4 text-center text-sm",
+          className
+        )}
+      >
+        {children}
+      </td>
+    </tr>
+  )
+}
+
+function DataGridTableVirtualBody<TData>({
+  table: _table,
+  columnCount,
+  topRows,
+  centerRows,
+  bottomRows,
+  virtualItems,
+  totalSize,
+  isVirtualizationEnabled,
+  isInfiniteMode,
+  isFetchingMore,
+  hasMore,
+  loadingMoreMessage,
+  allRowsLoadedMessage,
+  measureRowRef,
+}: VirtualBodyProps<TData>) {
+  const totalRows = topRows.length + centerRows.length + bottomRows.length
+
+  if (!totalRows) return <DataGridTableEmpty />
+
+  const hasCenterRows = centerRows.length > 0
+  const showFetchingRow = isInfiniteMode && isFetchingMore
+  const showCompleteRow = isInfiniteMode && hasMore === false && totalRows > 0
+  const hasMiddleSection = hasCenterRows || showFetchingRow || showCompleteRow
+  const leadingSpacerHeight =
+    isVirtualizationEnabled && hasCenterRows && virtualItems.length > 0
+      ? (virtualItems[0]?.start ?? 0)
+      : 0
+  const trailingSpacerHeight =
+    isVirtualizationEnabled && hasCenterRows && virtualItems.length > 0
+      ? Math.max(
+          0,
+          totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)
+        )
+      : 0
+
+  const renderedRows: ReactNode[] = []
+
+  topRows.forEach((row, index) => {
+    renderedRows.push(
+      <DataGridTableRenderedRow
+        key={row.id}
+        row={row}
+        pinnedBoundary={
+          index === topRows.length - 1 && hasMiddleSection ? "top" : undefined
+        }
+      />
+    )
+  })
+
+  if (isVirtualizationEnabled) {
+    if (leadingSpacerHeight > 0) {
+      renderedRows.push(
+        <DataGridTableVirtualSpacer
+          key="virtual-spacer-start"
+          columnCount={columnCount}
+          height={leadingSpacerHeight}
+        />
+      )
+    }
+
+    virtualItems.forEach((virtualRow) => {
+      const row = centerRows[virtualRow.index]
+
+      if (!row) return
+
+      renderedRows.push(
+        <DataGridTableRenderedRow
+          key={row.id}
+          row={row}
+          rowRef={measureRowRef}
+        />
+      )
+    })
+
+    if (trailingSpacerHeight > 0) {
+      renderedRows.push(
+        <DataGridTableVirtualSpacer
+          key="virtual-spacer-end"
+          columnCount={columnCount}
+          height={trailingSpacerHeight}
+        />
+      )
+    }
+  } else {
+    centerRows.forEach((row) => {
+      renderedRows.push(<DataGridTableRenderedRow key={row.id} row={row} />)
+    })
+  }
+
+  if (showFetchingRow) {
+    renderedRows.push(
+      <DataGridTableVirtualStatusRow
+        key="virtual-status-loading"
+        columnCount={columnCount}
+      >
+        <div className="flex items-center justify-center gap-2">
+          <Spinner className="size-4 opacity-60" />
+          {loadingMoreMessage}
+        </div>
+      </DataGridTableVirtualStatusRow>
+    )
+  }
+
+  if (showCompleteRow) {
+    renderedRows.push(
+      <DataGridTableVirtualStatusRow
+        key="virtual-status-complete"
+        columnCount={columnCount}
+        className="py-3 text-xs"
+      >
+        {allRowsLoadedMessage}
+      </DataGridTableVirtualStatusRow>
+    )
+  }
+
+  bottomRows.forEach((row, index) => {
+    renderedRows.push(
+      <DataGridTableRenderedRow
+        key={row.id}
+        row={row}
+        pinnedBoundary={
+          index === 0 && (topRows.length > 0 || hasMiddleSection)
+            ? "bottom"
+            : undefined
+        }
+      />
+    )
+  })
+
+  return <>{renderedRows}</>
+}
+
+/**
+ * Memoized virtual body: skip re-renders during active column resize.
+ * Column widths update via CSS variables on the <table> element,
+ * so the browser handles width changes without React re-renders.
+ */
+const MemoizedVirtualBody = memo(
+  DataGridTableVirtualBody,
+  (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn
+) as typeof DataGridTableVirtualBody
+
+function DataGridTableVirtual<TData>({
+  height,
+  estimateSize = 48,
+  overscan = 10,
+  footerContent,
+  renderHeader = true,
+  onFetchMore,
+  isFetchingMore = false,
+  hasMore,
+  fetchMoreOffset = 0,
+  virtualizerOptions,
+}: DataGridTableVirtualProps<TData>) {
+  const { table, props } = useDataGrid()
+  const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(
+    table,
+    props.tableLayout?.rowsPinnable
+  )
+  const columnCount =
+    table.getVisibleFlatColumns().length +
+    (props.tableLayout?.columnsResizable ? 1 : 0)
+  const isInfiniteMode = typeof onFetchMore === "function"
+  const [viewportElements, setViewportElements] =
+    useState<DataGridTableVirtualScrollElements>({
+      containerElement: null,
+      scrollElement: null,
+    })
+
+  const {
+    estimateSize: customEstimateSize,
+    getItemKey: customGetItemKey,
+    getScrollElement: customGetScrollElement,
+    measureElement: customMeasureElement,
+    overscan: customOverscan,
+    ...virtualizerOptionsRest
+  } = virtualizerOptions ?? {}
+
+  const isVirtualizationEnabled = virtualizerOptions?.enabled !== false
+  const loadingMoreMessage =
+    props.fetchingMoreMessage || props.loadingMessage || "Loading..."
+  const allRowsLoadedMessage =
+    props.allRowsLoadedMessage || "All records loaded"
+
+  const handleViewportRef = useCallback((node: HTMLDivElement | null) => {
+    setViewportElements({
+      containerElement: node,
+      scrollElement:
+        (node?.closest(
+          '[data-slot="scroll-area-viewport"]'
+        ) as HTMLElement | null) ?? node,
+    })
+  }, [])
+
+  const usesExternalScrollArea =
+    viewportElements.scrollElement !== null &&
+    viewportElements.scrollElement !== viewportElements.containerElement
+
+  const resolveScrollElement = useCallback(() => {
+    if (customGetScrollElement) {
+      return customGetScrollElement(viewportElements)
+    }
+
+    return viewportElements.scrollElement
+  }, [customGetScrollElement, viewportElements])
+
+  const resolveItemKey = useCallback(
+    (index: number) => {
+      const row = centerRows[index]
+
+      if (!row) return index
+
+      return customGetItemKey?.(index, row) ?? row.id ?? index
+    },
+    [centerRows, customGetItemKey]
+  )
+
+  const resolveEstimateSize = useCallback(
+    (index: number) => {
+      const row = centerRows[index]
+
+      return row
+        ? (customEstimateSize?.(index, row) ?? estimateSize)
+        : estimateSize
+    },
+    [centerRows, customEstimateSize, estimateSize]
+  )
+
+  const virtualizer = useVirtualizer({
+    count: centerRows.length,
+    getScrollElement: resolveScrollElement,
+    getItemKey: resolveItemKey,
+    estimateSize: resolveEstimateSize,
+    overscan: customOverscan ?? overscan,
+    measureElement: customMeasureElement,
+    ...virtualizerOptionsRest,
+  }) as DataGridTableVirtualizerInstance
+
+  const virtualItems = isVirtualizationEnabled
+    ? virtualizer.getVirtualItems()
+    : []
+  const totalSize = isVirtualizationEnabled ? virtualizer.getTotalSize() : 0
+  const measureRowRef =
+    isVirtualizationEnabled && customMeasureElement
+      ? virtualizer.measureElement
+      : undefined
+  const resolvedFetchMoreOffset = useMemo(
+    () => Math.max(0, fetchMoreOffset),
+    [fetchMoreOffset]
+  )
+
+  useEffect(() => {
+    if (
+      !isVirtualizationEnabled ||
+      !isInfiniteMode ||
+      hasMore === false ||
+      isFetchingMore
+    ) {
+      return
+    }
+
+    const lastItem = virtualItems[virtualItems.length - 1]
+    if (!lastItem) return
+
+    if (lastItem.index >= centerRows.length - 1 - resolvedFetchMoreOffset) {
+      onFetchMore?.()
+    }
+  }, [
+    centerRows.length,
+    hasMore,
+    isFetchingMore,
+    isInfiniteMode,
+    isVirtualizationEnabled,
+    onFetchMore,
+    resolvedFetchMoreOffset,
+    virtualItems,
+  ])
+
+  return (
+    <DataGridTableViewport
+      viewportRef={handleViewportRef}
+      className={!usesExternalScrollArea ? "block" : undefined}
+      style={
+        usesExternalScrollArea
+          ? undefined
+          : { height, overflow: "auto", position: "relative" }
+      }
+    >
+      <DataGridTableBase>
+        {renderHeader && (
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => (
+                <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                  {headerGroup.headers.map((header, hIndex) => {
+                    const { column } = header
+
+                    return (
+                      <DataGridTableHeadRowCell header={header} key={hIndex}>
+                        {header.isPlaceholder ? null : props.tableLayout
+                            ?.columnsResizable && column.getCanResize() ? (
+                          <div className="truncate">
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </div>
+                        ) : (
+                          flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        )}
+                        {props.tableLayout?.columnsResizable &&
+                          column.getCanResize() && (
+                            <DataGridTableHeadRowCellResize header={header} />
+                          )}
+                      </DataGridTableHeadRowCell>
+                    )
+                  })}
+                </DataGridTableHeadRow>
+              ))}
+          </DataGridTableHead>
+        )}
+
+        {renderHeader &&
+          (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+        <DataGridTableBody>
+          <MemoizedVirtualBody
+            table={table}
+            columnCount={columnCount}
+            topRows={topRows}
+            centerRows={centerRows}
+            bottomRows={bottomRows}
+            virtualItems={virtualItems}
+            totalSize={totalSize}
+            isVirtualizationEnabled={isVirtualizationEnabled}
+            isInfiniteMode={isInfiniteMode}
+            isFetchingMore={isFetchingMore}
+            hasMore={hasMore}
+            loadingMoreMessage={loadingMoreMessage}
+            allRowsLoadedMessage={allRowsLoadedMessage}
+            measureRowRef={measureRowRef}
+          />
+        </DataGridTableBody>
+
+        {footerContent && (
+          <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+        )}
+      </DataGridTableBase>
+    </DataGridTableViewport>
+  )
+}
+
+export { DataGridTableVirtual }
+export type {
+  DataGridTableVirtualProps,
+  DataGridTableVirtualScrollElements,
+  DataGridTableVirtualizerOptions,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table.tsx b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
new file mode 100644
index 0000000..a1be5dd
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
@@ -0,0 +1,1431 @@
+import {
+  CSSProperties,
+  Fragment,
+  memo,
+  MouseEvent as ReactMouseEvent,
+  ReactNode,
+  TouchEvent as ReactTouchEvent,
+  Ref,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  Cell,
+  Column,
+  flexRender,
+  Header,
+  HeaderGroup,
+  Row,
+  Table,
+} from "@tanstack/react-table"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Checkbox } from "@cfdm/ui/components/checkbox"
+import { Spinner } from "@cfdm/ui/components/spinner"
+
+const headerCellSpacingVariants = cva("", {
+  variants: {
+    size: {
+      dense:
+        "px-2 h-8",
+      default:
+        "px-3",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+const bodyCellSpacingVariants = cva("", {
+  variants: {
+    size: {
+      dense:
+        "px-2 py-1.5",
+      default:
+        "px-3 py-2",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+const footerCellSpacingVariants = cva("", {
+  variants: {
+    size: {
+      dense:
+        "px-2 py-1.5",
+      default:
+        "px-3 py-2",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+function getPinningStyles<TData>(column: Column<TData>): CSSProperties {
+  const isPinned = column.getIsPinned()
+
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0,
+  }
+}
+
+function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
+  if (!ref) return
+
+  if (typeof ref === "function") {
+    ref(value)
+    return
+  }
+
+  ;(ref as { current: T | null }).current = value
+}
+
+type DataGridResizeStartEvent =
+  | ReactMouseEvent<HTMLDivElement>
+  | ReactTouchEvent<HTMLDivElement>
+
+type DataGridResizeDocumentEvent = globalThis.MouseEvent | globalThis.TouchEvent
+
+function isDataGridTouchEvent(
+  event: DataGridResizeStartEvent | DataGridResizeDocumentEvent
+): event is ReactTouchEvent<HTMLDivElement> | globalThis.TouchEvent {
+  return "touches" in event
+}
+
+function getDataGridResizeEventClientX(
+  event: DataGridResizeStartEvent | DataGridResizeDocumentEvent
+) {
+  if (isDataGridTouchEvent(event)) {
+    return event.touches[0]?.clientX ?? event.changedTouches[0]?.clientX
+  }
+
+  return event.clientX
+}
+
+function startDataGridColumnResizeOnEnd<TData>(
+  event: DataGridResizeStartEvent,
+  header: Header<TData, unknown>,
+  table: Table<TData>
+) {
+  const column = table.getColumn(header.column.id)
+
+  if (!column || !column.getCanResize()) return
+  if (isDataGridTouchEvent(event) && event.touches.length > 1) return
+
+  event.persist?.()
+
+  const ownerDocument = event.currentTarget.ownerDocument
+  const previousBodyCursor = ownerDocument.body.style.cursor
+  const previousDocumentCursor = ownerDocument.documentElement.style.cursor
+  const startSize = header.getSize()
+  const dragStartClientX = getDataGridResizeEventClientX(event)
+  const headerCell = event.currentTarget.closest("th")
+  const headerRect = headerCell?.getBoundingClientRect()
+  const startOffset =
+    headerRect &&
+    Number.isFinite(
+      table.options.columnResizeDirection === "rtl"
+        ? headerRect.left
+        : headerRect.right
+    )
+      ? table.options.columnResizeDirection === "rtl"
+        ? headerRect.left
+        : headerRect.right
+      : dragStartClientX
+
+  if (typeof dragStartClientX !== "number" || typeof startOffset !== "number") {
+    return
+  }
+
+  ownerDocument.body.style.cursor = "col-resize"
+  ownerDocument.documentElement.style.cursor = "col-resize"
+
+  const columnSizingStart = header
+    .getLeafHeaders()
+    .map(
+      (leafHeader) =>
+        [leafHeader.column.id, leafHeader.column.getSize()] as [string, number]
+    )
+  const directionMultiplier =
+    table.options.columnResizeDirection === "rtl" ? -1 : 1
+
+  const updateOffset = (clientXPos?: number, commit = false) => {
+    if (typeof clientXPos !== "number") return
+
+    let nextColumnSizing: Record<string, number> = {}
+    const deltaOffset = (clientXPos - dragStartClientX) * directionMultiplier
+    const deltaPercentage = Math.max(deltaOffset / startSize, -0.999999)
+
+    columnSizingStart.forEach(([columnId, headerSize]) => {
+      nextColumnSizing[columnId] =
+        Math.round(
+          Math.max(headerSize + headerSize * deltaPercentage, 0) * 100
+        ) / 100
+    })
+
+    table.setColumnSizingInfo((old) => ({
+      ...old,
+      startOffset,
+      startSize,
+      deltaOffset,
+      deltaPercentage,
+      columnSizingStart,
+      isResizingColumn: column.id,
+    }))
+
+    if (commit) {
+      table.setColumnSizing((old) => ({
+        ...old,
+        ...nextColumnSizing,
+      }))
+    }
+  }
+
+  const endResize = (clientXPos?: number) => {
+    updateOffset(clientXPos, true)
+    table.setColumnSizingInfo((old) => ({
+      ...old,
+      isResizingColumn: false,
+      startOffset: null,
+      startSize: null,
+      deltaOffset: null,
+      deltaPercentage: null,
+      columnSizingStart: [],
+    }))
+    ownerDocument.body.style.cursor = previousBodyCursor
+    ownerDocument.documentElement.style.cursor = previousDocumentCursor
+  }
+
+  const mouseMoveHandler = (moveEvent: globalThis.MouseEvent) => {
+    updateOffset(moveEvent.clientX)
+  }
+  const mouseUpHandler = (upEvent: globalThis.MouseEvent) => {
+    ownerDocument.removeEventListener("mousemove", mouseMoveHandler)
+    ownerDocument.removeEventListener("mouseup", mouseUpHandler)
+    endResize(upEvent.clientX)
+  }
+  const touchMoveHandler = (moveEvent: globalThis.TouchEvent) => {
+    if (moveEvent.cancelable) {
+      moveEvent.preventDefault()
+      moveEvent.stopPropagation()
+    }
+
+    updateOffset(getDataGridResizeEventClientX(moveEvent))
+  }
+  const touchEndHandler = (endEvent: globalThis.TouchEvent) => {
+    ownerDocument.removeEventListener("touchmove", touchMoveHandler)
+    ownerDocument.removeEventListener("touchend", touchEndHandler)
+
+    if (endEvent.cancelable) {
+      endEvent.preventDefault()
+      endEvent.stopPropagation()
+    }
+
+    endResize(getDataGridResizeEventClientX(endEvent))
+  }
+
+  const passiveIfSupported = { passive: false } as const
+
+  if (isDataGridTouchEvent(event)) {
+    ownerDocument.addEventListener(
+      "touchmove",
+      touchMoveHandler,
+      passiveIfSupported
+    )
+    ownerDocument.addEventListener(
+      "touchend",
+      touchEndHandler,
+      passiveIfSupported
+    )
+  } else {
+    ownerDocument.addEventListener(
+      "mousemove",
+      mouseMoveHandler,
+      passiveIfSupported
+    )
+    ownerDocument.addEventListener(
+      "mouseup",
+      mouseUpHandler,
+      passiveIfSupported
+    )
+  }
+
+  table.setColumnSizingInfo((old) => ({
+    ...old,
+    startOffset,
+    startSize,
+    deltaOffset: 0,
+    deltaPercentage: 0,
+    columnSizingStart,
+    isResizingColumn: column.id,
+  }))
+}
+
+type DataGridTablePinnedBoundary = "top" | "bottom"
+
+function getDataGridTableRowSections<TData>(
+  table: Table<TData>,
+  rowsPinnable?: boolean
+) {
+  if (!rowsPinnable) {
+    return {
+      topRows: [] as Row<TData>[],
+      centerRows: table.getRowModel().rows as Row<TData>[],
+      bottomRows: [] as Row<TData>[],
+    }
+  }
+
+  return {
+    topRows: table.getTopRows() as Row<TData>[],
+    centerRows: table.getCenterRows() as Row<TData>[],
+    bottomRows: table.getBottomRows() as Row<TData>[],
+  }
+}
+
+function getDataGridTableResolvedRows<TData>(
+  table: Table<TData>,
+  rowsPinnable?: boolean
+) {
+  const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(
+    table,
+    rowsPinnable
+  )
+  const resolvedRows: Array<{
+    row: Row<TData>
+    pinnedBoundary?: DataGridTablePinnedBoundary
+  }> = []
+
+  topRows.forEach((row, index) => {
+    resolvedRows.push({
+      row,
+      pinnedBoundary:
+        index === topRows.length - 1 &&
+        (centerRows.length > 0 || bottomRows.length > 0)
+          ? "top"
+          : undefined,
+    })
+  })
+
+  centerRows.forEach((row) => {
+    resolvedRows.push({ row })
+  })
+
+  bottomRows.forEach((row, index) => {
+    resolvedRows.push({
+      row,
+      pinnedBoundary:
+        index === 0 && (centerRows.length > 0 || topRows.length > 0)
+          ? "bottom"
+          : undefined,
+    })
+  })
+
+  return resolvedRows
+}
+
+function DataGridTableFillCol() {
+  const { props } = useDataGrid()
+
+  if (!props.tableLayout?.columnsResizable) return null
+
+  return (
+    <col
+      data-slot="data-grid-table-fill-col"
+      style={{ width: "var(--data-grid-fill-size, 0px)" }}
+    />
+  )
+}
+
+function DataGridTableFillHeadCell() {
+  const { props } = useDataGrid()
+
+  if (!props.tableLayout?.columnsResizable) return null
+
+  return (
+    <th
+      aria-hidden="true"
+      data-slot="data-grid-table-fill-head-cell"
+      style={{ width: "var(--data-grid-fill-size, 0px)" }}
+      className="p-0"
+    />
+  )
+}
+
+function DataGridTableFillBodyCell() {
+  const { props } = useDataGrid()
+
+  if (!props.tableLayout?.columnsResizable) return null
+
+  return (
+    <td
+      aria-hidden="true"
+      data-slot="data-grid-table-fill-body-cell"
+      style={{ width: "var(--data-grid-fill-size, 0px)" }}
+      className="p-0"
+    />
+  )
+}
+
+function DataGridTableFillFootCell() {
+  const { props } = useDataGrid()
+
+  if (!props.tableLayout?.columnsResizable) return null
+
+  return (
+    <td
+      aria-hidden="true"
+      data-slot="data-grid-table-fill-foot-cell"
+      style={{ width: "var(--data-grid-fill-size, 0px)" }}
+      className="border-t p-0"
+    />
+  )
+}
+
+function DataGridTableBase({ children }: { children: ReactNode }) {
+  const { props, table } = useDataGrid()
+  const visibleColumns = table.getVisibleLeafColumns()
+
+  /**
+   * Compute column widths as CSS custom properties once upfront (memoized).
+   * Cells reference these via calc(var(--col-X-size) * 1px) so the browser
+   * handles width propagation without per-cell getSize() calls or React
+   * re-renders of the body.
+   */
+  const columnSizeVars = useMemo(() => {
+    if (!props.tableLayout?.columnsResizable) return undefined
+    const headers = table.getFlatHeaders()
+    const colSizes: Record<string, number> = {}
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i]!
+      colSizes[`--header-${header.id}-size`] = header.getSize()
+      colSizes[`--col-${header.column.id}-size`] = header.column.getSize()
+    }
+    return colSizes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    props.tableLayout?.columnsResizable,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.getState().columnSizing,
+  ])
+
+  return (
+    <table
+      data-slot="data-grid-table"
+      className={cn(
+        "text-foreground text-sm caption-bottom text-left align-middle font-normal rtl:text-right",
+        props.tableLayout?.columnsResizable ? "min-w-0" : "w-full min-w-full",
+        props.tableLayout?.width === "auto" ? "table-auto" : "table-fixed",
+        !props.tableLayout?.columnsResizable && "",
+        !props.tableLayout?.columnsDraggable &&
+          "border-separate border-spacing-0",
+        props.tableClassNames?.base
+      )}
+      style={
+        props.tableLayout?.columnsResizable
+          ? {
+              ...columnSizeVars,
+              width: `calc(${table.getTotalSize()}px + var(--data-grid-fill-size, 0px))`,
+            }
+          : undefined
+      }
+    >
+      <colgroup>
+        {visibleColumns.map((column) => (
+          <col
+            key={column.id}
+            style={
+              props.tableLayout?.columnsResizable
+                ? { width: `calc(var(--col-${column.id}-size) * 1px)` }
+                : props.tableLayout?.width === "fixed"
+                  ? { width: column.getSize() }
+                  : undefined
+            }
+          />
+        ))}
+        <DataGridTableFillCol />
+      </colgroup>
+      {children}
+    </table>
+  )
+}
+
+function DataGridTableViewport({
+  children,
+  className,
+  viewportRef,
+  style,
+}: {
+  children: ReactNode
+  className?: string
+  viewportRef?: Ref<HTMLDivElement>
+  style?: CSSProperties
+}) {
+  const { props, table } = useDataGrid()
+  const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(
+    null
+  )
+  const [containerWidth, setContainerWidth] = useState(0)
+  const handleViewportRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      setViewportElement(node)
+      assignRef(viewportRef, node)
+    },
+    [viewportRef]
+  )
+  const fillWidth =
+    props.tableLayout?.columnsResizable && containerWidth > 0
+      ? Math.max(0, containerWidth - table.getTotalSize())
+      : 0
+
+  useEffect(() => {
+    if (!viewportElement || !props.tableLayout?.columnsResizable) {
+      setContainerWidth(0)
+      return
+    }
+
+    const scrollViewport =
+      (viewportElement.closest(
+        '[data-slot="scroll-area-viewport"]'
+      ) as HTMLElement | null) ?? viewportElement.parentElement
+    const measurementTarget = scrollViewport ?? viewportElement
+
+    const syncContainerWidth = () => {
+      setContainerWidth(measurementTarget.clientWidth)
+    }
+
+    syncContainerWidth()
+
+    if (typeof ResizeObserver === "undefined") return
+
+    const observer = new ResizeObserver(syncContainerWidth)
+    observer.observe(measurementTarget)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [props.tableLayout?.columnsResizable, viewportElement])
+
+  return (
+    <div
+      data-slot="data-grid-table-viewport"
+      ref={handleViewportRef}
+      className={cn("relative min-w-full align-top", className)}
+      style={{
+        ...(props.tableLayout?.columnsResizable
+          ? {
+              width: `calc(${table.getTotalSize()}px + var(--data-grid-fill-size, 0px))`,
+              ["--data-grid-fill-size" as string]: `${fillWidth}px`,
+            }
+          : undefined),
+        ...style,
+      }}
+    >
+      {children}
+      <DataGridTableResizeIndicator viewportElement={viewportElement} />
+    </div>
+  )
+}
+
+function DataGridTableHead({ children }: { children: ReactNode }) {
+  const { props } = useDataGrid()
+
+  return (
+    <thead
+      className={cn(
+        props.tableClassNames?.header,
+        props.tableLayout?.headerSticky && props.tableClassNames?.headerSticky
+      )}
+    >
+      {children}
+    </thead>
+  )
+}
+
+function DataGridTableHeadRow<TData>({
+  children,
+  headerGroup,
+}: {
+  children: ReactNode
+  headerGroup: HeaderGroup<TData>
+}) {
+  const { props } = useDataGrid()
+
+  return (
+    <tr
+      key={headerGroup.id}
+      className={cn(
+        "bg-muted/40",
+        props.tableLayout?.headerBorder && "[&>th]:border-b",
+        props.tableLayout?.cellBorder && "*:last:border-e-0",
+        props.tableLayout?.stripped && "bg-transparent",
+        props.tableLayout?.headerBackground === false && "bg-transparent",
+        props.tableClassNames?.headerRow
+      )}
+    >
+      {children}
+      <DataGridTableFillHeadCell />
+    </tr>
+  )
+}
+
+function DataGridTableHeadRowCell<TData>({
+  children,
+  header,
+  dndRef,
+  dndStyle,
+}: {
+  children: ReactNode
+  header: Header<TData, unknown>
+  dndRef?: React.Ref<HTMLTableCellElement>
+  dndStyle?: CSSProperties
+}) {
+  const { props } = useDataGrid()
+
+  const { column } = header
+  const isPinned = column.getIsPinned()
+  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left")
+  const isFirstRightPinned =
+    isPinned === "right" && column.getIsFirstColumn("right")
+  const isLastVisibleColumn =
+    column.getIndex() ===
+    header.getContext().table.getVisibleLeafColumns().length - 1
+  const headerCellSpacing = headerCellSpacingVariants({
+    size: props.tableLayout?.dense ? "dense" : "default",
+  })
+
+  return (
+    <th
+      key={header.id}
+      ref={dndRef}
+      style={{
+        ...(props.tableLayout?.width === "fixed" &&
+          !props.tableLayout?.columnsResizable && {
+            width: header.getSize(),
+          }),
+        ...(props.tableLayout?.columnsPinnable &&
+          column.getCanPin() &&
+          getPinningStyles(column)),
+        ...(props.tableLayout?.columnsResizable && {
+          width: `calc(var(--header-${header.id}-size) * 1px)`,
+        }),
+        ...(dndStyle ? dndStyle : null),
+      }}
+      data-pinned={isPinned || undefined}
+      data-last-col={
+        isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined
+      }
+      className={cn(
+        "text-secondary-foreground/80 h-9 relative text-left align-middle font-normal rtl:text-right [&:has([role=checkbox])]:pe-0",
+        headerCellSpacing,
+        props.tableLayout?.cellBorder && "border-e",
+        props.tableLayout?.columnsResizable &&
+          column.getCanResize() &&
+          "overflow-visible",
+        props.tableLayout?.columnsResizable &&
+          column.getCanResize() &&
+          isLastVisibleColumn &&
+          "pe-8",
+        props.tableLayout?.columnsPinnable &&
+          column.getCanPin() &&
+          "[&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s!",
+        header.column.columnDef.meta?.headerClassName,
+        column.getIndex() === 0 ||
+          column.getIndex() === header.headerGroup.headers.length - 1
+          ? props.tableClassNames?.edgeCell
+          : ""
+      )}
+    >
+      {children}
+    </th>
+  )
+}
+
+function DataGridTableHeadRowCellResize<TData>({
+  header,
+}: {
+  header: Header<TData, unknown>
+}) {
+  const { props, table } = useDataGrid()
+  const { column } = header
+  const isLastVisibleColumn =
+    column.getIndex() ===
+    header.getContext().table.getVisibleLeafColumns().length - 1
+  const isResizeModeOnEnd =
+    (props.tableLayout?.columnsResizeMode ?? table.options.columnResizeMode) ===
+    "onEnd"
+
+  const handleMouseDown = (event: ReactMouseEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (isResizeModeOnEnd) {
+      startDataGridColumnResizeOnEnd(event, header, table)
+      return
+    }
+
+    header.getResizeHandler()(event)
+  }
+
+  const handleTouchStart = (event: ReactTouchEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (isResizeModeOnEnd) {
+      startDataGridColumnResizeOnEnd(event, header, table)
+      return
+    }
+
+    header.getResizeHandler()(event)
+  }
+
+  return (
+    <div
+      {...{
+        onDoubleClick: () => column.resetSize(),
+        onMouseDown: handleMouseDown,
+        onTouchStart: handleTouchStart,
+        className: cn(
+          "absolute top-0 h-full cursor-col-resize user-select-none touch-none z-10 flex",
+          isLastVisibleColumn
+            ? "end-0 w-5 justify-end before:hidden"
+            : "-end-2 w-5 justify-center before:absolute before:inset-y-0 before:w-px before:-translate-x-px before:bg-border",
+          column.getIsResizing() &&
+            (isResizeModeOnEnd
+              ? "opacity-100"
+              : isLastVisibleColumn
+                ? "before:absolute before:end-0 before:block before:inset-y-0 before:w-0.5 before:bg-primary opacity-100"
+                : "before:block before:bg-primary before:w-0.5 opacity-100")
+        ),
+      }}
+    />
+  )
+}
+
+function DataGridTableResizeIndicator({
+  viewportElement,
+}: {
+  viewportElement: HTMLDivElement | null
+}) {
+  const { props, table } = useDataGrid()
+  const columnSizingInfo = table.getState().columnSizingInfo
+  const resizingColumnId = columnSizingInfo.isResizingColumn
+  const resizeMode =
+    props.tableLayout?.columnsResizeMode ?? table.options.columnResizeMode
+
+  if (
+    !props.tableLayout?.columnsResizable ||
+    resizeMode !== "onEnd" ||
+    !resizingColumnId
+  ) {
+    return null
+  }
+
+  const resizingHeader = table
+    .getFlatHeaders()
+    .find(
+      (header) =>
+        header.column.id === resizingColumnId || header.id === resizingColumnId
+    )
+
+  if (!resizingHeader) return null
+
+  const deltaOffset = columnSizingInfo.deltaOffset ?? 0
+  const headerHeight =
+    viewportElement
+      ?.querySelector('[data-slot="data-grid-table"] thead')
+      ?.getBoundingClientRect().height ?? 0
+  const indicatorLeft =
+    typeof columnSizingInfo.startOffset === "number" && viewportElement
+      ? columnSizingInfo.startOffset -
+        viewportElement.getBoundingClientRect().left
+      : resizingHeader.getStart() + resizingHeader.getSize()
+
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-y-0 z-20"
+      style={{
+        left: indicatorLeft,
+        transform: `translateX(${deltaOffset}px)`,
+      }}
+    >
+      <div className="bg-primary/85 absolute inset-y-0 left-0 w-px -translate-x-1/2" />
+      <div
+        className="bg-primary absolute top-0 left-0 -translate-x-1/2 rounded-b-sm shadow-xs"
+        style={{
+          width: 5,
+          height: Math.max(headerHeight, 6),
+        }}
+      />
+    </div>
+  )
+}
+
+function DataGridTableRowSpacer() {
+  return <tbody aria-hidden="true" className="h-2"></tbody>
+}
+
+function DataGridTableBody({ children }: { children: ReactNode }) {
+  const { props } = useDataGrid()
+
+  return (
+    <tbody
+      className={cn(
+        "[&_tr:last-child]:border-0",
+        props.tableLayout?.rowRounded &&
+          "[&_td:first-child]:rounded-l-lg",
+        props.tableLayout?.rowRounded &&
+          "[&_td:last-child]:rounded-r-lg",
+        props.tableClassNames?.body
+      )}
+    >
+      {children}
+    </tbody>
+  )
+}
+
+function DataGridTableFoot({ children }: { children: ReactNode }) {
+  const { props } = useDataGrid()
+  return (
+    <tfoot className={cn("border-t", props.tableClassNames?.footer)}>
+      {children}
+    </tfoot>
+  )
+}
+
+function DataGridTableFootRow({ children }: { children: ReactNode }) {
+  const { props } = useDataGrid()
+  return (
+    <tr
+      className={cn(
+        "bg-muted/40 dark:bg-background",
+        props.tableLayout?.cellBorder && "*:last:border-e-0"
+      )}
+    >
+      {children}
+      <DataGridTableFillFootCell />
+    </tr>
+  )
+}
+
+function DataGridTableFootRowCell({
+  children,
+  colSpan,
+  className,
+}: {
+  children?: ReactNode
+  colSpan?: number
+  className?: string
+}) {
+  const { props } = useDataGrid()
+  const spacing = footerCellSpacingVariants({
+    size: props.tableLayout?.dense ? "dense" : "default",
+  })
+  return (
+    <td
+      colSpan={colSpan}
+      className={cn(
+        "text-secondary-foreground/80 border-t align-middle font-medium",
+        spacing,
+        props.tableLayout?.cellBorder && "border-e",
+        className
+      )}
+    >
+      {children}
+    </td>
+  )
+}
+
+function DataGridTableBodyRowSkeleton({ children }: { children: ReactNode }) {
+  const { table, props } = useDataGrid()
+
+  return (
+    <tr
+      className={cn(
+        "hover:bg-muted/40 data-[state=selected]:bg-muted/50",
+        props.onRowClick && "cursor-pointer",
+        !props.tableLayout?.stripped &&
+          props.tableLayout?.rowBorder &&
+          "border-border border-b [&:not(:last-child)>td]:border-b",
+        props.tableLayout?.cellBorder && "*:last:border-e-0",
+        props.tableLayout?.stripped &&
+          "odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent",
+        table.options.enableRowSelection && "*:first:relative",
+        props.tableClassNames?.bodyRow
+      )}
+    >
+      {children}
+      <DataGridTableFillBodyCell />
+    </tr>
+  )
+}
+
+function DataGridTableBodyRowSkeletonCell<TData>({
+  children,
+  column,
+}: {
+  children: ReactNode
+  column: Column<TData>
+}) {
+  const { props, table } = useDataGrid()
+  const bodyCellSpacing = bodyCellSpacingVariants({
+    size: props.tableLayout?.dense ? "dense" : "default",
+  })
+
+  return (
+    <td
+      style={
+        props.tableLayout?.columnsResizable
+          ? { width: `calc(var(--col-${column.id}-size) * 1px)` }
+          : undefined
+      }
+      className={cn(
+        "align-middle",
+        bodyCellSpacing,
+        props.tableLayout?.cellBorder && "border-e",
+        props.tableLayout?.columnsResizable &&
+          column.getCanResize() &&
+          "truncate",
+        column.columnDef.meta?.cellClassName,
+        props.tableLayout?.columnsPinnable &&
+          column.getCanPin() &&
+          '[&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs" [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s!',
+        column.getIndex() === 0 ||
+          column.getIndex() === table.getVisibleFlatColumns().length - 1
+          ? props.tableClassNames?.edgeCell
+          : ""
+      )}
+    >
+      {children}
+    </td>
+  )
+}
+
+function DataGridTableBodyRow<TData>({
+  children,
+  row,
+  pinnedBoundary,
+  rowRef,
+  dndRef,
+  dndStyle,
+}: {
+  children: ReactNode
+  row: Row<TData>
+  pinnedBoundary?: DataGridTablePinnedBoundary
+  rowRef?: React.Ref<HTMLTableRowElement>
+  dndRef?: React.Ref<HTMLTableRowElement>
+  dndStyle?: CSSProperties
+}) {
+  const { props, table } = useDataGrid()
+  const isRowPinned = row.getIsPinned()
+
+  return (
+    <tr
+      ref={(node) => {
+        assignRef(rowRef, node)
+        assignRef(dndRef, node)
+      }}
+      style={{ ...(dndStyle ? dndStyle : null) }}
+      data-state={
+        table.options.enableRowSelection && row.getIsSelected()
+          ? "selected"
+          : undefined
+      }
+      data-row-pinned={isRowPinned || undefined}
+      data-row-pinned-boundary={pinnedBoundary}
+      onClick={() => props.onRowClick && props.onRowClick(row.original)}
+      className={cn(
+        "hover:bg-muted/40 data-[state=selected]:bg-muted/50",
+        props.onRowClick && "cursor-pointer",
+        !props.tableLayout?.stripped &&
+          props.tableLayout?.rowBorder &&
+          "border-border border-b [&:not(:last-child)>td]:border-b",
+        props.tableLayout?.cellBorder && "*:last:border-e-0",
+        props.tableLayout?.stripped &&
+          "odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent",
+        table.options.enableRowSelection && "*:first:relative",
+        props.tableLayout?.rowsPinnable &&
+          isRowPinned &&
+          "bg-muted/30 hover:bg-muted/50",
+        pinnedBoundary === "top" && "[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)]",
+        pinnedBoundary === "bottom" &&
+          "[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)]",
+        props.tableClassNames?.bodyRow
+      )}
+    >
+      {children}
+      <DataGridTableFillBodyCell />
+    </tr>
+  )
+}
+
+function DataGridTableBodyRowExpandded<TData>({ row }: { row: Row<TData> }) {
+  const { props, table } = useDataGrid()
+
+  return (
+    <tr
+      className={cn(
+        props.tableLayout?.rowBorder && "[&:not(:last-child)>td]:border-b"
+      )}
+    >
+      <td
+        colSpan={
+          row.getVisibleCells().length +
+          (props.tableLayout?.columnsResizable ? 1 : 0)
+        }
+      >
+        {table
+          .getAllColumns()
+          .find((column) => column.columnDef.meta?.expandedContent)
+          ?.columnDef.meta?.expandedContent?.(row.original)}
+      </td>
+    </tr>
+  )
+}
+
+function DataGridTableBodyRowCell<TData>({
+  children,
+  cell,
+  dndRef,
+  dndStyle,
+}: {
+  children: ReactNode
+  cell: Cell<TData, unknown>
+  dndRef?: React.Ref<HTMLTableCellElement>
+  dndStyle?: CSSProperties
+}) {
+  const { props } = useDataGrid()
+
+  const { column, row } = cell
+  const isPinned = column.getIsPinned()
+  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left")
+  const isFirstRightPinned =
+    isPinned === "right" && column.getIsFirstColumn("right")
+  const bodyCellSpacing = bodyCellSpacingVariants({
+    size: props.tableLayout?.dense ? "dense" : "default",
+  })
+
+  return (
+    <td
+      key={cell.id}
+      ref={dndRef}
+      {...(props.tableLayout?.columnsDraggable && !isPinned ? { cell } : {})}
+      style={{
+        ...(props.tableLayout?.columnsPinnable &&
+          column.getCanPin() &&
+          getPinningStyles(column)),
+        ...(props.tableLayout?.columnsResizable && {
+          width: `calc(var(--col-${column.id}-size) * 1px)`,
+        }),
+        ...(dndStyle ? dndStyle : null),
+      }}
+      data-pinned={isPinned || undefined}
+      data-last-col={
+        isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined
+      }
+      className={cn(
+        "align-middle",
+        bodyCellSpacing,
+        props.tableLayout?.cellBorder && "border-e",
+        props.tableLayout?.columnsResizable &&
+          column.getCanResize() &&
+          "truncate",
+        cell.column.columnDef.meta?.cellClassName,
+        props.tableLayout?.columnsPinnable &&
+          column.getCanPin() &&
+          '[&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs" [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s!',
+        column.getIndex() === 0 ||
+          column.getIndex() === row.getVisibleCells().length - 1
+          ? props.tableClassNames?.edgeCell
+          : ""
+      )}
+    >
+      {children}
+    </td>
+  )
+}
+
+function DataGridTableRenderedRow<TData>({
+  row,
+  pinnedBoundary,
+  rowRef,
+}: {
+  row: Row<TData>
+  pinnedBoundary?: DataGridTablePinnedBoundary
+  rowRef?: React.Ref<HTMLTableRowElement>
+}) {
+  return (
+    <Fragment>
+      <DataGridTableBodyRow
+        row={row}
+        pinnedBoundary={pinnedBoundary}
+        rowRef={rowRef}
+      >
+        {row.getVisibleCells().map((cell: Cell<TData, unknown>) => (
+          <DataGridTableBodyRowCell cell={cell} key={cell.id}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </DataGridTableBodyRowCell>
+        ))}
+      </DataGridTableBodyRow>
+      {row.getIsExpanded() && <DataGridTableBodyRowExpandded row={row} />}
+    </Fragment>
+  )
+}
+
+function DataGridTableEmpty() {
+  const { table, props } = useDataGrid()
+  const visibleColumnCount =
+    table.getVisibleLeafColumns().length +
+    (props.tableLayout?.columnsResizable ? 1 : 0)
+
+  return (
+    <tr>
+      <td
+        colSpan={Math.max(visibleColumnCount, 1)}
+        className="text-muted-foreground text-sm py-6 text-center"
+      >
+        {props.emptyMessage || "No data available"}
+      </td>
+    </tr>
+  )
+}
+
+function DataGridTableLoader() {
+  const { props } = useDataGrid()
+
+  return (
+    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      <div className="text-muted-foreground bg-card rounded-lg text-sm flex items-center gap-2 border px-4 py-2 leading-none font-medium">
+        <Spinner className="size-5 opacity-60" />
+        {props.loadingMessage || "Loading..."}
+      </div>
+    </div>
+  )
+}
+
+function DataGridTableRowPin<TData>({ row }: { row: Row<TData> }) {
+  const isPinned = row.getIsPinned()
+
+  return (
+    <button
+      type="button"
+      aria-label={isPinned ? "Unpin row" : "Pin row"}
+      onClick={() => {
+        if (isPinned) {
+          row.pin(false)
+        } else {
+          row.pin("top")
+        }
+      }}
+      className={cn(
+        "text-muted-foreground hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors",
+        isPinned && "text-primary hover:text-primary/80"
+      )}
+    >
+      {isPinned ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          stroke="none"
+        >
+          <path d="M16 2l4.585 4.586-2.122 2.121L17.05 7.293l-3.535 3.536 1.413 5.658-2.12 2.121-4.244-4.243L4.322 18.6l-1.414-1.41 4.242-4.244-4.243-4.243 2.122-2.121 5.656 1.414 3.536-3.536-1.414-1.414z" />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="12" y1="17" x2="12" y2="22" />
+          <path d="M5 17h14v-1.76a2 2 0 00-1.11-1.79l-1.78-.9A2 2 0 0115 10.76V6h1a2 2 0 000-4H8a2 2 0 000 4h1v4.76a2 2 0 01-1.11 1.79l-1.78.9A2 2 0 005 15.24z" />
+        </svg>
+      )}
+    </button>
+  )
+}
+
+function DataGridTableRowSelect<TData>({ row }: { row: Row<TData> }) {
+  return (
+    <>
+      <div
+        className={cn(
+          "bg-primary absolute inset-s-0 top-0 bottom-0 hidden w-[2px]",
+          row.getIsSelected() && "block"
+        )}
+      ></div>
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="align-[inherit]"
+      />
+    </>
+  )
+}
+
+function DataGridTableRowSelectAll() {
+  const { table, recordCount, isLoading } = useDataGrid()
+
+  const isAllSelected = table.getIsAllPageRowsSelected()
+  const isSomeSelected = table.getIsSomePageRowsSelected()
+
+  return (
+    <Checkbox
+      checked={isAllSelected}
+      indeterminate={isSomeSelected && !isAllSelected}
+      disabled={isLoading || recordCount === 0}
+      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+      aria-label="Select all"
+      className="align-[inherit]"
+    />
+  )
+}
+
+function DataGridTableBodyRows<TData>({ table }: { table: Table<TData> }) {
+  const { isLoading, props } = useDataGrid()
+  const pagination = table.getState().pagination
+
+  if (isLoading && props.loadingMode === "skeleton" && pagination?.pageSize) {
+    return (
+      <>
+        {Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+          <DataGridTableBodyRowSkeleton key={rowIndex}>
+            {table.getVisibleFlatColumns().map((column, colIndex) => (
+              <DataGridTableBodyRowSkeletonCell column={column} key={colIndex}>
+                {column.columnDef.meta?.skeleton}
+              </DataGridTableBodyRowSkeletonCell>
+            ))}
+          </DataGridTableBodyRowSkeleton>
+        ))}
+      </>
+    )
+  }
+
+  if (isLoading && props.loadingMode === "spinner") {
+    return (
+      <tr>
+        <td colSpan={table.getVisibleFlatColumns().length} className="p-8">
+          <div className="flex items-center justify-center">
+            <svg
+              className="text-muted-foreground mr-3 -ml-1 h-5 w-5 animate-spin"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              ></circle>
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            {props.loadingMessage || "Loading..."}
+          </div>
+        </td>
+      </tr>
+    )
+  }
+
+  const resolvedRows = getDataGridTableResolvedRows(
+    table,
+    props.tableLayout?.rowsPinnable
+  )
+
+  if (!resolvedRows.length) return <DataGridTableEmpty />
+
+  return (
+    <>
+      {resolvedRows.map(({ row, pinnedBoundary }) => (
+        <DataGridTableRenderedRow
+          key={row.id}
+          row={row}
+          pinnedBoundary={pinnedBoundary}
+        />
+      ))}
+    </>
+  )
+}
+
+/**
+ * Memoized body rows: skip re-renders during active column resize.
+ * Column widths update via CSS variables on the <table> element,
+ * so the browser handles width changes without React re-renders.
+ */
+const MemoizedDataGridTableBodyRows = memo(
+  DataGridTableBodyRows,
+  (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn
+) as typeof DataGridTableBodyRows
+
+function DataGridTableHeader<TData>() {
+  const { table, props } = useDataGrid()
+
+  return (
+    <DataGridTableViewport>
+      <DataGridTableBase>
+        <DataGridTableHead>
+          {table
+            .getHeaderGroups()
+            .map((headerGroup: HeaderGroup<TData>, index) => {
+              return (
+                <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                  {headerGroup.headers.map((header, index) => {
+                    const { column } = header
+
+                    return (
+                      <DataGridTableHeadRowCell header={header} key={index}>
+                        {header.isPlaceholder ? null : props.tableLayout
+                            ?.columnsResizable && column.getCanResize() ? (
+                          <div className="truncate">
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </div>
+                        ) : (
+                          flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        )}
+                        {props.tableLayout?.columnsResizable &&
+                          column.getCanResize() && (
+                            <DataGridTableHeadRowCellResize header={header} />
+                          )}
+                      </DataGridTableHeadRowCell>
+                    )
+                  })}
+                </DataGridTableHeadRow>
+              )
+            })}
+        </DataGridTableHead>
+      </DataGridTableBase>
+    </DataGridTableViewport>
+  )
+}
+
+function DataGridTable<TData>({
+  footerContent,
+  renderHeader = true,
+}: {
+  footerContent?: ReactNode
+  renderHeader?: boolean
+}) {
+  const { table, props } = useDataGrid()
+
+  return (
+    <DataGridTableViewport>
+      <DataGridTableBase>
+        {renderHeader && (
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => {
+                return (
+                  <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                    {headerGroup.headers.map((header, index) => {
+                      const { column } = header
+
+                      return (
+                        <DataGridTableHeadRowCell header={header} key={index}>
+                          {header.isPlaceholder ? null : props.tableLayout
+                              ?.columnsResizable && column.getCanResize() ? (
+                            <div className="truncate">
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                            </div>
+                          ) : (
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                          )}
+                          {props.tableLayout?.columnsResizable &&
+                            column.getCanResize() && (
+                              <DataGridTableHeadRowCellResize header={header} />
+                            )}
+                        </DataGridTableHeadRowCell>
+                      )
+                    })}
+                  </DataGridTableHeadRow>
+                )
+              })}
+          </DataGridTableHead>
+        )}
+
+        {renderHeader &&
+          (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+        <DataGridTableBody>
+          <MemoizedDataGridTableBodyRows table={table} />
+        </DataGridTableBody>
+
+        {footerContent && (
+          <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+        )}
+      </DataGridTableBase>
+    </DataGridTableViewport>
+  )
+}
+
+export {
+  DataGridTable,
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableBodyRow,
+  DataGridTableBodyRowCell,
+  DataGridTableBodyRowExpandded,
+  DataGridTableRenderedRow,
+  DataGridTableBodyRowSkeleton,
+  DataGridTableBodyRowSkeletonCell,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableFootRow,
+  DataGridTableFootRowCell,
+  DataGridTableHeader,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableLoader,
+  DataGridTableRowPin,
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+  getDataGridTableResolvedRows,
+  getDataGridTableRowSections,
+}
+
+export type { DataGridTablePinnedBoundary }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid.tsx b/apps/web/src/components/reui/data-grid/data-grid.tsx
new file mode 100644
index 0000000..7842ed5
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid.tsx
@@ -0,0 +1,270 @@
+"use client"
+
+import { createContext, ReactNode, useContext, useMemo } from "react"
+import {
+  Column,
+  ColumnFiltersState,
+  RowData,
+  SortingState,
+  Table,
+} from "@tanstack/react-table"
+
+import { cn } from "@cfdm/ui/lib/utils"
+
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    headerTitle?: string
+    headerClassName?: string
+    cellClassName?: string
+    skeleton?: ReactNode
+    expandedContent?: (row: TData) => ReactNode
+  }
+}
+
+/** Label for headers / column visibility: `meta.headerTitle`, string `columnDef.header`, or `column.id`. */
+export function getColumnHeaderLabel<TData, TValue>(
+  column: Column<TData, TValue>
+): string {
+  const meta = column.columnDef.meta as { headerTitle?: string } | undefined
+  if (typeof meta?.headerTitle === "string") return meta.headerTitle
+  const defHeader = column.columnDef.header
+  if (typeof defHeader === "string") return defHeader
+  return String(column.id)
+}
+
+export type DataGridApiFetchParams = {
+  pageIndex: number
+  pageSize: number
+  sorting?: SortingState
+  filters?: ColumnFiltersState
+  searchQuery?: string
+}
+
+export type DataGridApiResponse<T> = {
+  data: T[]
+  empty: boolean
+  pagination: {
+    total: number
+    page: number
+  }
+}
+
+export interface DataGridContextProps<TData extends object> {
+  props: DataGridProps<TData>
+  table: Table<TData>
+  recordCount: number
+  isLoading: boolean
+}
+
+export type DataGridRequestParams = {
+  pageIndex: number
+  pageSize: number
+  sorting?: SortingState
+  columnFilters?: ColumnFiltersState
+}
+
+export interface DataGridProps<TData extends object> {
+  className?: string
+  table?: Table<TData>
+  recordCount: number
+  children?: ReactNode
+  onRowClick?: (row: TData) => void
+  isLoading?: boolean
+  loadingMode?: "skeleton" | "spinner"
+  loadingMessage?: ReactNode | string
+  fetchingMoreMessage?: ReactNode | string
+  allRowsLoadedMessage?: ReactNode | string
+  emptyMessage?: ReactNode | string
+  tableLayout?: {
+    dense?: boolean
+    cellBorder?: boolean
+    rowBorder?: boolean
+    rowRounded?: boolean
+    stripped?: boolean
+    headerBackground?: boolean
+    headerBorder?: boolean
+    headerSticky?: boolean
+    width?: "auto" | "fixed"
+    columnsVisibility?: boolean
+    columnsResizable?: boolean
+    columnsResizeMode?: "onChange" | "onEnd"
+    columnsPinnable?: boolean
+    columnsMovable?: boolean
+    columnsDraggable?: boolean
+    rowsDraggable?: boolean
+    rowsPinnable?: boolean
+  }
+  tableClassNames?: {
+    base?: string
+    header?: string
+    headerRow?: string
+    headerSticky?: string
+    body?: string
+    bodyRow?: string
+    footer?: string
+    edgeCell?: string
+  }
+}
+
+const DataGridContext = createContext<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  DataGridContextProps<any> | undefined
+>(undefined)
+
+function useDataGrid() {
+  const context = useContext(DataGridContext)
+  if (!context) {
+    throw new Error("useDataGrid must be used within a DataGridProvider")
+  }
+  return context
+}
+
+function DataGridProvider<TData extends object>({
+  children,
+  table,
+  ...props
+}: DataGridProps<TData> & { table: Table<TData> }) {
+  const tableState = table.getState()
+  const resolvedColumnsResizeMode =
+    props.tableLayout?.columnsResizeMode ?? "onEnd"
+
+  // Keep resize mode aligned with the DataGrid contract every render so
+  // consumer-level useReactTable options cannot flip it back between drags.
+  if (props.tableLayout?.columnsResizable) {
+    table.options.columnResizeMode = resolvedColumnsResizeMode
+  }
+
+  // Memoize context value so consumers don't re-render during column resize.
+  // Column sizing state is intentionally excluded from deps -- CSS variables
+  // on the <table> element handle width updates without React re-renders.
+  const value = useMemo(
+    () => ({
+      props,
+      table,
+      recordCount: props.recordCount,
+      isLoading: props.isLoading || false,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      table,
+      props.recordCount,
+      props.isLoading,
+      props.loadingMode,
+      props.loadingMessage,
+      props.fetchingMoreMessage,
+      props.allRowsLoadedMessage,
+      props.emptyMessage,
+      props.onRowClick,
+      props.className,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(props.tableLayout),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(props.tableClassNames),
+      tableState.sorting,
+      tableState.pagination,
+      tableState.columnFilters,
+      tableState.rowSelection,
+      tableState.expanded,
+      tableState.columnVisibility,
+      tableState.columnOrder,
+      tableState.columnPinning,
+      tableState.globalFilter,
+    ]
+  )
+
+  return (
+    <DataGridContext.Provider value={value}>
+      {children}
+    </DataGridContext.Provider>
+  )
+}
+
+function DataGrid<TData extends object>({
+  children,
+  table,
+  ...props
+}: DataGridProps<TData>) {
+  const defaultProps: Partial<DataGridProps<TData>> = {
+    loadingMode: "skeleton",
+    tableLayout: {
+      dense: false,
+      cellBorder: false,
+      rowBorder: true,
+      rowRounded: false,
+      stripped: false,
+      headerSticky: false,
+      headerBackground: true,
+      headerBorder: true,
+      width: "fixed",
+      columnsVisibility: false,
+      columnsResizable: false,
+      columnsResizeMode: "onEnd",
+      columnsPinnable: false,
+      columnsMovable: false,
+      columnsDraggable: false,
+      rowsDraggable: false,
+      rowsPinnable: false,
+    },
+    tableClassNames: {
+      base: "",
+      header: "",
+      headerRow: "",
+      headerSticky: "sticky top-0 z-15 bg-background/90 backdrop-blur-xs",
+      body: "",
+      bodyRow: "",
+      footer: "",
+      edgeCell: "",
+    },
+  }
+
+  const mergedProps: DataGridProps<TData> = {
+    ...defaultProps,
+    ...props,
+    tableLayout: {
+      ...defaultProps.tableLayout,
+      ...(props.tableLayout || {}),
+    },
+    tableClassNames: {
+      ...defaultProps.tableClassNames,
+      ...(props.tableClassNames || {}),
+    },
+  }
+
+  // Ensure table is provided
+  if (!table) {
+    throw new Error('DataGrid requires a "table" prop')
+  }
+
+  return (
+    <DataGridProvider table={table} {...mergedProps}>
+      {children}
+    </DataGridProvider>
+  )
+}
+
+function DataGridContainer({
+  children,
+  className,
+  border = true,
+}: {
+  children: ReactNode
+  className?: string
+  border?: boolean
+}) {
+  return (
+    <div
+      data-slot="data-grid"
+      className={cn(
+        "w-full overflow-hidden",
+        border &&
+          "border-border rounded-lg border",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { useDataGrid, DataGridProvider, DataGrid, DataGridContainer }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/date-selector.tsx b/apps/web/src/components/reui/date-selector.tsx
new file mode 100644
index 0000000..ad70a8a
--- /dev/null
+++ b/apps/web/src/components/reui/date-selector.tsx
@@ -0,0 +1,1330 @@
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import {
+  addMonths,
+  format,
+  isBefore,
+  isSameMonth,
+  parse,
+  subMonths,
+} from "date-fns"
+import { DayButton } from "react-day-picker"
+import type { DateRange } from "react-day-picker"
+
+import { useIsMobile } from "@cfdm/ui/hooks/use-mobile"
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button } from "@cfdm/ui/components/button"
+import { Calendar, CalendarDayButton } from "@cfdm/ui/components/calendar"
+import { Input } from "@cfdm/ui/components/input"
+import { ScrollArea } from "@cfdm/ui/components/scroll-area"
+import { Tabs, TabsList, TabsTrigger } from "@cfdm/ui/components/tabs"
+import { CornerUpLeftIcon, CornerUpRightIcon, ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react"
+
+export interface DateSelectorI18nConfig {
+  // Labels
+  selectDate: string
+  apply: string
+  cancel: string
+  clear: string
+  today: string
+  // Filter types
+  filterTypes: {
+    is: string
+    before: string
+    after: string
+    between: string
+  }
+  // Period types
+  periodTypes: {
+    day: string
+    month: string
+    quarter: string
+    halfYear: string
+    year: string
+  }
+  // Months
+  months: string[]
+  monthsShort: string[]
+  // Quarters
+  quarters: string[]
+  // Half years
+  halfYears: string[]
+  // Weekdays
+  weekdays: string[]
+  weekdaysShort: string[]
+  // Placeholders
+  placeholder: string
+  rangePlaceholder: string
+}
+
+export const DEFAULT_DATE_SELECTOR_I18N: DateSelectorI18nConfig = {
+  selectDate: "Select date",
+  apply: "Apply",
+  cancel: "Cancel",
+  clear: "Clear",
+  today: "Today",
+  filterTypes: {
+    is: "is",
+    before: "before",
+    after: "after",
+    between: "between",
+  },
+  periodTypes: {
+    day: "Day",
+    month: "Month",
+    quarter: "Quarter",
+    halfYear: "Half-year",
+    year: "Year",
+  },
+  months: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+  monthsShort: [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ],
+  quarters: ["Q1", "Q2", "Q3", "Q4"],
+  halfYears: ["H1", "H2"],
+  weekdays: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+  weekdaysShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+  placeholder: "Select date...",
+  rangePlaceholder: "Select date range...",
+}
+
+export type DateSelectorPeriodType =
+  | "day"
+  | "month"
+  | "quarter"
+  | "half-year"
+  | "year"
+export type DateSelectorFilterType = "is" | "before" | "after" | "between"
+
+export interface DateSelectorValue {
+  period: DateSelectorPeriodType
+  operator: DateSelectorFilterType
+  startDate?: Date
+  endDate?: Date
+  year?: number
+  month?: number
+  quarter?: number
+  halfYear?: number
+  rangeStart?: { year: number; value: number }
+  rangeEnd?: { year: number; value: number }
+}
+
+export interface DateSelectorContextValue {
+  i18n: DateSelectorI18nConfig
+  variant: "outline" | "default"
+  size: "sm" | "default" | "lg"
+}
+
+const DateSelectorContext = createContext<DateSelectorContextValue>({
+  i18n: DEFAULT_DATE_SELECTOR_I18N,
+  variant: "outline",
+  size: "default",
+})
+
+export const useDateSelectorContext = () => useContext(DateSelectorContext)
+
+export function formatDateValue(
+  value: DateSelectorValue,
+  i18n: DateSelectorI18nConfig = DEFAULT_DATE_SELECTOR_I18N,
+  dayDateFormat: string = "MM/dd/yyyy"
+): string {
+  const {
+    period,
+    startDate,
+    endDate,
+    year,
+    month,
+    quarter,
+    halfYear,
+    rangeStart,
+    rangeEnd,
+  } = value
+
+  if (period === "day") {
+    if (startDate && endDate) {
+      return `${format(startDate, dayDateFormat)} - ${format(endDate, dayDateFormat)}`
+    }
+    if (startDate) {
+      return format(startDate, dayDateFormat)
+    }
+    return ""
+  }
+
+  if (period === "month") {
+    if (rangeStart && rangeEnd) {
+      return `${i18n.monthsShort[rangeStart.value]} ${rangeStart.year} - ${i18n.monthsShort[rangeEnd.value]} ${rangeEnd.year}`
+    }
+    if (year !== undefined && month !== undefined) {
+      return `${i18n.monthsShort[month]} ${year}`
+    }
+    return ""
+  }
+
+  if (period === "quarter") {
+    if (rangeStart && rangeEnd) {
+      return `${i18n.quarters[rangeStart.value]} ${rangeStart.year} - ${i18n.quarters[rangeEnd.value]} ${rangeEnd.year}`
+    }
+    if (year !== undefined && quarter !== undefined) {
+      return `${i18n.quarters[quarter]} ${year}`
+    }
+    return ""
+  }
+
+  if (period === "half-year") {
+    if (rangeStart && rangeEnd) {
+      return `${i18n.halfYears[rangeStart.value]} ${rangeStart.year} - ${i18n.halfYears[rangeEnd.value]} ${rangeEnd.year}`
+    }
+    if (year !== undefined && halfYear !== undefined) {
+      return `${i18n.halfYears[halfYear]} ${year}`
+    }
+    return ""
+  }
+
+  if (period === "year") {
+    if (rangeStart && rangeEnd) {
+      return `${rangeStart.year} - ${rangeEnd.year}`
+    }
+    if (year !== undefined) {
+      return `${year}`
+    }
+    return ""
+  }
+
+  return ""
+}
+
+interface UseDateSelectorOptions {
+  value?: DateSelectorValue
+  onChange?: (value: DateSelectorValue) => void
+  defaultPeriodType?: DateSelectorPeriodType
+  defaultFilterType?: DateSelectorFilterType
+  presetMode?: DateSelectorFilterType
+  allowRange?: boolean
+  yearRange?: number
+  baseYear?: number
+  minYear?: number
+  maxYear?: number
+  periodTypes?: DateSelectorPeriodType[]
+}
+
+export function useDateSelector({
+  value,
+  onChange,
+  defaultPeriodType = "day",
+  defaultFilterType = "is",
+  presetMode,
+  allowRange = true,
+  yearRange = 11,
+  baseYear,
+  minYear,
+  maxYear,
+  periodTypes,
+}: UseDateSelectorOptions) {
+  const currentYear = baseYear ?? new Date().getFullYear()
+
+  const validDefaultPeriodType = useMemo(() => {
+    if (!periodTypes || periodTypes.length === 0) return defaultPeriodType
+    if (periodTypes.includes(defaultPeriodType)) return defaultPeriodType
+    return periodTypes[0]
+  }, [periodTypes, defaultPeriodType])
+
+  // Use presetMode if provided, otherwise use value or default
+  const effectiveFilterType = presetMode ?? value?.operator ?? defaultFilterType
+
+  const [periodType, setPeriodType] = useState<DateSelectorPeriodType>(
+    value?.period || validDefaultPeriodType
+  )
+  const [filterType, setFilterType] =
+    useState<DateSelectorFilterType>(effectiveFilterType)
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    value?.startDate
+  )
+  const [selectedEndDate, setSelectedEndDate] = useState<Date | undefined>(
+    value?.endDate
+  )
+  const [calendarMonth, setCalendarMonth] = useState(
+    value?.startDate || new Date()
+  )
+  const [selectedYear, setSelectedYear] = useState<number | undefined>(
+    value?.year
+  )
+  const [selectedMonth, setSelectedMonth] = useState<number | undefined>(
+    value?.month
+  )
+  const [selectedQuarter, setSelectedQuarter] = useState<number | undefined>(
+    value?.quarter
+  )
+  const [selectedHalfYear, setSelectedHalfYear] = useState<number | undefined>(
+    value?.halfYear
+  )
+  const [rangeStart, setRangeStart] = useState<
+    { year: number; value: number } | undefined
+  >(value?.rangeStart)
+  const [rangeEnd, setRangeEnd] = useState<
+    { year: number; value: number } | undefined
+  >(value?.rangeEnd)
+  const [hoverDate, setHoverDate] = useState<Date | undefined>()
+
+  const years = useMemo(() => {
+    if (minYear !== undefined && maxYear !== undefined) {
+      return Array.from(
+        { length: maxYear - minYear + 1 },
+        (_, i) => minYear + i
+      )
+    }
+    return Array.from(
+      { length: yearRange },
+      (_, i) => currentYear - Math.floor(yearRange / 2) + i
+    )
+  }, [currentYear, yearRange, minYear, maxYear])
+
+  const currentValue = useMemo<DateSelectorValue>(
+    () => ({
+      period: periodType,
+      operator: presetMode ?? filterType,
+      startDate: selectedDate,
+      endDate: selectedEndDate,
+      year: selectedYear,
+      month: selectedMonth,
+      quarter: selectedQuarter,
+      halfYear: selectedHalfYear,
+      rangeStart,
+      rangeEnd,
+    }),
+    [
+      periodType,
+      presetMode,
+      filterType,
+      selectedDate,
+      selectedEndDate,
+      selectedYear,
+      selectedMonth,
+      selectedQuarter,
+      selectedHalfYear,
+      rangeStart,
+      rangeEnd,
+    ]
+  )
+
+  const clearSelection = useCallback(() => {
+    setSelectedDate(undefined)
+    setSelectedEndDate(undefined)
+    setSelectedYear(undefined)
+    setSelectedMonth(undefined)
+    setSelectedQuarter(undefined)
+    setSelectedHalfYear(undefined)
+    setRangeStart(undefined)
+    setRangeEnd(undefined)
+  }, [])
+
+  const handleDayClick = useCallback(
+    (day: Date) => {
+      if (filterType === "between" && allowRange) {
+        if (!selectedDate || (selectedDate && selectedEndDate)) {
+          setSelectedDate(day)
+          setSelectedEndDate(undefined)
+        } else {
+          if (isBefore(day, selectedDate)) {
+            setSelectedEndDate(selectedDate)
+            setSelectedDate(day)
+          } else {
+            setSelectedEndDate(day)
+          }
+        }
+      } else {
+        setSelectedDate(day)
+        setSelectedEndDate(undefined)
+      }
+    },
+    [filterType, allowRange, selectedDate, selectedEndDate]
+  )
+
+  const handlePeriodSelect = useCallback(
+    (year: number, value: number) => {
+      if (filterType === "between" && allowRange) {
+        if (!rangeStart || (rangeStart && rangeEnd)) {
+          setRangeStart({ year, value })
+          setRangeEnd(undefined)
+          setSelectedYear(year)
+          if (periodType === "month") setSelectedMonth(value)
+          if (periodType === "quarter") setSelectedQuarter(value)
+          if (periodType === "half-year") setSelectedHalfYear(value)
+        } else {
+          const startKey = rangeStart.year * 100 + rangeStart.value
+          const endKey = year * 100 + value
+          if (endKey < startKey) {
+            setRangeEnd(rangeStart)
+            setRangeStart({ year, value })
+          } else {
+            setRangeEnd({ year, value })
+          }
+        }
+      } else {
+        setSelectedYear(year)
+        if (periodType === "month") setSelectedMonth(value)
+        if (periodType === "quarter") setSelectedQuarter(value)
+        if (periodType === "half-year") setSelectedHalfYear(value)
+        setRangeStart(undefined)
+        setRangeEnd(undefined)
+      }
+    },
+    [filterType, allowRange, rangeStart, rangeEnd, periodType]
+  )
+
+  const handleYearSelect = useCallback(
+    (year: number) => {
+      if (filterType === "between" && allowRange) {
+        if (!rangeStart || (rangeStart && rangeEnd)) {
+          setRangeStart({ year, value: 0 })
+          setRangeEnd(undefined)
+          setSelectedYear(year)
+        } else {
+          if (year < rangeStart.year) {
+            setRangeEnd(rangeStart)
+            setRangeStart({ year, value: 0 })
+          } else {
+            setRangeEnd({ year, value: 0 })
+          }
+        }
+      } else {
+        setSelectedYear(year)
+        setRangeStart(undefined)
+        setRangeEnd(undefined)
+      }
+    },
+    [filterType, allowRange, rangeStart, rangeEnd]
+  )
+
+  const handlePeriodTypeChange = useCallback(
+    (type: DateSelectorPeriodType) => {
+      setPeriodType(type)
+      clearSelection()
+    },
+    [clearSelection]
+  )
+
+  const handleFilterTypeChange = useCallback(
+    (type: DateSelectorFilterType) => {
+      // Don't allow changes if presetMode is set
+      if (presetMode !== undefined) return
+      setFilterType(type)
+      clearSelection()
+    },
+    [clearSelection, presetMode]
+  )
+
+  const isInRange = useCallback(
+    (year: number, value: number) => {
+      if (!rangeStart || !rangeEnd) return false
+      const key = year * 100 + value
+      const startKey = rangeStart.year * 100 + rangeStart.value
+      const endKey = rangeEnd.year * 100 + rangeEnd.value
+      return key >= startKey && key <= endKey
+    },
+    [rangeStart, rangeEnd]
+  )
+
+  const isYearInRange = useCallback(
+    (year: number) => {
+      if (!rangeStart || !rangeEnd) return false
+      return year >= rangeStart.year && year <= rangeEnd.year
+    },
+    [rangeStart, rangeEnd]
+  )
+
+  useEffect(() => {
+    if (value) {
+      setPeriodType(value.period || validDefaultPeriodType)
+      // Use presetMode if provided, otherwise use value's operator or default
+      const newFilterType = presetMode ?? value.operator ?? defaultFilterType
+      setFilterType(newFilterType)
+      setSelectedDate(value.startDate)
+      setSelectedEndDate(value.endDate)
+      setSelectedYear(value.year)
+      setSelectedMonth(value.month)
+      setSelectedQuarter(value.quarter)
+      setSelectedHalfYear(value.halfYear)
+      setRangeStart(value.rangeStart)
+      setRangeEnd(value.rangeEnd)
+    }
+  }, [value, validDefaultPeriodType, defaultFilterType, presetMode])
+
+  // Sync filterType when presetMode changes
+  useEffect(() => {
+    if (presetMode !== undefined) {
+      setFilterType(presetMode)
+    }
+  }, [presetMode])
+
+  useEffect(() => {
+    onChange?.(currentValue)
+  }, [currentValue, onChange])
+
+  return {
+    // State
+    periodType,
+    filterType,
+    selectedDate,
+    selectedEndDate,
+    calendarMonth,
+    selectedYear,
+    selectedMonth,
+    selectedQuarter,
+    selectedHalfYear,
+    rangeStart,
+    rangeEnd,
+    hoverDate,
+    years,
+    currentValue,
+    allowRange,
+
+    // Setters
+    setPeriodType: handlePeriodTypeChange,
+    setFilterType: handleFilterTypeChange,
+    setSelectedDate,
+    setSelectedEndDate,
+    setCalendarMonth,
+    setHoverDate,
+
+    // Actions
+    clearSelection,
+    handleDayClick,
+    handlePeriodSelect,
+    handleYearSelect,
+    isInRange,
+    isYearInRange,
+  }
+}
+
+interface DateSelectorFilterToggleProps {
+  value: DateSelectorFilterType
+  onChange: (value: DateSelectorFilterType) => void
+  showBetween?: boolean
+  showIs?: boolean
+  presetMode?: DateSelectorFilterType
+  className?: string
+}
+
+function DateSelectorFilterToggle({
+  value,
+  onChange,
+  showBetween = true,
+  showIs = true,
+  presetMode,
+  className,
+}: DateSelectorFilterToggleProps) {
+  const { i18n } = useDateSelectorContext()
+  const isDisabled = presetMode !== undefined
+
+  return (
+    <Tabs
+      value={value}
+      onValueChange={(newValue) => {
+        if (!isDisabled && newValue) {
+          onChange(newValue as DateSelectorFilterType)
+        }
+      }}
+      className={className}
+    >
+      <TabsList
+        className={cn(
+          "bg-muted/80",
+          isDisabled && "pointer-events-none opacity-50",
+          className
+        )}
+      >
+        {showIs && (
+          <TabsTrigger
+            value="is"
+            aria-label={i18n.filterTypes.is}
+            className="py-1 font-normal"
+          >
+            {i18n.filterTypes.is}
+          </TabsTrigger>
+        )}
+        <TabsTrigger
+          value="before"
+          aria-label={i18n.filterTypes.before}
+          className="py-1 font-normal"
+        >
+          {i18n.filterTypes.before}
+        </TabsTrigger>
+        <TabsTrigger
+          value="after"
+          aria-label={i18n.filterTypes.after}
+          className="py-1 font-normal"
+        >
+          {i18n.filterTypes.after}
+        </TabsTrigger>
+        {showBetween && (
+          <TabsTrigger
+            value="between"
+            aria-label={i18n.filterTypes.between}
+            className="py-1 font-normal"
+          >
+            {i18n.filterTypes.between}
+          </TabsTrigger>
+        )}
+      </TabsList>
+    </Tabs>
+  )
+}
+
+interface DateSelectorDateSelectorPeriodTabsProps {
+  value: DateSelectorPeriodType
+  onChange: (value: DateSelectorPeriodType) => void
+  periodTypes?: DateSelectorPeriodType[]
+  className?: string
+  calendarMonth?: Date
+  onMonthChange?: (date: Date) => void
+  showNavigationButtons?: boolean
+}
+
+function DateSelectorPeriodTabs({
+  value,
+  onChange,
+  periodTypes,
+  className,
+  calendarMonth,
+  onMonthChange,
+  showNavigationButtons = false,
+}: DateSelectorDateSelectorPeriodTabsProps) {
+  const { i18n } = useDateSelectorContext()
+
+  const tabs: { value: DateSelectorPeriodType; label: string }[] = [
+    { value: "day", label: i18n.periodTypes.day },
+    { value: "month", label: i18n.periodTypes.month },
+    { value: "quarter", label: i18n.periodTypes.quarter },
+    { value: "half-year", label: i18n.periodTypes.halfYear },
+    { value: "year", label: i18n.periodTypes.year },
+  ]
+
+  const filteredTabs = periodTypes
+    ? tabs.filter((tab) => periodTypes.includes(tab.value))
+    : tabs
+
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center justify-between gap-3",
+        className
+      )}
+    >
+      <Tabs
+        value={value}
+        onValueChange={(newValue) => {
+          if (newValue) {
+            onChange(newValue as DateSelectorPeriodType)
+          }
+        }}
+      >
+        <TabsList>
+          {filteredTabs.map((tab) => (
+            <TabsTrigger
+              key={tab.value}
+              value={tab.value}
+              aria-label={tab.label}
+              className="px-1 py-1 font-normal sm:px-2.5"
+            >
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      {showNavigationButtons &&
+        value === "day" &&
+        calendarMonth &&
+        onMonthChange && (
+          <div className="flex items-center">
+            {(() => {
+              const today = new Date()
+              const isCurrentMonth = isSameMonth(calendarMonth, today)
+
+              // Only show today button if not on current month
+              if (isCurrentMonth) {
+                return null
+              }
+
+              // Determine direction based on whether calendarMonth is in future or past
+              const isFuture = calendarMonth > today
+
+              return (
+                <Button
+                  variant="ghost"
+                  className="size-8.5"
+                  onClick={() => onMonthChange(new Date())}
+                  title={i18n.today}
+                >
+                  {isFuture ? (
+                    <CornerUpLeftIcon
+                    />
+                  ) : (
+                    <CornerUpRightIcon
+                    />
+                  )}
+                </Button>
+              )
+            })()}
+            <Button
+              variant="ghost"
+              className="size-8.5"
+              onClick={() => onMonthChange(subMonths(calendarMonth, 1))}
+            >
+              <ChevronLeftIcon className="size-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              className="size-8.5"
+              onClick={() => onMonthChange(addMonths(calendarMonth, 1))}
+            >
+              <ChevronRightIcon className="size-4" />
+            </Button>
+          </div>
+        )}
+    </div>
+  )
+}
+
+interface DateSelectorDayPickerProps {
+  currentMonth: Date
+  selectedDate?: Date
+  selectedEndDate?: Date
+  onDayClick: (day: Date) => void
+  isRange: boolean
+  onDayHover?: (day: Date | undefined) => void
+  hoverDate?: Date
+  showTwoMonths?: boolean
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  className?: string
+}
+
+function DateSelectorDayPicker({
+  currentMonth,
+  selectedDate,
+  selectedEndDate,
+  onDayClick,
+  isRange,
+  onDayHover,
+  hoverDate,
+  showTwoMonths = true,
+  weekStartsOn,
+  className,
+}: DateSelectorDayPickerProps) {
+  const { i18n } = useDateSelectorContext()
+  const isMobile = useIsMobile()
+
+  // Convert to react-day-picker format
+  const selected: Date | DateRange | undefined = isRange
+    ? selectedDate && selectedEndDate
+      ? { from: selectedDate, to: selectedEndDate }
+      : selectedDate
+        ? { from: selectedDate, to: hoverDate || selectedDate }
+        : undefined
+    : selectedDate
+
+  const handleSelect = (date: Date | DateRange | undefined) => {
+    if (!date) {
+      return
+    }
+
+    if (isRange && "from" in date) {
+      // For range mode
+      if (date.from && !date.to) {
+        // First click - set start date
+        onDayClick(date.from)
+      } else if (date.from && date.to) {
+        // Range selected - set end date
+        onDayClick(date.to)
+      }
+    } else if (!isRange && date instanceof Date) {
+      onDayClick(date)
+    }
+  }
+
+  // Create custom DayButton component with hover support
+  const CustomDayButton = useCallback(
+    (props: ComponentProps<typeof DayButton>) => {
+      return (
+        <CalendarDayButton
+          {...props}
+          onMouseEnter={() => {
+            if (isRange && onDayHover && props.day) {
+              onDayHover(props.day.date)
+            }
+          }}
+          onMouseLeave={() => {
+            if (isRange && onDayHover) {
+              onDayHover(undefined)
+            }
+          }}
+        />
+      )
+    },
+    [isRange, onDayHover]
+  )
+
+  // Create custom formatters for i18n
+  const formatters = {
+    formatWeekdayName: (date: Date) => {
+      const dayIndex = date.getDay()
+      return i18n.weekdaysShort[dayIndex] || i18n.weekdays[dayIndex]
+    },
+    formatMonthCaption: (date: Date) => {
+      const monthIndex = date.getMonth()
+      const year = date.getFullYear()
+      return `${i18n.months[monthIndex]} ${year}`
+    },
+  }
+
+  return (
+    <div className={cn("flex w-full items-center justify-between", className)}>
+      {isRange ? (
+        <Calendar
+          month={currentMonth}
+          mode="range"
+          selected={selected as DateRange | undefined}
+          onSelect={handleSelect as (range: DateRange | undefined) => void}
+          numberOfMonths={isMobile ? 1 : showTwoMonths ? 2 : 1}
+          showOutsideDays={true}
+          weekStartsOn={weekStartsOn}
+          formatters={formatters}
+          className="w-full shrink-0 p-0"
+          classNames={{
+            months: "flex flex-wrap items-start justify-between gap-5 w-full",
+            month: "flex flex-col items-center min-w-0 flex-1",
+            nav: "hidden",
+          }}
+          components={{
+            DayButton: CustomDayButton,
+          }}
+        />
+      ) : (
+        <Calendar
+          month={currentMonth}
+          mode="single"
+          selected={selected as Date | undefined}
+          onSelect={handleSelect as (date: Date | undefined) => void}
+          numberOfMonths={isMobile ? 1 : showTwoMonths ? 2 : 1}
+          showOutsideDays={true}
+          weekStartsOn={weekStartsOn}
+          formatters={formatters}
+          className="w-full shrink-0 p-0"
+          classNames={{
+            months: "flex flex-wrap items-start justify-between gap-5 w-full",
+            month: "flex flex-col items-center min-w-0 flex-1",
+            nav: "hidden",
+          }}
+          components={{
+            DayButton: CustomDayButton,
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+interface DateSelectorDateSelectorPeriodGridProps {
+  years: number[]
+  items: string[]
+  selectedYear?: number
+  selectedValue?: number
+  rangeStart?: { year: number; value: number }
+  rangeEnd?: { year: number; value: number }
+  isInRange: (year: number, value: number) => boolean
+  onSelect: (year: number, value: number) => void
+  columns: number
+  className?: string
+}
+
+function DateSelectorPeriodGrid({
+  years,
+  items,
+  selectedYear,
+  selectedValue,
+  rangeStart,
+  rangeEnd,
+  isInRange,
+  onSelect,
+  columns,
+  className,
+}: DateSelectorDateSelectorPeriodGridProps) {
+  return (
+    <div className={cn("w-full space-y-6", className)}>
+      {years.map((year) => (
+        <div key={year}>
+          <div className="text-muted-foreground mb-3 text-sm font-medium">
+            {year}
+          </div>
+          <div
+            className="grid gap-2"
+            style={{
+              gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            }}
+          >
+            {items.map((item, index) => {
+              const isSelected =
+                selectedYear === year && selectedValue === index
+              const isRangeStart =
+                rangeStart?.year === year && rangeStart?.value === index
+              const isRangeEnd =
+                rangeEnd?.year === year && rangeEnd?.value === index
+              const inRange = isInRange(year, index)
+
+              return (
+                <Button
+                  key={item}
+                  size="sm"
+                  variant={
+                    isSelected || isRangeStart || isRangeEnd
+                      ? "default"
+                      : "outline"
+                  }
+                  className={cn(
+                    inRange &&
+                      !isSelected &&
+                      !isRangeStart &&
+                      !isRangeEnd &&
+                      "bg-accent dark:bg-accent/60"
+                  )}
+                  onClick={() => onSelect(year, index)}
+                >
+                  {item}
+                </Button>
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+interface DateSelectorYearListProps {
+  years: number[]
+  selectedYear?: number
+  rangeStart?: { year: number; value: number }
+  rangeEnd?: { year: number; value: number }
+  isYearInRange: (year: number) => boolean
+  onSelect: (year: number) => void
+  className?: string
+}
+
+function DateSelectorYearList({
+  years,
+  selectedYear,
+  rangeStart,
+  rangeEnd,
+  isYearInRange,
+  onSelect,
+  className,
+}: DateSelectorYearListProps) {
+  return (
+    <div className={cn("grid grid-cols-2 gap-2", className)}>
+      {years.map((year) => {
+        const isSelected = selectedYear === year && !rangeStart && !rangeEnd
+        const isRangeStart = rangeStart?.year === year
+        const isRangeEnd = rangeEnd?.year === year
+        const inRange = isYearInRange(year)
+
+        return (
+          <Button
+            key={year}
+            size="sm"
+            variant={
+              isSelected || isRangeStart || isRangeEnd ? "default" : "outline"
+            }
+            className={cn(
+              inRange &&
+                !isSelected &&
+                !isRangeStart &&
+                !isRangeEnd &&
+                "bg-accent dark:bg-accent/60"
+            )}
+            onClick={() => onSelect(year)}
+          >
+            {year}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}
+
+export interface DateSelectorProps {
+  value?: DateSelectorValue
+  onChange?: (value: DateSelectorValue) => void
+  allowRange?: boolean
+  periodTypes?: DateSelectorPeriodType[]
+  defaultPeriodType?: DateSelectorPeriodType
+  defaultFilterType?: DateSelectorFilterType
+  presetMode?: DateSelectorFilterType
+  showInput?: boolean
+  showTwoMonths?: boolean
+  label?: string
+  className?: string
+  yearRange?: number
+  baseYear?: number
+  minYear?: number
+  maxYear?: number
+  i18n?: Partial<DateSelectorI18nConfig>
+  inputHint?: string
+  dayDateFormat?: string
+  dayDateFormats?: string[]
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+}
+
+export function DateSelector({
+  value,
+  onChange,
+  allowRange = true,
+  periodTypes,
+  defaultPeriodType = "day",
+  defaultFilterType = "is",
+  presetMode,
+  showInput = true,
+  showTwoMonths = true,
+  label,
+  className,
+  yearRange = 10,
+  baseYear,
+  minYear = 2015,
+  maxYear = 2026,
+  i18n: i18nOverride,
+  inputHint,
+  dayDateFormat = "MM/dd/yyyy",
+  dayDateFormats,
+  weekStartsOn,
+}: DateSelectorProps) {
+  const mergedI18n = useMemo(
+    () => ({ ...DEFAULT_DATE_SELECTOR_I18N, ...i18nOverride }),
+    [i18nOverride]
+  )
+
+  const selector = useDateSelector({
+    value,
+    onChange,
+    defaultPeriodType,
+    defaultFilterType,
+    presetMode,
+    allowRange,
+    yearRange,
+    baseYear,
+    minYear,
+    maxYear,
+    periodTypes,
+  })
+
+  const {
+    periodType,
+    filterType,
+    selectedDate,
+    selectedEndDate,
+    calendarMonth,
+    selectedYear,
+    selectedMonth,
+    selectedQuarter,
+    selectedHalfYear,
+    rangeStart,
+    rangeEnd,
+    hoverDate,
+    years,
+    currentValue,
+    setPeriodType,
+    setFilterType,
+    setCalendarMonth,
+    setHoverDate,
+    clearSelection,
+    handleDayClick,
+    handlePeriodSelect,
+    handleYearSelect,
+    isInRange,
+    isYearInRange,
+  } = selector
+
+  const displayValue = formatDateValue(currentValue, mergedI18n, dayDateFormat)
+  const [inputValue, setInputValue] = useState(displayValue)
+  const [isInputFocused, setIsInputFocused] = useState(false)
+
+  // Sync input value when displayValue changes (but not when user is typing)
+  useEffect(() => {
+    if (!isInputFocused) {
+      setInputValue(displayValue)
+    }
+  }, [displayValue, isInputFocused])
+
+  // Compute date formats for parsing
+  const dateFormats = useMemo(() => {
+    if (dayDateFormats && dayDateFormats.length > 0) {
+      // Use provided formats, with dayDateFormat first if not already included
+      const formats = [...dayDateFormats]
+      if (!formats.includes(dayDateFormat)) {
+        formats.unshift(dayDateFormat)
+      }
+      return formats
+    }
+    // Default formats: use dayDateFormat first, then common alternatives
+    const defaultFormats = [
+      dayDateFormat,
+      "dd/MM/yyyy",
+      "yyyy-MM-dd",
+      "MM-dd-yyyy",
+      "dd-MM-yyyy",
+    ]
+    // Remove duplicates while preserving order
+    return Array.from(new Set(defaultFormats))
+  }, [dayDateFormat, dayDateFormats])
+
+  // Parse input text to DateSelectorValue
+  const parseInputValue = useCallback(
+    (text: string): DateSelectorValue | null => {
+      if (!text.trim()) return null
+
+      const trimmed = text.trim()
+
+      // Try parsing as year (e.g., "2025")
+      const yearMatch = trimmed.match(/^\d{4}$/)
+      if (yearMatch) {
+        const year = parseInt(yearMatch[0])
+        if (year >= 1900 && year <= 2100) {
+          return {
+            period: "year",
+            operator: presetMode ?? filterType,
+            year,
+          }
+        }
+      }
+
+      // Try parsing as quarter (e.g., "Q4", "Q1 2025")
+      const quarterMatch = trimmed.match(/^Q([1-4])(?:\s+(\d{4}))?$/i)
+      if (quarterMatch) {
+        const quarter = parseInt(quarterMatch[1]) - 1
+        const year = quarterMatch[2]
+          ? parseInt(quarterMatch[2])
+          : new Date().getFullYear()
+        if (year >= 1900 && year <= 2100) {
+          return {
+            period: "quarter",
+            operator: presetMode ?? filterType,
+            year,
+            quarter,
+          }
+        }
+      }
+
+      // Try parsing as date using computed formats
+      for (const dateFormat of dateFormats) {
+        try {
+          const parsed = parse(trimmed, dateFormat, new Date())
+          if (!isNaN(parsed.getTime())) {
+            return {
+              period: "day",
+              operator: presetMode ?? filterType,
+              startDate: parsed,
+            }
+          }
+        } catch {
+          // Continue to next format
+        }
+      }
+
+      return null
+    },
+    [filterType, presetMode, dateFormats]
+  )
+
+  const handleInputChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value
+      setInputValue(newValue)
+
+      // Try to parse the input
+      const parsed = parseInputValue(newValue)
+      if (parsed) {
+        onChange?.(parsed)
+      }
+    },
+    [onChange, parseInputValue]
+  )
+
+  const handleInputBlur = useCallback(() => {
+    setIsInputFocused(false)
+    // Reset to display value if parsing failed
+    if (!parseInputValue(inputValue)) {
+      setInputValue(displayValue)
+    }
+  }, [inputValue, displayValue, parseInputValue])
+
+  return (
+    <DateSelectorContext.Provider
+      value={{ i18n: mergedI18n, variant: "outline", size: "default" }}
+    >
+      <div className={cn("w-full space-y-4 sm:w-[470px]", className)}>
+        <div className="flex flex-wrap items-center gap-3">
+          {label && (
+            <h3 className="text-sm font-medium" data-slot="data-selector-label">
+              {label}
+            </h3>
+          )}
+          <DateSelectorFilterToggle
+            value={filterType}
+            onChange={setFilterType}
+            showBetween={allowRange}
+            presetMode={presetMode}
+          />
+        </div>
+        {showInput && (
+          <div className="relative">
+            <Input
+              type="text"
+              value={inputHint ? inputValue : displayValue}
+              readOnly={!inputHint}
+              placeholder={
+                isInputFocused && inputHint ? inputHint : mergedI18n.placeholder
+              }
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={handleInputBlur}
+              onChange={handleInputChange}
+            />
+            {(inputHint ? inputValue : displayValue) && (
+              <button
+                type="button"
+                onClick={clearSelection}
+                className={cn(
+                  // Base Styles
+                  "absolute end-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer rounded-xs",
+                  // Visual States
+                  "opacity-70 transition-opacity hover:opacity-100",
+                  // Focus States
+                  "ring-offset-background focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none"
+                )}
+              >
+                <XIcon className="size-4" />
+              </button>
+            )}
+          </div>
+        )}
+        <DateSelectorPeriodTabs
+          value={periodType}
+          onChange={setPeriodType}
+          periodTypes={periodTypes}
+          calendarMonth={calendarMonth}
+          onMonthChange={setCalendarMonth}
+          showNavigationButtons={periodType === "day"}
+        />
+
+        {periodType === "day" ? (
+          <div className="w-full pb-1">
+            <DateSelectorDayPicker
+              currentMonth={calendarMonth}
+              selectedDate={selectedDate}
+              selectedEndDate={selectedEndDate}
+              onDayClick={handleDayClick}
+              isRange={filterType === "between" && allowRange}
+              onDayHover={setHoverDate}
+              hoverDate={hoverDate}
+              showTwoMonths={showTwoMonths}
+              weekStartsOn={weekStartsOn}
+            />
+          </div>
+        ) : (
+          <div className="-mr-3 w-full">
+            <ScrollArea key={periodType} className="h-[200px] w-full pe-3">
+              {periodType === "month" && (
+                <DateSelectorPeriodGrid
+                  years={years}
+                  items={mergedI18n.monthsShort}
+                  selectedYear={selectedYear}
+                  selectedValue={selectedMonth}
+                  rangeStart={rangeStart}
+                  rangeEnd={rangeEnd}
+                  isInRange={isInRange}
+                  onSelect={handlePeriodSelect}
+                  columns={3}
+                />
+              )}
+
+              {periodType === "quarter" && (
+                <DateSelectorPeriodGrid
+                  years={years}
+                  items={mergedI18n.quarters}
+                  selectedYear={selectedYear}
+                  selectedValue={selectedQuarter}
+                  rangeStart={rangeStart}
+                  rangeEnd={rangeEnd}
+                  isInRange={isInRange}
+                  onSelect={handlePeriodSelect}
+                  columns={4}
+                />
+              )}
+
+              {periodType === "half-year" && (
+                <DateSelectorPeriodGrid
+                  years={years}
+                  items={mergedI18n.halfYears}
+                  selectedYear={selectedYear}
+                  selectedValue={selectedHalfYear}
+                  rangeStart={rangeStart}
+                  rangeEnd={rangeEnd}
+                  isInRange={isInRange}
+                  onSelect={handlePeriodSelect}
+                  columns={2}
+                />
+              )}
+
+              {periodType === "year" && (
+                <DateSelectorYearList
+                  years={years}
+                  selectedYear={selectedYear}
+                  rangeStart={rangeStart}
+                  rangeEnd={rangeEnd}
+                  isYearInRange={isYearInRange}
+                  onSelect={handleYearSelect}
+                />
+              )}
+            </ScrollArea>
+          </div>
+        )}
+      </div>
+    </DateSelectorContext.Provider>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters.tsx b/apps/web/src/components/reui/filters.tsx
new file mode 100644
index 0000000..e19c946
--- /dev/null
+++ b/apps/web/src/components/reui/filters.tsx
@@ -0,0 +1,1924 @@
+import type React from "react"
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { useRender } from "@base-ui/react/use-render"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button } from "@cfdm/ui/components/button"
+import {
+  ButtonGroup,
+  ButtonGroupText,
+} from "@cfdm/ui/components/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@cfdm/ui/components/dropdown-menu"
+import { Input } from "@cfdm/ui/components/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+} from "@cfdm/ui/components/input-group"
+import { Kbd } from "@cfdm/ui/components/kbd"
+import { ScrollArea } from "@cfdm/ui/components/scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@cfdm/ui/components/tooltip"
+import { AlertCircleIcon, XIcon, CheckIcon } from "lucide-react"
+
+// i18n Configuration Interface
+export interface FilterI18nConfig {
+  // UI Labels
+  addFilter: string
+  searchFields: string
+  noFieldsFound: string
+  noResultsFound: string
+  select: string
+  true: string
+  false: string
+  min: string
+  max: string
+  to: string
+  typeAndPressEnter: string
+  selected: string
+  selectedCount: string
+  percent: string
+  defaultCurrency: string
+  defaultColor: string
+  addFilterTitle: string
+
+  // Operators
+  operators: {
+    is: string
+    isNot: string
+    isAnyOf: string
+    isNotAnyOf: string
+    includesAll: string
+    excludesAll: string
+    before: string
+    after: string
+    between: string
+    notBetween: string
+    contains: string
+    notContains: string
+    startsWith: string
+    endsWith: string
+    isExactly: string
+    equals: string
+    notEquals: string
+    greaterThan: string
+    lessThan: string
+    overlaps: string
+    includes: string
+    excludes: string
+    includesAllOf: string
+    includesAnyOf: string
+    empty: string
+    notEmpty: string
+  }
+
+  // Placeholders
+  placeholders: {
+    enterField: (fieldType: string) => string
+    selectField: string
+    searchField: (fieldName: string) => string
+    enterKey: string
+    enterValue: string
+  }
+
+  // Helper functions
+  helpers: {
+    formatOperator: (operator: string) => string
+  }
+
+  // Validation
+  validation: {
+    invalidEmail: string
+    invalidUrl: string
+    invalidTel: string
+    invalid: string
+  }
+}
+
+// Default English i18n configuration
+export const DEFAULT_I18N: FilterI18nConfig = {
+  // UI Labels
+  addFilter: "Filter",
+  searchFields: "Filter...",
+  noFieldsFound: "No filters found.",
+  noResultsFound: "No results found.",
+  select: "Select...",
+  true: "True",
+  false: "False",
+  min: "Min",
+  max: "Max",
+  to: "to",
+  typeAndPressEnter: "Type and press Enter to add tag",
+  selected: "selected",
+  selectedCount: "selected",
+  percent: "%",
+  defaultCurrency: "$",
+  defaultColor: "#000000",
+  addFilterTitle: "Add filter",
+
+  // Operators
+  operators: {
+    is: "is",
+    isNot: "is not",
+    isAnyOf: "is any of",
+    isNotAnyOf: "is not any of",
+    includesAll: "includes all",
+    excludesAll: "excludes all",
+    before: "before",
+    after: "after",
+    between: "between",
+    notBetween: "not between",
+    contains: "contains",
+    notContains: "does not contain",
+    startsWith: "starts with",
+    endsWith: "ends with",
+    isExactly: "is exactly",
+    equals: "equals",
+    notEquals: "not equals",
+    greaterThan: "greater than",
+    lessThan: "less than",
+    overlaps: "overlaps",
+    includes: "includes",
+    excludes: "excludes",
+    includesAllOf: "includes all of",
+    includesAnyOf: "includes any of",
+    empty: "is empty",
+    notEmpty: "is not empty",
+  },
+
+  // Placeholders
+  placeholders: {
+    enterField: (fieldType: string) => `Enter ${fieldType}...`,
+    selectField: "Select...",
+    searchField: (fieldName: string) => `Search ${fieldName.toLowerCase()}...`,
+    enterKey: "Enter key...",
+    enterValue: "Enter value...",
+  },
+
+  // Helper functions
+  helpers: {
+    formatOperator: (operator: string) => operator.replace(/_/g, " "),
+  },
+
+  // Validation
+  validation: {
+    invalidEmail: "Invalid email format",
+    invalidUrl: "Invalid URL format",
+    invalidTel: "Invalid phone format",
+    invalid: "Invalid input format",
+  },
+}
+
+// Context for all Filter component props
+interface FilterContextValue {
+  variant: "solid" | "default"
+  size: "sm" | "default" | "lg"
+  radius: "default" | "full"
+  i18n: FilterI18nConfig
+  className?: string
+  showSearchInput?: boolean
+  trigger?: React.ReactNode
+  allowMultiple?: boolean
+}
+
+const FilterContext = createContext<FilterContextValue>({
+  variant: "default",
+  size: "default",
+  radius: "default",
+  i18n: DEFAULT_I18N,
+  className: undefined,
+  showSearchInput: true,
+  trigger: undefined,
+  allowMultiple: true,
+})
+
+const useFilterContext = () => useContext(FilterContext)
+
+// Container variant for filters wrapper
+const filtersContainerVariants = cva("flex flex-wrap items-center", {
+  variants: {
+    variant: {
+      solid: "gap-2",
+      default: "",
+    },
+    size: {
+      sm: "gap-1.5",
+      default: "gap-2.5",
+      lg: "gap-3.5",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+})
+
+function FilterInput<T = unknown>({
+  field,
+  onBlur,
+  onKeyDown,
+  className,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement> & {
+  className?: string
+  field?: FilterFieldConfig<T>
+}) {
+  const context = useFilterContext()
+  const [isValid, setIsValid] = useState(true)
+  const [validationMessage, setValidationMessage] = useState("")
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (props.autoFocus) {
+      const timer = setTimeout(() => {
+        inputRef.current?.focus()
+      }, 300)
+      return () => clearTimeout(timer)
+    }
+  }, [props.autoFocus])
+
+  // Validation function to check if input matches pattern
+  const validateInput = (value: string, pattern?: string): boolean => {
+    if (!pattern || !value) return true
+    const regex = new RegExp(pattern)
+    return regex.test(value)
+  }
+
+  // Get validation message for field type
+  const getValidationMessage = (): string => {
+    return context.i18n.validation.invalid
+  }
+
+  // Handle blur event - validate when user leaves input
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    const pattern = field?.pattern || props.pattern
+
+    // Only validate if there's a value and (pattern or validation function)
+    if (value && (pattern || field?.validation)) {
+      let valid = true
+      let customMessage = ""
+
+      // If there's a custom validation function, use it
+      if (field?.validation) {
+        const result = field.validation(value)
+        // Handle both boolean and object return types
+        if (typeof result === "boolean") {
+          valid = result
+        } else {
+          valid = result.valid
+          customMessage = result.message || ""
+        }
+      } else if (pattern) {
+        // Use pattern validation
+        valid = validateInput(value, pattern)
+      }
+
+      setIsValid(valid)
+      setValidationMessage(valid ? "" : customMessage || getValidationMessage())
+    } else {
+      // Reset validation state for empty values or no validation
+      setIsValid(true)
+      setValidationMessage("")
+    }
+
+    // Call the original onBlur if provided
+    onBlur?.(e)
+  }
+
+  // Handle keydown event - hide validation error when user starts typing
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Hide validation error when user starts typing (any key except special keys)
+    if (
+      !isValid &&
+      ![
+        "Tab",
+        "Escape",
+        "Enter",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+      ].includes(e.key)
+    ) {
+      setIsValid(true)
+      setValidationMessage("")
+    }
+
+    // Call the original onKeyDown if provided
+    onKeyDown?.(e)
+  }
+
+  return (
+    <InputGroup
+      className={cn(
+        "w-36",
+        context.size == "sm" &&
+          "h-7!",
+        context.size == "default" &&
+          "h-8!",
+        context.size == "lg" &&
+          "h-9!",
+        className
+      )}
+    >
+      {field?.prefix && (
+        <InputGroupAddon>
+          <InputGroupText>{field.prefix}</InputGroupText>
+        </InputGroupAddon>
+      )}
+      <InputGroupInput
+        ref={inputRef}
+        aria-invalid={!isValid}
+        aria-describedby={
+          !isValid && validationMessage
+            ? `${field?.key || "input"}-error`
+            : undefined
+        }
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          context.size == "sm" &&
+            "h-7! text-xs",
+          context.size == "default" &&
+            "h-8!",
+          context.size == "lg" &&
+            "h-9!"
+        )}
+        {...props}
+      />
+      {!isValid && validationMessage && (
+        <InputGroupAddon align="inline-end">
+          <Tooltip>
+            <TooltipTrigger render={<InputGroupButton size="icon-xs" />}>
+              <AlertCircleIcon className="text-destructive size-3.5" />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="text-sm">{validationMessage}</p>
+            </TooltipContent>
+          </Tooltip>
+        </InputGroupAddon>
+      )}
+
+      {field?.suffix && (
+        <InputGroupAddon align="inline-end">
+          <InputGroupText>{field.suffix}</InputGroupText>
+        </InputGroupAddon>
+      )}
+    </InputGroup>
+  )
+}
+
+interface FilterRemoveButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+}
+
+function FilterRemoveButton({
+  className,
+  icon = (
+    <XIcon
+    />
+  ),
+  ...props
+}: FilterRemoveButtonProps) {
+  const context = useFilterContext()
+
+  return (
+    <Button
+      variant="outline"
+      size={
+        context.size === "sm"
+          ? "icon-sm"
+          : context.size === "lg"
+            ? "icon-lg"
+            : "icon"
+      }
+      {...props}
+    >
+      {icon}
+    </Button>
+  )
+}
+
+// Generic types for flexible filter system
+export interface FilterOption<T = unknown> {
+  value: T
+  label: string
+  icon?: React.ReactNode
+  metadata?: Record<string, unknown>
+  className?: string
+}
+
+export interface FilterOperator {
+  value: string
+  label: string
+  supportsMultiple?: boolean
+}
+
+// Custom renderer props interface
+export interface CustomRendererProps<T = unknown> {
+  field: FilterFieldConfig<T>
+  values: T[]
+  onChange: (values: T[]) => void
+  operator: string
+}
+
+// Grouped field configuration interface
+export interface FilterFieldGroup<T = unknown> {
+  group?: string
+  fields: FilterFieldConfig<T>[]
+}
+
+// Union type for both flat and grouped field configurations
+export type FilterFieldsConfig<T = unknown> =
+  | FilterFieldConfig<T>[]
+  | FilterFieldGroup<T>[]
+
+export interface FilterFieldConfig<T = unknown> {
+  key?: string
+  label?: string
+  icon?: React.ReactNode
+  type?: "select" | "multiselect" | "text" | "custom" | "separator"
+  // Group-level configuration
+  group?: string
+  fields?: FilterFieldConfig<T>[]
+  // Field-specific options
+  options?: FilterOption<T>[]
+  operators?: FilterOperator[]
+  customRenderer?: (props: CustomRendererProps<T>) => React.ReactNode
+  customValueRenderer?: (
+    values: T[],
+    options: FilterOption<T>[]
+  ) => React.ReactNode
+  placeholder?: string
+  searchable?: boolean
+  maxSelections?: number
+  min?: number
+  max?: number
+  step?: number
+  prefix?: string | React.ReactNode
+  suffix?: string | React.ReactNode
+  pattern?: string
+  validation?: (
+    value: unknown
+  ) => boolean | { valid: boolean; message?: string }
+  allowCustomValues?: boolean
+  className?: string
+  menuPopupClassName?: string
+  // Grouping options (legacy support)
+  groupLabel?: string
+  // Boolean field options
+  onLabel?: string
+  offLabel?: string
+  // Input event handlers
+  onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  // Default operator to use when creating a filter for this field
+  defaultOperator?: string
+  // Controlled values support for this field
+  value?: T[]
+  onValueChange?: (values: T[]) => void
+}
+
+// Helper functions to handle both flat and grouped field configurations
+const isFieldGroup = <T = unknown,>(
+  item: FilterFieldConfig<T> | FilterFieldGroup<T>
+): item is FilterFieldGroup<T> => {
+  return "fields" in item && Array.isArray(item.fields)
+}
+
+// Helper function to check if a FilterFieldConfig is a group-level configuration
+const isGroupLevelField = <T = unknown,>(
+  field: FilterFieldConfig<T>
+): boolean => {
+  return Boolean(field.group && field.fields)
+}
+
+const flattenFields = <T = unknown,>(
+  fields: FilterFieldsConfig<T>
+): FilterFieldConfig<T>[] => {
+  return fields.reduce<FilterFieldConfig<T>[]>((acc, item) => {
+    if (isFieldGroup(item)) {
+      return [...acc, ...item.fields]
+    }
+    // Handle group-level fields (new structure)
+    if (isGroupLevelField(item)) {
+      return [...acc, ...item.fields!]
+    }
+    return [...acc, item]
+  }, [])
+}
+
+const getFieldsMap = <T = unknown,>(
+  fields: FilterFieldsConfig<T>
+): Record<string, FilterFieldConfig<T>> => {
+  const flatFields = flattenFields(fields)
+  return flatFields.reduce(
+    (acc, field) => {
+      // Only add fields that have a key (skip group-level configurations)
+      if (field.key) {
+        acc[field.key] = field
+      }
+      return acc
+    },
+    {} as Record<string, FilterFieldConfig<T>>
+  )
+}
+
+// Helper function to create operators from i18n config
+const createOperatorsFromI18n = (
+  i18n: FilterI18nConfig
+): Record<string, FilterOperator[]> => ({
+  select: [
+    { value: "is", label: i18n.operators.is },
+    { value: "is_not", label: i18n.operators.isNot },
+    { value: "empty", label: i18n.operators.empty },
+    { value: "not_empty", label: i18n.operators.notEmpty },
+  ],
+  multiselect: [
+    { value: "is_any_of", label: i18n.operators.isAnyOf },
+    { value: "is_not_any_of", label: i18n.operators.isNotAnyOf },
+    { value: "includes_all", label: i18n.operators.includesAll },
+    { value: "excludes_all", label: i18n.operators.excludesAll },
+    { value: "empty", label: i18n.operators.empty },
+    { value: "not_empty", label: i18n.operators.notEmpty },
+  ],
+  text: [
+    { value: "contains", label: i18n.operators.contains },
+    { value: "not_contains", label: i18n.operators.notContains },
+    { value: "starts_with", label: i18n.operators.startsWith },
+    { value: "ends_with", label: i18n.operators.endsWith },
+    { value: "is", label: i18n.operators.isExactly },
+    { value: "empty", label: i18n.operators.empty },
+    { value: "not_empty", label: i18n.operators.notEmpty },
+  ],
+  custom: [
+    { value: "is", label: i18n.operators.is },
+    { value: "after", label: i18n.operators.after },
+    { value: "is", label: i18n.operators.is },
+    { value: "between", label: i18n.operators.between },
+    { value: "empty", label: i18n.operators.empty },
+    { value: "not_empty", label: i18n.operators.notEmpty },
+  ],
+})
+
+// Default operators for different field types (using default i18n)
+export const DEFAULT_OPERATORS: Record<string, FilterOperator[]> =
+  createOperatorsFromI18n(DEFAULT_I18N)
+
+// Helper function to get operators for a field
+const getOperatorsForField = <T = unknown,>(
+  field: FilterFieldConfig<T>,
+  values: T[],
+  i18n: FilterI18nConfig
+): FilterOperator[] => {
+  if (field.operators) return field.operators
+
+  const operators = createOperatorsFromI18n(i18n)
+
+  // Determine field type for operator selection
+  let fieldType = field.type || "select"
+
+  // If it's a select field but has multiple values, treat as multiselect
+  if (fieldType === "select" && values.length > 1) {
+    fieldType = "multiselect"
+  }
+
+  // If it's a multiselect field or has multiselect operators, use multiselect operators
+  if (fieldType === "multiselect" || field.type === "multiselect") {
+    return operators.multiselect
+  }
+
+  return operators[fieldType] || operators.select
+}
+
+interface FilterOperatorDropdownProps<T = unknown> {
+  field: FilterFieldConfig<T>
+  operator: string
+  values: T[]
+  onChange: (operator: string) => void
+}
+
+function FilterOperatorDropdown<T = unknown>({
+  field,
+  operator,
+  values,
+  onChange,
+}: FilterOperatorDropdownProps<T>) {
+  const context = useFilterContext()
+  const operators = getOperatorsForField(field, values, context.i18n)
+
+  // Find the operator label, with fallback to formatted operator name
+  const operatorLabel =
+    operators.find((op) => op.value === operator)?.label ||
+    context.i18n.helpers.formatOperator(operator)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="outline"
+            size={context.size}
+            className="text-muted-foreground hover:text-foreground"
+          >
+            {operatorLabel}
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="start" className="w-fit min-w-fit">
+        {operators.map((op) => (
+          <DropdownMenuItem
+            key={op.value}
+            onClick={() => onChange(op.value)}
+            className={cn(
+              "data-highlighted:bg-accent data-highlighted:text-accent-foreground flex items-center justify-between"
+            )}
+          >
+            <span>{op.label}</span>
+            <CheckIcon className={cn(
+                                "text-primary ms-auto",
+                                op.value === operator ? "opacity-100" : "opacity-0"
+                              )} />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+interface FilterValueSelectorProps<T = unknown> {
+  field: FilterFieldConfig<T>
+  values: T[]
+  onChange: (values: T[]) => void
+  operator: string
+  autoFocus?: boolean
+}
+
+interface SelectOptionsPopoverProps<T = unknown> {
+  field: FilterFieldConfig<T>
+  values: T[]
+  onChange: (values: T[]) => void
+  onClose?: () => void
+  inline?: boolean
+}
+
+function SelectOptionsPopover<T = unknown>({
+  field,
+  values,
+  onChange,
+  onClose,
+  inline = false,
+}: SelectOptionsPopoverProps<T>) {
+  const [open, setOpen] = useState(false)
+  const [searchInput, setSearchInput] = useState("")
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const context = useFilterContext()
+  const baseId = useId()
+
+  useEffect(() => {
+    if (open) {
+      inputRef.current?.focus()
+    }
+  }, [open])
+
+  useEffect(() => {
+    setHighlightedIndex(-1)
+  }, [searchInput, open])
+
+  useEffect(() => {
+    if (highlightedIndex >= 0 && open) {
+      const element = document.getElementById(
+        `${baseId}-item-${highlightedIndex}`
+      )
+      element?.scrollIntoView({ block: "nearest" })
+    }
+  }, [highlightedIndex, open, baseId])
+
+  const isMultiSelect = field.type === "multiselect" || values.length > 1
+  const effectiveValues =
+    (field.value !== undefined ? (field.value as T[]) : values) || []
+
+  const selectedOptions =
+    field.options?.filter((opt) => effectiveValues.includes(opt.value)) || []
+  const unselectedOptions =
+    field.options?.filter((opt) => !effectiveValues.includes(opt.value)) || []
+
+  // Filter options based on search input
+  const filteredSelectedOptions = selectedOptions // Keep all selected visible
+  const filteredUnselectedOptions = unselectedOptions.filter((opt) =>
+    opt.label.toLowerCase().includes(searchInput.toLowerCase())
+  )
+
+  const allFilteredOptions = useMemo(
+    () => [...filteredSelectedOptions, ...filteredUnselectedOptions],
+    [filteredSelectedOptions, filteredUnselectedOptions]
+  )
+
+  const handleClose = () => {
+    setOpen(false)
+    onClose?.()
+  }
+
+  const renderMenuContent = () => (
+    <>
+      {field.searchable !== false && (
+        <>
+          <Input
+            ref={inputRef}
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded={true}
+            aria-haspopup="listbox"
+            aria-controls={`${baseId}-listbox`}
+            aria-activedescendant={
+              highlightedIndex >= 0
+                ? `${baseId}-item-${highlightedIndex}`
+                : undefined
+            }
+            placeholder={context.i18n.placeholders.searchField(
+              field.label || ""
+            )}
+            className={cn(
+              "border-input h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none",
+              "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0",
+              open && "placeholder:text-foreground"
+            )}
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            onBlur={() => open && inputRef.current?.focus()}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown") {
+                e.preventDefault()
+                if (allFilteredOptions.length > 0) {
+                  setHighlightedIndex((prev) =>
+                    prev < allFilteredOptions.length - 1 ? prev + 1 : 0
+                  )
+                }
+              } else if (e.key === "ArrowUp") {
+                e.preventDefault()
+                if (allFilteredOptions.length > 0) {
+                  setHighlightedIndex((prev) =>
+                    prev > 0 ? prev - 1 : allFilteredOptions.length - 1
+                  )
+                }
+              } else if (e.key === "ArrowLeft") {
+                e.preventDefault()
+                setOpen(false)
+              } else if (e.key === "Enter" && highlightedIndex >= 0) {
+                e.preventDefault()
+                const option = allFilteredOptions[highlightedIndex]
+                if (option) {
+                  const isSelected = effectiveValues.includes(option.value as T)
+                  const next = isSelected
+                    ? (effectiveValues.filter((v) => v !== option.value) as T[])
+                    : isMultiSelect
+                      ? ([...effectiveValues, option.value] as T[])
+                      : ([option.value] as T[])
+
+                  if (
+                    !isSelected &&
+                    isMultiSelect &&
+                    field.maxSelections &&
+                    next.length > field.maxSelections
+                  ) {
+                    return
+                  }
+
+                  if (field.onValueChange) {
+                    field.onValueChange(next)
+                  } else {
+                    onChange(next)
+                  }
+                  if (!isMultiSelect) handleClose()
+                }
+              }
+              e.stopPropagation()
+            }}
+          />
+          <DropdownMenuSeparator />
+        </>
+      )}
+      <div className="relative flex max-h-full">
+        <div
+          className="flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain"
+          role="listbox"
+          id={`${baseId}-listbox`}
+        >
+          <ScrollArea className="size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 [&_[data-slot=scroll-area-viewport]]:h-full [&_[data-slot=scroll-area-viewport]]:overscroll-contain">
+            {allFilteredOptions.length === 0 && (
+              <div className="text-muted-foreground py-2 text-center text-sm">
+                {context.i18n.noResultsFound}
+              </div>
+            )}
+
+            {/* Selected items */}
+            {filteredSelectedOptions.length > 0 && (
+              <DropdownMenuGroup className="px-1">
+                {filteredSelectedOptions.map((option, index) => {
+                  const isHighlighted = highlightedIndex === index
+                  const itemId = `${baseId}-item-${index}`
+
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={String(option.value)}
+                      id={itemId}
+                      role="option"
+                      aria-selected={isHighlighted}
+                      data-highlighted={isHighlighted || undefined}
+                      onMouseEnter={() => setHighlightedIndex(index)}
+                      checked={true}
+                      className={cn(
+                        "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+                        option.className
+                      )}
+                      onSelect={(e) => {
+                        if (isMultiSelect) e.preventDefault()
+                      }}
+                      onCheckedChange={() => {
+                        const next = effectiveValues.filter(
+                          (v) => v !== option.value
+                        ) as T[]
+                        if (field.onValueChange) {
+                          field.onValueChange(next)
+                        } else {
+                          onChange(next)
+                        }
+                        if (!isMultiSelect) handleClose()
+                      }}
+                    >
+                      {option.icon && option.icon}
+                      <span className="truncate">{option.label}</span>
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+              </DropdownMenuGroup>
+            )}
+
+            {/* Separator */}
+            {filteredSelectedOptions.length > 0 &&
+              filteredUnselectedOptions.length > 0 && (
+                <DropdownMenuSeparator className="mx-0" />
+              )}
+
+            {/* Available items */}
+            {filteredUnselectedOptions.length > 0 && (
+              <DropdownMenuGroup className="px-1">
+                {filteredUnselectedOptions.map((option, index) => {
+                  const overallIndex = index + filteredSelectedOptions.length
+                  const isHighlighted = highlightedIndex === overallIndex
+                  const itemId = `${baseId}-item-${overallIndex}`
+
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={String(option.value)}
+                      id={itemId}
+                      role="option"
+                      aria-selected={isHighlighted}
+                      data-highlighted={isHighlighted || undefined}
+                      onMouseEnter={() => setHighlightedIndex(overallIndex)}
+                      checked={false}
+                      className={cn(
+                        "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+                        option.className
+                      )}
+                      onSelect={(e) => {
+                        if (isMultiSelect) e.preventDefault()
+                      }}
+                      onCheckedChange={() => {
+                        const next = isMultiSelect
+                          ? ([...effectiveValues, option.value] as T[])
+                          : ([option.value] as T[])
+
+                        if (
+                          isMultiSelect &&
+                          field.maxSelections &&
+                          next.length > field.maxSelections
+                        ) {
+                          return
+                        }
+
+                        if (field.onValueChange) {
+                          field.onValueChange(next)
+                        } else {
+                          onChange(next)
+                        }
+                        if (!isMultiSelect) handleClose()
+                      }}
+                    >
+                      {option.icon && option.icon}
+                      <span className="truncate">{option.label}</span>
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+              </DropdownMenuGroup>
+            )}
+          </ScrollArea>
+        </div>
+      </div>
+    </>
+  )
+
+  if (inline) {
+    return <div className="w-full">{renderMenuContent()}</div>
+  }
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={(open) => {
+        setOpen(open)
+        if (!open) {
+          setTimeout(() => setSearchInput(""), 200)
+        }
+      }}
+    >
+      <DropdownMenuTrigger
+        render={
+          <Button variant="outline" size={context.size}>
+            <div className="flex items-center gap-1.5">
+              {field.customValueRenderer ? (
+                field.customValueRenderer(values, field.options || [])
+              ) : (
+                <>
+                  {selectedOptions.length > 0 && (
+                    <div className="flex items-center -space-x-1.5">
+                      {selectedOptions.slice(0, 3).map((option) => (
+                        <div key={String(option.value)}>{option.icon}</div>
+                      ))}
+                    </div>
+                  )}
+                  {selectedOptions.length === 1
+                    ? selectedOptions[0].label
+                    : selectedOptions.length > 1
+                      ? `${selectedOptions.length} ${context.i18n.selectedCount}`
+                      : context.i18n.select}
+                </>
+              )}
+            </div>
+          </Button>
+        }
+      />
+      <DropdownMenuContent
+        align="start"
+        className={cn("w-[200px] px-0", field.className)}
+      >
+        {renderMenuContent()}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function FilterValueSelector<T = unknown>({
+  field,
+  values,
+  onChange,
+  operator,
+  autoFocus,
+}: FilterValueSelectorProps<T>) {
+  if (operator === "empty" || operator === "not_empty") {
+    return null
+  }
+
+  if (field.customRenderer) {
+    return (
+      <ButtonGroupText className="hover:bg-accent aria-expanded:bg-accent bg-background dark:bg-input/30 text-start whitespace-nowrap outline-hidden">
+        {field.customRenderer({ field, values, onChange, operator })}
+      </ButtonGroupText>
+    )
+  }
+
+  if (field.type === "text") {
+    return (
+      <FilterInput
+        type="text"
+        value={(values[0] as string) || ""}
+        onChange={(e) => onChange([e.target.value] as T[])}
+        placeholder={field.placeholder}
+        pattern={field.pattern}
+        field={field}
+        className={cn("w-36", field.className)}
+        autoFocus={autoFocus}
+      />
+    )
+  }
+
+  if (field.type === "select" || field.type === "multiselect") {
+    return (
+      <SelectOptionsPopover field={field} values={values} onChange={onChange} />
+    )
+  }
+
+  return (
+    <SelectOptionsPopover field={field} values={values} onChange={onChange} />
+  )
+}
+export interface Filter<T = unknown> {
+  id: string
+  field: string
+  operator: string
+  values: T[]
+}
+
+export interface FilterGroup<T = unknown> {
+  id: string
+  label?: string
+  filters: Filter<T>[]
+  fields: FilterFieldConfig<T>[]
+}
+
+interface FiltersContentProps<T = unknown> {
+  filters: Filter<T>[]
+  fields: FilterFieldsConfig<T>
+  onChange: (filters: Filter<T>[]) => void
+}
+
+export const FiltersContent = <T = unknown,>({
+  filters,
+  fields,
+  onChange,
+}: FiltersContentProps<T>) => {
+  const context = useFilterContext()
+  const fieldsMap = useMemo(() => getFieldsMap(fields), [fields])
+
+  const updateFilter = useCallback(
+    (filterId: string, updates: Partial<Filter<T>>) => {
+      onChange(
+        filters.map((filter) => {
+          if (filter.id === filterId) {
+            const updatedFilter = { ...filter, ...updates }
+            if (
+              updates.operator === "empty" ||
+              updates.operator === "not_empty"
+            ) {
+              updatedFilter.values = [] as T[]
+            }
+            return updatedFilter
+          }
+          return filter
+        })
+      )
+    },
+    [filters, onChange]
+  )
+
+  const removeFilter = useCallback(
+    (filterId: string) => {
+      onChange(filters.filter((filter) => filter.id !== filterId))
+    },
+    [filters, onChange]
+  )
+
+  return (
+    <div
+      className={cn(
+        filtersContainerVariants({
+          variant: context.variant,
+          size: context.size,
+        }),
+        context.className
+      )}
+    >
+      {filters.map((filter) => {
+        const field = fieldsMap[filter.field]
+        if (!field) return null
+
+        return (
+          <ButtonGroup key={filter.id}>
+            <ButtonGroupText>
+              {field.icon && field.icon}
+              {field.label}
+            </ButtonGroupText>
+
+            <FilterOperatorDropdown<T>
+              field={field}
+              operator={filter.operator}
+              values={filter.values}
+              onChange={(operator) => updateFilter(filter.id, { operator })}
+            />
+
+            <FilterValueSelector<T>
+              field={field}
+              values={filter.values}
+              onChange={(values) => updateFilter(filter.id, { values })}
+              operator={filter.operator}
+              autoFocus={false}
+            />
+
+            <FilterRemoveButton onClick={() => removeFilter(filter.id)} />
+          </ButtonGroup>
+        )
+      })}
+    </div>
+  )
+}
+
+interface FiltersProps<T = unknown> {
+  filters: Filter<T>[]
+  fields: FilterFieldsConfig<T>
+  onChange: (filters: Filter<T>[]) => void
+  className?: string
+  variant?: "solid" | "default"
+  size?: "sm" | "default" | "lg"
+  radius?: "default" | "full"
+  i18n?: Partial<FilterI18nConfig>
+  showSearchInput?: boolean
+  trigger?: React.ReactNode
+  allowMultiple?: boolean
+  menuPopupClassName?: string
+  collapseAddButton?: boolean
+  enableShortcut?: boolean
+  shortcutKey?: string
+  shortcutLabel?: string
+}
+
+interface FilterSubmenuContentProps<T = unknown> {
+  field: FilterFieldConfig<T>
+  currentValues: T[]
+  isMultiSelect: boolean
+  onToggle: (value: T, isSelected: boolean) => void
+  i18n: FilterI18nConfig
+  isActive?: boolean
+  onActive?: () => void
+  onBack?: () => void
+  onClose?: () => void
+}
+
+function FilterSubmenuContent<T = unknown>({
+  field,
+  currentValues,
+  isMultiSelect,
+  onToggle,
+  i18n,
+  isActive,
+  onActive,
+  onBack,
+  onClose,
+}: FilterSubmenuContentProps<T>) {
+  const [searchInput, setSearchInput] = useState("")
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const baseId = useId()
+
+  useEffect(() => {
+    if (isActive) {
+      if (field.searchable !== false) {
+        inputRef.current?.focus()
+      } else {
+        const listbox = document.getElementById(`${baseId}-listbox`)
+        listbox?.focus()
+      }
+    }
+  }, [isActive, field.searchable, baseId])
+
+  useEffect(() => {
+    setHighlightedIndex(-1)
+  }, [searchInput])
+
+  useEffect(() => {
+    if (highlightedIndex >= 0 && isActive) {
+      const element = document.getElementById(
+        `${baseId}-item-${highlightedIndex}`
+      )
+      element?.scrollIntoView({ block: "nearest" })
+    }
+  }, [highlightedIndex, isActive, baseId])
+
+  const filteredOptions = useMemo(() => {
+    return (
+      field.options?.filter((option) => {
+        const isSelected = currentValues.includes(option.value)
+        if (isSelected) return true
+        if (!searchInput) return true
+        return option.label.toLowerCase().includes(searchInput.toLowerCase())
+      }) || []
+    )
+  }, [field.options, searchInput, currentValues])
+
+  useEffect(() => {
+    if (isActive && filteredOptions.length > 0) {
+      setHighlightedIndex(0)
+    }
+  }, [isActive, filteredOptions.length])
+
+  return (
+    <div className="flex flex-col" onMouseEnter={onActive}>
+      {field.searchable !== false && (
+        <>
+          <Input
+            ref={inputRef}
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded={true}
+            aria-haspopup="listbox"
+            aria-controls={`${baseId}-listbox`}
+            aria-activedescendant={
+              highlightedIndex >= 0
+                ? `${baseId}-item-${highlightedIndex}`
+                : undefined
+            }
+            placeholder={i18n.placeholders.searchField(field.label || "")}
+            className={cn(
+              "h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none",
+              "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0",
+              isActive && "placeholder:text-foreground"
+            )}
+            value={searchInput}
+            onBlur={() => isActive && inputRef.current?.focus()}
+            onChange={(e) => setSearchInput(e.target.value)}
+            onFocus={() => onActive?.()}
+            onMouseEnter={(e) => {
+              onActive?.()
+              e.stopPropagation()
+            }}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown") {
+                e.preventDefault()
+                if (filteredOptions.length > 0) {
+                  setHighlightedIndex((prev) =>
+                    prev < filteredOptions.length - 1 ? prev + 1 : 0
+                  )
+                }
+              } else if (e.key === "ArrowUp") {
+                e.preventDefault()
+                if (filteredOptions.length > 0) {
+                  setHighlightedIndex((prev) =>
+                    prev > 0 ? prev - 1 : filteredOptions.length - 1
+                  )
+                }
+              } else if (e.key === "ArrowLeft") {
+                e.preventDefault()
+                onBack?.()
+              } else if (e.key === "Enter" && highlightedIndex >= 0) {
+                e.preventDefault()
+                const option = filteredOptions[highlightedIndex]
+                if (option) {
+                  onToggle(
+                    option.value as T,
+                    currentValues.includes(option.value)
+                  )
+                  if (!isMultiSelect) {
+                    onBack?.()
+                  }
+                }
+              } else if (e.key === "Escape") {
+                e.preventDefault()
+                onClose?.()
+              }
+              e.stopPropagation()
+            }}
+          />
+          <DropdownMenuSeparator />
+        </>
+      )}
+      <div className="relative flex max-h-full">
+        <div
+          className="flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain outline-hidden"
+          role="listbox"
+          id={`${baseId}-listbox`}
+          tabIndex={field.searchable === false ? 0 : -1}
+          onKeyDown={(e) => {
+            if (field.searchable === false) {
+              if (e.key === "ArrowDown") {
+                e.preventDefault()
+                if (filteredOptions.length > 0) {
+                  setHighlightedIndex((prev) =>
+                    prev < filteredOptions.length - 1 ? prev + 1 : 0
+                  )
+                }
+              } else if (e.key === "ArrowUp") {
+                e.preventDefault()
+                if (filteredOptions.length > 0) {
+                  setHighlightedIndex((prev) =>
+                    prev > 0 ? prev - 1 : filteredOptions.length - 1
+                  )
+                }
+              } else if (e.key === "ArrowLeft") {
+                e.preventDefault()
+                onBack?.()
+              } else if (e.key === "Enter" && highlightedIndex >= 0) {
+                e.preventDefault()
+                const option = filteredOptions[highlightedIndex]
+                if (option) {
+                  onToggle(
+                    option.value as T,
+                    currentValues.includes(option.value)
+                  )
+                  if (!isMultiSelect) {
+                    onBack?.()
+                  }
+                }
+              } else if (e.key === "Escape") {
+                e.preventDefault()
+                onClose?.()
+              }
+              e.stopPropagation()
+            }
+          }}
+        >
+          <ScrollArea className="size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 [&_[data-slot=scroll-area-viewport]]:h-full [&_[data-slot=scroll-area-viewport]]:overscroll-contain">
+            {filteredOptions.length === 0 ? (
+              <div className="text-muted-foreground py-2 text-center text-sm">
+                {i18n.noResultsFound}
+              </div>
+            ) : (
+              <DropdownMenuGroup>
+                {filteredOptions.map((option, index) => {
+                  const isSelected = currentValues.includes(option.value)
+                  const isHighlighted = highlightedIndex === index
+                  const itemId = `${baseId}-item-${index}`
+
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={String(option.value)}
+                      id={itemId}
+                      role="option"
+                      aria-selected={isHighlighted}
+                      data-highlighted={isHighlighted || undefined}
+                      onMouseEnter={() => setHighlightedIndex(index)}
+                      checked={isSelected}
+                      className={cn(
+                        "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+                        option.className
+                      )}
+                      onSelect={(e) => {
+                        if (isMultiSelect) e.preventDefault()
+                      }}
+                      onCheckedChange={() =>
+                        onToggle(option.value as T, isSelected)
+                      }
+                    >
+                      {option.icon && option.icon}
+                      <span className="truncate">{option.label}</span>
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+              </DropdownMenuGroup>
+            )}
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function Filters<T = unknown>({
+  filters,
+  fields,
+  onChange,
+  className,
+  variant = "default",
+  size = "default",
+  radius = "default",
+  i18n,
+  showSearchInput = true,
+  trigger,
+  allowMultiple = true,
+  menuPopupClassName,
+  enableShortcut = false,
+  shortcutKey = "f",
+  shortcutLabel = "F",
+}: FiltersProps<T>) {
+  const [addFilterOpen, setAddFilterOpen] = useState(false)
+  const [menuSearchInput, setMenuSearchInput] = useState("")
+  const [activeMenu, setActiveMenu] = useState<string>("root")
+  const [openSubMenu, setOpenSubMenu] = useState<string | null>(null)
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const [lastAddedFilterId, setLastAddedFilterId] = useState<string | null>(
+    null
+  )
+  const rootInputRef = useRef<HTMLInputElement>(null)
+  const rootId = useId()
+
+  useEffect(() => {
+    if (!enableShortcut) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (
+        e.key.toLowerCase() === shortcutKey.toLowerCase() &&
+        !addFilterOpen &&
+        !(
+          document.activeElement instanceof HTMLInputElement ||
+          document.activeElement instanceof HTMLTextAreaElement
+        )
+      ) {
+        e.preventDefault()
+        setAddFilterOpen(true)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [enableShortcut, shortcutKey, addFilterOpen])
+
+  useEffect(() => {
+    if (addFilterOpen && activeMenu === "root") {
+      rootInputRef.current?.focus()
+    }
+  }, [addFilterOpen, activeMenu])
+
+  useEffect(() => {
+    setHighlightedIndex(-1)
+  }, [menuSearchInput])
+
+  useEffect(() => {
+    if (highlightedIndex >= 0 && addFilterOpen) {
+      const element = document.getElementById(
+        `${rootId}-item-${highlightedIndex}`
+      )
+      element?.scrollIntoView({ block: "nearest" })
+    }
+  }, [highlightedIndex, addFilterOpen, rootId])
+
+  useEffect(() => {
+    if (!addFilterOpen) {
+      setOpenSubMenu(null)
+    }
+  }, [addFilterOpen])
+
+  // Track which filter instance is being built in the current Add Filter menu session
+  // Maps fieldKey -> unique filterId created during this open session
+  const [sessionFilterIds, setSessionFilterIds] = useState<
+    Record<string, string>
+  >({})
+
+  useEffect(() => {
+    if (lastAddedFilterId) {
+      const timer = setTimeout(() => {
+        setLastAddedFilterId(null)
+      }, 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [lastAddedFilterId])
+
+  const mergedI18n: FilterI18nConfig = {
+    ...DEFAULT_I18N,
+    ...i18n,
+    operators: { ...DEFAULT_I18N.operators, ...i18n?.operators },
+    placeholders: { ...DEFAULT_I18N.placeholders, ...i18n?.placeholders },
+    validation: { ...DEFAULT_I18N.validation, ...i18n?.validation },
+  }
+
+  const fieldsMap = useMemo(() => getFieldsMap(fields), [fields])
+
+  const updateFilter = useCallback(
+    (filterId: string, updates: Partial<Filter<T>>) => {
+      onChange(
+        filters.map((filter) => {
+          if (filter.id === filterId) {
+            const updatedFilter = { ...filter, ...updates }
+            if (
+              updates.operator === "empty" ||
+              updates.operator === "not_empty"
+            ) {
+              updatedFilter.values = [] as T[]
+            }
+            return updatedFilter
+          }
+          return filter
+        })
+      )
+    },
+    [filters, onChange]
+  )
+
+  const removeFilter = useCallback(
+    (filterId: string) => {
+      onChange(filters.filter((filter) => filter.id !== filterId))
+    },
+    [filters, onChange]
+  )
+
+  const addFilter = useCallback(
+    (fieldKey: string) => {
+      const field = fieldsMap[fieldKey]
+      if (field && field.key) {
+        const defaultOperator =
+          field.defaultOperator ||
+          (field.type === "multiselect" ? "is_any_of" : "is")
+        const defaultValues: unknown[] = field.type === "text" ? [""] : []
+        const newFilter = createFilter<T>(
+          fieldKey,
+          defaultOperator,
+          defaultValues as T[]
+        )
+        setLastAddedFilterId(newFilter.id)
+        onChange([...filters, newFilter])
+        setAddFilterOpen(false)
+        setMenuSearchInput("")
+      }
+    },
+    [fieldsMap, filters, onChange]
+  )
+
+  useEffect(() => {
+    if (addFilterOpen && activeMenu === "root") {
+      rootInputRef.current?.focus()
+    }
+  }, [addFilterOpen, activeMenu])
+
+  const selectableFields = useMemo(() => {
+    const flatFields = flattenFields(fields)
+    return flatFields.filter((field) => {
+      if (!field.key || field.type === "separator") return false
+      if (allowMultiple) return true
+      return !filters.some((filter) => filter.field === field.key)
+    })
+  }, [fields, filters, allowMultiple])
+
+  const filteredFields = useMemo(() => {
+    return selectableFields.filter(
+      (f) =>
+        !menuSearchInput ||
+        f.label?.toLowerCase().includes(menuSearchInput.toLowerCase())
+    )
+  }, [selectableFields, menuSearchInput])
+
+  useEffect(() => {
+    if (addFilterOpen && filteredFields.length > 0) {
+      setHighlightedIndex(0)
+    }
+  }, [addFilterOpen, filteredFields.length])
+
+  const triggerButton = useRender({
+    render: trigger as React.ReactElement,
+    defaultTagName: "button",
+  })
+
+  return (
+    <FilterContext.Provider
+      value={{
+        variant,
+        size,
+        radius,
+        i18n: mergedI18n,
+        className,
+        trigger,
+        allowMultiple,
+      }}
+    >
+      <div
+        className={cn(filtersContainerVariants({ variant, size }), className)}
+      >
+        {selectableFields.length > 0 && (
+          <DropdownMenu
+            open={addFilterOpen}
+            onOpenChange={(open) => {
+              setAddFilterOpen(open)
+              if (!open) {
+                setMenuSearchInput("")
+                setSessionFilterIds({})
+              } else {
+                setActiveMenu("root")
+              }
+            }}
+          >
+            <DropdownMenuTrigger render={triggerButton} />
+            <DropdownMenuContent
+              className={cn("w-[220px]", menuPopupClassName)}
+              align="start"
+            >
+              {showSearchInput && (
+                <>
+                  <div className="relative">
+                    <Input
+                      ref={rootInputRef}
+                      role="combobox"
+                      aria-controls={`${rootId}-listbox`}
+                      aria-activedescendant={
+                        highlightedIndex >= 0
+                          ? `${rootId}-item-${highlightedIndex}`
+                          : undefined
+                      }
+                      placeholder={mergedI18n.searchFields}
+                      className={cn(
+                        "h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none",
+                        "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0",
+                        activeMenu === "root" && "placeholder:text-foreground"
+                      )}
+                      value={menuSearchInput}
+                      onFocus={() => setActiveMenu("root")}
+                      onMouseEnter={() => setActiveMenu("root")}
+                      onBlur={() =>
+                        activeMenu === "root" && rootInputRef.current?.focus()
+                      }
+                      onChange={(e) => setMenuSearchInput(e.target.value)}
+                      onClick={(e) => e.stopPropagation()}
+                      onKeyDown={(e) => {
+                        if (e.key === "ArrowDown") {
+                          e.preventDefault()
+                          if (filteredFields.length > 0) {
+                            setHighlightedIndex((prev) =>
+                              prev < filteredFields.length - 1 ? prev + 1 : 0
+                            )
+                          }
+                        } else if (e.key === "ArrowUp") {
+                          e.preventDefault()
+                          if (filteredFields.length > 0) {
+                            setHighlightedIndex((prev) =>
+                              prev > 0 ? prev - 1 : filteredFields.length - 1
+                            )
+                          }
+                        } else if (
+                          (e.key === "ArrowRight" || e.key === "ArrowLeft") &&
+                          highlightedIndex >= 0
+                        ) {
+                          const field = filteredFields[highlightedIndex]
+                          const hasSubMenu =
+                            field &&
+                            (field.type === "select" ||
+                              field.type === "multiselect") &&
+                            field.options?.length
+
+                          if (e.key === "ArrowRight" && hasSubMenu) {
+                            e.preventDefault()
+                            setOpenSubMenu(field.key || null)
+                            setActiveMenu(field.key || "root")
+                          } else if (e.key === "ArrowLeft") {
+                            e.preventDefault()
+                            if (openSubMenu) {
+                              setOpenSubMenu(null)
+                              setActiveMenu("root")
+                            }
+                          }
+                        } else if (e.key === "Enter" && highlightedIndex >= 0) {
+                          e.preventDefault()
+                          const field = filteredFields[highlightedIndex]
+                          if (field.key) {
+                            const hasSubMenu =
+                              (field.type === "select" ||
+                                field.type === "multiselect") &&
+                              field.options?.length
+                            if (!hasSubMenu) {
+                              addFilter(field.key)
+                            } else {
+                              if (openSubMenu === field.key) {
+                                setOpenSubMenu(null)
+                                setActiveMenu("root")
+                              } else {
+                                setOpenSubMenu(field.key)
+                                setActiveMenu(field.key)
+                              }
+                            }
+                          }
+                        } else if (e.key === "Escape") {
+                          setAddFilterOpen(false)
+                        }
+                        e.stopPropagation()
+                      }}
+                    />
+                    {enableShortcut && shortcutLabel && (
+                      <Kbd className="bg-background absolute top-1/2 right-2 -translate-y-1/2 border">
+                        {shortcutLabel}
+                      </Kbd>
+                    )}
+                  </div>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+
+              <div className="relative flex max-h-full">
+                <div
+                  className="flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain"
+                  role="listbox"
+                  id={`${rootId}-listbox`}
+                  onMouseEnter={() => setActiveMenu("root")}
+                >
+                  <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:m-0">
+                    {(() => {
+                      if (filteredFields.length === 0) {
+                        return (
+                          <div className="text-muted-foreground py-2 text-center text-sm">
+                            {mergedI18n.noFieldsFound}
+                          </div>
+                        )
+                      }
+
+                      return filteredFields.map((field, index) => {
+                        const isHighlighted = highlightedIndex === index
+                        const itemId = `${rootId}-item-${index}`
+                        const hasSubMenu =
+                          (field.type === "select" ||
+                            field.type === "multiselect") &&
+                          field.options?.length
+
+                        if (hasSubMenu) {
+                          const isMultiSelect = field.type === "multiselect"
+                          const fieldKey = field.key as string
+                          const sessionFilterId = sessionFilterIds[fieldKey]
+                          const sessionFilter = sessionFilterId
+                            ? filters.find((f) => f.id === sessionFilterId)
+                            : null
+                          const currentValues = sessionFilter?.values || []
+
+                          return (
+                            <DropdownMenuSub
+                              key={fieldKey}
+                              open={openSubMenu === fieldKey}
+                              onOpenChange={(open) => {
+                                if (open) {
+                                  setOpenSubMenu(fieldKey)
+                                } else {
+                                  if (openSubMenu === fieldKey) {
+                                    setOpenSubMenu(null)
+                                    setActiveMenu("root")
+                                  }
+                                }
+                              }}
+                            >
+                              <DropdownMenuSubTrigger
+                                id={itemId}
+                                role="option"
+                                aria-selected={isHighlighted}
+                                data-highlighted={isHighlighted || undefined}
+                                onMouseEnter={() => {
+                                  setHighlightedIndex(index)
+                                  setActiveMenu("root")
+                                }}
+                                className="data-popup-open:bg-accent data-popup-open:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground"
+                              >
+                                {field.icon}
+                                <span>{field.label}</span>
+                              </DropdownMenuSubTrigger>
+                              <DropdownMenuSubContent
+                                className="w-[200px]"
+                                side="right"
+                              >
+                                <FilterSubmenuContent
+                                  field={field}
+                                  currentValues={currentValues}
+                                  isMultiSelect={isMultiSelect}
+                                  i18n={mergedI18n}
+                                  isActive={activeMenu === fieldKey}
+                                  onActive={() => {
+                                    if (field.searchable !== false) {
+                                      setActiveMenu(fieldKey)
+                                    }
+                                  }}
+                                  onBack={() => {
+                                    setOpenSubMenu(null)
+                                    setActiveMenu("root")
+                                  }}
+                                  onClose={() => setAddFilterOpen(false)}
+                                  onToggle={(value, isSelected) => {
+                                    if (isMultiSelect) {
+                                      const nextValues = isSelected
+                                        ? (currentValues.filter(
+                                            (v) => v !== value
+                                          ) as T[])
+                                        : ([...currentValues, value] as T[])
+
+                                      if (sessionFilter) {
+                                        if (nextValues.length === 0) {
+                                          onChange(
+                                            filters.filter(
+                                              (f) => f.id !== sessionFilter.id
+                                            )
+                                          )
+                                          setSessionFilterIds((prev) => ({
+                                            ...prev,
+                                            [fieldKey]: "",
+                                          }))
+                                        } else {
+                                          onChange(
+                                            filters.map((f) =>
+                                              f.id === sessionFilter.id
+                                                ? { ...f, values: nextValues }
+                                                : f
+                                            )
+                                          )
+                                        }
+                                      } else {
+                                        const newFilter = createFilter<T>(
+                                          fieldKey,
+                                          field.defaultOperator || "is_any_of",
+                                          nextValues
+                                        )
+                                        onChange([...filters, newFilter])
+                                        setSessionFilterIds((prev) => ({
+                                          ...prev,
+                                          [fieldKey]: newFilter.id,
+                                        }))
+                                      }
+                                    } else {
+                                      const newFilter = createFilter<T>(
+                                        fieldKey,
+                                        field.defaultOperator || "is",
+                                        [value] as T[]
+                                      )
+                                      setLastAddedFilterId(newFilter.id)
+                                      onChange([...filters, newFilter])
+                                      setAddFilterOpen(false)
+                                    }
+                                  }}
+                                />
+                              </DropdownMenuSubContent>
+                            </DropdownMenuSub>
+                          )
+                        }
+
+                        return (
+                          <DropdownMenuItem
+                            key={field.key}
+                            id={itemId}
+                            role="option"
+                            aria-selected={isHighlighted}
+                            data-highlighted={isHighlighted || undefined}
+                            onMouseEnter={() => setHighlightedIndex(index)}
+                            onClick={() => field.key && addFilter(field.key)}
+                            className="data-highlighted:bg-accent data-highlighted:text-accent-foreground"
+                          >
+                            {field.icon}
+                            <span>{field.label}</span>
+                          </DropdownMenuItem>
+                        )
+                      })
+                    })()}
+                  </ScrollArea>
+                </div>
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {filters.map((filter) => {
+          const field = fieldsMap[filter.field]
+          if (!field) return null
+          return (
+            <ButtonGroup key={filter.id}>
+              <ButtonGroupText className="bg-background dark:bg-input/30">
+                {field.icon && field.icon}
+                {field.label}
+              </ButtonGroupText>
+              <FilterOperatorDropdown<T>
+                field={field}
+                operator={filter.operator}
+                values={filter.values}
+                onChange={(operator) => updateFilter(filter.id, { operator })}
+              />
+              <FilterValueSelector<T>
+                field={field}
+                values={filter.values}
+                operator={filter.operator}
+                onChange={(values) => updateFilter(filter.id, { values })}
+                autoFocus={filter.id === lastAddedFilterId}
+              />
+              <FilterRemoveButton onClick={() => removeFilter(filter.id)} />
+            </ButtonGroup>
+          )
+        })}
+      </div>
+    </FilterContext.Provider>
+  )
+}
+
+export const createFilter = <T = unknown,>(
+  field: string,
+  operator?: string,
+  values: T[] = []
+): Filter<T> => ({
+  id: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+  field,
+  operator: operator || "is",
+  values,
+})
+
+export const createFilterGroup = <T = unknown,>(
+  id: string,
+  label: string,
+  fields: FilterFieldConfig<T>[],
+  initialFilters: Filter<T>[] = []
+): FilterGroup<T> => ({
+  id,
+  label,
+  filters: initialFilters,
+  fields,
+})
\ No newline at end of file
diff --git a/apps/web/src/components/reui/number-field.tsx b/apps/web/src/components/reui/number-field.tsx
new file mode 100644
index 0000000..e12c156
--- /dev/null
+++ b/apps/web/src/components/reui/number-field.tsx
@@ -0,0 +1,258 @@
+import { createContext, type ReactNode, useContext, useId } from "react"
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Label } from "@cfdm/ui/components/label"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+const NumberFieldContext = createContext<{
+  fieldId: string
+  size: "sm" | "default" | "lg"
+} | null>(null)
+
+const numberFieldGroupVariants = cva(
+  "relative flex w-full justify-between border border-input data-disabled:pointer-events-none data-disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-within:has-aria-invalid:border-destructive focus-within:has-aria-invalid:ring-destructive/20 dark:focus-within:has-aria-invalid:ring-destructive/40 rounded-lg bg-transparent dark:bg-input/30 transition-colors focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-3",
+  {
+    variants: {
+      size: {
+        sm: "h-7 text-sm",
+        default:
+          "h-8 text-sm",
+        lg: "h-9 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const numberFieldButtonVariants = cva(
+  "relative flex shrink-0 cursor-pointer items-center justify-center transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent",
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        default:
+          "px-2 [&_svg:not([class*='size-'])]:size-4",
+        lg: "px-2.5 [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const numberFieldInputVariants = cva(
+  "w-full min-w-0 flex-1 bg-transparent text-center tabular-nums outline-none",
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-0.5",
+        default:
+          "px-2.5 py-1",
+        lg: "px-2.5 py-1.5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+function NumberField({
+  id,
+  className,
+  size = "default",
+  ...props
+}: NumberFieldPrimitive.Root.Props &
+  VariantProps<typeof numberFieldGroupVariants>) {
+  const generatedId = useId()
+  const fieldId = id ?? generatedId
+  const sizeValue = size ?? "default"
+
+  return (
+    <NumberFieldContext.Provider value={{ fieldId, size: sizeValue }}>
+      <NumberFieldPrimitive.Root
+        className={cn("flex w-full flex-col items-start gap-2", className)}
+        data-size={sizeValue}
+        data-slot="number-field"
+        id={fieldId}
+        {...props}
+      />
+    </NumberFieldContext.Provider>
+  )
+}
+
+function NumberFieldGroup({
+  className,
+  size: sizeProp,
+  ...props
+}: NumberFieldPrimitive.Group.Props &
+  Partial<VariantProps<typeof numberFieldGroupVariants>>) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldGroup must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Group
+      className={cn(numberFieldGroupVariants({ size }), className)}
+      data-slot="number-field-group"
+      {...props}
+    />
+  )
+}
+
+function NumberFieldDecrement({
+  className,
+  size: sizeProp,
+  children,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props &
+  Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+    children?: React.ReactNode
+  }) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldDecrement must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Decrement
+      className={cn(
+        numberFieldButtonVariants({ size }),
+        "rounded-s-lg border-e-0",
+        className
+      )}
+      data-slot="number-field-decrement"
+      {...props}
+    >
+      {children ?? (
+        <MinusIcon
+        />
+      )}
+    </NumberFieldPrimitive.Decrement>
+  )
+}
+
+function NumberFieldIncrement({
+  className,
+  size: sizeProp,
+  children,
+  ...props
+}: NumberFieldPrimitive.Increment.Props &
+  Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+    children?: ReactNode
+  }) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldIncrement must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Increment
+      className={cn(
+        numberFieldButtonVariants({ size }),
+        "rounded-e-lg border-s-0",
+        className
+      )}
+      data-slot="number-field-increment"
+      {...props}
+    >
+      {children ?? (
+        <PlusIcon
+        />
+      )}
+    </NumberFieldPrimitive.Increment>
+  )
+}
+
+function NumberFieldInput({
+  className,
+  size: sizeProp,
+  ...props
+}: NumberFieldPrimitive.Input.Props &
+  Partial<VariantProps<typeof numberFieldInputVariants>>) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldInput must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Input
+      className={cn(numberFieldInputVariants({ size }), className)}
+      data-slot="number-field-input"
+      {...props}
+    />
+  )
+}
+
+function NumberFieldScrubArea({
+  className,
+  label,
+  ...props
+}: NumberFieldPrimitive.ScrubArea.Props & {
+  label: string
+}) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldScrubArea must be used within a NumberField component for accessibility."
+    )
+  }
+
+  return (
+    <NumberFieldPrimitive.ScrubArea
+      className={cn("flex cursor-ew-resize", className)}
+      data-slot="number-field-scrub-area"
+      {...props}
+    >
+      <Label className="cursor-ew-resize" htmlFor={context.fieldId}>
+        {label}
+      </Label>
+      <NumberFieldPrimitive.ScrubAreaCursor className="drop-shadow-[0_1px_1px_#0008] filter">
+        <CursorGrowIcon />
+      </NumberFieldPrimitive.ScrubAreaCursor>
+    </NumberFieldPrimitive.ScrubArea>
+  )
+}
+
+function CursorGrowIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      fill="black"
+      height="14"
+      stroke="white"
+      viewBox="0 0 24 14"
+      width="26"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
+    </svg>
+  )
+}
+
+export {
+  NumberField,
+  NumberFieldScrubArea,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldGroup,
+  NumberFieldInput,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/section-cards-skeleton.tsx b/apps/web/src/components/section-cards-skeleton.tsx
deleted file mode 100644
index 353ee9d..0000000
--- a/apps/web/src/components/section-cards-skeleton.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from '@cfdm/ui/components/card'
-import { Skeleton } from '@cfdm/ui/components/skeleton'
-
-export function SectionCardsSkeleton() {
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {Array.from({ length: 4 }).map((_, index) => (
-          <Card key={index} className="gap-0">
-            <CardHeader>
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-8 w-16" />
-            </CardHeader>
-            <CardFooter>
-              <Skeleton className="h-4 w-32" />
-            </CardFooter>
-          </Card>
-        ))}
-      </div>
-      <div className="grid gap-4 lg:grid-cols-2">
-        {Array.from({ length: 2 }).map((_, index) => (
-          <Card key={index}>
-            <CardHeader>
-              <Skeleton className="h-5 w-48" />
-              <Skeleton className="h-4 w-64" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-48 w-full" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-5 w-48" />
-          <Skeleton className="h-4 w-64" />
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col gap-2">
-            {Array.from({ length: 4 }).map((_, index) => (
-              <Skeleton key={index} className="h-10 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/section-cards.tsx b/apps/web/src/components/section-cards.tsx
index 0cce32e..291a029 100644
--- a/apps/web/src/components/section-cards.tsx
+++ b/apps/web/src/components/section-cards.tsx
@@ -1,147 +1,95 @@
-import { Link } from '@tanstack/react-router'
-import {
-  FolderTreeIcon,
-  GlobeIcon,
-  ServerIcon,
-  ShieldCheckIcon,
-} from 'lucide-react'
-import { StatusBadge } from '@/components/status-badge'
-import { AppButton } from '@/components/app-button'
-import {
-  AppCard,
-  AppCardAction,
-  AppCardContent,
-  AppCardDescription,
-  AppCardFooter,
-  AppCardHeader,
-  AppCardTitle,
-} from '@/components/app-card'
-import {
-  AppItem,
-  AppItemContent,
-  AppItemGroup,
-  AppItemTitle,
-} from '@/components/app-item'
+import type { ReactElement, ReactNode } from 'react'
+import { Card, CardContent } from '@cfdm/ui/components/card'
+import { cn } from '@cfdm/ui/lib/utils'
+import { TruncatedText } from '@/components/truncated-text'
 
-interface SectionCardsProps {
-  domainCount: number
-  certCount: number
-  groupCount: number
-  serviceCount: number
-  certSummary?: [string, number][]
+export interface SectionCardItem {
+  label: ReactNode
+  value: string | number | ReactElement
+  hint?: ReactNode
+  icon?: ReactNode
+  badge?: ReactNode
+  variant?: 'default' | 'warning' | 'destructive'
+  active?: boolean
+  onClick?: () => void
 }
 
-export function SectionCards({
-  domainCount,
-  certCount,
-  groupCount,
-  serviceCount,
-  certSummary,
-}: SectionCardsProps) {
+const VARIANT_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
+  default: '',
+  warning: 'border-warning/50',
+  destructive: 'border-destructive/50',
+}
+
+function sectionGridClass(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'sm:grid-cols-2'
+  if (count === 3) return 'sm:grid-cols-2 lg:grid-cols-3'
+  if (count === 4) return 'sm:grid-cols-2 lg:grid-cols-4'
+  if (count === 5) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5'
+  return 'sm:grid-cols-2 lg:grid-cols-3'
+}
+
+export function SectionCards({ items, className }: { items: SectionCardItem[]; className?: string }) {
   return (
-    <div className="flex flex-col gap-4">
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <AppCard>
-          <AppCardHeader>
-            <AppCardDescription>Домены</AppCardDescription>
-            <AppCardTitle className="text-3xl font-semibold tabular-nums">
-              {domainCount}
-            </AppCardTitle>
-            <AppCardAction>
-              <GlobeIcon className="size-4 text-muted-foreground" />
-            </AppCardAction>
-          </AppCardHeader>
-          <AppCardFooter>
-            <AppButton
-              variant="link"
-              className="h-auto p-0"
-              render={<Link to="/domains" />}
-            >
-              Управление доменами
-            </AppButton>
-          </AppCardFooter>
-        </AppCard>
-        <AppCard>
-          <AppCardHeader>
-            <AppCardDescription>Группы доменов</AppCardDescription>
-            <AppCardTitle className="text-3xl font-semibold tabular-nums">
-              {groupCount}
-            </AppCardTitle>
-            <AppCardAction>
-              <FolderTreeIcon className="size-4 text-muted-foreground" />
-            </AppCardAction>
-          </AppCardHeader>
-          <AppCardFooter>
-            <AppButton
-              variant="link"
-              className="h-auto p-0"
-              render={<Link to="/groups" />}
-            >
-              Канбан групп
-            </AppButton>
-          </AppCardFooter>
-        </AppCard>
-        <AppCard>
-          <AppCardHeader>
-            <AppCardDescription>Сервисы</AppCardDescription>
-            <AppCardTitle className="text-3xl font-semibold tabular-nums">
-              {serviceCount}
-            </AppCardTitle>
-            <AppCardAction>
-              <ServerIcon className="size-4 text-muted-foreground" />
-            </AppCardAction>
-          </AppCardHeader>
-          <AppCardFooter>
-            <AppButton
-              variant="link"
-              className="h-auto p-0"
-              render={<Link to="/services" search={{ domainId: undefined }} />}
-            >
-              Управление сервисами
-            </AppButton>
-          </AppCardFooter>
-        </AppCard>
-        <AppCard>
-          <AppCardHeader>
-            <AppCardDescription>Сертификаты</AppCardDescription>
-            <AppCardTitle className="text-3xl font-semibold tabular-nums">
-              {certCount}
-            </AppCardTitle>
-            <AppCardAction>
-              <ShieldCheckIcon className="size-4 text-muted-foreground" />
-            </AppCardAction>
-          </AppCardHeader>
-          <AppCardFooter>
-            <AppButton
-              variant="link"
-              className="h-auto p-0"
-              render={<Link to="/certificates" />}
-            >
-              Мониторинг сертификатов
-            </AppButton>
-          </AppCardFooter>
-        </AppCard>
-      </div>
-      {certSummary && certSummary.length > 0 ? (
-        <AppCard>
-          <AppCardHeader>
-            <AppCardTitle className="text-base">Статусы сертификатов</AppCardTitle>
-            <AppCardDescription>Сводка по последней проверке</AppCardDescription>
-          </AppCardHeader>
-          <AppCardContent>
-            <AppItemGroup className="gap-2">
-              {certSummary.map(([status, count]) => (
-                <AppItem key={status} variant="outline" size="sm">
-                  <AppItemContent className="flex flex-row items-center justify-between gap-2">
-                    <StatusBadge status={status} />
-                    <AppItemTitle className="font-medium tabular-nums">{count}</AppItemTitle>
-                  </AppItemContent>
-                </AppItem>
-              ))}
-            </AppItemGroup>
-          </AppCardContent>
-        </AppCard>
-      ) : null}
+    <div className={cn('grid gap-3', sectionGridClass(items.length), className)}>
+      {items.map((item, idx) => {
+        const clickable = Boolean(item.onClick)
+        const content = (
+          <CardContent className="flex items-start gap-2.5 px-3 py-2.5">
+            {item.icon ? (
+              <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground">
+                {item.icon}
+              </span>
+            ) : null}
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <div className="flex items-center justify-between gap-2">
+                {typeof item.label === 'string' ? (
+                  <TruncatedText className="text-xs text-muted-foreground">{item.label}</TruncatedText>
+                ) : (
+                  <span className="truncate text-xs text-muted-foreground">{item.label}</span>
+                )}
+                {item.badge ? <span className="shrink-0">{item.badge}</span> : null}
+              </div>
+              <div className="flex min-w-0 items-baseline gap-1.5">
+                <span className="text-lg font-semibold tabular-nums">{item.value}</span>
+                {item.hint ? (
+                  typeof item.hint === 'string' ? (
+                    <TruncatedText className="text-xs text-muted-foreground">· {item.hint}</TruncatedText>
+                  ) : (
+                    <span className="truncate text-xs text-muted-foreground">· {item.hint}</span>
+                  )
+                ) : null}
+              </div>
+            </div>
+          </CardContent>
+        )
+        return (
+          <Card
+            key={typeof item.label === 'string' ? item.label : idx}
+            className={cn(
+              'gap-0',
+              VARIANT_CLASS[item.variant ?? 'default'],
+              item.active && 'border-primary ring-1 ring-primary/30',
+              clickable && 'cursor-pointer transition-colors hover:bg-muted/40',
+            )}
+            onClick={item.onClick}
+            role={clickable ? 'button' : undefined}
+            tabIndex={clickable ? 0 : undefined}
+            onKeyDown={
+              clickable
+                ? (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      item.onClick?.()
+                    }
+                  }
+                : undefined
+            }
+          >
+            {content}
+          </Card>
+        )
+      })}
     </div>
   )
 }
diff --git a/apps/web/src/components/skeletons.tsx b/apps/web/src/components/skeletons.tsx
new file mode 100644
index 0000000..0660532
--- /dev/null
+++ b/apps/web/src/components/skeletons.tsx
@@ -0,0 +1,38 @@
+import { SectionCards } from './section-cards'
+import { Skeleton } from '@cfdm/ui/components/skeleton'
+import { Card, CardContent } from '@cfdm/ui/components/card'
+
+export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <SectionCards
+      items={Array.from({ length: count }, (_, i) => ({
+        icon: <Skeleton className="size-4 rounded-sm" key={`icon-${i}`} />,
+        label: <Skeleton className="h-3 w-20" key={`label-${i}`} />,
+        value: <Skeleton className="h-5 w-16" key={`value-${i}`} />,
+      }))}
+    />
+  )
+}
+
+export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
+  return (
+    <Card className="gap-0">
+      <CardContent className="p-0">
+        <div className="flex flex-col">
+          <div className="flex gap-2 border-b p-3">
+            {Array.from({ length: cols }).map((_, i) => (
+              <Skeleton className="h-4 flex-1" key={`h-${i}`} />
+            ))}
+          </div>
+          {Array.from({ length: rows }).map((_, r) => (
+            <div className="flex gap-2 border-b p-3" key={`r-${r}`}>
+              {Array.from({ length: cols }).map((_, c) => (
+                <Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
+              ))}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/web/src/components/status-badge.tsx b/apps/web/src/components/status-badge.tsx
index 93836ce..a976bea 100644
--- a/apps/web/src/components/status-badge.tsx
+++ b/apps/web/src/components/status-badge.tsx
@@ -1,22 +1,22 @@
-import { Badge, badgeVariants } from '@cfdm/ui/components/badge'
-import type { VariantProps } from 'class-variance-authority'
-import { cn } from '@cfdm/ui/lib/utils'
+import type { ComponentProps } from 'react'
 
-type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>
+import { Badge } from '@/components/reui/badge'
 
-const statusVariants: Record<string, BadgeVariant> = {
+type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
+
+const STATUS_VARIANT: Record<string, BadgeVariant> = {
   active: 'success',
   synced: 'success',
   ok: 'success',
   pending_push: 'secondary',
-  warning: 'secondary',
+  warning: 'warning',
   conflict: 'destructive',
   error: 'destructive',
   expired: 'destructive',
   unknown: 'outline',
 }
 
-const labels: Record<string, string> = {
+const STATUS_LABELS: Record<string, string> = {
   active: 'Активен',
   synced: 'Синхронизировано',
   pending_push: 'Ожидает отправки',
@@ -28,20 +28,7 @@ const labels: Record<string, string> = {
   unknown: 'Неизвестно',
 }
 
-interface StatusBadgeProps {
-  status: string
-  className?: string
-}
-
-export function StatusBadge({ status, className }: StatusBadgeProps) {
-  const variant = statusVariants[status] ?? 'outline'
-  return (
-    <Badge variant={variant} className={cn('gap-1.5', className)}>
-      <span
-        className="size-1.5 rounded-full bg-current opacity-70"
-        aria-hidden
-      />
-      {labels[status] ?? status}
-    </Badge>
-  )
+export function StatusBadge({ status, label }: { status: string; label?: string }) {
+  const variant = STATUS_VARIANT[status] ?? 'outline'
+  return <Badge variant={variant}>{label ?? STATUS_LABELS[status] ?? status}</Badge>
 }
diff --git a/apps/web/src/components/subdomains-data-grid.tsx b/apps/web/src/components/subdomains-data-grid.tsx
new file mode 100644
index 0000000..f26443a
--- /dev/null
+++ b/apps/web/src/components/subdomains-data-grid.tsx
@@ -0,0 +1,197 @@
+import { useMemo, useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { MoreHorizontalIcon } from 'lucide-react'
+
+import { Badge } from '@cfdm/ui/components/badge'
+import { Button } from '@cfdm/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@cfdm/ui/components/dropdown-menu'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import {
+  DataGridCard,
+  columnDefFromDataGrid,
+} from '@/components/data-grid-card'
+import type { DataGridColumn } from '@/components/data-grid-types'
+import { ListFiltersBar } from '@/components/list-filters-bar'
+import type { SubdomainTableRow } from '@/hooks/use-domain-page'
+import { formatSubdomainServiceLinks } from '@/hooks/use-domain-page'
+import { formatDate } from '@/lib/format'
+
+interface SubdomainsDataGridProps {
+  domainId: string
+  rows: SubdomainTableRow[]
+  isDeleting?: boolean
+  isToggling?: boolean
+  onEdit: (row: SubdomainTableRow) => void
+  onDelete: (row: SubdomainTableRow) => void
+  onToggleEnabled: (row: SubdomainTableRow) => void
+  toolbar?: React.ReactNode
+}
+
+export function SubdomainsDataGrid({
+  domainId,
+  rows,
+  isDeleting = false,
+  isToggling = false,
+  onEdit,
+  onDelete,
+  onToggleEnabled,
+  toolbar,
+}: SubdomainsDataGridProps) {
+  const [deleteTarget, setDeleteTarget] = useState<SubdomainTableRow | null>(null)
+  const [search, setSearch] = useState('')
+
+  const filteredRows = useMemo(() => {
+    const query = search.trim().toLowerCase()
+    if (!query) return rows
+    return rows.filter(
+      (row) =>
+        row.subdomain.fqdn.toLowerCase().includes(query) ||
+        formatSubdomainServiceLinks(row.serviceLinks).toLowerCase().includes(query),
+    )
+  }, [rows, search])
+
+  const columns = useMemo<DataGridColumn<SubdomainTableRow>[]>(
+    () => [
+      {
+        key: 'fqdn',
+        header: 'Поддомен',
+        sortable: true,
+        sortValue: (row) => row.subdomain.fqdn,
+        cell: (row) => (
+          <span className="truncate font-mono">{row.subdomain.fqdn}</span>
+        ),
+      },
+      {
+        key: 'status',
+        header: 'Статус',
+        cell: (row) => (
+          <Badge variant={row.subdomain.enabled ? 'default' : 'outline'}>
+            {row.subdomain.enabled ? 'Активен' : 'Неактивен'}
+          </Badge>
+        ),
+      },
+      {
+        key: 'service',
+        header: 'Группа / Сервис',
+        sortable: true,
+        sortValue: (row) => formatSubdomainServiceLinks(row.serviceLinks),
+        cell: (row) => (
+          <span className="text-muted-foreground">
+            {formatSubdomainServiceLinks(row.serviceLinks)}
+          </span>
+        ),
+      },
+      {
+        key: 'created_at',
+        header: 'Создан',
+        sortable: true,
+        sortValue: (row) => row.subdomain.created_at,
+        className: 'tabular-nums text-muted-foreground',
+        cell: (row) => formatDate(row.subdomain.created_at),
+      },
+      {
+        key: 'actions',
+        header: '',
+        enableHiding: false,
+        className: 'text-right',
+        cell: (row) => (
+          <div className="text-right">
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={<Button variant="outline" size="icon" className="size-8" />}
+              >
+                <MoreHorizontalIcon />
+                <span className="sr-only">Действия</span>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => onEdit(row)}>Редактировать</DropdownMenuItem>
+                <DropdownMenuItem
+                  disabled={isToggling}
+                  onClick={() => onToggleEnabled(row)}
+                >
+                  {row.subdomain.enabled ? 'Деактивировать' : 'Активировать'}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  render={
+                    <Link
+                      to="/domains/$domainId/dns"
+                      params={{ domainId }}
+                      search={{ host: row.subdomain.fqdn }}
+                    />
+                  }
+                >
+                  DNS-записи
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  variant="destructive"
+                  onClick={() => setDeleteTarget(row)}
+                >
+                  Удалить
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        ),
+      },
+    ],
+    [domainId, isToggling, onEdit, onToggleEnabled],
+  )
+
+  return (
+    <>
+      <DataGridCard
+        title="Поддомены"
+        description="Управление поддоменами и привязками сервисов"
+        columns={columnDefFromDataGrid(columns)}
+        data={filteredRows}
+        rowId={(row) => String(row.subdomain.id)}
+        emptyTitle="Поддомены не найдены"
+        emptyDescription="Создайте поддомен или измените запрос"
+      pinLastColumn
+      actions={
+        <div className="flex w-full flex-col gap-2">
+          <ListFiltersBar
+            search={{
+              value: search,
+              onChange: setSearch,
+              placeholder: 'Поиск по поддомену…',
+            }}
+            shown={filteredRows.length}
+            total={rows.length}
+            showReset={Boolean(search.trim())}
+            onReset={() => setSearch('')}
+          />
+          {toolbar}
+        </div>
+      }
+      />
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        title="Удалить поддомен?"
+        description={
+          deleteTarget
+            ? `Поддомен ${deleteTarget.subdomain.fqdn} будет удалён из менеджера.`
+            : ''
+        }
+        confirmLabel="Удалить"
+        onConfirm={() => {
+          if (deleteTarget) {
+            onDelete(deleteTarget)
+            setDeleteTarget(null)
+          }
+        }}
+        disabled={isDeleting}
+      />
+    </>
+  )
+}
diff --git a/apps/web/src/components/subdomains-table.tsx b/apps/web/src/components/subdomains-table.tsx
deleted file mode 100644
index 1670f70..0000000
--- a/apps/web/src/components/subdomains-table.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { useMemo, useState } from 'react'
-import { Link } from '@tanstack/react-router'
-import {
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
-  type SortingState,
-} from '@tanstack/react-table'
-import { MoreHorizontalIcon } from 'lucide-react'
-import { ConfirmDialog } from '@/components/confirm-dialog'
-import { DataTableView } from '@/components/data-table-view'
-import type { Density } from '@/components/data-table-density'
-import type { SubdomainTableRow } from '@/hooks/use-domain-page'
-import { formatSubdomainServiceLinks } from '@/hooks/use-domain-page'
-import { formatDate } from '@/lib/format'
-import { AppBadge } from '@/components/app-badge'
-import { AppButton } from '@/components/app-button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@cfdm/ui/components/dropdown-menu'
-
-interface SubdomainsTableProps {
-  domainId: string
-  rows: SubdomainTableRow[]
-  isDeleting?: boolean
-  isToggling?: boolean
-  onEdit: (row: SubdomainTableRow) => void
-  onDelete: (row: SubdomainTableRow) => void
-  onToggleEnabled: (row: SubdomainTableRow) => void
-}
-
-export function SubdomainsTable({
-  domainId,
-  rows,
-  isDeleting = false,
-  isToggling = false,
-  onEdit,
-  onDelete,
-  onToggleEnabled,
-}: SubdomainsTableProps) {
-  const [deleteTarget, setDeleteTarget] = useState<SubdomainTableRow | null>(null)
-  const [sorting, setSorting] = useState<SortingState>([])
-  const [globalFilter, setGlobalFilter] = useState('')
-  const [density, setDensity] = useState<Density>('comfortable')
-
-  const columns = useMemo<ColumnDef<SubdomainTableRow>[]>(
-    () => [
-      {
-        accessorKey: 'fqdn',
-        header: ({ column }) => (
-          <AppButton
-            variant="ghost"
-            className="-ml-3 h-8"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          >
-            Поддомен
-          </AppButton>
-        ),
-        accessorFn: (row) => row.subdomain.fqdn,
-        cell: ({ row }) => (
-          <span className="font-mono truncate">{row.original.subdomain.fqdn}</span>
-        ),
-      },
-      {
-        id: 'status',
-        header: 'Статус',
-        enableHiding: true,
-        cell: ({ row }) => (
-          <AppBadge variant={row.original.subdomain.enabled ? 'default' : 'outline'}>
-            {row.original.subdomain.enabled ? 'Активен' : 'Неактивен'}
-          </AppBadge>
-        ),
-      },
-      {
-        id: 'service',
-        header: 'Группа / Сервис',
-        accessorFn: (row) => formatSubdomainServiceLinks(row.serviceLinks),
-        cell: ({ row }) => (
-          <span className="text-muted-foreground">
-            {formatSubdomainServiceLinks(row.original.serviceLinks)}
-          </span>
-        ),
-      },
-      {
-        accessorKey: 'created_at',
-        header: 'Создан',
-        cell: ({ row }) => (
-          <span className="tabular-nums text-muted-foreground">
-            {formatDate(row.original.subdomain.created_at)}
-          </span>
-        ),
-      },
-      {
-        id: 'actions',
-        enableHiding: false,
-        header: () => <span className="sr-only">Действия</span>,
-        cell: ({ row }) => (
-          <div className="text-right">
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={
-                  <AppButton variant="outline" size="icon" className="size-8" />
-                }
-              >
-                <MoreHorizontalIcon />
-                <span className="sr-only">Действия</span>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => onEdit(row.original)}>
-                  Редактировать
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  disabled={isToggling}
-                  onClick={() => onToggleEnabled(row.original)}
-                >
-                  {row.original.subdomain.enabled ? 'Деактивировать' : 'Активировать'}
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  render={
-                    <Link
-                      to="/domains/$domainId/dns"
-                      params={{ domainId }}
-                      search={{ host: row.original.subdomain.fqdn }}
-                    />
-                  }
-                >
-                  DNS-записи
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  variant="destructive"
-                  onClick={() => setDeleteTarget(row.original)}
-                >
-                  Удалить
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        ),
-      },
-    ],
-    [domainId, isToggling, onEdit, onToggleEnabled],
-  )
-
-  const table = useReactTable({
-    data: rows,
-    columns,
-    state: { sorting, globalFilter },
-    onSortingChange: setSorting,
-    onGlobalFilterChange: setGlobalFilter,
-    globalFilterFn: (row, _columnId, filterValue: string) => {
-      const value = filterValue.toLowerCase()
-      return (
-        row.original.subdomain.fqdn.toLowerCase().includes(value) ||
-        formatSubdomainServiceLinks(row.original.serviceLinks)
-          .toLowerCase()
-          .includes(value)
-      )
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    initialState: { pagination: { pageSize: 10 } },
-  })
-
-  return (
-    <>
-      <DataTableView
-        table={table}
-        density={density}
-        onDensityChange={setDensity}
-        searchPlaceholder="Поиск по поддомену…"
-        searchValue={globalFilter}
-        onSearchChange={setGlobalFilter}
-        emptyTitle="Поддомены не найдены"
-        emptyDescription="Создайте поддомен или измените запрос"
-      />
-      <ConfirmDialog
-        open={deleteTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) setDeleteTarget(null)
-        }}
-        title="Удалить поддомен?"
-        description={
-          deleteTarget
-            ? `Поддомен ${deleteTarget.subdomain.fqdn} будет удалён из менеджера.`
-            : ''
-        }
-        confirmLabel="Удалить"
-        onConfirm={() => {
-          if (deleteTarget) {
-            onDelete(deleteTarget)
-            setDeleteTarget(null)
-          }
-        }}
-        disabled={isDeleting}
-      />
-    </>
-  )
-}
diff --git a/apps/web/src/components/table-skeleton.tsx b/apps/web/src/components/table-skeleton.tsx
deleted file mode 100644
index d226213..0000000
--- a/apps/web/src/components/table-skeleton.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardHeader,
-} from '@cfdm/ui/components/card'
-import { Skeleton } from '@cfdm/ui/components/skeleton'
-
-interface TableSkeletonProps {
-  rows?: number
-  columns?: number
-  withCard?: boolean
-}
-
-function TableRowsSkeleton({ rows, columns }: { rows: number; columns: number }) {
-  return (
-    <div className="flex flex-col gap-0">
-      <div className="flex gap-4 border-b px-4 py-3">
-        {Array.from({ length: columns }).map((_, index) => (
-          <Skeleton key={index} className="h-4 flex-1" />
-        ))}
-      </div>
-      {Array.from({ length: rows }).map((_, rowIndex) => (
-        <div key={rowIndex} className="flex gap-4 border-b px-4 py-3 last:border-0">
-          {Array.from({ length: columns }).map((__, colIndex) => (
-            <Skeleton key={colIndex} className="h-4 flex-1" />
-          ))}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export function TableSkeleton({
-  rows = 5,
-  columns = 4,
-  withCard = true,
-}: TableSkeletonProps) {
-  const table = <TableRowsSkeleton rows={rows} columns={columns} />
-
-  if (!withCard) {
-    return (
-      <div className="overflow-hidden rounded-lg border">{table}</div>
-    )
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <Skeleton className="h-5 w-40" />
-        <Skeleton className="h-4 w-56" />
-      </CardHeader>
-      <CardContent className="p-0">{table}</CardContent>
-    </Card>
-  )
-}
diff --git a/apps/web/src/components/theme-provider.tsx b/apps/web/src/components/theme-provider.tsx
index 12b8979..702c7e0 100644
--- a/apps/web/src/components/theme-provider.tsx
+++ b/apps/web/src/components/theme-provider.tsx
@@ -1,8 +1,15 @@
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ReactNode } from 'react'
 
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  )
 }
diff --git a/apps/web/src/components/truncated-text.tsx b/apps/web/src/components/truncated-text.tsx
new file mode 100644
index 0000000..3a9f74a
--- /dev/null
+++ b/apps/web/src/components/truncated-text.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@cfdm/ui/components/tooltip'
+import { cn } from '@cfdm/ui/lib/utils'
+
+interface TruncatedTextProps {
+  children: ReactNode
+  className?: string
+  as?: 'span' | 'p' | 'div'
+  /** Явный текст подсказки, если children — не строка. */
+  tooltip?: string
+}
+
+export function TruncatedText({ children, className, as: Tag = 'span', tooltip }: TruncatedTextProps) {
+  const tip =
+    tooltip ??
+    (typeof children === 'string' || typeof children === 'number' ? String(children) : null)
+
+  if (!tip) {
+    return <Tag className={cn('truncate', className)}>{children}</Tag>
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger render={<Tag className={cn('truncate', className)} />}>{children}</TooltipTrigger>
+        <TooltipContent>{tip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 4e291d6..a6d17d0 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -24,10 +24,10 @@ declare module '@tanstack/react-router' {
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <ThemeProvider>
         <TooltipProvider>
           <RouterProvider router={router} context={{ queryClient }} />
-          <Toaster />
+          <Toaster richColors position="top-right" />
         </TooltipProvider>
       </ThemeProvider>
     </QueryClientProvider>
diff --git a/apps/web/src/routes/_auth/certificates.tsx b/apps/web/src/routes/_auth/certificates.tsx
index 2e7ac55..682ef5a 100644
--- a/apps/web/src/routes/_auth/certificates.tsx
+++ b/apps/web/src/routes/_auth/certificates.tsx
@@ -1,17 +1,8 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
-import {
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
-  type SortingState,
-} from '@tanstack/react-table'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-import { ShieldCheckIcon } from 'lucide-react'
+import { GlobeIcon, ShieldCheckIcon } from 'lucide-react'
 import { toast } from 'sonner'
 import { certificatesQueryOptions, certKeys, certSummaryQueryOptions } from '@/queries'
 import { api } from '@/lib/api-client'
@@ -22,11 +13,13 @@ import { PageShell } from '@/components/page-shell'
 import { QueryState } from '@/components/query-state'
 import { EmptyState } from '@/components/empty-state'
 import { StatusBadge } from '@/components/status-badge'
-import { DataTableCard } from '@/components/data-table-card'
-import { DataTableView } from '@/components/data-table-view'
-import type { Density } from '@/components/data-table-density'
+import {
+  DataGridCard,
+  columnDefFromDataGrid,
+} from '@/components/data-grid-card'
+import type { DataGridColumn } from '@/components/data-grid-types'
+import { ListFiltersBar } from '@/components/list-filters-bar'
 import { ChartCard } from '@/components/chart-card'
-import { AppButton } from '@/components/app-button'
 import {
   AppItem,
   AppItemContent,
@@ -40,7 +33,7 @@ import {
   type ChartConfig,
 } from '@cfdm/ui/components/chart'
 import { LoadingButton } from '@/components/loading-button'
-import { TableSkeleton } from '@/components/table-skeleton'
+import { TableSkeleton } from '@/components/skeletons'
 
 const chartConfig = {
   count: {
@@ -60,8 +53,6 @@ export const Route = createFileRoute('/_auth/certificates')({
 
 function CertificatesPage() {
   const [searchQuery, setSearchQuery] = useState('')
-  const [sorting, setSorting] = useState<SortingState>([{ id: 'expires_at', desc: false }])
-  const [density, setDensity] = useState<Density>('comfortable')
   const queryClient = useQueryClient()
   const {
     data: certs,
@@ -97,82 +88,52 @@ function CertificatesPage() {
     )
   }, [certs, searchQuery])
 
-  const isFilteredEmpty = (certs?.length ?? 0) > 0 && filteredCerts.length === 0
-
-  const columns = useMemo<ColumnDef<Certificate>[]>(
+  const columns = useMemo<DataGridColumn<Certificate>[]>(
     () => [
       {
-        accessorKey: 'hostname',
-        header: ({ column }) => (
-          <AppButton
-            variant="ghost"
-            className="-ml-3 h-8"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          >
-            Хост
-          </AppButton>
-        ),
-        cell: ({ row }) => (
-          <span className="truncate font-medium">{row.original.hostname}</span>
-        ),
+        key: 'hostname',
+        header: 'Хост',
+        icon: GlobeIcon,
+        sortable: true,
+        sortValue: (row) => row.hostname,
+        cell: (row) => <span className="truncate font-medium">{row.hostname}</span>,
       },
       {
-        accessorKey: 'status',
+        key: 'status',
         header: 'Статус',
-        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+        cell: (row) => <StatusBadge status={row.status} />,
       },
       {
-        accessorKey: 'expires_at',
+        key: 'expires_at',
         header: 'Истекает',
-        cell: ({ row }) => (
-          <span className="tabular-nums text-muted-foreground">
-            {formatDate(row.original.expires_at)}
-          </span>
-        ),
+        sortable: true,
+        sortValue: (row) => row.expires_at ?? '',
+        className: 'tabular-nums text-muted-foreground',
+        cell: (row) => formatDate(row.expires_at),
       },
       {
-        id: 'relative',
+        key: 'relative',
         header: 'Срок',
-        cell: ({ row }) => (
+        enableHiding: true,
+        cell: (row) => (
           <span className="tabular-nums text-muted-foreground">
-            {formatRelative(row.original.expires_at)}
+            {formatRelative(row.expires_at)}
           </span>
         ),
-        enableHiding: true,
       },
       {
-        accessorKey: 'last_checked_at',
+        key: 'last_checked_at',
         header: 'Проверка',
-        cell: ({ row }) => (
-          <span className="tabular-nums text-muted-foreground">
-            {formatDate(row.original.last_checked_at)}
-          </span>
-        ),
         enableHiding: true,
+        sortable: true,
+        sortValue: (row) => row.last_checked_at ?? '',
+        className: 'tabular-nums text-muted-foreground',
+        cell: (row) => formatDate(row.last_checked_at),
       },
     ],
     [],
   )
 
-  const table = useReactTable({
-    data: filteredCerts,
-    columns,
-    state: { sorting, globalFilter: searchQuery },
-    onSortingChange: setSorting,
-    globalFilterFn: (row, _columnId, value: string) => {
-      const q = value.toLowerCase()
-      return (
-        row.original.hostname.toLowerCase().includes(q) ||
-        row.original.status.toLowerCase().includes(q)
-      )
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    initialState: { pagination: { pageSize: 10 } },
-  })
-
   return (
     <PageShell>
       <PageHeader
@@ -193,7 +154,7 @@ function CertificatesPage() {
         isError={isError}
         error={error}
         onRetry={refetch}
-        skeleton={<TableSkeleton rows={5} columns={4} />}
+        skeleton={<TableSkeleton rows={5} cols={4} />}
       >
         <ChartCard
           title="Обзор статусов"
@@ -236,26 +197,30 @@ function CertificatesPage() {
             </AppItemGroup>
           }
         />
-        <DataTableCard
+        <DataGridCard
           title="Сертификаты"
           description="Хосты с активными сервисами или ручным мониторингом"
-          isEmpty={false}
-        >
-          <DataTableView
-            table={table}
-            density={density}
-            onDensityChange={setDensity}
-            searchPlaceholder="Поиск по хосту или статусу…"
-            searchValue={searchQuery}
-            onSearchChange={setSearchQuery}
-            emptyTitle={isFilteredEmpty ? 'Ничего не найдено' : 'Сертификаты не найдены'}
-            emptyDescription={
-              isFilteredEmpty
-                ? 'Измените поисковый запрос'
-                : 'Сертификаты появятся после проверки доменов'
-            }
-          />
-        </DataTableCard>
+          columns={columnDefFromDataGrid(columns)}
+          data={filteredCerts}
+          rowId={(row) => String(row.id)}
+          emptyTitle="Сертификаты не найдены"
+          emptyDescription="Сертификаты появятся после проверки доменов"
+          initialSorting={[{ id: 'expires_at', desc: false }]}
+          enableColumnVisibility
+          actions={
+            <ListFiltersBar
+              search={{
+                value: searchQuery,
+                onChange: setSearchQuery,
+                placeholder: 'Поиск по хосту или статусу…',
+              }}
+              shown={filteredCerts.length}
+              total={certs?.length ?? 0}
+              showReset={Boolean(searchQuery.trim())}
+              onReset={() => setSearchQuery('')}
+            />
+          }
+        />
       </QueryState>
     </PageShell>
   )
diff --git a/apps/web/src/routes/_auth/domains/$domainId/dns.tsx b/apps/web/src/routes/_auth/domains/$domainId/dns.tsx
index 66f4a7e..3e7cf75 100644
--- a/apps/web/src/routes/_auth/domains/$domainId/dns.tsx
+++ b/apps/web/src/routes/_auth/domains/$domainId/dns.tsx
@@ -3,21 +3,18 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import { useForm, Controller } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { NetworkIcon } from 'lucide-react'
 import { toast } from 'sonner'
-import { domainDetailQueryOptions, dnsKeys, dnsListQueryOptions, subdomainKeys } from '@/queries'
 import { api } from '@/lib/api-client'
 import { createDnsRecordSchema, type CreateDnsRecordInput } from '@/lib/schemas'
+import { domainDetailQueryOptions, dnsKeys, dnsListQueryOptions, subdomainKeys } from '@/queries'
 import { PageHeader } from '@/components/page-header'
 import { PageShell } from '@/components/page-shell'
 import { QueryState } from '@/components/query-state'
-import { DataTableCard } from '@/components/data-table-card'
+import { DnsRecordsDataGrid } from '@/components/dns-records-data-grid'
 import { FormSheet } from '@/components/form-sheet'
 import { FormFieldSimple } from '@/components/form-field'
 import { LoadingButton } from '@/components/loading-button'
-import { TableSkeleton } from '@/components/table-skeleton'
-import { TableToolbar } from '@/components/table-toolbar'
-import { DnsRecordsTable } from '@/components/dns-records-table'
+import { TableSkeleton } from '@/components/skeletons'
 import { AppButton } from '@/components/app-button'
 import { AppInput } from '@/components/app-input'
 import { AppField, AppFieldGroup, AppFieldLabel } from '@/components/app-field'
@@ -144,17 +141,12 @@ function DnsPage() {
     )
   }, [records, host, searchQuery])
 
-  const hasRecords = filteredRecords.length > 0
-  const isFilteredEmpty = (records?.length ?? 0) > 0 && filteredRecords.length === 0
-
   return (
     <PageShell>
       <PageHeader
         title={`${domain?.zone_name ?? ''} — DNS`}
         description={
-          host
-            ? `Фильтр по хосту: ${host}`
-            : 'Управление DNS-записями зоны'
+          host ? `Фильтр по хосту: ${host}` : 'Управление DNS-записями зоны'
         }
         actions={
           <>
@@ -180,50 +172,16 @@ function DnsPage() {
           void refetchDomain()
           void refetchRecords()
         }}
-        skeleton={<TableSkeleton rows={6} columns={6} />}
+        skeleton={<TableSkeleton rows={6} cols={6} />}
       >
-        <DataTableCard
-          title="DNS-записи"
-          description="Записи в зоне. Несколько A/AAAA с одним именем выделены фоном и разделителем"
-          emptyTitle={
-            isFilteredEmpty ? 'Ничего не найдено' : 'DNS-записи не найдены'
-          }
-          emptyDescription={
-            isFilteredEmpty
-              ? 'Измените поисковый запрос'
-              : 'Создайте запись или синхронизируйте зону с Cloudflare'
-          }
-          emptyIcon={NetworkIcon}
-          isEmpty={!hasRecords}
-          emptyAction={
-            isFilteredEmpty ? (
-              <AppButton variant="outline" onClick={() => setSearchQuery('')}>
-                Сбросить фильтр
-              </AppButton>
-            ) : (
-              <AppButton onClick={() => setSheetOpen(true)}>Новая запись</AppButton>
-            )
-          }
-          toolbar={
-            !host ? (
-              <TableToolbar
-                value={searchQuery}
-                onChange={setSearchQuery}
-                placeholder="Поиск по имени или значению…"
-              />
-            ) : undefined
-          }
-        >
-          {hasRecords && (
-            <div className="p-4">
-              <DnsRecordsTable
-                records={filteredRecords}
-                onDelete={(recordId) => deleteMutation.mutate(recordId)}
-                isDeleting={deleteMutation.isPending}
-              />
-            </div>
-          )}
-        </DataTableCard>
+        <DnsRecordsDataGrid
+          records={filteredRecords}
+          onDelete={(recordId) => deleteMutation.mutate(recordId)}
+          isDeleting={deleteMutation.isPending}
+          search={host ?? searchQuery}
+          onSearchChange={setSearchQuery}
+          hideSearch={Boolean(host)}
+        />
       </QueryState>
 
       <FormSheet
@@ -259,9 +217,9 @@ function DnsPage() {
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    {dnsTypeItems.map((item) => (
-                      <SelectItem key={item.value} value={item.value}>
-                        {item.label}
+                    {DNS_TYPES.map((type) => (
+                      <SelectItem key={type} value={type}>
+                        {type}
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -269,53 +227,30 @@ function DnsPage() {
               )}
             />
           </FormFieldSimple>
-          <FormFieldSimple
-            label="Имя"
-            htmlFor="name"
-            error={form.formState.errors.name}
-          >
-            <AppInput
-              id="name"
-              placeholder="@"
-              {...form.register('name')}
-              aria-invalid={!!form.formState.errors.name}
-            />
+          <FormFieldSimple label="Имя" htmlFor="name" error={form.formState.errors.name}>
+            <AppInput id="name" placeholder="@" {...form.register('name')} />
           </FormFieldSimple>
           <FormFieldSimple
             label="Значение"
             htmlFor="content"
             error={form.formState.errors.content}
           >
-            <AppInput
-              id="content"
-              placeholder="192.168.1.1"
-              {...form.register('content')}
-              aria-invalid={!!form.formState.errors.content}
-            />
+            <AppInput id="content" {...form.register('content')} />
           </FormFieldSimple>
-          <FormFieldSimple
-            label="TTL"
-            htmlFor="ttl"
-            error={form.formState.errors.ttl}
-          >
+          <FormFieldSimple label="TTL" htmlFor="ttl" error={form.formState.errors.ttl}>
             <AppInput
               id="ttl"
               type="number"
               {...form.register('ttl', { valueAsNumber: true })}
-              aria-invalid={!!form.formState.errors.ttl}
             />
           </FormFieldSimple>
-          <AppField className="flex flex-row items-center justify-between gap-4">
+          <AppField orientation="horizontal">
             <AppFieldLabel htmlFor="proxied">Прокси Cloudflare</AppFieldLabel>
             <Controller
               control={form.control}
               name="proxied"
               render={({ field }) => (
-                <AppSwitch
-                  id="proxied"
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
+                <AppSwitch id="proxied" checked={field.value} onCheckedChange={field.onChange} />
               )}
             />
           </AppField>
diff --git a/apps/web/src/routes/_auth/domains/$domainId/index.tsx b/apps/web/src/routes/_auth/domains/$domainId/index.tsx
index ce0abad..3667b18 100644
--- a/apps/web/src/routes/_auth/domains/$domainId/index.tsx
+++ b/apps/web/src/routes/_auth/domains/$domainId/index.tsx
@@ -1,6 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useState } from 'react'
-import { GlobeIcon } from 'lucide-react'
 import {
   domainDetailQueryOptions,
   domainServiceBindingsQueryOptions,
@@ -16,8 +15,7 @@ import { QueryState } from '@/components/query-state'
 import { DomainHeader } from '@/components/domain-header'
 import { DomainActionsBar } from '@/components/domain-actions-bar'
 import { DomainBindingsCard } from '@/components/domain-bindings-card'
-import { DataTableCard } from '@/components/data-table-card'
-import { SubdomainsTable } from '@/components/subdomains-table'
+import { SubdomainsDataGrid } from '@/components/subdomains-data-grid'
 import {
   SubdomainEditSheet,
   type SubdomainEditValues,
@@ -34,7 +32,7 @@ import {
   AppCardTitle,
 } from '@/components/app-card'
 import { LoadingButton } from '@/components/loading-button'
-import { TableSkeleton } from '@/components/table-skeleton'
+import { TableSkeleton } from '@/components/skeletons'
 
 export const Route = createFileRoute('/_auth/domains/$domainId/')({
   loader: async ({ context: { queryClient }, params }) => {
@@ -54,12 +52,12 @@ export const Route = createFileRoute('/_auth/domains/$domainId/')({
 function DomainPageSkeleton() {
   return (
     <div className="flex flex-col gap-4">
-      <TableSkeleton withCard={false} rows={1} columns={2} />
+      <TableSkeleton rows={1} cols={2} />
       <div className="grid gap-4 md:grid-cols-2">
-        <TableSkeleton withCard rows={3} columns={2} />
-        <TableSkeleton withCard rows={3} columns={2} />
+        <TableSkeleton rows={3} cols={2} />
+        <TableSkeleton rows={3} cols={2} />
       </div>
-      <TableSkeleton rows={5} columns={5} />
+      <TableSkeleton rows={5} cols={5} />
     </div>
   )
 }
@@ -252,44 +250,23 @@ function DomainOverviewPage() {
               <DomainBindingsCard bindings={bindings} />
             </div>
 
-            <DataTableCard
-              title="Поддомены"
-              description="Управление поддоменами и привязками сервисов"
-              isEmpty={subdomainRows.length === 0}
-              emptyTitle="Поддомены не найдены"
-              emptyDescription="Создайте поддомен вручную или синхронизируйте зону с Cloudflare"
-              emptyIcon={GlobeIcon}
-              emptyAction={
-                <div className="flex flex-wrap justify-center gap-2">
-                  <AppButton onClick={openCreateSheet}>Создать поддомен</AppButton>
-                  <AppButton
-                    variant="outline"
-                    onClick={() => syncMutation.mutate()}
-                    disabled={syncMutation.isPending}
-                  >
-                    Синхронизировать
-                  </AppButton>
-                </div>
+            <SubdomainsDataGrid
+              domainId={domainId}
+              rows={subdomainRows}
+              isDeleting={deleteSubdomainMutation.isPending}
+              isToggling={updateSubdomainMutation.isPending}
+              onEdit={openEditSheet}
+              onDelete={(row) =>
+                deleteSubdomainMutation.mutate(row.subdomain.id)
+              }
+              onToggleEnabled={(row) =>
+                updateSubdomainMutation.mutate({
+                  id: row.subdomain.id,
+                  enabled: !row.subdomain.enabled,
+                })
               }
               toolbar={<DomainActionsBar onCreateSubdomain={openCreateSheet} />}
-            >
-              <SubdomainsTable
-                domainId={domainId}
-                rows={subdomainRows}
-                isDeleting={deleteSubdomainMutation.isPending}
-                isToggling={updateSubdomainMutation.isPending}
-                onEdit={openEditSheet}
-                onDelete={(row) =>
-                  deleteSubdomainMutation.mutate(row.subdomain.id)
-                }
-                onToggleEnabled={(row) =>
-                  updateSubdomainMutation.mutate({
-                    id: row.subdomain.id,
-                    enabled: !row.subdomain.enabled,
-                  })
-                }
-              />
-            </DataTableCard>
+            />
 
             <SubdomainEditSheet
               mode={sheetMode}
diff --git a/apps/web/src/routes/_auth/domains/index.tsx b/apps/web/src/routes/_auth/domains/index.tsx
index 508a502..423f50a 100644
--- a/apps/web/src/routes/_auth/domains/index.tsx
+++ b/apps/web/src/routes/_auth/domains/index.tsx
@@ -16,12 +16,12 @@ import {
 import { PageHeader } from '@/components/page-header'
 import { PageShell } from '@/components/page-shell'
 import { QueryState } from '@/components/query-state'
-import { DataTableCard } from '@/components/data-table-card'
-import { DomainsDataTable, type DomainTableRow } from '@/components/domains-data-table'
+import { DomainsDataGrid, type DomainTableRow } from '@/components/domains-data-grid'
 import { FormSheet } from '@/components/form-sheet'
 import { FormFieldSimple } from '@/components/form-field'
 import { LoadingButton } from '@/components/loading-button'
-import { TableSkeleton } from '@/components/table-skeleton'
+import { TableSkeleton } from '@/components/skeletons'
+import { EmptyState } from '@/components/empty-state'
 import { AppButton } from '@/components/app-button'
 import { AppInput } from '@/components/app-input'
 import { AppFieldGroup } from '@/components/app-field'
@@ -46,6 +46,7 @@ function DomainsPage() {
   const [sheetOpen, setSheetOpen] = useState(false)
   const [importGroupId, setImportGroupId] = useState('')
   const [filterGroupId, setFilterGroupId] = useState('')
+  const [search, setSearch] = useState('')
   const listGroupId =
     filterGroupId && filterGroupId !== 'none' ? Number(filterGroupId) : undefined
   const queryClient = useQueryClient()
@@ -138,6 +139,14 @@ function DomainsPage() {
   const isZeroResults = hasActiveFilter && tableData.length === 0 && (domains?.length ?? 0) > 0
   const isTrulyEmpty = tableData.length === 0 && !hasActiveFilter
 
+  const emptyAction = isZeroResults ? (
+    <AppButton variant="outline" onClick={() => setFilterGroupId('')}>
+      Сбросить фильтр
+    </AppButton>
+  ) : (
+    <AppButton onClick={() => setSheetOpen(true)}>Импортировать домен</AppButton>
+  )
+
   return (
     <PageShell>
       <PageHeader
@@ -160,40 +169,31 @@ function DomainsPage() {
         onRetry={refetch}
         skeleton={<TableSkeleton />}
       >
-        <DataTableCard
-          title="Список доменов"
-          description="Импортированные зоны Cloudflare"
-          isEmpty={isTrulyEmpty || isZeroResults}
-          emptyTitle={
-            isZeroResults ? 'Ничего не найдено' : 'Домены не импортированы'
-          }
-          emptyDescription={
-            isZeroResults
-              ? 'По выбранному фильтру группы нет подходящих зон'
-              : 'Импортируйте зону из аккаунта Cloudflare'
-          }
-          emptyIcon={GlobeIcon}
-          emptyAction={
-            isZeroResults ? (
-              <AppButton variant="outline" onClick={() => setFilterGroupId('')}>
-                Сбросить фильтр
-              </AppButton>
-            ) : (
-              <AppButton onClick={() => setSheetOpen(true)}>Импортировать домен</AppButton>
-            )
-          }
-        >
-          {!isTrulyEmpty && !isZeroResults && (
-            <DomainsDataTable
-              data={tableData}
-              groupFilterItems={groupItems}
-              groupFilterValue={filterGroupId || 'all'}
-              onGroupFilterChange={handleFilterGroupChange}
-              onDelete={handleDeleteDomain}
-              isDeleting={deleteMutation.isPending}
-            />
-          )}
-        </DataTableCard>
+        {isTrulyEmpty || isZeroResults ? (
+          <EmptyState
+            icon={GlobeIcon}
+            title={isZeroResults ? 'Ничего не найдено' : 'Домены не импортированы'}
+            description={
+              isZeroResults
+                ? 'По выбранному фильтру группы нет подходящих зон'
+                : 'Импортируйте зону из аккаунта Cloudflare'
+            }
+            action={emptyAction}
+          />
+        ) : (
+          <DomainsDataGrid
+            data={tableData}
+            totalCount={tableData.length}
+            groupFilterItems={groupItems}
+            groupFilterValue={filterGroupId || 'all'}
+            onGroupFilterChange={handleFilterGroupChange}
+            search={search}
+            onSearchChange={setSearch}
+            onDelete={handleDeleteDomain}
+            isDeleting={deleteMutation.isPending}
+            emptyAction={emptyAction}
+          />
+        )}
       </QueryState>
 
       <FormSheet
diff --git a/apps/web/src/routes/_auth/groups/$groupId.tsx b/apps/web/src/routes/_auth/groups/$groupId.tsx
index db57de7..56ee130 100644
--- a/apps/web/src/routes/_auth/groups/$groupId.tsx
+++ b/apps/web/src/routes/_auth/groups/$groupId.tsx
@@ -10,18 +10,16 @@ import { PageHeader } from '@/components/page-header'
 import { PageShell } from '@/components/page-shell'
 import { QueryState } from '@/components/query-state'
 import { StatusBadge } from '@/components/status-badge'
-import { DataTableCard } from '@/components/data-table-card'
-import { TableSkeleton } from '@/components/table-skeleton'
-import { TableToolbar } from '@/components/table-toolbar'
-import { AppButton } from '@/components/app-button'
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@cfdm/ui/components/table'
+  DataGridCard,
+  columnDefFromDataGrid,
+} from '@/components/data-grid-card'
+import type { DataGridColumn } from '@/components/data-grid-types'
+import { ListFiltersBar } from '@/components/list-filters-bar'
+import { EmptyState } from '@/components/empty-state'
+import { TableSkeleton } from '@/components/skeletons'
+import { Button } from '@cfdm/ui/components/button'
+import type { DomainListItem } from '@/lib/schemas'
 
 export const Route = createFileRoute('/_auth/groups/$groupId')({
   loader: async ({ context: { queryClient }, params }) => {
@@ -64,7 +62,71 @@ function GroupDetailPage() {
   }, [domains, searchQuery])
 
   const isFilteredEmpty = (domains?.length ?? 0) > 0 && filteredDomains.length === 0
-  const hasRecords = filteredDomains.length > 0
+  const isTrulyEmpty = filteredDomains.length === 0 && !searchQuery.trim()
+
+  const columns = useMemo<DataGridColumn<DomainListItem>[]>(
+    () => [
+      {
+        key: 'zone_name',
+        header: 'Зона',
+        icon: GlobeIcon,
+        sortable: true,
+        sortValue: (row) => row.zone_name,
+        cell: (row) => <span className="font-medium">{row.zone_name}</span>,
+      },
+      {
+        key: 'status',
+        header: 'Статус',
+        cell: (row) => <StatusBadge status={row.status} />,
+      },
+      {
+        key: 'service_count',
+        header: 'Сервисы',
+        sortable: true,
+        sortValue: (row) => row.service_count,
+        className: 'tabular-nums',
+        cell: (row) => (
+          <Button
+            variant="link"
+            className="h-auto p-0 tabular-nums"
+            nativeButton={false}
+            render={<Link to="/services" search={{ domainId: row.id }} />}
+          >
+            {row.service_count}
+          </Button>
+        ),
+      },
+      {
+        key: 'actions',
+        header: '',
+        enableHiding: false,
+        className: 'text-right',
+        cell: (row) => (
+          <Button
+            variant="outline"
+            size="sm"
+            nativeButton={false}
+            render={
+              <Link to="/domains/$domainId" params={{ domainId: String(row.id) }} />
+            }
+          >
+            Обзор
+          </Button>
+        ),
+      },
+    ],
+    [],
+  )
+
+  const emptyAction = isFilteredEmpty ? (
+    <Button variant="outline" onClick={() => setSearchQuery('')}>
+      Сбросить фильтр
+    </Button>
+  ) : (
+    <Button variant="outline" nativeButton={false} render={<Link to="/groups" />}>
+      Открыть канбан групп
+    </Button>
+  )
 
   return (
     <PageShell>
@@ -76,13 +138,9 @@ function GroupDetailPage() {
             : 'Домены в группе'
         }
         actions={
-          <AppButton
-            variant="outline"
-            nativeButton={false}
-            render={<Link to="/groups" />}
-          >
+          <Button variant="outline" nativeButton={false} render={<Link to="/groups" />}>
             К группам
-          </AppButton>
+          </Button>
         }
       />
       <QueryState
@@ -93,97 +151,43 @@ function GroupDetailPage() {
           void refetchGroup()
           void refetchDomains()
         }}
-        skeleton={<TableSkeleton rows={5} columns={4} />}
+        skeleton={<TableSkeleton rows={5} cols={4} />}
       >
-        <DataTableCard
-          title="Домены группы"
-          description="Список доменов, назначенных этой группе"
-          emptyTitle={
-            isFilteredEmpty ? 'Ничего не найдено' : 'В группе нет доменов'
-          }
-          emptyDescription={
-            isFilteredEmpty
-              ? 'Измените поисковый запрос'
-              : 'Перетащите домены на канбане групп или назначьте группу при импорте'
-          }
-          emptyIcon={GlobeIcon}
-          isEmpty={!hasRecords}
-          emptyAction={
-            isFilteredEmpty ? (
-              <AppButton variant="outline" onClick={() => setSearchQuery('')}>
-                Сбросить фильтр
-              </AppButton>
-            ) : (
-              <AppButton
-                variant="outline"
-                nativeButton={false}
-                render={<Link to="/groups" />}
-              >
-                Открыть канбан групп
-              </AppButton>
-            )
-          }
-          toolbar={
-            <TableToolbar
-              value={searchQuery}
-              onChange={setSearchQuery}
-              placeholder="Поиск по зоне…"
-            />
-          }
-        >
-          {hasRecords && (
-            <Table>
-              <TableHeader>
-                <TableRow className="h-10">
-                  <TableHead>Зона</TableHead>
-                  <TableHead>Статус</TableHead>
-                  <TableHead>Сервисы</TableHead>
-                  <TableHead className="text-right">Действия</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredDomains.map((domain) => (
-                  <TableRow key={domain.id} className="h-10 text-sm">
-                    <TableCell className="font-medium">{domain.zone_name}</TableCell>
-                    <TableCell>
-                      <StatusBadge status={domain.status} />
-                    </TableCell>
-                    <TableCell>
-                      <AppButton
-                        variant="link"
-                        className="h-auto p-0 tabular-nums"
-                        nativeButton={false}
-                        render={
-                          <Link
-                            to="/services"
-                            search={{ domainId: domain.id }}
-                          />
-                        }
-                      >
-                        {domain.service_count}
-                      </AppButton>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <AppButton
-                        variant="outline"
-                        size="sm"
-                        nativeButton={false}
-                        render={
-                          <Link
-                            to="/domains/$domainId"
-                            params={{ domainId: String(domain.id) }}
-                          />
-                        }
-                      >
-                        Обзор
-                      </AppButton>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </DataTableCard>
+        {isTrulyEmpty || isFilteredEmpty ? (
+          <EmptyState
+            icon={GlobeIcon}
+            title={isFilteredEmpty ? 'Ничего не найдено' : 'В группе нет доменов'}
+            description={
+              isFilteredEmpty
+                ? 'Измените поисковый запрос'
+                : 'Перетащите домены на канбане групп или назначьте группу при импорте'
+            }
+            action={emptyAction}
+          />
+        ) : (
+          <DataGridCard
+            title="Домены группы"
+            description="Список доменов, назначенных этой группе"
+            columns={columnDefFromDataGrid(columns)}
+            data={filteredDomains}
+            rowId={(row) => String(row.id)}
+            emptyTitle="В группе нет доменов"
+            pinLastColumn
+            actions={
+              <ListFiltersBar
+                search={{
+                  value: searchQuery,
+                  onChange: setSearchQuery,
+                  placeholder: 'Поиск по зоне…',
+                }}
+                shown={filteredDomains.length}
+                total={domains?.length ?? 0}
+                showReset={Boolean(searchQuery.trim())}
+                onReset={() => setSearchQuery('')}
+              />
+            }
+          />
+        )}
       </QueryState>
     </PageShell>
   )
diff --git a/apps/web/src/routes/_auth/index.tsx b/apps/web/src/routes/_auth/index.tsx
index a9b912c..666e405 100644
--- a/apps/web/src/routes/_auth/index.tsx
+++ b/apps/web/src/routes/_auth/index.tsx
@@ -27,8 +27,8 @@ import {
 import { PageHeader } from '@/components/page-header'
 import { PageShell } from '@/components/page-shell'
 import { QueryState } from '@/components/query-state'
-import { SectionCardsSkeleton } from '@/components/section-cards-skeleton'
-import { KpiCard } from '@/components/kpi-card'
+import { SectionCardsSkeleton } from '@/components/skeletons'
+import { SectionCards } from '@/components/section-cards'
 import { ChartCard } from '@/components/chart-card'
 import { ExpiringCertsCard } from '@/components/expiring-certs-card'
 import { StatusBadge } from '@/components/status-badge'
@@ -63,15 +63,15 @@ const statusChartConfig = {
   count: { label: 'Сертификаты' },
   active: { label: 'Активен', color: 'var(--success)' },
   ok: { label: 'OK', color: 'var(--success)' },
-  warning: { label: 'Предупреждение', color: 'var(--chart-3)' },
-  pending_push: { label: 'Ожидает', color: 'var(--chart-2)' },
+  warning: { label: 'Предупреждение', color: 'var(--warning)' },
+  pending_push: { label: 'Ожидает', color: 'var(--info)' },
   expired: { label: 'Истёк', color: 'var(--destructive)' },
   error: { label: 'Ошибка', color: 'var(--destructive)' },
   unknown: { label: 'Неизвестно', color: 'var(--muted-foreground)' },
 } satisfies ChartConfig
 
 const groupChartConfig = {
-  count: { label: 'Домены', color: 'var(--chart-2)' },
+  count: { label: 'Домены', color: 'var(--chart-1)' },
 } satisfies ChartConfig
 
 function DashboardPage() {
@@ -135,38 +135,50 @@ function DashboardPage() {
         }}
       >
         <div className="flex flex-col gap-4">
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            <KpiCard
-              label="Домены"
-              value={domains?.length ?? 0}
-              icon={GlobeIcon}
-              actionLabel="Управление"
-              actionRender={<Link to="/domains" />}
-            />
-            <KpiCard
-              label="Группы доменов"
-              value={groups?.length ?? 0}
-              icon={FolderTreeIcon}
-              actionLabel="Канбан"
-              actionRender={<Link to="/groups" />}
-            />
-            <KpiCard
-              label="Сервисы"
-              value={serviceCount}
-              icon={ServerIcon}
-              actionLabel="Управление"
-              actionRender={
-                <Link to="/services" search={{ domainId: undefined }} />
-              }
-            />
-            <KpiCard
-              label="Сертификаты"
-              value={certs?.length ?? 0}
-              icon={ShieldCheckIcon}
-              actionLabel="Мониторинг"
-              actionRender={<Link to="/certificates" />}
-            />
-          </div>
+          <SectionCards
+            items={[
+              {
+                label: 'Домены',
+                value: domains?.length ?? 0,
+                icon: <GlobeIcon className="size-4" />,
+                hint: (
+                  <Link to="/domains" className="hover:underline">
+                    Управление
+                  </Link>
+                ),
+              },
+              {
+                label: 'Группы доменов',
+                value: groups?.length ?? 0,
+                icon: <FolderTreeIcon className="size-4" />,
+                hint: (
+                  <Link to="/groups" className="hover:underline">
+                    Канбан
+                  </Link>
+                ),
+              },
+              {
+                label: 'Сервисы',
+                value: serviceCount,
+                icon: <ServerIcon className="size-4" />,
+                hint: (
+                  <Link to="/services" search={{ domainId: undefined }} className="hover:underline">
+                    Управление
+                  </Link>
+                ),
+              },
+              {
+                label: 'Сертификаты',
+                value: certs?.length ?? 0,
+                icon: <ShieldCheckIcon className="size-4" />,
+                hint: (
+                  <Link to="/certificates" className="hover:underline">
+                    Мониторинг
+                  </Link>
+                ),
+              },
+            ]}
+          />
 
           <div className="grid gap-4 lg:grid-cols-2">
             <ChartCard
diff --git a/apps/web/tsconfig.app.json b/apps/web/tsconfig.app.json
index 70b09bc..61b2d29 100644
--- a/apps/web/tsconfig.app.json
+++ b/apps/web/tsconfig.app.json
@@ -8,7 +8,7 @@
     "skipLibCheck": true,
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
+    "verbatimModuleSyntax": false,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1dc74bd..daeff97 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -27,8 +27,10 @@
     "@radix-ui/react-tabs": "^1.1.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
     "lucide-react": "^1.18.0",
     "next-themes": "^0.4.6",
+    "react-day-picker": "^10.0.1",
     "recharts": "^3.8.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
new file mode 100644
index 0000000..cdb9716
--- /dev/null
+++ b/packages/ui/src/components/button-group.tsx
@@ -0,0 +1,87 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Separator } from "@cfdm/ui/components/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  })
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/packages/ui/src/components/calendar.tsx b/packages/ui/src/components/calendar.tsx
new file mode 100644
index 0000000..26cb1ec
--- /dev/null
+++ b/packages/ui/src/components/calendar.tsx
@@ -0,0 +1,221 @@
+"use client"
+
+import * as React from "react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "@cfdm/ui/lib/utils"
+import { Button, buttonVariants } from "@cfdm/ui/components/button"
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index f9055e2..4929ae3 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 
diff --git a/packages/ui/src/components/input-group.tsx b/packages/ui/src/components/input-group.tsx
index fd8ee87..1e1f7cd 100644
--- a/packages/ui/src/components/input-group.tsx
+++ b/packages/ui/src/components/input-group.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
diff --git a/packages/ui/src/components/kbd.tsx b/packages/ui/src/components/kbd.tsx
new file mode 100644
index 0000000..7009540
--- /dev/null
+++ b/packages/ui/src/components/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@cfdm/ui/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
index 556fc66..4c4fbbc 100644
--- a/packages/ui/src/components/scroll-area.tsx
+++ b/packages/ui/src/components/scroll-area.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
 
 import { cn } from "@cfdm/ui/lib/utils"
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 75d004f..093235f 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -61,9 +61,9 @@ function SelectContent({
   children,
   side = "bottom",
   sideOffset = 4,
-  align = "start",
+  align = "center",
   alignOffset = 0,
-  alignItemWithTrigger = false,
+  alignItemWithTrigger = true,
   ...props
 }: SelectPrimitive.Popup.Props &
   Pick<
@@ -83,7 +83,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
           {...props}
         >
           <SelectScrollUpButton />
diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx
index fcf4e7a..851255c 100644
--- a/packages/ui/src/components/spinner.tsx
+++ b/packages/ui/src/components/spinner.tsx
@@ -3,7 +3,7 @@ import { Loader2Icon } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
-    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
   )
 }
 
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 3fb33aa..c5fe0af 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -6,48 +6,6 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-success: var(--success);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-}
-
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
@@ -65,10 +23,14 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --success: oklch(0.527 0.154 150.069);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -77,11 +39,17 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --destructive-foreground: var(--color-red-800);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-900);
+  --info: var(--color-violet-500);
+  --info-foreground: var(--color-violet-900);
+  --warning: var(--color-yellow-500);
+  --warning-foreground: var(--color-yellow-900);
+  --invert: var(--color-zinc-900);
+  --invert-foreground: var(--color-zinc-50);
+  --focus: var(--color-blue-500);
+  --focus-foreground: var(--color-blue-900);
 }
 
 .dark {
@@ -100,10 +68,14 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --success: oklch(0.765 0.177 163.223);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
@@ -112,48 +84,66 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --destructive-foreground: var(--color-red-600);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-600);
+  --info: var(--color-violet-500);
+  --info-foreground: var(--color-violet-600);
+  --warning: var(--color-yellow-500);
+  --warning-foreground: var(--color-yellow-600);
+  --invert: var(--color-zinc-700);
+  --invert-foreground: var(--color-zinc-50);
+  --focus: var(--color-blue-500);
+  --focus-foreground: var(--color-blue-600);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --success: oklch(0.765 0.177 163.223);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-  }
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-invert-foreground: var(--invert-foreground);
+  --color-invert: var(--invert);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning: var(--warning);
+  --color-info-foreground: var(--info-foreground);
+  --color-info: var(--info);
+  --color-success-foreground: var(--success-foreground);
+  --color-success: var(--success);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-focus: var(--focus);
+  --color-focus-foreground: var(--focus-foreground);
 }
 
 @layer base {
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index f9c3764..af56960 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -8,7 +8,7 @@
     "strict": true,
     "skipLibCheck": true,
     "noEmit": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": false
   },
   "include": ["src"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 897c371..af4b45e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,7 +93,7 @@ importers:
     dependencies:
       '@base-ui/react':
         specifier: ^1.5.0
-        version: 1.5.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 1.5.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@cfdm/shared':
         specifier: workspace:*
         version: link:../../packages/shared
@@ -103,6 +103,9 @@ importers:
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/modifiers':
+        specifier: ^9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)
       '@dnd-kit/sortable':
         specifier: ^10.0.0
         version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)
@@ -124,6 +127,9 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@tanstack/react-virtual':
+        specifier: ^3.14.4
+        version: 3.14.4(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@tanstack/router-vite-plugin':
         specifier: ^1.167.18
         version: 1.167.18(@tanstack/react-router@1.170.15(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(vite@8.0.16(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0))
@@ -133,6 +139,9 @@ importers:
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      date-fns:
+        specifier: ^4.4.0
+        version: 4.4.0
       lucide-react:
         specifier: ^1.18.0
         version: 1.18.0(react@19.2.7)
@@ -142,6 +151,9 @@ importers:
       react:
         specifier: ^19.2.6
         version: 19.2.7
+      react-day-picker:
+        specifier: ^10.0.1
+        version: 10.0.1(@types/react@19.2.17)(react@19.2.7)
       react-dom:
         specifier: ^19.2.6
         version: 19.2.7(react@19.2.7)
@@ -188,6 +200,9 @@ importers:
       globals:
         specifier: ^17.6.0
         version: 17.6.0
+      tw-animate-css:
+        specifier: ^1.0.0
+        version: 1.4.0
       typescript:
         specifier: ~6.0.2
         version: 6.0.3
@@ -246,7 +261,7 @@ importers:
     dependencies:
       '@base-ui/react':
         specifier: ^1.5.0
-        version: 1.5.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 1.5.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-dialog':
         specifier: ^1.1.16
         version: 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -271,6 +286,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      date-fns:
+        specifier: ^4.4.0
+        version: 4.4.0
       lucide-react:
         specifier: ^1.18.0
         version: 1.18.0(react@19.2.7)
@@ -280,6 +298,9 @@ importers:
       react:
         specifier: ^19.0.0
         version: 19.2.7
+      react-day-picker:
+        specifier: ^10.0.1
+        version: 10.0.1(@types/react@19.2.17)(react@19.2.7)
       react-dom:
         specifier: ^19.0.0
         version: 19.2.7(react@19.2.7)
@@ -409,6 +430,9 @@ packages:
       '@types/react':
         optional: true
 
+  '@date-fns/tz@1.5.0':
+    resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
+
   '@dnd-kit/accessibility@3.1.1':
     resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
@@ -420,6 +444,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@dnd-kit/modifiers@9.0.0':
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
   '@dnd-kit/sortable@10.0.0':
     resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
     peerDependencies:
@@ -2013,6 +2043,12 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
+  '@tanstack/react-virtual@3.14.4':
+    resolution: {integrity: sha512-dZzAQP2uCDAd+9sAehqmx/DcU+B91Q4Gb0aDSM7t9bJvWDyGF9sapFNW5r1gNLsHs4wTb6ScZENJeYaHxJLiOw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@tanstack/router-core@1.171.13':
     resolution: {integrity: sha512-+NOwEj1kO/6IGmpHRIZHasYxYWpyBQGNIZAST9aNrk9Q3YlU9SgqVnl1pbLa9qAKfeNdXQIRve0RQb/0kyDeDA==}
     engines: {node: '>=20.19'}
@@ -2057,6 +2093,9 @@ packages:
     resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
     engines: {node: '>=12'}
 
+  '@tanstack/virtual-core@3.17.2':
+    resolution: {integrity: sha512-w43MvWvmShpb6kIC9MOoLyUkLmRTLPjt61bHWs+X29hACSpX+n8DvgZ3qM7cUfflKlRRcHR9KVJE6TmcqnQvcA==}
+
   '@tanstack/virtual-file-routes@1.162.0':
     resolution: {integrity: sha512-uhOeFyxLcU41HzvrxsGpiWdcMbScY1EDgbZ5K7DVRMYInbLYWAC0EA/kx9wXAoSM8q82bUG2hRl8+EAjE6XAbA==}
     engines: {node: '>=20.19'}
@@ -2513,6 +2552,9 @@ packages:
     resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
     engines: {node: '>=12'}
 
+  date-fns@4.4.0:
+    resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -3352,6 +3394,16 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
+  react-day-picker@10.0.1:
+    resolution: {integrity: sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': '>=16.8.0'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-dom@19.2.7:
     resolution: {integrity: sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==}
     peerDependencies:
@@ -4128,7 +4180,7 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
-  '@base-ui/react@1.5.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@base-ui/react@1.5.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@babel/runtime': 7.29.7
       '@base-ui/utils': 0.2.9(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -4138,7 +4190,9 @@ snapshots:
       react-dom: 19.2.7(react@19.2.7)
       use-sync-external-store: 1.6.0(react@19.2.7)
     optionalDependencies:
+      '@date-fns/tz': 1.5.0
       '@types/react': 19.2.17
+      date-fns: 4.4.0
 
   '@base-ui/utils@0.2.9(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
@@ -4151,6 +4205,8 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@date-fns/tz@1.5.0': {}
+
   '@dnd-kit/accessibility@3.1.1(react@19.2.7)':
     dependencies:
       react: 19.2.7
@@ -4164,6 +4220,13 @@ snapshots:
       react-dom: 19.2.7(react@19.2.7)
       tslib: 2.8.1
 
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.7)
+      react: 19.2.7
+      tslib: 2.8.1
+
   '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -5351,6 +5414,12 @@ snapshots:
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
 
+  '@tanstack/react-virtual@3.14.4(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/virtual-core': 3.17.2
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
   '@tanstack/router-core@1.171.13':
     dependencies:
       '@tanstack/history': 1.162.0
@@ -5416,6 +5485,8 @@ snapshots:
 
   '@tanstack/table-core@8.21.3': {}
 
+  '@tanstack/virtual-core@3.17.2': {}
+
   '@tanstack/virtual-file-routes@1.162.0': {}
 
   '@turbo/darwin-64@2.9.18':
@@ -5903,6 +5974,8 @@ snapshots:
 
   d3-timer@3.0.1: {}
 
+  date-fns@4.4.0: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -6689,6 +6762,14 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
+  react-day-picker@10.0.1(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      '@date-fns/tz': 1.5.0
+      date-fns: 4.4.0
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   react-dom@19.2.7(react@19.2.7):
     dependencies:
       react: 19.2.7