feat(web): upgrade lists to ReUI Table v9 and EventCalendar

Единый kitDataGridTableLayout и ResourcePage/FrameDataGrid на всех списках.
Календарь задач переведён на EventCalendar, lookup — на cascader, у операций появился вид доски.
Удалены settings-7 и самописные DataGridSection/toolbar.

Co-authored-by: Cursor <cursoragent@cursor.com>

.agents/skills/reui/SKILL.md

@@ -5,7 +5,7 @@ user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `668fb463eb`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `3bdbad788a`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 

.agents/skills/reui/rules/components.md

@@ -1,6 +1,6 @@
 # ReUI components
 
-The 20 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
+The 21 ReUI building blocks: `alert`, `autocomplete`, `badge`, `cascader`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
 
 **Rule one: never guess a component's API. Read it first.** Call **`get_component(name)`** for its inline `api` (props + usage, no web fetch), and **share the result's `docsUrl`** (the component's API documentation page) with the user whenever you work with that component's API, so they have the full reference (the `/llms.txt` index is a further fallback). Then call **`get_examples(name)`** to install a worked example and copy real composition. The contracts below are first-try orientation (required props, composition shape, the one gotcha); the inline `api` is the full reference. No single block fits? Compose: search the components you need, read each `get_component`, install a `get_examples` example per component, and adapt.
 
@@ -106,22 +106,60 @@ Common mistakes:
 
 ## filters
 
-**Required:** `filters` (`Filter[]`), `fields` (`FilterFieldConfig[]`), `onChange`
+**Required:** `fields` (`FilterField[]`). The value is ONE `FilterQuery` tree - `query` + `onQueryChange`, or uncontrolled `defaultQuery`.
 **Shape:**
 
 ```tsx
-const [filters, setFilters] = useState<Filter[]>([
-  createFilter("priority", "is_any_of", ["low"]),
-])
-const fields: FilterFieldConfig[] = [
-  { key: "priority", label: "Priority", type: "multiselect",
-    options: [{ value: "low", label: "Low" }, { value: "high", label: "High" }] },
+const fields: FilterField[] = [
+  { id: "title", label: "Title", type: "text" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "archived", label: "Archived" },
+    ],
+  },
 ]
+const [query, setQuery] = useState<FilterQuery>(() => createFilterQuery())
 
-<Filters filters={filters} fields={fields} onChange={setFilters} />
+<Filters fields={fields} query={query} onQueryChange={setQuery} />
 ```
 
-**Gotcha:** always build initial filters with `createFilter(field, operator, values)` - it generates the required `id`. Never hand-construct a `Filter` object. Pairs naturally with `data-grid`.
+**Gotcha:** the state is a TREE, not a list of chips. `FilterQuery` is a group of rules joined by `and`/`or` and a group may hold another group, so `(A and B) or C` is expressible; a rule is `{ id, type: "rule", path: ["status"], operator, value }` and `path` is the whole nested attribute path, root first. The pre-rewrite API is GONE: there is no `filters`/`onChange` prop, no `FilterFieldConfig` (fields are `FilterField`, nested through their own `fields`, keyed `id` not `key`), and no `createFilter()` - it minted ids inside a pure function and broke hydration, so ids now come from `createFilterIdFactory(seed)` seeded off `useId`, and `createFilterQuery()` / `createFilterRule()` take one. Read the query back with `flattenFilterConditions` (`{ path, field, operator, values, negated }` per rule, incomplete rules skipped) and walk the tree yourself when the parentheses carry meaning - the primitive compiles nothing, no SQL, no query string.
+
+`variant` picks the chrome over that one query: `"basic"`, the default, is the flat chip row for a toolbar over a table; `"advanced"` is the condition builder, hung off a trigger or rendered in place with `advancedMode="inline"`. Both read and write the same tree, so a saved view built in one opens in the other. Other props worth knowing before you hand-roll them: `size` is two rungs, `"sm" | "default"`, resolved per style (there is no `lg`); `reorderable` turns on drag and Alt+Arrow row moves in the builder; `onBeforeQueryChange` is the ONE veto point for every write (return `false` to refuse, it cannot rewrite); `editors` registers custom value editors a field selects by `editor` name; `labels` / `operatorLabels` own every rendered string; `pathCollapse` + `maxPathSegments` shorten deep attribute paths; `renderChip` / `renderValue` / `renderEmpty` replace rendered parts. On a field, `loadOptions` supplies async options with paging and `resolveValues` renders a chip restored from a saved view whose option was never loaded. Pairs naturally with `data-grid`.
+
+## cascader
+
+**Required:** `items` (a tree of `{ value, label, children? }`), plus the panel parts inside `CascaderContent`.
+**Shape:**
+
+```tsx
+<Cascader items={items} value={value} onValueChange={setValue}>
+  <CascaderTrigger render={<Button variant="outline" />}>
+    <CascaderValue placeholder="Select an attribute" />
+  </CascaderTrigger>
+  <CascaderContent className="w-80">
+    <CascaderPanel>
+      <CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderInput />
+      </CascaderNav>
+      <CascaderEmpty />
+      <CascaderList maxHeight={288}>
+        <CascaderItems />
+      </CascaderList>
+      <CascaderStatus />
+    </CascaderPanel>
+  </CascaderContent>
+</Cascader>
+```
+
+**Gotcha:** pressing a branch NAVIGATES, it does not select - only leaves are selectable until you pass `selectable="any"` or a predicate, and once a branch is selectable its chevron becomes the only way to open it. `CascaderInput` must stay inside `CascaderContent` (Base UI refills the query from the selection when the input sits outside the popup). Always include `CascaderStatus`: it is the live region announcing level changes, which the visual breadcrumb does not provide to screen readers. Accepts a flat adjacency list via `getParent` as well as nested `children`. `searchScope="deep"` searches every level and annotates results with their path; `multiple` gives checkbox rows; `inline` + a bare `CascaderPanel` embeds it with no popover.
+
+The shape above is `mode="drill"`, the default. `mode="tree"` keeps the same parts (drop `CascaderBreadcrumb`, pass `showBack={false}`, drive expansion with `expanded`/`onExpandedChange`); `mode="columns"` REPLACES `CascaderList` + `CascaderItems` with a single `CascaderColumns`, and has no breadcrumb. Other props worth knowing before you hand-roll them: `cascade` (multi-select only, parent/child selection with indeterminate branches - pair it with `selectable="any"`, since a leaf-only tree can never cascade), `indicator={false}` to drop the single-select check and its gutter (visual only, no-op with `multiple`), `virtualize`/`virtualizeThreshold` plus `CascaderVirtualItems` for long levels, and `getChildren` for async levels with cursor paging, retry on failure and optional `prefetch`. `CascaderFooter` pins commands below the list (`actions` is the quick path) and `CascaderSubmenu` opens one as a side-anchored flyout with the full menu keyboard model. To head a run of rows use `CascaderGroup` wrapping a `CascaderLabel` - a bare label inside a listbox names nothing and is dropped from the accessibility tree - and `CascaderSeparator` for the rule between runs. Every rendered string comes from `labels`, and the panel is RTL-correct under a `DirectionProvider` or `dir="rtl"`.
 
 ## date-selector
 

.claude/skills/reui/SKILL.md

@@ -5,7 +5,7 @@ user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `668fb463eb`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `3bdbad788a`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 

.claude/skills/reui/rules/components.md

@@ -1,6 +1,6 @@
 # ReUI components
 
-The 20 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
+The 21 ReUI building blocks: `alert`, `autocomplete`, `badge`, `cascader`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
 
 **Rule one: never guess a component's API. Read it first.** Call **`get_component(name)`** for its inline `api` (props + usage, no web fetch), and **share the result's `docsUrl`** (the component's API documentation page) with the user whenever you work with that component's API, so they have the full reference (the `/llms.txt` index is a further fallback). Then call **`get_examples(name)`** to install a worked example and copy real composition. The contracts below are first-try orientation (required props, composition shape, the one gotcha); the inline `api` is the full reference. No single block fits? Compose: search the components you need, read each `get_component`, install a `get_examples` example per component, and adapt.
 
@@ -106,22 +106,60 @@ Common mistakes:
 
 ## filters
 
-**Required:** `filters` (`Filter[]`), `fields` (`FilterFieldConfig[]`), `onChange`
+**Required:** `fields` (`FilterField[]`). The value is ONE `FilterQuery` tree - `query` + `onQueryChange`, or uncontrolled `defaultQuery`.
 **Shape:**
 
 ```tsx
-const [filters, setFilters] = useState<Filter[]>([
-  createFilter("priority", "is_any_of", ["low"]),
-])
-const fields: FilterFieldConfig[] = [
-  { key: "priority", label: "Priority", type: "multiselect",
-    options: [{ value: "low", label: "Low" }, { value: "high", label: "High" }] },
+const fields: FilterField[] = [
+  { id: "title", label: "Title", type: "text" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "archived", label: "Archived" },
+    ],
+  },
 ]
+const [query, setQuery] = useState<FilterQuery>(() => createFilterQuery())
 
-<Filters filters={filters} fields={fields} onChange={setFilters} />
+<Filters fields={fields} query={query} onQueryChange={setQuery} />
 ```
 
-**Gotcha:** always build initial filters with `createFilter(field, operator, values)` - it generates the required `id`. Never hand-construct a `Filter` object. Pairs naturally with `data-grid`.
+**Gotcha:** the state is a TREE, not a list of chips. `FilterQuery` is a group of rules joined by `and`/`or` and a group may hold another group, so `(A and B) or C` is expressible; a rule is `{ id, type: "rule", path: ["status"], operator, value }` and `path` is the whole nested attribute path, root first. The pre-rewrite API is GONE: there is no `filters`/`onChange` prop, no `FilterFieldConfig` (fields are `FilterField`, nested through their own `fields`, keyed `id` not `key`), and no `createFilter()` - it minted ids inside a pure function and broke hydration, so ids now come from `createFilterIdFactory(seed)` seeded off `useId`, and `createFilterQuery()` / `createFilterRule()` take one. Read the query back with `flattenFilterConditions` (`{ path, field, operator, values, negated }` per rule, incomplete rules skipped) and walk the tree yourself when the parentheses carry meaning - the primitive compiles nothing, no SQL, no query string.
+
+`variant` picks the chrome over that one query: `"basic"`, the default, is the flat chip row for a toolbar over a table; `"advanced"` is the condition builder, hung off a trigger or rendered in place with `advancedMode="inline"`. Both read and write the same tree, so a saved view built in one opens in the other. Other props worth knowing before you hand-roll them: `size` is two rungs, `"sm" | "default"`, resolved per style (there is no `lg`); `reorderable` turns on drag and Alt+Arrow row moves in the builder; `onBeforeQueryChange` is the ONE veto point for every write (return `false` to refuse, it cannot rewrite); `editors` registers custom value editors a field selects by `editor` name; `labels` / `operatorLabels` own every rendered string; `pathCollapse` + `maxPathSegments` shorten deep attribute paths; `renderChip` / `renderValue` / `renderEmpty` replace rendered parts. On a field, `loadOptions` supplies async options with paging and `resolveValues` renders a chip restored from a saved view whose option was never loaded. Pairs naturally with `data-grid`.
+
+## cascader
+
+**Required:** `items` (a tree of `{ value, label, children? }`), plus the panel parts inside `CascaderContent`.
+**Shape:**
+
+```tsx
+<Cascader items={items} value={value} onValueChange={setValue}>
+  <CascaderTrigger render={<Button variant="outline" />}>
+    <CascaderValue placeholder="Select an attribute" />
+  </CascaderTrigger>
+  <CascaderContent className="w-80">
+    <CascaderPanel>
+      <CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderInput />
+      </CascaderNav>
+      <CascaderEmpty />
+      <CascaderList maxHeight={288}>
+        <CascaderItems />
+      </CascaderList>
+      <CascaderStatus />
+    </CascaderPanel>
+  </CascaderContent>
+</Cascader>
+```
+
+**Gotcha:** pressing a branch NAVIGATES, it does not select - only leaves are selectable until you pass `selectable="any"` or a predicate, and once a branch is selectable its chevron becomes the only way to open it. `CascaderInput` must stay inside `CascaderContent` (Base UI refills the query from the selection when the input sits outside the popup). Always include `CascaderStatus`: it is the live region announcing level changes, which the visual breadcrumb does not provide to screen readers. Accepts a flat adjacency list via `getParent` as well as nested `children`. `searchScope="deep"` searches every level and annotates results with their path; `multiple` gives checkbox rows; `inline` + a bare `CascaderPanel` embeds it with no popover.
+
+The shape above is `mode="drill"`, the default. `mode="tree"` keeps the same parts (drop `CascaderBreadcrumb`, pass `showBack={false}`, drive expansion with `expanded`/`onExpandedChange`); `mode="columns"` REPLACES `CascaderList` + `CascaderItems` with a single `CascaderColumns`, and has no breadcrumb. Other props worth knowing before you hand-roll them: `cascade` (multi-select only, parent/child selection with indeterminate branches - pair it with `selectable="any"`, since a leaf-only tree can never cascade), `indicator={false}` to drop the single-select check and its gutter (visual only, no-op with `multiple`), `virtualize`/`virtualizeThreshold` plus `CascaderVirtualItems` for long levels, and `getChildren` for async levels with cursor paging, retry on failure and optional `prefetch`. `CascaderFooter` pins commands below the list (`actions` is the quick path) and `CascaderSubmenu` opens one as a side-anchored flyout with the full menu keyboard model. To head a run of rows use `CascaderGroup` wrapping a `CascaderLabel` - a bare label inside a listbox names nothing and is dropped from the accessibility tree - and `CascaderSeparator` for the rule between runs. Every rendered string comes from `labels`, and the panel is RTL-correct under a `DirectionProvider` or `dir="rtl"`.
 
 ## date-selector
 

.cursor/rules/reui.mdc

@@ -6,18 +6,18 @@ alwaysApply: false
 
 ---
 name: reui
-description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 17 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
+description: Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 20 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.
 user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `42d70dcc3d`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `3bdbad788a`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 
 ReUI is a shadcn-compatible registry. It ships four things you **reuse** - never redesign:
 
-- **components** - the 17 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
+- **components** - the 20 ReUI building blocks with real APIs: `data-grid`, `kanban`, `filters`, `date-selector`, `tree`, `stepper`, ... (free)
 - **examples** - free `c-*` single-pattern use-cases of a component (`c-kanban-1`); install one and read it to see exact composition
 - **blocks** - premium full-page sections that compose components (`data-grid-2`, `pricing-page-1`); Pro or Ultimate license at install
 - **icons** - Motion Icons in 4 styles, static + hover-animated variants; Ultimate license at install
@@ -64,7 +64,7 @@ Invocation differs slightly per agent (`/mcp__reui__build` in Claude Code/Cursor
 
 - [rules/registry.md](./rules/registry.md) - the four types, the @reui registry, base/radix, free vs premium + license
 - [rules/workflow.md](./rules/workflow.md) - the find -> install -> read-API -> adapt loop (most important)
-- [rules/components.md](./rules/components.md) - the 17 components, the data-grid contract, base vs radix
+- [rules/components.md](./rules/components.md) - the 20 components, the data-grid contract, base vs radix
 - [rules/adapting.md](./rules/adapting.md) - reuse-first: preserve the design (no over-customizing), reuse examples + a block's own elements, real data, don't invent APIs
 - [rules/craft.md](./rules/craft.md) - make it exceptional: point of view, hierarchy, density, states, responsive, motion, the bar
 - [rules/quality.md](./rules/quality.md) - security, accessibility, and scroll gates (the done gate)

.cursor/skills/reui/SKILL.md

@@ -5,7 +5,7 @@ user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `668fb463eb`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `3bdbad788a`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 

.cursor/skills/reui/rules/components.md

@@ -1,6 +1,6 @@
 # ReUI components
 
-The 20 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
+The 21 ReUI building blocks: `alert`, `autocomplete`, `badge`, `cascader`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
 
 **Rule one: never guess a component's API. Read it first.** Call **`get_component(name)`** for its inline `api` (props + usage, no web fetch), and **share the result's `docsUrl`** (the component's API documentation page) with the user whenever you work with that component's API, so they have the full reference (the `/llms.txt` index is a further fallback). Then call **`get_examples(name)`** to install a worked example and copy real composition. The contracts below are first-try orientation (required props, composition shape, the one gotcha); the inline `api` is the full reference. No single block fits? Compose: search the components you need, read each `get_component`, install a `get_examples` example per component, and adapt.
 
@@ -106,22 +106,60 @@ Common mistakes:
 
 ## filters
 
-**Required:** `filters` (`Filter[]`), `fields` (`FilterFieldConfig[]`), `onChange`
+**Required:** `fields` (`FilterField[]`). The value is ONE `FilterQuery` tree - `query` + `onQueryChange`, or uncontrolled `defaultQuery`.
 **Shape:**
 
 ```tsx
-const [filters, setFilters] = useState<Filter[]>([
-  createFilter("priority", "is_any_of", ["low"]),
-])
-const fields: FilterFieldConfig[] = [
-  { key: "priority", label: "Priority", type: "multiselect",
-    options: [{ value: "low", label: "Low" }, { value: "high", label: "High" }] },
+const fields: FilterField[] = [
+  { id: "title", label: "Title", type: "text" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "archived", label: "Archived" },
+    ],
+  },
 ]
+const [query, setQuery] = useState<FilterQuery>(() => createFilterQuery())
 
-<Filters filters={filters} fields={fields} onChange={setFilters} />
+<Filters fields={fields} query={query} onQueryChange={setQuery} />
 ```
 
-**Gotcha:** always build initial filters with `createFilter(field, operator, values)` - it generates the required `id`. Never hand-construct a `Filter` object. Pairs naturally with `data-grid`.
+**Gotcha:** the state is a TREE, not a list of chips. `FilterQuery` is a group of rules joined by `and`/`or` and a group may hold another group, so `(A and B) or C` is expressible; a rule is `{ id, type: "rule", path: ["status"], operator, value }` and `path` is the whole nested attribute path, root first. The pre-rewrite API is GONE: there is no `filters`/`onChange` prop, no `FilterFieldConfig` (fields are `FilterField`, nested through their own `fields`, keyed `id` not `key`), and no `createFilter()` - it minted ids inside a pure function and broke hydration, so ids now come from `createFilterIdFactory(seed)` seeded off `useId`, and `createFilterQuery()` / `createFilterRule()` take one. Read the query back with `flattenFilterConditions` (`{ path, field, operator, values, negated }` per rule, incomplete rules skipped) and walk the tree yourself when the parentheses carry meaning - the primitive compiles nothing, no SQL, no query string.
+
+`variant` picks the chrome over that one query: `"basic"`, the default, is the flat chip row for a toolbar over a table; `"advanced"` is the condition builder, hung off a trigger or rendered in place with `advancedMode="inline"`. Both read and write the same tree, so a saved view built in one opens in the other. Other props worth knowing before you hand-roll them: `size` is two rungs, `"sm" | "default"`, resolved per style (there is no `lg`); `reorderable` turns on drag and Alt+Arrow row moves in the builder; `onBeforeQueryChange` is the ONE veto point for every write (return `false` to refuse, it cannot rewrite); `editors` registers custom value editors a field selects by `editor` name; `labels` / `operatorLabels` own every rendered string; `pathCollapse` + `maxPathSegments` shorten deep attribute paths; `renderChip` / `renderValue` / `renderEmpty` replace rendered parts. On a field, `loadOptions` supplies async options with paging and `resolveValues` renders a chip restored from a saved view whose option was never loaded. Pairs naturally with `data-grid`.
+
+## cascader
+
+**Required:** `items` (a tree of `{ value, label, children? }`), plus the panel parts inside `CascaderContent`.
+**Shape:**
+
+```tsx
+<Cascader items={items} value={value} onValueChange={setValue}>
+  <CascaderTrigger render={<Button variant="outline" />}>
+    <CascaderValue placeholder="Select an attribute" />
+  </CascaderTrigger>
+  <CascaderContent className="w-80">
+    <CascaderPanel>
+      <CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderInput />
+      </CascaderNav>
+      <CascaderEmpty />
+      <CascaderList maxHeight={288}>
+        <CascaderItems />
+      </CascaderList>
+      <CascaderStatus />
+    </CascaderPanel>
+  </CascaderContent>
+</Cascader>
+```
+
+**Gotcha:** pressing a branch NAVIGATES, it does not select - only leaves are selectable until you pass `selectable="any"` or a predicate, and once a branch is selectable its chevron becomes the only way to open it. `CascaderInput` must stay inside `CascaderContent` (Base UI refills the query from the selection when the input sits outside the popup). Always include `CascaderStatus`: it is the live region announcing level changes, which the visual breadcrumb does not provide to screen readers. Accepts a flat adjacency list via `getParent` as well as nested `children`. `searchScope="deep"` searches every level and annotates results with their path; `multiple` gives checkbox rows; `inline` + a bare `CascaderPanel` embeds it with no popover.
+
+The shape above is `mode="drill"`, the default. `mode="tree"` keeps the same parts (drop `CascaderBreadcrumb`, pass `showBack={false}`, drive expansion with `expanded`/`onExpandedChange`); `mode="columns"` REPLACES `CascaderList` + `CascaderItems` with a single `CascaderColumns`, and has no breadcrumb. Other props worth knowing before you hand-roll them: `cascade` (multi-select only, parent/child selection with indeterminate branches - pair it with `selectable="any"`, since a leaf-only tree can never cascade), `indicator={false}` to drop the single-select check and its gutter (visual only, no-op with `multiple`), `virtualize`/`virtualizeThreshold` plus `CascaderVirtualItems` for long levels, and `getChildren` for async levels with cursor paging, retry on failure and optional `prefetch`. `CascaderFooter` pins commands below the list (`actions` is the quick path) and `CascaderSubmenu` opens one as a side-anchored flyout with the full menu keyboard model. To head a run of rows use `CascaderGroup` wrapping a `CascaderLabel` - a bare label inside a listbox names nothing and is dropped from the accessibility tree - and `CascaderSeparator` for the rule between runs. Every rendered string comes from `labels`, and the panel is RTL-correct under a `DirectionProvider` or `dir="rtl"`.
 
 ## date-selector
 

.opencode/skills/reui/SKILL.md

@@ -5,7 +5,7 @@ user-invocable: false
 allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
 ---
 
-> **ReUI skill version `668fb463eb`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
+> **ReUI skill version `3bdbad788a`.** If the ReUI MCP's `get_agent_skill` reports a newer `version`, re-run the ReUI installer (see `get_agent_skill` -> `install.recommended`) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
 
 # ReUI for Agents
 

.opencode/skills/reui/rules/components.md

@@ -1,6 +1,6 @@
 # ReUI components
 
-The 20 ReUI building blocks: `alert`, `autocomplete`, `badge`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
+The 21 ReUI building blocks: `alert`, `autocomplete`, `badge`, `cascader`, `data-grid`, `date-selector`, `event-calendar`, `filters`, `frame`, `gantt`, `icon-stack`, `icon-tile`, `kanban`, `number-field`, `phone-input`, `rating`, `scrollspy`, `sortable`, `stepper`, `timeline`, `tree`. Examples and blocks are composed from these.
 
 **Rule one: never guess a component's API. Read it first.** Call **`get_component(name)`** for its inline `api` (props + usage, no web fetch), and **share the result's `docsUrl`** (the component's API documentation page) with the user whenever you work with that component's API, so they have the full reference (the `/llms.txt` index is a further fallback). Then call **`get_examples(name)`** to install a worked example and copy real composition. The contracts below are first-try orientation (required props, composition shape, the one gotcha); the inline `api` is the full reference. No single block fits? Compose: search the components you need, read each `get_component`, install a `get_examples` example per component, and adapt.
 
@@ -106,22 +106,60 @@ Common mistakes:
 
 ## filters
 
-**Required:** `filters` (`Filter[]`), `fields` (`FilterFieldConfig[]`), `onChange`
+**Required:** `fields` (`FilterField[]`). The value is ONE `FilterQuery` tree - `query` + `onQueryChange`, or uncontrolled `defaultQuery`.
 **Shape:**
 
 ```tsx
-const [filters, setFilters] = useState<Filter[]>([
-  createFilter("priority", "is_any_of", ["low"]),
-])
-const fields: FilterFieldConfig[] = [
-  { key: "priority", label: "Priority", type: "multiselect",
-    options: [{ value: "low", label: "Low" }, { value: "high", label: "High" }] },
+const fields: FilterField[] = [
+  { id: "title", label: "Title", type: "text" },
+  {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "archived", label: "Archived" },
+    ],
+  },
 ]
+const [query, setQuery] = useState<FilterQuery>(() => createFilterQuery())
 
-<Filters filters={filters} fields={fields} onChange={setFilters} />
+<Filters fields={fields} query={query} onQueryChange={setQuery} />
 ```
 
-**Gotcha:** always build initial filters with `createFilter(field, operator, values)` - it generates the required `id`. Never hand-construct a `Filter` object. Pairs naturally with `data-grid`.
+**Gotcha:** the state is a TREE, not a list of chips. `FilterQuery` is a group of rules joined by `and`/`or` and a group may hold another group, so `(A and B) or C` is expressible; a rule is `{ id, type: "rule", path: ["status"], operator, value }` and `path` is the whole nested attribute path, root first. The pre-rewrite API is GONE: there is no `filters`/`onChange` prop, no `FilterFieldConfig` (fields are `FilterField`, nested through their own `fields`, keyed `id` not `key`), and no `createFilter()` - it minted ids inside a pure function and broke hydration, so ids now come from `createFilterIdFactory(seed)` seeded off `useId`, and `createFilterQuery()` / `createFilterRule()` take one. Read the query back with `flattenFilterConditions` (`{ path, field, operator, values, negated }` per rule, incomplete rules skipped) and walk the tree yourself when the parentheses carry meaning - the primitive compiles nothing, no SQL, no query string.
+
+`variant` picks the chrome over that one query: `"basic"`, the default, is the flat chip row for a toolbar over a table; `"advanced"` is the condition builder, hung off a trigger or rendered in place with `advancedMode="inline"`. Both read and write the same tree, so a saved view built in one opens in the other. Other props worth knowing before you hand-roll them: `size` is two rungs, `"sm" | "default"`, resolved per style (there is no `lg`); `reorderable` turns on drag and Alt+Arrow row moves in the builder; `onBeforeQueryChange` is the ONE veto point for every write (return `false` to refuse, it cannot rewrite); `editors` registers custom value editors a field selects by `editor` name; `labels` / `operatorLabels` own every rendered string; `pathCollapse` + `maxPathSegments` shorten deep attribute paths; `renderChip` / `renderValue` / `renderEmpty` replace rendered parts. On a field, `loadOptions` supplies async options with paging and `resolveValues` renders a chip restored from a saved view whose option was never loaded. Pairs naturally with `data-grid`.
+
+## cascader
+
+**Required:** `items` (a tree of `{ value, label, children? }`), plus the panel parts inside `CascaderContent`.
+**Shape:**
+
+```tsx
+<Cascader items={items} value={value} onValueChange={setValue}>
+  <CascaderTrigger render={<Button variant="outline" />}>
+    <CascaderValue placeholder="Select an attribute" />
+  </CascaderTrigger>
+  <CascaderContent className="w-80">
+    <CascaderPanel>
+      <CascaderNav>
+        <CascaderBreadcrumb />
+        <CascaderInput />
+      </CascaderNav>
+      <CascaderEmpty />
+      <CascaderList maxHeight={288}>
+        <CascaderItems />
+      </CascaderList>
+      <CascaderStatus />
+    </CascaderPanel>
+  </CascaderContent>
+</Cascader>
+```
+
+**Gotcha:** pressing a branch NAVIGATES, it does not select - only leaves are selectable until you pass `selectable="any"` or a predicate, and once a branch is selectable its chevron becomes the only way to open it. `CascaderInput` must stay inside `CascaderContent` (Base UI refills the query from the selection when the input sits outside the popup). Always include `CascaderStatus`: it is the live region announcing level changes, which the visual breadcrumb does not provide to screen readers. Accepts a flat adjacency list via `getParent` as well as nested `children`. `searchScope="deep"` searches every level and annotates results with their path; `multiple` gives checkbox rows; `inline` + a bare `CascaderPanel` embeds it with no popover.
+
+The shape above is `mode="drill"`, the default. `mode="tree"` keeps the same parts (drop `CascaderBreadcrumb`, pass `showBack={false}`, drive expansion with `expanded`/`onExpandedChange`); `mode="columns"` REPLACES `CascaderList` + `CascaderItems` with a single `CascaderColumns`, and has no breadcrumb. Other props worth knowing before you hand-roll them: `cascade` (multi-select only, parent/child selection with indeterminate branches - pair it with `selectable="any"`, since a leaf-only tree can never cascade), `indicator={false}` to drop the single-select check and its gutter (visual only, no-op with `multiple`), `virtualize`/`virtualizeThreshold` plus `CascaderVirtualItems` for long levels, and `getChildren` for async levels with cursor paging, retry on failure and optional `prefetch`. `CascaderFooter` pins commands below the list (`actions` is the quick path) and `CascaderSubmenu` opens one as a side-anchored flyout with the full menu keyboard model. To head a run of rows use `CascaderGroup` wrapping a `CascaderLabel` - a bare label inside a listbox names nothing and is dropped from the accessibility tree - and `CascaderSeparator` for the rule between runs. Every rendered string comes from `labels`, and the panel is RTL-correct under a `DirectionProvider` or `dir="rtl"`.
 
 ## date-selector
 

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',

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",

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}

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: 'Нет ключей' }}
     />
   )
 }

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,

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",
+      },
+    },
+  ]
+}

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>
+  )
+}

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,
+  },
+]

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>
+  )
+}

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,
+    },
+  ]
+}

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>
+    </>
+  )
+}

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",
+  }),
+]

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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",
+  },
+]

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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" },
+]

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>
+  )
+}

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
+}

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}
+    </>
+  )
+}

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>
   )
 }

