fix tsconfig

license file
fix: change permissions object shape
2026-06-16 06:57:01 +08:00 · 2026-06-15 19:43:01 +01:00 · 2026-06-15 19:12:18 +01:00 · 2026-06-15 17:51:12 +01:00 · 2026-06-15 09:46:08 +01:00 · 2026-06-15 08:29:29 +01:00
403 changed files with 14317 additions and 24491 deletions
@@ -1,309 +0,0 @@
-# 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.
@@ -1,479 +0,0 @@
-# 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.
@@ -28,6 +28,8 @@ COPY --from=builder /app/apps/server/package.json /app/apps/server/package.json
 # Copy packages
 COPY --from=builder /app/packages/editor-ext/dist /app/packages/editor-ext/dist
 COPY --from=builder /app/packages/editor-ext/package.json /app/packages/editor-ext/package.json
+COPY --from=builder /app/packages/base-formula/dist /app/packages/base-formula/dist
+COPY --from=builder /app/packages/base-formula/package.json /app/packages/base-formula/package.json

 # Copy root package files
 COPY --from=builder /app/package.json /app/package.json
@@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.90.0",
+  "version": "0.90.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@@ -34,7 +34,7 @@
    "@tabler/icons-react": "3.40.0",
    "@tanstack/react-query": "5.90.17",
    "@tanstack/react-table": "8.21.3",
-    "@tanstack/react-virtual": "3.13.24",
+    "@tanstack/react-virtual": "3.14.2",
    "alfaaz": "1.1.0",
    "axios": "1.16.0",
    "blueimp-load-image": "5.16.0",
@@ -45,7 +45,7 @@
    "i18next-http-backend": "3.0.6",
    "jotai": "2.18.1",
    "jotai-optics": "0.4.0",
-    "js-cookie": "3.0.5",
+    "js-cookie": "3.0.7",
    "jwt-decode": "4.0.0",
    "katex": "0.16.40",
    "lowlight": "3.3.0",
@@ -1084,23 +1084,5 @@
  "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",
-  "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."
+  "Create subpage of {{name}}": "Unterseite von {{name}} erstellen"
 }
@@ -41,6 +41,8 @@
  "Dark": "Dark",
  "Date": "Date",
  "Delete": "Delete",
+  "Remove from page": "Remove from page",
+  "Base options": "Base options",
  "Delete group": "Delete group",
  "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.",
  "Description": "Description",
@@ -76,6 +78,24 @@
  "Failed to import pages": "Failed to import pages",
  "Failed to load page. An error occurred.": "Failed to load page. An error occurred.",
  "Failed to update data": "Failed to update data",
+  "Failed to create base": "Failed to create base",
+  "Failed to update base": "Failed to update base",
+  "Failed to delete base": "Failed to delete base",
+  "Failed to create property": "Failed to create property",
+  "Failed to update property": "Failed to update property",
+  "Failed to delete property": "Failed to delete property",
+  "Failed to reorder property": "Failed to reorder property",
+  "Failed to create view": "Failed to create view",
+  "Failed to update view": "Failed to update view",
+  "Failed to delete view": "Failed to delete view",
+  "Failed to create row": "Failed to create row",
+  "Failed to update row": "Failed to update row",
+  "Failed to delete row": "Failed to delete row",
+  "Failed to delete rows": "Failed to delete rows",
+  "Failed to reorder row": "Failed to reorder row",
+  "Failed to move card": "Failed to move card",
+  "Failed to add card": "Failed to add card",
+  "Failed to export CSV": "Failed to export CSV",
  "Favorite spaces": "Favorite spaces",
  "Favorite spaces appear here": "Favorite spaces appear here",
  "Favorites": "Favorites",
@@ -424,6 +444,7 @@
  "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",
@@ -596,6 +617,8 @@
  "Deleted by": "Deleted by",
  "Deleted at": "Deleted at",
  "Preview": "Preview",
+  "Base preview unavailable": "Base preview unavailable",
+  "Restore this base to view its contents.": "Restore this base to view its contents.",
  "Subpages": "Subpages",
  "Failed to load subpages": "Failed to load subpages",
  "No subpages": "No subpages",
@@ -1102,5 +1125,23 @@
  "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."
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded.",
+  "Previous record": "Previous record",
+  "Next record": "Next record",
+  "Record actions": "Record actions",
+  "Delete record": "Delete record",
+  "Delete record?": "Delete record?",
+  "This action cannot be undone.": "This action cannot be undone.",
+  "to navigate": "to navigate",
+  "to close": "to close",
+  "Expand row {{number}}": "Expand row {{number}}",
+  "Saving…": "Saving…",
+  "Read-only": "Read-only",
+  "Loading…": "Loading…",
+  "Updated {{when}}": "Updated {{when}}",
+  "Add property": "Add property",
+  "Create property": "Create property",
+  "Hide properties": "Hide properties",
+  "Find a property type": "Find a property type",
+  "Properties": "Properties"
 }
@@ -1084,23 +1084,5 @@
  "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}}",
-  "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."
+  "Create subpage of {{name}}": "Crear subpágina de {{name}}"
 }
@@ -1084,23 +1084,5 @@
  "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}}",
-  "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."
+  "Create subpage of {{name}}": "Créer une sous-page de {{name}}"
 }
@@ -1084,23 +1084,5 @@
  "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}}",
-  "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."
+  "Create subpage of {{name}}": "Crea sottopagina di {{name}}"
 }
@@ -1084,23 +1084,5 @@
  "Added {{name}} to favorites": "{{name}} をお気に入りに追加しました",
  "Removed {{name}} from favorites": "{{name}} をお気に入りから削除しました",
  "Page menu for {{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."
+  "Create subpage of {{name}}": "{{name}} のサブページを作成"
 }
@@ -1084,23 +1084,5 @@
  "Added {{name}} to favorites": "{{name}} 즐겨찾기에 추가됨",
  "Removed {{name}} from favorites": "{{name}} 즐겨찾기에서 제거됨",
  "Page menu for {{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."
+  "Create subpage of {{name}}": "{{name}}의 하위 페이지 만들기"
 }
@@ -1084,23 +1084,5 @@
  "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",
-  "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."
+  "Create subpage of {{name}}": "Subpagina van {{name}} maken"
 }
@@ -1084,23 +1084,5 @@
  "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}}",
-  "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."
+  "Create subpage of {{name}}": "Criar subpágina de {{name}}"
 }
@@ -1084,23 +1084,5 @@
  "Added {{name}} to favorites": "{{name}} добавлено в избранное",
  "Removed {{name}} from favorites": "{{name}} удалено из избранного",
  "Page menu for {{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."
+  "Create subpage of {{name}}": "Создать подстраницу для {{name}}"
 }
@@ -1084,23 +1084,5 @@
  "Added {{name}} to favorites": "{{name}} додано до обраного",
  "Removed {{name}} from favorites": "{{name}} видалено з обраного",
  "Page menu for {{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."
+  "Create subpage of {{name}}": "Створити підсторінку для {{name}}"
 }
@@ -1084,23 +1084,5 @@
  "Added {{name}} to favorites": "已将 {{name}} 添加到收藏",
  "Removed {{name}} from favorites": "已将 {{name}} 从收藏中移除",
  "Page menu for {{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."
+  "Create subpage of {{name}}": "创建 {{name}} 的子页面"
 }
@@ -38,7 +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 BasePage from "@/ee/base/pages/base-page.tsx";
 import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
 import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
 import TemplateList from "@/ee/template/pages/template-list";
@@ -0,0 +1,18 @@
+import { ThemeIcon } from "@mantine/core";
+import { IconFileDescription, IconTable } from "@tabler/icons-react";
+
+type Props = {
+  icon?: string | null;
+  isBase?: boolean;
+};
+
+export function PageListIcon({ icon, isBase }: Props) {
+  if (icon) {
+    return <>{icon}</>;
+  }
+  return (
+    <ThemeIcon variant="transparent" color="gray" size={18}>
+      {isBase ? <IconTable size={18} /> : <IconFileDescription size={18} />}
+    </ThemeIcon>
+  );
+}
@@ -4,15 +4,15 @@ import {
  UnstyledButton,
  Badge,
  Table,
-  ThemeIcon,
  Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils.ts";
 import { formattedDate } from "@/lib/time.ts";
 import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { IconFileDescription, IconFiles } from "@tabler/icons-react";
+import { PageListIcon } from "@/components/common/page-list-icon";
+import { IconFiles } from "@tabler/icons-react";
 import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
@@ -50,14 +50,10 @@ export default function RecentChanges({ spaceId }: Props) {
                    to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                  >
                    <Group wrap="nowrap">
-                      {page.icon || (
-                        <ThemeIcon variant="transparent" color="gray" size={18}>
-                          <IconFileDescription size={18} />
-                        </ThemeIcon>
-                      )}
+                      <PageListIcon icon={page.icon} isBase={page.isBase} />

                      <Text fw={500} size="md" lineClamp={1}>
-                        {page.title || t("Untitled")}
+                        {getPageTitle(page.title, page.isBase, t)}
                      </Text>
                    </Group>
                  </UnstyledButton>
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Modal, Button, Group } from "@mantine/core";
+import { Modal, Button, Group, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { DestinationPicker } from "./destination-picker";
 import {
@@ -52,7 +52,9 @@ export function DestinationPickerModal({
            searchSpacesOnly={searchSpacesOnly}
          />

-          <Group justify="flex-end" mt="md">
+          <Divider my="md" />
+
+          <Group justify="flex-end">
            <Button variant="default" onClick={onClose}>
              {t("Close")}
            </Button>
@@ -89,14 +89,6 @@
    }
 }

-.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;
@@ -221,14 +221,6 @@ export function DestinationPicker({
          ))
        )}
      </ScrollArea>
-
-      {selection && (
-        <div className={classes.selectedIndicator}>
-          {selection.type === "space"
-            ? selection.space.name
-            : `${selection.space.name} / ${selection.page.title || t("Untitled")}`}
-        </div>
-      )}
    </>
  );
 }
@@ -3,6 +3,7 @@ import { ActionIcon } from "@mantine/core";
 import { IconChevronRight, IconFileDescription } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { IPage } from "@/features/page/types/page.types";
+import { getPageTitle } from "@/features/page/page.utils";
 import { PageChildren } from "./page-children";
 import classes from "./destination-picker.module.css";

