kanban - wip

Track the scrollport element in state instead of reading
`scrollportRef.current` during render. The ref was always null on the
render that mounts the `.tableScrollport` div, so `useVirtualizer`'s
`_willUpdate` saw `scrollElement=null`, skipped observer attachment, and
`calculateRange` returned null — rendering zero rows even though the
`/rows` response was already in the React-Query cache.

The bug surfaced after a filter change (the `rowsLoading` skeleton path
remounts the scrollport, and no follow-on render is guaranteed once
`/rows` settles) but not on first base load (slower side queries forced
an extra render that coincidentally re-bound the virtualizer). Switching
views also masked it: the re-render triggered `_willUpdate` with a now-
populated ref.

Using a callback-ref-backed `useState` triggers a render the moment the
div attaches, so the virtualizer picks it up on the next pass — no
view-switch workaround needed.

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

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

apps/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.90.1",
+  "version": "0.90.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -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,6 +33,7 @@
     "@slidoapp/emoji-mart-react": "1.1.5",
     "@tabler/icons-react": "3.40.0",
     "@tanstack/react-query": "5.90.17",
+    "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.24",
     "alfaaz": "1.1.0",
     "axios": "1.16.0",
@@ -43,7 +45,7 @@
     "i18next-http-backend": "3.0.6",
     "jotai": "2.18.1",
     "jotai-optics": "0.4.0",
-    "js-cookie": "3.0.7",
+    "js-cookie": "3.0.5",
     "jwt-decode": "4.0.0",
     "katex": "0.16.40",
     "lowlight": "3.3.0",

apps/client/public/locales/de-DE/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "Namen stimmen nicht überein",
   "Today, {{time}}": "Heute, {{time}}",
   "Yesterday, {{time}}": "Gestern, {{time}}",
-  "now": "now",
   "Space created successfully": "Bereich erfolgreich erstellt",
   "Space updated successfully": "Bereich erfolgreich aktualisiert",
   "Space deleted successfully": "Bereich erfolgreich gelöscht",
@@ -1085,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."
 }

apps/client/public/locales/en-US/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "Names do not match",
   "Today, {{time}}": "Today, {{time}}",
   "Yesterday, {{time}}": "Yesterday, {{time}}",
-  "now": "now",
   "Space created successfully": "Space created successfully",
   "Space updated successfully": "Space updated successfully",
   "Space deleted successfully": "Space deleted successfully",
@@ -1085,5 +1084,23 @@
   "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."
 }

apps/client/public/locales/es-ES/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "Los nombres no coinciden",
   "Today, {{time}}": "Hoy, {{time}}",
   "Yesterday, {{time}}": "Ayer, {{time}}",
-  "now": "now",
   "Space created successfully": "Espacio creado correctamente",
   "Space updated successfully": "Espacio actualizado correctamente",
   "Space deleted successfully": "Espacio eliminado correctamente",
@@ -1085,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."
 }

apps/client/public/locales/fr-FR/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "Les noms ne correspondent pas",
   "Today, {{time}}": "Aujourd’hui, {{time}}",
   "Yesterday, {{time}}": "Hier, {{time}}",
-  "now": "now",
   "Space created successfully": "Espace créé avec succès",
   "Space updated successfully": "Espace mis à jour avec succès",
   "Space deleted successfully": "Espace supprimé avec succès",
@@ -1085,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."
 }

apps/client/public/locales/it-IT/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "I nomi non corrispondono",
   "Today, {{time}}": "Oggi, {{time}}",
   "Yesterday, {{time}}": "Ieri, {{time}}",
-  "now": "now",
   "Space created successfully": "Spazio creato con successo",
   "Space updated successfully": "Spazio aggiornato con successo",
   "Space deleted successfully": "Spazio eliminato con successo",
@@ -1085,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."
 }

apps/client/public/locales/ja-JP/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "名前が一致しません",
   "Today, {{time}}": "今日 {{time}}",
   "Yesterday, {{time}}": "昨日 {{time}}",
-  "now": "now",
   "Space created successfully": "スペースが正常に作成されました",
   "Space updated successfully": "スペースが正常に更新されました",
   "Space deleted successfully": "スペースが正常に削除されました",
@@ -1085,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."
 }

apps/client/public/locales/ko-KR/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "이름이 일치하지 않습니다",
   "Today, {{time}}": "오늘, {{time}}",
   "Yesterday, {{time}}": "어제, {{time}}",
-  "now": "now",
   "Space created successfully": "스페이스가 성공적으로 생성되었습니다",
   "Space updated successfully": "스페이스가 성공적으로 업데이트되었습니다",
   "Space deleted successfully": "스페이스가 성공적으로 삭제되었습니다",
@@ -1085,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."
 }

apps/client/public/locales/nl-NL/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "Namen komen niet overeen",
   "Today, {{time}}": "Vandaag, {{time}}",
   "Yesterday, {{time}}": "Gisteren, {{time}}",
-  "now": "now",
   "Space created successfully": "Ruimte succesvol aangemaakt",
   "Space updated successfully": "Ruimte succesvol bijgewerkt",
   "Space deleted successfully": "Ruimte succesvol verwijderd",
@@ -1085,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."
 }

apps/client/public/locales/pt-BR/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "Os nomes não correspondem",
   "Today, {{time}}": "Hoje, {{time}}",
   "Yesterday, {{time}}": "Ontem, {{time}}",
-  "now": "now",
   "Space created successfully": "Espaço criado com sucesso",
   "Space updated successfully": "Espaço atualizado com sucesso",
   "Space deleted successfully": "Espaço excluído com sucesso",
@@ -1085,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."
 }

apps/client/public/locales/ru-RU/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "Названия не совпадают",
   "Today, {{time}}": "Сегодня, {{time}}",
   "Yesterday, {{time}}": "Вчера, {{time}}",
-  "now": "сейчас",
   "Space created successfully": "Пространство успешно создано",
   "Space updated successfully": "Пространство успешно обновлено",
   "Space deleted successfully": "Пространство успешно удалено",
@@ -1085,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."
 }

apps/client/public/locales/uk-UA/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "Назви не збігаються",
   "Today, {{time}}": "Сьогодні, {{time}}",
   "Yesterday, {{time}}": "Вчора, {{time}}",
-  "now": "now",
   "Space created successfully": "Простір успішно створено",
   "Space updated successfully": "Простір успішно оновлено",
   "Space deleted successfully": "Простір успішно видалено",
@@ -1085,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."
 }

apps/client/public/locales/zh-CN/translation.json

@@ -424,7 +424,6 @@
   "Names do not match": "名称不匹配",
   "Today, {{time}}": "今天，{{time}}",
   "Yesterday, {{time}}": "昨天，{{time}}",
-  "now": "now",
   "Space created successfully": "空间创建成功",
   "Space updated successfully": "空间更新成功",
   "Space deleted successfully": "空间删除成功",
@@ -1085,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."
 }

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 "@/pages/base/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

apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Modal, Button, Group, Divider } from "@mantine/core";
+import { Modal, Button, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { DestinationPicker } from "./destination-picker";
 import {
@@ -52,9 +52,7 @@ export function DestinationPickerModal({
             searchSpacesOnly={searchSpacesOnly}
           />
 
-          <Divider my="md" />
-
-          <Group justify="flex-end">
+          <Group justify="flex-end" mt="md">
             <Button variant="default" onClick={onClose}>
               {t("Close")}
             </Button>

apps/client/src/components/ui/destination-picker/destination-picker.module.css

@@ -89,6 +89,14 @@
     }
 }
 
+.selectedIndicator {
+    padding: 8px 12px;
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+    margin-top: var(--mantine-spacing-xs);
+}
+
 .emptyState {
     padding: 12px;
     text-align: center;

apps/client/src/components/ui/destination-picker/destination-picker.tsx

@@ -221,6 +221,14 @@ export function DestinationPicker({
           ))
         )}
       </ScrollArea>
+
+      {selection && (
+        <div className={classes.selectedIndicator}>
+          {selection.type === "space"
+            ? selection.space.name
+            : `${selection.space.name} / ${selection.page.title || t("Untitled")}`}
+        </div>
+      )}
     </>
   );
 }

apps/client/src/ee/api-key/components/api-key-table.tsx

@@ -1,11 +1,11 @@
 import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
 import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
+import { format } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { IApiKey } from "@/ee/api-key";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import React from "react";
 import NoTableResults from "@/components/common/no-table-results";