apps/web/src/components/blocks/settings-7/components/account-settings.tsx

@@ -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>
-  )
-}

apps/web/src/components/blocks/settings-7/components/billing-tab.tsx

@@ -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>
-  )
-}

apps/web/src/components/blocks/settings-7/components/data.tsx

@@ -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" />
-    ),
-  },
-]

apps/web/src/components/blocks/settings-7/components/notifications-tab.tsx

@@ -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>
-  )
-}

apps/web/src/components/blocks/settings-7/components/profile-avatar-upload.tsx

@@ -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>
-  )
-}

apps/web/src/components/blocks/settings-7/components/profile-tab.tsx

@@ -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>
-  )
-}

apps/web/src/components/blocks/settings-7/components/security-tab.tsx

@@ -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>
-  )
-}

apps/web/src/components/blocks/settings-7/components/setting-row.tsx

@@ -1,2 +0,0 @@
-/** @deprecated Import from `@/components/settings/setting-row` — settings-7 is not a target. */
-export { SettingRow } from '@/components/settings/setting-row'

apps/web/src/components/blocks/settings-7/components/settings-card.tsx

@@ -1,2 +0,0 @@
-/** @deprecated Import from `@/components/settings/settings-card` — settings-7 is not a target. */
-export { SettingsCard } from '@/components/settings/settings-card'

