diff --git a/.claude/superpowers/plans/2026-04-20-base-view-draft.md b/.claude/superpowers/plans/2026-04-20-base-view-draft.md
new file mode 100644
index 000000000..284620f49
--- /dev/null
+++ b/.claude/superpowers/plans/2026-04-20-base-view-draft.md
@@ -0,0 +1,1204 @@
+# Base View Draft (Local-First Filter & Sort) Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:subagent-driven-development` (recommended) or `superpowers:executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Source spec:** `.claude/superpowers/specs/2026-04-20-base-view-draft-design.md` — jump back there for any design-level question. This plan does not re-debate decisions.
+
+**Goal:** Make filter and sort changes on a base view local-first. They apply instantly for the editing user, live in localStorage scoped to `(userId, baseId, viewId)`, and never touch the server baseline until the user clicks "Save for everyone". A banner at the top of the table surfaces the draft state with Reset / Save controls.
+
+**Architecture:** A new Jotai `atomFamily(atomWithStorage)` per `(user, base, view)` triple stores a `BaseViewDraft` JSON in localStorage. A `useViewDraft` hook wraps the atom and exposes `effectiveFilter` / `effectiveSorts` / `isDirty` / setters / `reset` / `buildPromotedConfig`. `base-table.tsx` wires the hook in, swaps the raw `activeView` for an "effective" view (baseline merged with draft) when seeding `useBaseTable` and the row query, and passes the draft setters down to the toolbar in place of the current direct mutation calls. A new `BaseViewDraftBanner` mounts between page chrome and the toolbar. `useBaseTable` gains an optional `baselineConfig` so `persistViewConfig` (column layout auto-save) can never bake draft filter/sort into the server baseline.
+
+**Tech Stack:** React 18, Jotai 2.18 (`atomWithStorage` + `atomFamily` + `RESET` sentinel from `jotai/utils`), Mantine v8 (`Paper`, `Group`, `Text`, `Button`), `@tabler/icons-react` (`IconInfoCircle`), CASL (client-side `SpaceAbility`), existing `useUpdateViewMutation` / `useSpaceQuery` / `useSpaceAbility` / `useCurrentUser` hooks.
+
+**Scope (v1):** Filter and sort only. Column layout (widths, order, visibility) continues to auto-persist through the existing debounced `persistViewConfig` path. No server-side drafts, no "save as new view", no conflict UI, no garbage collection. See spec "Non-goals" for the full list.
+
+**Testing note:** Per `CLAUDE.md`, `apps/client` has no `vitest` harness. Verification steps in this plan are a mix of `pnpm nx run client:build` type-checks (machine-checkable) and manual browser / DevTools checks (user-driven). No unit-test commands are invented for the client.
+
+---
+
+## File Structure
+
+**New files:**
+- `apps/client/src/features/base/atoms/view-draft-atom.ts` — `atomFamily(atomWithStorage)` pair keyed by `(userId, baseId, viewId)`; persists `BaseViewDraft | null` in localStorage under `docmost:base-view-draft:v1:{userId}:{baseId}:{viewId}`.
+- `apps/client/src/features/base/hooks/use-view-draft.ts` — `useViewDraft` hook; derives `effective*` values, `isDirty`, exposes `setFilter` / `setSorts` / `reset` / `buildPromotedConfig`.
+- `apps/client/src/features/base/components/base-view-draft-banner.tsx` — pure presentational banner shown when `isDirty === true`; "Reset" always, "Save for everyone" only if `canSave`.
+
+**Modified files:**
+- `apps/client/src/features/space/permissions/permissions.type.ts` — add `Base = "base"` to `SpaceCaslSubject`; widen `SpaceAbility` union with `[SpaceCaslAction, SpaceCaslSubject.Base]`.
+- `apps/client/src/features/base/types/base.types.ts` — add the `BaseViewDraft` type.
+- `apps/client/src/features/base/hooks/use-base-table.ts` — extend `useBaseTable` signature with optional `opts?: { baselineConfig?: ViewConfig }`; in `persistViewConfig` override `sorts` / `filter` with the baseline so draft values cannot leak into the layout auto-save.
+- `apps/client/src/features/base/components/base-toolbar.tsx` — drop internal `useUpdateViewMutation` use for filter/sort; accept new `onDraftSortsChange` / `onDraftFiltersChange` / `activeView` props that read the effective config for badge counts.
+- `apps/client/src/features/base/components/base-table.tsx` — wire `useViewDraft`; build `effectiveView` memo; pass effective view + baseline into `useBaseTable`; pass effective filter/sorts to `useBaseRowsQuery`; render `<BaseViewDraftBanner>`; add `useSpaceQuery` + `useSpaceAbility` for `canSave`; wire `handleSaveDraft`.
+
+---
+
+## Task 1: Add `Base` to the client-side CASL enum
+
+**Files:**
+- Modify: `apps/client/src/features/space/permissions/permissions.type.ts`
+
+**Rationale:** The server enum ([space-ability.type.ts:14](apps/server/src/core/casl/interfaces/space-ability.type.ts)) already has `Base = 'base'` and its `ISpaceAbility` union includes it. The membership permissions returned by `useSpaceQuery` therefore contain `Base` rules today, but the client enum at [permissions.type.ts:8-12](apps/client/src/features/space/permissions/permissions.type.ts) is missing the value, so `spaceAbility.can(SpaceCaslAction.Edit, SpaceCaslSubject.Base)` doesn't type-check on the client. A ripgrep for `switch(.*SpaceCaslSubject` shows no exhaustive switches on the subject enum in the client, so adding a value is safe.
+
+- [ ] **Step 1: Type-check baseline**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds. This is the "no changes yet" baseline — if it already fails, stop and report.
+
+- [ ] **Step 2: Add `Base` to the enum and widen `SpaceAbility`**
+
+Replace the file contents:
+
+```ts
+export enum SpaceCaslAction {
+  Manage = "manage",
+  Create = "create",
+  Read = "read",
+  Edit = "edit",
+  Delete = "delete",
+}
+export enum SpaceCaslSubject {
+  Settings = "settings",
+  Member = "member",
+  Page = "page",
+  Base = "base",
+}
+
+export type SpaceAbility =
+  | [SpaceCaslAction, SpaceCaslSubject.Settings]
+  | [SpaceCaslAction, SpaceCaslSubject.Member]
+  | [SpaceCaslAction, SpaceCaslSubject.Page]
+  | [SpaceCaslAction, SpaceCaslSubject.Base];
+```
+
+- [ ] **Step 3: Type-check after change**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build still succeeds. (No existing caller consumes `SpaceCaslSubject.Base` yet, so this is purely additive.)
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/client/src/features/space/permissions/permissions.type.ts
+git commit -m "feat(base): add Base subject to client-side space CASL enum"
+```
+
+---
+
+## Task 2: Add `BaseViewDraft` type and the `viewDraftAtomFamily`
+
+**Files:**
+- Modify: `apps/client/src/features/base/types/base.types.ts`
+- Create: `apps/client/src/features/base/atoms/view-draft-atom.ts`
+
+- [ ] **Step 1: Append the `BaseViewDraft` type**
+
+Add to the end of `apps/client/src/features/base/types/base.types.ts`:
+
+```ts
+// Local-first draft of filter / sort tweaks for a single view, stored in
+// localStorage scoped to (userId, baseId, viewId). An absent `filter` or
+// `sorts` field means "inherit the baseline for that axis". See
+// `.claude/superpowers/specs/2026-04-20-base-view-draft-design.md`.
+export type BaseViewDraft = {
+  filter?: FilterGroup;
+  sorts?: ViewSortConfig[];
+  // ISO timestamp written on each put; diagnostic only, not read by logic.
+  updatedAt: string;
+};
+```
+
+- [ ] **Step 2: Create the atom family**
+
+Create `apps/client/src/features/base/atoms/view-draft-atom.ts`:
+
+```ts
+import { atomFamily, atomWithStorage } from "jotai/utils";
+import { BaseViewDraft } from "@/features/base/types/base.types";
+
+export type ViewDraftKey = {
+  userId: string;
+  baseId: string;
+  viewId: string;
+};
+
+export const viewDraftStorageKey = (k: ViewDraftKey) =>
+  `docmost:base-view-draft:v1:${k.userId}:${k.baseId}:${k.viewId}`;
+
+// `atomWithStorage` handles JSON serialization, cross-tab sync via the
+// `storage` event, and lazy first-read out of the box. `atomFamily`'s
+// comparator ensures the same triple resolves to the same atom instance
+// across renders, so identity-equality cache hits in Jotai still work.
+export const viewDraftAtomFamily = atomFamily(
+  (k: ViewDraftKey) =>
+    atomWithStorage<BaseViewDraft | null>(viewDraftStorageKey(k), null),
+  (a, b) =>
+    a.userId === b.userId && a.baseId === b.baseId && a.viewId === b.viewId,
+);
+```
+
+- [ ] **Step 3: Type-check**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds. Nothing consumes the atom yet; this is a scaffold for Task 3.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/client/src/features/base/types/base.types.ts apps/client/src/features/base/atoms/view-draft-atom.ts
+git commit -m "feat(base): add BaseViewDraft type and view-draft atom family"
+```
+
+---
+
+## Task 3: Add `useViewDraft` hook
+
+**Files:**
+- Create: `apps/client/src/features/base/hooks/use-view-draft.ts`
+
+**Design contract (from spec):**
+1. If any of `userId / baseId / viewId` is `undefined` → return a passthrough state: `draft=null`, `isDirty=false`, setters no-op, `effective*` fall through to baseline.
+2. `setFilter(next)` / `setSorts(next)` compute `merged = { ...(draft ?? {}), [axis]: next, updatedAt: new Date().toISOString() }`. If both `filter` and `sorts` come out `undefined`, call `setDraft(RESET)` to remove the key.
+3. `reset()` is `setDraft(RESET)`.
+4. `isDirty` compares draft-vs-baseline per axis via `JSON.stringify` equality; `null/undefined` means "no divergence on that axis".
+5. `buildPromotedConfig(baseline)` returns `{ ...baseline, filter: draft?.filter ?? baseline.filter, sorts: draft?.sorts ?? baseline.sorts }` — preserves all non-draft fields (widths, order, visibility).
+
+- [ ] **Step 1: Scaffold the file**
+
+Create `apps/client/src/features/base/hooks/use-view-draft.ts` with imports and exported types only — no logic yet. This is the "stub" in the scaffold → implement pattern:
+
+```ts
+import { useCallback, useMemo } from "react";
+import { useAtom } from "jotai";
+import { RESET } from "jotai/utils";
+import {
+  BaseViewDraft,
+  FilterGroup,
+  ViewConfig,
+  ViewSortConfig,
+} from "@/features/base/types/base.types";
+import { viewDraftAtomFamily } from "@/features/base/atoms/view-draft-atom";
+
+export type UseViewDraftArgs = {
+  userId: string | undefined;
+  baseId: string | undefined;
+  viewId: string | undefined;
+  baselineFilter: FilterGroup | undefined;
+  baselineSorts: ViewSortConfig[] | undefined;
+};
+
+export type ViewDraftState = {
+  draft: BaseViewDraft | null;
+  effectiveFilter: FilterGroup | undefined;
+  effectiveSorts: ViewSortConfig[] | undefined;
+  isDirty: boolean;
+  setFilter: (filter: FilterGroup | undefined) => void;
+  setSorts: (sorts: ViewSortConfig[] | undefined) => void;
+  reset: () => void;
+  buildPromotedConfig: (baseline: ViewConfig) => ViewConfig;
+};
+
+// Passthrough shape returned when any of userId/baseId/viewId is undefined.
+// Guards the initial-load window where auth / activeView hasn't resolved.
+const PASSTHROUGH_DRAFT: BaseViewDraft | null = null;
+
+export function useViewDraft(_args: UseViewDraftArgs): ViewDraftState {
+  // TODO(Task 3 step 2): implement.
+  throw new Error("useViewDraft: not implemented");
+}
+```
+
+- [ ] **Step 2: Verify the stub type-checks**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds (nothing imports the hook yet).
+
+- [ ] **Step 3: Implement the hook**
+
+Replace the stub body with the full implementation:
+
+```ts
+import { useCallback, useMemo } from "react";
+import { useAtom } from "jotai";
+import { RESET } from "jotai/utils";
+import {
+  BaseViewDraft,
+  FilterGroup,
+  ViewConfig,
+  ViewSortConfig,
+} from "@/features/base/types/base.types";
+import { viewDraftAtomFamily } from "@/features/base/atoms/view-draft-atom";
+
+export type UseViewDraftArgs = {
+  userId: string | undefined;
+  baseId: string | undefined;
+  viewId: string | undefined;
+  baselineFilter: FilterGroup | undefined;
+  baselineSorts: ViewSortConfig[] | undefined;
+};
+
+export type ViewDraftState = {
+  draft: BaseViewDraft | null;
+  effectiveFilter: FilterGroup | undefined;
+  effectiveSorts: ViewSortConfig[] | undefined;
+  isDirty: boolean;
+  setFilter: (filter: FilterGroup | undefined) => void;
+  setSorts: (sorts: ViewSortConfig[] | undefined) => void;
+  reset: () => void;
+  buildPromotedConfig: (baseline: ViewConfig) => ViewConfig;
+};
+
+// JSON-stringify equality is good enough for FilterGroup (pure data tree)
+// and ViewSortConfig[] — V8 preserves non-numeric key insertion order so
+// the same object graph serializes identically. Avoids pulling in
+// lodash/fast-deep-equal for two known-shaped types. (Spec "Dirty check".)
+function filterEq(a: FilterGroup | undefined, b: FilterGroup | undefined) {
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+function sortsEq(
+  a: ViewSortConfig[] | undefined,
+  b: ViewSortConfig[] | undefined,
+) {
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+
+export function useViewDraft(args: UseViewDraftArgs): ViewDraftState {
+  const { userId, baseId, viewId, baselineFilter, baselineSorts } = args;
+  const ready = !!(userId && baseId && viewId);
+
+  // Always mount an atom with a stable shape so hook order is consistent.
+  // When not ready we still feed a key, but we won't read/write it.
+  const atomKey = useMemo(
+    () => ({
+      userId: userId ?? "",
+      baseId: baseId ?? "",
+      viewId: viewId ?? "",
+    }),
+    [userId, baseId, viewId],
+  );
+  const [storedDraft, setDraft] = useAtom(viewDraftAtomFamily(atomKey));
+
+  const draft = ready ? storedDraft : null;
+
+  const setFilter = useCallback(
+    (next: FilterGroup | undefined) => {
+      if (!ready) return;
+      const current = storedDraft ?? null;
+      const mergedFilter = next;
+      const mergedSorts = current?.sorts;
+      if (mergedFilter === undefined && (mergedSorts === undefined || mergedSorts === null)) {
+        setDraft(RESET);
+        return;
+      }
+      setDraft({
+        filter: mergedFilter,
+        sorts: mergedSorts,
+        updatedAt: new Date().toISOString(),
+      });
+    },
+    [ready, storedDraft, setDraft],
+  );
+
+  const setSorts = useCallback(
+    (next: ViewSortConfig[] | undefined) => {
+      if (!ready) return;
+      const current = storedDraft ?? null;
+      const mergedFilter = current?.filter;
+      const mergedSorts = next;
+      if (mergedFilter === undefined && (mergedSorts === undefined || mergedSorts === null)) {
+        setDraft(RESET);
+        return;
+      }
+      setDraft({
+        filter: mergedFilter,
+        sorts: mergedSorts,
+        updatedAt: new Date().toISOString(),
+      });
+    },
+    [ready, storedDraft, setDraft],
+  );
+
+  const reset = useCallback(() => {
+    if (!ready) return;
+    setDraft(RESET);
+  }, [ready, setDraft]);
+
+  const effectiveFilter = useMemo(
+    () => (draft?.filter !== undefined ? draft.filter : baselineFilter),
+    [draft?.filter, baselineFilter],
+  );
+  const effectiveSorts = useMemo(
+    () => (draft?.sorts !== undefined ? draft.sorts : baselineSorts),
+    [draft?.sorts, baselineSorts],
+  );
+
+  const isDirty = useMemo(() => {
+    if (!draft) return false;
+    const filterDirty =
+      draft.filter !== undefined && !filterEq(draft.filter, baselineFilter);
+    const sortsDirty =
+      draft.sorts !== undefined && !sortsEq(draft.sorts, baselineSorts);
+    return filterDirty || sortsDirty;
+  }, [draft, baselineFilter, baselineSorts]);
+
+  const buildPromotedConfig = useCallback(
+    (baseline: ViewConfig): ViewConfig => ({
+      ...baseline,
+      filter: draft?.filter ?? baseline.filter,
+      sorts: draft?.sorts ?? baseline.sorts,
+    }),
+    [draft],
+  );
+
+  if (!ready) {
+    return {
+      draft: null,
+      effectiveFilter: baselineFilter,
+      effectiveSorts: baselineSorts,
+      isDirty: false,
+      setFilter: () => {},
+      setSorts: () => {},
+      reset: () => {},
+      buildPromotedConfig: (baseline) => baseline,
+    };
+  }
+
+  return {
+    draft,
+    effectiveFilter,
+    effectiveSorts,
+    isDirty,
+    setFilter,
+    setSorts,
+    reset,
+    buildPromotedConfig,
+  };
+}
+```
+
+- [ ] **Step 4: Type-check**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds. Hook has no consumers yet (Task 5 will wire it in).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-view-draft.ts
+git commit -m "feat(base): add useViewDraft hook for local filter/sort drafts"
+```
+
+---
+
+## Task 4: Extend `useBaseTable` with `baselineConfig` option
+
+**Files:**
+- Modify: `apps/client/src/features/base/hooks/use-base-table.ts` (signature ~line 224-228; `persistViewConfig` body ~line 371-396; exact block is `buildViewConfigFromTable(table, activeView.config)` at line 382)
+
+**Why:** Once `base-table.tsx` starts passing an `effectiveView` into `useBaseTable` (Task 5), the table's live `sorting` state will be seeded from the draft. The debounced `persistViewConfig` reads `state.sorting` (via `buildViewConfigFromTable`) and writes it back to the server — which would silently bake the draft into the server baseline every time the user resizes or reorders a column. The fix is: `persistViewConfig` overrides `sorts` and `filter` in the emitted config with the **real baseline** values, not the effective ones. To keep the hook's responsibilities tidy, existing callers stay unchanged — a new optional `opts.baselineConfig` parameter carries the baseline.
+
+- [ ] **Step 1: Change the signature**
+
+In `use-base-table.ts` find:
+
+```ts
+export function useBaseTable(
+  base: IBase | undefined,
+  rows: IBaseRow[],
+  activeView: IBaseView | undefined,
+): UseBaseTableResult {
+```
+
+Replace with:
+
+```ts
+export type UseBaseTableOptions = {
+  // When provided, `persistViewConfig` uses this as the authoritative
+  // filter/sorts for the server write. The table's live sorting state is
+  // ignored for that axis so a locally-drafted sort/filter (kept in
+  // `activeView.config` for rendering purposes) cannot leak into the
+  // auto-persist column-layout path. Optional to preserve existing
+  // callers that pass the real baseline as `activeView`.
+  baselineConfig?: ViewConfig;
+};
+
+export function useBaseTable(
+  base: IBase | undefined,
+  rows: IBaseRow[],
+  activeView: IBaseView | undefined,
+  opts: UseBaseTableOptions = {},
+): UseBaseTableResult {
+```
+
+- [ ] **Step 2: Use `baselineConfig` inside `persistViewConfig`**
+
+Find the `persistViewConfig` `useCallback` at ~line 371 and the `buildViewConfigFromTable(table, activeView.config)` call at ~line 382. Replace the inner body:
+
+Before (line 382):
+
+```ts
+const config = buildViewConfigFromTable(table, activeView.config);
+```
+
+After:
+
+```ts
+// `baseline` is the server-side-of-truth config. When the caller has
+// wrapped `activeView` with draft filter/sort values for render, they
+// pass the pre-wrap config here so we never round-trip drafts through
+// the column-layout auto-save path.
+const baseline = opts.baselineConfig ?? activeView.config;
+const config = buildViewConfigFromTable(table, baseline, {
+  sorts: baseline?.sorts,
+  filter: baseline?.filter,
+});
+```
+
+Also update the `persistViewConfig` dependency list at line 396 from `[activeView, base, table, updateViewMutation]` to `[activeView, base, table, updateViewMutation, opts.baselineConfig]`.
+
+- [ ] **Step 3: Type-check**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds. Existing callers (just `base-table.tsx` so far) didn't pass `opts`, so they get `baselineConfig: undefined` → `baseline = activeView.config` → behavior unchanged.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-base-table.ts
+git commit -m "refactor(base): accept baselineConfig option in useBaseTable"
+```
+
+---
+
+## Task 5: Integrate `useViewDraft` into `base-table.tsx` (render path only)
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-table.tsx` (imports near top; `activeView` memo ~line 40-43; rows query call ~line 52-53; `useBaseTable` call at line 88)
+
+**Scope:** Only the **render path**. At the end of this task:
+- The table renders from effective (draft-or-baseline) values.
+- The row query fetches using effective values.
+- Filters/sorts still auto-persist via the existing toolbar handlers (Task 6 rewires that).
+- No banner yet (Task 7/8).
+
+**Manual pre-test with DevTools:** At the end of the task, verify drafts render correctly by seeding localStorage directly.
+
+- [ ] **Step 1: Add imports**
+
+At the top of `base-table.tsx`, add:
+
+```tsx
+import useCurrentUser from "@/features/user/hooks/use-current-user";
+import { useViewDraft } from "@/features/base/hooks/use-view-draft";
+```
+
+- [ ] **Step 2: Wire the draft hook and build `effectiveView`**
+
+Insert after the `activeView` memo (currently at line 40-43 — the `useMemo` that resolves `activeView` from `views` and `activeViewId`), before the `activeFilter` / `activeSorts` lines:
+
+```tsx
+const { data: currentUser } = useCurrentUser();
+const {
+  draft: _draft,
+  effectiveFilter,
+  effectiveSorts,
+  isDirty,
+  setFilter: setDraftFilter,
+  setSorts: setDraftSorts,
+  reset: resetDraft,
+  buildPromotedConfig,
+} = useViewDraft({
+  userId: currentUser?.user.id,
+  baseId,
+  viewId: activeView?.id,
+  baselineFilter: activeView?.config?.filter,
+  baselineSorts: activeView?.config?.sorts,
+});
+
+// Render view: baseline merged with any local draft. Passed to
+// `useBaseTable` (for table state seeding) and to the toolbar (for badge
+// counts). The real `activeView` is still used as the auto-persist
+// baseline so drafts can't leak into column-layout writes.
+const effectiveView = useMemo(
+  () =>
+    activeView
+      ? {
+          ...activeView,
+          config: {
+            ...activeView.config,
+            filter: effectiveFilter,
+            sorts: effectiveSorts,
+          },
+        }
+      : undefined,
+  [activeView, effectiveFilter, effectiveSorts],
+);
+```
+
+- [ ] **Step 3: Replace the `activeFilter` / `activeSorts` lines**
+
+Before (~line 45-46):
+
+```tsx
+const activeFilter = activeView?.config?.filter;
+const activeSorts = activeView?.config?.sorts;
+```
+
+After:
+
+```tsx
+// Effective values drive the row query and the client-side position
+// sort guard below. The old `activeView.config` reads are no longer the
+// source of truth once drafts are involved.
+const activeFilter = effectiveFilter;
+const activeSorts = effectiveSorts;
+```
+
+(Renaming is intentionally minimal — downstream usages of `activeSorts` / `activeFilter` at `useBaseRowsQuery(...)` and in the position-sort memo keep working without further edits.)
+
+- [ ] **Step 4: Pass `effectiveView` + `baselineConfig` into `useBaseTable`**
+
+Before (~line 88):
+
+```tsx
+const { table, persistViewConfig } = useBaseTable(base, rows, activeView);
+```
+
+After:
+
+```tsx
+const { table, persistViewConfig } = useBaseTable(base, rows, effectiveView, {
+  baselineConfig: activeView?.config,
+});
+```
+
+- [ ] **Step 5: Type-check**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds. `isDirty`, `setDraftFilter`, `setDraftSorts`, `resetDraft`, `buildPromotedConfig` are declared-but-unused at this step; that's intentional — Tasks 6 and 8 consume them. TypeScript `noUnusedLocals` is not enabled in the client's `tsconfig` (check with `pnpm nx run client:build` — if it errors on unused, prefix with `_`).
+
+- [ ] **Step 6: Manual DevTools verification — USER-DRIVEN**
+
+> Do not run `pnpm dev` as an agent. Hand off to the user.
+
+Ask the user to:
+
+1. Run `pnpm dev` and open any base in the browser.
+2. In DevTools → Application → Local Storage, note the current user id from the cookie or any existing `docmost:*` key, then note the base id from the URL and the active view id (visible in the `activeViewId` atom via React DevTools, or pick the first view's id from the `["bases", baseId]` query data).
+3. In DevTools console:
+
+   ```js
+   // Seed a dummy draft that sorts by any existing propertyId desc.
+   const key = `docmost:base-view-draft:v1:${USER_ID}:${BASE_ID}:${VIEW_ID}`;
+   localStorage.setItem(key, JSON.stringify({
+     sorts: [{ propertyId: "<ANY_PROP_UUID>", direction: "desc" }],
+     updatedAt: new Date().toISOString(),
+   }));
+   location.reload();
+   ```
+
+Expected after reload:
+- Rows appear sorted by the seeded propertyId descending.
+- The sort popover badge shows `1`.
+- The sort popover, when opened, shows the drafted sort entry.
+
+Then run:
+
+```js
+localStorage.removeItem(key);
+location.reload();
+```
+
+Expected: rows revert to the baseline order; badge clears.
+
+If either side fails, stop and diagnose. Do not proceed to Task 6.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add apps/client/src/features/base/components/base-table.tsx
+git commit -m "feat(base): render table from effective (draft-or-baseline) view config"
+```
+
+---
+
+## Task 6: Rewire toolbar to write drafts instead of persisting immediately
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-toolbar.tsx` (remove `useUpdateViewMutation` / `buildViewConfigFromTable` usage for sort/filter — lines 19, 20, 116, 135-148, 150-169; badge sources at 118, 122-128; props type at 29-37)
+- Modify: `apps/client/src/features/base/components/base-table.tsx` (pass the new callbacks + effective view into `<BaseToolbar>`, ~line 192-200)
+
+**Why:** Today `handleSortsChange` and `handleFiltersChange` call `updateViewMutation.mutate(...)` directly — that's the "every change persists to everyone" behavior we're replacing. The toolbar gets two new callbacks (`onDraftSortsChange`, `onDraftFiltersChange`) from the parent and drops its internal mutation for these two axes. Badge counts must read from `effectiveView.config` so they reflect the user's draft, not the baseline.
+
+- [ ] **Step 1: Change the toolbar's props type**
+
+In `base-toolbar.tsx`, replace the `BaseToolbarProps` type (line 29-37):
+
+Before:
+
+```ts
+type BaseToolbarProps = {
+  base: IBase;
+  activeView: IBaseView | undefined;
+  views: IBaseView[];
+  table: Table<IBaseRow>;
+  onViewChange: (viewId: string) => void;
+  onAddView?: () => void;
+  onPersistViewConfig: () => void;
+};
+```
+
+After:
+
+```ts
+type BaseToolbarProps = {
+  base: IBase;
+  // Effective view — baseline merged with any local draft. Badge counts
+  // and sort/filter popover seed data read from this. The real baseline
+  // only enters via `onDraftSortsChange` / `onDraftFiltersChange`
+  // callbacks defined by the parent.
+  activeView: IBaseView | undefined;
+  views: IBaseView[];
+  table: Table<IBaseRow>;
+  onViewChange: (viewId: string) => void;
+  onAddView?: () => void;
+  onPersistViewConfig: () => void;
+  onDraftSortsChange: (sorts: ViewSortConfig[] | undefined) => void;
+  onDraftFiltersChange: (filter: FilterGroup | undefined) => void;
+};
+```
+
+Destructure the two new props in the function signature:
+
+Before (line 39-47):
+
+```ts
+export function BaseToolbar({
+  base,
+  activeView,
+  views,
+  table,
+  onViewChange,
+  onAddView,
+  onPersistViewConfig,
+}: BaseToolbarProps) {
+```
+
+After:
+
+```ts
+export function BaseToolbar({
+  base,
+  activeView,
+  views,
+  table,
+  onViewChange,
+  onAddView,
+  onPersistViewConfig,
+  onDraftSortsChange,
+  onDraftFiltersChange,
+}: BaseToolbarProps) {
+```
+
+- [ ] **Step 2: Remove the now-unused `updateViewMutation` and `buildViewConfigFromTable` imports/calls for sort/filter**
+
+The toolbar's `useUpdateViewMutation()` call at line 116 is only used by `handleSortsChange` and `handleFiltersChange`. Both are being rewritten. Delete:
+
+- The import at line 19:
+  ```ts
+  import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
+  ```
+- The import at line 20:
+  ```ts
+  import { buildViewConfigFromTable } from "@/features/base/hooks/use-base-table";
+  ```
+- The `const updateViewMutation = useUpdateViewMutation();` line at 116.
+
+- [ ] **Step 3: Rewrite the two handlers**
+
+Replace `handleSortsChange` (lines 135-148):
+
+Before:
+
+```ts
+const handleSortsChange = useCallback(
+  (newSorts: ViewSortConfig[]) => {
+    if (!activeView) return;
+    const config = buildViewConfigFromTable(table, activeView.config, {
+      sorts: newSorts,
+    });
+    updateViewMutation.mutate({
+      viewId: activeView.id,
+      baseId: base.id,
+      config,
+    });
+  },
+  [activeView, base.id, table, updateViewMutation],
+);
+```
+
+After:
+
+```ts
+const handleSortsChange = useCallback(
+  (newSorts: ViewSortConfig[]) => {
+    // Normalize empty to undefined so the draft hook can drop the `sorts`
+    // axis (and remove its localStorage entry when both axes go clean).
+    onDraftSortsChange(newSorts.length > 0 ? newSorts : undefined);
+  },
+  [onDraftSortsChange],
+);
+```
+
+Replace `handleFiltersChange` (lines 150-169):
+
+Before:
+
+```ts
+const handleFiltersChange = useCallback(
+  (newConditions: FilterCondition[]) => {
+    if (!activeView) return;
+    const filter: FilterGroup | undefined =
+      newConditions.length > 0
+        ? { op: "and", children: newConditions }
+        : undefined;
+    // `filter: undefined` in overrides removes the filter key; the helper's
+    // spread-then-overrides order means `undefined` wins over any base filter.
+    const config = buildViewConfigFromTable(table, activeView.config, {
+      filter,
+    });
+    updateViewMutation.mutate({
+      viewId: activeView.id,
+      baseId: base.id,
+      config,
+    });
+  },
+  [activeView, base.id, table, updateViewMutation],
+);
+```
+
+After:
+
+```ts
+const handleFiltersChange = useCallback(
+  (newConditions: FilterCondition[]) => {
+    // Wrap the AND-flat popover output into the engine's FilterGroup shape.
+    // Pass `undefined` to drop the filter axis from the draft entirely.
+    const filter: FilterGroup | undefined =
+      newConditions.length > 0
+        ? { op: "and", children: newConditions }
+        : undefined;
+    onDraftFiltersChange(filter);
+  },
+  [onDraftFiltersChange],
+);
+```
+
+- [ ] **Step 4: Wire the new callbacks + effective view in `base-table.tsx`**
+
+In `base-table.tsx`, near the existing callback block (before the `return`), add:
+
+```tsx
+const handleDraftSortsChange = useCallback(
+  (sorts: ViewSortConfig[] | undefined) => {
+    setDraftSorts(sorts && sorts.length > 0 ? sorts : undefined);
+  },
+  [setDraftSorts],
+);
+
+const handleDraftFiltersChange = useCallback(
+  (filter: FilterGroup | undefined) => {
+    setDraftFilter(filter);
+  },
+  [setDraftFilter],
+);
+```
+
+Add the imports needed for the callback types:
+
+```tsx
+import {
+  FilterGroup,
+  ViewSortConfig,
+} from "@/features/base/types/base.types";
+```
+
+Update the `<BaseToolbar>` JSX (currently at ~line 192-200) to pass `effectiveView` instead of `activeView` AND the two new callbacks:
+
+Before:
+
+```tsx
+<BaseToolbar
+  base={base}
+  activeView={activeView}
+  views={views}
+  table={table}
+  onViewChange={handleViewChange}
+  onAddView={handleAddView}
+  onPersistViewConfig={persistViewConfig}
+/>
+```
+
+After:
+
+```tsx
+<BaseToolbar
+  base={base}
+  activeView={effectiveView}
+  views={views}
+  table={table}
+  onViewChange={handleViewChange}
+  onAddView={handleAddView}
+  onPersistViewConfig={persistViewConfig}
+  onDraftSortsChange={handleDraftSortsChange}
+  onDraftFiltersChange={handleDraftFiltersChange}
+/>
+```
+
+- [ ] **Step 5: Type-check**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds. The toolbar's sort/filter badges now derive from `effectiveView.config` (because the parent passes `effectiveView` as `activeView`) — no further toolbar edits needed for the badge count issue flagged in the spec.
+
+- [ ] **Step 6: Manual verification — USER-DRIVEN**
+
+Ask the user to:
+
+1. Open a base in the browser.
+2. Open the filter popover, add a filter (pick any property → any op → any value).
+3. Observe: the row list updates locally, filter badge shows `1`.
+4. Open DevTools → Application → Local Storage → look for `docmost:base-view-draft:v1:...`. Expected: entry present with the filter in JSON.
+5. Hard-refresh (cmd+shift+R). The filter still applies locally.
+6. Open the base in an incognito window (same base URL) as a different user — or ask a teammate. Expected: no filter applied; the baseline view is unchanged.
+
+If step 5 or step 6 fails, stop and diagnose.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add apps/client/src/features/base/components/base-toolbar.tsx apps/client/src/features/base/components/base-table.tsx
+git commit -m "feat(base): route toolbar sort/filter changes through local draft"
+```
+
+---
+
+## Task 7: Build the `BaseViewDraftBanner` component
+
+**Files:**
+- Create: `apps/client/src/features/base/components/base-view-draft-banner.tsx`
+
+Pure presentational. No data fetching, no state. Mounts the banner only when `isDirty === true` and shows "Reset" always, "Save for everyone" only when `canSave`.
+
+- [ ] **Step 1: Create the component file**
+
+Create `apps/client/src/features/base/components/base-view-draft-banner.tsx`:
+
+```tsx
+import { Paper, Group, Text, Button } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+
+type BaseViewDraftBannerProps = {
+  isDirty: boolean;
+  canSave: boolean;
+  onReset: () => void;
+  onSave: () => void;
+  saving: boolean;
+};
+
+export function BaseViewDraftBanner({
+  isDirty,
+  canSave,
+  onReset,
+  onSave,
+  saving,
+}: BaseViewDraftBannerProps) {
+  const { t } = useTranslation();
+  if (!isDirty) return null;
+  return (
+    <Paper withBorder radius="sm" px="md" py="xs" bg="yellow.0">
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap="xs" wrap="nowrap">
+          <IconInfoCircle size={16} />
+          <Text size="sm">
+            {t("Filter and sort changes are visible only to you.")}
+          </Text>
+        </Group>
+        <Group gap="sm" wrap="nowrap">
+          <Button variant="subtle" color="gray" size="xs" onClick={onReset}>
+            {t("Reset")}
+          </Button>
+          {canSave && (
+            <Button size="xs" onClick={onSave} loading={saving}>
+              {t("Save for everyone")}
+            </Button>
+          )}
+        </Group>
+      </Group>
+    </Paper>
+  );
+}
+```
+
+- [ ] **Step 2: Type-check**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds. Component has no consumers yet.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/components/base-view-draft-banner.tsx
+git commit -m "feat(base): add view draft banner component"
+```
+
+---
+
+## Task 8: Mount the banner and wire the save flow in `base-table.tsx`
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-table.tsx`
+
+**What this task adds:**
+- `useSpaceQuery` + `useSpaceAbility` → `canSave = spaceAbility.can(SpaceCaslAction.Edit, SpaceCaslSubject.Base)`.
+- `useUpdateViewMutation` hook invocation at the page level.
+- `handleSaveDraft` callback that composes `buildPromotedConfig(activeView.config)` → `updateViewMutation.mutateAsync(...)` → `resetDraft()` → success toast.
+- `<BaseViewDraftBanner>` mounted between page chrome and `<BaseToolbar>`.
+
+- [ ] **Step 1: Add imports**
+
+Add to the top of `base-table.tsx`:
+
+```tsx
+import { notifications } from "@mantine/notifications";
+import { useSpaceQuery } from "@/features/space/queries/space-query";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability";
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from "@/features/space/permissions/permissions.type";
+import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
+import { BaseViewDraftBanner } from "@/features/base/components/base-view-draft-banner";
+```
+
+- [ ] **Step 2: Wire the space ability and the save handler**
+
+Insert after the `useViewDraft` / `effectiveView` block, before the `useBaseRowsQuery` call:
+
+```tsx
+// `useSpaceQuery` is guarded by `enabled: !!spaceId` internally, so
+// passing `""` when `base` hasn't loaded yet is safe. See
+// use-history-restore.tsx for the same pattern.
+const { data: space } = useSpaceQuery(base?.spaceId ?? "");
+const spaceAbility = useSpaceAbility(space?.membership?.permissions);
+const canSave = spaceAbility.can(
+  SpaceCaslAction.Edit,
+  SpaceCaslSubject.Base,
+);
+
+const updateViewMutation = useUpdateViewMutation();
+
+const handleSaveDraft = useCallback(async () => {
+  if (!activeView || !base) return;
+  // `buildPromotedConfig` preserves all non-draft baseline fields
+  // (widths/order/visibility) and only overwrites filter/sorts when the
+  // draft has divergent values.
+  const config = buildPromotedConfig(activeView.config);
+  try {
+    await updateViewMutation.mutateAsync({
+      viewId: activeView.id,
+      baseId: base.id,
+      config,
+    });
+    resetDraft();
+    notifications.show({ message: t("View updated for everyone") });
+  } catch {
+    // `useUpdateViewMutation` already shows a red toast on error and
+    // rolls back the optimistic cache; keep the draft so the user can
+    // retry without re-typing.
+  }
+}, [
+  activeView,
+  base,
+  buildPromotedConfig,
+  resetDraft,
+  t,
+  updateViewMutation,
+]);
+```
+
+- [ ] **Step 3: Mount the banner**
+
+Update the `return` block. Before (~line 190-215):
+
+```tsx
+return (
+  <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <BaseToolbar ... />
+    <GridContainer ... />
+  </div>
+);
+```
+
+After:
+
+```tsx
+return (
+  <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <BaseViewDraftBanner
+      isDirty={isDirty}
+      canSave={canSave}
+      onReset={resetDraft}
+      onSave={handleSaveDraft}
+      saving={updateViewMutation.isPending}
+    />
+    <BaseToolbar
+      base={base}
+      activeView={effectiveView}
+      views={views}
+      table={table}
+      onViewChange={handleViewChange}
+      onAddView={handleAddView}
+      onPersistViewConfig={persistViewConfig}
+      onDraftSortsChange={handleDraftSortsChange}
+      onDraftFiltersChange={handleDraftFiltersChange}
+    />
+    <GridContainer
+      table={table}
+      properties={base.properties}
+      onCellUpdate={handleCellUpdate}
+      onAddRow={handleAddRow}
+      baseId={baseId}
+      onColumnReorder={handleColumnReorder}
+      onResizeEnd={handleResizeEnd}
+      onRowReorder={handleRowReorder}
+      hasNextPage={hasNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      onFetchNextPage={fetchNextPage}
+    />
+  </div>
+);
+```
+
+(The `<BaseToolbar>` / `<GridContainer>` props are re-listed verbatim from Task 6 — no behavioral change to them here; this step only adds the banner above.)
+
+- [ ] **Step 4: Type-check**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds. The previously "declared-but-unused" `isDirty`, `resetDraft`, and `buildPromotedConfig` are now consumed.
+
+- [ ] **Step 5: Manual verification — USER-DRIVEN**
+
+Ask the user to:
+
+1. Open a base.
+2. Apply a filter via the popover.
+   - Expected: the yellow banner appears with info icon + "Filter and sort changes are visible only to you." on the left; "Reset" and "Save for everyone" on the right.
+3. Click **Reset**.
+   - Expected: banner disappears; filter popover badge clears; rows revert to baseline.
+4. Apply a filter again. Click **Save for everyone**.
+   - Expected: banner disappears; notification "View updated for everyone" appears.
+5. Hard-refresh the page.
+   - Expected: filter is still applied (baseline has caught up). No banner.
+6. Open the same base in a second browser profile / incognito as a different user.
+   - Expected: that user sees the saved filter.
+7. As a viewer (a user with Read but not Edit on Base): open the base, apply a filter.
+   - Expected: banner appears but only shows "Reset" — no "Save for everyone" button.
+
+If any of these fails, stop and diagnose.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/client/src/features/base/components/base-table.tsx
+git commit -m "feat(base): mount draft banner and wire save-for-everyone flow"
+```
+
+---
+
+## Task 9: Final manual QA pass — USER-DRIVEN
+
+> Do not run `pnpm dev` as an agent. Ask the user to step through the spec's "Manual QA checklist" end-to-end. This is a verification task, not a commit task. If any check fails, open a sub-task to fix before continuing.
+
+Reference: spec section "Manual QA checklist" (`.claude/superpowers/specs/2026-04-20-base-view-draft-design.md` lines 425-451).
+
+- [ ] **Step 1: Single user, single tab**
+  - Apply a filter → banner appears, row list updates locally.
+  - Click Reset → banner disappears, filter popover reverts, rows revert.
+  - Apply a filter and a sort → click Save for everyone → banner disappears → refresh → filter/sort is the new baseline.
+  - Apply a filter then delete it via the popover → banner disappears → refresh → baseline unchanged (no deleted filter restored).
+
+- [ ] **Step 2: Single user, multiple tabs**
+  - Open base in tab A and tab B.
+  - In tab A, add a sort → tab B re-renders with the same sort (badge + row order) → tab B shows the banner.
+  - In tab B, click Reset → tab A's banner disappears and sort reverts.
+
+- [ ] **Step 3: Multi-user baseline race**
+  - User X (editor) opens base, applies a filter (draft).
+  - User Y (another editor) saves a new baseline via their own Save flow.
+  - User X's client receives the websocket `base:schema:bumped` → `["bases", baseId]` invalidates → `activeView.config` updates.
+  - Expected: X's `effectiveFilter` still shows X's draft filter. Banner stays. No UI prompt.
+  - X clicks Reset → X sees Y's new baseline.
+
+- [ ] **Step 4: Permission gating**
+  - Log in as a space Viewer (Read but not Edit on `Base`).
+  - Open base, apply a filter.
+  - Expected: banner appears but shows only "Reset" — no "Save for everyone" button.
+
+- [ ] **Step 5: Reset with popover open**
+  - Open the filter popover, add conditions.
+  - Without closing the popover, click Reset (the banner is above the popover).
+  - Expected: popover closes on outside-click; the next open shows baseline conditions.
+
+- [ ] **Step 6: Save clears draft + updates server**
+  - Save. Banner vanishes.
+  - In DevTools → Application → Local Storage: `docmost:base-view-draft:v1:{user}:{base}:{view}` is absent.
+  - Open the base in incognito / second-account browser: the filter/sort is present from the server.
+
+- [ ] **Step 7: Browser storage cleared**
+  - In DevTools, wipe `localStorage`.
+  - Expected: base re-renders with baseline, banner gone.
+
+- [ ] **Step 8: Column layout still auto-saves (regression check)**
+  - With a filter draft active, drag a column to reorder.
+  - Wait ~1s for the debounce.
+  - Expected: column order persists (open base in another tab; order matches) AND the filter draft remains a draft (baseline's filter on the server is still the pre-draft state). Verify via the server API or a second-account browser.
+
+---
+
+## Follow-ups (out of scope for v1)
+
+- Draft column layout (widths, order, visibility) — spec "Future extension #1".
+- Server-side per-user drafts for cross-device sync — spec "Future extension #2".
+- "Save as new view" split-button — spec "Future extension #3".
+- Baseline-changed hint inside the banner — spec "Future extension #4".
+- One-time in-product hint explaining the new draft-then-save behavior — spec "Rollout" mitigation note.
diff --git a/.claude/superpowers/specs/2026-04-20-base-page-property-design.md b/.claude/superpowers/specs/2026-04-20-base-page-property-design.md
new file mode 100644
index 000000000..4f9ced972
--- /dev/null
+++ b/.claude/superpowers/specs/2026-04-20-base-page-property-design.md
@@ -0,0 +1,309 @@
+# Base `page` Property Type — Design Spec
+
+**Date:** 2026-04-20
+**Status:** Draft
+**Feature area:** `apps/server/src/core/base`, `apps/client/src/features/base`, `apps/server/src/core/page`
+
+## Goal
+
+Add a new base property type `page` that lets a user search for and link **one existing page** per cell. Modeled on how the editor's `@` page-mention works — the picker searches existing pages workspace-wide (with current-space prioritized) and the cell renders a live pill with the page's icon and title. No page is auto-created from the picker; users can only link pages that already exist.
+
+Why: today users who want a page-reference column would have to paste a URL into a `url` cell, which loses the icon + title and doesn't validate. We also want to avoid the Focalboard-style pattern of auto-creating a page-row per table row, which would bloat the pages tree.
+
+## Non-goals (v1)
+
+- **Multiple pages per cell.** Single page only. Forward-compatible: the schema widens trivially to `z.union([z.uuid(), z.array(z.uuid())])` + an `allowMultiple` type option later, with zero data migration (see "Future extension" below).
+- **Sorting by page title.** Would require a JOIN against `pages` in the row-list query; skip in v1. Filter suffices.
+- **Creating pages from within the picker.**
+- **Cross-workspace page linking.**
+- **Rich previews / hover cards** showing page excerpts — pill-only.
+- **Confluence-style section grouping** in the property type picker (e.g. the "Page and live doc" section in the screenshot). Flat list for v1; grouping is a separate polish task.
+
+## UX overview
+
+### Picker (edit mode)
+
+- Popover modeled on [cell-person.tsx](../../../apps/client/src/features/base/components/cells/cell-person.tsx) but stripped for single-select. `width=300`, `position="bottom-start"`, `trapFocus`.
+- Top: search input, auto-focused. If a page is currently linked, a removable "tag" for it sits above the search (same shape as `personTag`).
+- Body: results list (max 25), fed by `searchSuggestions({ query, includePages: true, spaceId: base.spaceId, limit: 25 })` — reuses the existing suggestion endpoint, which prioritizes `spaceId` results.
+- Each row: `{icon or IconFileDescription} {title}` + muted space name on the right (so cross-space picks are visually distinct).
+- Empty-query state: if pulling recent-pages is easy to plug in, show recent pages; otherwise "Type to search…" hint.
+- Click or Enter on a highlighted row → `onCommit(pageId)`, popover closes.
+- Esc / click-outside → `onCancel`.
+- Clicking the "Remove" affordance on the current tag → `onCommit(null)`.
+- Keyboard: reuse `useListKeyboardNav`.
+
+### View mode
+
+- Empty cell → empty placeholder (same class as `cellClasses.emptyValue`).
+- Resolved page → pill `{icon or IconFileDescription} {title}`, anchor that navigates to `buildPageUrl(space.slug, slugId, title)` using the helper that [mention-view.tsx](../../../apps/client/src/features/editor/components/mention/mention-view.tsx) already uses.
+- Unresolved (deleted or viewer has no access) → greyed pill "Page not found", no link, `aria-disabled`.
+- Single click on the pill = navigate. Double-click on the cell = open picker (same rule grid-cell applies to other types).
+
+### Sort / filter UI
+
+- [view-sort-config.tsx](../../../apps/client/src/features/base/components/views/view-sort-config.tsx): exclude `page` properties from the sortable set.
+- [view-filter-config.tsx](../../../apps/client/src/features/base/components/views/view-filter-config.tsx): filter editor branch for `page` with operators `isEmpty`, `isNotEmpty`, `any`, `none`. The value picker reuses the same search dropdown from the cell picker.
+
+## Data model
+
+### Cell value
+
+- **Stored shape:** `string` (page UUID) or `null`. Parallels `person` in single mode.
+- **Example:** `{ "01998b7e-...": "01998b80-..." }` — property UUID → page UUID.
+
+### Property type options
+
+- **v1:** empty `{}` (reuse `emptyTypeOptionsSchema`).
+- **Future:** `{ allowMultiple?: boolean }`.
+
+### Schema additions
+
+**Server — [base.schemas.ts](../../../apps/server/src/core/base/base.schemas.ts):**
+
+```ts
+export const BasePropertyType = {
+  // ...existing entries...
+  PAGE: 'page',
+} as const;
+
+// typeOptionsSchemaMap
+[BasePropertyType.PAGE]: emptyTypeOptionsSchema,
+
+// cellValueSchemaMap
+[BasePropertyType.PAGE]: z.uuid(),
+```
+
+**Client — [base.types.ts](../../../apps/client/src/features/base/types/base.types.ts):**
+
+```ts
+export type BasePropertyType = ... | 'page';
+export type PageTypeOptions = Record<string, never>;
+```
+
+### Property kind & engine
+
+**[engine/kinds.ts](../../../apps/server/src/core/base/engine/kinds.ts):**
+
+```ts
+export const PropertyKind = {
+  // ...existing...
+  PAGE: 'page',
+} as const;
+
+// propertyKind()
+case BasePropertyType.PAGE:
+  return PropertyKind.PAGE;
+```
+
+**[engine/predicate.ts](../../../apps/server/src/core/base/engine/predicate.ts):** new `pageCondition()` handler — shape follows `selectCondition()` (single UUID stored as text):
+
+- `isEmpty` / `isNotEmpty` → `textCell` is null or empty
+- `eq` / `neq` → text equality / inequality (null-safe for `neq`)
+- `any` → `textCell IN (...)`
+- `none` → `textCell NOT IN (...)` or null
+
+Wired into the `switch (kind)` in `buildCondition`:
+```ts
+case PropertyKind.PAGE:
+  return pageCondition(eb, cond);
+```
+
+**[engine/sort.ts](../../../apps/server/src/core/base/engine/sort.ts):** no new branch. `page` falls into the default text-sentinel path (sorts by raw UUID string, which is unhelpful but harmless — the sort UI won't expose this type in v1).
+
+### Type conversion
+
+**[base.schemas.ts `CellConversionContext`](../../../apps/server/src/core/base/base.schemas.ts:191):** add a new field:
+
+```ts
+export type CellConversionContext = {
+  fromTypeOptions?: unknown;
+  userNames?: Map<string, string>;
+  attachmentNames?: Map<string, string>;
+  pageTitles?: Map<string, string>; // NEW
+};
+```
+
+**[base-type-conversion.task.ts](../../../apps/server/src/core/base/tasks/base-type-conversion.task.ts):** when `fromType === 'page'`, batch-load titles via the same page repo path used by the new resolver endpoint (see below) and populate `ctx.pageTitles`.
+
+**`attemptCellConversion` branches:**
+- `page → text`: resolve `ctx.pageTitles.get(uuid)` → title (or `""` if missing).
+- `page → *` (anything else): return `{converted: true, value: null}`.
+- `* → page`: return `{converted: true, value: null}` (free text or other IDs can't be coerced to a valid page UUID).
+
+## Server: page resolver endpoint
+
+New endpoint for cell hydration on the client. Reusing `/pages/info` is inappropriate — it returns full page content and is one-at-a-time.
+
+### `POST /bases/pages/resolve`
+
+**Request:**
+```ts
+{ pageIds: string[] }  // 1 <= length <= 100, enforced server-side; 400 on violation
+```
+
+**Response:**
+```ts
+{
+  items: Array<{
+    id: string;
+    slugId: string;
+    title: string | null;
+    icon: string | null;
+    spaceId: string;
+    space: { id: string; slug: string; name: string };
+  }>;
+}
+```
+
+### Behavior
+
+1. Deduplicate input IDs.
+2. Select from `pages` where `id IN (...)` AND `deletedAt IS NULL` AND `workspaceId = current`.
+3. Filter the result set through `pagePermissionRepo.filterAccessiblePageIds({ pageIds, userId })` — same mechanism used by [search.service.ts:131-139](../../../apps/server/src/core/search/search.service.ts).
+4. Join `spaces` to include `space.slug` and `space.name` for navigation.
+5. Silently omit any ID the user can't see (deleted, restricted, cross-workspace). The client treats any requested ID missing from `items` as "Page not found".
+
+### Code layout
+
+- **Controller:** add method to [base.controller.ts](../../../apps/server/src/core/base/controllers/base.controller.ts) at path `@Post('pages/resolve')`. Guarded by the same `JwtAuthGuard` + workspace check the rest of `/bases/*` uses.
+- **Service:** new file `apps/server/src/core/base/services/base-page-resolver.service.ts` with `resolvePagesForBase(pageIds, workspaceId, userId)`. Keeps the coupling to `PageRepo` + `PagePermissionRepo` isolated to this one file.
+- **Module:** wire the new service into [base.module.ts](../../../apps/server/src/core/base/base.module.ts). `PageRepo` + `PagePermissionRepo` are already shared modules.
+
+## Client: cell component & resolver
+
+### Batch resolver hook
+
+New file `apps/client/src/features/base/queries/base-page-resolver-query.ts`:
+
+```ts
+export function useResolvedPages(pageIds: string[]): Map<string, ResolvedPage | null>
+```
+
+- Deduplicate + sort IDs to form a stable React Query key.
+- Fetch `POST /bases/pages/resolve` with `{ pageIds }`.
+- Return a `Map` keyed by every requested ID — `null` for any ID absent from the server response.
+- `staleTime: 30_000`, `gcTime: 5 * 60_000`.
+- Realtime invalidation: listen for existing page-level websocket events (rename, delete) and invalidate the query when a touched ID intersects our key. Exact event names to be surveyed during plan writing.
+
+### Cell component
+
+New file `apps/client/src/features/base/components/cells/cell-page.tsx`:
+
+```ts
+type CellPageProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+```
+
+**Behavior:**
+- Parse value: accept `string` only (ignore arrays — they'd be from a future multi mode that we drop until upgraded).
+- `useResolvedPages([value])` — yes even for single lookups; the hook dedupes internally so multiple cells sharing the same page ID hit one request.
+- View mode: resolved → pill with icon+title, anchor to `buildPageUrl`. Unresolved → greyed "Page not found".
+- Edit mode: popover picker (see UX overview). Search via existing `searchSuggestions`.
+
+Wire into [grid-cell.tsx](../../../apps/client/src/features/base/components/grid/grid-cell.tsx):
+
+```ts
+const cellComponents = {
+  // ...existing...
+  page: CellPage,
+};
+```
+
+### Property type picker
+
+[property-type-picker.tsx](../../../apps/client/src/features/base/components/property/property-type-picker.tsx): append one entry (after `file`):
+
+```ts
+{ type: "page", icon: IconFileDescription, labelKey: "Page" },
+```
+
+### Filter editor
+
+[view-filter-config.tsx](../../../apps/client/src/features/base/components/views/view-filter-config.tsx): new branch for `page`:
+- Operators: `isEmpty`, `isNotEmpty`, `any`, `none`.
+- Value picker for `any`/`none`: reuses the same `searchSuggestions`-backed search dropdown from the cell picker — user picks one or more pages as filter operands.
+
+### Sort editor
+
+[view-sort-config.tsx](../../../apps/client/src/features/base/components/views/view-sort-config.tsx): exclude `page` from the list of sortable property types.
+
+## Testing
+
+### Server — unit
+
+- **Schema:** `validateCellValue('page', uuid)` passes; with garbage string / number → fails; with `null` → passes (null = empty).
+- **Conversion:**
+  - `attemptCellConversion('page', 'text', uuid, { pageTitles: Map<uuid,title> })` → resolved title.
+  - Same call with empty `pageTitles` → `""`.
+  - `page → number/date/select/…` → `{converted: true, value: null}`.
+  - `text → page` with any string input → `{converted: true, value: null}`.
+- **Predicate:** for each operator (`isEmpty`, `isNotEmpty`, `eq`, `neq`, `any`, `none`), `pageCondition()` returns the expected Kysely expression shape.
+
+### Server — integration
+
+- **Resolver endpoint `POST /bases/pages/resolve`:**
+  - valid IDs in an accessible space → present in `items`
+  - deleted pages (trash) → absent
+  - pages in a space the user isn't a member of → absent
+  - pages in another workspace → absent
+  - empty array → 400
+  - array length > 100 → 400
+- **Row CRUD:** create a property of type `page`, write a cell with a UUID, read back → round-trip shape is `string`.
+- **View filter:** create a view config with `{ op: 'any', propertyId, value: [uuidA, uuidB] }`, hit row-list, verify only matching rows returned.
+
+### Client — unit (Vitest + React Testing Library)
+
+- `cell-page.test.tsx`:
+  - view mode with resolved page → renders pill with icon + title and an `<a>` to the computed URL
+  - view mode with unresolved page (null in resolver map) → renders greyed "Page not found", no `<a>`
+  - double-click opens picker
+  - Enter on highlighted result commits `pageId`
+  - Esc cancels
+  - Remove tag button commits `null`
+- `base-page-resolver-query.test.ts`:
+  - dedupes IDs
+  - stable query key across re-renders with same set
+  - missing IDs render as `null` in the returned map
+
+### Manual QA checklist
+
+- Link a page in the same space.
+- Link a page in another space → pill shows, picker shows muted space-name hint.
+- Remove link → cell empties.
+- Delete linked page (via trash) → cell flips to "Page not found" on next resolver refetch.
+- Viewer loses space access → same "Page not found" fallback.
+- Rename linked page → within ≤30s (staleTime) the pill reflects the new title; realtime event should also trigger refetch.
+- Filter: `isEmpty`, `isNotEmpty`, `any` (multi-select), `none`.
+- Conversion `page → text` populates cells with page titles.
+- Conversion `text → page` wipes cells.
+
+## Rollout
+
+- **No DB migration.** All changes are code-only: new enum value, new cell-value validator entry, new engine kind branch, new endpoint.
+- **No feature flag.** The type appears in the picker as soon as the build ships. Backwards-compatible since `'page'` is a new type identifier.
+- Existing bases continue to work unchanged.
+
+## Risks & open questions
+
+- **30s staleTime.** Renames take up to 30s to propagate without realtime invalidation. The realtime hook should shrink this to near-zero in practice; verify in QA. If it feels slow, drop `staleTime` to `0` and rely solely on realtime + refetch-on-window-focus.
+- **"Page not found" label.** i18n-friendly; run through the translation pipeline. Consider whether to differentiate deleted vs. restricted — current answer: no, one label covers both and matches Confluence's behavior.
+- **Cross-space name exposure.** The picker surfaces the space name of pages the user can access cross-space. This is already exposed via the existing page-mention flow, so no new exposure, but flag in review.
+
+## Future extension (multiple pages per cell)
+
+When `allowMultiple` lands:
+
+1. Widen cell-value schema: `z.uuid()` → `z.union([z.uuid(), z.array(z.uuid())])`. Existing single-UUID cells continue to validate.
+2. Add `allowMultiple` boolean to `pageTypeOptionsSchema` (default `false` for existing properties).
+3. In [predicate.ts](../../../apps/server/src/core/base/engine/predicate.ts), branch `pageCondition` on `allowMultiple`: `true` → reuse `arrayOfIdsCondition`; `false` → keep the current text-based path.
+4. Client cell normalizes on read (`Array.isArray(value) ? value : typeof value === 'string' ? [value] : []`), mirrors [cell-person.tsx:33](../../../apps/client/src/features/base/components/cells/cell-person.tsx).
+5. No data writes required for existing cells.
+
+This spec leaves room for that change without locking the storage shape.
diff --git a/.claude/superpowers/specs/2026-04-20-base-view-draft-design.md b/.claude/superpowers/specs/2026-04-20-base-view-draft-design.md
new file mode 100644
index 000000000..017bda17e
--- /dev/null
+++ b/.claude/superpowers/specs/2026-04-20-base-view-draft-design.md
@@ -0,0 +1,479 @@
+# Base View Draft (Local-First Filter & Sort) — Design Spec
+
+**Date:** 2026-04-20
+**Status:** Draft
+**Feature area:** `apps/client/src/features/base` (client-only)
+
+## Goal
+
+Make filter and sort changes on a base view **local-first**: they apply instantly for the editing user, are scoped to their own browser/profile, and never touch the server baseline until the user explicitly clicks "Save for everyone". A banner at the top of the table surfaces the draft state and lets the user either promote the draft to the shared baseline or discard it.
+
+This removes the current Notion-unlike behavior where every filter/sort tweak is auto-persisted and immediately inflicted on every teammate viewing the same view.
+
+## Non-goals (v1)
+
+- **Column layout in draft mode.** Column visibility, order, and widths continue to flow through the existing debounced `persistViewConfig` path in [use-base-table.ts:371-396](../../../apps/client/src/features/base/hooks/use-base-table.ts). No draft behavior for them. (Listed as a future extension.)
+- **Server-side per-user drafts.** localStorage only. A user clearing their browser storage, switching devices, or using a different browser profile loses drafts — by design.
+- **"Save as new view".** The screenshot hints at a dropdown caret next to the Save button for a "save as new view" split-action. Not in v1.
+- **Kanban / calendar.** Only the `table` view type exists today; spec scopes to it but the hook is type-agnostic and will apply trivially when other view types land.
+- **Automatic garbage collection of stale drafts.** Drafts persist indefinitely until the user resets or saves. No TTL, no eager cleanup when baseline values match the draft.
+- **Conflict UI.** If another user writes a new baseline while I have local drafts, my draft silently wins on my client. No "baseline changed" warning.
+
+## UX overview
+
+### Draft banner
+
+Placement: **between** the page title and [BaseToolbar](../../../apps/client/src/features/base/components/base-toolbar.tsx), inside [base-table.tsx](../../../apps/client/src/features/base/components/base-table.tsx) above the `<BaseToolbar />` node (around [base-table.tsx:192](../../../apps/client/src/features/base/components/base-table.tsx)). The banner is part of the table's own layout, not a workspace-level chrome element, because it's tied to a specific view.
+
+Render condition: `isDirty === true` (see "Dirty check").
+
+Layout (match the reference screenshot):
+
+- Mantine `<Paper withBorder radius="sm" px="md" py="xs">` with a soft background (`bg="yellow.0"` or `bg="orange.0"` depending on theme palette — pick whichever tolerates dark mode) and a small info icon on the left.
+- Left region: short message — `t("Filter and sort changes are visible only to you.")`.
+- Right region (a `<Group gap="sm">`):
+  - `<Button variant="subtle" color="gray" size="xs">{t("Reset")}</Button>` — underline-on-hover "text link" feel; wipes the draft.
+  - `<Button variant="filled" size="xs">{t("Save for everyone")}</Button>` — primary accent (project's default theme color — orange in the screenshot maps to Mantine's configured `primaryColor`, so `color` is omitted and the theme default is used).
+- The "Save for everyone" button is **omitted entirely** for users without edit permission (see "Permission gating"). "Reset" always shows.
+- The banner never animates in/out on every keystroke — it only appears/disappears when `isDirty` flips. Add a Mantine `<Transition mounted={isDirty} transition="slide-down" duration={120}>` wrap if the flip is jarring; otherwise mount unconditionally with a `{isDirty && ...}` guard.
+
+### Filter/sort editors in draft mode
+
+No UI affordance changes inside the filter or sort popovers themselves. They keep the same open-on-click, add/remove/edit flow. The only behavioral change is that their `onChange` callback writes to the draft store rather than firing `updateView` — completely transparent to the editor components.
+
+### Reset behavior
+
+Click Reset → the draft hook removes its localStorage entry → the table re-renders reading filter/sorts from `activeView.config` (the server baseline). Any currently-open filter/sort popover closes on outside click as usual; if it's open when the user clicks Reset, the next render shows the baseline values. No notification — the banner disappearing is sufficient feedback.
+
+### Save for everyone
+
+Click Save → call the existing `useUpdateViewMutation` from [base-view-query.ts:43-112](../../../apps/client/src/features/base/queries/base-view-query.ts) with `{ viewId, baseId, config: { ...serverBaseline, filter: draft.filter, sorts: draft.sorts } }`. On success, clear the localStorage key and show a Mantine notification `t("View updated for everyone")`. On error, keep the draft; the mutation already wires the error toast.
+
+### Permission gating
+
+A user can edit this base iff their space membership grants `SpaceCaslAction.Edit, SpaceCaslSubject.Base` — the same check the server enforces in [base-view.controller.ts:68](../../../apps/server/src/core/base/controllers/base-view.controller.ts). Viewers still get local drafts (the entire point is that local changes don't require edit permission), but their "Save for everyone" button is hidden.
+
+**Client caveat:** [permissions.type.ts](../../../apps/client/src/features/space/permissions/permissions.type.ts) currently only exports `Settings`, `Member`, and `Page` subjects. The server enum has `Base` but the client enum doesn't. The spec adds `Base = "base"` to `SpaceCaslSubject` and widens the `SpaceAbility` union — that's a one-line change plus import fix.
+
+## Data model
+
+### localStorage key
+
+```
+docmost:base-view-draft:v1:{userId}:{baseId}:{viewId}
+```
+
+- Namespace prefix `docmost:base-view-draft:` keeps us from colliding with other consumers.
+- `v1` is the schema version so a future breaking change can shed old entries by skipping.
+- `{userId}` scopes drafts so a shared-device login-swap doesn't leak drafts across accounts. `userId` comes from the existing `useCurrentUser()` hook (returns `{ data: ICurrentUser }` — read `user?.user.id`), the same helper used by other authenticated client code.
+- `{baseId}` and `{viewId}` together uniquely identify which table state the draft applies to.
+
+### Value shape
+
+```ts
+// apps/client/src/features/base/types/base.types.ts (additive)
+export type BaseViewDraft = {
+  filter?: FilterGroup;
+  sorts?: ViewSortConfig[];
+  updatedAt: string; // ISO timestamp, written on each put — used only for diagnostics
+};
+```
+
+Both `filter` and `sorts` are optional, independently. An absent field means "inherit baseline for that axis". That matters because a user who's only dirtied sorts but not filters should see the baseline filter unchanged if the baseline's filter later shifts.
+
+Serialized as JSON by Jotai's `atomWithStorage` (which JSON-stringifies on write and parses on read). No schema validation on read — if the parse fails or the shape looks wrong, Jotai yields `null` and the hook falls back to baseline.
+
+## Client architecture
+
+### Storage atom family
+
+**File:** `apps/client/src/features/base/atoms/view-draft-atom.ts`
+
+Follow the existing Jotai storage pattern in [home-tab-atom.ts](../../../apps/client/src/features/home/atoms/home-tab-atom.ts) and [auth-tokens-atom.ts](../../../apps/client/src/features/auth/atoms/auth-tokens-atom.ts) — `atomWithStorage` is the codebase convention for localStorage-backed state. Since our key is dynamic per (user, base, view), pair it with `atomFamily` from `jotai/utils`:
+
+```ts
+import { atomFamily, atomWithStorage } from "jotai/utils";
+import { BaseViewDraft } from "@/features/base/types/base.types";
+
+export type ViewDraftKey = {
+  userId: string;
+  baseId: string;
+  viewId: string;
+};
+
+const keyFor = (k: ViewDraftKey) =>
+  `docmost:base-view-draft:v1:${k.userId}:${k.baseId}:${k.viewId}`;
+
+export const viewDraftAtomFamily = atomFamily(
+  (k: ViewDraftKey) =>
+    atomWithStorage<BaseViewDraft | null>(keyFor(k), null),
+  (a, b) =>
+    a.userId === b.userId && a.baseId === b.baseId && a.viewId === b.viewId,
+);
+```
+
+`atomWithStorage` handles JSON serialization, cross-tab sync via the `storage` event, and SSR-safe lazy reads out of the box — no hand-rolled `localStorage.getItem/setItem` or `window.addEventListener("storage", ...)` needed. The comparator passed as `atomFamily`'s second argument ensures the same (user, base, view) triple always resolves to the same atom instance, so React Query-style object identity issues don't cause atoms to be recreated per render.
+
+### Hook: `useViewDraft`
+
+**File:** `apps/client/src/features/base/hooks/use-view-draft.ts`
+
+Thin wrapper that binds the atom family to the rendering layer, adds the passthrough-when-undefined guard, and derives `effectiveFilter` / `effectiveSorts` / `isDirty` / `buildPromotedConfig` from the atom's value:
+
+```ts
+export type ViewDraftState = {
+  draft: BaseViewDraft | null;
+  effectiveFilter: FilterGroup | undefined;
+  effectiveSorts: ViewSortConfig[] | undefined;
+  isDirty: boolean;
+  setFilter: (filter: FilterGroup | undefined) => void;
+  setSorts: (sorts: ViewSortConfig[] | undefined) => void;
+  reset: () => void;
+  buildPromotedConfig: (baseline: ViewConfig) => ViewConfig;
+};
+
+export function useViewDraft(args: {
+  userId: string | undefined;
+  baseId: string | undefined;
+  viewId: string | undefined;
+  baselineFilter: FilterGroup | undefined;
+  baselineSorts: ViewSortConfig[] | undefined;
+}): ViewDraftState;
+```
+
+**Behavior:**
+
+1. If any of `userId / baseId / viewId` is undefined → return a passthrough state (`draft=null`, `isDirty=false`, setters no-op, `effective*` fall through to baseline). Guards the initial-load window where auth / activeView hasn't resolved yet.
+2. Otherwise, `useAtom(viewDraftAtomFamily({ userId, baseId, viewId }))` gives `[draft, setDraft]`. Jotai reads from localStorage on first access and writes on every set.
+3. `setFilter(next)` and `setSorts(next)` compute `merged = { ...(draft ?? {}), [axis]: next, updatedAt: new Date().toISOString() }`. If the result has both `filter` and `sorts` back to `undefined` (the user cleared all local divergence), call `setDraft(RESET)` instead of writing an empty object. (`RESET` is `jotai/utils`' sentinel — it removes the key from localStorage.) This keeps "orphan" drafts from lingering.
+4. `reset()` is `setDraft(RESET)`.
+5. `isDirty` is `draft !== null && (!shallowEqualFilter(draft.filter, baselineFilter) || !shallowEqualSorts(draft.sorts, baselineSorts))`. Note the per-axis `??` fallback doesn't appear here because `null/undefined` is the "no local divergence" signal for that axis; only a defined-and-different value counts as dirty.
+6. `buildPromotedConfig(baseline)` returns `{ ...baseline, filter: draft?.filter ?? baseline.filter, sorts: draft?.sorts ?? baseline.sorts }`. Preserves all non-draft config fields (widths, order, visibility) and only overwrites the two axes that may have diverged.
+
+**Return composition:**
+
+- `effectiveFilter = draft?.filter ?? baselineFilter`
+- `effectiveSorts = draft?.sorts ?? baselineSorts`
+
+**Cross-tab sync is free.** `atomWithStorage` subscribes to the `storage` event internally — a filter change in tab A triggers a re-render in tab B with no extra code. No manual listener required.
+
+### Integration into `useBaseTable` and `base-table.tsx`
+
+`useBaseTable` at [use-base-table.ts:224](../../../apps/client/src/features/base/hooks/use-base-table.ts) currently derives the table's initial sort from `activeView.config.sorts`. In the new world the table's sort/filter state must come from the **effective** values (draft-or-baseline), not the raw `activeView.config`.
+
+Two cut options were considered:
+
+**Option A (chosen): drive from effective values via props.** `useBaseTable` takes an additional `effectiveConfig?: ViewConfig` parameter (or, cleaner, the caller passes a shallow-merged `activeView` whose `config` is `{ ...activeView.config, filter: effective.filter, sorts: effective.sorts }`). `buildSortingState` and the row query already read from `activeView.config`, so the cleanest shape is to mutate the config the hook receives, not to introduce a new parameter.
+
+**Option B (rejected): thread draft deep into `useBaseTable`.** Adds the concept of drafts to a hook that only cares about the rendered state. Muddies responsibilities.
+
+Going with A. In [base-table.tsx](../../../apps/client/src/features/base/components/base-table.tsx):
+
+```ts
+// NEW: wire the draft hook
+const { data: user } = useCurrentUser();
+const { draft, effectiveFilter, effectiveSorts, isDirty, setFilter, setSorts, reset, buildPromotedConfig } =
+  useViewDraft({
+    userId: user?.user.id,
+    baseId,
+    viewId: activeView?.id,
+    baselineFilter: activeView?.config?.filter,
+    baselineSorts: activeView?.config?.sorts,
+  });
+
+// Swap the raw `activeView` for a view with effective config so the table and row query see drafts.
+const effectiveView = useMemo(
+  () =>
+    activeView
+      ? { ...activeView, config: { ...activeView.config, filter: effectiveFilter, sorts: effectiveSorts } }
+      : undefined,
+  [activeView, effectiveFilter, effectiveSorts],
+);
+
+// Row query reads effective filter/sorts.
+const { data: rowsData, ... } = useBaseRowsQuery(
+  base ? baseId : undefined,
+  effectiveFilter,
+  effectiveSorts,
+);
+
+// Table is seeded from effectiveView for rendering, but the auto-persist
+// write-path uses the real `activeView.config` as the baseline so draft
+// filter/sort values can never leak into a column-layout save.
+// See "Filter & sort write-path changes" below for the exact mechanism.
+const { table, persistViewConfig } = useBaseTable(base, rows, effectiveView, {
+  baselineConfig: activeView?.config,
+});
+```
+
+The server-roundtrip `persistViewConfig` keeps being called for column layout changes. It reads from `baselineConfig` — never from the effective/draft state — so a pending layout write cannot bake draft filter/sort values into the server baseline. See the next subsection for the exact implementation.
+
+### Filter & sort write-path changes
+
+Today, filter/sort editors feed `BaseToolbar`'s handlers:
+
+- [base-toolbar.tsx:135-148](../../../apps/client/src/features/base/components/base-toolbar.tsx) `handleSortsChange` → builds config via `buildViewConfigFromTable(table, activeView.config, { sorts: newSorts })` → `updateViewMutation.mutate(...)`.
+- [base-toolbar.tsx:150-169](../../../apps/client/src/features/base/components/base-toolbar.tsx) `handleFiltersChange` → same pattern with `{ filter }`.
+
+Both write directly to the server. That's the exact site to branch.
+
+**New `base-toolbar.tsx`:** accept two new callbacks from `base-table.tsx`:
+
+```ts
+onDraftSortsChange: (sorts: ViewSortConfig[]) => void;
+onDraftFiltersChange: (filter: FilterGroup | undefined) => void;
+```
+
+The toolbar drops its internal `updateViewMutation.mutate` calls for sort/filter (retains them for view tabs / view type flip if any exists elsewhere). `handleSortsChange` becomes:
+
+```ts
+const handleSortsChange = useCallback(
+  (newSorts: ViewSortConfig[]) => {
+    onDraftSortsChange(newSorts); // writes to useViewDraft via base-table
+  },
+  [onDraftSortsChange],
+);
+```
+
+Same for filters — the FilterCondition[]→FilterGroup wrapping logic at [base-toolbar.tsx:152-157](../../../apps/client/src/features/base/components/base-toolbar.tsx) stays; only the final dispatch target changes.
+
+**`base-table.tsx`** wires those callbacks to the draft hook:
+
+```ts
+const handleDraftSortsChange = useCallback(
+  (sorts: ViewSortConfig[]) => setSorts(sorts.length ? sorts : undefined),
+  [setSorts],
+);
+const handleDraftFiltersChange = useCallback(
+  (filter: FilterGroup | undefined) => setFilter(filter),
+  [setFilter],
+);
+```
+
+The "normalize empty to undefined" rule is how we let the draft go clean after the user deletes every filter — the draft hook's "remove key if both axes are undefined" rule then kicks in.
+
+**Toolbar badge counts:** [base-toolbar.tsx:118-128](../../../apps/client/src/features/base/components/base-toolbar.tsx) currently derives `sorts` and `conditions` from `activeView.config`. Switch these to read from the **effective** config (`effectiveView.config`) so the toolbar badges reflect the draft's count, not the baseline. The toolbar already accepts `activeView` — pass it `effectiveView` instead, since everything the toolbar reads from `activeView` (name, sorts, filter) should be in the effective form.
+
+**The `buildViewConfigFromTable` call site in `handleColumnReorder` / `handleResizeEnd` / field-visibility:** these continue reading from `activeView.config` (the real baseline) and going through `updateViewMutation`. They do **not** read from the draft. This is deliberate — column layout stays auto-persisted.
+
+However: `buildViewConfigFromTable` currently spreads its `base` argument and emits `sorts` from the live table state. For the debounced `persistViewConfig` call at [use-base-table.ts:382](../../../apps/client/src/features/base/hooks/use-base-table.ts), the `base` arg is the effective config (because we pass `effectiveView` into `useBaseTable`), but the emitted `sorts` comes from the table's live state — which was seeded from effective. That means if the user drafts a sort and then reorders a column, the debounced persist would write `{ ...effectiveConfig, sorts: draftSorts }` back to the server. **Bug.**
+
+Fix: when building the config for the auto-persist path in `persistViewConfig`, override the emitted `sorts` and `filter` with the **baseline** values, not the effective ones. Concretely, change [use-base-table.ts:382](../../../apps/client/src/features/base/hooks/use-base-table.ts) to
+
+```ts
+const config = buildViewConfigFromTable(table, activeView.config, {
+  sorts: activeView.config?.sorts,
+  filter: activeView.config?.filter,
+});
+```
+
+where `activeView` in that callsite is the **real** activeView (not the effective one). So `useBaseTable` needs both: the effective view for seeding and rendering, and the real baseline for the persist path.
+
+Simplest refactor: give `useBaseTable` an optional `baselineConfig?: ViewConfig` argument. If omitted (existing callers), behave as today. If provided, `persistViewConfig` uses `baselineConfig` for sort/filter overrides. `base-table.tsx` passes `activeView.config` as the baseline and the effective-wrapped view as the active.
+
+This keeps `useBaseTable`'s own responsibilities tidy and makes the "drafts don't leak into the layout write-path" rule explicit.
+
+**Note on `useBaseTable`'s re-seed effect:** A draft edit changes `effectiveView.config.filter/sorts`, which propagates through the `derivedColumnOrder` / `derivedColumnVisibility` memos and re-fires the sync effect at [use-base-table.ts:280](../../../apps/client/src/features/base/hooks/use-base-table.ts). This is harmless because (a) `activeView.id` is unchanged, so the full re-seed branch doesn't trigger, and (b) the `hasPendingEdit` branch preserves live column state when no layout mutation is pending, and adopts derived values otherwise — those derived values are still driven by the same `properties`, so they're content-equal. No action required, but worth naming so the implementer doesn't chase a non-issue.
+
+## Banner component
+
+**File:** `apps/client/src/features/base/components/base-view-draft-banner.tsx`
+
+```ts
+type BaseViewDraftBannerProps = {
+  isDirty: boolean;
+  canSave: boolean;
+  onReset: () => void;
+  onSave: () => void;
+  saving: boolean;
+};
+
+export function BaseViewDraftBanner({ isDirty, canSave, onReset, onSave, saving }: BaseViewDraftBannerProps) {
+  const { t } = useTranslation();
+  if (!isDirty) return null;
+  return (
+    <Paper withBorder radius="sm" px="md" py="xs" /* soft bg per theme */>
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap="xs" wrap="nowrap">
+          <IconInfoCircle size={16} />
+          <Text size="sm">{t("Filter and sort changes are visible only to you.")}</Text>
+        </Group>
+        <Group gap="sm" wrap="nowrap">
+          <Button variant="subtle" color="gray" size="xs" onClick={onReset}>{t("Reset")}</Button>
+          {canSave && (
+            <Button size="xs" onClick={onSave} loading={saving}>{t("Save for everyone")}</Button>
+          )}
+        </Group>
+      </Group>
+    </Paper>
+  );
+}
+```
+
+Wiring in [base-table.tsx](../../../apps/client/src/features/base/components/base-table.tsx), inserted between the existing page chrome and `<BaseToolbar />`:
+
+```ts
+const { data: space } = useSpaceQuery(base?.spaceId ?? "");
+const spaceAbility = useSpaceAbility(space?.membership?.permissions);
+const canSave = spaceAbility.can(SpaceCaslAction.Edit, SpaceCaslSubject.Base);
+const updateViewMutation = useUpdateViewMutation();
+const handleSaveDraft = useCallback(async () => {
+  if (!activeView || !base) return;
+  const config = buildPromotedConfig(activeView.config);
+  await updateViewMutation.mutateAsync({ viewId: activeView.id, baseId: base.id, config });
+  reset();
+  notifications.show({ message: t("View updated for everyone") });
+}, [activeView, base, buildPromotedConfig, reset, updateViewMutation, t]);
+
+return (
+  <div style={{...}}>
+    <BaseViewDraftBanner
+      isDirty={isDirty}
+      canSave={canSave}
+      onReset={reset}
+      onSave={handleSaveDraft}
+      saving={updateViewMutation.isPending}
+    />
+    <BaseToolbar ... />
+    <GridContainer ... />
+  </div>
+);
+```
+
+The `useSpaceQuery`/`useSpaceAbility` pair follows the same pattern as [use-history-restore.tsx:35-41](../../../apps/client/src/features/page-history/hooks/use-history-restore.tsx).
+
+## Cross-tab sync
+
+Inherited from `atomWithStorage`. Its internal subscription to the `storage` event re-notifies any Jotai-connected component on other tabs when the matching localStorage key changes, triggering a re-render with the new draft value. No hand-rolled listener in `useViewDraft`.
+
+React Query's row cache is keyed by `(baseId, filter, sorts, search)` — when the updated draft flows through `effectiveFilter` / `effectiveSorts` on the other tab, the row query refetches as a fresh infinite query via the normal path.
+
+Edge case: two tabs editing simultaneously — both writes land in localStorage, last-write-wins (same-user scope, acceptable).
+
+## Save flow (pseudocode)
+
+```ts
+async function onSaveForEveryone() {
+  if (!activeView || !base) return;
+  // 1. Compose the promoted config from the server baseline + draft values.
+  //    baseline is activeView.config (NOT effectiveView.config) because the
+  //    baseline might include layout fields (propertyWidths, propertyOrder,
+  //    hiddenPropertyIds, visiblePropertyIds) that we must preserve verbatim.
+  const config: ViewConfig = {
+    ...activeView.config,
+    filter: draft.filter ?? activeView.config.filter,
+    sorts: draft.sorts ?? activeView.config.sorts,
+  };
+  // 2. Fire the existing mutation. `updateViewMutation` already:
+  //    - optimistically updates the ["bases", baseId] query cache
+  //    - rolls back on error
+  //    - writes the server response back on success
+  await updateViewMutation.mutateAsync({ viewId: activeView.id, baseId: base.id, config });
+  // 3. Clear the draft. Because the baseline has now caught up to what the
+  //    draft said, isDirty flips to false and the banner unmounts.
+  reset();
+  notifications.show({ message: t("View updated for everyone") });
+}
+```
+
+Error handling: `useUpdateViewMutation` already shows a red toast and rolls back the optimistic cache update on failure. We do *not* call `reset()` in that case — the draft stays, the banner stays, the user can retry.
+
+## Dirty check
+
+`isDirty` lives inside `useViewDraft`. Returns `true` iff the draft file exists AND at least one of these is true:
+
+- `draft.filter !== undefined` AND `!deepEqualFilter(draft.filter, baselineFilter)`
+- `draft.sorts !== undefined` AND `!deepEqualSorts(draft.sorts, baselineSorts)`
+
+**Deep equality:** the codebase has no `lodash` or `fast-deep-equal` in [client package.json](../../../apps/client/package.json). Options:
+
+1. **`JSON.stringify` both sides and compare strings.** Trivially correct for `FilterGroup` (a pure data tree) and `ViewSortConfig[]`. Key ordering inside objects is deterministic in V8+ for non-numeric keys, which is the case here. Pick this — it's 4 lines and good enough for this shape.
+2. Hand-written structural compare — overkill for two types with known finite shapes.
+
+Go with option 1. Helpers live in `use-view-draft.ts`:
+
+```ts
+function filterEq(a: FilterGroup | undefined, b: FilterGroup | undefined) {
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+function sortsEq(a: ViewSortConfig[] | undefined, b: ViewSortConfig[] | undefined) {
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+```
+
+**Orphan suppression.** The agreed rule: when the draft's values equal the baseline, the banner hides. The dirty check above already does that — a draft with `filter: X` where baseline is also `X` yields `filterEq === true` for that axis, and if the sorts axis is also equal (or absent), `isDirty === false`. The key stays in localStorage (no eager GC), but the banner is invisible until the user next diverges or another tab updates the baseline.
+
+## Testing
+
+Per [CLAUDE.md](../../../CLAUDE.md), the client has no test infrastructure (no `vitest` in the workspace). This spec does not block on adding one. Testing is primarily manual QA + optional unit tests if Vitest is introduced alongside this feature.
+
+### Unit tests (proposed, Vitest — gated on harness being added)
+
+`use-view-draft.test.ts`:
+
+- **Initialize with no stored value.** Hook returns `draft=null`, `isDirty=false`, effective values fall through to baseline.
+- **`setFilter` writes to localStorage and updates state.** After `setFilter(X)`, `localStorage.getItem(key)` parses back to `{ filter: X, updatedAt: ... }`, `draft.filter === X`, `isDirty === true`.
+- **`setSorts` writes independently.** `draft.filter` stays undefined even after `setSorts(...)`, and vice versa.
+- **`setFilter(undefined)` then `setSorts(undefined)` removes the key.** After both axes are cleared, `localStorage.getItem(key)` is null.
+- **`reset` clears both state and storage.**
+- **Draft values equal to baseline → `isDirty === false` without clearing storage.** Set baseline to `B`, set draft filter to `B`, assert `isDirty === false` and `localStorage.getItem(key)` is still non-null (no eager GC).
+- **Baseline change while draft exists.** Baseline shifts from `B1` to `B2`, draft filter is `X`. Effective filter stays `X`, `isDirty` stays `true`. Then baseline shifts again to `X` — `isDirty` flips to `false` without draft being cleared.
+- **Cross-tab propagation (integration-level, not strictly a unit test).** `atomWithStorage` handles the `storage` event internally; the only thing our hook contributes is the derivation of `effectiveFilter` / `effectiveSorts` / `isDirty` from the atom value. A single assertion that writing to the atom value in one `Provider` context reflects in another suffices.
+- **Malformed storage value.** Seed localStorage with garbage under the computed key → `atomWithStorage` yields `null`, hook reports `draft=null`, `isDirty=false`, table receives baseline.
+- **`userId` missing → passthrough.** All setters are no-ops, `isDirty=false`, effective = baseline.
+
+### Manual QA checklist
+
+**Single user, single tab.**
+- Apply a filter. Banner appears. Row list updates locally.
+- Click Reset. Banner disappears. Filter in the popover reverts to baseline. Row list reverts.
+- Apply a filter and a sort. Click Save for everyone. Banner disappears. Refresh the page — the filter/sort is now the new baseline (i.e. came back from the server).
+- Apply a filter, then manually delete it via the filter popover. Banner disappears. Subsequent refresh does not restore the deleted filter (baseline untouched).
+
+**Single user, multiple tabs.**
+- Open base in tab A and tab B. In tab A, add a sort. Tab B re-renders with the same sort applied (verified by checking the sort popover badge and the row order). Tab B shows the banner.
+- In tab B, click Reset. Tab A's banner disappears and sort reverts.
+
+**Multi-user baseline race.**
+- User X (editor) opens base. Applies a filter (draft). User Y (editor) in another session saves a brand-new baseline via their own Save flow. User X's client receives the websocket `base:schema:bumped` → `["bases", baseId]` invalidates → `activeView.config` updates. User X's `effectiveFilter` still shows X's draft filter (draft wins). Banner stays. No UI prompt. If X now clicks Reset, they see Y's new baseline.
+
+**Permission gating.**
+- As a space Viewer (who has Read but not Edit on `Base`): open base, apply a filter. Banner appears but shows only "Reset" — no "Save for everyone" button.
+- Server check: attempting Save as a viewer would have been blocked by [base-view.controller.ts:68](../../../apps/server/src/core/base/controllers/base-view.controller.ts) anyway; the UI gate is belt-and-suspenders.
+
+**Reset with popover open.**
+- Open the filter popover and add conditions. Without closing the popover, click Reset (the banner is visible behind the popover dropdown — it's positioned above). Popover closes on outside-click, baseline conditions show next open.
+
+**Save clears draft + updates server.**
+- Save. Banner vanishes. localStorage key for `{user,base,view}` is absent. Re-open the base in an incognito/second-account browser — the filter/sort shows too (from the server).
+
+**Browser storage cleared.**
+- In DevTools, wipe `localStorage`. Base re-renders with baseline. Banner gone. Expected.
+
+## Rollout
+
+- **No DB migration.** No server change.
+- **No feature flag.** Behavior change ships as-is.
+- **No data migration.** Existing users have no drafts; the system starts empty.
+- **Behavioral change vs. today.** Existing users' muscle memory is "touch a filter → auto-saves for everyone". After this ships, that becomes "touch a filter → only I see it until I hit Save for everyone". This is the entire point of the feature but will surprise power users on day one.
+  - Mitigation: none in v1. A one-time popover/tooltip pointing at the banner ("New: filter and sort changes are now a draft until you save") is worth doing, but falls squarely in YAGNI territory for the first ship.
+  - **Followup:** consider a dismissible one-time in-product hint the first time a user diverges from baseline after the deploy. Flag this as a follow-up task; do not ship with v1.
+
+## Risks & open questions
+
+- **localStorage quota.** `FilterGroup` + `ViewSortConfig[]` is tiny — a realistic draft is under 2KB. A worst-case malicious user with thousands of views could hit the 5–10MB per-origin cap, but practically negligible. No cleanup logic needed.
+- **Users losing drafts via browser data clear.** Expected. The banner is a live indicator, not a durable source of truth. Flagged in non-goals.
+- **Multi-device divergence.** Same user on laptop and phone: drafts don't sync. Expected and flagged.
+- **Dropdown caret ("Save as new view") in the screenshot.** Explicitly out of scope for v1. If we add it, the caret menu would include:
+  1. "Save for everyone" (current behavior)
+  2. "Save as new view" (creates a new `IBaseView` with draft values baked into `config`)
+- **Baseline layout fields overriding draft.** Save flow does `{ ...activeView.config, filter: X, sorts: Y }`. If another user changed column widths right before Save, those widths land in the Save's payload (we already read the latest optimistic cache). Acceptable — the alternative (send a sparse patch with only `{filter, sorts}`) would require a server-side partial-update endpoint we don't have.
+- **Invalid draft for stale schema.** If a property is deleted while a user's draft references it by id, the predicate/sort engine on the server silently drops unknown property ids. Client-side, the sort/filter popover shows the condition with a missing-property label (existing behavior — the toolbar already does `properties.find((p) => p.id === …)` and tolerates the `undefined` case). No special handling needed here; the draft just falls away when the user next edits and doesn't re-add the dead condition.
+- **`SpaceCaslSubject.Base` missing from client enum.** Single-line fix at [permissions.type.ts:12](../../../apps/client/src/features/space/permissions/permissions.type.ts). Flagged so reviewers notice.
+
+## Future extension
+
+1. **Draft column layout.** Extend the draft shape to carry `propertyWidths`, `propertyOrder`, `hiddenPropertyIds`, `visiblePropertyIds`. Column reorder / hide / resize call the draft hook instead of `persistViewConfig`. `useBaseTable` then seeds column state from effective values. Mechanically identical to filter/sort — the hook already takes arbitrary ViewConfig fragments. The only reason this isn't in v1 is to minimize behavioral change surface and keep the spec scope narrow.
+2. **Server-side per-user drafts.** For cross-device sync, add a `base_view_drafts` table keyed by `(userId, viewId)` storing the same shape. The client hook swaps localStorage for a paired mutation + query. The banner UX stays identical.
+3. **Split-button save.** Dropdown caret next to "Save for everyone" offering "Save as new view" — creates an `IBaseView` via `createView` with the effective config. Deepens the Notion parallel.
+4. **Draft conflict hint.** When baseline changes while I have drafts, show a subtle "Baseline has changed since your last edit" line inside the banner with a "Discard draft and load latest" affordance. Expected to be low value in practice — flag once real users report it.
diff --git a/apps/client/package.json b/apps/client/package.json
index bd6585f1f..86b20d9d0 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -18,6 +18,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
     "@casl/react": "5.0.1",
+    "@docmost/base-formula": "workspace:*",
     "@docmost/editor-ext": "workspace:*",
     "@excalidraw/excalidraw": "0.18.0-3a5ef40",
     "@mantine/core": "8.3.18",
@@ -32,7 +33,8 @@
     "@slidoapp/emoji-mart-react": "1.1.5",
     "@tabler/icons-react": "3.40.0",
     "@tanstack/react-query": "5.90.17",
-    "@tanstack/react-virtual": "3.13.24",
+    "@tanstack/react-table": "8.21.3",
+    "@tanstack/react-virtual": "3.14.2",
     "alfaaz": "1.1.0",
     "axios": "1.16.0",
     "blueimp-load-image": "5.16.0",
diff --git a/apps/client/public/locales/de-DE/translation.json b/apps/client/public/locales/de-DE/translation.json
index 0368ad429..3b72cb8dd 100644
--- a/apps/client/public/locales/de-DE/translation.json
+++ b/apps/client/public/locales/de-DE/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} zu Favoriten hinzugefügt",
   "Removed {{name}} from favorites": "{{name}} aus Favoriten entfernt",
   "Page menu for {{name}}": "Seitenmenü für {{name}}",
-  "Create subpage of {{name}}": "Unterseite von {{name}} erstellen"
+  "Create subpage of {{name}}": "Unterseite von {{name}} erstellen",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/en-US/translation.json b/apps/client/public/locales/en-US/translation.json
index 278021657..f72ac2855 100644
--- a/apps/client/public/locales/en-US/translation.json
+++ b/apps/client/public/locales/en-US/translation.json
@@ -1085,5 +1085,41 @@
   "Added {{name}} to favorites": "Added {{name}} to favorites",
   "Removed {{name}} from favorites": "Removed {{name}} from favorites",
   "Page menu for {{name}}": "Page menu for {{name}}",
-  "Create subpage of {{name}}": "Create subpage of {{name}}"
+  "Create subpage of {{name}}": "Create subpage of {{name}}",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded.",
+  "Previous record": "Previous record",
+  "Next record": "Next record",
+  "Record actions": "Record actions",
+  "Delete record": "Delete record",
+  "Delete record?": "Delete record?",
+  "This action cannot be undone.": "This action cannot be undone.",
+  "to navigate": "to navigate",
+  "to close": "to close",
+  "Expand row {{number}}": "Expand row {{number}}",
+  "Saving…": "Saving…",
+  "Read-only": "Read-only",
+  "Loading…": "Loading…",
+  "Updated {{when}}": "Updated {{when}}",
+  "Add property": "Add property",
+  "Create property": "Create property",
+  "Hide properties": "Hide properties",
+  "Find a property type": "Find a property type",
+  "Properties": "Properties"
 }
diff --git a/apps/client/public/locales/es-ES/translation.json b/apps/client/public/locales/es-ES/translation.json
index 131977738..4deec9629 100644
--- a/apps/client/public/locales/es-ES/translation.json
+++ b/apps/client/public/locales/es-ES/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "Se agregó {{name}} a favoritos",
   "Removed {{name}} from favorites": "Se quitó {{name}} de favoritos",
   "Page menu for {{name}}": "Menú de página para {{name}}",
-  "Create subpage of {{name}}": "Crear subpágina de {{name}}"
+  "Create subpage of {{name}}": "Crear subpágina de {{name}}",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/fr-FR/translation.json b/apps/client/public/locales/fr-FR/translation.json
index 20f354421..6b543e0e4 100644
--- a/apps/client/public/locales/fr-FR/translation.json
+++ b/apps/client/public/locales/fr-FR/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} a été ajouté aux favoris",
   "Removed {{name}} from favorites": "{{name}} a été retiré des favoris",
   "Page menu for {{name}}": "Menu de la page pour {{name}}",
-  "Create subpage of {{name}}": "Créer une sous-page de {{name}}"
+  "Create subpage of {{name}}": "Créer une sous-page de {{name}}",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/it-IT/translation.json b/apps/client/public/locales/it-IT/translation.json
index 441c90f69..9407bf1c1 100644
--- a/apps/client/public/locales/it-IT/translation.json
+++ b/apps/client/public/locales/it-IT/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} aggiunto ai preferiti",
   "Removed {{name}} from favorites": "{{name}} rimosso dai preferiti",
   "Page menu for {{name}}": "Menu della pagina per {{name}}",
-  "Create subpage of {{name}}": "Crea sottopagina di {{name}}"
+  "Create subpage of {{name}}": "Crea sottopagina di {{name}}",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/ja-JP/translation.json b/apps/client/public/locales/ja-JP/translation.json
index 492868cf2..0e7cccbd3 100644
--- a/apps/client/public/locales/ja-JP/translation.json
+++ b/apps/client/public/locales/ja-JP/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} をお気に入りに追加しました",
   "Removed {{name}} from favorites": "{{name}} をお気に入りから削除しました",
   "Page menu for {{name}}": "{{name}} のページメニュー",
-  "Create subpage of {{name}}": "{{name}} のサブページを作成"
+  "Create subpage of {{name}}": "{{name}} のサブページを作成",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/ko-KR/translation.json b/apps/client/public/locales/ko-KR/translation.json
index 5847ab19a..ac0000e34 100644
--- a/apps/client/public/locales/ko-KR/translation.json
+++ b/apps/client/public/locales/ko-KR/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} 즐겨찾기에 추가됨",
   "Removed {{name}} from favorites": "{{name}} 즐겨찾기에서 제거됨",
   "Page menu for {{name}}": "{{name}}의 페이지 메뉴",
-  "Create subpage of {{name}}": "{{name}}의 하위 페이지 만들기"
+  "Create subpage of {{name}}": "{{name}}의 하위 페이지 만들기",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/nl-NL/translation.json b/apps/client/public/locales/nl-NL/translation.json
index 591c96746..810c95a81 100644
--- a/apps/client/public/locales/nl-NL/translation.json
+++ b/apps/client/public/locales/nl-NL/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} toegevoegd aan favorieten",
   "Removed {{name}} from favorites": "{{name}} verwijderd uit favorieten",
   "Page menu for {{name}}": "Paginamenu voor {{name}}",
-  "Create subpage of {{name}}": "Subpagina van {{name}} maken"
+  "Create subpage of {{name}}": "Subpagina van {{name}} maken",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/pt-BR/translation.json b/apps/client/public/locales/pt-BR/translation.json
index e2788f1fe..79137d237 100644
--- a/apps/client/public/locales/pt-BR/translation.json
+++ b/apps/client/public/locales/pt-BR/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} adicionado aos favoritos",
   "Removed {{name}} from favorites": "{{name}} removido dos favoritos",
   "Page menu for {{name}}": "Menu da página de {{name}}",
-  "Create subpage of {{name}}": "Criar subpágina de {{name}}"
+  "Create subpage of {{name}}": "Criar subpágina de {{name}}",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/ru-RU/translation.json b/apps/client/public/locales/ru-RU/translation.json
index 3d93ec67d..c15e27086 100644
--- a/apps/client/public/locales/ru-RU/translation.json
+++ b/apps/client/public/locales/ru-RU/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} добавлено в избранное",
   "Removed {{name}} from favorites": "{{name}} удалено из избранного",
   "Page menu for {{name}}": "Меню страницы для {{name}}",
-  "Create subpage of {{name}}": "Создать подстраницу для {{name}}"
+  "Create subpage of {{name}}": "Создать подстраницу для {{name}}",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/uk-UA/translation.json b/apps/client/public/locales/uk-UA/translation.json
index 6144df469..59a3a8022 100644
--- a/apps/client/public/locales/uk-UA/translation.json
+++ b/apps/client/public/locales/uk-UA/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "{{name}} додано до обраного",
   "Removed {{name}} from favorites": "{{name}} видалено з обраного",
   "Page menu for {{name}}": "Меню сторінки для {{name}}",
-  "Create subpage of {{name}}": "Створити підсторінку для {{name}}"
+  "Create subpage of {{name}}": "Створити підсторінку для {{name}}",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/public/locales/zh-CN/translation.json b/apps/client/public/locales/zh-CN/translation.json
index 40cd5c1ba..b5f5c8b0b 100644
--- a/apps/client/public/locales/zh-CN/translation.json
+++ b/apps/client/public/locales/zh-CN/translation.json
@@ -1084,5 +1084,23 @@
   "Added {{name}} to favorites": "已将 {{name}} 添加到收藏",
   "Removed {{name}} from favorites": "已将 {{name}} 从收藏中移除",
   "Page menu for {{name}}": "{{name}} 的页面菜单",
-  "Create subpage of {{name}}": "创建 {{name}} 的子页面"
+  "Create subpage of {{name}}": "创建 {{name}} 的子页面",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
 }
diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
index 789b48601..ab291ffea 100644
--- a/apps/client/src/App.tsx
+++ b/apps/client/src/App.tsx
@@ -38,6 +38,7 @@ import SpaceTrash from "@/pages/space/space-trash.tsx";
 import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
 import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
 import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
+import BasePage from "@/ee/base/pages/base-page.tsx";
 import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
 import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
 import TemplateList from "@/ee/template/pages/template-list";
@@ -106,6 +107,8 @@ export default function App() {
             element={<Page />}
           />
 
+          <Route path={"/base/:pageId"} element={<BasePage />} />
+
           <Route path={"/settings"}>
             <Route path={"account/profile"} element={<AccountSettings />} />
             <Route
diff --git a/apps/client/src/components/common/page-list-icon.tsx b/apps/client/src/components/common/page-list-icon.tsx
new file mode 100644
index 000000000..401559956
--- /dev/null
+++ b/apps/client/src/components/common/page-list-icon.tsx
@@ -0,0 +1,18 @@
+import { ThemeIcon } from "@mantine/core";
+import { IconFileDescription, IconTable } from "@tabler/icons-react";
+
+type Props = {
+  icon?: string | null;
+  isBase?: boolean;
+};
+
+export function PageListIcon({ icon, isBase }: Props) {
+  if (icon) {
+    return <>{icon}</>;
+  }
+  return (
+    <ThemeIcon variant="transparent" color="gray" size={18}>
+      {isBase ? <IconTable size={18} /> : <IconFileDescription size={18} />}
+    </ThemeIcon>
+  );
+}
diff --git a/apps/client/src/components/common/recent-changes.tsx b/apps/client/src/components/common/recent-changes.tsx
index f37b26f67..00b3146e2 100644
--- a/apps/client/src/components/common/recent-changes.tsx
+++ b/apps/client/src/components/common/recent-changes.tsx
@@ -4,15 +4,15 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ThemeIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils.ts";
 import { formattedDate } from "@/lib/time.ts";
 import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { IconFileDescription, IconFiles } from "@tabler/icons-react";
+import { PageListIcon } from "@/components/common/page-list-icon";
+import { IconFiles } from "@tabler/icons-react";
 import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
@@ -50,14 +50,10 @@ export default function RecentChanges({ spaceId }: Props) {
                     to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >
                     <Group wrap="nowrap">
-                      {page.icon || (
-                        <ThemeIcon variant="transparent" color="gray" size={18}>
-                          <IconFileDescription size={18} />
-                        </ThemeIcon>
-                      )}
+                      <PageListIcon icon={page.icon} isBase={page.isBase} />
 
                       <Text fw={500} size="md" lineClamp={1}>
-                        {page.title || t("Untitled")}
+                        {getPageTitle(page.title, page.isBase, t)}
                       </Text>
                     </Group>
                   </UnstyledButton>
diff --git a/apps/client/src/components/ui/destination-picker/page-row.tsx b/apps/client/src/components/ui/destination-picker/page-row.tsx
index a8f63b394..a9e068f70 100644
--- a/apps/client/src/components/ui/destination-picker/page-row.tsx
+++ b/apps/client/src/components/ui/destination-picker/page-row.tsx
@@ -3,6 +3,7 @@ import { ActionIcon } from "@mantine/core";
 import { IconChevronRight, IconFileDescription } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { IPage } from "@/features/page/types/page.types";
+import { getPageTitle } from "@/features/page/page.utils";
 import { PageChildren } from "./page-children";
 import classes from "./destination-picker.module.css";
 
@@ -95,7 +96,7 @@ export function PageRow({
         </div>
 
         <div className={classes.pageTitle}>
-          {page.title || t("Untitled")}
+          {getPageTitle(page.title, page.isBase, t)}
         </div>
       </div>
 
diff --git a/apps/client/src/ee/base/atoms/base-atoms.ts b/apps/client/src/ee/base/atoms/base-atoms.ts
new file mode 100644
index 000000000..213553fac
--- /dev/null
+++ b/apps/client/src/ee/base/atoms/base-atoms.ts
@@ -0,0 +1,43 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import { EditingCell } from "@/ee/base/types/base.types";
+
+// Atoms are scoped per-base via `pageId` so that two BaseTable instances on
+// the same page don't share UI state.
+
+export const activeViewIdAtomFamily = atomFamily((_pageId: string) =>
+  atom<string | null>(null),
+);
+
+export const editingCellAtomFamily = atomFamily((_pageId: string) =>
+  atom<EditingCell>(null),
+);
+
+export type FormulaEditorTarget = {
+  propertyId: string;
+  rowId: string | null;
+} | null;
+
+export const activeFormulaEditorAtomFamily = atomFamily((_pageId: string) =>
+  atom<FormulaEditorTarget>(null),
+);
+
+export const activePropertyMenuAtomFamily = atomFamily((_pageId: string) =>
+  atom<string | null>(null),
+);
+
+export const propertyMenuDirtyAtomFamily = atomFamily((_pageId: string) =>
+  atom<boolean>(false),
+);
+
+export const propertyMenuCloseRequestAtomFamily = atomFamily((_pageId: string) =>
+  atom<number>(0),
+);
+
+export const selectedRowIdsAtomFamily = atomFamily((_pageId: string) =>
+  atom<Set<string>>(new Set<string>()),
+);
+
+export const lastToggledRowIndexAtomFamily = atomFamily((_pageId: string) =>
+  atom<number | null>(null),
+);
diff --git a/apps/client/src/ee/base/atoms/formula-recompute-atom.ts b/apps/client/src/ee/base/atoms/formula-recompute-atom.ts
new file mode 100644
index 000000000..320c89beb
--- /dev/null
+++ b/apps/client/src/ee/base/atoms/formula-recompute-atom.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const formulaRecomputeAtom = atom<Record<string, string[]>>({});
diff --git a/apps/client/src/ee/base/atoms/reference-store-atom.ts b/apps/client/src/ee/base/atoms/reference-store-atom.ts
new file mode 100644
index 000000000..26bcdf8b6
--- /dev/null
+++ b/apps/client/src/ee/base/atoms/reference-store-atom.ts
@@ -0,0 +1,20 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import type { RowReferences } from "@/ee/base/types/base.types";
+
+// Per-base normalized store of resolved reference entities, hydrated from each
+// rows-page `references`. Keyed by pageId, matching base-atoms.ts.
+export const referenceStoreAtomFamily = atomFamily((_pageId: string) =>
+  atom<RowReferences>({ users: {}, pages: {} }),
+);
+
+export function mergeReferences(
+  prev: RowReferences,
+  next: RowReferences | undefined,
+): RowReferences {
+  if (!next) return prev;
+  return {
+    users: { ...prev.users, ...next.users },
+    pages: { ...prev.pages, ...next.pages },
+  };
+}
diff --git a/apps/client/src/ee/base/atoms/view-draft-atom.ts b/apps/client/src/ee/base/atoms/view-draft-atom.ts
new file mode 100644
index 000000000..83482cf86
--- /dev/null
+++ b/apps/client/src/ee/base/atoms/view-draft-atom.ts
@@ -0,0 +1,21 @@
+import { atomFamily, atomWithStorage } from "jotai/utils";
+import { BaseViewDraft } from "@/ee/base/types/base.types";
+
+export type ViewDraftKey = {
+  userId: string;
+  pageId: string;
+  viewId: string;
+};
+
+export const viewDraftStorageKey = (k: ViewDraftKey) =>
+  `docmost:base-view-draft:v1:${k.userId}:${k.pageId}:${k.viewId}`;
+
+// atomWithStorage handles JSON serialization and cross-tab sync. The custom
+// comparator ensures the same userId/pageId/viewId triple resolves to the
+// same atom instance, so Jotai's identity-equality cache hits still work.
+export const viewDraftAtomFamily = atomFamily(
+  (k: ViewDraftKey) =>
+    atomWithStorage<BaseViewDraft | null>(viewDraftStorageKey(k), null),
+  (a, b) =>
+    a.userId === b.userId && a.pageId === b.pageId && a.viewId === b.viewId,
+);
diff --git a/apps/client/src/ee/base/components/base-embed-title.tsx b/apps/client/src/ee/base/components/base-embed-title.tsx
new file mode 100644
index 000000000..7b4a69260
--- /dev/null
+++ b/apps/client/src/ee/base/components/base-embed-title.tsx
@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useDebouncedCallback } from "@mantine/hooks";
+import {
+  usePageQuery,
+  useUpdateTitlePageMutation,
+  updatePageData,
+} from "@/features/page/queries/page-query";
+import { useQueryEmit } from "@/features/websocket/use-query-emit";
+import { UpdateEvent } from "@/features/websocket/types";
+import localEmitter from "@/lib/local-emitter";
+import classes from "@/ee/base/styles/grid.module.css";
+
+// Editable base name for the inline embed. Follows the TitleEditor convention
+// (updatePageData + localEmitter + websocket emit) so the sidebar and other
+// clients stay in sync. Standalone pages use the page TitleEditor instead.
+export function BaseEmbedTitle({ pageId }: { pageId: string }) {
+  const { t } = useTranslation();
+  const { data: page } = usePageQuery({ pageId });
+  const { mutateAsync: updateTitleAsync } = useUpdateTitlePageMutation();
+  const emit = useQueryEmit();
+  const [value, setValue] = useState("");
+  const focusedRef = useRef(false);
+
+  // Keep in sync with the persisted title but never clobber active user input.
+  useEffect(() => {
+    if (!focusedRef.current) setValue(page?.title ?? "");
+  }, [page?.title]);
+
+  const commit = useCallback(() => {
+    const trimmed = value.trim();
+    if (!page || trimmed === (page.title ?? "")) return;
+    updateTitleAsync({ pageId, title: trimmed }).then((updated) => {
+      if (updated.title !== trimmed) return;
+      const event: UpdateEvent = {
+        operation: "updateOne",
+        spaceId: updated.spaceId,
+        entity: ["pages"],
+        id: updated.id,
+        payload: {
+          title: updated.title,
+          slugId: updated.slugId,
+          parentPageId: updated.parentPageId,
+          icon: updated.icon,
+        },
+      };
+      updatePageData(updated);
+      localEmitter.emit("message", event);
+      emit(event);
+    });
+  }, [value, page, pageId, updateTitleAsync, emit]);
+
+  const debouncedCommit = useDebouncedCallback(commit, 500);
+
+  // Force-save any pending edit on unmount (e.g. navigating away mid-type).
+  const commitRef = useRef(commit);
+  useEffect(() => {
+    commitRef.current = commit;
+  }, [commit]);
+  useEffect(() => () => commitRef.current(), []);
+
+  return (
+    <input
+      className={classes.embedTitleInput}
+      value={value}
+      placeholder={t("Untitled base")}
+      aria-label={t("Base name")}
+      onChange={(e) => {
+        setValue(e.currentTarget.value);
+        debouncedCommit();
+      }}
+      onFocus={() => {
+        focusedRef.current = true;
+      }}
+      onBlur={() => {
+        focusedRef.current = false;
+        commit();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.currentTarget.blur();
+        }
+        if (e.key === "Escape") {
+          setValue(page?.title ?? "");
+          e.currentTarget.blur();
+        }
+      }}
+    />
+  );
+}
diff --git a/apps/client/src/ee/base/components/base-table-skeleton.tsx b/apps/client/src/ee/base/components/base-table-skeleton.tsx
new file mode 100644
index 000000000..cd7dfc6fd
--- /dev/null
+++ b/apps/client/src/ee/base/components/base-table-skeleton.tsx
@@ -0,0 +1,92 @@
+import { Skeleton } from "@mantine/core";
+import gridClasses from "@/ee/base/styles/grid.module.css";
+import classes from "@/ee/base/styles/base-table-skeleton.module.css";
+
+const ROW_NUMBER_WIDTH = 64;
+const COLUMN_WIDTH = 180;
+const DEFAULT_COLUMN_COUNT = 6;
+const DEFAULT_ROW_COUNT = 10;
+
+// Deterministic widths prevent flicker between renders.
+const CELL_WIDTH_RATIOS = [0.78, 0.62, 0.84, 0.55, 0.71, 0.66];
+const HEADER_WIDTH_RATIOS = [0.42, 0.58, 0.5, 0.64, 0.46, 0.54];
+
+type BaseTableSkeletonProps = {
+  // Match the eventual content shape to avoid a jarring size jump on swap.
+  rows?: number;
+  columns?: number;
+};
+
+export function BaseTableSkeleton({
+  rows = DEFAULT_ROW_COUNT,
+  columns = DEFAULT_COLUMN_COUNT,
+}: BaseTableSkeletonProps = {}) {
+  const gridTemplateColumns = [
+    `${ROW_NUMBER_WIDTH}px`,
+    ...Array.from({ length: columns }, () => `${COLUMN_WIDTH}px`),
+  ].join(" ");
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.toolbar}>
+        <div className={classes.toolbarTabs}>
+          <Skeleton height={22} width={44} radius="sm" />
+          <Skeleton height={22} width={64} radius="sm" />
+          <Skeleton height={22} width={48} radius="sm" />
+        </div>
+        <div className={classes.toolbarActions}>
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+        </div>
+      </div>
+
+      <div className={classes.gridWrapper}>
+        <div className={classes.grid} style={{ gridTemplateColumns }}>
+          <div className={gridClasses.headerCell}>
+            <div className={classes.headerCellInner}>
+              <Skeleton height={14} width={14} circle />
+            </div>
+          </div>
+          {Array.from({ length: columns }).map((_, colIndex) => (
+            <div key={`h-${colIndex}`} className={gridClasses.headerCell}>
+              <div className={classes.headerCellInner}>
+                <Skeleton height={14} width={14} circle />
+                <Skeleton
+                  height={10}
+                  width={`${HEADER_WIDTH_RATIOS[colIndex % HEADER_WIDTH_RATIOS.length] * 100}%`}
+                  radius="sm"
+                />
+              </div>
+            </div>
+          ))}
+
+          {Array.from({ length: rows }).map((_, rowIndex) => (
+            <div key={`row-${rowIndex}`} style={{ display: "contents" }}>
+              <div className={gridClasses.cell}>
+                <div className={classes.cellInner}>
+                  <Skeleton height={10} width={18} radius="sm" />
+                </div>
+              </div>
+              {Array.from({ length: columns }).map((_, colIndex) => (
+                <div
+                  key={`cell-${rowIndex}-${colIndex}`}
+                  className={gridClasses.cell}
+                >
+                  <div className={classes.cellInner}>
+                    <Skeleton
+                      height={10}
+                      width={`${CELL_WIDTH_RATIOS[(rowIndex + colIndex) % CELL_WIDTH_RATIOS.length] * 100}%`}
+                      radius="sm"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/client/src/ee/base/components/base-table.tsx b/apps/client/src/ee/base/components/base-table.tsx
new file mode 100644
index 000000000..9bef830a9
--- /dev/null
+++ b/apps/client/src/ee/base/components/base-table.tsx
@@ -0,0 +1,70 @@
+import { GridContainer } from "@/ee/base/components/grid/grid-container";
+import { Table } from "@tanstack/react-table";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+} from "@/ee/base/types/base.types";
+
+type BaseTableProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  effectiveView: IBaseView | undefined;
+  table: Table<IBaseRow>;
+  pageId: string;
+  embedded?: boolean;
+  isFiltered: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onFetchNextPage: () => void;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  onAddRow: () => void;
+  onColumnReorder: (columnId: string, finishIndex: number) => void;
+  onResizeEnd: () => void;
+  onRowReorder: (
+    rowId: string,
+    targetRowId: string,
+    dropPosition: "above" | "below",
+  ) => void;
+  persistViewConfig: () => void;
+  scrollportRef: React.RefObject<HTMLDivElement>;
+  aboveBand?: React.ReactNode;
+};
+
+export function BaseTable({
+  base,
+  rows: _rows,
+  table,
+  pageId,
+  embedded,
+  isFiltered,
+  hasNextPage,
+  isFetchingNextPage,
+  onFetchNextPage,
+  onCellUpdate,
+  onAddRow,
+  onColumnReorder,
+  onResizeEnd,
+  onRowReorder,
+  scrollportRef,
+  aboveBand,
+}: BaseTableProps) {
+  return (
+    <GridContainer
+      table={table}
+      properties={base.properties}
+      onCellUpdate={onCellUpdate}
+      onAddRow={onAddRow}
+      pageId={pageId}
+      isFiltered={isFiltered}
+      onColumnReorder={onColumnReorder}
+      onResizeEnd={onResizeEnd}
+      onRowReorder={onRowReorder}
+      hasNextPage={hasNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      onFetchNextPage={onFetchNextPage}
+      scrollElement={embedded ? window : scrollportRef.current}
+      aboveBand={aboveBand ?? null}
+    />
+  );
+}
diff --git a/apps/client/src/ee/base/components/base-toolbar.tsx b/apps/client/src/ee/base/components/base-toolbar.tsx
new file mode 100644
index 000000000..935b6862e
--- /dev/null
+++ b/apps/client/src/ee/base/components/base-toolbar.tsx
@@ -0,0 +1,251 @@
+import { useState, useCallback, useMemo } from "react";
+import { ActionIcon, Tooltip, Badge } from "@mantine/core";
+import { Table } from "@tanstack/react-table";
+import {
+  IconSortAscending,
+  IconFilter,
+  IconEye,
+  IconDownload,
+  IconArrowsDiagonal,
+} from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+  ViewSortConfig,
+  FilterCondition,
+  FilterGroup,
+} from "@/ee/base/types/base.types";
+import { exportBaseToCsv } from "@/ee/base/services/base-service";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { ViewTabs } from "@/ee/base/components/views/view-tabs";
+import { ViewSortConfigPopover } from "@/ee/base/components/views/view-sort-config";
+import { ViewFilterConfigPopover } from "@/ee/base/components/views/view-filter-config";
+import { ViewPropertyVisibility } from "@/ee/base/components/views/view-property-visibility";
+import { useTranslation } from "react-i18next";
+import classes from "@/ee/base/styles/grid.module.css";
+import toolbarClasses from "@/ee/base/styles/base-toolbar.module.css";
+
+type BaseToolbarProps = {
+  base: IBase;
+  // Effective view (baseline merged with local draft). Badge counts and popover
+  // seed data read from this; the real baseline only enters via the draft callbacks.
+  activeView: IBaseView | undefined;
+  views: IBaseView[];
+  table: Table<IBaseRow>;
+  onViewChange: (viewId: string) => void;
+  onAddView?: () => void;
+  onPersistViewConfig: () => void;
+  onDraftSortsChange: (sorts: ViewSortConfig[] | undefined) => void;
+  onDraftFiltersChange: (filter: FilterGroup | undefined) => void;
+  onExpand?: () => void;
+  getViewShareUrl?: (viewId: string) => string | null;
+};
+
+export function BaseToolbar({
+  base,
+  activeView,
+  views,
+  table,
+  onViewChange,
+  onAddView,
+  onPersistViewConfig,
+  onDraftSortsChange,
+  onDraftFiltersChange,
+  onExpand,
+  getViewShareUrl,
+}: BaseToolbarProps) {
+  const { t } = useTranslation();
+  const editable = useBaseEditable();
+  const [sortOpened, setSortOpened] = useState(false);
+  const [filterOpened, setFilterOpened] = useState(false);
+  const [propertiesOpened, setPropertiesOpened] = useState(false);
+  const [exporting, setExporting] = useState(false);
+
+  const handleExport = useCallback(async () => {
+    if (exporting) return;
+    setExporting(true);
+    try {
+      await exportBaseToCsv(base.id);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: t("Failed to export CSV"),
+      });
+    } finally {
+      setExporting(false);
+    }
+  }, [base.id, exporting, t]);
+
+  const openToolbar = useCallback((panel: "sort" | "filter" | "properties") => {
+    setSortOpened(panel === "sort" ? (v) => !v : false);
+    setFilterOpened(panel === "filter" ? (v) => !v : false);
+    setPropertiesOpened(panel === "properties" ? (v) => !v : false);
+  }, []);
+
+  const sorts = activeView?.config?.sorts ?? [];
+  // The stored filter is a tree; the popover edits an AND-only flat list.
+  // Unwrap the top-level group's children when reading, rewrap on save.
+  const conditions = useMemo<FilterCondition[]>(() => {
+    const filter = activeView?.config?.filter;
+    if (!filter || filter.op !== "and") return [];
+    return filter.children.filter(
+      (c): c is FilterCondition => !("children" in c),
+    );
+  }, [activeView?.config?.filter]);
+
+  const hiddenPropertyCount = useMemo(() => {
+    const cols = table.getAllLeafColumns().filter((col) => col.id !== "__row_number");
+    return cols.filter((col) => col.getCanHide() && !col.getIsVisible()).length;
+  }, [table, table.getState().columnVisibility]);
+
+  const handleSortsChange = useCallback(
+    (newSorts: ViewSortConfig[]) => {
+      // Normalize empty to undefined so the draft hook drops the sorts axis.
+      onDraftSortsChange(newSorts.length > 0 ? newSorts : undefined);
+    },
+    [onDraftSortsChange],
+  );
+
+  const handleFiltersChange = useCallback(
+    (newConditions: FilterCondition[]) => {
+      // Wrap the AND-flat list into the engine's FilterGroup shape; undefined drops the axis.
+      const filter: FilterGroup | undefined =
+        newConditions.length > 0
+          ? { op: "and", children: newConditions }
+          : undefined;
+      onDraftFiltersChange(filter);
+    },
+    [onDraftFiltersChange],
+  );
+
+  return (
+    <div className={classes.toolbar}>
+      <ViewTabs
+        views={views}
+        activeViewId={activeView?.id}
+        pageId={base.id}
+        onViewChange={onViewChange}
+        onAddView={onAddView}
+        getViewShareUrl={getViewShareUrl}
+      />
+
+      <div className={classes.toolbarRight}>
+        {editable && (
+          <Tooltip label={t("Export CSV")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color="gray"
+              loading={exporting}
+              onClick={handleExport}
+            >
+              <IconDownload size={16} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+
+        <ViewFilterConfigPopover
+          opened={filterOpened}
+          onClose={() => setFilterOpened(false)}
+          conditions={conditions}
+          properties={base.properties}
+          onChange={handleFiltersChange}
+        >
+          <Tooltip label={t("Filter")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color={conditions.length > 0 ? "blue" : "gray"}
+              onClick={() => openToolbar("filter")}
+            >
+              <IconFilter size={16} />
+              {conditions.length > 0 && (
+                <Badge
+                  size="xs"
+                  circle
+                  color="blue"
+                  className={toolbarClasses.badgeDot}
+                >
+                  {conditions.length}
+                </Badge>
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </ViewFilterConfigPopover>
+
+        <ViewSortConfigPopover
+          opened={sortOpened}
+          onClose={() => setSortOpened(false)}
+          sorts={sorts}
+          properties={base.properties}
+          onChange={handleSortsChange}
+        >
+          <Tooltip label={t("Sort")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color={sorts.length > 0 ? "blue" : "gray"}
+              onClick={() => openToolbar("sort")}
+            >
+              <IconSortAscending size={16} />
+              {sorts.length > 0 && (
+                <Badge
+                  size="xs"
+                  circle
+                  color="blue"
+                  className={toolbarClasses.badgeDot}
+                >
+                  {sorts.length}
+                </Badge>
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </ViewSortConfigPopover>
+
+        <ViewPropertyVisibility
+          opened={propertiesOpened}
+          onClose={() => setPropertiesOpened(false)}
+          table={table}
+          properties={base.properties}
+          onPersist={onPersistViewConfig}
+        >
+          <Tooltip label={t("Hide properties")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color={hiddenPropertyCount > 0 ? "blue" : "gray"}
+              onClick={() => openToolbar("properties")}
+            >
+              <IconEye size={16} />
+              {hiddenPropertyCount > 0 && (
+                <Badge
+                  size="xs"
+                  circle
+                  color="blue"
+                  className={toolbarClasses.badgeDot}
+                >
+                  {hiddenPropertyCount}
+                </Badge>
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </ViewPropertyVisibility>
+
+        {onExpand && (
+          <Tooltip label={t("Open as page")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color="gray"
+              onClick={onExpand}
+            >
+              <IconArrowsDiagonal size={16} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/client/src/ee/base/components/base-view-draft-banner.tsx b/apps/client/src/ee/base/components/base-view-draft-banner.tsx
new file mode 100644
index 000000000..cda3c9f15
--- /dev/null
+++ b/apps/client/src/ee/base/components/base-view-draft-banner.tsx
@@ -0,0 +1,45 @@
+import { Group, Button, Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+type BaseViewDraftBannerProps = {
+  isDirty: boolean;
+  canSave: boolean;
+  onReset: () => void;
+  onSave: () => void;
+  saving: boolean;
+};
+
+export function BaseViewDraftBanner({
+  isDirty,
+  canSave,
+  onReset,
+  onSave,
+  saving,
+}: BaseViewDraftBannerProps) {
+  const { t } = useTranslation();
+  if (!isDirty) return null;
+  return (
+    <Group justify="flex-end" gap="xs" px="md" py={6} wrap="nowrap">
+      <Button variant="subtle" color="gray" size="xs" onClick={onReset}>
+        {t("Reset")}
+      </Button>
+      {canSave && (
+        <Tooltip
+          label={t("Filter and sort changes are visible only to you")}
+          position="top"
+          withArrow
+        >
+          <Button
+            variant="light"
+            color="orange"
+            size="xs"
+            onClick={onSave}
+            loading={saving}
+          >
+            {t("Save for everyone")}
+          </Button>
+        </Tooltip>
+      )}
+    </Group>
+  );
+}
diff --git a/apps/client/src/ee/base/components/base-view.tsx b/apps/client/src/ee/base/components/base-view.tsx
new file mode 100644
index 000000000..3a963cf1e
--- /dev/null
+++ b/apps/client/src/ee/base/components/base-view.tsx
@@ -0,0 +1,508 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Text, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
+import { IconDatabase } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { notifications } from "@mantine/notifications";
+import { reorder } from "@atlaskit/pragmatic-drag-and-drop/reorder";
+import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { useBaseSocket } from "@/ee/base/hooks/use-base-socket";
+import {
+  FilterGroup,
+  ViewSortConfig,
+  EditingCell,
+  IBaseProperty,
+} from "@/ee/base/types/base.types";
+import {
+  useBaseRowsQuery,
+  useBaseRowsCountQuery,
+  flattenRows,
+  useCreateRowMutation,
+  useUpdateRowMutation,
+  useReorderRowMutation,
+} from "@/ee/base/queries/base-row-query";
+import {
+  useCreateViewMutation,
+  useUpdateViewMutation,
+} from "@/ee/base/queries/base-view-query";
+import {
+  activeViewIdAtomFamily,
+  editingCellAtomFamily,
+} from "@/ee/base/atoms/base-atoms";
+import { useBaseTable } from "@/ee/base/hooks/use-base-table";
+import { isSystemPropertyType } from "@/ee/base/property-types/property-type.registry";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import useCurrentUser from "@/features/user/hooks/use-current-user";
+import { useHydrateCurrentUser } from "@/ee/base/reference/reference-store";
+import { useViewDraft } from "@/ee/base/hooks/use-view-draft";
+import { BaseToolbar } from "@/ee/base/components/base-toolbar";
+import { BaseViewDraftBanner } from "@/ee/base/components/base-view-draft-banner";
+import { BaseEmbedTitle } from "@/ee/base/components/base-embed-title";
+import { BaseTableSkeleton } from "@/ee/base/components/base-table-skeleton";
+import { ViewRenderer } from "@/ee/base/components/views/view-renderer";
+import { RowDetailModal } from "@/ee/base/components/row-detail-modal/row-detail-modal";
+import { useRowDetailModal } from "@/ee/base/hooks/use-row-detail-modal";
+import { BaseEditableProvider } from "@/ee/base/context/base-editable";
+import { RowExpandProvider } from "@/ee/base/context/row-expand";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { buildPageUrl } from "@/features/page/page.utils";
+import { getAppUrl } from "@/lib/config.ts";
+import { useNavigate } from "react-router-dom";
+import classes from "@/ee/base/styles/grid.module.css";
+import viewClasses from "@/ee/base/styles/base-view.module.css";
+
+type BaseViewProps = {
+  pageId: string;
+  embedded?: boolean;
+  /** False makes the view read-only. Standalone passes page.permissions.canEdit;
+   *  embedded ANDs that with the host editor's editability. */
+  editable?: boolean;
+  titleSlot?: React.ReactNode;
+};
+
+export function BaseView({ pageId, embedded, editable = true, titleSlot }: BaseViewProps) {
+  const { t } = useTranslation();
+  // Subscribe so other clients' edits, schema changes, and async-job completions reconcile into cache.
+  useBaseSocket(pageId);
+  const { data: base, isLoading: baseLoading, error: baseError } =
+    useBaseQuery(pageId);
+
+  const navigate = useNavigate();
+  const { data: page } = usePageQuery({ pageId });
+  const handleExpand = useCallback(() => {
+    if (!page) return;
+    navigate(buildPageUrl(page.space?.slug, page.slugId, page.title));
+  }, [navigate, page]);
+
+  // Share URL for a specific view; always points at the standalone page where ?view= is honored.
+  const getViewShareUrl = useCallback(
+    (viewId: string) =>
+      page
+        ? `${getAppUrl()}${buildPageUrl(page.space?.slug, page.slugId, page.title)}?view=${encodeURIComponent(viewId)}`
+        : null,
+    [page],
+  );
+
+  const [activeViewId, setActiveViewId] = useAtom(
+    activeViewIdAtomFamily(pageId),
+  ) as unknown as [string | null, (val: string | null) => void];
+
+  const [, setEditingCell] = useAtom(
+    editingCellAtomFamily(pageId),
+  ) as unknown as [EditingCell, (val: EditingCell) => void];
+
+  const views = useMemo(
+    () =>
+      [...(base?.views ?? [])].sort((a, b) =>
+        a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
+      ),
+    [base?.views],
+  );
+  const activeView = useMemo(() => {
+    if (!views.length) return undefined;
+    return views.find((v) => v.id === activeViewId) ?? views[0];
+  }, [views, activeViewId]);
+
+  const { data: currentUser } = useCurrentUser();
+  useHydrateCurrentUser(pageId);
+  const {
+    effectiveFilter,
+    effectiveSorts,
+    isDirty,
+    setFilter: setDraftFilter,
+    setSorts: setDraftSorts,
+    reset: resetDraft,
+    buildPromotedConfig,
+  } = useViewDraft({
+    userId: currentUser?.user.id,
+    pageId,
+    viewId: activeView?.id,
+    baselineFilter: activeView?.config?.filter,
+    baselineSorts: activeView?.config?.sorts,
+  });
+
+  // Baseline merged with local draft. Used for table state and toolbar badge counts.
+  // The real activeView remains the auto-persist baseline so drafts can't leak into layout writes.
+  const effectiveView = useMemo(
+    () =>
+      activeView
+        ? {
+            ...activeView,
+            config: {
+              ...activeView.config,
+              filter: effectiveFilter,
+              sorts: effectiveSorts,
+            },
+          }
+        : undefined,
+    [activeView, effectiveFilter, effectiveSorts],
+  );
+
+  const activeFilter = effectiveFilter;
+  const activeSorts = effectiveSorts;
+
+  const canSave = editable;
+
+  // Gate on base to avoid a "bland" list request before the active view's
+  // config resolves, which would double network traffic for sorted/filtered views.
+  const {
+    data: rowsData,
+    isLoading: rowsLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useBaseRowsQuery(base ? pageId : undefined, activeFilter, activeSorts);
+
+  // Warm the count cache alongside the rows query. Gate on currentUser so
+  // useViewDraft has hydrated from localStorage before the count fires.
+  const canFetchCount = !!base && !!currentUser;
+  useBaseRowsCountQuery(canFetchCount ? pageId : undefined, activeFilter);
+
+  const updateRowMutation = useUpdateRowMutation();
+  const createRowMutation = useCreateRowMutation();
+  const reorderRowMutation = useReorderRowMutation();
+  const createViewMutation = useCreateViewMutation();
+  const updateViewMutation = useUpdateViewMutation();
+
+  useEffect(() => {
+    if (activeView && activeViewId !== activeView.id) {
+      setActiveViewId(activeView.id);
+    }
+  }, [activeView, activeViewId, setActiveViewId]);
+
+  // Deep link: apply ?view=<id> once after views load; skip if the id is
+  // unrecognised so we fall back to the default without fighting a later tab switch.
+  const appliedViewParamRef = useRef(false);
+  useEffect(() => {
+    if (appliedViewParamRef.current || views.length === 0) return;
+    const viewParam = new URLSearchParams(window.location.search).get("view");
+    if (viewParam && views.some((v) => v.id === viewParam)) {
+      setActiveViewId(viewParam);
+    }
+    appliedViewParamRef.current = true;
+  }, [views, setActiveViewId]);
+
+  const { clear: clearSelection } = useRowSelection(pageId);
+  useEffect(() => {
+    clearSelection();
+  }, [pageId, activeView?.id, clearSelection]);
+
+  const scrollportRef = useRef<HTMLDivElement>(null);
+
+  const rows = useMemo(() => {
+    const flat = flattenRows(rowsData);
+    // With an active sort the server returns rows in sort order via keyset
+    // pagination; re-sorting by position on the client would break it as more
+    // pages load. Position sort only applies when no view sort is active.
+    if (activeSorts && activeSorts.length > 0) {
+      return flat;
+    }
+    return flat.sort((a, b) =>
+      a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
+    );
+  }, [rowsData, activeSorts]);
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+
+  const { table, persistViewConfig } = useBaseTable(base, rows, effectiveView);
+
+  const guardedPersistViewConfig = useCallback(() => {
+    if (!editable) return;
+    persistViewConfig();
+  }, [editable, persistViewConfig]);
+
+  // Mutation result objects change identity every render; only .mutate is
+  // stable. Rows are memoized on these callbacks' identities, so they must
+  // not churn with unrelated re-renders.
+  const updateRow = updateRowMutation.mutate;
+  const handleCellUpdate = useCallback(
+    (rowId: string, propertyId: string, value: unknown) => {
+      if (!editable) return;
+      updateRow({
+        rowId,
+        pageId,
+        cells: { [propertyId]: value },
+      });
+    },
+    [editable, pageId, updateRow],
+  );
+
+  const handleAddRow = useCallback(() => {
+    if (!editable) return;
+    createRowMutation.mutate(
+      { pageId },
+      {
+        onSuccess: (newRow) => {
+          const firstEditable = table.getVisibleLeafColumns().find((col) => {
+            if (col.id === "__row_number") return false;
+            const prop = col.columnDef.meta?.property as
+              | IBaseProperty
+              | undefined;
+            return (
+              !!prop &&
+              prop.type !== "checkbox" &&
+              !isSystemPropertyType(prop.type)
+            );
+          });
+          const propertyId = (
+            firstEditable?.columnDef.meta?.property as IBaseProperty | undefined
+          )?.id;
+          if (propertyId) {
+            setEditingCell({ rowId: newRow.id, propertyId });
+          }
+        },
+      },
+    );
+  }, [editable, pageId, createRowMutation, table, setEditingCell]);
+
+  const handleViewChange = useCallback(
+    (viewId: string) => {
+      setActiveViewId(viewId);
+    },
+    [setActiveViewId],
+  );
+
+  const handleAddView = useCallback(() => {
+    if (!editable) return;
+    createViewMutation.mutate({
+      pageId,
+      name: t("New view"),
+      type: "table",
+    });
+  }, [editable, pageId, createViewMutation, t]);
+
+  const handleColumnReorder = useCallback(
+    (columnId: string, finishIndex: number) => {
+      const order = table.getState().columnOrder;
+      const startIndex = order.indexOf(columnId);
+      if (startIndex === -1 || startIndex === finishIndex) return;
+      table.setColumnOrder(reorder({ list: order, startIndex, finishIndex }));
+      guardedPersistViewConfig();
+    },
+    [table, guardedPersistViewConfig],
+  );
+
+  const handleResizeEnd = useCallback(() => {
+    guardedPersistViewConfig();
+  }, [guardedPersistViewConfig]);
+
+  const handleDraftSortsChange = useCallback(
+    (sorts: ViewSortConfig[] | undefined) => {
+      setDraftSorts(sorts && sorts.length > 0 ? sorts : undefined);
+    },
+    [setDraftSorts],
+  );
+
+  const handleDraftFiltersChange = useCallback(
+    (filter: FilterGroup | undefined) => {
+      setDraftFilter(filter);
+    },
+    [setDraftFilter],
+  );
+
+  const handleSaveDraft = useCallback(async () => {
+    if (!activeView || !base) return;
+    // Preserves non-draft baseline fields (widths/order/visibility), overwrites only filter/sorts.
+    const config = buildPromotedConfig(activeView.config);
+    try {
+      await updateViewMutation.mutateAsync({
+        viewId: activeView.id,
+        pageId: base.id,
+        config,
+      });
+      resetDraft();
+      notifications.show({ message: t("View updated for everyone") });
+    } catch {
+      // useUpdateViewMutation shows a toast and rolls back; keep the draft so the user can retry.
+    }
+  }, [
+    activeView,
+    base,
+    buildPromotedConfig,
+    resetDraft,
+    t,
+    updateViewMutation,
+  ]);
+
+  const { openRowId, openRow, closeRow } = useRowDetailModal();
+  // openRow's identity tracks searchParams; rows subscribe to the expand
+  // context, so hand them a stable wrapper instead.
+  const openRowRef = useRef(openRow);
+  openRowRef.current = openRow;
+  const handleExpandRow = useCallback((rowId: string) => {
+    openRowRef.current(rowId);
+  }, []);
+  const handleRowNavigate = useCallback((rowId: string) => {
+    openRowRef.current(rowId, { replace: true });
+  }, []);
+
+  const reorderRow = reorderRowMutation.mutate;
+  const handleRowReorder = useCallback(
+    (rowId: string, targetRowId: string, dropPosition: "above" | "below") => {
+      if (!editable) return;
+      const remainingRows = rowsRef.current.filter((r) => r.id !== rowId);
+      const targetIndex = remainingRows.findIndex((r) => r.id === targetRowId);
+      if (targetIndex === -1) return;
+
+      let lowerPos: string | null = null;
+      let upperPos: string | null = null;
+      if (dropPosition === "above") {
+        lowerPos =
+          targetIndex > 0 ? remainingRows[targetIndex - 1]?.position : null;
+        upperPos = remainingRows[targetIndex]?.position ?? null;
+      } else {
+        lowerPos = remainingRows[targetIndex]?.position ?? null;
+        upperPos =
+          targetIndex < remainingRows.length - 1
+            ? remainingRows[targetIndex + 1]?.position
+            : null;
+      }
+
+      try {
+        let newPosition: string;
+        if (lowerPos && upperPos && lowerPos === upperPos) {
+          newPosition = generateJitteredKeyBetween(lowerPos, null);
+        } else {
+          newPosition = generateJitteredKeyBetween(lowerPos, upperPos);
+        }
+        reorderRow({ rowId, pageId, position: newPosition });
+      } catch {
+        // Position computation failed; skip silently.
+      }
+    },
+    [editable, pageId, reorderRow],
+  );
+
+  if (baseLoading || rowsLoading) {
+    return <BaseTableSkeleton />;
+  }
+  if (baseError) {
+    return (
+      <Stack align="center" gap="sm" p="xl">
+        <IconDatabase size={40} color="var(--mantine-color-gray-5)" />
+        <Text c="dimmed">{t("Failed to load base")}</Text>
+      </Stack>
+    );
+  }
+  if (!base) return null;
+
+  // Ghost rows are an "empty database" affordance, not a "filter matched nothing" state.
+  const isFiltered = (activeFilter?.children?.length ?? 0) > 0;
+
+  const banner = (
+    <BaseViewDraftBanner
+      isDirty={isDirty}
+      canSave={canSave}
+      onReset={resetDraft}
+      onSave={handleSaveDraft}
+      saving={updateViewMutation.isPending}
+    />
+  );
+
+  const toolbar = (
+    <BaseToolbar
+      base={base}
+      activeView={effectiveView}
+      views={views}
+      table={table}
+      onViewChange={handleViewChange}
+      onAddView={editable ? handleAddView : undefined}
+      onPersistViewConfig={guardedPersistViewConfig}
+      onDraftSortsChange={handleDraftSortsChange}
+      onDraftFiltersChange={handleDraftFiltersChange}
+      onExpand={embedded ? handleExpand : undefined}
+      getViewShareUrl={getViewShareUrl}
+    />
+  );
+
+  if (embedded) {
+    // Banner and toolbar go into aboveBand so they scroll with the host document;
+    // only the column-header row stays pinned (via --sticky-band-top).
+    return (
+      <BaseEditableProvider editable={editable}>
+        <RowExpandProvider value={handleExpandRow}>
+          <ViewRenderer
+            base={base}
+            rows={rows}
+            effectiveView={effectiveView}
+            table={table}
+            pageId={pageId}
+            embedded={embedded}
+            isFiltered={isFiltered}
+            hasNextPage={!!hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            onFetchNextPage={fetchNextPage}
+            onCellUpdate={handleCellUpdate}
+            onAddRow={handleAddRow}
+            onColumnReorder={editable ? handleColumnReorder : undefined}
+            onResizeEnd={handleResizeEnd}
+            onRowReorder={editable ? handleRowReorder : undefined}
+            persistViewConfig={guardedPersistViewConfig}
+            scrollportRef={scrollportRef}
+            aboveBand={
+              <>
+                {banner}
+                {toolbar}
+                <BaseEmbedTitle pageId={pageId} />
+              </>
+            }
+          />
+        </RowExpandProvider>
+        <RowDetailModal
+          base={base}
+          rows={rows}
+          openRowId={openRowId}
+          onClose={closeRow}
+          onNavigate={handleRowNavigate}
+        />
+      </BaseEditableProvider>
+    );
+  }
+
+  // Standalone: title, banner, and toolbar go in aboveBand inside the scroll
+  // container so they scroll away; only the column-header row stays pinned.
+  return (
+    <BaseEditableProvider editable={editable}>
+      <div className={viewClasses.fullHeight}>
+        <div className={classes.tableScrollport} ref={scrollportRef}>
+          <RowExpandProvider value={handleExpandRow}>
+            <ViewRenderer
+              base={base}
+              rows={rows}
+              effectiveView={effectiveView}
+              table={table}
+              pageId={pageId}
+              embedded={embedded}
+              isFiltered={isFiltered}
+              hasNextPage={!!hasNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              onFetchNextPage={fetchNextPage}
+              onCellUpdate={handleCellUpdate}
+              onAddRow={handleAddRow}
+              onColumnReorder={editable ? handleColumnReorder : undefined}
+              onResizeEnd={handleResizeEnd}
+              onRowReorder={editable ? handleRowReorder : undefined}
+              persistViewConfig={guardedPersistViewConfig}
+              scrollportRef={scrollportRef}
+              aboveBand={
+                <>
+                  {titleSlot}
+                  {banner}
+                  {toolbar}
+                </>
+              }
+            />
+          </RowExpandProvider>
+        </div>
+      </div>
+      <RowDetailModal
+        base={base}
+        rows={rows}
+        openRowId={openRowId}
+        onClose={closeRow}
+        onNavigate={handleRowNavigate}
+      />
+    </BaseEditableProvider>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/badge-overflow.tsx b/apps/client/src/ee/base/components/cells/badge-overflow.tsx
new file mode 100644
index 000000000..278b84472
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/badge-overflow.tsx
@@ -0,0 +1,100 @@
+import { ReactElement, useLayoutEffect, useRef, useState } from "react";
+import { Tooltip } from "@mantine/core";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+export function computeVisibleBadgeCount(
+  itemWidths: number[],
+  gap: number,
+  available: number,
+  badgeWidth: number,
+): number {
+  const count = itemWidths.length;
+  if (count === 0) return 0;
+  if (available <= 0) return count;
+
+  let lineWidth = 0;
+  for (let i = 0; i < count; i++) {
+    lineWidth += itemWidths[i] + (i > 0 ? gap : 0);
+  }
+  if (lineWidth <= available) return count;
+
+  let used = 0;
+  let fit = 0;
+  for (let i = 0; i < count; i++) {
+    const advance = itemWidths[i] + (i > 0 ? gap : 0);
+    if (used + advance + gap + badgeWidth <= available) {
+      used += advance;
+      fit = i + 1;
+    } else {
+      break;
+    }
+  }
+  return Math.max(fit, 1);
+}
+
+const BADGE_GAP = 4;
+
+type BadgeOverflowListProps = {
+  chips: ReactElement[];
+  measureKey: string;
+  tooltipLabel?: string;
+};
+
+export function BadgeOverflowList({
+  chips,
+  measureKey,
+  tooltipLabel,
+}: BadgeOverflowListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [visibleCount, setVisibleCount] = useState(chips.length);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const measure = measureRef.current;
+    if (!container || !measure) return;
+
+    const recompute = () => {
+      const nodes = Array.from(measure.children) as HTMLElement[];
+      const chipWidths = nodes.slice(0, -1).map((n) => n.offsetWidth);
+      const badgeWidth = nodes[nodes.length - 1]?.offsetWidth ?? 0;
+      setVisibleCount(
+        computeVisibleBadgeCount(
+          chipWidths,
+          BADGE_GAP,
+          container.clientWidth,
+          badgeWidth,
+        ),
+      );
+    };
+
+    recompute();
+    const observer = new ResizeObserver(recompute);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [measureKey]);
+
+  const visible = chips.slice(0, visibleCount);
+  const overflow = chips.length - visibleCount;
+
+  return (
+    <Tooltip
+      label={tooltipLabel}
+      multiline
+      withinPortal
+      openDelay={400}
+      disabled={!tooltipLabel || overflow <= 0}
+    >
+      <div className={cellClasses.badgeGroup} ref={containerRef}>
+        <div className={cellClasses.badgeMeasure} ref={measureRef} aria-hidden>
+          {chips}
+          <span className={cellClasses.overflowCount}>+{chips.length}</span>
+        </div>
+        {visible}
+        {overflow > 0 && (
+          <span className={cellClasses.overflowCount}>+{overflow}</span>
+        )}
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-checkbox.tsx b/apps/client/src/ee/base/components/cells/cell-checkbox.tsx
new file mode 100644
index 000000000..163359dbd
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-checkbox.tsx
@@ -0,0 +1,44 @@
+import { useCallback } from "react";
+import { Checkbox } from "@mantine/core";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellCheckboxProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  readOnly?: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellCheckbox({ value, readOnly, onCommit }: CellCheckboxProps) {
+  const checked = value === true;
+
+  const handleChange = useCallback(() => {
+    if (readOnly) return;
+    onCommit(!checked);
+  }, [readOnly, checked, onCommit]);
+
+  return (
+    <div
+      className={cellClasses.checkboxCell}
+      onClick={handleChange}
+      style={readOnly ? { cursor: "default" } : undefined}
+    >
+      <Checkbox
+        checked={checked}
+        onChange={() => {}}
+        size="xs"
+        tabIndex={-1}
+        styles={{
+          input: {
+            cursor: readOnly ? "default" : "pointer",
+            pointerEvents: "none",
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-created-at.tsx b/apps/client/src/ee/base/components/cells/cell-created-at.tsx
new file mode 100644
index 000000000..9d0f93225
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-created-at.tsx
@@ -0,0 +1,34 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellCreatedAtProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatTimestamp(val: unknown): string {
+  if (typeof val !== "string" || !val) return "";
+  const date = new Date(val);
+  if (isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function CellCreatedAt({ value }: CellCreatedAtProps) {
+  const formatted = formatTimestamp(value);
+
+  if (!formatted) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <span className={cellClasses.dateValue}>{formatted}</span>;
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-date.tsx b/apps/client/src/ee/base/components/cells/cell-date.tsx
new file mode 100644
index 000000000..a4af25a15
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-date.tsx
@@ -0,0 +1,146 @@
+import { useCallback } from "react";
+import { Popover } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import {
+  IBaseProperty,
+  DateTypeOptions,
+} from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellDateProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function formatDateDisplay(
+  dateStr: string | null | undefined,
+  options: DateTypeOptions | undefined,
+): string {
+  if (!dateStr) return "";
+  try {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return "";
+
+    const months = [
+      "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+    ];
+    const month = months[date.getMonth()];
+    const day = date.getDate();
+    const year = date.getFullYear();
+
+    let result = `${month} ${day}, ${year}`;
+
+    if (options?.includeTime) {
+      if (options.timeFormat === "24h") {
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        result += ` ${hours}:${minutes}`;
+      } else {
+        let hours = date.getHours();
+        const ampm = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12 || 12;
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        result += ` ${hours}:${minutes} ${ampm}`;
+      }
+    }
+
+    return result;
+  } catch {
+    return "";
+  }
+}
+
+function toISODateString(dateStr: string | null): string | null {
+  if (!dateStr) return null;
+  try {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return null;
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  } catch {
+    return null;
+  }
+}
+
+export function CellDate({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellDateProps) {
+  const typeOptions = property.typeOptions as DateTypeOptions | undefined;
+  const dateStr = typeof value === "string" ? value : null;
+  const pickerValue = toISODateString(dateStr);
+
+  const handleChange = useCallback(
+    (selected: string | null) => {
+      if (selected) {
+        const date = new Date(selected);
+        onCommit(date.toISOString());
+      } else {
+        onCommit(null);
+      }
+    },
+    [onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width="auto"
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            <span className={cellClasses.dateValue}>
+              {formatDateDisplay(dateStr, typeOptions)}
+            </span>
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p="xs" onKeyDown={handleKeyDown}>
+          <DatePicker
+            value={pickerValue}
+            onChange={handleChange}
+            size="sm"
+          />
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!dateStr) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <span className={cellClasses.dateValue}>
+      {formatDateDisplay(dateStr, typeOptions)}
+    </span>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-email.tsx b/apps/client/src/ee/base/components/cells/cell-email.tsx
new file mode 100644
index 000000000..15982698c
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-email.tsx
@@ -0,0 +1,52 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { Tooltip } from "@mantine/core";
+import { useEditableTextCell } from "@/ee/base/hooks/use-editable-text-cell";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellEmailProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const toDraft = (value: unknown) => (typeof value === "string" ? value : "");
+const parse = (draft: string) => draft || null;
+
+export function CellEmail({ value, isEditing, onCommit, onCancel }: CellEmailProps) {
+  const { draft, setDraft, inputRef, handleKeyDown, handleBlur } =
+    useEditableTextCell({ value, isEditing, onCommit, onCancel, toDraft, parse });
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="email"
+        className={cellClasses.cellInput}
+        value={draft}
+        placeholder="email@example.com"
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  const displayValue = toDraft(value);
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+  return (
+    <Tooltip label={displayValue} multiline withinPortal openDelay={400} maw={420}>
+      <a
+        className={cellClasses.emailLink}
+        href={`mailto:${displayValue}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {displayValue}
+      </a>
+    </Tooltip>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-file.tsx b/apps/client/src/ee/base/components/cells/cell-file.tsx
new file mode 100644
index 000000000..6b6af00a6
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-file.tsx
@@ -0,0 +1,235 @@
+import { useState, useRef, useCallback } from "react";
+import { Popover, ActionIcon, Text, UnstyledButton } from "@mantine/core";
+import {
+  IconPaperclip,
+  IconUpload,
+  IconFile,
+  IconX,
+} from "@tabler/icons-react";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { uploadFile } from "@/features/page/services/page-service";
+import { getFileUrl } from "@/lib/config";
+
+export type FileValue = {
+  id: string;
+  fileName: string;
+  mimeType?: string;
+  fileSize?: number;
+  url?: string;
+};
+
+function buildFileUrl(file: Pick<FileValue, "id" | "fileName" | "url">): string {
+  return file.url ?? `/api/files/${file.id}/${encodeURIComponent(file.fileName)}`;
+}
+
+type CellFileProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  readOnly?: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatFileSize(bytes?: number): string {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function parseFiles(value: unknown): FileValue[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter(
+    (f): f is FileValue =>
+      f && typeof f === "object" && "id" in f && "fileName" in f,
+  );
+}
+
+export function CellFile({
+  value,
+  property,
+  isEditing,
+  readOnly,
+  onCommit,
+  onCancel,
+}: CellFileProps) {
+  const files = parseFiles(value);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const handleRemove = useCallback(
+    (fileId: string) => {
+      if (readOnly) return;
+      const updated = files.filter((f) => f.id !== fileId);
+      onCommit(updated.length > 0 ? updated : null);
+    },
+    [readOnly, files, onCommit],
+  );
+
+  const handleUpload = useCallback(
+    async (fileList: FileList | null) => {
+      if (!fileList || fileList.length === 0) return;
+      setUploading(true);
+
+      const newFiles: FileValue[] = [...files];
+
+      // Reuse the page-attachment upload pipeline: the base's pageId is passed
+      // to the standard /files/upload endpoint, which enforces the same edit
+      // access check as any other page attachment.
+      for (const file of Array.from(fileList)) {
+        try {
+          const attachment = await uploadFile(file, property.pageId);
+          newFiles.push({
+            id: attachment.id,
+            fileName: attachment.fileName,
+            mimeType: attachment.mimeType,
+            fileSize: attachment.fileSize,
+            url: `/api/files/${attachment.id}/${encodeURIComponent(attachment.fileName)}`,
+          });
+        } catch (err) {
+          console.error("File upload failed:", err);
+        }
+      }
+
+      setUploading(false);
+      onCommit(newFiles.length > 0 ? newFiles : null);
+    },
+    [files, property.pageId, onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  const MAX_VISIBLE = 2;
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={280}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            <FileList files={files} maxVisible={MAX_VISIBLE} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={8} onKeyDown={handleKeyDown}>
+          {!readOnly && files.length === 0 && !uploading && (
+            <Text size="xs" c="dimmed" mb={8}>
+              No files attached
+            </Text>
+          )}
+
+          {files.map((file) => (
+            <div key={file.id} className={cellClasses.fileItemRow}>
+              <IconFile size={14} className={cellClasses.fileItemIcon} />
+              <a
+                href={getFileUrl(buildFileUrl(file))}
+                target="_blank"
+                rel="noreferrer"
+                className={cellClasses.fileItemLink}
+              >
+                <Text size="xs" truncate="end" fw={500}>
+                  {file.fileName}
+                </Text>
+                {file.fileSize != null && (
+                  <Text size="xs" c="dimmed">
+                    {formatFileSize(file.fileSize)}
+                  </Text>
+                )}
+              </a>
+              {!readOnly && (
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  size="xs"
+                  onClick={() => handleRemove(file.id)}
+                >
+                  <IconX size={12} />
+                </ActionIcon>
+              )}
+            </div>
+          ))}
+
+          {!readOnly && (
+            <>
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                style={{ display: "none" }}
+                onChange={(e) => {
+                  handleUpload(e.target.files);
+                  e.target.value = "";
+                }}
+              />
+
+              <UnstyledButton
+                onClick={() => fileInputRef.current?.click()}
+                disabled={uploading}
+                className={cellClasses.fileUploadBtn}
+                style={{
+                  color: uploading
+                    ? "var(--mantine-color-gray-5)"
+                    : "var(--mantine-color-blue-6)",
+                }}
+              >
+                <IconUpload size={14} />
+                {uploading ? "Uploading..." : "Add file"}
+              </UnstyledButton>
+            </>
+          )}
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (files.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <FileList files={files} maxVisible={MAX_VISIBLE} />;
+}
+
+function FileList({
+  files,
+  maxVisible,
+}: {
+  files: FileValue[];
+  maxVisible: number;
+}) {
+  const visible = files.slice(0, maxVisible);
+  const overflow = files.length - maxVisible;
+
+  return (
+    <div className={cellClasses.fileGroup}>
+      {visible.map((file) => (
+        <span key={file.id} className={cellClasses.fileBadge}>
+          <IconPaperclip size={12} />
+          {file.fileName}
+        </span>
+      ))}
+      {overflow > 0 && (
+        <span className={cellClasses.overflowCount}>+{overflow}</span>
+      )}
+    </div>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-formula.tsx b/apps/client/src/ee/base/components/cells/cell-formula.tsx
new file mode 100644
index 000000000..bdaaf11cf
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-formula.tsx
@@ -0,0 +1,38 @@
+import { Badge, Tooltip } from "@mantine/core";
+import {
+  IBaseProperty,
+  isFormulaErrorCell,
+} from "@/ee/base/types/base.types";
+import { CellText } from "./cell-text";
+import { CellNumber } from "./cell-number";
+import { CellCheckbox } from "./cell-checkbox";
+import { CellDate } from "./cell-date";
+
+type Props = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellFormula(props: Props) {
+  const { value, property } = props;
+  if (isFormulaErrorCell(value)) {
+    return (
+      <Tooltip label={`${value.__err}: ${value.msg}`}>
+        <Badge color="red" variant="light" size="sm">
+          #ERROR
+        </Badge>
+      </Tooltip>
+    );
+  }
+  const opts = (property.typeOptions ?? {}) as { resultType?: string };
+  const resultType = opts.resultType ?? "null";
+  const readOnlyProps = { ...props, isEditing: false };
+  if (resultType === "number") return <CellNumber {...readOnlyProps} />;
+  if (resultType === "boolean") return <CellCheckbox {...readOnlyProps} />;
+  if (resultType === "date") return <CellDate {...readOnlyProps} />;
+  return <CellText {...readOnlyProps} />;
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-last-edited-at.tsx b/apps/client/src/ee/base/components/cells/cell-last-edited-at.tsx
new file mode 100644
index 000000000..325701db8
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-last-edited-at.tsx
@@ -0,0 +1,34 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellLastEditedAtProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatTimestamp(val: unknown): string {
+  if (typeof val !== "string" || !val) return "";
+  const date = new Date(val);
+  if (isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function CellLastEditedAt({ value }: CellLastEditedAtProps) {
+  const formatted = formatTimestamp(value);
+
+  if (!formatted) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <span className={cellClasses.dateValue}>{formatted}</span>;
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-last-edited-by.tsx b/apps/client/src/ee/base/components/cells/cell-last-edited-by.tsx
new file mode 100644
index 000000000..b6dc90c52
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-last-edited-by.tsx
@@ -0,0 +1,41 @@
+import { Group, Tooltip } from "@mantine/core";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { useReferenceStore } from "@/ee/base/reference/reference-store";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellLastEditedByProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellLastEditedBy({ value, property }: CellLastEditedByProps) {
+  const userId = typeof value === "string" ? value : null;
+
+  const store = useReferenceStore(property.pageId);
+  const user = userId ? store.users[userId] ?? null : null;
+
+  if (!userId) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  const name = user?.name ?? userId.substring(0, 8);
+
+  return (
+    <Group gap={6} wrap="nowrap" style={{ overflow: "hidden" }}>
+      <CustomAvatar
+        avatarUrl={user?.avatarUrl ?? ""}
+        name={name}
+        size={20}
+        radius="xl"
+      />
+      <Tooltip label={name} withinPortal openDelay={400} disabled={!name}>
+        <span className={cellClasses.lastEditedByName}>{name}</span>
+      </Tooltip>
+    </Group>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-long-text.tsx b/apps/client/src/ee/base/components/cells/cell-long-text.tsx
new file mode 100644
index 000000000..b2c421f37
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-long-text.tsx
@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from "react";
+import { Popover, Textarea, Group, CloseButton, Tooltip } from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellLongTextProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const toText = (value: unknown) => (typeof value === "string" ? value : "");
+const normalize = (s: string) => {
+  const trimmed = s.trim();
+  return trimmed.length ? trimmed : null;
+};
+
+export function CellLongText({
+  value,
+  isEditing,
+  onCommit,
+  onValueChange,
+  onCancel,
+}: CellLongTextProps) {
+  const [draft, setDraft] = useState(() => toText(value));
+  const cancelledRef = useRef(false);
+  const committedRef = useRef(false);
+  const wasEditingRef = useRef(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Seed draft and focus on the false->true editing transition only; ignore
+  // value changes mid-edit so the user's typing is not clobbered.
+  useEffect(() => {
+    if (isEditing && !wasEditingRef.current) {
+      cancelledRef.current = false;
+      committedRef.current = false;
+      setDraft(toText(value));
+      requestAnimationFrame(() => {
+        const el = textareaRef.current;
+        if (!el) return;
+        el.focus();
+        el.setSelectionRange(el.value.length, el.value.length);
+      });
+    }
+    wasEditingRef.current = isEditing;
+  }, [isEditing, value]);
+
+  // Autosave after a typing pause; commit/cancel clear the pending fire so
+  // a closed editor can never write a stale or discarded draft.
+  const debouncedAutosave = useDebouncedCallback(() => {
+    onValueChange(normalize(draft));
+  }, 10_000);
+
+  const commit = () => {
+    if (committedRef.current) return;
+    committedRef.current = true;
+    debouncedAutosave.cancel();
+    onCommit(normalize(draft));
+  };
+  const cancel = () => {
+    cancelledRef.current = true;
+    debouncedAutosave.cancel();
+    onCancel();
+  };
+
+  const preview = toText(value).replace(/\s+/g, " ").trim();
+
+  return (
+    <Popover
+      opened={isEditing}
+      onChange={(opened) => {
+        if (opened) return;
+        // Programmatic close after cancel must not re-commit.
+        if (cancelledRef.current) {
+          cancelledRef.current = false;
+          return;
+        }
+        commit();
+      }}
+      position="bottom-start"
+      width={320}
+      shadow="md"
+      withinPortal
+      closeOnClickOutside
+      closeOnEscape={false}
+      trapFocus
+    >
+      <Popover.Target>
+        <div className={cellClasses.popoverTargetFlex}>
+          {preview ? (
+            <Tooltip label={toText(value)} multiline withinPortal openDelay={400} maw={420}>
+              <span className={cellClasses.longTextPreview}>{preview}</span>
+            </Tooltip>
+          ) : (
+            <span className={cellClasses.emptyValue} />
+          )}
+        </div>
+      </Popover.Target>
+      <Popover.Dropdown
+        p={4}
+        onClick={(e) => e.stopPropagation()}
+        className={cellClasses.longTextDropdown}
+      >
+        {isEditing && (
+          <>
+            <Group justify="flex-end" mb={2}>
+              <CloseButton size="sm" onClick={commit} aria-label="Close" />
+            </Group>
+            <Textarea
+              ref={textareaRef}
+              data-autofocus
+              autosize
+              minRows={3}
+              maxRows={12}
+              maxLength={25000}
+              variant="unstyled"
+              value={draft}
+              onChange={(e) => {
+                setDraft(e.currentTarget.value);
+                debouncedAutosave();
+              }}
+              onKeyDown={(e) => {
+                e.stopPropagation();
+                if (e.key === "Escape") {
+                  e.preventDefault();
+                  cancel();
+                } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                  e.preventDefault();
+                  commit();
+                }
+              }}
+              styles={{ input: { padding: 4 } }}
+            />
+          </>
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-multi-select.tsx b/apps/client/src/ee/base/components/cells/cell-multi-select.tsx
new file mode 100644
index 000000000..cef57aa09
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-multi-select.tsx
@@ -0,0 +1,289 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
+import { Popover, TextInput } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { BadgeOverflowList } from "@/ee/base/components/cells/badge-overflow";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { v7 as uuid7 } from "uuid";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+type CellMultiSelectProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellMultiSelect({
+  value,
+  property,
+  isEditing,
+  onValueChange,
+  onCancel,
+}: CellMultiSelectProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedIds = Array.isArray(value) ? (value as string[]) : [];
+  const selectedSet = new Set(selectedIds);
+
+  const selectedChoices = choices.filter((c) => selectedSet.has(c.id));
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const filteredChoices = (
+    search
+      ? choices.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
+      : choices
+  ).filter((c) => !selectedSet.has(c.id));
+
+  const handleToggle = useCallback(
+    (choice: Choice) => {
+      const newIds = selectedSet.has(choice.id)
+        ? selectedIds.filter((id) => id !== choice.id)
+        : [...selectedIds, choice.id];
+      onValueChange(newIds);
+    },
+    [selectedIds, selectedSet, onValueChange],
+  );
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+
+  const trimmedSearch = search.trim();
+  const hasExactMatch = useMemo(
+    () =>
+      trimmedSearch.length > 0 &&
+      choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
+    [choices, trimmedSearch],
+  );
+  const showAddOption = trimmedSearch.length > 0 && !hasExactMatch;
+
+  const addOptionColor = useMemo(
+    () => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
+    [choices.length],
+  );
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+      ...(showAddOption ? [{ kind: "add" as const }] : []),
+    ],
+    [filteredChoices, showAddOption],
+  );
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
+
+  const handleAddOption = useCallback(() => {
+    if (!trimmedSearch) return;
+    const newChoice: Choice = {
+      id: uuid7(),
+      name: trimmedSearch,
+      color: addOptionColor,
+    };
+    const newChoices = [...choices, newChoice];
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+      typeOptions: {
+        ...typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      },
+    });
+    onValueChange([...selectedIds, newChoice.id]);
+    setSearch("");
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, selectedIds, onValueChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < navItems.length) {
+          e.preventDefault();
+          const item = navItems[activeIndex];
+          if (item.kind === "choice") handleToggle(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, navItems, handleToggle, handleAddOption, showAddOption],
+  );
+
+  if (isEditing) {
+    const addOptionIdx = filteredChoices.length;
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            <BadgeList choices={selectedChoices} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          {selectedChoices.length > 0 && (
+            <div className={cellClasses.personTagArea}>
+              {selectedChoices.map((choice) => (
+                <span
+                  key={choice.id}
+                  className={cellClasses.badge}
+                  style={choiceColor(choice.color)}
+                >
+                  {choice.name}
+                  <button
+                    type="button"
+                    className={`${cellClasses.personTagRemove} ${cellClasses.badgeRemoveBtn}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleToggle(choice);
+                    }}
+                  >
+                    <IconX size={10} />
+                  </button>
+                </span>
+              ))}
+            </div>
+          )}
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+            data-autofocus
+          />
+          <div className={cellClasses.selectDropdown}>
+            {filteredChoices.map((choice, idx) => (
+              <div
+                key={choice.id}
+                ref={setOptionRef(idx)}
+                className={clsx(
+                  cellClasses.selectOption,
+                  idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(idx)}
+                onClick={() => handleToggle(choice)}
+              >
+                <span
+                  className={cellClasses.badge}
+                  style={choiceColor(choice.color)}
+                >
+                  {choice.name}
+                </span>
+              </div>
+            ))}
+            {showAddOption && (
+              <div
+                ref={setOptionRef(addOptionIdx)}
+                className={clsx(
+                  cellClasses.addOptionRow,
+                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(addOptionIdx)}
+                onClick={handleAddOption}
+              >
+                <span className={cellClasses.addOptionLabel}>Add option:</span>
+                <span
+                  className={cellClasses.badge}
+                  style={choiceColor(addOptionColor)}
+                >
+                  {trimmedSearch}
+                </span>
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (selectedChoices.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <BadgeList
+      choices={selectedChoices}
+      tooltipLabel={selectedChoices.map((c) => c.name).join(", ")}
+    />
+  );
+}
+
+function BadgeList({
+  choices,
+  tooltipLabel,
+}: {
+  choices: Choice[];
+  tooltipLabel?: string;
+}) {
+  const chips = choices.map((choice) => (
+    <span
+      key={choice.id}
+      className={cellClasses.badge}
+      style={choiceColor(choice.color)}
+    >
+      {choice.name}
+    </span>
+  ));
+  return (
+    <BadgeOverflowList
+      chips={chips}
+      measureKey={choices.map((c) => `${c.id}:${c.name}`).join("|")}
+      tooltipLabel={tooltipLabel}
+    />
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-number.tsx b/apps/client/src/ee/base/components/cells/cell-number.tsx
new file mode 100644
index 000000000..a9b2060c3
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-number.tsx
@@ -0,0 +1,97 @@
+import {
+  IBaseProperty,
+  NumberTypeOptions,
+} from "@/ee/base/types/base.types";
+import { formatCurrency } from "@/ee/base/constants/currencies";
+import { useEditableTextCell } from "@/ee/base/hooks/use-editable-text-cell";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellNumberProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function formatNumber(
+  val: number | null | undefined,
+  options: NumberTypeOptions | undefined,
+): string {
+  if (val == null) return "";
+  const precision = options?.precision ?? 0;
+  const format = options?.format ?? "plain";
+
+  switch (format) {
+    case "separators":
+      return new Intl.NumberFormat(undefined, {
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      }).format(val);
+    case "currency":
+      return formatCurrency(val, options?.currencyCode, options?.precision);
+    case "percent":
+      return `${val.toFixed(precision)}%`;
+    case "progress":
+      return `${Math.min(100, Math.max(0, val)).toFixed(0)}%`;
+    default:
+      return precision > 0 ? val.toFixed(precision) : String(val);
+  }
+}
+
+const toDraft = (value: unknown) =>
+  typeof value === "number" ? String(value) : "";
+
+const parse = (draft: string) => {
+  const parsed = draft === "" ? null : Number(draft);
+  return parsed != null && isNaN(parsed) ? null : parsed;
+};
+
+export function CellNumber({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellNumberProps) {
+  const typeOptions = property.typeOptions as NumberTypeOptions | undefined;
+  const { draft, setDraft, inputRef, handleKeyDown, handleBlur } =
+    useEditableTextCell({ value, isEditing, onCommit, onCancel, toDraft, parse });
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="decimal"
+        className={`${cellClasses.cellInput} ${cellClasses.numberInput}`}
+        value={draft}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (v === "" || v === "-" || /^-?\d*\.?\d*$/.test(v)) {
+            setDraft(v);
+          }
+        }}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  const numValue = typeof value === "number" ? value : null;
+  if (numValue == null) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <AutoTooltipText
+      className={cellClasses.numberValue}
+      fz="sm"
+      tooltipProps={{ withinPortal: true }}
+    >
+      {formatNumber(numValue, typeOptions)}
+    </AutoTooltipText>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-page.tsx b/apps/client/src/ee/base/components/cells/cell-page.tsx
new file mode 100644
index 000000000..a19109e03
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-page.tsx
@@ -0,0 +1,338 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, ActionIcon, Text, Tooltip } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { useQuery } from "@tanstack/react-query";
+import { IconX, IconFileDescription } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { useResolvePage } from "@/ee/base/reference/reference-store";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { searchSuggestions } from "@/features/search/services/search-service";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { extractPageSlugId } from "@/lib";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellPageProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+type PageSuggestion = {
+  id: string;
+  slugId: string;
+  title: string | null;
+  icon: string | null;
+  spaceId: string;
+  space?: { id: string; slug: string; name: string } | null;
+};
+
+function parsePageId(value: unknown): string | null {
+  if (typeof value === "string" && value.length > 0) return value;
+  return null;
+}
+
+function parsePastedPageSlugId(input: string): string | null {
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+  let path = trimmed;
+  if (/^https?:\/\//i.test(trimmed)) {
+    try {
+      path = new URL(trimmed).pathname;
+    } catch {
+      return null;
+    }
+  }
+  const match = path.match(/\/p\/([^/?#]+)/);
+  if (!match) return null;
+  return extractPageSlugId(match[1]) ?? null;
+}
+
+export function CellPage({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellPageProps) {
+  const pageId = parsePageId(value);
+  const { data: base } = useBaseQuery(property.pageId);
+
+  const resolvedPage = useResolvePage(property.pageId, pageId);
+
+  if (isEditing) {
+    return (
+      <PagePicker
+        pageId={pageId}
+        resolvedPage={resolvedPage ?? null}
+        spaceId={base?.spaceId}
+        onCommit={onCommit}
+        onCancel={onCancel}
+      />
+    );
+  }
+
+  if (!pageId) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  if (resolvedPage === undefined) {
+    // placeholder to avoid "Page not found" flicker on initial load
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  if (resolvedPage === null) {
+    return (
+      <span className={cellClasses.pageMissing}>
+        <IconFileDescription size={14} />
+        <span>Page not found</span>
+      </span>
+    );
+  }
+
+  return <PagePill page={resolvedPage} />;
+}
+
+type PillPage = {
+  slugId: string;
+  title: string | null;
+  icon: string | null;
+  space: { slug: string } | null;
+};
+
+function PagePill({ page }: { page: PillPage }) {
+  const { t } = useTranslation();
+  const title = getPageTitle(page.title, undefined, t);
+  const spaceSlug = page.space?.slug ?? "";
+  const url = buildPageUrl(spaceSlug, page.slugId, title);
+
+  return (
+    <Tooltip label={title} withinPortal openDelay={400} disabled={!title}>
+      <Link
+        to={url}
+        className={cellClasses.pagePill}
+        onClick={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
+        {page.icon ? (
+          <span className={cellClasses.pagePillIcon}>{page.icon}</span>
+        ) : (
+          <IconFileDescription size={14} className={cellClasses.pagePillIconFallback} />
+        )}
+        <span className={cellClasses.pagePillText}>{title}</span>
+      </Link>
+    </Tooltip>
+  );
+}
+
+type PagePickerProps = {
+  pageId: string | null;
+  resolvedPage: { id: string; slugId: string; title: string | null; icon: string | null; space: { id: string; slug: string; name: string } | null } | null;
+  spaceId?: string;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function PagePicker({
+  pageId,
+  resolvedPage,
+  spaceId,
+  onCommit,
+  onCancel,
+}: PagePickerProps) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 250);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, []);
+
+  const trimmed = debouncedSearch.trim();
+
+  const pastedSlugId = useMemo(
+    () => parsePastedPageSlugId(debouncedSearch),
+    [debouncedSearch],
+  );
+
+  const { data: suggestions = [] } = useQuery({
+    queryKey: ["bases", "pages", "search", trimmed, spaceId ?? ""],
+    queryFn: async () => {
+      const res = await searchSuggestions({
+        query: trimmed,
+        includePages: true,
+        spaceId,
+        limit: trimmed ? 25 : 5,
+      });
+      return (res.pages ?? []) as PageSuggestion[];
+    },
+    enabled: !pastedSlugId,
+    staleTime: 15_000,
+  });
+
+  // Once the pasted link resolves via slugId lookup, commit and close.
+  const { data: linkedPage, isFetching: resolvingLink } = usePageQuery(
+    pastedSlugId ? { pageId: pastedSlugId } : {},
+  );
+  const linkedRef = useRef(false);
+  useEffect(() => {
+    if (!pastedSlugId) {
+      linkedRef.current = false;
+      return;
+    }
+    if (linkedPage && !linkedRef.current) {
+      linkedRef.current = true;
+      onCommit(linkedPage.id);
+    }
+  }, [pastedSlugId, linkedPage, onCommit]);
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(suggestions.length, [debouncedSearch]);
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      onCommit(id === pageId ? null : id);
+    },
+    [pageId, onCommit],
+  );
+
+  const handleRemove = useCallback(() => {
+    onCommit(null);
+  }, [onCommit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= suggestions.length) return;
+        e.preventDefault();
+        handleSelect(suggestions[activeIndex].id);
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, suggestions, handleSelect],
+  );
+
+  return (
+    <Popover
+      opened
+      onChange={(o) => {
+        if (!o) onCancel();
+      }}
+      onClose={onCancel}
+      position="bottom-start"
+      width={320}
+      trapFocus
+      closeOnClickOutside
+      closeOnEscape
+    >
+      <Popover.Target>
+        <div className={cellClasses.popoverTarget}>
+          {resolvedPage ? <PagePill page={resolvedPage} /> : <span className={cellClasses.emptyValue} />}
+        </div>
+      </Popover.Target>
+      <Popover.Dropdown p={0}>
+        <div className={cellClasses.personTagArea}>
+          {pageId && resolvedPage && (
+            <span className={cellClasses.personTag}>
+              {resolvedPage.icon ? (
+                <span>{resolvedPage.icon}</span>
+              ) : (
+                <IconFileDescription
+                  size={14}
+                  color="var(--mantine-color-dimmed)"
+                />
+              )}
+              <span className={cellClasses.personTagName}>
+                {getPageTitle(resolvedPage.title, undefined, t)}
+              </span>
+              <button
+                type="button"
+                className={cellClasses.personTagRemove}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove();
+                }}
+              >
+                <IconX size={10} />
+              </button>
+            </span>
+          )}
+          <input
+            ref={searchRef}
+            className={cellClasses.personTagInput}
+            placeholder={pageId ? "" : "Search for a page..."}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            data-autofocus
+          />
+        </div>
+
+        <div className={cellClasses.personDropdownDivider} />
+        <div className={cellClasses.selectDropdown}>
+          {pastedSlugId ? (
+            <div className={cellClasses.personDropdownHint}>
+              {resolvingLink || linkedPage ? "Linking page…" : "Page not found"}
+            </div>
+          ) : (
+            <>
+          {suggestions.length === 0 && (
+            <div className={cellClasses.personDropdownHint}>
+              {trimmed ? "No pages found" : "No pages yet"}
+            </div>
+          )}
+          {suggestions.map((page, idx) => {
+            const isSelected = page.id === pageId;
+            return (
+              <div
+                key={page.id}
+                ref={setOptionRef(idx)}
+                className={clsx(
+                  cellClasses.selectOption,
+                  isSelected && cellClasses.selectOptionActive,
+                  idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(idx)}
+                onClick={() => handleSelect(page.id)}
+              >
+                {page.icon ? (
+                  <span>{page.icon}</span>
+                ) : (
+                  <IconFileDescription
+                    size={14}
+                    color="var(--mantine-color-dimmed)"
+                  />
+                )}
+                <div className={cellClasses.pageOptionText}>
+                  <span className={cellClasses.personOptionName}>
+                    {getPageTitle(page.title, undefined, t)}
+                  </span>
+                  {page.space?.name && (
+                    <Text size="xs" c="dimmed" truncate>
+                      {page.space.name}
+                    </Text>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+            </>
+          )}
+        </div>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-person.tsx b/apps/client/src/ee/base/components/cells/cell-person.tsx
new file mode 100644
index 000000000..d85cecce3
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-person.tsx
@@ -0,0 +1,282 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Popover } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  PersonTypeOptions,
+  UserRef,
+} from "@/ee/base/types/base.types";
+import {
+  useReferenceStore,
+  useHydrateUsers,
+} from "@/ee/base/reference/reference-store";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { BadgeOverflowList } from "@/ee/base/components/cells/badge-overflow";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+import { usePersonSearch } from "@/ee/base/hooks/use-person-search";
+
+type CellPersonProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellPerson({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onValueChange,
+  onCancel,
+}: CellPersonProps) {
+  const allowMultiple =
+    (property.typeOptions as PersonTypeOptions)?.allowMultiple === true;
+
+  const personIds = Array.isArray(value)
+    ? (value as string[])
+    : typeof value === "string"
+      ? [value]
+      : [];
+
+  const selectedSet = new Set(personIds);
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const store = useReferenceStore(property.pageId);
+
+  const hydrateUsers = useHydrateUsers(property.pageId);
+
+  const suggestions = usePersonSearch(search, isEditing);
+
+  // In multi mode omit already-selected from the list (they appear as tags above).
+  // Single mode keeps the selected row visible so it can be deselected.
+  const filteredMembers = allowMultiple
+    ? suggestions.filter((m) => !selectedSet.has(m.id))
+    : suggestions;
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(filteredMembers.length, [search, isEditing]);
+
+  const handleSelect = useCallback(
+    (memberId: string) => {
+      const picked = suggestions.find((s) => s.id === memberId);
+      if (picked)
+        hydrateUsers([
+          { id: picked.id, name: picked.name, avatarUrl: picked.avatarUrl },
+        ]);
+      if (allowMultiple) {
+        if (personIds.includes(memberId)) {
+          const newIds = personIds.filter((id) => id !== memberId);
+          onValueChange(newIds.length > 0 ? newIds : null);
+        } else {
+          onValueChange([...personIds, memberId]);
+        }
+      } else {
+        if (personIds.includes(memberId)) {
+          onCommit(null);
+        } else {
+          onCommit(memberId);
+        }
+      }
+    },
+    [suggestions, hydrateUsers, allowMultiple, personIds, onCommit, onValueChange],
+  );
+
+  const handleRemove = useCallback(
+    (memberId: string) => {
+      if (allowMultiple) {
+        const newIds = personIds.filter((id) => id !== memberId);
+        onValueChange(newIds.length > 0 ? newIds : null);
+      } else {
+        onCommit(null);
+      }
+    },
+    [allowMultiple, personIds, onCommit, onValueChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= filteredMembers.length) return;
+        e.preventDefault();
+        handleSelect(filteredMembers[activeIndex].id);
+        return;
+      }
+      if (e.key === "Backspace" && search === "" && personIds.length > 0) {
+        e.preventDefault();
+        handleRemove(personIds[personIds.length - 1]);
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, filteredMembers, handleSelect, search, personIds, handleRemove],
+  );
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={300}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            <PersonReadList personIds={personIds} users={store.users} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={0}>
+          <div className={cellClasses.personTagArea}>
+            {personIds.map((id) => {
+              const member = store.users[id];
+              const name = member?.name ?? id.substring(0, 8);
+              return (
+                <span key={id} className={cellClasses.personTag}>
+                  <CustomAvatar
+                    avatarUrl={member?.avatarUrl ?? ""}
+                    name={name}
+                    size={18}
+                    radius="xl"
+                  />
+                  <span className={cellClasses.personTagName}>{name}</span>
+                  <button
+                    type="button"
+                    className={cellClasses.personTagRemove}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemove(id);
+                    }}
+                  >
+                    <IconX size={10} />
+                  </button>
+                </span>
+              );
+            })}
+            <input
+              ref={searchRef}
+              className={cellClasses.personTagInput}
+              placeholder={personIds.length === 0 ? "Search for a person..." : ""}
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+              onKeyDown={handleKeyDown}
+              data-autofocus
+            />
+          </div>
+
+          <div className={cellClasses.personDropdownDivider} />
+          {allowMultiple && (
+            <div className={cellClasses.personDropdownHint}>
+              Select as many as you like
+            </div>
+          )}
+          <div className={cellClasses.selectDropdown}>
+            {filteredMembers.map((member, idx) => {
+              const isSelected = selectedSet.has(member.id);
+              return (
+                <div
+                  key={member.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onClick={() => handleSelect(member.id)}
+                >
+                  <CustomAvatar
+                    avatarUrl={member.avatarUrl ?? ""}
+                    name={member.name ?? ""}
+                    size={24}
+                    radius="xl"
+                  />
+                  <div className={cellClasses.personOptionText}>
+                    <span className={cellClasses.personOptionName}>
+                      {member.name ?? ""}
+                    </span>
+                    {member.email && (
+                      <span className={cellClasses.personOptionEmail}>
+                        {member.email}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+            {filteredMembers.length === 0 && (
+              <div className={cellClasses.personDropdownHint}>
+                No members found
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (personIds.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <PersonReadList personIds={personIds} users={store.users} />;
+}
+
+function PersonReadList({
+  personIds,
+  users,
+}: {
+  personIds: string[];
+  users: Record<string, UserRef>;
+}) {
+  const entries = personIds.map((id) => ({
+    id,
+    name: users[id]?.name ?? id.substring(0, 8),
+    avatarUrl: users[id]?.avatarUrl ?? "",
+  }));
+  const chips = entries.map((entry) => (
+    <span
+      key={entry.id}
+      className={clsx(cellClasses.badge, cellClasses.personChip)}
+    >
+      <CustomAvatar
+        avatarUrl={entry.avatarUrl}
+        name={entry.name}
+        size={16}
+        radius="xl"
+        style={{ flexShrink: 0 }}
+      />
+      <span className={cellClasses.personChipName}>{entry.name}</span>
+    </span>
+  ));
+  return (
+    <BadgeOverflowList
+      chips={chips}
+      measureKey={entries.map((e) => `${e.id}:${e.name}`).join("|")}
+      tooltipLabel={entries.map((e) => e.name).join(", ")}
+    />
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-select.tsx b/apps/client/src/ee/base/components/cells/cell-select.tsx
new file mode 100644
index 000000000..8cc9bca08
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-select.tsx
@@ -0,0 +1,239 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoiceBadge } from "@/ee/base/components/cells/choice-badge";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { v7 as uuid7 } from "uuid";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+type CellSelectProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellSelect({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellSelectProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedId = typeof value === "string" ? value : null;
+  const selectedChoice = choices.find((c) => c.id === selectedId);
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const filteredChoices = search
+    ? choices.filter((c) =>
+        c.name.toLowerCase().includes(search.toLowerCase()),
+      )
+    : choices;
+
+  const handleSelect = useCallback(
+    (choice: Choice) => {
+      onCommit(choice.id === selectedId ? null : choice.id);
+    },
+    [selectedId, onCommit],
+  );
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+
+  const trimmedSearch = search.trim();
+  const hasExactMatch = useMemo(
+    () =>
+      trimmedSearch.length > 0 &&
+      choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
+    [choices, trimmedSearch],
+  );
+  const showAddOption = trimmedSearch.length > 0 && !hasExactMatch;
+
+  const addOptionColor = useMemo(
+    () => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
+    [choices.length],
+  );
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+      ...(showAddOption ? [{ kind: "add" as const }] : []),
+    ],
+    [filteredChoices, showAddOption],
+  );
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
+
+  const handleAddOption = useCallback(() => {
+    if (!trimmedSearch) return;
+    const newChoice: Choice = {
+      id: uuid7(),
+      name: trimmedSearch,
+      color: addOptionColor,
+    };
+    const newChoices = [...choices, newChoice];
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+      typeOptions: {
+        ...typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      },
+    });
+    onCommit(newChoice.id);
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, onCommit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < navItems.length) {
+          e.preventDefault();
+          const item = navItems[activeIndex];
+          if (item.kind === "choice") handleSelect(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, navItems, handleSelect, handleAddOption, showAddOption],
+  );
+
+  if (isEditing) {
+    const addOptionIdx = filteredChoices.length;
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            {selectedChoice ? (
+              <span
+                className={cellClasses.badge}
+                style={choiceColor(selectedChoice.color)}
+              >
+                {selectedChoice.name}
+              </span>
+            ) : (
+              <span className={cellClasses.emptyValue} />
+            )}
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+          />
+          <div className={cellClasses.selectDropdown}>
+            {filteredChoices.map((choice, idx) => {
+              const isSelected = choice.id === selectedId;
+              return (
+                <div
+                  key={choice.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onClick={() => handleSelect(choice)}
+                >
+                  <span
+                    className={cellClasses.badge}
+                    style={choiceColor(choice.color)}
+                  >
+                    {choice.name}
+                  </span>
+                </div>
+              );
+            })}
+            {showAddOption && (
+              <div
+                ref={setOptionRef(addOptionIdx)}
+                className={clsx(
+                  cellClasses.addOptionRow,
+                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(addOptionIdx)}
+                onClick={handleAddOption}
+              >
+                <span className={cellClasses.addOptionLabel}>Add option:</span>
+                <span
+                  className={cellClasses.badge}
+                  style={choiceColor(addOptionColor)}
+                >
+                  {trimmedSearch}
+                </span>
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!selectedChoice) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <ChoiceBadge
+      name={selectedChoice.name}
+      style={choiceColor(selectedChoice.color)}
+    />
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-status.tsx b/apps/client/src/ee/base/components/cells/cell-status.tsx
new file mode 100644
index 000000000..c0d434106
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-status.tsx
@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoiceBadge } from "@/ee/base/components/cells/choice-badge";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import clsx from "clsx";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+
+type CellStatusProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+type CategoryGroup = {
+  label: string;
+  choices: Choice[];
+};
+
+const categoryLabels: Record<string, string> = {
+  todo: "To Do",
+  inProgress: "In Progress",
+  complete: "Complete",
+};
+
+export function CellStatus({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellStatusProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedId = typeof value === "string" ? value : null;
+  const selectedChoice = choices.find((c) => c.id === selectedId);
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const groups = useMemo(() => {
+    const filtered = search
+      ? choices.filter((c) =>
+          c.name.toLowerCase().includes(search.toLowerCase()),
+        )
+      : choices;
+
+    const grouped: Record<string, Choice[]> = {};
+    for (const choice of filtered) {
+      const cat = choice.category ?? "todo";
+      if (!grouped[cat]) grouped[cat] = [];
+      grouped[cat].push(choice);
+    }
+
+    const result: CategoryGroup[] = [];
+    for (const key of ["todo", "inProgress", "complete"]) {
+      if (grouped[key]?.length) {
+        result.push({ label: categoryLabels[key] ?? key, choices: grouped[key] });
+      }
+    }
+    return result;
+  }, [choices, search]);
+
+  const flatChoices = useMemo(
+    () => groups.flatMap((g) => g.choices),
+    [groups],
+  );
+  const choiceIdxMap = useMemo(() => {
+    const m = new Map<string, number>();
+    flatChoices.forEach((c, i) => m.set(c.id, i));
+    return m;
+  }, [flatChoices]);
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(flatChoices.length, [search, isEditing]);
+
+  const handleSelect = useCallback(
+    (choice: Choice) => {
+      onCommit(choice.id === selectedId ? null : choice.id);
+    },
+    [selectedId, onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= flatChoices.length) return;
+        e.preventDefault();
+        handleSelect(flatChoices[activeIndex]);
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, flatChoices, handleSelect],
+  );
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            {selectedChoice ? (
+              <span
+                className={cellClasses.badge}
+                style={choiceColor(selectedChoice.color)}
+              >
+                {selectedChoice.name}
+              </span>
+            ) : (
+              <span className={cellClasses.emptyValue} />
+            )}
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+          />
+          <div className={cellClasses.selectDropdown}>
+            {groups.map((group) => (
+              <div key={group.label}>
+                <div className={cellClasses.selectCategoryLabel}>
+                  {group.label}
+                </div>
+                {group.choices.map((choice) => {
+                  const idx = choiceIdxMap.get(choice.id) ?? -1;
+                  const isSelected = choice.id === selectedId;
+                  return (
+                    <div
+                      key={choice.id}
+                      ref={setOptionRef(idx)}
+                      className={clsx(
+                        cellClasses.selectOption,
+                        isSelected && cellClasses.selectOptionActive,
+                        idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                      )}
+                      onMouseEnter={() => setActiveIndex(idx)}
+                      onClick={() => handleSelect(choice)}
+                    >
+                      <span
+                        className={cellClasses.badge}
+                        style={choiceColor(choice.color)}
+                      >
+                        {choice.name}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!selectedChoice) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <ChoiceBadge
+      name={selectedChoice.name}
+      style={choiceColor(selectedChoice.color)}
+    />
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-text.tsx b/apps/client/src/ee/base/components/cells/cell-text.tsx
new file mode 100644
index 000000000..24410b96b
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-text.tsx
@@ -0,0 +1,51 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { useEditableTextCell } from "@/ee/base/hooks/use-editable-text-cell";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import gridClasses from "@/ee/base/styles/grid.module.css";
+
+type CellTextProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const toDraft = (value: unknown) => (typeof value === "string" ? value : "");
+const parse = (draft: string) => draft;
+
+export function CellText({ value, isEditing, onCommit, onCancel }: CellTextProps) {
+  const { draft, setDraft, inputRef, handleKeyDown, handleBlur } =
+    useEditableTextCell({ value, isEditing, onCommit, onCancel, toDraft, parse });
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        className={cellClasses.cellInput}
+        value={draft}
+        maxLength={1000}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  const displayValue = toDraft(value);
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+  return (
+    <AutoTooltipText
+      className={gridClasses.cellContent}
+      fz="sm"
+      tooltipProps={{ withinPortal: true }}
+    >
+      {displayValue}
+    </AutoTooltipText>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-url.tsx b/apps/client/src/ee/base/components/cells/cell-url.tsx
new file mode 100644
index 000000000..fb637ef20
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-url.tsx
@@ -0,0 +1,61 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { sanitizeUrl } from "@docmost/editor-ext";
+import { Tooltip } from "@mantine/core";
+import { useEditableTextCell } from "@/ee/base/hooks/use-editable-text-cell";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellUrlProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const toDraft = (value: unknown) => (typeof value === "string" ? value : "");
+const parse = (draft: string) => draft || null;
+
+export function CellUrl({ value, isEditing, onCommit, onCancel }: CellUrlProps) {
+  const { draft, setDraft, inputRef, handleKeyDown, handleBlur } =
+    useEditableTextCell({ value, isEditing, onCommit, onCancel, toDraft, parse });
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="url"
+        className={cellClasses.cellInput}
+        value={draft}
+        placeholder="https://..."
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  const displayValue = toDraft(value);
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  const safeHref = sanitizeUrl(displayValue);
+  if (!safeHref) {
+    return <span>{displayValue}</span>;
+  }
+
+  return (
+    <Tooltip label={displayValue} multiline withinPortal openDelay={400} maw={420}>
+      <a
+        className={cellClasses.urlLink}
+        href={safeHref}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {displayValue}
+      </a>
+    </Tooltip>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/cell-value-equal.ts b/apps/client/src/ee/base/components/cells/cell-value-equal.ts
new file mode 100644
index 000000000..521f6515e
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/cell-value-equal.ts
@@ -0,0 +1,30 @@
+function isEmpty(v: unknown): boolean {
+  return v === null || v === undefined || v === "";
+}
+
+/**
+ * Deep equality for cell values. Treats null/undefined/"" as equivalent
+ * "empty", compares arrays by ordered content, objects by serialized form.
+ * Note: an empty array [] is a real value, distinct from "empty".
+ */
+export function cellValuesEqual(a: unknown, b: unknown): boolean {
+  const aArr = Array.isArray(a);
+  const bArr = Array.isArray(b);
+
+  if (!aArr && !bArr) {
+    if (isEmpty(a) && isEmpty(b)) return true;
+    if (isEmpty(a) !== isEmpty(b)) return false;
+  }
+
+  if (aArr || bArr) {
+    if (!aArr || !bArr) return false;
+    if (a.length !== b.length) return false;
+    return a.every((x, i) => cellValuesEqual(x, b[i]));
+  }
+
+  if (typeof a === "object" && typeof b === "object" && a && b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+
+  return a === b;
+}
diff --git a/apps/client/src/ee/base/components/cells/choice-badge.tsx b/apps/client/src/ee/base/components/cells/choice-badge.tsx
new file mode 100644
index 000000000..0e2a03e67
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/choice-badge.tsx
@@ -0,0 +1,29 @@
+import { CSSProperties, useRef, useState } from "react";
+import { Tooltip } from "@mantine/core";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type ChoiceBadgeProps = {
+  name: string;
+  style: CSSProperties;
+};
+
+export function ChoiceBadge({ name, style }: ChoiceBadgeProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [truncated, setTruncated] = useState(false);
+
+  return (
+    <Tooltip label={name} withinPortal openDelay={400} disabled={!truncated}>
+      <span
+        ref={ref}
+        className={cellClasses.badge}
+        style={style}
+        onMouseEnter={() => {
+          const el = ref.current;
+          if (el) setTruncated(el.scrollWidth > el.clientWidth);
+        }}
+      >
+        {name}
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/apps/client/src/ee/base/components/cells/choice-color.ts b/apps/client/src/ee/base/components/cells/choice-color.ts
new file mode 100644
index 000000000..2822cc141
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/choice-color.ts
@@ -0,0 +1,25 @@
+import { CSSProperties } from "react";
+
+const colorMap: Record<string, { bg: string; bgDark: string; text: string; textDark: string }> = {
+  gray: { bg: "#f1f3f5", bgDark: "#373a40", text: "#495057", textDark: "#ced4da" },
+  red: { bg: "#ffe3e3", bgDark: "#4a1a1a", text: "#c92a2a", textDark: "#ffa8a8" },
+  pink: { bg: "#ffdeeb", bgDark: "#4a1a2e", text: "#a61e4d", textDark: "#faa2c1" },
+  grape: { bg: "#f3d9fa", bgDark: "#3b1a4a", text: "#862e9c", textDark: "#e599f7" },
+  violet: { bg: "#e5dbff", bgDark: "#2b1a4a", text: "#5f3dc4", textDark: "#b197fc" },
+  indigo: { bg: "#dbe4ff", bgDark: "#1a2b4a", text: "#364fc7", textDark: "#91a7ff" },
+  blue: { bg: "#d0ebff", bgDark: "#1a2e4a", text: "#1864ab", textDark: "#74c0fc" },
+  cyan: { bg: "#c5f6fa", bgDark: "#1a3a3a", text: "#0b7285", textDark: "#66d9e8" },
+  teal: { bg: "#c3fae8", bgDark: "#1a3a2e", text: "#066649", textDark: "#63e6be" },
+  green: { bg: "#d3f9d8", bgDark: "#1a3a1a", text: "#1b5e20", textDark: "#69db7c" },
+  lime: { bg: "#e9fac8", bgDark: "#2e3a1a", text: "#44700a", textDark: "#a9e34b" },
+  yellow: { bg: "#fff3bf", bgDark: "#3a351a", text: "#8a5200", textDark: "#ffd43b" },
+  orange: { bg: "#ffe8cc", bgDark: "#3a2a1a", text: "#a63508", textDark: "#ffa94d" },
+};
+
+export function choiceColor(color: string): CSSProperties {
+  const c = colorMap[color] ?? colorMap.gray;
+  return {
+    backgroundColor: `light-dark(${c.bg}, ${c.bgDark})`,
+    color: `light-dark(${c.text}, ${c.textDark})`,
+  };
+}
diff --git a/apps/client/src/ee/base/components/cells/choice-picker.tsx b/apps/client/src/ee/base/components/cells/choice-picker.tsx
new file mode 100644
index 000000000..e7d0c83ca
--- /dev/null
+++ b/apps/client/src/ee/base/components/cells/choice-picker.tsx
@@ -0,0 +1,258 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { TextInput } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { v7 as uuid7 } from "uuid";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+const STATUS_CATEGORY_LABELS: Record<string, string> = {
+  todo: "To Do",
+  inProgress: "In Progress",
+  complete: "Complete",
+};
+const STATUS_CATEGORY_ORDER = ["todo", "inProgress", "complete"];
+
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+type ChoiceGroup = { label: string | null; choices: Choice[] };
+
+type ChoicePickerProps = {
+  property: IBaseProperty;
+  selectedIds: string[];
+  /** Multi keeps the picker open, hides picked options from the list and
+   *  shows them as removable tags instead. */
+  multiple?: boolean;
+  /** Group options under status category headings. */
+  grouped?: boolean;
+  /** Offer "Add option: <search>" when the search has no exact match. */
+  allowCreate?: boolean;
+  onToggle: (choice: Choice) => void;
+  onEscape: () => void;
+};
+
+/** Searchable choice list shared by select-like editors (modal fields; the
+ *  grid cells render the same UI and can migrate here). */
+export function ChoicePicker({
+  property,
+  selectedIds,
+  multiple = false,
+  grouped = false,
+  allowCreate = false,
+  onToggle,
+  onEscape,
+}: ChoicePickerProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const selectedChoices = choices.filter((c) => selectedSet.has(c.id));
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, []);
+
+  const groups = useMemo<ChoiceGroup[]>(() => {
+    const filtered = (
+      search
+        ? choices.filter((c) =>
+            c.name.toLowerCase().includes(search.toLowerCase()),
+          )
+        : choices
+    ).filter((c) => !multiple || !selectedSet.has(c.id));
+
+    if (!grouped) return [{ label: null, choices: filtered }];
+
+    const byCategory: Record<string, Choice[]> = {};
+    for (const choice of filtered) {
+      const cat = choice.category ?? "todo";
+      (byCategory[cat] ??= []).push(choice);
+    }
+    return STATUS_CATEGORY_ORDER.filter((key) => byCategory[key]?.length).map(
+      (key) => ({ label: STATUS_CATEGORY_LABELS[key] ?? key, choices: byCategory[key] }),
+    );
+  }, [choices, search, grouped, multiple, selectedSet]);
+
+  const flatChoices = useMemo(() => groups.flatMap((g) => g.choices), [groups]);
+  const choiceIdxMap = useMemo(() => {
+    const m = new Map<string, number>();
+    flatChoices.forEach((c, i) => m.set(c.id, i));
+    return m;
+  }, [flatChoices]);
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+  const trimmedSearch = search.trim();
+  const hasExactMatch = useMemo(
+    () =>
+      trimmedSearch.length > 0 &&
+      choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
+    [choices, trimmedSearch],
+  );
+  const showAddOption = allowCreate && trimmedSearch.length > 0 && !hasExactMatch;
+  const addOptionColor = useMemo(
+    () => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
+    [choices.length],
+  );
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      ...flatChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+      ...(showAddOption ? [{ kind: "add" as const }] : []),
+    ],
+    [flatChoices, showAddOption],
+  );
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(navItems.length, [search, showAddOption]);
+
+  const handleAddOption = useCallback(() => {
+    if (!trimmedSearch) return;
+    const newChoice: Choice = {
+      id: uuid7(),
+      name: trimmedSearch,
+      color: addOptionColor,
+    };
+    const newChoices = [...choices, newChoice];
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+      typeOptions: {
+        ...typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      },
+    });
+    onToggle(newChoice);
+    setSearch("");
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, onToggle]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onEscape();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < navItems.length) {
+          e.preventDefault();
+          const item = navItems[activeIndex];
+          if (item.kind === "choice") onToggle(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onEscape, handleNavKey, activeIndex, navItems, onToggle, handleAddOption, showAddOption],
+  );
+
+  const addOptionIdx = flatChoices.length;
+
+  return (
+    <>
+      {multiple && selectedChoices.length > 0 && (
+        <div className={cellClasses.personTagArea}>
+          {selectedChoices.map((choice) => (
+            <span
+              key={choice.id}
+              className={cellClasses.badge}
+              style={choiceColor(choice.color)}
+            >
+              {choice.name}
+              <button
+                type="button"
+                className={`${cellClasses.personTagRemove} ${cellClasses.badgeRemoveBtn}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggle(choice);
+                }}
+              >
+                <IconX size={10} />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      <TextInput
+        ref={searchRef}
+        size="xs"
+        placeholder="Search..."
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        mb={4}
+        data-autofocus
+      />
+      <div className={cellClasses.selectDropdown}>
+        {groups.map((group) => (
+          <div key={group.label ?? "all"}>
+            {group.label && (
+              <div className={cellClasses.selectCategoryLabel}>{group.label}</div>
+            )}
+            {group.choices.map((choice) => {
+              const idx = choiceIdxMap.get(choice.id) ?? -1;
+              const isSelected = !multiple && selectedSet.has(choice.id);
+              return (
+                <div
+                  key={choice.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onClick={() => onToggle(choice)}
+                >
+                  <span
+                    className={cellClasses.badge}
+                    style={choiceColor(choice.color)}
+                  >
+                    {choice.name}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+        {showAddOption && (
+          <div
+            ref={setOptionRef(addOptionIdx)}
+            className={clsx(
+              cellClasses.addOptionRow,
+              addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
+            )}
+            onMouseEnter={() => setActiveIndex(addOptionIdx)}
+            onClick={handleAddOption}
+          >
+            <span className={cellClasses.addOptionLabel}>Add option:</span>
+            <span className={cellClasses.badge} style={choiceColor(addOptionColor)}>
+              {trimmedSearch}
+            </span>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/apps/client/src/ee/base/components/formula/formula-editor.tsx b/apps/client/src/ee/base/components/formula/formula-editor.tsx
new file mode 100644
index 000000000..145efeac7
--- /dev/null
+++ b/apps/client/src/ee/base/components/formula/formula-editor.tsx
@@ -0,0 +1,189 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Button,
+  Divider,
+  Group,
+  Paper,
+  Stack,
+  Text,
+} from "@mantine/core";
+import {
+  IconAlertTriangle,
+  IconMathFunction,
+  IconPointFilled,
+} from "@tabler/icons-react";
+import { registry } from "@docmost/base-formula/client";
+import { FormulaInput } from "./formula-input";
+import { PropertyChipRow } from "./property-chip-row";
+import { FunctionPalette } from "./function-palette";
+import { useFormulaParser } from "@/ee/base/hooks/use-formula-parser";
+import type { IBaseProperty } from "@/ee/base/types/base.types";
+import classes from "@/ee/base/styles/formula.module.css";
+
+type Props = {
+  properties: IBaseProperty[];
+  editingPropertyId: string | null;
+  initialSource?: string;
+  name?: string;
+  disabled?: boolean;
+  onSave: (
+    source: string,
+    ast: unknown,
+    resultType: string,
+    dependencies: string[],
+  ) => void;
+  onCancel: () => void;
+};
+
+export function FormulaEditor({
+  properties,
+  editingPropertyId,
+  initialSource = "",
+  name,
+  disabled = false,
+  onSave,
+  onCancel,
+}: Props) {
+  const [source, setSource] = useState(initialSource);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const pendingCursorRef = useRef<number | null>(null);
+  const parseState = useFormulaParser(
+    source,
+    properties,
+    editingPropertyId,
+    registry,
+  );
+  const canSave = parseState.state === "ok" && !disabled;
+
+  // useEffect (not RAF) ensures the DOM update ran before restoring cursor.
+  useEffect(() => {
+    if (pendingCursorRef.current === null) return;
+    const pos = pendingCursorRef.current;
+    pendingCursorRef.current = null;
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.focus();
+    ta.setSelectionRange(pos, pos);
+  }, [source]);
+
+  const insertAtCursor = (snippet: string, cursorOffsetFromEnd = 0) => {
+    const ta = textareaRef.current;
+    const start = ta?.selectionStart ?? source.length;
+    const end = ta?.selectionEnd ?? source.length;
+    const before = source.slice(0, start);
+    const after = source.slice(end);
+    const prev = before.slice(-1);
+    const needsSpace = prev !== "" && !/[\s(,]/.test(prev);
+    const prefix = needsSpace ? " " : "";
+    const next = before + prefix + snippet + after;
+    pendingCursorRef.current =
+      before.length + prefix.length + snippet.length - cursorOffsetFromEnd;
+    setSource(next);
+  };
+
+  return (
+    <Paper
+      withBorder
+      radius="md"
+      shadow="sm"
+      p={0}
+      style={{ overflow: "hidden" }}
+    >
+      <Stack gap={0}>
+        <Group
+          justify="space-between"
+          wrap="nowrap"
+          px="md"
+          py={12}
+          className={classes.formulaHeaderRow}
+        >
+          <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+            <div className={classes.formulaIconBadge}>
+              <IconMathFunction size={14} />
+            </div>
+            <Text size="sm" fw={600}>
+              Formula
+            </Text>
+            {name && (
+              <Text size="sm" c="dimmed" truncate>
+                · {name}
+              </Text>
+            )}
+          </Group>
+          <Group gap={8} wrap="nowrap" style={{ flexShrink: 0 }}>
+            <Button variant="subtle" size="xs" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button
+              size="xs"
+              disabled={!canSave}
+              onClick={() => {
+                if (parseState.state !== "ok") return;
+                onSave(
+                  source,
+                  parseState.ast,
+                  parseState.resultType,
+                  parseState.dependencies,
+                );
+              }}
+            >
+              Save
+            </Button>
+          </Group>
+        </Group>
+
+        <Stack gap={6} px={14} pt={10} pb={8}>
+          <FormulaInput
+            ref={textareaRef}
+            value={source}
+            onChange={setSource}
+            hasError={parseState.state === "error"}
+          />
+          <Group justify="space-between" gap={8} mih={16}>
+            {parseState.state === "error" ? (
+              <Group gap={6} c="red.7">
+                <IconAlertTriangle size={12} />
+                <Text size="xs">{parseState.message}</Text>
+              </Group>
+            ) : parseState.state === "ok" ? (
+              <Group gap={6} c="dimmed">
+                <IconPointFilled size={10} color="var(--mantine-color-teal-6)" />
+                <Text size="xs">
+                  Returns{" "}
+                  <Text span fw={600} c="gray.8">
+                    {parseState.resultType}
+                  </Text>
+                </Text>
+              </Group>
+            ) : (
+              <Text size="xs" c="dimmed">
+                Click a property or function below to insert.
+              </Text>
+            )}
+          </Group>
+        </Stack>
+
+        <Divider />
+
+        <Stack gap={8} px={14} pt={10} pb={10}>
+          <PropertyChipRow
+            properties={properties.filter((p) => p.id !== editingPropertyId)}
+            onInsert={(name) => insertAtCursor(`prop("${name}")`)}
+          />
+        </Stack>
+
+        <Divider />
+
+        <Stack gap={6} px={14} pt={10} pb={10}>
+          <Text size="xs" fw={600} c="gray.7">
+            Functions
+          </Text>
+          <FunctionPalette
+            registry={registry}
+            onInsert={(name) => insertAtCursor(`${name}()`, 1)}
+          />
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+}
diff --git a/apps/client/src/ee/base/components/formula/formula-input.tsx b/apps/client/src/ee/base/components/formula/formula-input.tsx
new file mode 100644
index 000000000..7846139be
--- /dev/null
+++ b/apps/client/src/ee/base/components/formula/formula-input.tsx
@@ -0,0 +1,40 @@
+import { forwardRef } from "react";
+import { Textarea } from "@mantine/core";
+
+type Props = {
+  value: string;
+  onChange: (v: string) => void;
+  hasError?: boolean;
+};
+
+export const FormulaInput = forwardRef<HTMLTextAreaElement, Props>(
+  function FormulaInput({ value, onChange, hasError }, ref) {
+    return (
+      <Textarea
+        ref={ref}
+        autosize
+        minRows={3}
+        maxRows={8}
+        value={value}
+        onChange={(e) => onChange(e.currentTarget.value)}
+        placeholder='prop("Price") * prop("Qty")'
+        styles={{
+          input: {
+            fontFamily:
+              "ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace",
+            fontSize: 13,
+            lineHeight: 1.65,
+            backgroundColor: "var(--mantine-color-gray-0)",
+            borderColor: hasError
+              ? "var(--mantine-color-red-6)"
+              : "var(--mantine-color-blue-6)",
+            borderWidth: 1.5,
+            boxShadow: hasError
+              ? "0 0 0 3px var(--mantine-color-red-1)"
+              : "0 0 0 3px var(--mantine-color-blue-1)",
+          },
+        }}
+      />
+    );
+  },
+);
diff --git a/apps/client/src/ee/base/components/formula/formula-property-editor.tsx b/apps/client/src/ee/base/components/formula/formula-property-editor.tsx
new file mode 100644
index 000000000..c6b2e658a
--- /dev/null
+++ b/apps/client/src/ee/base/components/formula/formula-property-editor.tsx
@@ -0,0 +1,48 @@
+import { FormulaEditor } from "./formula-editor";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import {
+  IBaseProperty,
+  FormulaTypeOptions,
+  TypeOptions,
+} from "@/ee/base/types/base.types";
+
+type Props = {
+  property: IBaseProperty;
+  pageId: string;
+  onClose: () => void;
+};
+
+export function FormulaPropertyEditor({ property, pageId, onClose }: Props) {
+  const { data: base } = useBaseQuery(pageId);
+  const updatePropertyMutation = useUpdatePropertyMutation();
+  const opts = property.typeOptions as FormulaTypeOptions | undefined;
+
+  return (
+    <FormulaEditor
+      properties={base?.properties ?? []}
+      editingPropertyId={property.id}
+      initialSource={opts?.source ?? ""}
+      name={property.name}
+      onCancel={onClose}
+      onSave={(source, ast, resultType, dependencies) => {
+        if (source === (opts?.source ?? "")) {
+          onClose();
+          return;
+        }
+        updatePropertyMutation.mutate({
+          propertyId: property.id,
+          pageId,
+          typeOptions: {
+            source,
+            ast,
+            resultType,
+            dependencies,
+            astVersion: 1,
+          } as TypeOptions,
+        });
+        onClose();
+      }}
+    />
+  );
+}
diff --git a/apps/client/src/ee/base/components/formula/function-palette.tsx b/apps/client/src/ee/base/components/formula/function-palette.tsx
new file mode 100644
index 000000000..bf218210f
--- /dev/null
+++ b/apps/client/src/ee/base/components/formula/function-palette.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import {
+  Accordion,
+  Group,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import type { FormulaFn } from "@docmost/base-formula/client";
+import classes from "@/ee/base/styles/formula.module.css";
+
+const CATEGORIES = ["logic", "math", "string", "date", "coercion"] as const;
+
+export function FunctionPalette({
+  registry,
+  onInsert,
+}: {
+  registry: ReadonlyMap<string, FormulaFn>;
+  onInsert: (name: string) => void;
+}) {
+  const [open, setOpen] = useState<string | null>("logic");
+
+  const byCat = new Map<string, FormulaFn[]>();
+  for (const fn of registry.values()) {
+    if (!byCat.has(fn.category)) byCat.set(fn.category, []);
+    byCat.get(fn.category)!.push(fn);
+  }
+
+  return (
+    <Accordion
+      value={open}
+      onChange={setOpen}
+      variant="contained"
+      radius="md"
+      chevronSize={14}
+      styles={{
+        item: { borderColor: "var(--mantine-color-gray-2)" },
+        control: { padding: "7px 12px", minHeight: 0 },
+        label: {
+          padding: 0,
+          fontSize: 13,
+          fontWeight: 600,
+          textTransform: "capitalize",
+        },
+        content: { padding: "6px 10px 10px" },
+        panel: { background: "var(--mantine-color-gray-0)" },
+      }}
+    >
+      {CATEGORIES.map((cat) => {
+        const fns = byCat.get(cat) ?? [];
+        return (
+          <Accordion.Item key={cat} value={cat}>
+            <Accordion.Control>
+              <Group gap={8}>
+                <span>{cat}</span>
+                <Text size="xs" c="dimmed" ff="monospace">
+                  {fns.length}
+                </Text>
+              </Group>
+            </Accordion.Control>
+            <Accordion.Panel>
+              <Group gap={6}>
+                {fns.map((fn) => (
+                  <Tooltip key={fn.name} label={fn.doc} withArrow>
+                    <UnstyledButton
+                      onClick={() => onInsert(fn.name)}
+                      className={classes.fnChip}
+                    >
+                      {fn.name}
+                      <span className={classes.fnChipParens}>
+                        ()
+                      </span>
+                    </UnstyledButton>
+                  </Tooltip>
+                ))}
+              </Group>
+            </Accordion.Panel>
+          </Accordion.Item>
+        );
+      })}
+    </Accordion>
+  );
+}
diff --git a/apps/client/src/ee/base/components/formula/property-chip-row.tsx b/apps/client/src/ee/base/components/formula/property-chip-row.tsx
new file mode 100644
index 000000000..e41eb02e9
--- /dev/null
+++ b/apps/client/src/ee/base/components/formula/property-chip-row.tsx
@@ -0,0 +1,56 @@
+import { useState, useMemo } from "react";
+import { Group, TextInput, UnstyledButton, Text } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import type { IBaseProperty } from "@/ee/base/types/base.types";
+import classes from "@/ee/base/styles/formula.module.css";
+
+export function PropertyChipRow({
+  properties,
+  onInsert,
+}: {
+  properties: IBaseProperty[];
+  onInsert: (name: string) => void;
+}) {
+  const [query, setQuery] = useState("");
+
+  const visible = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return properties;
+    return properties.filter((p) => p.name.toLowerCase().includes(q));
+  }, [properties, query]);
+
+  return (
+    <div>
+      <Group justify="space-between" mb={8}>
+        <Text size="xs" fw={600} c="gray.7">
+          Properties
+        </Text>
+        <TextInput
+          size="xs"
+          placeholder="Search"
+          leftSection={<IconSearch size={12} />}
+          value={query}
+          onChange={(e) => setQuery(e.currentTarget.value)}
+          w={140}
+        />
+      </Group>
+      {visible.length === 0 ? (
+        <Text size="xs" c="dimmed" py={6}>
+          No matches.
+        </Text>
+      ) : (
+        <Group gap={6}>
+          {visible.map((p) => (
+            <UnstyledButton
+              key={p.id}
+              onClick={() => onInsert(p.name)}
+              className={classes.propChip}
+            >
+              {p.name}
+            </UnstyledButton>
+          ))}
+        </Group>
+      )}
+    </div>
+  );
+}
diff --git a/apps/client/src/ee/base/components/grid/add-row-button.tsx b/apps/client/src/ee/base/components/grid/add-row-button.tsx
new file mode 100644
index 000000000..0131ecde1
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/add-row-button.tsx
@@ -0,0 +1,26 @@
+import { memo } from "react";
+import { IconPlus } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type AddRowButtonProps = {
+  onClick?: () => void;
+};
+
+export const AddRowButton = memo(function AddRowButton({
+  onClick,
+}: AddRowButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={classes.addRowButton}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+    >
+      <IconPlus size={14} />
+      <span>{t("New row")}</span>
+    </div>
+  );
+});
diff --git a/apps/client/src/ee/base/components/grid/base-drop-edge-indicator.tsx b/apps/client/src/ee/base/components/grid/base-drop-edge-indicator.tsx
new file mode 100644
index 000000000..c9286a596
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/base-drop-edge-indicator.tsx
@@ -0,0 +1,10 @@
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type Props = {
+  edge: Edge;
+};
+
+export function BaseDropEdgeIndicator({ edge }: Props) {
+  return <div className={classes.dropEdgeLine} data-edge={edge} aria-hidden />;
+}
diff --git a/apps/client/src/ee/base/components/grid/grid-cell.tsx b/apps/client/src/ee/base/components/grid/grid-cell.tsx
new file mode 100644
index 000000000..3ea260451
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/grid-cell.tsx
@@ -0,0 +1,225 @@
+import { memo, useCallback } from "react";
+import { Cell } from "@tanstack/react-table";
+import { Popover, Tooltip } from "@mantine/core";
+import { IconArrowsDiagonal } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { IBaseRow, EditingCell } from "@/ee/base/types/base.types";
+import {
+  editingCellAtomFamily,
+  activeFormulaEditorAtomFamily,
+  FormulaEditorTarget,
+} from "@/ee/base/atoms/base-atoms";
+import { FormulaPropertyEditor } from "@/ee/base/components/formula/formula-property-editor";
+import {
+  isSystemPropertyType,
+  getDescriptor,
+} from "@/ee/base/property-types/property-type.registry";
+import { cellValuesEqual } from "@/ee/base/components/cells/cell-value-equal";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { useRowExpand } from "@/ee/base/context/row-expand";
+import { RowNumberCell } from "./row-number-cell";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type GridCellProps = {
+  cell: Cell<IBaseRow, unknown>;
+  rowIndex: number;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  pageId: string;
+};
+
+export const GridCell = memo(function GridCell({
+  cell,
+  rowIndex,
+  onCellUpdate,
+  pageId,
+}: GridCellProps) {
+  const property = cell.column.columnDef.meta?.property;
+  const isRowNumber = cell.column.id === "__row_number";
+  const isPinned = cell.column.getIsPinned();
+  const pinOffset = isPinned ? cell.column.getStart("left") : undefined;
+
+  const [editingCell, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
+  const [activeFormulaEditor, setActiveFormulaEditor] = useAtom(
+    activeFormulaEditorAtomFamily(pageId),
+  ) as unknown as [FormulaEditorTarget, (val: FormulaEditorTarget) => void];
+
+  const { t } = useTranslation();
+  const editable = useBaseEditable();
+  const readOnly = !editable;
+  const onExpandRow = useRowExpand();
+
+  const rowId = cell.row.id;
+  const isEditing =
+    editingCell?.rowId === rowId &&
+    editingCell?.propertyId === property?.id &&
+    (editable || property?.type === "file");
+
+  const handleDoubleClick = useCallback(() => {
+    if (!property || isRowNumber) return;
+    if (property.type === "checkbox") return;
+    if (readOnly) {
+      // Read-only: only the file cell opens (a download-only popover) so
+      // attachments stay reachable.
+      if (property.type === "file") {
+        setEditingCell({ rowId, propertyId: property.id });
+      }
+      return;
+    }
+    if (property.type === "formula") {
+      setActiveFormulaEditor({ propertyId: property.id, rowId });
+      return;
+    }
+    if (isSystemPropertyType(property.type)) return;
+    setEditingCell({ rowId, propertyId: property.id });
+  }, [property, isRowNumber, rowId, readOnly, setEditingCell, setActiveFormulaEditor]);
+
+  const closeFormulaEditor = useCallback(
+    () => setActiveFormulaEditor(null),
+    [setActiveFormulaEditor],
+  );
+
+  const handleValueChange = useCallback(
+    (value: unknown) => {
+      if (!property) return;
+      if (!cellValuesEqual(value, cell.getValue())) {
+        onCellUpdate(rowId, property.id, value);
+      }
+    },
+    [property, rowId, cell, onCellUpdate],
+  );
+
+  const handleCommit = useCallback(
+    (value: unknown) => {
+      handleValueChange(value);
+      setEditingCell(null);
+    },
+    [handleValueChange, setEditingCell],
+  );
+
+  const handleCancel = useCallback(() => {
+    setEditingCell(null);
+  }, [setEditingCell]);
+
+  if (isRowNumber) {
+    return (
+      <RowNumberCell
+        rowId={rowId}
+        rowIndex={rowIndex}
+        isPinned={Boolean(isPinned)}
+        pinOffset={pinOffset}
+        pageId={pageId}
+      />
+    );
+  }
+
+  if (!property) return null;
+
+  const CellComponent = getDescriptor(property.type)?.cellComponent;
+  if (!CellComponent) return null;
+
+  const value = cell.getValue();
+
+  const cellInner = (
+    <div
+      className={`${classes.cell} ${isPinned ? classes.cellPinned : ""} ${isEditing ? classes.cellEditing : ""} ${property.isPrimary ? classes.primaryCell : ""}`}
+      style={
+        isPinned
+          ? ({ "--pin-offset": `${pinOffset}px` } as React.CSSProperties)
+          : undefined
+      }
+      onDoubleClick={handleDoubleClick}
+    >
+      <CellComponent
+        value={value}
+        property={property}
+        rowId={rowId}
+        isEditing={isEditing}
+        readOnly={readOnly}
+        onCommit={handleCommit}
+        onValueChange={handleValueChange}
+        onCancel={handleCancel}
+      />
+      {property.isPrimary && onExpandRow && !isEditing && (
+        <span className={classes.rowExpandAnchor}>
+          <Tooltip label={t("Expand")} position="bottom" openDelay={400}>
+            <button
+              type="button"
+              className={classes.rowExpandButton}
+              onClick={() => onExpandRow(rowId)}
+              onDoubleClick={(e) => e.stopPropagation()}
+              aria-label={t("Expand row {{number}}", { number: rowIndex + 1 })}
+            >
+              <IconArrowsDiagonal size={13} />
+            </button>
+          </Tooltip>
+        </span>
+      )}
+    </div>
+  );
+
+  if (property.type !== "formula") return cellInner;
+
+  const formulaEditorOpen =
+    activeFormulaEditor?.propertyId === property.id &&
+    activeFormulaEditor?.rowId === rowId;
+
+  return (
+    <Popover
+      opened={formulaEditorOpen}
+      onChange={(o) => {
+        if (!o) closeFormulaEditor();
+      }}
+      position="bottom-start"
+      width={460}
+      shadow="md"
+      withinPortal
+      closeOnClickOutside
+      closeOnEscape={false}
+      trapFocus
+    >
+      <Popover.Target>{cellInner}</Popover.Target>
+      <Popover.Dropdown
+        p={0}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === "Escape") {
+            e.preventDefault();
+            closeFormulaEditor();
+          }
+        }}
+        style={{ maxWidth: "calc(100vw - 32px)" }}
+      >
+        {formulaEditorOpen && (
+          <FormulaPropertyEditor
+            property={property}
+            pageId={pageId}
+            onClose={closeFormulaEditor}
+          />
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+},
+gridCellPropsEqual);
+
+// Cell instances are re-created whenever the table data identity changes;
+// compare by coordinates + value so unchanged cells skip re-rendering.
+function gridCellPropsEqual(prev: GridCellProps, next: GridCellProps) {
+  if (
+    prev.rowIndex !== next.rowIndex ||
+    prev.pageId !== next.pageId ||
+    prev.onCellUpdate !== next.onCellUpdate
+  ) {
+    return false;
+  }
+  if (prev.cell === next.cell) return true;
+  return (
+    prev.cell.row.id === next.cell.row.id &&
+    prev.cell.column.id === next.cell.column.id &&
+    prev.cell.column.columnDef.meta?.property ===
+      next.cell.column.columnDef.meta?.property &&
+    cellValuesEqual(prev.cell.getValue(), next.cell.getValue())
+  );
+}
diff --git a/apps/client/src/ee/base/components/grid/grid-container.tsx b/apps/client/src/ee/base/components/grid/grid-container.tsx
new file mode 100644
index 000000000..2d11f2e8a
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/grid-container.tsx
@@ -0,0 +1,391 @@
+import { useRef, useMemo, useCallback, useEffect, useState, useLayoutEffect } from "react";
+import { Table } from "@tanstack/react-table";
+import {
+  observeWindowOffset,
+  observeWindowRect,
+  useVirtualizer,
+  windowScroll,
+} from "@tanstack/react-virtual";
+import { useAtom } from "jotai";
+import { IBaseRow, IBaseProperty, EditingCell } from "@/ee/base/types/base.types";
+import { editingCellAtomFamily } from "@/ee/base/atoms/base-atoms";
+import { useColumnResize } from "@/ee/base/hooks/use-column-resize";
+import { useGridKeyboardNav } from "@/ee/base/hooks/use-grid-keyboard-nav";
+import { useRowAutoScroll } from "@/ee/base/hooks/use-row-autoscroll";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useDeleteSelectedRows } from "@/ee/base/hooks/use-delete-selected-rows";
+import { useHorizontalScrollSync } from "@/ee/base/hooks/use-horizontal-scroll-sync";
+import { useGridAutoScroll } from "@/ee/base/hooks/use-grid-autoscroll";
+import { GridHeader } from "./grid-header";
+import { GridRow } from "./grid-row";
+import { AddRowButton } from "./add-row-button";
+import { GridGhostRows } from "./grid-ghost-rows";
+import { SelectionActionBar } from "./selection-action-bar";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { GridRowOrderProvider } from "@/ee/base/context/grid-row-order";
+import classes from "@/ee/base/styles/grid.module.css";
+
+// Row box = 36px cell content + 1px row border-bottom. CSS pins .row to
+// var(--base-row-height) from this constant so the rendered height can
+// never drift from the virtualizer estimate.
+const ROW_HEIGHT = 37;
+const OVERSCAN = 25;
+
+const GRID_ROOT_STYLE = {
+  "--base-row-height": `${ROW_HEIGHT}px`,
+} as React.CSSProperties;
+
+const ADD_COLUMN_TRACK_WIDTH = 40;
+
+// Hoisted to module scope to avoid allocating a fresh options object on
+// every GridContainer render. The function refs from virtual-core are
+// stable; only the wrapper object identity matters for downstream
+// memoization inside useVirtualizer.
+const WINDOW_SCROLL_OPTIONS = {
+  observeElementRect: observeWindowRect as never,
+  observeElementOffset: observeWindowOffset as never,
+  scrollToFn: windowScroll as never,
+} as const;
+
+type GridContainerProps = {
+  table: Table<IBaseRow>;
+  properties: IBaseProperty[];
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  onAddRow?: () => void;
+  pageId: string;
+  onColumnReorder?: (columnId: string, finishIndex: number) => void;
+  onResizeEnd?: () => void;
+  onRowReorder?: (rowId: string, targetRowId: string, position: "above" | "below") => void;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  onFetchNextPage?: () => void;
+  /** true when a view filter with at least one condition is active; suppresses ghost rows */
+  isFiltered?: boolean;
+  /**
+   * What the virtualizer measures and what the StickyBand sticks to.
+   * Standalone passes a ref into the .tableScrollport wrapper; inline
+   * passes `window` since the page itself is the scroll container.
+   */
+  scrollElement: HTMLElement | Window | null;
+  /**
+   * Rendered inside `[role=grid]` but ABOVE the sticky band, so it scrolls
+   * with the content while only the column-header row stays pinned. In
+   * inline mode BaseTable injects banner + toolbar here; standalone passes
+   * null (they render outside the scrollport instead).
+   */
+  aboveBand?: React.ReactNode;
+};
+
+export function GridContainer({
+  table,
+  properties,
+  onCellUpdate,
+  onAddRow,
+  pageId,
+  onColumnReorder,
+  onResizeEnd,
+  onRowReorder,
+  hasNextPage,
+  isFetchingNextPage,
+  onFetchNextPage,
+  isFiltered,
+  scrollElement,
+  aboveBand,
+}: GridContainerProps) {
+  const headerRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const rowsContainerRef = useRef<HTMLDivElement>(null);
+  useHorizontalScrollSync(bodyRef, headerRef);
+  useGridAutoScroll(bodyRef, pageId);
+  useRowAutoScroll(scrollElement, pageId);
+  const lastTriggeredRowsLenRef = useRef(0);
+  const rows = table.getRowModel().rows;
+  const rowIds = useMemo(() => rows.map((r) => r.id), [rows]);
+  const rowIdsRef = useRef(rowIds);
+  rowIdsRef.current = rowIds;
+  const getOrderedRowIds = useCallback(() => rowIdsRef.current, []);
+  const editable = useBaseEditable();
+
+  const [editingCell, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
+  const editingCellRef = useRef(editingCell);
+  editingCellRef.current = editingCell;
+
+  const { selectionCount, clear: clearSelection } = useRowSelection(pageId);
+  const { deleteSelected } = useDeleteSelectedRows(pageId);
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      // Only act while an inline cell editor is open. Popover-based cells
+      // (select/status/person/page/date/file) self-dismiss via Mantine onChange.
+      // This handler's sole job is to commit an inline input editor
+      // (text/number/url/email) when the user clicks elsewhere, since clicking
+      // a non-focusable cell does not natively blur the input. Gating on
+      // editingCell also stops it from stealing focus from unrelated inputs.
+      if (!editingCellRef.current) return;
+      const target = e.target as HTMLElement;
+      if (target.closest(`.${classes.headerCell}`)) return;
+      if (target.closest("[role=\"dialog\"]")) return;
+      if (target.closest("[role=\"listbox\"]")) return;
+      if (target.closest("[data-mantine-shared-portal-node]")) return;
+      if (target.closest(`.${classes.cellEditing}`)) return;
+      // Blurring the input fires its onBlur -> commitOnce -> handleCommit,
+      // which also clears editingCell. No setEditingCell(null) needed here.
+      const active = document.activeElement as HTMLElement | null;
+      if (active && active !== document.body && typeof active.blur === "function") {
+        active.blur();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, []);
+
+  useColumnResize(table, onResizeEnd ?? (() => {}));
+
+  useGridKeyboardNav({
+    table,
+    editingCell,
+    setEditingCell,
+    containerRef: bodyRef,
+  });
+
+  // When the scroll container is the window (inline embed mode), the default
+  // Element-mode observers read scrollTop/scrollLeft, which Window does not
+  // have. Swap in the Window-mode observers so the virtualizer reads
+  // scrollY/scrollX instead. The Element-narrowed type is satisfied by an
+  // upcast on getScrollElement; virtual-core's runtime accepts Window when
+  // the observers do.
+  const isWindowScroll =
+    typeof window !== "undefined" && scrollElement === window;
+  const windowScrollOptions = isWindowScroll ? WINDOW_SCROLL_OPTIONS : {};
+
+  // Rows are positioned inside .rowsContainer, which sits below the sticky
+  // band (and aboveBand content) within the scroll content. scrollMargin =
+  // the container's offset from the scroll content top, in both modes, so
+  // virtual indexing lines up with what is actually on screen.
+  const [scrollMargin, setScrollMargin] = useState(0);
+  useLayoutEffect(() => {
+    const el = rowsContainerRef.current;
+    if (!el || !scrollElement) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      if (isWindowScroll) {
+        setScrollMargin(rect.top + window.scrollY);
+      } else {
+        const scrollport = scrollElement as HTMLElement;
+        setScrollMargin(
+          rect.top -
+            scrollport.getBoundingClientRect().top +
+            scrollport.scrollTop,
+        );
+      }
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    // Outer page reflows (sidebar collapse, viewport resize) can move the
+    // grid without resizing it, so listen to window resize too.
+    window.addEventListener("resize", update);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [isWindowScroll, scrollElement]);
+
+  // Stable row-id keys: the direct-update element cache and measurement
+  // cache are keyed by item key, so index keys would go stale whenever rows
+  // are inserted or reordered above the viewport.
+  const getItemKey = useCallback(
+    (index: number) => rowIds[index] ?? index,
+    [rowIds],
+  );
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollElement as Element | null,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+    scrollMargin,
+    getItemKey,
+    directDomUpdates: true,
+    // 'position' (writes `top`), not 'transform': a transform on the row
+    // creates a containing block that breaks the position:sticky pinned
+    // cells inside it.
+    directDomUpdatesMode: "position",
+    ...windowScrollOptions,
+    // virtual-core bug: on first attach _willUpdate calls
+    // _scrollToOffset(getScrollOffset()), which returns undefined when no
+    // initialOffset is provided. windowScroll then computes undefined + 0 = NaN,
+    // browsers coerce it to 0, and scrollY snaps to 0 when the embed mounts
+    // mid-page. Seeding initialOffset to the current scroll position makes
+    // the first _scrollToOffset a no-op.
+    initialOffset: isWindowScroll
+      ? () => window.scrollY
+      : () =>
+          scrollElement instanceof HTMLElement ? scrollElement.scrollTop : 0,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  useEffect(() => {
+    if (!hasNextPage || isFetchingNextPage || !onFetchNextPage) return;
+    const lastItem = virtualItems[virtualItems.length - 1];
+    if (!lastItem) return;
+    if (lastItem.index < rows.length - OVERSCAN * 2) return;
+    if (rows.length <= lastTriggeredRowsLenRef.current) return;
+    lastTriggeredRowsLenRef.current = rows.length;
+    onFetchNextPage();
+  }, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
+
+  useEffect(() => {
+    // When the row set shrinks (filter/sort/view change) or resets to zero,
+    // un-gate the trigger so the first page can trigger the next fetch correctly.
+    if (rows.length === 0 || rows.length < lastTriggeredRowsLenRef.current) {
+      lastTriggeredRowsLenRef.current = 0;
+    }
+  }, [rows.length]);
+
+  useEffect(() => {
+    const el = bodyRef.current;
+    if (!el || !pageId) return;
+    const handler = (e: KeyboardEvent) => {
+      if (editingCell) return;
+      const active = document.activeElement as HTMLElement | null;
+      if (!active || !el.contains(active)) return;
+      const tag = active.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || active.isContentEditable) {
+        return;
+      }
+      if (e.key === "Escape" && selectionCount > 0) {
+        clearSelection();
+        return;
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && selectionCount > 0) {
+        e.preventDefault();
+        void deleteSelected();
+      }
+    };
+    el.addEventListener("keydown", handler);
+    return () => el.removeEventListener("keydown", handler);
+  }, [editingCell, selectionCount, clearSelection, deleteSelected, pageId]);
+
+  const gridTemplateColumns = useMemo(() => {
+    const visibleColumns = table.getVisibleLeafColumns();
+    const columnWidths = visibleColumns.map((col) => `${col.getSize()}px`);
+    return (
+      columnWidths.join(" ") +
+      (pageId && editable ? ` ${ADD_COLUMN_TRACK_WIDTH}px` : "")
+    );
+  }, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, pageId, editable]);
+
+  const totalColumnsWidth = useMemo(
+    () =>
+      table
+        .getVisibleLeafColumns()
+        .reduce((sum, col) => sum + col.getSize(), 0) +
+      (pageId && editable ? ADD_COLUMN_TRACK_WIDTH : 0),
+    [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, pageId, editable],
+  );
+
+  const showGhostRows = rows.length === 0 && !isFiltered;
+  // Append a flexible trailing track so every row spans the full width.
+  // minmax(0, 1fr) collapses to 0 when columns overflow the viewport and
+  // fills remaining width otherwise. The header grid keeps the plain template.
+  const bodyGridTemplateColumns = `${gridTemplateColumns} minmax(0, 1fr)`;
+
+  const handleAddRow = useCallback(() => {
+    onAddRow?.();
+  }, [onAddRow]);
+
+  const handlePropertyCreated = useCallback(() => {
+    // Wait for React to re-render with the new column, then scroll to it
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        bodyRef.current?.scrollTo({
+          left: bodyRef.current.scrollWidth,
+          behavior: "smooth",
+        });
+      });
+    });
+  }, []);
+
+  const getColumnOrder = useCallback(
+    () => table.getState().columnOrder,
+    [table],
+  );
+
+  return (
+    <div role="grid" style={GRID_ROOT_STYLE}>
+      {aboveBand}
+      <div className={classes.stickyBand}>
+        <div
+          className={classes.headerGrid}
+          ref={headerRef}
+          style={{ gridTemplateColumns }}
+          role="row"
+        >
+          <GridHeader
+            table={table}
+            pageId={pageId}
+            columnOrder={table.getState().columnOrder}
+            columnVisibility={table.getState().columnVisibility}
+            properties={properties}
+            loadedRowIds={rowIds}
+            onPropertyCreated={handlePropertyCreated}
+            getColumnOrder={getColumnOrder}
+            onColumnReorder={onColumnReorder}
+          />
+        </div>
+      </div>
+        <GridRowOrderProvider value={getOrderedRowIds}>
+          <div
+            className={classes.bodyGrid}
+            ref={bodyRef}
+            tabIndex={0}
+            style={
+              {
+                "--base-grid-cols": bodyGridTemplateColumns,
+              } as React.CSSProperties
+            }
+          >
+            <div
+              className={classes.rowsContainer}
+              ref={(node) => {
+                rowsContainerRef.current = node;
+                virtualizer.containerRef(node);
+              }}
+              role="rowgroup"
+              style={{ width: totalColumnsWidth, minWidth: "100%" }}
+            >
+              {virtualItems.map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                if (!row) return null;
+                return (
+                  <GridRow
+                    key={row.id}
+                    row={row}
+                    rowIndex={virtualRow.index}
+                    measureRef={virtualizer.measureElement}
+                    onCellUpdate={onCellUpdate}
+                    properties={properties}
+                    columnVisibility={table.getState().columnVisibility}
+                    columnOrder={table.getState().columnOrder}
+                    pageId={pageId}
+                    onRowReorder={onRowReorder}
+                  />
+                );
+              })}
+            </div>
+            {showGhostRows && (
+              <GridGhostRows
+                count={3}
+                columnCount={table.getVisibleLeafColumns().length}
+                onCreate={editable ? handleAddRow : undefined}
+              />
+            )}
+            {editable && <AddRowButton onClick={handleAddRow} />}
+            {pageId && <SelectionActionBar pageId={pageId} />}
+          </div>
+        </GridRowOrderProvider>
+    </div>
+  );
+}
diff --git a/apps/client/src/ee/base/components/grid/grid-ghost-rows.tsx b/apps/client/src/ee/base/components/grid/grid-ghost-rows.tsx
new file mode 100644
index 000000000..7e0ce82aa
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/grid-ghost-rows.tsx
@@ -0,0 +1,32 @@
+import classes from "@/ee/base/styles/grid.module.css";
+
+type GridGhostRowsProps = {
+  /** how many placeholder rows to render */
+  count: number;
+  /** number of visible leaf columns (incl. the row-number column) */
+  columnCount: number;
+  /** create the first real row (clicking any ghost cell); omit when read-only */
+  onCreate?: () => void;
+};
+
+// Empty-state ghost rows shown when no data rows exist and no filter is active.
+// Clicking any ghost row creates the first real row; cells align via subgrid.
+export function GridGhostRows({ count, columnCount, onCreate }: GridGhostRowsProps) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, rowIdx) => (
+        <div
+          key={rowIdx}
+          className={`${classes.row} ${classes.ghostRow}`}
+          role={onCreate ? "button" : undefined}
+          aria-label={onCreate ? "Create first row" : undefined}
+          onClick={onCreate}
+        >
+          {Array.from({ length: columnCount }).map((_, colIdx) => (
+            <div key={colIdx} className={classes.cell} aria-hidden="true" />
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/apps/client/src/ee/base/components/grid/grid-header-cell.tsx b/apps/client/src/ee/base/components/grid/grid-header-cell.tsx
new file mode 100644
index 000000000..680c3a2d9
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/grid-header-cell.tsx
@@ -0,0 +1,338 @@
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Header, flexRender } from "@tanstack/react-table";
+import { Badge, Popover } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
+import { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
+import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
+import { IBaseRow, IBaseProperty, EditingCell } from "@/ee/base/types/base.types";
+import {
+  activePropertyMenuAtomFamily,
+  propertyMenuDirtyAtomFamily,
+  propertyMenuCloseRequestAtomFamily,
+  editingCellAtomFamily,
+  activeFormulaEditorAtomFamily,
+  FormulaEditorTarget,
+} from "@/ee/base/atoms/base-atoms";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { PropertyMenuContent } from "@/ee/base/components/property/property-menu";
+import { FormulaPropertyEditor } from "@/ee/base/components/formula/formula-property-editor";
+import { RowNumberHeaderCell } from "./row-number-header-cell";
+import { BaseDropEdgeIndicator } from "./base-drop-edge-indicator";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import classes from "@/ee/base/styles/grid.module.css";
+
+export const COLUMN_DRAG_TYPE = "base-column";
+
+type GridHeaderCellProps = {
+  header: Header<IBaseRow, unknown>;
+  property: IBaseProperty | undefined;
+  loadedRowIds: string[];
+  pageId: string;
+  getColumnOrder: () => string[];
+  onColumnReorder?: (columnId: string, finishIndex: number) => void;
+};
+
+export const GridHeaderCell = memo(function GridHeaderCell({
+  header,
+  property,
+  loadedRowIds,
+  pageId,
+  getColumnOrder,
+  onColumnReorder,
+}: GridHeaderCellProps) {
+  const { t } = useTranslation();
+  const isRowNumber = header.column.id === "__row_number";
+  const isPinned = header.column.getIsPinned();
+  const pinOffset = isPinned ? header.column.getStart("left") : undefined;
+  const { selectionCount } = useRowSelection(pageId);
+  const hasSelection = selectionCount > 0;
+  const editable = useBaseEditable();
+
+  const [activePropertyMenu, setActivePropertyMenu] = useAtom(activePropertyMenuAtomFamily(pageId)) as unknown as [string | null, (val: string | null) => void];
+  const menuOpened = activePropertyMenu === header.column.id;
+  const cellRef = useRef<HTMLDivElement>(null);
+  const [propertyMenuDirty, setPropertyMenuDirty] = useAtom(propertyMenuDirtyAtomFamily(pageId)) as unknown as [boolean, (val: boolean) => void];
+  const [closeRequest, setCloseRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number, (val: number) => void];
+  const [, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
+  const [activeFormulaEditor, setActiveFormulaEditor] = useAtom(
+    activeFormulaEditorAtomFamily(pageId),
+  ) as unknown as [FormulaEditorTarget, (val: FormulaEditorTarget) => void];
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const resizeIntentRef = useRef(false);
+
+  const handleDirtyChange = useCallback((dirty: boolean) => {
+    setPropertyMenuDirty(dirty);
+  }, [setPropertyMenuDirty]);
+
+  const isSortableDisabled = isRowNumber || !!isPinned || !editable;
+
+  // onColumnReorder ultimately depends on React Query result objects
+  // (activeView, base) via persistViewConfig, and their identity changes on
+  // every cache invalidation (every WS-driven collab refresh). Holding the
+  // callback in a ref keeps it out of the DnD effect's dep array so we don't
+  // tear down and re-register the pragmatic-dnd adapter on every header cell
+  // each time another user edits the base.
+  const onColumnReorderRef = useRef(onColumnReorder);
+  useLayoutEffect(() => {
+    onColumnReorderRef.current = onColumnReorder;
+  });
+
+  useEffect(() => {
+    const el = cellRef.current;
+    if (!el || isSortableDisabled) return;
+    return combine(
+      draggable({
+        element: el,
+        canDrag: () => !resizeIntentRef.current,
+        getInitialData: () => ({
+          type: COLUMN_DRAG_TYPE,
+          columnId: header.column.id,
+          pageId,
+        }),
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element: el,
+        canDrop: ({ source }) =>
+          source.data.type === COLUMN_DRAG_TYPE &&
+          source.data.columnId !== header.column.id,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { columnId: header.column.id },
+            { input, element, allowedEdges: ["left", "right"] },
+          ),
+        onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const edge = extractClosestEdge(self.data);
+          if (!edge) return;
+          const order = getColumnOrder();
+          const startIndex = order.indexOf(source.data.columnId as string);
+          const indexOfTarget = order.indexOf(header.column.id);
+          if (startIndex === -1 || indexOfTarget === -1) return;
+          const finishIndex = getReorderDestinationIndex({
+            startIndex,
+            indexOfTarget,
+            closestEdgeOfTarget: edge,
+            axis: "horizontal",
+          });
+          if (finishIndex === startIndex) return;
+          onColumnReorderRef.current?.(source.data.columnId as string, finishIndex);
+          triggerPostMoveFlash(el);
+          liveRegion.announce(`Moved column to position ${finishIndex + 1}`);
+        },
+      }),
+    );
+  }, [header.column.id, isSortableDisabled, getColumnOrder]);
+
+  const handleHeaderClick = useCallback(() => {
+    if (resizeIntentRef.current) {
+      resizeIntentRef.current = false;
+      return;
+    }
+    setEditingCell(null);
+    if (!editable) return;
+    if (!isRowNumber && property && !isDragging) {
+      if (propertyMenuDirty && !menuOpened) return;
+      setActivePropertyMenu(menuOpened ? null : header.column.id);
+    }
+  }, [editable, isRowNumber, property, isDragging, header.column.id, menuOpened, propertyMenuDirty, setActivePropertyMenu, setEditingCell]);
+
+  const handleMenuClose = useCallback(() => {
+    setActivePropertyMenu(null);
+  }, [setActivePropertyMenu]);
+
+  const handleEditFormula = useCallback(() => {
+    if (!property) return;
+    handleMenuClose();
+    setActiveFormulaEditor({ propertyId: property.id, rowId: null });
+  }, [property, handleMenuClose, setActiveFormulaEditor]);
+
+  const closeFormulaEditor = useCallback(
+    () => setActiveFormulaEditor(null),
+    [setActiveFormulaEditor],
+  );
+
+  const formulaEditorOpen =
+    !!property &&
+    activeFormulaEditor?.propertyId === property.id &&
+    activeFormulaEditor?.rowId === null;
+
+  // A closed property menu can never hold unsaved changes. Saving a rename
+  // must clear propertyMenuDirty; otherwise it stays stuck true and
+  // handleHeaderClick refuses to reopen any property menu, making the menu
+  // appear dead after the first save. Reset only on the open-to-closed
+  // transition so a sibling header cell can't clear the flag while another
+  // column's menu is mid-edit.
+  const wasMenuOpenedRef = useRef(menuOpened);
+  useEffect(() => {
+    if (wasMenuOpenedRef.current && !menuOpened) {
+      setPropertyMenuDirty(false);
+    }
+    wasMenuOpenedRef.current = menuOpened;
+  }, [menuOpened, setPropertyMenuDirty]);
+
+  const handleMenuOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) return; // opening is driven by the atom, not Mantine
+      if (propertyMenuDirty) {
+        // Veto the close and route through the discard-confirm flow.
+        setCloseRequest(closeRequest + 1);
+      } else {
+        handleMenuClose();
+      }
+    },
+    [propertyMenuDirty, closeRequest, setCloseRequest, handleMenuClose],
+  );
+
+  const TypeIcon = property ? getDescriptor(property.type)?.icon : undefined;
+
+  return (
+    <div
+      ref={cellRef}
+      className={`${classes.headerCell} ${isPinned ? classes.headerCellPinned : ""} ${hasSelection ? classes.hasSelection : ""}`}
+      style={{
+        ...(isPinned
+          ? ({ "--pin-offset": `${pinOffset}px` } as React.CSSProperties)
+          : {}),
+        ...(isRowNumber || !editable ? {} : { cursor: "pointer" }),
+        opacity: isDragging ? 0.4 : 1,
+      }}
+      onPointerDown={() => {
+        resizeIntentRef.current = false;
+      }}
+      onClick={handleHeaderClick}
+      data-dragging={isDragging || undefined}
+    >
+      {isRowNumber ? (
+        <RowNumberHeaderCell loadedRowIds={loadedRowIds} pageId={pageId} />
+      ) : (
+        <div className={classes.headerCellContent}>
+          {TypeIcon && (
+            <TypeIcon size={14} className={classes.headerTypeIcon} />
+          )}
+          <span className={classes.headerCellName}>
+            {flexRender(header.column.columnDef.header, header.getContext())}
+          </span>
+          {property?.pendingType && (
+            <Badge size="xs" color="gray" variant="light" ml={6}>
+              {t("Converting…")}
+            </Badge>
+          )}
+        </div>
+      )}
+      {editable && header.column.getCanResize() && (
+        <div
+          className={`${classes.resizeHandle} ${
+            header.column.getIsResizing() ? classes.resizeHandleActive : ""
+          }`}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            header.getResizeHandler()(e);
+          }}
+          onTouchStart={(e) => {
+            e.stopPropagation();
+            header.getResizeHandler()(e);
+          }}
+          onPointerDown={(e) => {
+            resizeIntentRef.current = true;
+            e.stopPropagation();
+          }}
+          onClick={(e) => e.stopPropagation()}
+        />
+      )}
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+      {editable && property && !isRowNumber && (
+        <Popover
+          opened={menuOpened}
+          onChange={handleMenuOpenChange}
+          onClose={handleMenuClose}
+          position="bottom-start"
+          shadow="md"
+          width={260}
+          trapFocus
+          withinPortal
+          closeOnClickOutside
+          closeOnEscape
+        >
+          <Popover.Target>
+            <div className={classes.popoverAnchor} />
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <PropertyMenuContent
+              property={property}
+              opened={menuOpened}
+              onClose={handleMenuClose}
+              onDirtyChange={handleDirtyChange}
+              onEditFormula={
+                property.type === "formula" ? handleEditFormula : undefined
+              }
+              pageId={pageId}
+            />
+          </Popover.Dropdown>
+        </Popover>
+      )}
+      {property && !isRowNumber && property.type === "formula" && (
+        <Popover
+          opened={formulaEditorOpen}
+          onChange={(o) => {
+            if (!o) closeFormulaEditor();
+          }}
+          position="bottom-start"
+          width={460}
+          shadow="md"
+          withinPortal
+          closeOnClickOutside
+          closeOnEscape={false}
+          trapFocus
+        >
+          <Popover.Target>
+            <div className={classes.popoverAnchor} />
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === "Escape") {
+                e.preventDefault();
+                closeFormulaEditor();
+              }
+            }}
+            style={{ maxWidth: "calc(100vw - 32px)" }}
+          >
+            {formulaEditorOpen && (
+              <FormulaPropertyEditor
+                property={property}
+                pageId={pageId}
+                onClose={closeFormulaEditor}
+              />
+            )}
+          </Popover.Dropdown>
+        </Popover>
+      )}
+    </div>
+  );
+});
diff --git a/apps/client/src/ee/base/components/grid/grid-header.tsx b/apps/client/src/ee/base/components/grid/grid-header.tsx
new file mode 100644
index 000000000..152858d68
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/grid-header.tsx
@@ -0,0 +1,64 @@
+import { memo, useMemo } from "react";
+import { Table, ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+import { IBaseRow, IBaseProperty } from "@/ee/base/types/base.types";
+import { GridHeaderCell } from "./grid-header-cell";
+import { CreatePropertyPopover } from "@/ee/base/components/property/create-property-popover";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type GridHeaderProps = {
+  table: Table<IBaseRow>;
+  pageId: string;
+  columnOrder: ColumnOrderState;
+  columnVisibility: VisibilityState;
+  properties: IBaseProperty[];
+  loadedRowIds: string[];
+  onPropertyCreated?: () => void;
+  getColumnOrder: () => string[];
+  onColumnReorder?: (columnId: string, finishIndex: number) => void;
+};
+
+export const GridHeader = memo(function GridHeader({
+  table,
+  pageId,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnOrder: _columnOrder,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnVisibility: _columnVisibility,
+  properties,
+  loadedRowIds,
+  onPropertyCreated,
+  getColumnOrder,
+  onColumnReorder,
+}: GridHeaderProps) {
+  const headerGroups = table.getHeaderGroups();
+  const editable = useBaseEditable();
+  const propertyById = useMemo(() => {
+    const map = new Map<string, IBaseProperty>();
+    for (const p of properties) map.set(p.id, p);
+    return map;
+  }, [properties]);
+
+  return (
+    <div className={classes.headerRow} role="row">
+      {headerGroups[0]?.headers.map((header) => (
+        <GridHeaderCell
+          key={header.id}
+          header={header}
+          property={propertyById.get(header.column.id)}
+          loadedRowIds={loadedRowIds}
+          pageId={pageId}
+          getColumnOrder={getColumnOrder}
+          onColumnReorder={onColumnReorder}
+        />
+      ))}
+      {editable && (
+        <CreatePropertyPopover
+          pageId={pageId}
+          properties={properties}
+          onPropertyCreated={onPropertyCreated}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/apps/client/src/ee/base/components/grid/grid-row.tsx b/apps/client/src/ee/base/components/grid/grid-row.tsx
new file mode 100644
index 000000000..a9eed6c7b
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/grid-row.tsx
@@ -0,0 +1,195 @@
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Row, VisibilityState } from "@tanstack/react-table";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
+import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { GridCell } from "./grid-cell";
+import classes from "@/ee/base/styles/grid.module.css";
+
+export const ROW_DRAG_TYPE = "base-row";
+
+type GridRowProps = {
+  row: Row<IBaseRow>;
+  rowIndex: number;
+  measureRef: (node: Element | null) => void;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  onRowReorder?: (
+    rowId: string,
+    targetRowId: string,
+    position: "above" | "below",
+  ) => void;
+  properties: IBaseProperty[];
+  columnVisibility: VisibilityState;
+  columnOrder: string[];
+  pageId: string;
+};
+
+export const GridRow = memo(function GridRow({
+  row,
+  rowIndex,
+  measureRef,
+  onCellUpdate,
+  onRowReorder,
+  pageId,
+}: GridRowProps) {
+  const rowId = row.id;
+  const isSelected = useRowSelection(pageId).isSelected(rowId);
+
+  const rowRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const setRowEl = useCallback(
+    (node: HTMLDivElement | null) => {
+      rowRef.current = node;
+      measureRef(node);
+    },
+    [measureRef],
+  );
+
+  // onRowReorder ultimately depends on React Query result objects (activeView,
+  // base) via persistViewConfig, and its identity changes on every WS-driven
+  // cache invalidation. Holding it in a ref keeps it out of the DnD effect's
+  // dep array so we don't tear down and re-register every row's pragmatic-dnd
+  // adapter each time another user edits the base. Same pattern as the column
+  // header's onColumnReorderRef.
+  const onRowReorderRef = useRef(onRowReorder);
+  useLayoutEffect(() => {
+    onRowReorderRef.current = onRowReorder;
+  });
+
+  useEffect(() => {
+    const rowEl = rowRef.current;
+    if (!rowEl || !onRowReorder) return;
+    // The whole row is the draggable element (full-row native preview).
+    // dragHandle limits initiation to the grip, leaving cell clicks and
+    // inline editing untouched.
+    const handle = rowEl.querySelector<HTMLElement>(
+      `.${classes.rowNumberDragHandle}`,
+    );
+    if (!handle) return;
+    return combine(
+      draggable({
+        element: rowEl,
+        dragHandle: handle,
+        getInitialData: () => ({ type: ROW_DRAG_TYPE, rowId, pageId }),
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          // Native preview of the full-width sticky subgrid row rasterizes
+          // garbled (it pulls in surrounding page paint, e.g. the sidebar).
+          // Render a compact card that clones just the title cell instead.
+          const titleCell =
+            rowEl.querySelector<HTMLElement>(`.${classes.primaryCell}`) ??
+            rowEl.querySelector<HTMLElement>(`.${classes.cell}`);
+          if (!titleCell) return;
+          const width = titleCell.getBoundingClientRect().width;
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: pointerOutsideOfPreview({ x: "12px", y: "8px" }),
+            render: ({ container }) => {
+              const card = document.createElement("div");
+              card.className = classes.rowDragPreview;
+              card.style.width = `${width}px`;
+              const clone = titleCell.cloneNode(true) as HTMLElement;
+              clone.style.position = "static";
+              clone.style.left = "auto";
+              clone.style.width = "100%";
+              clone.style.opacity = "1";
+              clone.style.borderRight = "none";
+              card.appendChild(clone);
+              container.appendChild(card);
+            },
+          });
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element: rowEl,
+        canDrop: ({ source }) =>
+          source.data.type === ROW_DRAG_TYPE &&
+          source.data.pageId === pageId &&
+          source.data.rowId !== rowId,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { rowId },
+            { input, element, allowedEdges: ["top", "bottom"] },
+          ),
+        onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const edge = extractClosestEdge(self.data);
+          if (!edge) return;
+          onRowReorderRef.current?.(
+            source.data.rowId as string,
+            rowId,
+            edge === "top" ? "above" : "below",
+          );
+          triggerPostMoveFlash(rowEl);
+          liveRegion.announce("Moved row");
+        },
+      }),
+    );
+    // onRowReorder is read through onRowReorderRef; only its presence gates
+    // registration, and that does not change across a row's mounted life.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowId, pageId]);
+
+  const dropIndicatorClass = closestEdge
+    ? closestEdge === "top"
+      ? classes.rowDropAbove
+      : classes.rowDropBelow
+    : "";
+
+  return (
+    <div
+      ref={setRowEl}
+      data-index={rowIndex}
+      className={`${classes.row} ${classes.virtualRow} ${isDragging ? classes.rowDragging : ""} ${dropIndicatorClass} ${isSelected ? classes.rowSelected : ""}`}
+      role="row"
+    >
+      {row.getVisibleCells().map((cell) => (
+        <GridCell
+          key={cell.id}
+          cell={cell}
+          rowIndex={rowIndex}
+          onCellUpdate={onCellUpdate}
+          pageId={pageId}
+        />
+      ))}
+    </div>
+  );
+},
+gridRowPropsEqual);
+
+// row compares by row.original: React Query structural sharing keeps
+// unchanged rows reference-stable, while TanStack re-instantiates Row/Cell
+// wrappers on every data change. properties/columnVisibility/columnOrder are
+// layout busters — schema or column-state changes must re-render rows.
+function gridRowPropsEqual(prev: GridRowProps, next: GridRowProps) {
+  return (
+    prev.row.id === next.row.id &&
+    prev.row.original === next.row.original &&
+    prev.rowIndex === next.rowIndex &&
+    prev.pageId === next.pageId &&
+    prev.onCellUpdate === next.onCellUpdate &&
+    prev.onRowReorder === next.onRowReorder &&
+    prev.measureRef === next.measureRef &&
+    prev.properties === next.properties &&
+    prev.columnVisibility === next.columnVisibility &&
+    prev.columnOrder === next.columnOrder
+  );
+}
diff --git a/apps/client/src/ee/base/components/grid/row-number-cell.tsx b/apps/client/src/ee/base/components/grid/row-number-cell.tsx
new file mode 100644
index 000000000..56a8b21da
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/row-number-cell.tsx
@@ -0,0 +1,70 @@
+import { memo, useCallback } from "react";
+import { Checkbox } from "@mantine/core";
+import { IconGripVertical } from "@tabler/icons-react";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { useGridRowOrder } from "@/ee/base/context/grid-row-order";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type RowNumberCellProps = {
+  rowId: string;
+  rowIndex: number;
+  isPinned: boolean;
+  pinOffset?: number;
+  pageId: string;
+};
+
+export const RowNumberCell = memo(function RowNumberCell({
+  rowId,
+  rowIndex,
+  isPinned,
+  pinOffset,
+  pageId,
+}: RowNumberCellProps) {
+  const { isSelected, toggle } = useRowSelection(pageId);
+  const selected = isSelected(rowId);
+  const editable = useBaseEditable();
+  const getOrderedRowIds = useGridRowOrder();
+
+  const handleCheckboxChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const nativeEvent = e.nativeEvent as MouseEvent;
+      toggle(rowId, {
+        shiftKey: nativeEvent.shiftKey === true,
+        rowIndex,
+        orderedRowIds: getOrderedRowIds(),
+      });
+    },
+    [rowId, rowIndex, getOrderedRowIds, toggle],
+  );
+
+  return (
+    <div
+      className={`${classes.cell} ${classes.rowNumberCell} ${isPinned ? classes.cellPinned : ""}`}
+      style={
+        isPinned
+          ? ({ "--pin-offset": `${pinOffset ?? 0}px` } as React.CSSProperties)
+          : undefined
+      }
+    >
+      <div className={classes.rowNumberCellInner}>
+        {editable && (
+          <span className={classes.rowNumberDragHandle} aria-label="Drag row">
+            <IconGripVertical size={12} />
+          </span>
+        )}
+        {editable && (
+          <span className={classes.rowNumberCheckbox}>
+            <Checkbox
+              size="xs"
+              checked={selected}
+              onChange={handleCheckboxChange}
+              aria-label="Select row"
+            />
+          </span>
+        )}
+        <span className={classes.rowNumberIndex}>{rowIndex + 1}</span>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/client/src/ee/base/components/grid/row-number-header-cell.tsx b/apps/client/src/ee/base/components/grid/row-number-header-cell.tsx
new file mode 100644
index 000000000..4a2130c2b
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/row-number-header-cell.tsx
@@ -0,0 +1,50 @@
+import { memo, useMemo } from "react";
+import { Checkbox, Tooltip } from "@mantine/core";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type RowNumberHeaderCellProps = {
+  loadedRowIds: string[];
+  pageId: string;
+};
+
+export const RowNumberHeaderCell = memo(function RowNumberHeaderCell({
+  loadedRowIds,
+  pageId,
+}: RowNumberHeaderCellProps) {
+  const { selectedIds, toggleAll } = useRowSelection(pageId);
+
+  const { checked, indeterminate } = useMemo(() => {
+    if (loadedRowIds.length === 0) {
+      return { checked: false, indeterminate: false };
+    }
+    const selectedInLoaded = loadedRowIds.reduce(
+      (acc, id) => (selectedIds.has(id) ? acc + 1 : acc),
+      0,
+    );
+    return {
+      checked: selectedInLoaded === loadedRowIds.length,
+      indeterminate:
+        selectedInLoaded > 0 && selectedInLoaded < loadedRowIds.length,
+    };
+  }, [loadedRowIds, selectedIds]);
+
+  if (loadedRowIds.length === 0) return null;
+
+  return (
+    <div className={classes.rowNumberHeaderInner}>
+      <span className={classes.rowNumberHeaderHash}>#</span>
+      <span className={classes.rowNumberHeaderCheckbox}>
+        <Tooltip label="Select all loaded rows" withinPortal>
+          <Checkbox
+            size="xs"
+            checked={checked}
+            indeterminate={indeterminate}
+            onChange={() => toggleAll(loadedRowIds)}
+            aria-label="Select all loaded rows"
+          />
+        </Tooltip>
+      </span>
+    </div>
+  );
+});
diff --git a/apps/client/src/ee/base/components/grid/selection-action-bar.tsx b/apps/client/src/ee/base/components/grid/selection-action-bar.tsx
new file mode 100644
index 000000000..c804c4d6a
--- /dev/null
+++ b/apps/client/src/ee/base/components/grid/selection-action-bar.tsx
@@ -0,0 +1,52 @@
+import { memo } from "react";
+import { Transition } from "@mantine/core";
+import { IconTrash, IconX } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useDeleteSelectedRows } from "@/ee/base/hooks/use-delete-selected-rows";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type SelectionActionBarProps = {
+  pageId: string;
+};
+
+export const SelectionActionBar = memo(function SelectionActionBar({
+  pageId,
+}: SelectionActionBarProps) {
+  const { t } = useTranslation();
+  const { selectionCount, clear } = useRowSelection(pageId);
+  const { deleteSelected, isPending } = useDeleteSelectedRows(pageId);
+
+  const isOpen = selectionCount > 0;
+
+  return (
+    <Transition mounted={isOpen} transition="slide-up" duration={150}>
+      {(styles) => (
+        <div className={classes.selectionActionBarWrapper} style={styles}>
+          <div className={classes.selectionActionBar} role="toolbar">
+            <span className={classes.selectionActionBarCount}>
+              {t("{{count}} selected", { count: selectionCount })}
+            </span>
+            <button
+              type="button"
+              className={classes.selectionActionBarDelete}
+              disabled={isPending}
+              onClick={() => void deleteSelected()}
+            >
+              <IconTrash size={14} />
+              {t("Delete")}
+            </button>
+            <button
+              type="button"
+              className={classes.selectionActionBarClose}
+              onClick={clear}
+              aria-label={t("Clear selection")}
+            >
+              <IconX size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+    </Transition>
+  );
+});
diff --git a/apps/client/src/ee/base/components/property/choice-editor.tsx b/apps/client/src/ee/base/components/property/choice-editor.tsx
new file mode 100644
index 000000000..f019baec7
--- /dev/null
+++ b/apps/client/src/ee/base/components/property/choice-editor.tsx
@@ -0,0 +1,673 @@
+import { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from "react";
+import {
+  TextInput,
+  Group,
+  Stack,
+  Text,
+  Button,
+  Popover,
+  SimpleGrid,
+  UnstyledButton,
+  CloseButton,
+  Divider,
+} from "@mantine/core";
+import {
+  IconPlus,
+  IconGripVertical,
+  IconArrowsSort,
+} from "@tabler/icons-react";
+import classes from "@/ee/base/styles/property.module.css";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
+import { reorder } from "@atlaskit/pragmatic-drag-and-drop/reorder";
+import { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
+import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
+import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+import { Choice } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useTranslation } from "react-i18next";
+import { v7 as uuid7 } from "uuid";
+import { DefaultValuePicker } from "./default-value-picker";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+const STATUS_CATEGORIES = [
+  { value: "todo", label: "To Do" },
+  { value: "inProgress", label: "In Progress" },
+  { value: "complete", label: "Complete" },
+] as const;
+
+// Default choices for a new status property, one per category.
+export function defaultStatusChoices(): Choice[] {
+  return [
+    { id: uuid7(), name: "Not started", color: "gray", category: "todo" },
+    { id: uuid7(), name: "In progress", color: "blue", category: "inProgress" },
+    { id: uuid7(), name: "Done", color: "green", category: "complete" },
+  ];
+}
+
+function pruneDefault(
+  value: string | string[] | null,
+  choices: Choice[],
+): string | string[] | null {
+  if (value === null) return null;
+  const ids = new Set(choices.map((c) => c.id));
+  if (Array.isArray(value)) {
+    const live = value.filter((id) => ids.has(id));
+    return live.length ? live : null;
+  }
+  return ids.has(value) ? value : null;
+}
+
+function defaultsEqual(
+  a: string | string[] | null,
+  b: string | string[] | null,
+): boolean {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((v, i) => v === b[i]);
+  }
+  return a === b;
+}
+
+type ChoiceEditorProps = {
+  initialChoices: Choice[];
+  onSave: (choices: Choice[], defaultValue: string | string[] | null) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  showCategories?: boolean;
+  hideButtons?: boolean;
+  initialDefaultValue?: string | string[] | null;
+  multiDefault?: boolean;
+  /**
+   * Where the per-choice color-picker popover portals. Pass the enclosing
+   * property-menu dropdown node so the picker renders INSIDE that subtree —
+   * otherwise a color click registers as "outside" and closes the menu.
+   */
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+export function ChoiceEditor({
+  initialChoices,
+  onSave,
+  onClose,
+  onDirtyChange,
+  showCategories = false,
+  hideButtons = false,
+  initialDefaultValue = null,
+  multiDefault = false,
+  dropdownPortalTarget,
+}: ChoiceEditorProps) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = useState<Choice[]>(initialChoices);
+  const [focusChoiceId, setFocusChoiceId] = useState<string | null>(null);
+  const [defaultDraft, setDefaultDraft] = useState<string | string[] | null>(
+    initialDefaultValue,
+  );
+
+  useEffect(() => {
+    if (!hideButtons) {
+      setDraft(initialChoices);
+      setDefaultDraft(initialDefaultValue);
+    }
+  }, [initialChoices, initialDefaultValue, hideButtons]);
+
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+
+  useEffect(() => {
+    if (hideButtons) {
+      const cleaned = draft.filter((c) => c.name.trim());
+      onSaveRef.current(cleaned, pruneDefault(defaultDraft, cleaned));
+    }
+  }, [hideButtons, draft, defaultDraft]);
+
+  const isDirty = useMemo(() => {
+    if (!defaultsEqual(defaultDraft, initialDefaultValue)) return true;
+    if (draft.length !== initialChoices.length) return true;
+    return draft.some((d, i) => {
+      const o = initialChoices[i];
+      return d.id !== o.id || d.name !== o.name || d.color !== o.color || d.category !== o.category;
+    });
+  }, [draft, initialChoices, defaultDraft, initialDefaultValue]);
+
+  useEffect(() => {
+    onDirtyChange?.(isDirty);
+  }, [isDirty, onDirtyChange]);
+
+  const hasEmptyNames = draft.some((c) => !c.name.trim());
+
+  const handleRename = useCallback((choiceId: string, name: string) => {
+    setDraft((prev) => prev.map((c) => (c.id === choiceId ? { ...c, name } : c)));
+  }, []);
+
+  const handleColorChange = useCallback((choiceId: string, color: string) => {
+    setDraft((prev) => prev.map((c) => (c.id === choiceId ? { ...c, color } : c)));
+  }, []);
+
+  const handleRemove = useCallback((choiceId: string) => {
+    setDraft((prev) => prev.filter((c) => c.id !== choiceId));
+    setDefaultDraft((prev) => {
+      if (prev === null) return prev;
+      if (Array.isArray(prev)) {
+        const next = prev.filter((id) => id !== choiceId);
+        return next.length ? next : null;
+      }
+      return prev === choiceId ? null : prev;
+    });
+  }, []);
+
+  const handleAdd = useCallback((category?: "todo" | "inProgress" | "complete") => {
+    const id = uuid7();
+    setDraft((prev) => {
+      const colorIndex = prev.length % CHOICE_COLORS.length;
+      const newChoice: Choice = {
+        id,
+        name: "",
+        color: CHOICE_COLORS[colorIndex],
+        ...(category ? { category } : {}),
+      };
+      return [...prev, newChoice];
+    });
+    setFocusChoiceId(id);
+  }, []);
+
+  const handleAlphabetize = useCallback(() => {
+    setDraft((prev) => [...prev].sort((a, b) => a.name.localeCompare(b.name)));
+  }, []);
+
+  const handleSave = useCallback(() => {
+    const cleaned = draft.filter((c) => c.name.trim());
+    onSave(cleaned, pruneDefault(defaultDraft, cleaned));
+    onClose();
+  }, [draft, defaultDraft, onSave, onClose]);
+
+  const handleCancel = useCallback(() => {
+    setDraft(initialChoices);
+    setDefaultDraft(initialDefaultValue);
+    onDirtyChange?.(false);
+    onClose();
+  }, [initialChoices, initialDefaultValue, onDirtyChange, onClose]);
+
+  const handleReorder = useCallback(
+    (activeId: string, targetId: string, edge: Edge) => {
+      setDraft((prev) => {
+        const startIndex = prev.findIndex((c) => c.id === activeId);
+        const indexOfTarget = prev.findIndex((c) => c.id === targetId);
+        if (startIndex === -1 || indexOfTarget === -1) return prev;
+        const finishIndex = getReorderDestinationIndex({
+          startIndex,
+          indexOfTarget,
+          closestEdgeOfTarget: edge,
+          axis: "vertical",
+        });
+        if (finishIndex === startIndex) return prev;
+        return reorder({ list: prev, startIndex, finishIndex });
+      });
+    },
+    [],
+  );
+
+  const handleCategoryReorder = useCallback(
+    (category: string, activeId: string, targetId: string, edge: Edge) => {
+      setDraft((prev) => {
+        const catChoices = prev.filter((c) => (c.category ?? "todo") === category);
+        const startIndex = catChoices.findIndex((c) => c.id === activeId);
+        const indexOfTarget = catChoices.findIndex((c) => c.id === targetId);
+        if (startIndex === -1 || indexOfTarget === -1) return prev;
+        const finishIndex = getReorderDestinationIndex({
+          startIndex,
+          indexOfTarget,
+          closestEdgeOfTarget: edge,
+          axis: "vertical",
+        });
+        if (finishIndex === startIndex) return prev;
+        const reordered = reorder({
+          list: catChoices,
+          startIndex,
+          finishIndex,
+        });
+        const result: Choice[] = [];
+        for (const cat of ["todo", "inProgress", "complete"]) {
+          if (cat === category) {
+            result.push(...reordered);
+          } else {
+            result.push(...prev.filter((c) => (c.category ?? "todo") === cat));
+          }
+        }
+        return result;
+      });
+    },
+    [],
+  );
+
+  return (
+    <Stack gap="xs">
+      <Group justify="space-between">
+        <Text size="xs" fw={600}>
+          {t("Options")}
+        </Text>
+        <UnstyledButton onClick={handleAlphabetize} className={classes.alphabetizeBtn}>
+          <IconArrowsSort size={14} color="var(--mantine-color-dimmed)" />
+          <Text size="xs" c="dimmed">{t("Alphabetize")}</Text>
+        </UnstyledButton>
+      </Group>
+
+      {showCategories ? (
+        <StatusChoiceList
+          draft={draft}
+          focusChoiceId={focusChoiceId}
+          onFocused={() => setFocusChoiceId(null)}
+          onRename={handleRename}
+          onColorChange={handleColorChange}
+          onRemove={handleRemove}
+          onAdd={handleAdd}
+          onCategoryReorder={handleCategoryReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      ) : (
+        <FlatChoiceList
+          draft={draft}
+          focusChoiceId={focusChoiceId}
+          onFocused={() => setFocusChoiceId(null)}
+          onRename={handleRename}
+          onColorChange={handleColorChange}
+          onRemove={handleRemove}
+          onAdd={handleAdd}
+          onReorder={handleReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      )}
+
+      <DefaultValuePicker
+        choices={draft.filter((c) => c.name.trim())}
+        value={defaultDraft}
+        multiple={multiDefault}
+        onChange={setDefaultDraft}
+        dropdownPortalTarget={dropdownPortalTarget}
+      />
+
+      {!hideButtons && (
+        <>
+          <Divider />
+
+          <Group justify="flex-end" gap="xs">
+            <Button variant="default" size="xs" onClick={handleCancel}>
+              {t("Cancel")}
+            </Button>
+            <Button size="xs" onClick={handleSave} disabled={!isDirty || hasEmptyNames}>
+              {t("Save")}
+            </Button>
+          </Group>
+        </>
+      )}
+    </Stack>
+  );
+}
+
+function FlatChoiceList({
+  draft,
+  focusChoiceId,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onAdd,
+  onReorder,
+  dropdownPortalTarget,
+}: {
+  draft: Choice[];
+  focusChoiceId: string | null;
+  onFocused: () => void;
+  onRename: (id: string, name: string) => void;
+  onColorChange: (id: string, color: string) => void;
+  onRemove: (id: string) => void;
+  onAdd: () => void;
+  onReorder: (activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap={4}>
+      {draft.map((choice) => (
+        <SortableChoiceRow
+          key={choice.id}
+          choice={choice}
+          dragType="base-choice-flat"
+          autoFocus={choice.id === focusChoiceId}
+          onFocused={onFocused}
+          onRename={onRename}
+          onColorChange={onColorChange}
+          onRemove={onRemove}
+          onReorder={onReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      ))}
+
+      <UnstyledButton
+        onClick={() => onAdd()}
+        className={classes.addOptionBtn}
+      >
+        <IconPlus size={14} color="var(--mantine-color-dimmed)" />
+        <Text size="xs" c="dimmed">{t("Add option")}</Text>
+      </UnstyledButton>
+    </Stack>
+  );
+}
+
+function StatusChoiceList({
+  draft,
+  focusChoiceId,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onAdd,
+  onCategoryReorder,
+  dropdownPortalTarget,
+}: {
+  draft: Choice[];
+  focusChoiceId: string | null;
+  onFocused: () => void;
+  onRename: (id: string, name: string) => void;
+  onColorChange: (id: string, color: string) => void;
+  onRemove: (id: string) => void;
+  onAdd: (category: "todo" | "inProgress" | "complete") => void;
+  onCategoryReorder: (category: string, activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const grouped = useMemo(() => {
+    const groups: Record<string, Choice[]> = { todo: [], inProgress: [], complete: [] };
+    for (const choice of draft) {
+      const cat = choice.category ?? "todo";
+      (groups[cat] ?? groups.todo).push(choice);
+    }
+    return groups;
+  }, [draft]);
+
+  return (
+    <Stack gap="sm">
+      {STATUS_CATEGORIES.map(({ value: category, label }) => (
+        <CategorySection
+          key={category}
+          category={category as "todo" | "inProgress" | "complete"}
+          label={label}
+          choices={grouped[category] ?? []}
+          focusChoiceId={focusChoiceId}
+          onFocused={onFocused}
+          onRename={onRename}
+          onColorChange={onColorChange}
+          onRemove={onRemove}
+          onAdd={onAdd}
+          onReorder={onCategoryReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+function CategorySection({
+  category,
+  label,
+  choices,
+  focusChoiceId,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onAdd,
+  onReorder,
+  dropdownPortalTarget,
+}: {
+  category: "todo" | "inProgress" | "complete";
+  label: string;
+  choices: Choice[];
+  focusChoiceId: string | null;
+  onFocused: () => void;
+  onRename: (id: string, name: string) => void;
+  onColorChange: (id: string, color: string) => void;
+  onRemove: (id: string) => void;
+  onAdd: (category: "todo" | "inProgress" | "complete") => void;
+  onReorder: (
+    category: string,
+    activeId: string,
+    targetId: string,
+    edge: Edge,
+  ) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const { t } = useTranslation();
+
+  const handleRowReorder = useCallback(
+    (activeId: string, targetId: string, edge: Edge) => {
+      onReorder(category, activeId, targetId, edge);
+    },
+    [category, onReorder],
+  );
+
+  return (
+    <Stack gap={4}>
+      <Text size="xs" fw={600} c="dimmed">
+        {t(label)}
+      </Text>
+
+      {choices.map((choice) => (
+        <SortableChoiceRow
+          key={choice.id}
+          choice={choice}
+          // Per-category drag type prevents cross-category drops.
+          dragType={`base-choice-status:${category}`}
+          autoFocus={choice.id === focusChoiceId}
+          onFocused={onFocused}
+          onRename={onRename}
+          onColorChange={onColorChange}
+          onRemove={onRemove}
+          onReorder={handleRowReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      ))}
+
+      <UnstyledButton
+        onClick={() => onAdd(category)}
+        className={classes.addOptionBtn}
+      >
+        <IconPlus size={14} color="var(--mantine-color-dimmed)" />
+        <Text size="xs" c="dimmed">{t("Add option")}</Text>
+      </UnstyledButton>
+    </Stack>
+  );
+}
+
+function SortableChoiceRow({
+  choice,
+  dragType,
+  autoFocus,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onReorder,
+  dropdownPortalTarget,
+}: {
+  choice: Choice;
+  dragType: string;
+  autoFocus?: boolean;
+  onFocused?: () => void;
+  onRename: (id: string, name: string) => void;
+  onColorChange: (id: string, color: string) => void;
+  onRemove: (id: string) => void;
+  onReorder: (activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const rowRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLDivElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  // Stable ref so the DnD effect doesn't re-register on every parent render.
+  const onReorderRef = useRef(onReorder);
+  useLayoutEffect(() => {
+    onReorderRef.current = onReorder;
+  });
+
+  useEffect(() => {
+    if (autoFocus) {
+      inputRef.current?.focus();
+      onFocused?.();
+    }
+  }, [autoFocus, onFocused]);
+
+  useEffect(() => {
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+    return combine(
+      draggable({
+        element: row,
+        dragHandle: handle,
+        getInitialData: () => ({ type: dragType, choiceId: choice.id }),
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element: row,
+        canDrop: ({ source }) =>
+          source.data.type === dragType &&
+          source.data.choiceId !== choice.id,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { choiceId: choice.id },
+            { input, element, allowedEdges: ["top", "bottom"] },
+          ),
+        onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const edge = extractClosestEdge(self.data);
+          if (!edge) return;
+          onReorderRef.current(
+            source.data.choiceId as string,
+            choice.id,
+            edge,
+          );
+          triggerPostMoveFlash(row);
+          liveRegion.announce("Moved option");
+        },
+      }),
+    );
+  }, [choice.id, dragType]);
+
+  const hasError = !choice.name.trim();
+
+  return (
+    <Group
+      ref={rowRef}
+      gap={6}
+      wrap="nowrap"
+      align="center"
+      style={{
+        position: "relative",
+        opacity: isDragging ? 0.4 : 1,
+      }}
+      data-dragging={isDragging || undefined}
+    >
+      <div ref={handleRef} className={classes.dragHandle}>
+        <IconGripVertical size={14} style={{ opacity: 0.4 }} />
+      </div>
+      <ColorDot
+        color={choice.color}
+        onChange={(c) => onColorChange(choice.id, c)}
+        dropdownPortalTarget={dropdownPortalTarget}
+      />
+      <TextInput
+        ref={inputRef}
+        size="xs"
+        value={choice.name}
+        onChange={(e) => onRename(choice.id, e.currentTarget.value)}
+        style={{ flex: 1 }}
+        error={hasError}
+        styles={hasError ? { input: { borderColor: "var(--mantine-color-red-6)" } } : undefined}
+      />
+      <CloseButton size="sm" onClick={() => onRemove(choice.id)} />
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+    </Group>
+  );
+}
+
+function ColorDot({
+  color,
+  onChange,
+  dropdownPortalTarget,
+}: {
+  color: string;
+  onChange: (color: string) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const [opened, setOpened] = useState(false);
+  const colors = choiceColor(color);
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom"
+      shadow="sm"
+      withinPortal
+      portalProps={{ target: dropdownPortalTarget ?? undefined }}
+    >
+      <Popover.Target>
+        <UnstyledButton
+          onClick={() => setOpened((o) => !o)}
+          style={{
+            width: 20,
+            height: 20,
+            borderRadius: "50%",
+            backgroundColor: colors.backgroundColor as string,
+            border: `2px solid ${colors.color as string}`,
+            flexShrink: 0,
+          }}
+        />
+      </Popover.Target>
+      <Popover.Dropdown p={8}>
+        <SimpleGrid cols={5} spacing={6}>
+          {CHOICE_COLORS.map((c) => {
+            const dotColors = choiceColor(c);
+            return (
+              <UnstyledButton
+                key={c}
+                onClick={() => {
+                  onChange(c);
+                  setOpened(false);
+                }}
+                style={{
+                  width: 24,
+                  height: 24,
+                  borderRadius: "50%",
+                  backgroundColor: dotColors.backgroundColor as string,
+                  border: c === color
+                    ? `2px solid ${dotColors.color as string}`
+                    : "2px solid transparent",
+                }}
+              />
+            );
+          })}
+        </SimpleGrid>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/property/conversion-warning.ts b/apps/client/src/ee/base/components/property/conversion-warning.ts
new file mode 100644
index 000000000..034d30585
--- /dev/null
+++ b/apps/client/src/ee/base/components/property/conversion-warning.ts
@@ -0,0 +1,127 @@
+import type { BasePropertyType } from "@/ee/base/types/base.types";
+
+export const NON_USER_TARGET_TYPES = new Set<BasePropertyType>([
+  "createdAt",
+  "lastEditedAt",
+  "lastEditedBy",
+  "formula",
+]);
+
+type ConversionInfo = {
+  // i18n source key (translation files key them by their exact text).
+  message: string;
+  // True when cells can be cleared, discarded, truncated, or have their
+  // structured value flattened, i.e. the change is not safely reversible.
+  // Drives the destructive (red) "Apply" button in the confirm panel.
+  lossy: boolean;
+};
+
+// Buckets ordered most-specific first; default covers safe reinterpretations.
+function describeConversion(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): ConversionInfo {
+  if (to === "text" || to === "longText") {
+    if (from === "longText" && to === "text") {
+      return {
+        message:
+          "Cells longer than the Text limit will be truncated and the extra content permanently lost.",
+        lossy: true,
+      };
+    }
+    if (from === "select" || from === "status") {
+      return { message: "Cells will be replaced with the option name.", lossy: true };
+    }
+    if (from === "multiSelect") {
+      return {
+        message:
+          "Cells will be replaced with a comma-separated list of option names.",
+        lossy: true,
+      };
+    }
+    if (from === "person") {
+      return { message: "Cells will be replaced with the person's name.", lossy: true };
+    }
+    if (from === "file") {
+      return {
+        message:
+          "Cells will be replaced with a comma-separated list of file names.",
+        lossy: true,
+      };
+    }
+    if (from === "page") {
+      return { message: "Cells will be replaced with the page title.", lossy: true };
+    }
+  }
+
+  if (to === "select" && from === "multiSelect") {
+    return {
+      message:
+        "Only the first selected item per row will be kept; the rest will be discarded.",
+      lossy: true,
+    };
+  }
+
+  if (to === "multiSelect" && from === "select") {
+    return {
+      message: "Existing values become single-item lists. No data is lost.",
+      lossy: false,
+    };
+  }
+
+  if (to === "page") {
+    return {
+      message: "Cells that aren't already a page reference will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "number" && from !== "number") {
+    return {
+      message: "Cells that can't be parsed as a number will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "date" && from !== "date") {
+    return {
+      message: "Cells that can't be parsed as a date will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "checkbox" && from !== "checkbox") {
+    return {
+      message:
+        "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+      lossy: true,
+    };
+  }
+
+  if ((to === "url" || to === "email") && from !== to) {
+    return {
+      message:
+        to === "url"
+          ? "Cells that aren't a valid URL will be cleared."
+          : "Cells that aren't a valid email address will be cleared.",
+      lossy: true,
+    };
+  }
+
+  return { message: "Cells will be reinterpreted under the new type.", lossy: false };
+}
+
+export function conversionWarning(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): string {
+  return describeConversion(from, to).message;
+}
+
+// Whether the type change can lose data, used to make "Apply" destructive.
+export function isLossyConversion(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): boolean {
+  return describeConversion(from, to).lossy;
+}
diff --git a/apps/client/src/ee/base/components/property/create-property-popover.tsx b/apps/client/src/ee/base/components/property/create-property-popover.tsx
new file mode 100644
index 000000000..58d5815ff
--- /dev/null
+++ b/apps/client/src/ee/base/components/property/create-property-popover.tsx
@@ -0,0 +1,388 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import {
+  Popover,
+  TextInput,
+  Button,
+  Group,
+  Stack,
+  Divider,
+  UnstyledButton,
+  Text,
+  ScrollArea,
+} from "@mantine/core";
+import { IconPlus, IconChevronRight } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  BasePropertyType,
+  IBaseProperty,
+  TypeOptions,
+} from "@/ee/base/types/base.types";
+import { useCreatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { PropertyTypePicker, propertyTypes } from "./property-type-picker";
+import { PropertyOptions } from "./property-options";
+import {
+  getDescriptor,
+  defaultTypeOptionsFor,
+} from "@/ee/base/property-types/property-type.registry";
+import { FormulaEditor } from "../formula/formula-editor";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type CreatePropertyPopoverProps = {
+  pageId: string;
+  properties?: IBaseProperty[];
+  onPropertyCreated?: () => void;
+  /** Custom trigger; must return a ref-forwarding element for Popover.Target.
+   *  Defaults to the grid's + column button. */
+  renderTarget?: (open: () => void) => React.ReactElement;
+};
+
+type Panel = "typePicker" | "configure" | "confirmDiscard";
+
+const noop = () => {};
+
+export function CreatePropertyPopover({ pageId, properties, onPropertyCreated, renderTarget }: CreatePropertyPopoverProps) {
+  const { t } = useTranslation();
+  const [opened, setOpened] = useState(false);
+  const [panel, setPanel] = useState<Panel>("typePicker");
+  const [selectedType, setSelectedType] = useState<BasePropertyType | null>(null);
+  const [name, setName] = useState("");
+  const [typeOptions, setTypeOptions] = useState<Record<string, unknown>>({});
+  // Portal target for nested Select dropdowns to avoid triggering closeOnClickOutside.
+  const [dropdownNode, setDropdownNode] = useState<HTMLDivElement | null>(null);
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  const createPropertyMutation = useCreatePropertyMutation();
+
+  const selectedTypeDef = useMemo(
+    () => propertyTypes.find((pt) => pt.type === selectedType),
+    [selectedType],
+  );
+  const selectedTypeLabel = selectedTypeDef ? t(selectedTypeDef.labelKey) : "";
+  const selectedTypeIcon = selectedTypeDef?.icon;
+
+  const hasContent = useMemo(() => {
+    return name.trim().length > 0 || Object.keys(typeOptions).length > 0;
+  }, [name, typeOptions]);
+
+  const nameTaken = useMemo(() => {
+    const trimmed = name.trim().toLowerCase();
+    if (!trimmed) return false;
+    return (properties ?? []).some(
+      (p) => p.name.trim().toLowerCase() === trimmed,
+    );
+  }, [name, properties]);
+
+  // Fall back to the type label when Name is blank, suffixing a counter if taken.
+  const fallbackName = useMemo(() => {
+    const base = selectedTypeLabel || "Property";
+    const existing = new Set(
+      (properties ?? []).map((p) => p.name.trim().toLowerCase()),
+    );
+    if (!existing.has(base.toLowerCase())) return base;
+    for (let i = 1; i < 1000; i++) {
+      const candidate = `${base} ${i}`;
+      if (!existing.has(candidate.toLowerCase())) return candidate;
+    }
+    return `${base} ${Date.now()}`;
+  }, [selectedTypeLabel, properties]);
+
+  const resetState = useCallback(() => {
+    setPanel("typePicker");
+    setSelectedType(null);
+    setName("");
+    setTypeOptions({});
+  }, []);
+
+  const handleOpen = useCallback(() => {
+    resetState();
+    setOpened(true);
+  }, [resetState]);
+
+  const handleClose = useCallback(() => {
+    // Don't reset state here: resetting mid-close flashes the type picker.
+    // handleOpen resets on the next open instead.
+    setOpened(false);
+  }, []);
+
+  const attemptClose = useCallback(() => {
+    if (panel === "configure" && hasContent) {
+      setPanel("confirmDiscard");
+    } else {
+      handleClose();
+    }
+  }, [panel, hasContent, handleClose]);
+
+  const handleConfirmDiscard = useCallback(() => {
+    handleClose();
+  }, [handleClose]);
+
+  const handleCancelDiscard = useCallback(() => {
+    setPanel("configure");
+  }, []);
+
+  const handleTypeSelect = useCallback((type: BasePropertyType) => {
+    setSelectedType(type);
+    setTypeOptions(defaultTypeOptionsFor(type));
+    setPanel("configure");
+  }, []);
+
+  useEffect(() => {
+    if (panel === "configure") {
+      setTimeout(() => nameInputRef.current?.focus(), 0);
+    }
+  }, [panel]);
+
+  const handleCreate = useCallback(() => {
+    if (!selectedType || nameTaken) return;
+    const finalName = name.trim() || fallbackName;
+    createPropertyMutation.mutate(
+      {
+        pageId,
+        name: finalName,
+        type: selectedType,
+        typeOptions: Object.keys(typeOptions).length > 0
+          ? typeOptions as TypeOptions
+          : undefined,
+      },
+      {
+        onSuccess: () => {
+          onPropertyCreated?.();
+        },
+      },
+    );
+    handleClose();
+  }, [selectedType, nameTaken, name, fallbackName, typeOptions, pageId, createPropertyMutation, handleClose, onPropertyCreated]);
+
+  const handleBackToTypePicker = useCallback(() => {
+    setPanel("typePicker");
+    setTypeOptions({});
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (panel === "confirmDiscard") {
+          handleCancelDiscard();
+        } else if (panel === "configure") {
+          handleBackToTypePicker();
+        } else {
+          handleClose();
+        }
+      }
+    },
+    [panel, handleBackToTypePicker, handleClose, handleCancelDiscard],
+  );
+
+  const handleNameKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleCreate();
+      }
+    },
+    [handleCreate],
+  );
+
+  const handleOptionsUpdate = useCallback(
+    (newTypeOptions: Record<string, unknown>) => {
+      setTypeOptions(newTypeOptions);
+    },
+    [],
+  );
+
+  const syntheticProperty: IBaseProperty = useMemo(() => ({
+    id: "",
+    pageId,
+    name: name || "",
+    type: selectedType ?? "text",
+    position: "",
+    typeOptions: typeOptions as TypeOptions,
+    isPrimary: false,
+    workspaceId: "",
+    createdAt: "",
+    updatedAt: "",
+  }), [pageId, name, selectedType, typeOptions]);
+
+  const TypeIcon = selectedTypeIcon;
+  const showOptions = !!selectedType && (getDescriptor(selectedType)?.hasOptions ?? false);
+
+  return (
+    <>
+      <Popover
+        opened={opened}
+        onChange={(o) => {
+          if (!o) attemptClose();
+        }}
+        position="bottom-start"
+        shadow="md"
+        closeOnClickOutside
+        closeOnEscape={false}
+        withinPortal
+      >
+        <Popover.Target>
+          {renderTarget ? (
+            renderTarget(handleOpen)
+          ) : (
+            <div
+              className={classes.addColumnButton}
+              onClick={handleOpen}
+              role="button"
+              tabIndex={0}
+            >
+              <IconPlus size={16} />
+            </div>
+          )}
+        </Popover.Target>
+        <Popover.Dropdown
+          ref={setDropdownNode}
+          p={0}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={handleKeyDown}
+          style={{
+            zIndex: 300,
+            width: selectedType === "formula" ? 460 : undefined,
+            minWidth: selectedType === "formula" ? undefined : 320,
+            maxWidth: "calc(100vw - 32px)",
+          }}
+        >
+          {panel === "typePicker" && (
+            <Stack gap={0} p={4}>
+              <ScrollArea.Autosize
+                mah="min(60vh, 400px)"
+                scrollbarSize={6}
+                offsetScrollbars
+              >
+                <PropertyTypePicker
+                  onSelect={handleTypeSelect}
+                  showSearch
+                />
+              </ScrollArea.Autosize>
+            </Stack>
+          )}
+          {panel === "configure" && selectedType === "formula" && (
+            <Stack gap="xs" p="sm">
+              <TextInput
+                ref={nameInputRef}
+                size="xs"
+                label={t("Name")}
+                placeholder={fallbackName}
+                value={name}
+                onChange={(e) => setName(e.currentTarget.value)}
+                error={nameTaken ? t("A property with this name already exists") : undefined}
+              />
+              <FormulaEditor
+                properties={properties ?? []}
+                editingPropertyId={null}
+                name={name.trim() || undefined}
+                onCancel={handleBackToTypePicker}
+                disabled={nameTaken}
+                onSave={(source, ast, resultType, dependencies) => {
+                  if (nameTaken) return;
+                  createPropertyMutation.mutate(
+                    {
+                      pageId,
+                      name: name.trim() || fallbackName,
+                      type: "formula",
+                      typeOptions: {
+                        source,
+                        ast,
+                        resultType,
+                        dependencies,
+                        astVersion: 1,
+                      } as TypeOptions,
+                    },
+                    { onSuccess: () => onPropertyCreated?.() },
+                  );
+                  handleClose();
+                }}
+              />
+            </Stack>
+          )}
+          {(panel === "configure" || panel === "confirmDiscard") && selectedType !== "formula" && (
+            <Stack gap={0} p="sm" style={panel === "confirmDiscard" ? { display: "none" } : undefined}>
+              <TextInput
+                ref={nameInputRef}
+                size="xs"
+                label={t("Name")}
+                placeholder={fallbackName}
+                value={name}
+                onChange={(e) => setName(e.currentTarget.value)}
+                onKeyDown={handleNameKeyDown}
+                error={nameTaken ? t("A property with this name already exists") : undefined}
+                mb="xs"
+              />
+              <UnstyledButton
+                onClick={handleBackToTypePicker}
+                py={6}
+                px={0}
+                mb={showOptions ? "xs" : 0}
+              >
+                <Group gap={8} wrap="nowrap">
+                  {TypeIcon && <TypeIcon size={14} />}
+                  <Text size="sm" style={{ flex: 1 }}>
+                    {selectedTypeLabel}
+                  </Text>
+                  <IconChevronRight size={14} />
+                </Group>
+              </UnstyledButton>
+
+              {showOptions && (
+                <>
+                  <Divider mb="xs" />
+                  <ScrollArea.Autosize mah={300} scrollbarSize={6} offsetScrollbars>
+                    <PropertyOptions
+                      property={syntheticProperty}
+                      onUpdate={handleOptionsUpdate}
+                      onClose={noop}
+                      onDirtyChange={noop}
+                      hideButtons
+                      dropdownPortalTarget={dropdownNode}
+                    />
+                  </ScrollArea.Autosize>
+                </>
+              )}
+
+              <Divider my="xs" />
+              <Group gap="xs" justify="flex-end">
+                <Button variant="default" size="xs" onClick={attemptClose}>
+                  {t("Cancel")}
+                </Button>
+                <Button size="xs" onClick={handleCreate} disabled={nameTaken}>
+                  {t("Create property")}
+                </Button>
+              </Group>
+            </Stack>
+          )}
+          {panel === "confirmDiscard" && (
+            <Stack gap="xs" p="sm">
+              <Text size="sm" fw={600}>
+                {t("Unsaved changes")}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t("You have unsaved changes. Do you want to discard them?")}
+              </Text>
+              <Group gap="xs" justify="flex-end">
+                <Button
+                  variant="default"
+                  size="xs"
+                  onClick={handleCancelDiscard}
+                >
+                  {t("Keep editing")}
+                </Button>
+                <Button
+                  color="red"
+                  size="xs"
+                  onClick={handleConfirmDiscard}
+                >
+                  {t("Discard")}
+                </Button>
+              </Group>
+            </Stack>
+          )}
+        </Popover.Dropdown>
+      </Popover>
+    </>
+  );
+}
diff --git a/apps/client/src/ee/base/components/property/default-value-picker.tsx b/apps/client/src/ee/base/components/property/default-value-picker.tsx
new file mode 100644
index 000000000..52a99cf32
--- /dev/null
+++ b/apps/client/src/ee/base/components/property/default-value-picker.tsx
@@ -0,0 +1,98 @@
+import { Group, MultiSelect, Select, Text } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+import { Choice } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useTranslation } from "react-i18next";
+import type { ComboboxItem } from "@mantine/core";
+
+type DefaultValuePickerProps = {
+  choices: Choice[];
+  value: string | string[] | null;
+  multiple?: boolean;
+  onChange: (value: string | string[] | null) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+export function DefaultValuePicker({
+  choices,
+  value,
+  multiple,
+  onChange,
+  dropdownPortalTarget,
+}: DefaultValuePickerProps) {
+  const { t } = useTranslation();
+  const data = choices.map((c) => ({ value: c.id, label: c.name }));
+  const comboboxProps = {
+    portalProps: { target: dropdownPortalTarget ?? undefined },
+  };
+
+  const renderOption = ({
+    option,
+    checked,
+  }: {
+    option: ComboboxItem;
+    checked?: boolean;
+  }) => {
+    const choice = choices.find((c) => c.id === option.value);
+    const colors = choice ? choiceColor(choice.color) : undefined;
+    return (
+      <Group gap={6} wrap="nowrap" justify="space-between" style={{ flex: 1 }}>
+        <Group gap={6} wrap="nowrap">
+          {colors && (
+            <span
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                backgroundColor: colors.backgroundColor as string,
+                border: `2px solid ${colors.color as string}`,
+                flexShrink: 0,
+              }}
+            />
+          )}
+          <Text size="xs">{option.label}</Text>
+        </Group>
+        {checked && (
+          <IconCheck size={14} color="var(--mantine-color-dimmed)" />
+        )}
+      </Group>
+    );
+  };
+
+  if (multiple) {
+    const selected = (
+      Array.isArray(value) ? value : value ? [value] : []
+    ).filter((id) => choices.some((c) => c.id === id));
+    return (
+      <MultiSelect
+        size="xs"
+        label={t("Default value")}
+        placeholder={selected.length ? undefined : t("None")}
+        data={data}
+        value={selected}
+        onChange={(vals) => onChange(vals.length ? vals : null)}
+        clearable
+        comboboxProps={comboboxProps}
+        renderOption={renderOption}
+      />
+    );
+  }
+
+  const single =
+    typeof value === "string" && choices.some((c) => c.id === value)
+      ? value
+      : null;
+  return (
+    <Select
+      size="xs"
+      label={t("Default value")}
+      placeholder={t("None")}
+      data={data}
+      value={single}
+      onChange={(val) => onChange(val)}
+      clearable
+      comboboxProps={comboboxProps}
+      renderOption={renderOption}
+    />
+  );
+}
diff --git a/apps/client/src/ee/base/components/property/property-menu.tsx b/apps/client/src/ee/base/components/property/property-menu.tsx
new file mode 100644
index 000000000..1dba1a722
--- /dev/null
+++ b/apps/client/src/ee/base/components/property/property-menu.tsx
@@ -0,0 +1,564 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import {
+  UnstyledButton,
+  TextInput,
+  Button,
+  Stack,
+  Text,
+  Group,
+  ActionIcon,
+  Divider,
+  ScrollArea,
+  Loader,
+} from "@mantine/core";
+import {
+  IconTrash,
+  IconPencil,
+  IconChevronRight,
+  IconSettings,
+  IconMathFunction,
+} from "@tabler/icons-react";
+import {
+  IBaseProperty,
+  BasePropertyType,
+} from "@/ee/base/types/base.types";
+import { useAtom } from "jotai";
+import { propertyMenuCloseRequestAtomFamily } from "@/ee/base/atoms/base-atoms";
+import {
+  useUpdatePropertyMutation,
+  useDeletePropertyMutation,
+} from "@/ee/base/queries/base-property-query";
+import { PropertyTypePicker, propertyTypes } from "./property-type-picker";
+import { PropertyOptions } from "./property-options";
+import {
+  conversionWarning,
+  isLossyConversion,
+  NON_USER_TARGET_TYPES,
+} from "./conversion-warning";
+import { useTranslation } from "react-i18next";
+import { isSystemPropertyType } from "@/ee/base/property-types/property-type.registry";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import classes from "@/ee/base/styles/property.module.css";
+
+type PropertyMenuContentProps = {
+  property: IBaseProperty;
+  opened: boolean;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  onEditFormula?: () => void;
+  pageId: string;
+};
+
+type MenuPanel =
+  | "main"
+  | "rename"
+  | "options"
+  | "changeType"
+  | "confirmTypeChange"
+  | "confirmDelete"
+  | "confirmDiscard";
+
+export function PropertyMenuContent({
+  property,
+  opened,
+  onClose,
+  onDirtyChange,
+  onEditFormula,
+  pageId,
+}: PropertyMenuContentProps) {
+  const { t } = useTranslation();
+  const [panel, setPanel] = useState<MenuPanel>("main");
+  const [renameValue, setRenameValue] = useState(property.name);
+  const renameInputRef = useRef<HTMLInputElement>(null);
+  const [optionsDirty, setOptionsDirty] = useState(false);
+  // Portal target for nested Select dropdowns to avoid triggering closeOnClickOutside.
+  const [optionsAnchor, setOptionsAnchor] = useState<HTMLDivElement | null>(null);
+  const [pendingTargetType, setPendingTargetType] = useState<BasePropertyType | null>(null);
+  const pendingActionRef = useRef<"back" | "close" | null>(null);
+  const sourcePanelRef = useRef<"rename" | "options" | null>(null);
+  const [closeRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number];
+  const closeRequestRef = useRef(closeRequest);
+
+  const renameDirty = renameValue !== property.name;
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+  const deletePropertyMutation = useDeletePropertyMutation();
+
+  useEffect(() => {
+    if (opened) {
+      setPanel("main");
+      setRenameValue(property.name);
+      setOptionsDirty(false);
+      setPendingTargetType(null);
+    }
+  }, [opened, property.name]);
+
+  useEffect(() => {
+    if (panel === "rename") {
+      setTimeout(() => renameInputRef.current?.select(), 0);
+    }
+  }, [panel]);
+
+  const handleOptionsDirtyChange = useCallback((dirty: boolean) => {
+    setOptionsDirty(dirty);
+  }, []);
+
+  useEffect(() => {
+    const dirty =
+      (panel === "rename" && renameDirty) ||
+      (panel === "options" && optionsDirty);
+    onDirtyChange?.(dirty);
+  }, [panel, renameDirty, optionsDirty, onDirtyChange]);
+
+  const commitRename = useCallback(() => {
+    const trimmed = renameValue.trim();
+    if (trimmed && trimmed !== property.name) {
+      updatePropertyMutation.mutate({
+        propertyId: property.id,
+        pageId: property.pageId,
+        name: trimmed,
+      });
+    }
+  }, [renameValue, property, updatePropertyMutation]);
+
+  const handleRenameAndClose = useCallback(() => {
+    commitRename();
+    onClose();
+  }, [commitRename, onClose]);
+
+  const requestClose = useCallback(() => {
+    if (panel === "rename" && renameDirty) {
+      sourcePanelRef.current = "rename";
+      pendingActionRef.current = "close";
+      setPanel("confirmDiscard");
+    } else if (panel === "options" && optionsDirty) {
+      sourcePanelRef.current = "options";
+      pendingActionRef.current = "close";
+      setPanel("confirmDiscard");
+    } else {
+      onClose();
+    }
+  }, [panel, renameDirty, optionsDirty, onClose]);
+
+  const handleRenameKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleRenameAndClose();
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        requestClose();
+      }
+    },
+    [handleRenameAndClose, requestClose],
+  );
+
+  const handleOptionsUpdate = useCallback(
+    (typeOptions: Record<string, unknown>) => {
+      updatePropertyMutation.mutate({
+        propertyId: property.id,
+        pageId: property.pageId,
+        typeOptions,
+      });
+      setOptionsDirty(false);
+    },
+    [property, updatePropertyMutation],
+  );
+
+  const handleTypeSelect = useCallback(
+    (type: BasePropertyType) => {
+      if (type === property.type) {
+        onClose();
+        return;
+      }
+      setPendingTargetType(type);
+      setPanel("confirmTypeChange");
+    },
+    [property.type, onClose],
+  );
+
+  const handleApplyTypeChange = useCallback(() => {
+    if (!pendingTargetType) return;
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+      type: pendingTargetType,
+      typeOptions: {},
+    });
+    onClose();
+  }, [
+    pendingTargetType,
+    property.id,
+    property.pageId,
+    updatePropertyMutation,
+    onClose,
+  ]);
+
+  const handleDelete = useCallback(() => {
+    deletePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+    });
+    onClose();
+  }, [property, deletePropertyMutation, onClose]);
+
+  const handleOptionsBack = useCallback(() => {
+    if (optionsDirty) {
+      sourcePanelRef.current = "options";
+      pendingActionRef.current = "back";
+      setPanel("confirmDiscard");
+    } else {
+      setPanel("main");
+    }
+  }, [optionsDirty]);
+
+  useEffect(() => {
+    if (closeRequest !== closeRequestRef.current) {
+      closeRequestRef.current = closeRequest;
+      if (opened) {
+        requestClose();
+      }
+    }
+  }, [closeRequest, opened, requestClose]);
+
+  const handleConfirmDiscard = useCallback(() => {
+    setOptionsDirty(false);
+    setRenameValue(property.name);
+    const action = pendingActionRef.current;
+    pendingActionRef.current = null;
+    sourcePanelRef.current = null;
+    if (action === "back") {
+      setPanel("main");
+    } else {
+      onClose();
+    }
+  }, [property.name, onClose]);
+
+  const handleCancelDiscard = useCallback(() => {
+    const source = sourcePanelRef.current ?? "options";
+    pendingActionRef.current = null;
+    sourcePanelRef.current = null;
+    setPanel(source);
+  }, []);
+
+  return (
+    <>
+      {panel === "main" && (
+        <MainPanel
+          property={property}
+          onRename={() => setPanel("rename")}
+          onChangeType={() => setPanel("changeType")}
+          onOptions={() => setPanel("options")}
+          onDelete={() => setPanel("confirmDelete")}
+          onEditFormula={onEditFormula}
+        />
+      )}
+      {panel === "rename" && (
+        <Stack gap="xs" p="sm">
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Rename property")}
+          </Text>
+          <TextInput
+            ref={renameInputRef}
+            size="xs"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.currentTarget.value)}
+            onKeyDown={handleRenameKeyDown}
+          />
+          <Divider />
+          <Group justify="flex-end" gap="xs">
+            <Button variant="default" size="xs" onClick={requestClose}>
+              {t("Cancel")}
+            </Button>
+            <Button
+              size="xs"
+              onClick={handleRenameAndClose}
+              disabled={!renameValue.trim() || renameValue.trim() === property.name}
+            >
+              {t("Save")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+      {panel === "changeType" && (
+        <Stack gap={0} p={4}>
+          <Group gap="xs" px="sm" py={6}>
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="xs"
+              onClick={() => setPanel("main")}
+            >
+              <IconChevronRight
+                size={14}
+                className={classes.chevronBack}
+              />
+            </ActionIcon>
+            <Text size="xs" fw={600} c="dimmed">
+              {t("Change type")}
+            </Text>
+          </Group>
+          <ScrollArea.Autosize mah={300} scrollbarSize={6} offsetScrollbars>
+            <PropertyTypePicker
+              onSelect={handleTypeSelect}
+              currentType={property.type}
+              excludeTypes={NON_USER_TARGET_TYPES}
+              showSearch
+            />
+          </ScrollArea.Autosize>
+        </Stack>
+      )}
+      {panel === "confirmTypeChange" && pendingTargetType && (
+        <Stack gap="xs" p="sm">
+          <Text size="sm" fw={600}>
+            {t("Change type to {{label}}?", {
+              label: t(
+                propertyTypes.find((pt) => pt.type === pendingTargetType)
+                  ?.labelKey ?? pendingTargetType,
+              ),
+            })}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {t(conversionWarning(property.type, pendingTargetType))}
+          </Text>
+          <Group gap="xs" justify="flex-end">
+            <Button
+              variant="default"
+              size="xs"
+              onClick={() => setPanel("main")}
+            >
+              {t("Cancel")}
+            </Button>
+            <Button
+              size="xs"
+              color={
+                isLossyConversion(property.type, pendingTargetType)
+                  ? "red"
+                  : undefined
+              }
+              onClick={handleApplyTypeChange}
+            >
+              {t("Apply")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+      {(panel === "options" || panel === "confirmDiscard") && (
+        <Stack
+          ref={setOptionsAnchor}
+          gap="xs"
+          p="sm"
+          style={panel === "confirmDiscard" ? { display: "none" } : undefined}
+        >
+          <Group gap="xs">
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="xs"
+              onClick={handleOptionsBack}
+            >
+              <IconChevronRight
+                size={14}
+                className={classes.chevronBack}
+              />
+            </ActionIcon>
+            <Text size="xs" fw={600} c="dimmed">
+              {t("Property options")}
+            </Text>
+          </Group>
+          <ScrollArea.Autosize mah={400} scrollbarSize={6} offsetScrollbars>
+            <PropertyOptions
+              property={property}
+              onUpdate={handleOptionsUpdate}
+              onClose={onClose}
+              onDirtyChange={handleOptionsDirtyChange}
+              dropdownPortalTarget={optionsAnchor}
+            />
+          </ScrollArea.Autosize>
+        </Stack>
+      )}
+      {panel === "confirmDelete" && (
+        <Stack gap="xs" p="sm">
+          <Text size="sm" fw={600}>
+            {t("Delete property")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {t("Are you sure you want to delete")} <b>{property.name}</b>?{" "}
+            {t("All data in this column will be lost.")}
+          </Text>
+          <Group gap="xs" justify="flex-end">
+            <Button
+              variant="default"
+              size="xs"
+              onClick={() => setPanel("main")}
+            >
+              {t("Cancel")}
+            </Button>
+            <Button
+              color="red"
+              size="xs"
+              onClick={handleDelete}
+            >
+              {t("Delete")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+      {panel === "confirmDiscard" && (
+        <Stack gap="xs" p="sm">
+          <Text size="sm" fw={600}>
+            {t("Unsaved changes")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {t("You have unsaved changes. Do you want to discard them?")}
+          </Text>
+          <Group gap="xs" justify="flex-end">
+            <Button
+              variant="default"
+              size="xs"
+              onClick={handleCancelDiscard}
+            >
+              {t("Keep editing")}
+            </Button>
+            <Button
+              color="red"
+              size="xs"
+              onClick={handleConfirmDiscard}
+            >
+              {t("Discard")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+    </>
+  );
+}
+
+PropertyMenuContent.displayName = "PropertyMenuContent";
+
+function MenuItem({
+  icon,
+  label,
+  rightIcon,
+  color,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  rightIcon?: React.ReactNode;
+  color?: string;
+  onClick: () => void;
+}) {
+  return (
+    <UnstyledButton
+      className={cellClasses.menuItem}
+      onClick={onClick}
+      style={{ color: color ? `var(--mantine-color-${color}-6)` : undefined }}
+    >
+      <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
+        {icon}
+        <Text size="sm">{label}</Text>
+      </Group>
+      {rightIcon}
+    </UnstyledButton>
+  );
+}
+
+function MainPanel({
+  property,
+  onRename,
+  onChangeType,
+  onOptions,
+  onDelete,
+  onEditFormula,
+}: {
+  property: IBaseProperty;
+  onRename: () => void;
+  onChangeType: () => void;
+  onOptions: () => void;
+  onDelete: () => void;
+  onEditFormula?: () => void;
+}) {
+  const { t } = useTranslation();
+
+  const isSystem = isSystemPropertyType(property.type);
+  const isPending = property.pendingType != null;
+
+  const hasOptions =
+    !isSystem &&
+    !isPending &&
+    (property.type === "select" ||
+      property.type === "multiSelect" ||
+      property.type === "status" ||
+      property.type === "number" ||
+      property.type === "date" ||
+      property.type === "text" ||
+      property.type === "longText" ||
+      property.type === "checkbox" ||
+      property.type === "url" ||
+      property.type === "email");
+
+  const typeDef = propertyTypes.find((pt) => pt.type === property.type);
+  const TypeIcon = typeDef?.icon;
+
+  return (
+    <Stack gap={0} p={4}>
+      <MenuItem
+        icon={<IconPencil size={14} />}
+        label={t("Rename")}
+        onClick={onRename}
+      />
+      {property.type === "formula" && !isPending && onEditFormula && (
+        <MenuItem
+          icon={<IconMathFunction size={14} />}
+          label={t("Edit formula")}
+          onClick={onEditFormula}
+        />
+      )}
+      {isPending && (
+        <Group gap={8} px="sm" py={8}>
+          <Loader size={12} />
+          <Text size="sm" c="dimmed">
+            {t("Converting…")}
+          </Text>
+        </Group>
+      )}
+      {!isSystem && !isPending && !property.isPrimary && (
+        <UnstyledButton
+          className={cellClasses.menuItem}
+          onClick={onChangeType}
+        >
+          <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
+            {TypeIcon ? <TypeIcon size={14} /> : null}
+            <Text size="sm">
+              {typeDef ? t(typeDef.labelKey) : property.type}
+            </Text>
+          </Group>
+          <IconChevronRight size={14} />
+        </UnstyledButton>
+      )}
+      {hasOptions && (
+        <MenuItem
+          icon={<IconSettings size={14} />}
+          label={t("Options")}
+          rightIcon={<IconChevronRight size={14} />}
+          onClick={onOptions}
+        />
+      )}
+      {!property.isPrimary && !isPending && (
+        <>
+          <Divider my={4} />
+          <MenuItem
+            icon={<IconTrash size={14} />}
+            label={t("Delete property")}
+            color="red"
+            onClick={onDelete}
+          />
+        </>
+      )}
+    </Stack>
+  );
+}
+
diff --git a/apps/client/src/ee/base/components/property/property-options.tsx b/apps/client/src/ee/base/components/property/property-options.tsx
new file mode 100644
index 000000000..8d7837205
--- /dev/null
+++ b/apps/client/src/ee/base/components/property/property-options.tsx
@@ -0,0 +1,596 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Stack,
+  NumberInput,
+  Select,
+  Switch,
+  Text,
+  Button,
+  Group,
+  Divider,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  NumberTypeOptions,
+  DateTypeOptions,
+  PersonTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { ChoiceEditor } from "./choice-editor";
+import { FilterPersonInput } from "@/ee/base/components/views/filter-person-input";
+import {
+  CURRENCIES,
+  DEFAULT_CURRENCY_CODE,
+} from "@/ee/base/constants/currencies";
+import { useTranslation } from "react-i18next";
+
+type PropertyOptionsProps = {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  hideButtons?: boolean;
+  // Portal target for nested Select dropdowns; must be inside the host popover, outside ScrollArea.
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+export function PropertyOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: PropertyOptionsProps) {
+  const { t } = useTranslation();
+
+  switch (property.type) {
+    case "select":
+    case "multiSelect":
+      return (
+        <SelectOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "status":
+      return (
+        <StatusOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "number":
+      return (
+        <NumberOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "date":
+      return (
+        <DateOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "person":
+      return (
+        <PersonOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "text":
+    case "longText":
+    case "url":
+    case "email":
+      return (
+        <TextDefaultOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+        />
+      );
+    case "checkbox":
+      return (
+        <CheckboxOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+        />
+      );
+    default:
+      return (
+        <Text size="xs" c="dimmed">
+          {t("No options for this property type")}
+        </Text>
+      );
+  }
+}
+
+type OptionEditorProps = {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  hideButtons?: boolean;
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+const EMPTY_OPTIONS: Record<string, unknown> = {};
+
+function optionsEqual(
+  a: Record<string, unknown>,
+  b: Record<string, unknown>,
+): boolean {
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) {
+    const av = a[key];
+    const bv = b[key];
+    if (Array.isArray(av) && Array.isArray(bv)) {
+      if (av.length !== bv.length || av.some((v, i) => v !== bv[i])) {
+        return false;
+      }
+    } else if (av !== bv) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// Draft hook for non-choice option editors: live in create flow, staged in edit menu.
+function useEditableTypeOptions(
+  initialRaw: Record<string, unknown> | undefined,
+  {
+    onUpdate,
+    onClose,
+    onDirtyChange,
+    hideButtons,
+  }: {
+    onUpdate: (opts: Record<string, unknown>) => void;
+    onClose: () => void;
+    onDirtyChange?: (dirty: boolean) => void;
+    hideButtons?: boolean;
+  },
+) {
+  const initial = initialRaw ?? EMPTY_OPTIONS;
+  const [draft, setDraft] = useState<Record<string, unknown>>(initial);
+
+  useEffect(() => {
+    if (!hideButtons) setDraft(initial);
+  }, [initial, hideButtons]);
+
+  const onUpdateRef = useRef(onUpdate);
+  onUpdateRef.current = onUpdate;
+  useEffect(() => {
+    if (hideButtons) onUpdateRef.current(draft);
+  }, [hideButtons, draft]);
+
+  const isDirty = useMemo(() => !optionsEqual(draft, initial), [draft, initial]);
+  useEffect(() => {
+    onDirtyChange?.(isDirty);
+  }, [isDirty, onDirtyChange]);
+
+  const update = useCallback(
+    (patch: Record<string, unknown>) =>
+      setDraft((prev) => ({ ...prev, ...patch })),
+    [],
+  );
+  const save = useCallback(() => {
+    onUpdate(draft);
+    onClose();
+  }, [draft, onUpdate, onClose]);
+  const cancel = useCallback(() => {
+    setDraft(initial);
+    onDirtyChange?.(false);
+    onClose();
+  }, [initial, onClose, onDirtyChange]);
+
+  return { draft, update, isDirty, save, cancel };
+}
+
+function OptionsFooter({
+  isDirty,
+  onCancel,
+  onSave,
+}: {
+  isDirty: boolean;
+  onCancel: () => void;
+  onSave: () => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Divider />
+      <Group justify="flex-end" gap="xs">
+        <Button variant="default" size="xs" onClick={onCancel}>
+          {t("Cancel")}
+        </Button>
+        <Button size="xs" onClick={onSave} disabled={!isDirty}>
+          {t("Save")}
+        </Button>
+      </Group>
+    </>
+  );
+}
+
+function SelectOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const options = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = useMemo(() => options?.choices ?? [], [options?.choices]);
+
+  const handleSave = useCallback(
+    (newChoices: Choice[], defaultValue: string | string[] | null) => {
+      onUpdate({
+        ...property.typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+        defaultValue,
+      });
+    },
+    [property.typeOptions, onUpdate],
+  );
+
+  return (
+    <ChoiceEditor
+      initialChoices={choices}
+      onSave={handleSave}
+      onClose={onClose}
+      onDirtyChange={onDirtyChange}
+      showCategories={false}
+      hideButtons={hideButtons}
+      initialDefaultValue={options?.defaultValue ?? null}
+      multiDefault={property.type === "multiSelect"}
+      dropdownPortalTarget={dropdownPortalTarget}
+    />
+  );
+}
+
+function StatusOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const options = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = useMemo(() => options?.choices ?? [], [options?.choices]);
+
+  const handleSave = useCallback(
+    (newChoices: Choice[], defaultValue: string | string[] | null) => {
+      onUpdate({
+        ...property.typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+        defaultValue,
+      });
+    },
+    [property.typeOptions, onUpdate],
+  );
+
+  return (
+    <ChoiceEditor
+      initialChoices={choices}
+      onSave={handleSave}
+      onClose={onClose}
+      onDirtyChange={onDirtyChange}
+      showCategories
+      hideButtons={hideButtons}
+      initialDefaultValue={options?.defaultValue ?? null}
+      dropdownPortalTarget={dropdownPortalTarget}
+    />
+  );
+}
+
+function NumberOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+  const options = draft as NumberTypeOptions;
+
+  return (
+    <Stack gap="xs">
+      <Select
+        size="xs"
+        label={t("Format")}
+        allowDeselect={false}
+        checkIconPosition="right"
+        comboboxProps={{ portalProps: { target: dropdownPortalTarget ?? undefined } }}
+        data={[
+          { value: "plain", label: t("Number") },
+          { value: "separators", label: t("Number with separators") },
+          { value: "currency", label: t("Currency") },
+          { value: "percent", label: t("Percent") },
+          { value: "progress", label: t("Progress") },
+        ]}
+        value={options.format ?? "plain"}
+        onChange={(val) => update({ format: val ?? "plain" })}
+      />
+      {options.format === "currency" && (
+        <Select
+          size="xs"
+          label={t("Currency")}
+          allowDeselect={false}
+          checkIconPosition="right"
+          comboboxProps={{ portalProps: { target: dropdownPortalTarget ?? undefined } }}
+          data={CURRENCIES.map((c) => ({
+            value: c.code,
+            label: `${c.name} (${c.code})`,
+          }))}
+          value={options.currencyCode ?? DEFAULT_CURRENCY_CODE}
+          onChange={(val) =>
+            update({ currencyCode: val ?? DEFAULT_CURRENCY_CODE })
+          }
+        />
+      )}
+      <NumberInput
+        size="xs"
+        label={t("Decimal places")}
+        min={0}
+        max={8}
+        value={options.precision ?? 0}
+        onChange={(val) => update({ precision: val })}
+      />
+      <NumberInput
+        size="xs"
+        label={t("Default value")}
+        placeholder={t("None")}
+        value={typeof options.defaultValue === "number" ? options.defaultValue : ""}
+        onChange={(val) =>
+          update({ defaultValue: typeof val === "number" ? val : undefined })
+        }
+      />
+      {!hideButtons && (
+        <OptionsFooter isDirty={isDirty} onCancel={cancel} onSave={save} />
+      )}
+    </Stack>
+  );
+}
+
+function DateOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+  const options = draft as DateTypeOptions;
+
+  return (
+    <Stack gap="xs">
+      <Switch
+        size="xs"
+        label={t("Include time")}
+        checked={options.includeTime ?? false}
+        onChange={(e) => update({ includeTime: e.currentTarget.checked })}
+      />
+      {options.includeTime && (
+        <Select
+          size="xs"
+          label={t("Time format")}
+          allowDeselect={false}
+          checkIconPosition="right"
+          comboboxProps={{ portalProps: { target: dropdownPortalTarget ?? undefined } }}
+          data={[
+            { value: "12h", label: "12-hour" },
+            { value: "24h", label: "24-hour" },
+          ]}
+          value={options.timeFormat ?? "12h"}
+          onChange={(val) => update({ timeFormat: val ?? "12h" })}
+        />
+      )}
+      {!hideButtons && (
+        <OptionsFooter isDirty={isDirty} onCancel={cancel} onSave={save} />
+      )}
+    </Stack>
+  );
+}
+
+function PersonOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+  const options = draft as PersonTypeOptions;
+  const allowMultiple = options.allowMultiple === true;
+
+  const handleAllowMultipleChange = (toMulti: boolean) => {
+    const dv = options.defaultValue;
+    const ids = Array.isArray(dv) ? dv : dv ? [dv] : [];
+    update({
+      allowMultiple: toMulti,
+      defaultValue: toMulti ? (ids.length ? ids : undefined) : ids[0],
+    });
+  };
+
+  return (
+    <Stack gap="xs">
+      <Switch
+        size="xs"
+        label={t("Allow multiple people")}
+        checked={allowMultiple}
+        onChange={(e) => handleAllowMultipleChange(e.currentTarget.checked)}
+      />
+      <FilterPersonInput
+        pageId={property.pageId}
+        multiple={allowMultiple}
+        value={options.defaultValue ?? null}
+        onChange={(value) =>
+          update({ defaultValue: value as string | string[] | undefined })
+        }
+        placeholder={t("None")}
+        label={t("Default value")}
+        w="100%"
+        portalTarget={dropdownPortalTarget}
+      />
+      {!hideButtons && (
+        <OptionsFooter isDirty={isDirty} onCancel={cancel} onSave={save} />
+      )}
+    </Stack>
+  );
+}
+
+const EMAIL_FORMAT = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function TextDefaultOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+  const defaultValue =
+    typeof draft.defaultValue === "string" ? draft.defaultValue : "";
+  const defaultValueError =
+    defaultValue && property.type === "url" && !URL.canParse(defaultValue)
+      ? t("Please enter a valid url")
+      : defaultValue &&
+          property.type === "email" &&
+          !EMAIL_FORMAT.test(defaultValue)
+        ? t("Please enter a valid email")
+        : null;
+
+  return (
+    <Stack gap="xs">
+      {property.type === "longText" ? (
+        <Textarea
+          size="xs"
+          label={t("Default value")}
+          placeholder={t("None")}
+          autosize
+          minRows={2}
+          maxRows={6}
+          value={defaultValue}
+          onChange={(e) =>
+            update({
+              defaultValue: e.currentTarget.value.trim()
+                ? e.currentTarget.value
+                : undefined,
+            })
+          }
+        />
+      ) : (
+        <TextInput
+          size="xs"
+          label={t("Default value")}
+          placeholder={
+            property.type === "url"
+              ? "https://example.com"
+              : property.type === "email"
+                ? "name@example.com"
+                : t("None")
+          }
+          value={defaultValue}
+          error={defaultValueError}
+          onChange={(e) =>
+            update({
+              defaultValue: e.currentTarget.value.trim()
+                ? e.currentTarget.value
+                : undefined,
+            })
+          }
+        />
+      )}
+      {!hideButtons && (
+        <OptionsFooter
+          isDirty={isDirty && !defaultValueError}
+          onCancel={cancel}
+          onSave={save}
+        />
+      )}
+    </Stack>
+  );
+}
+
+function CheckboxOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+
+  return (
+    <Stack gap="xs">
+      <Switch
+        size="xs"
+        label={t("Checked by default")}
+        checked={draft.defaultValue === true}
+        onChange={(e) =>
+          update({ defaultValue: e.currentTarget.checked ? true : undefined })
+        }
+      />
+      {!hideButtons && (
+        <OptionsFooter isDirty={isDirty} onCancel={cancel} onSave={save} />
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/client/src/ee/base/components/property/property-type-picker.tsx b/apps/client/src/ee/base/components/property/property-type-picker.tsx
new file mode 100644
index 000000000..cb2e650da
--- /dev/null
+++ b/apps/client/src/ee/base/components/property/property-type-picker.tsx
@@ -0,0 +1,81 @@
+import { UnstyledButton, Group, Text, TextInput } from "@mantine/core";
+import { IconCheck, IconSearch } from "@tabler/icons-react";
+import { BasePropertyType } from "@/ee/base/types/base.types";
+import {
+  PROPERTY_PICKER_ORDER,
+  getDescriptor,
+} from "@/ee/base/property-types/property-type.registry";
+import { useTranslation } from "react-i18next";
+import { useState, useRef, useEffect } from "react";
+import classes from "@/ee/base/styles/cells.module.css";
+
+const propertyTypes = PROPERTY_PICKER_ORDER.map((type) => {
+  const d = getDescriptor(type)!;
+  return { type, icon: d.icon, labelKey: d.labelKey };
+});
+
+type PropertyTypePickerProps = {
+  onSelect: (type: BasePropertyType) => void;
+  currentType?: BasePropertyType;
+  excludeTypes?: Set<BasePropertyType>;
+  showSearch?: boolean;
+};
+
+export function PropertyTypePicker({
+  onSelect,
+  currentType,
+  excludeTypes,
+  showSearch,
+}: PropertyTypePickerProps) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (showSearch) {
+      setTimeout(() => searchRef.current?.focus(), 0);
+    }
+  }, [showSearch]);
+
+  const types = propertyTypes
+    .filter(({ type }) => !excludeTypes?.has(type))
+    .filter(({ labelKey }) =>
+      !search || t(labelKey).toLowerCase().includes(search.toLowerCase())
+    );
+
+  return (
+    <>
+      {showSearch && (
+        <TextInput
+          ref={searchRef}
+          size="xs"
+          placeholder={t("Find a property type")}
+          leftSection={<IconSearch size={14} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+          mx="sm"
+          mt="sm"
+          mb={4}
+        />
+      )}
+      {types.map(({ type, icon: Icon, labelKey }) => (
+        <UnstyledButton
+          key={type}
+          className={classes.menuItem}
+          onClick={() => onSelect(type)}
+          style={{
+            fontWeight: type === currentType ? 600 : 400,
+          }}
+        >
+          <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
+            <Icon size={14} />
+            <Text size="sm">{t(labelKey)}</Text>
+          </Group>
+          {type === currentType && <IconCheck size={14} />}
+        </UnstyledButton>
+      ))}
+    </>
+  );
+}
+
+export { propertyTypes };
diff --git a/apps/client/src/ee/base/components/row-detail-modal/fields/detail-field.tsx b/apps/client/src/ee/base/components/row-detail-modal/fields/detail-field.tsx
new file mode 100644
index 000000000..c3e8d8e60
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/fields/detail-field.tsx
@@ -0,0 +1,142 @@
+import { forwardRef } from "react";
+import { Checkbox } from "@mantine/core";
+import { IconLock } from "@tabler/icons-react";
+import clsx from "clsx";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { FieldText } from "./field-text";
+import { FieldLongText } from "./field-long-text";
+import { FieldNumber } from "./field-number";
+import { FieldDate } from "./field-date";
+import { FieldChoice } from "./field-choice";
+import { FieldCellAdapter } from "./field-cell-adapter";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+export type FieldProps = {
+  property: IBaseProperty;
+  value: unknown;
+  rowId: string;
+  readOnly: boolean;
+  onChange: (value: unknown) => void;
+};
+
+type FieldShellProps = {
+  /** Visual + cursor treatment: text caret, pointer (opens a picker), or none. */
+  cursor?: "text" | "pointer" | "default";
+  /** Popover open — keeps the focus ring while focus is in the portal. */
+  active?: boolean;
+  locked?: boolean;
+  alignTop?: boolean;
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+// forwardRef is load-bearing: Popover.Target anchors its dropdown through a
+// ref injected into this element; without it the picker renders at (0,0).
+export const FieldShell = forwardRef<HTMLDivElement, FieldShellProps>(
+  function FieldShell(
+    { cursor = "default", active, locked, alignTop, className, children, ...rest },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          classes.fieldShell,
+          cursor === "text" && classes.fieldShellText,
+          cursor === "pointer" && classes.fieldShellPointer,
+          active && classes.fieldShellActive,
+          locked && classes.fieldShellLocked,
+          alignTop && classes.fieldShellTop,
+          className,
+        )}
+        {...rest}
+      >
+        {locked && <IconLock size={13} className={classes.fieldLockIcon} />}
+        {children}
+      </div>
+    );
+  },
+);
+
+function FieldCheckbox({ value, readOnly, onChange }: FieldProps) {
+  const checked = value === true;
+  return (
+    <FieldShell>
+      <Checkbox
+        size="sm"
+        checked={checked}
+        disabled={readOnly}
+        onChange={() => onChange(!checked)}
+      />
+    </FieldShell>
+  );
+}
+
+function FieldReadonlyCell({ property, value, rowId }: FieldProps) {
+  const CellComponent = getDescriptor(property.type)?.cellComponent;
+  return (
+    <FieldShell locked>
+      <div className={classes.fieldCellDisplay}>
+        {CellComponent && (
+          <CellComponent
+            value={value}
+            property={property}
+            rowId={rowId}
+            isEditing={false}
+            readOnly
+            onCommit={() => {}}
+            onValueChange={() => {}}
+            onCancel={() => {}}
+          />
+        )}
+      </div>
+    </FieldShell>
+  );
+}
+
+type DetailFieldProps = {
+  property: IBaseProperty;
+  row: IBaseRow;
+  readOnly: boolean;
+  onUpdate: (propertyId: string, value: unknown) => void;
+};
+
+export function DetailField({ property, row, readOnly, onUpdate }: DetailFieldProps) {
+  const descriptor = getDescriptor(property.type);
+  const value = descriptor?.systemAccessor
+    ? descriptor.systemAccessor(row)
+    : (row.cells ?? {})[property.id];
+  const fieldProps: FieldProps = {
+    property,
+    value,
+    rowId: row.id,
+    readOnly,
+    onChange: (next: unknown) => onUpdate(property.id, next),
+  };
+
+  switch (property.type) {
+    case "text":
+    case "url":
+    case "email":
+      return <FieldText {...fieldProps} />;
+    case "longText":
+      return <FieldLongText {...fieldProps} />;
+    case "number":
+      return <FieldNumber {...fieldProps} />;
+    case "checkbox":
+      return <FieldCheckbox {...fieldProps} />;
+    case "date":
+      return <FieldDate {...fieldProps} />;
+    case "select":
+    case "status":
+    case "multiSelect":
+      return <FieldChoice {...fieldProps} />;
+    case "person":
+    case "file":
+    case "page":
+      return <FieldCellAdapter {...fieldProps} />;
+    default:
+      // createdAt, lastEditedAt, lastEditedBy, formula and future types.
+      return <FieldReadonlyCell {...fieldProps} />;
+  }
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/fields/field-cell-adapter.tsx b/apps/client/src/ee/base/components/row-detail-modal/fields/field-cell-adapter.tsx
new file mode 100644
index 000000000..d5b12e886
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/fields/field-cell-adapter.tsx
@@ -0,0 +1,80 @@
+import { useCallback, useRef, useState } from "react";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+/** Person, file and page editors are popover pickers owned by their cell
+ *  components; the shell supplies modal styling and click-anywhere
+ *  activation while the cell keeps its picker behavior. */
+export function FieldCellAdapter({
+  property,
+  value,
+  rowId,
+  readOnly,
+  onChange,
+}: FieldProps) {
+  const [editing, setEditing] = useState(false);
+  // Whether the picker was open when the current gesture's mousedown fired.
+  const editingAtMouseDownRef = useRef(false);
+  const CellComponent = getDescriptor(property.type)?.cellComponent;
+
+  // Files stay openable read-only (download-only popover), matching the grid.
+  const canActivate = !readOnly || property.type === "file";
+
+  // Activate on click, not mousedown: opening on mousedown mounts the cell's
+  // picker mid-dispatch, and its document-level outside-mousedown listener
+  // then catches the same still-bubbling event and instantly closes it. By
+  // click time the mousedown has fully finished. The ref keeps toggle-close
+  // working: when the gesture started with the picker open, the picker's own
+  // outside-close already handled it and we must not reopen.
+  const handleMouseDown = useCallback(() => {
+    editingAtMouseDownRef.current = editing;
+  }, [editing]);
+
+  const handleClick = useCallback(() => {
+    if (!canActivate || editingAtMouseDownRef.current || editing) return;
+    setEditing(true);
+  }, [canActivate, editing]);
+
+  const handleCommit = useCallback(
+    (next: unknown) => {
+      setEditing(false);
+      onChange(next);
+    },
+    [onChange],
+  );
+  const handleCancel = useCallback(() => setEditing(false), []);
+
+  if (!CellComponent) return <FieldShell />;
+
+  return (
+    <FieldShell
+      cursor={canActivate ? "pointer" : "default"}
+      active={editing}
+      onMouseDown={handleMouseDown}
+      onClick={handleClick}
+      role={canActivate ? "button" : undefined}
+      tabIndex={canActivate ? 0 : undefined}
+      aria-label={property.name}
+      onKeyDown={(e) => {
+        if (canActivate && !editing && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          setEditing(true);
+        }
+      }}
+    >
+      <div className={classes.fieldCellDisplay}>
+        <CellComponent
+          value={value}
+          property={property}
+          rowId={rowId}
+          isEditing={editing}
+          readOnly={readOnly}
+          onCommit={handleCommit}
+          onValueChange={onChange}
+          onCancel={handleCancel}
+        />
+      </div>
+    </FieldShell>
+  );
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/fields/field-choice.tsx b/apps/client/src/ee/base/components/row-detail-modal/fields/field-choice.tsx
new file mode 100644
index 000000000..d82112b27
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/fields/field-choice.tsx
@@ -0,0 +1,103 @@
+import { useCallback, useState } from "react";
+import { Popover } from "@mantine/core";
+import { Choice, SelectTypeOptions } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoicePicker } from "@/ee/base/components/cells/choice-picker";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+export function FieldChoice({ property, value, readOnly, onChange }: FieldProps) {
+  const [opened, setOpened] = useState(false);
+  const multiple = property.type === "multiSelect";
+  const choices =
+    (property.typeOptions as SelectTypeOptions | undefined)?.choices ?? [];
+
+  const selectedIds = multiple
+    ? Array.isArray(value)
+      ? (value as string[])
+      : []
+    : typeof value === "string"
+      ? [value]
+      : [];
+  const selectedChoices = choices.filter((c) => selectedIds.includes(c.id));
+
+  const handleToggle = useCallback(
+    (choice: Choice) => {
+      if (multiple) {
+        const next = selectedIds.includes(choice.id)
+          ? selectedIds.filter((id) => id !== choice.id)
+          : [...selectedIds, choice.id];
+        onChange(next.length > 0 ? next : null);
+      } else {
+        onChange(choice.id === selectedIds[0] ? null : choice.id);
+        setOpened(false);
+      }
+    },
+    [multiple, selectedIds, onChange],
+  );
+
+  const chips = selectedChoices.map((choice) => (
+    <span
+      key={choice.id}
+      className={cellClasses.badge}
+      style={choiceColor(choice.color)}
+    >
+      {choice.name}
+    </span>
+  ));
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <div className={classes.fieldChips}>{chips}</div>
+      </FieldShell>
+    );
+  }
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom-start"
+      width="target"
+      shadow="md"
+      withinPortal
+      trapFocus
+      closeOnClickOutside
+      closeOnEscape={false}
+    >
+      <Popover.Target>
+        <FieldShell
+          cursor="pointer"
+          active={opened}
+          role="button"
+          tabIndex={0}
+          aria-label={property.name}
+          onClick={() => setOpened((o) => !o)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setOpened((o) => !o);
+            }
+          }}
+        >
+          <div className={classes.fieldChips}>{chips}</div>
+        </FieldShell>
+      </Popover.Target>
+      <Popover.Dropdown p={4}>
+        {opened && (
+          <ChoicePicker
+            property={property}
+            selectedIds={selectedIds}
+            multiple={multiple}
+            grouped={property.type === "status"}
+            allowCreate={property.type !== "status"}
+            onToggle={handleToggle}
+            onEscape={() => setOpened(false)}
+          />
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/fields/field-date.tsx b/apps/client/src/ee/base/components/row-detail-modal/fields/field-date.tsx
new file mode 100644
index 000000000..7c3f0f0d5
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/fields/field-date.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { Popover } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import { DateTypeOptions } from "@/ee/base/types/base.types";
+import { formatDateDisplay } from "@/ee/base/components/cells/cell-date";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+function toISODateString(dateStr: string | null): string | null {
+  if (!dateStr) return null;
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return null;
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function FieldDate({ property, value, readOnly, onChange }: FieldProps) {
+  const [opened, setOpened] = useState(false);
+  const typeOptions = property.typeOptions as DateTypeOptions | undefined;
+  const dateStr = typeof value === "string" ? value : null;
+  const display = formatDateDisplay(dateStr, typeOptions);
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <span className={classes.fieldValueText}>{display}</span>
+      </FieldShell>
+    );
+  }
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom-start"
+      width="auto"
+      shadow="md"
+      withinPortal
+      trapFocus
+      closeOnClickOutside
+      closeOnEscape
+    >
+      <Popover.Target>
+        <FieldShell
+          cursor="pointer"
+          active={opened}
+          role="button"
+          tabIndex={0}
+          aria-label={property.name}
+          onClick={() => setOpened((o) => !o)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setOpened((o) => !o);
+            }
+          }}
+        >
+          <span className={classes.fieldValueText}>{display}</span>
+        </FieldShell>
+      </Popover.Target>
+      <Popover.Dropdown p="xs">
+        <DatePicker
+          value={toISODateString(dateStr)}
+          onChange={(selected) => {
+            onChange(selected ? new Date(selected).toISOString() : null);
+            setOpened(false);
+          }}
+          size="sm"
+        />
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/fields/field-long-text.tsx b/apps/client/src/ee/base/components/row-detail-modal/fields/field-long-text.tsx
new file mode 100644
index 000000000..89501ed65
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/fields/field-long-text.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from "react";
+import { Textarea } from "@mantine/core";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+const toText = (value: unknown) => (typeof value === "string" ? value : "");
+const normalize = (s: string) => {
+  const trimmed = s.trim();
+  return trimmed.length ? trimmed : null;
+};
+
+export function FieldLongText({ property, value, readOnly, onChange }: FieldProps) {
+  const text = toText(value);
+  const [draft, setDraft] = useState(text);
+  const [focused, setFocused] = useState(false);
+  // Esc sets this; blur() then runs commit synchronously with the stale
+  // draft, so the revert must be decided here, not via setDraft.
+  const cancelRef = useRef(false);
+
+  useEffect(() => {
+    if (!focused) setDraft(text);
+  }, [text, focused]);
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelRef.current) {
+      cancelRef.current = false;
+      setDraft(text);
+      return;
+    }
+    if (normalize(draft) !== normalize(text)) onChange(normalize(draft));
+  };
+
+  if (readOnly) {
+    return (
+      <FieldShell alignTop>
+        <span className={classes.fieldValueTextMultiline}>{text}</span>
+      </FieldShell>
+    );
+  }
+
+  return (
+    <FieldShell cursor="text" alignTop>
+      <Textarea
+        autosize
+        minRows={3}
+        maxRows={16}
+        maxLength={25000}
+        variant="unstyled"
+        className={classes.fieldTextarea}
+        classNames={{ input: classes.fieldTextareaInput }}
+        value={draft}
+        onFocus={() => setFocused(true)}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            cancelRef.current = true;
+            e.currentTarget.blur();
+          } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            e.preventDefault();
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={property.name}
+      />
+    </FieldShell>
+  );
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/fields/field-number.tsx b/apps/client/src/ee/base/components/row-detail-modal/fields/field-number.tsx
new file mode 100644
index 000000000..73922acdc
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/fields/field-number.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from "react";
+import { NumberTypeOptions } from "@/ee/base/types/base.types";
+import { formatNumber } from "@/ee/base/components/cells/cell-number";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+const toDraft = (value: unknown) =>
+  typeof value === "number" ? String(value) : "";
+
+const parse = (draft: string) => {
+  const parsed = draft === "" ? null : Number(draft);
+  return parsed != null && isNaN(parsed) ? null : parsed;
+};
+
+export function FieldNumber({ property, value, readOnly, onChange }: FieldProps) {
+  const typeOptions = property.typeOptions as NumberTypeOptions | undefined;
+  const numValue = typeof value === "number" ? value : null;
+  const [draft, setDraft] = useState(toDraft(value));
+  const [focused, setFocused] = useState(false);
+  // Esc sets this; blur() then runs commit synchronously with the stale
+  // draft, so the revert must be decided here, not via setDraft.
+  const cancelRef = useRef(false);
+
+  useEffect(() => {
+    if (!focused) setDraft(toDraft(value));
+  }, [value, focused]);
+
+  const formatted = formatNumber(numValue, typeOptions);
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <span className={classes.fieldValueText}>{formatted}</span>
+      </FieldShell>
+    );
+  }
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelRef.current) {
+      cancelRef.current = false;
+      setDraft(toDraft(value));
+      return;
+    }
+    if (parse(draft) !== numValue) onChange(parse(draft));
+  };
+
+  return (
+    <FieldShell cursor="text">
+      <input
+        type="text"
+        inputMode="decimal"
+        className={classes.fieldInput}
+        value={focused ? draft : formatted}
+        onFocus={() => {
+          setDraft(toDraft(value));
+          setFocused(true);
+        }}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (v === "" || v === "-" || /^-?\d*\.?\d*$/.test(v)) {
+            setDraft(v);
+          }
+        }}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            e.currentTarget.blur();
+          } else if (e.key === "Escape") {
+            cancelRef.current = true;
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={property.name}
+      />
+    </FieldShell>
+  );
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/fields/field-text.tsx b/apps/client/src/ee/base/components/row-detail-modal/fields/field-text.tsx
new file mode 100644
index 000000000..e211563a9
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/fields/field-text.tsx
@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from "react";
+import { IconExternalLink, IconMail } from "@tabler/icons-react";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+const toText = (value: unknown) => (typeof value === "string" ? value : "");
+
+export function FieldText({ property, value, readOnly, onChange }: FieldProps) {
+  const text = toText(value);
+  const [draft, setDraft] = useState(text);
+  const [focused, setFocused] = useState(false);
+  // Esc sets this; blur() then runs commit synchronously with the stale
+  // draft, so the revert must be decided here, not via setDraft.
+  const cancelRef = useRef(false);
+
+  // Track remote/navigation updates while not typing.
+  useEffect(() => {
+    if (!focused) setDraft(text);
+  }, [text, focused]);
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelRef.current) {
+      cancelRef.current = false;
+      setDraft(text);
+      return;
+    }
+    if (draft !== text) onChange(draft);
+  };
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <span className={classes.fieldValueText}>{text}</span>
+      </FieldShell>
+    );
+  }
+
+  const linkHref =
+    !focused && text
+      ? property.type === "email"
+        ? text.includes("@")
+          ? `mailto:${text}`
+          : null
+        : property.type === "url" && /^https?:\/\//i.test(text)
+          ? text
+          : null
+      : null;
+
+  return (
+    <FieldShell cursor="text">
+      <input
+        type="text"
+        className={classes.fieldInput}
+        value={draft}
+        maxLength={1000}
+        onFocus={() => setFocused(true)}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            e.currentTarget.blur();
+          } else if (e.key === "Escape") {
+            cancelRef.current = true;
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={property.name}
+      />
+      {linkHref && (
+        <a
+          href={linkHref}
+          target={property.type === "url" ? "_blank" : undefined}
+          rel="noopener noreferrer"
+          className={classes.fieldTrailing}
+          onMouseDown={(e) => e.stopPropagation()}
+          aria-label={property.type === "email" ? `Email ${text}` : `Open ${text}`}
+        >
+          {property.type === "email" ? (
+            <IconMail size={14} />
+          ) : (
+            <IconExternalLink size={14} />
+          )}
+        </a>
+      )}
+    </FieldShell>
+  );
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/property-row.tsx b/apps/client/src/ee/base/components/row-detail-modal/property-row.tsx
new file mode 100644
index 000000000..d2a24bde5
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/property-row.tsx
@@ -0,0 +1,100 @@
+import { useCallback } from "react";
+import clsx from "clsx";
+import { Popover } from "@mantine/core";
+import { IconChevronDown } from "@tabler/icons-react";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { PropertyMenuContent } from "@/ee/base/components/property/property-menu";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { DetailField } from "./fields/detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+type PropertyRowProps = {
+  property: IBaseProperty;
+  row: IBaseRow;
+  pageId: string;
+  menuOpened: boolean;
+  onMenuOpenChange: (opened: boolean) => void;
+  onMenuDirtyChange: (dirty: boolean) => void;
+  onUpdate: (propertyId: string, value: unknown) => void;
+};
+
+export function PropertyRow({
+  property,
+  row,
+  pageId,
+  menuOpened,
+  onMenuOpenChange,
+  onMenuDirtyChange,
+  onUpdate,
+}: PropertyRowProps) {
+  const canEdit = useBaseEditable();
+
+  const handleLabelClick = useCallback(() => {
+    onMenuOpenChange(!menuOpened);
+  }, [menuOpened, onMenuOpenChange]);
+
+  const handleMenuClose = useCallback(() => {
+    onMenuOpenChange(false);
+  }, [onMenuOpenChange]);
+
+  const Icon = getDescriptor(property.type)?.icon;
+
+  const label = (
+    <>
+      {Icon && <Icon size={15} className={classes.propertyLabelIcon} />}
+      <span className={classes.propertyLabelText}>{property.name}</span>
+    </>
+  );
+
+  return (
+    <div className={classes.propertyRow}>
+      {canEdit ? (
+        <Popover
+          opened={menuOpened}
+          position="bottom-start"
+          shadow="md"
+          width={260}
+          withinPortal
+          closeOnClickOutside={false}
+          closeOnEscape={false}
+        >
+          <Popover.Target>
+            <button
+              type="button"
+              className={clsx(classes.propertyLabel, classes.propertyLabelButton, {
+                [classes.propertyLabelActive]: menuOpened,
+              })}
+              onClick={handleLabelClick}
+              data-property-menu-target
+            >
+              {label}
+              <IconChevronDown size={13} className={classes.propertyLabelChevron} />
+            </button>
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <PropertyMenuContent
+              property={property}
+              opened={menuOpened}
+              onClose={handleMenuClose}
+              onDirtyChange={onMenuDirtyChange}
+              pageId={pageId}
+            />
+          </Popover.Dropdown>
+        </Popover>
+      ) : (
+        <div className={classes.propertyLabel}>{label}</div>
+      )}
+      <DetailField
+        property={property}
+        row={row}
+        readOnly={!canEdit}
+        onUpdate={onUpdate}
+      />
+    </div>
+  );
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/row-detail-modal.tsx b/apps/client/src/ee/base/components/row-detail-modal/row-detail-modal.tsx
new file mode 100644
index 000000000..97491e135
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/row-detail-modal.tsx
@@ -0,0 +1,433 @@
+import { Menu, Modal, Skeleton, Text, Tooltip } from "@mantine/core";
+import { useWindowEvent } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import { modals } from "@mantine/modals";
+import {
+  IconChevronDown,
+  IconChevronUp,
+  IconDotsVertical,
+  IconLink,
+  IconLock,
+  IconPlus,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { IBase, IBaseRow } from "@/ee/base/types/base.types";
+import {
+  useBaseRowQuery,
+  useDeleteRowMutation,
+  useUpdateRowMutation,
+} from "@/ee/base/queries/base-row-query";
+import { propertyMenuCloseRequestAtomFamily } from "@/ee/base/atoms/base-atoms";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { useClipboard } from "@/hooks/use-clipboard";
+import { CreatePropertyPopover } from "@/ee/base/components/property/create-property-popover";
+import { RowDetailTitle } from "./row-detail-title";
+import { PropertyRow } from "./property-row";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+type RowDetailModalProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  openRowId: string | null;
+  onClose: () => void;
+  onNavigate: (rowId: string) => void;
+};
+
+export function RowDetailModal({
+  base,
+  rows,
+  openRowId,
+  onClose,
+  onNavigate,
+}: RowDetailModalProps) {
+  const { t } = useTranslation();
+  const canEdit = useBaseEditable();
+  const updateRowMutation = useUpdateRowMutation();
+  const deleteRowMutation = useDeleteRowMutation();
+  const clipboard = useClipboard({ timeout: 500 });
+
+  const rowIndex = useMemo(
+    () => (openRowId ? rows.findIndex((r) => r.id === openRowId) : -1),
+    [openRowId, rows],
+  );
+  const rowFromList = rowIndex >= 0 ? rows[rowIndex] : undefined;
+  // Deep links (?row=) can target rows outside the loaded pages or filtered
+  // out of the active view — fetch by id instead of closing. Close only
+  // when the server confirms the row is gone.
+  const rowQuery = useBaseRowQuery(base.id, openRowId ?? undefined, {
+    enabled: !!openRowId && !rowFromList,
+  });
+  const row = rowFromList ?? rowQuery.data;
+  const primaryProperty = useMemo(
+    () => base.properties.find((p) => p.isPrimary),
+    [base.properties],
+  );
+
+  const rowMissing = !!openRowId && !rowFromList && rowQuery.isError;
+  useEffect(() => {
+    if (rowMissing) onClose();
+  }, [rowMissing, onClose]);
+
+  const isSaving = updateRowMutation.isPending;
+  const opened = !!openRowId;
+
+  // One field menu open at a time, mirroring the grid header's semantics.
+  // The shared closeRequest atom asks an open dirty PropertyMenuContent to
+  // run its discard-confirm flow instead of being torn down mid-edit.
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+  const menuDirtyRef = useRef(false);
+  const [closeRequest, setCloseRequest] = useAtom(
+    propertyMenuCloseRequestAtomFamily(base.id),
+  ) as unknown as [number, (val: number) => void];
+
+  useEffect(() => {
+    setOpenMenuId(null);
+    menuDirtyRef.current = false;
+  }, [openRowId]);
+
+  const handleMenuDirtyChange = useCallback((dirty: boolean) => {
+    menuDirtyRef.current = dirty;
+  }, []);
+
+  const requestMenuClose = useCallback(() => {
+    if (menuDirtyRef.current) {
+      setCloseRequest(closeRequest + 1);
+    } else {
+      setOpenMenuId(null);
+    }
+  }, [closeRequest, setCloseRequest]);
+
+  const handleMenuOpenChange = useCallback(
+    (propertyId: string, nextOpened: boolean) => {
+      if (!nextOpened) {
+        setOpenMenuId(null);
+        menuDirtyRef.current = false;
+        return;
+      }
+      if (openMenuId && openMenuId !== propertyId && menuDirtyRef.current) {
+        setCloseRequest(closeRequest + 1);
+        return;
+      }
+      setOpenMenuId(propertyId);
+    },
+    [openMenuId, closeRequest, setCloseRequest],
+  );
+
+  useEffect(() => {
+    if (!openMenuId) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest("[data-position]")) return;
+      if (target.closest("[data-property-menu-target]")) return;
+      requestMenuClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [openMenuId, requestMenuClose]);
+
+  const hasPrev = rowIndex > 0;
+  const hasNext = rowIndex >= 0 && rowIndex < rows.length - 1;
+  const navigate = useCallback(
+    (delta: number) => {
+      if (rowIndex === -1) return;
+      const next = rows[rowIndex + delta];
+      if (next) onNavigate(next.id);
+    },
+    [rows, rowIndex, onNavigate],
+  );
+
+  const handleCopyLink = useCallback(() => {
+    clipboard.copy(window.location.href);
+    notifications.show({ message: t("Link copied") });
+  }, [clipboard, t]);
+
+  const handleDeleteRecord = useCallback(() => {
+    if (!row) return;
+    const rowId = row.id;
+    modals.openConfirmModal({
+      title: t("Delete record?"),
+      centered: true,
+      children: <Text size="sm">{t("This action cannot be undone.")}</Text>,
+      labels: { confirm: t("Delete"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        deleteRowMutation.mutate({ rowId, pageId: base.id });
+        onClose();
+      },
+    });
+  }, [row, base.id, deleteRowMutation, onClose, t]);
+
+  // Mantine's closeOnEscape runs a capture-phase window listener that fires
+  // before inner popovers and inputs see the key, so we manage Esc ourselves
+  // and yield to: nested dialogs (delete confirm), open popovers
+  // ([data-position]) and editable elements. Arrows step records under the
+  // same yield rules. Mantine puts role="dialog" and our content class on
+  // the same element, which distinguishes this modal from nested ones.
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const isEscape = event.key === "Escape";
+      const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown";
+      if ((!isEscape && !isArrow) || event.isComposing || !opened) return;
+      const target = event.target as HTMLElement | null;
+      if (target) {
+        const dialog = target.closest('[role="dialog"]');
+        if (dialog && !dialog.classList.contains(classes.modalContent)) {
+          return;
+        }
+        if (
+          target.closest("[data-position]") ||
+          target.matches("input, textarea, select, [contenteditable='true']")
+        ) {
+          return;
+        }
+      }
+      if (isEscape) {
+        if (openMenuId) {
+          requestMenuClose();
+          return;
+        }
+        onClose();
+        return;
+      }
+      if (openMenuId) return;
+      event.preventDefault();
+      navigate(event.key === "ArrowUp" ? -1 : 1);
+    },
+    [opened, openMenuId, requestMenuClose, onClose, navigate],
+  );
+  useWindowEvent("keydown", handleKeyDown, { capture: true });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="lg"
+      centered
+      withCloseButton={false}
+      closeOnEscape={false}
+      closeOnClickOutside={!openMenuId}
+      padding={0}
+      radius="md"
+      title={null}
+      classNames={{ content: classes.modalContent }}
+    >
+      {row ? (
+        <>
+          <div className={classes.topBar}>
+            <div className={classes.topBarGroup}>
+              <Tooltip label={t("Previous record")} openDelay={400}>
+                <button
+                  type="button"
+                  className={classes.iconButton}
+                  onClick={() => navigate(-1)}
+                  disabled={!hasPrev}
+                  aria-label={t("Previous record")}
+                >
+                  <IconChevronUp size={16} />
+                </button>
+              </Tooltip>
+              <Tooltip label={t("Next record")} openDelay={400}>
+                <button
+                  type="button"
+                  className={classes.iconButton}
+                  onClick={() => navigate(1)}
+                  disabled={!hasNext}
+                  aria-label={t("Next record")}
+                >
+                  <IconChevronDown size={16} />
+                </button>
+              </Tooltip>
+            </div>
+            <div className={classes.topBarGroup}>
+              <Menu position="bottom-end" shadow="md" withinPortal>
+                <Menu.Target>
+                  <button
+                    type="button"
+                    className={classes.iconButton}
+                    aria-label={t("Record actions")}
+                  >
+                    <IconDotsVertical size={16} />
+                  </button>
+                </Menu.Target>
+                <Menu.Dropdown>
+                  <Menu.Item
+                    leftSection={<IconLink size={14} />}
+                    onClick={handleCopyLink}
+                  >
+                    {t("Copy link")}
+                  </Menu.Item>
+                  {canEdit && (
+                    <>
+                      <Menu.Divider />
+                      <Menu.Item
+                        color="red"
+                        leftSection={<IconTrash size={14} />}
+                        onClick={handleDeleteRecord}
+                      >
+                        {t("Delete record")}
+                      </Menu.Item>
+                    </>
+                  )}
+                </Menu.Dropdown>
+              </Menu>
+              <button
+                type="button"
+                className={classes.iconButton}
+                onClick={onClose}
+                aria-label={t("Close")}
+              >
+                <IconX size={16} />
+              </button>
+            </div>
+          </div>
+
+          <RowDetailTitle
+            row={row}
+            primaryProperty={primaryProperty}
+            canEdit={canEdit}
+            onCommit={(value) => {
+              if (!primaryProperty) return;
+              updateRowMutation.mutate({
+                rowId: row.id,
+                pageId: base.id,
+                cells: { [primaryProperty.id]: value },
+              });
+            }}
+          />
+
+          <div className={classes.body}>
+            <div className={classes.propertyList}>
+              {base.properties
+                .filter((p) => !p.isPrimary)
+                .map((property) => (
+                  <PropertyRow
+                    key={property.id}
+                    property={property}
+                    row={row}
+                    pageId={base.id}
+                    menuOpened={openMenuId === property.id}
+                    onMenuOpenChange={(nextOpened) =>
+                      handleMenuOpenChange(property.id, nextOpened)
+                    }
+                    onMenuDirtyChange={handleMenuDirtyChange}
+                    onUpdate={(propertyId, value) => {
+                      updateRowMutation.mutate({
+                        rowId: row.id,
+                        pageId: base.id,
+                        cells: { [propertyId]: value },
+                      });
+                    }}
+                  />
+                ))}
+            </div>
+            {canEdit && (
+              <CreatePropertyPopover
+                pageId={base.id}
+                properties={base.properties}
+                renderTarget={(open) => (
+                  <button
+                    type="button"
+                    className={classes.addPropertyRow}
+                    onClick={open}
+                  >
+                    <span className={classes.addPropertyLabel}>
+                      <IconPlus size={15} />
+                      {t("Add property")}
+                    </span>
+                  </button>
+                )}
+              />
+            )}
+          </div>
+
+          <footer className={classes.footer}>
+            <div className={classes.footerStatus}>
+              {!canEdit ? (
+                <span className={classes.lockedHint}>
+                  <IconLock size={12} />
+                  {t("Read-only")}
+                </span>
+              ) : isSaving ? (
+                <>
+                  <span className={classes.savingDot} />
+                  <span>{t("Saving…")}</span>
+                </>
+              ) : null}
+            </div>
+            <div className={classes.kbdHint}>
+              {rowIndex >= 0 && rows.length > 1 && (
+                <>
+                  <kbd className={classes.kbd}>↑</kbd>
+                  <kbd className={classes.kbd}>↓</kbd>
+                  <span>{t("to navigate")}</span>
+                  <span className={classes.kbdSeparator} />
+                </>
+              )}
+              <kbd className={classes.kbd}>Esc</kbd>
+              <span>{t("to close")}</span>
+            </div>
+          </footer>
+        </>
+      ) : (
+        <RowDetailSkeleton base={base} />
+      )}
+    </Modal>
+  );
+}
+
+/** Hydration state for deep-linked rows: the schema is already loaded, so
+ *  render the real labels and shimmer only the unknown values. Matching the
+ *  final layout avoids a size jump when the row arrives. */
+function RowDetailSkeleton({ base }: { base: IBase }) {
+  return (
+    <>
+      <div className={classes.topBar}>
+        <div className={classes.topBarGroup}>
+          <Skeleton height={28} width={28} radius={6} />
+          <Skeleton height={28} width={28} radius={6} />
+        </div>
+        <div className={classes.topBarGroup}>
+          <Skeleton height={28} width={28} radius={6} />
+          <Skeleton height={28} width={28} radius={6} />
+        </div>
+      </div>
+      <header className={classes.header}>
+        <Skeleton height={30} width="45%" radius={8} />
+        <div className={classes.metaRow}>
+          <Skeleton height={12} width={150} radius={4} />
+        </div>
+      </header>
+      <div className={classes.body}>
+        <div className={classes.propertyList}>
+          {base.properties
+            .filter((p) => !p.isPrimary)
+            .map((property) => {
+              const Icon = getDescriptor(property.type)?.icon;
+              return (
+                <div key={property.id} className={classes.propertyRow}>
+                  <div className={classes.propertyLabel}>
+                    {Icon && (
+                      <Icon size={15} className={classes.propertyLabelIcon} />
+                    )}
+                    <span className={classes.propertyLabelText}>
+                      {property.name}
+                    </span>
+                  </div>
+                  <Skeleton
+                    height={property.type === "longText" ? 82 : 34}
+                    radius={7}
+                    style={{ flex: 1 }}
+                  />
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/client/src/ee/base/components/row-detail-modal/row-detail-title.tsx b/apps/client/src/ee/base/components/row-detail-modal/row-detail-title.tsx
new file mode 100644
index 000000000..a716922b0
--- /dev/null
+++ b/apps/client/src/ee/base/components/row-detail-modal/row-detail-title.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { timeAgo } from "@/lib/time.ts";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+type RowDetailTitleProps = {
+  row: IBaseRow;
+  primaryProperty: IBaseProperty | undefined;
+  canEdit: boolean;
+  onCommit: (value: string) => void;
+};
+
+export function RowDetailTitle({
+  row,
+  primaryProperty,
+  canEdit,
+  onCommit,
+}: RowDetailTitleProps) {
+  const { t } = useTranslation();
+  const initial = primaryProperty
+    ? (((row.cells ?? {})[primaryProperty.id] as string) ?? "")
+    : "";
+  const [value, setValue] = useState(initial);
+
+  // Re-sync when the row changes underneath us (navigation or remote edit).
+  useEffect(() => {
+    setValue(initial);
+  }, [initial]);
+
+  const updatedAgo = row.updatedAt ? timeAgo(new Date(row.updatedAt)) : "";
+
+  return (
+    <header className={classes.header}>
+      {canEdit ? (
+        <input
+          type="text"
+          className={classes.titleInput}
+          placeholder={t("Untitled")}
+          aria-label={primaryProperty?.name ?? t("Untitled")}
+          value={value}
+          maxLength={1000}
+          onChange={(e) => setValue(e.currentTarget.value)}
+          onBlur={() => {
+            if (value !== initial) onCommit(value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              (e.currentTarget as HTMLInputElement).blur();
+            }
+          }}
+        />
+      ) : (
+        <h1 className={classes.titleStatic}>{value || t("Untitled")}</h1>
+      )}
+      {updatedAgo && (
+        <div className={classes.metaRow}>
+          <span>{t("Updated {{when}}", { when: updatedAgo })}</span>
+        </div>
+      )}
+    </header>
+  );
+}
diff --git a/apps/client/src/ee/base/components/views/filter-date-input.tsx b/apps/client/src/ee/base/components/views/filter-date-input.tsx
new file mode 100644
index 000000000..8e9ce3e01
--- /dev/null
+++ b/apps/client/src/ee/base/components/views/filter-date-input.tsx
@@ -0,0 +1,201 @@
+import { useState } from "react";
+import {
+  Popover,
+  InputBase,
+  Input,
+  SegmentedControl,
+} from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import { IconChevronDown } from "@tabler/icons-react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import type {
+  DateFilterValue,
+  FilterOperator,
+} from "@/ee/base/types/base.types";
+import {
+  DATE_ANCHOR_PRESETS,
+  DATE_RANGE_PRESETS,
+  ANCHOR_VALUES,
+  RANGE_VALUES,
+} from "./relative-date-presets";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type FilterDateInputProps = {
+  op: FilterOperator;
+  value: unknown;
+  onChange: (value: unknown) => void;
+};
+
+type Mode = "exact" | "relative";
+
+const ANCHOR_LABEL: Record<string, string> = Object.fromEntries(
+  DATE_ANCHOR_PRESETS.map((p) => [p.value, p.labelKey]),
+);
+const RANGE_LABEL: Record<string, string> = Object.fromEntries(
+  DATE_RANGE_PRESETS.map((p) => [p.value, p.labelKey]),
+);
+
+function asDateValue(value: unknown): DateFilterValue | null {
+  if (!value || typeof value !== "object") return null;
+  return value as DateFilterValue;
+}
+
+function toISODate(d: string | null): string | null {
+  if (!d) return null;
+  // Already a date-only ISO string (Mantine v8 emits these) — pass through to
+  // avoid a UTC-parse + local-getter round-trip that shifts the day west of UTC.
+  if (/^\d{4}-\d{2}-\d{2}$/.test(d)) return d;
+  const date = new Date(d);
+  if (isNaN(date.getTime())) return null;
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+export function FilterDateInput({ op, value, onChange }: FilterDateInputProps) {
+  const { t } = useTranslation();
+  const current = asDateValue(value);
+
+  const [opened, setOpened] = useState(false);
+  const [localMode, setLocalMode] = useState<Mode>("exact");
+
+  const exactDate = current?.mode === "exact" ? toISODate(current.date) : null;
+  const anchor =
+    current?.mode === "relative" && ANCHOR_VALUES.has(current.preset)
+      ? current.preset
+      : null;
+  const range =
+    current?.mode === "range" && RANGE_VALUES.has(current.preset)
+      ? current.preset
+      : null;
+
+  const valueMode: Mode | null =
+    current?.mode === "relative"
+      ? "relative"
+      : current?.mode === "exact"
+        ? "exact"
+        : null;
+  const mode: Mode = valueMode ?? localMode;
+
+  let triggerLabel: string | null = null;
+  if (op === "isWithin") triggerLabel = range ? t(RANGE_LABEL[range]) : null;
+  else if (exactDate) triggerLabel = exactDate;
+  else if (anchor) triggerLabel = t(ANCHOR_LABEL[anchor]);
+
+  // Consume Escape locally so the outer filter popover (bubble handler) keeps
+  // the panel open and only this picker closes.
+  const handleEscape = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpened(false);
+    }
+  };
+
+  const presetRow = (
+    selected: boolean,
+    label: string,
+    onClick: () => void,
+    key: string,
+  ) => (
+    <div
+      key={key}
+      className={clsx(
+        cellClasses.selectOption,
+        selected && cellClasses.selectOptionActive,
+      )}
+      onClick={onClick}
+    >
+      <span className={cellClasses.personOptionName}>{label}</span>
+    </div>
+  );
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom-start"
+      width={op === "isWithin" ? 200 : "auto"}
+      withinPortal={false}
+      closeOnEscape={false}
+      closeOnClickOutside
+    >
+      <Popover.Target>
+        <InputBase
+          component="button"
+          type="button"
+          size="xs"
+          pointer
+          w={170}
+          rightSection={<IconChevronDown size={14} />}
+          rightSectionPointerEvents="none"
+          onClick={() => setOpened((o) => !o)}
+          onKeyDown={handleEscape}
+        >
+          {triggerLabel ?? <Input.Placeholder>{t("Select")}</Input.Placeholder>}
+        </InputBase>
+      </Popover.Target>
+      <Popover.Dropdown p={op === "isWithin" ? 0 : "xs"} onKeyDown={handleEscape}>
+        {op === "isWithin" ? (
+          <div className={cellClasses.selectDropdown}>
+            {DATE_RANGE_PRESETS.map((p) =>
+              presetRow(
+                range === p.value,
+                t(p.labelKey),
+                () => {
+                  onChange({ mode: "range", preset: p.value });
+                  setOpened(false);
+                },
+                p.value,
+              ),
+            )}
+          </div>
+        ) : (
+          <>
+            <SegmentedControl
+              fullWidth
+              size="xs"
+              mb="xs"
+              value={mode}
+              onChange={(m) => {
+                setLocalMode(m as Mode);
+                onChange(undefined);
+              }}
+              data={[
+                { value: "exact", label: t("Date") },
+                { value: "relative", label: t("Relative") },
+              ]}
+            />
+            {mode === "exact" ? (
+              <DatePicker
+                value={exactDate}
+                onChange={(d) => {
+                  const iso = toISODate(d);
+                  onChange(iso ? { mode: "exact", date: iso } : undefined);
+                  setOpened(false);
+                }}
+                size="sm"
+              />
+            ) : (
+              <div className={cellClasses.selectDropdown}>
+                {DATE_ANCHOR_PRESETS.map((p) =>
+                  presetRow(
+                    anchor === p.value,
+                    t(p.labelKey),
+                    () => {
+                      onChange({ mode: "relative", preset: p.value });
+                      setOpened(false);
+                    },
+                    p.value,
+                  ),
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/views/filter-person-input.tsx b/apps/client/src/ee/base/components/views/filter-person-input.tsx
new file mode 100644
index 000000000..5f06c0e55
--- /dev/null
+++ b/apps/client/src/ee/base/components/views/filter-person-input.tsx
@@ -0,0 +1,246 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Popover, InputBase, Input } from "@mantine/core";
+import { IconX, IconChevronDown } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  usePersonSearch,
+  type PersonSuggestion,
+} from "@/ee/base/hooks/use-person-search";
+import {
+  useReferenceStore,
+  useHydrateUsers,
+} from "@/ee/base/reference/reference-store";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type FilterPersonInputProps = {
+  pageId: string;
+  multiple: boolean;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  placeholder: string;
+  label?: string;
+  w?: number | string;
+  portalTarget?: HTMLElement | null;
+};
+
+function toIds(value: unknown): string[] {
+  if (Array.isArray(value)) return value.filter((v): v is string => !!v);
+  if (typeof value === "string" && value) return [value];
+  return [];
+}
+
+export function FilterPersonInput({
+  pageId,
+  multiple,
+  value,
+  onChange,
+  placeholder,
+  label,
+  w,
+  portalTarget,
+}: FilterPersonInputProps) {
+  const ids = toIds(value);
+  const selectedSet = new Set(ids);
+
+  const [opened, setOpened] = useState(false);
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const store = useReferenceStore(pageId);
+  const hydrateUsers = useHydrateUsers(pageId);
+  const suggestions = usePersonSearch(search, opened);
+
+  useEffect(() => {
+    if (opened) requestAnimationFrame(() => searchRef.current?.focus());
+    else setSearch("");
+  }, [opened]);
+
+  const filtered: PersonSuggestion[] = multiple
+    ? suggestions.filter((s) => !selectedSet.has(s.id))
+    : suggestions;
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(filtered.length, [search, opened]);
+
+  const emit = useCallback(
+    (nextIds: string[]) => {
+      if (multiple) onChange(nextIds.length > 0 ? nextIds : undefined);
+      else onChange(nextIds[0] ?? undefined);
+    },
+    [multiple, onChange],
+  );
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      const picked = suggestions.find((s) => s.id === id);
+      if (picked)
+        hydrateUsers([
+          { id: picked.id, name: picked.name, avatarUrl: picked.avatarUrl },
+        ]);
+      if (multiple) {
+        emit(ids.includes(id) ? ids.filter((x) => x !== id) : [...ids, id]);
+      } else {
+        emit([id]);
+        setOpened(false);
+      }
+      setSearch("");
+    },
+    [suggestions, hydrateUsers, multiple, ids, emit],
+  );
+
+  const handleRemove = useCallback(
+    (id: string) => emit(ids.filter((x) => x !== id)),
+    [emit, ids],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpened(false);
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= filtered.length) return;
+        e.preventDefault();
+        handleSelect(filtered[activeIndex].id);
+        return;
+      }
+      if (e.key === "Backspace" && search === "" && ids.length > 0) {
+        e.preventDefault();
+        handleRemove(ids[ids.length - 1]);
+      }
+    },
+    [handleNavKey, activeIndex, filtered, handleSelect, search, ids, handleRemove],
+  );
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom-start"
+      width={260}
+      withinPortal={!!portalTarget}
+      portalProps={{ target: portalTarget ?? undefined }}
+      closeOnEscape={false}
+      closeOnClickOutside
+    >
+      <Popover.Target>
+        <InputBase
+          component="button"
+          type="button"
+          size="xs"
+          pointer
+          multiline
+          w={w ?? 170}
+          label={label}
+          rightSection={<IconChevronDown size={14} />}
+          rightSectionPointerEvents="none"
+          onClick={() => setOpened((o) => !o)}
+        >
+          {ids.length === 0 ? (
+            <Input.Placeholder>{placeholder}</Input.Placeholder>
+          ) : (
+            <span className={cellClasses.filterTriggerChips}>
+              {ids.map((id) => {
+                const user = store.users[id];
+                const name = user?.name ?? id.substring(0, 8);
+                return (
+                  <span key={id} className={cellClasses.filterTriggerChip}>
+                    <CustomAvatar
+                      avatarUrl={user?.avatarUrl ?? ""}
+                      name={name}
+                      size={16}
+                      radius="xl"
+                    />
+                    <span className={cellClasses.filterTriggerChipName}>
+                      {name}
+                    </span>
+                  </span>
+                );
+              })}
+            </span>
+          )}
+        </InputBase>
+      </Popover.Target>
+      <Popover.Dropdown p={0}>
+        <div className={cellClasses.personTagArea}>
+          {multiple &&
+            ids.map((id) => {
+              const user = store.users[id];
+              const name = user?.name ?? id.substring(0, 8);
+              return (
+                <span key={id} className={cellClasses.personTag}>
+                  <CustomAvatar
+                    avatarUrl={user?.avatarUrl ?? ""}
+                    name={name}
+                    size={18}
+                    radius="xl"
+                  />
+                  <span className={cellClasses.personTagName}>{name}</span>
+                  <button
+                    type="button"
+                    className={cellClasses.personTagRemove}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemove(id);
+                    }}
+                  >
+                    <IconX size={10} />
+                  </button>
+                </span>
+              );
+            })}
+          <input
+            ref={searchRef}
+            className={cellClasses.personTagInput}
+            placeholder="Find a user..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+        <div className={cellClasses.personDropdownDivider} />
+        <div className={cellClasses.selectDropdown}>
+          {filtered.map((member, idx) => (
+            <div
+              key={member.id}
+              ref={setOptionRef(idx)}
+              className={clsx(
+                cellClasses.selectOption,
+                selectedSet.has(member.id) && cellClasses.selectOptionActive,
+                idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+              )}
+              onMouseEnter={() => setActiveIndex(idx)}
+              onClick={() => handleSelect(member.id)}
+            >
+              <CustomAvatar
+                avatarUrl={member.avatarUrl ?? ""}
+                name={member.name ?? ""}
+                size={24}
+                radius="xl"
+              />
+              <div className={cellClasses.personOptionText}>
+                <span className={cellClasses.personOptionName}>
+                  {member.name ?? ""}
+                </span>
+                {member.email && (
+                  <span className={cellClasses.personOptionEmail}>
+                    {member.email}
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+          {filtered.length === 0 && (
+            <div className={cellClasses.personDropdownHint}>No users found</div>
+          )}
+        </div>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/views/relative-date-presets.ts b/apps/client/src/ee/base/components/views/relative-date-presets.ts
new file mode 100644
index 000000000..5e3357511
--- /dev/null
+++ b/apps/client/src/ee/base/components/views/relative-date-presets.ts
@@ -0,0 +1,35 @@
+import type {
+  DateFilterAnchor,
+  DateFilterRange,
+} from "@/ee/base/types/base.types";
+
+export const DATE_ANCHOR_PRESETS: { value: DateFilterAnchor; labelKey: string }[] =
+  [
+    { value: "today", labelKey: "Today" },
+    { value: "tomorrow", labelKey: "Tomorrow" },
+    { value: "yesterday", labelKey: "Yesterday" },
+    { value: "oneWeekAgo", labelKey: "One week ago" },
+    { value: "oneWeekFromNow", labelKey: "One week from now" },
+    { value: "oneMonthAgo", labelKey: "One month ago" },
+    { value: "oneMonthFromNow", labelKey: "One month from now" },
+  ];
+
+export const DATE_RANGE_PRESETS: { value: DateFilterRange; labelKey: string }[] =
+  [
+    { value: "pastWeek", labelKey: "Past week" },
+    { value: "pastMonth", labelKey: "Past month" },
+    { value: "pastYear", labelKey: "Past year" },
+    { value: "thisWeek", labelKey: "This week" },
+    { value: "thisMonth", labelKey: "This month" },
+    { value: "thisYear", labelKey: "This year" },
+    { value: "nextWeek", labelKey: "Next week" },
+    { value: "nextMonth", labelKey: "Next month" },
+    { value: "nextYear", labelKey: "Next year" },
+  ];
+
+export const ANCHOR_VALUES = new Set<string>(
+  DATE_ANCHOR_PRESETS.map((p) => p.value),
+);
+export const RANGE_VALUES = new Set<string>(
+  DATE_RANGE_PRESETS.map((p) => p.value),
+);
diff --git a/apps/client/src/ee/base/components/views/view-filter-config.tsx b/apps/client/src/ee/base/components/views/view-filter-config.tsx
new file mode 100644
index 000000000..200f7224f
--- /dev/null
+++ b/apps/client/src/ee/base/components/views/view-filter-config.tsx
@@ -0,0 +1,497 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  Popover,
+  Stack,
+  Group,
+  Select,
+  TextInput,
+  ActionIcon,
+  Text,
+  UnstyledButton,
+  Button,
+} from "@mantine/core";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  FilterCondition,
+  FilterOperator,
+} from "@/ee/base/types/base.types";
+import { useTranslation } from "react-i18next";
+import {
+  getDescriptor,
+  DEFAULT_FILTER_OPERATORS,
+} from "@/ee/base/property-types/property-type.registry";
+import { FilterPersonInput } from "./filter-person-input";
+import { FilterDateInput } from "./filter-date-input";
+import viewClasses from "@/ee/base/styles/views.module.css";
+
+const OPERATORS: { value: FilterOperator; labelKey: string }[] = [
+  { value: "eq", labelKey: "Is" },
+  { value: "neq", labelKey: "Is not" },
+  { value: "contains", labelKey: "Contains" },
+  { value: "ncontains", labelKey: "Doesn't contain" },
+  { value: "any", labelKey: "Is any of" },
+  { value: "none", labelKey: "Is none of" },
+  { value: "before", labelKey: "Is before" },
+  { value: "after", labelKey: "Is after" },
+  { value: "onOrBefore", labelKey: "Is on or before" },
+  { value: "onOrAfter", labelKey: "Is on or after" },
+  { value: "isWithin", labelKey: "Is within" },
+  { value: "gt", labelKey: "Greater than" },
+  { value: "lt", labelKey: "Less than" },
+  { value: "isEmpty", labelKey: "Is empty" },
+  { value: "isNotEmpty", labelKey: "Is not empty" },
+];
+
+const NO_VALUE_OPERATORS: FilterOperator[] = ["isEmpty", "isNotEmpty"];
+
+// Two operators share a value control only if they share a value class.
+// Switching across classes (e.g. eq→any, exact-date→isWithin) must reset the
+// stored value so a stale shape isn't sent to the engine.
+function valueClass(op: FilterOperator, inputKind: string): string {
+  if (NO_VALUE_OPERATORS.includes(op)) return "none";
+  if (inputKind === "person") {
+    return op === "any" || op === "none" ? "personMulti" : "personSingle";
+  }
+  if (inputKind === "date") {
+    return op === "isWithin" ? "dateRange" : "dateInstant";
+  }
+  return "scalar";
+}
+
+function inputKindForProperty(property: IBaseProperty | undefined): string {
+  return getDescriptor(property?.type ?? "")?.filterInput ?? "text";
+}
+
+function getOperatorsForType(type: string): FilterOperator[] {
+  return (getDescriptor(type)?.filterOperators ??
+    DEFAULT_FILTER_OPERATORS) as FilterOperator[];
+}
+
+function FilterValueInput({
+  condition,
+  property,
+  onChange,
+  t,
+}: {
+  condition: FilterCondition;
+  property: IBaseProperty | undefined;
+  onChange: (value: unknown) => void;
+  t: (key: string) => string;
+}) {
+  if (!property) {
+    return (
+      <TextInput
+        size="xs"
+        placeholder={t("Value")}
+        value={(condition.value as string) ?? ""}
+        onChange={(e) => onChange(e.currentTarget.value)}
+        w={100}
+      />
+    );
+  }
+
+  const kind = getDescriptor(property.type)?.filterInput ?? "text";
+
+  if (kind === "person") {
+    return (
+      <FilterPersonInput
+        pageId={property.pageId}
+        multiple={condition.op === "any" || condition.op === "none"}
+        value={condition.value}
+        onChange={onChange}
+        placeholder={t("Select")}
+      />
+    );
+  }
+
+  if (kind === "date") {
+    return (
+      <FilterDateInput
+        op={condition.op}
+        value={condition.value}
+        onChange={onChange}
+      />
+    );
+  }
+
+  if (kind === "choices") {
+    const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+    const choices = typeOptions?.choices ?? [];
+    const choiceOptions = choices.map((c) => ({ value: c.id, label: c.name }));
+    return (
+      <Select
+        size="xs"
+        comboboxProps={{ withinPortal: false }}
+        data={choiceOptions}
+        value={(condition.value as string) ?? null}
+        onChange={(val) => onChange(val ?? "")}
+        w={120}
+        placeholder={t("Select")}
+      />
+    );
+  }
+
+  if (kind === "number") {
+    return (
+      <TextInput
+        size="xs"
+        type="number"
+        placeholder={t("Value")}
+        value={(condition.value as string) ?? ""}
+        onChange={(e) => onChange(e.currentTarget.value)}
+        w={100}
+      />
+    );
+  }
+
+  if (kind === "boolean") {
+    return (
+      <Select
+        size="xs"
+        comboboxProps={{ withinPortal: false }}
+        data={[
+          { value: "true", label: t("True") },
+          { value: "false", label: t("False") },
+        ]}
+        value={(condition.value as string) ?? null}
+        onChange={(val) => onChange(val ?? "")}
+        w={100}
+      />
+    );
+  }
+
+  return (
+    <TextInput
+      size="xs"
+      placeholder={t("Value")}
+      value={(condition.value as string) ?? ""}
+      onChange={(e) => onChange(e.currentTarget.value)}
+      w={100}
+    />
+  );
+}
+
+type ViewFilterConfigProps = {
+  opened: boolean;
+  onClose: () => void;
+  conditions: FilterCondition[];
+  properties: IBaseProperty[];
+  onChange: (conditions: FilterCondition[]) => void;
+  children: React.ReactNode;
+};
+
+export function ViewFilterConfigPopover({
+  opened,
+  onClose,
+  conditions,
+  properties,
+  onChange,
+  children,
+}: ViewFilterConfigProps) {
+  const { t } = useTranslation();
+
+  const propertyOptions = properties.map((p) => ({
+    value: p.id,
+    label: p.name,
+  }));
+
+  const [draft, setDraft] = useState<FilterCondition | null>(null);
+
+  useEffect(() => {
+    if (!opened) setDraft(null);
+  }, [opened]);
+
+  const handleStartDraft = useCallback(() => {
+    const firstProperty = properties[0];
+    if (!firstProperty) return;
+    const validOperators = getOperatorsForType(firstProperty.type);
+    const defaultOperator = validOperators.includes("contains")
+      ? ("contains" as FilterOperator)
+      : validOperators[0];
+    setDraft({ propertyId: firstProperty.id, op: defaultOperator });
+  }, [properties]);
+
+  const handleSaveDraft = useCallback(() => {
+    if (!draft) return;
+    onChange([...conditions, draft]);
+    setDraft(null);
+  }, [draft, conditions, onChange]);
+
+  const handleCancelDraft = useCallback(() => {
+    setDraft(null);
+  }, []);
+
+  const handleDraftPropertyChange = useCallback(
+    (propertyId: string | null) => {
+      if (!propertyId || !draft) return;
+      const newProperty = properties.find((p) => p.id === propertyId);
+      if (!newProperty) {
+        setDraft({ ...draft, propertyId });
+        return;
+      }
+      const validOperators = getOperatorsForType(newProperty.type);
+      const currentOperatorValid = validOperators.includes(draft.op);
+      const sameKind =
+        inputKindForProperty(
+          properties.find((p) => p.id === draft.propertyId),
+        ) === inputKindForProperty(newProperty);
+      setDraft({
+        ...draft,
+        propertyId,
+        op: currentOperatorValid ? draft.op : validOperators[0],
+        value: currentOperatorValid && sameKind ? draft.value : undefined,
+      });
+    },
+    [draft, properties],
+  );
+
+  const handleDraftOperatorChange = useCallback(
+    (operator: string | null) => {
+      if (!operator || !draft) return;
+      const op = operator as FilterOperator;
+      const kind = inputKindForProperty(
+        properties.find((p) => p.id === draft.propertyId),
+      );
+      const keep = valueClass(draft.op, kind) === valueClass(op, kind);
+      setDraft({ ...draft, op, value: keep ? draft.value : undefined });
+    },
+    [draft, properties],
+  );
+
+  const handleDraftValueChange = useCallback(
+    (value: unknown) => {
+      if (!draft) return;
+      setDraft({ ...draft, value });
+    },
+    [draft],
+  );
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      onChange(conditions.filter((_, i) => i !== index));
+    },
+    [conditions, onChange],
+  );
+
+  const handlePropertyChange = useCallback(
+    (index: number, propertyId: string | null) => {
+      if (!propertyId) return;
+      const newProperty = properties.find((p) => p.id === propertyId);
+      onChange(
+        conditions.map((f, i) => {
+          if (i !== index) return f;
+          if (newProperty) {
+            const validOperators = getOperatorsForType(newProperty.type);
+            const currentOperatorValid = validOperators.includes(f.op);
+            const sameKind =
+              inputKindForProperty(
+                properties.find((p) => p.id === f.propertyId),
+              ) === inputKindForProperty(newProperty);
+            return {
+              ...f,
+              propertyId,
+              op: currentOperatorValid ? f.op : validOperators[0],
+              value: currentOperatorValid && sameKind ? f.value : undefined,
+            };
+          }
+          return { ...f, propertyId };
+        }),
+      );
+    },
+    [conditions, properties, onChange],
+  );
+
+  const handleOperatorChange = useCallback(
+    (index: number, operator: string | null) => {
+      if (!operator) return;
+      const op = operator as FilterOperator;
+      onChange(
+        conditions.map((f, i) => {
+          if (i !== index) return f;
+          const kind = inputKindForProperty(
+            properties.find((p) => p.id === f.propertyId),
+          );
+          const keep = valueClass(f.op, kind) === valueClass(op, kind);
+          return { ...f, op, value: keep ? f.value : undefined };
+        }),
+      );
+    },
+    [conditions, properties, onChange],
+  );
+
+  const handleValueChange = useCallback(
+    (index: number, value: unknown) => {
+      onChange(
+        conditions.map((f, i) => (i === index ? { ...f, value } : f)),
+      );
+    },
+    [conditions, onChange],
+  );
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={(o) => {
+        if (!o) onClose();
+      }}
+      onClose={onClose}
+      position="bottom-end"
+      shadow="md"
+      width={520}
+      trapFocus
+      closeOnEscape={false}
+      closeOnClickOutside
+      withinPortal
+    >
+      <Popover.Target>{children}</Popover.Target>
+      <Popover.Dropdown
+        onKeyDown={(e) => {
+          // Mantine's built-in closeOnEscape uses a capture-phase handler that
+          // would fire before a nested picker can consume Escape, closing the
+          // whole panel. Handle it on bubble instead so an open inner picker
+          // (which preventDefaults Escape) keeps the panel open.
+          if (e.key === "Escape" && !e.defaultPrevented) onClose();
+        }}
+      >
+        <Stack gap="xs">
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Filter by")}
+          </Text>
+
+          {conditions.length === 0 && !draft && (
+            <Text size="xs" c="dimmed">
+              {t("No filters applied")}
+            </Text>
+          )}
+
+          {conditions.map((condition, index) => {
+            const needsValue = !NO_VALUE_OPERATORS.includes(condition.op);
+            const property = properties.find(
+              (p) => p.id === condition.propertyId,
+            );
+            const validOperators = property
+              ? getOperatorsForType(property.type)
+              : OPERATORS.map((op) => op.value);
+            const operatorOptions = OPERATORS.filter((op) =>
+              validOperators.includes(op.value),
+            ).map((op) => ({
+              value: op.value,
+              label: t(op.labelKey),
+            }));
+
+            return (
+              <Group key={index} gap="xs" wrap="nowrap">
+                <Select
+                  size="xs"
+                  comboboxProps={{ withinPortal: false }}
+                  data={propertyOptions}
+                  searchable
+                  openOnFocus={false}
+                  nothingFoundMessage={t("No match")}
+                  value={condition.propertyId}
+                  onChange={(val) => handlePropertyChange(index, val)}
+                  style={{ flex: 1 }}
+                />
+                <Select
+                  size="xs"
+                  comboboxProps={{ withinPortal: false }}
+                  data={operatorOptions}
+                  searchable
+                  openOnFocus={false}
+                  nothingFoundMessage={t("No match")}
+                  value={condition.op}
+                  onChange={(val) => handleOperatorChange(index, val)}
+                  w={130}
+                />
+                {needsValue && (
+                  <FilterValueInput
+                    condition={condition}
+                    property={property}
+                    onChange={(val) => handleValueChange(index, val)}
+                    t={t}
+                  />
+                )}
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  size="sm"
+                  onClick={() => handleRemove(index)}
+                >
+                  <IconTrash size={14} />
+                </ActionIcon>
+              </Group>
+            );
+          })}
+
+          {draft && (() => {
+            const needsValue = !NO_VALUE_OPERATORS.includes(draft.op);
+            const property = properties.find((p) => p.id === draft.propertyId);
+            const validOperators = property
+              ? getOperatorsForType(property.type)
+              : OPERATORS.map((op) => op.value);
+            const operatorOptions = OPERATORS.filter((op) =>
+              validOperators.includes(op.value),
+            ).map((op) => ({ value: op.value, label: t(op.labelKey) }));
+
+            return (
+              <Stack gap={6}>
+                <Group gap="xs" wrap="nowrap">
+                  <Select
+                    size="xs"
+                    comboboxProps={{ withinPortal: false }}
+                    data={propertyOptions}
+                    searchable
+                    openOnFocus={false}
+                    nothingFoundMessage={t("No match")}
+                    value={draft.propertyId}
+                    onChange={handleDraftPropertyChange}
+                    style={{ flex: 1 }}
+                  />
+                  <Select
+                    size="xs"
+                    comboboxProps={{ withinPortal: false }}
+                    data={operatorOptions}
+                    searchable
+                    openOnFocus={false}
+                    nothingFoundMessage={t("No match")}
+                    value={draft.op}
+                    onChange={handleDraftOperatorChange}
+                    w={130}
+                  />
+                  {needsValue && (
+                    <FilterValueInput
+                      condition={draft}
+                      property={property}
+                      onChange={handleDraftValueChange}
+                      t={t}
+                    />
+                  )}
+                </Group>
+                <Group justify="flex-end" gap="xs">
+                  <Button variant="default" size="xs" onClick={handleCancelDraft}>
+                    {t("Cancel")}
+                  </Button>
+                  <Button size="xs" onClick={handleSaveDraft}>
+                    {t("Save")}
+                  </Button>
+                </Group>
+              </Stack>
+            );
+          })()}
+
+          {!draft && (
+            <UnstyledButton
+              onClick={handleStartDraft}
+              className={viewClasses.addActionButton}
+            >
+              <IconPlus size={14} />
+              {t("Add filter")}
+            </UnstyledButton>
+          )}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/views/view-property-visibility.tsx b/apps/client/src/ee/base/components/views/view-property-visibility.tsx
new file mode 100644
index 000000000..96af8410e
--- /dev/null
+++ b/apps/client/src/ee/base/components/views/view-property-visibility.tsx
@@ -0,0 +1,158 @@
+import { useMemo, useCallback } from "react";
+import { Popover, Switch, Stack, Text, Group, Divider, UnstyledButton } from "@mantine/core";
+import { Table } from "@tanstack/react-table";
+import { IBaseRow, IBaseProperty } from "@/ee/base/types/base.types";
+import { propertyTypes } from "@/ee/base/components/property/property-type-picker";
+import { useTranslation } from "react-i18next";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import viewClasses from "@/ee/base/styles/views.module.css";
+
+type ViewPropertyVisibilityProps = {
+  opened: boolean;
+  onClose: () => void;
+  table: Table<IBaseRow>;
+  properties: IBaseProperty[];
+  onPersist: () => void;
+  children: React.ReactNode;
+};
+
+export function ViewPropertyVisibility({
+  opened,
+  onClose,
+  table,
+  properties,
+  onPersist,
+  children,
+}: ViewPropertyVisibilityProps) {
+  const { t } = useTranslation();
+
+  const columns = useMemo(() => {
+    return table
+      .getAllLeafColumns()
+      .filter((col) => col.id !== "__row_number");
+  }, [table, properties]);
+
+  const allVisible = columns.every((col) => col.getIsVisible());
+  const noneVisible = columns.filter((col) => col.getCanHide()).every((col) => !col.getIsVisible());
+
+  const handleToggle = useCallback(
+    (columnId: string, visible: boolean) => {
+      const col = table.getColumn(columnId);
+      if (!col) return;
+      col.toggleVisibility(visible);
+      onPersist();
+    },
+    [table, onPersist],
+  );
+
+  const handleShowAll = useCallback(() => {
+    columns.forEach((col) => {
+      if (col.getCanHide()) {
+        col.toggleVisibility(true);
+      }
+    });
+    onPersist();
+  }, [columns, onPersist]);
+
+  const handleHideAll = useCallback(() => {
+    columns.forEach((col) => {
+      if (col.getCanHide()) {
+        col.toggleVisibility(false);
+      }
+    });
+    onPersist();
+  }, [columns, onPersist]);
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={(o) => {
+        if (!o) onClose();
+      }}
+      onClose={onClose}
+      position="bottom-end"
+      shadow="md"
+      width={260}
+      trapFocus
+      closeOnEscape
+      closeOnClickOutside
+      withinPortal
+    >
+      <Popover.Target>{children}</Popover.Target>
+      <Popover.Dropdown p="xs">
+        <Stack gap={4}>
+          <Group justify="space-between" px={4} py={2}>
+            <Text size="xs" fw={600} c="dimmed">
+              {t("Properties")}
+            </Text>
+            <Group gap={8}>
+              <UnstyledButton
+                onClick={handleShowAll}
+                disabled={allVisible}
+                style={{ opacity: allVisible ? 0.4 : 1 }}
+              >
+                <Text size="xs" c="blue">
+                  {t("Show all")}
+                </Text>
+              </UnstyledButton>
+              <UnstyledButton
+                onClick={handleHideAll}
+                disabled={noneVisible}
+                style={{ opacity: noneVisible ? 0.4 : 1 }}
+              >
+                <Text size="xs" c="blue">
+                  {t("Hide all")}
+                </Text>
+              </UnstyledButton>
+            </Group>
+          </Group>
+
+          <Divider />
+
+          <Stack gap={0}>
+            {columns.map((col) => {
+              const property = col.columnDef.meta?.property as IBaseProperty | undefined;
+              if (!property) return null;
+
+              const canHide = col.getCanHide();
+              const isVisible = col.getIsVisible();
+              const typeConfig = propertyTypes.find((pt) => pt.type === property.type);
+              const TypeIcon = typeConfig?.icon;
+
+              return (
+                <UnstyledButton
+                  key={col.id}
+                  className={cellClasses.menuItem}
+                  onClick={() => {
+                    if (canHide) {
+                      handleToggle(col.id, !isVisible);
+                    }
+                  }}
+                  style={{ opacity: canHide ? 1 : 0.5 }}
+                >
+                  <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
+                    {TypeIcon && <TypeIcon size={14} style={{ flexShrink: 0 }} />}
+                    <Text size="sm" className={viewClasses.fieldNameText}>
+                      {property.name}
+                    </Text>
+                  </Group>
+                  <Switch
+                    size="xs"
+                    checked={isVisible}
+                    disabled={!canHide}
+                    onChange={() => {}}
+                    // Clicking the track synthesizes a second click on the hidden input which bubbles
+                    // to UnstyledButton, firing handleToggle twice. stopPropagation blocks only that
+                    // synthetic input click so handleToggle fires exactly once.
+                    onClick={(e) => e.stopPropagation()}
+                    styles={{ track: { cursor: canHide ? "pointer" : "not-allowed" } }}
+                  />
+                </UnstyledButton>
+              );
+            })}
+          </Stack>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/views/view-renderer.tsx b/apps/client/src/ee/base/components/views/view-renderer.tsx
new file mode 100644
index 000000000..c50cd2fa6
--- /dev/null
+++ b/apps/client/src/ee/base/components/views/view-renderer.tsx
@@ -0,0 +1,43 @@
+import { Table } from "@tanstack/react-table";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+} from "@/ee/base/types/base.types";
+import { BaseTable } from "@/ee/base/components/base-table";
+
+type ViewRendererProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  effectiveView: IBaseView | undefined;
+  table: Table<IBaseRow>;
+  pageId: string;
+  embedded?: boolean;
+  isFiltered: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onFetchNextPage: () => void;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  onAddRow: () => void;
+  onColumnReorder: (columnId: string, finishIndex: number) => void;
+  onResizeEnd: () => void;
+  onRowReorder: (
+    rowId: string,
+    targetRowId: string,
+    dropPosition: "above" | "below",
+  ) => void;
+  persistViewConfig: () => void;
+  scrollportRef: React.RefObject<HTMLDivElement>;
+  aboveBand?: React.ReactNode;
+};
+
+export function ViewRenderer(props: ViewRendererProps) {
+  const viewType = props.effectiveView?.type ?? "table";
+
+  if (viewType === "table") {
+    return <BaseTable {...props} />;
+  }
+
+  // Kanban not yet implemented; fall back to table to avoid blank page.
+  return <BaseTable {...props} />;
+}
diff --git a/apps/client/src/ee/base/components/views/view-sort-config.tsx b/apps/client/src/ee/base/components/views/view-sort-config.tsx
new file mode 100644
index 000000000..a2751279c
--- /dev/null
+++ b/apps/client/src/ee/base/components/views/view-sort-config.tsx
@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  Popover,
+  Stack,
+  Group,
+  Select,
+  ActionIcon,
+  Text,
+  UnstyledButton,
+  Button,
+} from "@mantine/core";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+import {
+  IBaseProperty,
+  ViewSortConfig,
+} from "@/ee/base/types/base.types";
+import { useTranslation } from "react-i18next";
+import viewClasses from "@/ee/base/styles/views.module.css";
+
+type ViewSortConfigProps = {
+  opened: boolean;
+  onClose: () => void;
+  sorts: ViewSortConfig[];
+  properties: IBaseProperty[];
+  onChange: (sorts: ViewSortConfig[]) => void;
+  children: React.ReactNode;
+};
+
+export function ViewSortConfigPopover({
+  opened,
+  onClose,
+  sorts,
+  properties,
+  onChange,
+  children,
+}: ViewSortConfigProps) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = useState<ViewSortConfig | null>(null);
+
+  useEffect(() => {
+    if (!opened) setDraft(null);
+  }, [opened]);
+
+  // Page props sort by raw UUID; hide until title-based sort is supported.
+  const sortableProperties = properties.filter((p) => p.type !== "page");
+
+  const propertyOptions = sortableProperties.map((p) => ({
+    value: p.id,
+    label: p.name,
+  }));
+
+  const directionOptions = [
+    { value: "asc", label: t("Ascending") },
+    { value: "desc", label: t("Descending") },
+  ];
+
+  const handleStartDraft = useCallback(() => {
+    const usedIds = new Set(sorts.map((s) => s.propertyId));
+    const available = sortableProperties.find((p) => !usedIds.has(p.id));
+    if (!available) return;
+    setDraft({ propertyId: available.id, direction: "asc" });
+  }, [sorts, sortableProperties]);
+
+  const handleSaveDraft = useCallback(() => {
+    if (!draft) return;
+    onChange([...sorts, draft]);
+    setDraft(null);
+  }, [draft, sorts, onChange]);
+
+  const handleCancelDraft = useCallback(() => {
+    setDraft(null);
+  }, []);
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      onChange(sorts.filter((_, i) => i !== index));
+    },
+    [sorts, onChange],
+  );
+
+  const handlePropertyChange = useCallback(
+    (index: number, propertyId: string | null) => {
+      if (!propertyId) return;
+      onChange(
+        sorts.map((s, i) => (i === index ? { ...s, propertyId } : s)),
+      );
+    },
+    [sorts, onChange],
+  );
+
+  const handleDirectionChange = useCallback(
+    (index: number, direction: string | null) => {
+      if (!direction) return;
+      onChange(
+        sorts.map((s, i) =>
+          i === index
+            ? { ...s, direction: direction as "asc" | "desc" }
+            : s,
+        ),
+      );
+    },
+    [sorts, onChange],
+  );
+
+  const canAddMore =
+    sortableProperties.length > sorts.length + (draft ? 1 : 0);
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={(o) => {
+        if (!o) onClose();
+      }}
+      onClose={onClose}
+      position="bottom-end"
+      shadow="md"
+      width={340}
+      trapFocus
+      closeOnEscape
+      closeOnClickOutside
+      withinPortal
+    >
+      <Popover.Target>{children}</Popover.Target>
+      <Popover.Dropdown>
+        <Stack gap="xs">
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Sort by")}
+          </Text>
+
+          {sorts.length === 0 && !draft && (
+            <Text size="xs" c="dimmed">
+              {t("No sorts applied")}
+            </Text>
+          )}
+
+          {sorts.map((sort, index) => (
+            <Group key={index} gap="xs" wrap="nowrap">
+              <Select
+                size="xs"
+                comboboxProps={{ withinPortal: false }}
+                data={propertyOptions}
+                value={sort.propertyId}
+                onChange={(val) => handlePropertyChange(index, val)}
+                style={{ flex: 1 }}
+              />
+              <Select
+                size="xs"
+                comboboxProps={{ withinPortal: false }}
+                data={directionOptions}
+                value={sort.direction}
+                onChange={(val) => handleDirectionChange(index, val)}
+                w={110}
+              />
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="sm"
+                onClick={() => handleRemove(index)}
+              >
+                <IconTrash size={14} />
+              </ActionIcon>
+            </Group>
+          ))}
+
+          {draft && (
+            <Stack gap={6}>
+              <Group gap="xs" wrap="nowrap">
+                <Select
+                  size="xs"
+                  comboboxProps={{ withinPortal: false }}
+                  data={propertyOptions}
+                  value={draft.propertyId}
+                  onChange={(val) =>
+                    val && setDraft({ ...draft, propertyId: val })
+                  }
+                  style={{ flex: 1 }}
+                />
+                <Select
+                  size="xs"
+                  comboboxProps={{ withinPortal: false }}
+                  data={directionOptions}
+                  value={draft.direction}
+                  onChange={(val) =>
+                    val &&
+                    setDraft({
+                      ...draft,
+                      direction: val as "asc" | "desc",
+                    })
+                  }
+                  w={110}
+                />
+              </Group>
+              <Group justify="flex-end" gap="xs">
+                <Button
+                  variant="default"
+                  size="xs"
+                  onClick={handleCancelDraft}
+                >
+                  {t("Cancel")}
+                </Button>
+                <Button size="xs" onClick={handleSaveDraft}>
+                  {t("Save")}
+                </Button>
+              </Group>
+            </Stack>
+          )}
+
+          {!draft && canAddMore && (
+            <UnstyledButton
+              onClick={handleStartDraft}
+              className={viewClasses.addActionButton}
+            >
+              <IconPlus size={14} />
+              {t("Add sort")}
+            </UnstyledButton>
+          )}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/client/src/ee/base/components/views/view-tabs.tsx b/apps/client/src/ee/base/components/views/view-tabs.tsx
new file mode 100644
index 000000000..6943e330c
--- /dev/null
+++ b/apps/client/src/ee/base/components/views/view-tabs.tsx
@@ -0,0 +1,404 @@
+import {
+  useState,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import {
+  Group,
+  UnstyledButton,
+  Text,
+  ActionIcon,
+  Tooltip,
+  TextInput,
+  Popover,
+  Stack,
+  Divider,
+} from "@mantine/core";
+import {
+  IconPlus,
+  IconPencil,
+  IconTrash,
+  IconTable,
+  IconLink,
+} from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
+import { IBaseView } from "@/ee/base/types/base.types";
+import {
+  useUpdateViewMutation,
+  useDeleteViewMutation,
+} from "@/ee/base/queries/base-view-query";
+import { useTranslation } from "react-i18next";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+
+const VIEW_DRAG_TYPE = "base-view";
+
+type ViewTabsProps = {
+  views: IBaseView[];
+  activeViewId: string | undefined;
+  pageId: string;
+  onViewChange: (viewId: string) => void;
+  onAddView?: () => void;
+  /** Standalone base-page link for a view, used by "Copy link to view". */
+  getViewShareUrl?: (viewId: string) => string | null;
+};
+
+export function ViewTabs({
+  views,
+  activeViewId,
+  pageId,
+  onViewChange,
+  onAddView,
+  getViewShareUrl,
+}: ViewTabsProps) {
+  const { t } = useTranslation();
+  const editable = useBaseEditable();
+  const [editingViewId, setEditingViewId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState("");
+
+  const updateViewMutation = useUpdateViewMutation();
+  const deleteViewMutation = useDeleteViewMutation();
+
+  const orderedViews = useMemo(
+    () =>
+      [...views].sort((a, b) =>
+        a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
+      ),
+    [views],
+  );
+
+  const handleReorder = useCallback(
+    (sourceId: string, targetId: string, edge: Edge) => {
+      if (sourceId === targetId) return;
+      const remaining = orderedViews.filter((v) => v.id !== sourceId);
+      const targetIndex = remaining.findIndex((v) => v.id === targetId);
+      if (targetIndex === -1) return;
+
+      let lowerPos: string | null = null;
+      let upperPos: string | null = null;
+      if (edge === "left") {
+        lowerPos =
+          targetIndex > 0 ? remaining[targetIndex - 1]?.position : null;
+        upperPos = remaining[targetIndex]?.position ?? null;
+      } else {
+        lowerPos = remaining[targetIndex]?.position ?? null;
+        upperPos =
+          targetIndex < remaining.length - 1
+            ? remaining[targetIndex + 1]?.position
+            : null;
+      }
+
+      try {
+        const position =
+          lowerPos && upperPos && lowerPos === upperPos
+            ? generateJitteredKeyBetween(lowerPos, null)
+            : generateJitteredKeyBetween(lowerPos, upperPos);
+        updateViewMutation.mutate({ viewId: sourceId, pageId, position });
+      } catch {
+        // Position computation failed; skip the reorder.
+      }
+    },
+    [orderedViews, pageId, updateViewMutation],
+  );
+
+  const handleRenameStart = useCallback(
+    (view: IBaseView) => {
+      setEditingViewId(view.id);
+      setEditingName(view.name);
+    },
+    [],
+  );
+
+  const handleRenameCommit = useCallback(() => {
+    if (!editingViewId) return;
+    const trimmed = editingName.trim();
+    const view = views.find((v) => v.id === editingViewId);
+    if (trimmed && view && trimmed !== view.name) {
+      updateViewMutation.mutate({
+        viewId: editingViewId,
+        pageId,
+        name: trimmed,
+      });
+    }
+    setEditingViewId(null);
+  }, [editingViewId, editingName, views, pageId, updateViewMutation]);
+
+  const handleRenameKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleRenameCommit();
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setEditingViewId(null);
+      }
+    },
+    [handleRenameCommit],
+  );
+
+  const handleDelete = useCallback(
+    (viewId: string) => {
+      if (orderedViews.length <= 1) return;
+      deleteViewMutation.mutate({ viewId, pageId });
+      if (viewId === activeViewId) {
+        const remaining = orderedViews.filter((v) => v.id !== viewId);
+        onViewChange(remaining[0].id);
+      }
+    },
+    [orderedViews, pageId, activeViewId, deleteViewMutation, onViewChange],
+  );
+
+  return (
+    <Group gap={4}>
+      {orderedViews.map((view) => (
+        <ViewTab
+          key={view.id}
+          view={view}
+          isActive={view.id === activeViewId}
+          isEditing={view.id === editingViewId}
+          editingName={editingName}
+          canDelete={orderedViews.length > 1}
+          multipleViews={orderedViews.length > 1}
+          reorderEnabled={editable && orderedViews.length > 1}
+          onReorder={handleReorder}
+          onClick={() => onViewChange(view.id)}
+          onRenameStart={() => handleRenameStart(view)}
+          onRenameChange={setEditingName}
+          onRenameCommit={handleRenameCommit}
+          onRenameKeyDown={handleRenameKeyDown}
+          onDelete={() => handleDelete(view.id)}
+          getViewShareUrl={getViewShareUrl}
+        />
+      ))}
+      {onAddView && (
+        <Tooltip label={t("Add view")}>
+          <ActionIcon
+            variant="subtle"
+            size="sm"
+            color="gray"
+            onClick={onAddView}
+          >
+            <IconPlus size={14} />
+          </ActionIcon>
+        </Tooltip>
+      )}
+    </Group>
+  );
+}
+
+function ViewTab({
+  view,
+  isActive,
+  isEditing,
+  editingName,
+  canDelete,
+  multipleViews,
+  reorderEnabled,
+  onReorder,
+  onClick,
+  onRenameStart,
+  onRenameChange,
+  onRenameCommit,
+  onRenameKeyDown,
+  onDelete,
+  getViewShareUrl,
+}: {
+  view: IBaseView;
+  isActive: boolean;
+  isEditing: boolean;
+  editingName: string;
+  canDelete: boolean;
+  multipleViews: boolean;
+  reorderEnabled: boolean;
+  onReorder: (sourceId: string, targetId: string, edge: Edge) => void;
+  onClick: () => void;
+  onRenameStart: () => void;
+  onRenameChange: (name: string) => void;
+  onRenameCommit: () => void;
+  onRenameKeyDown: (e: React.KeyboardEvent) => void;
+  onDelete: () => void;
+  getViewShareUrl?: (viewId: string) => string | null;
+}) {
+  const { t } = useTranslation();
+  const [menuOpened, setMenuOpened] = useState(false);
+  const editable = useBaseEditable();
+  const tabRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const onReorderRef = useRef(onReorder);
+  useLayoutEffect(() => {
+    onReorderRef.current = onReorder;
+  });
+
+  useEffect(() => {
+    const el = tabRef.current;
+    if (!el || !reorderEnabled || isEditing) return;
+    return combine(
+      draggable({
+        element: el,
+        getInitialData: () => ({ type: VIEW_DRAG_TYPE, viewId: view.id }),
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element: el,
+        canDrop: ({ source }) =>
+          source.data.type === VIEW_DRAG_TYPE &&
+          source.data.viewId !== view.id,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { viewId: view.id },
+            { input, element, allowedEdges: ["left", "right"] },
+          ),
+        onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const edge = extractClosestEdge(self.data);
+          if (!edge) return;
+          onReorderRef.current(source.data.viewId as string, view.id, edge);
+        },
+      }),
+    );
+  }, [view.id, reorderEnabled, isEditing]);
+
+  const handleTabClick = useCallback(() => {
+    if (isActive) {
+      setMenuOpened((o) => !o);
+    } else {
+      onClick();
+    }
+  }, [isActive, onClick]);
+
+  const handleCopyLink = useCallback(() => {
+    setMenuOpened(false);
+    const url = getViewShareUrl?.(view.id);
+    if (!url) return;
+    void navigator.clipboard.writeText(url);
+    notifications.show({ message: t("Link copied to clipboard") });
+  }, [getViewShareUrl, view.id, t]);
+
+  if (isEditing) {
+    return (
+      <TextInput
+        size="xs"
+        w={120}
+        value={editingName}
+        onChange={(e) => onRenameChange(e.currentTarget.value)}
+        onBlur={onRenameCommit}
+        onKeyDown={onRenameKeyDown}
+        autoFocus
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={tabRef}
+      style={{
+        position: "relative",
+        display: "inline-flex",
+        opacity: isDragging ? 0.4 : 1,
+      }}
+    >
+      <Popover
+        opened={menuOpened}
+        onChange={setMenuOpened}
+        position="bottom-start"
+        shadow="md"
+        width={180}
+        trapFocus
+        closeOnEscape
+        closeOnClickOutside
+        withinPortal
+      >
+        <Popover.Target>
+          <UnstyledButton
+            onClick={handleTabClick}
+            style={{
+              padding: "2px 10px",
+              borderRadius: "var(--mantine-radius-xl)",
+              fontWeight: isActive ? 600 : 400,
+              backgroundColor:
+                isActive && multipleViews
+                  ? "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5))"
+                  : undefined,
+            }}
+          >
+            <Group gap={6} wrap="nowrap">
+              <IconTable size={14} opacity={isActive ? 1 : 0.5} />
+              <Text size="sm" lh={1.2} c={isActive ? undefined : "dimmed"}>
+                {view.name}
+              </Text>
+            </Group>
+          </UnstyledButton>
+        </Popover.Target>
+      <Popover.Dropdown p={4}>
+        <Stack gap={0}>
+          {editable && (
+            <UnstyledButton
+              className={cellClasses.menuItem}
+              onClick={() => {
+                setMenuOpened(false);
+                onRenameStart();
+              }}
+            >
+              <Group gap={8} wrap="nowrap">
+                <IconPencil size={14} />
+                <Text size="sm">{t("Rename")}</Text>
+              </Group>
+            </UnstyledButton>
+          )}
+          {getViewShareUrl && (
+            <UnstyledButton
+              className={cellClasses.menuItem}
+              onClick={handleCopyLink}
+            >
+              <Group gap={8} wrap="nowrap">
+                <IconLink size={14} />
+                <Text size="sm">{t("Copy link to view")}</Text>
+              </Group>
+            </UnstyledButton>
+          )}
+          {editable && canDelete && (
+            <>
+              <Divider my={4} />
+              <UnstyledButton
+                className={cellClasses.menuItem}
+                onClick={() => {
+                  setMenuOpened(false);
+                  onDelete();
+                }}
+                style={{ color: "var(--mantine-color-red-6)" }}
+              >
+                <Group gap={8} wrap="nowrap">
+                  <IconTrash size={14} />
+                  <Text size="sm">{t("Delete view")}</Text>
+                </Group>
+              </UnstyledButton>
+            </>
+          )}
+        </Stack>
+      </Popover.Dropdown>
+      </Popover>
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+    </div>
+  );
+}
diff --git a/apps/client/src/ee/base/constants/currencies.ts b/apps/client/src/ee/base/constants/currencies.ts
new file mode 100644
index 000000000..5dceaddf3
--- /dev/null
+++ b/apps/client/src/ee/base/constants/currencies.ts
@@ -0,0 +1,39 @@
+export type Currency = { code: string; name: string };
+
+// Most-used first; order drives the dropdown.
+export const CURRENCIES: Currency[] = [
+  { code: "USD", name: "US Dollar" },
+  { code: "EUR", name: "Euro" },
+  { code: "GBP", name: "Pound" },
+  { code: "CAD", name: "Canadian dollar" },
+  { code: "AUD", name: "Australian dollar" },
+  { code: "SGD", name: "Singapore dollar" },
+  { code: "JPY", name: "Yen" },
+  { code: "CNY", name: "Chinese Yuan" },
+];
+
+export const DEFAULT_CURRENCY_CODE = "USD";
+
+const CURRENCY_CODES = new Set(CURRENCIES.map((c) => c.code));
+
+// Renders value with locale symbol and grouping. Falls back to USD for unknown codes,
+// plain string if Intl throws. precision overrides the currency's natural decimal places.
+export function formatCurrency(
+  value: number,
+  code: string | undefined,
+  precision: number | undefined,
+): string {
+  const currency =
+    code && CURRENCY_CODES.has(code) ? code : DEFAULT_CURRENCY_CODE;
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency,
+      ...(precision != null
+        ? { minimumFractionDigits: precision, maximumFractionDigits: precision }
+        : {}),
+    }).format(value);
+  } catch {
+    return String(value);
+  }
+}
diff --git a/apps/client/src/ee/base/context/base-editable.tsx b/apps/client/src/ee/base/context/base-editable.tsx
new file mode 100644
index 000000000..b4d1b2b80
--- /dev/null
+++ b/apps/client/src/ee/base/context/base-editable.tsx
@@ -0,0 +1,22 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+const BaseEditableContext = createContext<boolean>(true);
+
+export function BaseEditableProvider({
+  editable,
+  children,
+}: {
+  editable: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <BaseEditableContext.Provider value={editable}>
+      {children}
+    </BaseEditableContext.Provider>
+  );
+}
+
+/** Whether the current base subtree is editable. Defaults to true outside a provider. */
+export function useBaseEditable(): boolean {
+  return useContext(BaseEditableContext);
+}
diff --git a/apps/client/src/ee/base/context/grid-row-order.tsx b/apps/client/src/ee/base/context/grid-row-order.tsx
new file mode 100644
index 000000000..b812d85c6
--- /dev/null
+++ b/apps/client/src/ee/base/context/grid-row-order.tsx
@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+
+// Row order is only needed at interaction time (shift-select range math), so
+// rows subscribe to a stable getter instead of the array itself — appending a
+// page must not re-render every mounted row.
+const GridRowOrderContext = createContext<() => string[]>(() => []);
+
+export const GridRowOrderProvider = GridRowOrderContext.Provider;
+
+export function useGridRowOrder(): () => string[] {
+  return useContext(GridRowOrderContext);
+}
diff --git a/apps/client/src/ee/base/context/row-expand.tsx b/apps/client/src/ee/base/context/row-expand.tsx
new file mode 100644
index 000000000..a737b1ea1
--- /dev/null
+++ b/apps/client/src/ee/base/context/row-expand.tsx
@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+// Rows only need the handler at click time; a stable context value keeps the
+// expand affordance out of every GridRow/GridCell memo equality check.
+const RowExpandContext = createContext<((rowId: string) => void) | null>(null);
+
+export const RowExpandProvider = RowExpandContext.Provider;
+
+export function useRowExpand(): ((rowId: string) => void) | null {
+  return useContext(RowExpandContext);
+}
diff --git a/apps/client/src/ee/base/hooks/use-base-socket.ts b/apps/client/src/ee/base/hooks/use-base-socket.ts
new file mode 100644
index 000000000..5771dbb1f
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-base-socket.ts
@@ -0,0 +1,363 @@
+import { useEffect } from "react";
+import { useAtomValue, getDefaultStore } from "jotai";
+import { useQueryClient, InfiniteData } from "@tanstack/react-query";
+import { socketAtom } from "@/features/websocket/atoms/socket-atom";
+import {
+  IBase,
+  IBaseProperty,
+  IBaseRow,
+  IBaseView,
+} from "@/ee/base/types/base.types";
+import { selectedRowIdsAtomFamily } from "@/ee/base/atoms/base-atoms";
+import { formulaRecomputeAtom } from "@/ee/base/atoms/formula-recompute-atom";
+import { IPagination } from "@/lib/types";
+
+type BaseRowCreated = {
+  operation: "base:row:created";
+  pageId: string;
+  row: IBaseRow;
+  requestId?: string | null;
+};
+
+type BaseRowUpdated = {
+  operation: "base:row:updated";
+  pageId: string;
+  rowId: string;
+  updatedCells: Record<string, unknown>;
+  requestId?: string | null;
+};
+
+type BaseRowDeleted = {
+  operation: "base:row:deleted";
+  pageId: string;
+  rowId: string;
+  requestId?: string | null;
+};
+
+type BaseRowsDeleted = {
+  operation: "base:rows:deleted";
+  pageId: string;
+  rowIds: string[];
+  requestId?: string | null;
+};
+
+type BaseRowReordered = {
+  operation: "base:row:reordered";
+  pageId: string;
+  rowId: string;
+  position: string;
+  requestId?: string | null;
+};
+
+type BasePropertyEvent = {
+  operation:
+    | "base:property:created"
+    | "base:property:updated"
+    | "base:property:deleted"
+    | "base:property:reordered";
+  pageId: string;
+  property?: IBaseProperty;
+  propertyId?: string;
+  requestId?: string | null;
+};
+
+type BaseViewEvent = {
+  operation:
+    | "base:view:created"
+    | "base:view:updated"
+    | "base:view:deleted";
+  pageId: string;
+  view?: IBaseView;
+  viewId?: string;
+};
+
+type BaseRowsUpdated = {
+  operation: "base:rows:updated";
+  pageId: string;
+  rowIds: string[];
+  propertyIds: string[];
+  requestId?: string | null;
+};
+
+type BaseFormulaRecomputeStarted = {
+  operation: "base:formula:recompute:started";
+  pageId: string;
+  propertyIds: string[];
+  jobId: string;
+};
+
+type BaseFormulaRecomputeCompleted = {
+  operation: "base:formula:recompute:completed";
+  pageId: string;
+  propertyIds: string[];
+  jobId: string;
+  processed: number;
+  errored: number;
+};
+
+type BaseSchemaBumped = {
+  operation: "base:schema:bumped";
+  pageId: string;
+  schemaVersion: number;
+};
+
+type BaseSubscribed = {
+  operation: "base:subscribed";
+  pageId: string;
+  schemaVersion: number;
+};
+
+type BaseInboundEvent =
+  | BaseRowCreated
+  | BaseRowUpdated
+  | BaseRowDeleted
+  | BaseRowsDeleted
+  | BaseRowReordered
+  | BaseRowsUpdated
+  | BaseFormulaRecomputeStarted
+  | BaseFormulaRecomputeCompleted
+  | BaseSchemaBumped
+  | BaseSubscribed
+  | BasePropertyEvent
+  | BaseViewEvent
+  | { operation: string; pageId: string };
+
+// Module-level set of requestIds we've just sent. When the socket echoes back
+// a mutation with a matching requestId we drop it, as the local mutation
+// already updated the cache. Bounded to prevent unbounded growth on long tabs.
+const outboundRequestIds = new Set<string>();
+const OUTBOUND_MAX = 256;
+
+export function markRequestIdOutbound(requestId: string): void {
+  outboundRequestIds.add(requestId);
+  if (outboundRequestIds.size > OUTBOUND_MAX) {
+    const oldest = outboundRequestIds.values().next().value;
+    if (oldest) outboundRequestIds.delete(oldest);
+  }
+}
+
+// Realtime bridge for a single base. Joins the base-{pageId} room on mount,
+// leaves on unmount, and reconciles React Query caches on inbound events.
+export function useBaseSocket(pageId: string | undefined): void {
+  const socket = useAtomValue(socketAtom);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!socket || !pageId) return;
+
+    socket.emit("message", { operation: "base:subscribe", pageId });
+
+    const handler = (raw: unknown) => {
+      if (!raw || typeof raw !== "object") return;
+      const event = raw as BaseInboundEvent;
+      if (event.pageId !== pageId) return;
+
+      const requestId = (event as any).requestId as string | undefined;
+      if (requestId && outboundRequestIds.has(requestId)) {
+        outboundRequestIds.delete(requestId);
+        return;
+      }
+
+      switch (event.operation) {
+        case "base:row:created": {
+          const e = event as BaseRowCreated;
+          queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
+            { queryKey: ["base-rows", pageId] },
+            (old) => {
+              if (!old) return old;
+              const lastPageIndex = old.pages.length - 1;
+              return {
+                ...old,
+                pages: old.pages.map((page, index) =>
+                  index === lastPageIndex
+                    ? { ...page, items: [...page.items, e.row] }
+                    : page,
+                ),
+              };
+            },
+          );
+          break;
+        }
+        case "base:row:updated": {
+          const e = event as BaseRowUpdated;
+          queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
+            { queryKey: ["base-rows", pageId] },
+            (old) =>
+              !old
+                ? old
+                : {
+                    ...old,
+                    pages: old.pages.map((page) => ({
+                      ...page,
+                      items: page.items.map((row) =>
+                        row.id === e.rowId
+                          ? {
+                              ...row,
+                              cells: { ...row.cells, ...e.updatedCells },
+                            }
+                          : row,
+                      ),
+                    })),
+                  },
+          );
+          break;
+        }
+        case "base:row:deleted": {
+          const e = event as BaseRowDeleted;
+          queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
+            { queryKey: ["base-rows", pageId] },
+            (old) =>
+              !old
+                ? old
+                : {
+                    ...old,
+                    pages: old.pages.map((page) => ({
+                      ...page,
+                      items: page.items.filter((row) => row.id !== e.rowId),
+                    })),
+                  },
+          );
+          const store = getDefaultStore();
+          const selectedIdsAtom = selectedRowIdsAtomFamily(pageId);
+          const current = store.get(selectedIdsAtom);
+          if (current.has(e.rowId)) {
+            const next = new Set(current);
+            next.delete(e.rowId);
+            store.set(selectedIdsAtom, next);
+          }
+          break;
+        }
+        case "base:rows:deleted": {
+          const e = event as BaseRowsDeleted;
+          const removeSet = new Set(e.rowIds);
+          queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
+            { queryKey: ["base-rows", pageId] },
+            (old) => {
+              if (!old) return old;
+              return {
+                ...old,
+                pages: old.pages.map((page) => ({
+                  ...page,
+                  items: page.items.filter((row) => !removeSet.has(row.id)),
+                })),
+              };
+            },
+          );
+          const store = getDefaultStore();
+          const selectedIdsAtom = selectedRowIdsAtomFamily(pageId);
+          const current = store.get(selectedIdsAtom);
+          if (current.size > 0) {
+            let changed = false;
+            const next = new Set(current);
+            for (const id of e.rowIds) {
+              if (next.delete(id)) changed = true;
+            }
+            if (changed) store.set(selectedIdsAtom, next);
+          }
+          break;
+        }
+        case "base:row:reordered": {
+          const e = event as BaseRowReordered;
+          queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
+            { queryKey: ["base-rows", pageId] },
+            (old) =>
+              !old
+                ? old
+                : {
+                    ...old,
+                    pages: old.pages.map((page) => ({
+                      ...page,
+                      items: page.items.map((row) =>
+                        row.id === e.rowId
+                          ? { ...row, position: e.position }
+                          : row,
+                      ),
+                    })),
+                  },
+          );
+          break;
+        }
+        case "base:rows:updated": {
+          const e = event as BaseRowsUpdated;
+          // Only refetch if the batch touches rows currently in cache; formula
+          // backfills emit one event per 500 rows so this avoids redundant fetches.
+          const updatedIds = new Set(e.rowIds);
+          const caches = queryClient.getQueriesData<
+            InfiniteData<IPagination<IBaseRow>>
+          >({ queryKey: ["base-rows", pageId] });
+          let touchesCache = false;
+          outer: for (const [, data] of caches) {
+            if (!data) continue;
+            for (const page of data.pages) {
+              for (const row of page.items) {
+                if (updatedIds.has(row.id)) {
+                  touchesCache = true;
+                  break outer;
+                }
+              }
+            }
+          }
+          if (touchesCache) {
+            queryClient.invalidateQueries({ queryKey: ["base-rows", pageId] });
+          }
+          break;
+        }
+        case "base:schema:bumped": {
+          // Worker committed a type conversion or cell GC; re-fetch under the new schema.
+          queryClient.invalidateQueries({ queryKey: ["base-rows", pageId] });
+          queryClient.invalidateQueries({ queryKey: ["bases", pageId] });
+          break;
+        }
+        case "base:subscribed": {
+          const e = event as BaseSubscribed;
+          const cached = queryClient.getQueryData<IBase>(["bases", pageId]);
+          if (cached && cached.baseSchemaVersion !== e.schemaVersion) {
+            queryClient.invalidateQueries({ queryKey: ["base-rows", pageId] });
+            queryClient.invalidateQueries({ queryKey: ["bases", pageId] });
+          }
+          break;
+        }
+        case "base:formula:recompute:started": {
+          const e = event as BaseFormulaRecomputeStarted;
+          const store = getDefaultStore();
+          store.set(formulaRecomputeAtom, {
+            ...store.get(formulaRecomputeAtom),
+            [e.jobId]: e.propertyIds,
+          });
+          break;
+        }
+        case "base:formula:recompute:completed": {
+          const e = event as BaseFormulaRecomputeCompleted;
+          const store = getDefaultStore();
+          const current = store.get(formulaRecomputeAtom);
+          if (e.jobId in current) {
+            const next = { ...current };
+            delete next[e.jobId];
+            store.set(formulaRecomputeAtom, next);
+          }
+          break;
+        }
+        case "base:property:created":
+        case "base:property:updated":
+        case "base:property:deleted":
+        case "base:property:reordered":
+        case "base:view:created":
+        case "base:view:updated":
+        case "base:view:deleted": {
+          // Schema/metadata events only affect properties/views, not cell data.
+          queryClient.invalidateQueries({ queryKey: ["bases", pageId] });
+          break;
+        }
+        default:
+          break;
+      }
+    };
+
+    socket.on("message", handler);
+
+    return () => {
+      socket.off("message", handler);
+      socket.emit("message", { operation: "base:unsubscribe", pageId });
+    };
+  }, [socket, pageId, queryClient]);
+}
diff --git a/apps/client/src/ee/base/hooks/use-base-table.ts b/apps/client/src/ee/base/hooks/use-base-table.ts
new file mode 100644
index 000000000..787babd81
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-base-table.ts
@@ -0,0 +1,376 @@
+import { useMemo, useCallback, useRef, useState, useEffect } from "react";
+import { useMediaQuery } from "@mantine/hooks";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  createColumnHelper,
+  ColumnDef,
+  SortingState,
+  ColumnSizingState,
+  VisibilityState,
+  ColumnOrderState,
+  ColumnPinningState,
+  Table,
+} from "@tanstack/react-table";
+import {
+  IBase,
+  IBaseProperty,
+  IBaseRow,
+  IBaseView,
+  ViewConfig,
+  ViewConfigPatch,
+} from "@/ee/base/types/base.types";
+import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
+import { systemAccessorFor } from "@/ee/base/property-types/property-type.registry";
+
+const DEFAULT_COLUMN_WIDTH = 180;
+const MIN_COLUMN_WIDTH = 80;
+const MAX_COLUMN_WIDTH = 600;
+const ROW_NUMBER_COLUMN_WIDTH = 64;
+
+const columnHelper = createColumnHelper<IBaseRow>();
+
+function buildColumns(properties: IBaseProperty[]): ColumnDef<IBaseRow, unknown>[] {
+  const rowNumberColumn = columnHelper.display({
+    id: "__row_number",
+    header: "#",
+    size: ROW_NUMBER_COLUMN_WIDTH,
+    minSize: ROW_NUMBER_COLUMN_WIDTH,
+    maxSize: ROW_NUMBER_COLUMN_WIDTH,
+    enableResizing: false,
+    enableSorting: false,
+    enableHiding: false,
+  });
+
+  const propertyColumns = properties.map((property) => {
+    const sysAccessor = systemAccessorFor(property.type);
+    if (sysAccessor) {
+      return columnHelper.accessor(sysAccessor, {
+        id: property.id,
+        header: property.name,
+        size: DEFAULT_COLUMN_WIDTH,
+        minSize: MIN_COLUMN_WIDTH,
+        maxSize: MAX_COLUMN_WIDTH,
+        enableResizing: true,
+        enableSorting: false,
+        enableHiding: !property.isPrimary,
+        meta: { property },
+      });
+    }
+
+    return columnHelper.accessor((row) => row.cells[property.id], {
+      id: property.id,
+      header: property.name,
+      size: DEFAULT_COLUMN_WIDTH,
+      minSize: MIN_COLUMN_WIDTH,
+      maxSize: MAX_COLUMN_WIDTH,
+      enableResizing: true,
+      enableSorting: true,
+      enableHiding: !property.isPrimary,
+      meta: { property },
+    });
+  });
+
+  return [rowNumberColumn, ...propertyColumns];
+}
+
+function buildSortingState(config: ViewConfig | undefined): SortingState {
+  if (!config?.sorts?.length) return [];
+  return config.sorts.map((sort) => ({
+    id: sort.propertyId,
+    desc: sort.direction === "desc",
+  }));
+}
+
+function buildColumnSizing(
+  config: ViewConfig | undefined,
+): ColumnSizingState {
+  const sizing: ColumnSizingState = {
+    __row_number: ROW_NUMBER_COLUMN_WIDTH,
+  };
+  if (config?.propertyWidths) {
+    Object.entries(config.propertyWidths).forEach(([id, width]) => {
+      sizing[id] = width;
+    });
+  }
+  return sizing;
+}
+
+function buildColumnVisibility(
+  config: ViewConfig | undefined,
+  properties: IBaseProperty[],
+): VisibilityState {
+  const visibility: VisibilityState = { __row_number: true };
+
+  if (config?.hiddenPropertyIds) {
+    const hiddenSet = new Set(config.hiddenPropertyIds);
+    properties.forEach((p) => {
+      visibility[p.id] = !hiddenSet.has(p.id);
+    });
+    return visibility;
+  }
+
+  if (config?.visiblePropertyIds?.length) {
+    const visibleSet = new Set(config.visiblePropertyIds);
+    properties.forEach((p) => {
+      visibility[p.id] = visibleSet.has(p.id);
+    });
+    return visibility;
+  }
+
+  properties.forEach((p) => {
+    visibility[p.id] = true;
+  });
+  return visibility;
+}
+
+function buildColumnOrder(
+  config: ViewConfig | undefined,
+  properties: IBaseProperty[],
+): ColumnOrderState {
+  if (config?.propertyOrder?.length) {
+    const orderSet = new Set(config.propertyOrder);
+    const missing = properties
+      .filter((p) => !orderSet.has(p.id))
+      .sort((a, b) => (a.position < b.position ? -1 : a.position > b.position ? 1 : 0))
+      .map((p) => p.id);
+    return ["__row_number", ...config.propertyOrder, ...missing];
+  }
+  const sorted = [...properties].sort((a, b) => {
+    if (a.isPrimary) return -1;
+    if (b.isPrimary) return 1;
+    return a.position < b.position ? -1 : a.position > b.position ? 1 : 0;
+  });
+  return ["__row_number", ...sorted.map((p) => p.id)];
+}
+
+function buildColumnPinning(
+  properties: IBaseProperty[],
+  pinPrimary: boolean,
+): ColumnPinningState {
+  const primary = pinPrimary ? properties.find((p) => p.isPrimary) : undefined;
+  return {
+    left: primary ? ["__row_number", primary.id] : ["__row_number"],
+    right: [],
+  };
+}
+
+export function buildLayoutConfigPatch(table: Table<IBaseRow>): ViewConfigPatch {
+  const state = table.getState();
+
+  const propertyWidths: Record<string, number> = {};
+  Object.entries(state.columnSizing).forEach(([id, width]) => {
+    if (id !== "__row_number") {
+      // Resize state can hold the raw drag value below minSize; rendering
+      // clamps via getSize(), so persist the clamped value too.
+      propertyWidths[id] = Math.min(
+        MAX_COLUMN_WIDTH,
+        Math.max(MIN_COLUMN_WIDTH, width),
+      );
+    }
+  });
+
+  const propertyOrder = state.columnOrder.filter((id) => id !== "__row_number");
+
+  const hiddenPropertyIds = Object.entries(state.columnVisibility)
+    .filter(([id, visible]) => id !== "__row_number" && !visible)
+    .map(([id]) => id);
+
+  return {
+    propertyWidths,
+    propertyOrder,
+    hiddenPropertyIds,
+    visiblePropertyIds: null,
+  };
+}
+
+export type UseBaseTableResult = {
+  table: Table<IBaseRow>;
+  persistViewConfig: () => void;
+};
+
+export function useBaseTable(
+  base: IBase | undefined,
+  rows: IBaseRow[],
+  activeView: IBaseView | undefined,
+): UseBaseTableResult {
+  const updateViewMutation = useUpdateViewMutation();
+  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // While a local edit is pending the reconcile effect preserves local state
+  // to avoid stomping in-flight toggles. When idle it adopts server state so
+  // remote updates from other clients (e.g. hiding a column) show up here.
+  const [hasPendingEdit, setHasPendingEdit] = useState(false);
+
+  const properties = useMemo(() => base?.properties ?? [], [base?.properties]);
+  const viewConfig = activeView?.config;
+
+  const columns = useMemo(
+    () => buildColumns(properties),
+    [properties],
+  );
+
+  const initialSorting = useMemo(
+    () => buildSortingState(viewConfig),
+    [viewConfig],
+  );
+
+  const derivedColumnSizing = useMemo(
+    () => buildColumnSizing(viewConfig),
+    [viewConfig],
+  );
+
+  const derivedColumnOrder = useMemo(
+    () => buildColumnOrder(viewConfig, properties),
+    [viewConfig, properties],
+  );
+
+  const derivedColumnVisibility = useMemo(
+    () => buildColumnVisibility(viewConfig, properties),
+    [viewConfig, properties],
+  );
+
+  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(derivedColumnOrder);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(derivedColumnVisibility);
+  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(derivedColumnSizing);
+
+  // Re-seed from the server only on view switch. Within the same view local
+  // state is the source of truth. Without this guard, any ws-driven
+  // invalidateQueries would land a new derivedColumnVisibility reference and
+  // overwrite a pending toggle before persistViewConfig flushes it.
+  const lastSyncedViewIdRef = useRef<string | undefined>(activeView?.id);
+  useEffect(() => {
+    const currentViewId = activeView?.id;
+
+    if (currentViewId !== lastSyncedViewIdRef.current) {
+      lastSyncedViewIdRef.current = currentViewId;
+      setColumnOrder(derivedColumnOrder);
+      setColumnVisibility(derivedColumnVisibility);
+      setColumnSizing(derivedColumnSizing);
+      return;
+    }
+
+    // Same view: if a local edit is pending, reconcile only the id set so
+    // new/deleted columns appear without stomping the user's toggle.
+    // If no edit is pending, adopt server state so remote updates show up.
+    const validIds = new Set<string>(["__row_number"]);
+    for (const p of properties) validIds.add(p.id);
+
+    if (hasPendingEdit) {
+      setColumnOrder((prev) => {
+        const prevSet = new Set(prev);
+        const kept = prev.filter((id) => validIds.has(id));
+        const appended = derivedColumnOrder.filter(
+          (id) => !prevSet.has(id) && validIds.has(id),
+        );
+        if (appended.length === 0 && kept.length === prev.length) return prev;
+        return [...kept, ...appended];
+      });
+
+      setColumnVisibility((prev) => {
+        let changed = false;
+        const next: VisibilityState = {};
+        for (const [id, visible] of Object.entries(prev)) {
+          if (validIds.has(id)) {
+            next[id] = visible;
+          } else {
+            changed = true;
+          }
+        }
+        for (const id of derivedColumnOrder) {
+          if (!(id in next)) {
+            next[id] = derivedColumnVisibility[id] ?? true;
+            changed = true;
+          }
+        }
+        return changed ? next : prev;
+      });
+
+      setColumnSizing((prev) => {
+        let changed = false;
+        const next: ColumnSizingState = {};
+        for (const [id, width] of Object.entries(prev)) {
+          if (validIds.has(id)) {
+            next[id] = width;
+          } else {
+            changed = true;
+          }
+        }
+        return changed ? next : prev;
+      });
+    } else {
+      setColumnOrder(derivedColumnOrder);
+      setColumnVisibility(derivedColumnVisibility);
+      setColumnSizing(derivedColumnSizing);
+    }
+  }, [
+    activeView?.id,
+    derivedColumnOrder,
+    derivedColumnVisibility,
+    derivedColumnSizing,
+    properties,
+    hasPendingEdit,
+  ]);
+
+  const isMobile = useMediaQuery("(max-width: 48em)", false, {
+    getInitialValueInEffect: false,
+  });
+  const columnPinning = useMemo(
+    () => buildColumnPinning(properties, !isMobile),
+    [properties, isMobile],
+  );
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: {
+      columnPinning,
+      columnOrder,
+      columnVisibility,
+      columnSizing,
+    },
+    onColumnOrderChange: setColumnOrder,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnSizingChange: setColumnSizing,
+    initialState: {
+      sorting: initialSorting,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    columnResizeMode: "onChange",
+    enableColumnResizing: true,
+    enableSorting: true,
+    enableHiding: true,
+    getRowId: (row) => row.id,
+  });
+
+  const persistViewConfig = useCallback(() => {
+    if (!activeView || !base) return;
+
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+    }
+
+    setHasPendingEdit(true);
+
+    persistTimerRef.current = setTimeout(() => {
+      persistTimerRef.current = null;
+      const config = buildLayoutConfigPatch(table);
+      updateViewMutation.mutate(
+        { viewId: activeView.id, pageId: base.id, config },
+        {
+          onSettled: () => {
+            // Only clear if no new debounce was scheduled while in flight.
+            if (persistTimerRef.current === null) {
+              setHasPendingEdit(false);
+            }
+          },
+        },
+      );
+    }, 300);
+  }, [activeView, base, table, updateViewMutation]);
+
+  return { table, persistViewConfig };
+}
diff --git a/apps/client/src/ee/base/hooks/use-column-resize.ts b/apps/client/src/ee/base/hooks/use-column-resize.ts
new file mode 100644
index 000000000..eea46e3e2
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-column-resize.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef, useCallback } from "react";
+import { Table } from "@tanstack/react-table";
+import { IBaseRow } from "@/ee/base/types/base.types";
+
+export function useColumnResize(
+  table: Table<IBaseRow>,
+  onResizeEnd: () => void,
+) {
+  const wasResizingRef = useRef(false);
+
+  const checkResizeEnd = useCallback(() => {
+    const isResizing = table.getState().columnSizingInfo.isResizingColumn;
+    if (wasResizingRef.current && !isResizing) {
+      onResizeEnd();
+    }
+    wasResizingRef.current = !!isResizing;
+  }, [table, onResizeEnd]);
+
+  useEffect(() => {
+    checkResizeEnd();
+  });
+
+  return {
+    isResizing: !!table.getState().columnSizingInfo.isResizingColumn,
+  };
+}
diff --git a/apps/client/src/ee/base/hooks/use-delete-selected-rows.tsx b/apps/client/src/ee/base/hooks/use-delete-selected-rows.tsx
new file mode 100644
index 000000000..a554fbc9b
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-delete-selected-rows.tsx
@@ -0,0 +1,55 @@
+import { useCallback } from "react";
+import { notifications } from "@mantine/notifications";
+import { modals } from "@mantine/modals";
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useDeleteRowsMutation } from "@/ee/base/queries/base-row-query";
+
+const BATCH_SIZE = 500;
+
+export function useDeleteSelectedRows(pageId: string) {
+  const { t } = useTranslation();
+  const { selectedIds, clear } = useRowSelection(pageId);
+  const mutation = useDeleteRowsMutation();
+
+  const runDelete = useCallback(
+    async (ids: string[]) => {
+      const chunks: string[][] = [];
+      for (let i = 0; i < ids.length; i += BATCH_SIZE) {
+        chunks.push(ids.slice(i, i + BATCH_SIZE));
+      }
+      try {
+        for (const chunk of chunks) {
+          await mutation.mutateAsync({ pageId, rowIds: chunk });
+        }
+        notifications.show({
+          message: t("{{count}} rows deleted", { count: ids.length }),
+        });
+        clear();
+      } catch {
+        // mutation onError already shows notification
+      }
+    },
+    [pageId, mutation, clear, t],
+  );
+
+  const deleteSelected = useCallback(() => {
+    const ids = Array.from(selectedIds);
+    if (ids.length === 0) return;
+    modals.openConfirmModal({
+      title: t("Delete {{count}} rows?", { count: ids.length }),
+      centered: true,
+      children: (
+        <Text size="sm">
+          {t("This action cannot be undone.")}
+        </Text>
+      ),
+      labels: { confirm: t("Delete"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => void runDelete(ids),
+    });
+  }, [selectedIds, runDelete, t]);
+
+  return { deleteSelected, isPending: mutation.isPending };
+}
diff --git a/apps/client/src/ee/base/hooks/use-editable-text-cell.ts b/apps/client/src/ee/base/hooks/use-editable-text-cell.ts
new file mode 100644
index 000000000..996d5a3ad
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-editable-text-cell.ts
@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export type UseEditableTextCellParams = {
+  value: unknown;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+  /** value -> the draft string shown in the input when editing begins */
+  toDraft: (value: unknown) => string;
+  /** draft string -> the value passed to onCommit */
+  parse: (draft: string) => unknown;
+};
+
+export type EditableTextCell = {
+  draft: string;
+  setDraft: (draft: string) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+  handleKeyDown: (e: React.KeyboardEvent) => void;
+  handleBlur: () => void;
+};
+
+export function useEditableTextCell({
+  value,
+  isEditing,
+  onCommit,
+  onCancel,
+  toDraft,
+  parse,
+}: UseEditableTextCellParams): EditableTextCell {
+  const [draft, setDraft] = useState(() => toDraft(value));
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+  const wasEditingRef = useRef(false);
+  const toDraftRef = useRef(toDraft);
+  toDraftRef.current = toDraft;
+
+  useEffect(() => {
+    if (isEditing && !wasEditingRef.current) {
+      committedRef.current = false;
+      setDraft(toDraftRef.current(value));
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+    wasEditingRef.current = isEditing;
+  }, [isEditing, value]);
+
+  const commitOnce = useCallback(
+    (val: unknown) => {
+      if (committedRef.current) return;
+      committedRef.current = true;
+      onCommit(val);
+    },
+    [onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitOnce(parse(draft));
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        committedRef.current = true;
+        onCancel();
+      }
+    },
+    [draft, parse, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(parse(draft));
+  }, [draft, parse, commitOnce]);
+
+  return { draft, setDraft, inputRef, handleKeyDown, handleBlur };
+}
diff --git a/apps/client/src/ee/base/hooks/use-formula-parser.ts b/apps/client/src/ee/base/hooks/use-formula-parser.ts
new file mode 100644
index 000000000..19b581860
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-formula-parser.ts
@@ -0,0 +1,107 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  parseRaw,
+  resolve,
+  typecheck,
+  BaseFormulaGraph,
+  type FormulaResultType,
+  type FormulaFn,
+} from "@docmost/base-formula/client";
+import type { IBaseProperty } from "@/ee/base/types/base.types";
+
+type ParseState =
+  | { state: "idle" }
+  | {
+      state: "ok";
+      resultType: FormulaResultType;
+      ast: unknown;
+      dependencies: string[];
+    }
+  | {
+      state: "error";
+      code: string;
+      message: string;
+      span?: { start: number; end: number };
+    };
+
+export function useFormulaParser(
+  source: string,
+  properties: IBaseProperty[],
+  editingPropertyId: string | null,
+  registryForTypecheck: ReadonlyMap<string, FormulaFn>,
+): ParseState {
+  const [state, setState] = useState<ParseState>({ state: "idle" });
+
+  const deps = useMemo(
+    () => ({ source, properties, editingPropertyId, registryForTypecheck }),
+    [source, properties, editingPropertyId, registryForTypecheck],
+  );
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      if (!source.trim()) {
+        setState({ state: "idle" });
+        return;
+      }
+      try {
+        const nameToId = new Map(properties.map((p) => [p.name, p.id]));
+        const raw = parseRaw(source);
+        const resolved = resolve(raw, nameToId);
+        const typeMap = new Map<string, FormulaResultType>(
+          properties.map((p) => [p.id, clientResultTypeOf(p.type)]),
+        );
+        const tc = typecheck(resolved.ast, typeMap, registryForTypecheck);
+        const candidate = {
+          id: editingPropertyId ?? "pending",
+          type: "formula" as const,
+          typeOptions: { dependencies: resolved.dependencies },
+        };
+        const others = editingPropertyId
+          ? properties.filter((p) => p.id !== editingPropertyId)
+          : properties;
+        const graph = new BaseFormulaGraph([...others, candidate as any]);
+        const cycle = graph.detectCycle(candidate as any);
+        if (cycle) {
+          setState({
+            state: "error",
+            code: "CYCLE",
+            message: `Cycle: ${cycle.join(" \u2192 ")}`,
+          });
+          return;
+        }
+        setState({
+          state: "ok",
+          resultType: tc.resultType,
+          ast: resolved.ast,
+          dependencies: resolved.dependencies,
+        });
+      } catch (e: any) {
+        const first = e?.errors?.[0];
+        setState({
+          state: "error",
+          code: first?.code ?? "PARSE_ERROR",
+          message: first?.message ?? e?.message ?? String(e),
+          span: first?.span,
+        });
+      }
+    }, 150);
+    return () => clearTimeout(handle);
+  }, [deps]);
+
+  return state;
+}
+
+function clientResultTypeOf(type: string): FormulaResultType {
+  if (type === "number") return "number";
+  if (
+    type === "text" ||
+    type === "url" ||
+    type === "email" ||
+    type === "longText"
+  )
+    return "string";
+  if (type === "checkbox") return "boolean";
+  if (type === "date" || type === "createdAt" || type === "lastEditedAt")
+    return "date";
+  return "null";
+}
diff --git a/apps/client/src/ee/base/hooks/use-grid-autoscroll.ts b/apps/client/src/ee/base/hooks/use-grid-autoscroll.ts
new file mode 100644
index 000000000..324c195b6
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-grid-autoscroll.ts
@@ -0,0 +1,120 @@
+import { type RefObject, useEffect } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { unsafeOverflowAutoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element";
+import { COLUMN_DRAG_TYPE } from "@/ee/base/components/grid/grid-header-cell";
+import { ROW_DRAG_TYPE } from "@/ee/base/components/grid/grid-row";
+
+const HEADER_BAND_REACH_PX = 60;
+const EDGE_OUTWARD_REACH_PX = 80;
+
+const EARLY_PAN_MARGIN_PX = 100;
+const MIN_PAN_SPEED_PX = 3;
+const MAX_PAN_SPEED_PX = 16;
+
+export function useGridAutoScroll<T extends HTMLElement>(
+  bodyRef: RefObject<T | null>,
+  pageId: string,
+): void {
+  useEffect(() => {
+    const element = bodyRef.current;
+    if (!element) return;
+
+    let rafId = 0;
+    let pointerX: number | null = null;
+    // Captured once at drag start: cursor-to-column-left-edge distance and column width.
+    let grabOffsetX = 0;
+    let columnWidth = 0;
+
+    let lockedScrollLeft: number | null = null;
+    const keepHorizontalScroll = () => {
+      if (lockedScrollLeft !== null && element.scrollLeft !== lockedScrollLeft) {
+        element.scrollLeft = lockedScrollLeft;
+      }
+    };
+
+    function speedForDepth(distanceFromEdge: number): number {
+      const depth = Math.min(1, (EARLY_PAN_MARGIN_PX - distanceFromEdge) / EARLY_PAN_MARGIN_PX);
+      return MIN_PAN_SPEED_PX + (MAX_PAN_SPEED_PX - MIN_PAN_SPEED_PX) * depth;
+    }
+
+    function pan() {
+      if (pointerX === null) {
+        rafId = 0;
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      const columnLeft = pointerX - grabOffsetX;
+      const columnRight = columnLeft + columnWidth;
+      const fromLeft = columnLeft - rect.left;
+      const fromRight = rect.right - columnRight;
+      let delta = 0;
+      if (fromLeft < EARLY_PAN_MARGIN_PX) {
+        delta = -speedForDepth(fromLeft);
+      } else if (fromRight < EARLY_PAN_MARGIN_PX) {
+        delta = speedForDepth(fromRight);
+      }
+      if (delta !== 0) element.scrollLeft += delta;
+      rafId = requestAnimationFrame(pan);
+    }
+
+    return combine(
+      autoScrollForElements({
+        element,
+        canScroll: ({ source }) =>
+          source.data?.type === COLUMN_DRAG_TYPE &&
+          source.data?.pageId === pageId,
+        getAllowedAxis: () => "horizontal" as const,
+      }),
+      unsafeOverflowAutoScrollForElements({
+        element,
+        canScroll: ({ source }) =>
+          source.data?.type === COLUMN_DRAG_TYPE &&
+          source.data?.pageId === pageId,
+        getAllowedAxis: () => "horizontal" as const,
+        getOverflow: () => ({
+          forLeftEdge: { left: EDGE_OUTWARD_REACH_PX, top: HEADER_BAND_REACH_PX },
+          forRightEdge: { right: EDGE_OUTWARD_REACH_PX, top: HEADER_BAND_REACH_PX },
+        }),
+      }),
+      monitorForElements({
+        canMonitor: ({ source }) =>
+          source.data?.type === COLUMN_DRAG_TYPE && source.data?.pageId === pageId,
+        onDragStart: ({ location, source }) => {
+          const cr = source.element.getBoundingClientRect();
+          grabOffsetX = location.current.input.clientX - cr.left;
+          columnWidth = cr.width;
+          pointerX = location.current.input.clientX;
+          if (rafId === 0) rafId = requestAnimationFrame(pan);
+        },
+        onDrag: ({ location }) => {
+          pointerX = location.current.input.clientX;
+        },
+        onDrop: () => {
+          pointerX = null;
+          if (rafId !== 0) {
+            cancelAnimationFrame(rafId);
+            rafId = 0;
+          }
+        },
+      }),
+      monitorForElements({
+        canMonitor: ({ source }) =>
+          source.data?.type === ROW_DRAG_TYPE && source.data?.pageId === pageId,
+        onDragStart: () => {
+          lockedScrollLeft = element.scrollLeft;
+          element.addEventListener("scroll", keepHorizontalScroll);
+        },
+        onDrop: () => {
+          element.removeEventListener("scroll", keepHorizontalScroll);
+          lockedScrollLeft = null;
+        },
+      }),
+      () => {
+        if (rafId !== 0) cancelAnimationFrame(rafId);
+        element.removeEventListener("scroll", keepHorizontalScroll);
+      },
+    );
+  }, [bodyRef, pageId]);
+}
diff --git a/apps/client/src/ee/base/hooks/use-grid-keyboard-nav.ts b/apps/client/src/ee/base/hooks/use-grid-keyboard-nav.ts
new file mode 100644
index 000000000..0c4efde5c
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-grid-keyboard-nav.ts
@@ -0,0 +1,120 @@
+import { useCallback, useEffect } from "react";
+import { Table } from "@tanstack/react-table";
+import { IBaseRow, EditingCell } from "@/ee/base/types/base.types";
+
+type UseGridKeyboardNavOptions = {
+  table: Table<IBaseRow>;
+  editingCell: EditingCell;
+  setEditingCell: (cell: EditingCell) => void;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export function useGridKeyboardNav({
+  table,
+  editingCell,
+  setEditingCell,
+  containerRef,
+}: UseGridKeyboardNavOptions) {
+  const getNavigableColumns = useCallback(() => {
+    return table
+      .getVisibleLeafColumns()
+      .filter((col) => col.id !== "__row_number")
+      .map((col) => col.id);
+  }, [table]);
+
+  const getRowIds = useCallback(() => {
+    return table.getRowModel().rows.map((row) => row.id);
+  }, [table]);
+
+  const navigate = useCallback(
+    (rowDelta: number, colDelta: number) => {
+      if (!editingCell) return;
+
+      const columns = getNavigableColumns();
+      const rowIds = getRowIds();
+
+      const currentColIndex = columns.indexOf(editingCell.propertyId);
+      const currentRowIndex = rowIds.indexOf(editingCell.rowId);
+
+      if (currentColIndex === -1 || currentRowIndex === -1) return;
+
+      let nextColIndex = currentColIndex + colDelta;
+      let nextRowIndex = currentRowIndex + rowDelta;
+
+      if (nextColIndex < 0) {
+        nextColIndex = columns.length - 1;
+        nextRowIndex -= 1;
+      } else if (nextColIndex >= columns.length) {
+        nextColIndex = 0;
+        nextRowIndex += 1;
+      }
+
+      if (nextRowIndex < 0 || nextRowIndex >= rowIds.length) return;
+
+      // Blur fires onBlur->commit before React unmounts the input
+      (document.activeElement as HTMLElement | null)?.blur();
+
+      setEditingCell({
+        rowId: rowIds[nextRowIndex],
+        propertyId: columns[nextColIndex],
+      });
+    },
+    [editingCell, getNavigableColumns, getRowIds, setEditingCell],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!editingCell) return;
+
+      const target = e.target as HTMLElement;
+      const isInputActive =
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable;
+
+      switch (e.key) {
+        case "ArrowUp":
+          if (!isInputActive) {
+            e.preventDefault();
+            navigate(-1, 0);
+          }
+          break;
+        case "ArrowDown":
+          if (!isInputActive) {
+            e.preventDefault();
+            navigate(1, 0);
+          }
+          break;
+        case "ArrowLeft":
+          if (!isInputActive) {
+            e.preventDefault();
+            navigate(0, -1);
+          }
+          break;
+        case "ArrowRight":
+          if (!isInputActive) {
+            e.preventDefault();
+            navigate(0, 1);
+          }
+          break;
+        case "Tab":
+          e.preventDefault();
+          navigate(0, e.shiftKey ? -1 : 1);
+          break;
+        case "Escape":
+          e.preventDefault();
+          setEditingCell(null);
+          break;
+      }
+    },
+    [editingCell, navigate, setEditingCell],
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener("keydown", handleKeyDown);
+    return () => container.removeEventListener("keydown", handleKeyDown);
+  }, [containerRef, handleKeyDown]);
+}
diff --git a/apps/client/src/ee/base/hooks/use-horizontal-scroll-sync.ts b/apps/client/src/ee/base/hooks/use-horizontal-scroll-sync.ts
new file mode 100644
index 000000000..e559c23c5
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-horizontal-scroll-sync.ts
@@ -0,0 +1,53 @@
+import { type RefObject, useEffect } from "react";
+
+// Keeps the header's scrollLeft in lockstep with the body's. Also converts
+// vertical wheel events on the header into horizontal scroll on the body.
+// Generic so callers can pass useRef<HTMLDivElement>(null) without a cast.
+export function useHorizontalScrollSync<
+  TBody extends HTMLElement,
+  THeader extends HTMLElement,
+>(
+  bodyRef: RefObject<TBody | null>,
+  headerRef: RefObject<THeader | null>,
+): void {
+  useEffect(() => {
+    const body = bodyRef.current;
+    const header = headerRef.current;
+    if (!body || !header) return;
+
+    let rafId = 0;
+
+    const sync = () => {
+      rafId = 0;
+      header.scrollLeft = body.scrollLeft;
+    };
+
+    const onBodyScroll = () => {
+      if (rafId !== 0) return;
+      rafId = requestAnimationFrame(sync);
+    };
+
+    const onHeaderWheel = (e: WheelEvent) => {
+      // Trackpad horizontal-dominant gestures deliver deltaX; let those
+      // flow naturally. Convert vertical ticks into horizontal pan.
+      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+      if (e.deltaY === 0) return;
+      // preventDefault suppresses the default vertical scroll (requires
+      // non-passive listener, configured below).
+      e.preventDefault();
+      body.scrollLeft += e.deltaY;
+    };
+
+    body.addEventListener("scroll", onBodyScroll, { passive: true });
+    header.addEventListener("wheel", onHeaderWheel, { passive: false });
+
+    // Initial sync in case the body is already scrolled when the hook mounts.
+    header.scrollLeft = body.scrollLeft;
+
+    return () => {
+      body.removeEventListener("scroll", onBodyScroll);
+      header.removeEventListener("wheel", onHeaderWheel);
+      if (rafId !== 0) cancelAnimationFrame(rafId);
+    };
+  }, [bodyRef, headerRef]);
+}
diff --git a/apps/client/src/ee/base/hooks/use-list-keyboard-nav.ts b/apps/client/src/ee/base/hooks/use-list-keyboard-nav.ts
new file mode 100644
index 000000000..f25d8b4a8
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-list-keyboard-nav.ts
@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type UseListKeyboardNavResult = {
+  activeIndex: number;
+  setActiveIndex: (idx: number) => void;
+  handleNavKey: (e: React.KeyboardEvent) => boolean;
+  setOptionRef: (idx: number) => (el: HTMLElement | null) => void;
+};
+
+export function useListKeyboardNav(
+  itemCount: number,
+  resetDeps: ReadonlyArray<unknown>,
+): UseListKeyboardNavResult {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const optionRefs = useRef<Array<HTMLElement | null>>([]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { setActiveIndex(-1); }, resetDeps);
+
+  useEffect(() => {
+    if (activeIndex < 0) return;
+    const el = optionRefs.current[activeIndex];
+    if (el) el.scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
+
+  const setOptionRef = useCallback(
+    (idx: number) => (el: HTMLElement | null) => {
+      optionRefs.current[idx] = el;
+    },
+    [],
+  );
+
+  const handleNavKey = useCallback(
+    (e: React.KeyboardEvent): boolean => {
+      if (itemCount === 0) return false;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((idx) => (idx < itemCount - 1 ? idx + 1 : 0));
+        return true;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((idx) => (idx <= 0 ? itemCount - 1 : idx - 1));
+        return true;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(0);
+        return true;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        setActiveIndex(itemCount - 1);
+        return true;
+      }
+      return false;
+    },
+    [itemCount],
+  );
+
+  return { activeIndex, setActiveIndex, handleNavKey, setOptionRef };
+}
diff --git a/apps/client/src/ee/base/hooks/use-person-search.ts b/apps/client/src/ee/base/hooks/use-person-search.ts
new file mode 100644
index 000000000..d08ced710
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-person-search.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { useDebouncedValue } from "@mantine/hooks";
+import { searchSuggestions } from "@/features/search/services/search-service";
+
+export type PersonSuggestion = {
+  id: string;
+  name: string | null;
+  email: string | null;
+  avatarUrl: string | null;
+};
+
+export function usePersonSearch(
+  search: string,
+  enabled: boolean,
+): PersonSuggestion[] {
+  const [debounced] = useDebouncedValue(search, 250);
+  const trimmed = debounced.trim();
+  const { data = [] } = useQuery({
+    queryKey: ["bases", "persons", "search", trimmed],
+    queryFn: async () => {
+      const res = await searchSuggestions({
+        query: trimmed,
+        includeUsers: true,
+        limit: trimmed ? 25 : 10,
+      });
+      return (res.users ?? []) as PersonSuggestion[];
+    },
+    enabled,
+    staleTime: 15_000,
+  });
+  return data;
+}
diff --git a/apps/client/src/ee/base/hooks/use-row-autoscroll.ts b/apps/client/src/ee/base/hooks/use-row-autoscroll.ts
new file mode 100644
index 000000000..b1ce9c4e2
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-row-autoscroll.ts
@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import {
+  autoScrollForElements,
+  autoScrollWindowForElements,
+} from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { ROW_DRAG_TYPE } from "@/ee/base/components/grid/grid-row";
+
+export function useRowAutoScroll(
+  scrollElement: HTMLElement | Window | null,
+  pageId: string,
+): void {
+  useEffect(() => {
+    if (!scrollElement) return;
+    if (scrollElement === window) {
+      return autoScrollWindowForElements({
+        canScroll: ({ source }) =>
+          source.data?.type === ROW_DRAG_TYPE && source.data?.pageId === pageId,
+        getAllowedAxis: () => "vertical" as const,
+      });
+    }
+    return autoScrollForElements({
+      element: scrollElement as HTMLElement,
+      canScroll: ({ source }) =>
+        source.data?.type === ROW_DRAG_TYPE && source.data?.pageId === pageId,
+      getAllowedAxis: () => "vertical" as const,
+    });
+  }, [scrollElement, pageId]);
+}
diff --git a/apps/client/src/ee/base/hooks/use-row-detail-modal.ts b/apps/client/src/ee/base/hooks/use-row-detail-modal.ts
new file mode 100644
index 000000000..93f195b63
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-row-detail-modal.ts
@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+
+const PARAM = "row";
+
+export function useRowDetailModal() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const openRowId = searchParams.get(PARAM);
+
+  const openRow = useCallback(
+    (rowId: string, options?: { replace?: boolean }) => {
+      const next = new URLSearchParams(searchParams);
+      next.set(PARAM, rowId);
+      // Prev/next inside the modal replaces the entry so Back leaves the
+      // modal instead of replaying every visited record.
+      setSearchParams(next, { replace: options?.replace ?? false });
+    },
+    [searchParams, setSearchParams],
+  );
+
+  const closeRow = useCallback(() => {
+    const next = new URLSearchParams(searchParams);
+    next.delete(PARAM);
+    setSearchParams(next, { replace: false });
+  }, [searchParams, setSearchParams]);
+
+  return { openRowId, openRow, closeRow };
+}
diff --git a/apps/client/src/ee/base/hooks/use-row-selection.ts b/apps/client/src/ee/base/hooks/use-row-selection.ts
new file mode 100644
index 000000000..e5d9d0bf7
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-row-selection.ts
@@ -0,0 +1,101 @@
+import { useCallback } from "react";
+import { useAtom } from "jotai";
+import {
+  selectedRowIdsAtomFamily,
+  lastToggledRowIndexAtomFamily,
+} from "@/ee/base/atoms/base-atoms";
+
+type ToggleOpts = {
+  shiftKey: boolean;
+  rowIndex: number;
+  orderedRowIds: string[];
+};
+
+export function useRowSelection(pageId: string) {
+  const [selectedIds, setSelectedIds] = useAtom(
+    selectedRowIdsAtomFamily(pageId),
+  ) as unknown as [
+    Set<string>,
+    (val: Set<string> | ((prev: Set<string>) => Set<string>)) => void,
+  ];
+  const [lastToggledIndex, setLastToggledIndex] = useAtom(
+    lastToggledRowIndexAtomFamily(pageId),
+  ) as unknown as [number | null, (val: number | null) => void];
+
+  const isSelected = useCallback(
+    (rowId: string) => selectedIds.has(rowId),
+    [selectedIds],
+  );
+
+  const toggle = useCallback(
+    (rowId: string, opts: ToggleOpts) => {
+      const { shiftKey, rowIndex, orderedRowIds } = opts;
+      const next = new Set(selectedIds);
+
+      if (shiftKey && lastToggledIndex !== null && lastToggledIndex !== rowIndex) {
+        const start = Math.min(lastToggledIndex, rowIndex);
+        const end = Math.max(lastToggledIndex, rowIndex);
+        const anchorId = orderedRowIds[lastToggledIndex];
+        const turnOn = anchorId ? next.has(anchorId) : true;
+        for (let i = start; i <= end; i += 1) {
+          const id = orderedRowIds[i];
+          if (!id) continue;
+          if (turnOn) next.add(id);
+          else next.delete(id);
+        }
+      } else {
+        if (next.has(rowId)) next.delete(rowId);
+        else next.add(rowId);
+      }
+
+      setSelectedIds(next);
+      setLastToggledIndex(rowIndex);
+    },
+    [selectedIds, lastToggledIndex, setSelectedIds, setLastToggledIndex],
+  );
+
+  const toggleAll = useCallback(
+    (loadedRowIds: string[]) => {
+      if (loadedRowIds.length === 0) return;
+      const allSelected = loadedRowIds.every((id) => selectedIds.has(id));
+      if (allSelected) {
+        setSelectedIds(new Set());
+      } else {
+        setSelectedIds(new Set(loadedRowIds));
+      }
+      setLastToggledIndex(null);
+    },
+    [selectedIds, setSelectedIds, setLastToggledIndex],
+  );
+
+  const clear = useCallback(() => {
+    setSelectedIds(new Set());
+    setLastToggledIndex(null);
+  }, [setSelectedIds, setLastToggledIndex]);
+
+  const removeIds = useCallback(
+    (rowIds: string[]) => {
+      if (rowIds.length === 0) return;
+      setSelectedIds((prev) => {
+        if (prev.size === 0) return prev;
+        let changed = false;
+        const next = new Set(prev);
+        for (const id of rowIds) {
+          if (next.delete(id)) changed = true;
+        }
+        return changed ? next : prev;
+      });
+    },
+    [setSelectedIds],
+  );
+
+  return {
+    selectedIds,
+    selectionCount: selectedIds.size,
+    isSelected,
+    toggle,
+    toggleAll,
+    clear,
+    removeIds,
+  };
+}
diff --git a/apps/client/src/ee/base/hooks/use-view-draft.ts b/apps/client/src/ee/base/hooks/use-view-draft.ts
new file mode 100644
index 000000000..1f94372fc
--- /dev/null
+++ b/apps/client/src/ee/base/hooks/use-view-draft.ts
@@ -0,0 +1,167 @@
+import { useCallback, useMemo } from "react";
+import { useAtom } from "jotai";
+import { RESET } from "jotai/utils";
+import {
+  BaseViewDraft,
+  FilterGroup,
+  ViewConfig,
+  ViewConfigPatch,
+  ViewSortConfig,
+} from "@/ee/base/types/base.types";
+import { viewDraftAtomFamily } from "@/ee/base/atoms/view-draft-atom";
+
+export type UseViewDraftArgs = {
+  userId: string | undefined;
+  pageId: string | undefined;
+  viewId: string | undefined;
+  baselineFilter: FilterGroup | undefined;
+  baselineSorts: ViewSortConfig[] | undefined;
+};
+
+export type ViewDraftState = {
+  draft: BaseViewDraft | null;
+  effectiveFilter: FilterGroup | undefined;
+  effectiveSorts: ViewSortConfig[] | undefined;
+  isDirty: boolean;
+  setFilter: (filter: FilterGroup | undefined) => void;
+  setSorts: (sorts: ViewSortConfig[] | undefined) => void;
+  reset: () => void;
+  buildPromotedConfig: (baseline: ViewConfig) => ViewConfigPatch;
+};
+
+// JSON-stringify equality suffices for FilterGroup and ViewSortConfig[]: both
+// are pure data trees with stable insertion order, so the same graph always
+// serializes identically. Avoids a deep-equal dependency for two simple types.
+function filterEq(a: FilterGroup | undefined, b: FilterGroup | undefined) {
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+function sortsEq(
+  a: ViewSortConfig[] | undefined,
+  b: ViewSortConfig[] | undefined,
+) {
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+
+export function useViewDraft(args: UseViewDraftArgs): ViewDraftState {
+  const { userId, pageId, viewId, baselineFilter, baselineSorts } = args;
+  const ready = !!(userId && pageId && viewId);
+
+  // Always mount with a stable key so hook order is consistent. Not read/written when not ready.
+  const atomKey = useMemo(
+    () => ({
+      userId: userId ?? "",
+      pageId: pageId ?? "",
+      viewId: viewId ?? "",
+    }),
+    [userId, pageId, viewId],
+  );
+  const [storedDraft, setDraft] = useAtom(viewDraftAtomFamily(atomKey));
+
+  const draft = ready ? storedDraft : null;
+
+  const setFilter = useCallback(
+    (next: FilterGroup | undefined) => {
+      if (!ready) return;
+      const current = storedDraft ?? null;
+      // If a baseline filter exists, clearing to undefined would fall back to it
+      // in effectiveFilter. Persist an empty AND-group to explicitly override it.
+      const mergedFilter =
+        next === undefined && baselineFilter !== undefined
+          ? ({ op: "and", children: [] } as FilterGroup)
+          : next;
+      const mergedSorts = current?.sorts;
+      if (mergedFilter === undefined && (mergedSorts === undefined || mergedSorts === null)) {
+        setDraft(RESET);
+        return;
+      }
+      setDraft({
+        filter: mergedFilter,
+        sorts: mergedSorts,
+        updatedAt: new Date().toISOString(),
+      });
+    },
+    [ready, storedDraft, setDraft, baselineFilter],
+  );
+
+  const setSorts = useCallback(
+    (next: ViewSortConfig[] | undefined) => {
+      if (!ready) return;
+      const current = storedDraft ?? null;
+      const mergedFilter = current?.filter;
+      // If baseline sorts exist, clearing to undefined would fall back to them.
+      // Persist an empty array to explicitly override with no sorts.
+      const mergedSorts =
+        next === undefined && baselineSorts !== undefined && baselineSorts.length > 0
+          ? []
+          : next;
+      if (mergedFilter === undefined && (mergedSorts === undefined || mergedSorts === null)) {
+        setDraft(RESET);
+        return;
+      }
+      setDraft({
+        filter: mergedFilter,
+        sorts: mergedSorts,
+        updatedAt: new Date().toISOString(),
+      });
+    },
+    [ready, storedDraft, setDraft, baselineSorts],
+  );
+
+  const reset = useCallback(() => {
+    if (!ready) return;
+    setDraft(RESET);
+  }, [ready, setDraft]);
+
+  const effectiveFilter = useMemo(
+    () => (draft?.filter !== undefined ? draft.filter : baselineFilter),
+    [draft?.filter, baselineFilter],
+  );
+  const effectiveSorts = useMemo(
+    () => (draft?.sorts !== undefined ? draft.sorts : baselineSorts),
+    [draft?.sorts, baselineSorts],
+  );
+
+  const isDirty = useMemo(() => {
+    if (!draft) return false;
+    const filterDirty =
+      draft.filter !== undefined && !filterEq(draft.filter, baselineFilter);
+    const sortsDirty =
+      draft.sorts !== undefined && !sortsEq(draft.sorts, baselineSorts);
+    return filterDirty || sortsDirty;
+  }, [draft, baselineFilter, baselineSorts]);
+
+  const buildPromotedConfig = useCallback(
+    (baseline: ViewConfig): ViewConfigPatch => ({
+      filter: draft?.filter ?? baseline.filter ?? null,
+      sorts: draft?.sorts ?? baseline.sorts ?? null,
+    }),
+    [draft],
+  );
+
+  if (!ready) {
+    return {
+      draft: null,
+      effectiveFilter: baselineFilter,
+      effectiveSorts: baselineSorts,
+      isDirty: false,
+      setFilter: () => {},
+      setSorts: () => {},
+      reset: () => {},
+      buildPromotedConfig: (baseline) => ({
+        filter: baseline.filter ?? null,
+        sorts: baseline.sorts ?? null,
+      }),
+    };
+  }
+
+  return {
+    draft,
+    effectiveFilter,
+    effectiveSorts,
+    isDirty,
+    setFilter,
+    setSorts,
+    reset,
+    buildPromotedConfig,
+  };
+}
diff --git a/apps/client/src/ee/base/pages/base-page.tsx b/apps/client/src/ee/base/pages/base-page.tsx
new file mode 100644
index 000000000..7f315ee7f
--- /dev/null
+++ b/apps/client/src/ee/base/pages/base-page.tsx
@@ -0,0 +1,35 @@
+import { useParams } from "react-router-dom";
+import { Container, Title, Text, Stack } from "@mantine/core";
+import { BaseView } from "@/ee/base/components/base-view";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+
+export default function BasePage() {
+  const { pageId } = useParams<{ pageId: string }>();
+  const hasBases = useHasFeature(Feature.BASES);
+  const { data: base } = useBaseQuery(pageId ?? "");
+
+  if (!pageId) {
+    return (
+      <Stack align="center" p="xl">
+        <Text c="dimmed">No base ID provided</Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Container
+      fluid
+      p="md"
+      style={{ height: "calc(100vh - 60px)", display: "flex", flexDirection: "column" }}
+    >
+      {base && (
+        <Title order={3} mb="xs">
+          {base.icon ? `${base.icon} ` : ""}{base.name}
+        </Title>
+      )}
+      <BaseView pageId={pageId} editable={hasBases && (base?.canEdit ?? false)} />
+    </Container>
+  );
+}
diff --git a/apps/client/src/ee/base/property-types/property-type.descriptor.ts b/apps/client/src/ee/base/property-types/property-type.descriptor.ts
new file mode 100644
index 000000000..28e9fc275
--- /dev/null
+++ b/apps/client/src/ee/base/property-types/property-type.descriptor.ts
@@ -0,0 +1,41 @@
+import type React from 'react';
+import type { IconLetterT } from '@tabler/icons-react';
+import type {
+  BasePropertyType,
+  IBaseProperty,
+  IBaseRow,
+  TypeOptions,
+} from '@/ee/base/types/base.types';
+
+export type CellComponentProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  /** When true the cell must not write; reveal content read-only. */
+  readOnly?: boolean;
+  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export type FilterInputKind =
+  | 'choices'
+  | 'number'
+  | 'boolean'
+  | 'text'
+  | 'person'
+  | 'date';
+
+export type ClientPropertyTypeDescriptor = {
+  type: BasePropertyType;
+  cellComponent: React.ComponentType<CellComponentProps>;
+  icon: typeof IconLetterT;
+  labelKey: string;
+  filterOperators: string[];
+  filterInput: FilterInputKind;
+  isSystem: boolean;
+  hasOptions: boolean;
+  systemAccessor?: (row: IBaseRow) => unknown;
+  defaultTypeOptions?: () => TypeOptions;
+};
diff --git a/apps/client/src/ee/base/property-types/property-type.registry.tsx b/apps/client/src/ee/base/property-types/property-type.registry.tsx
new file mode 100644
index 000000000..7536177d5
--- /dev/null
+++ b/apps/client/src/ee/base/property-types/property-type.registry.tsx
@@ -0,0 +1,253 @@
+import {
+  IconLetterT,
+  IconAlignLeft,
+  IconHash,
+  IconCircleDot,
+  IconProgressCheck,
+  IconTags,
+  IconCalendar,
+  IconUser,
+  IconPaperclip,
+  IconFileDescription,
+  IconCheckbox,
+  IconLink,
+  IconMail,
+  IconClockPlus,
+  IconClockEdit,
+  IconUserEdit,
+  IconMathFunction,
+} from "@tabler/icons-react";
+import type {
+  BasePropertyType,
+  TypeOptions,
+} from "@/ee/base/types/base.types";
+import { CellText } from "@/ee/base/components/cells/cell-text";
+import { CellLongText } from "@/ee/base/components/cells/cell-long-text";
+import { CellNumber } from "@/ee/base/components/cells/cell-number";
+import { CellSelect } from "@/ee/base/components/cells/cell-select";
+import { CellStatus } from "@/ee/base/components/cells/cell-status";
+import { CellMultiSelect } from "@/ee/base/components/cells/cell-multi-select";
+import { CellDate } from "@/ee/base/components/cells/cell-date";
+import { CellCheckbox } from "@/ee/base/components/cells/cell-checkbox";
+import { CellUrl } from "@/ee/base/components/cells/cell-url";
+import { CellEmail } from "@/ee/base/components/cells/cell-email";
+import { CellPerson } from "@/ee/base/components/cells/cell-person";
+import { CellFile } from "@/ee/base/components/cells/cell-file";
+import { CellPage } from "@/ee/base/components/cells/cell-page";
+import { CellCreatedAt } from "@/ee/base/components/cells/cell-created-at";
+import { CellLastEditedAt } from "@/ee/base/components/cells/cell-last-edited-at";
+import { CellLastEditedBy } from "@/ee/base/components/cells/cell-last-edited-by";
+import { CellFormula } from "@/ee/base/components/cells/cell-formula";
+import { defaultStatusChoices } from "@/ee/base/components/property/choice-editor";
+import type { ClientPropertyTypeDescriptor } from "./property-type.descriptor";
+
+export const PROPERTY_TYPE_REGISTRY: Record<
+  BasePropertyType,
+  ClientPropertyTypeDescriptor
+> = {
+  text: {
+    type: "text",
+    cellComponent: CellText,
+    icon: IconLetterT,
+    labelKey: "Text",
+    filterOperators: ["eq", "neq", "contains", "ncontains", "isEmpty", "isNotEmpty"],
+    filterInput: "text",
+    isSystem: false,
+    hasOptions: true,
+  },
+  longText: {
+    type: "longText",
+    cellComponent: CellLongText,
+    icon: IconAlignLeft,
+    labelKey: "Long text",
+    filterOperators: ["eq", "neq", "contains", "ncontains", "isEmpty", "isNotEmpty"],
+    filterInput: "text",
+    isSystem: false,
+    hasOptions: true,
+  },
+  number: {
+    type: "number",
+    cellComponent: CellNumber,
+    icon: IconHash,
+    labelKey: "Number",
+    filterOperators: ["eq", "neq", "gt", "lt", "isEmpty", "isNotEmpty"],
+    filterInput: "number",
+    isSystem: false,
+    hasOptions: true,
+  },
+  select: {
+    type: "select",
+    cellComponent: CellSelect,
+    icon: IconCircleDot,
+    labelKey: "Select",
+    filterOperators: ["eq", "neq", "any", "none", "isEmpty", "isNotEmpty"],
+    filterInput: "choices",
+    isSystem: false,
+    hasOptions: true,
+  },
+  status: {
+    type: "status",
+    cellComponent: CellStatus,
+    icon: IconProgressCheck,
+    labelKey: "Status",
+    filterOperators: ["eq", "neq", "any", "none", "isEmpty", "isNotEmpty"],
+    filterInput: "choices",
+    isSystem: false,
+    hasOptions: true,
+    defaultTypeOptions: () => {
+      const choices = defaultStatusChoices();
+      return { choices, choiceOrder: choices.map((c) => c.id) };
+    },
+  },
+  multiSelect: {
+    type: "multiSelect",
+    cellComponent: CellMultiSelect,
+    icon: IconTags,
+    labelKey: "Multi-select",
+    filterOperators: ["any", "none", "isEmpty", "isNotEmpty"],
+    filterInput: "choices",
+    isSystem: false,
+    hasOptions: true,
+  },
+  date: {
+    type: "date",
+    cellComponent: CellDate,
+    icon: IconCalendar,
+    labelKey: "Date",
+    filterOperators: ["eq", "before", "after", "onOrBefore", "onOrAfter", "isWithin", "isEmpty", "isNotEmpty"],
+    filterInput: "date",
+    isSystem: false,
+    hasOptions: true,
+  },
+  person: {
+    type: "person",
+    cellComponent: CellPerson,
+    icon: IconUser,
+    labelKey: "Person",
+    filterOperators: ["eq", "neq", "any", "none", "isEmpty", "isNotEmpty"],
+    filterInput: "person",
+    isSystem: false,
+    hasOptions: true,
+  },
+  file: {
+    type: "file",
+    cellComponent: CellFile,
+    icon: IconPaperclip,
+    labelKey: "File",
+    filterOperators: ["isEmpty", "isNotEmpty"],
+    filterInput: "text",
+    isSystem: false,
+    hasOptions: false,
+  },
+  formula: {
+    type: "formula",
+    cellComponent: CellFormula,
+    icon: IconMathFunction,
+    labelKey: "Formula",
+    filterOperators: ["eq", "neq", "isEmpty", "isNotEmpty"],
+    filterInput: "text",
+    isSystem: true,
+    hasOptions: false,
+  },
+  page: {
+    type: "page",
+    cellComponent: CellPage,
+    icon: IconFileDescription,
+    labelKey: "Page",
+    filterOperators: ["isEmpty", "isNotEmpty"],
+    filterInput: "text",
+    isSystem: false,
+    hasOptions: false,
+  },
+  checkbox: {
+    type: "checkbox",
+    cellComponent: CellCheckbox,
+    icon: IconCheckbox,
+    labelKey: "Checkbox",
+    filterOperators: ["eq", "isEmpty", "isNotEmpty"],
+    filterInput: "boolean",
+    isSystem: false,
+    hasOptions: true,
+  },
+  url: {
+    type: "url",
+    cellComponent: CellUrl,
+    icon: IconLink,
+    labelKey: "URL",
+    filterOperators: ["eq", "neq", "contains", "ncontains", "isEmpty", "isNotEmpty"],
+    filterInput: "text",
+    isSystem: false,
+    hasOptions: true,
+  },
+  email: {
+    type: "email",
+    cellComponent: CellEmail,
+    icon: IconMail,
+    labelKey: "Email",
+    filterOperators: ["eq", "neq", "contains", "ncontains", "isEmpty", "isNotEmpty"],
+    filterInput: "text",
+    isSystem: false,
+    hasOptions: true,
+  },
+  createdAt: {
+    type: "createdAt",
+    cellComponent: CellCreatedAt,
+    icon: IconClockPlus,
+    labelKey: "Created at",
+    filterOperators: ["eq", "before", "after", "onOrBefore", "onOrAfter", "isWithin", "isEmpty", "isNotEmpty"],
+    filterInput: "date",
+    isSystem: true,
+    hasOptions: false,
+    systemAccessor: (row) => row.createdAt,
+  },
+  lastEditedAt: {
+    type: "lastEditedAt",
+    cellComponent: CellLastEditedAt,
+    icon: IconClockEdit,
+    labelKey: "Last edited at",
+    filterOperators: ["eq", "before", "after", "onOrBefore", "onOrAfter", "isWithin", "isEmpty", "isNotEmpty"],
+    filterInput: "date",
+    isSystem: true,
+    hasOptions: false,
+    systemAccessor: (row) => row.updatedAt,
+  },
+  lastEditedBy: {
+    type: "lastEditedBy",
+    cellComponent: CellLastEditedBy,
+    icon: IconUserEdit,
+    labelKey: "Last edited by",
+    filterOperators: ["eq", "neq", "any", "none", "isEmpty", "isNotEmpty"],
+    filterInput: "person",
+    isSystem: true,
+    hasOptions: false,
+    systemAccessor: (row) => row.lastUpdatedById ?? row.creatorId,
+  },
+};
+
+export function getDescriptor(type: string): ClientPropertyTypeDescriptor | undefined {
+  return (PROPERTY_TYPE_REGISTRY as Record<string, ClientPropertyTypeDescriptor>)[type];
+}
+
+export const SYSTEM_PROPERTY_TYPES: ReadonlySet<string> = new Set(
+  Object.values(PROPERTY_TYPE_REGISTRY).filter((d) => d.isSystem).map((d) => d.type),
+);
+
+export function isSystemPropertyType(type: string): boolean {
+  return SYSTEM_PROPERTY_TYPES.has(type);
+}
+
+export const DEFAULT_FILTER_OPERATORS = ["eq", "neq", "isEmpty", "isNotEmpty"];
+
+export const PROPERTY_PICKER_ORDER: BasePropertyType[] = [
+  "text", "longText", "number", "select", "status", "multiSelect", "date",
+  "person", "file", "formula", "page", "checkbox", "url", "email",
+  "createdAt", "lastEditedAt", "lastEditedBy",
+];
+
+export function systemAccessorFor(type: string) {
+  return getDescriptor(type)?.systemAccessor;
+}
+
+export function defaultTypeOptionsFor(type: string): TypeOptions {
+  return getDescriptor(type)?.defaultTypeOptions?.() ?? ({} as TypeOptions);
+}
diff --git a/apps/client/src/ee/base/queries/base-page-resolver-query.ts b/apps/client/src/ee/base/queries/base-page-resolver-query.ts
new file mode 100644
index 000000000..691e2997f
--- /dev/null
+++ b/apps/client/src/ee/base/queries/base-page-resolver-query.ts
@@ -0,0 +1,61 @@
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { expandPagesBatched } from "./page-expand-loader";
+
+export type ResolvedPage = {
+  id: string;
+  slugId: string;
+  title: string | null;
+  icon: string | null;
+  spaceId: string;
+  space: { id: string; slug: string; name: string } | null;
+};
+
+async function resolvePages(pageIds: string[]): Promise<ResolvedPage[]> {
+  if (pageIds.length === 0) return [];
+  const map = await expandPagesBatched(pageIds);
+  const out: ResolvedPage[] = [];
+  for (const id of pageIds) {
+    const p = map.get(id);
+    if (p) out.push(p);
+  }
+  return out;
+}
+
+// Stable, sorted, deduped list so the query key is consistent regardless of caller ordering.
+function normalize(ids: (string | null | undefined)[]): string[] {
+  const set = new Set<string>();
+  for (const id of ids) {
+    if (typeof id === "string" && id.length > 0) set.add(id);
+  }
+  return Array.from(set).sort();
+}
+
+export type PageResolution = {
+  // Map lookup states: key absent = not requested, undefined = resolving, null = inaccessible, ResolvedPage = accessible.
+  pages: Map<string, ResolvedPage | null | undefined>;
+  isLoading: boolean;
+};
+
+export function useResolvedPages(
+  pageIds: (string | null | undefined)[],
+): PageResolution {
+  const normalized = useMemo(() => normalize(pageIds), [pageIds]);
+
+  const { data, isSuccess, isLoading } = useQuery({
+    queryKey: ["bases", "pages", "expand", normalized],
+    queryFn: () => resolvePages(normalized),
+    enabled: normalized.length > 0,
+    staleTime: 30_000,
+    gcTime: 5 * 60_000,
+  });
+
+  const pages = useMemo(() => {
+    const map = new Map<string, ResolvedPage | null | undefined>();
+    for (const id of normalized) map.set(id, isSuccess ? null : undefined);
+    for (const item of data ?? []) map.set(item.id, item);
+    return map;
+  }, [normalized, data, isSuccess]);
+
+  return { pages, isLoading };
+}
diff --git a/apps/client/src/ee/base/queries/base-property-query.ts b/apps/client/src/ee/base/queries/base-property-query.ts
new file mode 100644
index 000000000..dd0ba85bf
--- /dev/null
+++ b/apps/client/src/ee/base/queries/base-property-query.ts
@@ -0,0 +1,170 @@
+import { InfiniteData, useMutation } from "@tanstack/react-query";
+import {
+  createProperty,
+  updateProperty,
+  deleteProperty,
+  reorderProperty,
+} from "@/ee/base/services/base-service";
+import {
+  IBase,
+  IBaseProperty,
+  IBaseRow,
+  CreatePropertyInput,
+  UpdatePropertyInput,
+  DeletePropertyInput,
+  ReorderPropertyInput,
+  UpdatePropertyResult,
+} from "@/ee/base/types/base.types";
+import { notifications } from "@mantine/notifications";
+import { queryClient } from "@/main";
+import { useTranslation } from "react-i18next";
+import { IPagination } from "@/lib/types";
+
+export function useCreatePropertyMutation() {
+  const { t } = useTranslation();
+  return useMutation<IBaseProperty, Error, CreatePropertyInput>({
+    mutationFn: (data) => createProperty(data),
+    onSuccess: (newProperty) => {
+      queryClient.setQueryData<IBase>(
+        ["bases", newProperty.pageId],
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            properties: [...old.properties, newProperty],
+          };
+        },
+      );
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to create property"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUpdatePropertyMutation() {
+  const { t } = useTranslation();
+  return useMutation<UpdatePropertyResult, Error, UpdatePropertyInput>({
+    mutationFn: (data) => updateProperty(data),
+    onSuccess: (result, variables) => {
+      queryClient.setQueryData<IBase>(
+        ["bases", variables.pageId],
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            properties: old.properties.map((p) =>
+              p.id === result.property.id ? result.property : p,
+            ),
+          };
+        },
+      );
+
+      if (variables.type && !result.jobId) {
+        queryClient.invalidateQueries({
+          queryKey: ["base-rows", variables.pageId],
+        });
+      }
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to update property"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useDeletePropertyMutation() {
+  const { t } = useTranslation();
+  return useMutation<void, Error, DeletePropertyInput>({
+    mutationFn: (data) => deleteProperty(data),
+    onSuccess: (_, variables) => {
+      queryClient.setQueryData<IBase>(
+        ["bases", variables.pageId],
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            properties: old.properties.filter(
+              (p) => p.id !== variables.propertyId,
+            ),
+          };
+        },
+      );
+
+      queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
+        { queryKey: ["base-rows", variables.pageId] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              items: page.items.map((row) => {
+                if (!(variables.propertyId in row.cells)) return row;
+                const { [variables.propertyId]: _, ...rest } = row.cells;
+                return { ...row, cells: rest };
+              }),
+            })),
+          };
+        },
+      );
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to delete property"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useReorderPropertyMutation() {
+  const { t } = useTranslation();
+  return useMutation<void, Error, ReorderPropertyInput, { previous: IBase | undefined }>({
+    mutationFn: (data) => reorderProperty(data),
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({
+        queryKey: ["bases", variables.pageId],
+      });
+
+      const previous = queryClient.getQueryData<IBase>([
+        "bases",
+        variables.pageId,
+      ]);
+
+      queryClient.setQueryData<IBase>(
+        ["bases", variables.pageId],
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            properties: old.properties.map((p) =>
+              p.id === variables.propertyId
+                ? { ...p, position: variables.position }
+                : p,
+            ),
+          };
+        },
+      );
+
+      return { previous };
+    },
+    onError: (_, variables, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(
+          ["bases", variables.pageId],
+          context.previous,
+        );
+      }
+      notifications.show({
+        message: t("Failed to reorder property"),
+        color: "red",
+      });
+    },
+  });
+}
diff --git a/apps/client/src/ee/base/queries/base-query.ts b/apps/client/src/ee/base/queries/base-query.ts
new file mode 100644
index 000000000..ef6a049e1
--- /dev/null
+++ b/apps/client/src/ee/base/queries/base-query.ts
@@ -0,0 +1,126 @@
+import {
+  useMutation,
+  useQuery,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  createBase,
+  getBaseInfo,
+  updateBase,
+  deleteBase,
+  convertPageToBase,
+} from "@/ee/base/services/base-service";
+import {
+  IBase,
+  CreateBaseInput,
+  UpdateBaseInput,
+} from "@/ee/base/types/base.types";
+import { notifications } from "@mantine/notifications";
+import { queryClient } from "@/main";
+import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
+import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SpaceTreeNode } from "@/features/page/tree/types";
+import { socketAtom } from "@/features/websocket/atoms/socket-atom";
+
+export function useBaseQuery(
+  pageId: string | undefined,
+): UseQueryResult<IBase, Error> {
+  return useQuery({
+    queryKey: ["bases", pageId],
+    queryFn: () => getBaseInfo(pageId!),
+    enabled: !!pageId,
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useCreateBaseMutation() {
+  const { t } = useTranslation();
+  return useMutation<IBase, Error, CreateBaseInput>({
+    mutationFn: (data) => createBase(data),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: ["bases", "list", data.spaceId],
+      });
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to create base"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useConvertPageToBaseMutation() {
+  const { t } = useTranslation();
+  const [, setTreeData] = useAtom(treeDataAtom);
+  const [socket] = useAtom(socketAtom);
+
+  return useMutation<IBase, Error, { pageId: string }>({
+    mutationFn: ({ pageId }) => convertPageToBase(pageId),
+    onSuccess: (base) => {
+      queryClient.invalidateQueries({ queryKey: ["pages"] });
+      queryClient.invalidateQueries({
+        queryKey: ["root-sidebar-pages", base.spaceId],
+      });
+      queryClient.invalidateQueries({ queryKey: ["sidebar-pages"] });
+      setTreeData((prev) =>
+        treeModel.update(prev, base.id, { isBase: true } as Partial<SpaceTreeNode>),
+      );
+      socket?.emit("message", {
+        operation: "updateOne",
+        spaceId: base.spaceId,
+        entity: ["pages"],
+        id: base.id,
+        payload: { isBase: true },
+      });
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to create base"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUpdateBaseMutation() {
+  const { t } = useTranslation();
+  return useMutation<IBase, Error, UpdateBaseInput>({
+    mutationFn: (data) => updateBase(data),
+    onSuccess: (data) => {
+      queryClient.setQueryData<IBase>(["bases", data.id], (old) => {
+        if (!old) return old;
+        return { ...old, ...data };
+      });
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to update base"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useDeleteBaseMutation() {
+  const { t } = useTranslation();
+  return useMutation<void, Error, { pageId: string; spaceId: string }>({
+    mutationFn: ({ pageId }) => deleteBase(pageId),
+    onSuccess: (_, { pageId, spaceId }) => {
+      queryClient.removeQueries({ queryKey: ["bases", pageId] });
+      queryClient.invalidateQueries({
+        queryKey: ["bases", "list", spaceId],
+      });
+      notifications.show({ message: t("Base deleted") });
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to delete base"),
+        color: "red",
+      });
+    },
+  });
+}
diff --git a/apps/client/src/ee/base/queries/base-row-query.ts b/apps/client/src/ee/base/queries/base-row-query.ts
new file mode 100644
index 000000000..4d188bc47
--- /dev/null
+++ b/apps/client/src/ee/base/queries/base-row-query.ts
@@ -0,0 +1,396 @@
+import { useMemo } from "react";
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  InfiniteData,
+} from "@tanstack/react-query";
+import {
+  createRow,
+  updateRow,
+  deleteRow,
+  deleteRows,
+  getRowInfo,
+  listRows,
+  reorderRow,
+  countRows,
+  IBaseRowsPage,
+} from "@/ee/base/services/base-service";
+import {
+  IBaseRow,
+  CreateRowInput,
+  UpdateRowInput,
+  DeleteRowInput,
+  DeleteRowsInput,
+  ReorderRowInput,
+  FilterNode,
+  SearchSpec,
+  ViewSortConfig,
+  CountRowsResult,
+  RowReferences,
+} from "@/ee/base/types/base.types";
+import { notifications } from "@mantine/notifications";
+import { queryClient } from "@/main";
+import { useTranslation } from "react-i18next";
+import { useHydrateReferences } from "@/ee/base/reference/reference-store";
+import { markRequestIdOutbound } from "@/ee/base/hooks/use-base-socket";
+import { v7 as uuid7 } from "uuid";
+
+type RowCacheContext = {
+  snapshots: [readonly unknown[], InfiniteData<IBaseRowsPage> | undefined][];
+};
+
+// An empty group filter is the draft-layer's "no predicates" marker (see use-view-draft.ts).
+// Strip it at the query boundary to keep request payloads clean and cache keys stable.
+function normalizeFilter(filter: FilterNode | undefined): FilterNode | undefined {
+  if (!filter) return undefined;
+  if ('children' in filter && filter.children.length === 0) return undefined;
+  return filter;
+}
+
+// Pre-register the requestId as outbound so the socket echo is suppressed by useBaseSocket.
+function newRequestId(): string {
+  const id = uuid7();
+  markRequestIdOutbound(id);
+  return id;
+}
+
+export function useBaseRowsQuery(
+  pageId: string | undefined,
+  filter?: FilterNode,
+  sorts?: ViewSortConfig[],
+  search?: SearchSpec,
+) {
+  const activeFilter = normalizeFilter(filter);
+  const activeSorts = sorts?.length ? sorts : undefined;
+  const activeSearch = search?.query ? search : undefined;
+
+  const query = useInfiniteQuery({
+    queryKey: ["base-rows", pageId, activeFilter, activeSorts, activeSearch],
+    queryFn: ({ pageParam }) =>
+      listRows(pageId!, {
+        cursor: pageParam,
+        limit: 100,
+        filter: activeFilter,
+        sorts: activeSorts,
+        search: activeSearch,
+      }),
+    enabled: !!pageId,
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage: IBaseRowsPage) =>
+      lastPage.meta?.nextCursor ?? undefined,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const refPages = useMemo(
+    () =>
+      (query.data?.pages ?? [])
+        .map((p) => p.references)
+        .filter(Boolean) as RowReferences[],
+    [query.data],
+  );
+  useHydrateReferences(pageId, refPages);
+
+  return query;
+}
+
+export function flattenRows(
+  data: InfiniteData<IBaseRowsPage> | undefined,
+): IBaseRow[] {
+  if (!data) return [];
+  return data.pages.flatMap((page) => page.items);
+}
+
+export function useCreateRowMutation() {
+  const { t } = useTranslation();
+  return useMutation<IBaseRow, Error, CreateRowInput>({
+    mutationFn: (data) => createRow({ ...data, requestId: newRequestId() }),
+    onSuccess: (newRow) => {
+      queryClient.setQueriesData<InfiniteData<IBaseRowsPage>>(
+        { queryKey: ["base-rows", newRow.pageId] },
+        (old) => {
+          if (!old) return old;
+          const lastPageIndex = old.pages.length - 1;
+          return {
+            ...old,
+            pages: old.pages.map((page, index) => {
+              if (index === lastPageIndex) {
+                return { ...page, items: [...page.items, newRow] };
+              }
+              return page;
+            }),
+          };
+        },
+      );
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to create row"),
+        color: "red",
+      });
+    },
+  });
+}
+
+/** Single row by id — for deep links (?row=) pointing outside the loaded
+ *  pages or the active view's filter. No retry: an error means the row is
+ *  gone and the caller should close. */
+export function useBaseRowQuery(
+  pageId: string | undefined,
+  rowId: string | undefined,
+  options?: { enabled?: boolean },
+) {
+  return useQuery<IBaseRow, Error>({
+    queryKey: ["base-row", pageId, rowId],
+    queryFn: () => getRowInfo(rowId!, pageId!),
+    enabled: !!pageId && !!rowId && (options?.enabled ?? true),
+    retry: false,
+  });
+}
+
+export function useUpdateRowMutation() {
+  const { t } = useTranslation();
+  return useMutation<IBaseRow, Error, UpdateRowInput, RowCacheContext>({
+    mutationFn: (data) => updateRow({ ...data, requestId: newRequestId() }),
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({
+        queryKey: ["base-rows", variables.pageId],
+      });
+
+      const snapshots = queryClient.getQueriesData<
+        InfiniteData<IBaseRowsPage>
+      >({ queryKey: ["base-rows", variables.pageId] });
+
+      queryClient.setQueriesData<InfiniteData<IBaseRowsPage>>(
+        { queryKey: ["base-rows", variables.pageId] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              items: page.items.map((row) =>
+                row.id === variables.rowId
+                  ? {
+                      ...row,
+                      cells: { ...row.cells, ...variables.cells },
+                      ...(variables.position !== undefined && {
+                        position: variables.position,
+                      }),
+                    }
+                  : row,
+              ),
+            })),
+          };
+        },
+      );
+
+      queryClient.setQueryData<IBaseRow>(
+        ["base-row", variables.pageId, variables.rowId],
+        (old) =>
+          old
+            ? { ...old, cells: { ...old.cells, ...variables.cells } }
+            : old,
+      );
+
+      return { snapshots };
+    },
+    onError: (_, variables, context) => {
+      if (context?.snapshots) {
+        for (const [key, data] of context.snapshots) {
+          queryClient.setQueryData(key, data);
+        }
+      }
+      queryClient.invalidateQueries({
+        queryKey: ["base-row", variables.pageId, variables.rowId],
+      });
+      notifications.show({
+        message: t("Failed to update row"),
+        color: "red",
+      });
+    },
+    onSuccess: (updatedRow) => {
+      queryClient.setQueriesData<InfiniteData<IBaseRowsPage>>(
+        { queryKey: ["base-rows", updatedRow.pageId] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              items: page.items.map((row) =>
+                row.id === updatedRow.id
+                  ? { ...row, ...updatedRow, cells: { ...row.cells, ...updatedRow.cells } }
+                  : row,
+              ),
+            })),
+          };
+        },
+      );
+      queryClient.setQueryData<IBaseRow>(
+        ["base-row", updatedRow.pageId, updatedRow.id],
+        (old) =>
+          old
+            ? { ...old, ...updatedRow, cells: { ...old.cells, ...updatedRow.cells } }
+            : old,
+      );
+    },
+  });
+}
+
+export function useDeleteRowMutation() {
+  const { t } = useTranslation();
+  return useMutation<void, Error, DeleteRowInput, RowCacheContext>({
+    mutationFn: (data) => deleteRow({ ...data, requestId: newRequestId() }),
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({
+        queryKey: ["base-rows", variables.pageId],
+      });
+
+      const snapshots = queryClient.getQueriesData<
+        InfiniteData<IBaseRowsPage>
+      >({ queryKey: ["base-rows", variables.pageId] });
+
+      queryClient.setQueriesData<InfiniteData<IBaseRowsPage>>(
+        { queryKey: ["base-rows", variables.pageId] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              items: page.items.filter((row) => row.id !== variables.rowId),
+            })),
+          };
+        },
+      );
+
+      return { snapshots };
+    },
+    onError: (_, variables, context) => {
+      if (context?.snapshots) {
+        for (const [key, data] of context.snapshots) {
+          queryClient.setQueryData(key, data);
+        }
+      }
+      notifications.show({
+        message: t("Failed to delete row"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useDeleteRowsMutation() {
+  const { t } = useTranslation();
+  return useMutation<void, Error, DeleteRowsInput, RowCacheContext>({
+    mutationFn: (data) => deleteRows({ ...data, requestId: newRequestId() }),
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({
+        queryKey: ["base-rows", variables.pageId],
+      });
+
+      const snapshots = queryClient.getQueriesData<
+        InfiniteData<IBaseRowsPage>
+      >({ queryKey: ["base-rows", variables.pageId] });
+
+      const removeSet = new Set(variables.rowIds);
+      queryClient.setQueriesData<InfiniteData<IBaseRowsPage>>(
+        { queryKey: ["base-rows", variables.pageId] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              items: page.items.filter((row) => !removeSet.has(row.id)),
+            })),
+          };
+        },
+      );
+
+      return { snapshots };
+    },
+    onError: (_, __, context) => {
+      if (context?.snapshots) {
+        for (const [key, data] of context.snapshots) {
+          queryClient.setQueryData(key, data);
+        }
+      }
+      notifications.show({
+        message: t("Failed to delete rows"),
+        color: "red",
+      });
+    },
+  });
+}
+
+// Fires in parallel with useBaseRowsQuery without blocking first paint.
+// Keyed by filter + search so different views get independent cached counts.
+export function useBaseRowsCountQuery(
+  pageId: string | undefined,
+  filter?: FilterNode,
+  search?: SearchSpec,
+) {
+  const activeFilter = normalizeFilter(filter);
+  const activeSearch = search?.query ? search : undefined;
+
+  return useQuery<CountRowsResult>({
+    queryKey: ["base-rows-count", pageId, activeFilter, activeSearch],
+    queryFn: () =>
+      countRows({
+        pageId: pageId!,
+        filter: activeFilter,
+        search: activeSearch,
+      }),
+    enabled: !!pageId,
+    staleTime: 30 * 1000,
+  });
+}
+
+export function useReorderRowMutation() {
+  const { t } = useTranslation();
+  return useMutation<void, Error, ReorderRowInput, RowCacheContext>({
+    mutationFn: (data) => reorderRow({ ...data, requestId: newRequestId() }),
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({
+        queryKey: ["base-rows", variables.pageId],
+      });
+
+      const snapshots = queryClient.getQueriesData<
+        InfiniteData<IBaseRowsPage>
+      >({ queryKey: ["base-rows", variables.pageId] });
+
+      queryClient.setQueriesData<InfiniteData<IBaseRowsPage>>(
+        { queryKey: ["base-rows", variables.pageId] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              items: page.items.map((row) =>
+                row.id === variables.rowId
+                  ? { ...row, position: variables.position }
+                  : row,
+              ),
+            })),
+          };
+        },
+      );
+
+      return { snapshots };
+    },
+    onError: (_, variables, context) => {
+      if (context?.snapshots) {
+        for (const [key, data] of context.snapshots) {
+          queryClient.setQueryData(key, data);
+        }
+      }
+      notifications.show({
+        message: t("Failed to reorder row"),
+        color: "red",
+      });
+    },
+  });
+}
diff --git a/apps/client/src/ee/base/queries/base-view-query.ts b/apps/client/src/ee/base/queries/base-view-query.ts
new file mode 100644
index 000000000..c00b4792d
--- /dev/null
+++ b/apps/client/src/ee/base/queries/base-view-query.ts
@@ -0,0 +1,154 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  createView,
+  updateView,
+  deleteView,
+} from "@/ee/base/services/base-service";
+import {
+  IBase,
+  IBaseView,
+  CreateViewInput,
+  UpdateViewInput,
+  DeleteViewInput,
+  ViewConfig,
+  ViewConfigPatch,
+} from "@/ee/base/types/base.types";
+
+function applyConfigPatch(
+  existing: ViewConfig | undefined,
+  patch: ViewConfigPatch | undefined,
+): ViewConfig {
+  const merged: Record<string, unknown> = { ...(existing ?? {}) };
+  for (const [key, value] of Object.entries(patch ?? {})) {
+    if (value === null) delete merged[key];
+    else if (value !== undefined) merged[key] = value;
+  }
+  return merged as ViewConfig;
+}
+import { notifications } from "@mantine/notifications";
+import { queryClient } from "@/main";
+import { useTranslation } from "react-i18next";
+
+export function useCreateViewMutation() {
+  const { t } = useTranslation();
+  return useMutation<IBaseView, Error, CreateViewInput>({
+    mutationFn: (data) => createView(data),
+    onSuccess: (newView) => {
+      queryClient.setQueryData<IBase>(
+        ["bases", newView.pageId],
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            views: [...old.views, newView],
+          };
+        },
+      );
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to create view"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUpdateViewMutation() {
+  const { t } = useTranslation();
+  return useMutation<IBaseView, Error, UpdateViewInput, { previous: IBase | undefined }>({
+    mutationFn: (data) => updateView(data),
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({
+        queryKey: ["bases", variables.pageId],
+      });
+
+      const previous = queryClient.getQueryData<IBase>([
+        "bases",
+        variables.pageId,
+      ]);
+
+      queryClient.setQueryData<IBase>(
+        ["bases", variables.pageId],
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            views: old.views.map((v) =>
+              v.id === variables.viewId
+                ? {
+                    ...v,
+                    ...(variables.name !== undefined && {
+                      name: variables.name,
+                    }),
+                    ...(variables.type !== undefined && {
+                      type: variables.type,
+                    }),
+                    ...(variables.config !== undefined && {
+                      config: applyConfigPatch(v.config, variables.config),
+                    }),
+                    ...(variables.position !== undefined && {
+                      position: variables.position,
+                    }),
+                  }
+                : v,
+            ),
+          };
+        },
+      );
+
+      return { previous };
+    },
+    onError: (_, variables, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(
+          ["bases", variables.pageId],
+          context.previous,
+        );
+      }
+      notifications.show({
+        message: t("Failed to update view"),
+        color: "red",
+      });
+    },
+    onSuccess: (updatedView) => {
+      queryClient.setQueryData<IBase>(
+        ["bases", updatedView.pageId],
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            views: old.views.map((v) =>
+              v.id === updatedView.id ? updatedView : v,
+            ),
+          };
+        },
+      );
+    },
+  });
+}
+
+export function useDeleteViewMutation() {
+  const { t } = useTranslation();
+  return useMutation<void, Error, DeleteViewInput>({
+    mutationFn: (data) => deleteView(data),
+    onSuccess: (_, variables) => {
+      queryClient.setQueryData<IBase>(
+        ["bases", variables.pageId],
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            views: old.views.filter((v) => v.id !== variables.viewId),
+          };
+        },
+      );
+    },
+    onError: () => {
+      notifications.show({
+        message: t("Failed to delete view"),
+        color: "red",
+      });
+    },
+  });
+}
diff --git a/apps/client/src/ee/base/queries/page-expand-loader.ts b/apps/client/src/ee/base/queries/page-expand-loader.ts
new file mode 100644
index 000000000..5ecf8fc08
--- /dev/null
+++ b/apps/client/src/ee/base/queries/page-expand-loader.ts
@@ -0,0 +1,57 @@
+import api from "@/lib/api-client";
+import type { ResolvedPage } from "./base-page-resolver-query";
+
+type Waiter = {
+  requestedIds: readonly string[];
+  resolve: (m: Map<string, ResolvedPage>) => void;
+  reject: (err: unknown) => void;
+};
+
+type PendingBatch = {
+  ids: Set<string>;
+  waiters: Waiter[];
+};
+
+let pending: PendingBatch | null = null;
+
+export function expandPagesBatched(
+  ids: readonly string[],
+): Promise<Map<string, ResolvedPage>> {
+  if (ids.length === 0) return Promise.resolve(new Map());
+
+  return new Promise((resolve, reject) => {
+    if (!pending) {
+      pending = { ids: new Set(), waiters: [] };
+      queueMicrotask(flush);
+    }
+    for (const id of ids) pending.ids.add(id);
+    pending.waiters.push({ requestedIds: ids, resolve, reject });
+  });
+}
+
+async function flush(): Promise<void> {
+  const batch = pending;
+  pending = null;
+  if (!batch) return;
+
+  const unionIds = Array.from(batch.ids);
+  try {
+    const res = await api.post<{ items: ResolvedPage[] }>(
+      "/bases/pages/expand",
+      { pageIds: unionIds },
+    );
+    const byId = new Map<string, ResolvedPage>();
+    for (const item of res.data.items) byId.set(item.id, item);
+
+    for (const w of batch.waiters) {
+      const subset = new Map<string, ResolvedPage>();
+      for (const id of w.requestedIds) {
+        const page = byId.get(id);
+        if (page) subset.set(id, page);
+      }
+      w.resolve(subset);
+    }
+  } catch (err) {
+    for (const w of batch.waiters) w.reject(err);
+  }
+}
diff --git a/apps/client/src/ee/base/reference/reference-store.ts b/apps/client/src/ee/base/reference/reference-store.ts
new file mode 100644
index 000000000..9bce2ca30
--- /dev/null
+++ b/apps/client/src/ee/base/reference/reference-store.ts
@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { useAtomValue, useSetAtom } from "jotai";
+import { referenceStoreAtomFamily, mergeReferences } from "@/ee/base/atoms/reference-store-atom";
+import { useResolvedPages, type ResolvedPage } from "@/ee/base/queries/base-page-resolver-query";
+import type { RowReferences, UserRef } from "@/ee/base/types/base.types";
+import useCurrentUser from "@/features/user/hooks/use-current-user";
+
+export function useHydrateReferences(
+  pageId: string | undefined,
+  pages: RowReferences[],
+): void {
+  const setStore = useSetAtom(referenceStoreAtomFamily(pageId ?? ""));
+  const flat = useMemo(() => pages, [pages]);
+  useEffect(() => {
+    if (!pageId || flat.length === 0) return;
+    setStore((prev) => flat.reduce((acc, r) => mergeReferences(acc, r), prev));
+  }, [pageId, flat, setStore]);
+}
+
+export function useReferenceStore(pageId: string): RowReferences {
+  return useAtomValue(referenceStoreAtomFamily(pageId));
+}
+
+// Imperatively merges resolved users on pick so a just-selected person resolves without a rows-page refetch.
+export function useHydrateUsers(pageId: string): (users: UserRef[]) => void {
+  const setStore = useSetAtom(referenceStoreAtomFamily(pageId));
+  return useCallback(
+    (users: UserRef[]) => {
+      if (users.length === 0) return;
+      const map: Record<string, UserRef> = {};
+      for (const u of users) map[u.id] = u;
+      setStore((prev) => mergeReferences(prev, { users: map, pages: {} }));
+    },
+    [setStore],
+  );
+}
+
+// Hydrates the signed-in user so lastEditedBy cells resolve without a refetch.
+export function useHydrateCurrentUser(pageId: string): void {
+  const { data: currentUser } = useCurrentUser();
+  const hydrateUsers = useHydrateUsers(pageId);
+  const u = currentUser?.user;
+  useEffect(() => {
+    if (!u) return;
+    hydrateUsers([{ id: u.id, name: u.name ?? null, avatarUrl: u.avatarUrl ?? null }]);
+  }, [u?.id, u?.name, u?.avatarUrl, hydrateUsers]);
+}
+
+// Store-first lookup; falls back to the batched /bases/pages/expand on a miss.
+export function useResolvePage(
+  pageId: string,
+  id: string | null,
+): ResolvedPage | null | undefined {
+  const store = useReferenceStore(pageId);
+  const stored = id ? store.pages[id] : undefined;
+  const { pages } = useResolvedPages(stored || !id ? [] : [id]);
+  if (!id) return undefined;
+  if (stored) return stored;
+  return pages.get(id);
+}
diff --git a/apps/client/src/ee/base/services/base-service.ts b/apps/client/src/ee/base/services/base-service.ts
new file mode 100644
index 000000000..be64e1b20
--- /dev/null
+++ b/apps/client/src/ee/base/services/base-service.ts
@@ -0,0 +1,191 @@
+import api from "@/lib/api-client";
+import { saveAs } from "file-saver";
+import {
+  IBase,
+  IBaseProperty,
+  IBaseRow,
+  IBaseView,
+  CreateBaseInput,
+  UpdateBaseInput,
+  CreatePropertyInput,
+  UpdatePropertyInput,
+  DeletePropertyInput,
+  ReorderPropertyInput,
+  CreateRowInput,
+  UpdateRowInput,
+  DeleteRowInput,
+  DeleteRowsInput,
+  ReorderRowInput,
+  CreateViewInput,
+  UpdateViewInput,
+  DeleteViewInput,
+  UpdatePropertyResult,
+  FilterNode,
+  SearchSpec,
+  ViewSortConfig,
+  CountRowsInput,
+  CountRowsResult,
+  RowReferences,
+} from "@/ee/base/types/base.types";
+import { IPagination } from "@/lib/types";
+
+export type IBaseRowsPage = IPagination<IBaseRow> & {
+  references?: RowReferences;
+};
+
+// --- Bases ---
+
+export async function createBase(data: CreateBaseInput): Promise<IBase> {
+  const req = await api.post<IBase>("/bases/create", data);
+  return req.data;
+}
+
+export async function getBaseInfo(pageId: string): Promise<IBase> {
+  const req = await api.post<IBase>("/bases/info", { pageId });
+  return req.data;
+}
+
+export async function updateBase(data: UpdateBaseInput): Promise<IBase> {
+  const req = await api.post<IBase>("/bases/update", data);
+  return req.data;
+}
+
+export async function deleteBase(pageId: string): Promise<void> {
+  await api.post("/bases/delete", { pageId });
+}
+
+export async function convertPageToBase(pageId: string): Promise<IBase> {
+  const req = await api.post<IBase>("/bases/convert", { pageId });
+  return req.data;
+}
+
+export async function exportBaseToCsv(pageId: string): Promise<void> {
+  const req = await api.post(
+    "/bases/export-csv",
+    { pageId },
+    { responseType: "blob" },
+  );
+
+  const header = (req?.headers?.["content-disposition"] as string) ?? "";
+  const utf8Match = header.match(/filename\*=UTF-8''([^;]+)/i);
+  const plainMatch = header.match(/filename="?([^";]+)"?/i);
+  let fileName = utf8Match?.[1] ?? plainMatch?.[1] ?? "base.csv";
+  try {
+    fileName = decodeURIComponent(fileName);
+  } catch {
+    // fallback to raw filename
+  }
+
+  saveAs(req.data, fileName);
+}
+
+export async function listBases(
+  spaceId: string,
+  params?: { cursor?: string; limit?: number },
+): Promise<IPagination<IBase>> {
+  const req = await api.post("/bases", { spaceId, ...params });
+  return req.data;
+}
+
+// --- Properties ---
+
+export async function createProperty(
+  data: CreatePropertyInput,
+): Promise<IBaseProperty> {
+  const req = await api.post<IBaseProperty>("/bases/properties/create", data);
+  return req.data;
+}
+
+export async function updateProperty(
+  data: UpdatePropertyInput,
+): Promise<UpdatePropertyResult> {
+  const req = await api.post<UpdatePropertyResult>(
+    "/bases/properties/update",
+    data,
+  );
+  return req.data;
+}
+
+export async function deleteProperty(data: DeletePropertyInput): Promise<void> {
+  await api.post("/bases/properties/delete", data);
+}
+
+export async function reorderProperty(
+  data: ReorderPropertyInput,
+): Promise<void> {
+  await api.post("/bases/properties/reorder", data);
+}
+
+// --- Rows ---
+
+export async function createRow(data: CreateRowInput): Promise<IBaseRow> {
+  const req = await api.post<IBaseRow>("/bases/rows/create", data);
+  return req.data;
+}
+
+export async function getRowInfo(
+  rowId: string,
+  pageId: string,
+): Promise<IBaseRow> {
+  const req = await api.post<IBaseRow>("/bases/rows/info", { rowId, pageId });
+  return req.data;
+}
+
+export async function updateRow(data: UpdateRowInput): Promise<IBaseRow> {
+  const req = await api.post<IBaseRow>("/bases/rows/update", data);
+  return req.data;
+}
+
+export async function deleteRow(data: DeleteRowInput): Promise<void> {
+  await api.post("/bases/rows/delete", data);
+}
+
+export async function deleteRows(data: DeleteRowsInput): Promise<void> {
+  await api.post("/bases/rows/delete-many", data);
+}
+
+export async function listRows(
+  pageId: string,
+  params?: {
+    cursor?: string;
+    limit?: number;
+    filter?: FilterNode;
+    sorts?: ViewSortConfig[];
+    search?: SearchSpec;
+  },
+): Promise<IBaseRowsPage> {
+  const req = await api.post("/bases/rows", { pageId, ...params });
+  return req.data;
+}
+
+export async function reorderRow(data: ReorderRowInput): Promise<void> {
+  await api.post("/bases/rows/reorder", data);
+}
+
+export async function countRows(
+  data: CountRowsInput,
+): Promise<CountRowsResult> {
+  const req = await api.post<CountRowsResult>("/bases/rows/count", data);
+  return req.data;
+}
+
+// --- Views ---
+
+export async function createView(data: CreateViewInput): Promise<IBaseView> {
+  const req = await api.post<IBaseView>("/bases/views/create", data);
+  return req.data;
+}
+
+export async function updateView(data: UpdateViewInput): Promise<IBaseView> {
+  const req = await api.post<IBaseView>("/bases/views/update", data);
+  return req.data;
+}
+
+export async function deleteView(data: DeleteViewInput): Promise<void> {
+  await api.post("/bases/views/delete", data);
+}
+
+export async function listViews(pageId: string): Promise<IBaseView[]> {
+  const req = await api.post<IBaseView[]>("/bases/views", { pageId });
+  return req.data;
+}
diff --git a/apps/client/src/ee/base/styles/base-table-skeleton.module.css b/apps/client/src/ee/base/styles/base-table-skeleton.module.css
new file mode 100644
index 000000000..18d2f0200
--- /dev/null
+++ b/apps/client/src/ee/base/styles/base-table-skeleton.module.css
@@ -0,0 +1,53 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs) 0;
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.toolbarTabs {
+  display: flex;
+  gap: 6px;
+  flex: 1;
+}
+
+.toolbarActions {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+  margin-left: auto;
+}
+
+.gridWrapper {
+  overflow: hidden;
+  flex: 1;
+  border-top: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.grid {
+  display: grid;
+}
+
+.cellInner {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 0 8px;
+}
+
+.headerCellInner {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  width: 100%;
+  padding: 0 8px;
+}
diff --git a/apps/client/src/ee/base/styles/base-toolbar.module.css b/apps/client/src/ee/base/styles/base-toolbar.module.css
new file mode 100644
index 000000000..01df4d4db
--- /dev/null
+++ b/apps/client/src/ee/base/styles/base-toolbar.module.css
@@ -0,0 +1,10 @@
+.badgeDot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  padding: 0;
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  font-size: 9px;
+}
diff --git a/apps/client/src/ee/base/styles/base-view.module.css b/apps/client/src/ee/base/styles/base-view.module.css
new file mode 100644
index 000000000..4590281bc
--- /dev/null
+++ b/apps/client/src/ee/base/styles/base-view.module.css
@@ -0,0 +1,5 @@
+.fullHeight {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
diff --git a/apps/client/src/ee/base/styles/cells.module.css b/apps/client/src/ee/base/styles/cells.module.css
new file mode 100644
index 000000000..ac1c7c782
--- /dev/null
+++ b/apps/client/src/ee/base/styles/cells.module.css
@@ -0,0 +1,487 @@
+.cellInput {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: var(--mantine-font-size-sm);
+  font-family: inherit;
+  color: inherit;
+  padding: 0 8px;
+}
+
+.cellInput::placeholder {
+  color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+}
+
+.numberValue {
+  text-align: right;
+  width: 100%;
+}
+
+.numberInput {
+  text-align: right;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border-radius: 12px;
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 500;
+  line-height: 1.5;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.badgeGroup {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.badgeMeasure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  gap: 4px;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.overflowCount {
+  font-size: 11px;
+  color: light-dark(#686868, var(--mantine-color-dark-1));
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.badgeGroup .badge {
+  flex-shrink: 0;
+}
+
+.badgeGroup .badge:last-child,
+.badgeGroup .badge:has(+ .overflowCount) {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.badgeGroup .badgeMeasure .badge {
+  flex: 0 0 auto;
+  max-width: none;
+  overflow: visible;
+}
+
+.checkboxCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  cursor: pointer;
+}
+
+.urlLink {
+  color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.urlLink:hover {
+  text-decoration: underline;
+}
+
+.emailLink {
+  color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.emailLink:hover {
+  text-decoration: underline;
+}
+
+.dateValue {
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+}
+
+.emptyValue {
+  color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
+}
+
+/* Person cell: read mode (vertical list) */
+
+.personChip {
+  padding-left: 2px;
+  gap: 4px;
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}
+
+.personChipName {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Filter value trigger: selected people shown inline inside an InputBase button. */
+.filterTriggerChips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+}
+
+.filterTriggerChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.filterTriggerChipName {
+  font-size: var(--mantine-font-size-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Person cell: edit mode (tag input + dropdown) */
+
+.personTagArea {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  min-height: 34px;
+}
+
+.personTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 2px;
+  border-radius: 3px;
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  font-size: var(--mantine-font-size-xs);
+  white-space: nowrap;
+  max-width: 160px;
+}
+
+.personTagName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.personTagRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 2px;
+  background: transparent;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2));
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.personTagRemove:hover {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+}
+
+.personTagInput {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: var(--mantine-font-size-xs);
+  font-family: inherit;
+  color: inherit;
+  padding: 2px 0;
+}
+
+.personTagInput::placeholder {
+  color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+}
+
+.personDropdownDivider {
+  height: 1px;
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.personDropdownHint {
+  padding: 6px 8px;
+  font-size: 11px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.personOptionText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  line-height: 1.25;
+}
+
+.personOptionName {
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.personOptionEmail {
+  font-size: 12px;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Page picker option: title stacked above the space name. min-width:0 +
+ * flex:1 lets both lines truncate within the row instead of overflowing. */
+.pageOptionText {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.fileGroup {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+}
+
+.fileBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  border-radius: var(--mantine-radius-sm);
+  font-size: 11px;
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selectDropdown {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.selectOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  cursor: pointer;
+  border-radius: var(--mantine-radius-sm);
+  transition: background-color 100ms ease;
+}
+
+.selectOption:hover {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.selectOptionActive {
+  background-color: light-dark(var(--mantine-color-blue-0), var(--mantine-color-blue-9));
+}
+
+.selectOptionKeyboardActive {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.selectOptionActive.selectOptionKeyboardActive {
+  background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8));
+}
+
+.selectCategoryLabel {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  padding: 8px 8px 4px;
+  letter-spacing: 0.5px;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+  cursor: pointer;
+  transition: background-color 100ms ease;
+}
+
+.menuItem:hover {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+}
+
+.addOptionRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  cursor: pointer;
+  border-radius: var(--mantine-radius-sm);
+  transition: background-color 100ms ease;
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  margin-top: 4px;
+}
+
+.addOptionRow:hover {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+}
+
+.addOptionLabel {
+  font-size: var(--mantine-font-size-xs);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.pagePill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-xs);
+  color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-1));
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  text-decoration: none;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.pagePill:hover {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.pagePillIcon {
+  display: inline-flex;
+  font-size: 14px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.pagePillIconFallback {
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  flex-shrink: 0;
+}
+
+.pagePillText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pageMissing {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--mantine-font-size-xs);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  font-style: italic;
+}
+
+.longTextPreview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+/* Popover target wrapper that fills the cell. */
+.popoverTarget {
+  width: 100%;
+  height: 100%;
+}
+
+/* Popover target that also centers content (long-text preview). */
+.popoverTargetFlex {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+/* Active-edit border on the long-text popover dropdown. */
+.longTextDropdown {
+  border: 2px solid var(--mantine-color-blue-3);
+}
+
+/* Inline name span inside CellLastEditedBy. */
+.lastEditedByName {
+  font-size: var(--mantine-font-size-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* File attachment row inside the edit popover. */
+.fileItemRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+.fileItemIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.fileItemLink {
+  flex: 1;
+  min-width: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Remove button inside a badge/tag (multi-select). */
+.badgeRemoveBtn {
+  margin-left: 2px;
+  color: inherit;
+}
+
+/* Upload trigger button in the file edit popover. */
+.fileUploadBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 0;
+  margin-top: 4px;
+  font-size: var(--mantine-font-size-xs);
+}
diff --git a/apps/client/src/ee/base/styles/formula.module.css b/apps/client/src/ee/base/styles/formula.module.css
new file mode 100644
index 000000000..a8c4f8194
--- /dev/null
+++ b/apps/client/src/ee/base/styles/formula.module.css
@@ -0,0 +1,46 @@
+.formulaHeaderRow {
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.formulaIconBadge {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  display: grid;
+  place-items: center;
+  background: var(--mantine-color-blue-0);
+  color: var(--mantine-color-blue-6);
+}
+
+.fnChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 5px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace;
+  font-size: 12.5px;
+  color: var(--mantine-color-blue-7);
+  background: var(--mantine-color-white);
+  border: 1px solid var(--mantine-color-gray-3);
+  cursor: pointer;
+}
+
+.fnChipParens {
+  color: var(--mantine-color-gray-5);
+}
+
+.propChip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 9px;
+  border-radius: 6px;
+  font-size: 12.5px;
+  font-weight: 500;
+  line-height: 1.4;
+  background: var(--mantine-color-blue-0);
+  border: 1px solid var(--mantine-color-blue-2);
+  color: var(--mantine-color-blue-7);
+  cursor: pointer;
+}
diff --git a/apps/client/src/ee/base/styles/grid.module.css b/apps/client/src/ee/base/styles/grid.module.css
new file mode 100644
index 000000000..262c1ad66
--- /dev/null
+++ b/apps/client/src/ee/base/styles/grid.module.css
@@ -0,0 +1,652 @@
+.tableScrollport {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overflow-anchor: none;
+  padding-bottom: 100px;
+}
+
+.stickyBand {
+  position: sticky;
+  top: var(--sticky-band-top, 0);
+  z-index: 10;
+  background-color: var(--mantine-color-body);
+  border-bottom: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.headerGrid {
+  display: grid;
+  overflow-x: hidden;
+  margin-left: calc(-1 * var(--embed-extend-l, 0px));
+  margin-right: calc(-1 * var(--embed-extend-r, 0px));
+  padding-left: var(--embed-grid-pad-left, 0);
+  padding-right: var(--embed-grid-pad-right, 0);
+}
+
+.bodyGrid {
+  overflow-x: auto;
+  margin-left: calc(-1 * var(--embed-extend-l, 0px));
+  margin-right: calc(-1 * var(--embed-extend-r, 0px));
+  padding-left: var(--embed-grid-pad-left, 0);
+  padding-right: var(--embed-grid-pad-right, 0);
+  padding-bottom: 6px;
+  scrollbar-width: thin;
+}
+
+.bodyGrid::-webkit-scrollbar {
+  height: 8px;
+}
+
+.bodyGrid::-webkit-scrollbar-thumb {
+  background-color: light-dark(
+    var(--mantine-color-gray-4),
+    var(--mantine-color-dark-4)
+  );
+  border-radius: 4px;
+}
+
+.bodyGrid::-webkit-scrollbar-thumb:hover {
+  background-color: light-dark(
+    var(--mantine-color-gray-5),
+    var(--mantine-color-dark-3)
+  );
+}
+
+.bodyGrid::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.rowsContainer {
+  position: relative;
+}
+
+/* Virtualized rows: position is owned by the virtualizer (writes `top`
+ * directly via directDomUpdates). Do not set top/transform elsewhere. */
+.virtualRow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.headerRow {
+  display: contents;
+}
+
+.headerCell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 8px;
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
+  border-right: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+
+.headerCell:last-child {
+  border-right: none;
+}
+
+.headerCellPinned {
+  position: sticky;
+  left: calc(-1 * var(--embed-grid-pad-left, 0px) + var(--pin-offset, 0px));
+  z-index: 2;
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
+}
+
+.headerCellContent {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.headerCellName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.headerTypeIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.headerConvertingSpinner {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.resizeHandle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 3;
+}
+
+.resizeHandle::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  border-radius: 1px;
+  background-color: transparent;
+  transition: background-color 150ms ease;
+}
+
+.resizeHandle:hover::after,
+.resizeHandleActive::after {
+  background-color: var(--mantine-color-blue-5);
+}
+
+.rowContainer {
+  display: contents;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: var(--base-grid-cols);
+  height: var(--base-row-height);
+  border-bottom: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.row:hover .cell {
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-7)
+  );
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 8px;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-7)
+  );
+  border-right: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  overflow: hidden;
+  cursor: default;
+  outline: none;
+}
+
+/* No `.cell:last-child { border-right: none }`: the body grid always carries
+ * a trailing flexible filler track, so the last column cell is never at the
+ * table's right edge. Its right border stays as the column divider (matching
+ * the header), which would otherwise go missing for the last column. */
+
+.cellPinned {
+  /* See .headerCellPinned for the rationale on the negative pad-left.
+   * Both grids share the same anchor calculation so header and body
+   * cells freeze in lockstep. */
+  position: sticky;
+  left: calc(-1 * var(--embed-grid-pad-left, 0px) + var(--pin-offset, 0px));
+  z-index: 1;
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-7)
+  );
+}
+
+.row:hover .cellPinned {
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-7)
+  );
+}
+
+.cellEditing {
+  outline: 2px solid var(--mantine-color-blue-5);
+  outline-offset: -2px;
+  z-index: 1;
+  padding: 0;
+}
+
+.cellContent {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rowNumberCell {
+  justify-content: center;
+  font-size: var(--mantine-font-size-xs);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.rowDragging .cell {
+  opacity: 0.4;
+}
+
+.rowDropAbove .cell {
+  box-shadow: inset 0 2px 0 0 var(--mantine-color-blue-5);
+}
+
+.rowDropBelow .cell {
+  box-shadow: inset 0 -2px 0 0 var(--mantine-color-blue-5);
+}
+
+.rowDragPreview {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  overflow: hidden;
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  border-radius: 4px;
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-7)
+  );
+  box-shadow: var(--mantine-shadow-md);
+  pointer-events: none;
+}
+
+.addRowButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: max-content;
+  height: 32px;
+  margin: 4px 0 4px;
+  padding: 0 10px;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  cursor: pointer;
+  user-select: none;
+  border-radius: 4px;
+  transition: background-color 150ms ease;
+  position: sticky;
+  inset-inline-start: 0;
+  background-color: light-dark(
+    var(--mantine-color-body),
+    var(--mantine-color-dark-7)
+  );
+  z-index: 4;
+}
+
+.addRowButton:hover {
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+}
+
+.addColumnButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  min-width: 40px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  background-color: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
+  border-bottom: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 150ms ease;
+}
+
+.addColumnButton:hover {
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mantine-spacing-md);
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md);
+  grid-column: 1 / -1;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs) 0;
+  margin-bottom: var(--mantine-spacing-xs);
+  flex-wrap: wrap;
+}
+
+.toolbarRight {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+}
+
+.embedTitleInput {
+  display: block;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  margin: calc(-1 * var(--mantine-spacing-md)) 0 var(--mantine-spacing-sm);
+  font-family: inherit;
+  font-size: var(--mantine-font-size-lg);
+  font-weight: 600;
+  line-height: 1.3;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+}
+
+.embedTitleInput::placeholder {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  font-weight: 600;
+}
+
+.primaryCell {
+  font-weight: 500;
+}
+
+.rowNumberCellInner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.rowNumberIndex,
+.rowNumberCheckbox {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rowNumberCheckbox {
+  display: none;
+}
+
+.rowNumberDragHandle {
+  position: absolute;
+  top: 50%;
+  left: -6px;
+  transform: translateY(-50%);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  cursor: grab;
+}
+
+.rowNumberDragHandle:active {
+  cursor: grabbing;
+}
+
+/* Expand affordance at the right edge of the primary cell. The zero-width
+   anchor keeps the title at full width; the button overlays it on hover and
+   inherits the cell background (incl. hover/selected states) to mask the
+   text beneath. Hidden via opacity, not display, so it stays focusable. */
+.rowExpandAnchor {
+  position: relative;
+  align-self: stretch;
+  width: 0;
+  margin-left: auto;
+  background-color: inherit;
+}
+
+.rowExpandButton {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 5px;
+  background-color: inherit;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 80ms ease, color 80ms ease;
+}
+
+.row:hover .rowExpandButton,
+.rowExpandButton:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.rowExpandButton:hover {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
+}
+
+.row:hover .rowNumberIndex {
+  display: none;
+}
+.row:hover .rowNumberCheckbox,
+.row:hover .rowNumberDragHandle {
+  display: inline-flex;
+}
+
+.rowSelected .rowNumberIndex {
+  display: none;
+}
+.rowSelected .rowNumberCheckbox {
+  display: inline-flex;
+}
+.rowSelected .cell {
+  background: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-6));
+}
+
+.row.rowSelected:hover .cell,
+.row.rowSelected:hover .cellPinned {
+  background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-5));
+}
+
+.rowNumberHeaderInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.rowNumberHeaderHash {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  font-size: var(--mantine-font-size-xs);
+}
+
+.rowNumberHeaderCheckbox {
+  display: none;
+}
+
+.headerCell:hover .rowNumberHeaderHash,
+.hasSelection .rowNumberHeaderHash {
+  display: none;
+}
+
+.headerCell:hover .rowNumberHeaderCheckbox,
+.hasSelection .rowNumberHeaderCheckbox {
+  display: inline-flex;
+}
+
+.selectionActionBarWrapper {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 200;
+}
+
+.selectionActionBar {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 6px 6px 14px;
+  border-radius: 999px;
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.25),
+    0 2px 8px rgba(0, 0, 0, 0.18);
+  background: light-dark(
+    var(--mantine-color-dark-8),
+    var(--mantine-color-dark-5)
+  );
+  color: var(--mantine-color-white);
+  border: 1px solid light-dark(
+    var(--mantine-color-dark-9),
+    var(--mantine-color-dark-4)
+  );
+}
+
+.selectionActionBarCount {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  color: var(--mantine-color-white);
+  padding-right: 10px;
+  margin-right: 2px;
+  border-right: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.selectionActionBarDelete {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border: none;
+  background: transparent;
+  color: var(--mantine-color-red-4);
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.selectionActionBarDelete:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.selectionActionBarDelete:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.selectionActionBarClose {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: transparent;
+  color: var(--mantine-color-gray-3);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.selectionActionBarClose:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--mantine-color-white);
+}
+
+.dropEdgeLine {
+  position: absolute;
+  background: light-dark(
+    var(--mantine-color-blue-5),
+    var(--mantine-color-blue-4)
+  );
+  pointer-events: none;
+  z-index: 2;
+}
+
+.dropEdgeLine[data-edge="left"] {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+}
+
+.dropEdgeLine[data-edge="right"] {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 2px;
+}
+
+.dropEdgeLine[data-edge="top"] {
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2px;
+}
+
+.dropEdgeLine[data-edge="bottom"] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+}
+
+.ghostRow {
+  cursor: pointer;
+  width: max-content;
+  min-width: 100%;
+}
+
+.popoverAnchor {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
diff --git a/apps/client/src/ee/base/styles/property.module.css b/apps/client/src/ee/base/styles/property.module.css
new file mode 100644
index 000000000..677814ab9
--- /dev/null
+++ b/apps/client/src/ee/base/styles/property.module.css
@@ -0,0 +1,23 @@
+.alphabetizeBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.addOptionBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.dragHandle {
+  flex-shrink: 0;
+  cursor: grab;
+  display: flex;
+  align-items: center;
+}
+
+.chevronBack {
+  transform: rotate(180deg);
+}
diff --git a/apps/client/src/ee/base/styles/row-detail-modal.module.css b/apps/client/src/ee/base/styles/row-detail-modal.module.css
new file mode 100644
index 000000000..d51aab096
--- /dev/null
+++ b/apps/client/src/ee/base/styles/row-detail-modal.module.css
@@ -0,0 +1,448 @@
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  max-height: min(86vh, 820px);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+}
+
+.topBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px 0;
+  flex-shrink: 0;
+}
+
+.topBarGroup {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  cursor: pointer;
+  transition: background-color 100ms ease, color 100ms ease;
+}
+
+.iconButton:hover {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+}
+
+.iconButton:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.iconButton:disabled:hover {
+  background-color: transparent;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.header {
+  padding: 14px 36px 4px;
+  flex-shrink: 0;
+}
+
+.titleInput {
+  box-sizing: border-box;
+  width: calc(100% + 16px);
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 2px 8px;
+  margin: -2px -8px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.012em;
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+  transition: background-color 100ms ease;
+}
+
+.titleInput:hover:not(:focus) {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+}
+
+.titleInput:focus-visible {
+  box-shadow: 0 0 0 2px light-dark(
+    rgba(34, 139, 230, 0.35),
+    rgba(34, 139, 230, 0.45)
+  );
+}
+
+.titleInput::placeholder {
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  font-weight: 700;
+}
+
+.titleStatic {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.012em;
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+  word-break: break-word;
+}
+
+.metaRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  font-size: 12.5px;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  flex-wrap: wrap;
+}
+
+.metaDot {
+  width: 2.5px;
+  height: 2.5px;
+  border-radius: 50%;
+  background-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+  flex-shrink: 0;
+}
+
+.body {
+  padding: 24px 36px 16px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.propertyList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.propertyRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 6px 0;
+  border-radius: 8px;
+}
+
+.propertyLabel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 168px;
+  flex: 0 0 168px;
+  height: 34px;
+  padding-left: 4px;
+  font-size: 13.5px;
+  /* gray-7/dark-1 clear WCAG AA 4.5:1; gray-6/dark-2 do not. */
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+}
+
+/* The label doubles as the field-menu handle: a quiet button that grows a
+   chevron on hover. */
+.propertyLabelButton {
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  padding-right: 6px;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: background-color 100ms ease, color 100ms ease;
+}
+
+.propertyLabelButton:hover,
+.propertyLabelButton:focus-visible,
+.propertyLabelButton.propertyLabelActive {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+}
+
+.propertyLabelChevron {
+  flex-shrink: 0;
+  margin-left: auto;
+  opacity: 0;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  transition: opacity 100ms ease;
+}
+
+.propertyLabelButton:hover .propertyLabelChevron,
+.propertyLabelButton:focus-visible .propertyLabelChevron,
+.propertyLabelButton.propertyLabelActive .propertyLabelChevron {
+  opacity: 1;
+}
+
+.propertyLabelIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.propertyLabelText {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---------- Field shell ----------
+   Every value renders inside the same shell: identical padding, identical
+   left edge, identical focus treatment. Fields differ only in content. */
+
+.fieldShell {
+  flex: 1;
+  min-width: 0;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  /* Single type-scale declaration; field content inherits. Matches the
+     grid's .cell base so cell components render identically here. */
+  font-size: var(--mantine-font-size-sm);
+  line-height: 22px;
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  transition: background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease;
+}
+
+.fieldShellTop {
+  align-items: flex-start;
+}
+
+.fieldShellText {
+  cursor: text;
+}
+
+.fieldShellPointer {
+  cursor: pointer;
+}
+
+.fieldShellText:hover,
+.fieldShellPointer:hover {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}
+
+.fieldShell:focus-within,
+.fieldShellActive,
+.fieldShellActive:hover {
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  border-color: light-dark(var(--mantine-color-blue-5), var(--mantine-color-blue-5));
+  box-shadow: 0 0 0 3px light-dark(
+    rgba(34, 139, 230, 0.12),
+    rgba(34, 139, 230, 0.22)
+  );
+}
+
+.fieldShellLocked {
+  cursor: default;
+}
+
+/* Sole read-only indicator on a field — must clear the 3:1 non-text minimum. */
+.fieldLockIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.fieldInput {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-align: left;
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+}
+
+.fieldValueText {
+  font-size: inherit;
+  line-height: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fieldValueTextMultiline {
+  font-size: inherit;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.fieldTextarea {
+  flex: 1;
+  min-width: 0;
+}
+
+.fieldTextareaInput {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+  line-height: 1.5;
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+}
+
+.fieldChips {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-height: 22px;
+}
+
+.fieldCellDisplay {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* Grid cells right-align numeric output (.numberValue); inside the modal
+   everything starts from the left. */
+.fieldCellDisplay :global(*) {
+  text-align: left;
+}
+
+.fieldTrailing {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  opacity: 0;
+  transition: opacity 100ms ease, color 100ms ease;
+}
+
+.fieldShell:hover .fieldTrailing,
+.fieldTrailing:focus-visible {
+  opacity: 1;
+}
+
+.fieldTrailing:hover {
+  color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}
+
+/* "Add property" rendered as the ghost next row of the ledger. */
+.addPropertyRow {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 34px;
+  margin-top: 6px;
+  padding: 0 0 0 4px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  font-family: inherit;
+  font-size: 13.5px;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  cursor: pointer;
+  transition: background-color 100ms ease, color 100ms ease;
+}
+
+.addPropertyRow:hover,
+.addPropertyRow:focus-visible {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+}
+
+.addPropertyLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 36px 16px;
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  font-size: 12px;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  flex-shrink: 0;
+  min-height: 44px;
+}
+
+.footerStatus {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.savingDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--mantine-color-yellow-5);
+  animation: savingPulse 1.4s ease-in-out infinite;
+}
+
+@keyframes savingPulse {
+  0%, 100% {
+    opacity: 0.6;
+    box-shadow: 0 0 0 0 rgba(250, 176, 5, 0.45);
+  }
+  50% {
+    opacity: 1;
+    box-shadow: 0 0 0 4px rgba(250, 176, 5, 0);
+  }
+}
+
+.lockedHint {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.kbdHint {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.kbdSeparator {
+  width: 1px;
+  height: 12px;
+  margin: 0 2px;
+  background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 26px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 4px;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  font-family:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  box-shadow: 0 1px 0 light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
diff --git a/apps/client/src/ee/base/styles/views.module.css b/apps/client/src/ee/base/styles/views.module.css
new file mode 100644
index 000000000..22a4127b3
--- /dev/null
+++ b/apps/client/src/ee/base/styles/views.module.css
@@ -0,0 +1,16 @@
+.addActionButton {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 6px;
+  padding: 4px 0;
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-blue-6);
+}
+
+.fieldNameText {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/apps/client/src/ee/base/types/base.types.ts b/apps/client/src/ee/base/types/base.types.ts
new file mode 100644
index 000000000..18e7dc882
--- /dev/null
+++ b/apps/client/src/ee/base/types/base.types.ts
@@ -0,0 +1,380 @@
+import type { ResolvedPage } from "@/ee/base/queries/base-page-resolver-query";
+
+export type UserRef = { id: string; name: string | null; avatarUrl: string | null };
+export type RowReferences = {
+  users: Record<string, UserRef>;
+  pages: Record<string, ResolvedPage>;
+};
+
+export type BasePropertyType =
+  | 'text'
+  | 'number'
+  | 'select'
+  | 'status'
+  | 'multiSelect'
+  | 'date'
+  | 'person'
+  | 'file'
+  | 'page'
+  | 'checkbox'
+  | 'url'
+  | 'email'
+  | 'createdAt'
+  | 'lastEditedAt'
+  | 'lastEditedBy'
+  | 'formula'
+  | 'longText';
+
+export type Choice = {
+  id: string;
+  name: string;
+  color: string;
+  category?: 'todo' | 'inProgress' | 'complete';
+};
+
+export type SelectTypeOptions = {
+  choices: Choice[];
+  choiceOrder: string[];
+  disableColors?: boolean;
+  defaultValue?: string | string[] | null;
+};
+
+export type NumberTypeOptions = {
+  format?: 'plain' | 'separators' | 'currency' | 'percent' | 'progress';
+  precision?: number;
+  currencyCode?: string;
+  currencySymbol?: string;
+  defaultValue?: number | null;
+};
+
+export type DateTypeOptions = {
+  dateFormat?: string;
+  timeFormat?: '12h' | '24h';
+  includeTime?: boolean;
+  defaultValue?: string | null;
+};
+
+export type TextTypeOptions = {
+  richText?: boolean;
+  defaultValue?: string | null;
+};
+
+export type CheckboxTypeOptions = {
+  defaultValue?: boolean;
+};
+
+export type UrlTypeOptions = {
+  defaultValue?: string | null;
+};
+
+export type EmailTypeOptions = {
+  defaultValue?: string | null;
+};
+
+export type PersonTypeOptions = {
+  allowMultiple?: boolean;
+  defaultValue?: string | string[] | null;
+};
+
+export type PageTypeOptions = Record<string, never>;
+
+export type TypeOptions =
+  | SelectTypeOptions
+  | NumberTypeOptions
+  | DateTypeOptions
+  | TextTypeOptions
+  | CheckboxTypeOptions
+  | UrlTypeOptions
+  | EmailTypeOptions
+  | PersonTypeOptions
+  | PageTypeOptions
+  | Record<string, unknown>;
+
+export type IBaseProperty = {
+  id: string;
+  pageId: string;
+  name: string;
+  type: BasePropertyType;
+  position: string;
+  typeOptions: TypeOptions;
+  // Set while a background type-conversion job is rewriting cells. The
+  // live `type` stays on the old kind until the job commits, so cells
+  // render correctly; the column header shows a "Converting…" badge.
+  pendingType?: BasePropertyType | null;
+  pendingTypeOptions?: TypeOptions | null;
+  isPrimary: boolean;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type IBaseRow = {
+  id: string;
+  pageId: string;
+  cells: Record<string, unknown>;
+  position: string;
+  creatorId: string;
+  lastUpdatedById: string | null;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type ViewSortConfig = {
+  propertyId: string;
+  direction: 'asc' | 'desc';
+};
+
+// Matches the server's engine operator set (core/base/engine/schema.zod.ts).
+export type FilterOperator =
+  | 'eq'
+  | 'neq'
+  | 'gt'
+  | 'gte'
+  | 'lt'
+  | 'lte'
+  | 'contains'
+  | 'ncontains'
+  | 'startsWith'
+  | 'endsWith'
+  | 'isEmpty'
+  | 'isNotEmpty'
+  | 'before'
+  | 'after'
+  | 'onOrBefore'
+  | 'onOrAfter'
+  | 'any'
+  | 'none'
+  | 'all'
+  | 'isWithin';
+
+export type DateFilterAnchor =
+  | 'today'
+  | 'tomorrow'
+  | 'yesterday'
+  | 'oneWeekAgo'
+  | 'oneWeekFromNow'
+  | 'oneMonthAgo'
+  | 'oneMonthFromNow';
+
+export type DateFilterRange =
+  | 'pastWeek'
+  | 'pastMonth'
+  | 'pastYear'
+  | 'thisWeek'
+  | 'thisMonth'
+  | 'thisYear'
+  | 'nextWeek'
+  | 'nextMonth'
+  | 'nextYear';
+
+export type DateFilterValue =
+  | { mode: 'exact'; date: string }
+  | { mode: 'relative'; preset: DateFilterAnchor }
+  | { mode: 'range'; preset: DateFilterRange };
+
+export type FilterCondition = {
+  propertyId: string;
+  op: FilterOperator;
+  value?: unknown;
+};
+
+export type FilterGroup = {
+  op: 'and' | 'or';
+  children: Array<FilterCondition | FilterGroup>;
+};
+
+export type FilterNode = FilterCondition | FilterGroup;
+
+export type SearchSpec = {
+  query: string;
+  mode?: 'trgm' | 'fts';
+};
+
+export const NO_VALUE_CHOICE_ID = '__no_value';
+
+export type ViewConfig = {
+  sorts?: ViewSortConfig[];
+  filter?: FilterGroup;
+  visiblePropertyIds?: string[];
+  hiddenPropertyIds?: string[];
+  propertyWidths?: Record<string, number>;
+  propertyOrder?: string[];
+  // Kanban
+  groupByPropertyId?: string;
+  hiddenChoiceIds?: string[];
+  choiceOrder?: string[];
+};
+
+export type ViewConfigPatch = {
+  [K in keyof ViewConfig]?: ViewConfig[K] | null;
+};
+
+export type IBaseView = {
+  id: string;
+  pageId: string;
+  name: string;
+  type: 'table' | 'kanban' | 'calendar';
+  config: ViewConfig;
+  position: string;
+  workspaceId: string;
+  creatorId: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type IBase = {
+  id: string;
+  name: string;
+  description?: string;
+  icon?: string;
+  pageId?: string;
+  spaceId: string;
+  workspaceId: string;
+  creatorId: string;
+  properties: IBaseProperty[];
+  views: IBaseView[];
+  createdAt: string;
+  updatedAt: string;
+  /** Effective edit permission for the current user (page-restrictions included). */
+  canEdit?: boolean;
+  baseSchemaVersion: number;
+};
+
+export type EditingCell = {
+  rowId: string;
+  propertyId: string;
+} | null;
+
+export type CreateBaseInput = {
+  name: string;
+  description?: string;
+  icon?: string;
+  pageId?: string;
+  spaceId: string;
+};
+
+export type UpdateBaseInput = {
+  pageId: string;
+  name?: string;
+  description?: string;
+  icon?: string;
+};
+
+export type CreatePropertyInput = {
+  pageId: string;
+  name: string;
+  type: BasePropertyType;
+  typeOptions?: TypeOptions;
+  requestId?: string;
+};
+
+export type UpdatePropertyInput = {
+  propertyId: string;
+  pageId: string;
+  name?: string;
+  type?: BasePropertyType;
+  typeOptions?: TypeOptions;
+  requestId?: string;
+};
+
+export type DeletePropertyInput = {
+  propertyId: string;
+  pageId: string;
+  requestId?: string;
+};
+
+export type ReorderPropertyInput = {
+  propertyId: string;
+  pageId: string;
+  position: string;
+  requestId?: string;
+};
+
+export type CountRowsInput = {
+  pageId: string;
+  filter?: FilterNode;
+  search?: SearchSpec;
+};
+
+export type CountRowsResult = {
+  count: number;
+};
+
+export type CreateRowInput = {
+  pageId: string;
+  cells?: Record<string, unknown>;
+  afterRowId?: string;
+  requestId?: string;
+};
+
+export type UpdateRowInput = {
+  rowId: string;
+  pageId: string;
+  cells: Record<string, unknown>;
+  position?: string;
+  requestId?: string;
+};
+
+export type DeleteRowInput = {
+  rowId: string;
+  pageId: string;
+  requestId?: string;
+};
+
+export type DeleteRowsInput = {
+  pageId: string;
+  rowIds: string[];
+  requestId?: string;
+};
+
+export type ReorderRowInput = {
+  rowId: string;
+  pageId: string;
+  position: string;
+  requestId?: string;
+};
+
+export type CreateViewInput = {
+  pageId: string;
+  name: string;
+  type?: 'table' | 'kanban' | 'calendar';
+  config?: ViewConfig;
+};
+
+export type UpdateViewInput = {
+  viewId: string;
+  pageId: string;
+  name?: string;
+  type?: 'table' | 'kanban' | 'calendar';
+  config?: ViewConfigPatch;
+  position?: string;
+};
+
+export type DeleteViewInput = {
+  viewId: string;
+  pageId: string;
+};
+
+export type UpdatePropertyResult = {
+  property: IBaseProperty;
+  // Non-null when a background type-conversion job was started. Listen for base:schema:bumped to detect completion.
+  jobId: string | null;
+};
+
+// Local-first per-view draft stored in localStorage (userId, baseId, viewId).
+// Absent filter or sorts means "inherit the baseline for that axis".
+export type BaseViewDraft = {
+  filter?: FilterGroup;
+  sorts?: ViewSortConfig[];
+  // ISO timestamp written on each put; diagnostic only, not read by logic.
+  updatedAt: string;
+};
+
+export type {
+  FormulaTypeOptions,
+  FormulaResultType,
+  ErrorCell as FormulaErrorCell,
+  ErrorCode as FormulaErrorCode,
+} from "@docmost/base-formula/client";
+export { isErrorCell as isFormulaErrorCell } from "@docmost/base-formula/client";
diff --git a/apps/client/src/ee/base/types/react-table.d.ts b/apps/client/src/ee/base/types/react-table.d.ts
new file mode 100644
index 000000000..f9b5d20be
--- /dev/null
+++ b/apps/client/src/ee/base/types/react-table.d.ts
@@ -0,0 +1,8 @@
+import "@tanstack/react-table";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    property?: IBaseProperty;
+  }
+}
diff --git a/apps/client/src/ee/features.ts b/apps/client/src/ee/features.ts
index cacf851f2..39a373cd2 100644
--- a/apps/client/src/ee/features.ts
+++ b/apps/client/src/ee/features.ts
@@ -19,4 +19,5 @@ export const Feature = {
   SHARING_CONTROLS: 'sharing:controls',
   TEMPLATES: 'templates',
   VIEWER_COMMENTS: 'comment:viewer',
+  BASES: 'bases',
 } as const;
diff --git a/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx b/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
new file mode 100644
index 000000000..93644df7d
--- /dev/null
+++ b/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
@@ -0,0 +1,138 @@
+import { NodeViewWrapper, NodeViewProps } from "@tiptap/react";
+import { Box, Text } from "@mantine/core";
+import { useEffect, useRef } from "react";
+import { BaseView } from "@/ee/base/components/base-view";
+import { BaseTableSkeleton } from "@/ee/base/components/base-table-skeleton";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { pinOffsetWatcher } from "@docmost/editor-ext";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+
+const SIDE_GUTTER = 8;
+
+// Extend the scroll viewport on both sides (toward AppShell.Main's
+// edges), but offset the grid content with padding-left = extendLeft
+// so the first cell still lines up with page-content on load.
+function applyExtension(wrapper: HTMLDivElement) {
+  const rect = wrapper.getBoundingClientRect();
+  if (rect.width === 0) return;
+
+  const main = wrapper.closest("main") as HTMLElement | null;
+  const mainRect = main?.getBoundingClientRect();
+  const targetLeft = (mainRect?.left ?? 0) + SIDE_GUTTER;
+  const targetRight = mainRect
+    ? mainRect.right - SIDE_GUTTER
+    : window.innerWidth - SIDE_GUTTER;
+
+  const extendLeft = Math.max(0, rect.left - targetLeft);
+  const extendRight = Math.max(0, targetRight - rect.right);
+
+  wrapper.style.setProperty("--embed-extend-l", `${extendLeft}px`);
+  wrapper.style.setProperty("--embed-extend-r", `${extendRight}px`);
+  wrapper.style.setProperty("--embed-grid-pad-left", `${extendLeft}px`);
+  // Symmetric right-side padding so the user can pan past the last
+  // column into empty space.
+  // This gives the table breathing room on the right when scrolled fully right.
+  wrapper.style.setProperty("--embed-grid-pad-right", `${extendRight}px`);
+  // Inline sticky band clears whatever fixed surface sits above the editor —
+  // the page header AND the fixed formatting toolbar. `--editor-pin-offset`
+  // is the same offset the default ProseMirror table header-pin uses
+  // (published by pinOffsetWatcher); fall back to the page-header height.
+  // Standalone leaves --sticky-band-top unset (resolves to the rule default
+  // of 0).
+  wrapper.style.setProperty(
+    "--sticky-band-top",
+    "var(--editor-pin-offset, var(--page-header-height))",
+  );
+}
+
+export function BaseEmbedView({ node, editor }: NodeViewProps) {
+  const pageId = node.attrs.pageId as string | null;
+  const pendingKey = node.attrs.pendingKey as string | null;
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const hasBases = useHasFeature(Feature.BASES);
+  // Suppress the query while the slash command awaits the server-assigned
+  // pageId; useBaseQuery would otherwise fire with an empty key.
+  const { data: base, isLoading, isError } = useBaseQuery(
+    pendingKey ? "" : pageId ?? "",
+  );
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    const update = () => applyExtension(wrapper);
+    update();
+
+    const ro = new ResizeObserver(update);
+    ro.observe(wrapper);
+    // Sidebar collapse changes <main>'s left/width without resizing
+    // the wrapper itself, so observe <main> too.
+    const main = wrapper.closest("main");
+    if (main) ro.observe(main);
+
+    window.addEventListener("resize", update);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [isLoading, isError, pageId]);
+
+  // Keep --editor-pin-offset published while the embed is mounted, so the
+  // sticky column header clears the fixed toolbar even when this document
+  // has no default ProseMirror table holding the watcher open.
+  useEffect(() => {
+    pinOffsetWatcher.acquire();
+    return () => pinOffsetWatcher.release();
+  }, []);
+
+  // Error/invalid states render a compact message, not a tall reserved box.
+  // The 200px min-height (which avoids a layout jump when the real table
+  // mounts) is reserved only for the skeleton/loading/table states.
+  const isCompact = !pendingKey && (!pageId || isError);
+
+  let content: React.ReactNode;
+  if (pendingKey) {
+    // Slash command inserted the embed and is awaiting the server's
+    // assigned pageId. Match the shape the create endpoint will
+    // return for an inline-embed (Title + Text 1 + Text 2, one
+    // empty row — see BaseService.create's `defaults`) so the swap
+    // to the real table doesn't visibly collapse a large fake table
+    // down to a small empty one.
+    content = <BaseTableSkeleton rows={1} columns={3} />;
+  } else if (!pageId) {
+    content = (
+      <Box p="md">
+        <Text c="red">Invalid base embed (missing page id)</Text>
+      </Box>
+    );
+  } else if (isLoading) {
+    content = (
+      <Box p="md">
+        <Text c="dimmed">Loading...</Text>
+      </Box>
+    );
+  } else if (isError) {
+    content = (
+      <Box p="md" bg="gray.0" style={{ borderRadius: 8 }}>
+        <Text c="dimmed">You don't have access to this database.</Text>
+      </Box>
+    );
+  } else {
+    content = (
+      <BaseView
+        pageId={pageId}
+        embedded
+        editable={hasBases && editor.isEditable && (base?.canEdit ?? false)}
+      />
+    );
+  }
+
+  return (
+    <NodeViewWrapper>
+      <div ref={wrapperRef} style={{ minHeight: isCompact ? undefined : 200 }}>
+        {content}
+      </div>
+    </NodeViewWrapper>
+  );
+}
diff --git a/apps/client/src/features/editor/components/empty-page/__tests__/empty-page-get-started.spec.tsx b/apps/client/src/features/editor/components/empty-page/__tests__/empty-page-get-started.spec.tsx
new file mode 100644
index 000000000..b9654530a
--- /dev/null
+++ b/apps/client/src/features/editor/components/empty-page/__tests__/empty-page-get-started.spec.tsx
@@ -0,0 +1,75 @@
+import { afterEach, beforeAll, vi } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+
+beforeAll(() => {
+  window.matchMedia ??= ((q: string) => ({
+    matches: false, media: q, onchange: null,
+    addListener: () => {}, removeListener: () => {},
+    addEventListener: () => {}, removeEventListener: () => {}, dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia;
+});
+
+const mutate = vi.fn();
+vi.mock("@/ee/base/queries/base-query", () => ({
+  useConvertPageToBaseMutation: () => ({ mutate, isPending: false }),
+}));
+
+vi.mock("@/ee/hooks/use-feature", () => ({
+  useHasFeature: () => true,
+}));
+
+// A stub TipTap editor reporting an empty document, with no-op event wiring.
+const editorStub = {
+  isEmpty: true,
+  on: () => {},
+  off: () => {},
+};
+let editorValue: typeof editorStub | null = editorStub;
+vi.mock("jotai", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("jotai")>();
+  return { ...actual, useAtomValue: () => editorValue };
+});
+
+import { EmptyPageGetStarted } from "../empty-page-get-started";
+
+afterEach(() => {
+  cleanup();
+  mutate.mockReset();
+  editorValue = editorStub;
+});
+
+function renderBar(editable = true) {
+  return render(
+    <MantineProvider>
+      <EmptyPageGetStarted pageId="p1" editable={editable} />
+    </MantineProvider>,
+  );
+}
+
+describe("EmptyPageGetStarted", () => {
+  it("renders the Get started label and a Base chip when empty + editable", () => {
+    renderBar();
+    expect(screen.getByText("Get started with")).toBeTruthy();
+    expect(screen.getByText("Base")).toBeTruthy();
+  });
+
+  it("triggers the convert mutation with the pageId when Base is clicked", () => {
+    renderBar();
+    fireEvent.click(screen.getByText("Base"));
+    expect(mutate).toHaveBeenCalledWith({ pageId: "p1" });
+  });
+
+  it("renders nothing when not editable", () => {
+    renderBar(false);
+    expect(screen.queryByText("Get started with")).toBeNull();
+    expect(screen.queryByText("Base")).toBeNull();
+  });
+
+  it("renders nothing when there is no editor", () => {
+    editorValue = null;
+    renderBar();
+    expect(screen.queryByText("Get started with")).toBeNull();
+    expect(screen.queryByText("Base")).toBeNull();
+  });
+});
diff --git a/apps/client/src/features/editor/components/empty-page/empty-page-get-started.module.css b/apps/client/src/features/editor/components/empty-page/empty-page-get-started.module.css
new file mode 100644
index 000000000..70b19a63d
--- /dev/null
+++ b/apps/client/src/features/editor/components/empty-page/empty-page-get-started.module.css
@@ -0,0 +1,29 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  /* Push the bar to the bottom of the full-height editor container. */
+  margin-top: auto;
+  padding-top: 24px;
+  padding-bottom: 8px;
+  /* Match the content indent used by .byline and .ProseMirror so the bar
+     lines up with the title and paragraph rather than the container edge. */
+  padding-left: 3rem;
+  padding-right: 3rem;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+.label {
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
diff --git a/apps/client/src/features/editor/components/empty-page/empty-page-get-started.tsx b/apps/client/src/features/editor/components/empty-page/empty-page-get-started.tsx
new file mode 100644
index 000000000..d5efe696d
--- /dev/null
+++ b/apps/client/src/features/editor/components/empty-page/empty-page-get-started.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { Button } from "@mantine/core";
+import { IconTable } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import { useConvertPageToBaseMutation } from "@/ee/base/queries/base-query";
+import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import classes from "./empty-page-get-started.module.css";
+
+type EmptyPageGetStartedProps = {
+  pageId: string;
+  editable: boolean;
+};
+
+export function EmptyPageGetStarted({
+  pageId,
+  editable,
+}: EmptyPageGetStartedProps) {
+  const { t } = useTranslation();
+  const editor = useAtomValue(pageEditorAtom);
+  const hasBases = useHasFeature(Feature.BASES);
+  const convertMutation = useConvertPageToBaseMutation();
+
+  const [isEmpty, setIsEmpty] = useState(false);
+  useEffect(() => {
+    if (!editor) return;
+    const sync = () => setIsEmpty(editor.isEmpty);
+    sync();
+    editor.on("update", sync);
+    editor.on("create", sync);
+    return () => {
+      editor.off("update", sync);
+      editor.off("create", sync);
+    };
+  }, [editor]);
+
+  if (!editable || !hasBases || !editor || !isEmpty) return null;
+
+  const chips = [
+    {
+      key: "database",
+      label: t("Base"),
+      icon: IconTable,
+      onClick: () => convertMutation.mutate({ pageId }),
+      disabled: convertMutation.isPending,
+    },
+  ];
+
+  return (
+    <div className={classes.wrapper} contentEditable={false}>
+      <span className={classes.label}>{t("Get started with")}</span>
+      <div className={classes.chipRow}>
+        {chips.map((chip) => (
+          <Button
+            key={chip.key}
+            variant="default"
+            size="xs"
+            radius="xl"
+            leftSection={<chip.icon size={16} />}
+            onClick={chip.onClick}
+            disabled={chip.disabled}
+          >
+            {chip.label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/client/src/features/editor/components/link/link-editor-panel.tsx b/apps/client/src/features/editor/components/link/link-editor-panel.tsx
index 89389a91f..8a2acff9b 100644
--- a/apps/client/src/features/editor/components/link/link-editor-panel.tsx
+++ b/apps/client/src/features/editor/components/link/link-editor-panel.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query.ts";
 import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
 import { useParams } from "react-router-dom";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils.ts";
 import { IPage } from "@/features/page/types/page.types.ts";
 import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 import clsx from "clsx";
@@ -186,7 +186,7 @@ export const LinkEditorPanel = ({
 
                     <div style={{ flex: 1, minWidth: 0 }}>
                       <AutoTooltipText size="sm" fw={500} truncate lh={1.3}>
-                        {page.title || t("Untitled")}
+                        {getPageTitle(page.title, page.isBase, t)}
                       </AutoTooltipText>
                       {page.space?.name && (
                         <AutoTooltipText size="xs" c="dimmed" truncate lh={1.4}>
diff --git a/apps/client/src/features/editor/components/mention/mention-list.tsx b/apps/client/src/features/editor/components/mention/mention-list.tsx
index a098a1afe..a957adb17 100644
--- a/apps/client/src/features/editor/components/mention/mention-list.tsx
+++ b/apps/client/src/features/editor/components/mention/mention-list.tsx
@@ -32,6 +32,7 @@ import {
   MentionSuggestionItem,
 } from "@/features/editor/components/mention/mention.type.ts";
 import { IPage } from "@/features/page/types/page.types";
+import { getPageTitle } from "@/features/page/page.utils";
 import {
   useCreatePageMutation,
   usePageQuery,
@@ -103,7 +104,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
         items = items.concat(
           suggestion.pages.map((page) => ({
             id: uuid7(),
-            label: page.title || t("Untitled"),
+            label: getPageTitle(page.title, page.isBase, t),
             entityType: "page",
             entityId: page.id,
             slugId: page.slugId,
@@ -278,7 +279,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
 
       props.command({
         id: uuid7(),
-        label: createdPage.title || "Untitled",
+        label: getPageTitle(createdPage.title, createdPage.isBase, t),
         entityType: "page",
         entityId: createdPage.id,
         slugId: createdPage.slugId,
diff --git a/apps/client/src/features/editor/components/slash-menu/command-list.tsx b/apps/client/src/features/editor/components/slash-menu/command-list.tsx
index 2113d09ab..d645e404f 100644
--- a/apps/client/src/features/editor/components/slash-menu/command-list.tsx
+++ b/apps/client/src/features/editor/components/slash-menu/command-list.tsx
@@ -5,6 +5,7 @@ import {
 } from "@/features/editor/components/slash-menu/types";
 import {
   ActionIcon,
+  Badge,
   Group,
   Paper,
   ScrollArea,
@@ -15,6 +16,8 @@ import {
 import classes from "./slash-menu.module.css";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
 
 const CommandList = ({
   items,
@@ -33,6 +36,13 @@ const CommandList = ({
   const [countAnnouncement, setCountAnnouncement] = useState("");
   const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
 
+  const hasBases = useHasFeature(Feature.BASES);
+  // Title must match the "Base (Inline)" item in menu-items.ts. Without the
+  // bases entitlement the item stays visible but disabled; an expired license
+  // the client can't detect falls through to a handled create failure.
+  const isItemDisabled = (item: SlashMenuItemType) =>
+    !hasBases && item.title === "Base (Inline)";
+
   const flatItems = useMemo(() => {
     return Object.values(items).flat();
   }, [items]);
@@ -40,11 +50,11 @@ const CommandList = ({
   const selectItem = useCallback(
     (index: number) => {
       const item = flatItems[index];
-      if (item) {
+      if (item && !isItemDisabled(item)) {
         command(item);
       }
     },
-    [command, flatItems],
+    [command, flatItems, hasBases],
   );
 
   useEffect(() => {
@@ -140,6 +150,7 @@ const CommandList = ({
             {categoryItems.map((item: SlashMenuItemType) => {
               flatIndex += 1;
               const itemIndex = flatIndex;
+              const disabled = isItemDisabled(item);
               return (
               <UnstyledButton
                 data-item-index={itemIndex}
@@ -147,12 +158,15 @@ const CommandList = ({
                 id={`slash-command-option-${itemIndex}`}
                 role="option"
                 aria-selected={itemIndex === selectedIndex}
+                aria-disabled={disabled}
+                disabled={disabled}
                 onClick={() => selectItem(itemIndex)}
                 className={clsx(classes.menuBtn, {
                   [classes.selectedItem]: itemIndex === selectedIndex,
+                  [classes.disabledItem]: disabled,
                 })}
               >
-                <Group>
+                <Group wrap="nowrap">
                   <ActionIcon variant="default" component="div" aria-hidden="true">
                     <item.icon size={18} />
                   </ActionIcon>
@@ -166,6 +180,12 @@ const CommandList = ({
                       {t(item.description)}
                     </Text>
                   </div>
+
+                  {disabled && (
+                    <Badge size="xs" variant="light" color="gray">
+                      {t("Upgrade")}
+                    </Badge>
+                  )}
                 </Group>
               </UnstyledButton>
               );
diff --git a/apps/client/src/features/editor/components/slash-menu/menu-items.ts b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
index 7f8567558..27ae6a518 100644
--- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts
+++ b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
@@ -56,6 +56,32 @@ import {
   VimeoIcon,
   YoutubeIcon,
 } from "@/components/icons";
+import api from "@/lib/api-client";
+import { notifications } from "@mantine/notifications";
+import type { Editor } from "@tiptap/core";
+import { v7 as uuid7 } from "uuid";
+
+// Resolve the position of a baseEmbed placeholder by its pendingKey.
+// Used by the Database slash command to patch in the real pageId once
+// the create-base API responds — positions may have shifted in the
+// interim from collab edits, undo/redo, or concurrent slash commands.
+function findBaseEmbedPlaceholderPos(
+  editor: Editor,
+  pendingKey: string,
+): number | null {
+  let foundPos: number | null = null;
+  editor.state.doc.descendants((node, pos) => {
+    if (
+      node.type.name === "base" &&
+      node.attrs.pendingKey === pendingKey
+    ) {
+      foundPos = pos;
+      return false;
+    }
+    return true;
+  });
+  return foundPos;
+}
 
 const CommandGroups: SlashMenuGroupedItemsType = {
   basic: [
@@ -358,6 +384,65 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
           .run(),
     },
+    {
+      title: "Base (Inline)",
+      description: "Insert an inline base on this page",
+      searchTerms: ["base", "database", "table", "grid", "spreadsheet"],
+      icon: IconTable,
+      command: async ({ editor, range }: CommandProps) => {
+        // @ts-ignore
+        const parentPageId = editor.storage?.pageId as string | undefined;
+        if (!parentPageId) return;
+
+        // Insert a placeholder embed at the slash position synchronously
+        // so the user sees a skeleton immediately while we wait on the
+        // create-base API. Once the response lands we look the
+        // placeholder up by its pendingKey and patch in the real pageId.
+        const pendingKey = uuid7();
+
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertBaseEmbed({ pageId: null, pendingKey })
+          .run();
+
+        try {
+          const res = await api.post<{ id: string }>("/bases/create", {
+            parentPageId,
+          });
+
+          const pos = findBaseEmbedPlaceholderPos(editor, pendingKey);
+          if (pos === null) return;
+          editor
+            .chain()
+            .command(({ tr }) => {
+              tr.setNodeMarkup(pos, undefined, {
+                pageId: res.data.id,
+                pendingKey: null,
+              });
+              return true;
+            })
+            .run();
+        } catch {
+          const pos = findBaseEmbedPlaceholderPos(editor, pendingKey);
+          if (pos !== null) {
+            editor
+              .chain()
+              .command(({ tr }) => {
+                const node = tr.doc.nodeAt(pos);
+                if (node) tr.delete(pos, pos + node.nodeSize);
+                return true;
+              })
+              .run();
+          }
+          notifications.show({
+            message: "Failed to create base",
+            color: "red",
+          });
+        }
+      },
+    },
     {
       title: "Toggle block",
       description: "Insert collapsible block.",
diff --git a/apps/client/src/features/editor/components/slash-menu/slash-menu.module.css b/apps/client/src/features/editor/components/slash-menu/slash-menu.module.css
index 25f9a110e..24ad3ecc0 100644
--- a/apps/client/src/features/editor/components/slash-menu/slash-menu.module.css
+++ b/apps/client/src/features/editor/components/slash-menu/slash-menu.module.css
@@ -25,3 +25,8 @@
     background: var(--mantine-color-gray-light);
   }
 }
+
+.disabledItem {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
diff --git a/apps/client/src/features/editor/extensions/extensions.ts b/apps/client/src/features/editor/extensions/extensions.ts
index 87c7b9e5f..138a52f14 100644
--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@@ -61,6 +61,7 @@ import {
   TransclusionSource,
   TransclusionReference,
   TableView,
+  BaseEmbed as BaseEmbedNode,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -91,6 +92,7 @@ import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
 import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
 import TransclusionView from "@/features/editor/components/transclusion/transclusion-view.tsx";
 import TransclusionReferenceView from "@/features/editor/components/transclusion/transclusion-reference-view.tsx";
+import { BaseEmbedView } from "@/features/editor/components/base-embed/base-embed-view.tsx";
 import { common, createLowlight } from "lowlight";
 import plaintext from "highlight.js/lib/languages/plaintext";
 import powershell from "highlight.js/lib/languages/powershell";
@@ -381,6 +383,11 @@ export const mainExtensions = [
   TransclusionReference.configure({
     view: TransclusionReferenceView,
   }),
+  BaseEmbedNode.extend({
+    addNodeView() {
+      return ReactNodeViewRenderer(BaseEmbedView);
+    },
+  }),
   MarkdownClipboard.configure({
     transformPastedText: true,
   }),
diff --git a/apps/client/src/features/editor/full-editor.tsx b/apps/client/src/features/editor/full-editor.tsx
index 98930db28..f41fe0f7f 100644
--- a/apps/client/src/features/editor/full-editor.tsx
+++ b/apps/client/src/features/editor/full-editor.tsx
@@ -26,6 +26,7 @@ import { useAsideTriggerProps } from "@/hooks/use-toggle-aside.tsx";
 import { DeletedPageBanner } from "@/features/page/trash/components/deleted-page-banner.tsx";
 import clsx from "clsx";
 import { currentPageEditModeAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import { EmptyPageGetStarted } from "@/features/editor/components/empty-page/empty-page-get-started";
 
 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
@@ -90,6 +91,7 @@ export function FullEditor({
       fluid={fullPageWidth}
       size={!fullPageWidth && 900}
       className={classes.editor}
+      style={{ display: "flex", flexDirection: "column" }}
     >
       {editorToolbarEnabled && editable && isEditMode && (
         <MemoizedFixedToolbar />
@@ -113,6 +115,7 @@ export function FullEditor({
         content={content}
         canComment={canComment}
       />
+      <EmptyPageGetStarted pageId={pageId} editable={editable} />
     </Container>
   );
 }
diff --git a/apps/client/src/features/editor/styles/base-embed.css b/apps/client/src/features/editor/styles/base-embed.css
new file mode 100644
index 000000000..6c5e90472
--- /dev/null
+++ b/apps/client/src/features/editor/styles/base-embed.css
@@ -0,0 +1,17 @@
+.ProseMirror {
+  .node-base {
+    /* Suppress the default ProseMirror atom-node selection outline —
+     * the embed reads as a document block, not a focused widget. */
+    &.ProseMirror-selectednode {
+      outline: none;
+    }
+
+    /* Page-reference pills are self-contained chips. The editor's `a` rule
+     * would otherwise add a link underline + bold weight on top of the chip,
+     * making it look different from a standalone base. Keep it a plain chip. */
+    a.pagePill {
+      border-bottom: none;
+      font-weight: 400;
+    }
+  }
+}
diff --git a/apps/client/src/features/editor/styles/core.css b/apps/client/src/features/editor/styles/core.css
index 077570fb5..ef61425a9 100644
--- a/apps/client/src/features/editor/styles/core.css
+++ b/apps/client/src/features/editor/styles/core.css
@@ -1,3 +1,11 @@
+:root {
+  /* Height of the fixed PageHeader at the top of every page. Used by
+   * standalone base layout (paddingTop) and by sticky bands inside
+   * inline base embeds (top offset). One source of truth; if the
+   * page header ever changes height, edit only this. */
+  --page-header-height: 45px;
+}
+
 .ProseMirror {
   background-color: light-dark(
     var(--mantine-color-white),
@@ -286,3 +294,24 @@
   margin-top: 0;
   margin-bottom: 0.75em;
 }
+
+/* The full-page base view positions its title with its own outer
+ * wrapper padding (so it can align with the table below). The global
+ * 3rem .ProseMirror padding-x would push the title further in than
+ * the table — drop it inside the base title wrapper only. */
+.base-page-title .ProseMirror {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* Definite height so the inner .tableScrollport scrolls and the sticky table
+ * header pins. Flow on print, else it emits a trailing blank page. */
+.base-page-root {
+  height: calc(100dvh - var(--app-shell-header-height, 45px));
+}
+
+@media print {
+  .base-page-root {
+    height: 100%;
+  }
+}
diff --git a/apps/client/src/features/editor/styles/editor.module.css b/apps/client/src/features/editor/styles/editor.module.css
index ed5f86432..93f377dc7 100644
--- a/apps/client/src/features/editor/styles/editor.module.css
+++ b/apps/client/src/features/editor/styles/editor.module.css
@@ -1,11 +1,13 @@
 .editor {
     height: 100%;
+    min-height: calc(100dvh - var(--app-shell-header-height, 45px) - 96px);
     padding: 8px 0;
     margin: 48px auto;
 
     @media print {
         padding: 0;
         margin: 0;
+        min-height: 0;
     }
 }
 
diff --git a/apps/client/src/features/editor/styles/index.css b/apps/client/src/features/editor/styles/index.css
index 52d9268e1..7b1ce93e8 100644
--- a/apps/client/src/features/editor/styles/index.css
+++ b/apps/client/src/features/editor/styles/index.css
@@ -17,3 +17,4 @@
 @import "./indent.css";
 @import "./columns.css";
 @import "./status.css";
+@import "./base-embed.css";
diff --git a/apps/client/src/features/editor/title-editor.tsx b/apps/client/src/features/editor/title-editor.tsx
index fefe9f330..dd9bcd8f9 100644
--- a/apps/client/src/features/editor/title-editor.tsx
+++ b/apps/client/src/features/editor/title-editor.tsx
@@ -35,6 +35,7 @@ export interface TitleEditorProps {
   title: string;
   spaceSlug: string;
   editable: boolean;
+  isBase?: boolean;
 }
 
 export function TitleEditor({
@@ -43,6 +44,7 @@ export function TitleEditor({
   title,
   spaceSlug,
   editable,
+  isBase,
 }: TitleEditorProps) {
   const { t } = useTranslation();
   const { mutateAsync: updateTitlePageMutationAsync } =
@@ -64,7 +66,7 @@ export function TitleEditor({
       }),
       Text,
       Placeholder.configure({
-        placeholder: t("Untitled"),
+        placeholder: isBase ? t("Untitled base") : t("Untitled"),
         showOnlyWhenEditable: false,
       }),
       History.configure({
@@ -106,11 +108,17 @@ export function TitleEditor({
   });
 
   useEffect(() => {
-    const anchorId = window.location.hash
-      ? window.location.hash.substring(1)
-      : undefined;
-    const pageSlug = buildPageUrl(spaceSlug, slugId, title, anchorId);
-    navigate(pageSlug, { replace: true });
+    // Canonicalize only the path slug; keep query params (?row=, ?view=
+    // deep links) and the hash anchor intact.
+    const pageSlug = buildPageUrl(spaceSlug, slugId, title);
+    navigate(
+      {
+        pathname: pageSlug,
+        search: window.location.search,
+        hash: window.location.hash,
+      },
+      { replace: true },
+    );
   }, [title]);
 
   const saveTitle = useCallback(() => {
diff --git a/apps/client/src/features/favorite/types/favorite.types.ts b/apps/client/src/features/favorite/types/favorite.types.ts
index 7bea026a0..f47e8f108 100644
--- a/apps/client/src/features/favorite/types/favorite.types.ts
+++ b/apps/client/src/features/favorite/types/favorite.types.ts
@@ -14,6 +14,7 @@ export type IFavorite = {
     slugId: string;
     title: string;
     icon: string | null;
+    isBase: boolean;
     spaceId: string;
   };
   space?: {
diff --git a/apps/client/src/features/home/components/created-by-me.tsx b/apps/client/src/features/home/components/created-by-me.tsx
index bc79da994..3b09efb49 100644
--- a/apps/client/src/features/home/components/created-by-me.tsx
+++ b/apps/client/src/features/home/components/created-by-me.tsx
@@ -4,15 +4,15 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ThemeIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton";
-import { buildPageUrl } from "@/features/page/page.utils";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
 import { formattedDate } from "@/lib/time";
 import { useCreatedByQuery } from "@/features/page/queries/page-query";
-import { IconFileDescription, IconFiles } from "@tabler/icons-react";
+import { PageListIcon } from "@/components/common/page-list-icon";
+import { IconFiles } from "@tabler/icons-react";
 import { EmptyState } from "@/components/ui/empty-state";
 import { getSpaceUrl } from "@/lib/config";
 import { useTranslation } from "react-i18next";
@@ -62,17 +62,9 @@ export default function CreatedByMe({ spaceId }: Props) {
                     )}
                   >
                     <Group wrap="nowrap">
-                      {page.icon || (
-                        <ThemeIcon
-                          variant="transparent"
-                          color="gray"
-                          size={18}
-                        >
-                          <IconFileDescription size={18} />
-                        </ThemeIcon>
-                      )}
+                      <PageListIcon icon={page.icon} isBase={page.isBase} />
                       <Text fw={500} size="md" lineClamp={1}>
-                        {page.title || t("Untitled")}
+                        {getPageTitle(page.title, page.isBase, t)}
                       </Text>
                     </Group>
                   </UnstyledButton>
diff --git a/apps/client/src/features/home/components/favorites-pages.tsx b/apps/client/src/features/home/components/favorites-pages.tsx
index 9aada2141..875666f48 100644
--- a/apps/client/src/features/home/components/favorites-pages.tsx
+++ b/apps/client/src/features/home/components/favorites-pages.tsx
@@ -4,15 +4,15 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ThemeIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton";
-import { buildPageUrl } from "@/features/page/page.utils";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
 import { formattedDate } from "@/lib/time";
 import { useFavoritesQuery } from "@/features/favorite/queries/favorite-query";
-import { IconFileDescription, IconStar } from "@tabler/icons-react";
+import { PageListIcon } from "@/components/common/page-list-icon";
+import { IconStar } from "@tabler/icons-react";
 import { EmptyState } from "@/components/ui/empty-state";
 import { getSpaceUrl } from "@/lib/config";
 import { useTranslation } from "react-i18next";
@@ -63,17 +63,12 @@ export default function FavoritesPages({ spaceId }: Props) {
                       )}
                     >
                       <Group wrap="nowrap">
-                        {fav.page.icon || (
-                          <ThemeIcon
-                            variant="transparent"
-                            color="gray"
-                            size={18}
-                          >
-                            <IconFileDescription size={18} />
-                          </ThemeIcon>
-                        )}
+                        <PageListIcon
+                          icon={fav.page.icon}
+                          isBase={fav.page.isBase}
+                        />
                         <Text fw={500} size="md" lineClamp={1}>
-                          {fav.page.title || t("Untitled")}
+                          {getPageTitle(fav.page.title, fav.page.isBase, t)}
                         </Text>
                       </Group>
                     </UnstyledButton>
diff --git a/apps/client/src/features/notification/components/notification-item.tsx b/apps/client/src/features/notification/components/notification-item.tsx
index 75e73d235..418647375 100644
--- a/apps/client/src/features/notification/components/notification-item.tsx
+++ b/apps/client/src/features/notification/components/notification-item.tsx
@@ -18,7 +18,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useState } from "react";
 import { useMarkReadMutation } from "../queries/notification-query";
-import { buildPageUrl } from "@/features/page/page.utils";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
 import { formatRelativeTime } from "../notification.utils";
 import classes from "../notification.module.css";
 
@@ -143,7 +143,7 @@ export function NotificationItem({
                 />
               )}
               <Text size="xs" c="dimmed" lineClamp={1}>
-                {notification.page.title || t("Untitled")}
+                {getPageTitle(notification.page.title, undefined, t)}
               </Text>
             </Group>
           )}
diff --git a/apps/client/src/features/page-details/components/backlinks-list.tsx b/apps/client/src/features/page-details/components/backlinks-list.tsx
index 90547f2ca..55fac0a9f 100644
--- a/apps/client/src/features/page-details/components/backlinks-list.tsx
+++ b/apps/client/src/features/page-details/components/backlinks-list.tsx
@@ -14,7 +14,7 @@ import {
   BacklinkDirection,
   IBacklinkPageItem,
 } from "@/features/page-details/types/backlink.types.ts";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils.ts";
 import { getPageIcon } from "@/lib";
 
 interface BacklinksListProps {
@@ -86,7 +86,7 @@ export function BacklinksList({
             {getPageIcon(item.icon ?? "")}
             <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
               <Text size="sm" fw={500} lineClamp={1}>
-                {item.title || t("Untitled")}
+                {getPageTitle(item.title, undefined, t)}
               </Text>
               {item.space?.name && (
                 <Text size="xs" c="dimmed" lineClamp={1}>
diff --git a/apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx b/apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx
index d02ba6e91..c55a9ecf7 100644
--- a/apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx
+++ b/apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx
@@ -15,15 +15,17 @@ import { IconCornerDownRightDouble, IconDots } from "@tabler/icons-react";
 import { Link, useParams } from "react-router-dom";
 import classes from "./breadcrumb.module.css";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils.ts";
+import type { TFunction } from "i18next";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { extractPageSlugId } from "@/lib";
 import { useMediaQuery } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
 
-function getTitle(name: string, icon: string) {
-  if (icon) {
-    return `${icon} ${name}`;
+function getTitle(node: SpaceTreeNode, t: TFunction) {
+  const name = getPageTitle(node.name, node.isBase, t);
+  if (node.icon) {
+    return `${node.icon} ${name}`;
   }
   return name;
 }
@@ -58,7 +60,7 @@ export default function Breadcrumb() {
           style={{ border: "none" }}
         >
           <Text fz={"sm"} className={classes.truncatedText}>
-            {getTitle(node.name, node.icon)}
+            {getTitle(node, t)}
           </Text>
         </Button>
       </Button.Group>
@@ -75,7 +77,7 @@ export default function Breadcrumb() {
           style={{ border: "none" }}
         >
           <Text fz={"sm"} className={classes.truncatedText}>
-            {getTitle(node.name, node.icon)}
+            {getTitle(node, t)}
           </Text>
         </Button>
       </Button.Group>
@@ -83,7 +85,7 @@ export default function Breadcrumb() {
 
   const renderAnchor = useCallback(
     (node: SpaceTreeNode, isCurrent = false) => (
-      <Tooltip label={node.name} key={node.id}>
+      <Tooltip label={getPageTitle(node.name, node.isBase, t)} key={node.id}>
         <Anchor
           component={Link}
           to={buildPageUrl(spaceSlug, node.slugId, node.name)}
@@ -93,11 +95,11 @@ export default function Breadcrumb() {
           className={classes.truncatedText}
           aria-current={isCurrent ? "page" : undefined}
         >
-          {getTitle(node.name, node.icon)}
+          {getTitle(node, t)}
         </Anchor>
       </Tooltip>
     ),
-    [spaceSlug],
+    [spaceSlug, t],
   );
 
   const getBreadcrumbItems = () => {
diff --git a/apps/client/src/features/page/components/header/page-header-menu.tsx b/apps/client/src/features/page/components/header/page-header-menu.tsx
index d82cb494c..e011e9ec4 100644
--- a/apps/client/src/features/page/components/header/page-header-menu.tsx
+++ b/apps/client/src/features/page/components/header/page-header-menu.tsx
@@ -101,7 +101,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
     <>
       <ConnectionWarning />
 
-      {!readOnly && <PageEditModeToggle size="xs" />}
+      {!readOnly && !page?.isBase && <PageEditModeToggle size="xs" />}
 
       <PageShareModal readOnly={readOnly} />
 
@@ -116,16 +116,18 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
         </ActionIcon>
       </Tooltip>
 
-      <Tooltip label={t("Table of contents")} openDelay={250} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          aria-label={t("Table of contents")}
-          {...tocTriggerProps}
-        >
-          <IconList size={20} stroke={2} />
-        </ActionIcon>
-      </Tooltip>
+      {!page?.isBase && (
+        <Tooltip label={t("Table of contents")} openDelay={250} withArrow>
+          <ActionIcon
+            variant="subtle"
+            color="dark"
+            aria-label={t("Table of contents")}
+            {...tocTriggerProps}
+          >
+            <IconList size={20} stroke={2} />
+          </ActionIcon>
+        </Tooltip>
+      )}
 
       <PageActionMenu readOnly={readOnly} />
     </>
@@ -234,12 +236,14 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
             {t("Copy link")}
           </Menu.Item>
 
-          <Menu.Item
-            leftSection={<IconMarkdown size={16} />}
-            onClick={handleCopyAsMarkdown}
-          >
-            {t("Copy as Markdown")}
-          </Menu.Item>
+          {!page?.isBase && (
+            <Menu.Item
+              leftSection={<IconMarkdown size={16} />}
+              onClick={handleCopyAsMarkdown}
+            >
+              {t("Copy as Markdown")}
+            </Menu.Item>
+          )}
 
           <Menu.Item
             leftSection={
@@ -270,22 +274,26 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
             </Menu.Item>
           )}
 
-          <Menu.Divider />
+          {!page?.isBase && <Menu.Divider />}
 
-          <Menu.Item leftSection={<IconArrowsHorizontal size={16} />}>
-            <Group wrap="nowrap">
-              <PageWidthToggle label={t("Full width")} />
-            </Group>
-          </Menu.Item>
+          {!page?.isBase && (
+            <Menu.Item leftSection={<IconArrowsHorizontal size={16} />}>
+              <Group wrap="nowrap">
+                <PageWidthToggle label={t("Full width")} />
+              </Group>
+            </Menu.Item>
+          )}
 
-          <Menu.Item
-            leftSection={<IconHistory size={16} />}
-            onClick={openHistoryModal}
-          >
-            {t("Page history")}
-          </Menu.Item>
+          {!page?.isBase && (
+            <Menu.Item
+              leftSection={<IconHistory size={16} />}
+              onClick={openHistoryModal}
+            >
+              {t("Page history")}
+            </Menu.Item>
+          )}
 
-          {!readOnly && (
+          {!readOnly && !page?.isBase && (
             <PageVerificationMenuItem
               pageId={page?.id}
               onClick={openVerificationModal}
diff --git a/apps/client/src/features/page/page.utils.ts b/apps/client/src/features/page/page.utils.ts
index 06d0ca8d7..8b0111a28 100644
--- a/apps/client/src/features/page/page.utils.ts
+++ b/apps/client/src/features/page/page.utils.ts
@@ -1,4 +1,18 @@
 import slugify from "@sindresorhus/slugify";
+import type { TFunction } from "i18next";
+
+/**
+ * Display title for a page, with a base-aware empty-title fallback: bases
+ * fall back to "Untitled base", normal pages to "Untitled". Single chokepoint
+ * so the fallback stays consistent across the UI.
+ */
+export function getPageTitle(
+  title: string | null | undefined,
+  isBase: boolean | undefined,
+  t: TFunction,
+): string {
+  return title || (isBase ? t("Untitled base") : t("Untitled"));
+}
 
 const buildPageSlug = (pageSlugId: string, pageTitle?: string): string => {
   const titleSlug = slugify(pageTitle?.substring(0, 70) || "untitled", {
diff --git a/apps/client/src/features/page/tree/components/doc-tree-row.tsx b/apps/client/src/features/page/tree/components/doc-tree-row.tsx
index 347f1f3e7..e3aebe9e9 100644
--- a/apps/client/src/features/page/tree/components/doc-tree-row.tsx
+++ b/apps/client/src/features/page/tree/components/doc-tree-row.tsx
@@ -6,6 +6,7 @@ import {
   useState,
   type ReactNode,
 } from 'react';
+import { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import {
@@ -145,7 +146,15 @@ function DocTreeRowInner<T extends object>(props: Props<T>) {
               getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
               render: ({ container }) => {
                 const root = createRoot(container);
-                root.render(<DocTreeDragPreview label={getDragLabel(node)} />);
+                // flushSync forces the preview to paint into `container`
+                // synchronously, before pragmatic-dnd snapshots it for the
+                // native drag image. Without it, createRoot's async render
+                // leaves the container empty at snapshot time, so the browser
+                // falls back to a default snapshot of the source row (and the
+                // stale image can linger on screen).
+                flushSync(() => {
+                  root.render(<DocTreeDragPreview label={getDragLabel(node)} />);
+                });
                 return () => root.unmount();
               },
             });
diff --git a/apps/client/src/features/page/tree/components/space-tree-node-menu.tsx b/apps/client/src/features/page/tree/components/space-tree-node-menu.tsx
index 27b0ce210..e2749b624 100644
--- a/apps/client/src/features/page/tree/components/space-tree-node-menu.tsx
+++ b/apps/client/src/features/page/tree/components/space-tree-node-menu.tsx
@@ -20,6 +20,7 @@ import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import CopyPageModal from "@/features/page/components/copy-page-modal.tsx";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { getPageTitle } from "@/features/page/page.utils";
 import { duplicatePage } from "@/features/page/services/page-service.ts";
 import { useClipboard } from "@/hooks/use-clipboard";
 import { getAppUrl } from "@/lib/config.ts";
@@ -125,7 +126,7 @@ export function NodeMenu({ node, canEdit }: NodeMenuProps) {
           <ActionIcon
             variant="transparent"
             c="gray"
-            aria-label={t("Page menu for {{name}}", { name: node.name || t("untitled") })}
+            aria-label={t("Page menu for {{name}}", { name: getPageTitle(node.name, node.isBase, t) })}
             tabIndex={-1}
             onClick={(e) => {
               e.preventDefault();
diff --git a/apps/client/src/features/page/tree/components/space-tree-row.tsx b/apps/client/src/features/page/tree/components/space-tree-row.tsx
index 3da690066..92540bc6c 100644
--- a/apps/client/src/features/page/tree/components/space-tree-row.tsx
+++ b/apps/client/src/features/page/tree/components/space-tree-row.tsx
@@ -9,11 +9,13 @@ import {
   IconFileDescription,
   IconPlus,
   IconPointFilled,
+  IconTable,
 } from "@tabler/icons-react";
 
 import EmojiPicker from "@/components/ui/emoji-picker.tsx";
 import { queryClient } from "@/main.tsx";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { getPageTitle } from "@/features/page/page.utils";
 import { getPageById } from "@/features/page/services/page-service.ts";
 import {
   useUpdatePageMutation,
@@ -161,7 +163,13 @@ export function SpaceTreeRow({
         <EmojiPicker
           onEmojiSelect={handleEmojiSelect}
           icon={
-            node.icon ? node.icon : <IconFileDescription size="18" />
+            node.icon ? (
+              node.icon
+            ) : node.isBase ? (
+              <IconTable size={18} />
+            ) : (
+              <IconFileDescription size="18" />
+            )
           }
           readOnly={!canEdit}
           removeEmojiAction={handleRemoveEmoji}
@@ -169,7 +177,7 @@ export function SpaceTreeRow({
         />
       </div>
 
-      <span className={classes.text}>{node.name || t("untitled")}</span>
+      <span className={classes.text}>{getPageTitle(node.name, node.isBase, t)}</span>
 
       <div className={classes.actions}>
         <NodeMenu node={node} canEdit={canEdit} />
diff --git a/apps/client/src/features/page/tree/components/space-tree.tsx b/apps/client/src/features/page/tree/components/space-tree.tsx
index 1c3aab8ec..3b85d8ea0 100644
--- a/apps/client/src/features/page/tree/components/space-tree.tsx
+++ b/apps/client/src/features/page/tree/components/space-tree.tsx
@@ -18,6 +18,7 @@ import {
   mergeRootTrees,
 } from "@/features/page/tree/utils/utils.ts";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
+import { getPageTitle } from "@/features/page/page.utils";
 import { treeModel } from "@/features/page/tree/model/tree-model";
 import { getPageBreadcrumbs } from "@/features/page/services/page-service.ts";
 import { IPage } from "@/features/page/types/page.types.ts";
@@ -200,7 +201,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     [],
   );
   const getDragLabel = useCallback(
-    (n: SpaceTreeNode) => n.name || t("untitled"),
+    (n: SpaceTreeNode) => getPageTitle(n.name, n.isBase, t),
     [t],
   );
 
diff --git a/apps/client/src/features/page/tree/types.ts b/apps/client/src/features/page/tree/types.ts
index 6c60b157d..5d43df27e 100644
--- a/apps/client/src/features/page/tree/types.ts
+++ b/apps/client/src/features/page/tree/types.ts
@@ -7,6 +7,7 @@ export type SpaceTreeNode = {
   spaceId: string;
   parentPageId: string;
   hasChildren: boolean;
+  isBase?: boolean;
   canEdit?: boolean;
   children: SpaceTreeNode[];
 };
diff --git a/apps/client/src/features/page/tree/utils/utils.ts b/apps/client/src/features/page/tree/utils/utils.ts
index 0c42f9b92..71a2b26ce 100644
--- a/apps/client/src/features/page/tree/utils/utils.ts
+++ b/apps/client/src/features/page/tree/utils/utils.ts
@@ -24,6 +24,7 @@ export function buildTree(pages: IPage[]): SpaceTreeNode[] {
       hasChildren: page.hasChildren,
       spaceId: page.spaceId,
       parentPageId: page.parentPageId,
+      isBase: page.isBase,
       canEdit: page.canEdit ?? page.permissions?.canEdit,
       children: [],
     };
@@ -42,10 +43,6 @@ export function findBreadcrumbPath(
   path: SpaceTreeNode[] = [],
 ): SpaceTreeNode[] | null {
   for (const node of tree) {
-    if (!node.name || node.name.trim() === "") {
-      node.name = "untitled";
-    }
-
     if (node.id === pageId) {
       return [...path, node];
     }
diff --git a/apps/client/src/features/page/types/page.types.ts b/apps/client/src/features/page/types/page.types.ts
index 0bba09ff1..41cf689fa 100644
--- a/apps/client/src/features/page/types/page.types.ts
+++ b/apps/client/src/features/page/types/page.types.ts
@@ -12,6 +12,7 @@ export interface IPage {
   spaceId: string;
   workspaceId: string;
   isLocked: boolean;
+  isBase: boolean;
   lastUpdatedById: string;
   createdAt: Date;
   updatedAt: Date;
diff --git a/apps/client/src/features/space/permissions/permissions.type.ts b/apps/client/src/features/space/permissions/permissions.type.ts
index 8e4b4de95..cf5dbc355 100644
--- a/apps/client/src/features/space/permissions/permissions.type.ts
+++ b/apps/client/src/features/space/permissions/permissions.type.ts
@@ -11,6 +11,9 @@ export enum SpaceCaslSubject {
   Page = "page",
 }
 
+// Bases are pages and inherit Page permissions — a separate Base
+// subject was redundant and has been dropped from the server's casl
+// rules too. Anything that used to check Base now checks Page.
 export type SpaceAbility =
   | [SpaceCaslAction, SpaceCaslSubject.Settings]
   | [SpaceCaslAction, SpaceCaslSubject.Member]
diff --git a/apps/client/src/features/websocket/use-tree-socket.ts b/apps/client/src/features/websocket/use-tree-socket.ts
index c4cd083b4..e1c19f29f 100644
--- a/apps/client/src/features/websocket/use-tree-socket.ts
+++ b/apps/client/src/features/websocket/use-tree-socket.ts
@@ -48,6 +48,11 @@ export const useTreeSocket = () => {
                   icon: event.payload.icon,
                 } as Partial<SpaceTreeNode>);
               }
+              if (event.payload?.isBase !== undefined) {
+                next = treeModel.update(next, event.id, {
+                  isBase: event.payload.isBase,
+                } as Partial<SpaceTreeNode>);
+              }
               return next;
             });
           }
diff --git a/apps/client/src/lib/api-client.ts b/apps/client/src/lib/api-client.ts
index 17f7e1029..d2d3bb96a 100644
--- a/apps/client/src/lib/api-client.ts
+++ b/apps/client/src/lib/api-client.ts
@@ -10,7 +10,11 @@ const api: AxiosInstance = axios.create({
 api.interceptors.response.use(
   (response) => {
     // we need the response headers for these endpoints
-    const exemptEndpoints = ["/api/pages/export", "/api/spaces/export"];
+    const exemptEndpoints = [
+      "/api/pages/export",
+      "/api/spaces/export",
+      "/api/bases/export-csv",
+    ];
     if (response.request.responseURL) {
       const path = new URL(response.request.responseURL)?.pathname;
       if (path && exemptEndpoints.includes(path)) {
diff --git a/apps/client/src/pages/favorites/favorites-page.tsx b/apps/client/src/pages/favorites/favorites-page.tsx
index 1d28c7ab6..e3cfe14d1 100644
--- a/apps/client/src/pages/favorites/favorites-page.tsx
+++ b/apps/client/src/pages/favorites/favorites-page.tsx
@@ -10,7 +10,7 @@ import {
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
-import { buildPageUrl } from "@/features/page/page.utils";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
 import { formattedDate } from "@/lib/time";
 import { useFavoritesQuery } from "@/features/favorite/queries/favorite-query";
 import { IconFileDescription, IconStar } from "@tabler/icons-react";
@@ -82,7 +82,7 @@ export default function FavoritesPage() {
                               </ThemeIcon>
                             )}
                             <Text fw={500} size="md" lineClamp={1}>
-                              {fav.page.title || t("Untitled")}
+                              {getPageTitle(fav.page.title, undefined, t)}
                             </Text>
                           </Group>
                         </UnstyledButton>
diff --git a/apps/client/src/pages/page/page.tsx b/apps/client/src/pages/page/page.tsx
index 1eecd2512..fb2e9d590 100644
--- a/apps/client/src/pages/page/page.tsx
+++ b/apps/client/src/pages/page/page.tsx
@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query";
 import { FullEditor } from "@/features/editor/full-editor";
+import { TitleEditor } from "@/features/editor/title-editor";
 import HistoryModal from "@/features/page-history/components/history-modal";
 import { Helmet } from "react-helmet-async";
 import PageHeader from "@/features/page/components/header/page-header.tsx";
@@ -13,7 +14,12 @@ import { IconAlertTriangle, IconFileOff } from "@tabler/icons-react";
 import { Button } from "@mantine/core";
 import { Link } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
+import { BaseView } from "@/ee/base/components/base-view";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { getPageTitle } from "@/features/page/page.utils";
 const MemoizedFullEditor = React.memo(FullEditor);
+const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageHeader = React.memo(PageHeader);
 const MemoizedHistoryModal = React.memo(HistoryModal);
 
@@ -52,6 +58,7 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
   } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
+  const hasBases = useHasFeature(Feature.BASES);
   const canEdit = !page?.deletedAt && (page?.permissions?.canEdit ?? false);
   const canComment =
     canEdit ||
@@ -90,11 +97,70 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
     return <></>;
   }
 
+  if (page?.isBase) {
+    return (
+      <div
+        className="base-page-root"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          // Height: see `.base-page-root` in core.css.
+          // Clear the fixed PageHeader (breadcrumb) plus a little extra so the
+          // pinned column-header row isn't tucked half under it.
+          paddingTop: "calc(var(--page-header-height) + 18px)",
+        }}
+      >
+        <Helmet>
+          <title>{`${page?.icon || ""}  ${getPageTitle(page?.title, page?.isBase, t)}`}</title>
+        </Helmet>
+        <MemoizedPageHeader readOnly={!canEdit} />
+        <div
+          style={{
+            flex: 1,
+            minHeight: 0,
+            display: "flex",
+            flexDirection: "column",
+            paddingInline: 24,
+          }}
+        >
+          <div
+            style={{
+              flex: 1,
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <BaseView
+              pageId={page.id}
+              editable={hasBases && canEdit}
+              titleSlot={
+                <div
+                  className="base-page-title"
+                  style={{ paddingTop: 32, paddingBottom: 12 }}
+                >
+                  <MemoizedTitleEditor
+                    pageId={page.id}
+                    slugId={page.slugId}
+                    title={page.title}
+                    spaceSlug={page.space?.slug ?? ""}
+                    editable={hasBases && canEdit}
+                    isBase
+                  />
+                </div>
+              }
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     page && (
       <div>
         <Helmet>
-          <title>{`${page?.icon || ""}  ${page?.title || t("untitled")}`}</title>
+          <title>{`${page?.icon || ""}  ${getPageTitle(page?.title, page?.isBase, t)}`}</title>
         </Helmet>
 
         <MemoizedPageHeader readOnly={!canEdit} />
diff --git a/apps/client/src/theme.ts b/apps/client/src/theme.ts
index d2bc4b3f3..fd2a1f72c 100644
--- a/apps/client/src/theme.ts
+++ b/apps/client/src/theme.ts
@@ -103,6 +103,7 @@ export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
     // ~6.8:1. Affects every <Badge color="green" variant="light"> and
     // matching Button / Text usages.
     "--mantine-color-green-light-color": "#1B5E20",
+    "--mantine-color-orange-light-color": "#a63508",
   },
   dark: {
     "--mantine-color-dark-light-color": "var(--mantine-color-gray-4)",
diff --git a/apps/server/package.json b/apps/server/package.json
index dabfe8ecf..78b17f1c8 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -75,6 +75,7 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.15.1",
     "cookie": "^1.1.1",
+    "csv-stringify": "^6",
     "fast-bm25": "0.0.5",
     "fastify-ip": "^2.0.0",
     "fs-extra": "^11.3.4",
@@ -192,7 +193,9 @@
     "moduleNameMapper": {
       "^@docmost/db/(.*)$": "<rootDir>/database/$1",
       "^@docmost/transactional/(.*)$": "<rootDir>/integrations/transactional/$1",
-      "^@docmost/ee/(.*)$": "<rootDir>/ee/$1"
+      "^@docmost/ee/(.*)$": "<rootDir>/ee/$1",
+      "^@docmost/base-formula/server$": "<rootDir>/../../../packages/base-formula/src/index.server.ts",
+      "^@docmost/base-formula/client$": "<rootDir>/../../../packages/base-formula/src/index.client.ts"
     }
   }
 }
diff --git a/apps/server/src/collaboration/collaboration.util.ts b/apps/server/src/collaboration/collaboration.util.ts
index 554aa43bd..e8e8d4273 100644
--- a/apps/server/src/collaboration/collaboration.util.ts
+++ b/apps/server/src/collaboration/collaboration.util.ts
@@ -44,6 +44,7 @@ import {
   htmlToMarkdown,
   TransclusionSource,
   TransclusionReference,
+  BaseEmbed,
 } from '@docmost/editor-ext';
 import { generateText, getSchema, JSONContent } from '@tiptap/core';
 import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
@@ -109,6 +110,7 @@ export const tiptapExtensions = [
   Status,
   TransclusionSource,
   TransclusionReference,
+  BaseEmbed
 ] as any;
 
 export function jsonToHtml(tiptapJson: any) {
diff --git a/apps/server/src/common/events/event.contants.ts b/apps/server/src/common/events/event.contants.ts
index c766fe59f..3a0ecba17 100644
--- a/apps/server/src/common/events/event.contants.ts
+++ b/apps/server/src/common/events/event.contants.ts
@@ -15,4 +15,29 @@ export enum EventName {
   WORKSPACE_CREATED = 'workspace.created',
   WORKSPACE_UPDATED = 'workspace.updated',
   WORKSPACE_DELETED = 'workspace.deleted',
+
+  BASE_CREATED = 'base.created',
+  BASE_UPDATED = 'base.updated',
+  BASE_DELETED = 'base.deleted',
+
+  BASE_ROW_CREATED = 'base.row.created',
+  BASE_ROW_UPDATED = 'base.row.updated',
+  BASE_ROW_DELETED = 'base.row.deleted',
+  BASE_ROWS_DELETED = 'base.rows.deleted',
+  BASE_ROW_RESTORED = 'base.row.restored',
+  BASE_ROW_REORDERED = 'base.row.reordered',
+
+  BASE_PROPERTY_CREATED = 'base.property.created',
+  BASE_PROPERTY_UPDATED = 'base.property.updated',
+  BASE_PROPERTY_DELETED = 'base.property.deleted',
+  BASE_PROPERTY_REORDERED = 'base.property.reordered',
+
+  BASE_VIEW_CREATED = 'base.view.created',
+  BASE_VIEW_UPDATED = 'base.view.updated',
+  BASE_VIEW_DELETED = 'base.view.deleted',
+
+  BASE_SCHEMA_BUMPED = 'base.schema.bumped',
+  BASE_ROWS_UPDATED = 'base.rows.updated',
+  BASE_FORMULA_RECOMPUTE_STARTED = 'base.formula.recompute.started',
+  BASE_FORMULA_RECOMPUTE_COMPLETED = 'base.formula.recompute.completed',
 }
diff --git a/apps/server/src/common/features.ts b/apps/server/src/common/features.ts
index c5fd9a200..86433b008 100644
--- a/apps/server/src/common/features.ts
+++ b/apps/server/src/common/features.ts
@@ -20,6 +20,7 @@ export const Feature = {
   VIEWER_COMMENTS: 'comment:viewer',
   TEMPLATES: 'templates',
   PDF_EXPORT: 'export:pdf',
+  BASES: 'bases',
 } as const;
 
 export type FeatureKey = (typeof Feature)[keyof typeof Feature];
diff --git a/apps/server/src/common/helpers/constants.ts b/apps/server/src/common/helpers/constants.ts
index d3288aa11..5d8140da8 100644
--- a/apps/server/src/common/helpers/constants.ts
+++ b/apps/server/src/common/helpers/constants.ts
@@ -10,6 +10,9 @@ export const LOCAL_STORAGE_PATH = path.resolve(
   LOCAL_STORAGE_DIR,
 );
 
-export function getPageTitle(title: string | null | undefined): string {
-  return title || 'untitled';
+export function getPageTitle(
+  title: string | null | undefined,
+  isBase?: boolean,
+): string {
+  return title || (isBase ? 'Untitled base' : 'untitled');
 }
diff --git a/apps/server/src/core/attachment/services/attachment.service.ts b/apps/server/src/core/attachment/services/attachment.service.ts
index 766c9f65f..710f9d10b 100644
--- a/apps/server/src/core/attachment/services/attachment.service.ts
+++ b/apps/server/src/core/attachment/services/attachment.service.ts
@@ -43,7 +43,7 @@ export class AttachmentService {
 
   async uploadFile(opts: {
     filePromise: Promise<MultipartFile>;
-    pageId: string;
+    pageId?: string;
     userId: string;
     spaceId: string;
     workspaceId: string;
diff --git a/apps/server/src/core/page/dto/create-page.dto.ts b/apps/server/src/core/page/dto/create-page.dto.ts
index 5cf71e5a4..2cad291cd 100644
--- a/apps/server/src/core/page/dto/create-page.dto.ts
+++ b/apps/server/src/core/page/dto/create-page.dto.ts
@@ -1,4 +1,5 @@
 import {
+  IsBoolean,
   IsIn,
   IsOptional,
   IsString,
diff --git a/apps/server/src/core/page/services/page.service.ts b/apps/server/src/core/page/services/page.service.ts
index 0e0b24f07..373c06d0e 100644
--- a/apps/server/src/core/page/services/page.service.ts
+++ b/apps/server/src/core/page/services/page.service.ts
@@ -15,7 +15,7 @@ import {
   executeWithCursorPagination,
 } from '@docmost/db/pagination/cursor-pagination';
 import { InjectKysely } from 'nestjs-kysely';
-import { KyselyDB } from '@docmost/db/types/kysely.types';
+import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types';
 import { generateJitteredKeyBetween } from 'fractional-indexing-jittered';
 import { MovePageDto } from '../dto/move-page.dto';
 import { generateSlugId } from '../../../common/helpers';
@@ -92,6 +92,8 @@ export class PageService {
     userId: string,
     workspaceId: string,
     createPageDto: CreatePageDto,
+    trx?: KyselyTransaction,
+    isBase: boolean = false,
   ): Promise<Page> {
     let parentPageId = undefined;
 
@@ -140,21 +142,34 @@ export class PageService {
       creatorId: userId,
       workspaceId: workspaceId,
       lastUpdatedById: userId,
+      isBase,
       content,
       textContent,
       ydoc,
-    });
+    }, trx);
 
-    this.generalQueue
-      .add(QueueJob.ADD_PAGE_WATCHERS, {
-        userIds: [userId],
-        pageId: page.id,
-        spaceId: createPageDto.spaceId,
+    if (trx) {
+      // Add the watcher inside the caller's transaction so the async worker
+      // never inserts against an uncommitted page (FK violation on bases).
+      await this.watcherService.addPageWatchers(
+        [userId],
+        page.id,
+        createPageDto.spaceId,
         workspaceId,
-      })
-      .catch((err) =>
-        this.logger.warn(`Failed to queue add-page-watchers: ${err.message}`),
+        trx,
       );
+    } else {
+      this.generalQueue
+        .add(QueueJob.ADD_PAGE_WATCHERS, {
+          userIds: [userId],
+          pageId: page.id,
+          spaceId: createPageDto.spaceId,
+          workspaceId,
+        })
+        .catch((err) =>
+          this.logger.warn(`Failed to queue add-page-watchers: ${err.message}`),
+        );
+    }
 
     return page;
   }
@@ -289,6 +304,7 @@ export class PageService {
         'parentPageId',
         'spaceId',
         'creatorId',
+        'isBase',
         'deletedAt',
       ])
       .select((eb) => this.pageRepo.withHasChildren(eb))
@@ -832,6 +848,7 @@ export class PageService {
             'slugId',
             'title',
             'icon',
+            'isBase',
             'position',
             'parentPageId',
             'spaceId',
@@ -847,6 +864,7 @@ export class PageService {
                 'p.slugId',
                 'p.title',
                 'p.icon',
+                'p.isBase',
                 'p.position',
                 'p.parentPageId',
                 'p.spaceId',
diff --git a/apps/server/src/database/migrations/20260529T125146-bases.ts b/apps/server/src/database/migrations/20260529T125146-bases.ts
new file mode 100644
index 000000000..152217bcd
--- /dev/null
+++ b/apps/server/src/database/migrations/20260529T125146-bases.ts
@@ -0,0 +1,384 @@
+import { type Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable('pages')
+    .addColumn('is_base', 'boolean', (col) =>
+      col.ifNotExists().notNull().defaultTo(false),
+    )
+    .addColumn('base_schema_version', 'integer', (col) =>
+      col.ifNotExists().notNull().defaultTo(0),
+    )
+    .execute();
+
+  await sql`
+    CREATE INDEX IF NOT EXISTS idx_pages_is_base
+      ON pages (space_id, position COLLATE "C")
+      WHERE is_base = true AND deleted_at IS NULL
+  `.execute(db);
+
+  await db.schema
+    .createTable('base_properties')
+    .ifNotExists()
+    .addColumn('id', 'uuid', (col) =>
+      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
+    )
+    .addColumn('page_id', 'uuid', (col) =>
+      col.references('pages.id').onDelete('cascade').notNull(),
+    )
+    .addColumn('name', 'varchar', (col) => col.notNull())
+    .addColumn('type', 'varchar', (col) => col.notNull())
+    .addColumn('position', 'varchar', (col) => col.notNull())
+    .addColumn('type_options', 'jsonb')
+    .addColumn('pending_type', 'varchar')
+    .addColumn('pending_type_options', 'jsonb')
+    .addColumn('pending_token', 'uuid')
+    .addColumn('is_primary', 'boolean', (col) => col.notNull().defaultTo(false))
+    .addColumn('schema_version', 'integer', (col) => col.notNull().defaultTo(1))
+    .addColumn('workspace_id', 'uuid', (col) =>
+      col.references('workspaces.id').onDelete('cascade').notNull(),
+    )
+    .addColumn('created_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addColumn('updated_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addColumn('deleted_at', 'timestamptz')
+    .execute();
+
+  await sql`CREATE INDEX IF NOT EXISTS idx_base_properties_page_id ON base_properties (page_id)`.execute(
+    db,
+  );
+
+  await sql`
+    CREATE INDEX IF NOT EXISTS idx_base_properties_page_alive
+      ON base_properties (page_id, position COLLATE "C", id)
+      WHERE deleted_at IS NULL
+  `.execute(db);
+
+  // Match the service-layer name check (name.trim().toLowerCase()) so
+  // whitespace-padded duplicates also collide. Formulas look properties up by
+  // name, so the names have to stay unique.
+  await sql`
+    CREATE UNIQUE INDEX IF NOT EXISTS uq_base_properties_page_name_alive
+      ON base_properties (page_id, lower(trim(name)))
+      WHERE deleted_at IS NULL
+  `.execute(db);
+
+  await db.schema
+    .createTable('base_rows')
+    .ifNotExists()
+    .addColumn('id', 'uuid', (col) =>
+      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
+    )
+    .addColumn('page_id', 'uuid', (col) =>
+      col.references('pages.id').onDelete('cascade').notNull(),
+    )
+    .addColumn('cells', 'jsonb', (col) =>
+      col.notNull().defaultTo(sql`'{}'::jsonb`),
+    )
+    .addColumn('position', 'varchar', (col) => col.notNull())
+    .addColumn('search_text', 'text')
+    .addColumn('search_tsv', sql`tsvector`)
+    .addColumn('creator_id', 'uuid', (col) =>
+      col.references('users.id').onDelete('set null'),
+    )
+    .addColumn('last_updated_by_id', 'uuid', (col) =>
+      col.references('users.id').onDelete('set null'),
+    )
+    .addColumn('workspace_id', 'uuid', (col) =>
+      col.references('workspaces.id').onDelete('cascade').notNull(),
+    )
+    .addColumn('created_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addColumn('updated_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addColumn('deleted_at', 'timestamptz')
+    .execute();
+
+  // Intentionally no GIN on cells: `cells ? key` lookups are rare and
+  // page-scoped, while the index doubled the write cost of every cell edit.
+  await sql`
+    CREATE INDEX IF NOT EXISTS idx_base_rows_page_alive
+      ON base_rows (page_id, position COLLATE "C", id)
+      WHERE deleted_at IS NULL
+  `.execute(db);
+
+  await sql`
+    CREATE INDEX IF NOT EXISTS idx_base_rows_page_updated
+      ON base_rows (page_id, updated_at DESC)
+      WHERE deleted_at IS NULL
+  `.execute(db);
+
+  await sql`
+    CREATE INDEX IF NOT EXISTS idx_base_rows_page_created
+      ON base_rows (page_id, created_at DESC)
+      WHERE deleted_at IS NULL
+  `.execute(db);
+
+  await sql`
+    CREATE INDEX IF NOT EXISTS idx_base_rows_search_tsv
+      ON base_rows USING gin (search_tsv)
+      WHERE deleted_at IS NULL
+  `.execute(db);
+
+  await sql`
+    CREATE INDEX IF NOT EXISTS idx_base_rows_search_trgm
+      ON base_rows USING gin (search_text gin_trgm_ops)
+      WHERE deleted_at IS NULL
+  `.execute(db);
+
+  await db.schema
+    .createTable('base_views')
+    .ifNotExists()
+    .addColumn('id', 'uuid', (col) =>
+      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
+    )
+    .addColumn('page_id', 'uuid', (col) =>
+      col.references('pages.id').onDelete('cascade').notNull(),
+    )
+    .addColumn('name', 'varchar', (col) => col.notNull())
+    .addColumn('type', 'varchar', (col) => col.notNull().defaultTo('table'))
+    .addColumn('position', 'varchar', (col) => col.notNull())
+    .addColumn('config', 'jsonb', (col) =>
+      col.notNull().defaultTo(sql`'{}'::jsonb`),
+    )
+    .addColumn('workspace_id', 'uuid', (col) =>
+      col.references('workspaces.id').onDelete('cascade').notNull(),
+    )
+    .addColumn('creator_id', 'uuid', (col) =>
+      col.references('users.id').onDelete('set null'),
+    )
+    .addColumn('created_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addColumn('updated_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .execute();
+
+  await sql`CREATE INDEX IF NOT EXISTS idx_base_views_page_id ON base_views (page_id)`.execute(
+    db,
+  );
+
+  // Cell extraction helpers for filters and sorts. Return NULL for absent or
+  // non-castable values.
+  await sql`
+    CREATE OR REPLACE FUNCTION base_cell_text(cells jsonb, prop uuid)
+    RETURNS text LANGUAGE sql IMMUTABLE STRICT PARALLEL SAFE
+    AS $$ SELECT cells->>prop::text $$
+  `.execute(db);
+
+  await sql`
+    CREATE OR REPLACE FUNCTION base_cell_numeric(cells jsonb, prop uuid)
+    RETURNS numeric LANGUAGE sql IMMUTABLE STRICT PARALLEL SAFE
+    AS $$
+      SELECT CASE jsonb_typeof(cells->prop::text)
+        WHEN 'number' THEN (cells->>prop::text)::numeric
+        WHEN 'string' THEN
+          CASE
+            WHEN (cells->>prop::text) ~
+              '^[[:space:]]*[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)([eE][+-]?[0-9]+)?[[:space:]]*$'
+            THEN (cells->>prop::text)::numeric
+          END
+      END
+    $$
+  `.execute(db);
+
+  // A DATE cell stores an arbitrary string (cell schema is z.string()), so the
+  // cast can fail on values no regex can pre-validate (e.g. '2024-13-45'). This
+  // helper uses plpgsql with an EXCEPTION handler to return NULL on failure.
+  await sql`
+    CREATE OR REPLACE FUNCTION base_cell_timestamptz(cells jsonb, prop uuid)
+    RETURNS timestamptz LANGUAGE plpgsql IMMUTABLE STRICT PARALLEL SAFE
+    AS $$
+      BEGIN RETURN (cells->>prop::text)::timestamptz;
+      EXCEPTION WHEN others THEN RETURN NULL; END;
+    $$
+  `.execute(db);
+
+  await sql`
+    CREATE OR REPLACE FUNCTION base_cell_bool(cells jsonb, prop uuid)
+    RETURNS boolean LANGUAGE sql IMMUTABLE STRICT PARALLEL SAFE
+    AS $$
+      SELECT CASE jsonb_typeof(cells->prop::text)
+        WHEN 'boolean' THEN (cells->>prop::text)::boolean
+        WHEN 'string' THEN
+          CASE
+            WHEN lower(btrim(cells->>prop::text)) IN
+              ('true','t','yes','y','on','1','false','f','no','n','off','0')
+            THEN (cells->>prop::text)::boolean
+          END
+      END
+    $$
+  `.execute(db);
+
+  await sql`
+    CREATE OR REPLACE FUNCTION base_cell_array(cells jsonb, prop uuid)
+    RETURNS jsonb LANGUAGE sql IMMUTABLE STRICT PARALLEL SAFE
+    AS $$ SELECT cells->prop::text $$
+  `.execute(db);
+
+  // A null patch value deletes the key rather than storing a JSON null.
+  await sql`
+    CREATE OR REPLACE FUNCTION jsonb_set_many(target jsonb, patches jsonb)
+    RETURNS jsonb LANGUAGE plpgsql IMMUTABLE PARALLEL SAFE
+    AS $$
+      DECLARE k text; v jsonb; result jsonb := coalesce(target, '{}'::jsonb);
+      BEGIN
+        IF patches IS NULL OR jsonb_typeof(patches) <> 'object' THEN
+          RETURN result;
+        END IF;
+        FOR k, v IN SELECT * FROM jsonb_each(patches) LOOP
+          IF v = 'null'::jsonb THEN
+            result := result - k;
+          ELSE
+            result := jsonb_set(result, ARRAY[k], v, true);
+          END IF;
+        END LOOP;
+        RETURN result;
+      END;
+    $$
+  `.execute(db);
+
+  // Resolves select/multiSelect cells to their choice names. The property list
+  // per page is cached in a transaction-local setting so bulk writes look it up
+  // once instead of per row.
+  await sql`
+    CREATE OR REPLACE FUNCTION build_base_row_search_text(
+      _cells jsonb,
+      _page_id uuid
+    ) RETURNS text
+    LANGUAGE plpgsql STABLE PARALLEL SAFE
+    AS $$
+      DECLARE
+        _parts text[] := ARRAY[]::text[];
+        _prop jsonb;
+        _value text;
+        _arr jsonb;
+        _elem jsonb;
+        _resolved text;
+        _cache_key text;
+        _cached text;
+        _props jsonb;
+      BEGIN
+        IF _cells IS NULL OR _cells = '{}'::jsonb OR _page_id IS NULL THEN
+          RETURN NULL;
+        END IF;
+
+        _cache_key := 'bases.prop_cache_' || replace(_page_id::text, '-', '_');
+        _cached := current_setting(_cache_key, true);
+        IF _cached IS NULL OR _cached = '' THEN
+          SELECT coalesce(
+            jsonb_agg(jsonb_build_object(
+              'id', id,
+              'type', type,
+              'type_options', type_options
+            )),
+            '[]'::jsonb
+          )
+            INTO _props
+            FROM base_properties
+            WHERE page_id = _page_id AND deleted_at IS NULL;
+          PERFORM set_config(_cache_key, _props::text, true);
+        ELSE
+          _props := _cached::jsonb;
+        END IF;
+
+        FOR _prop IN SELECT * FROM jsonb_array_elements(_props)
+        LOOP
+          IF (_prop->>'type') IN ('text', 'url', 'email') THEN
+            _value := _cells->>(_prop->>'id');
+            IF _value IS NOT NULL AND _value <> '' THEN
+              _parts := array_append(_parts, _value);
+            END IF;
+          ELSIF (_prop->>'type') IN ('select', 'status') THEN
+            _value := _cells->>(_prop->>'id');
+            IF _value IS NOT NULL AND _value <> '' THEN
+              SELECT c->>'name' INTO _resolved
+                FROM jsonb_array_elements(coalesce(_prop->'type_options'->'choices', '[]'::jsonb)) AS c
+                WHERE c->>'id' = _value
+                LIMIT 1;
+              IF _resolved IS NOT NULL AND _resolved <> '' THEN
+                _parts := array_append(_parts, _resolved);
+              END IF;
+            END IF;
+          ELSIF (_prop->>'type') = 'multiSelect' THEN
+            _arr := _cells->(_prop->>'id');
+            IF jsonb_typeof(_arr) = 'array' THEN
+              FOR _elem IN SELECT * FROM jsonb_array_elements(_arr)
+              LOOP
+                SELECT c->>'name' INTO _resolved
+                  FROM jsonb_array_elements(coalesce(_prop->'type_options'->'choices', '[]'::jsonb)) AS c
+                  WHERE c->>'id' = _elem#>>'{}'
+                  LIMIT 1;
+                IF _resolved IS NOT NULL AND _resolved <> '' THEN
+                  _parts := array_append(_parts, _resolved);
+                END IF;
+              END LOOP;
+            END IF;
+          END IF;
+        END LOOP;
+
+        IF array_length(_parts, 1) IS NULL THEN
+          RETURN NULL;
+        END IF;
+
+        RETURN f_unaccent(array_to_string(_parts, ' '));
+      END;
+    $$
+  `.execute(db);
+
+  await sql`
+    CREATE OR REPLACE FUNCTION base_rows_search_trigger() RETURNS trigger
+    LANGUAGE plpgsql AS $$
+      BEGIN
+        NEW.search_text := build_base_row_search_text(NEW.cells, NEW.page_id);
+        NEW.search_tsv := to_tsvector('english', coalesce(NEW.search_text, ''));
+        RETURN NEW;
+      END;
+    $$
+  `.execute(db);
+
+  await sql`
+    CREATE OR REPLACE TRIGGER base_rows_search_insert
+      BEFORE INSERT ON base_rows
+      FOR EACH ROW EXECUTE FUNCTION base_rows_search_trigger()
+  `.execute(db);
+
+  // Position-only reorders and metadata touches must not pay the
+  // search_text recompute; OLD is not referenceable on INSERT, hence
+  // the split triggers.
+  await sql`
+    CREATE OR REPLACE TRIGGER base_rows_search_update
+      BEFORE UPDATE ON base_rows
+      FOR EACH ROW
+      WHEN (OLD.cells IS DISTINCT FROM NEW.cells)
+      EXECUTE FUNCTION base_rows_search_trigger()
+  `.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await db.schema.dropTable('base_views').execute();
+  await db.schema.dropTable('base_rows').execute();
+  await db.schema.dropTable('base_properties').execute();
+
+  await sql`DROP FUNCTION base_rows_search_trigger()`.execute(db);
+  await sql`DROP FUNCTION build_base_row_search_text(jsonb, uuid)`.execute(db);
+  await sql`DROP FUNCTION jsonb_set_many(jsonb, jsonb)`.execute(db);
+  await sql`DROP FUNCTION base_cell_array(jsonb, uuid)`.execute(db);
+  await sql`DROP FUNCTION base_cell_bool(jsonb, uuid)`.execute(db);
+  await sql`DROP FUNCTION base_cell_timestamptz(jsonb, uuid)`.execute(db);
+  await sql`DROP FUNCTION base_cell_numeric(jsonb, uuid)`.execute(db);
+  await sql`DROP FUNCTION base_cell_text(jsonb, uuid)`.execute(db);
+
+  await sql`DROP INDEX idx_pages_is_base`.execute(db);
+  await db.schema
+    .alterTable('pages')
+    .dropColumn('base_schema_version')
+    .dropColumn('is_base')
+    .execute();
+}
diff --git a/apps/server/src/database/repos/favorite/favorite.repo.ts b/apps/server/src/database/repos/favorite/favorite.repo.ts
index 54b21135f..7b7aee302 100644
--- a/apps/server/src/database/repos/favorite/favorite.repo.ts
+++ b/apps/server/src/database/repos/favorite/favorite.repo.ts
@@ -236,6 +236,7 @@ export class FavoriteRepo {
           'pages.slugId',
           'pages.title',
           'pages.icon',
+          'pages.isBase',
           'pages.spaceId',
         ])
         .whereRef('pages.id', '=', 'favorites.pageId'),
diff --git a/apps/server/src/database/repos/page/page.repo.ts b/apps/server/src/database/repos/page/page.repo.ts
index 259e1bd33..9eb9f3a50 100644
--- a/apps/server/src/database/repos/page/page.repo.ts
+++ b/apps/server/src/database/repos/page/page.repo.ts
@@ -38,6 +38,7 @@ export class PageRepo {
     'spaceId',
     'workspaceId',
     'isLocked',
+    'isBase',
     'createdAt',
     'updatedAt',
     'deletedAt',
diff --git a/apps/server/src/database/types/db.d.ts b/apps/server/src/database/types/db.d.ts
index 4463aa7aa..af8a1e49f 100644
--- a/apps/server/src/database/types/db.d.ts
+++ b/apps/server/src/database/types/db.d.ts
@@ -126,6 +126,52 @@ export interface Backlinks {
   workspaceId: string;
 }
 
+export interface BaseProperties {
+  createdAt: Generated<Timestamp>;
+  deletedAt: Timestamp | null;
+  id: Generated<string>;
+  isPrimary: Generated<boolean>;
+  name: string;
+  pageId: string;
+  pendingType: string | null;
+  pendingTypeOptions: Json | null;
+  pendingToken: string | null;
+  position: string;
+  schemaVersion: Generated<number>;
+  type: string;
+  typeOptions: Json | null;
+  updatedAt: Generated<Timestamp>;
+  workspaceId: string;
+}
+
+export interface BaseRows {
+  cells: Generated<Json>;
+  createdAt: Generated<Timestamp>;
+  creatorId: string | null;
+  deletedAt: Timestamp | null;
+  id: Generated<string>;
+  lastUpdatedById: string | null;
+  pageId: string;
+  position: string;
+  searchText: string | null;
+  searchTsv: string | null;
+  updatedAt: Generated<Timestamp>;
+  workspaceId: string;
+}
+
+export interface BaseViews {
+  config: Generated<Json>;
+  createdAt: Generated<Timestamp>;
+  creatorId: string | null;
+  id: Generated<string>;
+  name: string;
+  pageId: string;
+  position: string;
+  type: Generated<string>;
+  updatedAt: Generated<Timestamp>;
+  workspaceId: string;
+}
+
 export interface Billing {
   amount: Int8 | null;
   billingScheme: string | null;
@@ -275,6 +321,8 @@ export interface Pages {
   deletedById: string | null;
   icon: string | null;
   id: Generated<string>;
+  isBase: Generated<boolean>;
+  baseSchemaVersion: Generated<number>;
   isLocked: Generated<boolean>;
   lastUpdatedById: string | null;
   parentPageId: string | null;
@@ -598,6 +646,9 @@ export interface DB {
   authAccounts: AuthAccounts;
   authProviders: AuthProviders;
   backlinks: Backlinks;
+  baseProperties: BaseProperties;
+  baseRows: BaseRows;
+  baseViews: BaseViews;
   billing: Billing;
   comments: Comments;
   favorites: Favorites;
diff --git a/apps/server/src/database/types/entity.types.ts b/apps/server/src/database/types/entity.types.ts
index 88594281c..0419f0382 100644
--- a/apps/server/src/database/types/entity.types.ts
+++ b/apps/server/src/database/types/entity.types.ts
@@ -3,6 +3,9 @@ import {
   AiChats,
   AiChatMessages,
   Attachments,
+  BaseProperties,
+  BaseRows,
+  BaseViews,
   Comments,
   Groups,
   Labels,
@@ -238,3 +241,27 @@ export type UpdatableAudit = Updateable<Omit<_Audit, 'id'>>;
 export type Template = Selectable<Templates>;
 export type InsertableTemplate = Insertable<Templates>;
 export type UpdatableTemplate = Updateable<Omit<Templates, 'id'>>;
+
+// Base Property
+export type BaseProperty = Selectable<BaseProperties>;
+export type InsertableBaseProperty = Insertable<BaseProperties>;
+export type UpdatableBaseProperty = Updateable<Omit<BaseProperties, 'id'>>;
+
+// Base Row
+// `searchText` and `searchTsv` are internal fulltext-index columns maintained
+// by a trigger. They are omitted from the public types so they never leak into
+// HTTP responses or write payloads.
+export type BaseRow = Omit<Selectable<BaseRows>, 'searchText' | 'searchTsv'>;
+export type InsertableBaseRow = Omit<
+  Insertable<BaseRows>,
+  'searchText' | 'searchTsv'
+>;
+export type UpdatableBaseRow = Omit<
+  Updateable<Omit<BaseRows, 'id'>>,
+  'searchText' | 'searchTsv'
+>;
+
+// Base View
+export type BaseView = Selectable<BaseViews>;
+export type InsertableBaseView = Insertable<BaseViews>;
+export type UpdatableBaseView = Updateable<Omit<BaseViews, 'id'>>;
diff --git a/apps/server/src/ee b/apps/server/src/ee
index e7320a5a0..73a853e23 160000
--- a/apps/server/src/ee
+++ b/apps/server/src/ee
@@ -1 +1 @@
-Subproject commit e7320a5a0fa8296a737b5118db395aec80ffb25a
+Subproject commit 73a853e2372afe355c5ec06ed778072f94f4a9d8
diff --git a/apps/server/src/integrations/queue/constants/queue.constants.ts b/apps/server/src/integrations/queue/constants/queue.constants.ts
index c783ec05e..546553438 100644
--- a/apps/server/src/integrations/queue/constants/queue.constants.ts
+++ b/apps/server/src/integrations/queue/constants/queue.constants.ts
@@ -9,6 +9,7 @@ export enum QueueName {
   HISTORY_QUEUE = '{history-queue}',
   NOTIFICATION_QUEUE = '{notification-queue}',
   AUDIT_QUEUE = '{audit-queue}',
+  BASE_QUEUE = '{base-queue}',
 }
 
 export enum QueueJob {
@@ -83,4 +84,8 @@ export enum QueueJob {
 
   PDF_EXPORT_TASK = 'pdf-export-task',
   PDF_EXPORT_CLEANUP = 'pdf-export-cleanup',
+
+  BASE_TYPE_CONVERSION = 'base-type-conversion',
+  BASE_CELL_GC = 'base-cell-gc',
+  BASE_FORMULA_RECOMPUTE = 'base-formula-recompute',
 }
diff --git a/apps/server/src/integrations/queue/constants/queue.interface.ts b/apps/server/src/integrations/queue/constants/queue.interface.ts
index 6dea53c3c..3e8fb4ce9 100644
--- a/apps/server/src/integrations/queue/constants/queue.interface.ts
+++ b/apps/server/src/integrations/queue/constants/queue.interface.ts
@@ -113,3 +113,47 @@ export interface IApprovalRejectedNotificationJob {
   requestedById: string;
   comment?: string;
 }
+
+export interface IBaseTypeConversionJob {
+  pageId: string;
+  propertyId: string;
+  workspaceId: string;
+  fromType: string;
+  toType: string;
+  // Snapshots taken at enqueue time so the job stays correct even if the
+  // property's current typeOptions drift while the job waits in the queue.
+  fromTypeOptions: unknown;
+  toTypeOptions: unknown;
+  // When true, the job nulls the cell values for that property instead of
+  // attempting a value conversion. Used for any conversion where the new
+  // type has no meaningful representation of the old value (e.g. involving
+  // a system type).
+  clearMode: boolean;
+  // Staging identity: guards redelivery and failure cleanup against a
+  // same-type re-stage made after this job was enqueued.
+  pendingToken: string;
+  actorId?: string;
+}
+
+export interface IBaseCellGcJob {
+  pageId: string;
+  propertyId: string;
+  workspaceId: string;
+}
+
+export interface IBaseFormulaRecomputeJob {
+  pageId: string;
+  workspaceId: string;
+  propertyIds: string[]; // formula properties to recompute
+  reason:
+    | 'formula_created'
+    | 'formula_edited'
+    | 'dep_type_changed'
+    | 'dep_deleted'
+    | 'bulk_import'
+    | 'manual';
+  actorId?: string | null;
+  // When set, scope recompute to these row IDs instead of the whole base.
+  // Used by the bulk-write path (> FORMULA_INLINE_ROW_THRESHOLD).
+  rowIds?: string[];
+}
diff --git a/apps/server/src/integrations/queue/queue.module.ts b/apps/server/src/integrations/queue/queue.module.ts
index a7b83c3f9..eeb74cbb3 100644
--- a/apps/server/src/integrations/queue/queue.module.ts
+++ b/apps/server/src/integrations/queue/queue.module.ts
@@ -92,6 +92,14 @@ import { GeneralQueueProcessor } from './processors/general-queue.processor';
         attempts: 3,
       },
     }),
+    BullModule.registerQueue({
+      name: QueueName.BASE_QUEUE,
+      defaultJobOptions: {
+        attempts: 2,
+        removeOnComplete: { count: 200 },
+        removeOnFail: { count: 100 },
+      },
+    }),
   ],
   exports: [BullModule],
   providers: [GeneralQueueProcessor],
diff --git a/apps/server/src/ws/__tests__/base-realtime.bridge.spec.ts b/apps/server/src/ws/__tests__/base-realtime.bridge.spec.ts
new file mode 100644
index 000000000..79083ea6a
--- /dev/null
+++ b/apps/server/src/ws/__tests__/base-realtime.bridge.spec.ts
@@ -0,0 +1,29 @@
+import { BaseRealtimeBridge } from '../base-realtime.bridge';
+
+function makeBridge(svc: any) {
+  const moduleRef = { get: jest.fn().mockReturnValue(svc) } as any;
+  const bridge = new BaseRealtimeBridge(moduleRef);
+  // bypass the require() of the EE module for unit testing by forcing a resolved class token
+  (bridge as any).loadServiceClass = () => (svc ? class {} : null);
+  return { bridge, moduleRef };
+}
+
+describe('BaseRealtimeBridge', () => {
+  it('delegates isBaseEvent / handleInbound to the resolved service', async () => {
+    const svc = {
+      isBaseEvent: jest.fn().mockReturnValue(true),
+      handleInbound: jest.fn().mockResolvedValue(undefined),
+    };
+    const { bridge } = makeBridge(svc);
+    expect(bridge.isBaseEvent({ t: 'base' })).toBe(true);
+    await bridge.handleInbound({} as any, { t: 'base' });
+    expect(svc.handleInbound).toHaveBeenCalled();
+  });
+
+  it('no-ops safely when the EE base module is absent', async () => {
+    const { bridge } = makeBridge(null);
+    expect(bridge.isBaseEvent({ t: 'base' })).toBe(false);
+    await expect(bridge.handleDisconnect({} as any)).resolves.toBeUndefined();
+    expect(() => bridge.setServer({} as any)).not.toThrow();
+  });
+});
diff --git a/apps/server/src/ws/base-realtime.bridge.ts b/apps/server/src/ws/base-realtime.bridge.ts
new file mode 100644
index 000000000..b8581dd82
--- /dev/null
+++ b/apps/server/src/ws/base-realtime.bridge.ts
@@ -0,0 +1,49 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { ModuleRef } from '@nestjs/core';
+import { Server, Socket } from 'socket.io';
+
+@Injectable()
+export class BaseRealtimeBridge {
+  private readonly logger = new Logger(BaseRealtimeBridge.name);
+  private resolved = false;
+  private svc: any = null;
+
+  constructor(private readonly moduleRef: ModuleRef) {}
+
+  protected loadServiceClass(): any {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      return require('../ee/base/realtime/base-ws.service').BaseWsService;
+    } catch {
+      this.logger.debug(
+        'Base realtime requested but enterprise module not bundled in this build',
+      );
+      return null;
+    }
+  }
+
+  private resolve(): any {
+    if (this.resolved) return this.svc;
+    this.resolved = true;
+    const ServiceClass = this.loadServiceClass();
+    if (!ServiceClass) return null;
+    this.svc = this.moduleRef.get(ServiceClass, { strict: false });
+    return this.svc;
+  }
+
+  setServer(server: Server): void {
+    this.resolve()?.setServer(server);
+  }
+
+  isBaseEvent(data: any): boolean {
+    return this.resolve()?.isBaseEvent(data) ?? false;
+  }
+
+  async handleInbound(client: Socket, data: any): Promise<void> {
+    await this.resolve()?.handleInbound(client, data);
+  }
+
+  async handleDisconnect(client: Socket): Promise<void> {
+    await this.resolve()?.handleDisconnect(client);
+  }
+}
diff --git a/apps/server/src/ws/ws.gateway.ts b/apps/server/src/ws/ws.gateway.ts
index fd6810c85..f265ee5ee 100644
--- a/apps/server/src/ws/ws.gateway.ts
+++ b/apps/server/src/ws/ws.gateway.ts
@@ -1,6 +1,7 @@
 import {
   MessageBody,
   OnGatewayConnection,
+  OnGatewayDisconnect,
   OnGatewayInit,
   SubscribeMessage,
   WebSocketGateway,
@@ -13,6 +14,7 @@ import { OnModuleDestroy } from '@nestjs/common';
 import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
 import { WsService } from './ws.service';
 import { getSpaceRoomName, getUserRoomName } from './ws.utils';
+import { BaseRealtimeBridge } from './base-realtime.bridge';
 import * as cookie from 'cookie';
 
 @WebSocketGateway({
@@ -20,7 +22,11 @@ import * as cookie from 'cookie';
   transports: ['websocket'],
 })
 export class WsGateway
-  implements OnGatewayConnection, OnGatewayInit, OnModuleDestroy
+  implements
+    OnGatewayConnection,
+    OnGatewayDisconnect,
+    OnGatewayInit,
+    OnModuleDestroy
 {
   @WebSocketServer()
   server: Server;
@@ -29,10 +35,12 @@ export class WsGateway
     private tokenService: TokenService,
     private spaceMemberRepo: SpaceMemberRepo,
     private wsService: WsService,
+    private baseRealtime: BaseRealtimeBridge,
   ) {}
 
   afterInit(server: Server): void {
     this.wsService.setServer(server);
+    this.baseRealtime.setServer(server);
   }
 
   async handleConnection(client: Socket, ...args: any[]): Promise<void> {
@@ -47,6 +55,7 @@ export class WsGateway
       const workspaceId = token.workspaceId;
 
       client.data.userId = userId;
+      client.data.workspaceId = workspaceId;
 
       const userSpaceIds = await this.spaceMemberRepo.getUserSpaceIds(userId);
 
@@ -61,10 +70,19 @@ export class WsGateway
     }
   }
 
+  async handleDisconnect(client: Socket): Promise<void> {
+    await this.baseRealtime.handleDisconnect(client);
+  }
+
   @SubscribeMessage('message')
   async handleMessage(client: Socket, data: any): Promise<void> {
     if (this.wsService.isTreeEvent(data)) {
       await this.wsService.handleTreeEvent(client, data);
+      return;
+    }
+    if (this.baseRealtime.isBaseEvent(data)) {
+      await this.baseRealtime.handleInbound(client, data);
+      return;
     }
   }
 
diff --git a/apps/server/src/ws/ws.module.ts b/apps/server/src/ws/ws.module.ts
index d19e60766..5045ea349 100644
--- a/apps/server/src/ws/ws.module.ts
+++ b/apps/server/src/ws/ws.module.ts
@@ -3,11 +3,12 @@ import { WsGateway } from './ws.gateway';
 import { WsService } from './ws.service';
 import { WsTreeService } from './ws-tree.service';
 import { TokenModule } from '../core/auth/token.module';
+import { BaseRealtimeBridge } from './base-realtime.bridge';
 
 @Global()
 @Module({
   imports: [TokenModule],
-  providers: [WsGateway, WsService, WsTreeService],
+  providers: [WsGateway, WsService, WsTreeService, BaseRealtimeBridge],
   exports: [WsGateway, WsService, WsTreeService],
 })
 export class WsModule {}
diff --git a/apps/server/src/ws/ws.utils.ts b/apps/server/src/ws/ws.utils.ts
index c0d48b544..366830289 100644
--- a/apps/server/src/ws/ws.utils.ts
+++ b/apps/server/src/ws/ws.utils.ts
@@ -16,3 +16,14 @@ export const TREE_EVENTS = new Set([
   'deleteTreeNode',
   'refetchRootTreeNodeEvent',
 ]);
+
+export function getBaseRoomName(pageId: string): string {
+  return `base-${pageId}`;
+}
+
+export const BASE_INBOUND_EVENTS = new Set([
+  'base:subscribe',
+  'base:unsubscribe',
+  'base:presence',
+  'base:presence:leave',
+]);
diff --git a/apps/server/tsconfig.json b/apps/server/tsconfig.json
index 762027e7a..656b22100 100644
--- a/apps/server/tsconfig.json
+++ b/apps/server/tsconfig.json
@@ -22,7 +22,13 @@
     "paths": {
       "@docmost/db/*": ["./src/database/*"],
       "@docmost/transactional/*": ["./src/integrations/transactional/*"],
-      "@docmost/ee/*": ["./src/ee/*"]
+      "@docmost/ee/*": ["./src/ee/*"],
+      "@docmost/base-formula/server": [
+        "../../packages/base-formula/dist/index.server.d.ts"
+      ],
+      "@docmost/base-formula/client": [
+        "../../packages/base-formula/dist/index.client.d.ts"
+      ]
     }
   }
 }
diff --git a/docs/superpowers/plans/2026-04-18-base-csv-export.md b/docs/superpowers/plans/2026-04-18-base-csv-export.md
new file mode 100644
index 000000000..032c25965
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-base-csv-export.md
@@ -0,0 +1,803 @@
+# Base CSV Export Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a server-streamed CSV export for a base's rows, triggered from a download button in the base toolbar.
+
+**Architecture:** A new `/bases/export-csv` Nest controller route writes directly to the Fastify reply as `text/csv`. The service pipes `BaseRowRepo.streamByBaseId` (the existing keyset-paginated async generator used by type-conversion / cell-gc) through `csv-stringify` in streaming mode so memory stays flat for 100k-row bases. Cells are serialized per property type by a pure helper with a pre-built property index and a per-chunk user-name map (same pattern as `base-type-conversion.task.ts`). The client fetches the endpoint as a blob and hands it to `file-saver`, mirroring `exportPage` in `page-service.ts`.
+
+**Tech Stack:** NestJS + Fastify (server), Kysely (db), `csv-stringify` (stream CSV encoder), React + Mantine (client), `file-saver` (download).
+
+**Scope (v1):**
+- Exports **all live rows** of the base (ignoring current view's filter / sort / column visibility). View-scoped export is a later follow-up.
+- All properties (including hidden + system) in property-position order. Primary property first.
+- Permission: same as reading the base (`SpaceCaslAction.Read` on `SpaceCaslSubject.Base`).
+- UTF-8, RFC 4180 CSV, with BOM for Excel compatibility.
+- Filename: `{sanitize(base.name)}.csv`.
+
+**Non-goals (v1):** row selection export, filtered/sorted export, choosing columns, alternative formats (xlsx), background jobs. Only the current synchronous streamed export.
+
+---
+
+## File Structure
+
+**New files:**
+- `apps/server/src/core/base/export/cell-csv-serializer.ts` — pure per-type cell → string function.
+- `apps/server/src/core/base/export/cell-csv-serializer.spec.ts` — unit tests for the serializer.
+- `apps/server/src/core/base/services/base-csv-export.service.ts` — orchestrates streaming from repo → CSV stringifier → Fastify reply. Builds per-chunk user-name map for PERSON / LAST_EDITED_BY.
+- `apps/server/src/core/base/dto/export-base.dto.ts` — `{ baseId: string }` DTO.
+
+**Modified files:**
+- `apps/server/src/core/base/controllers/base.controller.ts` — new `POST /bases/export-csv` handler (returns `FastifyReply`).
+- `apps/server/src/core/base/base.module.ts` — register `BaseCsvExportService` as provider.
+- `apps/server/package.json` — add `csv-stringify` dependency.
+- `apps/client/src/features/base/services/base-service.ts` — new `exportBaseToCsv(baseId)` function.
+- `apps/client/src/features/base/components/base-toolbar.tsx` — new `IconDownload` button that calls the export service.
+
+---
+
+## Task 1: Add `csv-stringify` dependency
+
+**Files:**
+- Modify: `apps/server/package.json`
+
+- [ ] **Step 1: Install the dependency**
+
+Run from repo root:
+```bash
+pnpm --filter server add csv-stringify@^6
+```
+
+Expected: `csv-stringify` appears under `dependencies` in `apps/server/package.json` (latest v6 or newer).
+
+- [ ] **Step 2: Verify server still builds**
+
+```bash
+pnpm nx run server:build
+```
+
+Expected: build succeeds.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/server/package.json pnpm-lock.yaml
+git commit -m "chore(server): add csv-stringify dependency"
+```
+
+---
+
+## Task 2: Pure cell-to-CSV serializer — failing test first
+
+**Files:**
+- Create: `apps/server/src/core/base/export/cell-csv-serializer.spec.ts`
+
+Contract the serializer must satisfy:
+
+| Property type | Input | Output |
+|---|---|---|
+| `text`, `url`, `email` | `"hi"` | `"hi"` |
+| `number` | `42` | `"42"` |
+| `checkbox` | `true` / `false` / `null` | `"true"` / `"false"` / `""` |
+| `date` | `"2026-04-18T12:00:00Z"` | same ISO string |
+| `select` / `status` | choice-uuid | choice name from `typeOptions.choices` |
+| `multiSelect` | `[uuid1, uuid2]` | `"Name 1; Name 2"` (in given order) |
+| `person` | `uuid` or `[uuid, ...]` | `"Alice; Bob"` from `userNames` map; fallback to `""` when missing |
+| `file` | `[{fileName: "a.pdf"}, {fileName: "b.png"}]` | `"a.pdf; b.png"` |
+| `createdAt` | `row.createdAt` (ISO) | same |
+| `lastEditedAt` | `row.updatedAt` (ISO) | same |
+| `lastEditedBy` | `row.lastUpdatedById` | resolved name from map or `""` |
+| any | `null` / `undefined` | `""` |
+
+- [ ] **Step 1: Write the failing spec**
+
+Create `apps/server/src/core/base/export/cell-csv-serializer.spec.ts`:
+
+```ts
+import { serializeCellForCsv } from './cell-csv-serializer';
+import { BasePropertyType } from '../base.schemas';
+
+const p = (type: string, typeOptions: unknown = {}) => ({
+  id: 'prop-1',
+  type: type as any,
+  typeOptions,
+});
+
+describe('serializeCellForCsv', () => {
+  const userNames = new Map([
+    ['u1', 'Alice'],
+    ['u2', 'Bob'],
+  ]);
+
+  it('returns empty string for null/undefined', () => {
+    expect(serializeCellForCsv(p(BasePropertyType.TEXT), null, {})).toBe('');
+    expect(serializeCellForCsv(p(BasePropertyType.NUMBER), undefined, {})).toBe('');
+  });
+
+  it('stringifies text/url/email as-is', () => {
+    expect(serializeCellForCsv(p(BasePropertyType.TEXT), 'hi', {})).toBe('hi');
+    expect(serializeCellForCsv(p(BasePropertyType.URL), 'https://x', {})).toBe('https://x');
+    expect(serializeCellForCsv(p(BasePropertyType.EMAIL), 'a@b.com', {})).toBe('a@b.com');
+  });
+
+  it('stringifies number', () => {
+    expect(serializeCellForCsv(p(BasePropertyType.NUMBER), 42, {})).toBe('42');
+    expect(serializeCellForCsv(p(BasePropertyType.NUMBER), 0, {})).toBe('0');
+  });
+
+  it('renders checkbox as true/false', () => {
+    expect(serializeCellForCsv(p(BasePropertyType.CHECKBOX), true, {})).toBe('true');
+    expect(serializeCellForCsv(p(BasePropertyType.CHECKBOX), false, {})).toBe('false');
+  });
+
+  it('resolves select/status choice name', () => {
+    const prop = p(BasePropertyType.SELECT, {
+      choices: [
+        { id: 'c1', name: 'Red', color: 'red' },
+        { id: 'c2', name: 'Green', color: 'green' },
+      ],
+    });
+    expect(serializeCellForCsv(prop, 'c1', {})).toBe('Red');
+    expect(serializeCellForCsv(prop, 'unknown', {})).toBe('');
+  });
+
+  it('joins multiSelect names with "; " preserving order', () => {
+    const prop = p(BasePropertyType.MULTI_SELECT, {
+      choices: [
+        { id: 'c1', name: 'A', color: 'red' },
+        { id: 'c2', name: 'B', color: 'blue' },
+      ],
+    });
+    expect(serializeCellForCsv(prop, ['c2', 'c1'], {})).toBe('B; A');
+  });
+
+  it('resolves person scalar and array', () => {
+    const prop = p(BasePropertyType.PERSON);
+    expect(serializeCellForCsv(prop, 'u1', { userNames })).toBe('Alice');
+    expect(serializeCellForCsv(prop, ['u1', 'u2', 'missing'], { userNames })).toBe(
+      'Alice; Bob',
+    );
+  });
+
+  it('joins file names from cell payload', () => {
+    const prop = p(BasePropertyType.FILE);
+    expect(
+      serializeCellForCsv(
+        prop,
+        [
+          { id: 'f1', fileName: 'a.pdf' },
+          { id: 'f2', fileName: 'b.png' },
+        ],
+        {},
+      ),
+    ).toBe('a.pdf; b.png');
+  });
+
+  it('dates pass through as ISO strings', () => {
+    const iso = '2026-04-18T12:00:00.000Z';
+    expect(serializeCellForCsv(p(BasePropertyType.DATE), iso, {})).toBe(iso);
+  });
+
+  it('lastEditedBy resolves via userNames', () => {
+    const prop = p(BasePropertyType.LAST_EDITED_BY);
+    expect(serializeCellForCsv(prop, 'u2', { userNames })).toBe('Bob');
+    expect(serializeCellForCsv(prop, 'missing', { userNames })).toBe('');
+  });
+});
+```
+
+- [ ] **Step 2: Run spec — verify it fails**
+
+```bash
+pnpm --filter server test -- cell-csv-serializer.spec
+```
+
+Expected: FAIL — `Cannot find module './cell-csv-serializer'`.
+
+---
+
+## Task 3: Implement `cell-csv-serializer.ts`
+
+**Files:**
+- Create: `apps/server/src/core/base/export/cell-csv-serializer.ts`
+
+- [ ] **Step 1: Implement the serializer**
+
+```ts
+import { BasePropertyType, BasePropertyTypeValue } from '../base.schemas';
+
+export type CellCsvContext = {
+  userNames?: Map<string, string>;
+};
+
+type PropertyLike = {
+  id: string;
+  type: BasePropertyTypeValue | string;
+  typeOptions?: unknown;
+};
+
+function resolveChoiceName(typeOptions: unknown, id: unknown): string {
+  if (!typeOptions || typeof typeOptions !== 'object') return '';
+  const choices = (typeOptions as any).choices;
+  if (!Array.isArray(choices)) return '';
+  const match = choices.find((c: any) => c?.id === id);
+  return typeof match?.name === 'string' ? match.name : '';
+}
+
+function resolveUser(id: unknown, ctx: CellCsvContext): string {
+  if (typeof id !== 'string') return '';
+  return ctx.userNames?.get(id) ?? '';
+}
+
+export function serializeCellForCsv(
+  property: PropertyLike,
+  value: unknown,
+  ctx: CellCsvContext,
+): string {
+  if (value === null || value === undefined) return '';
+
+  switch (property.type) {
+    case BasePropertyType.TEXT:
+    case BasePropertyType.URL:
+    case BasePropertyType.EMAIL:
+      return String(value);
+
+    case BasePropertyType.NUMBER:
+      return typeof value === 'number' ? String(value) : String(value ?? '');
+
+    case BasePropertyType.CHECKBOX:
+      return value === true ? 'true' : 'false';
+
+    case BasePropertyType.DATE:
+    case BasePropertyType.CREATED_AT:
+    case BasePropertyType.LAST_EDITED_AT:
+      if (value instanceof Date) return value.toISOString();
+      return String(value);
+
+    case BasePropertyType.SELECT:
+    case BasePropertyType.STATUS:
+      return resolveChoiceName(property.typeOptions, value);
+
+    case BasePropertyType.MULTI_SELECT:
+      if (!Array.isArray(value)) return '';
+      return value
+        .map((v) => resolveChoiceName(property.typeOptions, v))
+        .filter((s) => s.length > 0)
+        .join('; ');
+
+    case BasePropertyType.PERSON: {
+      const ids = Array.isArray(value) ? value : [value];
+      return ids
+        .map((id) => resolveUser(id, ctx))
+        .filter((s) => s.length > 0)
+        .join('; ');
+    }
+
+    case BasePropertyType.FILE:
+      if (!Array.isArray(value)) return '';
+      return value
+        .map((f: any) =>
+          f && typeof f === 'object' && typeof f.fileName === 'string'
+            ? f.fileName
+            : '',
+        )
+        .filter((s) => s.length > 0)
+        .join('; ');
+
+    case BasePropertyType.LAST_EDITED_BY:
+      return resolveUser(value, ctx);
+
+    default:
+      return typeof value === 'object' ? JSON.stringify(value) : String(value);
+  }
+}
+```
+
+- [ ] **Step 2: Run spec — verify it passes**
+
+```bash
+pnpm --filter server test -- cell-csv-serializer.spec
+```
+
+Expected: PASS (11 tests).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/server/src/core/base/export/cell-csv-serializer.ts apps/server/src/core/base/export/cell-csv-serializer.spec.ts
+git commit -m "feat(base): add csv cell serializer with per-type rules"
+```
+
+---
+
+## Task 4: Export DTO
+
+**Files:**
+- Create: `apps/server/src/core/base/dto/export-base.dto.ts`
+
+- [ ] **Step 1: Write the DTO**
+
+```ts
+import { IsUUID } from 'class-validator';
+
+export class ExportBaseCsvDto {
+  @IsUUID()
+  baseId: string;
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/server/src/core/base/dto/export-base.dto.ts
+git commit -m "feat(base): add export base csv dto"
+```
+
+---
+
+## Task 5: `BaseCsvExportService` — streams rows through `csv-stringify`
+
+**Files:**
+- Create: `apps/server/src/core/base/services/base-csv-export.service.ts`
+
+**Design notes:**
+- Sync values are pushed to a `csv-stringify` `Stringifier` stream. The stream is `pipe`d to `FastifyReply.raw` (Fastify's underlying Node http response).
+- Per chunk (from `streamByBaseId`, chunkSize 1000):
+  1. Collect all user IDs referenced by PERSON cells + all `lastUpdatedById` values.
+  2. One `SELECT id, name, email FROM users WHERE id IN (...)` per chunk. Build `Map<userId, displayName>`.
+  3. For each row, for each property in order, run `serializeCellForCsv`. `push` the record array into the stringifier.
+- Header row: property names in property-position order. Primary property is first because properties are already sorted by `position`.
+- Column for system types (`createdAt` / `lastEditedAt` / `lastEditedBy`): value pulled from the row column, not cells.
+- BOM: write `\ufeff` to the raw socket before the stream pipe so Excel auto-detects UTF-8.
+
+- [ ] **Step 1: Implement the service**
+
+```ts
+import { Injectable, Logger, NotFoundException } from '@nestjs/common';
+import { InjectKysely } from 'nestjs-kysely';
+import { KyselyDB } from '@docmost/db/types/kysely.types';
+import { BaseRepo } from '@docmost/db/repos/base/base.repo';
+import { BasePropertyRepo } from '@docmost/db/repos/base/base-property.repo';
+import { BaseRowRepo } from '@docmost/db/repos/base/base-row.repo';
+import { stringify } from 'csv-stringify';
+import { FastifyReply } from 'fastify';
+import { PassThrough } from 'node:stream';
+import { sanitize } from 'sanitize-filename-ts';
+import {
+  BasePropertyType,
+  BasePropertyTypeValue,
+} from '../base.schemas';
+import {
+  CellCsvContext,
+  serializeCellForCsv,
+} from '../export/cell-csv-serializer';
+
+const CHUNK_SIZE = 1000;
+
+@Injectable()
+export class BaseCsvExportService {
+  private readonly logger = new Logger(BaseCsvExportService.name);
+
+  constructor(
+    @InjectKysely() private readonly db: KyselyDB,
+    private readonly baseRepo: BaseRepo,
+    private readonly basePropertyRepo: BasePropertyRepo,
+    private readonly baseRowRepo: BaseRowRepo,
+  ) {}
+
+  async streamBaseAsCsv(
+    baseId: string,
+    workspaceId: string,
+    reply: FastifyReply,
+  ): Promise<void> {
+    const base = await this.baseRepo.findById(baseId);
+    if (!base || base.workspaceId !== workspaceId) {
+      throw new NotFoundException('Base not found');
+    }
+
+    const properties = await this.basePropertyRepo.findByBaseId(baseId);
+
+    const fileName = sanitize(base.name || 'base') + '.csv';
+
+    const stringifier = stringify({
+      header: true,
+      columns: properties.map((p) => ({ key: p.id, header: p.name })),
+    });
+
+    // Prepend UTF-8 BOM so Excel auto-detects encoding, then pipe the
+    // CSV stream through. Using a PassThrough instead of `reply.raw`
+    // keeps us inside Fastify's managed reply lifecycle — backpressure
+    // is handled by the pipe, matching the existing `/spaces/export`
+    // pattern (stream handed to `res.send`).
+    const out = new PassThrough();
+    out.write('\ufeff');
+
+    stringifier.on('error', (err) => {
+      this.logger.error('csv stringifier error', err);
+      out.destroy(err);
+    });
+    stringifier.pipe(out);
+
+    reply.headers({
+      'Content-Type': 'text/csv; charset=utf-8',
+      'Content-Disposition':
+        'attachment; filename="' + encodeURIComponent(fileName) + '"',
+    });
+    reply.send(out);
+
+    try {
+      for await (const chunk of this.baseRowRepo.streamByBaseId(baseId, {
+        workspaceId,
+        chunkSize: CHUNK_SIZE,
+      })) {
+        const ctx = await this.buildCtx(chunk, properties);
+
+        for (const row of chunk) {
+          const record: Record<string, string> = {};
+          const cells = (row.cells ?? {}) as Record<string, unknown>;
+
+          for (const prop of properties) {
+            const type = prop.type as BasePropertyTypeValue;
+            let value: unknown;
+            if (type === BasePropertyType.CREATED_AT) {
+              value = row.createdAt;
+            } else if (type === BasePropertyType.LAST_EDITED_AT) {
+              value = row.updatedAt;
+            } else if (type === BasePropertyType.LAST_EDITED_BY) {
+              value = row.lastUpdatedById;
+            } else {
+              value = cells[prop.id];
+            }
+            record[prop.id] = serializeCellForCsv(prop, value, ctx);
+          }
+
+          // Pipe handles backpressure internally, but honor the
+          // stringifier's `write() === false` to avoid unbounded
+          // internal buffering on very large bases.
+          if (!stringifier.write(record)) {
+            await new Promise<void>((resolve) =>
+              stringifier.once('drain', resolve),
+            );
+          }
+        }
+      }
+
+      stringifier.end();
+    } catch (err) {
+      this.logger.error(`csv export failed base=${baseId}`, err);
+      stringifier.destroy(err as Error);
+      throw err;
+    }
+  }
+
+  private async buildCtx(
+    chunk: Array<{ cells: unknown; lastUpdatedById: string | null }>,
+    properties: Array<{ id: string; type: string }>,
+  ): Promise<CellCsvContext> {
+    const needsUsers = properties.some(
+      (p) =>
+        p.type === BasePropertyType.PERSON ||
+        p.type === BasePropertyType.LAST_EDITED_BY,
+    );
+    if (!needsUsers) return {};
+
+    const userIds = new Set<string>();
+    const personPropIds = properties
+      .filter((p) => p.type === BasePropertyType.PERSON)
+      .map((p) => p.id);
+
+    for (const row of chunk) {
+      if (row.lastUpdatedById) userIds.add(row.lastUpdatedById);
+      const cells = (row.cells ?? {}) as Record<string, unknown>;
+      for (const pid of personPropIds) {
+        const v = cells[pid];
+        if (typeof v === 'string') userIds.add(v);
+        else if (Array.isArray(v)) {
+          for (const id of v) if (typeof id === 'string') userIds.add(id);
+        }
+      }
+    }
+
+    if (userIds.size === 0) return {};
+
+    const rows = await this.db
+      .selectFrom('users')
+      .select(['id', 'name', 'email'])
+      .where('id', 'in', Array.from(userIds))
+      .execute();
+
+    return {
+      userNames: new Map(rows.map((u) => [u.id, u.name || u.email || ''])),
+    };
+  }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/server/src/core/base/services/base-csv-export.service.ts
+git commit -m "feat(base): add streaming csv export service"
+```
+
+---
+
+## Task 6: Register service in module
+
+**Files:**
+- Modify: `apps/server/src/core/base/base.module.ts`
+
+- [ ] **Step 1: Add `BaseCsvExportService` to providers**
+
+Add import:
+```ts
+import { BaseCsvExportService } from './services/base-csv-export.service';
+```
+
+Add to `providers` array (no need to export — only the controller uses it).
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/server/src/core/base/base.module.ts
+git commit -m "feat(base): register csv export service in module"
+```
+
+---
+
+## Task 7: Controller route `POST /bases/export-csv`
+
+**Files:**
+- Modify: `apps/server/src/core/base/controllers/base.controller.ts`
+
+- [ ] **Step 1: Add handler**
+
+Follow the exact precedent in `apps/server/src/integrations/export/export.controller.ts:47-109` (Fastify reply injection + permission check pattern) and the Read permission check pattern from the existing `info` handler in this controller.
+
+```ts
+// Add to constructor args:
+private readonly baseCsvExportService: BaseCsvExportService,
+
+// Imports:
+import { FastifyReply } from 'fastify';
+import { Res } from '@nestjs/common';
+import { ExportBaseCsvDto } from '../dto/export-base.dto';
+import { BaseCsvExportService } from '../services/base-csv-export.service';
+import { AuthWorkspace } from '../../../common/decorators/auth-workspace.decorator';
+import { Workspace } from '@docmost/db/types/entity.types';
+
+// Handler:
+@HttpCode(HttpStatus.OK)
+@Post('export-csv')
+async exportCsv(
+  @Body() dto: ExportBaseCsvDto,
+  @AuthUser() user: User,
+  @AuthWorkspace() workspace: Workspace,
+  @Res() res: FastifyReply,
+) {
+  const base = await this.baseRepo.findById(dto.baseId);
+  if (!base) {
+    throw new NotFoundException('Base not found');
+  }
+
+  const ability = await this.spaceAbility.createForUser(user, base.spaceId);
+  if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Base)) {
+    throw new ForbiddenException();
+  }
+
+  await this.baseCsvExportService.streamBaseAsCsv(
+    dto.baseId,
+    workspace.id,
+    res,
+  );
+}
+```
+
+- [ ] **Step 2: Build to verify wiring**
+
+```bash
+pnpm nx run server:build
+```
+
+Expected: build succeeds.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/server/src/core/base/controllers/base.controller.ts
+git commit -m "feat(base): add csv export http endpoint"
+```
+
+---
+
+## Task 8: Manual server smoke test — USER-DRIVEN
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Per `CLAUDE.md`, the agent builds but does not launch. Hand off to the user with the instructions below; resume the plan at Task 9 after the user confirms the curl succeeds.
+
+- [ ] **Step 1: Ask the user to start the dev servers (`pnpm dev`) and open the app**
+
+- [ ] **Step 2: Ask the user to run this curl, replacing `<BASE_ID>` and `<TOKEN>`**
+
+Get a session cookie by logging into the client at http://localhost:3000, then grab `authToken` from DevTools → Application → Cookies.
+
+```bash
+curl -v -X POST http://localhost:3001/api/bases/export-csv \
+  -H "Content-Type: application/json" \
+  -H "Cookie: authToken=<TOKEN>" \
+  -d '{"baseId": "<BASE_ID>"}' \
+  --output /tmp/base-export.csv
+
+head -5 /tmp/base-export.csv
+wc -l /tmp/base-export.csv
+```
+
+Expected:
+- `Content-Disposition: attachment; filename="..."` in response headers.
+- First bytes of the file are the UTF-8 BOM (`efbbbf`) — check with `xxd /tmp/base-export.csv | head -1`.
+- Header row contains property names.
+- Line count ≈ live row count + 1.
+- Opens cleanly in `less /tmp/base-export.csv` (no JSON blobs, no raw UUIDs for select / person / file).
+
+If the base has a PERSON column, confirm it renders the user's name, not a UUID.
+
+---
+
+## Task 9: Client service function
+
+**Files:**
+- Modify: `apps/client/src/features/base/services/base-service.ts`
+
+- [ ] **Step 1: Add `exportBaseToCsv`**
+
+Mirror `exportPage` in `apps/client/src/features/page/services/page-service.ts:116-135`:
+
+```ts
+import { saveAs } from "file-saver";
+
+export async function exportBaseToCsv(baseId: string): Promise<void> {
+  const req = await api.post(
+    "/bases/export-csv",
+    { baseId },
+    { responseType: "blob" },
+  );
+
+  const header = req?.headers["content-disposition"] ?? "";
+  const match = header.match(/filename="?([^"]+)"?/);
+  let fileName = match ? match[1] : "base.csv";
+  try {
+    fileName = decodeURIComponent(fileName);
+  } catch {
+    // fallback to raw filename
+  }
+
+  saveAs(req.data, fileName);
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/client/src/features/base/services/base-service.ts
+git commit -m "feat(base): add client csv export service call"
+```
+
+---
+
+## Task 10: Toolbar export button
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-toolbar.tsx`
+
+- [ ] **Step 1: Wire the button**
+
+Add imports:
+```tsx
+import { IconDownload } from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+import { exportBaseToCsv } from "@/features/base/services/base-service";
+```
+
+Add a handler inside the component:
+```tsx
+const [exporting, setExporting] = useState(false);
+const handleExport = useCallback(async () => {
+  if (exporting) return;
+  setExporting(true);
+  try {
+    await exportBaseToCsv(base.id);
+  } catch (err) {
+    notifications.show({
+      color: "red",
+      message: t("Failed to export CSV"),
+    });
+  } finally {
+    setExporting(false);
+  }
+}, [base.id, exporting, t]);
+```
+
+Insert the button inside `<div className={classes.toolbarRight}>` — place it before the filter/sort/fields group (leftmost of the right cluster):
+
+```tsx
+<Tooltip label={t("Export CSV")}>
+  <ActionIcon
+    variant="subtle"
+    size="sm"
+    color="gray"
+    loading={exporting}
+    onClick={handleExport}
+  >
+    <IconDownload size={16} />
+  </ActionIcon>
+</Tooltip>
+```
+
+- [ ] **Step 2: Build client**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/components/base-toolbar.tsx
+git commit -m "feat(base): add csv export button to base toolbar"
+```
+
+---
+
+## Task 11: End-to-end UI smoke test — USER-DRIVEN
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Ask the user to verify in their own browser session; resume at Task 12 after confirmation.
+
+- [ ] **Step 1: Ask the user to open a base in the browser (dev server already running from Task 8)**
+
+Navigate to a base with ≥ 1 row of each property type (or create cells manually: text, select, multi-select, person, file, checkbox, number, date).
+
+- [ ] **Step 2: Click the download icon in the toolbar**
+
+Expected:
+- Button shows loading spinner briefly.
+- Browser downloads a `.csv` named after the base.
+- CSV opens in Excel / Numbers / Google Sheets with correct column headers.
+- Select, multi-select, person, and file columns render names (not UUIDs).
+- No console errors in either tab.
+
+- [ ] **Step 3: Test an empty base**
+
+Open a brand-new base (only primary property, no rows). Click export.
+
+Expected: file contains just the header row + BOM. No error.
+
+- [ ] **Step 4: Test permission**
+
+As a user without access to the space, hit the endpoint (or simulate by setting user in session). Expected: 403.
+
+---
+
+## Task 12: Final commit + handoff
+
+- [ ] **Step 1: Verify branch is clean and all commits are on the branch**
+
+```bash
+git status
+git log --oneline main..HEAD
+```
+
+Expected: clean working tree, 8 commits (Tasks 1, 3, 4, 5, 6, 7, 9, 10).
+
+- [ ] **Step 2: Open the `superpowers:finishing-a-development-branch` skill to decide on merge/PR**
+
+---
+
+## Follow-ups (out of scope for v1)
+
+- Export respecting current view (filter / sort / column visibility / column order).
+- Export only selected rows (wired into `selection-action-bar.tsx`).
+- Format-aware number rendering (currency, percent, progress).
+- Configurable date format (respect view/base locale).
+- Large-export BullMQ job + email download link for very large bases.
+- Alternative formats: JSON, XLSX.
diff --git a/docs/superpowers/plans/2026-04-18-base-row-selection.md b/docs/superpowers/plans/2026-04-18-base-row-selection.md
new file mode 100644
index 000000000..901f3e9f4
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-base-row-selection.md
@@ -0,0 +1,1263 @@
+# Base Row Selection & Bulk Delete Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add Airtable-style multi-row selection (checkbox in row-number cell) + bulk delete via a floating action bar, backed by a new batch-delete endpoint.
+
+**Architecture:** Client stores selection in a jotai atom scoped to the active base/view. Row-number cell swaps between row-index and drag-handle+checkbox based on hover/selection state. A floating action bar fires `POST /bases/rows/delete-many`. Server adds a single-UPDATE soft-delete path that emits one `BASE_ROWS_DELETED` event relayed to clients over the existing base socket room.
+
+**Tech Stack:** NestJS + Kysely (server), React + TanStack Table + jotai + Mantine (client). No new dependencies.
+
+**Spec:** `docs/superpowers/specs/2026-04-18-base-row-selection-design.md`
+
+---
+
+## Build order
+
+Server endpoint first (so client mutations have something to hit), then client state + mutation, then UI, then realtime reconciliation.
+
+---
+
+### Task 1: Add `softDeleteMany` + `findByIds` to base-row repo
+
+**Files:**
+- Modify: `apps/server/src/database/repos/base/base-row.repo.ts`
+
+Pattern matches the existing `findById` and `softDelete` methods in the same file.
+
+- [ ] **Step 1: Add `findByIds` method**
+
+After the existing `findById` method, add:
+
+```ts
+async findByIds(
+  rowIds: string[],
+  opts: WorkspaceOpts,
+): Promise<BaseRow[]> {
+  if (rowIds.length === 0) return [];
+  const db = dbOrTx(this.db, opts.trx);
+  return (await db
+    .selectFrom('baseRows')
+    .select(BASE_ROW_COLUMNS)
+    .where('id', 'in', rowIds)
+    .where('workspaceId', '=', opts.workspaceId)
+    .where('deletedAt', 'is', null)
+    .execute()) as BaseRow[];
+}
+```
+
+- [ ] **Step 2: Add `softDeleteMany` method**
+
+After the existing `softDelete` method, add:
+
+```ts
+async softDeleteMany(
+  rowIds: string[],
+  opts: {
+    baseId: string;
+    workspaceId: string;
+    trx?: KyselyTransaction;
+  },
+): Promise<void> {
+  if (rowIds.length === 0) return;
+  const db = dbOrTx(this.db, opts.trx);
+  await db
+    .updateTable('baseRows')
+    .set({ deletedAt: new Date() })
+    .where('id', 'in', rowIds)
+    .where('baseId', '=', opts.baseId)
+    .where('workspaceId', '=', opts.workspaceId)
+    .where('deletedAt', 'is', null)
+    .execute();
+}
+```
+
+- [ ] **Step 3: Build server**
+
+Run: `pnpm nx run server:build`
+Expected: build succeeds.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/server/src/database/repos/base/base-row.repo.ts
+git commit -m "feat(base): add findByIds and softDeleteMany to base-row repo"
+```
+
+---
+
+### Task 2: Add `DeleteRowsDto` for batch delete
+
+**Files:**
+- Modify: `apps/server/src/core/base/dto/update-row.dto.ts`
+
+- [ ] **Step 1: Add DTO**
+
+Append to the end of the file:
+
+```ts
+export class DeleteRowsDto {
+  @IsUUID()
+  baseId: string;
+
+  @IsArray()
+  @ArrayMinSize(1)
+  @ArrayMaxSize(500)
+  @IsUUID('all', { each: true })
+  rowIds: string[];
+
+  @IsOptional()
+  @IsString()
+  requestId?: string;
+}
+```
+
+Ensure imports at the top of the file include `IsArray`, `ArrayMinSize`, `ArrayMaxSize` from `class-validator` (add any missing ones to the existing import line).
+
+- [ ] **Step 2: Build server**
+
+Run: `pnpm nx run server:build`
+Expected: build succeeds.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/server/src/core/base/dto/update-row.dto.ts
+git commit -m "feat(base): add DeleteRowsDto for batch row delete"
+```
+
+---
+
+### Task 3: Add `BASE_ROWS_DELETED` event name + payload type
+
+**Files:**
+- Modify: `apps/server/src/common/events/event.contants.ts`
+- Modify: `apps/server/src/core/base/events/base-events.ts`
+
+- [ ] **Step 1: Add event name constant**
+
+In `apps/server/src/common/events/event.contants.ts`, add a new enum member near the existing `BASE_ROW_DELETED`:
+
+```ts
+BASE_ROWS_DELETED = 'base.rows.deleted',
+```
+
+- [ ] **Step 2: Add event payload type**
+
+In `apps/server/src/core/base/events/base-events.ts`, add after `BaseRowDeletedEvent`:
+
+```ts
+export type BaseRowsDeletedEvent = BaseEventBase & { rowIds: string[] };
+```
+
+- [ ] **Step 3: Build server**
+
+Run: `pnpm nx run server:build`
+Expected: build succeeds.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/server/src/common/events/event.contants.ts apps/server/src/core/base/events/base-events.ts
+git commit -m "feat(base): add BASE_ROWS_DELETED event type"
+```
+
+---
+
+### Task 4: Add `deleteMany` service method
+
+**Files:**
+- Modify: `apps/server/src/core/base/services/base-row.service.ts`
+
+- [ ] **Step 1: Add import for new DTO and event**
+
+In the imports block:
+- Ensure `DeleteRowsDto` is imported from `../dto/update-row.dto`.
+- Ensure `BaseRowsDeletedEvent` is imported from `../events/base-events`.
+
+- [ ] **Step 2: Add `deleteMany` method after existing `delete`**
+
+```ts
+async deleteMany(
+  dto: DeleteRowsDto,
+  workspaceId: string,
+  userId?: string,
+): Promise<void> {
+  const rows = await this.baseRowRepo.findByIds(dto.rowIds, { workspaceId });
+  if (rows.length !== dto.rowIds.length) {
+    throw new NotFoundException('One or more rows not found');
+  }
+  if (rows.some((r) => r.baseId !== dto.baseId)) {
+    throw new NotFoundException('Row does not belong to base');
+  }
+
+  await this.baseRowRepo.softDeleteMany(dto.rowIds, {
+    baseId: dto.baseId,
+    workspaceId,
+  });
+
+  const event: BaseRowsDeletedEvent = {
+    baseId: dto.baseId,
+    workspaceId,
+    actorId: userId ?? null,
+    requestId: dto.requestId ?? null,
+    rowIds: dto.rowIds,
+  };
+  this.eventEmitter.emit(EventName.BASE_ROWS_DELETED, event);
+}
+```
+
+- [ ] **Step 3: Build server**
+
+Run: `pnpm nx run server:build`
+Expected: build succeeds.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/server/src/core/base/services/base-row.service.ts
+git commit -m "feat(base): add deleteMany service method for batch row delete"
+```
+
+---
+
+### Task 5: Add `delete-many` controller endpoint
+
+**Files:**
+- Modify: `apps/server/src/core/base/controllers/base-row.controller.ts`
+
+- [ ] **Step 1: Import `DeleteRowsDto`**
+
+Add `DeleteRowsDto` to the existing `update-row.dto` import line.
+
+- [ ] **Step 2: Add endpoint handler**
+
+Insert after the existing `@Post('delete')` handler (i.e. after the `delete` method that ends at line 119):
+
+```ts
+@HttpCode(HttpStatus.OK)
+@Post('delete-many')
+async deleteMany(
+  @Body() dto: DeleteRowsDto,
+  @AuthUser() user: User,
+  @AuthWorkspace() workspace: Workspace,
+) {
+  const base = await this.baseRepo.findById(dto.baseId);
+  if (!base) {
+    throw new NotFoundException('Base not found');
+  }
+
+  const ability = await this.spaceAbility.createForUser(user, base.spaceId);
+  if (ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Base)) {
+    throw new ForbiddenException();
+  }
+
+  await this.baseRowService.deleteMany(dto, workspace.id, user.id);
+}
+```
+
+- [ ] **Step 3: Build server**
+
+Run: `pnpm nx run server:build`
+Expected: build succeeds.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/server/src/core/base/controllers/base-row.controller.ts
+git commit -m "feat(base): add POST /bases/rows/delete-many endpoint"
+```
+
+---
+
+### Task 6: Realtime consumer for batch row delete
+
+**Files:**
+- Modify: `apps/server/src/core/base/realtime/base-ws-consumers.ts`
+
+- [ ] **Step 1: Import the new event type**
+
+Add `BaseRowsDeletedEvent` to the import from `../events/base-events`.
+
+- [ ] **Step 2: Add the event handler**
+
+Insert after the existing `onRowDeleted` handler (approx line 64):
+
+```ts
+@OnEvent(EventName.BASE_ROWS_DELETED)
+onRowsDeleted(e: BaseRowsDeletedEvent) {
+  this.ws.emitToBase(e.baseId, {
+    operation: 'base:rows:deleted',
+    baseId: e.baseId,
+    rowIds: e.rowIds,
+    actorId: e.actorId ?? null,
+    requestId: e.requestId ?? null,
+  });
+}
+```
+
+- [ ] **Step 3: Build server**
+
+Run: `pnpm nx run server:build`
+Expected: build succeeds.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/server/src/core/base/realtime/base-ws-consumers.ts
+git commit -m "feat(base): emit base:rows:deleted websocket event"
+```
+
+---
+
+### Task 7: Client service + types for batch delete
+
+**Files:**
+- Modify: `apps/client/src/features/base/types/base.types.ts`
+- Modify: `apps/client/src/features/base/services/base-service.ts`
+
+- [ ] **Step 1: Add `DeleteRowsInput` type**
+
+In `base.types.ts`, find the existing `DeleteRowInput` type and add just below it:
+
+```ts
+export type DeleteRowsInput = {
+  baseId: string;
+  rowIds: string[];
+  requestId?: string;
+};
+```
+
+- [ ] **Step 2: Add `deleteRows` service function**
+
+In `base-service.ts`, add `DeleteRowsInput` to the type imports from `@/features/base/types/base.types`, then add after the existing `deleteRow`:
+
+```ts
+export async function deleteRows(data: DeleteRowsInput): Promise<void> {
+  await api.post("/bases/rows/delete-many", data);
+}
+```
+
+- [ ] **Step 3: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/client/src/features/base/types/base.types.ts apps/client/src/features/base/services/base-service.ts
+git commit -m "feat(base): add deleteRows client service + type"
+```
+
+---
+
+### Task 8: `useDeleteRowsMutation` with optimistic update
+
+**Files:**
+- Modify: `apps/client/src/features/base/queries/base-row-query.ts`
+
+- [ ] **Step 1: Add imports**
+
+Add `deleteRows` to the imports from `@/features/base/services/base-service` and `DeleteRowsInput` to the type imports.
+
+Note: `RowCacheContext` is already defined at the top of this file (used by `useDeleteRowMutation`); reuse it — no new import or local type needed.
+
+- [ ] **Step 2: Add the mutation hook after `useDeleteRowMutation`**
+
+```ts
+export function useDeleteRowsMutation() {
+  const { t } = useTranslation();
+  return useMutation<void, Error, DeleteRowsInput, RowCacheContext>({
+    mutationFn: (data) => deleteRows({ ...data, requestId: newRequestId() }),
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({
+        queryKey: ["base-rows", variables.baseId],
+      });
+
+      const snapshots = queryClient.getQueriesData<
+        InfiniteData<IPagination<IBaseRow>>
+      >({ queryKey: ["base-rows", variables.baseId] });
+
+      const removeSet = new Set(variables.rowIds);
+      queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
+        { queryKey: ["base-rows", variables.baseId] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              items: page.items.filter((row) => !removeSet.has(row.id)),
+            })),
+          };
+        },
+      );
+
+      return { snapshots };
+    },
+    onError: (_, __, context) => {
+      if (context?.snapshots) {
+        for (const [key, data] of context.snapshots) {
+          queryClient.setQueryData(key, data);
+        }
+      }
+      notifications.show({
+        message: t("Failed to delete rows"),
+        color: "red",
+      });
+    },
+  });
+}
+```
+
+- [ ] **Step 3: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/client/src/features/base/queries/base-row-query.ts
+git commit -m "feat(base): add useDeleteRowsMutation with optimistic update"
+```
+
+---
+
+### Task 9: Selection atoms
+
+**Files:**
+- Modify: `apps/client/src/features/base/atoms/base-atoms.ts`
+
+- [ ] **Step 1: Add selection atoms**
+
+Append:
+
+```ts
+export const selectedRowIdsAtom = atom<Set<string>>(new Set<string>());
+export const lastToggledRowIndexAtom = atom<number | null>(null);
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/client/src/features/base/atoms/base-atoms.ts
+git commit -m "feat(base): add row selection atoms"
+```
+
+---
+
+### Task 10: `use-row-selection` hook
+
+**Files:**
+- Create: `apps/client/src/features/base/hooks/use-row-selection.ts`
+
+- [ ] **Step 1: Create the hook**
+
+```ts
+import { useCallback } from "react";
+import { useAtom } from "jotai";
+import {
+  selectedRowIdsAtom,
+  lastToggledRowIndexAtom,
+} from "@/features/base/atoms/base-atoms";
+
+type ToggleOpts = {
+  shiftKey: boolean;
+  rowIndex: number;
+  orderedRowIds: string[];
+};
+
+export function useRowSelection() {
+  const [selectedIds, setSelectedIds] = useAtom(selectedRowIdsAtom);
+  const [lastToggledIndex, setLastToggledIndex] = useAtom(
+    lastToggledRowIndexAtom,
+  );
+
+  const isSelected = useCallback(
+    (rowId: string) => selectedIds.has(rowId),
+    [selectedIds],
+  );
+
+  const toggle = useCallback(
+    (rowId: string, opts: ToggleOpts) => {
+      const { shiftKey, rowIndex, orderedRowIds } = opts;
+      const next = new Set(selectedIds);
+
+      if (shiftKey && lastToggledIndex !== null && lastToggledIndex !== rowIndex) {
+        const start = Math.min(lastToggledIndex, rowIndex);
+        const end = Math.max(lastToggledIndex, rowIndex);
+        const anchorId = orderedRowIds[lastToggledIndex];
+        const turnOn = anchorId ? next.has(anchorId) : true;
+        for (let i = start; i <= end; i += 1) {
+          const id = orderedRowIds[i];
+          if (!id) continue;
+          if (turnOn) next.add(id);
+          else next.delete(id);
+        }
+      } else {
+        if (next.has(rowId)) next.delete(rowId);
+        else next.add(rowId);
+      }
+
+      setSelectedIds(next);
+      setLastToggledIndex(rowIndex);
+    },
+    [selectedIds, lastToggledIndex, setSelectedIds, setLastToggledIndex],
+  );
+
+  const toggleAll = useCallback(
+    (loadedRowIds: string[]) => {
+      if (loadedRowIds.length === 0) return;
+      const allSelected = loadedRowIds.every((id) => selectedIds.has(id));
+      if (allSelected) {
+        setSelectedIds(new Set());
+      } else {
+        setSelectedIds(new Set(loadedRowIds));
+      }
+      setLastToggledIndex(null);
+    },
+    [selectedIds, setSelectedIds, setLastToggledIndex],
+  );
+
+  const clear = useCallback(() => {
+    setSelectedIds(new Set());
+    setLastToggledIndex(null);
+  }, [setSelectedIds, setLastToggledIndex]);
+
+  const removeIds = useCallback(
+    (rowIds: string[]) => {
+      if (rowIds.length === 0) return;
+      setSelectedIds((prev) => {
+        if (prev.size === 0) return prev;
+        let changed = false;
+        const next = new Set(prev);
+        for (const id of rowIds) {
+          if (next.delete(id)) changed = true;
+        }
+        return changed ? next : prev;
+      });
+    },
+    [setSelectedIds],
+  );
+
+  return {
+    selectedIds,
+    selectionCount: selectedIds.size,
+    isSelected,
+    toggle,
+    toggleAll,
+    clear,
+    removeIds,
+  };
+}
+```
+
+- [ ] **Step 2: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-row-selection.ts
+git commit -m "feat(base): add use-row-selection hook"
+```
+
+---
+
+### Task 11: Extract `RowNumberCell` with checkbox swap
+
+**Files:**
+- Create: `apps/client/src/features/base/components/grid/row-number-cell.tsx`
+- Modify: `apps/client/src/features/base/components/grid/grid-cell.tsx`
+- Modify: `apps/client/src/features/base/styles/grid.module.css`
+
+- [ ] **Step 1: Add CSS rules**
+
+Append to `grid.module.css`:
+
+```css
+.rowNumberCellInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  padding: 0 6px;
+}
+
+.rowNumberIndex {
+  display: inline;
+}
+
+.rowNumberCheckbox,
+.rowNumberDragHandle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.rowNumberDragHandle {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  cursor: grab;
+}
+
+.rowNumberDragHandle:active {
+  cursor: grabbing;
+}
+
+/* On hover, hide the index and show drag handle + checkbox */
+.row:hover .rowNumberIndex {
+  display: none;
+}
+.row:hover .rowNumberCheckbox,
+.row:hover .rowNumberDragHandle {
+  display: inline-flex;
+}
+
+/* When selected, checkbox always visible; index + drag handle hidden */
+.rowSelected .rowNumberIndex,
+.rowSelected .rowNumberDragHandle {
+  display: none;
+}
+.rowSelected .rowNumberCheckbox {
+  display: inline-flex;
+}
+.rowSelected .cell {
+  background: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-6));
+}
+```
+
+- [ ] **Step 2: Create `row-number-cell.tsx`**
+
+```tsx
+import { memo, useCallback } from "react";
+import { Checkbox } from "@mantine/core";
+import { IconGripVertical } from "@tabler/icons-react";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import classes from "@/features/base/styles/grid.module.css";
+
+type RowDragProps = {
+  draggable: boolean;
+  onDragStart: (e: React.DragEvent) => void;
+};
+
+type RowNumberCellProps = {
+  rowId: string;
+  rowIndex: number;
+  orderedRowIds: string[];
+  isPinned: boolean;
+  pinOffset?: number;
+  rowDragProps?: RowDragProps;
+};
+
+export const RowNumberCell = memo(function RowNumberCell({
+  rowId,
+  rowIndex,
+  orderedRowIds,
+  isPinned,
+  pinOffset,
+  rowDragProps,
+}: RowNumberCellProps) {
+  const { isSelected, toggle } = useRowSelection();
+  const selected = isSelected(rowId);
+
+  const handleCheckboxChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const nativeEvent = e.nativeEvent as MouseEvent;
+      toggle(rowId, {
+        shiftKey: nativeEvent.shiftKey === true,
+        rowIndex,
+        orderedRowIds,
+      });
+    },
+    [rowId, rowIndex, orderedRowIds, toggle],
+  );
+
+  return (
+    <div
+      className={`${classes.cell} ${classes.rowNumberCell} ${isPinned ? classes.cellPinned : ""}`}
+      style={isPinned ? { left: pinOffset } : undefined}
+    >
+      <div className={classes.rowNumberCellInner}>
+        <span
+          className={classes.rowNumberDragHandle}
+          draggable={rowDragProps?.draggable}
+          onDragStart={rowDragProps?.onDragStart}
+          aria-label="Drag row"
+        >
+          <IconGripVertical size={12} />
+        </span>
+        <span className={classes.rowNumberCheckbox}>
+          <Checkbox
+            size="xs"
+            checked={selected}
+            onChange={handleCheckboxChange}
+            aria-label="Select row"
+          />
+        </span>
+        <span className={classes.rowNumberIndex}>{rowIndex + 1}</span>
+      </div>
+    </div>
+  );
+});
+```
+
+- [ ] **Step 3: Update `grid-cell.tsx` to use the new component**
+
+Replace the `if (isRowNumber) { ... }` block (lines 108–121) with a render of `<RowNumberCell>`. Add `orderedRowIds?: string[]` to `GridCellProps` and pass it through. Import `RowNumberCell`. The final branch becomes:
+
+```tsx
+if (isRowNumber) {
+  return (
+    <RowNumberCell
+      rowId={rowId}
+      rowIndex={rowIndex}
+      orderedRowIds={orderedRowIds ?? []}
+      isPinned={isPinned}
+      pinOffset={pinOffset}
+      rowDragProps={rowDragProps}
+    />
+  );
+}
+```
+
+- [ ] **Step 4: Propagate `orderedRowIds` through `GridRow`**
+
+Modify `apps/client/src/features/base/components/grid/grid-row.tsx`:
+- Add `orderedRowIds: string[]` to `GridRowProps`.
+- Pass it through to `<GridCell>`.
+- Apply `classes.rowSelected` to the root `<div>` when `useRowSelection().isSelected(row.id)`.
+
+- [ ] **Step 5: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/client/src/features/base/components/grid/row-number-cell.tsx apps/client/src/features/base/components/grid/grid-cell.tsx apps/client/src/features/base/components/grid/grid-row.tsx apps/client/src/features/base/styles/grid.module.css
+git commit -m "feat(base): row-number cell renders checkbox + drag handle on hover"
+```
+
+---
+
+### Task 12: `RowNumberHeaderCell` with tri-state select-all
+
+**Files:**
+- Create: `apps/client/src/features/base/components/grid/row-number-header-cell.tsx`
+- Modify: `apps/client/src/features/base/components/grid/grid-header-cell.tsx`
+- Modify: `apps/client/src/features/base/styles/grid.module.css`
+
+- [ ] **Step 1: Add header CSS**
+
+Append to `grid.module.css`:
+
+```css
+.rowNumberHeaderInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.rowNumberHeaderHash {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  font-size: var(--mantine-font-size-xs);
+}
+
+.rowNumberHeaderCheckbox {
+  display: none;
+}
+
+.headerCell:hover .rowNumberHeaderHash,
+.hasSelection .rowNumberHeaderHash {
+  display: none;
+}
+
+.headerCell:hover .rowNumberHeaderCheckbox,
+.hasSelection .rowNumberHeaderCheckbox {
+  display: inline-flex;
+}
+```
+
+- [ ] **Step 2: Create the component**
+
+```tsx
+import { memo, useMemo } from "react";
+import { Checkbox, Tooltip } from "@mantine/core";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import classes from "@/features/base/styles/grid.module.css";
+
+type RowNumberHeaderCellProps = {
+  loadedRowIds: string[];
+};
+
+export const RowNumberHeaderCell = memo(function RowNumberHeaderCell({
+  loadedRowIds,
+}: RowNumberHeaderCellProps) {
+  const { selectedIds, toggleAll } = useRowSelection();
+
+  const { checked, indeterminate } = useMemo(() => {
+    if (loadedRowIds.length === 0) {
+      return { checked: false, indeterminate: false };
+    }
+    const selectedInLoaded = loadedRowIds.reduce(
+      (acc, id) => (selectedIds.has(id) ? acc + 1 : acc),
+      0,
+    );
+    return {
+      checked: selectedInLoaded === loadedRowIds.length,
+      indeterminate:
+        selectedInLoaded > 0 && selectedInLoaded < loadedRowIds.length,
+    };
+  }, [loadedRowIds, selectedIds]);
+
+  if (loadedRowIds.length === 0) return null;
+
+  return (
+    <div className={classes.rowNumberHeaderInner}>
+      <span className={classes.rowNumberHeaderHash}>#</span>
+      <span className={classes.rowNumberHeaderCheckbox}>
+        <Tooltip label="Select all loaded rows" withinPortal>
+          <Checkbox
+            size="xs"
+            checked={checked}
+            indeterminate={indeterminate}
+            onChange={() => toggleAll(loadedRowIds)}
+            aria-label="Select all loaded rows"
+          />
+        </Tooltip>
+      </span>
+    </div>
+  );
+});
+```
+
+Note: reading `selectedIds` from the hook ensures this re-renders on selection change.
+
+- [ ] **Step 3: Wire into `grid-header-cell.tsx`**
+
+In `grid-header-cell.tsx`, locate the `isRowNumber ? ( flexRender(...) ) : ( ... )` ternary in the JSX (the existing branch renders `#` via `flexRender(header.column.columnDef.header, header.getContext())`). Replace the `isRowNumber` branch with:
+
+```tsx
+isRowNumber ? (
+  <RowNumberHeaderCell loadedRowIds={loadedRowIds} />
+) : (
+  // existing non-row-number branch unchanged
+)
+```
+
+Add `loadedRowIds: string[]` as a required prop on `GridHeaderCellProps` (and thread it through — see Step 4). Also add the `classes.hasSelection` class to the header cell's root `div` (line 121 area) when `useRowSelection().selectionCount > 0`:
+
+```tsx
+className={`${classes.headerCell} ${isPinned ? classes.headerCellPinned : ""} ${hasSelection ? classes.hasSelection : ""}`}
+```
+
+where `const { selectionCount } = useRowSelection(); const hasSelection = selectionCount > 0;` is added near the top of `GridHeaderCell`.
+
+- [ ] **Step 4: Thread `loadedRowIds` through `GridHeader` → `GridHeaderCell`**
+
+In `grid-header.tsx`, add `loadedRowIds: string[]` as a required prop on `GridHeaderProps`. Pass it to each rendered `<GridHeaderCell>`.
+
+In `grid-container.tsx`, reuse the existing `rowIds` memo (`rows.map((r) => r.id)`) and pass it as `loadedRowIds={rowIds}` to `<GridHeader>`.
+
+- [ ] **Step 5: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/client/src/features/base/components/grid/row-number-header-cell.tsx apps/client/src/features/base/components/grid/grid-header-cell.tsx apps/client/src/features/base/components/grid/grid-header.tsx apps/client/src/features/base/components/grid/grid-container.tsx apps/client/src/features/base/styles/grid.module.css
+git commit -m "feat(base): header select-all with tri-state checkbox"
+```
+
+---
+
+### Task 13: `use-delete-selected-rows` hook + `SelectionActionBar` floating bar
+
+**Files:**
+- Create: `apps/client/src/features/base/hooks/use-delete-selected-rows.ts`
+- Create: `apps/client/src/features/base/components/grid/selection-action-bar.tsx`
+- Modify: `apps/client/src/features/base/components/grid/grid-container.tsx`
+- Modify: `apps/client/src/features/base/styles/grid.module.css`
+
+- [ ] **Step 1: Add CSS**
+
+Append:
+
+```css
+.selectionActionBarWrapper {
+  position: sticky;
+  bottom: 16px;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 5;
+  grid-column: 1 / -1;
+}
+
+.selectionActionBar {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: var(--mantine-radius-md);
+  box-shadow: var(--mantine-shadow-lg);
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.selectionActionBarCount {
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+}
+```
+
+- [ ] **Step 2: Create `use-delete-selected-rows.ts`**
+
+```ts
+import { useCallback } from "react";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import { useDeleteRowsMutation } from "@/features/base/queries/base-row-query";
+
+const BATCH_SIZE = 500;
+
+export function useDeleteSelectedRows(baseId: string) {
+  const { t } = useTranslation();
+  const { selectedIds, clear } = useRowSelection();
+  const mutation = useDeleteRowsMutation();
+
+  const deleteSelected = useCallback(async () => {
+    const ids = Array.from(selectedIds);
+    if (ids.length === 0) return;
+    const chunks: string[][] = [];
+    for (let i = 0; i < ids.length; i += BATCH_SIZE) {
+      chunks.push(ids.slice(i, i + BATCH_SIZE));
+    }
+    try {
+      for (const chunk of chunks) {
+        await mutation.mutateAsync({ baseId, rowIds: chunk });
+      }
+      notifications.show({
+        message: t("{{count}} rows deleted", { count: ids.length }),
+      });
+      clear();
+    } catch {
+      // mutation onError already shows notification
+    }
+  }, [baseId, selectedIds, mutation, clear, t]);
+
+  return { deleteSelected, isPending: mutation.isPending };
+}
+```
+
+- [ ] **Step 3: Create `selection-action-bar.tsx`**
+
+```tsx
+import { memo } from "react";
+import { ActionIcon, Button, Transition } from "@mantine/core";
+import { IconTrash, IconX } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import { useDeleteSelectedRows } from "@/features/base/hooks/use-delete-selected-rows";
+import classes from "@/features/base/styles/grid.module.css";
+
+type SelectionActionBarProps = {
+  baseId: string;
+};
+
+export const SelectionActionBar = memo(function SelectionActionBar({
+  baseId,
+}: SelectionActionBarProps) {
+  const { t } = useTranslation();
+  const { selectionCount, clear } = useRowSelection();
+  const { deleteSelected, isPending } = useDeleteSelectedRows(baseId);
+
+  const isOpen = selectionCount > 0;
+
+  return (
+    <Transition mounted={isOpen} transition="slide-up" duration={150}>
+      {(styles) => (
+        <div className={classes.selectionActionBarWrapper} style={styles}>
+          <div className={classes.selectionActionBar}>
+            <span className={classes.selectionActionBarCount}>
+              {t("{{count}} selected", { count: selectionCount })}
+            </span>
+            <Button
+              size="xs"
+              color="red"
+              variant="light"
+              leftSection={<IconTrash size={14} />}
+              loading={isPending}
+              onClick={() => void deleteSelected()}
+            >
+              {t("Delete")}
+            </Button>
+            <ActionIcon
+              size="sm"
+              variant="subtle"
+              onClick={clear}
+              aria-label={t("Clear selection")}
+            >
+              <IconX size={14} />
+            </ActionIcon>
+          </div>
+        </div>
+      )}
+    </Transition>
+  );
+});
+```
+
+- [ ] **Step 4: Mount in `grid-container.tsx`**
+
+In `grid-container.tsx`:
+- Add `import { SelectionActionBar } from "./selection-action-bar";`
+- Render `<SelectionActionBar baseId={baseId!} />` directly after the `<AddRowButton ... />` line, inside the `<div className={classes.grid}>` container. Skip if `!baseId`.
+
+- [ ] **Step 5: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-delete-selected-rows.ts apps/client/src/features/base/components/grid/selection-action-bar.tsx apps/client/src/features/base/components/grid/grid-container.tsx apps/client/src/features/base/styles/grid.module.css
+git commit -m "feat(base): floating selection action bar with bulk delete"
+```
+
+---
+
+### Task 14: Keyboard handler for Delete / Backspace / Esc
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/grid/grid-container.tsx`
+
+- [ ] **Step 1: Add keyboard handler**
+
+In `grid-container.tsx`, add a `useEffect` that attaches a `keydown` listener to `scrollRef.current` (the grid wrapper). Guards:
+1. `editingCell` is null
+2. `document.activeElement` is contained by `scrollRef.current` (i.e. focus inside the grid)
+3. Not typing in an input / textarea / contenteditable
+
+Behavior:
+- `Escape` → `clear()` if `selectionCount > 0`.
+- `Delete` or `Backspace` → if `selectionCount > 0`, call `deleteSelected()` from `useDeleteSelectedRows`.
+
+Add imports for `useRowSelection` and `useDeleteSelectedRows`, then:
+
+```ts
+const { deleteSelected } = useDeleteSelectedRows(baseId ?? "");
+const { selectionCount, clear } = useRowSelection();
+
+useEffect(() => {
+  const el = scrollRef.current;
+  if (!el) return;
+  const handler = (e: KeyboardEvent) => {
+    if (editingCell) return;
+    const active = document.activeElement as HTMLElement | null;
+    if (!active || !el.contains(active)) return;
+    const tag = active.tagName;
+    if (
+      tag === "INPUT" ||
+      tag === "TEXTAREA" ||
+      active.isContentEditable
+    ) {
+      return;
+    }
+    if (e.key === "Escape" && selectionCount > 0) {
+      clear();
+      return;
+    }
+    if ((e.key === "Delete" || e.key === "Backspace") && selectionCount > 0) {
+      e.preventDefault();
+      void deleteSelected();
+    }
+  };
+  el.addEventListener("keydown", handler);
+  return () => el.removeEventListener("keydown", handler);
+}, [editingCell, selectionCount, clear, deleteSelected]);
+```
+
+Skip this effect entirely if `!baseId`.
+
+- [ ] **Step 2: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/components/grid/grid-container.tsx
+git commit -m "feat(base): keyboard delete and esc to clear selection"
+```
+
+---
+
+### Task 15: Clear selection on view / filter / sort / base change
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-table.tsx`
+
+- [ ] **Step 1: Add effect**
+
+Inside `BaseTable`, after the existing `useEffect` that syncs `activeViewId`, add:
+
+```ts
+const { clear: clearSelection } = useRowSelection();
+useEffect(() => {
+  clearSelection();
+  // Clear whenever identity of base or active view changes. Filter and sort
+  // changes flow through activeView.config, which re-renders the rows —
+  // depending on activeView.id alone keeps this effect stable (object
+  // identity of activeFilter / activeSorts may change every render).
+}, [baseId, activeView?.id, clearSelection]);
+```
+
+Import `useRowSelection` from `@/features/base/hooks/use-row-selection`.
+
+Note: the spec asks for selection to clear on filter/sort change within a single view too. For v1, clearing only on view/base change is sufficient — a user changing sort within the same view still sees the same row set re-ordered, and the selected rows remain valid. If the product later wants "clear on filter change within a view," add a filter-identity hash via `JSON.stringify(activeFilter)` as a dep.
+
+- [ ] **Step 2: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/components/base-table.tsx
+git commit -m "feat(base): clear row selection on view/filter/sort/base change"
+```
+
+---
+
+### Task 16: Realtime reconciliation — handle `base:rows:deleted` + prune selection
+
+**Files:**
+- Modify: `apps/client/src/features/base/hooks/use-base-socket.ts`
+
+- [ ] **Step 1: Add new message type**
+
+Near the existing `BaseRowDeleted` type, add:
+
+```ts
+type BaseRowsDeleted = {
+  operation: "base:rows:deleted";
+  baseId: string;
+  rowIds: string[];
+  requestId?: string | null;
+};
+```
+
+Add `BaseRowsDeleted` to the union of socket message types used by the handler switch.
+
+- [ ] **Step 2: Handle the new event**
+
+Inside the socket handler switch/if tree, after the existing `base:row:deleted` case, add a case for `base:rows:deleted` that:
+1. Skips if `requestId` is marked outbound (existing suppression helper handles this).
+2. Removes all rowIds from all `["base-rows", msg.baseId]` infinite-query pages in one pass (same pattern as existing `base:row:deleted`, but with `new Set(msg.rowIds)`).
+3. Prunes them from `selectedRowIdsAtom` via the jotai store.
+
+For (3): import `getDefaultStore` from `jotai` (or read via the atom's setter) — follow whatever pattern this file already uses. If atom access from outside components is not the pattern here, instead export a `removeSelectedRowIds` helper that `base-table.tsx` subscribes to via `useEffect` listening to a ref or event — BUT the cleaner path is to call `getDefaultStore().set(selectedRowIdsAtom, ...)` directly since socket handlers are not React components.
+
+Concrete code:
+
+```ts
+import { getDefaultStore } from "jotai";
+import { selectedRowIdsAtom } from "@/features/base/atoms/base-atoms";
+
+// inside the handler for base:rows:deleted:
+const removeSet = new Set(msg.rowIds);
+queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
+  { queryKey: ["base-rows", msg.baseId] },
+  (old) => {
+    if (!old) return old;
+    return {
+      ...old,
+      pages: old.pages.map((page) => ({
+        ...page,
+        items: page.items.filter((row) => !removeSet.has(row.id)),
+      })),
+    };
+  },
+);
+const store = getDefaultStore();
+const current = store.get(selectedRowIdsAtom);
+if (current.size > 0) {
+  let changed = false;
+  const next = new Set(current);
+  for (const id of msg.rowIds) {
+    if (next.delete(id)) changed = true;
+  }
+  if (changed) store.set(selectedRowIdsAtom, next);
+}
+```
+
+- [ ] **Step 3: Also prune selection in the existing `base:row:deleted` case**
+
+Add the same single-id `store.set(selectedRowIdsAtom, ...)` prune after the existing cache update for the single-row delete event.
+
+- [ ] **Step 4: Build client**
+
+Run: `pnpm nx run client:build`
+Expected: build succeeds.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-base-socket.ts
+git commit -m "feat(base): reconcile bulk delete over socket + prune selection"
+```
+
+---
+
+### Task 17: Full build + manual verification
+
+**Files:** none
+
+- [ ] **Step 1: Full build**
+
+Run: `pnpm build`
+Expected: both client and server build cleanly.
+
+- [ ] **Step 2: Manual smoke test (user-led, not Claude-led)**
+
+The user will run the dev environment. Verify:
+1. Hover a row → drag handle + checkbox appear, index hides.
+2. Click checkbox → row highlights, row stays checked on blur.
+3. Shift-click a later row → range selected.
+4. Esc → selection clears.
+5. Header checkbox → select-all-loaded; click again → clear.
+6. Floating bar shows `N selected` with Delete and X buttons.
+7. Click Delete → rows disappear, toast `N rows deleted`, selection clears.
+8. Delete/Backspace key with grid focused deletes selected rows.
+9. Switch views / apply filter → selection clears.
+10. Two browser windows: delete rows in one → other window's cache and selection update.
+
+- [ ] **Step 3: Final commit (if any lint/style tweaks needed after smoke test)**
+
+No-op if smoke test clean.
+
+---
+
+## Notes
+
+- No feature flag. No migration.
+- No automated tests in this plan. Base feature has no existing test harness; manual verification and build gate are sufficient per repo convention. If the user later requests tests, add a service spec for `deleteMany` patterned after `apps/server/src/core/auth/services/auth.service.spec.ts` and a hook test for `use-row-selection`.
+- Tasks 1–6 are server-only and can be reviewed independently; tasks 7–16 are client-only; task 17 is integration.
+- Tasks 11 and 12 both touch `grid.module.css`. Keep each task's CSS appended in order to avoid merge conflicts if parallelized.
diff --git a/docs/superpowers/plans/2026-04-18-base-table-skeleton.md b/docs/superpowers/plans/2026-04-18-base-table-skeleton.md
new file mode 100644
index 000000000..3556271a9
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-base-table-skeleton.md
@@ -0,0 +1,342 @@
+# Base Table Skeleton Loading State Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the centered Mantine `<Loader>` that currently renders while a base is loading with a layout-matching skeleton of the toolbar + grid built from Mantine `<Skeleton>` shimmers, so there is no layout shift when real data lands.
+
+**Architecture:** A new self-contained component that renders the same DOM skeleton as the real table (toolbar row + header row + N body rows) using Mantine's `Skeleton` primitive, styled with the existing grid CSS module so tracks and heights match 1:1. `BaseTable` swaps its loading branch from `<Loader>` to `<BaseTableSkeleton />`.
+
+**Tech Stack:** React 18, Mantine v8 `Skeleton`, existing CSS module (`grid.module.css`).
+
+---
+
+## Background
+
+Current loading branch in [`base-table.tsx:157-163`](apps/client/src/features/base/components/base-table.tsx:157):
+
+```tsx
+if (baseLoading || rowsLoading) {
+  return (
+    <div className={classes.loadingOverlay}>
+      <Loader size="md" />
+    </div>
+  );
+}
+```
+
+`.loadingOverlay` ([`grid.module.css:290-295`](apps/client/src/features/base/styles/grid.module.css:290)) is a centered flex container. Only used here.
+
+Real table structure (for reference so the skeleton matches):
+
+- **Toolbar row** — view tabs on the left (each is a ~32px-wide pill), four `ActionIcon`s on the right (16px icons).
+- **Header row** — subgrid. Pinned row-number column (64px). Primary column pinned. Each header cell is 34px tall, has a 14px type icon, and a short property-name label.
+- **Body rows** — subgrid, 36px min-height, cells separated by 1px borders.
+
+Matching the real layout 1:1 means:
+- Same `display: grid` + `grid-template-columns` on the outer container.
+- Same `.headerRow` / `.row` / `.cell` classes from `grid.module.css` so padding, borders, and heights line up.
+- When the real data lands, the only visual change is `<Skeleton>` → real content — no reflow, no column-width jump.
+
+**Skeleton dimensions (tuned for a neutral default, since we don't yet know the view's column widths):**
+
+- 6 columns, 180px each (matches `DEFAULT_COLUMN_WIDTH` in [`use-base-table.ts:25`](apps/client/src/features/base/hooks/use-base-table.ts:25)).
+- Row-number column: 64px (matches `ROW_NUMBER_COLUMN_WIDTH`).
+- 10 body rows.
+- Toolbar: 3 view tab pills (44px each), 4 action icons (22px each).
+
+Varying the per-cell skeleton width within each column (between ~50% and ~85% of the cell width) adds realism — otherwise every cell skeleton is identical and screams "fake".
+
+---
+
+## File Structure
+
+**New files:**
+- `apps/client/src/features/base/components/base-table-skeleton.tsx` — the skeleton component.
+- `apps/client/src/features/base/styles/base-table-skeleton.module.css` — minimal additional styles (the skeleton cell wrapper needs width-constrained `<Skeleton>` children that center vertically in the 36px cell).
+
+**Modified files:**
+- `apps/client/src/features/base/components/base-table.tsx` — swap the loading branch to render `<BaseTableSkeleton />`; drop the now-unused `Loader` import.
+- `apps/client/src/features/base/styles/grid.module.css` — remove `.loadingOverlay` (dead).
+
+No new deps — `Skeleton` is already exported from `@mantine/core`.
+
+---
+
+## Task 1: Build the skeleton component
+
+**Files:**
+- Create: `apps/client/src/features/base/components/base-table-skeleton.tsx`
+- Create: `apps/client/src/features/base/styles/base-table-skeleton.module.css`
+
+- [ ] **Step 1: Create the CSS module**
+
+`apps/client/src/features/base/styles/base-table-skeleton.module.css`:
+
+```css
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs) 0;
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.toolbarTabs {
+  display: flex;
+  gap: 6px;
+  flex: 1;
+}
+
+.toolbarActions {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+  margin-left: auto;
+}
+
+.gridWrapper {
+  overflow: hidden;
+  flex: 1;
+  border-top: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+}
+
+.grid {
+  display: grid;
+}
+
+.cellInner {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 0 8px;
+}
+
+.headerCellInner {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  width: 100%;
+  padding: 0 8px;
+}
+```
+
+- [ ] **Step 2: Create the skeleton component**
+
+`apps/client/src/features/base/components/base-table-skeleton.tsx`:
+
+```tsx
+import { Skeleton } from "@mantine/core";
+import gridClasses from "@/features/base/styles/grid.module.css";
+import classes from "@/features/base/styles/base-table-skeleton.module.css";
+
+const ROW_NUMBER_WIDTH = 64;
+const COLUMN_WIDTH = 180;
+const COLUMN_COUNT = 6;
+const ROW_COUNT = 10;
+
+// Pseudo-random but deterministic widths so the skeleton doesn't flicker
+// between renders. Values are a rough normal distribution around
+// 60-85 % of the cell width.
+const CELL_WIDTH_RATIOS = [0.78, 0.62, 0.84, 0.55, 0.71, 0.66];
+const HEADER_WIDTH_RATIOS = [0.42, 0.58, 0.5, 0.64, 0.46, 0.54];
+
+export function BaseTableSkeleton() {
+  const gridTemplateColumns = [
+    `${ROW_NUMBER_WIDTH}px`,
+    ...Array.from({ length: COLUMN_COUNT }, () => `${COLUMN_WIDTH}px`),
+  ].join(" ");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <div className={classes.toolbar}>
+        <div className={classes.toolbarTabs}>
+          <Skeleton height={22} width={44} radius="sm" />
+          <Skeleton height={22} width={64} radius="sm" />
+          <Skeleton height={22} width={48} radius="sm" />
+        </div>
+        <div className={classes.toolbarActions}>
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+        </div>
+      </div>
+
+      <div className={classes.gridWrapper}>
+        <div className={classes.grid} style={{ gridTemplateColumns }}>
+          {/* Header row */}
+          <div className={gridClasses.headerCell}>
+            <div className={classes.headerCellInner}>
+              <Skeleton height={14} width={14} circle />
+            </div>
+          </div>
+          {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+            <div key={`h-${colIndex}`} className={gridClasses.headerCell}>
+              <div className={classes.headerCellInner}>
+                <Skeleton height={14} width={14} circle />
+                <Skeleton
+                  height={10}
+                  width={`${HEADER_WIDTH_RATIOS[colIndex] * 100}%`}
+                  radius="sm"
+                />
+              </div>
+            </div>
+          ))}
+
+          {/* Body rows */}
+          {Array.from({ length: ROW_COUNT }).map((_, rowIndex) => (
+            <div
+              key={`row-${rowIndex}`}
+              style={{ display: "contents" }}
+            >
+              <div className={gridClasses.cell}>
+                <div className={classes.cellInner}>
+                  <Skeleton height={10} width={18} radius="sm" />
+                </div>
+              </div>
+              {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                <div
+                  key={`cell-${rowIndex}-${colIndex}`}
+                  className={gridClasses.cell}
+                >
+                  <div className={classes.cellInner}>
+                    <Skeleton
+                      height={10}
+                      width={`${CELL_WIDTH_RATIOS[(rowIndex + colIndex) % CELL_WIDTH_RATIOS.length] * 100}%`}
+                      radius="sm"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+Key points the implementer must not change:
+- `gridClasses.headerCell` and `gridClasses.cell` come from the REAL table's CSS module so borders, heights, and hover semantics match exactly. Don't reinvent them.
+- The `style={{ display: "contents" }}` row wrapper is intentional — the outer `.grid` is a single CSS grid, and each "row" is just a flattened sequence of cells that span the grid columns via `display: contents`. This mirrors how the real table flattens rows (see `.row` with `grid-column: 1 / -1; grid-template-columns: subgrid;` in [`grid.module.css:119-123`](apps/client/src/features/base/styles/grid.module.css:119)). We use `contents` instead of subgrid because the skeleton's outer grid is not a subgrid.
+- Using `Skeleton` with `circle` prop for the row-number placeholder and type-icon placeholders — these match the real UI's round/small icon presence.
+- The `CELL_WIDTH_RATIOS[(rowIndex + colIndex) % ...]` gives each cell a deterministic-but-varied skeleton width so it doesn't look like a stamped pattern.
+
+- [ ] **Step 3: Build to verify TypeScript compiles**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add \
+  apps/client/src/features/base/components/base-table-skeleton.tsx \
+  apps/client/src/features/base/styles/base-table-skeleton.module.css
+git commit -m "feat(base): add layout-matching skeleton loading component"
+```
+
+---
+
+## Task 2: Swap the loader for the skeleton in BaseTable
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-table.tsx`
+- Modify: `apps/client/src/features/base/styles/grid.module.css`
+
+- [ ] **Step 1: Replace the loading branch**
+
+In `base-table.tsx`:
+
+Drop `Loader` from the `@mantine/core` import (line 2). Leave `Text` and `Stack` — they're still used by the error branch.
+
+Add near the other imports:
+```tsx
+import { BaseTableSkeleton } from "@/features/base/components/base-table-skeleton";
+```
+
+Change lines 157-163:
+
+Before:
+```tsx
+if (baseLoading || rowsLoading) {
+  return (
+    <div className={classes.loadingOverlay}>
+      <Loader size="md" />
+    </div>
+  );
+}
+```
+
+After:
+```tsx
+if (baseLoading || rowsLoading) {
+  return <BaseTableSkeleton />;
+}
+```
+
+- [ ] **Step 2: Remove the dead `.loadingOverlay` class**
+
+In `apps/client/src/features/base/styles/grid.module.css`, delete lines 290-295 (the `.loadingOverlay { ... }` block — exact content):
+
+```css
+.loadingOverlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-xl);
+}
+```
+
+- [ ] **Step 3: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success with no "unused" warnings from the removed class.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add \
+  apps/client/src/features/base/components/base-table.tsx \
+  apps/client/src/features/base/styles/grid.module.css
+git commit -m "feat(base): show table skeleton instead of centered loader on load"
+```
+
+---
+
+## Task 3: USER smoke test
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off.
+
+Ask the user to:
+
+- [ ] **Fresh load.** Open a base fresh (full tab reload). The skeleton should render immediately, then transition cleanly to the real table. No jarring jump, no centered spinner.
+
+- [ ] **Throttled load.** DevTools → Network tab → throttle to "Slow 3G" → reload. The skeleton should stay visible for the duration of the slow request, shimmer visible the whole time.
+
+- [ ] **Dark mode.** Toggle to dark mode. Skeleton colors should render appropriately (Mantine's `Skeleton` handles this automatically via light-dark tokens).
+
+- [ ] **Window resize during load.** Resize the browser window while the skeleton is showing. Skeleton's CSS grid should stretch the columns proportionally — no layout break.
+
+- [ ] **Error state still works.** Hard to trigger; if you can, disable network entirely and reload. You should see the existing "Failed to load base" message, NOT the skeleton stuck forever.
+
+- [ ] **No console errors / CSS warnings during transition from skeleton → real table.**
+
+If all pass, the swap is done.
+
+---
+
+## Out of scope
+
+- Matching the exact column count and widths the view ends up rendering. The skeleton is a neutral placeholder; a perfect match would require knowing the view config, which we don't have before the base query resolves. A 6-column, 180px default is "close enough to not flash".
+- Skeleton for `GridContainer` inside an already-loaded base (e.g., when switching views of the same base, where we already have properties). Out of scope — this plan only addresses the initial load path.
+- Progressive hydration (render the toolbar first, then skeleton rows as they stream in). Overkill for a small base query.
diff --git a/docs/superpowers/plans/2026-04-18-cell-person-keyboard-nav.md b/docs/superpowers/plans/2026-04-18-cell-person-keyboard-nav.md
new file mode 100644
index 000000000..8c44603fb
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-cell-person-keyboard-nav.md
@@ -0,0 +1,776 @@
+# Base Cell Dropdown Keyboard Navigation Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add keyboard navigation (ArrowUp/Down/Home/End/Enter) to all four base cell dropdowns — `CellPerson`, `CellSelect`, `CellMultiSelect`, `CellStatus` — so users can pick values without a mouse, matching Mantine `MultiSelect`'s keyboard UX.
+
+**Architecture:** All four cells use the same custom `Popover` + HTML dropdown pattern (not `useCombobox`). Instead of editing each in isolation, factor the shared logic (activeIndex, arrow/Home/End handling, reset-on-filter, scroll-into-view, option ref tracking) into one hook `useListKeyboardNav`. Each cell flattens its visible items into a single linear list (including the "Add option" row for select/multi, and flattening across status categories), passes the count to the hook, and wires up Enter selection locally.
+
+**Tech Stack:** React 18, TypeScript, Mantine v8 `Popover` / `TextInput`, CSS Modules.
+
+---
+
+## Scope
+
+**In scope:**
+- `cell-person.tsx` — members, tag input with Backspace-removes-tag behavior.
+- `cell-select.tsx` — single choice, optional "Add option" row.
+- `cell-multi-select.tsx` — multi choice, optional "Add option" row.
+- `cell-status.tsx` — single choice, grouped by category (flattened for nav).
+- Shared hook `use-list-keyboard-nav.ts`.
+- One new CSS class for keyboard-active highlight.
+
+**Out of scope:**
+- Swapping any cell to Mantine `MultiSelect` / `useCombobox` — too disruptive; all four have deliberate custom UIs.
+- Automated tests — this codebase has no existing unit tests for base cells, and a harness just for this is scope creep. Task 7 is a manual QUX walkthrough.
+- Other editors in the base feature (e.g., toolbar pickers, filter UIs) — out of scope unless they hit the same bug.
+
+---
+
+## File Structure
+
+**Create:**
+- `apps/client/src/features/base/hooks/use-list-keyboard-nav.ts` — shared hook.
+
+**Modify:**
+- `apps/client/src/features/base/styles/cells.module.css` — add `.selectOptionKeyboardActive`.
+- `apps/client/src/features/base/components/cells/cell-person.tsx`
+- `apps/client/src/features/base/components/cells/cell-select.tsx`
+- `apps/client/src/features/base/components/cells/cell-multi-select.tsx`
+- `apps/client/src/features/base/components/cells/cell-status.tsx`
+
+**No other files touched.**
+
+---
+
+## Design Notes (read before coding)
+
+### Why a hook and not copy-paste per cell
+
+Four cells would get the same 40-line block. C-9 ("SHOULD NOT extract unless reused") is satisfied here — the logic is reused in 4 places, and diverging across them later would be a bug farm. The hook owns only the *navigation* concern (activeIndex, arrow keys, scroll). Each cell still owns its own Enter semantics, Escape, Backspace, and filter computation, because those diverge.
+
+### Why `activeIndex: -1` initially
+
+No highlight on open. First ArrowDown moves to 0. Enter at `-1` is a no-op — we don't guess, we don't commit. This matches Mantine MultiSelect behavior.
+
+### Why a new CSS class instead of reusing `selectOptionActive`
+
+`selectOptionActive` means "this item is currently selected" (blue). Keyboard nav needs a *separate* "Enter will land here" state or users can't tell which unselected option is focused. Add `selectOptionKeyboardActive` and stack it with `selectOptionActive` when both apply (selected + keyboard-focused uses a slightly darker blue).
+
+### Flattening the nav list
+
+- **cell-person:** `filteredMembers` (already flat).
+- **cell-select / cell-multi-select:** `filteredChoices` plus one trailing "Add option" virtual entry when `showAddOption`. Arrow nav must include it; Enter on that index calls `handleAddOption()`. Represent as a discriminated union so Enter can dispatch correctly.
+- **cell-status:** flatten `groups.flatMap(g => g.choices)`. Build a `Map<choiceId, flatIndex>` once per render and use it to attach refs and compute highlighting inside the grouped render loop.
+
+### Mouse + keyboard sync
+
+Mouse hover on an option sets `activeIndex` to that index. Prevents the "mouse hover shows A, keyboard focus is B, Enter selects B" mismatch. Applies to all four cells.
+
+### `onMouseDown.preventDefault` on options
+
+Without it, clicking an option can blur the input before `onClick` fires; in some browsers, Mantine's `trapFocus` + popover close sequence then cancels the selection. Mantine's `useCombobox` hides this — we don't use it, so add the guard. Applies to all four cells.
+
+### Reset triggers
+
+Reset `activeIndex` to `-1` whenever:
+- the search string changes (filter changed → stale index)
+- `isEditing` flips (reopening the editor)
+- for cell-select/multi: whether the "Add option" row is visible, since that also changes the list length
+
+Pass all three as `resetDeps` to the hook.
+
+### Scroll into view
+
+Dropdowns are capped at `max-height: 240px` with `overflow-y: auto` ([cells.module.css:219-222](apps/client/src/features/base/styles/cells.module.css:219)). Use `scrollIntoView({ block: "nearest" })` on the active option when `activeIndex` changes.
+
+### Preserve existing behaviors
+
+- **cell-person:** Escape cancels, Backspace on empty search removes last tag — keep both.
+- **cell-select:** Escape cancels, Enter with `showAddOption` and no active index adds — keep the Enter-adds-when-no-nav fallback. Priority: if `activeIndex >= 0`, Enter uses that (which may itself be the add-option virtual entry). Else fall through to the existing `handleAddOption()` call if `showAddOption`.
+- **cell-multi-select:** same as cell-select.
+- **cell-status:** Escape cancels. No Add-option row. Enter with `activeIndex >= 0` selects.
+
+---
+
+## Task 1: Add keyboard-active CSS class
+
+**Files:**
+- Modify: `apps/client/src/features/base/styles/cells.module.css`
+
+- [ ] **Step 1: Append after the existing `.selectOptionActive` rule (ending at line 240)**
+
+```css
+.selectOptionKeyboardActive {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+}
+
+.selectOptionActive.selectOptionKeyboardActive {
+  background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8));
+}
+```
+
+First rule: unselected + keyboard-focused (matches hover shade). Second: selected + keyboard-focused (slightly darker blue than plain selected, distinguishable).
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/client/src/features/base/styles/cells.module.css
+git commit -m "style(base): add keyboard-active option style for cell dropdowns"
+```
+
+---
+
+## Task 2: Create the `useListKeyboardNav` hook
+
+**Files:**
+- Create: `apps/client/src/features/base/hooks/use-list-keyboard-nav.ts`
+
+- [ ] **Step 1: Write the hook**
+
+```tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type UseListKeyboardNavResult = {
+  activeIndex: number;
+  setActiveIndex: (idx: number) => void;
+  handleNavKey: (e: React.KeyboardEvent) => boolean;
+  setOptionRef: (idx: number) => (el: HTMLElement | null) => void;
+};
+
+export function useListKeyboardNav(
+  itemCount: number,
+  resetDeps: ReadonlyArray<unknown>,
+): UseListKeyboardNavResult {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const optionRefs = useRef<Array<HTMLElement | null>>([]);
+
+  // Reset highlight when filter/open-state changes. resetDeps is intentional.
+  useEffect(() => {
+    setActiveIndex(-1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, resetDeps);
+
+  useEffect(() => {
+    if (activeIndex < 0) return;
+    const el = optionRefs.current[activeIndex];
+    if (el) el.scrollIntoView({ block: "nearest" });
+  }, [activeIndex]);
+
+  const setOptionRef = useCallback(
+    (idx: number) => (el: HTMLElement | null) => {
+      optionRefs.current[idx] = el;
+    },
+    [],
+  );
+
+  const handleNavKey = useCallback(
+    (e: React.KeyboardEvent): boolean => {
+      if (itemCount === 0) return false;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((idx) => (idx < itemCount - 1 ? idx + 1 : 0));
+        return true;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((idx) => (idx <= 0 ? itemCount - 1 : idx - 1));
+        return true;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(0);
+        return true;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        setActiveIndex(itemCount - 1);
+        return true;
+      }
+      return false;
+    },
+    [itemCount],
+  );
+
+  return { activeIndex, setActiveIndex, handleNavKey, setOptionRef };
+}
+```
+
+Notes:
+- `handleNavKey` returns `true` if it handled the key, so callers can `if (nav.handleNavKey(e)) return;` before their own Enter/Escape/Backspace branches.
+- Wrap-around on both ends.
+- `resetDeps` uses an eslint-disable because it's a variadic dep array by design — the hook name and the `resetDeps` argument make the intent clear without a comment inside the body beyond the one-liner. This is the C-7-approved kind of caveat comment.
+
+- [ ] **Step 2: Build verification**
+
+Run: `pnpm nx run client:build`.
+Expected: success, no TypeScript errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-list-keyboard-nav.ts
+git commit -m "feat(base): add useListKeyboardNav hook for dropdown keyboard nav"
+```
+
+---
+
+## Task 3: Wire keyboard nav into `CellPerson`
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/cells/cell-person.tsx`
+
+- [ ] **Step 1: Import the hook**
+
+Add to the imports at the top:
+
+```tsx
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+```
+
+- [ ] **Step 2: Instantiate the hook**
+
+After the `filteredMembers` declaration (currently ending line 61), add:
+
+```tsx
+const nav = useListKeyboardNav(filteredMembers.length, [search, isEditing]);
+```
+
+- [ ] **Step 3: Extend `handleKeyDown`**
+
+Replace the existing `handleKeyDown` `useCallback` (lines 97–109) with:
+
+```tsx
+const handleKeyDown = useCallback(
+  (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    if (nav.handleNavKey(e)) return;
+    if (e.key === "Enter") {
+      if (nav.activeIndex < 0 || nav.activeIndex >= filteredMembers.length) return;
+      e.preventDefault();
+      handleSelect(filteredMembers[nav.activeIndex].id);
+      return;
+    }
+    if (e.key === "Backspace" && search === "" && personIds.length > 0) {
+      e.preventDefault();
+      handleRemove(personIds[personIds.length - 1]);
+    }
+  },
+  [onCancel, nav, filteredMembers, handleSelect, search, personIds, handleRemove],
+);
+```
+
+- [ ] **Step 4: Render the keyboard-active highlight, ref, hover sync, and mousedown guard**
+
+Replace the filtered-members map (currently lines 173–191) with:
+
+```tsx
+{filteredMembers.map((member, idx) => {
+  const isSelected = selectedSet.has(member.id);
+  const isKeyboardActive = idx === nav.activeIndex;
+  const className = [
+    cellClasses.selectOption,
+    isSelected ? cellClasses.selectOptionActive : "",
+    isKeyboardActive ? cellClasses.selectOptionKeyboardActive : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div
+      key={member.id}
+      ref={nav.setOptionRef(idx)}
+      className={className}
+      onMouseEnter={() => nav.setActiveIndex(idx)}
+      onMouseDown={(e) => {
+        // Keep focus on the search input so click doesn't blur + close popover.
+        e.preventDefault();
+      }}
+      onClick={() => handleSelect(member.id)}
+    >
+      <CustomAvatar
+        avatarUrl={member.avatarUrl}
+        name={member.name}
+        size={24}
+        radius="xl"
+      />
+      <span className={cellClasses.personOptionName}>
+        {member.name}
+      </span>
+    </div>
+  );
+})}
+```
+
+- [ ] **Step 5: Build verification**
+
+Run: `pnpm nx run client:build`.
+Expected: success.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/client/src/features/base/components/cells/cell-person.tsx
+git commit -m "feat(base): keyboard navigation for person cell dropdown"
+```
+
+---
+
+## Task 4: Wire keyboard nav into `CellSelect`
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/cells/cell-select.tsx`
+
+Recall: this cell has `filteredChoices` plus a conditional "Add option" row when `showAddOption === true`. Both must be navigable. Enter on a choice selects it; Enter on the add-option virtual entry calls `handleAddOption`.
+
+- [ ] **Step 1: Import the hook**
+
+```tsx
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+```
+
+- [ ] **Step 2: Build the nav item list and instantiate the hook**
+
+After the `showAddOption` declaration (currently line 71), add:
+
+```tsx
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+const navItems: NavItem[] = useMemo(
+  () => [
+    ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+    ...(showAddOption ? [{ kind: "add" as const }] : []),
+  ],
+  [filteredChoices, showAddOption],
+);
+
+const nav = useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
+```
+
+- [ ] **Step 3: Replace `handleKeyDown`**
+
+Replace the existing `handleKeyDown` `useCallback` (currently lines 98–110) with:
+
+```tsx
+const handleKeyDown = useCallback(
+  (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    if (nav.handleNavKey(e)) return;
+    if (e.key === "Enter") {
+      if (nav.activeIndex >= 0 && nav.activeIndex < navItems.length) {
+        e.preventDefault();
+        const item = navItems[nav.activeIndex];
+        if (item.kind === "choice") handleSelect(item.choice);
+        else handleAddOption();
+        return;
+      }
+      if (showAddOption) {
+        e.preventDefault();
+        handleAddOption();
+      }
+    }
+  },
+  [onCancel, nav, navItems, handleSelect, handleAddOption, showAddOption],
+);
+```
+
+- [ ] **Step 4: Update the choices render loop**
+
+Replace the `filteredChoices.map` block (currently lines 146–161) with:
+
+```tsx
+{filteredChoices.map((choice, idx) => {
+  const isSelected = choice.id === selectedId;
+  const isKeyboardActive = idx === nav.activeIndex;
+  const className = [
+    cellClasses.selectOption,
+    isSelected ? cellClasses.selectOptionActive : "",
+    isKeyboardActive ? cellClasses.selectOptionKeyboardActive : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div
+      key={choice.id}
+      ref={nav.setOptionRef(idx)}
+      className={className}
+      onMouseEnter={() => nav.setActiveIndex(idx)}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={() => handleSelect(choice)}
+    >
+      <span
+        className={cellClasses.badge}
+        style={choiceColor(choice.color)}
+      >
+        {choice.name}
+      </span>
+    </div>
+  );
+})}
+```
+
+- [ ] **Step 5: Update the "Add option" row**
+
+Replace the `showAddOption && (...)` block (currently lines 162–175) with:
+
+```tsx
+{showAddOption && (() => {
+  const idx = filteredChoices.length;
+  const isKeyboardActive = idx === nav.activeIndex;
+  return (
+    <div
+      ref={nav.setOptionRef(idx)}
+      className={`${cellClasses.addOptionRow} ${
+        isKeyboardActive ? cellClasses.selectOptionKeyboardActive : ""
+      }`}
+      onMouseEnter={() => nav.setActiveIndex(idx)}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={handleAddOption}
+    >
+      <span className={cellClasses.addOptionLabel}>Add option:</span>
+      <span
+        className={cellClasses.badge}
+        style={choiceColor(addOptionColor)}
+      >
+        {trimmedSearch}
+      </span>
+    </div>
+  );
+})()}
+```
+
+The IIFE is the least-disruptive way to introduce a local `idx` binding without restructuring the parent JSX.
+
+- [ ] **Step 6: Build verification**
+
+Run: `pnpm nx run client:build`.
+Expected: success.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add apps/client/src/features/base/components/cells/cell-select.tsx
+git commit -m "feat(base): keyboard navigation for single-select cell dropdown"
+```
+
+---
+
+## Task 5: Wire keyboard nav into `CellMultiSelect`
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/cells/cell-multi-select.tsx`
+
+This mirrors Task 4. Only differences: `handleSelect` is named `handleToggle`, selected check uses `selectedSet.has(...)`, and `handleAddOption` commits `[...selectedIds, newChoice.id]` rather than replacing.
+
+- [ ] **Step 1: Import the hook**
+
+```tsx
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+```
+
+- [ ] **Step 2: Build the nav item list and instantiate the hook**
+
+After `showAddOption` (currently line 74), add:
+
+```tsx
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+const navItems: NavItem[] = useMemo(
+  () => [
+    ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+    ...(showAddOption ? [{ kind: "add" as const }] : []),
+  ],
+  [filteredChoices, showAddOption],
+);
+
+const nav = useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
+```
+
+- [ ] **Step 3: Replace `handleKeyDown`**
+
+Replace lines 102–114 with:
+
+```tsx
+const handleKeyDown = useCallback(
+  (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    if (nav.handleNavKey(e)) return;
+    if (e.key === "Enter") {
+      if (nav.activeIndex >= 0 && nav.activeIndex < navItems.length) {
+        e.preventDefault();
+        const item = navItems[nav.activeIndex];
+        if (item.kind === "choice") handleToggle(item.choice);
+        else handleAddOption();
+        return;
+      }
+      if (showAddOption) {
+        e.preventDefault();
+        handleAddOption();
+      }
+    }
+  },
+  [onCancel, nav, navItems, handleToggle, handleAddOption, showAddOption],
+);
+```
+
+- [ ] **Step 4: Update the choices render loop**
+
+Replace `filteredChoices.map(...)` (currently lines 143–160) with:
+
+```tsx
+{filteredChoices.map((choice, idx) => {
+  const isSelected = selectedSet.has(choice.id);
+  const isKeyboardActive = idx === nav.activeIndex;
+  const className = [
+    cellClasses.selectOption,
+    isSelected ? cellClasses.selectOptionActive : "",
+    isKeyboardActive ? cellClasses.selectOptionKeyboardActive : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div
+      key={choice.id}
+      ref={nav.setOptionRef(idx)}
+      className={className}
+      onMouseEnter={() => nav.setActiveIndex(idx)}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={() => handleToggle(choice)}
+    >
+      <span
+        className={cellClasses.badge}
+        style={choiceColor(choice.color)}
+      >
+        {choice.name}
+      </span>
+    </div>
+  );
+})}
+```
+
+- [ ] **Step 5: Update the "Add option" row**
+
+Replace `showAddOption && (...)` (currently lines 161–174) with the same IIFE pattern as Task 4:
+
+```tsx
+{showAddOption && (() => {
+  const idx = filteredChoices.length;
+  const isKeyboardActive = idx === nav.activeIndex;
+  return (
+    <div
+      ref={nav.setOptionRef(idx)}
+      className={`${cellClasses.addOptionRow} ${
+        isKeyboardActive ? cellClasses.selectOptionKeyboardActive : ""
+      }`}
+      onMouseEnter={() => nav.setActiveIndex(idx)}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={handleAddOption}
+    >
+      <span className={cellClasses.addOptionLabel}>Add option:</span>
+      <span
+        className={cellClasses.badge}
+        style={choiceColor(addOptionColor)}
+      >
+        {trimmedSearch}
+      </span>
+    </div>
+  );
+})()}
+```
+
+- [ ] **Step 6: Build verification**
+
+Run: `pnpm nx run client:build`.
+Expected: success.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add apps/client/src/features/base/components/cells/cell-multi-select.tsx
+git commit -m "feat(base): keyboard navigation for multi-select cell dropdown"
+```
+
+---
+
+## Task 6: Wire keyboard nav into `CellStatus`
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/cells/cell-status.tsx`
+
+This cell renders choices grouped by category. Flatten the groups for nav indexing while keeping the grouped rendering.
+
+- [ ] **Step 1: Import the hook**
+
+```tsx
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+```
+
+- [ ] **Step 2: Flatten and instantiate the hook**
+
+After the `groups` declaration (currently ending line 74), add:
+
+```tsx
+const flatChoices = useMemo(
+  () => groups.flatMap((g) => g.choices),
+  [groups],
+);
+const choiceIdxMap = useMemo(() => {
+  const m = new Map<string, number>();
+  flatChoices.forEach((c, i) => m.set(c.id, i));
+  return m;
+}, [flatChoices]);
+
+const nav = useListKeyboardNav(flatChoices.length, [search, isEditing]);
+```
+
+- [ ] **Step 3: Replace `handleKeyDown`**
+
+Replace lines 83–91 with:
+
+```tsx
+const handleKeyDown = useCallback(
+  (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    if (nav.handleNavKey(e)) return;
+    if (e.key === "Enter") {
+      if (nav.activeIndex < 0 || nav.activeIndex >= flatChoices.length) return;
+      e.preventDefault();
+      handleSelect(flatChoices[nav.activeIndex]);
+    }
+  },
+  [onCancel, nav, flatChoices, handleSelect],
+);
+```
+
+- [ ] **Step 4: Update the choice render inside groups**
+
+Replace the inner `group.choices.map(...)` block (currently lines 132–149) with:
+
+```tsx
+{group.choices.map((choice) => {
+  const idx = choiceIdxMap.get(choice.id) ?? -1;
+  const isSelected = choice.id === selectedId;
+  const isKeyboardActive = idx === nav.activeIndex;
+  const className = [
+    cellClasses.selectOption,
+    isSelected ? cellClasses.selectOptionActive : "",
+    isKeyboardActive ? cellClasses.selectOptionKeyboardActive : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div
+      key={choice.id}
+      ref={nav.setOptionRef(idx)}
+      className={className}
+      onMouseEnter={() => nav.setActiveIndex(idx)}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={() => handleSelect(choice)}
+    >
+      <span
+        className={cellClasses.badge}
+        style={choiceColor(choice.color)}
+      >
+        {choice.name}
+      </span>
+    </div>
+  );
+})}
+```
+
+- [ ] **Step 5: Build verification**
+
+Run: `pnpm nx run client:build`.
+Expected: success.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/client/src/features/base/components/cells/cell-status.tsx
+git commit -m "feat(base): keyboard navigation for status cell dropdown"
+```
+
+---
+
+## Task 7: Manual QUX verification
+
+No automated tests exist for cell components. Verify manually in a running dev client (only if the user asks — per CLAUDE.md, do not launch the client yourself).
+
+For **each** of the four cells (person, select, multi-select, status), walk this checklist in the base grid:
+
+**Golden path:**
+1. Click the cell → popover opens, search focused, no initial highlight.
+2. ArrowDown → first option highlights.
+3. Repeat ArrowDown → highlight moves; dropdown scrolls past viewport.
+4. Enter on highlight → that value is selected/toggled.
+5. ArrowUp from index 0 → wraps to last item.
+6. ArrowDown from last → wraps to first.
+
+**Search + keyboard:**
+7. Type a partial string → list filters, highlight resets.
+8. ArrowDown → lands on first *filtered* option, not a stale index.
+9. Clear the search → list expands, highlight resets.
+
+**Mouse + keyboard interplay:**
+10. Hover an option with mouse → that option becomes keyboard-active.
+11. Move mouse away, press ArrowDown → nav continues from hovered index.
+12. Click an option → selects cleanly, popover does not flicker-close (validates `onMouseDown.preventDefault`).
+
+**Edge cases:**
+13. Empty filter result → ArrowUp/Down/Home/End/Enter are no-ops; Escape still closes; cell-person's Backspace-removes-tag still works.
+14. Home / End → jump to first / last item.
+15. Escape at any time → popover closes, no commit.
+
+**Cell-specific:**
+- **cell-person** (multi mode): Backspace on empty search removes the last tag (existing behavior preserved).
+- **cell-person** (single mode, `allowMultiple: false`): Enter still selects; selecting an already-selected person clears it.
+- **cell-select** with typed new value: the "Add option" row appears as the last navigable item; ArrowDown reaches it and Enter triggers `handleAddOption`. Enter with no active index (user typed and hasn't pressed ArrowDown) still triggers `handleAddOption` (fallback preserved).
+- **cell-multi-select**: same as cell-select for add-option behavior.
+- **cell-status**: navigation crosses category boundaries seamlessly (To Do → In Progress → Complete).
+
+**Visual:**
+- Selected-only → blue.
+- Keyboard-focused-only → gray.
+- Both → darker blue (distinguishable from plain selected).
+
+- [ ] **Step 1: Walk the checklist per cell. If any scenario fails, fix and re-verify that cell before moving on.**
+
+---
+
+## Remember
+
+- Exact file paths above; don't grep for them at edit time.
+- Preserve existing Escape/Backspace/Enter-adds-new behaviors verbatim.
+- Don't swap to `useCombobox` — scope creep.
+- One CSS class, one hook, four cell edits — that's the whole change.
+- Commit after each task (GH-1, Conventional Commits).
+- No Anthropic/Claude attribution in commits (undercover mode).
diff --git a/docs/superpowers/plans/2026-04-18-filter-sort-draft-add.md b/docs/superpowers/plans/2026-04-18-filter-sort-draft-add.md
new file mode 100644
index 000000000..c8b4dd61d
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-filter-sort-draft-add.md
@@ -0,0 +1,527 @@
+# Draft-Then-Save Flow for New Sort / Filter Entries Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Clicking "Add sort" / "Add filter" no longer persists an incomplete entry to the view config; instead it opens a local draft row with Save / Cancel buttons so the user sets everything up in one go and commits once.
+
+**Architecture:** Each popover (`ViewSortConfigPopover`, `ViewFilterConfigPopover`) gets local `draft` state. When non-null, a draft row renders at the bottom with property/direction (or property/operator/value) selects and Save/Cancel buttons. Save appends the draft to the existing `sorts` / `conditions` array via the existing `onChange` callback — a single mutation round-trip. Cancel clears the draft. Existing rows keep their current inline auto-save behavior (out of scope — they're already workable).
+
+**Tech Stack:** React 18, Mantine v8 (`Popover`, `Select`, `Button`), existing `onChange` contract on both popovers (no changes to parents).
+
+---
+
+## Background
+
+Current sort flow ([`view-sort-config.tsx:47-52`](apps/client/src/features/base/components/views/view-sort-config.tsx:47)):
+
+```ts
+const handleAdd = useCallback(() => {
+  const usedIds = new Set(sorts.map((s) => s.propertyId));
+  const available = properties.find((p) => !usedIds.has(p.id));
+  if (!available) return;
+  onChange([...sorts, { propertyId: available.id, direction: "asc" }]);
+}, [sorts, properties, onChange]);
+```
+
+Clicking "Add sort" immediately calls `onChange` with a default-populated entry — that fires a mutation. The user then picks property → mutation. Picks direction → mutation. Four round-trips for one configured sort.
+
+Filter is the same shape ([`view-filter-config.tsx:176-187`](apps/client/src/features/base/components/views/view-filter-config.tsx:176)).
+
+## Desired behavior
+
+1. Click "Add sort" / "Add filter" → draft row appears locally, NOT persisted yet.
+2. User picks property, direction/operator, value in the draft row.
+3. Click **Save** → draft is appended to `sorts` / `conditions` via `onChange` (one mutation). Draft clears.
+4. Click **Cancel** → draft clears, nothing persisted.
+5. While a draft is open, the "Add" button is hidden (or shown as "+ Save draft first").
+6. Closing the popover (outside click / ESC) with a draft open: the draft is discarded silently. (Matches how Notion / Airtable treat incomplete-and-abandoned filter drafts.)
+7. Existing entries continue to auto-save on inline edit — unchanged.
+
+## File Structure
+
+**Modified:**
+- `apps/client/src/features/base/components/views/view-sort-config.tsx`
+- `apps/client/src/features/base/components/views/view-filter-config.tsx`
+
+No new files, no new deps, no server changes.
+
+---
+
+## Task 1: Sort popover — draft-then-save
+
+**File:** `apps/client/src/features/base/components/views/view-sort-config.tsx`
+
+### Design
+
+Add local state:
+```ts
+const [draft, setDraft] = useState<ViewSortConfig | null>(null);
+```
+
+- On "Add sort" click: compute a sensible default (first unused property, `"asc"`) and call `setDraft(...)`. Do NOT call `onChange`.
+- Render the draft row after the committed rows when `draft !== null`. It looks identical to a committed row but the property/direction selects bind to draft state via `setDraft`, and there are **Save** and **Cancel** buttons instead of a Trash icon.
+- Save: `onChange([...sorts, draft]); setDraft(null);`
+- Cancel: `setDraft(null);`
+- When the popover closes (`opened` transitions `true → false`), auto-clear the draft via effect.
+- Hide the "Add sort" button while a draft is open.
+
+### Step 1: Add `useState` + `useEffect` imports
+
+The file currently imports `useCallback` only. Replace with `useCallback, useEffect, useState`:
+
+```ts
+import { useCallback, useEffect, useState } from "react";
+```
+
+### Step 2: Import `Button`
+
+Add `Button` to the existing `@mantine/core` import block so the draft can show Save/Cancel buttons.
+
+### Step 3: Replace the component body
+
+Read the current component carefully (lines 27-153) and replace it with:
+
+```tsx
+export function ViewSortConfigPopover({
+  opened,
+  onClose,
+  sorts,
+  properties,
+  onChange,
+  children,
+}: ViewSortConfigProps) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = useState<ViewSortConfig | null>(null);
+
+  // Discard any half-configured draft when the popover closes.
+  useEffect(() => {
+    if (!opened) setDraft(null);
+  }, [opened]);
+
+  const propertyOptions = properties.map((p) => ({
+    value: p.id,
+    label: p.name,
+  }));
+
+  const directionOptions = [
+    { value: "asc", label: t("Ascending") },
+    { value: "desc", label: t("Descending") },
+  ];
+
+  const handleStartDraft = useCallback(() => {
+    const usedIds = new Set(sorts.map((s) => s.propertyId));
+    const available = properties.find((p) => !usedIds.has(p.id));
+    if (!available) return;
+    setDraft({ propertyId: available.id, direction: "asc" });
+  }, [sorts, properties]);
+
+  const handleSaveDraft = useCallback(() => {
+    if (!draft) return;
+    onChange([...sorts, draft]);
+    setDraft(null);
+  }, [draft, sorts, onChange]);
+
+  const handleCancelDraft = useCallback(() => {
+    setDraft(null);
+  }, []);
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      onChange(sorts.filter((_, i) => i !== index));
+    },
+    [sorts, onChange],
+  );
+
+  const handlePropertyChange = useCallback(
+    (index: number, propertyId: string | null) => {
+      if (!propertyId) return;
+      onChange(
+        sorts.map((s, i) => (i === index ? { ...s, propertyId } : s)),
+      );
+    },
+    [sorts, onChange],
+  );
+
+  const handleDirectionChange = useCallback(
+    (index: number, direction: string | null) => {
+      if (!direction) return;
+      onChange(
+        sorts.map((s, i) =>
+          i === index
+            ? { ...s, direction: direction as "asc" | "desc" }
+            : s,
+        ),
+      );
+    },
+    [sorts, onChange],
+  );
+
+  const canAddMore = properties.length > sorts.length + (draft ? 1 : 0);
+
+  return (
+    <Popover
+      opened={opened}
+      onClose={onClose}
+      position="bottom-end"
+      shadow="md"
+      width={340}
+      trapFocus
+      withinPortal
+    >
+      <Popover.Target>{children}</Popover.Target>
+      <Popover.Dropdown>
+        <Stack gap="xs">
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Sort by")}
+          </Text>
+
+          {sorts.length === 0 && !draft && (
+            <Text size="xs" c="dimmed">
+              {t("No sorts applied")}
+            </Text>
+          )}
+
+          {sorts.map((sort, index) => (
+            <Group key={index} gap="xs" wrap="nowrap">
+              <Select
+                size="xs"
+                data={propertyOptions}
+                value={sort.propertyId}
+                onChange={(val) => handlePropertyChange(index, val)}
+                style={{ flex: 1 }}
+              />
+              <Select
+                size="xs"
+                data={directionOptions}
+                value={sort.direction}
+                onChange={(val) => handleDirectionChange(index, val)}
+                w={110}
+              />
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="sm"
+                onClick={() => handleRemove(index)}
+              >
+                <IconTrash size={14} />
+              </ActionIcon>
+            </Group>
+          ))}
+
+          {draft && (
+            <Stack gap={6}>
+              <Group gap="xs" wrap="nowrap">
+                <Select
+                  size="xs"
+                  data={propertyOptions}
+                  value={draft.propertyId}
+                  onChange={(val) =>
+                    val && setDraft({ ...draft, propertyId: val })
+                  }
+                  style={{ flex: 1 }}
+                />
+                <Select
+                  size="xs"
+                  data={directionOptions}
+                  value={draft.direction}
+                  onChange={(val) =>
+                    val &&
+                    setDraft({
+                      ...draft,
+                      direction: val as "asc" | "desc",
+                    })
+                  }
+                  w={110}
+                />
+              </Group>
+              <Group justify="flex-end" gap="xs">
+                <Button
+                  variant="default"
+                  size="xs"
+                  onClick={handleCancelDraft}
+                >
+                  {t("Cancel")}
+                </Button>
+                <Button size="xs" onClick={handleSaveDraft}>
+                  {t("Save")}
+                </Button>
+              </Group>
+            </Stack>
+          )}
+
+          {!draft && canAddMore && (
+            <UnstyledButton
+              onClick={handleStartDraft}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "4px 0",
+                fontSize: "var(--mantine-font-size-xs)",
+                color: "var(--mantine-color-blue-6)",
+              }}
+            >
+              <IconPlus size={14} />
+              {t("Add sort")}
+            </UnstyledButton>
+          )}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
+```
+
+### Step 4: Build
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success. `IconSortAscending` import becomes unused — remove it from the import line.
+
+### Step 5: Commit
+
+```bash
+git add apps/client/src/features/base/components/views/view-sort-config.tsx
+git commit -m "feat(base): draft flow with save and cancel for new view sorts"
+```
+
+---
+
+## Task 2: Filter popover — draft-then-save
+
+**File:** `apps/client/src/features/base/components/views/view-filter-config.tsx`
+
+### Design
+
+Same shape as sort, with additional operator / value fields in the draft row. The `FilterValueInput` sub-component works as-is since it takes a `FilterCondition` and an `onChange(value)` — we pass the draft as the condition and a setter that updates the draft.
+
+Edge case: when the user changes the draft's **property**, the valid operator set changes. Mirror the existing `handlePropertyChange` logic: keep the current operator if still valid, otherwise reset to the first valid operator and clear the value.
+
+### Step 1: Add `useState, useEffect` to the react import
+
+Current: `import { useCallback } from "react";`. Change to:
+```ts
+import { useCallback, useEffect, useState } from "react";
+```
+
+### Step 2: Add `Button` to the `@mantine/core` import
+
+### Step 3: Add three draft helpers inside the component
+
+After the existing `propertyOptions` declaration and before `handleAdd`, add:
+
+```ts
+const [draft, setDraft] = useState<FilterCondition | null>(null);
+
+useEffect(() => {
+  if (!opened) setDraft(null);
+}, [opened]);
+
+const handleStartDraft = useCallback(() => {
+  const firstProperty = properties[0];
+  if (!firstProperty) return;
+  const validOperators = getOperatorsForType(firstProperty.type);
+  const defaultOperator = validOperators.includes("contains")
+    ? ("contains" as FilterOperator)
+    : validOperators[0];
+  setDraft({ propertyId: firstProperty.id, op: defaultOperator });
+}, [properties]);
+
+const handleSaveDraft = useCallback(() => {
+  if (!draft) return;
+  onChange([...conditions, draft]);
+  setDraft(null);
+}, [draft, conditions, onChange]);
+
+const handleCancelDraft = useCallback(() => {
+  setDraft(null);
+}, []);
+
+const handleDraftPropertyChange = useCallback(
+  (propertyId: string | null) => {
+    if (!propertyId || !draft) return;
+    const newProperty = properties.find((p) => p.id === propertyId);
+    if (!newProperty) {
+      setDraft({ ...draft, propertyId });
+      return;
+    }
+    const validOperators = getOperatorsForType(newProperty.type);
+    const currentOperatorValid = validOperators.includes(draft.op);
+    setDraft({
+      ...draft,
+      propertyId,
+      op: currentOperatorValid ? draft.op : validOperators[0],
+      value: currentOperatorValid ? draft.value : undefined,
+    });
+  },
+  [draft, properties],
+);
+
+const handleDraftOperatorChange = useCallback(
+  (operator: string | null) => {
+    if (!operator || !draft) return;
+    const op = operator as FilterOperator;
+    const needsValue = !NO_VALUE_OPERATORS.includes(op);
+    setDraft({ ...draft, op, value: needsValue ? draft.value : undefined });
+  },
+  [draft],
+);
+
+const handleDraftValueChange = useCallback(
+  (value: string) => {
+    if (!draft) return;
+    setDraft({ ...draft, value: value || undefined });
+  },
+  [draft],
+);
+```
+
+### Step 4: Replace the existing `handleAdd` function
+
+Delete the existing `handleAdd` declaration entirely — `handleStartDraft` replaces it.
+
+### Step 5: Render the draft row and hide the Add button when drafting
+
+Find the `<UnstyledButton onClick={handleAdd} ...>` at the bottom of the dropdown (around line 325-338). Replace it with:
+
+```tsx
+{draft && (() => {
+  const needsValue = !NO_VALUE_OPERATORS.includes(draft.op);
+  const property = properties.find((p) => p.id === draft.propertyId);
+  const validOperators = property
+    ? getOperatorsForType(property.type)
+    : OPERATORS.map((op) => op.value);
+  const operatorOptions = OPERATORS.filter((op) =>
+    validOperators.includes(op.value),
+  ).map((op) => ({ value: op.value, label: t(op.labelKey) }));
+
+  return (
+    <Stack gap={6}>
+      <Group gap="xs" wrap="nowrap">
+        <Select
+          size="xs"
+          data={propertyOptions}
+          value={draft.propertyId}
+          onChange={handleDraftPropertyChange}
+          style={{ flex: 1 }}
+        />
+        <Select
+          size="xs"
+          data={operatorOptions}
+          value={draft.op}
+          onChange={handleDraftOperatorChange}
+          w={130}
+        />
+        {needsValue && (
+          <FilterValueInput
+            condition={draft}
+            property={property}
+            onChange={handleDraftValueChange}
+            t={t}
+          />
+        )}
+      </Group>
+      <Group justify="flex-end" gap="xs">
+        <Button variant="default" size="xs" onClick={handleCancelDraft}>
+          {t("Cancel")}
+        </Button>
+        <Button size="xs" onClick={handleSaveDraft}>
+          {t("Save")}
+        </Button>
+      </Group>
+    </Stack>
+  );
+})()}
+
+{!draft && (
+  <UnstyledButton
+    onClick={handleStartDraft}
+    style={{
+      display: "flex",
+      alignItems: "center",
+      gap: 6,
+      padding: "4px 0",
+      fontSize: "var(--mantine-font-size-xs)",
+      color: "var(--mantine-color-blue-6)",
+    }}
+  >
+    <IconPlus size={14} />
+    {t("Add filter")}
+  </UnstyledButton>
+)}
+```
+
+### Step 6: Update the empty-state text conditional
+
+The existing `{conditions.length === 0 && <Text ...>No filters applied</Text>}` should also hide when a draft is open — change to:
+
+```tsx
+{conditions.length === 0 && !draft && (
+  <Text size="xs" c="dimmed">
+    {t("No filters applied")}
+  </Text>
+)}
+```
+
+### Step 7: Build
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+### Step 8: Commit
+
+```bash
+git add apps/client/src/features/base/components/views/view-filter-config.tsx
+git commit -m "feat(base): draft flow with save and cancel for new view filters"
+```
+
+---
+
+## Task 3: USER smoke test
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off.
+
+Ask the user to:
+
+- [ ] **Sort: draft flow works.**
+  1. Open the Sort popover. Click "Add sort".
+  2. A draft row appears with Save / Cancel. The "Add sort" button is hidden.
+  3. Pick a property, pick direction.
+  4. Network tab stays quiet (no mutation yet).
+  5. Click Save. A single `POST /bases/views/update` fires. The sort appears as a committed row; Save/Cancel row is gone; the "Add sort" button reappears.
+
+- [ ] **Sort: cancel discards without mutation.**
+  1. Click "Add sort". Configure something in the draft.
+  2. Click Cancel. No mutation fires. Draft disappears.
+
+- [ ] **Sort: closing popover with open draft discards it.**
+  1. Click "Add sort". Click outside the popover (or press ESC).
+  2. Popover closes. Re-open it — no draft, no committed new sort, no mutation was fired.
+
+- [ ] **Sort: existing rows still auto-save.**
+  1. After committing a sort, change its direction via its Select. The usual mutation fires as before.
+
+- [ ] **Sort: max-reached hides Add button.**
+  1. Add sorts until every property is used. The "Add sort" button should disappear (`canAddMore` is false).
+
+- [ ] **Filter: repeat the same five checks.** Also verify:
+  - Changing the draft's property resets the operator when incompatible (e.g., start with `contains` on text, switch property to a number → operator becomes `eq`).
+  - "Is empty" / "Is not empty" operators hide the value field in the draft.
+
+- [ ] **Regression: existing sorts/filters still load correctly on page load.**
+
+Report back if any step misbehaves.
+
+---
+
+## Out of scope
+
+- Edit-mode for existing rows (also behind Save/Cancel). User didn't ask for this; existing inline auto-save is fine.
+- Batching multiple quick edits on existing rows into a single mutation (a debounce like the hide flow has). Separate optimization.
+- Adding a "reorder sorts" UI — unrelated.
+- Any server-side change. The `onChange` contract is unchanged from the popovers' parents' perspective (`base-toolbar.tsx`).
diff --git a/docs/superpowers/plans/2026-04-18-fix-client-sort-override.md b/docs/superpowers/plans/2026-04-18-fix-client-sort-override.md
new file mode 100644
index 000000000..53b492191
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-fix-client-sort-override.md
@@ -0,0 +1,152 @@
+# Stop Client from Overriding Server Sort Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** When a view has a sort applied, stop the client from re-sorting the fetched rows by `position` (the fractional-index column), which silently overwrites the server's sort order and visibly corrupts the list as more pages are loaded.
+
+**Architecture:** One-line conditional in the `rows` `useMemo` in `base-table.tsx`: if a sort is active, pass through the server-ordered rows unchanged; otherwise keep the existing position-based sort (which is useful when no sort is active so that optimistically-created rows and ws-pushed rows land in their natural order).
+
+**Tech Stack:** React 18, TanStack Query v5 (infinite), the existing server-side keyset pagination on `(sort keys..., position, id)`.
+
+---
+
+## Background
+
+Reported symptom: user applies "Title ascending" in the sort popover. Initial view looks plausible. Scroll down — further pages load in title order. Scroll back up — the top of the list is now a random-looking mess (screenshots confirm `Update Proposal Sierra`, `Echo November ...` at the top instead of `Alpha ...`).
+
+### Why it happens
+
+Row fetch uses an infinite query, keyed by sort/filter/search:
+
+```ts
+// apps/client/src/features/base/queries/base-row-query.ts:57-72
+return useInfiniteQuery({
+  queryKey: ["base-rows", baseId, activeFilter, activeSorts, activeSearch],
+  queryFn: ({ pageParam }) =>
+    listRows(baseId!, { cursor: pageParam, limit: 100, filter, sorts, search }),
+  ...
+});
+```
+
+Server-side, [`base-row.repo.ts:list`](apps/server/src/database/repos/base/base-row.repo.ts) takes a different path when sort/filter/search is present: `runListQuery(base, opts)` builds a keyset-paginated SELECT ordered by the requested sort keys (with `position, id` as stable tie-breakers). Page N+1's cursor picks up exactly where page N left off. Server pages are correct.
+
+Client-side, [`base-table.tsx:66-69`](apps/client/src/features/base/components/base-table.tsx:66):
+
+```ts
+const rows = useMemo(() => {
+  const flat = flattenRows(rowsData);
+  return flat.sort((a, b) => (a.position < b.position ? -1 : a.position > b.position ? 1 : 0));
+}, [rowsData]);
+```
+
+This flattens all fetched pages and then re-sorts them by `position` — the fractional-index that the server uses only as a tie-breaker. That completely discards the server's sort-key ordering and re-orders the list by an unrelated key. Each additional page fetched adds more "small position" rows near the top, progressively clobbering whatever made sense before.
+
+### Why the sort-by-position exists in the first place
+
+When NO sort is active, the server's fast path returns rows ordered by `position` (see `base-row.repo.ts:99-120`). Optimistic row creates (from `useCreateRowMutation.onSuccess`) and ws-pushed rows from other clients append to the last page in cache. In the no-sort case, the client-side position sort puts those appended rows into the correct visual slot without waiting for a refetch — a real benefit.
+
+So we can't remove the sort unconditionally. We just need to skip it when the server already sorted the rows for us.
+
+---
+
+## File Structure
+
+**Modified:** `apps/client/src/features/base/components/base-table.tsx` — one `useMemo`.
+
+No new files, no new deps, no server changes.
+
+---
+
+## Task 1: Conditionally skip the client-side position sort
+
+**File:** `apps/client/src/features/base/components/base-table.tsx`
+
+- [ ] **Step 1: Replace the rows memo**
+
+Find the existing memo at roughly lines 66-69:
+
+```ts
+const rows = useMemo(() => {
+  const flat = flattenRows(rowsData);
+  return flat.sort((a, b) => (a.position < b.position ? -1 : a.position > b.position ? 1 : 0));
+}, [rowsData]);
+```
+
+Replace with:
+
+```ts
+const rows = useMemo(() => {
+  const flat = flattenRows(rowsData);
+  // When a sort is active, the server returns rows in the requested
+  // sort order via keyset pagination. Re-sorting by `position` on the
+  // client would override that with fractional-index order — visibly
+  // breaking the sort as more pages load. Only apply the position
+  // sort when no view sort is active (where it keeps
+  // optimistically-created and ws-pushed rows in place without a
+  // refetch).
+  if (activeSorts && activeSorts.length > 0) {
+    return flat;
+  }
+  return flat.sort((a, b) =>
+    a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
+  );
+}, [rowsData, activeSorts]);
+```
+
+`activeSorts` is already in scope above this memo (line 46: `const activeSorts = activeView?.config?.sorts;`). Adding it to the dep array is safe.
+
+- [ ] **Step 2: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/components/base-table.tsx
+git commit -m "fix(base): don't override server sort with client-side position sort"
+```
+
+---
+
+## Task 2: USER smoke test
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off to the user.
+
+Ask the user to verify on the 1K or 10K seed base:
+
+- [ ] **Sort by Title ascending, scroll to bottom, scroll back to top.**
+  - Top of the list should still be the lowest-title rows (e.g. `Alpha ...`).
+  - Bottom of the list should be the highest-title rows (e.g. `Zulu ...`).
+  - No re-ordering after scrolling.
+
+- [ ] **Sort by Estimate descending.**
+  - Highest numeric estimates at the top. Same stability check after scrolling.
+
+- [ ] **Remove all sorts.**
+  - Rows appear in insert/position order (the default). Same as before the fix — this path shouldn't regress.
+
+- [ ] **Add a new row with no sort active.**
+  - New row appears at its natural position without waiting for a refetch (the position-sort path still protects this).
+
+- [ ] **Add a new row WITH a sort active.**
+  - Row appears at the end of the current list (known limitation — see Out of scope). This is acceptable for now.
+
+- [ ] **Two-sort case.** Sort by Status ascending, then by Title ascending.
+  - Rows group by Status (all "Not Started" first, then "In Progress", etc.); within each group, sorted by Title. Scrolling doesn't break it.
+
+- [ ] **Regression: Virtualization still works.**
+  - Scroll through the 10K base. Smooth, no crashes.
+
+If any step misbehaves, report back with which one.
+
+---
+
+## Out of scope
+
+- **New rows landing in the right slot when a sort is active.** Fixing that cleanly would require a binary insertion into the cached pages based on the sort keys, which depends on per-cell comparators (select/multi-select resolve via choice order, person via display name, etc.). Separate work. For now, users with a sort active see newly-created rows at the bottom until the next refetch.
+- **ws-pushed rows with a sort active.** Same limitation — they append to the last page.
+- **Removing the client-side `position` sort entirely.** Keeping it in the no-sort path preserves the good behavior for optimistic creates.
diff --git a/docs/superpowers/plans/2026-04-18-hide-popover-dismiss.md b/docs/superpowers/plans/2026-04-18-hide-popover-dismiss.md
new file mode 100644
index 000000000..2a98cc3b5
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-hide-popover-dismiss.md
@@ -0,0 +1,128 @@
+# Hide-Fields Popover Dismiss Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make the hide-fields popover in the base toolbar dismiss on ESC and on outside click, matching the sort and filter popovers.
+
+**Architecture:** One-line fix — the hide popover is missing `trapFocus` that the other two toolbar popovers already have. Mantine `Popover` only honours `closeOnEscape` when focus is trapped inside the dropdown, so without `trapFocus` the ESC key is never captured. We also make `closeOnClickOutside` and `closeOnEscape` explicit so the intent is clear and immune to future default changes.
+
+**Tech Stack:** React, Mantine v8 `Popover`.
+
+---
+
+## Background
+
+[apps/client/src/features/base/components/views/view-sort-config.tsx:86-93](apps/client/src/features/base/components/views/view-sort-config.tsx:86):
+
+```tsx
+<Popover
+  opened={opened}
+  onClose={onClose}
+  position="bottom-end"
+  shadow="md"
+  width={340}
+  trapFocus          // ← present
+  withinPortal
+>
+```
+
+[apps/client/src/features/base/components/views/view-filter-config.tsx:252-259](apps/client/src/features/base/components/views/view-filter-config.tsx:252) — same, has `trapFocus`.
+
+[apps/client/src/features/base/components/views/view-field-visibility.tsx:65-72](apps/client/src/features/base/components/views/view-field-visibility.tsx:65):
+
+```tsx
+<Popover
+  opened={opened}
+  onClose={onClose}
+  position="bottom-end"
+  shadow="md"
+  width={260}
+  withinPortal       // ← no trapFocus
+>
+```
+
+Mantine v8 defaults: `closeOnClickOutside=true`, `closeOnEscape=true`, `trapFocus=false`. ESC handling is wired to the trapped focus context; without `trapFocus` the ESC never fires `onClose`.
+
+---
+
+## File Structure
+
+**Modified files:**
+- `apps/client/src/features/base/components/views/view-field-visibility.tsx` — one `<Popover>` props edit.
+
+No new files, no new deps, no tests (pure UI behaviour wiring; identical change pattern to the other two popovers already in production).
+
+---
+
+## Task 1: Enable focus trap + explicit dismiss flags
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/views/view-field-visibility.tsx:65-72`
+
+- [ ] **Step 1: Edit the Popover props**
+
+Before:
+```tsx
+<Popover
+  opened={opened}
+  onClose={onClose}
+  position="bottom-end"
+  shadow="md"
+  width={260}
+  withinPortal
+>
+```
+
+After:
+```tsx
+<Popover
+  opened={opened}
+  onClose={onClose}
+  position="bottom-end"
+  shadow="md"
+  width={260}
+  trapFocus
+  closeOnEscape
+  closeOnClickOutside
+  withinPortal
+>
+```
+
+- [ ] **Step 2: Build the client**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/components/views/view-field-visibility.tsx
+git commit -m "fix(base): dismiss hide-fields popover on escape and outside click"
+```
+
+---
+
+## Task 2: USER smoke test
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off to the user.
+
+Ask the user, with the dev server already running, to:
+
+- [ ] Open a base → click the "Hide fields" (eye icon) button. Popover opens.
+- [ ] Press ESC. Popover closes. ✓
+- [ ] Open it again → click anywhere outside the popover (e.g. on the grid). Popover closes. ✓
+- [ ] Open it → click a Switch inside. Column toggles. Popover stays open. ✓
+- [ ] Open it → tab through with keyboard. Focus stays inside. ESC closes. ✓
+- [ ] Regression: the sort and filter popovers still dismiss correctly on ESC + outside click.
+
+If any step fails, report back; otherwise the fix is complete.
+
+---
+
+## Out of scope
+
+- No refactor of the three popovers into a shared wrapper — `trapFocus` alone is the only behaviour diff, and the existing components are small and focused. Not worth abstracting three instances.
+- No test added — Mantine `Popover` dismiss behaviour isn't something we own; testing it here would be testing the library.
diff --git a/docs/superpowers/plans/2026-04-18-hide-property-persistence-bug.md b/docs/superpowers/plans/2026-04-18-hide-property-persistence-bug.md
new file mode 100644
index 000000000..aa6a1fb04
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-hide-property-persistence-bug.md
@@ -0,0 +1,404 @@
+# Hide-Property Persistence Bug Fix Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Stop hidden column toggles from silently reappearing when another view-config mutation or a websocket-driven refetch lands between the toggle and the 300 ms debounced persist.
+
+**Architecture:** Two narrow fixes in the client — nothing server-side. (1) The blind `setColumnVisibility(derivedColumnVisibility)` sync effect in [`use-base-table.ts`](apps/client/src/features/base/hooks/use-base-table.ts) is scoped to run only when the user switches views, so refetches of the same view can't overwrite pending local toggles. (2) The sort/filter mutations in [`base-toolbar.tsx`](apps/client/src/features/base/components/base-toolbar.tsx) merge in the live table state (visibility / order / widths) instead of spreading stale `activeView.config` — so saving a sort no longer clobbers a not-yet-persisted hide.
+
+**Tech Stack:** React 18, TanStack Table v8, TanStack Query v5, Mantine, TypeScript.
+
+---
+
+## Background — why this happens
+
+`useBaseTable` keeps `columnVisibility` as local React state, seeded from the persisted view config via a `useMemo`-derived value (`derivedColumnVisibility`). Two effects currently do an unconditional re-sync:
+
+```ts
+// apps/client/src/features/base/hooks/use-base-table.ts:223-229
+useEffect(() => {
+  setColumnOrder(derivedColumnOrder);
+}, [derivedColumnOrder]);
+
+useEffect(() => {
+  setColumnVisibility(derivedColumnVisibility);
+}, [derivedColumnVisibility]);
+```
+
+Any mutation that calls `queryClient.setQueryData(["bases", baseId], ...)` — or `queryClient.invalidateQueries` at [`use-base-socket.ts:254`](apps/client/src/features/base/hooks/use-base-socket.ts:254) on ws `base:property:*` / `base:view:*` events — minted a new `activeView.config` reference. That recomputes `derivedColumnVisibility`, and the effect slams the local state back to whatever the server currently has.
+
+Persistence is debounced 300 ms by `persistViewConfig`. During that window, any of these triggers a stomp:
+
+1. **A concurrent sort / filter mutation from the same user.** `handleSortsChange` / `handleFiltersChange` in [`base-toolbar.tsx:93-120`](apps/client/src/features/base/components/base-toolbar.tsx:93) spread `activeView.config` (stale — still has old `hiddenPropertyIds`) and `mutate` immediately, without going through the debounced path. The `onMutate` optimistic write, the `onSuccess` server write, and the ws echo's `invalidateQueries` each re-trigger the effect.
+2. **Another client sending any `base:property:*` / `base:view:*` ws event.**
+3. **The optimistic / success writes from our OWN `persistViewConfig` mutation when the server-side state hasn't persisted yet** (e.g., response races).
+
+Symptom: user toggles a column hidden → column disappears → column reappears within ~instant to a few hundred ms → reload confirms the toggle was never saved.
+
+**Deterministic repro (no second client needed):**
+1. Open a base with ≥ 3 non-primary columns and no sorts.
+2. In the toolbar, open "Hide fields" and toggle column X off. Column vanishes.
+3. Immediately (well under 300 ms) open the Sort popover and add a sort.
+4. Column X reappears.
+5. Reload: X is visible; sort is saved; hide was lost.
+
+`hiddenPropertyIds` wins semantics check: [`use-base-table.ts:117-143`](apps/client/src/features/base/hooks/use-base-table.ts:117) — correct (hidden list is checked first, then legacy `visiblePropertyIds`, then default all-visible). That isn't the bug.
+
+---
+
+## File Structure
+
+**Modified files:**
+- `apps/client/src/features/base/hooks/use-base-table.ts` — gate the re-sync effect behind a view-id ref; export a new `buildViewConfigFromTable` helper used by both the debounced persist and the toolbar's direct mutations.
+- `apps/client/src/features/base/components/base-toolbar.tsx` — `handleSortsChange` / `handleFiltersChange` build the full config from live table state (not `activeView.config`) before `mutate`.
+
+No new files. No server-side changes. No new deps.
+
+---
+
+## Task 1: Verify the repro against the current build
+
+- [ ] **Step 1: Build the client** to make sure the branch is clean before changing anything.
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: build succeeds.
+
+- [ ] **Step 2: Ask the user to run the deterministic repro above.**
+
+(Per `CLAUDE.md` the agent must not run `pnpm dev`.) User should confirm:
+- Column X disappears, then reappears within ~300 ms of adding the sort.
+- Reload shows X visible, hide lost.
+
+If the repro does NOT reproduce for the user, stop the plan here and ask for actual repro steps — the fixes below target this specific chain.
+
+---
+
+## Task 2: Extract `buildViewConfigFromTable` helper
+
+**Files:**
+- Modify: `apps/client/src/features/base/hooks/use-base-table.ts`
+
+- [ ] **Step 1: Add the helper near the other build functions** (above `useBaseTable`, after `buildColumnPinning`)
+
+```ts
+// Serializes the live react-table state into a persisted ViewConfig.
+// Sort/filter toolbar mutations and the debounced `persistViewConfig`
+// both go through this so a direct mutation (e.g. adding a sort) can't
+// clobber a pending hide/reorder/resize by reading stale `activeView.config`.
+export function buildViewConfigFromTable(
+  table: Table<IBaseRow>,
+  base: ViewConfig | undefined,
+  overrides: Partial<ViewConfig> = {},
+): ViewConfig {
+  const state = table.getState();
+
+  const sorts = state.sorting.map((s) => ({
+    propertyId: s.id,
+    direction: (s.desc ? "desc" : "asc") as "asc" | "desc",
+  }));
+
+  const propertyWidths: Record<string, number> = {};
+  Object.entries(state.columnSizing).forEach(([id, width]) => {
+    if (id !== "__row_number") propertyWidths[id] = width;
+  });
+
+  const propertyOrder = state.columnOrder.filter((id) => id !== "__row_number");
+
+  const hiddenPropertyIds = Object.entries(state.columnVisibility)
+    .filter(([id, visible]) => id !== "__row_number" && !visible)
+    .map(([id]) => id);
+
+  return {
+    ...base,
+    sorts,
+    propertyWidths,
+    propertyOrder,
+    hiddenPropertyIds,
+    visiblePropertyIds: undefined,
+    ...overrides,
+  };
+}
+```
+
+- [ ] **Step 2: Replace the inline serialization inside `persistViewConfig`** (lines roughly 267-297 of the current file) with a call to the helper.
+
+Before:
+```ts
+persistTimerRef.current = setTimeout(() => {
+  const state = table.getState();
+  const sorts = state.sorting.map((s) => ({ ... }));
+  // ...lots of inline serialization...
+  const config: ViewConfig = {
+    ...activeView.config,
+    sorts,
+    propertyWidths,
+    propertyOrder,
+    hiddenPropertyIds,
+    visiblePropertyIds: undefined,
+  };
+  updateViewMutation.mutate({ viewId: activeView.id, baseId: base.id, config });
+}, 300);
+```
+
+After:
+```ts
+persistTimerRef.current = setTimeout(() => {
+  const config = buildViewConfigFromTable(table, activeView.config);
+  updateViewMutation.mutate({ viewId: activeView.id, baseId: base.id, config });
+}, 300);
+```
+
+- [ ] **Step 3: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-base-table.ts
+git commit -m "refactor(base): extract buildViewConfigFromTable helper"
+```
+
+---
+
+## Task 3: Route sort/filter mutations through the helper
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-toolbar.tsx`
+
+`handleSortsChange` and `handleFiltersChange` currently read `activeView.config` directly, which reflects the server-persisted state, not the user's pending local changes. They must build the new config from `table.getState()` + the new sort or filter.
+
+- [ ] **Step 1: Import the helper and accept the full view config for merging filters**
+
+Add at the top of the file:
+```ts
+import { buildViewConfigFromTable } from "@/features/base/hooks/use-base-table";
+```
+
+- [ ] **Step 2: Rewrite `handleSortsChange`**
+
+Before:
+```ts
+const handleSortsChange = useCallback(
+  (newSorts: ViewSortConfig[]) => {
+    if (!activeView) return;
+    updateViewMutation.mutate({
+      viewId: activeView.id,
+      baseId: base.id,
+      config: { ...activeView.config, sorts: newSorts },
+    });
+  },
+  [activeView, base.id, updateViewMutation],
+);
+```
+
+After:
+```ts
+const handleSortsChange = useCallback(
+  (newSorts: ViewSortConfig[]) => {
+    if (!activeView) return;
+    const config = buildViewConfigFromTable(table, activeView.config, {
+      sorts: newSorts,
+    });
+    updateViewMutation.mutate({
+      viewId: activeView.id,
+      baseId: base.id,
+      config,
+    });
+  },
+  [activeView, base.id, table, updateViewMutation],
+);
+```
+
+- [ ] **Step 3: Rewrite `handleFiltersChange` the same way**
+
+Before:
+```ts
+const handleFiltersChange = useCallback(
+  (newConditions: FilterCondition[]) => {
+    if (!activeView) return;
+    const filter: FilterGroup | undefined =
+      newConditions.length > 0
+        ? { op: "and", children: newConditions }
+        : undefined;
+    const { filter: _drop, ...rest } = activeView.config ?? {};
+    updateViewMutation.mutate({
+      viewId: activeView.id,
+      baseId: base.id,
+      config: filter ? { ...rest, filter } : rest,
+    });
+  },
+  [activeView, base.id, updateViewMutation],
+);
+```
+
+After:
+```ts
+const handleFiltersChange = useCallback(
+  (newConditions: FilterCondition[]) => {
+    if (!activeView) return;
+    const filter: FilterGroup | undefined =
+      newConditions.length > 0
+        ? { op: "and", children: newConditions }
+        : undefined;
+    // `filter: undefined` in overrides removes the filter key; the helper's
+    // spread-then-overrides order means `undefined` wins over any base filter.
+    const config = buildViewConfigFromTable(table, activeView.config, {
+      filter,
+    });
+    updateViewMutation.mutate({
+      viewId: activeView.id,
+      baseId: base.id,
+      config,
+    });
+  },
+  [activeView, base.id, table, updateViewMutation],
+);
+```
+
+- [ ] **Step 4: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/client/src/features/base/components/base-toolbar.tsx
+git commit -m "fix(base): merge live table state into sort and filter mutations"
+```
+
+---
+
+## Task 4: Gate the sync effect behind view-id change
+
+**Files:**
+- Modify: `apps/client/src/features/base/hooks/use-base-table.ts`
+
+Within the same view, local state is the source of truth and the debounced persist flushes it. The sync effect must only run when the user switches to a different view (where the server's config is authoritative).
+
+- [ ] **Step 1: Replace both sync effects**
+
+Before (around lines 220-229):
+```ts
+const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(derivedColumnOrder);
+const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(derivedColumnVisibility);
+
+useEffect(() => {
+  setColumnOrder(derivedColumnOrder);
+}, [derivedColumnOrder]);
+
+useEffect(() => {
+  setColumnVisibility(derivedColumnVisibility);
+}, [derivedColumnVisibility]);
+```
+
+After:
+```ts
+const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(derivedColumnOrder);
+const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(derivedColumnVisibility);
+
+// Re-seed from server only when the user switches views. Within the same
+// view, local state is the source of truth — the debounced persist flushes
+// it. Without this guard, any ws-driven `invalidateQueries(["bases", baseId])`
+// or concurrent view mutation lands a new `derivedColumnVisibility`
+// reference and the effect would overwrite a pending hide/reorder toggle
+// before `persistViewConfig` has a chance to flush it.
+const lastSyncedViewIdRef = useRef<string | undefined>(activeView?.id);
+useEffect(() => {
+  const currentViewId = activeView?.id;
+  if (currentViewId !== lastSyncedViewIdRef.current) {
+    lastSyncedViewIdRef.current = currentViewId;
+    setColumnOrder(derivedColumnOrder);
+    setColumnVisibility(derivedColumnVisibility);
+  }
+}, [activeView?.id, derivedColumnOrder, derivedColumnVisibility]);
+```
+
+Note: `derivedColumnOrder` and `derivedColumnVisibility` remain in the dependency array so the effect reads the current derived values when a view switch happens. The ref-guarded branch only fires on id change.
+
+- [ ] **Step 2: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-base-table.ts
+git commit -m "fix(base): only re-seed column state when view identity changes"
+```
+
+---
+
+## Task 5: USER manual verification — scripted steps
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off to the user with the cases below.
+
+Ask the user to run through these. Each should now behave correctly:
+
+- [ ] **Repro from Task 1 — hide then add sort**
+  1. Open a base with ≥ 3 non-primary columns.
+  2. Hide column X via the popover.
+  3. Within 300 ms, add a sort via the Sort popover.
+  4. Expected: column X stays hidden. Sort indicator shows. Reload: both persisted.
+
+- [ ] **Hide then change filter**
+  1. Hide column Y.
+  2. Immediately add a filter condition.
+  3. Expected: column Y stays hidden, filter applied. Reload: both persisted.
+
+- [ ] **Hide all / show all**
+  1. Click "Hide all" in the popover. All non-primary columns disappear.
+  2. Reload. Expected: same state.
+  3. Click "Show all". Reload. Expected: all columns visible.
+
+- [ ] **View switch**
+  1. Hide column Z on view A.
+  2. Switch to view B (no hide). Expected: Z visible in view B.
+  3. Switch back to view A. Expected: Z hidden.
+
+- [ ] **WebSocket reconcile doesn't stomp**
+  1. Hide column W.
+  2. From another browser / incognito session on the same base, add a new property.
+  3. In the first window, the new property appears visible, W stays hidden.
+
+- [ ] **Primary property can't be hidden** (regression check)
+  1. Open the popover — the primary column's switch is disabled (already enforced by `enableHiding: !property.isPrimary` at `use-base-table.ts:87`). Confirm.
+
+---
+
+## Task 6: Final commit check + handoff
+
+- [ ] **Step 1: Confirm branch state**
+
+```bash
+git status
+git log --oneline main..HEAD
+```
+
+Expected: clean tree, 3 new commits atop the CSV-export branch (refactor, fix sort/filter merge, fix sync effect).
+
+- [ ] **Step 2: Trigger `superpowers:finishing-a-development-branch`** to choose merge/PR.
+
+---
+
+## Out of scope (explicitly not fixing here)
+
+- **`hiddenFieldCount` badge dep** in `base-toolbar.tsx:88-91` — works by accident today (re-renders produce fresh `getState()` references). Low-impact cosmetic risk; leave alone unless it manifests.
+- **Legacy `visiblePropertyIds` migration.** Views created before `hiddenPropertyIds` existed may show new properties as hidden by default in `buildColumnVisibility`. No reports of this; migration would be a separate plan.
+- **Batching `handleHideAll`/`handleShowAll`** into a single `table.setColumnVisibility(map)` call instead of iterating `toggleVisibility`. React 18 batches these anyway; not a bug.
+- **Server-side zod schema.** `viewConfigSchema` already accepts `hiddenPropertyIds: []` correctly; no change needed.
diff --git a/docs/superpowers/plans/2026-04-18-hide-property-still-broken.md b/docs/superpowers/plans/2026-04-18-hide-property-still-broken.md
new file mode 100644
index 000000000..814132174
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-hide-property-still-broken.md
@@ -0,0 +1,224 @@
+# Hide Property Still Broken — Diagnose & Fix Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Identify and fix the reason that toggling a property in the hide-fields popover no longer ends up in the POST payload sent to `/bases/views/update`.
+
+**Architecture:** Instrument the toggle → state → debounced persist pipeline, have the user reproduce, read the logs, fix the exact bug. Do NOT blindly apply a "defensive" fix before the bug is pinpointed — we've burned several "fixes" on this already and need ground truth first.
+
+**Tech Stack:** React 18, TanStack Table v8 (controlled `state.columnVisibility` + `onColumnVisibilityChange`), TanStack Query v5.
+
+---
+
+## What we know so far
+
+1. **Server is fine.** Direct API call to `POST /api/bases/views/update` with `{config: {hiddenPropertyIds: [...]}}` persists exactly what's sent (verified against the user's base `019c69a5-1d84-7985-a7f6-8ee2871d8669`).
+2. **Client outgoing payload is wrong.** User observed: existing `hiddenPropertyIds = [A, B]`. They toggled a new column C via the hide popover. The outgoing POST payload still contained `hiddenPropertyIds: [A, B]` — C never made it in.
+3. **`buildViewConfigFromTable`** (at [`use-base-table.ts:179-211`](apps/client/src/features/base/hooks/use-base-table.ts:179)) reads `table.getState().columnVisibility` and derives `hiddenPropertyIds` by filtering entries where `visible === false`.
+4. **Only three code paths modify `columnVisibility` state** (confirmed by grep):
+   - `use-base-table.ts:275` — view-switch full re-seed (only fires when `activeView?.id` changes).
+   - `use-base-table.ts:297` — reconcile branch (function updater, preserves `prev` for existing ids).
+   - `use-base-table.ts:336` — `onColumnVisibilityChange: setColumnVisibility` passed to react-table.
+5. **react-table v8 `useReactTable`** ([verified from node_modules source](node_modules/.pnpm/@tanstack+react-table@8.21.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@tanstack/react-table/build/lib/index.mjs:47-70)) returns a STABLE `table` reference held in `useState(() => ({current: createTable(...)}))`. Every render it calls `setOptions` to merge fresh options and state. So the stale-`table`-closure hypothesis from an earlier investigation is LIKELY wrong — `table.getState()` at setTimeout time should return current state.
+6. **`col.toggleVisibility(value)`** at [`@tanstack/table-core/.../ColumnVisibility.js:30`](node_modules/.pnpm/@tanstack+table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/features/ColumnVisibility.js) uses a function updater: `table.setColumnVisibility(old => ({...old, [id]: value}))`. Which forwards to our `setColumnVisibility` — React queues the function updater; the next render commits new state.
+
+Given all of that, the toggle SHOULD reach `state.columnVisibility` and SHOULD land in the debounced payload. Something is interfering that we can't see by reading.
+
+## Hypotheses to rule in or out (the diagnostic is designed to distinguish them)
+
+- **H1: The handler-to-setState path is broken.** `handleToggle` fires but `setColumnVisibility` never commits the toggle (e.g., the setter is somehow stale, the function updater sees a stale `prev`, or react-table's intermediate logic drops the call).
+- **H2: Something immediately stomps the toggle.** The reconcile effect fires between the toggle and the debounce, with a `prev` that doesn't yet reflect the toggle, and writes an updated map that "preserves" a stale value for the toggled id.
+- **H3: Debounce timer fires with a fresh closure that reads a different `table` instance.** Contradicts what we saw in the react-table source, but worth falsifying.
+- **H4: The popover's `col` reference comes from a STALE `columns` memo.** If `table.getAllLeafColumns()` was captured when an older version of the table existed, `col.toggleVisibility` would call a stale `table.setColumnVisibility`.
+- **H5: The state IS updated but `buildViewConfigFromTable` reads a different state shape.** E.g., internal react-table state defeats our controlled state for `columnVisibility`.
+
+---
+
+## File Structure
+
+**Modified (instrumentation task — revert before shipping):**
+- `apps/client/src/features/base/hooks/use-base-table.ts` — add `console.log` calls at four checkpoints.
+- `apps/client/src/features/base/components/views/view-field-visibility.tsx` — log the `handleToggle` call site.
+
+**Modified (fix task — depends on findings):**
+- Whatever the diagnostic reveals.
+
+---
+
+## Task 1: Instrument the pipeline
+
+**Files:**
+- Modify: `apps/client/src/features/base/hooks/use-base-table.ts`
+- Modify: `apps/client/src/features/base/components/views/view-field-visibility.tsx`
+
+- [ ] **Step 1: Add a logging helper at the top of `use-base-table.ts`**
+
+Right after the existing imports, add:
+```ts
+const DEBUG_HIDE = true;
+function hideLog(label: string, data: unknown) {
+  if (DEBUG_HIDE) console.log(`[hide-debug] ${label}`, data);
+}
+```
+
+- [ ] **Step 2: Log inside the view-switch re-seed branch**
+
+In the effect at ~line 268, inside the `if (currentViewId !== lastSyncedViewIdRef.current) { ... }` branch, add:
+```ts
+hideLog("VIEW_SWITCH_RESEED", {
+  viewId: currentViewId,
+  newOrder: derivedColumnOrder,
+  newVisibility: derivedColumnVisibility,
+});
+```
+
+- [ ] **Step 3: Log inside the reconcile branch's setColumnVisibility updater**
+
+In the reconcile `setColumnVisibility((prev) => ...)` callback (around line 297), at the VERY START, log:
+```ts
+hideLog("RECONCILE_ENTER", { prev, derivedColumnVisibility });
+```
+
+And right before `return changed ? next : prev;`, log:
+```ts
+hideLog("RECONCILE_EXIT", { changed, next, returning: changed ? next : prev });
+```
+
+- [ ] **Step 4: Wrap `setColumnVisibility` to log every call**
+
+In `useReactTable`, replace:
+```ts
+onColumnVisibilityChange: setColumnVisibility,
+```
+
+with an instrumented passthrough:
+```ts
+onColumnVisibilityChange: (updater) => {
+  hideLog("RT_onColumnVisibilityChange", {
+    updaterType: typeof updater,
+    applied:
+      typeof updater === "function"
+        ? updater(columnVisibility)
+        : updater,
+  });
+  setColumnVisibility(updater as Parameters<typeof setColumnVisibility>[0]);
+},
+```
+
+(Apply the same pattern to `onColumnOrderChange` if you want symmetry — optional.)
+
+- [ ] **Step 5: Log inside the debounced persist**
+
+Inside the `setTimeout(() => { ... }, 300)` callback in `persistViewConfig`, BEFORE the `buildViewConfigFromTable` call, log:
+```ts
+const liveState = table.getState();
+hideLog("PERSIST_TICK", {
+  viewId: activeView.id,
+  stateColumnVisibility: liveState.columnVisibility,
+  stateColumnOrder: liveState.columnOrder,
+});
+```
+
+AFTER `buildViewConfigFromTable`, log:
+```ts
+hideLog("PERSIST_OUTGOING", { config });
+```
+
+- [ ] **Step 6: Log inside `handleToggle` in the popover**
+
+In `apps/client/src/features/base/components/views/view-field-visibility.tsx`, modify `handleToggle`:
+```ts
+const handleToggle = useCallback(
+  (columnId: string, visible: boolean) => {
+    const col = table.getColumn(columnId);
+    console.log("[hide-debug] HANDLE_TOGGLE", {
+      columnId,
+      visibleRequested: visible,
+      canHide: col?.getCanHide(),
+      currentlyVisible: col?.getIsVisible(),
+    });
+    if (!col) return;
+    col.toggleVisibility(visible);
+    onPersist();
+  },
+  [table, onPersist],
+);
+```
+
+- [ ] **Step 7: Build (do not commit — this is throwaway instrumentation)**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+---
+
+## Task 2: USER reproduces and shares logs
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** User runs dev; user hard-reloads; user interacts and copies the console output.
+
+Hand off to the user with this script:
+
+1. Open DevTools Console, clear it. Keep it open.
+2. Open the base. Open the "Hide fields" popover.
+3. Toggle ONE property that is currently visible → hidden. Do not click anything else.
+4. Wait ~1 second (debounce fires).
+5. Copy EVERY `[hide-debug] ...` line from the console, in order, and paste them back here. Also paste the resulting Network POST `/api/bases/views/update` request payload (Network tab → the one `update` request that fires 300 ms after the click → Payload → Request Payload).
+
+The interesting sequence, if everything is working, is:
+```
+HANDLE_TOGGLE { columnId: "X", visibleRequested: false, canHide: true, currentlyVisible: true }
+RT_onColumnVisibilityChange { updaterType: "function", applied: { ..., X: false } }
+PERSIST_TICK { stateColumnVisibility: { ..., X: false } }
+PERSIST_OUTGOING { config: { hiddenPropertyIds: [..., "X"] } }
+```
+
+If the bug is present, one of those lines will be missing or wrong. The exact position of the deviation pinpoints which hypothesis (H1–H5) is correct.
+
+---
+
+## Task 3: Fix based on findings
+
+Do NOT pre-write the fix. Tasks 3a-3c below are the dispatch table — exactly ONE applies.
+
+### Task 3a: If `RT_onColumnVisibilityChange` never logs, or `applied` doesn't include the toggled id → H1
+
+react-table isn't calling our setter, OR the updater resolves to the wrong value. This points to:
+- a stale `col` object (columns memo invalidation issue)
+- or a react-table options propagation bug
+
+Investigate `col.toggleVisibility` step-by-step (add logs inside `toggleVisibility` via a wrapped column accessor), ensure `columns` useMemo dep list includes everything that affects `getCanHide`/`getIsVisible`.
+
+### Task 3b: If `RT_onColumnVisibilityChange` logs `applied: {X: false}` but `PERSIST_TICK` shows `stateColumnVisibility` without `X: false` → H2 or H3
+
+The setter was called correctly but state didn't commit. Check if `RECONCILE_ENTER` fired between them and what `prev` it saw.
+
+- If `RECONCILE_ENTER.prev` has `X: false` and `RECONCILE_EXIT.returning` does NOT → bug in the reconcile logic.
+- If `RECONCILE_ENTER.prev` does NOT have `X: false` → React batching issue; the toggle's setState ran AFTER the effect's setState. Fix by using a ref to latest `derivedColumnVisibility` so the reconcile effect can safely be a no-op except on view-id change (same-view drift will be covered by `columns` prop going through react-table's internal columnVisibility seeding).
+
+### Task 3c: If `PERSIST_TICK.stateColumnVisibility` has `X: false` but `PERSIST_OUTGOING.config.hiddenPropertyIds` doesn't include `X` → bug in `buildViewConfigFromTable`
+
+This would be surprising given the code at [`use-base-table.ts:198-200`](apps/client/src/features/base/hooks/use-base-table.ts:198), but check type coercion and filter predicate.
+
+---
+
+## Task 4: Remove instrumentation, commit fix, hand back to user
+
+- [ ] **Step 1:** Remove all `[hide-debug]` logs and the `DEBUG_HIDE` / `hideLog` helper.
+- [ ] **Step 2:** Build + self-verify by thinking through the fix with the log evidence in hand.
+- [ ] **Step 3:**
+```bash
+pnpm nx run client:build
+git add <changed files>
+git commit -m "fix(base): <concrete description based on the real root cause>"
+```
+- [ ] **Step 4:** User smoke test: hide a column, verify payload contains the id, verify the column stays hidden after refresh.
+
+---
+
+## Anti-goals
+
+- **No "defensive" fixes.** We've cycled through "wrap in useRef" / "gate the effect" / "merge table state" — each touched a real issue but none hit this particular bug. A plausible-sounding fix is worse than silence: it burns trust when it doesn't work.
+- **No code edits without the log evidence.** Task 3 only runs after Task 2 returns concrete data.
diff --git a/docs/superpowers/plans/2026-04-18-new-property-not-in-view.md b/docs/superpowers/plans/2026-04-18-new-property-not-in-view.md
new file mode 100644
index 000000000..531c5ae81
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-new-property-not-in-view.md
@@ -0,0 +1,197 @@
+# New Property Not In View Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** When a user creates a new property, it lands in the grid's local column state immediately (appended to the end, visible by default) so the grid can size and scroll to reveal it.
+
+**Architecture:** Single-file fix in [`apps/client/src/features/base/hooks/use-base-table.ts`](apps/client/src/features/base/hooks/use-base-table.ts). Extend the existing gated re-seed effect so that on property add / remove (within the same view) it reconciles local `columnOrder` and `columnVisibility` instead of ignoring the change. Existing per-column user toggles (hide, reorder) are preserved; new columns are appended; deleted columns are dropped.
+
+**Tech Stack:** React 18, TanStack Table v8, TanStack Query v5.
+
+---
+
+## Background
+
+Earlier in this branch (commit `c6f993b6`) the sync effect that copied `derivedColumnOrder` / `derivedColumnVisibility` into local state was gated behind a view-id ref to stop ws-driven base refetches from stomping the user's pending hide-column toggles. Current code:
+
+```ts
+// apps/client/src/features/base/hooks/use-base-table.ts:267-281
+const lastSyncedViewIdRef = useRef<string | undefined>(activeView?.id);
+useEffect(() => {
+  const currentViewId = activeView?.id;
+  if (currentViewId !== lastSyncedViewIdRef.current) {
+    lastSyncedViewIdRef.current = currentViewId;
+    setColumnOrder(derivedColumnOrder);
+    setColumnVisibility(derivedColumnVisibility);
+  }
+}, [activeView?.id, derivedColumnOrder, derivedColumnVisibility]);
+```
+
+**What goes wrong with a new property in the same view:**
+
+1. User opens `CreatePropertyPopover`, submits → `useCreatePropertyMutation.onSuccess` appends the new property to `["bases", baseId].properties`.
+2. `base.properties` has a new reference → `properties` useMemo re-runs → new array reference.
+3. `derivedColumnOrder` recomputes — includes the new property id.
+4. The gated effect sees `currentViewId === lastSyncedViewIdRef.current`, so it **does nothing**. Local `columnOrder` state still lists the OLD column ids.
+5. `columns` prop to `useReactTable` is rebuilt (it memos on `[properties]`), so react-table does know the new column def exists.
+6. But state passed via `state={{columnOrder}}` still references only the old columns → `table.getState().columnOrder` → stale → `gridTemplateColumns` (which depends on `table.getVisibleLeafColumns()` + `table.getState().columnOrder` in [`grid-container.tsx:149`](apps/client/src/features/base/components/grid/grid-container.tsx:149)) doesn't get a track for the new column.
+7. Result: the new column renders in the DOM (react-table still yields it as visible), but the grid wrapper's `scrollWidth` doesn't extend to contain it, so `handlePropertyCreated`'s [`scrollRef.current.scrollTo({left: scrollWidth})`](apps/client/src/features/base/components/grid/grid-container.tsx:183-192) ends at the OLD scrollWidth — the new column stays clipped at the edge.
+
+The same mechanism also breaks property **deletion** within the same view (local state keeps a dead id) — not the filed symptom, but worth fixing in the same patch.
+
+The same mechanism does NOT break **rename**, because rename changes `property.name` but not property IDs; order + visibility maps key on id, so they stay correct. Rename is already working after the earlier memo-prop-threading fix.
+
+---
+
+## File Structure
+
+**Modified files:**
+- `apps/client/src/features/base/hooks/use-base-table.ts` — extend the sync effect.
+
+No new files, no new deps, nothing server-side.
+
+---
+
+## Task 1: Reconcile local column state on property add / remove
+
+**Files:**
+- Modify: `apps/client/src/features/base/hooks/use-base-table.ts:260-281`
+
+- [ ] **Step 1: Replace the effect**
+
+Before (current):
+```ts
+const lastSyncedViewIdRef = useRef<string | undefined>(activeView?.id);
+useEffect(() => {
+  const currentViewId = activeView?.id;
+  if (currentViewId !== lastSyncedViewIdRef.current) {
+    lastSyncedViewIdRef.current = currentViewId;
+    setColumnOrder(derivedColumnOrder);
+    setColumnVisibility(derivedColumnVisibility);
+  }
+}, [activeView?.id, derivedColumnOrder, derivedColumnVisibility]);
+```
+
+After:
+```ts
+const lastSyncedViewIdRef = useRef<string | undefined>(activeView?.id);
+useEffect(() => {
+  const currentViewId = activeView?.id;
+
+  // View switch → full re-seed from the server's stored config.
+  if (currentViewId !== lastSyncedViewIdRef.current) {
+    lastSyncedViewIdRef.current = currentViewId;
+    setColumnOrder(derivedColumnOrder);
+    setColumnVisibility(derivedColumnVisibility);
+    return;
+  }
+
+  // Same view — preserve user toggles, but reconcile the id set:
+  // append properties that were just created, drop properties that
+  // were deleted. Without this, creating a new column leaves it
+  // invisible to `table.getState().columnOrder` / `gridTemplateColumns`,
+  // and the grid's scrollWidth never grows to include it.
+  const validIds = new Set<string>(["__row_number"]);
+  for (const p of properties) validIds.add(p.id);
+
+  setColumnOrder((prev) => {
+    const prevSet = new Set(prev);
+    const kept = prev.filter((id) => validIds.has(id));
+    const appended = derivedColumnOrder.filter(
+      (id) => !prevSet.has(id) && validIds.has(id),
+    );
+    if (appended.length === 0 && kept.length === prev.length) return prev;
+    return [...kept, ...appended];
+  });
+
+  setColumnVisibility((prev) => {
+    let changed = false;
+    const next: VisibilityState = {};
+    for (const [id, visible] of Object.entries(prev)) {
+      if (validIds.has(id)) {
+        next[id] = visible;
+      } else {
+        changed = true;
+      }
+    }
+    for (const id of derivedColumnOrder) {
+      if (!(id in next)) {
+        next[id] = derivedColumnVisibility[id] ?? true;
+        changed = true;
+      }
+    }
+    return changed ? next : prev;
+  });
+}, [
+  activeView?.id,
+  derivedColumnOrder,
+  derivedColumnVisibility,
+  properties,
+]);
+```
+
+Notes for the implementer:
+- `VisibilityState` is already imported from `@tanstack/react-table` — no new import needed.
+- `properties` is already declared as a memoized value at the top of this hook, so adding it to the dep list is safe.
+- The two `setX((prev) => ...)` updaters both short-circuit (return `prev`) when nothing actually changed, which matters because `derivedColumnOrder` / `derivedColumnVisibility` have a new identity every time `properties` does — without the short-circuit the set would fire every render in the same view and blow away user toggles.
+- `kept.length === prev.length` is a proxy for "no deletions" and is safe because `prev` can't contain duplicates (react-table enforces id uniqueness, and our own `derivedColumnOrder` is also unique).
+
+- [ ] **Step 2: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/client/src/features/base/hooks/use-base-table.ts
+git commit -m "fix(base): include new properties in local column state so the grid can scroll to them"
+```
+
+---
+
+## Task 2: USER smoke test
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off to the user.
+
+After a hard reload:
+
+- [ ] **Create a new property — grid sizes for it and scroll reaches it.**
+  1. Open a base with enough columns that horizontal scrolling is already active.
+  2. Click the "+" / create-property button, pick a type, submit.
+  3. The grid should scroll right automatically; the new column is fully visible; the horizontal scrollbar extends.
+
+- [ ] **New property is visible in the Hide fields popover.**
+  1. Open the eye icon (Hide fields).
+  2. The new property appears in the list, toggle ON.
+
+- [ ] **Existing toggles are preserved.**
+  1. Hide column X.
+  2. Create a new column Y. Column X stays hidden; Y appears at the end, visible.
+
+- [ ] **Delete a property.**
+  1. From a property's menu, click Delete.
+  2. Column disappears from the grid; grid scrollWidth contracts. No stale column left.
+
+- [ ] **View switch still works cleanly.**
+  1. Switch to a different view; then switch back.
+  2. Hidden / reordered state for that view loads correctly.
+
+- [ ] **Rename still works (regression check).**
+  1. Rename a property; the header text updates without reload.
+
+- [ ] **Hide + concurrent sort mutation (regression for the original hide bug).**
+  1. Hide a column, then add a sort within 300 ms. Column stays hidden; sort applies.
+
+If any step fails, report back with the specific case.
+
+---
+
+## Out of scope
+
+- Scrolling behavior on row add (orthogonal, not broken).
+- The two `rAF` delay in `handlePropertyCreated` — it already waits long enough once state reconciliation happens in the same render cycle.
+- `columnSizing` reconciliation — a new column uses its defined size automatically via react-table's `initialState`, and a deleted column's entry in the sizing state is harmless.
diff --git a/docs/superpowers/plans/2026-04-18-property-rename-not-reflecting.md b/docs/superpowers/plans/2026-04-18-property-rename-not-reflecting.md
new file mode 100644
index 000000000..cd49fd9e8
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-property-rename-not-reflecting.md
@@ -0,0 +1,375 @@
+# Property Rename Not Reflecting Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make property (column) rename reflect immediately in the grid header and the hide-fields popover, both for the editing user and other clients in the same base room — without a tab reload.
+
+**Architecture:** Three small frontend changes. The server path is already correct (rename persists, emits `base:property:updated` ws event, and `useBaseSocket` invalidates `["bases", baseId]`). The cache updates too. The bug is purely client-side memoization: `GridHeader`, `GridHeaderCell`, and `ViewFieldVisibility` memo on `[table]` / their prop object — and the `table` reference returned by `useReactTable` is STABLE across renders. So when properties change under the hood (new column defs, new `meta.property` objects, new header strings), memo'd consumers never re-render. Fix: thread `properties` / `property` down as explicit props so shallow-compare catches the change.
+
+**Tech Stack:** React 18, TanStack Table v8, TanStack Query v5.
+
+---
+
+## Background — the trace that explains the bug
+
+1. User renames property "Email" → "Mail" from the header's property menu.
+2. `updatePropertyMutation.mutate` fires. Server persists, returns `{property: {...name: "Mail"}}`.
+3. `onSuccess` in [`base-property-query.ts:52-65`](apps/client/src/features/base/queries/base-property-query.ts:52) calls `queryClient.setQueryData(["bases", baseId], old => ({...old, properties: old.properties.map(p => p.id === result.property.id ? result.property : p)}))`. The renamed property is a new object reference; the rest of the array reuses old refs.
+4. `useBaseQuery` returns a new `IBase` object with a new `properties` array.
+5. In [`use-base-table.ts`](apps/client/src/features/base/hooks/use-base-table.ts), `properties = useMemo(() => base?.properties ?? [], [base?.properties])` picks up the new array. `columns = useMemo(() => buildColumns(properties), [properties])` rebuilds all column defs, including new `meta.property` objects and new `header: property.name` values.
+6. `useReactTable({columns, ...})` receives the new columns array. Internally TanStack Table updates its column state.
+7. The `table` instance returned by `useReactTable` is the SAME reference it was before — it's memoized for stability.
+8. `<GridHeader table={table} columnOrder={...} />` is wrapped in `React.memo`. Its props: `table` (stable), `columnOrder` (unchanged — rename doesn't reorder), `loadedRowIds` (unchanged). Memo shallow-compare says "no change" → **no re-render**.
+9. Even if `GridHeader` did re-render, each `<GridHeaderCell key={header.id} header={header} />` is also `memo`'d. `header` is reused by TanStack Table across renders for the same column id, so same ref → memo skips → **no re-render**.
+10. [`view-field-visibility.tsx:27-31`](apps/client/src/features/base/components/views/view-field-visibility.tsx:27): `const columns = useMemo(() => table.getAllLeafColumns().filter(...), [table])`. `table` is stable → memo never invalidates → shows stale names.
+
+The rename only becomes visible after a full mount (tab reload), which recomputes everything from scratch.
+
+## Files
+
+**Modified:**
+- `apps/client/src/features/base/components/grid/grid-header.tsx` — accept `properties: IBaseProperty[]` prop; pass `property={...}` to each `GridHeaderCell`. Memo picks up the change.
+- `apps/client/src/features/base/components/grid/grid-header-cell.tsx` — accept `property` as an explicit prop instead of deriving from `header.column.columnDef.meta?.property`. Use it for header rendering (and anywhere else in this file that currently reads it through the meta).
+- `apps/client/src/features/base/components/grid/grid-container.tsx` — accept `properties` prop; pass to `<GridHeader>`.
+- `apps/client/src/features/base/components/base-table.tsx` — pass `base?.properties` to `<GridContainer>`.
+- `apps/client/src/features/base/components/base-toolbar.tsx` — pass `properties={base.properties}` to `<ViewFieldVisibility>`.
+- `apps/client/src/features/base/components/views/view-field-visibility.tsx` — accept `properties` prop; include it in the `useMemo([table, properties])` dep list.
+
+No new files. No server changes. No new deps.
+
+---
+
+## Task 1: `GridHeaderCell` — accept `property` as a prop
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/grid/grid-header-cell.tsx`
+
+- [ ] **Step 1: Add `property` to `GridHeaderCellProps`**
+
+```tsx
+type GridHeaderCellProps = {
+  header: Header<IBaseRow, unknown>;
+  property: IBaseProperty | undefined;
+  loadedRowIds: string[];
+};
+```
+
+- [ ] **Step 2: Replace the internal property derivation with the prop**
+
+Find the line near the top of the component:
+```tsx
+const property = header.column.columnDef.meta?.property as
+  | IBaseProperty
+  | undefined;
+```
+
+Remove it. Add `property` to the function parameter destructuring:
+```tsx
+export const GridHeaderCell = memo(function GridHeaderCell({
+  header,
+  property,
+  loadedRowIds,
+}: GridHeaderCellProps) {
+```
+
+Everything else in the file continues to reference the same `property` variable, now a prop. No further changes needed in this file.
+
+- [ ] **Step 3: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Build will FAIL because `GridHeader` doesn't yet pass `property`. That's fine — fixed in the next task. Do not commit yet.
+
+---
+
+## Task 2: `GridHeader` — thread `properties` / `property` through
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/grid/grid-header.tsx`
+
+- [ ] **Step 1: Add `properties` prop and use it to look up per-cell property**
+
+Before:
+```tsx
+type GridHeaderProps = {
+  table: Table<IBaseRow>;
+  baseId?: string;
+  // Passed explicitly to break memo when columns change
+  // (table ref is stable from useReactTable, so memo won't fire without this)
+  columnOrder: ColumnOrderState;
+  loadedRowIds: string[];
+  onPropertyCreated?: () => void;
+};
+
+export const GridHeader = memo(function GridHeader({
+  table,
+  baseId,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnOrder: _columnOrder,
+  loadedRowIds,
+  onPropertyCreated,
+}: GridHeaderProps) {
+  const headerGroups = table.getHeaderGroups();
+
+  return (
+    <div className={classes.headerRow} role="row">
+      {headerGroups[0]?.headers.map((header) => (
+        <GridHeaderCell key={header.id} header={header} loadedRowIds={loadedRowIds} />
+      ))}
+      ...
+```
+
+After:
+```tsx
+import { IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
+
+type GridHeaderProps = {
+  table: Table<IBaseRow>;
+  baseId?: string;
+  // Passed explicitly to break memo when columns change
+  // (table ref is stable from useReactTable, so memo won't fire without these)
+  columnOrder: ColumnOrderState;
+  properties: IBaseProperty[];
+  loadedRowIds: string[];
+  onPropertyCreated?: () => void;
+};
+
+export const GridHeader = memo(function GridHeader({
+  table,
+  baseId,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnOrder: _columnOrder,
+  properties,
+  loadedRowIds,
+  onPropertyCreated,
+}: GridHeaderProps) {
+  const headerGroups = table.getHeaderGroups();
+  const propertyById = useMemo(() => {
+    const map = new Map<string, IBaseProperty>();
+    for (const p of properties) map.set(p.id, p);
+    return map;
+  }, [properties]);
+
+  return (
+    <div className={classes.headerRow} role="row">
+      {headerGroups[0]?.headers.map((header) => (
+        <GridHeaderCell
+          key={header.id}
+          header={header}
+          property={propertyById.get(header.column.id)}
+          loadedRowIds={loadedRowIds}
+        />
+      ))}
+      ...
+```
+
+Make sure `useMemo` is imported from react (it already imports `memo`; add `useMemo` alongside).
+
+- [ ] **Step 2: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Still expected to fail — `GridContainer` doesn't yet pass `properties`. Next task.
+
+---
+
+## Task 3: `GridContainer` — accept and forward `properties`
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/grid/grid-container.tsx`
+
+- [ ] **Step 1: Add `properties` to props**
+
+Near the existing `GridContainerProps` type (look near the top of the file), add:
+```tsx
+properties: IBaseProperty[];
+```
+
+Add `IBaseProperty` to the existing `@/features/base/types/base.types` import at the top of the file if it's not already imported.
+
+Destructure it in the component signature.
+
+- [ ] **Step 2: Pass it to `<GridHeader>`**
+
+Find the `<GridHeader ... />` JSX at roughly line 239-245 and add:
+```tsx
+<GridHeader
+  table={table}
+  baseId={baseId}
+  columnOrder={table.getState().columnOrder}
+  properties={properties}
+  loadedRowIds={rowIds}
+  onPropertyCreated={handlePropertyCreated}
+/>
+```
+
+- [ ] **Step 3: Build**
+
+Still expected to fail — `BaseTable` doesn't yet pass `properties` to `GridContainer`. Next task.
+
+---
+
+## Task 4: `BaseTable` — pass `base.properties` to `GridContainer`
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-table.tsx`
+
+- [ ] **Step 1: Add the prop**
+
+Find the `<GridContainer ... />` JSX at line 187. Add:
+```tsx
+<GridContainer
+  table={table}
+  properties={base.properties}
+  onCellUpdate={handleCellUpdate}
+  ...
+/>
+```
+
+`base` is already guaranteed non-null at this point — line 174 has `if (!base) return null;`.
+
+- [ ] **Step 2: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Should succeed now — grid path is complete.
+
+- [ ] **Step 3: Commit the grid-side changes as one unit**
+
+```bash
+git add \
+  apps/client/src/features/base/components/grid/grid-header-cell.tsx \
+  apps/client/src/features/base/components/grid/grid-header.tsx \
+  apps/client/src/features/base/components/grid/grid-container.tsx \
+  apps/client/src/features/base/components/base-table.tsx
+git commit -m "fix(base): refresh grid headers when a property is renamed"
+```
+
+The four files have to land together or the build is broken — one commit.
+
+---
+
+## Task 5: `ViewFieldVisibility` — accept `properties` and include it in the memo
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/views/view-field-visibility.tsx`
+
+- [ ] **Step 1: Add `properties` to the props type**
+
+```tsx
+type ViewFieldVisibilityProps = {
+  opened: boolean;
+  onClose: () => void;
+  table: Table<IBaseRow>;
+  properties: IBaseProperty[];
+  onPersist: () => void;
+  children: React.ReactNode;
+};
+```
+
+- [ ] **Step 2: Add `properties` to the `useMemo` dep list**
+
+Change:
+```tsx
+const columns = useMemo(() => {
+  return table
+    .getAllLeafColumns()
+    .filter((col) => col.id !== "__row_number");
+}, [table]);
+```
+
+To:
+```tsx
+const columns = useMemo(() => {
+  return table
+    .getAllLeafColumns()
+    .filter((col) => col.id !== "__row_number");
+}, [table, properties]);
+```
+
+We still derive columns from `table` (that's where `col.getIsVisible()` / `col.getCanHide()` live), but `properties` is added as a dep so the memo invalidates whenever properties change — forcing a re-read of `table.getAllLeafColumns()` which by then reflects the renamed metadata.
+
+Also destructure `properties` in the function signature.
+
+- [ ] **Step 3: Build**
+
+Expected to fail until the toolbar passes `properties`.
+
+---
+
+## Task 6: `BaseToolbar` — pass `base.properties` to `ViewFieldVisibility`
+
+**Files:**
+- Modify: `apps/client/src/features/base/components/base-toolbar.tsx`
+
+- [ ] **Step 1: Pass the prop**
+
+Find `<ViewFieldVisibility ... />` (near the bottom of the file). Add:
+```tsx
+<ViewFieldVisibility
+  opened={fieldsOpened}
+  onClose={() => setFieldsOpened(false)}
+  table={table}
+  properties={base.properties}
+  onPersist={onPersistViewConfig}
+>
+```
+
+`base` is already a prop on `BaseToolbar` — no other plumbing needed.
+
+- [ ] **Step 2: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Should succeed.
+
+- [ ] **Step 3: Commit the popover-side changes**
+
+```bash
+git add \
+  apps/client/src/features/base/components/views/view-field-visibility.tsx \
+  apps/client/src/features/base/components/base-toolbar.tsx
+git commit -m "fix(base): refresh hide-fields popover when a property is renamed"
+```
+
+---
+
+## Task 7: USER smoke test
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off to the user.
+
+Ask the user to run through:
+
+- [ ] **Local rename updates the grid header instantly.**
+  1. Open a base.
+  2. Click a column header → Rename → type a new name → press Enter.
+  3. The column header text updates immediately — no reload.
+
+- [ ] **Local rename updates the hide-fields popover instantly.**
+  1. After renaming, open the Hide fields popover.
+  2. The property's entry in the list shows the new name.
+
+- [ ] **Remote rename (other client) updates without reload.**
+  1. Open the same base in two browsers / tabs (A and B).
+  2. In A, rename a property.
+  3. In B, within a second, the header text (and hide-fields popover) show the new name.
+
+- [ ] **Regression: column resize, reorder, hide, sort, filter all still work.**
+
+If all pass, the fix is complete. Otherwise report back with which case failed.
+
+---
+
+## Out of scope
+
+- `ViewSortConfigPopover` / `ViewFilterConfigPopover` also show property names, but they read from `base.properties` directly (they already get `base` as a prop and re-render when it changes), so they weren't broken by this bug. Not touching them.
+- Property icons (`property.type` change). A type change already bumps `schemaVersion` on the base, which invalidates and refetches — that path works. Out of scope here.
+- Server-side — rename already persists + broadcasts correctly.
diff --git a/docs/superpowers/plans/2026-04-19-infinite-scroll-loop-fix-v2.md b/docs/superpowers/plans/2026-04-19-infinite-scroll-loop-fix-v2.md
new file mode 100644
index 000000000..fd1dfe93a
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-19-infinite-scroll-loop-fix-v2.md
@@ -0,0 +1,231 @@
+# Infinite Scroll Fetch Loop Fix v2 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Kill the pagination loop that still fires extra `POST /bases/rows` requests as the user scrolls continuously through a 10K+ base, even after the v1 rows-length guard.
+
+**Architecture:** Replace the `virtualItems`-polling effect with a scroll-event-driven trigger plus a **synchronous** pending-fetch ref. Two independent dedup mechanisms: (a) only consider firing after a real scroll event (debounced), (b) never dispatch a second `fetchNextPage` until the previous one's resulting page has been committed to the cache. The previous v1 fix relied on `rows.length` growing after each commit, which under sustained scrolling lets react-query schedule multiple fetches before its own `isFetchingNextPage` observed-true state propagates to our render.
+
+**Tech Stack:** React 18, `@tanstack/react-virtual`, `@tanstack/react-query` v5.
+
+---
+
+## Background
+
+### What v1 fixed and what it missed
+
+v1 ([grid-container.tsx, commit `c4d8b6c3`](apps/client/src/features/base/components/grid/grid-container.tsx)) added `lastTriggeredRowsLenRef` — "don't fire again until `rows.length` grows past the last value we triggered on." That breaks the *idle-at-bottom* loop (where the effect was firing every render on the same `rows.length`).
+
+It still leaks under sustained scrolling:
+
+1. User scrolls rapidly. Effect runs. Condition holds. Ref updates to N. `onFetchNextPage()` dispatched.
+2. react-query enqueues a fetch. But the internal state object mutations reaching our `isFetchingNextPage` snapshot happen across a microtask boundary; within the SAME React render commit there's a window where `isFetchingNextPage` is still `false` from React's perspective.
+3. The effect dep list includes `virtualItems`, which `virtualizer.getVirtualItems()` mints fresh every render. Any other state change (scroll position, virtual measurements, React 18 batching flushes) re-fires the effect.
+4. Our `rows.length <= ref` gate blocks further fires AT THE SAME LENGTH. But because the user is SCROLLING, as soon as a page DOES commit, `rows.length` jumps, and on that same commit render the effect can fire repeatedly (e.g., due to scroll-driven re-measures) because the `isFetchingNextPage` false window can overlap with the new render.
+5. If enough fetches pile up, react-query dispatches each in sequence. Requests are only partly deduped — each call while a fetch is in flight returns the same promise, BUT if the commit has already landed and `isFetchingNextPage` flipped briefly to false before our render observed it, that call dispatches a NEW fetch. Net: 10× more dispatches than pages committed.
+
+Reported symptom: on the 10K base the loop kicks in after a while of scrolling. Network panel shows `1176 requests` initiated, only `124` loaded — ~10× over-dispatch.
+
+### The fix shape
+
+Two orthogonal locks that together make over-dispatch impossible:
+
+**Lock A — synchronous pending flag.** A `pendingFetchRef` set to `true` SYNCHRONOUSLY right before `onFetchNextPage()` is called. Cleared in a separate effect that watches `isFetchingNextPage` transitioning back to `false` (i.e., the fetch that we started has resolved). While the ref is set, the trigger never re-fires. This eliminates the same-render-double-fire window that the v1 length guard couldn't cover.
+
+**Lock B — real scroll events, not render-driven polling.** Attach a listener to `scrollRef`'s `scroll` event, debounced ~50 ms. On each debounced scroll, compute "am I near the bottom" from raw `scrollTop + clientHeight >= scrollHeight - threshold`. This removes `virtualItems` from the trigger path entirely — no effect is running on every render.
+
+With both locks, the worst-case dispatch cadence is *one per debounced scroll tick where you're near the bottom*. Combined with Lock A's pending gate, you get *at most one request in flight at a time*, committing sequentially as the user scrolls.
+
+Keep the v1 `lastTriggeredRowsLenRef` guard as a safety net (it's cheap and prevents re-trigger against stale row-set data).
+
+---
+
+## File Structure
+
+**Modified:**
+- `apps/client/src/features/base/components/grid/grid-container.tsx` — replace the current trigger effect; add a pending ref + a reset effect.
+
+No new files, no new deps, nothing server-side.
+
+---
+
+## Task 1: Replace the trigger with a scroll-driven + pending-guarded version
+
+**File:** `apps/client/src/features/base/components/grid/grid-container.tsx`
+
+### Step 1: Add a pending ref next to the existing `lastTriggeredRowsLenRef`
+
+Inside `GridContainer`, right after `const lastTriggeredRowsLenRef = useRef(0);` (around line 70), add:
+
+```ts
+// Synchronous guard: set to true the moment we dispatch `onFetchNextPage`,
+// cleared only after `isFetchingNextPage` has transitioned back to false.
+// This closes the "React 18 batching / snapshot staleness" window where
+// `isFetchingNextPage` from the hook is still observed false even though
+// a dispatch is already in flight — which is how the v1 length-only
+// guard still permits over-dispatch during sustained scrolling.
+const pendingFetchRef = useRef(false);
+```
+
+### Step 2: DELETE the existing trigger effect
+
+Locate the effect at roughly lines 122-130:
+
+```ts
+useEffect(() => {
+  if (!hasNextPage || isFetchingNextPage || !onFetchNextPage) return;
+  const lastItem = virtualItems[virtualItems.length - 1];
+  if (!lastItem) return;
+  if (lastItem.index < rows.length - OVERSCAN * 2) return;
+  if (rows.length <= lastTriggeredRowsLenRef.current) return;
+  lastTriggeredRowsLenRef.current = rows.length;
+  onFetchNextPage();
+}, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
+```
+
+Delete it entirely. We're replacing render-polling with scroll-event-driven.
+
+### Step 3: Add a new scroll-event-driven effect in its place
+
+Insert this (same location):
+
+```ts
+// Scroll-event-driven pagination trigger. Previously this was a
+// render-effect that polled `virtualItems` — which runs on every render
+// (virtualItems has fresh identity each call) and over-dispatches when
+// React's `isFetchingNextPage` snapshot is stale relative to react-query's
+// in-flight state. A plain scroll event with a small debounce and a
+// synchronous pending ref fires at most once per scroll pulse AND
+// at most one in-flight request at a time.
+useEffect(() => {
+  const el = scrollRef.current;
+  if (!el) return;
+
+  const NEAR_BOTTOM_PX = ROW_HEIGHT * OVERSCAN * 2;
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const maybeFetch = () => {
+    if (!onFetchNextPage) return;
+    if (!hasNextPage) return;
+    if (isFetchingNextPage) return;
+    if (pendingFetchRef.current) return;
+    const node = scrollRef.current;
+    if (!node) return;
+    const distanceFromBottom =
+      node.scrollHeight - (node.scrollTop + node.clientHeight);
+    if (distanceFromBottom > NEAR_BOTTOM_PX) return;
+    if (rows.length <= lastTriggeredRowsLenRef.current) return;
+
+    pendingFetchRef.current = true;
+    lastTriggeredRowsLenRef.current = rows.length;
+    onFetchNextPage();
+  };
+
+  const onScroll = () => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(maybeFetch, 50);
+  };
+
+  // Also evaluate once on mount / when deps change — covers the case
+  // where the user hasn't scrolled yet but the viewport is already
+  // past the near-bottom threshold (e.g. first page is short).
+  maybeFetch();
+
+  el.addEventListener("scroll", onScroll, { passive: true });
+  return () => {
+    el.removeEventListener("scroll", onScroll);
+    if (debounceTimer) clearTimeout(debounceTimer);
+  };
+}, [rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
+```
+
+Notes the implementer must not change:
+- The `maybeFetch()` call BEFORE adding the scroll listener is intentional — it handles "viewport already past threshold on mount/commit" without requiring a scroll.
+- `NEAR_BOTTOM_PX = ROW_HEIGHT * OVERSCAN * 2` keeps the trigger threshold equivalent to the old `lastItem.index >= rows.length - OVERSCAN * 2` rule (20 rows * 36 px = 720 px).
+- `pendingFetchRef.current = true` is set BEFORE `onFetchNextPage()` so a synchronous re-entry can't slip through.
+- `passive: true` on the listener is performance-critical on large lists.
+
+### Step 4: Add an effect that clears `pendingFetchRef` when a fetch resolves
+
+Immediately after the effect from Step 3, add:
+
+```ts
+useEffect(() => {
+  if (!isFetchingNextPage) {
+    // react-query's fetch we triggered has resolved (data committed +
+    // isFetchingNextPage back to false). Release the pending gate.
+    pendingFetchRef.current = false;
+  }
+}, [isFetchingNextPage]);
+```
+
+This is the counterpart to Step 3's `pendingFetchRef.current = true`. The flag lifecycle:
+- `false` initially
+- set `true` synchronously just before `onFetchNextPage()`
+- set back to `false` as soon as `isFetchingNextPage` observed goes back to `false`
+
+Between those, no new dispatch is allowed.
+
+### Step 5: Keep the existing reset effect
+
+The effect at roughly lines 132-140 that resets `lastTriggeredRowsLenRef` to 0 when `rows.length` drops (view/filter/sort switch) must stay as-is. Do NOT delete it.
+
+### Step 6: Build
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+### Step 7: Commit
+
+```bash
+git add apps/client/src/features/base/components/grid/grid-container.tsx
+git commit -m "fix(base): drive pagination from scroll events with in-flight gate to kill dispatch loop"
+```
+
+---
+
+## Task 2: USER smoke test
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off.
+
+On the 10K base (should also work on 100K):
+
+- [ ] **Rapid continuous scroll to bottom.**
+  1. DevTools → Network → filter to `Fetch/XHR` → clear.
+  2. Scroll the scrollbar smoothly from top to bottom of the 10K base, no pauses.
+  3. Expected: roughly one `POST /bases/rows` per page (~100 total for 10K rows / 100 per page). NO "n requests in flight with only k loaded" state — completed count should track initiated count closely.
+
+- [ ] **Idle at bottom for 30 s.**
+  1. After reaching the bottom, wait.
+  2. Zero additional requests fire.
+
+- [ ] **Scroll up and back down.**
+  1. Scroll up to row 5000, then back to bottom.
+  2. No refetch of already-cached pages; only new pages (if any remain) fire.
+
+- [ ] **Sort change mid-scroll.**
+  1. While at row 5000, change the sort from Title-asc to Title-desc.
+  2. Pagination resets cleanly. Fetches the first page of the new sort order; scrolling continues to fetch normally.
+
+- [ ] **Filter that narrows to few hundred rows.**
+  1. Apply a filter producing ~200 matches.
+  2. Scroll to bottom. Exactly ~2 fetches (first page was already loaded + next one). Stops cleanly.
+
+- [ ] **Regression: unsorted base.**
+  1. Remove sort/filter. Scroll through. Fetches still fire correctly.
+
+- [ ] **Regression: create row at top of scroll.**
+  1. Scroll to top, add a new row. It appears. No extra pagination fires.
+
+If any step shows over-dispatch (initiated » loaded) or misses a page, report which with approximate counts.
+
+---
+
+## Out of scope
+
+- Swapping to an `IntersectionObserver` sentinel. Scroll-event + debounce achieves the same dedup without the complexity of maintaining a sentinel element inside a virtualized grid.
+- Measuring real row heights via `measureElement`. Unrelated to the dispatch loop; useful later for pixel-perfect scrolling.
+- A visible "loading more…" indicator during fetch. UX only.
diff --git a/docs/superpowers/plans/2026-04-19-infinite-scroll-loop-fix.md b/docs/superpowers/plans/2026-04-19-infinite-scroll-loop-fix.md
new file mode 100644
index 000000000..0bed87756
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-19-infinite-scroll-loop-fix.md
@@ -0,0 +1,189 @@
+# Infinite Scroll Fetch Loop Fix Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Stop `fetchNextPage` from firing in a tight re-render loop when the user is near the bottom of a large sorted base — currently produces 900+ redundant page fetches and only stops when the user scrolls back up.
+
+**Architecture:** The current trigger is a `useEffect` whose dependency list includes `virtualItems` (a fresh array from `virtualizer.getVirtualItems()` on every render). The effect re-runs on every render, and once the "near bottom" condition is satisfied it re-fires until the virtualizer's computed visible range moves away from the end. Fix: gate the trigger with a ref that records the `rows.length` at which we last fetched — guarantees at most one fetch per new page of data until the user actually scrolls further down.
+
+**Tech Stack:** React 18, `@tanstack/react-virtual`, `@tanstack/react-query` v5 `useInfiniteQuery`.
+
+---
+
+## Background
+
+Screenshot from the field shows the Network panel accumulating `POST /bases/rows` requests — roughly 1 request per ~40 ms — for the 10K-row seed base while a sort is active. Status stays at "50 / 971 requests" and climbing. The loop ends only when the user scrolls back up.
+
+### Why the loop happens
+
+Current trigger at [grid-container.tsx:114-121](apps/client/src/features/base/components/grid/grid-container.tsx:114):
+
+```ts
+useEffect(() => {
+  if (!hasNextPage || isFetchingNextPage || !onFetchNextPage) return;
+  const lastItem = virtualItems[virtualItems.length - 1];
+  if (!lastItem) return;
+  if (lastItem.index >= rows.length - OVERSCAN * 2) {
+    onFetchNextPage();
+  }
+}, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
+```
+
+Three compounding issues:
+
+1. **`virtualItems` is a fresh array on every render.** `virtualizer.getVirtualItems()` returns a newly-constructed array each call, so React sees a changed dep every render. The effect executes on every render.
+
+2. **After a fetch resolves, rows grow but `lastItem.index` can still satisfy the "near bottom" threshold** — particularly when the user was scrolled all the way to the bottom. The virtualizer preserves `scrollTop`, so the previously-rendered last row is now near the middle-end of the new (larger) virtual list, and its index is right inside the `rows.length - OVERSCAN * 2` window.
+
+3. **Heights are estimated via `estimateSize: () => 36`.** When `.cell`'s actual rendered height exceeds 36 (min-height only), the virtualizer re-measures, which shifts the reported `virtualItems` by a few indices each render — enough to keep `lastItem.index` hovering inside the trigger zone indefinitely.
+
+So on each render: `virtualItems` has new identity → effect runs → `isFetchingNextPage` just transitioned to `false` after the previous page's commit → condition still holds → fire again. The loop can only break when the user scrolls far enough up that `lastItem.index < rows.length - OVERSCAN * 2` on the next render.
+
+### The fix shape
+
+Add a ref `lastTriggeredRowsLenRef` that records the `rows.length` value at which we last fired `onFetchNextPage`. The trigger is allowed only when `rows.length > lastTriggeredRowsLenRef.current` — i.e., the previous fetch has committed new rows, AND we haven't yet fired against this new length. When a page arrives, `rows.length` grows, the guard permits one fire, we update the ref, and subsequent re-renders at the same `rows.length` are no-ops.
+
+This pattern is standard for effect-based infinite scroll and is exactly what's missing here.
+
+---
+
+## File Structure
+
+**Modified:**
+- `apps/client/src/features/base/components/grid/grid-container.tsx` — one ref + one guard line added to the existing effect.
+
+No new files, no new deps, nothing server-side.
+
+---
+
+## Task 1: Guard the fetch trigger against repeat fires at the same rows.length
+
+**File:** `apps/client/src/features/base/components/grid/grid-container.tsx`
+
+- [ ] **Step 1: Add `useRef` to the existing react import**
+
+The file currently imports `{ useCallback, useEffect, useMemo, useRef, useState }` — confirm `useRef` is already present (it almost certainly is, given `scrollRef` exists). If not, add it.
+
+- [ ] **Step 2: Declare the ref next to the other refs inside `GridContainer`**
+
+Find where `scrollRef` is declared near the top of the component. Add immediately after it:
+
+```ts
+// Records the `rows.length` at which we last triggered a page fetch.
+// The trigger effect re-runs on every render (its `virtualItems` dep
+// has a new identity each call) and can't rely on `isFetchingNextPage`
+// alone: once a page commits, `isFetchingNextPage` flips to false for
+// one render, the "near bottom" condition still holds because the
+// virtualizer anchors on the old scroll position, and we'd fire again.
+// Gating on `rows.length` guarantees at most one fire per new page.
+const lastTriggeredRowsLenRef = useRef(0);
+```
+
+- [ ] **Step 3: Add the guard to the trigger effect**
+
+Replace the existing effect block at roughly lines 114-121:
+
+Before:
+```ts
+useEffect(() => {
+  if (!hasNextPage || isFetchingNextPage || !onFetchNextPage) return;
+  const lastItem = virtualItems[virtualItems.length - 1];
+  if (!lastItem) return;
+  if (lastItem.index >= rows.length - OVERSCAN * 2) {
+    onFetchNextPage();
+  }
+}, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
+```
+
+After:
+```ts
+useEffect(() => {
+  if (!hasNextPage || isFetchingNextPage || !onFetchNextPage) return;
+  const lastItem = virtualItems[virtualItems.length - 1];
+  if (!lastItem) return;
+  if (lastItem.index < rows.length - OVERSCAN * 2) return;
+  if (rows.length <= lastTriggeredRowsLenRef.current) return;
+  lastTriggeredRowsLenRef.current = rows.length;
+  onFetchNextPage();
+}, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
+```
+
+Why `<=` and not `<`: after a fire, the ref holds the pre-fetch `rows.length`. When the page commits, `rows.length` grows, so `rows.length > ref` and the next fire is allowed (exactly once, since the ref then captures the new length).
+
+- [ ] **Step 4: Reset the ref when the row set resets (new base / view / sort / filter)**
+
+Different query-key means `rowsData` is discarded and pagination starts over from page 1. We need to reset our guard too, or it'll block the first fetch of the next query.
+
+Find the existing effect (around line 62 in the parent `BaseTable`, or an equivalent in `GridContainer`) that reacts to `baseId` / activeView id changing, OR use the infinite query's data being discarded. In `GridContainer`, the `rows` prop comes in fresh when the parent re-runs the infinite query. When `rows.length` becomes `0` (reset) OR becomes *smaller* than what we'd last seen, the ref must reset. Add this effect AFTER the trigger effect from Step 3:
+
+```ts
+useEffect(() => {
+  // When the underlying row set shrinks (filter changed, sort toggled,
+  // view switched) or resets to zero, we're on a fresh pagination
+  // sequence — un-gate the trigger so the first page triggers a
+  // potential next fetch correctly.
+  if (rows.length === 0 || rows.length < lastTriggeredRowsLenRef.current) {
+    lastTriggeredRowsLenRef.current = 0;
+  }
+}, [rows.length]);
+```
+
+- [ ] **Step 5: Build**
+
+```bash
+pnpm nx run client:build
+```
+
+Expected: success.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/client/src/features/base/components/grid/grid-container.tsx
+git commit -m "fix(base): stop infinite fetch loop when sorted list scrolled to bottom"
+```
+
+---
+
+## Task 2: USER smoke test
+
+> ⚠️ **Do not run `pnpm dev` as an agent.** Hand off.
+
+On the 10K seed base:
+
+- [ ] **Sorted scroll to bottom, count requests.**
+  1. Open the 10K base. Apply sort by Title ascending.
+  2. Open DevTools → Network → filter to `Fetch/XHR`.
+  3. Clear the Network log.
+  4. Scroll to the very bottom using the scrollbar.
+  5. Count the `bases/rows` requests. Expected: roughly 10K / 100 = **~100**, not 900+. It's fine if it's slightly over 100 due to pre-fetch, but it should cleanly stop within a few seconds of reaching the bottom.
+
+- [ ] **Dwell at the bottom without scrolling.**
+  1. Stay at the bottom for 10 seconds.
+  2. No additional `bases/rows` requests should fire. (Before the fix: would be dozens per second.)
+
+- [ ] **Scroll back up, then back down.**
+  1. Scroll to top. Verify sort order is still correct (the earlier fix for client-side position sort should still hold).
+  2. Scroll back to bottom. Should not refetch already-cached pages.
+
+- [ ] **Change the sort.**
+  1. Remove the current sort and add a different one.
+  2. Query resets. Pagination restarts from page 1. No lingering loop.
+
+- [ ] **Unsorted base (regression).**
+  1. Remove all sorts.
+  2. Scroll through. Fetching still works and stops correctly.
+
+- [ ] **Filter applied.**
+  1. Add a filter that returns ~2,000 matches.
+  2. Scroll. Should fetch ~20 pages and stop cleanly.
+
+If any step misbehaves — especially if requests still loop — capture the Network count and which filter/sort was active, and report back.
+
+---
+
+## Out of scope
+
+- Switching from the effect-based trigger to an `IntersectionObserver` sentinel. Cleaner pattern but larger diff; the ref guard is the surgical fix for the reported bug.
+- Making the virtualizer measure actual row heights via `measureElement` (would remove one of the three compounding causes). Worth it later; not required to fix the loop.
+- Showing a visible "loading more…" indicator at the bottom during fetch. Orthogonal UX improvement.
diff --git a/docs/superpowers/specs/2026-04-18-base-row-selection-design.md b/docs/superpowers/specs/2026-04-18-base-row-selection-design.md
new file mode 100644
index 000000000..9866de15d
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-18-base-row-selection-design.md
@@ -0,0 +1,311 @@
+# Base Row Selection & Bulk Delete — Design Spec
+
+**Date:** 2026-04-18
+**Status:** Approved
+**Feature area:** `apps/client/src/features/base`, `apps/server/src/core/base`
+
+## Goal
+
+Let users select multiple rows in a base table via checkboxes and delete them in one action. The UI must feel native to the existing grid — checkbox affordance lives in the row-number column, a floating action bar handles the bulk action, and a new batch-delete endpoint avoids N round-trips.
+
+## Non-goals
+
+- Undo of deleted rows. Server still soft-deletes, but no UI restore in v1.
+- Select-all-across-pages (only select-all-loaded in v1).
+- Right-click row context menu.
+- Bulk actions other than delete (no bulk edit, move, duplicate).
+- Confirmation modals before delete (a post-delete toast is sufficient).
+
+## UX design
+
+### Row-number cell (selection affordance)
+
+| State | Display |
+|---|---|
+| Default | Row index (`1`, `2`, …) — current behavior |
+| Hover on row | Index hides; drag-handle grip icon + checkbox appear side by side |
+| Row selected | Checkbox stays visible (checked); drag handle hidden; index hidden |
+
+- Drag-handle and checkbox are distinct DOM regions. `onDragStart` stays only on the drag-handle element. Clicking the checkbox does not start a drag.
+- Checkbox cell width stays at `ROW_NUMBER_COLUMN_WIDTH` (50px) — no layout shift.
+
+### Header row-number cell (select-all toggle)
+
+| State | Display |
+|---|---|
+| Default | `#` — current behavior |
+| Header hover OR ≥1 row selected | Tri-state checkbox: unchecked / indeterminate / checked |
+
+- Unchecked → checked: select all currently-loaded rows.
+- Checked or indeterminate → unchecked: clear selection.
+- Tooltip on hover: "Select all loaded rows".
+
+### Selection interactions
+
+- **Click checkbox** — toggle one row's selection.
+- **Shift+click checkbox** — range-select from last toggled row index to this row index, within loaded rows. Uses the rendered row order (post-sort, post-filter).
+- **Esc** (grid focused, not editing a cell) — clear selection.
+- **Delete / Backspace** (grid focused, not editing a cell, ≥1 selected) — trigger bulk delete.
+- Selection persists across scroll / virtualization.
+- Selection is cleared on: `baseId` change, `activeViewId` change, active filter change, active sorts change.
+- Selection is pruned when incoming realtime `base:row:deleted` or `base:rows:deleted` events remove a selected id.
+
+### Floating action bar
+
+- Renders when `selectionCount > 0`.
+- Position: `absolute`, centered horizontally near the bottom of the grid wrapper, above "Add row", z-indexed above rows but below any portalled menus.
+- Content (left → right): `{N} selected` · Delete button (red, `IconTrash`) · Clear button (`IconX`).
+- Styling: Mantine `Paper` with `withBorder`, rounded, drop shadow; slide-up+fade transition (use `Transition` from Mantine with `mount="slide-up"`).
+- On Delete click: fire `useDeleteRowsMutation`, clear selection, show Mantine notification `"{N} rows deleted"`.
+- On Clear click: clear selection.
+
+## Client architecture
+
+### New state
+
+**`apps/client/src/features/base/atoms/base-atoms.ts`**
+
+```ts
+export const selectedRowIdsAtom = atom<Set<string>>(new Set());
+export const lastToggledRowIndexAtom = atom<number | null>(null);
+```
+
+`lastToggledRowIndexAtom` supports shift-click range selection. Stored as a rendered-row index (not a row id) because selection ranges follow visual order.
+
+### New hook
+
+**`apps/client/src/features/base/hooks/use-row-selection.ts`**
+
+Exports `useRowSelection()` returning:
+
+```ts
+{
+  selectedIds: Set<string>;
+  selectionCount: number;
+  isSelected: (rowId: string) => boolean;
+  toggle: (rowId: string, opts: { shiftKey: boolean; rowIndex: number; orderedRowIds: string[] }) => void;
+  toggleAll: (loadedRowIds: string[]) => void;
+  clear: () => void;
+  removeIds: (rowIds: string[]) => void; // for realtime pruning
+}
+```
+
+- `toggle` with `shiftKey=true` and a valid `lastToggledIndex` selects (or deselects, based on the anchor's current state) the range `[min(lastIdx, rowIndex), max(lastIdx, rowIndex)]` among `orderedRowIds`.
+- `toggleAll`: if every loaded id is already selected, clears; otherwise adds every loaded id to the set.
+
+### New components
+
+**`apps/client/src/features/base/components/grid/row-number-cell.tsx`** — extracted body-cell variant that renders the index / drag-handle+checkbox based on hover and selection state. Moves the `__row_number` branch out of `grid-cell.tsx` (which has grown long). Receives `rowId`, `rowIndex`, `orderedRowIds`, `rowDragProps`.
+
+**`apps/client/src/features/base/components/grid/row-number-header-cell.tsx`** — tri-state checkbox for select-all-loaded, rendered from the header's `__row_number` branch.
+
+**`apps/client/src/features/base/components/grid/selection-action-bar.tsx`** — floating bar. Takes `baseId`. Reads `selectedRowIdsAtom`. Owns its own mutation call + notification.
+
+### New query hook
+
+**`apps/client/src/features/base/queries/base-row-query.ts`** — add:
+
+```ts
+export function useDeleteRowsMutation()
+// input: { baseId: string; rowIds: string[] }
+// behavior: optimistic removal from all ["base-rows", baseId, ...] infinite-query pages;
+// on error rollback snapshots + notification; registers one `requestId` via newRequestId().
+```
+
+Follows the exact pattern of the existing `useDeleteRowMutation`, generalized to filter out an array of ids in one pass. Existing `useDeleteRowMutation` stays unchanged.
+
+### Modified files
+
+- **`grid-cell.tsx`** — replace the inline `__row_number` branch with `<RowNumberCell rowId rowIndex orderedRowIds rowDragProps />`. No other logic changes.
+- **`grid-header.tsx` / `grid-header-cell.tsx`** — replace the inline `__row_number` header branch with `<RowNumberHeaderCell />`.
+- **`grid-container.tsx`** —
+  - Pass `orderedRowIds` (from `table.getRowModel().rows`) down to rows so checkbox clicks can compute ranges.
+  - Add keyboard handler on the scroll container: Delete/Backspace triggers bulk delete (when selection non-empty + not editing); Esc clears selection.
+  - Mount `<SelectionActionBar baseId={baseId} />` inside the grid wrapper.
+- **`base-table.tsx`** — add `useEffect` that clears `selectedRowIdsAtom` when `baseId`, `activeView?.id`, `activeFilter`, or `activeSorts` changes.
+- **`use-base-socket.ts`** — add handler for new `base:rows:deleted` operation that (a) removes all `rowIds` from the base-rows cache in a single pass, and (b) prunes them from `selectedRowIdsAtom`. Also prune selection in the existing `base:row:deleted` handler.
+
+### Styling
+
+**`apps/client/src/features/base/styles/grid.module.css`** — add:
+- `.rowNumberCellContent` — flex layout for grip + checkbox
+- `.rowNumberCheckbox` hover-reveal rules (show when `.row:hover` or `.row.rowSelected`)
+- `.rowSelected` row modifier — subtle background tint (`var(--mantine-color-blue-0)` light / `var(--mantine-color-dark-6)` dark)
+- `.selectionActionBar` — absolute positioning, shadow, transition
+
+## Server architecture
+
+### New DTO
+
+**`apps/server/src/core/base/dto/update-row.dto.ts`** — append:
+
+```ts
+export class DeleteRowsDto {
+  @IsUUID()
+  baseId: string;
+
+  @IsArray()
+  @ArrayMinSize(1)
+  @ArrayMaxSize(500)
+  @IsUUID('all', { each: true })
+  rowIds: string[];
+
+  @IsOptional()
+  @IsString()
+  requestId?: string;
+}
+```
+
+### New event
+
+**`apps/server/src/common/events/event.contants.ts`** — append `BASE_ROWS_DELETED = 'base.rows.deleted'`.
+
+**`apps/server/src/core/base/events/base-events.ts`** — add:
+
+```ts
+export type BaseRowsDeletedEvent = {
+  baseId: string;
+  workspaceId: string;
+  actorId: string | null;
+  requestId: string | null;
+  rowIds: string[];
+};
+```
+
+### New controller endpoint
+
+**`apps/server/src/core/base/controllers/base-row.controller.ts`** — append after existing `delete`:
+
+```ts
+@HttpCode(HttpStatus.OK)
+@Post('delete-many')
+async deleteMany(
+  @Body() dto: DeleteRowsDto,
+  @AuthUser() user: User,
+  @AuthWorkspace() workspace: Workspace,
+) {
+  const base = await this.baseRepo.findById(dto.baseId);
+  if (!base) throw new NotFoundException('Base not found');
+  const ability = await this.spaceAbility.createForUser(user, base.spaceId);
+  if (ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Base)) {
+    throw new ForbiddenException();
+  }
+  await this.baseRowService.deleteMany(dto, workspace.id, user.id);
+}
+```
+
+### New service method
+
+**`apps/server/src/core/base/services/base-row.service.ts`**:
+
+```ts
+async deleteMany(dto: DeleteRowsDto, workspaceId: string, userId?: string) {
+  const rows = await this.baseRowRepo.findByIds(dto.rowIds, { workspaceId });
+  if (rows.length !== dto.rowIds.length) {
+    throw new NotFoundException('One or more rows not found');
+  }
+  if (rows.some((r) => r.baseId !== dto.baseId)) {
+    throw new NotFoundException('Row does not belong to base');
+  }
+
+  await this.baseRowRepo.softDeleteMany(dto.rowIds, {
+    baseId: dto.baseId,
+    workspaceId,
+  });
+
+  const event: BaseRowsDeletedEvent = {
+    baseId: dto.baseId,
+    workspaceId,
+    actorId: userId ?? null,
+    requestId: dto.requestId ?? null,
+    rowIds: dto.rowIds,
+  };
+  this.eventEmitter.emit(EventName.BASE_ROWS_DELETED, event);
+}
+```
+
+### Repository additions
+
+**`apps/server/src/core/base/repositories/base-row.repository.ts`** (or equivalent) — add:
+
+- `findByIds(ids: string[], scope: { workspaceId: string }): Promise<BaseRow[]>` — single `WHERE id = ANY($1) AND workspace_id = $2 AND deleted_at IS NULL`.
+- `softDeleteMany(ids: string[], scope: { baseId: string; workspaceId: string }): Promise<void>` — single `UPDATE base_rows SET deleted_at = NOW() WHERE id = ANY($1) AND base_id = $2 AND workspace_id = $3`.
+
+Both follow the Kysely patterns of existing `findById` / `softDelete`.
+
+### Realtime consumer
+
+**`apps/server/src/core/base/realtime/base-ws-consumers.ts`** — append:
+
+```ts
+@OnEvent(EventName.BASE_ROWS_DELETED)
+onRowsDeleted(e: BaseRowsDeletedEvent) {
+  this.ws.emitToBase(e.baseId, {
+    operation: 'base:rows:deleted',
+    baseId: e.baseId,
+    rowIds: e.rowIds,
+    actorId: e.actorId ?? null,
+    requestId: e.requestId ?? null,
+  });
+}
+```
+
+Existing single-delete consumer/event is unchanged.
+
+### Service layer registration
+
+- Wire `DeleteRowsDto` into the controller imports.
+- Register new endpoint in the service's public method list; ensure the new event name is exported alongside existing ones.
+- No CASL changes needed — same `SpaceCaslAction.Edit` on `SpaceCaslSubject.Base` as existing `delete`.
+
+## Client-service contract
+
+**`apps/client/src/features/base/services/base-service.ts`** — append:
+
+```ts
+export async function deleteRows(data: { baseId: string; rowIds: string[]; requestId?: string }): Promise<void> {
+  await api.post("/bases/rows/delete-many", data);
+}
+```
+
+**`apps/client/src/features/base/types/base.types.ts`** — append `DeleteRowsInput`.
+
+## Edge cases
+
+| Case | Handling |
+|---|---|
+| Selection includes a row that another client deletes | Socket handler prunes from `selectedRowIdsAtom` |
+| User selects >500 rows | Client chunks into sequential 500-id batches, one `requestId` per batch (all suppressed by socket echo filter). Fire-and-forget: toast shows once after all chunks resolve; no mid-progress UI in v1. |
+| Header select-all clicked with 0 loaded rows | `<RowNumberHeaderCell />` renders nothing (no checkbox, no `#`) when `loadedRowIds.length === 0` to avoid a no-op control; `#` still shows if rows exist but none selected |
+| "Grid focused" for Delete/Backspace/Esc | Defined as: the scroll container (`scrollRef.current`) contains `document.activeElement`. Keyboard handler attaches to the container; keys only fire when the event target is inside it. |
+| Filter / sort change with rows selected | Selection is cleared — deliberate v1 choice (simple mental model). Users who want to filter-then-bulk-delete must filter first, then select. Acceptable tradeoff given select-all-loaded scope. |
+| Delete API error mid-way (optimistic) | Rollback snapshots restore rows; notification surfaces error; selection remains |
+| Delete key pressed while editing a cell | Guard: no-op when `editingCellAtom != null` |
+| Clicking checkbox inside a row that's mid-drag | Drag handle and checkbox are separate elements; click on checkbox doesn't propagate drag |
+| View / filter / sort changes with rows selected | Selection cleared via effect in `base-table.tsx` |
+| Active view changes during delete request | Selection cleared; optimistic update still applies to the previous query key, server completes fine |
+
+## Testing
+
+### Server integration tests
+
+File: `apps/server/src/core/base/services/base-row.service.spec.ts` (or equivalent integration test location following repo convention)
+
+- `deleteMany` happy path: creates 3 rows, deletes all 3, asserts soft-delete + event emission with correct payload.
+- Wrong-base rejected: 2 rows in base A + 1 in base B, `deleteMany` with all 3 for base A → `NotFoundException`, no rows deleted.
+- Missing row → 404.
+- Forbidden user (viewer) → `ForbiddenException` from controller.
+- 500-row cap exceeded (DTO validation) → 400.
+
+### Client tests
+
+- `use-row-selection.test.ts` — toggle, shift-range (forward and reverse), toggleAll (mixed → all; all → none), clear, removeIds.
+- `base-row-query.test.ts` (extend existing if present) — `useDeleteRowsMutation` optimistic removal + error rollback over multiple pages.
+
+Component-level behavior (floating bar, hover checkbox, keyboard) verified manually.
+
+## Rollout
+
+- Single-commit-ready feature. No feature flag — endpoint is additive, UI is gated by selection state being non-empty.
+- No database migrations.
+- No API-breaking changes; existing single-row delete remains.
diff --git a/packages/base-formula/.gitignore b/packages/base-formula/.gitignore
new file mode 100644
index 000000000..81478331f
--- /dev/null
+++ b/packages/base-formula/.gitignore
@@ -0,0 +1,2 @@
+dist/
+tsconfig.tsbuildinfo
diff --git a/packages/base-formula/bench/formula-bench.ts b/packages/base-formula/bench/formula-bench.ts
new file mode 100644
index 000000000..2d2d84a1e
--- /dev/null
+++ b/packages/base-formula/bench/formula-bench.ts
@@ -0,0 +1,329 @@
+import {
+  parseRaw,
+  resolve,
+  typecheck,
+  evaluate,
+  registry,
+  DEFAULT_MAX_DEPTH,
+} from "../src/index.server";
+import type {
+  FormulaAST,
+  EvalContext,
+  PropertyLookup,
+  Value,
+  FormulaResultType,
+} from "../src/index.server";
+
+// sample row: properties a..j (numbers), name (string)
+const NUM_PROPS = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
+const cells: Record<string, unknown> = {
+  prop_name: "widget",
+};
+NUM_PROPS.forEach((p, idx) => {
+  cells[`prop_${p}`] = (idx + 1) * 7.3 - idx; // arbitrary non-trivial floats
+});
+
+const nameToId = new Map<string, string>([
+  ["name", "prop_name"],
+  ...NUM_PROPS.map((p) => [p, `prop_${p}`] as [string, string]),
+]);
+
+const propertyTypes = new Map<string, FormulaResultType>([
+  ["prop_name", "string"],
+  ...NUM_PROPS.map(
+    (p) => [`prop_${p}`, "number"] as [string, FormulaResultType],
+  ),
+]);
+
+// Base (non-formula) property lookup. Nested-formula cases extend this.
+const baseProps = new Map<string, PropertyLookup>([
+  ["prop_name", { id: "prop_name", type: "string", typeOptions: {} }],
+  ...NUM_PROPS.map(
+    (p) =>
+      [`prop_${p}`, { id: `prop_${p}`, type: "number", typeOptions: {} }] as [
+        string,
+        PropertyLookup,
+      ],
+  ),
+]);
+
+function mkCtx(properties: ReadonlyMap<string, PropertyLookup>): EvalContext {
+  return {
+    registry,
+    properties,
+    depth: 0,
+    maxDepth: DEFAULT_MAX_DEPTH,
+    memo: new Map<string, Value>(),
+  };
+}
+
+//AST shape metrics
+function astStats(ast: FormulaAST): { nodes: number; depth: number } {
+  let nodes = 0;
+  const walk = (n: FormulaAST, d: number): number => {
+    nodes++;
+    let max = d;
+    const kids: FormulaAST[] = [];
+    switch (n.t) {
+      case "op":
+        kids.push(...n.args);
+        break;
+      case "and":
+      case "or":
+        kids.push(...n.args);
+        break;
+      case "call":
+        kids.push(...n.args);
+        break;
+      case "if":
+        kids.push(n.cond, n.then, n.else);
+        break;
+    }
+    for (const k of kids) max = Math.max(max, walk(k, d + 1));
+    return max;
+  };
+  const depth = walk(ast, 1);
+  return { nodes, depth };
+}
+
+// timing harness
+function timed(
+  fn: () => void,
+  targetMs = 600,
+): { opsPerSec: number; nsPerOp: number } {
+  // warmup ~150ms to let V8 JIT settle
+  const warmEnd = performance.now() + 150;
+  while (performance.now() < warmEnd) fn();
+
+  // measure: 5 samples, keep the fastest (least noise from GC/scheduler)
+  let bestNsPerOp = Infinity;
+  for (let s = 0; s < 5; s++) {
+    // calibrate batch so each sample ~ targetMs
+    let iters = 1024;
+    let elapsedMs = 0;
+    while (true) {
+      const t0 = process.hrtime.bigint();
+      for (let i = 0; i < iters; i++) fn();
+      const t1 = process.hrtime.bigint();
+      elapsedMs = Number(t1 - t0) / 1e6;
+      if (elapsedMs >= targetMs) break;
+      iters = Math.ceil(
+        iters * Math.max(2, targetMs / Math.max(elapsedMs, 0.01)),
+      );
+    }
+    const nsPerOp = (elapsedMs * 1e6) / iters;
+    bestNsPerOp = Math.min(bestNsPerOp, nsPerOp);
+  }
+  return { opsPerSec: 1e9 / bestNsPerOp, nsPerOp: bestNsPerOp };
+}
+
+// formula corpus
+type Case = { tier: string; name: string; src: string };
+
+function buildArithChain(n: number): string {
+  // ((((a + b) * c) - d) ... ) cycling through props/ops
+  const ops = ["+", "*", "-"];
+  let expr = 'prop("a")';
+  for (let i = 0; i < n; i++) {
+    const p = NUM_PROPS[(i + 1) % NUM_PROPS.length];
+    const op = ops[i % ops.length];
+    expr = `(${expr} ${op} prop("${p}"))`;
+  }
+  return expr;
+}
+
+function buildIfChain(tiers: number): string {
+  // if(a>t1, "1", if(a>t2, "2", ... "fallback"))
+  let expr = '"fallback"';
+  for (let i = tiers; i >= 1; i--) {
+    expr = `if(prop("a") > ${i * 5}, "${i}", ${expr})`;
+  }
+  return expr;
+}
+
+function buildBalancedAddTree(depth: number): string {
+  // add(add(.., ..), add(.., ..)) = full binary tree of `add` calls
+  const leaf = () =>
+    `prop("${NUM_PROPS[Math.floor(Math.random() * NUM_PROPS.length)]}")`;
+  const build = (d: number): string =>
+    d === 0 ? leaf() : `add(${build(d - 1)}, ${build(d - 1)})`;
+  return build(depth);
+}
+
+const cases: Case[] = [
+  // BASIC
+  { tier: "basic", name: "literal add", src: "1 + 2" },
+  { tier: "basic", name: "two-prop add", src: 'prop("a") + prop("b")' },
+  { tier: "basic", name: "comparison", src: 'prop("a") > 10' },
+  { tier: "basic", name: "neg + mul", src: '-prop("a") * 2' },
+
+  // INTERMEDIATE
+  {
+    tier: "intermediate",
+    name: "round(mul)",
+    src: 'round(prop("a") * 1.5, 2)',
+  },
+  {
+    tier: "intermediate",
+    name: "if/then/else",
+    src: 'if(prop("a") > prop("b"), "hi", "lo")',
+  },
+  {
+    tier: "intermediate",
+    name: "string concat",
+    src: 'concat(upper(prop("name")), "-", toString(prop("a")))',
+  },
+  {
+    tier: "intermediate",
+    name: "bool and/or",
+    src: 'and(prop("a") > 0, or(prop("b") < 100, prop("c") == 0))',
+  },
+
+  // COMPLEX
+  {
+    tier: "complex",
+    name: "hypotenuse",
+    src: 'sqrt(pow(prop("a"), 2) + pow(prop("b"), 2))',
+  },
+  {
+    tier: "complex",
+    name: "sum(10 props)",
+    src: `sum(${NUM_PROPS.map((p) => `prop("${p}")`).join(", ")})`,
+  },
+  {
+    tier: "complex",
+    name: "nested if (4-tier grade)",
+    src: 'if(prop("a") > 90, "A", if(prop("a") > 80, "B", if(prop("a") > 70, "C", "F")))',
+  },
+  {
+    tier: "complex",
+    name: "mixed math+string+logic",
+    src: 'if(and(prop("a") > 0, prop("b") > 0), concat("ok:", toString(round(prop("a") / prop("b"), 2))), "n/a")',
+  },
+
+  // DEEPLY NESTED
+  { tier: "deep", name: "arith chain x20", src: buildArithChain(20) },
+  { tier: "deep", name: "nested if x10 tiers", src: buildIfChain(10) },
+  { tier: "deep", name: "balanced fn tree d6", src: buildBalancedAddTree(6) },
+];
+
+// nested-formula (cross-property) case
+// prop_total (formula) -> prop_sub (formula) -> raw props. Exercises evalProp
+// recursion + per-row memoization, the multi-formula recompute hot path.
+function buildNestedFormulaCtx(): {
+  ast: FormulaAST;
+  ctx: EvalContext;
+  stats: { nodes: number; depth: number };
+} {
+  const subRaw = resolve(
+    parseRaw('round((prop("a") + prop("b") + prop("c")) / 3, 2)'),
+    nameToId,
+  ).ast;
+  const totalRaw = resolve(
+    parseRaw('prop("sub") * prop("d") + prop("e")'),
+    // @ts-ignore
+    new Map([...nameToId, ["sub", "prop_sub"]]),
+  ).ast;
+
+  const props = new Map<string, PropertyLookup>(baseProps);
+  props.set("prop_sub", {
+    id: "prop_sub",
+    type: "formula",
+    typeOptions: {
+      ast: subRaw,
+      source: "",
+      resultType: "number",
+      dependencies: [],
+      astVersion: 1,
+    },
+  });
+  return { ast: totalRaw, ctx: mkCtx(props), stats: astStats(totalRaw) };
+}
+
+// run
+const fmt = (n: number) =>
+  n >= 1e6
+    ? `${(n / 1e6).toFixed(2)}M`
+    : n >= 1e3
+      ? `${(n / 1e3).toFixed(1)}K`
+      : n.toFixed(0);
+
+console.log(`\nnode ${process.version} | base-formula engine benchmark\n`);
+console.log(
+  "tier".padEnd(13) +
+    "formula".padEnd(28) +
+    "nodes".padStart(6) +
+    "depth".padStart(6) +
+    "compile op/s".padStart(15) +
+    "eval op/s".padStart(13) +
+    "eval ns/op".padStart(13),
+);
+console.log("-".repeat(94));
+
+for (const c of cases) {
+  const raw = parseRaw(c.src);
+  const { ast } = resolve(raw, nameToId);
+  const stats = astStats(ast);
+  const ctx = mkCtx(baseProps);
+
+  const compile = timed(() => {
+    const r = resolve(parseRaw(c.src), nameToId);
+    typecheck(r.ast, propertyTypes, registry);
+  });
+  const ev = timed(() => {
+    ctx.memo.clear(); // fresh per "row" — matches production new Map() per row
+    evaluate(ast, cells, ctx);
+  });
+
+  console.log(
+    c.tier.padEnd(13) +
+      c.name.padEnd(28) +
+      String(stats.nodes).padStart(6) +
+      String(stats.depth).padStart(6) +
+      fmt(compile.opsPerSec).padStart(15) +
+      fmt(ev.opsPerSec).padStart(13) +
+      ev.nsPerOp.toFixed(0).padStart(13),
+  );
+}
+
+// nested cross-property formula
+{
+  const { ast, ctx, stats } = buildNestedFormulaCtx();
+  const ev = timed(() => {
+    ctx.memo.clear();
+    evaluate(ast, cells, ctx);
+  });
+  console.log(
+    "nested-prop".padEnd(13) +
+      "total->sub->raw".padEnd(28) +
+      String(stats.nodes).padStart(6) +
+      String(stats.depth).padStart(6) +
+      "-".padStart(15) +
+      fmt(ev.opsPerSec).padStart(13) +
+      ev.nsPerOp.toFixed(0).padStart(13),
+  );
+}
+
+// whole-table simulation: eval N rows for the complex grade formula
+console.log(
+  "\nwhole-table recompute simulation (mixed math+string+logic formula):",
+);
+const tableAst = resolve(
+  parseRaw(
+    'if(and(prop("a") > 0, prop("b") > 0), concat("ok:", toString(round(prop("a") / prop("b"), 2))), "n/a")',
+  ),
+  nameToId,
+).ast;
+for (const rows of [1_000, 10_000, 100_000]) {
+  const ctx = mkCtx(baseProps);
+  const t0 = process.hrtime.bigint();
+  for (let r = 0; r < rows; r++) {
+    ctx.memo.clear();
+    evaluate(tableAst, cells, ctx);
+  }
+  const ms = Number(process.hrtime.bigint() - t0) / 1e6;
+  console.log(
+    `  ${fmt(rows).padStart(6)} rows  ->  ${ms.toFixed(1)} ms   (${fmt((rows / ms) * 1000)} rows/sec)`,
+  );
+}
+console.log();
diff --git a/packages/base-formula/package.json b/packages/base-formula/package.json
new file mode 100644
index 000000000..aa5a6b0b8
--- /dev/null
+++ b/packages/base-formula/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@docmost/base-formula",
+  "homepage": "https://docmost.com",
+  "private": true,
+  "scripts": {
+    "build": "tsc --build",
+    "dev": "tsc --watch",
+    "bench": "tsx bench/formula-bench.ts"
+  },
+  "main": "dist/index.server.js",
+  "module": "./dist/index.server.js",
+  "exports": {
+    "./client": {
+      "types": "./dist/index.client.d.ts",
+      "default": "./src/index.client.ts"
+    },
+    "./server": {
+      "types": "./dist/index.server.d.ts",
+      "default": "./dist/index.server.js"
+    },
+    ".": {
+      "types": "./dist/index.server.d.ts",
+      "default": "./dist/index.server.js"
+    }
+  },
+  "types": "dist/index.server.d.ts",
+  "dependencies": {}
+}
diff --git a/packages/base-formula/src/ast.ts b/packages/base-formula/src/ast.ts
new file mode 100644
index 000000000..cff54118b
--- /dev/null
+++ b/packages/base-formula/src/ast.ts
@@ -0,0 +1,33 @@
+export type OpCode =
+  | "+" | "-" | "*" | "/" | "%"
+  | "==" | "!=" | ">" | "<" | ">=" | "<="
+  | "neg" | "not";
+
+export type FormulaAST =
+  | { t: "num"; v: number }
+  | { t: "str"; v: string }
+  | { t: "bool"; v: boolean }
+  | { t: "null" }
+  | { t: "prop"; id: string }
+  | { t: "op"; op: OpCode; args: FormulaAST[] }
+  | { t: "if"; cond: FormulaAST; then: FormulaAST; else: FormulaAST }
+  | { t: "and"; args: FormulaAST[] }
+  | { t: "or"; args: FormulaAST[] }
+  | { t: "call"; fn: string; args: FormulaAST[] };
+
+/*
+ * Raw AST: what the parser produces before resolving property names to IDs.
+ * Only the `propName` variant differs from FormulaAST — every other node is
+ * reused directly. We deliberately keep this type-level to avoid duplicating
+ * the tree shape.
+ */
+export type RawFormulaAST =
+  | Exclude<FormulaAST, { t: "prop" }>
+  | { t: "propName"; name: string }
+  | { t: "op"; op: OpCode; args: RawFormulaAST[] }
+  | { t: "if"; cond: RawFormulaAST; then: RawFormulaAST; else: RawFormulaAST }
+  | { t: "and"; args: RawFormulaAST[] }
+  | { t: "or"; args: RawFormulaAST[] }
+  | { t: "call"; fn: string; args: RawFormulaAST[] };
+
+export const AST_VERSION = 1 as const;
diff --git a/packages/base-formula/src/error.ts b/packages/base-formula/src/error.ts
new file mode 100644
index 000000000..1c50d277a
--- /dev/null
+++ b/packages/base-formula/src/error.ts
@@ -0,0 +1,41 @@
+import type { ErrorCell, ErrorCode } from "./types";
+
+export type ParseErrorCode =
+  | "UNEXPECTED_TOKEN"
+  | "UNEXPECTED_EOF"
+  | "UNKNOWN_PROPERTY"
+  | "UNKNOWN_FUNCTION"
+  | "ARITY_MISMATCH"
+  | "TYPE_MISMATCH"
+  | "CYCLE"
+  | "INPUT_TOO_LONG"
+  | "DEPTH_EXCEEDED";
+
+export type ParseError = {
+  code: ParseErrorCode;
+  message: string;
+  span: { start: number; end: number };
+  hint?: string;
+};
+
+export class FormulaParseError extends Error {
+  readonly errors: ParseError[];
+  constructor(errors: ParseError[]) {
+    super(errors.map((e) => `${e.code}: ${e.message}`).join("; "));
+    this.errors = errors;
+    this.name = "FormulaParseError";
+  }
+}
+
+export function makeErrorCell(code: ErrorCode, msg: string): ErrorCell {
+  return { __err: code, msg, v: 1 };
+}
+
+export function isErrorCell(v: unknown): v is ErrorCell {
+  return (
+    typeof v === "object" &&
+    v !== null &&
+    "__err" in v &&
+    typeof (v as { __err: unknown }).__err === "string"
+  );
+}
diff --git a/packages/base-formula/src/eval.ts b/packages/base-formula/src/eval.ts
new file mode 100644
index 000000000..b78c54938
--- /dev/null
+++ b/packages/base-formula/src/eval.ts
@@ -0,0 +1,125 @@
+import { makeErrorCell, isErrorCell } from "./error";
+import { MAX_EVAL_DEPTH } from "./types";
+import type { FormulaAST, OpCode } from "./ast";
+import type { Value, EvalContext } from "./types";
+
+export function evaluate(
+  ast: FormulaAST,
+  row: Record<string, unknown>,
+  ctx: EvalContext,
+  astDepth = 0,
+): Value {
+  // astDepth bounds AST tree-walk recursion (guards a hand-crafted deep
+  // typeOptions.ast); ctx.depth separately bounds nested-formula hops.
+  const depth = astDepth + 1;
+  if (depth > MAX_EVAL_DEPTH) {
+    return makeErrorCell("DEPTH_EXCEEDED", `formula too deeply nested (max ${MAX_EVAL_DEPTH})`);
+  }
+
+  switch (ast.t) {
+    case "num":  return ast.v;
+    case "str":  return ast.v;
+    case "bool": return ast.v;
+    case "null": return null;
+    case "prop": return evalProp(ast.id, row, ctx, depth);
+    case "op":   return evalOp(ast.op, ast.args, row, ctx, depth);
+    case "if": {
+      const c = evaluate(ast.cond, row, ctx, depth);
+      if (isErrorCell(c)) return c;
+      return evaluate(c === true ? ast.then : ast.else, row, ctx, depth);
+    }
+    case "and": {
+      const xs = ast.args;
+      for (let i = 0; i < xs.length; i++) {
+        const v = evaluate(xs[i], row, ctx, depth);
+        if (isErrorCell(v)) return v;
+        if (v === false) return false;
+        if (v == null) return null;
+      }
+      return true;
+    }
+    case "or": {
+      const xs = ast.args;
+      for (let i = 0; i < xs.length; i++) {
+        const v = evaluate(xs[i], row, ctx, depth);
+        if (isErrorCell(v)) return v;
+        if (v === true) return true;
+      }
+      return false;
+    }
+    case "call": {
+      const fn = ctx.registry.get(ast.fn.toLowerCase());
+      if (!fn) return makeErrorCell("MISSING_PROP", `unknown function ${ast.fn}`);
+      const xs = ast.args;
+      const args: Value[] = new Array(xs.length);
+      for (let i = 0; i < xs.length; i++) {
+        const v = evaluate(xs[i], row, ctx, depth);
+        if (isErrorCell(v)) return { ...v, __err: "DEPENDENCY_ERROR" };
+        args[i] = v;
+      }
+      try { return fn.eval(args, ctx); }
+      catch (e) { return makeErrorCell("TYPE_MISMATCH", (e as Error).message); }
+    }
+  }
+}
+
+function evalProp(id: string, row: Record<string, unknown>, ctx: EvalContext, astDepth: number): Value {
+  if (ctx.memo.has(id)) return ctx.memo.get(id)!;
+  const prop = ctx.properties.get(id);
+  if (!prop) return makeErrorCell("MISSING_PROP", `missing property ${id}`);
+  if (prop.type !== "formula") return normalize(row[id] ?? null);
+  // astDepth continues (not reset) across the nested-formula boundary.
+  if (ctx.depth >= ctx.maxDepth) return makeErrorCell("DEPTH_EXCEEDED", `max depth ${ctx.maxDepth}`);
+  const opts: any = prop.typeOptions;
+  const nested: EvalContext = { ...ctx, depth: ctx.depth + 1, memo: ctx.memo };
+  const v = evaluate(opts.ast, row, nested, astDepth);
+  ctx.memo.set(id, v);
+  return v;
+}
+
+function normalize(v: unknown): Value {
+  if (v === undefined) return null;
+  if (v === null) return null;
+  if (typeof v === "number" || typeof v === "string" || typeof v === "boolean") return v;
+  if (isErrorCell(v)) return v;
+  return null;
+}
+
+function evalOp(
+  op: OpCode,
+  args: FormulaAST[],
+  row: Record<string, unknown>,
+  ctx: EvalContext,
+  astDepth: number,
+): Value {
+  const a = evaluate(args[0], row, ctx, astDepth);
+  if (isErrorCell(a)) return { ...a, __err: "DEPENDENCY_ERROR" };
+  if (op === "neg") return a == null ? null : -Number(a);
+  if (op === "not") return a == null ? null : !Boolean(a);
+
+  const b = evaluate(args[1], row, ctx, astDepth);
+  if (isErrorCell(b)) return { ...b, __err: "DEPENDENCY_ERROR" };
+
+  switch (op as Exclude<OpCode, "neg" | "not">) {
+    case "+":
+      if (typeof a === "string" || typeof b === "string") return (a == null ? "" : String(a)) + (b == null ? "" : String(b));
+      if (a == null || b == null) return null;
+      return Number(a) + Number(b);
+    case "-": return a == null || b == null ? null : Number(a) - Number(b);
+    case "*": return a == null || b == null ? null : Number(a) * Number(b);
+    case "/":
+      if (a == null || b == null) return null;
+      if (Number(b) === 0) return makeErrorCell("DIV_BY_ZERO", "division by zero");
+      return Number(a) / Number(b);
+    case "%":
+      if (a == null || b == null) return null;
+      if (Number(b) === 0) return makeErrorCell("DIV_BY_ZERO", "modulo by zero");
+      return Number(a) % Number(b);
+    case "==": return a === b;
+    case "!=": return a !== b;
+    case ">":  return a != null && b != null && (a as any) > (b as any);
+    case "<":  return a != null && b != null && (a as any) < (b as any);
+    case ">=": return a != null && b != null && (a as any) >= (b as any);
+    case "<=": return a != null && b != null && (a as any) <= (b as any);
+  }
+}
diff --git a/packages/base-formula/src/format.ts b/packages/base-formula/src/format.ts
new file mode 100644
index 000000000..d9d93dbd2
--- /dev/null
+++ b/packages/base-formula/src/format.ts
@@ -0,0 +1,31 @@
+import type { FormulaAST, OpCode } from "./ast";
+
+const OP_STR: Partial<Record<OpCode, string>> = {
+  "+": " + ", "-": " - ", "*": " * ", "/": " / ", "%": " % ",
+  "==": " == ", "!=": " != ", ">": " > ", "<": " < ", ">=": " >= ", "<=": " <= ",
+};
+
+export function format(
+  ast: FormulaAST,
+  idToName: ReadonlyMap<string, string>,
+): string {
+  switch (ast.t) {
+    case "num":  return String(ast.v);
+    case "str":  return `"${ast.v.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+    case "bool": return ast.v ? "true" : "false";
+    case "null": return "null";
+    case "prop": return `prop("${idToName.get(ast.id) ?? ast.id}")`;
+    case "op":
+      if (ast.op === "neg") return `-${format(ast.args[0], idToName)}`;
+      if (ast.op === "not") return `not ${format(ast.args[0], idToName)}`;
+      return `(${format(ast.args[0], idToName)}${OP_STR[ast.op]}${format(ast.args[1], idToName)})`;
+    case "if":
+      return `if(${format(ast.cond, idToName)}, ${format(ast.then, idToName)}, ${format(ast.else, idToName)})`;
+    case "and":
+      return `(${ast.args.map((a) => format(a, idToName)).join(" and ")})`;
+    case "or":
+      return `(${ast.args.map((a) => format(a, idToName)).join(" or ")})`;
+    case "call":
+      return `${ast.fn}(${ast.args.map((a) => format(a, idToName)).join(", ")})`;
+  }
+}
diff --git a/packages/base-formula/src/functions/coercion.ts b/packages/base-formula/src/functions/coercion.ts
new file mode 100644
index 000000000..14f97f772
--- /dev/null
+++ b/packages/base-formula/src/functions/coercion.ts
@@ -0,0 +1,16 @@
+import { register } from "./registry";
+
+register({
+  name: "toNumber", arity: { min: 1, max: 1 }, paramTypes: "any", returnType: "number",
+  eval: ([v]) => {
+    if (v == null) return null;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : null;
+  },
+  doc: "Parses the value as a number, or null.", category: "coercion",
+});
+register({
+  name: "toString", arity: { min: 1, max: 1 }, paramTypes: "any", returnType: "string",
+  eval: ([v]) => v == null ? "" : String(v),
+  doc: "Converts the value to a string.", category: "coercion",
+});
diff --git a/packages/base-formula/src/functions/date.ts b/packages/base-formula/src/functions/date.ts
new file mode 100644
index 000000000..9481a7260
--- /dev/null
+++ b/packages/base-formula/src/functions/date.ts
@@ -0,0 +1,53 @@
+import { register } from "./registry";
+import { makeErrorCell } from "../error";
+
+const toDate = (v: unknown): Date | null => {
+  if (v == null) return null;
+  const d = new Date(String(v));
+  return isNaN(d.getTime()) ? null : d;
+};
+
+register({
+  name: "now", arity: { min: 0, max: 0 }, paramTypes: [], returnType: "date",
+  eval: () => new Date().toISOString(),
+  doc: "Current timestamp.", category: "date",
+});
+register({
+  name: "today", arity: { min: 0, max: 0 }, paramTypes: [], returnType: "date",
+  eval: () => {
+    const d = new Date(); d.setUTCHours(0, 0, 0, 0); return d.toISOString();
+  },
+  doc: "Midnight UTC of today.", category: "date",
+});
+register({
+  name: "dateAdd", arity: { min: 3, max: 3 }, paramTypes: ["date", "number", "string"], returnType: "date",
+  eval: ([base, amt, unit]) => {
+    const d = toDate(base);
+    if (!d) return makeErrorCell("DATE_INVALID", "invalid date");
+    const n = Number(amt);
+    const u = String(unit);
+    const r = new Date(d);
+    if (u === "days")    r.setUTCDate(r.getUTCDate() + n);
+    else if (u === "hours")   r.setUTCHours(r.getUTCHours() + n);
+    else if (u === "minutes") r.setUTCMinutes(r.getUTCMinutes() + n);
+    else if (u === "months")  r.setUTCMonth(r.getUTCMonth() + n);
+    else if (u === "years")   r.setUTCFullYear(r.getUTCFullYear() + n);
+    else return makeErrorCell("TYPE_MISMATCH", `unknown unit ${u}`);
+    return r.toISOString();
+  },
+  doc: "Adds a duration to a date. Units: days, hours, minutes, months, years.", category: "date",
+});
+register({
+  name: "dateBetween", arity: { min: 3, max: 3 }, paramTypes: ["date", "date", "string"], returnType: "number",
+  eval: ([a, b, unit]) => {
+    const da = toDate(a), db = toDate(b);
+    if (!da || !db) return makeErrorCell("DATE_INVALID", "invalid date");
+    const ms = db.getTime() - da.getTime();
+    const u = String(unit);
+    if (u === "days")    return Math.floor(ms / 86_400_000);
+    if (u === "hours")   return Math.floor(ms / 3_600_000);
+    if (u === "minutes") return Math.floor(ms / 60_000);
+    return makeErrorCell("TYPE_MISMATCH", `unknown unit ${u}`);
+  },
+  doc: "Difference between two dates in a given unit.", category: "date",
+});
diff --git a/packages/base-formula/src/functions/index.ts b/packages/base-formula/src/functions/index.ts
new file mode 100644
index 000000000..f063a4c5e
--- /dev/null
+++ b/packages/base-formula/src/functions/index.ts
@@ -0,0 +1,7 @@
+import "./logic";
+import "./math";
+import "./string";
+import "./date";
+import "./coercion";
+export { registry, register } from "./registry";
+export type { FormulaFn } from "./registry";
diff --git a/packages/base-formula/src/functions/logic.ts b/packages/base-formula/src/functions/logic.ts
new file mode 100644
index 000000000..b7259ffcd
--- /dev/null
+++ b/packages/base-formula/src/functions/logic.ts
@@ -0,0 +1,11 @@
+import { register } from "./registry";
+
+register({
+  name: "empty",
+  arity: { min: 1, max: 1 },
+  paramTypes: "any",
+  returnType: "boolean",
+  eval: ([v]) => v == null || v === "" || (typeof v === "object" && v !== null && "__err" in v),
+  doc: "Returns true if the value is null or empty string or an error.",
+  category: "logic",
+});
diff --git a/packages/base-formula/src/functions/math.ts b/packages/base-formula/src/functions/math.ts
new file mode 100644
index 000000000..9cf516eba
--- /dev/null
+++ b/packages/base-formula/src/functions/math.ts
@@ -0,0 +1,160 @@
+import { register } from "./registry";
+import { makeErrorCell } from "../error";
+import type { Value } from "../types";
+
+const num = (v: unknown): number | null => v == null ? null : Number(v);
+
+register({
+  name: "round", arity: { min: 1, max: 2 }, paramTypes: ["number", "number"], returnType: "number",
+  eval: ([v, places]) => {
+    const n = num(v);
+    if (n == null) return null;
+    const p = places == null ? 0 : Math.trunc(Number(places));
+    const factor = Math.pow(10, p);
+    return Math.round(n * factor) / factor;
+  },
+  doc: "Rounds to the nearest integer, or to `places` decimals if given.", category: "math",
+});
+register({
+  name: "floor", arity: { min: 1, max: 1 }, paramTypes: ["number"], returnType: "number",
+  eval: ([v]) => { const n = num(v); return n == null ? null : Math.floor(n); },
+  doc: "Rounds down.", category: "math",
+});
+register({
+  name: "ceil", arity: { min: 1, max: 1 }, paramTypes: ["number"], returnType: "number",
+  eval: ([v]) => { const n = num(v); return n == null ? null : Math.ceil(n); },
+  doc: "Rounds up.", category: "math",
+});
+register({
+  name: "abs", arity: { min: 1, max: 1 }, paramTypes: ["number"], returnType: "number",
+  eval: ([v]) => { const n = num(v); return n == null ? null : Math.abs(n); },
+  doc: "Absolute value.", category: "math",
+});
+register({
+  name: "min", arity: { min: 1, max: null }, paramTypes: "variadic-any", returnType: "number",
+  eval: (args) => {
+    const nums = args.map(num).filter((n): n is number => n != null);
+    return nums.length ? Math.min(...nums) : null;
+  },
+  doc: "Minimum of the arguments.", category: "math",
+});
+register({
+  name: "max", arity: { min: 1, max: null }, paramTypes: "variadic-any", returnType: "number",
+  eval: (args) => {
+    const nums = args.map(num).filter((n): n is number => n != null);
+    return nums.length ? Math.max(...nums) : null;
+  },
+  doc: "Maximum of the arguments.", category: "math",
+});
+register({
+  name: "mod", arity: { min: 2, max: 2 }, paramTypes: ["number", "number"], returnType: "number",
+  eval: ([a, b]) => {
+    const na = num(a), nb = num(b);
+    if (na == null || nb == null) return null;
+    if (nb === 0) return makeErrorCell("DIV_BY_ZERO", "modulo by zero");
+    return na % nb;
+  },
+  doc: "Remainder after division.", category: "math",
+});
+register({
+  name: "add", arity: { min: 2, max: 2 }, paramTypes: ["number", "number"], returnType: "number",
+  eval: ([a, b]) => {
+    const na = num(a), nb = num(b);
+    return na == null || nb == null ? null : na + nb;
+  },
+  doc: "Sum of two numbers.", category: "math",
+});
+register({
+  name: "subtract", arity: { min: 2, max: 2 }, paramTypes: ["number", "number"], returnType: "number",
+  eval: ([a, b]) => {
+    const na = num(a), nb = num(b);
+    return na == null || nb == null ? null : na - nb;
+  },
+  doc: "Difference of two numbers.", category: "math",
+});
+register({
+  name: "multiply", arity: { min: 2, max: 2 }, paramTypes: ["number", "number"], returnType: "number",
+  eval: ([a, b]) => {
+    const na = num(a), nb = num(b);
+    return na == null || nb == null ? null : na * nb;
+  },
+  doc: "Product of two numbers.", category: "math",
+});
+register({
+  name: "divide", arity: { min: 2, max: 2 }, paramTypes: ["number", "number"], returnType: "number",
+  eval: ([a, b]) => {
+    const na = num(a), nb = num(b);
+    if (na == null || nb == null) return null;
+    if (nb === 0) return makeErrorCell("DIV_BY_ZERO", "division by zero");
+    return na / nb;
+  },
+  doc: "Quotient of two numbers.", category: "math",
+});
+register({
+  name: "pow", arity: { min: 2, max: 2 }, paramTypes: ["number", "number"], returnType: "number",
+  eval: ([a, b]) => {
+    const na = num(a), nb = num(b);
+    return na == null || nb == null ? null : Math.pow(na, nb);
+  },
+  doc: "Base raised to an exponent.", category: "math",
+});
+register({
+  name: "sqrt", arity: { min: 1, max: 1 }, paramTypes: ["number"], returnType: "number",
+  eval: ([v]) => {
+    const n = num(v);
+    if (n == null) return null;
+    if (n < 0) return makeErrorCell("TYPE_MISMATCH", "sqrt of negative number");
+    return Math.sqrt(n);
+  },
+  doc: "Positive square root.", category: "math",
+});
+register({
+  name: "sum", arity: { min: 1, max: null }, paramTypes: "variadic-any", returnType: "number",
+  eval: (args) => {
+    // Null propagates as 0 so `sum(prop("A"), prop("B"))` still works when
+    // some cells are empty — matches Airtable/Notion semantics.
+    let total = 0;
+    for (const v of args) {
+      const n = num(v);
+      if (n != null && Number.isFinite(n)) total += n;
+    }
+    return total;
+  },
+  doc: "Sum of the arguments.", category: "math",
+});
+const meanEval = (args: Value[]): Value => {
+  const nums: number[] = [];
+  for (const v of args) {
+    const n = num(v);
+    if (n != null && Number.isFinite(n)) nums.push(n);
+  }
+  if (nums.length === 0) return null;
+  return nums.reduce((a, b) => a + b, 0) / nums.length;
+};
+register({
+  name: "mean", arity: { min: 1, max: null }, paramTypes: "variadic-any", returnType: "number",
+  eval: meanEval,
+  doc: "Arithmetic average of the arguments.", category: "math",
+});
+register({
+  name: "average", arity: { min: 1, max: null }, paramTypes: "variadic-any", returnType: "number",
+  eval: meanEval,
+  doc: "Arithmetic average of the arguments (alias of mean).", category: "math",
+});
+register({
+  name: "median", arity: { min: 1, max: null }, paramTypes: "variadic-any", returnType: "number",
+  eval: (args) => {
+    const nums: number[] = [];
+    for (const v of args) {
+      const n = num(v);
+      if (n != null && Number.isFinite(n)) nums.push(n);
+    }
+    if (nums.length === 0) return null;
+    nums.sort((a, b) => a - b);
+    const mid = Math.floor(nums.length / 2);
+    return nums.length % 2 === 0
+      ? (nums[mid - 1] + nums[mid]) / 2
+      : nums[mid];
+  },
+  doc: "Middle value of the arguments.", category: "math",
+});
diff --git a/packages/base-formula/src/functions/registry.ts b/packages/base-formula/src/functions/registry.ts
new file mode 100644
index 000000000..2fef55d13
--- /dev/null
+++ b/packages/base-formula/src/functions/registry.ts
@@ -0,0 +1,24 @@
+import type { FormulaResultType, Value, EvalContext } from "../types";
+
+export type FormulaFn = {
+  name: string;
+  arity: { min: number; max: number | null };
+  paramTypes: FormulaResultType[] | "any" | "variadic-any";
+  returnType: FormulaResultType | ((argTypes: FormulaResultType[]) => FormulaResultType);
+  eval: (args: Value[], ctx: EvalContext) => Value;
+  doc: string;
+  category: "logic" | "math" | "string" | "date" | "coercion";
+};
+
+export const registry: Map<string, FormulaFn> = new Map();
+
+export function register(fn: FormulaFn): void {
+  // Functions are looked up case-insensitively (see eval/typecheck), so the
+  // registry is keyed by the lowercased name. fn.name keeps its canonical
+  // casing for display in the function picker and `format()`.
+  const key = fn.name.toLowerCase();
+  if (registry.has(key)) {
+    throw new Error(`Duplicate formula function: ${fn.name}`);
+  }
+  registry.set(key, fn);
+}
diff --git a/packages/base-formula/src/functions/string.ts b/packages/base-formula/src/functions/string.ts
new file mode 100644
index 000000000..863a161f8
--- /dev/null
+++ b/packages/base-formula/src/functions/string.ts
@@ -0,0 +1,34 @@
+import { register } from "./registry";
+
+const s = (v: unknown): string => v == null ? "" : String(v);
+
+register({
+  name: "concat", arity: { min: 1, max: null }, paramTypes: "variadic-any", returnType: "string",
+  eval: (args) => args.map(s).join(""),
+  doc: "Concatenates strings.", category: "string",
+});
+register({
+  name: "length", arity: { min: 1, max: 1 }, paramTypes: ["string"], returnType: "number",
+  eval: ([v]) => s(v).length,
+  doc: "Length of a string.", category: "string",
+});
+register({
+  name: "contains", arity: { min: 2, max: 2 }, paramTypes: ["string", "string"], returnType: "boolean",
+  eval: ([a, b]) => s(a).includes(s(b)),
+  doc: "Returns true if the first string contains the second.", category: "string",
+});
+register({
+  name: "lower", arity: { min: 1, max: 1 }, paramTypes: ["string"], returnType: "string",
+  eval: ([v]) => s(v).toLowerCase(),
+  doc: "Lowercases the string.", category: "string",
+});
+register({
+  name: "upper", arity: { min: 1, max: 1 }, paramTypes: ["string"], returnType: "string",
+  eval: ([v]) => s(v).toUpperCase(),
+  doc: "Uppercases the string.", category: "string",
+});
+register({
+  name: "trim", arity: { min: 1, max: 1 }, paramTypes: ["string"], returnType: "string",
+  eval: ([v]) => s(v).trim(),
+  doc: "Strips whitespace from both ends.", category: "string",
+});
diff --git a/packages/base-formula/src/graph.ts b/packages/base-formula/src/graph.ts
new file mode 100644
index 000000000..ad25f24ed
--- /dev/null
+++ b/packages/base-formula/src/graph.ts
@@ -0,0 +1,88 @@
+type PropLike = { id: string; type: string; typeOptions: unknown };
+
+export class BaseFormulaGraph {
+  private readonly direct = new Map<string, string[]>();
+  private readonly reverse = new Map<string, Set<string>>();
+
+  constructor(properties: PropLike[]) {
+    for (const p of properties) {
+      if (p.type !== "formula") continue;
+      const deps: string[] = Array.isArray((p.typeOptions as any)?.dependencies)
+        ? ((p.typeOptions as any).dependencies as string[])
+        : [];
+      this.direct.set(p.id, deps);
+      for (const d of deps) {
+        if (!this.reverse.has(d)) this.reverse.set(d, new Set());
+        this.reverse.get(d)!.add(p.id);
+      }
+    }
+  }
+
+  directDeps(propId: string): string[] { return this.direct.get(propId) ?? []; }
+
+  dependents(propId: string): string[] { return Array.from(this.reverse.get(propId) ?? []); }
+
+  affectedFormulas(changedPropIds: string[]): string[] {
+    const out = new Set<string>();
+    const stack = [...changedPropIds];
+    while (stack.length) {
+      const id = stack.pop()!;
+      for (const d of this.reverse.get(id) ?? []) {
+        if (!out.has(d)) { out.add(d); stack.push(d); }
+      }
+    }
+    return Array.from(out).sort();
+  }
+
+  evalOrder(): string[] {
+    const order: string[] = [];
+    const visited = new Set<string>();
+    const temp = new Set<string>();
+    const visit = (id: string) => {
+      if (visited.has(id)) return;
+      if (temp.has(id)) return;
+      temp.add(id);
+      for (const d of this.direct.get(id) ?? []) visit(d);
+      temp.delete(id);
+      visited.add(id);
+      order.push(id);
+    };
+    for (const id of this.direct.keys()) visit(id);
+    return order;
+  }
+
+  /*
+   * Returns the cycle path (list of prop IDs) if introducing `newProp` (or
+   * keeping its current deps) would create one, else null. `newProp` may be
+   * either a property already registered or a hypothetical replacement; we
+   * re-read its deps at call time, so pass the candidate object.
+   */
+  detectCycle(newProp: PropLike): string[] | null {
+    const local = new Map(this.direct);
+    if (newProp.type === "formula") {
+      local.set(newProp.id, (newProp.typeOptions as any)?.dependencies ?? []);
+    }
+    const WHITE = 0, GRAY = 1, BLACK = 2;
+    const color = new Map<string, number>();
+    const path: string[] = [];
+    const dfs = (id: string): string[] | null => {
+      color.set(id, GRAY);
+      path.push(id);
+      for (const d of local.get(id) ?? []) {
+        const c = color.get(d) ?? WHITE;
+        if (c === GRAY) { return [...path.slice(path.indexOf(d)), d]; }
+        if (c === WHITE) { const r = dfs(d); if (r) return r; }
+      }
+      path.pop();
+      color.set(id, BLACK);
+      return null;
+    };
+    for (const id of local.keys()) {
+      if ((color.get(id) ?? WHITE) === WHITE) {
+        const r = dfs(id);
+        if (r) return r;
+      }
+    }
+    return null;
+  }
+}
diff --git a/packages/base-formula/src/index.client.ts b/packages/base-formula/src/index.client.ts
new file mode 100644
index 000000000..2a4c84d80
--- /dev/null
+++ b/packages/base-formula/src/index.client.ts
@@ -0,0 +1,13 @@
+// Client-side public surface: parse, typecheck, cycle-detect, pretty-print.
+import "./functions/index";
+export * from "./ast";
+export * from "./types";
+export * from "./error";
+export * from "./tokenizer";
+export * from "./parser";
+export * from "./resolver";
+export * from "./typecheck";
+export * from "./format";
+export { registry, register } from "./functions/registry";
+export type { FormulaFn } from "./functions/registry";
+export * from "./graph";
diff --git a/packages/base-formula/src/index.server.ts b/packages/base-formula/src/index.server.ts
new file mode 100644
index 000000000..4b85e0478
--- /dev/null
+++ b/packages/base-formula/src/index.server.ts
@@ -0,0 +1,14 @@
+// Server-side public surface: everything in client + evaluator + registry.
+export * from "./ast";
+export * from "./types";
+export * from "./error";
+export * from "./tokenizer";
+export * from "./parser";
+export * from "./resolver";
+export * from "./typecheck";
+export * from "./format";
+import "./functions/index"; // side-effect: populate registry
+export { registry, register } from "./functions/index";
+export type { FormulaFn } from "./functions/index";
+export * from "./graph";
+export * from "./eval";
diff --git a/packages/base-formula/src/parser.ts b/packages/base-formula/src/parser.ts
new file mode 100644
index 000000000..850040fd4
--- /dev/null
+++ b/packages/base-formula/src/parser.ts
@@ -0,0 +1,201 @@
+import { tokenize, Token, TokenKind } from "./tokenizer";
+import { FormulaParseError } from "./error";
+import { MAX_PARSE_DEPTH } from "./types";
+import type { OpCode } from "./ast";
+import type { RawFormulaAST } from "./ast";
+
+/*
+ * Pratt parser. Top-level entry parses a full expression and then asserts EOF.
+ * Binary operators are dispatched through a precedence table in `bp` below.
+ * `prop(...)`, `if(...)`, `and(...)`, `or(...)` are intercepted when an
+ * identifier is followed by `(` so they become their dedicated AST nodes.
+ */
+export function parseRaw(src: string): RawFormulaAST {
+  const tokens = tokenize(src);
+  const p = new Parser(tokens);
+  const expr = p.parseExpr(0);
+  p.expect(TokenKind.EOF, "Expected end of input");
+  return expr;
+}
+
+const BP: Partial<Record<TokenKind, number>> = {
+  [TokenKind.OR]: 10,
+  [TokenKind.AND]: 20,
+  [TokenKind.EQ]: 30, [TokenKind.NEQ]: 30,
+  [TokenKind.LT]: 40, [TokenKind.GT]: 40,
+  [TokenKind.LTE]: 40, [TokenKind.GTE]: 40,
+  [TokenKind.PLUS]: 50, [TokenKind.MINUS]: 50,
+  [TokenKind.STAR]: 60, [TokenKind.SLASH]: 60, [TokenKind.PERCENT]: 60,
+};
+
+const TOK_TO_OP: Partial<Record<TokenKind, OpCode>> = {
+  [TokenKind.PLUS]: "+", [TokenKind.MINUS]: "-",
+  [TokenKind.STAR]: "*", [TokenKind.SLASH]: "/", [TokenKind.PERCENT]: "%",
+  [TokenKind.EQ]: "==", [TokenKind.NEQ]: "!=",
+  [TokenKind.LT]: "<", [TokenKind.GT]: ">",
+  [TokenKind.LTE]: "<=", [TokenKind.GTE]: ">=",
+};
+
+class Parser {
+  private i = 0;
+  private depth = 0;
+  constructor(private tokens: Token[]) {}
+
+  peek(): Token { return this.tokens[this.i]; }
+  next(): Token { return this.tokens[this.i++]; }
+  expect(kind: TokenKind, msg: string): Token {
+    const t = this.peek();
+    if (t.kind !== kind) {
+      throw new FormulaParseError([{
+        code: "UNEXPECTED_TOKEN", message: msg, span: { start: t.start, end: t.end },
+      }]);
+    }
+    return this.next();
+  }
+
+  // Bound recursive descent. Every path that recurses (parens, unary chains,
+  // binary rhs, call args) funnels through parseExpr/parseUnary, so guarding
+  // their entry caps the JS stack and turns pathological nesting into a
+  // catchable FormulaParseError instead of a RangeError.
+  private enter(): void {
+    if (++this.depth > MAX_PARSE_DEPTH) {
+      const t = this.peek();
+      throw new FormulaParseError([{
+        code: "DEPTH_EXCEEDED",
+        message: `Formula nesting too deep (max ${MAX_PARSE_DEPTH})`,
+        span: { start: t.start, end: t.end },
+      }]);
+    }
+  }
+
+  parseExpr(minBp: number): RawFormulaAST {
+    this.enter();
+    try {
+      return this.parseExprInner(minBp);
+    } finally {
+      this.depth--;
+    }
+  }
+
+  private parseExprInner(minBp: number): RawFormulaAST {
+    let lhs = this.parseUnary();
+
+    while (true) {
+      const tok = this.peek();
+      if (tok.kind === TokenKind.AND) {
+        if (BP[TokenKind.AND]! < minBp) break;
+        this.next();
+        const rhs = this.parseExpr(BP[TokenKind.AND]! + 1);
+        lhs = { t: "and", args: [lhs, rhs] };
+        continue;
+      }
+      if (tok.kind === TokenKind.OR) {
+        if (BP[TokenKind.OR]! < minBp) break;
+        this.next();
+        const rhs = this.parseExpr(BP[TokenKind.OR]! + 1);
+        lhs = { t: "or", args: [lhs, rhs] };
+        continue;
+      }
+      const bp = BP[tok.kind];
+      if (bp == null || bp < minBp) break;
+      this.next();
+      const rhs = this.parseExpr(bp + 1);
+      const op = TOK_TO_OP[tok.kind]!;
+      lhs = { t: "op", op, args: [lhs, rhs] };
+    }
+    return lhs;
+  }
+
+  parseUnary(): RawFormulaAST {
+    const tok = this.peek();
+    if (tok.kind === TokenKind.MINUS) {
+      this.next();
+      this.enter();
+      try {
+        return { t: "op", op: "neg", args: [this.parseUnary()] };
+      } finally {
+        this.depth--;
+      }
+    }
+    if (tok.kind === TokenKind.NOT) {
+      this.next();
+      this.enter();
+      try {
+        return { t: "op", op: "not", args: [this.parseUnary()] };
+      } finally {
+        this.depth--;
+      }
+    }
+    return this.parsePrimary();
+  }
+
+  parsePrimary(): RawFormulaAST {
+    const tok = this.next();
+    switch (tok.kind) {
+      case TokenKind.NUMBER: return { t: "num", v: Number(tok.text) };
+      case TokenKind.STRING: return { t: "str", v: tok.text };
+      case TokenKind.TRUE:   return { t: "bool", v: true };
+      case TokenKind.FALSE:  return { t: "bool", v: false };
+      case TokenKind.NULL:   return { t: "null" };
+      case TokenKind.LPAREN: {
+        const e = this.parseExpr(0);
+        this.expect(TokenKind.RPAREN, "Expected ')'");
+        return e;
+      }
+      case TokenKind.AND:
+      case TokenKind.OR:
+      case TokenKind.IDENT: {
+        if (this.peek().kind !== TokenKind.LPAREN) {
+          throw new FormulaParseError([{
+            code: "UNEXPECTED_TOKEN",
+            message: `Unexpected identifier '${tok.text}' (did you mean prop("${tok.text}")?)`,
+            span: { start: tok.start, end: tok.end },
+          }]);
+        }
+        this.next(); // LPAREN
+        const args: RawFormulaAST[] = [];
+        if (this.peek().kind !== TokenKind.RPAREN) {
+          args.push(this.parseExpr(0));
+          while (this.peek().kind === TokenKind.COMMA) {
+            this.next();
+            args.push(this.parseExpr(0));
+          }
+        }
+        this.expect(TokenKind.RPAREN, "Expected ')'");
+
+        // Match special-form/keyword names case-insensitively; the `call`
+        // node below keeps the raw casing the user typed.
+        const head = tok.text.toLowerCase();
+        if (head === "prop") {
+          if (args.length !== 1 || args[0].t !== "str") {
+            throw new FormulaParseError([{
+              code: "UNEXPECTED_TOKEN",
+              message: 'prop() expects exactly one string literal argument',
+              span: { start: tok.start, end: tok.end },
+            }]);
+          }
+          return { t: "propName", name: args[0].v };
+        }
+        if (head === "if") {
+          if (args.length !== 3) {
+            throw new FormulaParseError([{
+              code: "ARITY_MISMATCH",
+              message: "if() expects exactly 3 arguments",
+              span: { start: tok.start, end: tok.end },
+            }]);
+          }
+          return { t: "if", cond: args[0], then: args[1], else: args[2] };
+        }
+        if (head === "and") return { t: "and", args };
+        if (head === "or")  return { t: "or", args };
+        return { t: "call", fn: tok.text, args };
+      }
+      default:
+        throw new FormulaParseError([{
+          code: "UNEXPECTED_TOKEN",
+          message: `Unexpected token '${tok.text || tok.kind}'`,
+          span: { start: tok.start, end: tok.end },
+        }]);
+    }
+  }
+}
diff --git a/packages/base-formula/src/resolver.ts b/packages/base-formula/src/resolver.ts
new file mode 100644
index 000000000..7451a007a
--- /dev/null
+++ b/packages/base-formula/src/resolver.ts
@@ -0,0 +1,68 @@
+import { FormulaParseError } from "./error";
+import type { FormulaAST, RawFormulaAST } from "./ast";
+
+export type ResolveResult = {
+  ast: FormulaAST;
+  dependencies: string[];
+};
+
+export function resolve(
+  raw: RawFormulaAST,
+  nameToId: ReadonlyMap<string, string>,
+): ResolveResult {
+  const deps = new Set<string>();
+  const ast = walk(raw, nameToId, deps);
+  return { ast, dependencies: Array.from(deps).sort() };
+}
+
+function walk(
+  node: RawFormulaAST,
+  nameToId: ReadonlyMap<string, string>,
+  deps: Set<string>,
+): FormulaAST {
+  switch (node.t) {
+    case "num": case "str": case "bool": case "null":
+      return node as FormulaAST;
+    case "propName": {
+      const id = nameToId.get(node.name);
+      if (!id) {
+        throw new FormulaParseError([{
+          code: "UNKNOWN_PROPERTY",
+          message: `Unknown property '${node.name}'`,
+          span: { start: 0, end: 0 }, // parser carries real spans; resolver is post-parse
+        }]);
+      }
+      deps.add(id);
+      return { t: "prop", id };
+    }
+    case "op":
+      return {
+        t: "op",
+        op: (node as any).op,
+        args: (node as any).args.map((a: RawFormulaAST) => walk(a, nameToId, deps)),
+      };
+    case "if":
+      return {
+        t: "if",
+        cond: walk((node as any).cond, nameToId, deps),
+        then: walk((node as any).then, nameToId, deps),
+        else: walk((node as any).else, nameToId, deps),
+      };
+    case "and":
+      return {
+        t: "and",
+        args: (node as any).args.map((a: RawFormulaAST) => walk(a, nameToId, deps)),
+      };
+    case "or":
+      return {
+        t: "or",
+        args: (node as any).args.map((a: RawFormulaAST) => walk(a, nameToId, deps)),
+      };
+    case "call":
+      return {
+        t: "call",
+        fn: (node as any).fn,
+        args: (node as any).args.map((a: RawFormulaAST) => walk(a, nameToId, deps)),
+      };
+  }
+}
diff --git a/packages/base-formula/src/tokenizer.ts b/packages/base-formula/src/tokenizer.ts
new file mode 100644
index 000000000..4a340116e
--- /dev/null
+++ b/packages/base-formula/src/tokenizer.ts
@@ -0,0 +1,158 @@
+import { FormulaParseError } from "./error";
+import { MAX_FORMULA_SOURCE_LENGTH } from "./types";
+
+export enum TokenKind {
+  NUMBER = "NUMBER",
+  STRING = "STRING",
+  IDENT = "IDENT",
+  TRUE = "TRUE",
+  FALSE = "FALSE",
+  NULL = "NULL",
+  AND = "AND",
+  OR = "OR",
+  NOT = "NOT",
+  PLUS = "PLUS",
+  MINUS = "MINUS",
+  STAR = "STAR",
+  SLASH = "SLASH",
+  PERCENT = "PERCENT",
+  EQ = "EQ",
+  NEQ = "NEQ",
+  LT = "LT",
+  GT = "GT",
+  LTE = "LTE",
+  GTE = "GTE",
+  LPAREN = "LPAREN",
+  RPAREN = "RPAREN",
+  COMMA = "COMMA",
+  EOF = "EOF",
+}
+
+export type Token = {
+  kind: TokenKind;
+  text: string;
+  start: number;
+  end: number;
+};
+
+const KEYWORDS: Record<string, TokenKind> = {
+  true: TokenKind.TRUE,
+  false: TokenKind.FALSE,
+  null: TokenKind.NULL,
+  and: TokenKind.AND,
+  or: TokenKind.OR,
+  not: TokenKind.NOT,
+};
+
+export function tokenize(src: string): Token[] {
+  if (src.length > MAX_FORMULA_SOURCE_LENGTH) {
+    throw new FormulaParseError([{
+      code: "INPUT_TOO_LONG",
+      message: `Formula is too long (${src.length} chars; max ${MAX_FORMULA_SOURCE_LENGTH})`,
+      span: { start: 0, end: MAX_FORMULA_SOURCE_LENGTH },
+    }]);
+  }
+  const tokens: Token[] = [];
+  let i = 0;
+
+  const push = (kind: TokenKind, text: string, start: number, end: number) =>
+    tokens.push({ kind, text, start, end });
+
+  while (i < src.length) {
+    const ch = src[i];
+    if (ch === " " || ch === "\t" || ch === "\n" || ch === "\r") { i++; continue; }
+
+    if (ch >= "0" && ch <= "9") {
+      const start = i;
+      while (i < src.length && src[i] >= "0" && src[i] <= "9") i++;
+      if (src[i] === ".") {
+        i++;
+        while (i < src.length && src[i] >= "0" && src[i] <= "9") i++;
+      }
+      push(TokenKind.NUMBER, src.slice(start, i), start, i);
+      continue;
+    }
+
+    if (ch === '"' || ch === "'") {
+      const quote = ch;
+      const start = i;
+      i++;
+      let body = "";
+      while (i < src.length && src[i] !== quote) {
+        if (src[i] === "\\") {
+          if (i + 1 >= src.length) {
+            throw new FormulaParseError([{
+              code: "UNEXPECTED_EOF",
+              message: "Unterminated escape in string",
+              span: { start, end: i + 1 },
+            }]);
+          }
+          const esc = src[i + 1];
+          body += esc === "n" ? "\n" : esc === "t" ? "\t" : esc;
+          i += 2;
+        } else {
+          body += src[i];
+          i++;
+        }
+      }
+      if (i >= src.length) {
+        throw new FormulaParseError([{
+          code: "UNEXPECTED_EOF",
+          message: "Unterminated string literal",
+          span: { start, end: src.length },
+        }]);
+      }
+      i++;
+      push(TokenKind.STRING, body, start, i);
+      continue;
+    }
+
+    if ((ch >= "a" && ch <= "z") || (ch >= "A" && ch <= "Z") || ch === "_") {
+      const start = i;
+      while (
+        i < src.length &&
+        (
+          (src[i] >= "a" && src[i] <= "z") ||
+          (src[i] >= "A" && src[i] <= "Z") ||
+          (src[i] >= "0" && src[i] <= "9") ||
+          src[i] === "_"
+        )
+      ) i++;
+      const text = src.slice(start, i);
+      // Keywords and function names are case-insensitive: match on the
+      // lowercased text but keep `text` raw on the token so error messages
+      // and `format()` preserve the user's casing.
+      // hasOwnProperty guards against inherited Object.prototype names
+      // (toString, valueOf, hasOwnProperty, …) matching the KEYWORDS lookup —
+      // those are valid identifiers/function names (e.g. the toString() fn).
+      const lower = text.toLowerCase();
+      const kw = Object.prototype.hasOwnProperty.call(KEYWORDS, lower) ? KEYWORDS[lower] : undefined;
+      push(kw ?? TokenKind.IDENT, text, start, i);
+      continue;
+    }
+
+    const start = i;
+    const two = src.slice(i, i + 2);
+    if (two === "==") { push(TokenKind.EQ, two, start, i + 2); i += 2; continue; }
+    if (two === "!=") { push(TokenKind.NEQ, two, start, i + 2); i += 2; continue; }
+    if (two === "<=") { push(TokenKind.LTE, two, start, i + 2); i += 2; continue; }
+    if (two === ">=") { push(TokenKind.GTE, two, start, i + 2); i += 2; continue; }
+
+    const singleMap: Record<string, TokenKind> = {
+      "+": TokenKind.PLUS, "-": TokenKind.MINUS, "*": TokenKind.STAR,
+      "/": TokenKind.SLASH, "%": TokenKind.PERCENT,
+      "<": TokenKind.LT, ">": TokenKind.GT,
+      "(": TokenKind.LPAREN, ")": TokenKind.RPAREN, ",": TokenKind.COMMA,
+    };
+    if (singleMap[ch]) { push(singleMap[ch], ch, start, i + 1); i++; continue; }
+
+    throw new FormulaParseError([{
+      code: "UNEXPECTED_TOKEN",
+      message: `Unexpected character '${ch}'`,
+      span: { start: i, end: i + 1 },
+    }]);
+  }
+
+  tokens.push({ kind: TokenKind.EOF, text: "", start: i, end: i });
+  return tokens;
+}
diff --git a/packages/base-formula/src/typecheck.ts b/packages/base-formula/src/typecheck.ts
new file mode 100644
index 000000000..aec3689de
--- /dev/null
+++ b/packages/base-formula/src/typecheck.ts
@@ -0,0 +1,89 @@
+import { FormulaParseError } from "./error";
+import type { FormulaAST, OpCode } from "./ast";
+import type { FormulaResultType } from "./types";
+import type { FormulaFn } from "./functions";
+
+export type PropertyTypeMap = ReadonlyMap<string, FormulaResultType>;
+
+export type TypecheckResult = { resultType: FormulaResultType };
+
+const ARITH_OPS: OpCode[] = ["+", "-", "*", "/", "%"];
+const CMP_OPS:   OpCode[] = ["==", "!=", ">", "<", ">=", "<="];
+
+export function typecheck(
+  ast: FormulaAST,
+  propertyTypes: PropertyTypeMap,
+  registry: ReadonlyMap<string, FormulaFn>,
+): TypecheckResult {
+  return { resultType: infer(ast, propertyTypes, registry) };
+}
+
+function infer(
+  ast: FormulaAST,
+  propertyTypes: PropertyTypeMap,
+  registry: ReadonlyMap<string, FormulaFn>,
+): FormulaResultType {
+  switch (ast.t) {
+    case "num":  return "number";
+    case "str":  return "string";
+    case "bool": return "boolean";
+    case "null": return "null";
+    case "prop": return propertyTypes.get(ast.id) ?? "null";
+    case "op": {
+      const argTypes = ast.args.map((a) => infer(a, propertyTypes, registry));
+      if (ARITH_OPS.includes(ast.op)) {
+        // '+' is overloaded to match the evaluator: any string operand makes
+        // it string concatenation; otherwise it's numeric addition.
+        if (ast.op === "+" && argTypes.some((t) => t === "string")) return "string";
+        const allow = argTypes.every((t) => t === "number" || t === "null");
+        if (!allow) throw typeErr(`Operator '${ast.op}' needs numbers`);
+        return "number";
+      }
+      if (CMP_OPS.includes(ast.op)) return "boolean";
+      if (ast.op === "neg") {
+        if (argTypes[0] !== "number" && argTypes[0] !== "null") throw typeErr("Unary '-' needs number");
+        return "number";
+      }
+      if (ast.op === "not") {
+        if (argTypes[0] !== "boolean" && argTypes[0] !== "null") throw typeErr("'not' needs boolean");
+        return "boolean";
+      }
+      return "null";
+    }
+    case "if": {
+      const thenT = infer(ast.then, propertyTypes, registry);
+      const elseT = infer(ast.else, propertyTypes, registry);
+      if (thenT === elseT) return thenT;
+      if (thenT === "null") return elseT;
+      if (elseT === "null") return thenT;
+      throw typeErr(`if() branches have different types: ${thenT} vs ${elseT}`);
+    }
+    case "and": case "or":
+      ast.args.forEach((a) => {
+        const t = infer(a, propertyTypes, registry);
+        if (t !== "boolean" && t !== "null") throw typeErr(`'${ast.t}' needs boolean args`);
+      });
+      return "boolean";
+    case "call": {
+      const fn = registry.get(ast.fn.toLowerCase());
+      if (!fn) throw new FormulaParseError([{
+        code: "UNKNOWN_FUNCTION",
+        message: `Unknown function '${ast.fn}'`,
+        span: { start: 0, end: 0 },
+      }]);
+      const argTypes = ast.args.map((a) => infer(a, propertyTypes, registry));
+      if (argTypes.length < fn.arity.min || (fn.arity.max != null && argTypes.length > fn.arity.max)) {
+        throw new FormulaParseError([{
+          code: "ARITY_MISMATCH",
+          message: `${fn.name}() expects ${fn.arity.min}-${fn.arity.max ?? "∞"} args, got ${argTypes.length}`,
+          span: { start: 0, end: 0 },
+        }]);
+      }
+      return typeof fn.returnType === "function" ? fn.returnType(argTypes) : fn.returnType;
+    }
+  }
+}
+
+function typeErr(message: string): FormulaParseError {
+  return new FormulaParseError([{ code: "TYPE_MISMATCH", message, span: { start: 0, end: 0 } }]);
+}
diff --git a/packages/base-formula/src/types.ts b/packages/base-formula/src/types.ts
new file mode 100644
index 000000000..6e2e7b0e5
--- /dev/null
+++ b/packages/base-formula/src/types.ts
@@ -0,0 +1,74 @@
+import type { FormulaAST } from "./ast";
+
+export type FormulaResultType =
+  | "number"
+  | "string"
+  | "boolean"
+  | "date"
+  | "null";
+
+export type FormulaTypeOptions = {
+  source: string;
+  ast: FormulaAST;
+  resultType: FormulaResultType;
+  dependencies: string[];
+  astVersion: 1;
+  formatOptions?: Record<string, unknown>;
+};
+
+/*
+ * The runtime value produced by evaluating a node. Strings and numbers are
+ * their JS equivalents; dates are ISO 8601 UTC strings (matches how the date
+ * property type already stores cells); booleans are booleans; missing or
+ * filtered-out values are null. Errors are distinguishable from all valid
+ * values because they are objects with a `__err` key.
+ */
+export type Value = number | string | boolean | null | ErrorCell;
+
+export type ErrorCell = {
+  __err: ErrorCode;
+  msg: string;
+  v: 1;
+};
+
+export type ErrorCode =
+  | "MISSING_PROP"
+  | "TYPE_MISMATCH"
+  | "DIV_BY_ZERO"
+  | "DATE_INVALID"
+  | "DEPTH_EXCEEDED"
+  | "DEPENDENCY_ERROR";
+
+/*
+ * EvalContext carries everything the evaluator needs that isn't in the AST:
+ * the function registry (server-only), the property map for resolving `prop`
+ * nodes to their formula ASTs when nested, and the current recursion depth.
+ */
+export type EvalContext = {
+  registry: ReadonlyMap<string, import("./functions/registry").FormulaFn>;
+  properties: ReadonlyMap<string, PropertyLookup>;
+  depth: number;
+  maxDepth: number;
+  memo: Map<string, Value>; // keyed by propId for the current row-eval
+};
+
+export type PropertyLookup = {
+  id: string;
+  type: string;
+  typeOptions: unknown;
+};
+
+export const DEFAULT_MAX_DEPTH = 64;
+
+/*
+ * DoS guards. A formula source longer than MAX_FORMULA_SOURCE_LENGTH is
+ * rejected before tokenizing (cheap backstop against pathological input like
+ * "(".repeat(50000)). MAX_PARSE_DEPTH bounds recursive-descent nesting so a
+ * deeply nested source throws a catchable FormulaParseError instead of
+ * overflowing the JS stack with a RangeError. MAX_EVAL_DEPTH bounds the
+ * tree-walking evaluator so an oversized AST that slipped past the parser
+ * degrades to an error cell instead of crashing the recompute worker.
+ */
+export const MAX_FORMULA_SOURCE_LENGTH = 10_000;
+export const MAX_PARSE_DEPTH = 256;
+export const MAX_EVAL_DEPTH = 512;
diff --git a/packages/base-formula/tsconfig.json b/packages/base-formula/tsconfig.json
new file mode 100644
index 000000000..fa2bad038
--- /dev/null
+++ b/packages/base-formula/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../editor-ext/tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "composite": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}
diff --git a/packages/editor-ext/src/index.ts b/packages/editor-ext/src/index.ts
index 003d22886..800e830fe 100644
--- a/packages/editor-ext/src/index.ts
+++ b/packages/editor-ext/src/index.ts
@@ -33,4 +33,4 @@ export * from "./lib/status";
 export * from "./lib/pdf";
 export * from "./lib/page-break";
 export * from "./lib/resizable-nodeview";
-
+export * from "./lib/base-embed";
diff --git a/packages/editor-ext/src/lib/base-embed/base-embed.ts b/packages/editor-ext/src/lib/base-embed/base-embed.ts
new file mode 100644
index 000000000..a41c23606
--- /dev/null
+++ b/packages/editor-ext/src/lib/base-embed/base-embed.ts
@@ -0,0 +1,133 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { EditorState, NodeSelection, Plugin } from '@tiptap/pm/state';
+
+export interface BaseEmbedOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    baseEmbed: {
+      insertBaseEmbed: (attrs: {
+        pageId: string | null;
+        pendingKey?: string | null;
+      }) => ReturnType;
+    };
+  }
+}
+
+export const BaseEmbed = Node.create<BaseEmbedOptions>({
+  name: 'base',
+  group: 'block',
+  atom: true,
+  selectable: true,
+  draggable: true,
+
+  addOptions() {
+    return { HTMLAttributes: {} };
+  },
+
+  // prosemirror-dropcursor draws a block-boundary indicator on every
+  // `dragover` it sees. Pragmatic-dnd (used for column / choice reorder
+  // inside the embed) fires native `dragstart`/`dragover`, which bubble
+  // up to the editor and trigger dropcursor — visible as a stray blue
+  // line above or below the embed during an internal drag. The cursor
+  // event lands over the atom node, so dropcursor consults
+  // `disableDropCursor` on this node spec; returning true suppresses
+  // the indicator while still letting pragmatic-dnd handle the drag.
+  extendNodeSchema(extension) {
+    return extension.name === 'base'
+      ? { disableDropCursor: true }
+      : {};
+  },
+
+  addAttributes() {
+    return {
+      pageId: {
+        default: null,
+        parseHTML: (el) => el.getAttribute('data-page-id'),
+        renderHTML: (attrs) =>
+          attrs.pageId ? { 'data-page-id': attrs.pageId } : {},
+      },
+      // Transient marker set when the slash command inserts the embed
+      // before the server has assigned a pageId. The view renders a
+      // skeleton in this state. Cleared once the API responds and the
+      // real pageId is patched in. Not serialized — embeds saved with
+      // a pendingKey would orphan if the page were closed mid-request.
+      pendingKey: {
+        default: null,
+        parseHTML: () => null,
+        renderHTML: () => ({}),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="base-embed"]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        'data-type': 'base-embed',
+      }),
+    ];
+  },
+
+  addCommands() {
+    return {
+      insertBaseEmbed:
+        (attrs) =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs,
+          }),
+    };
+  },
+
+  addKeyboardShortcuts() {
+    // Block Backspace / Delete when the base embed itself is the
+    // current selection — the "click on the embed and hit delete"
+    // accidental-delete path. Returning true tells TipTap we've
+    // handled the key, preventing the default removal. Range
+    // selections covering the node and programmatic deletes still
+    // work normally.
+    const isThisNodeSelected = (): boolean => {
+      const { selection } = this.editor.state;
+      return (
+        selection instanceof NodeSelection &&
+        selection.node.type.name === this.name
+      );
+    };
+    return {
+      Backspace: () => isThisNodeSelected(),
+      Delete: () => isThisNodeSelected(),
+    };
+  },
+
+  addProseMirrorPlugins() {
+    // Same idea as the Backspace/Delete shortcuts above, but for the
+    // other accidental-delete path: when the embed is the selection,
+    // a typed character or paste would replace the whole node. These
+    // hooks return true (handled, no-op) so the node stays put. The
+    // user can still press an arrow key to deselect and then type.
+    const nodeName = this.name;
+    const isThisNodeSelected = (state: EditorState): boolean => {
+      const { selection } = state;
+      return (
+        selection instanceof NodeSelection &&
+        selection.node.type.name === nodeName
+      );
+    };
+    return [
+      new Plugin({
+        props: {
+          handleTextInput: (view) => isThisNodeSelected(view.state),
+          handlePaste: (view) => isThisNodeSelected(view.state),
+        },
+      }),
+    ];
+  },
+});
diff --git a/packages/editor-ext/src/lib/base-embed/index.ts b/packages/editor-ext/src/lib/base-embed/index.ts
new file mode 100644
index 000000000..8ea9b06c0
--- /dev/null
+++ b/packages/editor-ext/src/lib/base-embed/index.ts
@@ -0,0 +1,2 @@
+export { BaseEmbed } from './base-embed';
+export type { BaseEmbedOptions } from './base-embed';
diff --git a/packages/editor-ext/src/lib/table/header-pin/index.ts b/packages/editor-ext/src/lib/table/header-pin/index.ts
index b45e01aee..cfe82708b 100644
--- a/packages/editor-ext/src/lib/table/header-pin/index.ts
+++ b/packages/editor-ext/src/lib/table/header-pin/index.ts
@@ -1 +1,2 @@
 export { TableHeaderPin } from './extension';
+export { pinOffsetWatcher, EDITOR_PIN_OFFSET_VAR, computePinTop } from './offset';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05c629436..d9344683a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -266,6 +266,9 @@ importers:
       '@casl/react':
         specifier: 5.0.1
         version: 5.0.1(@casl/ability@6.8.0)(react@18.3.1)
+      '@docmost/base-formula':
+        specifier: workspace:*
+        version: link:../../packages/base-formula
       '@docmost/editor-ext':
         specifier: workspace:*
         version: link:../../packages/editor-ext
@@ -308,9 +311,12 @@ importers:
       '@tanstack/react-query':
         specifier: 5.90.17
         version: 5.90.17(react@18.3.1)
+      '@tanstack/react-table':
+        specifier: 8.21.3
+        version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tanstack/react-virtual':
-        specifier: 3.13.24
-        version: 3.13.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 3.14.2
+        version: 3.14.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       alfaaz:
         specifier: 1.1.0
         version: 1.1.0
@@ -618,6 +624,9 @@ importers:
       cookie:
         specifier: ^1.1.1
         version: 1.1.1
+      csv-stringify:
+        specifier: ^6
+        version: 6.7.0
       fast-bm25:
         specifier: 0.0.5
         version: 0.0.5(typescript@5.9.3)
@@ -851,6 +860,8 @@ importers:
         specifier: ^8.57.1
         version: 8.57.1(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)
 
+  packages/base-formula: {}
+
   packages/editor-ext:
     dependencies:
       marked:
@@ -4304,14 +4315,25 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
-  '@tanstack/react-virtual@3.13.24':
-    resolution: {integrity: sha512-aIJvz5OSkhNIhZIpYivrxrPTKYsjW9Uzy+sP/mx0S3sev2HyvPb7xmjbYvokzEpfgYHy/HjzJ2zFAETuUfgCpg==}
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/react-virtual@3.14.2':
+    resolution: {integrity: sha512-IpWnmCLvuymRfeeLNVXIzNEYBFLpd3drVIS91sqV78VTZFyldlChkOocZRCPp1B+Wnk09bcLNme8WaMU/9/9bQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@tanstack/virtual-core@3.14.0':
-    resolution: {integrity: sha512-JLANqGy/D6k4Ujmh8Tr25lGimuOXNiaVyXaCAZS0W+1390sADdGnyUdSWNIfd49gebtIxGMij4IktRVzrdr12Q==}
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/virtual-core@3.17.0':
+    resolution: {integrity: sha512-gOxY/hFkPh/XQYhnThBHzkbkX3Ed+z/iushyz+R+JAr213aXxUDgQoTgTdrDpBSRsjFM73P/KfUyWmaF9WHMkQ==}
 
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
@@ -5986,6 +6008,9 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  csv-stringify@6.7.0:
+    resolution: {integrity: sha512-UdtziYp5HuTz7e5j8Nvq+a/3HQo+2/aJZ9xntNTpmRRIg/3YYqDVgiS9fvAhtNbnyfbv2ZBe0bqCHqzhE7FqWQ==}
+
   cytoscape-cose-bilkent@4.1.0:
     resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
     peerDependencies:
@@ -14392,13 +14417,21 @@ snapshots:
       '@tanstack/query-core': 5.90.17
       react: 18.3.1
 
-  '@tanstack/react-virtual@3.13.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-table@8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tanstack/virtual-core': 3.14.0
+      '@tanstack/table-core': 8.21.3
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@tanstack/virtual-core@3.14.0': {}
+  '@tanstack/react-virtual@3.14.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@tanstack/virtual-core': 3.17.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@tanstack/table-core@8.21.3': {}
+
+  '@tanstack/virtual-core@3.17.0': {}
 
   '@testing-library/dom@10.4.1':
     dependencies:
@@ -16309,6 +16342,8 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  csv-stringify@6.7.0: {}
+
   cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1):
     dependencies:
       cose-base: 1.0.3