-import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 
 interface ApiKeyTableProps {
   apiKeys: IApiKey[];
@@ -23,11 +23,10 @@ export function ApiKeyTable({
   onRevoke,
 }: ApiKeyTableProps) {
   const { t } = useTranslation();
-  const locale = useDateFnsLocale();
 
   const formatDate = (date: Date | string | null) => {
     if (!date) return t("Never");
-    return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
+    return format(new Date(date), "MMM dd, yyyy");
   };
 
   const isExpired = (expiresAt: string | null) => {

apps/client/src/ee/api-key/components/create-api-key-modal.tsx

@@ -31,7 +31,7 @@ export function CreateApiKeyModal({
   onClose,
   onSuccess,
 }: CreateApiKeyModalProps) {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const [expirationOption, setExpirationOption] = useState<string>("30");
   const createApiKeyMutation = useCreateApiKeyMutation();
 
@@ -59,7 +59,7 @@ export function CreateApiKeyModal({
   const getExpirationLabel = (days: number) => {
     const date = new Date();
     date.setDate(date.getDate() + days);
-    const formatted = date.toLocaleDateString(i18n.language, {
+    const formatted = date.toLocaleDateString("en-US", {
       month: "short",
       day: "2-digit",
       year: "numeric",

apps/client/src/ee/billing/components/billing-details.tsx

@@ -4,13 +4,12 @@ import {
 } from "@/ee/billing/queries/billing-query.ts";
 import { Group, Text, SimpleGrid, Paper } from "@mantine/core";
 import classes from "./billing.module.css";
+import { format } from "date-fns";
 import { formatInterval } from "@/ee/billing/utils.ts";
-import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 
 export default function BillingDetails() {
   const { data: billing } = useBillingQuery();
   const { data: plans } = useBillingPlans();
-  const locale = useDateFnsLocale();
 
   if (!billing || !plans) {
     return null;
@@ -76,12 +75,7 @@ export default function BillingDetails() {
                   : "Renewal date"}
               </Text>
               <Text fw={700} fz="lg">
-                {formatLocalized(
-                  billing.periodEndAt,
-                  "dd MMM, yyyy",
-                  "PP",
-                  locale,
-                )}
+                {format(billing.periodEndAt, "dd MMM, yyyy")}
               </Text>
             </div>
           </Group>

apps/client/src/ee/licence/components/license-details.tsx

@@ -1,14 +1,13 @@
 import { Badge, Table } from "@mantine/core";
+import { format } from "date-fns";
 import { useLicenseInfo } from "@/ee/licence/queries/license-query.ts";
 import { isLicenseExpired } from "@/ee/licence/license.utils.ts";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
-import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 
 export default function LicenseDetails() {
   const { data: license, isError } = useLicenseInfo();
   const [workspace] = useAtom(workspaceAtom);
-  const locale = useDateFnsLocale();
 
   if (!license) {
     return null;
@@ -51,16 +50,12 @@ export default function LicenseDetails() {
 
           <Table.Tr>
             <Table.Th>Issued at</Table.Th>
-            <Table.Td>
-              {formatLocalized(license.issuedAt, "dd MMMM, yyyy", "PPP", locale)}
-            </Table.Td>
+            <Table.Td>{format(license.issuedAt, "dd MMMM, yyyy")}</Table.Td>
           </Table.Tr>
 
           <Table.Tr>
             <Table.Th>Expires at</Table.Th>
-            <Table.Td>
-              {formatLocalized(license.expiresAt, "dd MMMM, yyyy", "PPP", locale)}
-            </Table.Td>
+            <Table.Td>{format(license.expiresAt, "dd MMMM, yyyy")}</Table.Td>
           </Table.Tr>
           <Table.Tr>
             <Table.Th>License ID</Table.Th>

apps/client/src/ee/page-verification/components/expiration-fields.tsx

@@ -1,7 +1,6 @@
 import { Group, NumberInput, Select, Text } from "@mantine/core";
 import { DateInput } from "@mantine/dates";
 import { useTranslation } from "react-i18next";
-import i18n from "@/i18n.ts";
 import {
   ExpirationMode,
   PeriodUnit,
@@ -31,7 +30,7 @@ export function addDays(days: number, from?: Date): Date {
 
 function formatShortDate(date: Date): string {
   const crossesYear = date.getFullYear() !== new Date().getFullYear();
-  return date.toLocaleDateString(i18n.language, {
+  return date.toLocaleDateString(undefined, {
     month: "short",
     day: "numeric",
     ...(crossesYear && { year: "numeric" }),
@@ -39,7 +38,7 @@ function formatShortDate(date: Date): string {
 }
 
 function formatLongDate(date: Date): string {
-  return date.toLocaleDateString(i18n.language, {
+  return date.toLocaleDateString(undefined, {
     month: "long",
     day: "numeric",
     year: "numeric",

apps/client/src/ee/page-verification/components/manage-verification-form.tsx

@@ -12,7 +12,6 @@ import {
 } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { useTranslation } from "react-i18next";
-import i18n from "@/i18n.ts";
 import {
   useMarkObsoleteMutation,
   usePageVerificationInfoQuery,
@@ -198,14 +197,11 @@ function ExpiringManageContent({ pageId, info, onClose }: ManageContentProps) {
             {info.expiresAt && (
               <Text size="xs" c="dimmed">
                 {t(status === "expired" ? "Expired {{date}}" : "Expires {{date}}", {
-                  date: new Date(info.expiresAt).toLocaleDateString(
-                    i18n.language,
-                    {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric",
-                    },
-                  ),
+                  date: new Date(info.expiresAt).toLocaleDateString(undefined, {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  }),
                 })}
               </Text>
             )}

apps/client/src/ee/page-verification/components/page-verification-modal.tsx

@@ -13,7 +13,6 @@ import {
   IconShieldCheck,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
-import i18n from "@/i18n.ts";
 import { useParams } from "react-router-dom";
 import { extractPageSlugId } from "@/lib";
 import { usePageQuery } from "@/features/page/queries/page-query";
@@ -128,7 +127,7 @@ export function PageVerificationBadge({
     status === "verified" && verificationInfo?.expiresAt
       ? t("Verified until {{date}}", {
           date: new Date(verificationInfo.expiresAt).toLocaleDateString(
-            i18n.language,
+            undefined,
             { month: "long", day: "numeric", year: "numeric" },
           ),
         })

apps/client/src/ee/page-verification/components/verification-list-table.tsx

@@ -16,10 +16,9 @@ import {
 } from "@/ee/page-verification/types/page-verification.types";
 import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { buildPageUrl } from "@/features/page/page.utils";
+import { format } from "date-fns";
 import NoTableResults from "@/components/common/no-table-results";
 import rowClasses from "@/components/ui/clickable-table-row.module.css";
-import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
-import type { Locale } from "date-fns";
 
 const MAX_VISIBLE_VERIFIERS = 5;
 
@@ -49,11 +48,7 @@ function statusBadge(status: VerificationStatus | null, t: (s: string) => string
   }
 }
 
-function verifiedUntilText(
-  item: IVerificationListItem,
-  t: (s: string) => string,
-  locale: Locale,
-): string {
+function verifiedUntilText(item: IVerificationListItem, t: (s: string) => string): string {
   if (item.type === "qms") {
     if (item.status === "approved") return t("Indefinitely");
     return "—";
@@ -65,7 +60,7 @@ function verifiedUntilText(
   const now = new Date();
 
   if (expires <= now) return t("Expired");
-  return formatLocalized(expires, "MMM d, yyyy", "PP", locale);
+  return format(expires, "MMM d, yyyy");
 }
 
 function TableSkeleton() {
@@ -103,7 +98,6 @@ export default function VerificationListTable({
   isLoading,
 }: VerificationListTableProps) {
   const { t } = useTranslation();
-  const locale = useDateFnsLocale();
 
   return (
     <Table.ScrollContainer minWidth={600}>
@@ -206,7 +200,7 @@ export default function VerificationListTable({
 
                   <Table.Td>
                     <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                      {verifiedUntilText(item, t, locale)}
+                      {verifiedUntilText(item, t)}
                     </Text>
                   </Table.Td>
 

apps/client/src/ee/scim/components/scim-token-table.tsx

@@ -1,11 +1,11 @@
 import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
 import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
+import { format } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import React from "react";
 import NoTableResults from "@/components/common/no-table-results";
 import { IScimToken } from "@/ee/scim/types/scim-token.types";
-import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 
 interface ScimTokenTableProps {
   tokens: IScimToken[];
@@ -21,11 +21,10 @@ export function ScimTokenTable({
   onRevoke,
 }: ScimTokenTableProps) {
   const { t } = useTranslation();
-  const locale = useDateFnsLocale();
 
   const formatDate = (date: Date | string | null) => {
     if (!date) return t("Never");
-    return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
+    return format(new Date(date), "MMM dd, yyyy");
   };
 
   return (

apps/client/src/ee/template/pages/template-editor.module.css

@@ -32,12 +32,6 @@
     margin-bottom: 0.25em;
 }
 
-/* The emoji glyph renders larger than its font-size box; let the transparent
-   ActionIcon overflow so it isn't clipped on the edges. */
-.emojiButton button {
-    overflow: visible;
-}
-
 .titleInput {
     font-size: 2.5rem;
     font-weight: 700;

apps/client/src/ee/template/pages/template-editor.tsx

@@ -32,12 +32,6 @@ import {
 } from "../queries/template-query";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import useUserRole from "@/hooks/use-user-role";
-import { useAtomValue } from "jotai";
-import { userAtom } from "@/features/user/atoms/current-user-atom";
-import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
-import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
-import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
-import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
 
 import classes from "./template-editor.module.css";
 
@@ -45,9 +39,6 @@ export default function TemplateEditor() {
   const { t } = useTranslation();
   const { templateId } = useParams<{ templateId: string }>();
   const { isAdmin: isWorkspaceAdmin } = useUserRole();
-  const user = useAtomValue(userAtom);
-  const editorToolbarEnabled =
-    user?.settings?.preferences?.editorToolbar ?? false;
 
   const { data: existingTemplate } = useGetTemplateByIdQuery(templateId || "");
   const { data: spaces } = useGetSpacesQuery({ limit: 100 });
@@ -247,10 +238,6 @@ export default function TemplateEditor() {
         </title>
       </Helmet>
 
-      {editorToolbarEnabled && editor && (
-        <FixedToolbar editor={editor} templateMode />
-      )}
-
       <div className={classes.header}>
         <Container size={900} h="100%" px={0}>
         <Group justify="space-between" h="100%" wrap="nowrap">
@@ -392,13 +379,6 @@ export default function TemplateEditor() {
           )}
         </div>
         <EditorContent editor={editor} />
-        {editor && (
-          <>
-            <EditorAiMenu editor={editor} />
-            <EditorBubbleMenu editor={editor} templateMode />
-            <EditorLinkMenu editor={editor} />
-          </>
-        )}
         <div style={{ paddingBottom: "20vh" }} />
       </Container>
     </>

apps/client/src/ee/template/queries/template-query.ts

@@ -5,7 +5,6 @@ import {
   useQueryClient,
   UseQueryResult,
   InfiniteData,
-  keepPreviousData,
 } from "@tanstack/react-query";
 import { useAtom, useStore } from "jotai";
 import {
@@ -36,7 +35,6 @@ export function useGetTemplatesQuery(params?: { spaceId?: string }) {
     initialPageParam: undefined as string | undefined,
     getNextPageParam: (lastPage) =>
       lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
-    placeholderData: keepPreviousData,
   });
 }
 

apps/client/src/features/base/atoms/base-atoms.ts

@@ -0,0 +1,38 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import { EditingCell } from "@/features/base/types/base.types";
+
+// Atoms are scoped per-base via `pageId` so that two BaseTable instances
+// rendered on the same page (e.g. multiple base embeds inside one
+// document) don't share UI state. A global atom would otherwise cause
+// each instance's `useEffect` writers to clobber the other's value
+// every render — pinning React into a "Maximum update depth exceeded"
+// loop.
+
+export const activeViewIdAtomFamily = atomFamily((_pageId: string) =>
+  atom<string | null>(null),
+);
+
+export const editingCellAtomFamily = atomFamily((_pageId: string) =>
+  atom<EditingCell>(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),
+);

apps/client/src/features/base/atoms/formula-recompute-atom.ts

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const formulaRecomputeAtom = atom<Record<string, string[]>>({});

apps/client/src/features/base/atoms/view-draft-atom.ts

@@ -0,0 +1,22 @@
+import { atomFamily, atomWithStorage } from "jotai/utils";
+import { BaseViewDraft } from "@/features/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, 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.pageId === b.pageId && a.viewId === b.viewId,
+);

apps/client/src/features/base/components/base-table-skeleton.tsx

@@ -0,0 +1,97 @@
+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 DEFAULT_COLUMN_COUNT = 6;
+const DEFAULT_ROW_COUNT = 10;
+
+// Deterministic per-cell widths so the skeleton doesn't flicker between
+// renders. Values are rough normal distribution around 55-85 % of cell.
+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 = {
+  // Override the rendered shape to match what the eventual content
+  // will be — the inline-embed placeholder passes rows=1, columns=3
+  // (matching the seeded Title + Text 1 + Text 2 with one default
+  // row) so the swap from skeleton to real table doesn't visibly
+  // collapse a large fake table down to a small empty one.
+  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 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 }}>
+          <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>
+  );
+}

apps/client/src/features/base/components/base-table.tsx

@@ -0,0 +1,67 @@
+import { GridContainer } from "@/features/base/components/grid/grid-container";
+import { Table } from "@tanstack/react-table";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+} from "@/features/base/types/base.types";
+
+type BaseTableProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  effectiveView: IBaseView | undefined;
+  table: Table<IBaseRow>;
+  pageId: string;
+  embedded?: 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;
+  scrollportEl: HTMLDivElement | null;
+  stickyBandPrelude?: React.ReactNode;
+};
+
+export function BaseTable({
+  base,
+  rows: _rows,
+  table,
+  pageId,
+  embedded,
+  hasNextPage,
+  isFetchingNextPage,
+  onFetchNextPage,
+  onCellUpdate,
+  onAddRow,
+  onColumnReorder,
+  onResizeEnd,
+  onRowReorder,
+  scrollportEl,
+  stickyBandPrelude,
+}: BaseTableProps) {
+  return (
+    <GridContainer
+      table={table}
+      properties={base.properties}
+      onCellUpdate={onCellUpdate}
+      onAddRow={onAddRow}
+      pageId={pageId}
+      onColumnReorder={onColumnReorder}
+      onResizeEnd={onResizeEnd}
+      onRowReorder={onRowReorder}
+      hasNextPage={hasNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      onFetchNextPage={onFetchNextPage}
+      scrollElement={embedded ? window : scrollportEl}
+      stickyBandPrelude={stickyBandPrelude ?? null}
+    />
+  );
+}

apps/client/src/features/base/components/base-toolbar.tsx

@@ -0,0 +1,328 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { ActionIcon, Tooltip, Badge } from "@mantine/core";
+import { Table } from "@tanstack/react-table";
+import {
+  IconSortAscending,
+  IconFilter,
+  IconEye,
+  IconDownload,
+} from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+  ViewSortConfig,
+  FilterCondition,
+  FilterGroup,
+} from "@/features/base/types/base.types";
+import { exportBaseToCsv } from "@/features/base/services/base-service";
+import { ViewTabs } from "@/features/base/components/views/view-tabs";
+import { ViewSortConfigPopover } from "@/features/base/components/views/view-sort-config";
+import { ViewFilterConfigPopover } from "@/features/base/components/views/view-filter-config";
+import { ViewFieldVisibility } from "@/features/base/components/views/view-field-visibility";
+import { KanbanGroupByPicker } from "@/features/base/components/views/kanban/kanban-group-by-picker";
+import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
+import { useTranslation } from "react-i18next";
+import classes from "@/features/base/styles/grid.module.css";
+
+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;
+};
+
+export function BaseToolbar({
+  base,
+  activeView,
+  views,
+  table,
+  onViewChange,
+  onAddView,
+  onPersistViewConfig,
+  onDraftSortsChange,
+  onDraftFiltersChange,
+}: BaseToolbarProps) {
+  const { t } = useTranslation();
+  const [sortOpened, setSortOpened] = useState(false);
+  const [filterOpened, setFilterOpened] = useState(false);
+  const [fieldsOpened, setFieldsOpened] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const toolbarRightRef = useRef<HTMLDivElement>(null);
+
+  // Mantine `<Popover>`'s built-in dismiss handlers don't fire reliably
+  // for the toolbar popovers (same issue that drove the property menu to
+  // use custom listeners in `grid-container.tsx`). Close any open toolbar
+  // popover on outside mousedown AND on ESC.
+  useEffect(() => {
+    if (!sortOpened && !filterOpened && !fieldsOpened) return;
+    const closeAll = () => {
+      setSortOpened(false);
+      setFilterOpened(false);
+      setFieldsOpened(false);
+    };
+    const mouseHandler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+      if (toolbarRightRef.current?.contains(target)) return;
+      // Ignore clicks that land inside any Mantine popover dropdown
+      // (role=dialog), any Select/Combobox dropdown (role=listbox, the
+      // container; option elements have role=option), or anything
+      // rendered into Mantine's shared portal node. Without these, a
+      // nested Select inside the popover would close the parent.
+      if (target.closest('[role="dialog"]')) return;
+      if (target.closest('[role="listbox"]')) return;
+      if (target.closest('[role="option"]')) return;
+      if (target.closest("[data-mantine-shared-portal-node]")) return;
+      closeAll();
+    };
+    const keyHandler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeAll();
+    };
+    const id = setTimeout(() => {
+      document.addEventListener("mousedown", mouseHandler);
+    }, 0);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      clearTimeout(id);
+      document.removeEventListener("mousedown", mouseHandler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [sortOpened, filterOpened, fieldsOpened]);
+
+  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" | "fields") => {
+    setSortOpened(panel === "sort" ? (v) => !v : false);
+    setFilterOpened(panel === "filter" ? (v) => !v : false);
+    setFieldsOpened(panel === "fields" ? (v) => !v : false);
+  }, []);
+
+  const sorts = activeView?.config?.sorts ?? [];
+  // Stored view config uses the engine's filter tree. The popover edits
+  // an AND-only flat list; we unwrap the top-level group's children when
+  // reading and 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 hiddenFieldCount = 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 updateViewMutation = useUpdateViewMutation();
+  const isKanban = activeView?.type === "kanban";
+
+  const handleGroupByChange = useCallback(
+    (propertyId: string) => {
+      if (!activeView) return;
+      updateViewMutation.mutate({
+        viewId: activeView.id,
+        pageId: base.id,
+        config: { ...activeView.config, groupByPropertyId: propertyId },
+      });
+    },
+    [activeView, base.id, updateViewMutation],
+  );
+
+  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],
+  );
+
+  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],
+  );
+
+  return (
+    <div className={classes.toolbar}>
+      <ViewTabs
+        views={views}
+        activeViewId={activeView?.id}
+        pageId={base.id}
+        onViewChange={onViewChange}
+        onAddView={onAddView}
+      />
+
+      {isKanban && (
+        <KanbanGroupByPicker
+          properties={base.properties}
+          value={activeView?.config?.groupByPropertyId ?? null}
+          onChange={handleGroupByChange}
+          size="xs"
+        />
+      )}
+
+      <div className={classes.toolbarRight} ref={toolbarRightRef}>
+        <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"
+                  style={{
+                    position: "absolute",
+                    top: -2,
+                    right: -2,
+                    padding: 0,
+                    width: 14,
+                    height: 14,
+                    minWidth: 14,
+                    fontSize: 9,
+                  }}
+                >
+                  {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"
+                  style={{
+                    position: "absolute",
+                    top: -2,
+                    right: -2,
+                    padding: 0,
+                    width: 14,
+                    height: 14,
+                    minWidth: 14,
+                    fontSize: 9,
+                  }}
+                >
+                  {sorts.length}
+                </Badge>
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </ViewSortConfigPopover>
+
+        {!isKanban && (
+          <ViewFieldVisibility
+            opened={fieldsOpened}
+            onClose={() => setFieldsOpened(false)}
+            table={table}
+            properties={base.properties}
+            onPersist={onPersistViewConfig}
+          >
+            <Tooltip label={t("Hide fields")}>
+              <ActionIcon
+                variant="subtle"
+                size="sm"
+                color={hiddenFieldCount > 0 ? "blue" : "gray"}
+                onClick={() => openToolbar("fields")}
+              >
+                <IconEye size={16} />
+                {hiddenFieldCount > 0 && (
+                  <Badge
+                    size="xs"
+                    circle
+                    color="blue"
+                    style={{
+                      position: "absolute",
+                      top: -2,
+                      right: -2,
+                      padding: 0,
+                      width: 14,
+                      height: 14,
+                      minWidth: 14,
+                      fontSize: 9,
+                    }}
+                  >
+                    {hiddenFieldCount}
+                  </Badge>
+                )}
+              </ActionIcon>
+            </Tooltip>
+          </ViewFieldVisibility>
+        )}
+      </div>
+    </div>
+  );
+}

apps/client/src/features/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="bottom"
+          withArrow
+        >
+          <Button
+            variant="light"
+            color="orange"
+            size="xs"
+            onClick={onSave}
+            loading={saving}
+          >
+            {t("Save for everyone")}
+          </Button>
+        </Tooltip>
+      )}
+    </Group>
+  );
+}

apps/client/src/features/base/components/base-view.tsx

@@ -0,0 +1,474 @@
+import { useCallback, useEffect, useMemo, useState } 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 "@/features/base/queries/base-query";
+import { useBaseSocket } from "@/features/base/hooks/use-base-socket";
+import {
+  FilterGroup,
+  ViewSortConfig,
+} from "@/features/base/types/base.types";
+import {
+  useBaseRowsQuery,
+  useBaseRowsCountQuery,
+  flattenRows,
+  useCreateRowMutation,
+  useUpdateRowMutation,
+  useReorderRowMutation,
+} from "@/features/base/queries/base-row-query";
+import {
+  useCreateViewMutation,
+  useUpdateViewMutation,
+} from "@/features/base/queries/base-view-query";
+import { activeViewIdAtomFamily } from "@/features/base/atoms/base-atoms";
+import { useBaseTable } from "@/features/base/hooks/use-base-table";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import useCurrentUser from "@/features/user/hooks/use-current-user";
+import { useViewDraft } from "@/features/base/hooks/use-view-draft";
+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 { BaseToolbar } from "@/features/base/components/base-toolbar";
+import { BaseViewDraftBanner } from "@/features/base/components/base-view-draft-banner";
+import { BaseTableSkeleton } from "@/features/base/components/base-table-skeleton";
+import { ViewRenderer } from "@/features/base/components/views/view-renderer";
+import { useRowDetailModal } from "@/features/base/hooks/use-row-detail-modal";
+import { RowDetailModal } from "@/features/base/components/row-detail-modal/row-detail-modal";
+import classes from "@/features/base/styles/grid.module.css";
+
+type BaseViewProps = {
+  pageId: string;
+  embedded?: boolean;
+};
+
+export function BaseView({ pageId, embedded }: BaseViewProps) {
+  const { t } = useTranslation();
+  // Subscribe to the base's realtime room so other clients' edits,
+  // schema changes, and async-job completions reconcile into our cache.
+  useBaseSocket(pageId);
+  const { data: base, isLoading: baseLoading, error: baseError } =
+    useBaseQuery(pageId);
+
+  const [activeViewId, setActiveViewId] = useAtom(
+    activeViewIdAtomFamily(pageId),
+  ) as unknown as [string | null, (val: string | null) => void];
+
+  const views = 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();
+  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,
+  });
+
+  // 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],
+  );
+
+  // 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;
+
+  // `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);
+  // Bases are pages — gate save on the same Page subject the rest of
+  // the app uses; the dedicated Base subject was redundant.
+  const canSave = spaceAbility.can(
+    SpaceCaslAction.Edit,
+    SpaceCaslSubject.Page,
+  );
+
+  // Hold the rows query until `base` has loaded. Otherwise the query
+  // fires once with `activeFilter` / `activeSorts` still undefined
+  // (a "bland" list request), then fires a second time as soon as the
+  // active view's config resolves — doubling network traffic on every
+  // base open for any view that has sort or filter.
+  const {
+    data: rowsData,
+    isLoading: rowsLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useBaseRowsQuery(base ? pageId : undefined, activeFilter, activeSorts);
+
+  // Fire the count request alongside the rows query. Not rendered yet —
+  // this mounts the query so its cache is warm for when the toolbar
+  // consumes it. Gate on `currentUser` too so `useViewDraft` has had a
+  // chance to hydrate the persisted draft from localStorage; otherwise
+  // the first post-refresh count would race ahead of the user's saved
+  // filter and fire with baseline-only (or nothing).
+  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]);
+
+  const { clear: clearSelection } = useRowSelection(pageId);
+  useEffect(() => {
+    clearSelection();
+  }, [pageId, activeView?.id, clearSelection]);
+
+  // Track the scrollport element in state (not a ref) so the virtualizer's
+  // `_willUpdate` re-runs when the div attaches on first mount. Reading
+  // `scrollportRef.current` during render would always be null on the
+  // render that mounts the div, and no subsequent render is guaranteed —
+  // particularly after a filter change, where the scrollport remounts via
+  // the `rowsLoading` skeleton path. The virtualizer would then sit on
+  // `scrollElement=null`, render zero items, and only recover when
+  // something else forced a re-render (e.g. switching views).
+  const [scrollportEl, setScrollportEl] = useState<HTMLDivElement | null>(null);
+
+  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]);
+
+  const { table, persistViewConfig } = useBaseTable(base, rows, effectiveView, {
+    baselineConfig: activeView?.config,
+  });
+
+  const isKanban = effectiveView?.type === "kanban";
+
+  const handleCellUpdate = useCallback(
+    (rowId: string, propertyId: string, value: unknown) => {
+      updateRowMutation.mutate({
+        rowId,
+        pageId,
+        cells: { [propertyId]: value },
+      });
+    },
+    [pageId, updateRowMutation],
+  );
+
+  const handleAddRow = useCallback(() => {
+    createRowMutation.mutate({ pageId });
+  }, [pageId, createRowMutation]);
+
+  const handleViewChange = useCallback(
+    (viewId: string) => {
+      setActiveViewId(viewId);
+    },
+    [setActiveViewId],
+  );
+
+  const handleAddView = useCallback(() => {
+    createViewMutation.mutate({
+      pageId,
+      name: t("New view"),
+      type: "table",
+    });
+  }, [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 }));
+      persistViewConfig();
+    },
+    [table, persistViewConfig],
+  );
+
+  const handleResizeEnd = useCallback(() => {
+    persistViewConfig();
+  }, [persistViewConfig]);
+
+  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;
+    // `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,
+        pageId: 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,
+  ]);
+
+  const { openRowId, openRow, closeRow } = useRowDetailModal();
+  const handleCardClick = useCallback(
+    (rowId: string) => openRow(rowId),
+    [openRow],
+  );
+
+  const handleRowReorder = useCallback(
+    (rowId: string, targetRowId: string, dropPosition: "above" | "below") => {
+      const remainingRows = rows.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);
+        }
+        reorderRowMutation.mutate({ rowId, pageId, position: newPosition });
+      } catch {
+        // Position computation failed — skip silently.
+      }
+    },
+    [rows, pageId, reorderRowMutation],
+  );
+
+  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;
+
+  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={handleAddView}
+      onPersistViewConfig={persistViewConfig}
+      onDraftSortsChange={handleDraftSortsChange}
+      onDraftFiltersChange={handleDraftFiltersChange}
+    />
+  );
+
+  if (embedded) {
+    // Inline: banner + toolbar live inside the StickyBand (passed via
+    // stickyBandPrelude). The page is the vertical scroll container.
+    return (
+      <>
+        <ViewRenderer
+          base={base}
+          rows={rows}
+          effectiveView={effectiveView}
+          table={table}
+          pageId={pageId}
+          embedded={embedded}
+          hasNextPage={!!hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          onFetchNextPage={fetchNextPage}
+          onCellUpdate={handleCellUpdate}
+          onAddRow={handleAddRow}
+          onColumnReorder={handleColumnReorder}
+          onResizeEnd={handleResizeEnd}
+          onRowReorder={handleRowReorder}
+          onCardClick={handleCardClick}
+          persistViewConfig={persistViewConfig}
+          scrollportEl={scrollportEl}
+          stickyBandPrelude={
+            <>
+              {banner}
+              {toolbar}
+            </>
+          }
+        />
+        <RowDetailModal
+          base={base}
+          rows={rows}
+          openRowId={openRowId}
+          canEdit={canSave}
+          onClose={closeRow}
+        />
+      </>
+    );
+  }
+
+  // Standalone: banner + toolbar sit above the .tableScrollport, which
+  // is the vertical scroll container. StickyBand inside contains only
+  // the column-header row.
+  return (
+    <>
+      <div
+        style={{ display: "flex", flexDirection: "column", height: "100%" }}
+      >
+        {banner}
+        {toolbar}
+        {isKanban ? (
+          <div
+            ref={setScrollportEl}
+            style={{
+              flex: 1,
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <ViewRenderer
+              base={base}
+              rows={rows}
+              effectiveView={effectiveView}
+              table={table}
+              pageId={pageId}
+              embedded={embedded}
+              hasNextPage={!!hasNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              onFetchNextPage={fetchNextPage}
+              onCellUpdate={handleCellUpdate}
+              onAddRow={handleAddRow}
+              onColumnReorder={handleColumnReorder}
+              onResizeEnd={handleResizeEnd}
+              onRowReorder={handleRowReorder}
+              onCardClick={handleCardClick}
+              persistViewConfig={persistViewConfig}
+              scrollportEl={scrollportEl}
+            />
+          </div>
+        ) : (
+          <div className={classes.tableScrollport} ref={setScrollportEl}>
+            <ViewRenderer
+              base={base}
+              rows={rows}
+              effectiveView={effectiveView}
+              table={table}
+              pageId={pageId}
+              embedded={embedded}
+              hasNextPage={!!hasNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              onFetchNextPage={fetchNextPage}
+              onCellUpdate={handleCellUpdate}
+              onAddRow={handleAddRow}
+              onColumnReorder={handleColumnReorder}
+              onResizeEnd={handleResizeEnd}
+              onRowReorder={handleRowReorder}
+              onCardClick={handleCardClick}
+              persistViewConfig={persistViewConfig}
+              scrollportEl={scrollportEl}
+            />
+          </div>
+        )}
+      </div>
+      <RowDetailModal
+        base={base}
+        rows={rows}
+        openRowId={openRowId}
+        canEdit={canSave}
+        onClose={closeRow}
+      />
+    </>
+  );
+}

apps/client/src/features/base/components/cells/cell-checkbox.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { Checkbox } from "@mantine/core";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellCheckboxProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellCheckbox({
+  value,
+  onCommit,
+}: CellCheckboxProps) {
+  const checked = value === true;
+
+  const handleChange = useCallback(() => {
+    onCommit(!checked);
+  }, [checked, onCommit]);
+
+  return (
+    <div className={cellClasses.checkboxCell} onClick={handleChange}>
+      <Checkbox
+        checked={checked}
+        onChange={() => {}}
+        size="xs"
+        tabIndex={-1}
+        styles={{ input: { cursor: "pointer", pointerEvents: "none" } }}
+      />
+    </div>
+  );
+}

apps/client/src/features/base/components/cells/cell-created-at.tsx

@@ -0,0 +1,34 @@
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/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>;
+}

apps/client/src/features/base/components/cells/cell-date.tsx

@@ -0,0 +1,141 @@
+import { useCallback } from "react";
+import { Popover } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import {
+  IBaseProperty,
+  DateTypeOptions,
+} from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellDateProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+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
+        onClose={onCancel}
+        position="bottom-start"
+        width="auto"
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            <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>
+  );
+}

apps/client/src/features/base/components/cells/cell-email.tsx

@@ -0,0 +1,90 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellEmailProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellEmail({
+  value,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellEmailProps) {
+  const displayValue = typeof value === "string" ? value : "";
+  const [draft, setDraft] = useState(displayValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      committedRef.current = false;
+      setDraft(displayValue);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, displayValue]);
+
+  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(draft || null);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [draft, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(draft || null);
+  }, [draft, commitOnce]);
+
+  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}
+      />
+    );
+  }
+
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <a
+      className={cellClasses.emailLink}
+      href={`mailto:${displayValue}`}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {displayValue}
+    </a>
+  );
+}

apps/client/src/features/base/components/cells/cell-file.tsx

@@ -0,0 +1,256 @@
+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 "@/features/base/types/base.types";
+import cellClasses from "@/features/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;
+  // `/api/files/{id}/{fileName}` — same shape the editor's attachment
+  // node view uses. `getFileUrl` strips the `/api/` prefix and
+  // prepends the backend host to produce a fetchable URL. Stored on
+  // upload so the original filename round-trips even if the cell
+  // value is moved to a row where the file's storage path no longer
+  // resolves from the cell's pageId.
+  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;
+  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,
+  onCommit,
+  onCancel,
+}: CellFileProps) {
+  const files = parseFiles(value);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const handleRemove = useCallback(
+    (fileId: string) => {
+      const updated = files.filter((f) => f.id !== fileId);
+      onCommit(updated.length > 0 ? updated : null);
+    },
+    [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. A base IS a page
+      // (isBase=true) — the server's /files/upload endpoint accepts the
+      // base's pageId, runs the standard pageAccessService.validateCanEdit
+      // check (which lines up with Base edit at the space-role level per
+      // the casl rules), and stores the attachment via the same flow 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
+        onClose={onCancel}
+        position="bottom-start"
+        width={280}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            <FileList files={files} maxVisible={MAX_VISIBLE} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={8} onKeyDown={handleKeyDown}>
+          {files.length === 0 && !uploading && (
+            <Text size="xs" c="dimmed" mb={8}>
+              No files attached
+            </Text>
+          )}
+
+          {files.map((file) => (
+            <div
+              key={file.id}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "4px 0",
+                borderBottom:
+                  "1px solid var(--mantine-color-default-border)",
+              }}
+            >
+              <IconFile
+                size={14}
+                style={{
+                  flexShrink: 0,
+                  color: "var(--mantine-color-gray-6)",
+                }}
+              />
+              <a
+                href={getFileUrl(buildFileUrl(file))}
+                target="_blank"
+                rel="noreferrer"
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  textDecoration: "none",
+                  color: "inherit",
+                }}
+              >
+                <Text size="xs" truncate="end" fw={500}>
+                  {file.fileName}
+                </Text>
+                {file.fileSize != null && (
+                  <Text size="xs" c="dimmed">
+                    {formatFileSize(file.fileSize)}
+                  </Text>
+                )}
+              </a>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="xs"
+                onClick={() => handleRemove(file.id)}
+              >
+                <IconX size={12} />
+              </ActionIcon>
+            </div>
+          ))}
+
+          <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}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "6px 0",
+              marginTop: 4,
+              fontSize: "var(--mantine-font-size-xs)",
+              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>
+  );
+}

apps/client/src/features/base/components/cells/cell-formula.tsx

@@ -0,0 +1,38 @@
+import { Badge, Tooltip } from "@mantine/core";
+import {
+  IBaseProperty,
+  isFormulaErrorCell,
+} from "@/features/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} />;
+}

apps/client/src/features/base/components/cells/cell-last-edited-at.tsx

@@ -0,0 +1,34 @@
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/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>;
+}

apps/client/src/features/base/components/cells/cell-last-edited-by.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import { Group } from "@mantine/core";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import cellClasses from "@/features/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 }: CellLastEditedByProps) {
+  const userId = typeof value === "string" ? value : null;
+
+  const { data: membersData } = useWorkspaceMembersQuery({ limit: 100 });
+
+  const user = useMemo(() => {
+    if (!userId || !membersData?.items) return null;
+    return membersData.items.find((u) => u.id === userId) ?? null;
+  }, [userId, membersData?.items]);
+
+  if (!userId) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <Group gap={6} wrap="nowrap" style={{ overflow: "hidden" }}>
+      <CustomAvatar
+        avatarUrl={user?.avatarUrl ?? ""}
+        name={user?.name ?? ""}
+        size={20}
+        radius="xl"
+      />
+      {user?.name && (
+        <span
+          style={{
+            fontSize: "var(--mantine-font-size-sm)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {user.name}
+        </span>
+      )}
+    </Group>
+  );
+}

apps/client/src/features/base/components/cells/cell-multi-select.tsx

@@ -0,0 +1,260 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/features/base/types/base.types";
+import { choiceColor } from "@/features/base/components/cells/choice-color";
+import { useUpdatePropertyMutation } from "@/features/base/queries/base-property-query";
+import { v7 as uuid7 } from "uuid";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/features/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;
+  onCancel: () => void;
+};
+
+export function CellMultiSelect({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  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;
+
+  const handleToggle = useCallback(
+    (choice: Choice) => {
+      const newIds = selectedSet.has(choice.id)
+        ? selectedIds.filter((id) => id !== choice.id)
+        : [...selectedIds, choice.id];
+      onCommit(newIds);
+    },
+    [selectedIds, selectedSet, 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([...selectedIds, newChoice.id]);
+    setSearch("");
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, selectedIds, 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") handleToggle(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, navItems, handleToggle, handleAddOption, showAddOption],
+  );
+
+  const MAX_VISIBLE = 3;
+
+  if (isEditing) {
+    const addOptionIdx = filteredChoices.length;
+    return (
+      <Popover
+        opened
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            <BadgeList choices={selectedChoices} maxVisible={MAX_VISIBLE} />
+          </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 = 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)}
+                  onMouseDown={(e) => {
+                    // Keep focus on the search input so click doesn't blur + close popover.
+                    e.preventDefault();
+                  }}
+                  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)}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                }}
+                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} maxVisible={MAX_VISIBLE} />;
+}
+
+function BadgeList({
+  choices,
+  maxVisible,
+}: {
+  choices: Choice[];
+  maxVisible: number;
+}) {
+  const visible = choices.slice(0, maxVisible);
+  const overflow = choices.length - maxVisible;
+
+  return (
+    <div className={cellClasses.badgeGroup}>
+      {visible.map((choice) => (
+        <span
+          key={choice.id}
+          className={cellClasses.badge}
+          style={choiceColor(choice.color)}
+        >
+          {choice.name}
+        </span>
+      ))}
+      {overflow > 0 && (
+        <span className={cellClasses.overflowCount}>+{overflow}</span>
+      )}
+    </div>
+  );
+}

