diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
index 2629a63..0484a51 100644
--- a/apps/web/eslint.config.js
+++ b/apps/web/eslint.config.js
@@ -28,6 +28,9 @@ export default tseslint.config(
   },
   {
     files: ['src/components/reui/**/*.{ts,tsx}'],
+    linterOptions: {
+      reportUnusedDisableDirectives: 'off',
+    },
     rules: {
       '@typescript-eslint/no-unused-vars': 'off',
       'react-hooks/exhaustive-deps': 'off',
diff --git a/apps/web/package.json b/apps/web/package.json
index e2dea18..b9961b7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
+    "@date-fns/tz": "^1.5.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -26,8 +27,8 @@
     "@tanstack/react-query-devtools": "^5.90.2",
     "@tanstack/react-router": "^1.130.2",
     "@tanstack/react-router-devtools": "^1.130.2",
-    "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.4",
+    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-virtual": "^3.14.10",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.4.0",
diff --git a/apps/web/src/components/access/access-api-keys-card.tsx b/apps/web/src/components/access/access-api-keys-card.tsx
index ba15238..b71bc91 100644
--- a/apps/web/src/components/access/access-api-keys-card.tsx
+++ b/apps/web/src/components/access/access-api-keys-card.tsx
@@ -2,9 +2,7 @@ import { useState } from 'react'
 import { Plus, RefreshCw } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
-
 import { AccessApiKeysGrid } from '@/components/access/access-api-keys-grid'
-import { FrameDataGrid } from '@/components/reui-kit'
 import { ApiKeyCreateDialog } from '@/components/access/api-key-create-dialog'
 import { ApiKeyTokenDialog } from '@/components/access/api-key-token-dialog'
 import { QueryState } from '@/components/query-state'
@@ -47,46 +45,38 @@ export function AccessApiKeysCard({
 
   return (
     <>
-      <FrameDataGrid
-        title="API-ключи"
-        description="Полный токен показывается только при создании и ротации."
-        className="min-w-0"
-        actions={
-          <>
-            <Button size="sm" variant="outline" type="button" onClick={onRetry} disabled={isLoading}>
-              <RefreshCw className={isLoading ? 'animate-spin' : ''} />
-              Обновить
-            </Button>
-            <Button size="sm" type="button" onClick={() => setCreateOpen(true)}>
-              <Plus />
-              Создать
-            </Button>
-          </>
-        }
+      <QueryState
+        data={items}
+        isLoading={isLoading}
+        isError={isError}
+        error={error}
+        empty={false}
+        skeleton={<TableSkeleton rows={4} cols={6} />}
+        onRetry={onRetry}
       >
-        <QueryState
-          data={items}
-          isLoading={isLoading}
-          isError={isError}
-          error={error}
-          empty={items.length === 0}
-          emptyTitle="Нет ключей"
-          emptyDescription="Создайте API-ключ для автоматизации или отдельного доступа."
-          skeleton={<TableSkeleton rows={4} cols={6} />}
-          onRetry={onRetry}
-        >
-          {(data) => (
-            <AccessApiKeysGrid
-              items={data}
-              isLoading={isLoading}
-              onRotate={handleRotated}
-              onRevoke={(id) => revoke.mutate(id)}
-              rotatePending={rotate.isPending}
-              revokePending={revoke.isPending}
-            />
-          )}
-        </QueryState>
-      </FrameDataGrid>
+        {(data) => (
+          <AccessApiKeysGrid
+            items={data}
+            isLoading={isLoading}
+            onRotate={handleRotated}
+            onRevoke={(id) => revoke.mutate(id)}
+            rotatePending={rotate.isPending}
+            revokePending={revoke.isPending}
+            actions={
+              <>
+                <Button size="sm" variant="outline" type="button" onClick={onRetry} disabled={isLoading}>
+                  <RefreshCw className={isLoading ? 'animate-spin' : ''} />
+                  Обновить
+                </Button>
+                <Button size="sm" type="button" onClick={() => setCreateOpen(true)}>
+                  <Plus />
+                  Создать
+                </Button>
+              </>
+            }
+          />
+        )}
+      </QueryState>
 
       <ApiKeyCreateDialog
         open={createOpen}
diff --git a/apps/web/src/components/access/access-api-keys-grid.tsx b/apps/web/src/components/access/access-api-keys-grid.tsx
index d07837e..38fb94b 100644
--- a/apps/web/src/components/access/access-api-keys-grid.tsx
+++ b/apps/web/src/components/access/access-api-keys-grid.tsx
@@ -1,20 +1,26 @@
-import { ColumnDef } from '@tanstack/react-table'
-import { RefreshCw, Trash2 } from 'lucide-react'
-import { useMemo } from 'react'
+import { useMemo, useState, type ReactNode } from 'react'
+import { KeyRound, RefreshCw, Trash2 } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
-
 import { CategoryBadge } from '@/components/category-badge'
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createSearchFilterField,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { formatApiKeyDate } from '@/lib/access/api-key-labels'
-import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { ApiKey } from '@/types/api'
 
+const filterFields: FilterField[] = [
+  createSearchFilterField('search', 'Поиск', 'Поиск API-ключей…'),
+]
+
 export function AccessApiKeysGrid({
   items,
   isLoading = false,
@@ -22,6 +28,7 @@ export function AccessApiKeysGrid({
   onRevoke,
   rotatePending = false,
   revokePending = false,
+  actions,
 }: {
   items: ApiKey[]
   isLoading?: boolean
@@ -29,16 +36,21 @@ export function AccessApiKeysGrid({
   onRevoke: (id: string) => void
   rotatePending?: boolean
   revokePending?: boolean
+  actions?: ReactNode
 }) {
-  const columns = useMemo<ColumnDef<ApiKey>[]>(
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
+
+  const columns = useMemo<DataGridColumnDef<ApiKey>[]>(
     () => [
       {
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
         cell: ({ row }) => (
-          <DataGridPrimaryCell
+          <DataGridNameCell
+            icon={KeyRound}
             title={row.original.name}
-            accent="primary"
             subtitle={`${row.original.prefix}…`}
           />
         ),
@@ -135,24 +147,24 @@ export function AccessApiKeysGrid({
     [onRevoke, onRotate, revokePending, rotatePending],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) =>
-      `${row.name} ${row.role} ${row.prefix} ${row.revoked_at ? 'отозван' : 'активен'}`,
-    getRowId: (row) => row.id,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title="API-ключи"
+      description="Полный токен показывается только при создании и ротации."
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(row) =>
+        `${row.name} ${row.role} ${row.prefix} ${row.revoked_at ? 'отозван' : 'активен'}`
+      }
+      columns={columns}
+      data={items}
+      getRowId={(row) => row.id}
       isLoading={isLoading}
-      emptyMessage="Нет ключей"
-      tableLayout={DATA_GRID_DENSE_LAYOUT}
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск API-ключей…"
+      primaryAction={actions}
+      pinLastColumn
+      emptyState={{ title: 'Нет ключей' }}
     />
   )
 }
diff --git a/apps/web/src/components/analytics/analytics-card-shell.tsx b/apps/web/src/components/analytics/analytics-card-shell.tsx
index 3c414c7..3870071 100644
--- a/apps/web/src/components/analytics/analytics-card-shell.tsx
+++ b/apps/web/src/components/analytics/analytics-card-shell.tsx
@@ -10,6 +10,10 @@ import {
 
 import { PanelCard } from '@/components/panel-card'
 
+/** Chart Frame shell — chart-1 spacing, not Card.
+ * @see https://reui.io/preview/base/chart-1
+ * @see https://reui.io/docs/components/base/frame
+ */
 export function AnalyticsCardShell({
   title,
   description,
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
new file mode 100644
index 0000000..0cee6d9
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-7/components/columns.tsx
@@ -0,0 +1,324 @@
+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
new file mode 100644
index 0000000..877470d
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-7/components/data-grid-view.tsx
@@ -0,0 +1,355 @@
+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
new file mode 100644
index 0000000..17bcfcc
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-7/components/data.tsx
@@ -0,0 +1,394 @@
+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
new file mode 100644
index 0000000..c1a2d93
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-7/page.tsx
@@ -0,0 +1,15 @@
+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
new file mode 100644
index 0000000..a72aba5
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx
@@ -0,0 +1,394 @@
+"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
new file mode 100644
index 0000000..da1f67b
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
@@ -0,0 +1,679 @@
+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
new file mode 100644
index 0000000..2ca5e30
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx
@@ -0,0 +1,384 @@
+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
new file mode 100644
index 0000000..e3ffcac
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/page.tsx
@@ -0,0 +1,15 @@
+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
new file mode 100644
index 0000000..05a0b26
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-14/components/empty-state.tsx
@@ -0,0 +1,106 @@
+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
new file mode 100644
index 0000000..9382fe5
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-14/page.tsx
@@ -0,0 +1,12 @@
+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
new file mode 100644
index 0000000..649db3e
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-16/components/data.tsx
@@ -0,0 +1,147 @@
+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
new file mode 100644
index 0000000..517ea34
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-16/components/integration-settings.tsx
@@ -0,0 +1,109 @@
+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
new file mode 100644
index 0000000..deaede0
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-16/page.tsx
@@ -0,0 +1,15 @@
+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
new file mode 100644
index 0000000..c82cd2b
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/color-picker.tsx
@@ -0,0 +1,40 @@
+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
new file mode 100644
index 0000000..bec9a42
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/data.tsx
@@ -0,0 +1,109 @@
+"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
new file mode 100644
index 0000000..55e02cc
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
@@ -0,0 +1,57 @@
+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
new file mode 100644
index 0000000..570f3f4
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/general-settings.tsx
@@ -0,0 +1,267 @@
+"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
new file mode 100644
index 0000000..04c34f4
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/setting-field.tsx
@@ -0,0 +1,69 @@
+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-7/page.tsx b/apps/web/src/components/blocks/settings-3/page.tsx
similarity index 50%
rename from apps/web/src/components/blocks/settings-7/page.tsx
rename to apps/web/src/components/blocks/settings-3/page.tsx
index c7aa75b..cffd7c0 100644
--- a/apps/web/src/components/blocks/settings-7/page.tsx
+++ b/apps/web/src/components/blocks/settings-3/page.tsx
@@ -1,9 +1,9 @@
-import { AccountSettings } from "./components/account-settings"
+import { GeneralSettings } from "./components/general-settings"
 
 export function Page() {
   return (
-    <div className="flex min-h-svh w-full items-start justify-center p-4 sm:p-6 md:p-10">
-      <AccountSettings />
+    <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/settings-7/components/account-settings.tsx b/apps/web/src/components/blocks/settings-7/components/account-settings.tsx
deleted file mode 100644
index 83c2039..0000000
--- a/apps/web/src/components/blocks/settings-7/components/account-settings.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-"use client"
-
-import { useState, type ComponentType } from "react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@evobgp/ui/lib/utils"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@evobgp/ui/components/tabs"
-
-import { BillingTab } from "./billing-tab"
-import { SETTINGS_TAB_ITEMS } from "./data"
-import { NotificationsTab } from "./notifications-tab"
-import { ProfileTab } from "./profile-tab"
-import { SecurityTab } from "./security-tab"
-
-const TAB_COMPONENTS: Record<string, ComponentType> = {
-  profile: ProfileTab,
-  security: SecurityTab,
-  notifications: NotificationsTab,
-  billing: BillingTab,
-}
-
-// ── Settings Navigation ──
-
-function SettingsNavigation({
-  isMobile,
-  activeValue,
-}: {
-  isMobile: boolean
-  activeValue: string
-}) {
-  return (
-    <div className={cn("min-w-0", isMobile ? "w-full" : "w-40 shrink-0")}>
-      {isMobile ? (
-        <div className="-mx-1 overflow-x-auto px-1 pb-1">
-          <TabsList className="h-auto w-max min-w-max justify-start gap-1 bg-transparent p-0">
-            {SETTINGS_TAB_ITEMS.map((tab) => (
-              <TabsTrigger
-                key={tab.value}
-                value={tab.value}
-                className={cn(
-                  "w-full justify-start gap-3 px-3 py-1.5 shadow-none",
-                  activeValue === tab.value ? "bg-muted!" : "bg-transparent"
-                )}
-              >
-                {tab.icon}
-                <span className="truncate">{tab.label}</span>
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </div>
-      ) : (
-        <TabsList className="h-auto w-full flex-col items-stretch gap-1 bg-transparent p-0">
-          {SETTINGS_TAB_ITEMS.map((tab) => (
-            <TabsTrigger
-              key={tab.value}
-              value={tab.value}
-              className={cn(
-                "w-full justify-start gap-3 px-3 py-1.5 shadow-none",
-                activeValue === tab.value ? "bg-muted!" : "bg-transparent"
-              )}
-            >
-              {tab.icon}
-              <span className="truncate">{tab.label}</span>
-            </TabsTrigger>
-          ))}
-        </TabsList>
-      )}
-    </div>
-  )
-}
-
-export function AccountSettings() {
-  const isMobile = useIsMobile()
-  const [activeTab, setActiveTab] = useState("profile")
-
-  return (
-    <div className="w-full max-w-4xl space-y-8">
-      {/* Header */}
-      <header className="px-1">
-        <h1 className="text-xl font-semibold tracking-tight">
-          Account Settings
-        </h1>
-        <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
-          Update your profile, access, notifications, and billing preferences.
-        </p>
-      </header>
-
-      {/* Tabs */}
-      <Tabs
-        value={activeTab}
-        onValueChange={setActiveTab}
-        orientation={isMobile ? "horizontal" : "vertical"}
-        className={cn("w-full gap-4 lg:gap-8")}
-      >
-        <SettingsNavigation isMobile={isMobile} activeValue={activeTab} />
-
-        <div className="min-w-0 flex-1">
-          {SETTINGS_TAB_ITEMS.map((tab) => {
-            const TabComponent = TAB_COMPONENTS[tab.value]
-
-            return (
-              <TabsContent key={tab.value} value={tab.value} className="mt-0">
-                <TabComponent />
-              </TabsContent>
-            )
-          })}
-        </div>
-      </Tabs>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-7/components/billing-tab.tsx b/apps/web/src/components/blocks/settings-7/components/billing-tab.tsx
deleted file mode 100644
index 604dfa8..0000000
--- a/apps/web/src/components/blocks/settings-7/components/billing-tab.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { useState } from "react"
-import { Badge } from "@/components/reui/badge"
-
-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 { BILLING_PLANS, COUNTRIES } from "./data"
-import { SettingRow } from "./setting-row"
-import { SettingsCard } from "./settings-card"
-import { SettingsFieldGroup } from "./settings-field-group"
-import { createSelectValueHandler, getOptionLabel } from "./utils"
-
-export function BillingTab() {
-  const [country, setCountry] = useState("us")
-  const handleCountryChange = createSelectValueHandler(setCountry)
-
-  return (
-    <div className="space-y-6">
-      {/* Card */}
-      <SettingsCard title="Plan and billing" description="Current subscription">
-        <SettingsFieldGroup
-          legend="Plan and billing"
-          description="Review your current subscription and plan options."
-        >
-          {BILLING_PLANS.map((plan, index) => (
-            <SettingRow
-              key={plan.id}
-              title={plan.name}
-              titleAddon={
-                plan.current ? (
-                  <Badge variant="info-light" size="sm">
-                    Current
-                  </Badge>
-                ) : null
-              }
-              description={
-                <>
-                  <span className="text-foreground font-medium">
-                    {plan.price}
-                  </span>{" "}
-                  / {plan.period} · {plan.features.join(", ")}
-                </>
-              }
-              last={index === BILLING_PLANS.length - 1}
-            >
-              <Button variant={plan.current ? "outline" : "ghost"} size="sm">
-                {plan.current ? "Manage" : "Switch"}
-              </Button>
-            </SettingRow>
-          ))}
-        </SettingsFieldGroup>
-      </SettingsCard>
-
-      <SettingsCard
-        title="Billing details"
-        description="Invoices and payments"
-        footer={<Button>Update billing</Button>}
-      >
-        <SettingsFieldGroup
-          legend="Billing details"
-          description="Manage invoice contacts and payment details."
-        >
-          <SettingRow
-            title="Billing email"
-            description="Receives invoices and renewal notices."
-            labelFor="settings-7-billing-email"
-          >
-            <Input
-              id="settings-7-billing-email"
-              defaultValue="billing@acme.dev"
-              type="email"
-            />
-          </SettingRow>
-
-          <SettingRow
-            title="Invoice profile"
-            description="Business details used on receipts and tax forms."
-            contentClassName="@md/field-group:w-[22rem]"
-          >
-            <FieldSet className="w-full gap-3">
-              <FieldLegend className="sr-only">Invoice profile</FieldLegend>
-              <FieldDescription className="sr-only">
-                Company identity used for invoices and tax documents.
-              </FieldDescription>
-
-              <FieldGroup className="gap-4">
-                <Field>
-                  <FieldLabel htmlFor="settings-7-company-name">
-                    Company name
-                  </FieldLabel>
-                  <Input
-                    id="settings-7-company-name"
-                    defaultValue="Acme Labs"
-                  />
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="settings-7-billing-country">
-                    Country
-                  </FieldLabel>
-                  <Select value={country} onValueChange={handleCountryChange}>
-                    <SelectTrigger
-                      id="settings-7-billing-country"
-                      className="w-full"
-                    >
-                      <SelectValue>
-                        {getOptionLabel(COUNTRIES, country)}
-                      </SelectValue>
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectGroup>
-                        {COUNTRIES.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-          </SettingRow>
-
-          <SettingRow
-            title="Tax ID"
-            description="Optional number used for VAT or company invoices."
-            labelFor="settings-7-tax-id"
-          >
-            <InputGroup className="w-full">
-              <InputGroupAddon align="inline-start">
-                <InputGroupText>VAT</InputGroupText>
-              </InputGroupAddon>
-              <InputGroupInput
-                id="settings-7-tax-id"
-                defaultValue="US-2048-ACME"
-              />
-            </InputGroup>
-          </SettingRow>
-
-          <SettingRow
-            title="Card on file"
-            description="Used for monthly renewals."
-            last
-          >
-            <div className="flex flex-wrap items-center justify-end gap-2">
-              <span className="text-muted-foreground text-sm">
-                Visa ending in 4242
-              </span>
-              <Button variant="outline">Update</Button>
-            </div>
-          </SettingRow>
-        </SettingsFieldGroup>
-      </SettingsCard>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-7/components/data.tsx b/apps/web/src/components/blocks/settings-7/components/data.tsx
deleted file mode 100644
index f2ef237..0000000
--- a/apps/web/src/components/blocks/settings-7/components/data.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-"use client"
-
-import { type ReactNode } from "react"
-import { UserIcon, ShieldIcon, BellIcon, CreditCardIcon, MonitorIcon, SmartphoneIcon } from "lucide-react"
-
-// ── Types ──
-
-export type SelectOption = {
-  value: string
-  label: string
-}
-
-export type BillingPlan = {
-  id: string
-  name: string
-  price: string
-  period: string
-  current: boolean
-  features: string[]
-}
-
-export type Session = {
-  id: string
-  device: string
-  browser: string
-  location: string
-  lastActive: string
-  current: boolean
-  icon: ReactNode
-}
-
-export type SettingsTabItem = {
-  value: string
-  label: string
-  icon: ReactNode
-}
-
-// ── Data ──
-
-export const SETTINGS_TAB_ITEMS: SettingsTabItem[] = [
-  {
-    value: "profile",
-    label: "My Profile",
-    icon: (
-      <UserIcon aria-hidden="true" />
-    ),
-  },
-  {
-    value: "security",
-    label: "Security",
-    icon: (
-      <ShieldIcon aria-hidden="true" />
-    ),
-  },
-  {
-    value: "notifications",
-    label: "Notifications",
-    icon: (
-      <BellIcon aria-hidden="true" />
-    ),
-  },
-  {
-    value: "billing",
-    label: "Billing",
-    icon: (
-      <CreditCardIcon aria-hidden="true" />
-    ),
-  },
-]
-
-export const TIMEZONES: SelectOption[] = [
-  { value: "utc-8", label: "UTC-8 (Pacific Time)" },
-  { value: "utc-5", label: "UTC-5 (Eastern Time)" },
-  { value: "utc+0", label: "UTC+0 (London)" },
-  { value: "utc+1", label: "UTC+1 (Berlin)" },
-  { value: "utc+9", label: "UTC+9 (Tokyo)" },
-]
-
-export const ROLES: SelectOption[] = [
-  { value: "engineering-lead", label: "Engineering Lead" },
-  { value: "developer", label: "Developer" },
-  { value: "designer", label: "Designer" },
-  { value: "product-manager", label: "Product Manager" },
-]
-
-export const COUNTRIES: SelectOption[] = [
-  { value: "us", label: "United States" },
-  { value: "uk", label: "United Kingdom" },
-  { value: "de", label: "Germany" },
-  { value: "uz", label: "Uzbekistan" },
-]
-
-export const TIMEOUTS: SelectOption[] = [
-  { value: "5", label: "5 minutes" },
-  { value: "10", label: "10 minutes" },
-  { value: "15", label: "15 minutes" },
-  { value: "30", label: "30 minutes" },
-]
-
-export const QUIET_HOURS: SelectOption[] = [
-  { value: "18:00", label: "6:00 PM" },
-  { value: "20:00", label: "8:00 PM" },
-  { value: "22:00", label: "10:00 PM" },
-  { value: "23:00", label: "11:00 PM" },
-]
-
-export const QUIET_HOURS_END: SelectOption[] = [
-  { value: "06:00", label: "6:00 AM" },
-  { value: "08:00", label: "8:00 AM" },
-  { value: "09:00", label: "9:00 AM" },
-  { value: "10:00", label: "10:00 AM" },
-]
-
-export const DIGEST_CADENCE: SelectOption[] = [
-  { value: "daily", label: "Daily summary" },
-  { value: "weekly", label: "Weekly digest" },
-  { value: "mentions", label: "Only mentions" },
-]
-
-export const RECOVERY_METHODS: SelectOption[] = [
-  { value: "authenticator", label: "Authenticator first" },
-  { value: "sms", label: "SMS fallback" },
-  { value: "email", label: "Email fallback" },
-]
-
-export const BILLING_PLANS: BillingPlan[] = [
-  {
-    id: "free",
-    name: "Free",
-    price: "$0",
-    period: "forever",
-    current: false,
-    features: ["1 workspace", "Basic exports", "Community support"],
-  },
-  {
-    id: "pro",
-    name: "Pro",
-    price: "$29",
-    period: "per month",
-    current: true,
-    features: ["Unlimited workspaces", "Automations", "Priority support"],
-  },
-  {
-    id: "team",
-    name: "Team",
-    price: "$79",
-    period: "per month",
-    current: false,
-    features: ["Everything in Pro", "SSO", "Shared billing"],
-  },
-]
-
-export const SESSIONS: Session[] = [
-  {
-    id: "sess-1",
-    device: "macOS",
-    browser: "Chrome",
-    location: "San Francisco, CA",
-    lastActive: "Active now",
-    current: true,
-    icon: (
-      <MonitorIcon aria-hidden="true" />
-    ),
-  },
-  {
-    id: "sess-2",
-    device: "iPhone",
-    browser: "Safari",
-    location: "San Francisco, CA",
-    lastActive: "2 hours ago",
-    current: false,
-    icon: (
-      <SmartphoneIcon aria-hidden="true" />
-    ),
-  },
-  {
-    id: "sess-3",
-    device: "Windows",
-    browser: "Firefox",
-    location: "New York, NY",
-    lastActive: "3 days ago",
-    current: false,
-    icon: (
-      <MonitorIcon aria-hidden="true" />
-    ),
-  },
-]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-7/components/notifications-tab.tsx b/apps/web/src/components/blocks/settings-7/components/notifications-tab.tsx
deleted file mode 100644
index de702ad..0000000
--- a/apps/web/src/components/blocks/settings-7/components/notifications-tab.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { useState } from "react"
-
-import { Button } from "@evobgp/ui/components/button"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@evobgp/ui/components/field"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@evobgp/ui/components/select"
-import { Switch } from "@evobgp/ui/components/switch"
-
-import { DIGEST_CADENCE, QUIET_HOURS, QUIET_HOURS_END, TIMEOUTS } from "./data"
-import { SettingRow } from "./setting-row"
-import { SettingsCard } from "./settings-card"
-import { SettingsFieldGroup } from "./settings-field-group"
-import { createSelectValueHandler, getOptionLabel } from "./utils"
-
-export function NotificationsTab() {
-  const [autoDismiss, setAutoDismiss] = useState("10")
-  const [quietStart, setQuietStart] = useState("20:00")
-  const [quietEnd, setQuietEnd] = useState("08:00")
-  const [digestCadence, setDigestCadence] = useState("weekly")
-  const handleAutoDismissChange = createSelectValueHandler(setAutoDismiss)
-  const handleQuietStartChange = createSelectValueHandler(setQuietStart)
-  const handleQuietEndChange = createSelectValueHandler(setQuietEnd)
-  const handleDigestCadenceChange = createSelectValueHandler(setDigestCadence)
-
-  return (
-    <div className="space-y-6">
-      {/* Card */}
-      <SettingsCard title="Activity alerts" description="Desktop and badge">
-        <SettingsFieldGroup
-          legend="Activity alerts"
-          description="Control desktop, badge, and sound alerts."
-        >
-          <SettingRow
-            title="Desktop notifications"
-            description="Show alerts for mentions and approvals."
-            labelFor="settings-7-desktop-notifications"
-          >
-            <Switch id="settings-7-desktop-notifications" defaultChecked />
-          </SettingRow>
-
-          <SettingRow
-            title="Quiet hours"
-            description="Hold non-urgent alerts outside your workday."
-            contentClassName="@md/field-group:w-[22rem]"
-          >
-            <FieldSet className="w-full gap-3">
-              <FieldLegend className="sr-only">Quiet hours</FieldLegend>
-              <FieldDescription className="sr-only">
-                Define when non-urgent activity should stay muted.
-              </FieldDescription>
-
-              <FieldGroup className="gap-3 sm:grid sm:grid-cols-2">
-                <Field>
-                  <FieldLabel htmlFor="settings-7-quiet-start">
-                    Start
-                  </FieldLabel>
-                  <Select
-                    value={quietStart}
-                    onValueChange={handleQuietStartChange}
-                  >
-                    <SelectTrigger
-                      id="settings-7-quiet-start"
-                      className="w-full"
-                    >
-                      <SelectValue>
-                        {getOptionLabel(QUIET_HOURS, quietStart)}
-                      </SelectValue>
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectGroup>
-                        {QUIET_HOURS.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="settings-7-quiet-end">End</FieldLabel>
-                  <Select value={quietEnd} onValueChange={handleQuietEndChange}>
-                    <SelectTrigger id="settings-7-quiet-end" className="w-full">
-                      <SelectValue>
-                        {getOptionLabel(QUIET_HOURS_END, quietEnd)}
-                      </SelectValue>
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectGroup>
-                        {QUIET_HOURS_END.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-          </SettingRow>
-
-          <SettingRow
-            title="Unread badge"
-            description="Display a badge when new activity arrives."
-            labelFor="settings-7-unread-badge"
-          >
-            <Switch id="settings-7-unread-badge" defaultChecked />
-          </SettingRow>
-
-          <SettingRow
-            title="Auto dismiss"
-            description="Choose how long alerts stay visible."
-            labelFor="settings-7-auto-dismiss"
-            last
-          >
-            <Select value={autoDismiss} onValueChange={handleAutoDismissChange}>
-              <SelectTrigger id="settings-7-auto-dismiss" className="w-full">
-                <SelectValue>
-                  {getOptionLabel(TIMEOUTS, autoDismiss)}
-                </SelectValue>
-              </SelectTrigger>
-
-              <SelectContent>
-                <SelectGroup>
-                  {TIMEOUTS.map((timeout) => (
-                    <SelectItem key={timeout.value} value={timeout.value}>
-                      {timeout.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </SettingRow>
-        </SettingsFieldGroup>
-      </SettingsCard>
-
-      <SettingsCard
-        title="Email updates"
-        description="Inbox preferences"
-        footer={
-          <>
-            <Button variant="outline">Reset</Button>
-            <Button>Save preferences</Button>
-          </>
-        }
-      >
-        <SettingsFieldGroup
-          legend="Email updates"
-          description="Control which emails reach your inbox."
-        >
-          <SettingRow
-            title="Team communication"
-            description="Messages, approvals, and activity summaries."
-            labelFor="settings-7-team-communication"
-          >
-            <Switch id="settings-7-team-communication" defaultChecked />
-          </SettingRow>
-
-          <SettingRow
-            title="Product announcements"
-            description="Releases, improvements, and launches."
-            labelFor="settings-7-product-announcements"
-          >
-            <Switch id="settings-7-product-announcements" />
-          </SettingRow>
-
-          <SettingRow
-            title="Weekly digest"
-            description="A recap of workspaces, mentions, and tasks."
-            labelFor="settings-7-weekly-digest"
-          >
-            <Switch id="settings-7-weekly-digest" defaultChecked />
-          </SettingRow>
-
-          <SettingRow
-            title="Digest cadence"
-            description="Set how often summary emails arrive."
-            labelFor="settings-7-digest-cadence"
-            last
-          >
-            <Select
-              value={digestCadence}
-              onValueChange={handleDigestCadenceChange}
-            >
-              <SelectTrigger id="settings-7-digest-cadence" className="w-full">
-                <SelectValue>
-                  {getOptionLabel(DIGEST_CADENCE, digestCadence)}
-                </SelectValue>
-              </SelectTrigger>
-
-              <SelectContent>
-                <SelectGroup>
-                  {DIGEST_CADENCE.map((item) => (
-                    <SelectItem key={item.value} value={item.value}>
-                      {item.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </SettingRow>
-        </SettingsFieldGroup>
-      </SettingsCard>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-7/components/profile-avatar-upload.tsx b/apps/web/src/components/blocks/settings-7/components/profile-avatar-upload.tsx
deleted file mode 100644
index 03b95e8..0000000
--- a/apps/web/src/components/blocks/settings-7/components/profile-avatar-upload.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { useFileUpload } from "@/hooks/use-file-upload"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@evobgp/ui/components/avatar"
-import { Button } from "@evobgp/ui/components/button"
-import { UserCircle, XIcon, UploadIcon } from "lucide-react"
-
-interface ProfileAvatarUploadProps {
-  defaultAvatar: string
-  alt: string
-  inputId?: string
-}
-
-export function ProfileAvatarUpload({
-  defaultAvatar,
-  alt,
-  inputId,
-}: ProfileAvatarUploadProps) {
-  const [removedCurrentPhoto, setRemovedCurrentPhoto] = useState(false)
-  const [{ files }, { removeFile, openFileDialog, getInputProps }] =
-    useFileUpload({
-      accept: "image/*",
-    })
-
-  const currentFile = files[0] ?? null
-  const hasSavedPhoto = Boolean(defaultAvatar) && !removedCurrentPhoto
-  const previewUrl =
-    currentFile?.preview ?? (hasSavedPhoto ? defaultAvatar : null)
-  const hasPhoto = Boolean(previewUrl)
-
-  const handleCancelUpload = () => {
-    if (!currentFile) {
-      return
-    }
-
-    removeFile(currentFile.id)
-  }
-
-  const handleRemovePhoto = () => {
-    if (currentFile) {
-      removeFile(currentFile.id)
-    }
-
-    setRemovedCurrentPhoto(true)
-  }
-
-  return (
-    <div className="flex grow flex-wrap items-center justify-start gap-2">
-      {/* Actions */}
-      <div className="relative">
-        <Avatar className="size-10">
-          <AvatarImage src={previewUrl ?? undefined} alt={alt} />
-          <AvatarFallback className="text-muted-foreground bg-muted">
-            <UserCircle aria-hidden="true" className="size-4 opacity-60" />
-          </AvatarFallback>
-        </Avatar>
-
-        {currentFile ? (
-          <Button
-            variant="outline"
-            size="icon-xs"
-            onClick={handleCancelUpload}
-            className="absolute -top-1 -right-1 size-4 rounded-full"
-            aria-label={`Cancel ${currentFile.file.name}`}
-          >
-            <XIcon aria-hidden="true" />
-          </Button>
-        ) : null}
-      </div>
-
-      <div className="relative inline-flex">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={openFileDialog}
-          aria-haspopup="dialog"
-        >
-          <UploadIcon aria-hidden="true" />
-          {hasPhoto ? "Change" : "Upload"}
-        </Button>
-        <input
-          {...getInputProps({ id: inputId })}
-          className="sr-only"
-          aria-label="Upload profile image"
-          tabIndex={-1}
-        />
-      </div>
-
-      {hasPhoto ? (
-        <Button variant="outline" size="sm" onClick={handleRemovePhoto}>
-          <XIcon aria-hidden="true" />
-          Remove
-        </Button>
-      ) : null}
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-7/components/profile-tab.tsx b/apps/web/src/components/blocks/settings-7/components/profile-tab.tsx
deleted file mode 100644
index 68298c9..0000000
--- a/apps/web/src/components/blocks/settings-7/components/profile-tab.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useState } from "react"
-import {
-  Alert,
-  AlertAction,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/reui/alert"
-import { Badge } from "@/components/reui/badge"
-
-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 { Textarea } from "@evobgp/ui/components/textarea"
-import { ROLES, TIMEZONES } from "./data"
-import { ProfileAvatarUpload } from "./profile-avatar-upload"
-import { SettingRow } from "./setting-row"
-import { SettingsCard } from "./settings-card"
-import { SettingsFieldGroup } from "./settings-field-group"
-import { createSelectValueHandler, getOptionLabel } from "./utils"
-import { UserIcon } from "lucide-react"
-
-export function ProfileTab() {
-  const [role, setRole] = useState("engineering-lead")
-  const [timezone, setTimezone] = useState("utc-8")
-  const handleRoleChange = createSelectValueHandler(setRole)
-  const handleTimezoneChange = createSelectValueHandler(setTimezone)
-
-  return (
-    <div className="space-y-6">
-      <Alert variant="warning">
-        <UserIcon aria-hidden="true" />
-        <AlertTitle>Complete your profile.</AlertTitle>
-        <AlertDescription>
-          Add a photo and keep your role and timezone current.
-        </AlertDescription>
-        <AlertAction>
-          <Button type="button" variant="outline" size="xs">
-            Dismiss
-          </Button>
-          <Button type="button" size="xs">
-            Update
-          </Button>
-        </AlertAction>
-      </Alert>
-
-      {/* Card */}
-      <SettingsCard
-        title="My profile"
-        description="Public account details"
-        footer={
-          <>
-            <Button variant="outline">Cancel</Button>
-            <Button>Save changes</Button>
-          </>
-        }
-      >
-        <SettingsFieldGroup
-          legend="Profile fields"
-          description="Update your personal profile details."
-        >
-          <SettingRow
-            title="Photo"
-            description="Shown in comments and mentions."
-          >
-            <ProfileAvatarUpload
-              defaultAvatar="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80"
-              alt="Alex Morgan"
-              inputId="settings-7-profile-photo"
-            />
-          </SettingRow>
-
-          <SettingRow
-            title="Full name"
-            description="Used across the workspace."
-            labelFor="settings-7-full-name"
-          >
-            <Input id="settings-7-full-name" defaultValue="Alex Morgan" />
-          </SettingRow>
-
-          <SettingRow
-            title="Email address"
-            description="Primary sign-in email."
-            labelFor="settings-7-email"
-            titleAddon={<Badge variant="success-light">Verified</Badge>}
-          >
-            <Input
-              id="settings-7-email"
-              defaultValue="alex@acme.dev"
-              type="email"
-            />
-          </SettingRow>
-
-          <SettingRow
-            title="Username"
-            description="Visible in mentions and links."
-            labelFor="settings-7-username"
-          >
-            <InputGroup className="w-full">
-              <InputGroupAddon align="inline-start">
-                <InputGroupText>@</InputGroupText>
-              </InputGroupAddon>
-              <InputGroupInput
-                id="settings-7-username"
-                defaultValue="alexmorgan"
-              />
-            </InputGroup>
-          </SettingRow>
-
-          <SettingRow
-            title="Profile details"
-            description="Public details shared across the workspace."
-            contentClassName="@md/field-group:w-[22rem]"
-          >
-            <FieldSet className="w-full gap-3">
-              <FieldLegend className="sr-only">Profile details</FieldLegend>
-              <FieldDescription className="sr-only">
-                Public profile and workspace defaults.
-              </FieldDescription>
-
-              <FieldGroup className="gap-4">
-                <Field>
-                  <FieldLabel htmlFor="settings-7-role">Role</FieldLabel>
-                  <Select value={role} onValueChange={handleRoleChange}>
-                    <SelectTrigger id="settings-7-role" className="w-full">
-                      <SelectValue>{getOptionLabel(ROLES, role)}</SelectValue>
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectGroup>
-                        {ROLES.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="settings-7-timezone">
-                    Time zone
-                  </FieldLabel>
-                  <Select value={timezone} onValueChange={handleTimezoneChange}>
-                    <SelectTrigger id="settings-7-timezone" className="w-full">
-                      <SelectValue>
-                        {getOptionLabel(TIMEZONES, timezone)}
-                      </SelectValue>
-                    </SelectTrigger>
-
-                    <SelectContent>
-                      <SelectGroup>
-                        {TIMEZONES.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="settings-7-website">Website</FieldLabel>
-                  <InputGroup className="w-full">
-                    <InputGroupAddon align="inline-start">
-                      <InputGroupText>https://</InputGroupText>
-                    </InputGroupAddon>
-                    <InputGroupInput
-                      id="settings-7-website"
-                      defaultValue="alexmorgan.dev"
-                    />
-                  </InputGroup>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-          </SettingRow>
-
-          <SettingRow
-            title="Bio"
-            description="Short profile summary."
-            labelFor="settings-7-bio"
-            last
-          >
-            <Textarea
-              id="settings-7-bio"
-              defaultValue="Building developer tools at Acme. Previously at Vercel and Stripe."
-              rows={4}
-              className="min-h-24 resize-none"
-            />
-          </SettingRow>
-        </SettingsFieldGroup>
-      </SettingsCard>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-7/components/security-tab.tsx b/apps/web/src/components/blocks/settings-7/components/security-tab.tsx
deleted file mode 100644
index 611c917..0000000
--- a/apps/web/src/components/blocks/settings-7/components/security-tab.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-"use client"
-
-import { Fragment, useState } from "react"
-import { Badge } from "@/components/reui/badge"
-
-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 {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "@evobgp/ui/components/item"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@evobgp/ui/components/select"
-import { Switch } from "@evobgp/ui/components/switch"
-import { RECOVERY_METHODS, SESSIONS } from "./data"
-import { SettingRow } from "./setting-row"
-import { SettingsCard } from "./settings-card"
-import { SettingsFieldGroup } from "./settings-field-group"
-import { createSelectValueHandler, getOptionLabel } from "./utils"
-import { LogOutIcon } from "lucide-react"
-
-export function SecurityTab() {
-  const [recoveryMethod, setRecoveryMethod] = useState("authenticator")
-  const handleRecoveryMethodChange = createSelectValueHandler(setRecoveryMethod)
-
-  return (
-    <div className="space-y-6">
-      {/* Card */}
-      <SettingsCard
-        title="Change password"
-        description="Access protection"
-        footer={<Button>Update password</Button>}
-      >
-        <SettingsFieldGroup
-          legend="Password settings"
-          description="Update your password and keep your account protected."
-        >
-          <SettingRow
-            title="Current password"
-            description="Verify your identity before making changes."
-            labelFor="settings-7-current-password"
-          >
-            <Input
-              id="settings-7-current-password"
-              type="password"
-              placeholder="Enter current password"
-            />
-          </SettingRow>
-
-          <SettingRow
-            title="New password"
-            description="Use at least 12 characters and a unique phrase."
-            contentClassName="@md/field-group:w-[22rem]"
-            last
-          >
-            <FieldSet className="w-full gap-3">
-              <FieldLegend className="sr-only">New password</FieldLegend>
-              <FieldDescription className="sr-only">
-                Create and confirm the next password for this account.
-              </FieldDescription>
-
-              <FieldGroup className="gap-4">
-                <Field>
-                  <FieldLabel htmlFor="settings-7-new-password">
-                    New password
-                  </FieldLabel>
-                  <Input
-                    id="settings-7-new-password"
-                    type="password"
-                    placeholder="Create a new password"
-                  />
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="settings-7-confirm-password">
-                    Confirm password
-                  </FieldLabel>
-                  <Input
-                    id="settings-7-confirm-password"
-                    type="password"
-                    placeholder="Confirm the new password"
-                  />
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-          </SettingRow>
-        </SettingsFieldGroup>
-      </SettingsCard>
-
-      <SettingsCard
-        title="Two-step verification"
-        description="Extra sign-in checks"
-      >
-        <SettingsFieldGroup
-          legend="Two-step verification"
-          description="Add backup checks for future sign-ins."
-        >
-          <SettingRow
-            title="Authenticator app"
-            description="Use one-time codes from an app."
-            labelFor="settings-7-authenticator-app"
-            titleAddon={
-              <Badge variant="info-light" size="sm">
-                Recommended
-              </Badge>
-            }
-          >
-            <Switch id="settings-7-authenticator-app" defaultChecked />
-          </SettingRow>
-
-          <SettingRow
-            title="Recovery phone"
-            description="Used if you lose access to your authenticator app."
-            labelFor="settings-7-recovery-phone"
-          >
-            <InputGroup className="w-full">
-              <InputGroupAddon align="inline-start">
-                <InputGroupText>+1</InputGroupText>
-              </InputGroupAddon>
-              <InputGroupInput
-                id="settings-7-recovery-phone"
-                defaultValue="415 555 0148"
-              />
-            </InputGroup>
-          </SettingRow>
-
-          <SettingRow
-            title="Delivery method"
-            description="Choose how backup verification requests are delivered."
-            labelFor="settings-7-recovery-method"
-          >
-            <Select
-              value={recoveryMethod}
-              onValueChange={handleRecoveryMethodChange}
-            >
-              <SelectTrigger id="settings-7-recovery-method" className="w-full">
-                <SelectValue>
-                  {getOptionLabel(RECOVERY_METHODS, recoveryMethod)}
-                </SelectValue>
-              </SelectTrigger>
-
-              <SelectContent>
-                <SelectGroup>
-                  {RECOVERY_METHODS.map((method) => (
-                    <SelectItem key={method.value} value={method.value}>
-                      {method.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </SettingRow>
-
-          <SettingRow
-            title="Trusted devices"
-            description="Skip repeat prompts on known devices."
-            labelFor="settings-7-trusted-devices"
-            last
-          >
-            <Switch id="settings-7-trusted-devices" defaultChecked />
-          </SettingRow>
-        </SettingsFieldGroup>
-      </SettingsCard>
-
-      <SettingsCard title="Active sessions" description="Signed-in devices">
-        <ItemGroup className="gap-0">
-          {SESSIONS.map((session, index) => (
-            <Fragment key={session.id}>
-              {index > 0 ? <ItemSeparator className="my-0" /> : null}
-              <Item className="min-h-0 items-center gap-4 px-5 py-3.5">
-                <ItemMedia className="self-center!">
-                  <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
-                    {session.icon}
-                  </Item>
-                </ItemMedia>
-
-                <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
-                  <ItemTitle className="gap-2 leading-5">
-                    {session.browser} on {session.device}
-                    {session.current ? (
-                      <Badge variant="success-light" size="xs">
-                        Current
-                      </Badge>
-                    ) : null}
-                  </ItemTitle>
-                  <ItemDescription className="leading-5">
-                    {session.location} · {session.lastActive}
-                  </ItemDescription>
-                </ItemContent>
-
-                <ItemActions className="w-28 shrink-0 justify-end self-center">
-                  {session.current ? (
-                    <Button variant="outline" size="sm">
-                      This device
-                    </Button>
-                  ) : (
-                    <Button variant="ghost" size="sm">
-                      <LogOutIcon data-icon="inline-start" aria-hidden="true" />
-                      Revoke
-                    </Button>
-                  )}
-                </ItemActions>
-              </Item>
-            </Fragment>
-          ))}
-        </ItemGroup>
-      </SettingsCard>
-
-      <SettingsCard title="Delete account" description="Irreversible changes">
-        <SettingsFieldGroup
-          legend="Delete account"
-          description="Review irreversible actions before deleting your account."
-        >
-          <SettingRow
-            title="Close account"
-            description="Permanently remove your account, sessions, and recovery settings."
-            last
-            contentClassName="@md/field-group:w-[22rem]"
-          >
-            <div className="flex w-full flex-col items-start gap-2 @md/field-group:items-end">
-              <p className="text-muted-foreground text-xs leading-5">
-                This action cannot be undone.
-              </p>
-              <Button variant="destructive">Delete account</Button>
-            </div>
-          </SettingRow>
-        </SettingsFieldGroup>
-      </SettingsCard>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-7/components/setting-row.tsx b/apps/web/src/components/blocks/settings-7/components/setting-row.tsx
deleted file mode 100644
index 371dbe1..0000000
--- a/apps/web/src/components/blocks/settings-7/components/setting-row.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-/** @deprecated Import from `@/components/settings/setting-row` — settings-7 is not a target. */
-export { SettingRow } from '@/components/settings/setting-row'
diff --git a/apps/web/src/components/blocks/settings-7/components/settings-card.tsx b/apps/web/src/components/blocks/settings-7/components/settings-card.tsx
deleted file mode 100644
index 8aaa87a..0000000
--- a/apps/web/src/components/blocks/settings-7/components/settings-card.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-/** @deprecated Import from `@/components/settings/settings-card` — settings-7 is not a target. */
-export { SettingsCard } from '@/components/settings/settings-card'
diff --git a/apps/web/src/components/blocks/settings-7/components/settings-field-group.tsx b/apps/web/src/components/blocks/settings-7/components/settings-field-group.tsx
deleted file mode 100644
index 923e57d..0000000
--- a/apps/web/src/components/blocks/settings-7/components/settings-field-group.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-/** @deprecated Import from `@/components/settings/settings-field-group` — settings-7 is not a target. */
-export { SettingsFieldGroup } from '@/components/settings/settings-field-group'
diff --git a/apps/web/src/components/blocks/settings-7/components/utils.ts b/apps/web/src/components/blocks/settings-7/components/utils.ts
deleted file mode 100644
index 51aaf03..0000000
--- a/apps/web/src/components/blocks/settings-7/components/utils.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { type Dispatch, type SetStateAction } from "react"
-
-import type { SelectOption } from "./data"
-
-export function getOptionLabel<T extends SelectOption>(
-  options: T[],
-  value: string
-) {
-  return options.find((option) => option.value === value)?.label ?? value
-}
-
-export function createSelectValueHandler(
-  setValue: Dispatch<SetStateAction<string>>
-) {
-  return (value: string | null) => {
-    if (value !== null) {
-      setValue(value)
-    }
-  }
-}
\ 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
new file mode 100644
index 0000000..42296e2
--- /dev/null
+++ b/apps/web/src/components/blocks/wizard-2/components/data.tsx
@@ -0,0 +1,194 @@
+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
new file mode 100644
index 0000000..0087def
--- /dev/null
+++ b/apps/web/src/components/blocks/wizard-2/components/procurement-vendor-steps.tsx
@@ -0,0 +1,646 @@
+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
new file mode 100644
index 0000000..6d90db4
--- /dev/null
+++ b/apps/web/src/components/blocks/wizard-2/components/procurement-vendor-wizard.tsx
@@ -0,0 +1,426 @@
+"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
new file mode 100644
index 0000000..18e41fc
--- /dev/null
+++ b/apps/web/src/components/blocks/wizard-2/page.tsx
@@ -0,0 +1,9 @@
+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/dashboard/dashboard-modules-grid.tsx b/apps/web/src/components/dashboard/dashboard-modules-grid.tsx
index b74ce7c..fedf183 100644
--- a/apps/web/src/components/dashboard/dashboard-modules-grid.tsx
+++ b/apps/web/src/components/dashboard/dashboard-modules-grid.tsx
@@ -1,70 +1,47 @@
-import { ColumnDef } from '@tanstack/react-table'
+import { useMemo, useState } from 'react'
 import { Link, useNavigate } from '@tanstack/react-router'
-import {
-  ArrowUpDownIcon,
-  BoxesIcon,
-  ChevronDownIcon,
-  FilterIcon,
-  PlusIcon,
-  SearchIcon,
-  XIcon,
-} from 'lucide-react'
-import { useCallback, useMemo, useState } from 'react'
+import { BoxesIcon, PlusIcon, SearchIcon } from 'lucide-react'
 
 import { CategoryBadge } from '@/components/category-badge'
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
-import { Badge } from '@/components/reui/badge'
-import { DataGrid } from '@/components/reui/data-grid/data-grid'
+import { DataGridNameCell } from '@/components/data-grid-cell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
-import { DataGridScrollArea } from '@/components/reui/data-grid/data-grid-scroll-area'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
 import {
-  DataGridTable,
-  DataGridTableHeader,
-} from '@/components/reui/data-grid/data-grid-table'
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 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 { DATA_GRID_PAGINATION_RU } from '@/lib/data-grid-defaults'
 import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
-import {
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type PaginationState,
-  type SortingState,
-} from '@tanstack/react-table'
 
-type ModuleSort = 'name' | 'type' | 'priority'
-type EnabledFilter = 'all' | 'enabled' | 'disabled'
+const MODULE_TABS = [
+  { id: 'all', label: 'Все' },
+  { id: 'enabled', label: 'Вкл' },
+  { id: 'disabled', label: 'Выкл' },
+]
 
-const sortLabels: Record<ModuleSort, string> = {
-  name: 'Название',
-  type: 'Тип',
-  priority: 'Приоритет',
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Поиск модулей…',
+  },
+]
+
+function getFilterFieldValue(item: ModuleRow, field: string): unknown {
+  if (field === 'search') {
+    return `${item.name} ${item.type} ${moduleTypeRu(item.type)}`
+  }
+  return undefined
 }
 
-const EMPTY_MESSAGE = 'Нет модулей по выбранным фильтрам.'
-
-function buildSorting(sortBy: ModuleSort): SortingState {
-  return [{ id: sortBy, desc: false }]
+function tabFilter(item: ModuleRow, tabId: string): boolean {
+  if (tabId === 'enabled') return item.enabled !== false
+  if (tabId === 'disabled') return item.enabled === false
+  return true
 }
 
 export function DashboardModulesGrid({
@@ -75,53 +52,17 @@ export function DashboardModulesGrid({
   isLoading?: boolean
 }) {
   const navigate = useNavigate()
-  const [searchQuery, setSearchQuery] = useState('')
-  const [enabledFilter, setEnabledFilter] = useState<EnabledFilter>('all')
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  })
-  const [sortBy, setSortBy] = useState<ModuleSort>('name')
-  const [sorting, setSorting] = useState<SortingState>(() => buildSorting('name'))
-
-  const filteredModules = useMemo(() => {
-    const q = searchQuery.trim().toLowerCase()
-    return modules.filter((module) => {
-      const matchesSearch =
-        q.length === 0 ||
-        `${module.name} ${module.type} ${moduleTypeRu(module.type)}`.toLowerCase().includes(q)
-      const matchesEnabled =
-        enabledFilter === 'all' ||
-        (enabledFilter === 'enabled' ? module.enabled !== false : module.enabled === false)
-      return matchesSearch && matchesEnabled
-    })
-  }, [modules, searchQuery, enabledFilter])
-
-  const resetPagination = useCallback(() => {
-    setPagination((current) => ({ ...current, pageIndex: 0 }))
-  }, [])
-
-  const handleSortChange = useCallback(
-    (value: ModuleSort) => {
-      setSortBy(value)
-      setSorting(buildSorting(value))
-      resetPagination()
-    },
-    [resetPagination],
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
   )
 
-  const columns = useMemo<ColumnDef<ModuleRow>[]>(
+  const columns = useMemo<DataGridColumnDef<ModuleRow>[]>(
     () => [
       {
         accessorKey: 'name',
         id: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Модуль" />,
-        cell: ({ row }) => (
-          <div className="flex min-w-0 items-center gap-2">
-            <BoxesIcon className="text-muted-foreground size-4 shrink-0" aria-hidden />
-            <DataGridPrimaryCell title={row.original.name} accent="primary" />
-          </div>
-        ),
+        cell: ({ row }) => <DataGridNameCell icon={BoxesIcon} title={row.original.name} />,
         minSize: 180,
         meta: { headerTitle: 'Модуль' },
       },
@@ -146,188 +87,31 @@ export function DashboardModulesGrid({
     [],
   )
 
-  const table = useReactTable({
-    data: filteredModules,
-    columns,
-    pageCount: Math.ceil(filteredModules.length / pagination.pageSize),
-    state: { pagination, sorting },
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    getRowId: (row) => row.id,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  })
-
-  const activeFilterCount = enabledFilter === 'all' ? 0 : 1
-
   return (
-    <DashboardFramePanel
+    <ResourcePage
       title="Модули"
-      description="Поиск, сортировка и быстрый переход к настройке"
-      className="min-w-0"
-      actions={
+      description="Поиск и быстрый переход к настройке"
+      tabs={MODULE_TABS}
+      tabFilter={tabFilter}
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={getFilterFieldValue}
+      columns={columns}
+      data={modules}
+      getRowId={(row) => row.id}
+      isLoading={isLoading}
+      primaryAction={
         <Button variant="outline" size="sm" render={<Link to="/modules" search={{ create: true }} />}>
           <PlusIcon />
           Создать
         </Button>
       }
-    >
-      <DataGrid
-        table={table}
-        recordCount={filteredModules.length}
-        isLoading={isLoading}
-        emptyMessage={EMPTY_MESSAGE}
-        tableLayout={{
-          dense: true,
-          rowBorder: true,
-          headerSticky: false,
-          columnsVisibility: false,
-          columnsResizable: false,
-          columnsMovable: false,
-          width: 'auto',
-        }}
-        tableClassNames={{ bodyRow: 'group/module-row cursor-pointer [&>td]:h-14' }}
-        onRowClick={(row) => void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })}
-      >
-        <div className="flex flex-col">
-          <div className="flex flex-col gap-3 border-b px-4 py-3 @3xl:flex-row @3xl:items-center @3xl:justify-between">
-            <InputGroup className="w-full min-w-0 @3xl:max-w-xs">
-              <InputGroupAddon align="inline-start">
-                <SearchIcon className="text-muted-foreground size-4" aria-hidden />
-              </InputGroupAddon>
-              <InputGroupInput
-                value={searchQuery}
-                onChange={(event) => {
-                  setSearchQuery(event.target.value)
-                  resetPagination()
-                }}
-                placeholder="Поиск модулей…"
-                aria-label="Поиск модулей"
-              />
-              {searchQuery.length > 0 ? (
-                <InputGroupAddon align="inline-end">
-                  <InputGroupButton
-                    size="icon-xs"
-                    aria-label="Очистить поиск"
-                    onClick={() => {
-                      setSearchQuery('')
-                      resetPagination()
-                    }}
-                  >
-                    <XIcon className="size-4" aria-hidden />
-                  </InputGroupButton>
-                </InputGroupAddon>
-              ) : null}
-            </InputGroup>
-
-            <div className="flex flex-wrap items-center gap-2">
-              <DropdownMenu modal={false}>
-                <DropdownMenuTrigger
-                  render={
-                    <Button type="button" variant="outline" size="sm">
-                      <ArrowUpDownIcon data-icon="inline-start" aria-hidden />
-                      {sortLabels[sortBy]}
-                      <ChevronDownIcon data-icon="inline-end" aria-hidden />
-                    </Button>
-                  }
-                />
-                <DropdownMenuContent align="end" className="min-w-44">
-                  <DropdownMenuGroup>
-                    {(Object.keys(sortLabels) as ModuleSort[]).map((value) => (
-                      <DropdownMenuItem key={value} onClick={() => handleSortChange(value)}>
-                        {sortLabels[value]}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-
-              <DropdownMenu modal={false}>
-                <DropdownMenuTrigger
-                  render={
-                    <Button type="button" variant="outline" size="sm">
-                      <FilterIcon data-icon="inline-start" aria-hidden />
-                      Фильтры
-                      {activeFilterCount > 0 ? (
-                        <Badge variant="outline" radius="full">
-                          {activeFilterCount}
-                        </Badge>
-                      ) : null}
-                    </Button>
-                  }
-                />
-                <DropdownMenuContent align="end" className="min-w-48">
-                  <DropdownMenuGroup>
-                    <DropdownMenuLabel>Состояние</DropdownMenuLabel>
-                    <DropdownMenuCheckboxItem
-                      checked={enabledFilter === 'enabled'}
-                      closeOnClick={false}
-                      onCheckedChange={(checked) => {
-                        setEnabledFilter(checked ? 'enabled' : 'all')
-                        resetPagination()
-                      }}
-                    >
-                      Только включённые
-                    </DropdownMenuCheckboxItem>
-                    <DropdownMenuCheckboxItem
-                      checked={enabledFilter === 'disabled'}
-                      closeOnClick={false}
-                      onCheckedChange={(checked) => {
-                        setEnabledFilter(checked ? 'disabled' : 'all')
-                        resetPagination()
-                      }}
-                    >
-                      Только выключенные
-                    </DropdownMenuCheckboxItem>
-                  </DropdownMenuGroup>
-                  {activeFilterCount > 0 ? (
-                    <>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem
-                        closeOnClick={false}
-                        onClick={() => {
-                          setEnabledFilter('all')
-                          resetPagination()
-                        }}
-                      >
-                        Сбросить фильтры
-                      </DropdownMenuItem>
-                    </>
-                  ) : null}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </div>
-
-          {filteredModules.length > 0 ? (
-            <DataGridScrollArea>
-              <DataGridTable />
-            </DataGridScrollArea>
-          ) : (
-            <>
-              <DataGridScrollArea>
-                <DataGridTableHeader />
-              </DataGridScrollArea>
-              <div className="text-muted-foreground flex min-h-40 items-center justify-center px-4 text-center text-sm">
-                {EMPTY_MESSAGE}
-              </div>
-            </>
-          )}
-
-          <div className="border-t px-4 py-3">
-            {filteredModules.length > 0 ? (
-              <DataGridPagination
-                {...DATA_GRID_PAGINATION_RU}
-                sizes={[10, 15, 20]}
-                className="py-0"
-              />
-            ) : (
-              <p className="text-muted-foreground text-center text-sm">0 модулей</p>
-            )}
-          </div>
-        </div>
-      </DataGrid>
-    </DashboardFramePanel>
+      onRowClick={(row) =>
+        void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })
+      }
+      emptyState={{ title: 'Нет модулей по выбранным фильтрам.' }}
+    />
   )
 }
diff --git a/apps/web/src/components/dashboard/dashboard-recent-jobs-grid.tsx b/apps/web/src/components/dashboard/dashboard-recent-jobs-grid.tsx
index 80e2654..bf9e1cb 100644
--- a/apps/web/src/components/dashboard/dashboard-recent-jobs-grid.tsx
+++ b/apps/web/src/components/dashboard/dashboard-recent-jobs-grid.tsx
@@ -1,13 +1,11 @@
-import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
+import { ListTodo } from 'lucide-react'
 
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridNameCell } from '@/components/data-grid-cell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
+import { FrameDataGrid, type DataGridColumnDef } from '@/components/reui-kit'
 import { jobKindRu } from '@/lib/ui-labels'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { JobRow } from '@/types/api'
 
 export function DashboardRecentJobsGrid({
@@ -21,13 +19,14 @@ export function DashboardRecentJobsGrid({
 }) {
   const data = useMemo(() => jobs.slice(0, 8), [jobs])
 
-  const columns = useMemo<ColumnDef<JobRow>[]>(
+  const columns = useMemo<DataGridColumnDef<JobRow>[]>(
     () => [
       {
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
         cell: ({ row }) => (
-          <DataGridPrimaryCell
+          <DataGridNameCell
+            icon={ListTodo}
             title={jobKindRu(row.original.kind)}
             subtitle={
               row.original.meta?.module_id
@@ -48,27 +47,16 @@ export function DashboardRecentJobsGrid({
     [nameById],
   )
 
-  const { table, filteredCount } = useClientDataGrid({
-    data,
-    columns,
-    getSearchText: (row) => {
-      const moduleName = row.meta?.module_id
-        ? (nameById.get(String(row.meta.module_id)) ?? '')
-        : ''
-      return `${jobKindRu(row.kind)} ${row.status} ${moduleName}`
-    },
-    getRowId: (row) => row.job_id,
-    pageSize: 8,
-  })
-
   return (
-    <DataGridShell
-      table={table}
-      recordCount={filteredCount}
+    <FrameDataGrid
+      title="Недавние задачи"
+      description="Последние фоновые операции"
+      columns={columns}
+      data={data}
+      rowId={(row) => row.job_id}
+      emptyTitle="Нет задач"
+      pagination={false}
       isLoading={isLoading}
-      emptyMessage="Нет задач"
-      showPagination={false}
-      tableLayout={DATA_GRID_DENSE_LAYOUT}
     />
   )
 }
diff --git a/apps/web/src/components/dashboard/dashboard-recent-revisions-grid.tsx b/apps/web/src/components/dashboard/dashboard-recent-revisions-grid.tsx
index 3eeb9f6..0741b18 100644
--- a/apps/web/src/components/dashboard/dashboard-recent-revisions-grid.tsx
+++ b/apps/web/src/components/dashboard/dashboard-recent-revisions-grid.tsx
@@ -1,11 +1,9 @@
-import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
+import { GitCommitHorizontal } from 'lucide-react'
 
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridShell } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { FrameDataGrid, type DataGridColumnDef } from '@/components/reui-kit'
 import type { RevisionRow } from '@/types/api'
 
 export function DashboardRecentRevisionsGrid({
@@ -17,14 +15,14 @@ export function DashboardRecentRevisionsGrid({
 }) {
   const data = useMemo(() => revisions.slice(0, 8), [revisions])
 
-  const columns = useMemo<ColumnDef<RevisionRow>[]>(
+  const columns = useMemo<DataGridColumnDef<RevisionRow>[]>(
     () => [
       {
         id: 'id',
         accessorFn: (row) => row.id,
         header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
         cell: ({ row }) => (
-          <DataGridPrimaryCell title={`${row.original.id.slice(0, 10)}…`} accent="mono" />
+          <DataGridNameCell icon={GitCommitHorizontal} title={`${row.original.id.slice(0, 10)}…`} />
         ),
         meta: { headerTitle: 'ID' },
       },
@@ -42,22 +40,16 @@ export function DashboardRecentRevisionsGrid({
     [],
   )
 
-  const { table, filteredCount } = useClientDataGrid({
-    data,
-    columns,
-    getSearchText: (row) => row.id,
-    getRowId: (row) => row.id,
-    pageSize: 8,
-  })
-
   return (
-    <DataGridShell
-      table={table}
-      recordCount={filteredCount}
+    <FrameDataGrid
+      title="Последние ревизии"
+      description="История конфигураций"
+      columns={columns}
+      data={data}
+      rowId={(row) => row.id}
+      emptyTitle="Нет ревизий"
+      pagination={false}
       isLoading={isLoading}
-      emptyMessage="Нет ревизий"
-      showPagination={false}
-      tableLayout={DATA_GRID_DENSE_LAYOUT}
     />
   )
 }
diff --git a/apps/web/src/components/data-grid-cell.tsx b/apps/web/src/components/data-grid-cell.tsx
index 7c3ed7f..78f2a2a 100644
--- a/apps/web/src/components/data-grid-cell.tsx
+++ b/apps/web/src/components/data-grid-cell.tsx
@@ -1,30 +1,38 @@
+import type { LucideIcon } from 'lucide-react'
 import type { ReactNode } from 'react'
 
+import { IconTile } from '@/components/reui/icon-tile'
 import { cn } from '@evobgp/ui/lib/utils'
 
-const ACCENT_CLASS = {
-  primary: 'font-medium text-primary',
-  default: 'font-medium text-foreground',
-  mono: 'font-mono text-sm text-primary',
-} as const
-
-export function DataGridPrimaryCell({
+/**
+ * Name cell DNA — IconTile elevated size-10.5 + truncate.
+ * Preview: https://reui.io/preview/base/stats-12
+ * Docs: https://reui.io/docs/components/base/icon-tile
+ */
+export function DataGridNameCell({
+  icon: Icon,
   title,
   subtitle,
-  accent = 'default',
+  iconClassName = 'text-muted-foreground',
   className,
 }: {
+  icon: LucideIcon
   title: ReactNode
   subtitle?: ReactNode
-  accent?: keyof typeof ACCENT_CLASS
+  iconClassName?: string
   className?: string
 }) {
   return (
-    <div className={cn('flex min-w-0 flex-col gap-0.5', className)}>
-      <span className={cn('truncate', ACCENT_CLASS[accent])}>{title}</span>
-      {subtitle ? (
-        <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
-      ) : null}
+    <div className={cn('flex min-w-0 items-center gap-2.5', className)}>
+      <IconTile variant="elevated" className="size-10.5">
+        <Icon className={iconClassName} aria-hidden />
+      </IconTile>
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <span className="truncate font-medium">{title}</span>
+        {subtitle ? (
+          <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
+        ) : null}
+      </div>
     </div>
   )
 }
@@ -42,3 +50,16 @@ export function DataGridMutedCell({
     </span>
   )
 }
+
+/** Mono / secondary cell without semantic primary color. */
+export function DataGridMonoCell({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <span className={cn('truncate font-mono text-sm', className)}>{children}</span>
+  )
+}
diff --git a/apps/web/src/components/data-grid-shell.tsx b/apps/web/src/components/data-grid-shell.tsx
deleted file mode 100644
index 9984623..0000000
--- a/apps/web/src/components/data-grid-shell.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import type { ReactNode } from 'react'
-import type { Table } from '@tanstack/react-table'
-
-import { cn } from '@evobgp/ui/lib/utils'
-
-import { DataGridToolbar } from '@/components/data-grid-toolbar'
-import {
-  panelCardContentFlushClassName,
-  panelCardFooterClassName,
-} from '@/components/panel-card'
-import { FrameDataGrid } from '@/components/reui-kit/frame-data-grid'
-import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
-import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
-import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
-import { FrameFooter } from '@/components/reui/frame'
-import {
-  DATA_GRID_MESSAGES_RU,
-  DATA_GRID_PAGINATION_RU,
-  DATA_GRID_TABLE_CLASS_NAMES,
-  DATA_GRID_TABLE_LAYOUT,
-} from '@/lib/data-grid-defaults'
-
-interface DataGridShellProps<TData extends object> {
-  table: Table<TData>
-  recordCount: number
-  isLoading?: boolean
-  emptyMessage?: ReactNode
-  showPagination?: boolean
-  tableLayout?: typeof DATA_GRID_TABLE_LAYOUT
-  className?: string
-  onRowClick?: (row: TData) => void
-}
-
-export function DataGridShell<TData extends object>({
-  table,
-  recordCount,
-  isLoading = false,
-  emptyMessage,
-  showPagination = true,
-  tableLayout = DATA_GRID_TABLE_LAYOUT,
-  className,
-  onRowClick,
-}: DataGridShellProps<TData>) {
-  return (
-    <DataGrid
-      table={table}
-      recordCount={recordCount}
-      isLoading={isLoading}
-      emptyMessage={emptyMessage ?? DATA_GRID_MESSAGES_RU.emptyMessage}
-      loadingMessage={DATA_GRID_MESSAGES_RU.loadingMessage}
-      tableLayout={tableLayout}
-      tableClassNames={DATA_GRID_TABLE_CLASS_NAMES}
-      className={cn('min-w-0', className)}
-      onRowClick={onRowClick}
-    >
-      <DataGridContainer border={false}>
-        <DataGridTable />
-      </DataGridContainer>
-      {showPagination ? (
-        <FrameFooter className={cn(panelCardFooterClassName)}>
-          <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
-        </FrameFooter>
-      ) : null}
-    </DataGrid>
-  )
-}
-
-/** @deprecated Prefer FrameDataGrid from @/components/reui-kit */
-export function DataGridCard({
-  title,
-  description,
-  actions,
-  children,
-  className,
-}: {
-  title?: ReactNode
-  description?: ReactNode
-  actions?: ReactNode
-  children: ReactNode
-  className?: string
-}) {
-  return (
-    <FrameDataGrid
-      title={title}
-      description={description}
-      actions={actions}
-      className={className}
-    >
-      <div className={panelCardContentFlushClassName}>{children}</div>
-    </FrameDataGrid>
-  )
-}
-
-interface DataGridSectionProps<TData extends object> extends DataGridShellProps<TData> {
-  searchValue: string
-  onSearchChange: (value: string) => void
-  searchPlaceholder?: string
-  toolbarFilters?: ReactNode
-  toolbarActions?: ReactNode
-  beforeGrid?: ReactNode
-}
-
-export function DataGridSection<TData extends object>({
-  searchValue,
-  onSearchChange,
-  searchPlaceholder,
-  toolbarFilters,
-  toolbarActions,
-  beforeGrid,
-  ...shellProps
-}: DataGridSectionProps<TData>) {
-  return (
-    <>
-      <DataGridToolbar
-        searchValue={searchValue}
-        onSearchChange={onSearchChange}
-        searchPlaceholder={searchPlaceholder}
-        filters={toolbarFilters}
-        actions={toolbarActions}
-      />
-      {beforeGrid}
-      <DataGridShell {...shellProps} />
-    </>
-  )
-}
diff --git a/apps/web/src/components/data-grid-toolbar.tsx b/apps/web/src/components/data-grid-toolbar.tsx
deleted file mode 100644
index 195a363..0000000
--- a/apps/web/src/components/data-grid-toolbar.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { Field } from '@evobgp/ui/components/field'
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from '@evobgp/ui/components/input-group'
-import { ListFilterIcon, SearchIcon, XIcon } from 'lucide-react'
-
-import { panelCardInsetClassName } from '@/components/panel-card'
-import { cn } from '@evobgp/ui/lib/utils'
-
-interface DataGridToolbarProps {
-  searchValue: string
-  onSearchChange: (value: string) => void
-  searchPlaceholder?: string
-  /** ReUI Filters trigger or custom filter controls. Preview: https://reui.io/preview/base/data-grid-filtering-2 */
-  filters?: ReactNode
-  actions?: ReactNode
-  className?: string
-}
-
-/** Search + optional ReUI Filters row for Frame data grids. */
-export function DataGridToolbar({
-  searchValue,
-  onSearchChange,
-  searchPlaceholder = 'Поиск…',
-  filters,
-  actions,
-  className,
-}: DataGridToolbarProps) {
-  return (
-    <div className={cn('flex flex-wrap items-center gap-3 border-b', panelCardInsetClassName, className)}>
-      <Field className="min-w-[200px] flex-1">
-        <InputGroup>
-          <InputGroupAddon align="inline-start">
-            <SearchIcon aria-hidden="true" />
-          </InputGroupAddon>
-          <InputGroupInput
-            placeholder={searchPlaceholder}
-            value={searchValue}
-            onChange={(event) => onSearchChange(event.target.value)}
-            aria-label={searchPlaceholder}
-          />
-          <InputGroupAddon align="inline-end" className="gap-1">
-            {searchValue.length > 0 ? (
-              <InputGroupButton
-                aria-label="Очистить поиск"
-                size="icon-xs"
-                variant="ghost"
-                onClick={() => onSearchChange('')}
-              >
-                <XIcon aria-hidden="true" />
-              </InputGroupButton>
-            ) : null}
-            {filters ? (
-              filters
-            ) : (
-              <InputGroupButton
-                aria-label="Фильтры"
-                size="icon-xs"
-                variant="ghost"
-                disabled
-                title="Передайте filters={<Filters … />} из @/components/reui/filters"
-              >
-                <ListFilterIcon aria-hidden="true" />
-              </InputGroupButton>
-            )}
-          </InputGroupAddon>
-        </InputGroup>
-      </Field>
-      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
-    </div>
-  )
-}
diff --git a/apps/web/src/components/directories/directories-communities-grid.tsx b/apps/web/src/components/directories/directories-communities-grid.tsx
index 84d6479..80e4ab0 100644
--- a/apps/web/src/components/directories/directories-communities-grid.tsx
+++ b/apps/web/src/components/directories/directories-communities-grid.tsx
@@ -1,39 +1,52 @@
-import { ColumnDef } from '@tanstack/react-table'
-import { useMemo } from 'react'
+import { useMemo, useState, type ReactNode } from 'react'
+import { Tags } from 'lucide-react'
 
 import { CategoryBadge } from '@/components/category-badge'
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMonoCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { DirectoriesRowActions } from '@/components/directories/directories-row-actions'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createSearchFilterField,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import type { BgpCommunity } from '@/types/api'
 
+const filterFields: FilterField[] = [
+  createSearchFilterField('search', 'Поиск', 'Поиск community…'),
+]
+
 export function DirectoriesCommunitiesGrid({
   items,
   isLoading = false,
   canWrite = false,
   onEdit,
+  actions,
 }: {
   items: BgpCommunity[]
   isLoading?: boolean
   canWrite?: boolean
   onEdit?: (row: BgpCommunity) => void
+  actions?: ReactNode
 }) {
-  const columns = useMemo<ColumnDef<BgpCommunity>[]>(() => {
-    const cols: ColumnDef<BgpCommunity>[] = [
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
+
+  const columns = useMemo<DataGridColumnDef<BgpCommunity>[]>(() => {
+    const cols: DataGridColumnDef<BgpCommunity>[] = [
       {
         accessorKey: 'title',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={row.original.title} accent="primary" />,
+        cell: ({ row }) => <DataGridNameCell icon={Tags} title={row.original.title} />,
         meta: { headerTitle: 'Название' },
       },
       {
         accessorKey: 'community',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Значение" />,
-        cell: ({ row }) => (
-          <DataGridPrimaryCell title={row.original.community} accent="mono" />
-        ),
+        cell: ({ row }) => <DataGridMonoCell>{row.original.community}</DataGridMonoCell>,
         meta: { headerTitle: 'Значение' },
       },
       {
@@ -51,9 +64,7 @@ export function DirectoriesCommunitiesGrid({
         enableSorting: false,
         enableHiding: false,
         header: () => <span className="sr-only">Действия</span>,
-        cell: ({ row }) => (
-          <DirectoriesRowActions onEdit={() => onEdit(row.original)} />
-        ),
+        cell: ({ row }) => <DirectoriesRowActions onEdit={() => onEdit(row.original)} />,
         meta: { headerTitle: 'Действия' },
       })
     }
@@ -61,22 +72,22 @@ export function DirectoriesCommunitiesGrid({
     return cols
   }, [canWrite, onEdit])
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) => `${row.title} ${row.community}`,
-    getRowId: (row) => row.id,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title="BGP community"
+      description="Теги для префиксов в фильтрах BIRD"
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(row) => `${row.title} ${row.community}`}
+      columns={columns}
+      data={items}
+      getRowId={(row) => row.id}
       isLoading={isLoading}
-      emptyMessage="Нет community"
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск community…"
+      primaryAction={actions}
+      pinLastColumn={Boolean(canWrite && onEdit)}
+      emptyState={{ title: 'Нет community', action: actions }}
     />
   )
 }
diff --git a/apps/web/src/components/directories/directories-doh-grid.tsx b/apps/web/src/components/directories/directories-doh-grid.tsx
index 6591808..ded0d79 100644
--- a/apps/web/src/components/directories/directories-doh-grid.tsx
+++ b/apps/web/src/components/directories/directories-doh-grid.tsx
@@ -1,36 +1,51 @@
-import { ColumnDef } from '@tanstack/react-table'
-import { useMemo } from 'react'
+import { useMemo, useState, type ReactNode } from 'react'
+import { Globe } from 'lucide-react'
 
 import { CategoryBadge } from '@/components/category-badge'
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMonoCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { DirectoriesRowActions } from '@/components/directories/directories-row-actions'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createSearchFilterField,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import type { DohProfile } from '@/types/api'
 
+const filterFields: FilterField[] = [
+  createSearchFilterField('search', 'Поиск', 'Поиск DoH профилей…'),
+]
+
 export function DirectoriesDohGrid({
   items,
   isLoading = false,
   canWrite = false,
   onEdit,
+  actions,
 }: {
   items: DohProfile[]
   isLoading?: boolean
   canWrite?: boolean
   onEdit?: (row: DohProfile) => void
+  actions?: ReactNode
 }) {
-  const columns = useMemo<ColumnDef<DohProfile>[]>(() => {
-    const cols: ColumnDef<DohProfile>[] = [
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
+
+  const columns = useMemo<DataGridColumnDef<DohProfile>[]>(() => {
+    const cols: DataGridColumnDef<DohProfile>[] = [
       {
         id: 'name',
         accessorFn: (row) => row.name ?? row.url,
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
         cell: ({ row }) => (
-          <DataGridPrimaryCell
+          <DataGridNameCell
+            icon={Globe}
             title={row.original.name ?? row.original.url}
             subtitle={row.original.name ? row.original.url : undefined}
-            accent="primary"
           />
         ),
         meta: { headerTitle: 'Название' },
@@ -38,7 +53,7 @@ export function DirectoriesDohGrid({
       {
         accessorKey: 'url',
         header: ({ column }) => <DataGridColumnHeader column={column} title="URL" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={row.original.url} accent="mono" />,
+        cell: ({ row }) => <DataGridMonoCell>{row.original.url}</DataGridMonoCell>,
         meta: { headerTitle: 'URL' },
       },
       {
@@ -56,9 +71,7 @@ export function DirectoriesDohGrid({
         enableSorting: false,
         enableHiding: false,
         header: () => <span className="sr-only">Действия</span>,
-        cell: ({ row }) => (
-          <DirectoriesRowActions onEdit={() => onEdit(row.original)} />
-        ),
+        cell: ({ row }) => <DirectoriesRowActions onEdit={() => onEdit(row.original)} />,
         meta: { headerTitle: 'Действия' },
       })
     }
@@ -66,22 +79,22 @@ export function DirectoriesDohGrid({
     return cols
   }, [canWrite, onEdit])
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) => `${row.name ?? ''} ${row.url}`,
-    getRowId: (row) => row.id,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title="DoH профили"
+      description="Резолверы DNS-over-HTTPS для доменных модулей"
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(row) => `${row.name ?? ''} ${row.url}`}
+      columns={columns}
+      data={items}
+      getRowId={(row) => row.id}
       isLoading={isLoading}
-      emptyMessage="Нет DoH профилей"
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск DoH профилей…"
+      primaryAction={actions}
+      pinLastColumn={Boolean(canWrite && onEdit)}
+      emptyState={{ title: 'Нет DoH профилей', action: actions }}
     />
   )
 }
diff --git a/apps/web/src/components/lookup/lookup-add-step.tsx b/apps/web/src/components/lookup/lookup-add-step.tsx
index 34cb8e3..2b21a1f 100644
--- a/apps/web/src/components/lookup/lookup-add-step.tsx
+++ b/apps/web/src/components/lookup/lookup-add-step.tsx
@@ -5,14 +5,20 @@ import { toast } from 'sonner'
 import { Button } from '@evobgp/ui/components/button'
 import { Field, FieldLabel } from '@evobgp/ui/components/field'
 
-import { CommunitySelect } from '@/components/modules/community-select'
 import { LoadingButton } from '@/components/loading-button'
 import {
   Alert,
   AlertDescription,
   AlertTitle,
 } from '@/components/reui/alert'
-import { SelectMenu } from '@/components/select-field'
+import {
+  Cascader,
+  CascaderContent,
+  CascaderPanel,
+  CascaderTrigger,
+} from '@/components/reui/cascader/cascader'
+import { CascaderInput, CascaderValue } from '@/components/reui/cascader/cascader-nav'
+import type { CascaderNode } from '@/components/reui/cascader/cascader-types'
 import { ApiError, apiMutate } from '@/lib/api-client'
 import type {
   BgpCommunity,
@@ -22,8 +28,10 @@ import type {
 } from '@/types/api'
 
 /**
- * Lookup wizard step 3 — module + community (bare content for single Frame).
+ * Lookup wizard step 3 — cascader module → community (wizard-2).
  * @see https://reui.io/preview/base/wizard-2
+ * @see https://reui.io/docs/components/base/cascader
+ * @see https://reui.io/docs/components/base/stepper
  */
 
 function hostPrefixFromIp(ip: string): string {
@@ -34,6 +42,31 @@ function moduleTypeForKind(kind: LookupQueryKind): ModuleRow['type'] {
   return kind === 'domain' ? 'DOMAINS' : 'IP_RANGES'
 }
 
+type LookupPick = { kind: 'module' } | { kind: 'community'; communityId: string }
+
+function encodeModuleValue(moduleId: string): string {
+  return `m:${moduleId}`
+}
+
+function encodeCommunityValue(moduleId: string, communityId: string): string {
+  return `c:${moduleId}:${communityId}`
+}
+
+function parsePick(
+  value: string,
+): { moduleId: string; communityId: string | null } | null {
+  if (value.startsWith('m:')) {
+    return { moduleId: value.slice(2), communityId: null }
+  }
+  if (value.startsWith('c:')) {
+    const rest = value.slice(2)
+    const sep = rest.indexOf(':')
+    if (sep <= 0) return null
+    return { moduleId: rest.slice(0, sep), communityId: rest.slice(sep + 1) }
+  }
+  return null
+}
+
 export function LookupAddStep({
   data,
   modules,
@@ -48,49 +81,58 @@ export function LookupAddStep({
   onAdded: () => void | Promise<void>
 }) {
   const wantedType = moduleTypeForKind(data.query_kind)
+  const allowEmptyCommunity = data.query_kind === 'domain'
   const eligible = useMemo(
     () => modules.filter((m) => m.type === wantedType),
     [modules, wantedType],
   )
 
-  const [moduleId, setModuleId] = useState('')
-  const [communityId, setCommunityId] = useState<string | null>(null)
+  const [pick, setPick] = useState('')
   const [saving, setSaving] = useState(false)
 
+  const cascaderItems = useMemo<CascaderNode<LookupPick>[]>(
+    () =>
+      eligible.map((mod) => ({
+        value: encodeModuleValue(mod.id),
+        label: mod.name,
+        description: mod.id,
+        data: { kind: 'module' },
+        children: communities.map((community) => ({
+          value: encodeCommunityValue(mod.id, community.id),
+          label: community.title,
+          description: community.community,
+          data: { kind: 'community', communityId: community.id },
+        })),
+      })),
+    [eligible, communities],
+  )
+
   useEffect(() => {
     if (eligible.length === 0) {
-      setModuleId('')
+      setPick('')
       return
     }
-    setModuleId((prev) =>
-      prev && eligible.some((m) => m.id === prev) ? prev : eligible[0]!.id,
-    )
+    const first = eligible[0]!
+    const defaultCommunity = first.default_community_id
+    setPick((prev) => {
+      if (prev && parsePick(prev)?.moduleId && eligible.some((m) => m.id === parsePick(prev)?.moduleId)) {
+        return prev
+      }
+      if (defaultCommunity) return encodeCommunityValue(first.id, defaultCommunity)
+      return encodeModuleValue(first.id)
+    })
   }, [eligible])
 
-  useEffect(() => {
-    const mod = eligible.find((m) => m.id === moduleId)
-    if (!mod) {
-      setCommunityId(null)
-      return
-    }
-    setCommunityId(mod.default_community_id ?? null)
-  }, [moduleId, eligible])
-
-  const moduleItems = useMemo(
-    () =>
-      eligible.map((m) => ({
-        value: m.id,
-        label: m.name,
-      })),
-    [eligible],
-  )
+  const parsed = pick ? parsePick(pick) : null
+  const moduleId = parsed?.moduleId ?? ''
+  const communityId = parsed?.communityId ?? null
 
   async function handleAdd() {
     if (!moduleId) {
       toast.error('Выберите модуль')
       return
     }
-    if (data.query_kind !== 'domain' && !communityId) {
+    if (!allowEmptyCommunity && !communityId) {
       toast.error('Укажите community')
       return
     }
@@ -151,28 +193,34 @@ export function LookupAddStep({
           «{valueLabel}» отсутствует в списках. Выберите модуль и community.
         </p>
       </div>
-      <div className="flex flex-col gap-4">
-        <Field>
-          <FieldLabel htmlFor="lookup-add-module">Модуль ({wantedType})</FieldLabel>
-          <SelectMenu
-            id="lookup-add-module"
-            items={moduleItems}
-            value={moduleId}
-            placeholder="Выберите модуль"
-            onValueChange={(v) => {
-              if (v) setModuleId(v)
-            }}
-          />
-        </Field>
-        <CommunitySelect
-          id="lookup-add-comm"
-          label="Community"
-          value={communityId}
-          onValueChange={setCommunityId}
-          communities={communities}
-          nullable={data.query_kind === 'domain'}
-        />
-      </div>
+      <Field>
+        <FieldLabel htmlFor="lookup-add-cascader">Модуль и community</FieldLabel>
+        <Cascader
+          items={cascaderItems}
+          value={pick}
+          onValueChange={setPick}
+          selectable={allowEmptyCommunity ? 'any' : 'leaf'}
+          mode="columns"
+          labels={{
+            search: 'Поиск',
+            empty: 'Ничего не найдено',
+            back: 'Назад',
+            rootLevel: 'Модули',
+          }}
+        >
+          <CascaderTrigger
+            id="lookup-add-cascader"
+            className="w-full"
+            aria-label="Модуль и community"
+          >
+            <CascaderValue placeholder="Выберите модуль и community" display="path" />
+          </CascaderTrigger>
+          <CascaderContent>
+            <CascaderInput />
+            <CascaderPanel />
+          </CascaderContent>
+        </Cascader>
+      </Field>
       <div className="flex flex-wrap items-center justify-end gap-2 border-t pt-4">
         <Button type="button" variant="outline" onClick={onCancel}>
           Назад
@@ -180,7 +228,7 @@ export function LookupAddStep({
         <LoadingButton
           loading={saving}
           onClick={() => void handleAdd()}
-          disabled={!moduleId || (data.query_kind !== 'domain' && !communityId)}
+          disabled={!moduleId || (!allowEmptyCommunity && !communityId)}
         >
           Добавить
         </LoadingButton>
diff --git a/apps/web/src/components/lookup/lookup-matches-grid.tsx b/apps/web/src/components/lookup/lookup-matches-grid.tsx
index d77cbeb..550442c 100644
--- a/apps/web/src/components/lookup/lookup-matches-grid.tsx
+++ b/apps/web/src/components/lookup/lookup-matches-grid.tsx
@@ -1,21 +1,35 @@
-import { ColumnDef } from '@tanstack/react-table'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useNavigate } from '@tanstack/react-router'
+import { Boxes, SearchIcon } from 'lucide-react'
 
 import { CategoryBadge } from '@/components/category-badge'
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMonoCell, DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import type { LookupMatch } from '@/types/api'
 
 /**
- * Lookup matches grid — bare section for wizard-2 single Frame.
+ * Lookup matches grid — ResourcePage hideHeader inside wizard-2 Frame.
  * @see https://reui.io/preview/base/wizard-2
  * @see https://reui.io/preview/base/data-grid-filtering-2
  * @see https://reui.io/docs/components/base/badge
  */
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Фильтр совпадений…',
+  },
+]
+
 export function LookupMatchesGrid({
   items,
   isLoading = false,
@@ -24,8 +38,11 @@ export function LookupMatchesGrid({
   isLoading?: boolean
 }) {
   const navigate = useNavigate()
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
 
-  const columns = useMemo<ColumnDef<LookupMatch>[]>(
+  const columns = useMemo<DataGridColumnDef<LookupMatch>[]>(
     () => [
       {
         accessorKey: 'layer',
@@ -44,10 +61,10 @@ export function LookupMatchesGrid({
         accessorKey: 'module_name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Модуль" />,
         cell: ({ row }) => (
-          <DataGridPrimaryCell
+          <DataGridNameCell
+            icon={Boxes}
             title={row.original.module_name}
             subtitle={row.original.module_type}
-            accent="primary"
           />
         ),
         meta: { headerTitle: 'Модуль' },
@@ -56,15 +73,14 @@ export function LookupMatchesGrid({
         accessorKey: 'matched_value',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Совпадение" />,
         cell: ({ row }) => (
-          <DataGridPrimaryCell
-            title={row.original.matched_value}
-            subtitle={
-              row.original.resolved_ip
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <DataGridMonoCell>{row.original.matched_value}</DataGridMonoCell>
+            <DataGridMutedCell>
+              {row.original.resolved_ip
                 ? `${row.original.match_kind} · via ${row.original.resolved_ip}`
-                : row.original.match_kind
-            }
-            accent="mono"
-          />
+                : row.original.match_kind}
+            </DataGridMutedCell>
+          </div>
         ),
         meta: { headerTitle: 'Совпадение' },
       },
@@ -76,13 +92,15 @@ export function LookupMatchesGrid({
           const title = row.original.community_title?.trim()
           const value = row.original.community?.trim()
           if (!title && !value) {
-            return <span className="text-muted-foreground text-sm">—</span>
+            return <DataGridMutedCell>—</DataGridMutedCell>
           }
           return (
-            <DataGridPrimaryCell
-              title={title || value || '—'}
-              subtitle={title && value && title !== value ? value : undefined}
-            />
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <DataGridMonoCell>{title || value || '—'}</DataGridMonoCell>
+              {title && value && title !== value ? (
+                <DataGridMutedCell>{value}</DataGridMutedCell>
+              ) : null}
+            </div>
           )
         },
         meta: { headerTitle: 'Community' },
@@ -95,7 +113,7 @@ export function LookupMatchesGrid({
           row.original.source ? (
             <CategoryBadge>{row.original.source}</CategoryBadge>
           ) : (
-            <span className="text-muted-foreground text-sm">—</span>
+            <DataGridMutedCell>—</DataGridMutedCell>
           ),
         meta: { headerTitle: 'Источник' },
       },
@@ -103,35 +121,29 @@ export function LookupMatchesGrid({
     [],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) =>
-      `${row.layer} ${row.module_name} ${row.module_type} ${row.matched_value} ${row.community ?? ''} ${row.community_title ?? ''} ${row.source ?? ''}`,
-    getRowId: (row) =>
-      `${row.layer}|${row.module_id}|${row.match_kind}|${row.matched_value}|${row.entry_id ?? ''}|${row.source ?? ''}|${row.community_id ?? ''}`,
-  })
-
   return (
-    <div className="flex flex-col gap-3">
-      <div className="flex flex-col gap-px">
-        <h3 className="text-sm font-semibold">Совпадения</h3>
-        <p className="text-muted-foreground text-sm">
-          Entries и snapshots · клик по строке открывает модуль
-        </p>
-      </div>
-      <DataGridSection
-        table={table}
-        recordCount={filteredCount}
-        isLoading={isLoading}
-        emptyMessage="Нет совпадений"
-        searchValue={globalFilter}
-        onSearchChange={setGlobalFilter}
-        searchPlaceholder="Фильтр совпадений…"
-        onRowClick={(row) =>
-          void navigate({ to: '/modules/$moduleId', params: { moduleId: row.module_id } })
-        }
-      />
-    </div>
+    <ResourcePage
+      title="Совпадения"
+      description="Entries и snapshots · клик по строке открывает модуль"
+      hideHeader
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(item, field) => {
+        if (field !== 'search') return undefined
+        return `${item.layer} ${item.module_name} ${item.module_type} ${item.matched_value} ${item.community ?? ''} ${item.community_title ?? ''} ${item.source ?? ''}`
+      }}
+      columns={columns}
+      data={items}
+      getRowId={(row) =>
+        `${row.layer}|${row.module_id}|${row.match_kind}|${row.matched_value}|${row.entry_id ?? ''}|${row.source ?? ''}|${row.community_id ?? ''}`
+      }
+      isLoading={isLoading}
+      onRowClick={(row) =>
+        void navigate({ to: '/modules/$moduleId', params: { moduleId: row.module_id } })
+      }
+      emptyState={{ title: 'Нет совпадений' }}
+    />
   )
 }
diff --git a/apps/web/src/components/modules/module-entries-grid.tsx b/apps/web/src/components/modules/module-entries-grid.tsx
index bde99de..4509812 100644
--- a/apps/web/src/components/modules/module-entries-grid.tsx
+++ b/apps/web/src/components/modules/module-entries-grid.tsx
@@ -1,17 +1,20 @@
-import { ColumnDef } from '@tanstack/react-table'
-import { Pencil, Trash2 } from 'lucide-react'
-import { useMemo } from 'react'
+import { Pencil, SearchIcon, Trash2 } from 'lucide-react'
+import { useMemo, useState, type ReactNode } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 
 import { CategoryBadge } from '@/components/category-badge'
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMonoCell, DataGridMutedCell } from '@/components/data-grid-cell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { formatDateTime } from '@/lib/modules/display'
 import { communityLabel } from '@/lib/modules/helpers'
 import { cdnSourceKindRu } from '@/lib/ui-labels'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type {
   AsEntry,
   BgpCommunity,
@@ -27,6 +30,18 @@ type DeleteTarget =
   | { kind: 'cdn'; entry: CdnSource }
   | { kind: 'as'; entry: AsEntry }
 
+type EntryRow = DomainEntry | IpRangeEntry | CdnSource | AsEntry
+
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Поиск записей…',
+  },
+]
+
 function RowActions({ onEdit, onDelete }: { onEdit: () => void; onDelete: () => void }) {
   return (
     <div className="flex justify-end gap-1">
@@ -47,6 +62,12 @@ function RowActions({ onEdit, onDelete }: { onEdit: () => void; onDelete: () =>
   )
 }
 
+function searchText(row: EntryRow): string {
+  return Object.values(row as Record<string, unknown>)
+    .filter((value) => typeof value === 'string' || typeof value === 'number')
+    .join(' ')
+}
+
 export function ModuleEntriesGrid({
   mod,
   rows,
@@ -54,6 +75,14 @@ export function ModuleEntriesGrid({
   onEdit,
   onDelete,
   isLoading = false,
+  isError = false,
+  error = null,
+  onRetry,
+  title,
+  description,
+  actions,
+  emptyTitle = 'Нет записей',
+  emptyDescription,
 }: {
   mod: ModuleRow
   rows: Record<string, unknown>[]
@@ -61,198 +90,207 @@ export function ModuleEntriesGrid({
   onEdit: (target: DeleteTarget) => void
   onDelete: (target: DeleteTarget) => void
   isLoading?: boolean
+  isError?: boolean
+  error?: Error | null
+  onRetry?: () => void
+  title: string
+  description?: string
+  actions?: ReactNode
+  emptyTitle?: string
+  emptyDescription?: string
 }) {
-  const columns = useMemo(() => {
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
+
+  const columns = useMemo<DataGridColumnDef<EntryRow>[]>(() => {
     if (mod.type === 'DOMAINS') {
       return [
         {
           accessorKey: 'fqdn',
-          header: ({ column }: { column: { id: string } }) => (
-            <DataGridColumnHeader column={column as never} title="FQDN" />
-          ),
-          cell: ({ row }: { row: { original: DomainEntry } }) => (
-            <DataGridPrimaryCell title={row.original.fqdn} accent="mono" />
+          header: ({ column }) => <DataGridColumnHeader column={column} title="FQDN" />,
+          cell: ({ row }) => (
+            <DataGridMonoCell>{(row.original as DomainEntry).fqdn}</DataGridMonoCell>
           ),
+          meta: { headerTitle: 'FQDN' },
         },
         {
           id: 'community',
           header: 'Community',
-          cell: ({ row }: { row: { original: DomainEntry } }) => (
-            <span className="text-sm text-muted-foreground">
-              {communityLabel(row.original.community_id, communities)}
-            </span>
+          cell: ({ row }) => (
+            <DataGridMutedCell>
+              {communityLabel((row.original as DomainEntry).community_id, communities)}
+            </DataGridMutedCell>
           ),
         },
         {
           id: 'actions',
           enableSorting: false,
           header: () => null,
-          cell: ({ row }: { row: { original: DomainEntry } }) => (
+          cell: ({ row }) => (
             <RowActions
-              onEdit={() => onEdit({ kind: 'domain', entry: row.original })}
-              onDelete={() => onDelete({ kind: 'domain', entry: row.original })}
+              onEdit={() => onEdit({ kind: 'domain', entry: row.original as DomainEntry })}
+              onDelete={() => onDelete({ kind: 'domain', entry: row.original as DomainEntry })}
             />
           ),
         },
-      ] as ColumnDef<DomainEntry>[]
+      ]
     }
 
     if (mod.type === 'IP_RANGES') {
       return [
         {
           accessorKey: 'prefix',
-          header: ({ column }: { column: { id: string } }) => (
-            <DataGridColumnHeader column={column as never} title="Префикс (CIDR)" />
-          ),
-          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
-            <DataGridPrimaryCell title={row.original.prefix} accent="mono" />
+          header: ({ column }) => <DataGridColumnHeader column={column} title="Префикс (CIDR)" />,
+          cell: ({ row }) => (
+            <DataGridMonoCell>{(row.original as IpRangeEntry).prefix}</DataGridMonoCell>
           ),
+          meta: { headerTitle: 'Префикс (CIDR)' },
         },
         {
           id: 'community',
           header: 'Community',
-          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
-            <span className="text-sm text-muted-foreground">
-              {communityLabel(row.original.community_id, communities)}
-            </span>
+          cell: ({ row }) => (
+            <DataGridMutedCell>
+              {communityLabel((row.original as IpRangeEntry).community_id, communities)}
+            </DataGridMutedCell>
           ),
         },
         {
           id: 'actions',
           enableSorting: false,
           header: () => null,
-          cell: ({ row }: { row: { original: IpRangeEntry } }) => (
+          cell: ({ row }) => (
             <RowActions
-              onEdit={() => onEdit({ kind: 'ip-range', entry: row.original })}
-              onDelete={() => onDelete({ kind: 'ip-range', entry: row.original })}
+              onEdit={() => onEdit({ kind: 'ip-range', entry: row.original as IpRangeEntry })}
+              onDelete={() => onDelete({ kind: 'ip-range', entry: row.original as IpRangeEntry })}
             />
           ),
         },
-      ] as ColumnDef<IpRangeEntry>[]
+      ]
     }
 
     if (mod.type === 'CDN_CIDRS') {
       return [
         {
           accessorKey: 'url',
-          header: ({ column }: { column: { id: string } }) => (
-            <DataGridColumnHeader column={column as never} title="URL" />
-          ),
-          cell: ({ row }: { row: { original: CdnSource } }) => (
-            <DataGridPrimaryCell title={row.original.url} accent="mono" className="max-w-xs" />
+          header: ({ column }) => <DataGridColumnHeader column={column} title="URL" />,
+          cell: ({ row }) => (
+            <DataGridMonoCell className="max-w-xs">
+              {(row.original as CdnSource).url}
+            </DataGridMonoCell>
           ),
+          meta: { headerTitle: 'URL' },
         },
         {
           accessorKey: 'source_kind',
           header: 'Тип',
-          cell: ({ row }: { row: { original: CdnSource } }) => (
-            <CategoryBadge>{cdnSourceKindRu(row.original.source_kind)}</CategoryBadge>
+          cell: ({ row }) => (
+            <CategoryBadge>{cdnSourceKindRu((row.original as CdnSource).source_kind)}</CategoryBadge>
           ),
         },
         {
           id: 'community',
           header: 'Community',
-          cell: ({ row }: { row: { original: CdnSource } }) => (
-            <span className="text-sm text-muted-foreground">
-              {communityLabel(row.original.community_id, communities)}
-            </span>
+          cell: ({ row }) => (
+            <DataGridMutedCell>
+              {communityLabel((row.original as CdnSource).community_id, communities)}
+            </DataGridMutedCell>
           ),
         },
         {
           id: 'last_refreshed_at',
-          accessorFn: (row: CdnSource) => row.last_refreshed_at ?? '',
-          header: ({ column }: { column: { id: string } }) => (
-            <DataGridColumnHeader column={column as never} title="Обновлено" />
-          ),
-          cell: ({ row }: { row: { original: CdnSource } }) => (
-            <DataGridMutedCell>{formatDateTime(row.original.last_refreshed_at)}</DataGridMutedCell>
+          accessorFn: (row) => (row as CdnSource).last_refreshed_at ?? '',
+          header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
+          cell: ({ row }) => (
+            <DataGridMutedCell>
+              {formatDateTime((row.original as CdnSource).last_refreshed_at)}
+            </DataGridMutedCell>
           ),
+          meta: { headerTitle: 'Обновлено' },
         },
         {
           id: 'actions',
           enableSorting: false,
           header: () => null,
-          cell: ({ row }: { row: { original: CdnSource } }) => (
+          cell: ({ row }) => (
             <RowActions
-              onEdit={() => onEdit({ kind: 'cdn', entry: row.original })}
-              onDelete={() => onDelete({ kind: 'cdn', entry: row.original })}
+              onEdit={() => onEdit({ kind: 'cdn', entry: row.original as CdnSource })}
+              onDelete={() => onDelete({ kind: 'cdn', entry: row.original as CdnSource })}
             />
           ),
         },
-      ] as ColumnDef<CdnSource>[]
+      ]
     }
 
     return [
       {
         accessorKey: 'asn',
-        header: ({ column }: { column: { id: string } }) => (
-          <DataGridColumnHeader column={column as never} title="ASN" />
-        ),
-        cell: ({ row }: { row: { original: AsEntry } }) => (
-          <span className="font-mono text-sm">{row.original.asn}</span>
-        ),
+        header: ({ column }) => <DataGridColumnHeader column={column} title="ASN" />,
+        cell: ({ row }) => <DataGridMonoCell>{(row.original as AsEntry).asn}</DataGridMonoCell>,
+        meta: { headerTitle: 'ASN' },
       },
       {
         accessorKey: 'asn_name',
         header: 'Имя',
-        cell: ({ row }: { row: { original: AsEntry } }) => (
-          <span className="text-sm">{row.original.asn_name ?? '—'}</span>
+        cell: ({ row }) => (
+          <span className="text-sm">{(row.original as AsEntry).asn_name ?? '—'}</span>
         ),
       },
       {
         accessorKey: 'prefix_count',
         header: 'Префиксов',
-        cell: ({ row }: { row: { original: AsEntry } }) => (
-          <span className="font-mono text-sm">{row.original.prefix_count ?? '—'}</span>
+        cell: ({ row }) => (
+          <DataGridMonoCell>{(row.original as AsEntry).prefix_count ?? '—'}</DataGridMonoCell>
         ),
       },
       {
         id: 'community',
         header: 'Community',
-        cell: ({ row }: { row: { original: AsEntry } }) => (
-          <span className="text-sm text-muted-foreground">
-            {communityLabel(row.original.community_id, communities)}
-          </span>
+        cell: ({ row }) => (
+          <DataGridMutedCell>
+            {communityLabel((row.original as AsEntry).community_id, communities)}
+          </DataGridMutedCell>
         ),
       },
       {
         id: 'actions',
         enableSorting: false,
         header: () => null,
-        cell: ({ row }: { row: { original: AsEntry } }) => (
+        cell: ({ row }) => (
           <RowActions
-            onEdit={() => onEdit({ kind: 'as', entry: row.original })}
-            onDelete={() => onDelete({ kind: 'as', entry: row.original })}
+            onEdit={() => onEdit({ kind: 'as', entry: row.original as AsEntry })}
+            onDelete={() => onDelete({ kind: 'as', entry: row.original as AsEntry })}
           />
         ),
       },
-    ] as ColumnDef<AsEntry>[]
+    ]
   }, [communities, mod.type, onDelete, onEdit])
 
-  type RowType = DomainEntry | IpRangeEntry | CdnSource | AsEntry
-  const data = rows as unknown as RowType[]
-
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data,
-    columns: columns as ColumnDef<RowType>[],
-    getSearchText: (row) => {
-      const r = row as Record<string, unknown>
-      return Object.values(r)
-        .filter((v) => typeof v === 'string' || typeof v === 'number')
-        .join(' ')
-    },
-    getRowId: (row) => row.id,
-  })
+  const data = rows as unknown as EntryRow[]
 
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title={title}
+      description={description}
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(item, field) => {
+        if (field !== 'search') return undefined
+        return searchText(item)
+      }}
+      columns={columns}
+      data={data}
+      getRowId={(row) => row.id}
       isLoading={isLoading}
-      emptyMessage="Нет записей"
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск записей…"
+      isError={isError}
+      error={error}
+      onRetry={onRetry}
+      primaryAction={actions}
+      pinLastColumn
+      emptyState={{ title: emptyTitle, description: emptyDescription, action: actions }}
     />
   )
 }
diff --git a/apps/web/src/components/modules/module-entries-section.tsx b/apps/web/src/components/modules/module-entries-section.tsx
index bbd942e..f60f00e 100644
--- a/apps/web/src/components/modules/module-entries-section.tsx
+++ b/apps/web/src/components/modules/module-entries-section.tsx
@@ -5,9 +5,6 @@ import { toast } from 'sonner'
 import { Button } from '@evobgp/ui/components/button'
 
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { FrameDataGrid } from '@/components/reui-kit'
-import { QueryState } from '@/components/query-state'
-import { TableSkeleton } from '@/components/skeletons'
 import { ModuleEntriesGrid, type ModuleEntryDeleteTarget } from '@/components/modules/module-entries-grid'
 import { ModuleAsEntryDialog } from '@/components/modules/module-as-entry-dialog'
 import { ModuleCdnSourceDialog } from '@/components/modules/module-cdn-source-dialog'
@@ -126,47 +123,37 @@ export function ModuleEntriesSection({
     }
   }
 
+  const addButton = (
+    <Button size="sm" type="button" onClick={openCreate}>
+      <Plus />
+      Добавить
+    </Button>
+  )
+
   return (
     <>
-      <FrameDataGrid
+      <ModuleEntriesGrid
+        mod={mod}
+        rows={items}
+        communities={communities}
+        isLoading={isLoading}
+        isError={isError}
+        error={error}
+        onRetry={onRetry}
         title={meta.title}
         description={meta.description}
-        actions={
-          <Button size="sm" type="button" onClick={openCreate}>
-            <Plus />
-            Добавить
-          </Button>
-        }
-      >
-        <QueryState
-          data={items}
-          isLoading={isLoading}
-          isError={isError}
-          error={error}
-          empty={items.length === 0}
-          emptyTitle={meta.emptyTitle}
-          emptyDescription={meta.emptyDescription}
-          skeleton={<TableSkeleton rows={5} cols={3} />}
-          onRetry={onRetry}
-        >
-          {(rows) => (
-            <ModuleEntriesGrid
-              mod={mod}
-              rows={rows}
-              communities={communities}
-              isLoading={isLoading}
-              onEdit={(target) => {
-                if (target.kind === 'domain') setEditDomain(target.entry)
-                if (target.kind === 'ip-range') setEditIpRange(target.entry)
-                if (target.kind === 'cdn') setEditCdn(target.entry)
-                if (target.kind === 'as') setEditAs(target.entry)
-                setDialogOpen(true)
-              }}
-              onDelete={setDeleteTarget}
-            />
-          )}
-        </QueryState>
-      </FrameDataGrid>
+        actions={addButton}
+        emptyTitle={meta.emptyTitle}
+        emptyDescription={meta.emptyDescription}
+        onEdit={(target) => {
+          if (target.kind === 'domain') setEditDomain(target.entry)
+          if (target.kind === 'ip-range') setEditIpRange(target.entry)
+          if (target.kind === 'cdn') setEditCdn(target.entry)
+          if (target.kind === 'as') setEditAs(target.entry)
+          setDialogOpen(true)
+        }}
+        onDelete={setDeleteTarget}
+      />
 
       {mod.type === 'DOMAINS' ? (
         <ModuleDomainEntryDialog
diff --git a/apps/web/src/components/modules/modules-list-grid.tsx b/apps/web/src/components/modules/modules-list-grid.tsx
index 69aa2ad..6ab7302 100644
--- a/apps/web/src/components/modules/modules-list-grid.tsx
+++ b/apps/web/src/components/modules/modules-list-grid.tsx
@@ -1,35 +1,91 @@
-import { ColumnDef } from '@tanstack/react-table'
+import { useMemo, useState, type ReactNode } from 'react'
 import { useNavigate } from '@tanstack/react-router'
-import { Boxes } from 'lucide-react'
-import { useMemo } from 'react'
+import { Boxes, SearchIcon } from 'lucide-react'
 
 import { CategoryBadge, ModeBadge } from '@/components/category-badge'
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createTextFilterQuery,
+  renderSingleSelectedLabel,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
 
+const MODULE_TABS = [
+  { id: 'all', label: 'Все' },
+  { id: 'enabled', label: 'Вкл' },
+  { id: 'disabled', label: 'Выкл' },
+]
+
+const TYPE_OPTIONS = [
+  { value: 'AS_PREFIXES', label: moduleTypeRu('AS_PREFIXES') },
+  { value: 'CDN_CIDRS', label: moduleTypeRu('CDN_CIDRS') },
+  { value: 'DOMAINS', label: moduleTypeRu('DOMAINS') },
+  { value: 'IP_RANGES', label: moduleTypeRu('IP_RANGES') },
+]
+
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Название или тип…',
+  },
+  {
+    id: 'type',
+    label: 'Тип',
+    type: 'select',
+    searchable: false,
+    options: TYPE_OPTIONS,
+    renderValue: ({ values }) => renderSingleSelectedLabel(values, TYPE_OPTIONS),
+  },
+]
+
+function getFilterFieldValue(item: ModuleRow, field: string): unknown {
+  switch (field) {
+    case 'search':
+      return `${item.name} ${item.type} ${moduleTypeRu(item.type)} ${item.enabled ? 'включён' : 'выключен'}`
+    case 'type':
+      return item.type
+    default:
+      return undefined
+  }
+}
+
+function tabFilter(item: ModuleRow, tabId: string): boolean {
+  if (tabId === 'enabled') return item.enabled !== false
+  if (tabId === 'disabled') return item.enabled === false
+  return true
+}
+
 export function ModulesListGrid({
   items,
   isLoading = false,
+  title = 'Все модули',
+  actions,
 }: {
   items: ModuleRow[]
   isLoading?: boolean
+  title?: string
+  actions?: ReactNode
 }) {
   const navigate = useNavigate()
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
 
-  const columns = useMemo<ColumnDef<ModuleRow>[]>(
+  const columns = useMemo<DataGridColumnDef<ModuleRow>[]>(
     () => [
       {
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
         cell: ({ row }) => (
-          <div className="flex items-center gap-2">
-            <Boxes className="size-4 shrink-0 text-muted-foreground" />
-            <DataGridPrimaryCell title={row.original.name} accent="primary" className="max-w-[280px]" />
-          </div>
+          <DataGridNameCell icon={Boxes} title={row.original.name} className="max-w-[280px]" />
         ),
         meta: { headerTitle: 'Название' },
       },
@@ -65,34 +121,32 @@ export function ModulesListGrid({
               : '—'}
           </DataGridMutedCell>
         ),
-        sortingFn: (a, b) => {
-          const av = a.original.last_refreshed_at ?? ''
-          const bv = b.original.last_refreshed_at ?? ''
-          return av.localeCompare(bv)
-        },
         meta: { headerTitle: 'Обновлено' },
       },
     ],
     [],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) => `${row.name} ${row.type} ${row.enabled ? 'включён' : 'выключен'}`,
-    getRowId: (row) => row.id,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title={title}
+      description="Маршрутные списки"
+      tabs={MODULE_TABS}
+      tabFilter={tabFilter}
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={getFilterFieldValue}
+      columns={columns}
+      data={items}
+      getRowId={(row) => row.id}
       isLoading={isLoading}
-      emptyMessage="Нет модулей"
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск модулей…"
-      onRowClick={(row) => void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })}
+      primaryAction={actions}
+      onRowClick={(row) =>
+        void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })
+      }
+      emptyState={{ title: 'Нет модулей' }}
     />
   )
 }
diff --git a/apps/web/src/components/monitoring/monitoring-ready-grid.tsx b/apps/web/src/components/monitoring/monitoring-ready-grid.tsx
index f4c140d..4d50e68 100644
--- a/apps/web/src/components/monitoring/monitoring-ready-grid.tsx
+++ b/apps/web/src/components/monitoring/monitoring-ready-grid.tsx
@@ -1,12 +1,10 @@
-import { ColumnDef } from '@tanstack/react-table'
 import { Database, HardDrive, HeartPulse, ListTodo, ShieldCheck } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridNameCell } from '@/components/data-grid-cell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import { FrameDataGrid, type DataGridColumnDef } from '@/components/reui-kit'
 import {
   isReadyCheckOk,
   isSystemReady,
@@ -14,8 +12,6 @@ import {
 } from '@/lib/metrics'
 import { readyCheckRu } from '@/lib/ui-labels'
 import type { ReadyStatus } from '@/queries/monitoring'
-import { Item, ItemMedia } from '@evobgp/ui/components/item'
-import { cn } from '@evobgp/ui/lib/utils'
 
 const READY_CHECK_ICONS: Record<string, typeof Database> = {
   postgres: Database,
@@ -79,32 +75,19 @@ export function MonitoringReadyGrid({
     return rows
   }, [health?.ok, ready.checks, ready.status])
 
-  const columns = useMemo<ColumnDef<ReadyCheckRow>[]>(
+  const columns = useMemo<DataGridColumnDef<ReadyCheckRow>[]>(
     () => [
       {
         accessorKey: 'label',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Проверка" />,
-        cell: ({ row }) => {
-          const Icon = row.original.icon
-          return (
-            <div className="flex min-w-0 items-center gap-2.5 py-0.5">
-              <Item
-                className={cn(
-                  'border-background bg-muted flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-3.5',
-                  row.original.iconClassName,
-                )}
-              >
-                <ItemMedia variant="icon" className="size-auto">
-                  <Icon />
-                </ItemMedia>
-              </Item>
-              <DataGridPrimaryCell
-                title={row.original.label}
-                subtitle={row.original.subtitle}
-              />
-            </div>
-          )
-        },
+        cell: ({ row }) => (
+          <DataGridNameCell
+            icon={row.original.icon}
+            title={row.original.label}
+            subtitle={row.original.subtitle}
+            iconClassName={row.original.iconClassName}
+          />
+        ),
         meta: { headerTitle: 'Проверка' },
       },
       {
@@ -112,9 +95,7 @@ export function MonitoringReadyGrid({
         enableSorting: false,
         header: 'Статус',
         cell: ({ row }) => (
-          <div className="flex justify-start">
-            <StatusBadge status={row.original.status} label={row.original.statusLabel} />
-          </div>
+          <StatusBadge status={row.original.status} label={row.original.statusLabel} />
         ),
         meta: { headerTitle: 'Статус' },
       },
@@ -122,23 +103,15 @@ export function MonitoringReadyGrid({
     [],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data,
-    columns,
-    getSearchText: (row) => `${row.label} ${row.subtitle ?? ''} ${row.statusLabel}`,
-    getRowId: (row) => row.id,
-    pageSize: 20,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
-      showPagination={false}
-      emptyMessage="Нет проверок"
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск проверок…"
+    <FrameDataGrid
+      title="Доступность и готовность"
+      description="Проверки живучести и готовности (/v1/health, /v1/ready)"
+      columns={columns}
+      data={data}
+      rowId={(row) => row.id}
+      emptyTitle="Нет проверок"
+      pagination={false}
     />
   )
 }
diff --git a/apps/web/src/components/network/network-discovered-peers-card.tsx b/apps/web/src/components/network/network-discovered-peers-card.tsx
index 569d311..8296edf 100644
--- a/apps/web/src/components/network/network-discovered-peers-card.tsx
+++ b/apps/web/src/components/network/network-discovered-peers-card.tsx
@@ -1,24 +1,23 @@
 import { useMemo, useState } from 'react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { CheckIcon, SearchIcon, XIcon } from 'lucide-react'
+import { CheckIcon, Network, SearchIcon, XIcon } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridMonoCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
 import {
-  createFilter,
-  type Filter,
-  type FilterFieldConfig,
-} from '@/components/reui/filters'
-import { ResourcePage } from '@/components/reui-kit'
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { bgpSessionStateRu } from '@/lib/ui-labels'
 import {
   useApproveDiscoveredPeerMutation,
@@ -40,17 +39,12 @@ function speakerLabel(s: SpeakerRow): string {
   return s.agent_domain ?? s.endpoint ?? `${s.id.slice(0, 8)}…`
 }
 
-function createDefaultFilters(): Filter[] {
-  return [createFilter('neighbor', 'contains', [''])]
-}
-
-const filterFields: FilterFieldConfig[] = [
+const filterFields: FilterField[] = [
   {
-    key: 'neighbor',
+    id: 'neighbor',
     label: 'Сосед',
     icon: <SearchIcon className="size-3.5" aria-hidden />,
     type: 'text',
-    className: 'w-48',
     placeholder: 'IP или ID соседа…',
   },
 ]
@@ -74,7 +68,9 @@ export function NetworkDiscoveredPeersCard({
 }: NetworkDiscoveredPeersCardProps) {
   const approveMutation = useApproveDiscoveredPeerMutation()
   const rejectMutation = useRejectDiscoveredPeerMutation()
-  const [filters, setFilters] = useState<Filter[]>(createDefaultFilters)
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('neighbor'),
+  )
   const [approveTarget, setApproveTarget] = useState<PeerDiscoveryRow | null>(null)
   const [rejectTarget, setRejectTarget] = useState<PeerDiscoveryRow | null>(null)
   const [name, setName] = useState('')
@@ -88,7 +84,7 @@ export function NetworkDiscoveredPeersCard({
     [speakers],
   )
 
-  const columns = useMemo<ColumnDef<PeerDiscoveryRow, unknown>[]>(
+  const columns = useMemo<DataGridColumnDef<PeerDiscoveryRow>[]>(
     () => [
       {
         id: 'neighbor_id',
@@ -97,10 +93,10 @@ export function NetworkDiscoveredPeersCard({
           <DataGridColumnHeader column={column} title="ID соседа" />
         ),
         cell: ({ row }) => (
-          <DataGridPrimaryCell
+          <DataGridNameCell
+            icon={Network}
             title={row.original.neighbor_id || '—'}
             subtitle={row.original.neighbor}
-            accent="mono"
           />
         ),
         meta: { headerTitle: 'ID соседа' },
@@ -109,7 +105,7 @@ export function NetworkDiscoveredPeersCard({
         accessorKey: 'remote_asn',
         header: ({ column }) => <DataGridColumnHeader column={column} title="ASN" />,
         cell: ({ row }) => (
-          <span className="font-mono text-xs">{row.original.remote_asn || '—'}</span>
+          <DataGridMonoCell className="text-xs">{row.original.remote_asn || '—'}</DataGridMonoCell>
         ),
         meta: { headerTitle: 'ASN' },
       },
@@ -186,9 +182,9 @@ export function NetworkDiscoveredPeersCard({
         title="На одобрение"
         description="Новые BGP-клиенты, подключившиеся к dynamic listener (карантин без export)"
         filterFields={filterFields}
-        filters={filters}
-        onFiltersChange={setFilters}
-        onClearFilters={() => setFilters(createDefaultFilters())}
+        filterQuery={filterQuery}
+        onFilterQueryChange={setFilterQuery}
+        onClearFilters={() => setFilterQuery(createTextFilterQuery('neighbor'))}
         getFilterFieldValue={getFilterFieldValue}
         columns={columns}
         data={items}
@@ -197,6 +193,7 @@ export function NetworkDiscoveredPeersCard({
         isError={isError}
         error={error instanceof Error ? error : null}
         onRetry={onRetry}
+        pinLastColumn
         emptyState={{
           title: 'Нет ожидающих пиров',
           description:
diff --git a/apps/web/src/components/network/network-peers-card.tsx b/apps/web/src/components/network/network-peers-card.tsx
index a7ca332..1dd077f 100644
--- a/apps/web/src/components/network/network-peers-card.tsx
+++ b/apps/web/src/components/network/network-peers-card.tsx
@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react'
-import type { ColumnDef } from '@tanstack/react-table'
 import { Plus, SearchIcon, ActivityIcon, Trash2 } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
@@ -11,12 +10,13 @@ import {
   peerColumns,
   peerTabFilter,
 } from '@/components/network/network-peers-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
 import {
-  createFilter,
-  type Filter,
-  type FilterFieldConfig,
-} from '@/components/reui/filters'
-import { ResourcePage, renderSingleSelectedLabel } from '@/components/reui-kit'
+  ResourcePage,
+  createTextFilterQuery,
+  renderSingleSelectedLabel,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { useDeletePeerMutation } from '@/queries/network'
 import type { PeerRow, SpeakerRow } from '@/types/api'
 
@@ -46,37 +46,29 @@ const SESSION_STATE_OPTIONS = [
   { value: 'OpenConfirm', label: 'Open подтверждён' },
 ]
 
-function createDefaultPeerFilters(): Filter[] {
-  return [createFilter('name', 'contains', [''])]
-}
-
-const peerFilterFields: FilterFieldConfig[] = [
+const peerFilterFields: FilterField[] = [
   {
-    key: 'name',
+    id: 'name',
     label: 'Имя',
     icon: <SearchIcon className="size-3.5" aria-hidden />,
     type: 'text',
-    className: 'w-48',
     placeholder: 'Поиск по имени…',
   },
   {
-    key: 'neighbor',
+    id: 'neighbor',
     label: 'Сосед',
     icon: <SearchIcon className="size-3.5" aria-hidden />,
     type: 'text',
-    className: 'w-48',
     placeholder: 'Адрес соседа…',
   },
   {
-    key: 'session_state',
+    id: 'session_state',
     label: 'Состояние',
     icon: <ActivityIcon className="size-3.5" aria-hidden />,
     type: 'select',
     searchable: false,
-    className: 'w-[160px]',
     options: SESSION_STATE_OPTIONS,
-    customValueRenderer: (values) =>
-      renderSingleSelectedLabel(values, SESSION_STATE_OPTIONS),
+    renderValue: ({ values }) => renderSingleSelectedLabel(values, SESSION_STATE_OPTIONS),
   },
 ]
 
@@ -100,7 +92,7 @@ export function NetworkPeersCard({
   const deleteMutation = useDeletePeerMutation()
   const [dialogOpen, setDialogOpen] = useState(false)
   const [deleteTarget, setDeleteTarget] = useState<PeerRow | null>(null)
-  const [filters, setFilters] = useState<Filter[]>(createDefaultPeerFilters)
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() => createTextFilterQuery('name'))
 
   const addButton = useMemo(
     () => (
@@ -112,7 +104,7 @@ export function NetworkPeersCard({
     [],
   )
 
-  const columns = useMemo<ColumnDef<PeerRow, unknown>[]>(
+  const columns = useMemo<DataGridColumnDef<PeerRow>[]>(
     () => [
       ...peerColumns,
       {
@@ -147,9 +139,9 @@ export function NetworkPeersCard({
         tabs={PEER_TABS}
         tabFilter={peerTabFilter}
         filterFields={peerFilterFields}
-        filters={filters}
-        onFiltersChange={setFilters}
-        onClearFilters={() => setFilters(createDefaultPeerFilters())}
+        filterQuery={filterQuery}
+        onFilterQueryChange={setFilterQuery}
+        onClearFilters={() => setFilterQuery(createTextFilterQuery('name'))}
         getFilterFieldValue={getPeerFilterFieldValue}
         columns={columns}
         data={items}
@@ -159,6 +151,7 @@ export function NetworkPeersCard({
         error={error instanceof Error ? error : null}
         onRetry={onRetry}
         primaryAction={addButton}
+        pinLastColumn
         emptyState={{
           title: 'Нет пиров',
           description: 'Добавьте первого BGP-соседа.',
diff --git a/apps/web/src/components/network/network-peers-grid.tsx b/apps/web/src/components/network/network-peers-grid.tsx
index f064bf8..f467cf7 100644
--- a/apps/web/src/components/network/network-peers-grid.tsx
+++ b/apps/web/src/components/network/network-peers-grid.tsx
@@ -1,22 +1,23 @@
-import type { ColumnDef } from '@tanstack/react-table'
+import { Share2 } from 'lucide-react'
 
 import { CategoryBadge } from '@/components/category-badge'
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridMonoCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import type { DataGridColumnDef } from '@/components/reui-kit'
 import { bgpSessionStateRu } from '@/lib/ui-labels'
 import type { PeerRow } from '@/types/api'
 
-export const peerColumns: ColumnDef<PeerRow, unknown>[] = [
+export const peerColumns: DataGridColumnDef<PeerRow>[] = [
   {
     id: 'name',
     accessorFn: (row) => row.name ?? row.neighbor,
     header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
     cell: ({ row }) => (
-      <DataGridPrimaryCell
+      <DataGridNameCell
+        icon={Share2}
         title={row.original.name ?? row.original.neighbor}
         subtitle={row.original.name ? row.original.neighbor : undefined}
-        accent="primary"
       />
     ),
     meta: { headerTitle: 'Имя' },
@@ -24,16 +25,14 @@ export const peerColumns: ColumnDef<PeerRow, unknown>[] = [
   {
     accessorKey: 'neighbor',
     header: ({ column }) => <DataGridColumnHeader column={column} title="Адрес соседа" />,
-    cell: ({ row }) => (
-      <DataGridPrimaryCell title={row.original.neighbor} accent="mono" />
-    ),
+    cell: ({ row }) => <DataGridMonoCell>{row.original.neighbor}</DataGridMonoCell>,
     meta: { headerTitle: 'Адрес соседа' },
   },
   {
     accessorKey: 'remote_asn',
     header: ({ column }) => <DataGridColumnHeader column={column} title="ASN" />,
     cell: ({ row }) => (
-      <span className="font-mono text-xs">{row.original.remote_asn ?? '—'}</span>
+      <DataGridMonoCell className="text-xs">{row.original.remote_asn ?? '—'}</DataGridMonoCell>
     ),
     meta: { headerTitle: 'ASN' },
   },
diff --git a/apps/web/src/components/network/network-speakers-card.tsx b/apps/web/src/components/network/network-speakers-card.tsx
index 62c087e..5eae7cf 100644
--- a/apps/web/src/components/network/network-speakers-card.tsx
+++ b/apps/web/src/components/network/network-speakers-card.tsx
@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react'
-import type { ColumnDef } from '@tanstack/react-table'
 import { Plus, SearchIcon, TagIcon, Trash2 } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
@@ -11,12 +10,13 @@ import {
   speakerColumns,
   speakerTabFilter,
 } from '@/components/network/network-speakers-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
 import {
-  createFilter,
-  type Filter,
-  type FilterFieldConfig,
-} from '@/components/reui/filters'
-import { ResourcePage, renderSingleSelectedLabel } from '@/components/reui-kit'
+  ResourcePage,
+  createTextFilterQuery,
+  renderSingleSelectedLabel,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { useDeleteSpeakerMutation } from '@/queries/network'
 import type { SpeakerRow } from '@/types/api'
 
@@ -40,29 +40,22 @@ const ROLE_OPTIONS = [
   { value: 'master', label: 'Мастер' },
 ]
 
-function createDefaultSpeakerFilters(): Filter[] {
-  return [createFilter('endpoint', 'contains', [''])]
-}
-
-const speakerFilterFields: FilterFieldConfig[] = [
+const speakerFilterFields: FilterField[] = [
   {
-    key: 'endpoint',
+    id: 'endpoint',
     label: 'Конечная точка',
     icon: <SearchIcon className="size-3.5" aria-hidden />,
     type: 'text',
-    className: 'w-52',
     placeholder: 'Адрес агента…',
   },
   {
-    key: 'role',
+    id: 'role',
     label: 'Роль',
     icon: <TagIcon className="size-3.5" aria-hidden />,
     type: 'select',
     searchable: false,
-    className: 'w-[140px]',
     options: ROLE_OPTIONS,
-    customValueRenderer: (values) =>
-      renderSingleSelectedLabel(values, ROLE_OPTIONS),
+    renderValue: ({ values }) => renderSingleSelectedLabel(values, ROLE_OPTIONS),
   },
 ]
 
@@ -84,7 +77,9 @@ export function NetworkSpeakersCard({
   const deleteMutation = useDeleteSpeakerMutation()
   const [dialogOpen, setDialogOpen] = useState(false)
   const [deleteTarget, setDeleteTarget] = useState<SpeakerRow | null>(null)
-  const [filters, setFilters] = useState<Filter[]>(createDefaultSpeakerFilters)
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('endpoint'),
+  )
 
   const addButton = useMemo(
     () => (
@@ -96,7 +91,7 @@ export function NetworkSpeakersCard({
     [],
   )
 
-  const columns = useMemo<ColumnDef<SpeakerRow, unknown>[]>(
+  const columns = useMemo<DataGridColumnDef<SpeakerRow>[]>(
     () => [
       ...speakerColumns,
       {
@@ -131,9 +126,9 @@ export function NetworkSpeakersCard({
         tabs={SPEAKER_TABS}
         tabFilter={speakerTabFilter}
         filterFields={speakerFilterFields}
-        filters={filters}
-        onFiltersChange={setFilters}
-        onClearFilters={() => setFilters(createDefaultSpeakerFilters())}
+        filterQuery={filterQuery}
+        onFilterQueryChange={setFilterQuery}
+        onClearFilters={() => setFilterQuery(createTextFilterQuery('endpoint'))}
         getFilterFieldValue={getSpeakerFilterFieldValue}
         columns={columns}
         data={items}
@@ -143,6 +138,7 @@ export function NetworkSpeakersCard({
         error={error instanceof Error ? error : null}
         onRetry={onRetry}
         primaryAction={addButton}
+        pinLastColumn
         emptyState={{
           title: 'Нет спикеров',
           description: 'Добавьте первого BIRD-агента на ноде.',
diff --git a/apps/web/src/components/network/network-speakers-grid.tsx b/apps/web/src/components/network/network-speakers-grid.tsx
index f148302..bdc2770 100644
--- a/apps/web/src/components/network/network-speakers-grid.tsx
+++ b/apps/web/src/components/network/network-speakers-grid.tsx
@@ -1,19 +1,24 @@
-import type { ColumnDef } from '@tanstack/react-table'
+import { ServerCog } from 'lucide-react'
 
 import { CategoryBadge } from '@/components/category-badge'
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { DataGridMonoCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { StatusBadge } from '@/components/status-badge'
 import { Badge } from '@/components/reui/badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import type { DataGridColumnDef } from '@/components/reui-kit'
 import { speakerOnlineLabel, speakerRoleRu } from '@/lib/ui-labels'
 import type { SpeakerRow } from '@/types/api'
 
-export const speakerColumns: ColumnDef<SpeakerRow, unknown>[] = [
+export const speakerColumns: DataGridColumnDef<SpeakerRow>[] = [
   {
     accessorKey: 'endpoint',
     header: ({ column }) => <DataGridColumnHeader column={column} title="Конечная точка" />,
     cell: ({ row }) => (
-      <DataGridPrimaryCell title={row.original.endpoint} accent="mono" />
+      <DataGridNameCell
+        icon={ServerCog}
+        title={row.original.agent_domain ?? row.original.endpoint}
+        subtitle={row.original.agent_domain ? row.original.endpoint : undefined}
+      />
     ),
     meta: { headerTitle: 'Конечная точка' },
   },
@@ -51,9 +56,9 @@ export const speakerColumns: ColumnDef<SpeakerRow, unknown>[] = [
       const live = row.original.live
       if (!live) return '—'
       return (
-        <span className="text-xs">
+        <DataGridMonoCell className="text-xs">
           {live.bgp_established ?? 0} / {live.bgp_sessions_total ?? 0}
-        </span>
+        </DataGridMonoCell>
       )
     },
     meta: { headerTitle: 'BGP' },
@@ -63,7 +68,7 @@ export const speakerColumns: ColumnDef<SpeakerRow, unknown>[] = [
 export function getSpeakerFilterFieldValue(item: SpeakerRow, field: string): unknown {
   switch (field) {
     case 'endpoint':
-      return item.endpoint
+      return `${item.endpoint} ${item.agent_domain ?? ''}`
     case 'role':
       return item.role
     default:
diff --git a/apps/web/src/components/operations/operations-jobs-card.tsx b/apps/web/src/components/operations/operations-jobs-card.tsx
index e2312cf..42c41a9 100644
--- a/apps/web/src/components/operations/operations-jobs-card.tsx
+++ b/apps/web/src/components/operations/operations-jobs-card.tsx
@@ -1,34 +1,18 @@
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
+import { LayoutGrid, Table2 } from 'lucide-react'
 
-import { FrameDataGrid } from '@/components/reui-kit'
 import { OperationsJobsGrid } from '@/components/operations/operations-jobs-grid'
+import { OperationsJobsKanban } from '@/components/operations/operations-jobs-kanban'
 import { QueryState } from '@/components/query-state'
-import { TableSkeleton } from '@/components/skeletons'
-import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import { ToggleGroup, ToggleGroupItem } from '@evobgp/ui/components/toggle-group'
 import type { JobRow } from '@/types/api'
 import type { QueryClient } from '@tanstack/react-query'
 
-type JobTab = 'all' | 'active' | 'failed' | 'succeeded'
-
-function filterJobs(items: JobRow[], tab: JobTab): JobRow[] {
-  if (tab === 'all') return items
-  if (tab === 'active') return items.filter((j) => j.status === 'running' || j.status === 'queued')
-  if (tab === 'failed')
-    return items.filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
-  return items.filter((j) => j.status === 'succeeded')
-}
-
-function tabCounts(items: JobRow[]) {
-  return {
-    all: items.length,
-    active: items.filter((j) => j.status === 'running' || j.status === 'queued').length,
-    failed: items.filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
-      .length,
-    succeeded: items.filter((j) => j.status === 'succeeded').length,
-  }
-}
-
-/** data-grid-filtering-1 style jobs card with status tabs. */
+/**
+ * Jobs ResourcePage + optional Kanban board (не замена грида).
+ * @see https://reui.io/preview/base/data-grid-filtering-2
+ * @see https://reui.io/docs/components/base/kanban
+ */
 export function OperationsJobsCard({
   jobs,
   nameById,
@@ -46,41 +30,54 @@ export function OperationsJobsCard({
   error: unknown
   onRetry: () => void
 }) {
-  const [tab, setTab] = useState<JobTab>('all')
-  const counts = useMemo(() => tabCounts(jobs), [jobs])
-  const filtered = useMemo(() => filterJobs(jobs, tab), [jobs, tab])
+  const [view, setView] = useState<'table' | 'board'>('table')
 
   return (
-    <FrameDataGrid title="Задачи" description="Фильтр по статусу · data-grid-filtering pattern">
-      <div className="px-5 pt-3">
-        <Tabs value={tab} onValueChange={(v) => setTab(v as JobTab)} className="w-full">
-          <TabsList variant="line" className="w-full justify-start gap-6">
-            <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
-            <TabsTrigger value="active">Активные ({counts.active})</TabsTrigger>
-            <TabsTrigger value="succeeded">Успешные ({counts.succeeded})</TabsTrigger>
-            <TabsTrigger value="failed">Ошибки ({counts.failed})</TabsTrigger>
-          </TabsList>
-        </Tabs>
+    <div className="flex flex-col gap-3">
+      <div className="flex justify-end">
+        <ToggleGroup
+          multiple={false}
+          value={[view]}
+          onValueChange={(values) => {
+            const next = values[0]
+            if (next === 'table' || next === 'board') setView(next)
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Вид задач"
+          className="w-fit"
+        >
+          <ToggleGroupItem value="table" aria-label="Таблица">
+            <Table2 className="size-4" />
+            Таблица
+          </ToggleGroupItem>
+          <ToggleGroupItem value="board" aria-label="Доска">
+            <LayoutGrid className="size-4" />
+            Доска
+          </ToggleGroupItem>
+        </ToggleGroup>
       </div>
       <QueryState
-        data={filtered}
+        data={jobs}
         isLoading={isLoading}
         isError={isError}
         error={error}
-        empty={filtered.length === 0}
-        emptyTitle="Нет задач в выборке"
-        skeleton={<TableSkeleton rows={6} cols={5} />}
+        empty={false}
         onRetry={onRetry}
       >
-        {(items) => (
-          <OperationsJobsGrid
-            items={items}
-            nameById={nameById}
-            qc={qc}
-            isLoading={isLoading && items.length > 0}
-          />
-        )}
+        {(items) =>
+          view === 'board' ? (
+            <OperationsJobsKanban items={items} nameById={nameById} />
+          ) : (
+            <OperationsJobsGrid
+              items={items}
+              nameById={nameById}
+              qc={qc}
+              isLoading={isLoading && items.length > 0}
+            />
+          )
+        }
       </QueryState>
-    </FrameDataGrid>
+    </div>
   )
 }
diff --git a/apps/web/src/components/operations/operations-jobs-grid.tsx b/apps/web/src/components/operations/operations-jobs-grid.tsx
index ad8547d..e8d549a 100644
--- a/apps/web/src/components/operations/operations-jobs-grid.tsx
+++ b/apps/web/src/components/operations/operations-jobs-grid.tsx
@@ -1,20 +1,48 @@
-import { ColumnDef } from '@tanstack/react-table'
+import { useMemo, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import { useMemo } from 'react'
+import { ListTodo, SearchIcon } from 'lucide-react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { apiMutate } from '@/lib/api-client'
 import { jobKindRu } from '@/lib/ui-labels'
 import type { JobRow } from '@/types/api'
 import type { QueryClient } from '@tanstack/react-query'
 
+const JOB_TABS = [
+  { id: 'all', label: 'Все' },
+  { id: 'active', label: 'Активные' },
+  { id: 'succeeded', label: 'Успешные' },
+  { id: 'failed', label: 'Ошибки' },
+]
+
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Поиск задач…',
+  },
+]
+
+function tabFilter(item: JobRow, tabId: string): boolean {
+  if (tabId === 'active') return item.status === 'running' || item.status === 'queued'
+  if (tabId === 'failed')
+    return ['failed', 'error', 'cancelled'].includes(item.status.toLowerCase())
+  if (tabId === 'succeeded') return item.status === 'succeeded'
+  return true
+}
+
 export function OperationsJobsGrid({
   items,
   nameById,
@@ -26,6 +54,9 @@ export function OperationsJobsGrid({
   qc: QueryClient
   isLoading?: boolean
 }) {
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
   const cancelMutation = useMutation({
     mutationFn: (jobId: string) => apiMutate(`/v1/jobs/${jobId}/cancel`, 'POST', {}),
     onSuccess: () => {
@@ -35,13 +66,14 @@ export function OperationsJobsGrid({
     onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось отменить'),
   })
 
-  const columns = useMemo<ColumnDef<JobRow>[]>(
+  const columns = useMemo<DataGridColumnDef<JobRow>[]>(
     () => [
       {
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
         cell: ({ row }) => (
-          <DataGridPrimaryCell
+          <DataGridNameCell
+            icon={ListTodo}
             title={jobKindRu(row.original.kind)}
             subtitle={
               row.original.meta?.module_id
@@ -112,27 +144,30 @@ export function OperationsJobsGrid({
     [cancelMutation, nameById],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) => {
-      const moduleName = row.meta?.module_id
-        ? (nameById.get(String(row.meta.module_id)) ?? String(row.meta.module_id))
-        : ''
-      return `${jobKindRu(row.kind)} ${row.status} ${row.job_id} ${moduleName}`
-    },
-    getRowId: (row) => row.job_id,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title="Задачи"
+      description="Фильтр по статусу"
+      tabs={JOB_TABS}
+      tabFilter={tabFilter}
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(item, field) => {
+        if (field !== 'search') return undefined
+        const moduleName = item.meta?.module_id
+          ? (nameById.get(String(item.meta.module_id)) ?? String(item.meta.module_id))
+          : ''
+        return `${jobKindRu(item.kind)} ${item.status} ${item.job_id} ${moduleName}`
+      }}
+      columns={columns}
+      data={items}
+      getRowId={(row) => row.job_id}
       isLoading={isLoading}
-      emptyMessage="Нет задач"
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск задач…"
+      pinLastColumn
+      virtualization={items.length > 80}
+      emptyState={{ title: 'Нет задач' }}
     />
   )
 }
diff --git a/apps/web/src/components/operations/operations-jobs-kanban.tsx b/apps/web/src/components/operations/operations-jobs-kanban.tsx
new file mode 100644
index 0000000..bd98370
--- /dev/null
+++ b/apps/web/src/components/operations/operations-jobs-kanban.tsx
@@ -0,0 +1,113 @@
+import { useMemo } from 'react'
+
+import { DataGridMutedCell } from '@/components/data-grid-cell'
+import { StatusBadge } from '@/components/status-badge'
+import {
+  Kanban,
+  KanbanBoard,
+  KanbanColumn,
+  KanbanColumnContent,
+  KanbanItem,
+} from '@/components/reui/kanban'
+import { Frame, FramePanel } from '@/components/reui/frame'
+import { jobKindRu } from '@/lib/ui-labels'
+import type { JobRow } from '@/types/api'
+
+/**
+ * Operations jobs board view — ReUI Kanban (read-only columns).
+ * @see https://reui.io/docs/components/base/kanban
+ * @see https://reui.io/docs/components/base/frame
+ */
+
+const COLUMN_ORDER = ['queued', 'running', 'succeeded', 'failed'] as const
+
+const COLUMN_LABELS: Record<(typeof COLUMN_ORDER)[number], string> = {
+  queued: 'Очередь',
+  running: 'Выполняются',
+  succeeded: 'Успешные',
+  failed: 'Ошибки',
+}
+
+function columnForStatus(status: string): (typeof COLUMN_ORDER)[number] {
+  const s = status.toLowerCase()
+  if (s === 'queued') return 'queued'
+  if (s === 'running') return 'running'
+  if (s === 'succeeded') return 'succeeded'
+  return 'failed'
+}
+
+function emptyColumns(): Record<string, JobRow[]> {
+  return {
+    queued: [],
+    running: [],
+    succeeded: [],
+    failed: [],
+  }
+}
+
+export function OperationsJobsKanban({
+  items,
+  nameById,
+}: {
+  items: JobRow[]
+  nameById: Map<string, string>
+}) {
+  const columns = useMemo(() => {
+    const next = emptyColumns()
+    for (const job of items) {
+      next[columnForStatus(job.status)].push(job)
+    }
+    return next
+  }, [items])
+
+  return (
+    <Frame dense spacing="sm" className="w-full min-w-0">
+      <FramePanel className="p-4">
+        <Kanban
+          value={columns}
+          onValueChange={() => undefined}
+          getItemValue={(job) => job.job_id}
+        >
+          <KanbanBoard className="grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+            {COLUMN_ORDER.map((columnId) => (
+              <KanbanColumn
+                key={columnId}
+                value={columnId}
+                disabled
+                className="bg-muted/30 flex min-h-40 flex-col gap-3 rounded-lg border p-3"
+              >
+                <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">
+                    {columns[columnId]?.length ?? 0}
+                  </span>
+                </div>
+                <KanbanColumnContent value={columnId}>
+                  {(columns[columnId] ?? []).map((job) => (
+                    <KanbanItem
+                      key={job.job_id}
+                      value={job.job_id}
+                      disabled
+                      className="bg-background flex flex-col gap-1 rounded-md border p-3"
+                    >
+                      <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}
+                    </KanbanItem>
+                  ))}
+                </KanbanColumnContent>
+              </KanbanColumn>
+            ))}
+          </KanbanBoard>
+        </Kanban>
+      </FramePanel>
+    </Frame>
+  )
+}
diff --git a/apps/web/src/components/operations/operations-revisions-grid.tsx b/apps/web/src/components/operations/operations-revisions-grid.tsx
index f7725a3..7da6584 100644
--- a/apps/web/src/components/operations/operations-revisions-grid.tsx
+++ b/apps/web/src/components/operations/operations-revisions-grid.tsx
@@ -1,20 +1,32 @@
-import { ColumnDef } from '@tanstack/react-table'
+import { useMemo, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import { RefreshCw } from 'lucide-react'
-import { useMemo } from 'react'
+import { GitCommitHorizontal, RefreshCw, SearchIcon } from 'lucide-react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { apiMutate } from '@/lib/api-client'
 import type { RevisionRow } from '@/types/api'
 import type { QueryClient } from '@tanstack/react-query'
 
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Поиск ревизий…',
+  },
+]
+
 export function OperationsRevisionsGrid({
   items,
   qc,
@@ -24,6 +36,9 @@ export function OperationsRevisionsGrid({
   qc: QueryClient
   isLoading?: boolean
 }) {
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
   const rollbackMutation = useMutation({
     mutationFn: (id: string) =>
       apiMutate(`/v1/revisions/${id}/rollback`, 'POST', {}).then(() => id),
@@ -34,14 +49,14 @@ export function OperationsRevisionsGrid({
     onError: (e) => toast.error(e instanceof Error ? e.message : 'Не удалось откатить'),
   })
 
-  const columns = useMemo<ColumnDef<RevisionRow>[]>(
+  const columns = useMemo<DataGridColumnDef<RevisionRow>[]>(
     () => [
       {
         id: 'id',
         accessorFn: (row) => row.id,
         header: ({ column }) => <DataGridColumnHeader column={column} title="ID" />,
         cell: ({ row }) => (
-          <DataGridPrimaryCell title={`${row.original.id.slice(0, 12)}…`} accent="mono" />
+          <DataGridNameCell icon={GitCommitHorizontal} title={`${row.original.id.slice(0, 12)}…`} />
         ),
         meta: { headerTitle: 'ID' },
       },
@@ -88,22 +103,21 @@ export function OperationsRevisionsGrid({
     [rollbackMutation],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) => `${row.id} ${row.materialized_prefix_count}`,
-    getRowId: (row) => row.id,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title="История ревизий"
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(item) => `${item.id} ${item.materialized_prefix_count}`}
+      columns={columns}
+      data={items}
+      getRowId={(row) => row.id}
       isLoading={isLoading}
-      emptyMessage="Нет ревизий"
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск ревизий…"
+      pinLastColumn
+      virtualization={items.length > 80}
+      emptyState={{ title: 'Нет ревизий' }}
     />
   )
 }
diff --git a/apps/web/src/components/panel-card.tsx b/apps/web/src/components/panel-card.tsx
index 71d8483..3d7b6bf 100644
--- a/apps/web/src/components/panel-card.tsx
+++ b/apps/web/src/components/panel-card.tsx
@@ -11,8 +11,9 @@ import {
 import { cn } from '@evobgp/ui/lib/utils'
 
 /**
- * Frame shell class constants (legacy Card names kept for DataGridShell / toolbar).
+ * 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'
diff --git a/apps/web/src/components/reui-kit/data-grid-kit-defaults.test.ts b/apps/web/src/components/reui-kit/data-grid-kit-defaults.test.ts
new file mode 100644
index 0000000..b68774f
--- /dev/null
+++ b/apps/web/src/components/reui-kit/data-grid-kit-defaults.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { kitDataGridTableClassNames, kitDataGridTableLayout } from './frame-data-grid'
+
+describe('kitDataGridTableLayout', () => {
+  it('filtering-2 defaults: dense, headerBackground false, width fixed', () => {
+    const layout = kitDataGridTableLayout()
+    expect(layout.dense).toBe(true)
+    expect(layout.headerBackground).toBe(false)
+    expect(layout.width).toBe('fixed')
+    expect(layout.headerSticky).toBe(false)
+    expect('stripped' in layout ? layout.stripped : undefined).toBeUndefined()
+    expect(layout.columnsPinnable).toBe(false)
+  })
+
+  it('kit tableClassNames совпадает с filtering-2 edgeCell', () => {
+    expect(kitDataGridTableClassNames.edgeCell).toBe('first:ps-3 last:pe-3')
+  })
+
+  it('именованные opts: auto + pin', () => {
+    const layout = kitDataGridTableLayout({
+      width: 'auto',
+      columnsPinnable: true,
+    })
+    expect(layout.width).toBe('auto')
+    expect(layout.columnsPinnable).toBe(true)
+    expect(layout.headerBackground).toBe(false)
+  })
+})
diff --git a/apps/web/src/components/reui-kit/expandable-resource-grid.tsx b/apps/web/src/components/reui-kit/expandable-resource-grid.tsx
new file mode 100644
index 0000000..405485f
--- /dev/null
+++ b/apps/web/src/components/reui-kit/expandable-resource-grid.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+import { FrameDataGrid, type FrameDataGridProps } from './frame-data-grid'
+
+/**
+ * Frame + DataGrid with expandable rows.
+ * Preview: https://reui.io/preview/base/components/c-data-grid-8
+ * Docs: https://reui.io/docs/components/base/data-grid
+ */
+export function ExpandableResourceGrid<TData extends object>({
+  expandedContent,
+  getRowCanExpand,
+  ...props
+}: FrameDataGridProps<TData> & {
+  expandedContent: (row: TData) => ReactNode
+  getRowCanExpand?: (row: TData) => boolean
+}) {
+  return (
+    <FrameDataGrid
+      {...props}
+      expandedContent={expandedContent}
+      getRowCanExpand={getRowCanExpand}
+    />
+  )
+}
diff --git a/apps/web/src/components/reui-kit/filter-utils.ts b/apps/web/src/components/reui-kit/filter-utils.ts
index a896d19..9ba7be6 100644
--- a/apps/web/src/components/reui-kit/filter-utils.ts
+++ b/apps/web/src/components/reui-kit/filter-utils.ts
@@ -1,8 +1,18 @@
-import type { Filter } from '@/components/reui/filters'
+import {
+  createFilterQuery,
+  createFilterRule,
+  flattenFilterConditions,
+  type FilterCondition,
+} from '@/components/reui/filters/filters-query'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
 
-export function getActiveFilters(filters: Filter[]) {
+/** Operators that take no value, so an empty `values` list is expected. */
+const VALUELESS_OPERATORS = new Set(['empty', 'not_empty'])
+
+export function getActiveFilters(filters: FilterCondition[]) {
   return filters.filter((filter) => {
-    const { values } = 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
@@ -17,63 +27,110 @@ export function getActiveFilters(filters: Filter[]) {
   })
 }
 
-export function applyFiltersToData<T>(
+function matchesFilterCondition(
+  fieldValue: unknown,
+  operator: string,
+  values: unknown[],
+): boolean {
+  switch (operator) {
+    case 'is':
+    case 'eq':
+      return values.includes(fieldValue)
+    case 'is_not':
+    case 'neq':
+      return !values.includes(fieldValue)
+    case 'is_any_of':
+    case 'has_any_of':
+      return values.some((value) => fieldValue === value)
+    case 'is_none_of':
+    case 'is_not_any_of':
+    case 'has_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
+  }
+}
+
+export function applyFilterConditionsToData<T>(
   data: T[],
-  filters: Filter[],
+  filters: FilterCondition[],
   getFieldValue: (item: T, field: string) => unknown,
 ): T[] {
   const active = getActiveFilters(filters)
   let result = [...data]
 
   for (const filter of active) {
-    const { field, operator, values } = filter
+    const { field, operator, values, negated } = filter
     result = result.filter((item) => {
       const raw = getFieldValue(item, field)
       const fieldValue = raw != null ? raw : ''
-
-      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_not_any_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
-      }
+      const matches = matchesFilterCondition(fieldValue, operator, values)
+      return negated ? !matches : matches
     })
   }
 
   return result
 }
 
+export function applyFiltersToData<T>(
+  data: T[],
+  query: FilterQuery,
+  getFieldValue: (item: T, field: string) => unknown,
+): T[] {
+  return applyFilterConditionsToData(data, flattenFilterConditions(query), getFieldValue)
+}
+
+export function createEmptyFilterQuery(): FilterQuery {
+  return createFilterQuery()
+}
+
+export function createTextFilterQuery(fieldId: string, id = `${fieldId}-1`): FilterQuery {
+  return createFilterQuery([
+    createFilterRule({
+      id,
+      path: [fieldId],
+      operator: 'contains',
+      value: '',
+    }),
+  ])
+}
+
+export function createSearchFilterField(
+  id: string,
+  label: string,
+  placeholder: string,
+): FilterField {
+  return {
+    id,
+    label,
+    type: 'text',
+    placeholder,
+  }
+}
+
 export function renderSelectedCount(values: unknown[]) {
   if (values.length === 0) return 'Выберите…'
   if (values.length > 1) return `${values.length} выбрано`
diff --git a/apps/web/src/components/reui-kit/frame-data-grid.tsx b/apps/web/src/components/reui-kit/frame-data-grid.tsx
index b45da0a..948d4f3 100644
--- a/apps/web/src/components/reui-kit/frame-data-grid.tsx
+++ b/apps/web/src/components/reui-kit/frame-data-grid.tsx
@@ -1,52 +1,461 @@
-import type { ReactNode } from 'react'
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
+import {
+  useTable,
+  type ColumnDef,
+  type ColumnVisibilityState,
+  type ExpandedState,
+  type OnChangeFn,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+} from '@tanstack/react-table'
+import { Columns3Icon } from 'lucide-react'
 
+import { Button } from '@evobgp/ui/components/button'
+import { Separator } from '@evobgp/ui/components/separator'
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+  DataGrid,
+  dataGridFeatures,
+  type DataGridFeatures,
+  type DataGridTableInstance,
+} from '@/components/reui/data-grid/data-grid'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { DataGridColumnVisibility } from '@/components/reui/data-grid/data-grid-column-visibility'
+import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
+import { DataGridScrollArea } from '@/components/reui/data-grid/data-grid-scroll-area'
+import {
+  DataGridTable,
+  DataGridTableRowExpand,
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll,
+} from '@/components/reui/data-grid/data-grid-table'
+import { DataGridTableVirtual } from '@/components/reui/data-grid/data-grid-table-virtual'
 import {
   Frame,
   FrameDescription,
+  FrameFooter,
   FrameHeader,
   FramePanel,
   FrameTitle,
 } from '@/components/reui/frame'
-import { cn } from '@evobgp/ui/lib/utils'
+import { EmptyState } from '@/components/empty-state'
+import { DATA_GRID_PAGINATION_RU } from '@/lib/data-grid-defaults'
+
+export type DataGridColumnDef<TData extends object> = ColumnDef<DataGridFeatures, TData>
 
 /**
- * Frame shell for list/grid sections (replaces DataGridCard Card-named API).
- * @see https://reui.io/preview/base/data-grid-filtering-2
- * @see https://reui.io/docs/components/base/frame
+ * Единый tableLayout для всех ops-гридов.
+ * Visual SoT: установленный data-grid-filtering-2 (`dense: true`, без zebra).
+ * Preview: https://reui.io/preview/base/data-grid-filtering-2
+ * Docs: https://reui.io/docs/components/base/data-grid
  */
-export function FrameDataGrid({
+export function kitDataGridTableLayout(
+  opts: {
+    dense?: boolean
+    width?: 'fixed' | 'auto'
+    columnsPinnable?: boolean
+    columnsVisibility?: boolean
+  } = {},
+) {
+  return {
+    dense: opts.dense ?? true,
+    rowBorder: true,
+    headerSticky: false,
+    headerBackground: false,
+    headerBorder: true,
+    width: opts.width ?? ('fixed' as const),
+    columnsVisibility: opts.columnsVisibility ?? false,
+    columnsResizable: false,
+    columnsPinnable: opts.columnsPinnable ?? false,
+    columnsMovable: false,
+    rowsDraggable: false,
+    rowsPinnable: false,
+  }
+}
+
+/** filtering-2 edge inset — единственный tableClassNames в kit, не в domain. */
+export const kitDataGridTableClassNames = {
+  edgeCell: 'first:ps-3 last:pe-3',
+} as const
+
+function loadStoredColumnVisibility(key: string): ColumnVisibilityState | undefined {
+  try {
+    const raw = localStorage.getItem(key)
+    if (!raw) return undefined
+    return JSON.parse(raw) as ColumnVisibilityState
+  } catch {
+    return undefined
+  }
+}
+
+export { loadStoredColumnVisibility }
+
+function applyColumnPinControls<T extends object>(
+  columns: DataGridColumnDef<T>[],
+  columnPinControls: boolean,
+): DataGridColumnDef<T>[] {
+  return columns.map((col) => {
+    const origHeader = col.header
+    if (typeof origHeader !== 'function') return col
+    return {
+      ...col,
+      header: (ctx) => {
+        const node = origHeader(ctx)
+        if (isValidElement(node) && node.type === DataGridColumnHeader) {
+          return cloneElement(node as ReactElement<{ pinnable?: boolean }>, {
+            pinnable: columnPinControls,
+          })
+        }
+        return node
+      },
+    } as DataGridColumnDef<T>
+  })
+}
+
+export interface FrameDataGridProps<TData extends object> {
+  title?: ReactNode
+  description?: ReactNode
+  actions?: ReactNode
+  columns: DataGridColumnDef<TData>[]
+  data: TData[]
+  rowId?: (row: TData, index: number) => string
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyAction?: ReactNode
+  onRowClick?: (row: TData) => void
+  pagination?: boolean
+  pageSize?: number
+  footerContent?: ReactNode
+  dense?: boolean
+  pinLastColumn?: boolean
+  initialSorting?: SortingState
+  virtualization?: boolean
+  height?: number
+  enableRowSelection?: boolean
+  onRowSelectionChange?: (selectedIds: string[]) => void
+  enableColumnVisibility?: boolean
+  columnVisibility?: ColumnVisibilityState
+  onColumnVisibilityChange?: OnChangeFn<ColumnVisibilityState>
+  columnVisibilityTrigger?: boolean
+  columnVisibilityStorageKey?: string
+  initialColumnVisibility?: ColumnVisibilityState
+  className?: string
+  expandedContent?: (row: TData) => ReactNode
+  getRowCanExpand?: (row: TData) => boolean
+  pinLeftColumnIds?: string[]
+  horizontalScroll?: boolean
+  tableWidth?: 'fixed' | 'auto'
+  columnPinControls?: boolean
+  isLoading?: boolean
+}
+
+function DataGridSectionHeader({
   title,
   description,
   actions,
-  children,
-  className,
 }: {
   title?: ReactNode
   description?: ReactNode
   actions?: ReactNode
-  children: ReactNode
-  className?: string
 }) {
-  const hasHeader = Boolean(title || description || actions)
+  if (!title && !description && !actions) return null
+
   return (
-    <Frame dense spacing="sm" className={cn('w-full min-w-0 gap-0 p-0', className)}>
-      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
-        {hasHeader ? (
-          <FrameHeader className="flex-col items-stretch gap-3 border-b sm:flex-row sm:items-start sm:justify-between">
-            <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>
+    <FrameHeader className="flex-row items-start justify-between gap-3">
+      <div className="flex min-w-0 flex-col gap-px">
+        {title ? <FrameTitle className="text-balance">{title}</FrameTitle> : null}
+        {description ? (
+          <FrameDescription className="text-xs text-pretty">{description}</FrameDescription>
         ) : null}
-        <div className="p-0">{children}</div>
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div>
+      ) : null}
+    </FrameHeader>
+  )
+}
+
+function FrameDataGridBody<TData extends object>({
+  table,
+  data,
+  emptyTitle,
+  onRowClick,
+  dense,
+  virtualization,
+  height,
+  footerContent,
+  showPagination,
+  enableColumnVisibility,
+  columnsPinnable,
+  tableWidth,
+}: {
+  table: DataGridTableInstance<TData>
+  data: TData[]
+  emptyTitle: string
+  onRowClick?: (row: TData) => void
+  dense: boolean
+  virtualization: boolean
+  height: number
+  footerContent?: ReactNode
+  showPagination: boolean
+  enableColumnVisibility: boolean
+  columnsPinnable: boolean
+  tableWidth: 'fixed' | 'auto'
+}) {
+  const tableNode = virtualization ? (
+    <DataGridTableVirtual height={height} footerContent={footerContent} />
+  ) : (
+    <DataGridTable footerContent={footerContent} />
+  )
+
+  return (
+    <DataGrid
+      table={table}
+      recordCount={data.length}
+      onRowClick={onRowClick}
+      emptyMessage={emptyTitle}
+      tableLayout={kitDataGridTableLayout({
+        dense,
+        width: tableWidth,
+        columnsPinnable,
+        columnsVisibility: enableColumnVisibility,
+      })}
+      tableClassNames={kitDataGridTableClassNames}
+    >
+      {virtualization ? (
+        <DataGridScrollArea orientation="vertical" style={{ height }}>
+          {tableNode}
+        </DataGridScrollArea>
+      ) : (
+        <DataGridScrollArea>{tableNode}</DataGridScrollArea>
+      )}
+      {showPagination ? (
+        <>
+          <Separator />
+          <FrameFooter>
+            <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
+          </FrameFooter>
+        </>
+      ) : null}
+    </DataGrid>
+  )
+}
+
+export function FrameDataGrid<TData extends object>({
+  title,
+  description,
+  actions,
+  columns,
+  data,
+  rowId,
+  emptyTitle = 'Нет записей',
+  emptyDescription,
+  emptyAction,
+  onRowClick,
+  pagination,
+  pageSize = 10,
+  footerContent,
+  dense = true,
+  pinLastColumn = false,
+  initialSorting,
+  virtualization = false,
+  height = 480,
+  enableRowSelection = false,
+  onRowSelectionChange,
+  enableColumnVisibility = false,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange,
+  columnVisibilityTrigger,
+  columnVisibilityStorageKey,
+  initialColumnVisibility,
+  className,
+  expandedContent,
+  getRowCanExpand,
+  pinLeftColumnIds,
+  tableWidth = 'fixed',
+  columnPinControls = false,
+}: FrameDataGridProps<TData>) {
+  const showPagination = pagination ?? true
+  const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [expanded, setExpanded] = useState<ExpandedState>({})
+  const [paginationState, setPaginationState] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: showPagination ? pageSize : Number.POSITIVE_INFINITY,
+  })
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState<ColumnVisibilityState>(
+    () => {
+      const stored = columnVisibilityStorageKey
+        ? loadStoredColumnVisibility(columnVisibilityStorageKey)
+        : undefined
+      return { ...initialColumnVisibility, ...stored }
+    },
+  )
+
+  const isColumnVisibilityControlled = columnVisibilityProp !== undefined
+  const columnVisibility = isColumnVisibilityControlled
+    ? columnVisibilityProp
+    : internalColumnVisibility
+  const setColumnVisibility: OnChangeFn<ColumnVisibilityState> = isColumnVisibilityControlled
+    ? (onColumnVisibilityChange ?? (() => undefined))
+    : setInternalColumnVisibility
+
+  useEffect(() => {
+    setPaginationState((current) => ({
+      pageIndex: showPagination ? current.pageIndex : 0,
+      pageSize: showPagination ? pageSize : Number.POSITIVE_INFINITY,
+    }))
+  }, [pageSize, showPagination])
+
+  useEffect(() => {
+    if (isColumnVisibilityControlled || !columnVisibilityStorageKey) return
+    localStorage.setItem(columnVisibilityStorageKey, JSON.stringify(columnVisibility))
+  }, [columnVisibility, columnVisibilityStorageKey, isColumnVisibilityControlled])
+
+  const selectColumn: DataGridColumnDef<TData> = {
+    id: 'select',
+    header: () => <DataGridTableRowSelectAll />,
+    cell: ({ row }) => <DataGridTableRowSelect row={row} />,
+    enableSorting: false,
+    enableHiding: false,
+    size: 40,
+    meta: { cellClassName: 'w-10' },
+  }
+
+  const expandColumn: DataGridColumnDef<TData> = {
+    id: 'expand',
+    header: () => null,
+    cell: ({ row }) => <DataGridTableRowExpand row={row} />,
+    enableSorting: false,
+    enableHiding: false,
+    size: 40,
+    meta: {
+      cellClassName: 'w-10',
+      expandedContent,
+    },
+  }
+
+  const tableColumns: DataGridColumnDef<TData>[] = applyColumnPinControls(
+    [
+      ...(expandedContent ? [expandColumn] : []),
+      ...(enableRowSelection ? [selectColumn] : []),
+      ...columns,
+    ],
+    columnPinControls,
+  )
+
+  const lastColId = pinLastColumn ? (tableColumns[tableColumns.length - 1]?.id ?? '') : ''
+  const pinLeft = pinLeftColumnIds ?? []
+  const enablePinning = pinLastColumn || pinLeft.length > 0
+  const columnPinning = {
+    start: pinLeft,
+    end: pinLastColumn && lastColId ? [lastColId] : [],
+  }
+
+  const table = useTable({
+    features: dataGridFeatures,
+    data,
+    columns: tableColumns,
+    state: {
+      sorting,
+      pagination: paginationState,
+      columnVisibility,
+      expanded,
+      ...(enablePinning ? { columnPinning } : {}),
+      ...(enableRowSelection ? { rowSelection } : {}),
+    },
+    onSortingChange: setSorting,
+    onPaginationChange: setPaginationState,
+    onExpandedChange: setExpanded,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: enableRowSelection
+      ? (updater) => {
+          setRowSelection((prev) => {
+            const next = typeof updater === 'function' ? updater(prev) : updater
+            if (onRowSelectionChange && rowId) {
+              const ids = Object.keys(next).filter((k) => next[k])
+              onRowSelectionChange(ids)
+            }
+            return next
+          })
+        }
+      : undefined,
+    initialState: enablePinning ? { columnPinning } : undefined,
+    getRowId: rowId ? (row, index) => rowId(row, index) : undefined,
+    getRowCanExpand: expandedContent
+      ? (row) => (getRowCanExpand ? getRowCanExpand(row.original) : true)
+      : undefined,
+    enableRowSelection,
+    enableHiding: enableColumnVisibility,
+  })
+
+  const showColumnVisibilityTrigger =
+    enableColumnVisibility && (columnVisibilityTrigger ?? true)
+
+  const columnVisibilityAction = showColumnVisibilityTrigger ? (
+    <DataGridColumnVisibility
+      table={table}
+      trigger={
+        <Button variant="ghost" size="sm">
+          <Columns3Icon data-icon="inline-start" />
+          Колонки
+        </Button>
+      }
+    />
+  ) : null
+
+  const headerActions = actions ? (
+    <div className="flex items-center gap-2">
+      {columnVisibilityAction}
+      {actions}
+    </div>
+  ) : (
+    columnVisibilityAction
+  )
+
+  const hasHeader = Boolean(title || description || actions || showColumnVisibilityTrigger)
+
+  if (data.length === 0) {
+    return (
+      <Frame dense variant="default" spacing="sm" className={cn('w-full', className)}>
+        {hasHeader ? (
+          <DataGridSectionHeader title={title} description={description} actions={headerActions} />
+        ) : null}
+        <FramePanel className="flex min-h-72 w-full flex-col items-center justify-center">
+          <EmptyState title={emptyTitle} description={emptyDescription} action={emptyAction} />
+        </FramePanel>
+      </Frame>
+    )
+  }
+
+  return (
+    <Frame dense variant="default" spacing="sm" className={cn('w-full', className)}>
+      {hasHeader ? (
+        <DataGridSectionHeader title={title} description={description} actions={headerActions} />
+      ) : null}
+      <FramePanel className="p-0 shadow-none!">
+        <FrameDataGridBody
+          table={table}
+          data={data}
+          emptyTitle={emptyTitle}
+          onRowClick={onRowClick}
+          dense={dense}
+          virtualization={virtualization}
+          height={height}
+          footerContent={footerContent}
+          showPagination={showPagination}
+          enableColumnVisibility={enableColumnVisibility}
+          columnsPinnable={enablePinning}
+          tableWidth={tableWidth}
+        />
       </FramePanel>
     </Frame>
   )
diff --git a/apps/web/src/components/reui-kit/index.ts b/apps/web/src/components/reui-kit/index.ts
index 8f6b77b..5716b49 100644
--- a/apps/web/src/components/reui-kit/index.ts
+++ b/apps/web/src/components/reui-kit/index.ts
@@ -1,5 +1,9 @@
 export {
   applyFiltersToData,
+  applyFilterConditionsToData,
+  createEmptyFilterQuery,
+  createSearchFilterField,
+  createTextFilterQuery,
   getActiveFilters,
   renderSelectedCount,
   renderSingleSelectedLabel,
@@ -22,6 +26,13 @@ export {
 } from './kpi-stat-grid'
 export { QuickActionGrid, type QuickActionItem } from './quick-action-grid'
 export { OpsDashboard } from './ops-dashboard'
-export { FrameDataGrid } from './frame-data-grid'
+export {
+  FrameDataGrid,
+  kitDataGridTableClassNames,
+  kitDataGridTableLayout,
+  type DataGridColumnDef,
+  type FrameDataGridProps,
+} from './frame-data-grid'
+export { ExpandableResourceGrid } from './expandable-resource-grid'
 export { DetailPanel, type DetailMetricCard } from './detail-panel'
 export { SettingsShell } from './settings-shell'
diff --git a/apps/web/src/components/reui-kit/resource-page.tsx b/apps/web/src/components/reui-kit/resource-page.tsx
index cdc1526..3f71d84 100644
--- a/apps/web/src/components/reui-kit/resource-page.tsx
+++ b/apps/web/src/components/reui-kit/resource-page.tsx
@@ -1,10 +1,6 @@
 import { useCallback, useMemo, useState, type ReactNode } from 'react'
 import {
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
+  useTable,
   type PaginationState,
   type RowSelectionState,
   type SortingState,
@@ -12,16 +8,17 @@ import {
 import { CircleAlertIcon, FilterIcon, FilterXIcon } from 'lucide-react'
 
 import { CountedLineTabs } from '@/components/counted-line-tabs'
+import { EmptyState } from '@/components/empty-state'
 import { Badge } from '@/components/reui/badge'
-import { DataGrid } from '@/components/reui/data-grid/data-grid'
+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,
-  type Filter,
-  type FilterFieldConfig,
-} from '@/components/reui/filters'
+import { Filters } from '@/components/reui/filters/filters'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
 import {
   Frame,
   FrameDescription,
@@ -30,18 +27,20 @@ import {
   FramePanel,
   FrameTitle,
 } from '@/components/reui/frame'
+import { Alert, AlertDescription, AlertTitle } from '@/components/reui/alert'
 import { Button } from '@evobgp/ui/components/button'
 import { Separator } from '@evobgp/ui/components/separator'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from '@/components/reui/alert'
-import { EmptyState } from '@/components/empty-state'
 import { DATA_GRID_PAGINATION_RU } from '@/lib/data-grid-defaults'
-import { FILTERS_I18N_RU } from '@/lib/filters-i18n'
-import { applyFiltersToData } from './filter-utils'
+import { FILTERS_LABELS_RU, FILTERS_OPERATOR_LABELS_RU } from '@/lib/filters-i18n'
+import { applyFiltersToData, createEmptyFilterQuery } from './filter-utils'
+import {
+  FrameDataGrid,
+  kitDataGridTableClassNames,
+  kitDataGridTableLayout,
+  type DataGridColumnDef,
+  type FrameDataGridProps,
+} from './frame-data-grid'
 
 export interface ResourcePageTab {
   id: string
@@ -49,21 +48,44 @@ export interface ResourcePageTab {
   count?: number
 }
 
-export interface ResourcePageProps<T extends object> {
-  title: string
+type SimpleGridPassthrough<T extends object> = Pick<
+  FrameDataGridProps<T>,
+  | 'onRowClick'
+  | 'pagination'
+  | 'footerContent'
+  | 'dense'
+  | 'initialSorting'
+  | 'virtualization'
+  | 'height'
+  | 'onRowSelectionChange'
+  | 'enableColumnVisibility'
+  | 'columnVisibility'
+  | 'onColumnVisibilityChange'
+  | 'columnVisibilityTrigger'
+  | 'columnVisibilityStorageKey'
+  | 'initialColumnVisibility'
+  | 'className'
+  | 'tableWidth'
+  | 'horizontalScroll'
+  | 'pinLeftColumnIds'
+  | 'columnPinControls'
+>
+
+export interface ResourcePageProps<T extends object> extends SimpleGridPassthrough<T> {
+  title?: string
   description?: string
   tabs?: ResourcePageTab[]
   activeTab?: string
   onTabChange?: (tabId: string) => void
   tabFilter?: (item: T, tabId: string) => boolean
-  filterFields: FilterFieldConfig[]
-  filters: Filter[]
-  onFiltersChange: (filters: Filter[]) => void
+  filterFields?: FilterField[]
+  filterQuery?: FilterQuery
+  onFilterQueryChange?: (query: FilterQuery) => void
   onClearFilters?: () => void
-  getFilterFieldValue: (item: T, field: string) => unknown
-  columns: ColumnDef<T, unknown>[]
+  getFilterFieldValue?: (item: T, field: string) => unknown
+  columns: DataGridColumnDef<T>[]
   data: T[]
-  getRowId: (row: T) => string
+  getRowId: (row: T, index?: number) => string
   isLoading?: boolean
   isError?: boolean
   error?: Error | null
@@ -79,6 +101,11 @@ export interface ResourcePageProps<T extends object> {
   }) => ReactNode
   toolbarExtra?: ReactNode
   hideHeader?: boolean
+  pinLastColumn?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyAction?: ReactNode
+  actions?: ReactNode
 }
 
 function ResourcePageSkeleton() {
@@ -100,18 +127,35 @@ function ResourcePageSkeleton() {
   )
 }
 
-export function ResourcePage<T extends object>({
-  title,
+function ResourceLoadError({
+  error,
+  onRetry,
+}: {
+  error?: Error | null
+  onRetry?: () => void
+}) {
+  return (
+    <Alert variant="destructive">
+      <CircleAlertIcon />
+      <AlertTitle>Ошибка загрузки</AlertTitle>
+      <AlertDescription className="flex flex-col gap-2">
+        <span>{error?.message ?? 'Не удалось загрузить данные'}</span>
+        {onRetry ? (
+          <Button type="button" variant="outline" size="sm" onClick={onRetry}>
+            Повторить
+          </Button>
+        ) : null}
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+const noopQueryChange = (_query: FilterQuery) => {}
+const defaultGetFilterFieldValue = (_item: unknown, _field: string) => undefined
+
+function ResourcePageSimple<T extends object>({
+  title = '',
   description,
-  tabs,
-  activeTab: controlledTab,
-  onTabChange,
-  tabFilter,
-  filterFields,
-  filters,
-  onFiltersChange,
-  onClearFilters,
-  getFilterFieldValue,
   columns,
   data,
   getRowId,
@@ -120,15 +164,130 @@ export function ResourcePage<T extends object>({
   error = null,
   onRetry,
   primaryAction,
+  actions,
+  emptyState,
+  emptyTitle,
+  emptyDescription,
+  emptyAction,
+  pageSize = 10,
+  enableRowSelection = false,
+  toolbarExtra,
+  hideHeader = false,
+  pinLastColumn = false,
+  onRowClick,
+  pagination,
+  footerContent,
+  dense,
+  initialSorting,
+  virtualization,
+  height,
+  onRowSelectionChange,
+  enableColumnVisibility,
+  columnVisibility,
+  onColumnVisibilityChange,
+  columnVisibilityTrigger,
+  columnVisibilityStorageKey,
+  initialColumnVisibility,
+  className,
+  tableWidth,
+  horizontalScroll,
+  pinLeftColumnIds,
+  columnPinControls,
+}: ResourcePageProps<T>) {
+  if (isLoading) return <ResourcePageSkeleton />
+  if (isError) return <ResourceLoadError error={error} onRetry={onRetry} />
+
+  const headerActions = primaryAction ?? actions
+  const resolvedEmpty = emptyState ?? (
+    emptyTitle || emptyDescription || emptyAction
+      ? { title: emptyTitle ?? 'Нет записей', description: emptyDescription, action: emptyAction }
+      : undefined
+  )
+
+  return (
+    <div className="w-full">
+      {toolbarExtra ? (
+        <div className="mb-3 flex flex-wrap items-center gap-2">{toolbarExtra}</div>
+      ) : null}
+      <FrameDataGrid
+        title={hideHeader ? undefined : title || undefined}
+        description={hideHeader ? undefined : description}
+        actions={hideHeader ? undefined : headerActions}
+        columns={columns}
+        data={data}
+        rowId={getRowId}
+        emptyTitle={resolvedEmpty?.title}
+        emptyDescription={resolvedEmpty?.description}
+        emptyAction={resolvedEmpty?.action}
+        pinLastColumn={pinLastColumn}
+        pageSize={pageSize}
+        enableRowSelection={enableRowSelection}
+        onRowClick={onRowClick}
+        pagination={pagination}
+        footerContent={footerContent}
+        dense={dense}
+        initialSorting={initialSorting}
+        virtualization={virtualization}
+        height={height}
+        onRowSelectionChange={onRowSelectionChange}
+        enableColumnVisibility={enableColumnVisibility}
+        columnVisibility={columnVisibility}
+        onColumnVisibilityChange={onColumnVisibilityChange}
+        columnVisibilityTrigger={columnVisibilityTrigger}
+        columnVisibilityStorageKey={columnVisibilityStorageKey}
+        initialColumnVisibility={initialColumnVisibility}
+        className={className}
+        tableWidth={tableWidth}
+        horizontalScroll={horizontalScroll}
+        pinLeftColumnIds={pinLeftColumnIds}
+        columnPinControls={columnPinControls}
+      />
+    </div>
+  )
+}
+
+function ResourcePageFiltered<T extends object>({
+  title = '',
+  description,
+  tabs,
+  activeTab: controlledTab,
+  onTabChange,
+  tabFilter,
+  filterFields = [],
+  filterQuery: controlledQuery,
+  onFilterQueryChange = noopQueryChange,
+  onClearFilters,
+  getFilterFieldValue = defaultGetFilterFieldValue as (item: T, field: string) => unknown,
+  columns,
+  data,
+  getRowId,
+  isLoading = false,
+  isError = false,
+  error = null,
+  onRetry,
+  primaryAction,
+  actions,
   emptyState,
   pageSize = 10,
   enableRowSelection = false,
   selectionToolbar,
   toolbarExtra,
   hideHeader = false,
+  pinLastColumn = false,
+  enableColumnVisibility = false,
+  onRowClick,
+  virtualization = false,
+  height = 480,
 }: ResourcePageProps<T>) {
+  const headerActions = primaryAction ?? actions
   const [internalTab, setInternalTab] = useState(tabs?.[0]?.id ?? 'all')
   const activeTab = controlledTab ?? internalTab
+  const showFilters = filterFields.length > 0
+
+  const [internalQuery, setInternalQuery] = useState<FilterQuery>(createEmptyFilterQuery)
+  const isQueryControlled = controlledQuery !== undefined
+  const filterQuery = isQueryControlled ? controlledQuery : internalQuery
+  const setFilterQuery = isQueryControlled ? onFilterQueryChange : setInternalQuery
 
   const [sorting, setSorting] = useState<SortingState>([])
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
@@ -144,25 +303,23 @@ export function ResourcePage<T extends object>({
   }, [])
 
   const filteredData = useMemo(() => {
-    let result = applyFiltersToData(data, filters, getFilterFieldValue)
+    let result = showFilters ? applyFiltersToData(data, filterQuery, getFilterFieldValue) : data
     if (tabs && tabs.length > 0 && tabFilter && activeTab !== 'all') {
       result = result.filter((item) => tabFilter(item, activeTab))
     }
     return result
-  }, [data, filters, getFilterFieldValue, tabs, tabFilter, activeTab])
+  }, [data, filterQuery, getFilterFieldValue, tabs, tabFilter, activeTab, showFilters])
 
   const tabCounts = useMemo(() => {
     if (!tabs?.length || !tabFilter) return {}
-    const base = applyFiltersToData(data, filters, getFilterFieldValue)
+    const base = showFilters ? applyFiltersToData(data, filterQuery, getFilterFieldValue) : data
     const counts: Record<string, number> = {}
     for (const tab of tabs) {
       counts[tab.id] =
-        tab.id === 'all'
-          ? base.length
-          : base.filter((item) => tabFilter(item, tab.id)).length
+        tab.id === 'all' ? base.length : base.filter((item) => tabFilter(item, tab.id)).length
     }
     return counts
-  }, [tabs, tabFilter, data, filters, getFilterFieldValue])
+  }, [tabs, tabFilter, data, filterQuery, getFilterFieldValue, showFilters])
 
   const selectedIds = useMemo(
     () => Object.keys(rowSelection).filter((id) => rowSelection[id]),
@@ -171,22 +328,33 @@ export function ResourcePage<T extends object>({
 
   const selectedCount = selectedIds.length
 
+  const lastColId = pinLastColumn ? (columns[columns.length - 1]?.id ?? '') : ''
+  const enablePinning = Boolean(pinLastColumn && lastColId)
+  const columnPinning = {
+    start: [] as string[],
+    end: enablePinning ? [lastColId] : [],
+  }
+
   const clearSelection = useCallback(() => {
     setRowSelection({})
   }, [])
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
     data: filteredData,
     columns,
-    getRowId,
-    state: { sorting, rowSelection, pagination },
+    getRowId: (row, index) => getRowId(row, index),
+    state: {
+      sorting,
+      rowSelection,
+      pagination,
+      ...(enablePinning ? { columnPinning } : {}),
+    },
+    initialState: enablePinning ? { columnPinning } : undefined,
     enableRowSelection,
     onSortingChange: setSorting,
     onRowSelectionChange: setRowSelection,
     onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
   })
 
   const handleTabChange = useCallback(
@@ -199,17 +367,18 @@ export function ResourcePage<T extends object>({
   )
 
   const handleFiltersChange = useCallback(
-    (next: Filter[]) => {
-      onFiltersChange(next)
+    (next: FilterQuery) => {
+      setFilterQuery(next)
       resetPagination()
     },
-    [onFiltersChange, resetPagination],
+    [setFilterQuery, resetPagination],
   )
 
   const handleClear = useCallback(() => {
     onClearFilters?.()
+    if (!isQueryControlled) setInternalQuery(createEmptyFilterQuery())
     resetPagination()
-  }, [onClearFilters, resetPagination])
+  }, [onClearFilters, isQueryControlled, resetPagination])
 
   const countedTabs = useMemo(
     () =>
@@ -221,38 +390,24 @@ export function ResourcePage<T extends object>({
     [tabs, tabCounts],
   )
 
-  if (isLoading) {
-    return <ResourcePageSkeleton />
-  }
-
-  if (isError) {
-    return (
-      <Alert variant="destructive">
-        <CircleAlertIcon />
-        <AlertTitle>Ошибка загрузки</AlertTitle>
-        <AlertDescription className="flex flex-col gap-2">
-          <span>{error?.message ?? 'Не удалось загрузить данные'}</span>
-          {onRetry ? (
-            <Button type="button" variant="outline" size="sm" onClick={onRetry}>
-              Повторить
-            </Button>
-          ) : null}
-        </AlertDescription>
-      </Alert>
-    )
-  }
+  if (isLoading) return <ResourcePageSkeleton />
+  if (isError) return <ResourceLoadError error={error} onRetry={onRetry} />
 
   if (data.length === 0 && emptyState) {
     return (
-      <EmptyState
-        title={emptyState.title}
-        description={emptyState.description}
-        action={emptyState.action}
-      />
+      <Frame dense spacing="sm" className="w-full">
+        <FramePanel className="flex min-h-[min(28rem,55svh)] w-full flex-col items-center justify-center p-0">
+          <EmptyState
+            title={emptyState.title}
+            description={emptyState.description}
+            action={emptyState.action}
+          />
+        </FramePanel>
+      </Frame>
     )
   }
 
-  const emptyMessage = 'Нет записей по выбранным фильтрам.'
+  const tableNode = <DataGridTable />
 
   return (
     <div className="w-full">
@@ -266,8 +421,15 @@ export function ResourcePage<T extends object>({
       <DataGrid
         table={table}
         recordCount={filteredData.length}
-        emptyMessage={emptyMessage}
-        tableLayout={{ dense: true }}
+        emptyMessage="Нет записей по выбранным фильтрам."
+        onRowClick={onRowClick}
+        tableLayout={kitDataGridTableLayout({
+          dense: true,
+          width: 'fixed',
+          columnsPinnable: enablePinning,
+          columnsVisibility: enableColumnVisibility,
+        })}
+        tableClassNames={kitDataGridTableClassNames}
       >
         <Frame dense variant="default" spacing="sm" className="w-full">
           {!hideHeader ? (
@@ -277,28 +439,20 @@ export function ResourcePage<T extends object>({
                 {description ? (
                   <FrameDescription className="flex flex-wrap items-center gap-1.5 text-xs text-pretty">
                     <span>{description}</span>
-                    <span
-                      className="bg-input size-1 shrink-0 rounded-full"
-                      aria-hidden="true"
-                    />
-                    <span className="tabular-nums">
-                      {filteredData.length} записей
-                    </span>
+                    <span className="bg-input size-1 shrink-0 rounded-full" aria-hidden="true" />
+                    <span className="tabular-nums">{filteredData.length} записей</span>
                     {selectedCount > 0 ? (
                       <>
-                        <span
-                          className="bg-input size-1 shrink-0 rounded-full"
-                          aria-hidden="true"
-                        />
+                        <span className="bg-input size-1 shrink-0 rounded-full" aria-hidden="true" />
                         <span>{selectedCount} выбрано</span>
                       </>
                     ) : null}
                   </FrameDescription>
                 ) : null}
               </div>
-              {primaryAction ? (
+              {headerActions ? (
                 <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-                  {primaryAction}
+                  {headerActions}
                 </div>
               ) : null}
             </FrameHeader>
@@ -318,20 +472,25 @@ export function ResourcePage<T extends object>({
               </>
             ) : null}
 
-            <div className="flex flex-wrap items-center justify-between gap-3 px-(--frame-panel-header-px) py-(--frame-panel-header-py)">
-              <Filters
-                filters={filters}
-                fields={filterFields}
-                onChange={handleFiltersChange}
-                size="default"
-                i18n={FILTERS_I18N_RU}
-                trigger={
-                  <Button type="button" variant="outline" aria-label="Фильтры">
-                    <FilterIcon className="size-4" aria-hidden="true" />
-                    Фильтры
-                  </Button>
-                }
-              />
+            <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 />
+              )}
               <div className="flex flex-wrap items-center justify-end gap-2">
                 {toolbarExtra}
                 {selectedCount > 0 ? (
@@ -339,7 +498,7 @@ export function ResourcePage<T extends object>({
                     {selectedCount} выбрано
                   </Badge>
                 ) : null}
-                {onClearFilters ? (
+                {showFilters ? (
                   <Button type="button" variant="outline" onClick={handleClear}>
                     <FilterXIcon className="size-4" aria-hidden="true" />
                     Сбросить
@@ -350,17 +509,18 @@ export function ResourcePage<T extends object>({
 
             <Separator />
 
-            <DataGridScrollArea>
-              <DataGridTable />
-            </DataGridScrollArea>
+            {virtualization ? (
+              <DataGridScrollArea orientation="vertical" style={{ height }}>
+                {tableNode}
+              </DataGridScrollArea>
+            ) : (
+              <DataGridScrollArea>{tableNode}</DataGridScrollArea>
+            )}
 
             <Separator />
 
             <FrameFooter>
-              <DataGridPagination
-                {...DATA_GRID_PAGINATION_RU}
-                sizes={[5, 10, 20, 50]}
-              />
+              <DataGridPagination {...DATA_GRID_PAGINATION_RU} sizes={[5, 10, 20, 50]} />
             </FrameFooter>
           </FramePanel>
         </Frame>
@@ -368,3 +528,17 @@ export function ResourcePage<T extends object>({
     </div>
   )
 }
+
+/**
+ * Ops list page: Frame + DataGrid (+ optional ReUI Filters / tabs).
+ * Without filterFields/tabs → simple CRUD grid (FrameDataGrid).
+ * Preview: https://reui.io/preview/base/data-grid-filtering-2
+ */
+export function ResourcePage<T extends object>(props: ResourcePageProps<T>) {
+  const showFilters = (props.filterFields?.length ?? 0) > 0
+  const hasTabs = (props.tabs?.length ?? 0) > 0
+  if (!showFilters && !hasTabs) {
+    return <ResourcePageSimple {...props} />
+  }
+  return <ResourcePageFiltered {...props} />
+}
diff --git a/apps/web/src/components/reui-kit/settings-shell.tsx b/apps/web/src/components/reui-kit/settings-shell.tsx
index 01719cd..a0eef02 100644
--- a/apps/web/src/components/reui-kit/settings-shell.tsx
+++ b/apps/web/src/components/reui-kit/settings-shell.tsx
@@ -4,8 +4,9 @@ import { PageShell } from '@/components/page-shell'
 
 /**
  * Settings layout — page chrome only.
- * Side-tab rail lives in `SettingsPageShell` (settings-7 AccountSettings).
- * @see https://reui.io/preview/base/settings-7
+ * Side-tab rail lives in `SettingsPageShell` (settings-3 / settings-16 DNA).
+ * @see https://reui.io/preview/base/settings-3
+ * @see https://reui.io/preview/base/settings-16
  * @see https://reui.io/blocks
  */
 export function SettingsShell() {
diff --git a/apps/web/src/components/reui/autocomplete.tsx b/apps/web/src/components/reui/autocomplete.tsx
index 8ecedb4..ebcc13d 100644
--- a/apps/web/src/components/reui/autocomplete.tsx
+++ b/apps/web/src/components/reui/autocomplete.tsx
@@ -163,7 +163,10 @@ function AutocompleteItem({
     <AutocompletePrimitive.Item
       data-slot="autocomplete-item"
       className={cn(
-        "text-foreground data-highlighted:text-foreground data-highlighted:before:bg-accent gap-1.5 rounded-md px-1.5 py-1 text-sm data-highlighted:before:rounded-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([role=img]):not([class*=text-])]:opacity-60",
+        "text-foreground data-highlighted:text-foreground data-highlighted:before:bg-accent gap-1.5",
+        "rounded-md",
+        "data-highlighted:before:rounded-md",
+        "px-1.5 py-1 text-sm ([class*='size-'])]:size-4 ([class*='size-'])]:size-4 [&_svg:not([class*='size-'])]:size-4 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([role=img]):not([class*=text-])]:opacity-60",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/reui/cascader/cascader-async.tsx b/apps/web/src/components/reui/cascader/cascader-async.tsx
new file mode 100644
index 0000000..a47fd7b
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-async.tsx
@@ -0,0 +1,864 @@
+import * as React from "react"
+import { useCascaderState } from "@/components/reui/cascader/cascader-context"
+import {
+  CASCADER_ROOT_KEY,
+  isCascaderMoreNode,
+} from "@/components/reui/cascader/cascader-lib"
+import type {
+  CascaderIndex,
+  CascaderLoadContext,
+  CascaderLoadReason,
+  CascaderLoadResult,
+  CascaderLoadState,
+  CascaderNode,
+  CascaderSearchContext,
+} from "@/components/reui/cascader/cascader-types"
+
+/**
+ * Async data for the cascader. Loaded pages live in their own store and are
+ * MERGED onto the index built from `items`, never folded into that build:
+ * `items` changes identity on any parent re-render, and folding would discard
+ * every level the user drilled into. Map membership is the load discriminator:
+ * no `states` entry means never fetched, while an entry with no `loading`, no
+ * `error` and no children means empty for real.
+ */
+
+/* -------------------------------------------------------------------------- */
+/*                                    Types                                   */
+/* -------------------------------------------------------------------------- */
+
+/** Fetches one level. `node` is `null` for the root level. */
+export type CascaderGetChildren<T = unknown> = (
+  node: CascaderNode<T> | null,
+  context: CascaderLoadContext
+) =>
+  | CascaderNode<T>[]
+  | CascaderLoadResult<T>
+  | Promise<CascaderNode<T>[] | CascaderLoadResult<T>>
+
+/** Server-side search, replacing the local index scan while the query is set. */
+export type CascaderOnSearch<T = unknown> = (
+  query: string,
+  context: CascaderSearchContext
+) =>
+  | CascaderNode<T>[]
+  | CascaderLoadResult<T>
+  | Promise<CascaderNode<T>[] | CascaderLoadResult<T>>
+
+/** Resolves a selected value to its ancestor chain, root first, node last. */
+export type CascaderResolveValue<T = unknown> = (
+  value: string,
+  context: CascaderLoadContext
+) => CascaderNode<T>[] | Promise<CascaderNode<T>[]>
+
+export interface CascaderLoaderStore<T = unknown> {
+  /** Keyed by LEVEL: a parent's value, or `CASCADER_ROOT_KEY` for the root. */
+  pages: Map<string, CascaderNode<T>[]>
+  states: Map<string, CascaderLoadState>
+  /** Keyed by node value: search hits and resolved selections, level-less. */
+  detached: Map<string, CascaderNode<T>>
+}
+
+export interface UseCascaderLoaderOptions<T = unknown> {
+  /** The index built from `items`, before any pages are merged in. */
+  base: CascaderIndex<T>
+  getChildren?: CascaderGetChildren<T>
+  onSearch?: CascaderOnSearch<T>
+  resolveValue?: CascaderResolveValue<T>
+  /** Milliseconds of quiet before `onSearch` fires. */
+  searchDebounce?: number
+  /** Changing this drops every cached page, state and detached node. */
+  loadKey?: unknown
+  /** Speculatively fetch a branch's children when it is highlighted. */
+  prefetch?: boolean
+  /** Called when a request fails. Never for an aborted or superseded one. */
+  onLoadError?: (
+    error: unknown,
+    context: { parent: string | null; reason: string }
+  ) => void
+  /** Whether the panel is live: the popup is open, or the cascader is inline. */
+  enabled: boolean
+  query: string
+  /** Level keys that are currently on screen. Root is `CASCADER_ROOT_KEY`. */
+  levels: string[]
+  /** The navigation path, handed to `onSearch` as its scope. */
+  path: string[]
+  /** Current selection, for `resolveValue`. */
+  values: string[]
+}
+
+export interface CascaderLoader<T = unknown> {
+  /** Whether a `getChildren` loader is configured at all. */
+  active: boolean
+  store: CascaderLoaderStore<T>
+  states: ReadonlyMap<string, CascaderLoadState>
+  /**
+   * Async search hits, `null` when no `onSearch` is running. EMPTY while the
+   * first request is in flight, so the level behind is not shown as the answer.
+   */
+  searchResults: CascaderNode<T>[] | null
+  searchState: CascaderLoadState | null
+  /**
+   * Fetches a level's FIRST page. No-ops on a `states` entry (in flight,
+   * loaded or failed) or when `items` fills the level; pages are never
+   * consulted, so a `resolveValue` chain still fetches. The level effect fires
+   * only for on-screen levels, so a branch merely PRESSED is asked for by hand.
+   */
+  ensureLevel: (parentKey: string, reason: CascaderLoadReason) => void
+  /** Fetches the next page of a level. No-ops unless one is available. */
+  loadMore: (parentKey: string) => void
+  /** Refires a failed level. No-ops unless that level is in an error state. */
+  retryLevel: (parentKey: string) => void
+  /** Schedules a speculative fetch. Safe to call on every highlight move. */
+  prefetchNode: (node: CascaderNode<T> | null | undefined) => void
+  /**
+   * Evicts ONE level: aborts its request, drops its `states`/`pages` entries
+   * and paging latch, so the level effect refetches it. `null` = root level.
+   */
+  invalidateLevel: (value: string | null) => void
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Constants                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Highlight dwell before `prefetch` fetches: long enough that holding ArrowDown
+ * does not fire a request per row, short enough to beat the ArrowRight press.
+ */
+const PREFETCH_DELAY = 150
+
+/** Request keys for the two non-level requests. Never collide with a value. */
+const SEARCH_KEY = "\u0000search"
+const RESOLVE_PREFIX = "\u0000resolve:"
+
+const NO_STATE: CascaderLoadState = {
+  loading: false,
+  error: false,
+  hasMore: false,
+}
+
+/** Stable empty result, so an idle search never churns the state context. */
+const NO_RESULTS: CascaderNode<never>[] = []
+
+function createStore<T>(): CascaderLoaderStore<T> {
+  return { pages: new Map(), states: new Map(), detached: new Map() }
+}
+
+function sameLoadState(a: CascaderLoadState, b: CascaderLoadState): boolean {
+  return (
+    a.loading === b.loading &&
+    a.error === b.error &&
+    a.hasMore === b.hasMore &&
+    a.cursor === b.cursor
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Store transitions                             */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Copy-on-write, and a NO-OP when nothing changed: the merged index is memoised
+ * on store identity, so a fresh object for an unchanged state would rebuild it.
+ */
+function withLoadState<T>(
+  store: CascaderLoaderStore<T>,
+  key: string,
+  update: (state: CascaderLoadState) => CascaderLoadState
+): CascaderLoaderStore<T> {
+  const current = store.states.get(key) ?? NO_STATE
+  const next = update(current)
+  if (store.states.has(key) && sameLoadState(current, next)) return store
+  const states = new Map(store.states)
+  states.set(key, next)
+  return { pages: store.pages, states, detached: store.detached }
+}
+
+function withPage<T>(
+  store: CascaderLoaderStore<T>,
+  key: string,
+  items: readonly CascaderNode<T>[],
+  options: { append: boolean; hasMore: boolean; cursor?: string }
+): CascaderLoaderStore<T> {
+  // A fresh level REPLACES its page so a `resolveValue` stub can be superseded.
+  const previous = options.append ? (store.pages.get(key) ?? []) : []
+  const seen = new Set(previous.map((node) => node.value))
+  const merged = previous.slice()
+  for (const item of items) {
+    if (seen.has(item.value)) continue
+    seen.add(item.value)
+    merged.push(item)
+  }
+
+  const pages = new Map(store.pages)
+  pages.set(key, merged)
+  const states = new Map(store.states)
+  states.set(key, {
+    loading: false,
+    error: false,
+    hasMore: options.hasMore,
+    cursor: options.cursor,
+  })
+  return { pages, states, detached: store.detached }
+}
+
+function withDetached<T>(
+  store: CascaderLoaderStore<T>,
+  items: readonly CascaderNode<T>[]
+): CascaderLoaderStore<T> {
+  let detached: Map<string, CascaderNode<T>> | null = null
+  for (const item of items) {
+    if (store.detached.get(item.value) === item) continue
+    detached = detached ?? new Map(store.detached)
+    detached.set(item.value, item)
+  }
+  if (!detached) return store
+  return { pages: store.pages, states: store.states, detached }
+}
+
+/**
+ * Places a resolved ancestor chain into `pages`, root first. Writes no
+ * `states`, so those levels still read as unloaded and a drill-in still fetches
+ * for real. Mirrored into `detached` so the trigger keeps its label.
+ */
+function withChain<T>(
+  store: CascaderLoaderStore<T>,
+  chain: readonly CascaderNode<T>[]
+): CascaderLoaderStore<T> {
+  if (chain.length === 0) return store
+  const pages = new Map(store.pages)
+  const detached = new Map(store.detached)
+  let parentKey = CASCADER_ROOT_KEY
+
+  for (const node of chain) {
+    const bucket = pages.get(parentKey)
+    if (!bucket) {
+      pages.set(parentKey, [node])
+    } else if (!bucket.some((entry) => entry.value === node.value)) {
+      pages.set(parentKey, [...bucket, node])
+    }
+    detached.set(node.value, node)
+    parentKey = node.value
+  }
+
+  return { pages, states: store.states, detached }
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Hook                                    */
+/* -------------------------------------------------------------------------- */
+
+interface CascaderLoaderLatest<T> {
+  base: CascaderIndex<T>
+  store: CascaderLoaderStore<T>
+  getChildren?: CascaderGetChildren<T>
+  onSearch?: CascaderOnSearch<T>
+  resolveValue?: CascaderResolveValue<T>
+  onLoadError?: (
+    error: unknown,
+    context: { parent: string | null; reason: string }
+  ) => void
+  prefetch: boolean
+  path: string[]
+}
+
+interface CascaderSearchSlice<T> {
+  query: string
+  results: CascaderNode<T>[]
+  loading: boolean
+  error: boolean
+}
+
+/**
+ * The loader. A SIBLING of the `buildCascaderIndex` memo, never inside it: the
+ * build stays pure in `items`, the merge pure in that build plus this store.
+ */
+export function useCascaderLoader<T = unknown>({
+  base,
+  getChildren,
+  onSearch,
+  resolveValue,
+  searchDebounce = 250,
+  loadKey,
+  prefetch = false,
+  onLoadError,
+  enabled,
+  query,
+  levels,
+  path,
+  values,
+}: UseCascaderLoaderOptions<T>): CascaderLoader<T> {
+  const [store, setStore] = React.useState<CascaderLoaderStore<T>>(createStore)
+  const [search, setSearch] = React.useState<CascaderSearchSlice<T> | null>(
+    null
+  )
+
+  /**
+   * Latest callbacks, WRITTEN IN AN EFFECT: `getChildren` is inline in most
+   * consumers, so closing over it would refire every in-flight request per
+   * re-render. The ref is what keeps the request machinery `[]`-dep. Declared
+   * FIRST, since effects run in declaration order, so the level effect below
+   * already sees the current commit.
+   */
+  const latest = React.useRef<CascaderLoaderLatest<T>>({
+    base,
+    store,
+    getChildren,
+    onSearch,
+    resolveValue,
+    onLoadError,
+    prefetch,
+    path,
+  })
+
+  React.useEffect(() => {
+    latest.current = {
+      base,
+      store,
+      getChildren,
+      onSearch,
+      resolveValue,
+      onLoadError,
+      prefetch,
+      path,
+    }
+  })
+
+  /** One AbortController PER KEY: columns mode runs several levels at once. */
+  const controllers = React.useRef(new Map<string, AbortController>())
+  /** Monotonic per key. The stale guard for out-of-order responses. */
+  const requestIds = React.useRef(new Map<string, number>())
+  /** In-flight `(level, cursor)` signatures, so a duplicate ask is free. */
+  const inflight = React.useRef(new Map<string, string>())
+  /**
+   * The `(child count, cursor)` signature at the last paging fire, per level.
+   * Guards what `hasMore` cannot: a page of zero new items while the server
+   * still says `hasMore`. Cursor is IN the signature because an all-duplicates
+   * page advances it while the count stands still - real progress, which a
+   * count-only latch would brick forever.
+   */
+  const moreLatch = React.useRef(new Map<string, string>())
+  /** Values `resolveValue` has already been asked about, so it asks once. */
+  const attempted = React.useRef(new Set<string>())
+  /** Every node the loader has seen, so a level key can name its own node. */
+  const known = React.useRef(new Map<string, CascaderNode<T>>())
+  const timers = React.useRef<{
+    prefetch: ReturnType<typeof setTimeout> | null
+  }>({ prefetch: null })
+  /** Bumped by a `loadKey` change, so responses from before it are dropped. */
+  const epoch = React.useRef(0)
+
+  const remember = React.useCallback((nodes: readonly CascaderNode<T>[]) => {
+    const map = known.current
+    const walk = (list: readonly CascaderNode<T>[]) => {
+      for (const node of list) {
+        map.set(node.value, node)
+        if (node.children?.length) walk(node.children)
+      }
+    }
+    walk(nodes)
+  }, [])
+
+  const abortKey = React.useCallback((key: string) => {
+    const controller = controllers.current.get(key)
+    if (!controller) return
+    controllers.current.delete(key)
+    inflight.current.delete(key)
+    controller.abort()
+  }, [])
+
+  /* ------------------------------- level load ------------------------------ */
+
+  const runLoad = React.useCallback(
+    (
+      key: string,
+      reason: CascaderLoadReason,
+      cursor: string | undefined,
+      append: boolean
+    ) => {
+      const { getChildren: loader, base: currentBase } = latest.current
+      if (!loader) return
+
+      const signature = `${append ? "1" : "0"}:${cursor ?? ""}`
+      if (inflight.current.get(key) === signature) return
+
+      abortKey(key)
+      const controller = new AbortController()
+      controllers.current.set(key, controller)
+      inflight.current.set(key, signature)
+
+      const requestId = (requestIds.current.get(key) ?? 0) + 1
+      requestIds.current.set(key, requestId)
+      const startEpoch = epoch.current
+
+      const node =
+        key === CASCADER_ROOT_KEY
+          ? null
+          : (currentBase.byValue.get(key) ?? known.current.get(key) ?? null)
+
+      setStore((prev) =>
+        withLoadState(prev, key, (state) => ({
+          ...state,
+          loading: true,
+          error: false,
+        }))
+      )
+
+      const settle = () => {
+        if (inflight.current.get(key) === signature)
+          inflight.current.delete(key)
+        if (controllers.current.get(key) === controller) {
+          controllers.current.delete(key)
+        }
+      }
+
+      const stale = () =>
+        controller.signal.aborted ||
+        startEpoch !== epoch.current ||
+        requestId !== requestIds.current.get(key)
+
+      // `Promise.resolve().then(...)`, not a direct call: it normalises a
+      // SYNCHRONOUS throw into a rejection instead of taking the render down.
+      Promise.resolve()
+        .then(() => loader(node, { signal: controller.signal, cursor, reason }))
+        .then((result) => {
+          settle()
+          if (stale()) return
+          const items = Array.isArray(result) ? result : result.items
+          const nextCursor = Array.isArray(result)
+            ? undefined
+            : result.nextCursor
+          const hasMore = Array.isArray(result)
+            ? false
+            : (result.hasMore ?? nextCursor != null)
+
+          if (!append) moreLatch.current.delete(key)
+          remember(items)
+          setStore((prev) =>
+            withPage(prev, key, items, { append, hasMore, cursor: nextCursor })
+          )
+        })
+        .catch((error: unknown) => {
+          settle()
+          if (stale()) return
+          setStore((prev) =>
+            withLoadState(prev, key, (state) => ({
+              ...state,
+              loading: false,
+              error: true,
+            }))
+          )
+          // Behind the stale guard: an abort is navigation, not a failure.
+          latest.current.onLoadError?.(error, {
+            parent: key === CASCADER_ROOT_KEY ? null : key,
+            reason,
+          })
+        })
+    },
+    [abortKey, remember]
+  )
+
+  const ensureLevel = React.useCallback(
+    (key: string, reason: CascaderLoadReason) => {
+      const {
+        getChildren: loader,
+        store: current,
+        base: index,
+      } = latest.current
+      if (!loader) return
+      if (current.states.has(key)) return
+      // A level `items` already fills is not the loader's business: that is how
+      // a static root plus `getChildren` for the branches works with no flag.
+      if (index.childrenOf.has(key)) return
+      runLoad(key, reason, undefined, false)
+    },
+    [runLoad]
+  )
+
+  const loadMore = React.useCallback(
+    (key: string) => {
+      const { getChildren: loader, store: current } = latest.current
+      if (!loader) return
+      const state = current.states.get(key)
+      if (!state || state.loading || !state.hasMore) return
+
+      const loaded = current.pages.get(key)?.length ?? 0
+      const signature = `${loaded}:${state.cursor ?? ""}`
+      if (moreLatch.current.get(key) === signature) return
+      moreLatch.current.set(key, signature)
+
+      runLoad(key, "more", state.cursor, true)
+    },
+    [runLoad]
+  )
+
+  const retryLevel = React.useCallback(
+    (key: string) => {
+      const { getChildren: loader, store: current } = latest.current
+      if (!loader) return
+      const state = current.states.get(key)
+      if (!state?.error) return
+
+      const loaded = current.pages.get(key)?.length ?? 0
+      // A retry must be able to re-fire the page the latch just blocked.
+      moreLatch.current.delete(key)
+      runLoad(key, "retry", loaded > 0 ? state.cursor : undefined, loaded > 0)
+    },
+    [runLoad]
+  )
+
+  /**
+   * `detached` is deliberately untouched: chains and search hits belong to no
+   * level, and the trigger needs their labels while the new page is in flight.
+   */
+  const invalidateLevel = React.useCallback(
+    (value: string | null) => {
+      const key = value ?? CASCADER_ROOT_KEY
+      abortKey(key)
+      // Bump the id too: a response past its signal check must still be stale.
+      requestIds.current.set(key, (requestIds.current.get(key) ?? 0) + 1)
+      moreLatch.current.delete(key)
+      setStore((prev) => {
+        if (!prev.states.has(key) && !prev.pages.has(key)) return prev
+        const states = new Map(prev.states)
+        states.delete(key)
+        const pages = new Map(prev.pages)
+        pages.delete(key)
+        return { pages, states, detached: prev.detached }
+      })
+    },
+    [abortKey]
+  )
+
+  const prefetchNode = React.useCallback(
+    (node: CascaderNode<T> | null | undefined) => {
+      const {
+        prefetch: on,
+        getChildren: loader,
+        store: current,
+      } = latest.current
+      if (!on || !loader || !node) return
+      if (isCascaderMoreNode(node)) return
+      if (!node.hasChildren) return
+      if (current.states.has(node.value)) return
+
+      const holder = timers.current
+      if (holder.prefetch) clearTimeout(holder.prefetch)
+      // A TIMEOUT, not a direct call: `onItemHighlighted` fires from a layout
+      // effect, where a synchronous setState is a render-phase cascade.
+      holder.prefetch = setTimeout(() => {
+        holder.prefetch = null
+        ensureLevel(node.value, "prefetch")
+      }, PREFETCH_DELAY)
+    },
+    [ensureLevel]
+  )
+
+  /* --------------------------------- search -------------------------------- */
+
+  const runSearch = React.useCallback(
+    (text: string) => {
+      const { onSearch: searcher, path: currentPath } = latest.current
+      if (!searcher) return
+
+      abortKey(SEARCH_KEY)
+      const controller = new AbortController()
+      controllers.current.set(SEARCH_KEY, controller)
+      const requestId = (requestIds.current.get(SEARCH_KEY) ?? 0) + 1
+      requestIds.current.set(SEARCH_KEY, requestId)
+      const startEpoch = epoch.current
+
+      setSearch((prev) => ({
+        query: text,
+        results: prev?.results ?? [],
+        loading: true,
+        error: false,
+      }))
+
+      const settle = () => {
+        if (controllers.current.get(SEARCH_KEY) === controller) {
+          controllers.current.delete(SEARCH_KEY)
+        }
+      }
+      const stale = () =>
+        controller.signal.aborted ||
+        startEpoch !== epoch.current ||
+        requestId !== requestIds.current.get(SEARCH_KEY)
+
+      Promise.resolve()
+        .then(() =>
+          searcher(text, { signal: controller.signal, path: currentPath })
+        )
+        .then((result) => {
+          settle()
+          if (stale()) return
+          const items = Array.isArray(result) ? result : result.items
+          remember(items)
+          // Search hits go to `detached`, never a level: a hit lives anywhere in
+          // the tree, and filing it under the open level would misplace it.
+          setStore((prev) => withDetached(prev, items))
+          setSearch({
+            query: text,
+            results: items,
+            loading: false,
+            error: false,
+          })
+        })
+        .catch((error: unknown) => {
+          settle()
+          if (stale()) return
+          setSearch((prev) => ({
+            query: text,
+            results: prev?.results ?? [],
+            loading: false,
+            error: true,
+          }))
+          latest.current.onLoadError?.(error, {
+            parent: null,
+            reason: "search",
+          })
+        })
+    },
+    [abortKey, remember]
+  )
+
+  /* --------------------------------- resolve ------------------------------- */
+
+  const runResolve = React.useCallback(
+    (value: string) => {
+      const { resolveValue: resolver } = latest.current
+      if (!resolver) return
+
+      const key = `${RESOLVE_PREFIX}${value}`
+      abortKey(key)
+      const controller = new AbortController()
+      controllers.current.set(key, controller)
+      const startEpoch = epoch.current
+
+      const settle = () => {
+        if (controllers.current.get(key) === controller) {
+          controllers.current.delete(key)
+        }
+      }
+
+      Promise.resolve()
+        .then(() =>
+          resolver(value, { signal: controller.signal, reason: "resolve" })
+        )
+        .then((chain) => {
+          settle()
+          if (controller.signal.aborted || startEpoch !== epoch.current) return
+          if (!chain?.length) return
+          remember(chain)
+          setStore((prev) => withChain(prev, chain))
+        })
+        .catch((error: unknown) => {
+          settle()
+          // Un-attempt on failure: `attempted` is written BEFORE the call, so
+          // without this a resolver that failed once could never be retried.
+          attempted.current.delete(value)
+          if (controller.signal.aborted || startEpoch !== epoch.current) return
+          latest.current.onLoadError?.(error, {
+            parent: null,
+            reason: "resolve",
+          })
+        })
+    },
+    [abortKey, remember]
+  )
+
+  /* --------------------------------- resets -------------------------------- */
+
+  const cancelAll = React.useCallback(() => {
+    const keys = Array.from(controllers.current.keys())
+    for (const controller of controllers.current.values()) controller.abort()
+    controllers.current.clear()
+    inflight.current.clear()
+
+    const holder = timers.current
+    if (holder.prefetch) {
+      clearTimeout(holder.prefetch)
+      holder.prefetch = null
+    }
+    if (keys.length === 0) return
+
+    setStore((prev) => {
+      let states: Map<string, CascaderLoadState> | null = null
+      for (const key of keys) {
+        const state = prev.states.get(key)
+        if (!state?.loading) continue
+        states = states ?? new Map(prev.states)
+        if ((prev.pages.get(key)?.length ?? 0) > 0) {
+          states.set(key, { ...state, loading: false })
+        } else {
+          // No entry AT ALL: membership is what says "loaded", so a stranded
+          // `loading: true` would read as loaded-and-empty forever.
+          states.delete(key)
+        }
+      }
+      return states ? { ...prev, states } : prev
+    })
+    setSearch((prev) => (prev?.loading ? { ...prev, loading: false } : prev))
+  }, [])
+
+  // A `loadKey` change drops everything. Declared BEFORE the level effect, so
+  // a reset always lands before the levels are asked for again.
+  const loadKeyRef = React.useRef<{ key: unknown } | null>(null)
+  React.useEffect(() => {
+    const previous = loadKeyRef.current
+    loadKeyRef.current = { key: loadKey }
+    if (!previous || Object.is(previous.key, loadKey)) return
+
+    epoch.current += 1
+    for (const controller of controllers.current.values()) controller.abort()
+    controllers.current.clear()
+    inflight.current.clear()
+    // `requestIds` is deliberately NOT cleared: the ids are stale-response
+    // guards, not cache. Reusing an aborted predecessor's id would leave only
+    // the epoch bump and the abort to reject the old response; monotonic per
+    // key keeps all three guards independent. The unmount cleanup clears them.
+    moreLatch.current.clear()
+    attempted.current.clear()
+    known.current.clear()
+
+    const holder = timers.current
+    if (holder.prefetch) {
+      clearTimeout(holder.prefetch)
+      holder.prefetch = null
+    }
+
+    setStore(createStore)
+    setSearch(null)
+  }, [loadKey])
+
+  // Closing the popup aborts every request but does NOT drop the cache:
+  // reopening onto an already-loaded level is the point of keeping it.
+  React.useEffect(() => {
+    if (enabled) return
+    if (controllers.current.size === 0) return
+    cancelAll()
+  }, [enabled, cancelAll])
+
+  React.useEffect(() => {
+    const active = controllers.current
+    const holder = timers.current
+    const pending = inflight.current
+    const ids = requestIds.current
+    return () => {
+      for (const controller of active.values()) controller.abort()
+      active.clear()
+      // Cleared WITH the controllers, for StrictMode's dev remount: a stale
+      // inflight signature would make `runLoad` skip the refetch forever. The
+      // aborted promises are stale-guarded, so emptying the ids is safe.
+      pending.clear()
+      ids.clear()
+      if (holder.prefetch) clearTimeout(holder.prefetch)
+    }
+  }, [])
+
+  /* ------------------------------- the effects ----------------------------- */
+
+  const hasLoader = typeof getChildren === "function"
+  const hasSearch = typeof onSearch === "function"
+  const hasResolve = typeof resolveValue === "function"
+  const trimmed = query.trim()
+
+  // Serialised so the effects key on CONTENT, not on the array identity.
+  const levelsKey = JSON.stringify(levels)
+  const valuesKey = JSON.stringify(values)
+
+  // THE load trigger: one declarative effect on the levels on screen, not a
+  // call from `pushLevel`/`navigate`, which a controlled `path` never touches.
+  React.useEffect(() => {
+    if (!enabled || !hasLoader) return
+    for (const key of levels) ensureLevel(key, "level")
+    // `levels` enters through `levelsKey`; `store` re-runs after a load lands.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, hasLoader, levelsKey, store, ensureLevel])
+
+  React.useEffect(() => {
+    if (!hasSearch) return undefined
+    if (!enabled || !trimmed) {
+      abortKey(SEARCH_KEY)
+      setSearch((prev) => (prev === null ? prev : null))
+      return undefined
+    }
+    const timer = setTimeout(() => runSearch(trimmed), searchDebounce)
+    return () => {
+      clearTimeout(timer)
+      abortKey(SEARCH_KEY)
+    }
+  }, [hasSearch, enabled, trimmed, searchDebounce, abortKey, runSearch])
+
+  React.useEffect(() => {
+    if (!enabled || !hasResolve) return
+    for (const value of values) {
+      if (!value) continue
+      if (attempted.current.has(value)) continue
+      if (base.byValue.has(value) || known.current.has(value)) continue
+      attempted.current.add(value)
+      runResolve(value)
+    }
+    // `values` is depended on through `valuesKey`.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, hasResolve, valuesKey, base, runResolve])
+
+  /* -------------------------------- the value ------------------------------ */
+
+  const searchResults = React.useMemo(() => {
+    if (!hasSearch || !trimmed) return null
+    if (!search || search.query !== trimmed) {
+      return NO_RESULTS as CascaderNode<T>[]
+    }
+    return search.results
+  }, [hasSearch, trimmed, search])
+
+  const searchState = React.useMemo<CascaderLoadState | null>(() => {
+    if (!hasSearch || !trimmed) return null
+    const settled = search?.query === trimmed
+    return {
+      loading: !settled || !!search?.loading,
+      error: settled && !!search?.error,
+      hasMore: false,
+    }
+  }, [hasSearch, trimmed, search])
+
+  return React.useMemo(
+    () => ({
+      active: hasLoader,
+      store,
+      states: store.states,
+      searchResults,
+      searchState,
+      ensureLevel,
+      loadMore,
+      retryLevel,
+      invalidateLevel,
+      prefetchNode,
+    }),
+    [
+      hasLoader,
+      store,
+      searchResults,
+      searchState,
+      ensureLevel,
+      loadMore,
+      retryLevel,
+      invalidateLevel,
+      prefetchNode,
+    ]
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Consumers                                 */
+/* -------------------------------------------------------------------------- */
+
+/** One level's load state, `null` when never fetched. Omit for the root. */
+export function useCascaderLoadState(
+  parent?: string | null
+): CascaderLoadState | null {
+  const { loadStates } = useCascaderState()
+  return loadStates.get(parent ?? CASCADER_ROOT_KEY) ?? null
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-columns.tsx b/apps/web/src/components/reui/cascader/cascader-columns.tsx
new file mode 100644
index 0000000..f4fcc47
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-columns.tsx
@@ -0,0 +1,263 @@
+"use client"
+
+import * as React from "react"
+import {
+  useCascaderActions,
+  useCascaderState,
+} from "@/components/reui/cascader/cascader-context"
+import type { CascaderColumn } from "@/components/reui/cascader/cascader-context"
+import {
+  CascaderItem,
+  getCascaderMoreProps,
+} from "@/components/reui/cascader/cascader-item"
+import {
+  CASCADER_LIST_HEIGHT_CLASS,
+  CASCADER_LIST_PAD_CLASS,
+  CASCADER_ROOT_KEY,
+  CASCADER_ROWS_CLASS,
+  CASCADER_SCROLL_CLASS,
+  warnCascaderOnce,
+} from "@/components/reui/cascader/cascader-lib"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ScrollArea } from "@evobgp/ui/components/scroll-area"
+import { LoaderCircleIcon } from "lucide-react"
+
+export interface CascaderColumnsProps extends Omit<
+  React.ComponentProps<"div">,
+  "children"
+> {
+  /** Width of each column. */
+  columnWidth?: number | string
+  /** Height CAP per column. Falls back to the root `maxHeight`, then 24rem. */
+  maxHeight?: number | string
+  /** Replaces the default panel; the seam a windowed column plugs into. */
+  children?: (column: CascaderColumn) => React.ReactNode
+}
+
+/**
+ * Miller columns: the open trail side by side, one panel per level. Only the
+ * DEEPEST column is a real listbox (Base UI owns exactly one list); the trail
+ * behind is plain buttons, which keeps one state machine instead of a second,
+ * 2D one. `CascaderInput` moves between columns with ArrowLeft/ArrowRight.
+ */
+function CascaderColumns({
+  className,
+  columnWidth = 220,
+  maxHeight: maxHeightProp,
+  children,
+  ...props
+}: CascaderColumnsProps) {
+  const { maxHeight, mode, labels } = useCascaderActions()
+  const { columns } = useCascaderState()
+
+  // Before the early return, so the hook count is the same in both modes.
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return
+    if (mode === "columns") return
+    warnCascaderOnce(
+      `columns-outside-columns-mode:${mode}`,
+      `\`CascaderColumns\` renders nothing in \`mode="${mode}"\`, so \`columnWidth\` and everything else on it does nothing. Set \`mode="columns"\` on the root, or render \`CascaderList\` instead.`
+    )
+  }, [mode])
+
+  if (mode !== "columns") return null
+
+  const height = maxHeightProp ?? maxHeight
+  const toCss = (value: number | string) =>
+    typeof value === "number" ? `${value}px` : value
+
+  return (
+    <div
+      data-slot="cascader-columns"
+      role="group"
+      aria-label={labels.columnsLabel}
+      style={
+        {
+          "--cascader-column-width": toCss(columnWidth),
+          /* Set only from an EXPLICIT cap: unset means "24rem or what the
+             viewport leaves", via the `min()` fallback on the panel. A `?? 280`
+             default here ignored short viewports and wasted tall ones. */
+          ...(height != null
+            ? { "--cascader-max-height": toCss(height) }
+            : null),
+        } as React.CSSProperties
+      }
+      className={cn(
+        /* `max-h-full` with `min-h-0`: the trail is the panel's shrinking
+           child, and the columns inside it size against this box. */
+        "flex max-h-full min-h-0 items-stretch overflow-x-auto overscroll-x-contain",
+        CASCADER_LIST_PAD_CLASS,
+        className
+      )}
+      {...props}
+    >
+      {columns.map((column) =>
+        children ? (
+          <React.Fragment key={column.depth}>{children(column)}</React.Fragment>
+        ) : (
+          <CascaderColumnPanel key={column.depth} column={column} />
+        )
+      )}
+    </div>
+  )
+}
+
+/**
+ * One column's box. `columnWidth` is the width of the LIST, not the box: under
+ * `border-box` the 1px inline-start divider on every column but the first would
+ * come out of the rows, so bordered columns are widened by that pixel. The box
+ * is also the BOUND, the same `min(--available-height, cap)` the single list
+ * uses, and the `ScrollArea` inside scrolls, so every column shows a thumb.
+ */
+const PANEL_CLASS = `flex w-(--cascader-column-width) shrink-0 flex-col overscroll-contain not-first:w-[calc(var(--cascader-column-width)_+_1px)] not-first:border-border/60 not-first:border-s ${CASCADER_LIST_HEIGHT_CLASS}`
+
+export interface CascaderColumnPanelProps {
+  column: CascaderColumn
+  /** Replaces the panel's rows; the empty state still wins on an empty column. */
+  children?: React.ReactNode
+  /** Containing block for the windowed column's absolutely positioned rows. */
+  virtualized?: boolean
+}
+
+function CascaderColumnPanel({
+  column,
+  children,
+  virtualized,
+}: CascaderColumnPanelProps) {
+  const {
+    labels,
+    baseId,
+    isBranch,
+    isSelectable,
+    isSelected,
+    isIndeterminate,
+    retryLevel,
+  } = useCascaderActions()
+  const { loadStates } = useCascaderState()
+
+  // Keyed per level, not one global flag: columns load and land independently.
+  const columnKey = column.parent?.value ?? CASCADER_ROOT_KEY
+  const loadState = loadStates.get(columnKey)
+
+  let emptyBody: React.ReactNode = labels.empty
+  if (loadState?.error) {
+    emptyBody = (
+      <>
+        {labels.error}{" "}
+        <button
+          type="button"
+          data-slot="cascader-retry"
+          onClick={() => retryLevel(columnKey)}
+          className="text-foreground hover:bg-accent focus-visible:ring-ring/50 rounded-md px-1 font-medium outline-hidden transition-colors focus-visible:ring-2"
+        >
+          {labels.retry}
+        </button>
+      </>
+    )
+  } else if (loadState?.loading) {
+    emptyBody = (
+      <span className="flex items-center gap-1.5">
+        <LoaderCircleIcon className="size-3.5 animate-spin" aria-hidden />
+        {labels.loading}
+      </span>
+    )
+  }
+
+  const rows =
+    column.items.length === 0 ? (
+      <p
+        data-slot="cascader-column-empty"
+        data-state={
+          loadState?.error ? "error" : loadState?.loading ? "loading" : "empty"
+        }
+        className="text-muted-foreground px-2 py-1.5 text-sm"
+      >
+        {emptyBody}
+      </p>
+    ) : (
+      (children ??
+      column.items.map((node, i) => {
+        const open = node.value === column.activeValue
+        return (
+          <CascaderItem
+            key={node.value}
+            node={node}
+            /* A trail row must not compete for `aria-activedescendant`. */
+            as={column.active ? "option" : "button"}
+            depth={column.depth}
+            /* Answered here, not in the row: the trail rows are memoised too. */
+            branch={isBranch(node)}
+            selectable={isSelectable(node)}
+            selected={isSelected(node)}
+            indeterminate={isIndeterminate(node)}
+            {...getCascaderMoreProps(node, loadStates)}
+            data-open={open || undefined}
+            className={open ? "bg-accent/60 text-accent-foreground" : undefined}
+            /* Set metadata is option-only; a trail row is a `role="button"`. */
+            {...(column.active
+              ? {
+                  "aria-setsize": column.items.length,
+                  "aria-posinset": i + 1,
+                }
+              : null)}
+            {...(!column.active && open
+              ? {
+                  "aria-expanded": true,
+                  "aria-controls": `${baseId}-column-${column.depth + 1}`,
+                }
+              : null)}
+          />
+        )
+      }))
+    )
+
+  const shared = {
+    "data-slot": "cascader-column",
+    "data-active": column.active || undefined,
+    "data-depth": column.depth,
+    // Addressable so the opening trail row can point `aria-controls` here, and
+    // named even at the root, which has no parent label to borrow.
+    id: `${baseId}-column-${column.depth}`,
+    "aria-label": column.parent?.label ?? labels.rootLevel,
+    // Conditional spread, never an explicit `undefined`: the active column is a
+    // Base UI element, and its `mergeProps` iterates own keys.
+    ...(virtualized ? { "data-virtualized": true } : null),
+  }
+
+  // A windowed row is absolutely positioned, so the ROWS' box is the containing
+  // block, not the scrollport: it carries the padding the geometry is measured
+  // against.
+  const rowsClass = cn(CASCADER_ROWS_CLASS, virtualized && "relative")
+
+  // The active column IS the Combobox list: only rows inside `Combobox.List`
+  // reach the CompositeList, arrow-key navigation and `aria-activedescendant`.
+  const body = column.active ? (
+    <ComboboxPrimitive.List {...shared} className={rowsClass}>
+      {rows}
+    </ComboboxPrimitive.List>
+  ) : (
+    // A named `group`, not a second listbox competing with the active column.
+    <div {...shared} role="group" className={rowsClass}>
+      {rows}
+    </div>
+  )
+
+  return (
+    <div
+      data-slot="cascader-column-bounds"
+      /* Repeated from `shared`: this box, not the semantic element, owns the
+         width, the divider and the height, so style hooks must reach it, and
+         `:first-child` on the semantic element no longer means "first column"
+         (it is its own scrollport's only child). */
+      data-active={column.active || undefined}
+      data-depth={column.depth}
+      className={PANEL_CLASS}
+    >
+      <ScrollArea className={CASCADER_SCROLL_CLASS}>{body}</ScrollArea>
+    </div>
+  )
+}
+
+export { CascaderColumnPanel, CascaderColumns }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-context.tsx b/apps/web/src/components/reui/cascader/cascader-context.tsx
new file mode 100644
index 0000000..640899e
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-context.tsx
@@ -0,0 +1,316 @@
+"use client"
+
+import * as React from "react"
+import type {
+  CascaderActionItem,
+  CascaderChangeReason,
+  CascaderFlatNode,
+  CascaderIndex,
+  CascaderLabels,
+  CascaderLoadState,
+  CascaderMode,
+  CascaderNode,
+  CascaderSearchScope,
+} from "@/components/reui/cascader/cascader-types"
+
+/**
+ * Four contexts, not one: actions (config and callbacks, near-stable), state
+ * (every keystroke), render (`renderItem` identity) and highlight (every arrow
+ * key and pointer move). One combined context re-rendered every row on every
+ * keystroke, which is what made `React.memo` on the row worth nothing.
+ */
+
+/* -------------------------------------------------------------------------- */
+/*                                Shared types                                */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderColumn<T = unknown> {
+  parent: CascaderNode<T> | null
+  items: CascaderNode<T>[]
+  depth: number
+  /** The node in this column that is drilled into, if any. */
+  activeValue: string | null
+  /** Whether this is the deepest column, the one Base UI owns. */
+  active: boolean
+}
+
+export interface CascaderItemState<T = unknown> {
+  branch: boolean
+  selected: boolean
+  disabled: boolean
+  depth: number
+  count: number
+  /** Ancestor chain, root first. Populated for deep-search rows. */
+  path: CascaderNode<T>[]
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    State                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Everything derived from the query, the path and the selection. One keystroke
+ * rebuilds most of it, so never subscribe to it from a row.
+ */
+export interface CascaderStateContextValue<T = unknown> {
+  /** Same `useMemo` identity as the actions context's `index`. */
+  index: CascaderIndex<T>
+  path: string[]
+  expanded: ReadonlySet<string>
+  query: string
+  currentParent: CascaderNode<T> | null
+  /** Rows for the current level, already filtered. */
+  levelItems: CascaderNode<T>[]
+  deepResults: CascaderNode<T>[] | null
+  /** What `Combobox.Root` is currently rendering, in render order. */
+  renderedItems: CascaderNode<T>[]
+  columns: CascaderColumn<T>[]
+  treeRows: CascaderFlatNode<T>[]
+  selectedValues: string[]
+  /** Selected nodes below each value, at any depth. Absent means zero. */
+  selectedDescendants: ReadonlyMap<string, number>
+  /**
+   * Per level, keyed by parent value or `CASCADER_ROOT_KEY`. MEMBERSHIP is the
+   * discriminator: no entry means never fetched, an entry with no `loading`, no
+   * `error` and no children means fetched and genuinely empty.
+   */
+  loadStates: ReadonlyMap<string, CascaderLoadState>
+  /** Async search, `null` when idle. Separate: a search belongs to no level. */
+  searchState: CascaderLoadState | null
+  announcement: string
+}
+
+const CascaderStateContext = React.createContext<
+  CascaderStateContextValue | undefined
+>(undefined)
+
+/**
+ * One provider serves every `T`, so the context holds an erased `unknown` value
+ * and this cast restores it. The primitive never inspects the payload.
+ */
+export function useCascaderState<T = unknown>(): CascaderStateContextValue<T> {
+  const context = React.useContext(CascaderStateContext)
+  if (!context) {
+    throw new Error("useCascaderState must be used within a Cascader")
+  }
+  return context as unknown as CascaderStateContextValue<T>
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Actions                                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Config and callbacks, slow enough that a memoised row can subscribe: the
+ * mutators are `[]`-dep callbacks over a latest-props ref. The three predicates
+ * are the exception, read DURING RENDER where a ref written in an effect would
+ * return the previous commit's answer, so each is memoised on its own input.
+ */
+export interface CascaderActionsContextValue<T = unknown> {
+  index: CascaderIndex<T>
+  mode: CascaderMode
+  multiple: boolean
+  /** Multi-select only: a commit propagates over the LOADED subtree. */
+  cascade: boolean
+  /** Whether a BRANCH is committable. Per-LIST: the check gutter is a COLUMN. */
+  branchesSelectable: boolean
+  /** Draws the SINGLE-SELECT check and its gutter. Ignored in multi-select. */
+  indicator: boolean
+  expandTrigger?: "click" | "hover"
+  actions: CascaderActionItem[]
+  searchScope: CascaderSearchScope
+  maxHeight?: number | string
+  inline: boolean
+  invalid: boolean
+  /**
+   * Id prefix; columns are `${baseId}-column-${depth}`. The SCHEME is contract:
+   * the filters primitive's `FilterMenuPinKeeper` restores its highlight across
+   * a live re-pin through `${baseId}-column-0` and the `cascader-item` slot.
+   */
+  baseId: string
+  labels: CascaderLabels
+
+  /**
+   * Whether rows are WINDOWED. Also handed to `Combobox.Root`, which is what
+   * makes an explicit row `index` legal: forwarding one while this is false
+   * makes `aria-activedescendant` resolve to nothing. Latched per level.
+   */
+  virtualized: boolean
+  /** Mounts a windowing renderer, returns its unregister. LAYOUT effect only. */
+  registerVirtualRenderer: () => () => void
+  /** The root's `virtualize` prop. `undefined` means "decide by count". */
+  virtualize?: boolean
+  virtualizeThreshold: number
+  estimateRowSize: number
+  overscan: number
+
+  /** Tells "this level is empty" from "not fetched yet" before a load state. */
+  hasLoader: boolean
+  /** Next page of a level. Latched: a page with nothing new is not re-asked. */
+  loadMore: (parentKey: string) => void
+  retryLevel: (parentKey: string) => void
+  /**
+   * Evicts one level's async cache, `null` for the root, so membership reads
+   * never-loaded. A level that is on screen when evicted refetches at once.
+   */
+  invalidateLevel: (value: string | null) => void
+
+  /** Index as of the last commit. Use in the stable callbacks, not `index`. */
+  getIndex: () => CascaderIndex<T>
+  getState: () => CascaderStateContextValue<T>
+  /** Highlighted row or null. A getter: the highlight moves per arrow key. */
+  getHighlighted: () => CascaderNode<T> | null
+
+  setPath: (next: string[] | ((prev: string[]) => string[])) => void
+  pushLevel: (value: string) => void
+  popLevel: () => void
+  goToDepth: (depth: number) => void
+  toggleExpanded: (value: string) => void
+  /**
+   * Registers a footer submenu as open or closed. `Combobox` has no
+   * `FloatingTree`, so one Escape would dismiss the flyout AND the cascader;
+   * the root's `onOpenChange` guard cancels the close while any is open, from a
+   * ref so it reads as of that event without re-rendering the root.
+   */
+  setFlyoutOpen: (key: string, open: boolean) => void
+  hasOpenFlyout: () => boolean
+  setQuery: (next: string) => void
+  /**
+   * Replaces the selection. `onValueChange` diffs it against the current one
+   * for its node and reason; pass `reason` only when the caller knows better.
+   */
+  setSelection: (values: string[], reason?: CascaderChangeReason) => void
+  /** Commits a node, for rows outside the listbox such as ancestor columns. */
+  commit: (node: CascaderNode<T>) => void
+  navigate: (node: CascaderNode<T>) => void
+  /** Into `node` as a child of `depth`, replacing anything deeper. */
+  navigateAt: (node: CascaderNode<T>, depth: number) => void
+  /** Never undefined: falls back to a remembered label, then a synthetic node. */
+  resolveNode: (value: string) => CascaderNode<T>
+  isBranch: (node: CascaderNode<T>) => boolean
+  isSelectable: (node: CascaderNode<T>) => boolean
+  isSelected: (node: CascaderNode<T>) => boolean
+  /** Always `false` without `cascade`: partial selection needs propagation. */
+  isIndeterminate: (node: CascaderNode<T>) => boolean
+  /**
+   * O(1) read of `selectedDescendants`; a memoised row may not subscribe.
+   * Unlike `isIndeterminate` this answers in every mode.
+   */
+  selectedDescendantCount: (node: CascaderNode<T>) => number
+}
+
+const CascaderActionsContext = React.createContext<
+  CascaderActionsContextValue | undefined
+>(undefined)
+
+export function useCascaderActions<
+  T = unknown,
+>(): CascaderActionsContextValue<T> {
+  const context = React.useContext(CascaderActionsContext)
+  if (!context) {
+    throw new Error("useCascaderActions must be used within a Cascader")
+  }
+  return context as unknown as CascaderActionsContextValue<T>
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Render props                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Their own context, republished every render. They cannot ride on the actions
+ * context: an inline closure read off a memoised object is whichever closure
+ * that object captured, so the row would call a stale prop over stale state.
+ */
+export interface CascaderRenderContextValue<T = unknown> {
+  renderItem?: (
+    node: CascaderNode<T>,
+    state: CascaderItemState<T>
+  ) => React.ReactNode
+  renderLabel?: (
+    node: CascaderNode<T>,
+    state: CascaderItemState<T>
+  ) => React.ReactNode
+}
+
+const CascaderRenderContext = React.createContext<CascaderRenderContextValue>(
+  {}
+)
+
+export function useCascaderRender<
+  T = unknown,
+>(): CascaderRenderContextValue<T> {
+  return React.useContext(
+    CascaderRenderContext
+  ) as CascaderRenderContextValue<T>
+}
+
+/* -------------------------------------------------------------------------- */
+/*                               Highlight store                              */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderHighlight {
+  index: number
+  value: string | null
+}
+
+/**
+ * An external store, deliberately NOT React state: `onItemHighlighted` fires on
+ * every arrow key AND every pointer move over the list, so `setState` would
+ * re-render the whole root at mousemove rate. A store re-renders subscribers
+ * only, which inside the primitive is the virtualizer.
+ */
+export interface CascaderHighlightStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  getSnapshot: () => CascaderHighlight
+  set: (next: CascaderHighlight) => void
+}
+
+const NO_HIGHLIGHT: CascaderHighlight = { index: -1, value: null }
+
+export function createCascaderHighlightStore(): CascaderHighlightStore {
+  let snapshot: CascaderHighlight = NO_HIGHLIGHT
+  const listeners = new Set<() => void>()
+
+  return {
+    subscribe(onStoreChange) {
+      listeners.add(onStoreChange)
+      return () => {
+        listeners.delete(onStoreChange)
+      }
+    },
+    // The SAME object until something changes; `useSyncExternalStore` needs it.
+    getSnapshot() {
+      return snapshot
+    },
+    set(next) {
+      if (next.index === snapshot.index && next.value === snapshot.value) return
+      snapshot = next
+      for (const listener of listeners) listener()
+    },
+  }
+}
+
+/** Shared and permanently empty, so the hook degrades outside a `Cascader`. */
+const FALLBACK_HIGHLIGHT_STORE = createCascaderHighlightStore()
+
+const CascaderHighlightContext = React.createContext<CascaderHighlightStore>(
+  FALLBACK_HIGHLIGHT_STORE
+)
+
+/** Subscribes to the highlight. Re-renders ONLY the calling component. */
+export function useCascaderHighlight(): CascaderHighlight {
+  const store = React.useContext(CascaderHighlightContext)
+  return React.useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getSnapshot
+  )
+}
+
+export {
+  CascaderActionsContext,
+  CascaderHighlightContext,
+  CascaderRenderContext,
+  CascaderStateContext,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-footer.tsx b/apps/web/src/components/reui/cascader/cascader-footer.tsx
new file mode 100644
index 0000000..ad366c8
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-footer.tsx
@@ -0,0 +1,731 @@
+import * as React from "react"
+import { useCascaderActions } from "@/components/reui/cascader/cascader-context"
+import {
+  CASCADER_ACTION_CLASS,
+  CascaderGroup,
+  CascaderLabel,
+} from "@/components/reui/cascader/cascader-item"
+import {
+  CASCADER_LIST_PAD_CLASS,
+  getCascaderFooterStops,
+  isCascaderRtl,
+} from "@/components/reui/cascader/cascader-lib"
+import type { CascaderActionItem } from "@/components/reui/cascader/cascader-types"
+import { Popover as PopoverPrimitive } from "@base-ui/react"
+import { useDirection } from "@base-ui/react/direction-provider"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ChevronRightIcon } from "lucide-react"
+
+/**
+ * The pinned footer, and the side-anchored flyout a footer row can open. These
+ * are COMMANDS: nothing here joins the selection, the filter set or the
+ * highlight. The flyout is a Base UI `Popover` rendered as a REACT CHILD of
+ * `Combobox.Popup` with its OWN `Portal` and NO `container`: a nested portal
+ * resolves to the parent portal node, so it is a DOM sibling of the combobox
+ * popup (not clipped, not `aria-hidden`) but a React descendant, which is what
+ * the outside-press and focus-out whitelists read. `Combobox` builds no
+ * `FloatingTree`, so the flyout is not consulted first and one Escape would
+ * dismiss both; hence `CascaderSubmenu` registering with the root to turn one
+ * Escape into two. `Combobox.List` clicks its highlighted row on Enter, hence
+ * the footer sitting outside `CascaderList`. And a `Positioner` throws without
+ * its `Portal`, while `modal` stays `false` on the `Root` so the combobox
+ * keeps its own dismissal behaviour.
+ */
+
+/* -------------------------------------------------------------------------- */
+/*                                   Footer                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Keys the option list acts on, swallowed at the footer boundary. Escape and
+ * Tab are absent on purpose: Escape must reach the root, Tab must keep moving.
+ */
+const FOOTER_SWALLOWED_KEYS = new Set([
+  "Enter",
+  " ",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+])
+
+export type CascaderFooterProps = React.ComponentProps<"div">
+
+/**
+ * Actions pinned below the list, a SIBLING of `CascaderList`. Children win
+ * over the root's `actions` prop; with neither it renders nothing.
+ */
+function CascaderFooter({
+  className,
+  children,
+  onKeyDown,
+  ...props
+}: CascaderFooterProps) {
+  const { actions, labels } = useCascaderActions()
+  const hasChildren = React.Children.count(children) > 0
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(event)
+      if (event.defaultPrevented) return
+      if (!FOOTER_SWALLOWED_KEYS.has(event.key)) return
+      event.stopPropagation()
+
+      // The strip's own vertical movement, and the way back from the list's
+      // hand-off: either end returns focus to the search field, from which
+      // Base UI's empty highlight resumes the list. Down wraps to the FIELD,
+      // not a command (traps the arrows) or a row (no imperative highlight).
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return
+      const footer = event.currentTarget
+      const stops = getCascaderFooterStops(footer)
+      const active = document.activeElement as HTMLElement | null
+      const index = active ? stops.indexOf(active) : -1
+      if (index === -1) return
+      event.preventDefault()
+      const next =
+        event.key === "ArrowDown" ? stops[index + 1] : stops[index - 1]
+      if (next) {
+        next.focus()
+        return
+      }
+      if (event.key === "ArrowUp" && index > 0) return
+      footer
+        .closest<HTMLElement>('[data-slot="cascader-panel"]')
+        ?.querySelector<HTMLElement>('[data-slot="cascader-input"]')
+        ?.focus()
+    },
+    [onKeyDown]
+  )
+
+  if (!hasChildren && actions.length === 0) return null
+
+  return (
+    <div
+      data-slot="cascader-footer"
+      /* Named, not a bare div: without it a screen reader reaches the actions
+         with nothing to say they are not more options. */
+      role="group"
+      aria-label={labels.actionsLabel}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "border-border/60 flex shrink-0 flex-col gap-0.5 border-t",
+        /* The LIST's padding, not a flat `p-1`: with a padding of its own the
+           two columns of text were 2px out in luma and sera and 4px out in
+           lyra. It also gives a separator in here a number to cancel. */
+        CASCADER_LIST_PAD_CLASS,
+        "p-(--cascader-list-pad,4px)",
+        className
+      )}
+      {...props}
+    >
+      {hasChildren ? children : <CascaderFooterActions actions={actions} />}
+    </div>
+  )
+}
+
+function CascaderFooterActions({ actions }: { actions: CascaderActionItem[] }) {
+  return (
+    <>
+      {actions.map((action, i) =>
+        action.items?.length ? (
+          <CascaderSubmenu key={actionKey(action, i)}>
+            <CascaderSubmenuTrigger
+              icon={action.icon}
+              disabled={action.disabled}
+            >
+              {action.label}
+            </CascaderSubmenuTrigger>
+            <CascaderSubmenuContent>
+              <CascaderActionList items={action.items} />
+            </CascaderSubmenuContent>
+          </CascaderSubmenu>
+        ) : (
+          <CascaderAction
+            key={actionKey(action, i)}
+            icon={action.icon}
+            disabled={action.disabled}
+            onSelect={action.onSelect}
+          >
+            {action.label}
+          </CascaderAction>
+        )
+      )}
+    </>
+  )
+}
+
+function actionKey(action: CascaderActionItem, index: number): string {
+  if (action.value != null) return action.value
+  if (typeof action.label === "string") return action.label
+  return String(index)
+}
+
+/**
+ * Consecutive entries sharing a `group`, as runs not buckets: two separated
+ * runs with the same name stay two, so the author's order survives.
+ */
+function groupActionRuns(
+  items: CascaderActionItem[]
+): { group?: string; items: CascaderActionItem[] }[] {
+  const runs: { group?: string; items: CascaderActionItem[] }[] = []
+  for (const item of items) {
+    const last = runs[runs.length - 1]
+    if (last && last.group === item.group) last.items.push(item)
+    else runs.push({ group: item.group, items: [item] })
+  }
+  return runs
+}
+
+/**
+ * Flyout body for a data-driven submenu. A named run becomes a real
+ * `CascaderGroup`; unnamed runs stay unwrapped, as an unnamed group is noise.
+ */
+function CascaderActionList({ items }: { items: CascaderActionItem[] }) {
+  const { close } = useCascaderSubmenu()
+  const runs = React.useMemo(() => groupActionRuns(items), [items])
+
+  const renderAction = (item: CascaderActionItem, i: number) => (
+    <CascaderAction
+      key={actionKey(item, i)}
+      icon={item.icon}
+      disabled={item.disabled}
+      onSelect={() => {
+        item.onSelect?.()
+        /* Closes behind the command, or the entries would read as toggles. */
+        close()
+      }}
+    >
+      {item.label}
+    </CascaderAction>
+  )
+
+  return (
+    <>
+      {runs.map((run, runIndex) =>
+        run.group ? (
+          <CascaderGroup key={`${run.group}-${runIndex}`} className="gap-0.5">
+            <CascaderLabel>{run.group}</CascaderLabel>
+            {run.items.map(renderAction)}
+          </CascaderGroup>
+        ) : (
+          <React.Fragment key={`run-${runIndex}`}>
+            {run.items.map(renderAction)}
+          </React.Fragment>
+        )
+      )}
+    </>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Action                                   */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderActionProps extends Omit<
+  React.ComponentProps<"button">,
+  "onSelect"
+> {
+  icon?: React.ReactNode
+  /** Fires on press, after `onClick`, and not at all when disabled. */
+  onSelect?: () => void
+}
+
+/**
+ * The cascader popup's panel per style, spelled with `style-<name>:` variants
+ * rather than ReUI theme CSS so an installed footer needs only Tailwind.
+ */
+const FLYOUT_SURFACE_CLASS =
+  "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-72 overflow-hidden ring-1 duration-100 ring-foreground/10 shadow-md rounded-lg"
+
+/**
+ * One footer command, shaped like a row and deliberately NOT one. A real
+ * `<button>`, never a `Combobox.Item`: an item would join the arrow-key ring,
+ * appear in `filteredItems`, and vanish the moment a query matched nothing -
+ * exactly when "Create new attribute" is most useful. Disabled is
+ * `aria-disabled`, never the native attribute: that one is not a tab stop and
+ * the panel's Tab order reads `button:not([disabled])`, so a footer whose ONLY
+ * row is a disabled command had no stop after the search field (measured on
+ * `c-cascader-8`). Staying focusable costs the guards below, plus the
+ * greyed-out look: `CASCADER_ACTION_CLASS` keys that off `aria-disabled`
+ * instead of `:disabled`.
+ */
+function CascaderAction({
+  className,
+  icon,
+  children,
+  onSelect,
+  onClick,
+  onKeyDown,
+  disabled,
+  ...props
+}: CascaderActionProps) {
+  // Set by `CascaderSubmenuContent`: a plain button in the footer's Tab ring,
+  // a roving-focus `menuitem` inside a flyout, never both.
+  const inMenu = React.useContext(CascaderMenuContext)
+
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      // Before the consumer's handler: a disabled command runs none of them.
+      if (disabled) {
+        event.preventDefault()
+        return
+      }
+      onClick?.(event)
+      if (event.defaultPrevented) return
+      onSelect?.()
+    },
+    [disabled, onClick, onSelect]
+  )
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (disabled) {
+        // The two keys a `<button>` activates on, and only those.
+        if (event.key === "Enter" || event.key === " ") event.preventDefault()
+        return
+      }
+      onKeyDown?.(event)
+    },
+    [disabled, onKeyDown]
+  )
+
+  return (
+    <button
+      type="button"
+      data-slot="cascader-action"
+      /* Conditional spread: `false` would publish `aria-disabled="false"`. */
+      {...(disabled ? { "aria-disabled": true, "data-disabled": "" } : null)}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      /* Conditional spread, so a consumer's own `role` or `tabIndex` wins. */
+      {...(inMenu ? { role: "menuitem" as const, tabIndex: -1 } : null)}
+      className={cn(CASCADER_ACTION_CLASS, className)}
+      {...props}
+    >
+      {icon ? (
+        <span
+          data-slot="cascader-action-icon"
+          className="text-muted-foreground flex shrink-0 items-center justify-center"
+        >
+          {icon}
+        </span>
+      ) : null}
+      <span className="min-w-0 flex-1 truncate text-start">{children}</span>
+    </button>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Submenu                                   */
+/* -------------------------------------------------------------------------- */
+
+interface CascaderSubmenuContextValue {
+  rowRef: React.RefObject<HTMLButtonElement | null>
+  open: boolean
+  setOpen: (open: boolean) => void
+  close: () => void
+  /** Names the flyout: a menu is labelled by the control that opens it. */
+  triggerId: string
+  /**
+   * Whether the pending open came from the KEYBOARD. Base UI's own `openType`
+   * calls the opening arrow a POINTER open, because the trigger intercepts it
+   * and calls `setOpen` (measured: focus landed on the popup, not the first
+   * entry). A ref, so reading it in the focus phase cannot render.
+   */
+  keyboardRef: React.RefObject<boolean>
+}
+
+/** Marks the subtree INSIDE a flyout. See `inMenu` in `CascaderAction`. */
+const CascaderMenuContext = React.createContext(false)
+
+/**
+ * Every entry a menu's roving focus may land on, in DOM order, read from the
+ * DOM because the entries are whatever the consumer composed. A disabled
+ * `CascaderAction` is INCLUDED: it carries `aria-disabled`, not the native
+ * attribute, so `:not([disabled])` excludes only a consumer's own natively
+ * disabled `menuitem`, which cannot take focus.
+ */
+function menuItems(popup: HTMLElement | null): HTMLElement[] {
+  if (!popup) return []
+  return Array.from(
+    popup.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
+  )
+}
+
+const CascaderSubmenuContext = React.createContext<
+  CascaderSubmenuContextValue | undefined
+>(undefined)
+
+/** The flyout's own state. `close()` is the one a custom entry usually wants. */
+export function useCascaderSubmenu(): CascaderSubmenuContextValue {
+  const context = React.useContext(CascaderSubmenuContext)
+  if (!context) {
+    throw new Error("useCascaderSubmenu must be used within a CascaderSubmenu")
+  }
+  return context
+}
+
+export interface CascaderSubmenuProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children?: React.ReactNode
+}
+
+/**
+ * A footer row plus the flyout it opens. Registers with the cascader root
+ * while open, which turns one Escape into two. Cleared in an EFFECT, so the
+ * flyout still reads as open during the event that closed it.
+ */
+function CascaderSubmenu({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: CascaderSubmenuProps) {
+  const { setFlyoutOpen } = useCascaderActions()
+  const key = React.useId()
+  const triggerId = React.useId()
+  const rowRef = React.useRef<HTMLButtonElement | null>(null)
+  const keyboardRef = React.useRef(false)
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen)
+  const open = openProp ?? uncontrolled
+
+  const setOpen = React.useCallback(
+    (next: boolean) => {
+      if (openProp == null) setUncontrolled(next)
+      onOpenChange?.(next)
+    },
+    [openProp, onOpenChange]
+  )
+
+  const close = React.useCallback(() => setOpen(false), [setOpen])
+
+  React.useEffect(() => {
+    setFlyoutOpen(key, open)
+    return () => setFlyoutOpen(key, false)
+  }, [setFlyoutOpen, key, open])
+
+  const context = React.useMemo<CascaderSubmenuContextValue>(
+    () => ({ rowRef, open, setOpen, close, triggerId, keyboardRef }),
+    [open, setOpen, close, triggerId]
+  )
+
+  return (
+    <CascaderSubmenuContext.Provider value={context}>
+      <PopoverPrimitive.Root
+        open={open}
+        onOpenChange={setOpen}
+        /* NEVER modal: it would disable the combobox that owns it. */
+        modal={false}
+      >
+        {children}
+      </PopoverPrimitive.Root>
+    </CascaderSubmenuContext.Provider>
+  )
+}
+
+export interface CascaderSubmenuTriggerProps extends Omit<
+  React.ComponentProps<"button">,
+  "onSelect"
+> {
+  icon?: React.ReactNode
+}
+
+/** Carries the handler-veto hook, derived so a Base UI bump cannot drift. */
+type CascaderSubmenuTriggerClickEvent = Parameters<
+  NonNullable<PopoverPrimitive.Trigger.Props["onClick"]>
+>[0]
+
+/**
+ * The footer row that opens the flyout, and its anchor. `aria-haspopup="menu"`
+ * rather than the `dialog` Base UI would announce: what opens is a list of
+ * commands with roving focus. `disabled` is intercepted, not forwarded:
+ * `Popover.Trigger` runs it through `useButton`, which writes the NATIVE
+ * attribute for a native `<button>` and takes the row out of the panel's Tab
+ * ring, the defect `CascaderAction` documents, and this component exposes no
+ * `focusableWhenDisabled` to opt out. Published as `aria-disabled`, with the
+ * arrow keys, Enter and Space, and the click closed by hand (`useClick`
+ * ignores `defaultPrevented`).
+ */
+function CascaderSubmenuTrigger({
+  className,
+  icon,
+  children,
+  onKeyDown,
+  onClick,
+  disabled,
+  ...props
+}: CascaderSubmenuTriggerProps) {
+  const { labels } = useCascaderActions()
+  const { rowRef, setOpen, triggerId, keyboardRef } = useCascaderSubmenu()
+  const direction = useDirection()
+
+  const handleClick = React.useCallback(
+    (event: CascaderSubmenuTriggerClickEvent) => {
+      if (disabled) {
+        // `mergeProps` runs right to left, so this drops Base UI's own handler.
+        event.preventDefault()
+        event.preventBaseUIHandler()
+        return
+      }
+      onClick?.(event)
+    },
+    [disabled, onClick]
+  )
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (disabled) {
+        if (event.key === "Enter" || event.key === " ") event.preventDefault()
+        return
+      }
+
+      onKeyDown?.(event)
+      if (event.defaultPrevented) return
+
+      // The opening key points AT the flyout, so it flips with the writing
+      // direction; ArrowDown stays "next command". Resolved per keydown, never
+      // `useDirection()` alone: with no provider that answers "ltr" in RTL.
+      const openKey = isCascaderRtl(event.currentTarget, direction)
+        ? "ArrowLeft"
+        : "ArrowRight"
+
+      // Enter and Space open through the button's own click, so only FLAGGED.
+      if (event.key === "Enter" || event.key === " ") {
+        keyboardRef.current = true
+        return
+      }
+
+      if (event.key !== openKey) return
+
+      event.preventDefault()
+      keyboardRef.current = true
+      setOpen(true)
+    },
+    [disabled, onKeyDown, direction, setOpen, keyboardRef]
+  )
+
+  return (
+    <PopoverPrimitive.Trigger
+      ref={rowRef}
+      id={triggerId}
+      data-slot="cascader-submenu-trigger"
+      aria-haspopup="menu"
+      /* NOT `disabled={disabled}`: Base UI writes the native attribute. */
+      {...(disabled ? { "aria-disabled": true, "data-disabled": "" } : null)}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        CASCADER_ACTION_CLASS,
+        /* Painted while the flyout is open, as shadcn paints a SubTrigger.
+           Keyed off `aria-expanded`, not shadcn's `data-[state=open]`: the
+           popover trigger carries `aria-expanded` in both states. */
+        "aria-expanded:bg-accent aria-expanded:text-accent-foreground",
+        className
+      )}
+      {...props}
+    >
+      {icon ? (
+        <span
+          data-slot="cascader-action-icon"
+          className="text-muted-foreground flex shrink-0 items-center justify-center"
+        >
+          {icon}
+        </span>
+      ) : null}
+      <span className="min-w-0 flex-1 truncate text-start">{children}</span>
+      {/* Nothing else says the row opens a MENU, not another tree level. */}
+      <span className="sr-only">, {labels.submenuAffordance}</span>
+      <ChevronRightIcon aria-hidden="true" className="text-muted-foreground -me-0.5 size-4 shrink-0 rtl:-scale-x-100" />
+    </PopoverPrimitive.Trigger>
+  )
+}
+
+export interface CascaderSubmenuContentProps
+  extends
+    PopoverPrimitive.Popup.Props,
+    Pick<
+      PopoverPrimitive.Positioner.Props,
+      "side" | "align" | "sideOffset" | "alignOffset"
+    > {}
+
+/** Carries Base UI's handler-veto hook, so a plain React event will not do. */
+type CascaderSubmenuKeyEvent = Parameters<
+  NonNullable<PopoverPrimitive.Popup.Props["onKeyDown"]>
+>[0]
+
+/**
+ * The flyout itself. `Portal` with NO `container`: a nested portal resolves to
+ * the parent portal node, the mechanism the file header describes.
+ */
+function CascaderSubmenuContent({
+  className,
+  children,
+  onKeyDown,
+  side = "inline-end",
+  align = "end",
+  sideOffset = 8,
+  alignOffset = 0,
+  ...props
+}: CascaderSubmenuContentProps) {
+  const { rowRef, close, triggerId, keyboardRef } = useCascaderSubmenu()
+  const direction = useDirection()
+  const popupRef = React.useRef<HTMLDivElement | null>(null)
+  const typeaheadRef = React.useRef({ buffer: "", at: 0 })
+
+  /**
+   * Keyboard opens land on the first entry; a pointer open falls through to
+   * Base UI's default, the popup, so a click paints no focus ring. Not an
+   * effect of our own: Base UI's focus manager runs on open and wins the race.
+   */
+  const initialFocus = React.useCallback(() => {
+    const byKeyboard = keyboardRef.current
+    keyboardRef.current = false
+    if (!byKeyboard) return true
+    return menuItems(popupRef.current)[0] ?? true
+  }, [keyboardRef])
+
+  const closeAndReturn = React.useCallback(() => {
+    close()
+    rowRef.current?.focus()
+  }, [close, rowRef])
+
+  const handleKeyDown = React.useCallback(
+    (event: CascaderSubmenuKeyEvent) => {
+      onKeyDown?.(event)
+      // A DOM sibling of the combobox popup but a REACT descendant, so keys in
+      // here reach its handlers unless stopped. Enter would commit a row.
+      event.stopPropagation()
+      if (event.defaultPrevented) return
+
+      const popup = popupRef.current
+      const items = menuItems(popup)
+      if (items.length === 0) return
+
+      const active = document.activeElement as HTMLElement | null
+      const index = active ? items.indexOf(active) : -1
+      const move = (next: number) => {
+        event.preventDefault()
+        items[(next + items.length) % items.length]?.focus()
+      }
+
+      // Mirrors the open key on the SAME per-keydown answer as the trigger.
+      const closeKey = isCascaderRtl(event.currentTarget, direction)
+        ? "ArrowRight"
+        : "ArrowLeft"
+
+      switch (event.key) {
+        case "ArrowDown":
+          return move(index + 1)
+        case "ArrowUp":
+          // From the popup itself (a pointer open) Up means the LAST entry.
+          return move(index === -1 ? items.length - 1 : index - 1)
+        case "Home":
+          return move(0)
+        case "End":
+          return move(items.length - 1)
+        case closeKey:
+          event.preventDefault()
+          return closeAndReturn()
+        case "Tab":
+          // A menu never holds Tab: it closes and focus carries on from its row.
+          close()
+          rowRef.current?.focus()
+          return
+        default:
+          break
+      }
+
+      // Typeahead, after the switch so it can never swallow a navigation key.
+      if (
+        event.key.length !== 1 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.altKey
+      )
+        return
+      const now = event.timeStamp
+      const state = typeaheadRef.current
+      state.buffer = now - state.at > 500 ? event.key : state.buffer + event.key
+      state.at = now
+      const prefix = state.buffer.toLowerCase()
+      const from = index === -1 ? 0 : index
+      // Starts AFTER the current entry so one letter cycles rather than sticks.
+      const ordered = [
+        ...items.slice(state.buffer.length > 1 ? from : from + 1),
+        ...items.slice(0, state.buffer.length > 1 ? from : from + 1),
+      ]
+      const hit = ordered.find((item) =>
+        (item.textContent ?? "").trim().toLowerCase().startsWith(prefix)
+      )
+      if (hit) {
+        event.preventDefault()
+        hit.focus()
+      }
+    },
+    [onKeyDown, direction, close, closeAndReturn, rowRef]
+  )
+
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        /* The ROW, not whatever Base UI last treated as the trigger. */
+        anchor={rowRef}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          ref={popupRef}
+          initialFocus={initialFocus}
+          data-slot="cascader-submenu-content"
+          /* Roving focus, named by the row that opens it. `tabIndex={-1}` lets
+             a pointer open park focus here without adding a Tab stop. */
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby={triggerId}
+          tabIndex={-1}
+          onKeyDown={handleKeyDown}
+          /* Marks a menu surface for the docs design-system picker, which
+             repaints menus by walking the DOM. An attribute, not a class. */
+          data-menu-target=""
+          className={cn(
+            FLYOUT_SURFACE_CLASS,
+            "flex max-w-(--available-width) min-w-48 flex-col gap-0.5 outline-hidden",
+            CASCADER_LIST_PAD_CLASS,
+            "p-(--cascader-list-pad,4px)",
+            className
+          )}
+          {...props}
+        >
+          <CascaderMenuContext.Provider value={true}>
+            {children}
+          </CascaderMenuContext.Provider>
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+/**
+ * Whether the footer would render anything, for a wrapper (a separator, a grid
+ * row) that has to make the same call `CascaderFooter` already makes.
+ */
+export function useCascaderHasActions(): boolean {
+  const { actions } = useCascaderActions()
+  return actions.length > 0
+}
+
+export {
+  CascaderAction,
+  CascaderFooter,
+  CascaderSubmenu,
+  CascaderSubmenuContent,
+  CascaderSubmenuTrigger,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-i18n.tsx b/apps/web/src/components/reui/cascader/cascader-i18n.tsx
new file mode 100644
index 0000000..30ea930
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-i18n.tsx
@@ -0,0 +1,92 @@
+import type {
+  CascaderLabels,
+  CascaderMode,
+} from "@/components/reui/cascader/cascader-types"
+
+/** Name of the root level. Hoisted so the root announcement can reuse it. */
+const ROOT_LEVEL = "Top level"
+
+/** Hoisted for the same reason: several defaults end in an item count. */
+const itemCount = (count: number) =>
+  `${count} ${count === 1 ? "item" : "items"}`
+
+/**
+ * English defaults. Every string the primitive can render lives here, so a
+ * consumer can translate the whole surface by passing `labels`.
+ */
+export const CASCADER_LABELS: CascaderLabels = {
+  // Deliberately NOT lowercased. `toLowerCase()` is locale-hostile - it maps
+  // Turkish "İ" to a two-code-point sequence and German "İstanbul" style
+  // proper nouns lose their casing - and a label is already written the way
+  // its author wants it read.
+  search: (parentLabel) =>
+    parentLabel ? `Search ${parentLabel}...` : "Search...",
+  back: "Back",
+  loading: "Loading...",
+  loadingMore: "Loading more...",
+  loadMore: "Load more",
+  error: "Could not load items.",
+  retry: "Retry",
+  empty: "No results found.",
+  selectedCount: (count) => `${count} selected`,
+  breadcrumbLabel: "Breadcrumb",
+  chipsLabel: "Selected items",
+  removeChip: (label) => `Remove ${label}`,
+  pathSeparator: "/",
+  rootLevel: ROOT_LEVEL,
+  itemCount,
+  branchAffordance: "submenu",
+  selectedState: "selected",
+  partiallySelectedState: "partially selected",
+  columnsLabel: "Levels",
+  actionsLabel: "Actions",
+  submenuAffordance: "opens a menu",
+  panelLabel: "Options",
+  keyboardHint: (mode: CascaderMode, dir: "ltr" | "rtl") => {
+    // "Deeper" is the direction the text runs, so the level keys mirror in
+    // RTL and the hint has to name the mirrored pair there - an LTR-worded
+    // hint would teach exactly the wrong keys.
+    const open = dir === "rtl" ? "Left" : "Right"
+    const back = dir === "rtl" ? "Right" : "Left"
+    if (mode === "tree") {
+      return `Use the ${open} Arrow key to expand and the ${back} Arrow key to collapse.`
+    }
+    if (mode === "columns") {
+      return `Use the ${open} Arrow key to open the next column and the ${back} Arrow key to go back.`
+    }
+    return `Use the ${open} Arrow key to open a branch and the ${back} Arrow key to go back.`
+  },
+  rootAnnouncement: (count) => `${ROOT_LEVEL}, ${itemCount(count)}`,
+  expandedAnnouncement: (label, count) =>
+    `${label} expanded, ${itemCount(count)}`,
+  collapsedAnnouncement: (label) => `${label} collapsed`,
+  levelAnnouncement: (parentLabel, depth, count) =>
+    `${parentLabel}, level ${depth}, ${itemCount(count)}`,
+  resultsAnnouncement: (count) =>
+    count === 1 ? "1 result" : `${count} results`,
+  maxReachedAnnouncement: (max) => `Selection limit of ${max} reached`,
+  cascadeAnnouncement: (label, count, selecting) =>
+    `${label} ${selecting ? "selected" : "deselected"}, ${itemCount(count)} followed`,
+  searchingAnnouncement: "Searching...",
+}
+
+/**
+ * Shallow-merges consumer overrides over the defaults, so `labels` can carry a
+ * single key without restating the rest.
+ */
+export function resolveCascaderLabels(
+  labels?: Partial<CascaderLabels>
+): CascaderLabels {
+  if (!labels) return CASCADER_LABELS
+  return { ...CASCADER_LABELS, ...labels }
+}
+
+/** Resolves the search placeholder, which may be a string or a function. */
+export function resolveCascaderSearchLabel(
+  labels: CascaderLabels,
+  parentLabel?: string
+): string {
+  return typeof labels.search === "function"
+    ? labels.search(parentLabel)
+    : labels.search
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-item.tsx b/apps/web/src/components/reui/cascader/cascader-item.tsx
new file mode 100644
index 0000000..88d1bfa
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-item.tsx
@@ -0,0 +1,1069 @@
+"use client"
+
+import * as React from "react"
+import {
+  useCascaderActions,
+  useCascaderRender,
+  useCascaderState,
+} from "@/components/reui/cascader/cascader-context"
+import {
+  getCascaderCount,
+  getCascaderMoreParent,
+  getCascaderPath,
+  isCascaderMoreNode,
+} from "@/components/reui/cascader/cascader-lib"
+import type {
+  CascaderLoadState,
+  CascaderNode,
+} from "@/components/reui/cascader/cascader-types"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Spinner } from "@evobgp/ui/components/spinner"
+import { LoaderCircleIcon, MinusIcon, CheckIcon, RotateCwIcon, ChevronRightIcon } from "lucide-react"
+
+// Base UI extends its synthetic events with a handler-veto escape hatch.
+type VetoableEvent = { preventBaseUIHandler?: () => void }
+
+/** A row press. The veto hook is optional: an `as="button"` row is outside Base
+ *  UI's listbox and gets a plain React event. */
+export type CascaderRowEvent = React.MouseEvent<HTMLElement> & VetoableEvent
+
+// Each style's inline inset, as a variable: a row and its absolutely positioned
+// check have to land on the same number, in LOGICAL properties. These eight
+// numbers MIRROR the shared style sheets; keep them in step with
+// `registry/styles/style-*.css`.
+const ROW_INSET_CLASS =
+  "[--cascader-row-inset:6px]"
+
+// Both insets equal, for a row with no check. `!` because a consumer may not
+// import the sheets into `layer(base)`, where the class would win on order.
+const ROW_FLUSH_CLASS =
+  "ps-[var(--cascader-row-inset,8px)]! pe-[var(--cascader-row-inset,8px)]!"
+
+// The same start inset plus room for the check. A flat `pr-8` is wrong in five
+// of the eight styles: 4px of slack in nova, 8px short in maia, luma and sera,
+// and no gutter at all in mira, whose check then overlaps its own label.
+const ROW_GUTTER_CLASS =
+  "ps-[var(--cascader-row-inset,8px)]! pe-[calc(var(--cascader-row-inset,8px)*2_+_16px)]!"
+
+// The check's box, inset to match the row's. A physical `right-2` neither
+// mirrors under RTL nor tracks the style's inset; `right-auto` comes with the
+// logical `end-*`, because width + `left` + `right` is over-constrained.
+const INDICATOR_CLASS =
+  "pointer-events-none absolute flex items-center justify-center size-4 end-[var(--cascader-row-inset,8px)]! rtl:right-auto!"
+
+// The row's type, gap, radius and icon size per style. No horizontal padding:
+// every row pairs this with `ROW_FLUSH_CLASS` or `ROW_GUTTER_CLASS`.
+const ROW_THEME_CLASS =
+  "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 rounded-md py-1"
+
+/**
+ * The row's gap and type, per style, held apart from the rest of the theme.
+ *
+ * A row that pins its own gap or text size takes `ROW_SHELL_CLASS` and leaves
+ * these out, because a `style-<name>:` utility is emitted AFTER the plain one
+ * it would have to lose to. Not receiving the token beats overriding it with
+ * `!`, which a consumer then has to fight in turn.
+ */
+const ROW_GAP_CLASS =
+  "gap-2"
+
+const ROW_TEXT_CLASS =
+  "text-sm"
+
+const ROW_SHELL_CLASS = `${ROW_THEME_CLASS} relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 ${ROW_INSET_CLASS}`
+
+const ROW_CLASS = `${ROW_SHELL_CLASS} ${ROW_GAP_CLASS} ${ROW_TEXT_CLASS}`
+
+const CASCADER_ACTION_INSET_CLASS = `${ROW_INSET_CLASS} ${ROW_FLUSH_CLASS}`
+
+/** A footer COMMAND: the row theme, so it cannot drift from the list, plus the
+ *  hover and `focus-visible` fills a plain button never gets. Fills, never a
+ *  ring: a ring under rows that all paint with a fill read as a different
+ *  widget bolted on. `focus-visible`, not `focus`, so a pointer press does not
+ *  leave a command painted as if it were still hovered. Disabled keys off
+ *  `aria-disabled`, not `:disabled`, to keep it FOCUSABLE: a footer whose only
+ *  row is disabled has no tab stop. */
+export const CASCADER_ACTION_CLASS = `${ROW_SHELL_CLASS} ${ROW_TEXT_CLASS} ${ROW_FLUSH_CLASS} hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground cursor-pointer gap-2 transition-colors aria-disabled:pointer-events-none aria-disabled:opacity-50`
+
+// The box around the affordances that are not the row. 20px around a 16px icon,
+// the outer 2px cancelled at the call site; 24px would set the row height.
+const AFFORDANCE_BOX_CLASS =
+  "flex size-5 shrink-0 items-center justify-center rounded-sm"
+
+// What makes an affordance read as pressable on an already highlighted row. Not
+// `hover:bg-accent`: the row is `bg-accent` under the pointer, so the chip would
+// be invisible. `!` and `**:` for the `CHECKBOX_MARK_CLASS` reason.
+const AFFORDANCE_HOVER_CLASS =
+  "transition-[background-color,box-shadow,color] hover:bg-background hover:text-foreground! hover:**:text-foreground! hover:shadow-xs"
+
+// The selection MARK's colour, pinned so nothing can repaint it: every row
+// carries a DESCENDANT highlight rule, and a mark is STATE. Pinned TWICE
+// because icon sets draw with `fill`/`stroke="currentColor"`, which the
+// `<path>` inherits and resolves against the PATH's own `color`. Both halves
+// are asserted in `cascader-behavior.test.tsx`.
+const CHECKBOX_MARK_CLASS =
+  "text-primary-foreground! **:text-primary-foreground!"
+const INDICATOR_MARK_CLASS = "text-foreground! **:text-foreground!"
+
+// Milliseconds the pointer must rest on a branch row before
+// `expandTrigger="hover"` drills in: long enough that a pointer crossing the
+// column on its way elsewhere opens nothing, short enough to read as immediate.
+const CASCADER_HOVER_EXPAND_DELAY = 150
+
+export interface CascaderItemProps extends Omit<
+  ComboboxPrimitive.Item.Props,
+  "value" | "children" | "className" | "style" | "onClick" | "onMouseUp"
+> {
+  /** No state callback: the row merges `className` and `style` itself. */
+  className?: string
+  style?: React.CSSProperties
+  onClick?: (event: CascaderRowEvent) => void
+  onMouseUp?: (event: CascaderRowEvent) => void
+  node: CascaderNode
+  /** Explicit render index. Required while virtualized and DELIBERATELY IGNORED
+   *  otherwise: it self-registers the row and breaks `aria-activedescendant`. */
+  index?: number
+  /** Indentation depth. Drives `--cascader-indent` in tree mode. */
+  depth?: number
+  /** Renders the ancestor chain under the label, for deep-search results. */
+  showPath?: boolean
+  /** `option` renders a real `Combobox.Item`; `button` renders identical markup
+   *  outside the listbox, for the ancestor columns in columns mode. */
+  as?: "option" | "button"
+  /** Tree mode: this row is an expanded branch. */
+  expanded?: boolean
+  /** Indent each depth by this many pixels. Tree mode only. */
+  indent?: number
+  /** Whether the node has children. Defaults to the cascader's own answer, as do
+   *  the three below: callers pass them because they already hold the level,
+   *  which keeps a memoised row off the volatile context. */
+  branch?: boolean
+  /** Whether the node may be committed. Defaults to the cascader's own answer. */
+  selectable?: boolean
+  /** Whether the node is currently selected. Defaults to the cascader's answer. */
+  selected?: boolean
+  /** Some but not all of the loaded subtree selected. `cascade` only. */
+  indeterminate?: boolean
+  /** Selected nodes below this one, at any depth. Drives the trailing count. */
+  selectedCount?: number
+  /** Paging row only: a request for this level is in flight. */
+  loading?: boolean
+  /** Paging row only: this level's last request failed. */
+  error?: boolean
+  /** Branch row only: this node's OWN children are being fetched. The chevron
+   *  (or, in tree mode, the expander) becomes a spinner IN PLACE, in the same
+   *  16px box: no skeleton row appears below, nothing reflows. */
+  childrenLoading?: boolean
+  /** Branch row only: the last fetch of this node's children failed. The same
+   *  box becomes the retry. The press path is unchanged: it goes through
+   *  `navigate`, which refires the failed level rather than moving. */
+  childrenError?: boolean
+  children?: React.ReactNode
+}
+
+/** One row. Branch presses navigate instead of selecting, vetoed here with
+ *  `preventBaseUIHandler()` on `onClick` (Enter too) and on `onMouseUp`. */
+const CascaderItem = React.memo(function CascaderItem({
+  node,
+  index,
+  depth,
+  showPath = false,
+  as = "option",
+  expanded,
+  indent = 16,
+  branch: branchProp,
+  selectable: selectableProp,
+  selected: selectedProp,
+  indeterminate: indeterminateProp,
+  selectedCount: selectedCountProp,
+  loading,
+  error,
+  childrenLoading = false,
+  childrenError = false,
+  className,
+  children,
+  onClick,
+  onMouseUp,
+  style,
+  ...props
+}: CascaderItemProps) {
+  // The ACTIONS context only: the state context republishes on every keystroke.
+  const {
+    index: treeIndex,
+    mode,
+    labels,
+    isBranch,
+    isSelectable,
+    isSelected,
+    isIndeterminate,
+    selectedDescendantCount,
+    multiple,
+    branchesSelectable,
+    indicator: indicatorEnabled,
+    expandTrigger = "click",
+    navigate,
+    navigateAt,
+    toggleExpanded,
+    commit,
+    virtualized,
+    loadMore,
+    retryLevel,
+  } = useCascaderActions()
+  // Render props come from an always-current context, or a closure goes stale.
+  const { renderItem, renderLabel } = useCascaderRender()
+
+  const branch = branchProp ?? isBranch(node)
+  const selectable = selectableProp ?? isSelectable(node)
+  const selected = selectedProp ?? isSelected(node)
+  // A selected node is never also partially selected (a dash in a filled box).
+  const indeterminate =
+    !selected && (indeterminateProp ?? isIndeterminate(node))
+  const count = branch ? getCascaderCount(treeIndex, node) : 0
+  const nodeDepth = depth ?? treeIndex.depthOf.get(node.value) ?? 0
+
+  // O(1): the cascader publishes a map of selected-descendant counts, because a
+  // row walking its own subtree is `rows x descendants`, paid every keystroke.
+  const selectedDescendants = branch
+    ? (selectedCountProp ?? selectedDescendantCount(node))
+    : 0
+  // `multiple` only: with a single selection the trigger, the breadcrumb and
+  // the leaf's own check already say where it is, so swapping a branch's real
+  // child total ("24") for a permanent "1" would trade a useful number away.
+  const showsSelectedCount = multiple && selectedDescendants > 0
+  const trailingCount = showsSelectedCount ? selectedDescendants : count
+  // Shown selected or not: suppressing it under a checked branch read as data
+  // loss, and the row's TWO trailing columns mean the count never has to share
+  // a slot with the check.
+  const showCount = trailingCount > 0
+
+  // Where a multi-select tree puts its checkbox: at the HEAD of the row, since a
+  // trailing box does not follow the label stagger. Per-LIST, never per-row, or
+  // the labels below an unselectable row step back out.
+  const leadingCheckbox = mode === "tree" && multiple
+
+  // Whether this row draws a MARK, and so whether it reserves the gutter one
+  // needs. `|| multiple` is the scope of the opt-out: a checkbox is the
+  // selection CONTROL, so `indicator={false}` is a no-op in multi-select.
+  const showsIndicator = indicatorEnabled || multiple
+
+  const veto = React.useCallback((event: VetoableEvent) => {
+    event.preventBaseUIHandler?.()
+  }, [])
+
+  const handleClick = React.useCallback(
+    (event: CascaderRowEvent) => {
+      onClick?.(event)
+      if (node.disabled) return
+      if (branch && !selectable) {
+        veto(event)
+        navigate(node)
+      }
+    },
+    [onClick, node, branch, selectable, veto, navigate]
+  )
+
+  const handleMouseUp = React.useCallback(
+    (event: CascaderRowEvent) => {
+      onMouseUp?.(event)
+      if (node.disabled) return
+      if (branch && !selectable) veto(event)
+    },
+    [onMouseUp, node, branch, selectable, veto]
+  )
+
+  // The tree expander's own press. With `selectable="any"` the row press
+  // commits, and under `cascade` that selected a whole subtree while the row
+  // stayed collapsed, so expanding needs its own target. `stopPropagation`
+  // before the veto, so Base UI's handler never runs, and no role: nesting
+  // one in `role="option"` fails axe. `navigate` fetches BEFORE it opens.
+  const handleExpanderClick = React.useCallback(
+    (event: CascaderRowEvent) => {
+      event.stopPropagation()
+      veto(event)
+      if (node.disabled) return
+      if (expanded) toggleExpanded(node.value)
+      else navigate(node)
+    },
+    [veto, node, expanded, toggleExpanded, navigate]
+  )
+
+  const handleExpanderMouseUp = React.useCallback(
+    (event: CascaderRowEvent) => {
+      // Base UI treats a drag-select mouseup as a commit; this is not one.
+      event.stopPropagation()
+      veto(event)
+    },
+    [veto]
+  )
+
+  const handleChevronClick = React.useCallback(
+    (event: CascaderRowEvent) => {
+      event.stopPropagation()
+      veto(event)
+      if (node.disabled) return
+      // `navigate` falls through to `pushLevel`, which APPENDS: right in the
+      // deepest column, but from an ancestor column it duplicated the level and
+      // corrupted the path. `navigateAt` rebuilds the trail from this depth.
+      if (as === "button") navigateAt(node, depth ?? 0)
+      else navigate(node)
+    },
+    [veto, node, as, navigateAt, depth, navigate]
+  )
+
+  const handleChevronMouseUp = React.useCallback(
+    (event: CascaderRowEvent) => veto(event),
+    [veto]
+  )
+
+  // Keeps focus in the search field: Base UI prevents the mousedown default for
+  // option rows, and focusing a `tabindex="-1"` trail row kills every key.
+  const handleButtonMouseDown = React.useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      event.preventDefault()
+    },
+    []
+  )
+
+  const handleButtonClick = React.useCallback(
+    (event: CascaderRowEvent) => {
+      onClick?.(event)
+      if (node.disabled) return
+      if (branch && !selectable) {
+        // Button rows only exist in the columns trail, where `depth` is the
+        // column's own depth, so navigating replaces the trail from here.
+        navigateAt(node, depth ?? 0)
+        return
+      }
+      if (selectable) commit(node)
+    },
+    [onClick, node, branch, selectable, navigateAt, depth, commit]
+  )
+
+  // The paging row's press, never a selection, whatever `selectable` says.
+  const handleMoreClick = React.useCallback(
+    (event: CascaderRowEvent) => {
+      onClick?.(event)
+      veto(event)
+      const parent = getCascaderMoreParent(node)
+      if (parent == null) return
+      if (error) retryLevel(parent)
+      else if (!loading) loadMore(parent)
+    },
+    [onClick, veto, node, error, loading, retryLevel, loadMore]
+  )
+
+  // `expandTrigger="hover"`: resting on a BRANCH row in the ACTIVE column drills
+  // in after a delay. The deepest column of columns mode only, and it never
+  // commits, so a pointer crossing the panel cannot change the value.
+  const hoverNavigates =
+    expandTrigger === "hover" &&
+    mode === "columns" &&
+    as === "option" &&
+    branch &&
+    !node.disabled
+  const hoverTimerRef = React.useRef<number | null>(null)
+
+  const cancelHoverNavigate = React.useCallback(() => {
+    if (hoverTimerRef.current == null) return
+    window.clearTimeout(hoverTimerRef.current)
+    hoverTimerRef.current = null
+  }, [])
+
+  const handleHoverPointerEnter = React.useCallback(() => {
+    cancelHoverNavigate()
+    hoverTimerRef.current = window.setTimeout(() => {
+      hoverTimerRef.current = null
+      navigate(node)
+    }, CASCADER_HOVER_EXPAND_DELAY)
+  }, [cancelHoverNavigate, navigate, node])
+
+  // Drilling in demotes this column to the trail WITHOUT unmounting the row, so
+  // a pending timer has to die or it fires `navigate` from an inactive column.
+  React.useEffect(() => {
+    if (!hoverNavigates) cancelHoverNavigate()
+  }, [hoverNavigates, cancelHoverNavigate])
+  React.useEffect(() => cancelHoverNavigate, [cancelHoverNavigate])
+
+  /* ------------------------------- paging row ------------------------------ */
+
+  if (isCascaderMoreNode(node)) {
+    const text = error
+      ? labels.error
+      : loading
+        ? node.count
+          ? labels.loadingMore
+          : labels.loading
+        : labels.loadMore
+
+    const moreStyle =
+      mode === "tree" && nodeDepth > 0
+        ? ({
+            ...style,
+            "--cascader-indent": `${nodeDepth * indent}px`,
+          } as React.CSSProperties)
+        : style
+
+    const moreShared = {
+      "data-slot": "cascader-item",
+      "data-more": "",
+      "data-state": error ? "error" : loading ? "loading" : "idle",
+      "data-depth": nodeDepth,
+      style: moreStyle,
+      className: cn(
+        ROW_SHELL_CLASS,
+        ROW_FLUSH_CLASS,
+        "text-muted-foreground justify-center gap-1.5 text-xs",
+        !error && !loading && "hover:text-foreground",
+        mode === "tree" &&
+          "ps-[calc(var(--cascader-row-inset,8px)_+_var(--cascader-indent,0px))]!",
+        className
+      ),
+    }
+
+    const moreBody = children ?? (
+      <>
+        {loading ? (
+          <LoaderCircleIcon className="size-3.5 animate-spin" aria-hidden />
+        ) : null}
+        <span>{text}</span>
+        {/* TEXT, not a button: a focusable element inside a `role="option"`
+            row is a `nested-interactive` violation. */}
+        {error ? (
+          <span className="text-foreground font-medium">{labels.retry}</span>
+        ) : null}
+      </>
+    )
+
+    if (as === "button") {
+      const buttonProps = { ...(props as React.ComponentProps<"button">) }
+      delete buttonProps["aria-setsize"]
+      delete buttonProps["aria-posinset"]
+      delete buttonProps["aria-level"]
+
+      return (
+        <button
+          type="button"
+          {...moreShared}
+          tabIndex={-1}
+          onClick={handleMoreClick}
+          {...buttonProps}
+        >
+          {moreBody}
+        </button>
+      )
+    }
+
+    return (
+      <ComboboxPrimitive.Item
+        {...moreShared}
+        value={node}
+        {...(virtualized && index != null ? { index } : null)}
+        {...(mode === "tree"
+          ? { role: "treeitem" as const, "aria-level": nodeDepth + 1 }
+          : null)}
+        onClick={handleMoreClick}
+        onMouseUp={veto}
+        {...props}
+      >
+        {moreBody}
+      </ComboboxPrimitive.Item>
+    )
+  }
+
+  const itemState = {
+    branch,
+    selected,
+    disabled: !!node.disabled,
+    depth: nodeDepth,
+    count,
+    path: showPath ? getCascaderPath(treeIndex, node.value).slice(0, -1) : [],
+  }
+
+  const custom = renderItem?.(node, itemState)
+  const customLabel = renderLabel?.(node, itemState)
+
+  // What the markup cannot say: a branch would announce "Person 24", a naked
+  // number. Trail rows are outside the listbox, so they need words for state.
+  const srDetails = [
+    branch ? labels.itemCount(count) : null,
+    showsSelectedCount ? labels.selectedCount(selectedDescendants) : null,
+    branch && mode !== "tree" ? labels.branchAffordance : null,
+    as === "button" && selected ? labels.selectedState : null,
+    // Option rows say this with `aria-checked="mixed"`; `role="button"` allows
+    // neither that nor `aria-selected`, so a trail row says it in words.
+    as === "button" && indeterminate ? labels.partiallySelectedState : null,
+  ]
+    .filter(Boolean)
+    .map((detail) => `, ${detail}`)
+    .join("")
+
+  // Extracted because tree mode renders it INLINE at the head of the row. It
+  // reads `data-selected` off the ROW, so it also works on the trail rows.
+  const checkbox = (
+    <span
+      data-slot="cascader-item-checkbox"
+      className="border-input in-data-[selected]:bg-primary in-data-[selected]:border-primary in-data-[selected]:text-primary-foreground in-data-[indeterminate]:bg-primary in-data-[indeterminate]:border-primary in-data-[indeterminate]:text-primary-foreground flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors"
+    >
+      {/* Colour declared ON THE ICON with `!`; see `CHECKBOX_MARK_CLASS`. */}
+      {indeterminate ? (
+        <MinusIcon data-slot="cascader-item-dash" className={cn(CHECKBOX_MARK_CLASS, "size-3")} />
+      ) : (
+        <CheckIcon data-slot="cascader-item-tick" className={cn(
+                              CHECKBOX_MARK_CLASS,
+                              "size-3 opacity-0 in-data-[selected]:opacity-100"
+                            )} />
+      )}
+    </span>
+  )
+
+  const indicator = (
+    <>
+      {multiple ? (
+        checkbox
+      ) : (
+        <CheckIcon data-slot="cascader-item-check" className={cn("pointer-events-none", INDICATOR_MARK_CLASS)} />
+      )}
+    </>
+  )
+
+  const body = custom ?? children ?? (
+    <>
+      {/* Tree mode expands in place, so the branch marker leads the row. */}
+      {mode === "tree" && branch ? (
+        <span
+          data-slot="cascader-item-expander"
+          /* Pure affordance: the row itself carries `aria-expanded`. */
+          aria-hidden="true"
+          data-state={
+            childrenError ? "error" : childrenLoading ? "loading" : "idle"
+          }
+          onClick={handleExpanderClick}
+          onMouseUp={handleExpanderMouseUp}
+          className={cn(
+            "-ms-0.5",
+            childrenError ? "text-destructive" : "text-muted-foreground",
+            AFFORDANCE_BOX_CLASS,
+            AFFORDANCE_HOVER_CLASS,
+            childrenLoading && "pointer-events-none"
+          )}
+        >
+          {childrenLoading ? (
+            <Spinner aria-hidden="true" className="size-4" />
+          ) : childrenError ? (
+            <RotateCwIcon className="size-4" />
+          ) : (
+            <ChevronRightIcon className={cn(
+                                              "size-4 transition-transform",
+                                              /* Collapsed it points INTO the level, so it mirrors; expanded
+                                                 it points DOWN, the same in both writing modes, so the mirror
+                                                 has to come off or `scaleX(-1)` composed with `rotate(90deg)`
+                                                 lands it pointing up. `rtl:rotate-90` beside `rotate-90` was
+                                                 a no-op that only looked like it handled this. */
+                                              expanded ? "rotate-90" : "rtl:-scale-x-100"
+                                            )} />
+          )}
+        </span>
+      ) : mode === "tree" ? (
+        // A LEAF's expander slot, reserved and empty: without it a leaf's label
+        // started 28px off its sibling branches' and read as one level up.
+        <span
+          data-slot="cascader-item-expander-spacer"
+          aria-hidden="true"
+          className={cn("-ms-0.5", AFFORDANCE_BOX_CLASS)}
+        />
+      ) : null}
+
+      {/* Tree + multi-select: the box leads the row, and an unselectable row
+          still reserves its width. */}
+      {leadingCheckbox ? (
+        selectable ? (
+          checkbox
+        ) : (
+          <span
+            data-slot="cascader-item-checkbox-spacer"
+            aria-hidden="true"
+            className="size-4 shrink-0"
+          />
+        )
+      ) : null}
+
+      {node.icon ? (
+        <span
+          data-slot="cascader-item-icon"
+          className="text-muted-foreground flex shrink-0 items-center justify-center"
+        >
+          {node.icon}
+        </span>
+      ) : null}
+
+      {/* The row box is sized for pieces side by side; this one stacks, so it
+          restates the gap: 8px reads as a paragraph break, not a subtitle. */}
+      <span className="flex min-w-0 flex-1 flex-col items-start gap-0.5">
+        {customLabel ?? (
+          <>
+            <span className="w-full truncate text-start">{node.label}</span>
+            {node.description ? (
+              <span
+                data-slot="cascader-item-description"
+                className="text-muted-foreground w-full truncate text-start text-xs"
+              >
+                {node.description}
+              </span>
+            ) : null}
+          </>
+        )}
+        {showPath ? <CascaderItemPath node={node} /> : null}
+      </span>
+
+      {/* The count is a bare number, and nothing else says a branch opens. */}
+      {srDetails ? (
+        <span data-slot="cascader-item-details" className="sr-only">
+          {srDetails}
+        </span>
+      ) : null}
+
+      {/* Tree mode expands in place, so it has no drill-in chevron. */}
+      {branch && mode !== "tree" ? (
+        <span
+          data-slot="cascader-item-trailing"
+          aria-hidden="true"
+          className="text-muted-foreground ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums"
+        >
+          {showCount ? (
+            <span
+              data-slot="cascader-item-count"
+              /* The marker a consumer (and a test) reads to tell the two
+                 numbers apart without matching on a colour class. */
+              {...(showsSelectedCount ? { "data-selected-count": "" } : null)}
+              className={cn(showsSelectedCount && "text-primary!")}
+            >
+              {trailingCount}
+            </span>
+          ) : null}
+          {/* ONLY the chevron is the drill target: sharing a hit area with
+              the count made a number pressable. */}
+          <span
+            data-slot="cascader-item-chevron"
+            data-state={
+              childrenError ? "error" : childrenLoading ? "loading" : "idle"
+            }
+            onClick={selectable ? handleChevronClick : undefined}
+            onMouseUp={selectable ? handleChevronMouseUp : undefined}
+            onMouseDown={as === "button" ? handleButtonMouseDown : undefined}
+            className={cn(
+              /* Cancels the box's outer slack, so the icon keeps its column. */
+              "-me-0.5",
+              AFFORDANCE_BOX_CLASS,
+              selectable && AFFORDANCE_HOVER_CLASS,
+              childrenError && "text-destructive",
+              childrenLoading && "pointer-events-none"
+            )}
+          >
+            {childrenLoading ? (
+              <Spinner aria-hidden="true" className="size-4" />
+            ) : childrenError ? (
+              <RotateCwIcon className="size-4" />
+            ) : (
+              <ChevronRightIcon className="size-4 rtl:-scale-x-100" />
+            )}
+          </span>
+        </span>
+      ) : null}
+
+      {branch && mode === "tree" && showCount ? (
+        <span
+          data-slot="cascader-item-count"
+          {...(showsSelectedCount ? { "data-selected-count": "" } : null)}
+          /* The count is spoken by the sr-only details span instead. */
+          aria-hidden="true"
+          className={cn(
+            "text-muted-foreground ms-auto shrink-0 text-xs tabular-nums",
+            showsSelectedCount && "text-primary!"
+          )}
+        >
+          {trailingCount}
+        </span>
+      ) : null}
+
+      {/* No trailing indicator when a tree's box led the row, or when
+          `indicator={false}` opted out. See `showsIndicator`. */}
+      {selectable && !leadingCheckbox && showsIndicator ? (
+        as === "button" ? (
+          // No ItemIndicator outside Base UI: `data-selected` drives it.
+          (multiple || selected) && (
+            <span
+              data-slot="cascader-item-indicator"
+              className={INDICATOR_CLASS}
+            >
+              {indicator}
+            </span>
+          )
+        ) : (
+          <ComboboxPrimitive.ItemIndicator
+            /* Kept mounted for a partial selection too: the row is not
+               selected, so Base UI would unmount the box the dash lives in. */
+            keepMounted={multiple || indeterminate}
+            render={
+              <span
+                data-slot="cascader-item-indicator"
+                className={INDICATOR_CLASS}
+              />
+            }
+          >
+            {indicator}
+          </ComboboxPrimitive.ItemIndicator>
+        )
+      ) : null}
+    </>
+  )
+
+  const rowStyle =
+    mode === "tree" && nodeDepth > 0
+      ? ({
+          ...style,
+          "--cascader-indent": `${nodeDepth * indent}px`,
+        } as React.CSSProperties)
+      : style
+
+  const shared = {
+    "data-slot": "cascader-item",
+    "data-branch": branch || undefined,
+    "data-selected": selected || undefined,
+    "data-indeterminate": indeterminate || undefined,
+    "data-depth": nodeDepth,
+    "data-expanded": expanded || undefined,
+    // No `aria-level`: `role="option"` allows only `aria-selected`,
+    // `aria-checked`, `aria-posinset` and `aria-setsize`, and a `role="button"`
+    // trail row allows none of the four. Only tree mode has a role that takes a
+    // level, and it adds one below.
+    style: rowStyle,
+    className: cn(
+      ROW_CLASS,
+      /* Three separate reasons to hand the check gutter back. A multi-select
+         tree's box leads the row, so the gutter would be 24px of dead space;
+         `indicator={false}` drops the check, and keeping the gutter would park
+         the count and the chevron one gutter in from an edge nothing sits on;
+         and for branches the question is per-LIST, not per-row, because the old
+         `branch && !selectable` put neighbouring chevrons on 24px and 6px in
+         nova. One `pe-*` is emitted either way, so nothing here depends on
+         class-merge order. */
+      leadingCheckbox || !showsIndicator || (branch && !branchesSelectable)
+        ? ROW_FLUSH_CLASS
+        : ROW_GUTTER_CLASS,
+      /* ADDED to the style's own inset, never substituted: replacing it put
+         depth 0 at 12px and depth 1 at 16px in maia, luma and sera, a 4px step.
+         `_+_` because Tailwind's parser splits on whitespace. */
+      mode === "tree" &&
+        "ps-[calc(var(--cascader-row-inset,8px)_+_var(--cascader-indent,0px))]!",
+      className
+    ),
+  }
+
+  if (as === "button") {
+    const buttonProps = { ...(props as React.ComponentProps<"button">) }
+    // `role="button"` allows none of these, so they are dropped, not passed.
+    delete buttonProps["aria-setsize"]
+    delete buttonProps["aria-posinset"]
+    delete buttonProps["aria-level"]
+
+    return (
+      <button
+        type="button"
+        {...shared}
+        /* Focus stays in the search input; the trail uses ArrowLeft. */
+        tabIndex={-1}
+        disabled={node.disabled}
+        aria-disabled={node.disabled || undefined}
+        onClick={handleButtonClick}
+        onMouseDown={handleButtonMouseDown}
+        {...buttonProps}
+      >
+        {body}
+      </button>
+    )
+  }
+
+  return (
+    <ComboboxPrimitive.Item
+      {...shared}
+      value={node}
+      /* THE one gate for the explicit index: supply one outside virtualized mode
+         and the first arrow key leaves `aria-activedescendant` pointing at
+         nothing. */
+      {...(virtualized && index != null ? { index } : null)}
+      disabled={node.disabled}
+      /* Conditional spread, never `role={... : undefined}`: `mergeProps`
+         iterates own keys, so `undefined` would delete `role="option"`. */
+      {...(mode === "tree"
+        ? {
+            role: "treeitem" as const,
+            "aria-level": nodeDepth + 1,
+            ...(branch ? { "aria-expanded": !!expanded } : null),
+          }
+        : branch
+          ? { "aria-haspopup": "listbox" as const }
+          : null)}
+      /* Only ever `mixed`: a selected row already says so with `aria-selected`,
+         and two selection attributes on one row is noise. */
+      {...(indeterminate ? { "aria-checked": "mixed" as const } : null)}
+      {...(hoverNavigates
+        ? {
+            onPointerEnter: handleHoverPointerEnter,
+            onPointerLeave: cancelHoverNavigate,
+          }
+        : null)}
+      onClick={handleClick}
+      onMouseUp={handleMouseUp}
+      {...props}
+    >
+      {body}
+    </ComboboxPrimitive.Item>
+  )
+})
+
+/** Ancestor chain under a deep-search result: "Name" alone is ambiguous. */
+function CascaderItemPath({ node }: { node: CascaderNode }) {
+  const { index, labels } = useCascaderActions()
+  const ancestors = getCascaderPath(index, node.value).slice(0, -1)
+  if (!ancestors.length) return null
+
+  return (
+    <span
+      data-slot="cascader-item-path"
+      className="text-muted-foreground flex w-full items-center gap-0.5 truncate text-start text-xs"
+    >
+      {ancestors.map((ancestor, i) => (
+        <React.Fragment key={ancestor.value}>
+          {i > 0 ? (
+            <span aria-hidden="true">{labels.pathSeparator}</span>
+          ) : null}
+          <span className="truncate">{ancestor.label}</span>
+        </React.Fragment>
+      ))}
+    </span>
+  )
+}
+
+/** Every load-derived prop a row needs. A PAGING row reports the level it
+ *  belongs to, a BRANCH row the level it OWNS; mutually exclusive, so one call
+ *  answers both. Exported because a memoised row cannot read them itself. */
+export function getCascaderMoreProps(
+  node: CascaderNode,
+  loadStates: ReadonlyMap<string, CascaderLoadState>
+): {
+  loading: boolean
+  error: boolean
+  childrenLoading: boolean
+  childrenError: boolean
+} {
+  const parent = getCascaderMoreParent(node)
+  if (parent == null) {
+    const own = loadStates.get(node.value)
+    return {
+      loading: false,
+      error: false,
+      childrenLoading: !!own?.loading,
+      childrenError: !!own?.error,
+    }
+  }
+  const state = loadStates.get(parent)
+  return {
+    loading: !!state?.loading,
+    error: !!state?.error,
+    childrenLoading: false,
+    childrenError: false,
+  }
+}
+
+export interface CascaderItemsProps {
+  /** Replaces the default row for every item. */
+  children?: (node: CascaderNode, index: number) => React.ReactNode
+}
+
+/** Whatever the active view is: the current level, the deepest column, or the
+ *  flattened tree rows. Lives here so `cascader.tsx` never imports a row
+ *  component, which would cycle with the context. `index` is deliberately not
+ *  passed; see `CascaderItemProps`. */
+function CascaderItems({ children }: CascaderItemsProps) {
+  const { mode, isBranch, isSelectable, isSelected, isIndeterminate } =
+    useCascaderActions()
+  const { renderedItems, deepResults, treeRows, loadStates } =
+    useCascaderState()
+  const showPath = deepResults !== null
+
+  // Answered once here, as plain booleans, so `React.memo` can skip a row.
+  if (mode === "tree") {
+    return (
+      <>
+        {treeRows.map((row, i) =>
+          children ? (
+            <React.Fragment key={row.node.value}>
+              {children(row.node, i)}
+            </React.Fragment>
+          ) : (
+            <CascaderItem
+              key={row.node.value}
+              node={row.node}
+              depth={row.depth}
+              expanded={row.expanded}
+              branch={row.branch}
+              selectable={isSelectable(row.node)}
+              selected={isSelected(row.node)}
+              indeterminate={isIndeterminate(row.node)}
+              {...getCascaderMoreProps(row.node, loadStates)}
+              aria-setsize={row.setSize}
+              aria-posinset={row.posInSet}
+            />
+          )
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      {renderedItems.map((node, i) =>
+        children ? (
+          <React.Fragment key={node.value}>{children(node, i)}</React.Fragment>
+        ) : (
+          <CascaderItem
+            key={node.value}
+            node={node}
+            showPath={showPath}
+            branch={isBranch(node)}
+            selectable={isSelectable(node)}
+            selected={isSelected(node)}
+            indeterminate={isIndeterminate(node)}
+            {...getCascaderMoreProps(node, loadStates)}
+            aria-setsize={renderedItems.length}
+            aria-posinset={i + 1}
+          />
+        )
+      )}
+    </>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                          Group / Label / Separator                         */
+/* -------------------------------------------------------------------------- */
+
+// Whether a `CascaderLabel` has a group to name: Base UI's `Combobox.GroupLabel`
+// THROWS when there is none, and a heading is useful outside a group.
+const CascaderGroupContext = React.createContext(false)
+
+// A heading over a run of rows. All eight styles are spelled out because the
+// type is not uniform (sera is uppercase), and the inset is the row's own.
+const CASCADER_LABEL_CLASS = `text-muted-foreground text-xs py-1.5 ${CASCADER_ACTION_INSET_CLASS} block truncate`
+
+// A rule between two runs. The inline margin is not the combobox separator's:
+// that cancels the container's padding with a per-style number, wrong in a
+// footer and 4px too much in lyra. `--cascader-list-pad` reaches the edge.
+const CASCADER_SEPARATOR_CLASS =
+  "h-px bg-border my-1 mx-[calc(var(--cascader-list-pad,4px)*-1)]! shrink-0"
+
+export interface CascaderGroupProps extends Omit<
+  ComboboxPrimitive.Group.Props,
+  "className"
+> {
+  /** Base UI also accepts a state callback here; the group has no state. */
+  className?: string
+}
+
+/** A run of related rows, named by the `CascaderLabel` inside it: the group is
+ *  `role="group"` and Base UI points its `aria-labelledby` at the label, where a
+ *  heading alone inside a listbox is dropped from the accessibility tree.
+ *  Grouping is composition, not data: `CascaderItems` renders one flat run per
+ *  level, so its indices line up with `listRef`. */
+function CascaderGroup({ className, ...props }: CascaderGroupProps) {
+  return (
+    <CascaderGroupContext.Provider value={true}>
+      <ComboboxPrimitive.Group
+        data-slot="cascader-group"
+        className={cn("flex flex-col", className)}
+        {...props}
+      />
+    </CascaderGroupContext.Provider>
+  )
+}
+
+export interface CascaderLabelProps extends Omit<
+  ComboboxPrimitive.GroupLabel.Props,
+  "className" | "style"
+> {
+  /** No state callback; outside a group this is not a Base UI part at all. */
+  className?: string
+  style?: React.CSSProperties
+}
+
+/** Inside a group: the real thing, with the id association Base UI wires up. */
+function CascaderGroupLabel({ className, ...props }: CascaderLabelProps) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="cascader-label"
+      className={cn(CASCADER_LABEL_CLASS, className)}
+      {...props}
+    />
+  )
+}
+
+// Outside a group: the same heading as a plain element. A separate component
+// rather than a branch, so the hook count cannot change when a label moves in.
+function CascaderPlainLabel({ className, ...props }: CascaderLabelProps) {
+  const defaultProps = {
+    "data-slot": "cascader-label",
+    className: cn(CASCADER_LABEL_CLASS, className),
+  }
+
+  return useRender({
+    defaultTagName: "div",
+    render: props.render,
+    props: mergeProps<"div">(defaultProps, props),
+  })
+}
+
+/** A heading. Inside `CascaderGroup` it is the group's accessible name; outside
+ *  one (the footer flyout is a menu, not a listbox) it is decoration only. */
+function CascaderLabel(props: CascaderLabelProps) {
+  const grouped = React.useContext(CascaderGroupContext)
+  return grouped ? (
+    <CascaderGroupLabel {...props} />
+  ) : (
+    <CascaderPlainLabel {...props} />
+  )
+}
+
+export interface CascaderSeparatorProps extends Omit<
+  ComboboxPrimitive.Separator.Props,
+  "className"
+> {
+  /** Base UI also accepts a state callback here; only the orientation varies. */
+  className?: string
+}
+
+/** Decorative on purpose: Base UI's separator is `role="separator"`, which a
+ *  `listbox` may not own, and a run that needs separating for a screen reader
+ *  needs a `CascaderGroup`, not a line. A consumer can pass the role back. */
+function CascaderSeparator({ className, ...props }: CascaderSeparatorProps) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="cascader-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(CASCADER_SEPARATOR_CLASS, className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  CascaderGroup,
+  CascaderItem,
+  CascaderItems,
+  CascaderLabel,
+  CascaderSeparator,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-lib.tsx b/apps/web/src/components/reui/cascader/cascader-lib.tsx
new file mode 100644
index 0000000..255cb65
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-lib.tsx
@@ -0,0 +1,854 @@
+import type {
+  CascaderCollapse,
+  CascaderFlatNode,
+  CascaderIndex,
+  CascaderNode,
+  CascaderPathSegment,
+  CascaderSelectable,
+} from "@/components/reui/cascader/cascader-types"
+
+/** Root level key in `childrenOf`. NUL-prefixed so no real value collides. */
+export const CASCADER_ROOT_KEY = "\u0000root"
+
+/**
+ * Paging pseudo-node prefix. Written as an escape sequence, not a raw 0x00
+ * byte: a literal NUL makes this module read as binary and `grep -I` skips it.
+ */
+export const CASCADER_MORE_PREFIX = "\u0000more:"
+
+/* -------------------------------------------------------------------------- */
+/*                                Scroll layout                               */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The four scroll classes. In the lib because `cascader-columns.tsx` needs them
+ * too and must not import `cascader.tsx`. Shell > bound > scrollport > rows.
+ */
+
+/**
+ * The bound. `min()` over an undefined custom property is an INVALID
+ * declaration that drops the whole max-height, hence the `100vh` fallback: an
+ * inline panel has no positioner, so no `--available-height`. `24rem` is the
+ * default cap, so the common case sets no variable at all.
+ */
+export const CASCADER_LIST_HEIGHT_CLASS =
+  "max-h-[min(var(--available-height,100vh),var(--cascader-max-height,24rem))]"
+
+/**
+ * Each style's list padding: rows take it as `padding`, the scrollport as
+ * `scroll-padding` floored at 4px so lyra's `0` does not strand a row.
+ * Mirrored per style from `registry/styles/style-*.css`; keep them in step.
+ */
+export const CASCADER_LIST_PAD_CLASS =
+  "[--cascader-list-pad:4px]"
+
+/** The scrollport: a `max-h-*` on the ScrollArea ROOT bounds nothing. */
+export const CASCADER_SCROLL_CLASS =
+  "size-full min-h-0 **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain **:data-[slot=scroll-area-viewport]:scroll-py-[max(var(--cascader-list-pad,4px),4px)]"
+
+/** The rows' box; `data-empty:p-0` keeps an empty state from double inset. */
+export const CASCADER_ROWS_CLASS = "p-(--cascader-list-pad,4px) data-empty:p-0"
+
+/* -------------------------------------------------------------------------- */
+/*                                  Tab order                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * What counts as a keyboard stop. Base UI's ScrollArea viewport makes ITSELF
+ * tabbable when content overflows (`hiddenState.x && hiddenState.y ? -1 : 0`),
+ * an unnamed stop per level that `ui/scroll-area.tsx` will not let us suppress.
+ */
+const CASCADER_TAB_STOP_SELECTOR =
+  'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+
+/** The stop to step over: nothing here focuses the scrollport on purpose. */
+const CASCADER_TAB_SKIP_SELECTOR = '[data-slot="scroll-area-viewport"]'
+
+/** Out of the tab order whatever they contain; layout is never consulted. */
+const CASCADER_TAB_HIDDEN_SELECTOR = "[hidden],[inert],[aria-hidden='true']"
+
+/** The panel's real keyboard stops, in DOM order. */
+function getCascaderTabStops(panel: HTMLElement): HTMLElement[] {
+  const stops = Array.from(
+    panel.querySelectorAll<HTMLElement>(CASCADER_TAB_STOP_SELECTOR)
+  )
+  return stops.filter(
+    (stop) =>
+      // Option and trail rows are real `<button>`s with `tabindex="-1"`.
+      stop.getAttribute("tabindex") !== "-1" &&
+      !stop.matches(CASCADER_TAB_SKIP_SELECTOR) &&
+      !stop.closest(CASCADER_TAB_HIDDEN_SELECTOR)
+  )
+}
+
+/** The footer's own stops; an `aria-disabled` command still counts as one. */
+export function getCascaderFooterStops(scope: HTMLElement): HTMLElement[] {
+  const footer = scope.matches('[data-slot="cascader-footer"]')
+    ? scope
+    : scope.querySelector<HTMLElement>('[data-slot="cascader-footer"]')
+  if (!footer) return []
+  return getCascaderTabStops(footer)
+}
+
+/** Where Tab lands, or `null` to let the browser out: focus is never trapped. */
+export function getCascaderTabTarget(
+  panel: HTMLElement,
+  from: Element | null,
+  backwards: boolean
+): HTMLElement | null {
+  const stops = getCascaderTabStops(panel)
+  if (stops.length === 0 || !from) return null
+
+  const index = stops.indexOf(from as HTMLElement)
+  if (index !== -1) return stops[index + (backwards ? -1 : 1)] ?? null
+
+  if (backwards) {
+    for (let i = stops.length - 1; i >= 0; i -= 1) {
+      const position = from.compareDocumentPosition(stops[i])
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) return stops[i]
+    }
+    return null
+  }
+
+  for (const stop of stops) {
+    const position = from.compareDocumentPosition(stop)
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return stop
+  }
+  return null
+}
+
+/**
+ * The writing direction at `element`. `DirectionProvider` may only vote yes:
+ * unmounted it answers `"ltr"`, which would override a real `<html dir="rtl">`.
+ */
+export function isCascaderRtl(element: Element, provided: string): boolean {
+  if (provided === "rtl") return true
+  const explicit = element.closest("[dir]")?.getAttribute("dir")?.toLowerCase()
+  if (explicit === "rtl") return true
+  if (explicit === "ltr") return false
+  return (
+    element.ownerDocument?.defaultView?.getComputedStyle(element).direction ===
+    "rtl"
+  )
+}
+
+/**
+ * The paging row as a REAL node, not a DOM-only row after the list: every index
+ * Base UI hands out indexes the RENDERED array, so a DOM-only row shifts them.
+ */
+export function createCascaderMoreNode<T = unknown>(
+  parentKey: string,
+  loadedCount = 0
+): CascaderNode<T> {
+  return {
+    value: `${CASCADER_MORE_PREFIX}${parentKey}`,
+    // Empty on purpose: a typeahead letter must never reach the paging row.
+    label: "",
+    // Feeds the row's "Loading more..." wording, with no second prop to thread.
+    count: loadedCount,
+  }
+}
+
+export function isCascaderMoreNode<T>(node: CascaderNode<T>): boolean {
+  return node.value.startsWith(CASCADER_MORE_PREFIX)
+}
+
+/** The level key a paging pseudo-node belongs to, or `null` for a real node. */
+export function getCascaderMoreParent<T>(node: CascaderNode<T>): string | null {
+  if (!isCascaderMoreNode(node)) return null
+  return node.value.slice(CASCADER_MORE_PREFIX.length)
+}
+
+/** Either input shape into one index. Cycle-guarded depths; first wins. */
+export function buildCascaderIndex<T = unknown>(
+  items: readonly CascaderNode<T>[] | undefined,
+  getParent?: (node: CascaderNode<T>) => string | null | undefined
+): CascaderIndex<T> {
+  const byValue = new Map<string, CascaderNode<T>>()
+  const childrenOf = new Map<string, CascaderNode<T>[]>()
+  const parentOf = new Map<string, string | null>()
+  const depthOf = new Map<string, number>()
+  const all: CascaderNode<T>[] = []
+
+  const push = (parentKey: string, node: CascaderNode<T>) => {
+    const bucket = childrenOf.get(parentKey)
+    if (bucket) {
+      bucket.push(node)
+    } else {
+      childrenOf.set(parentKey, [node])
+    }
+  }
+
+  if (getParent) {
+    for (const node of items ?? []) {
+      // A nullish entry is a data bug: skip it like a duplicate, say so in dev.
+      if (node == null) {
+        if (process.env.NODE_ENV !== "production") {
+          warnCascaderOnce(
+            "nullish-entry",
+            "Ignored a null or undefined entry in `items` or `children`. Check the arrays you pass in."
+          )
+        }
+        continue
+      }
+      if (byValue.has(node.value)) continue
+      byValue.set(node.value, node)
+      all.push(node)
+    }
+
+    for (const node of all) {
+      const rawParent = getParent(node)
+      // An unknown parent makes the node a root rather than dropping the row.
+      const parent =
+        rawParent != null && byValue.has(rawParent) ? rawParent : null
+      parentOf.set(node.value, parent)
+      push(parent ?? CASCADER_ROOT_KEY, node)
+    }
+
+    for (const node of all) {
+      let depth = 0
+      let cursor = parentOf.get(node.value) ?? null
+      const seen = new Set<string>([node.value])
+      while (cursor != null && !seen.has(cursor)) {
+        seen.add(cursor)
+        depth += 1
+        cursor = parentOf.get(cursor) ?? null
+      }
+      depthOf.set(node.value, depth)
+    }
+  } else {
+    const walk = (
+      nodes: readonly CascaderNode<T>[] | undefined,
+      parent: string | null,
+      depth: number
+    ) => {
+      for (const node of nodes ?? []) {
+        // Same degradation as the flat path above.
+        if (node == null) {
+          if (process.env.NODE_ENV !== "production") {
+            warnCascaderOnce(
+              "nullish-entry",
+              "Ignored a null or undefined entry in `items` or `children`. Check the arrays you pass in."
+            )
+          }
+          continue
+        }
+        if (byValue.has(node.value)) continue
+        byValue.set(node.value, node)
+        parentOf.set(node.value, parent)
+        depthOf.set(node.value, depth)
+        all.push(node)
+        push(parent ?? CASCADER_ROOT_KEY, node)
+        if (node.children?.length) walk(node.children, node.value, depth + 1)
+      }
+    }
+    walk(items, null, 0)
+  }
+
+  return {
+    byValue,
+    childrenOf,
+    parentOf,
+    depthOf,
+    roots: childrenOf.get(CASCADER_ROOT_KEY) ?? [],
+    all,
+  }
+}
+
+/**
+ * Folds loaded pages into an index built from `items`, so a re-render with a
+ * new `items` array keeps what the user drilled into. Static `items` wins;
+ * `detached` is `byValue` ONLY, or deep search doubles it and `childrenOf` lies.
+ */
+export function mergeCascaderIndex<T = unknown>(
+  base: CascaderIndex<T>,
+  pages: ReadonlyMap<string, readonly CascaderNode<T>[]>,
+  detached?: ReadonlyMap<string, CascaderNode<T>>
+): CascaderIndex<T> {
+  // Identity stability: every downstream `useMemo` is keyed on this index.
+  if (pages.size === 0 && !detached?.size) return base
+
+  const byValue = new Map(base.byValue)
+  const childrenOf = new Map(base.childrenOf)
+  const parentOf = new Map(base.parentOf)
+  const depthOf = new Map(base.depthOf)
+
+  // Copy-on-write per bucket: only levels that got a page pay for a new array.
+  const copied = new Set<string>()
+  const append = (parentKey: string, node: CascaderNode<T>) => {
+    let bucket = childrenOf.get(parentKey)
+    if (!copied.has(parentKey)) {
+      bucket = bucket ? bucket.slice() : []
+      childrenOf.set(parentKey, bucket)
+      copied.add(parentKey)
+    }
+    bucket!.push(node)
+  }
+
+  const insert = (parentKey: string, nodes: readonly CascaderNode<T>[]) => {
+    for (const node of nodes) {
+      if (byValue.has(node.value)) continue
+      byValue.set(node.value, node)
+      parentOf.set(
+        node.value,
+        parentKey === CASCADER_ROOT_KEY ? null : parentKey
+      )
+      append(parentKey, node)
+      if (node.children?.length) insert(node.value, node.children)
+    }
+  }
+
+  for (const [parentKey, nodes] of pages) insert(parentKey, nodes)
+
+  for (const value of byValue.keys()) {
+    if (depthOf.has(value)) continue
+    let depth = 0
+    let cursor = parentOf.get(value) ?? null
+    const seen = new Set<string>([value])
+    while (cursor != null && !seen.has(cursor)) {
+      seen.add(cursor)
+      depth += 1
+      cursor = parentOf.get(cursor) ?? null
+    }
+    depthOf.set(value, depth)
+  }
+
+  const roots = childrenOf.get(CASCADER_ROOT_KEY) ?? []
+
+  // Depth first over the MERGED tree, so `all` keeps document order.
+  const all: CascaderNode<T>[] = []
+  const visited = new Set<string>()
+  const walk = (nodes: readonly CascaderNode<T>[]) => {
+    for (const node of nodes) {
+      if (visited.has(node.value)) continue
+      visited.add(node.value)
+      all.push(node)
+      const children = childrenOf.get(node.value)
+      if (children?.length) walk(children)
+    }
+  }
+  walk(roots)
+
+  // A page whose parent never arrived stays searchable rather than vanishing.
+  for (const [value, node] of byValue) {
+    if (visited.has(value)) continue
+    visited.add(value)
+    all.push(node)
+  }
+
+  if (detached) {
+    for (const [value, node] of detached) {
+      if (byValue.has(value)) continue
+      byValue.set(value, node)
+    }
+  }
+
+  return { byValue, childrenOf, parentOf, depthOf, roots, all }
+}
+
+/** Children of `parent`, or the root level when `parent` is nullish. */
+export function getCascaderChildren<T>(
+  index: CascaderIndex<T>,
+  parent?: string | null
+): CascaderNode<T>[] {
+  return index.childrenOf.get(parent ?? CASCADER_ROOT_KEY) ?? []
+}
+
+/** A branch has known children, or `hasChildren` for an unfetched level. */
+export function isCascaderBranch<T>(
+  index: CascaderIndex<T>,
+  node: CascaderNode<T>
+): boolean {
+  if (node.hasChildren) return true
+  return (index.childrenOf.get(node.value)?.length ?? 0) > 0
+}
+
+/** Trailing count for the default row. Explicit `count` wins over the tree. */
+export function getCascaderCount<T>(
+  index: CascaderIndex<T>,
+  node: CascaderNode<T>
+): number {
+  if (typeof node.count === "number") return node.count
+  return index.childrenOf.get(node.value)?.length ?? 0
+}
+
+/** Whether a node may be committed as a selection. */
+export function isCascaderSelectable<T>(
+  index: CascaderIndex<T>,
+  node: CascaderNode<T>,
+  selectable: CascaderSelectable<T>
+): boolean {
+  // Before the branches a consumer controls: `selectable="any"` says yes to
+  // every node, and committing the paging row would select a level's name.
+  if (isCascaderMoreNode(node)) return false
+  if (node.disabled) return false
+  // A disabled ANCESTOR refuses the whole subtree: `searchCascaderDeep` still
+  // surfaces children of a branch the UI will not let anyone open.
+  {
+    const seen = new Set<string>([node.value])
+    let cursor = index.parentOf.get(node.value) ?? null
+    while (cursor != null && !seen.has(cursor)) {
+      seen.add(cursor)
+      if (index.byValue.get(cursor)?.disabled) return false
+      cursor = index.parentOf.get(cursor) ?? null
+    }
+  }
+  if (typeof selectable === "function") return selectable(node)
+  if (selectable === "any") return true
+  return !isCascaderBranch(index, node)
+}
+
+/** Ancestor chain for `value`, root first. Empty while async data loads. */
+export function getCascaderPath<T>(
+  index: CascaderIndex<T>,
+  value: string | null | undefined
+): CascaderNode<T>[] {
+  if (value == null) return []
+  const chain: CascaderNode<T>[] = []
+  const seen = new Set<string>()
+  let cursor: string | null | undefined = value
+  while (cursor != null && !seen.has(cursor)) {
+    seen.add(cursor)
+    const node = index.byValue.get(cursor)
+    if (!node) break
+    chain.push(node)
+    cursor = index.parentOf.get(cursor) ?? null
+  }
+  return chain.reverse()
+}
+
+/**
+ * `toLocaleLowerCase`, not `toLowerCase`: the invariant mapping turns Turkish
+ * "I" into "i" not "ı", so "ışık" would never match "IŞIK". Both sides fold here.
+ */
+export function foldCascaderText(text: string): string {
+  return text.toLocaleLowerCase()
+}
+
+/** Folds once so callers can hoist the cost out of a per-node loop. */
+export function normalizeCascaderQuery(query: string): string {
+  return foldCascaderText(query.trim())
+}
+
+/** Case-insensitive substring over label and keywords; pre-fold the query. */
+export function matchesCascaderQuery<T>(
+  node: CascaderNode<T>,
+  normalized: string
+): boolean {
+  if (!normalized) return true
+  // Coerced, not trusted: a label-less node is malformed data, not a crash.
+  if (foldCascaderText(node.label ?? "").includes(normalized)) return true
+  if (node.keywords) {
+    for (const keyword of node.keywords) {
+      if (foldCascaderText(keyword).includes(normalized)) return true
+    }
+  }
+  return false
+}
+
+/** Filters one level in place-order. Returns the input when the query is empty. */
+export function filterCascaderLevel<T>(
+  nodes: readonly CascaderNode<T>[],
+  query: string,
+  matches: (
+    node: CascaderNode<T>,
+    normalized: string
+  ) => boolean = matchesCascaderQuery
+): CascaderNode<T>[] {
+  const normalized = normalizeCascaderQuery(query)
+  if (!normalized) return nodes as CascaderNode<T>[]
+  return nodes.filter((node) => matches(node, normalized))
+}
+
+/** Searches every node, optionally under `within`, in one pass over `all`. */
+export function searchCascaderDeep<T>(
+  index: CascaderIndex<T>,
+  query: string,
+  options: {
+    within?: string | null
+    limit?: number
+    matches?: (node: CascaderNode<T>, normalized: string) => boolean
+  } = {}
+): CascaderNode<T>[] {
+  const normalized = normalizeCascaderQuery(query)
+  if (!normalized) return []
+
+  const { within, limit = 200, matches = matchesCascaderQuery } = options
+  const results: CascaderNode<T>[] = []
+
+  // One memoised ancestry map per query. The provisional `false` written on the
+  // way up doubles as the cycle guard; the trail is promoted once `within` hits.
+  const ancestry = within == null ? null : new Map<string, boolean>()
+  const isWithin = (node: CascaderNode<T>) => {
+    if (within == null || !ancestry) return true
+    const trail: string[] = []
+    let answer = false
+    let cursor: string | null | undefined = index.parentOf.get(node.value)
+    while (cursor != null) {
+      if (cursor === within) {
+        answer = true
+        break
+      }
+      const cached = ancestry.get(cursor)
+      if (cached !== undefined) {
+        answer = cached
+        break
+      }
+      ancestry.set(cursor, false)
+      trail.push(cursor)
+      cursor = index.parentOf.get(cursor) ?? null
+    }
+    if (answer) for (const value of trail) ancestry.set(value, true)
+    return answer
+  }
+
+  for (const node of index.all) {
+    if (results.length >= limit) break
+    if (!matches(node, normalized)) continue
+    if (!isWithin(node)) continue
+    results.push(node)
+  }
+
+  return results
+}
+
+/**
+ * Flattens the tree into tree mode's visible rows. A `sentinels` paging row
+ * COUNTS as a sibling in `aria-setsize`: it holds an index of its own.
+ */
+export function flattenCascaderTree<T>(
+  index: CascaderIndex<T>,
+  expanded: ReadonlySet<string>,
+  sentinels?: ReadonlySet<string>
+): CascaderFlatNode<T>[] {
+  const rows: CascaderFlatNode<T>[] = []
+
+  const walk = (
+    nodes: readonly CascaderNode<T>[],
+    parentKey: string,
+    depth: number
+  ) => {
+    const sentinel = sentinels?.has(parentKey) ?? false
+    const setSize = nodes.length + (sentinel ? 1 : 0)
+    for (let i = 0; i < nodes.length; i += 1) {
+      const node = nodes[i]
+      const branch = isCascaderBranch(index, node)
+      const isExpanded = branch && expanded.has(node.value)
+      rows.push({
+        node,
+        depth,
+        branch,
+        expanded: isExpanded,
+        setSize,
+        posInSet: i + 1,
+      })
+      if (isExpanded) {
+        walk(index.childrenOf.get(node.value) ?? [], node.value, depth + 1)
+      }
+    }
+    if (sentinel) {
+      rows.push({
+        node: createCascaderMoreNode<T>(parentKey, nodes.length),
+        depth,
+        branch: false,
+        expanded: false,
+        setSize,
+        posInSet: setSize,
+      })
+    }
+  }
+
+  walk(index.roots, CASCADER_ROOT_KEY, 0)
+  return rows
+}
+
+/** Shortens a path; the ellipsis segment still carries the hidden nodes. */
+export function collapseCascaderPath<T>(
+  path: readonly CascaderNode<T>[],
+  options: { maxSegments?: number; collapse?: CascaderCollapse } = {}
+): CascaderPathSegment<T>[] {
+  const { maxSegments = 3, collapse = "middle" } = options
+
+  const asNodes = (
+    nodes: readonly CascaderNode<T>[]
+  ): CascaderPathSegment<T>[] =>
+    nodes.map((node) => ({ type: "node" as const, node }))
+
+  if (collapse === "none" || maxSegments <= 0 || path.length <= maxSegments) {
+    return asNodes(path)
+  }
+
+  if (collapse === "start") {
+    const tail = path.slice(path.length - maxSegments)
+    return [
+      { type: "ellipsis", hidden: path.slice(0, path.length - maxSegments) },
+      ...asNodes(tail),
+    ]
+  }
+
+  // "middle": keep the root for orientation and as much of the tail as fits.
+  const head = path.slice(0, 1)
+  const tailCount = maxSegments - 1
+  const tail = path.slice(path.length - tailCount)
+  const hidden = path.slice(1, path.length - tailCount)
+
+  if (hidden.length === 0) return asNodes(path)
+
+  return [...asNodes(head), { type: "ellipsis", hidden }, ...asNodes(tail)]
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Cascade selection                             */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Every LOADED node under `value`, root first. Reaching an unfetched descendant
+ * would mean a network request per level of the subtree on every selection.
+ */
+export function collectCascaderSubtree<T>(
+  index: CascaderIndex<T>,
+  value: string
+): CascaderNode<T>[] {
+  const root = index.byValue.get(value)
+  if (!root) return []
+
+  const out: CascaderNode<T>[] = []
+  const seen = new Set<string>()
+  const walk = (node: CascaderNode<T>) => {
+    if (seen.has(node.value)) return
+    seen.add(node.value)
+    out.push(node)
+    const children = index.childrenOf.get(node.value)
+    if (children) for (const child of children) walk(child)
+  }
+  walk(root)
+  return out
+}
+
+/**
+ * Toggles `value` with its loaded subtree, then reconciles ancestors. One flat
+ * array, no hidden "checked" state: a branch is in the selection exactly when
+ * every selectable loaded child of it is, which keeps a row's checked state an
+ * O(1) lookup. Nodes `isSelectable` rejects are skipped down AND ignored up,
+ * the pressed node excepted.
+ */
+export function applyCascadeSelection<T>(
+  index: CascaderIndex<T>,
+  selected: readonly string[],
+  value: string,
+  select: boolean,
+  isSelectable: (node: CascaderNode<T>) => boolean = () => true
+): string[] {
+  const next = new Set(selected)
+  const subtree = collectCascaderSubtree(index, value)
+
+  // An unknown value still toggles itself, so an early async selection lands.
+  if (subtree.length === 0) {
+    if (select) next.add(value)
+    else next.delete(value)
+  }
+
+  for (const node of subtree) {
+    // The pressed node is exempt: it was committed, so it is selectable.
+    if (node.value !== value && !isSelectable(node)) continue
+    if (select) next.add(node.value)
+    else next.delete(node.value)
+  }
+
+  // Bottom up: a parent can only answer once its children have.
+  const seen = new Set<string>([value])
+  let cursor = index.parentOf.get(value) ?? null
+  while (cursor != null && !seen.has(cursor)) {
+    seen.add(cursor)
+    const parent = index.byValue.get(cursor)
+    const children = index.childrenOf.get(cursor) ?? []
+    const selectable = children.filter((child) => isSelectable(child))
+    const full =
+      selectable.length > 0 &&
+      selectable.every((child) => next.has(child.value)) &&
+      // Never promote a node the consumer said may not be committed. Under
+      // `selectable="leaf"` no branch qualifies, hence the `cascade` warning.
+      !!parent &&
+      isSelectable(parent)
+    if (full) next.add(cursor)
+    else next.delete(cursor)
+    cursor = index.parentOf.get(cursor) ?? null
+  }
+
+  return Array.from(next)
+}
+
+/**
+ * How many selected nodes each value has BELOW it, itself excluded. Walks UP
+ * from each selection: a per-row subtree scan would be quadratic and re-paid.
+ */
+export function getCascaderSelectedDescendants<T>(
+  index: CascaderIndex<T>,
+  selected: readonly string[]
+): Map<string, number> {
+  const counts = new Map<string, number>()
+
+  for (const value of selected) {
+    const seen = new Set<string>([value])
+    let cursor = index.parentOf.get(value) ?? null
+    while (cursor != null && !seen.has(cursor)) {
+      seen.add(cursor)
+      counts.set(cursor, (counts.get(cursor) ?? 0) + 1)
+      cursor = index.parentOf.get(cursor) ?? null
+    }
+  }
+
+  return counts
+}
+
+/** The PARTIALLY selected values, read off counts the caller already holds. */
+export function getCascaderIndeterminateFrom(
+  counts: ReadonlyMap<string, number>,
+  selected: readonly string[]
+): Set<string> {
+  const selectedSet = new Set(selected)
+  const partial = new Set<string>()
+
+  for (const [value, count] of counts) {
+    if (count > 0 && !selectedSet.has(value)) partial.add(value)
+  }
+
+  return partial
+}
+
+/** The one-call form; the root uses the two halves above and its own counts. */
+export function getCascaderIndeterminate<T>(
+  index: CascaderIndex<T>,
+  selected: readonly string[]
+): Set<string> {
+  return getCascaderIndeterminateFrom(
+    getCascaderSelectedDescendants(index, selected),
+    selected
+  )
+}
+
+/** How `getCascaderCheckedValues` condenses a full-closure selection. */
+export type CascaderCheckedStrategy = "all" | "parent" | "child"
+
+/**
+ * The cascade selection under a reporting strategy. DERIVED OUTPUT ONLY: the
+ * STORED value stays the full closure, which keeps a checked state an O(1)
+ * lookup. `"all"` is the closure; `"parent"` drops a value whose parent is
+ * selected; `"child"` drops one with a selected child.
+ */
+export function getCascaderCheckedValues<T>(
+  index: CascaderIndex<T>,
+  selected: readonly string[],
+  strategy: CascaderCheckedStrategy
+): readonly string[] {
+  if (strategy === "all") return selected
+
+  const set = new Set(selected)
+  if (strategy === "parent") {
+    return selected.filter((value) => {
+      const parent = index.parentOf.get(value)
+      return parent == null || !set.has(parent)
+    })
+  }
+
+  return selected.filter((value) => {
+    const children = index.childrenOf.get(value)
+    if (!children?.length) return true
+    return !children.some((child) => set.has(child.value))
+  })
+}
+
+/** Values in `nodes` whose label collides, so the chip must show its path. */
+export function findAmbiguousCascaderLabels<T>(
+  nodes: readonly CascaderNode<T>[]
+): Set<string> {
+  const firstByLabel = new Map<string, string>()
+  const ambiguous = new Set<string>()
+
+  for (const node of nodes) {
+    const first = firstByLabel.get(node.label)
+    if (first === undefined) {
+      firstByLabel.set(node.label, node.value)
+      continue
+    }
+    ambiguous.add(node.value)
+    ambiguous.add(first)
+  }
+
+  return ambiguous
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Development only                              */
+/* -------------------------------------------------------------------------- */
+
+/** Warnings already emitted. Module scoped, or they repeat once per render. */
+const CASCADER_WARNED = new Set<string>()
+
+/** Warns once per `key`, never in production, never by throwing. */
+export function warnCascaderOnce(key: string, message: string): void {
+  if (process.env.NODE_ENV === "production") return
+  if (CASCADER_WARNED.has(key)) return
+  CASCADER_WARNED.add(key)
+  console.warn(`[Cascader] ${message}`)
+}
+
+/** Empties the ledger. Tests only; a warning is meant to be seen once. */
+export function resetCascaderWarnings(): void {
+  CASCADER_WARNED.clear()
+}
+
+/** What a dev-time scan of the consumer's `items` found wrong with it. */
+export interface CascaderDataIssues {
+  /** Values appearing more than once. First wins, so a duplicate drops a row. */
+  duplicates: string[]
+  /** Values on a `getParent` cycle. Depth is clamped, so the tree reads wrong. */
+  cycles: string[]
+}
+
+/** Dev-time scan, kept out of `buildCascaderIndex` so the build stays hot. */
+export function findCascaderDataIssues<T>(
+  items: readonly CascaderNode<T>[] | undefined,
+  getParent?: (node: CascaderNode<T>) => string | null | undefined
+): CascaderDataIssues {
+  const seen = new Set<string>()
+  const duplicates = new Set<string>()
+  const flat: CascaderNode<T>[] = []
+
+  const visit = (nodes: readonly CascaderNode<T>[] | undefined) => {
+    for (const node of nodes ?? []) {
+      // The build skips a nullish entry, and this runs BEFORE its warning.
+      if (node == null) continue
+      if (seen.has(node.value)) duplicates.add(node.value)
+      else seen.add(node.value)
+      flat.push(node)
+      // Flat mode walks them too: BOTH `children` and `getParent` is a bug.
+      if (node.children?.length) visit(node.children)
+    }
+  }
+  visit(items)
+
+  const cycles: string[] = []
+  if (getParent) {
+    const parentOf = new Map<string, string | null>()
+    for (const node of flat) {
+      if (parentOf.has(node.value)) continue
+      const raw = getParent(node)
+      parentOf.set(node.value, raw != null && seen.has(raw) ? raw : null)
+    }
+    for (const node of flat) {
+      const walked = new Set<string>([node.value])
+      let cursor = parentOf.get(node.value) ?? null
+      while (cursor != null) {
+        if (walked.has(cursor)) {
+          cycles.push(node.value)
+          break
+        }
+        walked.add(cursor)
+        cursor = parentOf.get(cursor) ?? null
+      }
+    }
+  }
+
+  return { duplicates: Array.from(duplicates), cycles }
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-nav.tsx b/apps/web/src/components/reui/cascader/cascader-nav.tsx
new file mode 100644
index 0000000..b05a0c8
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-nav.tsx
@@ -0,0 +1,637 @@
+import * as React from "react"
+import {
+  useCascaderActions,
+  useCascaderState,
+} from "@/components/reui/cascader/cascader-context"
+import { resolveCascaderSearchLabel } from "@/components/reui/cascader/cascader-i18n"
+import {
+  collapseCascaderPath,
+  getCascaderFooterStops,
+  getCascaderPath,
+  isCascaderRtl,
+} from "@/components/reui/cascader/cascader-lib"
+import type {
+  CascaderCollapse,
+  CascaderNode,
+  CascaderValueDisplay,
+} from "@/components/reui/cascader/cascader-types"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { useDirection } from "@base-ui/react/direction-provider"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ChevronRightIcon, ChevronLeftIcon } from "lucide-react"
+
+/* -------------------------------------------------------------------------- */
+/*                                  Separator                                 */
+/* -------------------------------------------------------------------------- */
+
+function PathChevron() {
+  return (
+    <ChevronRightIcon className="size-3 shrink-0 opacity-50 rtl:-scale-x-100" />
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                     Nav                                    */
+/* -------------------------------------------------------------------------- */
+
+export type CascaderNavProps = useRender.ComponentProps<"div">
+
+/**
+ * Header: back control, search input, and the separator under them. The
+ * breadcrumb belongs with the list below: it describes the rows, not the field.
+ */
+function CascaderNav({ className, ...props }: CascaderNavProps) {
+  const defaultProps = {
+    "data-slot": "cascader-nav",
+    className: cn(
+      // `py-1`, not `py-1.5`: the row inside sets its own per-style height, so
+      // even padding read too tall. 6px beside the field, 4px above and below.
+      "border-border/60 flex shrink-0 flex-col gap-1 border-b px-1.5 py-1",
+      className
+    ),
+  }
+
+  return useRender({
+    defaultTagName: "div",
+    render: props.render,
+    props: mergeProps<"div">(defaultProps, props),
+  })
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Back                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderBackProps extends Omit<
+  useRender.ComponentProps<"button">,
+  "children"
+> {
+  children?: React.ReactNode
+}
+
+/** Pops one level. Renders nothing at the root, so no dead header space. */
+function CascaderBack({ className, children, ...props }: CascaderBackProps) {
+  const { popLevel, labels, mode } = useCascaderActions()
+  const { path } = useCascaderState()
+
+  // Checked after `useRender`, never before it: an early return would change
+  // the hook count between the root level and any deeper one.
+  const hidden = mode !== "drill" || path.length === 0
+
+  const defaultProps = {
+    "data-slot": "cascader-back",
+    type: "button" as const,
+    "aria-label": labels.back,
+    onClick: () => popLevel(),
+    className: cn(
+      "text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 flex shrink-0 items-center justify-center rounded-md outline-hidden transition-colors focus-visible:ring-2",
+      // A notch under the row height: an affordance, not a second field.
+      "size-6",
+      className
+    ),
+    children: children ?? (
+      <ChevronLeftIcon className="size-4 rtl:-scale-x-100" />
+    ),
+  }
+
+  const element = useRender({
+    defaultTagName: "button",
+    render: props.render,
+    props: mergeProps<"button">(defaultProps, props),
+  })
+
+  return hidden ? null : element
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 Breadcrumb                                 */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderBreadcrumbProps extends Omit<
+  useRender.ComponentProps<"nav">,
+  "children"
+> {
+  /** Maximum visible node segments before the middle collapses. */
+  maxSegments?: number
+  collapse?: CascaderCollapse
+  /** Clicking a segment navigates back to that level. Defaults to true. */
+  interactive?: boolean
+}
+
+/**
+ * Compact trail of the current level AND its ancestors, collapsed by the same
+ * helper as `CascaderValue` so panel and trigger cannot disagree. The current
+ * level IS the last crumb: dropping it read as a rendering bug, a trail naming
+ * only the places you are not.
+ */
+function CascaderBreadcrumb({
+  className,
+  maxSegments = 3,
+  collapse = "middle",
+  interactive = true,
+  ...props
+}: CascaderBreadcrumbProps) {
+  const { goToDepth, mode, labels } = useCascaderActions()
+  const { path, index } = useCascaderState()
+
+  // The WHOLE path, current level included; unresolvable entries drop out.
+  const nodes = path
+    .map((value) => index.byValue.get(value))
+    .filter(Boolean) as CascaderNode[]
+  const segments = collapseCascaderPath(nodes, { maxSegments, collapse })
+  // `collapseCascaderPath` never collapses the last node away, so this is
+  // always the final segment - derived rather than assumed, so a `collapse`
+  // mode that ever changes that cannot mark an ancestor as the current page.
+  const currentValue = nodes.length ? nodes[nodes.length - 1].value : null
+
+  // See `CascaderBack`: the hide check must not short-circuit past `useRender`.
+  const hidden = mode !== "drill" || nodes.length === 0
+
+  const goTo = (node: CascaderNode) => {
+    const depth = path.indexOf(node.value)
+    if (depth < 0) return
+    // `goToDepth`, not a bare `setPath`: it reports `reason: "breadcrumb"`,
+    // clears the query and drops any pending navigation.
+    goToDepth(depth + 1)
+  }
+
+  const defaultProps = {
+    "data-slot": "cascader-breadcrumb",
+    "aria-label": labels.breadcrumbLabel,
+    className: cn(
+      "text-muted-foreground flex min-w-0 shrink-0 items-center gap-0.5 pt-1.5 pb-0.5 text-xs",
+      // Lines up with the ROWS, not the header: each style's list padding plus
+      // its row inset. vega/mira/rhea `p-1`+`pl-2`, nova `p-1`+`pl-1.5`, maia
+      // `p-1`+`pl-3`, lyra `pl-2`, luma/sera `p-1.5`+`pl-3`, per style-*.css.
+      "px-2.5",
+      className
+    ),
+    children: segments.map((segment, i) => (
+      <React.Fragment
+        key={segment.type === "node" ? segment.node.value : `gap-${i}`}
+      >
+        {i > 0 ? <PathChevron /> : null}
+        {segment.type === "ellipsis" ? (
+          <span
+            data-slot="cascader-breadcrumb-ellipsis"
+            title={segment.hidden
+              .map((n) => n.label)
+              .join(` ${labels.pathSeparator} `)}
+            className="shrink-0"
+          >
+            &hellip;
+          </span>
+        ) : interactive && segment.node.value !== currentValue ? (
+          <button
+            type="button"
+            data-slot="cascader-breadcrumb-item"
+            onClick={() => goTo(segment.node)}
+            className="hover:text-foreground focus-visible:ring-ring/50 max-w-32 truncate rounded-sm outline-hidden transition-colors focus-visible:ring-2"
+          >
+            {segment.node.label}
+          </button>
+        ) : (
+          <span
+            data-slot="cascader-breadcrumb-item"
+            /* The level on screen: a span because it goes nowhere, plus
+               `aria-current="page"` so it is not read as one of a flat list. */
+            {...(segment.node.value === currentValue
+              ? { "aria-current": "page" as const }
+              : null)}
+            className={cn(
+              "max-w-32 truncate",
+              segment.node.value === currentValue &&
+                "text-foreground font-medium"
+            )}
+          >
+            {segment.node.label}
+          </span>
+        )}
+      </React.Fragment>
+    )),
+  }
+
+  const element = useRender({
+    defaultTagName: "nav",
+    render: props.render,
+    props: mergeProps<"nav">(defaultProps, props),
+  })
+
+  return hidden ? null : element
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Input                                   */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderInputProps extends ComboboxPrimitive.Input.Props {
+  /** Renders the back control inline, before the field. Defaults to true. */
+  showBack?: boolean
+}
+
+/** Base UI hands its input handlers an event carrying the veto hook. */
+type CascaderInputKeyEvent = Parameters<
+  NonNullable<ComboboxPrimitive.Input.Props["onKeyDown"]>
+>[0]
+
+/**
+ * Search field. MUST render inside the positioner: only there does Base UI skip
+ * the refill from the committed selection that would fight every level swap.
+ */
+function CascaderInput({
+  className,
+  showBack = true,
+  placeholder,
+  onKeyDown,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}: CascaderInputProps) {
+  const {
+    labels,
+    popLevel,
+    mode,
+    getHighlighted,
+    isBranch,
+    navigate,
+    index,
+    toggleExpanded,
+    inline,
+    invalid,
+    baseId,
+  } = useCascaderActions()
+  const direction = useDirection()
+  const { currentParent, query, path, renderedItems, treeRows } =
+    useCascaderState()
+
+  const resolvedPlaceholder =
+    placeholder ?? resolveCascaderSearchLabel(labels, currentParent?.label)
+
+  // Not `showBack`: `CascaderBack` renders nothing at the root or outside
+  // drill mode, where the field's own leading `px-1.5` is wanted. Beside the
+  // button it stacks with the row's `gap-1` into a 10px hole, hence `ps-0`.
+  const backVisible = showBack && mode === "drill" && path.length > 0
+
+  const hintId = `${baseId}-hint`
+  // Base UI names no list while inline; columns mode moves the real listbox to
+  // the deepest panel, which is the `path.length` one.
+  const listId = `${baseId}-column-${mode === "columns" ? path.length : 0}`
+
+  // The direction the HINT is worded for. `handleKeyDown` re-reads
+  // `isCascaderRtl` per keystroke; this is text on screen before any key, so
+  // the same check runs once against the mounted DOM (on the hint span, so no
+  // second ref into Base UI's input). SSR renders the "ltr" default and
+  // corrects on hydration. `direction` is the only dep: a `dir` attribute and
+  // the stylesheet are declarations, not state, so nothing to resubscribe to.
+  const hintRef = React.useRef<HTMLSpanElement>(null)
+  const [hintDir, setHintDir] = React.useState<"ltr" | "rtl">("ltr")
+  React.useLayoutEffect(() => {
+    const hint = hintRef.current
+    if (!hint) return
+    setHintDir(isCascaderRtl(hint, direction) ? "rtl" : "ltr")
+  }, [direction])
+
+  /**
+   * Moves the highlight to `targetIndex` in `treeRows`. Base UI has no
+   * imperative setter (`actionsRef` is `{ unmount }`), so the move is arrow
+   * presses, sound only because `useListNavigation` fires `onItemHighlighted`
+   * SYNCHRONOUSLY per keydown. A press that fails to close the gap ends it.
+   */
+  const moveHighlightTo = (field: HTMLInputElement, targetIndex: number) => {
+    const rowIndex = () => {
+      const highlighted = getHighlighted()
+      if (!highlighted) return -1
+      return treeRows.findIndex((row) => row.node.value === highlighted.value)
+    }
+
+    let current = rowIndex()
+    for (let step = 0; step < treeRows.length; step += 1) {
+      if (current === -1 || current === targetIndex) return
+      const key = current > targetIndex ? "ArrowUp" : "ArrowDown"
+      field.dispatchEvent(
+        new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true })
+      )
+      const next = rowIndex()
+      const progressed =
+        key === "ArrowUp"
+          ? next < current && next >= targetIndex
+          : next > current && next <= targetIndex
+      if (next === -1 || !progressed) return
+      current = next
+    }
+  }
+
+  /**
+   * The tree pattern's two level keys; Base UI leaves both alone (list
+   * navigation is vertical-only, the chip handler no-ops without
+   * `Combobox.Chips`). Passed in rather than hardcoded because RTL swaps them:
+   * APG defines them as "toward the children", not as a physical arrow.
+   */
+  const handleTreeKeyDown = (
+    event: CascaderInputKeyEvent,
+    field: HTMLInputElement,
+    caretAtStart: boolean,
+    caretAtEnd: boolean,
+    forwardKey: "ArrowLeft" | "ArrowRight",
+    backKey: "ArrowLeft" | "ArrowRight"
+  ) => {
+    const forward = event.key === forwardKey
+    if (!forward && event.key !== backKey) return
+    if (forward ? !caretAtEnd : !caretAtStart) return
+
+    const highlighted = getHighlighted()
+    if (!highlighted) return
+    const rowIndex = treeRows.findIndex(
+      (row) => row.node.value === highlighted.value
+    )
+    if (rowIndex < 0) return
+    const row = treeRows[rowIndex]
+
+    if (forward) {
+      if (!row.branch) return
+      event.preventDefault()
+      if (!row.expanded) {
+        // `navigate`, not `toggleExpanded`: it waits for an unloaded branch's
+        // children, so the keyboard path in matches the expander.
+        navigate(row.node)
+        return
+      }
+      // `flattenCascaderTree` emits children right after their parent, so the
+      // first child is the next row. The depth check covers an empty branch.
+      const child = treeRows[rowIndex + 1]
+      if (child && child.depth === row.depth + 1) {
+        moveHighlightTo(field, rowIndex + 1)
+      }
+      return
+    }
+
+    if (row.branch && row.expanded) {
+      event.preventDefault()
+      toggleExpanded(row.node.value)
+      return
+    }
+
+    const parentValue = index.parentOf.get(row.node.value)
+    if (!parentValue) return
+    const parentIndex = treeRows.findIndex(
+      (entry) => entry.node.value === parentValue
+    )
+    if (parentIndex < 0) return
+    event.preventDefault()
+    moveHighlightTo(field, parentIndex)
+  }
+
+  const handleKeyDown = (event: CascaderInputKeyEvent) => {
+    onKeyDown?.(event)
+    if (event.defaultPrevented) return
+
+    const field = event.currentTarget
+    const caretAtStart = field.selectionStart === 0 && field.selectionEnd === 0
+    const caretAtEnd =
+      field.selectionStart === query.length &&
+      field.selectionEnd === query.length
+
+    // ArrowDown at the END of the list hands real focus to the pinned footer,
+    // the key a combobox is actually navigated with; Tab still works and still
+    // skips the scroll area. An EMPTY list hands off at once, and the footer
+    // owns the way back. Counted from state, so a windowed list still answers.
+    if (event.key === "ArrowDown" && !event.altKey) {
+      const rowCount = mode === "tree" ? treeRows.length : renderedItems.length
+      const lastValue =
+        mode === "tree"
+          ? treeRows[rowCount - 1]?.node.value
+          : renderedItems[rowCount - 1]?.value
+      const highlighted = getHighlighted()
+      const atEnd =
+        rowCount === 0 ||
+        (highlighted != null && highlighted.value === lastValue)
+      if (atEnd) {
+        const panel = field.closest<HTMLElement>('[data-slot="cascader-panel"]')
+        const stop = panel ? getCascaderFooterStops(panel)[0] : undefined
+        if (stop) {
+          event.preventDefault()
+          // Base UI's handler is deliberately NOT vetoed: its wrap's first
+          // press CLEARS the highlight, so no stale row stays active behind the
+          // focused command, and the emptied highlight completes the ring.
+          stop.focus()
+          return
+        }
+      }
+    }
+
+    // The level keys are LOGICAL, not physical: in RTL, ArrowLeft opens a
+    // branch and ArrowRight goes back. They act only at the caret edge, and
+    // those guards do NOT mirror: `selectionStart === 0` is the logical start.
+    const rtl = isCascaderRtl(field, direction)
+    const forwardKey = rtl ? "ArrowLeft" : "ArrowRight"
+    const backKey = rtl ? "ArrowRight" : "ArrowLeft"
+
+    if (mode === "tree") {
+      handleTreeKeyDown(
+        event,
+        field,
+        caretAtStart,
+        caretAtEnd,
+        forwardKey,
+        backKey
+      )
+      return
+    }
+
+    if (event.key === forwardKey && caretAtEnd) {
+      const highlighted = getHighlighted()
+      if (highlighted && isBranch(highlighted)) {
+        event.preventDefault()
+        navigate(highlighted)
+        return
+      }
+    }
+
+    // Backspace on an empty query pops a level too, so the keyboard way out of
+    // a level is symmetric with typing into it.
+    if (
+      (event.key === backKey && caretAtStart) ||
+      (event.key === "Backspace" && query.length === 0)
+    ) {
+      if (path.length > 0) {
+        event.preventDefault()
+        popLevel()
+      }
+    }
+  }
+
+  return (
+    <div
+      data-slot="cascader-input-row"
+      className={cn(
+        "flex shrink-0 items-center gap-1",
+        /* Each style sizes a combobox search field only as a DIRECT child of
+           the popup; this row is nested, so the ladder is mirrored here rather
+           than hardcoding one height for all eight styles. */
+        "h-8"
+      )}
+    >
+      {showBack ? <CascaderBack /> : null}
+      <ComboboxPrimitive.Input
+        data-slot="cascader-input"
+        placeholder={resolvedPlaceholder}
+        onKeyDown={handleKeyDown}
+        /* Nothing on screen says the level keys exist. */
+        aria-describedby={[ariaDescribedBy, hintId].filter(Boolean).join(" ")}
+        /* Conditional: an explicit `undefined` deletes Base UI's own value. */
+        {...(mode === "tree" ? { "aria-haspopup": "tree" as const } : null)}
+        /* Base UI omits BOTH `aria-expanded` and `aria-controls` while inline,
+           and an embedded panel is permanently expanded, so supply both. */
+        {...(inline
+          ? { "aria-expanded": true, "aria-controls": listId }
+          : null)}
+        /* No trigger to carry the invalid state in the `inline` case. */
+        {...(invalid ? { "aria-invalid": true, "data-invalid": "" } : null)}
+        className={cn(
+          "placeholder:text-muted-foreground h-full w-full min-w-0 flex-1 bg-transparent px-1.5 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          backVisible && "ps-0",
+          className
+        )}
+        {...props}
+      />
+      <span id={hintId} ref={hintRef} className="sr-only">
+        {/* `hintDir`, not `direction`: the context alone misses an RTL app that
+            uses a `dir` attribute instead of `DirectionProvider`. */}
+        {labels.keyboardHint(mode, hintDir)}
+      </span>
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Value                                   */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderValueProps extends Omit<
+  useRender.ComponentProps<"span">,
+  "children"
+> {
+  /** `path` shows the full trail, `leaf` only the node, `count` only a total. */
+  display?: CascaderValueDisplay
+  maxSegments?: number
+  collapse?: CascaderCollapse
+  separator?: React.ReactNode
+  /** Renders the selected node's icon before the trail. */
+  showIcon?: boolean
+  placeholder?: React.ReactNode
+  /** Replaces the whole rendering. Receives the resolved selection and path. */
+  children?: (selected: CascaderNode[], path: CascaderNode[]) => React.ReactNode
+}
+
+/**
+ * Trigger display. Defaults to the collapsed selection path rather than a bare
+ * leaf label, which in a nested picker is frequently ambiguous.
+ */
+function CascaderValue({
+  className,
+  display = "path",
+  maxSegments = 3,
+  collapse = "middle",
+  separator,
+  showIcon = true,
+  placeholder,
+  children,
+  ...props
+}: CascaderValueProps) {
+  const { labels, multiple, resolveNode } = useCascaderActions()
+  const { index, selectedValues } = useCascaderState()
+
+  // `resolveNode`, not `index.byValue`: a selection missing from `items` (async
+  // children, a removed item) must still render a label, not an empty trigger.
+  const selected = selectedValues.map(resolveNode)
+
+  const resolvedPath =
+    selectedValues.length === 1 ? getCascaderPath(index, selectedValues[0]) : []
+  // No ancestor chain: fall back to the node so `display="path"` shows a leaf.
+  const path =
+    resolvedPath.length > 0
+      ? resolvedPath
+      : selected.length === 1
+        ? selected
+        : []
+
+  let content: React.ReactNode
+
+  if (children) {
+    content = children(selected, path)
+  } else if (selectedValues.length === 0) {
+    content = (
+      <span className="text-muted-foreground truncate">{placeholder}</span>
+    )
+  } else if (display === "count" || (multiple && selectedValues.length > 1)) {
+    content = labels.selectedCount(selectedValues.length)
+  } else {
+    const leaf = path[path.length - 1] ?? selected[0]
+    const segments =
+      display === "leaf"
+        ? [{ type: "node" as const, node: leaf }]
+        : collapseCascaderPath(path, { maxSegments, collapse })
+
+    content = (
+      <>
+        {showIcon && leaf?.icon ? (
+          <span
+            data-slot="cascader-value-icon"
+            className="text-muted-foreground flex shrink-0 items-center"
+          >
+            {leaf.icon}
+          </span>
+        ) : null}
+        {segments.map((segment, i) => (
+          <React.Fragment
+            key={segment.type === "node" ? segment.node.value : `gap-${i}`}
+          >
+            {i > 0 ? (separator ?? <PathChevron />) : null}
+            {segment.type === "ellipsis" ? (
+              <span
+                data-slot="cascader-value-ellipsis"
+                title={segment.hidden
+                  .map((n) => n.label)
+                  .join(` ${labels.pathSeparator} `)}
+                className="text-muted-foreground shrink-0"
+              >
+                &hellip;
+              </span>
+            ) : (
+              <span
+                className={cn(
+                  "truncate",
+                  i < segments.length - 1 && "text-muted-foreground"
+                )}
+              >
+                {segment.node?.label}
+              </span>
+            )}
+          </React.Fragment>
+        ))}
+      </>
+    )
+  }
+
+  const defaultProps = {
+    "data-slot": "cascader-value",
+    className: cn("flex min-w-0 items-center gap-1 truncate", className),
+    children: content,
+  }
+
+  return useRender({
+    defaultTagName: "span",
+    render: props.render,
+    props: mergeProps<"span">(defaultProps, props),
+  })
+}
+
+export {
+  CascaderNav,
+  CascaderBack,
+  CascaderBreadcrumb,
+  CascaderInput,
+  CascaderValue,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-types.tsx b/apps/web/src/components/reui/cascader/cascader-types.tsx
new file mode 100644
index 0000000..15f2821
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-types.tsx
@@ -0,0 +1,209 @@
+import type * as React from "react"
+
+/**
+ * A node in the cascader tree. Two input shapes normalize to one internal
+ * index: nested (nodes carry `children`), or flat adjacency plus the root's
+ * `getParent`, which skips the re-nesting step for large datasets.
+ */
+export interface CascaderNode<T = unknown> {
+  /** Stable id. Also the committed selection value. */
+  value: string
+  label: string
+  icon?: React.ReactNode
+  description?: string
+  children?: CascaderNode<T>[]
+  /** Declares a branch before load; async nodes read as leaves without it. */
+  hasChildren?: boolean
+  /** Trailing count. Defaults to known children; set it for async nodes. */
+  count?: number
+  disabled?: boolean
+  keywords?: string[]
+  /**
+   * Only read on a node nested inside a `getChildren` result. For the level a
+   * node OWNS the authoritative signal is that level's `CascaderLoadResult`.
+   */
+  hasMore?: boolean
+  data?: T
+}
+
+/**
+ * One footer ACTION. Deliberately not a `CascaderNode`, so a command can never
+ * be passed where an option is expected and join the ring, filter or selection.
+ */
+export interface CascaderActionItem {
+  /** Stable key. Falls back to the label when it is a string, then the index. */
+  value?: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  disabled?: boolean
+  /** Ignored when `items` is present - a flyout opens instead. */
+  onSelect?: () => void
+  /** Turns the row into a submenu trigger. One level deep on purpose. */
+  items?: CascaderActionItem[]
+  /** Consecutive entries sharing a heading are drawn under one. */
+  group?: string
+}
+
+/** Panel layout. See the docs for the keyboard map of each. */
+export type CascaderMode = "drill" | "columns" | "tree"
+
+export type CascaderSearchScope = "level" | "deep"
+
+/**
+ * Which nodes may be committed. The predicate arm is generic over the payload
+ * rather than quantified per call: a per-call `<T>` would force every predicate
+ * to accept EVERY payload, so `(node: CascaderNode<Member>) => boolean` could
+ * never satisfy it.
+ */
+export type CascaderSelectable<T = unknown> =
+  | "leaf"
+  | "any"
+  | ((node: CascaderNode<T>) => boolean)
+
+export type CascaderCollapse = "middle" | "start" | "none"
+
+export type CascaderValueDisplay = "path" | "leaf" | "count"
+
+export type CascaderChangeReason = "select" | "deselect" | "clear"
+
+/** Second argument to `onValueChange`: resolved nodes, so no re-lookup. */
+export interface CascaderChangeDetails<T = unknown> {
+  /** The node committed or toggled. Null when the selection was cleared. */
+  node: CascaderNode<T> | null
+  /** Ancestor chain of `node`, root first, node last. */
+  path: CascaderNode<T>[]
+  nodes: CascaderNode<T>[]
+  reason: CascaderChangeReason
+}
+
+/** Normalized tree, built once per `items` identity, shared by every mode. */
+export interface CascaderIndex<T = unknown> {
+  byValue: Map<string, CascaderNode<T>>
+  /** Children by parent value. Root children are keyed by `ROOT_KEY`. */
+  childrenOf: Map<string, CascaderNode<T>[]>
+  parentOf: Map<string, string | null>
+  /** Zero-based depth by node value. */
+  depthOf: Map<string, number>
+  /** Top level nodes, in input order. */
+  roots: CascaderNode<T>[]
+  /** Every node in a stable, depth-first order. Used by deep search. */
+  all: CascaderNode<T>[]
+}
+
+export interface CascaderFlatNode<T = unknown> {
+  node: CascaderNode<T>
+  depth: number
+  /** Known children, or a declared `hasChildren`. */
+  branch: boolean
+  expanded: boolean
+  /** Sibling count, plus one when the level has a paging row. */
+  setSize: number
+  /** One-based index among siblings. */
+  posInSet: number
+}
+
+/** One segment of a rendered path, after collapsing. */
+export type CascaderPathSegment<T = unknown> =
+  | { type: "node"; node: CascaderNode<T> }
+  | { type: "ellipsis"; hidden: CascaderNode<T>[] }
+
+/**
+ * Async load state for one node's children. Deliberately WITHOUT a `status`
+ * field: "declared a branch, never fetched" and "fetched and genuinely empty"
+ * are told apart by MAP MEMBERSHIP, and a second source of that truth would
+ * eventually disagree with the first.
+ */
+export interface CascaderLoadState {
+  loading: boolean
+  error: boolean
+  hasMore: boolean
+  /** Opaque cursor handed back to `getChildren` for the next page. */
+  cursor?: string
+}
+
+/** Why a level was fetched. `resolve`: `resolveValue` hit an unloaded node. */
+export type CascaderLoadReason =
+  | "level"
+  | "more"
+  | "prefetch"
+  | "retry"
+  | "resolve"
+
+/** Argument handed to `getChildren`. */
+export interface CascaderLoadContext {
+  /** Aborted when the request is superseded or the popup closes. */
+  signal: AbortSignal
+  cursor?: string
+  reason?: CascaderLoadReason
+}
+
+/** Value returned by `getChildren`. A bare array is also accepted. */
+export interface CascaderLoadResult<T = unknown> {
+  items: CascaderNode<T>[]
+  nextCursor?: string
+  /** Defaults to whether `nextCursor` was supplied. */
+  hasMore?: boolean
+}
+
+/** Argument handed to `onSearch`. */
+export interface CascaderSearchContext {
+  signal: AbortSignal
+  /** The path the user is searching within, deepest last. */
+  path: string[]
+}
+
+/**
+ * Every user facing string, so the primitive ships no hardcoded copy. The
+ * callbacks take plain labels, not nodes: a `CascaderNode<T>` parameter would
+ * force this object to carry the item generic. `*Announcement` is live-region.
+ */
+export interface CascaderLabels {
+  search: string | ((parentLabel?: string) => string)
+  back: string
+  /** A level's FIRST page. `loadingMore` is the next, `loadMore` its idle row. */
+  loading: string
+  loadingMore: string
+  loadMore: string
+  error: string
+  retry: string
+  empty: string
+  /** Rendered by `CascaderValue` when `display="count"`. */
+  selectedCount: (count: number) => string
+  breadcrumbLabel: string
+  chipsLabel: string
+  removeChip: (label: string) => string
+  /** Trail separator. Not every locale writes one with a slash. */
+  pathSeparator: string
+  /** Names the root level wherever there is no parent node to name it. */
+  rootLevel: string
+  itemCount: (count: number) => string
+  /** Appended to a branch row's name outside tree mode: it opens another list. */
+  branchAffordance: string
+  /** Columns-trail rows are plain buttons, so they carry no `aria-selected`. */
+  selectedState: string
+  /** Same for the mixed state, which a `role="button"` row may not carry. */
+  partiallySelectedState: string
+  columnsLabel: string
+  actionsLabel: string
+  submenuAffordance: string
+  panelLabel: string
+  /** Read per mode AND per direction: the level keys mirror in RTL. */
+  keyboardHint: (mode: CascaderMode, dir: "ltr" | "rtl") => string
+  rootAnnouncement: (count: number) => string
+  expandedAnnouncement: (label: string, count: number) => string
+  collapsedAnnouncement: (label: string) => string
+  levelAnnouncement: (
+    parentLabel: string,
+    depth: number,
+    count: number
+  ) => string
+  resultsAnnouncement: (count: number) => string
+  maxReachedAnnouncement: (max: number) => string
+  /** `count` is the descendants swept along; `selecting` is the direction. */
+  cascadeAnnouncement: (
+    label: string,
+    count: number,
+    selecting: boolean
+  ) => string
+  searchingAnnouncement: string
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader-virtual.tsx b/apps/web/src/components/reui/cascader/cascader-virtual.tsx
new file mode 100644
index 0000000..d5b1dd5
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader-virtual.tsx
@@ -0,0 +1,457 @@
+"use client"
+
+import * as React from "react"
+import { CascaderColumnPanel } from "@/components/reui/cascader/cascader-columns"
+import {
+  useCascaderActions,
+  useCascaderHighlight,
+  useCascaderState,
+} from "@/components/reui/cascader/cascader-context"
+import type { CascaderColumn } from "@/components/reui/cascader/cascader-context"
+import {
+  CascaderItem,
+  CascaderItems,
+  getCascaderMoreProps,
+} from "@/components/reui/cascader/cascader-item"
+import {
+  defaultRangeExtractor,
+  useVirtualizer,
+  type Range,
+  type Virtualizer,
+} from "@tanstack/react-virtual"
+
+/**
+ * Windowing for the cascader, in its own file so the primitive's own install
+ * never pulls `@tanstack/react-virtual` in. Base UI forces three rules:
+ *
+ * 1. A windowed row MUST carry an explicit `index`; the fallback
+ *    `findItemIndex` is O(n) per row and returns `-1` on the frame a level swap
+ *    renders empty, dangling `aria-activedescendant`.
+ * 2. That index is DESTRUCTIVE while unvirtualized (`useCompositeListItem`
+ *    skips registration, `CompositeList` truncates `elementsRef` to zero and
+ *    the first arrow key highlights nothing), so rows stay plain until the root
+ *    flips `virtualized`, gated inside `CascaderItem`.
+ * 3. No `Combobox.Collection` and no FUNCTION CHILD on `Combobox.List`, which
+ *    implicitly wraps one in a Collection: a Collection renders every filtered
+ *    item.
+ */
+
+/* -------------------------------------------------------------------------- */
+/*                                 Virtualizer                                */
+/* -------------------------------------------------------------------------- */
+
+export interface UseCascaderVirtualizerOptions {
+  count: number
+  getScrollElement: () => HTMLElement | null
+  estimateSize?: number
+  overscan?: number
+  /** Key rows by node value, never by index: a tree expand shifts every index. */
+  getItemKey: (index: number) => string | number
+  /** Render index of the highlighted row, or `-1`. Pinned into the window. */
+  activeIndex?: number
+}
+
+export type CascaderVirtualizer = Virtualizer<HTMLElement, HTMLElement>
+
+/**
+ * The cascader's virtualizer: TanStack plus the highlight pinning and
+ * scroll-into-view a combobox list needs. `activeIndex` is clamped here, not by
+ * the caller: emitted from a layout effect, it can be one commit ahead of a
+ * level that just shrank and would otherwise scroll to a row that is gone.
+ */
+export function useCascaderVirtualizer({
+  count,
+  getScrollElement,
+  estimateSize = 32,
+  overscan = 8,
+  getItemKey,
+  activeIndex = -1,
+}: UseCascaderVirtualizerOptions): CascaderVirtualizer {
+  const active = activeIndex >= 0 && activeIndex < count ? activeIndex : -1
+
+  // Keeps the highlighted row mounted so `aria-activedescendant` never dangles.
+  const rangeExtractor = React.useCallback(
+    (range: Range) => {
+      const indices = new Set(defaultRangeExtractor(range))
+      if (active !== -1) indices.add(active)
+      return Array.from(indices).sort((a, b) => a - b)
+    },
+    [active]
+  )
+
+  const measureEstimate = React.useCallback(() => estimateSize, [estimateSize])
+
+  // React Compiler bails on `useVirtualizer`; harmless, rows memoise one by one.
+  const virtualizer = useVirtualizer<HTMLElement, HTMLElement>({
+    count,
+    getScrollElement,
+    estimateSize: measureEstimate,
+    overscan,
+    getItemKey,
+    rangeExtractor,
+  })
+
+  // Base UI's scroll-into-view no-ops on a windowed-out row (empty `listRef`).
+  React.useEffect(() => {
+    if (active === -1) return
+    virtualizer.scrollToIndex(active, { align: "auto" })
+  }, [active, count, virtualizer])
+
+  return virtualizer
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Geometry                                  */
+/* -------------------------------------------------------------------------- */
+
+interface CascaderVirtualGutter {
+  block: number
+  inline: number
+}
+
+const NO_GUTTER: CascaderVirtualGutter = { block: 0, inline: 0 }
+
+/**
+ * The ROWS' BOX's own padding, never the scrollport's (separate element, reads
+ * a flat zero). Measured because every style sets its own: a windowed row is
+ * positioned against this box's PADDING box while the scroll-height spacer is
+ * an in-flow child of its CONTENT box, so without it rows sit flush.
+ */
+function useCascaderVirtualGutter(
+  contentElement: HTMLElement | null
+): CascaderVirtualGutter {
+  const [gutter, setGutter] = React.useState<CascaderVirtualGutter>(NO_GUTTER)
+
+  React.useLayoutEffect(() => {
+    if (!contentElement) return
+    const styles = getComputedStyle(contentElement)
+    const block = Number.parseFloat(styles.paddingTop) || 0
+    const inline =
+      Number.parseFloat(styles.paddingInlineStart || styles.paddingLeft) || 0
+    setGutter((previous) =>
+      previous.block === block && previous.inline === inline
+        ? previous
+        : { block, inline }
+    )
+  }, [contentElement])
+
+  return gutter
+}
+
+/** Logical insets, not `left` / `width`, so RTL needs no second code path. */
+function cascaderVirtualRowStyle(
+  start: number,
+  gutter: CascaderVirtualGutter
+): React.CSSProperties {
+  return {
+    position: "absolute",
+    top: 0,
+    insetInlineStart: gutter.inline,
+    insetInlineEnd: gutter.inline,
+    transform: `translateY(${start + gutter.block}px)`,
+  }
+}
+
+/**
+ * The element that actually SCROLLS: the `ScrollArea` viewport above the rows'
+ * box, not the rows' box itself, which never overflows, so a virtualizer aimed
+ * at it would read a full `clientHeight` and render every row. `closest` rather
+ * than `parentElement`, plus a fallback to the content element, keeps a
+ * hand-written `overflow-y-auto` container working.
+ */
+function cascaderScrollElement(
+  content: HTMLElement | null
+): HTMLElement | null {
+  if (!content) return null
+  return (
+    content.closest<HTMLElement>('[data-slot="scroll-area-viewport"]') ??
+    content
+  )
+}
+
+/**
+ * `role="presentation"` keeps the listbox owning nothing but options, and this
+ * node's parent IS the rows' box, saving a ref threaded through `CascaderList`.
+ */
+function CascaderVirtualSpacer({
+  height,
+  onContentElement,
+}: {
+  height: number
+  onContentElement: (element: HTMLElement | null) => void
+}) {
+  return (
+    <div
+      ref={(node) => onContentElement(node?.parentElement ?? null)}
+      role="presentation"
+      data-slot="cascader-virtual-spacer"
+      style={{ height }}
+    />
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Rows                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderVirtualItemsProps {
+  /** Row height before measurement. Defaults to the root `estimateRowSize`. */
+  estimateSize?: number
+  /** Rows rendered beyond each edge. Defaults to the root `overscan`. */
+  overscan?: number
+}
+
+/**
+ * Windowed replacement for `CascaderItems`, dropped inside `CascaderList`. The
+ * registration is a LAYOUT effect because the root derives `virtualized` from
+ * it and the flip has to land before the browser paints. Until the root has
+ * seen it, this renders exactly what `CascaderItems` does, so no frame carries
+ * indexed rows while Base UI still owns the composite list.
+ */
+function CascaderVirtualItems(props: CascaderVirtualItemsProps) {
+  const { virtualized, registerVirtualRenderer } = useCascaderActions()
+
+  React.useLayoutEffect(
+    () => registerVirtualRenderer(),
+    [registerVirtualRenderer]
+  )
+
+  if (!virtualized) return <CascaderItems />
+
+  return <CascaderVirtualRows {...props} />
+}
+
+function CascaderVirtualRows({
+  estimateSize,
+  overscan,
+}: CascaderVirtualItemsProps) {
+  const {
+    estimateRowSize,
+    overscan: rootOverscan,
+    mode,
+    isBranch,
+    isSelectable,
+    isSelected,
+    isIndeterminate,
+  } = useCascaderActions()
+  const { renderedItems, treeRows, deepResults, loadStates } =
+    useCascaderState()
+  // Re-renders on every highlight change, and has to: the pinned row and the
+  // scroll target are both derived from it.
+  const highlight = useCascaderHighlight()
+
+  const [contentElement, setContentElement] =
+    React.useState<HTMLElement | null>(null)
+  const gutter = useCascaderVirtualGutter(contentElement)
+
+  const tree = mode === "tree"
+  const count = tree ? treeRows.length : renderedItems.length
+  const showPath = !tree && deepResults !== null
+
+  const getItemKey = React.useCallback(
+    (index: number) =>
+      (tree ? treeRows[index]?.node.value : renderedItems[index]?.value) ??
+      index,
+    [tree, treeRows, renderedItems]
+  )
+
+  const virtualizer = useCascaderVirtualizer({
+    count,
+    getScrollElement: () => cascaderScrollElement(contentElement),
+    estimateSize: estimateSize ?? estimateRowSize,
+    overscan: overscan ?? rootOverscan,
+    getItemKey,
+    activeIndex: highlight.index,
+  })
+
+  return (
+    <>
+      <CascaderVirtualSpacer
+        height={virtualizer.getTotalSize()}
+        onContentElement={setContentElement}
+      />
+      {virtualizer.getVirtualItems().map((row) => {
+        const flat = tree ? treeRows[row.index] : undefined
+        const node = tree ? flat?.node : renderedItems[row.index]
+        // For one commit after a query narrows the level, the window can name
+        // a row it no longer has; the count recomputes on the same tick.
+        if (!node) return null
+
+        return (
+          <CascaderItem
+            key={row.key}
+            /* Measured, not estimated: rows are two lines with a `description`
+               and three in deep search, and row height is per style. An
+               estimate alone would make `scrollToIndex` land on the wrong row. */
+            ref={virtualizer.measureElement}
+            data-index={row.index}
+            style={cascaderVirtualRowStyle(row.start, gutter)}
+            node={node}
+            index={row.index}
+            depth={flat?.depth}
+            expanded={flat?.expanded}
+            branch={flat ? flat.branch : isBranch(node)}
+            selectable={isSelectable(node)}
+            selected={isSelected(node)}
+            indeterminate={isIndeterminate(node)}
+            {...getCascaderMoreProps(node, loadStates)}
+            showPath={showPath}
+            aria-setsize={flat ? flat.setSize : count}
+            aria-posinset={flat ? flat.posInSet : row.index + 1}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Column                                   */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderVirtualColumnProps extends CascaderVirtualItemsProps {
+  column: CascaderColumn
+}
+
+/**
+ * Windowed replacement for one Miller column, passed through the
+ * `CascaderColumns` render slot. One virtualizer PER COLUMN, since columns
+ * scroll independently, and only the deepest is Base UI's listbox: the trail
+ * behind is `as="button"` rows outside Base UI, so it windows on its own row
+ * count rather than waiting for the root to flip.
+ */
+function CascaderVirtualColumn({
+  column,
+  estimateSize,
+  overscan,
+}: CascaderVirtualColumnProps) {
+  const {
+    virtualized,
+    registerVirtualRenderer,
+    virtualize,
+    virtualizeThreshold,
+  } = useCascaderActions()
+
+  React.useLayoutEffect(
+    () => registerVirtualRenderer(),
+    [registerVirtualRenderer]
+  )
+
+  const windowed = column.active
+    ? virtualized
+    : (virtualize ?? column.items.length >= virtualizeThreshold)
+
+  if (!windowed) return <CascaderColumnPanel column={column} />
+
+  return (
+    <CascaderColumnPanel column={column} virtualized>
+      {column.active ? (
+        <CascaderVirtualActiveColumnRows
+          column={column}
+          estimateSize={estimateSize}
+          overscan={overscan}
+        />
+      ) : (
+        <CascaderVirtualColumnRows
+          column={column}
+          estimateSize={estimateSize}
+          overscan={overscan}
+          activeIndex={-1}
+        />
+      )}
+    </CascaderColumnPanel>
+  )
+}
+
+/** Only the active column subscribes to the highlight; a trail column must not. */
+function CascaderVirtualActiveColumnRows(props: CascaderVirtualColumnProps) {
+  const highlight = useCascaderHighlight()
+  return <CascaderVirtualColumnRows {...props} activeIndex={highlight.index} />
+}
+
+function CascaderVirtualColumnRows({
+  column,
+  estimateSize,
+  overscan,
+  activeIndex,
+}: CascaderVirtualColumnProps & { activeIndex: number }) {
+  const {
+    estimateRowSize,
+    overscan: rootOverscan,
+    baseId,
+    isBranch,
+    isSelectable,
+    isSelected,
+    isIndeterminate,
+  } = useCascaderActions()
+  const { loadStates } = useCascaderState()
+
+  const [contentElement, setContentElement] =
+    React.useState<HTMLElement | null>(null)
+  const gutter = useCascaderVirtualGutter(contentElement)
+
+  const items = column.items
+  const getItemKey = React.useCallback(
+    (index: number) => items[index]?.value ?? index,
+    [items]
+  )
+
+  const virtualizer = useCascaderVirtualizer({
+    count: items.length,
+    getScrollElement: () => cascaderScrollElement(contentElement),
+    estimateSize: estimateSize ?? estimateRowSize,
+    overscan: overscan ?? rootOverscan,
+    getItemKey,
+    activeIndex,
+  })
+
+  return (
+    <>
+      <CascaderVirtualSpacer
+        height={virtualizer.getTotalSize()}
+        onContentElement={setContentElement}
+      />
+      {virtualizer.getVirtualItems().map((row) => {
+        const node = items[row.index]
+        if (!node) return null
+        const open = node.value === column.activeValue
+
+        return (
+          <CascaderItem
+            key={row.key}
+            ref={virtualizer.measureElement}
+            data-index={row.index}
+            style={cascaderVirtualRowStyle(row.start, gutter)}
+            node={node}
+            as={column.active ? "option" : "button"}
+            depth={column.depth}
+            branch={isBranch(node)}
+            selectable={isSelectable(node)}
+            selected={isSelected(node)}
+            indeterminate={isIndeterminate(node)}
+            {...getCascaderMoreProps(node, loadStates)}
+            data-open={open || undefined}
+            className={open ? "bg-accent/60 text-accent-foreground" : undefined}
+            /* Only the listbox column may carry an index or listbox metadata.
+               A trail row is a `role="button"`, which allows neither. */
+            {...(column.active
+              ? {
+                  index: row.index,
+                  "aria-setsize": items.length,
+                  "aria-posinset": row.index + 1,
+                }
+              : null)}
+            {...(!column.active && open
+              ? {
+                  "aria-expanded": true,
+                  "aria-controls": `${baseId}-column-${column.depth + 1}`,
+                }
+              : null)}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+export { CascaderVirtualColumn, CascaderVirtualItems }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/cascader/cascader.tsx b/apps/web/src/components/reui/cascader/cascader.tsx
new file mode 100644
index 0000000..751f644
--- /dev/null
+++ b/apps/web/src/components/reui/cascader/cascader.tsx
@@ -0,0 +1,2932 @@
+import * as React from "react"
+import {
+  useCascaderLoader,
+  useCascaderLoadState,
+} from "@/components/reui/cascader/cascader-async"
+import type {
+  CascaderGetChildren,
+  CascaderOnSearch,
+  CascaderResolveValue,
+} from "@/components/reui/cascader/cascader-async"
+import {
+  CascaderActionsContext,
+  CascaderHighlightContext,
+  CascaderRenderContext,
+  CascaderStateContext,
+  createCascaderHighlightStore,
+  useCascaderActions,
+  useCascaderHighlight,
+  useCascaderRender,
+  useCascaderState,
+} from "@/components/reui/cascader/cascader-context"
+import type {
+  CascaderActionsContextValue,
+  CascaderColumn,
+  CascaderHighlight,
+  CascaderHighlightStore,
+  CascaderItemState,
+  CascaderRenderContextValue,
+  CascaderStateContextValue,
+} from "@/components/reui/cascader/cascader-context"
+import { resolveCascaderLabels } from "@/components/reui/cascader/cascader-i18n"
+import {
+  applyCascadeSelection,
+  buildCascaderIndex,
+  CASCADER_LIST_HEIGHT_CLASS,
+  CASCADER_LIST_PAD_CLASS,
+  CASCADER_ROOT_KEY,
+  CASCADER_ROWS_CLASS,
+  CASCADER_SCROLL_CLASS,
+  collapseCascaderPath,
+  createCascaderMoreNode,
+  filterCascaderLevel,
+  findAmbiguousCascaderLabels,
+  findCascaderDataIssues,
+  flattenCascaderTree,
+  getCascaderCheckedValues,
+  getCascaderChildren,
+  getCascaderCount,
+  getCascaderIndeterminateFrom,
+  getCascaderPath,
+  getCascaderSelectedDescendants,
+  getCascaderTabTarget,
+  isCascaderBranch,
+  isCascaderMoreNode,
+  isCascaderSelectable,
+  matchesCascaderQuery,
+  mergeCascaderIndex,
+  normalizeCascaderQuery,
+  searchCascaderDeep,
+  warnCascaderOnce,
+} from "@/components/reui/cascader/cascader-lib"
+import type { CascaderCheckedStrategy } from "@/components/reui/cascader/cascader-lib"
+import type {
+  CascaderActionItem,
+  CascaderChangeDetails,
+  CascaderChangeReason,
+  CascaderFlatNode,
+  CascaderIndex,
+  CascaderLabels,
+  CascaderLoadState,
+  CascaderMode,
+  CascaderNode,
+  CascaderSearchScope,
+  CascaderSelectable,
+} from "@/components/reui/cascader/cascader-types"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ScrollArea } from "@evobgp/ui/components/scroll-area"
+import { ChevronDownIcon, XIcon } from "lucide-react"
+
+/** Stable `filteredItems` for a level swap; a fixed identity cannot loop. */
+const EMPTY: CascaderNode<never>[] = []
+
+/** Stable empty array for the `actions` prop, so a cascader with no footer
+ * does not republish the actions context on every render. */
+const EMPTY_ACTIONS: CascaderActionItem[] = []
+
+// Word joiner. A polite region reads only MUTATIONS, so alternate it.
+const ANNOUNCE_MARKER = "\u2060"
+
+// Delay before a query result-count reaches the live region: polite
+// announcements queue, and re-announcing per keystroke plays back stale
+// counts. Only the count defers; every event-shaped one stays immediate.
+const ANNOUNCE_DEBOUNCE = 150
+
+/* -------------------------------------------------------------------------- */
+/*                                   State                                    */
+/* -------------------------------------------------------------------------- */
+
+// Minimal controlled/uncontrolled resolver, hand-rolled because the repo has
+// no shared `useControllableState`; the root needs it five times.
+function useControllable<V>(
+  controlled: V | undefined,
+  defaultValue: V,
+  onChange?: (value: V) => void,
+  /** Prop name, used only by the development-time switching warning. */
+  devName?: string
+): [V, (next: V | ((prev: V) => V)) => void] {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)
+  const isControlled = controlled !== undefined
+  const value = isControlled ? controlled : uncontrolled
+
+  // Switching controlled/uncontrolled mid-life strands half the state.
+  const wasControlled = React.useRef(isControlled)
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return
+    if (wasControlled.current === isControlled || !devName) return
+    const from = wasControlled.current ? "controlled" : "uncontrolled"
+    const to = isControlled ? "controlled" : "uncontrolled"
+    wasControlled.current = isControlled
+    warnCascaderOnce(
+      `controlled-switch:${devName}`,
+      `\`${devName}\` switched from ${from} to ${to}. Decide once: pass \`${devName}\` for the whole life of the component, or pass only the default and let the cascader own it.`
+    )
+  }, [isControlled, devName])
+
+  // Written in an EFFECT: a discarded render would still have mutated a ref.
+  const latest = React.useRef({ value, isControlled, onChange })
+  React.useEffect(() => {
+    latest.current = { value, isControlled, onChange }
+  })
+
+  // The last PROP seen: it differs from the optimistic advance exactly when a
+  // controlled parent declines a change and re-renders nothing.
+  const lastProp = React.useRef(controlled)
+  React.useEffect(() => {
+    lastProp.current = controlled
+  })
+
+  const set = React.useCallback((next: V | ((prev: V) => V)) => {
+    const current = latest.current.value
+    const resolved =
+      typeof next === "function" ? (next as (prev: V) => V)(current) : next
+    if (Object.is(resolved, current)) {
+      // Dedup against the last PROP, not the optimistic advance: a parent that
+      // declines re-renders nothing, so deduping on the advance left the popup
+      // un-dismissable from the second Escape on.
+      if (
+        !latest.current.isControlled ||
+        Object.is(resolved, lastProp.current)
+      ) {
+        return
+      }
+    }
+
+    // Advance now so two updates in ONE batch compose, rather than the second
+    // reading a stale value and its `Object.is` dedup dropping it.
+    latest.current = { ...latest.current, value: resolved }
+
+    if (!latest.current.isControlled) setUncontrolled(resolved)
+    latest.current.onChange?.(resolved)
+  }, [])
+
+  return [value, set]
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Shallow stability                             */
+/* -------------------------------------------------------------------------- */
+
+function shallowEqualRecords(a: object, b: object): boolean {
+  const left = a as Record<string, unknown>
+  const right = b as Record<string, unknown>
+  const keys = Object.keys(left)
+  if (keys.length !== Object.keys(right).length) return false
+  for (const key of keys) {
+    if (!Object.is(left[key], right[key])) return false
+  }
+  return true
+}
+
+function shallowEqualItemLists(
+  a: readonly object[],
+  b: readonly object[]
+): boolean {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i] && !shallowEqualRecords(a[i], b[i])) return false
+  }
+  return true
+}
+
+// Reuses the previous value while the next merely says the same thing: an
+// inline `labels`/`actions` otherwise republishes the actions context, and
+// with it every row. Adjust-state-during-render, not a ref.
+function useShallowStable<V>(
+  value: V,
+  equal: (a: V & object, b: V & object) => boolean
+): V {
+  const [stable, setStable] = React.useState(value)
+  if (Object.is(value, stable)) return stable
+  const comparable =
+    typeof value === "object" &&
+    value !== null &&
+    typeof stable === "object" &&
+    stable !== null
+  if (comparable && equal(value as V & object, stable as V & object)) {
+    return stable
+  }
+  setStable(value)
+  return value
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Context                                   */
+/* -------------------------------------------------------------------------- */
+
+/** The pre-split shape, merged, so `useCascader()` returns what it always did. */
+export interface CascaderContextValue<T = unknown>
+  extends CascaderActionsContextValue<T>, CascaderStateContextValue<T> {}
+
+/**
+ * The cascader's internals, typed for the caller's own item payload.
+ * @deprecated Reads BOTH halves, so a caller re-renders on every keystroke.
+ * Prefer `useCascaderActions()` or `useCascaderState()`. Kept for compat.
+ */
+export function useCascader<T = unknown>(): CascaderContextValue<T> {
+  const actions = useCascaderActions<T>()
+  const state = useCascaderState<T>()
+
+  return React.useMemo(() => ({ ...actions, ...state }), [actions, state])
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Headless selection                            */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderSelection<T = unknown> {
+  /** The selected nodes, resolved. Empty when nothing is selected. */
+  selected: CascaderNode<T>[]
+  /** Ancestor chain per selected node, root first, node last. */
+  paths: CascaderNode<T>[][]
+  /** The single selection, or the first one in `multiple` mode. */
+  first: CascaderNode<T> | null
+  /** Ancestor chain of `first`. */
+  firstPath: CascaderNode<T>[]
+  count: number
+  isEmpty: boolean
+  multiple: boolean
+  remove: (value: string) => void
+  clear: () => void
+}
+
+/** Headless access to the selection, for a trigger that is not
+ * `CascaderValue`. Pass the payload explicitly to get `node.data` typed. */
+export function useCascaderSelection<T = unknown>(): CascaderSelection<T> {
+  const { multiple, setSelection } = useCascaderActions<T>()
+  const { index, selectedValues } = useCascaderState<T>()
+
+  return React.useMemo(() => {
+    const selected = selectedValues
+      .map((value) => index.byValue.get(value))
+      .filter(Boolean) as CascaderNode<T>[]
+    const paths = selectedValues.map((value) => getCascaderPath(index, value))
+
+    return {
+      selected,
+      paths,
+      first: selected[0] ?? null,
+      firstPath: paths[0] ?? [],
+      count: selectedValues.length,
+      isEmpty: selectedValues.length === 0,
+      multiple,
+      remove: (value: string) =>
+        setSelection(selectedValues.filter((entry) => entry !== value)),
+      // Explicit reason: emptying on purpose is not "deselect the last node".
+      clear: () => setSelection([], "clear"),
+    }
+  }, [index, selectedValues, multiple, setSelection])
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Root                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Why the navigation path changed.
+ * - `"drill"`: a branch was entered (row press, level arrow, deep-search hit).
+ * - `"back"`: one level up (back control, Backspace on an empty query).
+ * - `"breadcrumb"`: a jump to an exact depth in the trail.
+ * - `"reveal"`: the reopen navigated to the level holding the selection.
+ * - `"external"`: `setPath` called from outside the primitive's own flows.
+ */
+export type CascaderPathChangeReason =
+  | "drill"
+  | "back"
+  | "breadcrumb"
+  | "reveal"
+  | "external"
+
+/** Everything independent of the selection mode; the rest is on the two arms. */
+export interface CascaderBaseProps<T = unknown> {
+  /** Nested tree, or a flat list when `getParent` is supplied. */
+  items: CascaderNode<T>[]
+  /** Opt in to flat adjacency input by returning each node's parent value. */
+  getParent?: (node: CascaderNode<T>) => string | null | undefined
+
+  /**
+   * Fetches one level on demand; `node` is `null` for the root. Return an
+   * array, or a `CascaderLoadResult` when the level pages. Pages cache apart
+   * from `items`; mark unfetched branches `hasChildren` or they read as leaves.
+   */
+  getChildren?: CascaderGetChildren<T>
+  /**
+   * Server-side search, debounced by `searchDebounce`; replaces the local scan
+   * while the query is set. Results are detached: resolvable by value, in no
+   * level. Ignored in `mode="tree"`, where a hit belongs to no visible branch.
+   */
+  onSearch?: CascaderOnSearch<T>
+  /** Milliseconds of quiet before `onSearch` fires. */
+  searchDebounce?: number
+  /**
+   * Resolves a value the loader has never seen into its ancestor chain, root
+   * first, so the trigger can path a server-supplied selection. Does NOT mark
+   * those levels loaded: opening one still fetches.
+   */
+  resolveValue?: CascaderResolveValue<T>
+  /** Cache key. Changing it drops every page and aborts anything in flight. */
+  loadKey?: unknown
+  /** Prefetch a highlighted branch's children after a pause. Off by default. */
+  prefetch?: boolean
+  /**
+   * Called when a load fails. `context.parent` is the level (`null` for root);
+   * `context.reason` is `"level"`, `"more"`, `"retry"`, `"prefetch"`,
+   * `"search"` or `"resolve"`. Never for an aborted or superseded request.
+   */
+  onLoadError?: (
+    error: unknown,
+    context: { parent: string | null; reason: string }
+  ) => void
+
+  /** Which nodes may be committed. Defaults to leaves only. */
+  selectable?: CascaderSelectable<T>
+
+  /**
+   * Whether the built-in SINGLE-SELECT check is drawn. Defaults to true.
+   * `false` also gives back the inline-end gutter every style reserves for it;
+   * `data-selected` and `aria-selected` stay. A no-op under `multiple`, where
+   * the checkbox is the selection CONTROL rather than a decoration.
+   */
+  indicator?: boolean
+
+  /**
+   * Footer ACTIONS: commands pinned below the list, never rows in it, and never
+   * touching the data tree. A childless `<CascaderFooter />` draws these; an
+   * action with `items` opens a side-anchored flyout rather than firing.
+   */
+  actions?: CascaderActionItem[]
+
+  /**
+   * Parent/child cascading. Multi-select only, off by default, and it needs
+   * committable branches (`selectable="any"` or a predicate). A commit selects
+   * or deselects every SELECTABLE node in the LOADED subtree and reconciles
+   * ancestors. LOADED is the semantic, not a hedge: a commit must not fan out
+   * into a request per level, so children arriving later arrive unchecked.
+   */
+  cascade?: boolean
+
+  mode?: CascaderMode
+
+  /** How a branch opens from the pointer in columns mode's ACTIVE column.
+   * `"click"` is the default, and neither value ever commits a selection. */
+  expandTrigger?: "click" | "hover"
+
+  path?: string[]
+  defaultPath?: string[]
+  /** The second argument says WHY. An existing `(path) => void` still works. */
+  onPathChange?: (
+    path: string[],
+    details: { reason: CascaderPathChangeReason }
+  ) => void
+
+  expanded?: string[]
+  defaultExpanded?: string[]
+  onExpandedChange?: (expanded: string[]) => void
+
+  open?: boolean
+  defaultOpen?: boolean
+  /** Forwards Base UI's reason; a leaf commit's close says `"item-press"`. */
+  onOpenChange?: (open: boolean, details: { reason: string }) => void
+
+  /**
+   * Whether a SINGLE-SELECT leaf commit closes the popup. Defaults to true.
+   * `false` is for a compare-and-repick flow; Escape, outside press and the
+   * trigger still close. Ignored under `multiple`, which never closes.
+   */
+  closeOnSelect?: boolean
+
+  inputValue?: string
+  defaultInputValue?: string
+  onInputValueChange?: (value: string) => void
+
+  searchScope?: CascaderSearchScope
+  /** Custom matcher, replacing label + keywords substring matching. */
+  filter?: (node: CascaderNode<T>, normalizedQuery: string) => boolean
+
+  /** On open, navigate to the level holding the selection. Default true. */
+  revealSelected?: boolean
+
+  maxHeight?: number | string
+
+  /**
+   * Window the rendered rows. `undefined` decides per level from
+   * `virtualizeThreshold`; `true`/`false` force it. Also opt-in at the markup
+   * level, so the base install pulls in no virtualization library.
+   */
+  virtualize?: boolean
+  /** Row count at which windowing turns itself on. */
+  virtualizeThreshold?: number
+  /** Row height handed to the virtualizer before a row has been measured. */
+  estimateRowSize?: number
+  /** Rows rendered beyond each edge of the viewport. */
+  overscan?: number
+
+  labels?: Partial<CascaderLabels>
+  /** Replaces the entire row, affordances included. */
+  renderItem?: (
+    node: CascaderNode<T>,
+    state: CascaderItemState<T>
+  ) => React.ReactNode
+  /** Replaces only the label block; icon, count, chevron and check stay. */
+  renderLabel?: (
+    node: CascaderNode<T>,
+    state: CascaderItemState<T>
+  ) => React.ReactNode
+
+  disabled?: boolean
+  /** Native form field name. Submits the selected value(s). */
+  name?: string
+  /** Id of the owning form, for a cascader rendered outside it. */
+  form?: string
+  /** Id of the control. Pairs the field with a `<label htmlFor>`. */
+  id?: string
+  /** Marks the field required for native form validation. */
+  required?: boolean
+  /** The value can be read and submitted, but not changed. */
+  readOnly?: boolean
+  /** Marks the field invalid: `aria-invalid` and `data-invalid` on the trigger,
+   * the chips and the input, which every style's error treatment reads. */
+  invalid?: boolean
+  /** Ref to the hidden input Base UI submits with, for form-library focus. */
+  inputRef?: React.Ref<HTMLInputElement>
+  /** Renders without a floating popup, for an embedded `CascaderPanel`. */
+  inline?: boolean
+
+  children?: React.ReactNode
+}
+
+export interface CascaderSingleProps<T = unknown> extends CascaderBaseProps<T> {
+  multiple?: false
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string, details: CascaderChangeDetails<T>) => void
+  /** `never` so passing it is a compile error, not a silent no-op. */
+  max?: never
+}
+
+/** Multi-select props. Enables checkbox rows and chip display. */
+export interface CascaderMultipleProps<
+  T = unknown,
+> extends CascaderBaseProps<T> {
+  multiple: true
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[], details: CascaderChangeDetails<T>) => void
+  /** Cap on selections. Further picks are refused, the existing ones survive. */
+  max?: number
+}
+
+/** `multiple` discriminates: `value`, `onValueChange` and `max` narrow with it. */
+export type CascaderProps<T = unknown> =
+  | CascaderSingleProps<T>
+  | CascaderMultipleProps<T>
+
+/** Normalizes to an array. `""` is "no selection", not a node: it is the
+ * uncontrolled default, and resolving it would render a blank chip. */
+function toArray(value: string | string[] | undefined): string[] {
+  if (value == null) return []
+  if (Array.isArray(value)) return value.filter((entry) => entry !== "")
+  return value === "" ? [] : [value]
+}
+
+/* -------------------------------------------------------------------------- */
+/*                            Development warnings                            */
+/* -------------------------------------------------------------------------- */
+
+interface CascaderDevOptions<T> {
+  items: CascaderNode<T>[]
+  getParent?: (node: CascaderNode<T>) => string | null | undefined
+  mode: CascaderMode
+  multiple: boolean
+  cascade: boolean
+  indicator: boolean
+  selectable: CascaderSelectable<T>
+  searchScope: CascaderSearchScope
+  max: number | undefined
+  value: string | string[] | undefined
+  defaultValue: string | string[] | undefined
+  hasExpanded: boolean
+  hasPath: boolean
+  hasOnSearch: boolean
+}
+
+/** Misconfigurations that are SILENT by design. Once each, never in prod. */
+function useCascaderDevWarnings<T>(options: CascaderDevOptions<T>) {
+  const {
+    items,
+    getParent,
+    mode,
+    multiple,
+    cascade,
+    indicator,
+    selectable,
+    searchScope,
+    max,
+    value,
+    defaultValue,
+    hasExpanded,
+    hasPath,
+    hasOnSearch,
+  } = options
+
+  // O(n) over the raw input, so the memo is skipped outright in production.
+  const issues = React.useMemo(
+    () =>
+      process.env.NODE_ENV === "production"
+        ? null
+        : findCascaderDataIssues(items, getParent),
+    [items, getParent]
+  )
+
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return
+
+    for (const duplicate of issues?.duplicates ?? []) {
+      warnCascaderOnce(
+        `duplicate-value:${duplicate}`,
+        `Duplicate node value ${JSON.stringify(duplicate)}. \`value\` is the selection key, so only the first occurrence is indexed and the rest never render.`
+      )
+    }
+
+    for (const cycle of issues?.cycles ?? []) {
+      warnCascaderOnce(
+        `cycle:${cycle}`,
+        `\`getParent\` puts ${JSON.stringify(cycle)} on a cycle. The depth walk is cycle-guarded so nothing hangs, but every depth on that chain is clamped rather than derived.`
+      )
+    }
+  }, [issues])
+
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return
+
+    for (const [prop, current] of [
+      ["value", value],
+      ["defaultValue", defaultValue],
+    ] as const) {
+      if (current == null) continue
+      if (multiple && !Array.isArray(current)) {
+        warnCascaderOnce(
+          `value-shape:multiple:${prop}`,
+          `\`multiple\` is set but \`${prop}\` is a string. Multi-select reads and writes a \`string[]\`; a string is treated as no selection at all.`
+        )
+      } else if (!multiple && Array.isArray(current)) {
+        warnCascaderOnce(
+          `value-shape:single:${prop}`,
+          `\`${prop}\` is an array but \`multiple\` is not set. Single-select reads and writes a \`string\`; only the first entry would survive a commit.`
+        )
+      }
+    }
+
+    if (cascade && !multiple) {
+      warnCascaderOnce(
+        "cascade-without-multiple",
+        "`cascade` does nothing without `multiple`: a single selection has no subtree to propagate over."
+      )
+    }
+
+    if (cascade && selectable === "leaf") {
+      warnCascaderOnce(
+        "cascade-with-leaf-selectable",
+        '`cascade` does nothing while `selectable="leaf"`: no branch can be committed, so no commit ever has a subtree under it. Pass `selectable="any"` or a predicate that accepts branches.'
+      )
+    }
+
+    if (!indicator && multiple) {
+      warnCascaderOnce(
+        "indicator-false-with-multiple",
+        "`indicator={false}` does nothing with `multiple`: the checkbox is the selection control rather than a decoration, so it and its gutter stay. Mark selection your own way from `data-selected` on the row, and drop the prop."
+      )
+    }
+
+    if (max != null && !multiple) {
+      warnCascaderOnce(
+        "max-without-multiple",
+        "`max` does nothing without `multiple`: there is only ever one selection to cap."
+      )
+    }
+
+    if (hasExpanded && mode !== "tree") {
+      warnCascaderOnce(
+        `expanded-outside-tree:${mode}`,
+        `\`expanded\` only does something in \`mode="tree"\`, and this cascader is in \`mode="${mode}"\`. Drill and columns navigate with \`path\`.`
+      )
+    }
+
+    if (hasPath && mode === "tree") {
+      warnCascaderOnce(
+        "path-in-tree",
+        '`path` does nothing in `mode="tree"`: branches expand in place rather than replacing the level. Use `expanded`.'
+      )
+    }
+
+    if (searchScope === "deep" && mode === "tree") {
+      warnCascaderOnce(
+        "deep-search-in-tree",
+        '`searchScope="deep"` does nothing in `mode="tree"`: a tree query already matches at any depth and auto-expands the ancestors of every hit.'
+      )
+    }
+
+    if (hasOnSearch && mode === "tree") {
+      warnCascaderOnce(
+        "onsearch-in-tree",
+        '`onSearch` does nothing in `mode="tree"`: a tree query filters the loaded tree in place, and a server hit belongs to no visible branch, so its results would never render. The request is not fired. Filter the tree locally, or use drill or columns for server search.'
+      )
+    }
+  }, [
+    mode,
+    multiple,
+    cascade,
+    indicator,
+    selectable,
+    searchScope,
+    max,
+    value,
+    defaultValue,
+    hasExpanded,
+    hasPath,
+    hasOnSearch,
+  ])
+}
+
+/** What the `[]`-dep callbacks would otherwise close over. One ref, one
+ * effect, so "the last committed render" is defined in exactly one place. */
+interface CascaderLatest<T> {
+  index: CascaderIndex<T>
+  state: CascaderStateContextValue<T>
+  mode: CascaderMode
+  multiple: boolean
+  cascade: boolean
+  max: number | undefined
+  labels: CascaderLabels
+  closeOnSelect: boolean
+  selectedValues: string[]
+  deepResults: CascaderNode<T>[] | null
+  onValueChange:
+    | ((value: string | string[], details: CascaderChangeDetails<T>) => void)
+    | undefined
+  resolveNode: (value: string) => CascaderNode<T>
+  isSelectable: (node: CascaderNode<T>) => boolean
+  needsChildren: (node: CascaderNode<T>) => boolean
+  expanded: ReadonlySet<string>
+}
+
+/** A navigation waiting on a fetch. The `kind`s differ: a drill appends, a
+ * columns press replaces the trail from `depth`, a tree press expands. */
+interface CascaderPendingNavigation {
+  value: string
+  kind: "push" | "at" | "expand"
+  /** `kind: "at"` only. The depth the pressed row belongs to. */
+  depth: number
+}
+
+/** No default on `T`: inferred from `items`, so `node.data` arrives typed. */
+function Cascader<T>({
+  items,
+  getParent,
+  getChildren,
+  onSearch,
+  searchDebounce,
+  resolveValue,
+  loadKey,
+  prefetch,
+  onLoadError,
+  value: valueProp,
+  defaultValue,
+  onValueChange: onValueChangeProp,
+  multiple = false,
+  selectable = "leaf",
+  indicator = true,
+  actions,
+  cascade = false,
+  max,
+  mode = "drill",
+  expandTrigger,
+  path: pathProp,
+  defaultPath,
+  onPathChange,
+  expanded: expandedProp,
+  defaultExpanded,
+  onExpandedChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  closeOnSelect = true,
+  inputValue: inputValueProp,
+  defaultInputValue = "",
+  onInputValueChange,
+  searchScope = "level",
+  filter,
+  revealSelected = true,
+  maxHeight,
+  virtualize,
+  virtualizeThreshold = 100,
+  estimateRowSize = 32,
+  overscan = 8,
+  labels: labelsProp,
+  renderItem,
+  renderLabel,
+  disabled,
+  name,
+  form,
+  id,
+  required,
+  readOnly,
+  invalid,
+  inputRef,
+  inline,
+  children,
+}: CascaderProps<T>) {
+  const baseIndex = React.useMemo(
+    () => buildCascaderIndex(items, getParent),
+    // `getParent` is stable by design: an inline accessor must not rebuild a
+    // 50k-node index.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items]
+  )
+
+  const baseId = React.useId()
+
+  // Shallow-stabilized first: an inline `labels` would republish the context.
+  const stableLabelsProp = useShallowStable(labelsProp, shallowEqualRecords)
+
+  const labels = React.useMemo(
+    () => resolveCascaderLabels(stableLabelsProp),
+    [stableLabelsProp]
+  )
+
+  useCascaderDevWarnings({
+    items,
+    getParent,
+    mode,
+    multiple,
+    cascade,
+    indicator,
+    selectable,
+    searchScope,
+    max,
+    value: valueProp,
+    defaultValue,
+    hasExpanded:
+      expandedProp !== undefined ||
+      defaultExpanded !== undefined ||
+      onExpandedChange !== undefined,
+    hasPath:
+      pathProp !== undefined ||
+      defaultPath !== undefined ||
+      onPathChange !== undefined,
+    hasOnSearch: onSearch !== undefined,
+  })
+
+  // Public props are discriminated, internals are not: one assertion.
+  const onValueChange = onValueChangeProp as
+    | ((value: string | string[], details: CascaderChangeDetails<T>) => void)
+    | undefined
+
+  // No `onChange`: `onValueChange` takes a second argument, so `emitSelection`
+  // invokes it rather than the state hook, which only knows the value.
+  const [value, setValue] = useControllable<string | string[]>(
+    valueProp,
+    defaultValue ?? (multiple ? [] : ""),
+    undefined,
+    "value"
+  )
+  // Why the current path (or open) change is happening. Refs, not arguments:
+  // `useControllable` only passes a value, and its onChange runs synchronously
+  // inside the setter, so a ref written just before is exact. The path ref
+  // resets to `"external"`, which is what the consumer's `setPath` reports.
+  const pathReasonRef = React.useRef<CascaderPathChangeReason>("external")
+  const openReasonRef = React.useRef<string>("none")
+
+  const [path, setPath] = useControllable<string[]>(
+    pathProp,
+    defaultPath ?? [],
+    (next) => onPathChange?.(next, { reason: pathReasonRef.current }),
+    "path"
+  )
+  const [expandedList, setExpandedList] = useControllable<string[]>(
+    expandedProp,
+    defaultExpanded ?? [],
+    onExpandedChange,
+    "expanded"
+  )
+  const [open, setOpen] = useControllable<boolean>(
+    openProp,
+    defaultOpen,
+    (next) => onOpenChange?.(next, { reason: openReasonRef.current }),
+    "open"
+  )
+
+  /** The internal `setPath`: names its reason, then hands back to "external". */
+  const setPathWithReason = React.useCallback(
+    (
+      next: string[] | ((prev: string[]) => string[]),
+      reason: CascaderPathChangeReason
+    ) => {
+      pathReasonRef.current = reason
+      try {
+        setPath(next)
+      } finally {
+        pathReasonRef.current = "external"
+      }
+    },
+    [setPath]
+  )
+  const [query, setQuery] = useControllable<string>(
+    inputValueProp,
+    defaultInputValue,
+    onInputValueChange,
+    "inputValue"
+  )
+
+  const expanded = React.useMemo(() => new Set(expandedList), [expandedList])
+  const selectedValues = React.useMemo(() => toArray(value), [value])
+
+  /* --------------------------------- async -------------------------------- */
+
+  // On-screen levels, so the ones worth fetching. Columns shows the whole
+  // trail at once, which is why the loader is per-level, not one flag.
+  const levels = React.useMemo(() => {
+    if (mode === "tree") return [CASCADER_ROOT_KEY, ...expandedList]
+    if (mode === "columns") return [CASCADER_ROOT_KEY, ...path]
+    return [path.length ? path[path.length - 1] : CASCADER_ROOT_KEY]
+  }, [mode, path, expandedList])
+
+  // A SIBLING of the index build, never a step inside it: the build stays pure
+  // in `items`, the loader owns the pages, the merge is pure in both, and that
+  // is what makes loaded data survive an `items` change.
+  const loader = useCascaderLoader<T>({
+    base: baseIndex,
+    getChildren,
+    // Gated, not merely unrendered: a tree hit belongs to no visible branch.
+    onSearch: mode === "tree" ? undefined : onSearch,
+    resolveValue,
+    searchDebounce,
+    loadKey,
+    prefetch,
+    onLoadError,
+    // An inline cascader is never "open", but its panel is live.
+    enabled: open || !!inline,
+    query,
+    levels,
+    path,
+    values: selectedValues,
+  })
+
+  const loadStates = loader.states
+
+  // Destructured here, not at the actions memo, because `navigate` sits above
+  // it. All three are `[]`-dep inside the loader, so identity is stable.
+  const { ensureLevel, retryLevel: retryLoaderLevel, invalidateLevel } = loader
+
+  /**
+   * Whether pressing this branch has to FETCH first: in flight, failed, or
+   * never asked. `baseIndex`, NOT the merged `index`: `resolveValue` writes an
+   * ancestor chain into `pages` without touching `states`, so the merged index
+   * shows children for levels never requested. Must agree with `ensureLevel`'s
+   * own guards or a press parks a navigation nothing will ever settle.
+   */
+  const needsChildren = React.useCallback(
+    (node: CascaderNode<T>) => {
+      if (!loader.active) return false
+      const state = loadStates.get(node.value)
+      if (state) return state.loading || state.error
+      return !baseIndex.childrenOf.has(node.value)
+    },
+    [loader.active, loadStates, baseIndex]
+  )
+
+  // Keyed on the two maps the merge reads, NOT the store: `withLoadState`
+  // returns a fresh store over the SAME maps, so keying on it rebuilt the
+  // whole index on every loading flip that changed no data.
+  const index = React.useMemo(
+    () =>
+      mergeCascaderIndex(baseIndex, loader.store.pages, loader.store.detached),
+    [baseIndex, loader.store.pages, loader.store.detached]
+  )
+
+  /** Whether a level needs the paging pseudo-row. A never-fetched level gets
+   * nothing; that is the empty state's job. Tree has no per-level empty state,
+   * so there the row is also the branch's loading and error surface. */
+  const needsMoreRow = React.useCallback(
+    (key: string, childCount: number) => {
+      const state = loadStates.get(key)
+      if (!state) return false
+      if (childCount > 0) return state.hasMore || state.loading || state.error
+      return mode === "tree" && (state.loading || state.error)
+    },
+    [loadStates, mode]
+  )
+
+  // Remembers every selected node, so the trigger keeps a label after it
+  // leaves the loaded set (or was never in it).
+  const labelCacheRef = React.useRef(new Map<string, CascaderNode<T>>())
+
+  // Populated during render, since the trigger reads it while rendering.
+  // Idempotent and prop-derived, so a discarded render is harmless.
+  for (const selected of selectedValues) {
+    const node = index.byValue.get(selected)
+    if (node) labelCacheRef.current.set(selected, node)
+  }
+
+  const resolveNode = React.useCallback(
+    (nodeValue: string): CascaderNode<T> =>
+      index.byValue.get(nodeValue) ??
+      labelCacheRef.current.get(nodeValue) ?? {
+        value: nodeValue,
+        label: nodeValue,
+      },
+    [index]
+  )
+
+  /* ------------------------------ derived view ----------------------------- */
+
+  const currentParentValue = path.length ? path[path.length - 1] : null
+  const currentParent = currentParentValue
+    ? (index.byValue.get(currentParentValue) ?? null)
+    : null
+
+  const currentLevelKey = currentParentValue ?? CASCADER_ROOT_KEY
+
+  const isDeepSearching =
+    searchScope === "deep" && query.trim().length > 0 && mode !== "tree"
+
+  const localDeepResults = React.useMemo(() => {
+    if (!isDeepSearching) return null
+    return searchCascaderDeep(index, query, {
+      within: currentParentValue,
+      matches: filter,
+    })
+  }, [isDeepSearching, index, query, currentParentValue, filter])
+
+  // Server search wins over the local scan, or each hit shows up twice.
+  const deepResults = loader.searchResults ?? localDeepResults
+
+  const levelItems = React.useMemo(() => {
+    const level = getCascaderChildren(index, currentParentValue)
+    return filterCascaderLevel(level, query, filter)
+  }, [index, currentParentValue, query, filter])
+
+  /** The active level's rows plus the paging pseudo-row, appended HERE because
+   * every index Base UI hands out indexes this array: a DOM row missing from
+   * it shifts the highlight and every windowed row by one. */
+  const levelRendered = React.useMemo(() => {
+    if (deepResults) return deepResults
+    if (!needsMoreRow(currentLevelKey, levelItems.length)) return levelItems
+    return [
+      ...levelItems,
+      createCascaderMoreNode<T>(currentLevelKey, levelItems.length),
+    ]
+  }, [deepResults, levelItems, currentLevelKey, needsMoreRow])
+
+  // Columns renders the whole trail, but only the deepest column is
+  // interactive through Base UI, so `renderedItems` stays what drill uses.
+  const columns = React.useMemo<CascaderColumn<T>[]>(() => {
+    if (mode !== "columns") return []
+    const trail: CascaderColumn<T>[] = []
+    for (let depth = 0; depth <= path.length; depth += 1) {
+      const parentValue = depth === 0 ? null : path[depth - 1]
+      const parent = parentValue
+        ? (index.byValue.get(parentValue) ?? null)
+        : null
+      const isActive = depth === path.length
+      let columnItems: CascaderNode<T>[]
+      if (isActive) {
+        columnItems = levelRendered
+      } else {
+        // A trail column pages on its own, without losing the columns right of it.
+        const key = parentValue ?? CASCADER_ROOT_KEY
+        const children = getCascaderChildren(index, parentValue)
+        columnItems = needsMoreRow(key, children.length)
+          ? [...children, createCascaderMoreNode<T>(key, children.length)]
+          : children
+      }
+      trail.push({
+        parent,
+        depth,
+        activeValue: path[depth] ?? null,
+        active: isActive,
+        // Only the active column is filtered: a query narrows what you type
+        // into, never the trail behind it.
+        items: columnItems,
+      })
+    }
+    return trail
+  }, [mode, path, index, levelRendered, needsMoreRow])
+
+  // Tree level keys needing a paging pseudo-row. With no per-level empty
+  // state, this is also where a still-loading branch says so.
+  const treeSentinels = React.useMemo(() => {
+    if (mode !== "tree") return undefined
+    const keys = new Set<string>()
+    const consider = (key: string) => {
+      if (needsMoreRow(key, index.childrenOf.get(key)?.length ?? 0)) {
+        keys.add(key)
+      }
+    }
+    consider(CASCADER_ROOT_KEY)
+    for (const value of expanded) consider(value)
+    return keys.size ? keys : undefined
+  }, [mode, index, expanded, needsMoreRow])
+
+  const treeRows = React.useMemo<CascaderFlatNode<T>[]>(() => {
+    if (mode !== "tree") return []
+    const rows = flattenCascaderTree(index, expanded, treeSentinels)
+    // Same normalizer as the level filter, so the two cannot disagree.
+    const normalized = normalizeCascaderQuery(query)
+    if (!normalized) return rows
+    // Matches every node, not just visible rows, and keeps the ancestors, or a
+    // hit inside a collapsed branch disappears. Same matcher as every other
+    // path, so keyword-only hits do not vanish in tree mode alone.
+    const keep = new Set<string>()
+    for (const node of index.all) {
+      if (
+        !(filter
+          ? filter(node, normalized)
+          : matchesCascaderQuery(node, normalized))
+      ) {
+        continue
+      }
+      for (const ancestor of getCascaderPath(index, node.value)) {
+        keep.add(ancestor.value)
+      }
+    }
+    // No sentinels while filtering: that page would not have the query applied.
+    return flattenCascaderTree(index, new Set([...expanded, ...keep])).filter(
+      (row) => keep.has(row.node.value)
+    )
+  }, [mode, index, expanded, treeSentinels, query, filter])
+
+  // What `Combobox.Root` receives. Tree flattens to the same linear list, so
+  // selection and highlighting need no per-mode case.
+  const renderedItems = React.useMemo(
+    () => (mode === "tree" ? treeRows.map((row) => row.node) : levelRendered),
+    [mode, treeRows, levelRendered]
+  )
+
+  /* ---------------------------- level swap reset --------------------------- */
+
+  /** Base UI never resets the highlighted index on an `items` change and has
+   * no imperative setter; its one automatic reset is an out-of-range clamp, so
+   * a single empty frame trips it. The frame rides `filteredItems`, so the
+   * `items` identity stays put. */
+  const levelKey = currentParentValue ?? ""
+
+  // STATE, not a ref: a replayed render would see a ref advanced and skip it.
+  const [swap, setSwap] = React.useState({ key: levelKey, active: false })
+
+  if (swap.key !== levelKey) {
+    setSwap({ key: levelKey, active: true })
+  }
+  const swapping = swap.active && swap.key === levelKey
+
+  React.useLayoutEffect(() => {
+    if (swap.active) setSwap((prev) => ({ ...prev, active: false }))
+  }, [swap.active])
+
+  /* ----------------------------- virtualization ---------------------------- */
+
+  // A COUNT: columns mounts one per column, and StrictMode remounts effects.
+  const [virtualRenderers, setVirtualRenderers] = React.useState(0)
+
+  const registerVirtualRenderer = React.useCallback(() => {
+    setVirtualRenderers((count) => count + 1)
+    return () => setVirtualRenderers((count) => Math.max(0, count - 1))
+  }, [])
+
+  const hasVirtualRenderer = virtualRenderers > 0
+  const wantsVirtual = virtualize ?? renderedItems.length >= virtualizeThreshold
+
+  // LATCHED per level: otherwise a query narrowing a 5,000 row level past the
+  // threshold tears the virtualizer down and rebuilds it on backspace, losing
+  // every measurement. State, not a ref, like `swap`.
+  const [virtualLatch, setVirtualLatch] = React.useState({
+    key: levelKey,
+    on: false,
+  })
+
+  const virtualized =
+    hasVirtualRenderer &&
+    (virtualLatch.key === levelKey
+      ? virtualLatch.on || wantsVirtual
+      : wantsVirtual)
+
+  if (!hasVirtualRenderer) {
+    // Nothing is windowing, so nothing may stay latched.
+    if (virtualLatch.on || virtualLatch.key !== levelKey) {
+      setVirtualLatch({ key: levelKey, on: false })
+    }
+  } else if (virtualLatch.key !== levelKey) {
+    setVirtualLatch({ key: levelKey, on: virtualized })
+  } else if (virtualized && !virtualLatch.on) {
+    setVirtualLatch({ key: levelKey, on: true })
+  }
+
+  /**
+   * One forced re-render, one commit AFTER windowing turns on. Base UI sizes
+   * `listRef` from `filteredItems` in a layout effect keyed on that array's
+   * identity, but `virtualized` reaches the list a commit later and the
+   * `CompositeList` teardown REPLACES `listRef` with an empty array nothing
+   * re-sizes, so ArrowDown stops at the last WINDOWED row. A passive effect is
+   * late enough: the teardown is scheduled from a layout effect.
+   */
+  const [virtualSyncs, setVirtualSyncs] = React.useState(0)
+
+  React.useEffect(() => {
+    if (!virtualized) return
+    setVirtualSyncs((count) => count + 1)
+  }, [virtualized])
+
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return undefined
+    if (virtualize !== true || hasVirtualRenderer) return undefined
+    // Deferred a tick: the renderer registers from a layout effect, so a
+    // synchronous check would report every correctly wired cascader.
+    const timeout = setTimeout(() => {
+      console.error(
+        "[Cascader] `virtualize` is true but no windowing renderer is mounted. " +
+          "Render <CascaderVirtualItems /> inside <CascaderList>, or " +
+          "<CascaderVirtualColumn /> through the <CascaderColumns> slot."
+      )
+    }, 0)
+    return () => clearTimeout(timeout)
+  }, [virtualize, hasVirtualRenderer])
+
+  /* ------------------------------ navigation ------------------------------ */
+
+  /** One signal per navigation, feeding the live region, bumped EXACTLY once
+   * per action. `seq` alternates the invisible marker so two identical
+   * announcements are still two mutations; `toggled` names the tree branch. */
+  const [announceSignal, setAnnounceSignal] = React.useState<{
+    seq: number
+    toggled: string | null
+    /** A one-off verbatim message: a `max` refusal, a cascade fan-out. STATE,
+     * so an unrelated render cannot clear it mid-read. */
+    notice: string | null
+  }>({ seq: 0, toggled: null, notice: null })
+
+  const bumpAnnouncement = React.useCallback((toggled: string | null) => {
+    setAnnounceSignal((prev) => ({ seq: prev.seq + 1, toggled, notice: null }))
+  }, [])
+
+  /** Speaks for interactions that change nothing on screen: a refusal returns
+   * before any state moves, a cascade sweep is invisible from the row pressed.
+   * The seq bump keeps two identical refusals two mutations. */
+  const announceNotice = React.useCallback((notice: string) => {
+    setAnnounceSignal((prev) => ({ seq: prev.seq + 1, toggled: null, notice }))
+  }, [])
+
+  /**
+   * The navigation a press asked for and a fetch has not answered yet. Load
+   * BEFORE you move: drilling in first threw away the list the user was
+   * reading and, on failure, stranded them on an error screen for a level they
+   * had never seen. Holding here keeps the old rows and puts the progress on
+   * the pressed row, whose chevron `CascaderItem` swaps for a spinner.
+   */
+  const [pendingNavigation, setPendingNavigation] =
+    React.useState<CascaderPendingNavigation | null>(null)
+
+  /** Asks for a branch's children and parks the navigation until they land.
+   * BOTH entry points are called unconditionally: `retryLevel` no-ops unless
+   * the level errored, `ensureLevel` no-ops if it has state, so a repeat press
+   * is free and the readiness decision stays inside the loader. */
+  const requestChildren = React.useCallback(
+    (node: CascaderNode<T>, pending: CascaderPendingNavigation) => {
+      setPendingNavigation(pending)
+      retryLoaderLevel(node.value)
+      ensureLevel(node.value, "level")
+      // Otherwise the panel is silent from the press until the level swaps.
+      bumpAnnouncement(null)
+    },
+    [retryLoaderLevel, ensureLevel, bumpAnnouncement]
+  )
+
+  const pushLevel = React.useCallback(
+    (nodeValue: string) => {
+      setPathWithReason((prev) => [...prev, nodeValue], "drill")
+      setQuery("")
+      bumpAnnouncement(null)
+    },
+    [setPathWithReason, setQuery, bumpAnnouncement]
+  )
+
+  const popLevel = React.useCallback(() => {
+    setPathWithReason(
+      (prev) => (prev.length ? prev.slice(0, -1) : prev),
+      "back"
+    )
+    setQuery("")
+    // Going BACK abandons a held navigation, or an in-flight branch drills in
+    // the moment it lands, long after the user moved on.
+    setPendingNavigation(null)
+    bumpAnnouncement(null)
+  }, [setPathWithReason, setQuery, bumpAnnouncement])
+
+  const goToDepth = React.useCallback(
+    (depth: number) => {
+      setPathWithReason(
+        (prev) => prev.slice(0, Math.max(0, depth)),
+        "breadcrumb"
+      )
+      setQuery("")
+      setPendingNavigation(null)
+      bumpAnnouncement(null)
+    },
+    [setPathWithReason, setQuery, bumpAnnouncement]
+  )
+
+  const toggleExpanded = React.useCallback(
+    (nodeValue: string) => {
+      setExpandedList((prev) =>
+        prev.includes(nodeValue)
+          ? prev.filter((v) => v !== nodeValue)
+          : [...prev, nodeValue]
+      )
+      bumpAnnouncement(nodeValue)
+    },
+    [setExpandedList, bumpAnnouncement]
+  )
+
+  const isBranch = React.useCallback(
+    (node: CascaderNode<T>) => isCascaderBranch(index, node),
+    [index]
+  )
+
+  const isSelectable = React.useCallback(
+    (node: CascaderNode<T>) => isCascaderSelectable(index, node, selectable),
+    [index, selectable]
+  )
+
+  // Whether a branch can be committed AT ALL here. `"leaf"` is the only
+  // setting that answers no in advance; a predicate is opaque, so the check
+  // gutter is reserved uniformly rather than per row.
+  const branchesSelectable = selectable !== "leaf"
+
+  // Open flyouts, by key. A ref, not state: `handleOpenChange` needs the
+  // answer as of the Escape being handled, and opening a footer menu must not
+  // re-render the root.
+  const openFlyoutsRef = React.useRef<Set<string>>(new Set())
+
+  const setFlyoutOpen = React.useCallback((key: string, open: boolean) => {
+    if (open) openFlyoutsRef.current.add(key)
+    else openFlyoutsRef.current.delete(key)
+  }, [])
+
+  const hasOpenFlyout = React.useCallback(
+    () => openFlyoutsRef.current.size > 0,
+    []
+  )
+
+  // Shallow-stabilized like `labels`: an inline array republished the context.
+  const stableActions = useShallowStable(actions, shallowEqualItemLists)
+
+  const resolvedActions = React.useMemo<CascaderActionItem[]>(
+    () => stableActions ?? EMPTY_ACTIONS,
+    [stableActions]
+  )
+
+  // A Set, not an `includes` scan: `isSelected` runs once per rendered row.
+  const selectedSet = React.useMemo(
+    () => new Set(selectedValues),
+    [selectedValues]
+  )
+
+  const isSelected = React.useCallback(
+    (node: CascaderNode<T>) => selectedSet.has(node.value),
+    [selectedSet]
+  )
+
+  /** Selected-descendant counts, walked ONCE per selection change and never
+   * stored, so the flat value array stays the only source of truth. The walk
+   * is `selections x depth`, up from each selection rather than down from each
+   * row, which keeps the count and `isIndeterminate` O(1). */
+  const selectedDescendants = React.useMemo(
+    () => getCascaderSelectedDescendants(index, selectedValues),
+    [index, selectedValues]
+  )
+
+  const selectedDescendantCount = React.useCallback(
+    (node: CascaderNode<T>) => selectedDescendants.get(node.value) ?? 0,
+    [selectedDescendants]
+  )
+
+  // Partial selections read off the SAME map, so the dash and the number are
+  // two readings of one traversal and cannot drift apart.
+  const indeterminateSet = React.useMemo(() => {
+    if (!cascade || !multiple) return null
+    return getCascaderIndeterminateFrom(selectedDescendants, selectedValues)
+  }, [cascade, multiple, selectedDescendants, selectedValues])
+
+  const isIndeterminate = React.useCallback(
+    (node: CascaderNode<T>) => indeterminateSet?.has(node.value) ?? false,
+    [indeterminateSet]
+  )
+
+  // Base UI owns the highlight; mirrored so handlers can read it unsubscribed.
+  const highlightedRef = React.useRef<CascaderNode<T> | null>(null)
+  const getHighlighted = React.useCallback(() => highlightedRef.current, [])
+
+  // The same highlight as an external store, for the consumer that must
+  // RE-RENDER on it. `useState`, not `useMemo`: React may drop a memo, and a
+  // second store would silently orphan every subscriber.
+  const [highlightStore] = React.useState<CascaderHighlightStore>(
+    createCascaderHighlightStore
+  )
+
+  /* ------------------------------ announcement ---------------------------- */
+
+  const currentLoadState = React.useMemo<CascaderLoadState | null>(
+    () => loadStates.get(currentLevelKey) ?? null,
+    [loadStates, currentLevelKey]
+  )
+  const searchLoadState = loader.searchState
+
+  /** What the query announcement COUNTS: matches, not rows, since the list
+   * also carries a tree query's ancestor context and the Load-more row. Server
+   * hits count as-is; re-judging them locally would drop what it matched on
+   * data the client cannot see. */
+  const announcedMatches = React.useMemo(() => {
+    if (deepResults) return deepResults.length
+    const normalized = normalizeCascaderQuery(query)
+    if (!normalized) return 0
+    const matches = filter ?? matchesCascaderQuery
+    return renderedItems.filter(
+      (node) => !isCascaderMoreNode(node) && matches(node, normalized)
+    ).length
+  }, [deepResults, renderedItems, query, filter])
+
+  // The live-region text plus whether it may be DEFERRED; see
+  // `ANNOUNCE_DEBOUNCE`. The committed string is state, set below.
+  const announcementTarget = React.useMemo(() => {
+    // An INLINE cascader is never "open", so `open` alone silenced its tree.
+    if (!open && !inline) return { text: "", defer: false }
+
+    const total = renderedItems.length
+    const marker = ANNOUNCE_MARKER.repeat(announceSignal.seq % 2)
+
+    // A notice outranks everything below: it exists because nothing else on
+    // screen changed. It rides the signal, so the next navigation replaces it.
+    if (announceSignal.notice) {
+      return { text: `${announceSignal.notice}${marker}`, defer: false }
+    }
+
+    // A tree toggle changes neither level nor query, so it rides the signal.
+    const toggled =
+      mode === "tree" && announceSignal.toggled
+        ? (index.byValue.get(announceSignal.toggled) ?? null)
+        : null
+
+    // Async states outrank everything below, or a fetching level announces "0
+    // results" and contradicts itself. A HELD navigation outranks even those:
+    // nothing on screen has moved yet, so "loading" is the only truth.
+    const pendingState = pendingNavigation
+      ? (loadStates.get(pendingNavigation.value) ?? null)
+      : null
+    const levelState = query.trim() ? searchLoadState : currentLoadState
+    let text: string
+    let defer = false
+    if (pendingState?.error) {
+      text = labels.error
+    } else if (pendingNavigation) {
+      // Always the FIRST-page string: the rows on screen belong to the level
+      // being left behind, so their count says nothing about this request.
+      text = labels.loading
+    } else if (levelState?.error) {
+      text = labels.error
+    } else if (levelState?.loading) {
+      // With a query set the in-flight load IS the server search, and calling
+      // that "Loading more" misreads what is being waited on.
+      text = query.trim()
+        ? labels.searchingAnnouncement
+        : total > 0
+          ? labels.loadingMore
+          : labels.loading
+    } else if (query.trim()) {
+      // An empty result set is the more useful thing to say than "0 results".
+      text =
+        announcedMatches === 0
+          ? labels.empty
+          : labels.resultsAnnouncement(announcedMatches)
+      // The ONE deferred branch: only a stream of keystrokes needs coalescing.
+      defer = true
+    } else if (toggled) {
+      text = expanded.has(toggled.value)
+        ? labels.expandedAnnouncement(
+            toggled.label,
+            getCascaderCount(index, toggled)
+          )
+        : labels.collapsedAnnouncement(toggled.label)
+    } else if (currentParent) {
+      // `path.length + 1` matches tree mode's `aria-level`: the rows are
+      // `currentParent`'s CHILDREN, one level below it.
+      text = labels.levelAnnouncement(
+        currentParent.label,
+        path.length + 1,
+        total
+      )
+    } else {
+      // Returning to the root would otherwise announce nothing at all.
+      text = labels.rootAnnouncement(total)
+    }
+
+    return { text: `${text}${marker}`, defer }
+  }, [
+    open,
+    inline,
+    mode,
+    index,
+    expanded,
+    announceSignal,
+    query,
+    labels,
+    renderedItems.length,
+    announcedMatches,
+    currentParent,
+    path.length,
+    currentLoadState,
+    searchLoadState,
+    pendingNavigation,
+    loadStates,
+  ])
+
+  /** The COMMITTED announcement. Immediate texts commit during render (the
+   * pattern `swap` uses), so an async settle announces in the very commit that
+   * shows the rows. Only the deferred query count uses the timer below. */
+  const [announced, setAnnounced] = React.useState(announcementTarget)
+
+  if (!announcementTarget.defer && announced.text !== announcementTarget.text) {
+    // Terminates: after the set the condition is false on the re-render.
+    setAnnounced(announcementTarget)
+  }
+
+  React.useEffect(() => {
+    if (!announcementTarget.defer) return undefined
+    const timer = setTimeout(
+      () => setAnnounced(announcementTarget),
+      ANNOUNCE_DEBOUNCE
+    )
+    return () => clearTimeout(timer)
+  }, [announcementTarget])
+
+  const announcement = announced.text
+
+  /* --------------------------------- state -------------------------------- */
+
+  // The volatile half: rebuilt by a keystroke, hence split from the actions.
+  const stateValue = React.useMemo<CascaderStateContextValue<T>>(
+    () => ({
+      index,
+      path,
+      expanded,
+      query,
+      currentParent,
+      levelItems,
+      deepResults,
+      renderedItems,
+      columns,
+      treeRows,
+      selectedValues,
+      selectedDescendants,
+      loadStates,
+      searchState: searchLoadState,
+      announcement,
+    }),
+    [
+      index,
+      path,
+      expanded,
+      query,
+      currentParent,
+      levelItems,
+      deepResults,
+      renderedItems,
+      columns,
+      treeRows,
+      selectedValues,
+      selectedDescendants,
+      loadStates,
+      searchLoadState,
+      announcement,
+    ]
+  )
+
+  /* ------------------------------ latest props ---------------------------- */
+
+  /**
+   * Latest committed props and derived state, WRITTEN IN AN EFFECT. That is
+   * what keeps the callbacks below `[]`-dep and stable for the life of the
+   * cascader; writing during render is unsafe under concurrent rendering. The
+   * cost: a read sees the PREVIOUS commit until the effect runs, so ONLY event
+   * handlers may read it. Anything used during render is memoised instead.
+   */
+  const latest = React.useRef<CascaderLatest<T>>({
+    index,
+    state: stateValue,
+    mode,
+    multiple,
+    cascade,
+    max,
+    labels,
+    closeOnSelect,
+    selectedValues,
+    deepResults,
+    onValueChange,
+    resolveNode,
+    isSelectable,
+    needsChildren,
+    expanded,
+  })
+
+  React.useEffect(() => {
+    latest.current = {
+      index,
+      state: stateValue,
+      mode,
+      multiple,
+      cascade,
+      max,
+      labels,
+      closeOnSelect,
+      selectedValues,
+      deepResults,
+      onValueChange,
+      resolveNode,
+      isSelectable,
+      needsChildren,
+      expanded,
+    }
+  })
+
+  const getIndex = React.useCallback(() => latest.current.index, [])
+  const getState = React.useCallback(() => latest.current.state, [])
+
+  const goToLevelAt = React.useCallback(
+    (nodeValue: string, depth: number) => {
+      setPathWithReason(
+        (prev) => [...prev.slice(0, Math.max(0, depth)), nodeValue],
+        "drill"
+      )
+      setQuery("")
+      bumpAnnouncement(null)
+    },
+    [setPathWithReason, setQuery, bumpAnnouncement]
+  )
+
+  const navigateAt = React.useCallback(
+    (node: CascaderNode<T>, depth: number) => {
+      if (latest.current.mode === "tree") {
+        toggleExpanded(node.value)
+        return
+      }
+      if (latest.current.needsChildren(node)) {
+        requestChildren(node, { value: node.value, kind: "at", depth })
+        return
+      }
+      goToLevelAt(node.value, depth)
+    },
+    [toggleExpanded, goToLevelAt, requestChildren]
+  )
+
+  const navigate = React.useCallback(
+    (node: CascaderNode<T>) => {
+      const {
+        mode: currentMode,
+        deepResults: currentDeepResults,
+        index: currentIndex,
+        expanded: currentExpanded,
+        needsChildren: pending,
+      } = latest.current
+
+      if (currentMode === "tree") {
+        // Collapsing never needs data. Opening waits WITHOUT expanding, so
+        // the branch stays shut with a spinner rather than opening onto no rows.
+        if (!currentExpanded.has(node.value) && pending(node)) {
+          requestChildren(node, {
+            value: node.value,
+            kind: "expand",
+            depth: 0,
+          })
+          return
+        }
+        toggleExpanded(node.value)
+        return
+      }
+
+      // A deep-search hit sits at any depth, so drilling in rebuilds the trail
+      // rather than appending to wherever the user was.
+      if (currentDeepResults) {
+        if (pending(node)) {
+          const ancestors = getCascaderPath(currentIndex, node.value)
+          requestChildren(node, {
+            value: node.value,
+            kind: "at",
+            // The hit's own depth, so the settle rebuilds the same trail.
+            depth: Math.max(0, ancestors.length - 1),
+          })
+          return
+        }
+        const ancestors = getCascaderPath(currentIndex, node.value)
+        setPathWithReason(
+          ancestors.map((entry) => entry.value),
+          "drill"
+        )
+        setQuery("")
+        bumpAnnouncement(null)
+        return
+      }
+
+      if (pending(node)) {
+        requestChildren(node, { value: node.value, kind: "push", depth: 0 })
+        return
+      }
+      pushLevel(node.value)
+    },
+    [
+      toggleExpanded,
+      setPathWithReason,
+      setQuery,
+      pushLevel,
+      bumpAnnouncement,
+      requestChildren,
+    ]
+  )
+
+  /**
+   * The other half of `requestChildren`: the fetch settled, so the held
+   * navigation happens or is dropped. Reads the load STATE, not a promise:
+   * only the loader knows a request was superseded, aborted or retried, and no
+   * entry at all means it has not reached the store yet. On failure nothing
+   * moves and the intent is KEPT, which is what makes the row's retry
+   * affordance mean something; only `popLevel`, `goToDepth` and a close drop it.
+   */
+  React.useEffect(() => {
+    if (!pendingNavigation) return
+    const state = loadStates.get(pendingNavigation.value)
+    if (!state || state.loading || state.error) return
+
+    setPendingNavigation(null)
+
+    if (pendingNavigation.kind === "expand") {
+      toggleExpanded(pendingNavigation.value)
+      return
+    }
+    if (pendingNavigation.kind === "at") {
+      goToLevelAt(pendingNavigation.value, pendingNavigation.depth)
+      return
+    }
+    pushLevel(pendingNavigation.value)
+  }, [pendingNavigation, loadStates, toggleExpanded, goToLevelAt, pushLevel])
+
+  // A popup that closes mid-flight must not drill in when the answer arrives;
+  // the loader aborts the request, this drops the intent.
+  React.useEffect(() => {
+    if (!open && !inline) setPendingNavigation(null)
+  }, [open, inline])
+
+  /* ------------------------------- selection ------------------------------ */
+
+  // The one place the selection changes, so `onValueChange` reports the same
+  // shape whatever caused it: a row press, drag-select, or the headless hooks.
+  const emitSelection = React.useCallback(
+    (
+      nextValues: string[],
+      node: CascaderNode<T> | null,
+      reason: CascaderChangeReason
+    ) => {
+      const {
+        selectedValues: current,
+        multiple: currentMultiple,
+        onValueChange: emit,
+        index: currentIndex,
+        resolveNode: resolve,
+      } = latest.current
+
+      // Nothing changed. The dedup lives here now, not in `useControllable`.
+      const unchanged =
+        nextValues.length === current.length &&
+        nextValues.every((entry, i) => entry === current[i])
+      if (unchanged) return
+
+      const next = currentMultiple ? nextValues : (nextValues[0] ?? "")
+      setValue(next)
+
+      if (!emit) return
+
+      const chain = node ? getCascaderPath(currentIndex, node.value) : []
+      emit(next, {
+        node,
+        // A node absent from `items` has no chain, so fall back to the node
+        // rather than report an empty path for a change that had one.
+        path: node ? (chain.length ? chain : [node]) : [],
+        // `resolveNode`, not `index.byValue`: a selected value missing from
+        // `items` must still come back rather than be dropped.
+        nodes: nextValues.map(resolve),
+        reason,
+      })
+    },
+    [setValue]
+  )
+
+  const setSelection = React.useCallback(
+    (values: string[], reason?: CascaderChangeReason) => {
+      const { selectedValues: current, resolveNode: resolve } = latest.current
+      const before = new Set(current)
+      const after = new Set(values)
+      const added = values.find((entry) => !before.has(entry))
+      const removed = current.find((entry) => !after.has(entry))
+
+      if (reason === "clear") {
+        emitSelection(values, null, "clear")
+        return
+      }
+      if (added) {
+        emitSelection(values, resolve(added), reason ?? "select")
+        return
+      }
+      if (removed) {
+        emitSelection(values, resolve(removed), reason ?? "deselect")
+        return
+      }
+      // Same set: a no-op, but routed so an explicit `reason` still applies.
+      emitSelection(values, null, reason ?? "select")
+    },
+    [emitSelection]
+  )
+
+  const commit = React.useCallback(
+    (node: CascaderNode<T>) => {
+      const {
+        multiple: currentMultiple,
+        cascade: currentCascade,
+        selectedValues: current,
+        max: currentMax,
+        index: currentIndex,
+        isSelectable: currentIsSelectable,
+        labels: currentLabels,
+        closeOnSelect: currentCloseOnSelect,
+      } = latest.current
+
+      if (!currentMultiple) {
+        emitSelection([node.value], node, "select")
+        if (currentCloseOnSelect) {
+          openReasonRef.current = "item-press"
+          setOpen(false)
+        } else {
+          // The popup stays up, so clear the query the way a multiple commit
+          // does; the next pick then starts from the full level.
+          setQuery("")
+        }
+        return
+      }
+
+      if (currentCascade) {
+        const selecting = !current.includes(node.value)
+        const next = applyCascadeSelection(
+          currentIndex,
+          current,
+          node.value,
+          selecting,
+          currentIsSelectable
+        )
+        // `max` caps the whole gesture rather than truncating it: an arbitrary
+        // prefix of a subtree is a selection nobody asked for. The refusal
+        // changes nothing on screen, so the live region is its only witness.
+        if (
+          selecting &&
+          currentMax != null &&
+          next.length > currentMax &&
+          next.length > current.length
+        ) {
+          announceNotice(currentLabels.maxReachedAnnouncement(currentMax))
+          return
+        }
+        emitSelection(next, node, selecting ? "select" : "deselect")
+        // How many values the closure swept along is invisible from the one
+        // row pressed, so the sweep says its number out loud, itself excluded.
+        const before = new Set(current)
+        const after = new Set(next)
+        let swept = 0
+        for (const entry of selecting ? next : current) {
+          if (entry === node.value) continue
+          if (selecting ? !before.has(entry) : !after.has(entry)) swept += 1
+        }
+        if (swept > 0) {
+          announceNotice(
+            currentLabels.cascadeAnnouncement(
+              node.label ?? node.value,
+              swept,
+              selecting
+            )
+          )
+        }
+        setQuery("")
+        return
+      }
+
+      if (current.includes(node.value)) {
+        emitSelection(
+          current.filter((v) => v !== node.value),
+          node,
+          "deselect"
+        )
+      } else if (currentMax == null || current.length < currentMax) {
+        emitSelection([...current, node.value], node, "select")
+      } else {
+        // The plain-multiple twin of the cascade refusal above: just as silent.
+        announceNotice(currentLabels.maxReachedAnnouncement(currentMax))
+      }
+      setQuery("")
+    },
+    [emitSelection, setOpen, setQuery, announceNotice]
+  )
+
+  /** Safety net for paths that bypass the row-level veto (the drag-select
+   * mouseup). `details.cancel()` suppresses the commit and the close together:
+   * Base UI shares one event-details object between them. */
+  const handleComboboxValueChange = React.useCallback(
+    (
+      next: CascaderNode<T> | CascaderNode<T>[] | null,
+      details: ComboboxPrimitive.Root.ChangeEventDetails
+    ) => {
+      if (!multiple) {
+        const node = Array.isArray(next) ? (next[0] ?? null) : next
+        // The paging row is a real option, so Base UI reports it as a
+        // selection. Same safety net branches get, for paths a row cannot veto.
+        if (node && isCascaderMoreNode(node)) {
+          details.cancel()
+          return
+        }
+        if (node && !isSelectable(node) && isBranch(node)) {
+          details.cancel()
+          navigate(node)
+          return
+        }
+        if (node) {
+          // `closeOnSelect={false}` must also stop Base UI's OWN close; one
+          // shared details object, so cancelling suppresses both, and our value
+          // is controlled, so Base UI's half had nothing to keep.
+          if (!closeOnSelect) details.cancel()
+          commit(node)
+        }
+        return
+      }
+
+      // Take Base UI's whole array as the answer and inspect only what was
+      // ADDED. Deriving the toggle from the tail works for an add but on a
+      // remove drops the wrong node, leaving the last selection unclearable.
+      const nextNodes = Array.isArray(next) ? next : []
+      const before = new Set(selectedValues)
+      const added = nextNodes.find((node) => !before.has(node.value))
+
+      if (added && isCascaderMoreNode(added)) {
+        details.cancel()
+        return
+      }
+
+      if (added && !isSelectable(added) && isBranch(added)) {
+        details.cancel()
+        navigate(added)
+        return
+      }
+
+      // Cascading reads Base UI's array only as the REPORT of which row was
+      // pressed: it differs by exactly one value either way, and the real
+      // commit covers a whole subtree.
+      if (cascade) {
+        const nextValues = new Set(nextNodes.map((node) => node.value))
+        const removed = selectedValues.find((entry) => !nextValues.has(entry))
+        const toggled = added ?? (removed != null ? resolveNode(removed) : null)
+        if (toggled) commit(toggled)
+        return
+      }
+
+      if (
+        max != null &&
+        nextNodes.length > selectedValues.length &&
+        nextNodes.length > max
+      ) {
+        details.cancel()
+        // The third silent refusal site: cancelling reverts the press with no
+        // state change, so the live region is the only witness.
+        announceNotice(labels.maxReachedAnnouncement(max))
+        return
+      }
+
+      setSelection(nextNodes.map((node) => node.value))
+      setQuery("")
+    },
+    [
+      multiple,
+      selectedValues,
+      max,
+      cascade,
+      closeOnSelect,
+      labels,
+      announceNotice,
+      isSelectable,
+      isBranch,
+      navigate,
+      commit,
+      resolveNode,
+      setSelection,
+      setQuery,
+    ]
+  )
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean, details: ComboboxPrimitive.Root.ChangeEventDetails) => {
+      if (details.isCanceled) return
+
+      // Escape closes ONE popup at a time. `Combobox` builds no `FloatingTree`,
+      // so one Escape reaches the flyout and the cascader; the flyout clears
+      // its registration in an effect, so the set holds for exactly this event.
+      if (!nextOpen && details.reason === "escape-key" && hasOpenFlyout()) {
+        details.cancel()
+        return
+      }
+
+      // Captured for the wrapped `onOpenChange`, which runs synchronously
+      // inside `setOpen`, so a ref written just before the call is exact.
+      openReasonRef.current = details.reason ?? "none"
+      setOpen(nextOpen)
+
+      if (!nextOpen) {
+        setQuery("")
+        return
+      }
+
+      // Opening onto the level holding the selection is the difference
+      // between "edit this" and "start over".
+      if (revealSelected) {
+        setQuery("")
+        const first = toArray(value)[0]
+        setPathWithReason(
+          first
+            ? getCascaderPath(index, first)
+                .slice(0, -1)
+                .map((node) => node.value)
+            : [],
+          "reveal"
+        )
+      }
+    },
+    [
+      setOpen,
+      setQuery,
+      revealSelected,
+      value,
+      index,
+      setPathWithReason,
+      hasOpenFlyout,
+    ]
+  )
+
+  /* -------------------------------- context ------------------------------- */
+
+  // NOT memoised further: render props must be the current closure, and only
+  // rows consume this. See `CascaderRenderContextValue`.
+  const renderContext = React.useMemo(
+    () => ({ renderItem, renderLabel }),
+    [renderItem, renderLabel]
+  )
+
+  /** The stable half: nothing in these deps moves on a keystroke, a level
+   * change or a highlight, which is what makes `React.memo` on `CascaderItem`
+   * hold while the user types. Destructured off `loader` so the memo depends
+   * on its `[]`-dep callbacks, not the object it republishes per load. */
+  const { active: hasLoader, loadMore, retryLevel, prefetchNode } = loader
+
+  const actionsValue = React.useMemo<CascaderActionsContextValue<T>>(
+    () => ({
+      index,
+      mode,
+      multiple,
+      cascade,
+      branchesSelectable,
+      indicator,
+      expandTrigger,
+      actions: resolvedActions,
+      searchScope,
+      maxHeight,
+      inline: !!inline,
+      invalid: !!invalid,
+      baseId,
+      labels,
+      virtualized,
+      registerVirtualRenderer,
+      virtualize,
+      virtualizeThreshold,
+      estimateRowSize,
+      overscan,
+      hasLoader,
+      loadMore,
+      retryLevel,
+      invalidateLevel,
+      getIndex,
+      getState,
+      getHighlighted,
+      setPath,
+      pushLevel,
+      popLevel,
+      goToDepth,
+      toggleExpanded,
+      setFlyoutOpen,
+      hasOpenFlyout,
+      setQuery,
+      setSelection,
+      commit,
+      navigate,
+      navigateAt,
+      resolveNode,
+      isBranch,
+      isSelectable,
+      isSelected,
+      isIndeterminate,
+      selectedDescendantCount,
+    }),
+    [
+      index,
+      mode,
+      multiple,
+      cascade,
+      branchesSelectable,
+      indicator,
+      expandTrigger,
+      resolvedActions,
+      searchScope,
+      maxHeight,
+      inline,
+      invalid,
+      baseId,
+      labels,
+      virtualized,
+      registerVirtualRenderer,
+      virtualize,
+      virtualizeThreshold,
+      estimateRowSize,
+      overscan,
+      hasLoader,
+      loadMore,
+      retryLevel,
+      invalidateLevel,
+      getIndex,
+      getState,
+      getHighlighted,
+      setPath,
+      pushLevel,
+      popLevel,
+      goToDepth,
+      toggleExpanded,
+      setFlyoutOpen,
+      hasOpenFlyout,
+      setQuery,
+      setSelection,
+      commit,
+      navigate,
+      navigateAt,
+      resolveNode,
+      isBranch,
+      isSelectable,
+      isSelected,
+      isIndeterminate,
+      selectedDescendantCount,
+    ]
+  )
+
+  // A fresh array identity each time windowing turns on, and once more after:
+  // that identity is the ONLY thing that re-runs Base UI's `listRef` sizing
+  // effect. See `virtualSyncs`.
+  const comboboxItems = React.useMemo(
+    () => (virtualized ? renderedItems.slice() : renderedItems),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [renderedItems, virtualized, virtualSyncs]
+  )
+
+  const comboboxValue = React.useMemo(() => {
+    if (multiple) return selectedValues.map(resolveNode)
+    return selectedValues.length ? resolveNode(selectedValues[0]) : null
+  }, [multiple, selectedValues, resolveNode])
+
+  return (
+    // Providers store values with the item generic erased; the hooks re-apply
+    // the caller's own `T` on the way back out.
+    <CascaderActionsContext.Provider
+      value={actionsValue as unknown as CascaderActionsContextValue}
+    >
+      <CascaderStateContext.Provider
+        value={stateValue as unknown as CascaderStateContextValue}
+      >
+        <CascaderHighlightContext.Provider value={highlightStore}>
+          <CascaderRenderContext.Provider
+            value={renderContext as unknown as CascaderRenderContextValue}
+          >
+            <ComboboxPrimitive.Root
+              items={renderedItems}
+              /* The empty frame that resets the highlight. See the comment above. */
+              filteredItems={swapping ? EMPTY : comboboxItems}
+              /* Filtering is ours: level vs deep search scope cannot be
+                 expressed through Base UI's single matcher. */
+              filter={null}
+              value={comboboxValue}
+              onValueChange={handleComboboxValueChange}
+              open={open}
+              onOpenChange={handleOpenChange}
+              inputValue={query}
+              onInputValueChange={(next: string) => setQuery(next)}
+              multiple={multiple}
+              disabled={disabled}
+              /* Form wiring, straight to Base UI's hidden input. Conditional
+                 spreads: an explicit `undefined` on a controlled prop reads as
+                 "deleted" rather than "not supplied". */
+              name={name}
+              {...(form != null ? { form } : null)}
+              {...(id != null ? { id } : null)}
+              {...(required != null ? { required } : null)}
+              {...(readOnly != null ? { readOnly } : null)}
+              {...(inputRef ? { inputRef } : null)}
+              inline={inline}
+              /* Stops Base UI rendering its composite list, which is what makes
+                 an explicit row `index` legal. `items`/`filteredItems` stay full:
+                 they size `listRef`, or ArrowDown stops at the last RENDERED row. */
+              virtualized={virtualized}
+              itemToStringValue={(item: CascaderNode<T>) => item?.value ?? ""}
+              itemToStringLabel={(item: CascaderNode<T>) => item?.label ?? ""}
+              isItemEqualToValue={(a: CascaderNode<T>, b: CascaderNode<T>) =>
+                a?.value === b?.value
+              }
+              // Fires on every arrow key AND every pointer move, so it must
+              // never call setState. The ref serves keyboard handlers, the
+              // de-duping store anything that has to re-render.
+              onItemHighlighted={(
+                item: CascaderNode<T> | undefined,
+                details: ComboboxPrimitive.Root.HighlightEventDetails
+              ) => {
+                highlightedRef.current = item ?? null
+                highlightStore.set({
+                  index: details.index,
+                  value: item?.value ?? null,
+                })
+                // Schedules a TIMEOUT and returns: inside a layout effect, a
+                // synchronous setState would cascade before paint.
+                prefetchNode(item)
+              }}
+            >
+              {children}
+            </ComboboxPrimitive.Root>
+          </CascaderRenderContext.Provider>
+        </CascaderHighlightContext.Provider>
+      </CascaderStateContext.Provider>
+    </CascaderActionsContext.Provider>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Trigger                                  */
+/* -------------------------------------------------------------------------- */
+
+/** `Trigger.Props` stops short of `ref`, so it is intersected in, as the
+ * shadcn combobox wrapper also does: a form library needs a ref here, and
+ * `onBlur`, the "touched" signal, lands here too. */
+export interface CascaderTriggerProps
+  extends
+    ComboboxPrimitive.Trigger.Props,
+    Pick<React.ComponentPropsWithRef<"button">, "ref"> {
+  /** Hides the trailing chevron, for a trigger that supplies its own. */
+  showIcon?: boolean
+}
+
+function CascaderTrigger({
+  className,
+  children,
+  showIcon = true,
+  ref,
+  ...props
+}: CascaderTriggerProps) {
+  const { invalid } = useCascaderActions()
+
+  // `ref` is the one prop `mergeProps` does not merge, so chain it by hand.
+  const triggerRef = React.useRef<HTMLButtonElement | null>(null)
+  const setTrigger = React.useCallback(
+    (node: HTMLButtonElement | null) => {
+      triggerRef.current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref]
+  )
+
+  /** 18 of 19 audited examples shipped an unnamed combobox: the trigger's
+   * contents are the field's VALUE, so a screen reader never hears its NAME.
+   * Checked in the DOM, since the name may arrive as a `<label for>`. */
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return
+    const element = triggerRef.current
+    if (!element) return
+    const named =
+      element.hasAttribute("aria-label") ||
+      element.hasAttribute("aria-labelledby") ||
+      element.closest("label") !== null ||
+      (element.id !== "" &&
+        element.ownerDocument.querySelector(
+          `label[for="${CSS.escape(element.id)}"]`
+        ) !== null)
+    if (named) return
+    warnCascaderOnce(
+      "trigger-unnamed",
+      "`CascaderTrigger` has no accessible name. Its contents are the field's VALUE - they change with the selection - so a screen reader hears what is picked but never what the field is for. Pass `aria-label` or `aria-labelledby`, or reference the trigger's `id` from a `<label>`."
+    )
+  })
+
+  return (
+    <ComboboxPrimitive.Trigger
+      ref={setTrigger}
+      data-slot="cascader-trigger"
+      /* Conditional spread: an explicit `undefined` would DELETE whatever a
+         `Field` wrapper had already put here. */
+      {...(invalid ? { "aria-invalid": true, "data-invalid": "" } : null)}
+      className={cn(TRIGGER_ICON_FALLBACK_CLASS, className)}
+      {...props}
+    >
+      {children}
+      {showIcon ? (
+        <ChevronDownIcon className={`${TRIGGER_ICON_CLASS} pointer-events-none shrink-0`} />
+      ) : null}
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Resolved theme                                */
+/* -------------------------------------------------------------------------- */
+
+/* The eight registry styles each state a combobox surface differently, so the
+ * classes below spell every one out with `style-<name>:` variants. Nothing
+ * depends on ReUI's theme CSS; `build-registry` flattens one in on install. */
+
+/** Icon size for a combobox surface: 14px in mira and sera, 16px elsewhere. */
+const TRIGGER_ICON_CLASS =
+  "text-muted-foreground size-4"
+
+/** The same ladder, applied only to trigger children that carry no size. */
+const TRIGGER_ICON_FALLBACK_CLASS =
+  "[&_svg:not([class*='size-'])]:size-4"
+
+/** The chips field: a form-control surface, so it carries the invalid states. */
+const CHIPS_CLASS =
+  "flex flex-wrap items-center border bg-clip-padding dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 bg-transparent px-2.5 text-sm focus-within:ring-3 has-aria-invalid:ring-3 min-h-8 gap-1 rounded-lg py-1 transition-colors has-data-[slot=combobox-chip]:px-1"
+
+const CHIP_CLASS =
+  "text-foreground flex w-fit items-center justify-center gap-1 font-medium whitespace-nowrap bg-muted rounded-sm px-1.5 text-xs has-data-[slot=combobox-chip-remove]:pr-0 h-[calc(--spacing(5.25))]"
+
+const CHIP_REMOVE_CLASS =
+  "opacity-50 hover:opacity-100 -ml-1"
+
+/** The floating panel's surface. The shared popup's `InputGroup` sizing is
+ * left out (mirrored in `cascader-nav.tsx`), as are its `max-h-72` and
+ * `min-w-*`: `CascaderContent` sets both from the positioner's variables. */
+const CONTENT_SURFACE_CLASS =
+  "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 overflow-hidden ring-1 duration-100 ring-foreground/10 shadow-md rounded-lg data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2"
+
+const EMPTY_CLASS =
+  "text-muted-foreground hidden w-full justify-center py-2 text-center group-data-empty/combobox-content:flex text-sm"
+
+/* -------------------------------------------------------------------------- */
+/*                                    Chips                                   */
+/* -------------------------------------------------------------------------- */
+
+/** Ref for the chips container: they replace the trigger, so the popup has to
+ * be anchored to them. Hand it to `CascaderContent`'s `anchor`. */
+export function useCascaderAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export interface CascaderChipsProps
+  extends
+    Omit<ComboboxPrimitive.Chips.Props, "children">,
+    Pick<React.ComponentPropsWithRef<"div">, "ref"> {
+  /** Shown in place of the chips when nothing is selected. */
+  placeholder?: React.ReactNode
+  /**
+   * How a `cascade` selection is condensed into chips. DISPLAY ONLY: the
+   * stored value stays the full closure, which keeps a row's checked state an
+   * O(1) lookup. `"all"` (default) is one chip per value, `"parent"` collapses
+   * a fully selected branch, `"child"` chips only the deepest frontier.
+   * Removing a condensed chip removes its whole closure and reconciles.
+   */
+  strategy?: CascaderCheckedStrategy
+  /** Replaces the chip list, receiving the resolved selection IN SELECTION
+   * ORDER. Keep that order: Base UI removes a chip by sibling position. */
+  children?: React.ReactNode | ((nodes: CascaderNode[]) => React.ReactNode)
+}
+
+/**
+ * The multi-select trigger surface: one removable chip per selection, where
+ * `CascaderValue` would collapse to "3 selected". A component rather than a
+ * recipe because of three easy misses: the popup anchored to the chips, an
+ * accessible name on every remove button, and labels that disambiguate when
+ * two branches use the same one.
+ *
+ * ```tsx
+ * const anchor = useCascaderAnchor()
+ * <Cascader multiple items={items}>
+ *   <CascaderChips ref={anchor} placeholder="Select attributes" />
+ *   <CascaderContent anchor={anchor}>...</CascaderContent>
+ * </Cascader>
+ * ```
+ */
+function CascaderChips({
+  className,
+  children,
+  placeholder,
+  strategy = "all",
+  ...props
+}: CascaderChipsProps) {
+  const {
+    labels,
+    multiple,
+    invalid,
+    resolveNode,
+    index,
+    isSelectable,
+    setSelection,
+  } = useCascaderActions()
+  const { selectedValues } = useCascaderState()
+
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return
+    if (multiple) return
+    warnCascaderOnce(
+      "chips-without-multiple",
+      "`CascaderChips` renders one chip per selection and there is only ever one without `multiple`. Use `CascaderValue` for a single-select trigger."
+    )
+  }, [multiple])
+
+  // DERIVED display: the selection stays the full closure, the chips condense.
+  const displayedValues =
+    strategy === "all"
+      ? selectedValues
+      : getCascaderCheckedValues(index, selectedValues, strategy)
+
+  // Not memoised: one entry per SELECTION, not per row, so the pass is short.
+  const nodes = displayedValues.map(resolveNode)
+  const ambiguous = findAmbiguousCascaderLabels(nodes)
+
+  // Removal for a CONDENSED chip: Base UI's `ChipRemove` maps a press onto the
+  // STORED array, which is wrong once the chips are fewer, so this removes the
+  // chip's whole subtree closure instead.
+  const removeClosure = (node: CascaderNode) => {
+    setSelection(
+      applyCascadeSelection(
+        index,
+        selectedValues,
+        node.value,
+        false,
+        isSelectable
+      ),
+      "deselect"
+    )
+  }
+
+  const content = typeof children === "function" ? children(nodes) : children
+
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="cascader-chips"
+      /* An unnamed `role="toolbar"` announces as just "toolbar". */
+      aria-label={labels.chipsLabel}
+      /* Conditional spread: the error treatment is keyed on
+         `has-aria-invalid:`, so the attribute must be absent, not empty. */
+      {...(invalid ? { "aria-invalid": true, "data-invalid": "" } : null)}
+      className={cn(CHIPS_CLASS, className)}
+      {...props}
+    >
+      {content ??
+        (nodes.length === 0 ? (
+          <span
+            data-slot="cascader-chips-placeholder"
+            className="text-muted-foreground truncate"
+          >
+            {placeholder}
+          </span>
+        ) : (
+          nodes.map((node) => (
+            <CascaderChip
+              key={node.value}
+              node={node}
+              showPath={ambiguous.has(node.value)}
+              /* Only a condensed chip needs the remover; the default shape
+                 keeps Base UI's positional removal. */
+              {...(strategy !== "all"
+                ? { onRemove: () => removeClosure(node) }
+                : null)}
+            />
+          ))
+        ))}
+    </ComboboxPrimitive.Chips>
+  )
+}
+
+export interface CascaderChipProps extends Omit<
+  ComboboxPrimitive.Chip.Props,
+  "children"
+> {
+  node: CascaderNode
+  /** Prefix the label with its ancestor trail. */
+  showPath?: boolean
+  /** Trail segments to show, the node itself included. */
+  maxSegments?: number
+  /** Hides the remove button, for a read-only chip. */
+  showRemove?: boolean
+  /** Replaces Base UI's positional removal for this chip (remove button and
+   * Backspace/Delete). Supplied for a `strategy`-condensed chip, whose
+   * position no longer maps onto the stored array. */
+  onRemove?: () => void
+  /** Replaces the chip's label. The remove button is still rendered. */
+  children?: React.ReactNode
+}
+
+/** Base UI hands its chip handlers events carrying the veto hook. */
+type CascaderChipKeyEvent = Parameters<
+  NonNullable<ComboboxPrimitive.Chip.Props["onKeyDown"]>
+>[0]
+
+type CascaderChipRemoveClickEvent = Parameters<
+  NonNullable<ComboboxPrimitive.ChipRemove.Props["onClick"]>
+>[0]
+
+/** One chip. Removal goes through Base UI's `ChipRemove`, which reports the
+ * shortened selection to the root, so it lands in the same `setSelection` as
+ * every other deselection and `cascade` applies to it. */
+function CascaderChip({
+  className,
+  node,
+  showPath = false,
+  maxSegments = 2,
+  showRemove = true,
+  onRemove,
+  children,
+  ...props
+}: CascaderChipProps) {
+  const { labels, index } = useCascaderActions()
+
+  const chain = showPath ? getCascaderPath(index, node.value) : []
+  const segments = collapseCascaderPath(chain, {
+    maxSegments,
+    collapse: "start",
+  })
+
+  const label = segments.length
+    ? segments
+        .map((segment) => (segment.type === "node" ? segment.node.label : "…"))
+        .join(` ${labels.pathSeparator} `)
+    : node.label
+
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="cascader-chip"
+      /* Keyboard half of `onRemove`: Base UI's chip removes ITSELF by position
+         on Backspace/Delete, the arithmetic a condensed chip must not use. The
+         veto runs first, so the closure removal replaces it. */
+      {...(onRemove
+        ? {
+            onKeyDown: (event: CascaderChipKeyEvent) => {
+              if (event.key !== "Backspace" && event.key !== "Delete") return
+              event.preventBaseUIHandler()
+              onRemove()
+            },
+          }
+        : null)}
+      className={cn(
+        CHIP_CLASS,
+        "has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children ?? <span className="truncate">{label}</span>}
+      {showRemove ? (
+        <ComboboxPrimitive.ChipRemove
+          data-slot="cascader-chip-remove"
+          /* Named after what the chip DISPLAYS, not the bare node label, or
+             two disambiguated chips both announce "Remove Created at". */
+          aria-label={labels.removeChip(label)}
+          /* The pointer half of `onRemove`, same veto, same reason. */
+          {...(onRemove
+            ? {
+                onClick: (event: CascaderChipRemoveClickEvent) => {
+                  event.preventBaseUIHandler()
+                  onRemove()
+                },
+              }
+            : null)}
+          className={CHIP_REMOVE_CLASS}
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      ) : null}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Content                                  */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderContentProps
+  extends
+    ComboboxPrimitive.Popup.Props,
+    /** Positioner surface forwarded as-is, so an unusual anchor does not force
+     * a rebuild of the content stack. No `trackAnchor`: Base UI 1.5.0 has
+     * none. */
+    Pick<
+      ComboboxPrimitive.Positioner.Props,
+      | "side"
+      | "align"
+      | "sideOffset"
+      | "alignOffset"
+      | "anchor"
+      | "collisionBoundary"
+      | "collisionPadding"
+      | "sticky"
+      | "positionMethod"
+    >,
+    /** Where the portal mounts, for a shadow root or a scoped stacking context. */
+    Pick<ComboboxPrimitive.Portal.Props, "container"> {}
+
+/** Portal + Positioner + floating panel. Unlike shadcn's `ComboboxContent` it
+ * does NOT clamp the popup to the anchor width (a cascader panel is routinely
+ * wider), but it keeps `group/combobox-content`, which `CascaderEmpty` needs. */
+function CascaderContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  positionMethod,
+  container,
+  ref,
+  ...props
+}: CascaderContentProps) {
+  const { labels } = useCascaderActions()
+  const popupRef = React.useRef<HTMLDivElement | null>(null)
+
+  // `initialFocus` needs the popup element, and `ref` is the one prop
+  // `mergeProps` does NOT merge, so it is chained by hand rather than spread.
+  const setPopup = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      popupRef.current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref]
+  )
+
+  /**
+   * Focus goes to the search field, where the level keys and
+   * `aria-activedescendant` live. Base UI's own default agrees but is COMPUTED
+   * FROM THE FIRST RENDER, when the field has not mounted, and collapses to
+   * "do not move focus": measured, a KEYBOARD open left focus on the trigger
+   * and cost two Tabs to reach the footer where a pointer open cost one.
+   *
+   * `initialFocus` rather than an effect, because anything scheduled alongside
+   * Base UI's focus manager is a race; the field is resolved INSIDE the
+   * callback, which runs after the layout effects. Touch is handed back to
+   * Base UI on purpose - focusing the popup keeps the Android keyboard shut.
+   */
+  const initialFocus = React.useCallback((openType: string) => {
+    const popup = popupRef.current
+    if (!popup) return true
+    if (openType === "touch") return popup
+    return (
+      popup.querySelector<HTMLElement>('[data-slot="cascader-input"]') ?? true
+    )
+  }, [])
+
+  return (
+    // Conditional spreads throughout: `mergeProps` iterates own keys, so an
+    // explicit `undefined` reads as "deleted" rather than "not supplied".
+    <ComboboxPrimitive.Portal
+      {...(container !== undefined ? { container } : null)}
+    >
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        {...(collisionBoundary !== undefined ? { collisionBoundary } : null)}
+        {...(collisionPadding !== undefined ? { collisionPadding } : null)}
+        {...(sticky !== undefined ? { sticky } : null)}
+        {...(positionMethod !== undefined ? { positionMethod } : null)}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          ref={setPopup}
+          data-slot="cascader-content"
+          /* Marks a menu surface for the docs design-system picker. An
+             attribute, not a class, so the panel's look stays self-contained. */
+          data-menu-target=""
+          /* The input inside makes this a `role="dialog"`, unnamed by default. */
+          aria-label={labels.panelLabel}
+          initialFocus={initialFocus}
+          className={cn(
+            CONTENT_SURFACE_CLASS,
+            "group/combobox-content relative flex max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) flex-col",
+            className
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Panel                                   */
+/* -------------------------------------------------------------------------- */
+
+export type CascaderPanelProps = useRender.ComponentProps<"div">
+
+/**
+ * The nav + list(s) + footer container, with no positioning of its own: inside
+ * `CascaderContent` for the popup case, alone for the embedded one.
+ *
+ * `min-h-0` and `max-h-full` are load-bearing. A flex child without `min-h-0`
+ * refuses to shrink below its content, which is the usual reason a scroll area
+ * never scrolls - worst embedded, where no positioner publishes
+ * `--available-height`. It also owns the panel's TAB ORDER: the scroll area
+ * makes itself a tab stop whenever the level overflows, stranding the footer,
+ * and the panel is the only ancestor of both ends of that move in BOTH shapes.
+ */
+function CascaderPanel({ className, ...props }: CascaderPanelProps) {
+  const { mode } = useCascaderActions()
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== "Tab" || event.defaultPrevented) return
+      // A browser-level move (Ctrl+Tab switches tabs) is never ours.
+      if (event.altKey || event.ctrlKey || event.metaKey) return
+
+      const panel = event.currentTarget
+      const target = event.target as HTMLElement | null
+      if (!target || !panel.contains(target)) return
+
+      const next = getCascaderTabTarget(panel, target, event.shiftKey)
+      // Off either end: left to the browser, since focus is never trapped.
+      if (!next) return
+
+      event.preventDefault()
+      next.focus()
+    },
+    []
+  )
+
+  const defaultProps = {
+    "data-slot": "cascader-panel",
+    "data-mode": mode,
+    // In `defaultProps`, not around `props.onKeyDown`: `mergeProps` chains
+    // right to left, so a consumer's handler runs FIRST and can drop this one.
+    onKeyDown: handleKeyDown,
+    className: cn("flex max-h-full min-h-0 w-full flex-col", className),
+  }
+
+  return useRender({
+    defaultTagName: "div",
+    render: props.render,
+    props: mergeProps<"div">(defaultProps, props),
+  })
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    List                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderListProps extends Omit<
+  ComboboxPrimitive.List.Props,
+  "style"
+> {
+  /** Applied to the OUTER shell, which owns the height, so an inline
+   * `--cascader-max-height` lands where the bound can read it. Narrowed from
+   * Base UI's `style`: the shell is a plain `<div>` with no list state. */
+  style?: React.CSSProperties
+  /** Caps this level's height; the panel still shrinks to fit. Default 24rem. */
+  maxHeight?: number | string
+}
+
+/**
+ * Scroll container for one level: pattern 3 of the house scroll reference,
+ * viewport-bounded popup scroll. The height is `min()` of `--available-height`
+ * (the positioner's space between anchor and viewport edge) and `maxHeight`,
+ * so neither can be ignored; a fixed pixel cap alone still reserved 288px for
+ * a panel opened 200px above the fold and spilled off screen, and wasted room
+ * in a tall window. The four classes are shared with `CascaderColumns` and
+ * live in `cascader-lib.tsx`.
+ */
+function CascaderList({
+  className,
+  style,
+  maxHeight: maxHeightProp,
+  ...props
+}: CascaderListProps) {
+  const { maxHeight, mode, labels, baseId, virtualized } = useCascaderActions()
+  const { currentParent } = useCascaderState()
+  const resolved = maxHeightProp ?? maxHeight
+
+  return (
+    <div
+      data-slot="cascader-list-shell"
+      style={
+        resolved != null
+          ? ({
+              ...style,
+              "--cascader-max-height":
+                typeof resolved === "number" ? `${resolved}px` : resolved,
+            } as React.CSSProperties)
+          : style
+      }
+      className={cn(
+        "relative flex max-h-full min-h-0",
+        CASCADER_LIST_PAD_CLASS
+      )}
+    >
+      <div
+        data-slot="cascader-list-bounds"
+        className={cn(
+          "flex w-full min-w-0 flex-col overscroll-contain",
+          CASCADER_LIST_HEIGHT_CLASS
+        )}
+      >
+        <ScrollArea className={CASCADER_SCROLL_CLASS}>
+          <ComboboxPrimitive.List
+            data-slot="cascader-list"
+            /* Base UI names the list nothing, so every mode shipped an unnamed
+               listbox. The level's parent is the name; the root borrows one. */
+            aria-label={currentParent?.label ?? labels.rootLevel}
+            /* Replaces Base UI's floating id. `aria-controls` reads the live
+               id, so the columns trail gets a predictable target. */
+            id={`${baseId}-column-0`}
+            /* NEVER a ternary ending in `undefined`: `mergeProps` iterates own
+               keys, so that DELETES Base UI's `role="listbox"`. */
+            {...(mode === "tree" ? { role: "tree" as const } : null)}
+            {...(virtualized ? { "data-virtualized": true } : null)}
+            className={cn(
+              CASCADER_ROWS_CLASS,
+              /* A windowed row is absolutely positioned, so the ROWS' box is
+                 the containing block, not the scrollport: it carries the
+                 padding the geometry is measured against. */
+              virtualized && "relative",
+              className
+            )}
+            {...props}
+          />
+        </ScrollArea>
+      </div>
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Empty / Loading                               */
+/* -------------------------------------------------------------------------- */
+
+export interface CascaderEmptyProps extends ComboboxPrimitive.Empty.Props {
+  /** @deprecated Ignored: the loading surface no longer draws skeletons. They
+   * promised a shape the level might not have and cost a second layout; the
+   * progress lives on the branch row instead. Kept so call sites compile. */
+  skeletonRows?: number
+}
+
+/** The empty, loading and error surface, in ONE element that never unmounts.
+ * `Combobox.Empty` renders whenever `filteredItems.length === 0`, as true of a
+ * fetching level as of an empty one, so swapping siblings would announce "No
+ * results found." over every async level. Swap the CHILDREN. */
+function CascaderEmpty({
+  className,
+  children,
+  // Accepted and ignored; destructured so it is never spread onto the DOM.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  skeletonRows,
+  ...props
+}: CascaderEmptyProps) {
+  const { labels, retryLevel } = useCascaderActions()
+  const { query, path, searchState } = useCascaderState()
+  // The level whose emptiness is on screen; tree always shows the root.
+  const levelKey = path.length ? path[path.length - 1] : CASCADER_ROOT_KEY
+  const loadState = useCascaderLoadState(levelKey)
+  const state = query.trim() ? (searchState ?? loadState) : loadState
+
+  let body: React.ReactNode = children ?? labels.empty
+
+  if (state?.error) {
+    body = (
+      <span
+        data-slot="cascader-error"
+        className="flex flex-col items-center gap-1.5"
+      >
+        <span>{labels.error}</span>
+        <button
+          type="button"
+          data-slot="cascader-retry"
+          /* A real button because this lives OUTSIDE the listbox; a focusable
+             element inside a `role="option"` is `nested-interactive`. */
+          onClick={() => retryLevel(levelKey)}
+          className="text-foreground hover:bg-accent focus-visible:ring-ring/50 rounded-md px-2 py-0.5 font-medium outline-hidden transition-colors focus-visible:ring-2"
+        >
+          {labels.retry}
+        </button>
+      </span>
+    )
+  } else if (state?.loading) {
+    body = (
+      <span
+        data-slot="cascader-loading"
+        className="flex w-full items-center justify-center"
+      >
+        {labels.loading}
+      </span>
+    )
+  }
+
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="cascader-empty"
+      data-state={state?.error ? "error" : state?.loading ? "loading" : "empty"}
+      className={cn(EMPTY_CLASS, className)}
+      /* The ONE place an explicit `undefined` is right: it DELETES Base UI's
+         live region, which is wanted. `CascaderStatus` is the single one, and
+         leaving this one spoke "No results found." on every level swap, which
+         renders one deliberately empty frame to reset the highlight. */
+      role={undefined}
+      aria-live={undefined}
+      aria-atomic={undefined}
+      {...props}
+    >
+      {body}
+    </ComboboxPrimitive.Empty>
+  )
+}
+
+export type CascaderStatusProps = ComboboxPrimitive.Status.Props
+
+/**
+ * Polite live region for the current level and result count, which drill-down
+ * otherwise hides in a visual breadcrumb. Built on `Combobox.Status` for its
+ * initial-mutation marker: Safari and VoiceOver need a text change ~200ms
+ * after mount before reading a polite region at all.
+ */
+function CascaderStatus({
+  className,
+  children,
+  ...props
+}: CascaderStatusProps) {
+  const { announcement } = useCascaderState()
+
+  return (
+    <ComboboxPrimitive.Status
+      data-slot="cascader-status"
+      className={cn("sr-only", className)}
+      {...props}
+    >
+      {children ?? announcement}
+    </ComboboxPrimitive.Status>
+  )
+}
+
+export {
+  Cascader,
+  CascaderTrigger,
+  CascaderChip,
+  CascaderChips,
+  CascaderContent,
+  CascaderPanel,
+  CascaderList,
+  CascaderEmpty,
+  CascaderStatus,
+}
+
+/** Re-exported from `cascader-context.tsx`: existing import paths keep
+ * working, and the row component avoids an import cycle through this file. */
+export {
+  createCascaderHighlightStore,
+  useCascaderActions,
+  useCascaderHighlight,
+  useCascaderRender,
+  useCascaderState,
+}
+
+export type {
+  CascaderActionsContextValue,
+  CascaderColumn,
+  CascaderHighlight,
+  CascaderHighlightStore,
+  CascaderItemState,
+  CascaderRenderContextValue,
+  CascaderStateContextValue,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
index 61a312f..38f19ca 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
@@ -1,6 +1,9 @@
+"use client"
+
 import { useMemo, useState } from "react"
 import { Badge } from "@/components/reui/badge"
-import { Column } from "@tanstack/react-table"
+import type { DataGridFeatures } from "@/components/reui/data-grid/data-grid"
+import type { Column } from "@tanstack/react-table"
 
 import { cn } from "@evobgp/ui/lib/utils"
 import { Button } from "@evobgp/ui/components/button"
@@ -13,8 +16,8 @@ import {
 import { Separator } from "@evobgp/ui/components/separator"
 import { CirclePlusIcon, CheckIcon } from "lucide-react"
 
-interface DataGridColumnFilterProps<TData, TValue> {
-  column?: Column<TData, TValue>
+interface DataGridColumnFilterProps<TData extends object, TValue> {
+  column?: Column<DataGridFeatures, TData, TValue>
   title?: string
   options: {
     label: string
@@ -23,7 +26,7 @@ interface DataGridColumnFilterProps<TData, TValue> {
   }[]
 }
 
-function DataGridColumnFilter<TData, TValue>({
+function DataGridColumnFilter<TData extends object, TValue>({
   column,
   title,
   options,
@@ -61,7 +64,7 @@ function DataGridColumnFilter<TData, TValue>({
                 <div className="hidden space-x-1 lg:flex">
                   {selectedValues.size > 2 ? (
                     <Badge variant="secondary" className="px-1 font-normal">
-                      {selectedValues.size} выбрано
+                      {selectedValues.size} selected
                     </Badge>
                   ) : (
                     options
@@ -94,7 +97,7 @@ function DataGridColumnFilter<TData, TValue>({
         <div className="max-h-[300px] overflow-y-auto">
           {filteredOptions.length === 0 ? (
             <div className="text-muted-foreground py-6 text-center text-sm">
-              Ничего не найдено.
+              No results found.
             </div>
           ) : (
             <div className="p-1">
@@ -170,7 +173,7 @@ function DataGridColumnFilter<TData, TValue>({
                   }}
                   className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground rounded-md relative flex cursor-pointer items-center justify-center px-2 py-1.5 text-sm outline-hidden select-none"
                 >
-                  Сбросить фильтры
+                  Clear filters
                 </div>
               </div>
             </>
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
index e13b732..bfb5938 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
@@ -1,11 +1,12 @@
-"use client"
-
-import { HTMLAttributes, memo, ReactNode, useMemo } from "react"
+import { memo, useMemo } from "react"
+import type { HTMLAttributes, ReactNode } from "react"
 import {
   getColumnHeaderLabel,
   useDataGrid,
 } from "@/components/reui/data-grid/data-grid"
-import { Column } from "@tanstack/react-table"
+import type { DataGridFeatures } from "@/components/reui/data-grid/data-grid"
+import { Subscribe } from "@tanstack/react-table"
+import type { Column } from "@tanstack/react-table"
 
 import { cn } from "@evobgp/ui/lib/utils"
 import { Button } from "@evobgp/ui/components/button"
@@ -25,10 +26,10 @@ import {
 import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, CheckIcon, ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowLeftIcon, ArrowRightIcon, Settings2Icon, PinOffIcon } from "lucide-react"
 
 interface DataGridColumnHeaderProps<
-  TData,
+  TData extends object,
   TValue,
 > extends HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>
+  column: Column<DataGridFeatures, TData, TValue>
   /** When omitted, uses `column.columnDef.meta.headerTitle`, then a string `columnDef.header`, then `column.id`. */
   title?: string
   icon?: ReactNode
@@ -38,7 +39,7 @@ interface DataGridColumnHeaderProps<
   visibility?: boolean
 }
 
-function DataGridColumnHeaderInner<TData, TValue>({
+function DataGridColumnHeaderInner<TData extends object, TValue>({
   column,
   title,
   icon,
@@ -46,13 +47,19 @@ function DataGridColumnHeaderInner<TData, TValue>({
   filter,
   visibility = false,
 }: DataGridColumnHeaderProps<TData, TValue>) {
-  const { isLoading, table, props, recordCount } = useDataGrid()
+  const { isLoading, table, props } = useDataGrid()
   const resolvedTitle = title ?? getColumnHeaderLabel(column)
 
-  const columnOrder = table.getState().columnOrder
+  // TanStack's columnOrder defaults to [] until a consumer seeds it; fall
+  // back to the definition order so Move Left/Right work out of the box.
+  const columnOrderState = table.state.columnOrder
+  const columnOrder =
+    columnOrderState.length > 0
+      ? columnOrderState
+      : table.getAllLeafColumns().map((leafColumn) => leafColumn.id)
   const columnVisibilityKey =
     props.tableLayout?.columnsVisibility && visibility
-      ? JSON.stringify(table.getState().columnVisibility)
+      ? JSON.stringify(table.state.columnVisibility)
       : ""
   const isSorted = column.getIsSorted()
   const isPinned = column.getIsPinned()
@@ -166,21 +173,21 @@ function DataGridColumnHeaderInner<TData, TValue>({
       items.push(
         <DropdownMenuItem
           key="pin-left"
-          onClick={() => column.pin(isPinned === "left" ? false : "left")}
+          onClick={() => column.pin(isPinned === "start" ? false : "start")}
         >
           <ArrowLeftToLineIcon className="size-3.5!" aria-hidden="true" />
           <span className="grow">Pin to left</span>
-          {isPinned === "left" && (
+          {isPinned === "start" && (
             <CheckIcon className="text-primary size-4 opacity-100!" />
           )}
         </DropdownMenuItem>,
         <DropdownMenuItem
           key="pin-right"
-          onClick={() => column.pin(isPinned === "right" ? false : "right")}
+          onClick={() => column.pin(isPinned === "end" ? false : "end")}
         >
           <ArrowRightToLineIcon className="size-3.5!" aria-hidden="true" />
           <span className="grow">Pin to right</span>
-          {isPinned === "right" && (
+          {isPinned === "end" && (
             <CheckIcon className="text-primary size-4 opacity-100!" />
           )}
         </DropdownMenuItem>
@@ -289,7 +296,7 @@ function DataGridColumnHeaderInner<TData, TValue>({
               <Button
                 variant="ghost"
                 className={headerButtonClassName}
-                disabled={isLoading || recordCount === 0}
+                disabled={isLoading}
               >
                 {icon && icon}
                 {resolvedTitle}
@@ -323,7 +330,7 @@ function DataGridColumnHeaderInner<TData, TValue>({
         <Button
           variant="ghost"
           className={headerButtonClassName}
-          disabled={isLoading || recordCount === 0}
+          disabled={isLoading}
           onClick={handleSort}
         >
           {icon && icon}
@@ -342,8 +349,47 @@ function DataGridColumnHeaderInner<TData, TValue>({
   )
 }
 
-const DataGridColumnHeader = memo(
-  DataGridColumnHeaderInner
-) as typeof DataGridColumnHeaderInner
+const DataGridColumnHeaderMemo = memo(DataGridColumnHeaderInner) as <
+  TData extends object,
+  TValue,
+>(
+  props: DataGridColumnHeaderProps<TData, TValue> & {
+    /** Internal: the state slices the header re-renders on. Not part of the public API. */
+    subscribedState?: unknown
+  }
+) => ReactNode
+
+/**
+ * Sort and pin state reaches this header through builder calls on `column`
+ * (`getIsSorted()`, `getIsPinned()`), and `column` is a stable reference. That
+ * combination is the one v9's fresh-table-per-state-change does NOT cover:
+ * React Compiler is free to memoize against the stable column and never
+ * re-evaluate those reads, which shows up as frozen sort arrows and pin
+ * controls. The `Subscribe` below turns the slices this header actually reads
+ * into a real reactive dependency, and threading the selection through as a
+ * prop is what lets it past the `memo` - which would otherwise see unchanged
+ * props and skip the render anyway.
+ */
+function DataGridColumnHeader<TData extends object, TValue>(
+  props: DataGridColumnHeaderProps<TData, TValue>
+) {
+  const { table } = useDataGrid()
+
+  return (
+    <Subscribe
+      source={table.store}
+      selector={(state) => ({
+        sorting: state.sorting,
+        columnPinning: state.columnPinning,
+        columnOrder: state.columnOrder,
+        columnVisibility: state.columnVisibility,
+      })}
+    >
+      {(subscribed) => (
+        <DataGridColumnHeaderMemo {...props} subscribedState={subscribed} />
+      )}
+    </Subscribe>
+  )
+}
 
 export { DataGridColumnHeader, type DataGridColumnHeaderProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
index d6a6175..7743500 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
@@ -1,6 +1,9 @@
-import { ReactElement } from "react"
+"use client"
+
+import type { ReactElement } from "react"
 import { getColumnHeaderLabel } from "@/components/reui/data-grid/data-grid"
-import { Table } from "@tanstack/react-table"
+import type { DataGridFeatures } from "@/components/reui/data-grid/data-grid"
+import type { Table } from "@tanstack/react-table"
 
 import {
   DropdownMenu,
@@ -11,11 +14,11 @@ import {
   DropdownMenuTrigger,
 } from "@evobgp/ui/components/dropdown-menu"
 
-function DataGridColumnVisibility<TData>({
+function DataGridColumnVisibility<TData extends object>({
   table,
   trigger,
 }: {
-  table: Table<TData>
+  table: Table<DataGridFeatures, TData>
   trigger: ReactElement<Record<string, unknown>>
 }) {
   return (
diff --git a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
index e3eeb8e..9cbc2f3 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
@@ -1,6 +1,4 @@
-"use client"
-
-import React, { ReactNode } from "react"
+import type { JSX, ReactNode } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
 
 import { cn } from "@evobgp/ui/lib/utils"
@@ -32,18 +30,18 @@ interface DataGridPaginationProps {
   ellipsisText?: string
 }
 
-function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
+function DataGridPagination(props: DataGridPaginationProps): JSX.Element {
   const { table, recordCount, isLoading } = useDataGrid()
 
   const defaultProps: Partial<DataGridPaginationProps> = {
     sizes: [5, 10, 25, 50, 100],
     sizesSkeleton: <Skeleton className="h-8 w-44" />,
     moreLimit: 5,
-    info: "{from}–{to} из {count}",
+    info: "{from} - {to} of {count}",
     infoSkeleton: <Skeleton className="h-8 w-60" />,
-    rowsPerPageLabel: "Строк на странице",
-    previousPageLabel: "Предыдущая страница",
-    nextPageLabel: "Следующая страница",
+    rowsPerPageLabel: "Rows per page",
+    previousPageLabel: "Go to previous page",
+    nextPageLabel: "Go to next page",
     ellipsisText: "...",
   }
 
@@ -51,8 +49,8 @@ function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
 
   const btnBaseClasses = "p-0 text-sm"
   const btnArrowClasses = btnBaseClasses + " rtl:transform rtl:rotate-180"
-  const pageIndex = table.getState().pagination.pageIndex
-  const pageSize = table.getState().pagination.pageSize
+  const pageIndex = table.state.pagination.pageIndex
+  const pageSize = table.state.pagination.pageSize
   const from = recordCount === 0 ? 0 : pageIndex * pageSize + 1
   const to = Math.min((pageIndex + 1) * pageSize, recordCount)
   const pageCount = table.getPageCount()
@@ -161,7 +159,11 @@ function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
               <SelectTrigger className="w-16" size="sm">
                 <SelectValue />
               </SelectTrigger>
-              <SelectContent side="top" className="min-w-18">
+              <SelectContent
+                align="start"
+                alignItemWithTrigger={false}
+                className="min-w-(--anchor-width)"
+              >
                 {mergedProps.sizes?.map((size: number) => (
                   <SelectItem key={size} value={`${size}`}>
                     {size}
diff --git a/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
index efeefc3..96adad9 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
@@ -1,11 +1,7 @@
-import {
-  PointerEvent,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import type { PointerEvent, ReactNode } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
 
@@ -94,8 +90,9 @@ function DataGridScrollArea({
   orientation = "both",
   ...props
 }: DataGridScrollAreaProps) {
-  const { props: dataGridProps } = useDataGrid()
+  const { props: dataGridProps, table } = useDataGrid()
   const containerRef = useRef<HTMLDivElement>(null)
+  const overlayRef = useRef<HTMLDivElement | null>(null)
   const viewportRef = useRef<HTMLDivElement | null>(null)
   const dragRef = useRef<{
     pointerId: number
@@ -114,6 +111,11 @@ function DataGridScrollArea({
   const showVertical = orientation !== "horizontal"
   const usesCustomVerticalScrollbar =
     showVertical && !!dataGridProps.tableLayout?.headerSticky
+  // Pinned columns are sticky and never scroll, so the horizontal scrollbar
+  // track is inset to span only the scrollable center region between them.
+  const isColumnsPinnable = !!dataGridProps.tableLayout?.columnsPinnable
+  const scrollbarInsetStart = isColumnsPinnable ? table.getStartTotalSize() : 0
+  const scrollbarInsetEnd = isColumnsPinnable ? table.getEndTotalSize() : 0
   const [hasCustomVerticalOverflow, setHasCustomVerticalOverflow] =
     useState(false)
 
@@ -123,12 +125,19 @@ function DataGridScrollArea({
     document.body.style.webkitUserSelect = ""
   }, [])
 
-  const resetMetrics = useCallback(() => {
-    const container = containerRef.current
+  // The overlay is mounted one commit after the sync that detected overflow,
+  // so it misses that sync's write. Seeding it from the ref callback lands the
+  // geometry during commit, before the browser paints the track.
+  const setOverlayRef = useCallback((node: HTMLDivElement | null) => {
+    overlayRef.current = node
 
-    if (container && !areMetricsEqual(INITIAL_METRICS, metricsRef.current)) {
-      applyMetrics(container, INITIAL_METRICS)
+    if (node) applyMetrics(node, metricsRef.current)
+  }, [])
+
+  const resetMetrics = useCallback(() => {
+    if (!areMetricsEqual(INITIAL_METRICS, metricsRef.current)) {
       metricsRef.current = INITIAL_METRICS
+      if (overlayRef.current) applyMetrics(overlayRef.current, INITIAL_METRICS)
     }
 
     setHasCustomVerticalOverflow((prev) => (prev ? false : prev))
@@ -196,8 +205,13 @@ function DataGridScrollArea({
     }
 
     if (!areMetricsEqual(nextMetrics, metricsRef.current)) {
-      applyMetrics(container, nextMetrics)
       metricsRef.current = nextMetrics
+      // Scoped to the overlay, never to the container. These four properties
+      // inherit, and thumbTop changes on essentially every scroll frame, so
+      // writing them on the element that wraps the whole grid invalidates
+      // computed style for every row and cell each frame. The overlay subtree
+      // is their only reader.
+      if (overlayRef.current) applyMetrics(overlayRef.current, nextMetrics)
     }
 
     setHasCustomVerticalOverflow((prev) =>
@@ -218,21 +232,6 @@ function DataGridScrollArea({
       return
     }
 
-    observedElementsRef.current = {
-      header: container.querySelector(
-        '[data-slot="data-grid-table"] thead'
-      ) as HTMLElement | null,
-      horizontalScrollbar: container.querySelector(
-        '[data-slot="data-grid-scrollbar"][data-orientation="horizontal"]'
-      ) as HTMLElement | null,
-      table: container.querySelector(
-        '[data-slot="data-grid-table"]'
-      ) as HTMLElement | null,
-      tableViewport: container.querySelector(
-        '[data-slot="data-grid-table-viewport"]'
-      ) as HTMLElement | null,
-    }
-
     let frame = 0
 
     const scheduleSync = () => {
@@ -240,25 +239,69 @@ function DataGridScrollArea({
       frame = window.requestAnimationFrame(syncCustomVerticalScrollbar)
     }
 
-    scheduleSync()
-    viewport.addEventListener("scroll", scheduleSync, { passive: true })
-
     const observer =
       typeof ResizeObserver === "undefined"
         ? null
         : new ResizeObserver(scheduleSync)
+    const observed = new Set<HTMLElement>()
 
-    observer?.observe(viewport)
-    observedElementsRef.current.header &&
-      observer?.observe(observedElementsRef.current.header)
-    observedElementsRef.current.table &&
-      observer?.observe(observedElementsRef.current.table)
-    observedElementsRef.current.tableViewport &&
-      observer?.observe(observedElementsRef.current.tableViewport)
+    const observeElement = (element: HTMLElement | null) => {
+      if (element && observer && !observed.has(element)) {
+        observer.observe(element)
+        observed.add(element)
+      }
+    }
+
+    const resolveObservedElements = () => {
+      observedElementsRef.current = {
+        header: container.querySelector(
+          '[data-slot="data-grid-table"] thead'
+        ) as HTMLElement | null,
+        horizontalScrollbar: container.querySelector(
+          '[data-slot="data-grid-scrollbar"][data-orientation="horizontal"]'
+        ) as HTMLElement | null,
+        table: container.querySelector(
+          '[data-slot="data-grid-table"]'
+        ) as HTMLElement | null,
+        tableViewport: container.querySelector(
+          '[data-slot="data-grid-table-viewport"]'
+        ) as HTMLElement | null,
+      }
+
+      observeElement(observedElementsRef.current.header)
+      observeElement(observedElementsRef.current.table)
+      observeElement(observedElementsRef.current.tableViewport)
+
+      return !!(
+        observedElementsRef.current.header && observedElementsRef.current.table
+      )
+    }
+
+    observeElement(viewport)
+    const resolvedOnMount = resolveObservedElements()
+
+    scheduleSync()
+    viewport.addEventListener("scroll", scheduleSync, { passive: true })
+
+    // A table that mounts after this effect (empty state swapped for data)
+    // would otherwise never be observed and the custom scrollbar would
+    // overlap the sticky header. One-shot: disconnects once resolved.
+    let mutationObserver: MutationObserver | null = null
+    if (!resolvedOnMount && typeof MutationObserver !== "undefined") {
+      mutationObserver = new MutationObserver(() => {
+        if (resolveObservedElements()) {
+          mutationObserver?.disconnect()
+          mutationObserver = null
+          scheduleSync()
+        }
+      })
+      mutationObserver.observe(container, { childList: true, subtree: true })
+    }
 
     return () => {
       cancelAnimationFrame(frame)
       observer?.disconnect()
+      mutationObserver?.disconnect()
       viewport.removeEventListener("scroll", scheduleSync)
       clearDragState()
     }
@@ -350,6 +393,10 @@ function DataGridScrollArea({
     <div ref={containerRef} className="relative">
       <ScrollAreaPrimitive.Root
         data-slot="data-grid-scroll-area"
+        // Styling hook: present while the sticky-header scroll mode detects
+        // vertical overflow, so consumers can style scrollable vs short
+        // grids with a plain ancestor attribute selector.
+        data-overflow-vertical={hasCustomVerticalOverflow ? "true" : undefined}
         className={cn("relative", className)}
         {...props}
       >
@@ -369,6 +416,14 @@ function DataGridScrollArea({
             data-orientation="horizontal"
             orientation="horizontal"
             className={SCROLLBAR_CLASSNAME}
+            style={
+              scrollbarInsetStart > 0 || scrollbarInsetEnd > 0
+                ? {
+                    marginInlineStart: scrollbarInsetStart || undefined,
+                    marginInlineEnd: scrollbarInsetEnd || undefined,
+                  }
+                : undefined
+            }
           >
             <ScrollAreaPrimitive.Thumb
               data-slot="data-grid-thumb"
@@ -394,6 +449,7 @@ function DataGridScrollArea({
 
       {usesCustomVerticalScrollbar && hasCustomVerticalOverflow && (
         <div
+          ref={setOverlayRef}
           aria-hidden="true"
           className="pointer-events-none absolute inset-e-0 top-(--data-grid-scrollbar-header-height) z-20 h-(--data-grid-scrollbar-track-height)"
         >
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
index 12360c7..855c587 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
@@ -1,9 +1,7 @@
-"use client"
-
 import {
   createContext,
-  CSSProperties,
-  ReactNode,
+  memo,
+  useCallback,
   useContext,
   useEffect,
   useId,
@@ -11,15 +9,23 @@ import {
   useRef,
   useState,
 } from "react"
+import type { CSSProperties, ReactNode } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import type {
+  DataGridFeatures,
+  DataGridTableInstance,
+} from "@/components/reui/data-grid/data-grid"
 import {
   DataGridTableBase,
   DataGridTableBody,
   DataGridTableBodyRow,
   DataGridTableBodyRowCell,
+  DataGridTableBodyRowExpandded,
   DataGridTableBodyRowSkeleton,
   DataGridTableBodyRowSkeletonCell,
   DataGridTableEmpty,
+  DataGridTableFillBodyCell,
+  DataGridTableFillHeadCell,
   DataGridTableFoot,
   DataGridTableHead,
   DataGridTableHeadRow,
@@ -31,23 +37,33 @@ import {
 import {
   closestCenter,
   DndContext,
+  DragOverlay,
   KeyboardSensor,
   MouseSensor,
   TouchSensor,
-  UniqueIdentifier,
   useSensor,
   useSensors,
+  type CollisionDetection,
+  type DragCancelEvent,
   type DragEndEvent,
+  type DragMoveEvent,
+  type DragOverEvent,
+  type DragStartEvent,
   type Modifier,
+  type UniqueIdentifier,
 } from "@dnd-kit/core"
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
 import {
   SortableContext,
+  sortableKeyboardCoordinates,
   useSortable,
   verticalListSortingStrategy,
+  type SortingStrategy,
 } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
-import { Cell, flexRender, HeaderGroup, Row } from "@tanstack/react-table"
+import { flexRender } from "@tanstack/react-table"
+import type { Cell, HeaderGroup, Row, Table } from "@tanstack/react-table"
+import { createPortal } from "react-dom"
 
 import { cn } from "@evobgp/ui/lib/utils"
 import { Button } from "@evobgp/ui/components/button"
@@ -60,20 +76,65 @@ const SortableRowContext = createContext<Pick<
   "attributes" | "listeners"
 > | null>(null)
 
-function DataGridTableDndRowHandle({ className }: { className?: string }) {
+/**
+ * Tree metadata attached to every sortable row, readable from
+ * `active.data.current` / `over.data.current` in any drag event. Cross-parent
+ * drops can be resolved from it without re-deriving the shape of the table.
+ */
+type DataGridTableDndRowData = {
+  type: "data-grid-row"
+  /** Tree depth, 0 for root rows. */
+  depth: number
+  /** Index within the parent's children, or within the root rows. */
+  index: number
+  /** Parent row id, or null for root rows. */
+  parentId: string | null
+}
+
+/**
+ * Per-row render slot for drop indicators and depth guides. The returned node
+ * is positioned over the row, so it never adds a column, shifts striping, or
+ * gets clipped by a truncating resizable cell.
+ */
+type DataGridTableDndRowDecoration<TData extends object> = (context: {
+  row: Row<DataGridFeatures, TData>
+  isDragging: boolean
+  isOver: boolean
+}) => ReactNode
+
+function DataGridTableDndRowHandle({
+  className,
+  disabled,
+  disabledLabel = "Reordering unavailable",
+}: {
+  className?: string
+  /**
+   * Renders the grip inert instead of withdrawing it. A grid that reorders on
+   * one truth (manual order) and sorts on another cannot honour both at once,
+   * but dropping the handle entirely collapses the gutter and reads as broken
+   * rather than as unavailable. Keep the column's shape, mute the control.
+   */
+  disabled?: boolean
+  /** Announced and shown on hover in place of the drag affordance. */
+  disabledLabel?: string
+}) {
   const context = useContext(SortableRowContext)
 
-  if (!context) {
-    // Fallback if context is not available (shouldn't happen in normal usage)
+  if (!context || disabled) {
     return (
       <Button
         variant="ghost"
         size="icon-sm"
         className={cn(
           "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
+          // The Button's own disabled treatment supplies the muting; only the
+          // cursor needs saying, so the grip reads as unavailable rather than
+          // merely unresponsive.
+          disabled && "cursor-not-allowed",
           className
         )}
-        aria-label="Перетащить строку"
+        aria-label={disabled ? disabledLabel : "Drag to reorder row"}
+        title={disabled ? disabledLabel : undefined}
         disabled
       >
         <GripHorizontalIcon aria-hidden="true" />
@@ -89,7 +150,7 @@ function DataGridTableDndRowHandle({ className }: { className?: string }) {
         "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
         className
       )}
-      aria-label="Перетащить строку"
+      aria-label="Drag to reorder row"
       {...context.attributes}
       {...context.listeners}
     >
@@ -98,60 +159,357 @@ function DataGridTableDndRowHandle({ className }: { className?: string }) {
   )
 }
 
-function DataGridTableDndRow<TData>({ row }: { row: Row<TData> }) {
+/**
+ * The rows do not move while one is being carried.
+ *
+ * Sliding the siblings apart opens a gap the carried row could go into, which
+ * reads well in a list of identical rows and badly in a table: the gap is the
+ * height of the row you are holding, so with rows of unequal height it never
+ * matches the slot it claims to be, and the row you picked up slides away from
+ * where it started - which is exactly the position you need to remember if you
+ * decide not to drop it.
+ *
+ * Holding everything still keeps the origin legible, and nothing is lost: the
+ * DragOverlay clone follows the pointer and the drop indicator names the seam.
+ * Pass `verticalListSortingStrategy` as `sortingStrategy` for the old feel.
+ */
+const holdRowsInPlaceStrategy: SortingStrategy = () => null
+
+function DataGridTableDndRow<TData extends object>({
+  row,
+  renderRowDecoration,
+  dropIndicator = true,
+}: {
+  row: Row<DataGridFeatures, TData>
+  renderRowDecoration?: DataGridTableDndRowDecoration<TData>
+  dropIndicator?: boolean
+}) {
+  const rowData: DataGridTableDndRowData = {
+    type: "data-grid-row",
+    depth: row.depth,
+    index: row.index,
+    parentId: row.getParentRow()?.id ?? null,
+  }
+
   const {
     transform,
-    transition,
     setNodeRef,
     isDragging,
+    isOver,
     attributes,
     listeners,
+    index,
+    activeIndex,
+    overIndex,
   } = useSortable({
     id: row.id,
+    data: rowData,
   })
 
+  // Which edge of THIS row the carried row would land on, or null when it is
+  // not the drop target. Nothing slides apart any more, so the bar is the only
+  // thing that says where the drop goes: it marks the row at the destination
+  // index, on the side the carried row comes to rest.
+  //
+  // Dragging down it lands after the target, dragging up before it, so the
+  // edge follows the direction of travel.
+  const dropEdge =
+    dropIndicator && activeIndex !== -1 && index === overIndex && !isDragging
+      ? activeIndex < overIndex
+        ? "bottom"
+        : "top"
+      : null
+
   const style: CSSProperties = {
     transform: CSS.Transform.toString(transform),
-    transition: transition,
-    opacity: isDragging ? 0.8 : 1,
+    // dnd-kit's transition is deliberately dropped. A transition on a transform
+    // property of a `tr` does not merely fail to animate in Chrome, it stops the
+    // transform applying at all: the element sits at the start value forever.
+    // The drag source escapes it because dnd-kit disables its own transition
+    // while it is being dragged, which is why the carried row used to be the
+    // ONLY one that moved and every other row silently refused to open a gap.
+    // Displacement therefore lands in one step, which is what a table wants.
     zIndex: isDragging ? 1 : 0,
     position: "relative",
     cursor: isDragging ? "grabbing" : undefined,
+    // The row you are holding is drawn by the DragOverlay, so the one left
+    // behind is not a second copy of it - it is the slot you came from, and it
+    // stays exactly where it was. Fading alone read as "this row is busy";
+    // the outline says "this is the space you are moving out of", which is the
+    // thing you need if you change your mind mid-drag.
+    ...(isDragging && {
+      opacity: 0.4,
+      // Inset so the dashes sit inside the row box and cannot be clipped by
+      // the neighbouring row's border.
+      outline: "1px dashed var(--border)",
+      outlineOffset: "-1px",
+    }),
   }
 
+  const decoration = renderRowDecoration?.({ row, isDragging, isOver })
+
   return (
     <SortableRowContext.Provider value={{ attributes, listeners }}>
       <DataGridTableBodyRow row={row} dndRef={setNodeRef} dndStyle={style}>
-        {row.getVisibleCells().map((cell: Cell<TData, unknown>) => {
-          return (
-            <DataGridTableBodyRowCell cell={cell} key={cell.id}>
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </DataGridTableBodyRowCell>
-          )
-        })}
+        {row
+          .getVisibleCells()
+          .map((cell: Cell<DataGridFeatures, TData, unknown>, index, cells) => {
+            return (
+              <DataGridTableBodyRowCell cell={cell} key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                {decoration && index === cells.length - 1 ? (
+                  // Rides inside the last cell rather than in a `td` of its own.
+                  // An absolutely positioned `td` is still a cell as far as table
+                  // layout is concerned, so it added a NINTH column with no width
+                  // of its own, and under `table-layout: fixed` that new column
+                  // swallowed the whole surplus the real columns had been sharing
+                  // — every column snapped back to its declared size and the row's
+                  // content visibly narrowed the moment a drag began. A plain
+                  // element adds no column. It still anchors to the ROW, because
+                  // the row is the nearest positioned ancestor, so the decoration
+                  // spans the full width and is not clipped by the cell.
+                  <div
+                    aria-hidden="true"
+                    data-slot="data-grid-table-row-decoration"
+                    className="pointer-events-none absolute inset-0"
+                  >
+                    {decoration}
+                  </div>
+                ) : null}
+                {dropEdge && index === cells.length - 1 ? (
+                  // Same anchoring trick as the decoration above: a plain
+                  // element inside the last cell, so it adds no column and
+                  // cannot disturb `table-layout: fixed`. It spans the row
+                  // because the row is the nearest positioned ancestor.
+                  <div
+                    aria-hidden="true"
+                    data-slot="data-grid-table-row-drop-indicator"
+                    data-edge={dropEdge}
+                    className="pointer-events-none absolute inset-0 z-20"
+                  >
+                    {/* Two solid pixels down the leading edge, the same marker
+                        the tree drag uses for its drop target. A wash across
+                        the row has to stay faint enough not to read as a
+                        selected row, and in the achromatic styles primary
+                        carries no chroma at all, so faint plus colourless is
+                        just grey. The bar reads at any weight and leaves the
+                        row's own background to hover and selection.
+
+                        The bar is the whole indicator: the gap the rows have
+                        already opened says which side, so a rule across the
+                        seam as well only competes with the row borders it sits
+                        between. `data-edge` still carries the direction for
+                        anyone styling their own. */}
+                    <span className="bg-primary absolute inset-y-0 start-0 w-0.5" />
+                  </div>
+                ) : null}
+              </DataGridTableBodyRowCell>
+            )
+          })}
+        <DataGridTableFillBodyCell />
       </DataGridTableBodyRow>
+      {row.getIsExpanded() && <DataGridTableBodyRowExpandded row={row} />}
     </SortableRowContext.Provider>
   )
 }
 
-function DataGridTableDndRows<TData>({
+function DataGridTableDndRowsBody<TData extends object>({
+  table,
+  dataIds,
+  renderRowDecoration,
+  dropIndicator,
+  sortingStrategy,
+}: {
+  table: DataGridTableInstance<TData>
+  dataIds: UniqueIdentifier[]
+  renderRowDecoration?: DataGridTableDndRowDecoration<TData>
+  dropIndicator?: boolean
+  sortingStrategy: SortingStrategy
+}) {
+  const { isLoading, props } = useDataGrid()
+  const pagination = table.state.pagination
+
+  if (props.loadingMode === "skeleton" && isLoading && pagination?.pageSize) {
+    return (
+      <>
+        {Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+          <DataGridTableBodyRowSkeleton key={rowIndex}>
+            {table.getVisibleFlatColumns().map((column, colIndex) => {
+              return (
+                <DataGridTableBodyRowSkeletonCell
+                  column={column}
+                  key={colIndex}
+                >
+                  {column.columnDef.meta?.skeleton}
+                </DataGridTableBodyRowSkeletonCell>
+              )
+            })}
+            <DataGridTableFillBodyCell />
+          </DataGridTableBodyRowSkeleton>
+        ))}
+      </>
+    )
+  }
+
+  if (!table.getRowModel().rows.length) return <DataGridTableEmpty />
+
+  return (
+    <SortableContext items={dataIds} strategy={sortingStrategy}>
+      {table.getRowModel().rows.map((row: Row<DataGridFeatures, TData>) => {
+        return (
+          <DataGridTableDndRow
+            row={row}
+            renderRowDecoration={renderRowDecoration}
+            dropIndicator={dropIndicator}
+            key={row.id}
+          />
+        )
+      })}
+    </SortableContext>
+  )
+}
+
+/**
+ * Memoized body rows: skip re-renders during active column resize.
+ * Column widths update via CSS variables on the <table> element,
+ * so the browser handles width changes without React re-renders.
+ */
+const MemoizedDataGridTableDndRowsBody = memo(
+  DataGridTableDndRowsBody,
+  (_prev, next) => !!next.table.state.columnResizing.isResizingColumn
+) as typeof DataGridTableDndRowsBody
+
+function DataGridTableDndRows<TData extends object>({
   handleDragEnd,
   dataIds,
   footerContent,
+  collisionDetection = closestCenter,
+  modifiers,
+  sortingStrategy = holdRowsInPlaceStrategy,
+  renderRowDecoration,
+  dropIndicator = true,
+  onDragStart,
+  onDragMove,
+  onDragOver,
+  onDragCancel,
 }: {
   handleDragEnd: (event: DragEndEvent) => void
   dataIds: UniqueIdentifier[]
   footerContent?: ReactNode
+  /** Overrides the default `closestCenter` strategy. */
+  collisionDetection?: CollisionDetection
+  /**
+   * Replaces the default axis restriction, e.g. drop `restrictToVerticalAxis`
+   * to allow the horizontal gesture that tree re-parenting relies on. The
+   * table container clamp is always applied after these, so a dragged row
+   * cannot leave the grid.
+   */
+  modifiers?: Modifier[]
+  /**
+   * Replaces the default `verticalListSortingStrategy`. Return null from a
+   * strategy to leave every row exactly where it is. A tree needs that: its drop
+   * is either INTO the hovered row or BETWEEN two rows, and which one it is
+   * flips as the pointer crosses a single row, so a gap that opens for one and
+   * shuts for the other flickers the whole surface. Such a caller draws its own
+   * insertion line instead, and pairs this with a modifier that holds the
+   * carried row still, since a gap nothing moves into is just a hole.
+   */
+  sortingStrategy?: SortingStrategy
+  /** Per-row slot for drop indicators and depth guides. */
+  renderRowDecoration?: DataGridTableDndRowDecoration<TData>
+  /**
+   * Draws a line on the seam the carried row would land on. On by default;
+   * pass `false` when `renderRowDecoration` paints its own insertion affordance
+   * and the two would compete.
+   */
+  dropIndicator?: boolean
+  onDragStart?: (event: DragStartEvent) => void
+  onDragMove?: (event: DragMoveEvent) => void
+  onDragOver?: (event: DragOverEvent) => void
+  onDragCancel?: (event: DragCancelEvent) => void
 }) {
-  const { table, isLoading, props } = useDataGrid()
-  const pagination = table.getState().pagination
+  const { table, props } = useDataGrid<TData>()
   const tableContainerRef = useRef<HTMLDivElement>(null)
   const [isDraggingRow, setIsDraggingRow] = useState(false)
+  // The overlay is portalled to the document body. dnd-kit renders DragOverlay
+  // in place, and it positions with `position: fixed` against viewport
+  // coordinates - so any ancestor that establishes a containing block for fixed
+  // descendants silently re-anchors it. `content-visibility`, `contain`,
+  // `transform`, `filter` and `will-change` all do that, and the first two are
+  // exactly what a card grid uses to defer off-screen work. The clone then
+  // lands offset by that ancestor's own top/left, and the container clamp
+  // below mis-clamps too, because its rects are measured in viewport space.
+  //
+  // Resolved in an effect rather than read at render so the server and the
+  // first client render agree. A drag cannot start before hydration, so the
+  // overlay being absent for one frame costs nothing.
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null)
+
+  useEffect(() => {
+    setPortalTarget(document.body)
+  }, [])
+  // The row being carried, plus the column widths measured off the header the
+  // moment the drag starts. The clone lives outside the table, so it has no
+  // columns of its own and has to be told what they are.
+  const [carried, setCarried] = useState<{
+    id: UniqueIdentifier
+    width: number
+    height: number
+    columns: number[]
+  } | null>(null)
+
+  const pickUpRow = useCallback((id: UniqueIdentifier) => {
+    const container = tableContainerRef.current
+    const head = container?.querySelector("thead tr")
+    if (!container || !head) {
+      setCarried(null)
+      return
+    }
+
+    // The clone has to be exactly as tall as the row it was lifted from.
+    // A fixed height reads as the grid growing under the pointer the moment
+    // you pick a row up, and it is wrong in both directions: rows whose
+    // content wraps are taller than any constant, and dense rows are shorter.
+    const source = Array.from(
+      container.querySelectorAll<HTMLElement>("tbody tr[data-row-id]")
+    ).find((candidate) => candidate.dataset.rowId === String(id))
+    const height = source?.getBoundingClientRect().height ?? 0
+
+    // The fill cell is a header-only spacer that soaks up the surplus a column
+    // resize leaves behind, and the clone renders data cells only. Measuring it
+    // in would make the clone's table wider than the cells it actually holds,
+    // and `table-fixed` hands that orphaned width back out across every column
+    // -- the carried row comes out visibly wider than the row it was lifted
+    // from. So the width is the sum of what we render, never the header's own.
+    const columns = Array.from(head.children)
+      .filter(
+        (cell) =>
+          cell.getAttribute("data-slot") !== "data-grid-table-fill-head-cell"
+      )
+      .map((cell) => cell.getBoundingClientRect().width)
+
+    setCarried({
+      id,
+      width: columns.reduce((total, width) => total + width, 0),
+      height,
+      columns,
+    })
+  }, [])
+
+  const carriedRow = carried
+    ? table
+        .getRowModel()
+        .rows.find((row: Row<DataGridFeatures, TData>) => row.id === carried.id)
+    : undefined
 
   const sensors = useSensors(
     useSensor(MouseSensor, {}),
     useSensor(TouchSensor, {}),
-    useSensor(KeyboardSensor, {})
+    // Keyboard reordering moves one sortable position per keypress instead
+    // of the sensor's raw 25px default.
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
   )
 
   useEffect(() => {
@@ -170,7 +528,7 @@ function DataGridTableDndRows<TData>({
     }
   }, [isDraggingRow])
 
-  const modifiers = useMemo(() => {
+  const resolvedModifiers = useMemo(() => {
     const restrictToTableContainer: Modifier = ({
       transform,
       draggingNodeRect,
@@ -189,25 +547,48 @@ function DataGridTableDndRows<TData>({
 
       return {
         ...transform,
-        x: Math.max(minX, Math.min(maxX, x)),
+        // The horizontal rail only engages while the default axis restriction
+        // is in force. A row is exactly as wide as the viewport, so minX and
+        // maxX both collapse to 0 and clamping x erases it entirely: harmless
+        // under restrictToVerticalAxis, which zeroes x anyway, but fatal for a
+        // caller that replaced the restriction precisely to READ x, as a tree
+        // does to resolve drop depth. Vertical is railed either way, which is
+        // what actually keeps a dragged row inside the grid.
+        x: modifiers ? x : Math.max(minX, Math.min(maxX, x)),
         y: Math.max(minY, Math.min(maxY, y)),
       }
     }
 
-    return [restrictToVerticalAxis, restrictToTableContainer]
-  }, [])
+    // The container clamp is a safety rail rather than a policy, so it stays
+    // applied even when the caller replaces the axis restriction.
+    return [
+      ...(modifiers ?? [restrictToVerticalAxis]),
+      restrictToTableContainer,
+    ]
+  }, [modifiers])
 
   return (
     <DndContext
       id={useId()}
-      collisionDetection={closestCenter}
-      modifiers={modifiers}
-      onDragCancel={() => setIsDraggingRow(false)}
+      collisionDetection={collisionDetection}
+      modifiers={resolvedModifiers}
+      onDragCancel={(event) => {
+        setIsDraggingRow(false)
+        setCarried(null)
+        onDragCancel?.(event)
+      }}
       onDragEnd={(event) => {
         setIsDraggingRow(false)
+        setCarried(null)
         handleDragEnd(event)
       }}
-      onDragStart={() => setIsDraggingRow(true)}
+      onDragMove={onDragMove}
+      onDragOver={onDragOver}
+      onDragStart={(event) => {
+        setIsDraggingRow(true)
+        pickUpRow(event.active.id)
+        onDragStart?.(event)
+      }}
       sensors={sensors}
     >
       <DataGridTableViewport
@@ -222,38 +603,43 @@ function DataGridTableDndRows<TData>({
           <DataGridTableHead>
             {table
               .getHeaderGroups()
-              .map((headerGroup: HeaderGroup<TData>, index) => {
-                return (
-                  <DataGridTableHeadRow key={index} rowId={headerGroup.id}>
-                    {headerGroup.headers.map((header, index) => {
-                      const { column } = header
+              .map(
+                (headerGroup: HeaderGroup<DataGridFeatures, TData>, index) => {
+                  return (
+                    <DataGridTableHeadRow key={index} rowId={headerGroup.id}>
+                      {headerGroup.headers.map((header, index) => {
+                        const { column } = header
 
-                      return (
-                        <DataGridTableHeadRowCell header={header} key={index}>
-                          {header.isPlaceholder ? null : props.tableLayout
-                              ?.columnsResizable && column.getCanResize() ? (
-                            <div className="truncate">
-                              {flexRender(
+                        return (
+                          <DataGridTableHeadRowCell header={header} key={index}>
+                            {header.isPlaceholder ? null : props.tableLayout
+                                ?.columnsResizable && column.getCanResize() ? (
+                              <>
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                                )}
+                              </>
+                            ) : (
+                              flexRender(
                                 header.column.columnDef.header,
                                 header.getContext()
-                              )}
-                            </div>
-                          ) : (
-                            flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )
-                          )}
-                          {props.tableLayout?.columnsResizable &&
-                            column.getCanResize() && (
-                              <DataGridTableHeadRowCellResize header={header} />
+                              )
                             )}
-                        </DataGridTableHeadRowCell>
-                      )
-                    })}
-                  </DataGridTableHeadRow>
-                )
-              })}
+                            {props.tableLayout?.columnsResizable &&
+                              column.getCanResize() && (
+                                <DataGridTableHeadRowCellResize
+                                  header={header}
+                                />
+                              )}
+                          </DataGridTableHeadRowCell>
+                        )
+                      })}
+                      <DataGridTableFillHeadCell />
+                    </DataGridTableHeadRow>
+                  )
+                }
+              )}
           </DataGridTableHead>
 
           {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
@@ -261,35 +647,13 @@ function DataGridTableDndRows<TData>({
           )}
 
           <DataGridTableBody>
-            {props.loadingMode === "skeleton" &&
-            isLoading &&
-            pagination?.pageSize ? (
-              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
-                <DataGridTableBodyRowSkeleton key={rowIndex}>
-                  {table.getVisibleFlatColumns().map((column, colIndex) => {
-                    return (
-                      <DataGridTableBodyRowSkeletonCell
-                        column={column}
-                        key={colIndex}
-                      >
-                        {column.columnDef.meta?.skeleton}
-                      </DataGridTableBodyRowSkeletonCell>
-                    )
-                  })}
-                </DataGridTableBodyRowSkeleton>
-              ))
-            ) : table.getRowModel().rows.length ? (
-              <SortableContext
-                items={dataIds}
-                strategy={verticalListSortingStrategy}
-              >
-                {table.getRowModel().rows.map((row: Row<TData>) => {
-                  return <DataGridTableDndRow row={row} key={row.id} />
-                })}
-              </SortableContext>
-            ) : (
-              <DataGridTableEmpty />
-            )}
+            <MemoizedDataGridTableDndRowsBody
+              table={table}
+              dataIds={dataIds}
+              renderRowDecoration={renderRowDecoration}
+              dropIndicator={dropIndicator}
+              sortingStrategy={sortingStrategy}
+            />
           </DataGridTableBody>
 
           {footerContent && (
@@ -297,8 +661,75 @@ function DataGridTableDndRows<TData>({
           )}
         </DataGridTableBase>
       </DataGridTableViewport>
+
+      {/* The row you are actually holding. It is a real clone rendered outside
+          the table, which is the only way a dragged row can follow the pointer
+          without disturbing the grid: it adds no cell, so it cannot alter the
+          column widths, and it floats above the rows rather than through them.
+          Its presence also tells dnd-kit to stop translating the source row, so
+          the row left behind simply dims in place.
+
+          Portalled to the body so the fixed positioning resolves against the
+          viewport wherever the grid is mounted. React context crosses a portal,
+          so DndContext still reaches it. */}
+      {portalTarget
+        ? createPortal(
+            <DragOverlay dropAnimation={null}>
+              {carried && carriedRow ? (
+                <table
+                  aria-hidden="true"
+                  style={{ width: carried.width, tableLayout: "fixed" }}
+                  className="bg-background border-border pointer-events-none cursor-grabbing rounded-md border shadow-lg"
+                >
+                  <tbody>
+                    {/* Padding rides on the inner element, not the cell. A `td` can
+                  never render narrower than its own horizontal padding, so a
+                  column resized below that would silently widen here and the
+                  clone would stop matching the row it came from. Height comes
+                  from the measured source row for the same reason the widths
+                  do: the clone has no row of its own to inherit it from. */}
+                    <tr
+                      style={{ height: carried.height || undefined }}
+                      className="[&>td]:p-0 [&>td]:align-middle"
+                    >
+                      {carriedRow
+                        .getVisibleCells()
+                        .map(
+                          (
+                            cell: Cell<DataGridFeatures, TData, unknown>,
+                            index: number
+                          ) => (
+                            <td
+                              key={cell.id}
+                              // Falls back to the column's own size so an unforeseen
+                              // header/cell count mismatch degrades to a real width
+                              // rather than to `auto`.
+                              style={{
+                                width:
+                                  carried.columns[index] ??
+                                  cell.column.getSize(),
+                              }}
+                            >
+                              <div className="truncate px-3">
+                                {flexRender(
+                                  cell.column.columnDef.cell,
+                                  cell.getContext()
+                                )}
+                              </div>
+                            </td>
+                          )
+                        )}
+                    </tr>
+                  </tbody>
+                </table>
+              ) : null}
+            </DragOverlay>,
+            portalTarget
+          )
+        : null}
     </DndContext>
   )
 }
 
-export { DataGridTableDndRowHandle, DataGridTableDndRows }
\ No newline at end of file
+export { DataGridTableDndRowHandle, DataGridTableDndRows }
+export type { DataGridTableDndRowData, DataGridTableDndRowDecoration }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
index 7222aa8..4ca6bdc 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
@@ -1,14 +1,20 @@
+"use client"
+
 import {
-  CSSProperties,
   Fragment,
-  ReactNode,
+  memo,
   useEffect,
   useId,
   useMemo,
   useRef,
   useState,
 } from "react"
+import type { CSSProperties, ReactNode } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import type {
+  DataGridFeatures,
+  DataGridTableInstance,
+} from "@/components/reui/data-grid/data-grid"
 import {
   DataGridTableBase,
   DataGridTableBody,
@@ -18,6 +24,8 @@ import {
   DataGridTableBodyRowSkeleton,
   DataGridTableBodyRowSkeletonCell,
   DataGridTableEmpty,
+  DataGridTableFillBodyCell,
+  DataGridTableFillHeadCell,
   DataGridTableFoot,
   DataGridTableHead,
   DataGridTableHeadRow,
@@ -30,34 +38,36 @@ import {
   closestCenter,
   DndContext,
   KeyboardSensor,
-  Modifier,
   MouseSensor,
   TouchSensor,
   useSensor,
   useSensors,
   type DragEndEvent,
+  type Modifier,
 } from "@dnd-kit/core"
 import {
   horizontalListSortingStrategy,
   SortableContext,
+  sortableKeyboardCoordinates,
   useSortable,
 } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
-import {
+import { flexRender } from "@tanstack/react-table"
+import type {
   Cell,
-  flexRender,
   Header,
   HeaderGroup,
   Row,
+  Table,
 } from "@tanstack/react-table"
 
 import { Button } from "@evobgp/ui/components/button"
 import { GripVerticalIcon } from "lucide-react"
 
-function DataGridTableDndHeader<TData>({
+function DataGridTableDndHeader<TData extends object>({
   header,
 }: {
-  header: Header<TData, unknown>
+  header: Header<DataGridFeatures, TData, unknown>
 }) {
   const { props } = useDataGrid()
   const { column } = header
@@ -105,7 +115,7 @@ function DataGridTableDndHeader<TData>({
             className={`-ms-2 size-6 ${isDragging ? "cursor-grabbing" : "cursor-grab active:cursor-grabbing"}`}
             {...attributes}
             {...listeners}
-            aria-label="Перетащить для изменения порядка"
+            aria-label="Drag to reorder"
           >
             <GripVerticalIcon className="opacity-60 hover:opacity-100" aria-hidden="true" />
           </Button>
@@ -123,7 +133,11 @@ function DataGridTableDndHeader<TData>({
   )
 }
 
-function DataGridTableDndCell<TData>({ cell }: { cell: Cell<TData, unknown> }) {
+function DataGridTableDndCell<TData extends object>({
+  cell,
+}: {
+  cell: Cell<DataGridFeatures, TData, unknown>
+}) {
   const { props } = useDataGrid()
   const { isDragging, setNodeRef, transform, transition } = useSortable({
     id: cell.column.id,
@@ -148,22 +162,93 @@ function DataGridTableDndCell<TData>({ cell }: { cell: Cell<TData, unknown> }) {
   )
 }
 
-function DataGridTableDnd<TData>({
+function DataGridTableDndBodyRows<TData extends object>({
+  table,
+}: {
+  table: DataGridTableInstance<TData>
+}) {
+  const { isLoading, props } = useDataGrid()
+  const pagination = table.state.pagination
+
+  if (props.loadingMode === "skeleton" && isLoading && pagination?.pageSize) {
+    return (
+      <>
+        {Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+          <DataGridTableBodyRowSkeleton key={rowIndex}>
+            {table.getVisibleFlatColumns().map((column, colIndex) => {
+              return (
+                <DataGridTableBodyRowSkeletonCell
+                  column={column}
+                  key={colIndex}
+                >
+                  {column.columnDef.meta?.skeleton}
+                </DataGridTableBodyRowSkeletonCell>
+              )
+            })}
+            <DataGridTableFillBodyCell />
+          </DataGridTableBodyRowSkeleton>
+        ))}
+      </>
+    )
+  }
+
+  if (!table.getRowModel().rows.length) return <DataGridTableEmpty />
+
+  return (
+    <>
+      {table.getRowModel().rows.map((row: Row<DataGridFeatures, TData>) => {
+        return (
+          <Fragment key={row.id}>
+            <DataGridTableBodyRow row={row}>
+              <SortableContext
+                items={table.state.columnOrder}
+                strategy={horizontalListSortingStrategy}
+              >
+                {row
+                  .getVisibleCells()
+                  .map((cell: Cell<DataGridFeatures, TData, unknown>) => (
+                    <DataGridTableDndCell cell={cell} key={cell.id} />
+                  ))}
+              </SortableContext>
+              <DataGridTableFillBodyCell />
+            </DataGridTableBodyRow>
+            {row.getIsExpanded() && <DataGridTableBodyRowExpandded row={row} />}
+          </Fragment>
+        )
+      })}
+    </>
+  )
+}
+
+/**
+ * Memoized body rows: skip re-renders during active column resize.
+ * Column widths update via CSS variables on the <table> element,
+ * so the browser handles width changes without React re-renders.
+ */
+const MemoizedDataGridTableDndBodyRows = memo(
+  DataGridTableDndBodyRows,
+  (_prev, next) => !!next.table.state.columnResizing.isResizingColumn
+) as typeof DataGridTableDndBodyRows
+
+function DataGridTableDnd<TData extends object>({
   handleDragEnd,
   footerContent,
 }: {
   handleDragEnd: (event: DragEndEvent) => void
   footerContent?: ReactNode
 }) {
-  const { table, isLoading, props } = useDataGrid()
-  const pagination = table.getState().pagination
+  const { table, props } = useDataGrid()
   const containerRef = useRef<HTMLDivElement>(null)
   const [isDraggingColumn, setIsDraggingColumn] = useState(false)
 
   const sensors = useSensors(
     useSensor(MouseSensor, {}),
     useSensor(TouchSensor, {}),
-    useSensor(KeyboardSensor, {})
+    // Keyboard reordering moves one sortable position per keypress instead
+    // of the sensor's raw 25px default.
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
   )
 
   useEffect(() => {
@@ -237,23 +322,26 @@ function DataGridTableDnd<TData>({
           <DataGridTableHead>
             {table
               .getHeaderGroups()
-              .map((headerGroup: HeaderGroup<TData>, index) => {
-                return (
-                  <DataGridTableHeadRow key={index} rowId={headerGroup.id}>
-                    <SortableContext
-                      items={table.getState().columnOrder}
-                      strategy={horizontalListSortingStrategy}
-                    >
-                      {headerGroup.headers.map((header) => (
-                        <DataGridTableDndHeader
-                          header={header}
-                          key={header.id}
-                        />
-                      ))}
-                    </SortableContext>
-                  </DataGridTableHeadRow>
-                )
-              })}
+              .map(
+                (headerGroup: HeaderGroup<DataGridFeatures, TData>, index) => {
+                  return (
+                    <DataGridTableHeadRow key={index} rowId={headerGroup.id}>
+                      <SortableContext
+                        items={table.state.columnOrder}
+                        strategy={horizontalListSortingStrategy}
+                      >
+                        {headerGroup.headers.map((header) => (
+                          <DataGridTableDndHeader
+                            header={header}
+                            key={header.id}
+                          />
+                        ))}
+                      </SortableContext>
+                      <DataGridTableFillHeadCell />
+                    </DataGridTableHeadRow>
+                  )
+                }
+              )}
           </DataGridTableHead>
 
           {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
@@ -261,48 +349,7 @@ function DataGridTableDnd<TData>({
           )}
 
           <DataGridTableBody>
-            {props.loadingMode === "skeleton" &&
-            isLoading &&
-            pagination?.pageSize ? (
-              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
-                <DataGridTableBodyRowSkeleton key={rowIndex}>
-                  {table.getVisibleFlatColumns().map((column, colIndex) => {
-                    return (
-                      <DataGridTableBodyRowSkeletonCell
-                        column={column}
-                        key={colIndex}
-                      >
-                        {column.columnDef.meta?.skeleton}
-                      </DataGridTableBodyRowSkeletonCell>
-                    )
-                  })}
-                </DataGridTableBodyRowSkeleton>
-              ))
-            ) : table.getRowModel().rows.length ? (
-              table.getRowModel().rows.map((row: Row<TData>) => {
-                return (
-                  <Fragment key={row.id}>
-                    <DataGridTableBodyRow row={row}>
-                      <SortableContext
-                        items={table.getState().columnOrder}
-                        strategy={horizontalListSortingStrategy}
-                      >
-                        {row
-                          .getVisibleCells()
-                          .map((cell: Cell<TData, unknown>) => (
-                            <DataGridTableDndCell cell={cell} key={cell.id} />
-                          ))}
-                      </SortableContext>
-                    </DataGridTableBodyRow>
-                    {row.getIsExpanded() && (
-                      <DataGridTableBodyRowExpandded row={row} />
-                    )}
-                  </Fragment>
-                )
-              })
-            ) : (
-              <DataGridTableEmpty />
-            )}
+            <MemoizedDataGridTableDndBodyRows table={table} />
           </DataGridTableBody>
 
           {footerContent && (
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
index c9a4471..4b6645b 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
@@ -1,14 +1,10 @@
-"use client"
-
-import {
-  CSSProperties,
-  memo,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from "react"
+import { memo, useCallback, useEffect, useRef, useState } from "react"
+import type { CSSProperties, ReactNode } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import type {
+  DataGridFeatures,
+  DataGridTableInstance,
+} from "@/components/reui/data-grid/data-grid"
 import {
   DataGridTableBase,
   DataGridTableBody,
@@ -23,14 +19,16 @@ import {
   DataGridTableRenderedRow,
   DataGridTableRowSpacer,
   DataGridTableViewport,
+  getDataGridScrollAreaViewport,
   getDataGridTableMergedHeaderGroups,
   getDataGridTableRowSections,
   getPinningStyles,
   hasDataGridTableRightPinnedColumns,
 } from "@/components/reui/data-grid/data-grid-table"
-import { Column, flexRender, Row, Table } from "@tanstack/react-table"
-import {
-  useVirtualizer,
+import { flexRender } from "@tanstack/react-table"
+import type { Column, Row, Table } from "@tanstack/react-table"
+import { useVirtualizer } from "@tanstack/react-virtual"
+import type {
   VirtualItem,
   Virtualizer,
   VirtualizerOptions,
@@ -49,21 +47,226 @@ type DataGridTableVirtualizerInstance = Virtualizer<
   HTMLTableRowElement
 >
 
-type DataGridTableVirtualizerOptions<TData> = Omit<
+type DataGridTableVirtualScrollAlignment = "auto" | "center" | "start" | "end"
+
+type DataGridTableVirtualScrollRequest = {
+  align: DataGridTableVirtualScrollAlignment
+  behavior: ScrollBehavior
+  containerElement: HTMLDivElement
+  headerSticky: boolean
+  isVirtualizationEnabled: boolean
+  rowId: string | undefined
+  rowIndex: number
+  scrollElement: HTMLElement
+}
+
+function isSameDataGridTableScrollRequest(
+  previous: DataGridTableVirtualScrollRequest | null,
+  next: DataGridTableVirtualScrollRequest
+) {
+  return (
+    previous?.align === next.align &&
+    previous.behavior === next.behavior &&
+    previous.containerElement === next.containerElement &&
+    previous.headerSticky === next.headerSticky &&
+    previous.isVirtualizationEnabled === next.isVirtualizationEnabled &&
+    previous.rowId === next.rowId &&
+    previous.rowIndex === next.rowIndex &&
+    previous.scrollElement === next.scrollElement
+  )
+}
+
+function getDataGridTableScrollTarget({
+  align,
+  clientHeight,
+  rowBottom,
+  rowHeight,
+  rowTop,
+  scrollHeight,
+  scrollTop,
+  viewportTopOffset = 0,
+}: {
+  align: DataGridTableVirtualScrollAlignment
+  clientHeight: number
+  rowBottom: number
+  rowHeight: number
+  rowTop: number
+  scrollHeight: number
+  scrollTop: number
+  viewportTopOffset?: number
+}) {
+  const visibleHeight = Math.max(0, clientHeight - viewportTopOffset)
+  const viewportTop = scrollTop + viewportTopOffset
+  const viewportBottom = scrollTop + clientHeight
+
+  const targetTop =
+    align === "auto"
+      ? rowTop < viewportTop
+        ? rowTop - viewportTopOffset
+        : rowBottom > viewportBottom
+          ? rowBottom - clientHeight
+          : null
+      : align === "start"
+        ? rowTop - viewportTopOffset
+        : align === "end"
+          ? rowBottom - clientHeight
+          : rowTop -
+            viewportTopOffset -
+            Math.max(0, (visibleHeight - rowHeight) / 2)
+
+  if (targetTop === null) return null
+
+  return Math.min(
+    Math.max(0, targetTop),
+    Math.max(0, scrollHeight - clientHeight)
+  )
+}
+
+function getDataGridTableHeaderOffset({
+  containerElement,
+  headerSticky,
+  scrollElement,
+}: {
+  containerElement: HTMLDivElement
+  headerSticky: boolean
+  scrollElement: HTMLElement
+}) {
+  if (!headerSticky) return 0
+
+  const headerElement = containerElement.querySelector<HTMLElement>(
+    ':scope > [data-slot="data-grid-table"] > thead'
+  )
+
+  if (!headerElement) return 0
+
+  const scrollRect = scrollElement.getBoundingClientRect()
+  const headerRect = headerElement.getBoundingClientRect()
+  const headerBottomOffset = headerRect.bottom - scrollRect.top
+  const overlapsViewportTop =
+    headerRect.top <= scrollRect.top + 0.5 && headerBottomOffset > 0
+
+  if (!overlapsViewportTop) return 0
+
+  return Math.min(scrollElement.clientHeight, Math.max(0, headerBottomOffset))
+}
+
+function scrollDataGridTableToOffset({
+  behavior,
+  scrollElement,
+  targetTop,
+  virtualizer,
+}: {
+  behavior: ScrollBehavior
+  scrollElement: HTMLElement
+  targetTop: number
+  virtualizer?: DataGridTableVirtualizerInstance
+}) {
+  if (virtualizer) {
+    virtualizer.scrollToOffset(targetTop, { align: "start", behavior })
+  } else if (typeof scrollElement.scrollTo === "function") {
+    scrollElement.scrollTo({ behavior, top: targetTop })
+  } else {
+    scrollElement.scrollTop = targetTop
+  }
+}
+
+function scrollDataGridTableRowIntoView({
+  align,
+  behavior,
+  cancelPendingScroll = false,
+  containerElement,
+  headerSticky,
+  rowIndex,
+  scrollElement,
+  virtualizer,
+}: {
+  align: DataGridTableVirtualScrollAlignment
+  behavior: ScrollBehavior
+  cancelPendingScroll?: boolean
+  containerElement: HTMLDivElement | null
+  headerSticky: boolean
+  rowIndex: number
+  scrollElement: HTMLElement | null
+  virtualizer?: DataGridTableVirtualizerInstance
+}) {
+  if (!containerElement || !scrollElement) return false
+
+  const rowElement = containerElement.querySelector<HTMLTableRowElement>(
+    `:scope > [data-slot="data-grid-table"] > tbody > tr[data-index="${rowIndex}"]`
+  )
+
+  if (!rowElement) return false
+
+  const scrollRect = scrollElement.getBoundingClientRect()
+  const rowRect = rowElement.getBoundingClientRect()
+  const viewportTopOffset = getDataGridTableHeaderOffset({
+    containerElement,
+    headerSticky,
+    scrollElement,
+  })
+  const rowTop = scrollElement.scrollTop + rowRect.top - scrollRect.top
+  const rowBottom = scrollElement.scrollTop + rowRect.bottom - scrollRect.top
+  const targetTop = getDataGridTableScrollTarget({
+    align,
+    clientHeight: scrollElement.clientHeight,
+    rowBottom,
+    rowHeight: rowRect.height || rowElement.offsetHeight,
+    rowTop,
+    scrollHeight: scrollElement.scrollHeight,
+    scrollTop: scrollElement.scrollTop,
+    viewportTopOffset,
+  })
+
+  if (
+    targetTop === null ||
+    Math.abs(targetTop - scrollElement.scrollTop) < 0.5
+  ) {
+    if (cancelPendingScroll) {
+      scrollDataGridTableToOffset({
+        behavior: "auto",
+        scrollElement,
+        targetTop: scrollElement.scrollTop,
+        virtualizer,
+      })
+    }
+
+    return true
+  }
+
+  scrollDataGridTableToOffset({
+    behavior,
+    scrollElement,
+    targetTop,
+    virtualizer,
+  })
+
+  return true
+}
+
+type DataGridTableVirtualizerOptions<TData extends object> = Omit<
   VirtualizerOptions<HTMLElement, HTMLTableRowElement>,
   "count" | "estimateSize" | "getItemKey" | "getScrollElement"
 > & {
-  estimateSize?: (index: number, row: Row<TData>) => number
-  getItemKey?: (index: number, row: Row<TData>) => string | number
+  estimateSize?: (index: number, row: Row<DataGridFeatures, TData>) => number
+  getItemKey?: (
+    index: number,
+    row: Row<DataGridFeatures, TData>
+  ) => string | number
   getScrollElement?: (
     elements: DataGridTableVirtualScrollElements
   ) => HTMLElement | null
 }
 
-interface DataGridTableVirtualProps<TData> {
+interface DataGridTableVirtualProps<TData extends object> {
   height?: number | string
   estimateSize?: number
   overscan?: number
+  /** Scroll animation used when revealing a controlled target row. */
+  scrollBehavior?: ScrollBehavior
+  /** Alignment used when revealing a controlled target row. Defaults to auto. */
+  scrollToRowAlign?: DataGridTableVirtualScrollAlignment
+  /** Index within the center (non-pinned) row section to reveal. */
+  scrollToRowIndex?: number
   footerContent?: ReactNode
   renderHeader?: boolean
   onFetchMore?: () => void
@@ -73,11 +276,11 @@ interface DataGridTableVirtualProps<TData> {
   virtualizerOptions?: DataGridTableVirtualizerOptions<TData>
 }
 
-interface VirtualBodyProps<TData> {
-  table: Table<TData>
-  topRows: Row<TData>[]
-  centerRows: Row<TData>[]
-  bottomRows: Row<TData>[]
+interface VirtualBodyProps<TData extends object> {
+  table: DataGridTableInstance<TData>
+  topRows: Row<DataGridFeatures, TData>[]
+  centerRows: Row<DataGridFeatures, TData>[]
+  bottomRows: Row<DataGridFeatures, TData>[]
   virtualItems: VirtualItem[]
   totalSize: number
   isVirtualizationEnabled: boolean
@@ -89,16 +292,16 @@ interface VirtualBodyProps<TData> {
   measureRowRef?: (element: HTMLTableRowElement | null) => void
 }
 
-function DataGridTableVirtualPinnedPlaceholderCell<TData>({
+function DataGridTableVirtualPinnedPlaceholderCell<TData extends object>({
   column,
 }: {
-  column: Column<TData>
+  column: Column<DataGridFeatures, TData, unknown>
 }) {
   const { props } = useDataGrid()
   const isPinned = column.getIsPinned()
-  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left")
-  const isFirstRightPinned =
-    isPinned === "right" && column.getIsFirstColumn("right")
+  const isLastStartPinned =
+    isPinned === "start" && column.getIsLastColumn("start")
+  const isFirstEndPinned = isPinned === "end" && column.getIsFirstColumn("end")
 
   return (
     <td
@@ -113,20 +316,20 @@ function DataGridTableVirtualPinnedPlaceholderCell<TData>({
       }}
       data-pinned={isPinned || undefined}
       data-last-col={
-        isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined
+        isLastStartPinned ? "start" : isFirstEndPinned ? "end" : undefined
       }
       className={cn(
         "p-0",
         props.tableLayout?.cellBorder && "border-e",
         props.tableLayout?.columnsPinnable &&
           column.getCanPin() &&
-          "data-pinned:bg-background data-pinned:isolate [&[data-pinned=left][data-last-col=left]]:shadow-[inset_-1px_0_0_0_var(--border)] [&[data-pinned=right][data-last-col=right]]:shadow-[inset_1px_0_0_0_var(--border)]"
+          "data-pinned:bg-background data-pinned:isolate [&[data-pinned=end][data-last-col=end]]:shadow-[inset_1px_0_0_0_var(--border)] [&[data-pinned=start][data-last-col=start]]:shadow-[inset_-1px_0_0_0_var(--border)]"
       )}
     />
   )
 }
 
-function DataGridTableVirtualUtilityRow<TData>({
+function DataGridTableVirtualUtilityRow<TData extends object>({
   table,
   children,
   centerCellClassName,
@@ -134,7 +337,7 @@ function DataGridTableVirtualUtilityRow<TData>({
   rowClassName,
   ariaHidden,
 }: {
-  table: Table<TData>
+  table: DataGridTableInstance<TData>
   children: ReactNode
   centerCellClassName?: string
   centerCellStyle?: CSSProperties
@@ -142,9 +345,9 @@ function DataGridTableVirtualUtilityRow<TData>({
   ariaHidden?: boolean
 }) {
   const { props } = useDataGrid()
-  const leftVisibleColumns = table.getLeftVisibleLeafColumns()
+  const leftVisibleColumns = table.getStartVisibleLeafColumns()
   const centerVisibleColumns = table.getCenterVisibleLeafColumns()
-  const rightVisibleColumns = table.getRightVisibleLeafColumns()
+  const rightVisibleColumns = table.getEndVisibleLeafColumns()
   const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
 
   return (
@@ -178,11 +381,11 @@ function DataGridTableVirtualUtilityRow<TData>({
   )
 }
 
-function DataGridTableVirtualSpacer<TData>({
+function DataGridTableVirtualSpacer<TData extends object>({
   table,
   height,
 }: {
-  table: Table<TData>
+  table: DataGridTableInstance<TData>
   height: number
 }) {
   if (height <= 0) return null
@@ -199,12 +402,12 @@ function DataGridTableVirtualSpacer<TData>({
   )
 }
 
-function DataGridTableVirtualStatusRow<TData>({
+function DataGridTableVirtualStatusRow<TData extends object>({
   table,
   children,
   className,
 }: {
-  table: Table<TData>
+  table: DataGridTableInstance<TData>
   children: ReactNode
   className?: string
 }) {
@@ -221,7 +424,7 @@ function DataGridTableVirtualStatusRow<TData>({
   )
 }
 
-function DataGridTableVirtualBody<TData>({
+function DataGridTableVirtualBody<TData extends object>({
   table,
   topRows,
   centerRows,
@@ -236,9 +439,25 @@ function DataGridTableVirtualBody<TData>({
   allRowsLoadedMessage,
   measureRowRef,
 }: VirtualBodyProps<TData>) {
+  const { isLoading } = useDataGrid()
   const totalRows = topRows.length + centerRows.length + bottomRows.length
 
-  if (!totalRows) return <DataGridTableEmpty />
+  if (!totalRows) {
+    // Initial load must not flash the empty state as if the query returned
+    // nothing.
+    if (isLoading) {
+      return (
+        <DataGridTableVirtualStatusRow table={table}>
+          <div className="flex items-center justify-center gap-2">
+            <Spinner className="size-4 opacity-60" />
+            {loadingMoreMessage}
+          </div>
+        </DataGridTableVirtualStatusRow>
+      )
+    }
+
+    return <DataGridTableEmpty />
+  }
 
   const hasCenterRows = centerRows.length > 0
   const showFetchingRow = isInfiniteMode && isFetchingMore
@@ -291,6 +510,7 @@ function DataGridTableVirtualBody<TData>({
           key={row.id}
           row={row}
           rowRef={measureRowRef}
+          rowIndex={virtualRow.index}
         />
       )
     })
@@ -305,8 +525,10 @@ function DataGridTableVirtualBody<TData>({
       )
     }
   } else {
-    centerRows.forEach((row) => {
-      renderedRows.push(<DataGridTableRenderedRow key={row.id} row={row} />)
+    centerRows.forEach((row, rowIndex) => {
+      renderedRows.push(
+        <DataGridTableRenderedRow key={row.id} row={row} rowIndex={rowIndex} />
+      )
     })
   }
 
@@ -357,13 +579,16 @@ function DataGridTableVirtualBody<TData>({
  */
 const MemoizedVirtualBody = memo(
   DataGridTableVirtualBody,
-  (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn
+  (_prev, next) => !!next.table.state.columnResizing.isResizingColumn
 ) as typeof DataGridTableVirtualBody
 
-function DataGridTableVirtual<TData>({
+function DataGridTableVirtual<TData extends object>({
   height,
   estimateSize = 48,
   overscan = 10,
+  scrollBehavior = "auto",
+  scrollToRowAlign = "auto",
+  scrollToRowIndex,
   footerContent,
   renderHeader = true,
   onFetchMore,
@@ -372,7 +597,7 @@ function DataGridTableVirtual<TData>({
   fetchMoreOffset = 0,
   virtualizerOptions,
 }: DataGridTableVirtualProps<TData>) {
-  const { table, props } = useDataGrid()
+  const { table, props } = useDataGrid<TData>()
   const mergedHeaderGroups = getDataGridTableMergedHeaderGroups(table)
   const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
   const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(
@@ -397,17 +622,16 @@ function DataGridTableVirtual<TData>({
 
   const isVirtualizationEnabled = virtualizerOptions?.enabled !== false
   const loadingMoreMessage =
-    props.fetchingMoreMessage || props.loadingMessage || "Загрузка…"
+    props.fetchingMoreMessage || props.loadingMessage || "Loading..."
   const allRowsLoadedMessage =
-    props.allRowsLoadedMessage || "Все записи загружены"
+    props.allRowsLoadedMessage || "All records loaded"
 
   const handleViewportRef = useCallback((node: HTMLDivElement | null) => {
     setViewportElements({
       containerElement: node,
-      scrollElement:
-        (node?.closest(
-          '[data-slot="scroll-area-viewport"]'
-        ) as HTMLElement | null) ?? node,
+      scrollElement: node
+        ? (getDataGridScrollAreaViewport(node) ?? node)
+        : null,
     })
   }, [])
 
@@ -464,6 +688,134 @@ function DataGridTableVirtual<TData>({
       ? virtualizer.measureElement
       : undefined
   const resolvedFetchMoreOffset = Math.max(0, fetchMoreOffset)
+  const scrollToRowId =
+    scrollToRowIndex !== undefined
+      ? centerRows[scrollToRowIndex]?.id
+      : undefined
+  const scrollToRowVirtualItem =
+    isVirtualizationEnabled && scrollToRowIndex !== undefined
+      ? virtualItems.find((item) => item.index === scrollToRowIndex)
+      : undefined
+  const pendingScrollToRowIndexRef = useRef<number | null>(null)
+  const lastScrollRequestRef = useRef<DataGridTableVirtualScrollRequest | null>(
+    null
+  )
+  // Latch onFetchMore per row count: virtualItems gets a new identity every
+  // scroll frame, so without it the effect fires duplicate page requests
+  // before the consumer flips isFetchingMore, and loops at end-of-data when
+  // hasMore is never set.
+  const fetchMoreFiredAtCountRef = useRef<number | null>(null)
+
+  // Resolve after every commit so a stable getter can expose a replaced ref;
+  // the request signature prevents duplicate scrolling on ordinary renders.
+  useEffect(() => {
+    const previousRequest = lastScrollRequestRef.current
+
+    if (
+      scrollToRowIndex === undefined ||
+      scrollToRowIndex < 0 ||
+      scrollToRowIndex >= centerRows.length
+    ) {
+      pendingScrollToRowIndexRef.current = null
+      lastScrollRequestRef.current = null
+
+      if (previousRequest) {
+        const scrollElement = resolveScrollElement()
+
+        if (scrollElement) {
+          scrollDataGridTableToOffset({
+            behavior: "auto",
+            scrollElement,
+            targetTop: scrollElement.scrollTop,
+            virtualizer: isVirtualizationEnabled ? virtualizer : undefined,
+          })
+        }
+      }
+
+      return
+    }
+
+    const scrollElement = resolveScrollElement()
+    const containerElement = viewportElements.containerElement
+    if (!containerElement || !scrollElement) return
+
+    const headerSticky = renderHeader && !!props.tableLayout?.headerSticky
+    const nextRequest: DataGridTableVirtualScrollRequest = {
+      align: scrollToRowAlign,
+      behavior: scrollBehavior,
+      containerElement,
+      headerSticky,
+      isVirtualizationEnabled,
+      rowId: scrollToRowId,
+      rowIndex: scrollToRowIndex,
+      scrollElement,
+    }
+
+    if (isSameDataGridTableScrollRequest(previousRequest, nextRequest)) return
+
+    pendingScrollToRowIndexRef.current = null
+
+    const rowWasHandled = scrollDataGridTableRowIntoView({
+      align: scrollToRowAlign,
+      behavior: scrollBehavior,
+      cancelPendingScroll: previousRequest !== null,
+      containerElement,
+      headerSticky,
+      rowIndex: scrollToRowIndex,
+      scrollElement,
+      virtualizer: isVirtualizationEnabled ? virtualizer : undefined,
+    })
+
+    if (rowWasHandled) {
+      lastScrollRequestRef.current = nextRequest
+      return
+    }
+
+    if (!isVirtualizationEnabled) return
+
+    pendingScrollToRowIndexRef.current = scrollToRowIndex
+    lastScrollRequestRef.current = nextRequest
+    virtualizer.scrollToIndex(scrollToRowIndex, {
+      align: scrollToRowAlign,
+      behavior: scrollBehavior,
+    })
+  })
+
+  useEffect(() => {
+    if (
+      !isVirtualizationEnabled ||
+      scrollToRowIndex === undefined ||
+      pendingScrollToRowIndexRef.current !== scrollToRowIndex ||
+      !scrollToRowVirtualItem
+    ) {
+      return
+    }
+
+    const rowWasHandled = scrollDataGridTableRowIntoView({
+      align: scrollToRowAlign,
+      behavior: "auto",
+      cancelPendingScroll: true,
+      containerElement: viewportElements.containerElement,
+      headerSticky: renderHeader && !!props.tableLayout?.headerSticky,
+      rowIndex: scrollToRowIndex,
+      scrollElement: resolveScrollElement(),
+      virtualizer,
+    })
+
+    if (rowWasHandled) {
+      pendingScrollToRowIndexRef.current = null
+    }
+  }, [
+    isVirtualizationEnabled,
+    props.tableLayout?.headerSticky,
+    renderHeader,
+    resolveScrollElement,
+    scrollToRowAlign,
+    scrollToRowIndex,
+    scrollToRowVirtualItem,
+    virtualizer,
+    viewportElements.containerElement,
+  ])
 
   useEffect(() => {
     if (
@@ -478,7 +830,10 @@ function DataGridTableVirtual<TData>({
     const lastItem = virtualItems[virtualItems.length - 1]
     if (!lastItem) return
 
+    if (fetchMoreFiredAtCountRef.current === centerRows.length) return
+
     if (lastItem.index >= centerRows.length - 1 - resolvedFetchMoreOffset) {
+      fetchMoreFiredAtCountRef.current = centerRows.length
       onFetchMore?.()
     }
   }, [
@@ -499,7 +854,15 @@ function DataGridTableVirtual<TData>({
       style={
         usesExternalScrollArea
           ? undefined
-          : { height, overflow: "auto", position: "relative" }
+          : {
+              height,
+              overflow: "auto",
+              position: "relative",
+              // Standalone mode: this node IS the scroll container, so it
+              // must stay at its parent's width (not the resizable table
+              // width) or horizontal scrolling becomes impossible.
+              width: "auto",
+            }
       }
     >
       <DataGridTableBase>
@@ -508,7 +871,7 @@ function DataGridTableVirtual<TData>({
             {mergedHeaderGroups.map((headerGroup) => (
               <DataGridTableHeadRow key={headerGroup.id} rowId={headerGroup.id}>
                 {headerGroup.headers
-                  .filter((header) => header.column.getIsPinned() !== "right")
+                  .filter((header) => header.column.getIsPinned() !== "end")
                   .map((header) => {
                     const { column } = header
 
@@ -532,7 +895,7 @@ function DataGridTableVirtual<TData>({
                   <DataGridTableFillHeadCell />
                 ) : null}
                 {headerGroup.headers
-                  .filter((header) => header.column.getIsPinned() === "right")
+                  .filter((header) => header.column.getIsPinned() === "end")
                   .map((header) => {
                     const { column } = header
 
@@ -593,6 +956,7 @@ function DataGridTableVirtual<TData>({
 
 export { DataGridTableVirtual }
 export type {
+  DataGridTableVirtualScrollAlignment,
   DataGridTableVirtualProps,
   DataGridTableVirtualScrollElements,
   DataGridTableVirtualizerOptions,
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table.tsx b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
index 5c2b250..d1ecc0d 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
@@ -1,74 +1,58 @@
+"use client"
+
 import {
-  CSSProperties,
   Fragment,
   memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react"
+import type {
+  CSSProperties,
   MouseEvent as ReactMouseEvent,
   ReactNode,
   TouchEvent as ReactTouchEvent,
   Ref,
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
+  RefObject,
 } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
-import {
-  Cell,
-  Column,
-  flexRender,
-  Header,
-  Row,
-  Table,
-} from "@tanstack/react-table"
-import { cva } from "class-variance-authority"
+import type {
+  DataGridFeatures,
+  DataGridTableInstance,
+} from "@/components/reui/data-grid/data-grid"
+import { flexRender, Subscribe } from "@tanstack/react-table"
+import type { Cell, Column, Header, Row, Table } from "@tanstack/react-table"
 
 import { cn } from "@evobgp/ui/lib/utils"
 import { Checkbox } from "@evobgp/ui/components/checkbox"
 import { Spinner } from "@evobgp/ui/components/spinner"
 
-const headerCellSpacingVariants = cva("", {
-  variants: {
-    size: {
-      dense: "px-2 h-8",
-      default: "px-3",
-    },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-})
+// Static spacing lookups; called once per cell, so they stay plain string
+// picks instead of runtime variant machinery.
+const headerCellSpacingVariants = ({ size }: { size?: "dense" | "default" }) =>
+  size === "dense" ? "px-2 h-8" : "px-3"
 
-const bodyCellSpacingVariants = cva("", {
-  variants: {
-    size: {
-      dense: "px-2 py-1.5",
-      default: "px-3 py-2",
-    },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-})
+const bodyCellSpacingVariants = ({ size }: { size?: "dense" | "default" }) =>
+  size === "dense" ? "px-2 py-1.5" : "px-3 py-2"
 
-const footerCellSpacingVariants = cva("", {
-  variants: {
-    size: {
-      dense: "px-2 py-1.5",
-      default: "px-3 py-2",
-    },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-})
+const footerCellSpacingVariants = ({ size }: { size?: "dense" | "default" }) =>
+  size === "dense" ? "px-2 py-1.5" : "px-3 py-2"
 
-function getPinningStyles<TData>(column: Column<TData>): CSSProperties {
+function getPinningStyles<TData extends object>(
+  column: Column<DataGridFeatures, TData, unknown>
+): CSSProperties {
   const isPinned = column.getIsPinned()
 
   return {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    // Logical offsets: TanStack's "left"/"right" buckets are start/end
+    // semantics, so pinned columns stick to the correct edge in RTL too
+    // (identical to left/right in LTR).
+    insetInlineStart:
+      isPinned === "start" ? `${column.getStart("start")}px` : undefined,
+    insetInlineEnd:
+      isPinned === "end" ? `${column.getAfter("end")}px` : undefined,
     position: isPinned ? "sticky" : undefined,
     transform: isPinned ? "translateZ(0)" : undefined,
     contain: isPinned ? "paint" : undefined,
@@ -78,6 +62,18 @@ function getPinningStyles<TData>(column: Column<TData>): CSSProperties {
   }
 }
 
+// Shared indent contract for tree rows: DataGridTableRowExpand consumes it,
+// and fully custom cells can reuse it for depth alignment without the
+// built-in toggle.
+function getDataGridTreeIndentStyle<TData extends object>(
+  row: Row<DataGridFeatures, TData>,
+  indent: number = 20
+): CSSProperties {
+  return {
+    "--data-grid-tree-padding": `${row.depth * indent}px`,
+  } as CSSProperties
+}
+
 function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
   if (!ref) return
 
@@ -89,6 +85,24 @@ function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
   ;(ref as { current: T | null }).current = value
 }
 
+/**
+ * Nearest scroll-area viewport that belongs to THIS grid. A viewport outside
+ * the grid's own container (e.g. a page-level ScrollArea) would make the
+ * width measurement - and the virtualizer - bind the wrong box.
+ */
+function getDataGridScrollAreaViewport(node: HTMLElement): HTMLElement | null {
+  const scrollViewport = node.closest(
+    '[data-slot="scroll-area-viewport"]'
+  ) as HTMLElement | null
+
+  if (!scrollViewport) return null
+
+  const gridContainer = node.closest('[data-slot="data-grid"]')
+  if (gridContainer && !gridContainer.contains(scrollViewport)) return null
+
+  return scrollViewport
+}
+
 type DataGridResizeStartEvent =
   | ReactMouseEvent<HTMLDivElement>
   | ReactTouchEvent<HTMLDivElement>
@@ -101,33 +115,62 @@ function isDataGridTouchEvent(
   return "touches" in event
 }
 
+type DataGridTouchListLike = {
+  length: number
+  item: (index: number) => { identifier: number; clientX: number } | null
+}
+
+function findTouchClientX(list: DataGridTouchListLike, identifier: number) {
+  for (let i = 0; i < list.length; i++) {
+    const touch = list.item(i)
+    if (touch && touch.identifier === identifier) return touch.clientX
+  }
+
+  return undefined
+}
+
 function getDataGridResizeEventClientX(
-  event: DataGridResizeStartEvent | DataGridResizeDocumentEvent
+  event: DataGridResizeStartEvent | DataGridResizeDocumentEvent,
+  touchIdentifier?: number
 ) {
   if (isDataGridTouchEvent(event)) {
+    if (typeof touchIdentifier === "number") {
+      return (
+        findTouchClientX(event.touches, touchIdentifier) ??
+        findTouchClientX(event.changedTouches, touchIdentifier)
+      )
+    }
+
     return event.touches[0]?.clientX ?? event.changedTouches[0]?.clientX
   }
 
   return event.clientX
 }
 
-function startDataGridColumnResizeOnEnd<TData>(
+function startDataGridColumnResizeOnEnd<TData extends object>(
   event: DataGridResizeStartEvent,
-  header: Header<TData, unknown>,
-  table: Table<TData>
-) {
+  header: Header<DataGridFeatures, TData, unknown>,
+  table: DataGridTableInstance<TData>
+): (() => void) | undefined {
   const column = table.getColumn(header.column.id)
 
   if (!column || !column.getCanResize()) return
-  if (isDataGridTouchEvent(event) && event.touches.length > 1) return
+  const isTouchSession = isDataGridTouchEvent(event)
+  if (isTouchSession && event.touches.length > 1) return
 
   event.persist?.()
 
   const ownerDocument = event.currentTarget.ownerDocument
+  const ownerWindow = ownerDocument.defaultView
   const previousBodyCursor = ownerDocument.body.style.cursor
   const previousDocumentCursor = ownerDocument.documentElement.style.cursor
   const startSize = header.getSize()
-  const dragStartClientX = getDataGridResizeEventClientX(event)
+  // Track the initiating finger so a second touch cannot move or commit the
+  // resize with the wrong clientX.
+  const touchIdentifier = isTouchSession
+    ? event.touches[0]?.identifier
+    : undefined
+  const dragStartClientX = getDataGridResizeEventClientX(event, touchIdentifier)
   const headerCell = event.currentTarget.closest("th")
   const headerRect = headerCell?.getBoundingClientRect()
   const startOffset =
@@ -158,12 +201,50 @@ function startDataGridColumnResizeOnEnd<TData>(
   const directionMultiplier =
     table.options.columnResizeDirection === "rtl" ? -1 : 1
 
+  // Clamp the drag to the leaf columns' min/max sizes so the preview
+  // indicator matches what the commit will produce (no overshoot followed by
+  // a snap-back on release). columnDef always carries resolved defaults.
+  let minDeltaPercentage = -0.999999
+  let maxDeltaPercentage = Number.POSITIVE_INFINITY
+  columnSizingStart.forEach(([columnId, headerSize]) => {
+    if (headerSize <= 0) return
+
+    const leafColumn = table.getColumn(columnId)
+    const minSize = leafColumn?.columnDef.minSize
+    const maxSize = leafColumn?.columnDef.maxSize
+
+    if (typeof minSize === "number") {
+      minDeltaPercentage = Math.max(
+        minDeltaPercentage,
+        minSize / headerSize - 1
+      )
+    }
+    if (typeof maxSize === "number" && Number.isFinite(maxSize)) {
+      maxDeltaPercentage = Math.min(
+        maxDeltaPercentage,
+        maxSize / headerSize - 1
+      )
+    }
+  })
+
+  let lastClientX = dragStartClientX
+  let ended = false
+  const stopListeners: Array<() => void> = []
+
   const updateOffset = (clientXPos?: number, commit = false) => {
     if (typeof clientXPos !== "number") return
 
+    lastClientX = clientXPos
+
     const nextColumnSizing: Record<string, number> = {}
-    const deltaOffset = (clientXPos - dragStartClientX) * directionMultiplier
-    const deltaPercentage = Math.max(deltaOffset / startSize, -0.999999)
+    const deltaPercentage = Math.min(
+      Math.max(
+        ((clientXPos - dragStartClientX) * directionMultiplier) / startSize,
+        minDeltaPercentage
+      ),
+      maxDeltaPercentage
+    )
+    const deltaOffset = deltaPercentage * startSize
 
     columnSizingStart.forEach(([columnId, headerSize]) => {
       nextColumnSizing[columnId] =
@@ -172,7 +253,7 @@ function startDataGridColumnResizeOnEnd<TData>(
         ) / 100
     })
 
-    table.setColumnSizingInfo((old) => ({
+    table.setColumnResizing((old) => ({
       ...old,
       startOffset,
       startSize,
@@ -190,9 +271,16 @@ function startDataGridColumnResizeOnEnd<TData>(
     }
   }
 
+  // Single teardown path: commits at the given position, removes every
+  // document/window listener, and restores cursors. Safe to call more than
+  // once (blur + mouseup + unmount can race).
   const endResize = (clientXPos?: number) => {
+    if (ended) return
+    ended = true
+
+    stopListeners.forEach((stop) => stop())
     updateOffset(clientXPos, true)
-    table.setColumnSizingInfo((old) => ({
+    table.setColumnResizing((old) => ({
       ...old,
       isResizingColumn: false,
       startOffset: null,
@@ -209,8 +297,6 @@ function startDataGridColumnResizeOnEnd<TData>(
     updateOffset(moveEvent.clientX)
   }
   const mouseUpHandler = (upEvent: globalThis.MouseEvent) => {
-    ownerDocument.removeEventListener("mousemove", mouseMoveHandler)
-    ownerDocument.removeEventListener("mouseup", mouseUpHandler)
     endResize(upEvent.clientX)
   }
   const touchMoveHandler = (moveEvent: globalThis.TouchEvent) => {
@@ -219,23 +305,36 @@ function startDataGridColumnResizeOnEnd<TData>(
       moveEvent.stopPropagation()
     }
 
-    updateOffset(getDataGridResizeEventClientX(moveEvent))
+    updateOffset(getDataGridResizeEventClientX(moveEvent, touchIdentifier))
   }
   const touchEndHandler = (endEvent: globalThis.TouchEvent) => {
-    ownerDocument.removeEventListener("touchmove", touchMoveHandler)
-    ownerDocument.removeEventListener("touchend", touchEndHandler)
+    // Ignore other fingers lifting; only the initiating touch ends the drag.
+    const clientXPos =
+      typeof touchIdentifier === "number"
+        ? findTouchClientX(endEvent.changedTouches, touchIdentifier)
+        : getDataGridResizeEventClientX(endEvent)
+
+    if (typeof clientXPos !== "number") return
 
     if (endEvent.cancelable) {
       endEvent.preventDefault()
       endEvent.stopPropagation()
     }
 
-    endResize(getDataGridResizeEventClientX(endEvent))
+    endResize(clientXPos)
+  }
+  // System-interrupted gestures and window focus loss would otherwise leave
+  // the session (and its document listeners) live with no pointer held.
+  const touchCancelHandler = () => {
+    endResize(lastClientX)
+  }
+  const windowBlurHandler = () => {
+    endResize(lastClientX)
   }
 
   const passiveIfSupported = { passive: false } as const
 
-  if (isDataGridTouchEvent(event)) {
+  if (isTouchSession) {
     ownerDocument.addEventListener(
       "touchmove",
       touchMoveHandler,
@@ -246,6 +345,12 @@ function startDataGridColumnResizeOnEnd<TData>(
       touchEndHandler,
       passiveIfSupported
     )
+    ownerDocument.addEventListener("touchcancel", touchCancelHandler)
+    stopListeners.push(() => {
+      ownerDocument.removeEventListener("touchmove", touchMoveHandler)
+      ownerDocument.removeEventListener("touchend", touchEndHandler)
+      ownerDocument.removeEventListener("touchcancel", touchCancelHandler)
+    })
   } else {
     ownerDocument.addEventListener(
       "mousemove",
@@ -257,9 +362,20 @@ function startDataGridColumnResizeOnEnd<TData>(
       mouseUpHandler,
       passiveIfSupported
     )
+    stopListeners.push(() => {
+      ownerDocument.removeEventListener("mousemove", mouseMoveHandler)
+      ownerDocument.removeEventListener("mouseup", mouseUpHandler)
+    })
   }
 
-  table.setColumnSizingInfo((old) => ({
+  if (ownerWindow) {
+    ownerWindow.addEventListener("blur", windowBlurHandler)
+    stopListeners.push(() =>
+      ownerWindow.removeEventListener("blur", windowBlurHandler)
+    )
+  }
+
+  table.setColumnResizing((old) => ({
     ...old,
     startOffset,
     startSize,
@@ -268,31 +384,33 @@ function startDataGridColumnResizeOnEnd<TData>(
     columnSizingStart,
     isResizingColumn: column.id,
   }))
+
+  return () => endResize(lastClientX)
 }
 
 type DataGridTablePinnedBoundary = "top" | "bottom"
 
-function getDataGridTableRowSections<TData>(
-  table: Table<TData>,
+function getDataGridTableRowSections<TData extends object>(
+  table: DataGridTableInstance<TData>,
   rowsPinnable?: boolean
 ) {
   if (!rowsPinnable) {
     return {
-      topRows: [] as Row<TData>[],
-      centerRows: table.getRowModel().rows as Row<TData>[],
-      bottomRows: [] as Row<TData>[],
+      topRows: [] as Row<DataGridFeatures, TData>[],
+      centerRows: table.getRowModel().rows as Row<DataGridFeatures, TData>[],
+      bottomRows: [] as Row<DataGridFeatures, TData>[],
     }
   }
 
   return {
-    topRows: table.getTopRows() as Row<TData>[],
-    centerRows: table.getCenterRows() as Row<TData>[],
-    bottomRows: table.getBottomRows() as Row<TData>[],
+    topRows: table.getTopRows() as Row<DataGridFeatures, TData>[],
+    centerRows: table.getCenterRows() as Row<DataGridFeatures, TData>[],
+    bottomRows: table.getBottomRows() as Row<DataGridFeatures, TData>[],
   }
 }
 
-function getDataGridTableResolvedRows<TData>(
-  table: Table<TData>,
+function getDataGridTableResolvedRows<TData extends object>(
+  table: DataGridTableInstance<TData>,
   rowsPinnable?: boolean
 ) {
   const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(
@@ -300,7 +418,7 @@ function getDataGridTableResolvedRows<TData>(
     rowsPinnable
   )
   const resolvedRows: Array<{
-    row: Row<TData>
+    row: Row<DataGridFeatures, TData>
     pinnedBoundary?: DataGridTablePinnedBoundary
   }> = []
 
@@ -332,26 +450,32 @@ function getDataGridTableResolvedRows<TData>(
   return resolvedRows
 }
 
-function getDataGridTableOrderedVisibleColumns<TData>(table: Table<TData>) {
+function getDataGridTableOrderedVisibleColumns<TData extends object>(
+  table: DataGridTableInstance<TData>
+) {
   return [
-    ...table.getLeftVisibleLeafColumns(),
+    ...table.getStartVisibleLeafColumns(),
     ...table.getCenterVisibleLeafColumns(),
-    ...table.getRightVisibleLeafColumns(),
-  ] as Column<TData>[]
+    ...table.getEndVisibleLeafColumns(),
+  ] as Column<DataGridFeatures, TData, unknown>[]
 }
 
-function getDataGridTableOrderedVisibleCells<TData>(row: Row<TData>) {
+function getDataGridTableOrderedVisibleCells<TData extends object>(
+  row: Row<DataGridFeatures, TData>
+) {
   return [
-    ...row.getLeftVisibleCells(),
+    ...row.getStartVisibleCells(),
     ...row.getCenterVisibleCells(),
-    ...row.getRightVisibleCells(),
-  ] as Cell<TData, unknown>[]
+    ...row.getEndVisibleCells(),
+  ] as Cell<DataGridFeatures, TData, unknown>[]
 }
 
-function getDataGridTableMergedHeaderGroups<TData>(table: Table<TData>) {
-  const leftHeaderGroups = table.getLeftHeaderGroups()
+function getDataGridTableMergedHeaderGroups<TData extends object>(
+  table: DataGridTableInstance<TData>
+) {
+  const leftHeaderGroups = table.getStartHeaderGroups()
   const centerHeaderGroups = table.getCenterHeaderGroups()
-  const rightHeaderGroups = table.getRightHeaderGroups()
+  const rightHeaderGroups = table.getEndHeaderGroups()
   const headerGroupCount = Math.max(
     leftHeaderGroups.length,
     centerHeaderGroups.length,
@@ -372,13 +496,15 @@ function getDataGridTableMergedHeaderGroups<TData>(table: Table<TData>) {
         ...(leftGroup?.headers ?? []),
         ...(centerGroup?.headers ?? []),
         ...(rightGroup?.headers ?? []),
-      ] as Header<TData, unknown>[],
+      ] as Header<DataGridFeatures, TData, unknown>[],
     }
   })
 }
 
-function hasDataGridTableRightPinnedColumns<TData>(table: Table<TData>) {
-  return (table.getState().columnPinning.right?.length ?? 0) > 0
+function hasDataGridTableRightPinnedColumns<TData extends object>(
+  table: DataGridTableInstance<TData>
+) {
+  return (table.state.columnPinning.end?.length ?? 0) > 0
 }
 
 function DataGridTableFillCol() {
@@ -404,7 +530,7 @@ function DataGridTableFillHeadCell() {
       aria-hidden="true"
       data-slot="data-grid-table-fill-head-cell"
       style={{ width: "var(--data-grid-fill-size, 0px)" }}
-      className="p-0"
+      className={cn("p-0", props.tableLayout?.headerBackground && "bg-muted")}
     />
   )
 }
@@ -441,9 +567,9 @@ function DataGridTableFillFootCell() {
 
 function DataGridTableBase({ children }: { children: ReactNode }) {
   const { props, table } = useDataGrid()
-  const leftVisibleColumns = table.getLeftVisibleLeafColumns()
+  const leftVisibleColumns = table.getStartVisibleLeafColumns()
   const centerVisibleColumns = table.getCenterVisibleLeafColumns()
-  const rightVisibleColumns = table.getRightVisibleLeafColumns()
+  const rightVisibleColumns = table.getEndVisibleLeafColumns()
   const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
 
   /**
@@ -465,8 +591,16 @@ function DataGridTableBase({ children }: { children: ReactNode }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     props.tableLayout?.columnsResizable,
+    // Visibility/order/pinning change the flat header set, so a column shown
+    // after mount must get its size variable even though sizing is untouched.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    table.getState().columnSizing,
+    table.state.columnSizing,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.state.columnVisibility,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.state.columnOrder,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    table.state.columnPinning,
   ])
 
   return (
@@ -534,85 +668,76 @@ function DataGridTableViewport({
   viewportRef?: Ref<HTMLDivElement>
   style?: CSSProperties
 }) {
-  const { props, table } = useDataGrid()
-  const didApplyAutoSizeColumnRef = useRef<string | null>(null)
-  const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(
-    null
-  )
-  const [containerWidth, setContainerWidth] = useState(0)
+  const { props, table, autoSize } = useDataGrid()
+  const isColumnsResizable = !!props.tableLayout?.columnsResizable
+  const viewportNodeRef = useRef<HTMLDivElement | null>(null)
+  const fillStateRef = useRef({ containerWidth: 0, appliedFill: -1 })
+  const stopContainerObserverRef = useRef<(() => void) | null>(null)
+
+  // Free space is written as a CSS variable directly on the viewport node
+  // instead of React state, so container resizes and column-size commits
+  // reach the fill column without re-rendering the grid.
+  const syncFillWidth = useCallback(() => {
+    const node = viewportNodeRef.current
+    if (!node) return
+
+    const fillWidth = Math.max(
+      0,
+      fillStateRef.current.containerWidth - table.getTotalSize()
+    )
+
+    if (fillStateRef.current.appliedFill !== fillWidth) {
+      fillStateRef.current.appliedFill = fillWidth
+      node.style.setProperty("--data-grid-fill-size", `${fillWidth}px`)
+    }
+
+    autoSize?.apply(fillWidth)
+  }, [autoSize, table])
+
   const handleViewportRef = useCallback(
     (node: HTMLDivElement | null) => {
-      setViewportElement(node)
+      stopContainerObserverRef.current?.()
+      stopContainerObserverRef.current = null
+      viewportNodeRef.current = node
+      assignRef(viewportRef, node)
 
-      if (props.tableLayout?.columnsResizable && node) {
-        const scrollViewport =
-          (node.closest(
-            '[data-slot="scroll-area-viewport"]'
-          ) as HTMLElement | null) ?? node.parentElement
-        const measurementTarget = scrollViewport ?? node
+      if (!node) return
 
-        setContainerWidth(measurementTarget.clientWidth)
-      } else if (!node) {
-        setContainerWidth(0)
+      if (!isColumnsResizable) {
+        fillStateRef.current.appliedFill = -1
+        node.style.removeProperty("--data-grid-fill-size")
+        return
       }
 
-      assignRef(viewportRef, node)
+      const scrollViewport =
+        getDataGridScrollAreaViewport(node) ?? node.parentElement
+      const measurementTarget = scrollViewport ?? node
+
+      const measure = () => {
+        fillStateRef.current.containerWidth = measurementTarget.clientWidth
+        syncFillWidth()
+      }
+
+      // First measure runs inside the mount commit, before paint, so the fill
+      // column and any meta.autoSize growth land in the first painted frame.
+      measure()
+
+      if (typeof ResizeObserver !== "undefined") {
+        const observer = new ResizeObserver(measure)
+        observer.observe(measurementTarget)
+        stopContainerObserverRef.current = () => observer.disconnect()
+      }
     },
-    [props.tableLayout?.columnsResizable, viewportRef]
+    [isColumnsResizable, syncFillWidth, viewportRef]
   )
-  const fillWidth =
-    props.tableLayout?.columnsResizable && containerWidth > 0
-      ? Math.max(0, containerWidth - table.getTotalSize())
-      : 0
-  const autoSizeColumnId = table
-    .getVisibleLeafColumns()
-    .find(
-      (column) => column.columnDef.meta?.autoSize && column.getCanResize()
-    )?.id
 
+  // Column sizing commits and visibility changes alter the table's total size
+  // without moving the container, so the fill var must re-sync after renders
+  // the ResizeObserver never sees. No-ops when the value is unchanged.
   useLayoutEffect(() => {
-    if (!viewportElement || !props.tableLayout?.columnsResizable) {
-      setContainerWidth(0)
-      return
-    }
-
-    const scrollViewport =
-      (viewportElement.closest(
-        '[data-slot="scroll-area-viewport"]'
-      ) as HTMLElement | null) ?? viewportElement.parentElement
-    const measurementTarget = scrollViewport ?? viewportElement
-
-    const syncContainerWidth = () => {
-      setContainerWidth(measurementTarget.clientWidth)
-    }
-
-    syncContainerWidth()
-
-    if (typeof ResizeObserver === "undefined") return
-
-    const observer = new ResizeObserver(syncContainerWidth)
-    observer.observe(measurementTarget)
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [props.tableLayout?.columnsResizable, viewportElement])
-
-  useLayoutEffect(() => {
-    if (!props.tableLayout?.columnsResizable) return
-    if (!autoSizeColumnId || fillWidth <= 0) return
-    if (didApplyAutoSizeColumnRef.current === autoSizeColumnId) return
-
-    const autoSizeColumn = table.getColumn(autoSizeColumnId)
-    if (!autoSizeColumn) return
-
-    didApplyAutoSizeColumnRef.current = autoSizeColumnId
-    table.setColumnSizing((old) => ({
-      ...old,
-      [autoSizeColumnId]:
-        (old[autoSizeColumnId] ?? autoSizeColumn.getSize()) + fillWidth,
-    }))
-  }, [autoSizeColumnId, fillWidth, props.tableLayout?.columnsResizable, table])
+    if (!isColumnsResizable) return
+    syncFillWidth()
+  })
 
   return (
     <div
@@ -620,17 +745,16 @@ function DataGridTableViewport({
       ref={handleViewportRef}
       className={cn("relative min-w-full align-top", className)}
       style={{
-        ...(props.tableLayout?.columnsResizable
+        ...(isColumnsResizable
           ? {
               width: `calc(${table.getTotalSize()}px + var(--data-grid-fill-size, 0px))`,
-              ["--data-grid-fill-size" as string]: `${fillWidth}px`,
             }
           : undefined),
         ...style,
       }}
     >
       {children}
-      <DataGridTableResizeIndicator viewportElement={viewportElement} />
+      <DataGridTableResizeIndicator viewportNodeRef={viewportNodeRef} />
     </div>
   )
 }
@@ -674,14 +798,14 @@ function DataGridTableHeadRow({
   )
 }
 
-function DataGridTableHeadRowCell<TData>({
+function DataGridTableHeadRowCell<TData extends object>({
   children,
   header,
   dndRef,
   dndStyle,
 }: {
   children: ReactNode
-  header: Header<TData, unknown>
+  header: Header<DataGridFeatures, TData, unknown>
   dndRef?: React.Ref<HTMLTableCellElement>
   dndStyle?: CSSProperties
 }) {
@@ -689,13 +813,12 @@ function DataGridTableHeadRowCell<TData>({
 
   const { column } = header
   const isPinned = column.getIsPinned()
-  const isFirstLeftPinned =
-    isPinned === "left" && column.getIsFirstColumn("left")
-  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left")
-  const isFirstRightPinned =
-    isPinned === "right" && column.getIsFirstColumn("right")
-  const isLastRightPinned =
-    isPinned === "right" && column.getIsLastColumn("right")
+  const isFirstStartPinned =
+    isPinned === "start" && column.getIsFirstColumn("start")
+  const isLastStartPinned =
+    isPinned === "start" && column.getIsLastColumn("start")
+  const isFirstEndPinned = isPinned === "end" && column.getIsFirstColumn("end")
+  const isLastEndPinned = isPinned === "end" && column.getIsLastColumn("end")
   const isLastVisibleColumn =
     column.getIndex() ===
     header.getContext().table.getVisibleLeafColumns().length - 1
@@ -703,9 +826,20 @@ function DataGridTableHeadRowCell<TData>({
     size: props.tableLayout?.dense ? "dense" : "default",
   })
 
+  const sortDirection = column.getIsSorted()
+
   return (
     <th
       ref={dndRef}
+      scope="col"
+      colSpan={header.colSpan > 1 ? header.colSpan : undefined}
+      aria-sort={
+        sortDirection === "asc"
+          ? "ascending"
+          : sortDirection === "desc"
+            ? "descending"
+            : undefined
+      }
       style={{
         ...(props.tableLayout?.width === "fixed" &&
           !props.tableLayout?.columnsResizable && {
@@ -721,10 +855,10 @@ function DataGridTableHeadRowCell<TData>({
       }}
       data-pinned={isPinned || undefined}
       data-outer-pinned-col={
-        isFirstLeftPinned ? "left" : isLastRightPinned ? "right" : undefined
+        isFirstStartPinned ? "start" : isLastEndPinned ? "end" : undefined
       }
       data-last-col={
-        isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined
+        isLastStartPinned ? "start" : isFirstEndPinned ? "end" : undefined
       }
       className={cn(
         "text-foreground relative h-10 text-left align-middle font-medium rtl:text-right [&:has([role=checkbox])]:pe-0",
@@ -742,12 +876,13 @@ function DataGridTableHeadRowCell<TData>({
           column.getCanPin() &&
           cn(
             "data-pinned:bg-muted data-outer-pinned-col:bg-clip-padding data-pinned:isolate",
-            "[&[data-pinned=left][data-last-col=left]]:shadow-[inset_-1px_0_0_0_var(--border)] [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:shadow-[inset_1px_0_0_0_var(--border)]",
-            "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0"
+            "[&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:shadow-[inset_1px_0_0_0_var(--border)] [&[data-pinned=start][data-last-col=start]]:shadow-[inset_-1px_0_0_0_var(--border)]",
+            "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0"
           ),
         header.column.columnDef.meta?.headerClassName,
-        column.getIndex() === 0 ||
-          column.getIndex() === header.headerGroup.headers.length - 1
+        // Edge detection spans the full visible leaf order; the header's own
+        // group only covers one pinning bucket.
+        column.getIndex() === 0 || isLastVisibleColumn
           ? props.tableClassNames?.edgeCell
           : ""
       )}
@@ -757,27 +892,68 @@ function DataGridTableHeadRowCell<TData>({
   )
 }
 
-function DataGridTableHeadRowCellResize<TData>({
+/**
+ * TanStack's own default, restated here on purpose.
+ *
+ * v8 merged each feature's default table options into `table.options`, so
+ * reading `table.options.columnResizeMode` gave you `"onEnd"` even when the
+ * consumer never set it. v9 resolves feature defaults internally and leaves
+ * the option `undefined` on the instance, so the old `?? table.options...`
+ * fallback quietly produced `undefined` - and every grid that had not opted
+ * into a mode explicitly lost the onEnd drag session: no cursor lock, no
+ * vertical indicator, and an immediate commit instead of a deferred one.
+ */
+const DATA_GRID_DEFAULT_COLUMN_RESIZE_MODE = "onEnd" as const
+
+function getDataGridColumnResizeMode(
+  layoutMode: "onChange" | "onEnd" | undefined,
+  tableMode: "onChange" | "onEnd" | undefined
+) {
+  return layoutMode ?? tableMode ?? DATA_GRID_DEFAULT_COLUMN_RESIZE_MODE
+}
+
+function DataGridTableHeadRowCellResize<TData extends object>({
   header,
 }: {
-  header: Header<TData, unknown>
+  header: Header<DataGridFeatures, TData, unknown>
 }) {
-  const { props, table } = useDataGrid()
+  const { props, table } = useDataGrid<TData>()
   const { column } = header
   const isPinned = column.getIsPinned()
   const isLastVisibleColumn =
     column.getIndex() ===
     header.getContext().table.getVisibleLeafColumns().length - 1
   const isResizeModeOnEnd =
-    (props.tableLayout?.columnsResizeMode ?? table.options.columnResizeMode) ===
-    "onEnd"
+    getDataGridColumnResizeMode(
+      props.tableLayout?.columnsResizeMode,
+      table.options.columnResizeMode
+    ) === "onEnd"
+  const stopResizeSessionRef = useRef<(() => void) | undefined>(undefined)
+
+  // End a live drag if the handle unmounts mid-resize so document listeners
+  // and the app-wide col-resize cursor don't outlive the grid.
+  useEffect(() => {
+    return () => {
+      stopResizeSessionRef.current?.()
+      stopResizeSessionRef.current = undefined
+    }
+  }, [])
 
   const handleMouseDown = (event: ReactMouseEvent<HTMLDivElement>) => {
+    // Only the primary button starts a resize; guard before preventDefault so
+    // right-click still opens the context menu.
+    if (event.button !== 0) return
+
     event.preventDefault()
     event.stopPropagation()
 
     if (isResizeModeOnEnd) {
-      startDataGridColumnResizeOnEnd(event, header, table)
+      stopResizeSessionRef.current?.()
+      stopResizeSessionRef.current = startDataGridColumnResizeOnEnd(
+        event,
+        header,
+        table
+      )
       return
     }
 
@@ -789,7 +965,12 @@ function DataGridTableHeadRowCellResize<TData>({
     event.stopPropagation()
 
     if (isResizeModeOnEnd) {
-      startDataGridColumnResizeOnEnd(event, header, table)
+      stopResizeSessionRef.current?.()
+      stopResizeSessionRef.current = startDataGridColumnResizeOnEnd(
+        event,
+        header,
+        table
+      )
       return
     }
 
@@ -807,7 +988,21 @@ function DataGridTableHeadRowCellResize<TData>({
           isLastVisibleColumn
             ? "end-0 w-5 justify-end before:hidden"
             : isPinned
-              ? "end-0 w-5 justify-end before:hidden"
+              ? cn(
+                  // A pinned column is sticky, so the handle sits inside the
+                  // cell instead of straddling the boundary, where the next
+                  // sticky cell would paint over it.
+                  "end-0 w-5 justify-end",
+                  // With the pin affordance on, the pinned edge already draws
+                  // its own separator and a resize line would double it. But
+                  // pinning is also usable purely as an ordering lock, with no
+                  // affordance and no separator -- and there this line is the
+                  // only thing marking the edge, so hiding it left a resizable
+                  // column showing a resize cursor and no indicator at all.
+                  props.tableLayout?.columnsPinnable
+                    ? "before:hidden"
+                    : "before:absolute before:inset-y-0 before:end-0 before:w-px before:bg-border"
+                )
               : "-end-2 w-5 justify-center before:absolute before:inset-y-0 before:w-px before:-translate-x-px before:bg-border",
           column.getIsResizing() &&
             (isResizeModeOnEnd
@@ -822,60 +1017,96 @@ function DataGridTableHeadRowCellResize<TData>({
 }
 
 function DataGridTableResizeIndicator({
-  viewportElement,
+  viewportNodeRef,
 }: {
-  viewportElement: HTMLDivElement | null
+  viewportNodeRef: RefObject<HTMLDivElement | null>
 }) {
   const { props, table } = useDataGrid()
-  const columnSizingInfo = table.getState().columnSizingInfo
-  const resizingColumnId = columnSizingInfo.isResizingColumn
-  const resizeMode =
-    props.tableLayout?.columnsResizeMode ?? table.options.columnResizeMode
+  const indicatorRef = useRef<HTMLDivElement | null>(null)
+  const indicatorHeadRef = useRef<HTMLDivElement | null>(null)
+  // Header height is stable for the duration of a drag; caching it per
+  // session avoids a forced layout (querySelector + getBoundingClientRect)
+  // on every mousemove.
+  const headerHeightCacheRef = useRef<{
+    key: string | false
+    value: number
+  }>({ key: false, value: 0 })
+  const columnResizing = table.state.columnResizing
+  const resizingColumnId = columnResizing.isResizingColumn
+  const resizeMode = getDataGridColumnResizeMode(
+    props.tableLayout?.columnsResizeMode,
+    table.options.columnResizeMode
+  )
+  const isActive = !!(
+    props.tableLayout?.columnsResizable &&
+    resizeMode === "onEnd" &&
+    resizingColumnId
+  )
 
-  if (
-    !props.tableLayout?.columnsResizable ||
-    resizeMode !== "onEnd" ||
-    !resizingColumnId
-  ) {
-    return null
-  }
+  // Positioning happens imperatively after each drag-frame render: layout
+  // reads (viewport rect, thead height) and ref access belong outside render,
+  // and writing styles directly avoids holding the viewport node in React
+  // state, which would cost every grid a second render pass at mount.
+  useLayoutEffect(() => {
+    const indicator = indicatorRef.current
+    const indicatorHead = indicatorHeadRef.current
+    const viewportElement = viewportNodeRef.current
 
-  const resizingHeader = table
-    .getFlatHeaders()
-    .find(
-      (header) =>
-        header.column.id === resizingColumnId || header.id === resizingColumnId
-    )
+    if (!isActive || !indicator || !indicatorHead || !resizingColumnId) return
 
-  if (!resizingHeader) return null
+    const resizingHeader = table
+      .getFlatHeaders()
+      .find(
+        (header) =>
+          header.column.id === resizingColumnId ||
+          header.id === resizingColumnId
+      )
 
-  const deltaOffset = columnSizingInfo.deltaOffset ?? 0
-  const headerHeight =
-    viewportElement
-      ?.querySelector('[data-slot="data-grid-table"] thead')
-      ?.getBoundingClientRect().height ?? 0
-  const indicatorLeft =
-    typeof columnSizingInfo.startOffset === "number" && viewportElement
-      ? columnSizingInfo.startOffset -
-        viewportElement.getBoundingClientRect().left
-      : resizingHeader.getStart() + resizingHeader.getSize()
+    if (!resizingHeader) return
+
+    // deltaOffset is a logical delta (already direction-adjusted); translate
+    // by the physical pointer movement so the indicator follows the cursor
+    // in RTL instead of mirroring it.
+    const directionMultiplier =
+      table.options.columnResizeDirection === "rtl" ? -1 : 1
+    const deltaOffset = (columnResizing.deltaOffset ?? 0) * directionMultiplier
+
+    if (headerHeightCacheRef.current.key !== resizingColumnId) {
+      headerHeightCacheRef.current = {
+        key: resizingColumnId,
+        value:
+          viewportElement
+            ?.querySelector('[data-slot="data-grid-table"] thead')
+            ?.getBoundingClientRect().height ?? 0,
+      }
+    }
+
+    const headerHeight = headerHeightCacheRef.current.value
+    const indicatorLeft =
+      typeof columnResizing.startOffset === "number" && viewportElement
+        ? columnResizing.startOffset -
+          viewportElement.getBoundingClientRect().left
+        : resizingHeader.getStart() + resizingHeader.getSize()
+
+    indicator.style.left = `${indicatorLeft}px`
+    indicator.style.transform = `translateX(${deltaOffset}px)`
+    indicatorHead.style.height = `${Math.max(headerHeight, 6)}px`
+  })
+
+  if (!isActive) return null
 
   return (
     <div
+      ref={indicatorRef}
       aria-hidden="true"
-      className="pointer-events-none absolute inset-y-0 z-20"
-      style={{
-        left: indicatorLeft,
-        transform: `translateX(${deltaOffset}px)`,
-      }}
+      data-slot="data-grid-table-resize-indicator"
+      className="pointer-events-none absolute inset-y-0 z-50"
     >
       <div className="bg-primary/85 absolute inset-y-0 left-0 w-px -translate-x-1/2" />
       <div
+        ref={indicatorHeadRef}
         className="bg-primary rounded-b-sm absolute top-0 left-0 -translate-x-1/2 shadow-xs"
-        style={{
-          width: 5,
-          height: Math.max(headerHeight, 6),
-        }}
+        style={{ width: 5 }}
       />
     </div>
   )
@@ -993,12 +1224,12 @@ function DataGridTableBodyRowSkeleton({ children }: { children: ReactNode }) {
   )
 }
 
-function DataGridTableBodyRowSkeletonCell<TData>({
+function DataGridTableBodyRowSkeletonCell<TData extends object>({
   children,
   column,
 }: {
   children: ReactNode
-  column: Column<TData>
+  column: Column<DataGridFeatures, TData, unknown>
 }) {
   const { props, table } = useDataGrid()
   const bodyCellSpacing = bodyCellSpacingVariants({
@@ -1022,9 +1253,9 @@ function DataGridTableBodyRowSkeletonCell<TData>({
         column.columnDef.meta?.cellClassName,
         props.tableLayout?.columnsPinnable &&
           column.getCanPin() &&
-          "data-pinned:bg-background data-pinned:isolate [&[data-pinned=left][data-last-col=left]]:shadow-[inset_-1px_0_0_0_var(--border)] [&[data-pinned=right][data-last-col=right]]:shadow-[inset_1px_0_0_0_var(--border)]",
+          "data-pinned:bg-background data-pinned:isolate [&[data-pinned=end][data-last-col=end]]:shadow-[inset_1px_0_0_0_var(--border)] [&[data-pinned=start][data-last-col=start]]:shadow-[inset_-1px_0_0_0_var(--border)]",
         column.getIndex() === 0 ||
-          column.getIndex() === table.getVisibleFlatColumns().length - 1
+          column.getIndex() === table.getVisibleLeafColumns().length - 1
           ? props.tableClassNames?.edgeCell
           : ""
       )}
@@ -1034,20 +1265,22 @@ function DataGridTableBodyRowSkeletonCell<TData>({
   )
 }
 
-function DataGridTableBodyRow<TData>({
+function DataGridTableBodyRow<TData extends object>({
   children,
   row,
   pinnedBoundary,
   rowRef,
   dndRef,
   dndStyle,
+  dataIndex,
 }: {
   children: ReactNode
-  row: Row<TData>
+  row: Row<DataGridFeatures, TData>
   pinnedBoundary?: DataGridTablePinnedBoundary
   rowRef?: React.Ref<HTMLTableRowElement>
   dndRef?: React.Ref<HTMLTableRowElement>
   dndStyle?: CSSProperties
+  dataIndex?: number
 }) {
   const { props, table } = useDataGrid()
   const isRowPinned = row.getIsPinned()
@@ -1067,6 +1300,9 @@ function DataGridTableBodyRow<TData>({
           ? "selected"
           : undefined
       }
+      data-index={dataIndex}
+      data-row-id={row.id}
+      data-depth={row.depth || undefined}
       data-row-pinned={isRowPinned || undefined}
       data-row-pinned-boundary={pinnedBoundary}
       onClick={() => props.onRowClick && props.onRowClick(row.original)}
@@ -1078,15 +1314,23 @@ function DataGridTableBodyRow<TData>({
           bodyRowBottomBorderClasses,
         props.tableLayout?.cellBorder &&
           `*:last:border-e-0 ${bodyRowBottomBorderClasses}`,
+        // Virtualized rows stripe by absolute row index (CSS :nth-child
+        // parity flips as spacer rows resize while scrolling).
         props.tableLayout?.stripped &&
-          "odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent",
+          (typeof dataIndex === "number"
+            ? cn(
+                "hover:bg-transparent",
+                dataIndex % 2 === 0 && "bg-muted/90 hover:bg-muted"
+              )
+            : "odd:bg-muted/90 odd:hover:bg-muted hover:bg-transparent"),
         table.options.enableRowSelection && "*:first:relative",
         props.tableLayout?.rowsPinnable &&
           isRowPinned &&
           "bg-muted/30 hover:bg-muted/50",
-        pinnedBoundary === "top" && "[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)]",
+        pinnedBoundary === "top" &&
+          "[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)] dark:[&>td]:shadow-[0_2px_0_rgba(255,255,255,0.06)]",
         pinnedBoundary === "bottom" &&
-          "[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)]",
+          "[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)] dark:[&>td]:shadow-[0_2px_0_rgba(255,255,255,0.06)]",
         props.tableClassNames?.bodyRow
       )}
     >
@@ -1095,8 +1339,22 @@ function DataGridTableBodyRow<TData>({
   )
 }
 
-function DataGridTableBodyRowExpandded<TData>({ row }: { row: Row<TData> }) {
+function DataGridTableBodyRowExpandded<TData extends object>({
+  row,
+}: {
+  row: Row<DataGridFeatures, TData>
+}) {
   const { props, table } = useDataGrid()
+  const expandedContent = table
+    .getAllColumns()
+    .find((column) => column.columnDef.meta?.expandedContent)?.columnDef
+    .meta?.expandedContent
+
+  // Tree and grouped rows share row.getIsExpanded() with detail expansion.
+  // Without a detail column there is nothing to render, and an empty <tr>
+  // would break striping parity, rowBorder, and virtual row measurement.
+  if (!expandedContent) return null
+
   const bodyRowBottomBorderClasses =
     "[&:not(:last-child)>td]:border-b [tbody:has(+tfoot)_&:last-child>td]:border-b [*:has(>[data-slot=data-grid]+[data-slot=data-grid-pagination])_[data-slot=data-grid]_&:last-child>td]:border-b"
 
@@ -1110,23 +1368,20 @@ function DataGridTableBodyRowExpandded<TData>({ row }: { row: Row<TData> }) {
           (props.tableLayout?.columnsResizable ? 1 : 0)
         }
       >
-        {table
-          .getAllColumns()
-          .find((column) => column.columnDef.meta?.expandedContent)
-          ?.columnDef.meta?.expandedContent?.(row.original)}
+        {expandedContent(row.original)}
       </td>
     </tr>
   )
 }
 
-function DataGridTableBodyRowCell<TData>({
+function DataGridTableBodyRowCell<TData extends object>({
   children,
   cell,
   dndRef,
   dndStyle,
 }: {
   children: ReactNode
-  cell: Cell<TData, unknown>
+  cell: Cell<DataGridFeatures, TData, unknown>
   dndRef?: React.Ref<HTMLTableCellElement>
   dndStyle?: CSSProperties
 }) {
@@ -1134,9 +1389,9 @@ function DataGridTableBodyRowCell<TData>({
 
   const { column, row } = cell
   const isPinned = column.getIsPinned()
-  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left")
-  const isFirstRightPinned =
-    isPinned === "right" && column.getIsFirstColumn("right")
+  const isLastStartPinned =
+    isPinned === "start" && column.getIsLastColumn("start")
+  const isFirstEndPinned = isPinned === "end" && column.getIsFirstColumn("end")
   const bodyCellSpacing = bodyCellSpacingVariants({
     size: props.tableLayout?.dense ? "dense" : "default",
   })
@@ -1155,7 +1410,7 @@ function DataGridTableBodyRowCell<TData>({
       }}
       data-pinned={isPinned || undefined}
       data-last-col={
-        isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined
+        isLastStartPinned ? "start" : isFirstEndPinned ? "end" : undefined
       }
       className={cn(
         "align-middle",
@@ -1169,8 +1424,8 @@ function DataGridTableBodyRowCell<TData>({
           column.getCanPin() &&
           cn(
             "data-pinned:bg-background data-pinned:isolate",
-            "[&[data-pinned=left][data-last-col=left]]:shadow-[inset_-1px_0_0_0_var(--border)]",
-            "[&[data-pinned=right][data-last-col=right]]:shadow-[inset_1px_0_0_0_var(--border)]"
+            "[&[data-pinned=start][data-last-col=start]]:shadow-[inset_-1px_0_0_0_var(--border)]",
+            "[&[data-pinned=end][data-last-col=end]]:shadow-[inset_1px_0_0_0_var(--border)]"
           ),
         column.getIndex() === 0 ||
           column.getIndex() === row.getVisibleCells().length - 1
@@ -1183,19 +1438,22 @@ function DataGridTableBodyRowCell<TData>({
   )
 }
 
-function DataGridTableRenderedRow<TData>({
+function DataGridTableRenderedRow<TData extends object>({
   row,
   pinnedBoundary,
   rowRef,
+  rowIndex,
 }: {
-  row: Row<TData>
+  row: Row<DataGridFeatures, TData>
   pinnedBoundary?: DataGridTablePinnedBoundary
   rowRef?: React.Ref<HTMLTableRowElement>
+  /** Virtualized list index, rendered as data-index for measureElement. */
+  rowIndex?: number
 }) {
   const { props, table } = useDataGrid()
-  const leftVisibleCells = row.getLeftVisibleCells()
+  const startVisibleCells = row.getStartVisibleCells()
   const centerVisibleCells = row.getCenterVisibleCells()
-  const rightVisibleCells = row.getRightVisibleCells()
+  const endVisibleCells = row.getEndVisibleCells()
   const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
 
   return (
@@ -1204,9 +1462,10 @@ function DataGridTableRenderedRow<TData>({
         row={row}
         pinnedBoundary={pinnedBoundary}
         rowRef={rowRef}
+        dataIndex={rowIndex}
       >
-        {[...leftVisibleCells, ...centerVisibleCells].map(
-          (cell: Cell<TData, unknown>) => (
+        {[...startVisibleCells, ...centerVisibleCells].map(
+          (cell: Cell<DataGridFeatures, TData, unknown>) => (
             <DataGridTableBodyRowCell cell={cell} key={cell.id}>
               {flexRender(cell.column.columnDef.cell, cell.getContext())}
             </DataGridTableBodyRowCell>
@@ -1215,7 +1474,7 @@ function DataGridTableRenderedRow<TData>({
         {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? (
           <DataGridTableFillBodyCell />
         ) : null}
-        {rightVisibleCells.map((cell: Cell<TData, unknown>) => (
+        {endVisibleCells.map((cell: Cell<DataGridFeatures, TData, unknown>) => (
           <DataGridTableBodyRowCell cell={cell} key={cell.id}>
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
           </DataGridTableBodyRowCell>
@@ -1241,7 +1500,7 @@ function DataGridTableEmpty() {
         colSpan={Math.max(visibleColumnCount, 1)}
         className="text-muted-foreground py-6 text-center text-sm"
       >
-        {props.emptyMessage || "Нет данных"}
+        {props.emptyMessage || "No data available"}
       </td>
     </tr>
   )
@@ -1254,20 +1513,27 @@ function DataGridTableLoader() {
     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
       <div className="text-muted-foreground bg-card rounded-lg flex items-center gap-2 border px-4 py-2 text-sm leading-none font-medium">
         <Spinner className="size-5 opacity-60" />
-        {props.loadingMessage || "Загрузка…"}
+        {props.loadingMessage || "Loading..."}
       </div>
     </div>
   )
 }
 
-function DataGridTableRowPin<TData>({ row }: { row: Row<TData> }) {
+function DataGridTableRowPin<TData extends object>({
+  row,
+}: {
+  row: Row<DataGridFeatures, TData>
+}) {
   const isPinned = row.getIsPinned()
 
   return (
     <button
       type="button"
-      aria-label={isPinned ? "Открепить строку" : "Закрепить строку"}
-      onClick={() => {
+      aria-label={isPinned ? "Unpin row" : "Pin row"}
+      onClick={(event) => {
+        // Pinning must not bubble into the row's onRowClick handler.
+        event.stopPropagation()
+
         if (isPinned) {
           row.pin(false)
         } else {
@@ -1310,51 +1576,164 @@ function DataGridTableRowPin<TData>({ row }: { row: Row<TData> }) {
   )
 }
 
-function DataGridTableRowSelect<TData>({ row }: { row: Row<TData> }) {
+/**
+ * Selection cell.
+ *
+ * The `Subscribe` wrapper is the v9 fix for React Compiler, and it is why this
+ * file no longer needs `"use no memo"`. `useTable` hands back a fresh table on
+ * every state change, which covers anything read through `table`, but this
+ * component reads selection through `row.getIsSelected()` - a builder call
+ * that hides its state dependency from the compiler. Rendered inside a column
+ * `cell` template it receives a *stable* row, so the compiler is free to
+ * memoize this JSX and never re-run those reads, which shows up as checkboxes
+ * that do not respond to clicks.
+ *
+ * Subscribing to the row-selection atom gives the compiler a dependency it can
+ * see. Note the standalone `Subscribe` rather than `table.Subscribe`: inside a
+ * cell template the `table` handed to the column def is the core `Table`, which
+ * has no `Subscribe` attached.
+ */
+function DataGridTableRowSelect<TData extends object>({
+  row,
+}: {
+  row: Row<DataGridFeatures, TData>
+}) {
   return (
-    <>
-      <div
-        className={cn(
-          "bg-primary absolute inset-s-0 top-0 bottom-0 hidden w-[2px]",
-          row.getIsSelected() && "block"
-        )}
-      ></div>
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Выбрать строку"
-        className="align-[inherit]"
-      />
-    </>
+    <Subscribe source={row.table.atoms.rowSelection}>
+      {() => (
+        <>
+          <div
+            className={cn(
+              "bg-primary absolute inset-s-0 top-0 bottom-0 hidden w-[2px]",
+              row.getIsSelected() && "block"
+            )}
+          ></div>
+          <Checkbox
+            checked={row.getIsSelected()}
+            indeterminate={row.getIsSomeSelected() && !row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            onClick={(event) => {
+              // Selection must not bubble into the row's onRowClick handler.
+              event.stopPropagation()
+            }}
+            aria-label="Select row"
+            className="align-[inherit]"
+          />
+        </>
+      )}
+    </Subscribe>
   )
 }
 
 function DataGridTableRowSelectAll() {
   const { table, recordCount, isLoading } = useDataGrid()
 
-  const isAllSelected = table.getIsAllPageRowsSelected()
-  const isSomeSelected = table.getIsSomePageRowsSelected()
-
+  // `getIsSomePageRowsSelected()` means "at least one" in v9, where v8 meant
+  // "some but not all", so the all-selected case has to be excluded explicitly
+  // or the header checkbox stays indeterminate once every row is checked.
   return (
-    <Checkbox
-      checked={isAllSelected}
-      indeterminate={isSomeSelected && !isAllSelected}
-      disabled={isLoading || recordCount === 0}
-      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-      aria-label="Выбрать все"
-      className="align-[inherit]"
-    />
+    <Subscribe source={table.atoms.rowSelection}>
+      {() => {
+        const isAllSelected = table.getIsAllPageRowsSelected()
+        const isSomeSelected = table.getIsSomePageRowsSelected()
+
+        return (
+          <Checkbox
+            checked={isAllSelected}
+            indeterminate={isSomeSelected && !isAllSelected}
+            disabled={isLoading || recordCount === 0}
+            onCheckedChange={(value) =>
+              table.toggleAllPageRowsSelected(!!value)
+            }
+            aria-label="Select all"
+            className="align-[inherit]"
+          />
+        )
+      }}
+    </Subscribe>
   )
 }
 
-function DataGridTableBodyRows<TData>({ table }: { table: Table<TData> }) {
+function DataGridTableRowExpand<TData extends object>({
+  row,
+  indent = 20,
+  className,
+  children,
+}: {
+  row: Row<DataGridFeatures, TData>
+  /** Horizontal offset in px applied per tree depth level. */
+  indent?: number
+  className?: string
+  /** Custom toggle icon; replaces the default chevron. */
+  children?: ReactNode
+}) {
+  const { props } = useDataGrid()
+  const isExpanded = row.getIsExpanded()
+  const controlSize = props.tableLayout?.dense ? "size-6" : "size-7"
+
+  return (
+    <span
+      data-slot="data-grid-table-row-expand"
+      style={getDataGridTreeIndentStyle(row, indent)}
+      className={cn(
+        "inline-flex shrink-0 items-center ps-(--data-grid-tree-padding) align-middle",
+        className
+      )}
+    >
+      {row.getCanExpand() ? (
+        <button
+          type="button"
+          aria-expanded={isExpanded}
+          aria-label={isExpanded ? "Collapse row" : "Expand row"}
+          onClick={(event) => {
+            // Expansion must not bubble into the row's onRowClick handler.
+            event.stopPropagation()
+            row.toggleExpanded()
+          }}
+          className={cn(
+            "text-muted-foreground hover:text-foreground rounded-lg inline-flex items-center justify-center transition-colors",
+            controlSize
+          )}
+        >
+          {children ?? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+              className="transition-transform duration-200 in-aria-[expanded=false]:-rotate-90 rtl:in-aria-[expanded=false]:rotate-90"
+            >
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          )}
+        </button>
+      ) : (
+        // Leaf spacer: compact by design so leaf content sits near the
+        // parent label instead of a full toggle width deeper.
+        <span aria-hidden="true" className="w-2 shrink-0" />
+      )}
+    </span>
+  )
+}
+
+function DataGridTableBodyRows<TData extends object>({
+  table,
+}: {
+  table: DataGridTableInstance<TData>
+}) {
   const { isLoading, props } = useDataGrid()
-  const pagination = table.getState().pagination
+  const pagination = table.state.pagination
 
   if (isLoading && props.loadingMode === "skeleton" && pagination?.pageSize) {
-    const leftVisibleColumns = table.getLeftVisibleLeafColumns()
+    const leftVisibleColumns = table.getStartVisibleLeafColumns()
     const centerVisibleColumns = table.getCenterVisibleLeafColumns()
-    const rightVisibleColumns = table.getRightVisibleLeafColumns()
+    const rightVisibleColumns = table.getEndVisibleLeafColumns()
     const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
 
     return (
@@ -1386,7 +1765,13 @@ function DataGridTableBodyRows<TData>({ table }: { table: Table<TData> }) {
   if (isLoading && props.loadingMode === "spinner") {
     return (
       <tr>
-        <td colSpan={table.getVisibleFlatColumns().length} className="p-8">
+        <td
+          colSpan={
+            table.getVisibleFlatColumns().length +
+            (props.tableLayout?.columnsResizable ? 1 : 0)
+          }
+          className="p-8"
+        >
           <div className="flex items-center justify-center">
             <svg
               className="text-muted-foreground mr-3 -ml-1 h-5 w-5 animate-spin"
@@ -1408,7 +1793,7 @@ function DataGridTableBodyRows<TData>({ table }: { table: Table<TData> }) {
                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
               ></path>
             </svg>
-            {props.loadingMessage || "Загрузка…"}
+            {props.loadingMessage || "Loading..."}
           </div>
         </td>
       </tr>
@@ -1442,10 +1827,10 @@ function DataGridTableBodyRows<TData>({ table }: { table: Table<TData> }) {
  */
 const MemoizedDataGridTableBodyRows = memo(
   DataGridTableBodyRows,
-  (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn
+  (_prev, next) => !!next.table.state.columnResizing.isResizingColumn
 ) as typeof DataGridTableBodyRows
 
-function DataGridTableHeader<TData>() {
+function DataGridTableHeader<TData extends object>() {
   const { table, props } = useDataGrid()
   const mergedHeaderGroups = getDataGridTableMergedHeaderGroups(table)
   const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
@@ -1458,7 +1843,7 @@ function DataGridTableHeader<TData>() {
             return (
               <DataGridTableHeadRow key={headerGroup.id} rowId={headerGroup.id}>
                 {headerGroup.headers
-                  .filter((header) => header.column.getIsPinned() !== "right")
+                  .filter((header) => header.column.getIsPinned() !== "end")
                   .map((header) => {
                     const { column } = header
 
@@ -1482,7 +1867,7 @@ function DataGridTableHeader<TData>() {
                   <DataGridTableFillHeadCell />
                 ) : null}
                 {headerGroup.headers
-                  .filter((header) => header.column.getIsPinned() === "right")
+                  .filter((header) => header.column.getIsPinned() === "end")
                   .map((header) => {
                     const { column } = header
 
@@ -1514,7 +1899,7 @@ function DataGridTableHeader<TData>() {
   )
 }
 
-function DataGridTable<TData>({
+function DataGridTable<TData extends object>({
   footerContent,
   renderHeader = true,
 }: {
@@ -1537,7 +1922,7 @@ function DataGridTable<TData>({
                   rowId={headerGroup.id}
                 >
                   {headerGroup.headers
-                    .filter((header) => header.column.getIsPinned() !== "right")
+                    .filter((header) => header.column.getIsPinned() !== "end")
                     .map((header) => {
                       const { column } = header
 
@@ -1564,7 +1949,7 @@ function DataGridTable<TData>({
                     <DataGridTableFillHeadCell />
                   ) : null}
                   {headerGroup.headers
-                    .filter((header) => header.column.getIsPinned() === "right")
+                    .filter((header) => header.column.getIsPinned() === "end")
                     .map((header) => {
                       const { column } = header
 
@@ -1635,15 +2020,18 @@ export {
   DataGridTableHeadRowCell,
   DataGridTableHeadRowCellResize,
   DataGridTableLoader,
+  DataGridTableRowExpand,
   DataGridTableRowPin,
   DataGridTableRowSelect,
   DataGridTableRowSelectAll,
   DataGridTableRowSpacer,
   DataGridTableViewport,
+  getDataGridScrollAreaViewport,
   getDataGridTableMergedHeaderGroups,
   getPinningStyles,
   getDataGridTableResolvedRows,
   getDataGridTableRowSections,
+  getDataGridTreeIndentStyle,
   hasDataGridTableRightPinnedColumns,
 }
 
diff --git a/apps/web/src/components/reui/data-grid/data-grid.tsx b/apps/web/src/components/reui/data-grid/data-grid.tsx
index 6f41182..a6186e0 100644
--- a/apps/web/src/components/reui/data-grid/data-grid.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid.tsx
@@ -1,31 +1,153 @@
-"use client"
-
-import { createContext, ReactNode, useContext, useMemo } from "react"
+import { createContext, useContext, useEffect, useMemo, useRef } from "react"
+import type { ReactNode } from "react"
 import {
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createExpandedRowModel,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  globalFilteringFeature,
+  metaHelper,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowPinningFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_alphanumericCaseSensitive,
+  sortFn_basic,
+  sortFn_datetime,
+  sortFn_text,
+  sortFn_textCaseSensitive,
+  tableFeatures,
+} from "@tanstack/react-table"
+import type {
   Column,
   ColumnFiltersState,
+  ReactTable,
   RowData,
   SortingState,
   Table,
+  TableFeatures,
 } from "@tanstack/react-table"
 
 import { cn } from "@evobgp/ui/lib/utils"
 
-declare module "@tanstack/react-table" {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface ColumnMeta<TData extends RowData, TValue> {
-    headerTitle?: string
-    headerClassName?: string
-    cellClassName?: string
-    skeleton?: ReactNode
-    expandedContent?: (row: TData) => ReactNode
-    autoSize?: boolean
-  }
+/**
+ * Per-column extras the grid reads off `columnDef.meta`.
+ *
+ * TanStack v9 resolves this through the `columnMeta` slot on the feature
+ * bundle below instead of a global `declare module` augmentation, so
+ * installing the data grid no longer widens `ColumnMeta` for every other
+ * table in the consuming app.
+ */
+export interface DataGridColumnMeta<TData> {
+  headerTitle?: string
+  headerClassName?: string
+  cellClassName?: string
+  skeleton?: ReactNode
+  expandedContent?: (row: TData) => ReactNode
+  autoSize?: boolean
 }
 
+/**
+ * The batteries-included feature bundle every ReUI data-grid example builds
+ * on. v9 requires each table to declare its features up front, and the grid's
+ * render path needs the ones registered here: `columnVisibilityFeature` alone
+ * gates `row.getVisibleCells()`, so even a grid that never hides a column
+ * needs it to render at all.
+ *
+ * Pass it straight through for the full grid:
+ *
+ * ```tsx
+ * const table = useTable({ features: dataGridFeatures, columns, data })
+ * ```
+ *
+ * Extend it when a grid needs more, keeping each prerequisite feature ahead of
+ * the slot that depends on it:
+ *
+ * ```tsx
+ * const features = tableFeatures({
+ *   ...dataGridFeatures,
+ *   columnGroupingFeature,
+ *   groupedRowModel: createGroupedRowModel(),
+ * })
+ * ```
+ *
+ * Or drop it entirely and hand `<DataGrid>` a leaner table - the components
+ * accept any bundle, so you keep full ownership of the TanStack core.
+ */
+export const dataGridFeatures = tableFeatures({
+  columnVisibilityFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  // columnResizingFeature requires columnSizingFeature, declared above.
+  columnResizingFeature,
+  columnFilteringFeature,
+  // Powers DataGridColumnFilter's column.getFacetedUniqueValues(). On v8 an
+  // unregistered facet silently returned an empty map; on v9 the method would
+  // not exist at all, so the faceted row models below are required, not
+  // optional.
+  columnFacetingFeature,
+  // globalFilteringFeature requires columnFilteringFeature, declared above.
+  globalFilteringFeature,
+  rowSortingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowExpandingFeature,
+  rowPinningFeature,
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  // Every built-in v9 ships. A string `sortFn` resolves against this map
+  // alone, and `sortFn: "auto"` infers a name ("alphanumeric", "text" or
+  // "datetime") from the first row's value - so a partial map makes auto
+  // sorting warn and silently fall back on ordinary string columns.
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
+    basic: sortFn_basic,
+    datetime: sortFn_datetime,
+    text: sortFn_text,
+    textCaseSensitive: sortFn_textCaseSensitive,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columnMeta: metaHelper<DataGridColumnMeta<any>>(),
+})
+
+/** The feature set `dataGridFeatures` registers. */
+export type DataGridFeatures = typeof dataGridFeatures
+
+/**
+ * The grid's internal view of the table.
+ *
+ * `TFeatures` is invariant in v9 and an unresolved generic one collapses to a
+ * union that includes the bare core arm, so no generic signature can call
+ * `getVisibleCells()`, `getStartVisibleLeafColumns()` and friends. The public
+ * components stay generic so consumers can pass any bundle they like; the
+ * table is widened to this concrete type exactly once, on the way into
+ * context, and every internal component reads it from there.
+ */
+export type DataGridTableInstance<TData extends object> = ReactTable<
+  DataGridFeatures,
+  TData
+>
+
 /** Label for headers / column visibility: `meta.headerTitle`, string `columnDef.header`, or `column.id`. */
-export function getColumnHeaderLabel<TData, TValue>(
-  column: Column<TData, TValue>
+export function getColumnHeaderLabel<TData extends RowData, TValue>(
+  column: Column<DataGridFeatures, TData, TValue>
 ): string {
   const meta = column.columnDef.meta as { headerTitle?: string } | undefined
   if (typeof meta?.headerTitle === "string") return meta.headerTitle
@@ -51,11 +173,115 @@ export type DataGridApiResponse<T> = {
   }
 }
 
+/**
+ * Everything `<DataGrid>` accepts except the two props the provider consumes
+ * itself. Kept feature-agnostic: layout and messaging never depend on which
+ * TanStack features the consumer registered.
+ */
+export type DataGridLayoutProps<TData extends object> = Omit<
+  DataGridProps<TableFeatures, TData>,
+  "table" | "children"
+>
+
 export interface DataGridContextProps<TData extends object> {
-  props: DataGridProps<TData>
-  table: Table<TData>
+  props: DataGridLayoutProps<TData>
+  table: DataGridTableInstance<TData>
   recordCount: number
   isLoading: boolean
+  /**
+   * Internal coordinator for `meta.autoSize` columns. Lives at the core level
+   * so every table variant and viewport instance shares one application state.
+   */
+  autoSize?: DataGridAutoSizeController
+}
+
+export type DataGridAutoSizeController = {
+  /**
+   * Grows the first visible `meta.autoSize` column by the given free space.
+   * Applies at most once per column id; safe to call from every viewport
+   * measurement. Returns true when a sizing update was dispatched.
+   */
+  apply: (fillWidth: number) => boolean
+}
+
+function createDataGridAutoSizeController<TData extends object>(
+  /**
+   * A getter, not the table itself.
+   *
+   * v8 handed back one stable table whose state mutated in place, so a
+   * controller could close over it. v9 returns a NEW table wrapper on every
+   * state change, and a captured one keeps reporting the state it was built
+   * with - here that meant `columnSizing` looked permanently empty, the
+   * applied-once guard re-armed on every measurement, and the fill overwrote
+   * whatever width the user had just dragged the column to.
+   */
+  getTable: () => DataGridTableInstance<TData>
+): DataGridAutoSizeController {
+  let applied: { columnId: string; base: number; grown: number } | null = null
+
+  return {
+    apply(fillWidth: number) {
+      const table = getTable()
+      const columnSizing = table.state.columnSizing
+
+      // Re-arm after reset flows (double-click resetSize, resetColumnSizing,
+      // controlled state replacement) so the column re-fills instead of
+      // leaving a dead blank strip.
+      if (applied && columnSizing[applied.columnId] === undefined) {
+        applied = null
+      }
+
+      if (fillWidth <= 0) return false
+
+      const autoSizeColumn = table
+        .getVisibleLeafColumns()
+        .find(
+          (column) => column.columnDef.meta?.autoSize && column.getCanResize()
+        )
+
+      if (!autoSizeColumn || applied?.columnId === autoSizeColumn.id) {
+        return false
+      }
+
+      // A width this coordinator did not write belongs to someone else -
+      // almost always the user, who just dragged the column's resize handle.
+      // Filling over it is what made a `meta.autoSize` column look
+      // un-resizable: the drag committed, the next viewport measurement
+      // stamped the fill back on top, and the column snapped to its old width.
+      //
+      // Deliberately keyed on observed state rather than on `applied`, which
+      // is per-coordinator memory: anything that rebuilds the coordinator
+      // (a remount, a new table store) forgets what it did, and the guard has
+      // to survive that. An explicit reset clears the entry and re-arms the
+      // fill, which is what makes double-click-to-reset still work.
+      const currentSize = columnSizing[autoSizeColumn.id]
+      if (currentSize !== undefined && currentSize !== applied?.grown) {
+        return false
+      }
+
+      // Candidate switched (e.g. the grown column was hidden and another
+      // meta.autoSize column took over): revert the previous growth if the
+      // user hasn't manually resized that column since, so visibility
+      // toggles cannot ratchet the table wider than its container forever.
+      const revert =
+        applied && columnSizing[applied.columnId] === applied.grown
+          ? applied
+          : null
+      const base = columnSizing[autoSizeColumn.id] ?? autoSizeColumn.getSize()
+      const grown = base + fillWidth
+
+      applied = { columnId: autoSizeColumn.id, base, grown }
+      table.setColumnSizing((old) => {
+        const next = { ...old, [autoSizeColumn.id]: grown }
+        if (revert && next[revert.columnId] === revert.grown) {
+          next[revert.columnId] = revert.base
+        }
+        return next
+      })
+
+      return true
+    },
+  }
 }
 
 export type DataGridRequestParams = {
@@ -65,9 +291,12 @@ export type DataGridRequestParams = {
   columnFilters?: ColumnFiltersState
 }
 
-export interface DataGridProps<TData extends object> {
+export interface DataGridProps<
+  TFeatures extends TableFeatures,
+  TData extends object,
+> {
   className?: string
-  table?: Table<TData>
+  table?: Table<TFeatures, TData>
   recordCount: number
   children?: ReactNode
   onRowClick?: (row: TData) => void
@@ -114,8 +343,19 @@ const DataGridContext = createContext<
   DataGridContextProps<any> | undefined
 >(undefined)
 
-function useDataGrid() {
-  const context = useContext(DataGridContext)
+/**
+ * Reads the grid context. Pass `TData` from the calling component when the
+ * table, a row or a cell is handed on to something typed against that row
+ * shape: v9 declares `TData` invariant, so the default `any` no longer
+ * unifies with a concrete row type the way it did on v8.
+ */
+function useDataGrid<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TData extends object = any,
+>(): DataGridContextProps<TData> {
+  const context = useContext(DataGridContext) as
+    | DataGridContextProps<TData>
+    | undefined
   if (!context) {
     throw new Error("useDataGrid must be used within a DataGridProvider")
   }
@@ -126,38 +366,77 @@ function DataGridProvider<TData extends object>({
   children,
   table,
   ...props
-}: DataGridProps<TData> & { table: Table<TData> }) {
-  const tableState = table.getState()
-  const resolvedColumnsResizeMode =
-    props.tableLayout?.columnsResizeMode ?? "onEnd"
+}: DataGridLayoutProps<TData> & {
+  table: DataGridTableInstance<TData>
+  children?: ReactNode
+}) {
+  // Latest-props ref: context reads always resolve fresh props through the
+  // getter below without the memoized context value depending on unstable
+  // ReactNode/function prop identities (inline emptyMessage/onRowClick would
+  // otherwise publish a new context value on every consumer render - at
+  // mousemove rate during a resize drag, piercing the body-rows memo).
+  const propsRef = useRef(props)
+  propsRef.current = props
 
-  // Keep resize mode aligned with the DataGrid contract every render so
-  // consumer-level useReactTable options cannot flip it back between drags.
-  if (props.tableLayout?.columnsResizable) {
-    table.options.columnResizeMode = resolvedColumnsResizeMode
-  }
+  // Same treatment for the table itself, which v9 - unlike v8 - re-creates on
+  // every state change. Depending on it directly would republish the context
+  // on each resize tick, which is exactly what the memo below exists to
+  // prevent; the getter still hands every consumer the current instance.
+  const tableRef = useRef(table)
+  tableRef.current = table
+
+  // Re-assert an explicit tableLayout resize mode so consumer-level useTable
+  // options cannot flip it back between drags. v9 makes `table.options`
+  // readonly, so this goes through setOptions in an effect rather than a
+  // render-phase mutation. Without an explicit mode, the consumer's own
+  // tanstack columnResizeMode (default "onEnd") is honored.
+  const resizeMode =
+    props.tableLayout?.columnsResizable && props.tableLayout.columnsResizeMode
+      ? props.tableLayout.columnsResizeMode
+      : undefined
+
+  useEffect(() => {
+    if (!resizeMode) return
+    if (table.options.columnResizeMode === resizeMode) return
+    table.setOptions((old) => ({ ...old, columnResizeMode: resizeMode }))
+  }, [table, resizeMode])
+
+  // One autoSize coordinator per table instance so split header/body viewports
+  // cannot apply the growth twice. Keyed on `table.store`, which v9 keeps
+  // stable for the life of the table, rather than on `table` itself: the
+  // wrapper is re-created on every state change, and re-creating the
+  // controller with it would reset its applied-once bookkeeping mid-drag.
+  const autoSize = useMemo(
+    () => createDataGridAutoSizeController(() => tableRef.current),
+    [table.store]
+  )
+
+  const tableState = table.state
 
   // Memoize context value so consumers don't re-render during column resize.
   // Column sizing state is intentionally excluded from deps -- CSS variables
   // on the <table> element handle width updates without React re-renders.
+  // ReactNode/function props (messages, onRowClick) are also excluded: they
+  // are served fresh through the props getter, so unstable inline identities
+  // cannot invalidate the context value.
   const value = useMemo(
     () => ({
-      props,
-      table,
+      get props() {
+        return propsRef.current
+      },
+      get table() {
+        return tableRef.current
+      },
       recordCount: props.recordCount,
       isLoading: props.isLoading || false,
+      autoSize,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      table,
+      autoSize,
       props.recordCount,
       props.isLoading,
       props.loadingMode,
-      props.loadingMessage,
-      props.fetchingMoreMessage,
-      props.allRowsLoadedMessage,
-      props.emptyMessage,
-      props.onRowClick,
       props.className,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       JSON.stringify(props.tableLayout),
@@ -167,6 +446,7 @@ function DataGridProvider<TData extends object>({
       tableState.pagination,
       tableState.columnFilters,
       tableState.rowSelection,
+      tableState.rowPinning,
       tableState.expanded,
       tableState.columnVisibility,
       tableState.columnOrder,
@@ -176,18 +456,24 @@ function DataGridProvider<TData extends object>({
   )
 
   return (
-    <DataGridContext.Provider value={value}>
+    // One React context serves every TData, but v9 declares both TFeatures and
+    // TData invariant, so a `DataGridContextProps<any>` context cannot accept a
+    // `DataGridContextProps<TData>` value structurally. The erasure happens
+    // here and is undone by the TData generic on each consumer component.
+    <DataGridContext.Provider
+      value={value as unknown as DataGridContextProps<TData>}
+    >
       {children}
     </DataGridContext.Provider>
   )
 }
 
-function DataGrid<TData extends object>({
+function DataGrid<TFeatures extends TableFeatures, TData extends object>({
   children,
   table,
   ...props
-}: DataGridProps<TData>) {
-  const defaultProps: Partial<DataGridProps<TData>> = {
+}: DataGridProps<TFeatures, TData>) {
+  const defaultProps: Partial<DataGridProps<TFeatures, TData>> = {
     loadingMode: "skeleton",
     tableLayout: {
       dense: false,
@@ -202,7 +488,8 @@ function DataGrid<TData extends object>({
       width: "fixed",
       columnsVisibility: false,
       columnsResizable: false,
-      columnsResizeMode: "onEnd",
+      // columnsResizeMode has no default on purpose: when unset, the
+      // consumer's tanstack columnResizeMode (default "onEnd") is honored.
       columnsPinnable: false,
       columnsMovable: false,
       columnsDraggable: false,
@@ -213,7 +500,10 @@ function DataGrid<TData extends object>({
       base: "",
       header: "",
       headerRow: "",
-      headerSticky: "sticky top-0 z-15 bg-background/90 backdrop-blur-xs",
+      // z-40 keeps the sticky header above pinned body cells (zIndex 30 in
+      // getPinningStyles), which would otherwise paint over it while
+      // scrolling vertically with columnsPinnable enabled.
+      headerSticky: "sticky top-0 z-40 bg-background/90 backdrop-blur-xs",
       body: "",
       bodyRow: "",
       footer: "",
@@ -221,7 +511,7 @@ function DataGrid<TData extends object>({
     },
   }
 
-  const mergedProps: DataGridProps<TData> = {
+  const mergedProps: DataGridProps<TFeatures, TData> = {
     ...defaultProps,
     ...props,
     tableLayout: {
@@ -239,8 +529,15 @@ function DataGrid<TData extends object>({
     throw new Error('DataGrid requires a "table" prop')
   }
 
+  // The single widening point. Consumers own the TanStack core and may hand
+  // over any feature bundle; internals need a concrete one to resolve the
+  // feature-gated APIs they call, and v9's invariant TFeatures rules out
+  // expressing that with a generic constraint.
+  const internalTable = table as unknown as DataGridTableInstance<TData>
+  const internalProps = mergedProps as unknown as DataGridLayoutProps<TData>
+
   return (
-    <DataGridProvider table={table} {...mergedProps}>
+    <DataGridProvider table={internalTable} {...internalProps}>
       {children}
     </DataGridProvider>
   )
@@ -249,10 +546,10 @@ function DataGrid<TData extends object>({
 function DataGridContainer({
   children,
   className,
-  border = true,
 }: {
   children: ReactNode
   className?: string
+  /** Accepted for backwards compatibility; currently has no effect. */
   border?: boolean
 }) {
   return (
diff --git a/apps/web/src/components/reui/date-selector.tsx b/apps/web/src/components/reui/date-selector.tsx
index ee78445..5233a2b 100644
--- a/apps/web/src/components/reui/date-selector.tsx
+++ b/apps/web/src/components/reui/date-selector.tsx
@@ -1,8 +1,7 @@
 "use client"
 
+import type { ChangeEvent, ComponentProps } from "react"
 import {
-  ChangeEvent,
-  ComponentProps,
   createContext,
   useCallback,
   useContext,
@@ -18,8 +17,7 @@ import {
   parse,
   subMonths,
 } from "date-fns"
-import { DayButton } from "react-day-picker"
-import type { DateRange } from "react-day-picker"
+import type { DateRange, DayButton } from "react-day-picker"
 
 import { useIsMobile } from "@/hooks/use-mobile"
 import { cn } from "@evobgp/ui/lib/utils"
@@ -1233,7 +1231,7 @@ export function DateSelector({
                 onClick={clearSelection}
                 className={cn(
                   // Base Styles
-                  "absolute end-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer rounded-xs",
+                  "rounded-xs absolute end-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer",
                   // Visual States
                   "opacity-70 transition-opacity hover:opacity-100",
                   // Focus States
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
new file mode 100644
index 0000000..dac306a
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-agenda-view.tsx
@@ -0,0 +1,237 @@
+"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
new file mode 100644
index 0000000..5621a81
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-content.tsx
@@ -0,0 +1,80 @@
+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
new file mode 100644
index 0000000..b8d836f
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-dnd.tsx
@@ -0,0 +1,1064 @@
+"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
new file mode 100644
index 0000000..eca6221
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-event.tsx
@@ -0,0 +1,555 @@
+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
new file mode 100644
index 0000000..d30cc2d
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-i18n.tsx
@@ -0,0 +1,291 @@
+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
new file mode 100644
index 0000000..2130432
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-lib.tsx
@@ -0,0 +1,677 @@
+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
new file mode 100644
index 0000000..03bd30e
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-month-view.tsx
@@ -0,0 +1,1289 @@
+"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
new file mode 100644
index 0000000..a7d2a2d
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-nav.tsx
@@ -0,0 +1,611 @@
+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
new file mode 100644
index 0000000..1f22284
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-recurrence.tsx
@@ -0,0 +1,592 @@
+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
new file mode 100644
index 0000000..c27d25f
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-resource-view.tsx
@@ -0,0 +1,812 @@
+"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
new file mode 100644
index 0000000..064b429
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-time-grid.tsx
@@ -0,0 +1,1358 @@
+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
new file mode 100644
index 0000000..6dae02f
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar-types.tsx
@@ -0,0 +1,240 @@
+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
new file mode 100644
index 0000000..185943a
--- /dev/null
+++ b/apps/web/src/components/reui/event-calendar/event-calendar.tsx
@@ -0,0 +1,1913 @@
+"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/reui/filters.tsx b/apps/web/src/components/reui/filters.tsx
deleted file mode 100644
index 00c0e85..0000000
--- a/apps/web/src/components/reui/filters.tsx
+++ /dev/null
@@ -1,1920 +0,0 @@
-import type React from "react"
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
-import { useRender } from "@base-ui/react/use-render"
-import { cva } from "class-variance-authority"
-
-import { cn } from "@evobgp/ui/lib/utils"
-import { Button } from "@evobgp/ui/components/button"
-import {
-  ButtonGroup,
-  ButtonGroupText,
-} from "@evobgp/ui/components/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@evobgp/ui/components/dropdown-menu"
-import { Input } from "@evobgp/ui/components/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-} from "@evobgp/ui/components/input-group"
-import { Kbd } from "@evobgp/ui/components/kbd"
-import { ScrollArea } from "@evobgp/ui/components/scroll-area"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@evobgp/ui/components/tooltip"
-import { AlertCircleIcon, XIcon, CheckIcon } from "lucide-react"
-
-// i18n Configuration Interface
-export interface FilterI18nConfig {
-  // UI Labels
-  addFilter: string
-  searchFields: string
-  noFieldsFound: string
-  noResultsFound: string
-  select: string
-  true: string
-  false: string
-  min: string
-  max: string
-  to: string
-  typeAndPressEnter: string
-  selected: string
-  selectedCount: string
-  percent: string
-  defaultCurrency: string
-  defaultColor: string
-  addFilterTitle: string
-
-  // Operators
-  operators: {
-    is: string
-    isNot: string
-    isAnyOf: string
-    isNotAnyOf: string
-    includesAll: string
-    excludesAll: string
-    before: string
-    after: string
-    between: string
-    notBetween: string
-    contains: string
-    notContains: string
-    startsWith: string
-    endsWith: string
-    isExactly: string
-    equals: string
-    notEquals: string
-    greaterThan: string
-    lessThan: string
-    overlaps: string
-    includes: string
-    excludes: string
-    includesAllOf: string
-    includesAnyOf: string
-    empty: string
-    notEmpty: string
-  }
-
-  // Placeholders
-  placeholders: {
-    enterField: (fieldType: string) => string
-    selectField: string
-    searchField: (fieldName: string) => string
-    enterKey: string
-    enterValue: string
-  }
-
-  // Helper functions
-  helpers: {
-    formatOperator: (operator: string) => string
-  }
-
-  // Validation
-  validation: {
-    invalidEmail: string
-    invalidUrl: string
-    invalidTel: string
-    invalid: string
-  }
-}
-
-// Default English i18n configuration
-export const DEFAULT_I18N: FilterI18nConfig = {
-  addFilter: "Фильтр",
-  searchFields: "Фильтр…",
-  noFieldsFound: "Поля не найдены.",
-  noResultsFound: "Ничего не найдено.",
-  select: "Выбрать…",
-  true: "Да",
-  false: "Нет",
-  min: "Мин.",
-  max: "Макс.",
-  to: "—",
-  typeAndPressEnter: "Введите и нажмите Enter",
-  selected: "выбрано",
-  selectedCount: "выбрано",
-  percent: "%",
-  defaultCurrency: "$",
-  defaultColor: "#000000",
-  addFilterTitle: "Добавить фильтр",
-
-  operators: {
-    is: "равно",
-    isNot: "не равно",
-    isAnyOf: "любое из",
-    isNotAnyOf: "кроме",
-    includesAll: "включает все",
-    excludesAll: "исключает все",
-    before: "до",
-    after: "после",
-    between: "между",
-    notBetween: "вне диапазона",
-    contains: "содержит",
-    notContains: "не содержит",
-    startsWith: "начинается с",
-    endsWith: "заканчивается на",
-    isExactly: "точно",
-    equals: "равно",
-    notEquals: "не равно",
-    greaterThan: "больше",
-    lessThan: "меньше",
-    overlaps: "пересекается",
-    includes: "включает",
-    excludes: "исключает",
-    includesAllOf: "включает все",
-    includesAnyOf: "включает любое",
-    empty: "пусто",
-    notEmpty: "не пусто",
-  },
-
-  placeholders: {
-    enterField: (fieldType: string) => `Введите ${fieldType}…`,
-    selectField: "Выбрать…",
-    searchField: (fieldName: string) => `Поиск ${fieldName.toLowerCase()}…`,
-    enterKey: "Введите ключ…",
-    enterValue: "Введите значение…",
-  },
-
-  helpers: {
-    formatOperator: (operator: string) => operator.replace(/_/g, " "),
-  },
-
-  validation: {
-    invalidEmail: "Некорректный email",
-    invalidUrl: "Некорректный URL",
-    invalidTel: "Некорректный телефон",
-    invalid: "Некорректное значение",
-  },
-}
-
-// Context for all Filter component props
-interface FilterContextValue {
-  variant: "solid" | "default"
-  size: "sm" | "default" | "lg"
-  radius: "default" | "full"
-  i18n: FilterI18nConfig
-  className?: string
-  showSearchInput?: boolean
-  trigger?: React.ReactNode
-  allowMultiple?: boolean
-}
-
-const FilterContext = createContext<FilterContextValue>({
-  variant: "default",
-  size: "default",
-  radius: "default",
-  i18n: DEFAULT_I18N,
-  className: undefined,
-  showSearchInput: true,
-  trigger: undefined,
-  allowMultiple: true,
-})
-
-const useFilterContext = () => useContext(FilterContext)
-
-// Container variant for filters wrapper
-const filtersContainerVariants = cva("flex flex-wrap items-center", {
-  variants: {
-    variant: {
-      solid: "gap-2",
-      default: "",
-    },
-    size: {
-      sm: "gap-1.5",
-      default: "gap-2.5",
-      lg: "gap-3.5",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default",
-  },
-})
-
-function FilterInput<T = unknown>({
-  field,
-  onBlur,
-  onKeyDown,
-  className,
-  ...props
-}: React.InputHTMLAttributes<HTMLInputElement> & {
-  className?: string
-  field?: FilterFieldConfig<T>
-}) {
-  const context = useFilterContext()
-  const [isValid, setIsValid] = useState(true)
-  const [validationMessage, setValidationMessage] = useState("")
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (props.autoFocus) {
-      const timer = setTimeout(() => {
-        inputRef.current?.focus()
-      }, 300)
-      return () => clearTimeout(timer)
-    }
-  }, [props.autoFocus])
-
-  // Validation function to check if input matches pattern
-  const validateInput = (value: string, pattern?: string): boolean => {
-    if (!pattern || !value) return true
-    const regex = new RegExp(pattern)
-    return regex.test(value)
-  }
-
-  // Get validation message for field type
-  const getValidationMessage = (): string => {
-    return context.i18n.validation.invalid
-  }
-
-  // Handle blur event - validate when user leaves input
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    const pattern = field?.pattern || props.pattern
-
-    // Only validate if there's a value and (pattern or validation function)
-    if (value && (pattern || field?.validation)) {
-      let valid = true
-      let customMessage = ""
-
-      // If there's a custom validation function, use it
-      if (field?.validation) {
-        const result = field.validation(value)
-        // Handle both boolean and object return types
-        if (typeof result === "boolean") {
-          valid = result
-        } else {
-          valid = result.valid
-          customMessage = result.message || ""
-        }
-      } else if (pattern) {
-        // Use pattern validation
-        valid = validateInput(value, pattern)
-      }
-
-      setIsValid(valid)
-      setValidationMessage(valid ? "" : customMessage || getValidationMessage())
-    } else {
-      // Reset validation state for empty values or no validation
-      setIsValid(true)
-      setValidationMessage("")
-    }
-
-    // Call the original onBlur if provided
-    onBlur?.(e)
-  }
-
-  // Handle keydown event - hide validation error when user starts typing
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    // Hide validation error when user starts typing (any key except special keys)
-    if (
-      !isValid &&
-      ![
-        "Tab",
-        "Escape",
-        "Enter",
-        "ArrowUp",
-        "ArrowDown",
-        "ArrowLeft",
-        "ArrowRight",
-      ].includes(e.key)
-    ) {
-      setIsValid(true)
-      setValidationMessage("")
-    }
-
-    // Call the original onKeyDown if provided
-    onKeyDown?.(e)
-  }
-
-  return (
-    <InputGroup
-      className={cn(
-        "w-36",
-        context.size == "sm" &&
-          "h-7!",
-        context.size == "default" &&
-          "h-8!",
-        context.size == "lg" &&
-          "h-9!",
-        className
-      )}
-    >
-      {field?.prefix && (
-        <InputGroupAddon>
-          <InputGroupText>{field.prefix}</InputGroupText>
-        </InputGroupAddon>
-      )}
-      <InputGroupInput
-        ref={inputRef}
-        aria-invalid={!isValid}
-        aria-describedby={
-          !isValid && validationMessage
-            ? `${field?.key || "input"}-error`
-            : undefined
-        }
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          context.size == "sm" &&
-            "h-7! text-xs",
-          context.size == "default" &&
-            "h-8!",
-          context.size == "lg" &&
-            "h-9!"
-        )}
-        {...props}
-      />
-      {!isValid && validationMessage && (
-        <InputGroupAddon align="inline-end">
-          <Tooltip>
-            <TooltipTrigger render={<InputGroupButton size="icon-xs" />}>
-              <AlertCircleIcon className="text-destructive size-3.5" />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="text-sm">{validationMessage}</p>
-            </TooltipContent>
-          </Tooltip>
-        </InputGroupAddon>
-      )}
-
-      {field?.suffix && (
-        <InputGroupAddon align="inline-end">
-          <InputGroupText>{field.suffix}</InputGroupText>
-        </InputGroupAddon>
-      )}
-    </InputGroup>
-  )
-}
-
-interface FilterRemoveButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: React.ReactNode
-}
-
-function FilterRemoveButton({
-  className,
-  icon = (
-    <XIcon
-    />
-  ),
-  ...props
-}: FilterRemoveButtonProps) {
-  const context = useFilterContext()
-
-  return (
-    <Button
-      variant="outline"
-      size={
-        context.size === "sm"
-          ? "icon-sm"
-          : context.size === "lg"
-            ? "icon-lg"
-            : "icon"
-      }
-      className={className}
-      {...props}
-    >
-      {icon}
-    </Button>
-  )
-}
-
-// Generic types for flexible filter system
-export interface FilterOption<T = unknown> {
-  value: T
-  label: string
-  icon?: React.ReactNode
-  metadata?: Record<string, unknown>
-  className?: string
-}
-
-export interface FilterOperator {
-  value: string
-  label: string
-  supportsMultiple?: boolean
-}
-
-// Custom renderer props interface
-export interface CustomRendererProps<T = unknown> {
-  field: FilterFieldConfig<T>
-  values: T[]
-  onChange: (values: T[]) => void
-  operator: string
-}
-
-// Grouped field configuration interface
-export interface FilterFieldGroup<T = unknown> {
-  group?: string
-  fields: FilterFieldConfig<T>[]
-}
-
-// Union type for both flat and grouped field configurations
-export type FilterFieldsConfig<T = unknown> =
-  | FilterFieldConfig<T>[]
-  | FilterFieldGroup<T>[]
-
-export interface FilterFieldConfig<T = unknown> {
-  key?: string
-  label?: string
-  icon?: React.ReactNode
-  type?: "select" | "multiselect" | "text" | "custom" | "separator"
-  // Group-level configuration
-  group?: string
-  fields?: FilterFieldConfig<T>[]
-  // Field-specific options
-  options?: FilterOption<T>[]
-  operators?: FilterOperator[]
-  customRenderer?: (props: CustomRendererProps<T>) => React.ReactNode
-  customValueRenderer?: (
-    values: T[],
-    options: FilterOption<T>[]
-  ) => React.ReactNode
-  placeholder?: string
-  searchable?: boolean
-  maxSelections?: number
-  min?: number
-  max?: number
-  step?: number
-  prefix?: string | React.ReactNode
-  suffix?: string | React.ReactNode
-  pattern?: string
-  validation?: (
-    value: unknown
-  ) => boolean | { valid: boolean; message?: string }
-  allowCustomValues?: boolean
-  className?: string
-  menuPopupClassName?: string
-  // Grouping options (legacy support)
-  groupLabel?: string
-  // Boolean field options
-  onLabel?: string
-  offLabel?: string
-  // Input event handlers
-  onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  // Default operator to use when creating a filter for this field
-  defaultOperator?: string
-  // Controlled values support for this field
-  value?: T[]
-  onValueChange?: (values: T[]) => void
-}
-
-// Helper functions to handle both flat and grouped field configurations
-const isFieldGroup = <T = unknown,>(
-  item: FilterFieldConfig<T> | FilterFieldGroup<T>
-): item is FilterFieldGroup<T> => {
-  return "fields" in item && Array.isArray(item.fields)
-}
-
-// Helper function to check if a FilterFieldConfig is a group-level configuration
-const isGroupLevelField = <T = unknown,>(
-  field: FilterFieldConfig<T>
-): boolean => {
-  return Boolean(field.group && field.fields)
-}
-
-const flattenFields = <T = unknown,>(
-  fields: FilterFieldsConfig<T>
-): FilterFieldConfig<T>[] => {
-  return fields.reduce<FilterFieldConfig<T>[]>((acc, item) => {
-    if (isFieldGroup(item)) {
-      return [...acc, ...item.fields]
-    }
-    // Handle group-level fields (new structure)
-    if (isGroupLevelField(item)) {
-      return [...acc, ...item.fields!]
-    }
-    return [...acc, item]
-  }, [])
-}
-
-const getFieldsMap = <T = unknown,>(
-  fields: FilterFieldsConfig<T>
-): Record<string, FilterFieldConfig<T>> => {
-  const flatFields = flattenFields(fields)
-  return flatFields.reduce(
-    (acc, field) => {
-      // Only add fields that have a key (skip group-level configurations)
-      if (field.key) {
-        acc[field.key] = field
-      }
-      return acc
-    },
-    {} as Record<string, FilterFieldConfig<T>>
-  )
-}
-
-// Helper function to create operators from i18n config
-const createOperatorsFromI18n = (
-  i18n: FilterI18nConfig
-): Record<string, FilterOperator[]> => ({
-  select: [
-    { value: "is", label: i18n.operators.is },
-    { value: "is_not", label: i18n.operators.isNot },
-    { value: "empty", label: i18n.operators.empty },
-    { value: "not_empty", label: i18n.operators.notEmpty },
-  ],
-  multiselect: [
-    { value: "is_any_of", label: i18n.operators.isAnyOf },
-    { value: "is_not_any_of", label: i18n.operators.isNotAnyOf },
-    { value: "includes_all", label: i18n.operators.includesAll },
-    { value: "excludes_all", label: i18n.operators.excludesAll },
-    { value: "empty", label: i18n.operators.empty },
-    { value: "not_empty", label: i18n.operators.notEmpty },
-  ],
-  text: [
-    { value: "contains", label: i18n.operators.contains },
-    { value: "not_contains", label: i18n.operators.notContains },
-    { value: "starts_with", label: i18n.operators.startsWith },
-    { value: "ends_with", label: i18n.operators.endsWith },
-    { value: "is", label: i18n.operators.isExactly },
-    { value: "empty", label: i18n.operators.empty },
-    { value: "not_empty", label: i18n.operators.notEmpty },
-  ],
-  custom: [
-    { value: "is", label: i18n.operators.is },
-    { value: "after", label: i18n.operators.after },
-    { value: "is", label: i18n.operators.is },
-    { value: "between", label: i18n.operators.between },
-    { value: "empty", label: i18n.operators.empty },
-    { value: "not_empty", label: i18n.operators.notEmpty },
-  ],
-})
-
-// Default operators for different field types (using default i18n)
-export const DEFAULT_OPERATORS: Record<string, FilterOperator[]> =
-  createOperatorsFromI18n(DEFAULT_I18N)
-
-// Helper function to get operators for a field
-const getOperatorsForField = <T = unknown,>(
-  field: FilterFieldConfig<T>,
-  values: T[],
-  i18n: FilterI18nConfig
-): FilterOperator[] => {
-  if (field.operators) return field.operators
-
-  const operators = createOperatorsFromI18n(i18n)
-
-  // Determine field type for operator selection
-  let fieldType = field.type || "select"
-
-  // If it's a select field but has multiple values, treat as multiselect
-  if (fieldType === "select" && values.length > 1) {
-    fieldType = "multiselect"
-  }
-
-  // If it's a multiselect field or has multiselect operators, use multiselect operators
-  if (fieldType === "multiselect" || field.type === "multiselect") {
-    return operators.multiselect
-  }
-
-  return operators[fieldType] || operators.select
-}
-
-interface FilterOperatorDropdownProps<T = unknown> {
-  field: FilterFieldConfig<T>
-  operator: string
-  values: T[]
-  onChange: (operator: string) => void
-}
-
-function FilterOperatorDropdown<T = unknown>({
-  field,
-  operator,
-  values,
-  onChange,
-}: FilterOperatorDropdownProps<T>) {
-  const context = useFilterContext()
-  const operators = getOperatorsForField(field, values, context.i18n)
-
-  // Find the operator label, with fallback to formatted operator name
-  const operatorLabel =
-    operators.find((op) => op.value === operator)?.label ||
-    context.i18n.helpers.formatOperator(operator)
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        render={
-          <Button
-            variant="outline"
-            size={context.size}
-            className="text-muted-foreground hover:text-foreground"
-          >
-            {operatorLabel}
-          </Button>
-        }
-      />
-      <DropdownMenuContent align="start" className="w-fit min-w-fit">
-        {operators.map((op) => (
-          <DropdownMenuItem
-            key={op.value}
-            onClick={() => onChange(op.value)}
-            className={cn(
-              "data-highlighted:bg-accent data-highlighted:text-accent-foreground flex items-center justify-between"
-            )}
-          >
-            <span>{op.label}</span>
-            <CheckIcon className={cn(
-                                "text-primary ms-auto",
-                                op.value === operator ? "opacity-100" : "opacity-0"
-                              )} />
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-interface FilterValueSelectorProps<T = unknown> {
-  field: FilterFieldConfig<T>
-  values: T[]
-  onChange: (values: T[]) => void
-  operator: string
-  autoFocus?: boolean
-}
-
-interface SelectOptionsPopoverProps<T = unknown> {
-  field: FilterFieldConfig<T>
-  values: T[]
-  onChange: (values: T[]) => void
-  onClose?: () => void
-  inline?: boolean
-}
-
-function SelectOptionsPopover<T = unknown>({
-  field,
-  values,
-  onChange,
-  onClose,
-  inline = false,
-}: SelectOptionsPopoverProps<T>) {
-  const [open, setOpen] = useState(false)
-  const [searchInput, setSearchInput] = useState("")
-  const [highlightedIndex, setHighlightedIndex] = useState(-1)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const context = useFilterContext()
-  const baseId = useId()
-
-  useEffect(() => {
-    if (open) {
-      inputRef.current?.focus()
-    }
-  }, [open])
-
-  useEffect(() => {
-    setHighlightedIndex(-1)
-  }, [searchInput, open])
-
-  useEffect(() => {
-    if (highlightedIndex >= 0 && open) {
-      const element = document.getElementById(
-        `${baseId}-item-${highlightedIndex}`
-      )
-      element?.scrollIntoView({ block: "nearest" })
-    }
-  }, [highlightedIndex, open, baseId])
-
-  const isMultiSelect = field.type === "multiselect" || values.length > 1
-  const effectiveValues =
-    (field.value !== undefined ? (field.value as T[]) : values) || []
-
-  const selectedOptions =
-    field.options?.filter((opt) => effectiveValues.includes(opt.value)) || []
-  const unselectedOptions =
-    field.options?.filter((opt) => !effectiveValues.includes(opt.value)) || []
-
-  // Filter options based on search input
-  const filteredSelectedOptions = selectedOptions // Keep all selected visible
-  const filteredUnselectedOptions = unselectedOptions.filter((opt) =>
-    opt.label.toLowerCase().includes(searchInput.toLowerCase())
-  )
-
-  const allFilteredOptions = useMemo(
-    () => [...filteredSelectedOptions, ...filteredUnselectedOptions],
-    [filteredSelectedOptions, filteredUnselectedOptions]
-  )
-
-  const handleClose = () => {
-    setOpen(false)
-    onClose?.()
-  }
-
-  const renderMenuContent = () => (
-    <>
-      {field.searchable !== false && (
-        <>
-          <Input
-            ref={inputRef}
-            role="combobox"
-            aria-autocomplete="list"
-            aria-expanded={true}
-            aria-haspopup="listbox"
-            aria-controls={`${baseId}-listbox`}
-            aria-activedescendant={
-              highlightedIndex >= 0
-                ? `${baseId}-item-${highlightedIndex}`
-                : undefined
-            }
-            placeholder={context.i18n.placeholders.searchField(
-              field.label || ""
-            )}
-            className={cn(
-              "border-input h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none",
-              "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0",
-              open && "placeholder:text-foreground"
-            )}
-            value={searchInput}
-            onChange={(e) => setSearchInput(e.target.value)}
-            onBlur={() => open && inputRef.current?.focus()}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => {
-              if (e.key === "ArrowDown") {
-                e.preventDefault()
-                if (allFilteredOptions.length > 0) {
-                  setHighlightedIndex((prev) =>
-                    prev < allFilteredOptions.length - 1 ? prev + 1 : 0
-                  )
-                }
-              } else if (e.key === "ArrowUp") {
-                e.preventDefault()
-                if (allFilteredOptions.length > 0) {
-                  setHighlightedIndex((prev) =>
-                    prev > 0 ? prev - 1 : allFilteredOptions.length - 1
-                  )
-                }
-              } else if (e.key === "ArrowLeft") {
-                e.preventDefault()
-                setOpen(false)
-              } else if (e.key === "Enter" && highlightedIndex >= 0) {
-                e.preventDefault()
-                const option = allFilteredOptions[highlightedIndex]
-                if (option) {
-                  const isSelected = effectiveValues.includes(option.value as T)
-                  const next = isSelected
-                    ? (effectiveValues.filter((v) => v !== option.value) as T[])
-                    : isMultiSelect
-                      ? ([...effectiveValues, option.value] as T[])
-                      : ([option.value] as T[])
-
-                  if (
-                    !isSelected &&
-                    isMultiSelect &&
-                    field.maxSelections &&
-                    next.length > field.maxSelections
-                  ) {
-                    return
-                  }
-
-                  if (field.onValueChange) {
-                    field.onValueChange(next)
-                  } else {
-                    onChange(next)
-                  }
-                  if (!isMultiSelect) handleClose()
-                }
-              }
-              e.stopPropagation()
-            }}
-          />
-          <DropdownMenuSeparator />
-        </>
-      )}
-      <div className="relative flex max-h-full">
-        <div
-          className="flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain"
-          role="listbox"
-          id={`${baseId}-listbox`}
-        >
-          <ScrollArea className="size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 [&_[data-slot=scroll-area-viewport]]:h-full [&_[data-slot=scroll-area-viewport]]:overscroll-contain">
-            {allFilteredOptions.length === 0 && (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                {context.i18n.noResultsFound}
-              </div>
-            )}
-
-            {/* Selected items */}
-            {filteredSelectedOptions.length > 0 && (
-              <DropdownMenuGroup className="px-1">
-                {filteredSelectedOptions.map((option, index) => {
-                  const isHighlighted = highlightedIndex === index
-                  const itemId = `${baseId}-item-${index}`
-
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={String(option.value)}
-                      id={itemId}
-                      role="option"
-                      aria-selected={isHighlighted}
-                      data-highlighted={isHighlighted || undefined}
-                      onMouseEnter={() => setHighlightedIndex(index)}
-                      checked={true}
-                      className={cn(
-                        "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
-                        option.className
-                      )}
-                      onSelect={(e) => {
-                        if (isMultiSelect) e.preventDefault()
-                      }}
-                      onCheckedChange={() => {
-                        const next = effectiveValues.filter(
-                          (v) => v !== option.value
-                        ) as T[]
-                        if (field.onValueChange) {
-                          field.onValueChange(next)
-                        } else {
-                          onChange(next)
-                        }
-                        if (!isMultiSelect) handleClose()
-                      }}
-                    >
-                      {option.icon && option.icon}
-                      <span className="truncate">{option.label}</span>
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-              </DropdownMenuGroup>
-            )}
-
-            {/* Separator */}
-            {filteredSelectedOptions.length > 0 &&
-              filteredUnselectedOptions.length > 0 && (
-                <DropdownMenuSeparator className="mx-0" />
-              )}
-
-            {/* Available items */}
-            {filteredUnselectedOptions.length > 0 && (
-              <DropdownMenuGroup className="px-1">
-                {filteredUnselectedOptions.map((option, index) => {
-                  const overallIndex = index + filteredSelectedOptions.length
-                  const isHighlighted = highlightedIndex === overallIndex
-                  const itemId = `${baseId}-item-${overallIndex}`
-
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={String(option.value)}
-                      id={itemId}
-                      role="option"
-                      aria-selected={isHighlighted}
-                      data-highlighted={isHighlighted || undefined}
-                      onMouseEnter={() => setHighlightedIndex(overallIndex)}
-                      checked={false}
-                      className={cn(
-                        "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
-                        option.className
-                      )}
-                      onSelect={(e) => {
-                        if (isMultiSelect) e.preventDefault()
-                      }}
-                      onCheckedChange={() => {
-                        const next = isMultiSelect
-                          ? ([...effectiveValues, option.value] as T[])
-                          : ([option.value] as T[])
-
-                        if (
-                          isMultiSelect &&
-                          field.maxSelections &&
-                          next.length > field.maxSelections
-                        ) {
-                          return
-                        }
-
-                        if (field.onValueChange) {
-                          field.onValueChange(next)
-                        } else {
-                          onChange(next)
-                        }
-                        if (!isMultiSelect) handleClose()
-                      }}
-                    >
-                      {option.icon && option.icon}
-                      <span className="truncate">{option.label}</span>
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-              </DropdownMenuGroup>
-            )}
-          </ScrollArea>
-        </div>
-      </div>
-    </>
-  )
-
-  if (inline) {
-    return <div className="w-full">{renderMenuContent()}</div>
-  }
-
-  return (
-    <DropdownMenu
-      open={open}
-      onOpenChange={(open) => {
-        setOpen(open)
-        if (!open) {
-          setTimeout(() => setSearchInput(""), 200)
-        }
-      }}
-    >
-      <DropdownMenuTrigger
-        render={
-          <Button variant="outline" size={context.size}>
-            <div className="flex items-center gap-1.5">
-              {field.customValueRenderer ? (
-                field.customValueRenderer(values, field.options || [])
-              ) : (
-                <>
-                  {selectedOptions.length > 0 && (
-                    <div className="flex items-center -space-x-1.5">
-                      {selectedOptions.slice(0, 3).map((option) => (
-                        <div key={String(option.value)}>{option.icon}</div>
-                      ))}
-                    </div>
-                  )}
-                  {selectedOptions.length === 1
-                    ? selectedOptions[0].label
-                    : selectedOptions.length > 1
-                      ? `${selectedOptions.length} ${context.i18n.selectedCount}`
-                      : context.i18n.select}
-                </>
-              )}
-            </div>
-          </Button>
-        }
-      />
-      <DropdownMenuContent
-        align="start"
-        className={cn("w-[200px] px-0", field.className)}
-      >
-        {renderMenuContent()}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-function FilterValueSelector<T = unknown>({
-  field,
-  values,
-  onChange,
-  operator,
-  autoFocus,
-}: FilterValueSelectorProps<T>) {
-  if (operator === "empty" || operator === "not_empty") {
-    return null
-  }
-
-  if (field.customRenderer) {
-    return (
-      <ButtonGroupText className="hover:bg-accent aria-expanded:bg-accent bg-background dark:bg-input/30 text-start whitespace-nowrap outline-hidden">
-        {field.customRenderer({ field, values, onChange, operator })}
-      </ButtonGroupText>
-    )
-  }
-
-  if (field.type === "text") {
-    return (
-      <FilterInput
-        type="text"
-        value={(values[0] as string) || ""}
-        onChange={(e) => onChange([e.target.value] as T[])}
-        placeholder={field.placeholder}
-        pattern={field.pattern}
-        field={field}
-        className={cn("w-36", field.className)}
-        autoFocus={autoFocus}
-      />
-    )
-  }
-
-  if (field.type === "select" || field.type === "multiselect") {
-    return (
-      <SelectOptionsPopover field={field} values={values} onChange={onChange} />
-    )
-  }
-
-  return (
-    <SelectOptionsPopover field={field} values={values} onChange={onChange} />
-  )
-}
-export interface Filter<T = unknown> {
-  id: string
-  field: string
-  operator: string
-  values: T[]
-}
-
-export interface FilterGroup<T = unknown> {
-  id: string
-  label?: string
-  filters: Filter<T>[]
-  fields: FilterFieldConfig<T>[]
-}
-
-interface FiltersContentProps<T = unknown> {
-  filters: Filter<T>[]
-  fields: FilterFieldsConfig<T>
-  onChange: (filters: Filter<T>[]) => void
-}
-
-export const FiltersContent = <T = unknown,>({
-  filters,
-  fields,
-  onChange,
-}: FiltersContentProps<T>) => {
-  const context = useFilterContext()
-  const fieldsMap = useMemo(() => getFieldsMap(fields), [fields])
-
-  const updateFilter = useCallback(
-    (filterId: string, updates: Partial<Filter<T>>) => {
-      onChange(
-        filters.map((filter) => {
-          if (filter.id === filterId) {
-            const updatedFilter = { ...filter, ...updates }
-            if (
-              updates.operator === "empty" ||
-              updates.operator === "not_empty"
-            ) {
-              updatedFilter.values = [] as T[]
-            }
-            return updatedFilter
-          }
-          return filter
-        })
-      )
-    },
-    [filters, onChange]
-  )
-
-  const removeFilter = useCallback(
-    (filterId: string) => {
-      onChange(filters.filter((filter) => filter.id !== filterId))
-    },
-    [filters, onChange]
-  )
-
-  return (
-    <div
-      className={cn(
-        filtersContainerVariants({
-          variant: context.variant,
-          size: context.size,
-        }),
-        context.className
-      )}
-    >
-      {filters.map((filter) => {
-        const field = fieldsMap[filter.field]
-        if (!field) return null
-
-        return (
-          <ButtonGroup key={filter.id}>
-            <ButtonGroupText>
-              {field.icon && field.icon}
-              {field.label}
-            </ButtonGroupText>
-
-            <FilterOperatorDropdown<T>
-              field={field}
-              operator={filter.operator}
-              values={filter.values}
-              onChange={(operator) => updateFilter(filter.id, { operator })}
-            />
-
-            <FilterValueSelector<T>
-              field={field}
-              values={filter.values}
-              onChange={(values) => updateFilter(filter.id, { values })}
-              operator={filter.operator}
-              autoFocus={false}
-            />
-
-            <FilterRemoveButton onClick={() => removeFilter(filter.id)} />
-          </ButtonGroup>
-        )
-      })}
-    </div>
-  )
-}
-
-interface FiltersProps<T = unknown> {
-  filters: Filter<T>[]
-  fields: FilterFieldsConfig<T>
-  onChange: (filters: Filter<T>[]) => void
-  className?: string
-  variant?: "solid" | "default"
-  size?: "sm" | "default" | "lg"
-  radius?: "default" | "full"
-  i18n?: Partial<FilterI18nConfig>
-  showSearchInput?: boolean
-  trigger?: React.ReactNode
-  allowMultiple?: boolean
-  menuPopupClassName?: string
-  collapseAddButton?: boolean
-  enableShortcut?: boolean
-  shortcutKey?: string
-  shortcutLabel?: string
-}
-
-interface FilterSubmenuContentProps<T = unknown> {
-  field: FilterFieldConfig<T>
-  currentValues: T[]
-  isMultiSelect: boolean
-  onToggle: (value: T, isSelected: boolean) => void
-  i18n: FilterI18nConfig
-  isActive?: boolean
-  onActive?: () => void
-  onBack?: () => void
-  onClose?: () => void
-}
-
-function FilterSubmenuContent<T = unknown>({
-  field,
-  currentValues,
-  isMultiSelect,
-  onToggle,
-  i18n,
-  isActive,
-  onActive,
-  onBack,
-  onClose,
-}: FilterSubmenuContentProps<T>) {
-  const [searchInput, setSearchInput] = useState("")
-  const [highlightedIndex, setHighlightedIndex] = useState(-1)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const baseId = useId()
-
-  useEffect(() => {
-    if (isActive) {
-      if (field.searchable !== false) {
-        inputRef.current?.focus()
-      } else {
-        const listbox = document.getElementById(`${baseId}-listbox`)
-        listbox?.focus()
-      }
-    }
-  }, [isActive, field.searchable, baseId])
-
-  useEffect(() => {
-    setHighlightedIndex(-1)
-  }, [searchInput])
-
-  useEffect(() => {
-    if (highlightedIndex >= 0 && isActive) {
-      const element = document.getElementById(
-        `${baseId}-item-${highlightedIndex}`
-      )
-      element?.scrollIntoView({ block: "nearest" })
-    }
-  }, [highlightedIndex, isActive, baseId])
-
-  const filteredOptions = useMemo(() => {
-    return (
-      field.options?.filter((option) => {
-        const isSelected = currentValues.includes(option.value)
-        if (isSelected) return true
-        if (!searchInput) return true
-        return option.label.toLowerCase().includes(searchInput.toLowerCase())
-      }) || []
-    )
-  }, [field.options, searchInput, currentValues])
-
-  useEffect(() => {
-    if (isActive && filteredOptions.length > 0) {
-      setHighlightedIndex(0)
-    }
-  }, [isActive, filteredOptions.length])
-
-  return (
-    <div className="flex flex-col" onMouseEnter={onActive}>
-      {field.searchable !== false && (
-        <>
-          <Input
-            ref={inputRef}
-            role="combobox"
-            aria-autocomplete="list"
-            aria-expanded={true}
-            aria-haspopup="listbox"
-            aria-controls={`${baseId}-listbox`}
-            aria-activedescendant={
-              highlightedIndex >= 0
-                ? `${baseId}-item-${highlightedIndex}`
-                : undefined
-            }
-            placeholder={i18n.placeholders.searchField(field.label || "")}
-            className={cn(
-              "h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none",
-              "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0",
-              isActive && "placeholder:text-foreground"
-            )}
-            value={searchInput}
-            onBlur={() => isActive && inputRef.current?.focus()}
-            onChange={(e) => setSearchInput(e.target.value)}
-            onFocus={() => onActive?.()}
-            onMouseEnter={(e) => {
-              onActive?.()
-              e.stopPropagation()
-            }}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => {
-              if (e.key === "ArrowDown") {
-                e.preventDefault()
-                if (filteredOptions.length > 0) {
-                  setHighlightedIndex((prev) =>
-                    prev < filteredOptions.length - 1 ? prev + 1 : 0
-                  )
-                }
-              } else if (e.key === "ArrowUp") {
-                e.preventDefault()
-                if (filteredOptions.length > 0) {
-                  setHighlightedIndex((prev) =>
-                    prev > 0 ? prev - 1 : filteredOptions.length - 1
-                  )
-                }
-              } else if (e.key === "ArrowLeft") {
-                e.preventDefault()
-                onBack?.()
-              } else if (e.key === "Enter" && highlightedIndex >= 0) {
-                e.preventDefault()
-                const option = filteredOptions[highlightedIndex]
-                if (option) {
-                  onToggle(
-                    option.value as T,
-                    currentValues.includes(option.value)
-                  )
-                  if (!isMultiSelect) {
-                    onBack?.()
-                  }
-                }
-              } else if (e.key === "Escape") {
-                e.preventDefault()
-                onClose?.()
-              }
-              e.stopPropagation()
-            }}
-          />
-          <DropdownMenuSeparator />
-        </>
-      )}
-      <div className="relative flex max-h-full">
-        <div
-          className="flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain outline-hidden"
-          role="listbox"
-          id={`${baseId}-listbox`}
-          tabIndex={field.searchable === false ? 0 : -1}
-          onKeyDown={(e) => {
-            if (field.searchable === false) {
-              if (e.key === "ArrowDown") {
-                e.preventDefault()
-                if (filteredOptions.length > 0) {
-                  setHighlightedIndex((prev) =>
-                    prev < filteredOptions.length - 1 ? prev + 1 : 0
-                  )
-                }
-              } else if (e.key === "ArrowUp") {
-                e.preventDefault()
-                if (filteredOptions.length > 0) {
-                  setHighlightedIndex((prev) =>
-                    prev > 0 ? prev - 1 : filteredOptions.length - 1
-                  )
-                }
-              } else if (e.key === "ArrowLeft") {
-                e.preventDefault()
-                onBack?.()
-              } else if (e.key === "Enter" && highlightedIndex >= 0) {
-                e.preventDefault()
-                const option = filteredOptions[highlightedIndex]
-                if (option) {
-                  onToggle(
-                    option.value as T,
-                    currentValues.includes(option.value)
-                  )
-                  if (!isMultiSelect) {
-                    onBack?.()
-                  }
-                }
-              } else if (e.key === "Escape") {
-                e.preventDefault()
-                onClose?.()
-              }
-              e.stopPropagation()
-            }
-          }}
-        >
-          <ScrollArea className="size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 [&_[data-slot=scroll-area-viewport]]:h-full [&_[data-slot=scroll-area-viewport]]:overscroll-contain">
-            {filteredOptions.length === 0 ? (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                {i18n.noResultsFound}
-              </div>
-            ) : (
-              <DropdownMenuGroup>
-                {filteredOptions.map((option, index) => {
-                  const isSelected = currentValues.includes(option.value)
-                  const isHighlighted = highlightedIndex === index
-                  const itemId = `${baseId}-item-${index}`
-
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={String(option.value)}
-                      id={itemId}
-                      role="option"
-                      aria-selected={isHighlighted}
-                      data-highlighted={isHighlighted || undefined}
-                      onMouseEnter={() => setHighlightedIndex(index)}
-                      checked={isSelected}
-                      className={cn(
-                        "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
-                        option.className
-                      )}
-                      onSelect={(e) => {
-                        if (isMultiSelect) e.preventDefault()
-                      }}
-                      onCheckedChange={() =>
-                        onToggle(option.value as T, isSelected)
-                      }
-                    >
-                      {option.icon && option.icon}
-                      <span className="truncate">{option.label}</span>
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-              </DropdownMenuGroup>
-            )}
-          </ScrollArea>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function Filters<T = unknown>({
-  filters,
-  fields,
-  onChange,
-  className,
-  variant = "default",
-  size = "default",
-  radius = "default",
-  i18n,
-  showSearchInput = true,
-  trigger,
-  allowMultiple = true,
-  menuPopupClassName,
-  enableShortcut = false,
-  shortcutKey = "f",
-  shortcutLabel = "F",
-}: FiltersProps<T>) {
-  const [addFilterOpen, setAddFilterOpen] = useState(false)
-  const [menuSearchInput, setMenuSearchInput] = useState("")
-  const [activeMenu, setActiveMenu] = useState<string>("root")
-  const [openSubMenu, setOpenSubMenu] = useState<string | null>(null)
-  const [highlightedIndex, setHighlightedIndex] = useState(-1)
-  const [lastAddedFilterId, setLastAddedFilterId] = useState<string | null>(
-    null
-  )
-  const rootInputRef = useRef<HTMLInputElement>(null)
-  const rootId = useId()
-
-  useEffect(() => {
-    if (!enableShortcut) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (
-        e.key.toLowerCase() === shortcutKey.toLowerCase() &&
-        !addFilterOpen &&
-        !(
-          document.activeElement instanceof HTMLInputElement ||
-          document.activeElement instanceof HTMLTextAreaElement
-        )
-      ) {
-        e.preventDefault()
-        setAddFilterOpen(true)
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [enableShortcut, shortcutKey, addFilterOpen])
-
-  useEffect(() => {
-    if (addFilterOpen && activeMenu === "root") {
-      rootInputRef.current?.focus()
-    }
-  }, [addFilterOpen, activeMenu])
-
-  useEffect(() => {
-    setHighlightedIndex(-1)
-  }, [menuSearchInput])
-
-  useEffect(() => {
-    if (highlightedIndex >= 0 && addFilterOpen) {
-      const element = document.getElementById(
-        `${rootId}-item-${highlightedIndex}`
-      )
-      element?.scrollIntoView({ block: "nearest" })
-    }
-  }, [highlightedIndex, addFilterOpen, rootId])
-
-  useEffect(() => {
-    if (!addFilterOpen) {
-      setOpenSubMenu(null)
-    }
-  }, [addFilterOpen])
-
-  // Track which filter instance is being built in the current Add Filter menu session
-  // Maps fieldKey -> unique filterId created during this open session
-  const [sessionFilterIds, setSessionFilterIds] = useState<
-    Record<string, string>
-  >({})
-
-  useEffect(() => {
-    if (lastAddedFilterId) {
-      const timer = setTimeout(() => {
-        setLastAddedFilterId(null)
-      }, 1000)
-      return () => clearTimeout(timer)
-    }
-  }, [lastAddedFilterId])
-
-  const mergedI18n: FilterI18nConfig = {
-    ...DEFAULT_I18N,
-    ...i18n,
-    operators: { ...DEFAULT_I18N.operators, ...i18n?.operators },
-    placeholders: { ...DEFAULT_I18N.placeholders, ...i18n?.placeholders },
-    validation: { ...DEFAULT_I18N.validation, ...i18n?.validation },
-  }
-
-  const fieldsMap = useMemo(() => getFieldsMap(fields), [fields])
-
-  const updateFilter = useCallback(
-    (filterId: string, updates: Partial<Filter<T>>) => {
-      onChange(
-        filters.map((filter) => {
-          if (filter.id === filterId) {
-            const updatedFilter = { ...filter, ...updates }
-            if (
-              updates.operator === "empty" ||
-              updates.operator === "not_empty"
-            ) {
-              updatedFilter.values = [] as T[]
-            }
-            return updatedFilter
-          }
-          return filter
-        })
-      )
-    },
-    [filters, onChange]
-  )
-
-  const removeFilter = useCallback(
-    (filterId: string) => {
-      onChange(filters.filter((filter) => filter.id !== filterId))
-    },
-    [filters, onChange]
-  )
-
-  const addFilter = useCallback(
-    (fieldKey: string) => {
-      const field = fieldsMap[fieldKey]
-      if (field && field.key) {
-        const defaultOperator =
-          field.defaultOperator ||
-          (field.type === "multiselect" ? "is_any_of" : "is")
-        const defaultValues: unknown[] = field.type === "text" ? [""] : []
-        const newFilter = createFilter<T>(
-          fieldKey,
-          defaultOperator,
-          defaultValues as T[]
-        )
-        setLastAddedFilterId(newFilter.id)
-        onChange([...filters, newFilter])
-        setAddFilterOpen(false)
-        setMenuSearchInput("")
-      }
-    },
-    [fieldsMap, filters, onChange]
-  )
-
-  useEffect(() => {
-    if (addFilterOpen && activeMenu === "root") {
-      rootInputRef.current?.focus()
-    }
-  }, [addFilterOpen, activeMenu])
-
-  const selectableFields = useMemo(() => {
-    const flatFields = flattenFields(fields)
-    return flatFields.filter((field) => {
-      if (!field.key || field.type === "separator") return false
-      if (allowMultiple) return true
-      return !filters.some((filter) => filter.field === field.key)
-    })
-  }, [fields, filters, allowMultiple])
-
-  const filteredFields = useMemo(() => {
-    return selectableFields.filter(
-      (f) =>
-        !menuSearchInput ||
-        f.label?.toLowerCase().includes(menuSearchInput.toLowerCase())
-    )
-  }, [selectableFields, menuSearchInput])
-
-  useEffect(() => {
-    if (addFilterOpen && filteredFields.length > 0) {
-      setHighlightedIndex(0)
-    }
-  }, [addFilterOpen, filteredFields.length])
-
-  const triggerButton = useRender({
-    render: trigger as React.ReactElement,
-    defaultTagName: "button",
-  })
-
-  return (
-    <FilterContext.Provider
-      value={{
-        variant,
-        size,
-        radius,
-        i18n: mergedI18n,
-        className,
-        trigger,
-        allowMultiple,
-      }}
-    >
-      <div
-        className={cn(filtersContainerVariants({ variant, size }), className)}
-      >
-        {selectableFields.length > 0 && (
-          <DropdownMenu
-            open={addFilterOpen}
-            onOpenChange={(open) => {
-              setAddFilterOpen(open)
-              if (!open) {
-                setMenuSearchInput("")
-                setSessionFilterIds({})
-              } else {
-                setActiveMenu("root")
-              }
-            }}
-          >
-            <DropdownMenuTrigger render={triggerButton} />
-            <DropdownMenuContent
-              className={cn("w-[220px]", menuPopupClassName)}
-              align="start"
-            >
-              {showSearchInput && (
-                <>
-                  <div className="relative">
-                    <Input
-                      ref={rootInputRef}
-                      role="combobox"
-                      aria-controls={`${rootId}-listbox`}
-                      aria-activedescendant={
-                        highlightedIndex >= 0
-                          ? `${rootId}-item-${highlightedIndex}`
-                          : undefined
-                      }
-                      placeholder={mergedI18n.searchFields}
-                      className={cn(
-                        "h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none",
-                        "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0",
-                        activeMenu === "root" && "placeholder:text-foreground"
-                      )}
-                      value={menuSearchInput}
-                      onFocus={() => setActiveMenu("root")}
-                      onMouseEnter={() => setActiveMenu("root")}
-                      onBlur={() =>
-                        activeMenu === "root" && rootInputRef.current?.focus()
-                      }
-                      onChange={(e) => setMenuSearchInput(e.target.value)}
-                      onClick={(e) => e.stopPropagation()}
-                      onKeyDown={(e) => {
-                        if (e.key === "ArrowDown") {
-                          e.preventDefault()
-                          if (filteredFields.length > 0) {
-                            setHighlightedIndex((prev) =>
-                              prev < filteredFields.length - 1 ? prev + 1 : 0
-                            )
-                          }
-                        } else if (e.key === "ArrowUp") {
-                          e.preventDefault()
-                          if (filteredFields.length > 0) {
-                            setHighlightedIndex((prev) =>
-                              prev > 0 ? prev - 1 : filteredFields.length - 1
-                            )
-                          }
-                        } else if (
-                          (e.key === "ArrowRight" || e.key === "ArrowLeft") &&
-                          highlightedIndex >= 0
-                        ) {
-                          const field = filteredFields[highlightedIndex]
-                          const hasSubMenu =
-                            field &&
-                            (field.type === "select" ||
-                              field.type === "multiselect") &&
-                            field.options?.length
-
-                          if (e.key === "ArrowRight" && hasSubMenu) {
-                            e.preventDefault()
-                            setOpenSubMenu(field.key || null)
-                            setActiveMenu(field.key || "root")
-                          } else if (e.key === "ArrowLeft") {
-                            e.preventDefault()
-                            if (openSubMenu) {
-                              setOpenSubMenu(null)
-                              setActiveMenu("root")
-                            }
-                          }
-                        } else if (e.key === "Enter" && highlightedIndex >= 0) {
-                          e.preventDefault()
-                          const field = filteredFields[highlightedIndex]
-                          if (field.key) {
-                            const hasSubMenu =
-                              (field.type === "select" ||
-                                field.type === "multiselect") &&
-                              field.options?.length
-                            if (!hasSubMenu) {
-                              addFilter(field.key)
-                            } else {
-                              if (openSubMenu === field.key) {
-                                setOpenSubMenu(null)
-                                setActiveMenu("root")
-                              } else {
-                                setOpenSubMenu(field.key)
-                                setActiveMenu(field.key)
-                              }
-                            }
-                          }
-                        } else if (e.key === "Escape") {
-                          setAddFilterOpen(false)
-                        }
-                        e.stopPropagation()
-                      }}
-                    />
-                    {enableShortcut && shortcutLabel && (
-                      <Kbd className="bg-background absolute top-1/2 right-2 -translate-y-1/2 border">
-                        {shortcutLabel}
-                      </Kbd>
-                    )}
-                  </div>
-                  <DropdownMenuSeparator />
-                </>
-              )}
-
-              <div className="relative flex max-h-full">
-                <div
-                  className="flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain"
-                  role="listbox"
-                  id={`${rootId}-listbox`}
-                  onMouseEnter={() => setActiveMenu("root")}
-                >
-                  <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:m-0">
-                    {(() => {
-                      if (filteredFields.length === 0) {
-                        return (
-                          <div className="text-muted-foreground py-2 text-center text-sm">
-                            {mergedI18n.noFieldsFound}
-                          </div>
-                        )
-                      }
-
-                      return filteredFields.map((field, index) => {
-                        const isHighlighted = highlightedIndex === index
-                        const itemId = `${rootId}-item-${index}`
-                        const hasSubMenu =
-                          (field.type === "select" ||
-                            field.type === "multiselect") &&
-                          field.options?.length
-
-                        if (hasSubMenu) {
-                          const isMultiSelect = field.type === "multiselect"
-                          const fieldKey = field.key as string
-                          const sessionFilterId = sessionFilterIds[fieldKey]
-                          const sessionFilter = sessionFilterId
-                            ? filters.find((f) => f.id === sessionFilterId)
-                            : null
-                          const currentValues = sessionFilter?.values || []
-
-                          return (
-                            <DropdownMenuSub
-                              key={fieldKey}
-                              open={openSubMenu === fieldKey}
-                              onOpenChange={(open) => {
-                                if (open) {
-                                  setOpenSubMenu(fieldKey)
-                                } else {
-                                  if (openSubMenu === fieldKey) {
-                                    setOpenSubMenu(null)
-                                    setActiveMenu("root")
-                                  }
-                                }
-                              }}
-                            >
-                              <DropdownMenuSubTrigger
-                                id={itemId}
-                                role="option"
-                                aria-selected={isHighlighted}
-                                data-highlighted={isHighlighted || undefined}
-                                onMouseEnter={() => {
-                                  setHighlightedIndex(index)
-                                  setActiveMenu("root")
-                                }}
-                                className="data-popup-open:bg-accent data-popup-open:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground"
-                              >
-                                {field.icon}
-                                <span>{field.label}</span>
-                              </DropdownMenuSubTrigger>
-                              <DropdownMenuSubContent
-                                className="w-[200px]"
-                                side="right"
-                              >
-                                <FilterSubmenuContent
-                                  field={field}
-                                  currentValues={currentValues}
-                                  isMultiSelect={isMultiSelect}
-                                  i18n={mergedI18n}
-                                  isActive={activeMenu === fieldKey}
-                                  onActive={() => {
-                                    if (field.searchable !== false) {
-                                      setActiveMenu(fieldKey)
-                                    }
-                                  }}
-                                  onBack={() => {
-                                    setOpenSubMenu(null)
-                                    setActiveMenu("root")
-                                  }}
-                                  onClose={() => setAddFilterOpen(false)}
-                                  onToggle={(value, isSelected) => {
-                                    if (isMultiSelect) {
-                                      const nextValues = isSelected
-                                        ? (currentValues.filter(
-                                            (v) => v !== value
-                                          ) as T[])
-                                        : ([...currentValues, value] as T[])
-
-                                      if (sessionFilter) {
-                                        if (nextValues.length === 0) {
-                                          onChange(
-                                            filters.filter(
-                                              (f) => f.id !== sessionFilter.id
-                                            )
-                                          )
-                                          setSessionFilterIds((prev) => ({
-                                            ...prev,
-                                            [fieldKey]: "",
-                                          }))
-                                        } else {
-                                          onChange(
-                                            filters.map((f) =>
-                                              f.id === sessionFilter.id
-                                                ? { ...f, values: nextValues }
-                                                : f
-                                            )
-                                          )
-                                        }
-                                      } else {
-                                        const newFilter = createFilter<T>(
-                                          fieldKey,
-                                          field.defaultOperator || "is_any_of",
-                                          nextValues
-                                        )
-                                        onChange([...filters, newFilter])
-                                        setSessionFilterIds((prev) => ({
-                                          ...prev,
-                                          [fieldKey]: newFilter.id,
-                                        }))
-                                      }
-                                    } else {
-                                      const newFilter = createFilter<T>(
-                                        fieldKey,
-                                        field.defaultOperator || "is",
-                                        [value] as T[]
-                                      )
-                                      setLastAddedFilterId(newFilter.id)
-                                      onChange([...filters, newFilter])
-                                      setAddFilterOpen(false)
-                                    }
-                                  }}
-                                />
-                              </DropdownMenuSubContent>
-                            </DropdownMenuSub>
-                          )
-                        }
-
-                        return (
-                          <DropdownMenuItem
-                            key={field.key}
-                            id={itemId}
-                            role="option"
-                            aria-selected={isHighlighted}
-                            data-highlighted={isHighlighted || undefined}
-                            onMouseEnter={() => setHighlightedIndex(index)}
-                            onClick={() => field.key && addFilter(field.key)}
-                            className="data-highlighted:bg-accent data-highlighted:text-accent-foreground"
-                          >
-                            {field.icon}
-                            <span>{field.label}</span>
-                          </DropdownMenuItem>
-                        )
-                      })
-                    })()}
-                  </ScrollArea>
-                </div>
-              </div>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-
-        {filters.map((filter) => {
-          const field = fieldsMap[filter.field]
-          if (!field) return null
-          return (
-            <ButtonGroup key={filter.id}>
-              <ButtonGroupText className="bg-background dark:bg-input/30">
-                {field.icon && field.icon}
-                {field.label}
-              </ButtonGroupText>
-              <FilterOperatorDropdown<T>
-                field={field}
-                operator={filter.operator}
-                values={filter.values}
-                onChange={(operator) => updateFilter(filter.id, { operator })}
-              />
-              <FilterValueSelector<T>
-                field={field}
-                values={filter.values}
-                operator={filter.operator}
-                onChange={(values) => updateFilter(filter.id, { values })}
-                autoFocus={filter.id === lastAddedFilterId}
-              />
-              <FilterRemoveButton onClick={() => removeFilter(filter.id)} />
-            </ButtonGroup>
-          )
-        })}
-      </div>
-    </FilterContext.Provider>
-  )
-}
-
-export const createFilter = <T = unknown,>(
-  field: string,
-  operator?: string,
-  values: T[] = []
-): Filter<T> => ({
-  id: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
-  field,
-  operator: operator || "is",
-  values,
-})
-
-export const createFilterGroup = <T = unknown,>(
-  id: string,
-  label: string,
-  fields: FilterFieldConfig<T>[],
-  initialFilters: Filter<T>[] = []
-): FilterGroup<T> => ({
-  id,
-  label,
-  filters: initialFilters,
-  fields,
-})
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-advanced.tsx b/apps/web/src/components/reui/filters/filters-advanced.tsx
new file mode 100644
index 0000000..8c2fe54
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-advanced.tsx
@@ -0,0 +1,2081 @@
+"use client"
+
+import * as React from "react"
+import { FilterFieldPicker } from "@/components/reui/filters/filters-builder"
+import {
+  FilterMoveToMenuItems,
+  FilterOperatorPopover,
+  FilterRuleMenuItems,
+  FilterValuePopover,
+  useFilterRuleDisplay,
+} from "@/components/reui/filters/filters-chip"
+import {
+  filterControlSizes,
+  filterReadOnlyProps,
+  FilterReorderProvider,
+  isFilterLocked,
+  useFilterActions,
+  useFilterChipAutoOpen,
+  useFilterChipFocused,
+  useFilterFocusEmpty,
+  useFilterFocusStore,
+  useFilterRender,
+  useFilterReorderable,
+  useFilterRowPending,
+  useFilterRowStateStore,
+  useFilterSegmentFocus,
+  useFilterState,
+  type FilterActionsContextValue,
+} from "@/components/reui/filters/filters-context"
+import {
+  FILTER_ROW_SELECTOR,
+  useFilterRowDrag,
+} from "@/components/reui/filters/filters-dnd"
+import { filterIssueLabel } from "@/components/reui/filters/filters-i18n"
+import {
+  FILTER_FIELD_PICKER_CLASS,
+  FILTER_MENU_CLASS,
+  FILTER_MENU_LABEL_CLASS,
+  filterCombinatorSlot,
+  getFilterField,
+  isFilterFieldPickable,
+  joinFilterPath,
+} from "@/components/reui/filters/filters-lib"
+import {
+  getFilterArity,
+  getFilterOperator,
+  operatorTakesValue,
+} from "@/components/reui/filters/filters-operators"
+import {
+  collectFilterIssues,
+  createFilterRule,
+  isFilterRule,
+} from "@/components/reui/filters/filters-query"
+import type {
+  FilterCombinator,
+  FilterEmptyStateContext,
+  FilterField,
+  FilterGroupNode,
+  FilterIssue,
+  FilterNode,
+  FilterOperator,
+  FilterQuery,
+  FilterRule,
+} from "@/components/reui/filters/filters-types"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@evobgp/ui/components/tooltip"
+import { RefreshCwIcon, CircleAlertIcon, GripVerticalIcon, ChevronDownIcon, EllipsisVerticalIcon, XIcon, PlusIcon, CopyIcon, UngroupIcon, Trash2Icon, ListFilterIcon, FolderPlusIcon } from "lucide-react"
+
+/* -------------------------------------------------------------------------- */
+/*                                  Columns                                   */
+/* -------------------------------------------------------------------------- */
+
+const CONTENT_COLUMNS = ["combinator", "field", "operator", "value"] as const
+
+const ACTION_COLUMNS = ["drag", "menu", "add", "remove"] as const
+
+/** Every column a row may draw, in two bands. Navigation is by COLUMN NAME and
+ * never position: the BANDS keep ArrowDown off a group's footer button. */
+type FilterColumn =
+  | (typeof CONTENT_COLUMNS)[number]
+  | (typeof ACTION_COLUMNS)[number]
+
+/** The nearest column in `band` that `available` has; backward wins a tie. */
+function nearestColumn(
+  band: readonly FilterColumn[],
+  from: FilterColumn,
+  available: Map<string | null, HTMLElement>
+): HTMLElement | undefined {
+  const at = band.indexOf(from)
+  if (at === -1) return undefined
+  for (let step = 0; step < band.length; step++) {
+    const before = step === 0 ? undefined : available.get(band[at - step] ?? "")
+    if (before) return before
+    const after = available.get(band[at + step] ?? "")
+    if (after) return after
+  }
+  return undefined
+}
+
+/** Marks a focusable cell control, read by the keyboard walker. Not
+ * `data-slot`: a cell control is handed to a Base UI trigger through `render`,
+ * which stamps its own, so a slot here would be two owners on one attribute. */
+const CELL_ATTRIBUTE = "data-filter-cell"
+
+/** Marks a cell the user TYPES into: the builder claims the arrows, Home, End
+ * and Delete, and each means something else in a text box. */
+const CELL_INPUT_ATTRIBUTE = "data-filter-cell-input"
+
+const ROW_SELECTOR = FILTER_ROW_SELECTOR
+
+/** Hands every row's handle its pointer wiring: only the panel, which owns the
+ * body element, can measure a drop. */
+
+const FilterDragContext = React.createContext<ReturnType<
+  typeof useFilterRowDrag
+> | null>(null)
+
+/** What each node is missing, by id. An empty map by default, so a row mounted
+ * outside the shipped panel gets "nothing is wrong" instead of a throw. */
+const FilterIssueContext = React.createContext<
+  ReadonlyMap<string, FilterIssue>
+>(new Map())
+
+function cellProps(column: FilterColumn, active: FilterColumn | null) {
+  return {
+    "data-filter-cell": column,
+    // ONE tab stop for the whole builder; the arrows move within it.
+    tabIndex: active === column ? 0 : -1,
+  }
+}
+
+/** What an INVALID cell wears: `aria-invalid` to announce it, `data-invalid`
+ * to style it, `aria-description` for the sentence. */
+function issueProps(
+  issue: FilterIssue | undefined,
+  column: FilterIssue["column"],
+  message: string
+) {
+  if (!issue || issue.column !== column) return null
+  return {
+    "aria-invalid": true,
+    "data-invalid": "",
+    "aria-description": message,
+    // NO `title`: the hint icon carries the sentence in a real tooltip, and a
+    // native one would clobber the truncation `title` beside it.
+  } as const
+}
+
+/** Sera's uppercase and wide tracking cost about a third of a cell, so where
+ * every other style drew "migration" sera drew "MIGRATI...". */
+const SERA_TEXT_CLASS = ""
+
+const CELL_CLASS = cn(
+  "w-full min-w-0 justify-between gap-1.5 font-normal",
+  // `>svg` is the caret and only the caret: a field's own type icon sits in a
+  // nested span, where it keeps full strength because it is content.
+  "[&>svg]:text-muted-foreground",
+  // WHAT A CELL GIVES UP FIRST: padding, icon and caret cost about 44px before
+  // a character is drawn, and the name is what nothing else can reconstruct.
+  // Container queries and not a viewport breakpoint: the question is how wide
+  // THIS cell is, and one panel holds a 300px cell and a 40px one.
+  "@max-[7rem]/cell:gap-0 @max-[7rem]/cell:[&>svg]:hidden",
+  "@max-[5rem]/cell:[&_span>svg]:hidden",
+  SERA_TEXT_CLASS
+)
+
+/** What an invalid cell looks like. A ring, not a border: a border changes the
+ * box, so a cell turning invalid would nudge every cell beside it. */
+const CELL_INVALID_CLASS =
+  "data-invalid:ring-destructive/40 data-invalid:ring-1"
+
+/** Width of the leading combinator column. The 58.72px pill put this track at
+ * 4rem and it does not shrink now the pill has: it is sized for the longest of
+ * the three things in it, "Where", 51.44px in every style. */
+const COMBINATOR_CLASS = cn(
+  "w-16 shrink-0 items-center justify-center",
+  // 6px of its own on TOP of the band's `gap-1.5`: this column is the
+  // sentence's connective, not a fourth control butted against the attribute.
+  "me-1.5"
+)
+
+/** The two static words in that column, CENTRED because the pill's own
+ * `justify-center` centres its word. `w-full`, or `truncate` has no box. */
+const COMBINATOR_TEXT_CLASS = cn(
+  "text-muted-foreground w-full truncate px-1 text-center text-sm",
+  SERA_TEXT_CLASS
+)
+
+/** A row is TWO BANDS. The trailing pair of every row at every depth shares one
+ * vertical axis - 0.00px of spread from 1104px to 240px, eight styles, depth
+ * three - and only because the content band may shrink to nothing. */
+const ROW_BAND_CLASS = "flex min-w-0 items-center gap-1.5"
+
+const CONTENT_BAND_CLASS = "flex min-w-0 flex-1 items-center gap-1.5"
+
+/** FLEX and not a block: a `Button` is `inline-flex`, so a block wrapper builds
+ * a line box as tall as its font's strut - 28px buttons in 28.141px wrappers. */
+const CELL_BOX_CLASS = "@container/cell flex min-w-0 shrink grow-0"
+
+/** THE DEFAULT WIDTH OF EACH CONTENT CELL. An INLINE FALLBACK and not a
+ * declaration on the panel: declared, the panel would beat anything an ANCESTOR
+ * set, which is where a consumer sets it in popover mode. So all four work:
+ *
+ *   <Filters variant="advanced" className="[--filter-field-width:14rem]" />
+ *   <FiltersAdvancedPanel className="[--filter-operator-width:7rem]" />
+ *   <Card className="[--filter-value-width:16rem]"><Filters … /></Card>
+ *   [data-slot="filters-advanced"] { --filter-field-width: 14rem } */
+const FIELD_CELL_CLASS = "basis-[var(--filter-field-width,11rem)]"
+const OPERATOR_CELL_CLASS = "basis-[var(--filter-operator-width,9rem)]"
+const VALUE_CELL_CLASS = "basis-[var(--filter-value-width,12rem)]"
+
+/** The trailing band. `pe-1` is on the BAND and not the gutter, since a group
+ * card is `pe-0`; the footer and `DROP_SLOT_INDICATOR` restate the same four. */
+const ACTION_BAND_CLASS = cn(
+  "text-muted-foreground flex shrink-0 items-center gap-0.5 pe-1"
+)
+
+/** What the grip and the kebab wear while open. TWO ATTRIBUTES, because Radix
+ * sets `data-state="open"` and Base UI `data-popup-open`, so one selector alone
+ * would be dead in one twin, silently, in a byte-locked file. */
+const ACTION_CONTROL_CLASS = cn(
+  "hover:inset-ring hover:inset-ring-border",
+  // Base UI.
+  "data-popup-open:inset-ring data-popup-open:inset-ring-border",
+  // Radix.
+  "data-[state=open]:inset-ring data-[state=open]:inset-ring-border"
+)
+
+/** The gap between sibling rows, one third of one measurement:
+ * `FILTER_ROW_SEAM_PX` is HALF of it and the footer's `-mt-*` cancels it. */
+const FILTER_ROW_GAP_CLASS = "gap-3"
+const FILTER_ROW_GAP_CANCEL_CLASS = "-mt-3"
+const FILTER_ROW_HALF_GAP_CLASS = {
+  // The slot names the BOUNDARY between two rows, which is the middle of the
+  // gap: 6px of it less HALF the rule's own 2px, so its CENTRE lands there.
+  before: "data-[drop-edge=before]:after:mb-[5px]",
+  after: "data-[drop-edge=after]:after:mt-[5px]",
+} as const
+
+/** POPOVER: the popover content is `p-0`, so this IS the popup's own inner
+ * padding. INLINE there is no popup, and a panel that pads itself as well is a
+ * second inset the page did not ask for. */
+const PANEL_PAD_VAR = "--filter-panel-pad"
+const PANEL_PAD_POPOVER = "0.75rem"
+const PANEL_PAD_INLINE = "0px"
+
+/** The panel's ONE horizontal rhythm: a row's trailing controls sit at the
+ * content edge, which IS this padding, so a footer that disagrees breaks it. */
+const PANEL_GUTTER_CLASS = "px-(--filter-panel-pad)"
+
+const PANEL_CLASS = "flex w-full min-w-0 flex-col gap-2 py-(--filter-panel-pad)"
+
+/** A RING and not a border, the whole answer to the staggered trailing
+ * controls: a border pushes the content edge inward a pixel per level. */
+const GROUP_CARD_CLASS = cn(
+  "bg-muted/40 min-w-0 flex-1 rounded-md",
+  "inset-ring inset-ring-border",
+  "ps-2 pe-0",
+  "data-invalid:inset-ring-destructive/50",
+  // The DESTINATION of a drop into this group, told apart from the insertion
+  // slot by STYLE and not size: dashed is not there yet, solid exists.
+  "data-drop-into:bg-muted/60",
+  "data-drop-into:outline-1 data-drop-into:outline-solid",
+  "data-drop-into:outline-border data-drop-into:-outline-offset-2"
+)
+
+/** THE CONTAINER a row measures its own room against, on the panel body and on
+ * every group's list, so a row asks how wide the list it is IN is. */
+const TRACK_CONTAINER_CLASS = "@container/track"
+
+/** When a group stops putting its combinator BESIDE the card. A DEPTH budget
+ * was wrong both ways: at 380px the depth-three row painted zero pixels of
+ * field, operator and value and fanned the kebab column out by up to 119px.
+ * 26rem is what a row MEASURES: 134px of fixed cost plus about 200px of cells. */
+const GROUP_COMBINATOR_WRAP_CLASS = "@max-[26rem]/track:w-full"
+
+/** The combinator itself, once its wrapper has a whole line. Pinned to the
+ * same 4rem the gutter track is, so it is the same control at every width. */
+const GROUP_COMBINATOR_WRAPPED_CLASS = "@max-[26rem]/track:w-16"
+
+/** How a row shows where a dragged node would land. `data-drop-edge` is an
+ * insertion BETWEEN rows, drawn here; `data-drop-into` is painted on the CARD,
+ * so "inside this group" and "after this group" are not one picture. */
+const DROP_SLOT_INDICATOR = cn(
+  // The SOURCE in flight, faded rather than hidden. THREE FIFTHS is a contrast
+  // measurement: at 35 under a `blur-[1px]` the text composited to #a9a9a9,
+  // 2.35:1 on the light panel, under even the 3:1 line for a non-text mark.
+  "relative rounded-md",
+  "data-dragging:opacity-60",
+  // THE INSERTION LINE lives in the gap rather than overlaying a real row.
+  // `end-1` and not `end-0`: four pixels of `pe-1` are the kebab column.
+  "data-drop-edge:after:absolute",
+  "data-drop-edge:after:start-0 data-drop-edge:after:end-1",
+  "data-drop-edge:after:h-0.5 data-drop-edge:after:rounded-full",
+  "data-drop-edge:after:bg-primary",
+  "data-drop-edge:after:z-10",
+  "data-[drop-edge=before]:after:bottom-full",
+  FILTER_ROW_HALF_GAP_CLASS.before,
+  "data-[drop-edge=after]:after:top-full",
+  FILTER_ROW_HALF_GAP_CLASS.after
+)
+
+/** What a CONDITION row draws, which is what a group's row draws: the slot and
+ * nothing else. It used to add a faint dashed outline of its own, a second
+ * dashed rectangle a few pixels from the first saying what it already said. */
+const DROP_INDICATOR = DROP_SLOT_INDICATOR
+
+/** How the footer says "append to the top level": the same RULE the rows draw.
+ * `data-drop-into` and not `data-drop-edge`, because an explicit zone is a
+ * DESTINATION. Both ends restate the padding VARIABLE, since `inset` resolves
+ * against the PADDING box and `inset-x-0` overran every rule above it. */
+const FOOTER_DROP_CLASS = cn(
+  "data-drop-into:after:absolute",
+  "data-drop-into:after:start-(--filter-panel-pad)",
+  "data-drop-into:after:end-[calc(var(--filter-panel-pad)+4px)]",
+  "data-drop-into:after:top-0 data-drop-into:after:h-0.5",
+  "data-drop-into:after:rounded-full data-drop-into:after:bg-primary"
+)
+
+/** The cells a row owns ITSELF: a group's row contains its children's rows, so
+ * a bare `querySelectorAll` would let ArrowRight walk into the first of them. */
+function ownCells(row: HTMLElement): HTMLElement[] {
+  return Array.from(
+    row.querySelectorAll<HTMLElement>(`[${CELL_ATTRIBUTE}]`)
+  ).filter((cell) => cell.closest<HTMLElement>(ROW_SELECTOR) === row)
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Shared cells                                */
+/* -------------------------------------------------------------------------- */
+
+interface RowPosition {
+  index: number
+  parentId: string
+  combinator: FilterCombinator
+  depth: number
+}
+
+/** The leading and/or slot: one group is joined by ONE operator, and mixing is
+ * what a nested group is FOR. */
+function CombinatorCell({
+  index,
+  parentId,
+  combinator,
+  active,
+  onFocus,
+  className,
+}: {
+  index: number
+  parentId: string
+  combinator: FilterCombinator
+  active: FilterColumn | null
+  onFocus: (column: FilterColumn) => () => void
+  className?: string
+}) {
+  const actions = useFilterActions()
+  const sizes = filterControlSizes(actions)
+  const slot = filterCombinatorSlot(index)
+  const word = combinator === "and" ? actions.labels.and : actions.labels.or
+
+  if (slot === "where") {
+    return (
+      <span className={cn(COMBINATOR_TEXT_CLASS, className)}>
+        {actions.labels.where}
+      </span>
+    )
+  }
+
+  if (slot === "echo") {
+    return <span className={cn(COMBINATOR_TEXT_CLASS, className)}>{word}</span>
+  }
+
+  const name = actions.labels.combinatorLabel(word)
+
+  return (
+    <Button
+      variant="outline"
+      size={sizes.button}
+      /* The WORD is in the name: the track is fixed, so a locale whose
+         word overflows draws "a...". */
+      aria-label={name}
+      title={name}
+      disabled={actions.disabled}
+      {...filterReadOnlyProps(actions)}
+      className={cn(
+        "group/combinator relative w-full min-w-0 justify-center px-1.5 font-normal",
+        SERA_TEXT_CLASS,
+        className
+      )}
+      {...cellProps("combinator", active)}
+      onFocus={onFocus("combinator")}
+      onClick={() => actions.toggleCombinator(parentId)}
+    >
+      <span className="truncate">{word}</span>
+      {/* ABSOLUTELY POSITIONED, so the word still centres at 0.00px. */}
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute end-1 opacity-0 transition-opacity",
+          "group-hover/combinator:opacity-60",
+          "group-focus-visible/combinator:opacity-60",
+          "[&_svg]:size-3"
+        )}
+      >
+        <RefreshCwIcon
+        />
+      </span>
+    </Button>
+  )
+}
+
+/** Whether dragging this node could change the tree at all; the grip is drawn
+ * only when it could. Every destination outside the footer zone lives inside
+ * some row and the drop layer discards any inside the dragged one, so the sole
+ * child of the root is the one case with nowhere to go. A pure function of the
+ * QUERY, deliberately blind to `disabled` and `readOnly`: a locked bar keeps
+ * its grip, because "you may not move this" and "there is nowhere to move it"
+ * are different sentences. */
+function canFilterNodeMove(
+  query: FilterQuery<unknown>,
+  position: { parentId: string }
+) {
+  if (position.parentId !== query.id) return true
+  return query.rules.length > 1
+}
+
+/** The error, as a QUIET mark the pointer can ask about: ONE per ROW, and
+ * `aria-hidden`, since the cell carries it as `aria-description`. */
+function RowIssueHint({
+  message,
+  className,
+}: {
+  message: string
+  className?: string
+}) {
+  if (!message) return null
+  return (
+    <TooltipProvider delay={200}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              data-slot="filter-row-issue"
+              /* Focusable so a keyboard user can summon it, but OUT of the
+                 tab order: the sentence is already on the invalid cell. */
+              tabIndex={-1}
+              aria-hidden="true"
+              className={cn(
+                "text-destructive flex shrink-0 items-center justify-center [&_svg]:size-3.5",
+                className
+              )}
+            >
+              <CircleAlertIcon
+              />
+            </span>
+          }
+        />
+        <TooltipContent side="top">{message}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+/** The drag handle: what ARMS the gesture, since arming the row would turn
+ * every text selection into a drag, and the only thing a screen reader can be
+ * told about, which is why Alt+arrow hangs off it. */
+function RowHandle({
+  nodeId,
+  active,
+  onFocus,
+}: {
+  nodeId: string
+  active: FilterColumn | null
+  onFocus: (column: FilterColumn) => () => void
+}) {
+  const actions = useFilterActions()
+  const sizes = filterControlSizes(actions)
+  const dragProps = React.useContext(FilterDragContext)
+  const locked = isFilterLocked(actions)
+
+  return (
+    <Button
+      variant="ghost"
+      size={sizes.icon}
+      aria-label={actions.labels.reorder}
+      /* The activation is the DRAG, which no click performs, so without these
+         a screen reader finds a "Reorder" button that appears broken. */
+      aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown"
+      aria-description={actions.labels.reorderHint}
+      disabled={actions.disabled}
+      {...filterReadOnlyProps(actions)}
+      /* `touch-none`, or a finger on the handle becomes a page scroll the
+         gesture then fights. Muted at rest, never hidden. */
+      className={cn(
+        "focus-visible:text-foreground cursor-grab touch-none",
+        "active:cursor-grabbing",
+        ACTION_CONTROL_CLASS
+      )}
+      {...cellProps("drag", active)}
+      onFocus={onFocus("drag")}
+      /* Not armed at all while locked; the engine refuses it again. */
+      {...(locked ? null : dragProps?.(nodeId))}
+    >
+      <GripVerticalIcon
+      />
+    </Button>
+  )
+}
+
+/** Which cell of a row owns the builder's single tab stop. An operator change
+ * can take the value column out from under the focus pointing at it. */
+function useActiveColumn(
+  nodeId: string,
+  columns: FilterColumn[],
+  isFirstRow: boolean
+): FilterColumn | null {
+  const focused = useFilterChipFocused(nodeId)
+  const segment = useFilterSegmentFocus(nodeId)
+  const noFocus = useFilterFocusEmpty()
+
+  if (focused) {
+    return segment && columns.includes(segment as FilterColumn)
+      ? (segment as FilterColumn)
+      : columns[0]
+  }
+  return noFocus && isFirstRow ? columns[0] : null
+}
+
+function useFilterIssue(nodeId: string): FilterIssue | undefined {
+  return React.useContext(FilterIssueContext).get(nodeId)
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Inline free text                              */
+/* -------------------------------------------------------------------------- */
+
+/** Whether a value is FREE TEXT, and therefore typed in the row itself. The
+ * CHIP row keeps its popover for every value, deliberately, which is why this
+ * lives here and not in the shared display hook. NUMBER is in: empty clears,
+ * and anything unparseable snaps back to the last committed number. */
+function usesInlineTextEditor<V, O>(
+  field: FilterField<V, O>,
+  operator: FilterOperator | undefined,
+  hasCustomDisplay: boolean
+): boolean {
+  if (field.editor) return false
+  if (field.options || field.loadOptions) return false
+  if (field.renderValue || field.valueText || hasCustomDisplay) return false
+  const type = field.type ?? "text"
+  if (type !== "text" && type !== "number") return false
+  return getFilterArity(operator) === "one"
+}
+
+/** The value cell as a real text box. COMMIT IS BLUR AND ENTER: per keystroke
+ * makes the ROOT the source of truth for every character, and debouncing only
+ * adds a window where the cell and the query disagree with no event. */
+function FilterInlineValueCell<V, O>({
+  rule,
+  field,
+  issue,
+  issueText,
+  active,
+  onFocus,
+}: {
+  rule: FilterRule<V>
+  field: FilterField<V, O>
+  issue: FilterIssue | undefined
+  issueText: string
+  active: FilterColumn | null
+  onFocus: (column: FilterColumn) => () => void
+}) {
+  const actions = useFilterActions<V, O>()
+  const focusStore = useFilterFocusStore()
+  const locked = isFilterLocked(actions)
+  const numeric = (field.type ?? "text") === "number"
+  // The handoff the value POPOVER honours, answered by taking the caret.
+  const autoOpen = useFilterChipAutoOpen(rule.id) === "value"
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const committed =
+    rule.value === undefined || rule.value === null ? "" : String(rule.value)
+  const [draft, setDraft] = React.useState(committed)
+  // STATE and not a ref: the sync below runs during render.
+  const [seed, setSeed] = React.useState(committed)
+
+  // Adjusting state during render; an effect would paint the stale text.
+  if (seed !== committed) {
+    setSeed(committed)
+    setDraft(committed)
+  }
+
+  // CONSUMED as it is honoured: a flag left standing is spent by the next row.
+  React.useEffect(() => {
+    if (!autoOpen) return
+    if (!locked) {
+      const input = inputRef.current
+      input?.focus()
+      // SELECTED: the condition step may have coerced a value across.
+      input?.select()
+    }
+    focusStore.set({ id: rule.id, segment: "value", autoOpen: false })
+  }, [autoOpen, locked, focusStore, rule.id])
+
+  const commit = () => {
+    if (draft === seed) return
+
+    if (numeric) {
+      const text = draft.trim()
+      // Empty clears rather than writing 0, which silently matches rows.
+      if (text === "") {
+        actions.updateRule(rule.id, { value: undefined as V })
+        return
+      }
+      const parsed = Number(text)
+      // Revert, do not write: a NaN compares false against every row.
+      if (!Number.isFinite(parsed)) {
+        setDraft(seed)
+        return
+      }
+      actions.updateRule(rule.id, { value: parsed as V })
+      return
+    }
+
+    actions.updateRule(rule.id, { value: draft as V })
+  }
+
+  return (
+    /* A FRAGMENT, not a wrapper: the positioning context for the error mark
+       is the CELL itself, which already carries the column's basis. */
+    <>
+      <Input
+        ref={inputRef}
+        aria-label={field.label}
+        placeholder={field.placeholder ?? actions.labels.valuePlaceholder}
+        /* The RIGHT KEYPAD only: `type="number"` brings spinners. */
+        inputMode={numeric ? "decimal" : undefined}
+        value={draft}
+        /* `h-full` and no size class: `Input` has ONE height per style, so
+           at `size="sm"` it was a pixel taller in nova and two in sera. */
+        className={cn("h-full", issueText && "pe-7", CELL_INVALID_CLASS)}
+        /* Native `readOnly`, not `disabled`: it keeps its tab stop. */
+        readOnly={locked}
+        disabled={actions.disabled}
+        {...filterReadOnlyProps(actions)}
+        {...cellProps("value", active)}
+        {...{ [CELL_INPUT_ATTRIBUTE]: "" }}
+        {...issueProps(issue, "value", issueText)}
+        onFocus={onFocus("value")}
+        onChange={(event) => setDraft(event.target.value)}
+        onBlur={commit}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+            event.preventDefault()
+            commit()
+            return
+          }
+          if (event.key === "Escape") {
+            /* Only when there is something to revert; Escape belongs to the
+               surface the builder sits in. */
+            if (draft === seed) return
+            event.preventDefault()
+            event.stopPropagation()
+            setDraft(seed)
+          }
+        }}
+      />
+      <RowIssueHint
+        message={issueText}
+        /* `pointer-events-none`, so a click still lands in the input. */
+        className="pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 [&>*]:pointer-events-auto"
+      />
+    </>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Rule row                                  */
+/* -------------------------------------------------------------------------- */
+
+export interface FilterAdvancedRowProps<V = unknown> {
+  rule: FilterRule<V>
+  position: RowPosition
+}
+
+function FilterAdvancedRowImpl<V, O>({
+  rule,
+  position,
+}: FilterAdvancedRowProps<V>) {
+  const actions = useFilterActions<V, O>()
+  const render = useFilterRender<V, O>()
+  const sizes = filterControlSizes(actions)
+  const focusStore = useFilterFocusStore()
+  const locked = isFilterLocked(actions)
+  const { query } = useFilterState<V>()
+
+  const field = getFilterField(actions.index, rule.path)
+  const operators = field ? actions.resolveOperators(field) : []
+  const operator = getFilterOperator(operators, rule.operator)
+  const takesValue = Boolean(rule.operator) && operatorTakesValue(operator)
+  const inlineValue =
+    takesValue && field
+      ? usesInlineTextEditor(field, operator, Boolean(render.renderValue))
+      : false
+
+  const issue = useFilterIssue(rule.id)
+  const issueText = issue ? filterIssueLabel(issue, actions.labels) : ""
+
+  const {
+    pathText,
+    pathLabel,
+    pathCollapsed,
+    operatorLabel,
+    valueLabel,
+    valueText,
+    valueFullText,
+    valueEmpty,
+  } = useFilterRuleDisplay<V, O>(rule, field, operator)
+
+  /* ------------------------------ field cell ------------------------------ */
+
+  const fieldAutoOpen = useFilterChipAutoOpen(rule.id) === "field"
+  const [pickerOpen, setPickerOpen] = React.useState(false)
+  // Controlled so both can REFUSE to open while locked.
+  const [menuOpen, setMenuOpen] = React.useState(false)
+  // Seeded from the rule's own level, so amending opens beside its siblings.
+  const [pickerPath, setPickerPath] = React.useState<string[]>(() =>
+    rule.path.slice(0, -1)
+  )
+  const [pickerQuery, setPickerQuery] = React.useState("")
+
+  // A new row arrives with a GUESS at its field, so the one choice not yet the
+  // user's own opens itself. CONSUMED as it is honoured: `pickerOpen` is a
+  // dependency, so a flag left standing reopened the picker in the frame it
+  // closed, a keyboard trap on the one row a user creates most.
+  React.useEffect(() => {
+    if (!fieldAutoOpen || pickerOpen) return
+    if (!locked) setPickerOpen(true)
+    focusStore.set({ id: rule.id, segment: "field", autoOpen: false })
+  }, [fieldAutoOpen, pickerOpen, locked, focusStore, rule.id])
+
+  // Re-seed on each open, so a browse that was abandoned last time does not
+  // decide where this one starts.
+  React.useEffect(() => {
+    if (!pickerOpen) return
+    setPickerPath(rule.path.slice(0, -1))
+    setPickerQuery("")
+  }, [pickerOpen, rule.path])
+
+  /* ------------------------------- tab stop ------------------------------- */
+
+  const slot = filterCombinatorSlot(position.index)
+  const reorderable = useFilterReorderable()
+  const canMove = reorderable && canFilterNodeMove(query, position)
+  const rowStateStore = useFilterRowStateStore()
+  // Still waiting for its attribute, so neither later cell is drawn.
+  const pending = useFilterRowPending(rule.id)
+
+  const columns = React.useMemo(() => {
+    const list: FilterColumn[] = []
+    if (slot === "toggle") list.push("combinator")
+    list.push("field")
+    if (!pending) {
+      list.push("operator")
+      if (takesValue) list.push("value")
+    }
+    // The grip is only a tab stop when it is drawn.
+    if (canMove) list.push("drag")
+    list.push("menu")
+    return list
+  }, [slot, takesValue, canMove, pending])
+
+  const active = useActiveColumn(
+    rule.id,
+    columns,
+    position.depth === 1 && position.index === 0
+  )
+
+  const onCellFocus = React.useCallback(
+    (column: FilterColumn) => () =>
+      focusStore.set({ id: rule.id, segment: column, autoOpen: false }),
+    [focusStore, rule.id]
+  )
+
+  /* -------------------------------- render -------------------------------- */
+
+  if (!field) return null
+
+  return (
+    <div
+      /* A GROUP, not a grid row: four depths of grid describes to no
+         assistive technology at all. */
+      role="group"
+      aria-label={actions.labels.rowLabel(
+        `${pathText} ${operatorLabel}`,
+        position.depth
+      )}
+      data-slot="filter-row"
+      data-node-id={rule.id}
+      data-parent-id={position.parentId}
+      data-index={position.index}
+      data-depth={position.depth}
+      className={cn("group/row", ROW_BAND_CLASS, DROP_INDICATOR)}
+    >
+      <div className={cn(COMBINATOR_CLASS, CELL_BOX_CLASS)}>
+        <CombinatorCell
+          index={position.index}
+          parentId={position.parentId}
+          combinator={position.combinator}
+          active={active}
+          onFocus={onCellFocus}
+        />
+      </div>
+
+      {/* THE CONTENT BAND: sized to itself, not to a share of the row. */}
+      <div className={CONTENT_BAND_CLASS}>
+        <div className={cn(CELL_BOX_CLASS, FIELD_CELL_CLASS)}>
+          <Popover
+            open={pickerOpen}
+            onOpenChange={(next) => {
+              if (next && locked) return
+              setPickerOpen(next)
+            }}
+          >
+            <PopoverTrigger
+              disabled={actions.disabled}
+              {...filterReadOnlyProps(actions)}
+              render={
+                <Button
+                  variant="outline"
+                  size={sizes.button}
+                  /* The path is truncated on screen, so the name carries all
+                     of it: "Primary loca... > State" identifies nothing. */
+                  aria-label={pathText}
+                  /* And as a `title` - unless the path is COLLAPSED, where the
+                     ellipsis inside already carries this exact sentence. */
+                  title={pathCollapsed ? undefined : pathText}
+                  className={CELL_CLASS}
+                  {...cellProps("field", active)}
+                  onFocus={onCellFocus("field")}
+                >
+                  <span className="flex min-w-0 items-center gap-1.5 truncate">
+                    {field.icon}
+                    <span className="truncate">{pathLabel}</span>
+                  </span>
+                  <ChevronDownIcon
+                  />
+                </Button>
+              }
+            />
+            <PopoverContent
+              align="start"
+              className={cn(
+                FILTER_FIELD_PICKER_CLASS,
+                actions.fieldPickerClassName
+              )}
+            >
+              <FilterFieldPicker<V, O>
+                path={pickerPath}
+                onPathChange={setPickerPath}
+                query={pickerQuery}
+                onQueryChange={setPickerQuery}
+                onSelect={(path, defaultOperator) => {
+                  setPickerOpen(false)
+                  // BUILDING versus AMENDING, the fork of the stepped
+                  // flow. Naming `operator` retires the field handoff.
+                  focusStore.set({
+                    id: rule.id,
+                    segment: pending ? "operator" : "field",
+                    autoOpen: pending,
+                  })
+                  // BEFORE the same-path early return, or a row minted
+                  // on a guessed field the user then picks stays pending.
+                  rowStateStore.resolvePending(rule.id)
+                  // Re-picking the field it has is a dismissal.
+                  if (joinFilterPath(path) === joinFilterPath(rule.path)) return
+                  // On the create path the condition stays UNSET, so the
+                  // menu opening next has nothing selected.
+                  actions.updateRule(rule.id, {
+                    path,
+                    operator: pending ? "" : (defaultOperator ?? ""),
+                    value: undefined,
+                  })
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {pending ? null : (
+          <div className={cn(CELL_BOX_CLASS, OPERATOR_CELL_CLASS)}>
+            <FilterOperatorPopover
+              rule={rule}
+              field={field}
+              trigger={
+                <Button
+                  variant="outline"
+                  size={sizes.button}
+                  /* No `aria-label`: the label IS the name. */
+                  title={operatorLabel}
+                  className={cn(
+                    CELL_CLASS,
+                    CELL_INVALID_CLASS,
+                    "text-muted-foreground"
+                  )}
+                  {...cellProps("operator", active)}
+                  {...issueProps(issue, "operator", issueText)}
+                  onFocus={onCellFocus("operator")}
+                >
+                  <span className="truncate">{operatorLabel}</span>
+                  <ChevronDownIcon
+                  />
+                </Button>
+              }
+            />
+          </div>
+        )}
+
+        {/* The cell stays even with no value: dropping it would shift the
+            trailing buttons into the value column on that row alone. It goes
+            ENTIRELY while the row is PENDING, the one case that argument does
+            not cover: a row choosing its attribute has no column count yet. */}
+        {pending ? null : (
+          <div
+            className={cn(
+              CELL_BOX_CLASS,
+              VALUE_CELL_CLASS,
+              /* The positioning context for an inline editor's error mark. */
+              "relative",
+              /* What lets an inline box match the buttons beside it: as tall as
+                 the row, so `h-full` inside resolves to the button height. */
+              "self-stretch"
+            )}
+          >
+            {takesValue ? (
+              inlineValue ? (
+                <FilterInlineValueCell<V, O>
+                  rule={rule}
+                  field={field}
+                  issue={issue}
+                  issueText={issueText}
+                  active={active}
+                  onFocus={onCellFocus}
+                />
+              ) : (
+                <FilterValuePopover
+                  rule={rule}
+                  field={field}
+                  operator={operator}
+                  trigger={
+                    <Button
+                      variant="outline"
+                      size={sizes.button}
+                      /* The VALUE is the name, never the attribute.
+                         Locked, it grows to the whole list. */
+                      aria-label={locked ? valueFullText : valueText}
+                      title={valueFullText}
+                      className={cn(
+                        CELL_CLASS,
+                        CELL_INVALID_CLASS,
+                        "h-full",
+                        valueEmpty && "text-muted-foreground"
+                      )}
+                      {...cellProps("value", active)}
+                      {...issueProps(issue, "value", issueText)}
+                      onFocus={onCellFocus("value")}
+                    >
+                      {/* FREE OUTPUT: whatever the field draws. */}
+                      <span className="min-w-0 flex-1 truncate text-start">
+                        {valueLabel}
+                      </span>
+                      {/* The error, INSIDE the control that failed. */}
+                      <RowIssueHint message={issueText} />
+                    </Button>
+                  }
+                />
+              )
+            ) : null}
+          </div>
+        )}
+      </div>
+
+      {/* The WEIGHT is on the CLUSTER: a `ghost` button names no colour, so
+          the kebab took the full `--foreground`. */}
+      <div className={ACTION_BAND_CLASS}>
+        {canMove ? (
+          <RowHandle nodeId={rule.id} active={active} onFocus={onCellFocus} />
+        ) : null}
+        <DropdownMenu
+          open={menuOpen}
+          onOpenChange={(next) => {
+            if (next && locked) return
+            setMenuOpen(next)
+          }}
+        >
+          <DropdownMenuTrigger
+            disabled={actions.disabled}
+            {...filterReadOnlyProps(actions)}
+            render={
+              <Button
+                variant="ghost"
+                size={sizes.icon}
+                aria-label={actions.labels.chipMenu(field.label)}
+                className={ACTION_CONTROL_CLASS}
+                {...cellProps("menu", active)}
+                onFocus={onCellFocus("menu")}
+              />
+            }
+          >
+            <EllipsisVerticalIcon
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            className={cn(FILTER_MENU_CLASS, actions.menuClassName)}
+          >
+            {/* Grouping is HERE, not on a chip: the keyboard path to
+                `a AND (b OR c)`. */}
+            <FilterRuleMenuItems ruleId={rule.id} allowGrouping />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}
+
+/** One rule, as a row, memoized: the query tree shares structure, so editing
+ * one row of twenty re-renders one. */
+export const FilterAdvancedRow = React.memo(
+  FilterAdvancedRowImpl
+) as typeof FilterAdvancedRowImpl
+
+/** A rule whose field the schema no longer has: dropping it would lose a saved
+ * view's data, rendering nothing would leave it filtering invisibly. */
+function FilterUnknownRow<V>({
+  rule,
+  position,
+}: {
+  rule: FilterRule<V>
+  position: RowPosition
+}) {
+  const actions = useFilterActions()
+  const sizes = filterControlSizes(actions)
+  return (
+    <div
+      role="group"
+      aria-label={actions.labels.rowLabel(
+        rule.path.join(actions.labels.pathSeparator),
+        position.depth
+      )}
+      data-slot="filter-row"
+      data-node-id={rule.id}
+      data-parent-id={position.parentId}
+      data-index={position.index}
+      data-depth={position.depth}
+      data-unknown=""
+      /* The DROP language too: the hit test pushes every row carrying
+         `data-parent-id` into the surface, and this row carries one. */
+      className={cn(ROW_BAND_CLASS, DROP_INDICATOR)}
+    >
+      <span className="text-muted-foreground min-w-0 flex-1 truncate text-sm">
+        {rule.path.join(actions.labels.pathSeparator)}
+      </span>
+      {/* The same trailing band, so the broken row lands on the kebab column. */}
+      <div className={ACTION_BAND_CLASS}>
+        <Button
+          variant="ghost"
+          size={sizes.icon}
+          aria-label={actions.labels.remove}
+          className={ACTION_CONTROL_CLASS}
+          /* Outside the roving scheme: a real tab stop keeps it removable. */
+          data-filter-cell="remove"
+          /* It had no gate, so the one row whose purpose is to be removed
+             could be removed from a read-only bar. */
+          disabled={actions.disabled}
+          {...filterReadOnlyProps(actions)}
+          onClick={() => actions.removeNode(rule.id)}
+        >
+          <XIcon
+          />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Group                                   */
+/* -------------------------------------------------------------------------- */
+
+/** A nested group: an indented card, its conditions, and one way to add
+ * another. The HEADLINE went; the pill outside already says "or". */
+function FilterAdvancedGroup<V, O>({
+  group,
+  position,
+}: {
+  group: FilterGroupNode<V>
+  position: RowPosition
+}) {
+  const actions = useFilterActions<V, O>()
+  const sizes = filterControlSizes(actions)
+  const focusStore = useFilterFocusStore()
+
+  const { query } = useFilterState<V>()
+
+  const issue = useFilterIssue(group.id)
+  const issueText = issue ? filterIssueLabel(issue, actions.labels) : ""
+
+  const reorderable = useFilterReorderable()
+  const canMove = reorderable && canFilterNodeMove(query, position)
+  const rowStateStore = useFilterRowStateStore()
+
+  const slot = filterCombinatorSlot(position.index)
+  const columns = React.useMemo(() => {
+    const list: FilterColumn[] = []
+    if (slot === "toggle") list.push("combinator")
+    // DOM order, which the arrow walker reads: a group's own controls are all
+    // in its footer now, add first and the trailing pair after it.
+    list.push("add")
+    if (canMove) list.push("drag")
+    list.push("menu")
+    return list
+  }, [slot, canMove])
+
+  const active = useActiveColumn(
+    group.id,
+    columns,
+    position.depth === 1 && position.index === 0
+  )
+
+  const onCellFocus = React.useCallback(
+    (column: FilterColumn) => () =>
+      focusStore.set({ id: group.id, segment: column, autoOpen: false }),
+    [focusStore, group.id]
+  )
+
+  const description =
+    group.combinator === "and"
+      ? actions.labels.groupAll
+      : actions.labels.groupAny
+
+  const addInto = () => {
+    const id = addFilterRow(actions, group.id)
+    if (!id) return
+    rowStateStore.markPending(id)
+    focusStore.set({ id, segment: "field", autoOpen: true })
+  }
+
+  return (
+    <div
+      role="group"
+      aria-label={actions.labels.groupLabel(description, position.depth)}
+      data-slot="filter-row"
+      data-node-id={group.id}
+      data-parent-id={position.parentId}
+      data-index={position.index}
+      data-depth={position.depth}
+      /* `flex-wrap` is the whole of the narrow-panel fix. `items-center`
+         measures the flex line, so the pill centres on the card. */
+      className={cn("flex flex-wrap items-center gap-1.5", DROP_SLOT_INDICATOR)}
+    >
+      <div
+        className={cn(
+          COMBINATOR_CLASS,
+          CELL_BOX_CLASS,
+          GROUP_COMBINATOR_WRAP_CLASS
+        )}
+      >
+        <CombinatorCell
+          index={position.index}
+          parentId={position.parentId}
+          combinator={position.combinator}
+          active={active}
+          onFocus={onCellFocus}
+          className={GROUP_COMBINATOR_WRAPPED_CLASS}
+        />
+      </div>
+
+      {/* The CARD lights up as the drop destination, not the header strip the
+          engine measured. This `data-invalid` only styles; the announcement
+          rides the footer's add button, which is the focusable control. */}
+      <div
+        data-slot="filter-group"
+        data-invalid={issue ? "" : undefined}
+        className={GROUP_CARD_CLASS}
+      >
+        {/* Eight pixels, because it is a DROP TARGET and a zone beats a row. */}
+        <div
+          data-slot="filter-group-header"
+          className="flex h-2 items-center"
+          /* The TOP of the card means the top of the list: index 0 PREPENDS.
+             It used to append, so the one place a pointer can aim to say "into
+             this group" put the row at the far other end of it. */
+          data-drop-parent={group.id}
+          data-drop-index={0}
+        />
+
+        {/* A CONTAINER: the box every child row divides up. */}
+        <div
+          className={cn(
+            TRACK_CONTAINER_CLASS,
+            "flex flex-col",
+            FILTER_ROW_GAP_CLASS
+          )}
+        >
+          {group.rules.length === 0 ? (
+            <p
+              className={cn(
+                /* 70% foreground, not the muted token: on the card's tint the
+                   muted foreground measured 4.35:1 in light, under 4.5:1 AA. */
+                "text-foreground/70 rounded-md border border-dashed px-2 py-3",
+                "text-center text-xs",
+                "data-drop-into:border-primary/60 data-drop-into:bg-primary/5",
+                "data-drop-into:text-primary"
+              )}
+              data-slot="filter-group-empty"
+              data-drop-parent={group.id}
+              data-drop-index={0}
+            >
+              {actions.labels.groupPlaceholder}
+            </p>
+          ) : (
+            group.rules.map((node, index) => (
+              <FilterAdvancedNode<V, O>
+                key={node.id}
+                node={node}
+                position={{
+                  index,
+                  parentId: group.id,
+                  combinator: group.combinator,
+                  depth: position.depth + 1,
+                }}
+              />
+            ))
+          )}
+        </div>
+
+        {/* `flex-nowrap`, or the group's kebab leaves the kebab column. */}
+        <div
+          data-slot="filter-group-footer"
+          className="text-muted-foreground flex flex-nowrap items-center gap-2 pt-2 pb-2"
+          data-drop-parent={group.id}
+          data-drop-index={group.rules.length}
+        >
+          <Button
+            variant="outline"
+            size={sizes.button}
+            aria-label={actions.labels.addToGroup}
+            className={cn(
+              /* `shrink` and not merely `min-w-0`: `shrink-0` is baked into
+                 the shadcn button's own base class. */
+              "min-w-0 shrink font-normal",
+              "overflow-hidden",
+              CELL_INVALID_CLASS
+            )}
+            disabled={actions.disabled}
+            {...filterReadOnlyProps(actions)}
+            {...cellProps("add", active)}
+            /* An EMPTY group is flagged on the control that fills it. */
+            {...issueProps(issue, "group", issueText)}
+            onFocus={onCellFocus("add")}
+            onClick={addInto}
+          >
+            <PlusIcon
+            />
+            {actions.labels.addCondition}
+          </Button>
+
+          <div className={cn("ms-auto", ACTION_BAND_CLASS)}>
+            {canMove ? (
+              <RowHandle
+                nodeId={group.id}
+                active={active}
+                onFocus={onCellFocus}
+              />
+            ) : null}
+            <FilterGroupMenu
+              group={group}
+              active={active}
+              onFocus={onCellFocus}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** A group's kebab. A menu row affords six words, where two icons said none. */
+function FilterGroupMenu<V>({
+  group,
+  active,
+  onFocus,
+}: {
+  group: FilterGroupNode<V>
+  active: FilterColumn | null
+  onFocus: (column: FilterColumn) => () => void
+}) {
+  const actions = useFilterActions()
+  const sizes = filterControlSizes(actions)
+  const locked = isFilterLocked(actions)
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={(next) => {
+        if (next && locked) return
+        setOpen(next)
+      }}
+    >
+      <DropdownMenuTrigger
+        disabled={actions.disabled}
+        {...filterReadOnlyProps(actions)}
+        render={
+          <Button
+            variant="ghost"
+            size={sizes.icon}
+            aria-label={actions.labels.groupMenu}
+            className={ACTION_CONTROL_CLASS}
+            {...cellProps("menu", active)}
+            onFocus={onFocus("menu")}
+          />
+        }
+      >
+        <EllipsisVerticalIcon
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className={cn(FILTER_MENU_CLASS, actions.menuClassName)}
+      >
+        <DropdownMenuItem
+          disabled={locked}
+          onClick={() => actions.duplicateNode(group.id)}
+        >
+          <CopyIcon aria-hidden="true" />
+          <span className={FILTER_MENU_LABEL_CLASS}>
+            {actions.labels.duplicate}
+          </span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          disabled={locked}
+          onClick={() => actions.unwrapGroup(group.id)}
+        >
+          {/* The inverse of the row menu's layers glyph. */}
+          <UngroupIcon aria-hidden="true" />
+          <span className={FILTER_MENU_LABEL_CLASS}>
+            {actions.labels.ungroup}
+          </span>
+        </DropdownMenuItem>
+        <FilterMoveToMenuItems nodeId={group.id} />
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          variant="destructive"
+          disabled={locked}
+          onClick={() => actions.removeNode(group.id)}
+        >
+          {/* No colour: the destructive variant paints the row's svgs. */}
+          <Trash2Icon aria-hidden="true" />
+          <span className={FILTER_MENU_LABEL_CLASS}>
+            {actions.labels.removeGroup}
+          </span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function FilterAdvancedNode<V, O>({
+  node,
+  position,
+}: {
+  node: FilterNode<V>
+  position: RowPosition
+}) {
+  const actions = useFilterActions<V, O>()
+
+  if (!isFilterRule(node)) {
+    return <FilterAdvancedGroup<V, O> group={node} position={position} />
+  }
+  if (!getFilterField(actions.index, node.path)) {
+    return <FilterUnknownRow<V> rule={node} position={position} />
+  }
+  return <FilterAdvancedRow<V, O> rule={node} position={position} />
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Adding                                   */
+/* -------------------------------------------------------------------------- */
+
+/** Appends a condition on the first attribute anyone may filter on, at any
+ * depth. `isFilterFieldPickable` is the picker's own rule. */
+function addFilterRow<V, O>(
+  actions: FilterActionsContextValue<V, O>,
+  parentId?: string
+): string | null {
+  // Before `nextId` and before `addRule`: while the store points at a row that
+  // was never created, the whole panel drops out of the tab order.
+  if (isFilterLocked(actions)) return null
+
+  const entry = actions.index.all.find((candidate) =>
+    isFilterFieldPickable(candidate.field)
+  )
+  if (!entry) return null
+
+  const id = actions.nextId()
+  actions.addRule(
+    createFilterRule<V>({
+      id,
+      path: entry.path,
+      // Deliberately empty: the row arrives PENDING, and a seeded default
+      // would open the next menu with its own answer highlighted.
+      operator: "",
+    }),
+    parentId
+  )
+  return id
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Panel                                   */
+/* -------------------------------------------------------------------------- */
+
+/** The panel draws NO border, NO background and NO radius, and takes no
+ * element to be drawn as: a surface is the page's decision. */
+export interface FiltersAdvancedPanelProps {
+  /** Which of the two boxes the panel sits in, the only thing deciding whether
+   * it pads itself: a popover's content is `p-0`, so this padding IS its
+   * inner padding, and `"inline"` is a page that owns its own. */
+  mode?: "popover" | "inline"
+  /** Replaces the empty state for this panel only. Wins over
+   * `Filters.renderEmpty`, the precedence a field has over the root's. */
+  renderEmpty?: (context: FilterEmptyStateContext) => React.ReactNode
+  /** Whether rows can be reordered. See `FiltersProps.reorderable`. */
+  reorderable?: boolean
+  className?: string
+}
+
+/** The builder itself: nested groups over the query tree the chips read. A
+ * group is a parenthesised list joined by ONE operator, so nesting is a real
+ * tree: a flat model cannot represent `a AND (b OR c)` without inventing
+ * precedence, and invented precedence returns the wrong rows. */
+export function FiltersAdvancedPanel<V, O>({
+  mode = "popover",
+  renderEmpty,
+  reorderable = false,
+  className,
+}: FiltersAdvancedPanelProps) {
+  const actions = useFilterActions<V, O>()
+  const panelRender = useFilterRender<V, O>()
+  const sizes = filterControlSizes(actions)
+  const { query, ruleCount, announcement, announcementSeq } =
+    useFilterState<V>()
+  const focusStore = useFilterFocusStore()
+  const rowStateStore = useFilterRowStateStore()
+  // A version counter, because the store is mutable and stable by identity.
+  const rowStateVersion = React.useSyncExternalStore(
+    rowStateStore.subscribe,
+    () => rowStateStore.version(),
+    () => 0
+  )
+  const bodyRef = React.useRef<HTMLDivElement>(null)
+  const locked = isFilterLocked(actions)
+
+  /* ------------------------------ validation ------------------------------ */
+
+  /** What is unfinished, computed ONCE: an empty group is a fact about a
+   * group, not about any row inside it. */
+  const issues = React.useMemo(
+    () =>
+      collectFilterIssues(
+        query,
+        (rule) => {
+          const field = getFilterField(actions.index, rule.path)
+          if (!field) return null
+          return getFilterArity(
+            getFilterOperator(actions.resolveOperators(field), rule.operator)
+          )
+        },
+        // The same normalisation the display callbacks get.
+        (rule) => {
+          const field = getFilterField(actions.index, rule.path)
+          if (!field?.validate) return null
+          const operator = getFilterOperator(
+            actions.resolveOperators(field),
+            rule.operator
+          )
+          if (!operator) return null
+          return field.validate({
+            value: rule.value,
+            values:
+              rule.value === undefined || rule.value === null
+                ? []
+                : Array.isArray(rule.value)
+                  ? (rule.value as unknown[])
+                  : [rule.value],
+            field,
+            operator,
+            arity: getFilterArity(operator) ?? "one",
+            rule,
+            labels: actions.labels,
+          })
+        }
+      ),
+    [query, actions]
+  )
+
+  /** Every issue, keyed by node: what the tree IS, drawn or not. */
+  const issueMap = React.useMemo(
+    () => new Map(issues.map((issue) => [issue.nodeId, issue])),
+    [issues]
+  )
+
+  /** The issues a row may DRAW: the ones on a value committed once. */
+  const visibleIssueMap = React.useMemo(() => {
+    const visible = new Map<string, FilterIssue>()
+    for (const issue of issues) {
+      // CUSTOM ONLY. The built-in reasons describe a row as HALF BUILT,
+      // so every Add filter produced a red row on the happy path.
+      if (issue.reason !== "custom") continue
+      if (rowStateStore.has(issue.nodeId)) visible.set(issue.nodeId, issue)
+    }
+    return visible
+  }, [issues, rowStateStore, rowStateVersion])
+
+  /** Says out loud that a VISIBLE error has appeared, which would
+   * otherwise happen in silence. The DRAWN issues, on a RISE only. */
+  const announcedIssues = React.useRef({
+    count: visibleIssueMap.size,
+    seq: announcementSeq,
+  })
+  React.useEffect(() => {
+    const before = announcedIssues.current
+    announcedIssues.current = {
+      count: visibleIssueMap.size,
+      seq: announcementSeq,
+    }
+    if (announcementSeq !== before.seq) return
+    if (visibleIssueMap.size <= before.count) return
+    actions.announce(actions.labels.issueSummary(visibleIssueMap.size))
+  }, [visibleIssueMap, announcementSeq, actions])
+
+  /** Sends focus to the first thing that needs it. Walked and not selected
+   * by id: a node id is consumer-supplied, and `CSS.escape` is not
+   * optional in a hand-built selector. */
+  const focusFirstIssue = React.useCallback(() => {
+    const first = issues[0]
+    const body = bodyRef.current
+    if (!first || !body) return
+    const row = Array.from(
+      body.querySelectorAll<HTMLElement>(ROW_SELECTOR)
+    ).find((candidate) => candidate.dataset.nodeId === first.nodeId)
+    if (!row) return
+    // A group's issue is drawn on the add button that resolves it.
+    const column = first.column === "group" ? "add" : first.column
+    const target = ownCells(row).find(
+      (cell) => cell.getAttribute(CELL_ATTRIBUTE) === column
+    )
+    target?.focus()
+  }, [issues])
+
+  /* ---------------------------- focus recovery ---------------------------- */
+
+  /** Whether the panel, or a menu of its own, held focus a moment ago. A
+   * blur WITH a `relatedTarget` is focus arriving somewhere real; a blur
+   * with none, or none at all when the element is simply removed, is what
+   * this exists to repair. */
+  const heldFocus = React.useRef(false)
+  const addRowRef = React.useRef<HTMLButtonElement>(null)
+
+  /** Puts focus back after a mutation that destroyed the thing holding it:
+   * measured at 50, 200, 600 and 1200ms after Convert to group, Remove,
+   * Ungroup and Move to group, `document.activeElement` was the BODY,
+   * because a menu restores focus to a trigger the action unmounted. */
+  const restoreFocus = React.useCallback(() => {
+    // A handoff is mid-air and owns focus: between one step being answered
+    // and the next opening `document.activeElement` IS the body.
+    if (focusStore.getSnapshot().autoOpen) return
+    if (!heldFocus.current) return
+    const active = document.activeElement
+    if (active && active !== document.body) return
+    const rows = Array.from(
+      bodyRef.current?.querySelectorAll<HTMLElement>(ROW_SELECTOR) ?? []
+    )
+    const { id, segment } = focusStore.getSnapshot()
+    const row = id
+      ? rows.find((candidate) => candidate.dataset.nodeId === id)
+      : undefined
+    const cells = row ? ownCells(row) : []
+    const target =
+      cells.find((entry) => entry.getAttribute(CELL_ATTRIBUTE) === segment) ??
+      cells[0] ??
+      (rows[0] ? ownCells(rows[0])[0] : undefined) ??
+      addRowRef.current ??
+      undefined
+    target?.focus()
+  }, [focusStore])
+
+  // In the passive effect, not a frame later: React removes the control in
+  // the mutation phase, so a menu's restore then aims at a detached node.
+  React.useEffect(() => {
+    restoreFocus()
+  }, [query, announcementSeq, restoreFocus])
+
+  /* -------------------------------- adding -------------------------------- */
+
+  const addRow = React.useCallback(() => {
+    const id = addFilterRow(actions)
+    if (!id) return
+    // PENDING until the attribute is chosen, the first of three questions.
+    rowStateStore.markPending(id)
+    focusStore.set({ id, segment: "field", autoOpen: true })
+  }, [actions, focusStore, rowStateStore])
+
+  const addGroup = React.useCallback(() => {
+    const id = actions.addGroup()
+    // An empty id means it refused, and focusing a group never created
+    // would strand the tab stop.
+    if (!id) return
+    // Onto the group's own chrome, not into it: it arrives empty.
+    focusStore.set({ id, segment: "add", autoOpen: false })
+  }, [actions, focusStore])
+
+  /* ------------------------------- keyboard ------------------------------- */
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const cell = (event.target as HTMLElement).closest<HTMLElement>(
+      `[${CELL_ATTRIBUTE}]`
+    )
+    // A key pressed inside an open popover belongs to that popover; its
+    // content is portaled out, so this is belt and braces.
+    //
+    // ArrowDown never reaches here: Base UI stops it at the menu trigger.
+    if (!cell || event.target !== cell) return
+
+    const body = bodyRef.current
+    const row = cell.closest<HTMLElement>(ROW_SELECTOR)
+    if (!body || !row) return
+
+    /* A cell the user TYPES into keeps the keys that edit text; only the
+       VERTICAL keys stay. */
+    const editing = cell.hasAttribute(CELL_INPUT_ATTRIBUTE)
+
+    // DOM order for the two places that mean "the whole builder".
+    const rows = Array.from(body.querySelectorAll<HTMLElement>(ROW_SELECTOR))
+    const cells = ownCells(row)
+    const rowIndex = rows.indexOf(row)
+    const cellIndex = cells.indexOf(cell)
+
+    const rtl = getComputedStyle(cell).direction === "rtl"
+    const forward = rtl ? "ArrowLeft" : "ArrowRight"
+    const backward = rtl ? "ArrowRight" : "ArrowLeft"
+
+    const focus = (target: HTMLElement | undefined) => {
+      if (!target) return
+      event.preventDefault()
+      target.focus()
+    }
+
+    const from = cell.getAttribute(CELL_ATTRIBUTE) as FilterColumn
+    const band = (CONTENT_COLUMNS as readonly FilterColumn[]).includes(from)
+      ? CONTENT_COLUMNS
+      : ACTION_COLUMNS
+
+    /* The rows that draw a cell in this BAND, in cell order: by ROW it went
+       BACKWARDS at +212, -166, +122, -76, +38 pixels once a group's own
+       controls moved to its footer. */
+    const bandRows: HTMLElement[] = []
+    const seen = new Set<HTMLElement>()
+    for (const entry of body.querySelectorAll<HTMLElement>(
+      `[${CELL_ATTRIBUTE}]`
+    )) {
+      const column = entry.getAttribute(CELL_ATTRIBUTE) as FilterColumn
+      if (!(band as readonly FilterColumn[]).includes(column)) continue
+      const owner = entry.closest<HTMLElement>(ROW_SELECTOR)
+      if (!owner || seen.has(owner)) continue
+      seen.add(owner)
+      bandRows.push(owner)
+    }
+    const bandIndex = bandRows.indexOf(row)
+
+    const focusRow = (step: number) => {
+      const nextRow = bandRows[bandIndex + step]
+      if (!nextRow) return
+      const cellsThere = ownCells(nextRow)
+      const byColumn = new Map(
+        cellsThere.map((entry) => [entry.getAttribute(CELL_ATTRIBUTE), entry])
+      )
+      // The band, then anything at all, which keeps a consumer's cell
+      // reachable.
+      focus(nearestColumn(band, from, byColumn) ?? cellsThere[0])
+    }
+
+    const nodeId = row.dataset.nodeId
+    if (!nodeId) return
+
+    // Alt reorders rather than navigates, within the owning group only:
+    // changing depth with an arrow would make one gesture mean two things.
+    if (
+      event.altKey &&
+      (event.key === "ArrowUp" || event.key === "ArrowDown")
+    ) {
+      // Plain arrows, Home and End are deliberately NOT gated.
+      if (locked || !reorderable) return
+      event.preventDefault()
+      actions.moveNode(nodeId, event.key === "ArrowDown" ? 1 : -1)
+      return
+    }
+
+    if (event.key === "ArrowDown") return focusRow(1)
+    if (event.key === "ArrowUp") return focusRow(-1)
+    if (editing) return
+
+    if (event.key === forward) return focus(cells[cellIndex + 1])
+    if (event.key === backward) return focus(cells[cellIndex - 1])
+    if (event.key === "Home") {
+      return focus(event.ctrlKey ? ownCells(rows[0])[0] : cells[0])
+    }
+    if (event.key === "End") {
+      const scope = event.ctrlKey ? ownCells(rows[rows.length - 1]) : cells
+      return focus(scope[scope.length - 1])
+    }
+
+    if (event.key === "Backspace" || event.key === "Delete") {
+      if (locked) return
+      event.preventDefault()
+      actions.removeNode(nodeId)
+      // Focus the row that takes this one's place, so removing several
+      // does not throw focus to the body.
+      requestAnimationFrame(() => {
+        const remaining = Array.from(
+          bodyRef.current?.querySelectorAll<HTMLElement>(ROW_SELECTOR) ?? []
+        )
+        const target = remaining[Math.min(rowIndex, remaining.length - 1)]
+        if (target) ownCells(target)[0]?.focus()
+      })
+    }
+  }
+
+  /* --------------------------------- drag --------------------------------- */
+
+  /** Pointer drag, not HTML5 drag and drop: its drag image is a
+   * browser-owned snapshot no copy badge can be drawn on, and a nested
+   * drop would mean hit-testing on every `dragover`. */
+  const dragProps = useFilterRowDrag({
+    // THE PANEL, reached through the body, because the top level's append
+    // zone is in the FOOTER and the footer is the body's sibling.
+    root: () => bodyRef.current?.parentElement ?? null,
+    disabled: locked,
+    onDrop: (nodeId, drop) => {
+      if (drop.copy) actions.copyNodeTo(nodeId, drop.parentId, drop.index)
+      else actions.moveNodeTo(nodeId, drop.parentId, drop.index)
+    },
+  })
+
+  /* -------------------------------- render -------------------------------- */
+
+  const panelProps = {
+    // The panel's programmatic NAME. `group`, because the rows inside are
+    // groups too, so the tree reads as a query rather than as a landmark.
+    role: "group",
+    "aria-label": actions.labels.advancedFilter,
+    // WHAT IS IN IT, on entry, for a reader who did not press the trigger.
+    // The read-only half rides along: `aria-readonly` is illegal here.
+    "aria-description": actions.readOnly
+      ? `${actions.labels.countAnnouncement(ruleCount)} ${actions.labels.readOnly}`
+      : actions.labels.countAnnouncement(ruleCount),
+    "data-slot": "filters-advanced",
+    "data-readonly": actions.readOnly || undefined,
+    // Capture, and on the PANEL, so portaled menus report too.
+    onFocusCapture: () => {
+      heldFocus.current = true
+    },
+    onBlurCapture: (event: React.FocusEvent) => {
+      if (event.relatedTarget) heldFocus.current = false
+    },
+  } as const
+
+  /** The empty state, resolved once: the panel's own prop, else the root's.
+   * Assembled here so a replacement gets the SAME two actions the footer
+   * calls, focus handoff included. */
+  const renderEmptyState = renderEmpty ?? panelRender.renderEmpty
+  const emptyState = renderEmptyState
+    ? renderEmptyState({
+        labels: actions.labels,
+        readOnly: Boolean(actions.readOnly),
+        mode,
+        addFilter: addRow,
+        addGroup,
+      })
+    : null
+
+  const body = (
+    <>
+      {/* VISIBLE, not an ARIA attribute: `aria-readonly` is illegal on every
+          role here, and dimmed controls owe the reader a reason. */}
+      {actions.readOnly ? (
+        <p
+          data-slot="filters-readonly"
+          className={cn("text-muted-foreground text-xs", PANEL_GUTTER_CLASS)}
+        >
+          {actions.labels.readOnly}
+        </p>
+      ) : null}
+
+      {query.rules.length > 0 ? (
+        <div
+          ref={bodyRef}
+          data-slot="filters-advanced-body"
+          /* NO `overflow-x`: nothing here is ever wider than its box. */
+          className={cn(
+            TRACK_CONTAINER_CLASS,
+            "flex min-w-0 flex-col",
+            FILTER_ROW_GAP_CLASS,
+            PANEL_GUTTER_CLASS
+          )}
+          onKeyDown={onKeyDown}
+        >
+          <FilterReorderProvider value={reorderable}>
+            <FilterDragContext.Provider value={reorderable ? dragProps : null}>
+              <FilterIssueContext.Provider value={visibleIssueMap}>
+                {query.rules.map((node, index) => (
+                  <FilterAdvancedNode<V, O>
+                    key={node.id}
+                    node={node}
+                    position={{
+                      index,
+                      parentId: query.id,
+                      combinator: query.combinator,
+                      depth: 1,
+                    }}
+                  />
+                ))}
+              </FilterIssueContext.Provider>
+            </FilterDragContext.Provider>
+          </FilterReorderProvider>
+        </div>
+      ) : /*
+          THE EMPTY STATE, a real state and not a missing one: with no rules
+          the body renders nothing, so the panel used to open as a footer
+          floating in a blank popover. The HINT is withheld when the bar is
+          locked, since it points at two disabled buttons.
+        */
+      // The CALLBACK's presence decides, not its result: a consumer returning
+      // null wants a blank panel, and `??` would hand them the default back.
+      renderEmptyState ? (
+        emptyState
+      ) : (
+        <div
+          data-slot="filters-advanced-empty"
+          className={cn(
+            "flex flex-col items-center justify-center gap-1 py-8 text-center",
+            PANEL_GUTTER_CLASS
+          )}
+        >
+          <span
+            aria-hidden="true"
+            /* `rounded-full` is the one radius literal safe in every
+               style, square or round. */
+            className="bg-muted text-muted-foreground mb-1 flex size-9 items-center justify-center rounded-full [&_svg]:size-4"
+          >
+            <ListFilterIcon
+            />
+          </span>
+          <p className="text-sm font-medium">{actions.labels.builderEmpty}</p>
+          {actions.readOnly ? null : (
+            <p className="text-muted-foreground text-xs">
+              {actions.labels.builderEmptyHint}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* `shrink-0` on all three: a button clips its label rather than
+          reflowing it, so Clear all read as "ear all filters". */}
+      <div
+        data-slot="filters-advanced-footer"
+        /* THE APPEND TARGET FOR THE TOP LEVEL, which every group's footer had
+           and the root did not: at depth the strip under the last row is a 48px
+           "put it here", while at the root it was 47px of `no-drop`. */
+        data-drop-parent={query.id}
+        data-drop-index={query.rules.length}
+        className={cn(
+          "relative flex flex-wrap items-center gap-2",
+          PANEL_GUTTER_CLASS,
+          /* FOUR PIXELS MORE than the gutter, which is what a row's action
+             band spends after its kebab. */
+          "pe-[calc(var(--filter-panel-pad)+4px)]",
+          FOOTER_DROP_CLASS,
+          /* The strip's BOX reaches the body's bottom edge and pads its
+             content back down, so the append zone TILES with the last row.
+             `pt-5` and not `pt-2`: the row above already grows 4px into this
+             strip, so at `pt-2` the toolbar read as the last filter's tail. */
+          query.rules.length > 0 && cn(FILTER_ROW_GAP_CANCEL_CLASS, "pt-5")
+        )}
+      >
+        <Button
+          /* The last resort of `restoreFocus`: the only control that exists
+             at every query. */
+          ref={addRowRef}
+          /* OUTLINE, and the only pair in the panel with a box: they are
+             what the footer is FOR. */
+          variant="outline"
+          size={sizes.button}
+          className="shrink-0 font-normal"
+          disabled={actions.disabled}
+          {...filterReadOnlyProps(actions)}
+          onClick={addRow}
+        >
+          <PlusIcon
+          />
+          {actions.labels.addCondition}
+        </Button>
+
+        <Button
+          variant="outline"
+          size={sizes.button}
+          className="shrink-0 font-normal"
+          disabled={actions.disabled}
+          {...filterReadOnlyProps(actions)}
+          onClick={addGroup}
+        >
+          <FolderPlusIcon
+          />
+          {actions.labels.addConditionGroup}
+        </Button>
+
+        {/* NO PANEL-LEVEL SUMMARY: a validator's no belongs on the cell. */}
+        {ruleCount > 0 ? (
+          <Button
+            variant="ghost"
+            size={sizes.button}
+            className="text-muted-foreground hover:text-foreground ms-auto shrink-0"
+            disabled={actions.disabled}
+            {...filterReadOnlyProps(actions)}
+            onClick={() => actions.clearQuery()}
+          >
+            {actions.labels.clearAll}
+          </Button>
+        ) : null}
+      </div>
+
+      {/* The `key` is what makes a REPEATED sentence audible: `aria-live`
+          fires on a mutation and React writes nothing when the string is
+          unchanged, so three presses mutated the region once. */}
+      <div aria-live="polite" role="status" className="sr-only">
+        <span key={announcementSeq}>{announcement}</span>
+      </div>
+    </>
+  )
+
+  return (
+    <div
+      {...panelProps}
+      /* An inline style because it is a VALUE: one declaration to beat
+         rather than three classes in three places. */
+      style={
+        {
+          [PANEL_PAD_VAR]:
+            mode === "inline" ? PANEL_PAD_INLINE : PANEL_PAD_POPOVER,
+        } as React.CSSProperties
+      }
+      className={cn(PANEL_CLASS, className)}
+    >
+      {body}
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Root                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface FiltersAdvancedProps {
+  /** Where the builder lives. `"popover"` hangs it off a trigger; `"inline"`
+   * renders the same panel with no popup, for a sidebar or a settings page. */
+  mode?: "popover" | "inline"
+  /** Replaces the default trigger. Ignored inline. */
+  trigger?: React.ReactNode
+  /** Whether rows can be reordered. See `FiltersProps.reorderable`. */
+  reorderable?: boolean
+  /** Popover placement. */
+  align?: "start" | "center" | "end"
+  className?: string
+}
+
+export function FiltersAdvanced<V, O>({
+  mode = "popover",
+  trigger,
+  reorderable = false,
+  align = "start",
+  className,
+}: FiltersAdvancedProps) {
+  const actions = useFilterActions<V, O>()
+  const sizes = filterControlSizes(actions)
+  const { ruleCount } = useFilterState<V>()
+  const [open, setOpen] = React.useState(false)
+
+  if (mode === "inline") {
+    return (
+      <FiltersAdvancedPanel<V, O>
+        mode="inline"
+        reorderable={reorderable}
+        className={className}
+      />
+    )
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      {/* `actions.disabled` alone, and READ ONLY DELIBERATELY DOES NOT
+          GATE IT: opening this panel is reading, not writing. */}
+      <PopoverTrigger
+        /* On the TRIGGER rather than the button below it, so a consumer's own
+           trigger wears the same state. Still `actions.disabled` alone. */
+        disabled={actions.disabled}
+        render={
+          trigger ? (
+            (trigger as React.ReactElement)
+          ) : (
+            <Button
+              variant="outline"
+              size={sizes.button}
+              /* THE COUNT IN THE NAME, not only in the box: a consumer who
+                 replaces `trigger` never had the badge, which is hidden. */
+              aria-label={
+                ruleCount > 0
+                  ? `${actions.labels.advancedFilter}, ${actions.labels.countAnnouncement(ruleCount)}`
+                  : undefined
+              }
+            >
+              <ListFilterIcon
+              />
+              {actions.labels.advancedFilter}
+              {ruleCount > 0 ? (
+                <span
+                  aria-hidden="true"
+                  className="bg-muted text-muted-foreground rounded-sm px-1.5 text-xs tabular-nums"
+                >
+                  {ruleCount}
+                </span>
+              ) : null}
+            </Button>
+          )
+        }
+      />
+      {/* Wide enough for a nested group to keep real words at depth three;
+          the rows truncate rather than wrap. */}
+      <PopoverContent
+        align={align}
+        /* THE POPUP'S OWN NAME: it is a `role="dialog"`, and the panel's is
+           one level in, on its `role="group"`. */
+        aria-label={actions.labels.advancedFilter}
+        className={cn("w-[42rem] max-w-[95vw] p-0", className)}
+      >
+        {/* `mode` defaults to "popover", which keeps the panel's padding. */}
+        <FiltersAdvancedPanel<V, O> reorderable={reorderable} />
+      </PopoverContent>
+    </Popover>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-builder.tsx b/apps/web/src/components/reui/filters/filters-builder.tsx
new file mode 100644
index 0000000..b4dff2a
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-builder.tsx
@@ -0,0 +1,303 @@
+import * as React from "react"
+import {
+  Cascader,
+  CascaderEmpty,
+  CascaderList,
+  CascaderPanel,
+  CascaderStatus,
+} from "@/components/reui/cascader/cascader"
+import { CascaderFooter } from "@/components/reui/cascader/cascader-footer"
+import {
+  CascaderBreadcrumb,
+  CascaderInput,
+  CascaderNav,
+} from "@/components/reui/cascader/cascader-nav"
+import type {
+  CascaderActionItem,
+  CascaderLabels,
+  CascaderNode,
+} from "@/components/reui/cascader/cascader-types"
+import { CascaderVirtualItems } from "@/components/reui/cascader/cascader-virtual"
+import {
+  filterControlSizes,
+  filterReadOnlyProps,
+  useFilterActions,
+  useFilterState,
+} from "@/components/reui/filters/filters-context"
+import {
+  FILTER_FIELD_PICKER_CLASS,
+  getFilterField,
+  getFilterFieldCount,
+  joinFilterPath,
+  splitFilterPath,
+} from "@/components/reui/filters/filters-lib"
+import { getDefaultFilterOperator } from "@/components/reui/filters/filters-operators"
+import type { FilterField } from "@/components/reui/filters/filters-types"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import { ListFilterPlusIcon } from "lucide-react"
+
+/**
+ * Projects ONLY the field tree: operators or values as nodes would force the
+ * wizard through a combobox that owns the arrows and `aria-activedescendant`.
+ */
+function toCascaderNodes<V, O>(
+  fields: readonly FilterField<V, O>[],
+  parentPath: string[] = []
+): CascaderNode<FilterField<V, O>>[] {
+  return fields.map((field) => {
+    const path = [...parentPath, field.id]
+    const node: CascaderNode<FilterField<V, O>> = {
+      value: joinFilterPath(path),
+      label: field.label,
+      icon: field.icon,
+      description: field.description,
+      keywords: field.keywords,
+      disabled: field.disabled,
+      data: field,
+    }
+    if (field.fields?.length) {
+      node.children = toCascaderNodes(field.fields, path)
+      node.count = getFilterFieldCount(field)
+    }
+    return node
+  })
+}
+
+export interface FilterFieldPickerProps {
+  /** The level being browsed. Not the chosen field. */
+  path: string[]
+  onPathChange: (path: string[]) => void
+  query: string
+  onQueryChange: (query: string) => void
+  /** A field was chosen, with its starting operator already resolved. */
+  onSelect: (path: string[], defaultOperator: string | null) => void
+  /** Viewport height before the list scrolls. */
+  maxHeight?: number
+  /** Cascader-only strings; the `FilterLabels` bridge below covers the rest. */
+  labels?: Partial<CascaderLabels>
+  /** Pinned footer rows, OUT of the option ring so arrows never land on one. */
+  actions?: CascaderActionItem[]
+}
+
+/**
+ * Fully controlled, not draft-driven, so ONE picker serves both the create
+ * popover (driven by the draft reducer) and an advanced row (its own state).
+ */
+export function FilterFieldPicker<V, O>({
+  path,
+  onPathChange,
+  query,
+  onQueryChange,
+  onSelect,
+  maxHeight = 260,
+  labels: labelsProp,
+  actions: actionItems,
+}: FilterFieldPickerProps) {
+  const actions = useFilterActions<V, O>()
+
+  const items = React.useMemo(
+    () => toCascaderNodes(actions.index.roots),
+    [actions.index]
+  )
+
+  // Bridges `FilterLabels` onto the cascader's own key names. `labelsProp` is
+  // spread LAST, so a consumer override always wins.
+  const cascaderLabels = React.useMemo<Partial<CascaderLabels>>(
+    () => ({
+      search: actions.labels.searchFields,
+      back: actions.labels.back,
+      empty: actions.labels.empty,
+      pathSeparator: actions.labels.pathSeparator.trim() || "/",
+      itemCount: actions.labels.itemCount,
+      branchAffordance: actions.labels.branchAffordance,
+      rootLevel: actions.labels.fieldsLabel,
+      panelLabel: actions.labels.fieldsLabel,
+      resultsAnnouncement: actions.labels.resultsAnnouncement,
+      actionsLabel: actions.labels.actionsLabel,
+      ...labelsProp,
+    }),
+    [actions.labels, labelsProp]
+  )
+
+  return (
+    <Cascader
+      inline
+      /* Pinned open: inline renders no popup and forces `open`, so the
+         single-select commit's `setOpen(false)` dismisses nothing. That avoids
+         the `multiple` plus `max` workaround and its `aria-multiselectable`. */
+      open
+      onOpenChange={() => {}}
+      items={items}
+      /* No `selectable` predicate: LEAVES commit, branches navigate. Honouring
+         a branch's opt-in made one click mean both drill and commit. */
+      searchScope="deep"
+      /* Nothing is ever selected, so the ~24px check gutter is dead space. */
+      indicator={false}
+      path={path}
+      onPathChange={onPathChange}
+      /* Controlled: the single-select arm of `commit()` never clears the query,
+         so an uncontrolled one would bleed into the next step. */
+      inputValue={query}
+      onInputValueChange={onQueryChange}
+      value=""
+      onValueChange={(value) => {
+        const nextPath = splitFilterPath(value)
+        const field = getFilterField(actions.index, nextPath)
+        if (!field) return
+        onSelect(
+          nextPath,
+          getDefaultFilterOperator(field, actions.resolveOperators(field))
+        )
+      }}
+      labels={cascaderLabels}
+      actions={actionItems}
+      /* Set here only: `CascaderList` takes its own `maxHeight` and that WINS,
+         so a second copy on the list is a divergence waiting to happen. */
+      maxHeight={maxHeight}
+    >
+      <CascaderPanel>
+        <CascaderNav>
+          <CascaderInput placeholder={actions.labels.searchFields} />
+        </CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderEmpty />
+        <CascaderList>
+          {/* WINDOWED: the picker is where scale lives and nothing here pins.
+            Below the threshold it renders what `CascaderItems` does. */}
+          <CascaderVirtualItems />
+        </CascaderList>
+        <CascaderFooter />
+        <CascaderStatus />
+      </CascaderPanel>
+    </Cascader>
+  )
+}
+
+function FieldStep<V, O>() {
+  const actions = useFilterActions<V, O>()
+  const { draft } = useFilterState<V>()
+
+  return (
+    <FilterFieldPicker<V, O>
+      path={draft?.cascaderPath ?? []}
+      onPathChange={(next) =>
+        actions.dispatchDraft({ type: "setCascaderPath", path: next })
+      }
+      query={draft?.query ?? ""}
+      onQueryChange={(query) =>
+        actions.dispatchDraft({ type: "setQuery", query })
+      }
+      onSelect={(path, defaultOperator) =>
+        actions.dispatchDraft({ type: "selectField", path, defaultOperator })
+      }
+    />
+  )
+}
+
+export interface FiltersBuilderProps {
+  /** Replaces the default Add filter button. */
+  trigger?: React.ReactNode
+  className?: string
+}
+
+/**
+ * The Add filter popover. ONE panel, the field step: picking a field commits
+ * the rule and opens the operator menu on the new chip. `open` derives from the
+ * draft and `openCreate` is gated, so read-only and disabled shut every route.
+ */
+export function FiltersBuilder<V, O>({
+  trigger,
+  className,
+}: FiltersBuilderProps) {
+  const actions = useFilterActions<V, O>()
+  const sizes = filterControlSizes(actions)
+  const { draft, ruleCount } = useFilterState<V>()
+  const open = draft !== null && draft.ruleId === null
+  // The HANDOFF close, the one that must not FADE: the panel is a 224px card
+  // dissolving over the very menu the user is now meant to read.
+  const committing =
+    draft !== null && draft.ruleId === null && draft.status === "ready"
+  // LATCHED, because `committing` is true for one render only, before the exit
+  // it suppresses begins. Adjusted during render; an effect is one frame late.
+  const [instantExit, setInstantExit] = React.useState(false)
+  if (committing && !instantExit) setInstantExit(true)
+  else if (open && !committing && instantExit) setInstantExit(false)
+  // Icon-only once chips sit beside it. Both states come off ONE size ladder,
+  // so they share height and radius in every style at every bar size. The
+  // hardcoded `icon`/`default` pair this replaced IS the `default` rung, so it
+  // drifted the moment the bar was `sm`.
+  const compact = ruleCount > 0
+
+  // Base UI's own microtask-then-rAF ordering hands focus to the new chip, NOT
+  // anything this file arranges. Suppressing the close restore with
+  // `finalFocus` only removes the fallback that keeps focus off the BODY.
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) actions.closeDraft()
+        else actions.openCreate()
+      }}
+    >
+      <PopoverTrigger
+        /* On the TRIGGER so a consumer's own `trigger` wears the state too. */
+        disabled={actions.disabled}
+        {...filterReadOnlyProps(actions)}
+        render={
+          trigger ? (
+            (trigger as React.ReactElement)
+          ) : (
+            <Button
+              variant="outline"
+              size={compact ? sizes.icon : sizes.button}
+              aria-label={compact ? actions.labels.addFilter : undefined}
+              /* THE RESET BOUNCE: the button's base class carries
+                 `transition-all`, so flipping the size class eased padding 0 to
+                 `px-6` in sera over 150ms. Naming a transition REPLACES it. */
+              className="transition-[color,background-color,border-color,box-shadow]"
+            >
+              {/* No filter-plus glyph in phosphor or remixicon. */}
+              <ListFilterPlusIcon
+              />
+              {compact ? null : actions.labels.addFilter}
+            </Button>
+          )
+        }
+      />
+      {/* The default, then the root override, then this `className` last, so
+        the specific wins. */}
+      <PopoverContent
+        align="start"
+        className={cn(
+          FILTER_FIELD_PICKER_CLASS,
+          /* See `instantExit`. Both PROPERTIES (an `exit` animation AND a
+             transition each paint over the successor) and both twins (Base UI
+             `data-ending-style`, Radix `data-[state=closed]`); only one can
+             match in a given build. The string stays identical on both sides
+             because listing only the Base UI half left the radix twin fading
+             a 224px card over its successor. */
+          instantExit &&
+            cn(
+              "data-ending-style:animate-none data-ending-style:transition-none",
+              "data-[state=closed]:animate-none data-[state=closed]:transition-none"
+            ),
+          actions.fieldPickerClassName,
+          className
+        )}
+      >
+        <FieldStep<V, O> />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+/** Exported for custom field pickers. */
+export { toCascaderNodes }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-chip.tsx b/apps/web/src/components/reui/filters/filters-chip.tsx
new file mode 100644
index 0000000..601c4c7
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-chip.tsx
@@ -0,0 +1,1069 @@
+import * as React from "react"
+import {
+  filterControlSizes,
+  filterReadOnlyProps,
+  isFilterLocked,
+  useFilterActions,
+  useFilterChipAutoOpen,
+  useFilterChipFocused,
+  useFilterFocusEmpty,
+  useFilterFocusStore,
+  useFilterRender,
+  useFilterReorderable,
+} from "@/components/reui/filters/filters-context"
+import {
+  FilterMenu,
+  useFilterOptions,
+  useFilterValueResolution,
+} from "@/components/reui/filters/filters-editors"
+import {
+  collapseFilterPath,
+  FILTER_MENU_CLASS,
+  FILTER_MENU_LABEL_CLASS,
+  formatFilterPath,
+  getFilterField,
+  getFilterFieldChain,
+} from "@/components/reui/filters/filters-lib"
+import {
+  coerceFilterValue,
+  getFilterArity,
+  getFilterOperator,
+  operatorTakesValue,
+  visibleFilterOperators,
+} from "@/components/reui/filters/filters-operators"
+import {
+  findFilterNode,
+  isFilterGroup,
+} from "@/components/reui/filters/filters-query"
+import type {
+  FilterEditorProps,
+  FilterField,
+  FilterGroupNode,
+  FilterOperator,
+  FilterRule,
+} from "@/components/reui/filters/filters-types"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  ButtonGroup,
+  ButtonGroupText,
+} from "@evobgp/ui/components/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  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 { ChevronRightIcon, CornerDownRightIcon, CopyIcon, ArrowLeftRightIcon, LayersIcon, SlidersHorizontalIcon, Trash2Icon, XIcon, EllipsisVerticalIcon } from "lucide-react"
+
+/** Which part of the chip a pointer or key is aimed at. No `field`: the chip's
+ *  attribute segment is display only, and only the builder re-picks one. */
+type ChipSegment = "operator" | "value" | "menu"
+
+/** The ref half of `autoFocusProps`: a CALLBACK ref, the one shape an editor
+ *  can spread onto any element without a cast, and a no-op here. */
+const noopAutoFocusRef: React.RefCallback<HTMLElement> = () => {}
+
+function defaultValueDisplay<V>(
+  value: V | undefined,
+  operator: FilterOperator | undefined,
+  resolveOption: (value: string) => { label: string } | undefined,
+  labels: ReturnType<typeof useFilterActions>["labels"],
+  // The field's own word for "no value yet", which a generic label cannot beat.
+  fieldPlaceholder?: string,
+  /** Whether the value is PICKED rather than typed: a select's search prompt
+   *  and "enter text..." both give way to `labels.selectPlaceholder`. */
+  optionBacked?: boolean
+): string {
+  const emptyLabel = optionBacked
+    ? labels.selectPlaceholder
+    : (fieldPlaceholder ?? labels.valuePlaceholder)
+  if (value === undefined || value === null || value === "") {
+    return emptyLabel
+  }
+
+  if (getFilterArity(operator) === "range" && Array.isArray(value)) {
+    const [from, to] = value as unknown[]
+    return labels.valueRange(String(from ?? ""), String(to ?? ""))
+  }
+
+  if (Array.isArray(value)) {
+    const values = value as string[]
+    if (values.length === 0) return emptyLabel
+    if (values.length === 1) {
+      return resolveOption(values[0])?.label ?? String(values[0])
+    }
+    return labels.valueCount(values.length)
+  }
+
+  if (typeof value === "boolean") return value ? "True" : "False"
+
+  return resolveOption(String(value))?.label ?? String(value)
+}
+
+/** The same display with the option's own icon in front. A status filter reads
+ *  as its colour before its word, so dropping the swatch the picker showed
+ *  makes the chip harder to scan than the list it came from. */
+function valueWithIcon<V>(
+  value: V | undefined,
+  text: string,
+  resolveOption: (value: string) => { icon?: React.ReactNode } | undefined
+): React.ReactNode {
+  const single =
+    value === undefined || value === null || Array.isArray(value)
+      ? Array.isArray(value) && value.length === 1
+        ? String(value[0])
+        : null
+      : String(value)
+  const icon = single ? resolveOption(single)?.icon : null
+  if (!icon) return text
+  return (
+    <span className="flex items-center gap-1.5">
+      {icon}
+      {text}
+    </span>
+  )
+}
+
+/** The glyph between two ancestors in a nested attribute path, a chevron
+ *  because the `pathSeparator` string read as loud as the names it parts.
+ *  DECORATIVE: `aria-hidden`, and the plain string is still what
+ *  `formatFilterPath` joins for the chip's accessible name and `title`. */
+function FilterPathSeparator() {
+  return (
+    <ChevronRightIcon aria-hidden="true" data-slot="filter-path-separator" className="text-muted-foreground mx-[3px] inline-block size-3 shrink-0 self-center align-[calc(0.3635em_-_0.375rem)]" />
+  )
+}
+
+/** The elided run of a collapsed path, with the FULL path behind it. THE
+ *  TOOLTIP IS NOT THE ACCESSIBLE ROUTE: it is hover and focus, so the segment
+ *  is `aria-hidden` and the whole path stays in the control's NAME. The host's
+ *  own `title` is dropped while collapsed (`pathCollapsed`) or both fire. */
+function FilterPathEllipsis({ full }: { full: string }) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              aria-hidden="true"
+              data-slot="filter-path-ellipsis"
+              /* A path SEGMENT with no air of its own: the chevron's margin
+                 is all that parts a name from the next, and this used to STACK
+                 an `mx` on it. Plain inline, no `vertical-align`: `middle` sat
+                 the dots 1.7px low and inline-block grew the run to 21.17px. */
+              className="text-muted-foreground shrink-0 self-center"
+            >
+              ...
+            </span>
+          }
+        />
+        <TooltipContent>{full}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+/** Everything a rule needs in order to be READ, in either chrome. */
+export interface FilterRuleDisplay {
+  pathText: string
+  pathLabel: React.ReactNode
+  /** Whether `pathLabel` shows fewer names than the path has, so the cell's
+   *  own `title` can step aside for the ellipsis segment's tooltip. */
+  pathCollapsed: boolean
+  operatorLabel: string
+  valueLabel: React.ReactNode
+  /** The same value as PLAIN TEXT, for an accessible name. Never scraped from
+   *  the `renderValue` node: whatever text survives inside avatars and a count
+   *  badge announces "plus one" for two people. Kept separate from
+   *  `valueLabel`, not derived from it: a React node has no honest text to
+   *  read back. A field whose values do not stringify supplies `valueText`
+   *  itself, or the built-in fallback says "[object Object]" to exactly the
+   *  audience the visible display is hiding it from. */
+  valueText: string
+  /** The same value with any collapsed COUNT spelled out. "3 selected" cannot
+   *  be recovered from, which is fine while the editor opens and not once
+   *  locked, so the control carries this as `title` and, locked, as its name. */
+  valueFullText: string
+  valueEmpty: boolean
+}
+
+/** How one rule reads, resolved once and shared by both chromes, so a consumer
+ *  `renderValue`, the field's own and the built-in cannot disagree. */
+export function useFilterRuleDisplay<V, O>(
+  rule: FilterRule<V>,
+  field: FilterField<V, O> | undefined,
+  operator: FilterOperator | undefined
+): FilterRuleDisplay {
+  const actions = useFilterActions<V, O>()
+  const render = useFilterRender<V, O>()
+  // Lazily: a label needs no options until an editor actually opens.
+  const optionsState = useFilterOptions<V, O>(field, false)
+
+  const values =
+    rule.value === undefined || rule.value === null
+      ? []
+      : Array.isArray(rule.value)
+        ? (rule.value as unknown[])
+        : [rule.value]
+
+  // Saved views: values the loader has never returned are resolved through the
+  // field's own `resolveValues`, so a restored chip reads "John Doe", not an id.
+  useFilterValueResolution(field, values)
+
+  const pathText = formatFilterPath(
+    actions.index,
+    rule.path,
+    actions.labels.pathSeparator
+  )
+
+  const chain = getFilterFieldChain(actions.index, rule.path)
+  // The CASCADER's collapser, from the actions context rather than per host, so
+  // a deep path reads the same on a chip and in a builder row.
+  const segments = collapseFilterPath(chain, {
+    maxSegments: actions.maxPathSegments,
+    collapse: actions.pathCollapse,
+  })
+  const pathCollapsed = segments.some((segment) => segment.type === "ellipsis")
+  const pathLabel = chain.length
+    ? segments.map((segment, index) => (
+        <React.Fragment
+          /* Positional, because a field id is unique among its SIBLINGS only:
+             "Company > Team > Company" is a legal path and its two ids collide. */
+          key={
+            segment.type === "field"
+              ? `${index}:${segment.field.id}`
+              : `${index}:ellipsis`
+          }
+        >
+          {index > 0 ? <FilterPathSeparator /> : null}
+          {segment.type === "field" ? (
+            <span>{segment.field.label}</span>
+          ) : (
+            <FilterPathEllipsis full={pathText} />
+          )}
+        </React.Fragment>
+      ))
+    : pathText
+
+  const operatorLabel = operator
+    ? rule.negated
+      ? actions.labels.negated(operator.label)
+      : operator.label
+    : rule.operator || actions.labels.selectCondition
+
+  const valueEmpty =
+    rule.value === undefined ||
+    rule.value === null ||
+    rule.value === ("" as unknown as V) ||
+    values.length === 0
+
+  if (!field) {
+    return {
+      pathText,
+      pathLabel,
+      pathCollapsed,
+      operatorLabel,
+      valueLabel: "",
+      valueText: "",
+      valueFullText: "",
+      valueEmpty,
+    }
+  }
+
+  const valueContext = {
+    value: rule.value,
+    values,
+    field,
+    operator: operator ?? { value: rule.operator, label: rule.operator },
+    // Resolved, not empty: a custom display needs the option behind each value.
+    options: values
+      .map((entry) => optionsState.resolve(String(entry)))
+      .filter(Boolean) as NonNullable<
+      ReturnType<typeof optionsState.resolve>
+    >[],
+    labels: actions.labels,
+  }
+
+  // Computed even when a custom display replaces it: this is the string the
+  // accessible name is built from. `field.valueText` overrides it.
+  const valueText = field.valueText
+    ? field.valueText(valueContext)
+    : defaultValueDisplay(
+        rule.value,
+        operator,
+        optionsState.resolve,
+        actions.labels,
+        field.placeholder,
+        // Option-backed by the FIELD, not the operator: `is any of` is
+        // multi-value on a plain text field too, and that one is typed into.
+        field.type === "select" ||
+          field.type === "multiselect" ||
+          Boolean(field.options?.length) ||
+          Boolean(field.loadOptions)
+      )
+
+  const valueLabel = render.renderValue
+    ? render.renderValue(valueContext)
+    : field.renderValue
+      ? field.renderValue(valueContext)
+      : valueWithIcon(rule.value, valueText, optionsState.resolve)
+
+  // The list behind the count, or the same text again. Multi-value only: a
+  // RANGE also stores an array but already spells both ends out ("10 to 99").
+  const valueFullText =
+    field.valueText ||
+    !Array.isArray(rule.value) ||
+    getFilterArity(operator) === "range" ||
+    values.length < 2
+      ? valueText
+      : actions.labels.valueDetail(
+          valueText,
+          values.map(
+            (entry) =>
+              optionsState.resolve(String(entry))?.label ?? String(entry)
+          )
+        )
+
+  return {
+    pathText,
+    pathLabel,
+    pathCollapsed,
+    operatorLabel,
+    valueLabel,
+    valueText,
+    valueFullText,
+    valueEmpty,
+  }
+}
+
+interface FilterValueEditorProps<V = unknown, O = unknown> {
+  rule: FilterRule<V>
+  field: FilterField<V, O>
+  operator: FilterOperator
+  /** Whether the surface holding it is showing. Gates the option service. */
+  open: boolean
+  onClose: () => void
+}
+
+/** The value editor - draft, option service, commit - with NO surface of its
+ *  own, so surface and wiring can be replaced independently. The draft lives
+ *  here, so a text filter dispatches once on commit, not once per keystroke. */
+function FilterValueEditor<V, O>({
+  rule,
+  field,
+  operator,
+  open,
+  onClose,
+}: FilterValueEditorProps<V, O>) {
+  const actions = useFilterActions<V, O>()
+  const [draft, setDraft] = React.useState<V | undefined>(rule.value)
+
+  React.useEffect(() => {
+    if (open) setDraft(rule.value)
+  }, [open, rule.value])
+
+  const options = useFilterOptions<V, O>(field, open)
+  // A LOOKUP, not a definition: every result is a module-level built-in or the
+  // consumer's own component, so the editor is never remounted mid-edit.
+  const editor = React.useMemo(
+    () => actions.resolveEditor(field, operator),
+    [actions, field, operator]
+  )
+
+  if (!editor) return null
+
+  const editorProps: FilterEditorProps<V, O> = {
+    field,
+    operator,
+    value: draft,
+    onValueChange: (next) => setDraft(next as V),
+    host: "amend",
+    autoFocusProps: {
+      ref: noopAutoFocusRef,
+      autoFocus: true,
+    },
+    commit: (next, commitOptions) => {
+      actions.updateRule(rule.id, {
+        value: (next === undefined ? draft : next) as V,
+      })
+      // A multi-select commits per toggle and asks to stay put; others dismiss.
+      if (commitOptions?.close === false) return
+      onClose()
+    },
+    cancel: onClose,
+    // The same as cancel, honestly: `back` means something only to a `create`
+    // host.
+    back: onClose,
+    options,
+    labels: actions.labels,
+  }
+
+  // `createElement` rather than JSX: the component comes out of a lookup, so
+  // `<Editor />` trips `react-hooks/static-components`. The fragment keeps the
+  // props object, which carries a ref, from looking like a ref read in render.
+  return <>{React.createElement(editor, editorProps)}</>
+}
+
+/** One step of the flow, released when the panel that owes it has LEFT THE
+ *  DOM: both popovers keep portal content mounted through the exit transition,
+ *  so this unmount IS that moment and nothing is timed. `onRelease` is used AS
+ *  the cleanup, so an unmemoized callback fires its step early. */
+function FilterStepHandoff({ onRelease }: { onRelease: () => void }) {
+  React.useEffect(() => onRelease, [onRelease])
+  return null
+}
+
+/** The value host: the editor in a popover anchored to the value segment, and
+ *  BOTH routes end here. The operator popover used to draw the editor itself,
+ *  so a handed-off panel sat a segment's width left of a second press. */
+export interface FilterValuePopoverProps<V = unknown, O = unknown> {
+  rule: FilterRule<V>
+  field: FilterField<V, O>
+  operator: FilterOperator | undefined
+  /** The element that opens it, WITH its own children: a chip segment must be
+   *  a direct child of its `ButtonGroup` for the pill to fuse. */
+  trigger: React.ReactElement
+  className?: string
+}
+
+export function FilterValuePopover<V, O>({
+  rule,
+  field,
+  operator,
+  trigger,
+  className,
+}: FilterValuePopoverProps<V, O>) {
+  const actions = useFilterActions<V, O>()
+  const focusStore = useFilterFocusStore()
+  const autoOpen = useFilterChipAutoOpen(rule.id) === "value"
+  const [open, setOpen] = React.useState(false)
+  const locked = isFilterLocked(actions)
+
+  // The last step of the flow as well as the amend route; by now the condition
+  // menu has UNMOUNTED (see `FilterStepHandoff`). CONSUMED as it is honoured,
+  // or Escape closes the editor and this effect reopens it in the same frame.
+  // The `set` stays OUTSIDE the `locked` guard on purpose: a handoff nobody
+  // spends sits armed until some later chip spends it, and a chip that opened
+  // because a DIFFERENT chip was arrowed onto is worse than one that opened
+  // nothing.
+  React.useEffect(() => {
+    if (!autoOpen || open) return
+    if (!locked) setOpen(true)
+    focusStore.set({ id: rule.id, segment: "value", autoOpen: false })
+  }, [autoOpen, open, focusStore, rule.id, locked])
+
+  // Nothing to open, but the trigger still renders so the value keeps its
+  // place, and it wears the bar's state: that hangs on the TRIGGER below,
+  // which this path never reaches, so the segment used to look live.
+  if (!operator || !actions.resolveEditor(field, operator)) {
+    return React.cloneElement(
+      trigger as React.ReactElement<Record<string, unknown>>,
+      { disabled: actions.disabled, ...filterReadOnlyProps(actions) }
+    )
+  }
+
+  return (
+    // REFUSES to open while locked rather than leaving it to the trigger: an
+    // `aria-disabled` control that still opens an editor is one that lied.
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        if (next && locked) return
+        setOpen(next)
+      }}
+    >
+      {/* The trigger IS the segment, never a wrapper. `ButtonGroup` fuses
+          DIRECT children only (`*:data-slot:rounded-r-none`,
+          `[&>[data-slot]~[data-slot]]:border-l-0`), so a nested one keeps its
+          own border and the chip reads as separate badges. */}
+      <PopoverTrigger
+        render={trigger}
+        disabled={actions.disabled}
+        {...filterReadOnlyProps(actions)}
+      />
+      <PopoverContent align="start" className={cn("w-auto p-0", className)}>
+        <FilterValueEditor<V, O>
+          rule={rule}
+          field={field}
+          operator={operator}
+          open={open}
+          onClose={() => {
+            setOpen(false)
+            focusStore.set({ id: rule.id, segment: "value", autoOpen: false })
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+/* A chip's ATTRIBUTE is fixed once the chip exists: no field popover here. A
+   new field invalidates the operator and the value, so "amending" threw both
+   away. The builder keeps its picker, where a row reads as a form. */
+
+/** The condition menu, and the step after it. The list is the cascader run
+ *  flat: the old hand-rolled one marked the keyboard HIGHLIGHT with
+ *  `aria-selected` and had no Home, End or typeahead. It HANDS OFF to the
+ *  value popover once its own panel has left the DOM; advancing in place
+ *  anchored the editor to the CONDITION segment and doubled up in the row. */
+export interface FilterOperatorPopoverProps<V = unknown, O = unknown> {
+  rule: FilterRule<V>
+  field: FilterField<V, O>
+  trigger: React.ReactElement
+  className?: string
+}
+
+export function FilterOperatorPopover<V, O>({
+  rule,
+  field,
+  trigger,
+  className,
+}: FilterOperatorPopoverProps<V, O>) {
+  const actions = useFilterActions<V, O>()
+  const focusStore = useFilterFocusStore()
+  const autoOpen = useFilterChipAutoOpen(rule.id) === "operator"
+  const [open, setOpen] = React.useState(false)
+  const locked = isFilterLocked(actions)
+  /** Whether the close this panel is going through IS the step being handed
+   *  on. A ref, so it survives the render that closes the popover. Every OPEN
+   *  clears it, so an Escape or an outside press finds it already lowered and
+   *  spends nothing; `release` leaves it standing because one twin asks again
+   *  later: Radix reads it from `onCloseAutoFocus`, a macrotask after the
+   *  unmount. Clearing it in `release` would break that twin only. */
+  const handoff = React.useRef(false)
+  const operators = actions.resolveOperators(field)
+  const operator = getFilterOperator(operators, rule.operator)
+
+  // Memoized because the array IS the menu's identity: the cascader rebuilds
+  // its index per `items` identity, so a fresh array rebuilds it per keystroke.
+  const items = React.useMemo(
+    () =>
+      visibleFilterOperators(operators).map((entry) => ({
+        value: entry.value,
+        label: entry.label,
+      })),
+    [operators]
+  )
+
+  // Opened by the root the moment the chip is created. CONSUMED here, or the
+  // handoff re-opens the menu on the frame Escape closes it. Consumed even
+  // while locked, for the reason on the value popover's copy.
+  React.useEffect(() => {
+    if (!autoOpen || open) return
+    handoff.current = false
+    if (!locked) setOpen(true)
+    focusStore.set({ id: rule.id, segment: "operator", autoOpen: false })
+  }, [autoOpen, open, focusStore, rule.id, locked])
+
+  const close = () => {
+    handoff.current = false
+    setOpen(false)
+    focusStore.set({ id: rule.id, segment: "operator", autoOpen: false })
+  }
+
+  /** The parked step, spent on the frame this panel stops existing. Memoized
+   *  on nothing that changes, and load bearing: `FilterStepHandoff` uses this
+   *  AS its cleanup, so a new identity mid-flow fires the step too early. */
+  const release = React.useCallback(() => {
+    if (!handoff.current) return
+    focusStore.set({ id: rule.id, segment: "value", autoOpen: true })
+  }, [focusStore, rule.id])
+
+  // The chip going away takes its step with it: React destroys a deleted
+  // subtree top down, so this runs before the panel's own cleanup.
+  React.useEffect(
+    () => () => {
+      handoff.current = false
+    },
+    []
+  )
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        if (next && locked) return
+        /* Escape, an outside press, a second press: none is the step being
+           taken, so none may spend it. RETIRED ON OPEN, not on close, and that
+           is a twin difference: in Radix an item choice dismisses through here
+           too, so retiring on close wiped the request before the unmount. */
+        if (next) handoff.current = false
+        setOpen(next)
+      }}
+    >
+      <PopoverTrigger
+        render={trigger}
+        disabled={actions.disabled}
+        {...filterReadOnlyProps(actions)}
+      />
+      <PopoverContent
+        align="start"
+        /* Base UI restores focus to the trigger as this panel closes, which
+           lands on the condition segment AFTER the value editor has opened and
+           focused its input, so a keyboard user is dropped back a step and
+           cannot reach the value at all. Suppressed only while the handoff is
+           up; a function because Base UI resolves it at close time, which is
+           when the ref is accurate. Radix runs the same guard through
+           `onCloseAutoFocus`. */
+        finalFocus={() => !handoff.current}
+        /* `w-auto` with a FLOOR: a catalog sizes to its longest label, and a
+           boolean field's "is" and "is not" would read as a scrap of paper. */
+        className={cn("w-auto min-w-40 p-0", className)}
+      >
+        {/* INSIDE the panel deliberately: only a child of the content is
+            unmounted by the exit transition rather than by the close. */}
+        <FilterStepHandoff onRelease={release} />
+        <FilterMenu
+          items={items}
+          selected={rule.operator ? [rule.operator] : []}
+          onSelectionChange={(values) => {
+            const value = values[0]
+            /* Deselecting the committed operator is a step back rather than a
+               choice, so pressing the current row simply closes. */
+            if (value === undefined) {
+              close()
+              return
+            }
+            const chosen = getFilterOperator(operators, value)
+            /* BUILDING versus AMENDING, the same fork the advanced row draws
+               at its field step. A rule reaches this menu with no operator
+               exactly once, while it is being added, and only then is the
+               value the step after this one. Re-picking the condition on a
+               rule that already has one is an edit of that one cell: it
+               commits and closes, and the user opens the value themselves. */
+            const building = !rule.operator
+            actions.updateRule(rule.id, {
+              operator: value,
+              /* The value moves with the operator: "is" to "is any of" would
+                 leave a bare string where every reader expects an array. */
+              value: coerceFilterValue(
+                rule.value,
+                getFilterOperator(operators, rule.operator),
+                chosen
+              ) as V,
+            })
+            if (building && operatorTakesValue(chosen)) {
+              /* PARKED, not opened: `release` hands the row to its value
+                 surface once this panel has unmounted. */
+              handoff.current = true
+              setOpen(false)
+              return
+            }
+            close()
+          }}
+          labels={actions.labels}
+          ariaLabel={field.label}
+          searchPlaceholder={actions.labels.searchOperators}
+          /* No visible search field: a CLOSED enum of six to ten labels, all
+             on screen. Still RENDERED, visually hidden, because it owns focus
+             and `aria-activedescendant`: arrows, Home, End and typeahead. */
+          searchable={false}
+          /* Taller than a value list on purpose: the operator set is CLOSED, so
+             all of it fits and the height buys the whole catalog. A value list
+             is open ended and would only push its own footer off the screen. */
+          maxHeight={320}
+          /* Deliberately unpinned: one selected operator in a short list, so
+             lifting it would lose the catalog's declared reading order. */
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+/** The keyboard path to a CROSS-GROUP move: Alt+Arrow reorders within the
+ *  owning group only and Wrap creates a NEW group, so the drag layer's
+ *  cross-group move had no keyboard parity. Numbered in document order. */
+export function FilterMoveToMenuItems({ nodeId }: { nodeId: string }) {
+  const actions = useFilterActions()
+  // A menu ITEM takes the native word: both twins already make `disabled`
+  // roving-focusable and `aria-disabled`.
+  const reorderable = useFilterReorderable()
+  const locked = isFilterLocked(actions)
+  // Read at render time: the menu's content mounts when the menu opens, so
+  // this is the tree the user is looking at.
+  const query = actions.getQuery()
+  const found = findFilterNode(query, nodeId)
+  if (!found || !found.parent) return null
+
+  const destinations: { id: string; label: string; size: number }[] = []
+  if (found.parent.id !== query.id) {
+    destinations.push({
+      id: query.id,
+      label: actions.labels.moveToTopLevel,
+      size: query.rules.length,
+    })
+  }
+
+  let position = 0
+  // `inside` suppresses the PUSH and not the walk, so the numbering stays
+  // document order rather than renumbering every group after this one. Counted
+  // before the exclusions for the same reason: the current parent is not
+  // offered but still holds its number, so the numbering is stable whichever
+  // row's menu is open.
+  const visit = (group: FilterGroupNode<unknown>, inside: boolean) => {
+    for (const child of group.rules) {
+      if (!isFilterGroup(child)) continue
+      position += 1
+      // Itself and everything under it: `moveFilterNodeTo` already refuses that
+      // move - it would detach the subtree and leave a cycle - so offering it
+      // would be a menu row that quietly does nothing.
+      const within = inside || child.id === nodeId
+      if (!within && child.id !== found.parent!.id) {
+        destinations.push({
+          id: child.id,
+          label: actions.labels.moveToGroup(position),
+          size: child.rules.length,
+        })
+      }
+      visit(child, within)
+    }
+  }
+  visit(query, false)
+
+  if (destinations.length === 0) return null
+
+  // The THIRD route into a move, gated on the same switch as the grip and
+  // Alt+Arrow: ungated, a builder that draws no handle still reordered here.
+  if (!reorderable) return null
+
+  return (
+    <>
+      {destinations.map((destination) => (
+        <DropdownMenuItem
+          key={destination.id}
+          disabled={locked}
+          onClick={() =>
+            actions.moveNodeTo(nodeId, destination.id, destination.size)
+          }
+        >
+          {/* A bend into the destination: movement, not duplication or nesting. */}
+          <CornerDownRightIcon aria-hidden="true" />
+          <span className={FILTER_MENU_LABEL_CLASS}>{destination.label}</span>
+        </DropdownMenuItem>
+      ))}
+    </>
+  )
+}
+
+/** The per-rule actions, without the trigger: the chip's kebab and a builder
+ *  row's kebab act on the same rule. `allowGrouping` is the CHROME's answer;
+ *  "Convert to advanced filter" is the CONSUMER's, and hides itself there. */
+export function FilterRuleMenuItems({
+  ruleId,
+  /** Offer "Wrap in condition group". Off for the chip row, which cannot draw
+   *  a group; on in the builder, the only way to nest without dragging. */
+  allowGrouping = false,
+}: {
+  ruleId: string
+  allowGrouping?: boolean
+}) {
+  const actions = useFilterActions()
+  // Gated here as well as at the trigger, because this is EXPORTED: a consumer
+  // composing their own menu gets rows that say they are unavailable.
+  const locked = isFilterLocked(actions)
+  return (
+    /* Every row leads with an icon. `IconPlaceholder` because the source ships
+       under five icon sets; no size class, because each style already sizes an
+       unsized svg in a menu row; `aria-hidden`, the label IS the name. */
+    <>
+      <DropdownMenuItem
+        disabled={locked}
+        onClick={() => actions.duplicateNode(ruleId)}
+      >
+        <CopyIcon aria-hidden="true" />
+        <span className={FILTER_MENU_LABEL_CLASS}>
+          {actions.labels.duplicate}
+        </span>
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        disabled={locked}
+        onClick={() => actions.negateRule(ruleId)}
+      >
+        {/* Two arrows swapping: negation flips to the declared inverse. */}
+        <ArrowLeftRightIcon aria-hidden="true" />
+        <span className={FILTER_MENU_LABEL_CLASS}>{actions.labels.negate}</span>
+      </DropdownMenuItem>
+      {allowGrouping ? (
+        <DropdownMenuItem
+          disabled={locked}
+          onClick={() => actions.wrapNodeInGroup(ruleId)}
+        >
+          {/* Layers: braces read as grouping in only three of the five sets. */}
+          <LayersIcon aria-hidden="true" />
+          <span className={FILTER_MENU_LABEL_CLASS}>
+            {actions.labels.wrapInGroup}
+          </span>
+        </DropdownMenuItem>
+      ) : null}
+      {allowGrouping ? <FilterMoveToMenuItems nodeId={ruleId} /> : null}
+      {/* OPTIONAL, and gated on both halves of "would this do anything": the
+          handler is the consumer's opt-in, and an already-advanced bar has
+          nothing to convert. NOT gated on `locked`: it changes no query, is
+          handed no mutator, and the shipped kebab will not open while locked. */}
+      {actions.convertToAdvanced && actions.variant !== "advanced" ? (
+        <DropdownMenuItem onClick={() => actions.convertToAdvanced?.()}>
+          {/* Sliders: the one "advanced settings" glyph in all five sets. */}
+          <SlidersHorizontalIcon aria-hidden="true" />
+          <span className={FILTER_MENU_LABEL_CLASS}>
+            {actions.labels.convertToAdvanced}
+          </span>
+        </DropdownMenuItem>
+      ) : null}
+      <DropdownMenuItem
+        variant="destructive"
+        disabled={locked}
+        onClick={() => actions.removeNode(ruleId)}
+      >
+        {/* No colour: the destructive variant already paints the row's svgs. */}
+        <Trash2Icon aria-hidden="true" />
+        <span className={FILTER_MENU_LABEL_CLASS}>{actions.labels.remove}</span>
+      </DropdownMenuItem>
+    </>
+  )
+}
+
+export interface FilterChipProps<V = unknown> {
+  rule: FilterRule<V>
+  index: number
+}
+
+/** One filter, as a chip. Memoization means something here: the actions
+ *  context is stable, the focus store is subscribed to a boolean and the query
+ *  shares structure, so editing one filter of forty re-renders one chip. */
+function FilterChipImpl<V, O>({ rule, index }: FilterChipProps<V>) {
+  const actions = useFilterActions<V, O>()
+  const render = useFilterRender<V, O>()
+  const focusStore = useFilterFocusStore()
+  const focused = useFilterChipFocused(rule.id)
+  const noFocus = useFilterFocusEmpty()
+  const locked = isFilterLocked(actions)
+  // THE CHIP'S HEIGHT, by way of the one button in it that has one:
+  // `ButtonGroup` is `items-stretch` and no style gives a text segment a
+  // height, so the kebab's rung is the pill's. The RADIUS survives because
+  // every style whose `icon-sm` rounds differently re-pins it in a group.
+  const sizes = filterControlSizes(actions)
+  // The kebab is CONTROLLED so it can refuse to open: every mutating row
+  // behind it is gated. That puts "Convert to advanced filter" out of reach
+  // while locked; a consumer-composed menu still draws it.
+  const [menuOpen, setMenuOpen] = React.useState(false)
+  // Exactly one chip is in the tab order at a time. Before anything has been
+  // focused that is the first chip, so Tab reaches the row in one press.
+  const isTabStop = focused || (noFocus && index === 0)
+
+  const field = getFilterField(actions.index, rule.path)
+  const operators = field ? actions.resolveOperators(field) : []
+  const operator = getFilterOperator(operators, rule.operator)
+
+  const {
+    pathText,
+    pathLabel,
+    pathCollapsed,
+    operatorLabel,
+    valueLabel,
+    valueText,
+    valueFullText,
+    valueEmpty,
+  } = useFilterRuleDisplay<V, O>(rule, field, operator)
+
+  if (!field) {
+    // A rule pointing at a field the schema no longer has. Dropping it loses a
+    // saved view's data; rendering nothing leaves an invisible condition still
+    // filtering. It carries the SAME roving wiring as a real chip: `data-slot`
+    // alone joined the arrow-key query with no `tabIndex` to land on.
+    return (
+      <ButtonGroup
+        data-slot="filter-chip"
+        data-unknown=""
+        role="group"
+        aria-label={actions.labels.filterLabel(
+          rule.path.join(actions.labels.pathSeparator)
+        )}
+        data-focused={focused || undefined}
+        data-rule-id={rule.id}
+        data-index={index}
+        tabIndex={isTabStop ? 0 : -1}
+        onFocusCapture={() => {
+          if (!focused)
+            focusStore.set({ id: rule.id, segment: null, autoOpen: false })
+        }}
+      >
+        <ButtonGroupText className="bg-background dark:bg-input/30 text-muted-foreground">
+          {rule.path.join(actions.labels.pathSeparator)}
+        </ButtonGroupText>
+        <Button
+          variant="outline"
+          size={sizes.icon}
+          className="bg-background dark:bg-input/30"
+          aria-label={actions.labels.remove}
+          /* It had no gate at all, so the one chip whose whole purpose is to be
+             removed could be removed from a bar that refuses every other edit. */
+          disabled={actions.disabled}
+          {...filterReadOnlyProps(actions)}
+          onClick={() => actions.removeNode(rule.id)}
+        >
+          <XIcon
+          />
+        </Button>
+      </ButtonGroup>
+    )
+  }
+
+  if (render.renderChip) return <>{render.renderChip(rule)}</>
+
+  const focusSegment = (segment: ChipSegment) =>
+    focusStore.set({ id: rule.id, segment, autoOpen: false })
+
+  // A rule with no condition yet, KEPT rather than removed (see
+  // `isFilterRuleComplete`), so it has to read as unfinished. Through WORDS:
+  // the dashed outline it replaces degraded to an underline under sera.
+  const incomplete = !rule.operator
+
+  // The same test the value segment renders under, so the name matches the
+  // chip: `valueText` alone appended a placeholder to valueless conditions.
+  const hasValue = Boolean(rule.operator) && operatorTakesValue(operator)
+
+  // The value's spoken form in the chip's NAME: a name is not a prompt, so
+  // "Description contains enter text..." becomes "no value".
+  const valueName =
+    valueEmpty && !field.valueText ? actions.labels.noValue : valueText
+
+  return (
+    <ButtonGroup
+      data-slot="filter-chip"
+      role="group"
+      aria-label={actions.labels.filterLabel(
+        `${pathText} ${operatorLabel}${hasValue ? ` ${valueName}` : ""}`.trim() +
+          (incomplete ? `, ${actions.labels.incomplete}` : "")
+      )}
+      data-focused={focused || undefined}
+      data-incomplete={incomplete || undefined}
+      data-rule-id={rule.id}
+      tabIndex={isTabStop ? 0 : -1}
+      className={cn(
+        /* Sera is an underline style, so the boxed segments are normalised to
+           its bottom-border-only look or the chip reads as a mix of both. */
+        ""
+      )}
+      onFocusCapture={() => {
+        if (!focused)
+          focusStore.set({ id: rule.id, segment: null, autoOpen: false })
+      }}
+      data-index={index}
+    >
+      {/* DISPLAY ONLY: a div, not a button, not a tab stop, no popover. The
+          attribute is fixed for the life of the chip. */}
+      <ButtonGroupText
+        /* Dropped while the path is collapsed: the ellipsis inside carries the
+           same sentence as a tooltip, and the two would stack. */
+        title={pathCollapsed ? undefined : pathText}
+        className="bg-background dark:bg-input/30 cursor-default gap-1.5"
+      >
+        {field.icon}
+        {/* Zero gap INSIDE the path, so the separator's own margin is the only
+            air around a chevron; `gap-1.5` used to stack 6px a side on it. */}
+        <span className="flex items-center">{pathLabel}</span>
+      </ButtonGroupText>
+
+      <FilterOperatorPopover
+        rule={rule}
+        field={field}
+        trigger={
+          <ButtonGroupText
+            render={<button type="button" />}
+            className={cn(
+              "hover:bg-accent bg-background dark:bg-input/30 cursor-default",
+              /* The operator is connective tissue between the field and the
+                 value, so it reads quieter than either - unless it is still
+                 the prompt "Select condition", the one thing to act on. */
+              incomplete ? "text-foreground" : "text-muted-foreground"
+            )}
+            onPointerDown={() => focusSegment("operator")}
+          >
+            {operatorLabel}
+          </ButtonGroupText>
+        }
+      />
+
+      {/* No condition, no value: `getFilterArity(undefined)` defaults to "one",
+          so testing the operator alone renders a stray value segment. */}
+      {hasValue ? (
+        <FilterValuePopover
+          rule={rule}
+          field={field}
+          operator={operator}
+          trigger={
+            <ButtonGroupText
+              render={<button type="button" />}
+              /* Named explicitly rather than by its contents: avatars or a
+                 "+2" badge, and "plus two" says nothing about two people. It
+                 grows to the whole list when the editor cannot be opened,
+                 since locked it must carry what a press no longer reveals. */
+              aria-label={locked ? valueFullText : valueText}
+              /* The pointer's route to the same thing, and only when there is
+                 more to say than the segment already says. */
+              title={valueFullText === valueText ? undefined : valueFullText}
+              className={cn(
+                "hover:bg-accent bg-background dark:bg-input/30 cursor-default",
+                valueEmpty && "text-muted-foreground"
+              )}
+              onPointerDown={() => focusSegment("value")}
+            >
+              {valueLabel}
+            </ButtonGroupText>
+          }
+        />
+      ) : null}
+
+      <DropdownMenu
+        open={menuOpen}
+        onOpenChange={(next) => {
+          if (next && locked) return
+          setMenuOpen(next)
+        }}
+      >
+        <DropdownMenuTrigger
+          disabled={actions.disabled}
+          {...filterReadOnlyProps(actions)}
+          render={
+            <Button
+              variant="outline"
+              size={sizes.icon}
+              /* The same surface the three text segments force. Styles whose
+                 outline button is transparent in dark (sera, luma, rhea) left
+                 the kebab as a notch in an otherwise filled pill. */
+              className="bg-background dark:bg-input/30"
+              aria-label={actions.labels.chipMenu(field.label)}
+              onPointerDown={() => focusSegment("menu")}
+            />
+          }
+        >
+          <EllipsisVerticalIcon
+          />
+        </DropdownMenuTrigger>
+        {/* The SAME sizing the builder's menus use, from one constant: a menu
+            that cuts "Convert to group" in one chrome is one defect twice. */}
+        <DropdownMenuContent
+          align="end"
+          className={cn(FILTER_MENU_CLASS, actions.menuClassName)}
+        >
+          <FilterRuleMenuItems ruleId={rule.id} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ButtonGroup>
+  )
+}
+
+export const FilterChip = React.memo(FilterChipImpl) as typeof FilterChipImpl
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-context.tsx b/apps/web/src/components/reui/filters/filters-context.tsx
new file mode 100644
index 0000000..479a428
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-context.tsx
@@ -0,0 +1,662 @@
+"use client"
+
+import * as React from "react"
+import type { FilterDraftAction } from "@/components/reui/filters/filters-draft"
+import type { FilterPathCollapse } from "@/components/reui/filters/filters-lib"
+import type {
+  FilterCombinator,
+  FilterDraft,
+  FilterDraftStep,
+  FilterEditor,
+  FilterEditorRegistry,
+  FilterEmptyStateContext,
+  FilterField,
+  FilterIndex,
+  FilterLabels,
+  FilterOperator,
+  FilterOption,
+  FilterQuery,
+  FilterRule,
+  FilterValueDisplayContext,
+  FilterValueType,
+} from "@/components/reui/filters/filters-types"
+
+/** Four publishing channels, not one, so a chip never re-renders at the rate
+ *  of the fastest: `actions` republishes on a schema, labels or config change,
+ *  `state` on every query edit and keystroke, `render` on a `renderValue` /
+ *  `renderChip` identity change, `focus` on every arrow key. The reorder flag
+ *  and the row-state store further down are contexts too, but not channels the
+ *  query is published through. */
+
+/* -------------------------------------------------------------------------- */
+/*                                   Actions                                  */
+/* -------------------------------------------------------------------------- */
+
+/** Stable for the life of the component, bar a config change. Every mutator
+ *  reads a latest-props ref rather than closing over the state it needs, so a
+ *  keystroke rebuilds no handler and no memoized chip re-renders. The two lock
+ *  flags are published rather than kept only in that ref: a refusal that lives
+ *  in a ref arrives one commit late. The two resolvers are the deliberate
+ *  exception: they are read DURING render, so they memoize on the values they
+ *  read instead of going through the ref. Every mutator is also the MUTATION
+ *  BOUNDARY - `disabled` and `readOnly` are enforced here, not at the call
+ *  sites that draw the buttons, so a route added next month is refused by
+ *  construction rather than by remembering. See `isFilterLocked`. */
+export interface FilterActionsContextValue<V = unknown, O = unknown> {
+  /** Normalized schema. Also on the state context, from the same memo. */
+  index: FilterIndex<V, O>
+  labels: FilterLabels
+  operatorCatalog: Record<FilterValueType, FilterOperator[]>
+  editors: FilterEditorRegistry
+  size: "sm" | "default"
+  /** The bar is off: nothing operable, and the controls leave the tab order. */
+  disabled: boolean
+  /** Readable and navigable, but not changeable. See `isFilterLocked`. */
+  readOnly: boolean
+
+  /** Which chrome is drawing, so a chip kebab can hide its convert row. */
+  variant: "basic" | "advanced"
+
+  /** Consumer classes for the menus and the field picker, merged AFTER the
+   *  primitive's own defaults so a consumer `w-*` wins through tailwind-merge
+   *  rather than on source order. On the context: four chromes mount the same
+   *  menu, and a per-chrome prop is set in four places and missed in a fifth. */
+  menuClassName: string | undefined
+  fieldPickerClassName: string | undefined
+
+  /** Turns on the chip kebab's "Convert to advanced filter" row: present means
+   *  offered. A callback with no boolean beside it, since only the consumer
+   *  can switch chromes. Changes no query, so it skips the mutation boundary,
+   *  which is safe only because it is handed no setter: a consumer's handler
+   *  has no route to the query at all. */
+  convertToAdvanced: (() => void) | undefined
+
+  /** Path shortening, published so BOTH chromes render the same path. */
+  pathCollapse: FilterPathCollapse
+  maxPathSegments: number
+
+  /** Operators for a field, memoized on the catalog and the schema. */
+  resolveOperators: (field: FilterField<V, O>) => FilterOperator[]
+  resolveEditor: (
+    field: FilterField<V, O>,
+    operator: FilterOperator | undefined
+  ) => FilterEditor<V, O> | undefined
+  /** Value-to-label store shared by every `useFilterOptions` under the root. */
+  resolution: FilterResolutionStore
+
+  /** Appends a rule. Defaults to the ROOT group. The parent is a parameter
+   *  rather than always the root because a nested group's add button is the
+   *  keyboard path into that group, and routing it through the root then
+   *  moving it would be two edits and two announcements for one action. */
+  addRule: (rule: FilterRule<V>, parentId?: string) => void
+  /** Appends an empty group and returns its id, so the caller can focus it.
+   *  Returns an EMPTY STRING when the bar is disabled or read only, the one
+   *  mutator that has to report its refusal: focusing a group that was never
+   *  created strands the tab stop. `""` rather than `string | null` keeps the
+   *  callers that already test the id honest without widening a published
+   *  signature. */
+  addGroup: (parentId?: string, combinator?: FilterCombinator) => string
+  updateRule: (
+    id: string,
+    updates: Partial<Omit<FilterRule<V>, "id" | "type">>
+  ) => void
+  /** Removes a rule OR a group, and prunes the groups that empties. Node-level
+   *  rather than rule-level because a chip only ever removes a rule, while a
+   *  builder row's trash and a group header's trash are the same button on two
+   *  kinds of node. */
+  removeNode: (id: string) => void
+  duplicateNode: (id: string) => void
+  negateRule: (id: string) => void
+  /** Reorders within the node's own parent. Out of range moves are no-ops. */
+  moveNode: (id: string, delta: number) => void
+  /** Moves a node into another group, at an index. The drag-and-drop half. */
+  moveNodeTo: (id: string, parentId: string, index: number) => void
+  /** Copies a node into another group, at an index. The Alt-drag half, apart
+   *  from `duplicateNode` (which copies BESIDE, with no destination): the two
+   *  composed would emit two queries for one gesture, and a controlled
+   *  consumer would persist a tree the user never asked for. */
+  copyNodeTo: (id: string, parentId: string, index: number) => void
+  /** Nests one node in a new group. The keyboard half of the same idea. */
+  wrapNodeInGroup: (id: string, combinator?: FilterCombinator) => void
+  /** Dissolves a group into its parent. The inverse of `wrapNodeInGroup`. */
+  unwrapGroup: (groupId: string) => void
+  setCombinator: (groupId: string, combinator: FilterCombinator) => void
+  toggleCombinator: (groupId: string) => void
+  clearQuery: () => void
+
+  openCreate: () => void
+  openAmend: (id: string, step: FilterDraftStep) => void
+  closeDraft: () => void
+  dispatchDraft: (action: FilterDraftAction<V>) => void
+
+  /** Writes the bar's live region, for a change no visible surface reports: an
+   *  editor's popover is the one place something destructive happens to rows
+   *  the user is not on, with focus, name and text unchanged afterwards. Not a
+   *  query write, so it skips `emit` and asks the lock nothing. */
+  announce: (message: string) => void
+
+  /** Getters for event handlers, so a handler never closes over stale state. */
+  getQuery: () => FilterQuery<V>
+  getDraft: () => FilterDraft<V> | null
+  /** Fresh id from the SSR-safe factory. */
+  nextId: () => string
+}
+
+/* -------------------------------------------------------------------------- */
+/*                             The mutation lock                              */
+/* -------------------------------------------------------------------------- */
+
+/** `disabled` and `readOnly` are NOT two words for one state. `disabled` is
+ *  the native attribute: not operable, out of the tab order. `readOnly` blocks
+ *  MUTATION and preserves NAVIGATION, because a read-only bar exists so a
+ *  keyboard or screen reader user can walk the chips and find out what the
+ *  view is filtered by. Collapsing the two once put the native attribute on
+ *  all thirteen advanced-builder cell controls while the roving tab stop sat
+ *  on a disabled element, so not one row could be reached from the keyboard.
+ *
+ *  So a mutating control keeps its tab stop and wears `aria-disabled` plus
+ *  `data-readonly` (`filterReadOnlyProps`), this repo's convention for
+ *  "present, focusable, not operable". `aria-readonly` is never used, being
+ *  disallowed on the button, group and toolbar roles, so the BAR says it in
+ *  prose through `labels.readOnly`. The refusal itself is enforced once, where
+ *  all fourteen query writes pass through `emit` in `filters.tsx`. */
+export function isFilterLocked(state: {
+  disabled: boolean
+  readOnly: boolean
+}): boolean {
+  return state.disabled || state.readOnly
+}
+
+/** What a MUTATING control wears while the bar is read only. `null` when the
+ *  bar is disabled, because the native attribute already says it. A
+ *  conditional spread, not explicit `undefined`s: `aria-disabled="false"` on
+ *  an enabled control is noise, and `data-readonly` is a presence hook. */
+export function filterReadOnlyProps(state: {
+  disabled: boolean
+  readOnly: boolean
+}) {
+  if (state.disabled || !state.readOnly) return null
+  return { "aria-disabled": true, "data-readonly": "" } as const
+}
+
+/* -------------------------------------------------------------------------- */
+/*                               The size ladder                              */
+/* -------------------------------------------------------------------------- */
+
+/** The two shadcn button sizes one filters size resolves to. Two rungs because
+ *  shadcn ships a separate ladder for labelled and for icon-only buttons, and
+ *  pairing them keeps a row's kebab as tall as the cell beside it. */
+export interface FilterControlSizes {
+  /** Labelled buttons: the row cells, both triggers, the panel footer. */
+  button: "sm" | "default"
+  /** Icon-only buttons, and also the CHIP's height: a chip is an
+   *  `items-stretch` `ButtonGroup` and no style gives its text segment a
+   *  height, so the segments stretch to the kebab, the one child that has one.
+   *  Sizing the kebab sizes the pill. */
+  icon: "icon-sm" | "icon"
+}
+
+/** ONE ladder, keyed off `size`, for every control the chrome renders, because
+ *  the alternative already happened: five advanced-builder cells took
+ *  `actions.size` while seven sites hardcoded `icon-sm` and three `sm`, giving
+ *  one row three heights. Nothing here is a pixel - each value is a shadcn
+ *  size NAME that `Button` resolves per style, since the control-height ladder
+ *  is per style (nova 7/8, sera 9/10, mira 6/7, and so on), and the glyph size
+ *  rides the same name, so pinning an icon size in here would fight the style
+ *  rather than match it. Two rungs only: `lg` would make the bar taller than
+ *  the style's own default control height (want taller, pick a taller STYLE),
+ *  and `icon-xs` is a 20-24px square in most styles, too small for a chip's
+ *  own label to clear. */
+const FILTER_CONTROL_SIZES: Record<"sm" | "default", FilterControlSizes> = {
+  sm: { button: "sm", icon: "icon-sm" },
+  default: { button: "default", icon: "icon" },
+}
+
+/** The pair for a bar's size, off anything with a `size`, so a
+ *  consumer-composed chrome uses the same ladder as the shipped one. The
+ *  fallback is for JavaScript callers: a `"lg"` TypeScript would have rejected
+ *  must still draw buttons rather than throw on `.button`. */
+export function filterControlSizes(state: {
+  size: "sm" | "default"
+}): FilterControlSizes {
+  return FILTER_CONTROL_SIZES[state.size] ?? FILTER_CONTROL_SIZES.default
+}
+
+const FilterActionsContext =
+  React.createContext<FilterActionsContextValue | null>(null)
+
+export function useFilterActions<
+  V = unknown,
+  O = unknown,
+>(): FilterActionsContextValue<V, O> {
+  const context = React.useContext(FilterActionsContext)
+  if (!context) {
+    throw new Error("useFilterActions must be used inside <Filters>")
+  }
+  return context as unknown as FilterActionsContextValue<V, O>
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    State                                   */
+/* -------------------------------------------------------------------------- */
+
+/** Volatile by construction: typing one character into a value editor
+ *  republishes it. Subscribe from the bar and the panel, never from a chip. */
+export interface FilterStateContextValue<V = unknown> {
+  query: FilterQuery<V>
+  draft: FilterDraft<V> | null
+  ruleCount: number
+  /** Live region text. Empty except immediately after an announced change. */
+  announcement: string
+  /** How many announcements have been made, so a REPEATED one is still heard:
+   *  `aria-live` reports a DOM mutation and React writes nothing when the
+   *  string is unchanged, so the chrome keys the region's contents on this. A
+   *  counter rather than a timestamp: it is compared for identity, never read
+   *  as a value, and is stable across a rerender that a clock is not. */
+  announcementSeq: number
+}
+
+const FilterStateContext = React.createContext<FilterStateContextValue | null>(
+  null
+)
+
+export function useFilterState<V = unknown>(): FilterStateContextValue<V> {
+  const context = React.useContext(FilterStateContext)
+  if (!context) {
+    throw new Error("useFilterState must be used inside <Filters>")
+  }
+  return context as unknown as FilterStateContextValue<V>
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Render                                   */
+/* -------------------------------------------------------------------------- */
+
+/** Consumer render overrides, on their own channel. They must be
+ *  always-current closures yet change identity on every parent render when
+ *  written inline, so isolating them re-renders only what calls them. */
+export interface FilterRenderContextValue<V = unknown, O = unknown> {
+  renderValue?: (context: FilterValueDisplayContext<V, O>) => React.ReactNode
+  renderChip?: (rule: FilterRule<V>) => React.ReactNode
+  renderEmpty?: (context: FilterEmptyStateContext) => React.ReactNode
+}
+
+const FilterRenderContext = React.createContext<FilterRenderContextValue>({})
+
+export function useFilterRender<
+  V = unknown,
+  O = unknown,
+>(): FilterRenderContextValue<V, O> {
+  return React.useContext(FilterRenderContext) as FilterRenderContextValue<V, O>
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 Focus store                                */
+/* -------------------------------------------------------------------------- */
+
+/** Which chip currently owns the row's single tab stop. */
+export interface FilterFocus {
+  id: string | null
+  /** Which cell inside that row, for restoring focus after an edit. A chip
+   *  draws only `field`, `operator`, `value` and `menu`; the rest are advanced
+   *  builder cells, where a GROUP header is a row too (its `field` is the
+   *  combinator sentence). One union, because the chromes share the store. */
+  segment:
+    | "combinator"
+    | "field"
+    | "operator"
+    | "value"
+    | "add"
+    | "menu"
+    | "ungroup"
+    | "remove"
+    | "drag"
+    | null
+  /** Open that segment's popover, not merely focus it. Picking a field commits
+   *  the rule straight away and the chip appears with no condition yet, so the
+   *  operator menu has to open ON THE CHIP without a second click. */
+  autoOpen: boolean
+}
+
+/** An external store, deliberately NOT React state. A roving tabindex
+ *  republishes on every arrow key, and `setState` would re-render the whole
+ *  bar to move one outline. The SELECTOR hooks below each narrow to one value,
+ *  so arrowing across forty chips re-renders two components. `useFilterFocus`
+ *  is the exception: it returns the whole snapshot. */
+export interface FilterFocusStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  getSnapshot: () => FilterFocus
+  /** No-ops when nothing changed. */
+  set: (next: FilterFocus) => void
+}
+
+const NO_FOCUS: FilterFocus = { id: null, segment: null, autoOpen: false }
+
+export function createFilterFocusStore(): FilterFocusStore {
+  let snapshot: FilterFocus = NO_FOCUS
+  const listeners = new Set<() => void>()
+
+  return {
+    subscribe(onStoreChange) {
+      listeners.add(onStoreChange)
+      return () => {
+        listeners.delete(onStoreChange)
+      }
+    },
+    // The SAME object until something actually changes, which is what
+    // `useSyncExternalStore` requires to avoid an infinite render loop.
+    getSnapshot() {
+      return snapshot
+    },
+    set(next) {
+      if (
+        next.id === snapshot.id &&
+        next.segment === snapshot.segment &&
+        next.autoOpen === snapshot.autoOpen
+      ) {
+        return
+      }
+      snapshot = next
+      for (const listener of listeners) listener()
+    },
+  }
+}
+
+/** A shared, permanently empty store, so the hook degrades to "nothing
+ *  focused" outside a `Filters`. Nothing ever writes to it: each root creates
+ *  and writes its own. */
+const FALLBACK_FOCUS_STORE = createFilterFocusStore()
+
+const FilterFocusContext =
+  React.createContext<FilterFocusStore>(FALLBACK_FOCUS_STORE)
+
+/* -------------------------------------------------------------------------- */
+/*                                 Reordering                                 */
+/* -------------------------------------------------------------------------- */
+
+/** Whether rows may be reordered at all, published once for the subtree. Two
+ *  files have to agree about it: the builder gates the grip and Alt+Arrow,
+ *  while the row and group menus commit the same mutator by a third route, so
+ *  gating only the builder left it off for a pointer and on from a menu. */
+const FilterReorderContext = React.createContext(false)
+
+export const FilterReorderProvider = FilterReorderContext.Provider
+
+export function useFilterReorderable(): boolean {
+  return React.useContext(FilterReorderContext)
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Touched                                  */
+/* -------------------------------------------------------------------------- */
+
+/** Which rules the user has actually edited the VALUE of, which decides WHEN
+ *  an error may appear: "Add filter" mints a row with no value, so flagging
+ *  every invalid row turns the builder red before the user did anything wrong.
+ *  An issue is still COLLECTED for every rule - the footer count,
+ *  `onQueryChange` and tree validity do not change - and only DRAWN once the
+ *  user has committed a value. An external store for the focus store's reason,
+ *  keyed by rule id and never pruned: a stale id costs one Set entry, and
+ *  reconciling against the query on every commit is hot-path work. */
+export interface FilterRowStateStore {
+  subscribe: (listener: () => void) => () => void
+  /** Bumped on every write. What a memo depends on, since the Sets are mutable. */
+  version: () => number
+  /** Whether this rule has had a value committed to it by the user. */
+  has: (id: string) => boolean
+  mark: (id: string) => void
+  /** Starts this rule over. Changing a rule's ATTRIBUTE resets its operator
+   *  and its value, so it has to reset this too, or the row stays warned about
+   *  a value that no longer exists on a field the user navigated away from. */
+  unmark: (id: string) => void
+  /** Whether this rule is still being CREATED: minted by Add filter and not
+   *  yet given an attribute. The row enters the query with a guessed field to
+   *  keep the tree valid, so while pending the builder draws only that cell. */
+  isPending: (id: string) => boolean
+  markPending: (id: string) => void
+  /** The attribute was chosen. The rest of the row appears. */
+  resolvePending: (id: string) => void
+  /** Forgets everything. The bar's own Clear all, and a whole-tree replace. */
+  reset: () => void
+}
+
+export function createFilterRowStateStore(): FilterRowStateStore {
+  const touched = new Set<string>()
+  const pending = new Set<string>()
+  const listeners = new Set<() => void>()
+  let version = 0
+  const notify = () => {
+    version += 1
+    for (const listener of listeners) listener()
+  }
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+    version: () => version,
+    has: (id) => touched.has(id),
+    mark: (id) => {
+      if (touched.has(id)) return
+      touched.add(id)
+      notify()
+    },
+    unmark: (id) => {
+      if (!touched.delete(id)) return
+      notify()
+    },
+    isPending: (id) => pending.has(id),
+    markPending: (id) => {
+      if (pending.has(id)) return
+      pending.add(id)
+      notify()
+    },
+    resolvePending: (id) => {
+      if (!pending.delete(id)) return
+      notify()
+    },
+    reset: () => {
+      if (touched.size === 0 && pending.size === 0) return
+      touched.clear()
+      pending.clear()
+      notify()
+    },
+  }
+}
+
+const FALLBACK_ROW_STATE_STORE = createFilterRowStateStore()
+
+const FilterRowStateContext = React.createContext<FilterRowStateStore>(
+  FALLBACK_ROW_STATE_STORE
+)
+
+export const FilterRowStateProvider = FilterRowStateContext.Provider
+
+/** The store itself, for handlers that write without subscribing. */
+export function useFilterRowStateStore(): FilterRowStateStore {
+  return React.useContext(FilterRowStateContext)
+}
+
+/** Whether THIS rule is still waiting for its attribute. */
+export function useFilterRowPending(id: string): boolean {
+  const store = React.useContext(FilterRowStateContext)
+  return React.useSyncExternalStore(
+    store.subscribe,
+    () => store.isPending(id),
+    () => false
+  )
+}
+
+/** Whether THIS rule may show an error yet. */
+export function useFilterTouched(id: string): boolean {
+  const store = React.useContext(FilterRowStateContext)
+  return React.useSyncExternalStore(
+    store.subscribe,
+    () => store.has(id),
+    () => false
+  )
+}
+
+/** The whole focus snapshot, so the caller re-renders on EVERY move anywhere
+ *  in the row. A chip wants `useFilterChipFocused` or `useFilterSegmentFocus`
+ *  below instead. */
+export function useFilterFocus(): FilterFocus {
+  const store = React.useContext(FilterFocusContext)
+  return React.useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getSnapshot
+  )
+}
+
+/** The store itself, for event handlers that write without subscribing. */
+export function useFilterFocusStore(): FilterFocusStore {
+  return React.useContext(FilterFocusContext)
+}
+
+/** The segment of THIS chip that should open itself, or null. */
+export function useFilterChipAutoOpen(
+  id: string
+): FilterFocus["segment"] | null {
+  const store = React.useContext(FilterFocusContext)
+  return React.useSyncExternalStore(
+    store.subscribe,
+    () => {
+      const snapshot = store.getSnapshot()
+      return snapshot.autoOpen && snapshot.id === id ? snapshot.segment : null
+    },
+    () => null
+  )
+}
+
+/** Whether the row holds no focus, so the first chip keeps the tab stop. */
+export function useFilterFocusEmpty(): boolean {
+  const store = React.useContext(FilterFocusContext)
+  return React.useSyncExternalStore(
+    store.subscribe,
+    () => store.getSnapshot().id === null,
+    () => true
+  )
+}
+
+/** Whether THIS chip owns the row's tab stop. */
+export function useFilterChipFocused(id: string): boolean {
+  const store = React.useContext(FilterFocusContext)
+  return React.useSyncExternalStore(
+    store.subscribe,
+    () => store.getSnapshot().id === id,
+    () => false
+  )
+}
+
+/** Which segment of THIS rule owns the tab stop, or null when another rule
+ *  does. A chip needs one boolean, but an advanced row is a grid ROW whose tab
+ *  stop is a (row, column) pair, and the column has to come from this store
+ *  too or the chromes disagree about where focus is after an edit. */
+export function useFilterSegmentFocus(id: string): FilterFocus["segment"] {
+  const store = React.useContext(FilterFocusContext)
+  return React.useSyncExternalStore(
+    store.subscribe,
+    () => {
+      const snapshot = store.getSnapshot()
+      return snapshot.id === id ? snapshot.segment : null
+    },
+    () => null
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Resolution store                              */
+/* -------------------------------------------------------------------------- */
+
+/** The instance-wide value-to-label store. `useFilterOptions` caches per HOOK
+ *  INSTANCE, and a chip's display and its editor are two instances, so a
+ *  `loadOptions`-only field rendered its raw id the moment the menu closed.
+ *  Every instance under one root writes here, and `resolveValues` results land
+ *  here too. External rather than React state because labels arrive from
+ *  effects and promises at their own pace, and the version bumps only when a
+ *  NEW label lands, so a subscriber re-renders once per page of results. */
+export interface FilterResolutionStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  getVersion: () => number
+  /** The option behind a stored value, or undefined while unresolved. */
+  get: (fieldKey: string, value: string) => FilterOption | undefined
+  /** Records options under a field key. New values bump the version. */
+  set: (fieldKey: string, options: readonly FilterOption[]) => void
+  /** Marks values as resolving and returns the subset nobody has claimed yet,
+   *  so two chips holding the same id issue ONE request. Claims are permanent
+   *  for values a fulfilled resolve did not return, which stops an id the
+   *  server does not know from being re-asked forever. */
+  claim: (fieldKey: string, values: readonly string[]) => string[]
+  /** Releases claims after a FAILED resolve, so a later mount may retry. */
+  release: (fieldKey: string, values: readonly string[]) => void
+}
+
+export function createFilterResolutionStore(): FilterResolutionStore {
+  const resolved = new Map<string, Map<string, FilterOption>>()
+  const claimed = new Map<string, Set<string>>()
+  const listeners = new Set<() => void>()
+  let version = 0
+
+  const bucket = (fieldKey: string) => {
+    let map = resolved.get(fieldKey)
+    if (!map) {
+      map = new Map()
+      resolved.set(fieldKey, map)
+    }
+    return map
+  }
+
+  return {
+    subscribe(onStoreChange) {
+      listeners.add(onStoreChange)
+      return () => {
+        listeners.delete(onStoreChange)
+      }
+    },
+    getVersion() {
+      return version
+    },
+    get(fieldKey, value) {
+      return resolved.get(fieldKey)?.get(value)
+    },
+    set(fieldKey, options) {
+      const map = bucket(fieldKey)
+      let landed = false
+      for (const option of options) {
+        if (!map.has(option.value)) landed = true
+        map.set(option.value, option)
+      }
+      if (!landed) return
+      version += 1
+      for (const listener of listeners) listener()
+    },
+    claim(fieldKey, values) {
+      let set = claimed.get(fieldKey)
+      if (!set) {
+        set = new Set()
+        claimed.set(fieldKey, set)
+      }
+      const map = resolved.get(fieldKey)
+      const fresh: string[] = []
+      for (const value of values) {
+        if (set.has(value) || map?.has(value)) continue
+        set.add(value)
+        fresh.push(value)
+      }
+      return fresh
+    },
+    release(fieldKey, values) {
+      const set = claimed.get(fieldKey)
+      if (!set) return
+      for (const value of values) set.delete(value)
+    },
+  }
+}
+
+export {
+  FilterActionsContext,
+  FilterFocusContext,
+  FilterRenderContext,
+  FilterStateContext,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-date.tsx b/apps/web/src/components/reui/filters/filters-date.tsx
new file mode 100644
index 0000000..64b7367
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-date.tsx
@@ -0,0 +1,213 @@
+import {
+  addDays,
+  addMonths,
+  addWeeks,
+  addYears,
+  format,
+  isValid,
+  parse,
+  startOfDay,
+} from "date-fns"
+
+/**
+ * A date filter value. NOT a `Date`: a filter gets persisted (saved views,
+ * shared URLs), and a resolved `Date` would freeze "created today" into one
+ * fixed day. An absolute pick still stores one day, because "on 14 August"
+ * does mean that day.
+ */
+export interface FilterDateValue {
+  /** An absolute day, `yyyy-MM-dd`. Mutually exclusive with `relative`. */
+  date?: string
+  /** A token re-resolved on every read. */
+  relative?: FilterRelativeDate
+  /** Optional time of day, `HH:mm`. */
+  time?: string
+}
+
+/** A calendar offset from now, resolved at read time. */
+export interface FilterRelativeDate {
+  unit: "day" | "week" | "month" | "year"
+  offset: number
+}
+
+export const FILTER_DATE_FORMAT = "yyyy-MM-dd"
+
+export const RELATIVE_TODAY: FilterRelativeDate = { unit: "day", offset: 0 }
+export const RELATIVE_TOMORROW: FilterRelativeDate = { unit: "day", offset: 1 }
+export const RELATIVE_YESTERDAY: FilterRelativeDate = {
+  unit: "day",
+  offset: -1,
+}
+export const RELATIVE_NEXT_WEEK: FilterRelativeDate = {
+  unit: "week",
+  offset: 1,
+}
+
+export function applyFilterRelative(
+  relative: FilterRelativeDate,
+  now: Date
+): Date {
+  const base = startOfDay(now)
+  if (relative.unit === "day") return addDays(base, relative.offset)
+  if (relative.unit === "week") return addWeeks(base, relative.offset)
+  if (relative.unit === "month") return addMonths(base, relative.offset)
+  return addYears(base, relative.offset)
+}
+
+export function resolveFilterDate(
+  value: FilterDateValue | undefined,
+  now: Date = new Date()
+): Date | null {
+  if (!value) return null
+  if (value.relative) return applyFilterRelative(value.relative, now)
+  if (value.date) {
+    const parsed = parse(value.date, FILTER_DATE_FORMAT, now)
+    return isValid(parsed) ? parsed : null
+  }
+  return null
+}
+
+export function toFilterDateValue(date: Date, time?: string): FilterDateValue {
+  const value: FilterDateValue = { date: format(date, FILTER_DATE_FORMAT) }
+  if (time) value.time = time
+  return value
+}
+
+// ----- natural language input -----
+
+const WEEKDAYS = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+]
+
+/**
+ * Typed formats, most specific first. `date-selector.tsx` overlaps on a few
+ * of these, but its parser is a callback inside the component returning a
+ * `DateSelectorValue`, so there is nothing importable.
+ */
+const EXPLICIT_FORMATS = [
+  "yyyy-MM-dd",
+  "MM/dd/yyyy",
+  "M/d/yyyy",
+  "dd/MM/yyyy",
+  "MMMM d, yyyy",
+  "MMM d, yyyy",
+  "MMMM d",
+  "MMM d",
+  "d MMMM yyyy",
+  "d MMM yyyy",
+]
+
+/**
+ * Parses a typed phrase, or null when nothing matches. Relative phrasing gives
+ * a RELATIVE value and an explicit date an ABSOLUTE one; flattening the two is
+ * what freezes a saved view.
+ */
+export function parseFilterDate(
+  text: string,
+  now: Date = new Date()
+): FilterDateValue | null {
+  const input = text.trim().toLowerCase().replace(/\s+/g, " ")
+  if (!input) return null
+
+  if (input === "today" || input === "now") return { relative: RELATIVE_TODAY }
+  if (input === "tomorrow") return { relative: RELATIVE_TOMORROW }
+  if (input === "yesterday") return { relative: RELATIVE_YESTERDAY }
+
+  const nextLast = input.match(/^(next|last|this) (day|week|month|year)$/)
+  if (nextLast) {
+    const direction =
+      nextLast[1] === "next" ? 1 : nextLast[1] === "last" ? -1 : 0
+    return {
+      relative: {
+        unit: nextLast[2] as FilterRelativeDate["unit"],
+        offset: direction,
+      },
+    }
+  }
+
+  // "in 3 days" / "3 days ago" / "in 2 weeks"
+  const counted = input.match(
+    /^(?:in )?(\d+) (day|week|month|year)s?(?: ago)?$/
+  )
+  if (counted) {
+    const magnitude = Number.parseInt(counted[1], 10)
+    const past = input.endsWith("ago")
+    return {
+      relative: {
+        unit: counted[2] as FilterRelativeDate["unit"],
+        offset: past ? -magnitude : magnitude,
+      },
+    }
+  }
+
+  // "next tuesday" / "last friday" / bare "tuesday"
+  const weekday = input.match(/^(?:(next|last|this) )?([a-z]+)$/)
+  if (weekday) {
+    const index = WEEKDAYS.indexOf(weekday[2])
+    if (index !== -1) {
+      const today = startOfDay(now)
+      const current = today.getDay()
+      let delta = index - current
+      const qualifier = weekday[1]
+
+      if (qualifier === "last") {
+        // Always strictly in the past.
+        if (delta >= 0) delta -= 7
+      } else {
+        // "next"/"this" and a bare weekday all mean the NEXT one, not today.
+        if (delta <= 0) delta += 7
+      }
+
+      return { relative: { unit: "day", offset: delta } }
+    }
+  }
+
+  for (const pattern of EXPLICIT_FORMATS) {
+    const parsed = parse(input, pattern, now)
+    if (isValid(parsed)) {
+      // "Aug 14" has no year, so it takes the reference year.
+      return toFilterDateValue(parsed)
+    }
+  }
+
+  return null
+}
+
+/**
+ * Human wording for a value. Relative values render as their phrase, not the
+ * resolved day, so a chip reading "is today" does not go stale tomorrow.
+ */
+export function formatFilterDate(
+  value: FilterDateValue | undefined,
+  now: Date = new Date(),
+  pattern = "MMM d, yyyy"
+): string {
+  if (!value) return ""
+
+  if (value.relative) {
+    const { unit, offset } = value.relative
+    if (unit === "day" && offset === 0) return "today"
+    if (unit === "day" && offset === 1) return "tomorrow"
+    if (unit === "day" && offset === -1) return "yesterday"
+
+    const plural = Math.abs(offset) === 1 ? unit : `${unit}s`
+    if (offset > 0) return `in ${offset} ${plural}`
+    if (offset < 0) return `${Math.abs(offset)} ${plural} ago`
+    return `this ${unit}`
+  }
+
+  const resolved = resolveFilterDate(value, now)
+  if (!resolved) return ""
+  const day = format(resolved, pattern)
+  return value.time ? `${day} ${value.time}` : day
+}
+
+export function isFilterTime(time: string): boolean {
+  return /^([01]\d|2[0-3]):[0-5]\d$/.test(time)
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-dnd.tsx b/apps/web/src/components/reui/filters/filters-dnd.tsx
new file mode 100644
index 0000000..83290ef
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-dnd.tsx
@@ -0,0 +1,702 @@
+"use client"
+
+import * as React from "react"
+
+/**
+ * Gesture model copied from `event-calendar-dnd.tsx`, deliberately not
+ * imported: filters installs on its own and must not pull a whole calendar into
+ * `shadcn add filters`. Vanilla-DOM overlay, so a drag renders no React.
+ */
+export const FILTER_DND_ACTIVATION = {
+  /** Mouse travel before a press becomes a drag. Below this it stays a click. */
+  moveDistancePx: 5,
+  /** Touch long-press before a drag starts, so a swipe still scrolls. */
+  touchDelayMs: 250,
+  touchTolerancePx: 5,
+  autoScrollEdgePx: 40,
+  autoScrollMaxStepPx: 12,
+  /** A seed only: `createCarry` measures the real grab offset before paint. */
+  carryPointerOffsetPx: 12,
+} as const
+
+/** One rule row, or one group's header row. Both are drag sources and targets. */
+export const FILTER_ROW_SELECTOR = '[data-slot="filter-row"]'
+
+/** Explicit "drop INSIDE": a row hit test can only ever say "beside". */
+export const FILTER_DROP_ZONE_SELECTOR = "[data-drop-parent]"
+
+/** Marked alongside the zone, so lighting the group costs no `:has()`. */
+export const FILTER_GROUP_SELECTOR = '[data-slot="filter-group"]'
+
+/** Geometry only, so resolution is a pure function and a table test. */
+export interface FilterDropBox {
+  top: number
+  bottom: number
+  left: number
+  right: number
+  /** The group the drop writes into. */
+  parentId: string
+  /** Where in that group's children the node lands, not a slot in this list. */
+  index: number
+  /** How many rows enclose this box. Deeper wins. */
+  depth: number
+}
+
+export interface FilterDropResolution<T extends FilterDropBox> {
+  target: T
+  /** Null for a zone: INTO the group rather than beside anything. */
+  edge: "before" | "after" | null
+}
+
+function contains(box: FilterDropBox, x: number, y: number, grow = 0): boolean {
+  return (
+    x >= box.left &&
+    x <= box.right &&
+    y >= box.top - grow &&
+    y <= box.bottom + grow
+  )
+}
+
+/**
+ * How far a ROW reaches past its own rect when hit tested: HALF the sibling
+ * gap, which is `gap-3`, so six. `FILTER_ROW_GAP_CLASS` is the other half of
+ * one measurement; this moves whenever that does.
+ *
+ * The seam between adjacent rows is inside NEITHER rect, so a pointer aimed
+ * between two rows fell through to whatever did enclose it: at the top level
+ * nothing did, so the cursor said `no-drop`; one level in it was the group.
+ * Half the gap makes siblings tile, and the depth sort keeps the child ahead of
+ * that group. Rows only: zones are explicit strips.
+ */
+export const FILTER_ROW_SEAM_PX = 6
+
+/**
+ * Zones before rows, then the DEEPEST box: a group's rect encloses everything
+ * it holds, so a nested condition would otherwise resolve to its whole group.
+ * `seam` is a parameter, not the constant inlined, so the tiling rule itself is
+ * a table test.
+ */
+export function resolveFilterDrop<T extends FilterDropBox>(
+  zones: T[],
+  rows: T[],
+  x: number,
+  y: number,
+  seam: number = FILTER_ROW_SEAM_PX
+): FilterDropResolution<T> | null {
+  let zone: T | null = null
+  for (const candidate of zones) {
+    if (!contains(candidate, x, y)) continue
+    if (!zone || candidate.depth > zone.depth) zone = candidate
+  }
+  if (zone) return { target: zone, edge: null }
+
+  let row: T | null = null
+  for (const candidate of rows) {
+    if (!contains(candidate, x, y, seam)) continue
+    if (!row || candidate.depth > row.depth) row = candidate
+  }
+  if (!row) return null
+
+  // The midpoint, not the nearest edge: a row is the width of the panel, so a
+  // proximity test would leave the indicator undecided across most of one.
+  const after = y > row.top + (row.bottom - row.top) / 2
+  return {
+    target: { ...row, index: row.index + (after ? 1 : 0) },
+    edge: after ? "after" : "before",
+  }
+}
+
+/** Where a dragged node started, which is what makes a drop a no-op or not. */
+export interface FilterDropOrigin {
+  parentId: string
+  index: number
+}
+
+/**
+ * Both indices name the slot the node already occupies, because
+ * `moveFilterNodeTo` closes the gap the detach leaves. Copy is never a no-op.
+ */
+export function isFilterDropNoop(
+  resolution: FilterDropResolution<FilterDropBox> | null,
+  origin: FilterDropOrigin | null,
+  copy: boolean
+): boolean {
+  if (!resolution || !origin || copy) return false
+  if (resolution.target.parentId !== origin.parentId) return false
+  return (
+    resolution.target.index === origin.index ||
+    resolution.target.index === origin.index + 1
+  )
+}
+
+/** Rows unmount mid-gesture, so it is the PANEL leaving that aborts a drag. */
+const activeCancels = new Set<() => void>()
+
+/** Cancel and fully revert every in-flight filter row drag. */
+export function cancelActiveFilterDrags(): void {
+  for (const cancel of [...activeCancels]) cancel()
+}
+
+let lastDragEndedAt = 0
+
+/**
+ * Whether a drag ended within the last few frames. Exported: a consumer's own
+ * row click handler needs the same answer the suppressor below needs.
+ */
+export function wasRecentFilterDrag(): boolean {
+  return performance.now() - lastDragEndedAt < 250
+}
+
+/**
+ * NOT `{ once: true }` alone: a drag that ends over a different element fires
+ * no click at all, and a stale arming would eat the user's next click. The
+ * timestamp is what makes that stale arming harmless.
+ */
+function suppressTrailingClick(event: MouseEvent) {
+  window.removeEventListener("click", suppressTrailingClick, true)
+  if (!wasRecentFilterDrag()) return
+  event.stopPropagation()
+  event.preventDefault()
+}
+
+/** The carry is a compositing layer: a subpixel translate blurs its text. */
+function snapToPixel(value: number): number {
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1
+  return Math.round(value * dpr) / dpr
+}
+
+/**
+ * `card` is a ZONE's group, resolved once rather than walked per frame. Null on
+ * a row, which stands for itself.
+ */
+type MeasuredBox = FilterDropBox & {
+  el: HTMLElement
+  card: HTMLElement | null
+}
+
+interface Surface {
+  zones: MeasuredBox[]
+  rows: MeasuredBox[]
+  /**
+   * Rects are captured ONCE, so one subtraction against this scrollTop corrects
+   * for scrolling instead of a per-move `getBoundingClientRect`. THE ELEMENT,
+   * NOT A MIRRORED NUMBER: a mirror tracks only this engine's own scrolling, so
+   * a wheel mid-gesture left the rects stale while the correction read zero,
+   * painting the indicator 60px off the pointer.
+   */
+  viewport: HTMLElement | null
+  viewportRect: DOMRect | null
+  /** The one number kept: where the rects were taken, which cannot change. */
+  startScrollTop: number
+}
+
+/**
+ * The nearest scroller, THIS ONE INCLUDED: the panel is exactly what a consumer
+ * caps with `overflow-y: auto`, and a walk from the parent answered null for it.
+ */
+function findScrollParent(el: HTMLElement | null): HTMLElement | null {
+  let node = el ?? null
+  while (node) {
+    const style = getComputedStyle(node)
+    const overflow = `${style.overflowY} ${style.overflow}`
+    if (
+      /(auto|scroll|overlay)/.test(overflow) &&
+      node.scrollHeight > node.clientHeight
+    ) {
+      return node
+    }
+    node = node.parentElement
+  }
+  return null
+}
+
+function rowDepth(el: HTMLElement, root: HTMLElement): number {
+  let depth = 0
+  let node = el.parentElement
+  while (node && node !== root) {
+    if (node.matches(FILTER_ROW_SELECTOR)) depth++
+    node = node.parentElement
+  }
+  return depth
+}
+
+/**
+ * Measured once. DESCENDANTS of the dragged node are excluded rather than
+ * refused later: an indicator the drop ignores is a broken promise. The dragged
+ * row ITSELF is kept, so its own slot reads as a no-op, not as a hole.
+ */
+function collectSurface(root: HTMLElement, dragged: HTMLElement): Surface {
+  const zones: MeasuredBox[] = []
+  const rows: MeasuredBox[] = []
+
+  for (const el of root.querySelectorAll<HTMLElement>(
+    FILTER_DROP_ZONE_SELECTOR
+  )) {
+    if (dragged.contains(el)) continue
+    const parentId = el.dataset.dropParent
+    if (!parentId) continue
+    const rect = el.getBoundingClientRect()
+    zones.push({
+      el,
+      card: el.closest<HTMLElement>(FILTER_GROUP_SELECTOR),
+      top: rect.top,
+      bottom: rect.bottom,
+      left: rect.left,
+      right: rect.right,
+      parentId,
+      index: Number(el.dataset.dropIndex ?? 0),
+      depth: rowDepth(el, root),
+    })
+  }
+
+  for (const el of root.querySelectorAll<HTMLElement>(FILTER_ROW_SELECTOR)) {
+    if (el !== dragged && dragged.contains(el)) continue
+    const parentId = el.dataset.parentId
+    if (!parentId) continue
+    const rect = el.getBoundingClientRect()
+    rows.push({
+      el,
+      card: null,
+      top: rect.top,
+      bottom: rect.bottom,
+      left: rect.left,
+      right: rect.right,
+      parentId,
+      index: Number(el.dataset.index ?? 0),
+      depth: rowDepth(el, root),
+    })
+  }
+
+  const viewport = findScrollParent(root)
+  return {
+    zones,
+    rows,
+    viewport,
+    viewportRect: viewport?.getBoundingClientRect() ?? null,
+    startScrollTop: viewport?.scrollTop ?? 0,
+  }
+}
+
+export interface FilterDropDetails {
+  parentId: string
+  index: number
+  /** Alt was held at release: copy the node rather than moving it. */
+  copy: boolean
+}
+
+export interface FilterRowDragOptions {
+  /** The PANEL, not its body: the top-level append zone is in the footer. */
+  root: () => HTMLElement | null
+  onDrop: (nodeId: string, details: FilterDropDetails) => void
+  disabled?: boolean
+}
+
+/**
+ * Straight to the DOM: a React state write per move is a tree render. A zone
+ * marks TWO elements, itself and its card, and both clear every frame.
+ */
+function paint(
+  surface: Surface,
+  hit: FilterDropResolution<MeasuredBox> | null
+) {
+  for (const box of surface.zones) {
+    delete box.el.dataset.dropInto
+    if (box.card) delete box.card.dataset.dropInto
+  }
+  for (const box of surface.rows) delete box.el.dataset.dropEdge
+  if (!hit) return
+  if (hit.edge) {
+    hit.target.el.dataset.dropEdge = hit.edge
+    return
+  }
+  hit.target.el.dataset.dropInto = ""
+  if (hit.target.card) hit.target.card.dataset.dropInto = ""
+}
+
+function startDrag(
+  event: React.PointerEvent<HTMLElement>,
+  nodeId: string,
+  options: FilterRowDragOptions
+) {
+  const handle = event.currentTarget
+  const root = options.root()
+  const source = handle.closest<HTMLElement>(FILTER_ROW_SELECTOR)
+  if (!root || !source) return
+
+  const pointerId = event.pointerId
+  const isTouch = event.pointerType === "touch"
+  const startX = event.clientX
+  const startY = event.clientY
+
+  // Off the row's own attributes, which it already publishes for the hit test.
+  // Asking the panel would mean threading a position through the drag context.
+  const origin: FilterDropOrigin | null = source.dataset.parentId
+    ? {
+        parentId: source.dataset.parentId,
+        index: Number(source.dataset.index ?? 0),
+      }
+    : null
+
+  let active = false
+  let finished = false
+  let surface: Surface | null = null
+  let hit: FilterDropResolution<MeasuredBox> | null = null
+  let copy = event.altKey
+  let lastEvent: PointerEvent | null = null
+  let touchTimer: ReturnType<typeof setTimeout> | null = null
+  let rafScroll = 0
+
+  // Three states, not a boolean: `"ok"` lands somewhere new, `"noop"` puts the
+  // node back where it came from, `"none"` is over nothing at all.
+  let dropState: "ok" | "noop" | "none" = "none"
+
+  let carryEl: HTMLDivElement | null = null
+  let badgeEl: HTMLSpanElement | null = null
+  // Where inside the row the pointer went down, so the copy holds that spot.
+  // Measured in `createCarry`, which runs before anything reads these.
+  let grabOffsetX = FILTER_DND_ACTIVATION.carryPointerOffsetPx
+  let grabOffsetY = FILTER_DND_ACTIVATION.carryPointerOffsetPx
+
+  const createCarry = () => {
+    const rect = source.getBoundingClientRect()
+    grabOffsetX = startX - rect.left
+    grabOffsetY = startY - rect.top
+
+    carryEl = document.createElement("div")
+    carryEl.setAttribute("data-slot", "filters-drag-carry")
+    carryEl.setAttribute("aria-hidden", "true")
+    // `data-drop-invalid` rather than a toggled class name, so the style stays
+    // one static string Tailwind can see at build time.
+    //
+    // Muted and translucent, no border or shadow: the clone carries the row's
+    // own controls, and a box around them read as a card leaving the page. Only
+    // the invalid state marks the clone, since nothing else says the drop is
+    // dead, and it RINGS rather than going dashed: dashed is this builder's
+    // word for "a row can land here", and the clone is not one.
+    carryEl.className =
+      "pointer-events-none fixed " +
+      "top-0 left-0 z-100 " +
+      "opacity-95 will-change-transform " +
+      "data-drop-invalid:ring-destructive/70 data-drop-invalid:ring-2 " +
+      "data-drop-invalid:opacity-60"
+    // A bare anchor: the clip box below owns the size, and no overflow lets the
+    // badge overhang.
+    carryEl.style.position = "fixed"
+
+    const clone = source.cloneNode(true) as HTMLElement
+    // The source is faded while in flight; its copy must not inherit that.
+    delete clone.dataset.dragging
+    delete clone.dataset.dropNoop
+    delete clone.dataset.dropEdge
+    if (rect.width > 0) clone.style.width = `${rect.width}px`
+
+    /*
+      SANITIZED, because the clone lives on `<body>`: two elements would claim
+      one node id, `aria-hidden` leaves real buttons in the tab order and must
+      never wrap a focused one, and cloned ids make a `for` resolve to a copy.
+    */
+    const strip = (el: HTMLElement) => {
+      el.removeAttribute("id")
+      el.removeAttribute("data-node-id")
+      el.removeAttribute("data-filter-cell")
+      if (el.dataset.slot === "filter-row") el.removeAttribute("data-slot")
+      // `-1` rather than removed: the attribute is also how the roving scheme
+      // marks its cells, and a row copied mid-gesture has one cell at `0`.
+      el.setAttribute("tabindex", "-1")
+    }
+    strip(clone)
+    for (const el of clone.querySelectorAll<HTMLElement>("*")) strip(el)
+
+    /*
+      The CLIPPING box is the inner one: the carry is the badge's containing
+      block, so `overflow-hidden` there clipped the badge that overhangs it.
+    */
+    const clip = document.createElement("div")
+    clip.className = "bg-background overflow-hidden rounded-md"
+    // Sized only when the rect is real: a document that is not being laid out
+    // measures zero, and a copy pinned to `0px` is invisible.
+    if (rect.width > 0) clip.style.width = `${rect.width}px`
+    if (rect.height > 0) clip.style.height = `${rect.height}px`
+    clip.appendChild(clone)
+    carryEl.appendChild(clip)
+
+    badgeEl = document.createElement("span")
+    badgeEl.setAttribute("data-slot", "filters-drag-copy")
+    badgeEl.className =
+      "bg-primary text-primary-foreground absolute -end-1.5 -top-1.5 flex " +
+      "size-4 items-center justify-center rounded-full text-[10px] leading-none"
+    badgeEl.textContent = "+"
+    // Legible BEFORE the release, or Alt is discoverable only by error.
+    badgeEl.hidden = !copy
+    carryEl.appendChild(badgeEl)
+
+    // <body>, not the panel: a transform or a `content-visibility` on a wrapper
+    // becomes the containing block for `position: fixed`, and the clone jumps.
+    document.body.appendChild(carryEl)
+    positionCarry(startX, startY)
+  }
+
+  const positionCarry = (x: number, y: number) => {
+    if (!carryEl) return
+    // THE GRAB OFFSET, not a fixed nudge: the grip sits at the row's trailing
+    // edge, so anchoring at the pointer hung the copy a row's width away.
+    carryEl.style.transform = `translate3d(${snapToPixel(x - grabOffsetX)}px, ${snapToPixel(y - grabOffsetY)}px, 0)`
+  }
+
+  // Two things decide the cursor and the RESOLUTION outranks Alt, which is why
+  // `none` is tested first: `copy` over nothing is still nothing.
+  const paintCursor = () => {
+    if (!active) return
+    document.body.style.cursor =
+      dropState === "none" ? "no-drop" : copy ? "copy" : "grabbing"
+  }
+
+  // Deliberately NOT guarded on `dropState === next`: the first resolution of a
+  // gesture is routinely `"none"`, which is also the initial value, so a guard
+  // left the first frame of a drag onto nothing wearing no mark at all.
+  const setDropState = (next: typeof dropState) => {
+    dropState = next
+    // On the SOURCE: "it stays here" is a statement about the row carried.
+    if (next === "noop") source.dataset.dropNoop = ""
+    else delete source.dataset.dropNoop
+    // And on the CARRY: over nothing there is no target left to mark.
+    if (carryEl) {
+      if (next === "none") carryEl.dataset.dropInvalid = ""
+      else delete carryEl.dataset.dropInvalid
+    }
+    paintCursor()
+  }
+
+  const setCopy = (next: boolean) => {
+    if (copy === next) return
+    copy = next
+    if (badgeEl) badgeEl.hidden = !next
+    paintCursor()
+    // Alt changes the ANSWER, not just the cursor: a release beside yourself is
+    // a no-op while moving and a duplicate in place while copying.
+    if (lastEvent) hitTest(lastEvent.clientX, lastEvent.clientY)
+  }
+
+  const hitTest = (x: number, y: number) => {
+    if (!surface) return
+    // One subtraction instead of a re-measure. Read off the ELEMENT every time:
+    // see `Surface.viewport`, a mirror misses the user's own scroll.
+    const scrolled = surface.viewport?.scrollTop ?? surface.startScrollTop
+    const drift = scrolled - surface.startScrollTop
+    const resolved = resolveFilterDrop(
+      surface.zones,
+      surface.rows,
+      x,
+      y + drift
+    )
+    const noop = isFilterDropNoop(resolved, origin, copy)
+    // A no-op commits as NOTHING, not as a move the tree would discard.
+    hit = noop ? null : resolved
+    paint(surface, hit)
+    setDropState(noop ? "noop" : hit ? "ok" : "none")
+  }
+
+  const autoScroll = (y: number) => {
+    if (rafScroll) cancelAnimationFrame(rafScroll)
+    rafScroll = 0
+    const viewport = surface?.viewport
+    const rect = surface?.viewportRect
+    if (!viewport || !rect) return
+
+    const edge = FILTER_DND_ACTIVATION.autoScrollEdgePx
+    const step = FILTER_DND_ACTIVATION.autoScrollMaxStepPx
+    let delta = 0
+    if (y >= rect.top && y < rect.top + edge) {
+      delta = -step * ((rect.top + edge - y) / edge)
+    } else if (y <= rect.bottom && y > rect.bottom - edge) {
+      delta = step * Math.min(1, (y - (rect.bottom - edge)) / edge)
+    }
+    if (delta === 0) return
+
+    const tick = () => {
+      // The read-back STOPS the loop: the browser clamps at the scroll extent,
+      // so a panel at its limit would keep asking for unusable frames.
+      const before = viewport.scrollTop
+      viewport.scrollTop = before + delta
+      if (viewport.scrollTop === before) return
+      if (lastEvent) hitTest(lastEvent.clientX, lastEvent.clientY)
+      rafScroll = requestAnimationFrame(tick)
+    }
+    rafScroll = requestAnimationFrame(tick)
+  }
+
+  /**
+   * A still pointer fires no `pointermove`, so a wheel mid-drag would leave the
+   * last answer painted while the rows slid out from under it. The overlap
+   * with the autoScroll tick is deliberate: this is arithmetic over boxes
+   * already measured, and one redundant pass per frame is cheaper than a rule
+   * about who owns the repaint.
+   */
+  const onViewportScroll = () => {
+    if (!active || !lastEvent) return
+    hitTest(lastEvent.clientX, lastEvent.clientY)
+  }
+
+  const activate = () => {
+    if (active) return
+    active = true
+    surface = collectSurface(root, source)
+
+    // Passive: nothing here calls `preventDefault`, and a non-passive listener
+    // on a scroller is a frame of jank per notch.
+    surface.viewport?.addEventListener("scroll", onViewportScroll, {
+      passive: true,
+    })
+    source.dataset.dragging = ""
+    document.body.style.cursor = copy ? "copy" : "grabbing"
+    document.body.style.userSelect = "none"
+    createCarry()
+    // Armed with the GESTURE, not the press: a press that never travels far
+    // enough strands no overlay, no body style and no listener.
+    window.addEventListener("blur", onWindowBlur)
+  }
+
+  // Idempotent. pointerup, pointercancel, Escape, window blur and the panel's
+  // own teardown can all race; whichever lands first wins and the rest no-op.
+  const cleanup = () => {
+    if (finished) return
+    finished = true
+    activeCancels.delete(cancel)
+    window.removeEventListener("pointermove", onPointerMove)
+    window.removeEventListener("pointerup", onPointerUp)
+    window.removeEventListener("pointercancel", onPointerCancel)
+    window.removeEventListener("keydown", onKeyDown, true)
+    window.removeEventListener("keyup", onKeyUp, true)
+    window.removeEventListener("blur", onWindowBlur)
+    surface?.viewport?.removeEventListener("scroll", onViewportScroll)
+    if (touchTimer) clearTimeout(touchTimer)
+    if (rafScroll) cancelAnimationFrame(rafScroll)
+    if (surface) paint(surface, null)
+    delete source.dataset.dragging
+    delete source.dataset.dropNoop
+    carryEl?.remove()
+    carryEl = null
+    badgeEl = null
+    document.body.style.cursor = ""
+    document.body.style.userSelect = ""
+  }
+
+  /** A bare teardown: nothing is committed until release, so no snapshot. */
+  const cancel = () => {
+    if (active) lastDragEndedAt = performance.now()
+    cleanup()
+  }
+
+  const onWindowBlur = () => cancel()
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && active) {
+      // Stopped, or the popover the builder may be living in closes underneath
+      // the gesture and takes the panel the drop was aimed at with it.
+      e.stopPropagation()
+      e.preventDefault()
+      cancel()
+      return
+    }
+    if (e.key === "Alt") setCopy(true)
+  }
+
+  // Alt tracked on its own keys too: reaching for the modifier without moving
+  // the mouse fires no pointermove, and the badge has to appear regardless.
+  const onKeyUp = (e: KeyboardEvent) => {
+    if (e.key === "Alt") setCopy(false)
+  }
+
+  const onPointerMove = (e: PointerEvent) => {
+    // A second finger must not drive or cancel the gesture this one started.
+    if (e.pointerId !== pointerId) return
+    lastEvent = e
+
+    if (!active) {
+      const distance = Math.hypot(e.clientX - startX, e.clientY - startY)
+      if (isTouch) {
+        // Past the tolerance the user is scrolling, so the press stays a scroll.
+        if (distance > FILTER_DND_ACTIVATION.touchTolerancePx) cancel()
+        return
+      }
+      if (distance < FILTER_DND_ACTIVATION.moveDistancePx) return
+      activate()
+    }
+
+    setCopy(e.altKey)
+    positionCarry(e.clientX, e.clientY)
+    hitTest(e.clientX, e.clientY)
+    autoScroll(e.clientY)
+  }
+
+  const onPointerUp = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    const landed = active ? hit : null
+    const wasCopy = copy
+    cleanup()
+    if (!active) return
+
+    lastDragEndedAt = performance.now()
+    // The trailing click belongs to the gesture, not to whatever it ended over.
+    window.addEventListener("click", suppressTrailingClick, true)
+
+    if (!landed) return
+    options.onDrop(nodeId, {
+      parentId: landed.target.parentId,
+      index: landed.target.index,
+      copy: wasCopy,
+    })
+  }
+
+  const onPointerCancel = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    cancel()
+  }
+
+  window.addEventListener("pointermove", onPointerMove)
+  window.addEventListener("pointerup", onPointerUp)
+  window.addEventListener("pointercancel", onPointerCancel)
+  window.addEventListener("keydown", onKeyDown, true)
+  window.addEventListener("keyup", onKeyUp, true)
+  activeCancels.add(cancel)
+
+  if (isTouch) {
+    touchTimer = setTimeout(() => {
+      activate()
+      if (lastEvent) {
+        positionCarry(lastEvent.clientX, lastEvent.clientY)
+        hitTest(lastEvent.clientX, lastEvent.clientY)
+      }
+    }, FILTER_DND_ACTIVATION.touchDelayMs)
+  }
+}
+
+/**
+ * Only `onPointerDown`: the handle is a real button that Tab reaches, so it must
+ * not also be `draggable` and race the browser's HTML5 drag, with its ghost, no
+ * copy affordance and no way to report a drop into a nested target.
+ */
+export function useFilterRowDrag(options: FilterRowDragOptions) {
+  // Read at gesture time, not captured at wiring time, so the handler identity
+  // is stable and a memoized row never re-renders on a re-created callback.
+  const latest = React.useRef(options)
+  React.useEffect(() => {
+    latest.current = options
+  })
+
+  // A gesture outlives its row by design, but never the panel: its listeners
+  // are on `window` and its carry on `document.body`.
+  React.useEffect(() => cancelActiveFilterDrags, [])
+
+  return React.useCallback(
+    (nodeId: string) => ({
+      onPointerDown: (event: React.PointerEvent<HTMLElement>) => {
+        if (latest.current.disabled) return
+        // Primary button only: a right press strands the drag under a menu.
+        if (event.button !== 0) return
+        startDrag(event, nodeId, latest.current)
+      },
+    }),
+    []
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-draft.tsx b/apps/web/src/components/reui/filters/filters-draft.tsx
new file mode 100644
index 0000000..fd73c7b
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-draft.tsx
@@ -0,0 +1,187 @@
+import type {
+  FilterDraft,
+  FilterDraftStep,
+  FilterOperatorArity,
+} from "@/components/reui/filters/filters-types"
+
+/**
+ * The filter builder's step machine. Pure: no React, Base UI or shadcn import,
+ * so the whole create and amend flow is a table test in node with no DOM.
+ *
+ * Arity arrives ON THE ACTION, which keeps the reducer free of the schema index
+ * while it still owns the branch that skips the value step. The shipped chrome
+ * drives `openCreate`, browse, query, `selectField` and `close`; `openAmend`,
+ * `selectOperator`, `setValue`, `commit`, `back` and `goto` are published
+ * surface for a consumer composing their own panel.
+ */
+export type FilterDraftAction<V = unknown> =
+  | { type: "openCreate"; cascaderPath?: string[] }
+  | {
+      type: "openAmend"
+      ruleId: string
+      step: FilterDraftStep
+      path: string[]
+      operator: string | null
+      value: V | undefined
+      cascaderPath?: string[]
+    }
+  | { type: "close" }
+  /** Where the user is BROWSING, not the selected field's path. */
+  | { type: "setCascaderPath"; path: string[] }
+  | { type: "setQuery"; query: string }
+  | {
+      type: "selectField"
+      path: string[]
+      defaultOperator: string | null
+    }
+  | {
+      type: "selectOperator"
+      operator: string
+      arity: FilterOperatorArity
+      /** Carried across the operator change, already coerced. */
+      value: V | undefined
+    }
+  | { type: "setValue"; value: V | undefined }
+  | { type: "commit"; value?: V }
+  | { type: "back" }
+  | { type: "goto"; step: FilterDraftStep }
+
+export function createFilterDraft<V = unknown>(
+  cascaderPath: string[] = []
+): FilterDraft<V> {
+  return {
+    step: "field",
+    status: "editing",
+    ruleId: null,
+    path: [],
+    cascaderPath,
+    operator: null,
+    value: undefined,
+    query: "",
+  }
+}
+
+/** null means Back closes the builder rather than stepping back. */
+function previousStep(step: FilterDraftStep): FilterDraftStep | null {
+  if (step === "value") return "operator"
+  if (step === "operator") return "field"
+  return null
+}
+
+/**
+ * `null` is the closed state, not a separate boolean: `{ open, draft }` would
+ * make "open with no draft" and "closed but still holding one" representable.
+ */
+export function filterDraftReducer<V = unknown>(
+  state: FilterDraft<V> | null,
+  action: FilterDraftAction<V>
+): FilterDraft<V> | null {
+  switch (action.type) {
+    case "openCreate":
+      return createFilterDraft<V>(action.cascaderPath ?? [])
+
+    case "openAmend":
+      return {
+        step: action.step,
+        status: "editing",
+        ruleId: action.ruleId,
+        path: action.path,
+        // Defaults the picker to the field's own level, so amend opens beside
+        // its siblings, not at the root. Callers may override.
+        cascaderPath: action.cascaderPath ?? action.path.slice(0, -1),
+        operator: action.operator,
+        value: action.value,
+        query: "",
+      }
+
+    case "close":
+      return null
+
+    case "setCascaderPath":
+      if (!state) return state
+      if (state.cascaderPath === action.path) return state
+      return { ...state, cascaderPath: action.path }
+
+    case "setQuery":
+      if (!state) return state
+      if (state.query === action.query) return state
+      return { ...state, query: action.query }
+
+    case "selectField": {
+      if (!state) return state
+      // Choosing a field COMMITS at once; the condition is picked on the chip,
+      // so the popover never holds a second and third step to walk.
+      return {
+        ...state,
+        path: action.path,
+        operator: action.defaultOperator,
+        status: "ready",
+        // A field change invalidates the value: "Active" means nothing once
+        // the field becomes "Created at".
+        value: undefined,
+        step: "operator",
+        query: "",
+      }
+    }
+
+    case "selectOperator": {
+      if (!state) return state
+      // arity "none" is the whole filter; a value step would be an empty panel.
+      if (action.arity === "none") {
+        return {
+          ...state,
+          operator: action.operator,
+          value: undefined,
+          status: "ready",
+          query: "",
+        }
+      }
+      return {
+        ...state,
+        operator: action.operator,
+        value: action.value,
+        step: "value",
+        status: "editing",
+        query: "",
+      }
+    }
+
+    case "setValue":
+      if (!state) return state
+      return { ...state, value: action.value }
+
+    case "commit":
+      if (!state) return state
+      return {
+        ...state,
+        value: action.value === undefined ? state.value : action.value,
+        status: "ready",
+      }
+
+    case "back": {
+      if (!state) return state
+      const step = previousStep(state.step)
+      if (!step) return null
+      return { ...state, step, status: "editing", query: "" }
+    }
+
+    case "goto":
+      if (!state) return state
+      if (state.step === action.step) return state
+      return { ...state, step: action.step, status: "editing", query: "" }
+
+    default:
+      return state
+  }
+}
+
+/**
+ * A path is enough. Not an operator: the flow commits when the field is picked,
+ * so `operator: ""` is a legitimate committed state. Not a value either, since
+ * `arity: "none"` has none and an editor may commit `undefined` to clear.
+ */
+export function isFilterDraftCommittable<V>(
+  draft: FilterDraft<V> | null
+): draft is FilterDraft<V> {
+  return Boolean(draft && draft.path.length > 0)
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-editors.tsx b/apps/web/src/components/reui/filters/filters-editors.tsx
new file mode 100644
index 0000000..8391c2a
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-editors.tsx
@@ -0,0 +1,1341 @@
+"use client"
+
+import * as React from "react"
+import {
+  Cascader,
+  CascaderEmpty,
+  CascaderList,
+  CascaderPanel,
+  CascaderStatus,
+} from "@/components/reui/cascader/cascader"
+import type {
+  CascaderItemState,
+  CascaderProps,
+} from "@/components/reui/cascader/cascader"
+import {
+  useCascaderActions,
+  useCascaderHighlight,
+} from "@/components/reui/cascader/cascader-context"
+import { CascaderFooter } from "@/components/reui/cascader/cascader-footer"
+import { CascaderItems } from "@/components/reui/cascader/cascader-item"
+import {
+  CascaderInput,
+  CascaderNav,
+} from "@/components/reui/cascader/cascader-nav"
+import type {
+  CascaderActionItem,
+  CascaderNode,
+} from "@/components/reui/cascader/cascader-types"
+import {
+  FilterActionsContext,
+  filterControlSizes,
+  type FilterResolutionStore,
+} from "@/components/reui/filters/filters-context"
+import {
+  applyFilterExclusiveSelection,
+  filterFilterOptions,
+  joinFilterPath,
+  normalizeFilterQuery,
+  warnFilterOnce,
+} from "@/components/reui/filters/filters-lib"
+import type {
+  AnyFilterEditor,
+  FilterEditorProps,
+  FilterEditorRegistry,
+  FilterField,
+  FilterIndex,
+  FilterLabels,
+  FilterLoadResult,
+  FilterOperator,
+  FilterOption,
+  FilterOptionsState,
+} from "@/components/reui/filters/filters-types"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { ButtonGroup } from "@evobgp/ui/components/button-group"
+import { Input } from "@evobgp/ui/components/input"
+import { CheckIcon, XIcon } from "lucide-react"
+
+/* -------------------------------------------------------------------------- */
+/*                              The options service                           */
+/* -------------------------------------------------------------------------- */
+
+interface OptionsInternalState<O> {
+  items: FilterOption<O>[]
+  loading: boolean
+  error: boolean
+  hasMore: boolean
+  cursor?: string
+}
+
+const IDLE: OptionsInternalState<never> = {
+  items: [],
+  loading: false,
+  error: false,
+  hasMore: false,
+}
+
+/** Stable no-op subscription, for a hook running outside a `Filters` root. */
+const emptySubscribe = () => () => {}
+const zeroVersion = () => 0
+
+/**
+ * The joined path of a field, from the schema index. Keyed by PATH, not field
+ * identity, so labels survive a schema rebuild; an unknown field uses its id.
+ */
+function filterFieldKey<V, O>(
+  field: FilterField<V, O> | undefined,
+  index: FilterIndex | undefined
+): string | null {
+  if (!field) return null
+  if (index) {
+    for (const entry of index.all) {
+      if ((entry.field as unknown) === (field as unknown)) {
+        return joinFilterPath(entry.path)
+      }
+    }
+  }
+  return `#${field.id}`
+}
+
+/**
+ * The shared option service every option-backed editor receives: debouncing,
+ * aborting, cursor paging and value-to-label resolution. A deliberate fork of
+ * the cascader's async machinery. Resolution is two-tier: a ref cache written
+ * in an EFFECT, plus the root's `FilterResolutionStore`, without which a
+ * `loadOptions`-only field showed its raw id once the menu closed.
+ */
+export function useFilterOptions<V, O>(
+  field: FilterField<V, O> | undefined,
+  enabled: boolean,
+  debounceMs = 250
+): FilterOptionsState<O> {
+  const [query, setQueryState] = React.useState("")
+  const [state, setState] = React.useState<OptionsInternalState<O>>(
+    IDLE as OptionsInternalState<O>
+  )
+
+  const cache = React.useRef(new Map<string, FilterOption<O>>())
+  const requestId = React.useRef(0)
+  const abortRef = React.useRef<AbortController | null>(null)
+
+  // Read directly, so this degrades outside a `Filters` root instead of throwing.
+  const actionsContext = React.useContext(FilterActionsContext)
+  const shared: FilterResolutionStore | null =
+    actionsContext?.resolution ?? null
+  const sharedKey = filterFieldKey(field, actionsContext?.index)
+
+  // Re-render when a label lands ANYWHERE under this root, not just here.
+  React.useSyncExternalStore(
+    shared ? shared.subscribe : emptySubscribe,
+    shared ? shared.getVersion : zeroVersion,
+    shared ? shared.getVersion : zeroVersion
+  )
+
+  const staticOptions = field?.options
+  const loadOptions = field?.loadOptions
+  const isAsync = Boolean(loadOptions)
+
+  // Seeded in an effect, not during render, so the render stays pure.
+  React.useEffect(() => {
+    if (!staticOptions) return
+    for (const option of staticOptions) cache.current.set(option.value, option)
+    if (shared && sharedKey) shared.set(sharedKey, staticOptions)
+  }, [staticOptions, shared, sharedKey])
+
+  React.useEffect(() => {
+    for (const option of state.items) cache.current.set(option.value, option)
+    if (shared && sharedKey && state.items.length) {
+      shared.set(sharedKey, state.items)
+    }
+  }, [state.items, shared, sharedKey])
+
+  const run = React.useCallback(
+    async (nextQuery: string, cursor: string | undefined, append: boolean) => {
+      if (!loadOptions) return
+
+      abortRef.current?.abort()
+      const controller = new AbortController()
+      abortRef.current = controller
+      const id = ++requestId.current
+
+      setState((previous) => ({
+        ...previous,
+        loading: true,
+        error: false,
+        items: append ? previous.items : [],
+      }))
+
+      try {
+        const result = await loadOptions(nextQuery, {
+          signal: controller.signal,
+          cursor,
+        })
+        // A superseded request must not write; the id, not the abort, decides.
+        if (id !== requestId.current) return
+
+        const normalized: FilterLoadResult<O> = Array.isArray(result)
+          ? { items: result }
+          : result
+
+        setState((previous) => ({
+          items: append
+            ? [...previous.items, ...normalized.items]
+            : normalized.items,
+          loading: false,
+          error: false,
+          hasMore: normalized.hasMore ?? Boolean(normalized.nextCursor),
+          cursor: normalized.nextCursor,
+        }))
+      } catch (error) {
+        if (id !== requestId.current) return
+        if ((error as Error)?.name === "AbortError") return
+        setState((previous) => ({
+          ...previous,
+          loading: false,
+          error: true,
+          hasMore: false,
+        }))
+      }
+    },
+    [loadOptions]
+  )
+
+  React.useEffect(() => {
+    if (!enabled || !isAsync) return
+    const timer = setTimeout(
+      () => void run(query, undefined, false),
+      debounceMs
+    )
+    return () => clearTimeout(timer)
+  }, [enabled, isAsync, query, debounceMs, run])
+
+  React.useEffect(() => {
+    return () => abortRef.current?.abort()
+  }, [])
+
+  const normalizedQuery = normalizeFilterQuery(query)
+
+  // Async results are server-filtered; re-filtering hides what the label omits.
+  const items = React.useMemo(() => {
+    if (isAsync) return state.items
+    return filterFilterOptions(staticOptions ?? [], normalizedQuery)
+  }, [isAsync, state.items, staticOptions, normalizedQuery])
+
+  const setQuery = React.useCallback((next: string) => setQueryState(next), [])
+
+  const loadMore = React.useCallback(() => {
+    if (!state.hasMore || state.loading) return
+    void run(query, state.cursor, true)
+  }, [state.hasMore, state.loading, state.cursor, query, run])
+
+  const retry = React.useCallback(() => {
+    void run(query, undefined, false)
+  }, [query, run])
+
+  const resolve = React.useCallback(
+    (value: string) => {
+      // The ref cache cannot be the only tier: a ref write triggers no render,
+      // so the chip would paint the raw value and never repaint. The shared
+      // store holds other instances' pages and re-renders this one on a gain.
+      const declared = staticOptions?.find((option) => option.value === value)
+      if (declared) return declared
+      const fromShared =
+        shared && sharedKey ? shared.get(sharedKey, value) : undefined
+      if (fromShared) return fromShared as FilterOption<O>
+      return cache.current.get(value)
+    },
+    [staticOptions, shared, sharedKey]
+  )
+
+  return {
+    items,
+    loading: state.loading,
+    error: state.error,
+    hasMore: state.hasMore,
+    query,
+    setQuery,
+    loadMore,
+    retry,
+    resolve,
+  }
+}
+
+/**
+ * Resolves committed values no loaded page covered, through `resolveValues`: a
+ * restored saved view holds ids the loader never returned. The claim set marks
+ * an omitted id asked, so only a REJECTED resolve lets a later mount retry.
+ */
+export function useFilterValueResolution<V, O>(
+  field: FilterField<V, O> | undefined,
+  values: readonly unknown[]
+): void {
+  const actionsContext = React.useContext(FilterActionsContext)
+  const shared: FilterResolutionStore | null =
+    actionsContext?.resolution ?? null
+  const sharedKey = filterFieldKey(field, actionsContext?.index)
+  const resolveValues = field?.resolveValues
+  const staticOptions = field?.options
+  // Keyed by CONTENT; NUL cannot occur inside a real stored value.
+  const valuesKey = values.map((entry) => String(entry)).join("\u0000")
+
+  React.useEffect(() => {
+    if (!resolveValues || !shared || !sharedKey || valuesKey === "") return
+    const missing = valuesKey.split("\u0000").filter((value) => {
+      if (staticOptions?.some((option) => option.value === value)) return false
+      return shared.get(sharedKey, value) === undefined
+    })
+    const wanted = shared.claim(sharedKey, missing)
+    if (wanted.length === 0) return
+
+    // No unmount guard: the store outlives the component.
+    void Promise.resolve(resolveValues(wanted)).then(
+      (options) => shared.set(sharedKey, options),
+      () => shared.release(sharedKey, wanted)
+    )
+  }, [resolveValues, shared, sharedKey, valuesKey, staticOptions])
+}
+
+/* -------------------------------------------------------------------------- */
+/*                               Shared chrome                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The panel every editor renders into. A plain flex column, NOT a combobox: an
+ * editor inside a Base UI composite would inherit its `aria-activedescendant`
+ * and arrow keys, which is hostile to a colour picker or a slider.
+ */
+function EditorPanel({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      data-slot="filter-editor"
+      className={cn(
+        "flex w-full flex-col gap-2 p-2",
+        /* The list height cap as a VARIABLE, not the `maxHeight` prop, which
+           becomes an inline style no consumer class can beat. 16rem is the
+           256px the menu has always used. */
+        "[--cascader-max-height:16rem]",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function EditorFooter({
+  onCancel,
+  onCommit,
+  labels,
+  host,
+}: Pick<FilterEditorProps, "labels" | "host"> & {
+  onCancel: () => void
+  onCommit: () => void
+}) {
+  // The ONE ladder, not a hardcoded rung: `size="sm"` here measured 4px short
+  // of the bar's own controls at `size="default"` in all eight styles.
+  const actions = React.useContext(FilterActionsContext)
+  const sizes = filterControlSizes({ size: actions?.size ?? "default" })
+
+  // The create host advances on commit and has Back; amend must offer discard.
+  if (host === "create") return null
+  return (
+    <div className="flex items-center justify-end gap-1.5 pt-1">
+      <Button variant="ghost" size={sizes.button} onClick={onCancel}>
+        {labels.discard}
+      </Button>
+      <Button size={sizes.button} onClick={onCommit}>
+        {labels.apply}
+      </Button>
+    </div>
+  )
+}
+
+/**
+ * `w-full` because `ButtonGroup` is `w-fit`, which collapses inside this
+ * fixed-width panel. Sera is an underline style, so its direct children flatten
+ * to one bottom-only edge - `border-b-input`, not transparent, since the
+ * buttons are the trailing edge and the rule would stop mid-panel.
+ */
+const EDITOR_FIELD_GROUP =
+  "w-full"
+
+/**
+ * Confirm and cancel, an OUTLINE pair FUSED onto the field's trailing edge.
+ * Returns a FRAGMENT: `ButtonGroup` fuses with selectors matching DIRECT
+ * children only, so a wrapper div renders three separate boxes. `size="icon"`
+ * because every style's icon button at that size is exactly its input's height.
+ */
+function EditorCommitButtons({
+  onCancel,
+  onCommit,
+  labels,
+}: Pick<FilterEditorProps, "labels"> & {
+  onCancel: () => void
+  onCommit: () => void
+}) {
+  return (
+    <>
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        aria-label={labels.apply}
+        onClick={onCommit}
+      >
+        <CheckIcon aria-hidden="true" />
+      </Button>
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        aria-label={labels.discard}
+        onClick={onCancel}
+      >
+        <XIcon aria-hidden="true" />
+      </Button>
+    </>
+  )
+}
+
+function useCommitKeys(commit: () => void, cancel: () => void) {
+  return React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+        event.preventDefault()
+        commit()
+        return
+      }
+      if (event.key === "Escape") {
+        event.preventDefault()
+        // Stop here so a surrounding dialog does not also close.
+        event.stopPropagation()
+        cancel()
+      }
+    },
+    [commit, cancel]
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Text / number                               */
+/* -------------------------------------------------------------------------- */
+
+export function FilterTextEditor<V, O>({
+  value,
+  onValueChange,
+  commit,
+  cancel,
+  autoFocusProps,
+  labels,
+  host,
+  field,
+}: FilterEditorProps<V, O>) {
+  const onKeyDown = useCommitKeys(() => commit(), cancel)
+  return (
+    // A width, not shrink-to-fit: the popover is `w-auto`, so an unsized box
+    // changes width between the hosts. `w-72` is measured - it holds about 23
+    // characters in sera and 27 in nova; `w-64` held about eighteen, too short
+    // for an email, and `w-80` was the widest control in a bar of compact
+    // chips. Capped at the viewport because `w-80` is 320px and a 360px phone
+    // has 40px to spare. A `w-*` on the field wins.
+    <EditorPanel
+      className={cn("w-72 max-w-[calc(100vw-2rem)] min-w-0", field.className)}
+    >
+      <ButtonGroup className={EDITOR_FIELD_GROUP}>
+        <Input
+          {...autoFocusProps}
+          value={(value as string) ?? ""}
+          placeholder={field.placeholder ?? labels.valuePlaceholder}
+          aria-label={field.label}
+          onChange={(event) => onValueChange(event.target.value as V)}
+          onKeyDown={onKeyDown}
+        />
+        {/*
+          A lone input still belongs in the group: the per-style sheets re-round
+          the LAST child, so a group with nothing fused draws the bare field.
+        */}
+        {host === "create" ? null : (
+          <EditorCommitButtons
+            labels={labels}
+            onCancel={cancel}
+            onCommit={() => commit()}
+          />
+        )}
+      </ButtonGroup>
+    </EditorPanel>
+  )
+}
+
+export function FilterNumberEditor<V, O>({
+  value,
+  onValueChange,
+  commit,
+  cancel,
+  autoFocusProps,
+  labels,
+  host,
+  field,
+}: FilterEditorProps<V, O>) {
+  const onKeyDown = useCommitKeys(() => commit(), cancel)
+  return (
+    // Deliberately not the text editor's `w-72`: number values are short by
+    // construction, and a wide box around "42" is the opposite defect.
+    <EditorPanel className={cn("w-56 min-w-0", field.className)}>
+      <ButtonGroup className={EDITOR_FIELD_GROUP}>
+        <Input
+          {...autoFocusProps}
+          type="number"
+          value={value === undefined || value === null ? "" : String(value)}
+          placeholder={field.placeholder}
+          aria-label={field.label}
+          onChange={(event) => {
+            const raw = event.target.value
+            onValueChange((raw === "" ? undefined : Number(raw)) as V)
+          }}
+          onKeyDown={onKeyDown}
+        />
+        {host === "create" ? null : (
+          <EditorCommitButtons
+            labels={labels}
+            onCancel={cancel}
+            onCommit={() => commit()}
+          />
+        )}
+      </ButtonGroup>
+    </EditorPanel>
+  )
+}
+
+export function FilterRangeEditor<V, O>({
+  value,
+  onValueChange,
+  commit,
+  cancel,
+  autoFocusProps,
+  labels,
+  host,
+  field,
+}: FilterEditorProps<V, O>) {
+  const tuple = (Array.isArray(value) ? value : []) as unknown[]
+  const onKeyDown = useCommitKeys(() => commit(), cancel)
+
+  const update = (index: 0 | 1, raw: string) => {
+    const next = [tuple[0], tuple[1]]
+    next[index] = raw === "" ? undefined : Number(raw)
+    onValueChange(next as V)
+  }
+
+  return (
+    <EditorPanel>
+      <div className="flex items-center gap-1.5">
+        <Input
+          {...autoFocusProps}
+          type="number"
+          value={tuple[0] === undefined ? "" : String(tuple[0])}
+          aria-label={labels.rangeFrom(field.label)}
+          onChange={(event) => update(0, event.target.value)}
+          onKeyDown={onKeyDown}
+        />
+        <span className="text-muted-foreground text-xs">
+          {labels.rangeSeparator}
+        </span>
+        <Input
+          type="number"
+          value={tuple[1] === undefined ? "" : String(tuple[1])}
+          aria-label={labels.rangeTo(field.label)}
+          onChange={(event) => update(1, event.target.value)}
+          onKeyDown={onKeyDown}
+        />
+      </div>
+      <EditorFooter
+        host={host}
+        labels={labels}
+        onCancel={cancel}
+        onCommit={() => commit()}
+      />
+    </EditorPanel>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  The menu                                  */
+/* -------------------------------------------------------------------------- */
+
+/** One row. The shape both the operator menu and the option editors hand over. */
+export interface FilterListItem {
+  value: string
+  label: string
+  icon?: React.ReactNode
+  description?: string
+  keywords?: string[]
+  disabled?: boolean
+  /**
+   * A None row, from `FilterOption.exclusive`. LAYOUT only: what a pick DOES is
+   * `applyFilterExclusiveSelection`, in the option editor's handler. A consumer
+   * composing `FilterMenu` into an editor of their own owns the same call.
+   */
+  exclusive?: boolean
+}
+
+/**
+ * Beyond the cascader's own fields: one divider flag, on the first row of a
+ * group that is not the first, because grouping happens out here. A separator
+ * NODE would join the option ring, and `[data-selected] + :not([data-selected])`
+ * reads the LIVE selection, so unticking a pinned row drew a second line.
+ */
+interface FilterMenuMeta {
+  divider?: boolean
+  /**
+   * Carries `FilterListItem.exclusive` down to the row. The rule above it is
+   * `aria-hidden`, so the row's accessible name is the only channel arriving
+   * before the press, and `renderItem` receives the node and nothing else.
+   *
+   * `[data-slot=filter-menu-exclusive-hint]` is also the handle a consumer
+   * styles the row through: the cascader's row element takes no attribute of
+   * ours, so `:has([data-slot=filter-menu-exclusive-hint])` selects it.
+   */
+  exclusive?: boolean
+}
+
+/** Joins a selection into one comparable key; NUL cannot occur in a value. */
+const PIN_SEPARATOR = "\u0000"
+
+/** A bound on a race: each attempt costs one task and stops on success. */
+const MAX_PIN_RESTORE_ATTEMPTS = 4
+
+interface PendingPinRestore {
+  /** The row the user was on when the rows moved. Tracked by VALUE, never index. */
+  value: string
+  /** The index it sat at, which is the half of the signature Base UI keeps. */
+  index: number
+  /** The order the rows landed in, so the target's new position is known. */
+  order: string[]
+  attempts: number
+}
+
+/**
+ * Carries the HIGHLIGHT across a live re-pin. Base UI holds it as an INDEX and
+ * a keyed reorder MOVES the DOM node rather than remounting it, so the index
+ * map only rebuilds when the `MutationObserver` fires: until then, ticking a
+ * row moves the highlight down one. So this ARMS in the layout effect, where
+ * the map still reads the OLD order, and fires on the signature (SAME index,
+ * DIFFERENT row) from a TASK, re-trying because the store event and the re-sort
+ * are unordered. A synthetic `mousemove`, since Base UI exposes no setter.
+ */
+function FilterMenuPinKeeper({
+  order,
+  items,
+}: {
+  order: string[]
+  /** The data the order was derived from, by identity. */
+  items: FilterListItem[]
+}) {
+  const { baseId } = useCascaderActions()
+  const highlight = useCascaderHighlight()
+  const previousRef = React.useRef<{
+    order: string[]
+    items: FilterListItem[]
+  } | null>(null)
+  const pendingRef = React.useRef<PendingPinRestore | null>(null)
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // From the render: on the reordering commit a ref still holds the OLD row.
+  const highlightedValue = highlight.value
+  const highlightedIndex = highlight.index
+
+  const stop = React.useCallback(() => {
+    pendingRef.current = null
+    if (timerRef.current === null) return
+    clearTimeout(timerRef.current)
+    timerRef.current = null
+  }, [])
+
+  const startRestore = React.useCallback(() => {
+    const attempt = () => {
+      timerRef.current = null
+      const pending = pendingRef.current
+      if (!pending) return
+
+      const target = pending.order.indexOf(pending.value)
+      const rows = document
+        .getElementById(`${baseId}-column-0`)
+        ?.querySelectorAll<HTMLElement>('[data-slot="cascader-item"]')
+      // A WINDOWED list renders a subset, so row N is not order[N]. Leave it.
+      if (target < 0 || !rows || rows.length !== pending.order.length) {
+        stop()
+        return
+      }
+
+      rows[target]?.dispatchEvent(
+        new MouseEvent("mousemove", { bubbles: true })
+      )
+
+      pending.attempts += 1
+      if (pending.attempts >= MAX_PIN_RESTORE_ATTEMPTS) {
+        stop()
+        return
+      }
+      timerRef.current = setTimeout(attempt, 0)
+    }
+
+    timerRef.current = setTimeout(attempt, 0)
+  }, [baseId, stop])
+
+  // No dependency list: the arm must run on the commit that reorders the rows.
+  React.useLayoutEffect(() => {
+    const previous = previousRef.current
+    previousRef.current = { order, items }
+
+    if (!previous || previous.order === order) return
+    // New DATA (a page, a query) is Base UI's to highlight; only a re-pin is ours.
+    if (previous.items !== items) return
+    if (!highlightedValue) return
+    // Content, not identity: a re-pin can leave the rows in the same order.
+    if (isSameOrder(previous.order, order)) return
+
+    pendingRef.current = {
+      value: highlightedValue,
+      index: highlightedIndex,
+      order,
+      attempts: 0,
+    }
+  })
+
+  React.useEffect(() => {
+    const pending = pendingRef.current
+    if (!pending) return
+
+    // Back where it belongs, or moved by the user: either way the arm is spent.
+    if (
+      highlightedValue === pending.value ||
+      highlightedIndex !== pending.index
+    ) {
+      stop()
+      return
+    }
+    // Already chasing this one; a second chain would double every dispatch.
+    if (pending.attempts > 0 || timerRef.current !== null) return
+    startRestore()
+  }, [highlightedValue, highlightedIndex, startRestore, stop])
+
+  React.useEffect(() => stop, [stop])
+
+  return null
+}
+
+/** Element-wise, because the arrays are rebuilt on every selection change. */
+function isSameOrder(a: string[], b: string[]) {
+  if (a.length !== b.length) return false
+  for (let index = 0; index < a.length; index += 1) {
+    if (a[index] !== b[index]) return false
+  }
+  return true
+}
+
+export interface FilterMenuProps {
+  items: FilterListItem[]
+  /** Committed values. Drives the check mark and the pinned group. */
+  selected: string[]
+  multiple?: boolean
+  /** Receives the FULL next selection, so no caller re-derives it. */
+  onSelectionChange: (values: string[]) => void
+  labels: FilterLabels
+  ariaLabel: string
+  searchPlaceholder?: string
+  /** Whether the search field is VISIBLE. It is always rendered regardless. */
+  searchable?: boolean
+  /**
+   * Viewport height before the list scrolls, in pixels. Omitted on purpose by
+   * the option editors: it becomes an inline style a consumer's `className`
+   * cannot outrank, so the panel publishes `--cascader-max-height` instead.
+   */
+  maxHeight?: number
+  /**
+   * Pin selected rows above the rest, with a full-bleed rule between them. Off
+   * by default; the option editors read `FilterField.pinSelected` per field.
+   */
+  pinSelected?: boolean
+  /**
+   * Order INSIDE each group, plus WHEN the partition is taken. Declaration
+   * order by default, so the partition is stable rather than a re-sort.
+   */
+  sortSelected?: "none" | "label" | "snapshot"
+  /** The caller already filtered `items`, so the cascader must not re-filter. */
+  preFiltered?: boolean
+  autoFocusProps?: FilterEditorProps["autoFocusProps"]
+  /** Controlled query. Pair it with `onQueryChange` to filter outside. */
+  query?: string
+  onQueryChange?: (query: string) => void
+  state?: Pick<
+    FilterOptionsState<unknown>,
+    "loading" | "error" | "hasMore" | "loadMore" | "retry"
+  >
+}
+
+/**
+ * One accessible list, shared by the operator menu and every option editor. It
+ * is the CASCADER configured flat, not a list this file implements, which
+ * brings the typeahead, RTL handling and live region with it. Only the pinning
+ * and the paging affordance stay out here.
+ */
+export function FilterMenu({
+  items,
+  selected,
+  multiple = false,
+  onSelectionChange,
+  labels,
+  ariaLabel,
+  searchPlaceholder,
+  searchable = true,
+  maxHeight,
+  pinSelected = false,
+  sortSelected = "none",
+  preFiltered = false,
+  autoFocusProps,
+  query,
+  onQueryChange,
+  state,
+}: FilterMenuProps) {
+  /**
+   * The pin set as a KEY, not an array: `selected` is a fresh array on most
+   * renders, so a memo depending on it re-partitions every render.
+   */
+  const liveKey = pinSelected ? selected.join(PIN_SEPARATOR) : ""
+
+  /**
+   * The same set, frozen at OPEN, for `sortSelected: "snapshot"`. LIVE is the
+   * default: "your picks, then the rest" is about the CURRENT selection, and
+   * `FilterMenuPinKeeper` pays for rows moving under the pointer.
+   */
+  const [snapshotKey] = React.useState(() => liveKey)
+  // `pinSelected` re-checked here, not just through `liveKey`: `snapshotKey` is
+  // frozen at MOUNT, so a menu that lost the prop would keep partitioning.
+  const pinnedKey = !pinSelected
+    ? ""
+    : sortSelected === "snapshot"
+      ? snapshotKey
+      : liveKey
+
+  // Uncontrolled unless the caller owns the query, as an option service does.
+  const [ownQuery, setOwnQuery] = React.useState("")
+  const currentQuery = query ?? ownQuery
+  const setQuery = onQueryChange ?? setOwnQuery
+
+  /**
+   * Memoized on the SELECTION, not the query: folding the query in re-sorted
+   * 4,000 rows on every keystroke, for a one pixel rule.
+   */
+  const partitioned = React.useMemo(() => {
+    const pinned = new Set(pinnedKey ? pinnedKey.split(PIN_SEPARATOR) : [])
+
+    /*
+      Exclusive rows come out BEFORE the pin partition; their position is fixed.
+      Pinning is by SELECTION, so a ticked None row would lift itself above the
+      very rule drawn to set it apart and drop back on untick. Grouping by ROLE
+      means the pinned group counts ordinary picks only, which is also why
+      picking None draws no pin rule: it clears every other pick.
+    */
+    const exclusive = items.filter((item) => item.exclusive)
+    const values = exclusive.length
+      ? items.filter((item) => !item.exclusive)
+      : items
+
+    const chosen = pinned.size
+      ? values.filter((item) => pinned.has(item.value))
+      : []
+    const rest = pinned.size
+      ? values.filter((item) => !pinned.has(item.value))
+      : values
+
+    // The SCHEMA's order inside each group unless the field asks otherwise:
+    // option order is usually semantic.
+    const ordered =
+      sortSelected === "label"
+        ? [
+            [...chosen].sort((a, b) => a.label.localeCompare(b.label)),
+            [...rest].sort((a, b) => a.label.localeCompare(b.label)),
+            [...exclusive].sort((a, b) => a.label.localeCompare(b.label)),
+          ]
+        : [chosen, rest, exclusive]
+
+    const rows = [...ordered[0], ...ordered[1], ...ordered[2]]
+
+    return {
+      chosenCount: chosen.length,
+      /** Index of the first exclusive row, or -1 when the list has none. */
+      exclusiveAt: exclusive.length ? rows.length - exclusive.length : -1,
+      // The render order alone, so a REORDER is an identity compare.
+      order: rows.map((item) => item.value),
+      nodes: rows.map<CascaderNode<FilterMenuMeta>>((item) => ({
+        value: item.value,
+        label: item.label,
+        icon: item.icon,
+        description: item.description,
+        keywords: item.keywords,
+        disabled: item.disabled,
+        // Only exclusive rows carry `data`, so the ordinary 4,000 keep theirs.
+        data: item.exclusive ? { exclusive: true } : undefined,
+      })),
+    }
+  }, [items, pinnedKey, sortSelected])
+
+  // No rule under a query: "your picks, then the rest" is about the WHOLE list.
+  const dividerAt =
+    partitioned.chosenCount && !currentQuery.trim()
+      ? partitioned.chosenCount
+      : -1
+
+  // Survives a search, unlike the pin rule: it is a fact about the row.
+  const exclusiveDividerAt = partitioned.exclusiveAt
+
+  const nodes = React.useMemo<CascaderNode<FilterMenuMeta>[]>(() => {
+    const total = partitioned.nodes.length
+    // Only a boundary with rows on BOTH sides is one: a rule on row 0 would
+    // be a line above the top of the list.
+    const marks = [dividerAt, exclusiveDividerAt].filter(
+      (index) => index > 0 && index < total
+    )
+    if (marks.length === 0) return partitioned.nodes
+    // Rows rewritten, not rebuilt: copying 4,000 objects would undo the split.
+    const next = partitioned.nodes.slice()
+    for (const index of marks) {
+      // MERGED, never replaced: the two boundaries usually fall on one row, and
+      // overwriting `data` dropped the flag the accessible name is built from.
+      next[index] = {
+        ...next[index],
+        data: { ...next[index].data, divider: true },
+      }
+    }
+    return next
+  }, [partitioned, dividerAt, exclusiveDividerAt])
+
+  const renderItem = React.useCallback(
+    (
+      node: CascaderNode<FilterMenuMeta>,
+      itemState: CascaderItemState<FilterMenuMeta>
+    ) => (
+      <>
+        {node.data?.divider ? (
+          <span
+            data-slot="filter-menu-divider"
+            aria-hidden="true"
+            /* Full bleed, over the per-style `--cascader-list-pad` the shell
+               publishes: a rule stopping at the row's inset box reads as a gap.
+               Centred in the 8px the row gives back above itself, not `top-0`. */
+            className="bg-border absolute inset-x-[calc(var(--cascader-list-pad,4px)*-1)] -top-1 h-px"
+          />
+        ) : null}
+
+        {node.icon ? (
+          <span
+            data-slot="filter-menu-icon"
+            className="text-muted-foreground flex shrink-0 items-center justify-center"
+          >
+            {node.icon}
+          </span>
+        ) : null}
+
+        <span className="flex min-w-0 flex-1 flex-col items-start gap-0.5">
+          <span className="w-full truncate text-start">{node.label}</span>
+          {node.description ? (
+            <span className="text-muted-foreground w-full truncate text-start text-xs">
+              {node.description}
+            </span>
+          ) : null}
+        </span>
+
+        {/*
+          What the aria-hidden rule says, for the people it does not reach.
+          Inside the option element so it joins the row's accessible NAME, not
+          an `aria-describedby`: a description is announced late or not at all,
+          and this has to arrive before the press. The cascader's `srDetails`
+          cannot either: `renderItem` replaces the row body. Empty copy renders
+          nothing, so `labels.exclusiveHint` of "" silences it.
+        */}
+        {node.data?.exclusive && labels.exclusiveHint ? (
+          <span data-slot="filter-menu-exclusive-hint" className="sr-only">
+            {`, ${labels.exclusiveHint}`}
+          </span>
+        ) : null}
+
+        {/* A check mark in both modes, never the cascader's default box. */}
+        {itemState.selected ? (
+          <span
+            data-slot="filter-menu-check"
+            /* The gutter every style already reserves, on the cascader's own
+               logical inset. `end-*` rather than `right-2`, so RTL mirrors. */
+            className="size-4 pointer-events-none absolute end-[var(--cascader-row-inset,8px)]! flex items-center justify-center rtl:right-auto!"
+          >
+            <CheckIcon className="text-foreground! **:text-foreground!" />
+          </span>
+        ) : null}
+      </>
+    ),
+    [labels.exclusiveHint]
+  )
+
+  const cascaderLabels = React.useMemo(
+    () => ({
+      search: searchPlaceholder ?? labels.searchOptions,
+      empty: labels.empty,
+      loading: labels.loading,
+      loadingMore: labels.loadingMore,
+      loadMore: labels.loadMore,
+      error: labels.error,
+      retry: labels.retry,
+      // Named after the field, not the cascader's own "Top level" wording.
+      rootLevel: ariaLabel,
+      panelLabel: ariaLabel,
+      // Run FLAT, so the default hint would teach branch keys that do not exist.
+      keyboardHint: () => "",
+      // From `FilterLabels`, so the menu ships no English of its own.
+      resultsAnnouncement: labels.resultsAnnouncement,
+      actionsLabel: labels.actionsLabel,
+    }),
+    [labels, ariaLabel, searchPlaceholder]
+  )
+
+  /**
+   * Paging and retry in the pinned footer, never a row: a row would join the
+   * option ring, where arrows land on it and a query filters it away mid-page.
+   */
+  const actions = React.useMemo<CascaderActionItem[]>(() => {
+    if (state?.error) {
+      return [{ value: "retry", label: labels.retry, onSelect: state.retry }]
+    }
+    if (state?.hasMore) {
+      return [
+        {
+          value: "load-more",
+          label: state.loading ? labels.loadingMore : labels.loadMore,
+          disabled: state.loading,
+          onSelect: state.loadMore,
+        },
+      ]
+    }
+    return []
+  }, [state, labels])
+
+  const shared = {
+    // Inline and pinned open with a no-op handler, so the unconditional
+    // `setOpen(false)` of a single-select commit cannot dismiss the popover.
+    inline: true,
+    open: true,
+    onOpenChange: () => {},
+    items: nodes,
+    inputValue: currentQuery,
+    onInputValueChange: setQuery,
+    maxHeight,
+    renderItem,
+    labels: cascaderLabels,
+    actions,
+    // The option service is the ONE filter when it owns the query.
+    ...(preFiltered ? { filter: () => true } : null),
+  }
+
+  const cascaderProps: CascaderProps<FilterMenuMeta> = multiple
+    ? {
+        ...shared,
+        multiple: true,
+        value: selected,
+        onValueChange: (values: string[]) => onSelectionChange(values),
+      }
+    : {
+        ...shared,
+        value: selected[0] ?? "",
+        onValueChange: (value: string) =>
+          onSelectionChange(value ? [value] : []),
+      }
+
+  return (
+    <Cascader {...cascaderProps}>
+      <CascaderPanel>
+        {/*
+          `searchable: false` hides the FIELD, never removes it: the input owns
+          focus and `aria-activedescendant`, so a menu without one has no
+          keyboard. The class goes on the nav so the strip's border goes too.
+        */}
+        <CascaderNav
+          className={cn(
+            /* The nav's divider is `border-border/60` and the group separator
+               is a full-opacity `bg-border`; two strengths read as a mistake. */
+            "border-border",
+            !searchable && "sr-only"
+          )}
+        >
+          <CascaderInput
+            {...(autoFocusProps ?? {})}
+            placeholder={searchPlaceholder ?? labels.searchOptions}
+            aria-label={ariaLabel}
+          />
+        </CascaderNav>
+        <CascaderEmpty>
+          {state?.error
+            ? labels.error
+            : state?.loading
+              ? labels.loading
+              : labels.empty}
+        </CascaderEmpty>
+        {/*
+          Plain rows, DELIBERATELY not `CascaderVirtualItems`: windowing stands
+          `FilterMenuPinKeeper` down. The long lists are async and PAGE 25.
+        */}
+        <CascaderList
+          /**
+           * Real layout space around the group rule, which is absolutely
+           * positioned and adds no height. `renderItem` cannot reach the row's
+           * own box, and a spacer NODE would join the option ring.
+           *
+           * `:has()` is affordable here: scoped to this one list, a compound
+           * whose descendant exists on at most ONE row, and these menus render
+           * tens of rows rather than thousands.
+           */
+          className="[&>[data-slot=cascader-item]:has([data-slot=filter-menu-divider])]:mt-2"
+        >
+          <CascaderItems />
+        </CascaderList>
+        <CascaderFooter />
+        <CascaderStatus />
+        {/*
+          Last, so its layout effect reads the reordered DOM after every row has
+          registered. Not mounted at all for a menu that cannot reorder.
+        */}
+        {pinSelected && sortSelected !== "snapshot" ? (
+          <FilterMenuPinKeeper order={partitioned.order} items={items} />
+        ) : null}
+      </CascaderPanel>
+    </Cascader>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Option based editors                          */
+/* -------------------------------------------------------------------------- */
+
+function OptionEditor<V, O>(
+  props: FilterEditorProps<V, O> & { multiple: boolean }
+) {
+  const {
+    multiple,
+    options,
+    labels,
+    autoFocusProps,
+    commit,
+    cancel,
+    onValueChange,
+    value,
+    field,
+  } = props
+
+  const selected = React.useMemo(() => {
+    if (value === undefined || value === null) return []
+    return (Array.isArray(value) ? value : [value]) as string[]
+  }, [value])
+
+  const announce = React.useContext(FilterActionsContext)?.announce
+
+  return (
+    /*
+      A DELIBERATELY narrow default: 12rem holds around 22 characters at every
+      style's row size. `field.className` lands LAST, so a consumer's `w-*` wins.
+    */
+    <EditorPanel className={cn("w-48 min-w-0 gap-0 p-0", field.className)}>
+      <FilterMenu
+        items={options.items}
+        selected={selected}
+        multiple={multiple}
+        onSelectionChange={(raw) => {
+          /*
+            The ONE place the None rule is applied: every route into a selection
+            arrives here, so click and keyboard cannot disagree, and only the
+            editor can ANSWER it - `options.resolve` sees the schema and every
+            loaded page, where the menu holds only the rows on screen.
+          */
+          const values = applyFilterExclusiveSelection(raw, selected, (value) =>
+            Boolean(options.resolve(value)?.exclusive)
+          )
+
+          /*
+            Identity is the test: the rule hands back `raw` itself unless it
+            intervened. Announced because nothing else reports it: focus never
+            moved, and nobody is on the rows that lost their check marks.
+          */
+          if (values !== raw && announce) {
+            const arrived = values.find((entry) => !selected.includes(entry))
+            const cleared = raw.length - values.length
+            if (arrived !== undefined && cleared > 0) {
+              announce(
+                labels.exclusiveAnnouncement(
+                  options.resolve(arrived)?.label ?? arrived,
+                  cleared
+                )
+              )
+            }
+          } else if (values === raw && raw.length > 1) {
+            /*
+              The hole in the rule, made LOUD. An unresolvable value is treated
+              as ordinary and cannot be told from an id whose label has not
+              arrived, so this warns rather than acts. Needs a SEEN None row.
+            */
+            const hasNoneRow =
+              options.items.some((item) => item.exclusive) ||
+              Boolean(field.options?.some((option) => option.exclusive))
+            const unresolved = hasNoneRow
+              ? raw.find((entry) => options.resolve(entry) === undefined)
+              : undefined
+            if (unresolved !== undefined) {
+              warnFilterOnce(
+                `exclusive-unresolved:${field.id}`,
+                `field "${field.id}" has an exclusive option, but the value ` +
+                  `"${unresolved}" resolves to no option, so the None rule ` +
+                  `cannot tell whether it is the exclusive one and has left ` +
+                  `it in place. Declare the exclusive option in the field's ` +
+                  `\`options\` even when the rest of the list is async, or ` +
+                  `cover stored values with \`resolveValues\`.`
+              )
+            }
+          }
+
+          if (!multiple) {
+            const next = values[0]
+            // Base UI deselects the committed row; an empty filter is no gain.
+            if (next === undefined) {
+              cancel()
+              return
+            }
+            onValueChange(next as V)
+            commit(next as V)
+            return
+          }
+          onValueChange(values as V)
+          // Every toggle commits with the popover open: several picks, one gesture.
+          commit(values as V, { close: false })
+        }}
+        labels={labels}
+        ariaLabel={field.label}
+        searchable={field.searchable ?? true}
+        // Not a composed `Search ${label}...`: hardcoded English no `labels`
+        // override could reach, and lowercasing a label is locale-hostile.
+        searchPlaceholder={field.placeholder}
+        pinSelected={field.pinSelected ?? false}
+        sortSelected={field.sortSelected}
+        // `useFilterOptions` already applied the query, locally or server side.
+        preFiltered
+        query={options.query}
+        onQueryChange={options.setQuery}
+        state={options}
+        autoFocusProps={autoFocusProps}
+      />
+    </EditorPanel>
+  )
+}
+
+export function FilterSelectEditor<V, O>(props: FilterEditorProps<V, O>) {
+  return <OptionEditor {...props} multiple={false} />
+}
+
+export function FilterMultiSelectEditor<V, O>(props: FilterEditorProps<V, O>) {
+  return <OptionEditor {...props} multiple />
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Boolean                                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Module level, so the menu's index is not rebuilt on every render. Not in
+ * `FilterLabels`: the chip's own display spells the same two words out.
+ */
+const BOOLEAN_ITEMS: FilterListItem[] = [
+  { value: "true", label: "True" },
+  { value: "false", label: "False" },
+]
+
+export function FilterBooleanEditor<V, O>({
+  value,
+  onValueChange,
+  commit,
+  labels,
+  autoFocusProps,
+  field,
+}: FilterEditorProps<V, O>) {
+  return (
+    // Two words, and `field.className` lands last so a consumer's `w-*` wins.
+    <EditorPanel className={cn("w-40 min-w-0 gap-0 p-0", field.className)}>
+      <FilterMenu
+        items={BOOLEAN_ITEMS}
+        selected={value === true ? ["true"] : value === false ? ["false"] : []}
+        onSelectionChange={(values) => {
+          /* Deselecting the committed row leaves nothing to filter on, so it is
+             a no-op rather than a commit of `false`. */
+          if (values.length === 0) return
+          const next = (values[0] === "true") as V
+          onValueChange(next)
+          commit(next)
+        }}
+        labels={labels}
+        ariaLabel={field.label}
+        /* Two rows: a search over them is more chrome than list, but the
+           field is still rendered, hidden, because it owns the keyboard. */
+        searchable={false}
+        autoFocusProps={autoFocusProps}
+      />
+    </EditorPanel>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Resolution                                */
+/* -------------------------------------------------------------------------- */
+
+export type {
+  AnyFilterEditor,
+  FilterEditorRegistry,
+} from "@/components/reui/filters/filters-types"
+
+export const DEFAULT_FILTER_EDITORS: FilterEditorRegistry = {
+  text: FilterTextEditor,
+  number: FilterNumberEditor,
+  range: FilterRangeEditor,
+  select: FilterSelectEditor,
+  multiselect: FilterMultiSelectEditor,
+  boolean: FilterBooleanEditor,
+}
+
+/**
+ * Picks the editor for a (field, operator) pair: the field's own `editor`, then
+ * the operator's ARITY, then the field's `type`. Arity outranks type because
+ * "between" wants two boxes whatever the field said.
+ */
+export function resolveFilterEditor<V, O>(
+  field: FilterField<V, O>,
+  operator: FilterOperator | undefined,
+  editors: FilterEditorRegistry
+): AnyFilterEditor | undefined {
+  if (typeof field.editor === "function") {
+    // The one place a consumer's typed editor meets the erased registry.
+    return field.editor as unknown as AnyFilterEditor
+  }
+  if (typeof field.editor === "string") {
+    const named = editors[field.editor]
+    if (named) return named
+  }
+
+  const arity = operator?.arity ?? "one"
+  if (arity === "none") return undefined
+  if (arity === "range") return editors.range
+  if (arity === "many") {
+    // An option-backed field gets checkboxes; anything else receives an array.
+    if (field.options || field.loadOptions) return editors.multiselect
+  }
+
+  return editors[field.type ?? "text"] ?? editors.text
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-i18n.tsx b/apps/web/src/components/reui/filters/filters-i18n.tsx
new file mode 100644
index 0000000..4398713
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-i18n.tsx
@@ -0,0 +1,151 @@
+import type {
+  FilterDraftStep,
+  FilterIssue,
+  FilterIssueReason,
+  FilterLabels,
+} from "@/components/reui/filters/filters-types"
+
+/**
+ * The shipped English copy. `stepAnnouncement` (consumer-composed create
+ * wizard) and `showRecords` (a consumer's own panel heading) are unread by the
+ * shipped chrome and kept on purpose; do not prune them as dead keys.
+ */
+export const DEFAULT_FILTER_LABELS: FilterLabels = {
+  addFilter: "Add filter",
+  advancedFilter: "Advanced filter",
+  showRecords: "In this view, show records",
+  builderEmpty: "No filters yet",
+  builderEmptyHint: "Add a filter to narrow down what you see.",
+  addCondition: "Add filter",
+  addConditionGroup: "Add group",
+  addToGroup: "Add filter to this group",
+  removeGroup: "Remove group",
+  wrapInGroup: "Wrap in group",
+  ungroup: "Ungroup",
+  moveToTopLevel: "Move to top",
+  moveToGroup: (position) => `Move to group ${position}`,
+  reorder: "Reorder",
+  reorderHint: "Press Alt with Arrow Up or Arrow Down to reorder",
+  groupAll: "All of the following are true...",
+  groupAny: "Any of the following are true...",
+  groupPlaceholder: "Drag filters here",
+  rowLabel: (condition, depth) => `${condition}, level ${depth}`,
+  groupLabel: (description, depth) => `${description} level ${depth}`,
+  groupAnnouncement: (added) => (added ? "Group added" : "Group removed"),
+  reorderAnnouncement: (label, position, total) =>
+    `${label} moved to position ${position} of ${total}`,
+  // Destination FIRST after the verb: it is the half a plain reorder cannot
+  // say and the half the user cannot see once the row has stopped moving.
+  // Position stays last, so this still ends on the "of N" a reorder ends on.
+  moveAnnouncement: (label, destination, position, total) =>
+    `${label} moved into ${destination}, position ${position} of ${total}`,
+  clearAll: "Clear all",
+  groupMenu: "Group options",
+  searchFields: "Search attributes...",
+  searchOperators: "Search operators...",
+  searchOptions: "Search...",
+  back: "Back",
+  clear: "Clear",
+  apply: "Apply",
+  discard: "Discard changes",
+  empty: "No results",
+  loading: "Loading...",
+  loadingMore: "Loading more...",
+  loadMore: "Load more",
+  error: "Could not load",
+  retry: "Retry",
+  where: "Where",
+  and: "And",
+  or: "Or",
+  combinator: "Change combinator",
+  // The word first: it is what the control SAYS and what a truncated pill
+  // stops showing. The action follows, so the name still names an action.
+  combinatorLabel: (word) => `${word}, change combinator`,
+  duplicate: "Duplicate",
+  negate: "Negate",
+  convertToAdvanced: "Advanced editor",
+  remove: "Remove",
+  chipMenu: (fieldLabel) => `${fieldLabel} filter options`,
+  filtersLabel: "Filters",
+  filterLabel: (condition) => condition,
+  readOnly: "Read only. These filters cannot be changed.",
+  pathSeparator: " > ",
+  valuePlaceholder: "enter text...",
+  selectPlaceholder: "Select...",
+  noValue: "no value",
+  selectCondition: "Select condition",
+  incomplete: "incomplete filter",
+  branchAffordance: "opens a list",
+  exclusiveHint: "cannot be combined with the other options",
+  exclusiveAnnouncement: (label, cleared) =>
+    cleared === 1
+      ? `${label} selected. 1 other selection cleared.`
+      : `${label} selected. ${cleared} other selections cleared.`,
+  itemCount: (count) => `${count} items`,
+  fieldsLabel: "Attributes",
+  resultsAnnouncement: (count) =>
+    count === 1 ? "1 result" : `${count} results`,
+  actionsLabel: "Actions",
+  stepAnnouncement: (step, label) => {
+    if (step === "field") return `Choose an attribute. ${label}`
+    if (step === "operator") return `Choose a condition for ${label}`
+    return `Enter a value for ${label}`
+  },
+  countAnnouncement: (count) =>
+    count === 1 ? "1 filter applied" : `${count} filters applied`,
+  valueCount: (count) => `${count} selected`,
+  valueDetail: (summary, values) => `${summary}: ${values.join(", ")}`,
+  valueRange: (from, to) => `${from} to ${to}`,
+  rangeFrom: (fieldLabel) => `${fieldLabel} from`,
+  rangeTo: (fieldLabel) => `${fieldLabel} to`,
+  rangeSeparator: "to",
+  negated: (operatorLabel) => `not ${operatorLabel}`,
+  issueOperator: "Choose a condition",
+  issueValue: "Enter a value",
+  issueRange: "Enter both ends of the range",
+  issueRangeOrder: "The end of the range comes before its start",
+  issueEmptyGroup: "This group has no conditions yet",
+  // "Row", not "condition": an empty GROUP is counted here too and a group is
+  // not a condition. Rule and group divs alike carry `data-slot="filter-row"`.
+  issueSummary: (count) =>
+    count === 1 ? "1 row needs attention" : `${count} rows need attention`,
+}
+
+/**
+ * Shallow merge over the defaults, like the cascader's. A deep merge would leak
+ * the default back into a replaced function-valued label for the arguments the
+ * consumer did not think about.
+ */
+export function resolveFilterLabels(
+  labels?: Partial<FilterLabels>
+): FilterLabels {
+  if (!labels) return DEFAULT_FILTER_LABELS
+  return { ...DEFAULT_FILTER_LABELS, ...labels }
+}
+
+/**
+ * The sentence for one issue. Takes the ISSUE, not just the reason: a field's
+ * `validate` supplies its own words, so `custom` has nothing to look up.
+ */
+export function filterIssueLabel(
+  issue: Pick<FilterIssue, "reason" | "message"> | FilterIssueReason,
+  labels: FilterLabels
+): string {
+  const reason = typeof issue === "string" ? issue : issue.reason
+  if (typeof issue !== "string" && issue.message) return issue.message
+  if (reason === "missing-operator") return labels.issueOperator
+  if (reason === "incomplete-range") return labels.issueRange
+  if (reason === "reversed-range") return labels.issueRangeOrder
+  if (reason === "empty-group") return labels.issueEmptyGroup
+  return labels.issueValue
+}
+
+/** The search placeholder for a step's panel. */
+export function stepPlaceholder(
+  step: FilterDraftStep,
+  labels: FilterLabels
+): string {
+  if (step === "field") return labels.searchFields
+  if (step === "operator") return labels.searchOperators
+  return labels.searchOptions
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-lib.tsx b/apps/web/src/components/reui/filters/filters-lib.tsx
new file mode 100644
index 0000000..b9c6058
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-lib.tsx
@@ -0,0 +1,539 @@
+import { collapseCascaderPath } from "@/components/reui/cascader/cascader-lib"
+import type { CascaderCollapse } from "@/components/reui/cascader/cascader-types"
+import type {
+  FilterField,
+  FilterIndex,
+  FilterOperator,
+  FilterOption,
+} from "@/components/reui/filters/filters-types"
+
+/* -------------------------------------------------------------------------- */
+/*                                    Menus                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * One menu size for the chip's kebab and the builder's three menus, which draw
+ * the same rows. `w-max` OVERRIDES the shadcn content width, which pins to the
+ * anchor and hides horizontal overflow, so a menu hung off a 28px icon button
+ * CUT every longer row. Floor 128px, down from 224px: the rows run about 130px,
+ * and five of the eight styles already floor a dropdown there (luma, maia and
+ * sera sit at 192px). The 24rem cap stops a pathological label pushing the menu
+ * off the side of a phone. Past it a row truncates rather than wraps, since a
+ * wrapped row changes HEIGHT and would slide the destructive row under the
+ * pointer: `min-w-0` lets a row shrink below its content at all (a flex child's
+ * floor is its content otherwise) and the label span carries `truncate`, see
+ * `FILTER_MENU_LABEL_CLASS`.
+ */
+export const FILTER_MENU_CLASS =
+  "w-max min-w-32 max-w-[min(24rem,calc(100vw-2rem))] [&_[data-slot=dropdown-menu-item]]:min-w-0"
+
+/**
+ * What a menu row's LABEL wears, and it has to be a real span: `text-overflow`
+ * needs a block container, not the anonymous flex item a bare text child is.
+ * `min-w-0` so the span can shrink below its own content.
+ */
+export const FILTER_MENU_LABEL_CLASS = "min-w-0 truncate"
+
+/**
+ * The FIELD PICKER's panel, shared by the Add filter popover and the advanced
+ * row's attribute cell so one schema is never drawn at two widths. `w-auto`
+ * grows to the longest row, so the 224px floor (down from 256px) only decides
+ * the reported case: a flat schema of short names in a mostly empty panel.
+ * Measured: 224px still clears the search input, the breadcrumb and a leaf
+ * row's icon-plus-label.
+ */
+export const FILTER_FIELD_PICKER_CLASS = "w-auto min-w-56 p-0"
+
+/* -------------------------------------------------------------------------- */
+/*                                    Paths                                   */
+/* -------------------------------------------------------------------------- */
+
+/** Root key for `childrenOf`; a control char cannot collide with a field id. */
+export const FILTER_ROOT_KEY = "\u0000root"
+
+/** Separator between path segments in the flat map keys. */
+const PATH_SEPARATOR = "\u0000"
+
+export function joinFilterPath(path: readonly string[]): string {
+  return path.join(PATH_SEPARATOR)
+}
+
+export function splitFilterPath(key: string): string[] {
+  return key === "" ? [] : key.split(PATH_SEPARATOR)
+}
+
+/** The joined key of a path's parent, or `FILTER_ROOT_KEY` at the top level. */
+export function parentFilterKey(path: readonly string[]): string {
+  return path.length <= 1 ? FILTER_ROOT_KEY : joinFilterPath(path.slice(0, -1))
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Signature                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * A content hash of the schema, used to skip a rebuild. Identity alone is
+ * useless: every block and example declares `fields` as an inline literal, so a
+ * memo keyed on the array misses on every parent render. Render props (`icon`,
+ * `renderValue`, a component-valued `editor`) are hashed by PRESENCE only,
+ * because inline JSX recreates them: swapping one's body keeps serving the
+ * previous field objects, so change a structural field or give `fields` a
+ * stable identity.
+ */
+export function computeFilterSchemaSignature<V, O>(
+  fields: readonly FilterField<V, O>[]
+): string {
+  const parts: string[] = []
+
+  const walk = (list: readonly FilterField<V, O>[], depth: number) => {
+    for (const field of list) {
+      parts.push(
+        depth +
+          ":" +
+          field.id +
+          "|" +
+          (field.label ?? "") +
+          "|" +
+          (field.type ?? "") +
+          "|" +
+          (field.defaultOperator ?? "") +
+          "|" +
+          (field.column ?? "") +
+          "|" +
+          (field.selectable ? "1" : "0") +
+          (field.disabled ? "1" : "0") +
+          (field.icon ? "1" : "0") +
+          (field.renderValue ? "1" : "0") +
+          (field.loadOptions ? "1" : "0") +
+          (field.resolveValues ? "1" : "0") +
+          "|" +
+          (typeof field.editor === "string"
+            ? field.editor
+            : field.editor
+              ? "fn"
+              : "") +
+          "|" +
+          (field.keywords?.join(",") ?? "") +
+          "|" +
+          (field.count ?? "") +
+          "|" +
+          // Options are part of the shape, and `exclusive` rides along: it
+          // decides what a pick DOES, so turning it on must force a rebuild.
+          (field.options
+            ? field.options
+                .map(
+                  (option) =>
+                    option.value +
+                    "~" +
+                    option.label +
+                    (option.exclusive ? "~x" : "")
+                )
+                .join(",")
+            : "") +
+          "|" +
+          (Array.isArray(field.operators)
+            ? field.operators.map((operator) => operator.value).join(",")
+            : field.operators
+              ? "fn"
+              : "")
+      )
+      if (field.fields?.length) walk(field.fields, depth + 1)
+    }
+  }
+
+  walk(fields, 0)
+  return parts.join("\n")
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Index                                   */
+/* -------------------------------------------------------------------------- */
+
+const EMPTY_INDEX: FilterIndex<never, never> = {
+  byPath: new Map(),
+  childrenOf: new Map(),
+  parentOf: new Map(),
+  all: [],
+  roots: [],
+  signature: "",
+}
+
+/**
+ * Normalizes a field schema into flat maps. When `previous`'s signature
+ * matches, the PREVIOUS OBJECT is returned: an equal-but-new one would leave
+ * every downstream memo missing exactly as often as before. Duplicate sibling
+ * ids are ignored after the first, as the cascader does for node values, and
+ * `findFilterSchemaIssues` reports them in development.
+ */
+export function buildFilterIndex<V = unknown, O = unknown>(
+  fields: readonly FilterField<V, O>[],
+  previous?: FilterIndex<V, O> | null,
+  /** A signature the caller already computed, to avoid walking twice. */
+  precomputedSignature?: string
+): FilterIndex<V, O> {
+  const signature = precomputedSignature ?? computeFilterSchemaSignature(fields)
+  if (previous && previous.signature === signature) return previous
+  if (fields.length === 0) {
+    return { ...(EMPTY_INDEX as unknown as FilterIndex<V, O>), signature }
+  }
+
+  const byPath = new Map<string, FilterField<V, O>>()
+  const childrenOf = new Map<string, FilterField<V, O>[]>()
+  const parentOf = new Map<string, string>()
+  const all: { field: FilterField<V, O>; path: string[] }[] = []
+  const roots: FilterField<V, O>[] = []
+
+  const walk = (
+    list: readonly FilterField<V, O>[],
+    parentPath: string[],
+    parentKey: string
+  ) => {
+    const accepted: FilterField<V, O>[] = []
+    const seen = new Set<string>()
+
+    for (const field of list) {
+      if (seen.has(field.id)) continue
+      seen.add(field.id)
+
+      const path = [...parentPath, field.id]
+      const key = joinFilterPath(path)
+      if (byPath.has(key)) continue
+
+      byPath.set(key, field)
+      parentOf.set(key, parentKey === FILTER_ROOT_KEY ? "" : parentKey)
+      all.push({ field, path })
+      accepted.push(field)
+
+      if (field.fields?.length) walk(field.fields, path, key)
+    }
+
+    childrenOf.set(parentKey, accepted)
+    if (parentKey === FILTER_ROOT_KEY) roots.push(...accepted)
+  }
+
+  walk(fields, [], FILTER_ROOT_KEY)
+
+  return { byPath, childrenOf, parentOf, all, roots, signature }
+}
+
+export function getFilterField<V, O>(
+  index: FilterIndex<V, O>,
+  path: readonly string[]
+): FilterField<V, O> | undefined {
+  return index.byPath.get(joinFilterPath(path))
+}
+
+/** The ancestor chain for a path, root first and the field itself last. */
+export function getFilterFieldChain<V, O>(
+  index: FilterIndex<V, O>,
+  path: readonly string[]
+): FilterField<V, O>[] {
+  const chain: FilterField<V, O>[] = []
+  for (let i = 1; i <= path.length; i++) {
+    const field = index.byPath.get(joinFilterPath(path.slice(0, i)))
+    if (!field) break
+    chain.push(field)
+  }
+  return chain
+}
+
+/** Child fields of a path. Pass an empty path for the root level. */
+export function getFilterChildren<V, O>(
+  index: FilterIndex<V, O>,
+  path: readonly string[]
+): FilterField<V, O>[] {
+  const key = path.length === 0 ? FILTER_ROOT_KEY : joinFilterPath(path)
+  return index.childrenOf.get(key) ?? []
+}
+
+export function isFilterBranch<V, O>(field: FilterField<V, O>): boolean {
+  return Boolean(field.fields?.length)
+}
+
+/**
+ * Whether a field DECLARES itself filterable on: leaves always, a branch only
+ * with `selectable`. The shipped pickers ignore it, see `isFilterFieldPickable`.
+ */
+export function isFilterFieldSelectable<V, O>(
+  field: FilterField<V, O>
+): boolean {
+  if (field.disabled) return false
+  return isFilterBranch(field) ? Boolean(field.selectable) : true
+}
+
+/**
+ * Whether the SHIPPED pickers may commit a field: leaves only. A row that both
+ * drills in and commits cannot disambiguate a click - its chevron and child
+ * count promise "opens a list", so the press that opened it also filtered on
+ * the parent and dismissed the picker. `selectable` stays honoured by
+ * `isFilterFieldSelectable` for a chrome that separates the two.
+ */
+export function isFilterFieldPickable<V, O>(field: FilterField<V, O>): boolean {
+  if (field.disabled) return false
+  return !isFilterBranch(field)
+}
+
+/** Trailing count for a branch row. */
+export function getFilterFieldCount<V, O>(field: FilterField<V, O>): number {
+  return field.count ?? field.fields?.length ?? 0
+}
+
+/** Renders a path as "Name > First" using the caller's separator. */
+export function formatFilterPath<V, O>(
+  index: FilterIndex<V, O>,
+  path: readonly string[],
+  separator: string
+): string {
+  const chain = getFilterFieldChain(index, path)
+  if (chain.length === 0) return path.join(separator)
+  return chain.map((field) => field.label).join(separator)
+}
+
+/** How a path is shortened; the cascader's own union, so the two cannot drift. */
+export type FilterPathCollapse = CascaderCollapse
+
+export type FilterPathSegment<V = unknown, O = unknown> =
+  | { type: "field"; field: FilterField<V, O> }
+  /** The run that was elided, kept so a host can surface it. */
+  | { type: "ellipsis"; hidden: FilterField<V, O>[] }
+
+/**
+ * Shortens an ancestor chain to at most `maxSegments` names, on the cascader's
+ * arithmetic so the chip's path and the builder's attribute cell cannot round
+ * differently. The adapter is POSITIONAL because a `FilterField`'s `id` is
+ * unique only among its siblings, so the index is the only key that survives a
+ * collapser keyed on `value`. Default `"none"`: no upgrade shortens a path.
+ */
+export function collapseFilterPath<V, O>(
+  chain: readonly FilterField<V, O>[],
+  options: { maxSegments?: number; collapse?: FilterPathCollapse } = {}
+): FilterPathSegment<V, O>[] {
+  const segments = collapseCascaderPath(
+    chain.map((field, index) => ({ value: String(index), label: field.label })),
+    { maxSegments: options.maxSegments, collapse: options.collapse ?? "none" }
+  )
+  return segments.map((segment) =>
+    segment.type === "node"
+      ? { type: "field" as const, field: chain[Number(segment.node.value)] }
+      : {
+          type: "ellipsis" as const,
+          hidden: segment.hidden.map((node) => chain[Number(node.value)]),
+        }
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 Combinator                                 */
+/* -------------------------------------------------------------------------- */
+
+export type FilterCombinatorSlot = "where" | "toggle" | "echo"
+
+/**
+ * Which of the three forms the combinator slot before rule `index` takes. A
+ * group has exactly ONE combinator, so only one slot may be interactive: three
+ * editable "and"s down a column would imply three independent choices.
+ */
+export function filterCombinatorSlot(index: number): FilterCombinatorSlot {
+  if (index === 0) return "where"
+  return index === 1 ? "toggle" : "echo"
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Matching                                 */
+/* -------------------------------------------------------------------------- */
+
+/** `toLocaleLowerCase`, so Turkish dotted and dotless i fold as a reader expects. */
+export function foldFilterText(text: string): string {
+  return text.toLocaleLowerCase()
+}
+
+export function normalizeFilterQuery(query: string): string {
+  return foldFilterText(query.trim())
+}
+
+/** Whether a field matches a normalized query, by label or keywords. */
+export function matchesFilterQuery<V, O>(
+  field: FilterField<V, O>,
+  normalizedQuery: string
+): boolean {
+  if (normalizedQuery === "") return true
+  if (foldFilterText(field.label).includes(normalizedQuery)) return true
+  if (field.keywords) {
+    for (const keyword of field.keywords) {
+      if (foldFilterText(keyword).includes(normalizedQuery)) return true
+    }
+  }
+  return false
+}
+
+/**
+ * Filters one level, preserving input order. Unused here like
+ * `searchFilterDeep`: kept so a consumer's own picker need not re-implement the
+ * fold and the keyword matching.
+ */
+export function filterFilterLevel<V, O>(
+  fields: readonly FilterField<V, O>[],
+  normalizedQuery: string
+): FilterField<V, O>[] {
+  if (normalizedQuery === "") return fields as FilterField<V, O>[]
+  return fields.filter((field) => matchesFilterQuery(field, normalizedQuery))
+}
+
+/**
+ * Searches every SELECTABLE field at any depth, because a result the user
+ * cannot pick is a dead end. Unused here - the shipped picker is the cascader
+ * and delegates deep search to it - but it keeps a consumer's own picker from
+ * re-implementing the fold, the keyword matching and the selectable rule.
+ */
+export function searchFilterDeep<V, O>(
+  index: FilterIndex<V, O>,
+  normalizedQuery: string,
+  limit = 200
+): { field: FilterField<V, O>; path: string[] }[] {
+  if (normalizedQuery === "") return []
+  const results: { field: FilterField<V, O>; path: string[] }[] = []
+  for (const entry of index.all) {
+    if (results.length >= limit) break
+    if (!isFilterFieldSelectable(entry.field)) continue
+    if (matchesFilterQuery(entry.field, normalizedQuery)) results.push(entry)
+  }
+  return results
+}
+
+/** Filters an option list by a normalized query, by label or keywords. */
+export function filterFilterOptions<O>(
+  options: readonly FilterOption<O>[],
+  normalizedQuery: string
+): FilterOption<O>[] {
+  if (normalizedQuery === "") return options as FilterOption<O>[]
+  return options.filter((option) => {
+    if (foldFilterText(option.label).includes(normalizedQuery)) return true
+    if (option.keywords) {
+      for (const keyword of option.keywords) {
+        if (foldFilterText(keyword).includes(normalizedQuery)) return true
+      }
+    }
+    return false
+  })
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Exclusive options                             */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The None rule, as pure algebra over two selections: pick the `exclusive`
+ * option and it is the only pick, pick anything else and it goes. Written
+ * against the DELTA, not the result, which is what makes it total: an empty
+ * delta is a removal, including UNTICKING the exclusive row; an exclusive
+ * arrival is the whole answer; an ordinary arrival drops every exclusive value,
+ * restored ones included; both at once gives it to the LAST exclusive.
+ * `isExclusive` is a lookup, not an array, because a query hiding the None row
+ * while it stays SELECTED would answer "not exclusive" for the value the click
+ * must clear. Never applied on read - a saved view is the consumer's data - so
+ * it heals on the first ordinary pick, and only while `isExclusive` can ANSWER:
+ * a None row on a `loadOptions` field belongs in the static `options`.
+ */
+export function applyFilterExclusiveSelection(
+  next: readonly string[],
+  previous: readonly string[],
+  isExclusive: (value: string) => boolean
+): string[] {
+  const held = new Set(previous)
+  const added = next.filter((value) => !held.has(value))
+  if (added.length === 0) return next as string[]
+
+  let arrived: string | null = null
+  for (const value of added) {
+    if (isExclusive(value)) arrived = value
+  }
+  if (arrived !== null) return [arrived]
+
+  const kept = next.filter((value) => !isExclusive(value))
+  // The same array when nothing was exclusive, which is nearly every call: a
+  // fresh one would commit a new value on every toggle of an ordinary row.
+  return kept.length === next.length ? (next as string[]) : kept
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                     Ids                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Builds a deterministic id generator. `Date.now()` and `Math.random()`, as the
+ * old `createFilter` used, give the server and the client different ids for the
+ * same query, so any page shipping default filters hydrated mismatched.
+ */
+export function createFilterIdFactory(seed: string): () => string {
+  let counter = 0
+  return () => {
+    counter += 1
+    return `${seed}${counter}`
+  }
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Development checks                            */
+/* -------------------------------------------------------------------------- */
+
+const warned = new Set<string>()
+
+/** Warns once per key. Never throws, and is a no-op in production. */
+export function warnFilterOnce(key: string, message: string): void {
+  if (process.env.NODE_ENV === "production") return
+  if (warned.has(key)) return
+  warned.add(key)
+  console.warn(`[filters] ${message}`)
+}
+
+/** Clears the warn-once memory. For tests. */
+export function resetFilterWarnings(): void {
+  warned.clear()
+}
+
+export interface FilterSchemaIssues {
+  /** Ids that are empty, or that collide with a sibling. */
+  duplicatePaths: string[]
+  emptyIds: string[]
+  /** Branches that declare `selectable` but hold no children. */
+  emptyBranches: string[]
+  /** Fields whose `defaultOperator` is not in their operator list. */
+  unknownDefaultOperators: string[]
+}
+
+/** Reported, never thrown: a bad schema must degrade, not blank the page. */
+export function findFilterSchemaIssues<V, O>(
+  fields: readonly FilterField<V, O>[],
+  resolveOperators: (field: FilterField<V, O>) => FilterOperator[]
+): FilterSchemaIssues {
+  const duplicatePaths: string[] = []
+  const emptyIds: string[] = []
+  const emptyBranches: string[] = []
+  const unknownDefaultOperators: string[] = []
+
+  const walk = (list: readonly FilterField<V, O>[], parentPath: string[]) => {
+    const seen = new Set<string>()
+    for (const field of list) {
+      const label = [...parentPath, field.id].join(".")
+      if (!field.id) emptyIds.push(label)
+      else if (seen.has(field.id)) duplicatePaths.push(label)
+      seen.add(field.id)
+
+      if (field.selectable && field.fields && field.fields.length === 0) {
+        emptyBranches.push(label)
+      }
+
+      if (field.defaultOperator) {
+        const operators = resolveOperators(field)
+        if (!operators.some((op) => op.value === field.defaultOperator)) {
+          unknownDefaultOperators.push(`${label} -> ${field.defaultOperator}`)
+        }
+      }
+
+      if (field.fields?.length) walk(field.fields, [...parentPath, field.id])
+    }
+  }
+
+  walk(fields, [])
+  return { duplicatePaths, emptyIds, emptyBranches, unknownDefaultOperators }
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-operators.tsx b/apps/web/src/components/reui/filters/filters-operators.tsx
new file mode 100644
index 0000000..1c4ba1c
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-operators.tsx
@@ -0,0 +1,227 @@
+import type {
+  FilterField,
+  FilterOperator,
+  FilterValueType,
+} from "@/components/reui/filters/filters-types"
+
+/**
+ * Every operator label, keyed by value. Split from `FilterLabels`: operator
+ * wording is reworded per domain, chrome copy is translated once per app.
+ */
+export type FilterOperatorLabels = Record<string, string>
+
+export const DEFAULT_FILTER_OPERATOR_LABELS: FilterOperatorLabels = {
+  contains: "contains",
+  not_contains: "does not contain",
+  starts_with: "starts with",
+  ends_with: "ends with",
+  is: "is",
+  is_not: "is not",
+  is_any_of: "is any of",
+  is_none_of: "is none of",
+  has_any_of: "has any of",
+  has_all_of: "has all of",
+  has_none_of: "has none of",
+  eq: "equals",
+  neq: "does not equal",
+  gt: "is greater than",
+  gte: "is greater than or equal to",
+  lt: "is less than",
+  lte: "is less than or equal to",
+  between: "is between",
+  not_between: "is not between",
+  is_before: "is before",
+  is_after: "is after",
+  is_on_or_before: "is on or before",
+  is_on_or_after: "is on or after",
+  empty: "is empty",
+  not_empty: "is not empty",
+}
+
+/**
+ * Operator catalog per value type: value, arity, inverse, labels resolved at
+ * build time so translating one operator never restates the catalog. `arity`
+ * of "none" drops the chip's value segment and the wizard's value step, in a
+ * consumer's own `operators` array as much as in this catalog.
+ */
+const CATALOG: Record<
+  FilterValueType,
+  { value: string; arity?: FilterOperator["arity"]; inverse?: string }[]
+> = {
+  text: [
+    { value: "contains", inverse: "not_contains" },
+    { value: "not_contains", inverse: "contains" },
+    { value: "starts_with" },
+    { value: "ends_with" },
+    { value: "is", inverse: "is_not" },
+    { value: "is_not", inverse: "is" },
+    { value: "empty", arity: "none", inverse: "not_empty" },
+    { value: "not_empty", arity: "none", inverse: "empty" },
+  ],
+  number: [
+    { value: "eq", inverse: "neq" },
+    { value: "neq", inverse: "eq" },
+    { value: "gt", inverse: "lte" },
+    { value: "gte", inverse: "lt" },
+    { value: "lt", inverse: "gte" },
+    { value: "lte", inverse: "gt" },
+    { value: "between", arity: "range", inverse: "not_between" },
+    { value: "not_between", arity: "range", inverse: "between" },
+    { value: "empty", arity: "none", inverse: "not_empty" },
+    { value: "not_empty", arity: "none", inverse: "empty" },
+  ],
+  range: [
+    { value: "between", arity: "range", inverse: "not_between" },
+    { value: "not_between", arity: "range", inverse: "between" },
+    { value: "empty", arity: "none", inverse: "not_empty" },
+    { value: "not_empty", arity: "none", inverse: "empty" },
+  ],
+  select: [
+    { value: "is", inverse: "is_not" },
+    { value: "is_not", inverse: "is" },
+    { value: "is_any_of", arity: "many", inverse: "is_none_of" },
+    { value: "is_none_of", arity: "many", inverse: "is_any_of" },
+    { value: "empty", arity: "none", inverse: "not_empty" },
+    { value: "not_empty", arity: "none", inverse: "empty" },
+  ],
+  multiselect: [
+    { value: "has_any_of", arity: "many", inverse: "has_none_of" },
+    { value: "has_all_of", arity: "many" },
+    { value: "has_none_of", arity: "many", inverse: "has_any_of" },
+    { value: "empty", arity: "none", inverse: "not_empty" },
+    { value: "not_empty", arity: "none", inverse: "empty" },
+  ],
+  boolean: [
+    { value: "is", inverse: "is_not" },
+    { value: "is_not", inverse: "is" },
+    { value: "empty", arity: "none", inverse: "not_empty" },
+    { value: "not_empty", arity: "none", inverse: "empty" },
+  ],
+}
+
+export const DEFAULT_FILTER_VALUE_TYPE: FilterValueType = "text"
+
+/**
+ * Builds the operator catalog for one set of labels. Callers memoize on the
+ * label object: the old primitive built its equivalent inside
+ * `getOperatorsForField`, keyed on a `values` array that was fresh after every
+ * filter update, so every miss reallocated four arrays of 27 objects each.
+ */
+export function createFilterOperators(
+  labels: FilterOperatorLabels
+): Record<FilterValueType, FilterOperator[]> {
+  const built = {} as Record<FilterValueType, FilterOperator[]>
+  for (const type of Object.keys(CATALOG) as FilterValueType[]) {
+    built[type] = CATALOG[type].map((entry) => ({
+      value: entry.value,
+      label: labels[entry.value] ?? entry.value,
+      arity: entry.arity ?? "one",
+      inverse: entry.inverse,
+    }))
+  }
+  return built
+}
+
+export const DEFAULT_FILTER_OPERATORS: Record<
+  FilterValueType,
+  FilterOperator[]
+> = createFilterOperators(DEFAULT_FILTER_OPERATOR_LABELS)
+
+/**
+ * The operators for a field: its own `operators` wins, array or function,
+ * otherwise the catalog entry for its `type`. No implicit select to multiselect
+ * promotion by selection count: that changed the list as the user picked.
+ */
+export function resolveFilterOperators<V, O>(
+  field: FilterField<V, O>,
+  catalog: Record<FilterValueType, FilterOperator[]> = DEFAULT_FILTER_OPERATORS
+): FilterOperator[] {
+  if (typeof field.operators === "function") return field.operators(field)
+  if (field.operators) return field.operators
+  return catalog[field.type ?? DEFAULT_FILTER_VALUE_TYPE] ?? catalog.text
+}
+
+export function visibleFilterOperators(
+  operators: readonly FilterOperator[]
+): FilterOperator[] {
+  return operators.filter((operator) => !operator.hidden)
+}
+
+export function getFilterOperator(
+  operators: readonly FilterOperator[],
+  value: string | null | undefined
+): FilterOperator | undefined {
+  if (!value) return undefined
+  return operators.find((operator) => operator.value === value)
+}
+
+export function getFilterArity(
+  operator: FilterOperator | undefined
+): FilterOperator["arity"] {
+  return operator?.arity ?? "one"
+}
+
+export function operatorTakesValue(
+  operator: FilterOperator | undefined
+): boolean {
+  return getFilterArity(operator) !== "none"
+}
+
+/**
+ * The operator a field starts with: `defaultOperator` when it names one the
+ * field offers, otherwise the first visible operator. Falling back rather than
+ * trusting the schema keeps the rule out of a state its own list cannot show.
+ */
+export function getDefaultFilterOperator<V, O>(
+  field: FilterField<V, O>,
+  operators: readonly FilterOperator[]
+): string | null {
+  if (field.defaultOperator) {
+    const named = getFilterOperator(operators, field.defaultOperator)
+    if (named) return named.value
+  }
+  const visible = visibleFilterOperators(operators)
+  return visible[0]?.value ?? operators[0]?.value ?? null
+}
+
+/**
+ * Negating a rule: swap to the declared `inverse` so the chip reads "does not
+ * contain", else toggle `negated` so Negate still works without an inverse.
+ */
+export function negateFilterOperator(
+  operator: FilterOperator | undefined,
+  operators: readonly FilterOperator[],
+  negated: boolean | undefined
+): { operator: string | null; negated: boolean } {
+  if (operator?.inverse) {
+    const inverse = getFilterOperator(operators, operator.inverse)
+    if (inverse) return { operator: inverse.value, negated: Boolean(negated) }
+  }
+  return { operator: operator?.value ?? null, negated: !negated }
+}
+
+/**
+ * Reshapes a value when arity changes: widening "is" to "is any of" keeps what
+ * the user picked, narrowing keeps the first of them, `"none"` always drops it.
+ */
+export function coerceFilterValue(
+  value: unknown,
+  from: FilterOperator | undefined,
+  to: FilterOperator | undefined
+): unknown {
+  const nextArity = getFilterArity(to)
+  if (nextArity === "none") return undefined
+  if (value === undefined || value === null) return value
+
+  const previousArity = getFilterArity(from)
+  if (previousArity === nextArity) return value
+
+  const asArray = Array.isArray(value) ? value : [value]
+
+  if (nextArity === "many") return asArray
+  if (nextArity === "one") return asArray[0]
+  if (nextArity === "range") {
+    return [asArray[0], asArray[1]] as [unknown, unknown]
+  }
+  return value
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-query.tsx b/apps/web/src/components/reui/filters/filters-query.tsx
new file mode 100644
index 0000000..3cd8e4a
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-query.tsx
@@ -0,0 +1,701 @@
+import type {
+  FilterCombinator,
+  FilterGroupNode,
+  FilterIssue,
+  FilterNode,
+  FilterOperator,
+  FilterQuery,
+  FilterRule,
+} from "@/components/reui/filters/filters-types"
+
+export function isFilterRule<V>(node: FilterNode<V>): node is FilterRule<V> {
+  return node.type === "rule"
+}
+
+export function isFilterGroup<V>(
+  node: FilterNode<V>
+): node is FilterGroupNode<V> {
+  return node.type === "group"
+}
+
+/**
+ * A rule. `id` is passed in, never generated here: a non-deterministic value in
+ * a pure function broke hydration. Callers use `createFilterIdFactory`.
+ */
+export function createFilterRule<V = unknown>(input: {
+  id: string
+  path: string[]
+  operator: string
+  value?: V
+  negated?: boolean
+}): FilterRule<V> {
+  const rule: FilterRule<V> = {
+    id: input.id,
+    type: "rule",
+    path: input.path,
+    operator: input.operator,
+    value: input.value,
+  }
+  if (input.negated) rule.negated = true
+  return rule
+}
+
+export function createFilterGroup<V = unknown>(input: {
+  id: string
+  combinator?: FilterCombinator
+  rules?: FilterNode<V>[]
+}): FilterGroupNode<V> {
+  return {
+    id: input.id,
+    type: "group",
+    combinator: input.combinator ?? "and",
+    rules: input.rules ?? [],
+  }
+}
+
+/** An empty query. The root is always a group, never a bare array. */
+export function createFilterQuery<V = unknown>(
+  rules: FilterNode<V>[] = [],
+  combinator: FilterCombinator = "and",
+  id = "root"
+): FilterQuery<V> {
+  return { id, type: "group", combinator, rules }
+}
+
+/** Every rule in the tree, depth first. Groups are flattened away. */
+export function flattenFilterRules<V>(query: FilterQuery<V>): FilterRule<V>[] {
+  const out: FilterRule<V>[] = []
+  const walk = (node: FilterNode<V>) => {
+    if (isFilterRule(node)) {
+      out.push(node)
+      return
+    }
+    for (const child of node.rules) walk(child)
+  }
+  walk(query)
+  return out
+}
+
+/**
+ * One rule, flattened for a predicate. `values` is always an array even though
+ * `FilterRule.value` is singular, so no caller re-derives arity.
+ */
+export interface FilterCondition {
+  /** Full field path, `["name", "first"]`. */
+  path: string[]
+  /** First path segment, for the common flat-schema case. */
+  field: string
+  operator: string
+  /** `[]` for an operator that takes no value. */
+  values: unknown[]
+  negated: boolean
+}
+
+/**
+ * Whether a rule says anything yet. A rule exists as soon as an attribute is
+ * picked, so `operator: ""` is a real state: `flattenFilterConditions` leaves
+ * it out, `countFilterRules` still counts it, and `collectFilterIssues` reports
+ * it as `missing-operator`.
+ */
+export function isFilterRuleComplete<V>(rule: FilterRule<V>): boolean {
+  return rule.operator !== ""
+}
+
+/**
+ * Flattens a query to conditions. Lossy: safe only when the query is flat or
+ * every group shares the root's combinator. Read `query.combinator` and walk
+ * the tree yourself for anything else. Incomplete rules are left out.
+ */
+export function flattenFilterConditions<V>(
+  query: FilterQuery<V>
+): FilterCondition[] {
+  return flattenFilterRules(query)
+    .filter(isFilterRuleComplete)
+    .map((rule) => ({
+      path: rule.path,
+      field: rule.path[0],
+      operator: rule.operator,
+      values:
+        rule.value === undefined || rule.value === null
+          ? []
+          : Array.isArray(rule.value)
+            ? (rule.value as unknown[])
+            : [rule.value],
+      negated: Boolean(rule.negated),
+    }))
+}
+
+/** How many rules the query holds, at any depth. */
+export function countFilterRules<V>(query: FilterQuery<V>): number {
+  let count = 0
+  const walk = (node: FilterNode<V>) => {
+    if (isFilterRule(node)) {
+      count += 1
+      return
+    }
+    for (const child of node.rules) walk(child)
+  }
+  walk(query)
+  return count
+}
+
+/** Whether the query would match everything. */
+export function isFilterQueryEmpty<V>(query: FilterQuery<V>): boolean {
+  return countFilterRules(query) === 0
+}
+
+/**
+ * How an arity is answered for one rule. The caller resolves it, since arity
+ * lives on the FIELD's operator list. `null` is a rule it cannot judge.
+ */
+export type FilterArityResolver<V> = (
+  rule: FilterRule<V>
+) => FilterOperator["arity"] | null
+
+/** Runs a field's own `validate`. A resolver like `arityOf`: no schema here. */
+export type FilterValidateResolver<V> = (
+  rule: FilterRule<V>
+) => string | null | undefined | false
+
+/** A value slot the user has not filled in. `false` and `0` are values. */
+function isBlankFilterValue(value: unknown): boolean {
+  return value === undefined || value === null || value === ""
+}
+
+/**
+ * Compares two range bounds, or gives up. Numbers, dates and ISO strings only:
+ * inventing an order for a range of colour names would flag a correct filter as
+ * reversed. `Date.parse` must parse BOTH strings before they are compared.
+ */
+function compareFilterBounds(from: unknown, to: unknown): number | null {
+  if (typeof from === "number" && typeof to === "number") {
+    return Number.isNaN(from) || Number.isNaN(to) ? null : from - to
+  }
+  if (from instanceof Date && to instanceof Date) {
+    const a = from.getTime()
+    const b = to.getTime()
+    return Number.isNaN(a) || Number.isNaN(b) ? null : a - b
+  }
+  if (typeof from === "string" && typeof to === "string") {
+    const a = Date.parse(from)
+    const b = Date.parse(to)
+    return Number.isNaN(a) || Number.isNaN(b) ? null : a - b
+  }
+  return null
+}
+
+/**
+ * Every reason a query cannot be run as written, in document order: the five
+ * ways this builder can hold a condition that SILENTLY does the wrong thing.
+ * `missing-operator` and `empty-group` carry no predicate and are dropped by
+ * `flattenFilterConditions`; `missing-value` reaches the consumer with a
+ * `values` array that is empty or all blank, which most backends read as
+ * "match nothing"; `incomplete-range` is the same for a range and often
+ * arrives with one bound FILLED, so an emptiness check will not catch it;
+ * `reversed-range` is legal and matches nothing anywhere. A group of exactly
+ * ONE node is NOT an issue (it is what "Convert to group" produces), and the
+ * root is exempt from `empty-group`.
+ */
+export function collectFilterIssues<V>(
+  query: FilterQuery<V>,
+  arityOf: FilterArityResolver<V>,
+  validateOf?: FilterValidateResolver<V>
+): FilterIssue[] {
+  const issues: FilterIssue[] = []
+
+  const visit = (group: FilterGroupNode<V>, isRoot: boolean) => {
+    if (!isRoot && group.rules.length === 0) {
+      issues.push({
+        nodeId: group.id,
+        column: "group",
+        reason: "empty-group",
+      })
+    }
+
+    for (const child of group.rules) {
+      if (isFilterGroup(child)) {
+        visit(child, false)
+        continue
+      }
+      // Asked FIRST: `null` means the caller cannot judge this rule at all, so
+      // even `missing-operator` would point at a control that is not on screen.
+      const arity = arityOf(child)
+      if (arity === null) continue
+
+      if (!isFilterRuleComplete(child)) {
+        issues.push({
+          nodeId: child.id,
+          column: "operator",
+          reason: "missing-operator",
+        })
+        continue
+      }
+
+      if (arity === "none") continue
+
+      const values =
+        child.value === undefined || child.value === null
+          ? []
+          : Array.isArray(child.value)
+            ? (child.value as unknown[])
+            : [child.value]
+
+      if (arity === "range") {
+        if (
+          values.length < 2 ||
+          isBlankFilterValue(values[0]) ||
+          isBlankFilterValue(values[1])
+        ) {
+          issues.push({
+            nodeId: child.id,
+            column: "value",
+            reason: "incomplete-range",
+          })
+          continue
+        }
+        const order = compareFilterBounds(values[0], values[1])
+        if (order !== null && order > 0) {
+          issues.push({
+            nodeId: child.id,
+            column: "value",
+            reason: "reversed-range",
+          })
+        }
+        continue
+      }
+
+      // `many` and `one` collapse here: both are unsatisfied by an empty list,
+      // and `one` normalises to a single-element list above.
+      if (values.length === 0 || values.every(isBlankFilterValue)) {
+        issues.push({
+          nodeId: child.id,
+          column: "value",
+          reason: "missing-value",
+        })
+        continue
+      }
+
+      // LAST, and only on a rule the primitive is already happy with: stacking
+      // a second message on one cell breaks the one-issue-per-node shape.
+      const message = validateOf?.(child)
+      if (message) {
+        issues.push({
+          nodeId: child.id,
+          column: "value",
+          reason: "custom",
+          message,
+        })
+      }
+    }
+  }
+
+  visit(query, true)
+  return issues
+}
+
+/** Locates a node and its parent. Returns null when the id is unknown. */
+export function findFilterNode<V>(
+  query: FilterQuery<V>,
+  id: string
+): {
+  node: FilterNode<V>
+  parent: FilterGroupNode<V> | null
+  index: number
+} | null {
+  if (query.id === id) return { node: query, parent: null, index: -1 }
+
+  const walk = (
+    group: FilterGroupNode<V>
+  ): {
+    node: FilterNode<V>
+    parent: FilterGroupNode<V>
+    index: number
+  } | null => {
+    for (let i = 0; i < group.rules.length; i++) {
+      const child = group.rules[i]
+      if (child.id === id) return { node: child, parent: group, index: i }
+      if (isFilterGroup(child)) {
+        const found = walk(child)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  return walk(query)
+}
+
+/** The rule with this id, or null when the id names a group or is unknown. */
+export function findFilterRule<V>(
+  query: FilterQuery<V>,
+  id: string
+): FilterRule<V> | null {
+  const found = findFilterNode(query, id)
+  if (!found || !isFilterRule(found.node)) return null
+  return found.node
+}
+
+/**
+ * Rebuilds the tree, applying `transform` to the group holding `id`. An
+ * unchanged subtree comes back BY IDENTITY, so `React.memo` holds for all but
+ * the moved chip. Tests assert it with `toBe`. `removeFilterNode` and
+ * `detachFilterNode` drop children rather than replace a group, so they
+ * hand-roll the same identity-preserving walk.
+ */
+function rewriteGroup<V>(
+  group: FilterGroupNode<V>,
+  shouldRewrite: (group: FilterGroupNode<V>) => boolean,
+  transform: (group: FilterGroupNode<V>) => FilterGroupNode<V>
+): FilterGroupNode<V> {
+  if (shouldRewrite(group)) return transform(group)
+
+  let changed = false
+  const rules = group.rules.map((child) => {
+    if (!isFilterGroup(child)) return child
+    const next = rewriteGroup(child, shouldRewrite, transform)
+    if (next !== child) changed = true
+    return next
+  })
+
+  return changed ? { ...group, rules } : group
+}
+
+/** Replaces a rule's fields. Unknown ids return the query unchanged. */
+export function updateFilterRule<V>(
+  query: FilterQuery<V>,
+  id: string,
+  updates: Partial<Omit<FilterRule<V>, "id" | "type">>
+): FilterQuery<V> {
+  return rewriteGroup(
+    query,
+    (group) =>
+      group.rules.some((child) => child.id === id && isFilterRule(child)),
+    (group) => ({
+      ...group,
+      rules: group.rules.map((child) =>
+        child.id === id && isFilterRule(child)
+          ? { ...child, ...updates }
+          : child
+      ),
+    })
+  ) as FilterQuery<V>
+}
+
+/**
+ * Removes a node, plus any group it empties, all the way up (not the root): an
+ * empty group is invisible in the flat UI yet still compiles to parentheses.
+ */
+export function removeFilterNode<V>(
+  query: FilterQuery<V>,
+  id: string
+): FilterQuery<V> {
+  const prune = (group: FilterGroupNode<V>): FilterGroupNode<V> => {
+    let changed = false
+    const rules: FilterNode<V>[] = []
+
+    for (const child of group.rules) {
+      if (child.id === id) {
+        changed = true
+        continue
+      }
+      if (isFilterGroup(child)) {
+        const next = prune(child)
+        if (next !== child) changed = true
+        if (next.rules.length === 0) continue
+        rules.push(next)
+        continue
+      }
+      rules.push(child)
+    }
+
+    return changed ? { ...group, rules } : group
+  }
+
+  return prune(query) as FilterQuery<V>
+}
+
+/** Appends a node to a group, defaulting to the root. */
+export function insertFilterNode<V>(
+  query: FilterQuery<V>,
+  node: FilterNode<V>,
+  parentId?: string,
+  index?: number
+): FilterQuery<V> {
+  const targetId = parentId ?? query.id
+  return rewriteGroup(
+    query,
+    (group) => group.id === targetId,
+    (group) => {
+      const rules = [...group.rules]
+      const at =
+        index === undefined
+          ? rules.length
+          : Math.max(0, Math.min(index, rules.length))
+      rules.splice(at, 0, node)
+      return { ...group, rules }
+    }
+  ) as FilterQuery<V>
+}
+
+/**
+ * A deep copy under fresh ids, the whole way down: children keeping their old
+ * ids would give two live nodes one id, and every lookup here is by id.
+ */
+function cloneFilterNode<V>(
+  node: FilterNode<V>,
+  nextId: () => string
+): FilterNode<V> {
+  return isFilterRule(node)
+    ? { ...node, id: nextId() }
+    : {
+        ...node,
+        id: nextId(),
+        rules: node.rules.map((child) => cloneFilterNode(child, nextId)),
+      }
+}
+
+/** Copies a node in beside the original. */
+export function duplicateFilterNode<V>(
+  query: FilterQuery<V>,
+  id: string,
+  nextId: () => string
+): FilterQuery<V> {
+  const found = findFilterNode(query, id)
+  if (!found || !found.parent) return query
+
+  return insertFilterNode(
+    query,
+    cloneFilterNode(found.node, nextId),
+    found.parent.id,
+    found.index + 1
+  )
+}
+
+export function setFilterCombinator<V>(
+  query: FilterQuery<V>,
+  groupId: string,
+  combinator: FilterCombinator
+): FilterQuery<V> {
+  return rewriteGroup(
+    query,
+    (group) => group.id === groupId,
+    (group) =>
+      group.combinator === combinator ? group : { ...group, combinator }
+  ) as FilterQuery<V>
+}
+
+export function toggleFilterCombinator<V>(
+  query: FilterQuery<V>,
+  groupId: string
+): FilterQuery<V> {
+  const found = findFilterNode(query, groupId)
+  if (!found || !isFilterGroup(found.node)) return query
+  return setFilterCombinator(
+    query,
+    groupId,
+    found.node.combinator === "and" ? "or" : "and"
+  )
+}
+
+/** Moves a node within its own group. Out of range moves are no-ops. */
+export function moveFilterNode<V>(
+  query: FilterQuery<V>,
+  id: string,
+  delta: number
+): FilterQuery<V> {
+  const found = findFilterNode(query, id)
+  if (!found || !found.parent) return query
+
+  const from = found.index
+  const to = from + delta
+  if (to < 0 || to >= found.parent.rules.length || delta === 0) return query
+
+  return rewriteGroup(
+    query,
+    (group) => group.id === found.parent!.id,
+    (group) => {
+      const rules = [...group.rules]
+      const [moved] = rules.splice(from, 1)
+      rules.splice(to, 0, moved)
+      return { ...group, rules }
+    }
+  ) as FilterQuery<V>
+}
+
+/** Whether `id` names `node` itself or anything beneath it. */
+function containsFilterNode<V>(node: FilterNode<V>, id: string): boolean {
+  if (node.id === id) return true
+  if (isFilterRule(node)) return false
+  return node.rules.some((child) => containsFilterNode(child, id))
+}
+
+/**
+ * Removes a node WITHOUT pruning what it empties. A move cannot reuse
+ * `removeFilterNode`: it would delete the group the drop is aimed at.
+ */
+function detachFilterNode<V>(
+  group: FilterGroupNode<V>,
+  id: string
+): FilterGroupNode<V> {
+  let changed = false
+  const rules: FilterNode<V>[] = []
+
+  for (const child of group.rules) {
+    if (child.id === id) {
+      changed = true
+      continue
+    }
+    if (isFilterGroup(child)) {
+      const next = detachFilterNode(child, id)
+      if (next !== child) changed = true
+      rules.push(next)
+      continue
+    }
+    rules.push(child)
+  }
+
+  return changed ? { ...group, rules } : group
+}
+
+/**
+ * Moves a node into another group, at an index: the cross-parent form of
+ * `moveFilterNode`, which only reorders within one parent. Refuses a group into
+ * itself or a descendant, which would leave a cycle, and refuses the root.
+ */
+export function moveFilterNodeTo<V>(
+  query: FilterQuery<V>,
+  id: string,
+  parentId: string,
+  index: number
+): FilterQuery<V> {
+  const found = findFilterNode(query, id)
+  if (!found || !found.parent) return query
+  if (containsFilterNode(found.node, parentId)) return query
+
+  const destination = findFilterNode(query, parentId)
+  if (!destination || !isFilterGroup(destination.node)) return query
+
+  // Within one parent the node's own slot disappears when it detaches, so
+  // indexes after it shift down by one: without this a drag down is a no-op.
+  const sameParent = found.parent.id === parentId
+  const target = sameParent && found.index < index ? index - 1 : index
+  if (sameParent && target === found.index) return query
+
+  return insertFilterNode(
+    detachFilterNode(query, id),
+    found.node,
+    parentId,
+    target
+  )
+}
+
+/**
+ * Copies a node into a group at a position: the Alt path of the drag layer. Not
+ * `duplicateFilterNode` then `moveFilterNodeTo`, which emits two queries for one
+ * gesture and needs the id the first step minted and never returned. The clone
+ * is taken BEFORE the insert, so copying a group into itself stays finite.
+ */
+export function copyFilterNodeTo<V>(
+  query: FilterQuery<V>,
+  id: string,
+  parentId: string,
+  index: number,
+  nextId: () => string
+): FilterQuery<V> {
+  const found = findFilterNode(query, id)
+  if (!found || !found.parent) return query
+
+  const destination = findFilterNode(query, parentId)
+  if (!destination || !isFilterGroup(destination.node)) return query
+
+  return insertFilterNode(
+    query,
+    cloneFilterNode(found.node, nextId),
+    parentId,
+    index
+  )
+}
+
+/**
+ * Wraps a node in a new group: the "Wrap in condition group" action, and the
+ * keyboard path to nesting for a user who cannot drag.
+ */
+export function wrapFilterNodeInGroup<V>(
+  query: FilterQuery<V>,
+  id: string,
+  groupId: string,
+  combinator: FilterCombinator = "or"
+): FilterQuery<V> {
+  const found = findFilterNode(query, id)
+  if (!found || !found.parent) return query
+
+  return rewriteGroup(
+    query,
+    (group) => group.id === found.parent!.id,
+    (group) => ({
+      ...group,
+      rules: group.rules.map((child) =>
+        child.id === id
+          ? createFilterGroup<V>({ id: groupId, combinator, rules: [child] })
+          : child
+      ),
+    })
+  ) as FilterQuery<V>
+}
+
+/**
+ * Dissolves a group into its parent, splicing its rules in at the position the
+ * group held so wrap and unwrap round-trip. The root, a rule id and an unknown
+ * id each return the query unchanged.
+ */
+export function unwrapFilterGroup<V>(
+  query: FilterQuery<V>,
+  groupId: string
+): FilterQuery<V> {
+  if (query.id === groupId) return query
+  const found = findFilterNode(query, groupId)
+  if (!found || !found.parent || !isFilterGroup(found.node)) return query
+
+  const dissolved = found.node
+  return rewriteGroup(
+    query,
+    (group) => group.id === found.parent!.id,
+    (group) => {
+      const rules = [...group.rules]
+      rules.splice(found.index, 1, ...dissolved.rules)
+      return { ...group, rules }
+    }
+  ) as FilterQuery<V>
+}
+
+/** Empties the query, keeping the root's identity fields. */
+export function clearFilterQuery<V>(query: FilterQuery<V>): FilterQuery<V> {
+  return query.rules.length === 0 ? query : { ...query, rules: [] }
+}
+
+/**
+ * Drops empty groups and collapses a group whose only child is a group. Not
+ * automatic: a user mid-edit may hold an almost-empty group. Call on persist.
+ */
+export function pruneFilterQuery<V>(query: FilterQuery<V>): FilterQuery<V> {
+  const prune = (node: FilterNode<V>): FilterNode<V> | null => {
+    if (isFilterRule(node)) return node
+
+    const rules: FilterNode<V>[] = []
+    for (const child of node.rules) {
+      const next = prune(child)
+      if (next) rules.push(next)
+    }
+
+    if (rules.length === 0) return null
+    if (rules.length === 1 && isFilterGroup(rules[0])) return rules[0]
+    return { ...node, rules }
+  }
+
+  const rules: FilterNode<V>[] = []
+  for (const child of query.rules) {
+    const next = prune(child)
+    if (next) rules.push(next)
+  }
+  return { ...query, rules }
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters-types.tsx b/apps/web/src/components/reui/filters/filters-types.tsx
new file mode 100644
index 0000000..302f0f2
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters-types.tsx
@@ -0,0 +1,558 @@
+import type * as React from "react"
+
+/* -------------------------------------------------------------------------- */
+/*                                 Query tree                                 */
+/* -------------------------------------------------------------------------- */
+
+export type FilterCombinator = "and" | "or"
+
+/**
+ * One condition. `path` maps one to one onto the cascader's `details.path`, so
+ * a field selection commits untranslated. `value` is SINGULAR and the
+ * operator's `arity` decides its shape: `"many"` holds an array, `"range"` a
+ * tuple, `"none"` undefined.
+ */
+export interface FilterRule<V = unknown> {
+  id: string
+  type: "rule"
+  /** Field path, root first. `["name", "first"]` for a nested attribute. */
+  path: string[]
+  operator: string
+  value: V | undefined
+  /** Flips the meaning in place. Set by Negate when there is no `inverse`. */
+  negated?: boolean
+}
+
+/** Rules under one combinator; nests, so nesting is never a later break. */
+export interface FilterGroupNode<V = unknown> {
+  id: string
+  type: "group"
+  combinator: FilterCombinator
+  rules: FilterNode<V>[]
+}
+
+export type FilterNode<V = unknown> = FilterRule<V> | FilterGroupNode<V>
+
+/** A whole query. Always a group, so flat and nested are one code path. */
+export type FilterQuery<V = unknown> = FilterGroupNode<V>
+
+export type FilterChangeReason =
+  | "add"
+  | "update"
+  | "remove"
+  | "duplicate"
+  | "negate"
+  | "reorder"
+  | "combinator"
+  | "clear"
+
+/** Second argument to `onQueryChange`, so nobody has to diff two trees. */
+export interface FilterChangeDetails<V = unknown, O = unknown> {
+  reason: FilterChangeReason
+  /** The rule that changed, or null for whole-query changes like `clear`. */
+  rule: FilterRule<V> | null
+  /** The field the rule points at, resolved. Null when the path is unknown. */
+  field: FilterField<V, O> | null
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                  Operators                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * How many values an operator takes. Answers "does this need a value editor"
+ * for every operator, a consumer's own included, in place of the hardcoded
+ * `operator === "empty"` checks it replaced.
+ */
+export type FilterOperatorArity = "none" | "one" | "many" | "range"
+
+export interface FilterOperator {
+  value: string
+  label: string
+  /** Defaults to `"one"`. */
+  arity?: FilterOperatorArity
+  /** The opposite operator. Negate flips to it, else sets `rule.negated`. */
+  inverse?: string
+  /** Hidden from the operator list but still valid in a restored query. */
+  hidden?: boolean
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Fields                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Which built-in editor a field uses by DEFAULT: `editor` overrides it, and an
+ * operator may override both. No date type on purpose - every product wants a
+ * different date control, and a built-in one would add a calendar dependency to
+ * every install, so a date ships as an `editor`.
+ */
+export type FilterValueType =
+  | "text"
+  | "number"
+  | "range"
+  | "select"
+  | "multiselect"
+  | "boolean"
+
+export interface FilterOption<O = unknown> {
+  value: string
+  label: string
+  icon?: React.ReactNode
+  description?: string
+  keywords?: string[]
+  disabled?: boolean
+  /**
+   * The row that means NONE OF THE ABOVE: Unassigned, No label, No due date.
+   * Picking it clears every other pick and picking anything else clears it, and
+   * it is drawn apart under a rule of its own, because a list that wipes a
+   * selection must not look like one that does not; hide that line with
+   * `"[&_[data-slot=filter-menu-divider]]:hidden"`. Applied under EVERY
+   * operator, negative ones included. The value must be RESOLVABLE, since the
+   * rule runs through the option service: an option that exists only in an
+   * unfetched `loadOptions` page is invisible to it.
+   */
+  exclusive?: boolean
+  /** Arbitrary payload, carried untouched through every render callback. */
+  data?: O
+}
+
+export interface FilterLoadContext {
+  /** Aborted when the query changes, the editor closes, or a load supersedes. */
+  signal: AbortSignal
+  cursor?: string
+}
+
+/** Result of `loadOptions`, or a bare array. Shape-locked to the cascader. */
+export interface FilterLoadResult<O = unknown> {
+  items: FilterOption<O>[]
+  nextCursor?: string
+  /** Defaults to whether `nextCursor` was supplied. */
+  hasMore?: boolean
+}
+
+/** A field, or a branch. A group is a field with `fields`, not `selectable`. */
+export interface FilterField<V = unknown, O = unknown> {
+  /** Stable id. Unique among its siblings; the full path must be unique. */
+  id: string
+  label: string
+  icon?: React.ReactNode
+  description?: string
+  keywords?: string[]
+  /** Trailing count. Defaults to known children; set it when they are lazy. */
+  count?: number
+  fields?: FilterField<V, O>[]
+  /** Whether a BRANCH is itself filterable. Leaves always are. */
+  selectable?: boolean
+  disabled?: boolean
+
+  type?: FilterValueType
+  options?: FilterOption<O>[]
+  /** Async options, paged via `cursor`. Any `options` also seed the cache. */
+  loadOptions?: (
+    query: string,
+    context: FilterLoadContext
+  ) => FilterOption<O>[] | Promise<FilterOption<O>[] | FilterLoadResult<O>>
+  /** Resolves stored values the loader never returned, for restored chips. */
+  resolveValues?: (
+    values: string[]
+  ) => FilterOption<O>[] | Promise<FilterOption<O>[]>
+
+  /** Operators for this field. Falls back to the catalog for its `type`. */
+  operators?:
+    | FilterOperator[]
+    | ((field: FilterField<V, O>) => FilterOperator[])
+  defaultOperator?: string
+
+  /** Overrides the editor chosen from `type`. See `FilterEditorProps`. */
+  editor?: FilterEditorRef<V, O>
+  renderValue?: (context: FilterValueDisplayContext<V, O>) => React.ReactNode
+  /** The value as PLAIN TEXT for a11y; the default is `String(value)`. */
+  valueText?: (context: FilterValueDisplayContext<V, O>) => string
+
+  /** Placeholder for the value editor's input, or an option list's search. */
+  placeholder?: string
+  /** SHOWS the search box (default true). Off keeps it, hidden: it owns focus. */
+  searchable?: boolean
+  /**
+   * Whether an option-backed editor STACKS the picks at the top of its list.
+   * Off by default, because a short closed list is read as a whole and lifting
+   * a row out of a memorised order costs more than it buys. The partition is
+   * taken LIVE unless `sortSelected: "snapshot"`, so ticking a row moves the
+   * rows below it and the highlight is carried across by VALUE. Exclusive
+   * options never join the stack; they are grouped by ROLE.
+   */
+  pinSelected?: boolean
+  /**
+   * How an option list is ordered INSIDE each group, plus WHEN the partition is
+   * taken under `pinSelected`. With pinning off there is no partition, so
+   * `"snapshot"` is the same thing as `"none"`.
+   *
+   * - `"none"` (default) keeps declaration order. Not alphabetical, because
+   *   option order is usually semantic (To do, In progress, Done).
+   * - `"label"` sorts with `localeCompare`, so "Ålesund" files next to
+   *   "Alesund" rather than after "Zurich".
+   * - `"snapshot"` keeps declaration order too, and freezes the partition as
+   *   the menu opened it: a steady pointer target where the other two re-pin
+   *   live.
+   */
+  sortSelected?: "none" | "label" | "snapshot"
+  /**
+   * This field's own validity check. Return a MESSAGE to mark the value cell
+   * invalid, or `null` / `undefined` / `false` when the value is fine. A string
+   * rather than a schema object keeps the primitive library-agnostic.
+   *
+   * ORDER MATTERS: the built-in checks run first and this runs only when they
+   * pass, so a validator never re-answers "is there a value at all". Not called
+   * for a valueless operator, nor for a rule whose field the schema no longer
+   * has, and shown only once the user has committed a value to that rule.
+   */
+  validate?: (
+    context: FilterValidateContext<V, O>
+  ) => string | null | undefined | false
+  /**
+   * Reaches the value editor's PANEL. Merged last through tailwind-merge, so a
+   * `w-*` here beats the default rather than losing to it on source order.
+   *
+   * HEIGHT IS A VARIABLE, NOT A UTILITY: a `max-h-*` here bounds the PANEL and
+   * does nothing to the list inside it, which owns its own `max-height`. Write
+   * `--cascader-max-height: 28rem` as an arbitrary property instead; the cap is
+   * the SMALLER of that and the space the popup has.
+   */
+  className?: string
+
+  /** The storage column when it differs from the UI path. Never read here. */
+  column?: string
+  data?: unknown
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Editors                                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Where an editor renders. The SAME component serves both: `"create"` is the
+ * wizard step, which has Back and advances on commit, `"amend"` the
+ * chip-anchored popover, which offers Discard instead.
+ */
+export type FilterEditorHost = "create" | "amend"
+
+export interface FilterOptionsState<O = unknown> {
+  items: FilterOption<O>[]
+  loading: boolean
+  error: boolean
+  hasMore: boolean
+  /** Current search text. Debounced before it reaches `loadOptions`. */
+  query: string
+  setQuery: (query: string) => void
+  loadMore: () => void
+  retry: () => void
+  /** Resolves a stored value to its option, from cache when possible. */
+  resolve: (value: string) => FilterOption<O> | undefined
+}
+
+export interface FilterCommitOptions {
+  /** Dismiss the host after writing. Defaults to true. */
+  close?: boolean
+}
+
+export interface FilterEditorProps<V = unknown, O = unknown> {
+  field: FilterField<V, O>
+  operator: FilterOperator
+  /** The DRAFT value. An editor edits a draft; the host commits it. */
+  value: V | undefined
+  onValueChange: (value: V | undefined) => void
+  host: FilterEditorHost
+  /**
+   * Spread onto whichever element should take focus, so no editor reaches for
+   * `setTimeout`. A CALLBACK ref at `HTMLElement` is the one shape assignable
+   * to every element's own ref prop, so it spreads onto an input, a slider or a
+   * button without a cast.
+   */
+  autoFocusProps: {
+    ref: React.RefCallback<HTMLElement>
+    autoFocus: boolean
+  }
+  /** Accept the draft. `{ close: false }` writes through without dismissing. */
+  commit: (value?: V, options?: FilterCommitOptions) => void
+  cancel: () => void
+  /** Step back. Only meaningful when `host === "create"`. */
+  back: () => void
+  options: FilterOptionsState<O>
+  labels: FilterLabels
+}
+
+export type FilterEditor<V = unknown, O = unknown> = React.ComponentType<
+  FilterEditorProps<V, O>
+>
+
+/**
+ * An editor with its generics erased, for the registry. `unknown` rather than
+ * `never`: props are contravariant, so a `FilterEditor<never, never>` registry
+ * accepts nothing at all. The single widening cast happens where it renders.
+ */
+export type AnyFilterEditor = React.ComponentType<
+  FilterEditorProps<unknown, unknown>
+>
+
+export type FilterEditorRegistry = Record<string, AnyFilterEditor>
+
+/**
+ * A registered editor's name, or a component. The `any` arm lets a CONCRETE
+ * editor sit on an unknown-typed field without a cast: props are contravariant,
+ * so `FilterEditor<DateValue>` is not a `FilterEditor<unknown>`. The widening
+ * happens once, inside `resolveFilterEditor`.
+ */
+export type FilterEditorRef<V = unknown, O = unknown> =
+  | string
+  | FilterEditor<V, O>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | FilterEditor<any, any>
+
+/** Context for a custom builder empty state. Its actions ARE the footer's. */
+export interface FilterEmptyStateContext {
+  labels: FilterLabels
+  /** The bar is locked. A custom state should not offer an action here. */
+  readOnly: boolean
+  /** Which box the builder is in, for a state that wants to be denser inline. */
+  mode: "popover" | "inline"
+  /** Appends a condition and opens its attribute picker. */
+  addFilter: () => void
+  addGroup: () => void
+}
+
+export interface FilterValueDisplayContext<V = unknown, O = unknown> {
+  value: V | undefined
+  /** `value` normalised to an array, so callbacks never re-derive it. */
+  values: unknown[]
+  field: FilterField<V, O>
+  operator: FilterOperator
+  /** Options already resolved for `value`, when the field is option-backed. */
+  options: FilterOption<O>[]
+  labels: FilterLabels
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Index                                    */
+/* -------------------------------------------------------------------------- */
+
+/** Normalized schema, keyed by SIGNATURE: call sites inline the array. */
+export interface FilterIndex<V = unknown, O = unknown> {
+  /** Every field by its joined path, `"name.first"`. */
+  byPath: Map<string, FilterField<V, O>>
+  /** Child fields by parent path. Root fields are keyed by `FILTER_ROOT_KEY`. */
+  childrenOf: Map<string, FilterField<V, O>[]>
+  /** Parent path by path. Empty string for a root field. */
+  parentOf: Map<string, string>
+  /** Every field in stable, depth-first order. Deep search walks it, and the
+   * builder seeds a new row from the FIRST pickable entry, so order is load
+   * bearing, not incidental. */
+  all: { field: FilterField<V, O>; path: string[] }[]
+  /** Top level fields, in input order. */
+  roots: FilterField<V, O>[]
+  /** Content hash; equal schemas share one, so a rebuild reuses the index. */
+  signature: string
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Draft                                   */
+/* -------------------------------------------------------------------------- */
+
+export type FilterDraftStep = "field" | "operator" | "value"
+
+/**
+ * The in-flight filter. `cascaderPath` is kept SEPARATE from `path`: `path` is
+ * what the user chose, `cascaderPath` is where they were browsing when they
+ * chose it, and Back has to return there. Deriving it from `path` breaks the
+ * moment a deep search jumps across the tree.
+ */
+export interface FilterDraft<V = unknown> {
+  step: FilterDraftStep
+  /** `"ready"` = complete: the host writes it into the query and closes. The
+   * pure reducer decides that, not a click handler. */
+  status: "editing" | "ready"
+  /** Set when amending an existing rule, null when creating a new one. */
+  ruleId: string | null
+  /** The chosen field path. Empty until the field step commits. */
+  path: string[]
+  cascaderPath: string[]
+  operator: string | null
+  value: V | undefined
+  query: string
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Labels                                   */
+/* -------------------------------------------------------------------------- */
+
+/** Every user facing string. `stepAnnouncement` alone is headless-only. */
+export interface FilterLabels {
+  addFilter: string
+  advancedFilter: string
+  /** The line above the builder's rows, "In this view, show records". */
+  showRecords: string
+  /** Empty-state title. The HINT below is withheld from a read-only bar. */
+  builderEmpty: string
+  builderEmptyHint: string
+  /** Appends a condition to the root group, from the builder's footer. */
+  addCondition: string
+  addConditionGroup: string
+  /** A group's own add button: the only keyboard route into a nested group. It
+   * NAMES a button that shows `addCondition`, so a translation must contain
+   * that string, which is what WCAG Label in Name asks for. */
+  addToGroup: string
+  removeGroup: string
+  wrapInGroup: string
+  /** Dissolves a group into its parent. The inverse of `wrapInGroup`. */
+  ungroup: string
+  /** Moves a condition to the root group. The keyboard path to that drag. */
+  moveToTopLevel: string
+  /** Groups have no names, so they are numbered in document order, one-based. */
+  moveToGroup: (position: number) => string
+  /** Accessible name of a row's or a group's drag handle. */
+  reorder: string
+  /** Description on the drag handle, teaching the Alt+Arrow keyboard model. */
+  reorderHint: string
+  groupAll: string
+  groupAny: string
+  groupPlaceholder: string
+  /** Names a builder row. Depth is in it: indentation is invisible to AT. */
+  rowLabel: (condition: string, depth: number) => string
+  groupLabel: (description: string, depth: number) => string
+  groupAnnouncement: (added: boolean) => string
+  /** Alt+Arrow is otherwise silent. The total says whether this is the end. */
+  reorderAnnouncement: (
+    label: string,
+    position: number,
+    total: number
+  ) => string
+  /** A cross-PARENT move; a plain reorder announcement cannot be told apart.
+   * `destination` is the group's own headline, or the bar's label at the top
+   * level. */
+  moveAnnouncement: (
+    label: string,
+    destination: string,
+    position: number,
+    total: number
+  ) => string
+  clearAll: string
+  /** Names a group's menu; distinct from `chipMenu`, which is per-rule. */
+  groupMenu: string
+  searchFields: string
+  searchOperators: string
+  searchOptions: string
+  back: string
+  clear: string
+  apply: string
+  discard: string
+  empty: string
+  loading: string
+  loadingMore: string
+  loadMore: string
+  error: string
+  retry: string
+  /** Leading word before the first chip, where a combinator would otherwise go. */
+  where: string
+  and: string
+  or: string
+  /** Accessible name of the combinator toggle between two chips. */
+  combinator: string
+  /** Builder combinator toggle. English "and" wants 58.72px of a 64px track,
+   * so the name must CONTAIN the word: truncated, the pill shows "a...". */
+  combinatorLabel: (word: string) => string
+  duplicate: string
+  negate: string
+  /** Chip kebab's route into the builder. Needs `onConvertToAdvanced`. */
+  convertToAdvanced: string
+  remove: string
+  /** Names a chip's menu button. The builder's row menu reads the same key. */
+  chipMenu: (fieldLabel: string) => string
+  filtersLabel: string
+  filterLabel: (condition: string) => string
+  /** Prose, not ARIA: `aria-readonly` is invalid on toolbar, group and button. */
+  readOnly: string
+  /** Joins ancestors in a nested field path, "Name > First", for the names
+   * `formatFilterPath` builds. The chip draws a decorative chevron instead. */
+  pathSeparator: string
+  valuePlaceholder: string
+  /** Empty word for an OPTION value; `placeholder` is the search prompt. */
+  selectPlaceholder: string
+  /** Spoken for an empty value: "contains enter text..." is not a name. */
+  noValue: string
+  /** Shown in the operator segment before a condition has been chosen. */
+  selectCondition: string
+  /** Appended to a chip with no condition, matching the dashed outline. */
+  incomplete: string
+  /** Appended to a branch row's accessible name in the field picker. */
+  branchAffordance: string
+  /** A FRAGMENT, appended after a comma to an exclusive row's accessible name.
+   * Warns before the press; `exclusiveAnnouncement` is the receipt after. */
+  exclusiveHint: string
+  /** The clearing moves nothing on screen, so it is otherwise silent. */
+  exclusiveAnnouncement: (label: string, cleared: number) => string
+  itemCount: (count: number) => string
+  fieldsLabel: string
+  /** Live-region text after a query narrows an option list or the picker. */
+  resultsAnnouncement: (count: number) => string
+  /** Accessible name of an option menu's footer (Load more, Retry). */
+  actionsLabel: string
+  /** For a CONSUMER-composed wizard; the shipped flow announces counts. */
+  stepAnnouncement: (step: FilterDraftStep, label: string) => string
+  countAnnouncement: (count: number) => string
+  valueCount: (count: number) => string
+  /** Spells out the list behind the `valueCount` summary, and contains it. */
+  valueDetail: (summary: string, values: string[]) => string
+  valueRange: (from: string, to: string) => string
+  rangeFrom: (fieldLabel: string) => string
+  rangeTo: (fieldLabel: string) => string
+  rangeSeparator: string
+  /** Rendered for a `negated` rule, wrapping the operator label. */
+  negated: (operatorLabel: string) => string
+  /** Guidance ("Choose a condition"), not diagnosis: shown three ways over. */
+  issueOperator: string
+  issueValue: string
+  issueRange: string
+  issueRangeOrder: string
+  issueEmptyGroup: string
+  /** The roll-up, and the name of the button that jumps to the first issue. */
+  issueSummary: (count: number) => string
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 Validation                                 */
+/* -------------------------------------------------------------------------- */
+
+/** Why a node cannot run as written. `collectFilterIssues` produces these. */
+export type FilterIssueReason =
+  | "missing-operator"
+  | "missing-value"
+  | "incomplete-range"
+  | "reversed-range"
+  | "empty-group"
+  /** The one reason whose message is the validator's, not `FilterLabels`. */
+  | "custom"
+
+export interface FilterIssue {
+  nodeId: string
+  /** WHICH cell to mark. Two reasons share the value cell; groups have none. */
+  column: "operator" | "value" | "group"
+  reason: FilterIssueReason
+  /** Set only for `reason: "custom"`; the rest look up `FilterLabels`. */
+  message?: string
+}
+
+/**
+ * What a field's `validate` is handed. Mirrors `FilterValueDisplayContext`.
+ * SYNCHRONOUS: issues are collected in a pure memo pass, so a check that has to
+ * hit a server belongs in the consumer's own submit path.
+ */
+export interface FilterValidateContext<V = unknown, O = unknown> {
+  value: V | undefined
+  values: unknown[]
+  field: FilterField<V, O>
+  operator: FilterOperator
+  /** How many values this operator takes, already resolved. */
+  arity: FilterOperatorArity
+  rule: FilterRule<V>
+  labels: FilterLabels
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/filters/filters.tsx b/apps/web/src/components/reui/filters/filters.tsx
new file mode 100644
index 0000000..21e5a86
--- /dev/null
+++ b/apps/web/src/components/reui/filters/filters.tsx
@@ -0,0 +1,1228 @@
+import * as React from "react"
+import { FiltersAdvanced } from "@/components/reui/filters/filters-advanced"
+import { FiltersBuilder } from "@/components/reui/filters/filters-builder"
+import { FilterChip } from "@/components/reui/filters/filters-chip"
+import {
+  createFilterFocusStore,
+  createFilterResolutionStore,
+  createFilterRowStateStore,
+  FilterActionsContext,
+  filterControlSizes,
+  FilterFocusContext,
+  filterReadOnlyProps,
+  FilterRenderContext,
+  FilterRowStateProvider,
+  FilterStateContext,
+  isFilterLocked,
+  useFilterActions,
+  useFilterFocusStore,
+  useFilterState,
+  type FilterActionsContextValue,
+} from "@/components/reui/filters/filters-context"
+import {
+  filterDraftReducer,
+  isFilterDraftCommittable,
+  type FilterDraftAction,
+} from "@/components/reui/filters/filters-draft"
+import {
+  DEFAULT_FILTER_EDITORS,
+  resolveFilterEditor,
+  type FilterEditorRegistry,
+} from "@/components/reui/filters/filters-editors"
+import { resolveFilterLabels } from "@/components/reui/filters/filters-i18n"
+import {
+  buildFilterIndex,
+  computeFilterSchemaSignature,
+  createFilterIdFactory,
+  findFilterSchemaIssues,
+  formatFilterPath,
+  getFilterField,
+  warnFilterOnce,
+  type FilterPathCollapse,
+} from "@/components/reui/filters/filters-lib"
+import {
+  createFilterOperators,
+  DEFAULT_FILTER_OPERATOR_LABELS,
+  DEFAULT_FILTER_OPERATORS,
+  getFilterOperator,
+  negateFilterOperator,
+  operatorTakesValue,
+  resolveFilterOperators,
+  type FilterOperatorLabels,
+} from "@/components/reui/filters/filters-operators"
+import {
+  clearFilterQuery,
+  copyFilterNodeTo,
+  countFilterRules,
+  createFilterGroup,
+  createFilterQuery,
+  createFilterRule,
+  duplicateFilterNode,
+  findFilterNode,
+  findFilterRule,
+  flattenFilterRules,
+  insertFilterNode,
+  isFilterRule,
+  moveFilterNode,
+  moveFilterNodeTo,
+  removeFilterNode,
+  setFilterCombinator,
+  toggleFilterCombinator,
+  unwrapFilterGroup,
+  updateFilterRule,
+  wrapFilterNodeInGroup,
+} from "@/components/reui/filters/filters-query"
+import type {
+  FilterChangeDetails,
+  FilterCombinator,
+  FilterDraft,
+  FilterDraftStep,
+  FilterEditor,
+  FilterEmptyStateContext,
+  FilterField,
+  FilterLabels,
+  FilterQuery,
+  FilterRule,
+  FilterValueDisplayContext,
+} from "@/components/reui/filters/filters-types"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+
+/* -------------------------------------------------------------------------- */
+/*                                  Variants                                  */
+/* -------------------------------------------------------------------------- */
+
+const filtersBarVariants = cva("flex flex-wrap items-center", {
+  variants: {
+    // The rungs `FILTER_CONTROL_SIZES` holds, fed the RESOLVED rung at both
+    // call sites, which is what keeps the two ladders in step: a cva default
+    // only applies to a value nobody passed, so a raw `"lg"` reaching here
+    // would leave the bar with no gap at all.
+    size: {
+      sm: "gap-1.5",
+      default: "gap-2",
+    },
+  },
+  defaultVariants: { size: "default" },
+})
+
+/* -------------------------------------------------------------------------- */
+/*                                 Controllable                               */
+/* -------------------------------------------------------------------------- */
+
+function useControllableQuery<V, O>(
+  controlled: FilterQuery<V> | undefined,
+  uncontrolledDefault: FilterQuery<V> | undefined,
+  onChange:
+    | ((query: FilterQuery<V>, details: FilterChangeDetails<V, O>) => void)
+    | undefined
+) {
+  const isControlled = controlled !== undefined
+  const [internal, setInternal] = React.useState<FilterQuery<V>>(
+    () => uncontrolledDefault ?? createFilterQuery<V>()
+  )
+
+  const query = isControlled ? controlled : internal
+  const queryRef = React.useRef(query)
+  React.useEffect(() => {
+    queryRef.current = query
+  })
+
+  const setQuery = React.useCallback(
+    (next: FilterQuery<V>, details: FilterChangeDetails<V, O>) => {
+      if (next === queryRef.current) return
+      queryRef.current = next
+      if (!isControlled) setInternal(next)
+      onChange?.(next, details)
+    },
+    [isControlled, onChange]
+  )
+
+  return { query, queryRef, setQuery }
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Root                                    */
+/* -------------------------------------------------------------------------- */
+
+export interface FiltersProps<V = unknown, O = unknown> {
+  /** The field schema. Nested via each field's own `fields`. */
+  fields: FilterField<V, O>[]
+
+  query?: FilterQuery<V>
+  defaultQuery?: FilterQuery<V>
+  onQueryChange?: (
+    query: FilterQuery<V>,
+    details: FilterChangeDetails<V, O>
+  ) => void
+
+  labels?: Partial<FilterLabels>
+  /** Operator wording, overridden independently of the chrome copy. */
+  operatorLabels?: FilterOperatorLabels
+  /** Extra or replacement value editors, resolved by a field's `editor` name. */
+  editors?: FilterEditorRegistry
+
+  /**
+   * Which chrome draws the query. `"basic"` is the flat chip row, joined by an
+   * implicit AND and drawing no combinator, because a chip row has nowhere to
+   * put a parenthesis, and it draws a nested rule at any depth as a flat chip.
+   */
+  variant?: "basic" | "advanced"
+  /** Where the advanced builder lives. `"inline"` renders the panel in place. */
+  advancedMode?: "popover" | "inline"
+  /**
+   * Where the panel sits against its trigger. Stating it settles a twin split:
+   * on overflow Base UI flips edges, Radix only shifts along the axis.
+   */
+  advancedAlign?: "start" | "center" | "end"
+  /**
+   * Whether the advanced builder's rows can be REORDERED. Off by default: a
+   * move changes nothing about what the query MEANS, and costs a grip on every
+   * row plus a gesture a touch screen starts by accident. On, drag and
+   * Alt+Arrow move any row but the lone root.
+   */
+  reorderable?: boolean
+
+  /**
+   * The density of the whole bar, chips included. TWO RUNGS and no `lg`,
+   * resolved through `filterControlSizes` to whatever the ACTIVE STYLE calls
+   * that rung (nova 7/8, sera 9/10, mira 6/7, maia and luma 8/9, lyra and rhea
+   * 7/8, vega 8/9). Chips need no `ButtonGroup` variant: `items-stretch` gives
+   * the pill the height of its one definite-height child, the kebab.
+   */
+  size?: "sm" | "default"
+  disabled?: boolean
+  readOnly?: boolean
+
+  /**
+   * ONE VETO POINT for every change the BAR makes to the query, and only those.
+   * Return `false` to refuse; anything else commits, and `details.reason` names
+   * the action. One hook and not fourteen because every write goes through
+   * `emit`: the Delete key, Alt+Arrow and a drag alike. It can only refuse, and
+   * it sits BEHIND the lock, so a locked bar never asks it. Returning a
+   * REPLACEMENT tree was rejected: the announcement is already computed from
+   * the proposed tree, so the bar would say one thing and commit another.
+   */
+  onBeforeQueryChange?: (
+    query: FilterQuery<V>,
+    details: FilterChangeDetails<V, O>
+  ) => boolean | void
+
+  /**
+   * Offers "Convert to advanced filter" in every chip's kebab; its presence IS
+   * the switch, since `variant` belongs to the consumer. Not drawn in advanced.
+   */
+  onConvertToAdvanced?: () => void
+
+  /**
+   * Classes for the dropdown MENUS and the field PICKER panel, one prop each
+   * rather than one per mount point. Merged after the default, so `w-*` wins.
+   */
+  menuClassName?: string
+  fieldPickerClassName?: string
+
+  /**
+   * How a NESTED attribute path is shortened when too deep to read. `"none"` is
+   * the default, so an upgrade changes nothing under a consumer; the collapser
+   * is the cascader's, and the full path survives as the accessible NAME.
+   */
+  pathCollapse?: FilterPathCollapse
+  /**
+   * How many names survive the collapse, the elided run not counted. Inert
+   * while `pathCollapse` is `"none"`. Three is the cascader's own default.
+   */
+  maxPathSegments?: number
+
+  /** Replaces the default Add filter button. */
+  trigger?: React.ReactNode
+  /** Renders a Clear button once the query holds anything. */
+  showClear?: boolean
+
+  renderValue?: (context: FilterValueDisplayContext<V, O>) => React.ReactNode
+  renderChip?: (rule: FilterRule<V>) => React.ReactNode
+  /**
+   * Replaces the advanced builder's empty state, which exists at all because a
+   * builder with no rows is a footer floating in blank space. `null` for none.
+   */
+  renderEmpty?: (context: FilterEmptyStateContext) => React.ReactNode
+
+  className?: string
+  children?: React.ReactNode
+}
+
+export function Filters<V = unknown, O = unknown>({
+  fields,
+  query: controlledQuery,
+  defaultQuery,
+  onQueryChange,
+  labels: labelsProp,
+  operatorLabels: operatorLabelsProp,
+  editors: editorsProp,
+  variant = "basic",
+  advancedMode = "popover",
+  advancedAlign = "start",
+  reorderable = false,
+  size = "default",
+  disabled = false,
+  readOnly = false,
+  onBeforeQueryChange,
+  onConvertToAdvanced,
+  menuClassName,
+  fieldPickerClassName,
+  pathCollapse = "none",
+  maxPathSegments = 3,
+  trigger,
+  showClear = false,
+  renderValue,
+  renderChip,
+  renderEmpty,
+  className,
+  children,
+}: FiltersProps<V, O>) {
+  const { query, queryRef, setQuery } = useControllableQuery<V, O>(
+    controlledQuery,
+    defaultQuery,
+    onQueryChange
+  )
+
+  const [draft, dispatchDraftRaw] = React.useReducer(
+    filterDraftReducer<V>,
+    null as FilterDraft<V> | null
+  )
+  // Text AND a counter: `aria-live` fires on a DOM mutation and React writes
+  // nothing when the string is already there, so a repeat was silent. Measured
+  // with a MutationObserver: "Group added" three times, one mutation.
+  const [announced, setAnnounced] = React.useState({ seq: 0, text: "" })
+  const announcement = announced.text
+  const setAnnouncement = React.useCallback((text: string) => {
+    setAnnounced((prev) => ({ seq: prev.seq + 1, text }))
+  }, [])
+
+  // Seeded from useId: ids from Date.now() plus Math.random() broke hydration.
+  const idSeed = React.useId()
+  const nextId = React.useMemo(
+    () => createFilterIdFactory(`${idSeed}f`),
+    [idSeed]
+  )
+
+  const focusStore = React.useMemo(() => createFilterFocusStore(), [])
+  const rowStateStore = React.useMemo(() => createFilterRowStateStore(), [])
+  // One per root: the value-to-label store every `useFilterOptions` shares.
+  const resolutionStore = React.useMemo(() => createFilterResolutionStore(), [])
+
+  /* -------------------------------- derived ------------------------------- */
+
+  // `fields` is an inline literal at every real call site, so the CHEAP walk
+  // runs every render and the EXPENSIVE index memoizes on its result. Not a
+  // ref caching the previous index: writing a ref during render is the
+  // impurity this rewrite removed, and it misbehaves under StrictMode.
+  const signature = computeFilterSchemaSignature(fields)
+  const index = React.useMemo(
+    () => buildFilterIndex<V, O>(fields, null, signature),
+    // Not `fields`: its identity changes every render at every real call site.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [signature]
+  )
+
+  const labels = React.useMemo(
+    () => resolveFilterLabels(labelsProp),
+    [labelsProp]
+  )
+
+  const operatorCatalog = React.useMemo(() => {
+    if (!operatorLabelsProp) return DEFAULT_FILTER_OPERATORS
+    return createFilterOperators({
+      ...DEFAULT_FILTER_OPERATOR_LABELS,
+      ...operatorLabelsProp,
+    })
+  }, [operatorLabelsProp])
+
+  const editors = React.useMemo(
+    () => ({ ...DEFAULT_FILTER_EDITORS, ...editorsProp }),
+    [editorsProp]
+  )
+
+  const resolveOperators = React.useCallback(
+    (field: FilterField<V, O>) =>
+      resolveFilterOperators(field, operatorCatalog),
+    [operatorCatalog]
+  )
+
+  const ruleCount = React.useMemo(() => countFilterRules(query), [query])
+
+  /* --------------------------- latest-props ref --------------------------- */
+
+  const latest = React.useRef({
+    index,
+    labels,
+    operatorCatalog,
+    resolveOperators,
+    draft,
+    nextId,
+    setQuery,
+    queryRef,
+    disabled,
+    readOnly,
+    onBeforeQueryChange,
+  })
+  React.useEffect(() => {
+    latest.current = {
+      index,
+      labels,
+      operatorCatalog,
+      resolveOperators,
+      draft,
+      nextId,
+      setQuery,
+      queryRef,
+      disabled,
+      readOnly,
+      onBeforeQueryChange,
+    }
+  })
+
+  /* -------------------------------- actions ------------------------------- */
+
+  // Every mutator below reads state through `latest`, so no keystroke rebuilds
+  // one. The lock flags are the ONE exception, for the reason on `locked`.
+
+  /**
+   * THE MUTATION BOUNDARY, asked here and not at the nine buttons, because the
+   * routes into a query are not only buttons. It needs BOTH the closure and
+   * the ref: `latest` is written in a passive effect and effects run
+   * child-first, so a consumer effect in the commit that turns `readOnly` on
+   * runs BEFORE the ref learns of it, while the ref is what a stale handler
+   * reads afterwards.
+   */
+  const locked = React.useCallback(
+    () => disabled || readOnly || isFilterLocked(latest.current),
+    [disabled, readOnly]
+  )
+
+  // Reports whether the write LANDED: `onBeforeQueryChange` is discoverable
+  // only here, and a vetoed remove that still announced a count would lie.
+  const emit = React.useCallback(
+    (
+      next: FilterQuery<V>,
+      reason: FilterChangeDetails<V, O>["reason"],
+      rule: FilterRule<V> | null
+    ): boolean => {
+      // The backstop, redundant with each mutator's own early return, and
+      // FIRST, so the consumer hook cannot approve what the lock refused.
+      if (locked()) return false
+      const field = rule
+        ? (getFilterField(latest.current.index, rule.path) ?? null)
+        : null
+      const details: FilterChangeDetails<V, O> = { reason, rule, field }
+      // Strictly `false`, so a handler that forgets to return is not a veto.
+      if (latest.current.onBeforeQueryChange?.(next, details) === false) {
+        return false
+      }
+      latest.current.setQuery(next, details)
+      return true
+    },
+    [locked]
+  )
+
+  /**
+   * Drops the roving tab stop when the node holding it no longer exists: a cell
+   * claims it when the store names it, and the "row one takes it" fallback
+   * fires only when the store is EMPTY, so a deleted id left twenty cells at
+   * `tabindex="-1"` with focus on the BODY. Keyed on the committed `query`, so
+   * a consumer's Reset or saved-view load is repaired too: add a condition,
+   * press Reset, and 25 cells stayed untabbable in both twins.
+   */
+  React.useEffect(() => {
+    const { id } = focusStore.getSnapshot()
+    if (!id || findFilterNode(query, id)) return
+    focusStore.set({ id: null, segment: null, autoOpen: false })
+  }, [query, focusStore])
+
+  const addRule = React.useCallback(
+    (rule: FilterRule<V>, parentId?: string) => {
+      if (locked()) return
+      const next = insertFilterNode(
+        latest.current.queryRef.current,
+        rule,
+        parentId
+      )
+      if (!emit(next, "add", rule)) return
+      setAnnouncement(
+        latest.current.labels.countAnnouncement(countFilterRules(next))
+      )
+    },
+    [emit, locked, setAnnouncement]
+  )
+
+  const addGroup = React.useCallback(
+    (parentId?: string, combinator: FilterCombinator = "or") => {
+      // Before `nextId`, so a LOCKED bar cannot drift the SSR-seeded sequence.
+      if (locked()) return ""
+      const id = latest.current.nextId()
+      // `or` by default: `a AND (b AND c)` is just `a AND b AND c`.
+      const next = insertFilterNode(
+        latest.current.queryRef.current,
+        createFilterGroup<V>({ id, combinator }),
+        parentId
+      )
+      // `""` on a veto: every caller moves focus onto the id it gets back, and
+      // focusing a group that was never created strands the tab stop. The id
+      // is already burnt, deliberately: a veto is a client-time decision the
+      // server never took part in.
+      if (!emit(next, "add", null)) return ""
+      setAnnouncement(latest.current.labels.groupAnnouncement(true))
+      return id
+    },
+    [emit, locked, setAnnouncement]
+  )
+
+  const updateRule = React.useCallback(
+    (id: string, updates: Partial<Omit<FilterRule<V>, "id" | "type">>) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const next = updateFilterRule(current, id, updates)
+      if (next === current) return
+      // THE VALUE, not the field or the operator: picking an attribute leaves
+      // the value empty, so arming there reddens the flow the primitive itself
+      // walks a user through. A field re-pick sends `value: undefined` in the
+      // SAME patch, so `path` and not the presence of `value` tells the two
+      // apart. Clearing a typed value still arms it: no `path` in that patch.
+      if ("path" in updates) rowStateStore.unmark(id)
+      else if ("value" in updates) rowStateStore.mark(id)
+      emit(next, "update", findFilterRule(next, id))
+    },
+    [emit, locked, rowStateStore]
+  )
+
+  const removeNode = React.useCallback(
+    (id: string) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const removed = findFilterRule(current, id)
+      const next = removeFilterNode(current, id)
+      if (next === current) return
+      if (!emit(next, "remove", removed)) return
+      // A rule removal reports the COUNT; a group has no rule to report and
+      // takes an unknown number of conditions with it, so it says so instead.
+      setAnnouncement(
+        removed
+          ? latest.current.labels.countAnnouncement(countFilterRules(next))
+          : latest.current.labels.groupAnnouncement(false)
+      )
+    },
+    [emit, locked, setAnnouncement]
+  )
+
+  const duplicateNode = React.useCallback(
+    (id: string) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const next = duplicateFilterNode(current, id, latest.current.nextId)
+      if (next === current) return
+      if (!emit(next, "duplicate", findFilterRule(current, id))) return
+      // The count, not "duplicated": a GROUP adds an unknown number of rows.
+      setAnnouncement(
+        latest.current.labels.countAnnouncement(countFilterRules(next))
+      )
+    },
+    [emit, locked, setAnnouncement]
+  )
+
+  const negateRule = React.useCallback(
+    (id: string) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const rule = findFilterRule(current, id)
+      if (!rule) return
+      const field = getFilterField(latest.current.index, rule.path)
+      if (!field) return
+      const operators = latest.current.resolveOperators(field)
+      const flipped = negateFilterOperator(
+        getFilterOperator(operators, rule.operator),
+        operators,
+        rule.negated
+      )
+      const next = updateFilterRule(current, id, {
+        operator: flipped.operator ?? rule.operator,
+        negated: flipped.negated || undefined,
+      })
+      emit(next, "negate", findFilterRule(next, id))
+    },
+    [emit, locked]
+  )
+
+  // Says where a node LANDED, the one mutator a screen reader hears nothing
+  // else about: focus stays on the handle and the name does not change. Reads
+  // the tree AFTER the move: the position and sibling count announced are the
+  // ones the user has just arrived at.
+  const announceReorder = React.useCallback(
+    (next: FilterQuery<V>, id: string, fromParentId: string | null) => {
+      const found = findFilterNode(next, id)
+      if (!found || !found.parent) return
+      const label = isFilterRule(found.node)
+        ? formatFilterPath(
+            latest.current.index,
+            found.node.path,
+            latest.current.labels.pathSeparator
+          )
+        : found.node.combinator === "and"
+          ? latest.current.labels.groupAll
+          : latest.current.labels.groupAny
+      const position = found.index + 1
+      const total = found.parent.rules.length
+
+      // A move that changed the node's CONTAINER is a different event, named by
+      // the group's own headline, or the bar's label at the top level.
+      if (fromParentId && fromParentId !== found.parent.id) {
+        const destination =
+          found.parent.id === next.id
+            ? latest.current.labels.filtersLabel
+            : found.parent.combinator === "and"
+              ? latest.current.labels.groupAll
+              : latest.current.labels.groupAny
+        setAnnouncement(
+          latest.current.labels.moveAnnouncement(
+            label,
+            destination,
+            position,
+            total
+          )
+        )
+        return
+      }
+
+      setAnnouncement(
+        latest.current.labels.reorderAnnouncement(label, position, total)
+      )
+    },
+    [setAnnouncement]
+  )
+
+  const moveNode = React.useCallback(
+    (id: string, delta: number) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const next = moveFilterNode(current, id, delta)
+      if (next === current) return
+      if (!emit(next, "reorder", findFilterRule(next, id))) return
+      // Within the owning group by construction, so there is no destination.
+      announceReorder(next, id, null)
+    },
+    [emit, announceReorder, locked]
+  )
+
+  // Also the drag layer's drop commit, so a drag and Alt+Arrow say the same.
+  const moveNodeTo = React.useCallback(
+    (id: string, parentId: string, index: number) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      // BEFORE the move: the only place the old parent still exists.
+      const fromParentId = findFilterNode(current, id)?.parent?.id ?? null
+      const next = moveFilterNodeTo(current, id, parentId, index)
+      if (next === current) return
+      if (!emit(next, "reorder", findFilterRule(next, id))) return
+      announceReorder(next, id, fromParentId)
+    },
+    [emit, announceReorder, locked]
+  )
+
+  const copyNodeTo = React.useCallback(
+    (id: string, parentId: string, index: number) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const next = copyFilterNodeTo(
+        current,
+        id,
+        parentId,
+        index,
+        latest.current.nextId
+      )
+      if (next === current) return
+      if (!emit(next, "duplicate", findFilterRule(current, id))) return
+      // The count again: an Alt-drag of a GROUP adds an unknown number of rows.
+      setAnnouncement(
+        latest.current.labels.countAnnouncement(countFilterRules(next))
+      )
+    },
+    [emit, locked, setAnnouncement]
+  )
+
+  const wrapNodeInGroup = React.useCallback(
+    (id: string, combinator: FilterCombinator = "or") => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const next = wrapFilterNodeInGroup(
+        current,
+        id,
+        latest.current.nextId(),
+        combinator
+      )
+      if (next === current) return
+      if (!emit(next, "add", findFilterRule(next, id))) return
+      setAnnouncement(latest.current.labels.groupAnnouncement(true))
+    },
+    [emit, locked, setAnnouncement]
+  )
+
+  const unwrapGroup = React.useCallback(
+    (groupId: string) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const next = unwrapFilterGroup(current, groupId)
+      if (next === current) return
+      // The conditions survive in place, so the count has not changed.
+      if (!emit(next, "remove", null)) return
+      setAnnouncement(latest.current.labels.groupAnnouncement(false))
+    },
+    [emit, locked, setAnnouncement]
+  )
+
+  // What a combinator change SOUNDS like: the pill's name changes with it, but
+  // a name change on the FOCUSED element is not re-announced by NVDA or JAWS.
+  // The group's own headline, not the bare word: it says what the query MEANS
+  // now, which is the thing that changed.
+  const announceCombinator = React.useCallback(
+    (combinator: FilterCombinator) => {
+      setAnnouncement(
+        combinator === "and"
+          ? latest.current.labels.groupAll
+          : latest.current.labels.groupAny
+      )
+    },
+    [setAnnouncement]
+  )
+
+  const setCombinatorAction = React.useCallback(
+    (groupId: string, combinator: FilterCombinator) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const next = setFilterCombinator(current, groupId, combinator)
+      if (next === current) return
+      if (!emit(next, "combinator", null)) return
+      announceCombinator(combinator)
+    },
+    [emit, locked, announceCombinator]
+  )
+
+  const toggleCombinatorAction = React.useCallback(
+    (groupId: string) => {
+      if (locked()) return
+      const current = latest.current.queryRef.current
+      const next = toggleFilterCombinator(current, groupId)
+      if (next === current) return
+      if (!emit(next, "combinator", null)) return
+      // Read off the COMMITTED tree, so the sentence cannot disagree with it.
+      const group = findFilterNode(next, groupId)?.node
+      if (group && !isFilterRule(group)) announceCombinator(group.combinator)
+    },
+    [emit, locked, announceCombinator]
+  )
+
+  const clearQueryAction = React.useCallback(() => {
+    if (locked()) return
+    const current = latest.current.queryRef.current
+    const next = clearFilterQuery(current)
+    if (next === current) return
+    if (!emit(next, "clear", null)) return
+    setAnnouncement(latest.current.labels.countAnnouncement(0))
+  }, [emit, locked, setAnnouncement])
+
+  // The live region, opened to the chrome inside the bar. The setter itself is
+  // not published: it is a channel anything could write anything to.
+  const announce = React.useCallback(
+    (message: string) => {
+      if (!message) return
+      setAnnouncement(message)
+    },
+    [setAnnouncement]
+  )
+
+  // A draft is a MUTATION in progress, so it locks with the rest, except
+  // `close`: a panel open when the bar turned read only must still dismiss.
+  const dispatchDraft = React.useCallback(
+    (action: FilterDraftAction<V>) => {
+      if (action.type !== "close" && locked()) return
+      dispatchDraftRaw(action)
+    },
+    [locked]
+  )
+
+  const openCreate = React.useCallback(() => {
+    if (locked()) return
+    dispatchDraftRaw({ type: "openCreate" })
+  }, [locked])
+
+  const openAmend = React.useCallback(
+    (id: string, step: FilterDraftStep) => {
+      if (locked()) return
+      const rule = findFilterRule(latest.current.queryRef.current, id)
+      if (!rule) return
+      dispatchDraftRaw({
+        type: "openAmend",
+        ruleId: id,
+        step,
+        path: rule.path,
+        operator: rule.operator,
+        value: rule.value,
+      })
+    },
+    [locked]
+  )
+
+  const closeDraft = React.useCallback(
+    () => dispatchDraftRaw({ type: "close" }),
+    []
+  )
+
+  const getQuery = React.useCallback(() => latest.current.queryRef.current, [])
+  const getDraft = React.useCallback(() => latest.current.draft, [])
+
+  /* ------------------------- draft -> query commit ------------------------ */
+
+  // The draft becomes a rule exactly once, when the reducer says it is ready.
+  // Here rather than in each click handler, which is what lets the "arity none
+  // skips the value step" branch live in the pure reducer.
+  React.useEffect(() => {
+    if (!draft || draft.status !== "ready") return
+    if (!isFilterDraftCommittable(draft)) return
+
+    if (draft.ruleId) {
+      updateRule(draft.ruleId, {
+        path: draft.path,
+        operator: draft.operator ?? "",
+        value: draft.value,
+      })
+    } else if (!locked()) {
+      // Asked here too: this branch burns an id and points the focus store at
+      // it, and a store naming a chip that never existed eats the tab stop.
+      const id = nextId()
+      addRule(
+        createFilterRule<V>({
+          id,
+          path: draft.path,
+          // Empty on purpose: the chip renders "Select condition" and opens.
+          operator: "",
+          value: undefined,
+        })
+      )
+      focusStore.set({ id, segment: "operator", autoOpen: true })
+    }
+    dispatchDraftRaw({ type: "close" })
+  }, [draft, addRule, updateRule, nextId, focusStore, locked])
+
+  /* ---------------------------- dev diagnostics --------------------------- */
+
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "production") return
+    const issues = findFilterSchemaIssues(fields, (field) =>
+      resolveFilterOperators(field, operatorCatalog)
+    )
+    if (issues.duplicatePaths.length) {
+      warnFilterOnce(
+        `dup:${issues.duplicatePaths.join(",")}`,
+        `duplicate sibling field ids are ignored after the first: ${issues.duplicatePaths.join(", ")}`
+      )
+    }
+    if (issues.emptyIds.length) {
+      warnFilterOnce("empty-id", "every field needs a non-empty id")
+    }
+    if (issues.unknownDefaultOperators.length) {
+      warnFilterOnce(
+        `op:${issues.unknownDefaultOperators.join(",")}`,
+        `defaultOperator names an operator the field does not offer: ${issues.unknownDefaultOperators.join(", ")}`
+      )
+    }
+  }, [fields, operatorCatalog])
+
+  /* ------------------------------- contexts ------------------------------- */
+
+  const actions = React.useMemo<FilterActionsContextValue<V, O>>(
+    () => ({
+      index,
+      labels,
+      operatorCatalog,
+      editors,
+      size,
+      disabled,
+      readOnly,
+      variant,
+      menuClassName,
+      fieldPickerClassName,
+      convertToAdvanced: onConvertToAdvanced,
+      pathCollapse,
+      maxPathSegments,
+      resolveOperators,
+      // The same lookup the chrome uses, so a headless consumer can ask it too.
+      resolveEditor: (field, operator) =>
+        resolveFilterEditor(field, operator, editors) as
+          | FilterEditor<V, O>
+          | undefined,
+      resolution: resolutionStore,
+      addRule,
+      addGroup,
+      updateRule,
+      removeNode,
+      duplicateNode,
+      negateRule,
+      moveNode,
+      moveNodeTo,
+      copyNodeTo,
+      wrapNodeInGroup,
+      unwrapGroup,
+      setCombinator: setCombinatorAction,
+      toggleCombinator: toggleCombinatorAction,
+      clearQuery: clearQueryAction,
+      openCreate,
+      openAmend,
+      closeDraft,
+      dispatchDraft,
+      announce,
+      getQuery,
+      getDraft,
+      nextId,
+    }),
+    // Every input is memoized and every action `[]`-stable, so this
+    // republishes on a real schema or config change, never on a keystroke.
+    [
+      index,
+      labels,
+      operatorCatalog,
+      editors,
+      size,
+      disabled,
+      readOnly,
+      variant,
+      menuClassName,
+      fieldPickerClassName,
+      onConvertToAdvanced,
+      pathCollapse,
+      maxPathSegments,
+      resolveOperators,
+      resolutionStore,
+      addRule,
+      addGroup,
+      updateRule,
+      removeNode,
+      duplicateNode,
+      negateRule,
+      moveNode,
+      moveNodeTo,
+      copyNodeTo,
+      wrapNodeInGroup,
+      unwrapGroup,
+      setCombinatorAction,
+      toggleCombinatorAction,
+      clearQueryAction,
+      openCreate,
+      openAmend,
+      closeDraft,
+      dispatchDraft,
+      announce,
+      getQuery,
+      getDraft,
+      nextId,
+    ]
+  )
+
+  const state = React.useMemo(
+    () => ({
+      query,
+      draft,
+      ruleCount,
+      announcement,
+      announcementSeq: announced.seq,
+    }),
+    [query, draft, ruleCount, announcement, announced.seq]
+  )
+
+  const renderContext = React.useMemo(
+    () => ({ renderValue, renderChip, renderEmpty }),
+    [renderValue, renderChip, renderEmpty]
+  )
+
+  return (
+    <FilterActionsContext.Provider
+      value={actions as unknown as FilterActionsContextValue}
+    >
+      <FilterStateContext.Provider value={state as never}>
+        <FilterRenderContext.Provider value={renderContext as never}>
+          <FilterRowStateProvider value={rowStateStore}>
+            <FilterFocusContext.Provider value={focusStore}>
+              {children ??
+                (variant === "advanced" ? (
+                  <FiltersAdvanced<V, O>
+                    mode={advancedMode}
+                    align={advancedAlign}
+                    trigger={trigger}
+                    reorderable={reorderable}
+                    className={className}
+                  />
+                ) : (
+                  <FiltersRow
+                    trigger={trigger}
+                    showClear={showClear}
+                    className={className}
+                  />
+                ))}
+            </FilterFocusContext.Provider>
+          </FilterRowStateProvider>
+        </FilterRenderContext.Provider>
+      </FilterStateContext.Provider>
+    </FilterActionsContext.Provider>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                    Row                                     */
+/* -------------------------------------------------------------------------- */
+
+export interface FiltersRowProps {
+  trigger?: React.ReactNode
+  showClear?: boolean
+  className?: string
+}
+
+/**
+ * The chip row: a toolbar with a roving tabindex, where the predecessor made
+ * every segment of every chip its own tab stop. There is NO combinator here,
+ * because a chip row can draw a word between two pills but not a parenthesis.
+ */
+export function FiltersRow({ trigger, showClear, className }: FiltersRowProps) {
+  const actions = useFilterActions()
+  const sizes = filterControlSizes(actions)
+  const { query, ruleCount, announcement, announcementSeq } = useFilterState()
+  const focusStore = useFilterFocusStore()
+  const rootRef = React.useRef<HTMLDivElement>(null)
+  // The keys consult this even though the actions already refuse: an ungated
+  // Enter would ARM `autoOpen` for a popover that then refuses to open. Gated
+  // per branch, never at the top of `onKeyDown`: the arrows, Home and End are
+  // how a read-only bar is read.
+  const locked = isFilterLocked(actions)
+
+  // Flattened, not `query.rules.filter(isFilterRule)`: a query built in the
+  // advanced builder would otherwise hide nested conditions that still filter.
+  const rules = React.useMemo(() => flattenFilterRules(query), [query])
+
+  const chips = () =>
+    Array.from(
+      rootRef.current?.querySelectorAll<HTMLElement>(
+        '[data-slot="filter-chip"]'
+      ) ?? []
+    )
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const target = (event.target as HTMLElement).closest<HTMLElement>(
+      '[data-slot="filter-chip"]'
+    )
+    if (!target) return
+    // A key pressed inside an open popover belongs to that popover.
+    if (event.target !== target) return
+
+    const all = chips()
+    const current = all.indexOf(target)
+    if (current === -1) return
+
+    const rtl = getComputedStyle(target).direction === "rtl"
+    const forward = rtl ? "ArrowLeft" : "ArrowRight"
+    const backward = rtl ? "ArrowRight" : "ArrowLeft"
+
+    const focusAt = (index: number) => {
+      const next = all[Math.max(0, Math.min(index, all.length - 1))]
+      if (!next) return
+      event.preventDefault()
+      next.focus()
+    }
+
+    const ruleId = target.dataset.ruleId
+    if (!ruleId) return
+
+    if (event.altKey && (event.key === forward || event.key === backward)) {
+      if (locked) return
+      event.preventDefault()
+      actions.moveNode(ruleId, event.key === forward ? 1 : -1)
+      return
+    }
+    if (event.key === forward) return focusAt(current + 1)
+    if (event.key === backward) return focusAt(current - 1)
+    if (event.key === "Home") return focusAt(0)
+    if (event.key === "End") return focusAt(all.length - 1)
+
+    if (event.key === "Backspace" || event.key === "Delete") {
+      if (locked) return
+      event.preventDefault()
+      actions.removeNode(ruleId)
+      // The neighbour taking this chip's place, so a run of deletes keeps focus.
+      requestAnimationFrame(() => {
+        const remaining = chips()
+        remaining[Math.min(current, remaining.length - 1)]?.focus()
+      })
+      return
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      if (locked) return
+      event.preventDefault()
+      // Enter RESUMES the chip: the attribute segment is display only, so the
+      // target is whichever step the flow has not reached, never nothing.
+      const rule = findFilterRule(actions.getQuery(), ruleId)
+      if (!rule) return
+      const field = getFilterField(actions.index, rule.path)
+      // No popover to open, so autoOpen would sit armed until another chip
+      // spent it. The chip stays reachable and Delete still removes it.
+      if (!field) return
+      const operator = getFilterOperator(
+        actions.resolveOperators(field),
+        rule.operator
+      )
+      const segment =
+        rule.operator && operatorTakesValue(operator) ? "value" : "operator"
+      focusStore.set({ id: ruleId, segment, autoOpen: true })
+    }
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      data-slot="filters"
+      data-empty={rules.length === 0 || undefined}
+      /* A presence hook, so a consumer can tint the whole read-only bar. */
+      data-readonly={actions.readOnly || undefined}
+      className={cn(
+        /* `sizes.button` and not `actions.size`: the gap ladder and the control
+           ladder must answer for the same rung, normalized in one place. */
+        filtersBarVariants({ size: sizes.button }),
+        /* An empty toolbar is still a flex child, so it took a gap with no
+           width. The gap goes, not the toolbar, which owns the row's name. */
+        rules.length === 0 && "gap-0",
+        className
+      )}
+    >
+      <div
+        role="toolbar"
+        aria-label={actions.labels.filtersLabel}
+        aria-orientation="horizontal"
+        /* `role=toolbar` disallows `aria-readonly`, and `aria-disabled` would
+           deny arrowing; a description is legal here and spoken on entry. */
+        {...(actions.readOnly
+          ? { "aria-description": actions.labels.readOnly }
+          : null)}
+        className={cn(filtersBarVariants({ size: sizes.button }))}
+        onKeyDown={onKeyDown}
+      >
+        {rules.map((rule, index) => (
+          <FilterChip key={rule.id} rule={rule} index={index} />
+        ))}
+      </div>
+
+      <FiltersBuilder trigger={trigger} />
+
+      {showClear && ruleCount > 0 ? (
+        // `ms-auto` and not `ml-auto`, so Clear stays on the trailing edge
+        // under RTL, where the whole bar mirrors.
+        <Button
+          variant="outline"
+          /* The same rung as the Add filter trigger beside it. */
+          size={sizes.button}
+          className="ms-auto"
+          /* `disabled` for the hard flag, `aria-disabled` for the soft one, so
+             a read-only Clear keeps its tab stop and can still be found. */
+          disabled={actions.disabled}
+          {...filterReadOnlyProps(actions)}
+          onClick={() => actions.clearQuery()}
+        >
+          {actions.labels.clear}
+        </Button>
+      ) : null}
+
+      {/* Keyed on the sequence, so the same sentence twice is two
+          announcements (see `announced` for the measurement). A replaced live
+          element stops being watched. */}
+      <div aria-live="polite" role="status" className="sr-only">
+        <span key={announcementSeq}>{announcement}</span>
+      </div>
+    </div>
+  )
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                   Exports                                  */
+/* -------------------------------------------------------------------------- */
+
+// The full pure READ surface, so one import reaches everything a predicate, a
+// saved view or a backend query needs. It stops at the query TREE and compiles
+// nothing: `flattenFilterConditions` is the hand-off a server compiles from.
+// No SQL emitter, because a server has to re-validate anything a browser sends
+// and should compile from the tree rather than parse a client's string. SQL is
+// one target of that hand-off beside Prisma, Drizzle, a REST query string and
+// Elasticsearch.
+export {
+  // The panel does not DRAW the built-in reasons, so this is the only way to
+  // surface "missing value", "empty group" and the rest.
+  collectFilterIssues,
+  copyFilterNodeTo,
+  createFilterGroup,
+  createFilterQuery,
+  createFilterRule,
+  countFilterRules,
+  flattenFilterConditions,
+  flattenFilterRules,
+  isFilterQueryEmpty,
+  isFilterRuleComplete,
+  moveFilterNodeTo,
+  pruneFilterQuery,
+  unwrapFilterGroup,
+  wrapFilterNodeInGroup,
+} from "@/components/reui/filters/filters-query"
+
+// The two resolver signatures `collectFilterIssues` takes.
+export type {
+  FilterArityResolver,
+  FilterValidateResolver,
+} from "@/components/reui/filters/filters-query"
+
+export {
+  // The read-only contract: the gate, and the props a mutating control wears.
+  filterReadOnlyProps,
+  isFilterLocked,
+  useFilterActions,
+  useFilterState,
+  useFilterFocus,
+  // What a custom chip needs to rebuild the roving scheme `renderChip` drops.
+  useFilterChipAutoOpen,
+  useFilterChipFocused,
+  useFilterFocusEmpty,
+  useFilterFocusStore,
+  useFilterRender,
+  useFilterSegmentFocus,
+} from "@/components/reui/filters/filters-context"
+
+export {
+  FilterChip,
+  FilterOperatorPopover,
+  FilterRuleMenuItems,
+  FilterValuePopover,
+  useFilterRuleDisplay,
+} from "@/components/reui/filters/filters-chip"
+export {
+  FiltersAdvanced,
+  FiltersAdvancedPanel,
+  FilterAdvancedRow,
+} from "@/components/reui/filters/filters-advanced"
+export {
+  FiltersBuilder,
+  FilterFieldPicker,
+} from "@/components/reui/filters/filters-builder"
+export { DEFAULT_FILTER_LABELS } from "@/components/reui/filters/filters-i18n"
+export {
+  DEFAULT_FILTER_OPERATORS,
+  DEFAULT_FILTER_OPERATOR_LABELS,
+} from "@/components/reui/filters/filters-operators"
+export {
+  DEFAULT_FILTER_EDITORS,
+  useFilterOptions,
+  useFilterValueResolution,
+} from "@/components/reui/filters/filters-editors"
+
+export type * from "@/components/reui/filters/filters-types"
\ No newline at end of file
diff --git a/apps/web/src/components/reui/frame.tsx b/apps/web/src/components/reui/frame.tsx
index 812db16..8d2d93c 100644
--- a/apps/web/src/components/reui/frame.tsx
+++ b/apps/web/src/components/reui/frame.tsx
@@ -25,6 +25,14 @@ const frameVariants = cva(
     "(1)] (1)] (1.25)] (1.5)] (1.5)] (0.5)] (1)] (1)]",
     // Default panel token values — overridden per-variant below
     "[--frame-panel-bg:var(--color-card)] [--frame-panel-border-color:var(--color-border)] [--frame-border-color:var(--color-border)]",
+    // Concentric inner radius: the panel corner nests smoothly inside the frame
+    // corner instead of matching it. The panel sits inset from the frame's outer
+    // edge by the frame's 1px border + --frame-px padding, so its radius is
+    // reduced by that same gap (radius − gap keeps the two arcs parallel). This
+    // base value assumes the bordered default/inverse frame; `ghost` drops the
+    // 1px border term and `dense` pins it back to the frame radius (its panels
+    // are pulled flush to the edge).
+    "[--frame-panel-radius:calc(var(--frame-radius)_-_var(--frame-px)_-_1px)]",
   ],
   {
     variants: {
@@ -32,14 +40,23 @@ const frameVariants = cva(
         default: "border border-[var(--frame-border-color)] bg-clip-padding",
         inverse:
           "[--frame-panel-bg:color-mix(in_oklch,var(--color-muted)_40%,transparent)] border border-[var(--frame-border-color)] bg-background bg-clip-padding",
-        ghost: "",
+        // No frame border, so the panel is inset by --frame-px padding only.
+        ghost: "[--frame-panel-radius:calc(var(--frame-radius)_-_var(--frame-px))]",
       },
+      // Header/footer vertical rhythm is tighter than the panel body's, and
+      // the gap widens as the frame grows: the bars read as chrome rather than
+      // as another content block. py ladder is 0.5 / 1.5 / 2 / 2.5 against a
+      // body py of 2 / 3.5 / 4 / 5. These vars are style-agnostic - no
+      // style-*.css overrides them - so this single ladder drives all shadcn
+      // styles. `px` is deliberately left level with the body so header,
+      // content and footer stay left-aligned. `xs` holds at 0.5 (2px): it is
+      // the practical floor, since anything lower stops reading as padding.
       spacing: {
-        xs: "[--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(2)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(1)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(1)] (3)] (1)] (3)] (3)]",
-        sm: "[--frame-panel-px-base:--spacing(3)] [--frame-panel-py-base:--spacing(3.5)] [--frame-panel-header-px-base:--spacing(3)] [--frame-panel-header-py-base:--spacing(2.5)] [--frame-panel-footer-px-base:--spacing(3)] [--frame-panel-footer-py-base:--spacing(2.5)] (2)] (2)] (2)]",
+        xs: "[--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(2)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(0.5)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(0.5)]",
+        sm: "[--frame-panel-px-base:--spacing(3)] [--frame-panel-py-base:--spacing(3.5)] [--frame-panel-header-px-base:--spacing(3)] [--frame-panel-header-py-base:--spacing(1.5)] [--frame-panel-footer-px-base:--spacing(3)] [--frame-panel-footer-py-base:--spacing(1.5)]",
         default:
-          "[--frame-panel-px-base:--spacing(4)] [--frame-panel-py-base:--spacing(4)] [--frame-panel-header-px-base:--spacing(4)] [--frame-panel-header-py-base:--spacing(3)] [--frame-panel-footer-px-base:--spacing(4)] [--frame-panel-footer-py-base:--spacing(3)] (2)] (2)] (2)]",
-        lg: "[--frame-panel-px-base:--spacing(5)] [--frame-panel-py-base:--spacing(5)] [--frame-panel-header-px-base:--spacing(5)] [--frame-panel-header-py-base:--spacing(4)] [--frame-panel-footer-px-base:--spacing(5)] [--frame-panel-footer-py-base:--spacing(4)] (2)] (2)] (2)]",
+          "[--frame-panel-px-base:--spacing(4)] [--frame-panel-py-base:--spacing(4)] [--frame-panel-header-px-base:--spacing(4)] [--frame-panel-header-py-base:--spacing(2)] [--frame-panel-footer-px-base:--spacing(4)] [--frame-panel-footer-py-base:--spacing(2)]",
+        lg: "[--frame-panel-px-base:--spacing(5)] [--frame-panel-py-base:--spacing(5)] [--frame-panel-header-px-base:--spacing(5)] [--frame-panel-header-py-base:--spacing(2.5)] [--frame-panel-footer-px-base:--spacing(5)] [--frame-panel-footer-py-base:--spacing(2.5)]",
       },
       stacked: {
         true: [
@@ -55,8 +72,10 @@ const frameVariants = cva(
         ],
       },
       dense: {
-        // Positional rules must stay as parent selectors — cannot be expressed via CSS vars
-        true: "p-0 gap-0 border-[var(--frame-border-color)] [&_[data-slot=frame-panel]]:-mx-px [&_[data-slot=frame-panel]]:before:hidden [&_[data-slot=frame-panel]:last-child]:-mb-px [&:not(:has([data-slot=frame-panel-header]))_[data-slot=frame-panel]:is(:first-child)]:-mt-px",
+        // Positional rules must stay as parent selectors — cannot be expressed via CSS vars.
+        // Padding is 0 and panels are pulled flush to the frame edge (-mx-px), so
+        // their corners align with the frame radius rather than nesting inside it.
+        true: "p-0 gap-0 border-[var(--frame-border-color)] [--frame-panel-radius:var(--frame-radius)] [&_[data-slot=frame-panel]]:-mx-px [&_[data-slot=frame-panel]]:before:hidden [&_[data-slot=frame-panel]:last-child]:-mb-px [&:not(:has([data-slot=frame-panel-header]))_[data-slot=frame-panel]:is(:first-child)]:-mt-px",
         false: "",
       },
     },
@@ -101,10 +120,10 @@ function FramePanel({
         // bg-(--frame-panel-bg) and border-(--frame-panel-border-color) consume the
         // CSS vars set by the Frame parent. Any explicit bg-* or border-* class passed
         // via className overrides these by Tailwind source order - no ! needed.
-        "relative overflow-hidden rounded-(--frame-radius) border border-(--frame-panel-border-color) bg-(--frame-panel-bg) bg-clip-padding shadow-xs",
+        "relative overflow-hidden rounded-(--frame-panel-radius) border border-(--frame-panel-border-color) bg-(--frame-panel-bg) bg-clip-padding shadow-xs",
         // `fit` sizes the panel to its content; otherwise it grows to fill the frame.
         !fit && "grow",
-        "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-radius)-1px)] before:shadow-black/5",
+        "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-panel-radius)_-_1px)] before:shadow-black/5",
         "dark:bg-clip-border dark:before:shadow-white/5",
         "px-(--frame-panel-px) py-(--frame-panel-py)",
         className
diff --git a/apps/web/src/components/reui/kanban.tsx b/apps/web/src/components/reui/kanban.tsx
new file mode 100644
index 0000000..3f53a3f
--- /dev/null
+++ b/apps/web/src/components/reui/kanban.tsx
@@ -0,0 +1,948 @@
+import * as React from "react"
+import type { CSSProperties, ReactNode } from "react"
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import type {
+  DragCancelEvent,
+  DragEndEvent,
+  DragOverEvent,
+  DragStartEvent,
+  DropAnimation,
+  Modifiers,
+  UniqueIdentifier,
+} from "@dnd-kit/core"
+import {
+  defaultDropAnimationSideEffects,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  MeasuringStrategy,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DraggableAttributes,
+  type DraggableSyntheticListeners,
+} from "@dnd-kit/core"
+import {
+  arrayMove,
+  defaultAnimateLayoutChanges,
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+  type AnimateLayoutChanges,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { createPortal } from "react-dom"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+interface KanbanContextProps<T> {
+  columns: Record<string, T[]>
+  setColumns: (columns: Record<string, T[]>) => void
+  getItemId: (item: T) => string
+  columnIds: string[]
+  activeId: UniqueIdentifier | null
+  setActiveId: (id: UniqueIdentifier | null) => void
+  findContainer: (id: UniqueIdentifier) => string | undefined
+  isColumn: (id: UniqueIdentifier) => boolean
+  modifiers?: Modifiers
+}
+
+const KanbanContext = createContext<KanbanContextProps<any>>({
+  columns: {},
+  setColumns: () => {},
+  getItemId: () => "",
+  columnIds: [],
+  activeId: null,
+  setActiveId: () => {},
+  findContainer: () => undefined,
+  isColumn: () => false,
+  modifiers: undefined,
+})
+
+const ColumnContext = createContext<{
+  attributes: DraggableAttributes
+  listeners: DraggableSyntheticListeners | undefined
+  isDragging?: boolean
+  disabled?: boolean
+}>({
+  attributes: {} as DraggableAttributes,
+  listeners: undefined,
+  isDragging: false,
+  disabled: false,
+})
+
+const ItemContext = createContext<{
+  listeners: DraggableSyntheticListeners | undefined
+  isDragging?: boolean
+  disabled?: boolean
+}>({
+  listeners: undefined,
+  isDragging: false,
+  disabled: false,
+})
+
+const IsOverlayContext = createContext(false)
+
+const animateLayoutChanges: AnimateLayoutChanges = (args) =>
+  defaultAnimateLayoutChanges({ ...args, wasDragging: true })
+
+const dropAnimationConfig: DropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4",
+      },
+    },
+  }),
+}
+
+/**
+ * Client-mount gate for the `createPortal` call in KanbanOverlay, which needs
+ * `document.body` and so must not run on the server or during hydration.
+ *
+ * A never-notifying subscription makes `useSyncExternalStore` return the server
+ * snapshot (`false`) while rendering on the server and while hydrating, then the
+ * client snapshot (`true`) once mounted - the same gate the previous
+ * `useLayoutEffect(() => setMounted(true), [])` provided, minus the extra render
+ * pass that `react-hooks/set-state-in-effect` flags. All three functions are
+ * module-scoped so their identities stay stable; an inline `getSnapshot` is the
+ * classic cause of an infinite re-subscribe loop.
+ */
+const subscribeToNothing = () => () => {}
+const getIsMounted = () => true
+const getIsMountedOnServer = () => false
+
+const MOUSE_SENSOR_OPTIONS = { activationConstraint: { distance: 10 } }
+const TOUCH_SENSOR_OPTIONS = {
+  activationConstraint: { delay: 250, tolerance: 5 },
+}
+const KEYBOARD_SENSOR_OPTIONS = {
+  coordinateGetter: sortableKeyboardCoordinates,
+}
+const MEASURING_CONFIG = {
+  droppable: { strategy: MeasuringStrategy.Always },
+}
+
+export interface KanbanMoveEvent {
+  event: DragEndEvent
+  activeContainer: string
+  activeIndex: number
+  overContainer: string
+  overIndex: number
+}
+
+export interface KanbanCommitMeta<T> {
+  kind: "item" | "column"
+  event: DragEndEvent
+  activeContainer: string
+  activeIndex: number
+  overContainer: string
+  overIndex: number
+  previousValue: Record<string, T[]>
+}
+
+export interface KanbanRootProps<T> extends Omit<
+  useRender.ComponentProps<"div">,
+  "children" | "onDragStart" | "onDragEnd"
+> {
+  value: Record<string, T[]>
+  onValueChange: (value: Record<string, T[]>) => void
+  getItemValue: (item: T) => string
+  children: ReactNode
+  onMove?: (event: KanbanMoveEvent) => void
+  onValueCommit?: (
+    value: Record<string, T[]>,
+    meta: KanbanCommitMeta<T>
+  ) => void
+  restoreOnCancel?: boolean
+  onDragStart?: (event: DragStartEvent) => void
+  onDragEnd?: (event: DragEndEvent) => void
+  onDragCancel?: (event: DragCancelEvent) => void
+  accessibility?: React.ComponentProps<typeof DndContext>["accessibility"]
+  modifiers?: Modifiers
+}
+
+function Kanban<T>({
+  value,
+  onValueChange,
+  getItemValue,
+  children,
+  className,
+  render,
+  onMove,
+  onValueCommit,
+  restoreOnCancel = false,
+  onDragStart,
+  onDragEnd,
+  onDragCancel,
+  accessibility,
+  modifiers,
+  ...props
+}: KanbanRootProps<T>) {
+  const columns = value
+  const setColumns = onValueChange
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null)
+
+  // Always-current mirrors so the drag handlers can read fresh values without
+  // widening their dependency arrays (keeps handler identity stable). The
+  // handlers only fire after commit, so syncing the mirrors in an effect is
+  // safe — assigning to a ref during render breaks under concurrent rendering.
+  const valueRef = useRef(value)
+  const getItemValueRef = useRef(getItemValue)
+  useLayoutEffect(() => {
+    valueRef.current = value
+    getItemValueRef.current = getItemValue
+  })
+  const dragOriginRef = useRef<{
+    value: Record<string, T[]>
+    container: string | undefined
+    index: number
+  } | null>(null)
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, MOUSE_SENSOR_OPTIONS),
+    useSensor(TouchSensor, TOUCH_SENSOR_OPTIONS),
+    useSensor(KeyboardSensor, KEYBOARD_SENSOR_OPTIONS)
+  )
+
+  const columnIds = useMemo(() => {
+    const keys = Object.keys(columns)
+    if (process.env.NODE_ENV !== "production") {
+      const seen = new Set<string>()
+      for (const key of keys) {
+        for (const item of columns[key]) {
+          const itemId = getItemValue(item)
+          if (seen.has(itemId)) {
+            console.warn(
+              `[Kanban] Duplicate item id "${itemId}". Item ids must be unique across all columns, or drag and drop will misbehave.`
+            )
+            break
+          }
+          seen.add(itemId)
+        }
+      }
+    }
+    return keys
+  }, [columns, getItemValue])
+
+  const isColumn = useCallback(
+    (id: UniqueIdentifier) => columnIds.includes(id as string),
+    [columnIds]
+  )
+
+  const findContainer = useCallback(
+    (id: UniqueIdentifier) => {
+      if (isColumn(id)) return id as string
+      return columnIds.find((key) =>
+        columns[key].some((item) => getItemValue(item) === id)
+      )
+    },
+    [columns, columnIds, getItemValue, isColumn]
+  )
+
+  const commitChange = useCallback(
+    (
+      finalValue: Record<string, T[]>,
+      event: DragEndEvent,
+      kind: "item" | "column"
+    ) => {
+      if (!onValueCommit) return
+      const origin = dragOriginRef.current
+      if (!origin) return
+
+      const id = event.active.id
+
+      if (kind === "column") {
+        const keys = Object.keys(finalValue)
+        const overIndex = keys.indexOf(id as string)
+        if (overIndex === -1 || overIndex === origin.index) return
+        onValueCommit(finalValue, {
+          kind: "column",
+          event,
+          activeContainer: id as string,
+          activeIndex: origin.index,
+          overContainer: String(event.over?.id ?? id),
+          overIndex,
+          previousValue: origin.value,
+        })
+        return
+      }
+
+      const getId = getItemValueRef.current
+      let overContainer: string | undefined
+      let overIndex = -1
+      for (const key of Object.keys(finalValue)) {
+        const found = finalValue[key].findIndex((item) => getId(item) === id)
+        if (found !== -1) {
+          overContainer = key
+          overIndex = found
+          break
+        }
+      }
+      if (overContainer === undefined) return
+      if (overContainer === origin.container && overIndex === origin.index) {
+        return
+      }
+      onValueCommit(finalValue, {
+        kind: "item",
+        event,
+        activeContainer: origin.container ?? overContainer,
+        activeIndex: origin.index,
+        overContainer,
+        overIndex,
+        previousValue: origin.value,
+      })
+    },
+    [onValueCommit]
+  )
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      setActiveId(event.active.id)
+      onDragStart?.(event)
+
+      if (onValueCommit || restoreOnCancel) {
+        const snapshot = valueRef.current
+        const id = event.active.id
+        const keys = Object.keys(snapshot)
+        if (keys.includes(id as string)) {
+          dragOriginRef.current = {
+            value: snapshot,
+            container: id as string,
+            index: keys.indexOf(id as string),
+          }
+        } else {
+          const getId = getItemValueRef.current
+          let container: string | undefined
+          let index = -1
+          for (const key of keys) {
+            const found = snapshot[key].findIndex((item) => getId(item) === id)
+            if (found !== -1) {
+              container = key
+              index = found
+              break
+            }
+          }
+          dragOriginRef.current = { value: snapshot, container, index }
+        }
+      }
+    },
+    [onDragStart, onValueCommit, restoreOnCancel]
+  )
+
+  const handleDragOver = useCallback(
+    (event: DragOverEvent) => {
+      if (onMove) {
+        return
+      }
+
+      const { active, over } = event
+      if (!over) return
+
+      if (isColumn(active.id)) return
+
+      const activeContainer = findContainer(active.id)
+      const overContainer = findContainer(over.id)
+
+      if (!activeContainer || !overContainer) {
+        return
+      }
+
+      if (activeContainer !== overContainer) {
+        const activeItems = columns[activeContainer]
+        const overItems = columns[overContainer]
+
+        const activeIndex = activeItems.findIndex(
+          (item: T) => getItemValue(item) === active.id
+        )
+        let overIndex = overItems.findIndex(
+          (item: T) => getItemValue(item) === over.id
+        )
+
+        // If dropping on the column itself, not an item
+        if (isColumn(over.id)) {
+          overIndex = overItems.length
+        }
+
+        const newActiveItems = [...activeItems]
+        const newOverItems = [...overItems]
+        const [movedItem] = newActiveItems.splice(activeIndex, 1)
+        newOverItems.splice(overIndex, 0, movedItem)
+
+        setColumns({
+          ...columns,
+          [activeContainer]: newActiveItems,
+          [overContainer]: newOverItems,
+        })
+      } else {
+        const container = activeContainer
+        const activeIndex = columns[container].findIndex(
+          (item: T) => getItemValue(item) === active.id
+        )
+        const overIndex = columns[container].findIndex(
+          (item: T) => getItemValue(item) === over.id
+        )
+
+        if (activeIndex !== overIndex) {
+          setColumns({
+            ...columns,
+            [container]: arrayMove(columns[container], activeIndex, overIndex),
+          })
+        }
+      }
+    },
+    [findContainer, getItemValue, isColumn, setColumns, columns, onMove]
+  )
+
+  const handleDragCancel = useCallback(
+    (event: DragCancelEvent) => {
+      const origin = dragOriginRef.current
+
+      if (restoreOnCancel && origin && !onMove) {
+        // Escape/cancel: undo the live-preview reshuffle applied during dragOver.
+        setColumns(origin.value)
+      } else if (onValueCommit && origin && !onMove) {
+        // No restore requested: the live preview stays visible, so commit it.
+        commitChange(valueRef.current, event, "item")
+      }
+
+      dragOriginRef.current = null
+      setActiveId(null)
+      onDragCancel?.(event)
+    },
+    [
+      restoreOnCancel,
+      onMove,
+      onValueCommit,
+      setColumns,
+      onDragCancel,
+      commitChange,
+    ]
+  )
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+      setActiveId(null)
+      onDragEnd?.(event)
+
+      if (!over) {
+        // Released over nothing. In default mode the live preview during
+        // dragOver may have already moved the item, so commit the current value.
+        commitChange(valueRef.current, event, "item")
+        dragOriginRef.current = null
+        return
+      }
+
+      // Handle item move callback
+      if (onMove && !isColumn(active.id)) {
+        const activeContainer = findContainer(active.id)
+        const overContainer = findContainer(over.id)
+
+        if (activeContainer && overContainer) {
+          const activeIndex = columns[activeContainer].findIndex(
+            (item: T) => getItemValue(item) === active.id
+          )
+          const overIndex = isColumn(over.id)
+            ? columns[overContainer].length
+            : columns[overContainer].findIndex(
+                (item: T) => getItemValue(item) === over.id
+              )
+
+          onMove({
+            event,
+            activeContainer,
+            activeIndex,
+            overContainer,
+            overIndex,
+          })
+        }
+        // In onMove mode the consumer owns applying the item move, so do not
+        // fire onValueCommit for item moves; column reorders still commit below.
+        dragOriginRef.current = null
+        return
+      }
+
+      // Handle column reordering
+      if (isColumn(active.id) && isColumn(over.id)) {
+        const activeIndex = columnIds.indexOf(active.id as string)
+        const overIndex = columnIds.indexOf(over.id as string)
+        if (activeIndex !== overIndex) {
+          const newOrder = arrayMove(
+            Object.keys(columns),
+            activeIndex,
+            overIndex
+          )
+          const newColumns: Record<string, T[]> = {}
+          newOrder.forEach((key) => {
+            newColumns[key] = columns[key]
+          })
+          setColumns(newColumns)
+          commitChange(newColumns, event, "column")
+        }
+        dragOriginRef.current = null
+        return
+      }
+
+      // A column drag that ends over a non-column droppable is not an item move.
+      if (isColumn(active.id)) {
+        dragOriginRef.current = null
+        return
+      }
+
+      const activeContainer = findContainer(active.id)
+      const overContainer = findContainer(over.id)
+
+      // Handle item reordering within the same column
+      if (
+        activeContainer &&
+        overContainer &&
+        activeContainer === overContainer
+      ) {
+        const container = activeContainer
+        const activeIndex = columns[container].findIndex(
+          (item: T) => getItemValue(item) === active.id
+        )
+        const overIndex = columns[container].findIndex(
+          (item: T) => getItemValue(item) === over.id
+        )
+
+        if (activeIndex !== overIndex) {
+          const newColumns = {
+            ...columns,
+            [container]: arrayMove(columns[container], activeIndex, overIndex),
+          }
+          setColumns(newColumns)
+          commitChange(newColumns, event, "item")
+        } else {
+          // Cross-column moves are applied during dragOver, so the current
+          // value is already final.
+          commitChange(columns, event, "item")
+        }
+      } else {
+        commitChange(columns, event, "item")
+      }
+      dragOriginRef.current = null
+    },
+    [
+      columnIds,
+      columns,
+      findContainer,
+      getItemValue,
+      isColumn,
+      setColumns,
+      onMove,
+      onDragEnd,
+      commitChange,
+    ]
+  )
+
+  const contextValue = useMemo(
+    () => ({
+      columns,
+      setColumns,
+      getItemId: getItemValue,
+      columnIds,
+      activeId,
+      setActiveId,
+      findContainer,
+      isColumn,
+      modifiers,
+    }),
+    [
+      columns,
+      setColumns,
+      getItemValue,
+      columnIds,
+      activeId,
+      findContainer,
+      isColumn,
+      modifiers,
+    ]
+  )
+
+  const defaultProps = {
+    "data-slot": "kanban",
+    "data-dragging": activeId !== null,
+    className: cn(activeId !== null && "cursor-grabbing!", className),
+    children,
+  }
+
+  return (
+    <KanbanContext.Provider value={contextValue}>
+      <DndContext
+        sensors={sensors}
+        modifiers={modifiers}
+        accessibility={accessibility}
+        measuring={MEASURING_CONFIG}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+      >
+        {useRender({
+          defaultTagName: "div",
+          render,
+          props: mergeProps<"div">(defaultProps, props),
+        })}
+      </DndContext>
+    </KanbanContext.Provider>
+  )
+}
+
+export type KanbanBoardProps = useRender.ComponentProps<"div">
+
+function KanbanBoard({ className, render, ...props }: KanbanBoardProps) {
+  const { columnIds } = useContext(KanbanContext)
+
+  const defaultProps = {
+    "data-slot": "kanban-board",
+    className: cn("grid auto-rows-fr gap-4 sm:grid-cols-3", className),
+    children: props.children,
+  }
+
+  return (
+    <SortableContext items={columnIds} strategy={rectSortingStrategy}>
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </SortableContext>
+  )
+}
+
+export interface KanbanColumnProps extends useRender.ComponentProps<"div"> {
+  value: string
+  disabled?: boolean
+}
+
+function KanbanColumn({
+  value,
+  className,
+  render,
+  disabled,
+  ...props
+}: KanbanColumnProps) {
+  const isOverlay = useContext(IsOverlayContext)
+
+  const {
+    setNodeRef,
+    transform,
+    transition,
+    attributes,
+    listeners,
+    isDragging: isSortableDragging,
+  } = useSortable({
+    id: value,
+    disabled: disabled || isOverlay,
+    animateLayoutChanges,
+  })
+
+  // Hooks must run unconditionally; the derived value below is used only in the non-overlay branch.
+  const { activeId, isColumn } = useContext(KanbanContext)
+  const isColumnDragging = activeId ? isColumn(activeId) : false
+
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  } as CSSProperties
+
+  const defaultProps = isOverlay
+    ? {
+        "data-slot": "kanban-column",
+        "data-value": value,
+        "data-dragging": true,
+        className: cn("group/kanban-column flex flex-col", className),
+        children: props.children,
+      }
+    : {
+        "data-slot": "kanban-column",
+        "data-value": value,
+        "data-dragging": isSortableDragging,
+        "data-disabled": disabled,
+        ref: setNodeRef,
+        style,
+        className: cn(
+          "group/kanban-column flex flex-col",
+          isSortableDragging && "opacity-50 z-50",
+          disabled && "opacity-50",
+          className
+        ),
+        children: props.children,
+      }
+
+  return (
+    <ColumnContext.Provider
+      value={
+        isOverlay
+          ? {
+              attributes: {} as DraggableAttributes,
+              listeners: undefined,
+              isDragging: true,
+              disabled: false,
+            }
+          : { attributes, listeners, isDragging: isColumnDragging, disabled }
+      }
+    >
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </ColumnContext.Provider>
+  )
+}
+
+export interface KanbanColumnHandleProps extends useRender.ComponentProps<"div"> {
+  cursor?: boolean
+}
+
+function KanbanColumnHandle({
+  className,
+  render,
+  cursor = true,
+  ...props
+}: KanbanColumnHandleProps) {
+  const { attributes, listeners, isDragging, disabled } =
+    useContext(ColumnContext)
+
+  const defaultProps = {
+    "data-slot": "kanban-column-handle",
+    "data-dragging": isDragging,
+    "data-disabled": disabled,
+    ...attributes,
+    ...listeners,
+    className: cn(
+      "opacity-0 transition-opacity group-hover/kanban-column:opacity-100",
+      cursor && (isDragging ? "cursor-grabbing!" : "cursor-grab!"),
+      className
+    ),
+    children: props.children,
+  }
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  })
+}
+
+export interface KanbanItemProps extends useRender.ComponentProps<"div"> {
+  value: string
+  disabled?: boolean
+}
+
+function KanbanItem({
+  value,
+  className,
+  render,
+  disabled,
+  ...props
+}: KanbanItemProps) {
+  const isOverlay = useContext(IsOverlayContext)
+
+  const {
+    setNodeRef,
+    transform,
+    transition,
+    attributes,
+    listeners,
+    isDragging: isSortableDragging,
+  } = useSortable({
+    id: value,
+    disabled: disabled || isOverlay,
+    animateLayoutChanges,
+  })
+
+  // Hooks must run unconditionally; the derived value below is used only in the non-overlay branch.
+  const { activeId, isColumn } = useContext(KanbanContext)
+  const isItemDragging = activeId ? !isColumn(activeId) : false
+
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  } as CSSProperties
+
+  const defaultProps = isOverlay
+    ? {
+        "data-slot": "kanban-item",
+        "data-value": value,
+        "data-dragging": true,
+        className: cn(className),
+        children: props.children,
+      }
+    : {
+        "data-slot": "kanban-item",
+        "data-value": value,
+        "data-dragging": isSortableDragging,
+        "data-disabled": disabled,
+        ref: setNodeRef,
+        style,
+        ...attributes,
+        className: cn(
+          isSortableDragging && "opacity-50 z-50",
+          disabled && "opacity-50",
+          className
+        ),
+        children: props.children,
+      }
+
+  return (
+    <ItemContext.Provider
+      value={
+        isOverlay
+          ? { listeners: undefined, isDragging: true, disabled: false }
+          : { listeners, isDragging: isItemDragging, disabled }
+      }
+    >
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </ItemContext.Provider>
+  )
+}
+
+export interface KanbanItemHandleProps extends useRender.ComponentProps<"div"> {
+  cursor?: boolean
+}
+
+function KanbanItemHandle({
+  className,
+  render,
+  cursor = true,
+  ...props
+}: KanbanItemHandleProps) {
+  const { listeners, isDragging, disabled } = useContext(ItemContext)
+
+  const defaultProps = {
+    "data-slot": "kanban-item-handle",
+    "data-dragging": isDragging,
+    "data-disabled": disabled,
+    ...listeners,
+    className: cn(
+      cursor && (isDragging ? "cursor-grabbing!" : "cursor-grab!"),
+      className
+    ),
+    children: props.children,
+  }
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  })
+}
+
+export interface KanbanColumnContentProps extends useRender.ComponentProps<"div"> {
+  value: string
+}
+
+function KanbanColumnContent({
+  value,
+  className,
+  render,
+  ...props
+}: KanbanColumnContentProps) {
+  const { columns, getItemId } = useContext(KanbanContext)
+
+  const itemIds = useMemo(() => {
+    const items = columns[value]
+    if (!items) {
+      throw new Error(
+        `KanbanColumnContent: column "${value}" was not found in the Kanban value. ` +
+          `Available columns: ${Object.keys(columns).join(", ") || "(none)"}.`
+      )
+    }
+    return items.map(getItemId)
+  }, [columns, getItemId, value])
+
+  const defaultProps = {
+    "data-slot": "kanban-column-content",
+    className: cn("flex flex-col gap-2", className),
+    children: props.children,
+  }
+
+  return (
+    <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </SortableContext>
+  )
+}
+
+export interface KanbanOverlayProps extends Omit<
+  React.ComponentProps<typeof DragOverlay>,
+  "children"
+> {
+  children?:
+    | ReactNode
+    | ((params: {
+        value: UniqueIdentifier
+        variant: "column" | "item"
+      }) => ReactNode)
+}
+
+function KanbanOverlay({ children, className, ...props }: KanbanOverlayProps) {
+  const { activeId, isColumn, modifiers } = useContext(KanbanContext)
+  const mounted = useSyncExternalStore(
+    subscribeToNothing,
+    getIsMounted,
+    getIsMountedOnServer
+  )
+
+  const variant = activeId ? (isColumn(activeId) ? "column" : "item") : "item"
+
+  const content =
+    activeId && children
+      ? typeof children === "function"
+        ? children({ value: activeId, variant })
+        : children
+      : null
+
+  if (!mounted) return null
+
+  return createPortal(
+    <DragOverlay
+      dropAnimation={dropAnimationConfig}
+      modifiers={modifiers}
+      className={cn("z-50", activeId && "cursor-grabbing", className)}
+      {...props}
+    >
+      <IsOverlayContext.Provider value={true}>
+        {content}
+      </IsOverlayContext.Provider>
+    </DragOverlay>,
+    document.body
+  )
+}
+
+export {
+  Kanban,
+  KanbanBoard,
+  KanbanColumn,
+  KanbanColumnHandle,
+  KanbanItem,
+  KanbanItemHandle,
+  KanbanColumnContent,
+  KanbanOverlay,
+}
\ No newline at end of file
diff --git a/apps/web/src/components/reui/number-field.tsx b/apps/web/src/components/reui/number-field.tsx
index b499f9b..f3d0531 100644
--- a/apps/web/src/components/reui/number-field.tsx
+++ b/apps/web/src/components/reui/number-field.tsx
@@ -1,6 +1,8 @@
-import { createContext, ReactNode, useContext, useId } from "react"
+import type { ReactNode } from "react"
+import { createContext, useContext, useId } from "react"
 import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
-import { cva, VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
 
 import { cn } from "@evobgp/ui/lib/utils"
 import { Label } from "@evobgp/ui/components/label"
@@ -17,8 +19,7 @@ const numberFieldGroupVariants = cva(
     variants: {
       size: {
         sm: "h-7 text-sm",
-        default:
-          "h-8 text-sm",
+        default: "h-8 text-sm",
         lg: "h-9 text-sm",
       },
     },
@@ -33,10 +34,10 @@ const numberFieldButtonVariants = cva(
   {
     variants: {
       size: {
-        sm: "px-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        sm: "px-1.5 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-3.5 [&_svg:not([class*='size-'])]:size-3.5 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-3 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-3.5",
         default:
-          "px-2 [&_svg:not([class*='size-'])]:size-4",
-        lg: "px-2.5 [&_svg:not([class*='size-'])]:size-4",
+          "px-2 ([class*='size-'])]:size-4 ([class*='size-'])]:size-4 [&_svg:not([class*='size-'])]:size-4 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5",
+        lg: "px-2.5 ([class*='size-'])]:size-4 ([class*='size-'])]:size-4 [&_svg:not([class*='size-'])]:size-4 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5 ([class*='size-'])]:size-4 ([class*='size-'])]:size-3.5",
       },
     },
     defaultVariants: {
@@ -51,8 +52,7 @@ const numberFieldInputVariants = cva(
     variants: {
       size: {
         sm: "px-2 py-0.5",
-        default:
-          "px-2.5 py-1",
+        default: "px-2.5 py-1",
         lg: "px-2.5 py-1.5",
       },
     },
diff --git a/apps/web/src/components/reui/rating.tsx b/apps/web/src/components/reui/rating.tsx
index e52118c..932d013 100644
--- a/apps/web/src/components/reui/rating.tsx
+++ b/apps/web/src/components/reui/rating.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { useState } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
diff --git a/apps/web/src/components/reui/sortable.tsx b/apps/web/src/components/reui/sortable.tsx
new file mode 100644
index 0000000..19e4124
--- /dev/null
+++ b/apps/web/src/components/reui/sortable.tsx
@@ -0,0 +1,461 @@
+"use client"
+
+import * as React from "react"
+import type { CSSProperties, ReactElement, ReactNode } from "react"
+import {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+} from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import type {
+  DragCancelEvent,
+  DragEndEvent,
+  DragStartEvent,
+  DropAnimation,
+  Modifiers,
+  UniqueIdentifier,
+} from "@dnd-kit/core"
+import {
+  defaultDropAnimationSideEffects,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  MeasuringStrategy,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DraggableSyntheticListeners,
+} from "@dnd-kit/core"
+import {
+  arrayMove,
+  defaultAnimateLayoutChanges,
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+  type AnimateLayoutChanges,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { createPortal } from "react-dom"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+// Sortable Item Context
+const SortableItemContext = createContext<{
+  listeners: DraggableSyntheticListeners | undefined
+  isDragging?: boolean
+  disabled?: boolean
+}>({
+  listeners: undefined,
+  isDragging: false,
+  disabled: false,
+})
+
+const IsOverlayContext = createContext(false)
+
+const SortableInternalContext = createContext<{
+  activeId: UniqueIdentifier | null
+  modifiers?: Modifiers
+}>({
+  activeId: null,
+  modifiers: undefined,
+})
+
+const animateLayoutChanges: AnimateLayoutChanges = (args) =>
+  defaultAnimateLayoutChanges({ ...args, wasDragging: true })
+
+const dropAnimationConfig: DropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4",
+      },
+    },
+  }),
+}
+
+/**
+ * Client-mount gate for the `createPortal` calls below, which need
+ * `document.body` and so must not run on the server or during hydration.
+ *
+ * A never-notifying subscription makes `useSyncExternalStore` return the server
+ * snapshot (`false`) while rendering on the server and while hydrating, then the
+ * client snapshot (`true`) once mounted - the same gate the previous
+ * `useLayoutEffect(() => setMounted(true), [])` provided, minus the extra render
+ * pass that `react-hooks/set-state-in-effect` flags. All three functions are
+ * module-scoped so their identities stay stable; an inline `getSnapshot` is the
+ * classic cause of an infinite re-subscribe loop.
+ */
+const subscribeToNothing = () => () => {}
+const getIsMounted = () => true
+const getIsMountedOnServer = () => false
+
+const MOUSE_SENSOR_OPTIONS = { activationConstraint: { distance: 10 } }
+const TOUCH_SENSOR_OPTIONS = {
+  activationConstraint: { delay: 250, tolerance: 5 },
+}
+const KEYBOARD_SENSOR_OPTIONS = {
+  coordinateGetter: sortableKeyboardCoordinates,
+}
+const MEASURING_CONFIG = {
+  droppable: { strategy: MeasuringStrategy.Always },
+}
+const STRATEGY_MAP = {
+  horizontal: rectSortingStrategy,
+  grid: rectSortingStrategy,
+  vertical: verticalListSortingStrategy,
+} as const
+
+// Multipurpose Sortable Component
+export interface SortableCommitMeta<T> {
+  event: DragEndEvent
+  activeIndex: number
+  overIndex: number
+  previousValue: T[]
+}
+
+export interface SortableRootProps<T> extends Omit<
+  useRender.ComponentProps<"div">,
+  "onDragStart" | "onDragEnd" | "children"
+> {
+  value: T[]
+  onValueChange: (value: T[]) => void
+  getItemValue: (item: T) => string
+  children: ReactNode
+  onMove?: (event: {
+    event: DragEndEvent
+    activeIndex: number
+    overIndex: number
+  }) => void
+  onValueCommit?: (value: T[], meta: SortableCommitMeta<T>) => void
+  strategy?: "horizontal" | "vertical" | "grid"
+  onDragStart?: (event: DragStartEvent) => void
+  onDragEnd?: (event: DragEndEvent) => void
+  onDragCancel?: (event: DragCancelEvent) => void
+  accessibility?: React.ComponentProps<typeof DndContext>["accessibility"]
+  modifiers?: Modifiers
+}
+
+function Sortable<T>({
+  value,
+  onValueChange,
+  getItemValue,
+  className,
+  render,
+  onMove,
+  onValueCommit,
+  strategy = "vertical",
+  onDragStart,
+  onDragEnd,
+  onDragCancel,
+  accessibility,
+  modifiers,
+  children,
+  ...props
+}: SortableRootProps<T>) {
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null)
+  const mounted = useSyncExternalStore(
+    subscribeToNothing,
+    getIsMounted,
+    getIsMountedOnServer
+  )
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, MOUSE_SENSOR_OPTIONS),
+    useSensor(TouchSensor, TOUCH_SENSOR_OPTIONS),
+    useSensor(KeyboardSensor, KEYBOARD_SENSOR_OPTIONS)
+  )
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      setActiveId(event.active.id)
+      onDragStart?.(event)
+    },
+    [onDragStart]
+  )
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+      setActiveId(null)
+      onDragEnd?.(event)
+
+      if (!over) return
+
+      // Handle item reordering
+      const activeIndex = value.findIndex(
+        (item: T) => getItemValue(item) === active.id
+      )
+      const overIndex = value.findIndex(
+        (item: T) => getItemValue(item) === over.id
+      )
+
+      if (activeIndex === -1 || overIndex === -1) return
+
+      if (activeIndex !== overIndex) {
+        if (onMove) {
+          onMove({ event, activeIndex, overIndex })
+        } else {
+          const newValue = arrayMove(value, activeIndex, overIndex)
+          onValueChange(newValue)
+          onValueCommit?.(newValue, {
+            event,
+            activeIndex,
+            overIndex,
+            previousValue: value,
+          })
+        }
+      }
+    },
+    [value, getItemValue, onValueChange, onMove, onDragEnd, onValueCommit]
+  )
+
+  const handleDragCancel = useCallback(
+    (event: DragCancelEvent) => {
+      setActiveId(null)
+      onDragCancel?.(event)
+    },
+    [onDragCancel]
+  )
+
+  const itemIds = useMemo(() => {
+    const ids = value.map(getItemValue)
+    if (process.env.NODE_ENV !== "production") {
+      const seen = new Set<string>()
+      for (const id of ids) {
+        if (seen.has(id)) {
+          console.warn(
+            `[Sortable] Duplicate item id "${id}". Item ids must be unique, or drag and drop will misbehave.`
+          )
+          break
+        }
+        seen.add(id)
+      }
+    }
+    return ids
+  }, [value, getItemValue])
+
+  const contextValue = useMemo(
+    () => ({ activeId, modifiers }),
+    [activeId, modifiers]
+  )
+
+  const defaultProps = {
+    "data-slot": "sortable",
+    "data-dragging": activeId !== null,
+    className: cn(activeId !== null && "cursor-grabbing!", className),
+    children,
+  }
+
+  // Find the active child for the overlay
+  const overlayContent = useMemo(() => {
+    if (!activeId) return null
+    let result: ReactNode = null
+    Children.forEach(children, (child) => {
+      if (isValidElement(child) && (child.props as any).value === activeId) {
+        result = cloneElement(child as ReactElement<any>, {
+          ...(child.props as any),
+          className: cn((child.props as any).className, "z-50"),
+        })
+      }
+    })
+    return result
+  }, [activeId, children])
+
+  return (
+    <SortableInternalContext.Provider value={contextValue}>
+      <DndContext
+        sensors={sensors}
+        modifiers={modifiers}
+        accessibility={accessibility}
+        measuring={MEASURING_CONFIG}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+      >
+        <SortableContext
+          items={itemIds}
+          strategy={STRATEGY_MAP[strategy] ?? verticalListSortingStrategy}
+        >
+          {useRender({
+            defaultTagName: "div",
+            render,
+            props: mergeProps<"div">(defaultProps, props),
+          })}
+        </SortableContext>
+        {mounted &&
+          createPortal(
+            <DragOverlay
+              dropAnimation={dropAnimationConfig}
+              modifiers={modifiers}
+              className={cn("z-50", activeId && "cursor-grabbing")}
+            >
+              <IsOverlayContext.Provider value={true}>
+                {overlayContent}
+              </IsOverlayContext.Provider>
+            </DragOverlay>,
+            document.body
+          )}
+      </DndContext>
+    </SortableInternalContext.Provider>
+  )
+}
+
+export interface SortableItemProps extends useRender.ComponentProps<"div"> {
+  value: string
+  disabled?: boolean
+}
+
+function SortableItem({
+  value,
+  className,
+  render,
+  disabled,
+  ...props
+}: SortableItemProps) {
+  const isOverlay = useContext(IsOverlayContext)
+
+  const {
+    setNodeRef,
+    transform,
+    transition,
+    attributes,
+    listeners,
+    isDragging: isSortableDragging,
+  } = useSortable({
+    id: value,
+    disabled: disabled || isOverlay,
+    animateLayoutChanges,
+  })
+
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  } as CSSProperties
+
+  const defaultProps = isOverlay
+    ? {
+        "data-slot": "sortable-item",
+        "data-value": value,
+        "data-dragging": true,
+        className: cn(className),
+        children: props.children,
+      }
+    : {
+        "data-slot": "sortable-item",
+        "data-value": value,
+        "data-dragging": isSortableDragging,
+        "data-disabled": disabled,
+        ref: setNodeRef,
+        style,
+        ...attributes,
+        className: cn(
+          isSortableDragging && "opacity-50 z-50",
+          disabled && "opacity-50",
+          className
+        ),
+        children: props.children,
+      }
+
+  return (
+    <SortableItemContext.Provider
+      value={
+        isOverlay
+          ? { listeners: undefined, isDragging: true, disabled: false }
+          : { listeners, isDragging: isSortableDragging, disabled }
+      }
+    >
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </SortableItemContext.Provider>
+  )
+}
+
+export interface SortableItemHandleProps extends useRender.ComponentProps<"div"> {
+  cursor?: boolean
+}
+
+function SortableItemHandle({
+  className,
+  render,
+  cursor = true,
+  ...props
+}: SortableItemHandleProps) {
+  const { listeners, isDragging, disabled } = useContext(SortableItemContext)
+
+  const defaultProps = {
+    "data-slot": "sortable-item-handle",
+    "data-dragging": isDragging,
+    "data-disabled": disabled,
+    ...listeners,
+    className: cn(
+      cursor && (isDragging ? "cursor-grabbing!" : "cursor-grab!"),
+      className
+    ),
+    children: props.children,
+  }
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  })
+}
+
+export interface SortableOverlayProps extends Omit<
+  React.ComponentProps<typeof DragOverlay>,
+  "children"
+> {
+  children?: ReactNode | ((params: { value: UniqueIdentifier }) => ReactNode)
+}
+
+function SortableOverlay({
+  children,
+  className,
+  ...props
+}: SortableOverlayProps) {
+  const { activeId, modifiers } = useContext(SortableInternalContext)
+  const mounted = useSyncExternalStore(
+    subscribeToNothing,
+    getIsMounted,
+    getIsMountedOnServer
+  )
+
+  const content =
+    activeId && children
+      ? typeof children === "function"
+        ? children({ value: activeId })
+        : children
+      : null
+
+  if (!mounted) return null
+
+  return createPortal(
+    <DragOverlay
+      dropAnimation={dropAnimationConfig}
+      modifiers={modifiers}
+      className={cn("z-50", activeId && "cursor-grabbing", className)}
+      {...props}
+    >
+      <IsOverlayContext.Provider value={true}>
+        {content}
+      </IsOverlayContext.Provider>
+    </DragOverlay>,
+    document.body
+  )
+}
+
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/timeline.tsx b/apps/web/src/components/reui/timeline.tsx
index 4df72e4..15ad665 100644
--- a/apps/web/src/components/reui/timeline.tsx
+++ b/apps/web/src/components/reui/timeline.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { createContext, useCallback, useContext, useState } from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
diff --git a/apps/web/src/components/schedule/schedule-agenda-panel.tsx b/apps/web/src/components/schedule/schedule-agenda-panel.tsx
index afb2092..7b746fd 100644
--- a/apps/web/src/components/schedule/schedule-agenda-panel.tsx
+++ b/apps/web/src/components/schedule/schedule-agenda-panel.tsx
@@ -1,69 +1,112 @@
-import { useMemo, useState } from 'react'
-import { format, isSameDay, parseISO } from 'date-fns'
+import { useMemo } from 'react'
+import { addHours, parseISO } from 'date-fns'
 import { ru } from 'date-fns/locale'
-import { CalendarDays, Clock } from 'lucide-react'
 
-import { IllustratedEmptyState } from '@/components/patterns/illustrated-empty-state'
-import { PanelCard, panelCardContentFlushClassName } from '@/components/panel-card'
-import { StatusBadge } from '@/components/status-badge'
-import { Item } from '@evobgp/ui/components/item'
-import { ScrollArea } from '@evobgp/ui/components/scroll-area'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@evobgp/ui/components/select'
-import { cn } from '@evobgp/ui/lib/utils'
-import { isRefreshJobKind, jobKindRu } from '@/lib/ui-labels'
+  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'
 
-import { ScheduleCalendarView } from './schedule-calendar-view'
+/**
+ * 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
+ */
 
-type JobFilter = 'all' | 'refresh' | 'failed'
-
-const FILTER_ITEMS: { value: JobFilter; label: string }[] = [
-  { value: 'all', label: 'Все задачи' },
-  { value: 'refresh', label: 'Обновление' },
-  { value: 'failed', label: 'С ошибкой' },
-]
+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 matchesFilter(job: JobRow, filter: JobFilter): boolean {
-  if (filter === 'refresh') return isRefreshJobKind(job.kind)
-  if (filter === 'failed')
-    return ['failed', 'error', 'cancelled'].includes(job.status.toLowerCase())
-  return true
+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 ScheduleJobCard({ job }: { job: JobRow }) {
-  const ts = jobTimestamp(job)
-  const timeLabel = ts
-    ? format(parseISO(ts), 'd MMM · HH:mm', { locale: ru })
-    : '—'
-
-  return (
-    <Item variant="outline" size="xs" className="flex items-start gap-3 py-3">
-      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-        <p className="text-foreground text-sm leading-tight font-medium">{jobKindRu(job.kind)}</p>
-        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-          <StatusBadge status={job.status} />
-          <span className="text-muted-foreground flex items-center gap-1 text-xs">
-            <Clock className="size-3 shrink-0" aria-hidden />
-            {timeLabel}
-          </span>
-        </div>
-        <p className="text-muted-foreground font-mono text-xs">{job.job_id}</p>
-      </div>
-    </Item>
-  )
+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
 }
 
-/** schedule-1 layout: calendar column + day job list. */
 export function ScheduleAgendaPanel({
   jobs,
   isLoading,
@@ -71,105 +114,30 @@ export function ScheduleAgendaPanel({
   jobs: JobRow[]
   isLoading?: boolean
 }) {
-  const [date, setDate] = useState<Date>(new Date())
-  const [filter, setFilter] = useState<JobFilter>('all')
-
-  const markedDays = useMemo(() => {
-    const days = new Set<string>()
-    for (const job of jobs) {
-      const raw = jobTimestamp(job)
-      if (!raw) continue
-      try {
-        days.add(format(parseISO(raw), 'yyyy-MM-dd'))
-      } catch {
-        /* skip */
-      }
-    }
-    return days
-  }, [jobs])
-
-  const dayJobs = useMemo(
-    () =>
-      jobs.filter((job) => {
-        const raw = jobTimestamp(job)
-        if (!raw) return false
-        try {
-          return isSameDay(parseISO(raw), date) && matchesFilter(job, filter)
-        } catch {
-          return false
-        }
-      }),
-    [jobs, date, filter],
-  )
-
-  const headingLabel = format(date, 'EEEE, d MMMM', { locale: ru })
+  const events = useMemo(() => jobsToEvents(jobs), [jobs])
 
   return (
-    <PanelCard
-      title="Календарь задач"
-      description="Задачи обновления и применения по дням"
-      contentClassName={cn(panelCardContentFlushClassName, 'p-0')}
-    >
-      <div className="flex flex-col lg:flex-row">
-        <div className="border-border shrink-0 border-b p-5 lg:w-[370px] lg:border-r lg:border-b-0">
-          <ScheduleCalendarView
-            selected={date}
-            onSelect={(d) => d && setDate(d)}
-            datesWithEvents={markedDays}
-          />
-        </div>
-
-        <div className="flex min-w-0 flex-1 flex-col gap-4 p-5">
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
-            <div className="min-w-0">
-              <h2 className="text-foreground text-sm font-semibold capitalize">{headingLabel}</h2>
-              <p className="text-muted-foreground text-xs">
-                {isLoading
-                  ? 'Загрузка…'
-                  : dayJobs.length > 0
-                    ? `${dayJobs.length} ${dayJobs.length === 1 ? 'задача' : dayJobs.length < 5 ? 'задачи' : 'задач'}`
-                    : 'Нет задач за выбранный день'}
-              </p>
-            </div>
-            <Select value={filter} onValueChange={(v) => v && setFilter(v as JobFilter)}>
-              <SelectTrigger size="sm" className="w-full sm:w-44">
-                <SelectValue>
-                  {FILTER_ITEMS.find((item) => item.value === filter)?.label}
-                </SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                {FILTER_ITEMS.map((item) => (
-                  <SelectItem key={item.value} value={item.value}>
-                    {item.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="min-h-[280px]">
-            {isLoading ? (
-              <p className="text-muted-foreground text-sm">Загрузка задач…</p>
-            ) : dayJobs.length === 0 ? (
-              <IllustratedEmptyState
-                icon={CalendarDays}
-                title="Нет задач"
-                description={`За ${format(date, 'd MMMM yyyy', { locale: ru })} задачи не найдены. Выберите другой день или измените фильтр.`}
-              />
-            ) : (
-              <ScrollArea className="max-h-[320px] pr-3">
-                <ul className="space-y-2.5">
-                  {dayJobs.map((job) => (
-                    <li key={job.job_id}>
-                      <ScheduleJobCard job={job} />
-                    </li>
-                  ))}
-                </ul>
-              </ScrollArea>
-            )}
-          </div>
-        </div>
-      </div>
-    </PanelCard>
+    <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/schedule/schedule-calendar-view.tsx b/apps/web/src/components/schedule/schedule-calendar-view.tsx
deleted file mode 100644
index 2e32267..0000000
--- a/apps/web/src/components/schedule/schedule-calendar-view.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { useState, type ComponentPropsWithoutRef } from 'react'
-import { DayButton } from 'react-day-picker'
-import { format } from 'date-fns'
-import { ru } from 'date-fns/locale'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-
-import { cn } from '@evobgp/ui/lib/utils'
-import { Button } from '@evobgp/ui/components/button'
-import { Calendar, CalendarDayButton } from '@evobgp/ui/components/calendar'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@evobgp/ui/components/select'
-
-const MONTHS_RU = Array.from({ length: 12 }, (_, i) =>
-  format(new Date(2024, i, 1), 'LLLL', { locale: ru }),
-)
-
-const CURRENT_YEAR = new Date().getFullYear()
-const YEARS = Array.from({ length: 11 }, (_, i) => CURRENT_YEAR - 5 + i)
-
-const TODAY_WEEKDAY = format(new Date(), 'EEEEEE', { locale: ru }).toUpperCase()
-
-export function ScheduleCalendarView({
-  selected,
-  onSelect,
-  datesWithEvents = new Set<string>(),
-}: {
-  selected: Date | undefined
-  onSelect: (date: Date | undefined) => void
-  datesWithEvents?: Set<string>
-}) {
-  const [month, setMonth] = useState<Date>(selected ?? new Date())
-
-  const stepMonth = (delta: number) =>
-    setMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + delta, 1))
-
-  const handleMonthSelect = (value: string) => {
-    const i = MONTHS_RU.indexOf(value)
-    if (i >= 0) setMonth(new Date(month.getFullYear(), i, 1))
-  }
-
-  const handleYearSelect = (value: string) => {
-    const y = parseInt(value, 10)
-    if (!Number.isNaN(y)) setMonth(new Date(y, month.getMonth(), 1))
-  }
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-4 select-none">
-      <div className="flex w-full grow items-center justify-between gap-1">
-        <Button
-          variant="ghost"
-          size="sm"
-          className="size-7 shrink-0 p-0"
-          onClick={() => stepMonth(-1)}
-          aria-label="Предыдущий месяц"
-        >
-          <ChevronLeft className="size-3.5" aria-hidden />
-        </Button>
-
-        <Select
-          value={MONTHS_RU[month.getMonth()]}
-          onValueChange={(value) => value && handleMonthSelect(value)}
-        >
-          <SelectTrigger size="sm" className="min-w-0 flex-1 capitalize">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {MONTHS_RU.map((m) => (
-              <SelectItem key={m} value={m} className="capitalize">
-                {m}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select
-          value={String(month.getFullYear())}
-          onValueChange={(value) => value && handleYearSelect(value)}
-        >
-          <SelectTrigger size="sm" className="w-22 shrink-0">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {YEARS.map((y) => (
-              <SelectItem key={y} value={String(y)}>
-                {y}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Button
-          variant="ghost"
-          size="sm"
-          className="size-7 shrink-0 p-0"
-          onClick={() => stepMonth(1)}
-          aria-label="Следующий месяц"
-        >
-          <ChevronRight className="size-3.5" aria-hidden />
-        </Button>
-      </div>
-
-      <Calendar
-        mode="single"
-        selected={selected}
-        onSelect={onSelect}
-        month={month}
-        onMonthChange={setMonth}
-        locale={ru}
-        showOutsideDays
-        hideNavigation
-        className="w-full bg-transparent p-0 md:[--cell-size:--spacing(11)]"
-        formatters={{
-          formatWeekdayName: (date) =>
-            date.toLocaleString('ru-RU', { weekday: 'short' }).replace('.', '').toUpperCase(),
-        }}
-        classNames={{
-          month_caption: 'hidden',
-          nav: 'hidden',
-          weekdays: 'flex gap-1',
-          weekday:
-            'flex-1 flex items-center justify-center h-6 text-[0.65rem] font-medium text-muted-foreground',
-          week: 'flex gap-1 mt-1',
-          day: 'flex-1 aspect-square p-0',
-          day_button: cn(
-            'bg-muted/50 hover:bg-muted rounded-md',
-            'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-primary data-[selected-single=true]:hover:text-primary-foreground!',
-          ),
-          outside: 'opacity-60',
-          disabled: 'opacity-60',
-          today: cn('bg-accent text-foreground rounded-md'),
-        }}
-        components={{
-          Weekday: ({ children, className: cls, ...props }: ComponentPropsWithoutRef<'th'>) => {
-            const isToday = children === TODAY_WEEKDAY
-            return (
-              <th
-                scope="col"
-                className={cn(
-                  'flex h-6! flex-1 items-center justify-center rounded-md text-xs font-medium',
-                  isToday ? 'bg-accent text-foreground!' : 'text-muted-foreground',
-                  cls,
-                )}
-                {...props}
-              >
-                {children}
-              </th>
-            )
-          },
-          DayButton: ({
-            children,
-            modifiers,
-            day,
-            ...props
-          }: React.ComponentProps<typeof DayButton>) => {
-            const dateKey = format(day.date, 'yyyy-MM-dd')
-            const hasEvents = !modifiers.outside && datesWithEvents.has(dateKey)
-
-            return (
-              <CalendarDayButton day={day} modifiers={modifiers} {...props}>
-                {hasEvents ? (
-                  <span
-                    className="bg-primary text-primary-foreground in-data-[selected-single=true]:bg-primary-foreground! size-1 rounded-full"
-                    aria-hidden
-                  />
-                ) : (
-                  <span className="size-1" aria-hidden />
-                )}
-                {children}
-              </CalendarDayButton>
-            )
-          },
-        }}
-      />
-    </div>
-  )
-}
diff --git a/apps/web/src/components/schedule/schedule-jobs-card.tsx b/apps/web/src/components/schedule/schedule-jobs-card.tsx
index 50427e7..bc8bb4b 100644
--- a/apps/web/src/components/schedule/schedule-jobs-card.tsx
+++ b/apps/web/src/components/schedule/schedule-jobs-card.tsx
@@ -1,33 +1,9 @@
-import { useMemo, useState } from 'react'
-
-import { FrameDataGrid } from '@/components/reui-kit'
 import { QueryState } from '@/components/query-state'
-import { TableSkeleton } from '@/components/skeletons'
-import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
-import { isRefreshJobKind } from '@/lib/ui-labels'
 import type { JobRow } from '@/types/api'
 
 import { ScheduleJobsGrid } from './schedule-jobs-grid'
 
-type JobTab = 'all' | 'refresh' | 'failed'
-
-function filterJobs(items: JobRow[], tab: JobTab): JobRow[] {
-  if (tab === 'refresh') return items.filter((j) => isRefreshJobKind(j.kind))
-  if (tab === 'failed')
-    return items.filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
-  return items
-}
-
-function tabCounts(items: JobRow[]) {
-  return {
-    all: items.length,
-    refresh: items.filter((j) => isRefreshJobKind(j.kind)).length,
-    failed: items.filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
-      .length,
-  }
-}
-
-/** Jobs data-grid with status tabs (data-grid-filtering pattern). */
+/** Jobs ResourcePage with status tabs (data-grid-filtering-2). */
 export function ScheduleJobsCard({
   jobs,
   isLoading,
@@ -41,38 +17,18 @@ export function ScheduleJobsCard({
   error: unknown
   onRetry: () => void
 }) {
-  const [tab, setTab] = useState<JobTab>('all')
-  const counts = useMemo(() => tabCounts(jobs), [jobs])
-  const filtered = useMemo(() => filterJobs(jobs, tab), [jobs, tab])
-
   return (
-    <FrameDataGrid title="Задачи" description="Последние задачи из API">
-      <div className="px-5 pt-3">
-        <Tabs value={tab} onValueChange={(v) => setTab(v as JobTab)} className="w-full">
-          <TabsList variant="line" className="w-full justify-start gap-6">
-            <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
-            <TabsTrigger value="refresh">Обновление ({counts.refresh})</TabsTrigger>
-            <TabsTrigger value="failed">С ошибкой ({counts.failed})</TabsTrigger>
-          </TabsList>
-        </Tabs>
-      </div>
-      <QueryState
-        data={filtered}
-        isLoading={isLoading}
-        isError={isError}
-        error={error}
-        empty={filtered.length === 0}
-        emptyTitle="Нет задач в выборке"
-        skeleton={<TableSkeleton rows={6} cols={5} />}
-        onRetry={onRetry}
-      >
-        {(items) => (
-          <ScheduleJobsGrid
-            items={items}
-            isLoading={isLoading && items.length > 0}
-          />
-        )}
-      </QueryState>
-    </FrameDataGrid>
+    <QueryState
+      data={jobs}
+      isLoading={isLoading}
+      isError={isError}
+      error={error}
+      empty={false}
+      onRetry={onRetry}
+    >
+      {(items) => (
+        <ScheduleJobsGrid items={items} isLoading={isLoading && items.length > 0} />
+      )}
+    </QueryState>
   )
 }
diff --git a/apps/web/src/components/schedule/schedule-jobs-grid.tsx b/apps/web/src/components/schedule/schedule-jobs-grid.tsx
index 2476320..377f5bc 100644
--- a/apps/web/src/components/schedule/schedule-jobs-grid.tsx
+++ b/apps/web/src/components/schedule/schedule-jobs-grid.tsx
@@ -1,14 +1,36 @@
-import { ColumnDef } from '@tanstack/react-table'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
+import { ListTodo, SearchIcon } from 'lucide-react'
 
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
-import { jobKindRu } from '@/lib/ui-labels'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
+import { isRefreshJobKind, jobKindRu } from '@/lib/ui-labels'
 import type { JobRow } from '@/types/api'
 
+const FAILED_STATUSES = ['failed', 'error', 'cancelled']
+
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Поиск задач…',
+  },
+]
+
+function tabFilter(item: JobRow, tabId: string): boolean {
+  if (tabId === 'refresh') return isRefreshJobKind(item.kind)
+  if (tabId === 'failed') return FAILED_STATUSES.includes(item.status.toLowerCase())
+  return true
+}
+
 export function ScheduleJobsGrid({
   items,
   isLoading = false,
@@ -16,12 +38,35 @@ export function ScheduleJobsGrid({
   items: JobRow[]
   isLoading?: boolean
 }) {
-  const columns = useMemo<ColumnDef<JobRow>[]>(
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
+
+  const tabs = useMemo(
+    () => [
+      { id: 'all', label: 'Все', count: items.length },
+      {
+        id: 'refresh',
+        label: 'Обновление',
+        count: items.filter((job) => isRefreshJobKind(job.kind)).length,
+      },
+      {
+        id: 'failed',
+        label: 'С ошибкой',
+        count: items.filter((job) => FAILED_STATUSES.includes(job.status.toLowerCase())).length,
+      },
+    ],
+    [items],
+  )
+
+  const columns = useMemo<DataGridColumnDef<JobRow>[]>(
     () => [
       {
         accessorKey: 'kind',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Вид" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={jobKindRu(row.original.kind)} />,
+        cell: ({ row }) => (
+          <DataGridNameCell icon={ListTodo} title={jobKindRu(row.original.kind)} />
+        ),
         meta: { headerTitle: 'Вид' },
       },
       {
@@ -77,23 +122,26 @@ export function ScheduleJobsGrid({
     [],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) => `${jobKindRu(row.kind)} ${row.status} ${row.error ?? ''}`,
-    getRowId: (row) => row.job_id,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title="Задачи"
+      description="Последние задачи из API"
+      tabs={tabs}
+      tabFilter={tabFilter}
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(item, field) => {
+        if (field !== 'search') return undefined
+        return `${jobKindRu(item.kind)} ${item.status} ${item.error ?? ''} ${item.job_id}`
+      }}
+      columns={columns}
+      data={items}
+      getRowId={(row) => row.job_id}
       isLoading={isLoading}
-      emptyMessage="Нет задач"
-      showPagination={items.length > 10}
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск задач…"
+      virtualization={items.length > 80}
+      emptyState={{ title: 'Нет задач в выборке' }}
     />
   )
 }
diff --git a/apps/web/src/components/schedule/schedule-modules-grid.tsx b/apps/web/src/components/schedule/schedule-modules-grid.tsx
index 30253d1..0db07e0 100644
--- a/apps/web/src/components/schedule/schedule-modules-grid.tsx
+++ b/apps/web/src/components/schedule/schedule-modules-grid.tsx
@@ -1,33 +1,56 @@
-import { ColumnDef } from '@tanstack/react-table'
-import { RefreshCw } from 'lucide-react'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
+import { Boxes, RefreshCw, SearchIcon } from 'lucide-react'
 
 import { CategoryBadge, ModeBadge } from '@/components/category-badge'
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMonoCell, DataGridMutedCell, DataGridNameCell } from '@/components/data-grid-cell'
 import { LoadingButton } from '@/components/loading-button'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
 
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Поиск модулей…',
+  },
+]
+
 export function ScheduleModulesGrid({
   items,
   refreshing,
   onRefresh,
   isLoading = false,
+  isError = false,
+  error = null,
+  onRetry,
 }: {
   items: ModuleRow[]
   refreshing: Record<string, boolean>
   onRefresh: (id: string) => void
   isLoading?: boolean
+  isError?: boolean
+  error?: Error | null
+  onRetry?: () => void
 }) {
-  const columns = useMemo<ColumnDef<ModuleRow>[]>(
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
+
+  const columns = useMemo<DataGridColumnDef<ModuleRow>[]>(
     () => [
       {
         accessorKey: 'name',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Модуль" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={row.original.name} accent="primary" />,
+        cell: ({ row }) => <DataGridNameCell icon={Boxes} title={row.original.name} />,
         meta: { headerTitle: 'Модуль' },
       },
       {
@@ -41,10 +64,10 @@ export function ScheduleModulesGrid({
         accessorFn: (row) => row.cron_expr ?? String(row.refresh_interval_sec ?? ''),
         header: ({ column }) => <DataGridColumnHeader column={column} title="Расписание" />,
         cell: ({ row }) => (
-          <span className="font-mono text-xs text-muted-foreground">
+          <DataGridMonoCell className="text-xs text-muted-foreground">
             {row.original.cron_expr ??
               (row.original.refresh_interval_sec ? `${row.original.refresh_interval_sec} с` : '—')}
-          </span>
+          </DataGridMonoCell>
         ),
         meta: { headerTitle: 'Расписание' },
       },
@@ -93,22 +116,27 @@ export function ScheduleModulesGrid({
     [onRefresh, refreshing],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) => `${row.name} ${row.type} ${row.enabled ? 'вкл' : 'выкл'}`,
-    getRowId: (row) => row.id,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title="Модули"
+      description="Расписание обновления и ручной запуск"
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(item, field) => {
+        if (field !== 'search') return undefined
+        return `${item.name} ${item.type} ${item.enabled ? 'вкл' : 'выкл'}`
+      }}
+      columns={columns}
+      data={items}
+      getRowId={(row) => row.id}
       isLoading={isLoading}
-      emptyMessage="Нет модулей"
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск модулей…"
+      isError={isError}
+      error={error}
+      onRetry={onRetry}
+      pinLastColumn
+      emptyState={{ title: 'Нет модулей' }}
     />
   )
 }
diff --git a/apps/web/src/components/settings/bird-settings-tab.tsx b/apps/web/src/components/settings/bird-settings-tab.tsx
index d59175e..f59eeec 100644
--- a/apps/web/src/components/settings/bird-settings-tab.tsx
+++ b/apps/web/src/components/settings/bird-settings-tab.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Input } from '@evobgp/ui/components/input'
-import { FrameDataGrid } from '@/components/reui-kit'
 import { SelectMenu } from '@/components/select-field'
 import { SettingsCard } from '@/components/settings/settings-card'
 import { SettingsFieldGroup } from '@/components/settings/settings-field-group'
@@ -314,28 +313,13 @@ export function BirdSettingsTab() {
         </QueryState>
       </SettingsCard>
 
-      <FrameDataGrid
-        title="Дополнительные параметры"
-        description="Параметры вне стандартных групп (только чтение — изменяются через API)"
-      >
-        <QueryState
-          data={partitioned?.additional ?? []}
-          isLoading={settingsQ.isLoading}
-          isError={settingsQ.isError}
-          error={settingsQ.error}
-          empty={(partitioned?.additional ?? []).length === 0}
-          emptyTitle="Нет дополнительных параметров"
-          skeleton={<div className="h-32" />}
-          onRetry={() => settingsQ.refetch()}
-        >
-          {(items) => (
-            <SettingsKvGrid
-              items={items}
-              isLoading={settingsQ.isFetching && !settingsQ.isLoading}
-            />
-          )}
-        </QueryState>
-      </FrameDataGrid>
+      <SettingsKvGrid
+        items={partitioned?.additional ?? []}
+        isLoading={settingsQ.isLoading}
+        isError={settingsQ.isError}
+        error={settingsQ.error instanceof Error ? settingsQ.error : null}
+        onRetry={() => void settingsQ.refetch()}
+      />
     </div>
   )
 }
diff --git a/apps/web/src/components/settings/settings-kv-grid.tsx b/apps/web/src/components/settings/settings-kv-grid.tsx
index 1c39472..e133519 100644
--- a/apps/web/src/components/settings/settings-kv-grid.tsx
+++ b/apps/web/src/components/settings/settings-kv-grid.tsx
@@ -1,10 +1,14 @@
-import { ColumnDef } from '@tanstack/react-table'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
+import { SearchIcon } from 'lucide-react'
 
-import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridMonoCell } from '@/components/data-grid-cell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
-import { useClientDataGrid } from '@/hooks/use-client-data-grid'
+import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
+import {
+  ResourcePage,
+  createTextFilterQuery,
+  type DataGridColumnDef,
+} from '@/components/reui-kit'
 
 export interface SettingsKvRow {
   id: string | number
@@ -12,49 +16,72 @@ export interface SettingsKvRow {
   value: string
 }
 
+const filterFields: FilterField[] = [
+  {
+    id: 'search',
+    label: 'Поиск',
+    icon: <SearchIcon className="size-3.5" aria-hidden />,
+    type: 'text',
+    placeholder: 'Поиск настроек…',
+  },
+]
+
 export function SettingsKvGrid({
   items,
   isLoading = false,
+  isError = false,
+  error = null,
+  onRetry,
 }: {
   items: SettingsKvRow[]
   isLoading?: boolean
+  isError?: boolean
+  error?: Error | null
+  onRetry?: () => void
 }) {
-  const columns = useMemo<ColumnDef<SettingsKvRow>[]>(
+  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
+    createTextFilterQuery('search'),
+  )
+
+  const columns = useMemo<DataGridColumnDef<SettingsKvRow>[]>(
     () => [
       {
         accessorKey: 'key',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Ключ" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={row.original.key} accent="mono" />,
+        cell: ({ row }) => <DataGridMonoCell>{row.original.key}</DataGridMonoCell>,
         meta: { headerTitle: 'Ключ' },
       },
       {
         accessorKey: 'value',
         header: ({ column }) => <DataGridColumnHeader column={column} title="Значение" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={row.original.value} accent="mono" />,
+        cell: ({ row }) => <DataGridMonoCell>{row.original.value}</DataGridMonoCell>,
         meta: { headerTitle: 'Значение' },
       },
     ],
     [],
   )
 
-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
-    data: items,
-    columns,
-    getSearchText: (row) => `${row.key} ${row.value}`,
-    getRowId: (row) => String(row.id),
-    pageSize: 25,
-  })
-
   return (
-    <DataGridSection
-      table={table}
-      recordCount={filteredCount}
+    <ResourcePage
+      title="Дополнительные параметры"
+      description="Параметры вне стандартных групп (только чтение — изменяются через API)"
+      filterFields={filterFields}
+      filterQuery={filterQuery}
+      onFilterQueryChange={setFilterQuery}
+      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
+      getFilterFieldValue={(item, field) => {
+        if (field !== 'search') return undefined
+        return `${item.key} ${item.value}`
+      }}
+      columns={columns}
+      data={items}
+      getRowId={(row) => String(row.id)}
       isLoading={isLoading}
-      emptyMessage="Нет дополнительных настроек"
-      showPagination={items.length > 10}
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск настроек…"
+      isError={isError}
+      error={error}
+      onRetry={onRetry}
+      pageSize={25}
+      emptyState={{ title: 'Нет дополнительных настроек' }}
     />
   )
 }
diff --git a/apps/web/src/components/settings/settings-page-shell.tsx b/apps/web/src/components/settings/settings-page-shell.tsx
index 5f44747..05920e3 100644
--- a/apps/web/src/components/settings/settings-page-shell.tsx
+++ b/apps/web/src/components/settings/settings-page-shell.tsx
@@ -78,10 +78,10 @@ function SettingsNavigation({
 }
 
 /**
- * Unified settings — settings-7 AccountSettings 1:1 (header + vertical Tabs).
+ * Unified settings — settings-3 / settings-16 (header + vertical Tabs).
  * Surface of cards stays Frame (`SettingsCard`), not shadcn Card.
- * @see https://reui.io/preview/base/settings-7
- * @see https://reui.io/blocks
+ * @see https://reui.io/preview/base/settings-3
+ * @see https://reui.io/preview/base/settings-16
  * @see https://reui.io/docs/components/base/frame
  */
 export function SettingsPageShell({
diff --git a/apps/web/src/components/settings/settings-tabs-data.tsx b/apps/web/src/components/settings/settings-tabs-data.tsx
index 9046146..f4d76d1 100644
--- a/apps/web/src/components/settings/settings-tabs-data.tsx
+++ b/apps/web/src/components/settings/settings-tabs-data.tsx
@@ -9,7 +9,7 @@ export type SettingsTabItem = {
   icon: ReactNode
 }
 
-/** Side rail items — settings-7 AccountSettings DNA. */
+/** Side rail items — settings-16 DNA. */
 export const SETTINGS_TAB_ITEMS: SettingsTabItem[] = [
   {
     value: 'ui',
diff --git a/apps/web/src/components/ui/svgs/supabase.tsx b/apps/web/src/components/ui/svgs/supabase.tsx
index bee6dd3..d1f37b8 100644
--- a/apps/web/src/components/ui/svgs/supabase.tsx
+++ b/apps/web/src/components/ui/svgs/supabase.tsx
@@ -4,11 +4,11 @@ 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(#paint0_linear)"
+      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(#paint1_linear)"
+      fill="url(#supabase-paint1_linear)"
       fillOpacity="0.2"
     />
     <path
@@ -17,7 +17,7 @@ const Supabase = (props: SVGProps<SVGSVGElement>) => (
     />
     <defs>
       <linearGradient
-        id="paint0_linear"
+        id="supabase-paint0_linear"
         x1="53.9738"
         y1="54.974"
         x2="94.1635"
@@ -28,7 +28,7 @@ const Supabase = (props: SVGProps<SVGSVGElement>) => (
         <stop offset="1" stopColor="#3ECF8E" />
       </linearGradient>
       <linearGradient
-        id="paint1_linear"
+        id="supabase-paint1_linear"
         x1="36.1558"
         y1="30.578"
         x2="54.4844"
diff --git a/apps/web/src/hooks/use-client-data-grid.ts b/apps/web/src/hooks/use-client-data-grid.ts
deleted file mode 100644
index fd472b4..0000000
--- a/apps/web/src/hooks/use-client-data-grid.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useMemo, useState } from 'react'
-import {
-  type ColumnDef,
-  type FilterFn,
-  type TableOptions,
-  useReactTable,
-} from '@tanstack/react-table'
-
-import {
-  createClientDataGridOptions,
-  createTextGlobalFilter,
-} from '@/lib/data-grid-defaults'
-
-interface UseClientDataGridOptions<TData extends object> {
-  data: TData[]
-  columns: ColumnDef<TData>[]
-  getSearchText: (row: TData) => string
-  getRowId: (row: TData) => string
-  pageSize?: number
-  tableOptions?: Partial<TableOptions<TData>>
-  globalFilterFn?: FilterFn<TData>
-}
-
-export function useClientDataGrid<TData extends object>({
-  data,
-  columns,
-  getSearchText,
-  getRowId,
-  pageSize = 10,
-  tableOptions,
-  globalFilterFn,
-}: UseClientDataGridOptions<TData>) {
-  const [globalFilter, setGlobalFilter] = useState('')
-
-  const filterFn = useMemo(
-    () => globalFilterFn ?? createTextGlobalFilter(getSearchText),
-    [getSearchText, globalFilterFn],
-  )
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: { globalFilter },
-    onGlobalFilterChange: setGlobalFilter,
-    globalFilterFn: filterFn,
-    ...createClientDataGridOptions<TData>({
-      initialState: { pagination: { pageSize } },
-      ...tableOptions,
-    }),
-    getRowId,
-  })
-
-  const filteredCount = table.getFilteredRowModel().rows.length
-
-  return {
-    table,
-    globalFilter,
-    setGlobalFilter,
-    filteredCount,
-  }
-}
diff --git a/apps/web/src/lib/data-grid-defaults.ts b/apps/web/src/lib/data-grid-defaults.ts
index 8d68f61..9fc4dc4 100644
--- a/apps/web/src/lib/data-grid-defaults.ts
+++ b/apps/web/src/lib/data-grid-defaults.ts
@@ -1,25 +1,3 @@
-import {
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type FilterFn,
-  type TableOptions,
-} from '@tanstack/react-table'
-
-import type { DataGridProps } from '@/components/reui/data-grid/data-grid'
-
-export const DATA_GRID_TABLE_LAYOUT: NonNullable<DataGridProps<object>['tableLayout']> = {
-  dense: false,
-  headerSticky: true,
-  rowBorder: true,
-}
-
-/** REUI c-data-grid-19 edge cell padding. */
-export const DATA_GRID_TABLE_CLASS_NAMES: NonNullable<DataGridProps<object>['tableClassNames']> = {
-  edgeCell: 'px-5',
-}
-
 export const DATA_GRID_PAGINATION_RU = {
   sizes: [10, 25, 50] as number[],
   sizesLabel: 'Показать',
@@ -40,41 +18,3 @@ export const DATA_GRID_MESSAGES_RU = {
   unpinRowLabel: 'Открепить строку',
   allRecordsLoadedMessage: 'Все записи загружены',
 }
-
-export const DATA_GRID_DENSE_LAYOUT: NonNullable<DataGridProps<object>['tableLayout']> = {
-  ...DATA_GRID_TABLE_LAYOUT,
-  dense: true,
-  width: 'auto',
-}
-
-export function createTextGlobalFilter<TData extends object>(
-  getSearchText: (row: TData) => string,
-): FilterFn<TData> {
-  return (row, _columnId, filterValue) => {
-    const query = String(filterValue ?? '')
-      .toLowerCase()
-      .trim()
-    if (!query) return true
-    return getSearchText(row.original).toLowerCase().includes(query)
-  }
-}
-
-export function createClientDataGridOptions<TData extends object>(
-  overrides?: Partial<TableOptions<TData>>,
-): Pick<
-  TableOptions<TData>,
-  | 'getCoreRowModel'
-  | 'getFilteredRowModel'
-  | 'getSortedRowModel'
-  | 'getPaginationRowModel'
-  | 'initialState'
-> {
-  return {
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    initialState: { pagination: { pageSize: 10 } },
-    ...overrides,
-  }
-}
diff --git a/apps/web/src/lib/filters-i18n.ts b/apps/web/src/lib/filters-i18n.ts
index 7f97611..4d60fb9 100644
--- a/apps/web/src/lib/filters-i18n.ts
+++ b/apps/web/src/lib/filters-i18n.ts
@@ -1,94 +1,85 @@
 import {
-  DEFAULT_I18N,
-  type FilterI18nConfig,
-} from '@/components/reui/filters'
+  DEFAULT_FILTER_OPERATOR_LABELS,
+  type FilterOperatorLabels,
+} from '@/components/reui/filters/filters-operators'
+import type { FilterLabels } from '@/components/reui/filters/filters-types'
 
-const OPERATOR_LABEL_RU: Record<string, string> = {
-  is: 'равно',
-  is_not: 'не равно',
-  is_any_of: 'любое из',
-  is_not_any_of: 'кроме',
-  includes_all: 'включает все',
-  excludes_all: 'исключает все',
-  before: 'до',
-  after: 'после',
-  between: 'между',
-  not_between: 'вне диапазона',
+export const FILTERS_LABELS_RU: Partial<FilterLabels> = {
+  addFilter: 'Фильтр',
+  advancedFilter: 'Расширенный фильтр',
+  showRecords: 'В этом виде показывать записи',
+  builderEmpty: 'Фильтров пока нет',
+  builderEmptyHint: 'Добавьте фильтр, чтобы сузить выборку.',
+  addCondition: 'Добавить фильтр',
+  addConditionGroup: 'Добавить группу',
+  addToGroup: 'Добавить фильтр в эту группу',
+  removeGroup: 'Удалить группу',
+  wrapInGroup: 'Обернуть в группу',
+  ungroup: 'Разгруппировать',
+  moveToTopLevel: 'На верхний уровень',
+  moveToGroup: (position) => `Переместить в группу ${position}`,
+  reorder: 'Порядок',
+  reorderHint: 'Alt + стрелки вверх/вниз меняют порядок',
+  groupAll: 'Все следующие условия истинны…',
+  groupAny: 'Любое из следующих условий истинно…',
+  groupPlaceholder: 'Перетащите фильтры сюда',
+  clearAll: 'Сбросить все',
+  groupMenu: 'Параметры группы',
+  searchFields: 'Поиск полей…',
+  searchOperators: 'Поиск операторов…',
+  searchOptions: 'Поиск…',
+  back: 'Назад',
+  clear: 'Очистить',
+  apply: 'Применить',
+  discard: 'Отменить изменения',
+  empty: 'Нет результатов',
+  loading: 'Загрузка…',
+  loadingMore: 'Загрузка…',
+  loadMore: 'Ещё',
+  error: 'Не удалось загрузить',
+  retry: 'Повторить',
+  where: 'Где',
+  and: 'И',
+  or: 'Или',
+  combinator: 'Изменить связку',
+  duplicate: 'Дублировать',
+  negate: 'Инвертировать',
+  convertToAdvanced: 'Расширенный редактор',
+  remove: 'Удалить',
+  filtersLabel: 'Фильтры',
+  readOnly: 'Только чтение. Эти фильтры нельзя изменить.',
+  valuePlaceholder: 'введите текст…',
+  selectPlaceholder: 'Выбрать…',
+  noValue: 'нет значения',
+  selectCondition: 'Выберите условие',
+  incomplete: 'незавершённый фильтр',
+}
+
+export const FILTERS_OPERATOR_LABELS_RU: FilterOperatorLabels = {
+  ...DEFAULT_FILTER_OPERATOR_LABELS,
   contains: 'содержит',
   not_contains: 'не содержит',
   starts_with: 'начинается с',
   ends_with: 'заканчивается на',
-  equals: 'равно',
-  not_equals: 'не равно',
-  greater_than: 'больше',
-  less_than: 'меньше',
-  overlaps: 'пересекается',
-  includes: 'включает',
-  excludes: 'исключает',
+  is: 'равно',
+  is_not: 'не равно',
+  is_any_of: 'любое из',
+  is_none_of: 'кроме',
+  has_any_of: 'есть любое из',
+  has_all_of: 'есть все',
+  has_none_of: 'нет ни одного',
+  eq: 'равно',
+  neq: 'не равно',
+  gt: 'больше',
+  gte: 'больше или равно',
+  lt: 'меньше',
+  lte: 'меньше или равно',
+  between: 'между',
+  not_between: 'вне диапазона',
+  is_before: 'до',
+  is_after: 'после',
+  is_on_or_before: 'не позже',
+  is_on_or_after: 'не раньше',
   empty: 'пусто',
   not_empty: 'не пусто',
 }
-
-export const FILTERS_I18N_RU: FilterI18nConfig = {
-  ...DEFAULT_I18N,
-  addFilter: 'Фильтр',
-  searchFields: 'Фильтр…',
-  noFieldsFound: 'Поля не найдены.',
-  noResultsFound: 'Ничего не найдено.',
-  select: 'Выбрать…',
-  true: 'Да',
-  false: 'Нет',
-  min: 'Мин.',
-  max: 'Макс.',
-  to: '—',
-  typeAndPressEnter: 'Введите и нажмите Enter',
-  selected: 'выбрано',
-  selectedCount: 'выбрано',
-  addFilterTitle: 'Добавить фильтр',
-  operators: {
-    ...DEFAULT_I18N.operators,
-    is: 'равно',
-    isNot: 'не равно',
-    isAnyOf: 'любое из',
-    isNotAnyOf: 'кроме',
-    includesAll: 'включает все',
-    excludesAll: 'исключает все',
-    before: 'до',
-    after: 'после',
-    between: 'между',
-    notBetween: 'вне диапазона',
-    contains: 'содержит',
-    notContains: 'не содержит',
-    startsWith: 'начинается с',
-    endsWith: 'заканчивается на',
-    isExactly: 'точно',
-    equals: 'равно',
-    notEquals: 'не равно',
-    greaterThan: 'больше',
-    lessThan: 'меньше',
-    overlaps: 'пересекается',
-    includes: 'включает',
-    excludes: 'исключает',
-    includesAllOf: 'включает все',
-    includesAnyOf: 'включает любое',
-    empty: 'пусто',
-    notEmpty: 'не пусто',
-  },
-  placeholders: {
-    enterField: (fieldType: string) => `Введите ${fieldType}…`,
-    selectField: 'Выбрать…',
-    searchField: (fieldName: string) => `Поиск ${fieldName.toLowerCase()}…`,
-    enterKey: 'Введите ключ…',
-    enterValue: 'Введите значение…',
-  },
-  helpers: {
-    formatOperator: (operator: string) =>
-      OPERATOR_LABEL_RU[operator] ?? operator.replace(/_/g, ' '),
-  },
-  validation: {
-    invalidEmail: 'Некорректный email',
-    invalidUrl: 'Некорректный URL',
-    invalidTel: 'Некорректный телефон',
-    invalid: 'Некорректное значение',
-  },
-}
diff --git a/apps/web/src/lib/ui-surface.ts b/apps/web/src/lib/ui-surface.ts
index 3857e4e..54f8586 100644
--- a/apps/web/src/lib/ui-surface.ts
+++ b/apps/web/src/lib/ui-surface.ts
@@ -3,7 +3,7 @@
  *
  * Ops / list / dashboard / detail / settings: **Frame** only.
  * KPI tiles: **stats-12** via `KpiStatGrid` / `reui-kit/KpiStatGrid`.
- * Lists: Frame + DataGrid (`ResourcePage` / `DataGridSection`), not Card shell.
+ * Lists: Frame + DataGrid (`ResourcePage` / `FrameDataGrid`), not Card shell.
  *
  * @see https://reui.io/preview/base/stats-12
  * @see https://reui.io/preview/base/dashboard-1
diff --git a/apps/web/src/routes/_auth/dashboard.tsx b/apps/web/src/routes/_auth/dashboard.tsx
index f540342..0bf0455 100644
--- a/apps/web/src/routes/_auth/dashboard.tsx
+++ b/apps/web/src/routes/_auth/dashboard.tsx
@@ -14,7 +14,7 @@ import { DashboardOperationsBreakdown } from '@/components/dashboard/dashboard-o
 import { DashboardQuickLinks } from '@/components/dashboard/dashboard-quick-links'
 import { DashboardRecentJobsGrid } from '@/components/dashboard/dashboard-recent-jobs-grid'
 import { DashboardRecentRevisionsGrid } from '@/components/dashboard/dashboard-recent-revisions-grid'
-import { FrameDataGrid, OpsDashboard } from '@/components/reui-kit'
+import { OpsDashboard } from '@/components/reui-kit'
 import { chartPanelGridClassName, dashboardMainSidebarClassName } from '@/lib/ui-surface'
 import {
   moduleNameById,
@@ -121,26 +121,16 @@ function DashboardComponent() {
       queueDescription="Последние фоновые операции и история конфигураций"
       queue={
         <div className={chartPanelGridClassName}>
-          <FrameDataGrid
-            title="Недавние задачи"
-            description="Последние фоновые операции"
-          >
             {activityLoading ? (
               <Skeleton className="m-4 h-24 w-auto" />
             ) : (
               <DashboardRecentJobsGrid jobs={jobs.slice(0, 8)} nameById={nameById} isLoading={refreshing} />
             )}
-          </FrameDataGrid>
-          <FrameDataGrid
-            title="Последние ревизии"
-            description="История конфигураций"
-          >
             {activityLoading ? (
               <Skeleton className="m-4 h-24 w-auto" />
             ) : (
               <DashboardRecentRevisionsGrid revisions={revisions} isLoading={refreshing} />
             )}
-          </FrameDataGrid>
         </div>
       }
     />
diff --git a/apps/web/src/routes/_auth/directories.tsx b/apps/web/src/routes/_auth/directories.tsx
index 5597935..f4f4722 100644
--- a/apps/web/src/routes/_auth/directories.tsx
+++ b/apps/web/src/routes/_auth/directories.tsx
@@ -16,7 +16,7 @@ import {
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
 import { Badge } from '@/components/reui/badge'
-import { FrameDataGrid, KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
+import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
 import { SectionCardsSkeleton, TableSkeleton } from '@/components/skeletons'
 import { sessionCanWriteDirectories } from '@/lib/auth'
 import { authSessionQueryOptions } from '@/queries/auth'
@@ -141,19 +141,12 @@ function DirectoriesComponent() {
         ]}
       >
         <TabsContent value="communities" className="mt-0">
-          <FrameDataGrid
-            title="BGP community"
-            description="Теги для префиксов в фильтрах BIRD"
-            actions={addCommunityButton}
-          >
             <QueryState
               data={communities}
               isLoading={communitiesQ.isLoading}
               isError={communitiesQ.isError}
               error={communitiesQ.error}
-              empty={communities.length === 0}
-              emptyTitle="Нет community"
-              emptyAction={addCommunityButton}
+              empty={false}
               skeleton={<TableSkeleton rows={4} cols={3} />}
               onRetry={() => communitiesQ.refetch()}
             >
@@ -163,26 +156,19 @@ function DirectoriesComponent() {
                   isLoading={communitiesQ.isFetching && !communitiesQ.isLoading}
                   canWrite={canWrite}
                   onEdit={openEditCommunity}
+                  actions={addCommunityButton}
                 />
               )}
             </QueryState>
-          </FrameDataGrid>
         </TabsContent>
 
         <TabsContent value="doh" className="mt-0">
-          <FrameDataGrid
-            title="DoH профили"
-            description="Резолверы DNS-over-HTTPS для доменных модулей"
-            actions={addDohButton}
-          >
             <QueryState
               data={dohProfiles}
               isLoading={dohQ.isLoading}
               isError={dohQ.isError}
               error={dohQ.error}
-              empty={dohProfiles.length === 0}
-              emptyTitle="Нет DoH профилей"
-              emptyAction={addDohButton}
+              empty={false}
               skeleton={<TableSkeleton rows={4} cols={3} />}
               onRetry={() => dohQ.refetch()}
             >
@@ -192,10 +178,10 @@ function DirectoriesComponent() {
                   isLoading={dohQ.isFetching && !dohQ.isLoading}
                   canWrite={canWrite}
                   onEdit={openEditDoh}
+                  actions={addDohButton}
                 />
               )}
             </QueryState>
-          </FrameDataGrid>
         </TabsContent>
       </BadgeTabs>
 
diff --git a/apps/web/src/routes/_auth/modules/index.tsx b/apps/web/src/routes/_auth/modules/index.tsx
index 8c5e541..85eee14 100644
--- a/apps/web/src/routes/_auth/modules/index.tsx
+++ b/apps/web/src/routes/_auth/modules/index.tsx
@@ -4,7 +4,6 @@ import { Plus, RefreshCw } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
 
-import { FrameDataGrid } from '@/components/reui-kit'
 import { ProjectsEmptyState } from '@/components/patterns/projects-empty-state'
 import { ModuleCreateDialog } from '@/components/modules/module-create-dialog'
 import { ModulesListGrid } from '@/components/modules/modules-list-grid'
@@ -66,40 +65,36 @@ function ModulesListComponent() {
         }
       />
 
-      <FrameDataGrid
-        title="Все модули"
-        actions={
-          canWrite ? (
-            <Button size="sm" onClick={() => setCreateOpen(true)}>
-              <Plus />
-              Создать
-            </Button>
-          ) : undefined
+      <QueryState
+        data={query.data?.items}
+        isLoading={query.isLoading}
+        isError={query.isError}
+        error={query.error}
+        empty={query.data?.items?.length === 0}
+        emptyContent={
+          <ProjectsEmptyState
+            canCreate={canWrite}
+            onCreate={() => setCreateOpen(true)}
+          />
         }
+        skeleton={<TableSkeleton rows={6} cols={5} />}
+        onRetry={() => query.refetch()}
       >
-        <QueryState
-          data={query.data?.items}
-          isLoading={query.isLoading}
-          isError={query.isError}
-          error={query.error}
-          empty={query.data?.items?.length === 0}
-          emptyContent={
-            <ProjectsEmptyState
-              canCreate={canWrite}
-              onCreate={() => setCreateOpen(true)}
-            />
-          }
-          skeleton={<TableSkeleton rows={6} cols={5} />}
-          onRetry={() => query.refetch()}
-        >
-          {(items) => (
-            <ModulesListGrid
-              items={items}
-              isLoading={query.isFetching && !query.isLoading}
-            />
-          )}
-        </QueryState>
-      </FrameDataGrid>
+        {(items) => (
+          <ModulesListGrid
+            items={items}
+            isLoading={query.isFetching && !query.isLoading}
+            actions={
+              canWrite ? (
+                <Button size="sm" onClick={() => setCreateOpen(true)}>
+                  <Plus />
+                  Создать
+                </Button>
+              ) : undefined
+            }
+          />
+        )}
+      </QueryState>
 
       <ModuleCreateDialog
         open={createOpen}
diff --git a/apps/web/src/routes/_auth/monitoring.tsx b/apps/web/src/routes/_auth/monitoring.tsx
index 3259193..ecaabfb 100644
--- a/apps/web/src/routes/_auth/monitoring.tsx
+++ b/apps/web/src/routes/_auth/monitoring.tsx
@@ -5,7 +5,6 @@ import { AlertTriangle, Bird, Database, FileText, 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 { FrameDataGrid } from '@/components/reui-kit'
 import { StatusBadge } from '@/components/status-badge'
 import { jobKindRu } from '@/lib/ui-labels'
 import {
@@ -125,21 +124,16 @@ function MonitoringComponent() {
           )}
 
           <div className="grid items-stretch gap-2 md:gap-3 lg:grid-cols-2">
-            <FrameDataGrid
-              title="Доступность и готовность"
-              description="Проверки живучести и готовности (/v1/health, /v1/ready)"
+            <QueryState
+              data={readyQ.data}
+              isLoading={readyQ.isLoading}
+              isError={readyQ.isError}
+              error={readyQ.error}
+              skeleton={<div className="h-40" />}
+              onRetry={() => readyQ.refetch()}
             >
-              <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>
-            </FrameDataGrid>
+              {(ready) => <MonitoringReadyGrid health={healthQ.data} ready={ready} />}
+            </QueryState>
 
             <PanelCard
               title={
diff --git a/apps/web/src/routes/_auth/operations.tsx b/apps/web/src/routes/_auth/operations.tsx
index cf2938b..1b2b0e0 100644
--- a/apps/web/src/routes/_auth/operations.tsx
+++ b/apps/web/src/routes/_auth/operations.tsx
@@ -8,7 +8,6 @@ import { Button } from '@evobgp/ui/components/button'
 import { PanelCard } from '@/components/panel-card'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import {
-  FrameDataGrid,
   KpiStatGrid,
   QuickActionGrid,
   type KpiStatItem,
@@ -226,14 +225,12 @@ function OperationsComponent() {
         ]}
       >
         <TabsContent value="revisions" className="mt-0">
-          <FrameDataGrid title="История ревизий">
             <QueryState
               data={revisions}
               isLoading={revisionsQ.isLoading}
               isError={revisionsQ.isError}
               error={revisionsQ.error}
-              empty={revisions.length === 0}
-              emptyTitle="Нет ревизий"
+              empty={false}
               onRetry={() => revisionsQ.refetch()}
             >
               {(items) => (
@@ -244,7 +241,6 @@ function OperationsComponent() {
                 />
               )}
             </QueryState>
-          </FrameDataGrid>
         </TabsContent>
 
         <TabsContent value="diff" className="mt-0">
diff --git a/apps/web/src/routes/_auth/schedule.tsx b/apps/web/src/routes/_auth/schedule.tsx
index 96f1eae..11cb041 100644
--- a/apps/web/src/routes/_auth/schedule.tsx
+++ b/apps/web/src/routes/_auth/schedule.tsx
@@ -6,12 +6,10 @@ import { useState } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
 import { Badge } from '@/components/reui/badge'
-import { FrameDataGrid } from '@/components/reui-kit'
 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 { QueryState } from '@/components/query-state'
 import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
 import { SectionCardsSkeleton } from '@/components/skeletons'
 
@@ -112,29 +110,15 @@ function ScheduleComponent() {
 
       <ScheduleAgendaPanel jobs={jobs} isLoading={jobsQ.isLoading} />
 
-      <FrameDataGrid
-        title="Модули"
-        description="Расписание обновления и ручной запуск обновления"
-      >
-        <QueryState
-          data={modules}
-          isLoading={modulesQ.isLoading}
-          isError={modulesQ.isError}
-          error={modulesQ.error}
-          empty={modules.length === 0}
-          emptyTitle="Нет модулей"
-          onRetry={() => modulesQ.refetch()}
-        >
-          {(items) => (
-            <ScheduleModulesGrid
-              items={items}
-              refreshing={refreshing}
-              onRefresh={(id) => refreshMutation.mutate(id)}
-              isLoading={modulesQ.isFetching && !modulesQ.isLoading}
-            />
-          )}
-        </QueryState>
-      </FrameDataGrid>
+      <ScheduleModulesGrid
+        items={modules}
+        refreshing={refreshing}
+        onRefresh={(id) => refreshMutation.mutate(id)}
+        isLoading={modulesQ.isLoading}
+        isError={modulesQ.isError}
+        error={modulesQ.error instanceof Error ? modulesQ.error : null}
+        onRetry={() => void modulesQ.refetch()}
+      />
 
       <ScheduleJobsCard
         jobs={jobs}
diff --git a/packages/ui/src/components/calendar.tsx b/packages/ui/src/components/calendar.tsx
index cf0c231..f26f0f5 100644
--- a/packages/ui/src/components/calendar.tsx
+++ b/packages/ui/src/components/calendar.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import {
   DayPicker,
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index ec11eef..032a043 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -8,7 +8,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/field.tsx b/packages/ui/src/components/field.tsx
index 04ed7e9..4d51498 100644
--- a/packages/ui/src/components/field.tsx
+++ b/packages/ui/src/components/field.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
@@ -106,7 +104,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
diff --git a/packages/ui/src/components/input-group.tsx b/packages/ui/src/components/input-group.tsx
index a603090..a118e5c 100644
--- a/packages/ui/src/components/input-group.tsx
+++ b/packages/ui/src/components/input-group.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index e2d6500..a80f95a 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
 
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
index f77b441..13e3b9a 100644
--- a/packages/ui/src/components/separator.tsx
+++ b/packages/ui/src/components/separator.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
 
 import { cn } from "@evobgp/ui/lib/utils"
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
index 7089843..fdc3bbe 100644
--- a/packages/ui/src/components/switch.tsx
+++ b/packages/ui/src/components/switch.tsx
@@ -16,7 +16,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 137c901..7d84d61 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -13,9 +13,9 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      orientation={orientation}
+      data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        "group/tabs flex gap-2 data-horizontal:flex-col",
         className
       )}
       {...props}
@@ -24,13 +24,12 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
-        default:
-          "bg-muted p-[3px] group-data-[orientation=horizontal]/tabs:h-9",
-        line: "h-auto gap-1 overflow-visible border-b border-border bg-transparent p-0",
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
       },
     },
     defaultVariants: {
@@ -59,12 +58,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=default]/tabs-list:h-[calc(100%-1px)] group-data-[variant=default]/tabs-list:flex-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm",
-        "group-data-[variant=line]/tabs-list:h-auto group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:py-1.5 group-data-[variant=line]/tabs-list:shadow-none group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:shadow-none dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "group-data-[variant=default]/tabs-list:data-active:bg-background group-data-[variant=default]/tabs-list:data-active:text-foreground dark:group-data-[variant=default]/tabs-list:data-active:border-input dark:group-data-[variant=default]/tabs-list:data-active:bg-input/30 dark:group-data-[variant=default]/tabs-list:data-active:text-foreground",
-        "data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-0 group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
index 198596f..cf6dde3 100644
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
 import { cn } from "@evobgp/ui/lib/utils"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15cd0a1..ced5a9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@base-ui/react':
         specifier: ^1.0.0
         version: 1.6.0(@date-fns/tz@1.5.0)(@types/react@19.2.17)(date-fns@4.4.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@date-fns/tz':
+        specifier: ^1.5.0
+        version: 1.5.0
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -75,11 +78,11 @@ importers:
         specifier: ^1.130.2
         version: 1.167.0(@tanstack/react-router@1.170.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@tanstack/router-core@1.171.13)(csstype@3.2.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@tanstack/react-table':
-        specifier: ^8.21.3
-        version: 8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        specifier: ^9.1.2
+        version: 9.1.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@tanstack/react-virtual':
-        specifier: ^3.14.4
-        version: 3.14.5(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        specifier: ^3.14.10
+        version: 3.14.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -1486,21 +1489,26 @@ packages:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
+  '@tanstack/react-store@0.11.1':
+    resolution: {integrity: sha512-HaIGKI3YLmjBYIvy5DFDY23oNaYZIsTZfngey07Uh5iLVJgM3bIGCnZeOFOqzjFld9JHWcaHJnasD/bKoGKwJQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@tanstack/react-store@0.9.3':
     resolution: {integrity: sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@tanstack/react-table@8.21.3':
-    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
-    engines: {node: '>=12'}
+  '@tanstack/react-table@9.1.2':
+    resolution: {integrity: sha512-YQPZFJ1nIi/bjjwsPZVouABgahDcl7Gdm33CdTStUJBn0DjEVJ2uhSTVmIoWt9MVKdQziXGAsXipSzy949Hygg==}
+    engines: {node: '>=20'}
     peerDependencies:
-      react: '>=16.8'
-      react-dom: '>=16.8'
+      react: '>=18'
 
-  '@tanstack/react-virtual@3.14.5':
-    resolution: {integrity: sha512-4EKRXh7zBLkbKbFmG3AUVkircuHd+7OdT1pocJSepxtfBd3qnrJgJ5rtPkRYyo9fmyVb2+pI2xPy5oYvMLQy6A==}
+  '@tanstack/react-virtual@3.14.10':
+    resolution: {integrity: sha512-SRyoUbdFMRHuYXMijV5H4ZarQWpXkj3iANq8OFre+pybeVap8ZJjZ3Nz9bVjx4d8PfobVUQUdKyyyHYk3E+djw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -1553,15 +1561,18 @@ packages:
     resolution: {integrity: sha512-hTWqJtqIFFdvuCl8WXNyrodp2L9zo2G37xKRrcVmVRWpAB2h+U1LuRAfS4tsFTiWOIoE/B+WDVFB8JpoEdw6jQ==}
     engines: {node: '>=20.19'}
 
+  '@tanstack/store@0.11.1':
+    resolution: {integrity: sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA==}
+
   '@tanstack/store@0.9.3':
     resolution: {integrity: sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==}
 
-  '@tanstack/table-core@8.21.3':
-    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
-    engines: {node: '>=12'}
+  '@tanstack/table-core@9.1.2':
+    resolution: {integrity: sha512-ONpWQeass1sfg80CWF1NSwQ8r3GiqxA2lT/EdqIcrDEPZ0Z+0mM94eQoFYLPN0Kztzj8TQVb2+PrSZSItqA61g==}
+    engines: {node: '>=20'}
 
-  '@tanstack/virtual-core@3.17.3':
-    resolution: {integrity: sha512-8Np/TFELpI0ySuJoVmjvOrQYXH/8sTX0Biv9szhFhY39xOdAAY+smrMxjxOum/ux3eM8MUJQsEJ0/R0UpvC8dw==}
+  '@tanstack/virtual-core@3.17.8':
+    resolution: {integrity: sha512-BfEvehNpOT75r5Ksc5xW6NZuXujTfb7nlSEyVu4XHG3gdxNg1KqXruWbDewXOUaUYIo4oRbSfkjIajz4MAT8tA==}
 
   '@tanstack/virtual-file-routes@1.162.0':
     resolution: {integrity: sha512-uhOeFyxLcU41HzvrxsGpiWdcMbScY1EDgbZ5K7DVRMYInbLYWAC0EA/kx9wXAoSM8q82bUG2hRl8+EAjE6XAbA==}
@@ -5824,6 +5835,13 @@ snapshots:
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
 
+  '@tanstack/react-store@0.11.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/store': 0.11.1
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      use-sync-external-store: 1.6.0(react@19.2.7)
+
   '@tanstack/react-store@0.9.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@tanstack/store': 0.9.3
@@ -5831,15 +5849,17 @@ snapshots:
       react-dom: 19.2.7(react@19.2.7)
       use-sync-external-store: 1.6.0(react@19.2.7)
 
-  '@tanstack/react-table@8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@tanstack/react-table@9.1.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@tanstack/table-core': 8.21.3
+      '@tanstack/react-store': 0.11.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@tanstack/table-core': 9.1.2
       react: 19.2.7
-      react-dom: 19.2.7(react@19.2.7)
+    transitivePeerDependencies:
+      - react-dom
 
-  '@tanstack/react-virtual@3.14.5(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@tanstack/react-virtual@3.14.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@tanstack/virtual-core': 3.17.3
+      '@tanstack/virtual-core': 3.17.8
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
 
@@ -5916,11 +5936,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@tanstack/store@0.11.1': {}
+
   '@tanstack/store@0.9.3': {}
 
-  '@tanstack/table-core@8.21.3': {}
+  '@tanstack/table-core@9.1.2':
+    dependencies:
+      '@tanstack/store': 0.11.1
 
-  '@tanstack/virtual-core@3.17.3': {}
+  '@tanstack/virtual-core@3.17.8': {}
 
   '@tanstack/virtual-file-routes@1.162.0': {}