apps/web/src/components/blocks/settings-7/components/settings-field-group.tsx

@@ -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'

apps/web/src/components/blocks/settings-7/components/utils.ts

@@ -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)
-    }
-  }
-}

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.",
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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: 'Нет модулей по выбранным фильтрам.' }}
+    />
   )
 }

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,15 +19,15 @@ 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)}
-            accent="mono"
             subtitle={
               row.original.meta?.module_id
                 ? (nameById.get(String(row.original.meta.module_id)) ?? undefined)
@@ -49,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}
     />
   )
 }

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}
     />
   )
 }

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>
+  )
+}

apps/web/src/components/data-grid-shell.tsx

@@ -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} />
-    </>
-  )
-}

apps/web/src/components/data-grid-toolbar.tsx

@@ -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>
-  )
-}

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 }}
     />
   )
 }

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 }}
     />
   )
 }

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>

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: 'Нет совпадений' }}
+    />
   )
 }

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 }}
     />
   )
 }

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

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: 'Нет модулей' }}
     />
   )
 }

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}
     />
   )
 }

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:

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-соседа.',

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' },
   },

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'
 
@@ -36,34 +36,26 @@ const SPEAKER_TABS = [
 ]
 
 const ROLE_OPTIONS = [
-  { value: 'primary', label: 'Основной' },
-  { value: 'secondary', label: 'Резервный' },
-  { value: 'speaker', label: 'Спикер' },
+  { value: 'replica', label: 'Реплика' },
+  { 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),
   },
 ]
 