apps/client/src/features/base/components/cells/cell-number.tsx

@@ -0,0 +1,122 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import {
+  IBaseProperty,
+  NumberTypeOptions,
+} from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellNumberProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+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 "currency":
+      return `${options?.currencySymbol ?? "$"}${val.toFixed(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);
+  }
+}
+
+export function CellNumber({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellNumberProps) {
+  const numValue = typeof value === "number" ? value : null;
+  const typeOptions = property.typeOptions as NumberTypeOptions | undefined;
+  const [draft, setDraft] = useState(numValue != null ? String(numValue) : "");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      committedRef.current = false;
+      setDraft(numValue != null ? String(numValue) : "");
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, numValue]);
+
+  const parseDraft = useCallback(() => {
+    const parsed = draft === "" ? null : Number(draft);
+    return parsed != null && isNaN(parsed) ? null : parsed;
+  }, [draft]);
+
+  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(parseDraft());
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [parseDraft, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(parseDraft());
+  }, [parseDraft, commitOnce]);
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="decimal"
+        className={cellClasses.cellInput}
+        style={{ textAlign: "right" }}
+        value={draft}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (v === "" || v === "-" || /^-?\d*\.?\d*$/.test(v)) {
+            setDraft(v);
+          }
+        }}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  if (numValue == null) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <span className={cellClasses.numberValue}>
+      {formatNumber(numValue, typeOptions)}
+    </span>
+  );
+}

apps/client/src/features/base/components/cells/cell-page.tsx

@@ -0,0 +1,268 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, ActionIcon, Text } 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 clsx from "clsx";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import { useResolvedPages } from "@/features/base/queries/base-page-resolver-query";
+import { useBaseQuery } from "@/features/base/queries/base-query";
+import { searchSuggestions } from "@/features/search/services/search-service";
+import { buildPageUrl } from "@/features/page/page.utils";
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+import cellClasses from "@/features/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;
+}
+
+export function CellPage({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellPageProps) {
+  const pageId = parsePageId(value);
+  const { data: base } = useBaseQuery(property.pageId);
+
+  const ids = useMemo(() => (pageId ? [pageId] : []), [pageId]);
+  const { pages } = useResolvedPages(ids);
+  const resolvedPage = pageId ? pages.get(pageId) : undefined;
+
+  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) {
+    // Still resolving — render an empty pill-shaped placeholder to avoid
+    // the "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 title = page.title || "Untitled";
+  const spaceSlug = page.space?.slug ?? "";
+  const url = buildPageUrl(spaceSlug, page.slugId, title);
+
+  return (
+    <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>
+  );
+}
+
+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 [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 250);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, []);
+
+  const trimmed = debouncedSearch.trim();
+  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[];
+    },
+    staleTime: 15_000,
+  });
+
+  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 onClose={onCancel} position="bottom-start" width={320} trapFocus>
+      <Popover.Target>
+        <div style={{ width: "100%", height: "100%" }}>
+          {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} />
+              )}
+              <span className={cellClasses.personTagName}>
+                {resolvedPage.title || "Untitled"}
+              </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}
+          />
+        </div>
+
+        <div className={cellClasses.personDropdownDivider} />
+        <div className={cellClasses.selectDropdown}>
+          {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)}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => handleSelect(page.id)}
+              >
+                {page.icon ? (
+                  <span>{page.icon}</span>
+                ) : (
+                  <IconFileDescription size={14} />
+                )}
+                <span className={cellClasses.personOptionName}>
+                  {page.title || "Untitled"}
+                </span>
+                {page.space?.name && (
+                  <Text size="xs" c="dimmed" ml="auto" truncate>
+                    {page.space.name}
+                  </Text>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/features/base/components/cells/cell-person.tsx

@@ -0,0 +1,263 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  PersonTypeOptions,
+} from "@/features/base/types/base.types";
+import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+
+type CellPersonProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellPerson({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellPersonProps) {
+  const allowMultiple =
+    (property.typeOptions as PersonTypeOptions)?.allowMultiple !== false;
+
+  const personIds = Array.isArray(value)
+    ? (value as string[])
+    : typeof value === "string"
+      ? [value]
+      : [];
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const { data: membersData } = useWorkspaceMembersQuery({ limit: 100 });
+  const members = membersData?.items ?? [];
+  const memberMap = useMemo(() => {
+    const map = new Map<string, (typeof members)[0]>();
+    for (const m of members) map.set(m.id, m);
+    return map;
+  }, [members]);
+
+  const filteredMembers = search
+    ? members.filter(
+        (m) =>
+          m.name.toLowerCase().includes(search.toLowerCase()) ||
+          (m.email && m.email.toLowerCase().includes(search.toLowerCase())),
+      )
+    : members;
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(filteredMembers.length, [search, isEditing]);
+
+  const handleSelect = useCallback(
+    (memberId: string) => {
+      if (allowMultiple) {
+        // Multi mode: toggle add/remove
+        if (personIds.includes(memberId)) {
+          const newIds = personIds.filter((id) => id !== memberId);
+          onCommit(newIds.length > 0 ? newIds : null);
+        } else {
+          onCommit([...personIds, memberId]);
+        }
+      } else {
+        // Single mode: replace or clear
+        if (personIds.includes(memberId)) {
+          onCommit(null);
+        } else {
+          onCommit(memberId);
+        }
+      }
+    },
+    [allowMultiple, personIds, onCommit],
+  );
+
+  const handleRemove = useCallback(
+    (memberId: string) => {
+      if (allowMultiple) {
+        const newIds = personIds.filter((id) => id !== memberId);
+        onCommit(newIds.length > 0 ? newIds : null);
+      } else {
+        onCommit(null);
+      }
+    },
+    [allowMultiple, personIds, 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 >= 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],
+  );
+
+  const selectedSet = new Set(personIds);
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onClose={onCancel}
+        position="bottom-start"
+        width={300}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            <PersonReadList personIds={personIds} memberMap={memberMap} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={0}>
+          {/* Tag input area */}
+          <div className={cellClasses.personTagArea}>
+            {personIds.map((id) => {
+              const member = memberMap.get(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}
+            />
+          </div>
+
+          {/* Dropdown */}
+          <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)}
+                  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>
+              );
+            })}
+            {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} memberMap={memberMap} />;
+}
+
+function PersonReadList({
+  personIds,
+  memberMap,
+}: {
+  personIds: string[];
+  memberMap: Map<
+    string,
+    { id: string; name: string; email?: string; avatarUrl?: string }
+  >;
+}) {
+  return (
+    <div className={cellClasses.personGroup}>
+      {personIds.map((id) => {
+        const member = memberMap.get(id);
+        const name = member?.name ?? id.substring(0, 8);
+        return (
+          <div key={id} className={cellClasses.personRow}>
+            <CustomAvatar
+              avatarUrl={member?.avatarUrl ?? ""}
+              name={name}
+              size={20}
+              radius="xl"
+            />
+            <span className={cellClasses.personName}>{name}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

apps/client/src/features/base/components/cells/cell-renderer.tsx

@@ -0,0 +1,56 @@
+import { IBaseProperty } from "@/features/base/types/base.types";
+import { CellText } from "./cell-text";
+import { CellNumber } from "./cell-number";
+import { CellSelect } from "./cell-select";
+import { CellStatus } from "./cell-status";
+import { CellMultiSelect } from "./cell-multi-select";
+import { CellDate } from "./cell-date";
+import { CellCheckbox } from "./cell-checkbox";
+import { CellUrl } from "./cell-url";
+import { CellEmail } from "./cell-email";
+import { CellPerson } from "./cell-person";
+import { CellFile } from "./cell-file";
+import { CellPage } from "./cell-page";
+import { CellCreatedAt } from "./cell-created-at";
+import { CellLastEditedAt } from "./cell-last-edited-at";
+import { CellLastEditedBy } from "./cell-last-edited-by";
+import { CellFormula } from "./cell-formula";
+
+export type CellComponentProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export const cellComponents: Record<
+  string,
+  React.ComponentType<CellComponentProps>
+> = {
+  text: CellText,
+  number: CellNumber,
+  select: CellSelect,
+  status: CellStatus,
+  multiSelect: CellMultiSelect,
+  date: CellDate,
+  checkbox: CellCheckbox,
+  url: CellUrl,
+  email: CellEmail,
+  person: CellPerson,
+  file: CellFile,
+  page: CellPage,
+  createdAt: CellCreatedAt,
+  lastEditedAt: CellLastEditedAt,
+  lastEditedBy: CellLastEditedBy,
+  formula: CellFormula,
+};
+
+type CellRendererProps = CellComponentProps;
+
+export function CellRenderer(props: CellRendererProps) {
+  const Component = cellComponents[props.property.type];
+  if (!Component) return null;
+  return <Component {...props} />;
+}

apps/client/src/features/base/components/cells/cell-select.tsx

@@ -0,0 +1,242 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/features/base/types/base.types";
+import { choiceColor } from "@/features/base/components/cells/choice-color";
+import { useUpdatePropertyMutation } from "@/features/base/queries/base-property-query";
+import { v7 as uuid7 } from "uuid";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/features/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
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            {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)}
+                  onMouseDown={(e) => {
+                    // Keep focus on the search input so click doesn't blur + close popover.
+                    e.preventDefault();
+                  }}
+                  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)}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                }}
+                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 (
+    <span
+      className={cellClasses.badge}
+      style={choiceColor(selectedChoice.color)}
+    >
+      {selectedChoice.name}
+    </span>
+  );
+}

apps/client/src/features/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 "@/features/base/types/base.types";
+import { choiceColor } from "@/features/base/components/cells/choice-color";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import clsx from "clsx";
+import { useListKeyboardNav } from "@/features/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
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            {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)}
+                      onMouseDown={(e) => {
+                        // Keep focus on the search input so click doesn't blur + close popover.
+                        e.preventDefault();
+                      }}
+                      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 (
+    <span
+      className={cellClasses.badge}
+      style={choiceColor(selectedChoice.color)}
+    >
+      {selectedChoice.name}
+    </span>
+  );
+}

apps/client/src/features/base/components/cells/cell-text.tsx

@@ -0,0 +1,82 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import gridClasses from "@/features/base/styles/grid.module.css";
+
+type CellTextProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellText({
+  value,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellTextProps) {
+  const displayValue = typeof value === "string" ? value : "";
+  const [draft, setDraft] = useState(displayValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      committedRef.current = false;
+      setDraft(displayValue);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, displayValue]);
+
+  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(draft);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [draft, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(draft);
+  }, [draft, commitOnce]);
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        className={cellClasses.cellInput}
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <span className={gridClasses.cellContent}>{displayValue}</span>;
+}

apps/client/src/features/base/components/cells/cell-url.tsx

@@ -0,0 +1,92 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellUrlProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellUrl({
+  value,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellUrlProps) {
+  const displayValue = typeof value === "string" ? value : "";
+  const [draft, setDraft] = useState(displayValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      committedRef.current = false;
+      setDraft(displayValue);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, displayValue]);
+
+  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(draft || null);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [draft, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(draft || null);
+  }, [draft, commitOnce]);
+
+  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}
+      />
+    );
+  }
+
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <a
+      className={cellClasses.urlLink}
+      href={displayValue}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {displayValue}
+    </a>
+  );
+}

apps/client/src/features/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: "#1971c2", textDark: "#74c0fc" },
+  cyan: { bg: "#c3fae8", bgDark: "#1a3a3a", text: "#0c8599", textDark: "#66d9e8" },
+  teal: { bg: "#c3fae8", bgDark: "#1a3a2e", text: "#087f5b", textDark: "#63e6be" },
+  green: { bg: "#d3f9d8", bgDark: "#1a3a1a", text: "#2b8a3e", textDark: "#69db7c" },
+  lime: { bg: "#e9fac8", bgDark: "#2e3a1a", text: "#5c940d", textDark: "#a9e34b" },
+  yellow: { bg: "#fff3bf", bgDark: "#3a351a", text: "#e67700", textDark: "#ffd43b" },
+  orange: { bg: "#ffe8cc", bgDark: "#3a2a1a", text: "#d9480f", 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})`,
+  };
+}

apps/client/src/features/base/components/formula/formula-editor.tsx

@@ -0,0 +1,220 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Button,
+  Divider,
+  Group,
+  Kbd,
+  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 "@/features/base/hooks/use-formula-parser";
+import type { IBaseProperty } from "@/features/base/types/base.types";
+
+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;
+
+  // After a palette insert mutates `source`, wait for React to flush the
+  // new value into the textarea, then focus + restore the cursor. Using
+  // useEffect (not RAF) guarantees the DOM update ran first.
+  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);
+    // Add a space separator when inserting after content that would
+    // otherwise mash against the snippet (e.g. `2` + `prop("A")`).
+    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
+          gap={10}
+          px="md"
+          py={12}
+          style={{
+            borderBottom: "1px solid var(--mantine-color-gray-2)",
+          }}
+        >
+          <div
+            style={{
+              width: 22,
+              height: 22,
+              borderRadius: 5,
+              display: "grid",
+              placeItems: "center",
+              background: "var(--mantine-color-blue-0)",
+              color: "var(--mantine-color-blue-6)",
+            }}
+          >
+            <IconMathFunction size={14} />
+          </div>
+          <Text size="sm" fw={600}>
+            Formula
+          </Text>
+          {name && (
+            <Text size="sm" c="dimmed">
+              · {name}
+            </Text>
+          )}
+        </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>
+
+        <Group
+          justify="space-between"
+          px="md"
+          py={10}
+          style={{
+            borderTop: "1px solid var(--mantine-color-gray-2)",
+            background: "var(--mantine-color-gray-0)",
+          }}
+        >
+          <Group gap={6}>
+            <Kbd>⌘</Kbd>
+            <Kbd>↵</Kbd>
+            <Text size="xs" c="dimmed">
+              to save
+            </Text>
+          </Group>
+          <Group gap={8}>
+            <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>
+    </Paper>
+  );
+}

apps/client/src/features/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)",
+          },
+        }}
+      />
+    );
+  },
+);

apps/client/src/features/base/components/formula/function-palette.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import {
+  Accordion,
+  Group,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import type { FormulaFn } from "@docmost/base-formula/client";
+
+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)}
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "4px 10px",
+                        borderRadius: 5,
+                        fontFamily:
+                          "ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace",
+                        fontSize: 12.5,
+                        color: "var(--mantine-color-blue-7)",
+                        background: "var(--mantine-color-white)",
+                        border: "1px solid var(--mantine-color-gray-3)",
+                        cursor: "pointer",
+                      }}
+                    >
+                      {fn.name}
+                      <span style={{ color: "var(--mantine-color-gray-5)" }}>
+                        ()
+                      </span>
+                    </UnstyledButton>
+                  </Tooltip>
+                ))}
+              </Group>
+            </Accordion.Panel>
+          </Accordion.Item>
+        );
+      })}
+    </Accordion>
+  );
+}

apps/client/src/features/base/components/formula/property-chip-row.tsx

@@ -0,0 +1,67 @@
+import { useState, useMemo } from "react";
+import { Group, TextInput, UnstyledButton, Text } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import type { IBaseProperty } from "@/features/base/types/base.types";
+
+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)}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                padding: "3px 9px",
+                borderRadius: 6,
+                fontSize: 12.5,
+                fontWeight: 500,
+                lineHeight: 1.4,
+                background: "var(--mantine-color-blue-0)",
+                border: "1px solid var(--mantine-color-blue-2)",
+                color: "var(--mantine-color-blue-7)",
+                cursor: "pointer",
+              }}
+            >
+              {p.name}
+            </UnstyledButton>
+          ))}
+        </Group>
+      )}
+    </div>
+  );
+}

apps/client/src/features/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 "@/features/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>
+  );
+});

apps/client/src/features/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 "@/features/base/styles/grid.module.css";
+
+type Props = {
+  edge: Edge;
+};
+
+export function BaseDropEdgeIndicator({ edge }: Props) {
+  return <div className={classes.dropEdgeLine} data-edge={edge} aria-hidden />;
+}

apps/client/src/features/base/components/grid/grid-cell.tsx