@@ -95,7 +96,7 @@ export function PageRow({
        </div>

        <div className={classes.pageTitle}>
-          {page.title || t("Untitled")}
+          {getPageTitle(page.title, page.isBase, t)}
        </div>
      </div>

@@ -1 +1,39 @@
 Files in this directory are subject to the Docmost Enterprise Edition license.
+
+           The Docmost Enterprise License (the “Enterprise License”)
+                    Copyright (c) 2023-present Docmost, Inc
+
+
+With regard to the Docmost Software:
+
+This software and associated documentation files (the "Software") may only be
+used in production, if you (and any entity that you represent) have agreed to,
+and are in compliance with, the Docmost Subscription Terms of Service, available
+at https://docmost.com/terms (the “Enterprise Terms”), or other
+agreement governing the use of the Software, as agreed by you and Docmost, Inc.,
+and otherwise have a valid Docmost Enterprise Edition subscription for the correct number of user seats.
+Subject to the foregoing sentence, you are free to
+modify this Software and publish patches to the Software. You agree that Docmost
+and/or its licensors (as applicable) retain all right, title and interest in and
+to all such modifications and/or patches, and all such modifications and/or
+patches may only be used, copied, modified, displayed, distributed, or otherwise
+exploited with a valid Docmost Enterprise Edition subscription for the  correct
+number of user seats.  Notwithstanding the foregoing, you may copy and modify
+the Software for development and testing purposes, without requiring a
+subscription.  You agree that Docmost and/or its licensors (as applicable) retain
+all right, title and interest in and to all such modifications.  You are not
+granted any other rights beyond what is expressly stated herein.  Subject to the
+foregoing, it is forbidden to copy, merge, publish, distribute, sublicense,
+and/or sell the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+For all third party components incorporated into the Docmost Software, those
+components are licensed under the original license provided by the owner of the
+applicable component.
@@ -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,10 +23,11 @@ export function ApiKeyTable({
  onRevoke,
 }: ApiKeyTableProps) {
  const { t } = useTranslation();
+  const locale = useDateFnsLocale();

  const formatDate = (date: Date | string | null) => {
    if (!date) return t("Never");
-    return format(new Date(date), "MMM dd, yyyy");
+    return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
  };

  const isExpired = (expiresAt: string | null) => {
@@ -31,7 +31,7 @@ export function CreateApiKeyModal({
  onClose,
  onSuccess,
 }: CreateApiKeyModalProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = 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("en-US", {
+    const formatted = date.toLocaleDateString(i18n.language, {
      month: "short",
      day: "2-digit",
      year: "numeric",
@@ -1,13 +1,9 @@
 import { atom } from "jotai";
 import { atomFamily } from "jotai/utils";
-import { EditingCell } from "@/features/base/types/base.types";
+import { EditingCell, FocusedCell } from "@/ee/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.
+// Atoms are scoped per-base via `pageId` so that two BaseTable instances on
+// the same page don't share UI state.

 export const activeViewIdAtomFamily = atomFamily((_pageId: string) =>
  atom<string | null>(null),
@@ -17,6 +13,15 @@ export const editingCellAtomFamily = atomFamily((_pageId: string) =>
  atom<EditingCell>(null),
 );

+export type FormulaEditorTarget = {
+  propertyId: string;
+  rowId: string | null;
+} | null;
+
+export const activeFormulaEditorAtomFamily = atomFamily((_pageId: string) =>
+  atom<FormulaEditorTarget>(null),
+);
+
 export const activePropertyMenuAtomFamily = atomFamily((_pageId: string) =>
  atom<string | null>(null),
 );
@@ -36,3 +41,15 @@ export const selectedRowIdsAtomFamily = atomFamily((_pageId: string) =>
 export const lastToggledRowIndexAtomFamily = atomFamily((_pageId: string) =>
  atom<number | null>(null),
 );
+
+export const focusedCellAtomFamily = atomFamily((_pageId: string) =>
+  atom<FocusedCell>(null),
+);
+
+export type PendingTypeInsert = {
+  rowId: string;
+  propertyId: string;
+  char: string;
+} | null;
+
+export const pendingTypeInsertAtom = atom<PendingTypeInsert>(null);
@@ -0,0 +1,20 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import type { RowReferences } from "@/ee/base/types/base.types";
+
+// Per-base normalized store of resolved reference entities, hydrated from each
+// rows-page `references`. Keyed by pageId, matching base-atoms.ts.
+export const referenceStoreAtomFamily = atomFamily((_pageId: string) =>
+  atom<RowReferences>({ users: {}, pages: {} }),
+);
+
+export function mergeReferences(
+  prev: RowReferences,
+  next: RowReferences | undefined,
+): RowReferences {
+  if (!next) return prev;
+  return {
+    users: { ...prev.users, ...next.users },
+    pages: { ...prev.pages, ...next.pages },
+  };
+}
@@ -1,5 +1,5 @@
 import { atomFamily, atomWithStorage } from "jotai/utils";
-import { BaseViewDraft } from "@/features/base/types/base.types";
+import { BaseViewDraft } from "@/ee/base/types/base.types";

 export type ViewDraftKey = {
  userId: string;
@@ -10,10 +10,9 @@ export type ViewDraftKey = {
 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.
+// atomWithStorage handles JSON serialization and cross-tab sync. The custom
+// comparator ensures the same userId/pageId/viewId triple resolves to the
+// same atom instance, so Jotai's identity-equality cache hits still work.
 export const viewDraftAtomFamily = atomFamily(
  (k: ViewDraftKey) =>
    atomWithStorage<BaseViewDraft | null>(viewDraftStorageKey(k), null),
@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useDebouncedCallback } from "@mantine/hooks";
+import {
+  usePageQuery,
+  useUpdateTitlePageMutation,
+  updatePageData,
+} from "@/features/page/queries/page-query";
+import { useQueryEmit } from "@/features/websocket/use-query-emit";
+import { UpdateEvent } from "@/features/websocket/types";
+import localEmitter from "@/lib/local-emitter";
+import classes from "@/ee/base/styles/grid.module.css";
+
+// Editable base name for the inline embed. Follows the TitleEditor convention
+// (updatePageData + localEmitter + websocket emit) so the sidebar and other
+// clients stay in sync. Standalone pages use the page TitleEditor instead.
+export function BaseEmbedTitle({ pageId }: { pageId: string }) {
+  const { t } = useTranslation();
+  const { data: page } = usePageQuery({ pageId });
+  const { mutateAsync: updateTitleAsync } = useUpdateTitlePageMutation();
+  const emit = useQueryEmit();
+  const [value, setValue] = useState("");
+  const focusedRef = useRef(false);
+
+  // Keep in sync with the persisted title but never clobber active user input.
+  useEffect(() => {
+    if (!focusedRef.current) setValue(page?.title ?? "");
+  }, [page?.title]);
+
+  const commit = useCallback(() => {
+    const trimmed = value.trim();
+    if (!page || trimmed === (page.title ?? "")) return;
+    updateTitleAsync({ pageId, title: trimmed }).then((updated) => {
+      if (updated.title !== trimmed) return;
+      const event: UpdateEvent = {
+        operation: "updateOne",
+        spaceId: updated.spaceId,
+        entity: ["pages"],
+        id: updated.id,
+        payload: {
+          title: updated.title,
+          slugId: updated.slugId,
+          parentPageId: updated.parentPageId,
+          icon: updated.icon,
+        },
+      };
+      updatePageData(updated);
+      localEmitter.emit("message", event);
+      emit(event);
+    });
+  }, [value, page, pageId, updateTitleAsync, emit]);
+
+  const debouncedCommit = useDebouncedCallback(commit, 500);
+
+  // Force-save any pending edit on unmount (e.g. navigating away mid-type).
+  const commitRef = useRef(commit);
+  useEffect(() => {
+    commitRef.current = commit;
+  }, [commit]);
+  useEffect(() => () => commitRef.current(), []);
+
+  return (
+    <input
+      className={classes.embedTitleInput}
+      value={value}
+      placeholder={t("Untitled base")}
+      aria-label={t("Base name")}
+      onChange={(e) => {
+        setValue(e.currentTarget.value);
+        debouncedCommit();
+      }}
+      onFocus={() => {
+        focusedRef.current = true;
+      }}
+      onBlur={() => {
+        focusedRef.current = false;
+        commit();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.currentTarget.blur();
+        }
+        if (e.key === "Escape") {
+          setValue(page?.title ?? "");
+          e.currentTarget.blur();
+        }
+      }}
+    />
+  );
+}
@@ -1,23 +1,18 @@
 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";
+import gridClasses from "@/ee/base/styles/grid.module.css";
+import classes from "@/ee/base/styles/base-table-skeleton.module.css";

 const ROW_NUMBER_WIDTH = 64;
 const COLUMN_WIDTH = 180;
 const DEFAULT_COLUMN_COUNT = 6;
 const DEFAULT_ROW_COUNT = 10;

-// Deterministic per-cell widths so the skeleton doesn't flicker between
-// renders. Values are rough normal distribution around 55-85 % of cell.
+// Deterministic widths prevent flicker between renders.
 const CELL_WIDTH_RATIOS = [0.78, 0.62, 0.84, 0.55, 0.71, 0.66];
 const HEADER_WIDTH_RATIOS = [0.42, 0.58, 0.5, 0.64, 0.46, 0.54];

 type BaseTableSkeletonProps = {
-  // 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.
+  // Match the eventual content shape to avoid a jarring size jump on swap.
  rows?: number;
  columns?: number;
 };
@@ -32,7 +27,7 @@ export function BaseTableSkeleton({
  ].join(" ");

  return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <div className={classes.root}>
      <div className={classes.toolbar}>
        <div className={classes.toolbarTabs}>
          <Skeleton height={22} width={44} radius="sm" />
@@ -1,10 +1,10 @@
-import { GridContainer } from "@/features/base/components/grid/grid-container";
+import { GridContainer } from "@/ee/base/components/grid/grid-container";
 import { Table } from "@tanstack/react-table";
 import {
  IBase,
  IBaseRow,
  IBaseView,
-} from "@/features/base/types/base.types";
+} from "@/ee/base/types/base.types";

 type BaseTableProps = {
  base: IBase;
@@ -13,6 +13,7 @@ type BaseTableProps = {
  table: Table<IBaseRow>;
  pageId: string;
  embedded?: boolean;
+  isFiltered: boolean;
  hasNextPage: boolean;
  isFetchingNextPage: boolean;
  onFetchNextPage: () => void;
@@ -26,8 +27,8 @@ type BaseTableProps = {
    dropPosition: "above" | "below",
  ) => void;
  persistViewConfig: () => void;
-  scrollportEl: HTMLDivElement | null;
-  stickyBandPrelude?: React.ReactNode;
+  scrollportRef: React.RefObject<HTMLDivElement>;
+  aboveBand?: React.ReactNode;
 };

 export function BaseTable({
@@ -36,6 +37,7 @@ export function BaseTable({
  table,
  pageId,
  embedded,
+  isFiltered,
  hasNextPage,
  isFetchingNextPage,
  onFetchNextPage,
@@ -44,8 +46,8 @@ export function BaseTable({
  onColumnReorder,
  onResizeEnd,
  onRowReorder,
-  scrollportEl,
-  stickyBandPrelude,
+  scrollportRef,
+  aboveBand,
 }: BaseTableProps) {
  return (
    <GridContainer
@@ -54,14 +56,15 @@ export function BaseTable({
      onCellUpdate={onCellUpdate}
      onAddRow={onAddRow}
      pageId={pageId}
+      isFiltered={isFiltered}
      onColumnReorder={onColumnReorder}
      onResizeEnd={onResizeEnd}
      onRowReorder={onRowReorder}
      hasNextPage={hasNextPage}
      isFetchingNextPage={isFetchingNextPage}
      onFetchNextPage={onFetchNextPage}
-      scrollElement={embedded ? window : scrollportEl}
-      stickyBandPrelude={stickyBandPrelude ?? null}
+      scrollElement={embedded ? window : scrollportRef.current}
+      aboveBand={aboveBand ?? null}
    />
  );
 }
@@ -0,0 +1,299 @@
+import { useState, useCallback, useMemo } from "react";
+import { ActionIcon, Tooltip, Badge } from "@mantine/core";
+import { Table } from "@tanstack/react-table";
+import {
+  IconSortAscending,
+  IconFilter,
+  IconEye,
+  IconDownload,
+  IconArrowsDiagonal,
+  IconLayoutColumns,
+  IconAdjustments,
+} from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+  ViewSortConfig,
+  FilterCondition,
+  FilterGroup,
+} from "@/ee/base/types/base.types";
+import { exportBaseToCsv } from "@/ee/base/services/base-service";
+import { getApiErrorMessage } from "@/lib/api-error";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { ViewTabs } from "@/ee/base/components/views/view-tabs";
+import { ViewSortConfigPopover } from "@/ee/base/components/views/view-sort-config";
+import { ViewFilterConfigPopover } from "@/ee/base/components/views/view-filter-config";
+import { ViewPropertyVisibility } from "@/ee/base/components/views/view-property-visibility";
+import { KanbanGroupByPicker } from "@/ee/base/components/kanban/kanban-group-by-picker";
+import { KanbanCardProperties } from "@/ee/base/components/kanban/kanban-card-properties";
+import { useTranslation } from "react-i18next";
+import classes from "@/ee/base/styles/grid.module.css";
+import toolbarClasses from "@/ee/base/styles/base-toolbar.module.css";
+
+type BaseToolbarProps = {
+  base: IBase;
+  activeView: IBaseView | undefined;
+  views: IBaseView[];
+  table?: Table<IBaseRow>;
+  onViewChange: (viewId: string) => void;
+  onAddView?: () => void;
+  canAddView?: boolean;
+  onPersistViewConfig: () => void;
+  onDraftSortsChange: (sorts: ViewSortConfig[] | undefined) => void;
+  onDraftFiltersChange: (filter: FilterGroup | undefined) => void;
+  onExpand?: () => void;
+  getViewShareUrl?: (viewId: string) => string | null;
+};
+
+export function BaseToolbar({
+  base,
+  activeView,
+  views,
+  table,
+  onViewChange,
+  onAddView,
+  canAddView,
+  onPersistViewConfig,
+  onDraftSortsChange,
+  onDraftFiltersChange,
+  onExpand,
+  getViewShareUrl,
+}: BaseToolbarProps) {
+  const { t } = useTranslation();
+  const editable = useBaseEditable();
+  const [sortOpened, setSortOpened] = useState(false);
+  const [filterOpened, setFilterOpened] = useState(false);
+  const [propertiesOpened, setPropertiesOpened] = useState(false);
+  const [cardPropertiesOpened, setCardPropertiesOpened] = useState(false);
+  const [exporting, setExporting] = useState(false);
+
+  const isKanban = activeView?.type === "kanban";
+
+  const handleExport = useCallback(async () => {
+    if (exporting) return;
+    setExporting(true);
+    try {
+      await exportBaseToCsv(base.id);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: getApiErrorMessage(err, t("Failed to export CSV")),
+      });
+    } finally {
+      setExporting(false);
+    }
+  }, [base.id, exporting, t]);
+
+  const openToolbar = useCallback((panel: "sort" | "filter" | "properties") => {
+    setSortOpened(panel === "sort" ? (v) => !v : false);
+    setFilterOpened(panel === "filter" ? (v) => !v : false);
+    setPropertiesOpened(panel === "properties" ? (v) => !v : false);
+  }, []);
+
+  const sorts = activeView?.config?.sorts ?? [];
+  const conditions = useMemo<FilterCondition[]>(() => {
+    const filter = activeView?.config?.filter;
+    if (!filter || filter.op !== "and") return [];
+    return filter.children.filter(
+      (c): c is FilterCondition => !("children" in c),
+    );
+  }, [activeView?.config?.filter]);
+
+  const hiddenPropertyCount = useMemo(() => {
+    if (!table) return 0;
+    const cols = table.getAllLeafColumns().filter((col) => col.id !== "__row_number");
+    return cols.filter((col) => col.getCanHide() && !col.getIsVisible()).length;
+  }, [table, table?.getState().columnVisibility]);
+
+  const handleSortsChange = useCallback(
+    (newSorts: ViewSortConfig[]) => {
+      onDraftSortsChange(newSorts.length > 0 ? newSorts : undefined);
+    },
+    [onDraftSortsChange],
+  );
+
+  const handleFiltersChange = useCallback(
+    (newConditions: FilterCondition[]) => {
+      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}
+        base={base}
+        canAddView={canAddView}
+        getViewShareUrl={getViewShareUrl}
+      />
+
+      <div className={classes.toolbarRight}>
+        {editable && (
+          <Tooltip label={t("Export CSV")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color="gray"
+              loading={exporting}
+              onClick={handleExport}
+            >
+              <IconDownload size={16} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+
+        <ViewFilterConfigPopover
+          opened={filterOpened}
+          onClose={() => setFilterOpened(false)}
+          conditions={conditions}
+          properties={base.properties}
+          onChange={handleFiltersChange}
+        >
+          <Tooltip label={t("Filter")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color={conditions.length > 0 ? "blue" : "gray"}
+              onClick={() => openToolbar("filter")}
+            >
+              <IconFilter size={16} />
+              {conditions.length > 0 && (
+                <Badge
+                  size="xs"
+                  circle
+                  color="blue"
+                  className={toolbarClasses.badgeDot}
+                >
+                  {conditions.length}
+                </Badge>
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </ViewFilterConfigPopover>
+
+        {isKanban && activeView && (
+          <>
+            <KanbanGroupByPicker base={base} view={activeView} pageId={base.id}>
+              <Tooltip label={t("Group by")}>
+                <ActionIcon
+                  variant="subtle"
+                  size="sm"
+                  color="gray"
+                >
+                  <IconLayoutColumns size={16} />
+                </ActionIcon>
+              </Tooltip>
+            </KanbanGroupByPicker>
+
+            <KanbanCardProperties
+              opened={cardPropertiesOpened}
+              onClose={() => setCardPropertiesOpened(false)}
+              base={base}
+              view={activeView}
+              pageId={base.id}
+            >
+              <Tooltip label={t("Card properties")}>
+                <ActionIcon
+                  variant="subtle"
+                  size="sm"
+                  color="gray"
+                  onClick={() => setCardPropertiesOpened((v) => !v)}
+                >
+                  <IconAdjustments size={16} />
+                </ActionIcon>
+              </Tooltip>
+            </KanbanCardProperties>
+          </>
+        )}
+
+        {!isKanban && (
+          <>
+            <ViewSortConfigPopover
+              opened={sortOpened}
+              onClose={() => setSortOpened(false)}
+              sorts={sorts}
+              properties={base.properties}
+              onChange={handleSortsChange}
+            >
+              <Tooltip label={t("Sort")}>
+                <ActionIcon
+                  variant="subtle"
+                  size="sm"
+                  color={sorts.length > 0 ? "blue" : "gray"}
+                  onClick={() => openToolbar("sort")}
+                >
+                  <IconSortAscending size={16} />
+                  {sorts.length > 0 && (
+                    <Badge
+                      size="xs"
+                      circle
+                      color="blue"
+                      className={toolbarClasses.badgeDot}
+                    >
+                      {sorts.length}
+                    </Badge>
+                  )}
+                </ActionIcon>
+              </Tooltip>
+            </ViewSortConfigPopover>
+
+            {table && (
+              <ViewPropertyVisibility
+                opened={propertiesOpened}
+                onClose={() => setPropertiesOpened(false)}
+                table={table}
+                properties={base.properties}
+                onPersist={onPersistViewConfig}
+              >
+                <Tooltip label={t("Hide properties")}>
+                  <ActionIcon
+                    variant="subtle"
+                    size="sm"
+                    color={hiddenPropertyCount > 0 ? "blue" : "gray"}
+                    onClick={() => openToolbar("properties")}
+                  >
+                    <IconEye size={16} />
+                    {hiddenPropertyCount > 0 && (
+                      <Badge
+                        size="xs"
+                        circle
+                        color="blue"
+                        className={toolbarClasses.badgeDot}
+                      >
+                        {hiddenPropertyCount}
+                      </Badge>
+                    )}
+                  </ActionIcon>
+                </Tooltip>
+              </ViewPropertyVisibility>
+            )}
+          </>
+        )}
+
+        {onExpand && (
+          <Tooltip label={t("Open as page")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color="gray"
+              onClick={onExpand}
+            >
+              <IconArrowsDiagonal size={16} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -26,7 +26,7 @@ export function BaseViewDraftBanner({
      {canSave && (
        <Tooltip
          label={t("Filter and sort changes are visible only to you")}
-          position="bottom"
+          position="top"
          withArrow
        >
          <Button
@@ -0,0 +1,526 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Text, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
+import { IconTable } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { notifications } from "@mantine/notifications";
+import { reorder } from "@atlaskit/pragmatic-drag-and-drop/reorder";
+import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { useBaseSocket } from "@/ee/base/hooks/use-base-socket";
+import {
+  FilterGroup,
+  ViewSortConfig,
+  EditingCell,
+  IBaseProperty,
+} from "@/ee/base/types/base.types";
+import {
+  useBaseRowsQuery,
+  flattenRows,
+  useCreateRowMutation,
+  useUpdateRowMutation,
+  useReorderRowMutation,
+} from "@/ee/base/queries/base-row-query";
+import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
+import {
+  activeViewIdAtomFamily,
+  editingCellAtomFamily,
+} from "@/ee/base/atoms/base-atoms";
+import { useBaseTable } from "@/ee/base/hooks/use-base-table";
+import { isSystemPropertyType } from "@/ee/base/property-types/property-type.registry";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import useCurrentUser from "@/features/user/hooks/use-current-user";
+import { useHydrateCurrentUser } from "@/ee/base/reference/reference-store";
+import { useViewDraft } from "@/ee/base/hooks/use-view-draft";
+import { BaseToolbar } from "@/ee/base/components/base-toolbar";
+import { BaseViewDraftBanner } from "@/ee/base/components/base-view-draft-banner";
+import { BaseEmbedTitle } from "@/ee/base/components/base-embed-title";
+import { BaseTableSkeleton } from "@/ee/base/components/base-table-skeleton";
+import { ViewRenderer } from "@/ee/base/components/views/view-renderer";
+import { RowDetailModal } from "@/ee/base/components/row-detail-modal/row-detail-modal";
+import { useRowDetailModal } from "@/ee/base/hooks/use-row-detail-modal";
+import { BaseEditableProvider } from "@/ee/base/context/base-editable";
+import { RowExpandProvider } from "@/ee/base/context/row-expand";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { buildPageUrl } from "@/features/page/page.utils";
+import { getAppUrl } from "@/lib/config.ts";
+import { useNavigate } from "react-router-dom";
+import classes from "@/ee/base/styles/grid.module.css";
+import viewClasses from "@/ee/base/styles/base-view.module.css";
+import kanbanClasses from "@/ee/base/styles/kanban.module.css";
+
+type BaseViewProps = {
+  pageId: string;
+  embedded?: boolean;
+  /** False makes the view read-only. Standalone passes page.permissions.canEdit;
+   *  embedded ANDs that with the host editor's editability. */
+  editable?: boolean;
+  titleSlot?: React.ReactNode;
+};
+
+export function BaseView({ pageId, embedded, editable = true, titleSlot }: BaseViewProps) {
+  const { t } = useTranslation();
+  // Subscribe so other clients' edits, schema changes, and async-job completions reconcile into cache.
+  useBaseSocket(pageId);
+  const { data: base, isLoading: baseLoading, error: baseError } =
+    useBaseQuery(pageId);
+
+  const navigate = useNavigate();
+  const { data: page } = usePageQuery({ pageId });
+  const handleExpand = useCallback(() => {
+    if (!page) return;
+    navigate(buildPageUrl(page.space?.slug, page.slugId, page.title));
+  }, [navigate, page]);
+
+  // Share URL for a specific view; always points at the standalone page where ?view= is honored.
+  const getViewShareUrl = useCallback(
+    (viewId: string) =>
+      page
+        ? `${getAppUrl()}${buildPageUrl(page.space?.slug, page.slugId, page.title)}?view=${encodeURIComponent(viewId)}`
+        : null,
+    [page],
+  );
+
+  const [activeViewId, setActiveViewId] = useAtom(
+    activeViewIdAtomFamily(pageId),
+  ) as unknown as [string | null, (val: string | null) => void];
+
+  const [, setEditingCell] = useAtom(
+    editingCellAtomFamily(pageId),
+  ) as unknown as [EditingCell, (val: EditingCell) => void];
+
+  const views = useMemo(
+    () =>
+      [...(base?.views ?? [])].sort((a, b) =>
+        a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
+      ),
+    [base?.views],
+  );
+  const activeView = useMemo(() => {
+    if (!views.length) return undefined;
+    return views.find((v) => v.id === activeViewId) ?? views[0];
+  }, [views, activeViewId]);
+
+  const { data: currentUser } = useCurrentUser();
+  useHydrateCurrentUser(pageId);
+  const {
+    effectiveFilter,
+    effectiveSorts,
+    isDirty,
+    setFilter: setDraftFilter,
+    setSorts: setDraftSorts,
+    reset: resetDraft,
+    buildPromotedConfig,
+  } = useViewDraft({
+    userId: currentUser?.user.id,
+    pageId,
+    viewId: activeView?.id,
+    baselineFilter: activeView?.config?.filter,
+    baselineSorts: activeView?.config?.sorts,
+  });
+
+  // Baseline merged with local draft. Used for table state and toolbar badge counts.
+  // The real activeView remains the auto-persist baseline so drafts can't leak into layout writes.
+  const effectiveView = useMemo(
+    () =>
+      activeView
+        ? {
+            ...activeView,
+            config: {
+              ...activeView.config,
+              filter: effectiveFilter,
+              sorts: effectiveSorts,
+            },
+          }
+        : undefined,
+    [activeView, effectiveFilter, effectiveSorts],
+  );
+
+  const activeFilter = effectiveFilter;
+  const activeSorts = effectiveSorts;
+
+  const canSave = editable;
+
+  // Gate on base to avoid a "bland" list request before the active view's
+  // config resolves, which would double network traffic for sorted/filtered views.
+  const isKanban = activeView?.type === "kanban";
+
+  const {
+    data: rowsData,
+    isLoading: rowsLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useBaseRowsQuery(base && !isKanban ? pageId : undefined, activeFilter, activeSorts);
+
+  const updateRowMutation = useUpdateRowMutation();
+  const createRowMutation = useCreateRowMutation();
+  const reorderRowMutation = useReorderRowMutation();
+  const updateViewMutation = useUpdateViewMutation();
+
+  useEffect(() => {
+    if (activeView && activeViewId !== activeView.id) {
+      setActiveViewId(activeView.id);
+    }
+  }, [activeView, activeViewId, setActiveViewId]);
+
+  // Deep link: apply ?view=<id> once after views load; skip if the id is
+  // unrecognised so we fall back to the default without fighting a later tab switch.
+  const appliedViewParamRef = useRef(false);
+  useEffect(() => {
+    if (appliedViewParamRef.current || views.length === 0) return;
+    const viewParam = new URLSearchParams(window.location.search).get("view");
+    if (viewParam && views.some((v) => v.id === viewParam)) {
+      setActiveViewId(viewParam);
+    }
+    appliedViewParamRef.current = true;
+  }, [views, setActiveViewId]);
+
+  const { clear: clearSelection } = useRowSelection(pageId);
+  useEffect(() => {
+    clearSelection();
+  }, [pageId, activeView?.id, clearSelection]);
+
+  const scrollportRef = useRef<HTMLDivElement>(null);
+
+  const rows = useMemo(() => {
+    const flat = flattenRows(rowsData);
+    // With an active sort the server returns rows in sort order via keyset
+    // pagination; re-sorting by position on the client would break it as more
+    // pages load. Position sort only applies when no view sort is active.
+    if (activeSorts && activeSorts.length > 0) {
+      return flat;
+    }
+    return flat.sort((a, b) =>
+      a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
+    );
+  }, [rowsData, activeSorts]);
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+
+  const { table, persistViewConfig } = useBaseTable(base, rows, effectiveView);
+
+  const guardedPersistViewConfig = useCallback(() => {
+    if (!editable) return;
+    persistViewConfig();
+  }, [editable, persistViewConfig]);
+
+  // Mutation result objects change identity every render; only .mutate is
+  // stable. Rows are memoized on these callbacks' identities, so they must
+  // not churn with unrelated re-renders.
+  const updateRow = updateRowMutation.mutate;
+  const handleCellUpdate = useCallback(
+    (rowId: string, propertyId: string, value: unknown) => {
+      if (!editable) return;
+      updateRow({
+        rowId,
+        pageId,
+        cells: { [propertyId]: value },
+      });
+    },
+    [editable, pageId, updateRow],
+  );
+
+  const handleAddRow = useCallback(() => {
+    if (!editable) return;
+    createRowMutation.mutate(
+      { pageId },
+      {
+        onSuccess: (newRow) => {
+          const firstEditable = table.getVisibleLeafColumns().find((col) => {
+            if (col.id === "__row_number") return false;
+            const prop = col.columnDef.meta?.property as
+              | IBaseProperty
+              | undefined;
+            return (
+              !!prop &&
+              prop.type !== "checkbox" &&
+              !isSystemPropertyType(prop.type)
+            );
+          });
+          const propertyId = (
+            firstEditable?.columnDef.meta?.property as IBaseProperty | undefined
+          )?.id;
+          if (propertyId) {
+            setEditingCell({ rowId: newRow.id, propertyId });
+          }
+        },
+      },
+    );
+  }, [editable, pageId, createRowMutation, table, setEditingCell]);
+
+  const handleViewChange = useCallback(
+    (viewId: string) => {
+      setActiveViewId(viewId);
+    },
+    [setActiveViewId],
+  );
+
+  const handleColumnReorder = useCallback(
+    (columnId: string, finishIndex: number) => {
+      const order = table.getState().columnOrder;
+      const startIndex = order.indexOf(columnId);
+      if (startIndex === -1 || startIndex === finishIndex) return;
+      table.setColumnOrder(reorder({ list: order, startIndex, finishIndex }));
+      guardedPersistViewConfig();
+    },
+    [table, guardedPersistViewConfig],
+  );
+
+  const handleResizeEnd = useCallback(() => {
+    guardedPersistViewConfig();
+  }, [guardedPersistViewConfig]);
+
+  const handleDraftSortsChange = useCallback(
+    (sorts: ViewSortConfig[] | undefined) => {
+      setDraftSorts(sorts && sorts.length > 0 ? sorts : undefined);
+    },
+    [setDraftSorts],
+  );
+
+  const handleDraftFiltersChange = useCallback(
+    (filter: FilterGroup | undefined) => {
+      setDraftFilter(filter);
+    },
+    [setDraftFilter],
+  );
+
+  const handleSaveDraft = useCallback(async () => {
+    if (!activeView || !base) return;
+    // Preserves non-draft baseline fields (widths/order/visibility), overwrites only filter/sorts.
+    const config = buildPromotedConfig(activeView.config);
+    try {
+      await updateViewMutation.mutateAsync({
+        viewId: activeView.id,
+        pageId: base.id,
+        config,
+      });
+      resetDraft();
+      notifications.show({ message: t("View updated for everyone") });
+    } catch {
+      // useUpdateViewMutation shows a toast and rolls back; keep the draft so the user can retry.
+    }
+  }, [
+    activeView,
+    base,
+    buildPromotedConfig,
+    resetDraft,
+    t,
+    updateViewMutation,
+  ]);
+
+  const { openRowId, openRow, closeRow } = useRowDetailModal(pageId);
+  // openRow's identity tracks searchParams; rows subscribe to the expand
+  // context, so hand them a stable wrapper instead.
+  const openRowRef = useRef(openRow);
+  openRowRef.current = openRow;
+  const handleExpandRow = useCallback((rowId: string) => {
+    openRowRef.current(rowId);
+  }, []);
+  const handleRowNavigate = useCallback((rowId: string) => {
+    openRowRef.current(rowId, { replace: true });
+  }, []);
+
+  const reorderRow = reorderRowMutation.mutate;
+  const handleRowReorder = useCallback(
+    (rowId: string, targetRowId: string, dropPosition: "above" | "below") => {
+      if (!editable) return;
+      const remainingRows = rowsRef.current.filter((r) => r.id !== rowId);
+      const targetIndex = remainingRows.findIndex((r) => r.id === targetRowId);
+      if (targetIndex === -1) return;
+
+      let lowerPos: string | null = null;
+      let upperPos: string | null = null;
+      if (dropPosition === "above") {
+        lowerPos =
+          targetIndex > 0 ? remainingRows[targetIndex - 1]?.position : null;
+        upperPos = remainingRows[targetIndex]?.position ?? null;
+      } else {
+        lowerPos = remainingRows[targetIndex]?.position ?? null;
+        upperPos =
+          targetIndex < remainingRows.length - 1
+            ? remainingRows[targetIndex + 1]?.position
+            : null;
+      }
+
+      try {
+        let newPosition: string;
+        if (lowerPos && upperPos && lowerPos === upperPos) {
+          newPosition = generateJitteredKeyBetween(lowerPos, null);
+        } else {
+          newPosition = generateJitteredKeyBetween(lowerPos, upperPos);
+        }
+        reorderRow({ rowId, pageId, position: newPosition });
+      } catch {
+        // Position computation failed; skip silently.
+      }
+    },
+    [editable, pageId, reorderRow],
+  );
+
+  if (baseLoading || (!isKanban && rowsLoading)) {
+    return <BaseTableSkeleton />;
+  }
+  if (baseError) {
+    return (
+      <Stack align="center" gap="sm" p="xl">
+        <IconTable size={40} color="var(--mantine-color-gray-5)" />
+        <Text c="dimmed">{t("Failed to load base")}</Text>
+      </Stack>
+    );
+  }
+  if (!base) return null;
+
+  // Ghost rows are an "empty base" affordance, not a "filter matched nothing" state.
+  const isFiltered = (activeFilter?.children?.length ?? 0) > 0;
+
+  const banner = (
+    <BaseViewDraftBanner
+      isDirty={isDirty}
+      canSave={canSave}
+      onReset={resetDraft}
+      onSave={handleSaveDraft}
+      saving={updateViewMutation.isPending}
+    />
+  );
+
+  const toolbar = (
+    <BaseToolbar
+      base={base}
+      activeView={effectiveView}
+      views={views}
+      table={table}
+      onViewChange={handleViewChange}
+      canAddView={editable}
+      onPersistViewConfig={guardedPersistViewConfig}
+      onDraftSortsChange={handleDraftSortsChange}
+      onDraftFiltersChange={handleDraftFiltersChange}
+      onExpand={embedded ? handleExpand : undefined}
+      getViewShareUrl={getViewShareUrl}
+    />
+  );
+
+  const kanbanBand = (
+    <div className={kanbanClasses.bandWrap}>
+      {embedded ? null : titleSlot}
+      {banner}
+      {toolbar}
+      {embedded ? <BaseEmbedTitle pageId={pageId} /> : null}
+    </div>
+  );
+
+  const viewRenderer = (folded: React.ReactNode) => (
+    <ViewRenderer
+      base={base}
+      rows={rows}
+      effectiveView={effectiveView}
+      table={table}
+      pageId={pageId}
+      embedded={embedded}
+      editable={editable}
+      isFiltered={isFiltered}
+      hasNextPage={!!hasNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      onFetchNextPage={fetchNextPage}
+      onCellUpdate={handleCellUpdate}
+      onAddRow={handleAddRow}
+      onColumnReorder={editable ? handleColumnReorder : undefined}
+      onResizeEnd={handleResizeEnd}
+      onRowReorder={editable ? handleRowReorder : undefined}
+      persistViewConfig={guardedPersistViewConfig}
+      scrollportRef={scrollportRef}
+      kanbanFilter={activeFilter}
+      aboveBand={folded}
+    />
+  );
+
+  if (embedded) {
+    if (isKanban) {
+      return (
+        <BaseEditableProvider editable={editable}>
+          <RowExpandProvider value={handleExpandRow}>
+            {kanbanBand}
+            {viewRenderer(null)}
+          </RowExpandProvider>
+          <RowDetailModal
+            base={base}
+            rows={rows}
+            openRowId={openRowId}
+            onClose={closeRow}
+            onNavigate={handleRowNavigate}
+          />
+        </BaseEditableProvider>
+      );
+    }
+
+    // Banner and toolbar go into aboveBand so they scroll with the host document;
+    // only the column-header row stays pinned (via --sticky-band-top).
+    return (
+      <BaseEditableProvider editable={editable}>
+        <RowExpandProvider value={handleExpandRow}>
+          {viewRenderer(
+            <>
+              {banner}
+              {toolbar}
+              <BaseEmbedTitle pageId={pageId} />
+            </>,
+          )}
+        </RowExpandProvider>
+        <RowDetailModal
+          base={base}
+          rows={rows}
+          openRowId={openRowId}
+          onClose={closeRow}
+          onNavigate={handleRowNavigate}
+        />
+      </BaseEditableProvider>
+    );
+  }
+
+  if (isKanban) {
+    return (
+      <BaseEditableProvider editable={editable}>
+        <div className={kanbanClasses.standalone}>
+          <RowExpandProvider value={handleExpandRow}>
+            {kanbanBand}
+            {viewRenderer(null)}
+          </RowExpandProvider>
+        </div>
+        <RowDetailModal
+          base={base}
+          rows={rows}
+          openRowId={openRowId}
+          onClose={closeRow}
+          onNavigate={handleRowNavigate}
+        />
+      </BaseEditableProvider>
+    );
+  }
+
+  // Standalone: title, banner, and toolbar go in aboveBand inside the scroll
+  // container so they scroll away; only the column-header row stays pinned.
+  return (
+    <BaseEditableProvider editable={editable}>
+      <div className={viewClasses.fullHeight}>
+        <div className={classes.tableScrollport} ref={scrollportRef}>
+          <RowExpandProvider value={handleExpandRow}>
+            {viewRenderer(
+              <>
+                {titleSlot}
+                {banner}
+                {toolbar}
+              </>,
+            )}
+          </RowExpandProvider>
+        </div>
+      </div>
+      <RowDetailModal
+        base={base}
+        rows={rows}
+        openRowId={openRowId}
+        onClose={closeRow}
+        onNavigate={handleRowNavigate}
+      />
+    </BaseEditableProvider>
+  );
+}
@@ -0,0 +1,100 @@
+import { ReactElement, useLayoutEffect, useRef, useState } from "react";
+import { Tooltip } from "@mantine/core";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+export function computeVisibleBadgeCount(
+  itemWidths: number[],
+  gap: number,
+  available: number,
+  badgeWidth: number,
+): number {
+  const count = itemWidths.length;
+  if (count === 0) return 0;
+  if (available <= 0) return count;
+
+  let lineWidth = 0;
+  for (let i = 0; i < count; i++) {
+    lineWidth += itemWidths[i] + (i > 0 ? gap : 0);
+  }
+  if (lineWidth <= available) return count;
+
+  let used = 0;
+  let fit = 0;
+  for (let i = 0; i < count; i++) {
+    const advance = itemWidths[i] + (i > 0 ? gap : 0);
+    if (used + advance + gap + badgeWidth <= available) {
+      used += advance;
+      fit = i + 1;
+    } else {
+      break;
+    }
+  }
+  return Math.max(fit, 1);
+}
+
+const BADGE_GAP = 4;
+
+type BadgeOverflowListProps = {
+  chips: ReactElement[];
+  measureKey: string;
+  tooltipLabel?: string;
+};
+
+export function BadgeOverflowList({
+  chips,
+  measureKey,
+  tooltipLabel,
+}: BadgeOverflowListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [visibleCount, setVisibleCount] = useState(chips.length);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const measure = measureRef.current;
+    if (!container || !measure) return;
+
+    const recompute = () => {
+      const nodes = Array.from(measure.children) as HTMLElement[];
+      const chipWidths = nodes.slice(0, -1).map((n) => n.offsetWidth);
+      const badgeWidth = nodes[nodes.length - 1]?.offsetWidth ?? 0;
+      setVisibleCount(
+        computeVisibleBadgeCount(
+          chipWidths,
+          BADGE_GAP,
+          container.clientWidth,
+          badgeWidth,
+        ),
+      );
+    };
+
+    recompute();
+    const observer = new ResizeObserver(recompute);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [measureKey]);
+
+  const visible = chips.slice(0, visibleCount);
+  const overflow = chips.length - visibleCount;
+
+  return (
+    <Tooltip
+      label={tooltipLabel}
+      multiline
+      withinPortal
+      openDelay={400}
+      disabled={!tooltipLabel || overflow <= 0}
+    >
+      <div className={cellClasses.badgeGroup} ref={containerRef}>
+        <div className={cellClasses.badgeMeasure} ref={measureRef} aria-hidden>
+          {chips}
+          <span className={cellClasses.overflowCount}>+{chips.length}</span>
+        </div>
+        {visible}
+        {overflow > 0 && (
+          <span className={cellClasses.overflowCount}>+{overflow}</span>
+        )}
+      </div>
+    </Tooltip>
+  );
+}
@@ -0,0 +1,44 @@
+import { useCallback } from "react";
+import { Checkbox } from "@mantine/core";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellCheckboxProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  readOnly?: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellCheckbox({ value, readOnly, onCommit }: CellCheckboxProps) {
+  const checked = value === true;
+
+  const handleChange = useCallback(() => {
+    if (readOnly) return;
+    onCommit(!checked);
+  }, [readOnly, checked, onCommit]);
+
+  return (
+    <div
+      className={cellClasses.checkboxCell}
+      onClick={handleChange}
+      style={readOnly ? { cursor: "default" } : undefined}
+    >
+      <Checkbox
+        checked={checked}
+        onChange={() => {}}
+        size="xs"
+        tabIndex={-1}
+        styles={{
+          input: {
+            cursor: readOnly ? "default" : "pointer",
+            pointerEvents: "none",
+          },
+        }}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,22 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { formatTimestamp } from "@/ee/base/formatters/cell-formatters";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellCreatedAtProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellCreatedAt({ value }: CellCreatedAtProps) {
+  const formatted = formatTimestamp(typeof value === "string" ? value : null);
+
+  if (!formatted) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <span className={cellClasses.dateValue}>{formatted}</span>;
+}
@@ -4,8 +4,8 @@ import { DatePicker } from "@mantine/dates";
 import {
  IBaseProperty,
  DateTypeOptions,
-} from "@/features/base/types/base.types";
-import cellClasses from "@/features/base/styles/cells.module.css";
+} from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";

 type CellDateProps = {
  value: unknown;
@@ -16,7 +16,7 @@ type CellDateProps = {
  onCancel: () => void;
 };

-function formatDateDisplay(
+export function formatDateDisplay(
  dateStr: string | null | undefined,
  options: DateTypeOptions | undefined,
 ): string {
@@ -106,13 +106,18 @@ export function CellDate({
    return (
      <Popover
        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
        onClose={onCancel}
        position="bottom-start"
        width="auto"
        trapFocus
+        closeOnClickOutside
+        closeOnEscape
      >
        <Popover.Target>
-          <div style={{ width: "100%", height: "100%" }}>
+          <div className={cellClasses.popoverTarget}>
            <span className={cellClasses.dateValue}>
              {formatDateDisplay(dateStr, typeOptions)}
            </span>
@@ -0,0 +1,61 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { Tooltip } from "@mantine/core";
+import { useEditableTextCell } from "@/ee/base/hooks/use-editable-text-cell";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellEmailProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const toDraft = (value: unknown) => (typeof value === "string" ? value : "");
+const parse = (draft: string) => draft || null;
+
+export function CellEmail({ value, property, rowId, isEditing, onCommit, onCancel }: CellEmailProps) {
+  const { draft, setDraft, inputRef, handleKeyDown, handleBlur } =
+    useEditableTextCell({
+      value,
+      isEditing,
+      onCommit,
+      onCancel,
+      toDraft,
+      parse,
+      rowId,
+      propertyId: property.id,
+    });
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="email"
+        className={cellClasses.cellInput}
+        value={draft}
+        placeholder="email@example.com"
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  const displayValue = toDraft(value);
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+  return (
+    <Tooltip label={displayValue} multiline withinPortal openDelay={400} maw={420}>
+      <a
+        className={cellClasses.emailLink}
+        href={`mailto:${displayValue}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {displayValue}
+      </a>
+    </Tooltip>
+  );
+}
@@ -6,8 +6,8 @@ import {
  IconFile,
  IconX,
 } from "@tabler/icons-react";
-import { IBaseProperty } from "@/features/base/types/base.types";
-import cellClasses from "@/features/base/styles/cells.module.css";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
 import { uploadFile } from "@/features/page/services/page-service";
 import { getFileUrl } from "@/lib/config";

@@ -16,12 +16,6 @@ export type FileValue = {
  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;
 };

@@ -34,6 +28,7 @@ type CellFileProps = {
  property: IBaseProperty;
  rowId: string;
  isEditing: boolean;
+  readOnly?: boolean;
  onCommit: (value: unknown) => void;
  onCancel: () => void;
 };
@@ -57,6 +52,7 @@ export function CellFile({
  value,
  property,
  isEditing,
+  readOnly,
  onCommit,
  onCancel,
 }: CellFileProps) {
@@ -66,10 +62,11 @@ export function CellFile({

  const handleRemove = useCallback(
    (fileId: string) => {
+      if (readOnly) return;
      const updated = files.filter((f) => f.id !== fileId);
      onCommit(updated.length > 0 ? updated : null);
    },
-    [files, onCommit],
+    [readOnly, files, onCommit],
  );

  const handleUpload = useCallback(
@@ -79,12 +76,9 @@ export function CellFile({

      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.
+      // Reuse the page-attachment upload pipeline: the base's pageId is passed
+      // to the standard /files/upload endpoint, which enforces the same edit
+      // access check as any other page attachment.
      for (const file of Array.from(fileList)) {
        try {
          const attachment = await uploadFile(file, property.pageId);
@@ -122,52 +116,36 @@ export function CellFile({
    return (
      <Popover
        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
        onClose={onCancel}
        position="bottom-start"
        width={280}
        trapFocus
+        closeOnClickOutside
+        closeOnEscape
      >
        <Popover.Target>
-          <div style={{ width: "100%", height: "100%" }}>
+          <div className={cellClasses.popoverTarget}>
            <FileList files={files} maxVisible={MAX_VISIBLE} />
          </div>
        </Popover.Target>
        <Popover.Dropdown p={8} onKeyDown={handleKeyDown}>
-          {files.length === 0 && !uploading && (
+          {!readOnly && 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)",
-                }}
-              />
+            <div key={file.id} className={cellClasses.fileItemRow}>
+              <IconFile size={14} className={cellClasses.fileItemIcon} />
              <a
                href={getFileUrl(buildFileUrl(file))}
                target="_blank"
                rel="noreferrer"
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  textDecoration: "none",
-                  color: "inherit",
-                }}
+                className={cellClasses.fileItemLink}
              >
                <Text size="xs" truncate="end" fw={500}>
                  {file.fileName}
@@ -178,6 +156,7 @@ export function CellFile({
                  </Text>
                )}
              </a>
+              {!readOnly && (
                <ActionIcon
                  variant="subtle"
                  color="gray"
@@ -186,9 +165,12 @@ export function CellFile({
                >
                  <IconX size={12} />
                </ActionIcon>
+              )}
            </div>
          ))}

+          {!readOnly && (
+            <>
              <input
                ref={fileInputRef}
                type="file"
@@ -203,13 +185,8 @@ export function CellFile({
              <UnstyledButton
                onClick={() => fileInputRef.current?.click()}
                disabled={uploading}
+                className={cellClasses.fileUploadBtn}
                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)",
@@ -218,6 +195,8 @@ export function CellFile({
                <IconUpload size={14} />
                {uploading ? "Uploading..." : "Add file"}
              </UnstyledButton>
+            </>
+          )}
        </Popover.Dropdown>
      </Popover>
    );
@@ -2,7 +2,7 @@ import { Badge, Tooltip } from "@mantine/core";
 import {
  IBaseProperty,
  isFormulaErrorCell,
-} from "@/features/base/types/base.types";
+} from "@/ee/base/types/base.types";
 import { CellText } from "./cell-text";
 import { CellNumber } from "./cell-number";
 import { CellCheckbox } from "./cell-checkbox";
@@ -0,0 +1,22 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { formatTimestamp } from "@/ee/base/formatters/cell-formatters";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellLastEditedAtProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellLastEditedAt({ value }: CellLastEditedAtProps) {
+  const formatted = formatTimestamp(typeof value === "string" ? value : null);
+
+  if (!formatted) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <span className={cellClasses.dateValue}>{formatted}</span>;
+}
@@ -0,0 +1,41 @@
+import { Group, Tooltip } from "@mantine/core";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { useReferenceStore } from "@/ee/base/reference/reference-store";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellLastEditedByProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellLastEditedBy({ value, property }: CellLastEditedByProps) {
+  const userId = typeof value === "string" ? value : null;
+
+  const store = useReferenceStore(property.pageId);
+  const user = userId ? store.users[userId] ?? null : null;
+
+  if (!userId) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  const name = user?.name ?? userId.substring(0, 8);
+
+  return (
+    <Group gap={6} wrap="nowrap" style={{ overflow: "hidden" }}>
+      <CustomAvatar
+        avatarUrl={user?.avatarUrl ?? ""}
+        name={name}
+        size={20}
+        radius="xl"
+      />
+      <Tooltip label={name} withinPortal openDelay={400} disabled={!name}>
+        <span className={cellClasses.lastEditedByName}>{name}</span>
+      </Tooltip>
+    </Group>
+  );
+}
@@ -0,0 +1,151 @@
+import { useEffect, useRef, useState } from "react";
+import { Popover, Textarea, Group, CloseButton, Tooltip } from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { formatLongTextPreview } from "@/ee/base/formatters/cell-formatters";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellLongTextProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
+  onCancel: () => void;
+  onTabNavigate?: (shiftKey: boolean) => void;
+};
+
+const toText = (value: unknown) => (typeof value === "string" ? value : "");
+const normalize = (s: string) => {
+  const trimmed = s.trim();
+  return trimmed.length ? trimmed : null;
+};
+
+export function CellLongText({
+  value,
+  isEditing,
+  onCommit,
+  onValueChange,
+  onCancel,
+  onTabNavigate,
+}: CellLongTextProps) {
+  const [draft, setDraft] = useState(() => toText(value));
+  const cancelledRef = useRef(false);
+  const committedRef = useRef(false);
+  const wasEditingRef = useRef(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Seed draft and focus on the false->true editing transition only; ignore
+  // value changes mid-edit so the user's typing is not clobbered.
+  useEffect(() => {
+    if (isEditing && !wasEditingRef.current) {
+      cancelledRef.current = false;
+      committedRef.current = false;
+      setDraft(toText(value));
+      requestAnimationFrame(() => {
+        const el = textareaRef.current;
+        if (!el) return;
+        el.focus();
+        el.setSelectionRange(el.value.length, el.value.length);
+      });
+    }
+    wasEditingRef.current = isEditing;
+  }, [isEditing, value]);
+
+  // Autosave after a typing pause; commit/cancel clear the pending fire so
+  // a closed editor can never write a stale or discarded draft.
+  const debouncedAutosave = useDebouncedCallback(() => {
+    onValueChange(normalize(draft));
+  }, 10_000);
+
+  const commit = () => {
+    if (committedRef.current) return;
+    committedRef.current = true;
+    debouncedAutosave.cancel();
+    onCommit(normalize(draft));
+  };
+  const cancel = () => {
+    cancelledRef.current = true;
+    debouncedAutosave.cancel();
+    onCancel();
+  };
+
+  const preview = formatLongTextPreview(toText(value));
+
+  return (
+    <Popover
+      opened={isEditing}
+      onChange={(opened) => {
+        if (opened) return;
+        // Programmatic close after cancel must not re-commit.
+        if (cancelledRef.current) {
+          cancelledRef.current = false;
+          return;
+        }
+        commit();
+      }}
+      position="bottom-start"
+      width={320}
+      shadow="md"
+      withinPortal
+      closeOnClickOutside
+      closeOnEscape={false}
+      trapFocus
+    >
+      <Popover.Target>
+        <div className={cellClasses.popoverTargetFlex}>
+          {preview ? (
+            <Tooltip label={toText(value)} multiline withinPortal openDelay={400} maw={420}>
+              <span className={cellClasses.longTextPreview}>{preview}</span>
+            </Tooltip>
+          ) : (
+            <span className={cellClasses.emptyValue} />
+          )}
+        </div>
+      </Popover.Target>
+      <Popover.Dropdown
+        p={4}
+        onClick={(e) => e.stopPropagation()}
+        className={cellClasses.longTextDropdown}
+      >
+        {isEditing && (
+          <>
+            <Group justify="flex-end" mb={2}>
+              <CloseButton size="sm" onClick={commit} aria-label="Close" />
+            </Group>
+            <Textarea
+              ref={textareaRef}
+              data-autofocus
+              autosize
+              minRows={3}
+              maxRows={12}
+              maxLength={25000}
+              variant="unstyled"
+              value={draft}
+              onChange={(e) => {
+                setDraft(e.currentTarget.value);
+                debouncedAutosave();
+              }}
+              onKeyDown={(e) => {
+                e.stopPropagation();
+                if (e.key === "Tab") {
+                  e.preventDefault();
+                  commit();
+                  onTabNavigate?.(e.shiftKey);
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  cancel();
+                } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                  e.preventDefault();
+                  commit();
+                }
+              }}
+              styles={{ input: { padding: 4 } }}
+            />
+          </>
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
@@ -1,16 +1,24 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
 import { Popover, TextInput } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
 import clsx from "clsx";
 import {
  IBaseProperty,
  SelectTypeOptions,
  Choice,
-} from "@/features/base/types/base.types";
-import { choiceColor } from "@/features/base/components/cells/choice-color";
-import { useUpdatePropertyMutation } from "@/features/base/queries/base-property-query";
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { BadgeOverflowList } from "@/ee/base/components/cells/badge-overflow";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
 import { v7 as uuid7 } from "uuid";
-import cellClasses from "@/features/base/styles/cells.module.css";
-import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";

 const CHOICE_COLORS = [
  "gray", "red", "pink", "grape", "violet", "indigo",
@@ -27,6 +35,7 @@ type CellMultiSelectProps = {
  rowId: string;
  isEditing: boolean;
  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
  onCancel: () => void;
 };

@@ -34,7 +43,7 @@ export function CellMultiSelect({
  value,
  property,
  isEditing,
-  onCommit,
+  onValueChange,
  onCancel,
 }: CellMultiSelectProps) {
  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
@@ -54,18 +63,20 @@ export function CellMultiSelect({
    }
  }, [isEditing]);

-  const filteredChoices = search
+  const filteredChoices = (
+    search
      ? choices.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
-    : choices;
+      : choices
+  ).filter((c) => !selectedSet.has(c.id));

  const handleToggle = useCallback(
    (choice: Choice) => {
      const newIds = selectedSet.has(choice.id)
        ? selectedIds.filter((id) => id !== choice.id)
        : [...selectedIds, choice.id];
-      onCommit(newIds);
+      onValueChange(newIds);
    },
-    [selectedIds, selectedSet, onCommit],
+    [selectedIds, selectedSet, onValueChange],
  );

  const updatePropertyMutation = useUpdatePropertyMutation();
@@ -112,9 +123,9 @@ export function CellMultiSelect({
        choiceOrder: newChoices.map((c) => c.id),
      },
    });
-    onCommit([...selectedIds, newChoice.id]);
+    onValueChange([...selectedIds, newChoice.id]);
    setSearch("");
-  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, selectedIds, onCommit]);
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, selectedIds, onValueChange]);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
@@ -141,24 +152,50 @@ export function CellMultiSelect({
    [onCancel, handleNavKey, activeIndex, navItems, handleToggle, handleAddOption, showAddOption],
  );

-  const MAX_VISIBLE = 3;
-
  if (isEditing) {
    const addOptionIdx = filteredChoices.length;
    return (
      <Popover
        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
        onClose={onCancel}
        position="bottom-start"
        width={220}
        trapFocus
+        closeOnClickOutside
+        closeOnEscape
      >
        <Popover.Target>
-          <div style={{ width: "100%", height: "100%" }}>
-            <BadgeList choices={selectedChoices} maxVisible={MAX_VISIBLE} />
+          <div className={cellClasses.popoverTarget}>
+            <BadgeList choices={selectedChoices} />
          </div>
        </Popover.Target>
        <Popover.Dropdown p={4}>
+          {selectedChoices.length > 0 && (
+            <div className={cellClasses.personTagArea}>
+              {selectedChoices.map((choice) => (
+                <span
+                  key={choice.id}
+                  className={cellClasses.badge}
+                  style={choiceColor(choice.color)}
+                >
+                  {choice.name}
+                  <button
+                    type="button"
+                    className={`${cellClasses.personTagRemove} ${cellClasses.badgeRemoveBtn}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleToggle(choice);
+                    }}
+                  >
+                    <IconX size={10} />
+                  </button>
+                </span>
+              ))}
+            </div>
+          )}
          <TextInput
            ref={searchRef}
            size="xs"
@@ -167,24 +204,18 @@ export function CellMultiSelect({
            onChange={(e) => setSearch(e.currentTarget.value)}
            onKeyDown={handleKeyDown}
            mb={4}
+            data-autofocus
          />
          <div className={cellClasses.selectDropdown}>
-            {filteredChoices.map((choice, idx) => {
-              const isSelected = selectedSet.has(choice.id);
-              return (
+            {filteredChoices.map((choice, idx) => (
              <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
@@ -194,8 +225,7 @@ export function CellMultiSelect({
                  {choice.name}
                </span>
              </div>
-              );
-            })}
+            ))}
            {showAddOption && (
              <div
                ref={setOptionRef(addOptionIdx)}
@@ -204,9 +234,6 @@ export function CellMultiSelect({
                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
                )}
                onMouseEnter={() => setActiveIndex(addOptionIdx)}
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                }}
                onClick={handleAddOption}
              >
                <span className={cellClasses.addOptionLabel}>Add option:</span>
@@ -228,22 +255,22 @@ export function CellMultiSelect({
    return <span className={cellClasses.emptyValue} />;
  }

-  return <BadgeList choices={selectedChoices} maxVisible={MAX_VISIBLE} />;
+  return (
+    <BadgeList
+      choices={selectedChoices}
+      tooltipLabel={selectedChoices.map((c) => c.name).join(", ")}
+    />
+  );
 }

 function BadgeList({
  choices,
-  maxVisible,
+  tooltipLabel,
 }: {
  choices: Choice[];
-  maxVisible: number;
+  tooltipLabel?: string;
 }) {
-  const visible = choices.slice(0, maxVisible);
-  const overflow = choices.length - maxVisible;
-
-  return (
-    <div className={cellClasses.badgeGroup}>
-      {visible.map((choice) => (
+  const chips = choices.map((choice) => (
    <span
      key={choice.id}
      className={cellClasses.badge}
@@ -251,10 +278,12 @@ function BadgeList({
    >
      {choice.name}
    </span>
-      ))}
-      {overflow > 0 && (
-        <span className={cellClasses.overflowCount}>+{overflow}</span>
-      )}
-    </div>
+  ));
+  return (
+    <BadgeOverflowList
+      chips={chips}
+      measureKey={choices.map((c) => `${c.id}:${c.name}`).join("|")}
+      tooltipLabel={tooltipLabel}
+    />
  );
 }
@@ -0,0 +1,158 @@
+import {
+  IBaseProperty,
+  NumberTypeOptions,
+} from "@/ee/base/types/base.types";
+import { formatCurrency } from "@/ee/base/constants/currencies";
+import { snapNumber } from "@docmost/base-formula/client";
+import { useEditableTextCell } from "@/ee/base/hooks/use-editable-text-cell";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellNumberProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const SEPARATOR_CHARS: Record<string, { group: string; decimal: string }> = {
+  comma_period: { group: ",", decimal: "." },
+  period_comma: { group: ".", decimal: "," },
+  space_comma: { group: " ", decimal: "," },
+  space_period: { group: " ", decimal: "." },
+};
+
+function separatorChars(style: string): { group: string; decimal: string } {
+  if (style === "local") {
+    const parts = new Intl.NumberFormat().formatToParts(11111.1);
+    return {
+      group: parts.find((p) => p.type === "group")?.value ?? ",",
+      decimal: parts.find((p) => p.type === "decimal")?.value ?? ".",
+    };
+  }
+  return SEPARATOR_CHARS[style] ?? { group: ",", decimal: "." };
+}
+
+function formatPlain(
+  value: number,
+  precision: number | undefined,
+  style: string,
+): string {
+  const fixed = precision == null ? String(value) : value.toFixed(precision);
+  if (style === "none") return fixed;
+  const { group, decimal } = separatorChars(style);
+  const neg = fixed[0] === "-";
+  const abs = neg ? fixed.slice(1) : fixed;
+  const dot = abs.indexOf(".");
+  const intPart = dot === -1 ? abs : abs.slice(0, dot);
+  const fracPart = dot === -1 ? "" : abs.slice(dot + 1);
+  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, group);
+  const out = fracPart ? `${grouped}${decimal}${fracPart}` : grouped;
+  return neg ? `-${out}` : out;
+}
+
+export function formatNumber(
+  val: number | null | undefined,
+  options: NumberTypeOptions | undefined,
+): string {
+  if (val == null) return "";
+  const precision = options?.precision;
+  const format = options?.format ?? "plain";
+  const style = options?.separators ?? "none";
+  const v = precision == null ? snapNumber(val) : val;
+
+  switch (format) {
+    case "currency":
+      return formatCurrency(v, options?.currencyCode, precision);
+    case "percent":
+      return `${formatPlain(v, precision, style)}%`;
+    case "progress":
+      return `${Math.min(100, Math.max(0, v)).toFixed(0)}%`;
+    default:
+      return formatPlain(v, precision, style);
+  }
+}
+
+const toDraft = (value: unknown) =>
+  typeof value === "number" ? String(value) : "";
+
+export function sanitizeNumberInput(text: string): string {
+  return text.replace(/[^0-9.-]/g, "");
+}
+
+export function parseNumberDraft(draft: string): number | null {
+  const cleaned = sanitizeNumberInput(draft);
+  if (cleaned === "" || cleaned === "-") return null;
+  const parsed = Number(cleaned);
+  return isNaN(parsed) ? null : parsed;
+}
+
+export function CellNumber({
+  value,
+  property,
+  rowId,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellNumberProps) {
+  const typeOptions = property.typeOptions as NumberTypeOptions | undefined;
+  const { draft, setDraft, inputRef, handleKeyDown, handleBlur } =
+    useEditableTextCell({
+      value,
+      isEditing,
+      onCommit,
+      onCancel,
+      toDraft,
+      parse: parseNumberDraft,
+      rowId,
+      propertyId: property.id,
+    });
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="decimal"
+        className={`${cellClasses.cellInput} ${cellClasses.numberInput}`}
+        value={draft}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (v === "" || v === "-" || /^-?\d*\.?\d*$/.test(v)) {
+            setDraft(v);
+          }
+        }}
+        onPaste={(e) => {
+          e.preventDefault();
+          const el = e.currentTarget;
+          const start = el.selectionStart ?? draft.length;
+          const end = el.selectionEnd ?? draft.length;
+          setDraft(
+            draft.slice(0, start) +
+              sanitizeNumberInput(e.clipboardData.getData("text")) +
+              draft.slice(end),
+          );
+        }}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  const numValue = typeof value === "number" ? value : null;
+  if (numValue == null) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <AutoTooltipText
+      className={cellClasses.numberValue}
+      fz="sm"
+      tooltipProps={{ withinPortal: true }}
+    >
+      {formatNumber(numValue, typeOptions)}
+    </AutoTooltipText>
+  );
+}
@@ -1,17 +1,20 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import { Popover, ActionIcon, Text } from "@mantine/core";
+import { Popover, ActionIcon, Text, Tooltip } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useQuery } from "@tanstack/react-query";
 import { IconX, IconFileDescription } from "@tabler/icons-react";
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { IBaseProperty } from "@/features/base/types/base.types";
-import { useResolvedPages } from "@/features/base/queries/base-page-resolver-query";
-import { useBaseQuery } from "@/features/base/queries/base-query";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { useResolvePage } from "@/ee/base/reference/reference-store";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
 import { searchSuggestions } from "@/features/search/services/search-service";
-import { buildPageUrl } from "@/features/page/page.utils";
-import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
-import cellClasses from "@/features/base/styles/cells.module.css";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { extractPageSlugId } from "@/lib";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+import cellClasses from "@/ee/base/styles/cells.module.css";

 type CellPageProps = {
  value: unknown;
@@ -36,6 +39,22 @@ function parsePageId(value: unknown): string | null {
  return null;
 }

+function parsePastedPageSlugId(input: string): string | null {
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+  let path = trimmed;
+  if (/^https?:\/\//i.test(trimmed)) {
+    try {
+      path = new URL(trimmed).pathname;
+    } catch {
+      return null;
+    }
+  }
+  const match = path.match(/\/p\/([^/?#]+)/);
+  if (!match) return null;
+  return extractPageSlugId(match[1]) ?? null;
+}
+
 export function CellPage({
  value,
  property,
@@ -46,9 +65,7 @@ export function CellPage({
  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;
+  const resolvedPage = useResolvePage(property.pageId, pageId);

  if (isEditing) {
    return (
@@ -67,8 +84,7 @@ export function CellPage({
  }

  if (resolvedPage === undefined) {
-    // Still resolving — render an empty pill-shaped placeholder to avoid
-    // the "Page not found" flicker on initial load.
+    // placeholder to avoid "Page not found" flicker on initial load
    return <span className={cellClasses.emptyValue} />;
  }

@@ -92,11 +108,13 @@ type PillPage = {
 };

 function PagePill({ page }: { page: PillPage }) {
-  const title = page.title || "Untitled";
+  const { t } = useTranslation();
+  const title = getPageTitle(page.title, undefined, t);
  const spaceSlug = page.space?.slug ?? "";
  const url = buildPageUrl(spaceSlug, page.slugId, title);

  return (
+    <Tooltip label={title} withinPortal openDelay={400} disabled={!title}>
      <Link
        to={url}
        className={cellClasses.pagePill}
@@ -110,6 +128,7 @@ function PagePill({ page }: { page: PillPage }) {
        )}
        <span className={cellClasses.pagePillText}>{title}</span>
      </Link>
+    </Tooltip>
  );
 }

@@ -128,6 +147,7 @@ function PagePicker({
  onCommit,
  onCancel,
 }: PagePickerProps) {
+  const { t } = useTranslation();
  const [search, setSearch] = useState("");
  const [debouncedSearch] = useDebouncedValue(search, 250);
  const searchRef = useRef<HTMLInputElement>(null);
@@ -137,6 +157,12 @@ function PagePicker({
  }, []);

  const trimmed = debouncedSearch.trim();
+
+  const pastedSlugId = useMemo(
+    () => parsePastedPageSlugId(debouncedSearch),
+    [debouncedSearch],
+  );
+
  const { data: suggestions = [] } = useQuery({
    queryKey: ["bases", "pages", "search", trimmed, spaceId ?? ""],
    queryFn: async () => {
@@ -148,9 +174,26 @@ function PagePicker({
      });
      return (res.pages ?? []) as PageSuggestion[];
    },
+    enabled: !pastedSlugId,
    staleTime: 15_000,
  });

+  // Once the pasted link resolves via slugId lookup, commit and close.
+  const { data: linkedPage, isFetching: resolvingLink } = usePageQuery(
+    pastedSlugId ? { pageId: pastedSlugId } : {},
+  );
+  const linkedRef = useRef(false);
+  useEffect(() => {
+    if (!pastedSlugId) {
+      linkedRef.current = false;
+      return;
+    }
+    if (linkedPage && !linkedRef.current) {
+      linkedRef.current = true;
+      onCommit(linkedPage.id);
+    }
+  }, [pastedSlugId, linkedPage, onCommit]);
+
  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
    useListKeyboardNav(suggestions.length, [debouncedSearch]);

@@ -183,9 +226,20 @@ function PagePicker({
  );

  return (
-    <Popover opened onClose={onCancel} position="bottom-start" width={320} trapFocus>
+    <Popover
+      opened
+      onChange={(o) => {
+        if (!o) onCancel();
+      }}
+      onClose={onCancel}
+      position="bottom-start"
+      width={320}
+      trapFocus
+      closeOnClickOutside
+      closeOnEscape
+    >
      <Popover.Target>
-        <div style={{ width: "100%", height: "100%" }}>
+        <div className={cellClasses.popoverTarget}>
          {resolvedPage ? <PagePill page={resolvedPage} /> : <span className={cellClasses.emptyValue} />}
        </div>
      </Popover.Target>
@@ -196,10 +250,13 @@ function PagePicker({
              {resolvedPage.icon ? (
                <span>{resolvedPage.icon}</span>
              ) : (
-                <IconFileDescription size={14} />
+                <IconFileDescription
+                  size={14}
+                  color="var(--mantine-color-dimmed)"
+                />
              )}
              <span className={cellClasses.personTagName}>
-                {resolvedPage.title || "Untitled"}
+                {getPageTitle(resolvedPage.title, undefined, t)}
              </span>
              <button
                type="button"
@@ -220,11 +277,18 @@ function PagePicker({
            value={search}
            onChange={(e) => setSearch(e.currentTarget.value)}
            onKeyDown={handleKeyDown}
+            data-autofocus
          />
        </div>

        <div className={cellClasses.personDropdownDivider} />
        <div className={cellClasses.selectDropdown}>
+          {pastedSlugId ? (
+            <div className={cellClasses.personDropdownHint}>
+              {resolvingLink || linkedPage ? "Linking page…" : "Page not found"}
+            </div>
+          ) : (
+            <>
          {suggestions.length === 0 && (
            <div className={cellClasses.personDropdownHint}>
              {trimmed ? "No pages found" : "No pages yet"}
@@ -242,25 +306,31 @@ function PagePicker({
                  idx === activeIndex && cellClasses.selectOptionKeyboardActive,
                )}
                onMouseEnter={() => setActiveIndex(idx)}
-                onMouseDown={(e) => e.preventDefault()}
                onClick={() => handleSelect(page.id)}
              >
                {page.icon ? (
                  <span>{page.icon}</span>
                ) : (
-                  <IconFileDescription size={14} />
+                  <IconFileDescription
+                    size={14}
+                    color="var(--mantine-color-dimmed)"
+                  />
                )}
+                <div className={cellClasses.pageOptionText}>
                  <span className={cellClasses.personOptionName}>
-                  {page.title || "Untitled"}
+                    {getPageTitle(page.title, undefined, t)}
                  </span>
                  {page.space?.name && (
-                  <Text size="xs" c="dimmed" ml="auto" truncate>
+                    <Text size="xs" c="dimmed" truncate>
                      {page.space.name}
                    </Text>
                  )}
                </div>
+              </div>
            );
          })}
+            </>
+          )}
        </div>
      </Popover.Dropdown>
    </Popover>
@@ -1,15 +1,20 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { Popover } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
 import clsx from "clsx";
 import {
  IBaseProperty,
  PersonTypeOptions,
-} from "@/features/base/types/base.types";
-import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
+} from "@/ee/base/types/base.types";
+import {
+  useReferenceStore,
+  useHydrateUsers,
+} from "@/ee/base/reference/reference-store";
 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";
+import { PersonReadList } from "@/ee/base/components/cells/person-read-list";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+import { usePersonSearch } from "@/ee/base/hooks/use-person-search";

 type CellPersonProps = {
  value: unknown;
@@ -17,6 +22,7 @@ type CellPersonProps = {
  rowId: string;
  isEditing: boolean;
  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
  onCancel: () => void;
 };

@@ -25,10 +31,11 @@ export function CellPerson({
  property,
  isEditing,
  onCommit,
+  onValueChange,
  onCancel,
 }: CellPersonProps) {
  const allowMultiple =
-    (property.typeOptions as PersonTypeOptions)?.allowMultiple !== false;
+    (property.typeOptions as PersonTypeOptions)?.allowMultiple === true;

  const personIds = Array.isArray(value)
    ? (value as string[])
@@ -36,6 +43,8 @@ export function CellPerson({
      ? [value]
      : [];

+  const selectedSet = new Set(personIds);
+
  const [search, setSearch] = useState("");
  const searchRef = useRef<HTMLInputElement>(null);

@@ -46,37 +55,36 @@ export function CellPerson({
    }
  }, [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 store = useReferenceStore(property.pageId);

-  const filteredMembers = search
-    ? members.filter(
-        (m) =>
-          m.name.toLowerCase().includes(search.toLowerCase()) ||
-          (m.email && m.email.toLowerCase().includes(search.toLowerCase())),
-      )
-    : members;
+  const hydrateUsers = useHydrateUsers(property.pageId);
+
+  const suggestions = usePersonSearch(search, isEditing);
+
+  // In multi mode omit already-selected from the list (they appear as tags above).
+  // Single mode keeps the selected row visible so it can be deselected.
+  const filteredMembers = allowMultiple
+    ? suggestions.filter((m) => !selectedSet.has(m.id))
+    : suggestions;

  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
    useListKeyboardNav(filteredMembers.length, [search, isEditing]);

  const handleSelect = useCallback(
    (memberId: string) => {
+      const picked = suggestions.find((s) => s.id === memberId);
+      if (picked)
+        hydrateUsers([
+          { id: picked.id, name: picked.name, avatarUrl: picked.avatarUrl },
+        ]);
      if (allowMultiple) {
-        // Multi mode: toggle add/remove
        if (personIds.includes(memberId)) {
          const newIds = personIds.filter((id) => id !== memberId);
-          onCommit(newIds.length > 0 ? newIds : null);
+          onValueChange(newIds.length > 0 ? newIds : null);
        } else {
-          onCommit([...personIds, memberId]);
+          onValueChange([...personIds, memberId]);
        }
      } else {
-        // Single mode: replace or clear
        if (personIds.includes(memberId)) {
          onCommit(null);
        } else {
@@ -84,19 +92,19 @@ export function CellPerson({
        }
      }
    },
-    [allowMultiple, personIds, onCommit],
+    [suggestions, hydrateUsers, allowMultiple, personIds, onCommit, onValueChange],
  );

  const handleRemove = useCallback(
    (memberId: string) => {
      if (allowMultiple) {
        const newIds = personIds.filter((id) => id !== memberId);
-        onCommit(newIds.length > 0 ? newIds : null);
+        onValueChange(newIds.length > 0 ? newIds : null);
      } else {
        onCommit(null);
      }
    },
-    [allowMultiple, personIds, onCommit],
+    [allowMultiple, personIds, onCommit, onValueChange],
  );

  const handleKeyDown = useCallback(
@@ -121,27 +129,29 @@ export function CellPerson({
    [onCancel, handleNavKey, activeIndex, filteredMembers, handleSelect, search, personIds, handleRemove],
  );

-  const selectedSet = new Set(personIds);
-
  if (isEditing) {
    return (
      <Popover
        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
        onClose={onCancel}
        position="bottom-start"
        width={300}
        trapFocus
+        closeOnClickOutside
+        closeOnEscape
      >
        <Popover.Target>
-          <div style={{ width: "100%", height: "100%" }}>
-            <PersonReadList personIds={personIds} memberMap={memberMap} />
+          <div className={cellClasses.popoverTarget}>
+            <PersonReadList personIds={personIds} users={store.users} />
          </div>
        </Popover.Target>
        <Popover.Dropdown p={0}>
-          {/* Tag input area */}
          <div className={cellClasses.personTagArea}>
            {personIds.map((id) => {
-              const member = memberMap.get(id);
+              const member = store.users[id];
              const name = member?.name ?? id.substring(0, 8);
              return (
                <span key={id} className={cellClasses.personTag}>
@@ -172,10 +182,10 @@ export function CellPerson({
              value={search}
              onChange={(e) => setSearch(e.currentTarget.value)}
              onKeyDown={handleKeyDown}
+              data-autofocus
            />
          </div>

-          {/* Dropdown */}
          <div className={cellClasses.personDropdownDivider} />
          {allowMultiple && (
            <div className={cellClasses.personDropdownHint}>
@@ -195,21 +205,24 @@ export function CellPerson({
                    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}
+                    avatarUrl={member.avatarUrl ?? ""}
+                    name={member.name ?? ""}
                    size={24}
                    radius="xl"
                  />
+                  <div className={cellClasses.personOptionText}>
                    <span className={cellClasses.personOptionName}>
-                    {member.name}
+                      {member.name ?? ""}
                    </span>
+                    {member.email && (
+                      <span className={cellClasses.personOptionEmail}>
+                        {member.email}
+                      </span>
+                    )}
+                  </div>
                </div>
              );
            })}
@@ -228,36 +241,6 @@ export function CellPerson({
    return <span className={cellClasses.emptyValue} />;
  }

-  return <PersonReadList personIds={personIds} memberMap={memberMap} />;
+  return <PersonReadList personIds={personIds} users={store.users} />;
 }

-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>
-  );
-}
@@ -5,12 +5,13 @@ 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";
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoiceBadge } from "@/ee/base/components/cells/choice-badge";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
 import { v7 as uuid7 } from "uuid";
-import cellClasses from "@/features/base/styles/cells.module.css";
-import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";

 const CHOICE_COLORS = [
  "gray", "red", "pink", "grape", "violet", "indigo",
@@ -142,13 +143,18 @@ export function CellSelect({
    return (
      <Popover
        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
        onClose={onCancel}
        position="bottom-start"
        width={220}
        trapFocus
+        closeOnClickOutside
+        closeOnEscape
      >
        <Popover.Target>
-          <div style={{ width: "100%", height: "100%" }}>
+          <div className={cellClasses.popoverTarget}>
            {selectedChoice ? (
              <span
                className={cellClasses.badge}
@@ -184,10 +190,6 @@ export function CellSelect({
                    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
@@ -207,9 +209,6 @@ export function CellSelect({
                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
                )}
                onMouseEnter={() => setActiveIndex(addOptionIdx)}
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                }}
                onClick={handleAddOption}
              >
                <span className={cellClasses.addOptionLabel}>Add option:</span>
@@ -232,11 +231,9 @@ export function CellSelect({
  }

  return (
-    <span
-      className={cellClasses.badge}
+    <ChoiceBadge
+      name={selectedChoice.name}
      style={choiceColor(selectedChoice.color)}
-    >
-      {selectedChoice.name}
-    </span>
+    />
  );
 }
@@ -4,11 +4,12 @@ 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";
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoiceBadge } from "@/ee/base/components/cells/choice-badge";
+import cellClasses from "@/ee/base/styles/cells.module.css";
 import clsx from "clsx";
-import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";

 type CellStatusProps = {
  value: unknown;
@@ -116,13 +117,18 @@ export function CellStatus({
    return (
      <Popover
        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
        onClose={onCancel}
        position="bottom-start"
        width={220}
        trapFocus
+        closeOnClickOutside
+        closeOnEscape
      >
        <Popover.Target>
-          <div style={{ width: "100%", height: "100%" }}>
+          <div className={cellClasses.popoverTarget}>
            {selectedChoice ? (
              <span
                className={cellClasses.badge}
@@ -164,10 +170,6 @@ export function CellStatus({
                        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
@@ -192,11 +194,9 @@ export function CellStatus({
  }

  return (
-    <span
-      className={cellClasses.badge}
+    <ChoiceBadge
+      name={selectedChoice.name}
      style={choiceColor(selectedChoice.color)}
-    >
-      {selectedChoice.name}
-    </span>
+    />
  );
 }
@@ -0,0 +1,60 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { useEditableTextCell } from "@/ee/base/hooks/use-editable-text-cell";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import gridClasses from "@/ee/base/styles/grid.module.css";
+
+type CellTextProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const toDraft = (value: unknown) => (typeof value === "string" ? value : "");
+const parse = (draft: string) => draft;
+
+export function CellText({ value, property, rowId, isEditing, onCommit, onCancel }: CellTextProps) {
+  const { draft, setDraft, inputRef, handleKeyDown, handleBlur } =
+    useEditableTextCell({
+      value,
+      isEditing,
+      onCommit,
+      onCancel,
+      toDraft,
+      parse,
+      rowId,
+      propertyId: property.id,
+    });
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        className={cellClasses.cellInput}
+        value={draft}
+        maxLength={1000}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  const displayValue = toDraft(value);
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+  return (
+    <AutoTooltipText
+      className={gridClasses.cellContent}
+      fz="sm"
+      tooltipProps={{ withinPortal: true }}
+    >
+      {displayValue}
+    </AutoTooltipText>
+  );
+}
@@ -0,0 +1,70 @@
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { sanitizeUrl } from "@docmost/editor-ext";
+import { Tooltip } from "@mantine/core";
+import { useEditableTextCell } from "@/ee/base/hooks/use-editable-text-cell";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellUrlProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const toDraft = (value: unknown) => (typeof value === "string" ? value : "");
+const parse = (draft: string) => draft || null;
+
+export function CellUrl({ value, property, rowId, isEditing, onCommit, onCancel }: CellUrlProps) {
+  const { draft, setDraft, inputRef, handleKeyDown, handleBlur } =
+    useEditableTextCell({
+      value,
+      isEditing,
+      onCommit,
+      onCancel,
+      toDraft,
+      parse,
+      rowId,
+      propertyId: property.id,
+    });
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="url"
+        className={cellClasses.cellInput}
+        value={draft}
+        placeholder="https://..."
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  const displayValue = toDraft(value);
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  const safeHref = sanitizeUrl(displayValue);
+  if (!safeHref) {
+    return <span>{displayValue}</span>;
+  }
+
+  return (
+    <Tooltip label={displayValue} multiline withinPortal openDelay={400} maw={420}>
+      <a
+        className={cellClasses.urlLink}
+        href={safeHref}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {displayValue}
+      </a>
+    </Tooltip>
+  );
+}
@@ -0,0 +1,30 @@
+function isEmpty(v: unknown): boolean {
+  return v === null || v === undefined || v === "";
+}
+
+/**
+ * Deep equality for cell values. Treats null/undefined/"" as equivalent
+ * "empty", compares arrays by ordered content, objects by serialized form.
+ * Note: an empty array [] is a real value, distinct from "empty".
+ */
+export function cellValuesEqual(a: unknown, b: unknown): boolean {
+  const aArr = Array.isArray(a);
+  const bArr = Array.isArray(b);
+
+  if (!aArr && !bArr) {
+    if (isEmpty(a) && isEmpty(b)) return true;
+    if (isEmpty(a) !== isEmpty(b)) return false;
+  }
+
+  if (aArr || bArr) {
+    if (!aArr || !bArr) return false;
+    if (a.length !== b.length) return false;
+    return a.every((x, i) => cellValuesEqual(x, b[i]));
+  }
+
+  if (typeof a === "object" && typeof b === "object" && a && b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+
+  return a === b;
+}
@@ -0,0 +1,29 @@
+import { CSSProperties, useRef, useState } from "react";
+import { Tooltip } from "@mantine/core";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type ChoiceBadgeProps = {
+  name: string;
+  style: CSSProperties;
+};
+
+export function ChoiceBadge({ name, style }: ChoiceBadgeProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [truncated, setTruncated] = useState(false);
+
+  return (
+    <Tooltip label={name} withinPortal openDelay={400} disabled={!truncated}>
+      <span
+        ref={ref}
+        className={cellClasses.badge}
+        style={style}
+        onMouseEnter={() => {
+          const el = ref.current;
+          if (el) setTruncated(el.scrollWidth > el.clientWidth);
+        }}
+      >
+        {name}
+      </span>
+    </Tooltip>
+  );
+}
@@ -2,18 +2,18 @@ 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" },
+  red: { bg: "#ffe3e3", bgDark: "#4a1a1a", text: "#bf2020", 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" },
+  blue: { bg: "#d0ebff", bgDark: "#1a2e4a", text: "#1864ab", textDark: "#74c0fc" },
+  cyan: { bg: "#c5f6fa", bgDark: "#1a3a3a", text: "#0b7285", textDark: "#66d9e8" },
+  teal: { bg: "#c3fae8", bgDark: "#1a3a2e", text: "#066649", textDark: "#63e6be" },
+  green: { bg: "#d3f9d8", bgDark: "#1a3a1a", text: "#1b5e20", textDark: "#69db7c" },
+  lime: { bg: "#e9fac8", bgDark: "#2e3a1a", text: "#44700a", textDark: "#a9e34b" },
+  yellow: { bg: "#fff3bf", bgDark: "#3a351a", text: "#8a5200", textDark: "#ffd43b" },
+  orange: { bg: "#ffe8cc", bgDark: "#3a2a1a", text: "#a63508", textDark: "#ffa94d" },
 };

 export function choiceColor(color: string): CSSProperties {
@@ -0,0 +1,258 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { TextInput } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { v7 as uuid7 } from "uuid";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+const STATUS_CATEGORY_LABELS: Record<string, string> = {
+  todo: "To Do",
+  inProgress: "In Progress",
+  complete: "Complete",
+};
+const STATUS_CATEGORY_ORDER = ["todo", "inProgress", "complete"];
+
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+type ChoiceGroup = { label: string | null; choices: Choice[] };
+
+type ChoicePickerProps = {
+  property: IBaseProperty;
+  selectedIds: string[];
+  /** Multi keeps the picker open, hides picked options from the list and
+   *  shows them as removable tags instead. */
+  multiple?: boolean;
+  /** Group options under status category headings. */
+  grouped?: boolean;
+  /** Offer "Add option: <search>" when the search has no exact match. */
+  allowCreate?: boolean;
+  onToggle: (choice: Choice) => void;
+  onEscape: () => void;
+};
+
+/** Searchable choice list shared by select-like editors (modal fields; the
+ *  grid cells render the same UI and can migrate here). */
+export function ChoicePicker({
+  property,
+  selectedIds,
+  multiple = false,
+  grouped = false,
+  allowCreate = false,
+  onToggle,
+  onEscape,
+}: ChoicePickerProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const selectedChoices = choices.filter((c) => selectedSet.has(c.id));
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, []);
+
+  const groups = useMemo<ChoiceGroup[]>(() => {
+    const filtered = (
+      search
+        ? choices.filter((c) =>
+            c.name.toLowerCase().includes(search.toLowerCase()),
+          )
+        : choices
+    ).filter((c) => !multiple || !selectedSet.has(c.id));
+
+    if (!grouped) return [{ label: null, choices: filtered }];
+
+    const byCategory: Record<string, Choice[]> = {};
+    for (const choice of filtered) {
+      const cat = choice.category ?? "todo";
+      (byCategory[cat] ??= []).push(choice);
+    }
+    return STATUS_CATEGORY_ORDER.filter((key) => byCategory[key]?.length).map(
+      (key) => ({ label: STATUS_CATEGORY_LABELS[key] ?? key, choices: byCategory[key] }),
+    );
+  }, [choices, search, grouped, multiple, selectedSet]);
+
+  const flatChoices = useMemo(() => groups.flatMap((g) => g.choices), [groups]);
+  const choiceIdxMap = useMemo(() => {
+    const m = new Map<string, number>();
+    flatChoices.forEach((c, i) => m.set(c.id, i));
+    return m;
+  }, [flatChoices]);
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+  const trimmedSearch = search.trim();
+  const hasExactMatch = useMemo(
+    () =>
+      trimmedSearch.length > 0 &&
+      choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
+    [choices, trimmedSearch],
+  );
+  const showAddOption = allowCreate && trimmedSearch.length > 0 && !hasExactMatch;
+  const addOptionColor = useMemo(
+    () => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
+    [choices.length],
+  );
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      ...flatChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+      ...(showAddOption ? [{ kind: "add" as const }] : []),
+    ],
+    [flatChoices, showAddOption],
+  );
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(navItems.length, [search, showAddOption]);
+
+  const handleAddOption = useCallback(() => {
+    if (!trimmedSearch) return;
+    const newChoice: Choice = {
+      id: uuid7(),
+      name: trimmedSearch,
+      color: addOptionColor,
+    };
+    const newChoices = [...choices, newChoice];
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+      typeOptions: {
+        ...typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      },
+    });
+    onToggle(newChoice);
+    setSearch("");
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, onToggle]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onEscape();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < navItems.length) {
+          e.preventDefault();
+          const item = navItems[activeIndex];
+          if (item.kind === "choice") onToggle(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onEscape, handleNavKey, activeIndex, navItems, onToggle, handleAddOption, showAddOption],
+  );
+
+  const addOptionIdx = flatChoices.length;
+
+  return (
+    <>
+      {multiple && selectedChoices.length > 0 && (
+        <div className={cellClasses.personTagArea}>
+          {selectedChoices.map((choice) => (
+            <span
+              key={choice.id}
+              className={cellClasses.badge}
+              style={choiceColor(choice.color)}
+            >
+              {choice.name}
+              <button
+                type="button"
+                className={`${cellClasses.personTagRemove} ${cellClasses.badgeRemoveBtn}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggle(choice);
+                }}
+              >
+                <IconX size={10} />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      <TextInput
+        ref={searchRef}
+        size="xs"
+        placeholder="Search..."
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        mb={4}
+        data-autofocus
+      />
+      <div className={cellClasses.selectDropdown}>
+        {groups.map((group) => (
+          <div key={group.label ?? "all"}>
+            {group.label && (
+              <div className={cellClasses.selectCategoryLabel}>{group.label}</div>
+            )}
+            {group.choices.map((choice) => {
+              const idx = choiceIdxMap.get(choice.id) ?? -1;
+              const isSelected = !multiple && selectedSet.has(choice.id);
+              return (
+                <div
+                  key={choice.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onClick={() => onToggle(choice)}
+                >
+                  <span
+                    className={cellClasses.badge}
+                    style={choiceColor(choice.color)}
+                  >
+                    {choice.name}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+        {showAddOption && (
+          <div
+            ref={setOptionRef(addOptionIdx)}
+            className={clsx(
+              cellClasses.addOptionRow,
+              addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
+            )}
+            onMouseEnter={() => setActiveIndex(addOptionIdx)}
+            onClick={handleAddOption}
+          >
+            <span className={cellClasses.addOptionLabel}>Add option:</span>
+            <span className={cellClasses.badge} style={choiceColor(addOptionColor)}>
+              {trimmedSearch}
+            </span>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,40 @@
+import clsx from "clsx";
+import { UserRef } from "@/ee/base/types/base.types";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { BadgeOverflowList } from "@/ee/base/components/cells/badge-overflow";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type PersonReadListProps = {
+  personIds: string[];
+  users: Record<string, UserRef>;
+};
+
+export function PersonReadList({ personIds, users }: PersonReadListProps) {
+  const entries = personIds.map((id) => ({
+    id,
+    name: users[id]?.name ?? id.substring(0, 8),
+    avatarUrl: users[id]?.avatarUrl ?? "",
+  }));
+  const chips = entries.map((entry) => (
+    <span
+      key={entry.id}
+      className={clsx(cellClasses.badge, cellClasses.personChip)}
+    >
+      <CustomAvatar
+        avatarUrl={entry.avatarUrl}
+        name={entry.name}
+        size={16}
+        radius="xl"
+        style={{ flexShrink: 0 }}
+      />
+      <span className={cellClasses.personChipName}>{entry.name}</span>
+    </span>
+  ));
+  return (
+    <BadgeOverflowList
+      chips={chips}
+      measureKey={entries.map((e) => `${e.id}:${e.name}`).join("|")}
+      tooltipLabel={entries.map((e) => e.name).join(", ")}
+    />
+  );
+}
@@ -3,7 +3,6 @@ import {
  Button,
  Divider,
  Group,
-  Kbd,
  Paper,
  Stack,
  Text,
@@ -17,8 +16,9 @@ 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";
+import { useFormulaParser } from "@/ee/base/hooks/use-formula-parser";
+import type { IBaseProperty } from "@/ee/base/types/base.types";
+import classes from "@/ee/base/styles/formula.module.css";

 type Props = {
  properties: IBaseProperty[];
@@ -55,9 +55,7 @@ export function FormulaEditor({
  );
  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 (not RAF) ensures the DOM update ran before restoring cursor.
  useEffect(() => {
    if (pendingCursorRef.current === null) return;
    const pos = pendingCursorRef.current;
@@ -74,8 +72,6 @@ export function FormulaEditor({
    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 ? " " : "";
@@ -95,35 +91,46 @@ export function FormulaEditor({
    >
      <Stack gap={0}>
        <Group
-          gap={10}
+          justify="space-between"
+          wrap="nowrap"
          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)",
-            }}
+          className={classes.formulaHeaderRow}
        >
+          <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+            <div className={classes.formulaIconBadge}>
              <IconMathFunction size={14} />
            </div>
            <Text size="sm" fw={600}>
              Formula
            </Text>
            {name && (
-            <Text size="sm" c="dimmed">
+              <Text size="sm" c="dimmed" truncate>
                · {name}
              </Text>
            )}
          </Group>
+          <Group gap={8} wrap="nowrap" style={{ flexShrink: 0 }}>
+            <Button variant="subtle" size="xs" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button
+              size="xs"
+              disabled={!canSave}
+              onClick={() => {
+                if (parseState.state !== "ok") return;
+                onSave(
+                  source,
+                  parseState.ast,
+                  parseState.resultType,
+                  parseState.dependencies,
+                );
+              }}
+            >
+              Save
+            </Button>
+          </Group>
+        </Group>

        <Stack gap={6} px={14} pt={10} pb={8}>
          <FormulaInput
@@ -176,44 +183,6 @@ export function FormulaEditor({
            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>
  );
@@ -0,0 +1,48 @@
+import { FormulaEditor } from "./formula-editor";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import {
+  IBaseProperty,
+  FormulaTypeOptions,
+  TypeOptions,
+} from "@/ee/base/types/base.types";
+
+type Props = {
+  property: IBaseProperty;
+  pageId: string;
+  onClose: () => void;
+};
+
+export function FormulaPropertyEditor({ property, pageId, onClose }: Props) {
+  const { data: base } = useBaseQuery(pageId);
+  const updatePropertyMutation = useUpdatePropertyMutation();
+  const opts = property.typeOptions as FormulaTypeOptions | undefined;
+
+  return (
+    <FormulaEditor
+      properties={base?.properties ?? []}
+      editingPropertyId={property.id}
+      initialSource={opts?.source ?? ""}
+      name={property.name}
+      onCancel={onClose}
+      onSave={(source, ast, resultType, dependencies) => {
+        if (source === (opts?.source ?? "")) {
+          onClose();
+          return;
+        }
+        updatePropertyMutation.mutate({
+          propertyId: property.id,
+          pageId,
+          typeOptions: {
+            source,
+            ast,
+            resultType,
+            dependencies,
+            astVersion: 1,
+          } as TypeOptions,
+        });
+        onClose();
+      }}
+    />
+  );
+}
@@ -7,6 +7,7 @@ import {
  UnstyledButton,
 } from "@mantine/core";
 import type { FormulaFn } from "@docmost/base-formula/client";
+import classes from "@/ee/base/styles/formula.module.css";

 const CATEGORIES = ["logic", "math", "string", "date", "coercion"] as const;

@@ -63,23 +64,10 @@ export function FunctionPalette({
                  <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",
-                      }}
+                      className={classes.fnChip}
                    >
                      {fn.name}
-                      <span style={{ color: "var(--mantine-color-gray-5)" }}>
+                      <span className={classes.fnChipParens}>
                        ()
                      </span>
                    </UnstyledButton>
@@ -1,7 +1,8 @@
 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";
+import type { IBaseProperty } from "@/ee/base/types/base.types";
+import classes from "@/ee/base/styles/formula.module.css";

 export function PropertyChipRow({
  properties,
@@ -43,19 +44,7 @@ export function PropertyChipRow({
            <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",
-              }}
+              className={classes.propChip}
            >
              {p.name}
            </UnstyledButton>
@@ -1,7 +1,7 @@
 import { memo } from "react";
 import { IconPlus } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
-import classes from "@/features/base/styles/grid.module.css";
+import classes from "@/ee/base/styles/grid.module.css";

 type AddRowButtonProps = {
  onClick?: () => void;
@@ -1,5 +1,5 @@
 import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import classes from "@/features/base/styles/grid.module.css";
+import classes from "@/ee/base/styles/grid.module.css";

 type Props = {
  edge: Edge;
@@ -0,0 +1,290 @@
+import { memo, useCallback, useMemo } from "react";
+import { Cell } from "@tanstack/react-table";
+import { Popover, Tooltip } from "@mantine/core";
+import { IconArrowsDiagonal } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useAtom, useAtomValue, useSetAtom, type PrimitiveAtom } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { IBaseRow, EditingCell, FocusedCell } from "@/ee/base/types/base.types";
+import {
+  editingCellAtomFamily,
+  focusedCellAtomFamily,
+  activeFormulaEditorAtomFamily,
+  FormulaEditorTarget,
+} from "@/ee/base/atoms/base-atoms";
+import { FormulaPropertyEditor } from "@/ee/base/components/formula/formula-property-editor";
+import {
+  isSystemPropertyType,
+  getDescriptor,
+} from "@/ee/base/property-types/property-type.registry";
+import { cellValuesEqual } from "@/ee/base/components/cells/cell-value-equal";
+import { computeNextCell } from "@/ee/base/utils/grid-cell-nav";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { useRowExpand } from "@/ee/base/context/row-expand";
+import { RowNumberCell } from "./row-number-cell";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type GridCellProps = {
+  cell: Cell<IBaseRow, unknown>;
+  rowIndex: number;
+  colIndex?: number;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  pageId: string;
+};
+
+export const GridCell = memo(function GridCell({
+  cell,
+  rowIndex,
+  colIndex,
+  onCellUpdate,
+  pageId,
+}: GridCellProps) {
+  const property = cell.column.columnDef.meta?.property;
+  const isRowNumber = cell.column.id === "__row_number";
+  const isPinned = cell.column.getIsPinned();
+  const pinOffset = isPinned ? cell.column.getStart("left") : undefined;
+
+  const [editingCell, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
+  const [activeFormulaEditor, setActiveFormulaEditor] = useAtom(
+    activeFormulaEditorAtomFamily(pageId),
+  ) as unknown as [FormulaEditorTarget, (val: FormulaEditorTarget) => void];
+
+  const setFocusedCell = useSetAtom(focusedCellAtomFamily(pageId) as PrimitiveAtom<FocusedCell>);
+  const isFocused = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          focusedCellAtomFamily(pageId),
+          (fc) => fc?.rowId === cell.row.id && fc?.propertyId === property?.id,
+        ),
+      [pageId, cell.row.id, property?.id],
+    ),
+  );
+
+  const { t } = useTranslation();
+  const editable = useBaseEditable();
+  const readOnly = !editable;
+  const onExpandRow = useRowExpand();
+
+  const rowId = cell.row.id;
+  const isEditing =
+    editingCell?.rowId === rowId &&
+    editingCell?.propertyId === property?.id &&
+    (editable || property?.type === "file");
+
+  const handleDoubleClick = useCallback(() => {
+    if (!property || isRowNumber) return;
+    if (property.type === "checkbox") return;
+    if (readOnly) {
+      // Read-only: only the file cell opens (a download-only popover) so
+      // attachments stay reachable.
+      if (property.type === "file") {
+        setEditingCell({ rowId, propertyId: property.id });
+      }
+      return;
+    }
+    if (property.type === "formula") {
+      setActiveFormulaEditor({ propertyId: property.id, rowId });
+      return;
+    }
+    if (isSystemPropertyType(property.type)) return;
+    setEditingCell({ rowId, propertyId: property.id });
+  }, [property, isRowNumber, rowId, readOnly, setEditingCell, setActiveFormulaEditor]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!property) return;
+      setFocusedCell({ rowId, propertyId: property.id });
+      (e.currentTarget.closest('[role="grid"]') as HTMLElement | null)?.focus({
+        preventScroll: true,
+      });
+    },
+    [property, rowId, setFocusedCell],
+  );
+
+  const cellReadOnly = property
+    ? readOnly || isSystemPropertyType(property.type)
+    : false;
+
+  const closeFormulaEditor = useCallback(
+    () => setActiveFormulaEditor(null),
+    [setActiveFormulaEditor],
+  );
+
+  const handleValueChange = useCallback(
+    (value: unknown) => {
+      if (!property) return;
+      if (!cellValuesEqual(value, cell.getValue())) {
+        onCellUpdate(rowId, property.id, value);
+      }
+    },
+    [property, rowId, cell, onCellUpdate],
+  );
+
+  const handleCommit = useCallback(
+    (value: unknown) => {
+      handleValueChange(value);
+      setEditingCell(null);
+    },
+    [handleValueChange, setEditingCell],
+  );
+
+  const handleCancel = useCallback(() => {
+    setEditingCell(null);
+  }, [setEditingCell]);
+
+  const handleTabNavigate = useCallback(
+    (shiftKey: boolean) => {
+      if (!property) return;
+      const tableInstance = cell.getContext().table;
+      const colIds = tableInstance
+        .getVisibleLeafColumns()
+        .filter((c) => c.id !== "__row_number")
+        .map((c) => c.id);
+      const rowIds = tableInstance.getRowModel().rows.map((r) => r.id);
+      const next = computeNextCell(
+        rowIds,
+        colIds,
+        { rowId, propertyId: property.id },
+        0,
+        shiftKey ? -1 : 1,
+        true,
+      );
+      if (next) {
+        setEditingCell(next);
+        setFocusedCell(next);
+      }
+    },
+    [cell, rowId, property, setEditingCell, setFocusedCell],
+  );
+
+  if (isRowNumber) {
+    return (
+      <RowNumberCell
+        rowId={rowId}
+        rowIndex={rowIndex}
+        isPinned={Boolean(isPinned)}
+        pinOffset={pinOffset}
+        pageId={pageId}
+      />
+    );
+  }
+
+  if (!property) return null;
+
+  const CellComponent = getDescriptor(property.type)?.cellComponent;
+  if (!CellComponent) return null;
+
+  const value = cell.getValue();
+
+  const cellInner = (
+    <div
+      id={`base-cell-${rowId}-${property.id}`}
+      role="gridcell"
+      aria-colindex={colIndex != null ? colIndex + 1 : undefined}
+      aria-readonly={cellReadOnly || undefined}
+      className={`${classes.cell} ${isPinned ? classes.cellPinned : ""} ${isEditing ? classes.cellEditing : ""} ${isFocused && !isEditing ? classes.cellFocused : ""} ${property.isPrimary ? classes.primaryCell : ""}`}
+      style={
+        isPinned
+          ? ({ "--pin-offset": `${pinOffset}px` } as React.CSSProperties)
+          : undefined
+      }
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+    >
+      <CellComponent
+        value={value}
+        property={property}
+        rowId={rowId}
+        isEditing={isEditing}
+        readOnly={readOnly}
+        onCommit={handleCommit}
+        onValueChange={handleValueChange}
+        onCancel={handleCancel}
+        onTabNavigate={handleTabNavigate}
+      />
+      {property.isPrimary && onExpandRow && !isEditing && (
+        <span className={classes.rowExpandAnchor}>
+          <Tooltip label={t("Expand")} position="bottom" openDelay={400}>
+            <button
+              type="button"
+              tabIndex={-1}
+              className={classes.rowExpandButton}
+              onClick={() => onExpandRow(rowId)}
+              onDoubleClick={(e) => e.stopPropagation()}
+              aria-label={t("Expand row {{number}}", { number: rowIndex + 1 })}
+            >
+              <IconArrowsDiagonal size={13} />
+            </button>
+          </Tooltip>
+        </span>
+      )}
+    </div>
+  );
+
+  if (property.type !== "formula") return cellInner;
+
+  const formulaEditorOpen =
+    activeFormulaEditor?.propertyId === property.id &&
+    activeFormulaEditor?.rowId === rowId;
+
+  return (
+    <Popover
+      opened={formulaEditorOpen}
+      onChange={(o) => {
+        if (!o) closeFormulaEditor();
+      }}
+      position="bottom-start"
+      width={460}
+      shadow="md"
+      withinPortal
+      closeOnClickOutside
+      closeOnEscape={false}
+      trapFocus
+    >
+      <Popover.Target>{cellInner}</Popover.Target>
+      <Popover.Dropdown
+        p={0}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === "Escape") {
+            e.preventDefault();
+            closeFormulaEditor();
+          }
+        }}
+        style={{ maxWidth: "calc(100vw - 32px)" }}
+      >
+        {formulaEditorOpen && (
+          <FormulaPropertyEditor
+            property={property}
+            pageId={pageId}
+            onClose={closeFormulaEditor}
+          />
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+},
+gridCellPropsEqual);
+
+// Cell instances are re-created whenever the table data identity changes;
+// compare by coordinates + value so unchanged cells skip re-rendering.
+function gridCellPropsEqual(prev: GridCellProps, next: GridCellProps) {
+  if (
+    prev.rowIndex !== next.rowIndex ||
+    prev.colIndex !== next.colIndex ||
+    prev.pageId !== next.pageId ||
+    prev.onCellUpdate !== next.onCellUpdate
+  ) {
+    return false;
+  }
+  if (prev.cell === next.cell) return true;
+  return (
+    prev.cell.row.id === next.cell.row.id &&
+    prev.cell.column.id === next.cell.column.id &&
+    prev.cell.column.columnDef.meta?.property ===
+      next.cell.column.columnDef.meta?.property &&
+    cellValuesEqual(prev.cell.getValue(), next.cell.getValue())
+  );
+}
@@ -0,0 +1,551 @@
+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, useSetAtom, type PrimitiveAtom } from "jotai";
+import {
+  IBaseRow,
+  IBaseProperty,
+  EditingCell,
+  FocusedCell,
+  CellCoord,
+} from "@/ee/base/types/base.types";
+import {
+  editingCellAtomFamily,
+  focusedCellAtomFamily,
+  activeFormulaEditorAtomFamily,
+  pendingTypeInsertAtom,
+  type FormulaEditorTarget,
+  type PendingTypeInsert,
+} from "@/ee/base/atoms/base-atoms";
+import { isSystemPropertyType } from "@/ee/base/property-types/property-type.registry";
+import { useTranslation } from "react-i18next";
+import { useColumnResize } from "@/ee/base/hooks/use-column-resize";
+import { useGridKeyboardNav } from "@/ee/base/hooks/use-grid-keyboard-nav";
+import { useRowAutoScroll } from "@/ee/base/hooks/use-row-autoscroll";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useDeleteSelectedRows } from "@/ee/base/hooks/use-delete-selected-rows";
+import { useHorizontalScrollSync } from "@/ee/base/hooks/use-horizontal-scroll-sync";
+import { useGridAutoScroll } from "@/ee/base/hooks/use-grid-autoscroll";
+import { GridHeader } from "./grid-header";
+import { GridRow } from "./grid-row";
+import { AddRowButton } from "./add-row-button";
+import { GridGhostRows } from "./grid-ghost-rows";
+import { SelectionActionBar } from "./selection-action-bar";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { useRowExpand } from "@/ee/base/context/row-expand";
+import { GridRowOrderProvider } from "@/ee/base/context/grid-row-order";
+import classes from "@/ee/base/styles/grid.module.css";
+
+// Row box = 36px cell content + 1px row border-bottom. CSS pins .row to
+// var(--base-row-height) from this constant so the rendered height can
+// never drift from the virtualizer estimate.
+const ROW_HEIGHT = 37;
+const OVERSCAN = 25;
+
+const GRID_ROOT_STYLE = {
+  "--base-row-height": `${ROW_HEIGHT}px`,
+} as React.CSSProperties;
+
+const ADD_COLUMN_TRACK_WIDTH = 40;
+
+// Hoisted to module scope to avoid allocating a fresh options object on
+// every GridContainer render. The function refs from virtual-core are
+// stable; only the wrapper object identity matters for downstream
+// memoization inside useVirtualizer.
+const WINDOW_SCROLL_OPTIONS = {
+  observeElementRect: observeWindowRect as never,
+  observeElementOffset: observeWindowOffset as never,
+  scrollToFn: windowScroll as never,
+} as const;
+
+type GridContainerProps = {
+  table: Table<IBaseRow>;
+  properties: IBaseProperty[];
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  onAddRow?: () => void;
+  pageId: string;
+  onColumnReorder?: (columnId: string, finishIndex: number) => void;
+  onResizeEnd?: () => void;
+  onRowReorder?: (rowId: string, targetRowId: string, position: "above" | "below") => void;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  onFetchNextPage?: () => void;
+  /** true when a view filter with at least one condition is active; suppresses ghost rows */
+  isFiltered?: boolean;
+  /**
+   * What the virtualizer measures and what the StickyBand sticks to.
+   * Standalone passes a ref into the .tableScrollport wrapper; inline
+   * passes `window` since the page itself is the scroll container.
+   */
+  scrollElement: HTMLElement | Window | null;
+  /**
+   * Rendered inside `[role=grid]` but ABOVE the sticky band, so it scrolls
+   * with the content while only the column-header row stays pinned. In
+   * inline mode BaseTable injects banner + toolbar here; standalone passes
+   * null (they render outside the scrollport instead).
+   */
+  aboveBand?: React.ReactNode;
+};
+
+export function GridContainer({
+  table,
+  properties,
+  onCellUpdate,
+  onAddRow,
+  pageId,
+  onColumnReorder,
+  onResizeEnd,
+  onRowReorder,
+  hasNextPage,
+  isFetchingNextPage,
+  onFetchNextPage,
+  isFiltered,
+  scrollElement,
+  aboveBand,
+}: GridContainerProps) {
+  const headerRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const rowsContainerRef = useRef<HTMLDivElement>(null);
+  useHorizontalScrollSync(bodyRef, headerRef);
+  useGridAutoScroll(bodyRef, pageId);
+  useRowAutoScroll(scrollElement, pageId);
+  const lastTriggeredRowsLenRef = useRef(0);
+  const rows = table.getRowModel().rows;
+  const rowIds = useMemo(() => rows.map((r) => r.id), [rows]);
+  const rowIdsRef = useRef(rowIds);
+  rowIdsRef.current = rowIds;
+  const getOrderedRowIds = useCallback(() => rowIdsRef.current, []);
+  const editable = useBaseEditable();
+  const onExpandRow = useRowExpand();
+
+  const [editingCell, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
+  const editingCellRef = useRef(editingCell);
+  editingCellRef.current = editingCell;
+
+  const { selectionCount, clear: clearSelection, toggle: toggleRow } = useRowSelection(pageId);
+  const { deleteSelected } = useDeleteSelectedRows(pageId);
+
+  const { t } = useTranslation();
+
+  const [focusedCell, setFocusedCell] = useAtom(focusedCellAtomFamily(pageId)) as unknown as [FocusedCell, (val: FocusedCell) => void];
+  const focusedCellRef = useRef(focusedCell);
+  focusedCellRef.current = focusedCell;
+  const [, setActiveFormulaEditor] = useAtom(activeFormulaEditorAtomFamily(pageId)) as unknown as [FormulaEditorTarget, (val: FormulaEditorTarget) => void];
+  const setPendingTypeInsert = useSetAtom(pendingTypeInsertAtom as PrimitiveAtom<PendingTypeInsert>);
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      // Only act while an inline cell editor is open. Popover-based cells
+      // (select/status/person/page/date/file) self-dismiss via Mantine onChange.
+      // This handler's sole job is to commit an inline input editor
+      // (text/number/url/email) when the user clicks elsewhere, since clicking
+      // a non-focusable cell does not natively blur the input. Gating on
+      // editingCell also stops it from stealing focus from unrelated inputs.
+      if (!editingCellRef.current) return;
+      const target = e.target as HTMLElement;
+      if (target.closest(`.${classes.headerCell}`)) return;
+      if (target.closest("[role=\"dialog\"]")) return;
+      if (target.closest("[role=\"listbox\"]")) return;
+      if (target.closest("[data-mantine-shared-portal-node]")) return;
+      if (target.closest(`.${classes.cellEditing}`)) return;
+      // Blurring the input fires its onBlur -> commitOnce -> handleCommit,
+      // which also clears editingCell. No setEditingCell(null) needed here.
+      const active = document.activeElement as HTMLElement | null;
+      if (active && active !== document.body && typeof active.blur === "function") {
+        active.blur();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, []);
+
+  useColumnResize(table, onResizeEnd ?? (() => {}));
+
+
+  // When the scroll container is the window (inline embed mode), the default
+  // Element-mode observers read scrollTop/scrollLeft, which Window does not
+  // have. Swap in the Window-mode observers so the virtualizer reads
+  // scrollY/scrollX instead. The Element-narrowed type is satisfied by an
+  // upcast on getScrollElement; virtual-core's runtime accepts Window when
+  // the observers do.
+  const isWindowScroll =
+    typeof window !== "undefined" && scrollElement === window;
+  const windowScrollOptions = isWindowScroll ? WINDOW_SCROLL_OPTIONS : {};
+
+  // Rows are positioned inside .rowsContainer, which sits below the sticky
+  // band (and aboveBand content) within the scroll content. scrollMargin =
+  // the container's offset from the scroll content top, in both modes, so
+  // virtual indexing lines up with what is actually on screen.
+  const [scrollMargin, setScrollMargin] = useState(0);
+  useLayoutEffect(() => {
+    const el = rowsContainerRef.current;
+    if (!el || !scrollElement) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      if (isWindowScroll) {
+        setScrollMargin(rect.top + window.scrollY);
+      } else {
+        const scrollport = scrollElement as HTMLElement;
+        setScrollMargin(
+          rect.top -
+            scrollport.getBoundingClientRect().top +
+            scrollport.scrollTop,
+        );
+      }
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    // Outer page reflows (sidebar collapse, viewport resize) can move the
+    // grid without resizing it, so listen to window resize too.
+    window.addEventListener("resize", update);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [isWindowScroll, scrollElement]);
+
+  // Stable row-id keys: the direct-update element cache and measurement
+  // cache are keyed by item key, so index keys would go stale whenever rows
+  // are inserted or reordered above the viewport.
+  const getItemKey = useCallback(
+    (index: number) => rowIds[index] ?? index,
+    [rowIds],
+  );
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollElement as Element | null,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+    scrollMargin,
+    getItemKey,
+    directDomUpdates: true,
+    // 'position' (writes `top`), not 'transform': a transform on the row
+    // creates a containing block that breaks the position:sticky pinned
+    // cells inside it.
+    directDomUpdatesMode: "position",
+    ...windowScrollOptions,
+    // virtual-core bug: on first attach _willUpdate calls
+    // _scrollToOffset(getScrollOffset()), which returns undefined when no
+    // initialOffset is provided. windowScroll then computes undefined + 0 = NaN,
+    // browsers coerce it to 0, and scrollY snaps to 0 when the embed mounts
+    // mid-page. Seeding initialOffset to the current scroll position makes
+    // the first _scrollToOffset a no-op.
+    initialOffset: isWindowScroll
+      ? () => window.scrollY
+      : () =>
+          scrollElement instanceof HTMLElement ? scrollElement.scrollTop : 0,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  const pinnedLeftWidth = useCallback(
+    () =>
+      table
+        .getVisibleLeafColumns()
+        .filter((c) => c.getIsPinned() === "left")
+        .reduce((sum, c) => sum + c.getSize(), 0),
+    [table],
+  );
+
+  const scrollCellIntoView = useCallback(
+    (coord: CellCoord, rowIndex: number) => {
+      if (rowIndex >= 0) virtualizer.scrollToIndex(rowIndex, { align: "auto" });
+      requestAnimationFrame(() => {
+        const scroller = bodyRef.current;
+        const el = document.getElementById(
+          `base-cell-${coord.rowId}-${coord.propertyId}`,
+        );
+        if (!scroller || !el) return;
+        const cellRect = el.getBoundingClientRect();
+        const scRect = scroller.getBoundingClientRect();
+        const pinned = pinnedLeftWidth();
+        if (cellRect.left < scRect.left + pinned) {
+          scroller.scrollLeft -= scRect.left + pinned - cellRect.left;
+        } else if (cellRect.right > scRect.right) {
+          scroller.scrollLeft += cellRect.right - scRect.right;
+        }
+      });
+    },
+    [virtualizer, pinnedLeftWidth],
+  );
+
+  const openEditor = useCallback(
+    (coord: CellCoord) => {
+      const prop = properties.find((p) => p.id === coord.propertyId);
+      if (!prop) return;
+      if (prop.type === "checkbox") {
+        if (!editable) return;
+        const current = table.getRow(coord.rowId, true)?.getValue(coord.propertyId);
+        onCellUpdate(coord.rowId, coord.propertyId, !current);
+        return;
+      }
+      if (!editable) {
+        if (prop.type === "file") setEditingCell(coord);
+        return;
+      }
+      if (prop.type === "formula") {
+        setActiveFormulaEditor({ propertyId: coord.propertyId, rowId: coord.rowId });
+        return;
+      }
+      if (isSystemPropertyType(prop.type)) return;
+      setEditingCell(coord);
+    },
+    [properties, editable, table, onCellUpdate, setEditingCell, setActiveFormulaEditor],
+  );
+
+  const clearCell = useCallback(
+    (coord: CellCoord) => {
+      if (!editable) return;
+      const prop = properties.find((p) => p.id === coord.propertyId);
+      if (!prop || isSystemPropertyType(prop.type)) return;
+      onCellUpdate(coord.rowId, coord.propertyId, null);
+    },
+    [editable, properties, onCellUpdate],
+  );
+
+  const beginTypeToEdit = useCallback(
+    (coord: CellCoord, char: string) => {
+      if (!editable) return;
+      const prop = properties.find((p) => p.id === coord.propertyId);
+      if (!prop || isSystemPropertyType(prop.type) || prop.type === "checkbox") return;
+      if (["text", "number", "url", "email"].includes(prop.type)) {
+        setPendingTypeInsert({ rowId: coord.rowId, propertyId: coord.propertyId, char });
+        setEditingCell(coord);
+      } else {
+        openEditor(coord);
+      }
+    },
+    [editable, properties, setPendingTypeInsert, setEditingCell, openEditor],
+  );
+
+  const toggleRowSelection = useCallback(
+    (rowId: string) => {
+      toggleRow(rowId, {
+        shiftKey: false,
+        rowIndex: rowIdsRef.current.indexOf(rowId),
+        orderedRowIds: rowIdsRef.current,
+      });
+    },
+    [toggleRow],
+  );
+
+  const expandRow = useCallback(
+    (rowId: string) => {
+      onExpandRow?.(rowId);
+    },
+    [onExpandRow],
+  );
+
+  const prevEditingRef = useRef(editingCell);
+  useEffect(() => {
+    const prev = prevEditingRef.current;
+    prevEditingRef.current = editingCell;
+    if (prev && !editingCell) {
+      if (!focusedCellRef.current) setFocusedCell(prev);
+      const grid = bodyRef.current;
+      const active = document.activeElement;
+      if (grid && active && !grid.contains(active)) {
+        grid.focus({ preventScroll: true });
+      }
+    }
+  }, [editingCell, setFocusedCell]);
+
+  useEffect(() => {
+    const fc = focusedCellRef.current;
+    if (!fc) return;
+    const rowOk = rowIds.includes(fc.rowId);
+    const colOk = table.getVisibleLeafColumns().some((c) => c.id === fc.propertyId);
+    if (!rowOk || !colOk) setFocusedCell(null);
+  }, [rowIds, table.getState().columnVisibility, table.getState().columnOrder, setFocusedCell]);
+
+  const handleGridFocus = useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      if (e.target !== e.currentTarget) return;
+      if (editingCellRef.current || focusedCellRef.current) return;
+      const firstRow = rowIdsRef.current[0];
+      const firstCol = table
+        .getVisibleLeafColumns()
+        .find((c) => c.id !== "__row_number")?.id;
+      if (firstRow && firstCol) setFocusedCell({ rowId: firstRow, propertyId: firstCol });
+    },
+    [table, setFocusedCell],
+  );
+
+  useGridKeyboardNav({
+    table,
+    properties,
+    containerRef: bodyRef,
+    focusedCell,
+    setFocusedCell,
+    editingCell,
+    setEditingCell,
+    openEditor,
+    clearCell,
+    beginTypeToEdit,
+    scrollCellIntoView,
+    selectionCount,
+    clearSelection,
+    deleteSelected,
+    toggleRowSelection,
+    expandRow,
+  });
+
+  const activeCell = editingCell ?? focusedCell;
+  const activeDescendantId = activeCell
+    ? `base-cell-${activeCell.rowId}-${activeCell.propertyId}`
+    : undefined;
+
+  useEffect(() => {
+    if (!hasNextPage || isFetchingNextPage || !onFetchNextPage) return;
+    const lastItem = virtualItems[virtualItems.length - 1];
+    if (!lastItem) return;
+    if (lastItem.index < rows.length - OVERSCAN * 2) return;
+    if (rows.length <= lastTriggeredRowsLenRef.current) return;
+    lastTriggeredRowsLenRef.current = rows.length;
+    onFetchNextPage();
+  }, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
+
+  useEffect(() => {
+    // When the row set shrinks (filter/sort/view change) or resets to zero,
+    // un-gate the trigger so the first page can trigger the next fetch correctly.
+    if (rows.length === 0 || rows.length < lastTriggeredRowsLenRef.current) {
+      lastTriggeredRowsLenRef.current = 0;
+    }
+  }, [rows.length]);
+
+
+  const gridTemplateColumns = useMemo(() => {
+    const visibleColumns = table.getVisibleLeafColumns();
+    const columnWidths = visibleColumns.map((col) => `${col.getSize()}px`);
+    return (
+      columnWidths.join(" ") +
+      (pageId && editable ? ` ${ADD_COLUMN_TRACK_WIDTH}px` : "")
+    );
+  }, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, pageId, editable]);
+
+  const totalColumnsWidth = useMemo(
+    () =>
+      table
+        .getVisibleLeafColumns()
+        .reduce((sum, col) => sum + col.getSize(), 0) +
+      (pageId && editable ? ADD_COLUMN_TRACK_WIDTH : 0),
+    [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, pageId, editable],
+  );
+
+  const showGhostRows = rows.length === 0 && !isFiltered;
+  // Append a flexible trailing track so every row spans the full width.
+  // minmax(0, 1fr) collapses to 0 when columns overflow the viewport and
+  // fills remaining width otherwise. The header grid keeps the plain template.
+  const bodyGridTemplateColumns = `${gridTemplateColumns} minmax(0, 1fr)`;
+
+  const handleAddRow = useCallback(() => {
+    onAddRow?.();
+  }, [onAddRow]);
+
+  const handlePropertyCreated = useCallback(() => {
+    // Wait for React to re-render with the new column, then scroll to it
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        bodyRef.current?.scrollTo({
+          left: bodyRef.current.scrollWidth,
+          behavior: "smooth",
+        });
+      });
+    });
+  }, []);
+
+  const getColumnOrder = useCallback(
+    () => table.getState().columnOrder,
+    [table],
+  );
+
+  return (
+    <div style={GRID_ROOT_STYLE}>
+      {aboveBand}
+      <div className={classes.stickyBand}>
+        <div
+          className={classes.headerGrid}
+          ref={headerRef}
+          style={{ gridTemplateColumns }}
+          role="row"
+        >
+          <GridHeader
+            table={table}
+            pageId={pageId}
+            columnOrder={table.getState().columnOrder}
+            columnVisibility={table.getState().columnVisibility}
+            properties={properties}
+            loadedRowIds={rowIds}
+            onPropertyCreated={handlePropertyCreated}
+            getColumnOrder={getColumnOrder}
+            onColumnReorder={onColumnReorder}
+          />
+        </div>
+      </div>
+        <GridRowOrderProvider value={getOrderedRowIds}>
+          <div
+            className={classes.bodyGrid}
+            ref={bodyRef}
+            tabIndex={0}
+            role="grid"
+            aria-label={t("Base table")}
+            aria-rowcount={rows.length}
+            aria-colcount={table.getVisibleLeafColumns().length}
+            aria-multiselectable
+            aria-activedescendant={activeDescendantId}
+            onFocus={handleGridFocus}
+            style={
+              {
+                "--base-grid-cols": bodyGridTemplateColumns,
+              } as React.CSSProperties
+            }
+          >
+            <div
+              className={classes.rowsContainer}
+              ref={(node) => {
+                rowsContainerRef.current = node;
+                virtualizer.containerRef(node);
+              }}
+              role="rowgroup"
+              style={{ width: totalColumnsWidth, minWidth: "100%" }}
+            >
+              {virtualItems.map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                if (!row) return null;
+                return (
+                  <GridRow
+                    key={row.id}
+                    row={row}
+                    rowIndex={virtualRow.index}
+                    measureRef={virtualizer.measureElement}
+                    onCellUpdate={onCellUpdate}
+                    properties={properties}
+                    columnVisibility={table.getState().columnVisibility}
+                    columnOrder={table.getState().columnOrder}
+                    pageId={pageId}
+                    onRowReorder={onRowReorder}
+                  />
+                );
+              })}
+            </div>
+            {showGhostRows && (
+              <GridGhostRows
+                count={3}
+                columnCount={table.getVisibleLeafColumns().length}
+                onCreate={editable ? handleAddRow : undefined}
+              />
+            )}
+            {editable && <AddRowButton onClick={handleAddRow} />}
+            {pageId && <SelectionActionBar pageId={pageId} />}
+          </div>
+        </GridRowOrderProvider>
+    </div>
+  );
+}
@@ -0,0 +1,32 @@
+import classes from "@/ee/base/styles/grid.module.css";
+
+type GridGhostRowsProps = {
+  /** how many placeholder rows to render */
+  count: number;
+  /** number of visible leaf columns (incl. the row-number column) */
+  columnCount: number;
+  /** create the first real row (clicking any ghost cell); omit when read-only */
+  onCreate?: () => void;
+};
+
+// Empty-state ghost rows shown when no data rows exist and no filter is active.
+// Clicking any ghost row creates the first real row; cells align via subgrid.
+export function GridGhostRows({ count, columnCount, onCreate }: GridGhostRowsProps) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, rowIdx) => (
+        <div
+          key={rowIdx}
+          className={`${classes.row} ${classes.ghostRow}`}
+          role={onCreate ? "button" : undefined}
+          aria-label={onCreate ? "Create first row" : undefined}
+          onClick={onCreate}
+        >
+          {Array.from({ length: columnCount }).map((_, colIdx) => (
+            <div key={colIdx} className={classes.cell} aria-hidden="true" />
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}
@@ -16,53 +16,25 @@ import {
 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 { IBaseRow, IBaseProperty, EditingCell } from "@/ee/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";
+  activeFormulaEditorAtomFamily,
+  FormulaEditorTarget,
+} from "@/ee/base/atoms/base-atoms";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { PropertyMenuContent } from "@/ee/base/components/property/property-menu";
+import { FormulaPropertyEditor } from "@/ee/base/components/formula/formula-property-editor";
 import { RowNumberHeaderCell } from "./row-number-header-cell";
 import { BaseDropEdgeIndicator } from "./base-drop-edge-indicator";
-import { useRowSelection } from "@/features/base/hooks/use-row-selection";
-import classes from "@/features/base/styles/grid.module.css";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import classes from "@/ee/base/styles/grid.module.css";

-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,
-};
+export const COLUMN_DRAG_TYPE = "base-column";

 type GridHeaderCellProps = {
  header: Header<IBaseRow, unknown>;
@@ -85,8 +57,12 @@ export const GridHeaderCell = memo(function GridHeaderCell({
  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 { selectionCount, toggleAll } = useRowSelection(pageId);
  const hasSelection = selectionCount > 0;
+  const editable = useBaseEditable();
+  const isHeaderInteractive = editable && !!property && !isRowNumber;
+  const isRowNumberHeaderInteractive =
+    isRowNumber && editable && loadedRowIds.length > 0;

  const [activePropertyMenu, setActivePropertyMenu] = useAtom(activePropertyMenuAtomFamily(pageId)) as unknown as [string | null, (val: string | null) => void];
  const menuOpened = activePropertyMenu === header.column.id;
@@ -94,22 +70,27 @@ export const GridHeaderCell = memo(function GridHeaderCell({
  const [propertyMenuDirty, setPropertyMenuDirty] = useAtom(propertyMenuDirtyAtomFamily(pageId)) as unknown as [boolean, (val: boolean) => void];
  const [closeRequest, setCloseRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number, (val: number) => void];
  const [, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
+  const [activeFormulaEditor, setActiveFormulaEditor] = useAtom(
+    activeFormulaEditorAtomFamily(pageId),
+  ) as unknown as [FormulaEditorTarget, (val: FormulaEditorTarget) => void];

  const [isDragging, setIsDragging] = useState(false);
  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);

+  const resizeIntentRef = useRef(false);
+
  const handleDirtyChange = useCallback((dirty: boolean) => {
    setPropertyMenuDirty(dirty);
  }, [setPropertyMenuDirty]);

-  const isSortableDisabled = isRowNumber || !!isPinned;
+  const isSortableDisabled = isRowNumber || !!isPinned || !editable;

  // 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.
+  // (activeView, base) via persistViewConfig, and their identity changes on
+  // every cache invalidation (every WS-driven collab refresh). Holding the
+  // callback in a ref keeps it out of the DnD effect's dep array so we don't
+  // tear down and re-register the pragmatic-dnd adapter on every header cell
+  // each time another user edits the base.
  const onColumnReorderRef = useRef(onColumnReorder);
  useLayoutEffect(() => {
    onColumnReorderRef.current = onColumnReorder;
@@ -121,9 +102,11 @@ export const GridHeaderCell = memo(function GridHeaderCell({
    return combine(
      draggable({
        element: el,
+        canDrag: () => !resizeIntentRef.current,
        getInitialData: () => ({
          type: COLUMN_DRAG_TYPE,
          columnId: header.column.id,
+          pageId,
        }),
        onDragStart: () => setIsDragging(true),
        onDrop: () => setIsDragging(false),
@@ -164,45 +147,96 @@ export const GridHeaderCell = memo(function GridHeaderCell({
  }, [header.column.id, isSortableDisabled, getColumnOrder]);

  const handleHeaderClick = useCallback(() => {
+    if (resizeIntentRef.current) {
+      resizeIntentRef.current = false;
+      return;
+    }
    setEditingCell(null);
+    if (!editable) return;
    if (!isRowNumber && property && !isDragging) {
      if (propertyMenuDirty && !menuOpened) return;
      setActivePropertyMenu(menuOpened ? null : header.column.id);
    }
-  }, [isRowNumber, property, isDragging, header.column.id, menuOpened, propertyMenuDirty, setActivePropertyMenu, setEditingCell]);
+  }, [editable, isRowNumber, property, isDragging, header.column.id, menuOpened, propertyMenuDirty, setActivePropertyMenu, setEditingCell]);

  const handleMenuClose = useCallback(() => {
    setActivePropertyMenu(null);
  }, [setActivePropertyMenu]);

+  const handleEditFormula = useCallback(() => {
+    if (!property) return;
+    handleMenuClose();
+    setActiveFormulaEditor({ propertyId: property.id, rowId: null });
+  }, [property, handleMenuClose, setActiveFormulaEditor]);
+
+  const closeFormulaEditor = useCallback(
+    () => setActiveFormulaEditor(null),
+    [setActiveFormulaEditor],
+  );
+
+  const formulaEditorOpen =
+    !!property &&
+    activeFormulaEditor?.propertyId === property.id &&
+    activeFormulaEditor?.rowId === null;
+
+  // A closed property menu can never hold unsaved changes. Saving a rename
+  // must clear propertyMenuDirty; otherwise it stays stuck true and
+  // handleHeaderClick refuses to reopen any property menu, making the menu
+  // appear dead after the first save. Reset only on the open-to-closed
+  // transition so a sibling header cell can't clear the flag while another
+  // column's menu is mid-edit.
+  const wasMenuOpenedRef = useRef(menuOpened);
  useEffect(() => {
-    if (!menuOpened) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key !== "Escape") return;
+    if (wasMenuOpenedRef.current && !menuOpened) {
+      setPropertyMenuDirty(false);
+    }
+    wasMenuOpenedRef.current = menuOpened;
+  }, [menuOpened, setPropertyMenuDirty]);
+
+  const handleMenuOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) return; // opening is driven by the atom, not Mantine
      if (propertyMenuDirty) {
+        // Veto the close and route through the discard-confirm flow.
        setCloseRequest(closeRequest + 1);
      } else {
        handleMenuClose();
      }
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [menuOpened, propertyMenuDirty, closeRequest, setCloseRequest, handleMenuClose]);
+    },
+    [propertyMenuDirty, closeRequest, setCloseRequest, handleMenuClose],
+  );

-  const TypeIcon = property ? typeIcons[property.type] : undefined;
+  const TypeIcon = property ? getDescriptor(property.type)?.icon : undefined;

  return (
    <div
      ref={cellRef}
+      role="columnheader"
+      tabIndex={isHeaderInteractive || isRowNumberHeaderInteractive ? 0 : undefined}
+      aria-haspopup={isHeaderInteractive ? "menu" : undefined}
+      aria-label={isRowNumberHeaderInteractive ? t("Select all loaded rows") : undefined}
      className={`${classes.headerCell} ${isPinned ? classes.headerCellPinned : ""} ${hasSelection ? classes.hasSelection : ""}`}
      style={{
        ...(isPinned
          ? ({ "--pin-offset": `${pinOffset}px` } as React.CSSProperties)
          : {}),
-        ...(isRowNumber ? {} : { cursor: "pointer" }),
+        ...(isRowNumber || !editable ? {} : { cursor: "pointer" }),
        opacity: isDragging ? 0.4 : 1,
      }}
+      onPointerDown={() => {
+        resizeIntentRef.current = false;
+      }}
      onClick={handleHeaderClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (isRowNumber) {
+            if (isRowNumberHeaderInteractive) toggleAll(loadedRowIds);
+          } else {
+            handleHeaderClick();
+          }
+        }
+      }}
      data-dragging={isDragging || undefined}
    >
      {isRowNumber ? (
@@ -222,7 +256,7 @@ export const GridHeaderCell = memo(function GridHeaderCell({
          )}
        </div>
      )}
-      {header.column.getCanResize() && (
+      {editable && header.column.getCanResize() && (
        <div
          className={`${classes.resizeHandle} ${
            header.column.getIsResizing() ? classes.resizeHandleActive : ""
@@ -235,23 +269,30 @@ export const GridHeaderCell = memo(function GridHeaderCell({
            e.stopPropagation();
            header.getResizeHandler()(e);
          }}
-          onPointerDown={(e) => e.stopPropagation()}
+          onPointerDown={(e) => {
+            resizeIntentRef.current = true;
+            e.stopPropagation();
+          }}
          onClick={(e) => e.stopPropagation()}
        />
      )}
      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
-      {property && !isRowNumber && (
+      {editable && property && !isRowNumber && (
        <Popover
          opened={menuOpened}
+          onChange={handleMenuOpenChange}
          onClose={handleMenuClose}
          position="bottom-start"
          shadow="md"
          width={260}
+          trapFocus
+          returnFocus
          withinPortal
-          closeOnClickOutside={false}
+          closeOnClickOutside
+          closeOnEscape
        >
          <Popover.Target>
-            <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} />
+            <div className={classes.popoverAnchor} />
          </Popover.Target>
          <Popover.Dropdown
            p={0}
@@ -263,11 +304,53 @@ export const GridHeaderCell = memo(function GridHeaderCell({
              opened={menuOpened}
              onClose={handleMenuClose}
              onDirtyChange={handleDirtyChange}
+              onEditFormula={
+                property.type === "formula" ? handleEditFormula : undefined
+              }
              pageId={pageId}
            />
          </Popover.Dropdown>
        </Popover>
      )}
+      {property && !isRowNumber && property.type === "formula" && (
+        <Popover
+          opened={formulaEditorOpen}
+          onChange={(o) => {
+            if (!o) closeFormulaEditor();
+          }}
+          position="bottom-start"
+          width={460}
+          shadow="md"
+          withinPortal
+          closeOnClickOutside
+          closeOnEscape={false}
+          trapFocus
+        >
+          <Popover.Target>
+            <div className={classes.popoverAnchor} />
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === "Escape") {
+                e.preventDefault();
+                closeFormulaEditor();
+              }
+            }}
+            style={{ maxWidth: "calc(100vw - 32px)" }}
+          >
+            {formulaEditorOpen && (
+              <FormulaPropertyEditor
+                property={property}
+                pageId={pageId}
+                onClose={closeFormulaEditor}
+              />
+            )}
+          </Popover.Dropdown>
+        </Popover>
+      )}
    </div>
  );
 });
@@ -1,9 +1,10 @@
 import { memo, useMemo } from "react";
 import { Table, ColumnOrderState, VisibilityState } from "@tanstack/react-table";
-import { IBaseRow, IBaseProperty } from "@/features/base/types/base.types";
+import { IBaseRow, IBaseProperty } from "@/ee/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";
+import { CreatePropertyPopover } from "@/ee/base/components/property/create-property-popover";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import classes from "@/ee/base/styles/grid.module.css";

 type GridHeaderProps = {
  table: Table<IBaseRow>;
@@ -31,6 +32,7 @@ export const GridHeader = memo(function GridHeader({
  onColumnReorder,
 }: GridHeaderProps) {
  const headerGroups = table.getHeaderGroups();
+  const editable = useBaseEditable();
  const propertyById = useMemo(() => {
    const map = new Map<string, IBaseProperty>();
    for (const p of properties) map.set(p.id, p);
@@ -50,11 +52,13 @@ export const GridHeader = memo(function GridHeader({
          onColumnReorder={onColumnReorder}
        />
      ))}
+      {editable && (
        <CreatePropertyPopover
          pageId={pageId}
          properties={properties}
          onPropertyCreated={onPropertyCreated}
        />
+      )}
    </div>
  );
 });
@@ -0,0 +1,198 @@
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Row, VisibilityState } from "@tanstack/react-table";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
+import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { GridCell } from "./grid-cell";
+import classes from "@/ee/base/styles/grid.module.css";
+
+export const ROW_DRAG_TYPE = "base-row";
+
+type GridRowProps = {
+  row: Row<IBaseRow>;
+  rowIndex: number;
+  measureRef: (node: Element | null) => void;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  onRowReorder?: (
+    rowId: string,
+    targetRowId: string,
+    position: "above" | "below",
+  ) => void;
+  properties: IBaseProperty[];
+  columnVisibility: VisibilityState;
+  columnOrder: string[];
+  pageId: string;
+};
+
+export const GridRow = memo(function GridRow({
+  row,
+  rowIndex,
+  measureRef,
+  onCellUpdate,
+  onRowReorder,
+  pageId,
+}: GridRowProps) {
+  const rowId = row.id;
+  const isSelected = useRowSelection(pageId).isSelected(rowId);
+
+  const rowRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const setRowEl = useCallback(
+    (node: HTMLDivElement | null) => {
+      rowRef.current = node;
+      measureRef(node);
+    },
+    [measureRef],
+  );
+
+  // onRowReorder ultimately depends on React Query result objects (activeView,
+  // base) via persistViewConfig, and its identity changes on every WS-driven
+  // cache invalidation. Holding it in a ref keeps it out of the DnD effect's
+  // dep array so we don't tear down and re-register every row's pragmatic-dnd
+  // adapter each time another user edits the base. Same pattern as the column
+  // header's onColumnReorderRef.
+  const onRowReorderRef = useRef(onRowReorder);
+  useLayoutEffect(() => {
+    onRowReorderRef.current = onRowReorder;
+  });
+
+  useEffect(() => {
+    const rowEl = rowRef.current;
+    if (!rowEl || !onRowReorder) return;
+    // The whole row is the draggable element (full-row native preview).
+    // dragHandle limits initiation to the grip, leaving cell clicks and
+    // inline editing untouched.
+    const handle = rowEl.querySelector<HTMLElement>(
+      `.${classes.rowNumberDragHandle}`,
+    );
+    if (!handle) return;
+    return combine(
+      draggable({
+        element: rowEl,
+        dragHandle: handle,
+        getInitialData: () => ({ type: ROW_DRAG_TYPE, rowId, pageId }),
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          // Native preview of the full-width sticky subgrid row rasterizes
+          // garbled (it pulls in surrounding page paint, e.g. the sidebar).
+          // Render a compact card that clones just the title cell instead.
+          const titleCell =
+            rowEl.querySelector<HTMLElement>(`.${classes.primaryCell}`) ??
+            rowEl.querySelector<HTMLElement>(`.${classes.cell}`);
+          if (!titleCell) return;
+          const width = titleCell.getBoundingClientRect().width;
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: pointerOutsideOfPreview({ x: "12px", y: "8px" }),
+            render: ({ container }) => {
+              const card = document.createElement("div");
+              card.className = classes.rowDragPreview;
+              card.style.width = `${width}px`;
+              const clone = titleCell.cloneNode(true) as HTMLElement;
+              clone.style.position = "static";
+              clone.style.left = "auto";
+              clone.style.width = "100%";
+              clone.style.opacity = "1";
+              clone.style.borderRight = "none";
+              card.appendChild(clone);
+              container.appendChild(card);
+            },
+          });
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element: rowEl,
+        canDrop: ({ source }) =>
+          source.data.type === ROW_DRAG_TYPE &&
+          source.data.pageId === pageId &&
+          source.data.rowId !== rowId,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { rowId },
+            { input, element, allowedEdges: ["top", "bottom"] },
+          ),
+        onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const edge = extractClosestEdge(self.data);
+          if (!edge) return;
+          onRowReorderRef.current?.(
+            source.data.rowId as string,
+            rowId,
+            edge === "top" ? "above" : "below",
+          );
+          triggerPostMoveFlash(rowEl);
+          liveRegion.announce("Moved row");
+        },
+      }),
+    );
+    // onRowReorder is read through onRowReorderRef; only its presence gates
+    // registration, and that does not change across a row's mounted life.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowId, pageId]);
+
+  const dropIndicatorClass = closestEdge
+    ? closestEdge === "top"
+      ? classes.rowDropAbove
+      : classes.rowDropBelow
+    : "";
+
+  return (
+    <div
+      ref={setRowEl}
+      data-index={rowIndex}
+      className={`${classes.row} ${classes.virtualRow} ${isDragging ? classes.rowDragging : ""} ${dropIndicatorClass} ${isSelected ? classes.rowSelected : ""}`}
+      role="row"
+      aria-rowindex={rowIndex + 1}
+      aria-selected={isSelected}
+    >
+      {row.getVisibleCells().map((cell, colIndex) => (
+        <GridCell
+          key={cell.id}
+          cell={cell}
+          rowIndex={rowIndex}
+          colIndex={colIndex}
+          onCellUpdate={onCellUpdate}
+          pageId={pageId}
+        />
+      ))}
+    </div>
+  );
+},
+gridRowPropsEqual);
+
+// row compares by row.original: React Query structural sharing keeps
+// unchanged rows reference-stable, while TanStack re-instantiates Row/Cell
+// wrappers on every data change. properties/columnVisibility/columnOrder are
+// layout busters — schema or column-state changes must re-render rows.
+function gridRowPropsEqual(prev: GridRowProps, next: GridRowProps) {
+  return (
+    prev.row.id === next.row.id &&
+    prev.row.original === next.row.original &&
+    prev.rowIndex === next.rowIndex &&
+    prev.pageId === next.pageId &&
+    prev.onCellUpdate === next.onCellUpdate &&
+    prev.onRowReorder === next.onRowReorder &&
+    prev.measureRef === next.measureRef &&
+    prev.properties === next.properties &&
+    prev.columnVisibility === next.columnVisibility &&
+    prev.columnOrder === next.columnOrder
+  );
+}
@@ -0,0 +1,102 @@
+import { memo, useCallback, useMemo } from "react";
+import { Checkbox } from "@mantine/core";
+import { IconGripVertical } from "@tabler/icons-react";
+import { useAtomValue, useSetAtom, type PrimitiveAtom } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { focusedCellAtomFamily } from "@/ee/base/atoms/base-atoms";
+import { FocusedCell } from "@/ee/base/types/base.types";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { useGridRowOrder } from "@/ee/base/context/grid-row-order";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type RowNumberCellProps = {
+  rowId: string;
+  rowIndex: number;
+  isPinned: boolean;
+  pinOffset?: number;
+  pageId: string;
+};
+
+export const RowNumberCell = memo(function RowNumberCell({
+  rowId,
+  rowIndex,
+  isPinned,
+  pinOffset,
+  pageId,
+}: RowNumberCellProps) {
+  const { isSelected, toggle } = useRowSelection(pageId);
+  const selected = isSelected(rowId);
+  const editable = useBaseEditable();
+  const getOrderedRowIds = useGridRowOrder();
+
+  const setFocusedCell = useSetAtom(
+    focusedCellAtomFamily(pageId) as PrimitiveAtom<FocusedCell>,
+  );
+  const isFocused = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          focusedCellAtomFamily(pageId),
+          (fc) => fc?.rowId === rowId && fc?.propertyId === "__row_number",
+        ),
+      [pageId, rowId],
+    ),
+  );
+
+  const handleCellClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      setFocusedCell({ rowId, propertyId: "__row_number" });
+      (e.currentTarget.closest('[role="grid"]') as HTMLElement | null)?.focus({
+        preventScroll: true,
+      });
+    },
+    [rowId, setFocusedCell],
+  );
+
+  const handleCheckboxChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const nativeEvent = e.nativeEvent as MouseEvent;
+      toggle(rowId, {
+        shiftKey: nativeEvent.shiftKey === true,
+        rowIndex,
+        orderedRowIds: getOrderedRowIds(),
+      });
+    },
+    [rowId, rowIndex, getOrderedRowIds, toggle],
+  );
+
+  return (
+    <div
+      id={`base-cell-${rowId}-__row_number`}
+      role="gridcell"
+      className={`${classes.cell} ${classes.rowNumberCell} ${isPinned ? classes.cellPinned : ""} ${isFocused ? classes.cellFocused : ""}`}
+      style={
+        isPinned
+          ? ({ "--pin-offset": `${pinOffset ?? 0}px` } as React.CSSProperties)
+          : undefined
+      }
+      onClick={handleCellClick}
+    >
+      <div className={classes.rowNumberCellInner}>
+        {editable && (
+          <span className={classes.rowNumberDragHandle} aria-label="Drag row">
+            <IconGripVertical size={12} />
+          </span>
+        )}
+        {editable && (
+          <span className={classes.rowNumberCheckbox}>
+            <Checkbox
+              size="xs"
+              checked={selected}
+              onChange={handleCheckboxChange}
+              aria-label="Select row"
+              tabIndex={-1}
+            />
+          </span>
+        )}
+        <span className={classes.rowNumberIndex}>{rowIndex + 1}</span>
+      </div>
+    </div>
+  );
+});
@@ -1,7 +1,7 @@
 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";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import classes from "@/ee/base/styles/grid.module.css";

 type RowNumberHeaderCellProps = {
  loadedRowIds: string[];
@@ -42,6 +42,7 @@ export const RowNumberHeaderCell = memo(function RowNumberHeaderCell({
            indeterminate={indeterminate}
            onChange={() => toggleAll(loadedRowIds)}
            aria-label="Select all loaded rows"
+            tabIndex={-1}
          />
        </Tooltip>
      </span>
@@ -2,9 +2,9 @@ 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";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useDeleteSelectedRows } from "@/ee/base/hooks/use-delete-selected-rows";
+import classes from "@/ee/base/styles/grid.module.css";

 type SelectionActionBarProps = {
  pageId: string;
@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { 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 { IBase, IBaseRow, IBaseView, FilterGroup, KANBAN_CARD_DRAG_TYPE, KANBAN_COLUMN_DRAG_TYPE } from "@/ee/base/types/base.types";
+import { useKanbanColumns } from "@/ee/base/hooks/use-kanban-columns";
+import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
+import { useKanbanMoveCardMutation } from "@/ee/base/queries/base-row-query";
+import { buildColumnFilter } from "@/ee/base/services/kanban-column-filter";
+import { resolveCardDrop } from "@/ee/base/hooks/use-kanban-card-drop";
+import { useKanbanBoardAutoScroll } from "@/ee/base/hooks/use-kanban-autoscroll";
+import { useRowDetailModal } from "@/ee/base/hooks/use-row-detail-modal";
+import { KanbanColumn } from "@/ee/base/components/kanban/kanban-column";
+import { KanbanEmptyState } from "@/ee/base/components/kanban/kanban-empty-state";
+import classes from "@/ee/base/styles/kanban.module.css";
+
+type BaseKanbanProps = {
+  base: IBase;
+  view: IBaseView;
+  pageId: string;
+  embedded?: boolean;
+  editable: boolean;
+  viewFilter: FilterGroup | undefined;
+};
+
+export function BaseKanban({ base, view, pageId, embedded, editable, viewFilter }: BaseKanbanProps) {
+  const { t } = useTranslation();
+  const { groupByPropertyId, columns, hasValidGroupBy } = useKanbanColumns(base, view);
+  const updateView = useUpdateViewMutation();
+  const moveCard = useKanbanMoveCardMutation();
+  const { openRow } = useRowDetailModal(pageId);
+
+  const openRowRef = useRef(openRow);
+  useLayoutEffect(() => { openRowRef.current = openRow; });
+  const handleOpenRow = useCallback((id: string) => openRowRef.current(id), []);
+
+  const boardRef = useRef<HTMLDivElement>(null);
+  useKanbanBoardAutoScroll(boardRef, pageId);
+
+  const cardRefs = useRef<Map<string, { columnKey: string; el: HTMLDivElement }>>(new Map());
+
+  const registerCardRef = useCallback((rowId: string, columnKey: string, el: HTMLDivElement | null) => {
+    if (el) {
+      cardRefs.current.set(rowId, { columnKey, el });
+    } else {
+      cardRefs.current.delete(rowId);
+    }
+  }, []);
+
+  const columnRows = useRef<Map<string, IBaseRow[]>>(new Map());
+
+  const registerColumnRows = useCallback((key: string, rows: IBaseRow[]) => {
+    columnRows.current.set(key, rows);
+  }, []);
+
+  const hideColumn = useCallback(
+    (key: string) => {
+      const next = Array.from(new Set([...(view.config?.hiddenChoiceIds ?? []), key]));
+      updateView.mutate({ viewId: view.id, pageId, config: { hiddenChoiceIds: next } });
+    },
+    [updateView, view.id, view.config?.hiddenChoiceIds, pageId],
+  );
+
+  const onCardDropRef = useRef<(args: {
+    draggedRowId: string;
+    sourceColumnKey: string;
+    targetColumnKey: string;
+    targetRowId: string | null;
+    edge: Edge | null;
+  }) => void>(() => {});
+  useLayoutEffect(() => {
+    onCardDropRef.current = ({ draggedRowId, sourceColumnKey, targetColumnKey, targetRowId, edge }) => {
+      if (!groupByPropertyId) return;
+      const targetColumnRows = columnRows.current.get(targetColumnKey) ?? [];
+      const result = resolveCardDrop({
+        draggedRowId,
+        targetRowId,
+        edge: edge === "left" || edge === "right" ? null : edge,
+        targetColumnKey,
+        sourceColumnKey,
+        targetColumnRows,
+      });
+      if (!result) return;
+      const sourceFilter = buildColumnFilter(viewFilter, groupByPropertyId, sourceColumnKey);
+      const destFilter = buildColumnFilter(viewFilter, groupByPropertyId, targetColumnKey);
+      moveCard.mutate({
+        pageId,
+        rowId: draggedRowId,
+        sourceColumnFilter: sourceFilter,
+        destColumnFilter: destFilter,
+        columnChanged: result.columnChanged,
+        groupByPropertyId,
+        destChoiceValue: result.destChoiceValue,
+        position: result.position,
+      });
+      const el = cardRefs.current.get(draggedRowId)?.el;
+      if (el) triggerPostMoveFlash(el);
+      const targetColumnName = columns.find((c) => c.key === targetColumnKey)?.name ?? "";
+      liveRegion.announce(t("Moved card to {{column}}", { column: targetColumnName }));
+    };
+  });
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) =>
+        source.data?.type === KANBAN_CARD_DRAG_TYPE && source.data?.pageId === pageId,
+      onDrop: ({ location, source }) => {
+        const target = location.current.dropTargets[0];
+        if (!target) return;
+        const draggedRowId = source.data.rowId as string;
+        const sourceColumnKey = source.data.columnKey as string;
+        const targetColumnKey = target.data.columnKey as string;
+        const isColumnBody = target.data.isColumnBody === true;
+        const targetRowId = isColumnBody ? null : (target.data.rowId as string);
+        const edge = isColumnBody ? null : extractClosestEdge(target.data);
+        onCardDropRef.current({ draggedRowId, sourceColumnKey, targetColumnKey, targetRowId, edge });
+      },
+    });
+  }, [pageId]);
+
+  const onColumnDropRef = useRef<(args: {
+    sourceColumnKey: string;
+    targetColumnKey: string;
+    edge: Edge | null;
+  }) => void>(() => {});
+  useLayoutEffect(() => {
+    onColumnDropRef.current = ({ sourceColumnKey, targetColumnKey, edge }) => {
+      const fullOrder: string[] = view.config?.choiceOrder?.length
+        ? view.config.choiceOrder
+        : columns.map((c) => c.key);
+
+      const startIndex = fullOrder.indexOf(sourceColumnKey);
+      const indexOfTarget = fullOrder.indexOf(targetColumnKey);
+
+      if (startIndex === -1 || indexOfTarget === -1) {
+        const visibleKeys = columns.map((c) => c.key);
+        const visStart = visibleKeys.indexOf(sourceColumnKey);
+        const visTarget = visibleKeys.indexOf(targetColumnKey);
+        if (visStart === -1 || visTarget === -1) return;
+        const finishIndex = getReorderDestinationIndex({
+          startIndex: visStart,
+          indexOfTarget: visTarget,
+          closestEdgeOfTarget: edge,
+          axis: "horizontal",
+        });
+        if (finishIndex === visStart) return;
+        const reorderedVisible = reorder({ list: visibleKeys, startIndex: visStart, finishIndex });
+        updateView.mutate({ viewId: view.id, pageId, config: { choiceOrder: [...reorderedVisible, ...(view.config?.hiddenChoiceIds ?? [])] } });
+      } else {
+        const finishIndex = getReorderDestinationIndex({
+          startIndex,
+          indexOfTarget,
+          closestEdgeOfTarget: edge,
+          axis: "horizontal",
+        });
+        if (finishIndex === startIndex) return;
+        const newChoiceOrder = reorder({ list: fullOrder, startIndex, finishIndex });
+        updateView.mutate({ viewId: view.id, pageId, config: { choiceOrder: newChoiceOrder } });
+      }
+
+      const targetColumnName = columns.find((c) => c.key === targetColumnKey)?.name ?? "";
+      liveRegion.announce(t("Moved column to {{column}}", { column: targetColumnName }));
+    };
+  });
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) =>
+        source.data?.type === KANBAN_COLUMN_DRAG_TYPE && source.data?.pageId === pageId,
+      onDrop: ({ location, source }) => {
+        const target = location.current.dropTargets[0];
+        if (!target) return;
+        const sourceColumnKey = source.data.columnKey as string;
+        const targetColumnKey = target.data.columnKey as string;
+        const edge = extractClosestEdge(target.data);
+        onColumnDropRef.current({ sourceColumnKey, targetColumnKey, edge });
+      },
+    });
+  }, [pageId]);
+
+  if (!hasValidGroupBy) {
+    return <KanbanEmptyState base={base} view={view} pageId={pageId} editable={editable} />;
+  }
+
+  return (
+    <div
+      ref={boardRef}
+      className={clsx(classes.board, embedded ? classes.boardEmbed : classes.boardFullPage)}
+    >
+      {columns.map((column) => (
+        <KanbanColumn
+          key={column.key}
+          base={base}
+          view={view}
+          pageId={pageId}
+          column={column}
+          viewFilter={viewFilter}
+          groupByPropertyId={groupByPropertyId!}
+          canEdit={editable}
+          onOpenRow={handleOpenRow}
+          onHide={hideColumn}
+          registerCardRef={registerCardRef}
+          registerColumnRows={registerColumnRows}
+        />
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,339 @@
+import { Text, Badge, Tooltip, Group } from "@mantine/core";
+import { IconCheck, IconFileDescription } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { sanitizeUrl } from "@docmost/editor-ext";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  NumberTypeOptions,
+  DateTypeOptions,
+  isFormulaErrorCell,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoiceBadge } from "@/ee/base/components/cells/choice-badge";
+import { BadgeOverflowList } from "@/ee/base/components/cells/badge-overflow";
+import { PersonReadList } from "@/ee/base/components/cells/person-read-list";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { useReferenceStore, useResolvePage } from "@/ee/base/reference/reference-store";
+import {
+  formatNumber,
+  formatDateDisplay,
+  formatTimestamp,
+  formatLongTextPreview,
+} from "@/ee/base/formatters/cell-formatters";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
+import { FileValue } from "@/ee/base/components/cells/cell-file";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CardFieldProps = {
+  property: IBaseProperty;
+  value: unknown;
+  pageId: string;
+};
+
+export function CardField({ property, value, pageId }: CardFieldProps) {
+  if (value === null || value === undefined || value === "") return null;
+  if (Array.isArray(value) && value.length === 0) return null;
+
+  switch (property.type) {
+    case "text":
+      return <TextField value={value} />;
+    case "longText":
+      return <LongTextField value={value} />;
+    case "number":
+      return <NumberField value={value} property={property} />;
+    case "select":
+    case "status":
+      return <SelectField value={value} property={property} />;
+    case "multiSelect":
+      return <MultiSelectField value={value} property={property} />;
+    case "date":
+      return <DateField value={value} property={property} />;
+    case "createdAt":
+    case "lastEditedAt":
+      return <TimestampField value={value} />;
+    case "person":
+      return <PersonField value={value} pageId={pageId} />;
+    case "lastEditedBy":
+      return <LastEditedByField value={value} pageId={pageId} />;
+    case "file":
+      return <FileField value={value} />;
+    case "page":
+      return <PageField value={value} basePageId={pageId} propertyPageId={property.pageId} />;
+    case "checkbox":
+      return <CheckboxField value={value} />;
+    case "url":
+      return <UrlField value={value} />;
+    case "email":
+      return <EmailField value={value} />;
+    case "formula":
+      return <FormulaField value={value} property={property} />;
+    default:
+      return (
+        <Text size="xs" lineClamp={1}>
+          {String(value)}
+        </Text>
+      );
+  }
+}
+
+function TextField({ value }: { value: unknown }) {
+  const text = typeof value === "string" ? value : String(value);
+  if (!text) return null;
+  return (
+    <Text size="sm" lineClamp={2}>
+      {text}
+    </Text>
+  );
+}
+
+function LongTextField({ value }: { value: unknown }) {
+  const preview = formatLongTextPreview(typeof value === "string" ? value : undefined);
+  if (!preview) return null;
+  return (
+    <Text size="xs" c="dimmed" lineClamp={2}>
+      {preview}
+    </Text>
+  );
+}
+
+function NumberField({ value, property }: { value: unknown; property: IBaseProperty }) {
+  const num = typeof value === "number" ? value : null;
+  if (num === null) return null;
+  const formatted = formatNumber(num, property.typeOptions as NumberTypeOptions | undefined);
+  if (!formatted) return null;
+  return <Text size="sm">{formatted}</Text>;
+}
+
+function SelectField({ value, property }: { value: unknown; property: IBaseProperty }) {
+  const choices = (property.typeOptions as SelectTypeOptions | undefined)?.choices ?? [];
+  const selectedId = typeof value === "string" ? value : null;
+  const choice = choices.find((c) => c.id === selectedId);
+  if (!choice) return null;
+  return (
+    <ChoiceBadge
+      name={choice.name}
+      style={{ ...choiceColor(choice.color), alignSelf: "flex-start" }}
+    />
+  );
+}
+
+function MultiSelectField({ value, property }: { value: unknown; property: IBaseProperty }) {
+  const choices = (property.typeOptions as SelectTypeOptions | undefined)?.choices ?? [];
+  const selectedIds = Array.isArray(value) ? (value as string[]) : [];
+  const selectedChoices = choices.filter((c) => selectedIds.includes(c.id));
+  if (selectedChoices.length === 0) return null;
+  const chips = selectedChoices.map((choice) => (
+    <span key={choice.id} className={cellClasses.badge} style={choiceColor(choice.color)}>
+      {choice.name}
+    </span>
+  ));
+  return (
+    <BadgeOverflowList
+      chips={chips}
+      measureKey={selectedChoices.map((c) => `${c.id}:${c.name}`).join("|")}
+      tooltipLabel={selectedChoices.map((c) => c.name).join(", ")}
+    />
+  );
+}
+
+function DateField({ value, property }: { value: unknown; property: IBaseProperty }) {
+  const dateStr = typeof value === "string" ? value : null;
+  const formatted = formatDateDisplay(dateStr, property.typeOptions as DateTypeOptions | undefined);
+  if (!formatted) return null;
+  return (
+    <Text size="xs" c="dimmed">
+      {formatted}
+    </Text>
+  );
+}
+
+function TimestampField({ value }: { value: unknown }) {
+  const formatted = formatTimestamp(typeof value === "string" ? value : null);
+  if (!formatted) return null;
+  return (
+    <Text size="xs" c="dimmed">
+      {formatted}
+    </Text>
+  );
+}
+
+function PersonField({ value, pageId }: { value: unknown; pageId: string }) {
+  const store = useReferenceStore(pageId);
+  const personIds = Array.isArray(value)
+    ? (value as string[])
+    : typeof value === "string"
+      ? [value]
+      : [];
+  if (personIds.length === 0) return null;
+  return <PersonReadList personIds={personIds} users={store.users} />;
+}
+
+function LastEditedByField({ value, pageId }: { value: unknown; pageId: string }) {
+  const userId = typeof value === "string" ? value : null;
+  const store = useReferenceStore(pageId);
+  if (!userId) return null;
+  const user = store.users[userId] ?? null;
+  const name = user?.name ?? userId.substring(0, 8);
+  return (
+    <Group gap={6} wrap="nowrap" style={{ overflow: "hidden" }}>
+      <CustomAvatar avatarUrl={user?.avatarUrl ?? ""} name={name} size={20} radius="xl" />
+      <Tooltip label={name} withinPortal openDelay={400} disabled={!name}>
+        <Text size="xs" truncate>
+          {name}
+        </Text>
+      </Tooltip>
+    </Group>
+  );
+}
+
+function FileField({ value }: { value: unknown }) {
+  const files = Array.isArray(value)
+    ? (value as FileValue[]).filter((f) => f && typeof f === "object" && "id" in f && "fileName" in f)
+    : [];
+  if (files.length === 0) return null;
+  const maxVisible = 2;
+  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}>
+          {file.fileName}
+        </span>
+      ))}
+      {overflow > 0 && <span className={cellClasses.overflowCount}>+{overflow}</span>}
+    </div>
+  );
+}
+
+function PageField({
+  value,
+  basePageId,
+  propertyPageId,
+}: {
+  value: unknown;
+  basePageId: string;
+  propertyPageId: string;
+}) {
+  const { t } = useTranslation();
+  const pageId = typeof value === "string" && value.length > 0 ? value : null;
+  const resolvedPage = useResolvePage(propertyPageId, pageId);
+
+  if (!pageId) return null;
+  if (resolvedPage === undefined) return null;
+
+  if (resolvedPage === null) {
+    return (
+      <span className={cellClasses.pageMissing}>
+        <IconFileDescription size={14} />
+        <span>Page not found</span>
+      </span>
+    );
+  }
+
+  const title = getPageTitle(resolvedPage.title, undefined, t);
+  const spaceSlug = resolvedPage.space?.slug ?? "";
+  const url = buildPageUrl(spaceSlug, resolvedPage.slugId, title);
+
+  return (
+    <Tooltip label={title} withinPortal openDelay={400} disabled={!title}>
+      <Link
+        to={url}
+        className={cellClasses.pagePill}
+        onClick={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
+        {resolvedPage.icon ? (
+          <span className={cellClasses.pagePillIcon}>{resolvedPage.icon}</span>
+        ) : (
+          <IconFileDescription size={14} className={cellClasses.pagePillIconFallback} />
+        )}
+        <span className={cellClasses.pagePillText}>{title}</span>
+      </Link>
+    </Tooltip>
+  );
+}
+
+function CheckboxField({ value }: { value: unknown }) {
+  if (value !== true) return null;
+  return <IconCheck size={14} />;
+}
+
+function UrlField({ value }: { value: unknown }) {
+  const displayValue = typeof value === "string" ? value : "";
+  if (!displayValue) return null;
+  const safeHref = sanitizeUrl(displayValue);
+  if (!safeHref) {
+    return (
+      <Text size="xs" lineClamp={1}>
+        {displayValue}
+      </Text>
+    );
+  }
+  return (
+    <Tooltip label={displayValue} multiline withinPortal openDelay={400} maw={420}>
+      <a
+        className={cellClasses.urlLink}
+        href={safeHref}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={(e) => e.stopPropagation()}
+        style={{ fontSize: "var(--mantine-font-size-xs)" }}
+      >
+        {displayValue}
+      </a>
+    </Tooltip>
+  );
+}
+
+function EmailField({ value }: { value: unknown }) {
+  const displayValue = typeof value === "string" ? value : "";
+  if (!displayValue) return null;
+  return (
+    <Tooltip label={displayValue} multiline withinPortal openDelay={400} maw={420}>
+      <a
+        className={cellClasses.emailLink}
+        href={`mailto:${displayValue}`}
+        onClick={(e) => e.stopPropagation()}
+        style={{ fontSize: "var(--mantine-font-size-xs)" }}
+      >
+        {displayValue}
+      </a>
+    </Tooltip>
+  );
+}
+
+function FormulaField({ value, property }: { value: unknown; property: IBaseProperty }) {
+  if (isFormulaErrorCell(value)) {
+    return (
+      <Tooltip label={`${value.__err}: ${value.msg}`} withinPortal>
+        <Badge color="red" variant="light" size="sm">
+          #ERROR
+        </Badge>
+      </Tooltip>
+    );
+  }
+
+  const opts = (property.typeOptions ?? {}) as { resultType?: string };
+  const resultType = opts.resultType ?? "null";
+
+  if (resultType === "number") {
+    return <NumberField value={value} property={property} />;
+  }
+  if (resultType === "boolean") {
+    return <CheckboxField value={value} />;
+  }
+  if (resultType === "date") {
+    return <DateField value={value} property={property} />;
+  }
+
+  const text = typeof value === "string" ? value : value != null ? String(value) : null;
+  if (!text) return null;
+  return (
+    <Text size="sm" lineClamp={2}>
+      {text}
+    </Text>
+  );
+}
@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+import { IconPlus } from "@tabler/icons-react";
+import classes from "@/ee/base/styles/kanban.module.css";
+
+type KanbanAddCardButtonProps = {
+  onAddCard: () => void;
+};
+
+export function KanbanAddCardButton({ onAddCard }: KanbanAddCardButtonProps) {
+  const { t } = useTranslation();
+  return (
+    <div
+      className={classes.addCard}
+      role="button"
+      tabIndex={0}
+      onClick={onAddCard}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onAddCard();
+        }
+      }}
+    >
+      <IconPlus size={16} />
+      {t("New row")}
+    </div>
+  );
+}
@@ -0,0 +1,251 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Popover, Switch, Stack, Text, Group, UnstyledButton, ScrollArea } from "@mantine/core";
+import { IconGripVertical, type IconLetterT } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { IBase, IBaseProperty, IBaseView } from "@/ee/base/types/base.types";
+import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
+import { propertyTypes } from "@/ee/base/property-types/property-type.registry";
+import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+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 cellClasses from "@/ee/base/styles/cells.module.css";
+import propClasses from "@/ee/base/styles/property.module.css";
+
+const DRAG_TYPE = "base-card-property";
+
+type KanbanCardPropertiesProps = {
+  opened: boolean;
+  onClose: () => void;
+  base: IBase;
+  view: IBaseView;
+  pageId: string;
+  children: React.ReactNode;
+};
+
+export function KanbanCardProperties({
+  opened,
+  onClose,
+  base,
+  view,
+  pageId,
+  children,
+}: KanbanCardPropertiesProps) {
+  const { t } = useTranslation();
+  const updateView = useUpdateViewMutation();
+
+  const nonPrimaryProperties = base.properties.filter((p) => !p.isPrimary);
+  const visibleIds = view.config?.visiblePropertyIds ?? [];
+
+  const savedOrder = view.config?.propertyOrder ?? [];
+  const orderedProperties = [
+    ...savedOrder
+      .map((id) => nonPrimaryProperties.find((p) => p.id === id))
+      .filter((p): p is IBaseProperty => p !== undefined),
+    ...nonPrimaryProperties.filter((p) => !savedOrder.includes(p.id)),
+  ];
+
+  const primaryProperty = base.properties.find((p) => p.isPrimary);
+  const PrimaryIcon = primaryProperty
+    ? propertyTypes.find((pt) => pt.type === primaryProperty.type)?.icon
+    : undefined;
+
+  const handleToggle = useCallback(
+    (propertyId: string, checked: boolean) => {
+      const next = checked
+        ? [...visibleIds, propertyId]
+        : visibleIds.filter((id) => id !== propertyId);
+      updateView.mutate({ viewId: view.id, pageId, config: { visiblePropertyIds: next } });
+    },
+    [updateView, view.id, visibleIds, pageId],
+  );
+
+  const handleReorder = useCallback(
+    (activeId: string, targetId: string, edge: Edge) => {
+      const startIndex = orderedProperties.findIndex((p) => p.id === activeId);
+      const indexOfTarget = orderedProperties.findIndex((p) => p.id === targetId);
+      if (startIndex === -1 || indexOfTarget === -1) return;
+      const finishIndex = getReorderDestinationIndex({
+        startIndex,
+        indexOfTarget,
+        closestEdgeOfTarget: edge,
+        axis: "vertical",
+      });
+      if (finishIndex === startIndex) return;
+      const reordered = reorder({ list: orderedProperties, startIndex, finishIndex });
+      updateView.mutate({
+        viewId: view.id,
+        pageId,
+        config: { propertyOrder: reordered.map((p) => p.id) },
+      });
+    },
+    [orderedProperties, updateView, view.id, pageId],
+  );
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={(o) => {
+        if (!o) onClose();
+      }}
+      onClose={onClose}
+      position="bottom-end"
+      shadow="md"
+      width={260}
+      trapFocus
+      closeOnEscape
+      closeOnClickOutside
+      withinPortal
+    >
+      <Popover.Target>{children}</Popover.Target>
+      <Popover.Dropdown p="xs">
+        <Stack gap={4}>
+          <Group justify="space-between" px={4} py={2}>
+            <Text size="xs" fw={600} c="dimmed">
+              {t("Card properties")}
+            </Text>
+          </Group>
+          <ScrollArea.Autosize mah="min(60vh, 420px)" scrollbarSize={6} offsetScrollbars>
+          <Stack gap={0}>
+            {primaryProperty && (
+              <div className={cellClasses.menuItem} style={{ paddingLeft: 4, cursor: "default" }}>
+                <div className={propClasses.dragHandle} style={{ visibility: "hidden" }}>
+                  <IconGripVertical size={14} />
+                </div>
+                <Group gap={8} wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
+                  {PrimaryIcon && <PrimaryIcon size={14} style={{ flexShrink: 0 }} />}
+                  <Text size="sm" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                    {primaryProperty.name}
+                  </Text>
+                </Group>
+                <Switch
+                  size="xs"
+                  checked
+                  disabled
+                  onChange={() => {}}
+                  styles={{ track: { cursor: "default" } }}
+                />
+              </div>
+            )}
+            {orderedProperties.map((p) => {
+              const isVisible = visibleIds.includes(p.id);
+              const typeConfig = propertyTypes.find((pt) => pt.type === p.type);
+              const TypeIcon = typeConfig?.icon;
+              return (
+                <SortablePropertyRow
+                  key={p.id}
+                  property={p}
+                  isVisible={isVisible}
+                  TypeIcon={TypeIcon}
+                  onToggle={handleToggle}
+                  onReorder={handleReorder}
+                />
+              );
+            })}
+          </Stack>
+          </ScrollArea.Autosize>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
+
+type SortablePropertyRowProps = {
+  property: IBaseProperty;
+  isVisible: boolean;
+  TypeIcon: typeof IconLetterT | undefined;
+  onToggle: (propertyId: string, checked: boolean) => void;
+  onReorder: (activeId: string, targetId: string, edge: Edge) => void;
+};
+
+function SortablePropertyRow({
+  property,
+  isVisible,
+  TypeIcon,
+  onToggle,
+  onReorder,
+}: SortablePropertyRowProps) {
+  const rowRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLDivElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const onReorderRef = useRef(onReorder);
+  useLayoutEffect(() => {
+    onReorderRef.current = onReorder;
+  });
+
+  useEffect(() => {
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+    return combine(
+      draggable({
+        element: row,
+        dragHandle: handle,
+        getInitialData: () => ({ type: DRAG_TYPE, propertyId: property.id }),
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element: row,
+        canDrop: ({ source }) =>
+          source.data.type === DRAG_TYPE && source.data.propertyId !== property.id,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { propertyId: property.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.propertyId as string, property.id, edge);
+        },
+      }),
+    );
+  }, [property.id]);
+
+  return (
+    <div
+      ref={rowRef}
+      style={{ position: "relative", opacity: isDragging ? 0.4 : 1 }}
+    >
+      <UnstyledButton
+        className={cellClasses.menuItem}
+        onClick={() => onToggle(property.id, !isVisible)}
+        style={{ paddingLeft: 4 }}
+      >
+        <div ref={handleRef} className={propClasses.dragHandle} onClick={(e) => e.stopPropagation()}>
+          <IconGripVertical size={14} style={{ opacity: 0.4 }} />
+        </div>
+        <Group gap={8} wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
+          {TypeIcon && <TypeIcon size={14} style={{ flexShrink: 0 }} />}
+          <Text size="sm" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+            {property.name}
+          </Text>
+        </Group>
+        <Switch
+          size="xs"
+          checked={isVisible}
+          onChange={() => {}}
+          onClick={(e) => e.stopPropagation()}
+          styles={{ track: { cursor: "pointer" } }}
+        />
+      </UnstyledButton>
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+    </div>
+  );
+}
@@ -0,0 +1,85 @@
+import { forwardRef, useCallback, useRef } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { IBase, IBaseRow, IBaseView } from "@/ee/base/types/base.types";
+import { CardField } from "@/ee/base/components/kanban/card-field/card-field";
+import { useKanbanCardDnd } from "@/ee/base/hooks/use-kanban-card-dnd";
+import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+import classes from "@/ee/base/styles/kanban.module.css";
+
+type KanbanCardProps = {
+  base: IBase;
+  view: IBaseView;
+  row: IBaseRow;
+  columnKey: string;
+  onOpen: (rowId: string) => void;
+};
+
+export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(
+  function KanbanCard({ base, view, row, columnKey, onOpen }, ref) {
+    const { t } = useTranslation();
+    const primary = base.properties.find((p) => p.isPrimary);
+    const title = primary ? (row.cells[primary.id] as string | undefined) : undefined;
+
+    const visibleIds = view.config?.visiblePropertyIds ?? [];
+    const propertyOrder = view.config?.propertyOrder;
+
+    const cardProps = base.properties.filter(
+      (p) => visibleIds.includes(p.id) && !p.isPrimary,
+    );
+
+    if (propertyOrder) {
+      cardProps.sort(
+        (a, b) => propertyOrder.indexOf(a.id) - propertyOrder.indexOf(b.id),
+      );
+    }
+
+    const cardRef = useRef<HTMLDivElement>(null);
+
+    const setCardEl = useCallback(
+      (node: HTMLDivElement | null) => {
+        cardRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref],
+    );
+
+    const { closestEdge, isDragging } = useKanbanCardDnd({
+      cardRef,
+      rowId: row.id,
+      columnKey,
+      pageId: base.id,
+    });
+
+    return (
+      <div
+        ref={setCardEl}
+        className={clsx(classes.card, isDragging && classes.cardDragging)}
+        role="button"
+        tabIndex={0}
+        onClick={() => onOpen(row.id)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onOpen(row.id);
+          }
+        }}
+      >
+        {closestEdge === "top" && <BaseDropEdgeIndicator edge="top" />}
+        <div className={clsx(classes.cardTitle, !title && classes.cardUntitled)}>
+          {title || t("Untitled")}
+        </div>
+        {cardProps.map((property) => (
+          <CardField
+            key={property.id}
+            property={property}
+            value={row.cells[property.id]}
+            pageId={base.id}
+          />
+        ))}
+        {closestEdge === "bottom" && <BaseDropEdgeIndicator edge="bottom" />}
+      </div>
+    );
+  },
+);
@@ -0,0 +1,76 @@
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { ActionIcon, Menu, Text } from "@mantine/core";
+import { IconDots, IconPlus, IconGripVertical } from "@tabler/icons-react";
+import clsx from "clsx";
+import { KanbanColumn } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useKanbanColumnDnd } from "@/ee/base/hooks/use-kanban-column-dnd";
+import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+import classes from "@/ee/base/styles/kanban.module.css";
+
+type KanbanColumnHeaderProps = {
+  column: KanbanColumn;
+  pageId: string;
+  count?: string;
+  canEdit: boolean;
+  onHide: () => void;
+  onAddCard: () => void;
+};
+
+export function KanbanColumnHeader({ column, pageId, count, canEdit, onHide, onAddCard }: KanbanColumnHeaderProps) {
+  const { t } = useTranslation();
+  const dotColor = column.color
+    ? choiceColor(column.color).color as string
+    : "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3))";
+
+  const headerRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLDivElement>(null);
+  const { closestEdge, isDragging } = useKanbanColumnDnd({
+    headerRef,
+    handleRef,
+    columnKey: column.key,
+    pageId,
+  });
+
+  return (
+    <div ref={headerRef} className={clsx(classes.columnHeader, isDragging && classes.columnHeaderDragging)}>
+      {canEdit && (
+        <div ref={handleRef} className={classes.columnDragHandle} aria-hidden>
+          <IconGripVertical size={14} />
+        </div>
+      )}
+      <div
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          flexShrink: 0,
+          background: dotColor,
+        }}
+      />
+      <Text fw={600} size="sm" flex={1} truncate>
+        {column.isNoValue ? t("No value") : column.name}
+      </Text>
+      {count !== undefined && <Text className={classes.count}>{count}</Text>}
+      {canEdit && (
+        <>
+          <Menu position="bottom-end" withinPortal>
+            <Menu.Target>
+              <ActionIcon variant="subtle" size="sm" color="gray" aria-label={t("Column options")}>
+                <IconDots size={14} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item onClick={onHide}>{t("Hide group")}</Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+          <ActionIcon variant="subtle" size="sm" color="gray" aria-label={t("Add card")} onClick={onAddCard}>
+            <IconPlus size={14} />
+          </ActionIcon>
+        </>
+      )}
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+    </div>
+  );
+}
@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { type IBase, type IBaseRow, type IBaseView, type FilterGroup, type KanbanColumn as KanbanColumnType, KANBAN_CARD_DRAG_TYPE } from "@/ee/base/types/base.types";
+import { buildColumnFilter } from "@/ee/base/services/kanban-column-filter";
+import { formatKanbanCount } from "@/ee/base/services/format-kanban-count";
+import { useKanbanColumnAutoScroll } from "@/ee/base/hooks/use-kanban-autoscroll";
+import { useBaseRowsQuery } from "@/ee/base/queries/base-row-query";
+import { useKanbanCreateCardMutation } from "@/ee/base/queries/base-row-query";
+import { KanbanColumnHeader } from "@/ee/base/components/kanban/kanban-column-header";
+import { KanbanAddCardButton } from "@/ee/base/components/kanban/kanban-add-card-button";
+import { KanbanCard } from "@/ee/base/components/kanban/kanban-card";
+import classes from "@/ee/base/styles/kanban.module.css";
+
+type KanbanColumnProps = {
+  base: IBase;
+  view: IBaseView;
+  pageId: string;
+  column: KanbanColumnType;
+  viewFilter: FilterGroup | undefined;
+  groupByPropertyId: string;
+  canEdit: boolean;
+  onOpenRow: (rowId: string) => void;
+  onHide: (columnKey: string) => void;
+  registerCardRef: (rowId: string, columnKey: string, el: HTMLDivElement | null) => void;
+  registerColumnRows: (columnKey: string, rows: IBaseRow[]) => void;
+};
+
+export function KanbanColumn({
+  base,
+  view,
+  pageId,
+  column,
+  viewFilter,
+  groupByPropertyId,
+  canEdit,
+  onOpenRow,
+  onHide,
+  registerCardRef,
+  registerColumnRows,
+}: KanbanColumnProps) {
+  const filter = useMemo(
+    () => buildColumnFilter(viewFilter, groupByPropertyId, column.key),
+    [viewFilter, groupByPropertyId, column.key],
+  );
+
+  const rowsQuery = useBaseRowsQuery(pageId, filter, undefined);
+  const createCard = useKanbanCreateCardMutation();
+
+  const rows = useMemo(() => {
+    const pages = rowsQuery.data?.pages ?? [];
+    const seen = new Set<string>();
+    const flat: IBaseRow[] = [];
+    for (const page of pages) {
+      for (const row of page.items) {
+        if (!seen.has(row.id)) {
+          seen.add(row.id);
+          flat.push(row);
+        }
+      }
+    }
+    return flat.slice().sort((a, b) =>
+      a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
+    );
+  }, [rowsQuery.data]);
+
+  const count = rowsQuery.isSuccess
+    ? formatKanbanCount(rows.length, rowsQuery.hasNextPage ?? false)
+    : undefined;
+
+  useEffect(() => {
+    registerColumnRows(column.key, rows);
+  }, [column.key, rows, registerColumnRows]);
+
+  const listRef = useRef<HTMLDivElement>(null);
+  useKanbanColumnAutoScroll(listRef, pageId);
+
+  const pendingScrollRef = useRef<"top" | "bottom" | null>(null);
+
+  useEffect(() => {
+    const placement = pendingScrollRef.current;
+    if (!placement) return;
+    pendingScrollRef.current = null;
+    const el = listRef.current;
+    if (!el) return;
+    el.scrollTop = placement === "top" ? 0 : el.scrollHeight;
+  }, [rows]);
+
+  useEffect(() => {
+    const listEl = listRef.current;
+    if (!listEl) return;
+    return dropTargetForElements({
+      element: listEl,
+      canDrop: ({ source }) =>
+        source.data.type === KANBAN_CARD_DRAG_TYPE && source.data.pageId === pageId,
+      getData: () => ({ columnKey: column.key, isColumnBody: true }),
+    });
+  }, [column.key, pageId]);
+
+  const onScroll = useCallback(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const { scrollHeight, scrollTop, clientHeight } = el;
+    if (
+      scrollHeight - scrollTop - clientHeight < 200 &&
+      rowsQuery.hasNextPage &&
+      !rowsQuery.isFetchingNextPage
+    ) {
+      rowsQuery.fetchNextPage();
+    }
+  }, [rowsQuery.hasNextPage, rowsQuery.isFetchingNextPage, rowsQuery.fetchNextPage]);
+
+  const addCard = useCallback(
+    (placement: "top" | "bottom") => {
+      let position: string | undefined;
+      try {
+        position =
+          placement === "top"
+            ? generateJitteredKeyBetween(null, rows[0]?.position ?? null)
+            : generateJitteredKeyBetween(rows[rows.length - 1]?.position ?? null, null);
+      } catch {
+        position = undefined;
+      }
+      createCard.mutate(
+        { pageId, destColumnFilter: filter, groupByPropertyId, columnKey: column.key, position },
+        {
+          onSuccess: (newRow) => {
+            pendingScrollRef.current = placement;
+            onOpenRow(newRow.id);
+          },
+        },
+      );
+    },
+    [createCard, pageId, filter, groupByPropertyId, column.key, onOpenRow, rows],
+  );
+
+  return (
+    <div className={classes.column} data-column-key={column.key}>
+      <KanbanColumnHeader
+        column={column}
+        pageId={pageId}
+        count={count}
+        canEdit={canEdit}
+        onHide={() => onHide(column.key)}
+        onAddCard={() => addCard("top")}
+      />
+      <div className={classes.cardList} ref={listRef} onScroll={onScroll}>
+        {rows.map((row) => (
+          <KanbanCard
+            key={row.id}
+            base={base}
+            view={view}
+            row={row}
+            columnKey={column.key}
+            onOpen={onOpenRow}
+            ref={(el) => registerCardRef(row.id, column.key, el)}
+          />
+        ))}
+        {canEdit && <KanbanAddCardButton onAddCard={() => addCard("bottom")} />}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,99 @@
+import { useCallback } from "react";
+import { Stack, Text, Select, Button } from "@mantine/core";
+import { v7 as uuid7 } from "uuid";
+import { useTranslation } from "react-i18next";
+import { IBase, IBaseView } from "@/ee/base/types/base.types";
+import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
+import { useCreatePropertyMutation } from "@/ee/base/queries/base-property-query";
+
+type KanbanEmptyStateProps = {
+  base: IBase;
+  view: IBaseView;
+  pageId: string;
+  editable: boolean;
+};
+
+export function KanbanEmptyState({ base, view, pageId, editable }: KanbanEmptyStateProps) {
+  const { t } = useTranslation();
+  const updateView = useUpdateViewMutation();
+  const createProperty = useCreatePropertyMutation();
+
+  const groupableProperties = base.properties.filter(
+    (p) => p.type === "select" || p.type === "status",
+  );
+
+  const selectData = groupableProperties.map((p) => ({
+    value: p.id,
+    label: p.name,
+  }));
+
+  const handleSelect = useCallback(
+    (value: string | null) => {
+      if (!value) return;
+      updateView.mutate({ viewId: view.id, pageId, config: { groupByPropertyId: value } });
+    },
+    [updateView, view.id, pageId],
+  );
+
+  const handleCreateStatus = useCallback(() => {
+    const todoId = uuid7();
+    const inProgressId = uuid7();
+    const completeId = uuid7();
+    createProperty.mutate(
+      {
+        pageId,
+        name: t("Status"),
+        type: "status",
+        typeOptions: {
+          choices: [
+            { id: todoId, name: t("Not started"), color: "gray", category: "todo" },
+            { id: inProgressId, name: t("In progress"), color: "blue", category: "inProgress" },
+            { id: completeId, name: t("Done"), color: "green", category: "complete" },
+          ],
+          choiceOrder: [todoId, inProgressId, completeId],
+        },
+      },
+      {
+        onSuccess: (newProperty) => {
+          updateView.mutate({
+            viewId: view.id,
+            pageId,
+            config: { groupByPropertyId: newProperty.id },
+          });
+        },
+      },
+    );
+  }, [createProperty, updateView, view.id, pageId, t]);
+
+  if (!editable) {
+    return (
+      <Stack align="center" justify="center" gap="md" style={{ flex: 1 }}>
+        <Text fw={500}>{t("This board has no grouping property yet.")}</Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack align="center" justify="center" gap="md" style={{ flex: 1 }}>
+      <Text fw={500}>{t("Group this board by a select or status property.")}</Text>
+      {groupableProperties.length > 0 ? (
+        <Select
+          placeholder={t("Choose a property")}
+          data={selectData}
+          value={view.config?.groupByPropertyId ?? null}
+          onChange={handleSelect}
+          w={240}
+        />
+      ) : (
+        <Button
+          variant="light"
+          size="sm"
+          onClick={handleCreateStatus}
+          loading={createProperty.isPending}
+        >
+          {t("Create a status property")}
+        </Button>
+      )}
+    </Stack>
+  );
+}
@@ -0,0 +1,115 @@
+import { Popover, Select, Stack, Text, Switch, Group, UnstyledButton } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { IBase, IBaseView } from "@/ee/base/types/base.types";
+import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
+import { useKanbanColumns } from "@/ee/base/hooks/use-kanban-columns";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type KanbanGroupByPickerProps = {
+  base: IBase;
+  view: IBaseView;
+  pageId: string;
+  children: React.ReactNode;
+};
+
+export function KanbanGroupByPicker({ base, view, pageId, children }: KanbanGroupByPickerProps) {
+  const { t } = useTranslation();
+  const updateView = useUpdateViewMutation();
+  const { allGroups, hasValidGroupBy } = useKanbanColumns(base, view);
+
+  const data = base.properties
+    .filter((p) => p.type === "select" || p.type === "status")
+    .map((p) => ({ value: p.id, label: p.name }));
+
+  const handleChange = (value: string | null) => {
+    updateView.mutate({
+      viewId: view.id,
+      pageId,
+      config: { groupByPropertyId: value ?? null },
+    });
+  };
+
+  const toggleGroup = (key: string, currentlyHidden: boolean) => {
+    const current = view.config?.hiddenChoiceIds ?? [];
+    const next = currentlyHidden
+      ? current.filter((k) => k !== key)
+      : [...current, key];
+    updateView.mutate({ viewId: view.id, pageId, config: { hiddenChoiceIds: next } });
+  };
+
+  return (
+    <Popover
+      position="bottom-end"
+      shadow="md"
+      width={300}
+      withinPortal
+      trapFocus
+      closeOnEscape
+      closeOnClickOutside
+    >
+      <Popover.Target>{children}</Popover.Target>
+      <Popover.Dropdown p="xs">
+        <Stack gap={8}>
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Group by")}
+          </Text>
+          <Select
+            size="xs"
+            placeholder={t("Select a property")}
+            data={data}
+            value={view.config?.groupByPropertyId ?? null}
+            onChange={handleChange}
+            clearable
+          />
+          {hasValidGroupBy && allGroups.length > 0 && (
+            <Stack gap={4}>
+              <Text size="xs" fw={600} c="dimmed">
+                {t("Groups")}
+              </Text>
+              <Stack gap={0}>
+                {allGroups.map((g) => {
+                  const dotColor = g.color
+                    ? (choiceColor(g.color).color as string)
+                    : "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3))";
+                  return (
+                    <UnstyledButton
+                      key={g.key}
+                      className={cellClasses.menuItem}
+                      onClick={() => toggleGroup(g.key, g.hidden)}
+                    >
+                      <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
+                        <span
+                          style={{
+                            width: 8,
+                            height: 8,
+                            borderRadius: "50%",
+                            flexShrink: 0,
+                            background: dotColor,
+                          }}
+                        />
+                        <Text
+                          size="sm"
+                          style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                        >
+                          {g.isNoValue ? t("No value") : g.name}
+                        </Text>
+                      </Group>
+                      <Switch
+                        size="xs"
+                        checked={!g.hidden}
+                        onChange={() => {}}
+                        onClick={(e) => e.stopPropagation()}
+                        styles={{ track: { cursor: "pointer" } }}
+                      />
+                    </UnstyledButton>
+                  );
+                })}
+              </Stack>
+            </Stack>
+          )}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
@@ -16,6 +16,7 @@ import {
  IconGripVertical,
  IconArrowsSort,
 } from "@tabler/icons-react";
+import classes from "@/ee/base/styles/property.module.css";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import {
  draggable,
@@ -30,11 +31,12 @@ import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hi
 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 { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+import { Choice } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
 import { useTranslation } from "react-i18next";
 import { v7 as uuid7 } from "uuid";
+import { DefaultValuePicker } from "./default-value-picker";

 const CHOICE_COLORS = [
  "gray", "red", "pink", "grape", "violet", "indigo",
@@ -47,13 +49,53 @@ const STATUS_CATEGORIES = [
  { value: "complete", label: "Complete" },
 ] as const;

+// Default choices for a new status property, one per category.
+export function defaultStatusChoices(): Choice[] {
+  return [
+    { id: uuid7(), name: "Not started", color: "gray", category: "todo" },
+    { id: uuid7(), name: "In progress", color: "blue", category: "inProgress" },
+    { id: uuid7(), name: "Done", color: "green", category: "complete" },
+  ];
+}
+
+function pruneDefault(
+  value: string | string[] | null,
+  choices: Choice[],
+): string | string[] | null {
+  if (value === null) return null;
+  const ids = new Set(choices.map((c) => c.id));
+  if (Array.isArray(value)) {
+    const live = value.filter((id) => ids.has(id));
+    return live.length ? live : null;
+  }
+  return ids.has(value) ? value : null;
+}
+
+function defaultsEqual(
+  a: string | string[] | null,
+  b: string | string[] | null,
+): boolean {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((v, i) => v === b[i]);
+  }
+  return a === b;
+}
+
 type ChoiceEditorProps = {
  initialChoices: Choice[];
-  onSave: (choices: Choice[]) => void;
+  onSave: (choices: Choice[], defaultValue: string | string[] | null) => void;
  onClose: () => void;
  onDirtyChange?: (dirty: boolean) => void;
  showCategories?: boolean;
  hideButtons?: boolean;
+  initialDefaultValue?: string | string[] | null;
+  multiDefault?: boolean;
+  /**
+   * Where the per-choice color-picker popover portals. Pass the enclosing
+   * property-menu dropdown node so the picker renders INSIDE that subtree —
+   * otherwise a color click registers as "outside" and closes the menu.
+   */
+  dropdownPortalTarget?: HTMLElement | null;
 };

 export function ChoiceEditor({
@@ -63,35 +105,42 @@ export function ChoiceEditor({
  onDirtyChange,
  showCategories = false,
  hideButtons = false,
+  initialDefaultValue = null,
+  multiDefault = false,
+  dropdownPortalTarget,
 }: ChoiceEditorProps) {
  const { t } = useTranslation();
  const [draft, setDraft] = useState<Choice[]>(initialChoices);
  const [focusChoiceId, setFocusChoiceId] = useState<string | null>(null);
+  const [defaultDraft, setDefaultDraft] = useState<string | string[] | null>(
+    initialDefaultValue,
+  );

-  // Sync from parent only when not in live mode (hideButtons = create flow)
  useEffect(() => {
    if (!hideButtons) {
      setDraft(initialChoices);
+      setDefaultDraft(initialDefaultValue);
    }
-  }, [initialChoices, hideButtons]);
+  }, [initialChoices, initialDefaultValue, 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()));
+      const cleaned = draft.filter((c) => c.name.trim());
+      onSaveRef.current(cleaned, pruneDefault(defaultDraft, cleaned));
    }
-  }, [hideButtons, draft]);
+  }, [hideButtons, draft, defaultDraft]);

  const isDirty = useMemo(() => {
+    if (!defaultsEqual(defaultDraft, initialDefaultValue)) return true;
    if (draft.length !== initialChoices.length) return true;
    return draft.some((d, i) => {
      const o = initialChoices[i];
      return d.id !== o.id || d.name !== o.name || d.color !== o.color || d.category !== o.category;
    });
-  }, [draft, initialChoices]);
+  }, [draft, initialChoices, defaultDraft, initialDefaultValue]);

  useEffect(() => {
    onDirtyChange?.(isDirty);
@@ -109,6 +158,14 @@ export function ChoiceEditor({

  const handleRemove = useCallback((choiceId: string) => {
    setDraft((prev) => prev.filter((c) => c.id !== choiceId));
+    setDefaultDraft((prev) => {
+      if (prev === null) return prev;
+      if (Array.isArray(prev)) {
+        const next = prev.filter((id) => id !== choiceId);
+        return next.length ? next : null;
+      }
+      return prev === choiceId ? null : prev;
+    });
  }, []);

  const handleAdd = useCallback((category?: "todo" | "inProgress" | "complete") => {
@@ -132,15 +189,16 @@ export function ChoiceEditor({

  const handleSave = useCallback(() => {
    const cleaned = draft.filter((c) => c.name.trim());
-    onSave(cleaned);
+    onSave(cleaned, pruneDefault(defaultDraft, cleaned));
    onClose();
-  }, [draft, onSave, onClose]);
+  }, [draft, defaultDraft, onSave, onClose]);

  const handleCancel = useCallback(() => {
    setDraft(initialChoices);
+    setDefaultDraft(initialDefaultValue);
    onDirtyChange?.(false);
    onClose();
-  }, [initialChoices, onDirtyChange, onClose]);
+  }, [initialChoices, initialDefaultValue, onDirtyChange, onClose]);

  const handleReorder = useCallback(
    (activeId: string, targetId: string, edge: Edge) => {
@@ -200,7 +258,7 @@ export function ChoiceEditor({
        <Text size="xs" fw={600}>
          {t("Options")}
        </Text>
-        <UnstyledButton onClick={handleAlphabetize} style={{ display: "flex", alignItems: "center", gap: 4 }}>
+        <UnstyledButton onClick={handleAlphabetize} className={classes.alphabetizeBtn}>
          <IconArrowsSort size={14} color="var(--mantine-color-dimmed)" />
          <Text size="xs" c="dimmed">{t("Alphabetize")}</Text>
        </UnstyledButton>
@@ -216,6 +274,7 @@ export function ChoiceEditor({
          onRemove={handleRemove}
          onAdd={handleAdd}
          onCategoryReorder={handleCategoryReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
        />
      ) : (
        <FlatChoiceList
@@ -227,9 +286,18 @@ export function ChoiceEditor({
          onRemove={handleRemove}
          onAdd={handleAdd}
          onReorder={handleReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
        />
      )}

+      <DefaultValuePicker
+        choices={draft.filter((c) => c.name.trim())}
+        value={defaultDraft}
+        multiple={multiDefault}
+        onChange={setDefaultDraft}
+        dropdownPortalTarget={dropdownPortalTarget}
+      />
+
      {!hideButtons && (
        <>
          <Divider />
@@ -257,6 +325,7 @@ function FlatChoiceList({
  onRemove,
  onAdd,
  onReorder,
+  dropdownPortalTarget,
 }: {
  draft: Choice[];
  focusChoiceId: string | null;
@@ -266,6 +335,7 @@ function FlatChoiceList({
  onRemove: (id: string) => void;
  onAdd: () => void;
  onReorder: (activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
 }) {
  const { t } = useTranslation();

@@ -282,12 +352,13 @@ function FlatChoiceList({
          onColorChange={onColorChange}
          onRemove={onRemove}
          onReorder={onReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
        />
      ))}

      <UnstyledButton
        onClick={() => onAdd()}
-        style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 0" }}
+        className={classes.addOptionBtn}
      >
        <IconPlus size={14} color="var(--mantine-color-dimmed)" />
        <Text size="xs" c="dimmed">{t("Add option")}</Text>
@@ -305,6 +376,7 @@ function StatusChoiceList({
  onRemove,
  onAdd,
  onCategoryReorder,
+  dropdownPortalTarget,
 }: {
  draft: Choice[];
  focusChoiceId: string | null;
@@ -314,6 +386,7 @@ function StatusChoiceList({
  onRemove: (id: string) => void;
  onAdd: (category: "todo" | "inProgress" | "complete") => void;
  onCategoryReorder: (category: string, activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
 }) {
  const grouped = useMemo(() => {
    const groups: Record<string, Choice[]> = { todo: [], inProgress: [], complete: [] };
@@ -339,6 +412,7 @@ function StatusChoiceList({
          onRemove={onRemove}
          onAdd={onAdd}
          onReorder={onCategoryReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
        />
      ))}
    </Stack>
@@ -356,6 +430,7 @@ function CategorySection({
  onRemove,
  onAdd,
  onReorder,
+  dropdownPortalTarget,
 }: {
  category: "todo" | "inProgress" | "complete";
  label: string;
@@ -372,6 +447,7 @@ function CategorySection({
    targetId: string,
    edge: Edge,
  ) => void;
+  dropdownPortalTarget?: HTMLElement | null;
 }) {
  const { t } = useTranslation();

@@ -392,10 +468,7 @@ function CategorySection({
        <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.
+          // Per-category drag type prevents cross-category drops.
          dragType={`base-choice-status:${category}`}
          autoFocus={choice.id === focusChoiceId}
          onFocused={onFocused}
@@ -403,12 +476,13 @@ function CategorySection({
          onColorChange={onColorChange}
          onRemove={onRemove}
          onReorder={handleRowReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
        />
      ))}

      <UnstyledButton
        onClick={() => onAdd(category)}
-        style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 0" }}
+        className={classes.addOptionBtn}
      >
        <IconPlus size={14} color="var(--mantine-color-dimmed)" />
        <Text size="xs" c="dimmed">{t("Add option")}</Text>
@@ -426,6 +500,7 @@ function SortableChoiceRow({
  onColorChange,
  onRemove,
  onReorder,
+  dropdownPortalTarget,
 }: {
  choice: Choice;
  dragType: string;
@@ -435,6 +510,7 @@ function SortableChoiceRow({
  onColorChange: (id: string, color: string) => void;
  onRemove: (id: string) => void;
  onReorder: (activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
 }) {
  const inputRef = useRef<HTMLInputElement>(null);
  const rowRef = useRef<HTMLDivElement>(null);
@@ -443,9 +519,7 @@ function SortableChoiceRow({
  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.
+  // Stable ref so the DnD effect doesn't re-register on every parent render.
  const onReorderRef = useRef(onReorder);
  useLayoutEffect(() => {
    onReorderRef.current = onReorder;
@@ -465,9 +539,6 @@ function SortableChoiceRow({
    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),
@@ -515,13 +586,14 @@ function SortableChoiceRow({
      }}
      data-dragging={isDragging || undefined}
    >
-      <div
-        ref={handleRef}
-        style={{ flexShrink: 0, cursor: "grab", display: "flex", alignItems: "center" }}
-      >
+      <div ref={handleRef} className={classes.dragHandle}>
        <IconGripVertical size={14} style={{ opacity: 0.4 }} />
      </div>
-      <ColorDot color={choice.color} onChange={(c) => onColorChange(choice.id, c)} />
+      <ColorDot
+        color={choice.color}
+        onChange={(c) => onColorChange(choice.id, c)}
+        dropdownPortalTarget={dropdownPortalTarget}
+      />
      <TextInput
        ref={inputRef}
        size="xs"
@@ -540,15 +612,24 @@ function SortableChoiceRow({
 function ColorDot({
  color,
  onChange,
+  dropdownPortalTarget,
 }: {
  color: string;
  onChange: (color: string) => void;
+  dropdownPortalTarget?: HTMLElement | null;
 }) {
  const [opened, setOpened] = useState(false);
  const colors = choiceColor(color);

  return (
-    <Popover opened={opened} onChange={setOpened} position="bottom" shadow="sm" withinPortal>
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom"
+      shadow="sm"
+      withinPortal
+      portalProps={{ target: dropdownPortalTarget ?? undefined }}
+    >
      <Popover.Target>
        <UnstyledButton
          onClick={() => setOpened((o) => !o)}
@@ -0,0 +1,127 @@
+import type { BasePropertyType } from "@/ee/base/types/base.types";
+
+export const NON_USER_TARGET_TYPES = new Set<BasePropertyType>([
+  "createdAt",
+  "lastEditedAt",
+  "lastEditedBy",
+  "formula",
+]);
+
+type ConversionInfo = {
+  // i18n source key (translation files key them by their exact text).
+  message: string;
+  // True when cells can be cleared, discarded, truncated, or have their
+  // structured value flattened, i.e. the change is not safely reversible.
+  // Drives the destructive (red) "Apply" button in the confirm panel.
+  lossy: boolean;
+};
+
+// Buckets ordered most-specific first; default covers safe reinterpretations.
+function describeConversion(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): ConversionInfo {
+  if (to === "text" || to === "longText") {
+    if (from === "longText" && to === "text") {
+      return {
+        message:
+          "Cells longer than the Text limit will be truncated and the extra content permanently lost.",
+        lossy: true,
+      };
+    }
+    if (from === "select" || from === "status") {
+      return { message: "Cells will be replaced with the option name.", lossy: true };
+    }
+    if (from === "multiSelect") {
+      return {
+        message:
+          "Cells will be replaced with a comma-separated list of option names.",
+        lossy: true,
+      };
+    }
+    if (from === "person") {
+      return { message: "Cells will be replaced with the person's name.", lossy: true };
+    }
+    if (from === "file") {
+      return {
+        message:
+          "Cells will be replaced with a comma-separated list of file names.",
+        lossy: true,
+      };
+    }
+    if (from === "page") {
+      return { message: "Cells will be replaced with the page title.", lossy: true };
+    }
+  }
+
+  if (to === "select" && from === "multiSelect") {
+    return {
+      message:
+        "Only the first selected item per row will be kept; the rest will be discarded.",
+      lossy: true,
+    };
+  }
+
+  if (to === "multiSelect" && from === "select") {
+    return {
+      message: "Existing values become single-item lists. No data is lost.",
+      lossy: false,
+    };
+  }
+
+  if (to === "page") {
+    return {
+      message: "Cells that aren't already a page reference will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "number" && from !== "number") {
+    return {
+      message: "Cells that can't be parsed as a number will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "date" && from !== "date") {
+    return {
+      message: "Cells that can't be parsed as a date will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "checkbox" && from !== "checkbox") {
+    return {
+      message:
+        "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+      lossy: true,
+    };
+  }
+
+  if ((to === "url" || to === "email") && from !== to) {
+    return {
+      message:
+        to === "url"
+          ? "Cells that aren't a valid URL will be cleared."
+          : "Cells that aren't a valid email address will be cleared.",
+      lossy: true,
+    };
+  }
+
+  return { message: "Cells will be reinterpreted under the new type.", lossy: false };
+}
+
+export function conversionWarning(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): string {
+  return describeConversion(from, to).message;
+}
+
+// Whether the type change can lose data, used to make "Apply" destructive.
+export function isLossyConversion(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): boolean {
+  return describeConversion(from, to).lossy;
+}
@@ -1,7 +1,6 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import {
  Popover,
-  Portal,
  TextInput,
  Button,
  Group,
@@ -17,40 +16,40 @@ 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";
+} from "@/ee/base/types/base.types";
+import { useCreatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { PropertyTypePicker } from "./property-type-picker";
 import { PropertyOptions } from "./property-options";
+import {
+  getDescriptor,
+  defaultTypeOptionsFor,
+  propertyTypes,
+} from "@/ee/base/property-types/property-type.registry";
 import { FormulaEditor } from "../formula/formula-editor";
-import classes from "@/features/base/styles/grid.module.css";
+import classes from "@/ee/base/styles/grid.module.css";

 type CreatePropertyPopoverProps = {
  pageId: string;
  properties?: IBaseProperty[];
-  onPropertyCreated?: () => void;
+  onPropertyCreated?: (property: IBaseProperty) => void;
+  /** Custom trigger; must return a ref-forwarding element for Popover.Target.
+   *  Defaults to the grid's + column button. */
+  renderTarget?: (open: () => void) => React.ReactElement;
 };

 type Panel = "typePicker" | "configure" | "confirmDiscard";

 const noop = () => {};

-// 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) {
+export function CreatePropertyPopover({ pageId, properties, onPropertyCreated, renderTarget }: CreatePropertyPopoverProps) {
  const { t } = useTranslation();
  const [opened, setOpened] = useState(false);
  const [panel, setPanel] = useState<Panel>("typePicker");
  const [selectedType, setSelectedType] = useState<BasePropertyType | null>(null);
  const [name, setName] = useState("");
  const [typeOptions, setTypeOptions] = useState<Record<string, unknown>>({});
+  // Portal target for nested Select dropdowns to avoid triggering closeOnClickOutside.
+  const [dropdownNode, setDropdownNode] = useState<HTMLDivElement | null>(null);
  const nameInputRef = useRef<HTMLInputElement>(null);

  const createPropertyMutation = useCreatePropertyMutation();
@@ -74,12 +73,9 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
    );
  }, [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.
+  // Fall back to the type label when Name is blank, suffixing a counter if taken.
  const fallbackName = useMemo(() => {
-    const base = selectedTypeLabel || "Field";
+    const base = selectedTypeLabel || "Property";
    const existing = new Set(
      (properties ?? []).map((p) => p.name.trim().toLowerCase()),
    );
@@ -104,11 +100,8 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
  }, [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.
+    // Don't reset state here: resetting mid-close flashes the type picker.
+    // handleOpen resets on the next open instead.
    setOpened(false);
  }, []);

@@ -130,7 +123,7 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:

  const handleTypeSelect = useCallback((type: BasePropertyType) => {
    setSelectedType(type);
-    setTypeOptions({});
+    setTypeOptions(defaultTypeOptionsFor(type));
    setPanel("configure");
  }, []);

@@ -153,8 +146,8 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
          : undefined,
      },
      {
-        onSuccess: () => {
-          onPropertyCreated?.();
+        onSuccess: (created) => {
+          onPropertyCreated?.(created);
        },
      },
    );
@@ -214,30 +207,25 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
  }), [pageId, name, selectedType, typeOptions]);

  const TypeIcon = selectedTypeIcon;
-  const showOptions = selectedType && typesWithOptions.has(selectedType);
+  const showOptions = !!selectedType && (getDescriptor(selectedType)?.hasOptions ?? false);

  return (
    <>
-      {opened && (
-        <Portal>
-          <div
-            style={{
-              position: "fixed",
-              inset: 0,
-              zIndex: 299,
-            }}
-            onClick={attemptClose}
-          />
-        </Portal>
-      )}
      <Popover
        opened={opened}
-        onClose={noop}
+        onChange={(o) => {
+          if (!o) attemptClose();
+        }}
        position="bottom-start"
        shadow="md"
+        closeOnClickOutside
+        closeOnEscape={false}
        withinPortal
      >
        <Popover.Target>
+          {renderTarget ? (
+            renderTarget(handleOpen)
+          ) : (
            <div
              className={classes.addColumnButton}
              onClick={handleOpen}
@@ -246,14 +234,17 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
            >
              <IconPlus size={16} />
            </div>
+          )}
        </Popover.Target>
        <Popover.Dropdown
+          ref={setDropdownNode}
          p={0}
          onClick={(e) => e.stopPropagation()}
          onKeyDown={handleKeyDown}
          style={{
            zIndex: 300,
-            minWidth: selectedType === "formula" ? 460 : 320,
+            width: selectedType === "formula" ? 460 : undefined,
+            minWidth: selectedType === "formula" ? undefined : 320,
            maxWidth: "calc(100vw - 32px)",
          }}
        >
@@ -303,7 +294,7 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
                        astVersion: 1,
                      } as TypeOptions,
                    },
-                    { onSuccess: () => onPropertyCreated?.() },
+                    { onSuccess: (created) => onPropertyCreated?.(created) },
                  );
                  handleClose();
                }}
@@ -348,6 +339,7 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
                      onClose={noop}
                      onDirtyChange={noop}
                      hideButtons
+                      dropdownPortalTarget={dropdownNode}
                    />
                  </ScrollArea.Autosize>
                </>
@@ -359,7 +351,7 @@ export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }:
                  {t("Cancel")}
                </Button>
                <Button size="xs" onClick={handleCreate} disabled={nameTaken}>
-                  {t("Create field")}
+                  {t("Create property")}
                </Button>
              </Group>
            </Stack>
@@ -0,0 +1,98 @@
+import { Group, MultiSelect, Select, Text } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+import { Choice } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useTranslation } from "react-i18next";
+import type { ComboboxItem } from "@mantine/core";
+
+type DefaultValuePickerProps = {
+  choices: Choice[];
+  value: string | string[] | null;
+  multiple?: boolean;
+  onChange: (value: string | string[] | null) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+export function DefaultValuePicker({
+  choices,
+  value,
+  multiple,
+  onChange,
+  dropdownPortalTarget,
+}: DefaultValuePickerProps) {
+  const { t } = useTranslation();
+  const data = choices.map((c) => ({ value: c.id, label: c.name }));
+  const comboboxProps = {
+    portalProps: { target: dropdownPortalTarget ?? undefined },
+  };
+
+  const renderOption = ({
+    option,
+    checked,
+  }: {
+    option: ComboboxItem;
+    checked?: boolean;
+  }) => {
+    const choice = choices.find((c) => c.id === option.value);
+    const colors = choice ? choiceColor(choice.color) : undefined;
+    return (
+      <Group gap={6} wrap="nowrap" justify="space-between" style={{ flex: 1 }}>
+        <Group gap={6} wrap="nowrap">
+          {colors && (
+            <span
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                backgroundColor: colors.backgroundColor as string,
+                border: `2px solid ${colors.color as string}`,
+                flexShrink: 0,
+              }}
+            />
+          )}
+          <Text size="xs">{option.label}</Text>
+        </Group>
+        {checked && (
+          <IconCheck size={14} color="var(--mantine-color-dimmed)" />
+        )}
+      </Group>
+    );
+  };
+
+  if (multiple) {
+    const selected = (
+      Array.isArray(value) ? value : value ? [value] : []
+    ).filter((id) => choices.some((c) => c.id === id));
+    return (
+      <MultiSelect
+        size="xs"
+        label={t("Default value")}
+        placeholder={selected.length ? undefined : t("None")}
+        data={data}
+        value={selected}
+        onChange={(vals) => onChange(vals.length ? vals : null)}
+        clearable
+        comboboxProps={comboboxProps}
+        renderOption={renderOption}
+      />
+    );
+  }
+
+  const single =
+    typeof value === "string" && choices.some((c) => c.id === value)
+      ? value
+      : null;
+  return (
+    <Select
+      size="xs"
+      label={t("Default value")}
+      placeholder={t("None")}
+      data={data}
+      value={single}
+      onChange={(val) => onChange(val)}
+      clearable
+      comboboxProps={comboboxProps}
+      renderOption={renderOption}
+    />
+  );
+}
@@ -16,32 +16,36 @@ import {
  IconPencil,
  IconChevronRight,
  IconSettings,
+  IconMathFunction,
 } from "@tabler/icons-react";
 import {
  IBaseProperty,
  BasePropertyType,
-} from "@/features/base/types/base.types";
+} from "@/ee/base/types/base.types";
 import { useAtom } from "jotai";
-import { propertyMenuCloseRequestAtomFamily } from "@/features/base/atoms/base-atoms";
+import { propertyMenuCloseRequestAtomFamily } from "@/ee/base/atoms/base-atoms";
 import {
  useUpdatePropertyMutation,
  useDeletePropertyMutation,
-} from "@/features/base/queries/base-property-query";
-import { PropertyTypePicker, propertyTypes } from "./property-type-picker";
+} from "@/ee/base/queries/base-property-query";
+import { PropertyTypePicker } from "./property-type-picker";
 import { PropertyOptions } from "./property-options";
 import {
  conversionWarning,
+  isLossyConversion,
  NON_USER_TARGET_TYPES,
 } from "./conversion-warning";
 import { useTranslation } from "react-i18next";
-import { isSystemPropertyType } from "@/features/base/hooks/use-base-table";
-import cellClasses from "@/features/base/styles/cells.module.css";
+import { isSystemPropertyType, propertyTypes } from "@/ee/base/property-types/property-type.registry";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import classes from "@/ee/base/styles/property.module.css";

 type PropertyMenuContentProps = {
  property: IBaseProperty;
  opened: boolean;
  onClose: () => void;
  onDirtyChange?: (dirty: boolean) => void;
+  onEditFormula?: () => void;
  pageId: string;
 };

@@ -59,6 +63,7 @@ export function PropertyMenuContent({
  opened,
  onClose,
  onDirtyChange,
+  onEditFormula,
  pageId,
 }: PropertyMenuContentProps) {
  const { t } = useTranslation();
@@ -66,6 +71,8 @@ export function PropertyMenuContent({
  const [renameValue, setRenameValue] = useState(property.name);
  const renameInputRef = useRef<HTMLInputElement>(null);
  const [optionsDirty, setOptionsDirty] = useState(false);
+  // Portal target for nested Select dropdowns to avoid triggering closeOnClickOutside.
+  const [optionsAnchor, setOptionsAnchor] = useState<HTMLDivElement | null>(null);
  const [pendingTargetType, setPendingTargetType] = useState<BasePropertyType | null>(null);
  const pendingActionRef = useRef<"back" | "close" | null>(null);
  const sourcePanelRef = useRef<"rename" | "options" | null>(null);
@@ -96,11 +103,6 @@ export function PropertyMenuContent({
    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) ||
@@ -250,6 +252,7 @@ export function PropertyMenuContent({
          onChangeType={() => setPanel("changeType")}
          onOptions={() => setPanel("options")}
          onDelete={() => setPanel("confirmDelete")}
+          onEditFormula={onEditFormula}
        />
      )}
      {panel === "rename" && (
@@ -290,7 +293,7 @@ export function PropertyMenuContent({
            >
              <IconChevronRight
                size={14}
-                style={{ transform: "rotate(180deg)" }}
+                className={classes.chevronBack}
              />
            </ActionIcon>
            <Text size="xs" fw={600} c="dimmed">
@@ -328,14 +331,27 @@ export function PropertyMenuContent({
            >
              {t("Cancel")}
            </Button>
-            <Button size="xs" onClick={handleApplyTypeChange}>
+            <Button
+              size="xs"
+              color={
+                isLossyConversion(property.type, pendingTargetType)
+                  ? "red"
+                  : undefined
+              }
+              onClick={handleApplyTypeChange}
+            >
              {t("Apply")}
            </Button>
          </Group>
        </Stack>
      )}
      {(panel === "options" || panel === "confirmDiscard") && (
-        <Stack gap="xs" p="sm" style={panel === "confirmDiscard" ? { display: "none" } : undefined}>
+        <Stack
+          ref={setOptionsAnchor}
+          gap="xs"
+          p="sm"
+          style={panel === "confirmDiscard" ? { display: "none" } : undefined}
+        >
          <Group gap="xs">
            <ActionIcon
              variant="subtle"
@@ -345,7 +361,7 @@ export function PropertyMenuContent({
            >
              <IconChevronRight
                size={14}
-                style={{ transform: "rotate(180deg)" }}
+                className={classes.chevronBack}
              />
            </ActionIcon>
            <Text size="xs" fw={600} c="dimmed">
@@ -358,6 +374,7 @@ export function PropertyMenuContent({
              onUpdate={handleOptionsUpdate}
              onClose={onClose}
              onDirtyChange={handleOptionsDirtyChange}
+              dropdownPortalTarget={optionsAnchor}
            />
          </ScrollArea.Autosize>
        </Stack>
@@ -419,7 +436,6 @@ export function PropertyMenuContent({
  );
 }

-// Expose requestClose for use by parent (grid-header-cell)
 PropertyMenuContent.displayName = "PropertyMenuContent";

 function MenuItem({
@@ -456,12 +472,14 @@ function MainPanel({
  onChangeType,
  onOptions,
  onDelete,
+  onEditFormula,
 }: {
  property: IBaseProperty;
  onRename: () => void;
  onChangeType: () => void;
  onOptions: () => void;
  onDelete: () => void;
+  onEditFormula?: () => void;
 }) {
  const { t } = useTranslation();

@@ -475,7 +493,12 @@ function MainPanel({
      property.type === "multiSelect" ||
      property.type === "status" ||
      property.type === "number" ||
-      property.type === "date");
+      property.type === "date" ||
+      property.type === "text" ||
+      property.type === "longText" ||
+      property.type === "checkbox" ||
+      property.type === "url" ||
+      property.type === "email");

  const typeDef = propertyTypes.find((pt) => pt.type === property.type);
  const TypeIcon = typeDef?.icon;
@@ -487,6 +510,13 @@ function MainPanel({
        label={t("Rename")}
        onClick={onRename}
      />
+      {property.type === "formula" && !isPending && onEditFormula && (
+        <MenuItem
+          icon={<IconMathFunction size={14} />}
+          label={t("Edit formula")}
+          onClick={onEditFormula}
+        />
+      )}
      {isPending && (
        <Group gap={8} px="sm" py={8}>
          <Loader size={12} />
@@ -0,0 +1,622 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Stack,
+  NumberInput,
+  Select,
+  Switch,
+  Text,
+  Button,
+  Group,
+  Divider,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  NumberTypeOptions,
+  DateTypeOptions,
+  PersonTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { ChoiceEditor } from "./choice-editor";
+import { FilterPersonInput } from "@/ee/base/components/views/filter-person-input";
+import {
+  CURRENCIES,
+  DEFAULT_CURRENCY_CODE,
+} from "@/ee/base/constants/currencies";
+import { useTranslation } from "react-i18next";
+
+type PropertyOptionsProps = {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  hideButtons?: boolean;
+  // Portal target for nested Select dropdowns; must be inside the host popover, outside ScrollArea.
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+export function PropertyOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: PropertyOptionsProps) {
+  const { t } = useTranslation();
+
+  switch (property.type) {
+    case "select":
+    case "multiSelect":
+      return (
+        <SelectOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "status":
+      return (
+        <StatusOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "number":
+      return (
+        <NumberOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "date":
+      return (
+        <DateOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "person":
+      return (
+        <PersonOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      );
+    case "text":
+    case "longText":
+    case "url":
+    case "email":
+      return (
+        <TextDefaultOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+        />
+      );
+    case "checkbox":
+      return (
+        <CheckboxOptions
+          property={property}
+          onUpdate={onUpdate}
+          onClose={onClose}
+          onDirtyChange={onDirtyChange}
+          hideButtons={hideButtons}
+        />
+      );
+    default:
+      return (
+        <Text size="xs" c="dimmed">
+          {t("No options for this property type")}
+        </Text>
+      );
+  }
+}
+
+type OptionEditorProps = {
+  property: IBaseProperty;
+  onUpdate: (typeOptions: Record<string, unknown>) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  hideButtons?: boolean;
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+const EMPTY_OPTIONS: Record<string, unknown> = {};
+
+function optionsEqual(
+  a: Record<string, unknown>,
+  b: Record<string, unknown>,
+): boolean {
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) {
+    const av = a[key];
+    const bv = b[key];
+    if (Array.isArray(av) && Array.isArray(bv)) {
+      if (av.length !== bv.length || av.some((v, i) => v !== bv[i])) {
+        return false;
+      }
+    } else if (av !== bv) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// Draft hook for non-choice option editors: live in create flow, staged in edit menu.
+function useEditableTypeOptions(
+  initialRaw: Record<string, unknown> | undefined,
+  {
+    onUpdate,
+    onClose,
+    onDirtyChange,
+    hideButtons,
+  }: {
+    onUpdate: (opts: Record<string, unknown>) => void;
+    onClose: () => void;
+    onDirtyChange?: (dirty: boolean) => void;
+    hideButtons?: boolean;
+  },
+) {
+  const initial = initialRaw ?? EMPTY_OPTIONS;
+  const [draft, setDraft] = useState<Record<string, unknown>>(initial);
+
+  useEffect(() => {
+    if (!hideButtons) setDraft(initial);
+  }, [initial, hideButtons]);
+
+  const onUpdateRef = useRef(onUpdate);
+  onUpdateRef.current = onUpdate;
+  useEffect(() => {
+    if (hideButtons) onUpdateRef.current(draft);
+  }, [hideButtons, draft]);
+
+  const isDirty = useMemo(() => !optionsEqual(draft, initial), [draft, initial]);
+  useEffect(() => {
+    onDirtyChange?.(isDirty);
+  }, [isDirty, onDirtyChange]);
+
+  const update = useCallback(
+    (patch: Record<string, unknown>) =>
+      setDraft((prev) => ({ ...prev, ...patch })),
+    [],
+  );
+  const save = useCallback(() => {
+    onUpdate(draft);
+    onClose();
+  }, [draft, onUpdate, onClose]);
+  const cancel = useCallback(() => {
+    setDraft(initial);
+    onDirtyChange?.(false);
+    onClose();
+  }, [initial, onClose, onDirtyChange]);
+
+  return { draft, update, isDirty, save, cancel };
+}
+
+function OptionsFooter({
+  isDirty,
+  onCancel,
+  onSave,
+}: {
+  isDirty: boolean;
+  onCancel: () => void;
+  onSave: () => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Divider />
+      <Group justify="flex-end" gap="xs">
+        <Button variant="default" size="xs" onClick={onCancel}>
+          {t("Cancel")}
+        </Button>
+        <Button size="xs" onClick={onSave} disabled={!isDirty}>
+          {t("Save")}
+        </Button>
+      </Group>
+    </>
+  );
+}
+
+function SelectOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const options = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = useMemo(() => options?.choices ?? [], [options?.choices]);
+
+  const handleSave = useCallback(
+    (newChoices: Choice[], defaultValue: string | string[] | null) => {
+      onUpdate({
+        ...property.typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+        defaultValue,
+      });
+    },
+    [property.typeOptions, onUpdate],
+  );
+
+  return (
+    <ChoiceEditor
+      initialChoices={choices}
+      onSave={handleSave}
+      onClose={onClose}
+      onDirtyChange={onDirtyChange}
+      showCategories={false}
+      hideButtons={hideButtons}
+      initialDefaultValue={options?.defaultValue ?? null}
+      multiDefault={property.type === "multiSelect"}
+      dropdownPortalTarget={dropdownPortalTarget}
+    />
+  );
+}
+
+function StatusOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const options = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = useMemo(() => options?.choices ?? [], [options?.choices]);
+
+  const handleSave = useCallback(
+    (newChoices: Choice[], defaultValue: string | string[] | null) => {
+      onUpdate({
+        ...property.typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+        defaultValue,
+      });
+    },
+    [property.typeOptions, onUpdate],
+  );
+
+  return (
+    <ChoiceEditor
+      initialChoices={choices}
+      onSave={handleSave}
+      onClose={onClose}
+      onDirtyChange={onDirtyChange}
+      showCategories
+      hideButtons={hideButtons}
+      initialDefaultValue={options?.defaultValue ?? null}
+      dropdownPortalTarget={dropdownPortalTarget}
+    />
+  );
+}
+
+function NumberOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+  const options = draft as NumberTypeOptions;
+
+  return (
+    <Stack gap="xs">
+      <Select
+        size="xs"
+        label={t("Format")}
+        allowDeselect={false}
+        checkIconPosition="right"
+        comboboxProps={{ portalProps: { target: dropdownPortalTarget ?? undefined } }}
+        data={[
+          { value: "plain", label: t("Number") },
+          { value: "currency", label: t("Currency") },
+          { value: "percent", label: t("Percent") },
+          { value: "progress", label: t("Progress") },
+        ]}
+        value={options.format ?? "plain"}
+        onChange={(val) => update({ format: val ?? "plain" })}
+      />
+      {options.format === "currency" && (
+        <Select
+          size="xs"
+          label={t("Currency")}
+          allowDeselect={false}
+          checkIconPosition="right"
+          comboboxProps={{ portalProps: { target: dropdownPortalTarget ?? undefined } }}
+          data={CURRENCIES.map((c) => ({
+            value: c.code,
+            label: `${c.name} (${c.code})`,
+          }))}
+          value={options.currencyCode ?? DEFAULT_CURRENCY_CODE}
+          onChange={(val) =>
+            update({ currencyCode: val ?? DEFAULT_CURRENCY_CODE })
+          }
+        />
+      )}
+      <Select
+        size="xs"
+        label={t("Thousands and decimal separators")}
+        allowDeselect={false}
+        checkIconPosition="right"
+        comboboxProps={{ portalProps: { target: dropdownPortalTarget ?? undefined } }}
+        data={[
+          { value: "none", label: t("None") },
+          { value: "local", label: t("Local") },
+          { value: "comma_period", label: t("Comma, period") },
+          { value: "period_comma", label: t("Period, comma") },
+          { value: "space_comma", label: t("Space, comma") },
+          { value: "space_period", label: t("Space, period") },
+        ]}
+        value={options.separators ?? "none"}
+        onChange={(val) => update({ separators: val ?? "none" })}
+      />
+      <Select
+        size="xs"
+        label={t("Decimal places")}
+        allowDeselect={false}
+        checkIconPosition="right"
+        comboboxProps={{ portalProps: { target: dropdownPortalTarget ?? undefined } }}
+        data={[
+          { value: "default", label: t("Default") },
+          ...Array.from({ length: 9 }, (_, i) => ({
+            value: String(i),
+            label: String(i),
+          })),
+        ]}
+        value={options.precision == null ? "default" : String(options.precision)}
+        onChange={(val) =>
+          update({ precision: val == null || val === "default" ? undefined : Number(val) })
+        }
+      />
+      <NumberInput
+        size="xs"
+        label={t("Default value")}
+        placeholder={t("None")}
+        value={typeof options.defaultValue === "number" ? options.defaultValue : ""}
+        onChange={(val) =>
+          update({ defaultValue: typeof val === "number" ? val : undefined })
+        }
+      />
+      {!hideButtons && (
+        <OptionsFooter isDirty={isDirty} onCancel={cancel} onSave={save} />
+      )}
+    </Stack>
+  );
+}
+
+function DateOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+  const options = draft as DateTypeOptions;
+
+  return (
+    <Stack gap="xs">
+      <Switch
+        size="xs"
+        label={t("Include time")}
+        checked={options.includeTime ?? false}
+        onChange={(e) => update({ includeTime: e.currentTarget.checked })}
+      />
+      {options.includeTime && (
+        <Select
+          size="xs"
+          label={t("Time format")}
+          allowDeselect={false}
+          checkIconPosition="right"
+          comboboxProps={{ portalProps: { target: dropdownPortalTarget ?? undefined } }}
+          data={[
+            { value: "12h", label: "12-hour" },
+            { value: "24h", label: "24-hour" },
+          ]}
+          value={options.timeFormat ?? "12h"}
+          onChange={(val) => update({ timeFormat: val ?? "12h" })}
+        />
+      )}
+      {!hideButtons && (
+        <OptionsFooter isDirty={isDirty} onCancel={cancel} onSave={save} />
+      )}
+    </Stack>
+  );
+}
+
+function PersonOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+  dropdownPortalTarget,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+  const options = draft as PersonTypeOptions;
+  const allowMultiple = options.allowMultiple === true;
+
+  const handleAllowMultipleChange = (toMulti: boolean) => {
+    const dv = options.defaultValue;
+    const ids = Array.isArray(dv) ? dv : dv ? [dv] : [];
+    update({
+      allowMultiple: toMulti,
+      defaultValue: toMulti ? (ids.length ? ids : undefined) : ids[0],
+    });
+  };
+
+  return (
+    <Stack gap="xs">
+      <Switch
+        size="xs"
+        label={t("Allow multiple people")}
+        checked={allowMultiple}
+        onChange={(e) => handleAllowMultipleChange(e.currentTarget.checked)}
+      />
+      <FilterPersonInput
+        pageId={property.pageId}
+        multiple={allowMultiple}
+        value={options.defaultValue ?? null}
+        onChange={(value) =>
+          update({ defaultValue: value as string | string[] | undefined })
+        }
+        placeholder={t("None")}
+        label={t("Default value")}
+        w="100%"
+        portalTarget={dropdownPortalTarget}
+      />
+      {!hideButtons && (
+        <OptionsFooter isDirty={isDirty} onCancel={cancel} onSave={save} />
+      )}
+    </Stack>
+  );
+}
+
+const EMAIL_FORMAT = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function TextDefaultOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+  const defaultValue =
+    typeof draft.defaultValue === "string" ? draft.defaultValue : "";
+  const defaultValueError =
+    defaultValue && property.type === "url" && !URL.canParse(defaultValue)
+      ? t("Please enter a valid url")
+      : defaultValue &&
+          property.type === "email" &&
+          !EMAIL_FORMAT.test(defaultValue)
+        ? t("Please enter a valid email")
+        : null;
+
+  return (
+    <Stack gap="xs">
+      {property.type === "longText" ? (
+        <Textarea
+          size="xs"
+          label={t("Default value")}
+          placeholder={t("None")}
+          autosize
+          minRows={2}
+          maxRows={6}
+          value={defaultValue}
+          onChange={(e) =>
+            update({
+              defaultValue: e.currentTarget.value.trim()
+                ? e.currentTarget.value
+                : undefined,
+            })
+          }
+        />
+      ) : (
+        <TextInput
+          size="xs"
+          label={t("Default value")}
+          placeholder={
+            property.type === "url"
+              ? "https://example.com"
+              : property.type === "email"
+                ? "name@example.com"
+                : t("None")
+          }
+          value={defaultValue}
+          error={defaultValueError}
+          onChange={(e) =>
+            update({
+              defaultValue: e.currentTarget.value.trim()
+                ? e.currentTarget.value
+                : undefined,
+            })
+          }
+        />
+      )}
+      {!hideButtons && (
+        <OptionsFooter
+          isDirty={isDirty && !defaultValueError}
+          onCancel={cancel}
+          onSave={save}
+        />
+      )}
+    </Stack>
+  );
+}
+
+function CheckboxOptions({
+  property,
+  onUpdate,
+  onClose,
+  onDirtyChange,
+  hideButtons,
+}: OptionEditorProps) {
+  const { t } = useTranslation();
+  const { draft, update, isDirty, save, cancel } = useEditableTypeOptions(
+    property.typeOptions as Record<string, unknown> | undefined,
+    { onUpdate, onClose, onDirtyChange, hideButtons },
+  );
+
+  return (
+    <Stack gap="xs">
+      <Switch
+        size="xs"
+        label={t("Checked by default")}
+        checked={draft.defaultValue === true}
+        onChange={(e) =>
+          update({ defaultValue: e.currentTarget.checked ? true : undefined })
+        }
+      />
+      {!hideButtons && (
+        <OptionsFooter isDirty={isDirty} onCancel={cancel} onSave={save} />
+      )}
+    </Stack>
+  );
+}
@@ -1,51 +1,10 @@
 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 { IconCheck, IconSearch } from "@tabler/icons-react";
+import { BasePropertyType } from "@/ee/base/types/base.types";
+import { propertyTypes } from "@/ee/base/property-types/property-type.registry";
 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" },
-];
+import classes from "@/ee/base/styles/cells.module.css";

 type PropertyTypePickerProps = {
  onSelect: (type: BasePropertyType) => void;
@@ -82,7 +41,7 @@ export function PropertyTypePicker({
        <TextInput
          ref={searchRef}
          size="xs"
-          placeholder={t("Find a field type")}
+          placeholder={t("Find a property type")}
          leftSection={<IconSearch size={14} />}
          value={search}
          onChange={(e) => setSearch(e.currentTarget.value)}
@@ -110,5 +69,3 @@ export function PropertyTypePicker({
    </>
  );
 }
-
-export { propertyTypes };
@@ -0,0 +1,142 @@
+import { forwardRef } from "react";
+import { Checkbox } from "@mantine/core";
+import { IconLock } from "@tabler/icons-react";
+import clsx from "clsx";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { FieldText } from "./field-text";
+import { FieldLongText } from "./field-long-text";
+import { FieldNumber } from "./field-number";
+import { FieldDate } from "./field-date";
+import { FieldChoice } from "./field-choice";
+import { FieldCellAdapter } from "./field-cell-adapter";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+export type FieldProps = {
+  property: IBaseProperty;
+  value: unknown;
+  rowId: string;
+  readOnly: boolean;
+  onChange: (value: unknown) => void;
+};
+
+type FieldShellProps = {
+  /** Visual + cursor treatment: text caret, pointer (opens a picker), or none. */
+  cursor?: "text" | "pointer" | "default";
+  /** Popover open — keeps the focus ring while focus is in the portal. */
+  active?: boolean;
+  locked?: boolean;
+  alignTop?: boolean;
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+// forwardRef is load-bearing: Popover.Target anchors its dropdown through a
+// ref injected into this element; without it the picker renders at (0,0).
+export const FieldShell = forwardRef<HTMLDivElement, FieldShellProps>(
+  function FieldShell(
+    { cursor = "default", active, locked, alignTop, className, children, ...rest },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          classes.fieldShell,
+          cursor === "text" && classes.fieldShellText,
+          cursor === "pointer" && classes.fieldShellPointer,
+          active && classes.fieldShellActive,
+          locked && classes.fieldShellLocked,
+          alignTop && classes.fieldShellTop,
+          className,
+        )}
+        {...rest}
+      >
+        {locked && <IconLock size={13} className={classes.fieldLockIcon} />}
+        {children}
+      </div>
+    );
+  },
+);
+
+function FieldCheckbox({ value, readOnly, onChange }: FieldProps) {
+  const checked = value === true;
+  return (
+    <FieldShell>
+      <Checkbox
+        size="sm"
+        checked={checked}
+        disabled={readOnly}
+        onChange={() => onChange(!checked)}
+      />
+    </FieldShell>
+  );
+}
+
+function FieldReadonlyCell({ property, value, rowId }: FieldProps) {
+  const CellComponent = getDescriptor(property.type)?.cellComponent;
+  return (
+    <FieldShell locked>
+      <div className={classes.fieldCellDisplay}>
+        {CellComponent && (
+          <CellComponent
+            value={value}
+            property={property}
+            rowId={rowId}
+            isEditing={false}
+            readOnly
+            onCommit={() => {}}
+            onValueChange={() => {}}
+            onCancel={() => {}}
+          />
+        )}
+      </div>
+    </FieldShell>
+  );
+}
+
+type DetailFieldProps = {
+  property: IBaseProperty;
+  row: IBaseRow;
+  readOnly: boolean;
+  onUpdate: (propertyId: string, value: unknown) => void;
+};
+
+export function DetailField({ property, row, readOnly, onUpdate }: DetailFieldProps) {
+  const descriptor = getDescriptor(property.type);
+  const value = descriptor?.systemAccessor
+    ? descriptor.systemAccessor(row)
+    : (row.cells ?? {})[property.id];
+  const fieldProps: FieldProps = {
+    property,
+    value,
+    rowId: row.id,
+    readOnly,
+    onChange: (next: unknown) => onUpdate(property.id, next),
+  };
+
+  switch (property.type) {
+    case "text":
+    case "url":
+    case "email":
+      return <FieldText {...fieldProps} />;
+    case "longText":
+      return <FieldLongText {...fieldProps} />;
+    case "number":
+      return <FieldNumber {...fieldProps} />;
+    case "checkbox":
+      return <FieldCheckbox {...fieldProps} />;
+    case "date":
+      return <FieldDate {...fieldProps} />;
+    case "select":
+    case "status":
+    case "multiSelect":
+      return <FieldChoice {...fieldProps} />;
+    case "person":
+    case "file":
+    case "page":
+      return <FieldCellAdapter {...fieldProps} />;
+    default:
+      // createdAt, lastEditedAt, lastEditedBy, formula and future types.
+      return <FieldReadonlyCell {...fieldProps} />;
+  }
+}
@@ -0,0 +1,80 @@
+import { useCallback, useRef, useState } from "react";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+/** Person, file and page editors are popover pickers owned by their cell
+ *  components; the shell supplies modal styling and click-anywhere
+ *  activation while the cell keeps its picker behavior. */
+export function FieldCellAdapter({
+  property,
+  value,
+  rowId,
+  readOnly,
+  onChange,
+}: FieldProps) {
+  const [editing, setEditing] = useState(false);
+  // Whether the picker was open when the current gesture's mousedown fired.
+  const editingAtMouseDownRef = useRef(false);
+  const CellComponent = getDescriptor(property.type)?.cellComponent;
+
+  // Files stay openable read-only (download-only popover), matching the grid.
+  const canActivate = !readOnly || property.type === "file";
+
+  // Activate on click, not mousedown: opening on mousedown mounts the cell's
+  // picker mid-dispatch, and its document-level outside-mousedown listener
+  // then catches the same still-bubbling event and instantly closes it. By
+  // click time the mousedown has fully finished. The ref keeps toggle-close
+  // working: when the gesture started with the picker open, the picker's own
+  // outside-close already handled it and we must not reopen.
+  const handleMouseDown = useCallback(() => {
+    editingAtMouseDownRef.current = editing;
+  }, [editing]);
+
+  const handleClick = useCallback(() => {
+    if (!canActivate || editingAtMouseDownRef.current || editing) return;
+    setEditing(true);
+  }, [canActivate, editing]);
+
+  const handleCommit = useCallback(
+    (next: unknown) => {
+      setEditing(false);
+      onChange(next);
+    },
+    [onChange],
+  );
+  const handleCancel = useCallback(() => setEditing(false), []);
+
+  if (!CellComponent) return <FieldShell />;
+
+  return (
+    <FieldShell
+      cursor={canActivate ? "pointer" : "default"}
+      active={editing}
+      onMouseDown={handleMouseDown}
+      onClick={handleClick}
+      role={canActivate ? "button" : undefined}
+      tabIndex={canActivate ? 0 : undefined}
+      aria-label={property.name}
+      onKeyDown={(e) => {
+        if (canActivate && !editing && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          setEditing(true);
+        }
+      }}
+    >
+      <div className={classes.fieldCellDisplay}>
+        <CellComponent
+          value={value}
+          property={property}
+          rowId={rowId}
+          isEditing={editing}
+          readOnly={readOnly}
+          onCommit={handleCommit}
+          onValueChange={onChange}
+          onCancel={handleCancel}
+        />
+      </div>
+    </FieldShell>
+  );
+}
@@ -0,0 +1,103 @@
+import { useCallback, useState } from "react";
+import { Popover } from "@mantine/core";
+import { Choice, SelectTypeOptions } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoicePicker } from "@/ee/base/components/cells/choice-picker";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+export function FieldChoice({ property, value, readOnly, onChange }: FieldProps) {
+  const [opened, setOpened] = useState(false);
+  const multiple = property.type === "multiSelect";
+  const choices =
+    (property.typeOptions as SelectTypeOptions | undefined)?.choices ?? [];
+
+  const selectedIds = multiple
+    ? Array.isArray(value)
+      ? (value as string[])
+      : []
+    : typeof value === "string"
+      ? [value]
+      : [];
+  const selectedChoices = choices.filter((c) => selectedIds.includes(c.id));
+
+  const handleToggle = useCallback(
+    (choice: Choice) => {
+      if (multiple) {
+        const next = selectedIds.includes(choice.id)
+          ? selectedIds.filter((id) => id !== choice.id)
+          : [...selectedIds, choice.id];
+        onChange(next.length > 0 ? next : null);
+      } else {
+        onChange(choice.id === selectedIds[0] ? null : choice.id);
+        setOpened(false);
+      }
+    },
+    [multiple, selectedIds, onChange],
+  );
+
+  const chips = selectedChoices.map((choice) => (
+    <span
+      key={choice.id}
+      className={cellClasses.badge}
+      style={choiceColor(choice.color)}
+    >
+      {choice.name}
+    </span>
+  ));
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <div className={classes.fieldChips}>{chips}</div>
+      </FieldShell>
+    );
+  }
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom-start"
+      width="target"
+      shadow="md"
+      withinPortal
+      trapFocus
+      closeOnClickOutside
+      closeOnEscape={false}
+    >
+      <Popover.Target>
+        <FieldShell
+          cursor="pointer"
+          active={opened}
+          role="button"
+          tabIndex={0}
+          aria-label={property.name}
+          onClick={() => setOpened((o) => !o)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setOpened((o) => !o);
+            }
+          }}
+        >
+          <div className={classes.fieldChips}>{chips}</div>
+        </FieldShell>
+      </Popover.Target>
+      <Popover.Dropdown p={4}>
+        {opened && (
+          <ChoicePicker
+            property={property}
+            selectedIds={selectedIds}
+            multiple={multiple}
+            grouped={property.type === "status"}
+            allowCreate={property.type !== "status"}
+            onToggle={handleToggle}
+            onEscape={() => setOpened(false)}
+          />
+        )}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { Popover } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import { DateTypeOptions } from "@/ee/base/types/base.types";
+import { formatDateDisplay } from "@/ee/base/components/cells/cell-date";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+function toISODateString(dateStr: string | null): string | null {
+  if (!dateStr) return null;
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return null;
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function FieldDate({ property, value, readOnly, onChange }: FieldProps) {
+  const [opened, setOpened] = useState(false);
+  const typeOptions = property.typeOptions as DateTypeOptions | undefined;
+  const dateStr = typeof value === "string" ? value : null;
+  const display = formatDateDisplay(dateStr, typeOptions);
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <span className={classes.fieldValueText}>{display}</span>
+      </FieldShell>
+    );
+  }
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom-start"
+      width="auto"
+      shadow="md"
+      withinPortal
+      trapFocus
+      closeOnClickOutside
+      closeOnEscape
+    >
+      <Popover.Target>
+        <FieldShell
+          cursor="pointer"
+          active={opened}
+          role="button"
+          tabIndex={0}
+          aria-label={property.name}
+          onClick={() => setOpened((o) => !o)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setOpened((o) => !o);
+            }
+          }}
+        >
+          <span className={classes.fieldValueText}>{display}</span>
+        </FieldShell>
+      </Popover.Target>
+      <Popover.Dropdown p="xs">
+        <DatePicker
+          value={toISODateString(dateStr)}
+          onChange={(selected) => {
+            onChange(selected ? new Date(selected).toISOString() : null);
+            setOpened(false);
+          }}
+          size="sm"
+        />
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from "react";
+import { Textarea } from "@mantine/core";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+const toText = (value: unknown) => (typeof value === "string" ? value : "");
+const normalize = (s: string) => {
+  const trimmed = s.trim();
+  return trimmed.length ? trimmed : null;
+};
+
+export function FieldLongText({ property, value, readOnly, onChange }: FieldProps) {
+  const text = toText(value);
+  const [draft, setDraft] = useState(text);
+  const [focused, setFocused] = useState(false);
+  // Esc sets this; blur() then runs commit synchronously with the stale
+  // draft, so the revert must be decided here, not via setDraft.
+  const cancelRef = useRef(false);
+
+  useEffect(() => {
+    if (!focused) setDraft(text);
+  }, [text, focused]);
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelRef.current) {
+      cancelRef.current = false;
+      setDraft(text);
+      return;
+    }
+    if (normalize(draft) !== normalize(text)) onChange(normalize(draft));
+  };
+
+  if (readOnly) {
+    return (
+      <FieldShell alignTop>
+        <span className={classes.fieldValueTextMultiline}>{text}</span>
+      </FieldShell>
+    );
+  }
+
+  return (
+    <FieldShell cursor="text" alignTop>
+      <Textarea
+        autosize
+        minRows={3}
+        maxRows={16}
+        maxLength={25000}
+        variant="unstyled"
+        className={classes.fieldTextarea}
+        classNames={{ input: classes.fieldTextareaInput }}
+        value={draft}
+        onFocus={() => setFocused(true)}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            cancelRef.current = true;
+            e.currentTarget.blur();
+          } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            e.preventDefault();
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={property.name}
+      />
+    </FieldShell>
+  );
+}
@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from "react";
+import { NumberTypeOptions } from "@/ee/base/types/base.types";
+import {
+  formatNumber,
+  parseNumberDraft,
+  sanitizeNumberInput,
+} from "@/ee/base/components/cells/cell-number";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+const toDraft = (value: unknown) =>
+  typeof value === "number" ? String(value) : "";
+
+export function FieldNumber({ property, value, readOnly, onChange }: FieldProps) {
+  const typeOptions = property.typeOptions as NumberTypeOptions | undefined;
+  const numValue = typeof value === "number" ? value : null;
+  const [draft, setDraft] = useState(toDraft(value));
+  const [focused, setFocused] = useState(false);
+  // Esc sets this; blur() then runs commit synchronously with the stale
+  // draft, so the revert must be decided here, not via setDraft.
+  const cancelRef = useRef(false);
+
+  useEffect(() => {
+    if (!focused) setDraft(toDraft(value));
+  }, [value, focused]);
+
+  const formatted = formatNumber(numValue, typeOptions);
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <span className={classes.fieldValueText}>{formatted}</span>
+      </FieldShell>
+    );
+  }
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelRef.current) {
+      cancelRef.current = false;
+      setDraft(toDraft(value));
+      return;
+    }
+    if (parseNumberDraft(draft) !== numValue) onChange(parseNumberDraft(draft));
+  };
+
+  return (
+    <FieldShell cursor="text">
+      <input
+        type="text"
+        inputMode="decimal"
+        className={classes.fieldInput}
+        value={focused ? draft : formatted}
+        onFocus={() => {
+          setDraft(toDraft(value));
+          setFocused(true);
+        }}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (v === "" || v === "-" || /^-?\d*\.?\d*$/.test(v)) {
+            setDraft(v);
+          }
+        }}
+        onPaste={(e) => {
+          e.preventDefault();
+          const el = e.currentTarget;
+          const start = el.selectionStart ?? draft.length;
+          const end = el.selectionEnd ?? draft.length;
+          setDraft(
+            draft.slice(0, start) +
+              sanitizeNumberInput(e.clipboardData.getData("text")) +
+              draft.slice(end),
+          );
+        }}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            e.currentTarget.blur();
+          } else if (e.key === "Escape") {
+            cancelRef.current = true;
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={property.name}
+      />
+    </FieldShell>
+  );
+}
@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from "react";
+import { IconExternalLink, IconMail } from "@tabler/icons-react";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+const toText = (value: unknown) => (typeof value === "string" ? value : "");
+
+export function FieldText({ property, value, readOnly, onChange }: FieldProps) {
+  const text = toText(value);
+  const [draft, setDraft] = useState(text);
+  const [focused, setFocused] = useState(false);
+  // Esc sets this; blur() then runs commit synchronously with the stale
+  // draft, so the revert must be decided here, not via setDraft.
+  const cancelRef = useRef(false);
+
+  // Track remote/navigation updates while not typing.
+  useEffect(() => {
+    if (!focused) setDraft(text);
+  }, [text, focused]);
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelRef.current) {
+      cancelRef.current = false;
+      setDraft(text);
+      return;
+    }
+    if (draft !== text) onChange(draft);
+  };
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <span className={classes.fieldValueText}>{text}</span>
+      </FieldShell>
+    );
+  }
+
+  const linkHref =
+    !focused && text
+      ? property.type === "email"
+        ? text.includes("@")
+          ? `mailto:${text}`
+          : null
+        : property.type === "url" && /^https?:\/\//i.test(text)
+          ? text
+          : null
+      : null;
+
+  return (
+    <FieldShell cursor="text">
+      <input
+        type="text"
+        className={classes.fieldInput}
+        value={draft}
+        maxLength={1000}
+        onFocus={() => setFocused(true)}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            e.currentTarget.blur();
+          } else if (e.key === "Escape") {
+            cancelRef.current = true;
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={property.name}
+      />
+      {linkHref && (
+        <a
+          href={linkHref}
+          target={property.type === "url" ? "_blank" : undefined}
+          rel="noopener noreferrer"
+          className={classes.fieldTrailing}
+          onMouseDown={(e) => e.stopPropagation()}
+          aria-label={property.type === "email" ? `Email ${text}` : `Open ${text}`}
+        >
+          {property.type === "email" ? (
+            <IconMail size={14} />
+          ) : (
+            <IconExternalLink size={14} />
+          )}
+        </a>
+      )}
+    </FieldShell>
+  );
+}
@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useRef } from "react";
+import clsx from "clsx";
+import { Popover } from "@mantine/core";
+import { IconChevronDown } from "@tabler/icons-react";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { PropertyMenuContent } from "@/ee/base/components/property/property-menu";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { DetailField } from "./fields/detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+type PropertyRowProps = {
+  property: IBaseProperty;
+  row: IBaseRow;
+  pageId: string;
+  menuOpened: boolean;
+  onMenuOpenChange: (opened: boolean) => void;
+  onMenuDirtyChange: (dirty: boolean) => void;
+  onUpdate: (propertyId: string, value: unknown) => void;
+  autoFocusValue?: boolean;
+  onAutoFocused?: () => void;
+};
+
+export function PropertyRow({
+  property,
+  row,
+  pageId,
+  menuOpened,
+  onMenuOpenChange,
+  onMenuDirtyChange,
+  onUpdate,
+  autoFocusValue,
+  onAutoFocused,
+}: PropertyRowProps) {
+  const canEdit = useBaseEditable();
+  const rowRef = useRef<HTMLDivElement>(null);
+  const focusedRef = useRef(false);
+
+  useEffect(() => {
+    if (!autoFocusValue || focusedRef.current) return;
+    focusedRef.current = true;
+    const el = rowRef.current;
+    if (el) {
+      el.scrollIntoView({ block: "nearest" });
+      el.querySelector<HTMLElement>("input, textarea")?.focus();
+    }
+    onAutoFocused?.();
+  }, [autoFocusValue, onAutoFocused]);
+
+  const handleLabelClick = useCallback(() => {
+    onMenuOpenChange(!menuOpened);
+  }, [menuOpened, onMenuOpenChange]);
+
+  const handleMenuClose = useCallback(() => {
+    onMenuOpenChange(false);
+  }, [onMenuOpenChange]);
+
+  const Icon = getDescriptor(property.type)?.icon;
+
+  const label = (
+    <>
+      {Icon && <Icon size={15} className={classes.propertyLabelIcon} />}
+      <span className={classes.propertyLabelText}>{property.name}</span>
+    </>
+  );
+
+  return (
+    <div className={classes.propertyRow} ref={rowRef}>
+      {canEdit ? (
+        <Popover
+          opened={menuOpened}
+          position="bottom-start"
+          shadow="md"
+          width={260}
+          withinPortal
+          closeOnClickOutside={false}
+          closeOnEscape={false}
+        >
+          <Popover.Target>
+            <button
+              type="button"
+              className={clsx(classes.propertyLabel, classes.propertyLabelButton, {
+                [classes.propertyLabelActive]: menuOpened,
+              })}
+              onClick={handleLabelClick}
+              data-property-menu-target
+            >
+              {label}
+              <IconChevronDown size={13} className={classes.propertyLabelChevron} />
+            </button>
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <PropertyMenuContent
+              property={property}
+              opened={menuOpened}
+              onClose={handleMenuClose}
+              onDirtyChange={onMenuDirtyChange}
+              pageId={pageId}
+            />
+          </Popover.Dropdown>
+        </Popover>
+      ) : (
+        <div className={classes.propertyLabel}>{label}</div>
+      )}
+      <DetailField
+        property={property}
+        row={row}
+        readOnly={!canEdit}
+        onUpdate={onUpdate}
+      />
+    </div>
+  );
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	398bd499cc	fix tsconfig	2026-06-15 19:43:01 +01:00
Philipinho	b386f8286c	license file	2026-06-15 19:12:18 +01:00
Philipinho	a45dd8919d	fix: change permissions object shape	2026-06-15 17:51:12 +01:00
Philipinho	ab1b3723bc	fix(base): refer to the feature as 'base' rather than 'database'	2026-06-15 09:46:08 +01:00
Philipinho	748401e1d4	fix(base): render view-tab rename as an inline pill so the tab band height stays put	2026-06-15 08:29:29 +01:00
Philipinho	6a6de54c92	fix(base): show cell focus ring only while the grid body itself is focused	2026-06-15 08:05:14 +01:00
Philipinho	07bfa3ba73	fix(base): close view popovers on Escape regardless of focus; drop redundant property switch tab stop	2026-06-15 05:23:19 +01:00
Philipinho	1b5c081e1e	fix(base): tab from long-text editor moves to next cell instead of leaving the table	2026-06-15 04:54:23 +01:00
Philipinho	8fc538386d	fix(base): sync header/body horizontal scroll on header focus; expand row via Space, drop expander from tab order	2026-06-15 04:08:52 +01:00
Philipinho	cc951ae883	feat(base): keyboard-navigate the row-number column for selection	2026-06-15 03:59:03 +01:00
Philipinho	84faf187de	fix(base): show cell focus ring only while the grid is focused	2026-06-15 03:41:16 +01:00
Philipinho	7af1695c85	fix(base): remove focus outline on grid container	2026-06-15 03:26:32 +01:00
Philipinho	308079af8b	feat(base): make column headers keyboard-focusable as tab stops	2026-06-15 03:13:27 +01:00
Philipinho	16708cd7cc	feat(base): seed editor value on type-to-edit for free-text cells	2026-06-15 02:39:04 +01:00
Philipinho	514c68e049	feat(base): row ARIA index and selected state	2026-06-15 02:34:00 +01:00
Philipinho	dec87947cf	feat(base): cell focus ring, click-to-focus, and gridcell ARIA	2026-06-15 02:31:32 +01:00
Philipinho	bb7fddfc54	update offerings	2026-06-15 02:27:31 +01:00
Philipinho	f5831a256a	feat(base): keyboard navigation controller and grid wiring	2026-06-15 02:13:59 +01:00
Philipinho	b8f56fee03	feat(base): add pure next-cell navigation helper	2026-06-15 02:08:33 +01:00
Philipinho	b88f56cb90	feat(base): add cell focus-ring style	2026-06-15 02:07:08 +01:00
Philipinho	3bfe0c0b7d	feat(base): add focused-cell atom and cell coordinate types	2026-06-15 02:02:38 +01:00
Philipinho	6187150224	fix number precision	2026-06-15 01:14:17 +01:00
Philipinho	4b5f42cc9b	feat: translation	2026-06-14 21:45:31 +01:00
Philipinho	f1af3e78a1	feat: base nodeview menu	2026-06-14 15:32:36 +01:00
Philipinho	7d98c7c069	fix: base trash list handling	2026-06-14 15:31:50 +01:00
Philipinho	d4bcc43ec9	- default status - type fix - error helper	2026-06-14 11:28:39 +01:00
Philipinho	4e5bff6d55	feat(ee): bases Table and kanban UI, formula engine package, and the base-embed editor extension	2026-06-14 01:29:06 +01:00
Peter Tripp	d86d51c27e	fix: Table jitter on edit/read toggle (#2252 )	2026-06-03 11:31:45 +01:00
Philipinho	ef04c22aea	sync	2026-05-28 16:57:59 +01:00
Philipinho	b6760c63c4	fix: package updates	2026-05-28 16:39:47 +01:00
Philipinho	2b68879e72	0.90.1	2026-05-28 16:36:18 +01:00
Philipinho	db32910634	fix; change inline code text color	2026-05-28 16:35:37 +01:00
Philip Okugbe	33895b0607	bug fixes (#2250 ) * util * fix page position collation * support fixed toolbar in templates editor * date localization * fix clipped emoji in templates editor * fix page updated time object * fix flickers * fix: remove redundant breadcrumb from destination modal	2026-05-28 16:20:37 +01:00
Philipinho	830b5b4d45	fix synced block	2026-05-25 19:17:14 +01:00