@@ -85,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(
     () => (
@@ -97,7 +91,7 @@ export function NetworkSpeakersCard({
     [],
   )
 
-  const columns = useMemo<ColumnDef<SpeakerRow, unknown>[]>(
+  const columns = useMemo<DataGridColumnDef<SpeakerRow>[]>(
     () => [
       ...speakerColumns,
       {
@@ -132,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}
@@ -144,6 +138,7 @@ export function NetworkSpeakersCard({
         error={error instanceof Error ? error : null}
         onRetry={onRetry}
         primaryAction={addButton}
+        pinLastColumn
         emptyState={{
           title: 'Нет спикеров',
           description: 'Добавьте первого BIRD-агента на ноде.',

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:

apps/web/src/components/network/speaker-form-dialog.tsx

@@ -1,15 +1,19 @@
 import { useEffect, useState } from 'react'
+import { Copy, TriangleAlert } from 'lucide-react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
+import { Textarea } from '@evobgp/ui/components/textarea'
 
 import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
+import { Alert, AlertDescription, AlertTitle } from '@/components/reui/alert'
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { useCreateSpeakerMutation } from '@/queries/network'
-import type { BgpSpeakerCreate } from '@/types/api'
+import type { BgpSpeakerCreate, SpeakerRow } from '@/types/api'
 
 interface SpeakerFormDialogProps {
   open: boolean
@@ -35,8 +39,20 @@ function buildMetaJson(agentDomain: string, nodeIpv4: string, bgpSource: string)
   return JSON.stringify(meta)
 }
 
+function tlsIncomplete(
+  agentDomain: string,
+  letsencryptEmail: string,
+  cfToken: string,
+  panelIP: string,
+): boolean {
+  return !agentDomain.trim() || !letsencryptEmail.trim() || !cfToken.trim() || !panelIP.trim()
+}
+
 export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps) {
   const createMutation = useCreateSpeakerMutation()
+  const { isCopied, copyToClipboard } = useCopyToClipboard({
+    onCopy: () => toast.success('Команда скопирована'),
+  })
 
   const [endpoint, setEndpoint] = useState('')
   const [role, setRole] = useState('replica')
@@ -44,6 +60,13 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
   const [nodeIpv4, setNodeIpv4] = useState('')
   const [bgpSourceIpv4, setBgpSourceIpv4] = useState('')
   const [bgpSourceManual, setBgpSourceManual] = useState(false)
+  const [letsencryptEmail, setLetsencryptEmail] = useState('')
+  const [cfDnsToken, setCfDnsToken] = useState('')
+  const [panelIP, setPanelIP] = useState('')
+  const [created, setCreated] = useState<SpeakerRow | null>(null)
+
+  const isReplica = role === 'replica'
+  const installCommands = created?.install?.docker_commands ?? ''
 
   useEffect(() => {
     if (!open) return
@@ -53,6 +76,10 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
     setNodeIpv4('')
     setBgpSourceIpv4('')
     setBgpSourceManual(false)
+    setLetsencryptEmail('')
+    setCfDnsToken('')
+    setPanelIP('')
+    setCreated(null)
   }, [open])
 
   function handleEndpointChange(value: string) {
@@ -81,82 +108,211 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
       endpoint: ep,
       role: role.trim() || 'replica',
       meta_json: buildMetaJson(agentDomain, nodeIpv4, bgpSourceIpv4),
+      control_plane_url: window.location.origin,
+    }
+    if (isReplica) {
+      if (letsencryptEmail.trim()) body.letsencrypt_email = letsencryptEmail.trim()
+      if (cfDnsToken.trim()) body.cf_dns_api_token = cfDnsToken.trim()
+      if (panelIP.trim()) body.panel_ip_whitelist = panelIP.trim()
     }
     try {
-      await createMutation.mutateAsync(body)
+      const row = await createMutation.mutateAsync(body)
+      if (row.install?.docker_commands) {
+        setCreated(row)
+        return
+      }
       onOpenChange(false)
     } catch {
       // toast in mutation
     }
   }
 
+  const showingInstall = created !== null && Boolean(installCommands)
+
   return (
     <FormDrawer
       open={open}
       onOpenChange={onOpenChange}
-      title="Новый спикер"
-      description="BIRD-агент на ноде реплики или плоскости управления"
-      className="sm:max-w-md"
+      title={showingInstall ? 'Установка на ноду' : 'Новый спикер'}
+      description={
+        showingInstall
+          ? 'Секреты показываются один раз. Скопируйте команду на VPS реплики.'
+          : 'BIRD-агент на ноде реплики или плоскости управления'
+      }
+      className={showingInstall ? 'sm:max-w-2xl' : 'sm:max-w-md'}
       footer={
-        <>
-          <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
-            Отмена
-          </Button>
-          <LoadingButton type="button" loading={createMutation.isPending} onClick={save}>
-            Создать
-          </LoadingButton>
-        </>
+        showingInstall ? (
+          <>
+            <Button
+              variant="outline"
+              type="button"
+              onClick={() => copyToClipboard(installCommands)}
+            >
+              <Copy />
+              {isCopied ? 'Скопировано' : 'Копировать команду'}
+            </Button>
+            <Button type="button" onClick={() => onOpenChange(false)}>
+              Готово
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
+              Отмена
+            </Button>
+            <LoadingButton type="button" loading={createMutation.isPending} onClick={save}>
+              Создать
+            </LoadingButton>
+          </>
+        )
       }
     >
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-endpoint">Конечная точка</Label>
-        <Input
-          id="speaker-endpoint"
-          placeholder="https://node.example.com:8443"
-          value={endpoint}
-          onChange={(e) => handleEndpointChange(e.target.value)}
-        />
-      </div>
-      <SelectField
-        id="speaker-role"
-        label="Роль"
-        items={[
-          { value: 'replica', label: 'Реплика' },
-          { value: 'master', label: 'Мастер (плоскость)' },
-        ]}
-        value={role}
-        onValueChange={(v) => setRole(v ?? 'replica')}
-      />
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-agent-domain">Домен агента</Label>
-        <Input
-          id="speaker-agent-domain"
-          placeholder="bird-agent.example.com"
-          value={agentDomain}
-          onChange={(e) => setAgentDomain(e.target.value)}
-        />
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-node-ipv4">IPv4 ноды</Label>
-        <Input
-          id="speaker-node-ipv4"
-          placeholder="203.0.113.10"
-          value={nodeIpv4}
-          onChange={(e) => handleNodeIpv4Change(e.target.value)}
-        />
-      </div>
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="speaker-bgp-source">Исходный IPv4 BGP</Label>
-        <Input
-          id="speaker-bgp-source"
-          placeholder="203.0.113.10"
-          value={bgpSourceIpv4}
-          onChange={(e) => {
-            setBgpSourceManual(true)
-            setBgpSourceIpv4(e.target.value)
-          }}
-        />
-      </div>
+      {created && installCommands ? (
+        <SpeakerInstallStep created={created} commands={installCommands} />
+      ) : (
+        <>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-endpoint">Конечная точка</Label>
+            <Input
+              id="speaker-endpoint"
+              placeholder="https://node.example.com"
+              value={endpoint}
+              onChange={(e) => handleEndpointChange(e.target.value)}
+            />
+          </div>
+          <SelectField
+            id="speaker-role"
+            label="Роль"
+            items={[
+              { value: 'replica', label: 'Реплика' },
+              { value: 'master', label: 'Мастер (плоскость)' },
+            ]}
+            value={role}
+            onValueChange={(v) => setRole(v ?? 'replica')}
+          />
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-agent-domain">Домен агента</Label>
+            <Input
+              id="speaker-agent-domain"
+              placeholder="bird-agent.example.com"
+              value={agentDomain}
+              onChange={(e) => setAgentDomain(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-node-ipv4">IPv4 ноды</Label>
+            <Input
+              id="speaker-node-ipv4"
+              placeholder="203.0.113.10"
+              value={nodeIpv4}
+              onChange={(e) => handleNodeIpv4Change(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="speaker-bgp-source">Исходный IPv4 BGP</Label>
+            <Input
+              id="speaker-bgp-source"
+              placeholder="203.0.113.10"
+              value={bgpSourceIpv4}
+              onChange={(e) => {
+                setBgpSourceManual(true)
+                setBgpSourceIpv4(e.target.value)
+              }}
+            />
+          </div>
+          {isReplica ? (
+            <>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="speaker-le-email">Email Let's Encrypt</Label>
+                <Input
+                  id="speaker-le-email"
+                  type="email"
+                  placeholder="ops@example.com"
+                  value={letsencryptEmail}
+                  onChange={(e) => setLetsencryptEmail(e.target.value)}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="speaker-cf-token">Cloudflare DNS API token</Label>
+                <Input
+                  id="speaker-cf-token"
+                  type="password"
+                  autoComplete="off"
+                  placeholder="Zone:DNS:Edit"
+                  value={cfDnsToken}
+                  onChange={(e) => setCfDnsToken(e.target.value)}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="speaker-panel-ip">IP панели (whitelist)</Label>
+                <Input
+                  id="speaker-panel-ip"
+                  placeholder="203.0.113.1/32"
+                  value={panelIP}
+                  onChange={(e) => setPanelIP(e.target.value)}
+                />
+              </div>
+              {tlsIncomplete(agentDomain, letsencryptEmail, cfDnsToken, panelIP) ? (
+                <Alert variant="warning">
+                  <TriangleAlert />
+                  <AlertTitle>Traefik не выпустит сертификат</AlertTitle>
+                  <AlertDescription>
+                    Нужны домен агента, email LE, Cloudflare token и IP панели. Иначе в
+                    команде останутся плейсхолдеры CHANGE_ME_*.
+                  </AlertDescription>
+                </Alert>
+              ) : null}
+            </>
+          ) : null}
+        </>
+      )}
     </FormDrawer>
   )
 }
+
+function SpeakerInstallStep({
+  created,
+  commands,
+}: {
+  created: SpeakerRow
+  commands: string
+}) {
+  return (
+    <>
+      <Alert variant="warning">
+        <TriangleAlert />
+        <AlertTitle>Сохраните сейчас</AlertTitle>
+        <AlertDescription>
+          agent_secret и node_token больше не будут показаны. Traefik на ноде выпускает
+          сертификат через DNS-01 (Cloudflare). MikroTik стучится на IP ноды:179; 80/443 —
+          только агент панели. Логи: docker compose logs -f bird2 evobgp-agent.
+        </AlertDescription>
+      </Alert>
+      <div className="flex flex-col gap-1">
+        <Label>ID спикера</Label>
+        <code className="break-all font-mono text-xs">{created.id}</code>
+      </div>
+      {created.agent_secret ? (
+        <div className="flex flex-col gap-1">
+          <Label>agent_secret</Label>
+          <code className="break-all font-mono text-xs">{created.agent_secret}</code>
+        </div>
+      ) : null}
+      {created.node_token ? (
+        <div className="flex flex-col gap-1">
+          <Label>node_token</Label>
+          <code className="break-all font-mono text-xs">{created.node_token}</code>
+        </div>
+      ) : null}
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-docker-commands">Docker-команды</Label>
+        <Textarea
+          id="speaker-docker-commands"
+          readOnly
+          value={commands}
+          className="min-h-64 font-mono text-xs"
+        />
+      </div>
+    </>
+  )
+}

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>
   )
 }

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,15 +66,15 @@ 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)}
-            accent="mono"
             subtitle={
               row.original.meta?.module_id
                 ? (nameById.get(String(row.original.meta.module_id)) ??
@@ -113,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: 'Нет задач' }}
     />
   )
 }

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>
+  )
+}

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: 'Нет ревизий' }}
     />
   )
 }

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'

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)
+  })
+})

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}
+    />
+  )
+}

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} выбрано`

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>
   )

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'

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} />
+}

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() {

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}

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
+}

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 }

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,
+}

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,
+}

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
+}

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 }
+}

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,
+}

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
+}

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 }

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>
             </>

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 }

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 (

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}

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)"
         >

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 }
+export { DataGridTableDndRowHandle, DataGridTableDndRows }
+export type { DataGridTableDndRowData, DataGridTableDndRowDecoration }

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 && (

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,