diff --git a/.agents/skills/shadcn-react/SKILL.md b/.agents/skills/shadcn-react/SKILL.md
new file mode 100644
index 0000000..4c7688d
--- /dev/null
+++ b/.agents/skills/shadcn-react/SKILL.md
@@ -0,0 +1,119 @@
+---
+name: shadcn-react
+description: Управление shadcn/ui (React) + ReUI компонентами в EvoBGP — registry, CLI, импорты, матрица выбора. Использовать при любых UI-задачах в apps/web/ или packages/ui/ (новые экраны, компоненты, формы, data-grid, filters и др.).
+---
+
+# shadcn/ui (React) + ReUI в EvoBGP
+
+EvoBGP использует **React 19 + shadcn/ui (base-nova) + ReUI** (`style: base-nova`, не Radix). Источники правды: MCP `plugin-shadcn-shadcn` + [ui.shadcn.com/docs](https://ui.shadcn.com/docs/components) + [reui.io/docs](https://reui.io/docs/components/base/).
+
+См. `.cursor/rules/web-shadcn.mdc` (основные правила) и `.cursor/rules/context7-stack.mdc` (Context7 ID стека).
+
+## Порядок UI-задачи (строго)
+
+0. **Codegraph** `codegraph_explore` — найти существующие реализации и shared-обёртки.
+1. **MCP `plugin-shadcn-shadcn`** — `get_project_registries` (должны быть `@shadcn` и `@reui`).
+2. **`search_items_in_registries`** — компонент/block/example:
+   - shadcn primitives/blocks → omit `registries` или `["@shadcn"]`
+   - Data Grid, Filters, Stepper, Kanban, Autocomplete и др. → `registries: ["@reui"]`
+3. **`get_item_examples_from_registries`** — полный код примера перед JSX.
+4. **`get_add_command_for_items`** — точная CLI-команда `pnpm dlx shadcn@latest add ...`.
+5. Выполнить add **из `apps/web`** (не из корня монорепо, не из `packages/ui`).
+6. **CLI docs (обязательно):**
+   - `@shadcn/*` → `cd apps/web && pnpm dlx shadcn@latest docs <component>` — [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components)
+   - `@reui/*` → [ReUI docs](https://reui.io/docs/components/base/<name>) + [llms.txt](https://reui.io/llms.txt)
+7. Сверить examples из MCP с API из docs CLI — реализовать только после совпадения.
+8. Адаптировать под TanStack Router / Query → `apps/web/src/`.
+9. **`get_audit_checklist`** — перед merge PR.
+
+## Размещение и импорты
+
+| Слой | Путь | Импорт |
+|------|------|--------|
+| shadcn primitives | `packages/ui/src/components/` | `@evobgp/ui/components/*` |
+| ReUI enterprise | `apps/web/src/components/reui/` | `@/components/reui/*` |
+| Проектные обёртки | `apps/web/src/components/` | `@/components/<name>` |
+
+```bash
+cd apps/web
+pnpm dlx shadcn@latest add button          # @shadcn primitive → packages/ui/src/components/
+pnpm dlx shadcn@latest add @reui/data-grid # ReUI enterprise → apps/web/src/components/reui/
+```
+
+## Матрица выбора shadcn vs ReUI
+
+| Задача | Registry | Импорт |
+|--------|----------|--------|
+| Button, Card, Sheet, Field, Sidebar | `@shadcn` | `@evobgp/ui/components/*` |
+| Blocks (sidebar-07, dashboard-01) | `@shadcn` | blocks → `apps/web/src/components/` |
+| Data Grid (sort, pagination, virtual) | `@reui` | `@/components/reui/data-grid/*` → обёртка `DataGridCard` |
+| Мультифильтры | `@reui` | `@/components/reui/filters` |
+| Number field со stepper | `@reui` | `@/components/reui/number-field` |
+| Autocomplete | `@reui` | `@/components/reui/autocomplete` → `AutoCompleteInput` |
+| Date selector / range | `@reui` | `@/components/reui/date-selector` |
+| Semantic badge (success/info/warning) | `@reui` | `@/components/reui/badge` или `StatusBadge` |
+
+**Простые списки** — shadcn `Table`. **Сложные data-списки** — ReUI data-grid (через `DataGridCard`), не shadcn Data Table.
+
+## Уже установленные shared-обёртки
+
+В `apps/web/src/components/`:
+- `PageHeader`, `PageShell` — заголовки и обёртки страниц
+- `QueryState` — обёртка loading/error/empty для TanStack Query
+- `EmptyState` — пустые списки
+- `ConfirmDialog` — подтверждения (не `window.confirm`)
+- `LoadingButton` — кнопка с loading-состоянием
+- `StatusBadge` — статусные бейджи
+- `SectionCards` — сетка KPI-карточек
+- `Skeletons` (`TableSkeleton`, `SectionCardsSkeleton`) — скелетоны
+- `TruncatedText` — текст с тултипом
+- `ModeToggle` — переключатель темы
+
+Перед созданием новой обёртки — проверить существующие через Codegraph.
+
+## Уже установленные ReUI-компоненты
+
+В `apps/web/src/components/reui/`:
+- `autocomplete`, `badge`, `data-grid/*`, `date-selector`, `filters`, `number-field`
+
+Перед добавлением дубликата — проверить 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`.
+
+## Semantic tokens (Styling)
+
+ReUI расширяет тему shadcn токенами `--success`, `--info`, `--warning`, `--destructive-foreground`, `--invert` — уже в `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
+
+## Запрещено
+
+- Писать UI по памяти, не проверив MCP
+- Копипаст с ui.shadcn.com без examples/add из MCP
+- Самописные примитивы, если есть item в registry
+- Пропускать MCP «потому что компонент простой»
+- Класть ReUI в `packages/ui` или импортировать как `@evobgp/ui`
+- Radix-варианты (`/docs/components/radix/...`) — только Base UI
+- Raw Tailwind-цвета вместо ReUI semantic `variant`
+- Использовать Tabler/Bootstrap/Material UI
+
+## Чеклист перед завершением UI-задачи
+
+- [ ] MCP search (с правильным registry) + examples
+- [ ] `shadcn add <name>` (или `@reui/<name>`) из `apps/web`
+- [ ] Импорты: `@evobgp/ui/components/*` для shadcn, `@/components/reui/*` для ReUI
+- [ ] Зависимости в `apps/web/package.json`
+- [ ] `pnpm --filter @evobgp/web run typecheck` — exit 0
+- [ ] `pnpm --filter @evobgp/web run lint` — exit 0
+- [ ] `pnpm --filter @evobgp/web run build` — exit 0
diff --git a/.cursor/plans/evobgp_→_react+shadcn_ui+reui_99d7c4ae.plan.md b/.cursor/plans/evobgp_→_react+shadcn_ui+reui_99d7c4ae.plan.md
new file mode 100644
index 0000000..a06b8c2
--- /dev/null
+++ b/.cursor/plans/evobgp_→_react+shadcn_ui+reui_99d7c4ae.plan.md
@@ -0,0 +1,345 @@
+---
+name: EvoBGP → React+shadcn/ui+ReUI
+overview: "Big-bang миграция web UI EvoBGP с SvelteKit+Svelte5 на React 19 + Vite + TanStack Router/Query + shadcn/ui (Base UI, base-nova) + ReUI registry, идентично эталону vps-tracker. Структура — pnpm workspaces monorepo (apps/web + packages/ui как @evobgp/ui). Скоуп: только фронтенд; Go-бэкенд, OpenAPI, nginx, compose и bake-конфиги сохраняются с минимальной правкой путей сборки. Старый web/ заменяется полностью; перенос доменных экранов идёт по одному роуту через MCP-shadcn с проверкой по docs."
+todos:
+  - id: "1"
+    content: "Этап 0: Установить MCP в workspace EvoBGP (plugin-shadcn-shadcn с @reui, plugin-context7, cursor-ide-browser) — скопировать .cursor/mcp.json из vps-tracker"
+    status: pending
+  - id: "2"
+    content: "Этап 1: Архивировать web/ → web-legacy-svelte/, зафиксировать инвентарь 13 роутов и компонентов"
+    status: pending
+  - id: "3"
+    content: "Этап 2: Создать pnpm workspaces монорепо — pnpm-workspace.yaml, корневой package.json, tsconfig.base.json, .npmrc, .nvmrc"
+    status: pending
+  - id: "4"
+    content: "Этап 3: Создать packages/ui (@evobgp/ui) — package.json, components.json (base-nova + @reui), src/styles/globals.css (копия vps-tracker), lib/utils.ts, hooks/use-mobile.ts"
+    status: pending
+  - id: "5"
+    content: "Этап 4: Добавить shadcn-примитивы в packages/ui через MCP+CLI (33 компонента идентично vps-tracker)"
+    status: pending
+  - id: "6"
+    content: "Этап 5: Создать apps/web каркас — package.json (@evobgp/web), components.json, tsconfig, vite.config.ts (TanStackRouterPlugin+react+tailwindcss, alias @ и @evobgp/ui/*, proxy /v1)"
+    status: pending
+  - id: "7"
+    content: "Этап 6: React-инициализация — main.tsx (StrictMode→ThemeProvider→QC→Router+Toaster), lib/queryClient.ts, lib/router.ts (Register augmentation), routes/__root.tsx, theme-provider.tsx, index.html"
+    status: pending
+  - id: "8"
+    content: "Этап 7: Перенос app-shell (sidebar-07) и shared-обёрток (PageShell, PageHeader, EmptyState, QueryState, ConfirmDialog, StatusBadge, DataGridCard, FormSheet, FormField, LoadingButton, skeletons) из vps-tracker с адаптацией брендинга"
+    status: pending
+  - id: "9"
+    content: "Этап 8: Перенос API-клиента и типов из legacy — api-client.ts (Bearer localStorage, Idempotency-Key, RFC 9457 Problem, waitForJob, apiPageAll), types/api.ts, queries/* по доменам"
+    status: pending
+  - id: "10"
+    content: "Этап 9: Добавить ReUI enterprise через MCP+CLI — @reui/data-grid, filters, autocomplete, date-selector, number-field, color-picker, badge"
+    status: pending
+  - id: "11"
+    content: "Этап 10.1: Роуты _auth layout + settings (token+theme) + access (session+api-keys) — простые экраны"
+    status: pending
+  - id: "12"
+    content: "Этап 10.2: Роуты index (dashboard KPI+recent) + modules/index (DataGridCard) + modules/$moduleId (детали с cards)"
+    status: pending
+  - id: "13"
+    content: "Этап 10.3: Роуты network (peers/speakers/BIRD tabs, live refetchInterval) + operations (jobs/revisions/diff, waitForJob) + schedule"
+    status: pending
+  - id: "14"
+    content: "Этап 10.4: Роуты directories (communities/DoH) + monitoring (bird/postgres/runtime) + tenant-settings + редиректы peers→network, revisions→operations"
+    status: pending
+  - id: "15"
+    content: "Этап 11: Обновить deploy/docker/evobgp-web/Dockerfile (pnpm+corepack, COPY apps/web + packages, dist вместо build); nginx.conf НЕ трогать; проверить bake"
+    status: pending
+  - id: "16"
+    content: "Этап 12: Обновить .gitea/workflows/ci.yaml web job (pnpm, tsc --noEmit, eslint, build) + path-filter apps/web/** + packages/ui/**"
+    status: pending
+  - id: "17"
+    content: "Этап 13: Cursor rules — удалить web-shadcn.mdc; скопировать shadcn-mcp/reui-mcp/frontend-* из vps-tracker; обновить engineering.mdc (DEP-04, TEST-04, DOC-SYNC) и context7-stack.mdc; создать .agents/skills/{shadcn,reui}"
+    status: pending
+  - id: "18"
+    content: "Этап 14: Финал — pnpm build без ошибок, MCP get_audit_checklist, cursor-ide-browser smoke 13 роутов, удалить web-legacy-svelte/, коммит feat(frontend)"
+    status: pending
+isProject: false
+---
+
+# Plan: Миграция EvoBGP web UI на React + shadcn/ui + ReUI
+
+## Контекст
+
+**Цель:** Перевести `web/` EvoBGP с SvelteKit 2.50 + Svelte 5.54 + shadcn-svelte на стек идентичный `vps-tracker/apps/web`:
+- **Стек:** React 19 + Vite 7 + TanStack Router/Query v5 + shadcn/ui (Base UI, `style: base-nova`) + ReUI registry `@reui` + Tailwind v4 monorepo + lucide-react + react-hook-form + Zod + recharts + sonner + next-themes
+- **Структура:** pnpm workspaces monorepo — `apps/web` (SPA) + `packages/ui` (`@evobgp/ui` barrel)
+- **Скоуп:** только frontend. Go-бэкенд (`internal/*`), OpenAPI (`docs/openapi.yaml`), compose/bake/nginx — не трогаются (минимальная правка только путей сборки в Dockerfile)
+- **Стратегия:** big-bang. Старый `web/` архивируется в `web-legacy-svelte/` и удаляется в финале. Рабочий UI создаётся с нуля
+- **Эталон:** `c:\Users\shats\Dev\vps-tracker\apps\web\` + `c:\Users\shats\Dev\vps-tracker\packages\ui\`
+
+**Инвентарь существующего EvoBGP web** (из исследования):
+- 13 роутов SvelteKit: `/`, `/modules`, `/modules/[id]`, `/network` (+редирект `/peers`), `/operations` (+редирект `/revisions`), `/monitoring`, `/schedule`, `/directories`, `/access`, `/tenant-settings`, `/settings`
+- ~130 доменных `.svelte`-компонентов в `web/src/lib/components/{modules,network,operations,monitoring,tenant-settings,access,...}`
+- API-клиент `web/src/lib/api/client.ts` + типы `web/src/lib/api/types.ts` (4301 строка OpenAPI, 76 эндпоинтов)
+- Токен в localStorage (`evobgp_api_token`), Bearer, RFC 9457 errors, cursor-пагинация, Idempotency-Key, polling jobs
+- Тема `neutral` в `web/src/routes/layout.css` с semantic tokens `--success/--warning/--info`
+- nginx.conf — SPA fallback `try_files $uri $uri/ /index.html` (нейтрален к фреймворку, не меняется)
+- Сейчас npm (НЕ pnpm), корневого `pnpm-workspace.yaml` нет
+
+**Архитектура после миграции**:
+
+```mermaid
+flowchart TB
+    subgraph EvoBGP[EvoBGP repo root]
+        PWS[pnpm-workspace.yaml]
+        RP[package.json + pnpm-lock.yaml]
+        TSB[tsconfig.base.json]
+        NVM[.nvmrc Node 22]
+        MCP[.cursor/mcp.json]
+        subgraph Apps
+            AW[apps/web — React SPA]
+        end
+        subgraph Packages
+            UI[packages/ui — @evobgp/ui]
+        end
+        Deploy[deploy/ nginx+compose+bake]
+        GoAPI[internal/httpapi — Go API]
+    end
+    AW -->|imports| UI
+    AW -->|/v1 proxy dev| GoAPI
+    Deploy -->|Dockerfile build| AW
+    Deploy -->|nginx /v1 proxy| GoAPI
+    UI -->|globals.css @source| AW
+```
+
+---
+
+## Этапы (последовательность, safe-by-design)
+
+### Этап 0 — MCP environment (предварительный)
+
+Установить MCP-серверы в workspace EvoBGP. Источник: `c:\Users\shats\.cursor\projects\c-Users-shats-Dev-vps-tracker\mcps\` — там работают:
+- `plugin-shadcn-shadcn` (serverName `shadcn`) — даёт инструменты `get_project_registries`, `search_items_in_registries` (с поддержкой `registries: ["@reui"]`), `get_item_examples_from_registries`, `get_add_command_for_items`, `view_items_in_registries`, `list_items_in_registries`, `get_audit_checklist`
+- `plugin-context7-plugin-context7` — docs-lookup React/TanStack/Recharts
+- `cursor-ide-browser` — визуальная проверка UI
+
+Скопировать `.cursor/mcp.json` из vps-tracker → `c:\Users\shats\Dev\EvoBGP\.cursor\mcp.json`. Enable серверы в Cursor Settings. ReUI MCP и codegraph — **не существуют как отдельные MCP** (исследовано); ReUI доступен **через** `plugin-shadcn-shadcn` с `registries: ["@reui"]`.
+
+### Этап 1 — Подготовка
+
+1. **Зафиксировать инвентарь**: список 13 роутов + ~130 компонентов + API-клиент + типы. Не удалять пока ничего.
+2. **Архивировать старый стек**: `web/` → `web-legacy-svelte/`. Оставить до финала как референс при переносе экранов.
+
+### Этап 2 — Монорепо-каркас
+
+Корневые файлы:
+
+- `pnpm-workspace.yaml`: `packages: ['apps/*', 'packages/*']`
+- Корневой `package.json`: `{"private": true, "scripts": {"dev": "pnpm --filter @evobgp/web dev", "build": "pnpm --filter @evobgp/web build", "lint": "pnpm -r lint"}}`. Существующий корневой `package.json` (semantic-release/commitlint) — слить в один или оставить как `package.release.json` (решить по ходу).
+- `tsconfig.base.json`: `strict: true`, `target: ES2022`, `moduleResolution: bundler`, `jsx: react-jsx`, `paths: {"@/*": ["./apps/web/src/*"], "@evobgp/ui/components/*": ["./packages/ui/src/components/*"], "@evobgp/ui/hooks/*": ["./packages/ui/src/hooks/*"], "@evobgp/ui/lib/utils": ["./packages/ui/src/lib/utils.ts"]}`
+- `.npmrc`: `engine-strict=true`
+- `.nvmrc`: `22` (приводим к единой версии с Dockerfile)
+- `.gitignore`: добавить `node_modules/`, `dist/`, `routeTree.gen.ts` (опц.)
+
+### Этап 3 — `packages/ui` (@evobgp/ui)
+
+Структура полностью повторяет `c:\Users\shats\Dev\vps-tracker\packages\ui\`:
+
+- `packages/ui/package.json`:
+  - `name: "@evobgp/ui"`
+  - `exports`: `./components/*`, `./hooks/*`, `./lib/utils`, `./globals.css`
+  - `dependencies`: `@base-ui/react`, `class-variance-authority`, `clsx`, `cmdk`, `date-fns`, `lucide-react`, `next-themes`, `react-day-picker`, `recharts`, `sonner`, `tailwind-merge`
+  - `peerDependencies`: `react`, `react-dom` (19)
+- `packages/ui/components.json` (точная копия vps-tracker с заменой `@cfdm` → `@evobgp`):
+  ```json
+  {
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "base-nova",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {"config": "", "css": "src/styles/globals.css", "baseColor": "neutral", "cssVariables": true},
+    "iconLibrary": "lucide",
+    "registries": {"@reui": "https://reui.io/r/{style}/{name}.json"},
+    "aliases": {"components": "@evobgp/ui/components", "utils": "@evobgp/ui/lib/utils", "hooks": "@evobgp/ui/hooks", "lib": "@evobgp/ui/lib", "ui": "@evobgp/ui/components"}
+  }
+  ```
+- `packages/ui/src/styles/globals.css`: **точная копия** `c:\Users\shats\Dev\vps-tracker\packages\ui\src\styles\globals.css` (Tailwind v4 + `tw-animate-css` + `@source "../"` + `@source "../../../apps/web/src"` + `:root`/`.dark` со всеми oklch-токенами + ReUI semantic tokens `--success/--info/--warning/--destructive-foreground/--invert/--focus` + chart-1..5 + sidebar-* + `@theme inline` + `@layer base`)
+- `packages/ui/src/lib/utils.ts`: `cn()` через `clsx` + `tailwind-merge`
+- `packages/ui/src/hooks/use-mobile.ts`
+
+### Этап 4 — shadcn-примитивы через MCP
+
+Перед каждым `add` — обязательно через MCP:
+1. `search_items_in_registries` → `get_item_examples_from_registries` → `get_add_command_for_items`
+2. CLI `pnpm dlx shadcn@latest docs <component>` сверка с [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components)
+
+Компоненты (идентично набору `vps-tracker/packages/ui/src/components/`):
+```
+button button-group card input textarea label select checkbox field
+separator scroll-area table badge tabs dialog alert-dialog sheet popover
+dropdown-menu tooltip breadcrumb sidebar skeleton sonner spinner alert
+command kbd calendar slider chart input-group input-otp toggle
+```
+Команда: `cd apps/web && pnpm dlx shadcn@latest add button card input ...` (CLI пишет в `packages/ui/src/components/` через aliases).
+
+Применение темы: `pnpm dlx shadcn@latest apply b2fA --only theme -y` (обновит `:root`/`.dark` в `globals.css`).
+
+### Этап 5 — `apps/web` каркас
+
+- `apps/web/package.json` (`@evobgp/web`): deps из `vps-tracker/apps/web/package.json` с заменой `@cfdm/*` → `@evobgp/*`:
+  - `react`, `react-dom` 19
+  - `@tanstack/react-router`, `@tanstack/react-router-devtools`, `@tanstack/react-query`, `@tanstack/react-query-devtools`, `@tanstack/react-table`, `@tanstack/react-virtual`
+  - `@hookform/resolvers`, `react-hook-form`, `zod` (v3 для совместимости с RHF-resolvers — как в vps-tracker)
+  - `class-variance-authority`, `cmdk`, `date-fns`, `lucide-react`, `next-themes`, `react-day-picker`, `recharts`, `sonner`
+  - `@dnd-kit/core`, `@dnd-kit/modifiers`, `@dnd-kit/sortable`, `@dnd-kit/utilities`
+  - devDeps: `@tailwindcss/vite`, `@tanstack/router-plugin`, `@types/react`, `@types/react-dom`, `@vitejs/plugin-react`, `happy-dom`, `tailwindcss`, `tw-animate-css`, `typescript`, `vite`, `vitest`
+- `apps/web/components.json` (алиасы web-side: `@/components`, `@/hooks`, `@/lib`, `utils: @evobgp/ui/lib/utils`, `ui: @evobgp/ui/components`; registries `@reui`; css `../../packages/ui/src/styles/globals.css`)
+- `apps/web/vite.config.ts` (точная копия vps-tracker с заменой `@cfdm` → `@evobgp`): плагины `TanStackRouterPlugin({ target: 'react', autoCodeSplitting: true })` → `react()` → `tailwindcss()`; alias `@`, `@evobgp/ui/*`; server port 5173, proxy `/v1` и `/metrics` → `http://127.0.0.1:8080`
+- `apps/web/tsconfig.json` extends `../../tsconfig.base.json`
+- `apps/web/index.html` (#root, anti-FOUC тема-скрипт `evobgp-theme`)
+
+### Этап 6 — React-инициализация
+
+Точная копия vps-tracker с заменой путей:
+
+- `apps/web/src/main.tsx`: `StrictMode → ThemeProvider → QueryClientProvider → RouterProvider + <Toaster richColors position="top-right" />`, единственный `import '@evobgp/ui/globals.css'`
+- `apps/web/src/lib/queryClient.ts`: `staleTime: 60_000, retry: 1, refetchOnWindowFocus: false`
+- `apps/web/src/lib/router.ts`: `createRouter({ routeTree, context, defaultPreload: 'intent', scrollRestoration: true })` + `declare module '@tanstack/react-router'` Register
+- `apps/web/src/components/theme-provider.tsx`: next-themes `attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange`
+- `apps/web/src/routes/__root.tsx`: `createRootRouteWithContext<{ queryClient }>` + `<AppShell><Outlet /></AppShell>`
+
+### Этап 7 — Перенос app-shell и shared-обёрток
+
+Перенести из `vps-tracker/apps/web/src/components/` с адаптацией брендинга/навигации:
+- `layout/app-shell.tsx` (block sidebar-07, `SidebarProvider → Sidebar collapsible="icon" → SidebarHeader/SidebarContent(navGroups)/SidebarFooter + SidebarInset(header sticky h-16 backdrop-blur + SidebarTrigger + Breadcrumb + actions + main)`). `render={<Link to={item.to} />}` — **Base UI render-prop, не Radix asChild**. Навигация подставляется под EvoBGP-экраны.
+- `mode-toggle.tsx`, `page-shell.tsx`, `page-header.tsx`, `empty-state.tsx`, `query-state.tsx`, `confirm-dialog.tsx`, `status-badge.tsx`, `section-cards.tsx`, `form-sheet.tsx`, `form-field.tsx`, `loading-button.tsx`, `skeletons.tsx`
+- `data-grid-card.tsx` (обёртка над `@reui/data-grid`) — полная копия с типизированным `DataGridCardProps<TData>`
+
+### Этап 8 — API-клиент и типы (перенос из legacy)
+
+- `apps/web/src/lib/api-client.ts`: перенос логики из `web-legacy-svelte/src/lib/api/client.ts`:
+  - `TOKEN_STORAGE_KEY = 'evobgp_api_token'`
+  - `mergeHeaders`: Accept JSON + Bearer из localStorage
+  - `apiFetch`, `apiJSON<T>`, `apiMutate<T>` с auto-Idempotency-Key
+  - `parseResponse<T>`: 204/205→undefined, ошибки → `ApiError` с RFC 9457 Problem
+  - `waitForJob(jobId, opts?)`: poll `GET /v1/jobs/{id}` каждые 400ms
+  - `apiPageAll<T>`: cursor-пагинация (`items`/`next_cursor`/`has_more`)
+- `apps/web/src/types/api.ts`: перенос всех типов из `web-legacy-svelte/src/lib/api/types.ts` (`ModuleRow`, `BgpPeer`, `SpeakerRow`, `RevisionRow`, `JobRow`, `AuthSession`, `ApiKey`, `PostgresOverview`, etc.)
+- `apps/web/src/queries/` — по доменам: `auth.ts`, `modules.ts`, `network.ts`, `operations.ts`, `monitoring.ts`, `directories.ts`, `access.ts`, `settings.ts` (queryOptions + key factories)
+
+### Этап 9 — ReUI enterprise-компоненты
+
+Через MCP `search_items_in_registries` с `registries: ["@reui"]` → `get_item_examples` → `get_add_command`:
+```bash
+cd apps/web
+pnpm dlx shadcn@latest add @reui/data-grid
+pnpm dlx shadcn@latest add @reui/filters
+pnpm dlx shadcn@latest add @reui/autocomplete
+pnpm dlx shadcn@latest add @reui/date-selector
+pnpm dlx shadcn@latest add @reui/number-field
+pnpm dlx shadcn@latest add @reui/color-picker
+pnpm dlx shadcn@latest add @reui/badge
+```
+Документация для `@reui/*`: [reui.io/docs/components/base/](https://reui.io/docs/components/base) + [llms.txt](https://reui.io/llms.txt) — **не** ui.shadcn.com для ReUI.
+
+Ложатся в `apps/web/src/components/reui/` (НЕ в packages/ui). Post-add: импорты shadcn-примитивов внутри ReUI → `@evobgp/ui/components/*`. Проверить что `@tanstack/react-table`, `@tanstack/react-virtual`, `@dnd-kit/*`, `date-fns`, `react-day-picker` попали в `apps/web/package.json`.
+
+### Этап 10 — Реализация 13 роутов (поэтапно)
+
+Каждый роут — отдельная подзадача. Порядок от простого к сложному (позволяет рано верифицировать стек):
+
+| # | Файл (TanStack file-based) | Что делает | Источник (legacy) |
+|---|---|---|---|
+| 1 | `routes/_auth.tsx` + `_auth.tsx` layout | auth guard (токен в localStorage) | `routes/+layout.ts` |
+| 2 | `routes/_auth/settings.tsx` | API-токен + тема (свет/тёмн/сист) | `routes/settings/+page.svelte` |
+| 3 | `routes/_auth/access.tsx` | `GET /v1/auth/session` + список API-ключей | `routes/access/+page.svelte` |
+| 4 | `routes/index.tsx` | dashboard: KPI + recent jobs/revisions + network status | `routes/+page.svelte` |
+| 5 | `routes/_auth/modules/index.tsx` | список модулей (DataGridCard) | `routes/modules/+page.svelte` |
+| 6 | `routes/_auth/modules/$moduleId.tsx` | детали модуля (cards: AS/Cdn/Domain/IpRange) | `routes/modules/[moduleId]/+page.svelte` |
+| 7 | `routes/_auth/network.tsx` | peers + speakers + BIRD settings (tabs) | `routes/network/+page.svelte` |
+| 8 | `routes/_auth/operations.tsx` | jobs + revisions + diff (tabs, waitForJob) | `routes/operations/+page.svelte` |
+| 9 | `routes/_auth/schedule.tsx` | refresh jobs (tabs all/refresh/failed) | `routes/schedule/+page.svelte` |
+| 10 | `routes/_auth/directories.tsx` | BGP communities + DoH profiles (tabs) | `routes/directories/+page.svelte` |
+| 11 | `routes/_auth/monitoring.tsx` | bird status + version + postgres + runtime logs | `routes/monitoring/+page.svelte` |
+| 12 | `routes/_auth/tenant-settings.tsx` | настройки BIRD/ревизий/runtime (tabs) | `routes/tenant-settings/+page.svelte` |
+| 13 | редиректы | `/peers`→`/network`, `/revisions`→`/operations?tab=revisions` | `routes/peers`, `routes/revisions` |
+
+Для каждого роута: MCP-shadcn search+examples → `pnpm dlx shadcn@latest docs <name>` сверка с [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components) → ReUI для data-grid/filters → композиция @evobgp/ui + DataGridCard; логика переносится из соответствующего `+page.svelte` (но на TanStack Query вместо инлайн fetch). Live-данные (network, monitoring) — `refetchInterval` вместо кастомного `setInterval`.
+
+### Этап 11 — Инфраструктура деплоя
+
+**Минимальные правки (compose/bake не трогать):**
+
+`deploy/docker/evobgp-web/Dockerfile` (3 стадии → 3 стадии):
+- `deps`: установить pnpm (corepack), `COPY pnpm-workspace.yaml package.json apps/web/package.json packages/ui/package.json ./` + `COPY apps/web/ apps/web/` + `COPY packages/ packages/` → `pnpm install --frozen-lockfile`
+- `build`: `COPY . .` → `pnpm --filter @evobgp/web build`
+- `web`: `COPY --from=web-artifacts /app/apps/web/dist /usr/share/nginx/html` (вместо `/web/build`)
+
+`deploy/docker/evobgp-web/nginx.conf` — **не меняется** (SPA fallback совместим).
+
+`deploy/docker/docker-bake.hcl` — проверить что target `web-build` корректно прокидывает контекст.
+
+### Этап 12 — CI/CD
+
+`.gitea/workflows/ci.yaml`, job `web` (строки 164-181):
+- `actions/setup-node@v4` → `node-version: "22"`, `cache: pnpm`, `cache-dependency-path: pnpm-lock.yaml`
+- Добавить `pnpm install` (через corepack)
+- Заменить `npm run check` → `pnpm --filter @evobgp/web exec tsc --noEmit`
+- Заменить `npm run lint` → `pnpm --filter @evobgp/web lint` (eslint)
+- Добавить `pnpm --filter @evobgp/web build` (раньше проверялось только в Docker)
+
+Job `changes` — path-filter `web/*` → `apps/web/**` + `packages/ui/**` (расширить globs).
+
+### Этап 13 — Cursor rules + skills
+
+**Удалить** (Svelte-специфика):
+- `.cursor/rules/web-shadcn.mdc` (WEB-01..WEB-19 — всё про shadcn-svelte)
+
+**Скопировать из vps-tracker `.cursor/rules/`** (с заменой `@cfdm` → `@evobgp`, `Vps*` → `EvoBgp*`):
+- `shadcn-mcp.mdc`, `reui-mcp.mdc`, `shadcn-ui-production.mdc`, `frontend-shadcn.mdc`, `frontend-monorepo.mdc`, `frontend-ui-patterns.mdc`, `vite-tanstack-frontend.mdc`
+
+**Обновить** `engineering.mdc`:
+- `DEP-04`: «shadcn-svelte/bits-ui» → «shadcn/ui React (Base UI) + ReUI registry»
+- `TEST-04`: `npm run check` → `pnpm --filter @evobgp/web exec tsc --noEmit`; `npm run lint` → eslint
+- `DOC-SYNC-06/07`: `shadcn-svelte.com` → `ui.shadcn.com/docs` + `reui.io/docs`
+
+**Обновить** `context7-stack.mdc` Web UI таблица: убрать svelte/sveltekit/bits-ui/formsnap/`@lucide/svelte`; добавить React 19, TanStack Router/Query/Table/Virtual, ReUI llms.txt, `lucide-react`.
+
+**Создать** `c:\Users\shats\Dev\EvoBGP\.agents\skills\` (сейчас не существует):
+- `shadcn/SKILL.md` — скопировать из cloudflare-domain-manager
+- `reui/SKILL.md` — скопировать из cloudflare-domain-manager, заменить обёртки под EvoBGP (`DataGridCard`, `NetworkFiltersToolbar`)
+
+### Этап 14 — Финальная проверка и очистка
+
+1. `pnpm install && pnpm --filter @evobgp/web build` без ошибок
+2. MCP `get_audit_checklist` — пройти по чек-листу
+3. `cursor-ide-browser` smoke-тест всех 13 роутов (login через dev-токен, навигация, CRUD, dark/light toggle)
+4. Удалить `web-legacy-svelte/`
+5. Проверить что compose поднимается (`docker compose --profile reference up`)
+6. Коммит на main (gitflow по `.cursor/rules/conventional-commits.mdc`): `feat(frontend): миграция web UI на React + shadcn/ui + ReUI`
+
+---
+
+## Цитаты ключевых файлов эталона
+
+- Конфиги: [apps/web/components.json](c:\Users\shats\Dev\vps-tracker\apps\web\components.json), [packages/ui/components.json](c:\Users\shats\Dev\vps-tracker\packages\ui\components.json)
+- Стили: [packages/ui/src/styles/globals.css](c:\Users\shats\Dev\vps-tracker\packages\ui\src\styles\globals.css)
+- Инициализация: [apps/web/src/main.tsx](c:\Users\shats\Dev\vps-tracker\apps\web\src\main.tsx), [lib/queryClient.ts](c:\Users\shats\Dev\vps-tracker\apps\web\src\lib\queryClient.ts), [lib/router.ts](c:\Users\shats\Dev\vps-tracker\apps\web\src\lib\router.ts)
+- Layout: [components/layout/app-shell.tsx](c:\Users\shats\Dev\vps-tracker\apps\web\src\components\layout\app-shell.tsx)
+- Vite: [apps/web/vite.config.ts](c:\Users\shats\Dev\vps-tracker\apps\web\vite.config.ts)
+- ReUI обёртка: [components/data-grid-card.tsx](c:\Users\shats\Dev\vps-tracker\apps\web\src\components\data-grid-card.tsx)
+- API-клиент legacy: [web/src/lib/api/client.ts](c:\Users\shats\Dev\EvoBGP\web\src\lib\api\client.ts), [web/src/lib/api/types.ts](c:\Users\shats\Dev\EvoBGP\web\src\lib\api\types.ts)
+
+## Документация
+
+- [shadcn/ui Installation](https://ui.shadcn.com/docs/installation)
+- [shadcn/ui Components](https://ui.shadcn.com/docs/components)
+- [shadcn/ui Monorepo](https://ui.shadcn.com/docs/monorepo)
+- [shadcn/ui MCP Server](https://ui.shadcn.com/docs/mcp)
+- [ReUI Get Started](https://reui.io/docs/get-started)
+- [ReUI Styling](https://reui.io/docs/styling)
+- [ReUI MCP](https://reui.io/docs/mcp)
+- [ReUI llms.txt](https://reui.io/llms.txt)
+
+## Риски и митигация
+
+| Риск | Митигация |
+|---|---|
+| Big-bang = длинное окно неработающего UI в dev | Этапы 3-9 делаются параллельно с рабочим `web-legacy-svelte/`; переключение атомарно в финале |
+| ReUI на React 19 / Base UI может иметь breaking changes | MCP `get_item_examples` + dry-run `--dry-run` перед add |
+| OpenAPI drift (типы в legacy vs контракт) | Типы переносятся как есть (frontend-only scope); Zod-схемы по желанию позже |
+| npm → pnpm меняет lock-файлы и CI | Пункт 12 явно покрывает CI; corepack в Dockerfile |
+| 13 роутов = большой объём работы | Этап 10 разбит по сложности; можно остановиться после базовых и продолжить инкрементально |
\ No newline at end of file
diff --git a/.cursor/rules/context7-stack.mdc b/.cursor/rules/context7-stack.mdc
index 1f86181..0728b66 100644
--- a/.cursor/rules/context7-stack.mdc
+++ b/.cursor/rules/context7-stack.mdc
@@ -32,23 +32,28 @@ alwaysApply: true
 
 ---
 
-## Web UI (`web/`)
+## Web UI (`apps/web/` + `packages/ui/`)
 
 | Библиотека | Context7 ID | Версия в проекте | Когда |
 |------------|-------------|------------------|-------|
-| Svelte | `/websites/svelte_dev` | ^5.54 | runes, компоненты, реактивность |
-| SvelteKit | `/sveltejs/kit` | ^2.50 | routing, `load`, adapters, SSR |
+| React | `/facebook/react` | ^19.2 | hooks, components, JSX |
+| TanStack Router | `/tanstack/router` | ^1.130 | file-based routes, `createFileRoute`, `useSearch`, `Link` |
+| TanStack Query | `/tanstack/query` | ^5.90 | `useQuery`, `useMutation`, `queryOptions`, invalidation |
+| TanStack Table | `/websites/tanstack_table` | ^8.21 | data-grid колонки, сортировка (ReUI) |
+| TanStack Virtual | `/tanstack/virtual` | ^3.14 | виртуализация списков (ReUI data-grid) |
 | Vite | `/vitejs/vite/v7.3.1` | ^7.3.1 | dev server, build, plugins |
 | TypeScript | `/microsoft/typescript/v5.9.3` | ^5.9.3 | типы, strict, tsconfig |
 | Tailwind CSS | `/tailwindlabs/tailwindcss.com` | ^4.1 | v4, `@tailwindcss/vite`, утилиты |
-| shadcn-svelte | `/websites/shadcn-svelte` | CLI | примитивы `ui/core`, theming |
-| Bits UI | `/llmstxt/bits-ui_llms_txt` | ^2.17 | headless-примитивы под shadcn |
-| sveltekit-superforms | `/ciscoheat/sveltekit-superforms` | ^2.30 | формы, server actions |
-| Formsnap | `/svecosystem/formsnap` | ^2.0 | доступные поля форм |
-| Zod | `/websites/zod_dev_v4` | ^4.4 | схемы валидации |
-| TanStack Table | `/websites/tanstack_table` | table-core ^8.21 | `AppDataTable`, колонки, сортировка |
+| shadcn/ui (React) | MCP `plugin-shadcn-shadcn` + https://ui.shadcn.com/docs | base-nova | примитивы `@evobgp/ui/components/*` |
+| ReUI | https://reui.io/llms.txt + MCP с `registries: ["@reui"]` | registry | enterprise: data-grid, filters, autocomplete |
+| react-hook-form | `/react-hook-form` | ^7.60 | формы, controller |
+| Zod | `/websites/zod_dev_v4` | ^3.25 / ^4 (apps/web) | схемы валидации |
+| recharts | `/recharts/recharts` | 3.8.0 | графики через shadcn `Chart` |
+| next-themes | `/pacocoursey/next-themes` | ^0.4 | dark/light theme provider |
+| sonner | `/emilkowalski/sonner` | ^1.7 | toast notifications |
+| lucide-react | `/lucide-icons/lucide` | ^0.468 | иконки |
 
-UI-правила репозитория: `.cursor/rules/web-shadcn.mdc` (shadcn-svelte docs — первичный источник для компонентов).
+UI-правила репозитория: `.cursor/rules/web-shadcn.mdc` (MCP + shadcn/ui React docs — первичный источник для компонентов).
 
 ---
 
@@ -82,7 +87,9 @@ UI-правила репозитория: `.cursor/rules/web-shadcn.mdc` (shadcn
 ## Примеры запросов
 
 ```
-/docs /websites/svelte_dev runes $state $derived
+/docs /facebook/react hooks useState useEffect
+/docs /tanstack/router createFileRoute useSearch Link
+/docs /tanstack/query useQuery useMutation queryOptions
 /docs /golang/go/go1_24_6 net/http ServeMux pattern matching
 /docs /websites/pkg_go_dev_github_com_jackc_pgx_v5 pool acquire rows
 /docs /llmstxt/bird_xmsl_dev_llms_txt filter bgp import
diff --git a/.cursor/rules/engineering.mdc b/.cursor/rules/engineering.mdc
index 2290ae8..4112c1b 100644
--- a/.cursor/rules/engineering.mdc
+++ b/.cursor/rules/engineering.mdc
@@ -94,8 +94,8 @@ alwaysApply: true
 **DEP-03** | MUST | Миграции схемы — пары `.up.sql`/`.down.sql` для **postgres** и **sqlite**, синхронная нумерация.
 *Проверка:* `migrations/postgres/`, `migrations/sqlite/`.
 
-**DEP-04** | MUST | Web UI-библиотеки — только экосистема shadcn-svelte/bits-ui (см. `web-shadcn.mdc`).
-*Проверка:* `web/package.json` review.
+**DEP-04** | MUST | Web UI-библиотеки — только экосистема shadcn/ui (React) + ReUI (см. `web-shadcn.mdc`).
+*Проверка:* `apps/web/package.json`, `packages/ui/package.json` review.
 
 ---
 
@@ -123,7 +123,7 @@ alwaysApply: true
 **TEST-03** | MUST | Новые BIRD-сценарии в `internal/birdfmt/testdata/scenarios/*/bird.conf` + `bird -p`.
 *Проверка:* CI job `bird2`.
 
-**TEST-04** | MUST | Изменения `web/` — локально **`npm run check` и `npm run lint`** (обе команды, exit 0); CI job `web` в `.gitea/workflows/ci.yaml`. Агент: при fail lint — `npx prettier --write` затем повтор. Только `check` не заменяет `lint`.
+**TEST-04** | MUST | Изменения `apps/web/**` или `packages/ui/**` — локально **`pnpm --filter @evobgp/web run typecheck`, `lint`, `build`** (все три команды, exit 0); CI job `web` в `.gitea/workflows/ci.yaml`.
 *Проверка:* CI job `web`; `.cursor/rules/web-shadcn.mdc` WEB-19.
 
 **TEST-05** | MUST | Изменения OpenAPI — `npx @redocly/cli lint docs/openapi.yaml`.
@@ -213,7 +213,7 @@ alwaysApply: true
 **DOC-SYNC-01** | MUST | Новый API библиотеки — сверка версии в `go.mod`/`package.json` с официальной документацией.
 **DOC-SYNC-02** | NEVER | Устаревшие примеры (Svelte 4 `export let`, deprecated pgx).
 **DOC-SYNC-03** | MUST | Конфликт docs: **OpenAPI (HTTP)** → **код** → обзорные `docs/`; `.cursor/plans/` не контракт.
-**DOC-SYNC-04** | MUST | Сомнения по Svelte — Svelte MCP / `npm run check`.
+**DOC-SYNC-04** | MUST | Сомнения по React/shadcn/ReUI — MCP `plugin-shadcn-shadcn` + `pnpm --filter @evobgp/web run typecheck`.
 **DOC-SYNC-05** | MUST | BIRD — официальная документация BIRD2 + `networking-bird.mdc` + `go test ./internal/birdfmt/...`.
 
 Приоритет при сомнениях — **официальные источники**, не блоги и не «память модели».
@@ -230,7 +230,7 @@ alwaysApply: true
 go vet ./...
 go test ./... -race -count=1
 npx @redocly/cli lint docs/openapi.yaml
-# web: cd web; npm run check; npm run lint  (или scripts/lint-web.ps1)
+# web: pnpm --filter @evobgp/web run typecheck; pnpm --filter @evobgp/web run lint; pnpm --filter @evobgp/web run build
 # go fmt/lint: gofmt -w <files>; scripts/lint-go.ps1 (gofmt + vet + golangci-lint)
 # birdfmt: go test ./internal/birdfmt/... -count=1
 ```
diff --git a/.cursor/rules/web-shadcn.mdc b/.cursor/rules/web-shadcn.mdc
index f8c7ddb..cae3ce1 100644
--- a/.cursor/rules/web-shadcn.mdc
+++ b/.cursor/rules/web-shadcn.mdc
@@ -1,126 +1,131 @@
 ---
-description: EvoBGP WebUI — shadcn-svelte, Svelte 5, слои ui/core|patterns|app
+description: EvoBGP WebUI — React 19, shadcn/ui (base-nova), ReUI, TanStack Router/Query
 globs:
-  - web/**
+  - apps/web/**
+  - packages/ui/**
 alwaysApply: false
 ---
 
-# Web UI — shadcn-svelte
+# Web UI — React + shadcn/ui + ReUI
 
-**Источник правды:** https://shadcn-svelte.com/docs (не React shadcn/ui, не Legacy Docs).
+**Источники правды:**
+- shadcn/ui React: https://ui.shadcn.com/docs/components
+- ReUI Base UI: https://reui.io/docs/components/base/<name>
+- ReUI llms.txt: https://reui.io/llms.txt
+- MCP `plugin-shadcn-shadcn` (registries: `@shadcn`, `@reui`) — перед любой UI-задачей
 
-Общие правила Go/API: `.cursor/rules/engineering.mdc`. Локальная карта: `web/README.md`.
+Общие правила Go/API: `.cursor/rules/engineering.mdc`. Стек ID: `.cursor/rules/context7-stack.mdc`.
 
 ## Слои UI
 
 | Слой | Путь | Назначение |
 |------|------|------------|
-| Примитивы | `src/lib/ui/core/` | shadcn-svelte (только CLI `add`) |
-| Паттерны | `src/lib/ui/patterns/` | FormField, AppDataTable, ConfirmDialog, EmptyState |
-| App chrome | `src/lib/ui/app/` | Layout, PageHeader, `notify` |
-| Legacy | `src/lib/components/ui/` | Re-export; **не добавлять новые файлы** |
+| shadcn-примитивы | `packages/ui/src/components/` | output `shadcn add` (не трогать под кейс) |
+| ReUI enterprise | `apps/web/src/components/reui/` | output `shadcn add @reui/*` |
+| Shared обёртки | `apps/web/src/components/` | PageHeader, QueryState, ConfirmDialog, StatusBadge, SectionCards, LoadingButton |
+| Роуты | `apps/web/src/routes/` | TanStack Router (file-based) |
 
-Тема: `src/routes/layout.css`, `src/lib/ui/app/tokens.md`. CLI из `web/`: `npx shadcn-svelte@latest add <component> -y -o`.
-
----
+Тема: `packages/ui/src/styles/globals.css`. CLI из `apps/web`: `pnpm dlx shadcn@latest add <component>`.
 
 ## Правила
 
-**WEB-01** | MUST | Перед новым UI — проверить https://shadcn-svelte.com/docs/components; использовать компонент, не HTML+CSS с нуля.
-*Rationale:* Open Code + единый дизайн.
-*Проверка:* review; нет голых `<button class=…>`.
+**WEB-01** | MUST | Перед новым UI — MCP `plugin-shadcn-shadcn`: `search_items_in_registries` → `get_item_examples_from_registries` → `get_add_command_for_items`. Только после — JSX.
+*Rationale:* единый источник правды и API.
+*Проверка:* review; нет самописных примитивов, если есть registry item.
 
-**WEB-02** | MUST | Отсутствующий примитив — `npx shadcn-svelte@latest add <component> -y -o` → `src/lib/ui/core/`.
-*Rationale:* Distribution через CLI и `components.json`.
-*Проверка:* файлы только в `ui/core`.
+**WEB-02** | MUST | Отсутствующий shadcn-примитив — `pnpm dlx shadcn@latest add <component>` (из `apps/web`). ReUI — `pnpm dlx shadcn@latest add @reui/<name>`.
+*Проверка:* файлы в `packages/ui/src/components/` (для shadcn) или `apps/web/src/components/reui/` (для ReUI).
 
-**WEB-03** | NEVER | Альтернативные UI-kit'ы (Material, Vuetify, DaisyUI-only без shadcn-примитива).
-*Проверка:* `package.json` review.
+**WEB-03** | NEVER | Альтернативные UI-kit'ы (Material, Vuetify, Tabler, Bootstrap утилиты).
+*Проверка:* `apps/web/package.json` review.
 
-**WEB-04** | MUST | Комозиция по docs: все sub-компоненты (`DialogHeader`, `TableRow`, `Field`, …).
-*Проверка:* сверка со страницей компонента в docs.
+**WEB-04** | MUST | Композиция по docs: использовать под-компоненты (`CardHeader`, `TableRow`, `TabsList`, …).
+*Проверка:* сверка с shadcn/ReUI docs.
 
-**WEB-05** | MUST | Формы — Formsnap + `sveltekit-superforms`; UI в `ui/patterns/form`, не ad-hoc валидация на странице.
-*Проверка:* https://shadcn-svelte.com/docs/components/form
+**WEB-05** | MUST | Формы — `react-hook-form` + Zod; через `FormField`/`Form` обёртки.
+*Проверка:* https://ui.shadcn.com/docs/components/form
 
-**WEB-06** | MUST | Таблицы — Data Table + `@tanstack/table-core`; на страницах — `AppDataTable` из patterns.
-*Проверка:* https://shadcn-svelte.com/docs/components/data-table
+**WEB-06** | MUST | Сложные data-списки — ReUI `DataGridCard` (ReUI data-grid, не shadcn Data Table). Простые списки — shadcn `Table`.
+*Проверка:* `@/components/reui/data-grid` или `@evobgp/ui/components/table`.
 
-**WEB-07** | MUST | Toast — Sonner через `notify` из `ui/app/toast.js`.
-*Проверка:* https://shadcn-svelte.com/docs/components/sonner
+**WEB-07** | MUST | Toast — `sonner` (`Toaster` в `main.tsx`); `toast.success/error/message` из `sonner`.
+*Проверка:* https://ui.shadcn.com/docs/components/sonner
 
-**WEB-08** | MUST | Иконки — `@lucide/svelte` (`components.json` → `iconLibrary: lucide`).
-*Проверка:* imports.
+**WEB-08** | MUST | Иконки — `lucide-react` (`components.json` → `iconLibrary: lucide`).
+*Проверка:* imports; нет `@tabler/icons-react`, `@lucide/svelte`.
 
-**WEB-09** | MUST | Цвета — CSS-переменные `layout.css` и токены `tokens.md`; не hex/rgb на страницах.
-*Проверка:* grep `#[0-9a-f]{3,6}` в `routes/`.
+**WEB-09** | MUST | Цвета — CSS-переменные `globals.css` и ReUI semantic токены (`variant="success"/"info"/"warning"`); не hex/rgb на страницах.
+*Проверка:* grep `#[0-9a-f]{3,6}` в `apps/web/src/routes/`.
 
-**WEB-10** | SHOULD | Кастомизация — правка `ui/core` (Open Code), не `!important` поверх API.
+**WEB-10** | SHOULD | Кастомизация — правка `packages/ui`/`reui` (Open Code), не `!important` поверх API.
+
+**WEB-11** | MUST | `apps/web/src/routes/**` — композиция `@evobgp/ui/components/*` + `@/components/*` + `@/components/reui/*`; не копировать целые примитивы в route.
 *Проверка:* review.
 
-**WEB-11** | MUST | `routes/**` — композиция `ui/core` + `ui/patterns` + `ui/app`; не копировать целые примитивы shadcn в route.
+**WEB-12** | NEVER | Примеры Svelte/SvelteKit, Tabler, Bootstrap — без адаптации под текущий React-стек.
+*Проверка:* `pnpm --filter @evobgp/web run typecheck`.
+
+**WEB-13** | MUST | Реактивность — React 19 (`useState`, `useEffect`, TanStack Query/Router хуки); не Svelte runes, не `export let`.
+*Проверка:* `pnpm --filter @evobgp/web run typecheck`.
+
+**WEB-14** | SHOULD | Нетривиальный UI — прочитать страницу компонента shadcn/ReUI (props, a11y).
+
+**WEB-15** | MUST | Сомнения — MCP `plugin-shadcn-shadcn` + shadcn CLI docs + `pnpm --filter @evobgp/web run typecheck`.
+
+**WEB-16** | MUST | Подтверждение удаления — `ConfirmDialog` из `@/components/confirm-dialog`, не `window.confirm`.
+
+**WEB-17** | MUST | Пустые списки — `EmptyState` или через `QueryState` с `emptyTitle`.
 *Проверка:* review.
 
-**WEB-12** | NEVER | Примеры React shadcn/ui или Svelte 4 Legacy без адаптации под https://shadcn-svelte.com/docs/migration/svelte-5
-*Проверка:* `npm run check`.
+**WEB-18** | SHOULD | Повторяемая комбинация core (≥2 раза) — вынести в `apps/web/src/components/`.
 
-**WEB-13** | MUST | Реактивность — Svelte 5 runes (`$state`, `$derived`, `$effect`); не `export let` для локального state страниц.
-*Проверка:* `npm run check`; Svelte MCP.
-
-**WEB-14** | SHOULD | Нетривиальный UI — прочитать страницу компонента (props, a11y).
-*Проверка:* PR description.
-
-**WEB-15** | MUST | Сомнения — https://shadcn-svelte.com/llms.txt , Svelte MCP, `npm run check`.
-*Проверка:* локально.
-
-**WEB-19** | MUST | **После любого изменения `web/**`** — перед завершением задачи агент **обязан** выполнить в `web/`:
+**WEB-19** | MUST | **После любого изменения `apps/web/**` или `packages/ui/**`** — перед завершением задачи агент **обязан**:
 ```powershell
-npm run check
-npm run lint
+pnpm --filter @evobgp/web run typecheck
+pnpm --filter @evobgp/web run lint
+pnpm --filter @evobgp/web run build
 ```
-Если `npm run lint` падает (Prettier) — **сначала** `npx prettier --write <изменённые файлы>` или `npx prettier --write .`, затем снова `npm run check` и `npm run lint`. Не сдавать PR/ответ, пока обе команды не exit 0.
-*Rationale:* CI job `web` = `check` + `prettier --check`; `svelte-check` не ловит форматирование.
-*Проверка:* CI job `web`; pre-commit hook `prettier-web`.
+Все три команды должны exit 0. Не сдавать PR/ответ, пока все три не пройдут.
+*Rationale:* CI job `web` = typecheck + lint + build.
+*Проверка:* CI job `web`.
 
-**WEB-16** | MUST | Подтверждение удаления — `ConfirmDialog` из patterns, не `window.confirm`.
-*Проверка:* review.
+**WEB-20** | MUST | Роутинг — TanStack Router (file-based `apps/web/src/routes/`); типобезопасные `createFileRoute`, `useSearch`, `Link`. Не `react-router-dom`.
+*Проверка:* `tsr generate` в `build`/`typecheck` скриптах.
 
-**WEB-17** | MUST | Пустые списки — `EmptyState` из patterns.
-*Проверка:* review.
+**WEB-21** | MUST | Data fetching — TanStack Query (`useQuery`, `useMutation`, `queryOptions`); query-key factories в `apps/web/src/queries/`. Mutations invalidate keys, не refetch вручную.
+*Проверка:* review `queries/*.ts`.
 
-**WEB-18** | SHOULD | Повторяемая комбинация core (≥2 раза) — вынести в `ui/patterns/`.
-*Проверка:* review.
+**WEB-22** | MUST | Legacy Svelte — в `web-legacy-svelte/` (archive). Не использовать импорты оттуда в новом коде; только как референс при миграции роутов.
 
 ---
 
 ## Documentation Sync (Web)
 
-**DOC-SYNC-06** | MUST | UI — первично https://shadcn-svelte.com/docs; при конфликте с блогами/Stack Overflow побеждает официальная страница компонента.
-**DOC-SYNC-07** | MUST | Перед `add` — сверить Installation/Theming с `web/components.json` и `src/routes/layout.css`.
+**DOC-SYNC-06** | MUST | UI — первично MCP + shadcn/ui docs (React) + ReUI docs (Base UI); при конфликте с блогами/Stack Overflow побеждает официальная страница.
+**DOC-SYNC-07** | MUST | Перед `add` — сверить Installation/Theming с `apps/web/components.json`, `packages/ui/components.json` и `packages/ui/src/styles/globals.css`.
 
-Tailwind v4: https://shadcn-svelte.com/docs/migration/tailwind-v4
+Tailwind v4 + base-nova: https://ui.shadcn.com/docs/migration/tailwind-v4
+ReUI semantic tokens: https://reui.io/docs/styling
 
 ---
 
 ## Enforcement
 
-**Обязательный финальный шаг агента при правках `web/**`:** `npm run check` **и** `npm run lint` (см. **WEB-19**). Только `check` недостаточно.
+**Обязательный финальный шаг агента при правках `apps/web/**` или `packages/ui/**`** (см. **WEB-19**):
 
 ```powershell
-cd web
-npm run check
-npm run lint
-# при warn/fail lint:
-npx prettier --write .
-npm run check
-npm run lint
+pnpm --filter @evobgp/web run typecheck
+pnpm --filter @evobgp/web run lint
+pnpm --filter @evobgp/web run build
 ```
 
-**PR checklist `web/**`:**
-- [ ] `npm run check` — exit 0
-- [ ] `npm run lint` (prettier --check) — exit 0
-- [ ] `ui/core` / `ui/patterns`, не дубли примитивов
-- [ ] Новые примитивы через shadcn CLI
+**PR checklist `apps/web/**` / `packages/ui/**`:**
+- [ ] `pnpm --filter @evobgp/web run typecheck` — exit 0
+- [ ] `pnpm --filter @evobgp/web run lint` — exit 0
+- [ ] `pnpm --filter @evobgp/web run build` — exit 0
+- [ ] shadcn-примитивы в `packages/ui/src/components/`, ReUI в `apps/web/src/components/reui/`
+- [ ] Новые примитивы через shadcn CLI (`@shadcn` или `@reui`)
+- [ ] Импорты: `@evobgp/ui/components/*` для shadcn, `@/components/reui/*` для ReUI
 - [ ] Ссылка на docs компонента (если новый паттерн)
 
-**CI:** job `web` — `npm run check` + `npm run lint`.
+**CI:** job `web` — `typecheck` + `lint` + `build`.
diff --git a/.cursor/settings.json b/.cursor/settings.json
index 1f01b6d..c89a29f 100644
--- a/.cursor/settings.json
+++ b/.cursor/settings.json
@@ -1,10 +1,19 @@
 {
   "plugins": {
-    "svelte": {
+    "shadcn": {
+      "enabled": true
+    },
+    "context7-plugin": {
       "enabled": true
     },
     "claude-plugins-official/gopls-lsp": {
       "enabled": true
+    },
+    "claude-plugins-official/typescript-lsp": {
+      "enabled": true
+    },
+    "svelte": {
+      "enabled": false
     }
   }
 }
diff --git a/.cursor/skills/context7-evobgp/SKILL.md b/.cursor/skills/context7-evobgp/SKILL.md
index 59a2c24..6aa01d3 100644
--- a/.cursor/skills/context7-evobgp/SKILL.md
+++ b/.cursor/skills/context7-evobgp/SKILL.md
@@ -9,7 +9,7 @@ description: Context7 lookup для стека EvoBGP — использоват
 
 ## Workflow
 
-1. Определи область: `internal/` (Go), `web/` (Svelte), `docs/openapi.yaml`, `birdfmt`/`pipeline` (BIRD), `deploy/compose` (Docker).
+1. Определи область: `internal/` (Go), `apps/web/` + `packages/ui/` (React + shadcn/ui + ReUI), `docs/openapi.yaml`, `birdfmt`/`pipeline` (BIRD), `deploy/compose` (Docker).
 2. Найди строку в таблице `context7-stack.mdc`.
 3. Вызови `query-docs` с `libraryId` из таблицы и полным вопросом пользователя.
 4. `resolve-library-id` — только если библиотеки нет в таблице или нужна другая major-версия.
@@ -18,14 +18,17 @@ description: Context7 lookup для стека EvoBGP — использоват
 
 | Задача | libraryId |
 |--------|-----------|
-| Svelte 5 runes | `/websites/svelte_dev` |
-| SvelteKit load/forms | `/sveltejs/kit` |
-| shadcn-svelte компонент | `/websites/shadcn-svelte` |
+| React 19 hooks | `/facebook/react` |
+| TanStack Router | `/tanstack/router` |
+| TanStack Query | `/tanstack/query` |
+| shadcn/ui (React) | MCP `plugin-shadcn-shadcn` + https://ui.shadcn.com/docs |
+| ReUI Base UI | https://reui.io/llms.txt + MCP с `registries: ["@reui"]` |
 | pgx pool/query | `/websites/pkg_go_dev_github_com_jackc_pgx_v5` |
 | Go net/http | `/golang/go/go1_24_6` |
 | OpenAPI lint | `/redocly/redocly-cli` |
 | BIRD config | `/llmstxt/bird_xmsl_dev_llms_txt` |
 | Tailwind v4 | `/tailwindlabs/tailwindcss.com` |
-| Zod 4 schema | `/websites/zod_dev_v4` |
+| Zod schema | `/websites/zod_dev_v4` |
+| recharts | `/recharts/recharts` |
 
 Полный список и версии — в `context7-stack.mdc`.
diff --git a/.gitea/workflows/ci.yaml b/.gitea/workflows/ci.yaml
index 4c9c61e..4b99cc4 100644
--- a/.gitea/workflows/ci.yaml
+++ b/.gitea/workflows/ci.yaml
@@ -98,9 +98,9 @@ jobs:
                 openapi=true
                 go=true
                 ;;
-              web/README.md|web/components.json)
+              apps/web/README.md|apps/web/components.json|packages/ui/components.json)
                 ;;
-              web/*)
+              apps/web/*|packages/ui/*|packages/shared/*)
                 web=true
                 ;;
               deploy/bird/*)
@@ -126,7 +126,7 @@ jobs:
               docs/*)
                 go=true
                 ;;
-              package.json|package-lock.json|.releaserc.json)
+              package.json|package-lock.json|pnpm-lock.yaml|pnpm-workspace.yaml|.releaserc.json)
                 full_pipeline=true
                 ;;
               *)
@@ -167,18 +167,21 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
       - uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: npm
-          cache-dependency-path: web/package-lock.json
-      - name: npm ci, check, lint
+          node-version: "22"
+          cache: pnpm
+          cache-dependency-path: pnpm-lock.yaml
+      - name: pnpm install, typecheck, lint, build
         run: |
           set -euxo pipefail
-          cd web
-          npm ci
-          npm run check
-          npm run lint
+          pnpm install --frozen-lockfile
+          pnpm --filter @evobgp/web run typecheck
+          pnpm --filter @evobgp/web run lint
+          pnpm --filter @evobgp/web run build
 
   # ---------------------------------------------------------------------------
   go:
diff --git a/.gitignore b/.gitignore
index c393a50..f23f327 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,13 @@
-# Root npm (semantic-release, commitlint) — npm ci in CI, never commit deps
+# Root npm/pnpm (semantic-release, commitlint, workspaces) — never commit deps
 node_modules/
 
+# Vite / TS build output
+apps/web/dist/
+packages/*/dist/
+
+# TanStack Router auto-generated route tree
+apps/web/src/routeTree.gen.ts
+
 # Generated by deploy/docker/write-bake-override.sh (CI/local bake)
 deploy/docker/docker-bake.override.hcl
 
diff --git a/web/.npmrc b/.npmrc
similarity index 100%
rename from web/.npmrc
rename to .npmrc
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..2bd5a0a
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
diff --git a/AGENTS.md b/AGENTS.md
index 0d356a8..a19eb7c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,10 +4,10 @@
 
 ## С чего начать (минимум чтения)
 
-0. **Инженерные правила** — при изменении кода следовать [.cursor/rules/engineering.mdc](.cursor/rules/engineering.mdc); для `web/` — [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc); для `birdfmt` / `pipeline` / BIRD — [.cursor/rules/networking-bird.mdc](.cursor/rules/networking-bird.mdc). **Context7 (документация библиотек)** — закреплённые ID стека: [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc); скилл [.cursor/skills/context7-evobgp/SKILL.md](.cursor/skills/context7-evobgp/SKILL.md).
+0. **Инженерные правила** — при изменении кода следовать [.cursor/rules/engineering.mdc](.cursor/rules/engineering.mdc); для `apps/web/` + `packages/ui/` — [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc); для `birdfmt` / `pipeline` / BIRD — [.cursor/rules/networking-bird.mdc](.cursor/rules/networking-bird.mdc). **Context7 (документация библиотек)** — закреплённые ID стека: [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc); скилл [.cursor/skills/context7-evobgp/SKILL.md](.cursor/skills/context7-evobgp/SKILL.md).
 1. **[docs/README.md](docs/README.md)** — оглавление и роли читателя.
 2. **[docs/architecture.md](docs/architecture.md)** — компоненты `cmd/`, карта `internal/`, потоки данных (одного этого файла обычно достаточно для ориентации).
-3. Задача-специфично: [docs/api.md](docs/api.md), [docs/access.md](docs/access.md), [web/README.md](web/README.md) — только если меняете API, доступ или фронт.
+3. Задача-специфично: [docs/api.md](docs/api.md), [docs/access.md](docs/access.md) — только если меняете API или доступ.
 
 Источник правды по HTTP-контракту: **[docs/openapi.yaml](docs/openapi.yaml)**. Не дублируйте длинные фрагменты спецификации в ответах — ссылайтесь на путь и тег/операцию.
 
@@ -57,14 +57,18 @@
 
 Пользовательская документация в `docs/` — преимущественно на русском. Комментарии и имена в коде — в существующем стиле репозитория.
 
-## Svelte / фронтенд
+## Frontend (React + shadcn/ui + ReUI)
 
-При правках `web/**/*.svelte` или Svelte-модулей следуйте [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc) (**WEB-19**): перед завершением задачи **обязательно**:
+При правках `apps/web/**` или `packages/ui/**` следуйте [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc) (**WEB-19**): перед завершением задачи **обязательно**:
 
 ```powershell
-cd web
-npm run check
-npm run lint
+pnpm --filter @evobgp/web run typecheck
+pnpm --filter @evobgp/web run lint
+pnpm --filter @evobgp/web run build
 ```
 
-Если `lint` падает — `npx prettier --write .` и повторить обе команды. CI job `web` не пропускает без этого.
+Все три команды должны exit 0. CI job `web` не пропускает без этого.
+
+Стек: React 19, TanStack Router/Query, shadcn/ui (base-nova, registry `@shadcn` + `@reui`), Tailwind v4, lucide-react. Legacy Svelte — в `web-legacy-svelte/` (архив, только референс при миграции).
+
+UI-задачи начинаются с MCP `plugin-shadcn-shadcn` (search → examples → add command), затем CLI `pnpm dlx shadcn@latest add ...` из `apps/web`. См. также [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc) для Context7 ID стека.
diff --git a/apps/web/components.json b/apps/web/components.json
new file mode 100644
index 0000000..662d93a
--- /dev/null
+++ b/apps/web/components.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@reui": "https://reui.io/r/{style}/{name}.json"
+  },
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@evobgp/ui/lib/utils",
+    "ui": "@evobgp/ui/components"
+  }
+}
diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
new file mode 100644
index 0000000..c4a1019
--- /dev/null
+++ b/apps/web/eslint.config.js
@@ -0,0 +1,36 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import globals from 'globals'
+
+export default tseslint.config(
+  { ignores: ['dist', 'src/routeTree.gen.ts'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      'prefer-const': 'off',
+    },
+  },
+  {
+    files: ['src/components/reui/**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+    },
+  },
+)
diff --git a/apps/web/index.html b/apps/web/index.html
new file mode 100644
index 0000000..87a11af
--- /dev/null
+++ b/apps/web/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="ru" class="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>EvoBGP</title>
+    <script>
+      // Anti-FOUC: apply persisted theme before paint (matches next-themes attribute="class")
+      try {
+        var t = localStorage.getItem('evobgp-theme');
+        var m = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        var dark = t === 'dark' || (!t || t === 'system') && m;
+        if (dark) document.documentElement.classList.add('dark');
+      } catch (e) {}
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/web/package.json b/apps/web/package.json
new file mode 100644
index 0000000..bd7f93e
--- /dev/null
+++ b/apps/web/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@evobgp/web",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsr generate && tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsr generate && tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@evobgp/ui": "workspace:*",
+    "@hookform/resolvers": "^3.10.0",
+    "@tanstack/react-query": "^5.90.2",
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "@tanstack/react-router": "^1.130.2",
+    "@tanstack/react-router-devtools": "^1.130.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.4",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.468.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.60.0",
+    "recharts": "3.8.0",
+    "sonner": "^1.7.0",
+    "zod": "^3.25.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@tanstack/router-plugin": "^1.130.0",
+    "@tanstack/router-cli": "^1.130.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.0.0",
+    "@eslint/js": "^9.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "globals": "^15.0.0",
+    "typescript-eslint": "^8.0.0",
+    "happy-dom": "^18.0.0",
+    "tailwindcss": "^4.1.0",
+    "tw-animate-css": "^1.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.3.1",
+    "vitest": "^3.0.0"
+  }
+}
diff --git a/apps/web/public/favicon.svg b/apps/web/public/favicon.svg
new file mode 100644
index 0000000..3a69359
--- /dev/null
+++ b/apps/web/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#0f172a"/>
+  <text x="16" y="22" font-family="ui-sans-serif,system-ui,sans-serif" font-size="18" font-weight="700" fill="#f8fafc" text-anchor="middle">B</text>
+</svg>
diff --git a/web/static/robots.txt b/apps/web/public/robots.txt
similarity index 100%
rename from web/static/robots.txt
rename to apps/web/public/robots.txt
diff --git a/apps/web/src/components/confirm-dialog.tsx b/apps/web/src/components/confirm-dialog.tsx
new file mode 100644
index 0000000..76b3860
--- /dev/null
+++ b/apps/web/src/components/confirm-dialog.tsx
@@ -0,0 +1,53 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@evobgp/ui/components/alert-dialog'
+import type { ReactElement, ReactNode } from 'react'
+
+interface ConfirmDialogProps {
+  trigger: ReactElement
+  title: string
+  description?: ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  destructive?: boolean
+  onConfirm: () => void
+}
+
+export function ConfirmDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = 'Подтвердить',
+  cancelLabel = 'Отмена',
+  destructive,
+  onConfirm,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger render={trigger} />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description ? <AlertDialogDescription>{description}</AlertDialogDescription> : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            variant={destructive ? 'destructive' : 'default'}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/web/src/components/empty-state.tsx b/apps/web/src/components/empty-state.tsx
new file mode 100644
index 0000000..43bcd20
--- /dev/null
+++ b/apps/web/src/components/empty-state.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react'
+import { cn } from '@evobgp/ui/lib/utils'
+
+interface EmptyStateProps {
+  title: string
+  description?: string
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+}
+
+export function EmptyState({ title, description, icon, action, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8 text-center',
+        className,
+      )}
+    >
+      {icon ? <div className="text-muted-foreground">{icon}</div> : null}
+      <div className="flex flex-col gap-1">
+        <p className="text-sm font-medium">{title}</p>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {action ? <div className="mt-2">{action}</div> : null}
+    </div>
+  )
+}
diff --git a/apps/web/src/components/layout/app-shell.tsx b/apps/web/src/components/layout/app-shell.tsx
new file mode 100644
index 0000000..2f321d4
--- /dev/null
+++ b/apps/web/src/components/layout/app-shell.tsx
@@ -0,0 +1,172 @@
+import {
+  LayoutDashboard,
+  Boxes,
+  Network,
+  Cog,
+  ListChecks,
+  Activity,
+  Settings,
+  BookText,
+  KeyRound,
+  ServerCog,
+} from 'lucide-react'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@evobgp/ui/components/sidebar'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@evobgp/ui/components/breadcrumb'
+import { Separator } from '@evobgp/ui/components/separator'
+
+import { Link, useRouterState } from '@tanstack/react-router'
+import type { ComponentType, ReactNode } from 'react'
+
+import { ModeToggle } from '@/components/mode-toggle'
+
+interface NavItem {
+  to: string
+  label: string
+  icon: ComponentType<{ className?: string }>
+}
+
+interface NavGroup {
+  label: string
+  items: NavItem[]
+}
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    label: 'Обзор',
+    items: [{ to: '/dashboard', label: 'Dashboard', icon: LayoutDashboard }],
+  },
+  {
+    label: 'Маршрутизация',
+    items: [
+      { to: '/modules', label: 'Модули', icon: Boxes },
+      { to: '/network', label: 'Сеть', icon: Network },
+      { to: '/directories', label: 'Справочники', icon: BookText },
+    ],
+  },
+  {
+    label: 'Операции',
+    items: [
+      { to: '/operations', label: 'Операции', icon: Cog },
+      { to: '/schedule', label: 'Задачи', icon: ListChecks },
+      { to: '/monitoring', label: 'Мониторинг', icon: Activity },
+    ],
+  },
+  {
+    label: 'Система',
+    items: [
+      { to: '/access', label: 'Доступ', icon: KeyRound },
+      { to: '/tenant-settings', label: 'Настройки BIRD', icon: ServerCog },
+      { to: '/settings', label: 'Настройки UI', icon: Settings },
+    ],
+  },
+]
+
+const ALL_NAV_ITEMS = NAV_GROUPS.flatMap((g) => g.items)
+
+const ROUTE_LABELS: Record<string, string> = Object.fromEntries(
+  ALL_NAV_ITEMS.map((i) => [i.to, i.label]),
+)
+
+const PARENT_ROUTE: Record<string, string> = {}
+
+export function AppShell({ children }: { children: ReactNode }) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const activeItem =
+    ALL_NAV_ITEMS.find((i) => pathname === i.to || (i.to !== '/' && pathname.startsWith(`${i.to}/`))) ??
+    ALL_NAV_ITEMS[0]
+  const parentTo = PARENT_ROUTE[activeItem.to]
+  const parentLabel = parentTo ? ROUTE_LABELS[parentTo] : null
+
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">
+        <SidebarHeader>
+          <div className="flex items-center gap-2 px-2 py-1.5">
+            <div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-bold">
+              B
+            </div>
+            <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
+              <span className="truncate text-sm font-semibold">EvoBGP</span>
+              <span className="truncate text-xs text-muted-foreground">Control Plane</span>
+            </div>
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+          {NAV_GROUPS.map((group) => (
+            <SidebarGroup key={group.label}>
+              <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => {
+                    const Icon = item.icon
+                    const isActive = pathname === item.to || pathname.startsWith(`${item.to}/`)
+                    return (
+                      <SidebarMenuItem key={item.to}>
+                        <SidebarMenuButton
+                          render={<Link to={item.to} />}
+                          isActive={isActive}
+                          tooltip={item.label}
+                        >
+                          <Icon className="size-4" />
+                          <span>{item.label}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    )
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        <SidebarFooter />
+      </Sidebar>
+      <SidebarInset>
+        <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 />
+          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              {parentLabel && parentTo ? (
+                <>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink render={<Link to={parentTo} />}>{parentLabel}</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                </>
+              ) : null}
+              <BreadcrumbItem>
+                <BreadcrumbPage>{ROUTE_LABELS[activeItem.to] ?? activeItem.label}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <div className="ml-auto flex items-center gap-2">
+            <ModeToggle />
+          </div>
+        </header>
+        <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/loading-button.tsx b/apps/web/src/components/loading-button.tsx
new file mode 100644
index 0000000..4e3ac5e
--- /dev/null
+++ b/apps/web/src/components/loading-button.tsx
@@ -0,0 +1,19 @@
+import { Button } from '@evobgp/ui/components/button'
+import { Loader2Icon } from 'lucide-react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+type LoadingButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  loading?: boolean
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link'
+  size?: 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'
+  children: ReactNode
+}
+
+export function LoadingButton({ loading, disabled, children, ...props }: LoadingButtonProps) {
+  return (
+    <Button disabled={disabled || loading} {...props}>
+      {loading ? <Loader2Icon className="animate-spin" data-icon="inline-start" /> : null}
+      {children}
+    </Button>
+  )
+}
diff --git a/apps/web/src/components/mode-toggle.tsx b/apps/web/src/components/mode-toggle.tsx
new file mode 100644
index 0000000..14be8e7
--- /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 '@evobgp/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@evobgp/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-header.tsx b/apps/web/src/components/page-header.tsx
new file mode 100644
index 0000000..77ea88d
--- /dev/null
+++ b/apps/web/src/components/page-header.tsx
@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+}
+
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
+  return (
+    <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+    </div>
+  )
+}
diff --git a/apps/web/src/components/page-shell.tsx b/apps/web/src/components/page-shell.tsx
new file mode 100644
index 0000000..b995be1
--- /dev/null
+++ b/apps/web/src/components/page-shell.tsx
@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react'
+import { cn } from '@evobgp/ui/lib/utils'
+
+export function PageShell({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn('flex flex-col gap-4 md:gap-6', className)}>{children}</div>
+}
diff --git a/apps/web/src/components/query-state.tsx b/apps/web/src/components/query-state.tsx
new file mode 100644
index 0000000..b7db781
--- /dev/null
+++ b/apps/web/src/components/query-state.tsx
@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react'
+import { AlertCircle, RefreshCwIcon } from 'lucide-react'
+import { Button } from '@evobgp/ui/components/button'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+import { EmptyState } from './empty-state'
+
+interface QueryStateProps<T> {
+  data: T | undefined
+  isLoading: boolean
+  isError: boolean
+  error?: unknown
+  empty?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyAction?: ReactNode
+  onRetry?: () => void
+  skeleton?: ReactNode
+  children: (data: T) => ReactNode
+}
+
+export function QueryState<T>({
+  data,
+  isLoading,
+  isError,
+  error,
+  empty,
+  emptyTitle = 'Нет данных',
+  emptyDescription,
+  emptyAction,
+  onRetry,
+  skeleton,
+  children,
+}: QueryStateProps<T>) {
+  if (isLoading) {
+    return <>{skeleton ?? <DefaultSkeleton />}</>
+  }
+  if (isError) {
+    return (
+      <EmptyState
+        icon={<AlertCircle className="size-8" />}
+        title="Ошибка загрузки"
+        description={error instanceof Error ? error.message : 'Не удалось загрузить данные'}
+        action={
+          onRetry ? (
+            <Button variant="outline" size="sm" onClick={onRetry}>
+              <RefreshCwIcon data-icon="inline-start" />
+              Повторить
+            </Button>
+          ) : null
+        }
+      />
+    )
+  }
+  if (empty || data == null) {
+    return <EmptyState title={emptyTitle} description={emptyDescription} action={emptyAction} />
+  }
+  return <>{children(data)}</>
+}
+
+function DefaultSkeleton() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-32 w-full" />
+    </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..8ecedb4
--- /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 "@evobgp/ui/lib/utils"
+import { ScrollArea } from "@evobgp/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..e94aaa0
--- /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 "@evobgp/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/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..3ac4284
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import { Separator } from "@evobgp/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..a943366
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
@@ -0,0 +1,343 @@
+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 "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@evobgp/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..5b14a2f
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+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 "@evobgp/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..1c52421
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
@@ -0,0 +1,224 @@
+import React, { ReactNode } from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Skeleton } from "@evobgp/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..b6cc647
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
@@ -0,0 +1,421 @@
+"use client"
+
+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 "@evobgp/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..3b592c0
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
@@ -0,0 +1,307 @@
+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 "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/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..14776e9
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
@@ -0,0 +1,314 @@
+"use client"
+
+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 "@evobgp/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..b89fcad
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
@@ -0,0 +1,490 @@
+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 "@evobgp/ui/lib/utils"
+import { Spinner } from "@evobgp/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,
+  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..3277028
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
@@ -0,0 +1,1433 @@
+"use client"
+
+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 "@evobgp/ui/lib/utils"
+import { Checkbox } from "@evobgp/ui/components/checkbox"
+import { Spinner } from "@evobgp/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
+
+    const 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..e7361eb
--- /dev/null
+++ b/apps/web/src/components/reui/data-grid/data-grid.tsx
@@ -0,0 +1,268 @@
+import { createContext, ReactNode, useContext, useMemo } from "react"
+import {
+  Column,
+  ColumnFiltersState,
+  RowData,
+  SortingState,
+  Table,
+} from "@tanstack/react-table"
+
+import { cn } from "@evobgp/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<
+   
+  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..ee78445
--- /dev/null
+++ b/apps/web/src/components/reui/date-selector.tsx
@@ -0,0 +1,1332 @@
+"use client"
+
+import {
+  ChangeEvent,
+  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 "@/hooks/use-mobile"
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Calendar, CalendarDayButton } from "@evobgp/ui/components/calendar"
+import { Input } from "@evobgp/ui/components/input"
+import { ScrollArea } from "@evobgp/ui/components/scroll-area"
+import { Tabs, TabsList, TabsTrigger } from "@evobgp/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..231377b
--- /dev/null
+++ b/apps/web/src/components/reui/filters.tsx
@@ -0,0 +1,1932 @@
+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 "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  ButtonGroup,
+  ButtonGroupText,
+} from "@evobgp/ui/components/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+} from "@evobgp/ui/components/input-group"
+import { Kbd } from "@evobgp/ui/components/kbd"
+import { ScrollArea } from "@evobgp/ui/components/scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@evobgp/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()
+
+  const sizeMap = {
+    sm: "sm" as const,
+    default: "sm" as const,
+    lg: "default" as const,
+  }
+
+  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>) {
+  const context = useFilterContext()
+
+  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..b499f9b
--- /dev/null
+++ b/apps/web/src/components/reui/number-field.tsx
@@ -0,0 +1,258 @@
+import { createContext, ReactNode, useContext, useId } from "react"
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
+import { cva, VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Label } from "@evobgp/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.tsx b/apps/web/src/components/section-cards.tsx
new file mode 100644
index 0000000..04c55f6
--- /dev/null
+++ b/apps/web/src/components/section-cards.tsx
@@ -0,0 +1,109 @@
+import type { ReactElement, ReactNode } from 'react'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+import { cn } from '@evobgp/ui/lib/utils'
+import { TruncatedText } from '@/components/truncated-text'
+
+export interface SectionCardItem {
+  label: ReactNode
+  value: string | number | ReactElement
+  hint?: ReactNode
+  icon?: ReactNode
+  badge?: ReactNode
+  variant?: 'default' | 'warning' | 'destructive'
+  active?: boolean
+  onClick?: () => void
+}
+
+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'
+  if (count === 6) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
+  return 'sm:grid-cols-2 lg:grid-cols-3'
+}
+
+const VALUE_VARIANT_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
+  default: '',
+  warning: 'text-warning-foreground',
+  destructive: 'text-destructive',
+}
+
+export function SectionCards({ items, className }: { items: SectionCardItem[]; className?: string }) {
+  return (
+    <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={cn(
+                    'flex items-center gap-1 text-lg font-semibold tabular-nums',
+                    VALUE_VARIANT_CLASS[item.variant ?? 'default'],
+                  )}
+                >
+                  {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..6fc49dc
--- /dev/null
+++ b/apps/web/src/components/skeletons.tsx
@@ -0,0 +1,38 @@
+import { SectionCards } from './section-cards'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+import { Card, CardContent } from '@evobgp/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
new file mode 100644
index 0000000..5a94e6a
--- /dev/null
+++ b/apps/web/src/components/status-badge.tsx
@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react'
+
+import { Badge } from '@/components/reui/badge'
+
+type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
+
+const STATUS_VARIANT: Record<string, BadgeVariant> = {
+  active: 'success',
+  ok: 'success',
+  paid: 'success',
+  established: 'success',
+  succeeded: 'success',
+  healthy: 'success',
+  paused: 'secondary',
+  disabled: 'secondary',
+  archived: 'outline',
+  error: 'destructive',
+  failed: 'destructive',
+  running: 'info',
+  queued: 'info',
+  overdue: 'warning',
+  stale: 'warning',
+  warning: 'warning',
+  mismatch: 'warning',
+}
+
+export function StatusBadge({ status, label }: { status: string; label?: string }) {
+  const variant = STATUS_VARIANT[status.toLowerCase()] ?? 'outline'
+  return <Badge variant={variant}>{label ?? status}</Badge>
+}
diff --git a/apps/web/src/components/theme-provider.tsx b/apps/web/src/components/theme-provider.tsx
new file mode 100644
index 0000000..a9f4378
--- /dev/null
+++ b/apps/web/src/components/theme-provider.tsx
@@ -0,0 +1,16 @@
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ReactNode } from 'react'
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      storageKey="evobgp-theme"
+    >
+      {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..550c26d
--- /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 '@evobgp/ui/components/tooltip'
+import { cn } from '@evobgp/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/lib/api-client.ts b/apps/web/src/lib/api-client.ts
new file mode 100644
index 0000000..9bfbc3e
--- /dev/null
+++ b/apps/web/src/lib/api-client.ts
@@ -0,0 +1,200 @@
+import type {
+  AsEntriesResponse,
+  CdnSourcesResponse,
+  DomainEntriesResponse,
+  IpRangeEntriesResponse,
+  JobRow,
+  ModuleType,
+  RevisionPrefix,
+  RevisionPrefixesResponse,
+} from '@/types/api'
+
+export const TOKEN_STORAGE_KEY = 'evobgp_api_token'
+
+export type Problem = {
+  type?: string
+  title?: string
+  status?: number
+  detail?: string
+}
+
+function getToken(): string | null {
+  if (typeof window === 'undefined') return null
+  return window.localStorage.getItem(TOKEN_STORAGE_KEY)
+}
+
+export function setToken(token: string | null): void {
+  if (typeof window === 'undefined') return
+  if (token) window.localStorage.setItem(TOKEN_STORAGE_KEY, token)
+  else window.localStorage.removeItem(TOKEN_STORAGE_KEY)
+}
+
+function mergeHeaders(init?: RequestInit, extraHeaders?: Record<string, string>): Headers {
+  const h = new Headers(init?.headers)
+  if (!h.has('Accept')) h.set('Accept', 'application/json')
+  const t = getToken()
+  if (t && !h.has('Authorization')) h.set('Authorization', `Bearer ${t}`)
+  if (extraHeaders) {
+    for (const [k, v] of Object.entries(extraHeaders)) {
+      if (!h.has(k)) h.set(k, v)
+    }
+  }
+  return h
+}
+
+/**
+ * Idempotency keys: `crypto.randomUUID()` exists only in secure contexts (HTTPS / localhost).
+ * Over plain HTTP to a LAN IP it is often undefined — use getRandomValues or a fallback.
+ */
+function newIdempotencyKey(): string {
+  const c = typeof globalThis !== 'undefined' ? globalThis.crypto : undefined
+  if (c?.randomUUID) return c.randomUUID()
+  if (c?.getRandomValues) {
+    const buf = new Uint8Array(16)
+    c.getRandomValues(buf)
+    buf[6] = (buf[6]! & 0x0f) | 0x40
+    buf[8] = (buf[8]! & 0x3f) | 0x80
+    const hex = [...buf].map((b) => b.toString(16).padStart(2, '0')).join('')
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`
+  }
+  return `idem-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 14)}`
+}
+
+export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    message: string,
+    public readonly problem?: Problem,
+  ) {
+    super(message)
+  }
+}
+
+export async function apiFetch(path: string, init?: RequestInit): Promise<Response> {
+  if (typeof window === 'undefined') throw new Error('API is only available in the browser')
+  return fetch(path, { ...init, headers: mergeHeaders(init) })
+}
+
+/** GET / DELETE без тела */
+export async function apiJSON<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await apiFetch(path, init)
+  return parseResponse<T>(res)
+}
+
+/** POST / PATCH / PUT с JSON-телом и автоматическим Idempotency-Key */
+export async function apiMutate<T = void>(
+  path: string,
+  method: 'POST' | 'PATCH' | 'PUT' | 'DELETE',
+  body?: unknown,
+  opts?: { idempotent?: boolean },
+): Promise<T> {
+  const headers: Record<string, string> = {}
+  if (body !== undefined) headers['Content-Type'] = 'application/json'
+  if (opts?.idempotent !== false) {
+    headers['Idempotency-Key'] = newIdempotencyKey()
+  }
+  const res = await fetch(path, {
+    method,
+    headers: mergeHeaders({ headers }, headers),
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  })
+  return parseResponse<T>(res)
+}
+
+async function parseResponse<T>(res: Response): Promise<T> {
+  if (res.status === 204 || res.status === 205) return undefined as T
+  const text = await res.text()
+  if (!res.ok) {
+    let problem: Problem | undefined
+    let detail = `HTTP ${res.status}`
+    try {
+      problem = JSON.parse(text) as Problem
+      detail = problem.detail ?? problem.title ?? detail
+    } catch {
+      if (text) detail = text
+    }
+    throw new ApiError(res.status, detail, problem)
+  }
+  if (!text) return undefined as T
+  return JSON.parse(text) as T
+}
+
+const terminalJobStatuses = new Set(['succeeded', 'failed', 'cancelled'])
+
+/** Ожидает завершения фоновой задачи (poll GET /v1/jobs/{id}). */
+export async function waitForJob(
+  jobId: string,
+  opts?: { pollMs?: number; timeoutMs?: number },
+): Promise<JobRow> {
+  const pollMs = opts?.pollMs ?? 400
+  const timeoutMs = opts?.timeoutMs ?? 120000
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    const j = await apiJSON<JobRow>(`/v1/jobs/${jobId}`)
+    if (terminalJobStatuses.has(j.status)) return j
+    await new Promise((r) => setTimeout(r, pollMs))
+  }
+  throw new Error(`Таймаут ожидания задачи ${jobId}`)
+}
+
+export async function apiPageAll<T>(path: string, limit = 500): Promise<T[]> {
+  const items: T[] = []
+  let cursor: string | null = null
+  while (true) {
+    const [basePath, rawQuery = ''] = path.split('?')
+    const query = new URLSearchParams(rawQuery)
+    if (!query.has('limit')) query.set('limit', String(limit))
+    if (cursor) query.set('cursor', cursor)
+    else query.delete('cursor')
+    const page = await apiJSON<{ items?: T[]; next_cursor?: string | null; has_more?: boolean }>(
+      `${basePath}?${query.toString()}`,
+    )
+    items.push(...(page.items ?? []))
+    if (!page.has_more || !page.next_cursor) break
+    cursor = page.next_cursor
+  }
+  return items
+}
+
+export async function fetchRevisionPrefixesAll(revisionId: string): Promise<RevisionPrefix[]> {
+  const items = await apiPageAll<RevisionPrefix>(`/v1/revisions/${revisionId}/prefixes`)
+  return items
+}
+
+export async function fetchRevisionPrefixesResponse(
+  revisionId: string,
+  cursor?: string | null,
+  limit = 500,
+): Promise<RevisionPrefixesResponse> {
+  const query = new URLSearchParams({ limit: String(limit) })
+  if (cursor) query.set('cursor', cursor)
+  return apiJSON<RevisionPrefixesResponse>(`/v1/revisions/${revisionId}/prefixes?${query.toString()}`)
+}
+
+export async function fetchModuleSourceCatalog(moduleId: string, moduleType: ModuleType) {
+  if (moduleType === 'DOMAINS') {
+    const entries = await apiPageAll<DomainEntriesResponse['items'][number]>(
+      `/v1/modules/${moduleId}/domain-entries`,
+    )
+    return { domains: entries }
+  }
+  if (moduleType === 'AS_PREFIXES') {
+    const entries = await apiPageAll<AsEntriesResponse['items'][number]>(
+      `/v1/modules/${moduleId}/as-entries`,
+    )
+    return { asns: entries }
+  }
+  if (moduleType === 'CDN_CIDRS') {
+    const entries = await apiPageAll<CdnSourcesResponse['items'][number]>(
+      `/v1/modules/${moduleId}/cdn-sources`,
+    )
+    return { cdnSources: entries }
+  }
+  if (moduleType === 'IP_RANGES') {
+    const entries = await apiPageAll<IpRangeEntriesResponse['items'][number]>(
+      `/v1/modules/${moduleId}/ip-range-entries`,
+    )
+    return { ipRanges: entries }
+  }
+  return {}
+}
diff --git a/apps/web/src/lib/queryClient.ts b/apps/web/src/lib/queryClient.ts
new file mode 100644
index 0000000..d624f31
--- /dev/null
+++ b/apps/web/src/lib/queryClient.ts
@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60_000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
diff --git a/apps/web/src/lib/router.ts b/apps/web/src/lib/router.ts
new file mode 100644
index 0000000..f4ebc66
--- /dev/null
+++ b/apps/web/src/lib/router.ts
@@ -0,0 +1,25 @@
+import { QueryClient } from '@tanstack/react-query'
+import {
+  createRouter as tanstackCreateRouter,
+  rootRouteId,
+} from '@tanstack/react-router'
+
+import { routeTree } from '../routeTree.gen'
+import { queryClient } from './queryClient'
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}
+
+export function createRouter(opts?: { context?: { queryClient: QueryClient } }) {
+  return tanstackCreateRouter({
+    routeTree,
+    context: opts?.context ?? { queryClient },
+    defaultPreload: 'intent',
+    scrollRestoration: true,
+  })
+}
+
+export { rootRouteId }
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
new file mode 100644
index 0000000..8eb77f8
--- /dev/null
+++ b/apps/web/src/main.tsx
@@ -0,0 +1,27 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider } from '@tanstack/react-router'
+import { Toaster } from '@evobgp/ui/components/sonner'
+
+import '@evobgp/ui/globals.css'
+
+import { queryClient } from '@/lib/queryClient'
+import { createRouter } from '@/lib/router'
+import { ThemeProvider } from '@/components/theme-provider'
+
+const router = createRouter({ context: { queryClient } })
+
+const rootEl = document.getElementById('root')
+if (!rootEl) throw new Error('Root element #root not found')
+
+createRoot(rootEl).render(
+  <StrictMode>
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+        <Toaster richColors position="top-right" />
+      </QueryClientProvider>
+    </ThemeProvider>
+  </StrictMode>,
+)
diff --git a/apps/web/src/queries/api-keys.ts b/apps/web/src/queries/api-keys.ts
new file mode 100644
index 0000000..fffab98
--- /dev/null
+++ b/apps/web/src/queries/api-keys.ts
@@ -0,0 +1,19 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { ApiKey, ApiKeysResponse } from '@/types/api'
+
+export const apiKeysKeys = {
+  all: ['api-keys'] as const,
+  list: () => [...apiKeysKeys.all, 'list'] as const,
+}
+
+export function apiKeysQueryOptions() {
+  return queryOptions<ApiKey[]>({
+    queryKey: apiKeysKeys.list(),
+    queryFn: async () => {
+      const page = await apiJSON<ApiKeysResponse>('/v1/api-keys?limit=500')
+      return page.items ?? []
+    },
+    staleTime: 60_000,
+  })
+}
diff --git a/apps/web/src/queries/auth.ts b/apps/web/src/queries/auth.ts
new file mode 100644
index 0000000..5232c07
--- /dev/null
+++ b/apps/web/src/queries/auth.ts
@@ -0,0 +1,17 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { AuthSession } from '@/types/api'
+
+export const authKeys = {
+  all: ['auth'] as const,
+  session: () => [...authKeys.all, 'session'] as const,
+}
+
+export function authSessionQueryOptions() {
+  return queryOptions<AuthSession>({
+    queryKey: authKeys.session(),
+    queryFn: () => apiJSON<AuthSession>('/v1/auth/session'),
+    retry: false,
+    staleTime: 30_000,
+  })
+}
diff --git a/apps/web/src/queries/directories.ts b/apps/web/src/queries/directories.ts
new file mode 100644
index 0000000..925f218
--- /dev/null
+++ b/apps/web/src/queries/directories.ts
@@ -0,0 +1,25 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { CommunitiesResponse, DohProfilesResponse } from '@/types/api'
+
+export const directoriesKeys = {
+  all: ['directories'] as const,
+  communities: () => [...directoriesKeys.all, 'communities'] as const,
+  doh: () => [...directoriesKeys.all, 'doh'] as const,
+}
+
+export function directoriesCommunitiesQueryOptions() {
+  return queryOptions<CommunitiesResponse>({
+    queryKey: directoriesKeys.communities(),
+    queryFn: () => apiJSON<CommunitiesResponse>('/v1/communities?limit=200'),
+    staleTime: 30_000,
+  })
+}
+
+export function directoriesDohQueryOptions() {
+  return queryOptions<DohProfilesResponse>({
+    queryKey: directoriesKeys.doh(),
+    queryFn: () => apiJSON<DohProfilesResponse>('/v1/doh-profiles?limit=200'),
+    staleTime: 30_000,
+  })
+}
diff --git a/apps/web/src/queries/modules.ts b/apps/web/src/queries/modules.ts
new file mode 100644
index 0000000..828edf4
--- /dev/null
+++ b/apps/web/src/queries/modules.ts
@@ -0,0 +1,53 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type {
+  ModuleRow,
+  ModulesResponse,
+  Page,
+} from '@/types/api'
+
+export const modulesKeys = {
+  all: ['modules'] as const,
+  list: () => [...modulesKeys.all, 'list'] as const,
+  detail: (id: string) => [...modulesKeys.all, 'detail', id] as const,
+  domainEntries: (id: string) => [...modulesKeys.all, 'domain-entries', id] as const,
+  asEntries: (id: string) => [...modulesKeys.all, 'as-entries', id] as const,
+  cdnSources: (id: string) => [...modulesKeys.all, 'cdn-sources', id] as const,
+  ipRangeEntries: (id: string) => [...modulesKeys.all, 'ip-range-entries', id] as const,
+}
+
+export function modulesListQueryOptions() {
+  return queryOptions<ModulesResponse>({
+    queryKey: modulesKeys.list(),
+    queryFn: () => apiJSON<ModulesResponse>('/v1/modules?limit=200'),
+  })
+}
+
+export function moduleDetailQueryOptions(id: string) {
+  return queryOptions<ModuleRow>({
+    queryKey: modulesKeys.detail(id),
+    queryFn: () => apiJSON<ModuleRow>(`/v1/modules/${id}`),
+  })
+}
+
+export type ModuleEntriesPage = Page<Record<string, unknown>>
+
+export function moduleEntriesQueryOptions(id: string, type: ModuleRow['type']) {
+  const pathByType: Record<ModuleRow['type'], string> = {
+    DOMAINS: `/v1/modules/${id}/domain-entries?limit=500`,
+    AS_PREFIXES: `/v1/modules/${id}/as-entries?limit=500`,
+    CDN_CIDRS: `/v1/modules/${id}/cdn-sources?limit=500`,
+    IP_RANGES: `/v1/modules/${id}/ip-range-entries?limit=500`,
+  }
+  const path = pathByType[type]
+  const keyByType: Record<ModuleRow['type'], readonly string[]> = {
+    DOMAINS: modulesKeys.domainEntries(id),
+    AS_PREFIXES: modulesKeys.asEntries(id),
+    CDN_CIDRS: modulesKeys.cdnSources(id),
+    IP_RANGES: modulesKeys.ipRangeEntries(id),
+  }
+  return queryOptions<ModuleEntriesPage>({
+    queryKey: keyByType[type],
+    queryFn: () => apiJSON<ModuleEntriesPage>(path),
+  })
+}
diff --git a/apps/web/src/queries/monitoring.ts b/apps/web/src/queries/monitoring.ts
new file mode 100644
index 0000000..733cccf
--- /dev/null
+++ b/apps/web/src/queries/monitoring.ts
@@ -0,0 +1,71 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiFetch, apiJSON, apiMutate } from '@/lib/api-client'
+
+export interface HealthStatus {
+  ok: boolean
+  status?: string
+  error?: string
+}
+
+export interface ReadyStatus {
+  status?: string
+  checks?: Record<string, boolean | { ok?: boolean; error?: string }>
+}
+
+export interface VersionInfo {
+  version?: string
+  app?: string
+  git_sha?: string
+  build_time?: string
+}
+
+export const monitoringKeys = {
+  all: ['monitoring'] as const,
+  health: () => [...monitoringKeys.all, 'health'] as const,
+  ready: () => [...monitoringKeys.all, 'ready'] as const,
+  version: () => [...monitoringKeys.all, 'version'] as const,
+}
+
+async function fetchHealth(): Promise<HealthStatus> {
+  const res = await apiFetch('/v1/health', { method: 'GET' })
+  let body: { status?: string } = {}
+  try {
+    body = (await res.json()) as { status?: string }
+  } catch {
+    /* ignore */
+  }
+  return { ok: res.ok, status: body.status, error: res.ok ? undefined : `HTTP ${res.status}` }
+}
+
+export function monitoringHealthQueryOptions() {
+  return queryOptions<HealthStatus>({
+    queryKey: monitoringKeys.health(),
+    queryFn: fetchHealth,
+    staleTime: 15_000,
+  })
+}
+
+export function monitoringReadyQueryOptions() {
+  return queryOptions<ReadyStatus>({
+    queryKey: monitoringKeys.ready(),
+    queryFn: () => apiJSON<ReadyStatus>('/v1/ready'),
+    staleTime: 15_000,
+  })
+}
+
+export function monitoringVersionQueryOptions() {
+  return queryOptions<VersionInfo>({
+    queryKey: monitoringKeys.version(),
+    queryFn: () => apiJSON<VersionInfo>('/v1/version'),
+    staleTime: 60_000,
+  })
+}
+
+export async function fetchLog(endpoint: string): Promise<string> {
+  const res = await apiFetch(endpoint, { method: 'GET' })
+  return await res.text()
+}
+
+export async function clearLog(endpoint: string): Promise<void> {
+  await apiMutate(endpoint, 'DELETE', {})
+}
diff --git a/apps/web/src/queries/network.ts b/apps/web/src/queries/network.ts
new file mode 100644
index 0000000..19635f4
--- /dev/null
+++ b/apps/web/src/queries/network.ts
@@ -0,0 +1,36 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { BirdStatus, PeersResponse, SpeakersResponse } from '@/types/api'
+
+export const NETWORK_AUTO_REFRESH_MS = 30_000
+
+export const networkKeys = {
+  all: ['network'] as const,
+  peers: () => [...networkKeys.all, 'peers'] as const,
+  speakers: () => [...networkKeys.all, 'speakers'] as const,
+  bird: () => [...networkKeys.all, 'bird'] as const,
+}
+
+export function networkPeersQueryOptions() {
+  return queryOptions<PeersResponse>({
+    queryKey: networkKeys.peers(),
+    queryFn: () => apiJSON<PeersResponse>('/v1/peers?limit=200&live=1'),
+    staleTime: 15_000,
+  })
+}
+
+export function networkSpeakersQueryOptions() {
+  return queryOptions<SpeakersResponse>({
+    queryKey: networkKeys.speakers(),
+    queryFn: () => apiJSON<SpeakersResponse>('/v1/speakers?limit=200&live=1'),
+    staleTime: 15_000,
+  })
+}
+
+export function networkBirdQueryOptions() {
+  return queryOptions<BirdStatus>({
+    queryKey: networkKeys.bird(),
+    queryFn: () => apiJSON<BirdStatus>('/v1/bird/status'),
+    staleTime: 15_000,
+  })
+}
diff --git a/apps/web/src/queries/operations.ts b/apps/web/src/queries/operations.ts
new file mode 100644
index 0000000..8b8a1a4
--- /dev/null
+++ b/apps/web/src/queries/operations.ts
@@ -0,0 +1,40 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type { JobsResponse, RevisionsResponse, RevisionDiff } from '@/types/api'
+
+export const operationsKeys = {
+  all: ['operations'] as const,
+  revisions: () => [...operationsKeys.all, 'revisions'] as const,
+  jobs: (params?: { status?: string; kind?: string }) =>
+    [...operationsKeys.all, 'jobs', params ?? {}] as const,
+  diff: (a: string, b: string) => [...operationsKeys.all, 'diff', a, b] as const,
+}
+
+export function operationsRevisionsQueryOptions() {
+  return queryOptions<RevisionsResponse>({
+    queryKey: operationsKeys.revisions(),
+    queryFn: () => apiJSON<RevisionsResponse>('/v1/revisions?limit=100'),
+    staleTime: 30_000,
+  })
+}
+
+export function operationsJobsQueryOptions(params?: { status?: string; kind?: string }) {
+  return queryOptions<JobsResponse>({
+    queryKey: operationsKeys.jobs(params),
+    queryFn: () => {
+      const sp = new URLSearchParams({ limit: '200' })
+      if (params?.status) sp.set('status', params.status)
+      if (params?.kind) sp.set('kind', params.kind)
+      return apiJSON<JobsResponse>(`/v1/jobs?${sp.toString()}`)
+    },
+    staleTime: 10_000,
+  })
+}
+
+export function operationsDiffQueryOptions(a: string, b: string) {
+  return queryOptions<RevisionDiff>({
+    queryKey: operationsKeys.diff(a, b),
+    queryFn: () => apiJSON<RevisionDiff>(`/v1/revisions/${a}/diff/${b}`),
+    enabled: Boolean(a) && Boolean(b),
+  })
+}
diff --git a/apps/web/src/queries/overview.ts b/apps/web/src/queries/overview.ts
new file mode 100644
index 0000000..c2bb85a
--- /dev/null
+++ b/apps/web/src/queries/overview.ts
@@ -0,0 +1,115 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+import type {
+  JobRow,
+  JobsResponse,
+  ModuleRow,
+  ModulesResponse,
+  PeerRow,
+  PeersResponse,
+  RevisionRow,
+  RevisionsResponse,
+  SpeakerRow,
+  SpeakersResponse,
+} from '@/types/api'
+
+export const overviewKeys = {
+  all: ['overview'] as const,
+  modules: () => [...overviewKeys.all, 'modules'] as const,
+  peers: () => [...overviewKeys.all, 'peers'] as const,
+  speakers: () => [...overviewKeys.all, 'speakers'] as const,
+  revisions: () => [...overviewKeys.all, 'revisions'] as const,
+  jobs: () => [...overviewKeys.all, 'jobs'] as const,
+  health: () => [...overviewKeys.all, 'health'] as const,
+}
+
+export function overviewModulesQueryOptions() {
+  return queryOptions<ModulesResponse>({
+    queryKey: overviewKeys.modules(),
+    queryFn: () => apiJSON<ModulesResponse>('/v1/modules?limit=200'),
+    staleTime: 60_000,
+  })
+}
+
+export function overviewPeersQueryOptions() {
+  return queryOptions<PeersResponse>({
+    queryKey: overviewKeys.peers(),
+    queryFn: () => apiJSON<PeersResponse>('/v1/peers?limit=200&live=1'),
+    staleTime: 30_000,
+  })
+}
+
+export function overviewSpeakersQueryOptions() {
+  return queryOptions<SpeakersResponse>({
+    queryKey: overviewKeys.speakers(),
+    queryFn: () => apiJSON<SpeakersResponse>('/v1/speakers?limit=200&live=1'),
+    staleTime: 30_000,
+  })
+}
+
+export function overviewRevisionsQueryOptions() {
+  return queryOptions<RevisionsResponse>({
+    queryKey: overviewKeys.revisions(),
+    queryFn: () => apiJSON<RevisionsResponse>('/v1/revisions?limit=10'),
+    staleTime: 60_000,
+  })
+}
+
+export function overviewJobsQueryOptions() {
+  return queryOptions<JobsResponse>({
+    queryKey: overviewKeys.jobs(),
+    queryFn: () => apiJSON<JobsResponse>('/v1/jobs?limit=10'),
+    staleTime: 15_000,
+  })
+}
+
+export function overviewHealthQueryOptions() {
+  return queryOptions<boolean>({
+    queryKey: overviewKeys.health(),
+    queryFn: async () => {
+      const res = await fetch('/v1/health')
+      return res.ok
+    },
+    staleTime: 30_000,
+  })
+}
+
+// Selectors / helpers
+export type NetworkMetrics = {
+  peersTotal: number
+  peersEnabled: number
+  peersEstablished: number
+  peersMismatch: number
+  speakersTotal: number
+  speakersOnline: number
+}
+
+export function aggregateNetworkMetrics(
+  peers: PeerRow[],
+  speakers: SpeakerRow[],
+): NetworkMetrics {
+  const peersEnabled = peers.filter((p) => p.enabled !== false).length
+  const peersEstablished = peers.filter((p) => p.session_state === 'Established').length
+  const peersMismatch = peers.filter((p) => p.session_mismatch).length
+  const speakersOnline = speakers.filter((s) => s.live?.agent_ok).length
+  return {
+    peersTotal: peers.length,
+    peersEnabled,
+    peersEstablished,
+    peersMismatch,
+    speakersTotal: speakers.length,
+    speakersOnline,
+  }
+}
+
+export function runningJobCount(jobs: JobRow[]): number {
+  return jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+}
+
+export function moduleNameById(modules: ModuleRow[]): Map<string, string> {
+  return new Map(modules.map((m) => [m.id, m.name]))
+}
+
+export function recentRevisions(revisions: RevisionRow[], n = 10): RevisionRow[] {
+  return revisions.slice(0, n)
+}
diff --git a/apps/web/src/queries/settings.ts b/apps/web/src/queries/settings.ts
new file mode 100644
index 0000000..52f1dd1
--- /dev/null
+++ b/apps/web/src/queries/settings.ts
@@ -0,0 +1,128 @@
+import { queryOptions } from '@tanstack/react-query'
+import { apiJSON } from '@/lib/api-client'
+
+export type AppSettings = Record<string, unknown>
+
+export const BIRD_SETTING_KEYS = [
+  'bird_router_id',
+  'bird_local_ipv4',
+  'bird_local_ipv6',
+  'bird_local_asn',
+  'bird_bgp_source_ipv4',
+  'bird_bgp_source_ipv6',
+] as const
+
+export const REVISION_SETTING_KEYS = ['revision_retention_minutes'] as const
+
+export const RUNTIME_LOGS_SETTING_KEYS = [
+  'runtime_logs_auto_enabled',
+  'runtime_logs_max_file_mb',
+  'runtime_logs_auto_schedule',
+  'runtime_logs_auto_mode',
+] as const
+
+export const KNOWN_SETTING_KEYS = [
+  ...BIRD_SETTING_KEYS,
+  ...REVISION_SETTING_KEYS,
+  ...RUNTIME_LOGS_SETTING_KEYS,
+] as const
+
+export type KnownSettingKey = (typeof KNOWN_SETTING_KEYS)[number]
+export type BirdSettingKey = (typeof BIRD_SETTING_KEYS)[number]
+export type RevisionSettingKey = (typeof REVISION_SETTING_KEYS)[number]
+export type RuntimeLogsSettingKey = (typeof RUNTIME_LOGS_SETTING_KEYS)[number]
+
+export const NUMERIC_SETTING_KEYS = new Set<KnownSettingKey>([
+  'bird_local_asn',
+  'revision_retention_minutes',
+  'runtime_logs_max_file_mb',
+])
+
+export const BOOLEAN_SETTING_KEYS = new Set<KnownSettingKey>(['runtime_logs_auto_enabled'])
+
+export const settingsKeys = {
+  all: ['settings'] as const,
+}
+
+export function settingsQueryOptions() {
+  return queryOptions<AppSettings>({
+    queryKey: settingsKeys.all,
+    queryFn: () => apiJSON<AppSettings>('/v1/settings'),
+    staleTime: 30_000,
+  })
+}
+
+export function parseKnownValue(key: KnownSettingKey, value: unknown): string {
+  if (NUMERIC_SETTING_KEYS.has(key)) {
+    if (typeof value === 'number' && Number.isFinite(value)) return String(value)
+    if (typeof value === 'string') return value
+    return ''
+  }
+  if (typeof value === 'string') return value
+  return ''
+}
+
+export interface PartitionedSettings {
+  bird: Partial<Record<BirdSettingKey, string>>
+  revision: Partial<Record<RevisionSettingKey, string>>
+  runtimeLogs: Partial<Record<RuntimeLogsSettingKey, string>>
+  additional: { id: number; key: string; value: string }[]
+}
+
+export function partitionSettings(settings: AppSettings): PartitionedSettings {
+  const bird: Partial<Record<BirdSettingKey, string>> = {}
+  const revision: Partial<Record<RevisionSettingKey, string>> = {}
+  const runtimeLogs: Partial<Record<RuntimeLogsSettingKey, string>> = {}
+  const additional: { id: number; key: string; value: string }[] = []
+  let id = 1
+
+  for (const [key, value] of Object.entries(settings)) {
+    if ((BIRD_SETTING_KEYS as readonly string[]).includes(key)) {
+      bird[key as BirdSettingKey] = parseKnownValue(key as KnownSettingKey, value)
+    } else if (key === 'revision_retention_minutes') {
+      revision.revision_retention_minutes = parseKnownValue(
+        key as RevisionSettingKey,
+        value,
+      )
+    } else if ((RUNTIME_LOGS_SETTING_KEYS as readonly string[]).includes(key)) {
+      const rk = key as RuntimeLogsSettingKey
+      if (rk === 'runtime_logs_auto_enabled') {
+        runtimeLogs.runtime_logs_auto_enabled =
+          value === true || value === 1 || value === 'true' || value === '1'
+            ? 'true'
+            : 'false'
+      } else if (rk === 'runtime_logs_auto_mode') {
+        const m = String(value ?? '').trim()
+        runtimeLogs.runtime_logs_auto_mode = m === 'delete' ? 'delete' : m === 'truncate' ? 'truncate' : ''
+      } else {
+        runtimeLogs[rk] = parseKnownValue(rk, value)
+      }
+    } else {
+      additional.push({
+        id: id++,
+        key,
+        value: typeof value === 'string' ? value : String(value),
+      })
+    }
+  }
+
+  return { bird, revision, runtimeLogs, additional }
+}
+
+export function buildPayload(
+  keys: readonly KnownSettingKey[],
+  form: Record<string, string>,
+): Record<string, string | number | boolean> {
+  const payload: Record<string, string | number | boolean> = {}
+  for (const key of keys) {
+    const value = String(form[key] ?? '').trim()
+    if (BOOLEAN_SETTING_KEYS.has(key)) {
+      payload[key] = value === 'true'
+      continue
+    }
+    if (!value) continue
+    if (NUMERIC_SETTING_KEYS.has(key)) payload[key] = Number(value)
+    else payload[key] = value
+  }
+  return payload
+}
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
new file mode 100644
index 0000000..4dbb9ef
--- /dev/null
+++ b/apps/web/src/routes/__root.tsx
@@ -0,0 +1,18 @@
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
+import { AppShell } from '@/components/layout/app-shell'
+
+interface RouterContext {
+  queryClient: import('@tanstack/react-query').QueryClient
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <AppShell>
+      <Outlet />
+    </AppShell>
+  )
+}
diff --git a/apps/web/src/routes/_auth.tsx b/apps/web/src/routes/_auth.tsx
new file mode 100644
index 0000000..96ba1d2
--- /dev/null
+++ b/apps/web/src/routes/_auth.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_auth')({
+  beforeLoad: () => {
+    const token =
+      typeof window !== 'undefined' ? window.localStorage.getItem('evobgp_api_token') : null
+    if (!token) {
+      throw redirect({ to: '/settings' })
+    }
+  },
+  component: AuthLayout,
+})
+
+function AuthLayout() {
+  return <Outlet />
+}
diff --git a/apps/web/src/routes/_auth/access.tsx b/apps/web/src/routes/_auth/access.tsx
new file mode 100644
index 0000000..0c716e8
--- /dev/null
+++ b/apps/web/src/routes/_auth/access.tsx
@@ -0,0 +1,245 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Button } from '@evobgp/ui/components/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+import { RefreshCw } from 'lucide-react'
+import { toast } from 'sonner'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { authSessionQueryOptions } from '@/queries/auth'
+import { apiKeysQueryOptions } from '@/queries/api-keys'
+import { apiMutate } from '@/lib/api-client'
+import { useMutation } from '@tanstack/react-query'
+import type { ApiKeyCreated } from '@/types/api'
+import { useState } from 'react'
+import { Copy } from 'lucide-react'
+
+export const Route = createFileRoute('/_auth/access')({
+  component: AccessComponent,
+})
+
+function AccessComponent() {
+  const sessionQuery = useQuery(authSessionQueryOptions())
+  const session = sessionQuery.data ?? null
+  const isOperator = session?.role === 'operator'
+
+  const keysQuery = useQuery({
+    ...apiKeysQueryOptions(),
+    enabled: isOperator,
+  })
+
+  return (
+    <div className="mx-auto flex max-w-4xl flex-col gap-6">
+      <PageHeader
+        title="Права доступа"
+        description="API-ключи control plane и текущая сессия Bearer-токена."
+      />
+
+      {session ? (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Текущая сессия</CardTitle>
+            <CardDescription>Tenant и роль ключа, с которым открыта панель.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-3 text-sm sm:grid-cols-2">
+            <div>
+              <p className="text-muted-foreground">Tenant</p>
+              <p className="break-all font-mono text-xs">{session.tenant_id}</p>
+            </div>
+            <div>
+              <p className="text-muted-foreground">Роль</p>
+              <p className="font-mono">{session.role}</p>
+            </div>
+          </CardContent>
+        </Card>
+      ) : null}
+
+      {isOperator ? (
+        <ApiKeysCard
+          items={keysQuery.data ?? []}
+          isLoading={keysQuery.isLoading}
+          isError={keysQuery.isError}
+          error={keysQuery.error}
+          onRetry={() => keysQuery.refetch()}
+        />
+      ) : session ? (
+        <Card>
+          <CardContent className="py-6 text-sm text-muted-foreground">
+            Управление API-ключами доступно только роли <strong>operator</strong>. Текущая роль:{' '}
+            <span className="font-mono">{session.role}</span>.
+          </CardContent>
+        </Card>
+      ) : null}
+    </div>
+  )
+}
+
+function ApiKeysCard({
+  items,
+  isLoading,
+  isError,
+  error,
+  onRetry,
+}: {
+  items: import('@/types/api').ApiKey[]
+  isLoading: boolean
+  isError: boolean
+  error: unknown
+  onRetry: () => void
+}) {
+  const [revealedToken, setRevealedToken] = useState<string | null>(null)
+
+  const revoke = useMutation({
+    mutationFn: (id: string) =>
+      apiMutate(`/v1/api-keys/${id}`, 'DELETE', undefined, { idempotent: false }),
+    onSuccess: () => toast.success('Ключ отозван'),
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось отозвать'),
+  })
+
+  const rotate = useMutation({
+    mutationFn: (id: string) =>
+      apiMutate<ApiKeyCreated>(`/v1/api-keys/${id}/rotate`, 'POST', undefined, {
+        idempotent: false,
+      }),
+    onSuccess: (created) => {
+      toast.success('Ключ ротирован')
+      setRevealedToken(created.token)
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось ротировать'),
+  })
+
+  async function copyToken() {
+    if (!revealedToken) return
+    try {
+      await navigator.clipboard.writeText(revealedToken)
+      toast.success('Скопировано')
+    } catch {
+      toast.error('Не удалось скопировать')
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col gap-3 border-b py-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="min-w-0 flex-1">
+          <CardTitle className="text-base">API-ключи</CardTitle>
+          <CardDescription>
+            Управление ключами tenant. Полный токен показывается только при создании и ротации.
+          </CardDescription>
+        </div>
+        <Button size="sm" variant="outline" onClick={onRetry} disabled={isLoading}>
+          <RefreshCw className={isLoading ? 'animate-spin' : ''} />
+          Обновить
+        </Button>
+      </CardHeader>
+      <CardContent className="p-0">
+        <QueryState
+          data={items}
+          isLoading={isLoading}
+          isError={isError}
+          error={error}
+          empty={items.length === 0}
+          emptyTitle="Нет ключей"
+          emptyDescription="Ключи можно создать через API."
+          onRetry={onRetry}
+        >
+          {(data) => (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Имя</TableHead>
+                  <TableHead>Роль</TableHead>
+                  <TableHead>Префикс</TableHead>
+                  <TableHead>Статус</TableHead>
+                  <TableHead className="w-24" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.map((k) => (
+                  <TableRow key={k.id}>
+                    <TableCell className="font-medium">{k.name}</TableCell>
+                    <TableCell className="font-mono text-sm">{k.role}</TableCell>
+                    <TableCell className="font-mono text-xs text-muted-foreground">{k.prefix}…</TableCell>
+                    <TableCell>
+                      {k.revoked_at ? (
+                        <span className="text-sm text-destructive">отозван</span>
+                      ) : (
+                        <span className="text-sm text-muted-foreground">активен</span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-1">
+                        <ConfirmDialog
+                          trigger={
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              title="Ротировать"
+                              disabled={!!k.revoked_at}
+                            >
+                              <RefreshCw className="size-3.5" />
+                            </Button>
+                          }
+                          title="Ротировать ключ?"
+                          description="Старый токен перестанет работать сразу."
+                          confirmLabel="Ротировать"
+                          onConfirm={() => rotate.mutate(k.id)}
+                        />
+                        <ConfirmDialog
+                          trigger={
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              className="text-destructive"
+                              disabled={!!k.revoked_at}
+                              title="Отозвать"
+                            >
+                              <Copy className="size-3.5" />
+                            </Button>
+                          }
+                          title="Отозвать API-ключ?"
+                          description={`${k.name} (${k.prefix}…)`}
+                          confirmLabel="Отозвать"
+                          destructive
+                          onConfirm={() => revoke.mutate(k.id)}
+                        />
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </QueryState>
+      </CardContent>
+
+      {revealedToken ? (
+        <div className="flex flex-col gap-3 border-t p-4">
+          <div className="text-sm font-medium">Новый токен (сохраните сейчас):</div>
+          <div className="break-all rounded-md border bg-muted/40 p-3 font-mono text-xs">
+            {revealedToken}
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={copyToken}>
+              <Copy /> Копировать
+            </Button>
+            <Button size="sm" onClick={() => setRevealedToken(null)}>
+              Готово
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </Card>
+  )
+}
diff --git a/apps/web/src/routes/_auth/dashboard.tsx b/apps/web/src/routes/_auth/dashboard.tsx
new file mode 100644
index 0000000..a101d04
--- /dev/null
+++ b/apps/web/src/routes/_auth/dashboard.tsx
@@ -0,0 +1,400 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueries } from '@tanstack/react-query'
+import {
+  Boxes,
+  CheckCircle,
+  Clock,
+  GitBranch,
+  Info,
+  Network,
+  Play,
+  Plus,
+  Radio,
+  RefreshCw,
+  Activity,
+  Share2,
+  Tags,
+  Gauge,
+  XCircle,
+} from 'lucide-react'
+import { Link } from '@tanstack/react-router'
+import { useState } from 'react'
+
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+
+import { PageHeader } from '@/components/page-header'
+import { SectionCards, type SectionCardItem } from '@/components/section-cards'
+import { SectionCardsSkeleton } from '@/components/skeletons'
+
+import {
+  aggregateNetworkMetrics,
+  moduleNameById,
+  overviewHealthQueryOptions,
+  overviewJobsQueryOptions,
+  overviewModulesQueryOptions,
+  overviewPeersQueryOptions,
+  overviewRevisionsQueryOptions,
+  overviewSpeakersQueryOptions,
+  runningJobCount,
+} from '@/queries/overview'
+
+export const Route = createFileRoute('/_auth/dashboard')({
+  component: DashboardComponent,
+})
+
+function DashboardComponent() {
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
+
+  const results = useQueries({
+    queries: [
+      overviewHealthQueryOptions(),
+      overviewModulesQueryOptions(),
+      overviewPeersQueryOptions(),
+      overviewSpeakersQueryOptions(),
+      overviewRevisionsQueryOptions(),
+      overviewJobsQueryOptions(),
+    ],
+  })
+
+  const [healthQ, modulesQ, peersQ, speakersQ, revisionsQ, jobsQ] = results
+  const initialLoading =
+    modulesQ.isLoading || peersQ.isLoading || speakersQ.isLoading || revisionsQ.isLoading || jobsQ.isLoading
+  const refreshing = results.some((r) => r.isFetching && !r.isLoading)
+
+  if (!lastUpdated && !initialLoading && results.every((r) => r.isSuccess || r.isError)) {
+    setTimeout(() => setLastUpdated(new Date()), 0)
+  }
+
+  function refetchAll() {
+    setLastUpdated(null)
+    results.forEach((r) => r.refetch())
+  }
+
+  const modules = modulesQ.data?.items ?? []
+  const peers = peersQ.data?.items ?? []
+  const speakers = speakersQ.data?.items ?? []
+  const revisions = revisionsQ.data?.items ?? []
+  const jobs = jobsQ.data?.items ?? []
+  const modulesHasMore = modulesQ.data?.has_more ?? false
+  const peersHasMore = peersQ.data?.has_more ?? false
+  const speakersHasMore = speakersQ.data?.has_more ?? false
+  const revisionsHasMore = revisionsQ.data?.has_more ?? false
+
+  const net = aggregateNetworkMetrics(peers, speakers)
+  const running = runningJobCount(jobs)
+  const nameById = moduleNameById(modules)
+
+  const countBadge = (n: number, hasMore: boolean, suffix: string) => (hasMore ? '200+' : suffix)
+
+  const items: SectionCardItem[] = [
+    {
+      label: 'Модули',
+      value: initialLoading ? '—' : String(modules.length),
+      icon: <Boxes className="size-4" />,
+      hint: countBadge(modules.length, modulesHasMore, 'AS, CDN, домены, IP'),
+      onClick: () => window.location.assign('/modules'),
+    },
+    {
+      label: 'Пиры',
+      value: initialLoading ? '—' : `${net.peersEstablished}/${net.peersEnabled}`,
+      icon: <GitBranch className="size-4" />,
+      hint: countBadge(peers.length, peersHasMore, 'Established / включённых'),
+      badge: net.peersMismatch > 0 ? `mismatch ${net.peersMismatch}` : undefined,
+      variant: net.peersMismatch > 0 ? 'warning' : 'default',
+      onClick: () => window.location.assign('/network?tab=peers'),
+    },
+    {
+      label: 'Спикеры',
+      value: initialLoading ? '—' : `${net.speakersOnline}/${net.speakersTotal}`,
+      icon: <Radio className="size-4" />,
+      hint: countBadge(speakers.length, speakersHasMore, 'online / всего'),
+      variant: net.speakersOnline < net.speakersTotal ? 'warning' : 'default',
+      onClick: () => window.location.assign('/network?tab=overview'),
+    },
+    {
+      label: 'Ревизии',
+      value: initialLoading ? '—' : String(revisions.length),
+      icon: <Activity className="size-4" />,
+      hint: countBadge(revisions.length, revisionsHasMore, 'configs'),
+      onClick: () => window.location.assign('/operations'),
+    },
+    {
+      label: 'Активных задач',
+      value: initialLoading ? '—' : String(running),
+      icon: <Clock className="size-4" />,
+      hint: 'queued и running',
+      onClick: () => window.location.assign('/operations?tab=jobs'),
+    },
+  ]
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Обзор"
+        description={
+          lastUpdated
+            ? `Состояние панели управления EvoBGP. Обновлено: ${lastUpdated.toLocaleTimeString('ru-RU')}`
+            : 'Состояние панели управления EvoBGP.'
+        }
+        actions={
+          <Button variant="outline" size="sm" onClick={refetchAll} disabled={refreshing}>
+            <RefreshCw className={refreshing ? 'animate-spin' : ''} />
+            Обновить
+          </Button>
+        }
+      />
+
+      <Alert className="border-info/30 bg-info/5">
+        <Info className="text-info" />
+        <AlertTitle>Панель управления EvoBGP</AlertTitle>
+        <AlertDescription>
+          Сводка по модулям, сети и фоновым задачам. BGP и ноды — «Сеть», префиксы — «Модули»,
+          деплой — «Операции», здоровье API — «Мониторинг».
+        </AlertDescription>
+      </Alert>
+
+      <HealthAlert
+        loading={healthQ.isLoading}
+        ok={healthQ.data === true}
+        loadError={modulesQ.isError || peersQ.isError ? 'Некоторые данные не загружены' : null}
+      />
+
+      {initialLoading ? <SectionCardsSkeleton count={5} /> : <SectionCards items={items} />}
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <RecentJobsCard jobs={jobs} nameById={nameById} loading={refreshing} />
+        <RecentRevisionsCard revisions={revisions} loading={refreshing} />
+        <NetworkStatusCard peers={peers} speakers={speakers} loading={refreshing} />
+      </div>
+
+      <Card>
+        <CardHeader className="border-b py-3">
+          <CardTitle className="text-base">Быстрые действия</CardTitle>
+          <CardDescription>Частые переходы к настройке и деплою</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2 p-4">
+          <Button variant="outline" size="sm" render={<Link to="/modules" />}>
+            <Plus className="size-4" />
+            Создать модуль
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/directories')}>
+            <Tags className="size-4" />
+            Добавить community
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/network?tab=overview')}>
+            <Network className="size-4" />
+            Сеть
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/network?tab=peers')}>
+            <Share2 className="size-4" />
+            Добавить пира
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/operations')}>
+            <Play className="size-4" />
+            Деплой (Apply)
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/monitoring')}>
+            <Gauge className="size-4" />
+            Мониторинг
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function HealthAlert({
+  loading,
+  ok,
+  loadError,
+}: {
+  loading: boolean
+  ok: boolean | undefined
+  loadError: string | null
+}) {
+  if (loading) {
+    return (
+      <Alert>
+        <Skeleton className="size-5 rounded-full" />
+        <AlertTitle>Проверка API…</AlertTitle>
+        <AlertDescription>
+          Запрос к <code className="text-xs">/v1/health</code>
+        </AlertDescription>
+      </Alert>
+    )
+  }
+  if (ok && !loadError) {
+    return (
+      <Alert className="border-success/30 bg-success/5">
+        <CheckCircle className="text-success" />
+        <AlertTitle>API работает</AlertTitle>
+        <AlertDescription>Сервер отвечает на запросы health-check.</AlertDescription>
+      </Alert>
+    )
+  }
+  if (ok && loadError) {
+    return (
+      <Alert className="border-warning/30 bg-warning/5">
+        <Info className="text-warning" />
+        <AlertTitle>API доступен, данные не загружены</AlertTitle>
+        <AlertDescription>{loadError}. Проверьте Bearer-токен в «Настройках».</AlertDescription>
+      </Alert>
+    )
+  }
+  return (
+    <Alert variant="destructive" className="border-destructive/30 bg-destructive/5">
+      <XCircle className="text-destructive" />
+      <AlertTitle>API недоступен</AlertTitle>
+      <AlertDescription>
+        Не удалось получить ответ от сервера. Проверьте, что API запущен (порт 8080) и в dev работает
+        прокси Vite.
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+function RecentJobsCard({
+  jobs,
+  nameById,
+  loading,
+}: {
+  jobs: import('@/types/api').JobRow[]
+  nameById: Map<string, string>
+  loading: boolean
+}) {
+  return (
+    <Card>
+      <CardHeader className="border-b py-3">
+        <CardTitle className="text-base">Недавние задачи</CardTitle>
+        <CardDescription>Последние фоновые операции</CardDescription>
+      </CardHeader>
+      <CardContent className="p-3">
+        {loading && jobs.length === 0 ? (
+          <Skeleton className="h-24 w-full" />
+        ) : jobs.length === 0 ? (
+          <p className="px-2 py-6 text-center text-sm text-muted-foreground">Нет задач</p>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {jobs.slice(0, 8).map((j) => (
+              <li
+                key={j.job_id}
+                className="flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/40"
+              >
+                <span className="flex min-w-0 flex-col gap-0.5">
+                  <span className="truncate font-mono text-xs text-muted-foreground">{j.kind}</span>
+                  <span className="truncate text-xs">
+                    {j.meta?.module_id ? nameById.get(String(j.meta.module_id)) ?? '' : ''}
+                  </span>
+                </span>
+                <span
+                  className={
+                    j.status === 'succeeded'
+                      ? 'text-xs text-success'
+                      : j.status === 'failed'
+                        ? 'text-xs text-destructive'
+                        : 'text-xs text-muted-foreground'
+                  }
+                >
+                  {j.status}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function RecentRevisionsCard({
+  revisions,
+  loading,
+}: {
+  revisions: import('@/types/api').RevisionRow[]
+  loading: boolean
+}) {
+  return (
+    <Card>
+      <CardHeader className="border-b py-3">
+        <CardTitle className="text-base">Последние ревизии</CardTitle>
+        <CardDescription>История конфигураций</CardDescription>
+      </CardHeader>
+      <CardContent className="p-3">
+        {loading && revisions.length === 0 ? (
+          <Skeleton className="h-24 w-full" />
+        ) : revisions.length === 0 ? (
+          <p className="px-2 py-6 text-center text-sm text-muted-foreground">Нет ревизий</p>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {revisions.slice(0, 8).map((r) => (
+              <li
+                key={r.id}
+                className="flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/40"
+              >
+                <span className="truncate font-mono text-xs text-muted-foreground">{r.id.slice(0, 10)}…</span>
+                <span className="text-xs text-muted-foreground">
+                  {new Date(r.created_at).toLocaleString('ru-RU')}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function NetworkStatusCard({
+  peers,
+  speakers,
+  loading,
+}: {
+  peers: import('@/types/api').PeerRow[]
+  speakers: import('@/types/api').SpeakerRow[]
+  loading: boolean
+}) {
+  const m = aggregateNetworkMetrics(peers, speakers)
+  return (
+    <Card>
+      <CardHeader className="border-b py-3">
+        <CardTitle className="text-base">Состояние сети</CardTitle>
+        <CardDescription>BGP-сессии и спикеры</CardDescription>
+      </CardHeader>
+      <CardContent className="p-3">
+        {loading && peers.length === 0 && speakers.length === 0 ? (
+          <Skeleton className="h-24 w-full" />
+        ) : (
+          <div className="flex flex-col gap-2 px-1 py-1 text-sm">
+            <Row label="Пиры Established" value={`${m.peersEstablished} / ${m.peersEnabled}`} />
+            <Row label="Спикеры online" value={`${m.speakersOnline} / ${m.speakersTotal}`} />
+            {m.peersMismatch > 0 ? (
+              <Row label="Mismatches" value={String(m.peersMismatch)} variant="warning" />
+            ) : null}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function Row({
+  label,
+  value,
+  variant = 'default',
+}: {
+  label: string
+  value: string
+  variant?: 'default' | 'warning'
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <span className="text-muted-foreground">{label}</span>
+      <span className={variant === 'warning' ? 'font-medium text-warning-foreground' : 'font-medium tabular-nums'}>
+        {value}
+      </span>
+    </div>
+  )
+}
diff --git a/apps/web/src/routes/_auth/directories.tsx b/apps/web/src/routes/_auth/directories.tsx
new file mode 100644
index 0000000..49bb5fa
--- /dev/null
+++ b/apps/web/src/routes/_auth/directories.tsx
@@ -0,0 +1,186 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { BookText, Globe, Info, RefreshCw, Tags } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Badge } from '@evobgp/ui/components/badge'
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { SectionCards, type SectionCardItem } from '@/components/section-cards'
+import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
+import { directoriesCommunitiesQueryOptions, directoriesDohQueryOptions } from '@/queries/directories'
+
+export const Route = createFileRoute('/_auth/directories')({
+  component: DirectoriesComponent,
+})
+
+function DirectoriesComponent() {
+  const communitiesQ = useQuery(directoriesCommunitiesQueryOptions())
+  const dohQ = useQuery(directoriesDohQueryOptions())
+
+  const communities = communitiesQ.data?.items ?? []
+  const dohProfiles = dohQ.data?.items ?? []
+  const loading = communitiesQ.isLoading || dohQ.isLoading
+
+  const items: SectionCardItem[] = [
+    {
+      label: 'Сообщества BGP',
+      value: communities.length,
+      icon: <Tags className="size-4" />,
+      hint: 'теги префиксов в AS- и CDN-модулях',
+    },
+    {
+      label: 'DoH профили',
+      value: dohProfiles.length,
+      icon: <Globe className="size-4" />,
+      hint: 'резолвинг доменных модулей',
+    },
+    {
+      label: 'Справочники',
+      value: 'Общие',
+      icon: <BookText className="size-4" />,
+      hint: 'используются всеми модулями tenant',
+    },
+  ]
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Справочники"
+        description="Сообщества BGP и DoH-профили для резолвинга доменов"
+        actions={
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              void communitiesQ.refetch()
+              void dohQ.refetch()
+            }}
+            disabled={loading}
+          >
+            <RefreshCw className={loading ? 'animate-spin' : ''} />
+            Обновить
+          </Button>
+        }
+      />
+
+      <Alert className="border-info/30 bg-info/5">
+        <Info className="text-info" />
+        <AlertTitle>О справочниках</AlertTitle>
+        <AlertDescription>
+          Сообщества BGP используются в AS- и CDN-модулях для тегирования префиксов. DoH-профили — в
+          доменных модулях для DNS-over-HTTPS резолвинга.
+        </AlertDescription>
+      </Alert>
+
+      {loading ? <SectionCardsSkeleton count={3} /> : <SectionCards items={items} />}
+
+      <Tabs defaultValue="communities">
+        <TabsList>
+          <TabsTrigger value="communities">Сообщества BGP</TabsTrigger>
+          <TabsTrigger value="doh">DoH профили</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="communities" className="mt-4">
+          <Card>
+            <CardHeader className="border-b py-3">
+              <CardTitle className="text-base">Сообщества BGP</CardTitle>
+              <CardDescription>Теги для префиксов в фильтрах BIRD</CardDescription>
+            </CardHeader>
+            <CardContent className="p-0">
+              <QueryState
+                data={communities}
+                isLoading={communitiesQ.isLoading}
+                isError={communitiesQ.isError}
+                error={communitiesQ.error}
+                empty={communities.length === 0}
+                emptyTitle="Нет сообществ"
+                skeleton={<TableSkeleton rows={4} cols={3} />}
+                onRetry={() => communitiesQ.refetch()}
+              >
+                {(items) => (
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Название</TableHead>
+                        <TableHead>Значение</TableHead>
+                        <TableHead>Тип</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {items.map((c) => (
+                        <TableRow key={c.id}>
+                          <TableCell className="font-medium">{c.title}</TableCell>
+                          <TableCell className="font-mono text-xs">{c.community}</TableCell>
+                          <TableCell>
+                            <Badge variant="outline">community</Badge>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="doh" className="mt-4">
+          <Card>
+            <CardHeader className="border-b py-3">
+              <CardTitle className="text-base">DoH профили</CardTitle>
+              <CardDescription>Резолверы DNS-over-HTTPS для доменных модулей</CardDescription>
+            </CardHeader>
+            <CardContent className="p-0">
+              <QueryState
+                data={dohProfiles}
+                isLoading={dohQ.isLoading}
+                isError={dohQ.isError}
+                error={dohQ.error}
+                empty={dohProfiles.length === 0}
+                emptyTitle="Нет DoH профилей"
+                skeleton={<TableSkeleton rows={4} cols={3} />}
+                onRetry={() => dohQ.refetch()}
+              >
+                {(items) => (
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Название</TableHead>
+                        <TableHead>URL</TableHead>
+                        <TableHead>По умолчанию</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {items.map((p) => (
+                        <TableRow key={p.id}>
+                          <TableCell className="font-medium">{p.name ?? p.url}</TableCell>
+                          <TableCell className="font-mono text-xs">{p.url}</TableCell>
+                          <TableCell>
+                            <Badge variant="outline">—</Badge>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/web/src/routes/_auth/modules/$moduleId.tsx b/apps/web/src/routes/_auth/modules/$moduleId.tsx
new file mode 100644
index 0000000..1af2a96
--- /dev/null
+++ b/apps/web/src/routes/_auth/modules/$moduleId.tsx
@@ -0,0 +1,202 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { ArrowLeft, RefreshCw } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+import { Badge } from '@/components/reui/badge'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import { StatusBadge } from '@/components/status-badge'
+import { moduleDetailQueryOptions, moduleEntriesQueryOptions } from '@/queries/modules'
+
+export const Route = createFileRoute('/_auth/modules/$moduleId')({
+  component: ModuleDetailComponent,
+})
+
+function ModuleDetailComponent() {
+  const { moduleId } = Route.useParams()
+  const detail = useQuery(moduleDetailQueryOptions(moduleId))
+  const mod = detail.data
+
+  const entriesQuery = useQuery({
+    ...moduleEntriesQueryOptions(moduleId, mod?.type ?? 'DOMAINS'),
+    enabled: !!mod,
+  })
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title={mod?.name ?? moduleId}
+        description={mod ? `Тип: ${mod.type}` : 'Загрузка модуля…'}
+        actions={
+          <>
+            <Button variant="outline" size="sm" render={<Link to="/modules" />}>
+              <ArrowLeft />
+              К списку
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                void detail.refetch()
+                void entriesQuery.refetch()
+              }}
+              disabled={detail.isFetching}
+            >
+              <RefreshCw className={detail.isFetching ? 'animate-spin' : ''} />
+              Обновить
+            </Button>
+          </>
+        }
+      />
+
+      <QueryState
+        data={mod}
+        isLoading={detail.isLoading}
+        isError={detail.isError}
+        error={detail.error}
+        skeleton={<TableSkeleton rows={4} cols={2} />}
+        onRetry={() => detail.refetch()}
+      >
+        {(m) => (
+          <>
+            <div className="grid gap-4 md:grid-cols-2">
+              <Card>
+                <CardHeader className="border-b py-3">
+                  <CardTitle className="text-base">Параметры</CardTitle>
+                </CardHeader>
+                <CardContent className="grid grid-cols-2 gap-3 p-4 text-sm">
+                  <Field label="ID" value={<code className="font-mono text-xs">{m.id}</code>} />
+                  <Field label="Тип" value={<Badge variant="outline">{m.type}</Badge>} />
+                  <Field label="Приоритет" value={<span className="font-mono">{m.priority}</span>} />
+                  <Field
+                    label="Состояние"
+                    value={
+                      m.enabled ? (
+                        <StatusBadge status="active" label="включён" />
+                      ) : (
+                        <StatusBadge status="paused" label="выключен" />
+                      )
+                    }
+                  />
+                  <Field
+                    label="Интервал"
+                    value={
+                      m.refresh_interval_sec ? `${m.refresh_interval_sec}s` : '—'
+                    }
+                  />
+                  <Field
+                    label="Cron"
+                    value={m.cron_expr ? <code className="font-mono text-xs">{m.cron_expr}</code> : '—'}
+                  />
+                  <Field
+                    label="Последний рефреш"
+                    value={
+                      m.last_refreshed_at
+                        ? new Date(m.last_refreshed_at).toLocaleString('ru-RU')
+                        : '—'
+                    }
+                  />
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="border-b py-3">
+                  <CardTitle className="text-base">Маршрутные списки</CardTitle>
+                  <CardDescription>Источник префиксов для модуля</CardDescription>
+                </CardHeader>
+                <CardContent className="p-0">
+                  <QueryState
+                    data={entriesQuery.data?.items}
+                    isLoading={entriesQuery.isLoading}
+                    isError={entriesQuery.isError}
+                    error={entriesQuery.error}
+                    empty={(entriesQuery.data?.items?.length ?? 0) === 0}
+                    emptyTitle="Записей нет"
+                    emptyDescription="Добавьте записи через API или создание ревизии."
+                    skeleton={<TableSkeleton rows={5} cols={2} />}
+                    onRetry={() => entriesQuery.refetch()}
+                  >
+                    {(items) => <EntriesTable items={items} moduleType={m.type} />}
+                  </QueryState>
+                </CardContent>
+              </Card>
+            </div>
+          </>
+        )}
+      </QueryState>
+    </div>
+  )
+}
+
+function Field({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span>{value}</span>
+    </div>
+  )
+}
+
+function EntriesTable({
+  items,
+  moduleType,
+}: {
+  items: Record<string, unknown>[]
+  moduleType: string
+}) {
+  const primary = ENTRY_PRIMARY_KEY[moduleType as keyof typeof ENTRY_PRIMARY_KEY] ?? 'id'
+  const secondary = ENTRY_SECONDARY_KEY[moduleType as keyof typeof ENTRY_SECONDARY_KEY] ?? null
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>{primary}</TableHead>
+          {secondary ? <TableHead>{secondary}</TableHead> : null}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items.map((item, idx) => {
+          const id = String(item.id ?? idx)
+          const primaryVal = String(item[primary] ?? '—')
+          return (
+            <TableRow key={id}>
+              <TableCell className="font-mono text-sm">{primaryVal}</TableCell>
+              {secondary ? (
+                <TableCell className="font-mono text-xs text-muted-foreground">
+                  {String(item[secondary] ?? '—')}
+                </TableCell>
+              ) : null}
+            </TableRow>
+          )
+        })}
+      </TableBody>
+    </Table>
+  )
+}
+
+const ENTRY_PRIMARY_KEY = {
+  DOMAINS: 'fqdn',
+  AS_PREFIXES: 'asn',
+  CDN_CIDRS: 'url',
+  IP_RANGES: 'prefix',
+} as const
+
+const ENTRY_SECONDARY_KEY = {
+  DOMAINS: 'community_id',
+  AS_PREFIXES: 'community_id',
+  CDN_CIDRS: 'community_id',
+  IP_RANGES: 'community_id',
+} as const
diff --git a/apps/web/src/routes/_auth/modules/index.tsx b/apps/web/src/routes/_auth/modules/index.tsx
new file mode 100644
index 0000000..4f21b95
--- /dev/null
+++ b/apps/web/src/routes/_auth/modules/index.tsx
@@ -0,0 +1,123 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { Boxes, Plus, RefreshCw } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+import { Badge } from '@/components/reui/badge'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import { TruncatedText } from '@/components/truncated-text'
+import { modulesListQueryOptions } from '@/queries/modules'
+import type { ModuleRow } from '@/types/api'
+
+export const Route = createFileRoute('/_auth/modules/')({
+  component: ModulesListComponent,
+})
+
+function ModulesListComponent() {
+  const query = useQuery(modulesListQueryOptions())
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Модули"
+        description="Маршрутные списки: AS, CDN, домены, IP-диапазоны"
+        actions={
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => query.refetch()}
+              disabled={query.isFetching}
+            >
+              <RefreshCw className={query.isFetching ? 'animate-spin' : ''} />
+              Обновить
+            </Button>
+          </>
+        }
+      />
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between border-b py-3">
+          <CardTitle className="text-base">Все модули</CardTitle>
+          <Button size="sm" render={<Link to="/modules/new" />}>
+            <Plus />
+            Создать
+          </Button>
+        </CardHeader>
+        <CardContent className="p-0">
+          <QueryState
+            data={query.data?.items}
+            isLoading={query.isLoading}
+            isError={query.isError}
+            error={query.error}
+            empty={query.data?.items?.length === 0}
+            emptyTitle="Нет модулей"
+            emptyDescription="Создайте первый модуль (AS, CDN, домены, IP)."
+            skeleton={<TableSkeleton rows={6} cols={5} />}
+            onRetry={() => query.refetch()}
+          >
+            {(items) => <ModulesTable items={items} />}
+          </QueryState>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function ModulesTable({ items }: { items: ModuleRow[] }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Название</TableHead>
+          <TableHead>Тип</TableHead>
+          <TableHead>Приоритет</TableHead>
+          <TableHead>Состояние</TableHead>
+          <TableHead>Обновлено</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items.map((m) => (
+          <TableRow
+            key={m.id}
+            className="cursor-pointer hover:bg-muted/40"
+            onClick={() => (window.location.href = `/modules/${m.id}`)}
+          >
+            <TableCell className="font-medium">
+              <div className="flex items-center gap-2">
+                <Boxes className="size-4 text-muted-foreground" />
+                <TruncatedText className="max-w-[280px]">{m.name}</TruncatedText>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Badge variant="outline">{m.type}</Badge>
+            </TableCell>
+            <TableCell className="font-mono text-sm tabular-nums">{m.priority}</TableCell>
+            <TableCell>
+              {m.enabled ? (
+                <Badge variant="success">включён</Badge>
+              ) : (
+                <Badge variant="secondary">выключен</Badge>
+              )}
+            </TableCell>
+            <TableCell className="text-xs text-muted-foreground">
+              {m.last_refreshed_at ? new Date(m.last_refreshed_at).toLocaleString('ru-RU') : '—'}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/web/src/routes/_auth/modules/new.tsx b/apps/web/src/routes/_auth/modules/new.tsx
new file mode 100644
index 0000000..1c9e1fd
--- /dev/null
+++ b/apps/web/src/routes/_auth/modules/new.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+import { Button } from '@evobgp/ui/components/button'
+import { PageHeader } from '@/components/page-header'
+
+export const Route = createFileRoute('/_auth/modules/new')({
+  component: NewModuleComponent,
+})
+
+function NewModuleComponent() {
+  return (
+    <div className="mx-auto flex max-w-3xl flex-col gap-6">
+      <PageHeader
+        title="Новый модуль"
+        description="Создание модуля — через API или будущая форма"
+      />
+      <Card>
+        <CardContent className="flex flex-col gap-3 py-6 text-sm text-muted-foreground">
+          <p>
+            Форма создания модуля будет добавлена позже. Сейчас модули можно создать через API:
+          </p>
+          <pre className="overflow-x-auto rounded-md border bg-muted/40 p-3 font-mono text-xs">
+{`POST /v1/modules
+{ "type": "DOMAINS", "name": "Мой список" }`}
+          </pre>
+          <Button variant="outline" size="sm" className="self-start" render={<Link to="/modules" />}>
+            Назад к списку
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/web/src/routes/_auth/monitoring.tsx b/apps/web/src/routes/_auth/monitoring.tsx
new file mode 100644
index 0000000..8d94b19
--- /dev/null
+++ b/apps/web/src/routes/_auth/monitoring.tsx
@@ -0,0 +1,457 @@
+import { createFileRoute, useSearch } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { Activity, AlertTriangle, Bird, Database, Gauge, HardDrive, HeartPulse, Info, ListTodo, RefreshCw, ShieldCheck } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Badge } from '@evobgp/ui/components/badge'
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Separator } from '@evobgp/ui/components/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { SectionCards, type SectionCardItem } from '@/components/section-cards'
+import { SectionCardsSkeleton } from '@/components/skeletons'
+
+import {
+  monitoringHealthQueryOptions,
+  monitoringReadyQueryOptions,
+  monitoringVersionQueryOptions,
+  type ReadyStatus,
+  type VersionInfo,
+} from '@/queries/monitoring'
+import { networkBirdQueryOptions } from '@/queries/network'
+import { operationsJobsQueryOptions } from '@/queries/operations'
+
+export const Route = createFileRoute('/_auth/monitoring')({
+  component: MonitoringComponent,
+  validateSearch: (search: Record<string, unknown>) => ({
+    tab: (search.tab === 'postgres' || search.tab === 'runtime-logs' ? search.tab : 'system') as
+      | 'system'
+      | 'postgres'
+      | 'runtime-logs',
+  }),
+})
+
+function MonitoringComponent() {
+  const search = useSearch({ from: '/_auth/monitoring' })
+  const healthQ = useQuery(monitoringHealthQueryOptions())
+  const readyQ = useQuery(monitoringReadyQueryOptions())
+  const versionQ = useQuery(monitoringVersionQueryOptions())
+  const birdQ = useQuery(networkBirdQueryOptions())
+  const jobsQ = useQuery(operationsJobsQueryOptions())
+
+  const refreshing =
+    healthQ.isFetching ||
+    readyQ.isFetching ||
+    versionQ.isFetching ||
+    birdQ.isFetching ||
+    jobsQ.isFetching
+
+  const jobs = jobsQ.data?.items ?? []
+  const running = jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+  const failed = jobs.filter((j) =>
+    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+  ).length
+
+  const versionText = formatVersion(versionQ.data)
+
+  const items: SectionCardItem[] = [
+    {
+      label: 'Общий статус',
+      value: overallStatusLabel({ health: healthQ.data, ready: readyQ.data, jobsFailed: failed }),
+      icon: <Gauge className="size-4" />,
+      hint: overallHint({ health: healthQ.data, jobsFailed: failed }),
+    },
+    {
+      label: 'BGP сессии',
+      value: birdQ.data
+        ? `${birdQ.data.bgp_established}/${birdQ.data.bgp_sessions_total}`
+        : '—',
+      icon: <Bird className="size-4" />,
+      hint: birdQ.data?.birdc_configured
+        ? 'Established / total на API-хосте'
+        : 'birdc не настроен',
+    },
+    {
+      label: 'Задачи',
+      value: running,
+      icon: <Activity className="size-4" />,
+      hint: `активных из ${jobs.length}`,
+      variant: failed > 0 ? 'warning' : 'default',
+    },
+    {
+      label: 'Версия',
+      value: versionText,
+      icon: <Gauge className="size-4" />,
+      hint: versionQ.data?.git_sha ?? versionQ.data?.build_time ?? 'GET /v1/version',
+    },
+  ]
+
+  function refetchAll() {
+    void healthQ.refetch()
+    void readyQ.refetch()
+    void versionQ.refetch()
+    void birdQ.refetch()
+    void jobsQ.refetch()
+  }
+
+  const failedJobs = jobs
+    .filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
+    .slice(0, 5)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Мониторинг"
+        description="Состояние API, BGP и задач для диагностики инцидентов"
+        actions={
+          <Button variant="outline" size="sm" onClick={refetchAll} disabled={refreshing}>
+            <RefreshCw className={refreshing ? 'animate-spin' : ''} />
+            Обновить
+          </Button>
+        }
+      />
+
+      <Tabs defaultValue={search.tab}>
+        <TabsList>
+          <TabsTrigger value="system">Система</TabsTrigger>
+          <TabsTrigger value="postgres">PostgreSQL</TabsTrigger>
+          <TabsTrigger value="runtime-logs">Файловые логи</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="system" className="mt-4 flex flex-col gap-6">
+          {refreshing ? <SectionCardsSkeleton count={4} /> : <SectionCards items={items} />}
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Доступность и готовность</CardTitle>
+                <CardDescription>GET /v1/health · GET /v1/ready</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <QueryState
+                  data={readyQ.data}
+                  isLoading={readyQ.isLoading}
+                  isError={readyQ.isError}
+                  error={readyQ.error}
+                  skeleton={<div className="h-40" />}
+                  onRetry={() => readyQ.refetch()}
+                >
+                  {(ready) => <ReadyTable health={healthQ.data} ready={ready} />}
+                </QueryState>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Bird className="size-4" />
+                  BGP на API-хосте
+                </CardTitle>
+                <CardDescription>GET /v1/bird/status</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <QueryState
+                  data={birdQ.data}
+                  isLoading={birdQ.isLoading}
+                  isError={birdQ.isError}
+                  error={birdQ.error}
+                  skeleton={<div className="h-40" />}
+                  onRetry={() => birdQ.refetch()}
+                >
+                  {(bird) => <BirdSummary bird={bird} />}
+                </QueryState>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Activity className="size-4" />
+                  Задачи
+                </CardTitle>
+                <CardDescription>Последние 100 задач · GET /v1/jobs</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex flex-wrap gap-4 text-sm">
+                  <Metric label="Активных" value={running} />
+                  <Metric
+                    label="С ошибками"
+                    value={failed}
+                    valueClass={failed > 0 ? 'text-warning' : 'text-success'}
+                  />
+                  <Metric label="В выборке" value={jobs.length} />
+                </div>
+                <Separator />
+                {failedJobs.length > 0 ? (
+                  <div className="space-y-3">
+                    <p className="text-sm font-medium">Последние ошибки</p>
+                    <ul className="space-y-2">
+                      {failedJobs.map((job) => (
+                        <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
+                          <div className="flex items-start justify-between gap-2">
+                            <p className="font-medium">{job.kind}</p>
+                            <Badge variant="destructive">{job.status}</Badge>
+                          </div>
+                          {job.error ? (
+                            <p className="mt-1 text-xs text-muted-foreground">
+                              {job.error.slice(0, 120)}
+                              {job.error.length > 120 ? '…' : ''}
+                            </p>
+                          ) : null}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    Критичных сбоев в последних 100 задачах нет.
+                  </p>
+                )}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <AlertTriangle className="size-4 text-muted-foreground" />
+                  Что проверять при деградации
+                </CardTitle>
+                <CardDescription>Короткая шпаргалка для triage</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <Alert>
+                  <HeartPulse className="size-4" />
+                  <AlertTitle>API недоступен</AlertTitle>
+                  <AlertDescription>
+                    Если <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс
+                    API и его логи.
+                  </AlertDescription>
+                </Alert>
+                <Alert>
+                  <Database className="size-4" />
+                  <AlertTitle>Readiness не «Готов»</AlertTitle>
+                  <AlertDescription>
+                    Сначала <code className="text-xs">postgres</code>, затем{' '}
+                    <code className="text-xs">store</code> и <code className="text-xs">jobs</code> в checks.
+                  </AlertDescription>
+                </Alert>
+                <Alert>
+                  <Bird className="size-4" />
+                  <AlertTitle>Низкий ratio BGP</AlertTitle>
+                  <AlertDescription>
+                    Проверьте <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
+                  </AlertDescription>
+                </Alert>
+                <Alert>
+                  <ListTodo className="size-4" />
+                  <AlertTitle>Ошибки задач</AlertTitle>
+                  <AlertDescription>
+                    Откройте Операции и проверьте последние неуспешные jobs.
+                  </AlertDescription>
+                </Alert>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="postgres" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">PostgreSQL</CardTitle>
+              <CardDescription>Статус соединения и пул</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Alert>
+                <Database className="size-4" />
+                <AlertTitle>Статус готовности</AlertTitle>
+                <AlertDescription>
+                  PostgreSQL-соединение отображается в readiness-проверке на вкладке «Система» (check{' '}
+                  <code className="text-xs">postgres</code>).
+                </AlertDescription>
+              </Alert>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="runtime-logs" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Файловые логи</CardTitle>
+              <CardDescription>Логи API и pipeline</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Alert>
+                <Info className="size-4" />
+                <AlertTitle>Логи на сервере</AlertTitle>
+                <AlertDescription>
+                  Файловые логи настраиваются переменной <code className="text-xs">EVOBGP_LOG_*</code> и
+                  управляются tenant-settings на странице «Настройки BIRD».
+                </AlertDescription>
+              </Alert>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+function Metric({ label, value, valueClass }: { label: string; value: number | string; valueClass?: string }) {
+  return (
+    <div>
+      <p className="text-muted-foreground">{label}</p>
+      <p className={`text-2xl font-bold tabular-nums ${valueClass ?? ''}`}>{value}</p>
+    </div>
+  )
+}
+
+function formatVersion(version?: VersionInfo | null): string {
+  if (!version) return '—'
+  return version.version ?? version.app ?? '—'
+}
+
+interface OverallInput {
+  health?: { ok?: boolean } | null
+  ready?: ReadyStatus | null
+  jobsFailed: number
+}
+
+function overallStatusLabel(input: OverallInput): string {
+  if (!input.health?.ok) return 'Ошибка'
+  if (input.jobsFailed > 0) return 'Внимание'
+  if (input.ready?.status && input.ready.status !== 'ok') return 'Внимание'
+  return 'В норме'
+}
+
+function overallHint(input: OverallInput): string {
+  if (!input.health?.ok) return 'API недоступен или возвращает ошибку'
+  if (input.jobsFailed > 0) return `Есть провальные задачи (${input.jobsFailed})`
+  return 'Все системы работают в штатном режиме'
+}
+
+function ReadyTable({
+  health,
+  ready,
+}: {
+  health?: { ok?: boolean; status?: string; error?: string } | null
+  ready: ReadyStatus
+}) {
+  const checks = ready.checks ?? {}
+  const iconByKey: Record<string, typeof Database> = {
+    postgres: Database,
+    store: HardDrive,
+    jobs: ListTodo,
+  }
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[55%]">Проверка</TableHead>
+          <TableHead>Статус</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <div className="flex items-center gap-2">
+              <HeartPulse className="size-4 shrink-0 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">Liveness</p>
+                <p className="text-xs text-muted-foreground">/v1/health</p>
+              </div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <Badge variant={health?.ok ? 'default' : 'destructive'}>
+              {health?.ok ? 'OK' : 'Ошибка'}
+            </Badge>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <div className="flex items-center gap-2">
+              <ShieldCheck className="size-4 shrink-0 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">Readiness</p>
+                <p className="text-xs text-muted-foreground">/v1/ready</p>
+              </div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <Badge variant={ready.status === 'ok' ? 'default' : 'secondary'}>
+              {ready.status ?? '—'}
+            </Badge>
+          </TableCell>
+        </TableRow>
+        {Object.entries(checks).map(([key, value]) => {
+          const ok = typeof value === 'boolean' ? value : value?.ok !== false
+          const Icon = iconByKey[key] ?? ListTodo
+          return (
+            <TableRow key={key}>
+              <TableCell>
+                <div className="flex items-center gap-2">
+                  <Icon className="size-4 shrink-0 text-muted-foreground" />
+                  <div>
+                    <p className="text-sm font-medium">{key}</p>
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <Badge variant={ok ? 'default' : 'destructive'}>{ok ? 'OK' : 'Ошибка'}</Badge>
+              </TableCell>
+            </TableRow>
+          )
+        })}
+      </TableBody>
+    </Table>
+  )
+}
+
+function BirdSummary({ bird }: { bird: import('@/types/api').BirdStatus }) {
+  if (!bird.birdc_configured) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {bird.message ?? 'birdc не настроен на API-хосте (EVOBGP_BIRDC_SOCKET).'}
+      </p>
+    )
+  }
+  const ratio =
+    bird.bgp_sessions_total > 0
+      ? Math.round((bird.bgp_established / bird.bgp_sessions_total) * 100)
+      : null
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-sm">
+        <span className="text-muted-foreground">Established / total</span>
+        <span className="font-medium tabular-nums">
+          {bird.bgp_established} / {bird.bgp_sessions_total}
+          {ratio !== null ? <span className="text-muted-foreground"> ({ratio}%)</span> : null}
+        </span>
+      </div>
+      {ratio !== null ? (
+        <div className="h-2 overflow-hidden rounded-full bg-muted">
+          <div
+            className={`h-full rounded-full transition-all ${
+              ratio >= 100 ? 'bg-success' : ratio >= 50 ? 'bg-warning' : 'bg-destructive'
+            }`}
+            style={{ width: `${ratio}%` }}
+          />
+        </div>
+      ) : null}
+      {bird.error ? <p className="text-xs text-destructive">{bird.error}</p> : null}
+    </div>
+  )
+}
diff --git a/apps/web/src/routes/_auth/network.tsx b/apps/web/src/routes/_auth/network.tsx
new file mode 100644
index 0000000..7fac04c
--- /dev/null
+++ b/apps/web/src/routes/_auth/network.tsx
@@ -0,0 +1,273 @@
+import { createFileRoute, useSearch } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Info, RefreshCw } from 'lucide-react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+import { Badge } from '@/components/reui/badge'
+import { StatusBadge } from '@/components/status-badge'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import { networkBirdQueryOptions, networkPeersQueryOptions, networkSpeakersQueryOptions } from '@/queries/network'
+import { aggregateNetworkMetrics } from '@/queries/overview'
+
+export const Route = createFileRoute('/_auth/network')({
+  component: NetworkComponent,
+  validateSearch: (search: Record<string, unknown>) => ({
+    tab: (search.tab === 'peers' || search.tab === 'speakers' || search.tab === 'control-plane'
+      ? search.tab
+      : 'overview') as 'overview' | 'peers' | 'speakers' | 'control-plane',
+  }),
+})
+
+function NetworkComponent() {
+  const search = useSearch({ from: '/_auth/network' })
+  const peersQ = useQuery({ ...networkPeersQueryOptions(), refetchInterval: 30_000 })
+  const speakersQ = useQuery({ ...networkSpeakersQueryOptions(), refetchInterval: 30_000 })
+  const birdQ = useQuery({ ...networkBirdQueryOptions(), refetchInterval: 30_000 })
+
+  const refreshing = peersQ.isFetching || speakersQ.isFetching
+  const peers = peersQ.data?.items ?? []
+  const speakers = speakersQ.data?.items ?? []
+  const net = aggregateNetworkMetrics(peers, speakers)
+
+  function refetchAll() {
+    void peersQ.refetch()
+    void speakersQ.refetch()
+    void birdQ.refetch()
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Сеть"
+        description="BGP-пиры, спикеры и live-метрики нод"
+        actions={
+          <Button variant="outline" size="sm" onClick={refetchAll} disabled={refreshing}>
+            <RefreshCw className={refreshing ? 'animate-spin' : ''} />
+            Обновить
+          </Button>
+        }
+      />
+
+      <Alert className="border-info/30 bg-info/5">
+        <Info className="text-info" />
+        <AlertTitle>О сетевой конфигурации</AlertTitle>
+        <AlertDescription>
+          Вкладка «Обзор» — live-статус agent и BGP на CP и репликах. Apply и ревизии — на странице «Операции».
+        </AlertDescription>
+      </Alert>
+
+      <Tabs defaultValue={search.tab}>
+        <TabsList>
+          <TabsTrigger value="overview">Обзор</TabsTrigger>
+          <TabsTrigger value="peers">Пиры ({peers.length})</TabsTrigger>
+          <TabsTrigger value="speakers">Спикеры ({speakers.length})</TabsTrigger>
+          <TabsTrigger value="control-plane">Control plane</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="mt-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <Card>
+              <CardHeader className="border-b py-3">
+                <CardTitle className="text-base">Сводка сети</CardTitle>
+              </CardHeader>
+              <CardContent className="grid grid-cols-2 gap-3 p-4 text-sm">
+                <Field label="Пиры всего" value={String(net.peersTotal)} />
+                <Field label="Established" value={`${net.peersEstablished} / ${net.peersEnabled}`} />
+                <Field label="Спикеры всего" value={String(net.speakersTotal)} />
+                <Field label="Online" value={`${net.speakersOnline} / ${net.speakersTotal}`} />
+                {net.peersMismatch > 0 ? (
+                  <Field label="Mismatches" value={String(net.peersMismatch)} />
+                ) : null}
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="border-b py-3">
+                <CardTitle className="text-base">BIRD (control plane)</CardTitle>
+                <CardDescription>Статус birdc на хосте API</CardDescription>
+              </CardHeader>
+              <CardContent className="p-4">
+                <QueryState
+                  data={birdQ.data}
+                  isLoading={birdQ.isLoading}
+                  isError={birdQ.isError}
+                  error={birdQ.error}
+                  skeleton={<TableSkeleton rows={3} cols={2} />}
+                  onRetry={() => birdQ.refetch()}
+                >
+                  {(bird) => <BirdSummary bird={bird} />}
+                </QueryState>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="peers" className="mt-4">
+          <Card>
+            <CardHeader className="border-b py-3">
+              <CardTitle className="text-base">Пиры</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <QueryState
+                data={peers}
+                isLoading={peersQ.isLoading}
+                isError={peersQ.isError}
+                error={peersQ.error}
+                empty={peers.length === 0}
+                emptyTitle="Нет пиров"
+                skeleton={<TableSkeleton rows={6} cols={4} />}
+                onRetry={() => peersQ.refetch()}
+              >
+                {(items) => <PeersTable items={items} />}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="speakers" className="mt-4">
+          <Card>
+            <CardHeader className="border-b py-3">
+              <CardTitle className="text-base">Спикеры</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <QueryState
+                data={speakers}
+                isLoading={speakersQ.isLoading}
+                isError={speakersQ.isError}
+                error={speakersQ.error}
+                empty={speakers.length === 0}
+                emptyTitle="Нет спикеров"
+                skeleton={<TableSkeleton rows={6} cols={4} />}
+                onRetry={() => speakersQ.refetch()}
+              >
+                {(items) => <SpeakersTable items={items} />}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="control-plane" className="mt-4">
+          <Card>
+            <CardHeader className="border-b py-3">
+              <CardTitle className="text-base">Настройки Control Plane (BIRD)</CardTitle>
+              <CardDescription>Конфигурация tenant-level — в разделе «Настройки BIRD»</CardDescription>
+            </CardHeader>
+            <CardContent className="p-4 text-sm text-muted-foreground">
+              См. раздел «Настройки BIRD».
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+function Field({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="font-medium tabular-nums">{value}</span>
+    </div>
+  )
+}
+
+function BirdSummary({ bird }: { bird: import('@/types/api').BirdStatus }) {
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      <Field
+        label="Состояние"
+        value={bird.healthy === true ? 'В норме' : bird.healthy === false ? 'Проблема' : 'Н/Д'}
+      />
+      <Field label="Сессий BGP" value={`${bird.bgp_established} / ${bird.bgp_sessions_total}`} />
+      {bird.message ? <p className="text-xs text-muted-foreground">{bird.message}</p> : null}
+      {bird.error ? <p className="text-xs text-destructive">{bird.error}</p> : null}
+    </div>
+  )
+}
+
+function PeersTable({ items }: { items: import('@/types/api').PeerRow[] }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Имя</TableHead>
+          <TableHead>Neighbor</TableHead>
+          <TableHead>ASN</TableHead>
+          <TableHead>Состояние</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items.map((p) => (
+          <TableRow key={p.id}>
+            <TableCell className="font-medium">{p.name ?? p.neighbor}</TableCell>
+            <TableCell className="font-mono text-xs">{p.neighbor}</TableCell>
+            <TableCell className="font-mono text-xs">{p.remote_asn ?? '—'}</TableCell>
+            <TableCell>
+              <StatusBadge status={p.session_state} />
+              {p.session_mismatch ? (
+                <Badge variant="warning" className="ml-1">
+                  mismatch
+                </Badge>
+              ) : null}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+
+function SpeakersTable({ items }: { items: import('@/types/api').SpeakerRow[] }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Endpoint</TableHead>
+          <TableHead>Роль</TableHead>
+          <TableHead>Agent</TableHead>
+          <TableHead>BGP</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items.map((s) => (
+          <TableRow key={s.id}>
+            <TableCell className="font-mono text-xs">{s.endpoint}</TableCell>
+            <TableCell>
+              <Badge variant="outline">{s.role}</Badge>
+            </TableCell>
+            <TableCell>
+              {s.live?.agent_ok === true ? (
+                <StatusBadge status="ok" label="online" />
+              ) : s.live?.agent_ok === false ? (
+                <StatusBadge status="error" label="offline" />
+              ) : (
+                <Badge variant="outline">—</Badge>
+              )}
+            </TableCell>
+            <TableCell>
+              {s.live ? (
+                <span className="text-xs">
+                  {s.live.bgp_established ?? 0} / {s.live.bgp_sessions_total ?? 0}
+                </span>
+              ) : (
+                '—'
+              )}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/web/src/routes/_auth/operations.tsx b/apps/web/src/routes/_auth/operations.tsx
new file mode 100644
index 0000000..c49730b
--- /dev/null
+++ b/apps/web/src/routes/_auth/operations.tsx
@@ -0,0 +1,444 @@
+import { createFileRoute, useSearch } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { AlertTriangle, Clock, Activity, Info, RefreshCw } from 'lucide-react'
+import { toast } from 'sonner'
+import { useState } from 'react'
+
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@evobgp/ui/components/select'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { SectionCards, type SectionCardItem } from '@/components/section-cards'
+import { SectionCardsSkeleton } from '@/components/skeletons'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+
+import { operationsJobsQueryOptions, operationsRevisionsQueryOptions, operationsDiffQueryOptions } from '@/queries/operations'
+import { moduleNameById, overviewModulesQueryOptions } from '@/queries/overview'
+import { apiMutate, waitForJob } from '@/lib/api-client'
+import type { JobRow } from '@/types/api'
+
+export const Route = createFileRoute('/_auth/operations')({
+  component: OperationsComponent,
+  validateSearch: (search: Record<string, unknown>) => ({
+    tab: (search.tab === 'diff' || search.tab === 'jobs' ? search.tab : 'revisions') as
+      | 'revisions'
+      | 'diff'
+      | 'jobs',
+  }),
+})
+
+function OperationsComponent() {
+  const search = useSearch({ from: '/_auth/operations' })
+  const qc = useQueryClient()
+
+  const revisionsQ = useQuery(operationsRevisionsQueryOptions())
+  const jobsQ = useQuery(operationsJobsQueryOptions())
+  const modulesQ = useQuery(overviewModulesQueryOptions())
+
+  const revisions = revisionsQ.data?.items ?? []
+  const jobs = jobsQ.data?.items ?? []
+  const nameById = moduleNameById(modulesQ.data?.items ?? [])
+
+  const refreshing = revisionsQ.isFetching || jobsQ.isFetching
+  const running = jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+  const failed = jobs.filter(
+    (j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+  ).length
+
+  const items: SectionCardItem[] = [
+    {
+      label: 'Ревизий',
+      value: revisions.length,
+      icon: <Activity className="size-4" />,
+      hint: 'история конфигов',
+    },
+    {
+      label: 'Активных задач',
+      value: running,
+      icon: <Clock className="size-4" />,
+      hint: 'queued и running',
+    },
+    {
+      label: 'Задач с ошибкой',
+      value: failed,
+      icon: <AlertTriangle className="size-4" />,
+      hint: failed > 0 ? 'требуют внимания' : 'критичных сбоев нет',
+      variant: failed > 0 ? 'warning' : 'default',
+    },
+  ]
+
+  function refetchAll() {
+    void revisionsQ.refetch()
+    void jobsQ.refetch()
+    void modulesQ.refetch()
+  }
+
+  const applyMutation = useMutation({
+    mutationFn: async () => {
+      const revId = revisions[0]?.id
+      if (!revId) throw new Error('Нет ревизий')
+      const res = await apiMutate<{ job_id: string }>('/v1/apply', 'POST', { revision_id: revId })
+      if (!res.job_id) throw new Error('Ответ API без job_id')
+      const job = await waitForJob(res.job_id, { timeoutMs: 180_000 })
+      if (job.status !== 'succeeded') throw new Error(job.error ?? job.status)
+      return job
+    },
+    onSuccess: () => {
+      toast.success('Конфигурация успешно применена')
+      void qc.invalidateQueries({ queryKey: ['operations'] })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось применить'),
+  })
+
+  const birdReloadMutation = useMutation({
+    mutationFn: async () => {
+      const res = await apiMutate<{ job_id: string }>('/v1/bird/reload', 'POST', {})
+      if (!res.job_id) throw new Error('Ответ API без job_id')
+      const job = await waitForJob(res.job_id, { timeoutMs: 120_000 })
+      if (job.status !== 'succeeded') throw new Error(job.error ?? job.status)
+      return job
+    },
+    onSuccess: () => toast.success('Команда birdc configure выполнена'),
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось перезагрузить'),
+  })
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Ревизии и операции"
+        description="Деплой конфигурации, управление ревизиями и задачами"
+        actions={
+          <Button variant="outline" size="sm" onClick={refetchAll} disabled={refreshing}>
+            <RefreshCw className={refreshing ? 'animate-spin' : ''} />
+            Обновить
+          </Button>
+        }
+      />
+
+      <Alert className="border-info/30 bg-info/5">
+        <Info className="text-info" />
+        <AlertTitle>Три раздела на одной странице</AlertTitle>
+        <AlertDescription>
+          <strong>Ревизии</strong> — история конфигов и откат; <strong>Сравнение</strong> — diff
+          префиксов; <strong>Задачи</strong> — ingest, apply, rollback.
+        </AlertDescription>
+      </Alert>
+
+      <div className="flex flex-wrap gap-2">
+        <ConfirmDialog
+          trigger={
+            <Button variant="default" size="sm" disabled={applyMutation.isPending}>
+              Apply
+            </Button>
+          }
+          title="Применить конфигурацию на всех спикерах?"
+          description="Текущая конфигурация будет применена на всех BIRD-агентах. Требуется роль operator."
+          confirmLabel="Применить"
+          onConfirm={() => applyMutation.mutate()}
+        />
+        <ConfirmDialog
+          trigger={
+            <Button variant="outline" size="sm" disabled={birdReloadMutation.isPending}>
+              BIRD reload
+            </Button>
+          }
+          title="Перезагрузить BIRD?"
+          description="BIRD перезагрузит конфигурацию. Требуется роль operator."
+          confirmLabel="Перезагрузить"
+          onConfirm={() => birdReloadMutation.mutate()}
+        />
+      </div>
+
+      {revisionsQ.isLoading ? <SectionCardsSkeleton count={3} /> : <SectionCards items={items} />}
+
+      <Tabs defaultValue={search.tab}>
+        <TabsList>
+          <TabsTrigger value="revisions">Ревизии ({revisions.length})</TabsTrigger>
+          <TabsTrigger value="diff">Сравнение</TabsTrigger>
+          <TabsTrigger value="jobs">Задачи ({jobs.length})</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="revisions" className="mt-4">
+          <Card>
+            <CardHeader className="border-b py-3">
+              <CardTitle className="text-base">История ревизий</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <QueryState
+                data={revisions}
+                isLoading={revisionsQ.isLoading}
+                isError={revisionsQ.isError}
+                error={revisionsQ.error}
+                empty={revisions.length === 0}
+                emptyTitle="Нет ревизий"
+                onRetry={() => revisionsQ.refetch()}
+              >
+                {(items) => <RevisionsTable items={items} qc={qc} />}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="diff" className="mt-4">
+          <DiffTab revisions={revisions} />
+        </TabsContent>
+
+        <TabsContent value="jobs" className="mt-4">
+          <Card>
+            <CardHeader className="border-b py-3">
+              <CardTitle className="text-base">Задачи</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <QueryState
+                data={jobs}
+                isLoading={jobsQ.isLoading}
+                isError={jobsQ.isError}
+                error={jobsQ.error}
+                empty={jobs.length === 0}
+                emptyTitle="Нет задач"
+                onRetry={() => jobsQ.refetch()}
+              >
+                {(items) => <JobsTable items={items} nameById={nameById} qc={qc} />}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+function RevisionsTable({
+  items,
+  qc,
+}: {
+  items: import('@/types/api').RevisionRow[]
+  qc: import('@tanstack/react-query').QueryClient
+}) {
+  const rollbackMutation = useMutation({
+    mutationFn: (id: string) =>
+      apiMutate(`/v1/revisions/${id}/rollback`, 'POST', {}).then(() => id),
+    onSuccess: () => {
+      toast.success('Откат выполнен')
+      void qc.invalidateQueries({ queryKey: ['operations'] })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось откатить'),
+  })
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>ID</TableHead>
+          <TableHead>Создана</TableHead>
+          <TableHead>Префиксов</TableHead>
+          <TableHead className="w-24" />
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items.map((r) => (
+          <TableRow key={r.id}>
+            <TableCell className="font-mono text-xs">{r.id.slice(0, 12)}…</TableCell>
+            <TableCell className="text-xs text-muted-foreground">
+              {new Date(r.created_at).toLocaleString('ru-RU')}
+            </TableCell>
+            <TableCell className="font-mono text-sm tabular-nums">
+              {r.materialized_prefix_count}
+            </TableCell>
+            <TableCell>
+              <ConfirmDialog
+                trigger={
+                  <Button variant="ghost" size="icon-sm" className="text-destructive">
+                    <RefreshCw className="size-3.5" />
+                  </Button>
+                }
+                title={`Откатиться к ревизии ${r.id.slice(0, 8)}…?`}
+                description="Будет создана новая ревизия на основе выбранной. Требуется роль operator."
+                confirmLabel="Откатить"
+                destructive
+                onConfirm={() => rollbackMutation.mutate(r.id)}
+              />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+
+function JobsTable({
+  items,
+  nameById,
+  qc,
+}: {
+  items: JobRow[]
+  nameById: Map<string, string>
+  qc: import('@tanstack/react-query').QueryClient
+}) {
+  const cancelMutation = useMutation({
+    mutationFn: (jobId: string) => apiMutate(`/v1/jobs/${jobId}/cancel`, 'POST', {}),
+    onSuccess: () => {
+      toast.success('Задача отменена')
+      void qc.invalidateQueries({ queryKey: ['operations'] })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось отменить'),
+  })
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Вид</TableHead>
+          <TableHead>Статус</TableHead>
+          <TableHead>Создана</TableHead>
+          <TableHead>Завершена</TableHead>
+          <TableHead className="w-20" />
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items.map((j) => (
+          <TableRow key={j.job_id}>
+            <TableCell className="font-medium">
+              <div className="flex flex-col gap-0.5">
+                <span>{j.kind}</span>
+                {j.meta?.module_id ? (
+                  <span className="text-xs text-muted-foreground">
+                    {nameById.get(String(j.meta.module_id)) ?? String(j.meta.module_id)}
+                  </span>
+                ) : null}
+              </div>
+            </TableCell>
+            <TableCell>
+              <StatusBadgeColored status={j.status} />
+            </TableCell>
+            <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
+              {j.created_at ? new Date(j.created_at).toLocaleString('ru-RU') : '—'}
+            </TableCell>
+            <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
+              {j.finished_at ? new Date(j.finished_at).toLocaleString('ru-RU') : '—'}
+            </TableCell>
+            <TableCell>
+              {j.status === 'running' || j.status === 'queued' ? (
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  className="text-destructive"
+                  onClick={() => cancelMutation.mutate(j.job_id)}
+                >
+                  ✕
+                </Button>
+              ) : null}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+
+function StatusBadgeColored({ status }: { status: string }) {
+  const cls =
+    status === 'succeeded'
+      ? 'text-success'
+      : status === 'failed' || status === 'cancelled'
+        ? 'text-destructive'
+        : 'text-info'
+  return <span className={`text-sm font-medium ${cls}`}>{status}</span>
+}
+
+function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[] }) {
+  const [a, setA] = useState('')
+  const [b, setB] = useState('')
+  const diffQ = useQuery(operationsDiffQueryOptions(a, b))
+
+  return (
+    <Card>
+      <CardHeader className="border-b py-3">
+        <CardTitle className="text-base">Сравнение ревизий</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4 p-4">
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex w-full max-w-xs flex-col gap-1">
+            <span className="text-xs text-muted-foreground">Ревизия A</span>
+            <Select value={a} onValueChange={(v) => v && setA(v)}>
+              <SelectTrigger>{a ? a.slice(0, 12) + '…' : 'Выберите'}</SelectTrigger>
+              <SelectContent>
+                {revisions.map((r) => (
+                  <SelectItem key={r.id} value={r.id}>
+                    {r.id.slice(0, 12)}…
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-full max-w-xs flex-col gap-1">
+            <span className="text-xs text-muted-foreground">Ревизия B</span>
+            <Select value={b} onValueChange={(v) => v && setB(v)}>
+              <SelectTrigger>{b ? b.slice(0, 12) + '…' : 'Выберите'}</SelectTrigger>
+              <SelectContent>
+                {revisions.map((r) => (
+                  <SelectItem key={r.id} value={r.id}>
+                    {r.id.slice(0, 12)}…
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <Button onClick={() => diffQ.refetch()} disabled={!a || !b || diffQ.isFetching}>
+            Сравнить
+          </Button>
+        </div>
+
+        <QueryState
+          data={diffQ.data}
+          isLoading={diffQ.isFetching}
+          isError={diffQ.isError}
+          error={diffQ.error}
+          empty={!diffQ.data}
+          emptyTitle="Выберите две ревизии"
+          onRetry={() => diffQ.refetch()}
+        >
+          {(diff) => <DiffView diff={diff} />}
+        </QueryState>
+      </CardContent>
+    </Card>
+  )
+}
+
+function DiffView({ diff }: { diff: import('@/types/api').RevisionDiff }) {
+  const added = diff.prefixes?.added ?? (diff.added as string[]) ?? []
+  const removed = diff.prefixes?.removed ?? (diff.removed as string[]) ?? []
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <div>
+        <p className="mb-2 text-sm font-medium text-success">Добавлено: {added.length}</p>
+        <pre className="max-h-80 overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs">
+          {added.join('\n')}
+        </pre>
+      </div>
+      <div>
+        <p className="mb-2 text-sm font-medium text-destructive">Удалено: {removed.length}</p>
+        <pre className="max-h-80 overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs">
+          {removed.join('\n')}
+        </pre>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/routes/_auth/schedule.tsx b/apps/web/src/routes/_auth/schedule.tsx
new file mode 100644
index 0000000..78f357f
--- /dev/null
+++ b/apps/web/src/routes/_auth/schedule.tsx
@@ -0,0 +1,263 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { AlertTriangle, Clock, Info, ListTodo, RefreshCw } from 'lucide-react'
+import { toast } from 'sonner'
+import { useState } from 'react'
+
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Badge } from '@evobgp/ui/components/badge'
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { SectionCards, type SectionCardItem } from '@/components/section-cards'
+import { SectionCardsSkeleton } from '@/components/skeletons'
+import { LoadingButton } from '@/components/loading-button'
+
+import { operationsJobsQueryOptions } from '@/queries/operations'
+import { modulesListQueryOptions } from '@/queries/modules'
+import { apiMutate } from '@/lib/api-client'
+import type { JobRow } from '@/types/api'
+
+export const Route = createFileRoute('/_auth/schedule')({
+  component: ScheduleComponent,
+})
+
+function ScheduleComponent() {
+  const modulesQ = useQuery(modulesListQueryOptions())
+  const jobsQ = useQuery(operationsJobsQueryOptions())
+  const qc = useQueryClient()
+  const [refreshing, setRefreshing] = useState<Record<string, boolean>>({})
+
+  const modules = modulesQ.data?.items ?? []
+  const jobs = jobsQ.data?.items ?? []
+  const loading = modulesQ.isLoading || jobsQ.isLoading
+  const running = jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+  const failed = jobs.filter((j) =>
+    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+  ).length
+
+  const items: SectionCardItem[] = [
+    { label: 'Всего задач', value: jobs.length, icon: <ListTodo className="size-4" />, hint: 'в выборке' },
+    { label: 'В работе', value: running, icon: <Clock className="size-4" />, hint: 'queued и running' },
+    {
+      label: 'С ошибкой',
+      value: failed,
+      icon: <AlertTriangle className="size-4" />,
+      hint: failed > 0 ? 'требуют внимания' : 'без ошибок',
+      variant: failed > 0 ? 'warning' : 'default',
+    },
+  ]
+
+  const refreshMutation = useMutation({
+    mutationFn: async (id: string) => apiMutate<{ job_id?: string }>(`/v1/modules/${id}/refresh`, 'POST'),
+    onMutate: (id) => setRefreshing((s) => ({ ...s, [id]: true })),
+    onSuccess: (data, id) => {
+      if (data === undefined) toast.message('Обновление не требуется (тип IP_RANGES)')
+      else toast.success('Задача поставлена в очередь')
+      void qc.invalidateQueries({ queryKey: ['operations'] })
+      void qc.invalidateQueries({ queryKey: ['modules'] })
+      setRefreshing((s) => ({ ...s, [id]: false }))
+    },
+    onError: (e, id) => {
+      toast.error(e instanceof Error ? e.message : 'Не удалось запустить')
+      setRefreshing((s) => ({ ...s, [id]: false }))
+    },
+  })
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Расписание и задачи"
+        description="Интервалы обновления модулей и ручной запуск"
+        actions={
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              void modulesQ.refetch()
+              void jobsQ.refetch()
+            }}
+            disabled={loading}
+          >
+            <RefreshCw className={loading ? 'animate-spin' : ''} />
+            Обновить
+          </Button>
+        }
+      />
+
+      <Alert className="border-info/30 bg-info/5">
+        <Info className="text-info" />
+        <AlertTitle>Как работает расписание</AlertTitle>
+        <AlertDescription>
+          Планировщик использует <code className="text-xs">refresh_interval_sec</code> и опционально{' '}
+          <code className="text-xs">cron_expr</code>. Ручной запуск —{' '}
+          <code className="text-xs">POST /v1/modules/&#123;id&#125;/refresh</code>.
+        </AlertDescription>
+      </Alert>
+
+      {loading ? <SectionCardsSkeleton count={3} /> : <SectionCards items={items} />}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Модули</CardTitle>
+          <CardDescription>Расписание обновления и ручной запуск ingest</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <QueryState
+            data={modules}
+            isLoading={modulesQ.isLoading}
+            isError={modulesQ.isError}
+            error={modulesQ.error}
+            empty={modules.length === 0}
+            emptyTitle="Нет модулей"
+            onRetry={() => modulesQ.refetch()}
+          >
+            {(items) => (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Модуль</TableHead>
+                    <TableHead>Тип</TableHead>
+                    <TableHead>Расписание</TableHead>
+                    <TableHead>Обновлено</TableHead>
+                    <TableHead>Статус</TableHead>
+                    <TableHead className="w-32 text-right" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {items.map((m) => (
+                    <TableRow key={m.id}>
+                      <TableCell className="font-medium">{m.name}</TableCell>
+                      <TableCell>
+                        <Badge variant="outline">{m.type}</Badge>
+                      </TableCell>
+                      <TableCell className="font-mono text-xs text-muted-foreground">
+                        {m.cron_expr ?? (m.refresh_interval_sec ? `${m.refresh_interval_sec}s` : '—')}
+                      </TableCell>
+                      <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
+                        {m.last_refreshed_at ? new Date(m.last_refreshed_at).toLocaleString('ru-RU') : '—'}
+                      </TableCell>
+                      <TableCell>
+                        {m.enabled ? (
+                          <Badge variant="default">Вкл</Badge>
+                        ) : (
+                          <Badge variant="secondary">Выкл</Badge>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <LoadingButton
+                          size="sm"
+                          variant="secondary"
+                          loading={!!refreshing[m.id]}
+                          onClick={() => refreshMutation.mutate(m.id)}
+                        >
+                          <RefreshCw />
+                          Обновить
+                        </LoadingButton>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </QueryState>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Задачи</CardTitle>
+          <CardDescription>Последние задачи из API</CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <JobsTabs jobs={jobs} loading={jobsQ.isLoading} />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function JobsTabs({ jobs, loading }: { jobs: JobRow[]; loading: boolean }) {
+  const refresh = jobs.filter((j) => j.kind === 'module_refresh')
+  const failed = jobs.filter((j) =>
+    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+  )
+
+  return (
+    <Tabs defaultValue="all">
+      <TabsList>
+        <TabsTrigger value="all">Все ({jobs.length})</TabsTrigger>
+        <TabsTrigger value="refresh">Обновление ({refresh.length})</TabsTrigger>
+        <TabsTrigger value="failed">С ошибкой ({failed.length})</TabsTrigger>
+      </TabsList>
+      <TabsContent value="all" className="mt-0">
+        <JobsTable items={jobs} loading={loading} />
+      </TabsContent>
+      <TabsContent value="refresh" className="mt-0">
+        <JobsTable items={refresh} loading={loading} />
+      </TabsContent>
+      <TabsContent value="failed" className="mt-0">
+        <JobsTable items={failed} loading={loading} />
+      </TabsContent>
+    </Tabs>
+  )
+}
+
+function JobsTable({ items, loading }: { items: JobRow[]; loading: boolean }) {
+  if (loading) return <div className="p-6 text-center text-sm text-muted-foreground">Загрузка…</div>
+  if (items.length === 0)
+    return <div className="p-6 text-center text-sm text-muted-foreground">Нет задач</div>
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Вид</TableHead>
+          <TableHead>Статус</TableHead>
+          <TableHead>Создана</TableHead>
+          <TableHead>Завершена</TableHead>
+          <TableHead>Ошибка</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {items.map((j) => (
+          <TableRow key={j.job_id}>
+            <TableCell className="font-medium">{j.kind}</TableCell>
+            <TableCell>
+              <Badge
+                variant={
+                  j.status === 'succeeded'
+                    ? 'default'
+                    : j.status === 'failed'
+                      ? 'destructive'
+                      : 'secondary'
+                }
+              >
+                {j.status}
+              </Badge>
+            </TableCell>
+            <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
+              {j.created_at ? new Date(j.created_at).toLocaleString('ru-RU') : '—'}
+            </TableCell>
+            <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
+              {j.finished_at ? new Date(j.finished_at).toLocaleString('ru-RU') : '—'}
+            </TableCell>
+            <TableCell className="max-w-xs truncate text-xs text-destructive">
+              {j.error ?? ''}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/web/src/routes/_auth/settings.tsx b/apps/web/src/routes/_auth/settings.tsx
new file mode 100644
index 0000000..85096ee
--- /dev/null
+++ b/apps/web/src/routes/_auth/settings.tsx
@@ -0,0 +1,99 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@evobgp/ui/components/select'
+
+import { PageHeader } from '@/components/page-header'
+import { LoadingButton } from '@/components/loading-button'
+import { setToken, TOKEN_STORAGE_KEY } from '@/lib/api-client'
+import { authSessionQueryOptions } from '@/queries/auth'
+import { toast } from 'sonner'
+import { Save } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export const Route = createFileRoute('/_auth/settings')({
+  component: SettingsComponent,
+})
+
+function SettingsComponent() {
+  const { data: session } = useQuery(authSessionQueryOptions())
+  const { theme, setTheme } = useTheme()
+  const [token, setTokenValue] = useState('')
+
+  useEffect(() => {
+    const t = window.localStorage.getItem(TOKEN_STORAGE_KEY) ?? ''
+    setTokenValue(t)
+  }, [])
+
+  function saveTokenHandler() {
+    const t = token.trim()
+    setToken(t || null)
+    toast.success('Токен сохранён')
+  }
+
+  return (
+    <div className="mx-auto flex max-w-3xl flex-col gap-6">
+      <PageHeader
+        title="Настройки"
+        description="Параметры интерфейса и подключения браузера к API."
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Подключение к API</CardTitle>
+          <CardDescription>
+            Bearer-токен хранится только в этом браузере (localStorage). Управление ключами tenant — в
+            разделе «Права доступа».
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="token">Токен для запросов</Label>
+            <Input
+              id="token"
+              type="password"
+              autoComplete="off"
+              value={token}
+              onChange={(e) => setTokenValue(e.target.value)}
+              placeholder="Bearer …"
+            />
+          </div>
+          <LoadingButton onClick={saveTokenHandler}>
+            <Save />
+            Сохранить токен
+          </LoadingButton>
+          {session ? (
+            <p className="text-xs text-muted-foreground">
+              Активная сессия: tenant <code className="font-mono">{session.tenant_id}</code>, роль{' '}
+              <code className="font-mono">{session.role}</code>.
+            </p>
+          ) : null}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Оформление</CardTitle>
+          <CardDescription>
+            Тема интерфейса. Быстрый переключатель также доступен в боковой панели.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-2">
+          <Label htmlFor="theme-select">Тема</Label>
+          <Select value={theme ?? 'system'} onValueChange={(v) => v && setTheme(v)}>
+            <SelectTrigger id="theme-select" className="w-full max-w-xs" />
+            <SelectContent>
+              <SelectItem value="light">Светлая</SelectItem>
+              <SelectItem value="dark">Тёмная</SelectItem>
+              <SelectItem value="system">Как в системе</SelectItem>
+            </SelectContent>
+          </Select>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/web/src/routes/_auth/tenant-settings.tsx b/apps/web/src/routes/_auth/tenant-settings.tsx
new file mode 100644
index 0000000..312f6a1
--- /dev/null
+++ b/apps/web/src/routes/_auth/tenant-settings.tsx
@@ -0,0 +1,379 @@
+import { createFileRoute, useSearch } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Info, Save } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Input } from '@evobgp/ui/components/input'
+import { Label } from '@evobgp/ui/components/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@evobgp/ui/components/select'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { LoadingButton } from '@/components/loading-button'
+
+import {
+  BIRD_SETTING_KEYS,
+  REVISION_SETTING_KEYS,
+  RUNTIME_LOGS_SETTING_KEYS,
+  buildPayload,
+  partitionSettings,
+  settingsQueryOptions,
+  type BirdSettingKey,
+} from '@/queries/settings'
+import { apiMutate } from '@/lib/api-client'
+
+export const Route = createFileRoute('/_auth/tenant-settings')({
+  component: TenantSettingsComponent,
+  validateSearch: (search: Record<string, unknown>) => ({
+    tab: (search.tab === 'revision' || search.tab === 'runtime-logs' || search.tab === 'additional'
+      ? search.tab
+      : 'bird') as 'bird' | 'revision' | 'runtime-logs' | 'additional',
+  }),
+})
+
+const BIRD_LABELS: Record<BirdSettingKey, string> = {
+  bird_router_id: 'Router ID',
+  bird_local_ipv4: 'Локальный IPv4',
+  bird_local_ipv6: 'Локальный IPv6',
+  bird_local_asn: 'Локальный ASN',
+  bird_bgp_source_ipv4: 'BGP source IPv4',
+  bird_bgp_source_ipv6: 'BGP source IPv6',
+}
+
+function TenantSettingsComponent() {
+  const search = useSearch({ from: '/_auth/tenant-settings' })
+  const settingsQ = useQuery(settingsQueryOptions())
+  const qc = useQueryClient()
+
+  const partitioned = settingsQ.data ? partitionSettings(settingsQ.data) : null
+
+  const [birdForm, setBirdForm] = useState<Record<string, string>>({})
+  const [revisionForm, setRevisionForm] = useState<Record<string, string>>({})
+  const [runtimeLogsForm, setRuntimeLogsForm] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    if (partitioned) {
+      setBirdForm({ ...partitioned.bird })
+      setRevisionForm({ ...partitioned.revision })
+      setRuntimeLogsForm({ ...partitioned.runtimeLogs })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settingsQ.data])
+
+  const patchMutation = useMutation({
+    mutationFn: (payload: Record<string, string | number | boolean>) =>
+      apiMutate('/v1/settings', 'PATCH', payload),
+    onSuccess: () => {
+      toast.success('Параметры сохранены')
+      void qc.invalidateQueries({ queryKey: ['settings'] })
+    },
+    onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось сохранить'),
+  })
+
+  function saveBird() {
+    patchMutation.mutate(buildPayload(BIRD_SETTING_KEYS, birdForm))
+  }
+  function saveRevision() {
+    patchMutation.mutate(buildPayload(REVISION_SETTING_KEYS, revisionForm))
+  }
+  function saveRuntimeLogs() {
+    patchMutation.mutate(buildPayload(RUNTIME_LOGS_SETTING_KEYS, runtimeLogsForm))
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Параметры tenant"
+        description="Параметры control plane для текущего tenant (API /v1/settings)"
+      />
+
+      <Alert className="border-info/30 bg-info/5">
+        <Info className="text-info" />
+        <AlertTitle>Operator-only</AlertTitle>
+        <AlertDescription>
+          Изменение значений через <code className="text-xs">PATCH /v1/settings</code> требует роли
+          operator. При отсутствии прав API вернёт 403.
+        </AlertDescription>
+      </Alert>
+
+      <Tabs defaultValue={search.tab}>
+        <TabsList>
+          <TabsTrigger value="bird">BIRD</TabsTrigger>
+          <TabsTrigger value="revision">Ревизии</TabsTrigger>
+          <TabsTrigger value="runtime-logs">Файловые логи</TabsTrigger>
+          <TabsTrigger value="additional">Дополнительно</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="bird" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>BIRD control plane</CardTitle>
+              <CardDescription>
+                Глобальные параметры BIRD для pipeline refresh/apply. Сохранение через{' '}
+                <code className="text-xs">PATCH /v1/settings</code> (роль operator).
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Alert className="border-info/30 bg-info/5">
+                <Info className="text-info" />
+                <AlertTitle>Подстановка в конфиг</AlertTitle>
+                <AlertDescription>
+                  Значения используются при генерации BIRD-конфигурации (router id, local AS, адреса).
+                  Пиры и спикеры настраиваются в разделе «Сеть».
+                </AlertDescription>
+              </Alert>
+              <QueryState
+                data={partitioned}
+                isLoading={settingsQ.isLoading}
+                isError={settingsQ.isError}
+                error={settingsQ.error}
+                skeleton={<div className="h-64" />}
+                onRetry={() => settingsQ.refetch()}
+              >
+                {() => (
+                  <div className="grid gap-4 md:grid-cols-2">
+                    {BIRD_SETTING_KEYS.map((key) => (
+                      <div key={key} className="flex flex-col gap-1.5">
+                        <Label htmlFor={key}>{BIRD_LABELS[key]}</Label>
+                        <Input
+                          id={key}
+                          value={birdForm[key] ?? ''}
+                          onChange={(e) => setBirdForm((s) => ({ ...s, [key]: e.target.value }))}
+                          placeholder={BIRD_LABELS[key]}
+                        />
+                        <p className="font-mono text-xs text-muted-foreground">{key}</p>
+                      </div>
+                    ))}
+                    <div className="md:col-span-2">
+                      <LoadingButton onClick={saveBird} loading={patchMutation.isPending}>
+                        <Save />
+                        Сохранить
+                      </LoadingButton>
+                    </div>
+                  </div>
+                )}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="revision" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Ревизии</CardTitle>
+              <CardDescription>Время хранения ревизий в БД</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <QueryState
+                data={partitioned}
+                isLoading={settingsQ.isLoading}
+                isError={settingsQ.isError}
+                error={settingsQ.error}
+                skeleton={<div className="h-32" />}
+                onRetry={() => settingsQ.refetch()}
+              >
+                {() => (
+                  <div className="flex max-w-sm flex-col gap-1.5">
+                    <Label htmlFor="revision_retention_minutes">Retention (минуты)</Label>
+                    <Input
+                      id="revision_retention_minutes"
+                      type="number"
+                      value={revisionForm.revision_retention_minutes ?? ''}
+                      onChange={(e) =>
+                        setRevisionForm((s) => ({
+                          ...s,
+                          revision_retention_minutes: e.target.value,
+                        }))
+                      }
+                    />
+                    <p className="font-mono text-xs text-muted-foreground">
+                      revision_retention_minutes
+                    </p>
+                    <LoadingButton
+                      className="mt-2 w-fit"
+                      onClick={saveRevision}
+                      loading={patchMutation.isPending}
+                    >
+                      <Save />
+                      Сохранить
+                    </LoadingButton>
+                  </div>
+                )}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="runtime-logs" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Файловые логи</CardTitle>
+              <CardDescription>Автоматическая очистка логов</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <QueryState
+                data={partitioned}
+                isLoading={settingsQ.isLoading}
+                isError={settingsQ.isError}
+                error={settingsQ.error}
+                skeleton={<div className="h-48" />}
+                onRetry={() => settingsQ.refetch()}
+              >
+                {() => (
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <div className="flex flex-col gap-1.5">
+                      <Label>Авто-очистка включена</Label>
+                      <Select
+                        value={runtimeLogsForm.runtime_logs_auto_enabled ?? 'false'}
+                        onValueChange={(v) =>
+                          v &&
+                          setRuntimeLogsForm((s) => ({
+                            ...s,
+                            runtime_logs_auto_enabled: v,
+                          }))
+                        }
+                      >
+                        <SelectTrigger>
+                          {runtimeLogsForm.runtime_logs_auto_enabled === 'true' ? 'Вкл' : 'Выкл'}
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="true">Вкл</SelectItem>
+                          <SelectItem value="false">Выкл</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <p className="font-mono text-xs text-muted-foreground">
+                        runtime_logs_auto_enabled
+                      </p>
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                      <Label htmlFor="runtime_logs_max_file_mb">Макс. размер файла (MB)</Label>
+                      <Input
+                        id="runtime_logs_max_file_mb"
+                        type="number"
+                        value={runtimeLogsForm.runtime_logs_max_file_mb ?? ''}
+                        onChange={(e) =>
+                          setRuntimeLogsForm((s) => ({
+                            ...s,
+                            runtime_logs_max_file_mb: e.target.value,
+                          }))
+                        }
+                      />
+                      <p className="font-mono text-xs text-muted-foreground">
+                        runtime_logs_max_file_mb
+                      </p>
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                      <Label htmlFor="runtime_logs_auto_schedule">Расписание (cron)</Label>
+                      <Input
+                        id="runtime_logs_auto_schedule"
+                        value={runtimeLogsForm.runtime_logs_auto_schedule ?? ''}
+                        onChange={(e) =>
+                          setRuntimeLogsForm((s) => ({
+                            ...s,
+                            runtime_logs_auto_schedule: e.target.value,
+                          }))
+                        }
+                      />
+                      <p className="font-mono text-xs text-muted-foreground">
+                        runtime_logs_auto_schedule
+                      </p>
+                    </div>
+                    <div className="flex flex-col gap-1.5">
+                      <Label>Режим очистки</Label>
+                      <Select
+                        value={runtimeLogsForm.runtime_logs_auto_mode ?? ''}
+                        onValueChange={(v) =>
+                          v &&
+                          setRuntimeLogsForm((s) => ({
+                            ...s,
+                            runtime_logs_auto_mode: v,
+                          }))
+                        }
+                      >
+                        <SelectTrigger>
+                          {runtimeLogsForm.runtime_logs_auto_mode || 'Выберите'}
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="delete">Delete</SelectItem>
+                          <SelectItem value="truncate">Truncate</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <p className="font-mono text-xs text-muted-foreground">
+                        runtime_logs_auto_mode
+                      </p>
+                    </div>
+                    <div className="md:col-span-2">
+                      <LoadingButton onClick={saveRuntimeLogs} loading={patchMutation.isPending}>
+                        <Save />
+                        Сохранить
+                      </LoadingButton>
+                    </div>
+                  </div>
+                )}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="additional" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Дополнительные параметры</CardTitle>
+              <CardDescription>
+                Параметры вне стандартных групп (readonly — изменяются только через API)
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-0">
+              <QueryState
+                data={partitioned?.additional ?? []}
+                isLoading={settingsQ.isLoading}
+                isError={settingsQ.isError}
+                error={settingsQ.error}
+                empty={(partitioned?.additional ?? []).length === 0}
+                emptyTitle="Нет дополнительных параметров"
+                skeleton={<div className="h-32" />}
+                onRetry={() => settingsQ.refetch()}
+              >
+                {(items) => (
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Ключ</TableHead>
+                        <TableHead>Значение</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {items.map((row) => (
+                        <TableRow key={row.id}>
+                          <TableCell className="font-mono text-xs">{row.key}</TableCell>
+                          <TableCell className="font-mono text-xs">{row.value}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                )}
+              </QueryState>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
new file mode 100644
index 0000000..8c2ddcb
--- /dev/null
+++ b/apps/web/src/routes/index.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  beforeLoad: () => {
+    throw redirect({ to: '/dashboard' })
+  },
+})
diff --git a/apps/web/src/types/api.ts b/apps/web/src/types/api.ts
new file mode 100644
index 0000000..28a1d9a
--- /dev/null
+++ b/apps/web/src/types/api.ts
@@ -0,0 +1,345 @@
+// ---- Pagination ----
+export type Page<T> = {
+  items: T[]
+  next_cursor: string | null
+  has_more: boolean
+}
+
+// ---- Modules ----
+export type ModuleType = 'AS_PREFIXES' | 'CDN_CIDRS' | 'DOMAINS' | 'IP_RANGES'
+
+export type DohResolverPolicy = 'primary_only' | 'failover' | 'union'
+
+export type ModuleRow = {
+  id: string
+  type: ModuleType
+  name: string
+  enabled: boolean
+  priority: number
+  refresh_interval_sec: number | null
+  cron_expr: string | null
+  default_community_id: string | null
+  /** @deprecated use doh_profile_ids */
+  doh_profile_id: string | null
+  doh_profile_ids: string[]
+  doh_resolver_policy: DohResolverPolicy
+  last_refreshed_at: string | null
+}
+export type ModulesResponse = Page<ModuleRow>
+
+export type RouterListsCatalogResponse = {
+  modules: { items: ModuleRow[] }
+  domains: { items: { module_id: string; entry: DomainEntry }[] }
+  asns: { items: { module_id: string; entry: AsEntry }[] }
+  ip_ranges: { items: { module_id: string; entry: IpRangeEntry }[] }
+  communities: { items: BgpCommunity[] }
+}
+
+export type ModuleCreate = {
+  type: ModuleType
+  name: string
+  enabled?: boolean
+  priority?: number
+  doh_profile_id?: string | null
+  doh_profile_ids?: string[]
+  doh_resolver_policy?: DohResolverPolicy
+  refresh_interval_sec?: number | null
+  cron_expr?: string | null
+  default_community_id?: string | null
+}
+export type ModulePatch = Partial<Omit<ModuleCreate, 'type'>>
+
+// ---- AS Entries ----
+export type AsEntry = {
+  id: string
+  asn: number
+  community_id: string | null
+  /** Имя/держатель AS (RIPEstat), после успешного обновления модуля */
+  asn_name?: string | null
+  /** Число объявленных префиксов на момент последнего резолва */
+  prefix_count?: number | null
+  /** ISO-время последнего успешного резолва ASN */
+  asn_resolved_at?: string | null
+}
+export type AsEntryCreate = {
+  asn: number
+  community_id?: string | null
+}
+export type AsEntryPatch = {
+  asn?: number
+  community_id?: string | null
+}
+export type AsEntriesResponse = Page<AsEntry>
+
+// ---- CDN Sources ----
+export type CdnSource = {
+  id: string
+  url: string
+  source_kind: string
+  prefix_path: string
+  community_id: string | null
+  refresh_interval_sec: number | null
+  last_refreshed_at: string | null
+}
+export type CdnSourceCreate = {
+  url: string
+  source_kind: string
+  prefix_path?: string
+  community_id?: string | null
+}
+export type CdnSourcePatch = Partial<CdnSourceCreate> & { refresh_interval_sec?: number | null }
+export type CdnSourcesResponse = Page<CdnSource>
+
+export type CdnPreviewResponse = {
+  items: string[]
+  total: number
+  truncated: boolean
+  source_url: string
+}
+
+// ---- Domain Entries ----
+export type DomainEntry = {
+  id: string
+  fqdn: string
+  community_id: string | null
+}
+export type DomainEntryCreate = {
+  fqdn: string
+  community_id?: string | null
+}
+export type DomainEntriesResponse = Page<DomainEntry>
+
+// ---- IP Range Entries ----
+export type IpRangeEntry = {
+  id: string
+  prefix: string
+  community_id: string
+}
+export type IpRangeEntryCreate = {
+  prefix: string
+  community_id: string
+}
+export type IpRangeEntriesResponse = Page<IpRangeEntry>
+
+// ---- DoH Profiles ----
+export type DohProfile = {
+  id: string
+  name?: string
+  url: string
+  timeout_ms: number | null
+  vault_secret_ref: string | null
+}
+export type DohProfileCreate = {
+  name?: string
+  url: string
+  timeout_ms?: number | null
+  vault_secret_ref?: string | null
+}
+export type DohProfilePatch = Partial<DohProfileCreate>
+export type DohProfilesResponse = Page<DohProfile>
+
+// ---- Communities ----
+export type BgpCommunity = {
+  id: string
+  community: string
+  title: string
+}
+export type BgpCommunityCreate = {
+  community: string
+  title?: string
+}
+export type BgpCommunityPatch = Partial<BgpCommunityCreate>
+export type CommunitiesResponse = Page<BgpCommunity>
+
+// ---- Peers ----
+export type PeerSessionOnSpeaker = {
+  speaker_id: string
+  label: string
+  state: string
+  poll_error?: string
+}
+
+export type PeerRow = {
+  id: string
+  name?: string
+  neighbor: string
+  remote_asn?: number
+  enabled?: boolean
+  session_state: string
+  bgp_speaker_id: string | null
+  connected_speaker_id?: string | null
+  connected_speaker_label?: string
+  session_on_speakers?: PeerSessionOnSpeaker[]
+  established_on_speakers?: PeerSessionOnSpeaker[]
+  session_mismatch?: boolean
+}
+export type LiveSpeakerPoll = {
+  speaker_id: string
+  label: string
+  ok: boolean
+  session_count: number
+  poll_error?: string
+}
+export type PeersResponse = Page<PeerRow> & { live_speaker_poll?: LiveSpeakerPoll[] }
+export type BgpPeerCreate = {
+  name?: string
+  neighbor: string
+  remote_asn: number
+  bgp_speaker_id?: string | null
+  enabled?: boolean
+}
+export type BgpPeerPatch = Partial<BgpPeerCreate>
+
+// ---- Speakers ----
+export type BgpSessionLive = {
+  name: string
+  neighbor?: string
+  state: string
+}
+
+export type SpeakerLiveStatus = {
+  label?: string
+  agent_ok?: boolean
+  agent_error?: string
+  agent_last_sync_at?: string
+  agent_last_applied_revision_id?: string
+  bgp_poll_ok?: boolean
+  bgp_poll_error?: string
+  bgp_sessions_total?: number
+  bgp_established?: number
+  sessions?: BgpSessionLive[]
+}
+
+export type SpeakerRow = {
+  id: string
+  role: string
+  endpoint: string
+  last_applied_revision_id: string | null
+  published_revision_id?: string | null
+  published_at?: string | null
+  agent_domain?: string
+  node_ipv4?: string
+  bird_bgp_source_ipv4?: string
+  dispatch_status?: string
+  sync_status?: string
+  last_dispatch_at?: string | null
+  last_dispatch_error?: string | null
+  meta_json?: Record<string, unknown>
+  agent_secret?: string
+  live?: SpeakerLiveStatus
+}
+export type SpeakersResponse = Page<SpeakerRow>
+export type BgpSpeakerCreate = {
+  endpoint: string
+  role?: string
+  meta_json?: string
+}
+export type BgpSpeakerPatch = Partial<BgpSpeakerCreate>
+
+export type BundleSigningPublicKey = {
+  public_key_base64: string
+}
+
+// ---- Revisions ----
+export type RevisionRow = {
+  id: string
+  content_hash: string
+  created_at: string
+  parent_revision_id: string | null
+  materialized_prefix_count: number
+  module_id: string | null
+}
+export type RevisionsResponse = Page<RevisionRow>
+
+export type RevisionPrefix = {
+  /** Обычно CIDR; для AS-модуля в снимке ревизии — строка вида `as:<номер_asn>`. */
+  prefix: string
+  /** Источник материализации (например, domain:<fqdn>, as:<asn>, cdn:<source_id>, ip_range). */
+  source?: string
+  community_id?: string | null
+}
+export type RevisionPrefixesResponse = Page<RevisionPrefix>
+
+export type RevisionPreview = {
+  id: string
+  prefixes?: RevisionPrefix[]
+  [key: string]: unknown
+}
+
+/** Ответ GET /v1/revisions/{a}/diff/{b}: префиксы в `prefixes` (источник правды в бэкенде). */
+export type RevisionDiff = {
+  revision_a?: string
+  revision_b?: string
+  prefixes?: {
+    added: string[]
+    removed: string[]
+    unchanged_count?: number
+  }
+  /** Устаревший/нормализованный вид — см. нормализацию в UI */
+  added?: (string | RevisionPrefix)[]
+  removed?: (string | RevisionPrefix)[]
+  [key: string]: unknown
+}
+
+// ---- BIRD (локальный birdc на хосте с API, если задан EVOBGP_BIRDC_SOCKET) ----
+export type BirdStatus = {
+  birdc_configured: boolean
+  message?: string
+  error?: string
+  protocols_excerpt?: string
+  bgp_sessions_total: number
+  bgp_established: number
+  healthy: boolean | null
+}
+
+// ---- Jobs ----
+export type JobRow = {
+  job_id: string
+  kind: string
+  status: string
+  idempotency_key?: string | null
+  created_at?: string
+  started_at?: string | null
+  finished_at?: string | null
+  error?: string | null
+  meta?: Record<string, unknown>
+}
+export type JobsResponse = Page<JobRow>
+
+// ---- Settings ----
+export type AppSettings = Record<string, unknown>
+
+// ---- Auth / API keys ----
+export type AuthSession = {
+  tenant_id: string
+  role: 'viewer' | 'editor' | 'operator' | 'node'
+}
+
+export type ApiKeyRole = AuthSession['role']
+
+export type ApiKey = {
+  id: string
+  name: string
+  role: ApiKeyRole
+  prefix: string
+  created_at: string
+  updated_at: string
+  expires_at: string | null
+  revoked_at: string | null
+  last_used_at: string | null
+}
+
+export type ApiKeysResponse = Page<ApiKey>
+
+export type ApiKeyCreate = {
+  name: string
+  role: ApiKeyRole
+  expires_at?: string | null
+}
+
+export type ApiKeyCreated = ApiKey & { token: string }
+
+// ---- AsyncJobAccepted (RFC 9457 companion: 202 with job_id) ----
+export type AsyncJobAccepted = {
+  job_id: string
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
new file mode 100644
index 0000000..08bfd3e
--- /dev/null
+++ b/apps/web/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/hooks/use-mobile": ["../../packages/ui/src/hooks/use-mobile.ts"],
+      "@evobgp/ui/components/*": ["../../packages/ui/src/components/*"],
+      "@evobgp/ui/hooks/*": ["../../packages/ui/src/hooks/*"],
+      "@evobgp/ui/lib/utils": ["../../packages/ui/src/lib/utils.ts"],
+      "@evobgp/ui/globals.css": ["../../packages/ui/src/styles/globals.css"]
+    },
+    "types": ["vite/client"],
+    "verbatimModuleSyntax": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/apps/web/tsconfig.tsbuildinfo b/apps/web/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..ba840f3
--- /dev/null
+++ b/apps/web/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/components/confirm-dialog.tsx","./src/components/empty-state.tsx","./src/components/loading-button.tsx","./src/components/mode-toggle.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/query-state.tsx","./src/components/section-cards.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/layout/app-shell.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/components/reui/number-field.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/lib/api-client.ts","./src/lib/queryclient.ts","./src/lib/router.ts","./src/queries/api-keys.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/index.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/settings.tsx","./src/routes/_auth/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
new file mode 100644
index 0000000..da9084c
--- /dev/null
+++ b/apps/web/vite.config.ts
@@ -0,0 +1,39 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { TanStackRouterVite as TanStackRouterPlugin } from '@tanstack/router-plugin/vite'
+import path from 'node:path'
+
+export default defineConfig({
+  plugins: [
+    TanStackRouterPlugin({ target: 'react', autoCodeSplitting: true }),
+    react(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: [
+      // shadcn components inside packages/ui import '@/hooks/use-mobile' (their own alias).
+      // Vite doesn't read tsconfig paths from packages/ui; expose a fallback so those imports
+      // resolve to packages/ui/src/hooks instead of apps/web/src/hooks.
+      {
+        find: '@/hooks/use-mobile',
+        replacement: path.resolve(__dirname, '../../packages/ui/src/hooks/use-mobile.ts'),
+      },
+      { find: '@', replacement: path.resolve(__dirname, './src') },
+      { find: '@evobgp/ui/components', replacement: path.resolve(__dirname, '../../packages/ui/src/components') },
+      { find: '@evobgp/ui/hooks', replacement: path.resolve(__dirname, '../../packages/ui/src/hooks') },
+      { find: '@evobgp/ui/lib/utils', replacement: path.resolve(__dirname, '../../packages/ui/src/lib/utils.ts') },
+    ],
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/v1': { target: 'http://127.0.0.1:8080', changeOrigin: true },
+      '/metrics': { target: 'http://127.0.0.1:8080', changeOrigin: true },
+    },
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+  },
+})
diff --git a/deploy/docker/evobgp-web/Dockerfile b/deploy/docker/evobgp-web/Dockerfile
index 8988ccf..84f6f8d 100644
--- a/deploy/docker/evobgp-web/Dockerfile
+++ b/deploy/docker/evobgp-web/Dockerfile
@@ -1,19 +1,26 @@
 # syntax=docker/dockerfile:1.7
-# Статическая панель EvoBGP (SvelteKit) + nginx.
+# React + Vite статическая панель EvoBGP + nginx.
 # Финальный stage `web` ожидает bake-контекст web-artifacts (= target:web-build).
+# Сборка ведётся из корня репозитория (context = "../.." в docker-bake.hcl).
+
 FROM public.ecr.aws/docker/library/node:22-alpine AS deps
-WORKDIR /web
-COPY web/package.json web/package-lock.json ./
-RUN --mount=type=cache,target=/root/.npm,sharing=locked \
-    npm ci
+WORKDIR /repo
+RUN corepack enable
+COPY pnpm-workspace.yaml pnpm-lock.yaml package.json ./
+COPY apps/web/package.json ./apps/web/
+COPY packages/ui/package.json ./packages/ui/
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store,sharing=locked \
+    pnpm install --frozen-lockfile
 
 FROM deps AS build
-COPY web/ ./
-RUN npm run build
+COPY tsconfig.base.json ./
+COPY apps/web/ ./apps/web/
+COPY packages/ui/ ./packages/ui/
+RUN pnpm --filter @evobgp/web run build
 
 FROM public.ecr.aws/docker/library/nginx:1.27-alpine AS web
 ARG EVOBGP_UPSTREAM=evobgp-api
 COPY deploy/docker/evobgp-web/nginx.conf /tmp/nginx-default.conf
 RUN sed -e "s/evobgp-api/${EVOBGP_UPSTREAM}/g" /tmp/nginx-default.conf > /etc/nginx/conf.d/default.conf \
     && rm -f /tmp/nginx-default.conf
-COPY --from=web-artifacts /web/build /usr/share/nginx/html
+COPY --from=web-artifacts /repo/apps/web/dist /usr/share/nginx/html
diff --git a/package.json b/package.json
index 124d12e..4204d83 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,13 @@
 {
   "name": "evobgp-release",
   "private": true,
+  "scripts": {
+    "dev": "pnpm --filter @evobgp/web dev",
+    "build": "pnpm --filter @evobgp/web build",
+    "typecheck": "pnpm --filter @evobgp/web typecheck",
+    "lint": "pnpm --filter @evobgp/web lint",
+    "test": "pnpm --filter @evobgp/web test"
+  },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
diff --git a/packages/ui/components.json b/packages/ui/components.json
new file mode 100644
index 0000000..5ffe925
--- /dev/null
+++ b/packages/ui/components.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@reui": "https://reui.io/r/{style}/{name}.json"
+  },
+  "aliases": {
+    "components": "@evobgp/ui/components",
+    "utils": "@evobgp/ui/lib/utils",
+    "hooks": "@evobgp/ui/hooks",
+    "lib": "@evobgp/ui/lib",
+    "ui": "@evobgp/ui/components"
+  }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..ae51895
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@evobgp/ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./components/*": "./src/components/*",
+    "./hooks/*": "./src/hooks/*",
+    "./lib/utils": "./src/lib/utils.ts",
+    "./globals.css": "./src/styles/globals.css"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "lucide-react": "^0.468.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^10.0.1",
+    "recharts": "3.8.0",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^3.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3"
+  }
+}
diff --git a/packages/ui/src/components/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx
new file mode 100644
index 0000000..aad4012
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog.tsx
@@ -0,0 +1,185 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm 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}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/packages/ui/src/components/alert.tsx b/packages/ui/src/components/alert.tsx
new file mode 100644
index 0000000..9aefd60
--- /dev/null
+++ b/packages/ui/src/components/alert.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx
new file mode 100644
index 0000000..41d74a9
--- /dev/null
+++ b/packages/ui/src/components/badge.tsx
@@ -0,0 +1,52 @@
+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 "@evobgp/ui/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }
diff --git a/packages/ui/src/components/breadcrumb.tsx b/packages/ui/src/components/breadcrumb.tsx
new file mode 100644
index 0000000..927ad2f
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb.tsx
@@ -0,0 +1,125 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  })
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
new file mode 100644
index 0000000..15697a9
--- /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 "@evobgp/ui/lib/utils"
+import { Separator } from "@evobgp/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/button.tsx b/packages/ui/src/components/button.tsx
new file mode 100644
index 0000000..2f791f1
--- /dev/null
+++ b/packages/ui/src/components/button.tsx
@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/packages/ui/src/components/calendar.tsx b/packages/ui/src/components/calendar.tsx
new file mode 100644
index 0000000..cf0c231
--- /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 "@evobgp/ui/lib/utils"
+import { Button, buttonVariants } from "@evobgp/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/card.tsx b/packages/ui/src/components/card.tsx
new file mode 100644
index 0000000..cd1e2f8
--- /dev/null
+++ b/packages/ui/src/components/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/packages/ui/src/components/chart.tsx b/packages/ui/src/components/chart.tsx
new file mode 100644
index 0000000..2ae0f0e
--- /dev/null
+++ b/packages/ui/src/components/chart.tsx
@@ -0,0 +1,373 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<
+      TooltipValueType,
+      TooltipNameType
+    >,
+    "accessibilityLayer"
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
new file mode 100644
index 0000000..ec11eef
--- /dev/null
+++ b/packages/ui/src/components/checkbox.tsx
@@ -0,0 +1,27 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx
new file mode 100644
index 0000000..591b935
--- /dev/null
+++ b/packages/ui/src/components/command.tsx
@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@evobgp/ui/components/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@evobgp/ui/components/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
new file mode 100644
index 0000000..1dfcb8a
--- /dev/null
+++ b/packages/ui/src/components/dialog.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
new file mode 100644
index 0000000..e914215
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 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 outline-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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-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 )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/packages/ui/src/components/field.tsx b/packages/ui/src/components/field.tsx
new file mode 100644
index 0000000..04ed7e9
--- /dev/null
+++ b/packages/ui/src/components/field.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Label } from "@evobgp/ui/components/label"
+import { Separator } from "@evobgp/ui/components/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/packages/ui/src/components/input-group.tsx b/packages/ui/src/components/input-group.tsx
new file mode 100644
index 0000000..a603090
--- /dev/null
+++ b/packages/ui/src/components/input-group.tsx
@@ -0,0 +1,156 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Input } from "@evobgp/ui/components/input"
+import { Textarea } from "@evobgp/ui/components/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset"
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/packages/ui/src/components/input-otp.tsx b/packages/ui/src/components/input-otp.tsx
new file mode 100644
index 0000000..de4ef83
--- /dev/null
+++ b/packages/ui/src/components/input-otp.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { MinusIcon } from "lucide-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon
+      />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
new file mode 100644
index 0000000..0b29db7
--- /dev/null
+++ b/packages/ui/src/components/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/packages/ui/src/components/kbd.tsx b/packages/ui/src/components/kbd.tsx
new file mode 100644
index 0000000..519df0e
--- /dev/null
+++ b/packages/ui/src/components/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@evobgp/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/label.tsx b/packages/ui/src/components/label.tsx
new file mode 100644
index 0000000..b1e0ae7
--- /dev/null
+++ b/packages/ui/src/components/label.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
new file mode 100644
index 0000000..133b13c
--- /dev/null
+++ b/packages/ui/src/components/popover.tsx
@@ -0,0 +1,88 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
new file mode 100644
index 0000000..71dc476
--- /dev/null
+++ b/packages/ui/src/components/scroll-area.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
new file mode 100644
index 0000000..a80f95a
--- /dev/null
+++ b/packages/ui/src/components/select.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <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 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 />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
new file mode 100644
index 0000000..13e3b9a
--- /dev/null
+++ b/packages/ui/src/components/separator.tsx
@@ -0,0 +1,23 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
new file mode 100644
index 0000000..6eb7dd2
--- /dev/null
+++ b/packages/ui/src/components/sheet.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
new file mode 100644
index 0000000..e27fdb0
--- /dev/null
+++ b/packages/ui/src/components/sidebar.tsx
@@ -0,0 +1,721 @@
+import * as React from "react"
+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 { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Input } from "@evobgp/ui/components/input"
+import { Separator } from "@evobgp/ui/components/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@evobgp/ui/components/sheet"
+import { Skeleton } from "@evobgp/ui/components/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@evobgp/ui/components/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-label",
+      sidebar: "group-label",
+    },
+  })
+}
+
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-action",
+      sidebar: "group-action",
+    },
+  })
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar()
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
+    },
+  })
+
+  if (!tooltip) {
+    return comp
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    showOnHover?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-action",
+      sidebar: "menu-action",
+    },
+  })
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<"a"> &
+  React.ComponentProps<"a"> & {
+    size?: "sm" | "md"
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-sub-button",
+      sidebar: "menu-sub-button",
+      size,
+      active: isActive,
+    },
+  })
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/packages/ui/src/components/skeleton.tsx b/packages/ui/src/components/skeleton.tsx
new file mode 100644
index 0000000..c83b157
--- /dev/null
+++ b/packages/ui/src/components/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/packages/ui/src/components/slider.tsx b/packages/ui/src/components/slider.tsx
new file mode 100644
index 0000000..0e841b9
--- /dev/null
+++ b/packages/ui/src/components/slider.tsx
@@ -0,0 +1,52 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/packages/ui/src/components/sonner.tsx b/packages/ui/src/components/sonner.tsx
new file mode 100644
index 0000000..9772eb2
--- /dev/null
+++ b/packages/ui/src/components/sonner.tsx
@@ -0,0 +1,47 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx
new file mode 100644
index 0000000..73af7c8
--- /dev/null
+++ b/packages/ui/src/components/spinner.tsx
@@ -0,0 +1,10 @@
+import { cn } from "@evobgp/ui/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }
diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
new file mode 100644
index 0000000..475de73
--- /dev/null
+++ b/packages/ui/src/components/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
new file mode 100644
index 0000000..7d84d61
--- /dev/null
+++ b/packages/ui/src/components/tabs.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
new file mode 100644
index 0000000..10bb9db
--- /dev/null
+++ b/packages/ui/src/components/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/packages/ui/src/components/toggle.tsx b/packages/ui/src/components/toggle.tsx
new file mode 100644
index 0000000..69dbccd
--- /dev/null
+++ b/packages/ui/src/components/toggle.tsx
@@ -0,0 +1,43 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
new file mode 100644
index 0000000..198596f
--- /dev/null
+++ b/packages/ui/src/components/tooltip.tsx
@@ -0,0 +1,64 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/ui/src/hooks/use-mobile.ts b/packages/ui/src/hooks/use-mobile.ts
new file mode 100644
index 0000000..a7c6b65
--- /dev/null
+++ b/packages/ui/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+export function useIsMobile(breakpoint = 768): boolean {
+  const [isMobile, setIsMobile] = React.useState<boolean>(() => {
+    if (typeof window === "undefined") return false
+    return window.innerWidth < breakpoint
+  })
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`)
+    const onChange = () => setIsMobile(mql.matches)
+    onChange()
+    mql.addEventListener("change", onChange)
+    return () => mql.removeEventListener("change", onChange)
+  }, [breakpoint])
+
+  return isMobile
+}
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/packages/ui/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
new file mode 100644
index 0000000..c5fe0af
--- /dev/null
+++ b/packages/ui/src/styles/globals.css
@@ -0,0 +1,156 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../";
+@source "../../../apps/web/src";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --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);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 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 {
+  --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);
+  --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);
+  --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);
+  --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);
+}
+
+@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 {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..0ac3ae6
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@evobgp/ui/components/*": ["./src/components/*"],
+      "@evobgp/ui/hooks/*": ["./src/hooks/*"],
+      "@evobgp/ui/lib/utils": ["./src/lib/utils.ts"]
+    },
+    "verbatimModuleSyntax": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..8e4e5d0
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,7303 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@commitlint/cli':
+        specifier: ^19.8.1
+        version: 19.8.1(@types/node@22.20.0)(typescript@5.9.3)
+      '@commitlint/config-conventional':
+        specifier: ^19.8.1
+        version: 19.8.1
+      '@markwylde/semantic-release-gitea':
+        specifier: ^2.2.0
+        version: 2.2.0
+      '@semantic-release/changelog':
+        specifier: ^6.0.3
+        version: 6.0.3(semantic-release@25.0.5(typescript@5.9.3))
+      '@semantic-release/commit-analyzer':
+        specifier: ^13.0.1
+        version: 13.0.1(semantic-release@25.0.5(typescript@5.9.3))
+      '@semantic-release/exec':
+        specifier: ^7.0.0
+        version: 7.1.0(semantic-release@25.0.5(typescript@5.9.3))
+      '@semantic-release/release-notes-generator':
+        specifier: ^14.0.3
+        version: 14.1.1(semantic-release@25.0.5(typescript@5.9.3))
+      semantic-release:
+        specifier: ^25.0.2
+        version: 25.0.5(typescript@5.9.3)
+
+  apps/web:
+    dependencies:
+      '@base-ui/react':
+        specifier: ^1.0.0
+        version: 1.6.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)
+      '@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)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.7)
+      '@evobgp/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      '@hookform/resolvers':
+        specifier: ^3.10.0
+        version: 3.10.0(react-hook-form@7.80.0(react@19.2.7))
+      '@tanstack/react-query':
+        specifier: ^5.90.2
+        version: 5.101.2(react@19.2.7)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.90.2
+        version: 5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(react@19.2.7)
+      '@tanstack/react-router':
+        specifier: ^1.130.2
+        version: 1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@tanstack/react-router-devtools':
+        specifier: ^1.130.2
+        version: 1.167.0(@tanstack/react-router@1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@tanstack/router-core@1.171.13)(csstype@3.2.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@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.5(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      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
+      input-otp:
+        specifier: ^1.4.2
+        version: 1.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      lucide-react:
+        specifier: ^0.468.0
+        version: 0.468.0(react@19.2.7)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react:
+        specifier: ^19.2.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.2.0
+        version: 19.2.7(react@19.2.7)
+      react-hook-form:
+        specifier: ^7.60.0
+        version: 7.80.0(react@19.2.7)
+      recharts:
+        specifier: 3.8.0
+        version: 3.8.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1)
+      sonner:
+        specifier: ^1.7.0
+        version: 1.7.4(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      zod:
+        specifier: ^3.25.0
+        version: 3.25.76
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.0.0
+        version: 9.39.4
+      '@tailwindcss/vite':
+        specifier: ^4.1.0
+        version: 4.3.2(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))
+      '@tanstack/router-cli':
+        specifier: ^1.130.0
+        version: 1.167.17
+      '@tanstack/router-plugin':
+        specifier: ^1.130.0
+        version: 1.168.18(@tanstack/react-router@1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(esbuild@0.28.1)(rollup@4.62.2)(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))
+      '@types/react':
+        specifier: ^19.2.7
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.1
+        version: 5.2.0(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))
+      eslint:
+        specifier: ^9.0.0
+        version: 9.39.4(jiti@2.7.0)
+      eslint-plugin-react-hooks:
+        specifier: ^5.0.0
+        version: 5.2.0(eslint@9.39.4(jiti@2.7.0))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.0
+        version: 0.4.26(eslint@9.39.4(jiti@2.7.0))
+      globals:
+        specifier: ^15.0.0
+        version: 15.15.0
+      happy-dom:
+        specifier: ^18.0.0
+        version: 18.0.1
+      tailwindcss:
+        specifier: ^4.1.0
+        version: 4.3.2
+      tw-animate-css:
+        specifier: ^1.0.0
+        version: 1.4.0
+      typescript:
+        specifier: ^5.9.2
+        version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.0.0
+        version: 8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+      vitest:
+        specifier: ^3.0.0
+        version: 3.2.6(@types/node@22.20.0)(happy-dom@18.0.1)(jiti@2.7.0)(lightningcss@1.32.0)
+
+  packages/ui:
+    dependencies:
+      '@base-ui/react':
+        specifier: ^1.0.0
+        version: 1.6.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)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      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: ^0.468.0
+        version: 0.468.0(react@19.2.7)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      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)
+      recharts:
+        specifier: 3.8.0
+        version: 3.8.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1)
+      sonner:
+        specifier: ^1.7.4
+        version: 1.7.4(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      tailwind-merge:
+        specifier: ^3.0.0
+        version: 3.6.0
+    devDependencies:
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+
+packages:
+
+  '@actions/core@3.0.1':
+    resolution: {integrity: sha512-a6d/Nwahm9fliVGRhdhofo40HjHQasUPusmc7vBfyky+7Z+P2A1J68zyFVaNcEclc/Se+eO595oAr5nwEIoIUA==}
+
+  '@actions/exec@3.0.0':
+    resolution: {integrity: sha512-6xH/puSoNBXb72VPlZVm7vQ+svQpFyA96qdDBvhB8eNZOE8LtPf9L4oAsfzK/crCL8YZ+19fKYVnM63Sl+Xzlw==}
+
+  '@actions/http-client@4.0.1':
+    resolution: {integrity: sha512-+Nvd1ImaOZBSoPbsUtEhv+1z99H12xzncCkz0a3RuehINE81FZSe2QTj3uvAPTcJX/SCzUQHQ0D1GrPMbrPitg==}
+
+  '@actions/io@3.0.2':
+    resolution: {integrity: sha512-nRBchcMM+QK1pdjO7/idu86rbJI5YHUKCvKs0KxnSYbVe3F51UfGxuZX4Qy/fWlp6l7gWFwIkrOzN+oUK03kfw==}
+
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.29.7':
+    resolution: {integrity: sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.29.7':
+    resolution: {integrity: sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@base-ui/react@1.6.0':
+    resolution: {integrity: sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.1':
+    resolution: {integrity: sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@colors/colors@1.5.0':
+    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
+    engines: {node: '>=0.1.90'}
+
+  '@commitlint/cli@19.8.1':
+    resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
+    engines: {node: '>=v18'}
+    hasBin: true
+
+  '@commitlint/config-conventional@19.8.1':
+    resolution: {integrity: sha512-/AZHJL6F6B/G959CsMAzrPKKZjeEiAVifRyEwXxcT6qtqbPwGw+iQxmNS+Bu+i09OCtdNRW6pNpBvgPrtMr9EQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/config-validator@19.8.1':
+    resolution: {integrity: sha512-0jvJ4u+eqGPBIzzSdqKNX1rvdbSU1lPNYlfQQRIFnBgLy26BtC0cFnr7c/AyuzExMxWsMOte6MkTi9I3SQ3iGQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/ensure@19.8.1':
+    resolution: {integrity: sha512-mXDnlJdvDzSObafjYrOSvZBwkD01cqB4gbnnFuVyNpGUM5ijwU/r/6uqUmBXAAOKRfyEjpkGVZxaDsCVnHAgyw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/execute-rule@19.8.1':
+    resolution: {integrity: sha512-YfJyIqIKWI64Mgvn/sE7FXvVMQER/Cd+s3hZke6cI1xgNT/f6ZAz5heND0QtffH+KbcqAwXDEE1/5niYayYaQA==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/format@19.8.1':
+    resolution: {integrity: sha512-kSJj34Rp10ItP+Eh9oCItiuN/HwGQMXBnIRk69jdOwEW9llW9FlyqcWYbHPSGofmjsqeoxa38UaEA5tsbm2JWw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/is-ignored@19.8.1':
+    resolution: {integrity: sha512-AceOhEhekBUQ5dzrVhDDsbMaY5LqtN8s1mqSnT2Kz1ERvVZkNihrs3Sfk1Je/rxRNbXYFzKZSHaPsEJJDJV8dg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/lint@19.8.1':
+    resolution: {integrity: sha512-52PFbsl+1EvMuokZXLRlOsdcLHf10isTPlWwoY1FQIidTsTvjKXVXYb7AvtpWkDzRO2ZsqIgPK7bI98x8LRUEw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/load@19.8.1':
+    resolution: {integrity: sha512-9V99EKG3u7z+FEoe4ikgq7YGRCSukAcvmKQuTtUyiYPnOd9a2/H9Ak1J9nJA1HChRQp9OA/sIKPugGS+FK/k1A==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/message@19.8.1':
+    resolution: {integrity: sha512-+PMLQvjRXiU+Ae0Wc+p99EoGEutzSXFVwQfa3jRNUZLNW5odZAyseb92OSBTKCu+9gGZiJASt76Cj3dLTtcTdg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/parse@19.8.1':
+    resolution: {integrity: sha512-mmAHYcMBmAgJDKWdkjIGq50X4yB0pSGpxyOODwYmoexxxiUCy5JJT99t1+PEMK7KtsCtzuWYIAXYAiKR+k+/Jw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/read@19.8.1':
+    resolution: {integrity: sha512-03Jbjb1MqluaVXKHKRuGhcKWtSgh3Jizqy2lJCRbRrnWpcM06MYm8th59Xcns8EqBYvo0Xqb+2DoZFlga97uXQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/resolve-extends@19.8.1':
+    resolution: {integrity: sha512-GM0mAhFk49I+T/5UCYns5ayGStkTt4XFFrjjf0L4S26xoMTSkdCf9ZRO8en1kuopC4isDFuEm7ZOm/WRVeElVg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/rules@19.8.1':
+    resolution: {integrity: sha512-Hnlhd9DyvGiGwjfjfToMi1dsnw1EXKGJNLTcsuGORHz6SS9swRgkBsou33MQ2n51/boIDrbsg4tIBbRpEWK2kw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/to-lines@19.8.1':
+    resolution: {integrity: sha512-98Mm5inzbWTKuZQr2aW4SReY6WUukdWXuZhrqf1QdKPZBCCsXuG87c+iP0bwtD6DBnmVVQjgp4whoHRVixyPBg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/top-level@19.8.1':
+    resolution: {integrity: sha512-Ph8IN1IOHPSDhURCSXBz44+CIu+60duFwRsg6HqaISFHQHbmBtxVw4ZrFNIYUzEP7WwrNPxa2/5qJ//NK1FGcw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/types@19.8.1':
+    resolution: {integrity: sha512-/yCrWGCoA1SVKOks25EGadP9Pnj0oAIHGpl2wH2M2Y46dPM2ueb8wyCVOD7O3WCTkaJ0IkKvzhl1JY7+uCT2Dw==}
+    engines: {node: '>=v18'}
+
+  '@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:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      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:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@esbuild/aix-ppc64@0.28.1':
+    resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.28.1':
+    resolution: {integrity: sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.28.1':
+    resolution: {integrity: sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.28.1':
+    resolution: {integrity: sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.28.1':
+    resolution: {integrity: sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.28.1':
+    resolution: {integrity: sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.28.1':
+    resolution: {integrity: sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.28.1':
+    resolution: {integrity: sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.28.1':
+    resolution: {integrity: sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.28.1':
+    resolution: {integrity: sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.28.1':
+    resolution: {integrity: sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.28.1':
+    resolution: {integrity: sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.28.1':
+    resolution: {integrity: sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.28.1':
+    resolution: {integrity: sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.28.1':
+    resolution: {integrity: sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.28.1':
+    resolution: {integrity: sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.28.1':
+    resolution: {integrity: sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.28.1':
+    resolution: {integrity: sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.28.1':
+    resolution: {integrity: sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.28.1':
+    resolution: {integrity: sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.28.1':
+    resolution: {integrity: sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.28.1':
+    resolution: {integrity: sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.28.1':
+    resolution: {integrity: sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.28.1':
+    resolution: {integrity: sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.2':
+    resolution: {integrity: sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.5':
+    resolution: {integrity: sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.4':
+    resolution: {integrity: sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/react-dom@2.1.8':
+    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@hookform/resolvers@3.10.0':
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
+  '@humanfs/core@0.19.2':
+    resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.8':
+    resolution: {integrity: sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/types@0.15.0':
+    resolution: {integrity: sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@keyv/serialize@1.1.1':
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
+
+  '@markwylde/semantic-release-gitea@2.2.0':
+    resolution: {integrity: sha512-qfDhu5ExWRtZgw5Z6KhVAM6hlLHqj5RuSiGmLlUYMI7FNr4VWsk0zRpdYCgv0yqG3D+n8df12ZaUON0KYxo3bg==}
+    engines: {node: '>=18.0.0'}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@octokit/auth-token@6.0.0':
+    resolution: {integrity: sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==}
+    engines: {node: '>= 20'}
+
+  '@octokit/core@7.0.6':
+    resolution: {integrity: sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==}
+    engines: {node: '>= 20'}
+
+  '@octokit/endpoint@11.0.3':
+    resolution: {integrity: sha512-FWFlNxghg4HrXkD3ifYbS/IdL/mDHjh9QcsNyhQjN8dplUoZbejsdpmuqdA76nxj2xoWPs7p8uX2SNr9rYu0Ag==}
+    engines: {node: '>= 20'}
+
+  '@octokit/graphql@9.0.3':
+    resolution: {integrity: sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==}
+    engines: {node: '>= 20'}
+
+  '@octokit/openapi-types@27.0.0':
+    resolution: {integrity: sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==}
+
+  '@octokit/plugin-paginate-rest@14.0.0':
+    resolution: {integrity: sha512-fNVRE7ufJiAA3XUrha2omTA39M6IXIc6GIZLvlbsm8QOQCYvpq/LkMNGyFlB1d8hTDzsAXa3OKtybdMAYsV/fw==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': '>=6'
+
+  '@octokit/plugin-retry@8.1.0':
+    resolution: {integrity: sha512-O1FZgXeiGb2sowEr/hYTr6YunGdSAFWnr2fyW39Ah85H8O33ELASQxcvOFF5LE6Tjekcyu2ms4qAzJVhSaJxTw==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': '>=7'
+
+  '@octokit/plugin-throttling@11.0.3':
+    resolution: {integrity: sha512-34eE0RkFCKycLl2D2kq7W+LovheM/ex3AwZCYN8udpi6bxsyjZidb2McXs69hZhLmJlDqTSP8cH+jSRpiaijBg==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': ^7.0.0
+
+  '@octokit/request-error@7.1.0':
+    resolution: {integrity: sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==}
+    engines: {node: '>= 20'}
+
+  '@octokit/request@10.0.11':
+    resolution: {integrity: sha512-+s7HUxjfFqOMS9VlIwDffq0MikjSAK0gSpG73W+meAvVAvX4MBrHYTK5Bj3Uot55qFT4gzUtfzE4mGWY4Br8/Q==}
+    engines: {node: '>= 20'}
+
+  '@octokit/types@16.0.0':
+    resolution: {integrity: sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==}
+
+  '@pnpm/config.env-replace@1.1.0':
+    resolution: {integrity: sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==}
+    engines: {node: '>=12.22.0'}
+
+  '@pnpm/network.ca-file@1.0.2':
+    resolution: {integrity: sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==}
+    engines: {node: '>=12.22.0'}
+
+  '@pnpm/npm-conf@3.0.3':
+    resolution: {integrity: sha512-//0sR/cow/s4ICQaYoAobOl4aU8cjU6x/V24V7XkKotb9+O+3zySIYp146vpaobYHnxa4pZX8NkV54Z5AwbDKA==}
+    engines: {node: '>=12'}
+
+  '@radix-ui/primitive@1.1.4':
+    resolution: {integrity: sha512-7AdCK9PQyiljKoBDbN8OuctCbd/esdwZPQ8RtOE3SsyQtUpiPb+ND75q0jEhC1m1ecBI0MFNeLJvwIh9iKHRcQ==}
+
+  '@radix-ui/react-compose-refs@1.1.3':
+    resolution: {integrity: sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.4':
+    resolution: {integrity: sha512-QwH4PO5urrbO+FaGd5Aglg+YJgWTyyuZ3g/6mKvsqraLkglDdckw9JafgL5McL5VEJ6EPNduPaT3ZE9BttDAqg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.18':
+    resolution: {integrity: sha512-apa28mldjMgORmE6g/w3sCcA0Y9UAVeeDVoozN4i7kOw12mLl9RBchfzK3Nn6qxOWjrZhK1Lfy7f07kyzxtnBw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.14':
+    resolution: {integrity: sha512-4lUhWTWAjbDIqFrAPWJ3WqBOpO5YchVZ88X3nh6H9Lu5AFi5nCUeTPj3D8FSDmabmFeRe9ME0BDA4MwKTha5GQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.4':
+    resolution: {integrity: sha512-cot/aB/mOm0IYVYTTmQcEEK1M48lZWi8FlYe5nDPQQ8NYZUlXEFgncJ9p2Kzer3RKSrY7cTTpEMLZKNo9QoP5Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.11':
+    resolution: {integrity: sha512-Mn88Vg2whaRocGJNOH+DKFqYm6ySFPQaiwHNxZPyjn99B52KAEJWWY9NP83+nWdk2HM3rdov+STu9AG471Rt9w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.2':
+    resolution: {integrity: sha512-orBC88futVpqCmhX1p4cvquNHsELQ+w+vBJnuj3ftETI5bJb0bZn3Tqu3SWN2IOcPycTnMGnhwoermvISt72sA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.13':
+    resolution: {integrity: sha512-z3oXfmaHLJTF1wktbjgD6cn9jiEbq3WSondB10LIuIt2m2Ym4iJlrW04/euMwENDdWDdE7z+OuY7Qyp1YpRSwA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.6':
+    resolution: {integrity: sha512-zdTk4PlUO0E18HnZ3wYbW0KkJJxWCdiNYp6g6X1PtONFhxVkg01vliTJAmwIszU6mHiyBOoW9P0rAugl5/hULQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.7':
+    resolution: {integrity: sha512-bC3NiwsprbxKjuon9l7X6BUTw7FPVzEYaL92MPEY5SCd/9hUTPXVFtVwRix7778wtRsVao+zE062gL79FZleeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.3.0':
+    resolution: {integrity: sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.2':
+    resolution: {integrity: sha512-xCso9j1/u8sEgP1RNHjFrXJLApL8LiqOkI1R4ywuN00rxWdYg4oQXuwKLS3i0j5NWLromUD27/4nlxj2UFVvIw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.3':
+    resolution: {integrity: sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.3':
+    resolution: {integrity: sha512-6c8ZqvPTWILEKnyVkP53EGRCcpnJiKTC21sS/6R1GF5xKyHJJWQEPfkqlcgUkdRQivd6tb23abUwe4ngWmY0JA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.2':
+    resolution: {integrity: sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@reduxjs/toolkit@2.12.0':
+    resolution: {integrity: sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
+  '@rolldown/pluginutils@1.0.0-rc.3':
+    resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
+
+  '@rollup/rollup-android-arm-eabi@4.62.2':
+    resolution: {integrity: sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.62.2':
+    resolution: {integrity: sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.62.2':
+    resolution: {integrity: sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.62.2':
+    resolution: {integrity: sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.62.2':
+    resolution: {integrity: sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.62.2':
+    resolution: {integrity: sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
+    resolution: {integrity: sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
+    resolution: {integrity: sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
+    resolution: {integrity: sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
+    resolution: {integrity: sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
+    resolution: {integrity: sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
+    resolution: {integrity: sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
+    resolution: {integrity: sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
+    resolution: {integrity: sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
+    resolution: {integrity: sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
+    resolution: {integrity: sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
+    resolution: {integrity: sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.62.2':
+    resolution: {integrity: sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openbsd-x64@4.62.2':
+    resolution: {integrity: sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.62.2':
+    resolution: {integrity: sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
+    resolution: {integrity: sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
+    resolution: {integrity: sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
+    resolution: {integrity: sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
+  '@semantic-release/changelog@6.0.3':
+    resolution: {integrity: sha512-dZuR5qByyfe3Y03TpmCvAxCyTnp7r5XwtHRf/8vD9EAn4ZWbavUX8adMtXYzE86EVh0gyLA7lm5yW4IV30XUag==}
+    engines: {node: '>=14.17'}
+    peerDependencies:
+      semantic-release: '>=18.0.0'
+
+  '@semantic-release/commit-analyzer@13.0.1':
+    resolution: {integrity: sha512-wdnBPHKkr9HhNhXOhZD5a2LNl91+hs8CC2vsAVYxtZH3y0dV3wKn+uZSN61rdJQZ8EGxzWB3inWocBHV9+u/CQ==}
+    engines: {node: '>=20.8.1'}
+    peerDependencies:
+      semantic-release: '>=20.1.0'
+
+  '@semantic-release/error@3.0.0':
+    resolution: {integrity: sha512-5hiM4Un+tpl4cKw3lV4UgzJj+SmfNIDCLLw0TepzQxz9ZGV5ixnqkzIVF+3tp0ZHgcMKE+VNGHJjEeyFG2dcSw==}
+    engines: {node: '>=14.17'}
+
+  '@semantic-release/error@4.0.0':
+    resolution: {integrity: sha512-mgdxrHTLOjOddRVYIYDo0fR3/v61GNN1YGkfbrjuIKg/uMgCd+Qzo3UAXJ+woLQQpos4pl5Esuw5A7AoNlzjUQ==}
+    engines: {node: '>=18'}
+
+  '@semantic-release/exec@7.1.0':
+    resolution: {integrity: sha512-4ycZ2atgEUutspPZ2hxO6z8JoQt4+y/kkHvfZ1cZxgl9WKJId1xPj+UadwInj+gMn2Gsv+fLnbrZ4s+6tK2TFQ==}
+    engines: {node: '>=20.8.1'}
+    peerDependencies:
+      semantic-release: '>=24.1.0'
+
+  '@semantic-release/github@12.0.8':
+    resolution: {integrity: sha512-tej5AAgK5X9wHRoDmYhecMXEHEkFeGOY1XsEblKxu8pIQwahzf1STYyr7iPU6Lpbg6C5I3N2w/ocXrBo+L7jhw==}
+    engines: {node: ^22.14.0 || >= 24.10.0}
+    peerDependencies:
+      semantic-release: '>=24.1.0'
+
+  '@semantic-release/npm@13.1.5':
+    resolution: {integrity: sha512-Hq5UxzoatN3LHiq2rTsWS54nCdqJHlsssGERCo8WlvdfFA9LoN0vO+OuKVSjtNapIc/S8C2LBj206wKLHg62mg==}
+    engines: {node: ^22.14.0 || >= 24.10.0}
+    peerDependencies:
+      semantic-release: '>=20.1.0'
+
+  '@semantic-release/release-notes-generator@14.1.1':
+    resolution: {integrity: sha512-Pbd2e2XRMUD0OxehHpgd5/YghsE76cddkRHSoDvKLK+OCy4Ewxn49rWR631MEUU01lgwF/uyVXvbnVuu6+Z6VA==}
+    engines: {node: '>=20.8.1'}
+    peerDependencies:
+      semantic-release: '>=20.1.0'
+
+  '@simple-libs/stream-utils@1.2.0':
+    resolution: {integrity: sha512-KxXvfapcixpz6rVEB6HPjOUZT22yN6v0vI0urQSk1L8MlEWPDFCZkhw2xmkyoTGYeFw7tWTZd7e3lVzRZRN/EA==}
+    engines: {node: '>=18'}
+
+  '@sindresorhus/is@4.6.0':
+    resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
+    engines: {node: '>=10'}
+
+  '@sindresorhus/is@7.2.0':
+    resolution: {integrity: sha512-P1Cz1dWaFfR4IR+U13mqqiGsLFf1KbayybWwdd2vfctdV6hDpUkgCY0nKOLLTMSoRd/jJNjtbqzf13K8DCCXQw==}
+    engines: {node: '>=18'}
+
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@tailwindcss/node@4.3.2':
+    resolution: {integrity: sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.2':
+    resolution: {integrity: sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.2':
+    resolution: {integrity: sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.2':
+    resolution: {integrity: sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.2':
+    resolution: {integrity: sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2':
+    resolution: {integrity: sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.2':
+    resolution: {integrity: sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.2':
+    resolution: {integrity: sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.2':
+    resolution: {integrity: sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.2':
+    resolution: {integrity: sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.2':
+    resolution: {integrity: sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.2':
+    resolution: {integrity: sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.2':
+    resolution: {integrity: sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.2':
+    resolution: {integrity: sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.3.2':
+    resolution: {integrity: sha512-eHpMeX4JXfVNJDEcsouTeCBubJBTcTLigeaw/NTUW6PB5ATKKXdyonnXgTBX2VuRbjz1hjfz6C5XAhr52ImQXA==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@tanstack/history@1.162.0':
+    resolution: {integrity: sha512-79pf/RkhteYZTRgcR4F9kbk84P2N8rugQJswxfIqovlbRiT3yI7eBE+5QorIrZaOKktsgzRlXh1l/du/xpl4iA==}
+    engines: {node: '>=20.19'}
+
+  '@tanstack/query-core@5.101.2':
+    resolution: {integrity: sha512-hH5MLoJhF7KaIGd7q3xTXGXvslI+GYlM1Z/35aSHHWaCJWB7XvTSHYuV3eM7tw+aE0mT/xMro4M4Q9rCGHT0lw==}
+
+  '@tanstack/query-devtools@5.101.2':
+    resolution: {integrity: sha512-o+wHcqgN7Pp0s8v1i0UGq/ZrrEKrxdIiMQmKRdYb2w7NPtylYSJ4+wg/tIn71m9DLstwUwdEGAvROdly6HXP6w==}
+
+  '@tanstack/react-query-devtools@5.101.2':
+    resolution: {integrity: sha512-eU7HctdA9gDjqoERoEdzLbw9DiqnBDfh5+Hu0u26gjqoHJezOpQAuiesDL2VvkU+2cPV76zgv0tMZsOrI4LjnQ==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.101.2
+      react: ^18 || ^19
+
+  '@tanstack/react-query@5.101.2':
+    resolution: {integrity: sha512-seDkr6kzGzX1okaaTtZPtgA688CDPlXUz1C6xSg0ESqn04Vuc8tlrYms1s3de+znBqhPVxFRfpAfUf+6XvfPWg==}
+    peerDependencies:
+      react: ^18 || ^19
+
+  '@tanstack/react-router-devtools@1.167.0':
+    resolution: {integrity: sha512-nGw095EG7IHx0h5NtlEmzf6vcCTaFNPWdTSuDKazajhN0ct/v/TkekJ9J6KYUCeV1a8/2ZmToc58M+0rrOyn7w==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@tanstack/react-router': ^1.170.0
+      '@tanstack/router-core': ^1.170.0
+      react: '>=18.0.0 || >=19.0.0'
+      react-dom: '>=18.0.0 || >=19.0.0'
+    peerDependenciesMeta:
+      '@tanstack/router-core':
+        optional: true
+
+  '@tanstack/react-router@1.170.16':
+    resolution: {integrity: sha512-w6eq1IJklujs1tESazaK/FxH0+H2l8vm/QPuu1cD3oRW/ubgKneQpd7b64ti/8gUyEimzimJQZDmJr6YHfP5+g==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      react: '>=18.0.0 || >=19.0.0'
+      react-dom: '>=18.0.0 || >=19.0.0'
+
+  '@tanstack/react-store@0.9.3':
+    resolution: {integrity: sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg==}
+    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/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/react-virtual@3.14.5':
+    resolution: {integrity: sha512-4EKRXh7zBLkbKbFmG3AUVkircuHd+7OdT1pocJSepxtfBd3qnrJgJ5rtPkRYyo9fmyVb2+pI2xPy5oYvMLQy6A==}
+    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-cli@1.167.17':
+    resolution: {integrity: sha512-kws9PNdspkHbeZG6aLDjjpgH/hg7Q565BdSW9hHrjKmXPq/at7OKxQnA76aw9dJiJqy9OmST2RdOKlMEog43+g==}
+    engines: {node: '>=20.19'}
+    hasBin: true
+
+  '@tanstack/router-core@1.171.13':
+    resolution: {integrity: sha512-+NOwEj1kO/6IGmpHRIZHasYxYWpyBQGNIZAST9aNrk9Q3YlU9SgqVnl1pbLa9qAKfeNdXQIRve0RQb/0kyDeDA==}
+    engines: {node: '>=20.19'}
+
+  '@tanstack/router-devtools-core@1.168.0':
+    resolution: {integrity: sha512-wQoQhlBK7nlZgqzaqdYXKWNTpdHdsaREdaPhFZVH0/Ador+F+eM3/NF2i3f2LPeS0GgKraZUQXe1Q/1+KHyEYg==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@tanstack/router-core': ^1.170.0
+      csstype: ^3.0.10
+    peerDependenciesMeta:
+      csstype:
+        optional: true
+
+  '@tanstack/router-generator@1.167.17':
+    resolution: {integrity: sha512-xtB9tB2Ws0tWR6Pi7nc3Qk9IYgoh1mQCKWjHqIl9tf6BNUpKoqniJoPAQ4+LGrK8FeZYU0o0p/qlZEyj9FAulA==}
+    engines: {node: '>=20.19'}
+
+  '@tanstack/router-plugin@1.168.18':
+    resolution: {integrity: sha512-MofS28/axfnfnhOD2RSgJEaU882aX5RsAzhGz5Vc4XhAmvCjy919u9JrNs4QsTWFbTD1P7IJ8WFlFVsrg0pStg==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@rsbuild/core': '>=1.0.2 || ^2.0.0'
+      '@tanstack/react-router': ^1.170.15
+      vite: '>=5.0.0 || >=6.0.0 || >=7.0.0 || >=8.0.0'
+      vite-plugin-solid: ^2.11.10 || ^3.0.0-0
+      webpack: '>=5.92.0'
+    peerDependenciesMeta:
+      '@rsbuild/core':
+        optional: true
+      '@tanstack/react-router':
+        optional: true
+      vite:
+        optional: true
+      vite-plugin-solid:
+        optional: true
+      webpack:
+        optional: true
+
+  '@tanstack/router-utils@1.162.2':
+    resolution: {integrity: sha512-hTWqJtqIFFdvuCl8WXNyrodp2L9zo2G37xKRrcVmVRWpAB2h+U1LuRAfS4tsFTiWOIoE/B+WDVFB8JpoEdw6jQ==}
+    engines: {node: '>=20.19'}
+
+  '@tanstack/store@0.9.3':
+    resolution: {integrity: sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==}
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/virtual-core@3.17.3':
+    resolution: {integrity: sha512-8Np/TFELpI0ySuJoVmjvOrQYXH/8sTX0Biv9szhFhY39xOdAAY+smrMxjxOum/ux3eM8MUJQsEJ0/R0UpvC8dw==}
+
+  '@tanstack/virtual-file-routes@1.162.0':
+    resolution: {integrity: sha512-uhOeFyxLcU41HzvrxsGpiWdcMbScY1EDgbZ5K7DVRMYInbLYWAC0EA/kx9wXAoSM8q82bUG2hRl8+EAjE6XAbA==}
+    engines: {node: '>=20.19'}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/conventional-commits-parser@5.0.2':
+    resolution: {integrity: sha512-BgT2szDXnVypgpNxOK8aL5SGjUdaQbC++WZNjF1Qge3Og2+zhHj+RWhmehLhYyvQwqAmvezruVfOf8+3m74W+g==}
+
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
+  '@types/http-cache-semantics@4.2.0':
+    resolution: {integrity: sha512-L3LgimLHXtGkWikKnsPg0/VFx9OGZaC+eN1u4r+OB1XRqH3meBIAVC2zr1WdMH+RHmnRkqliQAOHNJ/E0j/e0Q==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/node@20.19.43':
+    resolution: {integrity: sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==}
+
+  '@types/node@22.20.0':
+    resolution: {integrity: sha512-QWlFW2wf3nTjC13/DqRnBpR4ZO36VJH/JVBkA/vcnmbTBNQIlnObqyqZE1tUR7+Ni23Lda8R1BxMfbXRpCUx5g==}
+
+  '@types/normalize-package-data@2.4.4':
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.17':
+    resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@types/whatwg-mimetype@3.0.2':
+    resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
+
+  '@typescript-eslint/eslint-plugin@8.62.1':
+    resolution: {integrity: sha512-4EQM77WgVNxj7OkL/5b/D/xZsw00G577+UriYTC7JF5opcF3T2AuoeY7ueLaZgSVjSgCS6yOAJB5bRGLPSJUzA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.62.1
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/parser@8.62.1':
+    resolution: {integrity: sha512-sPhE4iHuJDSvoAiec+Ro8JyXw8f0ql13HFR82P99nCm9GwTEKG0KYLvDe6REk8BCXuit6vJAv/Yxg5ABaNS2rA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/project-service@8.62.1':
+    resolution: {integrity: sha512-yQ3RgY5RkSBpsNS1Bx/JQEcA24FOSdfGktoyprAr5u18390UQdtVcfnEv4nIrIshNnavlVyZBKxQwT1fIAE6cg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/scope-manager@8.62.1':
+    resolution: {integrity: sha512-r4d249KbQ1SFdpeStvob8Ih6aPPIzfqllPVOtvhve6ZcpuVcYo5/7zUWckKpHE7StASX4kTKZTLf0WQm/wPkcg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.62.1':
+    resolution: {integrity: sha512-xadytJqX9vJVQ2fdQjkcIVigwaOJNWkpjdLt6cEQ+xPnrI1fkp+/jZE/I97k9KUjqtpd25i0HeyZf3T6dutv2g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/type-utils@8.62.1':
+    resolution: {integrity: sha512-aXM5xlqXiTxPibXB93cLAURfT3rlizf7uMXISCXy66Isr/9hISJx3yDsKl0L7lKa51b8JpFuNKby0/O0pEm9jg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/types@8.62.1':
+    resolution: {integrity: sha512-ooCzJFaf+Hg+uG6fA3NRFGuFjlfNlDhBthbv4ZPU/0elCAFUfnyXUvf/WOpHz/jYwSmvU2GkR2LtyUfy1AxZ1Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.62.1':
+    resolution: {integrity: sha512-xMcW9oP9u7fAMXYs9A65CVmtLQe2r//oXINHfi8HV+oiqhih17sbLdhXr4540YWlgpDKQdY854OL5ZrdCiQsAA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/utils@8.62.1':
+    resolution: {integrity: sha512-sHtbPfuKNZCG+ih8SyjjucqRntSVmp8XgL5u6o9mAhiSn8ds5o/M/XdM0abweme2Tln3szOstOrZ9OXitvPh0g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/visitor-keys@8.62.1':
+    resolution: {integrity: sha512-4g3BLxfdTMy8iZG0MaBkadnlRrCJ74cQiFbyEVMrkwIoqdyaXXQM22cotDvrl4x28wgIZ9rEJRoM+mmhSJpJ1g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@vitejs/plugin-react@5.2.0':
+    resolution: {integrity: sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@vitest/expect@3.2.6':
+    resolution: {integrity: sha512-1+7q9BtaKzEmO+fmNT3kYvoNn5Y71XWAx2Q5HRim4tTVRQVRv4uJFAQ5FbK0OPUeNP/WmVCpxYxoJdvuHVjzBQ==}
+
+  '@vitest/mocker@3.2.6':
+    resolution: {integrity: sha512-EZOrpDbkKotFAP7wPAQV1UIyoGOk4oX7ynWhBhLB7v+meMHbQhU16oPpIYGTTe4oFlhpryGpgpcZP/sin3hYuw==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.2.6':
+    resolution: {integrity: sha512-lb7XXXzmm2h2ASzFnRvQpDo6onT1NmMJA3tkGTWiBFtRJ9lxGY3d3mm/Apt36gej2bkkOVLL/yTOtufDaFa/jA==}
+
+  '@vitest/runner@3.2.6':
+    resolution: {integrity: sha512-HYcoSj1w5tcgUnzoF0HcyaAQjpA1gj9ftUJ7iSJSuipc02jW9gKkigwZbjFldAfYHA1fa8UZVRftdMY5msWM9Q==}
+
+  '@vitest/snapshot@3.2.6':
+    resolution: {integrity: sha512-H+ZjNTWGpObenh0YnlBctAPnJSI20P81PL8BPzWpx54YXLLTm8hEsWawtcYLMrwvpK48hGxLLbCS+1KRXhsKhw==}
+
+  '@vitest/spy@3.2.6':
+    resolution: {integrity: sha512-oq6BbH68WzcWmwtBrU9nqLeaXTR4XwJF7FSLkKEZo4i6eoXcrxjcwSuTvWBIRUTC6VC72nXYunzqgZA+IKdtxg==}
+
+  '@vitest/utils@3.2.6':
+    resolution: {integrity: sha512-lI23nIs4bnT3T8NIoh+vFaz5s2/DdP0Jgt2jxwgWljvwn82cLJtyi/If+fjFyoLMGIOz0U/fKvWE0d4jsNQEfg==}
+
+  JSONStream@1.3.5:
+    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
+    hasBin: true
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.17.0:
+    resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@9.0.0:
+    resolution: {integrity: sha512-TQf59BsZnytt8GdJKLPfUZ54g/iaUL2OWDSFCCvMOhsHduDQxO8xC4PNeyIkVcA5KwL2phPSv0douC0fgWzmnA==}
+    engines: {node: '>= 20'}
+
+  aggregate-error@3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+
+  aggregate-error@5.0.0:
+    resolution: {integrity: sha512-gOsf2YwSlleG6IjRYG2A7k0HmBMEo6qVNk9Bp/EaLgAJT5ngH6PXbqa4ItvnEwCm/velL5jAnQgsHsWnjhGmvw==}
+    engines: {node: '>=18'}
+
+  ajv@6.15.0:
+    resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
+
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
+  ansi-escapes@7.3.0:
+    resolution: {integrity: sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==}
+    engines: {node: '>=18'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  ansis@4.3.1:
+    resolution: {integrity: sha512-BJ8/l4R5LRE7hW9WdSuGYrLSHi2ynxeFpDFbH0K/CgNeY/tyhk+vO6TYxXC5r5CpUhNVX310xzPsN/H9lCdfOA==}
+    engines: {node: '>=14'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  argv-formatter@1.0.0:
+    resolution: {integrity: sha512-F2+Hkm9xFaRg+GkaNnbwXNDV5O6pnCFEmqyhvfC/Ic5LbgOWjJh3L+mN/s91rxVL3znE7DYVpW0GJFT+4YBgWw==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  array-ify@1.0.0:
+    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  babel-dead-code-elimination@1.0.12:
+    resolution: {integrity: sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  baseline-browser-mapping@2.10.40:
+    resolution: {integrity: sha512-BSSLZ9/Cjjv7Gtj5B68ZzXcXUg8iOf3fme+FCuh8rC/Go+Kmh8cox7M3A8dolou16s64QjLPOSdngh7GxXvkSw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  before-after-hook@4.0.0:
+    resolution: {integrity: sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==}
+
+  bottleneck@2.19.5:
+    resolution: {integrity: sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==}
+
+  brace-expansion@1.1.15:
+    resolution: {integrity: sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==}
+
+  brace-expansion@5.0.7:
+    resolution: {integrity: sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==}
+    engines: {node: 18 || 20 || >=22}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.4:
+    resolution: {integrity: sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  byte-counter@0.1.0:
+    resolution: {integrity: sha512-jheRLVMeUKrDBjVw2O5+k4EvR4t9wtxHL+bo/LxfkxsVeuGMy3a5SEGgXdAFA4FSzTrU8rQXQIrsZ3oBq5a0pQ==}
+    engines: {node: '>=20'}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  cacheable-lookup@7.0.0:
+    resolution: {integrity: sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==}
+    engines: {node: '>=14.16'}
+
+  cacheable-request@13.0.19:
+    resolution: {integrity: sha512-SVXGH037+Mo1aIMO5B2UcleR43FGjFdN+M8JObSyEoQ2Mn4CODRWx28gN5jiTF0n5ItsgtIZfyargMNs8GX4kg==}
+    engines: {node: '>=18'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  caniuse-lite@1.0.30001800:
+    resolution: {integrity: sha512-MMHtuAz9Ys840zAY5F4k6fV5GaivZ9sPk+nz0mY+GYVzRBnYkN0mpqkSR92oWRQ19yQWo4HvBV/FnC16AJX8MA==}
+
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
+  chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  char-regex@1.0.2:
+    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
+    engines: {node: '>=10'}
+
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clean-stack@2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+
+  clean-stack@5.3.0:
+    resolution: {integrity: sha512-9ngPTOhYGQqNVSfeJkYXHmF7AGWp4/nN5D/QqNQs3Dvxd1Kk/WpjHfNujKHYUQ/5CoGyOyFNoWSPk5afzP0QVg==}
+    engines: {node: '>=14.16'}
+
+  cli-highlight@2.1.11:
+    resolution: {integrity: sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==}
+    engines: {node: '>=8.0.0', npm: '>=5.0.0'}
+    hasBin: true
+
+  cli-table3@0.6.5:
+    resolution: {integrity: sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==}
+    engines: {node: 10.* || >= 12.*}
+
+  cliui@7.0.4:
+    resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  cliui@9.0.1:
+    resolution: {integrity: sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==}
+    engines: {node: '>=20'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  compare-func@2.0.0:
+    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
+  content-type@2.0.0:
+    resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-angular@7.0.0:
+    resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-angular@8.3.1:
+    resolution: {integrity: sha512-6gfI3otXK5Ph5DfCOI1dblr+kN3FAm5a97hYoQkqNZxOaYa5WKfXH+AnpsmS+iUH2mgVC2Cg2Qw9m5OKcmNrIg==}
+    engines: {node: '>=18'}
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-writer@8.4.0:
+    resolution: {integrity: sha512-HHBFkk1EECxxmCi4CTu091iuDpQv5/OavuCUAuZmrkWpmYfyD816nom1CvtfXJ/uYfAAjavgHvXHX291tSLK8g==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  conventional-commits-filter@5.0.0:
+    resolution: {integrity: sha512-tQMagCOC59EVgNZcC5zl7XqO30Wki9i9J3acbUvkaosCT6JX3EeFwJD7Qqp4MCikRnzS18WXV3BLIQ66ytu6+Q==}
+    engines: {node: '>=18'}
+
+  conventional-commits-parser@5.0.0:
+    resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  conventional-commits-parser@6.4.0:
+    resolution: {integrity: sha512-tvRg7FIBNlyPzjdG8wWRlPHQJJHI7DylhtRGeU9Lq+JuoPh5BKpPRX83ZdLrvXuOSu5Eo/e7SzOQhU4Hd2Miuw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  convert-hrtime@5.0.0:
+    resolution: {integrity: sha512-lOETlkIeYSJWcbbcvjRKGxVMXJR+8+OQb/mTPbA4ObPMytYIsUbuOE0Jzy60hjARYszq1id0j8KgVhC+WGZVTg==}
+    engines: {node: '>=12'}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-es@3.1.1:
+    resolution: {integrity: sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==}
+
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
+  cosmiconfig-typescript-loader@6.3.0:
+    resolution: {integrity: sha512-Akr82WH1Wfqatyiqpj8HDkO2o2KmJRu1FhKfSNJP3K4IdXwHfEyL7MOb62i1AGQVLtIQM+iCE9CGOtrfhR+mmA==}
+    engines: {node: '>=v18'}
+    peerDependencies:
+      '@types/node': '*'
+      cosmiconfig: '>=9'
+      typescript: '>=5'
+
+  cosmiconfig@9.0.2:
+    resolution: {integrity: sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  crypto-random-string@4.0.0:
+    resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==}
+    engines: {node: '>=12'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  dargs@8.1.0:
+    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
+    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'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  decompress-response@10.0.0:
+    resolution: {integrity: sha512-oj7KWToJuuxlPr7VV0vabvxEIiqNMo+q0NueIiL3XhtwC6FVOX7Hr1c0C4eD0bmf7Zr+S/dSf2xvkH3Ad6sU3Q==}
+    engines: {node: '>=20'}
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dot-prop@5.3.0:
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  duplexer2@0.1.4:
+    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
+
+  electron-to-chromium@1.5.383:
+    resolution: {integrity: sha512-I2484/KkAvl8lm9VyjH2JnbOIV0d/UCqT7gbzs6l+o6Vmn9wgB66uVcKX+Vk6HrXtY6fbWTOEXuv8waDTuFNCw==}
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emojilib@2.4.0:
+    resolution: {integrity: sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw==}
+
+  enhanced-resolve@5.21.6:
+    resolution: {integrity: sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==}
+    engines: {node: '>=10.13.0'}
+
+  env-ci@11.2.0:
+    resolution: {integrity: sha512-D5kWfzkmaOQDioPmiviWAVtKmpPT4/iJmMVQxWxMPJTFyTkdc5JQUfc5iXEeWxcOdsYTKSAiA/Age4NUOqKsRA==}
+    engines: {node: ^18.17 || >=20.6.1}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-toolkit@1.49.0:
+    resolution: {integrity: sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==}
+
+  esbuild@0.28.1:
+    resolution: {integrity: sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  eslint-plugin-react-hooks@5.2.0:
+    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react-refresh@0.4.26:
+    resolution: {integrity: sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ==}
+    peerDependencies:
+      eslint: '>=8.40'
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@9.39.4:
+    resolution: {integrity: sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.3:
+    resolution: {integrity: sha512-i70LwGWUduXqzicKXWshooq+sWL1K3WUU5rKZNG/0i3a1OSoX3HqhH5WbWwTmqWfor4urUakGPiRQcleRZTwOg==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  figures@2.0.0:
+    resolution: {integrity: sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==}
+    engines: {node: '>=4'}
+
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up-simple@1.0.1:
+    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
+    engines: {node: '>=18'}
+
+  find-up@2.1.0:
+    resolution: {integrity: sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==}
+    engines: {node: '>=4'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  find-up@7.0.0:
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
+
+  find-versions@6.0.0:
+    resolution: {integrity: sha512-2kCCtc+JvcZ86IGAz3Z2Y0A1baIz9fL31pH/0S1IqZr9Iwnjq8izfPtrCyQKO6TLMPELLsQMre7VDqeIKCsHkA==}
+    engines: {node: '>=18'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
+
+  form-data-encoder@4.1.0:
+    resolution: {integrity: sha512-G6NsmEW15s0Uw9XnCg+33H3ViYRyiM0hMrMhhqQOR8NFc5GhYrI+6I3u7OTw7b91J2g8rtvMBZJDbcGb2YUniw==}
+    engines: {node: '>= 18'}
+
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
+    engines: {node: '>= 6'}
+
+  fs-extra@11.3.6:
+    resolution: {integrity: sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA==}
+    engines: {node: '>=14.14'}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function-timeout@1.0.2:
+    resolution: {integrity: sha512-939eZS4gJ3htTHAldmyyuzlrD58P03fHG49v2JfFXbV6OhvZKRC9j2yAtdHw/zrp2zXHuv05zMIy40F0ge7spA==}
+    engines: {node: '>=18'}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.6.0:
+    resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
+  git-log-parser@1.2.1:
+    resolution: {integrity: sha512-PI+sPDvHXNPl5WNOErAK05s3j0lgwUzMN6o8cyQrDaKfT3qd7TmNJKeXX+SknI5I0QhG5fVPAEwSY4tRGDtYoQ==}
+
+  git-raw-commits@4.0.0:
+    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
+    engines: {node: '>=16'}
+    deprecated: Deprecated and no longer maintained. Use @conventional-changelog/git-client instead.
+    hasBin: true
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
+  globby@16.2.0:
+    resolution: {integrity: sha512-QrJia2qDf5BB/V6HYlDTs0I0lBahyjLzpGQg3KT7FnCdTonAyPy2RtY802m2k4ALx6Dp752f82WsOczEVr3l6Q==}
+    engines: {node: '>=20'}
+
+  goober@2.1.19:
+    resolution: {integrity: sha512-U7veizMqxyKlM58+Z5j2ngJBH/r9siDmxpvNxSw0PylF6WQvrASJEZrxh1hidRBJc2jqoBVSyOban5u8m+6Rxg==}
+    peerDependencies:
+      csstype: ^3.0.10
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  got@14.6.6:
+    resolution: {integrity: sha512-QLV1qeYSo5l13mQzWgP/y0LbMr5Plr5fJilgAIwgnwseproEbtNym8xpLsDzeZ6MWXgNE6kdWGBjdh3zT/Qerg==}
+    engines: {node: '>=20'}
+
+  graceful-fs@4.2.10:
+    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  handlebars@4.7.9:
+    resolution: {integrity: sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  happy-dom@18.0.1:
+    resolution: {integrity: sha512-qn+rKOW7KWpVTtgIUi6RVmTBZJSe2k0Db0vh1f7CWrWclkkc7/Q+FrOfkZIb2eiErLyqu5AXEzE7XthO9JVxRA==}
+    engines: {node: '>=20.0.0'}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
+    engines: {node: '>= 0.4'}
+
+  highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+
+  hook-std@4.0.0:
+    resolution: {integrity: sha512-IHI4bEVOt3vRUDJ+bFA9VUJlo7SzvFARPNLw75pqSmAOP2HmTWfFJtPvLBrDrlgjEYXY9zs7SFdHPQaJShkSCQ==}
+    engines: {node: '>=20'}
+
+  hosted-git-info@7.0.2:
+    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  hosted-git-info@9.0.3:
+    resolution: {integrity: sha512-Hc+ghLoSt6QaYZUv0WBiIvmMDZuZZ7oaDvdH8MbfOO4lOsxdXLEvuC6ePoGs9H1X9oCLyq6+NVN0MKqD+ydxyg==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  http-cache-semantics@4.2.0:
+    resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
+
+  http-proxy-agent@9.1.0:
+    resolution: {integrity: sha512-2NxoveTT58mjYT4n3RPTEfCZGLMbidoO8XEieXfpSYxu+PQJ1qpx4ypwH6N+uF9twBPIvRRgvkvW5HUTYWENig==}
+    engines: {node: '>= 20'}
+
+  http2-wrapper@2.2.1:
+    resolution: {integrity: sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==}
+    engines: {node: '>=10.19.0'}
+
+  https-proxy-agent@9.1.0:
+    resolution: {integrity: sha512-ag87y7cJJ9/3+GxFr8Oy4O5faDsGRGnBGsJj/YjOSsSx/5eadKLYTMPlzuR6obgoCDDm0abAAZitXXQkMOPSpA==}
+    engines: {node: '>= 20'}
+
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  immer@10.2.0:
+    resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
+
+  immer@11.1.8:
+    resolution: {integrity: sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  import-from-esm@2.0.0:
+    resolution: {integrity: sha512-YVt14UZCgsX1vZQ3gKjkWVdBdHQ6eu3MPU1TBgL1H5orXe2+jWD006WCPPtOuwlQm10NuzOW5WawiF1Q9veW8g==}
+    engines: {node: '>=18.20'}
+
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+
+  index-to-position@1.2.0:
+    resolution: {integrity: sha512-Yg7+ztRkqslMAS2iFaU+Oa4KTSidr63OsFGlOrJoW981kIYO3CGCS3wA95P1mUi/IVSJkn0D479KTJpVpvFNuw==}
+    engines: {node: '>=18'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  input-otp@1.4.2:
+    resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-text-path@2.0.0:
+    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
+    engines: {node: '>=8'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  isbot@5.1.44:
+    resolution: {integrity: sha512-PGEHtwMnKbZpeSEXW2Utx+/JWed7dp6DiH0WWg33vGSDA7RUvpUeJSVlLrVkQ1RCpvDOUc/eH9ql7VsdbBZ8pA==}
+    engines: {node: '>=18'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  issue-parser@7.0.2:
+    resolution: {integrity: sha512-7atWPjhGEIX3JEtMrOYd8TKzboYlq+5sNbdl9POiLYOI14G5HZiQbZP0Xj5EZdrufQVXfJlpTV0hys0CuxwxZw==}
+    engines: {node: ^18.17 || >=20.6.1}
+
+  java-properties@1.0.2:
+    resolution: {integrity: sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==}
+    engines: {node: '>= 0.6.0'}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
+  js-yaml@4.3.0:
+    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-better-errors@1.0.2:
+    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json-with-bigint@3.5.8:
+    resolution: {integrity: sha512-eq/4KP6K34kwa7TcFdtvnftvHCD9KvHOGGICWwMFc4dOOKF5t4iYqnfLK8otCRCRv06FXOzGGyqE8h8ElMvvdw==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonfile@6.2.1:
+    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
+
+  jsonparse@1.3.1:
+    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
+    engines: {'0': node >= 0.2.0}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  keyv@5.6.0:
+    resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  load-json-file@4.0.0:
+    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
+    engines: {node: '>=4'}
+
+  locate-path@2.0.0:
+    resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
+    engines: {node: '>=4'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
+  lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+
+  lodash.capitalize@4.2.1:
+    resolution: {integrity: sha512-kZzYOKspf8XVX5AvmQF94gQW0lejFVgb80G85bU4ZWzoJ6C03PQg3coYAUpSTpQWelrZELd3XWgHzw4Ck5kaIw==}
+
+  lodash.escaperegexp@4.1.2:
+    resolution: {integrity: sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
+  lodash.kebabcase@4.1.1:
+    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.mergewith@4.6.2:
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
+
+  lodash.snakecase@4.1.1:
+    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
+
+  lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+
+  lodash.uniqby@4.7.0:
+    resolution: {integrity: sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==}
+
+  lodash.upperfirst@4.3.1:
+    resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
+
+  lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
+
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
+  lowercase-keys@3.0.0:
+    resolution: {integrity: sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@11.5.1:
+    resolution: {integrity: sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lucide-react@0.468.0:
+    resolution: {integrity: sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  make-asynchronous@1.1.0:
+    resolution: {integrity: sha512-ayF7iT+44LXdxJLTrTd3TLQpFDDvPCBxXxbv+pMUSuHA5Q8zyAfwkRP6aHHwNVFBUFWtxAHqwNJxF8vMZLAbVg==}
+    engines: {node: '>=18'}
+
+  marked-terminal@7.3.0:
+    resolution: {integrity: sha512-t4rBvPsHc57uE/2nJOLmMbZCQ4tgAccAED3ngXQqW6g+TxA488JzJ+FK3lQkzBQOI1mRV/r/Kq+1ZlJ4D0owQw==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      marked: '>=1 <16'
+
+  marked@15.0.12:
+    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  meow@12.1.1:
+    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
+    engines: {node: '>=16.10'}
+
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime@4.1.0:
+    resolution: {integrity: sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
+  mimic-response@4.0.0:
+    resolution: {integrity: sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  minimatch@10.2.5:
+    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimatch@3.1.5:
+    resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.15:
+    resolution: {integrity: sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  nerf-dart@1.0.0:
+    resolution: {integrity: sha512-EZSPZB70jiVsivaBLYDCyntd5eH8NTSMOn3rB+HxwdmKThGELLdYv8qVIMWvZEFy9w8ZZpW9h9OB32l1rGtj7g==}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  node-emoji@2.2.0:
+    resolution: {integrity: sha512-Z3lTE9pLaJF47NyMhd4ww1yFTAP8YhYI8SleJiHzM46Fgpm5cnNzSl9XfzFNqbaz+VlJrIj3fXQ4DeN1Rjm6cw==}
+    engines: {node: '>=18'}
+
+  node-releases@2.0.50:
+    resolution: {integrity: sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==}
+    engines: {node: '>=18'}
+
+  normalize-package-data@6.0.2:
+    resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  normalize-package-data@8.0.0:
+    resolution: {integrity: sha512-RWk+PI433eESQ7ounYxIp67CYuVsS1uYSonX3kA6ps/3LWfjVQa/ptEg6Y3T6uAMq1mWpX9PQ+qx+QaHpsc7gQ==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  normalize-url@8.1.1:
+    resolution: {integrity: sha512-JYc0DPlpGWB40kH5g07gGTrYuMqV653k3uBKY6uITPWds3M0ov3GaWGp9lbE3Bzngx8+XkfzgvASb9vk9JDFXQ==}
+    engines: {node: '>=14.16'}
+
+  normalize-url@9.0.1:
+    resolution: {integrity: sha512-ARftfC5HdUNu9jJeL8pHj8debUIHA2b91FizCoMzY4lG6dDX13jdvTK0TBe24IBDRf2HvJSzzwEPvmbkQWHRSg==}
+    engines: {node: '>=20'}
+
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
+  npm@11.18.0:
+    resolution: {integrity: sha512-T67M4L5wNm0cZ7EBLErcEkY1SmzEW/WJ+SADBzsFUY1UdAPfFHXFQtZ6SEXiK0+vzXysCvAsepbMaBTwnrAD+w==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+    hasBin: true
+    bundledDependencies:
+      - '@isaacs/string-locale-compare'
+      - '@npmcli/arborist'
+      - '@npmcli/config'
+      - '@npmcli/fs'
+      - '@npmcli/map-workspaces'
+      - '@npmcli/metavuln-calculator'
+      - '@npmcli/package-json'
+      - '@npmcli/promise-spawn'
+      - '@npmcli/redact'
+      - '@npmcli/run-script'
+      - '@sigstore/tuf'
+      - abbrev
+      - archy
+      - cacache
+      - chalk
+      - ci-info
+      - fastest-levenshtein
+      - fs-minipass
+      - glob
+      - graceful-fs
+      - hosted-git-info
+      - ini
+      - init-package-json
+      - is-cidr
+      - json-parse-even-better-errors
+      - libnpmaccess
+      - libnpmdiff
+      - libnpmexec
+      - libnpmfund
+      - libnpmorg
+      - libnpmpack
+      - libnpmpublish
+      - libnpmsearch
+      - libnpmteam
+      - libnpmversion
+      - make-fetch-happen
+      - minimatch
+      - minipass
+      - minipass-pipeline
+      - ms
+      - node-gyp
+      - nopt
+      - npm-audit-report
+      - npm-install-checks
+      - npm-package-arg
+      - npm-pick-manifest
+      - npm-profile
+      - npm-registry-fetch
+      - npm-user-validate
+      - p-map
+      - pacote
+      - parse-conflict-json
+      - proc-log
+      - qrcode-terminal
+      - read
+      - semver
+      - spdx-expression-parse
+      - ssri
+      - supports-color
+      - tar
+      - text-table
+      - tiny-relative-date
+      - treeverse
+      - validate-npm-package-name
+      - which
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  p-cancelable@4.0.1:
+    resolution: {integrity: sha512-wBowNApzd45EIKdO1LaU+LrMBwAcjfPaYtVzV3lmfM3gf8Z4CHZsiIqlM8TZZ8okYvh5A1cP6gTfCRQtwUpaUg==}
+    engines: {node: '>=14.16'}
+
+  p-each-series@3.0.0:
+    resolution: {integrity: sha512-lastgtAdoH9YaLyDa5i5z64q+kzOcQHsQ5SsZJD3q0VEyI8mq872S3geuNbRUQLVAE9siMfgKrpj7MloKFHruw==}
+    engines: {node: '>=12'}
+
+  p-event@6.0.1:
+    resolution: {integrity: sha512-Q6Bekk5wpzW5qIyUP4gdMEujObYstZl6DMMOSenwBvV0BlE5LkDwkjs5yHbZmdCEq2o4RJx4tE1vwxFVf2FG1w==}
+    engines: {node: '>=16.17'}
+
+  p-filter@4.1.0:
+    resolution: {integrity: sha512-37/tPdZ3oJwHaS3gNJdenCDB3Tz26i9sjhnguBtvN0vYlRIiDNnvTWkuh+0hETV9rLPdJ3rlL3yVOYPIAnM8rw==}
+    engines: {node: '>=18'}
+
+  p-limit@1.3.0:
+    resolution: {integrity: sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==}
+    engines: {node: '>=4'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-locate@2.0.0:
+    resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==}
+    engines: {node: '>=4'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-map@7.0.5:
+    resolution: {integrity: sha512-e8vJF4XdVkzqqSHguEMz41mQO1wKwxKm5ENrUJQUu9kLDCtn83cxbyHZcszr4QC5zEA7WffRRC4gsTecC7J9oA==}
+    engines: {node: '>=18'}
+
+  p-reduce@3.0.0:
+    resolution: {integrity: sha512-xsrIUgI0Kn6iyDYm9StOpOeK29XM1aboGji26+QEortiFST1hGZaUQOLhtEbqHErPpGW/aSz6allwK2qcptp0Q==}
+    engines: {node: '>=12'}
+
+  p-timeout@6.1.4:
+    resolution: {integrity: sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==}
+    engines: {node: '>=14.16'}
+
+  p-try@1.0.0:
+    resolution: {integrity: sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==}
+    engines: {node: '>=4'}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@4.0.0:
+    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
+    engines: {node: '>=4'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-json@8.3.0:
+    resolution: {integrity: sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==}
+    engines: {node: '>=18'}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
+  parse5-htmlparser2-tree-adapter@6.0.1:
+    resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==}
+
+  parse5@5.1.1:
+    resolution: {integrity: sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==}
+
+  parse5@6.0.1:
+    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
+
+  path-exists@3.0.0:
+    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
+    engines: {node: '>=4'}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  pify@3.0.0:
+    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
+    engines: {node: '>=4'}
+
+  pkg-conf@2.1.0:
+    resolution: {integrity: sha512-C+VUP+8jis7EsQZIhDYmS5qlNtjv2yP4SNtjXK9AP1ZcTRlnSfuumaTnRfYZnYgUUYVIKqL0fRvmUGDV2fmp6g==}
+    engines: {node: '>=4'}
+
+  postcss@8.5.16:
+    resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier@3.9.4:
+    resolution: {integrity: sha512-yWG/o/4oJfo036EKAfK6ACAoDOfHeRHx4tuxkfBZiauURiaSmYwlpOr5LQqKtIkRD2z1PLteme2WoxEnj4tHTg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
+  proxy-agent-negotiate@1.1.0:
+    resolution: {integrity: sha512-N8IBcM3UgCVzz2L2Lqv8DVntDnnC8/hiV4nEDUPkqq72TPUgYWjQc+bdZlBPZK9LzPAvOY//gAt0S0DApoOXWQ==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      kerberos: ^2.0.0
+    peerDependenciesMeta:
+      kerberos:
+        optional: true
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  quick-lru@5.1.1:
+    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
+    engines: {node: '>=10'}
+
+  rc@1.2.8:
+    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:
+      react: ^19.2.7
+
+  react-hook-form@7.80.0:
+    resolution: {integrity: sha512-4P+fk6oXsxY+6xSj7Euhc2sumQD8zQqCuVHoJwoyp9EchP+IUW9OESB7uHFJOKsIBQ4MQqYE84INJFqUCYNoOg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
+  react-is@19.2.7:
+    resolution: {integrity: sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==}
+
+  react-redux@9.3.0:
+    resolution: {integrity: sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@19.2.7:
+    resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
+    engines: {node: '>=0.10.0'}
+
+  read-package-up@11.0.0:
+    resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
+    engines: {node: '>=18'}
+
+  read-package-up@12.0.0:
+    resolution: {integrity: sha512-Q5hMVBYur/eQNWDdbF4/Wqqr9Bjvtrw2kjGxxBbKLbx8bVCL8gcArjTy8zDUuLGQicftpMuU0riQNcAsbtOVsw==}
+    engines: {node: '>=20'}
+
+  read-pkg@10.1.0:
+    resolution: {integrity: sha512-I8g2lArQiP78ll51UeMZojewtYgIRCKCWqZEgOO8c/uefTI+XDXvCSXu3+YNUaTNvZzobrL5+SqHjBrByRRTdg==}
+    engines: {node: '>=20'}
+
+  read-pkg@9.0.1:
+    resolution: {integrity: sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==}
+    engines: {node: '>=18'}
+
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  recharts@3.8.0:
+    resolution: {integrity: sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  registry-auth-token@5.1.1:
+    resolution: {integrity: sha512-P7B4+jq8DeD2nMsAcdfaqHbssgHtZ7Z5+++a5ask90fvmJ8p5je4mOa+wzu+DB4vQ5tdJV/xywY+UnVFeQLV5Q==}
+    engines: {node: '>=14'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
+  resolve-alpn@1.2.1:
+    resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  responselike@4.0.2:
+    resolution: {integrity: sha512-cGk8IbWEAnaCpdAt1BHzJ3Ahz5ewDJa0KseTsE3qIRMJ3C698W8psM7byCeWVpd/Ha7FUYzuRVzXoKoM6nRUbA==}
+    engines: {node: '>=20'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rollup@4.62.2:
+    resolution: {integrity: sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semantic-release@25.0.5:
+    resolution: {integrity: sha512-mn61SUJwtM8ThrWn2WmgLVpwVJeG/hPSupua1psdMoufmwRIPyvRLkRkL0JDXkP67OntlLWUYnBnfVc8EDO3/g==}
+    engines: {node: ^22.14.0 || >= 24.10.0}
+    hasBin: true
+
+  semver-regex@4.0.5:
+    resolution: {integrity: sha512-hunMQrEy1T6Jr2uEVjrAIqjwWcQTgOAcIM52C8MY1EZSD3DDNft04XzvYKPqjED65bNVVko0YI38nYeEHCX3yw==}
+    engines: {node: '>=12'}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  seroval-plugins@1.5.4:
+    resolution: {integrity: sha512-S0xQPhUTefAhNvNWFg0c1J8qJArHt5KdtJ/cFAofo06KD1MVSeFWyl4iiu+ApDIuw0WhjpOfCdgConOfAnLgkw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.5.4:
+    resolution: {integrity: sha512-46uFvgrXTVxZcUorgSSRZ4y+ieqLLQRMlG4bnCZKW3qI6BZm7Rg4ntMW4p1mILEEBZWrFlcpp0AyIIlM6jD9iw==}
+    engines: {node: '>=10'}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  signale@1.4.0:
+    resolution: {integrity: sha512-iuh+gPf28RkltuJC7W5MRi6XAjTDCAPC/prJUpQoG4vIP3MJZ+GTydVnodXA7pwvTKb2cA0m9OFZW/cdWy/I/w==}
+    engines: {node: '>=6'}
+
+  skin-tone@2.0.0:
+    resolution: {integrity: sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==}
+    engines: {node: '>=8'}
+
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
+  sonner@1.7.4:
+    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  spawn-error-forwarder@1.0.0:
+    resolution: {integrity: sha512-gRjMgK5uFjbCvdibeGJuy3I5OYz6VLoVdsOJdA6wV0WlfQVLFueoqMxwwYD9RODdgb6oUIvlRlsyFSiQkMKu0g==}
+
+  spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+
+  spdx-license-ids@3.0.23:
+    resolution: {integrity: sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==}
+
+  split2@1.0.0:
+    resolution: {integrity: sha512-NKywug4u4pX/AZBB1FCPzZ6/7O+Xhz1qMVbzTvvKvikjO99oPN87SkK08mEY9P63/5lWjK+wgOOgApnTg5r6qg==}
+
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  stream-combiner2@1.1.1:
+    resolution: {integrity: sha512-3PnJbYgS56AeWgtKF5jtJRT6uFJe56Z0Hc5Ngg/6sI6rIt8iiMBTa9cvdyFfpMQjaVHr8dusbNeFGIIonxOvKw==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
+  super-regex@1.1.0:
+    resolution: {integrity: sha512-WHkws2ZflZe41zj6AolvvmaTrWds/VuyeYr9iPVv/oQeaIoVxMKaushfFWpOGDT+GuBrM/sVqF8KUCYQlSSTdQ==}
+    engines: {node: '>=18'}
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-hyperlinks@3.2.0:
+    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
+    engines: {node: '>=14.18'}
+
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
+  tailwindcss@4.3.2:
+    resolution: {integrity: sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
+  temp-dir@3.0.0:
+    resolution: {integrity: sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==}
+    engines: {node: '>=14.16'}
+
+  tempy@3.2.0:
+    resolution: {integrity: sha512-d79HhZya5Djd7am0q+W4RTsSU+D/aJzM+4Y4AGJGuGlgM2L6sx5ZvOYTmZjqPhrDrV6xJTtRSm1JCLj6V6LHLQ==}
+    engines: {node: '>=14.16'}
+
+  text-extensions@2.4.0:
+    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
+    engines: {node: '>=8'}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  through2@2.0.5:
+    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  time-span@5.1.0:
+    resolution: {integrity: sha512-75voc/9G4rDIJleOo4jPvN4/YC4GRZrY8yy1uU4lwrB3XEQbWve8zXoO5No4eFrGcTAMYyoY67p8jRQdtA1HbA==}
+    engines: {node: '>=12'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyexec@1.2.4:
+    resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  traverse@0.6.8:
+    resolution: {integrity: sha512-aXJDbk6SnumuaZSANd21XAo15ucCDE38H4fkqiGsc3MhCK+wOlZvLP9cB/TvpHT0mOyWgC4Z8EwRlzqYSUzdsA==}
+    engines: {node: '>= 0.4'}
+
+  ts-api-utils@2.5.0:
+    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tunnel@0.0.6:
+    resolution: {integrity: sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==}
+    engines: {node: '>=0.6.11 <=0.7.0 || >=0.7.3'}
+
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@1.4.0:
+    resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
+    engines: {node: '>=10'}
+
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  type-fest@5.7.0:
+    resolution: {integrity: sha512-1URUxUqfHFM1c+zfSPsa3gnkO7Aq21qyH75SIduNYz4SzY964rn1X2vCMQaHSHhktiw+0kPa2iyb6PUpXqB6Vg==}
+    engines: {node: '>=20'}
+
+  typescript-eslint@8.62.1:
+    resolution: {integrity: sha512-vymnnM5g0AKQDSAyfP12nMIBvgwgA42syg74kkuZ4x1VuTzwQKwc5h9rGxeShCjny5o+zWAb6OEoz7XLgrIkIw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  undici@6.27.0:
+    resolution: {integrity: sha512-YmfV3YnEDzXRC5lZ2jWtWWHKGUm1zIt8AhesR1tens+HTNv+YZlN/dp6G727LOvMJ8xjP9Be7Y2Sdr96LDm+pg==}
+    engines: {node: '>=18.17'}
+
+  undici@7.28.0:
+    resolution: {integrity: sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==}
+    engines: {node: '>=20.18.1'}
+
+  unicode-emoji-modifier-base@1.0.0:
+    resolution: {integrity: sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==}
+    engines: {node: '>=4'}
+
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  unicorn-magic@0.4.0:
+    resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
+    engines: {node: '>=20'}
+
+  unique-string@3.0.0:
+    resolution: {integrity: sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==}
+    engines: {node: '>=12'}
+
+  universal-user-agent@7.0.3:
+    resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unplugin@3.3.0:
+    resolution: {integrity: sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@farmfe/core': '*'
+      '@rspack/core': '*'
+      bun-types-no-globals: '*'
+      esbuild: '*'
+      rolldown: '*'
+      rollup: '*'
+      unloader: '*'
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      '@farmfe/core':
+        optional: true
+      '@rspack/core':
+        optional: true
+      bun-types-no-globals:
+        optional: true
+      esbuild:
+        optional: true
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+      unloader:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  url-join@5.0.0:
+    resolution: {integrity: sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
+  vite@7.3.6:
+    resolution: {integrity: sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitest@3.2.6:
+    resolution: {integrity: sha512-xejya+bT/j/+R/AGa1XOfRxLmNUlLtlwjRsFUILF+xHfzElmGcmFydy2gqqIrd62ptIEfwVMofd19uNWD9L7Nw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.2.6
+      '@vitest/ui': 3.2.6
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  web-worker@1.5.0:
+    resolution: {integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
+
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs-parser@22.0.0:
+    resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+
+  yargs@16.2.2:
+    resolution: {integrity: sha512-Nt9ZJjXTv5R8MHbqby/wXQ6Gi0Bb3TcYZkR1bzuL4yB2OxWPkXknz513gEF0GoA6tn00UpbPvERW8rzCuWCA6w==}
+    engines: {node: '>=10'}
+
+  yargs@17.7.3:
+    resolution: {integrity: sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==}
+    engines: {node: '>=12'}
+
+  yargs@18.0.0:
+    resolution: {integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yocto-queue@1.2.2:
+    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
+    engines: {node: '>=12.20'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
+
+snapshots:
+
+  '@actions/core@3.0.1':
+    dependencies:
+      '@actions/exec': 3.0.0
+      '@actions/http-client': 4.0.1
+
+  '@actions/exec@3.0.0':
+    dependencies:
+      '@actions/io': 3.0.2
+
+  '@actions/http-client@4.0.1':
+    dependencies:
+      tunnel: 0.0.6
+      undici: 6.27.0
+
+  '@actions/io@3.0.2': {}
+
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.7': {}
+
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.4
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.29.7': {}
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/runtime@7.29.7': {}
+
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@base-ui/react@1.6.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.3.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.7
+      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.3.1(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      reselect: 5.2.0
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@colors/colors@1.5.0':
+    optional: true
+
+  '@commitlint/cli@19.8.1(@types/node@22.20.0)(typescript@5.9.3)':
+    dependencies:
+      '@commitlint/format': 19.8.1
+      '@commitlint/lint': 19.8.1
+      '@commitlint/load': 19.8.1(@types/node@22.20.0)(typescript@5.9.3)
+      '@commitlint/read': 19.8.1
+      '@commitlint/types': 19.8.1
+      tinyexec: 1.2.4
+      yargs: 17.7.3
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/config-conventional@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      conventional-changelog-conventionalcommits: 7.0.2
+
+  '@commitlint/config-validator@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      ajv: 8.20.0
+
+  '@commitlint/ensure@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      lodash.camelcase: 4.3.0
+      lodash.kebabcase: 4.1.1
+      lodash.snakecase: 4.1.1
+      lodash.startcase: 4.4.0
+      lodash.upperfirst: 4.3.1
+
+  '@commitlint/execute-rule@19.8.1': {}
+
+  '@commitlint/format@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      chalk: 5.6.2
+
+  '@commitlint/is-ignored@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      semver: 7.8.5
+
+  '@commitlint/lint@19.8.1':
+    dependencies:
+      '@commitlint/is-ignored': 19.8.1
+      '@commitlint/parse': 19.8.1
+      '@commitlint/rules': 19.8.1
+      '@commitlint/types': 19.8.1
+
+  '@commitlint/load@19.8.1(@types/node@22.20.0)(typescript@5.9.3)':
+    dependencies:
+      '@commitlint/config-validator': 19.8.1
+      '@commitlint/execute-rule': 19.8.1
+      '@commitlint/resolve-extends': 19.8.1
+      '@commitlint/types': 19.8.1
+      chalk: 5.6.2
+      cosmiconfig: 9.0.2(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.3.0(@types/node@22.20.0)(cosmiconfig@9.0.2(typescript@5.9.3))(typescript@5.9.3)
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/message@19.8.1': {}
+
+  '@commitlint/parse@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      conventional-changelog-angular: 7.0.0
+      conventional-commits-parser: 5.0.0
+
+  '@commitlint/read@19.8.1':
+    dependencies:
+      '@commitlint/top-level': 19.8.1
+      '@commitlint/types': 19.8.1
+      git-raw-commits: 4.0.0
+      minimist: 1.2.8
+      tinyexec: 1.2.4
+
+  '@commitlint/resolve-extends@19.8.1':
+    dependencies:
+      '@commitlint/config-validator': 19.8.1
+      '@commitlint/types': 19.8.1
+      global-directory: 4.0.1
+      import-meta-resolve: 4.2.0
+      lodash.mergewith: 4.6.2
+      resolve-from: 5.0.0
+
+  '@commitlint/rules@19.8.1':
+    dependencies:
+      '@commitlint/ensure': 19.8.1
+      '@commitlint/message': 19.8.1
+      '@commitlint/to-lines': 19.8.1
+      '@commitlint/types': 19.8.1
+
+  '@commitlint/to-lines@19.8.1': {}
+
+  '@commitlint/top-level@19.8.1':
+    dependencies:
+      find-up: 7.0.0
+
+  '@commitlint/types@19.8.1':
+    dependencies:
+      '@types/conventional-commits-parser': 5.0.2
+      chalk: 5.6.2
+
+  '@date-fns/tz@1.5.0': {}
+
+  '@dnd-kit/accessibility@3.1.1(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.7)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.7)
+      react: 19.2.7
+      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)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.7)
+      react: 19.2.7
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+      tslib: 2.8.1
+
+  '@esbuild/aix-ppc64@0.28.1':
+    optional: true
+
+  '@esbuild/android-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/android-arm@0.28.1':
+    optional: true
+
+  '@esbuild/android-x64@0.28.1':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/darwin-x64@0.28.1':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-arm@0.28.1':
+    optional: true
+
+  '@esbuild/linux-ia32@0.28.1':
+    optional: true
+
+  '@esbuild/linux-loong64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.28.1':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-s390x@0.28.1':
+    optional: true
+
+  '@esbuild/linux-x64@0.28.1':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.28.1':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.28.1':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/sunos-x64@0.28.1':
+    optional: true
+
+  '@esbuild/win32-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/win32-ia32@0.28.1':
+    optional: true
+
+  '@esbuild/win32-x64@0.28.1':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@2.7.0))':
+    dependencies:
+      eslint: 9.39.4(jiti@2.7.0)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.2':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.5':
+    dependencies:
+      ajv: 6.15.0
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.3.0
+      minimatch: 3.1.5
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.4': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.1':
+    dependencies:
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/react-dom@2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@hookform/resolvers@3.10.0(react-hook-form@7.80.0(react@19.2.7))':
+    dependencies:
+      react-hook-form: 7.80.0(react@19.2.7)
+
+  '@humanfs/core@0.19.2':
+    dependencies:
+      '@humanfs/types': 0.15.0
+
+  '@humanfs/node@0.16.8':
+    dependencies:
+      '@humanfs/core': 0.19.2
+      '@humanfs/types': 0.15.0
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanfs/types@0.15.0': {}
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@keyv/serialize@1.1.1': {}
+
+  '@markwylde/semantic-release-gitea@2.2.0':
+    dependencies:
+      '@semantic-release/error': 4.0.0
+      aggregate-error: 5.0.0
+      debug: 4.4.3
+      dir-glob: 3.0.1
+      form-data: 4.0.6
+      fs-extra: 11.3.6
+      globby: 16.2.0
+      got: 14.6.6
+      lodash-es: 4.18.1
+      url-join: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@octokit/auth-token@6.0.0': {}
+
+  '@octokit/core@7.0.6':
+    dependencies:
+      '@octokit/auth-token': 6.0.0
+      '@octokit/graphql': 9.0.3
+      '@octokit/request': 10.0.11
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      before-after-hook: 4.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/endpoint@11.0.3':
+    dependencies:
+      '@octokit/types': 16.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/graphql@9.0.3':
+    dependencies:
+      '@octokit/request': 10.0.11
+      '@octokit/types': 16.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/openapi-types@27.0.0': {}
+
+  '@octokit/plugin-paginate-rest@14.0.0(@octokit/core@7.0.6)':
+    dependencies:
+      '@octokit/core': 7.0.6
+      '@octokit/types': 16.0.0
+
+  '@octokit/plugin-retry@8.1.0(@octokit/core@7.0.6)':
+    dependencies:
+      '@octokit/core': 7.0.6
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      bottleneck: 2.19.5
+
+  '@octokit/plugin-throttling@11.0.3(@octokit/core@7.0.6)':
+    dependencies:
+      '@octokit/core': 7.0.6
+      '@octokit/types': 16.0.0
+      bottleneck: 2.19.5
+
+  '@octokit/request-error@7.1.0':
+    dependencies:
+      '@octokit/types': 16.0.0
+
+  '@octokit/request@10.0.11':
+    dependencies:
+      '@octokit/endpoint': 11.0.3
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      content-type: 2.0.0
+      json-with-bigint: 3.5.8
+      universal-user-agent: 7.0.3
+
+  '@octokit/types@16.0.0':
+    dependencies:
+      '@octokit/openapi-types': 27.0.0
+
+  '@pnpm/config.env-replace@1.1.0': {}
+
+  '@pnpm/network.ca-file@1.0.2':
+    dependencies:
+      graceful-fs: 4.2.10
+
+  '@pnpm/npm-conf@3.0.3':
+    dependencies:
+      '@pnpm/config.env-replace': 1.1.0
+      '@pnpm/network.ca-file': 1.0.2
+      config-chain: 1.1.13
+
+  '@radix-ui/primitive@1.1.4': {}
+
+  '@radix-ui/react-compose-refs@1.1.3(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-context@1.1.4(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-dialog@1.1.18(@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)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.14(@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)
+      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-focus-scope': 1.1.11(@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)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.13(@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)
+      '@radix-ui/react-presence': 1.1.6(@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)
+      '@radix-ui/react-primitive': 2.1.7(@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)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      aria-hidden: 1.2.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-dismissable-layer@1.1.14(@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)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@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)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-effect-event': 0.0.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-focus-guards@1.1.4(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-focus-scope@1.1.11(@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)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@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)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-id@1.1.2(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-portal@1.1.13(@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)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.7(@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)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-presence@1.1.6(@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)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-primitive@2.1.7(@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)':
+    dependencies:
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-slot@1.3.0(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-callback-ref@1.1.2(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-controllable-state@1.2.3(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-effect-event@0.0.3(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-layout-effect@1.1.2(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@reduxjs/toolkit@2.12.0(react-redux@9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1))(react@19.2.7)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.8
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.2.0
+    optionalDependencies:
+      react: 19.2.7
+      react-redux: 9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1)
+
+  '@rolldown/pluginutils@1.0.0-rc.3': {}
+
+  '@rollup/rollup-android-arm-eabi@4.62.2':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
+    optional: true
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@semantic-release/changelog@6.0.3(semantic-release@25.0.5(typescript@5.9.3))':
+    dependencies:
+      '@semantic-release/error': 3.0.0
+      aggregate-error: 3.1.0
+      fs-extra: 11.3.6
+      lodash: 4.18.1
+      semantic-release: 25.0.5(typescript@5.9.3)
+
+  '@semantic-release/commit-analyzer@13.0.1(semantic-release@25.0.5(typescript@5.9.3))':
+    dependencies:
+      conventional-changelog-angular: 8.3.1
+      conventional-changelog-writer: 8.4.0
+      conventional-commits-filter: 5.0.0
+      conventional-commits-parser: 6.4.0
+      debug: 4.4.3
+      import-from-esm: 2.0.0
+      lodash-es: 4.18.1
+      micromatch: 4.0.8
+      semantic-release: 25.0.5(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@semantic-release/error@3.0.0': {}
+
+  '@semantic-release/error@4.0.0': {}
+
+  '@semantic-release/exec@7.1.0(semantic-release@25.0.5(typescript@5.9.3))':
+    dependencies:
+      '@semantic-release/error': 4.0.0
+      aggregate-error: 3.1.0
+      debug: 4.4.3
+      execa: 9.6.1
+      lodash-es: 4.18.1
+      parse-json: 8.3.0
+      semantic-release: 25.0.5(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@semantic-release/github@12.0.8(semantic-release@25.0.5(typescript@5.9.3))':
+    dependencies:
+      '@octokit/core': 7.0.6
+      '@octokit/plugin-paginate-rest': 14.0.0(@octokit/core@7.0.6)
+      '@octokit/plugin-retry': 8.1.0(@octokit/core@7.0.6)
+      '@octokit/plugin-throttling': 11.0.3(@octokit/core@7.0.6)
+      '@semantic-release/error': 4.0.0
+      aggregate-error: 5.0.0
+      debug: 4.4.3
+      dir-glob: 3.0.1
+      http-proxy-agent: 9.1.0
+      https-proxy-agent: 9.1.0
+      issue-parser: 7.0.2
+      lodash-es: 4.18.1
+      mime: 4.1.0
+      p-filter: 4.1.0
+      semantic-release: 25.0.5(typescript@5.9.3)
+      tinyglobby: 0.2.17
+      undici: 7.28.0
+      url-join: 5.0.0
+    transitivePeerDependencies:
+      - kerberos
+      - supports-color
+
+  '@semantic-release/npm@13.1.5(semantic-release@25.0.5(typescript@5.9.3))':
+    dependencies:
+      '@actions/core': 3.0.1
+      '@semantic-release/error': 4.0.0
+      aggregate-error: 5.0.0
+      env-ci: 11.2.0
+      execa: 9.6.1
+      fs-extra: 11.3.6
+      lodash-es: 4.18.1
+      nerf-dart: 1.0.0
+      normalize-url: 9.0.1
+      npm: 11.18.0
+      rc: 1.2.8
+      read-pkg: 10.1.0
+      registry-auth-token: 5.1.1
+      semantic-release: 25.0.5(typescript@5.9.3)
+      semver: 7.8.5
+      tempy: 3.2.0
+
+  '@semantic-release/release-notes-generator@14.1.1(semantic-release@25.0.5(typescript@5.9.3))':
+    dependencies:
+      conventional-changelog-angular: 8.3.1
+      conventional-changelog-writer: 8.4.0
+      conventional-commits-filter: 5.0.0
+      conventional-commits-parser: 6.4.0
+      debug: 4.4.3
+      import-from-esm: 2.0.0
+      lodash-es: 4.18.1
+      read-package-up: 11.0.0
+      semantic-release: 25.0.5(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@simple-libs/stream-utils@1.2.0': {}
+
+  '@sindresorhus/is@4.6.0': {}
+
+  '@sindresorhus/is@7.2.0': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@tailwindcss/node@4.3.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.21.6
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.2
+
+  '@tailwindcss/oxide-android-arm64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.2
+      '@tailwindcss/oxide-darwin-arm64': 4.3.2
+      '@tailwindcss/oxide-darwin-x64': 4.3.2
+      '@tailwindcss/oxide-freebsd-x64': 4.3.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.2
+
+  '@tailwindcss/vite@4.3.2(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.2
+      '@tailwindcss/oxide': 4.3.2
+      tailwindcss: 4.3.2
+      vite: 7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+
+  '@tanstack/history@1.162.0': {}
+
+  '@tanstack/query-core@5.101.2': {}
+
+  '@tanstack/query-devtools@5.101.2': {}
+
+  '@tanstack/react-query-devtools@5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/query-devtools': 5.101.2
+      '@tanstack/react-query': 5.101.2(react@19.2.7)
+      react: 19.2.7
+
+  '@tanstack/react-query@5.101.2(react@19.2.7)':
+    dependencies:
+      '@tanstack/query-core': 5.101.2
+      react: 19.2.7
+
+  '@tanstack/react-router-devtools@1.167.0(@tanstack/react-router@1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@tanstack/router-core@1.171.13)(csstype@3.2.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@tanstack/router-devtools-core': 1.168.0(@tanstack/router-core@1.171.13)(csstype@3.2.3)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@tanstack/router-core': 1.171.13
+    transitivePeerDependencies:
+      - csstype
+
+  '@tanstack/react-router@1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/history': 1.162.0
+      '@tanstack/react-store': 0.9.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@tanstack/router-core': 1.171.13
+      isbot: 5.1.44
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@tanstack/react-store@0.9.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/store': 0.9.3
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      use-sync-external-store: 1.6.0(react@19.2.7)
+
+  '@tanstack/react-table@8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@tanstack/react-virtual@3.14.5(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/virtual-core': 3.17.3
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@tanstack/router-cli@1.167.17':
+    dependencies:
+      '@tanstack/router-generator': 1.167.17
+      chokidar: 5.0.0
+      yargs: 17.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tanstack/router-core@1.171.13':
+    dependencies:
+      '@tanstack/history': 1.162.0
+      cookie-es: 3.1.1
+      seroval: 1.5.4
+      seroval-plugins: 1.5.4(seroval@1.5.4)
+
+  '@tanstack/router-devtools-core@1.168.0(@tanstack/router-core@1.171.13)(csstype@3.2.3)':
+    dependencies:
+      '@tanstack/router-core': 1.171.13
+      clsx: 2.1.1
+      goober: 2.1.19(csstype@3.2.3)
+    optionalDependencies:
+      csstype: 3.2.3
+
+  '@tanstack/router-generator@1.167.17':
+    dependencies:
+      '@babel/types': 7.29.7
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/router-utils': 1.162.2
+      '@tanstack/virtual-file-routes': 1.162.0
+      jiti: 2.7.0
+      magic-string: 0.30.21
+      prettier: 3.9.4
+      zod: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tanstack/router-plugin@1.168.18(@tanstack/react-router@1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(esbuild@0.28.1)(rollup@4.62.2)(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/router-generator': 1.167.17
+      '@tanstack/router-utils': 1.162.2
+      chokidar: 5.0.0
+      unplugin: 3.3.0(esbuild@0.28.1)(rollup@4.62.2)(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))
+      zod: 4.4.3
+    optionalDependencies:
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      vite: 7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@rspack/core'
+      - bun-types-no-globals
+      - esbuild
+      - rolldown
+      - rollup
+      - supports-color
+      - unloader
+
+  '@tanstack/router-utils@1.162.2':
+    dependencies:
+      '@babel/generator': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      ansis: 4.3.1
+      babel-dead-code-elimination: 1.0.12
+      diff: 8.0.4
+      pathe: 2.0.3
+      tinyglobby: 0.2.17
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tanstack/store@0.9.3': {}
+
+  '@tanstack/table-core@8.21.3': {}
+
+  '@tanstack/virtual-core@3.17.3': {}
+
+  '@tanstack/virtual-file-routes@1.162.0': {}
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/conventional-commits-parser@5.0.2':
+    dependencies:
+      '@types/node': 22.20.0
+
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/estree@1.0.9': {}
+
+  '@types/http-cache-semantics@4.2.0': {}
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/node@20.19.43':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/node@22.20.0':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/normalize-package-data@2.4.4': {}
+
+  '@types/react-dom@19.2.3(@types/react@19.2.17)':
+    dependencies:
+      '@types/react': 19.2.17
+
+  '@types/react@19.2.17':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@types/whatwg-mimetype@3.0.2': {}
+
+  '@typescript-eslint/eslint-plugin@8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/type-utils': 8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.62.1
+      eslint: 9.39.4(jiti@2.7.0)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.62.1
+      debug: 4.4.3
+      eslint: 9.39.4(jiti@2.7.0)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.62.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.62.1
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.62.1':
+    dependencies:
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/visitor-keys': 8.62.1
+
+  '@typescript-eslint/tsconfig-utils@8.62.1(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.4(jiti@2.7.0)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.62.1': {}
+
+  '@typescript-eslint/typescript-estree@8.62.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/visitor-keys': 8.62.1
+      debug: 4.4.3
+      minimatch: 10.2.5
+      semver: 7.8.5
+      tinyglobby: 0.2.17
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.7.0))
+      '@typescript-eslint/scope-manager': 8.62.1
+      '@typescript-eslint/types': 8.62.1
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.7.0)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.62.1':
+    dependencies:
+      '@typescript-eslint/types': 8.62.1
+      eslint-visitor-keys: 5.0.1
+
+  '@vitejs/plugin-react@5.2.0(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/plugin-transform-react-jsx-self': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx-source': 7.29.7(@babel/core@7.29.7)
+      '@rolldown/pluginutils': 1.0.0-rc.3
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/expect@3.2.6':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.6
+      '@vitest/utils': 3.2.6
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/mocker@3.2.6(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))':
+    dependencies:
+      '@vitest/spy': 3.2.6
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+
+  '@vitest/pretty-format@3.2.6':
+    dependencies:
+      tinyrainbow: 2.0.0
+
+  '@vitest/runner@3.2.6':
+    dependencies:
+      '@vitest/utils': 3.2.6
+      pathe: 2.0.3
+      strip-literal: 3.1.0
+
+  '@vitest/snapshot@3.2.6':
+    dependencies:
+      '@vitest/pretty-format': 3.2.6
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@3.2.6':
+    dependencies:
+      tinyspy: 4.0.4
+
+  '@vitest/utils@3.2.6':
+    dependencies:
+      '@vitest/pretty-format': 3.2.6
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
+  JSONStream@1.3.5:
+    dependencies:
+      jsonparse: 1.3.1
+      through: 2.3.8
+
+  acorn-jsx@5.3.2(acorn@8.17.0):
+    dependencies:
+      acorn: 8.17.0
+
+  acorn@8.17.0: {}
+
+  agent-base@9.0.0: {}
+
+  aggregate-error@3.1.0:
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+
+  aggregate-error@5.0.0:
+    dependencies:
+      clean-stack: 5.3.0
+      indent-string: 5.0.0
+
+  ajv@6.15.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-escapes@7.3.0:
+    dependencies:
+      environment: 1.1.0
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.3: {}
+
+  ansis@4.3.1: {}
+
+  any-promise@1.3.0: {}
+
+  argparse@2.0.1: {}
+
+  argv-formatter@1.0.0: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  array-ify@1.0.0: {}
+
+  assertion-error@2.0.1: {}
+
+  asynckit@0.4.0: {}
+
+  babel-dead-code-elimination@1.0.12:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@4.0.4: {}
+
+  baseline-browser-mapping@2.10.40: {}
+
+  before-after-hook@4.0.0: {}
+
+  bottleneck@2.19.5: {}
+
+  brace-expansion@1.1.15:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@5.0.7:
+    dependencies:
+      balanced-match: 4.0.4
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.4:
+    dependencies:
+      baseline-browser-mapping: 2.10.40
+      caniuse-lite: 1.0.30001800
+      electron-to-chromium: 1.5.383
+      node-releases: 2.0.50
+      update-browserslist-db: 1.2.3(browserslist@4.28.4)
+
+  byte-counter@0.1.0: {}
+
+  cac@6.7.14: {}
+
+  cacheable-lookup@7.0.0: {}
+
+  cacheable-request@13.0.19:
+    dependencies:
+      '@types/http-cache-semantics': 4.2.0
+      get-stream: 9.0.1
+      http-cache-semantics: 4.2.0
+      keyv: 5.6.0
+      mimic-response: 4.0.0
+      normalize-url: 8.1.1
+      responselike: 4.0.2
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  callsites@3.1.0: {}
+
+  caniuse-lite@1.0.30001800: {}
+
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.6.2: {}
+
+  char-regex@1.0.2: {}
+
+  check-error@2.1.3: {}
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clean-stack@2.2.0: {}
+
+  clean-stack@5.3.0:
+    dependencies:
+      escape-string-regexp: 5.0.0
+
+  cli-highlight@2.1.11:
+    dependencies:
+      chalk: 4.1.2
+      highlight.js: 10.7.3
+      mz: 2.7.0
+      parse5: 5.1.1
+      parse5-htmlparser2-tree-adapter: 6.0.1
+      yargs: 16.2.2
+
+  cli-table3@0.6.5:
+    dependencies:
+      string-width: 4.2.3
+    optionalDependencies:
+      '@colors/colors': 1.5.0
+
+  cliui@7.0.4:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  cliui@9.0.1:
+    dependencies:
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+      wrap-ansi: 9.0.2
+
+  clsx@2.1.1: {}
+
+  cmdk@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):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dialog': 1.1.18(@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)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@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)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  compare-func@2.0.0:
+    dependencies:
+      array-ify: 1.0.0
+      dot-prop: 5.3.0
+
+  concat-map@0.0.1: {}
+
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
+  content-type@2.0.0: {}
+
+  conventional-changelog-angular@7.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-angular@8.3.1:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-writer@8.4.0:
+    dependencies:
+      '@simple-libs/stream-utils': 1.2.0
+      conventional-commits-filter: 5.0.0
+      handlebars: 4.7.9
+      meow: 13.2.0
+      semver: 7.8.5
+
+  conventional-commits-filter@5.0.0: {}
+
+  conventional-commits-parser@5.0.0:
+    dependencies:
+      JSONStream: 1.3.5
+      is-text-path: 2.0.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  conventional-commits-parser@6.4.0:
+    dependencies:
+      '@simple-libs/stream-utils': 1.2.0
+      meow: 13.2.0
+
+  convert-hrtime@5.0.0: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-es@3.1.1: {}
+
+  core-util-is@1.0.3: {}
+
+  cosmiconfig-typescript-loader@6.3.0(@types/node@22.20.0)(cosmiconfig@9.0.2(typescript@5.9.3))(typescript@5.9.3):
+    dependencies:
+      '@types/node': 22.20.0
+      cosmiconfig: 9.0.2(typescript@5.9.3)
+      jiti: 2.6.1
+      typescript: 5.9.3
+
+  cosmiconfig@9.0.2(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.3.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  crypto-random-string@4.0.0:
+    dependencies:
+      type-fest: 1.4.0
+
+  csstype@3.2.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  dargs@8.1.0: {}
+
+  date-fns@4.4.0: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js-light@2.5.1: {}
+
+  decompress-response@10.0.0:
+    dependencies:
+      mimic-response: 4.0.0
+
+  deep-eql@5.0.2: {}
+
+  deep-extend@0.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  delayed-stream@1.0.0: {}
+
+  detect-libc@2.1.2: {}
+
+  detect-node-es@1.1.0: {}
+
+  diff@8.0.4: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dot-prop@5.3.0:
+    dependencies:
+      is-obj: 2.0.0
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  duplexer2@0.1.4:
+    dependencies:
+      readable-stream: 2.3.8
+
+  electron-to-chromium@1.5.383: {}
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emojilib@2.4.0: {}
+
+  enhanced-resolve@5.21.6:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
+  env-ci@11.2.0:
+    dependencies:
+      execa: 8.0.1
+      java-properties: 1.0.2
+
+  env-paths@2.2.1: {}
+
+  environment@1.1.0: {}
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-object-atoms@1.1.2:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.4
+
+  es-toolkit@1.49.0: {}
+
+  esbuild@0.28.1:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.28.1
+      '@esbuild/android-arm': 0.28.1
+      '@esbuild/android-arm64': 0.28.1
+      '@esbuild/android-x64': 0.28.1
+      '@esbuild/darwin-arm64': 0.28.1
+      '@esbuild/darwin-x64': 0.28.1
+      '@esbuild/freebsd-arm64': 0.28.1
+      '@esbuild/freebsd-x64': 0.28.1
+      '@esbuild/linux-arm': 0.28.1
+      '@esbuild/linux-arm64': 0.28.1
+      '@esbuild/linux-ia32': 0.28.1
+      '@esbuild/linux-loong64': 0.28.1
+      '@esbuild/linux-mips64el': 0.28.1
+      '@esbuild/linux-ppc64': 0.28.1
+      '@esbuild/linux-riscv64': 0.28.1
+      '@esbuild/linux-s390x': 0.28.1
+      '@esbuild/linux-x64': 0.28.1
+      '@esbuild/netbsd-arm64': 0.28.1
+      '@esbuild/netbsd-x64': 0.28.1
+      '@esbuild/openbsd-arm64': 0.28.1
+      '@esbuild/openbsd-x64': 0.28.1
+      '@esbuild/openharmony-arm64': 0.28.1
+      '@esbuild/sunos-x64': 0.28.1
+      '@esbuild/win32-arm64': 0.28.1
+      '@esbuild/win32-ia32': 0.28.1
+      '@esbuild/win32-x64': 0.28.1
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  eslint-plugin-react-hooks@5.2.0(eslint@9.39.4(jiti@2.7.0)):
+    dependencies:
+      eslint: 9.39.4(jiti@2.7.0)
+
+  eslint-plugin-react-refresh@0.4.26(eslint@9.39.4(jiti@2.7.0)):
+    dependencies:
+      eslint: 9.39.4(jiti@2.7.0)
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@9.39.4(jiti@2.7.0):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.7.0))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.2
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.5
+      '@eslint/js': 9.39.4
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.8
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.9
+      ajv: 6.15.0
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.5
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.17.0
+      acorn-jsx: 5.3.2(acorn@8.17.0)
+      eslint-visitor-keys: 4.2.1
+
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  esutils@2.0.3: {}
+
+  eventemitter3@5.0.4: {}
+
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
+  expect-type@1.4.0: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.1.3: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  figures@2.0.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up-simple@1.0.1: {}
+
+  find-up@2.1.0:
+    dependencies:
+      locate-path: 2.0.0
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  find-up@7.0.0:
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+      unicorn-magic: 0.1.0
+
+  find-versions@6.0.0:
+    dependencies:
+      semver-regex: 4.0.5
+      super-regex: 1.1.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.4.2
+      keyv: 4.5.4
+
+  flatted@3.4.2: {}
+
+  form-data-encoder@4.1.0: {}
+
+  form-data@4.0.6:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.4
+      mime-types: 2.1.35
+
+  fs-extra@11.3.6:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  function-timeout@1.0.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.6.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.4
+      math-intrinsics: 1.1.0
+
+  get-nonce@1.0.1: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.2
+
+  get-stream@6.0.1: {}
+
+  get-stream@8.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
+  git-log-parser@1.2.1:
+    dependencies:
+      argv-formatter: 1.0.0
+      spawn-error-forwarder: 1.0.0
+      split2: 1.0.0
+      stream-combiner2: 1.1.1
+      through2: 2.0.5
+      traverse: 0.6.8
+
+  git-raw-commits@4.0.0:
+    dependencies:
+      dargs: 8.1.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  global-directory@4.0.1:
+    dependencies:
+      ini: 4.1.1
+
+  globals@14.0.0: {}
+
+  globals@15.15.0: {}
+
+  globby@16.2.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      fast-glob: 3.3.3
+      ignore: 7.0.5
+      is-path-inside: 4.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.4.0
+
+  goober@2.1.19(csstype@3.2.3):
+    dependencies:
+      csstype: 3.2.3
+
+  gopd@1.2.0: {}
+
+  got@14.6.6:
+    dependencies:
+      '@sindresorhus/is': 7.2.0
+      byte-counter: 0.1.0
+      cacheable-lookup: 7.0.0
+      cacheable-request: 13.0.19
+      decompress-response: 10.0.0
+      form-data-encoder: 4.1.0
+      http2-wrapper: 2.2.1
+      keyv: 5.6.0
+      lowercase-keys: 3.0.0
+      p-cancelable: 4.0.1
+      responselike: 4.0.2
+      type-fest: 4.41.0
+
+  graceful-fs@4.2.10: {}
+
+  graceful-fs@4.2.11: {}
+
+  handlebars@4.7.9:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  happy-dom@18.0.1:
+    dependencies:
+      '@types/node': 20.19.43
+      '@types/whatwg-mimetype': 3.0.2
+      whatwg-mimetype: 3.0.0
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.4:
+    dependencies:
+      function-bind: 1.1.2
+
+  highlight.js@10.7.3: {}
+
+  hook-std@4.0.0: {}
+
+  hosted-git-info@7.0.2:
+    dependencies:
+      lru-cache: 10.4.3
+
+  hosted-git-info@9.0.3:
+    dependencies:
+      lru-cache: 11.5.1
+
+  http-cache-semantics@4.2.0: {}
+
+  http-proxy-agent@9.1.0:
+    dependencies:
+      agent-base: 9.0.0
+      debug: 4.4.3
+      proxy-agent-negotiate: 1.1.0
+    transitivePeerDependencies:
+      - kerberos
+      - supports-color
+
+  http2-wrapper@2.2.1:
+    dependencies:
+      quick-lru: 5.1.1
+      resolve-alpn: 1.2.1
+
+  https-proxy-agent@9.1.0:
+    dependencies:
+      agent-base: 9.0.0
+      debug: 4.4.3
+      proxy-agent-negotiate: 1.1.0
+    transitivePeerDependencies:
+      - kerberos
+      - supports-color
+
+  human-signals@5.0.0: {}
+
+  human-signals@8.0.1: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  immer@10.2.0: {}
+
+  immer@11.1.8: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  import-from-esm@2.0.0:
+    dependencies:
+      debug: 4.4.3
+      import-meta-resolve: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  import-meta-resolve@4.2.0: {}
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  indent-string@5.0.0: {}
+
+  index-to-position@1.2.0: {}
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  ini@4.1.1: {}
+
+  input-otp@1.4.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  internmap@2.0.3: {}
+
+  is-arrayish@0.2.1: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-number@7.0.0: {}
+
+  is-obj@2.0.0: {}
+
+  is-path-inside@4.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-stream@3.0.0: {}
+
+  is-stream@4.0.1: {}
+
+  is-text-path@2.0.0:
+    dependencies:
+      text-extensions: 2.4.0
+
+  is-unicode-supported@2.1.0: {}
+
+  isarray@1.0.0: {}
+
+  isbot@5.1.44: {}
+
+  isexe@2.0.0: {}
+
+  issue-parser@7.0.2:
+    dependencies:
+      lodash.capitalize: 4.2.1
+      lodash.escaperegexp: 4.1.2
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.uniqby: 4.7.0
+
+  java-properties@1.0.2: {}
+
+  jiti@2.6.1: {}
+
+  jiti@2.7.0: {}
+
+  js-tokens@4.0.0: {}
+
+  js-tokens@9.0.1: {}
+
+  js-yaml@4.3.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-parse-better-errors@1.0.2: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json-with-bigint@3.5.8: {}
+
+  json5@2.2.3: {}
+
+  jsonfile@6.2.1:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsonparse@1.3.1: {}
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  keyv@5.6.0:
+    dependencies:
+      '@keyv/serialize': 1.1.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  lines-and-columns@1.2.4: {}
+
+  load-json-file@4.0.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      parse-json: 4.0.0
+      pify: 3.0.0
+      strip-bom: 3.0.0
+
+  locate-path@2.0.0:
+    dependencies:
+      p-locate: 2.0.0
+      path-exists: 3.0.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  locate-path@7.2.0:
+    dependencies:
+      p-locate: 6.0.0
+
+  lodash-es@4.18.1: {}
+
+  lodash.camelcase@4.3.0: {}
+
+  lodash.capitalize@4.2.1: {}
+
+  lodash.escaperegexp@4.1.2: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.isstring@4.0.1: {}
+
+  lodash.kebabcase@4.1.1: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash.mergewith@4.6.2: {}
+
+  lodash.snakecase@4.1.1: {}
+
+  lodash.startcase@4.4.0: {}
+
+  lodash.uniq@4.5.0: {}
+
+  lodash.uniqby@4.7.0: {}
+
+  lodash.upperfirst@4.3.1: {}
+
+  lodash@4.18.1: {}
+
+  loupe@3.2.1: {}
+
+  lowercase-keys@3.0.0: {}
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@11.5.1: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lucide-react@0.468.0(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  make-asynchronous@1.1.0:
+    dependencies:
+      p-event: 6.0.1
+      type-fest: 4.41.0
+      web-worker: 1.5.0
+
+  marked-terminal@7.3.0(marked@15.0.12):
+    dependencies:
+      ansi-escapes: 7.3.0
+      ansi-regex: 6.2.2
+      chalk: 5.6.2
+      cli-highlight: 2.1.11
+      cli-table3: 0.6.5
+      marked: 15.0.12
+      node-emoji: 2.2.0
+      supports-hyperlinks: 3.2.0
+
+  marked@15.0.12: {}
+
+  math-intrinsics@1.1.0: {}
+
+  meow@12.1.1: {}
+
+  meow@13.2.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime@4.1.0: {}
+
+  mimic-fn@4.0.0: {}
+
+  mimic-response@4.0.0: {}
+
+  minimatch@10.2.5:
+    dependencies:
+      brace-expansion: 5.0.7
+
+  minimatch@3.1.5:
+    dependencies:
+      brace-expansion: 1.1.15
+
+  minimist@1.2.8: {}
+
+  ms@2.1.3: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.15: {}
+
+  natural-compare@1.4.0: {}
+
+  neo-async@2.6.2: {}
+
+  nerf-dart@1.0.0: {}
+
+  next-themes@0.4.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  node-emoji@2.2.0:
+    dependencies:
+      '@sindresorhus/is': 4.6.0
+      char-regex: 1.0.2
+      emojilib: 2.4.0
+      skin-tone: 2.0.0
+
+  node-releases@2.0.50: {}
+
+  normalize-package-data@6.0.2:
+    dependencies:
+      hosted-git-info: 7.0.2
+      semver: 7.8.5
+      validate-npm-package-license: 3.0.4
+
+  normalize-package-data@8.0.0:
+    dependencies:
+      hosted-git-info: 9.0.3
+      semver: 7.8.5
+      validate-npm-package-license: 3.0.4
+
+  normalize-url@8.1.1: {}
+
+  normalize-url@9.0.1: {}
+
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
+  npm@11.18.0: {}
+
+  object-assign@4.1.1: {}
+
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  p-cancelable@4.0.1: {}
+
+  p-each-series@3.0.0: {}
+
+  p-event@6.0.1:
+    dependencies:
+      p-timeout: 6.1.4
+
+  p-filter@4.1.0:
+    dependencies:
+      p-map: 7.0.5
+
+  p-limit@1.3.0:
+    dependencies:
+      p-try: 1.0.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-limit@4.0.0:
+    dependencies:
+      yocto-queue: 1.2.2
+
+  p-locate@2.0.0:
+    dependencies:
+      p-limit: 1.3.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-locate@6.0.0:
+    dependencies:
+      p-limit: 4.0.0
+
+  p-map@7.0.5: {}
+
+  p-reduce@3.0.0: {}
+
+  p-timeout@6.1.4: {}
+
+  p-try@1.0.0: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@4.0.0:
+    dependencies:
+      error-ex: 1.3.4
+      json-parse-better-errors: 1.0.2
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-json@8.3.0:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      index-to-position: 1.2.0
+      type-fest: 4.41.0
+
+  parse-ms@4.0.0: {}
+
+  parse5-htmlparser2-tree-adapter@6.0.1:
+    dependencies:
+      parse5: 6.0.1
+
+  parse5@5.1.1: {}
+
+  parse5@6.0.1: {}
+
+  path-exists@3.0.0: {}
+
+  path-exists@4.0.0: {}
+
+  path-exists@5.0.0: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-type@4.0.0: {}
+
+  pathe@2.0.3: {}
+
+  pathval@2.0.1: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.2: {}
+
+  picomatch@4.0.4: {}
+
+  pify@3.0.0: {}
+
+  pkg-conf@2.1.0:
+    dependencies:
+      find-up: 2.1.0
+      load-json-file: 4.0.0
+
+  postcss@8.5.16:
+    dependencies:
+      nanoid: 3.3.15
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier@3.9.4: {}
+
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  process-nextick-args@2.0.1: {}
+
+  proto-list@1.2.4: {}
+
+  proxy-agent-negotiate@1.1.0: {}
+
+  punycode@2.3.1: {}
+
+  queue-microtask@1.2.3: {}
+
+  quick-lru@5.1.1: {}
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      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
+      scheduler: 0.27.0
+
+  react-hook-form@7.80.0(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+
+  react-is@19.2.7: {}
+
+  react-redux@9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.7
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      redux: 5.0.1
+
+  react-refresh@0.18.0: {}
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.7)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-remove-scroll@2.7.2(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.17)(react@19.2.7)
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.7)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.17)(react@19.2.7)
+      use-sidecar: 1.1.3(@types/react@19.2.17)(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-style-singleton@2.2.3(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.7
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react@19.2.7: {}
+
+  read-package-up@11.0.0:
+    dependencies:
+      find-up-simple: 1.0.1
+      read-pkg: 9.0.1
+      type-fest: 4.41.0
+
+  read-package-up@12.0.0:
+    dependencies:
+      find-up-simple: 1.0.1
+      read-pkg: 10.1.0
+      type-fest: 5.7.0
+
+  read-pkg@10.1.0:
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 8.0.0
+      parse-json: 8.3.0
+      type-fest: 5.7.0
+      unicorn-magic: 0.4.0
+
+  read-pkg@9.0.1:
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 6.0.2
+      parse-json: 8.3.0
+      type-fest: 4.41.0
+      unicorn-magic: 0.1.0
+
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
+  readdirp@5.0.0: {}
+
+  recharts@3.8.0(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-is@19.2.7)(react@19.2.7)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1))(react@19.2.7)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.49.0
+      eventemitter3: 5.0.4
+      immer: 10.2.0
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-is: 19.2.7
+      react-redux: 9.3.0(@types/react@19.2.17)(react@19.2.7)(redux@5.0.1)
+      reselect: 5.1.1
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.7)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  registry-auth-token@5.1.1:
+    dependencies:
+      '@pnpm/npm-conf': 3.0.3
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  reselect@5.1.1: {}
+
+  reselect@5.2.0: {}
+
+  resolve-alpn@1.2.1: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve-from@5.0.0: {}
+
+  responselike@4.0.2:
+    dependencies:
+      lowercase-keys: 3.0.0
+
+  reusify@1.1.0: {}
+
+  rollup@4.62.2:
+    dependencies:
+      '@types/estree': 1.0.9
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.62.2
+      '@rollup/rollup-android-arm64': 4.62.2
+      '@rollup/rollup-darwin-arm64': 4.62.2
+      '@rollup/rollup-darwin-x64': 4.62.2
+      '@rollup/rollup-freebsd-arm64': 4.62.2
+      '@rollup/rollup-freebsd-x64': 4.62.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.62.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.62.2
+      '@rollup/rollup-linux-arm64-gnu': 4.62.2
+      '@rollup/rollup-linux-arm64-musl': 4.62.2
+      '@rollup/rollup-linux-loong64-gnu': 4.62.2
+      '@rollup/rollup-linux-loong64-musl': 4.62.2
+      '@rollup/rollup-linux-ppc64-gnu': 4.62.2
+      '@rollup/rollup-linux-ppc64-musl': 4.62.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.62.2
+      '@rollup/rollup-linux-riscv64-musl': 4.62.2
+      '@rollup/rollup-linux-s390x-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-musl': 4.62.2
+      '@rollup/rollup-openbsd-x64': 4.62.2
+      '@rollup/rollup-openharmony-arm64': 4.62.2
+      '@rollup/rollup-win32-arm64-msvc': 4.62.2
+      '@rollup/rollup-win32-ia32-msvc': 4.62.2
+      '@rollup/rollup-win32-x64-gnu': 4.62.2
+      '@rollup/rollup-win32-x64-msvc': 4.62.2
+      fsevents: 2.3.3
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safe-buffer@5.1.2: {}
+
+  scheduler@0.27.0: {}
+
+  semantic-release@25.0.5(typescript@5.9.3):
+    dependencies:
+      '@semantic-release/commit-analyzer': 13.0.1(semantic-release@25.0.5(typescript@5.9.3))
+      '@semantic-release/error': 4.0.0
+      '@semantic-release/github': 12.0.8(semantic-release@25.0.5(typescript@5.9.3))
+      '@semantic-release/npm': 13.1.5(semantic-release@25.0.5(typescript@5.9.3))
+      '@semantic-release/release-notes-generator': 14.1.1(semantic-release@25.0.5(typescript@5.9.3))
+      aggregate-error: 5.0.0
+      cosmiconfig: 9.0.2(typescript@5.9.3)
+      debug: 4.4.3
+      env-ci: 11.2.0
+      execa: 9.6.1
+      figures: 6.1.0
+      find-versions: 6.0.0
+      get-stream: 6.0.1
+      git-log-parser: 1.2.1
+      hook-std: 4.0.0
+      hosted-git-info: 9.0.3
+      import-from-esm: 2.0.0
+      lodash-es: 4.18.1
+      marked: 15.0.12
+      marked-terminal: 7.3.0(marked@15.0.12)
+      micromatch: 4.0.8
+      p-each-series: 3.0.0
+      p-reduce: 3.0.0
+      read-package-up: 12.0.0
+      resolve-from: 5.0.0
+      semver: 7.8.5
+      signale: 1.4.0
+      yargs: 18.0.0
+    transitivePeerDependencies:
+      - kerberos
+      - supports-color
+      - typescript
+
+  semver-regex@4.0.5: {}
+
+  semver@6.3.1: {}
+
+  semver@7.8.5: {}
+
+  seroval-plugins@1.5.4(seroval@1.5.4):
+    dependencies:
+      seroval: 1.5.4
+
+  seroval@1.5.4: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  siginfo@2.0.0: {}
+
+  signal-exit@4.1.0: {}
+
+  signale@1.4.0:
+    dependencies:
+      chalk: 2.4.2
+      figures: 2.0.0
+      pkg-conf: 2.1.0
+
+  skin-tone@2.0.0:
+    dependencies:
+      unicode-emoji-modifier-base: 1.0.0
+
+  slash@5.1.0: {}
+
+  sonner@1.7.4(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  spawn-error-forwarder@1.0.0: {}
+
+  spdx-correct@3.2.0:
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.23
+
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@3.0.1:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.23
+
+  spdx-license-ids@3.0.23: {}
+
+  split2@1.0.0:
+    dependencies:
+      through2: 2.0.5
+
+  split2@4.2.0: {}
+
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
+  stream-combiner2@1.1.1:
+    dependencies:
+      duplexer2: 0.1.4
+      readable-stream: 2.3.8
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.6.0
+      strip-ansi: 7.2.0
+
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-bom@3.0.0: {}
+
+  strip-final-newline@3.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
+  strip-json-comments@2.0.1: {}
+
+  strip-json-comments@3.1.1: {}
+
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
+  super-regex@1.1.0:
+    dependencies:
+      function-timeout: 1.0.2
+      make-asynchronous: 1.1.0
+      time-span: 5.1.0
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-hyperlinks@3.2.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
+  tagged-tag@1.0.0: {}
+
+  tailwind-merge@3.6.0: {}
+
+  tailwindcss@4.3.2: {}
+
+  tapable@2.3.3: {}
+
+  temp-dir@3.0.0: {}
+
+  tempy@3.2.0:
+    dependencies:
+      is-stream: 3.0.0
+      temp-dir: 3.0.0
+      type-fest: 2.19.0
+      unique-string: 3.0.0
+
+  text-extensions@2.4.0: {}
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  through2@2.0.5:
+    dependencies:
+      readable-stream: 2.3.8
+      xtend: 4.0.2
+
+  through@2.3.8: {}
+
+  time-span@5.1.0:
+    dependencies:
+      convert-hrtime: 5.0.0
+
+  tiny-invariant@1.3.3: {}
+
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
+  tinyexec@1.2.4: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tinypool@1.1.1: {}
+
+  tinyrainbow@2.0.0: {}
+
+  tinyspy@4.0.4: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  traverse@0.6.8: {}
+
+  ts-api-utils@2.5.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  tslib@2.8.1: {}
+
+  tunnel@0.0.6: {}
+
+  tw-animate-css@1.4.0: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@1.4.0: {}
+
+  type-fest@2.19.0: {}
+
+  type-fest@4.41.0: {}
+
+  type-fest@5.7.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  typescript-eslint@8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.62.1(@typescript-eslint/parser@8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.62.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.62.1(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.7.0)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  undici-types@6.21.0: {}
+
+  undici@6.27.0: {}
+
+  undici@7.28.0: {}
+
+  unicode-emoji-modifier-base@1.0.0: {}
+
+  unicorn-magic@0.1.0: {}
+
+  unicorn-magic@0.3.0: {}
+
+  unicorn-magic@0.4.0: {}
+
+  unique-string@3.0.0:
+    dependencies:
+      crypto-random-string: 4.0.0
+
+  universal-user-agent@7.0.3: {}
+
+  universalify@2.0.1: {}
+
+  unplugin@3.3.0(esbuild@0.28.1)(rollup@4.62.2)(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)):
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      picomatch: 4.0.4
+      webpack-virtual-modules: 0.6.2
+    optionalDependencies:
+      esbuild: 0.28.1
+      rollup: 4.62.2
+      vite: 7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+
+  update-browserslist-db@1.2.3(browserslist@4.28.4):
+    dependencies:
+      browserslist: 4.28.4
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  url-join@5.0.0: {}
+
+  use-callback-ref@1.3.3(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  use-sidecar@1.1.3(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.7
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  use-sync-external-store@1.6.0(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+
+  util-deprecate@1.0.2: {}
+
+  validate-npm-package-license@3.0.4:
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+
+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  vite-node@3.2.4(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0):
+    dependencies:
+      esbuild: 0.28.1
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.16
+      rollup: 4.62.2
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 22.20.0
+      fsevents: 2.3.3
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+
+  vitest@3.2.6(@types/node@22.20.0)(happy-dom@18.0.1)(jiti@2.7.0)(lightningcss@1.32.0):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.6
+      '@vitest/mocker': 3.2.6(vite@7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0))
+      '@vitest/pretty-format': 3.2.6
+      '@vitest/runner': 3.2.6
+      '@vitest/snapshot': 3.2.6
+      '@vitest/spy': 3.2.6
+      '@vitest/utils': 3.2.6
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.4.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.17
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 7.3.6(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+      vite-node: 3.2.4(@types/node@22.20.0)(jiti@2.7.0)(lightningcss@1.32.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.20.0
+      happy-dom: 18.0.1
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  web-worker@1.5.0: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  whatwg-mimetype@3.0.0: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  word-wrap@1.2.5: {}
+
+  wordwrap@1.0.0: {}
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@9.0.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+
+  xtend@4.0.2: {}
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yargs-parser@20.2.9: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs-parser@22.0.0: {}
+
+  yargs@16.2.2:
+    dependencies:
+      cliui: 7.0.4
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 20.2.9
+
+  yargs@17.7.3:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yargs@18.0.0:
+    dependencies:
+      cliui: 9.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      string-width: 7.2.0
+      y18n: 5.0.8
+      yargs-parser: 22.0.0
+
+  yocto-queue@0.1.0: {}
+
+  yocto-queue@1.2.2: {}
+
+  yoctocolors@2.1.2: {}
+
+  zod@3.25.76: {}
+
+  zod@4.4.3: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..e9b0dad
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - 'apps/*'
+  - 'packages/*'
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..a0deba7
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./apps/web/src/*"],
+      "@evobgp/ui/components/*": ["./packages/ui/src/components/*"],
+      "@evobgp/ui/hooks/*": ["./packages/ui/src/hooks/*"],
+      "@evobgp/ui/lib/utils": ["./packages/ui/src/lib/utils.ts"]
+    }
+  }
+}
diff --git a/web/.gitignore b/web-legacy-svelte/.gitignore
similarity index 100%
rename from web/.gitignore
rename to web-legacy-svelte/.gitignore
diff --git a/web-legacy-svelte/.npmrc b/web-legacy-svelte/.npmrc
new file mode 100644
index 0000000..b6f27f1
--- /dev/null
+++ b/web-legacy-svelte/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/web/.prettierignore b/web-legacy-svelte/.prettierignore
similarity index 100%
rename from web/.prettierignore
rename to web-legacy-svelte/.prettierignore
diff --git a/web/.prettierrc b/web-legacy-svelte/.prettierrc
similarity index 100%
rename from web/.prettierrc
rename to web-legacy-svelte/.prettierrc
diff --git a/web/.vscode/extensions.json b/web-legacy-svelte/.vscode/extensions.json
similarity index 100%
rename from web/.vscode/extensions.json
rename to web-legacy-svelte/.vscode/extensions.json
diff --git a/web/.vscode/settings.json b/web-legacy-svelte/.vscode/settings.json
similarity index 100%
rename from web/.vscode/settings.json
rename to web-legacy-svelte/.vscode/settings.json
diff --git a/web/README.md b/web-legacy-svelte/README.md
similarity index 100%
rename from web/README.md
rename to web-legacy-svelte/README.md
diff --git a/web/components.json b/web-legacy-svelte/components.json
similarity index 100%
rename from web/components.json
rename to web-legacy-svelte/components.json
diff --git a/web/package-lock.json b/web-legacy-svelte/package-lock.json
similarity index 100%
rename from web/package-lock.json
rename to web-legacy-svelte/package-lock.json
diff --git a/web/package.json b/web-legacy-svelte/package.json
similarity index 100%
rename from web/package.json
rename to web-legacy-svelte/package.json
diff --git a/web/src/app.d.ts b/web-legacy-svelte/src/app.d.ts
similarity index 100%
rename from web/src/app.d.ts
rename to web-legacy-svelte/src/app.d.ts
diff --git a/web/src/app.html b/web-legacy-svelte/src/app.html
similarity index 100%
rename from web/src/app.html
rename to web-legacy-svelte/src/app.html
diff --git a/web/src/lib/api/client.ts b/web-legacy-svelte/src/lib/api/client.ts
similarity index 100%
rename from web/src/lib/api/client.ts
rename to web-legacy-svelte/src/lib/api/client.ts
diff --git a/web/src/lib/api/types.ts b/web-legacy-svelte/src/lib/api/types.ts
similarity index 100%
rename from web/src/lib/api/types.ts
rename to web-legacy-svelte/src/lib/api/types.ts
diff --git a/web/src/lib/api/version-info.ts b/web-legacy-svelte/src/lib/api/version-info.ts
similarity index 100%
rename from web/src/lib/api/version-info.ts
rename to web-legacy-svelte/src/lib/api/version-info.ts
diff --git a/web/src/lib/assets/favicon.svg b/web-legacy-svelte/src/lib/assets/favicon.svg
similarity index 100%
rename from web/src/lib/assets/favicon.svg
rename to web-legacy-svelte/src/lib/assets/favicon.svg
diff --git a/web/src/lib/components/access/AccessApiKeysCard.svelte b/web-legacy-svelte/src/lib/components/access/AccessApiKeysCard.svelte
similarity index 100%
rename from web/src/lib/components/access/AccessApiKeysCard.svelte
rename to web-legacy-svelte/src/lib/components/access/AccessApiKeysCard.svelte
diff --git a/web/src/lib/components/app/scroll-pre-block.svelte b/web-legacy-svelte/src/lib/components/app/scroll-pre-block.svelte
similarity index 100%
rename from web/src/lib/components/app/scroll-pre-block.svelte
rename to web-legacy-svelte/src/lib/components/app/scroll-pre-block.svelte
diff --git a/web/src/lib/components/directories/DirectoriesCommunitiesCard.svelte b/web-legacy-svelte/src/lib/components/directories/DirectoriesCommunitiesCard.svelte
similarity index 100%
rename from web/src/lib/components/directories/DirectoriesCommunitiesCard.svelte
rename to web-legacy-svelte/src/lib/components/directories/DirectoriesCommunitiesCard.svelte
diff --git a/web/src/lib/components/directories/DirectoriesDohProfilesCard.svelte b/web-legacy-svelte/src/lib/components/directories/DirectoriesDohProfilesCard.svelte
similarity index 100%
rename from web/src/lib/components/directories/DirectoriesDohProfilesCard.svelte
rename to web-legacy-svelte/src/lib/components/directories/DirectoriesDohProfilesCard.svelte
diff --git a/web/src/lib/components/modules/ModuleAsEntriesCard.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleAsEntriesCard.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleAsEntriesCard.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleAsEntriesCard.svelte
diff --git a/web/src/lib/components/modules/ModuleAsEntryDialog.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleAsEntryDialog.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleAsEntryDialog.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleAsEntryDialog.svelte
diff --git a/web/src/lib/components/modules/ModuleCdnSourceDialog.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleCdnSourceDialog.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleCdnSourceDialog.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleCdnSourceDialog.svelte
diff --git a/web/src/lib/components/modules/ModuleCdnSourcesCard.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleCdnSourcesCard.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleCdnSourcesCard.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleCdnSourcesCard.svelte
diff --git a/web/src/lib/components/modules/ModuleCreateDialog.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleCreateDialog.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleCreateDialog.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleCreateDialog.svelte
diff --git a/web/src/lib/components/modules/ModuleDetailHeader.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleDetailHeader.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleDetailHeader.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleDetailHeader.svelte
diff --git a/web/src/lib/components/modules/ModuleDomainEntriesCard.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleDomainEntriesCard.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleDomainEntriesCard.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleDomainEntriesCard.svelte
diff --git a/web/src/lib/components/modules/ModuleDomainEntryDialog.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleDomainEntryDialog.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleDomainEntryDialog.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleDomainEntryDialog.svelte
diff --git a/web/src/lib/components/modules/ModuleEditDialog.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleEditDialog.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleEditDialog.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleEditDialog.svelte
diff --git a/web/src/lib/components/modules/ModuleIpRangeEntryDialog.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleIpRangeEntryDialog.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleIpRangeEntryDialog.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleIpRangeEntryDialog.svelte
diff --git a/web/src/lib/components/modules/ModuleIpRangesCard.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleIpRangesCard.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleIpRangesCard.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleIpRangesCard.svelte
diff --git a/web/src/lib/components/modules/ModuleKpiCards.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleKpiCards.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleKpiCards.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleKpiCards.svelte
diff --git a/web/src/lib/components/modules/ModuleSummaryCard.svelte b/web-legacy-svelte/src/lib/components/modules/ModuleSummaryCard.svelte
similarity index 100%
rename from web/src/lib/components/modules/ModuleSummaryCard.svelte
rename to web-legacy-svelte/src/lib/components/modules/ModuleSummaryCard.svelte
diff --git a/web/src/lib/components/modules/module-helpers.ts b/web-legacy-svelte/src/lib/components/modules/module-helpers.ts
similarity index 100%
rename from web/src/lib/components/modules/module-helpers.ts
rename to web-legacy-svelte/src/lib/components/modules/module-helpers.ts
diff --git a/web/src/lib/components/monitoring/MaintenancePoliciesTab.svelte b/web-legacy-svelte/src/lib/components/monitoring/MaintenancePoliciesTab.svelte
similarity index 100%
rename from web/src/lib/components/monitoring/MaintenancePoliciesTab.svelte
rename to web-legacy-svelte/src/lib/components/monitoring/MaintenancePoliciesTab.svelte
diff --git a/web/src/lib/components/monitoring/MonitoringPostgresTab.svelte b/web-legacy-svelte/src/lib/components/monitoring/MonitoringPostgresTab.svelte
similarity index 100%
rename from web/src/lib/components/monitoring/MonitoringPostgresTab.svelte
rename to web-legacy-svelte/src/lib/components/monitoring/MonitoringPostgresTab.svelte
diff --git a/web/src/lib/components/monitoring/RuntimeLogsTab.svelte b/web-legacy-svelte/src/lib/components/monitoring/RuntimeLogsTab.svelte
similarity index 100%
rename from web/src/lib/components/monitoring/RuntimeLogsTab.svelte
rename to web-legacy-svelte/src/lib/components/monitoring/RuntimeLogsTab.svelte
diff --git a/web/src/lib/components/network/NetworkAutoRefreshToggle.svelte b/web-legacy-svelte/src/lib/components/network/NetworkAutoRefreshToggle.svelte
similarity index 100%
rename from web/src/lib/components/network/NetworkAutoRefreshToggle.svelte
rename to web-legacy-svelte/src/lib/components/network/NetworkAutoRefreshToggle.svelte
diff --git a/web/src/lib/components/network/NetworkBirdSettingsSummaryCard.svelte b/web-legacy-svelte/src/lib/components/network/NetworkBirdSettingsSummaryCard.svelte
similarity index 100%
rename from web/src/lib/components/network/NetworkBirdSettingsSummaryCard.svelte
rename to web-legacy-svelte/src/lib/components/network/NetworkBirdSettingsSummaryCard.svelte
diff --git a/web/src/lib/components/network/NetworkOverviewTab.svelte b/web-legacy-svelte/src/lib/components/network/NetworkOverviewTab.svelte
similarity index 100%
rename from web/src/lib/components/network/NetworkOverviewTab.svelte
rename to web-legacy-svelte/src/lib/components/network/NetworkOverviewTab.svelte
diff --git a/web/src/lib/components/network/NetworkPeersCard.svelte b/web-legacy-svelte/src/lib/components/network/NetworkPeersCard.svelte
similarity index 100%
rename from web/src/lib/components/network/NetworkPeersCard.svelte
rename to web-legacy-svelte/src/lib/components/network/NetworkPeersCard.svelte
diff --git a/web/src/lib/components/network/NetworkSpeakerDetailSheet.svelte b/web-legacy-svelte/src/lib/components/network/NetworkSpeakerDetailSheet.svelte
similarity index 100%
rename from web/src/lib/components/network/NetworkSpeakerDetailSheet.svelte
rename to web-legacy-svelte/src/lib/components/network/NetworkSpeakerDetailSheet.svelte
diff --git a/web/src/lib/components/network/NetworkSpeakerStatusCard.svelte b/web-legacy-svelte/src/lib/components/network/NetworkSpeakerStatusCard.svelte
similarity index 100%
rename from web/src/lib/components/network/NetworkSpeakerStatusCard.svelte
rename to web-legacy-svelte/src/lib/components/network/NetworkSpeakerStatusCard.svelte
diff --git a/web/src/lib/components/network/NetworkSpeakersCard.svelte b/web-legacy-svelte/src/lib/components/network/NetworkSpeakersCard.svelte
similarity index 100%
rename from web/src/lib/components/network/NetworkSpeakersCard.svelte
rename to web-legacy-svelte/src/lib/components/network/NetworkSpeakersCard.svelte
diff --git a/web/src/lib/components/operations/OperationsDiffTab.svelte b/web-legacy-svelte/src/lib/components/operations/OperationsDiffTab.svelte
similarity index 100%
rename from web/src/lib/components/operations/OperationsDiffTab.svelte
rename to web-legacy-svelte/src/lib/components/operations/OperationsDiffTab.svelte
diff --git a/web/src/lib/components/operations/OperationsJobsFilters.svelte b/web-legacy-svelte/src/lib/components/operations/OperationsJobsFilters.svelte
similarity index 100%
rename from web/src/lib/components/operations/OperationsJobsFilters.svelte
rename to web-legacy-svelte/src/lib/components/operations/OperationsJobsFilters.svelte
diff --git a/web/src/lib/components/operations/OperationsJobsTab.svelte b/web-legacy-svelte/src/lib/components/operations/OperationsJobsTab.svelte
similarity index 100%
rename from web/src/lib/components/operations/OperationsJobsTab.svelte
rename to web-legacy-svelte/src/lib/components/operations/OperationsJobsTab.svelte
diff --git a/web/src/lib/components/operations/OperationsQuickActions.svelte b/web-legacy-svelte/src/lib/components/operations/OperationsQuickActions.svelte
similarity index 100%
rename from web/src/lib/components/operations/OperationsQuickActions.svelte
rename to web-legacy-svelte/src/lib/components/operations/OperationsQuickActions.svelte
diff --git a/web/src/lib/components/operations/OperationsRevisionsTab.svelte b/web-legacy-svelte/src/lib/components/operations/OperationsRevisionsTab.svelte
similarity index 100%
rename from web/src/lib/components/operations/OperationsRevisionsTab.svelte
rename to web-legacy-svelte/src/lib/components/operations/OperationsRevisionsTab.svelte
diff --git a/web/src/lib/components/operations/job-report-columns.ts b/web-legacy-svelte/src/lib/components/operations/job-report-columns.ts
similarity index 100%
rename from web/src/lib/components/operations/job-report-columns.ts
rename to web-legacy-svelte/src/lib/components/operations/job-report-columns.ts
diff --git a/web/src/lib/components/operations/job-report-table-block.svelte b/web-legacy-svelte/src/lib/components/operations/job-report-table-block.svelte
similarity index 100%
rename from web/src/lib/components/operations/job-report-table-block.svelte
rename to web-legacy-svelte/src/lib/components/operations/job-report-table-block.svelte
diff --git a/web/src/lib/components/operations/types.ts b/web-legacy-svelte/src/lib/components/operations/types.ts
similarity index 100%
rename from web/src/lib/components/operations/types.ts
rename to web-legacy-svelte/src/lib/components/operations/types.ts
diff --git a/web/src/lib/components/overview/OverviewNetworkStatusCard.svelte b/web-legacy-svelte/src/lib/components/overview/OverviewNetworkStatusCard.svelte
similarity index 100%
rename from web/src/lib/components/overview/OverviewNetworkStatusCard.svelte
rename to web-legacy-svelte/src/lib/components/overview/OverviewNetworkStatusCard.svelte
diff --git a/web/src/lib/components/overview/OverviewRecentJobsCard.svelte b/web-legacy-svelte/src/lib/components/overview/OverviewRecentJobsCard.svelte
similarity index 100%
rename from web/src/lib/components/overview/OverviewRecentJobsCard.svelte
rename to web-legacy-svelte/src/lib/components/overview/OverviewRecentJobsCard.svelte
diff --git a/web/src/lib/components/overview/OverviewRecentRevisionsCard.svelte b/web-legacy-svelte/src/lib/components/overview/OverviewRecentRevisionsCard.svelte
similarity index 100%
rename from web/src/lib/components/overview/OverviewRecentRevisionsCard.svelte
rename to web-legacy-svelte/src/lib/components/overview/OverviewRecentRevisionsCard.svelte
diff --git a/web/src/lib/components/tenant-settings/TenantAdditionalSettingsCard.svelte b/web-legacy-svelte/src/lib/components/tenant-settings/TenantAdditionalSettingsCard.svelte
similarity index 100%
rename from web/src/lib/components/tenant-settings/TenantAdditionalSettingsCard.svelte
rename to web-legacy-svelte/src/lib/components/tenant-settings/TenantAdditionalSettingsCard.svelte
diff --git a/web/src/lib/components/tenant-settings/TenantBirdSettingsCard.svelte b/web-legacy-svelte/src/lib/components/tenant-settings/TenantBirdSettingsCard.svelte
similarity index 100%
rename from web/src/lib/components/tenant-settings/TenantBirdSettingsCard.svelte
rename to web-legacy-svelte/src/lib/components/tenant-settings/TenantBirdSettingsCard.svelte
diff --git a/web/src/lib/components/tenant-settings/TenantRevisionSettingsCard.svelte b/web-legacy-svelte/src/lib/components/tenant-settings/TenantRevisionSettingsCard.svelte
similarity index 100%
rename from web/src/lib/components/tenant-settings/TenantRevisionSettingsCard.svelte
rename to web-legacy-svelte/src/lib/components/tenant-settings/TenantRevisionSettingsCard.svelte
diff --git a/web/src/lib/components/tenant-settings/TenantRuntimeLogsSettingsCard.svelte b/web-legacy-svelte/src/lib/components/tenant-settings/TenantRuntimeLogsSettingsCard.svelte
similarity index 100%
rename from web/src/lib/components/tenant-settings/TenantRuntimeLogsSettingsCard.svelte
rename to web-legacy-svelte/src/lib/components/tenant-settings/TenantRuntimeLogsSettingsCard.svelte
diff --git a/web/src/lib/components/tenant-settings/TenantSettingsPage.svelte b/web-legacy-svelte/src/lib/components/tenant-settings/TenantSettingsPage.svelte
similarity index 100%
rename from web/src/lib/components/tenant-settings/TenantSettingsPage.svelte
rename to web-legacy-svelte/src/lib/components/tenant-settings/TenantSettingsPage.svelte
diff --git a/web/src/lib/components/ui/alert-dialog/index.ts b/web-legacy-svelte/src/lib/components/ui/alert-dialog/index.ts
similarity index 100%
rename from web/src/lib/components/ui/alert-dialog/index.ts
rename to web-legacy-svelte/src/lib/components/ui/alert-dialog/index.ts
diff --git a/web/src/lib/components/ui/alert/index.ts b/web-legacy-svelte/src/lib/components/ui/alert/index.ts
similarity index 100%
rename from web/src/lib/components/ui/alert/index.ts
rename to web-legacy-svelte/src/lib/components/ui/alert/index.ts
diff --git a/web/src/lib/components/ui/badge/index.ts b/web-legacy-svelte/src/lib/components/ui/badge/index.ts
similarity index 100%
rename from web/src/lib/components/ui/badge/index.ts
rename to web-legacy-svelte/src/lib/components/ui/badge/index.ts
diff --git a/web/src/lib/components/ui/button/index.ts b/web-legacy-svelte/src/lib/components/ui/button/index.ts
similarity index 100%
rename from web/src/lib/components/ui/button/index.ts
rename to web-legacy-svelte/src/lib/components/ui/button/index.ts
diff --git a/web/src/lib/components/ui/card/index.ts b/web-legacy-svelte/src/lib/components/ui/card/index.ts
similarity index 100%
rename from web/src/lib/components/ui/card/index.ts
rename to web-legacy-svelte/src/lib/components/ui/card/index.ts
diff --git a/web/src/lib/components/ui/checkbox/index.ts b/web-legacy-svelte/src/lib/components/ui/checkbox/index.ts
similarity index 100%
rename from web/src/lib/components/ui/checkbox/index.ts
rename to web-legacy-svelte/src/lib/components/ui/checkbox/index.ts
diff --git a/web/src/lib/components/ui/data-table/index.ts b/web-legacy-svelte/src/lib/components/ui/data-table/index.ts
similarity index 100%
rename from web/src/lib/components/ui/data-table/index.ts
rename to web-legacy-svelte/src/lib/components/ui/data-table/index.ts
diff --git a/web/src/lib/components/ui/dialog/index.ts b/web-legacy-svelte/src/lib/components/ui/dialog/index.ts
similarity index 100%
rename from web/src/lib/components/ui/dialog/index.ts
rename to web-legacy-svelte/src/lib/components/ui/dialog/index.ts
diff --git a/web/src/lib/components/ui/dropdown-menu/index.ts b/web-legacy-svelte/src/lib/components/ui/dropdown-menu/index.ts
similarity index 100%
rename from web/src/lib/components/ui/dropdown-menu/index.ts
rename to web-legacy-svelte/src/lib/components/ui/dropdown-menu/index.ts
diff --git a/web/src/lib/components/ui/form/index.ts b/web-legacy-svelte/src/lib/components/ui/form/index.ts
similarity index 100%
rename from web/src/lib/components/ui/form/index.ts
rename to web-legacy-svelte/src/lib/components/ui/form/index.ts
diff --git a/web/src/lib/components/ui/input/index.ts b/web-legacy-svelte/src/lib/components/ui/input/index.ts
similarity index 100%
rename from web/src/lib/components/ui/input/index.ts
rename to web-legacy-svelte/src/lib/components/ui/input/index.ts
diff --git a/web/src/lib/components/ui/label/index.ts b/web-legacy-svelte/src/lib/components/ui/label/index.ts
similarity index 100%
rename from web/src/lib/components/ui/label/index.ts
rename to web-legacy-svelte/src/lib/components/ui/label/index.ts
diff --git a/web/src/lib/components/ui/popover/index.ts b/web-legacy-svelte/src/lib/components/ui/popover/index.ts
similarity index 100%
rename from web/src/lib/components/ui/popover/index.ts
rename to web-legacy-svelte/src/lib/components/ui/popover/index.ts
diff --git a/web/src/lib/components/ui/scroll-area/index.ts b/web-legacy-svelte/src/lib/components/ui/scroll-area/index.ts
similarity index 100%
rename from web/src/lib/components/ui/scroll-area/index.ts
rename to web-legacy-svelte/src/lib/components/ui/scroll-area/index.ts
diff --git a/web/src/lib/components/ui/select/index.ts b/web-legacy-svelte/src/lib/components/ui/select/index.ts
similarity index 100%
rename from web/src/lib/components/ui/select/index.ts
rename to web-legacy-svelte/src/lib/components/ui/select/index.ts
diff --git a/web/src/lib/components/ui/separator/index.ts b/web-legacy-svelte/src/lib/components/ui/separator/index.ts
similarity index 100%
rename from web/src/lib/components/ui/separator/index.ts
rename to web-legacy-svelte/src/lib/components/ui/separator/index.ts
diff --git a/web/src/lib/components/ui/sheet/index.ts b/web-legacy-svelte/src/lib/components/ui/sheet/index.ts
similarity index 100%
rename from web/src/lib/components/ui/sheet/index.ts
rename to web-legacy-svelte/src/lib/components/ui/sheet/index.ts
diff --git a/web/src/lib/components/ui/skeleton/index.ts b/web-legacy-svelte/src/lib/components/ui/skeleton/index.ts
similarity index 100%
rename from web/src/lib/components/ui/skeleton/index.ts
rename to web-legacy-svelte/src/lib/components/ui/skeleton/index.ts
diff --git a/web/src/lib/components/ui/switch/index.ts b/web-legacy-svelte/src/lib/components/ui/switch/index.ts
similarity index 100%
rename from web/src/lib/components/ui/switch/index.ts
rename to web-legacy-svelte/src/lib/components/ui/switch/index.ts
diff --git a/web/src/lib/components/ui/table/index.ts b/web-legacy-svelte/src/lib/components/ui/table/index.ts
similarity index 100%
rename from web/src/lib/components/ui/table/index.ts
rename to web-legacy-svelte/src/lib/components/ui/table/index.ts
diff --git a/web/src/lib/components/ui/tabs/index.ts b/web-legacy-svelte/src/lib/components/ui/tabs/index.ts
similarity index 100%
rename from web/src/lib/components/ui/tabs/index.ts
rename to web-legacy-svelte/src/lib/components/ui/tabs/index.ts
diff --git a/web/src/lib/components/ui/textarea/index.ts b/web-legacy-svelte/src/lib/components/ui/textarea/index.ts
similarity index 100%
rename from web/src/lib/components/ui/textarea/index.ts
rename to web-legacy-svelte/src/lib/components/ui/textarea/index.ts
diff --git a/web/src/lib/components/ui/tooltip/index.ts b/web-legacy-svelte/src/lib/components/ui/tooltip/index.ts
similarity index 100%
rename from web/src/lib/components/ui/tooltip/index.ts
rename to web-legacy-svelte/src/lib/components/ui/tooltip/index.ts
diff --git a/web/src/lib/dialog-layout.ts b/web-legacy-svelte/src/lib/dialog-layout.ts
similarity index 100%
rename from web/src/lib/dialog-layout.ts
rename to web-legacy-svelte/src/lib/dialog-layout.ts
diff --git a/web/src/lib/index.ts b/web-legacy-svelte/src/lib/index.ts
similarity index 100%
rename from web/src/lib/index.ts
rename to web-legacy-svelte/src/lib/index.ts
diff --git a/web/src/lib/maintenance/policy-api.ts b/web-legacy-svelte/src/lib/maintenance/policy-api.ts
similarity index 100%
rename from web/src/lib/maintenance/policy-api.ts
rename to web-legacy-svelte/src/lib/maintenance/policy-api.ts
diff --git a/web/src/lib/maintenance/policy-presets.ts b/web-legacy-svelte/src/lib/maintenance/policy-presets.ts
similarity index 100%
rename from web/src/lib/maintenance/policy-presets.ts
rename to web-legacy-svelte/src/lib/maintenance/policy-presets.ts
diff --git a/web/src/lib/maintenance/policy-schedule.ts b/web-legacy-svelte/src/lib/maintenance/policy-schedule.ts
similarity index 100%
rename from web/src/lib/maintenance/policy-schedule.ts
rename to web-legacy-svelte/src/lib/maintenance/policy-schedule.ts
diff --git a/web/src/lib/maintenance/policy.schema.ts b/web-legacy-svelte/src/lib/maintenance/policy.schema.ts
similarity index 100%
rename from web/src/lib/maintenance/policy.schema.ts
rename to web-legacy-svelte/src/lib/maintenance/policy.schema.ts
diff --git a/web/src/lib/modules/display.ts b/web-legacy-svelte/src/lib/modules/display.ts
similarity index 100%
rename from web/src/lib/modules/display.ts
rename to web-legacy-svelte/src/lib/modules/display.ts
diff --git a/web/src/lib/monitoring/postgres.ts b/web-legacy-svelte/src/lib/monitoring/postgres.ts
similarity index 100%
rename from web/src/lib/monitoring/postgres.ts
rename to web-legacy-svelte/src/lib/monitoring/postgres.ts
diff --git a/web/src/lib/monitoring/status.ts b/web-legacy-svelte/src/lib/monitoring/status.ts
similarity index 100%
rename from web/src/lib/monitoring/status.ts
rename to web-legacy-svelte/src/lib/monitoring/status.ts
diff --git a/web/src/lib/network/network-metrics.ts b/web-legacy-svelte/src/lib/network/network-metrics.ts
similarity index 100%
rename from web/src/lib/network/network-metrics.ts
rename to web-legacy-svelte/src/lib/network/network-metrics.ts
diff --git a/web/src/lib/operations/job-kind-label.ts b/web-legacy-svelte/src/lib/operations/job-kind-label.ts
similarity index 100%
rename from web/src/lib/operations/job-kind-label.ts
rename to web-legacy-svelte/src/lib/operations/job-kind-label.ts
diff --git a/web/src/lib/runtime-logs/runtime-logs-api.ts b/web-legacy-svelte/src/lib/runtime-logs/runtime-logs-api.ts
similarity index 100%
rename from web/src/lib/runtime-logs/runtime-logs-api.ts
rename to web-legacy-svelte/src/lib/runtime-logs/runtime-logs-api.ts
diff --git a/web/src/lib/runtime-logs/runtime-logs-auto-api.ts b/web-legacy-svelte/src/lib/runtime-logs/runtime-logs-auto-api.ts
similarity index 100%
rename from web/src/lib/runtime-logs/runtime-logs-auto-api.ts
rename to web-legacy-svelte/src/lib/runtime-logs/runtime-logs-auto-api.ts
diff --git a/web/src/lib/settings/bird-settings.schema.ts b/web-legacy-svelte/src/lib/settings/bird-settings.schema.ts
similarity index 100%
rename from web/src/lib/settings/bird-settings.schema.ts
rename to web-legacy-svelte/src/lib/settings/bird-settings.schema.ts
diff --git a/web/src/lib/settings/ip-validation.ts b/web-legacy-svelte/src/lib/settings/ip-validation.ts
similarity index 100%
rename from web/src/lib/settings/ip-validation.ts
rename to web-legacy-svelte/src/lib/settings/ip-validation.ts
diff --git a/web/src/lib/settings/revision-prune-api.ts b/web-legacy-svelte/src/lib/settings/revision-prune-api.ts
similarity index 100%
rename from web/src/lib/settings/revision-prune-api.ts
rename to web-legacy-svelte/src/lib/settings/revision-prune-api.ts
diff --git a/web/src/lib/settings/revision-settings.schema.ts b/web-legacy-svelte/src/lib/settings/revision-settings.schema.ts
similarity index 100%
rename from web/src/lib/settings/revision-settings.schema.ts
rename to web-legacy-svelte/src/lib/settings/revision-settings.schema.ts
diff --git a/web/src/lib/settings/runtime-logs-settings.schema.ts b/web-legacy-svelte/src/lib/settings/runtime-logs-settings.schema.ts
similarity index 100%
rename from web/src/lib/settings/runtime-logs-settings.schema.ts
rename to web-legacy-svelte/src/lib/settings/runtime-logs-settings.schema.ts
diff --git a/web/src/lib/settings/settings-api.ts b/web-legacy-svelte/src/lib/settings/settings-api.ts
similarity index 100%
rename from web/src/lib/settings/settings-api.ts
rename to web-legacy-svelte/src/lib/settings/settings-api.ts
diff --git a/web/src/lib/settings/settings-known-keys.ts b/web-legacy-svelte/src/lib/settings/settings-known-keys.ts
similarity index 100%
rename from web/src/lib/settings/settings-known-keys.ts
rename to web-legacy-svelte/src/lib/settings/settings-known-keys.ts
diff --git a/web/src/lib/settings/settings-known.schema.ts b/web-legacy-svelte/src/lib/settings/settings-known.schema.ts
similarity index 100%
rename from web/src/lib/settings/settings-known.schema.ts
rename to web-legacy-svelte/src/lib/settings/settings-known.schema.ts
diff --git a/web/src/lib/sort-prefixes.ts b/web-legacy-svelte/src/lib/sort-prefixes.ts
similarity index 100%
rename from web/src/lib/sort-prefixes.ts
rename to web-legacy-svelte/src/lib/sort-prefixes.ts
diff --git a/web/src/lib/theme-preferences.svelte.ts b/web-legacy-svelte/src/lib/theme-preferences.svelte.ts
similarity index 100%
rename from web/src/lib/theme-preferences.svelte.ts
rename to web-legacy-svelte/src/lib/theme-preferences.svelte.ts
diff --git a/web/src/lib/theme.ts b/web-legacy-svelte/src/lib/theme.ts
similarity index 100%
rename from web/src/lib/theme.ts
rename to web-legacy-svelte/src/lib/theme.ts
diff --git a/web/src/lib/ui-labels.ts b/web-legacy-svelte/src/lib/ui-labels.ts
similarity index 100%
rename from web/src/lib/ui-labels.ts
rename to web-legacy-svelte/src/lib/ui-labels.ts
diff --git a/web/src/lib/ui/app/layout/app-layout.svelte b/web-legacy-svelte/src/lib/ui/app/layout/app-layout.svelte
similarity index 100%
rename from web/src/lib/ui/app/layout/app-layout.svelte
rename to web-legacy-svelte/src/lib/ui/app/layout/app-layout.svelte
diff --git a/web/src/lib/ui/app/layout/app-mobile-nav.svelte b/web-legacy-svelte/src/lib/ui/app/layout/app-mobile-nav.svelte
similarity index 100%
rename from web/src/lib/ui/app/layout/app-mobile-nav.svelte
rename to web-legacy-svelte/src/lib/ui/app/layout/app-mobile-nav.svelte
diff --git a/web/src/lib/ui/app/layout/app-nav-links.svelte b/web-legacy-svelte/src/lib/ui/app/layout/app-nav-links.svelte
similarity index 100%
rename from web/src/lib/ui/app/layout/app-nav-links.svelte
rename to web-legacy-svelte/src/lib/ui/app/layout/app-nav-links.svelte
diff --git a/web/src/lib/ui/app/layout/app-sidebar.svelte b/web-legacy-svelte/src/lib/ui/app/layout/app-sidebar.svelte
similarity index 100%
rename from web/src/lib/ui/app/layout/app-sidebar.svelte
rename to web-legacy-svelte/src/lib/ui/app/layout/app-sidebar.svelte
diff --git a/web/src/lib/ui/app/layout/app-topbar.svelte b/web-legacy-svelte/src/lib/ui/app/layout/app-topbar.svelte
similarity index 100%
rename from web/src/lib/ui/app/layout/app-topbar.svelte
rename to web-legacy-svelte/src/lib/ui/app/layout/app-topbar.svelte
diff --git a/web/src/lib/ui/app/layout/app-version.svelte b/web-legacy-svelte/src/lib/ui/app/layout/app-version.svelte
similarity index 100%
rename from web/src/lib/ui/app/layout/app-version.svelte
rename to web-legacy-svelte/src/lib/ui/app/layout/app-version.svelte
diff --git a/web/src/lib/ui/app/layout/nav.ts b/web-legacy-svelte/src/lib/ui/app/layout/nav.ts
similarity index 100%
rename from web/src/lib/ui/app/layout/nav.ts
rename to web-legacy-svelte/src/lib/ui/app/layout/nav.ts
diff --git a/web/src/lib/ui/app/layout/theme-menu.svelte b/web-legacy-svelte/src/lib/ui/app/layout/theme-menu.svelte
similarity index 100%
rename from web/src/lib/ui/app/layout/theme-menu.svelte
rename to web-legacy-svelte/src/lib/ui/app/layout/theme-menu.svelte
diff --git a/web/src/lib/ui/app/page-header/page-header.svelte b/web-legacy-svelte/src/lib/ui/app/page-header/page-header.svelte
similarity index 100%
rename from web/src/lib/ui/app/page-header/page-header.svelte
rename to web-legacy-svelte/src/lib/ui/app/page-header/page-header.svelte
diff --git a/web/src/lib/ui/app/toast.ts b/web-legacy-svelte/src/lib/ui/app/toast.ts
similarity index 100%
rename from web/src/lib/ui/app/toast.ts
rename to web-legacy-svelte/src/lib/ui/app/toast.ts
diff --git a/web/src/lib/ui/app/tokens.md b/web-legacy-svelte/src/lib/ui/app/tokens.md
similarity index 100%
rename from web/src/lib/ui/app/tokens.md
rename to web-legacy-svelte/src/lib/ui/app/tokens.md
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-action.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-action.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-action.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-action.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-cancel.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-cancel.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-cancel.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-cancel.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-content.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-content.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-description.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-description.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-description.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-description.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-footer.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-footer.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-footer.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-footer.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-header.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-header.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-header.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-header.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-media.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-media.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-media.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-media.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-overlay.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-overlay.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-overlay.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-overlay.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-portal.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-portal.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-portal.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-portal.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-title.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-title.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-title.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-title.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog-trigger.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/alert-dialog.svelte b/web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/alert-dialog.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/alert-dialog.svelte
diff --git a/web/src/lib/ui/core/alert-dialog/index.ts b/web-legacy-svelte/src/lib/ui/core/alert-dialog/index.ts
similarity index 100%
rename from web/src/lib/ui/core/alert-dialog/index.ts
rename to web-legacy-svelte/src/lib/ui/core/alert-dialog/index.ts
diff --git a/web/src/lib/ui/core/alert/alert-action.svelte b/web-legacy-svelte/src/lib/ui/core/alert/alert-action.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert/alert-action.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert/alert-action.svelte
diff --git a/web/src/lib/ui/core/alert/alert-description.svelte b/web-legacy-svelte/src/lib/ui/core/alert/alert-description.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert/alert-description.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert/alert-description.svelte
diff --git a/web/src/lib/ui/core/alert/alert-title.svelte b/web-legacy-svelte/src/lib/ui/core/alert/alert-title.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert/alert-title.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert/alert-title.svelte
diff --git a/web/src/lib/ui/core/alert/alert.svelte b/web-legacy-svelte/src/lib/ui/core/alert/alert.svelte
similarity index 100%
rename from web/src/lib/ui/core/alert/alert.svelte
rename to web-legacy-svelte/src/lib/ui/core/alert/alert.svelte
diff --git a/web/src/lib/ui/core/alert/index.ts b/web-legacy-svelte/src/lib/ui/core/alert/index.ts
similarity index 100%
rename from web/src/lib/ui/core/alert/index.ts
rename to web-legacy-svelte/src/lib/ui/core/alert/index.ts
diff --git a/web/src/lib/ui/core/badge/badge.svelte b/web-legacy-svelte/src/lib/ui/core/badge/badge.svelte
similarity index 100%
rename from web/src/lib/ui/core/badge/badge.svelte
rename to web-legacy-svelte/src/lib/ui/core/badge/badge.svelte
diff --git a/web/src/lib/ui/core/badge/index.ts b/web-legacy-svelte/src/lib/ui/core/badge/index.ts
similarity index 100%
rename from web/src/lib/ui/core/badge/index.ts
rename to web-legacy-svelte/src/lib/ui/core/badge/index.ts
diff --git a/web/src/lib/ui/core/button/button.svelte b/web-legacy-svelte/src/lib/ui/core/button/button.svelte
similarity index 100%
rename from web/src/lib/ui/core/button/button.svelte
rename to web-legacy-svelte/src/lib/ui/core/button/button.svelte
diff --git a/web/src/lib/ui/core/button/index.ts b/web-legacy-svelte/src/lib/ui/core/button/index.ts
similarity index 100%
rename from web/src/lib/ui/core/button/index.ts
rename to web-legacy-svelte/src/lib/ui/core/button/index.ts
diff --git a/web/src/lib/ui/core/card/card-action.svelte b/web-legacy-svelte/src/lib/ui/core/card/card-action.svelte
similarity index 100%
rename from web/src/lib/ui/core/card/card-action.svelte
rename to web-legacy-svelte/src/lib/ui/core/card/card-action.svelte
diff --git a/web/src/lib/ui/core/card/card-content.svelte b/web-legacy-svelte/src/lib/ui/core/card/card-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/card/card-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/card/card-content.svelte
diff --git a/web/src/lib/ui/core/card/card-description.svelte b/web-legacy-svelte/src/lib/ui/core/card/card-description.svelte
similarity index 100%
rename from web/src/lib/ui/core/card/card-description.svelte
rename to web-legacy-svelte/src/lib/ui/core/card/card-description.svelte
diff --git a/web/src/lib/ui/core/card/card-footer.svelte b/web-legacy-svelte/src/lib/ui/core/card/card-footer.svelte
similarity index 100%
rename from web/src/lib/ui/core/card/card-footer.svelte
rename to web-legacy-svelte/src/lib/ui/core/card/card-footer.svelte
diff --git a/web/src/lib/ui/core/card/card-header.svelte b/web-legacy-svelte/src/lib/ui/core/card/card-header.svelte
similarity index 100%
rename from web/src/lib/ui/core/card/card-header.svelte
rename to web-legacy-svelte/src/lib/ui/core/card/card-header.svelte
diff --git a/web/src/lib/ui/core/card/card-title.svelte b/web-legacy-svelte/src/lib/ui/core/card/card-title.svelte
similarity index 100%
rename from web/src/lib/ui/core/card/card-title.svelte
rename to web-legacy-svelte/src/lib/ui/core/card/card-title.svelte
diff --git a/web/src/lib/ui/core/card/card.svelte b/web-legacy-svelte/src/lib/ui/core/card/card.svelte
similarity index 100%
rename from web/src/lib/ui/core/card/card.svelte
rename to web-legacy-svelte/src/lib/ui/core/card/card.svelte
diff --git a/web/src/lib/ui/core/card/index.ts b/web-legacy-svelte/src/lib/ui/core/card/index.ts
similarity index 100%
rename from web/src/lib/ui/core/card/index.ts
rename to web-legacy-svelte/src/lib/ui/core/card/index.ts
diff --git a/web/src/lib/ui/core/checkbox/checkbox.svelte b/web-legacy-svelte/src/lib/ui/core/checkbox/checkbox.svelte
similarity index 100%
rename from web/src/lib/ui/core/checkbox/checkbox.svelte
rename to web-legacy-svelte/src/lib/ui/core/checkbox/checkbox.svelte
diff --git a/web/src/lib/ui/core/checkbox/index.ts b/web-legacy-svelte/src/lib/ui/core/checkbox/index.ts
similarity index 100%
rename from web/src/lib/ui/core/checkbox/index.ts
rename to web-legacy-svelte/src/lib/ui/core/checkbox/index.ts
diff --git a/web/src/lib/ui/core/data-table/data-table.svelte.ts b/web-legacy-svelte/src/lib/ui/core/data-table/data-table.svelte.ts
similarity index 100%
rename from web/src/lib/ui/core/data-table/data-table.svelte.ts
rename to web-legacy-svelte/src/lib/ui/core/data-table/data-table.svelte.ts
diff --git a/web/src/lib/ui/core/data-table/flex-render.svelte b/web-legacy-svelte/src/lib/ui/core/data-table/flex-render.svelte
similarity index 100%
rename from web/src/lib/ui/core/data-table/flex-render.svelte
rename to web-legacy-svelte/src/lib/ui/core/data-table/flex-render.svelte
diff --git a/web/src/lib/ui/core/data-table/index.ts b/web-legacy-svelte/src/lib/ui/core/data-table/index.ts
similarity index 100%
rename from web/src/lib/ui/core/data-table/index.ts
rename to web-legacy-svelte/src/lib/ui/core/data-table/index.ts
diff --git a/web/src/lib/ui/core/data-table/render-helpers.ts b/web-legacy-svelte/src/lib/ui/core/data-table/render-helpers.ts
similarity index 100%
rename from web/src/lib/ui/core/data-table/render-helpers.ts
rename to web-legacy-svelte/src/lib/ui/core/data-table/render-helpers.ts
diff --git a/web/src/lib/ui/core/dialog/dialog-close.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-close.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-close.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-close.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog-content.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-content.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog-description.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-description.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-description.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-description.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog-footer.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-footer.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-footer.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-footer.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog-header.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-header.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-header.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-header.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog-overlay.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-overlay.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-overlay.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-overlay.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog-portal.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-portal.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-portal.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-portal.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog-title.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-title.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-title.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-title.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog-trigger.svelte
diff --git a/web/src/lib/ui/core/dialog/dialog.svelte b/web-legacy-svelte/src/lib/ui/core/dialog/dialog.svelte
similarity index 100%
rename from web/src/lib/ui/core/dialog/dialog.svelte
rename to web-legacy-svelte/src/lib/ui/core/dialog/dialog.svelte
diff --git a/web/src/lib/ui/core/dialog/index.ts b/web-legacy-svelte/src/lib/ui/core/dialog/index.ts
similarity index 100%
rename from web/src/lib/ui/core/dialog/index.ts
rename to web-legacy-svelte/src/lib/ui/core/dialog/index.ts
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-checkbox-group.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-checkbox-group.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-checkbox-group.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-checkbox-group.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-checkbox-item.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-checkbox-item.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-checkbox-item.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-checkbox-item.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-content.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-content.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-group-heading.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-group-heading.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-group-heading.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-group-heading.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-group.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-group.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-group.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-group.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-item.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-item.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-item.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-item.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-label.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-label.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-label.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-label.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-portal.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-portal.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-portal.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-portal.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-radio-group.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-radio-group.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-radio-group.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-radio-group.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-radio-item.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-radio-item.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-radio-item.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-radio-item.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-separator.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-separator.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-separator.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-separator.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-shortcut.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-shortcut.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-shortcut.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-shortcut.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-sub-content.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-sub-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-sub-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-sub-content.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-sub-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-sub-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-sub-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-sub-trigger.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-sub.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-sub.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-sub.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-sub.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu-trigger.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/dropdown-menu.svelte b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu.svelte
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/dropdown-menu.svelte
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/dropdown-menu.svelte
diff --git a/web/src/lib/ui/core/dropdown-menu/index.ts b/web-legacy-svelte/src/lib/ui/core/dropdown-menu/index.ts
similarity index 100%
rename from web/src/lib/ui/core/dropdown-menu/index.ts
rename to web-legacy-svelte/src/lib/ui/core/dropdown-menu/index.ts
diff --git a/web/src/lib/ui/core/form/form-button.svelte b/web-legacy-svelte/src/lib/ui/core/form/form-button.svelte
similarity index 100%
rename from web/src/lib/ui/core/form/form-button.svelte
rename to web-legacy-svelte/src/lib/ui/core/form/form-button.svelte
diff --git a/web/src/lib/ui/core/form/form-description.svelte b/web-legacy-svelte/src/lib/ui/core/form/form-description.svelte
similarity index 100%
rename from web/src/lib/ui/core/form/form-description.svelte
rename to web-legacy-svelte/src/lib/ui/core/form/form-description.svelte
diff --git a/web/src/lib/ui/core/form/form-element-field.svelte b/web-legacy-svelte/src/lib/ui/core/form/form-element-field.svelte
similarity index 100%
rename from web/src/lib/ui/core/form/form-element-field.svelte
rename to web-legacy-svelte/src/lib/ui/core/form/form-element-field.svelte
diff --git a/web/src/lib/ui/core/form/form-field-errors.svelte b/web-legacy-svelte/src/lib/ui/core/form/form-field-errors.svelte
similarity index 100%
rename from web/src/lib/ui/core/form/form-field-errors.svelte
rename to web-legacy-svelte/src/lib/ui/core/form/form-field-errors.svelte
diff --git a/web/src/lib/ui/core/form/form-field.svelte b/web-legacy-svelte/src/lib/ui/core/form/form-field.svelte
similarity index 100%
rename from web/src/lib/ui/core/form/form-field.svelte
rename to web-legacy-svelte/src/lib/ui/core/form/form-field.svelte
diff --git a/web/src/lib/ui/core/form/form-fieldset.svelte b/web-legacy-svelte/src/lib/ui/core/form/form-fieldset.svelte
similarity index 100%
rename from web/src/lib/ui/core/form/form-fieldset.svelte
rename to web-legacy-svelte/src/lib/ui/core/form/form-fieldset.svelte
diff --git a/web/src/lib/ui/core/form/form-label.svelte b/web-legacy-svelte/src/lib/ui/core/form/form-label.svelte
similarity index 100%
rename from web/src/lib/ui/core/form/form-label.svelte
rename to web-legacy-svelte/src/lib/ui/core/form/form-label.svelte
diff --git a/web/src/lib/ui/core/form/form-legend.svelte b/web-legacy-svelte/src/lib/ui/core/form/form-legend.svelte
similarity index 100%
rename from web/src/lib/ui/core/form/form-legend.svelte
rename to web-legacy-svelte/src/lib/ui/core/form/form-legend.svelte
diff --git a/web/src/lib/ui/core/form/index.ts b/web-legacy-svelte/src/lib/ui/core/form/index.ts
similarity index 100%
rename from web/src/lib/ui/core/form/index.ts
rename to web-legacy-svelte/src/lib/ui/core/form/index.ts
diff --git a/web/src/lib/ui/core/input/index.ts b/web-legacy-svelte/src/lib/ui/core/input/index.ts
similarity index 100%
rename from web/src/lib/ui/core/input/index.ts
rename to web-legacy-svelte/src/lib/ui/core/input/index.ts
diff --git a/web/src/lib/ui/core/input/input.svelte b/web-legacy-svelte/src/lib/ui/core/input/input.svelte
similarity index 100%
rename from web/src/lib/ui/core/input/input.svelte
rename to web-legacy-svelte/src/lib/ui/core/input/input.svelte
diff --git a/web/src/lib/ui/core/label/index.ts b/web-legacy-svelte/src/lib/ui/core/label/index.ts
similarity index 100%
rename from web/src/lib/ui/core/label/index.ts
rename to web-legacy-svelte/src/lib/ui/core/label/index.ts
diff --git a/web/src/lib/ui/core/label/label.svelte b/web-legacy-svelte/src/lib/ui/core/label/label.svelte
similarity index 100%
rename from web/src/lib/ui/core/label/label.svelte
rename to web-legacy-svelte/src/lib/ui/core/label/label.svelte
diff --git a/web/src/lib/ui/core/popover/index.ts b/web-legacy-svelte/src/lib/ui/core/popover/index.ts
similarity index 100%
rename from web/src/lib/ui/core/popover/index.ts
rename to web-legacy-svelte/src/lib/ui/core/popover/index.ts
diff --git a/web/src/lib/ui/core/popover/popover-close.svelte b/web-legacy-svelte/src/lib/ui/core/popover/popover-close.svelte
similarity index 100%
rename from web/src/lib/ui/core/popover/popover-close.svelte
rename to web-legacy-svelte/src/lib/ui/core/popover/popover-close.svelte
diff --git a/web/src/lib/ui/core/popover/popover-content.svelte b/web-legacy-svelte/src/lib/ui/core/popover/popover-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/popover/popover-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/popover/popover-content.svelte
diff --git a/web/src/lib/ui/core/popover/popover-description.svelte b/web-legacy-svelte/src/lib/ui/core/popover/popover-description.svelte
similarity index 100%
rename from web/src/lib/ui/core/popover/popover-description.svelte
rename to web-legacy-svelte/src/lib/ui/core/popover/popover-description.svelte
diff --git a/web/src/lib/ui/core/popover/popover-header.svelte b/web-legacy-svelte/src/lib/ui/core/popover/popover-header.svelte
similarity index 100%
rename from web/src/lib/ui/core/popover/popover-header.svelte
rename to web-legacy-svelte/src/lib/ui/core/popover/popover-header.svelte
diff --git a/web/src/lib/ui/core/popover/popover-portal.svelte b/web-legacy-svelte/src/lib/ui/core/popover/popover-portal.svelte
similarity index 100%
rename from web/src/lib/ui/core/popover/popover-portal.svelte
rename to web-legacy-svelte/src/lib/ui/core/popover/popover-portal.svelte
diff --git a/web/src/lib/ui/core/popover/popover-title.svelte b/web-legacy-svelte/src/lib/ui/core/popover/popover-title.svelte
similarity index 100%
rename from web/src/lib/ui/core/popover/popover-title.svelte
rename to web-legacy-svelte/src/lib/ui/core/popover/popover-title.svelte
diff --git a/web/src/lib/ui/core/popover/popover-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/popover/popover-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/popover/popover-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/popover/popover-trigger.svelte
diff --git a/web/src/lib/ui/core/popover/popover.svelte b/web-legacy-svelte/src/lib/ui/core/popover/popover.svelte
similarity index 100%
rename from web/src/lib/ui/core/popover/popover.svelte
rename to web-legacy-svelte/src/lib/ui/core/popover/popover.svelte
diff --git a/web/src/lib/ui/core/scroll-area/index.ts b/web-legacy-svelte/src/lib/ui/core/scroll-area/index.ts
similarity index 100%
rename from web/src/lib/ui/core/scroll-area/index.ts
rename to web-legacy-svelte/src/lib/ui/core/scroll-area/index.ts
diff --git a/web/src/lib/ui/core/scroll-area/scroll-area-scrollbar.svelte b/web-legacy-svelte/src/lib/ui/core/scroll-area/scroll-area-scrollbar.svelte
similarity index 100%
rename from web/src/lib/ui/core/scroll-area/scroll-area-scrollbar.svelte
rename to web-legacy-svelte/src/lib/ui/core/scroll-area/scroll-area-scrollbar.svelte
diff --git a/web/src/lib/ui/core/scroll-area/scroll-area.svelte b/web-legacy-svelte/src/lib/ui/core/scroll-area/scroll-area.svelte
similarity index 100%
rename from web/src/lib/ui/core/scroll-area/scroll-area.svelte
rename to web-legacy-svelte/src/lib/ui/core/scroll-area/scroll-area.svelte
diff --git a/web/src/lib/ui/core/select/index.ts b/web-legacy-svelte/src/lib/ui/core/select/index.ts
similarity index 100%
rename from web/src/lib/ui/core/select/index.ts
rename to web-legacy-svelte/src/lib/ui/core/select/index.ts
diff --git a/web/src/lib/ui/core/select/select-content.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-content.svelte
diff --git a/web/src/lib/ui/core/select/select-group-heading.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-group-heading.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-group-heading.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-group-heading.svelte
diff --git a/web/src/lib/ui/core/select/select-group.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-group.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-group.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-group.svelte
diff --git a/web/src/lib/ui/core/select/select-item.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-item.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-item.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-item.svelte
diff --git a/web/src/lib/ui/core/select/select-label.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-label.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-label.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-label.svelte
diff --git a/web/src/lib/ui/core/select/select-portal.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-portal.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-portal.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-portal.svelte
diff --git a/web/src/lib/ui/core/select/select-scroll-down-button.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-scroll-down-button.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-scroll-down-button.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-scroll-down-button.svelte
diff --git a/web/src/lib/ui/core/select/select-scroll-up-button.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-scroll-up-button.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-scroll-up-button.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-scroll-up-button.svelte
diff --git a/web/src/lib/ui/core/select/select-separator.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-separator.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-separator.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-separator.svelte
diff --git a/web/src/lib/ui/core/select/select-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/select/select-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select-trigger.svelte
diff --git a/web/src/lib/ui/core/select/select.svelte b/web-legacy-svelte/src/lib/ui/core/select/select.svelte
similarity index 100%
rename from web/src/lib/ui/core/select/select.svelte
rename to web-legacy-svelte/src/lib/ui/core/select/select.svelte
diff --git a/web/src/lib/ui/core/separator/index.ts b/web-legacy-svelte/src/lib/ui/core/separator/index.ts
similarity index 100%
rename from web/src/lib/ui/core/separator/index.ts
rename to web-legacy-svelte/src/lib/ui/core/separator/index.ts
diff --git a/web/src/lib/ui/core/separator/separator.svelte b/web-legacy-svelte/src/lib/ui/core/separator/separator.svelte
similarity index 100%
rename from web/src/lib/ui/core/separator/separator.svelte
rename to web-legacy-svelte/src/lib/ui/core/separator/separator.svelte
diff --git a/web/src/lib/ui/core/sheet/index.ts b/web-legacy-svelte/src/lib/ui/core/sheet/index.ts
similarity index 100%
rename from web/src/lib/ui/core/sheet/index.ts
rename to web-legacy-svelte/src/lib/ui/core/sheet/index.ts
diff --git a/web/src/lib/ui/core/sheet/sheet-close.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-close.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-close.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-close.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet-content.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-content.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet-description.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-description.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-description.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-description.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet-footer.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-footer.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-footer.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-footer.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet-header.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-header.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-header.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-header.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet-overlay.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-overlay.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-overlay.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-overlay.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet-portal.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-portal.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-portal.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-portal.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet-title.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-title.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-title.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-title.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet-trigger.svelte
diff --git a/web/src/lib/ui/core/sheet/sheet.svelte b/web-legacy-svelte/src/lib/ui/core/sheet/sheet.svelte
similarity index 100%
rename from web/src/lib/ui/core/sheet/sheet.svelte
rename to web-legacy-svelte/src/lib/ui/core/sheet/sheet.svelte
diff --git a/web/src/lib/ui/core/skeleton/index.ts b/web-legacy-svelte/src/lib/ui/core/skeleton/index.ts
similarity index 100%
rename from web/src/lib/ui/core/skeleton/index.ts
rename to web-legacy-svelte/src/lib/ui/core/skeleton/index.ts
diff --git a/web/src/lib/ui/core/skeleton/skeleton.svelte b/web-legacy-svelte/src/lib/ui/core/skeleton/skeleton.svelte
similarity index 100%
rename from web/src/lib/ui/core/skeleton/skeleton.svelte
rename to web-legacy-svelte/src/lib/ui/core/skeleton/skeleton.svelte
diff --git a/web/src/lib/ui/core/switch/index.ts b/web-legacy-svelte/src/lib/ui/core/switch/index.ts
similarity index 100%
rename from web/src/lib/ui/core/switch/index.ts
rename to web-legacy-svelte/src/lib/ui/core/switch/index.ts
diff --git a/web/src/lib/ui/core/switch/switch.svelte b/web-legacy-svelte/src/lib/ui/core/switch/switch.svelte
similarity index 100%
rename from web/src/lib/ui/core/switch/switch.svelte
rename to web-legacy-svelte/src/lib/ui/core/switch/switch.svelte
diff --git a/web/src/lib/ui/core/table/index.ts b/web-legacy-svelte/src/lib/ui/core/table/index.ts
similarity index 100%
rename from web/src/lib/ui/core/table/index.ts
rename to web-legacy-svelte/src/lib/ui/core/table/index.ts
diff --git a/web/src/lib/ui/core/table/table-body.svelte b/web-legacy-svelte/src/lib/ui/core/table/table-body.svelte
similarity index 100%
rename from web/src/lib/ui/core/table/table-body.svelte
rename to web-legacy-svelte/src/lib/ui/core/table/table-body.svelte
diff --git a/web/src/lib/ui/core/table/table-caption.svelte b/web-legacy-svelte/src/lib/ui/core/table/table-caption.svelte
similarity index 100%
rename from web/src/lib/ui/core/table/table-caption.svelte
rename to web-legacy-svelte/src/lib/ui/core/table/table-caption.svelte
diff --git a/web/src/lib/ui/core/table/table-cell.svelte b/web-legacy-svelte/src/lib/ui/core/table/table-cell.svelte
similarity index 100%
rename from web/src/lib/ui/core/table/table-cell.svelte
rename to web-legacy-svelte/src/lib/ui/core/table/table-cell.svelte
diff --git a/web/src/lib/ui/core/table/table-footer.svelte b/web-legacy-svelte/src/lib/ui/core/table/table-footer.svelte
similarity index 100%
rename from web/src/lib/ui/core/table/table-footer.svelte
rename to web-legacy-svelte/src/lib/ui/core/table/table-footer.svelte
diff --git a/web/src/lib/ui/core/table/table-head.svelte b/web-legacy-svelte/src/lib/ui/core/table/table-head.svelte
similarity index 100%
rename from web/src/lib/ui/core/table/table-head.svelte
rename to web-legacy-svelte/src/lib/ui/core/table/table-head.svelte
diff --git a/web/src/lib/ui/core/table/table-header.svelte b/web-legacy-svelte/src/lib/ui/core/table/table-header.svelte
similarity index 100%
rename from web/src/lib/ui/core/table/table-header.svelte
rename to web-legacy-svelte/src/lib/ui/core/table/table-header.svelte
diff --git a/web/src/lib/ui/core/table/table-row.svelte b/web-legacy-svelte/src/lib/ui/core/table/table-row.svelte
similarity index 100%
rename from web/src/lib/ui/core/table/table-row.svelte
rename to web-legacy-svelte/src/lib/ui/core/table/table-row.svelte
diff --git a/web/src/lib/ui/core/table/table.svelte b/web-legacy-svelte/src/lib/ui/core/table/table.svelte
similarity index 100%
rename from web/src/lib/ui/core/table/table.svelte
rename to web-legacy-svelte/src/lib/ui/core/table/table.svelte
diff --git a/web/src/lib/ui/core/tabs/index.ts b/web-legacy-svelte/src/lib/ui/core/tabs/index.ts
similarity index 100%
rename from web/src/lib/ui/core/tabs/index.ts
rename to web-legacy-svelte/src/lib/ui/core/tabs/index.ts
diff --git a/web/src/lib/ui/core/tabs/tabs-content.svelte b/web-legacy-svelte/src/lib/ui/core/tabs/tabs-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/tabs/tabs-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/tabs/tabs-content.svelte
diff --git a/web/src/lib/ui/core/tabs/tabs-list.svelte b/web-legacy-svelte/src/lib/ui/core/tabs/tabs-list.svelte
similarity index 100%
rename from web/src/lib/ui/core/tabs/tabs-list.svelte
rename to web-legacy-svelte/src/lib/ui/core/tabs/tabs-list.svelte
diff --git a/web/src/lib/ui/core/tabs/tabs-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/tabs/tabs-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/tabs/tabs-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/tabs/tabs-trigger.svelte
diff --git a/web/src/lib/ui/core/tabs/tabs.svelte b/web-legacy-svelte/src/lib/ui/core/tabs/tabs.svelte
similarity index 100%
rename from web/src/lib/ui/core/tabs/tabs.svelte
rename to web-legacy-svelte/src/lib/ui/core/tabs/tabs.svelte
diff --git a/web/src/lib/ui/core/textarea/index.ts b/web-legacy-svelte/src/lib/ui/core/textarea/index.ts
similarity index 100%
rename from web/src/lib/ui/core/textarea/index.ts
rename to web-legacy-svelte/src/lib/ui/core/textarea/index.ts
diff --git a/web/src/lib/ui/core/textarea/textarea.svelte b/web-legacy-svelte/src/lib/ui/core/textarea/textarea.svelte
similarity index 100%
rename from web/src/lib/ui/core/textarea/textarea.svelte
rename to web-legacy-svelte/src/lib/ui/core/textarea/textarea.svelte
diff --git a/web/src/lib/ui/core/tooltip/index.ts b/web-legacy-svelte/src/lib/ui/core/tooltip/index.ts
similarity index 100%
rename from web/src/lib/ui/core/tooltip/index.ts
rename to web-legacy-svelte/src/lib/ui/core/tooltip/index.ts
diff --git a/web/src/lib/ui/core/tooltip/tooltip-content.svelte b/web-legacy-svelte/src/lib/ui/core/tooltip/tooltip-content.svelte
similarity index 100%
rename from web/src/lib/ui/core/tooltip/tooltip-content.svelte
rename to web-legacy-svelte/src/lib/ui/core/tooltip/tooltip-content.svelte
diff --git a/web/src/lib/ui/core/tooltip/tooltip-portal.svelte b/web-legacy-svelte/src/lib/ui/core/tooltip/tooltip-portal.svelte
similarity index 100%
rename from web/src/lib/ui/core/tooltip/tooltip-portal.svelte
rename to web-legacy-svelte/src/lib/ui/core/tooltip/tooltip-portal.svelte
diff --git a/web/src/lib/ui/core/tooltip/tooltip-provider.svelte b/web-legacy-svelte/src/lib/ui/core/tooltip/tooltip-provider.svelte
similarity index 100%
rename from web/src/lib/ui/core/tooltip/tooltip-provider.svelte
rename to web-legacy-svelte/src/lib/ui/core/tooltip/tooltip-provider.svelte
diff --git a/web/src/lib/ui/core/tooltip/tooltip-trigger.svelte b/web-legacy-svelte/src/lib/ui/core/tooltip/tooltip-trigger.svelte
similarity index 100%
rename from web/src/lib/ui/core/tooltip/tooltip-trigger.svelte
rename to web-legacy-svelte/src/lib/ui/core/tooltip/tooltip-trigger.svelte
diff --git a/web/src/lib/ui/core/tooltip/tooltip.svelte b/web-legacy-svelte/src/lib/ui/core/tooltip/tooltip.svelte
similarity index 100%
rename from web/src/lib/ui/core/tooltip/tooltip.svelte
rename to web-legacy-svelte/src/lib/ui/core/tooltip/tooltip.svelte
diff --git a/web/src/lib/ui/patterns/confirm/confirm-dialog.svelte b/web-legacy-svelte/src/lib/ui/patterns/confirm/confirm-dialog.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/confirm/confirm-dialog.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/confirm/confirm-dialog.svelte
diff --git a/web/src/lib/ui/patterns/confirm/confirm-state.svelte.ts b/web-legacy-svelte/src/lib/ui/patterns/confirm/confirm-state.svelte.ts
similarity index 100%
rename from web/src/lib/ui/patterns/confirm/confirm-state.svelte.ts
rename to web-legacy-svelte/src/lib/ui/patterns/confirm/confirm-state.svelte.ts
diff --git a/web/src/lib/ui/patterns/data-table/app-data-table.svelte b/web-legacy-svelte/src/lib/ui/patterns/data-table/app-data-table.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/data-table/app-data-table.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/data-table/app-data-table.svelte
diff --git a/web/src/lib/ui/patterns/data-table/types.ts b/web-legacy-svelte/src/lib/ui/patterns/data-table/types.ts
similarity index 100%
rename from web/src/lib/ui/patterns/data-table/types.ts
rename to web-legacy-svelte/src/lib/ui/patterns/data-table/types.ts
diff --git a/web/src/lib/ui/patterns/empty-state/empty-state.svelte b/web-legacy-svelte/src/lib/ui/patterns/empty-state/empty-state.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/empty-state/empty-state.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/empty-state/empty-state.svelte
diff --git a/web/src/lib/ui/patterns/feedback/card-skeleton.svelte b/web-legacy-svelte/src/lib/ui/patterns/feedback/card-skeleton.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/feedback/card-skeleton.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/feedback/card-skeleton.svelte
diff --git a/web/src/lib/ui/patterns/feedback/table-skeleton.svelte b/web-legacy-svelte/src/lib/ui/patterns/feedback/table-skeleton.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/feedback/table-skeleton.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/feedback/table-skeleton.svelte
diff --git a/web/src/lib/ui/patterns/form/app-input.svelte b/web-legacy-svelte/src/lib/ui/patterns/form/app-input.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/form/app-input.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/form/app-input.svelte
diff --git a/web/src/lib/ui/patterns/form/app-textarea.svelte b/web-legacy-svelte/src/lib/ui/patterns/form/app-textarea.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/form/app-textarea.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/form/app-textarea.svelte
diff --git a/web/src/lib/ui/patterns/form/form-field.svelte b/web-legacy-svelte/src/lib/ui/patterns/form/form-field.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/form/form-field.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/form/form-field.svelte
diff --git a/web/src/lib/ui/patterns/kpi/kpi-metrics-grid.svelte b/web-legacy-svelte/src/lib/ui/patterns/kpi/kpi-metrics-grid.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/kpi/kpi-metrics-grid.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/kpi/kpi-metrics-grid.svelte
diff --git a/web/src/lib/ui/patterns/virtual-list/virtual-prefix-list.svelte b/web-legacy-svelte/src/lib/ui/patterns/virtual-list/virtual-prefix-list.svelte
similarity index 100%
rename from web/src/lib/ui/patterns/virtual-list/virtual-prefix-list.svelte
rename to web-legacy-svelte/src/lib/ui/patterns/virtual-list/virtual-prefix-list.svelte
diff --git a/web/src/lib/utils.ts b/web-legacy-svelte/src/lib/utils.ts
similarity index 100%
rename from web/src/lib/utils.ts
rename to web-legacy-svelte/src/lib/utils.ts
diff --git a/web/src/routes/+layout.svelte b/web-legacy-svelte/src/routes/+layout.svelte
similarity index 100%
rename from web/src/routes/+layout.svelte
rename to web-legacy-svelte/src/routes/+layout.svelte
diff --git a/web/src/routes/+layout.ts b/web-legacy-svelte/src/routes/+layout.ts
similarity index 100%
rename from web/src/routes/+layout.ts
rename to web-legacy-svelte/src/routes/+layout.ts
diff --git a/web/src/routes/+page.svelte b/web-legacy-svelte/src/routes/+page.svelte
similarity index 100%
rename from web/src/routes/+page.svelte
rename to web-legacy-svelte/src/routes/+page.svelte
diff --git a/web/src/routes/access/+page.svelte b/web-legacy-svelte/src/routes/access/+page.svelte
similarity index 100%
rename from web/src/routes/access/+page.svelte
rename to web-legacy-svelte/src/routes/access/+page.svelte
diff --git a/web/src/routes/directories/+page.svelte b/web-legacy-svelte/src/routes/directories/+page.svelte
similarity index 100%
rename from web/src/routes/directories/+page.svelte
rename to web-legacy-svelte/src/routes/directories/+page.svelte
diff --git a/web/src/routes/layout.css b/web-legacy-svelte/src/routes/layout.css
similarity index 100%
rename from web/src/routes/layout.css
rename to web-legacy-svelte/src/routes/layout.css
diff --git a/web/src/routes/modules/+page.svelte b/web-legacy-svelte/src/routes/modules/+page.svelte
similarity index 100%
rename from web/src/routes/modules/+page.svelte
rename to web-legacy-svelte/src/routes/modules/+page.svelte
diff --git a/web/src/routes/modules/[moduleId]/+page.svelte b/web-legacy-svelte/src/routes/modules/[moduleId]/+page.svelte
similarity index 100%
rename from web/src/routes/modules/[moduleId]/+page.svelte
rename to web-legacy-svelte/src/routes/modules/[moduleId]/+page.svelte
diff --git a/web/src/routes/modules/[moduleId]/+page.ts b/web-legacy-svelte/src/routes/modules/[moduleId]/+page.ts
similarity index 100%
rename from web/src/routes/modules/[moduleId]/+page.ts
rename to web-legacy-svelte/src/routes/modules/[moduleId]/+page.ts
diff --git a/web/src/routes/monitoring/+page.svelte b/web-legacy-svelte/src/routes/monitoring/+page.svelte
similarity index 100%
rename from web/src/routes/monitoring/+page.svelte
rename to web-legacy-svelte/src/routes/monitoring/+page.svelte
diff --git a/web/src/routes/network/+page.svelte b/web-legacy-svelte/src/routes/network/+page.svelte
similarity index 100%
rename from web/src/routes/network/+page.svelte
rename to web-legacy-svelte/src/routes/network/+page.svelte
diff --git a/web/src/routes/operations/+page.svelte b/web-legacy-svelte/src/routes/operations/+page.svelte
similarity index 100%
rename from web/src/routes/operations/+page.svelte
rename to web-legacy-svelte/src/routes/operations/+page.svelte
diff --git a/web/src/routes/peers/+page.svelte b/web-legacy-svelte/src/routes/peers/+page.svelte
similarity index 100%
rename from web/src/routes/peers/+page.svelte
rename to web-legacy-svelte/src/routes/peers/+page.svelte
diff --git a/web/src/routes/revisions/+page.svelte b/web-legacy-svelte/src/routes/revisions/+page.svelte
similarity index 100%
rename from web/src/routes/revisions/+page.svelte
rename to web-legacy-svelte/src/routes/revisions/+page.svelte
diff --git a/web/src/routes/schedule/+page.svelte b/web-legacy-svelte/src/routes/schedule/+page.svelte
similarity index 100%
rename from web/src/routes/schedule/+page.svelte
rename to web-legacy-svelte/src/routes/schedule/+page.svelte
diff --git a/web/src/routes/settings/+page.svelte b/web-legacy-svelte/src/routes/settings/+page.svelte
similarity index 100%
rename from web/src/routes/settings/+page.svelte
rename to web-legacy-svelte/src/routes/settings/+page.svelte
diff --git a/web/src/routes/tenant-settings/+page.svelte b/web-legacy-svelte/src/routes/tenant-settings/+page.svelte
similarity index 100%
rename from web/src/routes/tenant-settings/+page.svelte
rename to web-legacy-svelte/src/routes/tenant-settings/+page.svelte
diff --git a/web-legacy-svelte/static/robots.txt b/web-legacy-svelte/static/robots.txt
new file mode 100644
index 0000000..b6dd667
--- /dev/null
+++ b/web-legacy-svelte/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
diff --git a/web/svelte.config.js b/web-legacy-svelte/svelte.config.js
similarity index 100%
rename from web/svelte.config.js
rename to web-legacy-svelte/svelte.config.js
diff --git a/web/tsconfig.json b/web-legacy-svelte/tsconfig.json
similarity index 100%
rename from web/tsconfig.json
rename to web-legacy-svelte/tsconfig.json
diff --git a/web/vite.config.ts b/web-legacy-svelte/vite.config.ts
similarity index 100%
rename from web/vite.config.ts
rename to web-legacy-svelte/vite.config.ts