@@ -0,0 +1,112 @@
+import { memo, useCallback } from "react";
+import { Cell } from "@tanstack/react-table";
+import { useAtom } from "jotai";
+import { IBaseRow, EditingCell } from "@/features/base/types/base.types";
+import { editingCellAtomFamily } from "@/features/base/atoms/base-atoms";
+import { isSystemPropertyType } from "@/features/base/hooks/use-base-table";
+import { cellComponents } from "@/features/base/components/cells/cell-renderer";
+import { RowNumberCell } from "./row-number-cell";
+import classes from "@/features/base/styles/grid.module.css";
+
+type RowDragProps = {
+  draggable: boolean;
+  onDragStart: (e: React.DragEvent) => void;
+};
+
+type GridCellProps = {
+  cell: Cell<IBaseRow, unknown>;
+  rowIndex: number;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  rowDragProps?: RowDragProps;
+  orderedRowIds?: string[];
+  pageId: string;
+};
+
+export const GridCell = memo(function GridCell({
+  cell,
+  rowIndex,
+  onCellUpdate,
+  rowDragProps,
+  orderedRowIds,
+  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 rowId = cell.row.id;
+  const isEditing =
+    editingCell?.rowId === rowId &&
+    editingCell?.propertyId === property?.id;
+
+  const handleDoubleClick = useCallback(() => {
+    if (!property || isRowNumber) return;
+    if (property.type === "checkbox") return;
+    if (isSystemPropertyType(property.type)) return;
+    setEditingCell({ rowId, propertyId: property.id });
+  }, [property, isRowNumber, rowId, setEditingCell]);
+
+  const handleCommit = useCallback(
+    (value: unknown) => {
+      if (!property) return;
+      const currentValue = cell.getValue();
+      const hasChanged = value !== currentValue
+        && !(value === "" && (currentValue === null || currentValue === undefined))
+        && !(value === null && (currentValue === null || currentValue === undefined));
+      if (hasChanged) {
+        onCellUpdate(rowId, property.id, value);
+      }
+      setEditingCell(null);
+    },
+    [property, rowId, cell, onCellUpdate, setEditingCell],
+  );
+
+  const handleCancel = useCallback(() => {
+    setEditingCell(null);
+  }, [setEditingCell]);
+
+  if (isRowNumber) {
+    return (
+      <RowNumberCell
+        rowId={rowId}
+        rowIndex={rowIndex}
+        orderedRowIds={orderedRowIds ?? []}
+        isPinned={Boolean(isPinned)}
+        pinOffset={pinOffset}
+        rowDragProps={rowDragProps}
+        pageId={pageId}
+      />
+    );
+  }
+
+  if (!property) return null;
+
+  const CellComponent = cellComponents[property.type];
+  if (!CellComponent) return null;
+
+  const value = cell.getValue();
+
+  return (
+    <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}
+        onCommit={handleCommit}
+        onCancel={handleCancel}
+      />
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/grid-container.tsx

@@ -0,0 +1,377 @@
+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 "@/features/base/types/base.types";
+import { editingCellAtomFamily, activePropertyMenuAtomFamily, propertyMenuDirtyAtomFamily, propertyMenuCloseRequestAtomFamily } from "@/features/base/atoms/base-atoms";
+import { useColumnResize } from "@/features/base/hooks/use-column-resize";
+import { useGridKeyboardNav } from "@/features/base/hooks/use-grid-keyboard-nav";
+import { useRowDrag } from "@/features/base/hooks/use-row-drag";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import { useDeleteSelectedRows } from "@/features/base/hooks/use-delete-selected-rows";
+import { useHorizontalScrollSync } from "@/features/base/hooks/use-horizontal-scroll-sync";
+import { GridHeader } from "./grid-header";
+import { GridRow } from "./grid-row";
+import { AddRowButton } from "./add-row-button";
+import { SelectionActionBar } from "./selection-action-bar";
+import classes from "@/features/base/styles/grid.module.css";
+
+const ROW_HEIGHT = 36;
+const OVERSCAN = 10;
+
+// Hoisted to module scope so we don't allocate a fresh options object
+// 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;
+  /**
+   * 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 above the column-header row inside the StickyBand. In
+   * inline mode BaseTable injects banner + toolbar here so they stick
+   * alongside the headers; in standalone this is null (banner +
+   * toolbar render outside the scrollport).
+   */
+  stickyBandPrelude?: React.ReactNode;
+};
+
+export function GridContainer({
+  table,
+  properties,
+  onCellUpdate,
+  onAddRow,
+  pageId,
+  onColumnReorder,
+  onResizeEnd,
+  onRowReorder,
+  hasNextPage,
+  isFetchingNextPage,
+  onFetchNextPage,
+  scrollElement,
+  stickyBandPrelude,
+}: GridContainerProps) {
+  const headerRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  useHorizontalScrollSync(bodyRef, headerRef);
+  const lastTriggeredRowsLenRef = useRef(0);
+  const rows = table.getRowModel().rows;
+
+  const [editingCell, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
+  const [, setActivePropertyMenu] = useAtom(activePropertyMenuAtomFamily(pageId)) as unknown as [string | null, (val: string | null) => void];
+  const [propertyMenuDirty] = useAtom(propertyMenuDirtyAtomFamily(pageId)) as unknown as [boolean];
+  const [, setCloseRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number, (val: number) => void];
+  const propertyMenuDirtyRef = useRef(propertyMenuDirty);
+  propertyMenuDirtyRef.current = propertyMenuDirty;
+  const closeRequestCounterRef = useRef(0);
+
+  const { selectionCount, clear: clearSelection } = useRowSelection(pageId);
+  const { deleteSelected } = useDeleteSelectedRows(pageId);
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      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;
+      if (propertyMenuDirtyRef.current) {
+        closeRequestCounterRef.current += 1;
+        setCloseRequest(closeRequestCounterRef.current);
+      } else {
+        setActivePropertyMenu(null);
+      }
+      // Blur the focused element BEFORE clearing editingCell. Cell
+      // editors (CellNumber, CellText, CellEmail, CellUrl) commit
+      // their draft via onBlur — if we set editingCell to null first,
+      // React unmounts the input before the native blur event reaches
+      // its onBlur listener, so the user's edit is silently dropped
+      // (and pressing Enter is the only way to save). Triggering blur
+      // here lets the cell's onBlur run, commit, and clear editingCell
+      // itself; the setEditingCell(null) below is a no-op safety net
+      // for cases where the active element wasn't a cell editor.
+      const active = document.activeElement as HTMLElement | null;
+      if (active && active !== document.body && typeof active.blur === "function") {
+        active.blur();
+      }
+      setEditingCell(null);
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [setActivePropertyMenu, setEditingCell, setCloseRequest]);
+
+  useColumnResize(table, onResizeEnd ?? (() => {}));
+
+  useGridKeyboardNav({
+    table,
+    editingCell,
+    setEditingCell,
+    containerRef: bodyRef,
+  });
+
+  // When the scroll container is the window (inline embed mode),
+  // useVirtualizer's default Element-mode observers read scrollTop /
+  // scrollLeft — properties Window doesn't have. Swap in the Window-
+  // mode observers so the virtualizer reads scrollY / scrollX instead.
+  // The Element-narrowed type signature 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 : {};
+
+  // Window-mode virtualizer reads window.scrollY as offset, but rows
+  // are positioned within .bodyGrid which sits at some non-zero Y in
+  // the document (below banner/toolbar/upstream page content). Pass
+  // scrollMargin = bodyGrid's document-relative top so the virtualizer
+  // indexes correctly. Re-measure on resize via ResizeObserver — the
+  // embed extension logic in BaseEmbedView already triggers layout
+  // changes that we need to react to.
+  const [scrollMargin, setScrollMargin] = useState(0);
+  useLayoutEffect(() => {
+    if (!isWindowScroll) return;
+    const el = bodyRef.current;
+    if (!el) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      setScrollMargin(rect.top + window.scrollY);
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    // Outer page reflows (sidebar collapse, viewport resize) move the
+    // embed without resizing it — listen to window resize too.
+    window.addEventListener("resize", update);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [isWindowScroll]);
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollElement as Element | null,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+    scrollMargin,
+    ...windowScrollOptions,
+    // virtual-core bug: when the scroll element first attaches in
+    // _willUpdate, it calls _scrollToOffset(getScrollOffset()). With
+    // no initialOffset provided, getScrollOffset() returns undefined,
+    // and windowScroll/elementScroll computes `undefined + 0 = NaN`
+    // for the scroll target. Browsers coerce that to 0, so
+    // scrollY/scrollTop snaps to 0 the moment a fresh BaseTable
+    // mounts mid-page — manifests as "page jumps to top of editor"
+    // when an inline-embed lands. Seed initialOffset to the current
+    // scroll position so the first _scrollToOffset is 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 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]);
+
+  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 ? " 40px" : "");
+  }, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, pageId]);
+
+  const totalHeight = virtualizer.getTotalSize();
+
+  // virtual-core bakes `scrollMargin` into both `start`/`end` and
+  // `getTotalSize()`. We render padding spacers inside .bodyGrid to
+  // position rows in the grid flow, so paddingTop must be relative to
+  // .bodyGrid's own top — subtract scrollMargin out of items[0].start
+  // (which would otherwise push the first row down by the full embed
+  // offset, leaving a giant blank gap above the data). totalHeight
+  // already includes scrollMargin, so paddingBottom needs no
+  // adjustment.
+  const paddingTop =
+    virtualItems.length > 0
+      ? Math.max(0, (virtualItems[0]?.start ?? 0) - scrollMargin)
+      : 0;
+  const paddingBottom =
+    virtualItems.length > 0
+      ? totalHeight - (virtualItems[virtualItems.length - 1]?.end ?? 0)
+      : 0;
+
+  const rowIds = useMemo(() => rows.map((r) => r.id), [rows]);
+
+  const handleRowReorder = useCallback(
+    (rowId: string, targetRowId: string, position: "above" | "below") => {
+      onRowReorder?.(rowId, targetRowId, position);
+    },
+    [onRowReorder],
+  );
+
+  const {
+    dragState: rowDragState,
+    handleDragStart: handleRowDragStart,
+    handleDragOver: handleRowDragOver,
+    handleDragEnd: handleRowDragEnd,
+    handleDragLeave: handleRowDragLeave,
+  } = useRowDrag({ rowIds, onReorder: handleRowReorder });
+
+  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">
+      <div className={classes.stickyBand}>
+        {stickyBandPrelude}
+        <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>
+        <div
+          className={classes.bodyGrid}
+          ref={bodyRef}
+          tabIndex={0}
+          style={{ gridTemplateColumns }}
+          role="rowgroup"
+        >
+          {paddingTop > 0 && (
+            <div style={{ height: paddingTop, gridColumn: "1 / -1" }} />
+          )}
+          {virtualItems.map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            if (!row) return null;
+            return (
+              <GridRow
+                key={row.id}
+                row={row}
+                rowIndex={virtualRow.index}
+                onCellUpdate={onCellUpdate}
+                orderedRowIds={rowIds}
+                columnVisibility={table.getState().columnVisibility}
+                pageId={pageId}
+                dragHandlers={
+                  onRowReorder
+                    ? {
+                        onDragStart: handleRowDragStart,
+                        onDragOver: handleRowDragOver,
+                        onDragEnd: handleRowDragEnd,
+                        onDragLeave: handleRowDragLeave,
+                        isDragging: rowDragState.dragRowId === row.id,
+                        isDropTarget: rowDragState.dropTargetRowId === row.id,
+                        dropPosition: rowDragState.dropTargetRowId === row.id ? rowDragState.dropPosition : null,
+                      }
+                    : undefined
+                }
+              />
+            );
+          })}
+          {paddingBottom > 0 && (
+            <div style={{ height: paddingBottom, gridColumn: "1 / -1" }} />
+          )}
+          <AddRowButton onClick={handleAddRow} />
+          {pageId && <SelectionActionBar pageId={pageId} />}
+        </div>
+    </div>
+  );
+}

apps/client/src/features/base/components/grid/grid-header-cell.tsx

@@ -0,0 +1,273 @@
+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 "@/features/base/types/base.types";
+import {
+  activePropertyMenuAtomFamily,
+  propertyMenuDirtyAtomFamily,
+  propertyMenuCloseRequestAtomFamily,
+  editingCellAtomFamily,
+} from "@/features/base/atoms/base-atoms";
+import {
+  IconLetterT,
+  IconHash,
+  IconCircleDot,
+  IconProgressCheck,
+  IconTags,
+  IconCalendar,
+  IconUser,
+  IconPaperclip,
+  IconCheckbox,
+  IconLink,
+  IconMail,
+  IconClockPlus,
+  IconClockEdit,
+  IconUserEdit,
+} from "@tabler/icons-react";
+import { PropertyMenuContent } from "@/features/base/components/property/property-menu";
+import { RowNumberHeaderCell } from "./row-number-header-cell";
+import { BaseDropEdgeIndicator } from "./base-drop-edge-indicator";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import classes from "@/features/base/styles/grid.module.css";
+
+const COLUMN_DRAG_TYPE = "base-column";
+
+const typeIcons: Record<string, typeof IconLetterT> = {
+  text: IconLetterT,
+  number: IconHash,
+  select: IconCircleDot,
+  status: IconProgressCheck,
+  multiSelect: IconTags,
+  date: IconCalendar,
+  person: IconUser,
+  file: IconPaperclip,
+  checkbox: IconCheckbox,
+  url: IconLink,
+  email: IconMail,
+  createdAt: IconClockPlus,
+  lastEditedAt: IconClockEdit,
+  lastEditedBy: IconUserEdit,
+};
+
+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 [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 [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const handleDirtyChange = useCallback((dirty: boolean) => {
+    setPropertyMenuDirty(dirty);
+  }, [setPropertyMenuDirty]);
+
+  const isSortableDisabled = isRowNumber || !!isPinned;
+
+  // onColumnReorder ultimately depends on React Query result objects
+  // (activeView, base) via persistViewConfig — their identity changes on
+  // every cache invalidation (i.e. 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,
+        getInitialData: () => ({
+          type: COLUMN_DRAG_TYPE,
+          columnId: header.column.id,
+        }),
+        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(() => {
+    setEditingCell(null);
+    if (!isRowNumber && property && !isDragging) {
+      if (propertyMenuDirty && !menuOpened) return;
+      setActivePropertyMenu(menuOpened ? null : header.column.id);
+    }
+  }, [isRowNumber, property, isDragging, header.column.id, menuOpened, propertyMenuDirty, setActivePropertyMenu, setEditingCell]);
+
+  const handleMenuClose = useCallback(() => {
+    setActivePropertyMenu(null);
+  }, [setActivePropertyMenu]);
+
+  useEffect(() => {
+    if (!menuOpened) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      if (propertyMenuDirty) {
+        setCloseRequest(closeRequest + 1);
+      } else {
+        handleMenuClose();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [menuOpened, propertyMenuDirty, closeRequest, setCloseRequest, handleMenuClose]);
+
+  const TypeIcon = property ? typeIcons[property.type] : undefined;
+
+  return (
+    <div
+      ref={cellRef}
+      className={`${classes.headerCell} ${isPinned ? classes.headerCellPinned : ""} ${hasSelection ? classes.hasSelection : ""}`}
+      style={{
+        ...(isPinned
+          ? ({ "--pin-offset": `${pinOffset}px` } as React.CSSProperties)
+          : {}),
+        ...(isRowNumber ? {} : { cursor: "pointer" }),
+        opacity: isDragging ? 0.4 : 1,
+      }}
+      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>
+      )}
+      {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) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        />
+      )}
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+      {property && !isRowNumber && (
+        <Popover
+          opened={menuOpened}
+          onClose={handleMenuClose}
+          position="bottom-start"
+          shadow="md"
+          width={260}
+          withinPortal
+          closeOnClickOutside={false}
+        >
+          <Popover.Target>
+            <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} />
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <PropertyMenuContent
+              property={property}
+              opened={menuOpened}
+              onClose={handleMenuClose}
+              onDirtyChange={handleDirtyChange}
+              pageId={pageId}
+            />
+          </Popover.Dropdown>
+        </Popover>
+      )}
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/grid-header.tsx

@@ -0,0 +1,60 @@
+import { memo, useMemo } from "react";
+import { Table, ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+import { IBaseRow, IBaseProperty } from "@/features/base/types/base.types";
+import { GridHeaderCell } from "./grid-header-cell";
+import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
+import classes from "@/features/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 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}
+        />
+      ))}
+      <CreatePropertyPopover
+        pageId={pageId}
+        properties={properties}
+        onPropertyCreated={onPropertyCreated}
+      />
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/grid-row.tsx

@@ -0,0 +1,95 @@
+import { memo, useCallback } from "react";
+import { Row, VisibilityState } from "@tanstack/react-table";
+import { IBaseRow } from "@/features/base/types/base.types";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import { GridCell } from "./grid-cell";
+import classes from "@/features/base/styles/grid.module.css";
+
+type RowDragHandlers = {
+  onDragStart: (rowId: string) => void;
+  onDragOver: (rowId: string, e: React.DragEvent) => void;
+  onDragEnd: () => void;
+  onDragLeave: () => void;
+  isDragging: boolean;
+  isDropTarget: boolean;
+  dropPosition: "above" | "below" | null;
+};
+
+type GridRowProps = {
+  row: Row<IBaseRow>;
+  rowIndex: number;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  dragHandlers?: RowDragHandlers;
+  orderedRowIds: string[];
+  columnVisibility: VisibilityState;
+  pageId: string;
+};
+
+export const GridRow = memo(function GridRow({
+  row,
+  rowIndex,
+  onCellUpdate,
+  dragHandlers,
+  orderedRowIds,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnVisibility: _columnVisibility,
+  pageId,
+}: GridRowProps) {
+  const isSelected = useRowSelection(pageId).isSelected(row.id);
+  const handleDragStart = useCallback(
+    (e: React.DragEvent) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", row.id);
+      dragHandlers?.onDragStart(row.id);
+    },
+    [row.id, dragHandlers],
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      dragHandlers?.onDragOver(row.id, e);
+    },
+    [row.id, dragHandlers],
+  );
+
+  const dropIndicatorClass = dragHandlers?.isDropTarget
+    ? dragHandlers.dropPosition === "above"
+      ? classes.rowDropAbove
+      : classes.rowDropBelow
+    : "";
+
+  return (
+    <div
+      className={`${classes.row} ${dragHandlers?.isDragging ? classes.rowDragging : ""} ${dropIndicatorClass} ${isSelected ? classes.rowSelected : ""}`}
+      role="row"
+      onDragOver={handleDragOver}
+      onDrop={(e) => {
+        e.preventDefault();
+        dragHandlers?.onDragEnd();
+      }}
+      onDragLeave={dragHandlers?.onDragLeave}
+    >
+      {row.getVisibleCells().map((cell) => {
+        const isRowNumber = cell.column.id === "__row_number";
+        return (
+          <GridCell
+            key={cell.id}
+            cell={cell}
+            rowIndex={rowIndex}
+            onCellUpdate={onCellUpdate}
+            orderedRowIds={orderedRowIds}
+            pageId={pageId}
+            rowDragProps={
+              isRowNumber && dragHandlers
+                ? {
+                    draggable: true,
+                    onDragStart: handleDragStart,
+                  }
+                : undefined
+            }
+          />
+        );
+      })}
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/row-number-cell.tsx

@@ -0,0 +1,76 @@
+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;
+  pageId: string;
+};
+
+export const RowNumberCell = memo(function RowNumberCell({
+  rowId,
+  rowIndex,
+  orderedRowIds,
+  isPinned,
+  pinOffset,
+  rowDragProps,
+  pageId,
+}: RowNumberCellProps) {
+  const { isSelected, toggle } = useRowSelection(pageId);
+  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
+          ? ({ "--pin-offset": `${pinOffset ?? 0}px` } as React.CSSProperties)
+          : 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>
+  );
+});

apps/client/src/features/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 "@/features/base/hooks/use-row-selection";
+import classes from "@/features/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>
+  );
+});

apps/client/src/features/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 "@/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 = {
+  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>
+  );
+});

apps/client/src/features/base/components/property/__tests__/conversion-warning.spec.ts

