From 094f75913b2ea7b5ad0d9719531ee10821506164 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Sun, 23 Aug 2026 12:46:20 +0700
Subject: [PATCH] fix(web): unify ReUI chrome and stop tab underline overlap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Секции страниц переведены на segmented Tabs (c-tabs-9), статус грида — ToggleGroup в toolbar. Убраны календарь задач, пустые вкладки мониторинга и demo-деревья ReUI. KPI overflow как в CFDM, DetailPanel на карточке модуля, один FrameSection.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .agents/skills/shadcn-react/SKILL.md          |   19 +-
 .cursor/rules/reui-mcp.mdc                    |    4 +-
 .cursor/rules/web-shadcn.mdc                  |   13 +-
 AGENTS.md                                     |    2 +-
 apps/web/eslint.config.js                     |    2 +-
 .../analytics/analytics-card-shell.tsx        |    6 +-
 .../analytics/analytics-kpi-row.tsx           |    2 +-
 .../analytics/dashboard-platform-card.tsx     |    2 +-
 .../data-grid-base-7/components/columns.tsx   |  324 ---
 .../components/data-grid-view.tsx             |  355 ---
 .../data-grid-base-7/components/data.tsx      |  394 ----
 .../blocks/data-grid-base-7/page.tsx          |   15 -
 .../components/columns.tsx                    |  394 ----
 .../components/data-grid-view.tsx             |  679 ------
 .../data-grid-filtering-2/components/data.tsx |  384 ----
 .../blocks/data-grid-filtering-2/page.tsx     |   15 -
 .../empty-state-14/components/empty-state.tsx |  106 -
 .../components/blocks/empty-state-14/page.tsx |   12 -
 .../blocks/settings-16/components/data.tsx    |  147 --
 .../components/integration-settings.tsx       |  109 -
 .../components/blocks/settings-16/page.tsx    |   15 -
 .../settings-3/components/color-picker.tsx    |   40 -
 .../blocks/settings-3/components/data.tsx     |  109 -
 .../components/editor-preferences.tsx         |   57 -
 .../components/general-settings.tsx           |  267 ---
 .../settings-3/components/setting-field.tsx   |   69 -
 .../src/components/blocks/settings-3/page.tsx |    9 -
 .../blocks/wizard-2/components/data.tsx       |  194 --
 .../components/procurement-vendor-steps.tsx   |  646 ------
 .../components/procurement-vendor-wizard.tsx  |  426 ----
 .../src/components/blocks/wizard-2/page.tsx   |    9 -
 apps/web/src/components/category-badge.tsx    |   51 +-
 apps/web/src/components/counted-line-tabs.tsx |   50 -
 .../dashboard/dashboard-frame-panel.tsx       |   10 +-
 .../dashboard/dashboard-kpi-grid.tsx          |    2 +-
 .../dashboard/dashboard-quick-links.tsx       |    1 -
 apps/web/src/components/empty-state.tsx       |   21 +-
 .../components/examples/c-input-group-37.tsx  |  107 -
 .../src/components/examples/c-select-4.tsx    |   19 -
 apps/web/src/components/examples/c-tabs-2.tsx |  129 --
 apps/web/src/components/examples/c-tabs-6.tsx |   46 -
 apps/web/src/components/examples/c-tabs-7.tsx |   61 -
 apps/web/src/components/form-drawer.tsx       |   16 +-
 apps/web/src/components/kpi-stat-grid.tsx     |   14 -
 apps/web/src/components/layout/app-shell.tsx  |    2 +-
 apps/web/src/components/loading-button.tsx    |   11 +-
 .../modules/module-create-dialog.tsx          |   42 +-
 .../components/modules/module-kpi-cards.tsx   |    2 +-
 .../operations/operations-jobs-kanban.tsx     |   48 +-
 apps/web/src/components/panel-card.tsx        |  104 +-
 .../patterns/illustrated-empty-state.tsx      |   43 +-
 apps/web/src/components/patterns/index.ts     |    2 +-
 .../patterns/projects-empty-state.tsx         |    8 +-
 .../src/components/reui-kit/frame-section.tsx |   93 +
 apps/web/src/components/reui-kit/index.ts     |    9 +
 .../src/components/reui-kit/kpi-stat-grid.tsx |   25 +-
 .../src/components/reui-kit/resource-page.tsx |   56 +-
 .../event-calendar-agenda-view.tsx            |  237 --
 .../event-calendar/event-calendar-content.tsx |   80 -
 .../event-calendar/event-calendar-dnd.tsx     | 1064 ---------
 .../event-calendar/event-calendar-event.tsx   |  555 -----
 .../event-calendar/event-calendar-i18n.tsx    |  291 ---
 .../event-calendar/event-calendar-lib.tsx     |  677 ------
 .../event-calendar-month-view.tsx             | 1289 -----------
 .../event-calendar/event-calendar-nav.tsx     |  611 ------
 .../event-calendar-recurrence.tsx             |  592 -----
 .../event-calendar-resource-view.tsx          |  812 -------
 .../event-calendar-time-grid.tsx              | 1358 ------------
 .../event-calendar/event-calendar-types.tsx   |  240 ---
 .../reui/event-calendar/event-calendar.tsx    | 1913 -----------------
 .../schedule/schedule-agenda-panel.tsx        |  143 --
 .../{badge-tabs.tsx => segmented-tabs.tsx}    |   26 +-
 apps/web/src/components/skeletons.tsx         |   18 +-
 apps/web/src/components/status-badge.tsx      |   47 +-
 .../src/components/status-toggle-group.tsx    |   54 +
 .../src/components/ui/svgs/anthropicBlack.tsx |   15 -
 .../src/components/ui/svgs/anthropicWhite.tsx |   16 -
 .../src/components/ui/svgs/claudeAiIcon.tsx   |   12 -
 apps/web/src/components/ui/svgs/convex.tsx    |   20 -
 .../web/src/components/ui/svgs/cursorDark.tsx |   12 -
 .../src/components/ui/svgs/cursorLight.tsx    |    9 -
 apps/web/src/components/ui/svgs/discord.tsx   |   12 -
 apps/web/src/components/ui/svgs/gemini.tsx    |  171 --
 .../src/components/ui/svgs/googleCalendar.tsx |   41 -
 .../src/components/ui/svgs/googleCloud.tsx    |   24 -
 apps/web/src/components/ui/svgs/hono.tsx      |   17 -
 apps/web/src/components/ui/svgs/loom.tsx      |   12 -
 apps/web/src/components/ui/svgs/mintlify.tsx  |   20 -
 apps/web/src/components/ui/svgs/n8n.tsx       |   14 -
 apps/web/src/components/ui/svgs/neon.tsx      |   35 -
 apps/web/src/components/ui/svgs/openai.tsx    |    9 -
 .../web/src/components/ui/svgs/openaiDark.tsx |   12 -
 apps/web/src/components/ui/svgs/paper.tsx     |    9 -
 .../src/components/ui/svgs/planetscale.tsx    |    9 -
 .../components/ui/svgs/planetscaleDark.tsx    |   12 -
 apps/web/src/components/ui/svgs/prisma.tsx    |    9 -
 .../web/src/components/ui/svgs/prismaDark.tsx |   12 -
 apps/web/src/components/ui/svgs/remixDark.tsx |   12 -
 .../web/src/components/ui/svgs/remixLight.tsx |   12 -
 .../components/ui/svgs/resendIconBlack.tsx    |   12 -
 .../components/ui/svgs/resendIconWhite.tsx    |   12 -
 apps/web/src/components/ui/svgs/slack.tsx     |   26 -
 apps/web/src/components/ui/svgs/stripe.tsx    |   14 -
 apps/web/src/components/ui/svgs/supabase.tsx  |   45 -
 apps/web/src/components/ui/svgs/zoom.tsx      |   39 -
 apps/web/src/routes/_auth/access.tsx          |    7 +-
 apps/web/src/routes/_auth/directories.tsx     |   10 +-
 .../src/routes/_auth/modules/$moduleId.tsx    |  122 +-
 apps/web/src/routes/_auth/monitoring.tsx      |  256 +--
 apps/web/src/routes/_auth/network.tsx         |   18 +-
 apps/web/src/routes/_auth/operations.tsx      |   12 +-
 apps/web/src/routes/_auth/schedule.tsx        |   15 +-
 apps/web/src/routes/auth.callback.tsx         |   28 +-
 apps/web/tsconfig.json                        |    3 +-
 114 files changed, 594 insertions(+), 16355 deletions(-)
 delete mode 100644 apps/web/src/components/blocks/data-grid-base-7/components/columns.tsx
 delete mode 100644 apps/web/src/components/blocks/data-grid-base-7/components/data-grid-view.tsx
 delete mode 100644 apps/web/src/components/blocks/data-grid-base-7/components/data.tsx
 delete mode 100644 apps/web/src/components/blocks/data-grid-base-7/page.tsx
 delete mode 100644 apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx
 delete mode 100644 apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
 delete mode 100644 apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx
 delete mode 100644 apps/web/src/components/blocks/data-grid-filtering-2/page.tsx
 delete mode 100644 apps/web/src/components/blocks/empty-state-14/components/empty-state.tsx
 delete mode 100644 apps/web/src/components/blocks/empty-state-14/page.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-16/components/data.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-16/components/integration-settings.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-16/page.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-3/components/color-picker.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-3/components/data.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-3/components/general-settings.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-3/components/setting-field.tsx
 delete mode 100644 apps/web/src/components/blocks/settings-3/page.tsx
 delete mode 100644 apps/web/src/components/blocks/wizard-2/components/data.tsx
 delete mode 100644 apps/web/src/components/blocks/wizard-2/components/procurement-vendor-steps.tsx
 delete mode 100644 apps/web/src/components/blocks/wizard-2/components/procurement-vendor-wizard.tsx
 delete mode 100644 apps/web/src/components/blocks/wizard-2/page.tsx
 delete mode 100644 apps/web/src/components/counted-line-tabs.tsx
 delete mode 100644 apps/web/src/components/examples/c-input-group-37.tsx
 delete mode 100644 apps/web/src/components/examples/c-select-4.tsx
 delete mode 100644 apps/web/src/components/examples/c-tabs-2.tsx
 delete mode 100644 apps/web/src/components/examples/c-tabs-6.tsx
 delete mode 100644 apps/web/src/components/examples/c-tabs-7.tsx
 delete mode 100644 apps/web/src/components/kpi-stat-grid.tsx
 create mode 100644 apps/web/src/components/reui-kit/frame-section.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-agenda-view.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-content.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-dnd.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-event.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-i18n.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-lib.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-month-view.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-nav.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-recurrence.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-resource-view.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-time-grid.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar-types.tsx
 delete mode 100644 apps/web/src/components/reui/event-calendar/event-calendar.tsx
 delete mode 100644 apps/web/src/components/schedule/schedule-agenda-panel.tsx
 rename apps/web/src/components/{badge-tabs.tsx => segmented-tabs.tsx} (73%)
 create mode 100644 apps/web/src/components/status-toggle-group.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/anthropicBlack.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/anthropicWhite.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/claudeAiIcon.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/convex.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/cursorDark.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/cursorLight.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/discord.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/gemini.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/googleCalendar.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/googleCloud.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/hono.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/loom.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/mintlify.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/n8n.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/neon.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/openai.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/openaiDark.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/paper.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/planetscale.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/planetscaleDark.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/prisma.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/prismaDark.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/remixDark.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/remixLight.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/resendIconBlack.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/resendIconWhite.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/slack.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/stripe.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/supabase.tsx
 delete mode 100644 apps/web/src/components/ui/svgs/zoom.tsx

diff --git a/.agents/skills/shadcn-react/SKILL.md b/.agents/skills/shadcn-react/SKILL.md
index 4c7688d..73632e8 100644
--- a/.agents/skills/shadcn-react/SKILL.md
+++ b/.agents/skills/shadcn-react/SKILL.md
@@ -46,28 +46,31 @@ pnpm dlx shadcn@latest add @reui/data-grid # ReUI enterprise → apps/web/src/co
 |--------|----------|--------|
 | 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` |
+| Data Grid (sort, pagination, virtual) | `@reui` | `@/components/reui/data-grid/*` → `reui-kit/ResourcePage` |
 | Мультифильтры | `@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.
+**Простые списки** — shadcn `Table`. **Сложные data-списки** — ReUI data-grid через `ResourcePage`, не shadcn Data Table.
 
 ## Уже установленные shared-обёртки
 
 В `apps/web/src/components/`:
 - `PageHeader`, `PageShell` — заголовки и обёртки страниц
 - `QueryState` — обёртка loading/error/empty для TanStack Query
-- `EmptyState` — пустые списки
+- `EmptyState` — пустые списки (empty-state-14 DNA)
 - `ConfirmDialog` — подтверждения (не `window.confirm`)
-- `LoadingButton` — кнопка с loading-состоянием
-- `StatusBadge` — статусные бейджи
-- `SectionCards` — сетка KPI-карточек
-- `Skeletons` (`TableSkeleton`, `SectionCardsSkeleton`) — скелетоны
+- `LoadingButton` — SoT кнопка с loading (`Button` + `Spinner`)
+- `StatusBadge` / `CategoryBadge` / `ModeBadge` — semantic ReUI Badge
+- `SegmentedTabs` — секции страницы (c-tabs-9)
+- `StatusToggleGroup` — статус грида (c-toggle-group-5)
+- `FormDrawer` — Sheet overlay (sheet-8 / form-7)
+- `Skeletons` (`TableSkeleton`, `KpiStatGridSkeleton`) — скелетоны
 - `TruncatedText` — текст с тултипом
-- `ModeToggle` — переключатель темы
+
+Kit: `reui-kit/ResourcePage`, `KpiStatGrid`, `QuickActionGrid`, `OpsDashboard`, `SettingsShell`, `DetailPanel`, `FrameSection`.
 
 Перед созданием новой обёртки — проверить существующие через Codegraph.
 
diff --git a/.cursor/rules/reui-mcp.mdc b/.cursor/rules/reui-mcp.mdc
index 81f73e7..6ceaf01 100644
--- a/.cursor/rules/reui-mcp.mdc
+++ b/.cursor/rules/reui-mcp.mdc
@@ -70,14 +70,14 @@ alwaysApply: true
 |------|------|--------|
 | shadcn | `packages/ui/src/components/` | `@evobgp/ui/components/*` |
 | ReUI CLI | `apps/web/src/components/reui/` | `@/components/reui/*` |
-| PRO blocks (reference) | `apps/web/src/components/blocks/` | adapt into kit, не копипаст в routes |
+| PRO blocks (reference) | — | CLI → adapt into kit; не держать demo-деревья в `src/components/blocks/` |
 | Kit | `apps/web/src/components/reui-kit/` | `@/components/reui-kit/*` |
 
 ## Установленные ReUI (apps/web)
 
 **Components:** `frame`, `data-grid/*`, `filters`, `badge`, `alert`, `autocomplete`, `number-field`, `date-selector`, `color-picker`, `timeline`, `rating`, `phone-input`, `icon-stack`, `icon-tile`, `stepper`
 
-**Kit:** `ResourcePage`, `KpiStatGrid`, `QuickActionGrid`, `OpsDashboard`, `DetailPanel`, `SettingsShell`
+**Kit:** `ResourcePage`, `KpiStatGrid`, `QuickActionGrid`, `OpsDashboard`, `DetailPanel`, `SettingsShell`, `FrameSection`
 
 **Blocks (reference):** `stats-12`, `card-35`, `auth-13`, `app-shell-12`, `settings-16`, `settings-8`, `empty-state-12`, `form-7`, `data-grid-filtering-2`, `dashboard-1`, …
 
diff --git a/.cursor/rules/web-shadcn.mdc b/.cursor/rules/web-shadcn.mdc
index d9f7ba0..988843f 100644
--- a/.cursor/rules/web-shadcn.mdc
+++ b/.cursor/rules/web-shadcn.mdc
@@ -23,10 +23,10 @@ alwaysApply: false
 | 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, LoadingButton |
-| ReUI kit | `apps/web/src/components/reui-kit/` | ResourcePage, KpiStatGrid, QuickActionGrid, OpsDashboard, SettingsShell |
+| ReUI kit | `apps/web/src/components/reui-kit/` | ResourcePage, KpiStatGrid, QuickActionGrid, OpsDashboard, SettingsShell, DetailPanel, FrameSection |
 | Роуты | `apps/web/src/routes/` | TanStack Router (file-based) |
 
-**Design contract:** [`docs/ui-design-contract.md`](../../docs/ui-design-contract.md). Surface: **frame**. KPI hybrid SoT: [stats-12](https://reui.io/preview/base/stats-12). Lists: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2). Quick Actions: `QuickActionGrid`.
+**Design contract:** [`docs/ui-design-contract.md`](../../docs/ui-design-contract.md). Surface: **frame**. KPI hybrid SoT: [stats-12](https://reui.io/preview/base/stats-12). Lists: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2). Page tabs: [c-tabs-9](https://reui.io/preview/base/components/c-tabs-9). Grid status: [c-toggle-group-5](https://reui.io/preview/base/components/c-toggle-group-5). Quick Actions: `QuickActionGrid`.
 
 Тема: `packages/ui/src/styles/globals.css`. CLI из `apps/web`: `pnpm dlx shadcn@latest add <component>`.
 
@@ -48,9 +48,16 @@ alwaysApply: false
 **WEB-05** | MUST | Формы — `react-hook-form` + Zod; через `FormField`/`Form` обёртки.
 *Проверка:* https://ui.shadcn.com/docs/components/form
 
-**WEB-06** | MUST | Сложные data-списки — Frame + ReUI DataGrid через `reui-kit/ResourcePage` или `DataGridSection` (не Card shell, не shadcn Data Table). Surface lock: `UI_SURFACE = 'frame'` (`lib/ui-surface.ts`). Простые списки — shadcn `Table`.
+**WEB-06** | MUST | Сложные data-списки — Frame + ReUI DataGrid через `reui-kit/ResourcePage` (не Card shell, не shadcn Data Table). Surface lock: `UI_SURFACE = 'frame'` (`lib/ui-surface.ts`). Простые списки — shadcn `Table`.
 *Проверка:* `@/components/reui-kit`, `@/components/reui/data-grid`, `docs/ui-design-contract.md`.
 
+**WEB-06a** | MUST | Переключатели по роли UX:
+- секции страницы (Сеть / Операции / Справочники) — native `Tabs` default list (`SegmentedTabs`, [c-tabs-9](https://reui.io/preview/base/components/c-tabs-9));
+- статус грида (Все/Вкл) — `ToggleGroup` в toolbar (`StatusToggleGroup`, [c-toggle-group-5](https://reui.io/preview/base/components/c-toggle-group-5));
+- настройки — вертикальный Tabs rail ([settings-3](https://reui.io/preview/base/settings-3)).
+Не `variant="line"` для page/in-grid tabs.
+*Проверка:* `@/components/segmented-tabs`, `@/components/status-toggle-group`.
+
 **WEB-07** | MUST | Toast — `sonner` (`Toaster` в `main.tsx`); `toast.success/error/message` из `sonner`.
 *Проверка:* https://ui.shadcn.com/docs/components/sonner
 
diff --git a/AGENTS.md b/AGENTS.md
index c0015af..62dcd24 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -23,7 +23,7 @@
 | Конфиг BIRD, `birdc` | `internal/birdfmt/`, `internal/birddeploy/` |
 | Бандлы и подписи | `internal/bundle/`, `internal/signing/` |
 | Точки входа процессов | `cmd/*/` |
-| Веб (SvelteKit) | `web/` |
+| Веб (React + ReUI) | `apps/web/` |
 | Compose, деплой | `deploy/compose/` |
 
 Точки входа бинарников и их роли — в таблице в начале [docs/architecture.md](docs/architecture.md).
diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
index 0484a51..ccc52b2 100644
--- a/apps/web/eslint.config.js
+++ b/apps/web/eslint.config.js
@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import globals from 'globals'
 
 export default tseslint.config(
-  { ignores: ['dist', 'src/routeTree.gen.ts', 'src/components/blocks/**'] },
+  { ignores: ['dist', 'src/routeTree.gen.ts'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
diff --git a/apps/web/src/components/analytics/analytics-card-shell.tsx b/apps/web/src/components/analytics/analytics-card-shell.tsx
index 3870071..8d4529b 100644
--- a/apps/web/src/components/analytics/analytics-card-shell.tsx
+++ b/apps/web/src/components/analytics/analytics-card-shell.tsx
@@ -8,7 +8,7 @@ import {
   TooltipTrigger,
 } from '@evobgp/ui/components/tooltip'
 
-import { PanelCard } from '@/components/panel-card'
+import { FrameSection } from '@/components/reui-kit'
 
 /** Chart Frame shell — chart-1 spacing, not Card.
  * @see https://reui.io/preview/base/chart-1
@@ -51,7 +51,7 @@ export function AnalyticsCardShell({
   )
 
   return (
-    <PanelCard
+    <FrameSection
       title={titleNode}
       description={description}
       actions={actions}
@@ -61,6 +61,6 @@ export function AnalyticsCardShell({
       footerClassName={footer ? 'gap-2 px-5 py-4' : undefined}
     >
       {children}
-    </PanelCard>
+    </FrameSection>
   )
 }
diff --git a/apps/web/src/components/analytics/analytics-kpi-row.tsx b/apps/web/src/components/analytics/analytics-kpi-row.tsx
index 4a44722..134a5c9 100644
--- a/apps/web/src/components/analytics/analytics-kpi-row.tsx
+++ b/apps/web/src/components/analytics/analytics-kpi-row.tsx
@@ -1,4 +1,4 @@
-import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
+import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
 import { Badge } from '@/components/reui/badge'
 import { cn } from '@evobgp/ui/lib/utils'
 
diff --git a/apps/web/src/components/analytics/dashboard-platform-card.tsx b/apps/web/src/components/analytics/dashboard-platform-card.tsx
index 106f213..b19924f 100644
--- a/apps/web/src/components/analytics/dashboard-platform-card.tsx
+++ b/apps/web/src/components/analytics/dashboard-platform-card.tsx
@@ -114,7 +114,7 @@ export function DashboardPlatformCard({
           </Button>
           <Button
             className="flex-1"
-            onClick={() => navigate({ to: '/monitoring', search: { tab: 'system' } })}
+            onClick={() => navigate({ to: '/monitoring' })}
           >
             Мониторинг
           </Button>
diff --git a/apps/web/src/components/blocks/data-grid-base-7/components/columns.tsx b/apps/web/src/components/blocks/data-grid-base-7/components/columns.tsx
deleted file mode 100644
index 0cee6d9..0000000
--- a/apps/web/src/components/blocks/data-grid-base-7/components/columns.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import { type ComponentProps } from "react"
-import { Badge } from "@/components/reui/badge"
-import { type DataGridFeatures } from "@/components/reui/data-grid/data-grid"
-import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
-import { type ColumnDef } from "@tanstack/react-table"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import { Button } from "@evobgp/ui/components/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@evobgp/ui/components/dropdown-menu"
-import { type ModuleRecord, type ModuleStatus } from "./data"
-import { CalendarDaysIcon, FileTextIcon, StarIcon, MoreHorizontalIcon, CopyIcon, ArchiveIcon } from "lucide-react"
-
-export type ModuleRowAction = "open" | "favorite" | "duplicate" | "archive"
-
-const moduleStatusVariant: Record<
-  ModuleStatus,
-  ComponentProps<typeof Badge>["variant"]
-> = {
-  Planned: "info-outline",
-  Backlog: "outline",
-  "In Progress": "warning-outline",
-}
-
-const moduleStatusDotClass: Record<ModuleStatus, string> = {
-  Planned: "bg-sky-500 dark:bg-sky-400",
-  Backlog: "bg-muted-foreground/50",
-  "In Progress": "bg-amber-500 dark:bg-amber-400",
-}
-
-function DotSeparator() {
-  return (
-    <span
-      className="bg-muted-foreground/45 size-1 shrink-0 rounded-full"
-      aria-hidden="true"
-    />
-  )
-}
-
-function getProgressToneClass(value: number) {
-  if (value >= 75) return "text-emerald-500 dark:text-emerald-400"
-  if (value >= 40) return "text-amber-500 dark:text-amber-400"
-  if (value > 0) return "text-sky-500 dark:text-sky-400"
-
-  return "text-muted-foreground/35"
-}
-
-function getWindowDurationLabel(module: ModuleRecord) {
-  const start = new Date(module.dateStart).getTime()
-  const end = new Date(module.dateEnd).getTime()
-  const dayMs = 24 * 60 * 60 * 1000
-  const days = Math.max(1, Math.round((end - start) / dayMs))
-
-  return `${days}-day window`
-}
-
-function getCompactDateRange(module: ModuleRecord) {
-  return module.dateRange.replace(/, 2026/g, "")
-}
-
-function ModuleProgress({ module }: { module: ModuleRecord }) {
-  const value = module.progress
-  const radius = 18
-  const circumference = 2 * Math.PI * radius
-  const dashOffset = circumference - (value / 100) * circumference
-  const progressClassName = getProgressToneClass(value)
-
-  return (
-    <div className="flex min-w-0 items-center gap-2.5">
-      <div className="relative size-10 shrink-0">
-        <svg
-          viewBox="0 0 44 44"
-          className="absolute inset-0 size-10 -rotate-90"
-          aria-hidden="true"
-        >
-          <circle
-            cx="22"
-            cy="22"
-            r={radius}
-            fill="none"
-            className="stroke-muted-foreground/20"
-            strokeWidth="3.25"
-          />
-          <circle
-            cx="22"
-            cy="22"
-            r={radius}
-            fill="none"
-            className={cn("stroke-current", progressClassName)}
-            strokeWidth="3.25"
-            strokeLinecap="round"
-            strokeDasharray={circumference}
-            strokeDashoffset={dashOffset}
-          />
-        </svg>
-        <span className="text-muted-foreground absolute inset-0 flex items-center justify-center text-[9px] leading-none font-medium tabular-nums">
-          {value}%
-        </span>
-      </div>
-      <div className="flex min-w-0 flex-col gap-0.5">
-        <span className="text-foreground text-sm font-medium tabular-nums">
-          {value}% ready
-        </span>
-        <span className="text-muted-foreground truncate text-xs tabular-nums">
-          {module.tasksCompleted}/{module.tasksTotal} tasks
-        </span>
-      </div>
-    </div>
-  )
-}
-
-function ModuleNameCell({ module }: { module: ModuleRecord }) {
-  return (
-    <div className="flex min-w-0 flex-col gap-1">
-      <span className="text-foreground truncate text-sm leading-5 font-medium">
-        {module.name}
-      </span>
-      <div className="text-muted-foreground flex min-w-0 flex-wrap items-center gap-1.5 text-xs">
-        <span className="shrink-0">{module.kind}</span>
-        <DotSeparator />
-        <span className="truncate">{module.owner.name}</span>
-        <DotSeparator />
-        <span className="truncate font-mono tracking-wide uppercase">
-          {module.id}
-        </span>
-      </div>
-    </div>
-  )
-}
-
-function ModuleDateCell({ module }: { module: ModuleRecord }) {
-  return (
-    <div className="flex min-w-0 flex-col gap-0.5">
-      <span className="text-foreground truncate text-sm font-medium tabular-nums">
-        {getCompactDateRange(module)}
-      </span>
-      <span className="text-muted-foreground inline-flex min-w-0 items-center gap-1.5 truncate text-xs">
-        <CalendarDaysIcon className="size-3.5 shrink-0" aria-hidden="true" />
-        {getWindowDurationLabel(module)}
-      </span>
-    </div>
-  )
-}
-
-function ModuleStatusCell({ module }: { module: ModuleRecord }) {
-  return (
-    <Badge variant={moduleStatusVariant[module.status]}>
-      <span
-        className={cn(
-          "size-1.5 shrink-0 rounded-full!",
-          moduleStatusDotClass[module.status]
-        )}
-        aria-hidden="true"
-      />
-      {module.status}
-    </Badge>
-  )
-}
-
-function ModuleActions({
-  module,
-  onAction,
-}: {
-  module: ModuleRecord
-  onAction: (action: ModuleRowAction, module: ModuleRecord) => void
-}) {
-  return (
-    <div className="flex items-center justify-end gap-1">
-      <Button
-        type="button"
-        size="icon-sm"
-        variant="ghost"
-        aria-label={`Open ${module.name}`}
-        onClick={(event) => {
-          event.stopPropagation()
-          onAction("open", module)
-        }}
-      >
-        <FileTextIcon aria-hidden="true" />
-      </Button>
-      <Button
-        type="button"
-        size="icon-sm"
-        variant="ghost"
-        aria-label={`${module.favorite ? "Unfavorite" : "Favorite"} ${
-          module.name
-        }`}
-        className={cn(module.favorite && "text-amber-500")}
-        onClick={(event) => {
-          event.stopPropagation()
-          onAction("favorite", module)
-        }}
-      >
-        <StarIcon aria-hidden="true" />
-      </Button>
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          render={
-            <Button
-              type="button"
-              size="icon-sm"
-              variant="ghost"
-              aria-label={`More actions for ${module.name}`}
-              onClick={(event) => event.stopPropagation()}
-            />
-          }
-        >
-          <MoreHorizontalIcon aria-hidden="true" />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-40">
-          <DropdownMenuGroup>
-            <DropdownMenuItem onClick={() => onAction("duplicate", module)}>
-              <CopyIcon aria-hidden="true" />
-              Duplicate
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              variant="destructive"
-              onClick={() => onAction("archive", module)}
-            >
-              <ArchiveIcon aria-hidden="true" />
-              Archive
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}
-
-export function createModuleGridColumns({
-  onAction,
-}: {
-  onAction: (action: ModuleRowAction, module: ModuleRecord) => void
-}): ColumnDef<DataGridFeatures, ModuleRecord>[] {
-  return [
-    {
-      accessorKey: "progress",
-      id: "progress",
-      header: ({ column }) => (
-        <DataGridColumnHeader column={column} visibility={true} />
-      ),
-      cell: ({ row }) => <ModuleProgress module={row.original} />,
-      size: 210,
-      enableSorting: true,
-      enableHiding: false,
-      enableResizing: false,
-      meta: {
-        headerTitle: "Progress",
-      },
-    },
-    {
-      accessorKey: "name",
-      id: "name",
-      header: ({ column }) => (
-        <DataGridColumnHeader column={column} visibility={true} />
-      ),
-      cell: ({ row }) => <ModuleNameCell module={row.original} />,
-      minSize: 300,
-      enableSorting: true,
-      enableHiding: false,
-      enableResizing: false,
-      meta: {
-        autoSize: true,
-        headerTitle: "Module",
-      },
-    },
-    {
-      accessorKey: "dateStart",
-      id: "dateStart",
-      header: ({ column }) => (
-        <DataGridColumnHeader column={column} visibility={true} />
-      ),
-      cell: ({ row }) => <ModuleDateCell module={row.original} />,
-      sortFn: (rowA, rowB) =>
-        new Date(rowA.original.dateStart).getTime() -
-        new Date(rowB.original.dateStart).getTime(),
-      size: 180,
-      enableSorting: true,
-      enableHiding: false,
-      enableResizing: false,
-      meta: {
-        headerTitle: "Window",
-      },
-    },
-    {
-      accessorKey: "status",
-      id: "status",
-      header: ({ column }) => (
-        <DataGridColumnHeader column={column} visibility={true} />
-      ),
-      cell: ({ row }) => <ModuleStatusCell module={row.original} />,
-      size: 126,
-      enableSorting: true,
-      enableHiding: false,
-      enableResizing: false,
-      meta: {
-        headerTitle: "Status",
-      },
-    },
-    {
-      id: "actions",
-      header: ({ column }) => (
-        <DataGridColumnHeader column={column} visibility={true} />
-      ),
-      cell: ({ row }) => (
-        <ModuleActions module={row.original} onAction={onAction} />
-      ),
-      size: 104,
-      enableSorting: false,
-      enableHiding: false,
-      enableResizing: false,
-      meta: {
-        headerTitle: "Actions",
-      },
-    },
-  ]
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-base-7/components/data-grid-view.tsx b/apps/web/src/components/blocks/data-grid-base-7/components/data-grid-view.tsx
deleted file mode 100644
index 877470d..0000000
--- a/apps/web/src/components/blocks/data-grid-base-7/components/data-grid-view.tsx
+++ /dev/null
@@ -1,355 +0,0 @@
-import { useCallback, useMemo, useState } from "react"
-import { Badge } from "@/components/reui/badge"
-import {
-  DataGrid,
-  dataGridFeatures,
-} from "@/components/reui/data-grid/data-grid"
-import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
-import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
-import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
-import {
-  useTable,
-  type PaginationState,
-  type SortingState,
-} from "@tanstack/react-table"
-import { toast } from "sonner"
-
-import { Button } from "@evobgp/ui/components/button"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@evobgp/ui/components/dropdown-menu"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@evobgp/ui/components/input-group"
-import { createModuleGridColumns, type ModuleRowAction } from "./columns"
-import {
-  MODULE_RECORDS,
-  MODULE_STATUS_OPTIONS,
-  type ModuleRecord,
-  type ModuleStatus,
-} from "./data"
-import { FlagIcon, ChevronRightIcon, PackageIcon, SearchIcon, XIcon, ArrowUpDownIcon, ChevronDownIcon, FilterIcon } from "lucide-react"
-
-type ModuleSort = "name" | "dateStart" | "progress" | "status"
-
-const sortLabels: Record<ModuleSort, string> = {
-  name: "Name",
-  dateStart: "Window",
-  progress: "Progress",
-  status: "Status",
-}
-
-function buildSorting(sortBy: ModuleSort): SortingState {
-  return [{ id: sortBy, desc: false }]
-}
-
-function getModuleSearchBlob(module: ModuleRecord) {
-  return [
-    module.name,
-    module.id,
-    module.kind,
-    module.owner.name,
-    module.owner.role,
-    module.health,
-    module.status,
-    module.dateRange,
-  ]
-    .join(" ")
-    .toLowerCase()
-}
-
-export function ModulesDataGridView() {
-  const [modules, setModules] = useState<ModuleRecord[]>(MODULE_RECORDS)
-  const [searchQuery, setSearchQuery] = useState("")
-  const [selectedStatuses, setSelectedStatuses] = useState<ModuleStatus[]>([])
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 5,
-  })
-  const [sortBy, setSortBy] = useState<ModuleSort>("name")
-  const [sorting, setSorting] = useState<SortingState>(() =>
-    buildSorting("name")
-  )
-
-  const filteredModules = useMemo(() => {
-    const normalizedSearchQuery = searchQuery.trim().toLowerCase()
-
-    return modules.filter((module) => {
-      const matchesSearch =
-        normalizedSearchQuery.length === 0 ||
-        getModuleSearchBlob(module).includes(normalizedSearchQuery)
-      const matchesStatus =
-        selectedStatuses.length === 0 ||
-        selectedStatuses.includes(module.status)
-
-      return matchesSearch && matchesStatus
-    })
-  }, [modules, searchQuery, selectedStatuses])
-
-  const activeFilterCount = selectedStatuses.length
-
-  const resetPagination = useCallback(() => {
-    setPagination((current) => ({
-      ...current,
-      pageIndex: 0,
-    }))
-  }, [])
-
-  const handleSearchChange = useCallback(
-    (value: string) => {
-      setSearchQuery(value)
-      resetPagination()
-    },
-    [resetPagination]
-  )
-
-  const handleStatusToggle = useCallback(
-    (status: ModuleStatus, checked: boolean) => {
-      setSelectedStatuses((current) => {
-        if (checked) {
-          return current.includes(status) ? current : [...current, status]
-        }
-
-        return current.filter((item) => item !== status)
-      })
-      resetPagination()
-    },
-    [resetPagination]
-  )
-
-  const handleSortChange = useCallback(
-    (value: string) => {
-      const nextSort = value as ModuleSort
-      setSortBy(nextSort)
-      setSorting(buildSorting(nextSort))
-      resetPagination()
-    },
-    [resetPagination]
-  )
-
-  const handleModuleAction = useCallback(
-    (action: ModuleRowAction, module: ModuleRecord) => {
-      if (action === "favorite") {
-        setModules((current) =>
-          current.map((item) =>
-            item.id === module.id
-              ? {
-                  ...item,
-                  favorite: !item.favorite,
-                }
-              : item
-          )
-        )
-        toast.success(module.favorite ? "Removed favorite" : "Module starred", {
-          description: module.name,
-        })
-        return
-      }
-
-      if (action === "open") {
-        toast.info("Open module", {
-          description: `${module.name} (${module.kind})`,
-        })
-        return
-      }
-
-      toast.message(
-        action === "duplicate" ? "Duplicate module" : "Archive module",
-        {
-          description: `Connect this action to your ${module.name} module flow.`,
-        }
-      )
-    },
-    []
-  )
-
-  const handleAddModule = () => {
-    toast.success("Add module", {
-      description: "Open your module creation dialog from this primary action.",
-    })
-  }
-
-  const columns = useMemo(
-    () => createModuleGridColumns({ onAction: handleModuleAction }),
-    [handleModuleAction]
-  )
-
-  // eslint-disable-next-line react-hooks/incompatible-library
-  const table = useTable({
-    features: dataGridFeatures,
-    data: filteredModules,
-    columns,
-    pageCount: Math.ceil(filteredModules.length / pagination.pageSize),
-    state: {
-      pagination,
-      sorting,
-    },
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    getRowId: (row) => row.id,
-  })
-
-  return (
-    <DataGrid
-      table={table}
-      recordCount={filteredModules.length}
-      emptyMessage="No modules match the selected filters."
-      tableLayout={{
-        dense: true,
-        rowBorder: true,
-        headerSticky: false,
-        columnsVisibility: false,
-        columnsResizable: false,
-        columnsMovable: false,
-        width: "fixed",
-      }}
-      tableClassNames={{
-        bodyRow: "group/module-row [&>td]:h-16",
-      }}
-    >
-      <div className="flex w-full max-w-6xl flex-col">
-        <div className="flex flex-col gap-3 border-b px-0 py-3 lg:min-h-14 lg:flex-row lg:items-center lg:gap-4 lg:py-0">
-          <div className="flex min-w-0 items-center gap-2">
-            <FlagIcon className="size-3.5 shrink-0 fill-amber-400 text-amber-400" aria-hidden="true" />
-            <span className="text-muted-foreground truncate text-sm">
-              Keenthemes
-            </span>
-            <ChevronRightIcon className="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
-            <PackageIcon className="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
-            <h2 className="text-foreground truncate text-sm font-medium">
-              Modules
-            </h2>
-          </div>
-
-          <div className="flex min-w-0 flex-wrap items-center gap-2 lg:ml-auto lg:flex-nowrap">
-            <InputGroup className="w-full min-w-40 sm:w-48">
-              <InputGroupAddon align="inline-start">
-                <SearchIcon className="text-muted-foreground size-4" aria-hidden="true" />
-              </InputGroupAddon>
-              <InputGroupInput
-                value={searchQuery}
-                onChange={(event) => handleSearchChange(event.target.value)}
-                placeholder="Search..."
-                aria-label="Search modules"
-              />
-              {searchQuery.length > 0 ? (
-                <InputGroupAddon align="inline-end">
-                  <InputGroupButton
-                    size="icon-xs"
-                    aria-label="Clear search"
-                    onClick={() => handleSearchChange("")}
-                  >
-                    <XIcon className="size-4" aria-hidden="true" />
-                  </InputGroupButton>
-                </InputGroupAddon>
-              ) : null}
-            </InputGroup>
-
-            <DropdownMenu modal={false}>
-              <DropdownMenuTrigger
-                render={
-                  <Button type="button" variant="outline">
-                    <ArrowUpDownIcon data-icon="inline-start" aria-hidden="true" />
-                    {sortLabels[sortBy]}
-                    <ChevronDownIcon data-icon="inline-end" aria-hidden="true" />
-                  </Button>
-                }
-              />
-              <DropdownMenuContent align="end" className="min-w-44">
-                <DropdownMenuGroup>
-                  {(["name", "dateStart", "progress", "status"] as const).map(
-                    (value) => (
-                      <DropdownMenuItem
-                        key={value}
-                        onClick={() => handleSortChange(value)}
-                      >
-                        {sortLabels[value]}
-                      </DropdownMenuItem>
-                    )
-                  )}
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <DropdownMenu modal={false}>
-              <DropdownMenuTrigger
-                render={
-                  <Button type="button" variant="outline">
-                    <FilterIcon data-icon="inline-start" aria-hidden="true" />
-                    Filters
-                    {activeFilterCount > 0 ? (
-                      <Badge variant="outline" radius="full">
-                        {activeFilterCount}
-                      </Badge>
-                    ) : null}
-                  </Button>
-                }
-              />
-              <DropdownMenuContent align="end" className="min-w-48">
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>Status</DropdownMenuLabel>
-                  {MODULE_STATUS_OPTIONS.map((status) => (
-                    <DropdownMenuCheckboxItem
-                      key={status}
-                      checked={selectedStatuses.includes(status)}
-                      closeOnClick={false}
-                      onCheckedChange={(checked) =>
-                        handleStatusToggle(status, checked === true)
-                      }
-                    >
-                      {status}
-                    </DropdownMenuCheckboxItem>
-                  ))}
-                </DropdownMenuGroup>
-                {activeFilterCount > 0 ? (
-                  <>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem
-                      closeOnClick={false}
-                      onClick={() => {
-                        setSelectedStatuses([])
-                        resetPagination()
-                      }}
-                    >
-                      Reset filters
-                    </DropdownMenuItem>
-                  </>
-                ) : null}
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <Button type="button" onClick={handleAddModule}>
-              Add Module
-            </Button>
-          </div>
-        </div>
-
-        <DataGridScrollArea>
-          <DataGridTable />
-        </DataGridScrollArea>
-
-        <div className="border-t px-0 py-3">
-          {filteredModules.length > 0 ? (
-            <DataGridPagination
-              sizes={[5, 10, 15]}
-              info="{from} - {to} of {count} modules"
-              className="py-0"
-            />
-          ) : (
-            <p className="text-muted-foreground text-sm">0 modules</p>
-          )}
-        </div>
-      </div>
-    </DataGrid>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-base-7/components/data.tsx b/apps/web/src/components/blocks/data-grid-base-7/components/data.tsx
deleted file mode 100644
index 17bcfcc..0000000
--- a/apps/web/src/components/blocks/data-grid-base-7/components/data.tsx
+++ /dev/null
@@ -1,394 +0,0 @@
-export type ModuleStatus = "Planned" | "Backlog" | "In Progress"
-
-export type ModuleKind = "System" | "Feature" | "Area"
-
-export type ModuleHealth = "On Track" | "Watch" | "Blocked"
-
-export interface ModuleOwner {
-  name: string
-  initials: string
-  role: string
-  avatarSrc: string
-}
-
-export interface ModuleRecord {
-  id: string
-  name: string
-  kind: ModuleKind
-  owner: ModuleOwner
-  progress: number
-  tasksCompleted: number
-  tasksTotal: number
-  contributors: number
-  blockers: number
-  health: ModuleHealth
-  dateStart: string
-  dateEnd: string
-  dateRange: string
-  status: ModuleStatus
-  favorite: boolean
-}
-
-export const MODULE_STATUS_OPTIONS: ModuleStatus[] = [
-  "Planned",
-  "Backlog",
-  "In Progress",
-]
-
-const moduleOwners = {
-  maya: {
-    name: "Maya Patel",
-    initials: "MP",
-    role: "Release lead",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80",
-  },
-  jonah: {
-    name: "Jonah Lee",
-    initials: "JL",
-    role: "Product ops",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&dpr=2&q=80",
-  },
-  nina: {
-    name: "Nina Santos",
-    initials: "NS",
-    role: "Workspace admin",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=80&h=80&dpr=2&q=80",
-  },
-  elijah: {
-    name: "Elijah Morgan",
-    initials: "EM",
-    role: "Billing lead",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&dpr=2&q=80",
-  },
-  priya: {
-    name: "Priya Shah",
-    initials: "PS",
-    role: "Lifecycle PM",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=80&h=80&dpr=2&q=80",
-  },
-  omar: {
-    name: "Omar Haddad",
-    initials: "OH",
-    role: "Security owner",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&h=80&dpr=2&q=80",
-  },
-  sofia: {
-    name: "Sofia Romero",
-    initials: "SR",
-    role: "Content lead",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&dpr=2&q=80",
-  },
-  kenji: {
-    name: "Kenji Tan",
-    initials: "KT",
-    role: "Platform lead",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=80&h=80&dpr=2&q=80",
-  },
-  lena: {
-    name: "Lena Brooks",
-    initials: "LB",
-    role: "Developer tools",
-    avatarSrc:
-      "https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=80&h=80&dpr=2&q=80",
-  },
-} satisfies Record<string, ModuleOwner>
-
-export const MODULE_RECORDS: ModuleRecord[] = [
-  {
-    id: "core-workflow",
-    name: "Core Workflow",
-    kind: "System",
-    owner: moduleOwners.maya,
-    progress: 25,
-    tasksCompleted: 8,
-    tasksTotal: 32,
-    contributors: 6,
-    blockers: 0,
-    health: "On Track",
-    dateStart: "2026-04-17",
-    dateEnd: "2026-05-01",
-    dateRange: "Apr 17 - May 01, 2026",
-    status: "Planned",
-    favorite: false,
-  },
-  {
-    id: "onboarding-flow",
-    name: "Onboarding Flow",
-    kind: "Feature",
-    owner: moduleOwners.jonah,
-    progress: 0,
-    tasksCompleted: 0,
-    tasksTotal: 18,
-    contributors: 4,
-    blockers: 0,
-    health: "Watch",
-    dateStart: "2026-04-19",
-    dateEnd: "2026-05-03",
-    dateRange: "Apr 19 - May 03, 2026",
-    status: "Backlog",
-    favorite: false,
-  },
-  {
-    id: "workspace-setup",
-    name: "Workspace Setup",
-    kind: "Area",
-    owner: moduleOwners.nina,
-    progress: 0,
-    tasksCompleted: 2,
-    tasksTotal: 14,
-    contributors: 3,
-    blockers: 1,
-    health: "Blocked",
-    dateStart: "2026-04-21",
-    dateEnd: "2026-05-05",
-    dateRange: "Apr 21 - May 05, 2026",
-    status: "In Progress",
-    favorite: false,
-  },
-  {
-    id: "permission-matrix",
-    name: "Permission Matrix",
-    kind: "System",
-    owner: moduleOwners.maya,
-    progress: 42,
-    tasksCompleted: 11,
-    tasksTotal: 26,
-    contributors: 5,
-    blockers: 0,
-    health: "Watch",
-    dateStart: "2026-04-22",
-    dateEnd: "2026-05-06",
-    dateRange: "Apr 22 - May 06, 2026",
-    status: "In Progress",
-    favorite: true,
-  },
-  {
-    id: "billing-rules",
-    name: "Billing Rules",
-    kind: "Feature",
-    owner: moduleOwners.elijah,
-    progress: 64,
-    tasksCompleted: 21,
-    tasksTotal: 33,
-    contributors: 7,
-    blockers: 0,
-    health: "On Track",
-    dateStart: "2026-04-18",
-    dateEnd: "2026-05-02",
-    dateRange: "Apr 18 - May 02, 2026",
-    status: "In Progress",
-    favorite: false,
-  },
-  {
-    id: "notification-center",
-    name: "Notification Center",
-    kind: "Area",
-    owner: moduleOwners.priya,
-    progress: 18,
-    tasksCompleted: 5,
-    tasksTotal: 28,
-    contributors: 4,
-    blockers: 2,
-    health: "Blocked",
-    dateStart: "2026-04-23",
-    dateEnd: "2026-05-09",
-    dateRange: "Apr 23 - May 09, 2026",
-    status: "Backlog",
-    favorite: false,
-  },
-  {
-    id: "audit-trail",
-    name: "Audit Trail",
-    kind: "System",
-    owner: moduleOwners.omar,
-    progress: 76,
-    tasksCompleted: 19,
-    tasksTotal: 25,
-    contributors: 5,
-    blockers: 0,
-    health: "On Track",
-    dateStart: "2026-04-15",
-    dateEnd: "2026-04-30",
-    dateRange: "Apr 15 - Apr 30, 2026",
-    status: "In Progress",
-    favorite: true,
-  },
-  {
-    id: "template-library",
-    name: "Template Library",
-    kind: "Feature",
-    owner: moduleOwners.sofia,
-    progress: 33,
-    tasksCompleted: 10,
-    tasksTotal: 30,
-    contributors: 6,
-    blockers: 0,
-    health: "Watch",
-    dateStart: "2026-04-24",
-    dateEnd: "2026-05-10",
-    dateRange: "Apr 24 - May 10, 2026",
-    status: "Planned",
-    favorite: false,
-  },
-  {
-    id: "integration-hub",
-    name: "Integration Hub",
-    kind: "Area",
-    owner: moduleOwners.kenji,
-    progress: 58,
-    tasksCompleted: 14,
-    tasksTotal: 24,
-    contributors: 8,
-    blockers: 1,
-    health: "Watch",
-    dateStart: "2026-04-20",
-    dateEnd: "2026-05-04",
-    dateRange: "Apr 20 - May 04, 2026",
-    status: "In Progress",
-    favorite: false,
-  },
-  {
-    id: "api-console",
-    name: "API Console",
-    kind: "Feature",
-    owner: moduleOwners.lena,
-    progress: 91,
-    tasksCompleted: 29,
-    tasksTotal: 32,
-    contributors: 4,
-    blockers: 0,
-    health: "On Track",
-    dateStart: "2026-04-12",
-    dateEnd: "2026-04-26",
-    dateRange: "Apr 12 - Apr 26, 2026",
-    status: "In Progress",
-    favorite: true,
-  },
-  {
-    id: "role-automation",
-    name: "Role Automation",
-    kind: "System",
-    owner: moduleOwners.maya,
-    progress: 12,
-    tasksCompleted: 3,
-    tasksTotal: 25,
-    contributors: 3,
-    blockers: 1,
-    health: "Blocked",
-    dateStart: "2026-04-25",
-    dateEnd: "2026-05-12",
-    dateRange: "Apr 25 - May 12, 2026",
-    status: "Backlog",
-    favorite: false,
-  },
-  {
-    id: "workspace-invites",
-    name: "Workspace Invites",
-    kind: "Feature",
-    owner: moduleOwners.jonah,
-    progress: 47,
-    tasksCompleted: 15,
-    tasksTotal: 32,
-    contributors: 5,
-    blockers: 0,
-    health: "Watch",
-    dateStart: "2026-04-19",
-    dateEnd: "2026-05-06",
-    dateRange: "Apr 19 - May 06, 2026",
-    status: "Planned",
-    favorite: false,
-  },
-  {
-    id: "release-checklist",
-    name: "Release Checklist",
-    kind: "Area",
-    owner: moduleOwners.nina,
-    progress: 84,
-    tasksCompleted: 26,
-    tasksTotal: 31,
-    contributors: 7,
-    blockers: 0,
-    health: "On Track",
-    dateStart: "2026-04-16",
-    dateEnd: "2026-05-01",
-    dateRange: "Apr 16 - May 01, 2026",
-    status: "In Progress",
-    favorite: false,
-  },
-  {
-    id: "reporting-digest",
-    name: "Reporting Digest",
-    kind: "Feature",
-    owner: moduleOwners.priya,
-    progress: 5,
-    tasksCompleted: 2,
-    tasksTotal: 38,
-    contributors: 3,
-    blockers: 0,
-    health: "Watch",
-    dateStart: "2026-04-28",
-    dateEnd: "2026-05-16",
-    dateRange: "Apr 28 - May 16, 2026",
-    status: "Backlog",
-    favorite: false,
-  },
-  {
-    id: "security-review",
-    name: "Security Review",
-    kind: "System",
-    owner: moduleOwners.omar,
-    progress: 69,
-    tasksCompleted: 18,
-    tasksTotal: 26,
-    contributors: 6,
-    blockers: 2,
-    health: "Blocked",
-    dateStart: "2026-04-18",
-    dateEnd: "2026-05-07",
-    dateRange: "Apr 18 - May 07, 2026",
-    status: "In Progress",
-    favorite: false,
-  },
-  {
-    id: "help-center",
-    name: "Help Center",
-    kind: "Area",
-    owner: moduleOwners.sofia,
-    progress: 39,
-    tasksCompleted: 9,
-    tasksTotal: 23,
-    contributors: 4,
-    blockers: 0,
-    health: "On Track",
-    dateStart: "2026-04-23",
-    dateEnd: "2026-05-11",
-    dateRange: "Apr 23 - May 11, 2026",
-    status: "Planned",
-    favorite: false,
-  },
-  {
-    id: "data-retention",
-    name: "Data Retention",
-    kind: "System",
-    owner: moduleOwners.kenji,
-    progress: 22,
-    tasksCompleted: 7,
-    tasksTotal: 32,
-    contributors: 5,
-    blockers: 1,
-    health: "Watch",
-    dateStart: "2026-04-27",
-    dateEnd: "2026-05-14",
-    dateRange: "Apr 27 - May 14, 2026",
-    status: "Backlog",
-    favorite: false,
-  },
-]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-base-7/page.tsx b/apps/web/src/components/blocks/data-grid-base-7/page.tsx
deleted file mode 100644
index c1a2d93..0000000
--- a/apps/web/src/components/blocks/data-grid-base-7/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ModulesDataGridView } from "./components/data-grid-view"
-
-export function Page() {
-  return (
-    <main
-      className="mx-auto flex min-h-svh w-full max-w-6xl items-start justify-center p-4 pt-8 sm:p-8 sm:pt-12"
-      aria-labelledby="page-heading"
-    >
-      <h1 id="page-heading" className="sr-only">
-        Modules data grid
-      </h1>
-      <ModulesDataGridView />
-    </main>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx
deleted file mode 100644
index a72aba5..0000000
--- a/apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx
+++ /dev/null
@@ -1,394 +0,0 @@
-"use client"
-
-import { type ReactNode } from "react"
-import { Badge } from "@/components/reui/badge"
-import { type DataGridFeatures } from "@/components/reui/data-grid/data-grid"
-import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
-import {
-  DataGridTableRowSelect,
-  DataGridTableRowSelectAll,
-} from "@/components/reui/data-grid/data-grid-table"
-import { Rating } from "@/components/reui/rating"
-import { type ColumnDef } from "@tanstack/react-table"
-import { format, parseISO } from "date-fns"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@evobgp/ui/components/avatar"
-import { Button } from "@evobgp/ui/components/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@evobgp/ui/components/dropdown-menu"
-import { Item, ItemMedia } from "@evobgp/ui/components/item"
-import { Switch } from "@evobgp/ui/components/switch"
-import {
-  type AutomationKind,
-  type AutomationOwnerAvailability,
-  type AutomationState,
-  type IAutomationRecord,
-} from "./data"
-import { GitBranchIcon, RouteIcon, SparklesIcon, MailIcon, BellRingIcon, EllipsisVerticalIcon, PencilIcon, EyeIcon, CircleCheckIcon, ArchiveIcon } from "lucide-react"
-
-export type AutomationAction = "edit" | "open" | "archive"
-
-const automationKindStyles: Record<
-  AutomationKind,
-  { chipClassName: string; icon: ReactNode }
-> = {
-  sequence: {
-    chipClassName: "text-sky-600 dark:text-sky-300",
-    icon: (
-      <GitBranchIcon className="size-4" aria-hidden="true" />
-    ),
-  },
-  routing: {
-    chipClassName: "text-violet-600 dark:text-violet-300",
-    icon: (
-      <RouteIcon className="size-4" aria-hidden="true" />
-    ),
-  },
-  enrichment: {
-    chipClassName: "text-emerald-600 dark:text-emerald-300",
-    icon: (
-      <SparklesIcon className="size-4" aria-hidden="true" />
-    ),
-  },
-  digest: {
-    chipClassName: "text-amber-600 dark:text-amber-300",
-    icon: (
-      <MailIcon className="size-4" aria-hidden="true" />
-    ),
-  },
-  escalation: {
-    chipClassName: "text-rose-600 dark:text-rose-300",
-    icon: (
-      <BellRingIcon className="size-4" aria-hidden="true" />
-    ),
-  },
-}
-
-const stateBadgeStyles: Record<
-  AutomationState,
-  { label: string; dotClassName?: string }
-> = {
-  live: {
-    label: "Live",
-    dotClassName: "bg-emerald-500",
-  },
-  review: {
-    label: "Needs approval",
-    dotClassName: "bg-amber-500",
-  },
-  drafts: {
-    label: "Draft",
-    dotClassName: "bg-slate-400 dark:bg-slate-300",
-  },
-  paused: {
-    label: "Paused",
-    dotClassName: "bg-zinc-400 dark:bg-zinc-300",
-  },
-}
-
-const updatedBucketLabel: Record<IAutomationRecord["updatedBucket"], string> = {
-  today: "Today",
-  "this-week": "This week",
-  older: "Older",
-}
-
-const availabilityColor: Record<AutomationOwnerAvailability, string> = {
-  online: "bg-green-500",
-  away: "bg-yellow-400",
-  busy: "bg-red-500",
-  offline: "bg-gray-500",
-}
-
-function AutomationKindChip({ kind }: { kind: AutomationKind }) {
-  const style = automationKindStyles[kind]
-
-  return (
-    <Item
-      render={<span />}
-      className={cn(
-        "p-0",
-        "border-background bg-muted flex size-9 items-center justify-center border-2 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4",
-        style.chipClassName
-      )}
-      aria-hidden="true"
-    >
-      <ItemMedia variant="icon" className="size-auto">
-        {style.icon}
-      </ItemMedia>
-    </Item>
-  )
-}
-
-function AutomationNameCell({ automation }: { automation: IAutomationRecord }) {
-  return (
-    <div className="flex min-w-0 items-center gap-3">
-      <AutomationKindChip kind={automation.kind} />
-      <div className="flex min-w-0 flex-col gap-px">
-        <span className="text-foreground truncate text-sm font-medium">
-          {automation.title}
-        </span>
-        <div className="text-muted-foreground flex min-w-0 items-center gap-1.5 text-xs">
-          <span className="truncate">{automation.runWindowLabel}</span>
-          <span
-            className="bg-input size-1 shrink-0 rounded-full"
-            aria-hidden="true"
-          />
-          <span className="truncate">{automation.audienceLabel}</span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function OwnerCell({ automation }: { automation: IAutomationRecord }) {
-  return (
-    <div className="flex items-center gap-2">
-      <div className="relative shrink-0">
-        <Avatar className="size-8">
-          {automation.owner.avatar ? (
-            <AvatarImage
-              src={automation.owner.avatar}
-              alt={automation.owner.name}
-            />
-          ) : null}
-          <AvatarFallback>{automation.owner.initials}</AvatarFallback>
-        </Avatar>
-        <span
-          className={cn(
-            "ring-background absolute right-0 bottom-0.5 size-2 rounded-full ring-2",
-            availabilityColor[automation.owner.availability]
-          )}
-          aria-hidden
-        />
-      </div>
-      <div className="min-w-0">
-        <div className="text-foreground line-clamp-1 font-medium">
-          {automation.owner.name}
-        </div>
-        <div
-          className="text-muted-foreground line-clamp-1 text-xs"
-          title={automation.owner.email}
-        >
-          {automation.owner.email}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function StateCell({ automation }: { automation: IAutomationRecord }) {
-  const stateStyle = stateBadgeStyles[automation.state]
-
-  return (
-    <div className="flex min-w-0 items-center">
-      <Badge variant="outline" className="gap-1.5">
-        {stateStyle.dotClassName ? (
-          <span
-            className={cn(
-              "size-1.5 shrink-0 rounded-full",
-              stateStyle.dotClassName
-            )}
-            aria-hidden="true"
-          />
-        ) : null}
-        {stateStyle.label}
-      </Badge>
-    </div>
-  )
-}
-
-function UpdatedCell({ automation }: { automation: IAutomationRecord }) {
-  return (
-    <div className="flex min-w-0 flex-col gap-px">
-      <span className="text-foreground text-sm">
-        {format(parseISO(automation.updatedAt), "MMM d, yyyy")}
-      </span>
-      <span className="text-muted-foreground text-xs">
-        {updatedBucketLabel[automation.updatedBucket]}
-      </span>
-    </div>
-  )
-}
-
-function RatingCell({ automation }: { automation: IAutomationRecord }) {
-  return <Rating rating={automation.rating} size="sm" showValue={true} />
-}
-
-function AutomationActionsCell({
-  automation,
-  onAction,
-  onToggleEnabled,
-}: {
-  automation: IAutomationRecord
-  onAction: (action: AutomationAction, automation: IAutomationRecord) => void
-  onToggleEnabled: (automation: IAutomationRecord, nextValue: boolean) => void
-}) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        render={
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            aria-label={`Open actions for ${automation.title}`}
-          >
-            <EllipsisVerticalIcon className="size-4" aria-hidden="true" />
-          </Button>
-        }
-      />
-      {/* Content */}
-      <DropdownMenuContent align="end" className="w-52">
-        <DropdownMenuGroup>
-          <DropdownMenuItem onClick={() => onAction("edit", automation)}>
-            <PencilIcon className="size-4" aria-hidden="true" />
-            Edit
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onAction("open", automation)}>
-            <EyeIcon className="size-4" aria-hidden="true" />
-            View Details
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            closeOnClick={false}
-            onClick={(event) => {
-              // The Switch toggles itself and its click bubbles here; skip it
-              // so item-level activation (row click, Enter/Space) toggles once.
-              if (
-                event.target instanceof Element &&
-                event.target.closest('[data-slot="switch"]')
-              ) {
-                return
-              }
-              onToggleEnabled(automation, !automation.enabled)
-            }}
-            className="justify-between gap-4"
-          >
-            <span className="flex items-center gap-2">
-              <CircleCheckIcon className="size-4" aria-hidden="true" />
-              Enabled
-            </span>
-            <Switch
-              size="sm"
-              aria-label={`Toggle ${automation.title}`}
-              checked={automation.enabled}
-              onCheckedChange={(checked) =>
-                onToggleEnabled(automation, checked)
-              }
-            />
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            variant="destructive"
-            onClick={() => onAction("archive", automation)}
-          >
-            <ArchiveIcon className="size-4" aria-hidden="true" />
-            Archive
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-export function createAutomationColumns({
-  onAction,
-  onToggleEnabled,
-}: {
-  onAction: (action: AutomationAction, automation: IAutomationRecord) => void
-  onToggleEnabled: (automation: IAutomationRecord, nextValue: boolean) => void
-}): ColumnDef<DataGridFeatures, IAutomationRecord>[] {
-  return [
-    {
-      id: "select",
-      header: () => <DataGridTableRowSelectAll />,
-      cell: ({ row }) => <DataGridTableRowSelect row={row} />,
-      size: 30,
-      enableSorting: false,
-      enableResizing: false,
-      enableHiding: false,
-    },
-    {
-      accessorFn: (row) => row.title,
-      id: "workflow",
-      header: ({ column }) => (
-        <DataGridColumnHeader title="Workflow" column={column} />
-      ),
-      cell: ({ row }) => <AutomationNameCell automation={row.original} />,
-      size: 340,
-      minSize: 200,
-      enableSorting: true,
-      enableHiding: false,
-      meta: {
-        autoSize: true,
-        headerClassName: "pl-3!",
-        cellClassName: "pl-3!",
-      },
-    },
-    {
-      accessorFn: (row) => row.owner.name,
-      id: "owner",
-      header: ({ column }) => (
-        <DataGridColumnHeader title="Owner" column={column} />
-      ),
-      cell: ({ row }) => <OwnerCell automation={row.original} />,
-      size: 175,
-      enableSorting: true,
-    },
-    {
-      accessorFn: (row) => row.rating,
-      id: "rating",
-      header: ({ column }) => (
-        <DataGridColumnHeader title="Score" column={column} />
-      ),
-      cell: ({ row }) => <RatingCell automation={row.original} />,
-      size: 150,
-      enableSorting: true,
-    },
-    {
-      accessorFn: (row) => row.state,
-      id: "state",
-      header: ({ column }) => (
-        <DataGridColumnHeader title="State" column={column} />
-      ),
-      cell: ({ row }) => <StateCell automation={row.original} />,
-      size: 150,
-      enableSorting: true,
-    },
-    {
-      accessorFn: (row) => parseISO(row.updatedAt).getTime(),
-      id: "updatedAt",
-      header: ({ column }) => (
-        <DataGridColumnHeader title="Last updated" column={column} />
-      ),
-      cell: ({ row }) => <UpdatedCell automation={row.original} />,
-      size: 125,
-      enableSorting: true,
-    },
-    {
-      id: "actions",
-      header: () => null,
-      cell: ({ row }) => (
-        <div className="flex items-center justify-end">
-          <AutomationActionsCell
-            automation={row.original}
-            onAction={onAction}
-            onToggleEnabled={onToggleEnabled}
-          />
-        </div>
-      ),
-      size: 56,
-      enableSorting: false,
-    },
-  ]
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
deleted file mode 100644
index da1f67b..0000000
--- a/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
+++ /dev/null
@@ -1,679 +0,0 @@
-import { useCallback, useMemo, useState } from "react"
-import { Badge } from "@/components/reui/badge"
-import {
-  DataGrid,
-  dataGridFeatures,
-} from "@/components/reui/data-grid/data-grid"
-import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
-import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
-import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
-import { Filters } from "@/components/reui/filters/filters"
-import {
-  createFilterQuery,
-  createFilterRule,
-  flattenFilterConditions,
-} from "@/components/reui/filters/filters-query"
-import type { FilterCondition } from "@/components/reui/filters/filters-query"
-import type {
-  FilterField,
-  FilterQuery,
-} from "@/components/reui/filters/filters-types"
-import {
-  Frame,
-  FrameDescription,
-  FrameFooter,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from "@/components/reui/frame"
-import {
-  useTable,
-  type PaginationState,
-  type RowSelectionState,
-  type SortingState,
-} from "@tanstack/react-table"
-import { toast } from "sonner"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@evobgp/ui/components/alert-dialog"
-import { Button } from "@evobgp/ui/components/button"
-import { Separator } from "@evobgp/ui/components/separator"
-import { Tabs, TabsList, TabsTrigger } from "@evobgp/ui/components/tabs"
-import { createAutomationColumns } from "./columns"
-import {
-  AUTOMATION_TABS,
-  AUTOMATIONS,
-  DELIVERY_FILTER_OPTIONS,
-  getAutomationTabFromState,
-  OWNER_FILTER_OPTIONS,
-  UPDATED_FILTER_OPTIONS,
-  type AutomationState,
-  type AutomationTab,
-  type IAutomationRecord,
-} from "./data"
-import { SearchIcon, UsersIcon, RouteIcon, ClockIcon, PlusIcon, FilterIcon, FunnelXIcon } from "lucide-react"
-
-type ToastTone = "success" | "neutral" | "destructive"
-
-const toneStyles: Record<ToastTone, { dot: string }> = {
-  success: { dot: "bg-emerald-500" },
-  neutral: { dot: "bg-sky-500" },
-  destructive: { dot: "bg-rose-500" },
-}
-
-function showAutomationToast({
-  tone,
-  title,
-  description,
-}: {
-  tone: ToastTone
-  title: string
-  description: string
-}) {
-  toast.custom((id) => (
-    <div className="bg-popover text-popover-foreground border-border flex w-[356px] flex-col gap-3 rounded-md border p-4 shadow-lg">
-      <div className="flex items-start gap-2">
-        <span
-          className={cn(
-            "mt-1 flex size-2 shrink-0 rounded-full",
-            toneStyles[tone].dot
-          )}
-          aria-hidden="true"
-        />
-        <div className="flex flex-1 flex-col gap-1">
-          <p className="text-sm font-semibold">{title}</p>
-          <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
-            {description}
-          </p>
-        </div>
-      </div>
-      <div className="flex gap-2">
-        <Button size="xs" variant="outline" onClick={() => toast.dismiss(id)}>
-          Done
-        </Button>
-      </div>
-    </div>
-  ))
-}
-
-function getAutomationSearchBlob(automation: IAutomationRecord) {
-  return [
-    automation.title,
-    automation.kind,
-    automation.state,
-    automation.deliveryMode,
-    automation.audienceLabel,
-    automation.runWindowLabel,
-    automation.owner.name,
-    automation.owner.email,
-    automation.owner.teamLabel,
-    automation.approvalRequired ? "approval required" : "auto-approved",
-    automation.enabled ? "enabled" : "disabled",
-  ]
-    .join(" ")
-    .toLowerCase()
-}
-
-/** Operators that take no value, so an empty `values` list is expected. */
-const VALUELESS_OPERATORS = new Set(["empty", "not_empty"])
-
-function getActiveFilters(filters: FilterCondition[]) {
-  return filters.filter((filter) => {
-    const { operator, values } = filter
-    if (VALUELESS_OPERATORS.has(operator)) return true
-    if (!values || values.length === 0) return false
-    if (
-      values.every((value) => typeof value === "string" && value.trim() === "")
-    ) {
-      return false
-    }
-    if (values.every((value) => value === null || value === undefined)) {
-      return false
-    }
-    if (values.every((value) => Array.isArray(value) && value.length === 0)) {
-      return false
-    }
-    return true
-  })
-}
-
-function renderSelectedCount(values: unknown[]) {
-  if (values.length === 0) return "Select..."
-  if (values.length > 1) return `${values.length} selected`
-  return null
-}
-
-function renderSingleSelectedLabel(
-  values: unknown[],
-  options: { value: string; label: string }[]
-) {
-  const state = renderSelectedCount(values)
-  if (state) return state
-
-  const option = options.find((item) => item.value === values[0])
-  return option?.label ?? String(values[0])
-}
-
-function filterFieldValue(
-  automation: IAutomationRecord,
-  field: string
-): unknown {
-  switch (field) {
-    case "workflow":
-      return getAutomationSearchBlob(automation)
-    case "ownerTeam":
-      return automation.owner.team
-    case "deliveryMode":
-      return automation.deliveryMode
-    case "updatedBucket":
-      return automation.updatedBucket
-    default:
-      return ""
-  }
-}
-
-function matchesFilterCondition(
-  fieldValue: unknown,
-  operator: string,
-  values: unknown[]
-): boolean {
-  switch (operator) {
-    case "is":
-      return values.includes(fieldValue)
-    case "is_not":
-      return !values.includes(fieldValue)
-    case "is_any_of":
-      return values.some((value) => fieldValue === value)
-    case "is_none_of":
-      return !values.some((value) => fieldValue === value)
-    case "contains": {
-      const tokens = values.map((value) => String(value).trim()).filter(Boolean)
-      if (tokens.length === 0) return true
-      return tokens.some((token) =>
-        String(fieldValue).toLowerCase().includes(token.toLowerCase())
-      )
-    }
-    case "not_contains":
-      return !values.some((value) =>
-        String(fieldValue).toLowerCase().includes(String(value).toLowerCase())
-      )
-    case "starts_with":
-      return values.some((value) =>
-        String(fieldValue).toLowerCase().startsWith(String(value).toLowerCase())
-      )
-    case "ends_with":
-      return values.some((value) =>
-        String(fieldValue).toLowerCase().endsWith(String(value).toLowerCase())
-      )
-    case "empty":
-      return fieldValue === "" || fieldValue == null
-    case "not_empty":
-      return fieldValue !== "" && fieldValue != null
-    default:
-      return true
-  }
-}
-
-function applyFiltersToData(
-  data: IAutomationRecord[],
-  filters: FilterCondition[]
-): IAutomationRecord[] {
-  const active = getActiveFilters(filters)
-  let result = [...data]
-
-  active.forEach((filter) => {
-    const { field, operator, values, negated } = filter
-
-    result = result.filter((item) => {
-      const raw = filterFieldValue(item, field)
-      const fieldValue = raw != null ? raw : ""
-      const matches = matchesFilterCondition(fieldValue, operator, values)
-
-      // A chip negated from its menu keeps its operator and flips its meaning.
-      return negated ? !matches : matches
-    })
-  })
-
-  return result
-}
-
-const OWNER_TEAM_FILTER_OPTIONS = OWNER_FILTER_OPTIONS.filter(
-  (option) => option.value !== "everyone"
-).map((option) => ({
-  value: option.value,
-  label: option.label,
-}))
-
-const DELIVERY_MODE_FILTER_OPTIONS = DELIVERY_FILTER_OPTIONS.filter(
-  (option) => option.value !== "any"
-).map((option) => ({
-  value: option.value,
-  label: option.label,
-}))
-
-const UPDATED_BUCKET_FILTER_OPTIONS = UPDATED_FILTER_OPTIONS.filter(
-  (option) => option.value !== "any"
-).map((option) => ({
-  value: option.value,
-  label: option.label,
-}))
-
-const filterFields: FilterField[] = [
-  {
-    id: "workflow",
-    label: "Workflow",
-    icon: (
-      <SearchIcon className="size-3.5" aria-hidden />
-    ),
-    type: "text",
-    placeholder: "Search...",
-  },
-  {
-    id: "ownerTeam",
-    label: "Owner team",
-    icon: (
-      <UsersIcon className="size-3.5" aria-hidden />
-    ),
-    type: "select",
-    searchable: false,
-    options: OWNER_TEAM_FILTER_OPTIONS,
-    renderValue: ({ values }) =>
-      renderSingleSelectedLabel(values, OWNER_TEAM_FILTER_OPTIONS),
-  },
-  {
-    id: "deliveryMode",
-    label: "Delivery mode",
-    icon: (
-      <RouteIcon className="size-3.5" aria-hidden />
-    ),
-    type: "select",
-    searchable: false,
-    options: DELIVERY_MODE_FILTER_OPTIONS,
-    renderValue: ({ values }) =>
-      renderSingleSelectedLabel(values, DELIVERY_MODE_FILTER_OPTIONS),
-  },
-  {
-    id: "updatedBucket",
-    label: "Last updated",
-    icon: (
-      <ClockIcon className="size-3.5" aria-hidden />
-    ),
-    type: "select",
-    searchable: false,
-    options: UPDATED_BUCKET_FILTER_OPTIONS,
-    renderValue: ({ values }) =>
-      renderSingleSelectedLabel(values, UPDATED_BUCKET_FILTER_OPTIONS),
-  },
-]
-
-function createDefaultAutomationFilters(): FilterQuery {
-  return createFilterQuery([
-    createFilterRule({
-      id: "workflow-1",
-      path: ["workflow"],
-      operator: "contains",
-      value: "",
-    }),
-  ])
-}
-
-function getTabCounts(records: IAutomationRecord[]) {
-  return {
-    all: records.length,
-    live: records.filter((record) => record.state === "live").length,
-    review: records.filter((record) => record.state === "review").length,
-    drafts: records.filter((record) => record.state === "drafts").length,
-    paused: records.filter((record) => record.state === "paused").length,
-  } satisfies Record<AutomationTab, number>
-}
-
-export function AutomationLibraryGridView() {
-  const [automations, setAutomations] =
-    useState<IAutomationRecord[]>(AUTOMATIONS)
-  const [activeTab, setActiveTab] = useState<AutomationTab>("all")
-  const [filterQuery, setFilterQuery] = useState<FilterQuery>(
-    createDefaultAutomationFilters
-  )
-  const filters = useMemo(
-    () => flattenFilterConditions(filterQuery),
-    [filterQuery]
-  )
-  const [sorting, setSorting] = useState<SortingState>([
-    { id: "updatedAt", desc: true },
-  ])
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 5,
-  })
-  const [automationPendingArchive, setAutomationPendingArchive] =
-    useState<IAutomationRecord | null>(null)
-
-  const resetPagination = useCallback(() => {
-    setPagination((current) =>
-      current.pageIndex === 0 ? current : { ...current, pageIndex: 0 }
-    )
-  }, [])
-
-  const filteredBaseAutomations = useMemo(() => {
-    return applyFiltersToData(automations, filters)
-  }, [automations, filters])
-
-  const filteredAutomations = useMemo(
-    () =>
-      filteredBaseAutomations.filter((automation) =>
-        activeTab === "all"
-          ? true
-          : getAutomationTabFromState(automation.state) === activeTab
-      ),
-    [activeTab, filteredBaseAutomations]
-  )
-
-  const tabCounts = useMemo(
-    () => getTabCounts(filteredBaseAutomations),
-    [filteredBaseAutomations]
-  )
-
-  const filteredLiveCount = useMemo(
-    () =>
-      filteredAutomations.filter((automation) => automation.state === "live")
-        .length,
-    [filteredAutomations]
-  )
-
-  const filteredReviewCount = useMemo(
-    () =>
-      filteredAutomations.filter((automation) => automation.state === "review")
-        .length,
-    [filteredAutomations]
-  )
-
-  const selectedCount = useMemo(
-    () => Object.keys(rowSelection).length,
-    [rowSelection]
-  )
-
-  const columns = useMemo(
-    () =>
-      createAutomationColumns({
-        onAction: (action, automation) => {
-          if (action === "archive") {
-            setAutomationPendingArchive(automation)
-            return
-          }
-
-          if (action === "edit") {
-            showAutomationToast({
-              tone: "neutral",
-              title: "Workflow editor",
-              description: `Connect "${automation.title}" to your builder, side panel, or automation step editor.`,
-            })
-            return
-          }
-
-          showAutomationToast({
-            tone: "success",
-            title: "Workflow details",
-            description: `"${automation.title}" is ready for a detail route, run history drawer, or audit panel.`,
-          })
-        },
-        onToggleEnabled: (automation, nextValue) => {
-          const nextState: AutomationState =
-            nextValue && automation.state === "paused"
-              ? "live"
-              : nextValue && automation.state === "drafts"
-                ? "review"
-                : !nextValue && automation.state === "live"
-                  ? "paused"
-                  : automation.state
-
-          setAutomations((current) =>
-            current.map((item) =>
-              item.id === automation.id
-                ? {
-                    ...item,
-                    enabled: nextValue,
-                    state: nextState,
-                  }
-                : item
-            )
-          )
-
-          showAutomationToast({
-            tone: nextValue ? "success" : "neutral",
-            title: nextValue ? "Workflow enabled" : "Workflow paused",
-            description: nextValue
-              ? `"${automation.title}" is ready to run in the ${nextState === "review" ? "review" : "live"} queue.`
-              : `"${automation.title}" will stay available but will not continue running until resumed.`,
-          })
-        },
-      }),
-    []
-  )
-
-  const table = useTable({
-    features: dataGridFeatures,
-    data: filteredAutomations,
-    columns,
-    getRowId: (row) => row.id,
-    state: {
-      sorting,
-      rowSelection,
-      pagination,
-    },
-    enableRowSelection: true,
-    onSortingChange: setSorting,
-    onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
-  })
-
-  const handleClearControls = useCallback(() => {
-    setFilterQuery(createDefaultAutomationFilters())
-    resetPagination()
-  }, [resetPagination])
-
-  const handleFiltersChange = useCallback(
-    (nextQuery: FilterQuery) => {
-      setFilterQuery(nextQuery)
-      resetPagination()
-    },
-    [resetPagination]
-  )
-
-  const handleArchiveAutomation = useCallback(() => {
-    if (!automationPendingArchive) return
-
-    const automationToArchive = automationPendingArchive
-
-    setAutomations((current) =>
-      current.filter(
-        (automation) => automation.id !== automationPendingArchive.id
-      )
-    )
-    setRowSelection((current) => {
-      const next = { ...current }
-      delete next[automationPendingArchive.id]
-      return next
-    })
-    setAutomationPendingArchive(null)
-    resetPagination()
-
-    showAutomationToast({
-      tone: "destructive",
-      title: "Workflow archived",
-      description: `"${automationToArchive.title}" was removed from this automation library.`,
-    })
-  }, [automationPendingArchive, resetPagination])
-
-  const emptyMessage =
-    "No workflows match this automation slice. Switch tabs or clear the filters."
-
-  return (
-    <>
-      {/* Table */}
-      <DataGrid
-        table={table}
-        recordCount={filteredAutomations.length}
-        emptyMessage={emptyMessage}
-        tableLayout={{
-          dense: true,
-        }}
-        tableClassNames={{
-          edgeCell: "first:ps-3 last:pe-3",
-        }}
-      >
-        <Frame dense variant="default" spacing="sm" className="w-full">
-          <FrameHeader className="flex-row items-center justify-between gap-3">
-            <div className="flex flex-col gap-px">
-              <FrameTitle className="text-balance">
-                Automation Library
-              </FrameTitle>
-              <FrameDescription className="flex flex-wrap items-center gap-1.5 text-xs text-pretty">
-                <span>
-                  {filteredAutomations.length} workflow
-                  {filteredAutomations.length === 1 ? "" : "s"}
-                </span>
-                <span
-                  className="bg-input size-1 shrink-0 rounded-full"
-                  aria-hidden="true"
-                />
-                <span>{filteredLiveCount} live</span>
-                <span
-                  className="bg-input size-1 shrink-0 rounded-full"
-                  aria-hidden="true"
-                />
-                <span>{filteredReviewCount} review</span>
-                {selectedCount > 0 ? (
-                  <>
-                    <span
-                      className="bg-input size-1 shrink-0 rounded-full"
-                      aria-hidden="true"
-                    />
-                    <span>{selectedCount} selected</span>
-                  </>
-                ) : null}
-              </FrameDescription>
-            </div>
-
-            <Button type="button" className="shrink-0">
-              <PlusIcon className="size-4" aria-hidden="true" />
-              New workflow
-            </Button>
-          </FrameHeader>
-
-          <FramePanel className="p-0 shadow-none!">
-            <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
-              <Tabs
-                value={activeTab}
-                onValueChange={(value) => {
-                  setActiveTab(value as AutomationTab)
-                  resetPagination()
-                }}
-              >
-                <TabsList variant="line" className="gap-5">
-                  {AUTOMATION_TABS.map((tab) => (
-                    <TabsTrigger
-                      key={tab.value}
-                      value={tab.value}
-                      className="gap-2 px-0 pt-0 pb-(--frame-panel-header-py) text-sm"
-                    >
-                      <span>{tab.label}</span>
-                      <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">
-                        {tabCounts[tab.value]}
-                      </span>
-                    </TabsTrigger>
-                  ))}
-                </TabsList>
-              </Tabs>
-            </div>
-
-            <Separator />
-
-            <div className="flex flex-wrap items-center justify-between gap-3 px-(--frame-panel-header-px) py-2.5">
-              <Filters
-                query={filterQuery}
-                fields={filterFields}
-                onQueryChange={handleFiltersChange}
-                size="default"
-                trigger={
-                  <Button variant="outline" aria-label="Filters">
-                    <FilterIcon className="size-4" aria-hidden="true" />
-                    Filters
-                  </Button>
-                }
-              />
-
-              <div className="flex flex-wrap items-center justify-end gap-2">
-                {selectedCount > 0 ? (
-                  <Badge size="sm" variant="secondary">
-                    {selectedCount} selected
-                  </Badge>
-                ) : null}
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={handleClearControls}
-                >
-                  <FunnelXIcon className="size-4" aria-hidden="true" />
-                  Clear
-                </Button>
-              </div>
-            </div>
-
-            <Separator />
-
-            <DataGridScrollArea>
-              <DataGridTable />
-            </DataGridScrollArea>
-
-            <Separator />
-
-            <FrameFooter>
-              <DataGridPagination />
-            </FrameFooter>
-          </FramePanel>
-        </Frame>
-      </DataGrid>
-
-      <AlertDialog
-        open={automationPendingArchive != null}
-        onOpenChange={(open) => {
-          if (!open) {
-            setAutomationPendingArchive(null)
-          }
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Archive workflow?</AlertDialogTitle>
-            <AlertDialogDescription>
-              {automationPendingArchive
-                ? `Archive "${automationPendingArchive.title}" from this automation library. Run history and ownership context can stay available in your backend, but this row will disappear from the grid preview.`
-                : "Archive this workflow from the automation library."}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleArchiveAutomation}
-              render={
-                <Button type="button" variant="destructive">
-                  Archive
-                </Button>
-              }
-            />
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx
deleted file mode 100644
index 2ca5e30..0000000
--- a/apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx
+++ /dev/null
@@ -1,384 +0,0 @@
-export type AutomationTab = "all" | "live" | "review" | "drafts" | "paused"
-
-export type AutomationKind =
-  | "sequence"
-  | "routing"
-  | "enrichment"
-  | "digest"
-  | "escalation"
-
-export type OwnerFilter =
-  | "everyone"
-  | "product"
-  | "engineering"
-  | "operations"
-  | "revenue"
-  | "support"
-
-export type DeliveryFilter =
-  | "any"
-  | "scheduled"
-  | "event-driven"
-  | "manual"
-  | "hybrid"
-
-export type UpdatedFilter = "any" | "today" | "this-week" | "older"
-
-export type AutomationState = Exclude<AutomationTab, "all">
-export type AutomationOwnerAvailability = "online" | "away" | "busy" | "offline"
-
-export interface IAutomationOwner {
-  id: string
-  name: string
-  email: string
-  initials: string
-  avatar?: string
-  availability: AutomationOwnerAvailability
-  team: Exclude<OwnerFilter, "everyone">
-  teamLabel: string
-}
-
-export interface IAutomationRecord {
-  id: string
-  title: string
-  kind: AutomationKind
-  state: AutomationState
-  rating: number
-  deliveryMode: Exclude<DeliveryFilter, "any">
-  owner: IAutomationOwner
-  updatedAt: string
-  updatedBucket: Exclude<UpdatedFilter, "any">
-  enabled: boolean
-  approvalRequired: boolean
-  audienceLabel: string
-  runWindowLabel: string
-}
-
-const OWNERS: Record<string, IAutomationOwner> = {
-  maya: {
-    id: "maya-patel",
-    name: "Maya Patel",
-    email: "maya@reui.io",
-    initials: "MP",
-    avatar:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80",
-    availability: "online",
-    team: "product",
-    teamLabel: "Product",
-  },
-  jonas: {
-    id: "jonas-reed",
-    name: "Jonas Reed",
-    email: "jonas@reui.io",
-    initials: "JR",
-    avatar:
-      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&dpr=2&q=80",
-    availability: "busy",
-    team: "engineering",
-    teamLabel: "Engineering",
-  },
-  priya: {
-    id: "priya-nair",
-    name: "Priya Nair",
-    email: "priya@reui.io",
-    initials: "PN",
-    avatar:
-      "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=96&h=96&dpr=2&q=80",
-    availability: "away",
-    team: "operations",
-    teamLabel: "Operations",
-  },
-  emil: {
-    id: "emil-novak",
-    name: "Emil Novak",
-    email: "emil@reui.io",
-    initials: "EN",
-    avatar:
-      "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=96&h=96&dpr=2&q=80",
-    availability: "offline",
-    team: "revenue",
-    teamLabel: "Revenue",
-  },
-  nora: {
-    id: "nora-ibrahim",
-    name: "Nora Ibrahim",
-    email: "nora@reui.io",
-    initials: "NI",
-    avatar:
-      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=96&h=96&dpr=2&q=80",
-    availability: "online",
-    team: "support",
-    teamLabel: "Support",
-  },
-}
-
-function automation(
-  input: Omit<IAutomationRecord, "owner"> & {
-    owner: keyof typeof OWNERS
-  }
-): IAutomationRecord {
-  return {
-    ...input,
-    owner: OWNERS[input.owner],
-  }
-}
-
-export const AUTOMATION_TABS: { value: AutomationTab; label: string }[] = [
-  { value: "all", label: "All" },
-  { value: "live", label: "Live" },
-  { value: "review", label: "Needs Review" },
-  { value: "drafts", label: "Drafts" },
-  { value: "paused", label: "Paused" },
-]
-
-export const OWNER_FILTER_OPTIONS: {
-  value: OwnerFilter
-  label: string
-}[] = [
-  { value: "everyone", label: "Owner team" },
-  { value: "product", label: "Product" },
-  { value: "engineering", label: "Engineering" },
-  { value: "operations", label: "Operations" },
-  { value: "revenue", label: "Revenue" },
-  { value: "support", label: "Support" },
-]
-
-export const DELIVERY_FILTER_OPTIONS: {
-  value: DeliveryFilter
-  label: string
-}[] = [
-  { value: "any", label: "Delivery mode" },
-  { value: "scheduled", label: "Scheduled" },
-  { value: "event-driven", label: "Event-driven" },
-  { value: "manual", label: "Manual" },
-  { value: "hybrid", label: "Hybrid" },
-]
-
-export const UPDATED_FILTER_OPTIONS: {
-  value: UpdatedFilter
-  label: string
-}[] = [
-  { value: "any", label: "Last updated" },
-  { value: "today", label: "Today" },
-  { value: "this-week", label: "This week" },
-  { value: "older", label: "Older" },
-]
-
-export function getAutomationTabFromState(
-  state: AutomationState
-): Exclude<AutomationTab, "all"> {
-  return state
-}
-
-export const AUTOMATIONS: IAutomationRecord[] = [
-  automation({
-    id: "renewal-touchpoint-orchestration",
-    title: "Renewal touchpoint orchestration",
-    kind: "sequence",
-    state: "live",
-    rating: 4.8,
-    deliveryMode: "scheduled",
-    owner: "emil",
-    updatedAt: "2026-04-11",
-    updatedBucket: "today",
-    enabled: true,
-    approvalRequired: false,
-    audienceLabel: "Renewal accounts",
-    runWindowLabel: "Weekdays 09:00",
-  }),
-  automation({
-    id: "delegated-sender-review-route",
-    title: "Delegated sender review route",
-    kind: "routing",
-    state: "review",
-    rating: 4.2,
-    deliveryMode: "manual",
-    owner: "priya",
-    updatedAt: "2026-04-11",
-    updatedBucket: "today",
-    enabled: false,
-    approvalRequired: true,
-    audienceLabel: "Delegated senders",
-    runWindowLabel: "Queue-based release",
-  }),
-  automation({
-    id: "launch-handoff-digest",
-    title: "Launch handoff digest",
-    kind: "digest",
-    state: "live",
-    rating: 4.7,
-    deliveryMode: "scheduled",
-    owner: "maya",
-    updatedAt: "2026-04-10",
-    updatedBucket: "this-week",
-    enabled: true,
-    approvalRequired: false,
-    audienceLabel: "Launch squad",
-    runWindowLabel: "Daily 08:30",
-  }),
-  automation({
-    id: "sla-escalation-watch",
-    title: "SLA escalation watch",
-    kind: "escalation",
-    state: "live",
-    rating: 4.9,
-    deliveryMode: "event-driven",
-    owner: "nora",
-    updatedAt: "2026-04-10",
-    updatedBucket: "this-week",
-    enabled: true,
-    approvalRequired: false,
-    audienceLabel: "Priority tickets",
-    runWindowLabel: "On trigger",
-  }),
-  automation({
-    id: "lead-enrichment-pass",
-    title: "Lead enrichment pass",
-    kind: "enrichment",
-    state: "paused",
-    rating: 3.9,
-    deliveryMode: "hybrid",
-    owner: "jonas",
-    updatedAt: "2026-04-09",
-    updatedBucket: "this-week",
-    enabled: false,
-    approvalRequired: false,
-    audienceLabel: "Inbound pipeline",
-    runWindowLabel: "Hourly batch",
-  }),
-  automation({
-    id: "sandbox-onboarding-sequence",
-    title: "Sandbox onboarding sequence",
-    kind: "sequence",
-    state: "drafts",
-    rating: 4.1,
-    deliveryMode: "scheduled",
-    owner: "priya",
-    updatedAt: "2026-04-08",
-    updatedBucket: "this-week",
-    enabled: false,
-    approvalRequired: false,
-    audienceLabel: "Trial workspaces",
-    runWindowLabel: "Pending QA",
-  }),
-  automation({
-    id: "partner-routing-fallback",
-    title: "Partner routing fallback",
-    kind: "routing",
-    state: "live",
-    rating: 4.4,
-    deliveryMode: "hybrid",
-    owner: "emil",
-    updatedAt: "2026-04-07",
-    updatedBucket: "this-week",
-    enabled: true,
-    approvalRequired: false,
-    audienceLabel: "Partner renewals",
-    runWindowLabel: "Live + nightly",
-  }),
-  automation({
-    id: "weekly-adoption-digest",
-    title: "Weekly adoption digest",
-    kind: "digest",
-    state: "paused",
-    rating: 3.8,
-    deliveryMode: "scheduled",
-    owner: "maya",
-    updatedAt: "2026-04-06",
-    updatedBucket: "this-week",
-    enabled: false,
-    approvalRequired: false,
-    audienceLabel: "Workspace champions",
-    runWindowLabel: "Fridays 16:00",
-  }),
-  automation({
-    id: "enterprise-risk-escalation",
-    title: "Enterprise risk escalation",
-    kind: "escalation",
-    state: "review",
-    rating: 4.3,
-    deliveryMode: "manual",
-    owner: "nora",
-    updatedAt: "2026-04-05",
-    updatedBucket: "older",
-    enabled: false,
-    approvalRequired: true,
-    audienceLabel: "Enterprise accounts",
-    runWindowLabel: "Manual release",
-  }),
-  automation({
-    id: "crm-enrichment-backfill",
-    title: "CRM enrichment backfill",
-    kind: "enrichment",
-    state: "live",
-    rating: 4.6,
-    deliveryMode: "scheduled",
-    owner: "jonas",
-    updatedAt: "2026-04-04",
-    updatedBucket: "older",
-    enabled: true,
-    approvalRequired: false,
-    audienceLabel: "Open opportunities",
-    runWindowLabel: "Nightly 01:00",
-  }),
-  automation({
-    id: "trial-conversion-follow-up",
-    title: "Trial conversion follow-up",
-    kind: "sequence",
-    state: "drafts",
-    rating: 4.0,
-    deliveryMode: "scheduled",
-    owner: "emil",
-    updatedAt: "2026-04-03",
-    updatedBucket: "older",
-    enabled: false,
-    approvalRequired: false,
-    audienceLabel: "Product-led signups",
-    runWindowLabel: "Awaiting copy",
-  }),
-  automation({
-    id: "owner-assignment-router",
-    title: "Owner assignment router",
-    kind: "routing",
-    state: "live",
-    rating: 4.5,
-    deliveryMode: "event-driven",
-    owner: "priya",
-    updatedAt: "2026-04-02",
-    updatedBucket: "older",
-    enabled: true,
-    approvalRequired: false,
-    audienceLabel: "Workspace requests",
-    runWindowLabel: "Immediate",
-  }),
-  automation({
-    id: "ops-exception-digest",
-    title: "Ops exception digest",
-    kind: "digest",
-    state: "review",
-    rating: 4.1,
-    deliveryMode: "scheduled",
-    owner: "priya",
-    updatedAt: "2026-04-11",
-    updatedBucket: "today",
-    enabled: false,
-    approvalRequired: true,
-    audienceLabel: "Ops leadership",
-    runWindowLabel: "Daily 18:00",
-  }),
-  automation({
-    id: "billing-retry-escalation",
-    title: "Billing retry escalation",
-    kind: "escalation",
-    state: "live",
-    rating: 4.7,
-    deliveryMode: "event-driven",
-    owner: "nora",
-    updatedAt: "2026-04-01",
-    updatedBucket: "older",
-    enabled: true,
-    approvalRequired: false,
-    audienceLabel: "Recovery queue",
-    runWindowLabel: "On failure",
-  }),
-]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/page.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/page.tsx
deleted file mode 100644
index e3ffcac..0000000
--- a/apps/web/src/components/blocks/data-grid-filtering-2/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { AutomationLibraryGridView } from "./components/data-grid-view"
-
-export function Page() {
-  return (
-    <main
-      className="mx-auto flex min-h-svh w-full max-w-7xl items-start justify-center p-8 pt-12"
-      aria-labelledby="page-heading"
-    >
-      <h1 id="page-heading" className="sr-only">
-        Automation library data grid
-      </h1>
-      <AutomationLibraryGridView />
-    </main>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-14/components/empty-state.tsx b/apps/web/src/components/blocks/empty-state-14/components/empty-state.tsx
deleted file mode 100644
index 05a0b26..0000000
--- a/apps/web/src/components/blocks/empty-state-14/components/empty-state.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { type CSSProperties } from "react"
-import {
-  Frame,
-  FrameFooter,
-  FramePanel,
-} from "@/components/reui/frame"
-import { IconStack } from "@/components/reui/icon-stack"
-
-import { Button } from "@evobgp/ui/components/button"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@evobgp/ui/components/empty"
-import { Separator } from "@evobgp/ui/components/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@evobgp/ui/components/tooltip"
-import { Building2Icon, InfoIcon } from "lucide-react"
-
-export function EmptyState() {
-  return (
-    <section
-      className="flex w-full max-w-5xl flex-col gap-8"
-      aria-labelledby="organizations-heading"
-    >
-      <div className="flex flex-col gap-6">
-        <h2
-          id="organizations-heading"
-          className="text-2xl font-semibold tracking-tight"
-        >
-          Organizations
-        </h2>
-        <Separator />
-      </div>
-
-      <TooltipProvider delay={200}>
-        <Frame spacing="xs" className="w-full" aria-label="Organizations setup">
-          <FramePanel className="flex min-h-[274px] items-center justify-center px-6 py-12">
-            <Empty className="max-w-md flex-none bg-transparent p-0">
-              <EmptyHeader className="gap-5">
-                <EmptyMedia className="mb-0">
-                  <IconStack
-                    aria-hidden="true"
-                    className="h-20 w-18"
-                    style={
-                      {
-                        "--icon-stack-content-x": "70%",
-                        "--icon-stack-content-y": "57%",
-                      } as CSSProperties
-                    }
-                  >
-                    <Building2Icon className="size-4.5" strokeWidth="1.8" aria-hidden="true" />
-                  </IconStack>
-                </EmptyMedia>
-
-                <div className="flex flex-col items-center gap-2">
-                  <EmptyTitle className="text-base font-semibold tracking-tight">
-                    Enable organizations
-                  </EmptyTitle>
-                  <EmptyDescription className="max-w-sm text-sm/relaxed">
-                    Enable your users to create organizations, manage team
-                    members, and control access with role-based permissions.
-                  </EmptyDescription>
-                </div>
-              </EmptyHeader>
-
-              <EmptyContent className="mt-5 max-w-none gap-0">
-                <Button type="button">Enable organizations</Button>
-              </EmptyContent>
-            </Empty>
-          </FramePanel>
-
-          <FrameFooter className="flex-row items-center justify-start">
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <a
-                    href="#organizations-docs"
-                    className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex items-center gap-1.5 rounded-sm text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]"
-                  />
-                }
-              >
-                <InfoIcon className="size-3.5" aria-hidden="true" />
-                <span>
-                  Learn more about{" "}
-                  <span className="text-primary">Organizations</span>
-                </span>
-              </TooltipTrigger>
-              <TooltipContent side="top" className="max-w-64">
-                Organizations group users, teams, roles, and permissions under
-                one account boundary.
-              </TooltipContent>
-            </Tooltip>
-          </FrameFooter>
-        </Frame>
-      </TooltipProvider>
-    </section>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-14/page.tsx b/apps/web/src/components/blocks/empty-state-14/page.tsx
deleted file mode 100644
index 9382fe5..0000000
--- a/apps/web/src/components/blocks/empty-state-14/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { EmptyState } from "./components/empty-state"
-
-export function Page() {
-  return (
-    <main
-      className="flex min-h-svh w-full items-start justify-center p-4 sm:p-8 md:p-10"
-      aria-labelledby="organizations-heading"
-    >
-      <EmptyState />
-    </main>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-16/components/data.tsx b/apps/web/src/components/blocks/settings-16/components/data.tsx
deleted file mode 100644
index 649db3e..0000000
--- a/apps/web/src/components/blocks/settings-16/components/data.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import type { ReactNode } from "react"
-import type { BadgeProps } from "@/components/reui/badge"
-
-import { ClaudeAiIcon } from "@evobgp/ui/components/svgs/claudeAiIcon"
-import { CursorDark } from "@evobgp/ui/components/svgs/cursorDark"
-import { CursorLight } from "@evobgp/ui/components/svgs/cursorLight"
-import { GoogleCalendar } from "@evobgp/ui/components/svgs/googleCalendar"
-import { ResendIconBlack } from "@evobgp/ui/components/svgs/resendIconBlack"
-import { ResendIconWhite } from "@evobgp/ui/components/svgs/resendIconWhite"
-import { Slack } from "@evobgp/ui/components/svgs/slack"
-import { Stripe } from "@evobgp/ui/components/svgs/stripe"
-import { Supabase } from "@evobgp/ui/components/svgs/supabase"
-
-export type IntegrationStatus = "connected" | "available" | "preview"
-
-export interface IntegrationStatusMeta {
-  label: string
-  variant: BadgeProps["variant"]
-}
-
-export interface IntegrationApp {
-  id: string
-  name: string
-  description: string
-  logo: ReactNode
-  status: IntegrationStatus
-  actionLabel: string
-}
-
-export const INTEGRATION_STATUS_META: Record<
-  IntegrationStatus,
-  IntegrationStatusMeta
-> = {
-  connected: {
-    label: "Connected",
-    variant: "success-light",
-  },
-  available: {
-    label: "Available",
-    variant: "secondary",
-  },
-  preview: {
-    label: "Preview",
-    variant: "info-light",
-  },
-}
-
-const logoClassName = "block size-5"
-
-function ThemeLogo({ light, dark }: { light: ReactNode; dark: ReactNode }) {
-  return (
-    <>
-      <span
-        aria-hidden="true"
-        className="flex size-5 items-center justify-center leading-none dark:hidden"
-      >
-        {light}
-      </span>
-      <span
-        aria-hidden="true"
-        className="hidden size-5 items-center justify-center leading-none dark:flex"
-      >
-        {dark}
-      </span>
-    </>
-  )
-}
-
-const CURSOR_LOGO = (
-  <ThemeLogo
-    light={<CursorLight className={logoClassName} />}
-    dark={<CursorDark className={logoClassName} />}
-  />
-)
-
-const RESEND_LOGO = (
-  <ThemeLogo
-    light={<ResendIconBlack className={logoClassName} />}
-    dark={<ResendIconWhite className={logoClassName} />}
-  />
-)
-
-export const INTEGRATION_APPS: IntegrationApp[] = [
-  {
-    id: "supabase",
-    name: "Supabase",
-    description:
-      "Sync workspace records, owners, and lifecycle events from your product database.",
-    logo: <Supabase className={logoClassName} aria-hidden="true" />,
-    status: "connected",
-    actionLabel: "Configure",
-  },
-  {
-    id: "slack",
-    name: "Slack",
-    description:
-      "Route approvals, launch notes, and incident updates into selected team channels.",
-    logo: <Slack className={logoClassName} aria-hidden="true" />,
-    status: "connected",
-    actionLabel: "Configure",
-  },
-  {
-    id: "stripe",
-    name: "Stripe",
-    description:
-      "Mirror subscription, invoice, and renewal signals into account reviews.",
-    logo: <Stripe className={logoClassName} aria-hidden="true" />,
-    status: "connected",
-    actionLabel: "Configure",
-  },
-  {
-    id: "google-calendar",
-    name: "Google Calendar",
-    description:
-      "Create planning reviews from milestones, customer dates, and release windows.",
-    logo: <GoogleCalendar className={logoClassName} aria-hidden="true" />,
-    status: "available",
-    actionLabel: "Install",
-  },
-  {
-    id: "resend",
-    name: "Resend",
-    description:
-      "Send branded transactional updates when workflows change status or ownership.",
-    logo: RESEND_LOGO,
-    status: "available",
-    actionLabel: "Install",
-  },
-  {
-    id: "cursor",
-    name: "Cursor",
-    description:
-      "Attach implementation context and AI coding notes to active product tasks.",
-    logo: CURSOR_LOGO,
-    status: "preview",
-    actionLabel: "Configure",
-  },
-  {
-    id: "claude",
-    name: "Claude",
-    description:
-      "Draft summaries, support notes, and rollout briefs from approved workspace data.",
-    logo: <ClaudeAiIcon className={logoClassName} aria-hidden="true" />,
-    status: "preview",
-    actionLabel: "Install",
-  },
-]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-16/components/integration-settings.tsx b/apps/web/src/components/blocks/settings-16/components/integration-settings.tsx
deleted file mode 100644
index 517ea34..0000000
--- a/apps/web/src/components/blocks/settings-16/components/integration-settings.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Badge } from "@/components/reui/badge"
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from "@/components/reui/frame"
-
-import { Button } from "@evobgp/ui/components/button"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "@evobgp/ui/components/item"
-
-import {
-  INTEGRATION_APPS,
-  INTEGRATION_STATUS_META,
-  type IntegrationApp,
-} from "./data"
-
-function IntegrationLogo({ app }: { app: IntegrationApp }) {
-  return (
-    <Item className="bg-muted/60 border-background flex size-10 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:block [&_svg]:size-5">
-      <ItemMedia variant="icon" className="size-auto translate-y-0! self-center!">
-        {app.logo}
-      </ItemMedia>
-    </Item>
-  )
-}
-
-function IntegrationRow({ app }: { app: IntegrationApp }) {
-  const status = INTEGRATION_STATUS_META[app.status]
-
-  return (
-    <Item role="listitem" className="items-center px-3.5 py-2.5 sm:px-4">
-      {/* Media */}
-      <ItemMedia className="translate-y-0! self-center!">
-        <IntegrationLogo app={app} />
-      </ItemMedia>
-
-      {/* Content */}
-      <ItemContent className="min-w-0 gap-0">
-        <ItemTitle className="w-full min-w-0 gap-2">
-          <span className="truncate">{app.name}</span>
-          <Badge variant={status.variant}>{status.label}</Badge>
-        </ItemTitle>
-        <ItemDescription className="line-clamp-1">
-          {app.description}
-        </ItemDescription>
-      </ItemContent>
-
-      {/* Actions */}
-      <ItemActions className="ml-auto shrink-0 justify-end gap-2">
-        <Button type="button" variant="outline" size="sm">
-          {app.actionLabel}
-        </Button>
-      </ItemActions>
-    </Item>
-  )
-}
-
-export function IntegrationSettings() {
-  return (
-    <div className="flex w-full max-w-4xl flex-col gap-5">
-      {/* Section */}
-      <section className="flex flex-col gap-3">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-          <div className="flex flex-col gap-1">
-            <h3 className="text-sm font-semibold">Connected Apps</h3>
-            <p className="text-muted-foreground text-sm">
-              Manage source systems for automation, scheduling, support, and AI
-              workflows.
-            </p>
-          </div>
-
-          <Button type="button" size="sm" className="w-full sm:w-auto">
-            Build Connector
-          </Button>
-        </div>
-
-        <Frame>
-          <FrameHeader className="sr-only">
-            <FrameTitle>Integration Apps</FrameTitle>
-            <FrameDescription>
-              Available workspace apps and configuration actions.
-            </FrameDescription>
-          </FrameHeader>
-          <FramePanel className="p-0!">
-            <ItemGroup className="gap-0">
-              {INTEGRATION_APPS.map((app, index) => (
-                <div key={app.id}>
-                  {index > 0 ? <ItemSeparator className="my-0" /> : null}
-                  <IntegrationRow app={app} />
-                </div>
-              ))}
-            </ItemGroup>
-          </FramePanel>
-        </Frame>
-      </section>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-16/page.tsx b/apps/web/src/components/blocks/settings-16/page.tsx
deleted file mode 100644
index deaede0..0000000
--- a/apps/web/src/components/blocks/settings-16/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { IntegrationSettings } from "./components/integration-settings"
-
-export function Page() {
-  return (
-    <main
-      className="flex min-h-svh w-full items-start justify-center p-4 sm:p-8 md:p-12"
-      aria-labelledby="page-heading"
-    >
-      <h1 id="page-heading" className="sr-only">
-        Integration settings
-      </h1>
-      <IntegrationSettings />
-    </main>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/color-picker.tsx b/apps/web/src/components/blocks/settings-3/components/color-picker.tsx
deleted file mode 100644
index c82cd2b..0000000
--- a/apps/web/src/components/blocks/settings-3/components/color-picker.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useState } from "react"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import { FieldLegend, FieldSet } from "@evobgp/ui/components/field"
-import { ACCENT_COLORS } from "./data"
-import { CheckIcon } from "lucide-react"
-
-// ── Color Picker ──
-
-export function ColorPicker() {
-  const [selected, setSelected] = useState(ACCENT_COLORS[0].value)
-
-  return (
-    <FieldSet className="gap-0">
-      <FieldLegend className="sr-only">Accent color</FieldLegend>
-
-      {/* Actions */}
-      <div className="flex items-center gap-3">
-        {ACCENT_COLORS.map((color) => (
-          <button
-            key={color.value}
-            type="button"
-            aria-label={color.name}
-            onClick={() => setSelected(color.value)}
-            className={cn(
-              "flex size-7 items-center justify-center rounded-full transition-shadow",
-              selected === color.value &&
-                "ring-ring ring-offset-background ring-2 ring-offset-2"
-            )}
-            style={{ backgroundColor: color.value }}
-          >
-            {selected === color.value ? (
-              <CheckIcon className="size-3 text-white" aria-hidden="true" />
-            ) : null}
-          </button>
-        ))}
-      </div>
-    </FieldSet>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/data.tsx b/apps/web/src/components/blocks/settings-3/components/data.tsx
deleted file mode 100644
index bec9a42..0000000
--- a/apps/web/src/components/blocks/settings-3/components/data.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client"
-
-import { type ReactNode } from "react"
-
-// ── Types ──
-
-export type SelectOption = {
-  value: string
-  label: string
-}
-
-export type Preference = {
-  id: string
-  label: string
-  description: string
-  defaultChecked: boolean
-}
-
-export type AccentColorOption = {
-  name: string
-  value: string
-}
-
-export type SettingBadgeVariant =
-  | "primary-light"
-  | "destructive-light"
-  | "info-light"
-
-export type SettingFieldProps = {
-  title: string
-  description: string
-  badge?: { label: string; variant: SettingBadgeVariant }
-  children: ReactNode
-  last?: boolean
-}
-
-export type DateFormatOption = {
-  value: string
-  label: string
-}
-
-// ── Data ──
-
-export const DAYS: SelectOption[] = [
-  { value: "monday", label: "Monday" },
-  { value: "tuesday", label: "Tuesday" },
-  { value: "wednesday", label: "Wednesday" },
-  { value: "thursday", label: "Thursday" },
-  { value: "friday", label: "Friday" },
-  { value: "saturday", label: "Saturday" },
-  { value: "sunday", label: "Sunday" },
-]
-
-export const CURRENCIES: SelectOption[] = [
-  { value: "usd", label: "USD · US Dollar" },
-  { value: "eur", label: "EUR · Euro" },
-  { value: "gbp", label: "GBP · British Pound" },
-  { value: "jpy", label: "JPY · Japanese Yen" },
-]
-
-export const REGIONS: SelectOption[] = [
-  { value: "us", label: "United States" },
-  { value: "eu", label: "European Union" },
-  { value: "uk", label: "United Kingdom" },
-  { value: "jp", label: "Japan" },
-  { value: "au", label: "Australia" },
-]
-
-export const ACCENT_COLORS: AccentColorOption[] = [
-  { name: "Slate", value: "#64748b" },
-  { name: "Rose", value: "#f43f5e" },
-  { name: "Orange", value: "#f97316" },
-  { name: "Violet", value: "#8b5cf6" },
-  { name: "Emerald", value: "#10b981" },
-  { name: "Sky", value: "#0ea5e9" },
-]
-
-export const PREFERENCES: Preference[] = [
-  {
-    id: "keyboard-shortcuts",
-    label: "Enable keyboard shortcuts.",
-    description: "Use shortcuts to speed up your workflow.",
-    defaultChecked: true,
-  },
-  {
-    id: "spellcheck",
-    label: "Auto spell-check.",
-    description: "Highlight spelling errors in text fields.",
-    defaultChecked: true,
-  },
-  {
-    id: "compact-mode",
-    label: "Compact Mode.",
-    description: "Reduce spacing for a denser interface layout.",
-    defaultChecked: false,
-  },
-  {
-    id: "animations",
-    label: "Reduce animations.",
-    description: "Minimize motion effects throughout the UI.",
-    defaultChecked: false,
-  },
-]
-
-export const DATE_FORMAT_OPTIONS: DateFormatOption[] = [
-  { value: "mdy", label: "MM/DD/YYYY" },
-  { value: "dmy", label: "DD/MM/YYYY" },
-  { value: "ymd", label: "YYYY/MM/DD" },
-]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx b/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
deleted file mode 100644
index 55e02cc..0000000
--- a/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useState } from "react"
-
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@evobgp/ui/components/field"
-import { Switch } from "@evobgp/ui/components/switch"
-
-import { PREFERENCES } from "./data"
-
-// ── Editor Preferences ──
-
-export function EditorPreferences() {
-  const [values, setValues] = useState<Record<string, boolean>>(() =>
-    Object.fromEntries(PREFERENCES.map((p) => [p.id, p.defaultChecked]))
-  )
-
-  return (
-    <FieldSet className="w-full gap-3">
-      <FieldLegend className="sr-only">Editor preferences</FieldLegend>
-      {/* Description */}
-      <FieldDescription className="sr-only">
-        Configure editing behavior and interface density.
-      </FieldDescription>
-
-      {/* List */}
-      <FieldGroup className="gap-3">
-        {PREFERENCES.map((pref) => (
-          <Field key={pref.id} orientation="horizontal" className="gap-3">
-            <Switch
-              id={`settings-3-${pref.id}`}
-              checked={values[pref.id]}
-              onCheckedChange={(value) =>
-                setValues((prev) => ({ ...prev, [pref.id]: value }))
-              }
-              className="mt-0.5"
-            />
-
-            <FieldContent className="gap-0.5">
-              <FieldLabel htmlFor={`settings-3-${pref.id}`}>
-                {pref.label}
-              </FieldLabel>
-              <FieldDescription className="text-xs">
-                {pref.description}
-              </FieldDescription>
-            </FieldContent>
-          </Field>
-        ))}
-      </FieldGroup>
-    </FieldSet>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/general-settings.tsx b/apps/web/src/components/blocks/settings-3/components/general-settings.tsx
deleted file mode 100644
index 570f3f4..0000000
--- a/apps/web/src/components/blocks/settings-3/components/general-settings.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import {
-  Frame,
-  FrameDescription,
-  FrameFooter,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from "@/components/reui/frame"
-
-import { Button } from "@evobgp/ui/components/button"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@evobgp/ui/components/field"
-import { Input } from "@evobgp/ui/components/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupText,
-} from "@evobgp/ui/components/input-group"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@evobgp/ui/components/select"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@evobgp/ui/components/toggle-group"
-import { ColorPicker } from "./color-picker"
-import { CURRENCIES, DAYS, REGIONS } from "./data"
-import { EditorPreferences } from "./editor-preferences"
-import { SettingField } from "./setting-field"
-import { PlusIcon, UploadIcon, GlobeIcon, CircleDollarSignIcon } from "lucide-react"
-
-export function GeneralSettings() {
-  const [dateFormat, setDateFormat] = useState(["mdy"])
-  const [startOfWeek, setStartOfWeek] = useState("monday")
-  const [region, setRegion] = useState("us")
-  const [currency, setCurrency] = useState("usd")
-  const handleStartOfWeekChange = (value: string | null) => {
-    if (value !== null) {
-      setStartOfWeek(value)
-    }
-  }
-  const handleRegionChange = (value: string | null) => {
-    if (value !== null) {
-      setRegion(value)
-    }
-  }
-  const handleCurrencyChange = (value: string | null) => {
-    if (value !== null) {
-      setCurrency(value)
-    }
-  }
-
-  return (
-    <Frame className="w-full max-w-3xl">
-      <FrameHeader className="px-2! py-2.5!">
-        <FrameTitle>General Settings</FrameTitle>
-        <FrameDescription>Core app preferences.</FrameDescription>
-      </FrameHeader>
-
-      <FramePanel className="p-0">
-        <FieldGroup className="gap-0">
-          {/* ── Project name ── */}
-          <SettingField
-            title="Project name"
-            description="The display name for your project across the platform."
-            labelFor="settings-3-project-name"
-          >
-            <Input id="settings-3-project-name" defaultValue="Acme Dashboard" />
-          </SettingField>
-
-          {/* ── API endpoint ── */}
-          <SettingField
-            title="API endpoint"
-            description="Set the base URL for your project API."
-            badge={{ label: "Required", variant: "destructive-light" }}
-            labelFor="settings-3-api-endpoint"
-          >
-            <InputGroup className="w-full">
-              <InputGroupAddon align="inline-start">
-                <InputGroupText>https://</InputGroupText>
-              </InputGroupAddon>
-              <InputGroupInput
-                id="settings-3-api-endpoint"
-                defaultValue="api.acme.io"
-              />
-            </InputGroup>
-          </SettingField>
-
-          {/* ── Start of week ── */}
-          <SettingField
-            title="Start of week"
-            description="Choose which day marks the start of your week."
-            labelFor="settings-3-start-of-week"
-          >
-            <Select value={startOfWeek} onValueChange={handleStartOfWeekChange}>
-              <SelectTrigger id="settings-3-start-of-week" className="w-full">
-                <SelectValue>{getOptionLabel(DAYS, startOfWeek)}</SelectValue>
-              </SelectTrigger>
-
-              <SelectContent>
-                <SelectGroup>
-                  {DAYS.map((day) => (
-                    <SelectItem key={day.value} value={day.value}>
-                      {day.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </SettingField>
-
-          {/* ── Allowed origins ── */}
-          <SettingField
-            title="Allowed origins"
-            description="Define the trusted domains for CORS requests."
-          >
-            <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
-              <Button variant="outline">
-                <PlusIcon aria-hidden="true" />
-                Add origin
-              </Button>
-
-              <Button variant="outline">
-                <UploadIcon aria-hidden="true" />
-                Import from file
-              </Button>
-            </div>
-          </SettingField>
-
-          {/* ── Accent color ── */}
-          <SettingField
-            title="Accent color"
-            description="Select a color to represent your brand."
-            badge={{ label: "Upgrade to Pro", variant: "primary-light" }}
-          >
-            <ColorPicker />
-          </SettingField>
-
-          {/* ── Region & currency ── */}
-          <SettingField
-            title="Region & currency"
-            description="Adjust your regional preferences and currency."
-            contentClassName="@md/field-group:w-[22rem]"
-          >
-            <FieldSet className="w-full gap-3">
-              <FieldLegend className="sr-only">Region and currency</FieldLegend>
-              <FieldDescription className="sr-only">
-                Regional and financial formatting preferences.
-              </FieldDescription>
-
-              <FieldGroup className="gap-3">
-                <Field>
-                  <FieldLabel htmlFor="settings-3-region">Region</FieldLabel>
-                  <Select value={region} onValueChange={handleRegionChange}>
-                    <SelectTrigger id="settings-3-region" className="w-full">
-                      <GlobeIcon aria-hidden="true" />
-                      <SelectValue>
-                        {getOptionLabel(REGIONS, region)}
-                      </SelectValue>
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectGroup>
-                        {REGIONS.map((region) => (
-                          <SelectItem key={region.value} value={region.value}>
-                            {region.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="settings-3-currency">
-                    Currency
-                  </FieldLabel>
-                  <Select value={currency} onValueChange={handleCurrencyChange}>
-                    <SelectTrigger id="settings-3-currency" className="w-full">
-                      <CircleDollarSignIcon aria-hidden="true" />
-                      <SelectValue>
-                        {getOptionLabel(CURRENCIES, currency)}
-                      </SelectValue>
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectGroup>
-                        {CURRENCIES.map((currency) => (
-                          <SelectItem
-                            key={currency.value}
-                            value={currency.value}
-                          >
-                            {currency.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-          </SettingField>
-
-          {/* ── Date display format ── */}
-          <SettingField
-            title="Date display format"
-            description="Choose your preferred format for dates."
-          >
-            <ToggleGroup
-              multiple={false}
-              value={dateFormat}
-              onValueChange={(value) => {
-                if (value.length > 0) setDateFormat(value)
-              }}
-              variant="outline"
-              size="sm"
-              aria-label="Date display format"
-            >
-              <ToggleGroupItem value="mdy">MM/DD/YYYY</ToggleGroupItem>
-              <ToggleGroupItem value="dmy">DD/MM/YYYY</ToggleGroupItem>
-              <ToggleGroupItem value="ymd">YYYY/MM/DD</ToggleGroupItem>
-            </ToggleGroup>
-          </SettingField>
-
-          {/* ── Editor preferences ── */}
-          <SettingField
-            title="Editor preferences"
-            description="Adjust your editing environment and display options."
-            last
-            contentClassName="@md/field-group:w-[22rem]"
-          >
-            <EditorPreferences />
-          </SettingField>
-        </FieldGroup>
-      </FramePanel>
-
-      <FrameFooter className="flex flex-row justify-end gap-3">
-        <Button variant="outline">Reset</Button>
-        <Button>Save changes</Button>
-      </FrameFooter>
-    </Frame>
-  )
-}
-
-// ── Helper functions ──
-
-function getOptionLabel(
-  options: Array<{ value: string; label: string }>,
-  value: string
-) {
-  return options.find((option) => option.value === value)?.label ?? value
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/setting-field.tsx b/apps/web/src/components/blocks/settings-3/components/setting-field.tsx
deleted file mode 100644
index 04c34f4..0000000
--- a/apps/web/src/components/blocks/settings-3/components/setting-field.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { type ComponentProps, type ReactNode } from "react"
-import { Badge } from "@/components/reui/badge"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-  FieldSeparator,
-  FieldTitle,
-} from "@evobgp/ui/components/field"
-
-interface SettingFieldProps {
-  title: string
-  description: string
-  badge?: {
-    label: string
-    variant: ComponentProps<typeof Badge>["variant"]
-  }
-  children: ReactNode
-  last?: boolean
-  labelFor?: string
-  contentClassName?: string
-}
-
-// ── Setting Field ──
-
-export function SettingField({
-  title,
-  description,
-  badge,
-  children,
-  last,
-  labelFor,
-  contentClassName,
-}: SettingFieldProps) {
-  return (
-    <>
-      <Field orientation="responsive" className="gap-4 px-4 py-4">
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
-          <div className="flex flex-wrap items-center gap-2">
-            {labelFor ? (
-              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
-            ) : (
-              <FieldTitle>{title}</FieldTitle>
-            )}
-
-            {badge ? (
-              <Badge variant={badge.variant} size="sm">
-                {badge.label}
-              </Badge>
-            ) : null}
-          </div>
-
-          <FieldDescription className="text-xs">{description}</FieldDescription>
-        </div>
-
-        <FieldContent
-          className={cn("min-w-0 @md/field-group:w-78", contentClassName)}
-        >
-          {children}
-        </FieldContent>
-      </Field>
-
-      {!last ? <FieldSeparator /> : null}
-    </>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/page.tsx b/apps/web/src/components/blocks/settings-3/page.tsx
deleted file mode 100644
index cffd7c0..0000000
--- a/apps/web/src/components/blocks/settings-3/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { GeneralSettings } from "./components/general-settings"
-
-export function Page() {
-  return (
-    <div className="flex min-h-svh w-full items-start justify-center p-8 md:p-16">
-      <GeneralSettings />
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/wizard-2/components/data.tsx b/apps/web/src/components/blocks/wizard-2/components/data.tsx
deleted file mode 100644
index 42296e2..0000000
--- a/apps/web/src/components/blocks/wizard-2/components/data.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-export type WizardStepId = "company" | "ownership" | "documents"
-export type RegistrationStatus = "registered" | "invited" | "new"
-export type VendorCategory = "software" | "services" | "data" | "hardware"
-export type VendorCountry = "us" | "gb" | "de" | "uz" | "sg"
-export type DocumentId =
-  | "certificate"
-  | "tax-letter"
-  | "ownership-chart"
-  | "bank-letter"
-
-export interface WizardStep {
-  id: WizardStepId
-  step: number
-  title: string
-  description: string
-}
-
-export interface WizardOption<TValue extends string = string> {
-  value: TValue
-  label: string
-  description?: string
-}
-
-export interface OwnerRecord {
-  id: string
-  name: string
-  address: string
-  share: string
-}
-
-export interface DocumentRequirement {
-  id: DocumentId
-  title: string
-  description: string
-  status: "Ready" | "Needs upload" | "Review"
-}
-
-export interface WizardValues {
-  companyName: string
-  registrationStatus: RegistrationStatus
-  portalId: string
-  category: VendorCategory
-  country: VendorCountry
-  contactEmail: string
-  website: string
-  owners: OwnerRecord[]
-  taxId: string
-  incorporationDate: string
-  ownershipAttested: boolean
-  documentIds: DocumentId[]
-  submissionNotes: string
-}
-
-export const WIZARD_STEPS: WizardStep[] = [
-  {
-    id: "company",
-    step: 1,
-    title: "Company Details",
-    description: "Vendor identity and procurement profile.",
-  },
-  {
-    id: "ownership",
-    step: 2,
-    title: "Compliance",
-    description: "Owners and tax IDs.",
-  },
-  {
-    id: "documents",
-    step: 3,
-    title: "Submit",
-    description: "Review and submit.",
-  },
-]
-
-export const REGISTRATION_OPTIONS: WizardOption<RegistrationStatus>[] = [
-  {
-    value: "registered",
-    label: "Yes",
-    description: "Vendor record already exists in the portal.",
-  },
-  {
-    value: "invited",
-    label: "Invited",
-    description: "Invitation sent, registration is pending.",
-  },
-  {
-    value: "new",
-    label: "No",
-    description: "Create a fresh procurement record.",
-  },
-]
-
-export const CATEGORY_OPTIONS: WizardOption<VendorCategory>[] = [
-  {
-    value: "software",
-    label: "Software subscription",
-    description: "SaaS, licenses, and usage-based software.",
-  },
-  {
-    value: "services",
-    label: "Professional services",
-    description: "Implementation, advisory, and support work.",
-  },
-  {
-    value: "data",
-    label: "Data provider",
-    description: "Market data, enrichment, and data feeds.",
-  },
-  {
-    value: "hardware",
-    label: "Hardware supplier",
-    description: "Devices, equipment, and physical goods.",
-  },
-]
-
-export const COUNTRY_OPTIONS: WizardOption<VendorCountry>[] = [
-  {
-    value: "us",
-    label: "United States",
-  },
-  {
-    value: "gb",
-    label: "United Kingdom",
-  },
-  {
-    value: "de",
-    label: "Germany",
-  },
-  {
-    value: "uz",
-    label: "Uzbekistan",
-  },
-  {
-    value: "sg",
-    label: "Singapore",
-  },
-]
-
-export const DOCUMENT_REQUIREMENTS: DocumentRequirement[] = [
-  {
-    id: "certificate",
-    title: "Certificate of incorporation",
-    description: "Legal entity proof.",
-    status: "Ready",
-  },
-  {
-    id: "tax-letter",
-    title: "Tax residency letter",
-    description: "Needed for payment release.",
-    status: "Needs upload",
-  },
-  {
-    id: "ownership-chart",
-    title: "Ownership chart",
-    description: "Confirms ownership threshold.",
-    status: "Review",
-  },
-  {
-    id: "bank-letter",
-    title: "Bank verification letter",
-    description: "Verifies payee details.",
-    status: "Ready",
-  },
-]
-
-export const DEFAULT_WIZARD_VALUES: WizardValues = {
-  companyName: "ReUI Labs",
-  registrationStatus: "registered",
-  portalId: "VEN-2048",
-  category: "software",
-  country: "us",
-  contactEmail: "procurement@reui.dev",
-  website: "https://reui.dev",
-  owners: [
-    {
-      id: "owner-1",
-      name: "Maya Chen",
-      address: "214 Mission Street, San Francisco, CA",
-      share: "52%",
-    },
-    {
-      id: "owner-2",
-      name: "Kai Morgan",
-      address: "18 King Street, Seattle, WA",
-      share: "28%",
-    },
-  ],
-  taxId: "US-82-4917721",
-  incorporationDate: "08/08/2025",
-  ownershipAttested: true,
-  documentIds: ["certificate", "bank-letter"],
-  submissionNotes:
-    "Route final review to finance once tax residency is uploaded.",
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/wizard-2/components/procurement-vendor-steps.tsx b/apps/web/src/components/blocks/wizard-2/components/procurement-vendor-steps.tsx
deleted file mode 100644
index 0087def..0000000
--- a/apps/web/src/components/blocks/wizard-2/components/procurement-vendor-steps.tsx
+++ /dev/null
@@ -1,646 +0,0 @@
-import type { ReactNode } from "react"
-
-import { Button } from "@evobgp/ui/components/button"
-import { Checkbox } from "@evobgp/ui/components/checkbox"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-  FieldTitle,
-} from "@evobgp/ui/components/field"
-import { Input } from "@evobgp/ui/components/input"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@evobgp/ui/components/select"
-import { Textarea } from "@evobgp/ui/components/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@evobgp/ui/components/tooltip"
-import {
-  CATEGORY_OPTIONS,
-  COUNTRY_OPTIONS,
-  DOCUMENT_REQUIREMENTS,
-  REGISTRATION_OPTIONS,
-  type DocumentId,
-  type OwnerRecord,
-  type VendorCategory,
-  type VendorCountry,
-  type WizardOption,
-  type WizardValues,
-} from "./data"
-import { InfoIcon, Trash2Icon, PlusIcon } from "lucide-react"
-
-export type WizardErrors = Partial<Record<keyof WizardValues, string>>
-
-type WizardValueChange = (
-  field: keyof WizardValues,
-  value: WizardValues[keyof WizardValues]
-) => void
-
-interface WizardSummary {
-  categoryLabel: string
-  countryLabel: string
-  registrationLabel: string
-}
-
-function RequiredMark() {
-  return <span className="text-destructive">*</span>
-}
-
-function FieldLabelHint({
-  htmlFor,
-  label,
-  hint,
-  children,
-}: {
-  htmlFor?: string
-  label: string
-  hint: string
-  children: ReactNode
-}) {
-  return (
-    <div className="flex w-fit items-center gap-1.5 leading-snug">
-      <FieldLabel htmlFor={htmlFor}>{children}</FieldLabel>
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <button
-              type="button"
-              className="text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-4 shrink-0 items-center justify-center rounded-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-              aria-label={`${label} hint`}
-            />
-          }
-        >
-          <InfoIcon className="size-3.5" aria-hidden="true" />
-        </TooltipTrigger>
-        <TooltipContent side="top" className="max-w-56 text-xs text-balance">
-          {hint}
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  )
-}
-
-function WizardSelectField<TValue extends string>({
-  id,
-  value,
-  options,
-  placeholder,
-  onValueChange,
-}: {
-  id: string
-  value: TValue
-  options: WizardOption<TValue>[]
-  placeholder: string
-  onValueChange: (value: TValue) => void
-}) {
-  const selectedOption =
-    options.find((option) => option.value === value) ?? null
-
-  return (
-    <Select
-      value={selectedOption}
-      items={options}
-      onValueChange={(nextValue) => {
-        if (nextValue) {
-          onValueChange(nextValue.value)
-        }
-      }}
-    >
-      <SelectTrigger id={id} className="w-full [&_small]:hidden">
-        <SelectValue>
-          {(item: WizardOption<TValue> | null) => item?.label ?? placeholder}
-        </SelectValue>
-      </SelectTrigger>
-      <SelectContent alignItemWithTrigger={false}>
-        <SelectGroup>
-          {options.map((option) => (
-            <SelectItem key={option.value} value={option}>
-              {option.description ? (
-                <span className="flex min-w-0 flex-col items-start gap-px">
-                  <span className="truncate font-medium">{option.label}</span>
-                  <small className="text-muted-foreground truncate text-xs">
-                    {option.description}
-                  </small>
-                </span>
-              ) : (
-                option.label
-              )}
-            </SelectItem>
-          ))}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  )
-}
-
-function SummaryLine({ label, value }: { label: string; value: ReactNode }) {
-  return (
-    <div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-4 text-sm">
-      <dt className="text-muted-foreground">{label}</dt>
-      <dd className="text-foreground min-w-0 text-right font-medium break-words">
-        {value}
-      </dd>
-    </div>
-  )
-}
-
-function SummarySection({
-  title,
-  children,
-  className,
-}: {
-  title: string
-  children: ReactNode
-  className?: string
-}) {
-  return (
-    <section
-      className={[
-        "border-border/70 flex min-w-0 flex-col gap-3 rounded-md border p-4",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      <h3 className="text-sm font-semibold">{title}</h3>
-      {children}
-    </section>
-  )
-}
-
-function SectionHeading({
-  id,
-  title,
-  description,
-}: {
-  id: string
-  title: string
-  description: string
-}) {
-  return (
-    <div className="flex flex-col gap-1">
-      <h2 id={id} className="text-base font-semibold">
-        {title}
-      </h2>
-      <p className="text-muted-foreground text-sm">{description}</p>
-    </div>
-  )
-}
-
-function RemoveRowButton({
-  label,
-  onClick,
-}: {
-  label: string
-  onClick: () => void
-}) {
-  return (
-    <Button
-      type="button"
-      variant="ghost"
-      size="icon"
-      className="text-muted-foreground hover:text-destructive justify-self-start sm:justify-self-end"
-      aria-label={label}
-      onClick={onClick}
-    >
-      <Trash2Icon className="size-4" aria-hidden="true" />
-    </Button>
-  )
-}
-
-function OwnerRows({
-  owners,
-  error,
-  onOwnerChange,
-  onAddOwner,
-  onRemoveOwner,
-}: {
-  owners: OwnerRecord[]
-  error?: string
-  onOwnerChange: (id: string, field: keyof OwnerRecord, value: string) => void
-  onAddOwner: () => void
-  onRemoveOwner: (id: string) => void
-}) {
-  return (
-    <Field data-invalid={Boolean(error)} className="gap-3 sm:col-span-2">
-      <div className="flex flex-col gap-2">
-        {owners.map((owner, index) => (
-          <div
-            key={owner.id}
-            className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_5rem_auto]"
-          >
-            <Field className="gap-1.5">
-              <FieldLabel htmlFor={`${owner.id}-name`} className="sr-only">
-                Owner {index + 1} name
-              </FieldLabel>
-              <Input
-                id={`${owner.id}-name`}
-                value={owner.name}
-                onChange={(event) =>
-                  onOwnerChange(owner.id, "name", event.target.value)
-                }
-                placeholder="Owner full name"
-                autoComplete="name"
-              />
-            </Field>
-            <Field className="gap-1.5">
-              <FieldLabel htmlFor={`${owner.id}-address`} className="sr-only">
-                Owner {index + 1} address
-              </FieldLabel>
-              <Input
-                id={`${owner.id}-address`}
-                value={owner.address}
-                onChange={(event) =>
-                  onOwnerChange(owner.id, "address", event.target.value)
-                }
-                placeholder="Registered address"
-                autoComplete="street-address"
-              />
-            </Field>
-            <Field className="gap-1.5">
-              <FieldLabel htmlFor={`${owner.id}-share`} className="sr-only">
-                Owner {index + 1} share
-              </FieldLabel>
-              <Input
-                id={`${owner.id}-share`}
-                value={owner.share}
-                onChange={(event) =>
-                  onOwnerChange(owner.id, "share", event.target.value)
-                }
-                placeholder="Share"
-                inputMode="numeric"
-              />
-            </Field>
-            <RemoveRowButton
-              label={`Remove owner ${index + 1}`}
-              onClick={() => onRemoveOwner(owner.id)}
-            />
-          </div>
-        ))}
-      </div>
-
-      {error ? <FieldError>{error}</FieldError> : null}
-
-      <div className="flex justify-end">
-        <Button
-          type="button"
-          variant="outline"
-          className="w-auto"
-          onClick={onAddOwner}
-        >
-          <PlusIcon data-icon="inline-start" aria-hidden="true" />
-          Add owner
-        </Button>
-      </div>
-    </Field>
-  )
-}
-
-function AttestationCheckbox({
-  id,
-  checked,
-  label,
-  description,
-  error,
-  onCheckedChange,
-}: {
-  id: string
-  checked: boolean
-  label: string
-  description: string
-  error?: string
-  onCheckedChange: (checked: boolean) => void
-}) {
-  return (
-    <Field
-      data-invalid={Boolean(error)}
-      orientation="horizontal"
-      className="gap-3"
-    >
-      <Checkbox
-        id={id}
-        checked={checked}
-        onCheckedChange={(nextChecked) => onCheckedChange(nextChecked === true)}
-        aria-invalid={Boolean(error)}
-      />
-      <FieldContent>
-        <FieldLabel htmlFor={id}>{label}</FieldLabel>
-        <FieldDescription>{description}</FieldDescription>
-      </FieldContent>
-      {error ? <FieldError>{error}</FieldError> : null}
-    </Field>
-  )
-}
-
-export function CompanyStepFields({
-  values,
-  errors,
-  summary,
-  onValueChange,
-}: {
-  values: WizardValues
-  errors: WizardErrors
-  summary: WizardSummary
-  onValueChange: WizardValueChange
-}) {
-  return (
-    <section
-      className="flex flex-col gap-6"
-      aria-labelledby="wizard-2-company-title"
-    >
-      <SectionHeading
-        id="wizard-2-company-title"
-        title="Company Details"
-        description="Identify the vendor record before compliance review."
-      />
-
-      <FieldGroup className="grid gap-5 sm:grid-cols-2">
-        <Field data-invalid={Boolean(errors.companyName)} className="gap-2">
-          <FieldLabelHint
-            htmlFor="wizard-2-company"
-            label="Legal Company Name"
-            hint="Match the registered legal entity name."
-          >
-            Legal Company Name <RequiredMark />
-          </FieldLabelHint>
-          <Input
-            id="wizard-2-company"
-            value={values.companyName}
-            onChange={(event) =>
-              onValueChange("companyName", event.target.value)
-            }
-            aria-invalid={Boolean(errors.companyName)}
-            autoComplete="organization"
-          />
-          {errors.companyName ? (
-            <FieldError>{errors.companyName}</FieldError>
-          ) : null}
-        </Field>
-
-        <Field className="gap-2">
-          <FieldLabelHint
-            htmlFor="wizard-2-registration"
-            label="Portal Registration"
-            hint="Use the status from the vendor portal."
-          >
-            Portal Registration
-          </FieldLabelHint>
-          <WizardSelectField
-            id="wizard-2-registration"
-            value={values.registrationStatus}
-            options={REGISTRATION_OPTIONS}
-            placeholder="Select status"
-            onValueChange={(value) =>
-              onValueChange("registrationStatus", value)
-            }
-          />
-          <FieldDescription>{summary.registrationLabel}</FieldDescription>
-        </Field>
-
-        <Field className="gap-2">
-          <FieldLabel htmlFor="wizard-2-category">Category</FieldLabel>
-          <WizardSelectField<VendorCategory>
-            id="wizard-2-category"
-            value={values.category}
-            options={CATEGORY_OPTIONS}
-            placeholder="Select category"
-            onValueChange={(value) => onValueChange("category", value)}
-          />
-        </Field>
-
-        <Field className="gap-2">
-          <FieldLabel htmlFor="wizard-2-country">Country</FieldLabel>
-          <WizardSelectField<VendorCountry>
-            id="wizard-2-country"
-            value={values.country}
-            options={COUNTRY_OPTIONS}
-            placeholder="Select country"
-            onValueChange={(value) => onValueChange("country", value)}
-          />
-        </Field>
-
-        <Field data-invalid={Boolean(errors.contactEmail)} className="gap-2">
-          <FieldLabel htmlFor="wizard-2-email">
-            Vendor Email <RequiredMark />
-          </FieldLabel>
-          <Input
-            id="wizard-2-email"
-            value={values.contactEmail}
-            onChange={(event) =>
-              onValueChange("contactEmail", event.target.value)
-            }
-            aria-invalid={Boolean(errors.contactEmail)}
-            type="email"
-            autoComplete="email"
-          />
-          {errors.contactEmail ? (
-            <FieldError>{errors.contactEmail}</FieldError>
-          ) : null}
-        </Field>
-
-        <Field className="gap-2">
-          <FieldLabel htmlFor="wizard-2-website">Website</FieldLabel>
-          <Input
-            id="wizard-2-website"
-            value={values.website}
-            onChange={(event) => onValueChange("website", event.target.value)}
-            autoComplete="url"
-          />
-        </Field>
-      </FieldGroup>
-    </section>
-  )
-}
-
-export function OwnershipStepFields({
-  values,
-  errors,
-  onValueChange,
-  onOwnerChange,
-  onAddOwner,
-  onRemoveOwner,
-}: {
-  values: WizardValues
-  errors: WizardErrors
-  onValueChange: WizardValueChange
-  onOwnerChange: (id: string, field: keyof OwnerRecord, value: string) => void
-  onRemoveOwner: (id: string) => void
-  onAddOwner: () => void
-}) {
-  return (
-    <section
-      className="flex flex-col gap-6"
-      aria-labelledby="wizard-2-ownership-title"
-    >
-      <SectionHeading
-        id="wizard-2-ownership-title"
-        title="Compliance"
-        description="Confirm ownership and tax records."
-      />
-
-      <FieldGroup className="grid gap-5 sm:grid-cols-2">
-        <OwnerRows
-          owners={values.owners}
-          error={errors.owners}
-          onOwnerChange={onOwnerChange}
-          onAddOwner={onAddOwner}
-          onRemoveOwner={onRemoveOwner}
-        />
-
-        <Field data-invalid={Boolean(errors.taxId)} className="gap-2">
-          <FieldLabelHint
-            htmlFor="wizard-2-tax"
-            label="Tax/VAT ID"
-            hint="Enter the identifier finance will validate."
-          >
-            Tax/VAT ID <RequiredMark />
-          </FieldLabelHint>
-          <Input
-            id="wizard-2-tax"
-            value={values.taxId}
-            onChange={(event) => onValueChange("taxId", event.target.value)}
-            aria-invalid={Boolean(errors.taxId)}
-            placeholder="Enter tax number"
-          />
-          {errors.taxId ? <FieldError>{errors.taxId}</FieldError> : null}
-        </Field>
-
-        <Field
-          data-invalid={Boolean(errors.incorporationDate)}
-          className="gap-2"
-        >
-          <FieldLabelHint
-            htmlFor="wizard-2-incorporated"
-            label="Date Incorporated"
-            hint="Use the date from the registration record."
-          >
-            Date Incorporated <RequiredMark />
-          </FieldLabelHint>
-          <Input
-            id="wizard-2-incorporated"
-            value={values.incorporationDate}
-            onChange={(event) =>
-              onValueChange("incorporationDate", event.target.value)
-            }
-            aria-invalid={Boolean(errors.incorporationDate)}
-            placeholder="MM/DD/YYYY"
-          />
-          {errors.incorporationDate ? (
-            <FieldError>{errors.incorporationDate}</FieldError>
-          ) : null}
-        </Field>
-
-        <AttestationCheckbox
-          id="wizard-2-ownership-attested"
-          checked={values.ownershipAttested}
-          label="Ownership reviewed"
-          description="Records match company documents."
-          error={errors.ownershipAttested}
-          onCheckedChange={(checked) =>
-            onValueChange("ownershipAttested", checked)
-          }
-        />
-      </FieldGroup>
-    </section>
-  )
-}
-
-export function DocumentsStepFields({
-  values,
-  errors,
-  summary,
-  onValueChange,
-  onDocumentToggle,
-}: {
-  values: WizardValues
-  errors: WizardErrors
-  summary: WizardSummary
-  onValueChange: WizardValueChange
-  onDocumentToggle: (documentId: DocumentId, checked: boolean) => void
-}) {
-  return (
-    <section
-      className="flex flex-col gap-6"
-      aria-labelledby="wizard-2-documents-title"
-    >
-      <SectionHeading
-        id="wizard-2-documents-title"
-        title="Submit"
-        description="Review files and confirm."
-      />
-
-      <FieldGroup className="grid gap-6">
-        <Field data-invalid={Boolean(errors.documentIds)} className="gap-3">
-          <FieldLabelHint
-            label="Required Documents"
-            hint="Select files already received from the vendor."
-          >
-            Required Documents
-          </FieldLabelHint>
-          <FieldGroup className="grid gap-2 sm:grid-cols-2">
-            {DOCUMENT_REQUIREMENTS.map((document) => (
-              <FieldLabel key={document.id}>
-                <Field orientation="horizontal">
-                  <Checkbox
-                    checked={values.documentIds.includes(document.id)}
-                    onCheckedChange={(checked) =>
-                      onDocumentToggle(document.id, checked === true)
-                    }
-                  />
-                  <FieldContent>
-                    <FieldTitle>{document.title}</FieldTitle>
-                    <FieldDescription>{document.description}</FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-            ))}
-          </FieldGroup>
-          {errors.documentIds ? (
-            <FieldError>{errors.documentIds}</FieldError>
-          ) : null}
-        </Field>
-
-        <Field className="gap-2">
-          <FieldLabel htmlFor="wizard-2-notes">Reviewer Notes</FieldLabel>
-          <Textarea
-            id="wizard-2-notes"
-            value={values.submissionNotes}
-            onChange={(event) =>
-              onValueChange("submissionNotes", event.target.value)
-            }
-            className="min-h-24 resize-none"
-          />
-        </Field>
-
-        <div className="grid gap-3 sm:grid-cols-2">
-          <SummarySection title="Vendor">
-            <dl className="flex flex-col gap-2.5">
-              <SummaryLine label="Company" value={values.companyName} />
-              <SummaryLine label="Category" value={summary.categoryLabel} />
-              <SummaryLine label="Country" value={summary.countryLabel} />
-            </dl>
-          </SummarySection>
-
-          <SummarySection title="Compliance">
-            <dl className="flex flex-col gap-2.5">
-              <SummaryLine label="Tax/VAT" value={values.taxId} />
-              <SummaryLine label="Owners" value={values.owners.length} />
-              <SummaryLine label="Status" value="Reviewed" />
-            </dl>
-          </SummarySection>
-        </div>
-      </FieldGroup>
-    </section>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/wizard-2/components/procurement-vendor-wizard.tsx b/apps/web/src/components/blocks/wizard-2/components/procurement-vendor-wizard.tsx
deleted file mode 100644
index 6d90db4..0000000
--- a/apps/web/src/components/blocks/wizard-2/components/procurement-vendor-wizard.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-"use client"
-
-import { useCallback, useMemo, useState, type FormEvent } from "react"
-import { Badge } from "@/components/reui/badge"
-import {
-  Frame,
-  FrameDescription,
-  FrameFooter,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from "@/components/reui/frame"
-import {
-  Stepper,
-  StepperContent,
-  StepperIndicator,
-  StepperItem,
-  StepperNav,
-  StepperPanel,
-  StepperSeparator,
-  StepperTitle,
-  StepperTrigger,
-} from "@/components/reui/stepper"
-import { toast } from "sonner"
-
-import { Button } from "@evobgp/ui/components/button"
-import { Spinner } from "@evobgp/ui/components/spinner"
-import {
-  CATEGORY_OPTIONS,
-  COUNTRY_OPTIONS,
-  DEFAULT_WIZARD_VALUES,
-  REGISTRATION_OPTIONS,
-  WIZARD_STEPS,
-  type DocumentId,
-  type OwnerRecord,
-  type WizardOption,
-  type WizardStepId,
-  type WizardValues,
-} from "./data"
-import {
-  CompanyStepFields,
-  DocumentsStepFields,
-  OwnershipStepFields,
-  type WizardErrors,
-} from "./procurement-vendor-steps"
-import { CheckIcon, FlagIcon, ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
-
-function createDefaultValues(): WizardValues {
-  return {
-    ...DEFAULT_WIZARD_VALUES,
-    owners: DEFAULT_WIZARD_VALUES.owners.map((owner) => ({ ...owner })),
-    documentIds: [...DEFAULT_WIZARD_VALUES.documentIds],
-  }
-}
-
-function isValidEmail(value: string) {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim())
-}
-
-function getOptionLabel<TValue extends string>(
-  options: WizardOption<TValue>[],
-  value: TValue
-) {
-  return options.find((option) => option.value === value)?.label ?? "Not set"
-}
-
-function getStepErrors(stepId: WizardStepId, values: WizardValues) {
-  const nextErrors: WizardErrors = {}
-
-  if (stepId === "company") {
-    if (!values.companyName.trim()) {
-      nextErrors.companyName = "Enter the legal company name."
-    }
-
-    if (!isValidEmail(values.contactEmail)) {
-      nextErrors.contactEmail = "Enter a valid procurement email."
-    }
-  }
-
-  if (stepId === "ownership") {
-    if (!values.taxId.trim()) {
-      nextErrors.taxId = "Enter the Tax/VAT ID."
-    }
-
-    if (!values.incorporationDate.trim()) {
-      nextErrors.incorporationDate = "Enter the incorporation date."
-    }
-
-    if (!values.owners.some((owner) => owner.name.trim())) {
-      nextErrors.owners = "Add at least one beneficial owner."
-    }
-
-    if (!values.ownershipAttested) {
-      nextErrors.ownershipAttested = "Confirm beneficial ownership review."
-    }
-  }
-
-  if (stepId === "documents" && values.documentIds.length < 2) {
-    nextErrors.documentIds = "Select at least two received documents."
-  }
-
-  return nextErrors
-}
-
-function getAllRequiredErrors(values: WizardValues) {
-  return {
-    ...getStepErrors("company", values),
-    ...getStepErrors("ownership", values),
-    ...getStepErrors("documents", values),
-  }
-}
-
-function getFirstInvalidStep(values: WizardValues) {
-  if (Object.keys(getStepErrors("company", values)).length > 0) return 1
-  if (Object.keys(getStepErrors("ownership", values)).length > 0) return 2
-  if (Object.keys(getStepErrors("documents", values)).length > 0) return 3
-
-  return null
-}
-
-function DotSeparator() {
-  return (
-    <span
-      className="size-1 shrink-0 rounded-full bg-gray-400 dark:bg-gray-500"
-      aria-hidden="true"
-    />
-  )
-}
-
-export function ProcurementVendorWizard() {
-  const [currentStep, setCurrentStep] = useState(2)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [values, setValues] = useState<WizardValues>(createDefaultValues)
-  const [errors, setErrors] = useState<WizardErrors>({})
-
-  const currentStepConfig = useMemo(
-    () =>
-      WIZARD_STEPS.find((step) => step.step === currentStep) ?? WIZARD_STEPS[0],
-    [currentStep]
-  )
-
-  const summary = useMemo(
-    () => ({
-      categoryLabel: getOptionLabel(CATEGORY_OPTIONS, values.category),
-      countryLabel: getOptionLabel(COUNTRY_OPTIONS, values.country),
-      registrationLabel: getOptionLabel(
-        REGISTRATION_OPTIONS,
-        values.registrationStatus
-      ),
-    }),
-    [values.category, values.country, values.registrationStatus]
-  )
-
-  const handleValueChange = useCallback(
-    (field: keyof WizardValues, value: WizardValues[keyof WizardValues]) => {
-      setValues((current) => ({
-        ...current,
-        [field]: value,
-      }))
-
-      setErrors((current) => {
-        if (!current[field]) {
-          return current
-        }
-
-        const nextErrors = { ...current }
-        delete nextErrors[field]
-        return nextErrors
-      })
-    },
-    []
-  )
-
-  const handleOwnerChange = useCallback(
-    (id: string, field: keyof OwnerRecord, value: string) => {
-      setValues((current) => ({
-        ...current,
-        owners: current.owners.map((owner) =>
-          owner.id === id ? { ...owner, [field]: value } : owner
-        ),
-      }))
-
-      setErrors((current) => {
-        if (!current.owners) return current
-        const nextErrors = { ...current }
-        delete nextErrors.owners
-        return nextErrors
-      })
-    },
-    []
-  )
-
-  const handleAddOwner = useCallback(() => {
-    setValues((current) => ({
-      ...current,
-      owners: [
-        ...current.owners,
-        {
-          id: `owner-${Date.now()}`,
-          name: "",
-          address: "",
-          share: "",
-        },
-      ],
-    }))
-  }, [])
-
-  const handleRemoveOwner = useCallback((id: string) => {
-    setValues((current) => ({
-      ...current,
-      owners: current.owners.filter((owner) => owner.id !== id),
-    }))
-
-    setErrors((current) => {
-      if (!current.owners) return current
-      const nextErrors = { ...current }
-      delete nextErrors.owners
-      return nextErrors
-    })
-  }, [])
-
-  const handleDocumentToggle = useCallback(
-    (documentId: DocumentId, checked: boolean) => {
-      setValues((current) => ({
-        ...current,
-        documentIds: checked
-          ? Array.from(new Set([...current.documentIds, documentId]))
-          : current.documentIds.filter((id) => id !== documentId),
-      }))
-
-      setErrors((current) => {
-        if (!current.documentIds) return current
-        const nextErrors = { ...current }
-        delete nextErrors.documentIds
-        return nextErrors
-      })
-    },
-    []
-  )
-
-  const handleBack = useCallback(() => {
-    setCurrentStep((step) => Math.max(1, step - 1))
-  }, [])
-
-  const handleSubmit = useCallback(
-    (event: FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
-
-      if (isSubmitting) {
-        return
-      }
-
-      if (currentStepConfig.id !== "documents") {
-        const stepErrors = getStepErrors(currentStepConfig.id, values)
-
-        if (Object.keys(stepErrors).length > 0) {
-          setErrors((current) => ({ ...current, ...stepErrors }))
-          return
-        }
-
-        const nextStep = Math.min(currentStep + 1, WIZARD_STEPS.length)
-        setCurrentStep(nextStep)
-        return
-      }
-
-      const requiredErrors = getAllRequiredErrors(values)
-      const invalidStep = getFirstInvalidStep(values)
-
-      if (Object.keys(requiredErrors).length > 0 && invalidStep !== null) {
-        setErrors(requiredErrors)
-        setCurrentStep(invalidStep)
-        return
-      }
-
-      setIsSubmitting(true)
-      window.setTimeout(() => {
-        setIsSubmitting(false)
-        toast.success("Vendor file submitted", {
-          description: `${values.companyName} is ready for procurement review.`,
-        })
-      }, 900)
-    },
-    [currentStep, currentStepConfig.id, isSubmitting, values]
-  )
-
-  const isLastStep = currentStep === WIZARD_STEPS.length
-  const canGoBack = currentStep > 1 && !isSubmitting
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="flex w-full max-w-2xl flex-col"
-      aria-label="Procurement vendor onboarding wizard"
-    >
-      <Stepper
-        value={currentStep}
-        onValueChange={setCurrentStep}
-        indicators={{
-          completed: (
-            <CheckIcon className="size-3.5" aria-hidden="true" />
-          ),
-          loading: <Spinner className="size-3.5" />,
-        }}
-        className="w-full"
-      >
-        <Frame stacked={true} className="w-full">
-          <FrameHeader>
-            <div className="flex items-center justify-between gap-3">
-              <div className="flex min-w-0 flex-col gap-px">
-                <FrameTitle>Procurement Vendor Setup</FrameTitle>
-                <FrameDescription className="inline-flex min-w-0 items-center gap-1.5 text-sm">
-                  <span className="shrink-0">{values.portalId}</span>
-                  <DotSeparator />
-                  <span className="truncate">{summary.categoryLabel}</span>
-                </FrameDescription>
-              </div>
-              <Badge variant="warning-light">Review file</Badge>
-            </div>
-          </FrameHeader>
-
-          <FramePanel className="flex items-center overflow-x-auto">
-            <StepperNav
-              aria-label="Wizard progress"
-              className="min-w-full items-center"
-            >
-              {WIZARD_STEPS.map((step, index) => (
-                <StepperItem
-                  key={step.id}
-                  step={step.step}
-                  loading={isSubmitting && step.step === currentStep}
-                  className="relative min-w-0"
-                >
-                  <StepperTrigger
-                    type="button"
-                    className="min-w-0 justify-start gap-2 disabled:opacity-100"
-                  >
-                    <StepperIndicator className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=completed]:bg-primary data-[state=inactive]:border-border data-[state=inactive]:text-foreground data-[state=active]:before:border-primary relative isolate size-6 overflow-visible rounded-full border before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-full before:border before:border-dashed before:border-transparent before:content-[''] data-[state=active]:border-0 data-[state=active]:before:animate-[spin_8s_linear_infinite] motion-reduce:data-[state=active]:before:animate-none">
-                      {index + 1}
-                    </StepperIndicator>
-                    <StepperTitle className="text-foreground hidden truncate text-sm capitalize sm:block">
-                      {step.title}
-                    </StepperTitle>
-                  </StepperTrigger>
-
-                  {WIZARD_STEPS.length > index + 1 ? (
-                    <StepperSeparator className="bg-border group-data-[state=completed]/step:bg-primary mx-2" />
-                  ) : null}
-                </StepperItem>
-              ))}
-            </StepperNav>
-          </FramePanel>
-
-          <FramePanel>
-            <StepperPanel className="text-sm">
-              {WIZARD_STEPS.map((step) => (
-                <StepperContent key={step.id} value={step.step}>
-                  {step.id === "company" ? (
-                    <CompanyStepFields
-                      values={values}
-                      errors={errors}
-                      summary={summary}
-                      onValueChange={handleValueChange}
-                    />
-                  ) : null}
-
-                  {step.id === "ownership" ? (
-                    <OwnershipStepFields
-                      values={values}
-                      errors={errors}
-                      onValueChange={handleValueChange}
-                      onOwnerChange={handleOwnerChange}
-                      onAddOwner={handleAddOwner}
-                      onRemoveOwner={handleRemoveOwner}
-                    />
-                  ) : null}
-
-                  {step.id === "documents" ? (
-                    <DocumentsStepFields
-                      values={values}
-                      errors={errors}
-                      summary={summary}
-                      onValueChange={handleValueChange}
-                      onDocumentToggle={handleDocumentToggle}
-                    />
-                  ) : null}
-                </StepperContent>
-              ))}
-            </StepperPanel>
-          </FramePanel>
-
-          <FrameFooter className="gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <FrameDescription className="hidden min-w-0 items-center gap-1.5 text-sm sm:flex">
-              <FlagIcon className="size-4 shrink-0" aria-hidden="true" />
-              {currentStepConfig.description}
-            </FrameDescription>
-
-            <div className="flex w-full items-center justify-end gap-2 sm:w-auto">
-              {canGoBack ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={handleBack}
-                  className="shrink-0"
-                >
-                  <ArrowLeftIcon data-icon="inline-start" aria-hidden="true" />
-                  Previous
-                </Button>
-              ) : null}
-              <Button
-                type="submit"
-                disabled={isSubmitting}
-                className="shrink-0"
-              >
-                {isSubmitting ? <Spinner data-icon="inline-start" /> : null}
-                {isLastStep ? "Submit" : "Next Step"}
-                {!isLastStep && !isSubmitting ? (
-                  <ArrowRightIcon data-icon="inline-end" aria-hidden="true" />
-                ) : null}
-              </Button>
-            </div>
-          </FrameFooter>
-        </Frame>
-      </Stepper>
-    </form>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/wizard-2/page.tsx b/apps/web/src/components/blocks/wizard-2/page.tsx
deleted file mode 100644
index 18e41fc..0000000
--- a/apps/web/src/components/blocks/wizard-2/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ProcurementVendorWizard } from "./components/procurement-vendor-wizard"
-
-export function Page() {
-  return (
-    <div className="flex min-h-svh w-full items-start justify-center p-4 sm:p-6 lg:p-10">
-      <ProcurementVendorWizard />
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/category-badge.tsx b/apps/web/src/components/category-badge.tsx
index 5e56463..f1e2fa4 100644
--- a/apps/web/src/components/category-badge.tsx
+++ b/apps/web/src/components/category-badge.tsx
@@ -1,50 +1 @@
-import type { ComponentProps, ReactNode } from 'react'
-
-import { Badge } from '@/components/reui/badge'
-
-type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
-
-const TONE_VARIANT: Record<string, BadgeVariant> = {
-  neutral: 'outline',
-  info: 'info-light',
-  warning: 'warning-light',
-  success: 'success-light',
-}
-
-export function ModeBadge({
-  enabled,
-  onLabel = 'включён',
-  offLabel = 'выключен',
-  className,
-}: {
-  enabled: boolean
-  onLabel?: string
-  offLabel?: string
-  className?: string
-}) {
-  return enabled ? (
-    <Badge variant="success-light" size="sm" radius="full" className={className}>
-      {onLabel}
-    </Badge>
-  ) : (
-    <Badge variant="secondary" size="sm" radius="full" className={className}>
-      {offLabel}
-    </Badge>
-  )
-}
-
-export function CategoryBadge({
-  children,
-  tone = 'neutral',
-  className,
-}: {
-  children: ReactNode
-  tone?: keyof typeof TONE_VARIANT
-  className?: string
-}) {
-  return (
-    <Badge variant={TONE_VARIANT[tone]} size="sm" radius="full" className={className}>
-      {children}
-    </Badge>
-  )
-}
+export { CategoryBadge, ModeBadge } from '@/components/status-badge'
diff --git a/apps/web/src/components/counted-line-tabs.tsx b/apps/web/src/components/counted-line-tabs.tsx
deleted file mode 100644
index 4466756..0000000
--- a/apps/web/src/components/counted-line-tabs.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { ReactNode } from 'react'
-import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-import { cn } from '@evobgp/ui/lib/utils'
-
-export interface CountedLineTab {
-  id: string
-  label: string
-  count?: number
-}
-
-interface CountedLineTabsProps {
-  tabs: CountedLineTab[]
-  value: string
-  onValueChange: (value: string) => void
-  className?: string
-  listClassName?: string
-  children?: ReactNode
-}
-
-/** Line tabs with count pills (c-tabs-2 / data-grid-filtering-2). */
-export function CountedLineTabs({
-  tabs,
-  value,
-  onValueChange,
-  className,
-  listClassName,
-  children,
-}: CountedLineTabsProps) {
-  return (
-    <Tabs value={value} onValueChange={onValueChange} className={className}>
-      <TabsList variant="line" className={cn('gap-5', listClassName)}>
-        {tabs.map((tab) => (
-          <TabsTrigger
-            key={tab.id}
-            value={tab.id}
-            className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
-          >
-            <span>{tab.label}</span>
-            {tab.count !== undefined ? (
-              <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">
-                {tab.count}
-              </span>
-            ) : null}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {children}
-    </Tabs>
-  )
-}
diff --git a/apps/web/src/components/dashboard/dashboard-frame-panel.tsx b/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
index f4d1e13..615865e 100644
--- a/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
+++ b/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react'
 
 import {
-  PanelCard,
+  FrameSection,
   panelCardContentFlushClassName,
-} from '@/components/panel-card'
+} from '@/components/reui-kit'
 import { cn } from '@evobgp/ui/lib/utils'
 
-/** Card-surface panel for dashboard sections (replaces legacy Frame shell). */
+/** Frame panel for dashboard sections. Preview: https://reui.io/docs/components/base/frame */
 export function DashboardFramePanel({
   title,
   description,
@@ -23,7 +23,7 @@ export function DashboardFramePanel({
   contentClassName?: string
 }) {
   return (
-    <PanelCard
+    <FrameSection
       title={title}
       description={description}
       actions={actions}
@@ -31,6 +31,6 @@ export function DashboardFramePanel({
       contentClassName={cn(panelCardContentFlushClassName, contentClassName)}
     >
       {children}
-    </PanelCard>
+    </FrameSection>
   )
 }
diff --git a/apps/web/src/components/dashboard/dashboard-kpi-grid.tsx b/apps/web/src/components/dashboard/dashboard-kpi-grid.tsx
index c7b251a..5151b5d 100644
--- a/apps/web/src/components/dashboard/dashboard-kpi-grid.tsx
+++ b/apps/web/src/components/dashboard/dashboard-kpi-grid.tsx
@@ -8,7 +8,7 @@ import {
 } from 'lucide-react'
 import type { ReactNode } from 'react'
 
-import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
+import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
 import { Badge } from '@/components/reui/badge'
 
 import { aggregateNetworkMetrics, runningJobCount } from '@/queries/overview'
diff --git a/apps/web/src/components/dashboard/dashboard-quick-links.tsx b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
index 0f0e6a1..5e0c8bf 100644
--- a/apps/web/src/components/dashboard/dashboard-quick-links.tsx
+++ b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
@@ -61,7 +61,6 @@ const ACTIONS: QuickActionItem[] = [
     title: 'Мониторинг',
     description: 'Состояние системы, BIRD и PostgreSQL.',
     to: '/monitoring',
-    search: { tab: 'system' },
     icon: <Gauge aria-hidden />,
     iconClassName: 'text-destructive',
   },
diff --git a/apps/web/src/components/empty-state.tsx b/apps/web/src/components/empty-state.tsx
index 45a1c2a..ee88a4f 100644
--- a/apps/web/src/components/empty-state.tsx
+++ b/apps/web/src/components/empty-state.tsx
@@ -7,6 +7,10 @@ import { InboxIcon, type LucideIcon } from 'lucide-react'
 import type { ReactNode } from 'react'
 
 import { IconStack } from '@/components/reui/icon-stack'
+import {
+  Frame,
+  FramePanel,
+} from '@/components/reui/frame'
 import {
   Empty,
   EmptyContent,
@@ -25,6 +29,8 @@ interface EmptyStateProps {
   className?: string
   stackedIcon?: boolean
   centered?: boolean
+  /** Wrap in Frame (empty-state-14). Nested grids should leave this false. */
+  framed?: boolean
 }
 
 function isLucideIcon(icon: LucideIcon | ReactNode): icon is LucideIcon {
@@ -44,15 +50,16 @@ export function EmptyState({
   className,
   stackedIcon = true,
   centered = true,
+  framed = false,
 }: EmptyStateProps) {
   const Icon = isLucideIcon(icon) ? icon : InboxIcon
   const customIcon = icon && !isLucideIcon(icon) ? icon : null
 
-  const body = (
+  const empty = (
     <Empty
       className={cn(
         'max-w-md flex-none border-0 bg-transparent p-0',
-        !centered && className,
+        !centered && !framed && className,
       )}
     >
       <EmptyHeader className="gap-5 text-center">
@@ -88,6 +95,16 @@ export function EmptyState({
     </Empty>
   )
 
+  const body = framed ? (
+    <Frame dense spacing="sm" className={cn('w-full', !centered && className)}>
+      <FramePanel className="flex min-h-[240px] flex-col items-center justify-center gap-4 p-6 sm:p-10">
+        {empty}
+      </FramePanel>
+    </Frame>
+  ) : (
+    empty
+  )
+
   if (!centered) return body
 
   return (
diff --git a/apps/web/src/components/examples/c-input-group-37.tsx b/apps/web/src/components/examples/c-input-group-37.tsx
deleted file mode 100644
index 1471604..0000000
--- a/apps/web/src/components/examples/c-input-group-37.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-"use client"
-
-import { useState } from "react"
-
-import { Checkbox } from "@evobgp/ui/components/checkbox"
-import { Field } from "@evobgp/ui/components/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@evobgp/ui/components/input-group"
-import { Label } from "@evobgp/ui/components/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@evobgp/ui/components/popover"
-import { SearchIcon, XIcon, ListFilterIcon } from "lucide-react"
-
-const statuses = ["Pending", "Shipped", "Cancelled"] as const
-
-type Status = (typeof statuses)[number]
-
-function toggleStatus(values: Status[], value: Status) {
-  return values.includes(value)
-    ? values.filter((item) => item !== value)
-    : [...values, value]
-}
-
-export function Pattern() {
-  const [searchQuery, setSearchQuery] = useState("")
-  const [selectedStatuses, setSelectedStatuses] = useState<Status[]>([])
-
-  return (
-    <Field className="max-w-sm">
-      <InputGroup>
-        <InputGroupAddon align="inline-start">
-          <SearchIcon aria-hidden="true" />
-        </InputGroupAddon>
-
-        <InputGroupInput
-          placeholder="Search orders..."
-          value={searchQuery}
-          onChange={(event) => setSearchQuery(event.target.value)}
-        />
-
-        <InputGroupAddon align="inline-end" className="gap-1">
-          {searchQuery.length > 0 ? (
-            <InputGroupButton
-              aria-label="Clear search"
-              size="icon-xs"
-              variant="ghost"
-              onClick={() => setSearchQuery("")}
-            >
-              <XIcon aria-hidden="true" />
-            </InputGroupButton>
-          ) : null}
-
-          <Popover>
-            <PopoverTrigger
-              render={
-                <InputGroupButton
-                  variant="ghost"
-                  size="xs"
-                  className="gap-1.5"
-                  aria-label="Filter order status"
-                />
-              }
-            >
-              <ListFilterIcon className="size-3.5" aria-hidden="true" />
-              Status
-              {selectedStatuses.length > 0 ? (
-                <span className="text-muted-foreground tabular-nums">
-                  {selectedStatuses.length}
-                </span>
-              ) : null}
-            </PopoverTrigger>
-            <PopoverContent align="end" className="w-40 p-3">
-              <div className="flex flex-col gap-2">
-                {statuses.map((status) => (
-                  <div key={status} className="flex items-center gap-2.5">
-                    <Checkbox
-                      id={`order-status-${status}`}
-                      checked={selectedStatuses.includes(status)}
-                      onCheckedChange={() =>
-                        setSelectedStatuses((previous) =>
-                          toggleStatus(previous, status)
-                        )
-                      }
-                    />
-                    <Label
-                      htmlFor={`order-status-${status}`}
-                      className="text-sm font-normal"
-                    >
-                      {status}
-                    </Label>
-                  </div>
-                ))}
-              </div>
-            </PopoverContent>
-          </Popover>
-        </InputGroupAddon>
-      </InputGroup>
-    </Field>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/examples/c-select-4.tsx b/apps/web/src/components/examples/c-select-4.tsx
deleted file mode 100644
index 6d24acc..0000000
--- a/apps/web/src/components/examples/c-select-4.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Field } from '@evobgp/ui/components/field'
-
-import { SelectMenu } from '@/components/select-field'
-
-const items = [
-  { label: 'Select an item', value: 'placeholder' as const },
-  ...Array.from({ length: 100 }).map((_, i) => ({
-    label: `Item ${i}`,
-    value: `item-${i}` as const,
-  })),
-]
-
-export function Pattern() {
-  return (
-    <Field className="max-w-xs">
-      <SelectMenu items={items} placeholder="Select an item" />
-    </Field>
-  )
-}
diff --git a/apps/web/src/components/examples/c-tabs-2.tsx b/apps/web/src/components/examples/c-tabs-2.tsx
deleted file mode 100644
index 48cac88..0000000
--- a/apps/web/src/components/examples/c-tabs-2.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Button } from "@evobgp/ui/components/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@evobgp/ui/components/card"
-import { Input } from "@evobgp/ui/components/input"
-import { Label } from "@evobgp/ui/components/label"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@evobgp/ui/components/tabs"
-
-export function Pattern() {
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-6">
-      <Tabs defaultValue="account">
-        <TabsList variant="line" className="mb-3.5 w-full">
-          <TabsTrigger value="account">Account</TabsTrigger>
-          <TabsTrigger value="password">Password</TabsTrigger>
-          <TabsTrigger value="settings">Settings</TabsTrigger>
-        </TabsList>
-        <TabsContent value="account">
-          <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="text-base">Account</CardTitle>
-              <CardDescription className="text-sm">
-                Update your account information.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="underline-name" className="text-sm">
-                  Name
-                </Label>
-                <Input
-                  id="underline-name"
-                  defaultValue="Alex Chen"
-                  className="h-9"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="underline-email" className="text-sm">
-                  Email
-                </Label>
-                <Input
-                  id="underline-email"
-                  type="email"
-                  defaultValue="alex.chen@example.com"
-                  className="h-9"
-                />
-              </div>
-            </CardContent>
-            <CardFooter className="pt-3">
-              <Button size="sm">Save changes</Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-        <TabsContent value="password">
-          <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="text-base">Password</CardTitle>
-              <CardDescription className="text-sm">
-                Change your password here.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="underline-current" className="text-sm">
-                  Current password
-                </Label>
-                <Input id="underline-current" type="password" className="h-9" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="underline-new" className="text-sm">
-                  New password
-                </Label>
-                <Input id="underline-new" type="password" className="h-9" />
-              </div>
-            </CardContent>
-            <CardFooter className="pt-3">
-              <Button size="sm">Update password</Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-        <TabsContent value="settings">
-          <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="text-base">Settings</CardTitle>
-              <CardDescription className="text-sm">
-                Manage your preferences.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="underline-theme" className="text-sm">
-                  Theme
-                </Label>
-                <Input
-                  id="underline-theme"
-                  defaultValue="Light"
-                  className="h-9"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="underline-language" className="text-sm">
-                  Language
-                </Label>
-                <Input
-                  id="underline-language"
-                  defaultValue="English"
-                  className="h-9"
-                />
-              </div>
-            </CardContent>
-            <CardFooter className="pt-3">
-              <Button size="sm">Save settings</Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/examples/c-tabs-6.tsx b/apps/web/src/components/examples/c-tabs-6.tsx
deleted file mode 100644
index 5da2fe8..0000000
--- a/apps/web/src/components/examples/c-tabs-6.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Card, CardContent } from "@evobgp/ui/components/card"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@evobgp/ui/components/tabs"
-import { LayoutDashboardIcon, BarChart3Icon, SettingsIcon } from "lucide-react"
-
-export function Pattern() {
-  return (
-    <div className="flex w-full max-w-md flex-col gap-6">
-      <Tabs defaultValue="overview">
-        <TabsList className="w-full">
-          <TabsTrigger value="overview">
-            <LayoutDashboardIcon className="size-4" />
-            Overview
-          </TabsTrigger>
-          <TabsTrigger value="analytics">
-            <BarChart3Icon className="size-4" />
-            Analytics
-          </TabsTrigger>
-          <TabsTrigger value="settings">
-            <SettingsIcon className="size-4" />
-            Settings
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="overview">
-          <Card>
-            <CardContent>Overview dashboard content goes here.</CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="analytics">
-          <Card>
-            <CardContent>Analytics charts and metrics.</CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="settings">
-          <Card>
-            <CardContent>Application settings and preferences.</CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/examples/c-tabs-7.tsx b/apps/web/src/components/examples/c-tabs-7.tsx
deleted file mode 100644
index fd63379..0000000
--- a/apps/web/src/components/examples/c-tabs-7.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Badge } from "@/components/reui/badge"
-
-import { Card, CardContent } from "@evobgp/ui/components/card"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@evobgp/ui/components/tabs"
-
-export function Pattern() {
-  return (
-    <div className="flex w-full max-w-md flex-col gap-6">
-      <Tabs defaultValue="inbox">
-        <TabsList variant="line" className="mb-3.5 w-full">
-          <TabsTrigger value="inbox" className="gap-2">
-            Inbox
-            <Badge variant="primary-light" size="sm">
-              12
-            </Badge>
-          </TabsTrigger>
-          <TabsTrigger value="drafts" className="gap-2">
-            Drafts
-            <Badge variant="info-light" size="sm">
-              3
-            </Badge>
-          </TabsTrigger>
-          <TabsTrigger value="sent" className="gap-2">
-            Sent
-          </TabsTrigger>
-          <TabsTrigger value="spam" className="gap-2">
-            Spam
-            <Badge variant="destructive-light" size="sm">
-              24
-            </Badge>
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="inbox">
-          <Card>
-            <CardContent>12 unread messages in your inbox.</CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="drafts">
-          <Card>
-            <CardContent>3 drafts waiting to be sent.</CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="sent">
-          <Card>
-            <CardContent>All sent messages appear here.</CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="spam">
-          <Card>
-            <CardContent>24 spam messages detected.</CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/form-drawer.tsx b/apps/web/src/components/form-drawer.tsx
index 731bf38..121a1ee 100644
--- a/apps/web/src/components/form-drawer.tsx
+++ b/apps/web/src/components/form-drawer.tsx
@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react'
 
 import { cn } from '@evobgp/ui/lib/utils'
+import { FieldGroup } from '@evobgp/ui/components/field'
+import { ScrollArea } from '@evobgp/ui/components/scroll-area'
 import {
   Sheet,
   SheetContent,
@@ -20,7 +22,11 @@ interface FormDrawerProps {
   className?: string
 }
 
-/** Create/edit overlay — Sheet DNA (sheet-8 / sheet-1). Preview: https://reui.io/preview/base/sheet-8 */
+/**
+ * Create/edit overlay — Sheet DNA (sheet-8) + FieldGroup (form-7).
+ * @see https://reui.io/preview/base/sheet-8
+ * @see https://reui.io/preview/base/form-7
+ */
 export function FormDrawer({
   open,
   onOpenChange,
@@ -34,13 +40,17 @@ export function FormDrawer({
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
         side="right"
-        className={cn('w-full gap-0 overflow-hidden p-0 sm:max-w-lg', className)}
+        className={cn('flex w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-lg', className)}
       >
         <SheetHeader className="shrink-0 border-b border-border/50">
           <SheetTitle>{title}</SheetTitle>
           {description ? <SheetDescription>{description}</SheetDescription> : null}
         </SheetHeader>
-        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">{children}</div>
+        <div className="min-h-0 flex-1 overflow-hidden">
+          <ScrollArea className="h-full">
+            <FieldGroup className="p-4">{children}</FieldGroup>
+          </ScrollArea>
+        </div>
         <SheetFooter className="mt-0 shrink-0 border-t border-border/50 bg-muted/50">
           <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
             {footer}
diff --git a/apps/web/src/components/kpi-stat-grid.tsx b/apps/web/src/components/kpi-stat-grid.tsx
deleted file mode 100644
index 5da4d38..0000000
--- a/apps/web/src/components/kpi-stat-grid.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Re-export from reui-kit — keep `@/components/kpi-stat-grid` imports stable.
- * @see https://reui.io/preview/base/stats-12
- */
-export {
-  KpiStatGrid,
-  KpiStatCard,
-  KpiStatCardTile,
-  kpiStatItemKey,
-  type KpiStatItem,
-  type KpiStatCardData,
-  type KpiStatVariant,
-  type OpsKpiCard,
-} from '@/components/reui-kit/kpi-stat-grid'
diff --git a/apps/web/src/components/layout/app-shell.tsx b/apps/web/src/components/layout/app-shell.tsx
index 1b44547..57a1bef 100644
--- a/apps/web/src/components/layout/app-shell.tsx
+++ b/apps/web/src/components/layout/app-shell.tsx
@@ -89,7 +89,7 @@ const NAV_GROUPS: NavGroup[] = [
     items: [
       { to: '/operations', label: 'Операции', icon: Cog, description: 'Ревизии и применение', search: { tab: 'revisions' } },
       { to: '/schedule', label: 'Задачи', icon: ListChecks, description: 'Расписание обновления' },
-      { to: '/monitoring', label: 'Мониторинг', icon: Activity, description: 'Состояние системы и BIRD', search: { tab: 'system' } },
+      { to: '/monitoring', label: 'Мониторинг', icon: Activity, description: 'Состояние системы и BIRD' },
     ],
   },
   {
diff --git a/apps/web/src/components/loading-button.tsx b/apps/web/src/components/loading-button.tsx
index 4e3ac5e..947e09f 100644
--- a/apps/web/src/components/loading-button.tsx
+++ b/apps/web/src/components/loading-button.tsx
@@ -1,18 +1,17 @@
 import { Button } from '@evobgp/ui/components/button'
-import { Loader2Icon } from 'lucide-react'
-import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Spinner } from '@evobgp/ui/components/spinner'
+import type { ComponentProps, ReactNode } from 'react'
 
-type LoadingButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type LoadingButtonProps = ComponentProps<typeof Button> & {
   loading?: boolean
-  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link'
-  size?: 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'
   children: ReactNode
 }
 
+/** SoT for async actions — Button + Spinner. */
 export function LoadingButton({ loading, disabled, children, ...props }: LoadingButtonProps) {
   return (
     <Button disabled={disabled || loading} {...props}>
-      {loading ? <Loader2Icon className="animate-spin" data-icon="inline-start" /> : null}
+      {loading ? <Spinner data-icon="inline-start" /> : null}
       {children}
     </Button>
   )
diff --git a/apps/web/src/components/modules/module-create-dialog.tsx b/apps/web/src/components/modules/module-create-dialog.tsx
index 0d1e3ff..dbb2710 100644
--- a/apps/web/src/components/modules/module-create-dialog.tsx
+++ b/apps/web/src/components/modules/module-create-dialog.tsx
@@ -3,8 +3,8 @@ import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
 import { Checkbox } from '@evobgp/ui/components/checkbox'
+import { Field, FieldDescription, FieldLabel } from '@evobgp/ui/components/field'
 import { Input } from '@evobgp/ui/components/input'
-import { Label } from '@evobgp/ui/components/label'
 
 import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
@@ -171,42 +171,42 @@ export function ModuleCreateDialog({
         }}
       />
 
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="mod-create-name">Название</Label>
+      <Field>
+        <FieldLabel htmlFor="mod-create-name">Название</FieldLabel>
         <Input
           id="mod-create-name"
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder="Имя модуля"
         />
-      </div>
+      </Field>
 
-      <div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3">
+      <Field orientation="horizontal">
         <div className="grid min-w-0 flex-1 gap-1 pr-2">
-          <Label htmlFor="mod-create-enabled">Включён</Label>
-          <p className="text-xs text-muted-foreground">
+          <FieldLabel htmlFor="mod-create-enabled">Включён</FieldLabel>
+          <FieldDescription>
             Выключенный модуль не участвует в обновлении и применении.
-          </p>
+          </FieldDescription>
         </div>
         <Checkbox
           id="mod-create-enabled"
           checked={enabled}
           onCheckedChange={(v) => setEnabled(v === true)}
         />
-      </div>
+      </Field>
 
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="mod-create-priority">Приоритет</Label>
+      <Field>
+        <FieldLabel htmlFor="mod-create-priority">Приоритет</FieldLabel>
         <Input
           id="mod-create-priority"
           type="number"
           value={priority}
           onChange={(e) => setPriority(e.target.value)}
         />
-      </div>
+      </Field>
 
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="mod-create-interval">Интервал обновления (сек)</Label>
+      <Field>
+        <FieldLabel htmlFor="mod-create-interval">Интервал обновления (сек)</FieldLabel>
         <Input
           id="mod-create-interval"
           type="number"
@@ -215,17 +215,17 @@ export function ModuleCreateDialog({
           value={refreshIntervalSec}
           onChange={(e) => setRefreshIntervalSec(e.target.value)}
         />
-      </div>
+      </Field>
 
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="mod-create-cron">Cron (опционально)</Label>
+      <Field>
+        <FieldLabel htmlFor="mod-create-cron">Cron (опционально)</FieldLabel>
         <Input
           id="mod-create-cron"
           placeholder="0 * * * *"
           value={cronExpr}
           onChange={(e) => setCronExpr(e.target.value)}
         />
-      </div>
+      </Field>
 
       <CommunitySelect
         id="mod-create-community"
@@ -248,8 +248,8 @@ export function ModuleCreateDialog({
             }}
           />
 
-          <div className="flex flex-col gap-2">
-            <Label>DoH профили</Label>
+          <Field>
+            <FieldLabel>DoH профили</FieldLabel>
             {dohProfiles.length === 0 ? (
               <p className="text-muted-foreground text-sm">Нет профилей в справочнике</p>
             ) : (
@@ -281,7 +281,7 @@ export function ModuleCreateDialog({
                 })}
               </div>
             )}
-          </div>
+          </Field>
         </>
       ) : null}
     </FormDrawer>
diff --git a/apps/web/src/components/modules/module-kpi-cards.tsx b/apps/web/src/components/modules/module-kpi-cards.tsx
index 501457c..c0c8b6f 100644
--- a/apps/web/src/components/modules/module-kpi-cards.tsx
+++ b/apps/web/src/components/modules/module-kpi-cards.tsx
@@ -1,6 +1,6 @@
 import { Clock, Gauge, Globe, Tags } from 'lucide-react'
 
-import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
+import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
 import { Badge } from '@/components/reui/badge'
 import { KpiStatGridSkeleton } from '@/components/skeletons'
 import { formatDateTime, moduleIntervalLabel } from '@/lib/modules/display'
diff --git a/apps/web/src/components/operations/operations-jobs-kanban.tsx b/apps/web/src/components/operations/operations-jobs-kanban.tsx
index bd98370..22274bd 100644
--- a/apps/web/src/components/operations/operations-jobs-kanban.tsx
+++ b/apps/web/src/components/operations/operations-jobs-kanban.tsx
@@ -8,13 +8,22 @@ import {
   KanbanColumn,
   KanbanColumnContent,
   KanbanItem,
+  KanbanOverlay,
 } from '@/components/reui/kanban'
 import { Frame, FramePanel } from '@/components/reui/frame'
+import { Badge } from '@/components/reui/badge'
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from '@evobgp/ui/components/item'
 import { jobKindRu } from '@/lib/ui-labels'
 import type { JobRow } from '@/types/api'
 
 /**
- * Operations jobs board view — ReUI Kanban (read-only columns).
+ * Operations jobs board — ReUI Kanban (read-only columns).
+ * @see https://reui.io/preview/base/kanban-board-8
  * @see https://reui.io/docs/components/base/kanban
  * @see https://reui.io/docs/components/base/frame
  */
@@ -78,9 +87,9 @@ export function OperationsJobsKanban({
               >
                 <div className="flex items-center justify-between gap-2">
                   <p className="text-sm font-medium">{COLUMN_LABELS[columnId]}</p>
-                  <span className="text-muted-foreground text-xs tabular-nums">
+                  <Badge variant="outline" size="sm">
                     {columns[columnId]?.length ?? 0}
-                  </span>
+                  </Badge>
                 </div>
                 <KanbanColumnContent value={columnId}>
                   {(columns[columnId] ?? []).map((job) => (
@@ -88,24 +97,35 @@ export function OperationsJobsKanban({
                       key={job.job_id}
                       value={job.job_id}
                       disabled
-                      className="bg-background flex flex-col gap-1 rounded-md border p-3"
+                      className="p-0"
                     >
-                      <p className="text-sm leading-tight font-medium">
-                        {jobKindRu(job.kind)}
-                      </p>
-                      <StatusBadge status={job.status} />
-                      {job.meta?.module_id ? (
-                        <DataGridMutedCell>
-                          {nameById.get(String(job.meta.module_id)) ??
-                            String(job.meta.module_id)}
-                        </DataGridMutedCell>
-                      ) : null}
+                      <Item variant="outline" size="sm">
+                        <ItemContent>
+                          <ItemTitle>{jobKindRu(job.kind)}</ItemTitle>
+                          <StatusBadge status={job.status} />
+                          {job.meta?.module_id ? (
+                            <ItemDescription>
+                              <DataGridMutedCell>
+                                {nameById.get(String(job.meta.module_id)) ??
+                                  String(job.meta.module_id)}
+                              </DataGridMutedCell>
+                            </ItemDescription>
+                          ) : null}
+                        </ItemContent>
+                      </Item>
                     </KanbanItem>
                   ))}
                 </KanbanColumnContent>
               </KanbanColumn>
             ))}
           </KanbanBoard>
+          <KanbanOverlay>
+            <Item variant="outline" size="sm">
+              <ItemContent>
+                <ItemTitle>Задача</ItemTitle>
+              </ItemContent>
+            </Item>
+          </KanbanOverlay>
         </Kanban>
       </FramePanel>
     </Frame>
diff --git a/apps/web/src/components/panel-card.tsx b/apps/web/src/components/panel-card.tsx
index 3d7b6bf..8ebb1c2 100644
--- a/apps/web/src/components/panel-card.tsx
+++ b/apps/web/src/components/panel-card.tsx
@@ -1,93 +1,11 @@
-import type { ReactNode } from 'react'
-
-import {
-  Frame,
-  FrameDescription,
-  FrameFooter,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
-import { cn } from '@evobgp/ui/lib/utils'
-
-/**
- * Frame shell for analytics / comparison panels (not list grids).
- * @see https://reui.io/docs/components/base/frame
- * @see https://reui.io/preview/base/chart-1
- */
-export const panelCardClassName = 'w-full gap-0 p-0'
-export const panelCardHeaderClassName = 'border-b'
-/** Flush body inside FramePanel (toolbar / data-grid). */
-export const panelCardContentFlushClassName = 'p-0'
-/** Horizontal inset for toolbar / pagination rows. */
-export const panelCardInsetClassName = 'px-5 py-3'
-export const panelCardFooterClassName = 'border-t bg-transparent'
-
-interface PanelCardProps {
-  title?: ReactNode
-  description?: ReactNode
-  actions?: ReactNode
-  footer?: ReactNode
-  children?: ReactNode
-  className?: string
-  headerClassName?: string
-  contentClassName?: string
-  footerClassName?: string
-  size?: 'default' | 'sm'
-}
-
-export function PanelCard({
-  title,
-  description,
-  actions,
-  footer,
-  children,
-  className,
-  headerClassName,
-  contentClassName,
-  footerClassName,
-  size = 'default',
-}: PanelCardProps) {
-  const hasHeader = Boolean(title || description || actions)
-  const spacing = size === 'sm' ? 'sm' : 'default'
-
-  return (
-    <Frame
-      dense
-      spacing={spacing}
-      className={cn(panelCardClassName, 'min-w-0', className)}
-    >
-      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
-        {hasHeader ? (
-          <FrameHeader
-            className={cn(
-              panelCardHeaderClassName,
-              'flex-row items-start justify-between gap-3',
-              headerClassName,
-            )}
-          >
-            <div className="flex min-w-0 flex-1 flex-col gap-px">
-              {title ? <FrameTitle>{title}</FrameTitle> : null}
-              {description ? (
-                <FrameDescription>{description}</FrameDescription>
-              ) : null}
-            </div>
-            {actions ? (
-              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-                {actions}
-              </div>
-            ) : null}
-          </FrameHeader>
-        ) : null}
-        {children != null && children !== false ? (
-          <div className={cn('min-w-0 flex-1', contentClassName)}>{children}</div>
-        ) : null}
-        {footer ? (
-          <FrameFooter className={cn(panelCardFooterClassName, footerClassName)}>
-            {footer}
-          </FrameFooter>
-        ) : null}
-      </FramePanel>
-    </Frame>
-  )
-}
+export {
+  FrameSection,
+  FrameSection as PanelCard,
+  panelCardClassName,
+  panelCardHeaderClassName,
+  panelCardContentFlushClassName,
+  panelCardInsetClassName,
+  panelCardFooterClassName,
+  type FrameSectionProps,
+  type FrameSectionProps as PanelCardProps,
+} from '@/components/reui-kit/frame-section'
diff --git a/apps/web/src/components/patterns/illustrated-empty-state.tsx b/apps/web/src/components/patterns/illustrated-empty-state.tsx
index 4338e97..14912a8 100644
--- a/apps/web/src/components/patterns/illustrated-empty-state.tsx
+++ b/apps/web/src/components/patterns/illustrated-empty-state.tsx
@@ -1,24 +1,13 @@
-import type { ReactNode } from 'react'
 import type { LucideIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
 
-import { IconStack } from '@/components/reui/icon-stack'
-import {
-  Frame,
-  FramePanel,
-} from '@/components/reui/frame'
-import {
-  Empty,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from '@evobgp/ui/components/empty'
+import { EmptyState } from '@/components/empty-state'
 
 /** empty-state-14: Frame + IconStack. Preview: https://reui.io/preview/base/empty-state-14 */
 export function IllustratedEmptyState({
   title,
   description,
-  icon: Icon,
+  icon,
   action,
 }: {
   title: string
@@ -27,23 +16,13 @@ export function IllustratedEmptyState({
   action?: ReactNode
 }) {
   return (
-    <Frame dense spacing="sm" className="w-full">
-      <FramePanel className="flex min-h-[240px] flex-col items-center justify-center gap-4 p-6 sm:p-10">
-        {action ? <div className="w-full self-end">{action}</div> : null}
-        <Empty className="max-w-md gap-5 bg-transparent p-0">
-          <EmptyHeader className="items-center gap-5 text-center">
-            <EmptyMedia className="mb-0">
-              <IconStack aria-hidden>
-                <Icon strokeWidth={1.9} aria-hidden />
-              </IconStack>
-            </EmptyMedia>
-            <div className="flex flex-col items-center gap-2">
-              <EmptyTitle className="text-base font-semibold tracking-tight">{title}</EmptyTitle>
-              <EmptyDescription className="max-w-sm text-sm/relaxed">{description}</EmptyDescription>
-            </div>
-          </EmptyHeader>
-        </Empty>
-      </FramePanel>
-    </Frame>
+    <EmptyState
+      framed
+      centered={false}
+      icon={icon}
+      title={title}
+      description={description}
+      action={action}
+    />
   )
 }
diff --git a/apps/web/src/components/patterns/index.ts b/apps/web/src/components/patterns/index.ts
index a48b262..a780518 100644
--- a/apps/web/src/components/patterns/index.ts
+++ b/apps/web/src/components/patterns/index.ts
@@ -1,7 +1,7 @@
 export { DonutBreakdownCard } from './donut-breakdown-card'
 export { IllustratedEmptyState } from './illustrated-empty-state'
 export { KpiSparklineCard, type KpiSparklineMetric } from './kpi-sparkline-card'
-export { KpiStatGrid, KpiStatCard, type KpiStatItem } from '@/components/kpi-stat-grid'
+export { KpiStatGrid, KpiStatCard, type KpiStatItem } from '@/components/reui-kit'
 export { PanelCorners } from './panel-corners'
 export { ProjectsEmptyState } from './projects-empty-state'
 export { SegmentedProgressCard, type SegmentStat } from './segmented-progress-card'
diff --git a/apps/web/src/components/patterns/projects-empty-state.tsx b/apps/web/src/components/patterns/projects-empty-state.tsx
index 2acfaa7..b2c3c0a 100644
--- a/apps/web/src/components/patterns/projects-empty-state.tsx
+++ b/apps/web/src/components/patterns/projects-empty-state.tsx
@@ -1,9 +1,9 @@
 import { Boxes, Plus } from 'lucide-react'
 
-import { IllustratedEmptyState } from '@/components/patterns/illustrated-empty-state'
+import { EmptyState } from '@/components/empty-state'
 import { Button } from '@evobgp/ui/components/button'
 
-/** empty-state-3 pattern for first module. */
+/** empty-state-14 for first module. Preview: https://reui.io/preview/base/empty-state-14 */
 export function ProjectsEmptyState({
   canCreate = true,
   onCreate,
@@ -12,7 +12,9 @@ export function ProjectsEmptyState({
   onCreate?: () => void
 }) {
   return (
-    <IllustratedEmptyState
+    <EmptyState
+      framed
+      centered={false}
       icon={Boxes}
       title="Создайте первый модуль"
       description="Модули задают источники префиксов: AS, CDN, домены и IP-диапазоны."
diff --git a/apps/web/src/components/reui-kit/frame-section.tsx b/apps/web/src/components/reui-kit/frame-section.tsx
new file mode 100644
index 0000000..2894b56
--- /dev/null
+++ b/apps/web/src/components/reui-kit/frame-section.tsx
@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react'
+
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { cn } from '@evobgp/ui/lib/utils'
+
+/**
+ * Frame shell for analytics / comparison / detail panels (not list grids).
+ * @see https://reui.io/docs/components/base/frame
+ * @see https://reui.io/preview/base/chart-1
+ */
+export const panelCardClassName = 'w-full gap-0 p-0'
+export const panelCardHeaderClassName = 'border-b'
+/** Flush body inside FramePanel (toolbar / data-grid). */
+export const panelCardContentFlushClassName = 'p-0'
+/** Horizontal inset for toolbar / pagination rows. */
+export const panelCardInsetClassName = 'px-5 py-3'
+export const panelCardFooterClassName = 'border-t bg-transparent'
+
+export interface FrameSectionProps {
+  title?: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+  footer?: ReactNode
+  children?: ReactNode
+  className?: string
+  headerClassName?: string
+  contentClassName?: string
+  footerClassName?: string
+  size?: 'default' | 'sm'
+}
+
+export function FrameSection({
+  title,
+  description,
+  actions,
+  footer,
+  children,
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  size = 'default',
+}: FrameSectionProps) {
+  const hasHeader = Boolean(title || description || actions)
+  const spacing = size === 'sm' ? 'sm' : 'default'
+
+  return (
+    <Frame
+      dense
+      spacing={spacing}
+      className={cn(panelCardClassName, 'min-w-0', className)}
+    >
+      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
+        {hasHeader ? (
+          <FrameHeader
+            className={cn(
+              panelCardHeaderClassName,
+              'flex-row items-start justify-between gap-3',
+              headerClassName,
+            )}
+          >
+            <div className="flex min-w-0 flex-1 flex-col gap-px">
+              {title ? <FrameTitle>{title}</FrameTitle> : null}
+              {description ? (
+                <FrameDescription>{description}</FrameDescription>
+              ) : null}
+            </div>
+            {actions ? (
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                {actions}
+              </div>
+            ) : null}
+          </FrameHeader>
+        ) : null}
+        {children != null && children !== false ? (
+          <div className={cn('min-w-0 flex-1', contentClassName)}>{children}</div>
+        ) : null}
+        {footer ? (
+          <FrameFooter className={cn(panelCardFooterClassName, footerClassName)}>
+            {footer}
+          </FrameFooter>
+        ) : null}
+      </FramePanel>
+    </Frame>
+  )
+}
diff --git a/apps/web/src/components/reui-kit/index.ts b/apps/web/src/components/reui-kit/index.ts
index 5716b49..abb837f 100644
--- a/apps/web/src/components/reui-kit/index.ts
+++ b/apps/web/src/components/reui-kit/index.ts
@@ -36,3 +36,12 @@ export {
 export { ExpandableResourceGrid } from './expandable-resource-grid'
 export { DetailPanel, type DetailMetricCard } from './detail-panel'
 export { SettingsShell } from './settings-shell'
+export {
+  FrameSection,
+  panelCardClassName,
+  panelCardHeaderClassName,
+  panelCardContentFlushClassName,
+  panelCardInsetClassName,
+  panelCardFooterClassName,
+  type FrameSectionProps,
+} from './frame-section'
diff --git a/apps/web/src/components/reui-kit/kpi-stat-grid.tsx b/apps/web/src/components/reui-kit/kpi-stat-grid.tsx
index 754b019..439b866 100644
--- a/apps/web/src/components/reui-kit/kpi-stat-grid.tsx
+++ b/apps/web/src/components/reui-kit/kpi-stat-grid.tsx
@@ -67,7 +67,7 @@ function resolveFooter(item: KpiStatItem): ReactNode {
   if (item.footer) return item.footer
   if (typeof item.hint === 'string') {
     return (
-      <Badge variant="outline" size="sm">
+      <Badge variant="outline" size="sm" className="max-w-[min(100%,11rem)] truncate">
         {item.hint}
       </Badge>
     )
@@ -81,30 +81,39 @@ function KpiStatCardBody({ item }: { item: KpiStatItem }) {
   const valueVariant = item.variant ?? 'default'
 
   return (
-    <div className="relative z-10 flex h-full items-start gap-3">
+    <div className="@container relative z-10 flex h-full min-w-0 items-start gap-3">
       {item.icon ? (
         <IconTile
           variant="elevated"
           aria-hidden="true"
-          className={cn('size-10.5', item.iconClassName ?? DEFAULT_ICON_CLASS)}
+          className={cn('size-10.5 shrink-0', item.iconClassName ?? DEFAULT_ICON_CLASS)}
         >
           {item.icon}
         </IconTile>
       ) : null}
 
       <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <div className="flex items-start justify-between gap-2">
-          <div className="text-muted-foreground text-sm font-medium">{item.label}</div>
-          {footer ? <div className="shrink-0">{footer}</div> : null}
+        <div className="flex min-w-0 items-start justify-between gap-2">
+          <div className="text-muted-foreground min-w-0 truncate text-sm font-medium">
+            {item.label}
+          </div>
+          {footer ? (
+            <div className="hidden min-w-0 max-w-[min(100%,11rem)] shrink-0 @[20rem]:block">
+              {footer}
+            </div>
+          ) : null}
         </div>
         <div
           className={cn(
-            'text-2xl leading-none font-bold tabular-nums',
+            'min-w-0 break-all text-2xl leading-none font-bold tabular-nums',
             VALUE_VARIANT_CLASS[valueVariant],
           )}
         >
           {item.value}
         </div>
+        {footer ? (
+          <div className="min-w-0 max-w-full @[20rem]:hidden">{footer}</div>
+        ) : null}
       </div>
     </div>
   )
@@ -116,7 +125,7 @@ function panelClassName(item: KpiStatItem, className?: string) {
   const selected = isSelected(item)
 
   return cn(
-    'relative isolate flex h-full flex-col',
+    'relative isolate flex h-full min-w-0 flex-col',
     clickable &&
       'hover:bg-muted/40 focus-within:ring-ring cursor-pointer transition-colors focus-within:ring-2',
     selected && 'ring-primary/30 bg-muted/30 ring-1',
diff --git a/apps/web/src/components/reui-kit/resource-page.tsx b/apps/web/src/components/reui-kit/resource-page.tsx
index 64981b0..601bdab 100644
--- a/apps/web/src/components/reui-kit/resource-page.tsx
+++ b/apps/web/src/components/reui-kit/resource-page.tsx
@@ -7,8 +7,8 @@ import {
 } from '@tanstack/react-table'
 import { CircleAlertIcon, FilterIcon, FilterXIcon } from 'lucide-react'
 
-import { CountedLineTabs } from '@/components/counted-line-tabs'
 import { EmptyState } from '@/components/empty-state'
+import { StatusToggleGroup } from '@/components/status-toggle-group'
 import { Badge } from '@/components/reui/badge'
 import {
   DataGrid,
@@ -465,38 +465,34 @@ function ResourcePageFiltered<T extends object>({
           ) : null}
 
           <FramePanel className="p-0 shadow-none!">
-            {countedTabs.length > 0 ? (
-              <>
-                <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
-                  <CountedLineTabs
-                    tabs={countedTabs}
+            <div className="flex flex-wrap items-center justify-between gap-3 px-(--frame-panel-header-px) py-2.5">
+              <div className="flex min-w-0 flex-wrap items-center gap-2">
+                {showFilters ? (
+                  <Filters
+                    query={filterQuery}
+                    fields={filterFields}
+                    onQueryChange={handleFiltersChange}
+                    size="default"
+                    labels={FILTERS_LABELS_RU}
+                    operatorLabels={FILTERS_OPERATOR_LABELS_RU}
+                    trigger={
+                      <Button type="button" variant="outline" aria-label="Фильтры">
+                        <FilterIcon className="size-4" aria-hidden="true" />
+                        Фильтры
+                      </Button>
+                    }
+                  />
+                ) : null}
+                {countedTabs.length > 0 ? (
+                  <StatusToggleGroup
+                    items={countedTabs}
                     value={activeTab}
                     onValueChange={handleTabChange}
+                    aria-label="Фильтр по статусу"
                   />
-                </div>
-                <Separator />
-              </>
-            ) : null}
-
-            <div className="flex flex-wrap items-center justify-between gap-3 px-(--frame-panel-header-px) py-2.5">
-              {showFilters ? (
-                <Filters
-                  query={filterQuery}
-                  fields={filterFields}
-                  onQueryChange={handleFiltersChange}
-                  size="default"
-                  labels={FILTERS_LABELS_RU}
-                  operatorLabels={FILTERS_OPERATOR_LABELS_RU}
-                  trigger={
-                    <Button type="button" variant="outline" aria-label="Фильтры">
-                      <FilterIcon className="size-4" aria-hidden="true" />
-                      Фильтры
-                    </Button>
-                  }
-                />
-              ) : (
-                <div />
-              )}
+                ) : null}
+                {!showFilters && countedTabs.length === 0 ? <div /> : null}
+              </div>
               <div className="flex flex-wrap items-center justify-end gap-2">
                 {toolbarExtra}
                 {selectedCount > 0 ? (
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-agenda-view.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-agenda-view.tsx
deleted file mode 100644
index dac306a..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-agenda-view.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-import {
-  EventCalendarViewContext,
-  useEventCalendar,
-  useEventCalendarSelector,
-  useEventCalendarSettings,
-  useEventCalendarViewConfig,
-} from "@/components/reui/event-calendar/event-calendar"
-import { EventCalendarEvent } from "@/components/reui/event-calendar/event-calendar-event"
-import {
-  getDayKey,
-  getRangeKey,
-  toZoned,
-  zonedStartOfDay,
-} from "@/components/reui/event-calendar/event-calendar-lib"
-import type {
-  EventCalendarDateRange,
-  EventCalendarSegment,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { IconStack } from "@/components/reui/icon-stack"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { addDays, format } from "date-fns"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import { ScrollArea } from "@evobgp/ui/components/scroll-area"
-import { CalendarIcon } from "lucide-react"
-
-// The agenda window length is the agendaDayCount SETTING (the store derives
-// visibleRange from it); a per-view prop here would silently disagree.
-type EventCalendarAgendaViewProps = useRender.ComponentProps<"div">
-
-function EventCalendarAgendaView({
-  className,
-  render,
-  ...props
-}: EventCalendarAgendaViewProps) {
-  const instance = useEventCalendar()
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const visibleRange = useEventCalendarSelector<
-    unknown,
-    EventCalendarDateRange
-  >((state) => state.visibleRange, {
-    isEqual: (a, b) => getRangeKey(a) === getRangeKey(b),
-  })
-  // Subscribe to event changes via the day-bucket content of the whole range
-  useEventCalendarSelector((state) => state.events)
-
-  const days = useMemo(() => {
-    const result: Date[] = []
-    let cursor = zonedStartOfDay(visibleRange.start, settings.timeZone)
-    while (cursor < visibleRange.end) {
-      result.push(cursor)
-      cursor = zonedStartOfDay(
-        addDays(toZoned(cursor, settings.timeZone), 1),
-        settings.timeZone
-      )
-    }
-    return result
-  }, [visibleRange, settings.timeZone])
-
-  const index = instance.internals.getIndex()
-  const groups = days
-    .map((day) => ({
-      day,
-      bucket: index.byDay.get(getDayKey(day, settings.timeZone)),
-    }))
-    .filter((group) => {
-      const total =
-        (group.bucket?.allDay.length ?? 0) + (group.bucket?.timed.length ?? 0)
-      return total > 0
-    })
-
-  const isToday = (day: Date) =>
-    getDayKey(day, settings.timeZone) ===
-    getDayKey(new Date(), settings.timeZone)
-
-  const native = viewConfig.scrollbars === "native"
-
-  const body = (
-    <>
-      {groups.length === 0 ? (
-        <div
-          data-slot="event-calendar-no-events"
-          className={cn(
-            "flex min-h-72 flex-col items-center justify-center gap-4 py-16",
-            viewConfig.classNames?.noEvents
-          )}
-        >
-          {viewConfig.renderNoEvents?.() ?? (
-            <>
-              <IconStack>
-                <CalendarIcon className="size-5" aria-hidden="true" />
-              </IconStack>
-              <span className="text-muted-foreground text-sm">
-                {settings.i18n.labels.noEvents}
-              </span>
-            </>
-          )}
-        </div>
-      ) : (
-        // Drop the very last row's bottom border so it does not double up with
-        // the calendar container's own bottom border. Targets the last day
-        // group's last child (its last agenda item); per-item `border-b` is
-        // kept everywhere else, including each day's internal rows.
-        <div className="flex flex-col [&>*:last-child>*:last-child]:border-b-0">
-          {groups.map(({ day, bucket }) => {
-            const items = [...(bucket?.allDay ?? []), ...(bucket?.timed ?? [])]
-            const zoned = toZoned(day, settings.timeZone)
-            const weekday = format(zoned, "EEEE", { locale: settings.locale })
-            const dayDate = format(zoned, "MMMM d, yyyy", {
-              locale: settings.locale,
-            })
-            return (
-              <div
-                key={day.getTime()}
-                data-slot="event-calendar-agenda-day"
-                data-today={isToday(day) || undefined}
-                // A named group per day so a screen reader can step day by day
-                // (and hear how full one is) instead of arrowing every row.
-                role="group"
-                aria-label={`${weekday}, ${dayDate}, ${settings.i18n.labels.events(items.length)}`}
-              >
-                {/* Group header: weekday (leading) + full date (trailing) */}
-                <div
-                  data-slot="event-calendar-agenda-day-header"
-                  // The day bar is the agenda's only structure, so give it a
-                  // heading level: the H key and the rotor can jump between
-                  // days, which is the whole point of a long agenda.
-                  role="heading"
-                  aria-level={3}
-                  className={cn(
-                    "bg-muted/60 sticky top-0 z-10 flex items-baseline justify-between gap-4 border-b px-4 py-2",
-                    // The custom ScrollArea's overlay scrollbar (w-2.5 = 10px)
-                    // is painted UNDER this sticky, z-10, opaque header, so the
-                    // thumb vanishes behind the day bar at the top of the view.
-                    // Inset the header by the scrollbar lane so its background
-                    // stops before the scrollbar instead of covering it. Native
-                    // scrollbars already sit outside the content box, so this
-                    // only applies to the custom-scrollbar path.
-                    !native && "me-2.5",
-                    viewConfig.classNames?.agendaDayHeader
-                  )}
-                >
-                  <span
-                    className={cn(
-                      "text-foreground font-semibold",
-                      isToday(day) && "text-primary"
-                    )}
-                  >
-                    {weekday}
-                  </span>
-                  <span className="text-muted-foreground font-medium tabular-nums">
-                    {dayDate}
-                  </span>
-                </div>
-                {items.map((segment) => (
-                  <EventCalendarAgendaItem
-                    key={segment.occurrence.key}
-                    segment={segment}
-                  />
-                ))}
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </>
-  )
-
-  const defaultProps = {
-    "data-slot": "event-calendar-agenda-view",
-    "data-view": "agenda",
-    // Unlike the grid views the agenda has no row/column semantics to carry a
-    // name, so label the region with the day range it covers - through
-    // formatDayRange, so a consumer override reaches it.
-    role: "group",
-    "aria-label": settings.i18n.functions.formatDayRange(visibleRange, {
-      locale: settings.locale,
-    }),
-    className: cn(
-      "flex min-h-0 flex-1 flex-col overflow-hidden border-t",
-      viewConfig.classNames?.agendaView,
-      className
-    ),
-    children: native ? (
-      <div
-        data-slot="scroll-area-viewport"
-        data-ec-native-scroll=""
-        className="h-full overflow-y-auto"
-      >
-        {body}
-      </div>
-    ) : (
-      <ScrollArea className="h-full">{body}</ScrollArea>
-    ),
-  }
-
-  return (
-    <EventCalendarViewContext.Provider value={{ view: "agenda" }}>
-      {useRender({
-        defaultTagName: "div",
-        render,
-        props: mergeProps<"div">(defaultProps, props),
-      })}
-    </EventCalendarViewContext.Provider>
-  )
-}
-
-/**
- * One agenda row: a full-width, selectable table row - time column, color dot,
- * and title (all replaceable via renderAgendaEvent). Clicking selects the
- * event (drag/resize stay off in the agenda).
- */
-function EventCalendarAgendaItem({
-  segment,
-}: {
-  segment: EventCalendarSegment
-}) {
-  const viewConfig = useEventCalendarViewConfig()
-  return (
-    <EventCalendarEvent
-      segment={segment}
-      className={cn(
-        // read-only list: hover only, no selected/focused styling on click
-        "hover:bg-accent/40 gap-3 rounded-none border-b px-4 py-2.5 transition-colors",
-        viewConfig.classNames?.agendaItem
-      )}
-    />
-  )
-}
-
-export { EventCalendarAgendaView }
-export type { EventCalendarAgendaViewProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-content.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-content.tsx
deleted file mode 100644
index 5621a81..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-content.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { type ComponentType, type ReactNode } from "react"
-import {
-  useEventCalendarSelector,
-  useEventCalendarViewConfig,
-} from "@/components/reui/event-calendar/event-calendar"
-import { EventCalendarAgendaView } from "@/components/reui/event-calendar/event-calendar-agenda-view"
-import { EventCalendarMonthView } from "@/components/reui/event-calendar/event-calendar-month-view"
-import { EventCalendarResourceView } from "@/components/reui/event-calendar/event-calendar-resource-view"
-import {
-  EventCalendarDaysView,
-  EventCalendarDayView,
-  EventCalendarWeekView,
-} from "@/components/reui/event-calendar/event-calendar-time-grid"
-import type { CalendarView } from "@/components/reui/event-calendar/event-calendar-types"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-
-import { cn } from "@evobgp/ui/lib/utils"
-
-const DEFAULT_VIEW_COMPONENTS: Record<CalendarView, ComponentType> = {
-  month: EventCalendarMonthView,
-  week: EventCalendarWeekView,
-  day: EventCalendarDayView,
-  days: EventCalendarDaysView,
-  agenda: EventCalendarAgendaView,
-  resource: EventCalendarResourceView,
-}
-
-interface EventCalendarContentProps extends Omit<
-  useRender.ComponentProps<"div">,
-  "children"
-> {
-  /** Swap individual view implementations. */
-  components?: Partial<Record<CalendarView, ComponentType>>
-  /** Replaces the switchboard entirely; read useEventCalendarView() inside. */
-  children?: ReactNode
-}
-
-function EventCalendarContent({
-  className,
-  render,
-  components,
-  children,
-  ...props
-}: EventCalendarContentProps) {
-  const viewConfig = useEventCalendarViewConfig()
-  const view = useEventCalendarSelector((state) => state.view)
-  const loading = useEventCalendarSelector((state) => state.loading)
-
-  const resolved = {
-    ...DEFAULT_VIEW_COMPONENTS,
-    ...viewConfig.components,
-    ...components,
-  }
-  // A spread copies keys that hold `undefined`, so `components={{ month: isPro
-  // ? ProMonth : undefined }}` would erase the default and render <undefined />.
-  const ActiveView = resolved[view] ?? DEFAULT_VIEW_COMPONENTS[view]
-
-  const defaultProps = {
-    "data-slot": "event-calendar-content",
-    "data-view": view,
-    "data-loading": loading || undefined,
-    className: cn(
-      "relative flex min-h-0 min-w-0 flex-1 flex-col",
-      "data-loading:pointer-events-none data-loading:opacity-60",
-      viewConfig.classNames?.content,
-      className
-    ),
-    children: children ?? <ActiveView />,
-  }
-
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps<"div">(defaultProps, props),
-  })
-}
-
-export { DEFAULT_VIEW_COMPONENTS, EventCalendarContent }
-export type { EventCalendarContentProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-dnd.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-dnd.tsx
deleted file mode 100644
index b8d836f..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-dnd.tsx
+++ /dev/null
@@ -1,1064 +0,0 @@
-"use client"
-
-import { useCallback, useEffect, useMemo } from "react"
-import {
-  useEventCalendar,
-  useEventCalendarViewConfig,
-  type EventCalendarInstance,
-} from "@/components/reui/event-calendar/event-calendar"
-import {
-  snapMinutes,
-  toZoned,
-  zonedStartOfDay,
-} from "@/components/reui/event-calendar/event-calendar-lib"
-import type {
-  EventCalendarProposedUpdate,
-  EventCalendarSegment,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { addDays, addMinutes, differenceInCalendarDays } from "date-fns"
-
-/**
- * Activation policy (dnd-kit parity where proven):
- * mouse move 5px before a drag starts (below = click), create 4px;
- * touch long-press 250ms with 5px tolerance (movement past tolerance
- * before the delay cancels the drag so taps stay taps).
- */
-const EVENT_CALENDAR_ACTIVATION = {
-  moveDistancePx: 5,
-  createDistancePx: 4,
-  touchDelayMs: 250,
-  touchTolerancePx: 5,
-  autoScrollEdgePx: 48,
-  autoScrollMaxStepPx: 15,
-} as const
-
-type GestureKind = "move" | "resize-start" | "resize-end" | "create"
-
-interface TimeColumnRect {
-  day: Date
-  rect: DOMRect
-  boundsStartMin: number
-  boundsEndMin: number
-  resourceId?: string
-}
-
-interface DayCellRect {
-  day: Date
-  rect: DOMRect
-}
-
-interface Surface {
-  /** Minute-precise day columns (week/day/days) or resource columns. */
-  columns: TimeColumnRect[]
-  /** Day-precise cells (month grid, all-day row). */
-  cells: DayCellRect[]
-  viewport: HTMLElement | null
-  /**
-   * Viewport rect captured ONCE at gesture start. The scroll container does
-   * not move on screen while a pointer drag is captured (auto-scroll changes
-   * its scrollTop, not its box), so reusing this avoids a per-pointermove
-   * getBoundingClientRect - that read forces a synchronous full-document
-   * reflow, which is cheap on a bare demo page but ~200ms on a long docs page
-   * (big prop tables re-lay-out on every flush), turning drag into a slideshow.
-   */
-  viewportRect: DOMRect | null
-  viewportStartScrollTop: number
-  /**
-   * Live scrollTop, seeded from the start value and advanced by auto-scroll
-   * itself. Tracking it here lets pointerMinutes read a number instead of the
-   * DOM `scrollTop` property every move (another forced reflow).
-   */
-  scrollTop: number
-}
-
-/** Module flag so chip onClick can ignore the click that ends a drag. */
-let lastGestureEndedAt = 0
-function wasRecentDrag(): boolean {
-  return performance.now() - lastGestureEndedAt < 250
-}
-
-/**
- * A press that started on an event chip. Slot-create clicks consult this so a
- * refused drag (e.g. a locked chip that never registers a gesture) whose
- * trailing native click retargets to the empty grid does NOT open a create
- * dialog. Refreshed on release so it covers long presses; the chip's own
- * click-to-edit is unaffected (only grid slot-clicks check it).
- */
-let lastChipPressAt = 0
-function markChipPress(): void {
-  lastChipPressAt = performance.now()
-  window.addEventListener(
-    "pointerup",
-    () => {
-      lastChipPressAt = performance.now()
-    },
-    { once: true, capture: true }
-  )
-}
-function wasRecentChipPress(): boolean {
-  return performance.now() - lastChipPressAt < 300
-}
-
-/**
- * Registry of in-flight gesture cancels. A gesture measures its surface (day
- * columns and cells) once at activation and then lives on window listeners, so
- * the CALENDAR - not the chip, chips legitimately unmount mid-gesture (lane
- * repacking, a "+N more" popover closing) - is what must be able to abort it.
- * Cancel fully reverts: listeners, overlays and the body drag state all clear,
- * and no update is committed.
- */
-const activeGestureCancels = new Set<() => void>()
-
-/** Cancel (and fully revert) every in-flight event calendar pointer gesture. */
-function cancelActiveEventCalendarGestures(): void {
-  for (const cancel of [...activeGestureCancels]) cancel()
-}
-
-/**
- * Mounted-consumer count for the gestures hook. Every chip holds one, so only
- * the LAST consumer leaving means the calendar itself is gone; aborting when
- * any single chip unmounts would kill a drag the user is still holding.
- */
-let gestureConsumers = 0
-
-/**
- * Snap a translate offset to the device pixel grid. The cursor-following
- * overlays (carry clone, drop hint) are their own `will-change: transform`
- * compositing layers: the GPU rasterizes their text once and repositions that
- * texture each frame, so a subpixel translate (getBoundingClientRect and raw
- * clientX/Y are routinely fractional) resamples the texture and blurs the
- * text. Rounding each offset to a whole device pixel lands the layer on the
- * grid so glyphs stay crisp, without giving up the per-frame GPU transform.
- */
-function snapToPixel(value: number): number {
-  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1
-  return Math.round(value * dpr) / dpr
-}
-
-function collectSurface(
-  origin: HTMLElement,
-  fallbackRoot?: HTMLElement | null
-): Surface {
-  // A gesture from a portaled surface (the "+N more" popover) has no calendar
-  // ancestor, so fall back to the root the host registered on the instance.
-  const root =
-    origin.closest<HTMLElement>("[data-slot=event-calendar-time-grid]") ??
-    origin.closest<HTMLElement>("[data-slot=event-calendar-resource-view]") ??
-    origin.closest<HTMLElement>("[data-slot=event-calendar-month-view]") ??
-    origin.closest<HTMLElement>("[data-slot=event-calendar]") ??
-    fallbackRoot ??
-    null
-
-  const columns: TimeColumnRect[] = []
-  const cells: DayCellRect[] = []
-  if (root) {
-    for (const el of root.querySelectorAll<HTMLElement>("[data-ec-day]")) {
-      const day = new Date(Number(el.dataset.ecDay))
-      if (el.dataset.ecBoundsStart !== undefined) {
-        columns.push({
-          day,
-          rect: el.getBoundingClientRect(),
-          boundsStartMin: Number(el.dataset.ecBoundsStart),
-          boundsEndMin: Number(el.dataset.ecBoundsEnd),
-          resourceId: el.dataset.ecResource,
-        })
-      } else {
-        cells.push({ day, rect: el.getBoundingClientRect() })
-      }
-    }
-  }
-  const viewport =
-    root?.querySelector<HTMLElement>("[data-slot=scroll-area-viewport]") ?? null
-  const viewportStartScrollTop = viewport?.scrollTop ?? 0
-  return {
-    columns,
-    cells,
-    viewport,
-    viewportRect: viewport?.getBoundingClientRect() ?? null,
-    viewportStartScrollTop,
-    scrollTop: viewportStartScrollTop,
-  }
-}
-
-function findColumn(
-  surface: Surface,
-  clientX: number
-): TimeColumnRect | undefined {
-  const scrollAdjusted = surface.columns
-  let best: TimeColumnRect | undefined
-  for (const col of scrollAdjusted) {
-    if (clientX >= col.rect.left && clientX < col.rect.right) return col
-    if (!best) best = col
-    // clamp to nearest horizontal column
-    const bestDist = Math.min(
-      Math.abs(clientX - best.rect.left),
-      Math.abs(clientX - best.rect.right)
-    )
-    const dist = Math.min(
-      Math.abs(clientX - col.rect.left),
-      Math.abs(clientX - col.rect.right)
-    )
-    if (dist < bestDist) best = col
-  }
-  return best
-}
-
-function findCell(
-  surface: Surface,
-  x: number,
-  y: number
-): DayCellRect | undefined {
-  return surface.cells.find(
-    (cell) =>
-      x >= cell.rect.left &&
-      x < cell.rect.right &&
-      y >= cell.rect.top &&
-      y < cell.rect.bottom
-  )
-}
-
-function pointerMinutes(
-  surface: Surface,
-  col: TimeColumnRect,
-  clientY: number
-): number {
-  const scrollDelta = surface.scrollTop - surface.viewportStartScrollTop
-  const boundsMinutes = col.boundsEndMin - col.boundsStartMin
-  const pxPerMinute = col.rect.height / Math.max(1, boundsMinutes)
-  const y = clientY - col.rect.top + scrollDelta
-  return col.boundsStartMin + y / pxPerMinute
-}
-
-interface BeginGestureConfig<TData> {
-  instance: EventCalendarInstance<TData>
-  kind: GestureKind
-  origin: HTMLElement
-  startEvent: PointerEvent
-  segment?: EventCalendarSegment<TData>
-  /** create only */
-  createDay?: Date
-  createAllDay?: boolean
-  /**
-   * Consumer classNames for the engine's vanilla-DOM overlays (carry clone,
-   * validation hint pill), forwarded by the gestures hook - the engine itself
-   * must never import from the React chip module.
-   */
-  ui?: {
-    dragCarry?: string
-    dragCarryInvalid?: string
-    dropHint?: string
-  }
-}
-
-/**
- * A move/resize was refused (locked, per-event disabled, or interaction off).
- * Rather than silently swallow the press, track the pointer: once it crosses
- * the activation threshold - i.e. the user genuinely tried to drag - show a
- * not-allowed cursor and broadcast once via onDragBlocked so the consumer can
- * explain it. The calendar picks no message. Fires at most once per gesture.
- */
-function beginBlockedGesture<TData>(
-  instance: EventCalendarInstance<TData>,
-  startEvent: PointerEvent,
-  segment: EventCalendarSegment<TData>,
-  gesture: "move" | "resize"
-) {
-  const startX = startEvent.clientX
-  const startY = startEvent.clientY
-  const activation = {
-    ...EVENT_CALENDAR_ACTIVATION,
-    ...instance.settings.activation,
-  }
-  const event = segment.occurrence.event
-  const reason: "readOnly" | "disabled" | "interactions-off" = event.readOnly
-    ? "readOnly"
-    : (gesture === "move" ? event.draggable : event.resizable) === false
-      ? "disabled"
-      : "interactions-off"
-  const pointerId = startEvent.pointerId
-  let activated = false
-  let finished = false
-  const onMove = (e: PointerEvent) => {
-    if (e.pointerId !== pointerId || activated) return
-    if (
-      Math.hypot(e.clientX - startX, e.clientY - startY) <
-      activation.moveDistancePx
-    ) {
-      return
-    }
-    activated = true
-    document.body.style.cursor = "not-allowed"
-    // body class alongside the inline cursor so consumer CSS can restyle or
-    // detect the blocked-drag state (mirrors "ec-dragging")
-    document.body.classList.add("ec-drag-blocked")
-    // only now is there anything to get stuck: focus loss means the release
-    // may never be delivered, leaving the cursor not-allowed document-wide
-    window.addEventListener("blur", cleanup)
-    instance.settings.onDragBlocked?.(segment.occurrence, { gesture, reason })
-  }
-  const cleanup = () => {
-    if (finished) return
-    finished = true
-    window.removeEventListener("pointermove", onMove)
-    window.removeEventListener("pointerup", onRelease)
-    window.removeEventListener("pointercancel", onRelease)
-    window.removeEventListener("blur", cleanup)
-    if (activated) {
-      document.body.style.cursor = ""
-      document.body.classList.remove("ec-drag-blocked")
-      // the pointer travelled: suppress the trailing click so the event's own
-      // dialog does not open on top of the rejection message
-      lastGestureEndedAt = performance.now()
-    }
-  }
-  // only the pointer that started the press may end it: a second finger
-  // lifting must not clear the not-allowed cursor out from under it
-  const onRelease = (e: PointerEvent) => {
-    if (e.pointerId !== pointerId) return
-    cleanup()
-  }
-  window.addEventListener("pointermove", onMove)
-  window.addEventListener("pointerup", onRelease)
-  window.addEventListener("pointercancel", onRelease)
-}
-
-function beginGesture<TData>(config: BeginGestureConfig<TData>) {
-  const { instance, kind, origin, startEvent, segment, ui } = config
-  const { settings, internals, api } = instance
-  const timeZone = settings.timeZone
-  const snap = settings.snapDuration
-  // per-calendar tuning shallow-merged over the module defaults
-  const activation = { ...EVENT_CALENDAR_ACTIVATION, ...settings.activation }
-  const startX = startEvent.clientX
-  const startY = startEvent.clientY
-  const pointerId = startEvent.pointerId
-  // Resolved once: the chip can be re-rendered away mid-gesture. A gesture
-  // from a portaled surface (the "+N more" popover) has no calendar ancestor,
-  // so fall back to the registered root - same reason as collectSurface.
-  const announcer =
-    origin
-      .closest<HTMLElement>("[data-slot=event-calendar]")
-      ?.querySelector<HTMLElement>("[data-slot=event-calendar-announcer]") ??
-    internals
-      .getRootEl()
-      ?.querySelector<HTMLElement>("[data-slot=event-calendar-announcer]") ??
-    null
-
-  const isTouch = startEvent.pointerType === "touch"
-  // resize activates immediately on precise pointers; on touch it waits for
-  // the same long-press as a move, so a finger landing on the (invisible on
-  // touch) handle strip can never start a resize the user never asked for
-  let active = kind.startsWith("resize") && !isTouch
-  let surface: Surface | null = active
-    ? collectSurface(origin, internals.getRootEl())
-    : null
-  let rafScroll: number | null = null
-  let lastProposalKey = ""
-  let touchTimer: ReturnType<typeof setTimeout> | null = null
-  let hintEl: HTMLDivElement | null = null
-  let lastValid = true
-  // Drag-create anchor minute, frozen at the first proposal: re-deriving it
-  // from the stale startY client coordinate + the CURRENT scroll delta would
-  // make the anchor drift with auto-scroll instead of staying pinned.
-  let createAnchorMin: number | null = null
-  let lastPointer: PointerEvent = startEvent
-
-  const occurrence = segment?.occurrence
-  const isBar = occurrence
-    ? occurrence.allDay ||
-      occurrence.end.getTime() - occurrence.start.getTime() >
-        24 * 60 * 60 * 1000
-    : false
-
-  // Preserve the grab offset so the event does not jump to the pointer
-  let grabOffsetMin = 0
-  /**
-   * The grabbed CHIP, not the whole occurrence. A cross-midnight event renders
-   * one chip per day, so the offset above is measured in the grabbed chip's own
-   * day frame (mixing the two frames jumps a tail chip a full day on grab) and
-   * these two carry that chip back to the occurrence. For a chip that fits in
-   * one day the lead is 0 and the duration is the occurrence's, i.e. unchanged.
-   */
-  let grabLeadMs = 0
-  let grabSegDurationMs = occurrence
-    ? occurrence.end.getTime() - occurrence.start.getTime()
-    : 0
-  /**
-   * Which day of a multi-day bar was grabbed. Without it the day-granular move
-   * slides the bar's START under the pointer, so a Mon-Fri bar grabbed on
-   * Wednesday teleports two days forward on the first nudge.
-   */
-  let grabDayOffset = 0
-
-  const activationDistance =
-    kind === "create" ? activation.createDistancePx : activation.moveDistancePx
-
-  // Each gesture keeps its own cursor: a resize must stay ns/ew-resize for
-  // the whole drag (flipping to grabbing reads as a move) - vertical for
-  // timed blocks, horizontal for day-granular bars. Moves grab.
-  const gestureCursor = kind.startsWith("resize")
-    ? isBar
-      ? "ew-resize"
-      : "ns-resize"
-    : "grabbing"
-  const setBodyDragging = (on: boolean, invalid = false) => {
-    document.body.classList.toggle("ec-dragging", on)
-    document.body.style.cursor = on
-      ? invalid
-        ? "not-allowed"
-        : gestureCursor
-      : ""
-    document.body.style.userSelect = on ? "none" : ""
-    if (!on) document.body.style.removeProperty("-webkit-user-select")
-  }
-
-  const activate = () => {
-    if (active) return
-    active = true
-    // armed with the gesture, not with the press: a press that never activates
-    // holds no drag state, no overlay and no body class to strand
-    window.addEventListener("blur", onWindowBlur)
-    surface = collectSurface(origin, internals.getRootEl())
-    if (kind === "move" && occurrence) {
-      const grabCell = findCell(surface, startX, startY)
-      if (grabCell) {
-        const originDay = zonedStartOfDay(occurrence.start, timeZone)
-        // end is exclusive, so step back an instant for the last covered day
-        const lastDay = zonedStartOfDay(
-          new Date(
-            Math.max(occurrence.end.getTime() - 1, occurrence.start.getTime())
-          ),
-          timeZone
-        )
-        const offset = differenceInCalendarDays(
-          zonedStartOfDay(grabCell.day, timeZone),
-          originDay
-        )
-        // A gesture from the "+N more" popover grabs over whatever cell that
-        // floating surface happens to cover, so only a day the event actually
-        // spans can be the grabbed day.
-        if (
-          offset >= 0 &&
-          offset <= differenceInCalendarDays(lastDay, originDay)
-        ) {
-          grabDayOffset = offset
-        }
-      }
-      if (surface.columns.length > 0 && !isBar) {
-        const col = findColumn(surface, startX)
-        if (col) {
-          const colDayStart = zonedStartOfDay(col.day, timeZone)
-          const segStartMs = Math.max(
-            occurrence.start.getTime(),
-            colDayStart.getTime()
-          )
-          grabLeadMs = segStartMs - occurrence.start.getTime()
-          grabSegDurationMs =
-            Math.min(
-              occurrence.end.getTime(),
-              addDays(colDayStart, 1).getTime()
-            ) - segStartMs
-          grabOffsetMin =
-            pointerMinutes(surface, col, startY) -
-            (segStartMs - colDayStart.getTime()) / 60000
-        }
-      }
-    }
-    setBodyDragging(true)
-    createCarry()
-  }
-
-  const computeProposal = (
-    e: PointerEvent
-  ): {
-    start: Date
-    end: Date
-    allDay: boolean
-    dayGranular?: boolean
-    resourceId?: string
-  } | null => {
-    if (!surface) return null
-
-    // ---- create: select a slot range
-    if (kind === "create") {
-      if (config.createAllDay || surface.columns.length === 0) {
-        const anchor = zonedStartOfDay(config.createDay!, timeZone)
-        const cell = findCell(surface, e.clientX, e.clientY)
-        const target = cell ? zonedStartOfDay(cell.day, timeZone) : anchor
-        const start = anchor <= target ? anchor : target
-        const end = addDays(anchor <= target ? target : anchor, 1)
-        return { start, end, allDay: true, dayGranular: true }
-      }
-      const col = findColumn(surface, startX)
-      if (!col) return null
-      if (createAnchorMin === null) {
-        createAnchorMin = snapMinutes(
-          pointerMinutes(surface, col, startY),
-          snap
-        )
-      }
-      const anchorMin = createAnchorMin
-      const curMin = snapMinutes(pointerMinutes(surface, col, e.clientY), snap)
-      const lo = Math.max(col.boundsStartMin, Math.min(anchorMin, curMin))
-      const hi = Math.min(
-        col.boundsEndMin,
-        Math.max(anchorMin, curMin, lo + snap)
-      )
-      const dayStart = zonedStartOfDay(col.day, timeZone)
-      return {
-        start: addMinutes(dayStart, lo),
-        end: addMinutes(dayStart, hi),
-        allDay: false,
-        resourceId: col.resourceId,
-      }
-    }
-
-    if (!occurrence) return null
-    const durationMs = occurrence.end.getTime() - occurrence.start.getTime()
-
-    // ---- day-granularity: month cells and bars in the all-day row
-    const overCell = findCell(surface, e.clientX, e.clientY)
-
-    // A timed event dropped on the all-day lane (a day cell inside a surface
-    // that also has time columns) converts to a full-day event on that day.
-    if (
-      kind === "move" &&
-      !isBar &&
-      surface.columns.length > 0 &&
-      overCell !== undefined
-    ) {
-      const targetDay = zonedStartOfDay(overCell.day, timeZone)
-      return {
-        start: targetDay,
-        end: addDays(targetDay, 1),
-        allDay: true,
-        dayGranular: true,
-      }
-    }
-
-    const useCells =
-      surface.columns.length === 0 || (isBar && overCell !== undefined)
-
-    if (useCells) {
-      const cell = overCell ?? findCell(surface, startX, startY)
-      if (!cell) return null
-      const targetDay = zonedStartOfDay(cell.day, timeZone)
-      if (kind === "move") {
-        const originDay = zonedStartOfDay(occurrence.start, timeZone)
-        // minus the grabbed day: the bar follows the pointer by the distance
-        // travelled, it does not re-anchor its start under the pointer
-        const delta =
-          differenceInCalendarDays(targetDay, originDay) - grabDayOffset
-        const start = addDays(toZoned(occurrence.start, timeZone), delta)
-        return {
-          start,
-          end: new Date(start.getTime() + durationMs),
-          allDay: occurrence.allDay,
-          dayGranular: true,
-        }
-      }
-      // bar edge resize: day granularity
-      if (kind === "resize-start") {
-        const time =
-          occurrence.start.getTime() -
-          zonedStartOfDay(occurrence.start, timeZone).getTime()
-        const start = new Date(targetDay.getTime() + time)
-        if (start >= occurrence.end) return null
-        return {
-          start,
-          end: occurrence.end,
-          allDay: occurrence.allDay,
-          dayGranular: true,
-        }
-      }
-      const time = occurrence.allDay
-        ? 0
-        : occurrence.end.getTime() -
-          zonedStartOfDay(occurrence.end, timeZone).getTime()
-      const end = occurrence.allDay
-        ? addDays(targetDay, 1)
-        : new Date(addDays(targetDay, time > 0 ? 0 : 1).getTime() + time)
-      if (end <= occurrence.start) return null
-      return {
-        start: occurrence.start,
-        end,
-        allDay: occurrence.allDay,
-        dayGranular: true,
-      }
-    }
-
-    // ---- minute-granularity: time-grid columns
-    const col = findColumn(surface, e.clientX)
-    if (!col) return null
-    const dayStart = zonedStartOfDay(col.day, timeZone)
-    const rawMin = pointerMinutes(surface, col, e.clientY)
-
-    if (kind === "move") {
-      const newStartMin = snapMinutes(rawMin - grabOffsetMin, snap)
-      // the clamp keeps the grabbed CHIP inside the column it is over; the
-      // lead then carries the rest of a cross-midnight occurrence with it
-      const chipDurationMin = Math.round(grabSegDurationMs / 60000)
-      const clamped = Math.min(
-        Math.max(newStartMin, col.boundsStartMin),
-        col.boundsEndMin - chipDurationMin
-      )
-      const start = new Date(
-        addMinutes(dayStart, clamped).getTime() - grabLeadMs
-      )
-      return {
-        start,
-        end: new Date(start.getTime() + durationMs),
-        allDay: false,
-        resourceId: col.resourceId,
-      }
-    }
-
-    const min = snapMinutes(rawMin, snap)
-    // Both endpoints expressed in the POINTED column's day coordinates.
-    // Anchoring each endpoint to its OWN day breaks cross-midnight events:
-    // a 23:30 pointer in the start day's column would apply 1410 minutes to
-    // the end's next-day anchor and jump the end a full day late (and a
-    // midnight-ending event computes occEndMin 0 against its own day).
-    const occStartMinInCol = Math.round(
-      (occurrence.start.getTime() - dayStart.getTime()) / 60000
-    )
-    const occEndMinInCol = Math.round(
-      (occurrence.end.getTime() - dayStart.getTime()) / 60000
-    )
-    if (kind === "resize-start") {
-      const clamped = Math.min(
-        Math.max(min, col.boundsStartMin),
-        Math.min(occEndMinInCol - snap, col.boundsEndMin)
-      )
-      const start = addMinutes(dayStart, clamped)
-      if (start >= occurrence.end) return null
-      return { start, end: occurrence.end, allDay: false }
-    }
-    const clamped = Math.max(
-      Math.min(min, col.boundsEndMin),
-      Math.max(occStartMinInCol + snap, col.boundsStartMin)
-    )
-    const end = addMinutes(dayStart, clamped)
-    if (end <= occurrence.start) return null
-    return { start: occurrence.start, end, allDay: false }
-  }
-
-  const applyProposal = (e: PointerEvent) => {
-    const proposal = computeProposal(e)
-    if (!proposal) return
-    const key = `${proposal.start.getTime()}-${proposal.end.getTime()}-${proposal.allDay}-${proposal.resourceId ?? ""}`
-    if (key === lastProposalKey) return
-    lastProposalKey = key
-
-    if (kind === "create") {
-      const draft = { ...proposal, view: instance.getState().view }
-      if (settings.canSelectSlot && !settings.canSelectSlot(draft)) return
-      internals.setSlotDraft(draft)
-      return
-    }
-    const update: EventCalendarProposedUpdate<TData> = {
-      event: occurrence!.event,
-      occurrence: occurrence!,
-      ...proposal,
-      source: kind as "drag" | "resize-start" | "resize-end",
-    }
-    if (kind === "move") update.source = "drag"
-    const valid = settings.canDropEvent ? settings.canDropEvent(update) : true
-    lastValid = valid
-    setBodyDragging(true, !valid)
-    internals.setDrag({
-      kind: kind === "move" ? "move" : (kind as "resize-start" | "resize-end"),
-      occurrence: occurrence!,
-      proposedStart: proposal.start,
-      proposedEnd: proposal.end,
-      proposedAllDay: proposal.allDay,
-      proposedDayGranular: proposal.dayGranular ?? false,
-      proposedResourceId: proposal.resourceId,
-      valid,
-    })
-  }
-
-  // Cursor-attached carry clone for MOVE gestures: the event travels freely
-  // with the pointer, like an absolutely positioned overlay, while the
-  // in-grid ghost renders only a faint dashed placeholder at the snapped
-  // drop slot (EVENT_CALENDAR_GHOST.move). Vanilla DOM: cloned once at
-  // activation, transformed per pointermove, zero React work per frame.
-  let carryEl: HTMLDivElement | null = null
-  let carryDX = 0
-  let carryDY = 0
-  const CARRY_CLASS =
-    "bg-background pointer-events-none fixed top-0 left-0 z-100 overflow-hidden rounded-sm opacity-90 shadow-md will-change-transform" +
-    (ui?.dragCarry ? " " + ui.dragCarry : "")
-  const CARRY_INVALID_CLASS =
-    `${CARRY_CLASS} ring-destructive/60 ring-1` +
-    (ui?.dragCarryInvalid ? " " + ui.dragCarryInvalid : "")
-
-  const createCarry = () => {
-    if (kind !== "move") return
-    const chip =
-      origin.closest<HTMLElement>("[data-slot=event-calendar-event]") ?? origin
-    const rect = chip.getBoundingClientRect()
-    // The clone is re-parented to <body>, escaping the calendar's inherited
-    // font-size, so copy the source chip's resolved type - this keeps the carry
-    // matching the grid at any consumer text scale (e.g. root text-sm).
-    const chipFont = getComputedStyle(chip)
-    carryDX = startX - rect.left
-    carryDY = startY - rect.top
-    carryEl = document.createElement("div")
-    carryEl.setAttribute("data-slot", "event-calendar-drag-carry")
-    carryEl.setAttribute("aria-hidden", "true")
-    carryEl.className = CARRY_CLASS
-    carryEl.style.width = `${rect.width}px`
-    carryEl.style.height = `${rect.height}px`
-    carryEl.style.fontSize = chipFont.fontSize
-    carryEl.style.lineHeight = chipFont.lineHeight
-    carryEl.style.transform = `translate3d(${snapToPixel(rect.left)}px, ${snapToPixel(rect.top)}px, 0)`
-    const clone = chip.cloneNode(true) as HTMLElement
-    clone.removeAttribute("data-dragging")
-    clone.style.width = "100%"
-    clone.style.height = "100%"
-    carryEl.appendChild(clone)
-    document.body.appendChild(carryEl)
-  }
-
-  const positionCarry = (e: PointerEvent) => {
-    if (!carryEl) return
-    carryEl.style.transform = `translate3d(${snapToPixel(e.clientX - carryDX)}px, ${snapToPixel(e.clientY - carryDY)}px, 0)`
-    const cls = lastValid ? CARRY_CLASS : CARRY_INVALID_CLASS
-    if (carryEl.className !== cls) carryEl.className = cls
-  }
-
-  // Cursor-following validation hint, visible ONLY while the proposal is
-  // rejected (canDropEvent / bounds). Vanilla DOM: zero React work per frame;
-  // pairs with the not-allowed cursor and the ghost's destructive marking.
-  const updateHint = (e: PointerEvent) => {
-    if (lastValid || !active) {
-      hintEl?.remove()
-      hintEl = null
-      return
-    }
-    if (!hintEl) {
-      hintEl = document.createElement("div")
-      hintEl.setAttribute("data-slot", "event-calendar-drop-hint")
-      // physical left-0 anchor: translate3d positions in physical clientX
-      // coordinates, so a logical start-0 anchor would fling it off-screen
-      // in RTL documents
-      hintEl.className =
-        "bg-background text-destructive border-destructive/40 pointer-events-none fixed top-0 left-0 z-100 rounded-md border px-2 py-0.5 text-xs font-medium shadow-sm" +
-        (ui?.dropHint ? " " + ui.dropHint : "")
-      hintEl.textContent = settings.i18n.labels.dropNotAllowed
-      document.body.appendChild(hintEl)
-    }
-    hintEl.style.transform = `translate3d(${snapToPixel(e.clientX + 12)}px, ${snapToPixel(e.clientY + 16)}px, 0)`
-  }
-
-  const autoScroll = (e: PointerEvent) => {
-    // Cached rect (see Surface.viewportRect) - never getBoundingClientRect per
-    // move; the box is stable while the pointer is captured.
-    const rect = surface?.viewportRect
-    if (!surface?.viewport || !rect) return
-    const edge = activation.autoScrollEdgePx
-    const step = activation.autoScrollMaxStepPx
-    let delta = 0
-    /**
-     * The scroller wraps the time track ONLY - the day headers and the all-day
-     * row sit above it, outside the box - so its top edge is a hard floor. A
-     * pointer above that floor is over one of those rows, and both are drop
-     * targets in their own right (a bar moving across dates, a timed chip
-     * lifted onto the all-day lane to convert it); they are already fully
-     * visible, so reaching them is never a request to scroll. Without the
-     * floor, "past the top edge" is true on every single move of a horizontal
-     * all-day drag and the track pans out from under a gesture that only wants
-     * to change the date - fast, because the proximity ratio grows past 1 the
-     * further above the box the pointer sits.
-     *
-     * Below the track there is no such row, so overshooting the bottom keeps
-     * scrolling - that is how a grid is normally asked to keep going - but the
-     * eased speed is capped at one step per frame for the same reason.
-     */
-    if (e.clientY >= rect.top) {
-      if (e.clientY < rect.top + edge) {
-        delta = -step * ((rect.top + edge - e.clientY) / edge)
-      } else if (e.clientY > rect.bottom - edge) {
-        delta = step * Math.min(1, (e.clientY - (rect.bottom - edge)) / edge)
-      }
-    }
-    if (rafScroll) cancelAnimationFrame(rafScroll)
-    if (delta !== 0) {
-      const tick = () => {
-        // Write-then-readback: the browser clamps scrollTop at the scroll
-        // extent, so mirror only the APPLIED delta - otherwise parking the
-        // pointer in the edge zone at the limit keeps inflating the tracked
-        // value past reality and poisons every later minute mapping. When
-        // parked (nothing applied), stop the loop; the next pointermove
-        // restarts it.
-        const before = surface!.viewport!.scrollTop
-        surface!.viewport!.scrollTop = before + delta
-        const applied = surface!.viewport!.scrollTop - before
-        if (applied === 0) return
-        // keep the tracked scrollTop in step so pointerMinutes stays a pure
-        // number read (no DOM scrollTop, no forced reflow)
-        surface!.scrollTop += applied
-        applyProposal(e)
-        rafScroll = requestAnimationFrame(tick)
-      }
-      rafScroll = requestAnimationFrame(tick)
-    }
-  }
-
-  // idempotent: pointerup, pointercancel, Escape, blur and the calendar-level
-  // teardown can race; whichever lands first wins and the rest no-op
-  let finished = false
-  const cleanup = () => {
-    if (finished) return
-    finished = true
-    activeGestureCancels.delete(cancel)
-    window.removeEventListener("pointermove", onPointerMove)
-    window.removeEventListener("pointerup", onPointerUp)
-    window.removeEventListener("pointercancel", onCancel)
-    window.removeEventListener("blur", onWindowBlur)
-    window.removeEventListener("keydown", onKeyDown, true)
-    if (rafScroll) cancelAnimationFrame(rafScroll)
-    if (touchTimer) clearTimeout(touchTimer)
-    hintEl?.remove()
-    hintEl = null
-    carryEl?.remove()
-    carryEl = null
-    setBodyDragging(false)
-  }
-
-  const cancel = () => {
-    cleanup()
-    if (active) {
-      lastGestureEndedAt = performance.now()
-      internals.setDrag(null)
-      internals.setSlotDraft(null)
-    }
-  }
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Escape") {
-      e.stopPropagation()
-      cancel()
-    }
-  }
-
-  // focus loss mid-gesture (alt-tab, OS dialogs) means the release may never
-  // be delivered; treat it as a cancel so the gesture cannot get stuck and
-  // commit its stale proposal on the next click
-  const onWindowBlur = () => cancel()
-
-  const onPointerMove = (e: PointerEvent) => {
-    // a second finger must not drive - or cancel the pending long press of -
-    // the gesture this pointer started
-    if (e.pointerId !== pointerId) return
-    lastPointer = e
-    if (!active) {
-      const distance = Math.hypot(e.clientX - startX, e.clientY - startY)
-      if (isTouch) {
-        // Long-press pending: moving past tolerance means scroll, not drag
-        if (distance > activation.touchTolerancePx) cancel()
-        return
-      }
-      if (distance < activationDistance) return
-      activate()
-    }
-    applyProposal(e)
-    autoScroll(e)
-    updateHint(e)
-    positionCarry(e)
-  }
-
-  const onPointerUp = (e: PointerEvent) => {
-    if (e.pointerId !== pointerId) return
-    cleanup()
-    if (!active) return
-    lastGestureEndedAt = performance.now()
-
-    const state = instance.getState()
-    if (kind === "create") {
-      const draft = state.slotDraft
-      internals.setSlotDraft(null)
-      if (draft) {
-        api.select({
-          slot: { start: draft.start, end: draft.end, allDay: draft.allDay },
-        })
-        settings.onSelectSlot?.(draft)
-      }
-      return
-    }
-    const drag = state.drag
-    internals.setDrag(null)
-    if (!drag || !occurrence) return
-    const unchanged =
-      drag.proposedStart.getTime() === occurrence.start.getTime() &&
-      drag.proposedEnd.getTime() === occurrence.end.getTime() &&
-      (drag.proposedResourceId === undefined ||
-        drag.proposedResourceId === occurrence.event.resourceId)
-    if (unchanged) return
-    // Commit through the one validation funnel; consumer reject = automatic
-    // revert because the calendar never mutated during the gesture.
-    const accepted = internals.applyProposedUpdate({
-      event: occurrence.event,
-      occurrence,
-      start: drag.proposedStart,
-      end: drag.proposedEnd,
-      allDay: drag.proposedAllDay,
-      resourceId: drag.proposedResourceId,
-      source:
-        kind === "move" ? "drag" : (kind as "resize-start" | "resize-end"),
-    })
-    // the polite live region is the only feedback a screen-reader user gets
-    // that the drop landed, and on what; a vetoed commit stays silent
-    if (accepted && announcer) {
-      announcer.textContent = `${occurrence.event.title}, ${settings.i18n.functions.formatEventTime(
-        toZoned(drag.proposedStart, timeZone),
-        toZoned(drag.proposedEnd, timeZone),
-        drag.proposedAllDay,
-        { locale: settings.locale }
-      )}`
-    }
-  }
-
-  const onCancel = (e: PointerEvent) => {
-    if (e.pointerId !== pointerId) return
-    cancel()
-  }
-
-  window.addEventListener("pointermove", onPointerMove)
-  window.addEventListener("pointerup", onPointerUp)
-  window.addEventListener("pointercancel", onCancel)
-  // a resize on a precise pointer is live from the first frame, so it never
-  // reaches activate() to arm its own blur cancel
-  if (active) window.addEventListener("blur", onWindowBlur)
-  window.addEventListener("keydown", onKeyDown, true)
-  activeGestureCancels.add(cancel)
-
-  // Touch: long-press activation (movement past tolerance cancels above)
-  if (isTouch && !active) {
-    touchTimer = setTimeout(() => {
-      activate()
-      applyProposal(lastPointer)
-    }, activation.touchDelayMs)
-  }
-}
-
-/** Per-chip / per-surface pointer gesture wiring. */
-function useEventCalendarGestures<TData = unknown>() {
-  const instance = useEventCalendar<TData>()
-  // Overlay classNames bridged from React config into the vanilla-DOM engine
-  // (which must never import from the chip module - circular).
-  const { classNames } = useEventCalendarViewConfig<TData>()
-  const ui = useMemo(
-    () => ({
-      dragCarry: classNames?.dragCarry,
-      dragCarryInvalid: classNames?.dragCarryInvalid,
-      dropHint: classNames?.dropHint,
-    }),
-    [classNames]
-  )
-
-  // An in-flight gesture lives on window listeners and body-appended overlays,
-  // so it must never outlive the calendar. Chips hold this hook too and they
-  // legitimately unmount mid-gesture, so only the LAST consumer leaving - the
-  // calendar itself going away - aborts.
-  useEffect(() => {
-    gestureConsumers += 1
-    return () => {
-      gestureConsumers -= 1
-      if (gestureConsumers === 0) cancelActiveEventCalendarGestures()
-    }
-  }, [])
-
-  const canDrag = useCallback(
-    (segment: EventCalendarSegment<TData>) => {
-      const { interactions } = instance.getState()
-      const event = segment.occurrence.event
-      return interactions.drag && !event.readOnly && event.draggable !== false
-    },
-    [instance]
-  )
-
-  const canResize = useCallback(
-    (segment: EventCalendarSegment<TData>) => {
-      const { interactions } = instance.getState()
-      const event = segment.occurrence.event
-      return interactions.resize && !event.readOnly && event.resizable !== false
-    },
-    [instance]
-  )
-
-  const beginMove = useCallback(
-    (e: React.PointerEvent, segment: EventCalendarSegment<TData>) => {
-      if (e.button !== 0) return
-      if (!canDrag(segment)) {
-        // refused, but still give feedback + broadcast on a real drag attempt
-        beginBlockedGesture(instance, e.nativeEvent, segment, "move")
-        return
-      }
-      beginGesture({
-        instance,
-        kind: "move",
-        origin: e.currentTarget as HTMLElement,
-        startEvent: e.nativeEvent,
-        segment,
-        ui,
-      })
-    },
-    [instance, canDrag, ui]
-  )
-
-  const beginResize = useCallback(
-    (
-      e: React.PointerEvent,
-      segment: EventCalendarSegment<TData>,
-      edge: "start" | "end"
-    ) => {
-      if (e.button !== 0) return
-      if (!canResize(segment)) {
-        e.stopPropagation()
-        beginBlockedGesture(instance, e.nativeEvent, segment, "resize")
-        return
-      }
-      e.stopPropagation()
-      e.preventDefault()
-      beginGesture({
-        instance,
-        kind: edge === "start" ? "resize-start" : "resize-end",
-        origin: e.currentTarget as HTMLElement,
-        startEvent: e.nativeEvent,
-        segment,
-        ui,
-      })
-    },
-    [instance, canResize, ui]
-  )
-
-  const beginCreate = useCallback(
-    (e: React.PointerEvent, day: Date, allDay: boolean) => {
-      if (e.button !== 0) return
-      if (!instance.getState().interactions.selectSlot) return
-      beginGesture({
-        instance,
-        kind: "create",
-        origin: e.currentTarget as HTMLElement,
-        startEvent: e.nativeEvent,
-        createDay: day,
-        createAllDay: allDay,
-        ui,
-      })
-    },
-    [instance, ui]
-  )
-
-  return { beginMove, beginResize, beginCreate, canDrag, canResize }
-}
-
-export {
-  EVENT_CALENDAR_ACTIVATION,
-  cancelActiveEventCalendarGestures,
-  markChipPress,
-  useEventCalendarGestures,
-  wasRecentChipPress,
-  wasRecentDrag,
-}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-event.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-event.tsx
deleted file mode 100644
index eca6221..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-event.tsx
+++ /dev/null
@@ -1,555 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useMemo,
-  type CSSProperties,
-  type ReactNode,
-} from "react"
-import {
-  useEventCalendar,
-  useEventCalendarSelector,
-  useEventCalendarViewConfig,
-  useEventCalendarViewContext,
-} from "@/components/reui/event-calendar/event-calendar"
-import {
-  markChipPress,
-  useEventCalendarGestures,
-  wasRecentDrag,
-} from "@/components/reui/event-calendar/event-calendar-dnd"
-import {
-  spansMultipleDays,
-  toZoned,
-  zonedStartOfDay,
-} from "@/components/reui/event-calendar/event-calendar-lib"
-import type {
-  EventCalendarOccurrence,
-  EventCalendarSegment,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { addDays, format } from "date-fns"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@evobgp/ui/components/tooltip"
-import { RepeatIcon } from "lucide-react"
-
-/** Event color presets; each stays legible on light and dark surfaces. */
-const EVENT_CALENDAR_COLORS: Array<{ name: string; value: string }> = [
-  { name: "Blue", value: "var(--color-blue-500)" },
-  { name: "Emerald", value: "var(--color-emerald-500)" },
-  { name: "Violet", value: "var(--color-violet-500)" },
-  { name: "Rose", value: "var(--color-rose-500)" },
-  { name: "Amber", value: "var(--color-amber-500)" },
-  { name: "Cyan", value: "var(--color-cyan-500)" },
-  { name: "Orange", value: "var(--color-orange-500)" },
-  { name: "Pink", value: "var(--color-pink-500)" },
-  { name: "Teal", value: "var(--color-teal-500)" },
-  { name: "Indigo", value: "var(--color-indigo-500)" },
-]
-
-/**
- * Drag-ghost surfaces, shared verbatim by every view. A move CARRIES the
- * event: the dnd engine attaches a full clone to the cursor
- * (data-slot=event-calendar-drag-carry), so this in-grid ghost is only the
- * dashed placeholder for the snapped drop slot. A resize STRETCHES instead:
- * the chip itself at the proposed extent, dashed rather than solid.
- */
-const EVENT_CALENDAR_GHOST = {
-  move: "rounded-sm border border-dashed border-(--ec-event-color)/50 bg-(--ec-event-color)/8",
-  resize:
-    "rounded-sm border border-dashed border-(--ec-event-color)/70 overflow-hidden",
-  invalid: "border-destructive/70 bg-destructive/10",
-  invalidResize: "border-destructive/70",
-  /** Applied to the clone inside an invalid resize ghost. */
-  invalidContent: "opacity-60",
-} as const
-
-/**
- * Fade-out truncation for stacked timed blocks, where squeezed cascade
- * columns clip titles into a mash of glyphs; a right-edge mask fade reads
- * cleaner than an ellipsis at those widths. Masked ONLY below a 10rem
- * container: mask-image forces text off subpixel antialiasing, so masking
- * wide chips makes the whole grid read bolder and shimmer while resizing.
- * Wide chips keep the plain ellipsis. Exported for consumer renderEvent.
- */
-const EVENT_CALENDAR_FADE_TRUNCATE =
-  "w-full truncate @max-[10rem]:text-clip @max-[10rem]:[mask-image:linear-gradient(to_right,#000_calc(100%-0.75rem),transparent)] @max-[10rem]:rtl:[mask-image:linear-gradient(to_left,#000_calc(100%-0.75rem),transparent)]"
-
-/**
- * The drag-to-create selection, shared by every view: a dashed primary
- * outline over a faint wash with the range printed inside. `box` is the timed
- * grid's single minute-positioned rectangle; `segment` is one day-cell slice
- * of a multi-cell draft, with side borders and rounding only on the run's two
- * ends so it reads as one dashed box rather than a row of them.
- */
-const EVENT_CALENDAR_SLOT_DRAFT = {
-  box: "rounded-sm border border-dashed border-primary/40 bg-primary/5",
-  segment: "border-y border-dashed border-primary/40",
-  segmentStart: "rounded-s-sm border-s",
-  segmentEnd: "rounded-e-sm border-e",
-  /**
-   * The wash for segmented views, on the CELL not the dashed overlay: the
-   * overlay stacks above the chips, so tinting it would wash them instead.
-   */
-  surface: "bg-primary/5",
-  /**
-   * The range readout. `leading-none` is load-bearing: the shortest timed
-   * draft is one snap interval tall (16px at the default 15-minute snap and
-   * 4rem hour height), and looser leading renders ~18px, clipped by the
-   * draft's own overflow-hidden.
-   */
-  label:
-    "text-primary truncate px-1 py-0.5 text-[0.6875rem] leading-none font-medium",
-} as const
-
-interface EventCalendarChipContextValue<TData = unknown> {
-  occurrence: EventCalendarOccurrence<TData>
-  segment: EventCalendarSegment<TData>
-  isDragging: boolean
-  isSelected: boolean
-}
-
-const EventCalendarChipContext =
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  createContext<EventCalendarChipContextValue<any> | null>(null)
-
-/** The chip's subject; usable inside renderEvent content and chip children. */
-function useEventCalendarEventChip<
-  TData = unknown,
->(): EventCalendarChipContextValue<TData> {
-  const ctx = useContext(EventCalendarChipContext)
-  if (!ctx) {
-    throw new Error(
-      "useEventCalendarEventChip must be used within <EventCalendarEvent>"
-    )
-  }
-  return ctx as EventCalendarChipContextValue<TData>
-}
-
-interface EventCalendarEventProps<TData = unknown> extends Omit<
-  useRender.ComponentProps<"button">,
-  "children"
-> {
-  segment: EventCalendarSegment<TData>
-  /** Replaces the default chip CONTENT; the wrapper stays calendar-owned. */
-  children?: ReactNode
-  /**
-   * Static drag clone: the chip as-is but inert - no gestures, resize
-   * handles, selection/drag state, focus or pointer events.
-   */
-  preview?: boolean
-}
-
-/**
- * The one interactive event element in every view. The wrapper owns a11y,
- * data attributes, selection and drag/resize wiring; content comes from
- * children, else renderEvent, else the built-in default.
- */
-function EventCalendarEvent<TData = unknown>({
-  segment,
-  className,
-  render,
-  children,
-  preview = false,
-  ...props
-}: EventCalendarEventProps<TData>) {
-  const instance = useEventCalendar<TData>()
-  const viewConfig = useEventCalendarViewConfig<TData>()
-  const { view } = useEventCalendarViewContext()
-  const gestures = useEventCalendarGestures<TData>()
-  const { settings } = instance
-  const occurrence = segment.occurrence
-  const event = occurrence.event
-
-  const isSelectedRaw = useEventCalendarSelector<TData, boolean>(
-    (state) => state.selection.eventKeys.includes(occurrence.key),
-    { calendar: instance }
-  )
-  const isDraggingRaw = useEventCalendarSelector<TData, boolean>(
-    (state) => state.drag?.occurrence.key === occurrence.key,
-    { calendar: instance }
-  )
-  // reactive, unlike gestures.canResize: api.setInteractions({ resize })
-  // must add/remove the handles without waiting for an unrelated re-render
-  const resizeOn = useEventCalendarSelector<TData, boolean>(
-    (state) => state.interactions.resize,
-    { calendar: instance }
-  )
-  // A preview clone must never inherit the source's selected/dragging state
-  // (the drag key matches, which would dim the clone itself).
-  const isSelected = preview ? false : isSelectedRaw
-  const isDragging = preview ? false : isDraggingRaw
-
-  const isBar =
-    occurrence.allDay || spansMultipleDays(occurrence, settings.timeZone)
-  const inTimeGrid =
-    view === "week" || view === "day" || view === "days" || view === "resource"
-  const interactive = view !== "agenda" && !preview
-  const timedBlock = inTimeGrid && !isBar
-  const horizontalBar = isBar && !inTimeGrid
-  // >= compactEventMinutes renders the stacked (title over time) layout, where
-  // squeezed cascade columns fade-truncate instead of clipping into neighbors
-  const stackedBlock =
-    timedBlock &&
-    (segment.endMin ?? 0) - (segment.startMin ?? 0) >=
-      viewConfig.compactEventMinutes
-
-  const defaultContent = (
-    <>
-      {/* leading dot for single-row chips (month cells, all-day bars); a
-          time-grid block takes its color from the tinted surface instead, and
-          in its stacked layout a dot would sit alone on the first line */}
-      {!timedBlock && (
-        <span
-          aria-hidden
-          data-slot="event-calendar-event-dot"
-          // -me-0.5 tightens only the dot-to-title gap; the chip keeps gap-1.5
-          className="-me-0.5 size-1.5 shrink-0 rounded-full bg-(--ec-event-color)"
-        />
-      )}
-      {occurrence.isRecurring && (
-        <RepeatIcon className="size-2.5 shrink-0 opacity-70" aria-hidden="true" />
-      )}
-      <span
-        className={cn(
-          "font-medium",
-          stackedBlock ? EVENT_CALENDAR_FADE_TRUNCATE : "truncate"
-        )}
-      >
-        {event.title}
-      </span>
-      {/* month cells are narrow: a compact never-shrinking start time keeps
-          the title readable; grids show the full range */}
-      {!occurrence.allDay &&
-        segment.isStart &&
-        (view === "month" ? (
-          <span className="text-muted-foreground shrink-0">
-            {format(
-              toZoned(occurrence.start, settings.timeZone),
-              settings.i18n.formats.eventTime,
-              { locale: settings.locale }
-            )}
-          </span>
-        ) : (
-          <span
-            className={cn(
-              "text-muted-foreground hidden @[8rem]:inline",
-              stackedBlock ? EVENT_CALENDAR_FADE_TRUNCATE : "truncate"
-            )}
-          >
-            {settings.i18n.functions.formatEventTime(
-              toZoned(occurrence.start, settings.timeZone),
-              toZoned(occurrence.end, settings.timeZone),
-              occurrence.allDay,
-              { locale: settings.locale }
-            )}
-          </span>
-        ))}
-    </>
-  )
-
-  // Per-day time text for a multi-day event: "From 9:00 AM", "All day",
-  // "Until 5:00 PM". Boundaries come from the occurrence vs segment.day, never
-  // the packing flags - lane merging rewrites those on shared segments.
-  const agendaTimeText = (() => {
-    if (view !== "agenda") return ""
-    if (occurrence.allDay) return settings.i18n.labels.allDay
-    const dayStart = zonedStartOfDay(segment.day, settings.timeZone)
-    const dayEnd = addDays(toZoned(dayStart, settings.timeZone), 1)
-    const startsBefore = occurrence.start < dayStart
-    const endsAfter = occurrence.end > dayEnd
-    if (startsBefore && endsAfter) return settings.i18n.labels.allDay
-    if (endsAfter) {
-      return settings.i18n.labels.timeFrom(
-        format(
-          toZoned(occurrence.start, settings.timeZone),
-          settings.i18n.formats.eventTime,
-          { locale: settings.locale }
-        )
-      )
-    }
-    if (startsBefore) {
-      return settings.i18n.labels.timeUntil(
-        format(
-          toZoned(occurrence.end, settings.timeZone),
-          settings.i18n.formats.eventTime,
-          { locale: settings.locale }
-        )
-      )
-    }
-    return settings.i18n.functions.formatEventTime(
-      toZoned(occurrence.start, settings.timeZone),
-      toZoned(occurrence.end, settings.timeZone),
-      false,
-      { locale: settings.locale }
-    )
-  })()
-
-  // Agenda default row: time column, color-dot badge, plain title
-  const agendaDefaultContent = (
-    <>
-      <span className="text-muted-foreground w-40 shrink-0 truncate tabular-nums">
-        {agendaTimeText}
-      </span>
-      <span
-        aria-hidden
-        data-slot="event-calendar-agenda-dot"
-        className="size-2 shrink-0 rounded-full bg-(--ec-event-color)"
-      />
-      <span className="truncate text-sm">{event.title}</span>
-      {occurrence.isRecurring && (
-        <RepeatIcon className="text-muted-foreground size-2.5 shrink-0" aria-hidden="true" />
-      )}
-    </>
-  )
-
-  // Memoized so a drag - which re-renders the lane on every pointer move -
-  // never re-invokes the consumer's renderEvent per frame: a referentially
-  // stable element lets React skip the custom subtree instead of flickering it.
-  // The render fns are deps, so an inline arrow from the consumer defeats it.
-  const customContent = useMemo(() => {
-    const renderProps = { occurrence, segment, view, isDragging, isSelected }
-    return view === "agenda"
-      ? viewConfig.renderAgendaEvent?.(renderProps)
-      : viewConfig.renderEvent?.(renderProps)
-  }, [
-    occurrence,
-    segment,
-    view,
-    isDragging,
-    isSelected,
-    viewConfig.renderAgendaEvent,
-    viewConfig.renderEvent,
-  ])
-  const content =
-    children ??
-    customContent ??
-    (view === "agenda" ? agendaDefaultContent : defaultContent)
-
-  const timeLabel = settings.i18n.functions.formatEventTime(
-    toZoned(occurrence.start, settings.timeZone),
-    toZoned(occurrence.end, settings.timeZone),
-    occurrence.allDay,
-    { locale: settings.locale }
-  )
-  // native hover tooltip text; a formatter returning undefined drops the title
-  const label = settings.i18n.functions.formatEventLabel
-    ? settings.i18n.functions.formatEventLabel(event.title, timeLabel)
-    : `${event.title}, ${timeLabel}`
-
-  // Optional styled tooltip (viewConfig.eventTooltip, default off). It replaces
-  // the native title so the two never stack, and a preview never gets one. A
-  // falsy renderEventTooltip result (including the false/"" of `cond && <node>`)
-  // falls back to the label; an empty label leaves no content and skips it.
-  const tooltipOpts =
-    typeof viewConfig.eventTooltip === "object" ? viewConfig.eventTooltip : null
-  const tooltipContent =
-    !preview && viewConfig.eventTooltip
-      ? viewConfig.renderEventTooltip?.({
-          occurrence,
-          segment,
-          view,
-          label,
-        }) || label
-      : null
-  const tooltipOn = Boolean(tooltipContent)
-
-  const showResize =
-    interactive && resizeOn && !event.readOnly && event.resizable !== false
-  // Hover grip pill (mirrors the gantt bars) marking the resize direction.
-  // Shown on compact sub-compactEventMinutes blocks too: the 1.5rem chip
-  // min-height leaves edge room without colliding with the centered title.
-  const grip = (
-    <span
-      aria-hidden
-      data-slot="event-calendar-resize-grip"
-      className={cn(
-        "bg-foreground/40 rounded-full",
-        timedBlock ? "h-0.5 w-2.5" : "h-2.5 w-0.5",
-        viewConfig.classNames?.resizeGrip
-      )}
-    />
-  )
-  const resizeHandles = showResize && (
-    <>
-      {timedBlock && segment.isStart && (
-        <span
-          data-slot="event-calendar-resize-handle"
-          data-edge="start"
-          className={cn(
-            "absolute inset-x-1 top-0 flex h-1.5 cursor-ns-resize items-center justify-center opacity-0 transition-opacity duration-150 group-hover/ec-event:opacity-100",
-            viewConfig.classNames?.resizeHandle
-          )}
-          onPointerDown={(e) => gestures.beginResize(e, segment, "start")}
-        >
-          {grip}
-        </span>
-      )}
-      {timedBlock && segment.isEnd && (
-        <span
-          data-slot="event-calendar-resize-handle"
-          data-edge="end"
-          className={cn(
-            "absolute inset-x-1 bottom-0 flex h-1.5 cursor-ns-resize items-center justify-center opacity-0 transition-opacity duration-150 group-hover/ec-event:opacity-100",
-            viewConfig.classNames?.resizeHandle
-          )}
-          onPointerDown={(e) => gestures.beginResize(e, segment, "end")}
-        >
-          {grip}
-        </span>
-      )}
-      {(horizontalBar || (isBar && inTimeGrid)) && segment.isStart && (
-        <span
-          data-slot="event-calendar-resize-handle"
-          data-edge="start"
-          className={cn(
-            "absolute inset-y-0 start-0 flex w-2 cursor-ew-resize items-center justify-center opacity-0 transition-opacity duration-150 group-hover/ec-event:opacity-100",
-            viewConfig.classNames?.resizeHandle
-          )}
-          onPointerDown={(e) => gestures.beginResize(e, segment, "start")}
-        >
-          {grip}
-        </span>
-      )}
-      {(horizontalBar || (isBar && inTimeGrid)) && segment.isEnd && (
-        <span
-          data-slot="event-calendar-resize-handle"
-          data-edge="end"
-          className={cn(
-            "absolute inset-y-0 end-0 flex w-2 cursor-ew-resize items-center justify-center opacity-0 transition-opacity duration-150 group-hover/ec-event:opacity-100",
-            viewConfig.classNames?.resizeHandle
-          )}
-          onPointerDown={(e) => gestures.beginResize(e, segment, "end")}
-        >
-          {grip}
-        </span>
-      )}
-    </>
-  )
-
-  const defaultProps = {
-    type: "button" as const,
-    "data-slot": "event-calendar-event",
-    "data-view": view,
-    "data-all-day": occurrence.allDay || undefined,
-    "data-recurring": occurrence.isRecurring || undefined,
-    "data-selected": isSelected || undefined,
-    "data-dragging": isDragging || undefined,
-    "data-preview": preview || undefined,
-    "data-past": occurrence.end.getTime() < Date.now() || undefined,
-    title: preview || tooltipOn ? undefined : label,
-    "aria-label":
-      settings.i18n.functions.formatEventAriaLabel?.(
-        event.title,
-        timeLabel,
-        segment.continuesBefore || segment.continuesAfter
-      ) ??
-      `${event.title}, ${timeLabel}${
-        segment.continuesBefore || segment.continuesAfter
-          ? `, ${settings.i18n.labels.continues}`
-          : ""
-      }`,
-    // A background tint alone conveys selection, so the chip is a real toggle
-    // wherever it is interactive (agenda rows never select, previews are inert).
-    "aria-pressed": interactive ? isSelected : undefined,
-    "aria-hidden": preview || undefined,
-    tabIndex: preview ? -1 : undefined,
-    style: {
-      "--ec-event-color": event.color ?? "var(--color-primary)",
-    } as CSSProperties,
-    onPointerDown: (e: React.PointerEvent) => {
-      e.stopPropagation()
-      // suppress the trailing slot-create click when this press yields no drag
-      markChipPress()
-      if (interactive) gestures.beginMove(e, segment)
-    },
-    onClick: (e: React.MouseEvent) => {
-      e.stopPropagation()
-      if (wasRecentDrag()) return
-      // consumer first: e.preventDefault() opts out of built-in selection
-      settings.onEventClick?.(occurrence, e)
-      // the agenda is a read-only list: a click never selects/focuses a row
-      if (e.defaultPrevented || view === "agenda") return
-      instance.api.selectEvent(occurrence.key)
-    },
-    onDoubleClick: (e: React.MouseEvent) => {
-      e.stopPropagation()
-      settings.onEventDoubleClick?.(occurrence, e)
-    },
-    className: cn(
-      "group/ec-event text-foreground relative flex w-full min-w-0 cursor-pointer touch-none items-center overflow-hidden text-start select-none",
-      "focus-visible:ring-ring/50 outline-none focus-visible:ring-2",
-      preview && "pointer-events-none",
-      view === "agenda"
-        ? // plain list row: color lives in the dot badge, not a tinted pill;
-          // hover AND selection surfaces are owned by the agenda row wrapper
-          "gap-3 rounded-md text-sm"
-        : cn(
-            // @container removes intrinsic sizing; only grid chips are containers
-            // py-1: room above/below inline badges (attendee pill etc.)
-            "@container gap-1.5 rounded-sm px-1.5 py-1 leading-normal",
-            // soft tint + inset ring, not an accent border: legible on both themes
-            "bg-(--ec-event-color)/15 hover:bg-(--ec-event-color)/25",
-            // a flat tint reads darker on a dark surface, so lift it there
-            "dark:bg-(--ec-event-color)/20 dark:hover:bg-(--ec-event-color)/30",
-            "inset-ring inset-ring-(--ec-event-color)/15",
-            "transition-[background-color,box-shadow] duration-150",
-            "data-dragging:opacity-40",
-            "data-selected:bg-(--ec-event-color)/30 data-selected:inset-ring-(--ec-event-color)/40",
-            segment.continuesBefore && "rounded-s-none",
-            segment.continuesAfter && "rounded-e-none"
-          ),
-      viewConfig.classNames?.event,
-      className
-    ),
-    children: (
-      <>
-        {content}
-        {resizeHandles}
-      </>
-    ),
-  }
-
-  const chip = useRender({
-    defaultTagName: "button",
-    render,
-    props: mergeProps<"button">(defaultProps, props),
-  })
-
-  return (
-    <EventCalendarChipContext.Provider
-      value={{ occurrence, segment, isDragging, isSelected }}
-    >
-      {tooltipOn ? (
-        <TooltipProvider delay={tooltipOpts?.delay ?? 600}>
-          <Tooltip>
-            <TooltipTrigger render={chip} />
-            <TooltipContent
-              side={tooltipOpts?.side ?? "top"}
-              className={viewConfig.classNames?.eventTooltip}
-            >
-              {tooltipContent}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      ) : (
-        chip
-      )}
-    </EventCalendarChipContext.Provider>
-  )
-}
-
-export {
-  EVENT_CALENDAR_COLORS,
-  EVENT_CALENDAR_FADE_TRUNCATE,
-  EVENT_CALENDAR_GHOST,
-  EVENT_CALENDAR_SLOT_DRAFT,
-  EventCalendarEvent,
-  useEventCalendarEventChip,
-}
-export type { EventCalendarChipContextValue, EventCalendarEventProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-i18n.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-i18n.tsx
deleted file mode 100644
index d30cc2d..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-i18n.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import type {
-  CalendarView,
-  EventCalendarDateRange,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import {
-  format,
-  isSameMonth,
-  isSameYear,
-  subMilliseconds,
-  type Locale,
-} from "date-fns"
-
-interface EventCalendarI18nConfig {
-  labels: {
-    today: string
-    previous: string
-    next: string
-    addEvent: string
-    allDay: string
-    more: (count: number) => string
-    noEvents: string
-    loading: string
-    event: string
-    events: (count: number) => string
-    selectView: string
-    week: (weekNumber: number) => string
-    resources: string
-    goToDate: string
-    /** Cursor hint while a drag/resize hovers a rejected position. */
-    dropNotAllowed: string
-    /** Aria-label suffix on chip segments that continue past the cell. */
-    continues: string
-    /** Agenda label for the first day of a multi-day event. */
-    timeFrom: (time: string) => string
-    /** Agenda label for the last day of a multi-day event. */
-    timeUntil: (time: string) => string
-    /** View-switcher shortcut hint characters, per view. */
-    viewShortcuts: Record<CalendarView, string>
-    /** Aria-label of the agenda day collapse/expand toggle. */
-    toggleDayEvents: (count: number, expanded: boolean) => string
-    /** Aria-label of the agenda event details toggle. */
-    eventDetails: (title: string) => string
-    /** Compact "+N" overflow (agenda summary dot stack). */
-    moreCompact: (count: number) => string
-    /** Joins a bounded from-to time span. */
-    timeRange: (from: string, to: string) => string
-  }
-  viewNames: {
-    month: string
-    week: string
-    day: string
-    days: (count: number) => string
-    agenda: string
-    resource: string
-  }
-  /** date-fns format strings, applied with the calendar `locale`. */
-  formats: {
-    monthTitle: string
-    /** Undefined = smart cross-month range via functions.formatTitle. */
-    weekTitle?: string
-    dayTitle: string
-    /** Undefined = smart range label via functions.formatTitle. */
-    agendaTitle?: string
-    monthDayHeader: string
-    /** Narrow variant used by the month view below the compact breakpoint. */
-    monthDayHeaderNarrow: string
-    timeGridDayHeader: string
-    agendaDayHeader: string
-    /** Agenda date-gutter day number. */
-    agendaDayNumber: string
-    /** Agenda date-gutter weekday label. */
-    agendaWeekday: string
-    /** "+N more" popover day header. */
-    moreDayHeader: string
-    /** Month cell aria-label date. */
-    monthCellAriaLabel: string
-    /** Time-grid day column aria-label date. */
-    dayAria: string
-    /** Undefined = the resource view title falls back to dayTitle. */
-    resourceTitle?: string
-    timeGutter: string
-    /** Sub-hour gutter labels (interval below 60 minutes). */
-    timeGutterMinute: string
-    eventTime: string
-    monthCellDay: string
-  }
-  functions: {
-    formatTitle: (
-      view: CalendarView,
-      ctx: {
-        date: Date
-        activeRange: EventCalendarDateRange
-        visibleRange: EventCalendarDateRange
-        locale?: Locale
-      }
-    ) => string
-    formatEventTime: (
-      start: Date,
-      end: Date,
-      allDay: boolean,
-      /** date-fns options (the calendar `locale`); trailing so a 3-arg override still fits. */
-      opts?: { locale?: Locale }
-    ) => string
-    formatDayRange: (
-      range: EventCalendarDateRange,
-      opts?: { locale?: Locale }
-    ) => string
-    /** Chip native tooltip text; return undefined to drop the attribute. */
-    formatEventLabel?: (title: string, timeLabel: string) => string | undefined
-    /** Chip aria-label composition. */
-    formatEventAriaLabel?: (
-      title: string,
-      timeLabel: string,
-      continues: boolean
-    ) => string
-  }
-}
-
-const DEFAULT_LABELS: EventCalendarI18nConfig["labels"] = {
-  today: "Today",
-  previous: "Previous",
-  next: "Next",
-  addEvent: "Add event",
-  allDay: "All day",
-  more: (count) => `+${count} more`,
-  noEvents: "No events",
-  loading: "Loading events",
-  event: "event",
-  events: (count) => (count === 1 ? "1 event" : `${count} events`),
-  selectView: "Select view",
-  week: (weekNumber) => `W${weekNumber}`,
-  resources: "Resources",
-  goToDate: "Go to date",
-  dropNotAllowed: "Can't place here",
-  continues: "continues",
-  timeFrom: (time) => `From ${time}`,
-  timeUntil: (time) => `Until ${time}`,
-  viewShortcuts: {
-    month: "M",
-    week: "W",
-    day: "D",
-    days: "5",
-    agenda: "A",
-    resource: "G",
-  },
-  toggleDayEvents: (count) => (count === 1 ? "1 event" : `${count} events`),
-  eventDetails: (title) => title,
-  moreCompact: (count) => `+${count}`,
-  timeRange: (from, to) => `${from} - ${to}`,
-}
-
-const DEFAULT_VIEW_NAMES: EventCalendarI18nConfig["viewNames"] = {
-  month: "Month",
-  week: "Week",
-  day: "Day",
-  days: (count) => (count === 1 ? "1 day" : `${count} days`),
-  agenda: "Agenda",
-  resource: "Time Grid",
-}
-
-const DEFAULT_FORMATS: EventCalendarI18nConfig["formats"] = {
-  monthTitle: "MMMM yyyy",
-  weekTitle: undefined,
-  dayTitle: "EEEE, MMMM d, yyyy",
-  agendaTitle: undefined,
-  monthDayHeader: "EEE",
-  monthDayHeaderNarrow: "EEEEE",
-  timeGridDayHeader: "EEE d",
-  agendaDayHeader: "EEEE, MMMM d",
-  agendaDayNumber: "d",
-  agendaWeekday: "EEE",
-  moreDayHeader: "EEEE, MMMM d",
-  monthCellAriaLabel: "PPPP",
-  dayAria: "PPPP",
-  resourceTitle: undefined,
-  timeGutter: "h a",
-  timeGutterMinute: "h:mm a",
-  eventTime: "h:mm a",
-  monthCellDay: "d",
-}
-
-/**
- * Default formatting functions BOUND to a config's labels/formats, so that
- * `formats` overrides flow into the default renderers (a consumer overriding
- * formats.monthTitle without replacing formatTitle still sees it applied).
- */
-function makeDefaultFunctions(
-  cfg: Pick<EventCalendarI18nConfig, "labels" | "formats">
-): EventCalendarI18nConfig["functions"] {
-  return {
-    formatTitle: (view, { date, activeRange, locale }) => {
-      const opts = { locale }
-      if (view === "month") {
-        return format(date, cfg.formats.monthTitle, opts)
-      }
-      if (view === "resource") {
-        return format(
-          date,
-          cfg.formats.resourceTitle ?? cfg.formats.dayTitle,
-          opts
-        )
-      }
-      if (view === "day") {
-        return format(date, cfg.formats.dayTitle, opts)
-      }
-      if (view === "week" && cfg.formats.weekTitle) {
-        return format(date, cfg.formats.weekTitle, opts)
-      }
-      if (view === "agenda" && cfg.formats.agendaTitle) {
-        return format(date, cfg.formats.agendaTitle, opts)
-      }
-      // week / days / agenda: smart range label, last day is activeRange.end - 1ms.
-      // subMilliseconds keeps the zoned date type (a plain new Date(ms)
-      // would flip the label to the machine zone near midnight)
-      const rangeEnd = subMilliseconds(activeRange.end, 1)
-      const start = activeRange.start
-      if (isSameMonth(start, rangeEnd)) {
-        return `${format(start, "MMMM d", opts)} - ${format(rangeEnd, "d, yyyy", opts)}`
-      }
-      if (isSameYear(start, rangeEnd)) {
-        return `${format(start, "MMM d", opts)} - ${format(rangeEnd, "MMM d, yyyy", opts)}`
-      }
-      return `${format(start, "MMM d, yyyy", opts)} - ${format(rangeEnd, "MMM d, yyyy", opts)}`
-    },
-    formatEventTime: (start, end, allDay, opts) => {
-      if (allDay) return cfg.labels.allDay
-      const fmt = cfg.formats.eventTime
-      // Multi-day timed events carry the date on both sides. Compare calendar
-      // days off the last rendered instant (end is exclusive, so a 14:00 to
-      // midnight event still ends on the start day). Elapsed ms would miss an
-      // exactly-24h event and a DST day that only runs 23 hours.
-      const lastInstant =
-        end.getTime() - 1 >= start.getTime() ? subMilliseconds(end, 1) : start
-      if (format(start, "yyyy-MM-dd") !== format(lastInstant, "yyyy-MM-dd")) {
-        return `${format(start, `MMM d, ${fmt}`, opts)} - ${format(end, `MMM d, ${fmt}`, opts)}`
-      }
-      return `${format(start, fmt, opts)} - ${format(end, fmt, opts)}`
-    },
-    formatDayRange: (range, opts) => {
-      // subMilliseconds keeps the zoned date type, same reason as formatTitle
-      const rangeEnd = subMilliseconds(range.end, 1)
-      return `${format(range.start, "MMM d", opts)} - ${format(rangeEnd, "MMM d", opts)}`
-    },
-  }
-}
-
-const DEFAULT_EVENT_CALENDAR_I18N: EventCalendarI18nConfig = {
-  labels: DEFAULT_LABELS,
-  viewNames: DEFAULT_VIEW_NAMES,
-  formats: DEFAULT_FORMATS,
-  functions: makeDefaultFunctions({
-    labels: DEFAULT_LABELS,
-    formats: DEFAULT_FORMATS,
-  }),
-}
-
-/**
- * One level deeper than `Partial`, because the merge below is per nested
- * section: overriding a single label must not force a consumer to restate the
- * other 22. Unknown keys are still rejected by the excess property check.
- */
-type EventCalendarI18nOverrides = {
-  [K in keyof EventCalendarI18nConfig]?: Partial<EventCalendarI18nConfig[K]>
-}
-
-/**
- * Shallow merge per nested object, matching the filters.tsx i18n contract:
- * a partial override replaces individual keys, never whole sections. Default
- * functions are re-bound to the MERGED labels/formats; explicit `functions`
- * overrides still win.
- */
-function mergeEventCalendarI18n(
-  overrides?: EventCalendarI18nOverrides
-): EventCalendarI18nConfig {
-  if (!overrides) return DEFAULT_EVENT_CALENDAR_I18N
-  const labels = { ...DEFAULT_LABELS, ...overrides.labels }
-  const viewNames = { ...DEFAULT_VIEW_NAMES, ...overrides.viewNames }
-  const formats = { ...DEFAULT_FORMATS, ...overrides.formats }
-  return {
-    labels,
-    viewNames,
-    formats,
-    functions: {
-      ...makeDefaultFunctions({ labels, formats }),
-      ...overrides.functions,
-    },
-  }
-}
-
-export { DEFAULT_EVENT_CALENDAR_I18N, mergeEventCalendarI18n }
-export type { EventCalendarI18nConfig, EventCalendarI18nOverrides }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-lib.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-lib.tsx
deleted file mode 100644
index 2130432..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-lib.tsx
+++ /dev/null
@@ -1,677 +0,0 @@
-import { expandRecurrence } from "@/components/reui/event-calendar/event-calendar-recurrence"
-import type {
-  CalendarEvent,
-  CalendarView,
-  EventCalendarDateRange,
-  EventCalendarOccurrence,
-  EventCalendarOffDaysConfig,
-  EventCalendarResource,
-  EventCalendarSegment,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { TZDate } from "@date-fns/tz"
-import {
-  addDays,
-  addMonths,
-  addWeeks,
-  differenceInCalendarDays,
-  differenceInMinutes,
-  format,
-  startOfDay,
-  startOfMonth,
-  startOfWeek,
-} from "date-fns"
-
-type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6
-
-/** Packing-effective minimum in minutes so tiny events do not stack invisibly. */
-const MIN_PACK_SLOT = 30
-
-/** The instant re-expressed in the display time zone (TZDate extends Date). */
-function toZoned(date: Date, timeZone: string): TZDate {
-  return new TZDate(date.getTime(), timeZone)
-}
-
-/** Zoned midnight of the day containing the instant. */
-function zonedStartOfDay(date: Date, timeZone: string): TZDate {
-  return startOfDay(toZoned(date, timeZone))
-}
-
-/** Stable per-day key in the display time zone. */
-function getDayKey(date: Date, timeZone: string): string {
-  return format(toZoned(date, timeZone), "yyyy-MM-dd")
-}
-
-/** Day length in minutes; 1380/1500 on DST transition days - never assume 1440. */
-function getDayTotalMinutes(dayStart: Date, timeZone: string): number {
-  const next = zonedStartOfDay(
-    addDays(toZoned(dayStart, timeZone), 1),
-    timeZone
-  )
-  return differenceInMinutes(next, dayStart)
-}
-
-function snapMinutes(minutes: number, snap: number): number {
-  return Math.round(minutes / snap) * snap
-}
-
-interface ViewRangeOptions {
-  timeZone: string
-  weekStartsOn: WeekStartsOn
-  dayCount: number
-  agendaDayCount: number
-  fixedWeeks: boolean
-}
-
-interface ViewDateRanges {
-  visibleRange: EventCalendarDateRange
-  activeRange: EventCalendarDateRange
-}
-
-function getViewDateRange(
-  view: CalendarView,
-  date: Date,
-  opts: ViewRangeOptions
-): ViewDateRanges {
-  const { timeZone, weekStartsOn, dayCount, agendaDayCount, fixedWeeks } = opts
-  const zoned = toZoned(date, timeZone)
-
-  if (view === "month") {
-    const activeStart = startOfMonth(zoned)
-    const activeEnd = startOfMonth(addMonths(zoned, 1))
-    const visibleStart = startOfWeek(activeStart, { weekStartsOn })
-    let visibleEnd: Date
-    if (fixedWeeks) {
-      visibleEnd = addDays(visibleStart, 42)
-    } else {
-      visibleEnd = startOfWeek(addDays(activeEnd, -1), { weekStartsOn })
-      visibleEnd = addWeeks(visibleEnd, 1)
-    }
-    return {
-      activeRange: { start: activeStart, end: activeEnd },
-      visibleRange: { start: visibleStart, end: visibleEnd },
-    }
-  }
-
-  if (view === "week") {
-    const start = startOfWeek(zoned, { weekStartsOn })
-    const range = { start, end: addWeeks(start, 1) }
-    return { activeRange: range, visibleRange: range }
-  }
-
-  if (view === "day" || view === "resource") {
-    const start = startOfDay(zoned)
-    const range = { start, end: addDays(start, 1) }
-    return { activeRange: range, visibleRange: range }
-  }
-
-  if (view === "days") {
-    const start = startOfDay(zoned)
-    const range = { start, end: addDays(start, Math.max(1, dayCount)) }
-    return { activeRange: range, visibleRange: range }
-  }
-
-  // agenda
-  const start = startOfDay(zoned)
-  const range = { start, end: addDays(start, Math.max(1, agendaDayCount)) }
-  return { activeRange: range, visibleRange: range }
-}
-
-/** Day of month of the last day of the month containing the zoned date. */
-function lastDayOfZonedMonth(date: Date): number {
-  return addDays(startOfMonth(addMonths(date, 1)), -1).getDate()
-}
-
-/** The anchor date stepped one period forward or backward for the view. */
-function stepDate(
-  view: CalendarView,
-  date: Date,
-  direction: 1 | -1,
-  opts: Pick<ViewRangeOptions, "timeZone" | "dayCount" | "agendaDayCount">
-): Date {
-  const zoned = toZoned(date, opts.timeZone)
-  if (view === "month") {
-    const stepped = addMonths(zoned, direction)
-    // addMonths clamps the day down into a shorter month and never restores
-    // it, so next-then-prev from the 31st would leave the anchor on the 28th.
-    // Sticking a month end to the target month's end keeps stepping
-    // invertible, which matters because the anchor is what day and week view
-    // open on after a month navigation.
-    if (zoned.getDate() !== lastDayOfZonedMonth(zoned)) return stepped
-    return addDays(stepped, lastDayOfZonedMonth(stepped) - stepped.getDate())
-  }
-  if (view === "week") return addWeeks(zoned, direction)
-  if (view === "day" || view === "resource") return addDays(zoned, direction)
-  if (view === "days")
-    return addDays(zoned, direction * Math.max(1, opts.dayCount))
-  return addDays(zoned, direction * Math.max(1, opts.agendaDayCount))
-}
-
-function rangesIntersect(
-  a: EventCalendarDateRange,
-  b: EventCalendarDateRange
-): boolean {
-  return a.start < b.end && a.end > b.start
-}
-
-function eventsOverlap(
-  a: { start: Date; end: Date },
-  b: { start: Date; end: Date }
-): boolean {
-  return a.start < b.end && a.end > b.start
-}
-
-/**
- * The one canonical multi-day segmentation. Splits an occurrence into per-day
- * segments clamped to the range. Rules (unit-tested in M1): exclusive end - an
- * event ending exactly at zoned midnight emits NO segment for that day;
- * zero-duration events emit one min-height segment; allDay occurrences walk
- * the same absolute instants as timed ones and only drop startMin/endMin, so
- * their bounds have to already BE display-zone midnights (see
- * CalendarEvent.allDay) or the bar paints on the wrong days.
- */
-function segmentOccurrence<TData>(
-  occurrence: EventCalendarOccurrence<TData>,
-  range: EventCalendarDateRange,
-  timeZone: string
-): EventCalendarSegment<TData>[] {
-  const occStart = occurrence.start
-  const occEnd = occurrence.end
-  const isZeroLength = occEnd.getTime() === occStart.getTime()
-
-  const clampStart = occStart > range.start ? occStart : range.start
-  const clampEnd = occEnd < range.end ? occEnd : range.end
-  if (clampEnd < clampStart) return []
-  if (clampEnd.getTime() === clampStart.getTime() && !isZeroLength) return []
-
-  const segments: EventCalendarSegment<TData>[] = []
-  let cursor = zonedStartOfDay(clampStart, timeZone)
-
-  while (cursor < clampEnd || (isZeroLength && segments.length === 0)) {
-    const next = zonedStartOfDay(
-      addDays(toZoned(cursor, timeZone), 1),
-      timeZone
-    )
-    const segStart = clampStart > cursor ? clampStart : cursor
-    const segEnd = clampEnd < next ? clampEnd : next
-
-    const emptySeg = segEnd.getTime() <= segStart.getTime()
-    if (!emptySeg || isZeroLength) {
-      const isStart = segStart.getTime() === occStart.getTime()
-      const isEnd = segEnd.getTime() === occEnd.getTime()
-      segments.push({
-        occurrence,
-        day: cursor,
-        isStart,
-        isEnd,
-        continuesBefore: !isStart,
-        continuesAfter: !isEnd,
-        startMin: occurrence.allDay
-          ? undefined
-          : differenceInMinutes(segStart, cursor),
-        endMin: occurrence.allDay
-          ? undefined
-          : Math.max(
-              differenceInMinutes(segEnd, cursor),
-              differenceInMinutes(segStart, cursor)
-            ),
-      })
-    }
-    if (isZeroLength) break
-    cursor = next
-  }
-
-  return segments
-}
-
-/** True when the occurrence should render as a bar (all-day row / month lanes). */
-function isBarOccurrence(
-  occurrence: EventCalendarOccurrence,
-  timeZone?: string
-): boolean {
-  return occurrence.allDay || spansMultipleDays(occurrence, timeZone)
-}
-
-function spansMultipleDays(
-  occ: { start: Date; end: Date },
-  timeZone?: string
-): boolean {
-  // An event ending exactly at the next midnight is still single-day
-  // (exclusive end), so compare against a strictly-later instant. The
-  // yardstick is the length of the day the event starts on, never a flat 24h:
-  // a fall-back day is 25h long, and a 00:00-to-00:00 shift on it is still one
-  // calendar day that belongs in the hour track, not in the all-day row.
-  // Without a display zone the dates answer in their own frame (TZDate) or in
-  // the host zone.
-  const dayStart = startOfDay(
-    timeZone ? toZoned(occ.start, timeZone) : occ.start
-  )
-  const nextDayStart = startOfDay(addDays(dayStart, 1))
-  return (
-    occ.end.getTime() - occ.start.getTime() >
-    nextDayStart.getTime() - dayStart.getTime()
-  )
-}
-
-interface PackedPosition {
-  column: number
-  columnCount: number
-  columnSpan: number
-}
-
-/**
- * Google-style overlap packing for one day's timed segments.
- * Mutates column/columnCount/columnSpan on the segments, in place.
- * z resolution happens at render: event.zIndex verbatim, else 10 + column.
- */
-function packTimedSegments<TData>(
-  segments: EventCalendarSegment<TData>[]
-): void {
-  if (segments.length === 0) return
-
-  type Working = {
-    seg: EventCalendarSegment<TData>
-    startMin: number
-    effEnd: number
-  }
-
-  const items: Working[] = segments
-    .map((seg) => {
-      const startMin = seg.startMin ?? 0
-      const endMin = seg.endMin ?? startMin
-      return {
-        seg,
-        startMin,
-        effEnd: Math.max(endMin, startMin + MIN_PACK_SLOT),
-      }
-    })
-    .sort(
-      (a, b) =>
-        a.startMin - b.startMin ||
-        b.effEnd - b.startMin - (a.effEnd - a.startMin) ||
-        a.seg.occurrence.key.localeCompare(b.seg.occurrence.key)
-    )
-
-  // Sweep into connected clusters
-  const clusters: Working[][] = []
-  let current: Working[] = []
-  let clusterEnd = -Infinity
-  for (const item of items) {
-    if (item.startMin >= clusterEnd) {
-      current = []
-      clusters.push(current)
-      clusterEnd = -Infinity
-    }
-    current.push(item)
-    clusterEnd = Math.max(clusterEnd, item.effEnd)
-  }
-
-  for (const cluster of clusters) {
-    // Greedy column assignment
-    const colEnds: number[] = []
-    const byColumn = new Map<number, Working[]>()
-    for (const item of cluster) {
-      let col = colEnds.findIndex((end) => end <= item.startMin)
-      if (col === -1) {
-        col = colEnds.length
-        colEnds.push(0)
-      }
-      colEnds[col] = item.effEnd
-      item.seg.column = col
-      const bucket = byColumn.get(col) ?? []
-      bucket.push(item)
-      byColumn.set(col, bucket)
-    }
-    const columnCount = colEnds.length
-
-    // Partial-overlap expansion: widen rightward into free columns
-    for (const item of cluster) {
-      let span = 1
-      const col = item.seg.column ?? 0
-      while (col + span < columnCount) {
-        const occupants = byColumn.get(col + span) ?? []
-        const blocked = occupants.some(
-          (o) => o.startMin < item.effEnd && o.effEnd > item.startMin
-        )
-        if (blocked) break
-        span++
-      }
-      item.seg.columnCount = columnCount
-      item.seg.columnSpan = span
-    }
-  }
-}
-
-/**
- * Greedy lane packing for bar segments within one week row (7 columns).
- * Mutates lane/rowIndex/colStart/colSpan on the segments, in place.
- */
-/**
- * Build the laned month-row bars for one week: consecutive-day segments of
- * the same occurrence merge into ONE bar (colStart -> colSpan) stacked into
- * lanes. Returns NEW segment objects - the shared per-day segments (also
- * rendered by the all-day rows and day cells) must stay pristine: mutating
- * their isEnd/continues flags gave the first-day chip a whole-bar shape and
- * a bogus end resize handle in the week all-day row, where dragging it
- * collapsed the event to a single day.
- */
-function packWeekRowLanes<TData>(
-  segments: EventCalendarSegment<TData>[],
-  rowIndex: number,
-  rowStart: Date,
-  timeZone: string
-): EventCalendarSegment<TData>[] {
-  type Bar = {
-    seg: EventCalendarSegment<TData>
-    colStart: number
-    colSpan: number
-    isStart: boolean
-    isEnd: boolean
-    lane: number
-  }
-
-  const bars: Bar[] = segments.map((seg) => {
-    const dayIndex = Math.round(
-      (zonedStartOfDay(seg.day, timeZone).getTime() -
-        zonedStartOfDay(rowStart, timeZone).getTime()) /
-        (24 * 60 * 60 * 1000)
-    )
-    return {
-      seg,
-      colStart: Math.max(0, Math.min(6, dayIndex)),
-      colSpan: 1,
-      isStart: seg.isStart,
-      isEnd: seg.isEnd,
-      lane: 0,
-    }
-  })
-
-  // Merge consecutive-day segments of the same occurrence into one bar per row
-  const merged = new Map<string, Bar>()
-  for (const bar of bars) {
-    const key = bar.seg.occurrence.key
-    const existing = merged.get(key)
-    if (existing) {
-      const start = Math.min(existing.colStart, bar.colStart)
-      const end = Math.max(
-        existing.colStart + existing.colSpan,
-        bar.colStart + bar.colSpan
-      )
-      existing.colStart = start
-      existing.colSpan = end - start
-      existing.isStart = existing.isStart || bar.isStart
-      existing.isEnd = existing.isEnd || bar.isEnd
-    } else {
-      merged.set(key, bar)
-    }
-  }
-
-  const rowBars = Array.from(merged.values()).sort(
-    (a, b) =>
-      a.colStart - b.colStart ||
-      b.colSpan - a.colSpan ||
-      a.seg.occurrence.key.localeCompare(b.seg.occurrence.key)
-  )
-
-  const lanes: boolean[][] = []
-  for (const bar of rowBars) {
-    let lane = 0
-    for (;;) {
-      lanes[lane] ??= new Array(7).fill(false)
-      const row = lanes[lane]
-      let free = true
-      for (let c = bar.colStart; c < bar.colStart + bar.colSpan; c++) {
-        if (row[c]) {
-          free = false
-          break
-        }
-      }
-      if (free) break
-      lane++
-    }
-    for (let c = bar.colStart; c < bar.colStart + bar.colSpan; c++) {
-      lanes[lane][c] = true
-    }
-    bar.lane = lane
-  }
-
-  return rowBars.map((bar) => ({
-    ...bar.seg,
-    isStart: bar.isStart,
-    isEnd: bar.isEnd,
-    continuesBefore: !bar.isStart,
-    continuesAfter: !bar.isEnd,
-    lane: bar.lane,
-    rowIndex,
-    colStart: bar.colStart,
-    colSpan: bar.colSpan,
-  }))
-}
-
-interface EventCalendarDayBucket<TData = unknown> {
-  allDay: EventCalendarSegment<TData>[]
-  timed: EventCalendarSegment<TData>[]
-}
-
-interface EventCalendarWeekRow<TData = unknown> {
-  rowIndex: number
-  rowStart: Date
-  /** Laned bar segments (one per occurrence per row). */
-  bars: EventCalendarSegment<TData>[]
-}
-
-interface EventCalendarIndex<TData = unknown> {
-  occurrences: EventCalendarOccurrence<TData>[]
-  byDay: Map<string, EventCalendarDayBucket<TData>>
-  weekRows: EventCalendarWeekRow<TData>[]
-}
-
-interface BuildIndexOptions<TData> {
-  timeZone: string
-  weekStartsOn: WeekStartsOn
-  eventOrder?: (
-    a: EventCalendarOccurrence<TData>,
-    b: EventCalendarOccurrence<TData>
-  ) => number
-  getOccurrences?: (
-    event: CalendarEvent<TData>,
-    range: EventCalendarDateRange,
-    ctx: { timeZone: string }
-  ) => Array<{ start: Date; end: Date }> | null
-}
-
-function defaultEventOrder(
-  a: EventCalendarOccurrence,
-  b: EventCalendarOccurrence
-): number {
-  return (
-    a.start.getTime() - b.start.getTime() ||
-    b.end.getTime() -
-      b.start.getTime() -
-      (a.end.getTime() - a.start.getTime()) ||
-    a.key.localeCompare(b.key)
-  )
-}
-
-function buildEventIndex<TData>(
-  events: CalendarEvent<TData>[],
-  visibleRange: EventCalendarDateRange,
-  opts: BuildIndexOptions<TData>
-): EventCalendarIndex<TData> {
-  const { timeZone, weekStartsOn } = opts
-  const order = opts.eventOrder ?? defaultEventOrder
-
-  // RECURRENCE-ID override replacement: an event carrying recurringEventId +
-  // originalStart is an edited single occurrence of that series. The parent's
-  // expansion drops the replaced instant; the override renders as its own
-  // occurrence through the normal path below.
-  const overrideTimes = new Map<string, Set<number>>()
-  for (const event of events) {
-    if (!event.recurringEventId || !event.originalStart) continue
-    let times = overrideTimes.get(event.recurringEventId)
-    if (!times) overrideTimes.set(event.recurringEventId, (times = new Set()))
-    times.add(event.originalStart.getTime())
-  }
-
-  const occurrences: EventCalendarOccurrence<TData>[] = []
-  for (const event of events) {
-    const replaced = overrideTimes.get(event.id)
-    const custom = opts.getOccurrences?.(event, visibleRange, { timeZone })
-    if (custom) {
-      custom.forEach((occ, i) => {
-        if (replaced?.has(occ.start.getTime())) return
-        if (!rangesIntersect({ start: occ.start, end: occ.end }, visibleRange))
-          return
-        occurrences.push({
-          key: `${event.id}::${occ.start.toISOString()}`,
-          eventId: event.id,
-          event,
-          start: occ.start,
-          end: occ.end,
-          allDay: event.allDay ?? false,
-          isRecurring: true,
-          recurrenceIndex: i,
-        })
-      })
-      continue
-    }
-    const expanded = expandRecurrence(event, visibleRange, { timeZone })
-    occurrences.push(
-      ...(replaced
-        ? expanded.filter((occ) => !replaced.has(occ.start.getTime()))
-        : expanded)
-    )
-  }
-  occurrences.sort(order)
-
-  const byDay = new Map<string, EventCalendarDayBucket<TData>>()
-  const barSegmentsByRow = new Map<number, EventCalendarSegment<TData>[]>()
-  const firstRowStart = startOfWeek(toZoned(visibleRange.start, timeZone), {
-    weekStartsOn,
-  })
-
-  for (const occurrence of occurrences) {
-    const segments = segmentOccurrence(occurrence, visibleRange, timeZone)
-    const bar = isBarOccurrence(occurrence, timeZone)
-    for (const seg of segments) {
-      const key = getDayKey(seg.day, timeZone)
-      let bucket = byDay.get(key)
-      if (!bucket) {
-        bucket = { allDay: [], timed: [] }
-        byDay.set(key, bucket)
-      }
-      if (bar) {
-        bucket.allDay.push(seg)
-        // calendar-day math, not a fixed 168h divisor: DST transition weeks
-        // are 167/169h long and the fixed divisor mis-buckets every later
-        // Sunday one row early (which then clamps into the wrong column)
-        const rowIndex = Math.floor(
-          differenceInCalendarDays(toZoned(seg.day, timeZone), firstRowStart) /
-            7
-        )
-        const rowBucket = barSegmentsByRow.get(rowIndex) ?? []
-        rowBucket.push(seg)
-        barSegmentsByRow.set(rowIndex, rowBucket)
-      } else {
-        bucket.timed.push(seg)
-      }
-    }
-  }
-
-  for (const bucket of byDay.values()) {
-    packTimedSegments(bucket.timed)
-  }
-
-  const weekRows: EventCalendarWeekRow<TData>[] = []
-  for (const [rowIndex, segs] of barSegmentsByRow) {
-    const rowStart = addWeeks(firstRowStart, rowIndex)
-    weekRows.push({
-      rowIndex,
-      rowStart,
-      bars: packWeekRowLanes(segs, rowIndex, rowStart, timeZone),
-    })
-  }
-  weekRows.sort((a, b) => a.rowIndex - b.rowIndex)
-
-  return { occurrences, byDay, weekRows }
-}
-
-/** Cache key for index memoization; cheap string compare. */
-function getRangeKey(range: EventCalendarDateRange): string {
-  return `${range.start.getTime()}-${range.end.getTime()}`
-}
-
-/** Depth-first flatten of the resource tree (parents included). */
-function flattenResources(
-  resources: EventCalendarResource[],
-  depth = 0
-): Array<{ resource: EventCalendarResource; depth: number }> {
-  const rows: Array<{ resource: EventCalendarResource; depth: number }> = []
-  for (const resource of resources) {
-    rows.push({ resource, depth })
-    if (resource.children?.length) {
-      rows.push(...flattenResources(resource.children, depth + 1))
-    }
-  }
-  return rows
-}
-
-const DEFAULT_WEEKEND_DAYS = [0, 6]
-
-/**
- * Resolves whether a day is an off day (non-working) in the display zone.
- * Callers pass the calendar's own weekendDays so the shading cannot contradict
- * the weekend the rest of the calendar renders; an explicit offDays.weekendDays
- * still wins over it.
- */
-function resolveOffDay(
-  day: Date,
-  timeZone: string,
-  config: boolean | EventCalendarOffDaysConfig | undefined,
-  defaultWeekendDays?: number[]
-): boolean {
-  if (!config) return false
-  const resolved: EventCalendarOffDaysConfig = config === true ? {} : config
-  const weekendDays =
-    resolved.weekendDays ?? defaultWeekendDays ?? DEFAULT_WEEKEND_DAYS
-  const zoned = toZoned(day, timeZone)
-  if (weekendDays.includes(zoned.getDay())) return true
-  if (resolved.dates?.length) {
-    const key = getDayKey(day, timeZone)
-    if (resolved.dates.some((date) => getDayKey(date, timeZone) === key)) {
-      return true
-    }
-  }
-  return resolved.isOffDay?.(day) ?? false
-}
-
-export {
-  buildEventIndex,
-  defaultEventOrder,
-  eventsOverlap,
-  flattenResources,
-  getDayKey,
-  getDayTotalMinutes,
-  getRangeKey,
-  getViewDateRange,
-  isBarOccurrence,
-  MIN_PACK_SLOT,
-  packTimedSegments,
-  packWeekRowLanes,
-  rangesIntersect,
-  resolveOffDay,
-  segmentOccurrence,
-  snapMinutes,
-  spansMultipleDays,
-  stepDate,
-  toZoned,
-  zonedStartOfDay,
-}
-export type {
-  BuildIndexOptions,
-  EventCalendarDayBucket,
-  EventCalendarIndex,
-  EventCalendarWeekRow,
-  ViewDateRanges,
-  ViewRangeOptions,
-  WeekStartsOn,
-}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-month-view.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-month-view.tsx
deleted file mode 100644
index 03bd30e..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-month-view.tsx
+++ /dev/null
@@ -1,1289 +0,0 @@
-"use client"
-
-import {
-  useCallback,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type Ref,
-} from "react"
-import {
-  EventCalendarViewContext,
-  useEventCalendar,
-  useEventCalendarDay,
-  useEventCalendarSelector,
-  useEventCalendarSettings,
-  useEventCalendarViewConfig,
-  useEventCalendarViewSettings,
-  useEventCalendarWeek,
-} from "@/components/reui/event-calendar/event-calendar"
-import {
-  useEventCalendarGestures,
-  wasRecentChipPress,
-  wasRecentDrag,
-} from "@/components/reui/event-calendar/event-calendar-dnd"
-import {
-  EVENT_CALENDAR_GHOST,
-  EVENT_CALENDAR_SLOT_DRAFT,
-  EventCalendarEvent,
-} from "@/components/reui/event-calendar/event-calendar-event"
-import {
-  getDayKey,
-  getRangeKey,
-  resolveOffDay,
-  toZoned,
-  zonedStartOfDay,
-} from "@/components/reui/event-calendar/event-calendar-lib"
-import type {
-  EventCalendarDateRange,
-  EventCalendarDragState,
-  EventCalendarEventId,
-  EventCalendarSegment,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { addDays, format, getWeek } from "date-fns"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@evobgp/ui/components/popover"
-import { ScrollArea } from "@evobgp/ui/components/scroll-area"
-import { PlusIcon } from "lucide-react"
-
-// Layout-effect on the client (measure before paint, no flash), plain effect on
-// the server (never runs there) to avoid the SSR useLayoutEffect warning.
-const useIsoLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect
-
-// An occurrence key encodes the start instant and is also the chip's React key,
-// so committing a move re-keys the chip: React remounts it and the browser
-// drops focus to <body>. The chip that owns focus is recorded here so the cell
-// rendering its replacement can hand focus back. Module scope because the drop
-// can land in a different cell than the one the chip left, and only one element
-// holds focus at a time anyway.
-let focusedChip: {
-  node: HTMLElement
-  eventId: EventCalendarEventId
-  recurrenceIndex?: number
-} | null = null
-
-/** Give focus back to the recorded chip's replacement, if `root` renders it. */
-function restoreChipFocus(
-  root: HTMLElement | null,
-  segments: EventCalendarSegment[]
-) {
-  const pending = focusedChip
-  // Only a chip removed WHILE focused needs help: a node still in the tree, or
-  // a focus that has already moved on by itself, is left alone.
-  if (!root || !pending || pending.node.isConnected) return
-  const active = document.activeElement
-  if (active && active !== document.body) return
-  const index = segments.findIndex(
-    (segment) =>
-      segment.occurrence.eventId === pending.eventId &&
-      segment.occurrence.recurrenceIndex === pending.recurrenceIndex
-  )
-  if (index < 0) return
-  const chip = root.querySelectorAll<HTMLElement>(
-    "[data-slot=event-calendar-event]"
-  )[index]
-  if (!chip) return
-  // cleared first: focus() re-records through the new chip's own onFocus
-  focusedChip = null
-  chip.focus()
-}
-
-interface EventCalendarMonthViewProps extends useRender.ComponentProps<"div"> {
-  maxEventsPerCell?: number | "auto"
-}
-
-function EventCalendarMonthView({
-  className,
-  render,
-  maxEventsPerCell,
-  ...props
-}: EventCalendarMonthViewProps) {
-  const instance = useEventCalendar()
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const visibleRange = useEventCalendarSelector<
-    unknown,
-    EventCalendarDateRange
-  >((state) => state.visibleRange, {
-    isEqual: (a, b) => getRangeKey(a) === getRangeKey(b),
-  })
-  const anchorDate = useEventCalendarSelector((state) => state.date)
-
-  const { effective } = useEventCalendarViewSettings()
-  const weeks = useMemo(() => {
-    const days: Date[] = []
-    let cursor = zonedStartOfDay(visibleRange.start, settings.timeZone)
-    while (cursor < visibleRange.end) {
-      days.push(cursor)
-      cursor = zonedStartOfDay(
-        addDays(toZoned(cursor, settings.timeZone), 1),
-        settings.timeZone
-      )
-    }
-    const rows: Date[][] = []
-    for (let i = 0; i < days.length; i += 7) rows.push(days.slice(i, i + 7))
-    if (effective.weekends) return rows
-    return rows.map((row) =>
-      row.filter(
-        (day) =>
-          !settings.weekendDays.includes(
-            toZoned(day, settings.timeZone).getDay()
-          )
-      )
-    )
-  }, [
-    visibleRange,
-    settings.timeZone,
-    settings.weekendDays,
-    effective.weekends,
-  ])
-
-  const headerDays = weeks[0] ?? []
-  const title = settings.i18n.functions.formatTitle("month", {
-    date: toZoned(anchorDate, settings.timeZone),
-    activeRange: instance.api.getActiveRange(),
-    visibleRange,
-    locale: settings.locale,
-  })
-
-  const gridTemplateColumns = `${effective.weekNumbers ? "var(--ec-week-number-w, 2.75rem) " : ""}repeat(${headerDays.length}, minmax(0, 1fr))`
-  const cap = maxEventsPerCell ?? viewConfig.maxEventsPerCell
-  const contained = viewConfig.scrollMode !== "page"
-
-  // "auto" fits as many event rows as the cell height allows and rolls the rest
-  // into "+N more". Only the contained mode gives a cell a bounded height to
-  // measure; page mode grows to fit, so "auto" there keeps the fixed fallback.
-  const autoFit = cap === "auto" && contained
-  // slotProbe resolves the event-row height (--ec-month-bar-h) to px, honoring
-  // the current font size and any consumer override; contentProbe is the first
-  // cell's flex-1 content area, whose height is the event space per cell.
-  const slotProbeRef = useRef<HTMLDivElement | null>(null)
-  const contentProbeRef = useRef<HTMLDivElement | null>(null)
-  const [autoCap, setAutoCap] = useState<number | null>(null)
-  const measureCap = useCallback(() => {
-    const content = contentProbeRef.current
-    const slot = slotProbeRef.current
-    if (!content || !slot) return
-    const laneH = slot.getBoundingClientRect().height
-    if (laneH <= 0) return
-    const cs = getComputedStyle(content)
-    const inner = content.clientHeight - (parseFloat(cs.paddingTop) || 0)
-    const gap = parseFloat(cs.rowGap) || 0
-    // N rows occupy N*laneH - gap (the last row has no trailing gap)
-    setAutoCap(Math.max(1, Math.floor((inner + gap) / laneH)))
-  }, [])
-  useIsoLayoutEffect(() => {
-    if (!autoFit) {
-      setAutoCap(null)
-      return
-    }
-    const content = contentProbeRef.current
-    if (!content || typeof ResizeObserver === "undefined") return
-    measureCap()
-    const observer = new ResizeObserver(measureCap)
-    observer.observe(content)
-    return () => observer.disconnect()
-    // re-observe the first cell after a re-layout (row count or month change)
-  }, [autoFit, measureCap, weeks.length, anchorDate])
-  const resolvedCap = cap === "auto" ? (autoFit ? (autoCap ?? 3) : 3) : cap
-
-  const defaultProps = {
-    "data-slot": "event-calendar-month-view",
-    "data-view": "month",
-    role: "grid",
-    "aria-label": title,
-    className: cn(
-      "flex flex-col border-t",
-      contained && "min-h-0 flex-1 overflow-hidden",
-      viewConfig.classNames?.monthView,
-      className
-    ),
-    children: (
-      <>
-        <div
-          role="row"
-          data-slot="event-calendar-month-header"
-          // @container scopes the narrow-label breakpoint to the header row
-          className={cn(
-            "@container grid border-b",
-            viewConfig.classNames?.monthHeader
-          )}
-          style={{ gridTemplateColumns }}
-        >
-          {effective.weekNumbers && (
-            <div
-              role="columnheader"
-              aria-hidden
-              className={cn(
-                "border-e px-2 py-1.5",
-                viewConfig.classNames?.weekNumber
-              )}
-            />
-          )}
-          {headerDays.map((day) => (
-            <div
-              key={day.getTime()}
-              role="columnheader"
-              className={cn(
-                "text-muted-foreground truncate px-2 py-1.5 font-medium",
-                viewConfig.classNames?.monthDayHeader
-              )}
-            >
-              {viewConfig.renderDayHeader?.({
-                day,
-                view: "month",
-                isToday:
-                  getDayKey(day, settings.timeZone) ===
-                  getDayKey(new Date(), settings.timeZone),
-              }) ?? (
-                <>
-                  <span className="@max-[36rem]:hidden">
-                    {format(
-                      toZoned(day, settings.timeZone),
-                      settings.i18n.formats.monthDayHeader,
-                      { locale: settings.locale }
-                    )}
-                  </span>
-                  <span className="hidden @max-[36rem]:inline">
-                    {format(
-                      toZoned(day, settings.timeZone),
-                      settings.i18n.formats.monthDayHeaderNarrow,
-                      { locale: settings.locale }
-                    )}
-                  </span>
-                </>
-              )}
-            </div>
-          ))}
-        </div>
-        <div
-          data-slot="event-calendar-month-body"
-          className={cn(
-            "grid",
-            contained && "min-h-0 flex-1",
-            viewConfig.classNames?.monthBody
-          )}
-          style={{
-            gridTemplateRows: contained
-              ? `repeat(${weeks.length}, minmax(0, 1fr))`
-              : `repeat(${weeks.length}, minmax(var(--ec-month-row-min-h, 8rem), auto))`,
-          }}
-        >
-          {weeks.map((week, rowIndex) => (
-            <EventCalendarMonthWeek
-              key={rowIndex}
-              week={week}
-              gridTemplateColumns={gridTemplateColumns}
-              showWeekNumber={effective.weekNumbers}
-              cap={resolvedCap}
-              autoFit={autoFit}
-              contentRef={rowIndex === 0 ? contentProbeRef : undefined}
-            />
-          ))}
-        </div>
-        {autoFit && (
-          <div
-            ref={slotProbeRef}
-            aria-hidden
-            className="pointer-events-none invisible absolute h-[var(--ec-month-bar-h,1.75rem)] w-0"
-          />
-        )}
-      </>
-    ),
-  }
-
-  return (
-    <EventCalendarViewContext.Provider value={{ view: "month" }}>
-      {useRender({
-        defaultTagName: "div",
-        render,
-        props: mergeProps<"div">(defaultProps, props),
-      })}
-    </EventCalendarViewContext.Provider>
-  )
-}
-
-/**
- * One month week row. Multi-day / all-day events render as CONTINUOUS bars in
- * an overlay grid that spans day columns (colStart -> colSpan) and stacks by
- * lane; single-day timed events render inside each cell below the reserved bar
- * lanes. This is what makes a cross-day event read as one whole block instead
- * of a chip repeated per cell.
- */
-function EventCalendarMonthWeek({
-  week,
-  gridTemplateColumns,
-  showWeekNumber,
-  cap,
-  autoFit,
-  contentRef,
-}: {
-  week: Date[]
-  gridTemplateColumns: string
-  showWeekNumber: boolean
-  cap: number
-  autoFit: boolean
-  /** Set on the first week only: forwarded to its first cell's content area so
-   *  the view can measure the per-cell event height for "auto". */
-  contentRef?: Ref<HTMLDivElement>
-}) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const { bars, rowStart } = useEventCalendarWeek(week[0])
-  const colOffset = showWeekNumber ? 1 : 0
-  const dayMs = 86400000
-  const rowStartMs = zonedStartOfDay(
-    rowStart ?? week[0],
-    settings.timeZone
-  ).getTime()
-  // Day offsets from the TRUE row start (0-6) for each visible column, so a
-  // weekends-hidden month still places bars on the right days.
-  const offsets = week.map((d) =>
-    Math.round(
-      (zonedStartOfDay(d, settings.timeZone).getTime() - rowStartMs) / dayMs
-    )
-  )
-  /** Clamp a day-offset span onto the visible columns; null = fully hidden. */
-  const gridPos = (colStart: number, colSpan: number) => {
-    let start = -1
-    let end = -1
-    for (let o = colStart; o < colStart + colSpan; o++) {
-      const col = offsets.indexOf(o)
-      if (col === -1) continue
-      if (start === -1) start = col
-      end = col
-    }
-    return start === -1 ? null : { col: start, span: end - start + 1 }
-  }
-  // bars fit within the cap; deeper lanes fall into each day's "+N more"
-  const visibleBars = bars.filter((b) => (b.lane ?? 0) < cap)
-  const covers = (b: EventCalendarSegment, dayOffset: number) =>
-    (b.colStart ?? 0) <= dayOffset &&
-    dayOffset < (b.colStart ?? 0) + (b.colSpan ?? 1)
-  // Occurrence keys of the bars hidden in each column (lane >= cap). Threaded to
-  // the cell so its "+N more" popover can list the hidden bars WITHOUT re-listing
-  // the visible ones (day buckets carry no lane, so the week row - which owns bar
-  // laning - is the only place that knows which bars are hidden).
-  const hiddenBarKeysByCol = week.map(
-    (_, col) =>
-      new Set(
-        bars
-          .filter((b) => (b.lane ?? 0) >= cap && covers(b, offsets[col]))
-          .map((b) => b.occurrence.key)
-      )
-  )
-
-  // Live move/resize ghost at the PROPOSED day span. Standardized treatment
-  // (EVENT_CALENDAR_GHOST): move = the event carried as a full clone, resize =
-  // the same clone with a dashed boundary; invalid adds destructive marking
-  // while the engine shows the not-allowed cursor + validation hint.
-  const dragGhost = useEventCalendarSelector<
-    unknown,
-    | (Pick<
-        EventCalendarDragState,
-        | "kind"
-        | "valid"
-        | "occurrence"
-        | "proposedStart"
-        | "proposedEnd"
-        | "proposedAllDay"
-      > & {
-        colStart: number
-        colSpan: number
-        isStart: boolean
-        isEnd: boolean
-        color?: string
-      })
-    | null
-  >(
-    (state) => {
-      const drag = state.drag
-      if (!drag) return null
-      const rowEndMs = rowStartMs + 7 * dayMs
-      const startDayMs = zonedStartOfDay(
-        drag.proposedStart,
-        settings.timeZone
-      ).getTime()
-      // exclusive end -> the last covered day
-      const lastDayMs = zonedStartOfDay(
-        new Date(drag.proposedEnd.getTime() - 1),
-        settings.timeZone
-      ).getTime()
-      if (startDayMs >= rowEndMs || lastDayMs < rowStartMs) return null
-      const startCol = Math.max(
-        0,
-        Math.round((startDayMs - rowStartMs) / dayMs)
-      )
-      const endCol = Math.min(6, Math.round((lastDayMs - rowStartMs) / dayMs))
-      if (endCol < startCol) return null
-      return {
-        kind: drag.kind,
-        valid: drag.valid,
-        occurrence: drag.occurrence,
-        proposedStart: drag.proposedStart,
-        proposedEnd: drag.proposedEnd,
-        proposedAllDay: drag.proposedAllDay,
-        colStart: startCol,
-        colSpan: endCol - startCol + 1,
-        isStart: startDayMs >= rowStartMs,
-        isEnd: lastDayMs < rowEndMs,
-        color: drag.occurrence.event.color,
-      }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.colStart === b.colStart &&
-          a.colSpan === b.colSpan &&
-          a.valid === b.valid &&
-          a.kind === b.kind &&
-          a.proposedAllDay === b.proposedAllDay &&
-          a.proposedStart.getTime() === b.proposedStart.getTime() &&
-          a.proposedEnd.getTime() === b.proposedEnd.getTime()),
-    }
-  )
-  const ghostPos = dragGhost
-    ? gridPos(dragGhost.colStart, dragGhost.colSpan)
-    : null
-  const ghostLane = dragGhost
-    ? (bars.find((b) => b.occurrence.key === dragGhost.occurrence.key)?.lane ??
-      0)
-    : 0
-  // A single-day timed MOVE is indicated INLINE in the target cell (a
-  // placeholder at the time-sorted position, rendered by EventCalendarMonthCell)
-  // rather than as a bar in this overlay, so only bar drags and every resize
-  // render the overlay ghost. Bars = all-day or multi-day (span > 1 day).
-  const ghostIsBar =
-    !!dragGhost &&
-    (dragGhost.kind !== "move" ||
-      dragGhost.proposedAllDay ||
-      dragGhost.proposedEnd.getTime() - dragGhost.proposedStart.getTime() >
-        dayMs)
-
-  return (
-    <div
-      role="row"
-      data-slot="event-calendar-month-row"
-      className={cn(
-        "relative grid min-h-0 border-b last:border-b-0",
-        viewConfig.classNames?.monthRow
-      )}
-      style={{ gridTemplateColumns }}
-    >
-      {showWeekNumber && (
-        <div
-          role="rowheader"
-          data-slot="event-calendar-week-number"
-          className={cn(
-            "text-muted-foreground border-e px-2 pt-1 tabular-nums",
-            viewConfig.classNames?.weekNumber
-          )}
-        >
-          {settings.i18n.labels.week(
-            getWeek(toZoned(week[0], settings.timeZone), {
-              // locale supplies firstWeekContainsDate, so a de/ISO calendar
-              // numbers the year-boundary weeks its own way instead of falling
-              // back to US numbering; weekStartsOn stays explicit so the number
-              // keeps matching the rendered grid
-              locale: settings.locale,
-              weekStartsOn: settings.weekStartsOn,
-            })
-          )}
-        </div>
-      )}
-      {week.map((day, col) => (
-        <EventCalendarMonthCell
-          key={day.getTime()}
-          day={day}
-          cap={cap}
-          // Reserve lane space only for bars that pass through THIS cell, so a
-          // short multi-day event does not push down timed events in unrelated
-          // cells of the same row. Reserve down to the deepest covering bar
-          // lane so timed events always sit below every bar in their own cell.
-          reservedLanes={visibleBars.reduce(
-            (max, b) =>
-              covers(b, offsets[col]) ? Math.max(max, (b.lane ?? 0) + 1) : max,
-            0
-          )}
-          hiddenBarKeys={hiddenBarKeysByCol[col]}
-          isLast={col === week.length - 1}
-          autoFit={autoFit}
-          contentRef={col === 0 ? contentRef : undefined}
-        />
-      ))}
-      {/* Continuous bar overlay: one element per bar, placed by grid-column so
-          a cross-day span is a single unbroken block. pointer-events pass
-          through the gaps to the cells below. NOT aria-hidden - these are the
-          real interactive bars. */}
-      {(visibleBars.length > 0 || (dragGhost && ghostPos && ghostIsBar)) && (
-        <div
-          data-slot="event-calendar-month-bar-overlay"
-          className={cn(
-            "pointer-events-none absolute inset-x-0 top-0 z-10 grid pt-1.5",
-            viewConfig.classNames?.monthBarOverlay
-          )}
-          style={{
-            gridTemplateColumns,
-            gridAutoRows: "var(--ec-month-bar-h, 1.75rem)",
-          }}
-        >
-          {visibleBars.map((bar) => {
-            const pos = gridPos(bar.colStart ?? 0, bar.colSpan ?? 1)
-            if (!pos) return null
-            return (
-              <div
-                key={bar.occurrence.key}
-                className={cn(
-                  "pointer-events-auto min-w-0 px-1",
-                  viewConfig.classNames?.monthBar
-                )}
-                style={{
-                  gridColumn: `${colOffset + pos.col + 1} / span ${pos.span}`,
-                  gridRow: (bar.lane ?? 0) + 1,
-                }}
-              >
-                {/* lane height minus the 2px inter-lane gap */}
-                <EventCalendarEvent
-                  segment={bar}
-                  className="h-[calc(var(--ec-month-bar-h,1.75rem)-0.125rem)]"
-                />
-              </div>
-            )
-          })}
-          {dragGhost && ghostPos && ghostIsBar && (
-            <div
-              aria-hidden
-              className={cn("min-w-0 px-1", viewConfig.classNames?.monthBar)}
-              style={{
-                gridColumn: `${colOffset + ghostPos.col + 1} / span ${ghostPos.span}`,
-                gridRow: ghostLane + 1,
-              }}
-            >
-              <div
-                data-slot="event-calendar-drag-ghost"
-                data-kind={dragGhost.kind}
-                data-drop-invalid={!dragGhost.valid || undefined}
-                className={cn(
-                  "h-[calc(var(--ec-month-bar-h,1.75rem)-0.125rem)]",
-                  dragGhost.kind === "move"
-                    ? // faint drop placeholder only: the cursor-attached
-                      // carry clone owns the visual during moves
-                      cn(
-                        EVENT_CALENDAR_GHOST.move,
-                        !dragGhost.valid && EVENT_CALENDAR_GHOST.invalid
-                      )
-                    : cn(
-                        EVENT_CALENDAR_GHOST.resize,
-                        !dragGhost.valid && EVENT_CALENDAR_GHOST.invalidResize
-                      ),
-                  viewConfig.classNames?.dragGhost
-                )}
-                style={
-                  {
-                    "--ec-event-color":
-                      dragGhost.color ?? "var(--color-primary)",
-                  } as CSSProperties
-                }
-              >
-                {dragGhost.kind !== "move" && (
-                  <EventCalendarEvent
-                    preview
-                    segment={{
-                      occurrence: {
-                        ...dragGhost.occurrence,
-                        start: dragGhost.proposedStart,
-                        end: dragGhost.proposedEnd,
-                      },
-                      day: week[ghostPos.col] ?? week[0],
-                      isStart: dragGhost.isStart,
-                      isEnd: dragGhost.isEnd,
-                      continuesBefore: !dragGhost.isStart,
-                      continuesAfter: !dragGhost.isEnd,
-                    }}
-                    className={cn(
-                      "h-full inset-ring-0",
-                      !dragGhost.valid && EVENT_CALENDAR_GHOST.invalidContent
-                    )}
-                  />
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function EventCalendarMonthCell({
-  day,
-  cap,
-  reservedLanes,
-  hiddenBarKeys,
-  isLast,
-  autoFit,
-  contentRef,
-}: {
-  day: Date
-  cap: number
-  reservedLanes: number
-  /** Occurrence keys of the bars hidden in THIS column (lane >= cap), from the
-   *  week row. Lets the cell list hidden bars in its overflow popover without
-   *  re-listing the bars already visible in the row overlay. */
-  hiddenBarKeys: Set<string>
-  /** Last column in the row - drops the right border so the grid's outer edge
-   *  is owned by the container, not a doubled cell border. Passed explicitly
-   *  because the bar overlay renders after the cells, so `:last-child` is
-   *  unreliable on rows that have bars. */
-  isLast: boolean
-  /** When true, the "+N more" chip is treated as taking a row so the visible
-   *  chips + indicator always fit the measured cell height. */
-  autoFit: boolean
-  /** Set on the first cell only: measured to derive the "auto" cap. */
-  contentRef?: Ref<HTMLDivElement>
-}) {
-  const instance = useEventCalendar()
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const gestures = useEventCalendarGestures()
-  const { segments, isToday, isOutside } = useEventCalendarDay(day)
-
-  const dayStart = zonedStartOfDay(day, settings.timeZone)
-  const dayEnd = addDays(toZoned(dayStart, settings.timeZone), 1)
-  const { effective } = useEventCalendarViewSettings()
-  const isOff = resolveOffDay(
-    day,
-    settings.timeZone,
-    effective.offDays
-      ? typeof viewConfig.offDays === "object"
-        ? viewConfig.offDays
-        : true
-      : false,
-    settings.weekendDays
-  )
-  const offClassName =
-    (typeof viewConfig.offDays === "object" && viewConfig.offDays.className) ||
-    "bg-muted/25"
-
-  const isDropTarget = useEventCalendarSelector<
-    unknown,
-    "valid" | "invalid" | null
-  >((state) => {
-    const drag = state.drag
-    if (!drag) return null
-    const covered = drag.proposedStart < dayEnd && drag.proposedEnd > dayStart
-    if (!covered) return null
-    return drag.valid ? "valid" : "invalid"
-  })
-  // Hide hover affordances mid-gesture: the only intent is the drop target.
-  // Gated on the one thing that reads it: a plain global boolean flips for all
-  // 42 cells the moment a gesture starts and again when it ends, which is pure
-  // waste in the default configuration where no add button renders.
-  const isInteracting = useEventCalendarSelector<unknown, boolean>((state) =>
-    viewConfig.showDayAddButton
-      ? state.drag !== null || state.slotDraft !== null
-      : false
-  )
-  const inDraft = useEventCalendarSelector<
-    unknown,
-    { isStart: boolean; isEnd: boolean } | null
-  >(
-    (state) => {
-      const draft = state.slotDraft
-      if (!draft || !draft.allDay) return null
-      if (draft.start >= dayEnd || draft.end <= dayStart) return null
-      return {
-        isStart: draft.start >= dayStart,
-        isEnd: draft.end <= dayEnd,
-      }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.isStart === b.isStart &&
-          a.isEnd === b.isEnd),
-    }
-  )
-
-  // Month drag-create selects whole DAYS, so the readout is a date range rather
-  // than a time range. Held separately from `inDraft` above, which only knows
-  // whether this cell is an edge of the selection, not what the selection is.
-  const draftRange = useEventCalendarSelector<
-    unknown,
-    { start: Date; end: Date } | null
-  >(
-    (state) => {
-      const draft = state.slotDraft
-      if (!draft || !draft.allDay) return null
-      return { start: draft.start, end: draft.end }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.start.getTime() === b.start.getTime() &&
-          a.end.getTime() === b.end.getTime()),
-    }
-  )
-  // A single-day timed MOVE landing on THIS day: expose the proposed
-  // minute-of-day (+ color/validity) so the cell can render a drop placeholder
-  // at the correct time-sorted position, instead of the overlay marking a bar
-  // over the first chip. Skipped for bars (they keep the overlay ghost) and for
-  // a no-op move back onto the event's own day (the dimmed source already marks
-  // the spot).
-  const inlineDrop = useEventCalendarSelector<
-    unknown,
-    { min: number; valid: boolean; color?: string } | null
-  >(
-    (state) => {
-      const drag = state.drag
-      if (!drag || drag.kind !== "move" || drag.proposedAllDay) return null
-      if (drag.proposedEnd.getTime() - drag.proposedStart.getTime() > 86400000)
-        return null
-      const dropDayMs = zonedStartOfDay(
-        drag.proposedStart,
-        settings.timeZone
-      ).getTime()
-      if (dropDayMs !== dayStart.getTime()) return null
-      if (
-        zonedStartOfDay(drag.occurrence.start, settings.timeZone).getTime() ===
-        dayStart.getTime()
-      )
-        return null
-      return {
-        min: (drag.proposedStart.getTime() - dropDayMs) / 60000,
-        valid: drag.valid,
-        color: drag.occurrence.event.color,
-      }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.min === b.min &&
-          a.valid === b.valid &&
-          a.color === b.color),
-    }
-  )
-
-  // Bars (allDay/multi-day) are drawn by the week-row overlay; the cell renders
-  // only single-day timed events, below the reserved bar lanes.
-  const extraHidden = hiddenBarKeys.size
-  const hiddenBarSegs = segments.allDay.filter((s) =>
-    hiddenBarKeys.has(s.occurrence.key)
-  )
-  const m = segments.timed.length
-  const timedSlots = Math.max(0, cap - reservedLanes)
-
-  // Static (at-rest) split: what the cell shows with no drag, and - crucially -
-  // what the "+N more" popover lists. The popover carries ONLY the hidden events
-  // (hidden bars + timed past the cap), never the chips already visible in the
-  // cell, so it never duplicates them. autoFit gives up one timed row to the
-  // "+N more" indicator so the visible chips fit the clipped cell height.
-  const staticOverflow = extraHidden > 0 || m > timedSlots
-  const staticShown =
-    autoFit && staticOverflow ? Math.max(0, timedSlots - 1) : timedSlots
-  const overflowSegments = [
-    ...hiddenBarSegs,
-    ...segments.timed.slice(staticShown),
-  ]
-
-  // Live split: while a timed chip is dragged onto this day, render the day
-  // exactly as it will look AFTER the drop. The dragged chip is a phantom in the
-  // time-sorted order and is shown as the placeholder - inline where it lands,
-  // or ON the "+N more" indicator when it lands in the overflow bucket (so the
-  // user sees the drop will push it into "more"). The "+N more" count always
-  // reflects the post-drop hidden total.
-  let visibleTimed: EventCalendarSegment[]
-  let overflowCount: number
-  let placeholderIndex: number
-  let placeholderAtMore: boolean
-  if (!inlineDrop) {
-    visibleTimed = segments.timed.slice(0, staticShown)
-    overflowCount = overflowSegments.length
-    placeholderIndex = -1
-    placeholderAtMore = false
-  } else {
-    // rank of the dragged chip in the resulting time-sorted list (chips are
-    // time-ordered, so this is the count starting at or before its time)
-    const insertRank = segments.timed.filter(
-      (s) => (s.startMin ?? 0) <= inlineDrop.min
-    ).length
-    const dropOverflow = extraHidden > 0 || m + 1 > timedSlots
-    // rows for timed items INCLUDING the phantom, before the "+N more" row
-    const vis = !dropOverflow
-      ? m + 1
-      : autoFit
-        ? Math.max(0, timedSlots - 1)
-        : timedSlots
-    placeholderAtMore = insertRank >= vis
-    visibleTimed = placeholderAtMore
-      ? segments.timed.slice(0, vis)
-      : segments.timed.slice(0, Math.max(0, vis - 1))
-    placeholderIndex = placeholderAtMore ? -1 : insertRank
-    overflowCount =
-      extraHidden + (m - visibleTimed.length) + (placeholderAtMore ? 1 : 0)
-  }
-
-  // No dep array: the replacement for a chip that lost focus to a commit can
-  // appear on any re-render of any cell, and a cell with nothing to restore
-  // bails after two comparisons.
-  const rootRef = useRef<HTMLDivElement | null>(null)
-  useIsoLayoutEffect(() => {
-    restoreChipFocus(rootRef.current, visibleTimed)
-  })
-
-  // Faint dashed drop placeholder, tinted to the dragged event's color, echoing
-  // the move ghost (EVENT_CALENDAR_GHOST.move); one chip-height tall so chips
-  // shift by exactly one row when it is inserted.
-  const dropPlaceholder = inlineDrop ? (
-    <div
-      key="ec-drop-placeholder"
-      aria-hidden
-      data-slot="event-calendar-drop-placeholder"
-      data-drop-invalid={!inlineDrop.valid || undefined}
-      className={cn(
-        "shrink-0 rounded-sm border border-dashed",
-        inlineDrop.valid
-          ? "border-(--ec-event-color)/50 bg-(--ec-event-color)/8"
-          : "border-destructive/70 bg-destructive/10",
-        viewConfig.classNames?.dragGhost
-      )}
-      style={
-        {
-          "--ec-event-color": inlineDrop.color ?? "var(--color-primary)",
-          height: "calc(var(--ec-month-bar-h, 1.75rem) - 0.125rem)",
-        } as CSSProperties
-      }
-    />
-  ) : null
-
-  const defaultContent = (
-    <>
-      <div
-        ref={contentRef}
-        className={cn(
-          // gap-0.5 pairs with the 0.125rem subtraction in the lane spacer
-          // below; changing the gap requires renderMonthCell
-          // px-1 matches the all-day bar wrapper inset so single-day chips and
-          // multi-day bars line up on the same left/right edge in a cell
-          "flex min-h-0 flex-1 flex-col gap-0.5 overflow-hidden px-1 pt-1.5",
-          viewConfig.classNames?.monthCellContent
-        )}
-      >
-        {reservedLanes > 0 && (
-          <div
-            aria-hidden
-            className="shrink-0"
-            style={{
-              // lane height already carries the 2px inter-lane gap; subtract
-              // it so spacer + the column's own gap-0.5 = the SAME 2px rhythm
-              // between the last bar and the first timed chip
-              height: `calc(${reservedLanes} * var(--ec-month-bar-h, 1.75rem) - 0.125rem)`,
-            }}
-          />
-        )}
-        {visibleTimed.flatMap((segment, i) => {
-          const chip = (
-            <EventCalendarEvent
-              key={segment.occurrence.key}
-              segment={segment}
-              // Remember the chip holding focus so a commit that re-keys it can
-              // hand focus back to the remounted one (see restoreChipFocus)
-              onFocus={(e) => {
-                focusedChip = {
-                  node: e.currentTarget,
-                  eventId: segment.occurrence.eventId,
-                  recurrenceIndex: segment.occurrence.recurrenceIndex,
-                }
-              }}
-              // A chip still in the tree lost focus on its own, so there is
-              // nothing to restore; only a blur from the remount is kept.
-              onBlur={(e) => {
-                if (e.currentTarget.isConnected) focusedChip = null
-              }}
-              // Hold a fixed height like the all-day lane above; without this
-              // the chip flex-shrinks to whatever room the cell has left, so
-              // cells with a reserved bar lane or a second chip render shorter
-              // chips.
-              className="shrink-0"
-            />
-          )
-          return i === placeholderIndex ? [dropPlaceholder, chip] : [chip]
-        })}
-        {placeholderIndex >= 0 &&
-          placeholderIndex >= visibleTimed.length &&
-          dropPlaceholder}
-        {overflowCount > 0 && (
-          <EventCalendarMoreIndicator
-            day={day}
-            count={overflowCount}
-            segments={overflowSegments}
-            dropInto={
-              placeholderAtMore && inlineDrop
-                ? { color: inlineDrop.color, valid: inlineDrop.valid }
-                : undefined
-            }
-          />
-        )}
-      </div>
-      {/* Day number + add affordance, bottom-right (Notion-style) */}
-      <div
-        className={cn(
-          "flex items-center justify-end gap-1 px-2 pb-1.5",
-          viewConfig.classNames?.monthCellFooter
-        )}
-      >
-        {viewConfig.showDayAddButton && !isInteracting && (
-          <button
-            type="button"
-            data-slot="event-calendar-day-add"
-            aria-label={settings.i18n.labels.addEvent}
-            // a different icon/markup is a renderMonthCell job
-            className={cn(
-              "bg-primary text-primary-foreground flex size-5 cursor-pointer items-center justify-center rounded-sm opacity-0 transition-opacity group-hover/ec-cell:opacity-100 focus-visible:opacity-100",
-              viewConfig.classNames?.dayAddButton
-            )}
-            onClick={(e) => {
-              e.stopPropagation()
-              settings.onSlotClick?.(
-                { date: day, allDay: true, view: "month" },
-                e
-              )
-            }}
-          >
-            <PlusIcon className="size-3.5" aria-hidden="true" />
-          </button>
-        )}
-        <span
-          data-slot="event-calendar-month-day-number"
-          className={cn(
-            "flex size-5 items-center justify-center rounded-full",
-            isOutside && "text-muted-foreground",
-            // the filled circle already marks today; keep the number the same
-            // weight/size as the other days so it does not read as larger
-            // Same font-size as every other day; a lighter weight cancels the
-            // way white digits on the filled circle read bolder/larger than the
-            // dark-on-light numbers around them.
-            isToday && "bg-primary text-primary-foreground font-light",
-            viewConfig.classNames?.monthDayNumber
-          )}
-        >
-          {format(
-            toZoned(day, settings.timeZone),
-            settings.i18n.formats.monthCellDay,
-            { locale: settings.locale }
-          )}
-        </span>
-      </div>
-    </>
-  )
-
-  const content =
-    viewConfig.renderMonthCell?.({
-      day,
-      segments,
-      isToday,
-      isOutside,
-      overflowCount,
-      defaultContent,
-    }) ?? defaultContent
-
-  return (
-    <div
-      ref={rootRef}
-      role="gridcell"
-      data-slot="event-calendar-month-cell"
-      data-today={isToday || undefined}
-      data-outside={isOutside || undefined}
-      data-weekend={
-        settings.weekendDays.includes(
-          toZoned(day, settings.timeZone).getDay()
-        ) || undefined
-      }
-      data-ec-day={dayStart.getTime()}
-      data-drop-target={isDropTarget ?? undefined}
-      data-off={isOff || undefined}
-      data-draft={inDraft ? "" : undefined}
-      aria-label={format(
-        toZoned(day, settings.timeZone),
-        settings.i18n.formats.monthCellAriaLabel,
-        { locale: settings.locale }
-      )}
-      className={cn(
-        "group/ec-cell relative flex min-h-0 min-w-0 flex-col overflow-hidden",
-        !isLast && "border-e",
-        isOutside && !settings.showOutsideDays && "invisible",
-        isOff && offClassName,
-        isToday &&
-          cn(
-            "bg-primary/3 border-b-primary/40 relative border-b-2",
-            viewConfig.todayClassName
-          ),
-        viewConfig.dayClassName?.(day),
-        // No drop-target bg fill on move/resize - the dragged bar + not-allowed
-        // cursor carry the feedback; a cell-wide color wash is too distracting.
-        // data-drop-target stays as an opt-in styling hook.
-        inDraft && EVENT_CALENDAR_SLOT_DRAFT.surface,
-        viewConfig.classNames?.monthCell
-      )}
-      onPointerDown={(e) => {
-        const target = e.target as HTMLElement
-        if (target.closest("[data-slot=event-calendar-event]")) return
-        if (target.closest("[data-slot=event-calendar-more]")) return
-        gestures.beginCreate(e, day, true)
-      }}
-      onClick={(e) => {
-        if (wasRecentDrag() || wasRecentChipPress()) return
-        settings.onSlotClick?.({ date: day, allDay: true, view: "month" }, e)
-      }}
-    >
-      {inDraft && (
-        <span
-          aria-hidden
-          data-slot="event-calendar-slot-draft"
-          className={cn(
-            "pointer-events-none absolute inset-0 z-10",
-            EVENT_CALENDAR_SLOT_DRAFT.segment,
-            inDraft.isStart && EVENT_CALENDAR_SLOT_DRAFT.segmentStart,
-            inDraft.isEnd && EVENT_CALENDAR_SLOT_DRAFT.segmentEnd,
-            viewConfig.classNames?.slotDraft
-          )}
-        >
-          {/* Date-range readout, the month-view counterpart of the time-grid
-              one. Rendered only on the FIRST cell of the selection, otherwise
-              a three-day drag would repeat the same label three times. Pinned
-              to the bottom because the day number owns the top of the cell,
-              and given its own surface so it stays legible over event chips. */}
-          {inDraft.isStart && draftRange && (
-            <span
-              className={cn(
-                "absolute inset-x-1 bottom-1",
-                EVENT_CALENDAR_SLOT_DRAFT.label
-              )}
-            >
-              {settings.i18n.functions.formatDayRange(
-                {
-                  start: toZoned(draftRange.start, settings.timeZone),
-                  end: toZoned(draftRange.end, settings.timeZone),
-                },
-                { locale: settings.locale }
-              )}
-            </span>
-          )}
-        </span>
-      )}
-      {content}
-    </div>
-  )
-}
-
-interface EventCalendarMoreIndicatorProps {
-  day: Date
-  count: number
-  /** The OVERFLOW (hidden) segments for this day - bars first, then timed. The
-   *  popover lists only these, never the chips already visible in the cell. */
-  segments: EventCalendarSegment[]
-  /** Set while a timed chip is dragged and will land in THIS overflow bucket:
-   *  the indicator itself becomes the drop placeholder (dashed, event-tinted) so
-   *  it reads as "the chip joins the +N more list". */
-  dropInto?: { color?: string; valid: boolean }
-}
-
-/**
- * "+N more" trigger opening a popover with the day's full event list.
- * onMoreClick returning false suppresses the built-in popover.
- */
-function EventCalendarMoreIndicator({
-  day,
-  count,
-  segments,
-  dropInto,
-}: EventCalendarMoreIndicatorProps) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const [open, setOpen] = useState(false)
-  const headerId = useId()
-
-  // Grabbing a chip from this list starts a drag; close the popover so it does
-  // not sit over the drop target while the event is carried to another day.
-  const isDragging = useEventCalendarSelector<unknown, boolean>(
-    (state) => state.drag !== null
-  )
-  useEffect(() => {
-    if (isDragging) setOpen(false)
-  }, [isDragging])
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger
-        data-slot="event-calendar-more"
-        data-drop-into={dropInto ? "" : undefined}
-        data-drop-invalid={dropInto && !dropInto.valid ? "" : undefined}
-        className={cn(
-          "text-muted-foreground hover:text-foreground cursor-pointer truncate rounded-sm px-1.5 text-start",
-          // While a dragged chip will land in this overflow bucket, the "+N more"
-          // link itself becomes the drop placeholder: dashed, event-tinted, one
-          // chip tall, so the drop target is unmistakable.
-          dropInto &&
-            cn(
-              "flex shrink-0 items-center border border-dashed",
-              dropInto.valid
-                ? "text-foreground border-(--ec-event-color)/50 bg-(--ec-event-color)/8"
-                : "border-destructive/70 bg-destructive/10 text-destructive"
-            ),
-          viewConfig.classNames?.moreIndicator
-        )}
-        style={
-          dropInto
-            ? ({
-                "--ec-event-color": dropInto.color ?? "var(--color-primary)",
-                height: "calc(var(--ec-month-bar-h, 1.75rem) - 0.125rem)",
-              } as CSSProperties)
-            : undefined
-        }
-        onClick={(e: React.MouseEvent) => {
-          e.stopPropagation()
-          const verdict = settings.onMoreClick?.(
-            day,
-            segments.map((segment) => segment.occurrence),
-            e
-          )
-          if (verdict === false) {
-            e.preventDefault()
-            setOpen(false)
-          }
-        }}
-      >
-        {viewConfig.renderMoreIndicator?.({ day, count, segments }) ??
-          settings.i18n.labels.more(count)}
-      </PopoverTrigger>
-      <PopoverContent
-        data-slot="event-calendar-more-popover"
-        align={viewConfig.morePopoverAlign}
-        // The popover is a dialog, so it needs a name. The built-in body already
-        // renders the day header this list belongs to, so point at that; a
-        // consumer body has no header to point at and gets the same formatted
-        // day as a label instead.
-        aria-labelledby={viewConfig.renderMoreContent ? undefined : headerId}
-        aria-label={
-          viewConfig.renderMoreContent
-            ? format(
-                toZoned(day, settings.timeZone),
-                settings.i18n.formats.moreDayHeader,
-                { locale: settings.locale }
-              )
-            : undefined
-        }
-        // PopoverContent is unlayered (flex-col gap-4 p-4); override with !.
-        // text-xs re-establishes the calendar's base type here because this
-        // content is portaled out of the root subtree and cannot inherit it.
-        className={cn(
-          "w-64 gap-1! p-2! text-xs",
-          viewConfig.classNames?.morePopover
-        )}
-        onClick={(e: React.MouseEvent) => e.stopPropagation()}
-      >
-        {viewConfig.renderMoreContent ? (
-          viewConfig.renderMoreContent({
-            day,
-            segments,
-            close: () => setOpen(false),
-          })
-        ) : (
-          <EventCalendarMoreDefaultContent
-            day={day}
-            segments={segments}
-            headerId={headerId}
-          />
-        )}
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-/** Built-in "+N more" popover body: day header + the day's chips. */
-function EventCalendarMoreDefaultContent({
-  day,
-  segments,
-  headerId,
-}: {
-  day: Date
-  segments: EventCalendarSegment[]
-  /** Names the popover dialog: the header IS the list's accessible name. */
-  headerId?: string
-}) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  return (
-    <>
-      <div
-        id={headerId}
-        className={cn(
-          "text-muted-foreground px-1 py-1 text-xs font-medium",
-          viewConfig.classNames?.morePopoverHeader
-        )}
-      >
-        {format(
-          toZoned(day, settings.timeZone),
-          settings.i18n.formats.moreDayHeader,
-          { locale: settings.locale }
-        )}
-      </div>
-      {/* The scroll region breaks out of the popover's right padding (-me-2)
-            so the scrollbar sits flush in the gutter; the list then pads itself
-            back (ps-1 aligns with the header, pe-4 clears the ~10px bar with a
-            gap) and adds py-1 so the first/last focus ring is not clipped by
-            the overflow. Layout is identical with or without a scrollbar. */}
-      {viewConfig.scrollbars === "native" ? (
-        <div
-          data-ec-native-scroll=""
-          className="-me-2 max-h-(--ec-more-max-height,16rem) min-h-0 overflow-y-auto"
-        >
-          <div className="flex flex-col gap-1 py-1 ps-1 pe-4">
-            {segments.map((segment) => (
-              <EventCalendarEvent
-                key={segment.occurrence.key}
-                segment={segment}
-                className="py-0.5"
-              />
-            ))}
-          </div>
-        </div>
-      ) : (
-        <ScrollArea className="-me-2 min-h-0 **:data-[slot=scroll-area-viewport]:max-h-(--ec-more-max-height,16rem)">
-          <div className="flex flex-col gap-1 py-1 ps-1 pe-4">
-            {segments.map((segment) => (
-              <EventCalendarEvent
-                key={segment.occurrence.key}
-                segment={segment}
-                className="py-0.5"
-              />
-            ))}
-          </div>
-        </ScrollArea>
-      )}
-    </>
-  )
-}
-
-export { EventCalendarMonthView, EventCalendarMoreIndicator }
-export type { EventCalendarMonthViewProps, EventCalendarMoreIndicatorProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-nav.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-nav.tsx
deleted file mode 100644
index a7d2a2d..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-nav.tsx
+++ /dev/null
@@ -1,611 +0,0 @@
-import { useState, type ReactNode } from "react"
-import {
-  useEventCalendarNavigation,
-  useEventCalendarSettings,
-  useEventCalendarView,
-  useEventCalendarViewConfig,
-} from "@/components/reui/event-calendar/event-calendar"
-import { toZoned } from "@/components/reui/event-calendar/event-calendar-lib"
-import type { CalendarView } from "@/components/reui/event-calendar/event-calendar-types"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { addDays, format } from "date-fns"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import { Button } from "@evobgp/ui/components/button"
-import { Calendar } from "@evobgp/ui/components/calendar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@evobgp/ui/components/dropdown-menu"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@evobgp/ui/components/popover"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@evobgp/ui/components/tooltip"
-import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon } from "lucide-react"
-
-/** Configured nav button variant/size (viewConfig.navButtonVariant/Size)
- *  plus the shared classNames.navButton hook, merged on every nav button. */
-function useNavButtonProps(): {
-  variant: "ghost" | "outline" | "secondary" | "default"
-  size: "sm" | "default"
-  iconSize: "icon-sm" | "icon"
-  className: string | undefined
-} {
-  const viewConfig = useEventCalendarViewConfig()
-  return {
-    variant: viewConfig.navButtonVariant,
-    size: viewConfig.navButtonSize,
-    iconSize: viewConfig.navButtonSize === "sm" ? "icon-sm" : "icon",
-    className: viewConfig.classNames?.navButton,
-  }
-}
-
-/** Resolved nav tooltip policy (viewConfig.navTooltips + classNames.navTooltip). */
-function useNavTooltipConfig(): {
-  disabled: boolean
-  side: "top" | "bottom" | "left" | "right"
-  delay: number
-  closeDelay: number
-  timeout: number
-  className: string | undefined
-} {
-  const viewConfig = useEventCalendarViewConfig()
-  const config =
-    viewConfig.navTooltips === false ? undefined : viewConfig.navTooltips
-  return {
-    disabled: viewConfig.navTooltips === false,
-    // the nav sits at the top of the calendar, so tooltips open upward by
-    // default (away from the grid); collision flipping still drops them below
-    // when there is no room above
-    side: config?.side ?? "top",
-    delay: config?.delay ?? 600,
-    closeDelay: config?.closeDelay ?? 0,
-    timeout: config?.timeout ?? 300,
-    className: viewConfig.classNames?.navTooltip,
-  }
-}
-
-type NavButtonProps = Omit<useRender.ComponentProps<"button">, "children"> & {
-  children?: ReactNode
-  /**
-   * Tooltip policy (the part that usually goes wrong on clickable elements):
-   * tooltips appear ONLY on hover or keyboard focus-visible - a pointer click
-   * never re-triggers them. Buttons that open overlays (the view switcher)
-   * use a hover-only tooltip that is force-closed while the overlay is up and
-   * ignores focus, so nothing flashes when focus returns after selection.
-   * Icon-only buttons default to their accessible label; Today defaults to
-   * the actual current date (info the label doesn't carry). Pass null to
-   * disable one, or any node to override; viewConfig.navTooltips=false turns
-   * them all off (its object form tunes side/delay/closeDelay/timeout).
-   */
-  tooltip?: ReactNode | null
-}
-
-/** Hover/focus-visible tooltip wrapper; renders the bare button when disabled
- *  (per-button content=null or viewConfig.navTooltips=false). */
-function NavTooltip({
-  content,
-  children,
-}: {
-  content: ReactNode | null
-  children: React.ReactElement
-}) {
-  const tooltips = useNavTooltipConfig()
-  if (tooltips.disabled || content === null || content === undefined)
-    return children
-  return (
-    <Tooltip>
-      <TooltipTrigger render={children} />
-      <TooltipContent side={tooltips.side} className={tooltips.className}>
-        {content}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
-function EventCalendarNavToday({
-  className,
-  render,
-  children,
-  tooltip,
-  ...props
-}: NavButtonProps) {
-  const { today, isToday } = useEventCalendarNavigation()
-  const settings = useEventCalendarSettings()
-  const nav = useNavButtonProps()
-  // display-zone "today", like every other today derivation in the calendar
-  // (a system-zone new Date() can name a different day than Today opens)
-  const defaultTooltip = format(
-    toZoned(new Date(), settings.timeZone),
-    settings.i18n.formats.dayTitle,
-    { locale: settings.locale }
-  )
-  return (
-    <NavTooltip content={tooltip === undefined ? defaultTooltip : tooltip}>
-      <Button
-        variant={nav.variant}
-        size={nav.size}
-        data-slot="event-calendar-nav-today"
-        data-active={isToday || undefined}
-        className={cn(nav.className, className)}
-        onClick={today}
-        render={render}
-        {...props}
-      >
-        {children ?? settings.i18n.labels.today}
-      </Button>
-    </NavTooltip>
-  )
-}
-
-function EventCalendarNavPrev({
-  className,
-  render,
-  children,
-  tooltip,
-  ...props
-}: NavButtonProps) {
-  const { prev } = useEventCalendarNavigation()
-  const settings = useEventCalendarSettings()
-  const nav = useNavButtonProps()
-  return (
-    <NavTooltip
-      content={tooltip === undefined ? settings.i18n.labels.previous : tooltip}
-    >
-      <Button
-        variant={nav.variant}
-        size={nav.iconSize}
-        data-slot="event-calendar-nav-prev"
-        aria-label={settings.i18n.labels.previous}
-        className={cn(nav.className, className)}
-        onClick={prev}
-        render={render}
-        {...props}
-      >
-        {children ?? (
-          <ChevronLeftIcon className="size-4" aria-hidden="true" />
-        )}
-      </Button>
-    </NavTooltip>
-  )
-}
-
-function EventCalendarNavNext({
-  className,
-  render,
-  children,
-  tooltip,
-  ...props
-}: NavButtonProps) {
-  const { next } = useEventCalendarNavigation()
-  const settings = useEventCalendarSettings()
-  const nav = useNavButtonProps()
-  return (
-    <NavTooltip
-      content={tooltip === undefined ? settings.i18n.labels.next : tooltip}
-    >
-      <Button
-        variant={nav.variant}
-        size={nav.iconSize}
-        data-slot="event-calendar-nav-next"
-        aria-label={settings.i18n.labels.next}
-        className={cn(nav.className, className)}
-        onClick={next}
-        render={render}
-        {...props}
-      >
-        {children ?? (
-          <ChevronRightIcon className="size-4" aria-hidden="true" />
-        )}
-      </Button>
-    </NavTooltip>
-  )
-}
-
-interface EventCalendarTitleProps extends useRender.ComponentProps<"div"> {
-  format?: (ctx: { title: string }) => ReactNode
-}
-
-function EventCalendarTitle({
-  className,
-  render,
-  format: formatTitle,
-  ...props
-}: EventCalendarTitleProps) {
-  const { title } = useEventCalendarNavigation()
-  const viewConfig = useEventCalendarViewConfig()
-  const defaultProps = {
-    "data-slot": "event-calendar-title",
-    "aria-live": "polite" as const,
-    className: cn(
-      "min-w-0 truncate text-sm font-semibold",
-      viewConfig.classNames?.title,
-      className
-    ),
-    children: formatTitle?.({ title }) ?? title,
-  }
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps<"div">(defaultProps, props),
-  })
-}
-
-interface EventCalendarViewSwitcherProps extends Omit<
-  useRender.ComponentProps<"button">,
-  "children"
-> {
-  children?: ReactNode
-  /** Hover/focus-visible hint; defaults to the "Select view" label. Pass
-   *  null to disable (overlay-opener policy). */
-  tooltip?: ReactNode | null
-}
-
-function EventCalendarViewSwitcher({
-  className,
-  render,
-  children,
-  tooltip,
-  ...props
-}: EventCalendarViewSwitcherProps) {
-  const { view, dayCount, availableViews, setView } = useEventCalendarView()
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const nav = useNavButtonProps()
-  const tooltips = useNavTooltipConfig()
-  const labels = settings.i18n.labels
-  // Controlled open: selecting a view swaps the whole content subtree in the
-  // same click, so closing must not depend on the menu's internal handler.
-  const [open, setOpen] = useState(false)
-  // Hover-only tooltip: when the menu closes, Base UI focuses the trigger
-  // again and a focus-opened tooltip would flash - ignore focus opens.
-  const [tipOpen, setTipOpen] = useState(false)
-
-  const selectView = (v: CalendarView, opts?: { dayCount?: number }) => {
-    setOpen(false)
-    setView(v, opts)
-  }
-
-  const viewLabel = (v: CalendarView) =>
-    v === "days"
-      ? settings.i18n.viewNames.days(dayCount)
-      : settings.i18n.viewNames[v]
-
-  return (
-    <DropdownMenu
-      open={open}
-      onOpenChange={(next: boolean) => {
-        setOpen(next)
-        if (next) setTipOpen(false)
-      }}
-    >
-      {/* Tooltip on an overlay-opener: hover-only (focus opens ignored) and
-          force-closed while the menu is up, so it never lingers or flashes
-          when focus returns on close. Inherits the nav TooltipProvider's
-          delay/closeDelay/timeout. */}
-      <Tooltip
-        open={tipOpen && !open}
-        onOpenChange={(next: boolean, details: { reason?: string }) => {
-          // opens are hover-only; the trigger-focus open that follows a
-          // menu close is ignored, closes always land
-          if (next && details?.reason !== "trigger-hover") return
-          setTipOpen(next)
-        }}
-      >
-        <DropdownMenuTrigger
-          render={
-            <TooltipTrigger
-              render={
-                <Button
-                  variant={nav.variant}
-                  size={nav.size}
-                  data-slot="event-calendar-view-switcher"
-                  aria-label={labels.selectView}
-                  className={cn("gap-1", nav.className, className)}
-                  render={render}
-                />
-              }
-            />
-          }
-          {...props}
-        >
-          {children ?? (
-            <>
-              {viewLabel(view)}
-              <ChevronDownIcon className="size-4 opacity-60" aria-hidden="true" />
-            </>
-          )}
-        </DropdownMenuTrigger>
-        {tipOpen && !open && tooltip !== null && !tooltips.disabled && (
-          <TooltipContent side={tooltips.side} className={tooltips.className}>
-            {tooltip ?? labels.selectView}
-          </TooltipContent>
-        )}
-      </Tooltip>
-      <DropdownMenuContent
-        align="start"
-        className={cn("min-w-44", viewConfig.classNames?.viewSwitcherContent)}
-      >
-        {/* Base UI contract: GroupLabel must live inside Menu.Group */}
-        <DropdownMenuGroup>
-          <DropdownMenuLabel
-            className={cn(
-              "text-muted-foreground font-normal",
-              viewConfig.classNames?.viewSwitcherLabel
-            )}
-          >
-            {settings.i18n.labels.selectView}
-          </DropdownMenuLabel>
-          {availableViews.map((v) =>
-            v === "days" ? (
-              viewConfig.dayCountPresets.map((count) => (
-                <DropdownMenuItem
-                  key={`days-${count}`}
-                  data-active={
-                    (view === "days" && dayCount === count) || undefined
-                  }
-                  onClick={() => selectView("days", { dayCount: count })}
-                >
-                  {settings.i18n.viewNames.days(count)}
-                  {/* hint derived from the preset itself, not i18n's default */}
-                  {viewConfig.enableShortcuts && (
-                    <EventCalendarViewShortcut>
-                      {count}
-                    </EventCalendarViewShortcut>
-                  )}
-                </DropdownMenuItem>
-              ))
-            ) : (
-              <DropdownMenuItem
-                key={v}
-                data-active={view === v || undefined}
-                onClick={() => selectView(v)}
-              >
-                {viewLabel(v)}
-                {viewConfig.enableShortcuts && (
-                  <EventCalendarViewShortcut>
-                    {labels.viewShortcuts[v]}
-                  </EventCalendarViewShortcut>
-                )}
-              </DropdownMenuItem>
-            )
-          )}
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-/** Outline key badge; theme-token only, so it adapts to every style. */
-function EventCalendarViewShortcut({ children }: { children: ReactNode }) {
-  const viewConfig = useEventCalendarViewConfig()
-  return (
-    <kbd
-      data-slot="event-calendar-view-shortcut"
-      className={cn(
-        "text-muted-foreground ms-auto inline-flex size-5 shrink-0 items-center justify-center rounded-sm border font-sans text-xs",
-        viewConfig.classNames?.viewShortcut
-      )}
-    >
-      {children}
-    </kbd>
-  )
-}
-
-interface EventCalendarDatePickerProps extends Omit<
-  useRender.ComponentProps<"button">,
-  "children"
-> {
-  children?: ReactNode
-  /** "auto" (default) resolves per view: range for week/N-days/agenda. */
-  mode?: "auto" | "single" | "range"
-  /** Hover/focus-visible hint; defaults to null - no tooltip, because the
-   *  button opens an overlay (see the NavButtonProps tooltip policy). */
-  tooltip?: ReactNode | null
-}
-
-/** Views whose period reads better as a highlighted range. */
-const RANGE_VIEWS: CalendarView[] = ["week", "days", "agenda"]
-
-/**
- * Optional go-to-date picker (shadcn Calendar in a popover), view-aware:
- * week/N-days/agenda highlight the whole active range (any click re-anchors
- * the period), other views select a single date. Not part of the default
- * nav - compose it yourself (or any external picker driving
- * useEventCalendarNavigation().goTo). No tooltip by default: it opens an
- * overlay (see the NavButtonProps tooltip policy); pass `tooltip` to opt in.
- */
-function EventCalendarDatePicker({
-  className,
-  render,
-  children,
-  tooltip = null,
-  mode,
-  ...props
-}: EventCalendarDatePickerProps) {
-  const { date, goTo, activeRange } = useEventCalendarNavigation()
-  const { view } = useEventCalendarView()
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const nav = useNavButtonProps()
-  const [open, setOpen] = useState(false)
-  const zoned = toZoned(date, settings.timeZone)
-
-  const configured = mode ?? "auto"
-  const resolved =
-    configured === "auto"
-      ? RANGE_VIEWS.includes(view)
-        ? "range"
-        : "single"
-      : configured
-
-  const pick = (next: Date | undefined) => {
-    if (!next) return
-    goTo(next)
-    setOpen(false)
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <NavTooltip content={tooltip}>
-        <PopoverTrigger
-          render={
-            <Button
-              variant={nav.variant}
-              size={nav.iconSize}
-              data-slot="event-calendar-date-picker"
-              data-mode={resolved}
-              aria-label={settings.i18n.labels.goToDate}
-              className={cn(nav.className, className)}
-              render={render}
-            />
-          }
-          {...props}
-        >
-          {children ?? (
-            <CalendarIcon className="size-4" aria-hidden="true" />
-          )}
-        </PopoverTrigger>
-      </NavTooltip>
-      <PopoverContent
-        align="start"
-        className={cn("w-auto p-0!", viewConfig.classNames?.datePickerContent)}
-      >
-        {resolved === "range" ? (
-          <Calendar
-            mode="range"
-            selected={{
-              from: toZoned(activeRange.start, settings.timeZone),
-              to: toZoned(addDays(activeRange.end, -1), settings.timeZone),
-            }}
-            defaultMonth={zoned}
-            onDayClick={pick}
-            locale={settings.locale}
-            weekStartsOn={settings.weekStartsOn}
-          />
-        ) : (
-          <Calendar
-            mode="single"
-            selected={zoned}
-            defaultMonth={zoned}
-            onSelect={pick}
-            locale={settings.locale}
-            weekStartsOn={settings.weekStartsOn}
-          />
-        )}
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-type EventCalendarToolbarProps = useRender.ComponentProps<"div">
-
-/** Free slot for consumer toolbar buttons; pure layout shell. */
-function EventCalendarToolbar({
-  className,
-  render,
-  ...props
-}: EventCalendarToolbarProps) {
-  const viewConfig = useEventCalendarViewConfig()
-  const defaultProps = {
-    "data-slot": "event-calendar-toolbar",
-    className: cn(
-      "flex items-center gap-2",
-      viewConfig.classNames?.toolbar,
-      className
-    ),
-    children: props.children,
-  }
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps<"div">(defaultProps, props),
-  })
-}
-
-interface EventCalendarNavProps extends useRender.ComponentProps<"div"> {
-  /**
-   * Render the view switcher in the composed layout. Turn off when the
-   * calendar ships with a fixed view (e.g. a month-only embed) and users
-   * should not be able to change it.
-   * @default true
-   */
-  showViewSwitcher?: boolean
-}
-
-/**
- * Default composed nav: Today, prev/next, title, spacer, view switcher.
- * Pass children to use it as a pure layout shell instead.
- */
-function EventCalendarNav({
-  className,
-  render,
-  children,
-  showViewSwitcher = true,
-  ...props
-}: EventCalendarNavProps) {
-  const viewConfig = useEventCalendarViewConfig()
-  const tooltips = useNavTooltipConfig()
-  const defaultProps = {
-    "data-slot": "event-calendar-nav",
-    className: cn(
-      "flex min-w-0 flex-wrap items-center gap-1 px-2 py-2",
-      viewConfig.stickyNav && "bg-background sticky top-0 z-30",
-      viewConfig.classNames?.nav,
-      className
-    ),
-    children: children ?? (
-      // Shared provider: first tooltip waits, moving between buttons is instant
-      <TooltipProvider
-        delay={tooltips.delay}
-        closeDelay={tooltips.closeDelay}
-        timeout={tooltips.timeout}
-      >
-        <EventCalendarNavToday />
-        {showViewSwitcher && <EventCalendarViewSwitcher />}
-        <div className="flex items-center">
-          <EventCalendarNavPrev />
-          <EventCalendarNavNext />
-        </div>
-        {/* ms-3 sets the title apart from the tight control cluster so the
-            period reads as its own group, not another button */}
-        <EventCalendarTitle className="ms-3" />
-        <div className="grow" />
-      </TooltipProvider>
-    ),
-  }
-  return useRender({
-    defaultTagName: "div",
-    render,
-    props: mergeProps<"div">(defaultProps, props),
-  })
-}
-
-export {
-  EventCalendarDatePicker,
-  EventCalendarNav,
-  EventCalendarNavNext,
-  EventCalendarNavPrev,
-  EventCalendarNavToday,
-  EventCalendarTitle,
-  EventCalendarToolbar,
-  EventCalendarViewSwitcher,
-}
-export type {
-  EventCalendarNavProps,
-  EventCalendarTitleProps,
-  EventCalendarToolbarProps,
-  EventCalendarViewSwitcherProps,
-}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-recurrence.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-recurrence.tsx
deleted file mode 100644
index 1f22284..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-recurrence.tsx
+++ /dev/null
@@ -1,592 +0,0 @@
-import type {
-  CalendarEvent,
-  EventCalendarDateRange,
-  EventCalendarOccurrence,
-  EventCalendarRecurrenceRule,
-  EventCalendarWeekday,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { TZDate } from "@date-fns/tz"
-import { addDays, addMonths, addWeeks, addYears } from "date-fns"
-
-/** Guard: max window-intersecting occurrences per event per expansion. */
-const MAX_OCCURRENCES = 1000
-
-/** Runaway guard: absolute cap on period iterations regardless of visibility. */
-const MAX_ITERATIONS = 10000
-
-/** Gregorian mean period lengths for the O(1) fast-forward approximation. */
-const PERIOD_MS: Record<EventCalendarRecurrenceRule["freq"], number> = {
-  daily: 86400000,
-  weekly: 604800000,
-  monthly: 2629746000, // 365.2425 / 12 days
-  yearly: 31556952000, // 365.2425 days
-}
-
-const WEEKDAYS: EventCalendarWeekday[] = [
-  "SU",
-  "MO",
-  "TU",
-  "WE",
-  "TH",
-  "FR",
-  "SA",
-]
-
-class EventCalendarRecurrenceError extends Error {
-  constructor(part: string) {
-    super(
-      `Unsupported recurrence part: ${part}. Use the getOccurrences prop to plug a full RRULE engine for exotic rules.`
-    )
-    this.name = "EventCalendarRecurrenceError"
-  }
-}
-
-/**
- * Parses a raw RRULE line (with or without the "RRULE:" prefix) into the
- * structured subset. Pass the display time zone so Z-less UNTIL values are
- * interpreted as wall time in that zone rather than the machine zone.
- */
-function parseRRuleString(
-  input: string,
-  timeZone?: string
-): EventCalendarRecurrenceRule {
-  const body = input.trim().replace(/^RRULE:/i, "")
-  const rule: Partial<EventCalendarRecurrenceRule> = {}
-
-  for (const pair of body.split(";")) {
-    if (!pair) continue
-    const [rawKey, rawValue] = pair.split("=")
-    const key = rawKey?.toUpperCase()
-    const value = rawValue ?? ""
-
-    switch (key) {
-      case "FREQ": {
-        const freq = value.toLowerCase()
-        if (
-          freq !== "daily" &&
-          freq !== "weekly" &&
-          freq !== "monthly" &&
-          freq !== "yearly"
-        ) {
-          throw new EventCalendarRecurrenceError(`FREQ=${value}`)
-        }
-        rule.freq = freq
-        break
-      }
-      case "INTERVAL":
-        rule.interval = Math.max(1, parseInt(value, 10) || 1)
-        break
-      case "COUNT":
-        rule.count = Math.max(1, parseInt(value, 10) || 1)
-        break
-      case "UNTIL":
-        rule.until = parseRRuleDate(value, timeZone)
-        break
-      case "BYDAY":
-        rule.byWeekday = value.split(",").map((token) => {
-          // RFC 5545 3.1: enumerated values are case-insensitive, and FREQ is
-          // already folded above - rejecting "mo" here would be inconsistent
-          const match = /^(-?\d+)?(SU|MO|TU|WE|TH|FR|SA)$/.exec(
-            token.trim().toUpperCase()
-          )
-          if (!match) throw new EventCalendarRecurrenceError(`BYDAY=${token}`)
-          const day = match[2] as EventCalendarWeekday
-          return match[1] ? { day, ordinal: parseInt(match[1], 10) } : day
-        })
-        break
-      case "BYMONTHDAY":
-        rule.byMonthDay = value.split(",").map((v) => {
-          const day = parseInt(v, 10)
-          // NaN would survive parsing, match no day in any month and leave the
-          // event permanently invisible with no error anywhere
-          if (Number.isNaN(day)) {
-            throw new EventCalendarRecurrenceError(`BYMONTHDAY=${v}`)
-          }
-          return day
-        })
-        break
-      case "BYMONTH":
-        rule.byMonth = value.split(",").map((v) => parseInt(v, 10))
-        break
-      case "WKST": {
-        const day = value.trim().toUpperCase() as EventCalendarWeekday
-        if (!WEEKDAYS.includes(day)) {
-          throw new EventCalendarRecurrenceError(`WKST=${value}`)
-        }
-        rule.weekStart = day
-        break
-      }
-      default:
-        throw new EventCalendarRecurrenceError(key ?? pair)
-    }
-  }
-
-  if (!rule.freq) throw new EventCalendarRecurrenceError("missing FREQ")
-  return rule as EventCalendarRecurrenceRule
-}
-
-function parseRRuleDate(value: string, timeZone?: string): Date {
-  // RFC 5545 basic formats: YYYYMMDD or YYYYMMDDTHHMMSS(Z). The T and Z
-  // designators are case-insensitive too (RFC 5545 3.1), so fold before matching.
-  const match = /^(\d{4})(\d{2})(\d{2})(?:T(\d{2})(\d{2})(\d{2})(Z)?)?$/.exec(
-    value.trim().toUpperCase()
-  )
-  if (!match) throw new EventCalendarRecurrenceError(`UNTIL=${value}`)
-  const [, y, m, d, hh = "23", mm = "59", ss = "59", z] = match
-  // Z-less values (including date-only ones, which mean end of that day
-  // inclusive) are wall time in the display zone, not the machine zone.
-  const date = z
-    ? new Date(`${y}-${m}-${d}T${hh}:${mm}:${ss}Z`)
-    : timeZone
-      ? new Date(new TZDate(+y, +m - 1, +d, +hh, +mm, +ss, timeZone).getTime())
-      : new Date(`${y}-${m}-${d}T${hh}:${mm}:${ss}`)
-  if (Number.isNaN(date.getTime())) {
-    throw new EventCalendarRecurrenceError(`UNTIL=${value}`)
-  }
-  return date
-}
-
-/** Serializes the structured subset back to an RRULE line (without prefix). */
-function formatRRuleString(rule: EventCalendarRecurrenceRule): string {
-  const parts: string[] = [`FREQ=${rule.freq.toUpperCase()}`]
-  if (rule.interval && rule.interval > 1)
-    parts.push(`INTERVAL=${rule.interval}`)
-  if (rule.count) parts.push(`COUNT=${rule.count}`)
-  if (rule.until) {
-    const u = rule.until
-    const pad = (n: number) => String(n).padStart(2, "0")
-    parts.push(
-      `UNTIL=${u.getUTCFullYear()}${pad(u.getUTCMonth() + 1)}${pad(u.getUTCDate())}T${pad(u.getUTCHours())}${pad(u.getUTCMinutes())}${pad(u.getUTCSeconds())}Z`
-    )
-  }
-  if (rule.byWeekday?.length) {
-    parts.push(
-      `BYDAY=${rule.byWeekday
-        .map((d) => (typeof d === "string" ? d : `${d.ordinal}${d.day}`))
-        .join(",")}`
-    )
-  }
-  if (rule.byMonthDay?.length)
-    parts.push(`BYMONTHDAY=${rule.byMonthDay.join(",")}`)
-  if (rule.byMonth?.length) parts.push(`BYMONTH=${rule.byMonth.join(",")}`)
-  if (rule.weekStart) parts.push(`WKST=${rule.weekStart}`)
-  return parts.join(";")
-}
-
-function resolveRule(
-  recurrence: EventCalendarRecurrenceRule | string,
-  timeZone?: string
-): EventCalendarRecurrenceRule {
-  return typeof recurrence === "string"
-    ? parseRRuleString(recurrence, timeZone)
-    : recurrence
-}
-
-/**
- * Expands one event into its occurrences intersecting the range.
- * Non-recurring events yield at most one occurrence. Recurrence iteration is
- * wall-time based in the display zone (DST-safe day/week/month steps), and a
- * span that is a whole number of local days keeps that day count across a DST
- * transition (timed spans keep their absolute length instead).
- *
- * exDates remove exactly-matching instants (after COUNT numbering,
- * Google-style: an exception still consumes its COUNT slot); rDates add extra
- * instants with the same duration. RECURRENCE-ID override replacement lives
- * in buildEventIndex, where the override event and its parent series meet.
- */
-function expandRecurrence<TData>(
-  event: CalendarEvent<TData>,
-  range: EventCalendarDateRange,
-  ctx: { timeZone: string }
-): EventCalendarOccurrence<TData>[] {
-  const allDay = event.allDay ?? false
-
-  if (!event.recurrence) {
-    // The exclusive `end > start` test is right for anything with duration,
-    // but it also drops a zero-length milestone pinned to the first visible
-    // instant - which reads as an event that randomly disappears until you
-    // page one period back. A point occurrence only has to be inside.
-    const isPoint = event.end.getTime() === event.start.getTime()
-    if (
-      event.start < range.end &&
-      (event.end > range.start || (isPoint && event.start >= range.start))
-    ) {
-      return [
-        {
-          key: `${event.id}::${event.start.toISOString()}`,
-          eventId: event.id,
-          event,
-          start: event.start,
-          end: event.end,
-          allDay,
-          isRecurring: false,
-        },
-      ]
-    }
-    return []
-  }
-
-  const rule = resolveRule(event.recurrence, ctx.timeZone)
-  const interval = Math.max(1, rule.interval ?? 1)
-  const durationMs = event.end.getTime() - event.start.getTime()
-  const zonedStart = new TZDate(event.start.getTime(), ctx.timeZone)
-  // A span of whole local days is wall time, not an absolute delta: a 3 day
-  // all-day bar crossing spring forward would otherwise end at 01:00 and
-  // occupy a fourth day in the month grid. Timed spans stay absolute so a two
-  // hour meeting is still two hours.
-  const daySpan = Math.round(durationMs / 86400000)
-  const wallDaySpan =
-    daySpan > 0 &&
-    addDays(zonedStart, daySpan).getTime() === event.end.getTime()
-      ? daySpan
-      : null
-  const endFor = (start: Date): Date =>
-    wallDaySpan === null
-      ? new Date(start.getTime() + durationMs)
-      : new Date(
-          addDays(
-            new TZDate(start.getTime(), ctx.timeZone),
-            wallDaySpan
-          ).getTime()
-        )
-  // Excluded instants matched exactly; filtering happens at push time so an
-  // exception still consumes its COUNT slot (Google-style numbering).
-  const exTimes = new Set((rule.exDates ?? []).map((d) => d.getTime()))
-
-  const weeklyDays: number[] | null =
-    rule.freq === "weekly" && rule.byWeekday?.length
-      ? [
-          ...new Set(
-            rule.byWeekday.map((d) => {
-              if (typeof d !== "string") {
-                throw new EventCalendarRecurrenceError(
-                  "BYDAY ordinal outside monthly/yearly"
-                )
-              }
-              return WEEKDAYS.indexOf(d)
-            })
-          ),
-        ]
-      : null
-
-  // BYDAY resolved inside a month: monthly, and yearly within each BYMONTH
-  // (FREQ=YEARLY;BYMONTH=11;BYDAY=4TH is Thanksgiving, not "the anchor's day")
-  const monthlyByDay =
-    (rule.freq === "monthly" || rule.freq === "yearly") &&
-    rule.byWeekday?.length
-      ? rule.byWeekday
-      : null
-
-  // RFC 5545 3.3.10 week numbering: with INTERVAL > 1 the week start decides
-  // which selected days share a period, so an ignored WKST puts half of every
-  // biweekly series a week off. Default MO, per the RFC.
-  const weekStartIndex = WEEKDAYS.indexOf(rule.weekStart ?? "MO")
-  /** Days from the WKST-aligned week start to `day` (0-6). */
-  const fromWeekStart = (day: number) => (day - weekStartIndex + 7) % 7
-
-  // yearly BYMONTH filter (1-12), ascending; defaults to the anchor's month
-  const validByMonth = rule.byMonth?.filter((m) => m >= 1 && m <= 12) ?? []
-  const yearlyMonths: number[] =
-    validByMonth.length > 0
-      ? [...new Set(validByMonth)].sort((a, b) => a - b)
-      : [zonedStart.getMonth() + 1]
-
-  // month-shaped BY* parts make the per-period occurrence count variable
-  const hasMonthDayParts =
-    (rule.freq === "monthly" &&
-      Boolean(rule.byMonthDay?.length || monthlyByDay)) ||
-    (rule.freq === "yearly" &&
-      Boolean(rule.byMonth?.length || rule.byMonthDay?.length || monthlyByDay))
-
-  const daysInMonth = (year: number, month: number) =>
-    new Date(year, month + 1, 0).getDate()
-
-  // RFC 5545 3.3.10 LIMIT filters: at these frequencies a BY* part narrows the
-  // set instead of reshaping it. Dropping them silently expanded the series as
-  // if the part were absent (FREQ=DAILY;BYDAY=MO filled every day). Filtering
-  // here rather than at push time keeps COUNT numbering RFC-correct: a
-  // candidate the filter removes is not an occurrence and consumes no slot.
-  const limitByMonth =
-    rule.freq !== "yearly" && validByMonth.length > 0 ? validByMonth : null
-  const limitByMonthDay =
-    rule.freq === "daily" && rule.byMonthDay?.length ? rule.byMonthDay : null
-  const limitByWeekday =
-    rule.freq === "daily" && rule.byWeekday?.length
-      ? rule.byWeekday.map((d) =>
-          WEEKDAYS.indexOf(typeof d === "string" ? d : d.day)
-        )
-      : null
-  const hasLimits = Boolean(limitByMonth || limitByMonthDay || limitByWeekday)
-
-  const passesLimits = (candidate: TZDate): boolean => {
-    if (limitByMonth && !limitByMonth.includes(candidate.getMonth() + 1)) {
-      return false
-    }
-    if (limitByWeekday && !limitByWeekday.includes(candidate.getDay())) {
-      return false
-    }
-    if (limitByMonthDay) {
-      const total = daysInMonth(candidate.getFullYear(), candidate.getMonth())
-      const day = candidate.getDate()
-      // negative BYMONTHDAY counts back from month end, as in monthDays
-      if (!limitByMonthDay.some((n) => (n < 0 ? total + 1 + n : n) === day)) {
-        return false
-      }
-    }
-    return true
-  }
-
-  /** Wall-clock instant in the display zone carrying DTSTART's time-of-day. */
-  const zonedDate = (year: number, month: number, day: number) =>
-    new TZDate(
-      year,
-      month,
-      day,
-      zonedStart.getHours(),
-      zonedStart.getMinutes(),
-      zonedStart.getSeconds(),
-      zonedStart.getMilliseconds(),
-      ctx.timeZone
-    )
-
-  /** Selected days-of-month, ascending: BYMONTHDAY (and) BYDAY, else the clamped anchor day. */
-  const monthDays = (year: number, month: number): number[] => {
-    const total = daysInMonth(year, month)
-    let days: number[] | null = null
-    if (rule.byMonthDay?.length) {
-      // negative BYMONTHDAY counts back from month end; nonexistent days skip
-      days = rule.byMonthDay
-        .map((n) => (n < 0 ? total + 1 + n : n))
-        .filter((n) => n >= 1 && n <= total)
-    }
-    if (monthlyByDay) {
-      const byDayMatches: number[] = []
-      for (const entry of monthlyByDay) {
-        const day = typeof entry === "string" ? entry : entry.day
-        const ordinal = typeof entry === "string" ? 0 : entry.ordinal
-        const weekday = WEEKDAYS.indexOf(day)
-        const matches: number[] = []
-        for (let d = 1; d <= total; d++) {
-          if (new Date(year, month, d).getDay() === weekday) matches.push(d)
-        }
-        if (ordinal === 0) {
-          byDayMatches.push(...matches) // plain BYDAY: every matching weekday
-        } else {
-          // 2TU = 2nd Tuesday, -1FR = last Friday; absent ordinals skip
-          const pick =
-            ordinal > 0
-              ? matches[ordinal - 1]
-              : matches[matches.length + ordinal]
-          if (pick !== undefined) byDayMatches.push(pick)
-        }
-      }
-      days = days ? days.filter((n) => byDayMatches.includes(n)) : byDayMatches
-    }
-    if (!days) days = [Math.min(zonedStart.getDate(), total)] // clamp to month end
-    return [...new Set(days)].sort((a, b) => a - b)
-  }
-
-  /** Chronological candidates of one period, derived from the DTSTART anchor by index (no drift). */
-  const periodCandidates = (period: number): TZDate[] => {
-    if (rule.freq === "daily") return [addDays(zonedStart, period * interval)]
-    if (rule.freq === "weekly") {
-      const base = addWeeks(zonedStart, period * interval)
-      if (!weeklyDays) return [base]
-      const week: TZDate[] = []
-      // walk the WKST-aligned week so candidates stay chronological
-      const baseOffset = fromWeekStart(base.getDay())
-      for (let offset = 0; offset < 7; offset++) {
-        const candidate = addDays(base, offset - baseOffset)
-        if (!weeklyDays.includes(candidate.getDay())) continue
-        // days of the DTSTART week before DTSTART are not part of the series
-        if (candidate.getTime() < zonedStart.getTime()) continue
-        week.push(candidate)
-      }
-      return week
-    }
-    if (rule.freq === "monthly") {
-      const anchor = addMonths(zonedStart, period * interval)
-      const year = anchor.getFullYear()
-      const month = anchor.getMonth()
-      return monthDays(year, month)
-        .map((day) => zonedDate(year, month, day))
-        .filter((c) => c.getTime() >= zonedStart.getTime())
-    }
-    // yearly
-    const year = addYears(zonedStart, period * interval).getFullYear()
-    const dates: TZDate[] = []
-    for (const month of yearlyMonths) {
-      for (const day of monthDays(year, month - 1)) {
-        dates.push(zonedDate(year, month - 1, day))
-      }
-    }
-    return dates.filter((c) => c.getTime() >= zonedStart.getTime())
-  }
-
-  /** Candidates of one period with the LIMIT filters applied. */
-  const candidatesFor = (period: number): TZDate[] =>
-    hasLimits
-      ? periodCandidates(period).filter(passesLimits)
-      : periodCandidates(period)
-
-  /** Earliest/latest instant a period can produce - loop bounds without expanding it. */
-  const periodEdge = (period: number, edge: "first" | "last"): TZDate => {
-    if (rule.freq === "daily") return addDays(zonedStart, period * interval)
-    if (rule.freq === "weekly") {
-      const base = addWeeks(zonedStart, period * interval)
-      if (!weeklyDays) return base
-      return addDays(
-        base,
-        (edge === "first" ? 0 : 6) - fromWeekStart(base.getDay())
-      )
-    }
-    if (rule.freq === "monthly") {
-      const anchor = addMonths(zonedStart, period * interval)
-      const year = anchor.getFullYear()
-      const month = anchor.getMonth()
-      return zonedDate(
-        year,
-        month,
-        edge === "first" ? 1 : daysInMonth(year, month)
-      )
-    }
-    const year = addYears(zonedStart, period * interval).getFullYear()
-    const month =
-      (edge === "first"
-        ? yearlyMonths[0]
-        : yearlyMonths[yearlyMonths.length - 1]) - 1
-    return zonedDate(
-      year,
-      month,
-      edge === "first" ? 1 : daysInMonth(year, month)
-    )
-  }
-
-  // O(1) fast-forward: land a couple of periods before the window instead of
-  // iterating from DTSTART, so years-old series still reach the visible range.
-  const aheadMs = range.start.getTime() - durationMs - zonedStart.getTime()
-  const stepMs = PERIOD_MS[rule.freq] * interval
-  let startPeriod =
-    aheadMs > 0 ? Math.max(0, Math.floor(aheadMs / stepMs) - 2) : 0
-  // mean-length drift is bounded well under one period - refine forward
-  while (
-    periodEdge(startPeriod, "last").getTime() + durationMs <=
-    range.start.getTime()
-  ) {
-    startPeriod++
-  }
-
-  // series ordinal at startPeriod, so COUNT and recurrenceIndex stay exact
-  let index = 0
-  if (startPeriod > 0) {
-    if (hasMonthDayParts || hasLimits) {
-      // per-period counts vary (skipped days, 4-vs-5 weekday months, a LIMIT
-      // filter that empties a whole period) - sum them
-      for (let period = 0; period < startPeriod; period++) {
-        index += candidatesFor(period).length
-      }
-    } else if (weeklyDays) {
-      // week 0 only counts selected weekdays at/after DTSTART's, inside the
-      // WKST-aligned week that holds it
-      const anchorOffset = fromWeekStart(zonedStart.getDay())
-      const firstWeek = weeklyDays.filter(
-        (d) => fromWeekStart(d) >= anchorOffset
-      ).length
-      index = firstWeek + (startPeriod - 1) * weeklyDays.length
-    } else {
-      index = startPeriod // one occurrence per period
-    }
-  }
-
-  const occurrences: EventCalendarOccurrence<TData>[] = []
-
-  const pushIfVisible = (rawStart: Date) => {
-    // normalize to a plain instant so consumers never receive zone-carrying
-    // TZDate instances (mixed-zone formatting bugs)
-    const start = new Date(rawStart.getTime())
-    if (exTimes.has(start.getTime())) return
-    const end = endFor(start)
-    if (start < range.end && end > range.start) {
-      occurrences.push({
-        key: `${event.id}::${start.toISOString()}`,
-        eventId: event.id,
-        event,
-        start,
-        end,
-        allDay,
-        isRecurring: true,
-        recurrenceIndex: index,
-      })
-    }
-  }
-
-  let iterations = 0
-  let period = startPeriod
-  while (iterations < MAX_ITERATIONS && occurrences.length < MAX_OCCURRENCES) {
-    iterations++
-    if (rule.count !== undefined && index >= rule.count) break
-    // whole-period bounds: never break on a mid-period weekday/day-of-month,
-    // so earlier candidates of the final period are still emitted
-    const earliest = periodEdge(period, "first")
-    if (earliest.getTime() >= range.end.getTime()) break
-    if (rule.until && earliest.getTime() > rule.until.getTime()) break
-
-    let ended = false
-    for (const candidate of candidatesFor(period)) {
-      if (rule.count !== undefined && index >= rule.count) {
-        ended = true
-        break
-      }
-      if (rule.until && candidate.getTime() > rule.until.getTime()) {
-        ended = true
-        break
-      }
-      pushIfVisible(candidate)
-      index++
-      if (occurrences.length >= MAX_OCCURRENCES) {
-        ended = true
-        break
-      }
-    }
-    if (ended) break
-    period++
-  }
-
-  // RDATE: extra instants join the set (deduped against generated starts and
-  // exclusions) with the same wall-time duration. Sorted so direct consumers
-  // still receive chronological order (buildEventIndex re-sorts regardless).
-  if (rule.rDates?.length) {
-    const seen = new Set(occurrences.map((o) => o.start.getTime()))
-    for (const rDate of rule.rDates) {
-      const start = new Date(rDate.getTime())
-      if (seen.has(start.getTime()) || exTimes.has(start.getTime())) continue
-      const end = endFor(start)
-      if (start >= range.end || end <= range.start) continue
-      seen.add(start.getTime())
-      occurrences.push({
-        key: `${event.id}::${start.toISOString()}`,
-        eventId: event.id,
-        event,
-        start,
-        end,
-        allDay,
-        isRecurring: true,
-        // keep counting past the generated instants: an RDATE with no index
-        // would fall back to undefined and break any consumer that identifies
-        // an instance by its position in the series
-        recurrenceIndex: index++,
-      })
-    }
-    occurrences.sort((a, b) => a.start.getTime() - b.start.getTime())
-  }
-
-  return occurrences
-}
-
-export {
-  EventCalendarRecurrenceError,
-  expandRecurrence,
-  formatRRuleString,
-  MAX_OCCURRENCES,
-  parseRRuleString,
-}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-resource-view.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-resource-view.tsx
deleted file mode 100644
index c27d25f..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-resource-view.tsx
+++ /dev/null
@@ -1,812 +0,0 @@
-"use client"
-
-import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react"
-import {
-  EventCalendarViewContext,
-  useEventCalendar,
-  useEventCalendarDay,
-  useEventCalendarSelector,
-  useEventCalendarSettings,
-  useEventCalendarViewConfig,
-  useEventCalendarViewSettings,
-} from "@/components/reui/event-calendar/event-calendar"
-import {
-  useEventCalendarGestures,
-  wasRecentChipPress,
-  wasRecentDrag,
-} from "@/components/reui/event-calendar/event-calendar-dnd"
-import {
-  EVENT_CALENDAR_GHOST,
-  EVENT_CALENDAR_SLOT_DRAFT,
-  EventCalendarEvent,
-} from "@/components/reui/event-calendar/event-calendar-event"
-import {
-  flattenResources,
-  getDayKey,
-  getDayTotalMinutes,
-  packTimedSegments,
-  resolveOffDay,
-  snapMinutes,
-  toZoned,
-  zonedStartOfDay,
-} from "@/components/reui/event-calendar/event-calendar-lib"
-import {
-  EventCalendarNowIndicator,
-  EventCalendarTimeGutter,
-  minuteBlockStyle,
-} from "@/components/reui/event-calendar/event-calendar-time-grid"
-import type {
-  EventCalendarResource,
-  EventCalendarSegment,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { addDays, addMinutes } from "date-fns"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import { ScrollArea } from "@evobgp/ui/components/scroll-area"
-
-const EMPTY_ALL_DAY_SEGMENTS: EventCalendarSegment[] = []
-
-interface EventCalendarResourceViewProps extends useRender.ComponentProps<"div"> {
-  dayStartHour?: number
-  dayEndHour?: number
-  showAllDay?: boolean
-  /** Gutter/gridline interval in minutes; defaults to the interval view config. */
-  interval?: number
-}
-
-/** Leaf resources become booking columns for the anchor day. */
-function EventCalendarResourceView({
-  className,
-  render,
-  dayStartHour,
-  dayEndHour,
-  showAllDay = true,
-  interval: intervalProp,
-  ...props
-}: EventCalendarResourceViewProps) {
-  const instance = useEventCalendar()
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const { effective } = useEventCalendarViewSettings()
-  const anchorDate = useEventCalendarSelector((state) => state.date, {
-    isEqual: (a, b) => a.getTime() === b.getTime(),
-  })
-
-  const startHour = dayStartHour ?? settings.dayStartHour
-  const endHour = dayEndHour ?? settings.dayEndHour
-  const interval = Math.min(
-    Math.max(intervalProp ?? viewConfig.interval, 5),
-    240
-  )
-  const contained = viewConfig.scrollMode !== "page"
-  const day = zonedStartOfDay(anchorDate, settings.timeZone)
-
-  const resources = useMemo(
-    () =>
-      flattenResources(settings.resources)
-        .filter(({ resource }) => !resource.children?.length)
-        .map(({ resource }) => resource),
-    [settings.resources]
-  )
-
-  // Initial scroll + api.scrollToTime (same contract as the time grid)
-  const scrollRef = useRef<HTMLDivElement | null>(null)
-  useEffect(() => {
-    if (!contained) return
-    const el = scrollRef.current
-    if (!el) return
-    const viewport = el.querySelector<HTMLElement>(
-      "[data-slot=scroll-area-viewport]"
-    )
-    const slotRow = el.querySelector<HTMLElement>(
-      "[data-slot=event-calendar-time-gutter] > div"
-    )
-    const slotPx = slotRow?.getBoundingClientRect().height || 64
-    const pxPerMinute = slotPx / interval
-    const scrollTo = (minutes: number) => {
-      // keep the hour label above the target line visible (it hangs -top-2)
-      viewport?.scrollTo({
-        top: Math.max(0, (minutes - startHour * 60) * pxPerMinute - 12),
-      })
-    }
-    scrollTo(viewConfig.scrollToHour * 60)
-    instance.internals.registerScrollHandler((time) => {
-      const minutes =
-        typeof time === "number"
-          ? time
-          : toZoned(time, settings.timeZone).getHours() * 60 +
-            toZoned(time, settings.timeZone).getMinutes()
-      scrollTo(minutes)
-    })
-    // Classic (width-consuming) scrollbars squeeze the scrolling track while
-    // the header/all-day rows outside keep full width, drifting the column
-    // borders. Mirror the measured gutter onto those rows via a CSS var -
-    // 0px for overlay scrollbars and the custom ScrollArea, so both modes
-    // lay out identically.
-    const root = el.closest<HTMLElement>(
-      "[data-slot=event-calendar-time-grid], [data-slot=event-calendar-resource-view]"
-    )
-    const syncScrollbarGutter = () => {
-      root?.style.setProperty(
-        "--ec-scrollbar-w",
-        `${viewport ? viewport.offsetWidth - viewport.clientWidth : 0}px`
-      )
-    }
-    syncScrollbarGutter()
-    const gutterObserver = viewport
-      ? new ResizeObserver(syncScrollbarGutter)
-      : null
-    if (viewport) gutterObserver?.observe(viewport)
-    return () => {
-      instance.internals.registerScrollHandler(null)
-      gutterObserver?.disconnect()
-    }
-  }, [
-    contained,
-    instance,
-    settings.timeZone,
-    startHour,
-    interval,
-    viewConfig.scrollToHour,
-    // scrollbars custom<->native swaps the scroller DOM: re-bind the
-    // viewport, the scroll wiring, and the measured --ec-scrollbar-w
-    viewConfig.scrollbars,
-  ])
-
-  const slots = useMemo(() => {
-    const result: number[] = []
-    for (let m = startHour * 60; m < endHour * 60; m += interval) {
-      result.push(m)
-    }
-    return result
-  }, [startHour, endHour, interval])
-
-  // All-day segments for renderAllDaySection - the same index bucket the
-  // cells read; inert (stable empty array, so the subscription never
-  // re-renders) while the override is unset.
-  const allDaySegments = useEventCalendarSelector<
-    unknown,
-    EventCalendarSegment[]
-  >(
-    () =>
-      viewConfig.renderAllDaySection
-        ? (instance.internals
-            .getIndex()
-            .byDay.get(getDayKey(day, settings.timeZone))?.allDay ??
-          EMPTY_ALL_DAY_SEGMENTS)
-        : EMPTY_ALL_DAY_SEGMENTS,
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a.length === b.length && a.every((segment, i) => segment === b[i])),
-    }
-  )
-
-  const gridTemplateColumns = `repeat(${resources.length || 1}, minmax(var(--ec-resource-col-min,8rem), 1fr))`
-
-  const track = (
-    <div className="relative flex">
-      {/* shared gutter component, so renderTimeGutterSlot and
-          classNames.timeGutter customizations apply here too */}
-      <EventCalendarTimeGutter
-        days={[day]}
-        slots={slots}
-        startHour={startHour}
-        interval={interval}
-      />
-      <div className="grid min-w-0 flex-1" style={{ gridTemplateColumns }}>
-        {resources.map((resource) => (
-          <EventCalendarResourceColumn
-            key={resource.id}
-            resource={resource}
-            day={day}
-            startHour={startHour}
-            endHour={endHour}
-            interval={interval}
-          />
-        ))}
-      </div>
-      {effective.nowIndicator && (
-        <EventCalendarNowIndicator
-          days={[day]}
-          startHour={startHour}
-          endHour={endHour}
-        />
-      )}
-    </div>
-  )
-
-  const defaultProps = {
-    "data-slot": "event-calendar-resource-view",
-    "data-view": "resource",
-    className: cn(
-      "flex flex-col border-t",
-      contained && "min-h-0 flex-1 overflow-hidden",
-      viewConfig.classNames?.timeGrid,
-      className
-    ),
-    style: { "--ec-hour-height": "4rem" } as CSSProperties,
-    children: (
-      <>
-        {/* Resource header row */}
-        <div
-          className={cn(
-            "flex border-b pe-(--ec-scrollbar-w,0px)",
-            !contained &&
-              "bg-background sticky top-(--ec-sticky-offset,0px) z-20",
-            viewConfig.classNames?.timeGridHeader
-          )}
-        >
-          <div className="w-(--ec-gutter-width,4.5rem) shrink-0 border-e" />
-          <div className="grid min-w-0 flex-1" style={{ gridTemplateColumns }}>
-            {resources.map((resource) => (
-              <div
-                key={resource.id}
-                data-slot="event-calendar-resource-header"
-                className={cn(
-                  "min-w-0 truncate border-e px-2 py-1.5 text-center font-medium last:border-e-0",
-                  viewConfig.classNames?.resourceHeader
-                )}
-              >
-                {viewConfig.renderResourceHeader?.({ resource }) ??
-                  resource.title}
-              </div>
-            ))}
-          </div>
-        </div>
-        {/* All-day row per resource */}
-        {showAllDay && (
-          <div
-            data-slot="event-calendar-all-day-section"
-            className={cn(
-              "flex border-b pe-(--ec-scrollbar-w,0px)",
-              viewConfig.classNames?.allDaySection
-            )}
-          >
-            {viewConfig.renderAllDaySection?.({
-              days: [day],
-              segments: allDaySegments,
-            }) ?? (
-              <>
-                <div
-                  className={cn(
-                    // pt-1.5 matches the all-day cell's top inset; the inner box is
-                    // one bar-row tall and centers the label so it sits on the SAME
-                    // baseline as the first all-day chip and stays top-aligned when
-                    // the chips wrap onto more lanes (mirrors the time-grid label)
-                    "text-muted-foreground w-(--ec-gutter-width,4.5rem) shrink-0 border-e ps-2 pe-2.5 pt-1.5",
-                    viewConfig.classNames?.allDayLabel
-                  )}
-                >
-                  <span className="flex h-[calc(var(--ec-month-bar-h,1.625rem)-0.125rem)] items-center justify-end">
-                    {settings.i18n.labels.allDay}
-                  </span>
-                </div>
-                <div
-                  className="grid min-w-0 flex-1"
-                  style={{ gridTemplateColumns }}
-                >
-                  {resources.map((resource) => (
-                    <EventCalendarResourceAllDayCell
-                      key={resource.id}
-                      resource={resource}
-                      day={day}
-                    />
-                  ))}
-                </div>
-              </>
-            )}
-          </div>
-        )}
-        {contained ? (
-          <div ref={scrollRef} className="min-h-0 flex-1">
-            {viewConfig.scrollbars === "native" ? (
-              <div
-                data-slot="scroll-area-viewport"
-                data-ec-native-scroll=""
-                className="h-full overflow-y-auto"
-              >
-                {track}
-              </div>
-            ) : (
-              <ScrollArea className="h-full">{track}</ScrollArea>
-            )}
-          </div>
-        ) : (
-          track
-        )}
-      </>
-    ),
-  }
-
-  return (
-    <EventCalendarViewContext.Provider value={{ view: "resource" }}>
-      {useRender({
-        defaultTagName: "div",
-        render,
-        props: mergeProps<"div">(defaultProps, props),
-      })}
-    </EventCalendarViewContext.Provider>
-  )
-}
-
-function EventCalendarResourceAllDayCell({
-  resource,
-  day,
-}: {
-  resource: EventCalendarResource
-  day: Date
-}) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const { effective } = useEventCalendarViewSettings()
-  const gestures = useEventCalendarGestures()
-  const { segments } = useEventCalendarDay(day)
-  const mine = segments.allDay.filter(
-    (segment) => segment.occurrence.event.resourceId === resource.id
-  )
-  const dayStart = zonedStartOfDay(day, settings.timeZone)
-  const dayEnd = addDays(toZoned(dayStart, settings.timeZone), 1)
-  const isOff = resolveOffDay(
-    day,
-    settings.timeZone,
-    effective.offDays
-      ? typeof viewConfig.offDays === "object"
-        ? viewConfig.offDays
-        : true
-      : false,
-    settings.weekendDays
-  )
-  const offClassName =
-    (typeof viewConfig.offDays === "object" && viewConfig.offDays.className) ||
-    "bg-muted/25"
-  const isDropTarget = useEventCalendarSelector<
-    unknown,
-    "valid" | "invalid" | null
-  >((state) => {
-    const drag = state.drag
-    if (!drag || !drag.proposedDayGranular) return null
-    const covered = drag.proposedStart < dayEnd && drag.proposedEnd > dayStart
-    if (!covered) return null
-    return drag.valid ? "valid" : "invalid"
-  })
-  // Slot-draft highlight, mirroring the time-grid all-day cell. The dnd
-  // layer's all-day create branch does not plumb resourceId into the draft,
-  // so every resource cell covering the day highlights together.
-  const inDraft = useEventCalendarSelector<unknown, boolean>((state) => {
-    const draft = state.slotDraft
-    if (!draft || !draft.allDay) return false
-    return draft.start < dayEnd && draft.end > dayStart
-  })
-  return (
-    <div
-      data-slot="event-calendar-all-day-cell"
-      // data-ec-day makes this a DnD day target: without it collectSurface()
-      // finds no cells and dragging an all-day chip silently converts it to
-      // a timed event via the column branch
-      data-ec-day={dayStart.getTime()}
-      data-drop-target={isDropTarget ?? undefined}
-      data-off={isOff || undefined}
-      className={cn(
-        // reserve one bar row so the all-day row keeps the same height with or
-        // without events, matching the time-grid all-day row (which reserves
-        // the same via its bars-grid minHeight)
-        "relative flex min-h-[calc(var(--ec-month-bar-h,1.625rem)+0.625rem)] min-w-0 flex-col gap-0.5 border-e px-1 py-1.5 last:border-e-0",
-        isOff && offClassName,
-        viewConfig.dayClassName?.(day),
-        inDraft &&
-          cn(
-            EVENT_CALENDAR_SLOT_DRAFT.surface,
-            EVENT_CALENDAR_SLOT_DRAFT.segment,
-            EVENT_CALENDAR_SLOT_DRAFT.segmentStart,
-            EVENT_CALENDAR_SLOT_DRAFT.segmentEnd,
-            viewConfig.classNames?.slotDraft
-          ),
-        viewConfig.classNames?.allDayCell
-      )}
-      onPointerDown={(e) => {
-        if (e.target === e.currentTarget) gestures.beginCreate(e, day, true)
-      }}
-      onClick={(e) => {
-        if (
-          e.target === e.currentTarget &&
-          !wasRecentDrag() &&
-          !wasRecentChipPress()
-        ) {
-          settings.onSlotClick?.(
-            {
-              date: dayStart,
-              allDay: true,
-              view: "resource",
-              resourceId: resource.id,
-            },
-            e
-          )
-        }
-      }}
-    >
-      {mine.map((segment) => (
-        <EventCalendarEvent
-          key={segment.occurrence.key}
-          segment={segment}
-          // one bar-row tall, matching the time-grid all-day bars so the row
-          // height stays identical across views (and equals the reserved min)
-          className="h-[calc(var(--ec-month-bar-h,1.625rem)-0.125rem)]"
-        />
-      ))}
-      {isDropTarget && (
-        <span
-          aria-hidden
-          data-slot="event-calendar-drop-indicator"
-          data-drop-target={isDropTarget}
-          className={cn(
-            "pointer-events-none absolute inset-0.5 z-10 rounded-sm border border-dashed",
-            isDropTarget === "valid"
-              ? "border-primary/50"
-              : "border-destructive/60",
-            viewConfig.classNames?.dropIndicator
-          )}
-        />
-      )}
-    </div>
-  )
-}
-
-function EventCalendarResourceColumn({
-  resource,
-  day,
-  startHour,
-  endHour,
-  interval,
-}: {
-  resource: EventCalendarResource
-  day: Date
-  startHour: number
-  endHour: number
-  interval: number
-}) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const { effective } = useEventCalendarViewSettings()
-  const gestures = useEventCalendarGestures()
-  const { segments, isToday } = useEventCalendarDay(day)
-  const isOff = resolveOffDay(
-    day,
-    settings.timeZone,
-    effective.offDays
-      ? typeof viewConfig.offDays === "object"
-        ? viewConfig.offDays
-        : true
-      : false,
-    settings.weekendDays
-  )
-  const offClassName =
-    (typeof viewConfig.offDays === "object" && viewConfig.offDays.className) ||
-    "bg-muted/25"
-
-  const timeZone = settings.timeZone
-  const dayStart = zonedStartOfDay(day, timeZone)
-  const totalMinutes = getDayTotalMinutes(day, timeZone)
-  const boundsStartMin = startHour * 60
-  const boundsEndMin = Math.min(endHour * 60, totalMinutes)
-  const boundsMinutes = Math.max(60, boundsEndMin - boundsStartMin)
-
-  // Filter this resource's timed segments and repack per column.
-  // Clones keep the shared index cache untouched. Segments the day bounds clip
-  // away are dropped here too, otherwise they hold a column nobody can see and
-  // leave a phantom empty half beside the first in-bounds chip.
-  const packed = useMemo(() => {
-    const mine = segments.timed
-      .filter((segment) => {
-        if (segment.occurrence.event.resourceId !== resource.id) return false
-        const startMin = Math.max(segment.startMin ?? 0, boundsStartMin)
-        const endMin = Math.min(segment.endMin ?? startMin, boundsEndMin)
-        return endMin > boundsStartMin && startMin < boundsEndMin
-      })
-      .map((segment) => ({ ...segment }) as EventCalendarSegment)
-    packTimedSegments(mine)
-    return mine
-  }, [segments.timed, resource.id, boundsStartMin, boundsEndMin])
-
-  const dragGhost = useEventCalendarSelector<
-    unknown,
-    {
-      window: [number, number]
-      valid: boolean
-      kind: string
-      color?: string
-      title: string
-      occurrence: EventCalendarSegment["occurrence"]
-      proposedStart: Date
-      proposedEnd: Date
-    } | null
-  >(
-    (state) => {
-      const drag = state.drag
-      if (!drag || drag.proposedDayGranular) return null
-      // Moves carry a proposedResourceId (they can cross columns); resizes stay
-      // in place and leave it undefined, so fall back to the event's own
-      // resource - otherwise the resize ghost is filtered out of every column.
-      const targetResourceId =
-        drag.proposedResourceId ?? drag.occurrence.event.resourceId
-      if (targetResourceId !== resource.id) return null
-      const from = Math.max(
-        (drag.proposedStart.getTime() - dayStart.getTime()) / 60000,
-        boundsStartMin
-      )
-      const to = Math.min(
-        (drag.proposedEnd.getTime() - dayStart.getTime()) / 60000,
-        boundsEndMin
-      )
-      if (to <= from) return null
-      return {
-        window: [from, to] as [number, number],
-        valid: drag.valid,
-        kind: drag.kind,
-        color: drag.occurrence.event.color,
-        title: drag.occurrence.event.title,
-        occurrence: drag.occurrence,
-        proposedStart: drag.proposedStart,
-        proposedEnd: drag.proposedEnd,
-      }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.window[0] === b.window[0] &&
-          a.window[1] === b.window[1] &&
-          a.valid === b.valid &&
-          a.proposedStart.getTime() === b.proposedStart.getTime() &&
-          a.proposedEnd.getTime() === b.proposedEnd.getTime()),
-    }
-  )
-
-  // Instants behind `draftWindow` below, for the range readout. Same
-  // resource filter, so a draft on a neighbouring resource never labels this
-  // column.
-  const draftRange = useEventCalendarSelector<
-    unknown,
-    { start: Date; end: Date } | null
-  >(
-    (state) => {
-      const draft = state.slotDraft
-      if (!draft || draft.allDay || draft.resourceId !== resource.id) {
-        return null
-      }
-      return { start: draft.start, end: draft.end }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.start.getTime() === b.start.getTime() &&
-          a.end.getTime() === b.end.getTime()),
-    }
-  )
-
-  const draftWindow = useEventCalendarSelector<
-    unknown,
-    [number, number] | null
-  >(
-    (state) => {
-      const draft = state.slotDraft
-      if (!draft || draft.allDay || draft.resourceId !== resource.id) {
-        return null
-      }
-      const from = Math.max(
-        (draft.start.getTime() - dayStart.getTime()) / 60000,
-        boundsStartMin
-      )
-      const to = Math.min(
-        (draft.end.getTime() - dayStart.getTime()) / 60000,
-        boundsEndMin
-      )
-      return to > from ? [from, to] : null
-    },
-    {
-      isEqual: (a, b) =>
-        a === b || (a !== null && b !== null && a[0] === b[0] && a[1] === b[1]),
-    }
-  )
-
-  return (
-    <div
-      data-slot="event-calendar-day-column"
-      data-today={isToday || undefined}
-      data-off={isOff || undefined}
-      data-ec-day={dayStart.getTime()}
-      data-ec-bounds-start={boundsStartMin}
-      data-ec-bounds-end={boundsEndMin}
-      data-ec-resource={resource.id}
-      data-drop-target={
-        dragGhost ? (dragGhost.valid ? "valid" : "invalid") : undefined
-      }
-      role="group"
-      aria-label={resource.title}
-      className={cn(
-        "relative min-w-0 border-e last:border-e-0",
-        isOff && offClassName,
-        // the resource view is a single day, so today gets no column tint (the
-        // header marks it); only a consumer todayClassName can tint it
-        isToday && viewConfig.todayClassName,
-        viewConfig.dayClassName?.(day),
-        viewConfig.classNames?.dayColumn
-      )}
-      style={{
-        height: `calc(var(--ec-hour-height) * ${boundsMinutes / 60})`,
-        backgroundImage: `repeating-linear-gradient(to bottom, transparent, transparent calc(var(--ec-hour-height) * ${interval / 60} - var(--ec-slot-line-width, 1px)), var(--ec-slot-line-color, var(--color-border)) calc(var(--ec-hour-height) * ${interval / 60} - var(--ec-slot-line-width, 1px)), var(--ec-slot-line-color, var(--color-border)) calc(var(--ec-hour-height) * ${interval / 60}))`,
-      }}
-      onPointerDown={(e) => {
-        if (e.target === e.currentTarget) gestures.beginCreate(e, day, false)
-      }}
-      onClick={(e) => {
-        if (
-          e.target !== e.currentTarget ||
-          wasRecentDrag() ||
-          wasRecentChipPress()
-        )
-          return
-        const rect = e.currentTarget.getBoundingClientRect()
-        const pxPerMinute = rect.height / boundsMinutes
-        const minutes = snapMinutes(
-          boundsStartMin + (e.clientY - rect.top) / pxPerMinute,
-          settings.snapDuration
-        )
-        const clamped = Math.min(
-          Math.max(minutes, boundsStartMin),
-          boundsEndMin - settings.slotDuration
-        )
-        settings.onSlotClick?.(
-          {
-            date: addMinutes(dayStart, clamped),
-            end: addMinutes(dayStart, clamped + settings.slotDuration),
-            allDay: false,
-            view: "resource",
-            resourceId: resource.id,
-          },
-          e
-        )
-      }}
-    >
-      {packed.map((segment) => {
-        const startMin = Math.max(segment.startMin ?? 0, boundsStartMin)
-        const endMin = Math.min(segment.endMin ?? startMin, boundsEndMin)
-        if (endMin <= boundsStartMin || startMin >= boundsEndMin) return null
-        const columnCount = segment.columnCount ?? 1
-        const column = segment.column ?? 0
-        const span = segment.columnSpan ?? 1
-        const zIndex = segment.occurrence.event.zIndex ?? 10 + column
-        // Strict side-by-side columns - no cascade overlap (fade-truncate +
-        // hover reveal carry the legibility); the ring separates neighbors.
-        const colPct = 100 / columnCount
-        return (
-          <div
-            key={segment.occurrence.key}
-            // min-h keeps 15-min chips readable (Google-style: the block may
-            // slightly outgrow its true window); hover raises a squeezed
-            // cascade chip above its overlapping neighbors
-            className="absolute z-(--ec-z) min-h-(--ec-event-min-h,1.5rem) px-0.5 hover:z-40"
-            style={
-              {
-                ...minuteBlockStyle(startMin, endMin, boundsStartMin),
-                left: `${column * colPct}%`,
-                width: `${span * colPct}%`,
-                "--ec-z": zIndex,
-              } as CSSProperties
-            }
-          >
-            <EventCalendarEvent
-              segment={segment}
-              className={cn(
-                columnCount > 1 && "ring-background ring-1",
-                // short chips: single centered row, exact-fit line height so
-                // the title never slices mid-glyph
-                endMin - startMin < viewConfig.compactEventMinutes
-                  ? "h-full gap-1 py-0 leading-4"
-                  : "h-full flex-col items-start justify-start gap-0 py-1",
-                viewConfig.classNames?.timedChip
-              )}
-            />
-          </div>
-        )
-      })}
-      {/* Standardized ghost (EVENT_CALENDAR_GHOST): faint drop placeholder
-          for moves (the cursor-attached carry clone owns the visual), dashed
-          clone for resizes, destructive marking when invalid. */}
-      {dragGhost && (
-        <div
-          data-slot="event-calendar-drag-ghost"
-          data-kind={dragGhost.kind}
-          data-drop-invalid={!dragGhost.valid || undefined}
-          className={cn(
-            "pointer-events-none absolute inset-x-0.5 z-50 min-h-(--ec-event-min-h,1.5rem)",
-            dragGhost.kind === "move"
-              ? cn(
-                  EVENT_CALENDAR_GHOST.move,
-                  !dragGhost.valid && EVENT_CALENDAR_GHOST.invalid
-                )
-              : cn(
-                  EVENT_CALENDAR_GHOST.resize,
-                  !dragGhost.valid && EVENT_CALENDAR_GHOST.invalidResize
-                ),
-            viewConfig.classNames?.dragGhost
-          )}
-          style={
-            {
-              ...minuteBlockStyle(
-                dragGhost.window[0],
-                dragGhost.window[1],
-                boundsStartMin
-              ),
-              "--ec-event-color": dragGhost.color ?? "var(--color-primary)",
-            } as CSSProperties
-          }
-        >
-          {dragGhost.kind !== "move" && (
-            <EventCalendarEvent
-              preview
-              segment={{
-                occurrence: {
-                  ...dragGhost.occurrence,
-                  start: dragGhost.proposedStart,
-                  end: dragGhost.proposedEnd,
-                  allDay: false,
-                },
-                day,
-                isStart: true,
-                isEnd: true,
-                continuesBefore: false,
-                continuesAfter: false,
-                startMin: dragGhost.window[0],
-                endMin: dragGhost.window[1],
-              }}
-              className={cn(
-                dragGhost.window[1] - dragGhost.window[0] <
-                  viewConfig.compactEventMinutes
-                  ? "h-full gap-1 py-0 leading-4"
-                  : "h-full flex-col items-start justify-start gap-0 py-1",
-                viewConfig.classNames?.timedChip,
-                "inset-ring-0",
-                !dragGhost.valid && EVENT_CALENDAR_GHOST.invalidContent
-              )}
-            />
-          )}
-        </div>
-      )}
-      {draftWindow && (
-        <div
-          data-slot="event-calendar-slot-draft"
-          className={cn(
-            EVENT_CALENDAR_SLOT_DRAFT.box,
-            "pointer-events-none absolute inset-x-0.5 z-40 overflow-hidden",
-            viewConfig.classNames?.slotDraft
-          )}
-          style={minuteBlockStyle(
-            draftWindow[0],
-            draftWindow[1],
-            boundsStartMin
-          )}
-        >
-          {draftRange && (
-            <span className={cn("block", EVENT_CALENDAR_SLOT_DRAFT.label)}>
-              {settings.i18n.functions.formatEventTime(
-                toZoned(draftRange.start, settings.timeZone),
-                toZoned(draftRange.end, settings.timeZone),
-                false,
-                { locale: settings.locale }
-              )}
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { EventCalendarResourceView }
-export type { EventCalendarResourceViewProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-time-grid.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-time-grid.tsx
deleted file mode 100644
index 064b429..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-time-grid.tsx
+++ /dev/null
@@ -1,1358 +0,0 @@
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-} from "react"
-import {
-  EventCalendarViewContext,
-  useEventCalendar,
-  useEventCalendarDay,
-  useEventCalendarSelector,
-  useEventCalendarSettings,
-  useEventCalendarViewConfig,
-  useEventCalendarViewContext,
-  useEventCalendarViewSettings,
-} from "@/components/reui/event-calendar/event-calendar"
-import {
-  useEventCalendarGestures,
-  wasRecentChipPress,
-  wasRecentDrag,
-} from "@/components/reui/event-calendar/event-calendar-dnd"
-import {
-  EVENT_CALENDAR_GHOST,
-  EVENT_CALENDAR_SLOT_DRAFT,
-  EventCalendarEvent,
-} from "@/components/reui/event-calendar/event-calendar-event"
-import {
-  getDayKey,
-  getDayTotalMinutes,
-  getRangeKey,
-  packTimedSegments,
-  resolveOffDay,
-  snapMinutes,
-  toZoned,
-  zonedStartOfDay,
-} from "@/components/reui/event-calendar/event-calendar-lib"
-import type {
-  CalendarView,
-  EventCalendarDateRange,
-  EventCalendarDragState,
-  EventCalendarSegment,
-  EventCalendarSlotDraft,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { addDays, addMinutes, differenceInMinutes, format } from "date-fns"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import { ScrollArea } from "@evobgp/ui/components/scroll-area"
-
-/** Current time, refreshed on an interval and on tab focus. */
-function useNow(intervalMs = 30_000): Date {
-  const [now, setNow] = useState(() => new Date())
-  useEffect(() => {
-    const tick = () => setNow(new Date())
-    const id = setInterval(tick, intervalMs)
-    document.addEventListener("visibilitychange", tick)
-    window.addEventListener("focus", tick)
-    return () => {
-      clearInterval(id)
-      document.removeEventListener("visibilitychange", tick)
-      window.removeEventListener("focus", tick)
-    }
-  }, [intervalMs])
-  return now
-}
-
-const EMPTY_ALL_DAY_SEGMENTS: EventCalendarSegment[] = []
-
-interface EventCalendarTimeGridProps extends useRender.ComponentProps<"div"> {
-  view: Extract<CalendarView, "week" | "day" | "days">
-  dayStartHour?: number
-  dayEndHour?: number
-  showAllDay?: boolean
-  /** Gutter/gridline interval in minutes; defaults to the interval view config. */
-  interval?: number
-}
-
-function EventCalendarTimeGrid({
-  view,
-  className,
-  render,
-  dayStartHour,
-  dayEndHour,
-  showAllDay = true,
-  interval: intervalProp,
-  ...props
-}: EventCalendarTimeGridProps) {
-  const instance = useEventCalendar()
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const visibleRange = useEventCalendarSelector<
-    unknown,
-    EventCalendarDateRange
-  >((state) => state.visibleRange, {
-    isEqual: (a, b) => getRangeKey(a) === getRangeKey(b),
-  })
-
-  const startHour = dayStartHour ?? settings.dayStartHour
-  const endHour = dayEndHour ?? settings.dayEndHour
-  const interval = Math.min(
-    Math.max(intervalProp ?? viewConfig.interval, 5),
-    240
-  )
-  const contained = viewConfig.scrollMode !== "page"
-
-  const { effective } = useEventCalendarViewSettings()
-  const days = useMemo(() => {
-    const result: Date[] = []
-    let cursor = zonedStartOfDay(visibleRange.start, settings.timeZone)
-    while (cursor < visibleRange.end) {
-      result.push(cursor)
-      cursor = zonedStartOfDay(
-        addDays(toZoned(cursor, settings.timeZone), 1),
-        settings.timeZone
-      )
-    }
-    if (effective.weekends || view === "day") return result
-    // Same weekend definition the month view filters on, so the toggle cannot
-    // hide one set of days here and another one there.
-    const filtered = result.filter(
-      (day) =>
-        !settings.weekendDays.includes(toZoned(day, settings.timeZone).getDay())
-    )
-    // A short N-days window landing entirely on the weekend would otherwise
-    // filter to nothing and emit an invalid repeat(0, ...) track.
-    return filtered.length ? filtered : result
-  }, [
-    visibleRange,
-    settings.timeZone,
-    settings.weekendDays,
-    effective.weekends,
-    view,
-  ])
-
-  // Initial scroll to scrollToHour + api.scrollToTime registration (contained)
-  const scrollRef = useRef<HTMLDivElement | null>(null)
-  useEffect(() => {
-    if (!contained) return
-    const el = scrollRef.current
-    if (!el) return
-    const viewport = el.querySelector<HTMLElement>(
-      "[data-slot=scroll-area-viewport]"
-    )
-    // Measure a rendered slot row - the CSS var is in rem, rects are in px.
-    const slotRow = el.querySelector<HTMLElement>(
-      "[data-slot=event-calendar-time-gutter] > div"
-    )
-    const slotPx = slotRow?.getBoundingClientRect().height || 64
-    const pxPerMinute = slotPx / interval
-    const scrollTo = (minutes: number) => {
-      // keep the hour label above the target line visible (it hangs -top-2)
-      viewport?.scrollTo({
-        top: Math.max(0, (minutes - startHour * 60) * pxPerMinute - 12),
-      })
-    }
-    scrollTo(viewConfig.scrollToHour * 60)
-    instance.internals.registerScrollHandler((time) => {
-      const minutes =
-        typeof time === "number"
-          ? time
-          : toZoned(time, settings.timeZone).getHours() * 60 +
-            toZoned(time, settings.timeZone).getMinutes()
-      scrollTo(minutes)
-    })
-    // Classic (width-consuming) scrollbars squeeze the scrolling track while
-    // the header/all-day rows outside keep full width, drifting the column
-    // borders. Mirror the measured gutter onto those rows via a CSS var -
-    // 0px for overlay scrollbars and the custom ScrollArea, so both modes
-    // lay out identically.
-    const root = el.closest<HTMLElement>(
-      "[data-slot=event-calendar-time-grid], [data-slot=event-calendar-resource-view]"
-    )
-    const syncScrollbarGutter = () => {
-      root?.style.setProperty(
-        "--ec-scrollbar-w",
-        `${viewport ? viewport.offsetWidth - viewport.clientWidth : 0}px`
-      )
-    }
-    syncScrollbarGutter()
-    const gutterObserver = viewport
-      ? new ResizeObserver(syncScrollbarGutter)
-      : null
-    if (viewport) gutterObserver?.observe(viewport)
-    return () => {
-      instance.internals.registerScrollHandler(null)
-      gutterObserver?.disconnect()
-    }
-  }, [
-    contained,
-    instance,
-    settings.timeZone,
-    startHour,
-    interval,
-    viewConfig.scrollToHour,
-    // scrollbars custom<->native swaps the scroller DOM: re-bind the
-    // viewport, the scroll wiring, and the measured --ec-scrollbar-w
-    viewConfig.scrollbars,
-  ])
-
-  // Gutter slots in minutes from the zoned day start
-  const slots = useMemo(() => {
-    const result: number[] = []
-    for (let m = startHour * 60; m < endHour * 60; m += interval) {
-      result.push(m)
-    }
-    return result
-  }, [startHour, endHour, interval])
-
-  // Section-level all-day segments for renderAllDaySection - reads the same
-  // per-day index buckets the cells subscribe to; inert (stable empty array,
-  // so the subscription never re-renders) while the override is unset.
-  const allDaySegments = useEventCalendarSelector<
-    unknown,
-    EventCalendarSegment[]
-  >(
-    () => {
-      if (!viewConfig.renderAllDaySection) return EMPTY_ALL_DAY_SEGMENTS
-      const byDay = instance.internals.getIndex().byDay
-      const result = days.flatMap(
-        (day) => byDay.get(getDayKey(day, settings.timeZone))?.allDay ?? []
-      )
-      return result.length ? result : EMPTY_ALL_DAY_SEGMENTS
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a.length === b.length && a.every((segment, i) => segment === b[i])),
-    }
-  )
-
-  const gridTemplateColumns = `repeat(${days.length}, minmax(var(--ec-day-col-min,0px), 1fr))`
-
-  const track = (
-    <div className="relative flex">
-      <EventCalendarTimeGutter
-        days={days}
-        slots={slots}
-        startHour={startHour}
-        interval={interval}
-      />
-      <div className="grid min-w-0 flex-1" style={{ gridTemplateColumns }}>
-        {days.map((day) => (
-          <EventCalendarDayColumn
-            key={day.getTime()}
-            day={day}
-            startHour={startHour}
-            endHour={endHour}
-            interval={interval}
-          />
-        ))}
-      </div>
-      {effective.nowIndicator && (
-        <EventCalendarNowIndicator
-          days={days}
-          startHour={startHour}
-          endHour={endHour}
-        />
-      )}
-    </div>
-  )
-
-  const defaultProps = {
-    "data-slot": "event-calendar-time-grid",
-    "data-view": view,
-    className: cn(
-      "flex flex-col border-t",
-      contained && "min-h-0 flex-1 overflow-hidden",
-      viewConfig.classNames?.timeGrid,
-      className
-    ),
-    style: { "--ec-hour-height": "4rem" } as CSSProperties,
-    children: (
-      <>
-        {/* Day-header row (sticky below the nav in page scroll mode) */}
-        <div
-          className={cn(
-            "flex border-b pe-(--ec-scrollbar-w,0px)",
-            !contained &&
-              "bg-background sticky top-(--ec-sticky-offset,0px) z-20",
-            viewConfig.classNames?.timeGridHeader
-          )}
-        >
-          <div className="w-(--ec-gutter-width,4.5rem) shrink-0 border-e" />
-          <div className="grid min-w-0 flex-1" style={{ gridTemplateColumns }}>
-            {days.map((day) => (
-              <EventCalendarDayHeader
-                key={day.getTime()}
-                day={day}
-                view={view}
-              />
-            ))}
-          </div>
-        </div>
-        {/* All-day row */}
-        {showAllDay && (
-          <div
-            data-slot="event-calendar-all-day-section"
-            className={cn(
-              "flex border-b pe-(--ec-scrollbar-w,0px)",
-              viewConfig.classNames?.allDaySection
-            )}
-          >
-            {viewConfig.renderAllDaySection?.({
-              days,
-              segments: allDaySegments,
-            }) ?? (
-              <>
-                <div
-                  className={cn(
-                    // pt-1.5 matches the bar overlay's top inset; the inner box
-                    // is one bar-row tall and centers the label so it sits on
-                    // the SAME baseline as the first all-day chip and stays top-
-                    // aligned when the chips wrap onto more lanes
-                    "text-muted-foreground w-(--ec-gutter-width,4.5rem) shrink-0 border-e ps-2 pe-2.5 pt-1.5",
-                    viewConfig.classNames?.allDayLabel
-                  )}
-                >
-                  <span className="flex h-[calc(var(--ec-month-bar-h,1.625rem)-0.125rem)] items-center justify-end">
-                    {settings.i18n.labels.allDay}
-                  </span>
-                </div>
-                <EventCalendarAllDayBars
-                  days={days}
-                  gridTemplateColumns={gridTemplateColumns}
-                />
-              </>
-            )}
-          </div>
-        )}
-        {/* Time track: internal scroll (contained) or document flow (page) */}
-        {contained ? (
-          <div ref={scrollRef} className="min-h-0 flex-1">
-            {viewConfig.scrollbars === "native" ? (
-              <div
-                data-slot="scroll-area-viewport"
-                data-ec-native-scroll=""
-                className="h-full overflow-y-auto"
-              >
-                {track}
-              </div>
-            ) : (
-              <ScrollArea className="h-full">{track}</ScrollArea>
-            )}
-          </div>
-        ) : (
-          track
-        )}
-      </>
-    ),
-  }
-
-  return (
-    <EventCalendarViewContext.Provider value={{ view }}>
-      {useRender({
-        defaultTagName: "div",
-        render,
-        props: mergeProps<"div">(defaultProps, props),
-      })}
-    </EventCalendarViewContext.Provider>
-  )
-}
-
-function EventCalendarDayHeader({
-  day,
-  view,
-}: {
-  day: Date
-  view: CalendarView
-}) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const { isToday } = useEventCalendarDay(day)
-  return (
-    <div
-      data-slot="event-calendar-day-header"
-      data-today={isToday || undefined}
-      className={cn(
-        "data-today:text-primary min-w-0 truncate border-e px-2 py-1.5 font-medium last:border-e-0",
-        isToday && viewConfig.todayClassName
-      )}
-    >
-      {viewConfig.renderDayHeader?.({ day, view, isToday }) ??
-        format(
-          toZoned(day, settings.timeZone),
-          settings.i18n.formats.timeGridDayHeader,
-          { locale: settings.locale }
-        )}
-    </div>
-  )
-}
-
-/**
- * Continuous all-day bars for the week/N-days all-day row: consecutive-day
- * segments of one occurrence merge into a single bar spanning its columns
- * (same treatment as the month view), lane-packed. Returns CLONED segments -
- * the shared per-day segments must stay pristine (see packWeekRowLanes).
- */
-function useEventCalendarAllDayBars(days: Date[]): {
-  bars: EventCalendarSegment[]
-  laneCount: number
-} {
-  const instance = useEventCalendar()
-  const settings = useEventCalendarSettings()
-  return useEventCalendarSelector<
-    unknown,
-    { bars: EventCalendarSegment[]; laneCount: number }
-  >(
-    () => {
-      const byDay = instance.internals.getIndex().byDay
-      type Bar = {
-        seg: EventCalendarSegment
-        colStart: number
-        colEnd: number
-        isStart: boolean
-        isEnd: boolean
-        lane: number
-      }
-      const merged = new Map<string, Bar>()
-      days.forEach((day, col) => {
-        for (const seg of byDay.get(getDayKey(day, settings.timeZone))
-          ?.allDay ?? []) {
-          const key = seg.occurrence.key
-          const bar = merged.get(key)
-          if (bar) {
-            bar.colEnd = col
-            bar.isEnd = seg.isEnd
-          } else {
-            merged.set(key, {
-              seg,
-              colStart: col,
-              colEnd: col,
-              isStart: seg.isStart,
-              isEnd: seg.isEnd,
-              lane: 0,
-            })
-          }
-        }
-      })
-      const packed = Array.from(merged.values()).sort(
-        (a, b) =>
-          a.colStart - b.colStart ||
-          b.colEnd - b.colStart - (a.colEnd - a.colStart) ||
-          a.seg.occurrence.key.localeCompare(b.seg.occurrence.key)
-      )
-      const lanes: boolean[][] = []
-      for (const bar of packed) {
-        let lane = 0
-        for (;;) {
-          lanes[lane] ??= new Array(days.length).fill(false)
-          let free = true
-          for (let c = bar.colStart; c <= bar.colEnd; c++) {
-            if (lanes[lane][c]) {
-              free = false
-              break
-            }
-          }
-          if (free) break
-          lane++
-        }
-        for (let c = bar.colStart; c <= bar.colEnd; c++) lanes[lane][c] = true
-        bar.lane = lane
-      }
-      return {
-        bars: packed.map((bar) => ({
-          ...bar.seg,
-          isStart: bar.isStart,
-          isEnd: bar.isEnd,
-          continuesBefore: !bar.isStart,
-          continuesAfter: !bar.isEnd,
-          colStart: bar.colStart,
-          colSpan: bar.colEnd - bar.colStart + 1,
-          lane: bar.lane,
-        })),
-        laneCount: lanes.length,
-      }
-    },
-    {
-      calendar: instance,
-      isEqual: (a, b) =>
-        a.laneCount === b.laneCount &&
-        a.bars.length === b.bars.length &&
-        a.bars.every((s, i) => {
-          const o = b.bars[i]
-          // Compare the OCCURRENCE by identity, not by key: the key encodes
-          // id+start only, so a title/color/data edit compared equal and the
-          // all-day row kept its stale bars. Occurrences come from the
-          // memoized index (rebuilt exactly when events change), so identity
-          // also subsumes the end-time check it replaces. The positional
-          // fields stay because they are recomputed on every read.
-          return (
-            s.occurrence === o.occurrence &&
-            s.colStart === o.colStart &&
-            s.colSpan === o.colSpan &&
-            s.lane === o.lane &&
-            s.isStart === o.isStart &&
-            s.isEnd === o.isEnd
-          )
-        }),
-    }
-  )
-}
-
-/**
- * The all-day row body: drop-target cells underneath, one continuous bar per
- * occurrence in an overlay grid on top (month-view treatment), plus the
- * standardized day-granular drag ghost for moves/resizes in this lane.
- */
-function EventCalendarAllDayBars({
-  days,
-  gridTemplateColumns,
-}: {
-  days: Date[]
-  gridTemplateColumns: string
-}) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const { bars, laneCount } = useEventCalendarAllDayBars(days)
-
-  const dragGhost = useEventCalendarSelector<
-    unknown,
-    | (Pick<
-        EventCalendarDragState,
-        "kind" | "valid" | "occurrence" | "proposedStart" | "proposedEnd"
-      > & {
-        colStart: number
-        colSpan: number
-        isStart: boolean
-        isEnd: boolean
-        color?: string
-      })
-    | null
-  >(
-    (state) => {
-      const drag = state.drag
-      if (!drag || !drag.proposedDayGranular) return null
-      const tz = settings.timeZone
-      const startMs = zonedStartOfDay(drag.proposedStart, tz).getTime()
-      const lastMs = zonedStartOfDay(
-        new Date(drag.proposedEnd.getTime() - 1),
-        tz
-      ).getTime()
-      let colStart = -1
-      let colEnd = -1
-      days.forEach((day, i) => {
-        const t = zonedStartOfDay(day, tz).getTime()
-        if (t >= startMs && t <= lastMs) {
-          if (colStart === -1) colStart = i
-          colEnd = i
-        }
-      })
-      if (colStart === -1) return null
-      return {
-        kind: drag.kind,
-        valid: drag.valid,
-        occurrence: drag.occurrence,
-        proposedStart: drag.proposedStart,
-        proposedEnd: drag.proposedEnd,
-        colStart,
-        colSpan: colEnd - colStart + 1,
-        isStart: zonedStartOfDay(days[colStart], tz).getTime() <= startMs,
-        isEnd: zonedStartOfDay(days[colEnd], tz).getTime() >= lastMs,
-        color: drag.occurrence.event.color,
-      }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.colStart === b.colStart &&
-          a.colSpan === b.colSpan &&
-          a.valid === b.valid &&
-          a.kind === b.kind &&
-          a.proposedStart.getTime() === b.proposedStart.getTime() &&
-          a.proposedEnd.getTime() === b.proposedEnd.getTime()),
-    }
-  )
-  const ghostLane = dragGhost
-    ? (bars.find((s) => s.occurrence.key === dragGhost.occurrence.key)?.lane ??
-      laneCount)
-    : 0
-  const effectiveLanes = Math.max(laneCount, dragGhost ? ghostLane + 1 : 0)
-
-  return (
-    <div className="relative min-w-0 flex-1">
-      <div
-        className="grid h-full"
-        style={{
-          gridTemplateColumns,
-          // always reserve at least one bar row so the all-day row keeps the
-          // same height whether or not the day has all-day events (an empty
-          // row would otherwise collapse to the label height and misalign)
-          minHeight: `calc(${Math.max(effectiveLanes, 1)} * var(--ec-month-bar-h, 1.625rem) + 0.625rem)`,
-        }}
-      >
-        {days.map((day) => (
-          <EventCalendarAllDayCell key={day.getTime()} day={day} />
-        ))}
-      </div>
-      {(bars.length > 0 || dragGhost) && (
-        <div
-          data-slot="event-calendar-all-day-bar-overlay"
-          className="pointer-events-none absolute inset-x-0 top-0 grid pt-1.5"
-          style={{
-            gridTemplateColumns,
-            gridAutoRows: "var(--ec-month-bar-h, 1.625rem)",
-          }}
-        >
-          {bars.map((segment) => (
-            <div
-              key={segment.occurrence.key}
-              className={cn(
-                "pointer-events-auto min-w-0 px-1",
-                viewConfig.classNames?.monthBar
-              )}
-              style={{
-                gridColumn: `${(segment.colStart ?? 0) + 1} / span ${segment.colSpan ?? 1}`,
-                gridRow: (segment.lane ?? 0) + 1,
-              }}
-            >
-              <EventCalendarEvent
-                segment={segment}
-                className="h-[calc(var(--ec-month-bar-h,1.625rem)-0.125rem)]"
-              />
-            </div>
-          ))}
-          {dragGhost && (
-            <div
-              aria-hidden
-              className={cn("min-w-0 px-1", viewConfig.classNames?.monthBar)}
-              style={{
-                gridColumn: `${dragGhost.colStart + 1} / span ${dragGhost.colSpan}`,
-                gridRow: ghostLane + 1,
-              }}
-            >
-              <div
-                data-slot="event-calendar-drag-ghost"
-                data-kind={dragGhost.kind}
-                data-drop-invalid={!dragGhost.valid || undefined}
-                className={cn(
-                  "h-[calc(var(--ec-month-bar-h,1.625rem)-0.125rem)]",
-                  dragGhost.kind === "move"
-                    ? cn(
-                        EVENT_CALENDAR_GHOST.move,
-                        !dragGhost.valid && EVENT_CALENDAR_GHOST.invalid
-                      )
-                    : cn(
-                        EVENT_CALENDAR_GHOST.resize,
-                        !dragGhost.valid && EVENT_CALENDAR_GHOST.invalidResize
-                      ),
-                  viewConfig.classNames?.dragGhost
-                )}
-                style={
-                  {
-                    "--ec-event-color":
-                      dragGhost.color ?? "var(--color-primary)",
-                  } as CSSProperties
-                }
-              >
-                {dragGhost.kind !== "move" && (
-                  <EventCalendarEvent
-                    preview
-                    segment={{
-                      occurrence: {
-                        ...dragGhost.occurrence,
-                        start: dragGhost.proposedStart,
-                        end: dragGhost.proposedEnd,
-                      },
-                      day: days[dragGhost.colStart] ?? days[0],
-                      isStart: dragGhost.isStart,
-                      isEnd: dragGhost.isEnd,
-                      continuesBefore: !dragGhost.isStart,
-                      continuesAfter: !dragGhost.isEnd,
-                    }}
-                    className={cn(
-                      "h-full inset-ring-0",
-                      !dragGhost.valid && EVENT_CALENDAR_GHOST.invalidContent
-                    )}
-                  />
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function EventCalendarAllDayCell({ day }: { day: Date }) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const { view } = useEventCalendarViewContext()
-  const { effective } = useEventCalendarViewSettings()
-  const gestures = useEventCalendarGestures()
-  const dayStart = zonedStartOfDay(day, settings.timeZone)
-  const dayEnd = addDays(toZoned(dayStart, settings.timeZone), 1)
-  const isOff = resolveOffDay(
-    day,
-    settings.timeZone,
-    effective.offDays
-      ? typeof viewConfig.offDays === "object"
-        ? viewConfig.offDays
-        : true
-      : false,
-    settings.weekendDays
-  )
-  const offClassName =
-    (typeof viewConfig.offDays === "object" && viewConfig.offDays.className) ||
-    "bg-muted/25"
-
-  const isDropTarget = useEventCalendarSelector<
-    unknown,
-    "valid" | "invalid" | null
-  >((state) => {
-    const drag = state.drag
-    if (!drag || !drag.proposedDayGranular) return null
-    const covered = drag.proposedStart < dayEnd && drag.proposedEnd > dayStart
-    if (!covered) return null
-    return drag.valid ? "valid" : "invalid"
-  })
-  const inDraft = useEventCalendarSelector<
-    unknown,
-    { isStart: boolean; isEnd: boolean } | null
-  >(
-    (state) => {
-      const draft = state.slotDraft
-      if (!draft || !draft.allDay) return null
-      if (draft.start >= dayEnd || draft.end <= dayStart) return null
-      return {
-        isStart: draft.start >= dayStart,
-        isEnd: draft.end <= dayEnd,
-      }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.isStart === b.isStart &&
-          a.isEnd === b.isEnd),
-    }
-  )
-
-  // All-day drags select whole DAYS, so this row reads a date range, matching
-  // the month grid. Without it, dragging the all-day strip in week view would
-  // be the one create gesture in the calendar with no readout at all.
-  const allDayDraftRange = useEventCalendarSelector<
-    unknown,
-    { start: Date; end: Date } | null
-  >(
-    (state) => {
-      const draft = state.slotDraft
-      if (!draft || !draft.allDay) return null
-      return { start: draft.start, end: draft.end }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.start.getTime() === b.start.getTime() &&
-          a.end.getTime() === b.end.getTime()),
-    }
-  )
-
-  return (
-    <div
-      data-slot="event-calendar-all-day-cell"
-      data-ec-day={dayStart.getTime()}
-      data-drop-target={isDropTarget ?? undefined}
-      data-off={isOff || undefined}
-      className={cn(
-        "relative flex min-w-0 flex-col gap-0.5 border-e px-1 py-1.5 last:border-e-0",
-        isOff && offClassName,
-        viewConfig.dayClassName?.(day),
-        // No drop-target bg fill on move/resize (see month view) - a subtle
-        // dashed inset outline below marks the target instead.
-        inDraft &&
-          cn(
-            EVENT_CALENDAR_SLOT_DRAFT.surface,
-            EVENT_CALENDAR_SLOT_DRAFT.segment,
-            inDraft.isStart && EVENT_CALENDAR_SLOT_DRAFT.segmentStart,
-            inDraft.isEnd && EVENT_CALENDAR_SLOT_DRAFT.segmentEnd,
-            viewConfig.classNames?.slotDraft
-          ),
-        viewConfig.classNames?.allDayCell
-      )}
-      onPointerDown={(e) => {
-        if (e.target === e.currentTarget) gestures.beginCreate(e, day, true)
-      }}
-      onClick={(e) => {
-        if (
-          e.target === e.currentTarget &&
-          !wasRecentDrag() &&
-          !wasRecentChipPress()
-        ) {
-          settings.onSlotClick?.({ date: dayStart, allDay: true, view }, e)
-        }
-      }}
-    >
-      {/* Only on the first cell of the selection, same rule as the month grid,
-          so a three-day all-day drag labels itself once rather than three
-          times. pointer-events-none keeps the cell's own pointerdown guard
-          (`e.target === e.currentTarget`) intact. */}
-      {inDraft?.isStart && allDayDraftRange && (
-        <span
-          aria-hidden
-          className={cn(
-            "pointer-events-none absolute inset-x-1 top-1/2 -translate-y-1/2",
-            EVENT_CALENDAR_SLOT_DRAFT.label
-          )}
-        >
-          {settings.i18n.functions.formatDayRange(
-            {
-              start: toZoned(allDayDraftRange.start, settings.timeZone),
-              end: toZoned(allDayDraftRange.end, settings.timeZone),
-            },
-            { locale: settings.locale }
-          )}
-        </span>
-      )}
-    </div>
-  )
-}
-
-function EventCalendarTimeGutter({
-  days,
-  slots,
-  startHour,
-  interval,
-}: {
-  days: Date[]
-  slots: number[]
-  startHour: number
-  interval: number
-}) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const referenceDay = days[0] ?? new Date()
-  const labelFormat =
-    interval % 60 === 0
-      ? settings.i18n.formats.timeGutter
-      : settings.i18n.formats.timeGutterMinute
-  return (
-    <div
-      data-slot="event-calendar-time-gutter"
-      className={cn(
-        "relative w-(--ec-gutter-width,4.5rem) shrink-0 border-e",
-        viewConfig.classNames?.timeGutter
-      )}
-    >
-      {slots.map((minutes) => {
-        const time = addMinutes(
-          zonedStartOfDay(referenceDay, settings.timeZone),
-          minutes
-        )
-        // Always consult renderTimeGutterSlot (a consumer may label the first
-        // slot); only the DEFAULT label is suppressed at the day-start edge.
-        const label =
-          viewConfig.renderTimeGutterSlot?.({
-            time,
-            hour: Math.floor(minutes / 60),
-            minute: minutes % 60,
-          }) ??
-          (minutes > startHour * 60
-            ? format(time, labelFormat, { locale: settings.locale })
-            : null)
-        return (
-          <div
-            key={minutes}
-            className="relative"
-            style={{ height: `calc(var(--ec-hour-height) * ${interval / 60})` }}
-          >
-            {label != null && (
-              <span
-                className={cn(
-                  "text-muted-foreground absolute end-2.5 -top-2",
-                  viewConfig.classNames?.timeGutterLabel
-                )}
-              >
-                {label}
-              </span>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-/** Absolute overlay block positioned by minutes (ghosts + drafts). */
-function minuteBlockStyle(
-  startMin: number,
-  endMin: number,
-  boundsStartMin: number
-): CSSProperties {
-  const top = (startMin - boundsStartMin) / 60
-  const height = Math.max((endMin - startMin) / 60, 0.25)
-  return {
-    top: `calc(var(--ec-hour-height) * ${top})`,
-    height: `calc(var(--ec-hour-height) * ${height})`,
-  }
-}
-
-function EventCalendarDayColumn({
-  day,
-  startHour,
-  endHour,
-  interval,
-}: {
-  day: Date
-  startHour: number
-  endHour: number
-  interval: number
-}) {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const { effective } = useEventCalendarViewSettings()
-  const { view } = useEventCalendarViewContext()
-  const gestures = useEventCalendarGestures()
-  const { segments, isToday } = useEventCalendarDay(day)
-  const isOff = resolveOffDay(
-    day,
-    settings.timeZone,
-    effective.offDays
-      ? typeof viewConfig.offDays === "object"
-        ? viewConfig.offDays
-        : true
-      : false,
-    settings.weekendDays
-  )
-  const offClassName =
-    (typeof viewConfig.offDays === "object" && viewConfig.offDays.className) ||
-    "bg-muted/25"
-
-  const timeZone = settings.timeZone
-  const dayStart = zonedStartOfDay(day, timeZone)
-  const dayEnd = addDays(toZoned(dayStart, timeZone), 1)
-  const totalMinutes = getDayTotalMinutes(day, timeZone)
-  const boundsStartMin = startHour * 60
-  const boundsEndMin = Math.min(endHour * 60, totalMinutes)
-  const boundsMinutes = Math.max(60, boundsEndMin - boundsStartMin)
-
-  // Minute window of a proposal intersecting THIS day, or null
-  const windowFor = (start: Date, end: Date): [number, number] | null => {
-    if (start >= dayEnd || end <= dayStart) return null
-    const from = Math.max(
-      differenceInMinutes(start > dayStart ? start : dayStart, dayStart),
-      boundsStartMin
-    )
-    const to = Math.min(
-      differenceInMinutes(end < dayEnd ? end : dayEnd, dayStart),
-      boundsEndMin
-    )
-    return to > from ? [from, to] : null
-  }
-
-  const dragGhost = useEventCalendarSelector<
-    unknown,
-    | (Pick<
-        EventCalendarDragState,
-        "valid" | "kind" | "occurrence" | "proposedStart" | "proposedEnd"
-      > & {
-        window: [number, number]
-        color?: string
-        title: string
-      })
-    | null
-  >(
-    (state) => {
-      const drag = state.drag
-      if (!drag || drag.proposedDayGranular) return null
-      const window = windowFor(drag.proposedStart, drag.proposedEnd)
-      if (!window) return null
-      return {
-        valid: drag.valid,
-        kind: drag.kind,
-        occurrence: drag.occurrence,
-        proposedStart: drag.proposedStart,
-        proposedEnd: drag.proposedEnd,
-        window,
-        color: drag.occurrence.event.color,
-        title: drag.occurrence.event.title,
-      }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.window[0] === b.window[0] &&
-          a.window[1] === b.window[1] &&
-          a.valid === b.valid &&
-          a.kind === b.kind &&
-          a.proposedStart.getTime() === b.proposedStart.getTime() &&
-          a.proposedEnd.getTime() === b.proposedEnd.getTime()),
-    }
-  )
-
-  const draftWindow = useEventCalendarSelector<
-    unknown,
-    [number, number] | null
-  >(
-    (state) => {
-      const draft = state.slotDraft
-      if (!draft || draft.allDay) return null
-      return windowFor(draft.start, draft.end)
-    },
-    {
-      isEqual: (a, b) =>
-        a === b || (a !== null && b !== null && a[0] === b[0] && a[1] === b[1]),
-    }
-  )
-
-  // The draft's true instants, kept separate from `draftWindow` above because
-  // that one is clipped to this column's day bounds - the readout has to show
-  // what the user actually drew, not the clipped remainder.
-  const draftRange = useEventCalendarSelector<
-    unknown,
-    { start: Date; end: Date } | null
-  >(
-    (state) => {
-      const draft = state.slotDraft
-      if (!draft || draft.allDay) return null
-      return { start: draft.start, end: draft.end }
-    },
-    {
-      isEqual: (a, b) =>
-        a === b ||
-        (a !== null &&
-          b !== null &&
-          a.start.getTime() === b.start.getTime() &&
-          a.end.getTime() === b.end.getTime()),
-    }
-  )
-
-  // Segments the day bounds clip away still occupy a column in the shared
-  // index's packing, leaving a phantom empty half beside the first in-bounds
-  // chip. Repack the visible subset; clones keep the index cache untouched.
-  const packedTimed = useMemo(() => {
-    const visible = segments.timed.filter((segment) => {
-      const startMin = Math.max(segment.startMin ?? 0, boundsStartMin)
-      const endMin = Math.min(segment.endMin ?? startMin, boundsEndMin)
-      return endMin > boundsStartMin && startMin < boundsEndMin
-    })
-    if (visible.length === segments.timed.length) return segments.timed
-    const clones = visible.map(
-      (segment) => ({ ...segment }) as EventCalendarSegment
-    )
-    packTimedSegments(clones)
-    return clones
-  }, [segments.timed, boundsStartMin, boundsEndMin])
-
-  const slotFromPointer = (e: React.MouseEvent): { date: Date; end: Date } => {
-    const rect = e.currentTarget.getBoundingClientRect()
-    const pxPerMinute = rect.height / boundsMinutes
-    const minutes = snapMinutes(
-      boundsStartMin + (e.clientY - rect.top) / pxPerMinute,
-      settings.snapDuration
-    )
-    const clamped = Math.min(
-      Math.max(minutes, boundsStartMin),
-      boundsEndMin - settings.slotDuration
-    )
-    return {
-      date: addMinutes(dayStart, clamped),
-      end: addMinutes(dayStart, clamped + settings.slotDuration),
-    }
-  }
-
-  return (
-    <div
-      data-slot="event-calendar-day-column"
-      data-today={isToday || undefined}
-      data-off={isOff || undefined}
-      data-ec-day={dayStart.getTime()}
-      data-ec-bounds-start={boundsStartMin}
-      data-ec-bounds-end={boundsEndMin}
-      role="group"
-      aria-label={format(
-        toZoned(day, timeZone),
-        settings.i18n.formats.dayAria,
-        { locale: settings.locale }
-      )}
-      className={cn(
-        "relative min-w-0 border-e last:border-e-0",
-        isOff && offClassName,
-        // time grid keeps today's column on the normal background (the header
-        // marks today); only a consumer todayClassName can tint it
-        isToday && viewConfig.todayClassName,
-        viewConfig.dayClassName?.(day),
-        viewConfig.classNames?.dayColumn
-      )}
-      style={{
-        height: `calc(var(--ec-hour-height) * ${boundsMinutes / 60})`,
-        backgroundImage: `repeating-linear-gradient(to bottom, transparent, transparent calc(var(--ec-hour-height) * ${interval / 60} - var(--ec-slot-line-width, 1px)), var(--ec-slot-line-color, var(--color-border)) calc(var(--ec-hour-height) * ${interval / 60} - var(--ec-slot-line-width, 1px)), var(--ec-slot-line-color, var(--color-border)) calc(var(--ec-hour-height) * ${interval / 60}))`,
-      }}
-      onPointerDown={(e) => {
-        if (e.target === e.currentTarget) gestures.beginCreate(e, day, false)
-      }}
-      onClick={(e) => {
-        if (
-          e.target !== e.currentTarget ||
-          wasRecentDrag() ||
-          wasRecentChipPress()
-        )
-          return
-        const slot = slotFromPointer(e)
-        settings.onSlotClick?.({ ...slot, allDay: false, view }, e)
-      }}
-    >
-      {viewConfig.renderDayColumnBackground && (
-        <div className="pointer-events-none absolute inset-0">
-          {viewConfig.renderDayColumnBackground({
-            day,
-            boundsStartMin,
-            boundsEndMin,
-            totalMinutes,
-          })}
-        </div>
-      )}
-      {packedTimed.map((segment) => {
-        const startMin = Math.max(segment.startMin ?? 0, boundsStartMin)
-        const endMin = Math.min(segment.endMin ?? startMin, boundsEndMin)
-        if (endMin <= boundsStartMin || startMin >= boundsEndMin) return null
-        const columnCount = segment.columnCount ?? 1
-        const column = segment.column ?? 0
-        const span = segment.columnSpan ?? 1
-        const zIndex = segment.occurrence.event.zIndex ?? 10 + column
-        // Strict side-by-side columns - no cascade overlap (fade-truncate +
-        // hover reveal carry the legibility); the ring separates neighbors.
-        const colPct = 100 / columnCount
-        return (
-          <div
-            key={segment.occurrence.key}
-            // min-h keeps 15-min chips readable (Google-style: the block may
-            // slightly outgrow its true window); hover raises a squeezed
-            // cascade chip above its overlapping neighbors
-            className="absolute z-(--ec-z) min-h-(--ec-event-min-h,1.5rem) px-0.5 hover:z-40"
-            style={
-              {
-                ...minuteBlockStyle(startMin, endMin, boundsStartMin),
-                left: `${column * colPct}%`,
-                width: `${span * colPct}%`,
-                "--ec-z": zIndex,
-              } as CSSProperties
-            }
-          >
-            <EventCalendarEvent
-              segment={segment}
-              className={cn(
-                columnCount > 1 && "ring-background ring-1",
-                // short chips: single centered row, exact-fit line height so
-                // the title never slices mid-glyph
-                endMin - startMin < viewConfig.compactEventMinutes
-                  ? "h-full gap-1 py-0 leading-4"
-                  : "h-full flex-col items-start justify-start gap-0 py-1",
-                viewConfig.classNames?.timedChip
-              )}
-            />
-          </div>
-        )
-      })}
-      {/* Drag ghost, standardized (EVENT_CALENDAR_GHOST). Move: a faint
-          dashed placeholder at the snapped slot - the cursor-attached carry
-          clone owns the visual. Resize: the chip clone with a dashed boundary
-          at the proposed extent. Invalid: destructive marking. */}
-      {dragGhost && (
-        <div
-          data-slot="event-calendar-drag-ghost"
-          data-kind={dragGhost.kind}
-          data-drop-invalid={!dragGhost.valid || undefined}
-          className={cn(
-            "pointer-events-none absolute inset-x-0.5 z-50 min-h-(--ec-event-min-h,1.5rem)",
-            dragGhost.kind === "move"
-              ? cn(
-                  EVENT_CALENDAR_GHOST.move,
-                  !dragGhost.valid && EVENT_CALENDAR_GHOST.invalid
-                )
-              : cn(
-                  EVENT_CALENDAR_GHOST.resize,
-                  !dragGhost.valid && EVENT_CALENDAR_GHOST.invalidResize
-                ),
-            viewConfig.classNames?.dragGhost
-          )}
-          style={
-            {
-              ...minuteBlockStyle(
-                dragGhost.window[0],
-                dragGhost.window[1],
-                boundsStartMin
-              ),
-              "--ec-event-color": dragGhost.color ?? "var(--color-primary)",
-            } as CSSProperties
-          }
-        >
-          {dragGhost.kind !== "move" && (
-            <EventCalendarEvent
-              preview
-              segment={{
-                occurrence: {
-                  ...dragGhost.occurrence,
-                  start: dragGhost.proposedStart,
-                  end: dragGhost.proposedEnd,
-                  allDay: false,
-                },
-                day,
-                isStart: true,
-                isEnd: true,
-                continuesBefore: false,
-                continuesAfter: false,
-                startMin: dragGhost.window[0],
-                endMin: dragGhost.window[1],
-              }}
-              className={cn(
-                dragGhost.window[1] - dragGhost.window[0] <
-                  viewConfig.compactEventMinutes
-                  ? "h-full gap-1 py-0 leading-4"
-                  : "h-full flex-col items-start justify-start gap-0 py-1",
-                viewConfig.classNames?.timedChip,
-                "inset-ring-0",
-                !dragGhost.valid && EVENT_CALENDAR_GHOST.invalidContent
-              )}
-            />
-          )}
-        </div>
-      )}
-      {/* Drag-create draft */}
-      {draftWindow && (
-        <div
-          data-slot="event-calendar-slot-draft"
-          className={cn(
-            EVENT_CALENDAR_SLOT_DRAFT.box,
-            "pointer-events-none absolute inset-x-0.5 z-40 overflow-hidden",
-            viewConfig.classNames?.slotDraft
-          )}
-          style={minuteBlockStyle(
-            draftWindow[0],
-            draftWindow[1],
-            boundsStartMin
-          )}
-        >
-          {/* Live range readout while dragging, the way Outlook and Google
-              Calendar do it: the entire point of the gesture is to pick a
-              time, so show the time being picked instead of an empty box.
-              Reuses `formatEventTime`, the same formatter the chips use, so
-              locale, time zone and 12/24-hour all match the rest of the
-              calendar for free. `truncate` plus the wrapper's overflow-hidden
-              keeps a 15-minute draft from spilling past its own border. */}
-          {draftRange && (
-            <span className={cn("block", EVENT_CALENDAR_SLOT_DRAFT.label)}>
-              {settings.i18n.functions.formatEventTime(
-                toZoned(draftRange.start, timeZone),
-                toZoned(draftRange.end, timeZone),
-                false,
-                { locale: settings.locale }
-              )}
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function EventCalendarNowIndicator({
-  days,
-  startHour,
-  endHour,
-}: {
-  days: Date[]
-  startHour: number
-  endHour: number
-}): ReactNode {
-  const settings = useEventCalendarSettings()
-  const viewConfig = useEventCalendarViewConfig()
-  const now = useNow(viewConfig.nowIndicatorInterval)
-
-  const timeZone = settings.timeZone
-  const todayKey = getDayKey(now, timeZone)
-  const todayIndex = days.findIndex(
-    (day) => getDayKey(day, timeZone) === todayKey
-  )
-  if (todayIndex === -1) return null
-
-  const dayStart = zonedStartOfDay(now, timeZone)
-  const minutes = differenceInMinutes(now, dayStart)
-  if (minutes < startHour * 60 || minutes > endHour * 60) return null
-  const top = minutes / 60 - startHour
-
-  if (viewConfig.renderNowIndicator) {
-    return (
-      <div
-        className="pointer-events-none absolute inset-x-0 z-40"
-        style={{ top: `calc(var(--ec-hour-height) * ${top})` }}
-      >
-        {viewConfig.renderNowIndicator({ time: now })}
-      </div>
-    )
-  }
-
-  const columnWidthPct = 100 / days.length
-
-  return (
-    <div
-      data-slot="event-calendar-now-indicator"
-      className="pointer-events-none absolute inset-x-0 z-40"
-      style={{ top: `calc(var(--ec-hour-height) * ${top})` }}
-    >
-      {/* hairline across the content columns only (clear of the time gutter) */}
-      <div className="bg-destructive/40 absolute start-(--ec-gutter-width,4.5rem) end-0 h-px" />
-      {/* stronger segment + dot over today's column */}
-      <div
-        className="absolute h-px"
-        style={{
-          left: `calc(var(--ec-gutter-width, 4.5rem) + (100% - var(--ec-gutter-width, 4.5rem)) * ${(todayIndex * columnWidthPct) / 100})`,
-          width: `calc((100% - var(--ec-gutter-width, 4.5rem)) * ${columnWidthPct / 100})`,
-        }}
-      >
-        <div className="bg-destructive absolute inset-x-0 top-0 h-px" />
-        {/* dot leads the line at today's column-start border: pulled 1px left of
-            center (-start-1 = -4px vs the 6px/size-1.5 circle) so it reads as a
-            distinct bullet instead of merging into the line to its right */}
-        <div className="bg-destructive absolute -start-1 top-0 size-1.5 -translate-y-1/2 rounded-full" />
-      </div>
-    </div>
-  )
-}
-
-type TimeGridViewProps = Omit<EventCalendarTimeGridProps, "view">
-
-function EventCalendarWeekView(props: TimeGridViewProps) {
-  return <EventCalendarTimeGrid view="week" {...props} />
-}
-
-function EventCalendarDayView(props: TimeGridViewProps) {
-  return <EventCalendarTimeGrid view="day" {...props} />
-}
-
-function EventCalendarDaysView(props: TimeGridViewProps) {
-  return <EventCalendarTimeGrid view="days" {...props} />
-}
-
-export {
-  EventCalendarDayView,
-  EventCalendarDaysView,
-  EventCalendarNowIndicator,
-  EventCalendarTimeGrid,
-  EventCalendarTimeGutter,
-  EventCalendarWeekView,
-  minuteBlockStyle,
-  useNow,
-}
-export type { EventCalendarTimeGridProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar-types.tsx b/apps/web/src/components/reui/event-calendar/event-calendar-types.tsx
deleted file mode 100644
index 6dae02f..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar-types.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-type EventCalendarEventId = string
-
-type CalendarView = "month" | "week" | "day" | "days" | "agenda" | "resource"
-
-/** Bookable resource. The resource view flattens children and renders leaves
- *  only, as booking columns; a parent's own title never renders. */
-interface EventCalendarResource {
-  id: string
-  title: string
-  color?: string
-  children?: EventCalendarResource[]
-}
-
-/** Half-open: start is inclusive, end is exclusive. */
-interface EventCalendarDateRange {
-  start: Date
-  end: Date
-}
-
-type EventCalendarWeekday = "MO" | "TU" | "WE" | "TH" | "FR" | "SA" | "SU"
-
-interface EventCalendarRecurrenceRule {
-  freq: "daily" | "weekly" | "monthly" | "yearly"
-  interval?: number
-  count?: number
-  /** Inclusive instant. */
-  until?: Date
-  byWeekday?: Array<
-    EventCalendarWeekday | { day: EventCalendarWeekday; ordinal: number }
-  >
-  byMonthDay?: number[]
-  byMonth?: number[]
-  weekStart?: EventCalendarWeekday
-  exDates?: Date[]
-  rDates?: Date[]
-}
-
-interface CalendarEvent<TData = unknown> {
-  id: EventCalendarEventId
-  title: string
-  start: Date
-  /** Exclusive; must be >= start. */
-  end: Date
-  /** Start and end must be midnights in the display time zone: segmentation
-   *  walks raw instants, so another zone's midnight paints the wrong days. */
-  allDay?: boolean
-  /** Structured rule or a raw "RRULE:..." line. */
-  recurrence?: EventCalendarRecurrenceRule | string
-  /** This event is an edited single occurrence of that series. */
-  recurringEventId?: EventCalendarEventId
-  /** Which occurrence it replaces (RECURRENCE-ID semantics). */
-  originalStart?: Date
-  /** Token or css color; flows to the --ec-event-color css var. */
-  color?: string
-  /** Excluded from drag and resize regardless of interactions state. */
-  readOnly?: boolean
-  /** Per-event overrides; defaults come from interactions.drag / .resize. */
-  draggable?: boolean
-  resizable?: boolean
-  /** Packing prominence; feeds getEventPriority ordering. */
-  priority?: number
-  /** Verbatim stacking override; replaces the computed 10 + column. */
-  zIndex?: number
-  resourceId?: string
-  data?: TData
-}
-
-interface EventCalendarOccurrence<TData = unknown> {
-  /** Stable per instance: `${event.id}::${startISO}`. */
-  key: string
-  eventId: EventCalendarEventId
-  event: CalendarEvent<TData>
-  start: Date
-  end: Date
-  allDay: boolean
-  isRecurring: boolean
-  recurrenceIndex?: number
-}
-
-interface EventCalendarSegment<TData = unknown> {
-  occurrence: EventCalendarOccurrence<TData>
-  /** Zoned midnight of the segment's day; startMin/endMin count from it. */
-  day: Date
-  isStart: boolean
-  isEnd: boolean
-  continuesBefore: boolean
-  continuesAfter: boolean
-  /** Timed only: minutes from the zoned day start. */
-  startMin?: number
-  endMin?: number
-  /** Layout output: lane stacks month bars and all-day lanes;
-   *  column/columnCount/columnSpan pack time-grid overlaps;
-   *  rowIndex/colStart/colSpan place a bar in the week row. */
-  lane?: number
-  column?: number
-  columnCount?: number
-  columnSpan?: number
-  rowIndex?: number
-  colStart?: number
-  colSpan?: number
-}
-
-interface EventCalendarSelection {
-  eventKeys: string[]
-  /** Committed slot selection; EventCalendarSlotDraft holds the in-gesture one. */
-  slot: { start: Date; end: Date; allDay: boolean } | null
-}
-
-interface EventCalendarInteractions {
-  drag: boolean
-  resize: boolean
-  selectSlot: boolean
-}
-
-interface EventCalendarDragState<TData = unknown> {
-  kind: "move" | "resize-start" | "resize-end"
-  occurrence: EventCalendarOccurrence<TData>
-  proposedStart: Date
-  proposedEnd: Date
-  proposedAllDay: boolean
-  /** Day-granular proposal (month cells, all-day lane), not minute columns; the
-   *  all-day ghost keys on it: proposedAllDay misses timed MULTI-DAY bars. */
-  proposedDayGranular: boolean
-  proposedResourceId?: string
-  /** Last canDropEvent verdict; drives data-drop-invalid styling. */
-  valid: boolean
-}
-
-/** The in-progress drag-create rectangle only; cleared on commit or cancel. */
-interface EventCalendarSlotDraft {
-  start: Date
-  end: Date
-  allDay: boolean
-  view: CalendarView
-  resourceId?: string
-}
-
-/** "View settings" toggles; undefined defers to the root view-config prop. */
-interface EventCalendarViewSettings {
-  weekends?: boolean
-  weekNumbers?: boolean
-  nowIndicator?: boolean
-  offDays?: boolean
-}
-
-interface EventCalendarState<TData = unknown> {
-  view: CalendarView
-  /** Anchor date; navigation steps this, and both ranges derive from it. */
-  date: Date
-  /** Read by the "days" view only; other views ignore it. */
-  dayCount: number
-  /** Full rendered grid incl. outside days - fetch remote data for THIS. */
-  visibleRange: EventCalendarDateRange
-  /** The logical period (the month/week itself). */
-  activeRange: EventCalendarDateRange
-  events: CalendarEvent<TData>[]
-  selection: EventCalendarSelection
-  interactions: EventCalendarInteractions
-  loading: boolean
-  drag: EventCalendarDragState<TData> | null
-  slotDraft: EventCalendarSlotDraft | null
-  viewSettings: EventCalendarViewSettings
-}
-
-interface EventCalendarRangeInfo {
-  range: EventCalendarDateRange
-  activeRange: EventCalendarDateRange
-  view: CalendarView
-  date: Date
-  timeZone: string
-}
-
-interface EventCalendarProposedUpdate<TData = unknown> {
-  event: CalendarEvent<TData>
-  /** null when source === "api". */
-  occurrence: EventCalendarOccurrence<TData> | null
-  start: Date
-  end: Date
-  allDay: boolean
-  resourceId?: string
-  source: "drag" | "resize-start" | "resize-end" | "keyboard" | "api"
-}
-
-/** false = reject/revert; void or true = accept; object = accept with adjustment. */
-type EventCalendarUpdateResult =
-  | boolean
-  | void
-  | { start?: Date; end?: Date; allDay?: boolean }
-
-/** A click is a point, not a range; `end` is present for timed slots. */
-interface EventCalendarSlotInfo {
-  date: Date
-  end?: Date
-  allDay: boolean
-  view: CalendarView
-  resourceId?: string
-}
-
-/** Off-days; `true` = weekend defaults. Marked cells carry `data-off`. */
-interface EventCalendarOffDaysConfig {
-  /** Weekday numbers treated as off (0 = Sunday). Default [0, 6]. */
-  weekendDays?: number[]
-  /** Additional explicit off dates (compared by day in the display zone). */
-  dates?: Date[]
-  /** Full custom predicate; runs in addition to weekendDays/dates. */
-  isOffDay?: (day: Date) => boolean
-  /** Marker classes; default "bg-muted/25". */
-  className?: string
-}
-
-interface EventCalendarDataAdapter<TData = unknown> {
-  getEvents(
-    range: EventCalendarDateRange,
-    signal?: AbortSignal
-  ): Promise<CalendarEvent<TData>[]>
-}
-
-export type {
-  CalendarEvent,
-  CalendarView,
-  EventCalendarDataAdapter,
-  EventCalendarDateRange,
-  EventCalendarDragState,
-  EventCalendarEventId,
-  EventCalendarInteractions,
-  EventCalendarOccurrence,
-  EventCalendarOffDaysConfig,
-  EventCalendarProposedUpdate,
-  EventCalendarRangeInfo,
-  EventCalendarRecurrenceRule,
-  EventCalendarResource,
-  EventCalendarSegment,
-  EventCalendarSelection,
-  EventCalendarSlotDraft,
-  EventCalendarSlotInfo,
-  EventCalendarState,
-  EventCalendarViewSettings,
-  EventCalendarUpdateResult,
-  EventCalendarWeekday,
-}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/event-calendar/event-calendar.tsx b/apps/web/src/components/reui/event-calendar/event-calendar.tsx
deleted file mode 100644
index 185943a..0000000
--- a/apps/web/src/components/reui/event-calendar/event-calendar.tsx
+++ /dev/null
@@ -1,1913 +0,0 @@
-"use client"
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  useSyncExternalStore,
-  type ComponentType,
-  type ReactNode,
-  type RefObject,
-} from "react"
-import {
-  mergeEventCalendarI18n,
-  type EventCalendarI18nConfig,
-  type EventCalendarI18nOverrides,
-} from "@/components/reui/event-calendar/event-calendar-i18n"
-import {
-  buildEventIndex,
-  defaultEventOrder,
-  eventsOverlap,
-  getDayKey,
-  getRangeKey,
-  getViewDateRange,
-  stepDate,
-  toZoned,
-  zonedStartOfDay,
-  type EventCalendarDayBucket,
-  type EventCalendarIndex,
-  type WeekStartsOn,
-} from "@/components/reui/event-calendar/event-calendar-lib"
-import type {
-  CalendarEvent,
-  CalendarView,
-  EventCalendarDateRange,
-  EventCalendarDragState,
-  EventCalendarEventId,
-  EventCalendarInteractions,
-  EventCalendarOccurrence,
-  EventCalendarOffDaysConfig,
-  EventCalendarProposedUpdate,
-  EventCalendarRangeInfo,
-  EventCalendarResource,
-  EventCalendarSegment,
-  EventCalendarSelection,
-  EventCalendarSlotDraft,
-  EventCalendarSlotInfo,
-  EventCalendarState,
-  EventCalendarUpdateResult,
-  EventCalendarViewSettings,
-} from "@/components/reui/event-calendar/event-calendar-types"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { addDays, type Locale } from "date-fns"
-
-import { cn } from "@evobgp/ui/lib/utils"
-
-const BASE_VIEWS: CalendarView[] = ["month", "week", "day", "days", "agenda"]
-const ALL_VIEWS: CalendarView[] = [...BASE_VIEWS, "resource"]
-
-const DEFAULT_INTERACTIONS: EventCalendarInteractions = {
-  drag: true,
-  resize: true,
-  selectSlot: true,
-}
-
-const EMPTY_SELECTION: EventCalendarSelection = { eventKeys: [], slot: null }
-
-// resolveSettings runs on every render, so a freshly allocated default would
-// bust the view memos keyed on it (the month grid rebuilds its 42 zoned day
-// starts whenever weekendDays changes identity). Shared, never mutated.
-const DEFAULT_WEEKEND_DAYS: number[] = [0, 6]
-const EMPTY_RESOURCES: EventCalendarResource[] = []
-const DEFAULT_EVENT_PRIORITY = (event: CalendarEvent<never>) =>
-  event.priority ?? 0
-
-// Priority-aware default order, cached on the resolver identity: eventOrder is
-// part of the index cache key, so a fresh closure per render would rebuild the
-// whole index on every render.
-const priorityOrderCache = new WeakMap<object, unknown>()
-type EventOrder<TData> = (
-  a: EventCalendarOccurrence<TData>,
-  b: EventCalendarOccurrence<TData>
-) => number
-function priorityEventOrder<TData>(
-  getEventPriority: (event: CalendarEvent<TData>) => number
-): EventOrder<TData> {
-  const cached = priorityOrderCache.get(getEventPriority)
-  if (cached) return cached as EventOrder<TData>
-  // higher priority packs and orders first; ties fall through to the
-  // start/duration/key default
-  const order: EventOrder<TData> = (a, b) =>
-    getEventPriority(b.event) - getEventPriority(a.event) ||
-    defaultEventOrder(a, b)
-  priorityOrderCache.set(getEventPriority, order)
-  return order
-}
-
-interface EventCalendarCallbacks<TData = unknown> {
-  onEventClick?: (
-    occurrence: EventCalendarOccurrence<TData>,
-    e: React.MouseEvent
-  ) => void
-  onEventDoubleClick?: (
-    occurrence: EventCalendarOccurrence<TData>,
-    e: React.MouseEvent
-  ) => void
-  onEventUpdate?: (
-    update: EventCalendarProposedUpdate<TData>
-  ) => EventCalendarUpdateResult
-  canDropEvent?: (update: EventCalendarProposedUpdate<TData>) => boolean
-  /**
-   * A move/resize was attempted on an event that cannot be dragged (readOnly,
-   * per-event draggable/resizable false, or the interaction is off). Fires once
-   * per gesture when the pointer crosses the activation threshold; the calendar
-   * shows a not-allowed cursor for the duration but never picks the message -
-   * broadcast it here so the consumer can surface a custom one.
-   */
-  onDragBlocked?: (
-    occurrence: EventCalendarOccurrence<TData>,
-    info: {
-      gesture: "move" | "resize"
-      reason: "readOnly" | "disabled" | "interactions-off"
-    }
-  ) => void
-  onSlotClick?: (slot: EventCalendarSlotInfo, e: React.MouseEvent) => void
-  onSelectSlot?: (slot: EventCalendarSlotDraft) => void
-  canSelectSlot?: (slot: EventCalendarSlotDraft) => boolean
-  onRangeChange?: (info: EventCalendarRangeInfo) => void
-  onViewChange?: (view: CalendarView) => void
-  onDateChange?: (date: Date) => void
-  onDayCountChange?: (count: number) => void
-  onSelectionChange?: (selection: EventCalendarSelection) => void
-  onInteractionsChange?: (interactions: EventCalendarInteractions) => void
-  onViewSettingsChange?: (viewSettings: EventCalendarViewSettings) => void
-  onEventsChange?: (events: CalendarEvent<TData>[]) => void
-  onMoreClick?: (
-    day: Date,
-    segments: EventCalendarOccurrence<TData>[],
-    e: React.MouseEvent
-  ) => void | false
-}
-
-interface UseEventCalendarStateOptions<
-  TData = unknown,
-> extends EventCalendarCallbacks<TData> {
-  events?: CalendarEvent<TData>[]
-  defaultEvents?: CalendarEvent<TData>[]
-  view?: CalendarView
-  defaultView?: CalendarView
-  date?: Date
-  defaultDate?: Date
-  dayCount?: number
-  defaultDayCount?: number
-  selection?: EventCalendarSelection
-  defaultSelection?: EventCalendarSelection
-  interactions?: Partial<EventCalendarInteractions>
-  defaultInteractions?: Partial<EventCalendarInteractions>
-  viewSettings?: EventCalendarViewSettings
-  defaultViewSettings?: EventCalendarViewSettings
-  loading?: boolean
-  views?: CalendarView[]
-  timeZone?: string
-  locale?: Locale
-  weekStartsOn?: WeekStartsOn
-  dayStartHour?: number
-  dayEndHour?: number
-  slotDuration?: number
-  snapDuration?: number
-  agendaDayCount?: number
-  fixedWeeks?: boolean
-  showOutsideDays?: boolean
-  i18n?: EventCalendarI18nOverrides
-  /** Bookable resources for the resource view. */
-  resources?: EventCalendarResource[]
-  getEventPriority?: (event: CalendarEvent<TData>) => number
-  eventOrder?: (
-    a: EventCalendarOccurrence<TData>,
-    b: EventCalendarOccurrence<TData>
-  ) => number
-  getOccurrences?: (
-    event: CalendarEvent<TData>,
-    range: EventCalendarDateRange,
-    ctx: { timeZone: string }
-  ) => Array<{ start: Date; end: Date }> | null
-  /**
-   * Weekday numbers (0 = Sunday) treated as the weekend by the "weekends"
-   * view toggle. @default [0, 6]
-   */
-  weekendDays?: number[]
-  /** Pointer-gesture tuning (activation distances, touch delay, autoscroll). */
-  activation?: Partial<EventCalendarActivationConfig>
-}
-
-interface EventCalendarActivationConfig {
-  moveDistancePx: number
-  createDistancePx: number
-  touchDelayMs: number
-  touchTolerancePx: number
-  autoScrollEdgePx: number
-  autoScrollMaxStepPx: number
-}
-
-/**
- * Resolved configuration: every UseEventCalendarStateOptions field except the
- * controlled/uncontrolled state pairs, with defaults applied and i18n merged.
- * Read via ref semantics - callback identity changes never re-render the grid.
- */
-interface EventCalendarSettings<
-  TData = unknown,
-> extends EventCalendarCallbacks<TData> {
-  timeZone: string
-  locale?: Locale
-  weekStartsOn: WeekStartsOn
-  views: CalendarView[]
-  dayStartHour: number
-  dayEndHour: number
-  slotDuration: number
-  snapDuration: number
-  agendaDayCount: number
-  fixedWeeks: boolean
-  showOutsideDays: boolean
-  i18n: EventCalendarI18nConfig
-  resources: EventCalendarResource[]
-  weekendDays: number[]
-  activation?: Partial<EventCalendarActivationConfig>
-  getEventPriority: (event: CalendarEvent<TData>) => number
-  eventOrder: (
-    a: EventCalendarOccurrence<TData>,
-    b: EventCalendarOccurrence<TData>
-  ) => number
-  getOccurrences?: (
-    event: CalendarEvent<TData>,
-    range: EventCalendarDateRange,
-    ctx: { timeZone: string }
-  ) => Array<{ start: Date; end: Date }> | null
-}
-
-interface EventCalendarApi<TData = unknown> {
-  next(): void
-  prev(): void
-  today(): void
-  goTo(date: Date): void
-  setView(view: CalendarView, opts?: { dayCount?: number }): void
-  setDayCount(count: number): void
-  getEvents(): CalendarEvent<TData>[]
-  getEvent(id: EventCalendarEventId): CalendarEvent<TData> | undefined
-  setEvents(events: CalendarEvent<TData>[]): void
-  addEvent(event: CalendarEvent<TData>): void
-  updateEvent(
-    id: EventCalendarEventId,
-    patch: Partial<CalendarEvent<TData>>
-  ): void
-  removeEvent(id: EventCalendarEventId): void
-  getOccurrences(
-    range?: EventCalendarDateRange
-  ): EventCalendarOccurrence<TData>[]
-  getOccurrencesForDay(day: Date): EventCalendarOccurrence<TData>[]
-  findOverlapping(candidate: {
-    start: Date
-    end: Date
-    excludeEventId?: string
-  }): EventCalendarOccurrence<TData>[]
-  select(selection: Partial<EventCalendarSelection>): void
-  selectEvent(key: string, opts?: { additive?: boolean }): void
-  clearSelection(): void
-  setInteractions(patch: Partial<EventCalendarInteractions>): void
-  setViewSettings(patch: EventCalendarViewSettings): void
-  getVisibleRange(): EventCalendarDateRange
-  getActiveRange(): EventCalendarDateRange
-  /** TZDate in the calendar's display time zone. */
-  toZoned(date: Date): Date
-  /** number = minutes from the zoned day start; no-op outside time-grid views. */
-  scrollToTime(time: Date | number): void
-}
-
-/** Cross-file plumbing for sibling view/interaction modules; not public API. */
-interface EventCalendarInternals<TData = unknown> {
-  getIndex(): EventCalendarIndex<TData>
-  setDrag(drag: EventCalendarDragState<TData> | null): void
-  setSlotDraft(draft: EventCalendarSlotDraft | null): void
-  registerScrollHandler(handler: ((time: Date | number) => void) | null): void
-  applyProposedUpdate(
-    update: EventCalendarProposedUpdate<TData>,
-    extraPatch?: Partial<CalendarEvent<TData>>
-  ): boolean
-  getSettingsVersion(): number
-  /** The rendered calendar root element, or null before mount. */
-  getRootEl(): HTMLElement | null
-  setRootEl(el: HTMLElement | null): void
-}
-
-interface EventCalendarInstance<TData = unknown> {
-  getState(): EventCalendarState<TData>
-  subscribe(listener: () => void): () => void
-  api: EventCalendarApi<TData>
-  settings: EventCalendarSettings<TData>
-  internals: EventCalendarInternals<TData>
-}
-
-function resolveSettings<TData>(
-  options: UseEventCalendarStateOptions<TData>
-): EventCalendarSettings<TData> {
-  const {
-    // strip state pairs; the rest flows into settings
-    events: _e,
-    defaultEvents: _de,
-    view: _v,
-    defaultView: _dv,
-    date: _d,
-    defaultDate: _dd,
-    dayCount: _dc,
-    defaultDayCount: _ddc,
-    selection: _s,
-    defaultSelection: _ds,
-    interactions: _i,
-    defaultInteractions: _di,
-    viewSettings: _vs,
-    defaultViewSettings: _dvs,
-    loading: _l,
-    ...rest
-  } = options
-  const getEventPriority =
-    options.getEventPriority ??
-    (DEFAULT_EVENT_PRIORITY as (event: CalendarEvent<TData>) => number)
-  return {
-    ...rest,
-    timeZone:
-      options.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
-    locale: options.locale,
-    // locale-first default: a de/fr locale gets Monday weeks without also
-    // having to set weekStartsOn; an explicit weekStartsOn always wins
-    weekStartsOn:
-      options.weekStartsOn ?? options.locale?.options?.weekStartsOn ?? 0,
-    // the resource view only makes sense with resources configured
-    views:
-      options.views ?? (options.resources?.length ? ALL_VIEWS : BASE_VIEWS),
-    dayStartHour: options.dayStartHour ?? 0,
-    dayEndHour: options.dayEndHour ?? 24,
-    slotDuration: options.slotDuration ?? 30,
-    snapDuration: options.snapDuration ?? 15,
-    agendaDayCount: options.agendaDayCount ?? 30,
-    fixedWeeks: options.fixedWeeks ?? true,
-    showOutsideDays: options.showOutsideDays ?? true,
-    i18n: mergeEventCalendarI18n(options.i18n),
-    resources: options.resources ?? EMPTY_RESOURCES,
-    getEventPriority,
-    eventOrder: options.eventOrder ?? priorityEventOrder(getEventPriority),
-    getOccurrences: options.getOccurrences,
-    weekendDays: options.weekendDays ?? DEFAULT_WEEKEND_DAYS,
-    activation: options.activation,
-  }
-}
-
-const warned = new Set<string>()
-function warnOnce(key: string, message: string) {
-  if (process.env.NODE_ENV !== "production" && !warned.has(key)) {
-    warned.add(key)
-    console.warn(`[event-calendar] ${message}`)
-  }
-}
-
-interface EventCalendarStore<TData> {
-  instance: EventCalendarInstance<TData>
-  setOptions(next: UseEventCalendarStateOptions<TData>): boolean
-  notify(): void
-  emitRangeIfChanged(): void
-}
-
-function createEventCalendarStore<TData>(
-  initial: UseEventCalendarStateOptions<TData>
-): EventCalendarStore<TData> {
-  let options = initial
-  let settings = resolveSettings(initial)
-  let settingsVersion = 0
-
-  const listeners = new Set<() => void>()
-
-  const resolveView = (view: CalendarView): CalendarView => {
-    if (settings.views.includes(view)) return view
-    const fallback = settings.views[0] ?? "month"
-    warnOnce(
-      `view-${view}`,
-      `view "${view}" is not in views [${settings.views.join(", ")}]; falling back to "${fallback}".`
-    )
-    return fallback
-  }
-
-  const internal = {
-    view: resolveView(initial.defaultView ?? "month"),
-    date: initial.defaultDate ?? new Date(),
-    dayCount: initial.defaultDayCount ?? 3,
-    events: initial.defaultEvents ?? [],
-    selection: initial.defaultSelection ?? EMPTY_SELECTION,
-    interactions: { ...DEFAULT_INTERACTIONS, ...initial.defaultInteractions },
-    viewSettings: initial.defaultViewSettings ?? {},
-    drag: null as EventCalendarDragState<TData> | null,
-    slotDraft: null as EventCalendarSlotDraft | null,
-  }
-
-  let snapshot: EventCalendarState<TData> | null = null
-  let indexCache: {
-    events: CalendarEvent<TData>[]
-    rangeKey: string
-    timeZone: string
-    weekStartsOn: WeekStartsOn
-    eventOrder: EventCalendarSettings<TData>["eventOrder"]
-    getOccurrences: EventCalendarSettings<TData>["getOccurrences"]
-    index: EventCalendarIndex<TData>
-  } | null = null
-  // Second single-entry cache, for api.getOccurrences(range) outside the
-  // visible range: that branch builds a throwaway index, so without it every
-  // call hands back brand new occurrence OBJECTS and the identity-based
-  // isEqual in useEventCalendarOccurrences can never settle - an unstable
-  // getSnapshot is a hard render loop under useSyncExternalStore, not a slow
-  // render.
-  let rangeCache: {
-    events: CalendarEvent<TData>[]
-    rangeKey: string
-    timeZone: string
-    weekStartsOn: WeekStartsOn
-    eventOrder: EventCalendarSettings<TData>["eventOrder"]
-    getOccurrences: EventCalendarSettings<TData>["getOccurrences"]
-    occurrences: EventCalendarOccurrence<TData>[]
-  } | null = null
-  let scrollHandler: ((time: Date | number) => void) | null = null
-  // The rendered calendar root element, registered by the <EventCalendar> host.
-  // The drag engine falls back to it to find day cells when a gesture starts
-  // from a portaled surface (e.g. a chip inside the "+N more" popover), whose
-  // DOM ancestors do not include the calendar.
-  let rootEl: HTMLElement | null = null
-  let lastEmittedRangeKey: string | null = null
-
-  // Controlled interactions merge, cached on input identity: rebuilding the
-  // merged object per snapshot would break Object.is for selector hooks.
-  let interactionsCache: {
-    input: Partial<EventCalendarInteractions>
-    merged: EventCalendarInteractions
-  } | null = null
-  const mergedInteractions = (
-    input: Partial<EventCalendarInteractions>
-  ): EventCalendarInteractions => {
-    if (interactionsCache?.input !== input) {
-      interactionsCache = {
-        input,
-        merged: { ...DEFAULT_INTERACTIONS, ...input },
-      }
-    }
-    return interactionsCache.merged
-  }
-
-  const invalidate = () => {
-    snapshot = null
-  }
-
-  const notify = () => {
-    listeners.forEach((listener) => listener())
-    emitRangeIfChanged()
-  }
-
-  const getState = (): EventCalendarState<TData> => {
-    if (snapshot) return snapshot
-    const view = resolveView(options.view ?? internal.view)
-    const date = options.date ?? internal.date
-    const dayCount = Math.max(1, options.dayCount ?? internal.dayCount)
-    const { visibleRange, activeRange } = getViewDateRange(view, date, {
-      timeZone: settings.timeZone,
-      weekStartsOn: settings.weekStartsOn,
-      dayCount,
-      agendaDayCount: settings.agendaDayCount,
-      fixedWeeks: settings.fixedWeeks,
-    })
-    snapshot = {
-      view,
-      date,
-      dayCount,
-      visibleRange,
-      activeRange,
-      events: options.events ?? internal.events,
-      selection: options.selection ?? internal.selection,
-      interactions: options.interactions
-        ? mergedInteractions(options.interactions)
-        : internal.interactions,
-      loading: options.loading ?? false,
-      drag: internal.drag,
-      slotDraft: internal.slotDraft,
-      viewSettings: options.viewSettings ?? internal.viewSettings,
-    }
-    return snapshot
-  }
-
-  const emitRangeIfChanged = () => {
-    if (!settings.onRangeChange) return
-    const state = getState()
-    const key = `${state.view}:${getRangeKey(state.visibleRange)}:${settings.timeZone}`
-    if (key === lastEmittedRangeKey) return
-    lastEmittedRangeKey = key
-    settings.onRangeChange({
-      range: state.visibleRange,
-      activeRange: state.activeRange,
-      view: state.view,
-      date: state.date,
-      timeZone: settings.timeZone,
-    })
-  }
-
-  type ControlledKey =
-    | "view"
-    | "date"
-    | "dayCount"
-    | "events"
-    | "selection"
-    | "interactions"
-    | "viewSettings"
-
-  const setField = <K extends ControlledKey>(
-    key: K,
-    value: EventCalendarState<TData>[K extends "events" ? "events" : K]
-  ) => {
-    const controlled = options[key] !== undefined
-    if (!controlled) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ;(internal as any)[key] = value
-      invalidate()
-    }
-    const callbacks: Record<ControlledKey, ((v: never) => void) | undefined> = {
-      view: settings.onViewChange as never,
-      date: settings.onDateChange as never,
-      dayCount: settings.onDayCountChange as never,
-      events: settings.onEventsChange as never,
-      selection: settings.onSelectionChange as never,
-      interactions: settings.onInteractionsChange as never,
-      viewSettings: settings.onViewSettingsChange as never,
-    }
-    callbacks[key]?.(value as never)
-    if (!controlled) notify()
-  }
-
-  // An occurrence key encodes the start instant (id::startISO), so committing a
-  // move re-keys the occurrence and a selection holding the old key would point
-  // at nothing. Remapped in the same commit and emitted BEFORE the events write
-  // so a controlled consumer applies the two in a consistent order.
-  const remapSelectionKey = (
-    id: EventCalendarEventId,
-    oldKey: string,
-    nextStart: Date
-  ) => {
-    const newKey = `${id}::${nextStart.toISOString()}`
-    if (newKey === oldKey) return
-    const selection = getState().selection
-    if (!selection.eventKeys.includes(oldKey)) return
-    setField("selection", {
-      ...selection,
-      eventKeys: selection.eventKeys.map((key) =>
-        key === oldKey ? newKey : key
-      ),
-    })
-  }
-
-  // extraPatch: non-timing fields committed in the SAME write. Two sequential
-  // setField("events") calls break controlled mode - the second one re-reads
-  // the still-stale controlled array and its onEventsChange payload silently
-  // reverts the timing change the first one emitted.
-  const applyProposedUpdate = (
-    update: EventCalendarProposedUpdate<TData>,
-    extraPatch?: Partial<CalendarEvent<TData>>
-  ): boolean => {
-    const result = settings.onEventUpdate?.(update)
-    if (result === false) return false
-    const adjusted: Partial<CalendarEvent<TData>> =
-      result && typeof result === "object"
-        ? {
-            start: result.start ?? update.start,
-            end: result.end ?? update.end,
-            allDay: result.allDay ?? update.allDay,
-          }
-        : { start: update.start, end: update.end, allDay: update.allDay }
-    if (update.resourceId !== undefined) adjusted.resourceId = update.resourceId
-    // the STORED event holds the pre-commit start, which is what the live
-    // occurrence key was built from (update.event already carries the proposal
-    // when the call comes from api.updateEvent)
-    const stored = getState().events.find(
-      (event) => event.id === update.event.id
-    )
-    const oldKey =
-      update.occurrence?.key ??
-      (stored ? `${stored.id}::${stored.start.toISOString()}` : null)
-    if (oldKey) {
-      remapSelectionKey(update.event.id, oldKey, adjusted.start ?? update.start)
-    }
-    const events = getState().events
-    const next = events.map((event) =>
-      event.id === update.event.id
-        ? { ...event, ...extraPatch, ...adjusted }
-        : event
-    )
-    setField("events", next)
-    return true
-  }
-
-  const getIndex = (): EventCalendarIndex<TData> => {
-    const state = getState()
-    const rangeKey = getRangeKey(state.visibleRange)
-    if (
-      indexCache &&
-      indexCache.events === state.events &&
-      indexCache.rangeKey === rangeKey &&
-      indexCache.timeZone === settings.timeZone &&
-      indexCache.weekStartsOn === settings.weekStartsOn &&
-      indexCache.eventOrder === settings.eventOrder &&
-      indexCache.getOccurrences === settings.getOccurrences
-    ) {
-      return indexCache.index
-    }
-    const index = buildEventIndex(state.events, state.visibleRange, {
-      timeZone: settings.timeZone,
-      weekStartsOn: settings.weekStartsOn,
-      eventOrder: settings.eventOrder,
-      getOccurrences: settings.getOccurrences,
-    })
-    indexCache = {
-      events: state.events,
-      rangeKey,
-      timeZone: settings.timeZone,
-      weekStartsOn: settings.weekStartsOn,
-      eventOrder: settings.eventOrder,
-      getOccurrences: settings.getOccurrences,
-      index,
-    }
-    return index
-  }
-
-  const api: EventCalendarApi<TData> = {
-    next() {
-      const state = getState()
-      setField(
-        "date",
-        stepDate(state.view, state.date, 1, {
-          timeZone: settings.timeZone,
-          dayCount: state.dayCount,
-          agendaDayCount: settings.agendaDayCount,
-        })
-      )
-    },
-    prev() {
-      const state = getState()
-      setField(
-        "date",
-        stepDate(state.view, state.date, -1, {
-          timeZone: settings.timeZone,
-          dayCount: state.dayCount,
-          agendaDayCount: settings.agendaDayCount,
-        })
-      )
-    },
-    today() {
-      setField("date", new Date())
-    },
-    goTo(date) {
-      setField("date", date)
-    },
-    setView(view, opts) {
-      if (opts?.dayCount !== undefined) {
-        setField("dayCount", Math.max(1, opts.dayCount))
-      }
-      setField("view", resolveView(view))
-    },
-    setDayCount(count) {
-      setField("dayCount", Math.max(1, count))
-    },
-    getEvents() {
-      return getState().events
-    },
-    getEvent(id) {
-      return getState().events.find((event) => event.id === id)
-    },
-    setEvents(events) {
-      setField("events", events)
-    },
-    addEvent(event) {
-      setField("events", [...getState().events, event])
-    },
-    updateEvent(id, patch) {
-      const event = api.getEvent(id)
-      if (!event) return
-      const merged = { ...event, ...patch }
-      const timingChanged =
-        patch.start !== undefined ||
-        patch.end !== undefined ||
-        patch.allDay !== undefined
-      if (timingChanged && settings.onEventUpdate) {
-        // single write: the non-timing rest rides along as extraPatch so
-        // controlled mode sees one consistent onEventsChange payload
-        const rest = { ...patch }
-        delete rest.start
-        delete rest.end
-        delete rest.allDay
-        applyProposedUpdate(
-          {
-            event: merged,
-            occurrence: null,
-            start: merged.start,
-            end: merged.end,
-            allDay: merged.allDay ?? false,
-            source: "api",
-          },
-          rest
-        )
-        return
-      }
-      if (timingChanged) {
-        remapSelectionKey(
-          id,
-          `${id}::${event.start.toISOString()}`,
-          merged.start
-        )
-      }
-      setField(
-        "events",
-        getState().events.map((e) => (e.id === id ? merged : e))
-      )
-    },
-    removeEvent(id) {
-      setField(
-        "events",
-        getState().events.filter((event) => event.id !== id)
-      )
-    },
-    getOccurrences(range) {
-      if (!range) return getIndex().occurrences
-      const state = getState()
-      const within =
-        range.start >= state.visibleRange.start &&
-        range.end <= state.visibleRange.end
-      if (within) {
-        return getIndex().occurrences.filter((occ) => eventsOverlap(occ, range))
-      }
-      const rangeKey = getRangeKey(range)
-      if (
-        rangeCache &&
-        rangeCache.events === state.events &&
-        rangeCache.rangeKey === rangeKey &&
-        rangeCache.timeZone === settings.timeZone &&
-        rangeCache.weekStartsOn === settings.weekStartsOn &&
-        rangeCache.eventOrder === settings.eventOrder &&
-        rangeCache.getOccurrences === settings.getOccurrences
-      ) {
-        return rangeCache.occurrences
-      }
-      const { occurrences } = buildEventIndex(state.events, range, {
-        timeZone: settings.timeZone,
-        weekStartsOn: settings.weekStartsOn,
-        eventOrder: settings.eventOrder,
-        getOccurrences: settings.getOccurrences,
-      })
-      rangeCache = {
-        events: state.events,
-        rangeKey,
-        timeZone: settings.timeZone,
-        weekStartsOn: settings.weekStartsOn,
-        eventOrder: settings.eventOrder,
-        getOccurrences: settings.getOccurrences,
-        occurrences,
-      }
-      return occurrences
-    },
-    getOccurrencesForDay(day) {
-      const bucket = getIndex().byDay.get(getDayKey(day, settings.timeZone))
-      if (!bucket) return []
-      const seen = new Set<string>()
-      const result: EventCalendarOccurrence<TData>[] = []
-      for (const seg of [...bucket.allDay, ...bucket.timed]) {
-        if (seen.has(seg.occurrence.key)) continue
-        seen.add(seg.occurrence.key)
-        result.push(seg.occurrence)
-      }
-      return result
-    },
-    findOverlapping({ start, end, excludeEventId }) {
-      return api
-        .getOccurrences({ start, end })
-        .filter((occ) => occ.eventId !== excludeEventId)
-    },
-    select(partial) {
-      const current = getState().selection
-      setField("selection", {
-        eventKeys: partial.eventKeys ?? current.eventKeys,
-        slot: partial.slot !== undefined ? partial.slot : current.slot,
-      })
-    },
-    selectEvent(key, opts) {
-      const current = getState().selection
-      const eventKeys = opts?.additive
-        ? current.eventKeys.includes(key)
-          ? current.eventKeys.filter((k) => k !== key)
-          : [...current.eventKeys, key]
-        : [key]
-      setField("selection", { ...current, eventKeys })
-    },
-    clearSelection() {
-      setField("selection", EMPTY_SELECTION)
-    },
-    setInteractions(patch) {
-      setField("interactions", { ...getState().interactions, ...patch })
-    },
-    setViewSettings(patch) {
-      setField("viewSettings", { ...getState().viewSettings, ...patch })
-    },
-    getVisibleRange() {
-      return getState().visibleRange
-    },
-    getActiveRange() {
-      return getState().activeRange
-    },
-    toZoned(date) {
-      return toZoned(date, settings.timeZone)
-    },
-    scrollToTime(time) {
-      scrollHandler?.(time)
-    },
-  }
-
-  const internals: EventCalendarInternals<TData> = {
-    getIndex,
-    setDrag(drag) {
-      internal.drag = drag
-      invalidate()
-      notify()
-    },
-    setSlotDraft(draft) {
-      internal.slotDraft = draft
-      invalidate()
-      notify()
-    },
-    registerScrollHandler(handler) {
-      scrollHandler = handler
-    },
-    applyProposedUpdate,
-    getSettingsVersion() {
-      return settingsVersion
-    },
-    getRootEl() {
-      return rootEl
-    },
-    setRootEl(el) {
-      rootEl = el
-    },
-  }
-
-  const instance: EventCalendarInstance<TData> = {
-    getState,
-    subscribe(listener) {
-      listeners.add(listener)
-      return () => listeners.delete(listener)
-    },
-    api,
-    get settings() {
-      return settings
-    },
-    internals,
-  }
-
-  const STATE_KEYS = [
-    "events",
-    "view",
-    "date",
-    "dayCount",
-    "selection",
-    "interactions",
-    "viewSettings",
-    "loading",
-  ] as const
-  const SETTINGS_KEYS = [
-    "timeZone",
-    "locale",
-    "weekStartsOn",
-    "views",
-    "dayStartHour",
-    "dayEndHour",
-    "slotDuration",
-    "snapDuration",
-    "agendaDayCount",
-    "fixedWeeks",
-    "showOutsideDays",
-    "i18n",
-    "resources",
-    "getEventPriority",
-    "eventOrder",
-    "getOccurrences",
-    "weekendDays",
-    "activation",
-  ] as const
-
-  return {
-    instance,
-    setOptions(next) {
-      const prev = options
-      options = next
-      let changed = false
-      for (const key of STATE_KEYS) {
-        if (prev[key] !== next[key]) {
-          changed = true
-          break
-        }
-      }
-      let settingsChanged = false
-      for (const key of SETTINGS_KEYS) {
-        if (prev[key] !== next[key]) {
-          settingsChanged = true
-          break
-        }
-      }
-      settings = resolveSettings(next)
-      if (settingsChanged) {
-        settingsVersion++
-        changed = true
-      }
-      if (changed) invalidate()
-      return changed
-    },
-    notify,
-    emitRangeIfChanged,
-  }
-}
-
-/**
- * Headless root hook - the full calendar engine without any markup.
- * Pass the returned instance to <EventCalendar calendar={instance}> or drive
- * fully custom UI from instance.getState()/subscribe/api.
- */
-function useEventCalendarState<TData = unknown>(
-  options: UseEventCalendarStateOptions<TData> = {}
-): EventCalendarInstance<TData> {
-  const [store] = useState(() => createEventCalendarStore<TData>(options))
-  const changed = store.setOptions(options)
-  const changedRef = useRef(false)
-  if (changed) changedRef.current = true
-  useLayoutEffect(() => {
-    if (changedRef.current) {
-      changedRef.current = false
-      store.notify()
-    }
-  })
-  useEffect(() => {
-    store.emitRangeIfChanged()
-    // mount-only: onRangeChange fires once for the initial range
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  return store.instance
-}
-
-const EventCalendarContext =
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  createContext<EventCalendarInstance<any> | null>(null)
-
-/** The stable calendar instance; throws outside <EventCalendar>. */
-function useEventCalendar<TData = unknown>(): EventCalendarInstance<TData> {
-  const instance = useContext(EventCalendarContext)
-  if (!instance) {
-    throw new Error("useEventCalendar must be used within <EventCalendar>")
-  }
-  return instance as EventCalendarInstance<TData>
-}
-
-interface UseEventCalendarSelectorOptions<TData, TSelected> {
-  calendar?: EventCalendarInstance<TData>
-  isEqual?: (a: TSelected, b: TSelected) => boolean
-}
-
-/** Fine-grained subscription with equality memoization (Object.is default). */
-function useEventCalendarSelector<TData = unknown, TSelected = unknown>(
-  selector: (state: EventCalendarState<TData>) => TSelected,
-  options?: UseEventCalendarSelectorOptions<TData, TSelected>
-): TSelected {
-  const contextInstance = useContext(EventCalendarContext)
-  const instance = options?.calendar ?? contextInstance
-  if (!instance) {
-    throw new Error(
-      "useEventCalendarSelector needs an <EventCalendar> ancestor or an explicit `calendar` option"
-    )
-  }
-  const isEqual = options?.isEqual ?? Object.is
-  const lastRef = useRef<{ value: TSelected } | null>(null)
-  const selectorRef = useRef(selector)
-  selectorRef.current = selector
-
-  const getSnapshot = () => {
-    const next = selectorRef.current(
-      instance.getState() as EventCalendarState<TData>
-    )
-    if (lastRef.current && isEqual(lastRef.current.value, next)) {
-      return lastRef.current.value
-    }
-    lastRef.current = { value: next }
-    return next
-  }
-
-  return useSyncExternalStore(instance.subscribe, getSnapshot, getSnapshot)
-}
-
-function useEventCalendarView(): {
-  view: CalendarView
-  dayCount: number
-  /** The resolved `views` option from settings. */
-  availableViews: CalendarView[]
-  setView: (view: CalendarView, opts?: { dayCount?: number }) => void
-} {
-  const instance = useEventCalendar()
-  const view = useEventCalendarSelector((state) => state.view)
-  const dayCount = useEventCalendarSelector((state) => state.dayCount)
-  useEventCalendarSettingsVersion(instance)
-  return {
-    view,
-    dayCount,
-    availableViews: instance.settings.views,
-    setView: instance.api.setView,
-  }
-}
-
-/**
- * isToday is a wall-clock read, so no store write ever invalidates it and a
- * calendar left open overnight keeps highlighting yesterday. One timer per
- * display zone, armed for the next zoned midnight and re-armed on fire, wakes
- * every day-scoped hook exactly when the answer changes; an interval would
- * tick thousands of times a day to catch one transition.
- */
-const midnightTicker = (() => {
-  const zones = new Map<
-    string,
-    { listeners: Set<() => void>; timer: ReturnType<typeof setTimeout> | null }
-  >()
-  let version = 0
-
-  const arm = (timeZone: string) => {
-    const entry = zones.get(timeZone)
-    if (!entry) return
-    const now = new Date()
-    const next = zonedStartOfDay(
-      addDays(toZoned(now, timeZone), 1),
-      timeZone
-    ).getTime()
-    entry.timer = setTimeout(
-      () => {
-        version++
-        entry.listeners.forEach((listener) => listener())
-        arm(timeZone)
-      },
-      Math.max(1000, next - now.getTime())
-    )
-  }
-
-  return {
-    subscribe(timeZone: string, listener: () => void) {
-      let entry = zones.get(timeZone)
-      if (!entry) {
-        entry = { listeners: new Set(), timer: null }
-        zones.set(timeZone, entry)
-        entry.listeners.add(listener)
-        arm(timeZone)
-      } else {
-        entry.listeners.add(listener)
-      }
-      const current = entry
-      return () => {
-        current.listeners.delete(listener)
-        if (current.listeners.size > 0) return
-        if (current.timer) clearTimeout(current.timer)
-        zones.delete(timeZone)
-      }
-    },
-    getVersion: () => version,
-  }
-})()
-
-/** Re-renders the caller on the next midnight in `timeZone`. */
-function useMidnightTick(timeZone: string): number {
-  const subscribe = useCallback(
-    (listener: () => void) => midnightTicker.subscribe(timeZone, listener),
-    [timeZone]
-  )
-  return useSyncExternalStore(
-    subscribe,
-    midnightTicker.getVersion,
-    midnightTicker.getVersion
-  )
-}
-
-function useEventCalendarNavigation(): {
-  date: Date
-  /** i18n.functions.formatTitle output for the current view. */
-  title: string
-  visibleRange: EventCalendarDateRange
-  activeRange: EventCalendarDateRange
-  next: () => void
-  prev: () => void
-  today: () => void
-  goTo: (date: Date) => void
-  /** True when the anchor period contains now in the display time zone. */
-  isToday: boolean
-} {
-  const instance = useEventCalendar()
-  const { settings } = instance
-  const slice = useEventCalendarSelector(
-    (state) => ({
-      date: state.date,
-      view: state.view,
-      visibleRange: state.visibleRange,
-      activeRange: state.activeRange,
-    }),
-    {
-      isEqual: (a, b) =>
-        a.date.getTime() === b.date.getTime() &&
-        a.view === b.view &&
-        getRangeKey(a.visibleRange) === getRangeKey(b.visibleRange),
-    }
-  )
-  useEventCalendarSettingsVersion(instance)
-  useMidnightTick(settings.timeZone)
-  const now = new Date()
-  return {
-    date: slice.date,
-    title: settings.i18n.functions.formatTitle(slice.view, {
-      date: toZoned(slice.date, settings.timeZone),
-      activeRange: slice.activeRange,
-      visibleRange: slice.visibleRange,
-      locale: settings.locale,
-    }),
-    visibleRange: slice.visibleRange,
-    activeRange: slice.activeRange,
-    next: instance.api.next,
-    prev: instance.api.prev,
-    today: instance.api.today,
-    goTo: instance.api.goTo,
-    isToday: now >= slice.activeRange.start && now < slice.activeRange.end,
-  }
-}
-
-function useEventCalendarSelection(): {
-  selection: EventCalendarSelection
-  select: (selection: Partial<EventCalendarSelection>) => void
-  selectEvent: (key: string, opts?: { additive?: boolean }) => void
-  clearSelection: () => void
-} {
-  const instance = useEventCalendar()
-  const selection = useEventCalendarSelector((state) => state.selection)
-  return {
-    selection,
-    select: instance.api.select,
-    selectEvent: instance.api.selectEvent,
-    clearSelection: instance.api.clearSelection,
-  }
-}
-
-function useEventCalendarInteractions(): {
-  interactions: EventCalendarInteractions
-  setInteractions: (patch: Partial<EventCalendarInteractions>) => void
-} {
-  const instance = useEventCalendar()
-  const interactions = useEventCalendarSelector((state) => state.interactions)
-  return { interactions, setInteractions: instance.api.setInteractions }
-}
-
-/** Expanded, sorted occurrences; defaults to the visible range. */
-function useEventCalendarOccurrences<TData = unknown>(
-  range?: EventCalendarDateRange
-): EventCalendarOccurrence<TData>[] {
-  const instance = useEventCalendar<TData>()
-  return useEventCalendarSelector<TData, EventCalendarOccurrence<TData>[]>(
-    () => instance.api.getOccurrences(range),
-    {
-      calendar: instance,
-      // element identity, not keys: keys encode id+start only, so an end-only
-      // resize or a title/color/data edit would never invalidate a key-based
-      // memo. The index rebuilds occurrence objects precisely when events
-      // change, so identity is the correct (and cheapest) change signal.
-      isEqual: (a, b) =>
-        a === b || (a.length === b.length && a.every((occ, i) => occ === b[i])),
-    }
-  )
-}
-
-const EMPTY_BUCKET: EventCalendarDayBucket = { allDay: [], timed: [] }
-
-/** Per-cell subscription: only cells whose segments changed re-render. */
-function useEventCalendarDay<TData = unknown>(
-  day: Date
-): {
-  segments: EventCalendarDayBucket<TData>
-  isToday: boolean
-  isOutside: boolean
-} {
-  const instance = useEventCalendar<TData>()
-  const { timeZone } = instance.settings
-  const dayKey = getDayKey(day, timeZone)
-
-  const bucket = useEventCalendarSelector<TData, EventCalendarDayBucket<TData>>(
-    () =>
-      instance.internals.getIndex().byDay.get(dayKey) ??
-      (EMPTY_BUCKET as EventCalendarDayBucket<TData>),
-    {
-      calendar: instance,
-      // Element identity, not a content key: an occurrence key encodes
-      // id+start only, so a title/color/data edit produced an identical key
-      // and this cell kept serving its STALE segments. Buckets come straight
-      // out of the memoized index, which rebuilds precisely when events
-      // change, so identity is both correct and the cheapest signal.
-      isEqual: (a, b) =>
-        a === b ||
-        (a.allDay.length === b.allDay.length &&
-          a.timed.length === b.timed.length &&
-          a.allDay.every((segment, i) => segment === b.allDay[i]) &&
-          a.timed.every((segment, i) => segment === b.timed[i])),
-    }
-  )
-  const activeRange = useEventCalendarSelector<TData, EventCalendarDateRange>(
-    (state) => state.activeRange,
-    {
-      calendar: instance,
-      isEqual: (a, b) => getRangeKey(a) === getRangeKey(b),
-    }
-  )
-  useMidnightTick(timeZone)
-  const dayStart = zonedStartOfDay(day, timeZone)
-  return {
-    segments: bucket,
-    isToday: getDayKey(new Date(), timeZone) === dayKey,
-    isOutside: dayStart < activeRange.start || dayStart >= activeRange.end,
-  }
-}
-
-const EMPTY_BARS: EventCalendarSegment[] = []
-
-/**
- * Per-week-row subscription for the month view: the laned multi-day/all-day
- * bar segments (one per occurrence per row, colStart/colSpan/lane set) that
- * render as continuous cross-day bars. `laneCount` is the row's bar height.
- * Matched by CONTAINMENT - any day inside the row resolves it - so a
- * weekends-hidden month (first visible day Monday) still finds its row;
- * `rowStart` returns the row's TRUE start for colStart/colSpan day math.
- */
-function useEventCalendarWeek<TData = unknown>(
-  day: Date
-): {
-  bars: EventCalendarSegment<TData>[]
-  laneCount: number
-  rowStart: Date | null
-} {
-  const instance = useEventCalendar<TData>()
-  const { timeZone } = instance.settings
-  const dayStartMs = zonedStartOfDay(day, timeZone).getTime()
-
-  const row = useEventCalendarSelector<
-    TData,
-    { bars: EventCalendarSegment<TData>[]; rowStart: Date | null }
-  >(
-    () => {
-      const index = instance.internals.getIndex()
-      const match = index.weekRows.find((r) => {
-        const startMs = zonedStartOfDay(r.rowStart, timeZone).getTime()
-        // calendar-aware row end: a fixed 168h window would let the first
-        // day AFTER a spring-forward week (167h long) match the wrong row
-        const endMs = zonedStartOfDay(
-          addDays(toZoned(r.rowStart, timeZone), 7),
-          timeZone
-        ).getTime()
-        return dayStartMs >= startMs && dayStartMs < endMs
-      })
-      return {
-        bars: match?.bars ?? (EMPTY_BARS as EventCalendarSegment<TData>[]),
-        rowStart: match?.rowStart ?? null,
-      }
-    },
-    {
-      calendar: instance,
-      // Same reasoning as the day bucket above: `bars` is the array held by
-      // the memoized index, so element identity catches content edits that a
-      // key built from id+start could never see.
-      isEqual: (a, b) =>
-        (a.rowStart?.getTime() ?? 0) === (b.rowStart?.getTime() ?? 0) &&
-        (a.bars === b.bars ||
-          (a.bars.length === b.bars.length &&
-            a.bars.every((segment, i) => segment === b.bars[i]))),
-    }
-  )
-  const laneCount = row.bars.reduce((m, s) => Math.max(m, (s.lane ?? 0) + 1), 0)
-  return { bars: row.bars, laneCount, rowStart: row.rowStart }
-}
-
-/**
- * User view settings (weekends, week numbers, now line, off days, schedule
- * hint) + the effective values after falling back to the root view-config
- * props. Drives the nav submenu; fully controllable from outside via
- * `viewSettings`/`onViewSettingsChange` or api.setViewSettings.
- */
-function useEventCalendarViewSettings(): {
-  viewSettings: EventCalendarViewSettings
-  setViewSettings: (patch: EventCalendarViewSettings) => void
-  effective: Required<EventCalendarViewSettings>
-} {
-  const instance = useEventCalendar()
-  const viewConfig = useEventCalendarViewConfig()
-  const viewSettings = useEventCalendarSelector((state) => state.viewSettings)
-  return {
-    viewSettings,
-    setViewSettings: instance.api.setViewSettings,
-    effective: {
-      weekends: viewSettings.weekends ?? true,
-      weekNumbers: viewSettings.weekNumbers ?? viewConfig.showWeekNumbers,
-      nowIndicator: viewSettings.nowIndicator ?? viewConfig.nowIndicator,
-      offDays:
-        viewSettings.offDays ??
-        (viewConfig.offDays !== undefined && viewConfig.offDays !== false),
-    },
-  }
-}
-
-/** Subscribes to settings changes only (version counter, not state). */
-function useEventCalendarSettingsVersion<TData>(
-  instance: EventCalendarInstance<TData>
-): number {
-  return useSyncExternalStore(
-    instance.subscribe,
-    instance.internals.getSettingsVersion,
-    instance.internals.getSettingsVersion
-  )
-}
-
-/** Resolved settings incl. merged i18n; re-renders only when settings change. */
-function useEventCalendarSettings<
-  TData = unknown,
->(): EventCalendarSettings<TData> {
-  const instance = useEventCalendar<TData>()
-  useEventCalendarSettingsVersion(instance)
-  return instance.settings
-}
-
-const EventCalendarViewContext = createContext<{ view: CalendarView } | null>(
-  null
-)
-
-/**
- * Per-element class hooks, cn()-merged AFTER the built-in classes (so tailwind
- * variants and ! overrides win). Metric CSS variables can ride on any parent
- * key, e.g. classNames.timeGrid: "[--ec-gutter-width:4.5rem]".
- */
-interface EventCalendarClassNames {
-  nav?: string
-  toolbar?: string
-  content?: string
-  monthView?: string
-  monthCell?: string
-  timeGrid?: string
-  timeGutter?: string
-  dayColumn?: string
-  allDaySection?: string
-  agendaView?: string
-  event?: string
-  /** The styled hover tooltip popup (viewConfig.eventTooltip). */
-  eventTooltip?: string
-  moreIndicator?: string
-  /** The "+N more" popover panel. Control the on-demand scroll cap through
-   *  the CSS variable, e.g. "[--ec-more-max-height:20rem]". */
-  morePopover?: string
-  /** "+N more" popover day header row. */
-  morePopoverHeader?: string
-  // nav family (reachable without recomposing the default nav)
-  navButton?: string
-  title?: string
-  navTooltip?: string
-  viewSwitcherContent?: string
-  viewSwitcherLabel?: string
-  viewShortcut?: string
-  datePickerContent?: string
-  // month view
-  monthHeader?: string
-  monthDayHeader?: string
-  monthBody?: string
-  monthRow?: string
-  weekNumber?: string
-  monthBarOverlay?: string
-  monthBar?: string
-  monthCellContent?: string
-  monthCellFooter?: string
-  monthDayNumber?: string
-  dayAddButton?: string
-  // time grid / resource
-  timeGridHeader?: string
-  timeGutterLabel?: string
-  allDayLabel?: string
-  allDayCell?: string
-  timedChip?: string
-  resourceHeader?: string
-  // interaction surfaces (shared by every view)
-  dragGhost?: string
-  dragCarry?: string
-  dragCarryInvalid?: string
-  dropHint?: string
-  dropIndicator?: string
-  slotDraft?: string
-  resizeHandle?: string
-  resizeGrip?: string
-  // agenda
-  noEvents?: string
-  agendaDay?: string
-  agendaDayHeader?: string
-  agendaDayGutter?: string
-  agendaDate?: string
-  agendaDayToggle?: string
-  agendaDayContent?: string
-  agendaItem?: string
-  agendaItemSurface?: string
-  agendaItemToggle?: string
-  agendaDaySummary?: string
-  agendaSummaryDot?: string
-}
-
-interface EventCalendarRenderEventProps<TData = unknown> {
-  occurrence: EventCalendarOccurrence<TData>
-  segment: EventCalendarSegment<TData>
-  view: CalendarView
-  isDragging: boolean
-  isSelected: boolean
-}
-
-/**
- * View-layer configuration: display props and render overrides. These live on
- * <EventCalendar> (and per-view components), never in the headless options.
- */
-interface EventCalendarViewConfig<TData = unknown> {
-  scrollToHour: number
-  nowIndicator: boolean
-  /**
-   * Grid interval in minutes for the time-based views (day, week, N-days,
-   * time grid): gutter slots and gridlines follow it. Also accepted as a
-   * prop on each view component.
-   */
-  interval: number
-  maxEventsPerCell: number | "auto"
-  showWeekNumbers: boolean
-  enableShortcuts: boolean
-  shortcutsScope: "focus-within" | "global"
-  /**
-   * "contained" (default): the calendar fills its container and views scroll
-   * internally. "page": content flows with the document, the page scrolls,
-   * and day headers stick below `--ec-sticky-offset` (default 0px).
-   */
-  scrollMode: "contained" | "page"
-  /** Stick the default nav to the top while the page scrolls. */
-  stickyNav: boolean
-  /**
-   * Custom per-day indication (light background classes work in both themes,
-   * e.g. "bg-amber-500/10"). Applied to month cells, time-grid day columns,
-   * and all-day cells; content stays readable on top of it.
-   */
-  dayClassName?: (day: Date) => string | undefined
-  /**
-   * Extra classes for the CURRENT day, appended after the built-in highlight
-   * (primary-tinted background + accent top border) on month cells, time-grid
-   * day columns, and day headers.
-   */
-  todayClassName?: string
-  /**
-   * Show a hover "+" add affordance on month cells next to the day number.
-   * It fires the same onSlotClick as clicking the day. Calendar-level config
-   * (consistent affordance, wired to the create flow); use renderMonthCell
-   * when a fully custom cell is needed instead.
-   */
-  showDayAddButton: boolean
-  /**
-   * Scroll implementation for every internally scrolling surface (time grid,
-   * agenda, time-grid resources, month "+N more" popover):
-   * "custom" (default, shadcn ScrollArea) or "native" (browser scrollbars
-   * via overflow auto).
-   */
-  scrollbars: "custom" | "native"
-  /** Nav button variant; all nav buttons follow it. Default "ghost". */
-  navButtonVariant: "ghost" | "outline" | "secondary" | "default"
-  /** Nav button size; icon buttons use the icon twin. Default "sm". */
-  navButtonSize: "sm" | "default"
-  /**
-   * Off-day (non-working day) marking. true = weekends with a muted
-   * background; a config object customizes weekdays, explicit dates, a
-   * predicate, and the marker class. Marked cells carry data-off.
-   */
-  offDays?: boolean | EventCalendarOffDaysConfig
-  classNames?: EventCalendarClassNames
-  components?: Partial<Record<CalendarView, ComponentType>>
-  renderEvent?: (props: EventCalendarRenderEventProps<TData>) => ReactNode
-  renderAgendaEvent?: (props: EventCalendarRenderEventProps<TData>) => ReactNode
-  /**
-   * Content for the styled hover tooltip (viewConfig.eventTooltip). Return a
-   * falsy value (null / undefined, or the `false` a `cond && <node>` yields)
-   * to fall back to the default label (title + time); `label` itself is
-   * undefined when a consumer i18n.formatEventLabel opts out.
-   */
-  renderEventTooltip?: (props: {
-    occurrence: EventCalendarOccurrence<TData>
-    segment: EventCalendarSegment<TData>
-    view: CalendarView
-    label: string | undefined
-  }) => ReactNode
-  renderDragPreview?: (props: {
-    drag: EventCalendarDragState<TData>
-  }) => ReactNode
-  renderMonthCell?: (props: {
-    day: Date
-    segments: EventCalendarDayBucket<TData>
-    isToday: boolean
-    isOutside: boolean
-    overflowCount: number
-    defaultContent: ReactNode
-  }) => ReactNode
-  /**
-   * Time-grid business-logic layer, rendered pointer-events-none BEHIND event
-   * segments in each day column. Position overlays with
-   * top/height: calc(var(--ec-hour-height) * minutes / 60).
-   */
-  renderDayColumnBackground?: (props: {
-    day: Date
-    boundsStartMin: number
-    boundsEndMin: number
-    totalMinutes: number
-  }) => ReactNode
-  renderDayHeader?: (props: {
-    day: Date
-    view: CalendarView
-    isToday: boolean
-  }) => ReactNode
-  renderTimeGutterSlot?: (props: {
-    time: Date
-    hour: number
-    minute: number
-  }) => ReactNode
-  renderAllDaySection?: (props: {
-    days: Date[]
-    segments: EventCalendarSegment<TData>[]
-  }) => ReactNode
-  renderMoreIndicator?: (props: {
-    day: Date
-    count: number
-    segments: EventCalendarSegment<TData>[]
-  }) => ReactNode
-  /**
-   * Replaces the ENTIRE body of the built-in "+N more" popover (header +
-   * chip list) while keeping its trigger and positioning; `close` dismisses
-   * it. For a fully custom surface, return false from onMoreClick instead
-   * and open your own UI.
-   */
-  renderMoreContent?: (props: {
-    day: Date
-    segments: EventCalendarSegment<TData>[]
-    close: () => void
-  }) => ReactNode
-  /**
-   * Agenda-only expandable details. When it returns a node for an occurrence,
-   * the agenda row gains an expand/collapse toggle revealing the details
-   * below the chip (the calendar itself never knows the consumer's fields).
-   */
-  renderAgendaEventDetails?: (
-    occurrence: EventCalendarOccurrence<TData>
-  ) => ReactNode
-  renderNowIndicator?: (props: { time: Date }) => ReactNode
-  renderNoEvents?: () => ReactNode
-  /** Resource column header cell content; default is resource.title. */
-  renderResourceHeader?: (props: {
-    resource: EventCalendarResource
-  }) => ReactNode
-  /** Agenda date gutter (day badge + weekday + collapse toggle). */
-  renderAgendaDayHeader?: (props: {
-    day: Date
-    collapsed: boolean
-    count: number
-    toggle: () => void
-    defaultContent: ReactNode
-  }) => ReactNode
-  /** Collapsed agenda day summary row content. */
-  renderAgendaDaySummary?: (props: {
-    day: Date
-    occurrences: EventCalendarOccurrence<TData>[]
-    count: number
-    expand: () => void
-    defaultContent: ReactNode
-  }) => ReactNode
-  /**
-   * N-day presets offered by the view switcher when the "days" view is
-   * enabled. @default [5]
-   */
-  dayCountPresets: number[]
-  /**
-   * Nav tooltips: false disables them all; an object tunes placement and
-   * timings. @default { side: "bottom", delay: 600, closeDelay: 0, timeout: 300 }
-   */
-  navTooltips?:
-    | false
-    | {
-        side?: "top" | "bottom" | "left" | "right"
-        delay?: number
-        closeDelay?: number
-        timeout?: number
-      }
-  /**
-   * Styled tooltip on event hover / keyboard focus. `false` (default) keeps
-   * only the native title attribute; `true` shows the standard Tooltip with
-   * the event label; an object also tunes the side and open delay. Content is
-   * overridable with renderEventTooltip. @default false
-   */
-  eventTooltip?:
-    | boolean
-    | {
-        side?: "top" | "bottom" | "left" | "right"
-        delay?: number
-      }
-  /**
-   * Timed events shorter than this render the compact single-row chip layout.
-   * @default 45
-   */
-  compactEventMinutes: number
-  /** "+N more" popover alignment against its trigger. @default "start" */
-  morePopoverAlign: "start" | "center" | "end"
-  /** Now-indicator refresh cadence in milliseconds. @default 30000 */
-  nowIndicatorInterval: number
-  /** Max color dots in a collapsed agenda day summary. @default 6 */
-  agendaSummaryMaxDots: number
-}
-
-const DEFAULT_VIEW_CONFIG: EventCalendarViewConfig = {
-  scrollToHour: 7,
-  nowIndicator: true,
-  interval: 60,
-  maxEventsPerCell: "auto",
-  showWeekNumbers: false,
-  enableShortcuts: true,
-  shortcutsScope: "focus-within",
-  scrollMode: "contained",
-  stickyNav: false,
-  showDayAddButton: false,
-  scrollbars: "custom",
-  navButtonVariant: "ghost",
-  navButtonSize: "sm",
-  dayCountPresets: [5],
-  eventTooltip: false,
-  compactEventMinutes: 45,
-  morePopoverAlign: "start",
-  nowIndicatorInterval: 30_000,
-  agendaSummaryMaxDots: 6,
-}
-
-const EventCalendarViewConfigContext = createContext<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  EventCalendarViewConfig<any>
->(DEFAULT_VIEW_CONFIG)
-
-/** Root-level display props + render overrides, for view components. */
-function useEventCalendarViewConfig<
-  TData = unknown,
->(): EventCalendarViewConfig<TData> {
-  return useContext(EventCalendarViewConfigContext)
-}
-
-const VIEW_CONFIG_KEYS: Array<keyof EventCalendarViewConfig> = [
-  "scrollToHour",
-  "nowIndicator",
-  "interval",
-  "maxEventsPerCell",
-  "showWeekNumbers",
-  "enableShortcuts",
-  "shortcutsScope",
-  "scrollMode",
-  "stickyNav",
-  "dayClassName",
-  "todayClassName",
-  "showDayAddButton",
-  "scrollbars",
-  "navButtonVariant",
-  "navButtonSize",
-  "offDays",
-  "classNames",
-  "components",
-  "renderEvent",
-  "renderAgendaEvent",
-  "renderEventTooltip",
-  "renderDragPreview",
-  "renderMonthCell",
-  "renderDayColumnBackground",
-  "renderDayHeader",
-  "renderTimeGutterSlot",
-  "renderAllDaySection",
-  "renderMoreIndicator",
-  "renderMoreContent",
-  "renderNowIndicator",
-  "renderNoEvents",
-  "renderAgendaEventDetails",
-  "renderResourceHeader",
-  "renderAgendaDayHeader",
-  "renderAgendaDaySummary",
-  "dayCountPresets",
-  "navTooltips",
-  "eventTooltip",
-  "compactEventMinutes",
-  "morePopoverAlign",
-  "nowIndicatorInterval",
-  "agendaSummaryMaxDots",
-]
-
-/** The rendering view of the nearest view component ("month", "week", ...). */
-function useEventCalendarViewContext(): { view: CalendarView } {
-  const ctx = useContext(EventCalendarViewContext)
-  if (!ctx) {
-    throw new Error(
-      "useEventCalendarViewContext must be used inside a calendar view"
-    )
-  }
-  return ctx
-}
-
-interface EventCalendarProps<TData = unknown>
-  extends
-    UseEventCalendarStateOptions<TData>,
-    Partial<EventCalendarViewConfig<TData>>,
-    Omit<useRender.ComponentProps<"div">, "children" | "defaultValue"> {
-  /** Adopt a hoisted useEventCalendarState instance; option props are then ignored. */
-  calendar?: EventCalendarInstance<TData>
-  /** Imperative escape hatch usable from outside the tree. */
-  apiRef?: RefObject<EventCalendarApi<TData> | null>
-  children?: ReactNode
-}
-
-const OPTION_KEYS: Array<keyof UseEventCalendarStateOptions> = [
-  "events",
-  "defaultEvents",
-  "view",
-  "defaultView",
-  "date",
-  "defaultDate",
-  "dayCount",
-  "defaultDayCount",
-  "selection",
-  "defaultSelection",
-  "interactions",
-  "defaultInteractions",
-  "viewSettings",
-  "defaultViewSettings",
-  "loading",
-  "views",
-  "timeZone",
-  "locale",
-  "weekStartsOn",
-  "dayStartHour",
-  "dayEndHour",
-  "slotDuration",
-  "snapDuration",
-  "agendaDayCount",
-  "fixedWeeks",
-  "showOutsideDays",
-  "i18n",
-  "resources",
-  "getEventPriority",
-  "eventOrder",
-  "getOccurrences",
-  "weekendDays",
-  "activation",
-  "onEventClick",
-  "onEventDoubleClick",
-  "onEventUpdate",
-  "canDropEvent",
-  "onDragBlocked",
-  "onSlotClick",
-  "onSelectSlot",
-  "canSelectSlot",
-  "onRangeChange",
-  "onViewChange",
-  "onDateChange",
-  "onDayCountChange",
-  "onSelectionChange",
-  "onInteractionsChange",
-  "onViewSettingsChange",
-  "onEventsChange",
-  "onMoreClick",
-]
-
-function splitOptions<TData>(props: Record<string, unknown>): {
-  options: UseEventCalendarStateOptions<TData>
-  viewConfig: EventCalendarViewConfig<TData>
-  rest: Record<string, unknown>
-} {
-  const options: Record<string, unknown> = {}
-  const viewConfig: Record<string, unknown> = { ...DEFAULT_VIEW_CONFIG }
-  const rest: Record<string, unknown> = {}
-  for (const [key, value] of Object.entries(props)) {
-    if ((OPTION_KEYS as string[]).includes(key)) options[key] = value
-    else if ((VIEW_CONFIG_KEYS as string[]).includes(key)) {
-      if (value !== undefined) viewConfig[key] = value
-    } else rest[key] = value
-  }
-  return {
-    options: options as UseEventCalendarStateOptions<TData>,
-    viewConfig: viewConfig as unknown as EventCalendarViewConfig<TData>,
-    rest,
-  }
-}
-
-/**
- * Root provider + container. Composition contract:
- * <EventCalendar><EventCalendarNav/><EventCalendarToolbar/><EventCalendarContent/></EventCalendar>
- */
-function EventCalendar<TData = unknown>({
-  calendar,
-  apiRef,
-  className,
-  render,
-  children,
-  ...props
-}: EventCalendarProps<TData>) {
-  const { options, viewConfig, rest } = splitOptions<TData>(
-    props as Record<string, unknown>
-  )
-
-  if (calendar && Object.keys(options).length > 0) {
-    warnOnce(
-      "calendar-and-options",
-      "both `calendar` and option props were passed; option props are ignored when adopting an instance."
-    )
-  }
-
-  const own = useEventCalendarState<TData>(calendar ? {} : options)
-  const instance = calendar ?? own
-
-  useEffect(() => {
-    if (apiRef) apiRef.current = instance.api
-  }, [apiRef, instance])
-
-  // Register the root element so the drag engine can find day cells even when a
-  // gesture starts from a portaled surface (the "+N more" popover).
-  const registerRoot = useCallback(
-    (el: HTMLElement | null) => instance.internals.setRootEl(el),
-    [instance]
-  )
-
-  const defaultProps = {
-    "data-slot": "event-calendar",
-    ref: registerRoot,
-    // text-xs is the calendar-wide default type size; because it sits before
-    // `className`, a consumer can override the whole scale with e.g.
-    // <EventCalendar className="text-sm"> and every inheriting element follows.
-    // Inner elements omit their own text-size so they cascade from here (the
-    // few portaled surfaces - "+N more" popover, drag carry clone - pin the
-    // size explicitly since DOM inheritance does not cross a portal).
-    className: cn("flex min-h-0 min-w-0 flex-col text-xs", className),
-    children: (
-      <>
-        {children}
-        <div
-          data-slot="event-calendar-announcer"
-          aria-live="polite"
-          className="sr-only"
-        />
-      </>
-    ),
-  }
-
-  return (
-    <EventCalendarContext.Provider value={instance}>
-      <EventCalendarViewConfigContext.Provider value={viewConfig}>
-        {useRender({
-          defaultTagName: "div",
-          render,
-          props: mergeProps<"div">(defaultProps, rest),
-        })}
-      </EventCalendarViewConfigContext.Provider>
-    </EventCalendarContext.Provider>
-  )
-}
-
-export {
-  ALL_VIEWS,
-  BASE_VIEWS,
-  DEFAULT_VIEW_CONFIG,
-  EventCalendar,
-  EventCalendarContext,
-  EventCalendarViewConfigContext,
-  EventCalendarViewContext,
-  useEventCalendar,
-  useEventCalendarDay,
-  useEventCalendarWeek,
-  useEventCalendarInteractions,
-  useEventCalendarNavigation,
-  useEventCalendarOccurrences,
-  useEventCalendarSelection,
-  useEventCalendarSelector,
-  useEventCalendarSettings,
-  useEventCalendarSettingsVersion,
-  useEventCalendarState,
-  useEventCalendarView,
-  useEventCalendarViewConfig,
-  useEventCalendarViewContext,
-  useEventCalendarViewSettings,
-}
-export type {
-  EventCalendarActivationConfig,
-  EventCalendarApi,
-  EventCalendarCallbacks,
-  EventCalendarClassNames,
-  EventCalendarInstance,
-  EventCalendarInternals,
-  EventCalendarProps,
-  EventCalendarRenderEventProps,
-  EventCalendarSettings,
-  EventCalendarViewConfig,
-  UseEventCalendarStateOptions,
-}
\ No newline at end of file
diff --git a/apps/web/src/components/schedule/schedule-agenda-panel.tsx b/apps/web/src/components/schedule/schedule-agenda-panel.tsx
deleted file mode 100644
index 7b746fd..0000000
--- a/apps/web/src/components/schedule/schedule-agenda-panel.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useMemo } from 'react'
-import { addHours, parseISO } from 'date-fns'
-import { ru } from 'date-fns/locale'
-
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
-import { EventCalendar } from '@/components/reui/event-calendar/event-calendar'
-import { EventCalendarContent } from '@/components/reui/event-calendar/event-calendar-content'
-import { EventCalendarNav } from '@/components/reui/event-calendar/event-calendar-nav'
-import type { CalendarEvent } from '@/components/reui/event-calendar/event-calendar-types'
-import { jobKindRu } from '@/lib/ui-labels'
-import type { JobRow } from '@/types/api'
-
-/**
- * Schedule calendar — ReUI EventCalendar (month + agenda).
- * @see https://reui.io/preview/base/components/c-event-calendar-1
- * @see https://reui.io/docs/components/base/event-calendar
- * @see https://reui.io/docs/components/base/frame
- */
-
-const CALENDAR_I18N = {
-  labels: {
-    today: 'Сегодня',
-    previous: 'Назад',
-    next: 'Вперёд',
-    addEvent: 'Добавить',
-    allDay: 'Весь день',
-    more: (count: number) => `ещё ${count}`,
-    noEvents: 'Нет задач',
-    loading: 'Загрузка…',
-    event: 'задача',
-    events: (count: number) =>
-      count === 1 ? '1 задача' : count < 5 ? `${count} задачи` : `${count} задач`,
-    selectView: 'Вид',
-    week: (weekNumber: number) => `Н${weekNumber}`,
-    resources: 'Ресурсы',
-    goToDate: 'Перейти к дате',
-    dropNotAllowed: 'Сюда нельзя',
-    continues: 'продолжается',
-    timeFrom: (time: string) => `с ${time}`,
-    timeUntil: (time: string) => `до ${time}`,
-    moreCompact: (count: number) => `+${count}`,
-    timeRange: (from: string, to: string) => `${from}–${to}`,
-  },
-  viewNames: {
-    month: 'Месяц',
-    week: 'Неделя',
-    day: 'День',
-    agenda: 'Повестка',
-    resource: 'Сетка',
-  },
-  formats: {
-    monthTitle: 'LLLL yyyy',
-    dayTitle: 'EEEE, d MMMM yyyy',
-    monthDayHeader: 'EEEEE',
-    agendaDayHeader: 'EEEE, d MMMM',
-    eventTime: 'HH:mm',
-    timeGutter: 'HH:mm',
-  },
-}
-
-function jobTimestamp(job: JobRow): string | undefined {
-  return job.created_at ?? job.started_at ?? job.finished_at ?? undefined
-}
-
-function jobEventColor(status: string): string {
-  const s = status.toLowerCase()
-  if (s === 'succeeded') return 'var(--success)'
-  if (s === 'running' || s === 'queued') return 'var(--warning)'
-  if (s === 'failed' || s === 'error' || s === 'cancelled') return 'var(--destructive)'
-  return 'var(--primary)'
-}
-
-function jobsToEvents(jobs: JobRow[]): CalendarEvent<JobRow>[] {
-  const events: CalendarEvent<JobRow>[] = []
-  for (const job of jobs) {
-    const raw = jobTimestamp(job)
-    if (!raw) continue
-    let start: Date
-    try {
-      start = parseISO(raw)
-    } catch {
-      continue
-    }
-    if (Number.isNaN(start.getTime())) continue
-    let end = job.finished_at ? parseISO(job.finished_at) : addHours(start, 1)
-    if (Number.isNaN(end.getTime()) || end <= start) {
-      end = addHours(start, 1)
-    }
-    events.push({
-      id: job.job_id,
-      title: jobKindRu(job.kind),
-      start,
-      end,
-      readOnly: true,
-      draggable: false,
-      resizable: false,
-      color: jobEventColor(job.status),
-      data: job,
-    })
-  }
-  return events
-}
-
-export function ScheduleAgendaPanel({
-  jobs,
-  isLoading,
-}: {
-  jobs: JobRow[]
-  isLoading?: boolean
-}) {
-  const events = useMemo(() => jobsToEvents(jobs), [jobs])
-
-  return (
-    <Frame dense spacing="sm" className="w-full min-w-0">
-      <FrameHeader>
-        <FrameTitle>Календарь задач</FrameTitle>
-        <FrameDescription>Задачи обновления и применения по дням</FrameDescription>
-      </FrameHeader>
-      <FramePanel className="p-0">
-        <EventCalendar
-          className="h-[560px]"
-          events={events}
-          loading={isLoading}
-          defaultView="month"
-          views={['month', 'agenda']}
-          locale={ru}
-          weekStartsOn={1}
-          interactions={{ drag: false, resize: false, selectSlot: false }}
-          i18n={CALENDAR_I18N}
-        >
-          <EventCalendarNav />
-          <EventCalendarContent />
-        </EventCalendar>
-      </FramePanel>
-    </Frame>
-  )
-}
diff --git a/apps/web/src/components/badge-tabs.tsx b/apps/web/src/components/segmented-tabs.tsx
similarity index 73%
rename from apps/web/src/components/badge-tabs.tsx
rename to apps/web/src/components/segmented-tabs.tsx
index 8196d87..4874c2e 100644
--- a/apps/web/src/components/badge-tabs.tsx
+++ b/apps/web/src/components/segmented-tabs.tsx
@@ -5,7 +5,7 @@ import { cn } from '@evobgp/ui/lib/utils'
 
 import { Badge } from '@/components/reui/badge'
 
-export type BadgeTabItem = {
+export type SegmentedTabItem = {
   value: string
   label: string
   count?: number
@@ -13,8 +13,8 @@ export type BadgeTabItem = {
   icon?: ReactNode
 }
 
-interface BadgeTabsProps {
-  items: BadgeTabItem[]
+interface SegmentedTabsProps {
+  items: SegmentedTabItem[]
   value?: string
   defaultValue?: string
   onValueChange?: (value: string) => void
@@ -24,8 +24,12 @@ interface BadgeTabsProps {
   contentClassName?: string
 }
 
-/** Underline tabs with optional badge counts (ReUI c-tabs-7 pattern). */
-export function BadgeTabs({
+/**
+ * Page-level section switcher — native shadcn Tabs, default (segmented) list.
+ * @see https://reui.io/preview/base/components/c-tabs-9
+ * @see https://reui.io/components/tabs
+ */
+export function SegmentedTabs({
   items,
   value,
   defaultValue,
@@ -34,22 +38,16 @@ export function BadgeTabs({
   className,
   listClassName,
   contentClassName,
-}: BadgeTabsProps) {
+}: SegmentedTabsProps) {
   return (
     <Tabs
       value={value}
       defaultValue={defaultValue}
       onValueChange={onValueChange}
       orientation="horizontal"
-      className={cn('w-full min-w-0', className)}
+      className={cn('w-full min-w-0 gap-4', className)}
     >
-      <TabsList
-        variant="line"
-        className={cn(
-          'mb-3.5 w-full min-w-0 justify-start gap-4',
-          listClassName,
-        )}
-      >
+      <TabsList className={cn('h-auto w-full min-w-0 justify-start', listClassName)}>
         {items.map((item) => (
           <TabsTrigger key={item.value} value={item.value} className="shrink-0 gap-2">
             {item.icon}
diff --git a/apps/web/src/components/skeletons.tsx b/apps/web/src/components/skeletons.tsx
index 57b5aaf..0c6427e 100644
--- a/apps/web/src/components/skeletons.tsx
+++ b/apps/web/src/components/skeletons.tsx
@@ -1,7 +1,6 @@
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 
-import { KpiStatGrid } from '@/components/kpi-stat-grid'
-import { panelCardInsetClassName } from '@/components/panel-card'
+import { KpiStatGrid, panelCardInsetClassName } from '@/components/reui-kit'
 import {
   chartPanelGridClassName,
   dashboardMainSidebarClassName,
@@ -10,23 +9,14 @@ import {
 export function KpiStatGridSkeleton({ count = 4 }: { count?: number }) {
   return (
     <KpiStatGrid
-      items={Array.from({ length: count }, (_, index) => ({
-        id: `kpi-skeleton-${index}`,
-        icon: <Skeleton className="size-4 rounded-sm" />,
-        value: <Skeleton className="h-8 w-16" />,
-        label: <Skeleton className="h-4 w-28" />,
-        footer: <Skeleton className="h-5 w-32 rounded-full" />,
-      }))}
+      items={[]}
+      isLoading
+      skeletonCount={count}
       aria-label="Загрузка показателей"
     />
   )
 }
 
-/** @deprecated Use KpiStatGridSkeleton */
-export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
-  return <KpiStatGridSkeleton count={count} />
-}
-
 /** Matches dashboard layout: KPI row, charts, main+sidebar, bottom grids. */
 export function AnalyticsDashboardSkeleton() {
   return (
diff --git a/apps/web/src/components/status-badge.tsx b/apps/web/src/components/status-badge.tsx
index 6913650..7e6c62d 100644
--- a/apps/web/src/components/status-badge.tsx
+++ b/apps/web/src/components/status-badge.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 import { cn } from '@evobgp/ui/lib/utils'
 
@@ -42,6 +42,13 @@ const DOT_COLOR: Record<string, string> = {
   outline: 'bg-muted-foreground',
 }
 
+const TONE_VARIANT: Record<string, BadgeVariant> = {
+  neutral: 'outline',
+  info: 'info-light',
+  warning: 'warning-light',
+  success: 'success-light',
+}
+
 export function jobStatusVariant(status: string): BadgeVariant {
   return STATUS_VARIANT[status.toLowerCase()] ?? 'outline'
 }
@@ -70,3 +77,41 @@ export function StatusBadge({
     </div>
   )
 }
+
+export function ModeBadge({
+  enabled,
+  onLabel = 'включён',
+  offLabel = 'выключен',
+  className,
+}: {
+  enabled: boolean
+  onLabel?: string
+  offLabel?: string
+  className?: string
+}) {
+  return enabled ? (
+    <Badge variant="success-light" size="sm" radius="full" className={className}>
+      {onLabel}
+    </Badge>
+  ) : (
+    <Badge variant="secondary" size="sm" radius="full" className={className}>
+      {offLabel}
+    </Badge>
+  )
+}
+
+export function CategoryBadge({
+  children,
+  tone = 'neutral',
+  className,
+}: {
+  children: ReactNode
+  tone?: keyof typeof TONE_VARIANT
+  className?: string
+}) {
+  return (
+    <Badge variant={TONE_VARIANT[tone]} size="sm" radius="full" className={className}>
+      {children}
+    </Badge>
+  )
+}
diff --git a/apps/web/src/components/status-toggle-group.tsx b/apps/web/src/components/status-toggle-group.tsx
new file mode 100644
index 0000000..331991d
--- /dev/null
+++ b/apps/web/src/components/status-toggle-group.tsx
@@ -0,0 +1,54 @@
+import { ToggleGroup, ToggleGroupItem } from '@evobgp/ui/components/toggle-group'
+import { cn } from '@evobgp/ui/lib/utils'
+
+export type StatusToggleItem = {
+  id: string
+  label: string
+  count?: number
+}
+
+interface StatusToggleGroupProps {
+  items: StatusToggleItem[]
+  value: string
+  onValueChange: (value: string) => void
+  className?: string
+  'aria-label'?: string
+}
+
+/**
+ * Grid status filter — native ToggleGroup in the ResourcePage toolbar.
+ * @see https://reui.io/preview/base/components/c-toggle-group-5
+ * @see https://reui.io/components/toggle-group
+ */
+export function StatusToggleGroup({
+  items,
+  value,
+  onValueChange,
+  className,
+  'aria-label': ariaLabel = 'Статус',
+}: StatusToggleGroupProps) {
+  return (
+    <ToggleGroup
+      multiple={false}
+      value={[value]}
+      onValueChange={(values) => {
+        const next = values[0]
+        if (next) onValueChange(next)
+      }}
+      variant="outline"
+      size="sm"
+      spacing={0}
+      aria-label={ariaLabel}
+      className={cn('w-fit', className)}
+    >
+      {items.map((item) => (
+        <ToggleGroupItem key={item.id} value={item.id} className="gap-1.5 px-2.5">
+          <span>{item.label}</span>
+          {item.count !== undefined ? (
+            <span className="text-muted-foreground tabular-nums">{item.count}</span>
+          ) : null}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  )
+}
diff --git a/apps/web/src/components/ui/svgs/anthropicBlack.tsx b/apps/web/src/components/ui/svgs/anthropicBlack.tsx
deleted file mode 100644
index ba88a16..0000000
--- a/apps/web/src/components/ui/svgs/anthropicBlack.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { SVGProps } from "react";
-
-const AnthropicBlack = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    {...props}
-    fillRule="evenodd"
-    style={{ flex: "none", lineHeight: "1" }}
-    viewBox="0 0 24 24"
-  >
-    <title>Anthropic</title>
-    <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z" />
-  </svg>
-);
-
-export { AnthropicBlack };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/anthropicWhite.tsx b/apps/web/src/components/ui/svgs/anthropicWhite.tsx
deleted file mode 100644
index 1049fe6..0000000
--- a/apps/web/src/components/ui/svgs/anthropicWhite.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { SVGProps } from "react";
-
-const AnthropicWhite = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    {...props}
-    fill="#ffff"
-    fillRule="evenodd"
-    style={{ flex: "none", lineHeight: "1" }}
-    viewBox="0 0 24 24"
-  >
-    <title>Anthropic</title>
-    <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z" />
-  </svg>
-);
-
-export { AnthropicWhite };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/claudeAiIcon.tsx b/apps/web/src/components/ui/svgs/claudeAiIcon.tsx
deleted file mode 100644
index 4ffe401..0000000
--- a/apps/web/src/components/ui/svgs/claudeAiIcon.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const ClaudeAiIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 257">
-    <path
-      fill="#D97757"
-      d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"
-    />
-  </svg>
-);
-
-export { ClaudeAiIcon };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/convex.tsx b/apps/web/src/components/ui/svgs/convex.tsx
deleted file mode 100644
index 0b0cd4c..0000000
--- a/apps/web/src/components/ui/svgs/convex.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-const Convex = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="28 28 128 132" fill="none">
-    <path
-      fill="#F3B01C"
-      d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122Z"
-    />
-    <path
-      fill="#8D2676"
-      d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555Z"
-    />
-    <path
-      fill="#EE342F"
-      d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704Z"
-    />
-  </svg>
-);
-
-export { Convex };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/cursorDark.tsx b/apps/web/src/components/ui/svgs/cursorDark.tsx
deleted file mode 100644
index 8db6a78..0000000
--- a/apps/web/src/components/ui/svgs/cursorDark.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react"
-
-const CursorDark = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} id="Ebene_1" version="1.1" viewBox="0 0 466.73 532.09">
-    <path
-      fill="#fff"
-      d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
-    />
-  </svg>
-)
-
-export { CursorDark }
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/cursorLight.tsx b/apps/web/src/components/ui/svgs/cursorLight.tsx
deleted file mode 100644
index 9218c09..0000000
--- a/apps/web/src/components/ui/svgs/cursorLight.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { SVGProps } from "react";
-
-const CursorLight = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} id="Ebene_1" version="1.1" viewBox="0 0 466.73 532.09">
-    <path d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z" />
-  </svg>
-);
-
-export { CursorLight };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/discord.tsx b/apps/web/src/components/ui/svgs/discord.tsx
deleted file mode 100644
index 1c6ba32..0000000
--- a/apps/web/src/components/ui/svgs/discord.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const Discord = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 256 199" preserveAspectRatio="xMidYMid">
-    <path
-      d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z"
-      fill="#5865F2"
-    />
-  </svg>
-);
-
-export { Discord };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/gemini.tsx b/apps/web/src/components/ui/svgs/gemini.tsx
deleted file mode 100644
index 4a2bc07..0000000
--- a/apps/web/src/components/ui/svgs/gemini.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import type { SVGProps } from "react";
-
-const Gemini = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 296 298" fill="none">
-    <mask
-      id="a"
-      width="296"
-      height="298"
-      x="0"
-      y="0"
-      maskUnits="userSpaceOnUse"
-      style={{ maskType: "alpha" }}
-    >
-      <path
-        fill="#3186FF"
-        d="M141.201 4.886c2.282-6.17 11.042-6.071 13.184.148l5.985 17.37a184.004 184.004 0 0 0 111.257 113.049l19.304 6.997c6.143 2.227 6.156 10.91.02 13.155l-19.35 7.082a184.001 184.001 0 0 0-109.495 109.385l-7.573 20.629c-2.241 6.105-10.869 6.121-13.133.025l-7.908-21.296a184 184 0 0 0-109.02-108.658l-19.698-7.239c-6.102-2.243-6.118-10.867-.025-13.132l20.083-7.467A183.998 183.998 0 0 0 133.291 26.28l7.91-21.394Z"
-      />
-    </mask>
-    <g mask="url(#a)">
-      <g filter="url(#b)">
-        <ellipse cx="163" cy="149" fill="#3689FF" rx="196" ry="159" />
-      </g>
-      <g filter="url(#c)">
-        <ellipse cx="33.5" cy="142.5" fill="#F6C013" rx="68.5" ry="72.5" />
-      </g>
-      <g filter="url(#d)">
-        <ellipse cx="19.5" cy="148.5" fill="#F6C013" rx="68.5" ry="72.5" />
-      </g>
-      <g filter="url(#e)">
-        <path
-          fill="#FA4340"
-          d="M194 10.5C172 82.5 65.5 134.333 22.5 135L144-66l50 76.5Z"
-        />
-      </g>
-      <g filter="url(#f)">
-        <path
-          fill="#FA4340"
-          d="M190.5-12.5C168.5 59.5 62 111.333 19 112L140.5-89l50 76.5Z"
-        />
-      </g>
-      <g filter="url(#g)">
-        <path
-          fill="#14BB69"
-          d="M194.5 279.5C172.5 207.5 66 155.667 23 155l121.5 201 50-76.5Z"
-        />
-      </g>
-      <g filter="url(#h)">
-        <path
-          fill="#14BB69"
-          d="M196.5 320.5C174.5 248.5 68 196.667 25 196l121.5 201 50-76.5Z"
-        />
-      </g>
-    </g>
-    <defs>
-      <filter
-        id="b"
-        width="464"
-        height="390"
-        x="-69"
-        y="-46"
-        colorInterpolationFilters="sRGB"
-        filterUnits="userSpaceOnUse"
-      >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-        <feGaussianBlur
-          result="effect1_foregroundBlur_69_17998"
-          stdDeviation="18"
-        />
-      </filter>
-      <filter
-        id="c"
-        width="265"
-        height="273"
-        x="-99"
-        y="6"
-        colorInterpolationFilters="sRGB"
-        filterUnits="userSpaceOnUse"
-      >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-        <feGaussianBlur
-          result="effect1_foregroundBlur_69_17998"
-          stdDeviation="32"
-        />
-      </filter>
-      <filter
-        id="d"
-        width="265"
-        height="273"
-        x="-113"
-        y="12"
-        colorInterpolationFilters="sRGB"
-        filterUnits="userSpaceOnUse"
-      >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-        <feGaussianBlur
-          result="effect1_foregroundBlur_69_17998"
-          stdDeviation="32"
-        />
-      </filter>
-      <filter
-        id="e"
-        width="299.5"
-        height="329"
-        x="-41.5"
-        y="-130"
-        colorInterpolationFilters="sRGB"
-        filterUnits="userSpaceOnUse"
-      >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-        <feGaussianBlur
-          result="effect1_foregroundBlur_69_17998"
-          stdDeviation="32"
-        />
-      </filter>
-      <filter
-        id="f"
-        width="299.5"
-        height="329"
-        x="-45"
-        y="-153"
-        colorInterpolationFilters="sRGB"
-        filterUnits="userSpaceOnUse"
-      >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-        <feGaussianBlur
-          result="effect1_foregroundBlur_69_17998"
-          stdDeviation="32"
-        />
-      </filter>
-      <filter
-        id="g"
-        width="299.5"
-        height="329"
-        x="-41"
-        y="91"
-        colorInterpolationFilters="sRGB"
-        filterUnits="userSpaceOnUse"
-      >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-        <feGaussianBlur
-          result="effect1_foregroundBlur_69_17998"
-          stdDeviation="32"
-        />
-      </filter>
-      <filter
-        id="h"
-        width="299.5"
-        height="329"
-        x="-39"
-        y="132"
-        colorInterpolationFilters="sRGB"
-        filterUnits="userSpaceOnUse"
-      >
-        <feFlood floodOpacity="0" result="BackgroundImageFix" />
-        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-        <feGaussianBlur
-          result="effect1_foregroundBlur_69_17998"
-          stdDeviation="32"
-        />
-      </filter>
-    </defs>
-  </svg>
-);
-
-export { Gemini };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/googleCalendar.tsx b/apps/web/src/components/ui/svgs/googleCalendar.tsx
deleted file mode 100644
index d1b5cf3..0000000
--- a/apps/web/src/components/ui/svgs/googleCalendar.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { SVGProps } from "react";
-
-const GoogleCalendar = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 512 512" fill="none">
-    <g clipPath="url(#clip0_5072_3766)">
-      <path
-        d="M390.736 121.264H121.264V390.736H390.736V121.264Z"
-        fill="white"
-      />
-      <path
-        d="M390.736 512L512 390.736L451.368 380.392L390.736 390.736L379.67 446.196L390.736 512Z"
-        fill="#EA4335"
-      />
-      <path
-        d="M0 390.736V471.578C0 493.912 18.088 512 40.42 512H121.264L133.714 451.368L121.264 390.736L55.198 380.392L0 390.736Z"
-        fill="#188038"
-      />
-      <path
-        d="M512 121.264V40.42C512 18.088 493.912 0 471.58 0H390.736C383.36 30.072 379.671 52.2027 379.67 66.392C379.67 80.58 383.359 98.8707 390.736 121.264C417.556 128.944 437.767 132.784 451.368 132.784C464.969 132.784 485.18 128.945 512 121.264Z"
-        fill="#1967D2"
-      />
-      <path d="M512 121.264H390.736V390.736H512V121.264Z" fill="#FBBC04" />
-      <path d="M390.736 390.736H121.264V512H390.736V390.736Z" fill="#34A853" />
-      <path
-        d="M390.736 0H40.422C18.088 0 0 18.088 0 40.42V390.736H121.264V121.264H390.736V0Z"
-        fill="#4285F4"
-      />
-      <path
-        d="M176.54 330.308C166.468 323.504 159.494 313.568 155.688 300.428L179.066 290.796C181.186 298.88 184.891 305.145 190.182 309.592C195.436 314.038 201.836 316.228 209.314 316.228C216.959 316.228 223.527 313.903 229.018 309.254C234.51 304.606 237.272 298.678 237.272 291.504C237.272 284.16 234.375 278.164 228.582 273.516C222.788 268.868 215.512 266.544 206.822 266.544H193.314V243.404H205.44C212.917 243.404 219.216 241.382 224.336 237.338C229.456 233.298 232.016 227.772 232.016 220.732C232.016 214.468 229.726 209.482 225.146 205.744C220.566 202.004 214.77 200.118 207.73 200.118C200.858 200.118 195.402 201.938 191.36 205.608C187.319 209.289 184.282 213.937 182.534 219.116L159.394 209.482C162.458 200.792 168.084 193.112 176.336 186.476C184.588 179.84 195.132 176.506 207.932 176.506C217.398 176.506 225.92 178.326 233.466 181.996C241.01 185.668 246.938 190.754 251.216 197.222C255.496 203.722 257.616 210.998 257.616 219.082C257.616 227.334 255.63 234.308 251.656 240.034C247.682 245.76 242.796 250.138 237.002 253.204V254.584C244.483 257.669 250.982 262.735 255.798 269.238C260.682 275.806 263.142 283.654 263.142 292.818C263.142 301.978 260.816 310.164 256.168 317.338C251.52 324.514 245.088 330.172 236.934 334.282C228.75 338.392 219.554 340.482 209.348 340.482C197.524 340.514 186.612 337.112 176.54 330.308ZM320.132 214.298L294.466 232.858L281.632 213.39L327.678 180.176H345.328V336.842H320.132V214.298Z"
-        fill="#4285F4"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_5072_3766">
-        <rect width="512" height="512" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-export { GoogleCalendar };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/googleCloud.tsx b/apps/web/src/components/ui/svgs/googleCloud.tsx
deleted file mode 100644
index f2a6a8a..0000000
--- a/apps/web/src/components/ui/svgs/googleCloud.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-const GoogleCloud = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 -25 256 256">
-    <path
-      fill="#EA4335"
-      d="m170.252 56.819 22.253-22.253 1.483-9.37C153.437-11.677 88.976-7.496 52.42 33.92 42.267 45.423 34.734 59.764 30.717 74.573l7.97-1.123 44.505-7.34 3.436-3.513c19.797-21.742 53.27-24.667 76.128-6.168l7.496.39Z"
-    />
-    <path
-      fill="#4285F4"
-      d="M224.205 73.918a100.249 100.249 0 0 0-30.217-48.722l-31.232 31.232a55.515 55.515 0 0 1 20.379 44.037v5.544c15.35 0 27.797 12.445 27.797 27.796 0 15.352-12.446 27.485-27.797 27.485h-55.671l-5.466 5.934v33.34l5.466 5.231h55.67c39.93.311 72.553-31.494 72.864-71.424a72.303 72.303 0 0 0-31.793-60.453"
-    />
-    <path
-      fill="#34A853"
-      d="M71.87 205.796h55.593V161.29H71.87a27.275 27.275 0 0 1-11.399-2.498l-7.887 2.42-22.409 22.253-1.952 7.574c12.567 9.489 27.9 14.825 43.647 14.757"
-    />
-    <path
-      fill="#FBBC05"
-      d="M71.87 61.425C31.94 61.664-.237 94.228.001 134.159a72.301 72.301 0 0 0 28.222 56.88l32.248-32.246c-13.99-6.322-20.208-22.786-13.887-36.776 6.32-13.99 22.786-20.208 36.775-13.888a27.796 27.796 0 0 1 13.887 13.888l32.248-32.248A72.224 72.224 0 0 0 71.87 61.425"
-    />
-  </svg>
-);
-
-export { GoogleCloud };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/hono.tsx b/apps/web/src/components/ui/svgs/hono.tsx
deleted file mode 100644
index 4dda4be..0000000
--- a/apps/web/src/components/ui/svgs/hono.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { SVGProps } from "react";
-
-const Hono = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 330">
-    <path
-      d="M134.129.029c.876-.113 1.65.108 2.319.662a1256.253 1256.253 0 0 1 69.573 93.427c16.094 24.231 29.788 49.851 41.082 76.862 18.037 48.108 8.65 89.963-28.16 125.564-32.209 27.22-69.314 37.822-111.318 31.805-50.208-10.237-84.332-39.28-102.373-87.133C.553 225.638-.993 209.736.614 193.51c2.676-27.93 9.302-54.877 19.878-80.838 4.407-10.592 10.15-20.31 17.228-29.154a381.88 381.88 0 0 1 16.565 21.203c2.44 2.55 4.98 4.98 7.62 7.289C82.06 72.01 106.135 34.685 134.13.029Z"
-      fill="#FF5B11"
-      opacity=".993"
-    />
-    <path
-      d="M129.49 53.7c24.314 28.2 46.29 58.238 65.93 90.114a187.318 187.318 0 0 1 15.24 33.13c8.338 32.804-.607 59.86-26.836 81.169-25.367 17.85-53.196 23.15-83.488 15.902-32.666-10.136-51.55-32.113-56.653-65.929-1.238-10.662-.133-21.043 3.314-31.142a225.41 225.41 0 0 1 17.89-35.78l19.878-29.155a5509.508 5509.508 0 0 0 44.726-58.31Z"
-      fill="#FF9758"
-    />
-  </svg>
-);
-
-export { Hono };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/loom.tsx b/apps/web/src/components/ui/svgs/loom.tsx
deleted file mode 100644
index f2a8ae9..0000000
--- a/apps/web/src/components/ui/svgs/loom.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const Loom = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 256 256" preserveAspectRatio="xMidYMid">
-    <path
-      fill="#625DF5"
-      d="M256 113.765h-74.858l64.83-37.43-14.237-24.667-64.83 37.43 37.421-64.825-24.667-14.246-37.421 64.826V0h-28.476v74.86L76.326 10.027 51.667 24.266 89.096 89.09 24.265 51.668l-14.238 24.66 64.83 37.43H0v28.477h74.85l-64.823 37.43 14.238 24.667 64.824-37.423-37.43 64.825 24.667 14.239 37.429-64.832V256h28.476v-74.853l37.422 64.826 24.665-14.239-37.428-64.832 64.83 37.43 14.24-24.667-64.825-37.423h74.85v-28.477H256ZM128 166.73c-21.472 0-38.876-17.403-38.876-38.876 0-21.472 17.404-38.876 38.876-38.876 21.472 0 38.875 17.404 38.875 38.876 0 21.473-17.403 38.876-38.875 38.876Z"
-    />
-  </svg>
-);
-
-export { Loom };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/mintlify.tsx b/apps/web/src/components/ui/svgs/mintlify.tsx
deleted file mode 100644
index 3c32573..0000000
--- a/apps/web/src/components/ui/svgs/mintlify.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { SVGProps } from "react";
-
-const Mintlify = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 19 19" fill="none">
-    <path
-      d="M18.367 7.28888V1.59755C18.367 0.986819 17.8715 0.5 17.2699 0.5H11.5812C10.6877 0.5 9.80295 0.677018 8.98017 1.01336C8.15738 1.35856 7.40539 1.85424 6.77724 2.49152L6.733 2.53578C5.90137 3.37664 5.30862 4.42108 5.00781 5.57174C5.54749 5.43012 6.10483 5.35931 6.6622 5.35046C8.14852 5.33276 9.60831 5.81073 10.7938 6.7047C11.8643 7.50131 12.6783 8.59885 13.1206 9.86458C13.5807 11.148 13.6337 12.5465 13.2887 13.8653C14.43 13.5644 15.4828 12.9714 16.3233 12.1393L16.3675 12.0951C16.9957 11.4667 17.4999 10.7143 17.845 9.89114C18.19 9.06797 18.3581 8.18285 18.3581 7.28888H18.367Z"
-      fill="#18E299"
-    />
-    <path
-      d="M4.83793 7.193C4.84674 5.44706 5.54303 3.77167 6.76814 2.51953L2.03511 7.25472C2.01749 7.27236 1.99985 7.28117 1.98222 7.29881C0.827615 8.44513 0.131342 9.97945 0.0167623 11.6019C-0.0890033 13.1186 0.307609 14.6176 1.15373 15.8698C1.23444 15.9892 1.45343 16.0285 1.57682 15.9139L4.47656 13.0216C5.38438 12.1134 5.66643 10.7642 5.23455 9.55618C4.96132 8.80666 4.82912 8.00424 4.83793 7.193Z"
-      fill="#0C8C5E"
-    />
-    <path
-      d="M16.341 12.0938C15.4332 12.9844 14.2962 13.6016 13.0623 13.875C11.8195 14.1483 10.5327 14.0689 9.33405 13.6457C9.33405 13.6457 9.32522 13.6457 9.31641 13.6457C8.10892 13.2136 6.76042 13.4958 5.8526 14.3952L2.95282 17.2875C2.82943 17.4109 2.84706 17.6137 2.99689 17.7107C4.24845 18.5484 5.74683 18.954 7.26281 18.8482C8.88455 18.7336 10.4093 18.037 11.5639 16.8818L11.608 16.8378L16.341 12.1026V12.0938Z"
-      fill="#0C8C5E"
-    />
-  </svg>
-);
-
-export { Mintlify };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/n8n.tsx b/apps/web/src/components/ui/svgs/n8n.tsx
deleted file mode 100644
index 08d99a6..0000000
--- a/apps/web/src/components/ui/svgs/n8n.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { SVGProps } from "react";
-
-const N8n = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 228 120">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M204 48C192.817 48 183.42 40.3514 180.756 30H153.248C147.382 30 142.376 34.241 141.412 40.0272L140.425 45.9456C139.489 51.5648 136.646 56.4554 132.626 60C136.646 63.5446 139.489 68.4352 140.425 74.0544L141.412 79.9728C142.376 85.759 147.382 90 153.248 90H156.756C159.42 79.6486 168.817 72 180 72C193.255 72 204 82.7452 204 96C204 109.255 193.255 120 180 120C168.817 120 159.42 112.351 156.756 102H153.248C141.516 102 131.504 93.5181 129.575 81.9456L128.588 76.0272C127.624 70.241 122.618 66 116.752 66H107.244C104.58 76.3514 95.183 84 84 84C72.817 84 63.4204 76.3514 60.7561 66H47.2439C44.5796 76.3514 35.183 84 24 84C10.7452 84 0 73.2548 0 60C0 46.7452 10.7452 36 24 36C35.183 36 44.5796 43.6486 47.2439 54H60.7561C63.4204 43.6486 72.817 36 84 36C95.183 36 104.58 43.6486 107.244 54H116.752C122.618 54 127.624 49.759 128.588 43.9728L129.575 38.0544C131.504 26.4819 141.516 18 153.248 18L180.756 18C183.42 7.64864 192.817 0 204 0C217.255 0 228 10.7452 228 24C228 37.2548 217.255 48 204 48ZM204 36C210.627 36 216 30.6274 216 24C216 17.3726 210.627 12 204 12C197.373 12 192 17.3726 192 24C192 30.6274 197.373 36 204 36ZM24 72C30.6274 72 36 66.6274 36 60C36 53.3726 30.6274 48 24 48C17.3726 48 12 53.3726 12 60C12 66.6274 17.3726 72 24 72ZM96 60C96 66.6274 90.6274 72 84 72C77.3726 72 72 66.6274 72 60C72 53.3726 77.3726 48 84 48C90.6274 48 96 53.3726 96 60ZM192 96C192 102.627 186.627 108 180 108C173.373 108 168 102.627 168 96C168 89.3726 173.373 84 180 84C186.627 84 192 89.3726 192 96Z"
-      fill="#ea4b71"
-    />
-  </svg>
-);
-
-export { N8n };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/neon.tsx b/apps/web/src/components/ui/svgs/neon.tsx
deleted file mode 100644
index 5a1e451..0000000
--- a/apps/web/src/components/ui/svgs/neon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { SVGProps } from "react";
-
-const Neon = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 256 256" preserveAspectRatio="xMidYMid">
-    <defs>
-      <linearGradient id="a" x1="100%" x2="12.069%" y1="100%" y2="0%">
-        <stop offset="0%" stopColor="#62F755" />
-        <stop offset="100%" stopColor="#8FF986" stopOpacity="0" />
-      </linearGradient>
-      <linearGradient id="b" x1="100%" x2="40.603%" y1="100%" y2="76.897%">
-        <stop offset="0%" stopOpacity=".9" />
-        <stop offset="100%" stopColor="#1A1A1A" stopOpacity="0" />
-      </linearGradient>
-    </defs>
-    <path
-      fill="#00E0D9"
-      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
-    />
-    <path
-      fill="url(#a)"
-      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
-    />
-    <path
-      fill="url(#b)"
-      fillOpacity=".4"
-      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
-    />
-    <path
-      fill="#63F655"
-      d="M211.861 0C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723a4.409 4.409 0 0 0 4.409-4.409V115.058c0-25.223 31.914-36.167 47.395-16.256l48.391 62.243V8.825c0-4.871-3.953-8.825-8.832-8.825Z"
-    />
-  </svg>
-);
-
-export { Neon };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/openai.tsx b/apps/web/src/components/ui/svgs/openai.tsx
deleted file mode 100644
index 8ffb1ed..0000000
--- a/apps/web/src/components/ui/svgs/openai.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { SVGProps } from "react";
-
-const Openai = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 260">
-    <path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z" />
-  </svg>
-);
-
-export { Openai };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/openaiDark.tsx b/apps/web/src/components/ui/svgs/openaiDark.tsx
deleted file mode 100644
index f70bd96..0000000
--- a/apps/web/src/components/ui/svgs/openaiDark.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const OpenaiDark = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 260">
-    <path
-      fill="#fff"
-      d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
-    />
-  </svg>
-);
-
-export { OpenaiDark };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/paper.tsx b/apps/web/src/components/ui/svgs/paper.tsx
deleted file mode 100644
index 5ee333e..0000000
--- a/apps/web/src/components/ui/svgs/paper.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { SVGProps } from "react";
-
-const Paper = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 39 39" fill="none">
-    <path d="M39 24H24V6H6V24H24V39H0V6H6V0H39V24Z" fill="#81ADEC" />
-  </svg>
-);
-
-export { Paper };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/planetscale.tsx b/apps/web/src/components/ui/svgs/planetscale.tsx
deleted file mode 100644
index 9fcb46e..0000000
--- a/apps/web/src/components/ui/svgs/planetscale.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { SVGProps } from "react";
-
-const Planetscale = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
-    <path d="M256 128a128 128 0 01-128 128zM128 0c52 0 96.7 31 116.8 75.5L75.5 244.8c-7.3-3.3-14.2-7.2-20.7-11.7L160 128h-32l-90.5 90.5A128 128 0 01128 0z" />
-  </svg>
-);
-
-export { Planetscale };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/planetscaleDark.tsx b/apps/web/src/components/ui/svgs/planetscaleDark.tsx
deleted file mode 100644
index c0c1759..0000000
--- a/apps/web/src/components/ui/svgs/planetscaleDark.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const PlanetscaleDark = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
-    <path
-      fill="#fff"
-      d="M256 128a128 128 0 01-128 128zM128 0c52 0 96.7 31 116.8 75.5L75.5 244.8c-7.3-3.3-14.2-7.2-20.7-11.7L160 128h-32l-90.5 90.5A128 128 0 01128 0z"
-    />
-  </svg>
-);
-
-export { PlanetscaleDark };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/prisma.tsx b/apps/web/src/components/ui/svgs/prisma.tsx
deleted file mode 100644
index e603299..0000000
--- a/apps/web/src/components/ui/svgs/prisma.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { SVGProps } from "react";
-
-const Prisma = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 256 310" preserveAspectRatio="xMidYMid">
-    <path d="M254.313 235.519L148 9.749A17.063 17.063 0 00133.473.037a16.87 16.87 0 00-15.533 8.052L2.633 194.848a17.465 17.465 0 00.193 18.747L59.2 300.896a18.13 18.13 0 0020.363 7.489l163.599-48.392a17.929 17.929 0 0011.26-9.722 17.542 17.542 0 00-.101-14.76l-.008.008zm-23.802 9.683l-138.823 41.05c-4.235 1.26-8.3-2.411-7.419-6.685l49.598-237.484c.927-4.443 7.063-5.147 9.003-1.035l91.814 194.973a6.63 6.63 0 01-4.18 9.18h.007z" />
-  </svg>
-);
-
-export { Prisma };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/prismaDark.tsx b/apps/web/src/components/ui/svgs/prismaDark.tsx
deleted file mode 100644
index cf67c85..0000000
--- a/apps/web/src/components/ui/svgs/prismaDark.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const PrismaDark = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 256 310" preserveAspectRatio="xMidYMid">
-    <path
-      fill="#fff"
-      d="M254.313 235.519L148 9.749A17.063 17.063 0 00133.473.037a16.87 16.87 0 00-15.533 8.052L2.633 194.848a17.465 17.465 0 00.193 18.747L59.2 300.896a18.13 18.13 0 0020.363 7.489l163.599-48.392a17.929 17.929 0 0011.26-9.722 17.542 17.542 0 00-.101-14.76l-.008.008zm-23.802 9.683l-138.823 41.05c-4.235 1.26-8.3-2.411-7.419-6.685l49.598-237.484c.927-4.443 7.063-5.147 9.003-1.035l91.814 194.973a6.63 6.63 0 01-4.18 9.18h.007z"
-    />
-  </svg>
-);
-
-export { PrismaDark };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/remixDark.tsx b/apps/web/src/components/ui/svgs/remixDark.tsx
deleted file mode 100644
index 3ac18ab..0000000
--- a/apps/web/src/components/ui/svgs/remixDark.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const RemixDark = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 256 297">
-    <path
-      d="M141.675 0C218.047 0 256 36.35 256 94.414c0 43.43-26.707 71.753-62.785 76.474 30.455 6.137 48.259 23.604 51.54 58.065l.474 6.337.415 5.924.358 5.542.249 4.179.267 4.93.138 2.814.198 4.47.159 4.222.079 2.427.107 3.888.092 4.446.033 2.148.06 6.226.02 6.496v3.885h-78.758l.004-1.62.028-3.147.047-3.065.136-7.424.035-2.489.027-3.902-.004-2.496-.023-2.617-.032-2.054-.064-2.876-.094-3.05-.125-3.242-.16-3.455-.096-1.813-.16-2.833-.186-2.976-.287-4.204-.247-3.342a116.56 116.56 0 0 0-.247-3.02l-.202-1.934c-2.6-22.827-11.655-32.157-27.163-35.269l-1.307-.245a60.184 60.184 0 0 0-2.704-.408l-1.397-.164c-.236-.025-.472-.05-.71-.073l-1.442-.127-1.471-.103-1.502-.081-1.514-.058-1.544-.039-1.574-.018L0 198.74V136.9h127.62c2.086 0 4.108-.04 6.066-.12l1.936-.095 1.893-.122 1.85-.15c.305-.028.608-.056.909-.086l1.785-.193a86.3 86.3 0 0 0 3.442-.475l1.657-.28c20.709-3.755 31.063-14.749 31.063-36.2 0-24.075-16.867-38.666-50.602-38.666H0V0h141.675ZM83.276 250.785c10.333 0 14.657 5.738 16.197 11.23l.203.79.167.782.109.617.046.306.078.603.058.59.023.29.031.569.01.278.008.54v29.507H0v-46.102h83.276Z"
-      fill="#ffff"
-    />
-  </svg>
-);
-
-export { RemixDark };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/remixLight.tsx b/apps/web/src/components/ui/svgs/remixLight.tsx
deleted file mode 100644
index ca4e781..0000000
--- a/apps/web/src/components/ui/svgs/remixLight.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const RemixLight = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 256 297">
-    <path
-      d="M141.675 0C218.047 0 256 36.35 256 94.414c0 43.43-26.707 71.753-62.785 76.474 30.455 6.137 48.259 23.604 51.54 58.065l.474 6.337.415 5.924.358 5.542.249 4.179.267 4.93.138 2.814.198 4.47.159 4.222.079 2.427.107 3.888.092 4.446.033 2.148.06 6.226.02 6.496v3.885h-78.758l.004-1.62.028-3.147.047-3.065.136-7.424.035-2.489.027-3.902-.004-2.496-.023-2.617-.032-2.054-.064-2.876-.094-3.05-.125-3.242-.16-3.455-.096-1.813-.16-2.833-.186-2.976-.287-4.204-.247-3.342a116.56 116.56 0 0 0-.247-3.02l-.202-1.934c-2.6-22.827-11.655-32.157-27.163-35.269l-1.307-.245a60.184 60.184 0 0 0-2.704-.408l-1.397-.164c-.236-.025-.472-.05-.71-.073l-1.442-.127-1.471-.103-1.502-.081-1.514-.058-1.544-.039-1.574-.018L0 198.74V136.9h127.62c2.086 0 4.108-.04 6.066-.12l1.936-.095 1.893-.122 1.85-.15c.305-.028.608-.056.909-.086l1.785-.193a86.3 86.3 0 0 0 3.442-.475l1.657-.28c20.709-3.755 31.063-14.749 31.063-36.2 0-24.075-16.867-38.666-50.602-38.666H0V0h141.675ZM83.276 250.785c10.333 0 14.657 5.738 16.197 11.23l.203.79.167.782.109.617.046.306.078.603.058.59.023.29.031.569.01.278.008.54v29.507H0v-46.102h83.276Z"
-      fill="#121212"
-    />
-  </svg>
-);
-
-export { RemixLight };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/resendIconBlack.tsx b/apps/web/src/components/ui/svgs/resendIconBlack.tsx
deleted file mode 100644
index 5b1e85f..0000000
--- a/apps/web/src/components/ui/svgs/resendIconBlack.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const ResendIconBlack = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 1800 1800" fill="none">
-    <path
-      d="M1000.46 450C1174.77 450 1278.43 553.669 1278.43 691.282C1278.43 828.896 1174.77 932.563 1000.46 932.563H912.382L1350 1350H1040.82L707.794 1033.48C683.944 1011.47 672.936 985.781 672.935 963.765C672.935 932.572 694.959 905.049 737.161 893.122L908.712 847.244C973.85 829.812 1018.81 779.353 1018.81 713.298C1018.8 632.567 952.745 585.78 871.095 585.78H450V450H1000.46Z"
-      fill="black"
-    />
-  </svg>
-);
-
-export { ResendIconBlack };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/resendIconWhite.tsx b/apps/web/src/components/ui/svgs/resendIconWhite.tsx
deleted file mode 100644
index 06de3a1..0000000
--- a/apps/web/src/components/ui/svgs/resendIconWhite.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { SVGProps } from "react";
-
-const ResendIconWhite = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 1800 1800" fill="none">
-    <path
-      d="M1000.46 450C1174.77 450 1278.43 553.669 1278.43 691.282C1278.43 828.896 1174.77 932.563 1000.46 932.563H912.382L1350 1350H1040.82L707.794 1033.48C683.944 1011.47 672.936 985.781 672.935 963.765C672.935 932.572 694.959 905.049 737.161 893.122L908.712 847.244C973.85 829.812 1018.81 779.353 1018.81 713.298C1018.8 632.567 952.745 585.78 871.095 585.78H450V450H1000.46Z"
-      fill="#FDFDFD"
-    />
-  </svg>
-);
-
-export { ResendIconWhite };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/slack.tsx b/apps/web/src/components/ui/svgs/slack.tsx
deleted file mode 100644
index b1025c9..0000000
--- a/apps/web/src/components/ui/svgs/slack.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { SVGProps } from "react";
-
-const Slack = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 2447.6 2452.5">
-    <g clipRule="evenodd" fillRule="evenodd">
-      <path
-        d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-        fill="#36c5f0"
-      />
-      <path
-        d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-        fill="#2eb67d"
-      />
-      <path
-        d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-        fill="#ecb22e"
-      />
-      <path
-        d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-        fill="#e01e5a"
-      />
-    </g>
-  </svg>
-);
-
-export { Slack };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/stripe.tsx b/apps/web/src/components/ui/svgs/stripe.tsx
deleted file mode 100644
index b293b53..0000000
--- a/apps/web/src/components/ui/svgs/stripe.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { SVGProps } from "react";
-
-const Stripe = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} fill="none" viewBox="100 100 312 312">
-    <path
-      fill="#533afd"
-      fillRule="evenodd"
-      d="m120 392 272-57.683V120l-272 58.357z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export { Stripe };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/supabase.tsx b/apps/web/src/components/ui/svgs/supabase.tsx
deleted file mode 100644
index d1f37b8..0000000
--- a/apps/web/src/components/ui/svgs/supabase.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { SVGProps } from "react";
-
-const Supabase = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 109 113" fill="none">
-    <path
-      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
-      fill="url(#supabase-paint0_linear)"
-    />
-    <path
-      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
-      fill="url(#supabase-paint1_linear)"
-      fillOpacity="0.2"
-    />
-    <path
-      d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z"
-      fill="#3ECF8E"
-    />
-    <defs>
-      <linearGradient
-        id="supabase-paint0_linear"
-        x1="53.9738"
-        y1="54.974"
-        x2="94.1635"
-        y2="71.8295"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#249361" />
-        <stop offset="1" stopColor="#3ECF8E" />
-      </linearGradient>
-      <linearGradient
-        id="supabase-paint1_linear"
-        x1="36.1558"
-        y1="30.578"
-        x2="54.4844"
-        y2="65.0806"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop />
-        <stop offset="1" stopOpacity="0" />
-      </linearGradient>
-    </defs>
-  </svg>
-);
-
-export { Supabase };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/zoom.tsx b/apps/web/src/components/ui/svgs/zoom.tsx
deleted file mode 100644
index c33d6c3..0000000
--- a/apps/web/src/components/ui/svgs/zoom.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useId, type SVGProps } from "react"
-
-const Zoom = (props: SVGProps<SVGSVGElement>) => {
-  const gradientId = useId()
-
-  return (
-    <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
-      <defs>
-        <linearGradient
-          id={gradientId}
-          x1="23.666%"
-          x2="76.334%"
-          y1="95.6118%"
-          y2="4.3882%"
-        >
-          <stop offset=".00006%" stopColor="#0845BF" />
-          <stop offset="19.11%" stopColor="#0950DE" />
-          <stop offset="38.23%" stopColor="#0B59F6" />
-          <stop offset="50%" stopColor="#0B5CFF" />
-          <stop offset="67.32%" stopColor="#0E5EFE" />
-          <stop offset="77.74%" stopColor="#1665FC" />
-          <stop offset="86.33%" stopColor="#246FF9" />
-          <stop offset="93.88%" stopColor="#387FF4" />
-          <stop offset="100%" stopColor="#4F90EE" />
-        </linearGradient>
-      </defs>
-      <path
-        fill={`url(#${gradientId})`}
-        d="M256 128c0 13.568-1.024 27.136-3.328 40.192-6.912 43.264-41.216 77.568-84.48 84.48C155.136 254.976 141.568 256 128 256c-13.568 0-27.136-1.024-40.192-3.328-43.264-6.912-77.568-41.216-84.48-84.48C1.024 155.136 0 141.568 0 128c0-13.568 1.024-27.136 3.328-40.192 6.912-43.264 41.216-77.568 84.48-84.48C100.864 1.024 114.432 0 128 0c13.568 0 27.136 1.024 40.192 3.328 43.264 6.912 77.568 41.216 84.48 84.48C254.976 100.864 256 114.432 256 128Z"
-      />
-      <path
-        fill="#FFF"
-        d="M204.032 207.872H75.008c-8.448 0-16.64-4.608-20.48-12.032-4.608-8.704-2.816-19.2 4.096-26.112l89.856-89.856H83.968c-17.664 0-32-14.336-32-32h118.784c8.448 0 16.64 4.608 20.48 12.032 4.608 8.704 2.816 19.2-4.096 26.112l-89.6 90.112h74.496c17.664 0 32 14.08 32 31.744Z"
-      />
-    </svg>
-  )
-}
-
-export { Zoom }
\ No newline at end of file
diff --git a/apps/web/src/routes/_auth/access.tsx b/apps/web/src/routes/_auth/access.tsx
index 0e90f67..17eafe8 100644
--- a/apps/web/src/routes/_auth/access.tsx
+++ b/apps/web/src/routes/_auth/access.tsx
@@ -18,7 +18,6 @@ import { PageHeader } from '@/components/page-header'
 import { Badge } from '@/components/reui/badge'
 import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
 import { SettingsCard } from '@/components/settings/settings-card'
-import { SectionCardsSkeleton } from '@/components/skeletons'
 import { sessionCanManageApiKeys } from '@/lib/auth'
 import { authSessionQueryOptions } from '@/queries/auth'
 import { apiKeysQueryOptions } from '@/queries/api-keys'
@@ -172,11 +171,7 @@ function AccessComponent() {
 
       {canManageKeys ? (
         <>
-          {keysQuery.isLoading ? (
-            <SectionCardsSkeleton count={3} />
-          ) : (
-            <KpiStatGrid items={kpiItems} />
-          )}
+            <KpiStatGrid items={kpiItems} isLoading={keysQuery.isLoading} skeletonCount={3} />
           <AccessApiKeysCard
             items={keys}
             isLoading={keysQuery.isLoading}
diff --git a/apps/web/src/routes/_auth/directories.tsx b/apps/web/src/routes/_auth/directories.tsx
index f4f4722..a1282c1 100644
--- a/apps/web/src/routes/_auth/directories.tsx
+++ b/apps/web/src/routes/_auth/directories.tsx
@@ -4,7 +4,7 @@ import { BookText, Globe, Plus, RefreshCw, Tags } from 'lucide-react'
 import { useState } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+import { SegmentedTabs, TabsContent } from '@/components/segmented-tabs'
 import {
   CommunityFormDialog,
 } from '@/components/directories/community-create-dialog'
@@ -17,7 +17,7 @@ import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
 import { Badge } from '@/components/reui/badge'
 import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
-import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
+import { TableSkeleton } from '@/components/skeletons'
 import { sessionCanWriteDirectories } from '@/lib/auth'
 import { authSessionQueryOptions } from '@/queries/auth'
 import { directoriesCommunitiesQueryOptions, directoriesDohQueryOptions } from '@/queries/directories'
@@ -131,9 +131,9 @@ function DirectoriesComponent() {
         }
       />
 
-      {loading ? <SectionCardsSkeleton count={3} /> : <KpiStatGrid items={items} />}
+      <KpiStatGrid items={items} isLoading={loading} skeletonCount={3} />
 
-      <BadgeTabs
+      <SegmentedTabs
         defaultValue="communities"
         items={[
           { value: 'communities', label: 'BGP community', count: communities.length },
@@ -183,7 +183,7 @@ function DirectoriesComponent() {
               )}
             </QueryState>
         </TabsContent>
-      </BadgeTabs>
+      </SegmentedTabs>
 
       {canWrite ? (
         <>
diff --git a/apps/web/src/routes/_auth/modules/$moduleId.tsx b/apps/web/src/routes/_auth/modules/$moduleId.tsx
index d1b20c6..fc83496 100644
--- a/apps/web/src/routes/_auth/modules/$moduleId.tsx
+++ b/apps/web/src/routes/_auth/modules/$moduleId.tsx
@@ -8,8 +8,8 @@ import { Button } from '@evobgp/ui/components/button'
 import { ModuleEditDialog } from '@/components/modules/module-edit-dialog'
 import { ModuleEntriesSection } from '@/components/modules/module-entries-section'
 import { ModuleKpiCards } from '@/components/modules/module-kpi-cards'
-import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
+import { DetailPanel } from '@/components/reui-kit'
 import { TableSkeleton } from '@/components/skeletons'
 import { StatusBadge } from '@/components/status-badge'
 import { sessionCanWriteModules } from '@/lib/auth'
@@ -67,54 +67,54 @@ function ModuleDetailComponent() {
   const asEntries = mod?.type === 'AS_PREFIXES' ? (asEntriesQ.data ?? []) : []
   const entriesCount = entriesQuery.data?.items.length ?? 0
 
-  return (
-    <div className="flex flex-col gap-6">
-      <PageHeader
-        title={mod?.name ?? moduleId}
-        description={mod ? `Тип: ${moduleTypeRu(mod.type)} (${mod.type})` : 'Загрузка модуля…'}
-        actions={
-          <>
-            <Button variant="outline" size="sm" render={<Link to="/modules" />}>
-              <ArrowLeft />
-              К списку
-            </Button>
-            {canWrite && mod ? (
-              <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
-                <Pencil />
-                Редактировать
-              </Button>
-            ) : null}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => void refreshAll()}
-              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()}
+  const headerActions = (
+    <>
+      <Button variant="outline" size="sm" render={<Link to="/modules" />}>
+        <ArrowLeft />
+        К списку
+      </Button>
+      {canWrite && mod ? (
+        <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
+          <Pencil />
+          Редактировать
+        </Button>
+      ) : null}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => void refreshAll()}
+        disabled={detail.isFetching}
       >
-        {(m) => (
-          <div className="flex flex-col gap-6">
-            <div className="flex flex-wrap items-center gap-2">
-              {m.enabled ? (
-                <StatusBadge status="active" label="включён" />
-              ) : (
-                <StatusBadge status="paused" label="выключен" />
-              )}
-            </div>
+        <RefreshCw className={detail.isFetching ? 'animate-spin' : ''} />
+        Обновить
+      </Button>
+    </>
+  )
 
+  return (
+    <QueryState
+      data={mod}
+      isLoading={detail.isLoading}
+      isError={detail.isError}
+      error={detail.error}
+      skeleton={<TableSkeleton rows={4} cols={2} />}
+      onRetry={() => detail.refetch()}
+    >
+      {(m) => (
+        <DetailPanel>
+          <DetailPanel.Header
+            title={m.name}
+            description={`Тип: ${moduleTypeRu(m.type)} (${m.type})`}
+            actions={headerActions}
+          >
+            {m.enabled ? (
+              <StatusBadge status="active" label="включён" />
+            ) : (
+              <StatusBadge status="paused" label="выключен" />
+            )}
+          </DetailPanel.Header>
+
+          <DetailPanel.Section>
             <ModuleKpiCards
               mod={m}
               communities={communities}
@@ -122,7 +122,9 @@ function ModuleDetailComponent() {
               entriesCount={entriesCount}
               loading={detail.isLoading || communitiesQ.isLoading}
             />
+          </DetailPanel.Section>
 
+          <DetailPanel.Section title="Записи">
             <ModuleEntriesSection
               moduleId={moduleId}
               mod={m}
@@ -134,19 +136,19 @@ function ModuleDetailComponent() {
               onRetry={() => entriesQuery.refetch()}
               onChanged={onEntriesChanged}
             />
+          </DetailPanel.Section>
 
-            {canWrite ? (
-              <ModuleEditDialog
-                open={editOpen}
-                onOpenChange={setEditOpen}
-                mod={m}
-                communities={communities}
-                dohProfiles={dohProfiles}
-              />
-            ) : null}
-          </div>
-        )}
-      </QueryState>
-    </div>
+          {canWrite ? (
+            <ModuleEditDialog
+              open={editOpen}
+              onOpenChange={setEditOpen}
+              mod={m}
+              communities={communities}
+              dohProfiles={dohProfiles}
+            />
+          ) : null}
+        </DetailPanel>
+      )}
+    </QueryState>
   )
 }
diff --git a/apps/web/src/routes/_auth/monitoring.tsx b/apps/web/src/routes/_auth/monitoring.tsx
index ecaabfb..4da2420 100644
--- a/apps/web/src/routes/_auth/monitoring.tsx
+++ b/apps/web/src/routes/_auth/monitoring.tsx
@@ -1,22 +1,15 @@
-import { createFileRoute, useSearch } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { AlertTriangle, Bird, Database, FileText, RefreshCw } from 'lucide-react'
+import { Bird, RefreshCw } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { PanelCard } from '@/components/panel-card'
-import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
-import { StatusBadge } from '@/components/status-badge'
-import { jobKindRu } from '@/lib/ui-labels'
-import {
-  DashboardOperationsFlowCard,
-  MonitoringHealthCard,
-} from '@/components/analytics'
+import { MonitoringHealthCard } from '@/components/analytics'
 import { MonitoringReadyGrid } from '@/components/monitoring/monitoring-ready-grid'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
-import { IllustratedEmptyState } from '@/components/patterns/illustrated-empty-state'
-import { SegmentedProgressCard } from '@/components/patterns/segmented-progress-card'
-import { AnalyticsDashboardSkeleton } from '@/components/skeletons'
+import { FrameSection } from '@/components/reui-kit'
+import { StatusBadge } from '@/components/status-badge'
+import { jobKindRu } from '@/lib/ui-labels'
 
 import {
   monitoringHealthQueryOptions,
@@ -26,45 +19,27 @@ import {
 } from '@/queries/monitoring'
 import { networkBirdQueryOptions } from '@/queries/network'
 import { operationsJobsQueryOptions } from '@/queries/operations'
-import { overviewModulesQueryOptions } from '@/queries/overview'
 
 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 navigate = Route.useNavigate()
   const healthQ = useQuery(monitoringHealthQueryOptions())
   const readyQ = useQuery(monitoringReadyQueryOptions())
   const versionQ = useQuery(monitoringVersionQueryOptions())
   const birdQ = useQuery(networkBirdQueryOptions())
   const jobsQ = useQuery(operationsJobsQueryOptions())
-  const modulesQ = useQuery(overviewModulesQueryOptions())
 
   const refreshing =
     healthQ.isFetching ||
     readyQ.isFetching ||
     versionQ.isFetching ||
     birdQ.isFetching ||
-    jobsQ.isFetching ||
-    modulesQ.isFetching
+    jobsQ.isFetching
 
   const jobs = jobsQ.data?.items ?? []
-  const modules = modulesQ.data?.items ?? []
-  const failed = jobs.filter((j) =>
-    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
-  ).length
-
   const versionText = formatVersion(versionQ.data)
-  const analyticsLoading =
-    (healthQ.isLoading || readyQ.isLoading || jobsQ.isLoading) && jobs.length === 0
 
   function refetchAll() {
     void healthQ.refetch()
@@ -72,7 +47,6 @@ function MonitoringComponent() {
     void versionQ.refetch()
     void birdQ.refetch()
     void jobsQ.refetch()
-    void modulesQ.refetch()
   }
 
   const failedJobs = jobs
@@ -80,7 +54,7 @@ function MonitoringComponent() {
     .slice(0, 5)
 
   return (
-    <div className="flex flex-col gap-2 md:gap-3">
+    <div className="flex flex-col gap-4 md:gap-6">
       <PageHeader
         title="Мониторинг"
         description={`Состояние API, BGP и задач для диагностики инцидентов${
@@ -98,163 +72,67 @@ function MonitoringComponent() {
         }
       />
 
-      <BadgeTabs
-        value={search.tab}
-        onValueChange={(tab) =>
-          navigate({ search: { tab: tab as 'system' | 'postgres' | 'runtime-logs' } })
-        }
-        items={[
-          { value: 'system', label: 'Система' },
-          { value: 'postgres', label: 'PostgreSQL' },
-          { value: 'runtime-logs', label: 'Файловые логи' },
-        ]}
+      <div className="grid items-stretch gap-4 md:gap-6 lg:grid-cols-2">
+        <MonitoringHealthCard
+          healthOk={healthQ.data?.ok ?? false}
+          ready={readyQ.data}
+          loading={healthQ.isLoading || readyQ.isLoading}
+        />
+        <FrameSection
+          title={
+            <span className="flex items-center gap-2">
+              <Bird className="size-4" />
+              BGP на API-хосте
+            </span>
+          }
+          description="Статус BIRD на хосте API"
+          className="h-full"
+          contentClassName="px-5 py-4"
+        >
+          <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>
+        </FrameSection>
+      </div>
+
+      <QueryState
+        data={readyQ.data}
+        isLoading={readyQ.isLoading}
+        isError={readyQ.isError}
+        error={readyQ.error}
+        skeleton={<div className="h-40" />}
+        onRetry={() => readyQ.refetch()}
       >
-        <TabsContent value="system" className="mt-0 flex flex-col gap-2 md:gap-3">
-          {analyticsLoading ? (
-            <AnalyticsDashboardSkeleton />
-          ) : (
-            <div className="grid items-stretch gap-2 md:gap-3 lg:grid-cols-2">
-              <MonitoringHealthCard
-                healthOk={healthQ.data?.ok ?? false}
-                ready={readyQ.data}
-                loading={healthQ.isLoading || readyQ.isLoading}
-              />
-              <DashboardOperationsFlowCard jobs={jobs} modules={modules} loading={jobsQ.isLoading} />
-            </div>
-          )}
+        {(ready) => <MonitoringReadyGrid health={healthQ.data} ready={ready} />}
+      </QueryState>
 
-          <div className="grid items-stretch gap-2 md:gap-3 lg:grid-cols-2">
-            <QueryState
-              data={readyQ.data}
-              isLoading={readyQ.isLoading}
-              isError={readyQ.isError}
-              error={readyQ.error}
-              skeleton={<div className="h-40" />}
-              onRetry={() => readyQ.refetch()}
-            >
-              {(ready) => <MonitoringReadyGrid health={healthQ.data} ready={ready} />}
-            </QueryState>
-
-            <PanelCard
-              title={
-                <span className="flex items-center gap-2">
-                  <Bird className="size-4" />
-                  BGP на API-хосте
-                </span>
-              }
-              description="Статус BIRD на хосте API"
-              className="h-full"
-              contentClassName="px-5 py-4"
-            >
-              <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>
-            </PanelCard>
-          </div>
-
-          <div className="grid items-stretch gap-2 md:gap-3 lg:grid-cols-2">
-            <div className="flex flex-col gap-2 md:gap-3">
-              <SegmentedProgressCard
-                title="Задачи"
-                description="Последние 100 задач"
-                primary={{
-                  value: jobs.filter((j) => j.status === 'running' || j.status === 'queued').length,
-                  label: 'Активных',
-                  percent:
-                    jobs.length > 0
-                      ? Math.round(
-                          (jobs.filter((j) => j.status === 'running' || j.status === 'queued').length /
-                            jobs.length) *
-                            100,
-                        )
-                      : 0,
-                }}
-                secondary={{
-                  value: failed,
-                  label: 'С ошибками',
-                  percent: jobs.length > 0 ? Math.round((failed / jobs.length) * 100) : 0,
-                }}
-                footer={`В выборке: ${jobs.length} задач`}
-              />
-              {failedJobs.length > 0 ? (
-                <PanelCard title="Последние ошибки" contentClassName="px-5 py-4">
-                  <ul className="flex flex-col gap-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">{jobKindRu(job.kind)}</p>
-                          <StatusBadge status={job.status} />
-                        </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>
-                </PanelCard>
-              ) : null}
-            </div>
-
-            <PanelCard
-              title={
-                <span className="flex items-center gap-2">
-                  <AlertTriangle className="size-4 text-muted-foreground" />
-                  Что проверять при деградации
-                </span>
-              }
-              description="Краткая шпаргалка для первичной диагностики"
-              className="h-full"
-              contentClassName="px-5 py-4"
-            >
-              <ul className="flex flex-col gap-3 text-sm text-muted-foreground">
-                <li>
-                  <span className="font-medium text-foreground">API недоступен.</span> Если{' '}
-                  <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс API и
-                  его логи.
-                </li>
-                <li>
-                  <span className="font-medium text-foreground">Готовность не «Готов».</span> Сначала{' '}
-                  <code className="text-xs">PostgreSQL</code>, затем хранилище и очередь задач в проверках.
-                </li>
-                <li>
-                  <span className="font-medium text-foreground">Низкая доля установленных BGP-сессий.</span> Проверьте{' '}
-                  <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
-                </li>
-                <li>
-                  <span className="font-medium text-foreground">Ошибки задач.</span> Откройте Операции и
-                  проверьте последние неуспешные задачи.
-                </li>
-              </ul>
-            </PanelCard>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="postgres" className="mt-0">
-          <IllustratedEmptyState
-            icon={Database}
-            title="PostgreSQL"
-            description="Состояние соединения и пула видно в проверке готовности на вкладке «Система»."
-          />
-        </TabsContent>
-
-        <TabsContent value="runtime-logs" className="mt-0">
-          <IllustratedEmptyState
-            icon={FileText}
-            title="Файловые логи"
-            description="Логи API и конвейера задаются переменной EVOBGP_LOG_* и управляются в Настройках BIRD."
-          />
-        </TabsContent>
-      </BadgeTabs>
+      {failedJobs.length > 0 ? (
+        <FrameSection title="Последние ошибки" contentClassName="px-5 py-4">
+          <ul className="flex flex-col gap-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">{jobKindRu(job.kind)}</p>
+                  <StatusBadge status={job.status} />
+                </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>
+        </FrameSection>
+      ) : null}
     </div>
   )
 }
diff --git a/apps/web/src/routes/_auth/network.tsx b/apps/web/src/routes/_auth/network.tsx
index a01687a..2ede884 100644
--- a/apps/web/src/routes/_auth/network.tsx
+++ b/apps/web/src/routes/_auth/network.tsx
@@ -1,10 +1,9 @@
 import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
 import { Button } from '@evobgp/ui/components/button'
-import { TabsContent } from '@evobgp/ui/components/tabs'
 import { RefreshCw } from 'lucide-react'
 
-import { CountedLineTabs } from '@/components/counted-line-tabs'
+import { SegmentedTabs, TabsContent } from '@/components/segmented-tabs'
 import { NetworkDiscoveredPeersCard } from '@/components/network/network-discovered-peers-card'
 import { NetworkKpi } from '@/components/network/network-kpi'
 import { NetworkPeersCard } from '@/components/network/network-peers-card'
@@ -27,9 +26,10 @@ function parseNetworkTab(value: unknown): NetworkTab {
 }
 
 /**
- * Network ops page — KPI (stats-12) + peers/discovered/speakers ResourcePage lists.
+ * Network ops page — KPI (stats-12) + segmented page tabs (c-tabs-9) + ResourcePage lists.
  * @see https://reui.io/preview/base/stats-12
  * @see https://reui.io/preview/base/data-grid-filtering-2
+ * @see https://reui.io/preview/base/components/c-tabs-9
  * @see https://reui.io/preview/base/components/c-empty-1
  */
 export const Route = createFileRoute('/_auth/network')({
@@ -87,15 +87,15 @@ function NetworkComponent() {
         loading={overviewLoading || birdQ.isLoading}
       />
 
-      <CountedLineTabs
+      <SegmentedTabs
         value={search.tab}
         onValueChange={(tab) =>
           navigate({ search: { tab: tab as NetworkTab } })
         }
-        tabs={[
-          { id: 'peers', label: 'Пиры', count: peers.length },
-          { id: 'discovered', label: 'На одобрение', count: discovered.length },
-          { id: 'speakers', label: 'Спикеры', count: speakers.length },
+        items={[
+          { value: 'peers', label: 'Пиры', count: peers.length },
+          { value: 'discovered', label: 'На одобрение', count: discovered.length },
+          { value: 'speakers', label: 'Спикеры', count: speakers.length },
         ]}
       >
         <TabsContent value="peers" className="mt-4">
@@ -129,7 +129,7 @@ function NetworkComponent() {
             onRetry={() => void speakersQ.refetch()}
           />
         </TabsContent>
-      </CountedLineTabs>
+      </SegmentedTabs>
     </div>
   )
 }
diff --git a/apps/web/src/routes/_auth/operations.tsx b/apps/web/src/routes/_auth/operations.tsx
index 1b2b0e0..48d30e8 100644
--- a/apps/web/src/routes/_auth/operations.tsx
+++ b/apps/web/src/routes/_auth/operations.tsx
@@ -5,9 +5,9 @@ import { toast } from 'sonner'
 import { useMemo, useState } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
-import { PanelCard } from '@/components/panel-card'
-import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
+import { SegmentedTabs, TabsContent } from '@/components/segmented-tabs'
 import {
+  FrameSection,
   KpiStatGrid,
   QuickActionGrid,
   type KpiStatItem,
@@ -213,7 +213,7 @@ function OperationsComponent() {
         onConfirm={() => birdReloadMutation.mutate()}
       />
 
-      <BadgeTabs
+      <SegmentedTabs
         value={search.tab}
         onValueChange={(tab) =>
           navigate({ search: { tab: tab as 'revisions' | 'diff' | 'jobs' } })
@@ -258,7 +258,7 @@ function OperationsComponent() {
             onRetry={() => jobsQ.refetch()}
           />
         </TabsContent>
-      </BadgeTabs>
+      </SegmentedTabs>
     </div>
   )
 }
@@ -277,7 +277,7 @@ function DiffTab({ revisions }: { revisions: RevisionRow[] }) {
   )
 
   return (
-    <PanelCard title="Сравнение ревизий" contentClassName="flex flex-col gap-4 py-4">
+    <FrameSection title="Сравнение ревизий" contentClassName="flex flex-col gap-4 py-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>
@@ -313,7 +313,7 @@ function DiffTab({ revisions }: { revisions: RevisionRow[] }) {
       >
         {(diff) => <DiffView diff={diff} />}
       </QueryState>
-    </PanelCard>
+    </FrameSection>
   )
 }
 
diff --git a/apps/web/src/routes/_auth/schedule.tsx b/apps/web/src/routes/_auth/schedule.tsx
index 11cb041..53e3153 100644
--- a/apps/web/src/routes/_auth/schedule.tsx
+++ b/apps/web/src/routes/_auth/schedule.tsx
@@ -6,16 +6,13 @@ import { useState } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 import { Badge } from '@/components/reui/badge'
-import { ScheduleAgendaPanel } from '@/components/schedule/schedule-agenda-panel'
-import { ScheduleJobsCard } from '@/components/schedule/schedule-jobs-card'
-import { ScheduleModulesGrid } from '@/components/schedule/schedule-modules-grid'
 import { PageHeader } from '@/components/page-header'
 import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
-import { SectionCardsSkeleton } from '@/components/skeletons'
-
-import { operationsJobsQueryOptions } from '@/queries/operations'
-import { modulesListQueryOptions } from '@/queries/modules'
+import { ScheduleJobsCard } from '@/components/schedule/schedule-jobs-card'
+import { ScheduleModulesGrid } from '@/components/schedule/schedule-modules-grid'
 import { apiMutate } from '@/lib/api-client'
+import { modulesListQueryOptions } from '@/queries/modules'
+import { operationsJobsQueryOptions } from '@/queries/operations'
 
 export const Route = createFileRoute('/_auth/schedule')({
   component: ScheduleComponent,
@@ -106,9 +103,7 @@ function ScheduleComponent() {
         }
       />
 
-      {loading ? <SectionCardsSkeleton count={3} /> : <KpiStatGrid items={items} />}
-
-      <ScheduleAgendaPanel jobs={jobs} isLoading={jobsQ.isLoading} />
+      <KpiStatGrid items={items} isLoading={loading} skeletonCount={3} />
 
       <ScheduleModulesGrid
         items={modules}
diff --git a/apps/web/src/routes/auth.callback.tsx b/apps/web/src/routes/auth.callback.tsx
index 3d0cc7d..c3b51ab 100644
--- a/apps/web/src/routes/auth.callback.tsx
+++ b/apps/web/src/routes/auth.callback.tsx
@@ -1,4 +1,9 @@
 import { createFileRoute, redirect } from '@tanstack/react-router'
+import { ShieldAlert } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+
+import { EmptyState } from '@/components/empty-state'
 
 import {
   authPortalUrl,
@@ -66,16 +71,19 @@ function AuthCallbackPage() {
   const { error } = Route.useSearch()
   if (error === 'sso_loop') {
     return (
-      <div className="flex min-h-svh flex-col items-center justify-center gap-3 p-6 text-center">
-        <h1 className="text-lg font-semibold">Сессия не принята</h1>
-        <p className="text-muted-foreground max-w-md text-sm">
-          Повторный вход через auth-portal остановлен (защита от цикла редиректов).
-          Обычно это несовпадение JWT_SECRET / ISSUER или просроченный токен.
-          Войдите заново на portal, затем откройте EvoBGP.
-        </p>
-        <a className="text-primary text-sm underline" href={authPortalUrl()}>
-          Открыть Auth Portal
-        </a>
+      <div className="flex min-h-svh items-center justify-center p-6">
+        <div className="w-full max-w-lg">
+          <EmptyState
+            framed
+            centered={false}
+            icon={ShieldAlert}
+            title="Сессия не принята"
+            description="Повторный вход через auth-portal остановлен (защита от цикла редиректов). Обычно это несовпадение JWT_SECRET / ISSUER или просроченный токен. Войдите заново на portal, затем откройте EvoBGP."
+            action={
+              <Button render={<a href={authPortalUrl()} />}>Открыть Auth Portal</Button>
+            }
+          />
+        </div>
       </div>
     )
   }
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 89ea0ab..24caa30 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -14,6 +14,5 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false
   },
-  "include": ["src", "vite.config.ts"],
-  "exclude": ["src/components/blocks"]
+  "include": ["src", "vite.config.ts"]
 }