@@ -0,0 +1,110 @@
+import {
+  conversionWarning,
+  NON_USER_TARGET_TYPES,
+} from "../conversion-warning";
+
+describe("conversionWarning", () => {
+  it("returns the choice-name copy for select → text", () => {
+    expect(conversionWarning("select", "text")).toBe(
+      "Cells will be replaced with the option name.",
+    );
+  });
+
+  it("returns the same copy for status → text", () => {
+    expect(conversionWarning("status", "text")).toBe(
+      "Cells will be replaced with the option name.",
+    );
+  });
+
+  it("returns comma-list copy for multiSelect → text", () => {
+    expect(conversionWarning("multiSelect", "text")).toBe(
+      "Cells will be replaced with a comma-separated list of option names.",
+    );
+  });
+
+  it("returns person-name copy for person → text", () => {
+    expect(conversionWarning("person", "text")).toBe(
+      "Cells will be replaced with the person's name.",
+    );
+  });
+
+  it("returns file-name list copy for file → text", () => {
+    expect(conversionWarning("file", "text")).toBe(
+      "Cells will be replaced with a comma-separated list of file names.",
+    );
+  });
+
+  it("returns page-title copy for page → text", () => {
+    expect(conversionWarning("page", "text")).toBe(
+      "Cells will be replaced with the page title.",
+    );
+  });
+
+  it("returns first-item-kept copy for multiSelect → select", () => {
+    expect(conversionWarning("multiSelect", "select")).toBe(
+      "Only the first selected item per row will be kept; the rest will be discarded.",
+    );
+  });
+
+  it("returns single-item-list copy for select → multiSelect", () => {
+    expect(conversionWarning("select", "multiSelect")).toBe(
+      "Existing values become single-item lists. No data is lost.",
+    );
+  });
+
+  it("returns page-cleared copy when target is page from non-page", () => {
+    expect(conversionWarning("text", "page")).toBe(
+      "Cells that aren't already a page reference will be cleared.",
+    );
+    expect(conversionWarning("number", "page")).toBe(
+      "Cells that aren't already a page reference will be cleared.",
+    );
+  });
+
+  it("returns number-parse-cleared copy when target is number from non-numeric", () => {
+    expect(conversionWarning("select", "number")).toBe(
+      "Cells that can't be parsed as a number will be cleared.",
+    );
+  });
+
+  it("returns date-parse-cleared copy when target is date", () => {
+    expect(conversionWarning("text", "date")).toBe(
+      "Cells that can't be parsed as a date will be cleared.",
+    );
+  });
+
+  it("returns checkbox-coercion copy when target is checkbox", () => {
+    expect(conversionWarning("text", "checkbox")).toBe(
+      "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+    );
+  });
+
+  it("returns url-cleared copy when target is url", () => {
+    expect(conversionWarning("text", "url")).toBe(
+      "Cells that aren't a valid URL will be cleared.",
+    );
+  });
+
+  it("returns email-cleared copy when target is email", () => {
+    expect(conversionWarning("text", "email")).toBe(
+      "Cells that aren't a valid email address will be cleared.",
+    );
+  });
+
+  it("returns the default safe copy for number → text", () => {
+    expect(conversionWarning("number", "text")).toBe(
+      "Cells will be reinterpreted under the new type.",
+    );
+  });
+
+  describe("NON_USER_TARGET_TYPES", () => {
+    it("contains exactly the 4 non-user types", () => {
+      expect(Array.from(NON_USER_TARGET_TYPES).sort()).toEqual([
+        "createdAt",
+        "formula",
+        "lastEditedAt",
+        "lastEditedBy",
+      ]);
+    });
+  });
+});

apps/client/src/features/base/components/property/choice-editor.tsx

@@ -0,0 +1,592 @@
+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 { 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 "@/features/base/components/grid/base-drop-edge-indicator";
+import { Choice } from "@/features/base/types/base.types";
+import { choiceColor } from "@/features/base/components/cells/choice-color";
+import { useTranslation } from "react-i18next";
+import { v7 as uuid7 } from "uuid";
+
+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;
+
+type ChoiceEditorProps = {
+  initialChoices: Choice[];
+  onSave: (choices: Choice[]) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  showCategories?: boolean;
+  hideButtons?: boolean;
+};
+
+export function ChoiceEditor({
+  initialChoices,
+  onSave,
+  onClose,
+  onDirtyChange,
+  showCategories = false,
+  hideButtons = false,
+}: ChoiceEditorProps) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = useState<Choice[]>(initialChoices);
+  const [focusChoiceId, setFocusChoiceId] = useState<string | null>(null);
+
+  // Sync from parent only when not in live mode (hideButtons = create flow)
+  useEffect(() => {
+    if (!hideButtons) {
+      setDraft(initialChoices);
+    }
+  }, [initialChoices, hideButtons]);
+
+  // In live mode, propagate draft changes to parent immediately
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+
+  useEffect(() => {
+    if (hideButtons) {
+      onSaveRef.current(draft.filter((c) => c.name.trim()));
+    }
+  }, [hideButtons, draft]);
+
+  const isDirty = useMemo(() => {
+    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]);
+
+  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));
+  }, []);
+
+  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);
+    onClose();
+  }, [draft, onSave, onClose]);
+
+  const handleCancel = useCallback(() => {
+    setDraft(initialChoices);
+    onDirtyChange?.(false);
+    onClose();
+  }, [initialChoices, 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} style={{ display: "flex", alignItems: "center", gap: 4 }}>
+          <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}
+        />
+      ) : (
+        <FlatChoiceList
+          draft={draft}
+          focusChoiceId={focusChoiceId}
+          onFocused={() => setFocusChoiceId(null)}
+          onRename={handleRename}
+          onColorChange={handleColorChange}
+          onRemove={handleRemove}
+          onAdd={handleAdd}
+          onReorder={handleReorder}
+        />
+      )}
+
+      {!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,
+}: {
+  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;
+}) {
+  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}
+        />
+      ))}
+
+      <UnstyledButton
+        onClick={() => onAdd()}
+        style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 0" }}
+      >
+        <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,
+}: {
+  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;
+}) {
+  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}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+function CategorySection({
+  category,
+  label,
+  choices,
+  focusChoiceId,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onAdd,
+  onReorder,
+}: {
+  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;
+}) {
+  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 isolates drops to within the same category.
+          // A drag started in "Todo" reports type "base-choice-status:todo";
+          // an "In Progress" row's canDrop matches against its own
+          // "base-choice-status:inProgress" type and rejects.
+          dragType={`base-choice-status:${category}`}
+          autoFocus={choice.id === focusChoiceId}
+          onFocused={onFocused}
+          onRename={onRename}
+          onColorChange={onColorChange}
+          onRemove={onRemove}
+          onReorder={handleRowReorder}
+        />
+      ))}
+
+      <UnstyledButton
+        onClick={() => onAdd(category)}
+        style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 0" }}
+      >
+        <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,
+}: {
+  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;
+}) {
+  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);
+
+  // Same rationale as grid-header-cell: keep `onReorder` out of the DnD
+  // effect's deps so we don't tear down the adapter when the parent
+  // re-renders with a new closure.
+  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,
+        // Only the grip icon initiates the drag (preserves text-input clicks
+        // and close-button clicks). The native preview is still derived from
+        // `element` (the full 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}
+        style={{ flexShrink: 0, cursor: "grab", display: "flex", alignItems: "center" }}
+      >
+        <IconGripVertical size={14} style={{ opacity: 0.4 }} />
+      </div>
+      <ColorDot color={choice.color} onChange={(c) => onColorChange(choice.id, c)} />
+      <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,
+}: {
+  color: string;
+  onChange: (color: string) => void;
+}) {
+  const [opened, setOpened] = useState(false);
+  const colors = choiceColor(color);
+
+  return (
+    <Popover opened={opened} onChange={setOpened} position="bottom" shadow="sm" withinPortal>
+      <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>
+  );
+}

apps/client/src/features/base/components/property/conversion-warning.ts

@@ -0,0 +1,71 @@
+import type { BasePropertyType } from "@/features/base/types/base.types";
+
+export const NON_USER_TARGET_TYPES = new Set<BasePropertyType>([
+  "createdAt",
+  "lastEditedAt",
+  "lastEditedBy",
+  "formula",
+]);
+
+/*
+ * Returns the warning copy shown in the property-menu's
+ * `confirmTypeChange` panel before the user applies a type change.
+ * Strings are i18n source keys (translation files key them by their
+ * exact text). Buckets are ordered most-specific first; the default
+ * branch covers safe reinterpretations like text ↔ number, text → url,
+ * text → email.
+ */
+export function conversionWarning(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): string {
+  if (to === "text") {
+    if (from === "select" || from === "status") {
+      return "Cells will be replaced with the option name.";
+    }
+    if (from === "multiSelect") {
+      return "Cells will be replaced with a comma-separated list of option names.";
+    }
+    if (from === "person") {
+      return "Cells will be replaced with the person's name.";
+    }
+    if (from === "file") {
+      return "Cells will be replaced with a comma-separated list of file names.";
+    }
+    if (from === "page") {
+      return "Cells will be replaced with the page title.";
+    }
+  }
+
+  if (to === "select" && from === "multiSelect") {
+    return "Only the first selected item per row will be kept; the rest will be discarded.";
+  }
+
+  if (to === "multiSelect" && from === "select") {
+    return "Existing values become single-item lists. No data is lost.";
+  }
+
+  if (to === "page") {
+    return "Cells that aren't already a page reference will be cleared.";
+  }
+
+  if (to === "number" && from !== "number") {
+    return "Cells that can't be parsed as a number will be cleared.";
+  }
+
+  if (to === "date" && from !== "date") {
+    return "Cells that can't be parsed as a date will be cleared.";
+  }
+
+  if (to === "checkbox" && from !== "checkbox") {
+    return "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).";
+  }
+
+  if ((to === "url" || to === "email") && from !== to) {
+    return to === "url"
+      ? "Cells that aren't a valid URL will be cleared."
+      : "Cells that aren't a valid email address will be cleared.";
+  }
+
+  return "Cells will be reinterpreted under the new type.";
+}

apps/client/src/features/base/components/property/create-property-popover.tsx

@@ -0,0 +1,397 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import {
+  Popover,
+  Portal,
+  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 "@/features/base/types/base.types";
+import { useCreatePropertyMutation } from "@/features/base/queries/base-property-query";
+import { PropertyTypePicker, propertyTypes } from "./property-type-picker";
+import { PropertyOptions } from "./property-options";
+import { FormulaEditor } from "../formula/formula-editor";
+import classes from "@/features/base/styles/grid.module.css";
+
+type CreatePropertyPopoverProps = {
+  pageId: string;
+  properties?: IBaseProperty[];
+  onPropertyCreated?: () => void;
+};
+
+type Panel = "typePicker" | "configure" | "confirmDiscard";
+
+const noop = () => {};
+
+// Keep in sync with the switch cases in PropertyOptions
+const typesWithOptions = new Set<BasePropertyType>([
+  "select",
+  "multiSelect",
+  "status",
+  "number",
+  "date",
+  "person",
+]);
+
+export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }: 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>>({});
+  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]);
+
+  // When the user leaves Name blank, fall back to the type label — and if
+  // that's already taken, suffix `n` until we find one that's free
+  // ("Text", "Text 1", "Text 2", …). Mirrors how other tools auto-number
+  // default field names.
+  const fallbackName = useMemo(() => {
+    const base = selectedTypeLabel || "Field";
+    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 panel/selectedType/etc. here — the popover's close
+    // transition is still rendering the dropdown for a frame, and
+    // resetting `panel` to "typePicker" mid-close flashes the type
+    // picker after the user clicks "Create field". `handleOpen`
+    // resets state 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({});
+    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 && typesWithOptions.has(selectedType);
+
+  return (
+    <>
+      {opened && (
+        <Portal>
+          <div
+            style={{
+              position: "fixed",
+              inset: 0,
+              zIndex: 299,
+            }}
+            onClick={attemptClose}
+          />
+        </Portal>
+      )}
+      <Popover
+        opened={opened}
+        onClose={noop}
+        position="bottom-start"
+        shadow="md"
+        withinPortal
+      >
+        <Popover.Target>
+          <div
+            className={classes.addColumnButton}
+            onClick={handleOpen}
+            role="button"
+            tabIndex={0}
+          >
+            <IconPlus size={16} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown
+          p={0}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={handleKeyDown}
+          style={{
+            zIndex: 300,
+            minWidth: selectedType === "formula" ? 460 : 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
+                    />
+                  </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 field")}
+                </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>
+    </>
+  );
+}

apps/client/src/features/base/components/property/property-menu.tsx

@@ -0,0 +1,534 @@
+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,
+} from "@tabler/icons-react";
+import {
+  IBaseProperty,
+  BasePropertyType,
+} from "@/features/base/types/base.types";
+import { useAtom } from "jotai";
+import { propertyMenuCloseRequestAtomFamily } from "@/features/base/atoms/base-atoms";
+import {
+  useUpdatePropertyMutation,
+  useDeletePropertyMutation,
+} from "@/features/base/queries/base-property-query";
+import { PropertyTypePicker, propertyTypes } from "./property-type-picker";
+import { PropertyOptions } from "./property-options";
+import {
+  conversionWarning,
+  NON_USER_TARGET_TYPES,
+} from "./conversion-warning";
+import { useTranslation } from "react-i18next";
+import { isSystemPropertyType } from "@/features/base/hooks/use-base-table";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type PropertyMenuContentProps = {
+  property: IBaseProperty;
+  opened: boolean;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  pageId: string;
+};
+
+type MenuPanel =
+  | "main"
+  | "rename"
+  | "options"
+  | "changeType"
+  | "confirmTypeChange"
+  | "confirmDelete"
+  | "confirmDiscard";
+
+export function PropertyMenuContent({
+  property,
+  opened,
+  onClose,
+  onDirtyChange,
+  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);
+  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);
+  }, []);
+
+  // Single dirty signal to the outside — reflects whichever panel is
+  // currently accumulating unsaved work. Keeps rename and options in
+  // lockstep with the `propertyMenuDirtyAtomFamily` so the grid-container's
+  // outside-click handler and the header's ESC handler both prompt
+  // "Unsaved changes" consistently.
+  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")}
+        />
+      )}
+      {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}
+                style={{ transform: "rotate(180deg)" }}
+              />
+            </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" onClick={handleApplyTypeChange}>
+              {t("Apply")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+      {(panel === "options" || panel === "confirmDiscard") && (
+        <Stack 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}
+                style={{ transform: "rotate(180deg)" }}
+              />
+            </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}
+            />
+          </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>
+      )}
+    </>
+  );
+}
+
+// Expose requestClose for use by parent (grid-header-cell)
+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,
+}: {
+  property: IBaseProperty;
+  onRename: () => void;
+  onChangeType: () => void;
+  onOptions: () => void;
+  onDelete: () => 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");
+
+  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}
+      />
+      {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>
+  );
+}
+

apps/client/src/features/base/components/property/property-options.tsx

@@ -0,0 +1,263 @@
+import { useCallback, useMemo } from "react";
+import { Stack, NumberInput, Select, Switch, Text } from "@mantine/core";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  NumberTypeOptions,
+  DateTypeOptions,
+  PersonTypeOptions,
+  Choice,
+} from "@/features/base/types/base.types";
+import { ChoiceEditor } from "./choice-editor";
+import { useTranslation } from "react-i18next";
+
+type PropertyOptionsProps = {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  hideButtons?: boolean;
+};
+
+export function PropertyOptions({ property, onUpdate, onClose, onDirtyChange, hideButtons }: PropertyOptionsProps) {
+  const { t } = useTranslation();
+
+  switch (property.type) {
+    case "select":
+    case "multiSelect":
+      return (
+        <SelectOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+        />
+      );
+    case "status":
+      return (
+        <StatusOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+        />
+      );
+    case "number":
+      return (
+        <NumberOptions
+          property={property}
+          onUpdate={onUpdate}
+        />
+      );
+    case "date":
+      return (
+        <DateOptions
+          property={property}
+          onUpdate={onUpdate}
+        />
+      );
+    case "person":
+      return (
+        <PersonOptions
+          property={property}
+          onUpdate={onUpdate}
+        />
+      );
+    default:
+      return (
+        <Text size="xs" c="dimmed">
+          {t("No options for this property type")}
+        </Text>
+      );
+  }
+}
+
+function SelectOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+}: {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  hideButtons?: boolean;
+}) {
+  const options = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = useMemo(() => options?.choices ?? [], [options?.choices]);
+
+  const handleSave = useCallback(
+    (newChoices: Choice[]) => {
+      onUpdate({
+        ...property.typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      });
+    },
+    [property.typeOptions, onUpdate],
+  );
+
+  return (
+    <ChoiceEditor
+      initialChoices={choices}
+      onSave={handleSave}
+      onClose={onClose}
+      onDirtyChange={onDirtyChange}
+      showCategories={false}
+      hideButtons={hideButtons}
+    />
+  );
+}
+
+function StatusOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+}: {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  hideButtons?: boolean;
+}) {
+  const options = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = useMemo(() => options?.choices ?? [], [options?.choices]);
+
+  const handleSave = useCallback(
+    (newChoices: Choice[]) => {
+      onUpdate({
+        ...property.typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      });
+    },
+    [property.typeOptions, onUpdate],
+  );
+
+  return (
+    <ChoiceEditor
+      initialChoices={choices}
+      onSave={handleSave}
+      onClose={onClose}
+      onDirtyChange={onDirtyChange}
+      showCategories
+      hideButtons={hideButtons}
+    />
+  );
+}
+
+function NumberOptions({
+  property,
+  onUpdate,
+}: {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+}) {
+  const { t } = useTranslation();
+  const options = property.typeOptions as NumberTypeOptions | undefined;
+
+  return (
+    <Stack gap="xs">
+      <Select
+        size="xs"
+        label={t("Format")}
+        allowDeselect={false}
+        data={[
+          { value: "plain", label: t("Number") },
+          { value: "currency", label: t("Currency") },
+          { value: "percent", label: t("Percent") },
+          { value: "progress", label: t("Progress") },
+        ]}
+        value={options?.format ?? "plain"}
+        onChange={(val) =>
+          onUpdate({ ...property.typeOptions, format: val ?? "plain" })
+        }
+      />
+      <NumberInput
+        size="xs"
+        label={t("Decimal places")}
+        min={0}
+        max={8}
+        value={options?.precision ?? 0}
+        onChange={(val) =>
+          onUpdate({ ...property.typeOptions, precision: val })
+        }
+      />
+    </Stack>
+  );
+}
+
+function DateOptions({
+  property,
+  onUpdate,
+}: {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+}) {
+  const { t } = useTranslation();
+  const options = property.typeOptions as DateTypeOptions | undefined;
+
+  return (
+    <Stack gap="xs">
+      <Switch
+        size="xs"
+        label={t("Include time")}
+        checked={options?.includeTime ?? false}
+        onChange={(e) =>
+          onUpdate({
+            ...property.typeOptions,
+            includeTime: e.currentTarget.checked,
+          })
+        }
+      />
+      {options?.includeTime && (
+        <Select
+          size="xs"
+          label={t("Time format")}
+          allowDeselect={false}
+          data={[
+            { value: "12h", label: "12-hour" },
+            { value: "24h", label: "24-hour" },
+          ]}
+          value={options?.timeFormat ?? "12h"}
+          onChange={(val) =>
+            onUpdate({ ...property.typeOptions, timeFormat: val ?? "12h" })
+          }
+        />
+      )}
+    </Stack>
+  );
+}
+
+function PersonOptions({
+  property,
+  onUpdate,
+}: {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+}) {
+  const { t } = useTranslation();
+  const options = property.typeOptions as PersonTypeOptions | undefined;
+
+  return (
+    <Stack gap="xs">
+      <Switch
+        size="xs"
+        label={t("Allow multiple people")}
+        checked={options?.allowMultiple !== false}
+        onChange={(e) =>
+          onUpdate({
+            ...property.typeOptions,
+            allowMultiple: e.currentTarget.checked,
+          })
+        }
+      />
+    </Stack>
+  );
+}

apps/client/src/features/base/components/property/property-type-picker.tsx

@@ -0,0 +1,114 @@
+import { UnstyledButton, Group, Text, TextInput } from "@mantine/core";
+import {
+  IconLetterT,
+  IconHash,
+  IconCircleDot,
+  IconProgressCheck,
+  IconTags,
+  IconCalendar,
+  IconUser,
+  IconPaperclip,
+  IconFileDescription,
+  IconCheckbox,
+  IconLink,
+  IconMail,
+  IconClockPlus,
+  IconClockEdit,
+  IconUserEdit,
+  IconCheck,
+  IconSearch,
+  IconMathFunction,
+} from "@tabler/icons-react";
+import { BasePropertyType } from "@/features/base/types/base.types";
+import { useTranslation } from "react-i18next";
+import { useState, useRef, useEffect } from "react";
+import classes from "@/features/base/styles/cells.module.css";
+
+const propertyTypes: {
+  type: BasePropertyType;
+  icon: typeof IconLetterT;
+  labelKey: string;
+}[] = [
+  { type: "text", icon: IconLetterT, labelKey: "Text" },
+  { type: "number", icon: IconHash, labelKey: "Number" },
+  { type: "select", icon: IconCircleDot, labelKey: "Select" },
+  { type: "status", icon: IconProgressCheck, labelKey: "Status" },
+  { type: "multiSelect", icon: IconTags, labelKey: "Multi-select" },
+  { type: "date", icon: IconCalendar, labelKey: "Date" },
+  { type: "person", icon: IconUser, labelKey: "Person" },
+  { type: "file", icon: IconPaperclip, labelKey: "File" },
+  { type: "page", icon: IconFileDescription, labelKey: "Page" },
+  { type: "checkbox", icon: IconCheckbox, labelKey: "Checkbox" },
+  { type: "url", icon: IconLink, labelKey: "URL" },
+  { type: "email", icon: IconMail, labelKey: "Email" },
+  { type: "createdAt", icon: IconClockPlus, labelKey: "Created at" },
+  { type: "lastEditedAt", icon: IconClockEdit, labelKey: "Last edited at" },
+  { type: "lastEditedBy", icon: IconUserEdit, labelKey: "Last edited by" },
+  { type: "formula", icon: IconMathFunction, labelKey: "Formula" },
+];
+
+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 field 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 };

apps/client/src/features/base/components/row-detail-modal/property-row.tsx

@@ -0,0 +1,93 @@
+import { useState, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import { IconLock } from "@tabler/icons-react";
+import { BasePropertyType, IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
+import { CellRenderer } from "@/features/base/components/cells/cell-renderer";
+import { propertyTypes } from "@/features/base/components/property/property-type-picker";
+import classes from "./row-detail-modal.module.css";
+
+type PropertyRowProps = {
+  property: IBaseProperty;
+  row: IBaseRow;
+  canEdit: boolean;
+  onUpdate: (propertyId: string, value: unknown) => void;
+};
+
+// Cell types that are derived/read-only — clicking shouldn't switch them
+// into edit mode and the row gets a tiny lock glyph in front of the value.
+const READONLY_TYPES = new Set<BasePropertyType>([
+  "formula",
+  "createdAt",
+  "lastEditedAt",
+  "lastEditedBy",
+]);
+
+const ICON_BY_TYPE = new Map(propertyTypes.map((p) => [p.type, p.icon] as const));
+
+export function PropertyRow({ property, row, canEdit, onUpdate }: PropertyRowProps) {
+  const value = (row.cells ?? {})[property.id];
+  const [editing, setEditing] = useState(false);
+
+  const isReadonlyType = READONLY_TYPES.has(property.type);
+  const interactive = canEdit && !isReadonlyType;
+
+  const handleCommit = useCallback(
+    (next: unknown) => {
+      setEditing(false);
+      onUpdate(property.id, next);
+    },
+    [onUpdate, property.id],
+  );
+  const handleCancel = useCallback(() => setEditing(false), []);
+
+  // Activate on `mousedown`, not `click`. Mantine's `useClickOutside`
+  // (the one wired up by every child `Popover`) also fires on mousedown,
+  // and React batches setState calls within the same DOM event. By
+  // riding the same event we get:
+  //   1. mousedown on a wrapper whose child Popover is open →
+  //      useClickOutside calls setEditing(false), our handler reads the
+  //      same render's `editing === true` so it bails on `!editing` and
+  //      doesn't queue setEditing(true). React flushes → popover closes.
+  //   2. mousedown on a non-editing wrapper → `!editing` is true →
+  //      setEditing(true) → popover opens.
+  // Using `onClick` would split steps 1a/1b across two DOM events; React
+  // would re-render between them with the popover closed, my click
+  // closure would then see `editing === false`, and the popover would
+  // re-open on the same gesture that was meant to dismiss it.
+  const handleActivate = useCallback(() => {
+    if (interactive && !editing) setEditing(true);
+  }, [interactive, editing]);
+
+  const Icon = useMemo(() => ICON_BY_TYPE.get(property.type), [property.type]);
+
+  return (
+    <div className={classes.propertyRow}>
+      <div className={classes.propertyLabel}>
+        {Icon && <Icon size={15} className={classes.propertyLabelIcon} />}
+        <span className={classes.propertyLabelText}>{property.name}</span>
+      </div>
+      <div
+        className={clsx(classes.propertyValueWrap, {
+          [classes.editing]: editing,
+          [classes.locked]: isReadonlyType,
+          [classes.readOnlyCell]: !canEdit,
+        })}
+        onMouseDown={handleActivate}
+      >
+        {isReadonlyType && (
+          <IconLock size={13} className={classes.lockIcon} />
+        )}
+        <div className={classes.valueInner}>
+          <CellRenderer
+            property={property}
+            rowId={row.id}
+            value={value}
+            isEditing={editing}
+            onCommit={handleCommit}
+            onCancel={handleCancel}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/client/src/features/base/components/row-detail-modal/row-detail-modal.module.css

@@ -0,0 +1,281 @@
+/* ---------- Modal shell ---------- */
+
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  max-height: min(86vh, 820px);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+}
+
+.closeButtonWrap {
+  position: absolute;
+  top: 14px;
+  right: 18px;
+  z-index: 2;
+  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));
+}
+
+/* ---------- Header ---------- */
+
+.header {
+  padding: 32px 36px 4px;
+  flex-shrink: 0;
+}
+
+.titleInput {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  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));
+}
+
+.titleInput::placeholder {
+  color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+  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-6), var(--mantine-color-dark-2));
+  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 / properties list ---------- */
+
+.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;
+  transition: background-color 80ms ease;
+}
+
+.propertyLabel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 168px;
+  flex: 0 0 168px;
+  height: 34px;
+  padding-left: 4px;
+  font-size: 13.5px;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.propertyLabelIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2));
+}
+
+.propertyLabelText {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.propertyValueWrap {
+  flex: 1;
+  min-width: 0;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  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;
+  cursor: text;
+}
+
+.propertyValueWrap:hover {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}
+
+.propertyValueWrap.editing {
+  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)
+  );
+}
+
+.propertyValueWrap.readOnlyCell {
+  cursor: default;
+  background-color: transparent;
+  padding-left: 4px;
+}
+
+.propertyValueWrap.readOnlyCell:hover {
+  background-color: transparent;
+}
+
+.propertyValueWrap.locked {
+  cursor: default;
+}
+
+.lockIcon {
+  flex-shrink: 0;
+  margin-right: 6px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.valueInner {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* Trim Mantine cell paddings inside the modal value pill — the wrapper
+   already provides the horizontal padding. Without this, text/numbers
+   would sit 8px to the right of where they should. */
+.valueInner :global(.mantine-Input-input),
+.valueInner input.cellInput,
+.valueInner input[type="text"],
+.valueInner input[type="number"] {
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+}
+
+/* Add property button */
+.addPropertyWrap {
+  margin-top: 12px;
+  padding-left: 4px;
+}
+
+/* ---------- Footer ---------- */
+
+.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-6), var(--mantine-color-dark-2));
+  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);
+  box-shadow: 0 0 0 0 rgba(250, 176, 5, 0.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;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.kbdHint {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.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));
+}

apps/client/src/features/base/components/row-detail-modal/row-detail-modal.tsx

@@ -0,0 +1,194 @@
+import { Modal, Text } from "@mantine/core";
+import { useWindowEvent } from "@mantine/hooks";
+import { IconDotsVertical, IconX, IconLock } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useCallback, useEffect, useMemo } from "react";
+import {
+  IBase,
+  IBaseRow,
+} from "@/features/base/types/base.types";
+import { useUpdateRowMutation } from "@/features/base/queries/base-row-query";
+import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
+import { RowDetailTitle } from "./row-detail-title";
+import { PropertyRow } from "./property-row";
+import classes from "./row-detail-modal.module.css";
+
+type RowDetailModalProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  openRowId: string | null;
+  canEdit: boolean;
+  onClose: () => void;
+};
+
+export function RowDetailModal({
+  base,
+  rows,
+  openRowId,
+  canEdit,
+  onClose,
+}: RowDetailModalProps) {
+  const { t } = useTranslation();
+  const updateRowMutation = useUpdateRowMutation();
+
+  const row = useMemo(
+    () => (openRowId ? rows.find((r) => r.id === openRowId) : undefined),
+    [openRowId, rows],
+  );
+  const primaryProperty = useMemo(
+    () => base.properties.find((p) => p.isPrimary),
+    [base.properties],
+  );
+
+  // If a row was open and disappeared (deleted, filtered out, or not yet
+  // loaded into the rows page), close the modal.
+  const wasOpen = !!openRowId && !row;
+  useEffect(() => {
+    if (wasOpen) onClose();
+  }, [wasOpen, onClose]);
+
+  const isSaving = updateRowMutation.isPending;
+
+  // Esc handling: Mantine v8 Modal's built-in `closeOnEscape` runs a
+  // *capture-phase* `window` keydown listener (see
+  // `@mantine/core/.../use-modal.mjs`), which fires before any inner
+  // popover or cell input gets the keypress. The result: pressing Esc
+  // inside an open cell popover (or any editable cell) would close the
+  // whole modal instead of dismissing the popover.
+  //
+  // We turn the Modal's listener off and run our own, which yields to
+  // anything that's currently editing: an open Mantine Popover dropdown
+  // (it carries the `data-position` attribute Mantine sets on every
+  // popover) or a native editable element (input, textarea,
+  // contenteditable). Only when nothing inner claims Esc do we close
+  // the modal.
+  const opened = !!row;
+  const handleEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || event.isComposing || !opened) return;
+      const target = event.target as HTMLElement | null;
+      if (target) {
+        if (
+          target.closest("[data-position]") ||
+          target.matches("input, textarea, select, [contenteditable='true']")
+        ) {
+          return;
+        }
+      }
+      onClose();
+    },
+    [opened, onClose],
+  );
+  useWindowEvent("keydown", handleEscape, { capture: true });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="lg"
+      centered
+      withCloseButton={false}
+      closeOnEscape={false}
+      padding={0}
+      radius="md"
+      title={null}
+      classNames={{ content: classes.modalContent }}
+    >
+      {row ? (
+        <>
+          <div className={classes.closeButtonWrap}>
+            <button
+              type="button"
+              className={classes.iconButton}
+              aria-label={t("More")}
+            >
+              <IconDotsVertical size={16} />
+            </button>
+            <button
+              type="button"
+              className={classes.iconButton}
+              onClick={onClose}
+              aria-label={t("Close")}
+            >
+              <IconX size={16} />
+            </button>
+          </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}
+                    canEdit={canEdit}
+                    onUpdate={(propertyId, value) => {
+                      updateRowMutation.mutate({
+                        rowId: row.id,
+                        pageId: base.id,
+                        cells: { [propertyId]: value },
+                      });
+                    }}
+                  />
+                ))}
+            </div>
+            {canEdit && (
+              <div className={classes.addPropertyWrap}>
+                <CreatePropertyPopover
+                  pageId={base.id}
+                  properties={base.properties}
+                  onPropertyCreated={() => {
+                    // The base query invalidates on success — the new
+                    // property will appear as a new <PropertyRow /> on
+                    // next render. Nothing else to do.
+                  }}
+                />
+              </div>
+            )}
+          </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}>
+              <span>{t("Press")}</span>
+              <kbd className={classes.kbd}>Esc</kbd>
+              <span>{t("to close")}</span>
+            </div>
+          </footer>
+        </>
+      ) : (
+        <Text c="dimmed" p="md">
+          {t("Loading…")}
+        </Text>
+      )}
+    </Modal>
+  );
+}

apps/client/src/features/base/components/row-detail-modal/row-detail-title.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
+import { timeAgo } from "@/lib/time.ts";
+import classes from "./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 if the underlying row changes (e.g. another client updated it).
+  useEffect(() => {
+    setValue(initial);
+  }, [initial]);
+
+  const updatedAgo = row.updatedAt ? timeAgo(new Date(row.updatedAt)) : "";
+  // UUID7-derived display token: the last 4 hex chars are the random
+  // tail of the UUID, so they distinguish rows that were created close
+  // together better than the time prefix would.
+  const idToken = row.id
+    ? `#${row.id.replace(/-/g, "").slice(-4).toUpperCase()}`
+    : "";
+
+  return (
+    <header className={classes.header}>
+      {canEdit ? (
+        <input
+          autoFocus
+          type="text"
+          className={classes.titleInput}
+          placeholder={t("Untitled")}
+          value={value}
+          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>
+      )}
+      <div className={classes.metaRow}>
+        {updatedAgo && (
+          <span>{t("Updated {{when}}", { when: updatedAgo })}</span>
+        )}
+        {updatedAgo && idToken && <span className={classes.metaDot} />}
+        {idToken && <span>{idToken}</span>}
+      </div>
+    </header>
+  );
+}

apps/client/src/features/base/components/views/kanban/base-kanban.tsx

@@ -0,0 +1,305 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Badge } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+  NO_VALUE_CHOICE_ID,
+} from "@/features/base/types/base.types";
+import { useKanbanGroups } from "@/features/base/hooks/use-kanban-groups";
+import { useKanbanAutoScroll } from "@/features/base/hooks/use-kanban-auto-scroll";
+import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
+import {
+  useCreateRowMutation,
+  useReorderRowMutation,
+  useUpdateRowMutation,
+} from "@/features/base/queries/base-row-query";
+import { resolveCardDrop } from "@/features/base/hooks/resolve-card-drop";
+import type { CardDropPayload } from "@/features/base/hooks/use-kanban-card-drag";
+import type { ColumnReorderPayload } from "@/features/base/hooks/use-kanban-column-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 { KanbanColumn } from "./kanban-column";
+import { KanbanEmptyState } from "./kanban-empty-state";
+import classes from "@/features/base/styles/kanban.module.css";
+
+type BaseKanbanProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  effectiveView: IBaseView | undefined;
+  onCardClick: (rowId: string) => void;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onFetchNextPage: () => void;
+};
+
+export function BaseKanban({
+  base,
+  rows,
+  effectiveView,
+  onCardClick,
+  hasNextPage,
+  isFetchingNextPage,
+  onFetchNextPage,
+}: BaseKanbanProps) {
+  const { t } = useTranslation();
+  const groupByPropertyId = effectiveView?.config?.groupByPropertyId;
+  const property = useMemo(
+    () =>
+      groupByPropertyId
+        ? base.properties.find((p) => p.id === groupByPropertyId)
+        : undefined,
+    [groupByPropertyId, base.properties],
+  );
+  const primaryProperty = useMemo(
+    () => base.properties.find((p) => p.isPrimary),
+    [base.properties],
+  );
+  const isGroupable = property?.type === "select" || property?.type === "status";
+  const updateViewMutation = useUpdateViewMutation();
+  const createRowMutation = useCreateRowMutation();
+  const updateRowMutation = useUpdateRowMutation();
+  const reorderRowMutation = useReorderRowMutation();
+  const sortsActive = (effectiveView?.config?.sorts?.length ?? 0) > 0;
+  const boardRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const canScrollBoard = useCallback(
+    ({ source }: { source: { data: Record<string, unknown> } }) =>
+      source.data.type === "base-kanban-card" ||
+      source.data.type === "base-kanban-column",
+    [],
+  );
+  useKanbanAutoScroll(boardRef, "horizontal", canScrollBoard);
+
+  useEffect(() => {
+    if (!hasNextPage || isFetchingNextPage) return;
+    const target = endRef.current;
+    const root = boardRef.current;
+    if (!target || !root) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) onFetchNextPage();
+      },
+      { root, threshold: 0.1 },
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, onFetchNextPage]);
+
+  // Rules of Hooks: call useKanbanGroups unconditionally with `undefined`
+  // when not groupable; switch the render path on isGroupable below.
+  const { columns } = useKanbanGroups(
+    rows,
+    isGroupable ? property : undefined,
+    effectiveView?.config?.hiddenChoiceIds,
+    effectiveView?.config?.choiceOrder,
+  );
+
+  const handlePickProperty = (propertyId: string) => {
+    if (!effectiveView) return;
+    updateViewMutation.mutate({
+      viewId: effectiveView.id,
+      pageId: base.id,
+      config: { ...effectiveView.config, groupByPropertyId: propertyId },
+    });
+  };
+
+  const handleCardDrop = useCallback(
+    (payload: CardDropPayload) => {
+      if (!groupByPropertyId) return;
+      const targetColumn = columns.find((c) => c.key === payload.targetColumnKey);
+      // The drop target restricts allowedEdges to ["top","bottom"], so the
+      // runtime value is always assignable; narrow the broader Edge union.
+      const edge =
+        payload.edge === "top" || payload.edge === "bottom"
+          ? payload.edge
+          : null;
+      const result = resolveCardDrop({
+        draggedCardId: payload.draggedCardId,
+        targetCardId: payload.targetCardId,
+        edge,
+        sourceColumnKey: payload.sourceColumnKey,
+        targetColumnKey: payload.targetColumnKey,
+        groupByPropertyId,
+        columnRows: targetColumn?.rows ?? [],
+        sortsActive,
+      });
+
+      if (result.cells !== undefined) {
+        updateRowMutation.mutate({
+          rowId: payload.draggedCardId,
+          pageId: base.id,
+          cells: result.cells,
+          ...(result.position !== undefined && { position: result.position }),
+        });
+      } else if (result.position !== undefined) {
+        reorderRowMutation.mutate({
+          rowId: payload.draggedCardId,
+          pageId: base.id,
+          position: result.position,
+        });
+      }
+
+      // a11y + post-move flash on the dropped card (if still in DOM).
+      const el = document.querySelector(
+        `[data-row-id="${payload.draggedCardId}"]`,
+      );
+      if (el instanceof HTMLElement) triggerPostMoveFlash(el);
+      const colName = targetColumn?.name ?? "column";
+      liveRegion.announce(`Moved card to ${colName}`);
+    },
+    [
+      base.id,
+      columns,
+      groupByPropertyId,
+      reorderRowMutation,
+      sortsActive,
+      updateRowMutation,
+    ],
+  );
+
+  const handleAddCard = async (columnKey: string) => {
+    if (!groupByPropertyId) return;
+    const cells =
+      columnKey === NO_VALUE_CHOICE_ID
+        ? {}
+        : { [groupByPropertyId]: columnKey };
+    const column = columns.find((c) => c.key === columnKey);
+    const afterRowId = column?.rows[column.rows.length - 1]?.id;
+    try {
+      const newRow = await createRowMutation.mutateAsync({
+        pageId: base.id,
+        cells,
+        afterRowId,
+      });
+      onCardClick(newRow.id);
+    } catch {
+      // mutation already shows an error toast.
+    }
+  };
+
+  const handleColumnReorder = useCallback(
+    (payload: ColumnReorderPayload) => {
+      if (!effectiveView) return;
+      const current = columns.map((c) => c.key);
+      const fromIdx = current.indexOf(payload.draggedColumnKey);
+      const toIdx = current.indexOf(payload.targetColumnKey);
+      if (fromIdx === -1 || toIdx === -1) return;
+      const next = current.slice();
+      next.splice(fromIdx, 1);
+      const insertAt =
+        payload.edge === "left"
+          ? toIdx > fromIdx
+            ? toIdx - 1
+            : toIdx
+          : toIdx > fromIdx
+            ? toIdx
+            : toIdx + 1;
+      next.splice(insertAt, 0, payload.draggedColumnKey);
+
+      updateViewMutation.mutate({
+        viewId: effectiveView.id,
+        pageId: base.id,
+        config: { ...effectiveView.config, choiceOrder: next },
+      });
+    },
+    [base.id, columns, effectiveView, updateViewMutation],
+  );
+
+  const handleHideColumn = useCallback(
+    (columnKey: string) => {
+      if (!effectiveView) return;
+      const current = effectiveView.config?.hiddenChoiceIds ?? [];
+      if (current.includes(columnKey)) return;
+      updateViewMutation.mutate({
+        viewId: effectiveView.id,
+        pageId: base.id,
+        config: {
+          ...effectiveView.config,
+          hiddenChoiceIds: [...current, columnKey],
+        },
+      });
+    },
+    [base.id, effectiveView, updateViewMutation],
+  );
+
+  const handleShowColumn = useCallback(
+    (columnKey: string) => {
+      if (!effectiveView) return;
+      const next = (effectiveView.config?.hiddenChoiceIds ?? []).filter(
+        (id) => id !== columnKey,
+      );
+      updateViewMutation.mutate({
+        viewId: effectiveView.id,
+        pageId: base.id,
+        config: { ...effectiveView.config, hiddenChoiceIds: next },
+      });
+    },
+    [base.id, effectiveView, updateViewMutation],
+  );
+
+  const hiddenIds = effectiveView?.config?.hiddenChoiceIds ?? [];
+  const hiddenChoices = useMemo(() => {
+    if (!isGroupable || hiddenIds.length === 0) return [];
+    const opts = (property!.typeOptions as { choices?: Array<{ id: string; name: string; color: string }> } | undefined) ?? {};
+    const choices = opts.choices ?? [];
+    const byId = new Map(choices.map((c) => [c.id, c]));
+    return hiddenIds
+      .map((id) =>
+        id === NO_VALUE_CHOICE_ID
+          ? { id, name: t("No value"), color: null as string | null }
+          : byId.get(id)
+            ? { id, name: byId.get(id)!.name, color: byId.get(id)!.color as string | null }
+            : null,
+      )
+      .filter((c): c is { id: string; name: string; color: string | null } => c !== null);
+  }, [hiddenIds, isGroupable, property, t]);
+
+  if (!isGroupable) {
+    return <KanbanEmptyState base={base} onPick={handlePickProperty} />;
+  }
+
+  return (
+    <>
+      {hiddenChoices.length > 0 && (
+        <div className={classes.hiddenStrip}>
+          {hiddenChoices.map((c) => (
+            <Badge
+              key={c.id}
+              color={c.color ?? "gray"}
+              variant="outline"
+              className={classes.hiddenChip}
+              onClick={() => handleShowColumn(c.id)}
+              rightSection={<IconPlus size={12} />}
+            >
+              {c.name}
+            </Badge>
+          ))}
+        </div>
+      )}
+      {sortsActive && (
+        <div className={classes.sortHint}>
+          {t("Sorted — cards within a column can't be reordered.")}
+        </div>
+      )}
+      <div ref={boardRef} className={classes.board}>
+        {columns.map((column) => (
+          <KanbanColumn
+            key={column.key}
+            column={column}
+            primaryProperty={primaryProperty}
+            onCardClick={onCardClick}
+            onAddCard={handleAddCard}
+            onCardDrop={handleCardDrop}
+            onColumnReorder={handleColumnReorder}
+            onHide={handleHideColumn}
+            sortsActive={sortsActive}
+          />
+        ))}
+        <div ref={endRef} style={{ flex: "0 0 1px" }} aria-hidden />
+      </div>
+    </>
+  );
+}

apps/client/src/features/base/components/views/kanban/kanban-add-card-button.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "@/features/base/styles/kanban.module.css";
+
+type KanbanAddCardButtonProps = {
+  onClick: () => void;
+  disabled?: boolean;
+};
+
+export function KanbanAddCardButton({
+  onClick,
+  disabled,
+}: KanbanAddCardButtonProps) {
+  const { t } = useTranslation();
+  return (
+    <Button
+      variant="subtle"
+      color="gray"
+      size="xs"
+      className={classes.addCardButton}
+      leftSection={<IconPlus size={14} />}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {t("New")}
+    </Button>
+  );
+}

apps/client/src/features/base/components/views/kanban/kanban-card.tsx

@@ -0,0 +1,64 @@
+import { IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
+import classes from "@/features/base/styles/kanban.module.css";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import {
+  useKanbanCardDrag,
+  type CardDropPayload,
+} from "@/features/base/hooks/use-kanban-card-drag";
+import { BaseDropEdgeIndicator } from "@/features/base/components/grid/base-drop-edge-indicator";
+
+type KanbanCardProps = {
+  row: IBaseRow;
+  columnKey: string;
+  primaryProperty: IBaseProperty | undefined;
+  onClick: (rowId: string) => void;
+  onDrop: (payload: CardDropPayload) => void;
+  sortsActive: boolean;
+};
+
+export function KanbanCard({
+  row,
+  columnKey,
+  primaryProperty,
+  onClick,
+  onDrop,
+  sortsActive,
+}: KanbanCardProps) {
+  const { t } = useTranslation();
+  const { ref, isDragging, closestEdge } = useKanbanCardDrag({
+    cardId: row.id,
+    columnKey,
+    onDrop,
+    sortsActive,
+  });
+
+  const titleValue = primaryProperty
+    ? ((row.cells ?? {})[primaryProperty.id] as string | undefined)
+    : undefined;
+  const titleText = titleValue?.trim().length ? titleValue : t("Untitled");
+  const isEmpty = !titleValue?.trim().length;
+
+  return (
+    <div
+      ref={ref}
+      className={classes.card}
+      data-row-id={row.id}
+      data-dragging={isDragging || undefined}
+      role="button"
+      tabIndex={0}
+      onClick={() => onClick(row.id)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick(row.id);
+        }
+      }}
+    >
+      <div className={clsx(classes.cardTitle, isEmpty && classes.cardTitleEmpty)}>
+        {titleText}
+      </div>
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+    </div>
+  );
+}

apps/client/src/features/base/components/views/kanban/kanban-column-header.tsx

@@ -0,0 +1,69 @@
+import { ActionIcon, Badge, Menu, Text } from "@mantine/core";
+import { IconDots, IconEyeOff } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  useKanbanColumnReorder,
+  type ColumnReorderPayload,
+} from "@/features/base/hooks/use-kanban-column-reorder";
+import { BaseDropEdgeIndicator } from "@/features/base/components/grid/base-drop-edge-indicator";
+import classes from "@/features/base/styles/kanban.module.css";
+
+type KanbanColumnHeaderProps = {
+  columnKey: string;
+  name: string;
+  color: string | null;
+  count: number;
+  onReorderDrop: (payload: ColumnReorderPayload) => void;
+  onHide: (columnKey: string) => void;
+};
+
+export function KanbanColumnHeader({
+  columnKey,
+  name,
+  color,
+  count,
+  onReorderDrop,
+  onHide,
+}: KanbanColumnHeaderProps) {
+  const { t } = useTranslation();
+  const { ref, isDragging, closestEdge } = useKanbanColumnReorder({
+    columnKey,
+    onDrop: onReorderDrop,
+  });
+  return (
+    <div
+      ref={ref}
+      className={classes.columnHeader}
+      data-dragging={isDragging || undefined}
+    >
+      <div className={classes.columnHeaderLeft}>
+        {color ? (
+          <Badge color={color} variant="light" size="sm">
+            {name}
+          </Badge>
+        ) : (
+          <Text size="sm" c="dimmed">
+            {name}
+          </Text>
+        )}
+        <span className={classes.columnCount}>{count}</span>
+      </div>
+      <Menu shadow="md" width={160} position="bottom-end">
+        <Menu.Target>
+          <ActionIcon variant="subtle" size="sm" color="gray" data-no-drag>
+            <IconDots size={14} />
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconEyeOff size={14} />}
+            onClick={() => onHide(columnKey)}
+          >
+            {t("Hide group")}
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+    </div>
+  );
+}

apps/client/src/features/base/components/views/kanban/kanban-column.tsx

@@ -0,0 +1,76 @@
+import { useCallback } from "react";
+import { KanbanColumnData } from "@/features/base/hooks/use-kanban-groups";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import { KanbanCard } from "./kanban-card";
+import { KanbanColumnHeader } from "./kanban-column-header";
+import { KanbanAddCardButton } from "./kanban-add-card-button";
+import type { CardDropPayload } from "@/features/base/hooks/use-kanban-card-drag";
+import type { ColumnReorderPayload } from "@/features/base/hooks/use-kanban-column-reorder";
+import { useKanbanColumnDrop } from "@/features/base/hooks/use-kanban-column-drop";
+import { useKanbanAutoScroll } from "@/features/base/hooks/use-kanban-auto-scroll";
+import classes from "@/features/base/styles/kanban.module.css";
+
+type KanbanColumnProps = {
+  column: KanbanColumnData;
+  primaryProperty: IBaseProperty | undefined;
+  onCardClick: (rowId: string) => void;
+  onAddCard: (columnKey: string) => void;
+  onCardDrop: (payload: CardDropPayload) => void;
+  onColumnReorder: (payload: ColumnReorderPayload) => void;
+  onHide: (columnKey: string) => void;
+  sortsActive: boolean;
+};
+
+export function KanbanColumn({
+  column,
+  primaryProperty,
+  onCardClick,
+  onAddCard,
+  onCardDrop,
+  onColumnReorder,
+  onHide,
+  sortsActive,
+}: KanbanColumnProps) {
+  const { ref: bodyRef, isOver } = useKanbanColumnDrop({
+    columnKey: column.key,
+    onDrop: onCardDrop,
+  });
+  const canScrollColumn = useCallback(
+    ({ source }: { source: { data: Record<string, unknown> } }) =>
+      source.data.type === "base-kanban-card",
+    [],
+  );
+  useKanbanAutoScroll(bodyRef, "vertical", canScrollColumn);
+
+  return (
+    <div className={classes.column} data-column-key={column.key}>
+      <KanbanColumnHeader
+        columnKey={column.key}
+        name={column.name}
+        color={column.color}
+        count={column.rows.length}
+        onReorderDrop={onColumnReorder}
+        onHide={onHide}
+      />
+      <div
+        ref={bodyRef}
+        className={classes.columnBody}
+        data-column-body={column.key}
+        data-over={isOver || undefined}
+      >
+        {column.rows.map((row) => (
+          <KanbanCard
+            key={row.id}
+            row={row}
+            columnKey={column.key}
+            primaryProperty={primaryProperty}
+            onClick={onCardClick}
+            onDrop={onCardDrop}
+            sortsActive={sortsActive}
+          />
+        ))}
+        <KanbanAddCardButton onClick={() => onAddCard(column.key)} />
+      </div>
+    </div>
+  );
+}

apps/client/src/features/base/components/views/kanban/kanban-empty-state.tsx

@@ -0,0 +1,52 @@
+import { Stack, Text } from "@mantine/core";
+import { IconColumns3 } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { IBase } from "@/features/base/types/base.types";
+import { KanbanGroupByPicker } from "./kanban-group-by-picker";
+import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
+
+type KanbanEmptyStateProps = {
+  base: IBase;
+  onPick: (propertyId: string) => void;
+};
+
+export function KanbanEmptyState({ base, onPick }: KanbanEmptyStateProps) {
+  const { t } = useTranslation();
+  const hasGroupable = base.properties.some(
+    (p) => p.type === "select" || p.type === "status",
+  );
+
+  return (
+    <Stack align="center" gap="md" p="xl" mt={48}>
+      <IconColumns3 size={48} color="var(--mantine-color-gray-5)" />
+      <Text size="lg" fw={500}>
+        {t("Choose a property to group by")}
+      </Text>
+      {hasGroupable ? (
+        <KanbanGroupByPicker
+          properties={base.properties}
+          value={null}
+          onChange={onPick}
+        />
+      ) : (
+        <Stack align="center" gap="xs">
+          <Text size="sm" c="dimmed">
+            {t("Create a select or status property to use the kanban view.")}
+          </Text>
+          <CreatePropertyPopover
+            pageId={base.id}
+            properties={base.properties}
+            onPropertyCreated={() => {
+              // The base query invalidates on property create — the empty
+              // state will re-render with the picker variant. The user
+              // then picks the new property explicitly. (Auto-picking the
+              // new property requires receiving its id from the create
+              // mutation, which the current popover doesn't expose. Keep
+              // the explicit step for now.)
+            }}
+          />
+        </Stack>
+      )}
+    </Stack>
+  );
+}

apps/client/src/features/base/components/views/kanban/kanban-group-by-picker.tsx

@@ -0,0 +1,39 @@
+import { useMemo } from "react";
+import { Select } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { IBaseProperty } from "@/features/base/types/base.types";
+
+type KanbanGroupByPickerProps = {
+  properties: IBaseProperty[];
+  value: string | null;
+  onChange: (propertyId: string) => void;
+  // Allows the toolbar variant to render compact / narrow.
+  size?: "xs" | "sm" | "md";
+};
+
+export function KanbanGroupByPicker({
+  properties,
+  value,
+  onChange,
+  size = "sm",
+}: KanbanGroupByPickerProps) {
+  const { t } = useTranslation();
+  const data = useMemo(
+    () =>
+      properties
+        .filter((p) => p.type === "select" || p.type === "status")
+        .map((p) => ({ value: p.id, label: p.name || t("Untitled") })),
+    [properties, t],
+  );
+  return (
+    <Select
+      placeholder={t("Group by…")}
+      data={data}
+      value={value}
+      onChange={(v) => v && onChange(v)}
+      size={size}
+      allowDeselect={false}
+      searchable
+    />
+  );
+}

apps/client/src/features/base/components/views/view-field-visibility.tsx

@@ -0,0 +1,161 @@
+import { useMemo, useCallback } from "react";
+import { Popover, Switch, Stack, Text, Group, Divider, UnstyledButton } from "@mantine/core";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import { Table } from "@tanstack/react-table";
+import { IBaseRow, IBaseProperty } from "@/features/base/types/base.types";
+import { propertyTypes } from "@/features/base/components/property/property-type-picker";
+import { useTranslation } from "react-i18next";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type ViewFieldVisibilityProps = {
+  opened: boolean;
+  onClose: () => void;
+  table: Table<IBaseRow>;
+  properties: IBaseProperty[];
+  onPersist: () => void;
+  children: React.ReactNode;
+};
+
+export function ViewFieldVisibility({
+  opened,
+  onClose,
+  table,
+  properties,
+  onPersist,
+  children,
+}: ViewFieldVisibilityProps) {
+  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}
+      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("Fields")}
+            </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" style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {property.name}
+                    </Text>
+                  </Group>
+                  <Switch
+                    size="xs"
+                    checked={isVisible}
+                    disabled={!canHide}
+                    onChange={() => {}}
+                    // Mantine's Switch spreads `onClick` onto its hidden
+                    // <input>. When the user clicks the visible track, the
+                    // label's default action synthesizes a second click on
+                    // that input — both clicks bubble to the parent
+                    // UnstyledButton and fire handleToggle twice (hide then
+                    // immediately unhide, net zero). stopPropagation here
+                    // blocks ONLY the synthesized input click from reaching
+                    // UnstyledButton; the original track click still bubbles
+                    // normally, so handleToggle fires exactly once.
+                    onClick={(e) => e.stopPropagation()}
+                    styles={{ track: { cursor: canHide ? "pointer" : "not-allowed" } }}
+                  />
+                </UnstyledButton>
+              );
+            })}
+          </Stack>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/features/base/components/views/view-filter-config.tsx

@@ -0,0 +1,447 @@
+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 "@/features/base/types/base.types";
+import { useTranslation } from "react-i18next";
+
+/*
+ * Operator metadata for the filter popover. Values use the server
+ * engine's operator set (`core/base/engine/schema.zod.ts`); labels are
+ * i18n-translated display strings.
+ */
+const OPERATORS: { value: FilterOperator; labelKey: string }[] = [
+  { value: "eq", labelKey: "Equals" },
+  { value: "neq", labelKey: "Not equals" },
+  { value: "contains", labelKey: "Contains" },
+  { value: "ncontains", labelKey: "Not contains" },
+  { value: "isEmpty", labelKey: "Is empty" },
+  { value: "isNotEmpty", labelKey: "Is not empty" },
+  { value: "gt", labelKey: "Greater than" },
+  { value: "lt", labelKey: "Less than" },
+  { value: "before", labelKey: "Before" },
+  { value: "after", labelKey: "After" },
+  { value: "any", labelKey: "Any of" },
+  { value: "none", labelKey: "None of" },
+];
+
+const NO_VALUE_OPERATORS: FilterOperator[] = ["isEmpty", "isNotEmpty"];
+
+function getOperatorsForType(type: string): FilterOperator[] {
+  switch (type) {
+    case "text":
+    case "email":
+    case "url":
+      return ["eq", "neq", "contains", "ncontains", "isEmpty", "isNotEmpty"];
+    case "number":
+      return ["eq", "neq", "gt", "lt", "isEmpty", "isNotEmpty"];
+    case "date":
+    case "createdAt":
+    case "lastEditedAt":
+      return ["eq", "neq", "before", "after", "isEmpty", "isNotEmpty"];
+    case "select":
+    case "status":
+      return ["eq", "neq", "any", "none", "isEmpty", "isNotEmpty"];
+    case "multiSelect":
+      return ["any", "none", "isEmpty", "isNotEmpty"];
+    case "checkbox":
+      return ["eq", "isEmpty", "isNotEmpty"];
+    case "person":
+    case "lastEditedBy":
+      return ["eq", "neq", "any", "none", "isEmpty", "isNotEmpty"];
+    case "file":
+      return ["isEmpty", "isNotEmpty"];
+    case "page":
+      return ["isEmpty", "isNotEmpty"];
+    default:
+      return ["eq", "neq", "isEmpty", "isNotEmpty"];
+  }
+}
+
+function FilterValueInput({
+  condition,
+  property,
+  onChange,
+  t,
+}: {
+  condition: FilterCondition;
+  property: IBaseProperty | undefined;
+  onChange: (value: string) => 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 type = property.type;
+
+  if (type === "select" || type === "status" || type === "multiSelect") {
+    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"
+        data={choiceOptions}
+        value={(condition.value as string) ?? null}
+        onChange={(val) => onChange(val ?? "")}
+        w={120}
+        placeholder={t("Select")}
+      />
+    );
+  }
+
+  if (type === "number") {
+    return (
+      <TextInput
+        size="xs"
+        type="number"
+        placeholder={t("Value")}
+        value={(condition.value as string) ?? ""}
+        onChange={(e) => onChange(e.currentTarget.value)}
+        w={100}
+      />
+    );
+  }
+
+  if (type === "checkbox") {
+    return (
+      <Select
+        size="xs"
+        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);
+      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],
+  );
+
+  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);
+            return {
+              ...f,
+              propertyId,
+              op: currentOperatorValid ? f.op : validOperators[0],
+              value: currentOperatorValid ? 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;
+      const needsValue = !NO_VALUE_OPERATORS.includes(op);
+      onChange(
+        conditions.map((f, i) =>
+          i === index
+            ? {
+                ...f,
+                op,
+                value: needsValue ? f.value : undefined,
+              }
+            : f,
+        ),
+      );
+    },
+    [conditions, onChange],
+  );
+
+  const handleValueChange = useCallback(
+    (index: number, value: string) => {
+      onChange(
+        conditions.map((f, i) =>
+          i === index ? { ...f, value: value || undefined } : f,
+        ),
+      );
+    },
+    [conditions, onChange],
+  );
+
+  return (
+    <Popover
+      opened={opened}
+      onClose={onClose}
+      position="bottom-end"
+      shadow="md"
+      width={440}
+      trapFocus
+      withinPortal
+    >
+      <Popover.Target>{children}</Popover.Target>
+      <Popover.Dropdown>
+        <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"
+                  data={propertyOptions}
+                  value={condition.propertyId}
+                  onChange={(val) => handlePropertyChange(index, val)}
+                  style={{ flex: 1 }}
+                />
+                <Select
+                  size="xs"
+                  data={operatorOptions}
+                  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"
+                    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>
+          )}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/features/base/components/views/view-renderer.tsx

@@ -0,0 +1,53 @@
+import { Table } from "@tanstack/react-table";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+} from "@/features/base/types/base.types";
+import { BaseTable } from "@/features/base/components/base-table";
+import { BaseKanban } from "@/features/base/components/views/kanban/base-kanban";
+
+type ViewRendererProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  effectiveView: IBaseView | undefined;
+  table: Table<IBaseRow>;
+  pageId: string;
+  embedded?: 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;
+  onCardClick: (rowId: string) => void;
+  persistViewConfig: () => void;
+  scrollportEl: HTMLDivElement | null;
+  stickyBandPrelude?: React.ReactNode;
+};
+
+export function ViewRenderer(props: ViewRendererProps) {
+  const viewType = props.effectiveView?.type ?? "table";
+
+  if (viewType === "kanban") {
+    return (
+      <BaseKanban
+        base={props.base}
+        rows={props.rows}
+        effectiveView={props.effectiveView}
+        onCardClick={props.onCardClick}
+        hasNextPage={props.hasNextPage}
+        isFetchingNextPage={props.isFetchingNextPage}
+        onFetchNextPage={props.onFetchNextPage}
+      />
+    );
+  }
+
+  return <BaseTable {...props} />;
+}

apps/client/src/features/base/components/views/view-sort-config.tsx

@@ -0,0 +1,220 @@
+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 "@/features/base/types/base.types";
+import { useTranslation } from "react-i18next";
+
+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);
+
+  // Discard any half-configured draft when the popover closes.
+  useEffect(() => {
+    if (!opened) setDraft(null);
+  }, [opened]);
+
+  // Page properties store a UUID; sorting by raw UUID is unhelpful and
+  // title-based sort would require a join. Hide until we support it properly.
+  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}
+      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>
+  );
+}

apps/client/src/features/base/components/views/view-tabs.tsx

@@ -0,0 +1,274 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import {
+  Group,
+  UnstyledButton,
+  Text,
+  ActionIcon,
+  Tooltip,
+  TextInput,
+  Popover,
+  Stack,
+  Divider,
+} from "@mantine/core";
+import { IconPlus, IconPencil, IconTrash, IconTable } from "@tabler/icons-react";
+import { IBaseView } from "@/features/base/types/base.types";
+import {
+  useUpdateViewMutation,
+  useDeleteViewMutation,
+} from "@/features/base/queries/base-view-query";
+import { useTranslation } from "react-i18next";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type ViewTabsProps = {
+  views: IBaseView[];
+  activeViewId: string | undefined;
+  pageId: string;
+  onViewChange: (viewId: string) => void;
+  onAddView?: () => void;
+};
+
+export function ViewTabs({
+  views,
+  activeViewId,
+  pageId,
+  onViewChange,
+  onAddView,
+}: ViewTabsProps) {
+  const { t } = useTranslation();
+  const [editingViewId, setEditingViewId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState("");
+
+  const updateViewMutation = useUpdateViewMutation();
+  const deleteViewMutation = useDeleteViewMutation();
+
+  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 (views.length <= 1) return;
+      deleteViewMutation.mutate({ viewId, pageId });
+      if (viewId === activeViewId && views.length > 1) {
+        const remaining = views.filter((v) => v.id !== viewId);
+        onViewChange(remaining[0].id);
+      }
+    },
+    [views, pageId, activeViewId, deleteViewMutation, onViewChange],
+  );
+
+  return (
+    <Group gap={4}>
+      {views.map((view) => (
+        <ViewTab
+          key={view.id}
+          view={view}
+          isActive={view.id === activeViewId}
+          isEditing={view.id === editingViewId}
+          editingName={editingName}
+          canDelete={views.length > 1}
+          onClick={() => onViewChange(view.id)}
+          onRenameStart={() => handleRenameStart(view)}
+          onRenameChange={setEditingName}
+          onRenameCommit={handleRenameCommit}
+          onRenameKeyDown={handleRenameKeyDown}
+          onDelete={() => handleDelete(view.id)}
+        />
+      ))}
+      {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,
+  onClick,
+  onRenameStart,
+  onRenameChange,
+  onRenameCommit,
+  onRenameKeyDown,
+  onDelete,
+}: {
+  view: IBaseView;
+  isActive: boolean;
+  isEditing: boolean;
+  editingName: string;
+  canDelete: boolean;
+  onClick: () => void;
+  onRenameStart: () => void;
+  onRenameChange: (name: string) => void;
+  onRenameCommit: () => void;
+  onRenameKeyDown: (e: React.KeyboardEvent) => void;
+  onDelete: () => void;
+}) {
+  const { t } = useTranslation();
+  const [menuOpened, setMenuOpened] = useState(false);
+  const targetRef = useRef<HTMLButtonElement | null>(null);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  // Mantine Popover's built-in closeOnClickOutside / closeOnEscape
+  // only fire when focus is inside the dropdown — but the menu opens
+  // via right-click (focus stays on body), so neither ever triggers.
+  // Wire the close paths ourselves while the menu is open. Capture
+  // phase mousedown so we run before grid-container's outside-click
+  // logic (which would otherwise blur the focused element first and
+  // cause weirdness).
+  useEffect(() => {
+    if (!menuOpened) return;
+    const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (dropdownRef.current?.contains(target)) return;
+      if (targetRef.current?.contains(target)) return;
+      setMenuOpened(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setMenuOpened(false);
+    };
+    document.addEventListener("mousedown", onMouseDown, true);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDown, true);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [menuOpened]);
+
+  if (isEditing) {
+    return (
+      <TextInput
+        size="xs"
+        w={120}
+        value={editingName}
+        onChange={(e) => onRenameChange(e.currentTarget.value)}
+        onBlur={onRenameCommit}
+        onKeyDown={onRenameKeyDown}
+        autoFocus
+      />
+    );
+  }
+
+  const handleTabClick = useCallback(() => {
+    // Left-click on the tab is "switch view"; if the menu happens to
+    // be open from a prior right-click, dismiss it as part of the
+    // same gesture so the user doesn't have to click twice.
+    if (menuOpened) setMenuOpened(false);
+    onClick();
+  }, [menuOpened, onClick]);
+
+  return (
+    <Popover
+      opened={menuOpened}
+      onClose={() => setMenuOpened(false)}
+      position="bottom-start"
+      shadow="md"
+      width={180}
+      withinPortal
+    >
+      <Popover.Target>
+        <UnstyledButton
+          ref={targetRef}
+          onClick={handleTabClick}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            setMenuOpened(true);
+          }}
+          style={{
+            padding: "4px 10px",
+            borderRadius: "var(--mantine-radius-sm)",
+            fontWeight: isActive ? 600 : 400,
+          }}
+        >
+          <Group gap={6} wrap="nowrap">
+            <IconTable size={14} opacity={0.5} />
+            <Text
+              size="sm"
+              c={isActive ? undefined : "dimmed"}
+            >
+              {view.name}
+            </Text>
+          </Group>
+        </UnstyledButton>
+      </Popover.Target>
+      <Popover.Dropdown ref={dropdownRef} p={4}>
+        <Stack gap={0}>
+          <UnstyledButton
+            className={cellClasses.menuItem}
+            onClick={() => {
+              setMenuOpened(false);
+              onRenameStart();
+            }}
+          >
+            <Group gap={8} wrap="nowrap">
+              <IconPencil size={14} />
+              <Text size="sm">{t("Rename")}</Text>
+            </Group>
+          </UnstyledButton>
+          {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>
+  );
+}

apps/client/src/features/base/hooks/__tests__/resolve-card-drop.spec.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect, vi } from "vitest";
+
+let throwOnNextCall = false;
+vi.mock("fractional-indexing-jittered", () => ({
+  generateJitteredKeyBetween: (a: string | null, b: string | null) => {
+    if (throwOnNextCall) {
+      throwOnNextCall = false;
+      throw new Error("lower >= upper");
+    }
+    return `${a ?? "START"}|${b ?? "END"}`;
+  },
+}));
+
+import { resolveCardDrop } from "../resolve-card-drop";
+import { NO_VALUE_CHOICE_ID } from "@/features/base/types/base.types";
+
+const mkRow = (id: string, position: string) =>
+  ({ id, position, cells: {} }) as any;
+
+describe("resolveCardDrop", () => {
+  it("returns cells-only when cross-column drop happens with sort active", () => {
+    const result = resolveCardDrop({
+      draggedCardId: "r1",
+      targetCardId: "r2",
+      edge: "top",
+      sourceColumnKey: "c1",
+      targetColumnKey: "c2",
+      groupByPropertyId: "prop-status",
+      columnRows: [mkRow("r2", "b")],
+      sortsActive: true,
+    });
+    expect(result.cells).toEqual({ "prop-status": "c2" });
+    expect(result.position).toBeUndefined();
+  });
+
+  it("writes null cell value when target is the NO_VALUE column", () => {
+    const result = resolveCardDrop({
+      draggedCardId: "r1",
+      targetCardId: "r2",
+      edge: "top",
+      sourceColumnKey: "c1",
+      targetColumnKey: NO_VALUE_CHOICE_ID,
+      groupByPropertyId: "prop-status",
+      columnRows: [mkRow("r2", "b")],
+      sortsActive: false,
+    });
+    expect(result.cells).toEqual({ "prop-status": null });
+  });
+
+  it("returns position-only when intra-column drop with no sort", () => {
+    const result = resolveCardDrop({
+      draggedCardId: "r1",
+      targetCardId: "r2",
+      edge: "bottom",
+      sourceColumnKey: "c1",
+      targetColumnKey: "c1",
+      groupByPropertyId: "prop-status",
+      columnRows: [mkRow("r2", "a"), mkRow("r3", "c")],
+      sortsActive: false,
+    });
+    expect(result.cells).toBeUndefined();
+    expect(typeof result.position).toBe("string");
+    // Between 'a' (r2) and 'c' (r3) → some key, exact value depends on jitter
+    // but must satisfy 'a' < key < 'c' for typical jitter outputs.
+    expect(result.position! > "a").toBe(true);
+    expect(result.position! < "c").toBe(true);
+  });
+
+  it("returns both cells and position for cross-column with slot", () => {
+    const result = resolveCardDrop({
+      draggedCardId: "r1",
+      targetCardId: "r2",
+      edge: "top",
+      sourceColumnKey: "c1",
+      targetColumnKey: "c2",
+      groupByPropertyId: "prop-status",
+      columnRows: [mkRow("r2", "b"), mkRow("r3", "d")],
+      sortsActive: false,
+    });
+    expect(result.cells).toEqual({ "prop-status": "c2" });
+    expect(typeof result.position).toBe("string");
+    expect(result.position! < "b").toBe(true);
+  });
+
+  it("appends to the end when targetCardId is not in columnRows (empty/below-last)", () => {
+    const result = resolveCardDrop({
+      draggedCardId: "r1",
+      targetCardId: "__column-body__", // sentinel
+      edge: "bottom",
+      sourceColumnKey: "c1",
+      targetColumnKey: "c2",
+      groupByPropertyId: "prop-status",
+      columnRows: [mkRow("r5", "z")],
+      sortsActive: false,
+    });
+    expect(result.cells).toEqual({ "prop-status": "c2" });
+    expect(result.position! > "z").toBe(true);
+  });
+
+  it("returns undefined for both fields when same column and sort active", () => {
+    const result = resolveCardDrop({
+      draggedCardId: "r1",
+      targetCardId: "r2",
+      edge: "top",
+      sourceColumnKey: "c1",
+      targetColumnKey: "c1",
+      groupByPropertyId: "prop-status",
+      columnRows: [mkRow("r2", "a")],
+      sortsActive: true,
+    });
+    expect(result.cells).toBeUndefined();
+    expect(result.position).toBeUndefined();
+  });
+
+  it("falls back to append-after-lower when generateJitteredKeyBetween throws", () => {
+    throwOnNextCall = true;
+    const result = resolveCardDrop({
+      draggedCardId: "r1",
+      targetCardId: "r2",
+      edge: "top",
+      sourceColumnKey: "c1",
+      targetColumnKey: "c1",
+      groupByPropertyId: "prop-status",
+      columnRows: [mkRow("r2", "b"), mkRow("r3", "d")],
+      sortsActive: false,
+    });
+    // First call (lower=null, upper="b") threw → second call (lower=null,
+    // upper=null) succeeds. The mock returns "START|END" in that case.
+    expect(result.cells).toBeUndefined();
+    expect(result.position).toBe("START|END");
+  });
+});

apps/client/src/features/base/hooks/__tests__/use-kanban-groups.spec.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect } from "vitest";
+import { partitionRowsByGroup } from "../use-kanban-groups";
+import { NO_VALUE_CHOICE_ID } from "@/features/base/types/base.types";
+
+describe("partitionRowsByGroup", () => {
+  const property = {
+    id: "p1",
+    type: "status",
+    typeOptions: {
+      choices: [
+        { id: "c1", name: "Todo", color: "blue" },
+        { id: "c2", name: "Done", color: "green" },
+      ],
+      choiceOrder: ["c1", "c2"],
+    },
+  } as any;
+
+  const rows = [
+    { id: "r1", cells: { p1: "c1" }, position: "a0" },
+    { id: "r2", cells: { p1: "c2" }, position: "a1" },
+    { id: "r3", cells: {}, position: "a2" },
+    { id: "r4", cells: { p1: "c1" }, position: "a3" },
+  ] as any;
+
+  it("groups rows under the choice id their cell points at", () => {
+    const result = partitionRowsByGroup(rows, property, undefined, undefined);
+    expect(result.columns.map((c) => c.key)).toEqual([
+      NO_VALUE_CHOICE_ID,
+      "c1",
+      "c2",
+    ]);
+    expect(result.columns[1].rows.map((r) => r.id)).toEqual(["r1", "r4"]);
+    expect(result.columns[2].rows.map((r) => r.id)).toEqual(["r2"]);
+  });
+
+  it("puts rows without the cell into the NO_VALUE column", () => {
+    const result = partitionRowsByGroup(rows, property, undefined, undefined);
+    expect(result.columns[0].key).toBe(NO_VALUE_CHOICE_ID);
+    expect(result.columns[0].rows.map((r) => r.id)).toEqual(["r3"]);
+  });
+
+  it("hides columns listed in hiddenChoiceIds", () => {
+    const result = partitionRowsByGroup(rows, property, ["c2"], undefined);
+    expect(result.columns.map((c) => c.key)).toEqual([NO_VALUE_CHOICE_ID, "c1"]);
+  });
+
+  it("hides the NO_VALUE column when hiddenChoiceIds includes the sentinel", () => {
+    const result = partitionRowsByGroup(
+      rows,
+      property,
+      [NO_VALUE_CHOICE_ID],
+      undefined,
+    );
+    expect(result.columns.map((c) => c.key)).toEqual(["c1", "c2"]);
+  });
+
+  it("respects an override choiceOrder", () => {
+    const result = partitionRowsByGroup(
+      rows,
+      property,
+      undefined,
+      ["c2", "c1", NO_VALUE_CHOICE_ID],
+    );
+    expect(result.columns.map((c) => c.key)).toEqual([
+      "c2",
+      "c1",
+      NO_VALUE_CHOICE_ID,
+    ]);
+  });
+
+  it("appends newly-added choices (missing from override choiceOrder) at the end", () => {
+    const result = partitionRowsByGroup(
+      rows,
+      property,
+      undefined,
+      ["c1"], // missing c2 and NO_VALUE
+    );
+    expect(result.columns.map((c) => c.key)).toEqual([
+      "c1",
+      NO_VALUE_CHOICE_ID,
+      "c2",
+    ]);
+  });
+
+  it("drops entries in choiceOrder that no longer exist on the property", () => {
+    const result = partitionRowsByGroup(
+      rows,
+      property,
+      undefined,
+      ["c1", "deleted-choice", "c2"],
+    );
+    // 'deleted-choice' is filtered out as stale. NO_VALUE is auto-appended
+    // (it's never in the property's choices but always rendered unless
+    // explicitly hidden via hiddenChoiceIds).
+    expect(result.columns.map((c) => c.key)).toEqual([
+      "c1",
+      "c2",
+      NO_VALUE_CHOICE_ID,
+    ]);
+  });
+
+  it("returns null columns when groupByPropertyId is unset", () => {
+    const result = partitionRowsByGroup(rows, undefined, undefined, undefined);
+    expect(result.columns).toEqual([]);
+  });
+
+  it("preserves row order within a column (input order)", () => {
+    const rowsOutOfOrder = [
+      { id: "r1", cells: { p1: "c1" }, position: "b" },
+      { id: "r2", cells: { p1: "c1" }, position: "a" },
+    ] as any;
+    const result = partitionRowsByGroup(
+      rowsOutOfOrder,
+      property,
+      undefined,
+      undefined,
+    );
+    expect(result.columns[1].rows.map((r) => r.id)).toEqual(["r1", "r2"]);
+  });
+});

apps/client/src/features/base/hooks/resolve-card-drop.ts

@@ -0,0 +1,92 @@
+import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
+import { IBaseRow, NO_VALUE_CHOICE_ID } from "@/features/base/types/base.types";
+
+type Edge = "top" | "bottom";
+
+export type ResolveCardDropInput = {
+  draggedCardId: string;
+  targetCardId: string;
+  edge: Edge | null;
+  sourceColumnKey: string;
+  targetColumnKey: string;
+  groupByPropertyId: string;
+  columnRows: IBaseRow[]; // rows currently in the target column, in display order
+  sortsActive: boolean;
+};
+
+export type ResolveCardDropResult = {
+  cells: Record<string, unknown> | undefined;
+  position: string | undefined;
+};
+
+export function resolveCardDrop(
+  input: ResolveCardDropInput,
+): ResolveCardDropResult {
+  const {
+    draggedCardId,
+    targetCardId,
+    edge,
+    sourceColumnKey,
+    targetColumnKey,
+    groupByPropertyId,
+    columnRows,
+    sortsActive,
+  } = input;
+
+  const sameColumn = sourceColumnKey === targetColumnKey;
+
+  // Compute the cells patch first.
+  const cells = sameColumn
+    ? undefined
+    : {
+        [groupByPropertyId]:
+          targetColumnKey === NO_VALUE_CHOICE_ID ? null : targetColumnKey,
+      };
+
+  // Same column + sort active → block (caller should have stopped the drag
+  // via canDrop, but we return no-op for safety).
+  if (sameColumn && sortsActive) {
+    return { cells: undefined, position: undefined };
+  }
+
+  // Sort active and cross-column → only cells, no position.
+  if (sortsActive) {
+    return { cells, position: undefined };
+  }
+
+  // Sort inactive → compute the slot.
+  // Filter the dragged card out of the column (it may already be there
+  // when intra-column drag).
+  const target = columnRows.filter((r) => r.id !== draggedCardId);
+  const targetIndex = target.findIndex((r) => r.id === targetCardId);
+
+  let lower: string | null;
+  let upper: string | null;
+
+  if (targetIndex === -1) {
+    // Drop on column body / sentinel / below-last → append.
+    const last = target[target.length - 1];
+    lower = last?.position ?? null;
+    upper = null;
+  } else if (edge === "top") {
+    lower = target[targetIndex - 1]?.position ?? null;
+    upper = target[targetIndex].position;
+  } else {
+    lower = target[targetIndex].position;
+    upper = target[targetIndex + 1]?.position ?? null;
+  }
+
+  let position: string;
+  try {
+    position = generateJitteredKeyBetween(lower, upper);
+  } catch {
+    // Throws whenever `lower >= upper` (the row ordering in `columnRows`
+    // briefly diverged from position ordering — typically during a
+    // concurrent reorder). Fall back to insert-after-lower. The card lands
+    // at the end of the column rather than at the dropped slot; surprising
+    // but better than rejecting the drop. The reconciliation arrives via
+    // the realtime patch.
+    position = generateJitteredKeyBetween(lower, null);
+  }
+  return { cells, position };
+}

apps/client/src/features/base/hooks/use-base-socket.ts

@@ -0,0 +1,362 @@
+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 {
+  IBaseProperty,
+  IBaseRow,
+  IBaseView,
+} from "@/features/base/types/base.types";
+import { selectedRowIdsAtomFamily } from "@/features/base/atoms/base-atoms";
+import { formulaRecomputeAtom } from "@/features/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 BaseInboundEvent =
+  | BaseRowCreated
+  | BaseRowUpdated
+  | BaseRowDeleted
+  | BaseRowsDeleted
+  | BaseRowReordered
+  | BaseRowsUpdated
+  | BaseFormulaRecomputeStarted
+  | BaseFormulaRecomputeCompleted
+  | BaseSchemaBumped
+  | BasePropertyEvent
+  | BaseViewEvent
+  | { operation: string; pageId: string };
+
+/*
+ * Module-level set of requestIds we've just sent to the server. When the
+ * socket echoes back the mutation as a `base:row:*` / `base:property:*`
+ * event with a matching `requestId`, the socket handler drops it because
+ * the local mutation already updated the cache. Bounded so it can't grow
+ * unbounded on a long-lived tab.
+ */
+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 server's `base-{pageId}`
+ * room on mount, leaves on unmount, and reconciles the React Query caches
+ * (`["base-rows", pageId, ...]` and `["bases", pageId]`) when events
+ * arrive from other clients.
+ */
+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.
+          // Uncached pages will fetch fresh when the user scrolls to them,
+          // so invalidating on batches the user can't see is wasted work —
+          // formula backfills on a large base emit one batch event per 500
+          // rows, so this also drops ~Nrows/500 redundant refetches.
+          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": {
+          // The worker just committed a property type conversion (Path 3) or
+          // a property/cell GC. Invalidate the base + row caches so cells
+          // re-fetch under the new schema.
+          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 touch the base's `properties` /
+          // `views`, not the cell data — so we invalidate just
+          // `["bases", pageId]` here. Row reconciliation is handled
+          // per-event by the row cases above.
+          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]);
+}

apps/client/src/features/base/hooks/use-base-table.ts

@@ -0,0 +1,426 @@
+import { useMemo, useCallback, useRef, useState, useEffect } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  createColumnHelper,
+  ColumnDef,
+  SortingState,
+  ColumnSizingState,
+  VisibilityState,
+  ColumnOrderState,
+  ColumnPinningState,
+  Table,
+} from "@tanstack/react-table";
+import {
+  IBase,
+  IBaseProperty,
+  IBaseRow,
+  IBaseView,
+  ViewConfig,
+} from "@/features/base/types/base.types";
+import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
+
+const DEFAULT_COLUMN_WIDTH = 180;
+const MIN_COLUMN_WIDTH = 80;
+const MAX_COLUMN_WIDTH = 600;
+const ROW_NUMBER_COLUMN_WIDTH = 64;
+
+// Keep in sync with the server's SYSTEM_PROPERTY_TYPES in
+// apps/server/src/core/base/base.schemas.ts. Both sets must include
+// formula so the property menu treats formula columns as read-only.
+export const SYSTEM_PROPERTY_TYPES = new Set([
+  "createdAt",
+  "lastEditedAt",
+  "lastEditedBy",
+  "formula",
+]);
+
+export function isSystemPropertyType(type: string): boolean {
+  return SYSTEM_PROPERTY_TYPES.has(type);
+}
+
+const columnHelper = createColumnHelper<IBaseRow>();
+
+function getSystemAccessor(type: string): ((row: IBaseRow) => unknown) | null {
+  switch (type) {
+    case "createdAt":
+      return (row) => row.createdAt;
+    case "lastEditedAt":
+      return (row) => row.updatedAt;
+    case "lastEditedBy":
+      return (row) => row.lastUpdatedById ?? row.creatorId;
+    default:
+      return null;
+  }
+}
+
+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 = getSystemAccessor(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[],
+): ColumnPinningState {
+  const primary = properties.find((p) => p.isPrimary);
+  return {
+    left: primary ? ["__row_number", primary.id] : ["__row_number"],
+    right: [],
+  };
+}
+
+// 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 {
+  // Guard against corrupted persisted configs — if `base` ever comes
+  // back as something other than a plain object (e.g. a jsonb-stored
+  // string `"{}"` from a buggy seed), spreading it would iterate its
+  // characters into keys `0`, `1`, … and poison the config forever.
+  const safeBase =
+    base && typeof base === "object" && !Array.isArray(base) ? base : {};
+  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 {
+    ...safeBase,
+    sorts,
+    propertyWidths,
+    propertyOrder,
+    hiddenPropertyIds,
+    visiblePropertyIds: undefined,
+    ...overrides,
+  };
+}
+
+export type UseBaseTableResult = {
+  table: Table<IBaseRow>;
+  persistViewConfig: () => void;
+};
+
+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 {
+  const updateViewMutation = useUpdateViewMutation();
+  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // While a local edit is pending (debounce scheduled OR mutation in
+  // flight), the reconcile effect preserves local state so we don't
+  // stomp the user's in-flight toggle. When no local edit is pending,
+  // the effect adopts server state — that's what makes remote updates
+  // (another client hiding a column) actually show up on this client.
+  const [hasPendingEdit, setHasPendingEdit] = useState(false);
+
+  // `base?.properties ?? []` minted a fresh `[]` every render while the
+  // base query was loading, which invalidated every downstream memo and
+  // tripped the setState-in-useEffect pairs below → "Maximum update
+  // depth exceeded". Memoize so the identity is stable.
+  const properties = useMemo(() => base?.properties ?? [], [base?.properties]);
+  const viewConfig = activeView?.config;
+
+  const columns = useMemo(
+    () => buildColumns(properties),
+    [properties],
+  );
+
+  const initialSorting = useMemo(
+    () => buildSortingState(viewConfig),
+    [viewConfig],
+  );
+
+  const initialColumnSizing = 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);
+
+  // 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;
+
+    // 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. If a local edit is pending (user just toggled and
+    // the debounce hasn't flushed yet, or the mutation is in flight),
+    // preserve local state — only reconcile the id set so that newly
+    // created columns show up and deleted columns drop out without
+    // stomping the user's toggle. If nothing local is pending, adopt
+    // the server's state — this is what lets remote updates from
+    // other clients show up here.
+    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;
+      });
+    } else {
+      setColumnOrder(derivedColumnOrder);
+      setColumnVisibility(derivedColumnVisibility);
+    }
+  }, [
+    activeView?.id,
+    derivedColumnOrder,
+    derivedColumnVisibility,
+    properties,
+    hasPendingEdit,
+  ]);
+
+  const columnPinning = useMemo(
+    () => buildColumnPinning(properties),
+    [properties],
+  );
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: {
+      columnPinning,
+      columnOrder,
+      columnVisibility,
+    },
+    onColumnOrderChange: setColumnOrder,
+    onColumnVisibilityChange: setColumnVisibility,
+    initialState: {
+      sorting: initialSorting,
+      columnSizing: initialColumnSizing,
+    },
+    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;
+      // `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,
+      });
+      updateViewMutation.mutate(
+        { viewId: activeView.id, pageId: base.id, config },
+        {
+          onSettled: () => {
+            // Don't clear if the user has already scheduled another
+            // debounce while this one was in flight.
+            if (persistTimerRef.current === null) {
+              setHasPendingEdit(false);
+            }
+          },
+        },
+      );
+    }, 300);
+  }, [activeView, base, table, updateViewMutation, opts.baselineConfig]);
+
+  return { table, persistViewConfig };
+}