fix: templates creation UI gating

* feat(ee): bases
Table and kanban UI, formula engine package, and the base-embed editor extension.

* - default status
- type fix
- error helper

* fix: base trash list handling

* feat: base nodeview menu

* feat: translation

* fix number precision

* feat(base): add focused-cell atom and cell coordinate types

* feat(base): add cell focus-ring style

* feat(base): add pure next-cell navigation helper

* feat(base): keyboard navigation controller and grid wiring

* update offerings

* feat(base): cell focus ring, click-to-focus, and gridcell ARIA

* feat(base): row ARIA index and selected state

* feat(base): seed editor value on type-to-edit for free-text cells

* feat(base): make column headers keyboard-focusable as tab stops

* fix(base): remove focus outline on grid container

* fix(base): show cell focus ring only while the grid is focused

* feat(base): keyboard-navigate the row-number column for selection

* fix(base): sync header/body horizontal scroll on header focus; expand row via Space, drop expander from tab order

* fix(base): tab from long-text editor moves to next cell instead of leaving the table

* fix(base): close view popovers on Escape regardless of focus; drop redundant property switch tab stop

* fix(base): show cell focus ring only while the grid body itself is focused

* fix(base): render view-tab rename as an inline pill so the tab band height stays put

* fix(base): refer to the feature as 'base' rather than 'database'

* fix: change permissions object shape

* license file

* fix tsconfig

* fix base cache

* fix: preserve sidebar title/icon on partial page updates

* fix: skip duplicate row fetch when opening new kanban card

* fix refetch

* fix focus

* fix spacing

* fix(base): select grid cell on mousedown to avoid stale focus ring flash

The focus ring is gated on the grid having DOM focus (.bodyGrid:focus .cellFocused), but the focusedCell atom is never cleared when the grid blurs. Clicking outside hides the ring via the :focus gate while the atom still points at the old cell.

Selection was committed on click (mouseup), while the grid receives focus on mousedown. Clicking a new cell re-focused the grid before the atom updated, briefly painting the ring on the previously selected cell. Commit selection on mousedown so the atom updates in the same event that grants focus, before the browser paints.

* fix: activate New row button via keyboard (Enter/Space)

The New row control is a role=button div with no keydown handler, so Enter/Space never triggered it. It also lives inside the grid element, whose native keydown listener caught the Enter and ran cell navigation against the previously focused cell.

Add Enter/Space activation to the button, and make the grid keyboard handler ignore keydowns that originate from a focusable child rather than the grid element itself, so in-grid controls handle their own keys.

* fix(base): keep add-property popover within viewport on mobile

Opened from the row detail modal, the create-property popover anchors to the bottom Add property button and flips upward on small screens, clipping its top (name field, formula editor) off-screen with no way to scroll to it.

Bound the dropdown to the available height with the floating-ui size middleware and give it an internal scroll container. Disable react-remove-scroll isolation on the modal so the body-portaled popover can scroll on touch while the modal scroll lock stays active.

* fix(base): enable grid cell editing on touch devices

Cells could only enter edit mode via double-click or a physical keyboard,
so touch devices had no way to edit a cell. Treat a touch/pen tap as the
edit gesture, distinguishing a tap from a scroll by movement and branching
per pointer type so mouse double-click stays unchanged. Also reveal the
row expand button on hover-less devices so the row detail view stays
reachable.

* feat(editor): add base and kanban inserts to the toolbar

* feat(base): insert row below via Shift+Enter on the primary cell

* fix(base): place caret at end instead of selecting all when editing cells

* fix(base): prevent popover inputs from losing focus on mobile in row detail modal

* fix grid cells on mobile

* sync

* fix: read-only export

* feat(base): add prefixed nanoid id schemas and generators

* feat(base): enforce strict property/choice id validation

* feat(base): make property id varchar with per-base composite pk

* feat(base): pass property id as text to cell extractors

* feat(base): scope property lookups per base and generate property ids in repo

* feat(base): generate status template choice ids as nanoid

* feat(base): generate choice ids as nanoid on the client

* chore(base): seed choice ids with nanoid

* fix(base): mint kanban choice ids as nanoid

* sync

* sync

* sync

.dockerignore

@@ -1,6 +1,6 @@
-node_modules
-.git
-dist
+**/node_modules
+**/.git
+**/dist
 /data
-.env*
-.nx
+**/.env*
+**/.nx

.gitignore

@@ -3,7 +3,7 @@
 .env.prod
 data
 # compiled output
-/dist
+dist
 /node_modules
 
 # Logs

Dockerfile

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

apps/client/package.json

@@ -18,21 +18,23 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
     "@casl/react": "5.0.1",
+    "@docmost/base-formula": "workspace:*",
     "@docmost/editor-ext": "workspace:*",
     "@excalidraw/excalidraw": "0.18.0-3a5ef40",
-    "@mantine/core": "8.3.18",
-    "@mantine/dates": "8.3.18",
-    "@mantine/form": "8.3.18",
-    "@mantine/hooks": "8.3.18",
-    "@mantine/modals": "8.3.18",
-    "@mantine/notifications": "8.3.18",
-    "@mantine/spotlight": "8.3.18",
+    "@mantine/core": "9.3.2",
+    "@mantine/dates": "9.3.2",
+    "@mantine/form": "9.3.2",
+    "@mantine/hooks": "9.3.2",
+    "@mantine/modals": "9.3.2",
+    "@mantine/notifications": "9.3.2",
+    "@mantine/spotlight": "9.3.2",
     "@slidoapp/emoji-mart": "5.8.7",
     "@slidoapp/emoji-mart-data": "1.2.4",
     "@slidoapp/emoji-mart-react": "1.1.5",
     "@tabler/icons-react": "3.40.0",
     "@tanstack/react-query": "5.90.17",
-    "@tanstack/react-virtual": "3.13.24",
+    "@tanstack/react-table": "8.21.3",
+    "@tanstack/react-virtual": "3.14.3",
     "alfaaz": "1.1.0",
     "axios": "1.16.0",
     "blueimp-load-image": "5.16.0",
@@ -41,7 +43,7 @@
     "highlightjs-sap-abap": "0.3.0",
     "i18next": "25.10.1",
     "i18next-http-backend": "3.0.6",
-    "jotai": "2.18.1",
+    "jotai": "2.20.1",
     "jotai-optics": "0.4.0",
     "js-cookie": "3.0.7",
     "jwt-decode": "4.0.0",
@@ -50,15 +52,16 @@
     "mantine-form-zod-resolver": "1.3.0",
     "mermaid": "11.15.0",
     "mitt": "3.0.1",
-    "posthog-js": "1.372.2",
-    "react": "18.3.1",
+    "nanoid": "3.3.8",
+    "posthog-js": "1.391.2",
+    "react": "19.2.7",
     "react-clear-modal": "^2.0.18",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.2.7",
     "react-drawio": "1.0.7",
     "react-error-boundary": "6.1.1",
     "react-helmet-async": "3.0.0",
     "react-i18next": "16.5.8",
-    "react-router-dom": "7.13.1",
+    "react-router-dom": "7.18.0",
     "semver": "7.7.4",
     "socket.io-client": "4.8.3",
     "zod": "4.3.6"
@@ -73,8 +76,8 @@
     "@types/js-cookie": "3.0.6",
     "@types/katex": "0.16.8",
     "@types/node": "22.19.1",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "6.0.1",
     "eslint": "9.28.0",
     "eslint-plugin-react": "7.37.5",
@@ -89,7 +92,7 @@
     "prettier": "3.8.1",
     "typescript": "5.9.3",
     "typescript-eslint": "8.57.1",
-    "vite": "8.0.5",
+    "vite": "8.0.16",
     "vitest": "4.1.6"
   }
 }

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

@@ -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",
@@ -599,6 +619,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",
@@ -968,6 +990,8 @@
   "Are you sure you want to delete this template?": "Are you sure you want to delete this template?",
   "Template scope updated": "Template scope updated",
   "Choose which space this template belongs to": "Choose which space this template belongs to",
+  "Only workspace admins can create global templates.": "Only workspace admins can create global templates.",
+  "You need edit access to this space to create templates.": "You need edit access to this space to create templates.",
   "Scope": "Scope",
   "Select scope": "Select scope",
   "Title": "Title",
@@ -1087,5 +1111,47 @@
   "Added {{name}} to favorites": "Added {{name}} to favorites",
   "Removed {{name}} from favorites": "Removed {{name}} from favorites",
   "Page menu for {{name}}": "Page menu for {{name}}",
-  "Create subpage of {{name}}": "Create subpage of {{name}}"
+  "Create subpage of {{name}}": "Create subpage of {{name}}",
+  "Allow personal spaces": "Allow personal spaces",
+  "Members can create their own personal space.": "Members can create their own personal space.",
+  "Toggle allow personal spaces": "Toggle allow personal spaces",
+  "Create personal space": "Create personal space",
+  "Personal space": "Personal space",
+  "{{name}}'s space": "{{name}}'s space",
+  "Apply": "Apply",
+  "Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
+  "Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
+  "Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
+  "Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
+  "Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+  "Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
+  "Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
+  "Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
+  "Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
+  "Change type": "Change type",
+  "Change type to {{label}}?": "Change type to {{label}}?",
+  "Converting…": "Converting…",
+  "Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded.",
+  "Previous record": "Previous record",
+  "Next record": "Next record",
+  "Record actions": "Record actions",
+  "Delete record": "Delete record",
+  "Delete record?": "Delete record?",
+  "This action cannot be undone.": "This action cannot be undone.",
+  "to navigate": "to navigate",
+  "to close": "to close",
+  "Expand row {{number}}": "Expand row {{number}}",
+  "Saving…": "Saving…",
+  "Read-only": "Read-only",
+  "Loading…": "Loading…",
+  "Updated {{when}}": "Updated {{when}}",
+  "Add property": "Add property",
+  "Create property": "Create property",
+  "Hide properties": "Hide properties",
+  "Find a property type": "Find a property type",
+  "Properties": "Properties"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "Oscuro",
   "Date": "Fecha",
   "Delete": "Eliminar",
+  "Remove from page": "Quitar de la página",
+  "Base options": "Opciones de la base",
   "Delete group": "Eliminar grupo",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "¿Está seguro de que desea eliminar esta página? Esto eliminará sus dependientes y el historial de la página. Esta acción es irreversible.",
   "Description": "Descripción",
@@ -76,6 +78,24 @@
   "Failed to import pages": "No se pudieron importar las páginas",
   "Failed to load page. An error occurred.": "Error al cargar la página. Se produjo un error.",
   "Failed to update data": "No se pudo actualizar los datos",
+  "Failed to create base": "No se pudo crear la base",
+  "Failed to update base": "No se pudo actualizar la base",
+  "Failed to delete base": "No se pudo eliminar la base",
+  "Failed to create property": "No se pudo crear la propiedad",
+  "Failed to update property": "No se pudo actualizar la propiedad",
+  "Failed to delete property": "No se pudo eliminar la propiedad",
+  "Failed to reorder property": "No se pudo reordenar la propiedad",
+  "Failed to create view": "No se pudo crear la vista",
+  "Failed to update view": "No se pudo actualizar la vista",
+  "Failed to delete view": "No se pudo eliminar la vista",
+  "Failed to create row": "No se pudo crear la fila",
+  "Failed to update row": "No se pudo actualizar la fila",
+  "Failed to delete row": "No se pudo eliminar la fila",
+  "Failed to delete rows": "No se pudieron eliminar las filas",
+  "Failed to reorder row": "No se pudo reordenar la fila",
+  "Failed to move card": "No se pudo mover la tarjeta",
+  "Failed to add card": "No se pudo añadir la tarjeta",
+  "Failed to export CSV": "No se pudo exportar el CSV",
   "Favorite spaces": "Espacios favoritos",
   "Favorite spaces appear here": "Los espacios favoritos aparecen aquí",
   "Favorites": "Favoritos",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Insertar diagrama Mermaid",
   "Insert and design Drawio diagrams": "Insertar y diseñar diagramas de Drawio",
   "Insert current date": "Insertar fecha actual",
+  "Time": "Hora",
+  "Insert current time": "Insertar hora actual",
   "Draw and sketch excalidraw diagrams": "Dibujar y crear bocetos de diagramas de Excalidraw",
   "Multiple": "Múltiple",
   "Turn into": "Convertir en",
@@ -424,6 +446,7 @@
   "Names do not match": "Los nombres no coinciden",
   "Today, {{time}}": "Hoy, {{time}}",
   "Yesterday, {{time}}": "Ayer, {{time}}",
+  "now": "ahora",
   "Space created successfully": "Espacio creado correctamente",
   "Space updated successfully": "Espacio actualizado correctamente",
   "Space deleted successfully": "Espacio eliminado correctamente",
@@ -596,6 +619,8 @@
   "Deleted by": "Eliminado por",
   "Deleted at": "Eliminado el",
   "Preview": "Vista previa",
+  "Base preview unavailable": "Vista previa de la base no disponible",
+  "Restore this base to view its contents.": "Restaura esta base para ver su contenido.",
   "Subpages": "Subpáginas",
   "Failed to load subpages": "No se pudieron cargar las subpáginas",
   "No subpages": "No hay subpáginas",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "Buscar páginas y espacios...",
   "No results found": "No se encontraron resultados",
   "You don't have permission to create pages here": "No tienes permiso para crear páginas aquí",
-  "Chat menu": "Menú del chat",
+  "Chat menu for {{title}}": "Menú del chat de {{title}}",
   "API key menu": "Menú de la clave API",
   "Jump to comment selection": "Ir a la selección de comentarios",
   "Slash commands": "Comandos de barra",
@@ -1063,7 +1088,7 @@
   "Filter": "Filtrar",
   "Page title": "Título de la página",
   "Page content": "Contenido de la página",
-  "Member actions": "Acciones de miembro",
+  "Member actions for {{name}}": "Acciones de miembro para {{name}}",
   "Toggle password visibility": "Alternar visibilidad de la contraseña",
   "Send comment": "Enviar comentario",
   "Token actions": "Acciones de token",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "Se agregó {{name}} a favoritos",
   "Removed {{name}} from favorites": "Se quitó {{name}} de favoritos",
   "Page menu for {{name}}": "Menú de página para {{name}}",
-  "Create subpage of {{name}}": "Crear subpágina de {{name}}"
+  "Create subpage of {{name}}": "Crear subpágina de {{name}}",
+  "Allow personal spaces": "Permitir espacios personales",
+  "Members can create their own personal space.": "Los miembros pueden crear su propio espacio personal.",
+  "Toggle allow personal spaces": "Alternar permitir espacios personales",
+  "Create personal space": "Crear espacio personal",
+  "Personal space": "Espacio personal",
+  "{{name}}'s space": "Espacio de {{name}}",
+  "Apply": "Aplicar",
+  "Cells that aren't already a page reference will be cleared.": "Las celdas que aún no sean una referencia de página se borrarán.",
+  "Cells that aren't a valid URL will be cleared.": "Las celdas que no sean una URL válida se borrarán.",
+  "Cells that aren't a valid email address will be cleared.": "Las celdas que no sean una dirección de correo electrónico válida se borrarán.",
+  "Cells that can't be parsed as a date will be cleared.": "Las celdas que no puedan interpretarse como una fecha se borrarán.",
+  "Cells that can't be parsed as a number will be cleared.": "Las celdas que no puedan interpretarse como un número se borrarán.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Las celdas se convertirán de forma forzada (yes/true/1 pasarán a estar marcadas; todo lo demás pasará a estar desmarcado o se borrará).",
+  "Cells will be reinterpreted under the new type.": "Las celdas se reinterpretarán según el nuevo tipo.",
+  "Cells will be replaced with a comma-separated list of file names.": "Las celdas se reemplazarán por una lista de nombres de archivo separados por comas.",
+  "Cells will be replaced with a comma-separated list of option names.": "Las celdas se reemplazarán por una lista de nombres de opciones separados por comas.",
+  "Cells will be replaced with the option name.": "Las celdas se reemplazarán por el nombre de la opción.",
+  "Cells will be replaced with the page title.": "Las celdas se reemplazarán por el título de la página.",
+  "Cells will be replaced with the person's name.": "Las celdas se reemplazarán por el nombre de la persona.",
+  "Change type": "Cambiar tipo",
+  "Change type to {{label}}?": "¿Cambiar el tipo a {{label}}?",
+  "Converting…": "Convirtiendo…",
+  "Existing values become single-item lists. No data is lost.": "Los valores existentes se convierten en listas de un solo elemento. No se pierde ningún dato.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Solo se conservará el primer elemento seleccionado por fila; el resto se descartará.",
+  "Previous record": "Registro anterior",
+  "Next record": "Siguiente registro",
+  "Record actions": "Acciones del registro",
+  "Delete record": "Eliminar registro",
+  "Delete record?": "¿Eliminar registro?",
+  "This action cannot be undone.": "Esta acción no se puede deshacer.",
+  "to navigate": "para navegar",
+  "to close": "para cerrar",
+  "Expand row {{number}}": "Expandir fila {{number}}",
+  "Saving…": "Guardando…",
+  "Read-only": "Solo lectura",
+  "Loading…": "Cargando…",
+  "Updated {{when}}": "Actualizado {{when}}",
+  "Add property": "Añadir propiedad",
+  "Create property": "Crear propiedad",
+  "Hide properties": "Ocultar propiedades",
+  "Find a property type": "Buscar un tipo de propiedad",
+  "Properties": "Propiedades"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "Sombre",
   "Date": "Date",
   "Delete": "Supprimer",
+  "Remove from page": "Supprimer de la page",
+  "Base options": "Options de la base",
   "Delete group": "Supprimer groupe",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Êtes-vous sûr de vouloir supprimer cette page ? Cela supprimera ses enfants et l'historique de la page. Cette action est irréversible.",
   "Description": "Description",
@@ -76,6 +78,24 @@
   "Failed to import pages": "Échec de l'importation des pages",
   "Failed to load page. An error occurred.": "Échec du chargement de la page. Une erreur s'est produite.",
   "Failed to update data": "Échec de la mise à jour des données",
+  "Failed to create base": "Échec de la création de la base",
+  "Failed to update base": "Échec de la mise à jour de la base",
+  "Failed to delete base": "Échec de la suppression de la base",
+  "Failed to create property": "Échec de la création de la propriété",
+  "Failed to update property": "Échec de la mise à jour de la propriété",
+  "Failed to delete property": "Échec de la suppression de la propriété",
+  "Failed to reorder property": "Échec de la réorganisation de la propriété",
+  "Failed to create view": "Échec de la création de la vue",
+  "Failed to update view": "Échec de la mise à jour de la vue",
+  "Failed to delete view": "Échec de la suppression de la vue",
+  "Failed to create row": "Échec de la création de la ligne",
+  "Failed to update row": "Échec de la mise à jour de la ligne",
+  "Failed to delete row": "Échec de la suppression de la ligne",
+  "Failed to delete rows": "Échec de la suppression des lignes",
+  "Failed to reorder row": "Échec de la réorganisation de la ligne",
+  "Failed to move card": "Échec du déplacement de la carte",
+  "Failed to add card": "Échec de l'ajout de la carte",
+  "Failed to export CSV": "Échec de l'exportation du CSV",
   "Favorite spaces": "Espaces favoris",
   "Favorite spaces appear here": "Les espaces favoris apparaissent ici",
   "Favorites": "Favoris",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Insérer un diagramme Mermaid",
   "Insert and design Drawio diagrams": "Insérer et concevoir des diagrammes Drawio",
   "Insert current date": "Insérer la date actuelle",
+  "Time": "Heure",
+  "Insert current time": "Insérer l'heure actuelle",
   "Draw and sketch excalidraw diagrams": "Dessiner et esquisser des diagrammes Excalidraw",
   "Multiple": "Multiple",
   "Turn into": "Transformer en",
@@ -424,6 +446,7 @@
   "Names do not match": "Les noms ne correspondent pas",
   "Today, {{time}}": "Aujourd’hui, {{time}}",
   "Yesterday, {{time}}": "Hier, {{time}}",
+  "now": "maintenant",
   "Space created successfully": "Espace créé avec succès",
   "Space updated successfully": "Espace mis à jour avec succès",
   "Space deleted successfully": "Espace supprimé avec succès",
@@ -596,6 +619,8 @@
   "Deleted by": "Supprimé par",
   "Deleted at": "Supprimé le",
   "Preview": "Aperçu",
+  "Base preview unavailable": "Aperçu de la base indisponible",
+  "Restore this base to view its contents.": "Restaurez cette base pour afficher son contenu.",
   "Subpages": "Sous-pages",
   "Failed to load subpages": "Échec du chargement des sous-pages",
   "No subpages": "Aucune sous-page",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "Rechercher des pages et des espaces...",
   "No results found": "Aucun résultat trouvé",
   "You don't have permission to create pages here": "Vous n’avez pas l’autorisation de créer des pages ici",
-  "Chat menu": "Menu du chat",
+  "Chat menu for {{title}}": "Menu de discussion pour {{title}}",
   "API key menu": "Menu de la clé API",
   "Jump to comment selection": "Aller à la sélection de commentaires",
   "Slash commands": "Commandes slash",
@@ -1063,7 +1088,7 @@
   "Filter": "Filtrer",
   "Page title": "Titre de la page",
   "Page content": "Contenu de la page",
-  "Member actions": "Actions des membres",
+  "Member actions for {{name}}": "Actions du membre pour {{name}}",
   "Toggle password visibility": "Afficher/masquer le mot de passe",
   "Send comment": "Envoyer le commentaire",
   "Token actions": "Actions du jeton",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "{{name}} a été ajouté aux favoris",
   "Removed {{name}} from favorites": "{{name}} a été retiré des favoris",
   "Page menu for {{name}}": "Menu de la page pour {{name}}",
-  "Create subpage of {{name}}": "Créer une sous-page de {{name}}"
+  "Create subpage of {{name}}": "Créer une sous-page de {{name}}",
+  "Allow personal spaces": "Autoriser les espaces personnels",
+  "Members can create their own personal space.": "Les membres peuvent créer leur propre espace personnel.",
+  "Toggle allow personal spaces": "Activer/désactiver l'autorisation des espaces personnels",
+  "Create personal space": "Créer un espace personnel",
+  "Personal space": "Espace personnel",
+  "{{name}}'s space": "Espace de {{name}}",
+  "Apply": "Appliquer",
+  "Cells that aren't already a page reference will be cleared.": "Les cellules qui ne sont pas déjà une référence de page seront effacées.",
+  "Cells that aren't a valid URL will be cleared.": "Les cellules qui ne sont pas une URL valide seront effacées.",
+  "Cells that aren't a valid email address will be cleared.": "Les cellules qui ne sont pas une adresse e-mail valide seront effacées.",
+  "Cells that can't be parsed as a date will be cleared.": "Les cellules qui ne peuvent pas être interprétées comme une date seront effacées.",
+  "Cells that can't be parsed as a number will be cleared.": "Les cellules qui ne peuvent pas être interprétées comme un nombre seront effacées.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Les cellules seront converties (yes/true/1 deviendront cochées ; tout le reste deviendra décoché ou sera effacé).",
+  "Cells will be reinterpreted under the new type.": "Les cellules seront réinterprétées selon le nouveau type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Les cellules seront remplacées par une liste de noms de fichiers séparés par des virgules.",
+  "Cells will be replaced with a comma-separated list of option names.": "Les cellules seront remplacées par une liste de noms d'options séparés par des virgules.",
+  "Cells will be replaced with the option name.": "Les cellules seront remplacées par le nom de l'option.",
+  "Cells will be replaced with the page title.": "Les cellules seront remplacées par le titre de la page.",
+  "Cells will be replaced with the person's name.": "Les cellules seront remplacées par le nom de la personne.",
+  "Change type": "Changer le type",
+  "Change type to {{label}}?": "Changer le type en {{label}} ?",
+  "Converting…": "Conversion…",
+  "Existing values become single-item lists. No data is lost.": "Les valeurs existantes deviennent des listes à un seul élément. Aucune donnée n'est perdue.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Seul le premier élément sélectionné par ligne sera conservé ; les autres seront ignorés.",
+  "Previous record": "Enregistrement précédent",
+  "Next record": "Enregistrement suivant",
+  "Record actions": "Actions de l'enregistrement",
+  "Delete record": "Supprimer l'enregistrement",
+  "Delete record?": "Supprimer l'enregistrement ?",
+  "This action cannot be undone.": "Cette action ne peut pas être annulée.",
+  "to navigate": "pour naviguer",
+  "to close": "pour fermer",
+  "Expand row {{number}}": "Développer la ligne {{number}}",
+  "Saving…": "Enregistrement…",
+  "Read-only": "Lecture seule",
+  "Loading…": "Chargement…",
+  "Updated {{when}}": "Mis à jour {{when}}",
+  "Add property": "Ajouter une propriété",
+  "Create property": "Créer une propriété",
+  "Hide properties": "Masquer les propriétés",
+  "Find a property type": "Rechercher un type de propriété",
+  "Properties": "Propriétés"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "Scuro",
   "Date": "Data",
   "Delete": "Elimina",
+  "Remove from page": "Rimuovi dalla pagina",
+  "Base options": "Opzioni della base",
   "Delete group": "Elimina gruppo",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Sei sicuro di voler eliminare questa pagina? Verranno cancellate anche le sue sottopagine e la cronologia. Questa azione è irreversibile.",
   "Description": "Descrizione",
@@ -76,6 +78,24 @@
   "Failed to import pages": "Impossibile importare le pagine",
   "Failed to load page. An error occurred.": "Il caricamento della pagina è fallito. Si è verificato un errore.",
   "Failed to update data": "Impossibile aggiornare i dati",
+  "Failed to create base": "Impossibile creare la base",
+  "Failed to update base": "Impossibile aggiornare la base",
+  "Failed to delete base": "Impossibile eliminare la base",
+  "Failed to create property": "Impossibile creare la proprietà",
+  "Failed to update property": "Impossibile aggiornare la proprietà",
+  "Failed to delete property": "Impossibile eliminare la proprietà",
+  "Failed to reorder property": "Impossibile riordinare la proprietà",
+  "Failed to create view": "Impossibile creare la vista",
+  "Failed to update view": "Impossibile aggiornare la vista",
+  "Failed to delete view": "Impossibile eliminare la vista",
+  "Failed to create row": "Impossibile creare la riga",
+  "Failed to update row": "Impossibile aggiornare la riga",
+  "Failed to delete row": "Impossibile eliminare la riga",
+  "Failed to delete rows": "Impossibile eliminare le righe",
+  "Failed to reorder row": "Impossibile riordinare la riga",
+  "Failed to move card": "Impossibile spostare la scheda",
+  "Failed to add card": "Impossibile aggiungere la scheda",
+  "Failed to export CSV": "Impossibile esportare il CSV",
   "Favorite spaces": "Spazi preferiti",
   "Favorite spaces appear here": "Gli spazi preferiti appariranno qui",
   "Favorites": "Preferiti",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Inserisci diagramma Mermaid",
   "Insert and design Drawio diagrams": "Inserisci e progetta diagrammi Drawio",
   "Insert current date": "Inserisci data corrente",
+  "Time": "Ora",
+  "Insert current time": "Inserisci ora corrente",
   "Draw and sketch excalidraw diagrams": "Disegna e abbozza diagrammi Excalidraw",
   "Multiple": "Multiplo",
   "Turn into": "Trasforma in",
@@ -424,6 +446,7 @@
   "Names do not match": "I nomi non corrispondono",
   "Today, {{time}}": "Oggi, {{time}}",
   "Yesterday, {{time}}": "Ieri, {{time}}",
+  "now": "ora",
   "Space created successfully": "Spazio creato con successo",
   "Space updated successfully": "Spazio aggiornato con successo",
   "Space deleted successfully": "Spazio eliminato con successo",
@@ -596,6 +619,8 @@
   "Deleted by": "Eliminato da",
   "Deleted at": "Eliminato il",
   "Preview": "Anteprima",
+  "Base preview unavailable": "Anteprima della base non disponibile",
+  "Restore this base to view its contents.": "Ripristina questa base per visualizzarne i contenuti.",
   "Subpages": "Sottopagine",
   "Failed to load subpages": "Caricamento delle sottopagine non riuscito",
   "No subpages": "Nessuna sottopagina",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "Cerca pagine e spazi...",
   "No results found": "Nessun risultato trovato",
   "You don't have permission to create pages here": "Non hai l'autorizzazione per creare pagine qui",
-  "Chat menu": "Menu della chat",
+  "Chat menu for {{title}}": "Menu chat per {{title}}",
   "API key menu": "Menu della chiave API",
   "Jump to comment selection": "Vai alla selezione dei commenti",
   "Slash commands": "Comandi slash",
@@ -1063,7 +1088,7 @@
   "Filter": "Filtro",
   "Page title": "Titolo pagina",
   "Page content": "Contenuto della pagina",
-  "Member actions": "Azioni membro",
+  "Member actions for {{name}}": "Azioni membro per {{name}}",
   "Toggle password visibility": "Attiva/disattiva visibilità password",
   "Send comment": "Invia commento",
   "Token actions": "Azioni token",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "{{name}} aggiunto ai preferiti",
   "Removed {{name}} from favorites": "{{name}} rimosso dai preferiti",
   "Page menu for {{name}}": "Menu della pagina per {{name}}",
-  "Create subpage of {{name}}": "Crea sottopagina di {{name}}"
+  "Create subpage of {{name}}": "Crea sottopagina di {{name}}",
+  "Allow personal spaces": "Consenti spazi personali",
+  "Members can create their own personal space.": "I membri possono creare il proprio spazio personale.",
+  "Toggle allow personal spaces": "Attiva/disattiva spazi personali",
+  "Create personal space": "Crea spazio personale",
+  "Personal space": "Spazio personale",
+  "{{name}}'s space": "Spazio di {{name}}",
+  "Apply": "Applica",
+  "Cells that aren't already a page reference will be cleared.": "Le celle che non sono già un riferimento a una pagina verranno svuotate.",
+  "Cells that aren't a valid URL will be cleared.": "Le celle che non contengono un URL valido verranno svuotate.",
+  "Cells that aren't a valid email address will be cleared.": "Le celle che non contengono un indirizzo email valido verranno svuotate.",
+  "Cells that can't be parsed as a date will be cleared.": "Le celle che non possono essere interpretate come una data verranno svuotate.",
+  "Cells that can't be parsed as a number will be cleared.": "Le celle che non possono essere interpretate come un numero verranno svuotate.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Le celle verranno convertite forzatamente (yes/true/1 diventeranno selezionate; tutto il resto diventerà non selezionato o verrà svuotato).",
+  "Cells will be reinterpreted under the new type.": "Le celle verranno reinterpretate con il nuovo tipo.",
+  "Cells will be replaced with a comma-separated list of file names.": "Le celle verranno sostituite con un elenco di nomi file separati da virgole.",
+  "Cells will be replaced with a comma-separated list of option names.": "Le celle verranno sostituite con un elenco di nomi di opzioni separati da virgole.",
+  "Cells will be replaced with the option name.": "Le celle verranno sostituite con il nome dell'opzione.",
+  "Cells will be replaced with the page title.": "Le celle verranno sostituite con il titolo della pagina.",
+  "Cells will be replaced with the person's name.": "Le celle verranno sostituite con il nome della persona.",
+  "Change type": "Cambia tipo",
+  "Change type to {{label}}?": "Cambiare tipo in {{label}}?",
+  "Converting…": "Conversione…",
+  "Existing values become single-item lists. No data is lost.": "I valori esistenti diventano elenchi con un solo elemento. Nessun dato andrà perso.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Verrà mantenuto solo il primo elemento selezionato per riga; gli altri verranno scartati.",
+  "Previous record": "Record precedente",
+  "Next record": "Record successivo",
+  "Record actions": "Azioni record",
+  "Delete record": "Elimina record",
+  "Delete record?": "Eliminare il record?",
+  "This action cannot be undone.": "Questa azione non può essere annullata.",
+  "to navigate": "per navigare",
+  "to close": "per chiudere",
+  "Expand row {{number}}": "Espandi riga {{number}}",
+  "Saving…": "Salvataggio…",
+  "Read-only": "Sola lettura",
+  "Loading…": "Caricamento…",
+  "Updated {{when}}": "Aggiornato {{when}}",
+  "Add property": "Aggiungi proprietà",
+  "Create property": "Crea proprietà",
+  "Hide properties": "Nascondi proprietà",
+  "Find a property type": "Trova un tipo di proprietà",
+  "Properties": "Proprietà"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "ダーク",
   "Date": "日付",
   "Delete": "削除",
+  "Remove from page": "ページから削除",
+  "Base options": "ベースのオプション",
   "Delete group": "グループを削除",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "このページを削除してもよろしいですか？子ページとページ履歴も削除されます。この操作は取り消せません。",
   "Description": "説明",
@@ -76,6 +78,24 @@
   "Failed to import pages": "ページのインポートに失敗しました",
   "Failed to load page. An error occurred.": "ページの読み込みに失敗しました。エラーが発生しました。",
   "Failed to update data": "データの更新に失敗しました",
+  "Failed to create base": "ベースの作成に失敗しました",
+  "Failed to update base": "ベースの更新に失敗しました",
+  "Failed to delete base": "ベースの削除に失敗しました",
+  "Failed to create property": "プロパティの作成に失敗しました",
+  "Failed to update property": "プロパティの更新に失敗しました",
+  "Failed to delete property": "プロパティの削除に失敗しました",
+  "Failed to reorder property": "プロパティの並べ替えに失敗しました",
+  "Failed to create view": "ビューの作成に失敗しました",
+  "Failed to update view": "ビューの更新に失敗しました",
+  "Failed to delete view": "ビューの削除に失敗しました",
+  "Failed to create row": "行の作成に失敗しました",
+  "Failed to update row": "行の更新に失敗しました",
+  "Failed to delete row": "行の削除に失敗しました",
+  "Failed to delete rows": "行の削除に失敗しました",
+  "Failed to reorder row": "行の並べ替えに失敗しました",
+  "Failed to move card": "カードの移動に失敗しました",
+  "Failed to add card": "カードの追加に失敗しました",
+  "Failed to export CSV": "CSV のエクスポートに失敗しました",
   "Favorite spaces": "お気に入りのスペース",
   "Favorite spaces appear here": "お気に入りのスペースがここに表示されます",
   "Favorites": "お気に入り",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Mermaid ダイアグラムを挿入",
   "Insert and design Drawio diagrams": "Drawio ダイアグラムを挿入して作成",
   "Insert current date": "現在の日付を挿入",
+  "Time": "時刻",
+  "Insert current time": "現在の時刻を挿入",
   "Draw and sketch excalidraw diagrams": "Excalidraw ダイアグラムを描画・スケッチ",
   "Multiple": "複数",
   "Turn into": "変換する",
@@ -424,6 +446,7 @@
   "Names do not match": "名前が一致しません",
   "Today, {{time}}": "今日 {{time}}",
   "Yesterday, {{time}}": "昨日 {{time}}",
+  "now": "今すぐ",
   "Space created successfully": "スペースが正常に作成されました",
   "Space updated successfully": "スペースが正常に更新されました",
   "Space deleted successfully": "スペースが正常に削除されました",
@@ -596,6 +619,8 @@
   "Deleted by": "削除者",
   "Deleted at": "削除日時",
   "Preview": "プレビュー",
+  "Base preview unavailable": "ベースのプレビューを利用できません",
+  "Restore this base to view its contents.": "内容を表示するには、このベースを復元してください。",
   "Subpages": "サブページ",
   "Failed to load subpages": "サブページの読み込みに失敗しました",
   "No subpages": "サブページはありません",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "ページとスペースを検索…",
   "No results found": "結果が見つかりません",
   "You don't have permission to create pages here": "ここにページを作成する権限がありません",
-  "Chat menu": "チャットメニュー",
+  "Chat menu for {{title}}": "{{title}} のチャットメニュー",
   "API key menu": "API キーメニュー",
   "Jump to comment selection": "コメント選択に移動",
   "Slash commands": "スラッシュコマンド",
@@ -1063,7 +1088,7 @@
   "Filter": "フィルター",
   "Page title": "ページタイトル",
   "Page content": "ページ内容",
-  "Member actions": "メンバーの操作",
+  "Member actions for {{name}}": "{{name}} のメンバー操作",
   "Toggle password visibility": "パスワードの表示を切り替え",
   "Send comment": "コメントを送信",
   "Token actions": "トークンの操作",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "{{name}} をお気に入りに追加しました",
   "Removed {{name}} from favorites": "{{name}} をお気に入りから削除しました",
   "Page menu for {{name}}": "{{name}} のページメニュー",
-  "Create subpage of {{name}}": "{{name}} のサブページを作成"
+  "Create subpage of {{name}}": "{{name}} のサブページを作成",
+  "Allow personal spaces": "パーソナルスペースを許可",
+  "Members can create their own personal space.": "メンバーは自分専用のパーソナルスペースを作成できます。",
+  "Toggle allow personal spaces": "パーソナルスペースの許可を切り替える",
+  "Create personal space": "パーソナルスペースを作成",
+  "Personal space": "パーソナルスペース",
+  "{{name}}'s space": "{{name}} のスペース",
+  "Apply": "適用",
+  "Cells that aren't already a page reference will be cleared.": "すでにページ参照になっているセル以外は消去されます。",
+  "Cells that aren't a valid URL will be cleared.": "有効な URL ではないセルは消去されます。",
+  "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 number will be cleared.": "数値として解析できないセルは消去されます。",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "セルは強制変換されます（yes/true/1 はチェック済みになり、それ以外は未チェックまたは空になります）。",
+  "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 option names.": "セルは、オプション名のカンマ区切りリストに置き換えられます。",
+  "Cells will be replaced with the option name.": "セルはオプション名に置き換えられます。",
+  "Cells will be replaced with the page title.": "セルはページタイトルに置き換えられます。",
+  "Cells will be replaced with the person's name.": "セルはその人の名前に置き換えられます。",
+  "Change type": "型を変更",
+  "Change type to {{label}}?": "型を {{label}} に変更しますか？",
+  "Converting…": "変換中…",
+  "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.": "各行で最初に選択された項目のみ保持され、残りは破棄されます。",
+  "Previous record": "前のレコード",
+  "Next record": "次のレコード",
+  "Record actions": "レコード操作",
+  "Delete record": "レコードを削除",
+  "Delete record?": "レコードを削除しますか？",
+  "This action cannot be undone.": "この操作は元に戻せません。",
+  "to navigate": "移動するには",
+  "to close": "閉じるには",
+  "Expand row {{number}}": "行 {{number}} を展開",
+  "Saving…": "保存中…",
+  "Read-only": "読み取り専用",
+  "Loading…": "読み込み中…",
+  "Updated {{when}}": "{{when}} に更新",
+  "Add property": "プロパティを追加",
+  "Create property": "プロパティを作成",
+  "Hide properties": "プロパティを非表示",
+  "Find a property type": "プロパティの種類を検索",
+  "Properties": "プロパティ"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "어두운",
   "Date": "날짜",
   "Delete": "삭제",
+  "Remove from page": "페이지에서 제거",
+  "Base options": "베이스 옵션",
   "Delete group": "팀 삭제",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "이 페이지를 삭제하시겠습니까? 하위 페이지와 페이지 기록이 모두 삭제됩니다. 이 작업은 되돌릴 수 없습니다.",
   "Description": "설명",
@@ -76,6 +78,24 @@
   "Failed to import pages": "페이지 가져오기 실패",
   "Failed to load page. An error occurred.": "페이지 불러오기 실패. 오류가 발생했습니다.",
   "Failed to update data": "데이터 갱신 실패",
+  "Failed to create base": "베이스를 만들지 못했습니다",
+  "Failed to update base": "베이스를 업데이트하지 못했습니다",
+  "Failed to delete base": "베이스를 삭제하지 못했습니다",
+  "Failed to create property": "속성을 만들지 못했습니다",
+  "Failed to update property": "속성을 업데이트하지 못했습니다",
+  "Failed to delete property": "속성을 삭제하지 못했습니다",
+  "Failed to reorder property": "속성 순서를 변경하지 못했습니다",
+  "Failed to create view": "보기를 만들지 못했습니다",
+  "Failed to update view": "보기를 업데이트하지 못했습니다",
+  "Failed to delete view": "보기를 삭제하지 못했습니다",
+  "Failed to create row": "행을 만들지 못했습니다",
+  "Failed to update row": "행을 업데이트하지 못했습니다",
+  "Failed to delete row": "행을 삭제하지 못했습니다",
+  "Failed to delete rows": "행을 삭제하지 못했습니다",
+  "Failed to reorder row": "행 순서를 변경하지 못했습니다",
+  "Failed to move card": "카드를 이동하지 못했습니다",
+  "Failed to add card": "카드를 추가하지 못했습니다",
+  "Failed to export CSV": "CSV를 내보내지 못했습니다",
   "Favorite spaces": "즐겨찾는 스페이스",
   "Favorite spaces appear here": "즐겨찾는 스페이스가 여기에 표시됩니다",
   "Favorites": "즐겨찾기",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Mermaid 다이어그램 삽입",
   "Insert and design Drawio diagrams": "Drawio 다이어그램 삽입 및 편집",
   "Insert current date": "현재 날짜 삽입",
+  "Time": "시간",
+  "Insert current time": "현재 시간 삽입",
   "Draw and sketch excalidraw diagrams": "Excalidraw 다이어그램 그리기 및 스케치",
   "Multiple": "다중",
   "Turn into": "변경하기",
@@ -424,6 +446,7 @@
   "Names do not match": "이름이 일치하지 않습니다",
   "Today, {{time}}": "오늘, {{time}}",
   "Yesterday, {{time}}": "어제, {{time}}",
+  "now": "지금",
   "Space created successfully": "스페이스가 성공적으로 생성되었습니다",
   "Space updated successfully": "스페이스가 성공적으로 업데이트되었습니다",
   "Space deleted successfully": "스페이스가 성공적으로 삭제되었습니다",
@@ -596,6 +619,8 @@
   "Deleted by": "삭제한 사람",
   "Deleted at": "삭제 시간",
   "Preview": "미리보기",
+  "Base preview unavailable": "베이스 미리보기를 사용할 수 없음",
+  "Restore this base to view its contents.": "이 베이스를 복원하여 내용을 보세요.",
   "Subpages": "하위 페이지",
   "Failed to load subpages": "하위 페이지를 불러오지 못했습니다",
   "No subpages": "하위 페이지가 없습니다",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "페이지와 스페이스 검색...",
   "No results found": "결과를 찾을 수 없습니다",
   "You don't have permission to create pages here": "여기에서 페이지를 만들 권한이 없습니다",
-  "Chat menu": "채팅 메뉴",
+  "Chat menu for {{title}}": "{{title}}의 채팅 메뉴",
   "API key menu": "API 키 메뉴",
   "Jump to comment selection": "댓글 선택으로 이동",
   "Slash commands": "슬래시 명령어",
@@ -1063,7 +1088,7 @@
   "Filter": "필터",
   "Page title": "페이지 제목",
   "Page content": "페이지 내용",
-  "Member actions": "멤버 작업",
+  "Member actions for {{name}}": "{{name}}에 대한 멤버 작업",
   "Toggle password visibility": "비밀번호 표시 전환",
   "Send comment": "댓글 보내기",
   "Token actions": "토큰 작업",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "{{name}} 즐겨찾기에 추가됨",
   "Removed {{name}} from favorites": "{{name}} 즐겨찾기에서 제거됨",
   "Page menu for {{name}}": "{{name}}의 페이지 메뉴",
-  "Create subpage of {{name}}": "{{name}}의 하위 페이지 만들기"
+  "Create subpage of {{name}}": "{{name}}의 하위 페이지 만들기",
+  "Allow personal spaces": "개인 공간 허용",
+  "Members can create their own personal space.": "멤버는 자신만의 개인 공간을 만들 수 있습니다.",
+  "Toggle allow personal spaces": "개인 공간 허용 전환",
+  "Create personal space": "개인 공간 만들기",
+  "Personal space": "개인 공간",
+  "{{name}}'s space": "{{name}}의 공간",
+  "Apply": "적용",
+  "Cells that aren't already a page reference will be cleared.": "이미 페이지 참조인 셀이 아닌 경우 지워집니다.",
+  "Cells that aren't a valid URL will be cleared.": "유효한 URL이 아닌 셀은 지워집니다.",
+  "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 number will be cleared.": "숫자로 해석할 수 없는 셀은 지워집니다.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "셀 값은 강제로 변환됩니다(yes/true/1은 선택됨이 되고, 그 외의 모든 값은 선택 해제되거나 지워집니다).",
+  "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 option names.": "셀은 쉼표로 구분된 옵션 이름 목록으로 대체됩니다.",
+  "Cells will be replaced with the option name.": "셀은 옵션 이름으로 대체됩니다.",
+  "Cells will be replaced with the page title.": "셀은 페이지 제목으로 대체됩니다.",
+  "Cells will be replaced with the person's name.": "셀은 사람 이름으로 대체됩니다.",
+  "Change type": "유형 변경",
+  "Change type to {{label}}?": "유형을 {{label}}로 변경할까요?",
+  "Converting…": "변환 중…",
+  "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.": "각 행에서 처음 선택된 항목만 유지되며 나머지는 삭제됩니다.",
+  "Previous record": "이전 레코드",
+  "Next record": "다음 레코드",
+  "Record actions": "레코드 작업",
+  "Delete record": "레코드 삭제",
+  "Delete record?": "레코드를 삭제할까요?",
+  "This action cannot be undone.": "이 작업은 되돌릴 수 없습니다.",
+  "to navigate": "탐색하려면",
+  "to close": "닫으려면",
+  "Expand row {{number}}": "행 {{number}} 펼치기",
+  "Saving…": "저장 중…",
+  "Read-only": "읽기 전용",
+  "Loading…": "불러오는 중…",
+  "Updated {{when}}": "{{when}}에 업데이트됨",
+  "Add property": "속성 추가",
+  "Create property": "속성 만들기",
+  "Hide properties": "속성 숨기기",
+  "Find a property type": "속성 유형 찾기",
+  "Properties": "속성"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "Donker",
   "Date": "Datum",
   "Delete": "Verwijderen",
+  "Remove from page": "Van pagina verwijderen",
+  "Base options": "Basisopties",
   "Delete group": "Groep verwijderen",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Weet u zeker dat u deze pagina wilt verwijderen? Dit zal de subpagina's en paginageschiedenis verwijderen. Deze actie kan niet ongedaan gemaakt worden.",
   "Description": "Beschrijving",
@@ -76,6 +78,24 @@
   "Failed to import pages": "Pagina's importeren mislukt",
   "Failed to load page. An error occurred.": "Laden van pagina mislukt. Er is een fout opgetreden.",
   "Failed to update data": "Bijwerken van gegevens mislukt",
+  "Failed to create base": "Kan basis niet aanmaken",
+  "Failed to update base": "Kan basis niet bijwerken",
+  "Failed to delete base": "Kan basis niet verwijderen",
+  "Failed to create property": "Kan eigenschap niet aanmaken",
+  "Failed to update property": "Kan eigenschap niet bijwerken",
+  "Failed to delete property": "Kan eigenschap niet verwijderen",
+  "Failed to reorder property": "Kan eigenschap niet opnieuw ordenen",
+  "Failed to create view": "Kan weergave niet aanmaken",
+  "Failed to update view": "Kan weergave niet bijwerken",
+  "Failed to delete view": "Kan weergave niet verwijderen",
+  "Failed to create row": "Kan rij niet aanmaken",
+  "Failed to update row": "Kan rij niet bijwerken",
+  "Failed to delete row": "Kan rij niet verwijderen",
+  "Failed to delete rows": "Kan rijen niet verwijderen",
+  "Failed to reorder row": "Kan rij niet opnieuw ordenen",
+  "Failed to move card": "Kan kaart niet verplaatsen",
+  "Failed to add card": "Kan kaart niet toevoegen",
+  "Failed to export CSV": "Kan CSV niet exporteren",
   "Favorite spaces": "Favoriete ruimtes",
   "Favorite spaces appear here": "Favoriete ruimtes verschijnen hier",
   "Favorites": "Favorieten",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Mermaid-diagram invoegen",
   "Insert and design Drawio diagrams": "Drawio-diagrammen invoegen en ontwerpen",
   "Insert current date": "Huidige datum invoegen",
+  "Time": "Tijd",
+  "Insert current time": "Huidige tijd invoegen",
   "Draw and sketch excalidraw diagrams": "Excalidraw-diagrammen tekenen en schetsen",
   "Multiple": "Meerdere",
   "Turn into": "Omzetten naar",
@@ -424,6 +446,7 @@
   "Names do not match": "Namen komen niet overeen",
   "Today, {{time}}": "Vandaag, {{time}}",
   "Yesterday, {{time}}": "Gisteren, {{time}}",
+  "now": "nu",
   "Space created successfully": "Ruimte succesvol aangemaakt",
   "Space updated successfully": "Ruimte succesvol bijgewerkt",
   "Space deleted successfully": "Ruimte succesvol verwijderd",
@@ -596,6 +619,8 @@
   "Deleted by": "Verwijderd door",
   "Deleted at": "Verwijderd op",
   "Preview": "Voorbeeld",
+  "Base preview unavailable": "Voorbeeld van basis niet beschikbaar",
+  "Restore this base to view its contents.": "Herstel deze basis om de inhoud te bekijken.",
   "Subpages": "Subpagina's",
   "Failed to load subpages": "Subpagina's laden mislukt",
   "No subpages": "Geen subpagina's",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "Pagina's en werkruimtes zoeken...",
   "No results found": "Geen resultaten gevonden",
   "You don't have permission to create pages here": "Je hebt geen toestemming om hier pagina's te maken",
-  "Chat menu": "Chatmenu",
+  "Chat menu for {{title}}": "Chatmenu voor {{title}}",
   "API key menu": "API-sleutelmenu",
   "Jump to comment selection": "Naar reactieselectie springen",
   "Slash commands": "Slash-opdrachten",
@@ -1063,7 +1088,7 @@
   "Filter": "Filter",
   "Page title": "Paginatitel",
   "Page content": "Pagina-inhoud",
-  "Member actions": "Lidacties",
+  "Member actions for {{name}}": "Lidacties voor {{name}}",
   "Toggle password visibility": "Wachtwoordzichtbaarheid in-/uitschakelen",
   "Send comment": "Reactie verzenden",
   "Token actions": "Tokenacties",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "{{name}} toegevoegd aan favorieten",
   "Removed {{name}} from favorites": "{{name}} verwijderd uit favorieten",
   "Page menu for {{name}}": "Paginamenu voor {{name}}",
-  "Create subpage of {{name}}": "Subpagina van {{name}} maken"
+  "Create subpage of {{name}}": "Subpagina van {{name}} maken",
+  "Allow personal spaces": "Persoonlijke ruimtes toestaan",
+  "Members can create their own personal space.": "Leden kunnen hun eigen persoonlijke ruimte aanmaken.",
+  "Toggle allow personal spaces": "Persoonlijke ruimtes toestaan in- of uitschakelen",
+  "Create personal space": "Persoonlijke ruimte aanmaken",
+  "Personal space": "Persoonlijke ruimte",
+  "{{name}}'s space": "ruimte van {{name}}",
+  "Apply": "Toepassen",
+  "Cells that aren't already a page reference will be cleared.": "Cellen die nog geen paginaverwijzing zijn, worden leeggemaakt.",
+  "Cells that aren't a valid URL will be cleared.": "Cellen die geen geldige URL zijn, worden leeggemaakt.",
+  "Cells that aren't a valid email address will be cleared.": "Cellen die geen geldig e-mailadres zijn, worden leeggemaakt.",
+  "Cells that can't be parsed as a date will be cleared.": "Cellen die niet als een datum kunnen worden geïnterpreteerd, worden leeggemaakt.",
+  "Cells that can't be parsed as a number will be cleared.": "Cellen die niet als een getal kunnen worden geïnterpreteerd, worden leeggemaakt.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cellen worden geconverteerd (yes/true/1 worden aangevinkt; al het andere wordt uitgevinkt of leeggemaakt).",
+  "Cells will be reinterpreted under the new type.": "Cellen worden opnieuw geïnterpreteerd volgens het nieuwe type.",
+  "Cells will be replaced with a comma-separated list of file names.": "Cellen worden vervangen door een door komma's gescheiden lijst met bestandsnamen.",
+  "Cells will be replaced with a comma-separated list of option names.": "Cellen worden vervangen door een door komma's gescheiden lijst met optienamen.",
+  "Cells will be replaced with the option name.": "Cellen worden vervangen door de optienaam.",
+  "Cells will be replaced with the page title.": "Cellen worden vervangen door de paginatitel.",
+  "Cells will be replaced with the person's name.": "Cellen worden vervangen door de naam van de persoon.",
+  "Change type": "Type wijzigen",
+  "Change type to {{label}}?": "Type wijzigen naar {{label}}?",
+  "Converting…": "Converteren…",
+  "Existing values become single-item lists. No data is lost.": "Bestaande waarden worden lijsten met één item. Er gaan geen gegevens verloren.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Alleen het eerste geselecteerde item per rij blijft behouden; de rest wordt verwijderd.",
+  "Previous record": "Vorige record",
+  "Next record": "Volgende record",
+  "Record actions": "Recordacties",
+  "Delete record": "Record verwijderen",
+  "Delete record?": "Record verwijderen?",
+  "This action cannot be undone.": "Deze actie kan niet ongedaan worden gemaakt.",
+  "to navigate": "om te navigeren",
+  "to close": "om te sluiten",
+  "Expand row {{number}}": "Rij {{number}} uitvouwen",
+  "Saving…": "Opslaan…",
+  "Read-only": "Alleen-lezen",
+  "Loading…": "Laden…",
+  "Updated {{when}}": "Bijgewerkt {{when}}",
+  "Add property": "Eigenschap toevoegen",
+  "Create property": "Eigenschap aanmaken",
+  "Hide properties": "Eigenschappen verbergen",
+  "Find a property type": "Een eigenschapstype zoeken",
+  "Properties": "Eigenschappen"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "Escuro",
   "Date": "Data",
   "Delete": "Excluir",
+  "Remove from page": "Remover da página",
+  "Base options": "Opções da base",
   "Delete group": "Excluir grupo",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Você tem certeza que quer deletar essa página? Isso irá deletar todas as páginas filhas e to o histórico. Esta ação é irreversível.",
   "Description": "Descrição",
@@ -76,6 +78,24 @@
   "Failed to import pages": "Falha ao importar páginas",
   "Failed to load page. An error occurred.": "Falha ao carregar página. Ocorreu um erro.",
   "Failed to update data": "Falha ao atualizar dados",
+  "Failed to create base": "Falha ao criar base",
+  "Failed to update base": "Falha ao atualizar base",
+  "Failed to delete base": "Falha ao excluir base",
+  "Failed to create property": "Falha ao criar propriedade",
+  "Failed to update property": "Falha ao atualizar propriedade",
+  "Failed to delete property": "Falha ao excluir propriedade",
+  "Failed to reorder property": "Falha ao reordenar propriedade",
+  "Failed to create view": "Falha ao criar visualização",
+  "Failed to update view": "Falha ao atualizar visualização",
+  "Failed to delete view": "Falha ao excluir visualização",
+  "Failed to create row": "Falha ao criar linha",
+  "Failed to update row": "Falha ao atualizar linha",
+  "Failed to delete row": "Falha ao excluir linha",
+  "Failed to delete rows": "Falha ao excluir linhas",
+  "Failed to reorder row": "Falha ao reordenar linha",
+  "Failed to move card": "Falha ao mover cartão",
+  "Failed to add card": "Falha ao adicionar cartão",
+  "Failed to export CSV": "Falha ao exportar CSV",
   "Favorite spaces": "Espaços favoritos",
   "Favorite spaces appear here": "Os espaços favoritos aparecem aqui",
   "Favorites": "Favoritos",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Inserir diagrama Mermaid",
   "Insert and design Drawio diagrams": "Inserir e criar diagramas Drawio",
   "Insert current date": "Inserir data atual",
+  "Time": "Horário",
+  "Insert current time": "Inserir horário atual",
   "Draw and sketch excalidraw diagrams": "Desenhar e esboçar diagramas Excalidraw",
   "Multiple": "Múltiplo",
   "Turn into": "Transformar em",
@@ -424,6 +446,7 @@
   "Names do not match": "Os nomes não correspondem",
   "Today, {{time}}": "Hoje, {{time}}",
   "Yesterday, {{time}}": "Ontem, {{time}}",
+  "now": "agora",
   "Space created successfully": "Espaço criado com sucesso",
   "Space updated successfully": "Espaço atualizado com sucesso",
   "Space deleted successfully": "Espaço excluído com sucesso",
@@ -596,6 +619,8 @@
   "Deleted by": "Excluído por",
   "Deleted at": "Excluído em",
   "Preview": "Visualização",
+  "Base preview unavailable": "Pré-visualização da base indisponível",
+  "Restore this base to view its contents.": "Restaure esta base para visualizar seu conteúdo.",
   "Subpages": "Subpáginas",
   "Failed to load subpages": "Falha ao carregar as subpáginas",
   "No subpages": "Nenhuma subpágina",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "Pesquisar páginas e espaços...",
   "No results found": "Nenhum resultado encontrado",
   "You don't have permission to create pages here": "Você não tem permissão para criar páginas aqui",
-  "Chat menu": "Menu do chat",
+  "Chat menu for {{title}}": "Menu do chat para {{title}}",
   "API key menu": "Menu da chave de API",
   "Jump to comment selection": "Ir para a seleção de comentários",
   "Slash commands": "Comandos de barra",
@@ -1063,7 +1088,7 @@
   "Filter": "Filtrar",
   "Page title": "Título da página",
   "Page content": "Conteúdo da página",
-  "Member actions": "Ações do membro",
+  "Member actions for {{name}}": "Ações do membro para {{name}}",
   "Toggle password visibility": "Alternar visibilidade da senha",
   "Send comment": "Enviar comentário",
   "Token actions": "Ações do token",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "{{name}} adicionado aos favoritos",
   "Removed {{name}} from favorites": "{{name}} removido dos favoritos",
   "Page menu for {{name}}": "Menu da página de {{name}}",
-  "Create subpage of {{name}}": "Criar subpágina de {{name}}"
+  "Create subpage of {{name}}": "Criar subpágina de {{name}}",
+  "Allow personal spaces": "Permitir espaços pessoais",
+  "Members can create their own personal space.": "Os membros podem criar seu próprio espaço pessoal.",
+  "Toggle allow personal spaces": "Ativar/desativar permissão para espaços pessoais",
+  "Create personal space": "Criar espaço pessoal",
+  "Personal space": "Espaço pessoal",
+  "{{name}}'s space": "Espaço de {{name}}",
+  "Apply": "Aplicar",
+  "Cells that aren't already a page reference will be cleared.": "As células que ainda não forem uma referência de página serão limpas.",
+  "Cells that aren't a valid URL will be cleared.": "As células que não forem uma URL válida serão limpas.",
+  "Cells that aren't a valid email address will be cleared.": "As células que não forem um endereço de e-mail válido serão limpas.",
+  "Cells that can't be parsed as a date will be cleared.": "As células que não puderem ser interpretadas como uma data serão limpas.",
+  "Cells that can't be parsed as a number will be cleared.": "As células que não puderem ser interpretadas como um número serão limpas.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "As células serão convertidas (yes/true/1 se tornam marcadas; todo o resto se torna desmarcado ou limpo).",
+  "Cells will be reinterpreted under the new type.": "As células serão reinterpretadas com o novo tipo.",
+  "Cells will be replaced with a comma-separated list of file names.": "As células serão substituídas por uma lista de nomes de arquivos separados por vírgula.",
+  "Cells will be replaced with a comma-separated list of option names.": "As células serão substituídas por uma lista de nomes de opções separados por vírgula.",
+  "Cells will be replaced with the option name.": "As células serão substituídas pelo nome da opção.",
+  "Cells will be replaced with the page title.": "As células serão substituídas pelo título da página.",
+  "Cells will be replaced with the person's name.": "As células serão substituídas pelo nome da pessoa.",
+  "Change type": "Alterar tipo",
+  "Change type to {{label}}?": "Alterar tipo para {{label}}?",
+  "Converting…": "Convertendo…",
+  "Existing values become single-item lists. No data is lost.": "Os valores existentes se tornam listas de item único. Nenhum dado é perdido.",
+  "Only the first selected item per row will be kept; the rest will be discarded.": "Apenas o primeiro item selecionado por linha será mantido; o restante será descartado.",
+  "Previous record": "Registro anterior",
+  "Next record": "Próximo registro",
+  "Record actions": "Ações do registro",
+  "Delete record": "Excluir registro",
+  "Delete record?": "Excluir registro?",
+  "This action cannot be undone.": "Esta ação não pode ser desfeita.",
+  "to navigate": "para navegar",
+  "to close": "para fechar",
+  "Expand row {{number}}": "Expandir linha {{number}}",
+  "Saving…": "Salvando…",
+  "Read-only": "Somente leitura",
+  "Loading…": "Carregando…",
+  "Updated {{when}}": "Atualizado {{when}}",
+  "Add property": "Adicionar propriedade",
+  "Create property": "Criar propriedade",
+  "Hide properties": "Ocultar propriedades",
+  "Find a property type": "Encontrar um tipo de propriedade",
+  "Properties": "Propriedades"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "Темная",
   "Date": "Дата",
   "Delete": "Удалить",
+  "Remove from page": "Удалить со страницы",
+  "Base options": "Параметры базы",
   "Delete group": "Удалить группу",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Вы уверены, что хотите удалить эту страницу? Это удалит её дочерние страницы, а также историю страницы. Это действие необратимо.",
   "Description": "Описание",
@@ -76,6 +78,24 @@
   "Failed to import pages": "Не удалось импортировать страницы",
   "Failed to load page. An error occurred.": "Не удалось загрузить страницу. Произошла ошибка.",
   "Failed to update data": "Не удалось обновить данные",
+  "Failed to create base": "Не удалось создать базу",
+  "Failed to update base": "Не удалось обновить базу",
+  "Failed to delete base": "Не удалось удалить базу",
+  "Failed to create property": "Не удалось создать свойство",
+  "Failed to update property": "Не удалось обновить свойство",
+  "Failed to delete property": "Не удалось удалить свойство",
+  "Failed to reorder property": "Не удалось изменить порядок свойств",
+  "Failed to create view": "Не удалось создать представление",
+  "Failed to update view": "Не удалось обновить представление",
+  "Failed to delete view": "Не удалось удалить представление",
+  "Failed to create row": "Не удалось создать строку",
+  "Failed to update row": "Не удалось обновить строку",
+  "Failed to delete row": "Не удалось удалить строку",
+  "Failed to delete rows": "Не удалось удалить строки",
+  "Failed to reorder row": "Не удалось изменить порядок строки",
+  "Failed to move card": "Не удалось переместить карточку",
+  "Failed to add card": "Не удалось добавить карточку",
+  "Failed to export CSV": "Не удалось экспортировать CSV",
   "Favorite spaces": "Избранные пространства",
   "Favorite spaces appear here": "Здесь отображаются избранные пространства",
   "Favorites": "Избранное",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Вставить диаграмму Mermaid",
   "Insert and design Drawio diagrams": "Вставляйте и редактируйте диаграммы Drawio",
   "Insert current date": "Вставить текущую дату",
+  "Time": "Время",
+  "Insert current time": "Вставить текущее время",
   "Draw and sketch excalidraw diagrams": "Рисуйте и создавайте диаграммы Excalidraw",
   "Multiple": "Несколько",
   "Turn into": "Преобразовать в",
@@ -424,6 +446,7 @@
   "Names do not match": "Названия не совпадают",
   "Today, {{time}}": "Сегодня, {{time}}",
   "Yesterday, {{time}}": "Вчера, {{time}}",
+  "now": "сейчас",
   "Space created successfully": "Пространство успешно создано",
   "Space updated successfully": "Пространство успешно обновлено",
   "Space deleted successfully": "Пространство успешно удалено",
@@ -596,6 +619,8 @@
   "Deleted by": "Удалено пользователем",
   "Deleted at": "Удалено",
   "Preview": "Предпросмотр",
+  "Base preview unavailable": "Предпросмотр базы недоступен",
+  "Restore this base to view its contents.": "Восстановите эту базу, чтобы просмотреть её содержимое.",
   "Subpages": "Подстраницы",
   "Failed to load subpages": "Не удалось загрузить подстраницы",
   "No subpages": "Нет подстраниц",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "Поиск страниц и пространств...",
   "No results found": "Результаты не найдены",
   "You don't have permission to create pages here": "У вас нет прав на создание страниц здесь",
-  "Chat menu": "Меню чата",
+  "Chat menu for {{title}}": "Меню чата для {{title}}",
   "API key menu": "Меню API-ключа",
   "Jump to comment selection": "Перейти к выбору комментария",
   "Slash commands": "Команды со слешем",
@@ -1063,7 +1088,7 @@
   "Filter": "Фильтр",
   "Page title": "Заголовок страницы",
   "Page content": "Содержимое страницы",
-  "Member actions": "Действия с участником",
+  "Member actions for {{name}}": "Действия с участниками для {{name}}",
   "Toggle password visibility": "Переключить видимость пароля",
   "Send comment": "Отправить комментарий",
   "Token actions": "Действия с токеном",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "{{name}} добавлено в избранное",
   "Removed {{name}} from favorites": "{{name}} удалено из избранного",
   "Page menu for {{name}}": "Меню страницы для {{name}}",
-  "Create subpage of {{name}}": "Создать подстраницу для {{name}}"
+  "Create subpage of {{name}}": "Создать подстраницу для {{name}}",
+  "Allow personal spaces": "Разрешить личные пространства",
+  "Members can create their own personal space.": "Участники могут создавать свои собственные личные пространства.",
+  "Toggle allow personal spaces": "Переключить разрешение личных пространств",
+  "Create personal space": "Создать личное пространство",
+  "Personal space": "Личное пространство",
+  "{{name}}'s space": "Пространство {{name}}",
+  "Apply": "Применить",
+  "Cells that aren't already a page reference will be cleared.": "Ячейки, которые ещё не являются ссылкой на страницу, будут очищены.",
+  "Cells that aren't a valid URL will be cleared.": "Ячейки, которые не содержат допустимый URL, будут очищены.",
+  "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 number will be cleared.": "Ячейки, которые нельзя распознать как число, будут очищены.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Значения в ячейках будут приведены к типу (yes/true/1 станут отмеченными; всё остальное станет неотмеченным или будет очищено).",
+  "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 option names.": "Ячейки будут заменены списком названий параметров, разделённых запятыми.",
+  "Cells will be replaced with the option name.": "Ячейки будут заменены названием параметра.",
+  "Cells will be replaced with the page title.": "Ячейки будут заменены заголовком страницы.",
+  "Cells will be replaced with the person's name.": "Ячейки будут заменены именем человека.",
+  "Change type": "Изменить тип",
+  "Change type to {{label}}?": "Изменить тип на {{label}}?",
+  "Converting…": "Преобразование…",
+  "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.": "Для каждой строки будет сохранён только первый выбранный элемент; остальные будут отброшены.",
+  "Previous record": "Предыдущая запись",
+  "Next record": "Следующая запись",
+  "Record actions": "Действия с записью",
+  "Delete record": "Удалить запись",
+  "Delete record?": "Удалить запись?",
+  "This action cannot be undone.": "Это действие нельзя отменить.",
+  "to navigate": "для навигации",
+  "to close": "для закрытия",
+  "Expand row {{number}}": "Развернуть строку {{number}}",
+  "Saving…": "Сохранение…",
+  "Read-only": "Только для чтения",
+  "Loading…": "Загрузка…",
+  "Updated {{when}}": "Обновлено {{when}}",
+  "Add property": "Добавить свойство",
+  "Create property": "Создать свойство",
+  "Hide properties": "Скрыть свойства",
+  "Find a property type": "Найти тип свойства",
+  "Properties": "Свойства"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "Темна",
   "Date": "Дата",
   "Delete": "Видалити",
+  "Remove from page": "Видалити зі сторінки",
+  "Base options": "Параметри бази",
   "Delete group": "Видалити групу",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Ви впевнені, що хочете видалити цю сторінку? Це видалить її дочірні сторінки, а також історію сторінки. Ця дія необоротна.",
   "Description": "Опис",
@@ -76,6 +78,24 @@
   "Failed to import pages": "Не вдалося імпортувати сторінки",
   "Failed to load page. An error occurred.": "Не вдалося завантажити сторінку. Сталася помилка.",
   "Failed to update data": "Не вдалося оновити дані",
+  "Failed to create base": "Не вдалося створити базу",
+  "Failed to update base": "Не вдалося оновити базу",
+  "Failed to delete base": "Не вдалося видалити базу",
+  "Failed to create property": "Не вдалося створити властивість",
+  "Failed to update property": "Не вдалося оновити властивість",
+  "Failed to delete property": "Не вдалося видалити властивість",
+  "Failed to reorder property": "Не вдалося змінити порядок властивості",
+  "Failed to create view": "Не вдалося створити подання",
+  "Failed to update view": "Не вдалося оновити подання",
+  "Failed to delete view": "Не вдалося видалити подання",
+  "Failed to create row": "Не вдалося створити рядок",
+  "Failed to update row": "Не вдалося оновити рядок",
+  "Failed to delete row": "Не вдалося видалити рядок",
+  "Failed to delete rows": "Не вдалося видалити рядки",
+  "Failed to reorder row": "Не вдалося змінити порядок рядка",
+  "Failed to move card": "Не вдалося перемістити картку",
+  "Failed to add card": "Не вдалося додати картку",
+  "Failed to export CSV": "Не вдалося експортувати CSV",
   "Favorite spaces": "Обрані простори",
   "Favorite spaces appear here": "Тут відображаються обрані простори",
   "Favorites": "Обране",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "Вставити діаграму Mermaid",
   "Insert and design Drawio diagrams": "Вставляйте та створюйте діаграми Drawio",
   "Insert current date": "Вставити поточну дату",
+  "Time": "Час",
+  "Insert current time": "Вставити поточний час",
   "Draw and sketch excalidraw diagrams": "Створюйте та кресліть діаграми Excalidraw",
   "Multiple": "Кілька",
   "Turn into": "Перетворити",
@@ -424,6 +446,7 @@
   "Names do not match": "Назви не збігаються",
   "Today, {{time}}": "Сьогодні, {{time}}",
   "Yesterday, {{time}}": "Вчора, {{time}}",
+  "now": "зараз",
   "Space created successfully": "Простір успішно створено",
   "Space updated successfully": "Простір успішно оновлено",
   "Space deleted successfully": "Простір успішно видалено",
@@ -596,6 +619,8 @@
   "Deleted by": "Видалив",
   "Deleted at": "Видалено",
   "Preview": "Попередній перегляд",
+  "Base preview unavailable": "Попередній перегляд бази недоступний",
+  "Restore this base to view its contents.": "Відновіть цю базу, щоб переглянути її вміст.",
   "Subpages": "Підсторінки",
   "Failed to load subpages": "Не вдалося завантажити підсторінки",
   "No subpages": "Немає підсторінок",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "Шукати сторінки та простори...",
   "No results found": "Результати не знайдено",
   "You don't have permission to create pages here": "У вас немає дозволу на створення сторінок тут",
-  "Chat menu": "Меню чату",
+  "Chat menu for {{title}}": "Меню чату для {{title}}",
   "API key menu": "Меню ключа API",
   "Jump to comment selection": "Перейти до вибору коментаря",
   "Slash commands": "Слеш-команди",
@@ -1063,7 +1088,7 @@
   "Filter": "Фільтр",
   "Page title": "Назва сторінки",
   "Page content": "Вміст сторінки",
-  "Member actions": "Дії з учасником",
+  "Member actions for {{name}}": "Дії учасника для {{name}}",
   "Toggle password visibility": "Перемкнути видимість пароля",
   "Send comment": "Надіслати коментар",
   "Token actions": "Дії з токеном",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "{{name}} додано до обраного",
   "Removed {{name}} from favorites": "{{name}} видалено з обраного",
   "Page menu for {{name}}": "Меню сторінки для {{name}}",
-  "Create subpage of {{name}}": "Створити підсторінку для {{name}}"
+  "Create subpage of {{name}}": "Створити підсторінку для {{name}}",
+  "Allow personal spaces": "Дозволити особисті простори",
+  "Members can create their own personal space.": "Учасники можуть створювати власний особистий простір.",
+  "Toggle allow personal spaces": "Перемкнути дозвіл на особисті простори",
+  "Create personal space": "Створити особистий простір",
+  "Personal space": "Особистий простір",
+  "{{name}}'s space": "Простір {{name}}",
+  "Apply": "Застосувати",
+  "Cells that aren't already a page reference will be cleared.": "Клітинки, які ще не є посиланням на сторінку, буде очищено.",
+  "Cells that aren't a valid URL will be cleared.": "Клітинки, які не є дійсною URL-адресою, буде очищено.",
+  "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 number will be cleared.": "Клітинки, які не вдається розпізнати як число, буде очищено.",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Клітинки буде приведено до потрібного формату (yes/true/1 стануть позначеними; усе інше стане непозначеним або буде очищено).",
+  "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 option names.": "Клітинки буде замінено списком назв параметрів, розділених комами.",
+  "Cells will be replaced with the option name.": "Клітинки буде замінено назвою параметра.",
+  "Cells will be replaced with the page title.": "Клітинки буде замінено заголовком сторінки.",
+  "Cells will be replaced with the person's name.": "Клітинки буде замінено іменем особи.",
+  "Change type": "Змінити тип",
+  "Change type to {{label}}?": "Змінити тип на {{label}}?",
+  "Converting…": "Перетворення…",
+  "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.": "Для кожного рядка буде збережено лише перший вибраний елемент; решту буде відкинуто.",
+  "Previous record": "Попередній запис",
+  "Next record": "Наступний запис",
+  "Record actions": "Дії із записом",
+  "Delete record": "Видалити запис",
+  "Delete record?": "Видалити запис?",
+  "This action cannot be undone.": "Цю дію неможливо скасувати.",
+  "to navigate": "для навігації",
+  "to close": "для закриття",
+  "Expand row {{number}}": "Розгорнути рядок {{number}}",
+  "Saving…": "Збереження…",
+  "Read-only": "Лише читання",
+  "Loading…": "Завантаження…",
+  "Updated {{when}}": "Оновлено {{when}}",
+  "Add property": "Додати властивість",
+  "Create property": "Створити властивість",
+  "Hide properties": "Приховати властивості",
+  "Find a property type": "Знайти тип властивості",
+  "Properties": "Властивості"
 }

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

@@ -41,6 +41,8 @@
   "Dark": "深色",
   "Date": "日期",
   "Delete": "删除",
+  "Remove from page": "从页面中移除",
+  "Base options": "数据库选项",
   "Delete group": "删除群组",
   "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "您确定要删除这个页面吗？这将删除其子页面和页面历史记录。此操作不可逆。",
   "Description": "描述",
@@ -76,6 +78,24 @@
   "Failed to import pages": "导入页面失败",
   "Failed to load page. An error occurred.": "页面加载失败。发生了一个错误。",
   "Failed to update data": "数据更新失败",
+  "Failed to create base": "创建数据库失败",
+  "Failed to update base": "更新数据库失败",
+  "Failed to delete base": "删除数据库失败",
+  "Failed to create property": "创建属性失败",
+  "Failed to update property": "更新属性失败",
+  "Failed to delete property": "删除属性失败",
+  "Failed to reorder property": "重新排序属性失败",
+  "Failed to create view": "创建视图失败",
+  "Failed to update view": "更新视图失败",
+  "Failed to delete view": "删除视图失败",
+  "Failed to create row": "创建记录失败",
+  "Failed to update row": "更新记录失败",
+  "Failed to delete row": "删除记录失败",
+  "Failed to delete rows": "删除记录失败",
+  "Failed to reorder row": "重新排序记录失败",
+  "Failed to move card": "移动卡片失败",
+  "Failed to add card": "添加卡片失败",
+  "Failed to export CSV": "导出 CSV 失败",
   "Favorite spaces": "收藏的空间",
   "Favorite spaces appear here": "收藏的空间会显示在这里",
   "Favorites": "收藏",
@@ -398,6 +418,8 @@
   "Insert mermaid diagram": "插入 Mermaid 图表",
   "Insert and design Drawio diagrams": "插入并设计 Drawio 图表",
   "Insert current date": "插入当前日期",
+  "Time": "时间",
+  "Insert current time": "插入当前时间",
   "Draw and sketch excalidraw diagrams": "绘制和草绘 Excalidraw 图表",
   "Multiple": "多个",
   "Turn into": "变成",
@@ -424,6 +446,7 @@
   "Names do not match": "名称不匹配",
   "Today, {{time}}": "今天，{{time}}",
   "Yesterday, {{time}}": "昨天，{{time}}",
+  "now": "现在",
   "Space created successfully": "空间创建成功",
   "Space updated successfully": "空间更新成功",
   "Space deleted successfully": "空间删除成功",
@@ -596,6 +619,8 @@
   "Deleted by": "删除者",
   "Deleted at": "删除于",
   "Preview": "预览",
+  "Base preview unavailable": "无法预览数据库",
+  "Restore this base to view its contents.": "恢复此数据库以查看其内容。",
   "Subpages": "子页面",
   "Failed to load subpages": "加载子页面失败",
   "No subpages": "没有子页面",
@@ -977,7 +1002,7 @@
   "Search pages and spaces...": "搜索页面和空间……",
   "No results found": "未找到结果",
   "You don't have permission to create pages here": "你无权在此处创建页面",
-  "Chat menu": "聊天菜单",
+  "Chat menu for {{title}}": "{{title}} 的聊天菜单",
   "API key menu": "API 密钥菜单",
   "Jump to comment selection": "跳转到评论选择",
   "Slash commands": "斜杠命令",
@@ -1063,7 +1088,7 @@
   "Filter": "筛选",
   "Page title": "页面标题",
   "Page content": "页面内容",
-  "Member actions": "成员操作",
+  "Member actions for {{name}}": "{{name}} 的成员操作",
   "Toggle password visibility": "切换密码可见性",
   "Send comment": "发送评论",
   "Token actions": "令牌操作",
@@ -1084,5 +1109,47 @@
   "Added {{name}} to favorites": "已将 {{name}} 添加到收藏",
   "Removed {{name}} from favorites": "已将 {{name}} 从收藏中移除",
   "Page menu for {{name}}": "{{name}} 的页面菜单",
-  "Create subpage of {{name}}": "创建 {{name}} 的子页面"
+  "Create subpage of {{name}}": "创建 {{name}} 的子页面",
+  "Allow personal spaces": "允许个人空间",
+  "Members can create their own personal space.": "成员可以创建自己的个人空间。",
+  "Toggle allow personal spaces": "切换是否允许个人空间",
+  "Create personal space": "创建个人空间",
+  "Personal space": "个人空间",
+  "{{name}}'s space": "{{name}} 的空间",
+  "Apply": "应用",
+  "Cells that aren't already a page reference will be cleared.": "尚未是页面引用的单元格将被清空。",
+  "Cells that aren't a valid URL will be cleared.": "不是有效 URL 的单元格将被清空。",
+  "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 number will be cleared.": "无法解析为数字的单元格将被清空。",
+  "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "单元格将被强制转换（yes/true/1 将变为选中；其他所有值将变为未选中或被清空）。",
+  "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 option names.": "单元格将被替换为以逗号分隔的选项名称列表。",
+  "Cells will be replaced with the option name.": "单元格将被替换为选项名称。",
+  "Cells will be replaced with the page title.": "单元格将被替换为页面标题。",
+  "Cells will be replaced with the person's name.": "单元格将被替换为此人的姓名。",
+  "Change type": "更改类型",
+  "Change type to {{label}}?": "将类型更改为 {{label}}？",
+  "Converting…": "正在转换…",
+  "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.": "每行仅保留第一个已选项目；其余项目将被丢弃。",
+  "Previous record": "上一条记录",
+  "Next record": "下一条记录",
+  "Record actions": "记录操作",
+  "Delete record": "删除记录",
+  "Delete record?": "删除记录？",
+  "This action cannot be undone.": "此操作无法撤销。",
+  "to navigate": "用于导航",
+  "to close": "用于关闭",
+  "Expand row {{number}}": "展开第 {{number}} 行",
+  "Saving…": "正在保存…",
+  "Read-only": "只读",
+  "Loading…": "正在加载…",
+  "Updated {{when}}": "更新于 {{when}}",
+  "Add property": "添加属性",
+  "Create property": "创建属性",
+  "Hide properties": "隐藏属性",
+  "Find a property type": "查找属性类型",
+  "Properties": "属性"
 }

apps/client/src/App.tsx

@@ -38,6 +38,7 @@ import SpaceTrash from "@/pages/space/space-trash.tsx";
 import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
 import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
 import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
+import BasePage from "@/ee/base/pages/base-page.tsx";
 import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
 import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
 import TemplateList from "@/ee/template/pages/template-list";
@@ -106,6 +107,8 @@ export default function App() {
             element={<Page />}
           />
 
+          <Route path={"/base/:pageId"} element={<BasePage />} />
+
           <Route path={"/settings"}>
             <Route path={"account/profile"} element={<AccountSettings />} />
             <Route

apps/client/src/components/common/page-list-icon.tsx

@@ -0,0 +1,18 @@
+import { ThemeIcon } from "@mantine/core";
+import { IconFileDescription, IconTable } from "@tabler/icons-react";
+
+type Props = {
+  icon?: string | null;
+  isBase?: boolean;
+};
+
+export function PageListIcon({ icon, isBase }: Props) {
+  if (icon) {
+    return <>{icon}</>;
+  }
+  return (
+    <ThemeIcon variant="transparent" color="gray" size={18}>
+      {isBase ? <IconTable size={18} /> : <IconFileDescription size={18} />}
+    </ThemeIcon>
+  );
+}

apps/client/src/components/common/recent-changes.tsx

@@ -4,15 +4,15 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ThemeIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils.ts";
 import { formattedDate } from "@/lib/time.ts";
 import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { IconFileDescription, IconFiles } from "@tabler/icons-react";
+import { PageListIcon } from "@/components/common/page-list-icon";
+import { IconFiles } from "@tabler/icons-react";
 import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
@@ -50,14 +50,10 @@ export default function RecentChanges({ spaceId }: Props) {
                     to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >
                     <Group wrap="nowrap">
-                      {page.icon || (
-                        <ThemeIcon variant="transparent" color="gray" size={18}>
-                          <IconFileDescription size={18} />
-                        </ThemeIcon>
-                      )}
+                      <PageListIcon icon={page.icon} isBase={page.isBase} />
 
                       <Text fw={500} size="md" lineClamp={1}>
-                        {page.title || t("Untitled")}
+                        {getPageTitle(page.title, page.isBase, t)}
                       </Text>
                     </Group>
                   </UnstyledButton>

apps/client/src/components/layouts/global/top-menu.tsx

@@ -15,9 +15,16 @@ import {
   IconMoon,
   IconSettings,
   IconSun,
+  IconUser,
   IconUserCircle,
   IconUsers,
 } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+import { getSpaceUrl } from "@/lib/config.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { usePersonalSpaceQuery } from "@/ee/personal-space/queries/personal-space-query";
+import CreatePersonalSpaceModal from "@/ee/personal-space/components/create-personal-space-modal";
 import { useAtom } from "jotai";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { Link } from "react-router-dom";
@@ -36,11 +43,20 @@ export default function TopMenu() {
   const user = currentUser?.user;
   const workspace = currentUser?.workspace;
 
+  const hasPersonalSpaces = useHasFeature(Feature.PERSONAL_SPACES);
+  const settingEnabled = workspace?.settings?.spaces?.allowPersonal === true;
+  const { data: personalSpace } = usePersonalSpaceQuery(hasPersonalSpaces);
+  const [
+    createOpened,
+    { open: openCreate, close: closeCreate },
+  ] = useDisclosure(false);
+
   if (!user || !workspace) {
     return <></>;
   }
 
   return (
+    <>
     <Menu width={250} position="bottom-end" withArrow shadow={"lg"}>
       <Menu.Target>
         <UnstyledButton>
@@ -115,6 +131,26 @@ export default function TopMenu() {
           {t("My preferences")}
         </Menu.Item>
 
+        {personalSpace ? (
+          <Menu.Item
+            component={Link}
+            to={getSpaceUrl(personalSpace.slug)}
+            leftSection={<IconUser size={16} />}
+          >
+            {t("Personal space")}
+          </Menu.Item>
+        ) : (
+          hasPersonalSpaces &&
+          settingEnabled && (
+            <Menu.Item
+              onClick={openCreate}
+              leftSection={<IconUser size={16} />}
+            >
+              {t("Create personal space")}
+            </Menu.Item>
+          )
+        )}
+
         <Menu.Sub>
           <Menu.Sub.Target>
             <Menu.Sub.Item leftSection={<IconBrightnessFilled size={16} />}>
@@ -160,5 +196,8 @@ export default function TopMenu() {
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>
+
+      <CreatePersonalSpaceModal opened={createOpened} onClose={closeCreate} />
+    </>
   );
 }

apps/client/src/components/ui/custom-avatar.tsx

@@ -54,14 +54,17 @@ export const CustomAvatar = React.forwardRef<
 >(({ avatarUrl, name, type, color, variant, ...props }: CustomAvatarProps, ref) => {
   const avatarLink = getAvatarUrl(avatarUrl, type);
   const isInitials = !color || color === "initials";
-  const resolvedColor = isInitials ? pickInitialsColor(name ?? "") : color;
+  const pickedColor = isInitials ? pickInitialsColor(name ?? "") : color;
+  const hue = pickedColor.split(".")[0];
   const initialsSource = sanitizeInitialsSource(name ?? "");
 
+  const resolvedColor = variant === "filled" ? pickedColor : hue;
+
   const placeholderStyles =
     isInitials && variant !== "filled"
       ? {
           placeholder: {
-            color: `var(--mantine-color-${resolvedColor.split(".")[0]}-9)`,
+            color: `var(--mantine-color-${hue}-9)`,
           },
         }
       : undefined;

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

@@ -3,6 +3,7 @@ import { ActionIcon } from "@mantine/core";
 import { IconChevronRight, IconFileDescription } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { IPage } from "@/features/page/types/page.types";
+import { getPageTitle } from "@/features/page/page.utils";
 import { PageChildren } from "./page-children";
 import classes from "./destination-picker.module.css";
 
@@ -95,7 +96,7 @@ export function PageRow({
         </div>
 
         <div className={classes.pageTitle}>
-          {page.title || t("Untitled")}
+          {getPageTitle(page.title, page.isBase, t)}
         </div>
       </div>
 

apps/client/src/ee/LICENSE

@@ -1 +1,39 @@
-Files in this directory are subject to the Docmost Enterprise Edition license.
+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.

apps/client/src/ee/ai-chat/components/chat-input.tsx

@@ -177,7 +177,7 @@ export default function ChatInput({
   }, []);
 
   const handleSubmit = useCallback(() => {
-    if (!editor || isStreaming) return;
+    if (!editor || editor.isDestroyed || isStreaming) return;
     const json = editor.getJSON();
     const text = editorJsonToText(json).trim();
     const readyAttachments = pendingAttachments.filter((a) => !a.uploading);
@@ -264,7 +264,7 @@ export default function ChatInput({
   });
 
   useEffect(() => {
-    if (editor && autofocus) {
+    if (editor && !editor.isDestroyed && autofocus) {
       editor.commands.focus();
     }
   }, [editor]);

apps/client/src/ee/ai/components/editor/ai-menu/ai-menu.tsx

@@ -1,7 +1,14 @@
 import { Editor } from "@tiptap/react";
 import { ActionIcon, TextInput } from "@mantine/core";
 import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type JSX,
+} from "react";
 import { createPortal } from "react-dom";
 import { useAtom } from "jotai";
 import { IconArrowUp } from "@tabler/icons-react";
@@ -14,7 +21,7 @@ import { ResultPreview } from "./result-preview.tsx";
 import classes from "./ai-menu.module.css";
 import { marked } from "marked";
 import { DOMSerializer } from "@tiptap/pm/model";
-import { copyToClipboard, htmlToMarkdown } from "@docmost/editor-ext";
+import { copyToClipboard, htmlToMarkdown, isEditorReady } from "@docmost/editor-ext";
 import { useLocation } from "react-router-dom";
 
 interface EditorAiMenuProps {
@@ -49,7 +56,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
     });
   }, [prompt, output, activeCommandSet]);
   const updateMenuPlacement = useCallback(() => {
-    if (!editor || !showAiMenu) return;
+    if (!isEditorReady(editor) || !showAiMenu) return;
 
     const { view } = editor;
     const { from, to } = editor.state.selection;
@@ -95,7 +102,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
   );
   const handleGenerate = useCallback(
     (item?: CommandItem) => {
-      if (!editor || isLoading) return;
+      if (!isEditorReady(editor) || isLoading) return;
 
       let command: CommandItem | null = item || null;
 
@@ -158,6 +165,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
         return setActiveCommandSet("main");
       }
       if (item.id === "result-replace") {
+        if (!isEditorReady(editor)) return setShowAiMenu(false);
         const chain = editor.chain().focus();
 
         if (lastAction.action === AiAction.CONTINUE_WRITING) {
@@ -183,6 +191,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
         return setShowAiMenu(false);
       }
       if (item.id === "result-insert-below") {
+        if (!isEditorReady(editor)) return setShowAiMenu(false);
         editor
           .chain()
           .focus()
@@ -246,7 +255,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
   );
 
   useEffect(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
 
     const handleClose = () => setShowAiMenu(false);
     const observer = new ResizeObserver(() => {

apps/client/src/ee/audit/components/audit-logs-table.tsx

@@ -301,7 +301,7 @@ export default function AuditLogsTable({
                   {expandable && (
                     <Table.Tr className={classes.detailRow}>
                       <Table.Td colSpan={4} p={0}>
-                        <Collapse in={isExpanded}>
+                        <Collapse expanded={isExpanded}>
                           <Box
                             px="md"
                             py="sm"

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

@@ -0,0 +1,55 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import { EditingCell, FocusedCell } from "@/ee/base/types/base.types";
+
+// Atoms are scoped per-base via `pageId` so that two BaseTable instances on
+// the same page don't share UI state.
+
+export const activeViewIdAtomFamily = atomFamily((_pageId: string) =>
+  atom<string | null>(null),
+);
+
+export const editingCellAtomFamily = atomFamily((_pageId: string) =>
+  atom<EditingCell>(null),
+);
+
+export type FormulaEditorTarget = {
+  propertyId: string;
+  rowId: string | null;
+} | null;
+
+export const activeFormulaEditorAtomFamily = atomFamily((_pageId: string) =>
+  atom<FormulaEditorTarget>(null),
+);
+
+export const activePropertyMenuAtomFamily = atomFamily((_pageId: string) =>
+  atom<string | null>(null),
+);
+
+export const propertyMenuDirtyAtomFamily = atomFamily((_pageId: string) =>
+  atom<boolean>(false),
+);
+
+export const propertyMenuCloseRequestAtomFamily = atomFamily((_pageId: string) =>
+  atom<number>(0),
+);
+
+export const selectedRowIdsAtomFamily = atomFamily((_pageId: string) =>
+  atom<Set<string>>(new Set<string>()),
+);
+
+export const lastToggledRowIndexAtomFamily = atomFamily((_pageId: string) =>
+  atom<number | null>(null),
+);
+
+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);

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

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

apps/client/src/ee/base/atoms/reference-store-atom.ts

@@ -0,0 +1,20 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import type { RowReferences } from "@/ee/base/types/base.types";
+
+// Per-base normalized store of resolved reference entities, hydrated from each
+// rows-page `references`. Keyed by pageId, matching base-atoms.ts.
+export const referenceStoreAtomFamily = atomFamily((_pageId: string) =>
+  atom<RowReferences>({ users: {}, pages: {} }),
+);
+
+export function mergeReferences(
+  prev: RowReferences,
+  next: RowReferences | undefined,
+): RowReferences {
+  if (!next) return prev;
+  return {
+    users: { ...prev.users, ...next.users },
+    pages: { ...prev.pages, ...next.pages },
+  };
+}

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

@@ -0,0 +1,21 @@
+import { atomFamily, atomWithStorage } from "jotai/utils";
+import { BaseViewDraft } from "@/ee/base/types/base.types";
+
+export type ViewDraftKey = {
+  userId: string;
+  pageId: string;
+  viewId: string;
+};
+
+export const viewDraftStorageKey = (k: ViewDraftKey) =>
+  `docmost:base-view-draft:v1:${k.userId}:${k.pageId}:${k.viewId}`;
+
+// atomWithStorage handles JSON serialization and cross-tab sync. The custom
+// comparator ensures the same userId/pageId/viewId triple resolves to the
+// same atom instance, so Jotai's identity-equality cache hits still work.
+export const viewDraftAtomFamily = atomFamily(
+  (k: ViewDraftKey) =>
+    atomWithStorage<BaseViewDraft | null>(viewDraftStorageKey(k), null),
+  (a, b) =>
+    a.userId === b.userId && a.pageId === b.pageId && a.viewId === b.viewId,
+);

apps/client/src/ee/base/components/base-embed-title.tsx

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useDebouncedCallback } from "@mantine/hooks";
+import {
+  usePageQuery,
+  useUpdateTitlePageMutation,
+  updatePageData,
+} from "@/features/page/queries/page-query";
+import { useQueryEmit } from "@/features/websocket/use-query-emit";
+import { UpdateEvent } from "@/features/websocket/types";
+import localEmitter from "@/lib/local-emitter";
+import classes from "@/ee/base/styles/grid.module.css";
+
+// Editable base name for the inline embed. Follows the TitleEditor convention
+// (updatePageData + localEmitter + websocket emit) so the sidebar and other
+// clients stay in sync. Standalone pages use the page TitleEditor instead.
+export function BaseEmbedTitle({ pageId }: { pageId: string }) {
+  const { t } = useTranslation();
+  const { data: page } = usePageQuery({ pageId });
+  const { mutateAsync: updateTitleAsync } = useUpdateTitlePageMutation();
+  const emit = useQueryEmit();
+  const [value, setValue] = useState("");
+  const focusedRef = useRef(false);
+
+  // Keep in sync with the persisted title but never clobber active user input.
+  useEffect(() => {
+    if (!focusedRef.current) setValue(page?.title ?? "");
+  }, [page?.title]);
+
+  const commit = useCallback(() => {
+    const trimmed = value.trim();
+    if (!page || trimmed === (page.title ?? "")) return;
+    updateTitleAsync({ pageId, title: trimmed }).then((updated) => {
+      if (updated.title !== trimmed) return;
+      const event: UpdateEvent = {
+        operation: "updateOne",
+        spaceId: updated.spaceId,
+        entity: ["pages"],
+        id: updated.id,
+        payload: {
+          title: updated.title,
+          slugId: updated.slugId,
+          parentPageId: updated.parentPageId,
+          icon: updated.icon,
+        },
+      };
+      updatePageData(updated);
+      localEmitter.emit("message", event);
+      emit(event);
+    });
+  }, [value, page, pageId, updateTitleAsync, emit]);
+
+  const debouncedCommit = useDebouncedCallback(commit, 500);
+
+  // Force-save any pending edit on unmount (e.g. navigating away mid-type).
+  const commitRef = useRef(commit);
+  useEffect(() => {
+    commitRef.current = commit;
+  }, [commit]);
+  useEffect(() => () => commitRef.current(), []);
+
+  return (
+    <input
+      className={classes.embedTitleInput}
+      value={value}
+      placeholder={t("Untitled base")}
+      aria-label={t("Base name")}
+      onChange={(e) => {
+        setValue(e.currentTarget.value);
+        debouncedCommit();
+      }}
+      onFocus={() => {
+        focusedRef.current = true;
+      }}
+      onBlur={() => {
+        focusedRef.current = false;
+        commit();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.currentTarget.blur();
+        }
+        if (e.key === "Escape") {
+          setValue(page?.title ?? "");
+          e.currentTarget.blur();
+        }
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,92 @@
+import { Skeleton } from "@mantine/core";
+import gridClasses from "@/ee/base/styles/grid.module.css";
+import classes from "@/ee/base/styles/base-table-skeleton.module.css";
+
+const ROW_NUMBER_WIDTH = 64;
+const COLUMN_WIDTH = 180;
+const DEFAULT_COLUMN_COUNT = 6;
+const DEFAULT_ROW_COUNT = 10;
+
+// Deterministic widths prevent flicker between renders.
+const CELL_WIDTH_RATIOS = [0.78, 0.62, 0.84, 0.55, 0.71, 0.66];
+const HEADER_WIDTH_RATIOS = [0.42, 0.58, 0.5, 0.64, 0.46, 0.54];
+
+type BaseTableSkeletonProps = {
+  // Match the eventual content shape to avoid a jarring size jump on swap.
+  rows?: number;
+  columns?: number;
+};
+
+export function BaseTableSkeleton({
+  rows = DEFAULT_ROW_COUNT,
+  columns = DEFAULT_COLUMN_COUNT,
+}: BaseTableSkeletonProps = {}) {
+  const gridTemplateColumns = [
+    `${ROW_NUMBER_WIDTH}px`,
+    ...Array.from({ length: columns }, () => `${COLUMN_WIDTH}px`),
+  ].join(" ");
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.toolbar}>
+        <div className={classes.toolbarTabs}>
+          <Skeleton height={22} width={44} radius="sm" />
+          <Skeleton height={22} width={64} radius="sm" />
+          <Skeleton height={22} width={48} radius="sm" />
+        </div>
+        <div className={classes.toolbarActions}>
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+        </div>
+      </div>
+
+      <div className={classes.gridWrapper}>
+        <div className={classes.grid} style={{ gridTemplateColumns }}>
+          <div className={gridClasses.headerCell}>
+            <div className={classes.headerCellInner}>
+              <Skeleton height={14} width={14} circle />
+            </div>
+          </div>
+          {Array.from({ length: columns }).map((_, colIndex) => (
+            <div key={`h-${colIndex}`} className={gridClasses.headerCell}>
+              <div className={classes.headerCellInner}>
+                <Skeleton height={14} width={14} circle />
+                <Skeleton
+                  height={10}
+                  width={`${HEADER_WIDTH_RATIOS[colIndex % HEADER_WIDTH_RATIOS.length] * 100}%`}
+                  radius="sm"
+                />
+              </div>
+            </div>
+          ))}
+
+          {Array.from({ length: rows }).map((_, rowIndex) => (
+            <div key={`row-${rowIndex}`} style={{ display: "contents" }}>
+              <div className={gridClasses.cell}>
+                <div className={classes.cellInner}>
+                  <Skeleton height={10} width={18} radius="sm" />
+                </div>
+              </div>
+              {Array.from({ length: columns }).map((_, colIndex) => (
+                <div
+                  key={`cell-${rowIndex}-${colIndex}`}
+                  className={gridClasses.cell}
+                >
+                  <div className={classes.cellInner}>
+                    <Skeleton
+                      height={10}
+                      width={`${CELL_WIDTH_RATIOS[(rowIndex + colIndex) % CELL_WIDTH_RATIOS.length] * 100}%`}
+                      radius="sm"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { GridContainer } from "@/ee/base/components/grid/grid-container";
+import { Table } from "@tanstack/react-table";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+} from "@/ee/base/types/base.types";
+
+type BaseTableProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  effectiveView: IBaseView | undefined;
+  table: Table<IBaseRow>;
+  pageId: string;
+  embedded?: boolean;
+  isFiltered: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onFetchNextPage: () => void;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  onAddRow: (afterRowId?: string, focusPropertyId?: string) => void;
+  onColumnReorder: (columnId: string, finishIndex: number) => void;
+  onResizeEnd: () => void;
+  onRowReorder: (
+    rowId: string,
+    targetRowId: string,
+    dropPosition: "above" | "below",
+  ) => void;
+  persistViewConfig: () => void;
+  scrollportRef: React.RefObject<HTMLDivElement>;
+  aboveBand?: React.ReactNode;
+};
+
+export function BaseTable({
+  base,
+  rows: _rows,
+  table,
+  pageId,
+  embedded,
+  isFiltered,
+  hasNextPage,
+  isFetchingNextPage,
+  onFetchNextPage,
+  onCellUpdate,
+  onAddRow,
+  onColumnReorder,
+  onResizeEnd,
+  onRowReorder,
+  scrollportRef,
+  aboveBand,
+}: BaseTableProps) {
+  return (
+    <GridContainer
+      table={table}
+      properties={base.properties}
+      onCellUpdate={onCellUpdate}
+      onAddRow={onAddRow}
+      pageId={pageId}
+      isFiltered={isFiltered}
+      onColumnReorder={onColumnReorder}
+      onResizeEnd={onResizeEnd}
+      onRowReorder={onRowReorder}
+      hasNextPage={hasNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      onFetchNextPage={onFetchNextPage}
+      scrollElement={embedded ? window : scrollportRef.current}
+      aboveBand={aboveBand ?? null}
+    />
+  );
+}

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

@@ -0,0 +1,295 @@
+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 { 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 [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}>
+        <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>
+  );
+}

apps/client/src/ee/base/components/base-view-draft-banner.tsx

@@ -0,0 +1,45 @@
+import { Group, Button, Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+type BaseViewDraftBannerProps = {
+  isDirty: boolean;
+  canSave: boolean;
+  onReset: () => void;
+  onSave: () => void;
+  saving: boolean;
+};
+
+export function BaseViewDraftBanner({
+  isDirty,
+  canSave,
+  onReset,
+  onSave,
+  saving,
+}: BaseViewDraftBannerProps) {
+  const { t } = useTranslation();
+  if (!isDirty) return null;
+  return (
+    <Group justify="flex-end" gap="xs" px="md" py={6} wrap="nowrap">
+      <Button variant="subtle" color="gray" size="xs" onClick={onReset}>
+        {t("Reset")}
+      </Button>
+      {canSave && (
+        <Tooltip
+          label={t("Filter and sort changes are visible only to you")}
+          position="top"
+          withArrow
+        >
+          <Button
+            variant="light"
+            color="orange"
+            size="xs"
+            onClick={onSave}
+            loading={saving}
+          >
+            {t("Save for everyone")}
+          </Button>
+        </Tooltip>
+      )}
+    </Group>
+  );
+}

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

@@ -0,0 +1,541 @@
+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,
+  FocusedCell,
+  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,
+  focusedCellAtomFamily,
+} 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 [, setFocusedCell] = useAtom(
+    focusedCellAtomFamily(pageId),
+  ) as unknown as [FocusedCell, (val: FocusedCell) => 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(
+    (afterRowId?: string, focusPropertyId?: string) => {
+      if (!editable) return;
+      createRowMutation.mutate(
+        { pageId, ...(afterRowId ? { afterRowId } : {}) },
+        {
+          onSuccess: (newRow) => {
+            let propertyId = focusPropertyId;
+            if (!propertyId) {
+              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)
+                );
+              });
+              propertyId = (
+                firstEditable?.columnDef.meta?.property as
+                  | IBaseProperty
+                  | undefined
+              )?.id;
+            }
+            if (propertyId) {
+              setEditingCell({ rowId: newRow.id, propertyId });
+              setFocusedCell({ rowId: newRow.id, propertyId });
+            }
+          },
+        },
+      );
+    },
+    [editable, pageId, createRowMutation, table, setEditingCell, setFocusedCell],
+  );
+
+  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>
+  );
+}

apps/client/src/ee/base/components/cells/badge-overflow.tsx

@@ -0,0 +1,100 @@
+import { ReactElement, useLayoutEffect, useRef, useState } from "react";
+import { Tooltip } from "@mantine/core";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+export function computeVisibleBadgeCount(
+  itemWidths: number[],
+  gap: number,
+  available: number,
+  badgeWidth: number,
+): number {
+  const count = itemWidths.length;
+  if (count === 0) return 0;
+  if (available <= 0) return count;
+
+  let lineWidth = 0;
+  for (let i = 0; i < count; i++) {
+    lineWidth += itemWidths[i] + (i > 0 ? gap : 0);
+  }
+  if (lineWidth <= available) return count;
+
+  let used = 0;
+  let fit = 0;
+  for (let i = 0; i < count; i++) {
+    const advance = itemWidths[i] + (i > 0 ? gap : 0);
+    if (used + advance + gap + badgeWidth <= available) {
+      used += advance;
+      fit = i + 1;
+    } else {
+      break;
+    }
+  }
+  return Math.max(fit, 1);
+}
+
+const BADGE_GAP = 4;
+
+type BadgeOverflowListProps = {
+  chips: ReactElement[];
+  measureKey: string;
+  tooltipLabel?: string;
+};
+
+export function BadgeOverflowList({
+  chips,
+  measureKey,
+  tooltipLabel,
+}: BadgeOverflowListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [visibleCount, setVisibleCount] = useState(chips.length);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const measure = measureRef.current;
+    if (!container || !measure) return;
+
+    const recompute = () => {
+      const nodes = Array.from(measure.children) as HTMLElement[];
+      const chipWidths = nodes.slice(0, -1).map((n) => n.offsetWidth);
+      const badgeWidth = nodes[nodes.length - 1]?.offsetWidth ?? 0;
+      setVisibleCount(
+        computeVisibleBadgeCount(
+          chipWidths,
+          BADGE_GAP,
+          container.clientWidth,
+          badgeWidth,
+        ),
+      );
+    };
+
+    recompute();
+    const observer = new ResizeObserver(recompute);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [measureKey]);
+
+  const visible = chips.slice(0, visibleCount);
+  const overflow = chips.length - visibleCount;
+
+  return (
+    <Tooltip
+      label={tooltipLabel}
+      multiline
+      withinPortal
+      openDelay={400}
+      disabled={!tooltipLabel || overflow <= 0}
+    >
+      <div className={cellClasses.badgeGroup} ref={containerRef}>
+        <div className={cellClasses.badgeMeasure} ref={measureRef} aria-hidden>
+          {chips}
+          <span className={cellClasses.overflowCount}>+{chips.length}</span>
+        </div>
+        {visible}
+        {overflow > 0 && (
+          <span className={cellClasses.overflowCount}>+{overflow}</span>
+        )}
+      </div>
+    </Tooltip>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,146 @@
+import { useCallback } from "react";
+import { Popover } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import {
+  IBaseProperty,
+  DateTypeOptions,
+} from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellDateProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function formatDateDisplay(
+  dateStr: string | null | undefined,
+  options: DateTypeOptions | undefined,
+): string {
+  if (!dateStr) return "";
+  try {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return "";
+
+    const months = [
+      "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+    ];
+    const month = months[date.getMonth()];
+    const day = date.getDate();
+    const year = date.getFullYear();
+
+    let result = `${month} ${day}, ${year}`;
+
+    if (options?.includeTime) {
+      if (options.timeFormat === "24h") {
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        result += ` ${hours}:${minutes}`;
+      } else {
+        let hours = date.getHours();
+        const ampm = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12 || 12;
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        result += ` ${hours}:${minutes} ${ampm}`;
+      }
+    }
+
+    return result;
+  } catch {
+    return "";
+  }
+}
+
+function toISODateString(dateStr: string | null): string | null {
+  if (!dateStr) return null;
+  try {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return null;
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  } catch {
+    return null;
+  }
+}
+
+export function CellDate({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellDateProps) {
+  const typeOptions = property.typeOptions as DateTypeOptions | undefined;
+  const dateStr = typeof value === "string" ? value : null;
+  const pickerValue = toISODateString(dateStr);
+
+  const handleChange = useCallback(
+    (selected: string | null) => {
+      if (selected) {
+        const date = new Date(selected);
+        onCommit(date.toISOString());
+      } else {
+        onCommit(null);
+      }
+    },
+    [onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width="auto"
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            <span className={cellClasses.dateValue}>
+              {formatDateDisplay(dateStr, typeOptions)}
+            </span>
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p="xs" onKeyDown={handleKeyDown}>
+          <DatePicker
+            value={pickerValue}
+            onChange={handleChange}
+            size="sm"
+          />
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!dateStr) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <span className={cellClasses.dateValue}>
+      {formatDateDisplay(dateStr, typeOptions)}
+    </span>
+  );
+}

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

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

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

@@ -0,0 +1,236 @@
+import { useState, useRef, useCallback } from "react";
+import { Popover, ActionIcon, Text, UnstyledButton } from "@mantine/core";
+import {
+  IconPaperclip,
+  IconUpload,
+  IconFile,
+  IconX,
+} from "@tabler/icons-react";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { uploadFile } from "@/features/page/services/page-service";
+import { getFileUrl } from "@/lib/config";
+
+export type FileValue = {
+  id: string;
+  fileName: string;
+  mimeType?: string;
+  fileSize?: number;
+  url?: string;
+};
+
+function buildFileUrl(file: Pick<FileValue, "id" | "fileName" | "url">): string {
+  return file.url ?? `/api/files/${file.id}/${encodeURIComponent(file.fileName)}`;
+}
+
+type CellFileProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  readOnly?: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatFileSize(bytes?: number): string {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function parseFiles(value: unknown): FileValue[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter(
+    (f): f is FileValue =>
+      f && typeof f === "object" && "id" in f && "fileName" in f,
+  );
+}
+
+export function CellFile({
+  value,
+  property,
+  isEditing,
+  readOnly,
+  onCommit,
+  onCancel,
+}: CellFileProps) {
+  const files = parseFiles(value);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const handleRemove = useCallback(
+    (fileId: string) => {
+      if (readOnly) return;
+      const updated = files.filter((f) => f.id !== fileId);
+      onCommit(updated.length > 0 ? updated : null);
+    },
+    [readOnly, files, onCommit],
+  );
+
+  const handleUpload = useCallback(
+    async (fileList: FileList | null) => {
+      if (!fileList || fileList.length === 0) return;
+      setUploading(true);
+
+      const newFiles: FileValue[] = [...files];
+
+      // Reuse the page-attachment upload pipeline: the base's pageId is passed
+      // to the standard /files/upload endpoint, which enforces the same edit
+      // access check as any other page attachment.
+      for (const file of Array.from(fileList)) {
+        try {
+          const attachment = await uploadFile(file, property.pageId);
+          newFiles.push({
+            id: attachment.id,
+            fileName: attachment.fileName,
+            mimeType: attachment.mimeType,
+            fileSize: attachment.fileSize,
+            url: `/api/files/${attachment.id}/${encodeURIComponent(attachment.fileName)}`,
+          });
+        } catch (err) {
+          console.error("File upload failed:", err);
+        }
+      }
+
+      setUploading(false);
+      onCommit(newFiles.length > 0 ? newFiles : null);
+    },
+    [files, property.pageId, onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  const MAX_VISIBLE = 2;
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={280}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+        hideDetached={false}
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            <FileList files={files} maxVisible={MAX_VISIBLE} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={8} onKeyDown={handleKeyDown}>
+          {!readOnly && files.length === 0 && !uploading && (
+            <Text size="xs" c="dimmed" mb={8}>
+              No files attached
+            </Text>
+          )}
+
+          {files.map((file) => (
+            <div key={file.id} className={cellClasses.fileItemRow}>
+              <IconFile size={14} className={cellClasses.fileItemIcon} />
+              <a
+                href={getFileUrl(buildFileUrl(file))}
+                target="_blank"
+                rel="noreferrer"
+                className={cellClasses.fileItemLink}
+              >
+                <Text size="xs" truncate="end" fw={500}>
+                  {file.fileName}
+                </Text>
+                {file.fileSize != null && (
+                  <Text size="xs" c="dimmed">
+                    {formatFileSize(file.fileSize)}
+                  </Text>
+                )}
+              </a>
+              {!readOnly && (
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  size="xs"
+                  onClick={() => handleRemove(file.id)}
+                >
+                  <IconX size={12} />
+                </ActionIcon>
+              )}
+            </div>
+          ))}
+
+          {!readOnly && (
+            <>
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                style={{ display: "none" }}
+                onChange={(e) => {
+                  handleUpload(e.target.files);
+                  e.target.value = "";
+                }}
+              />
+
+              <UnstyledButton
+                onClick={() => fileInputRef.current?.click()}
+                disabled={uploading}
+                className={cellClasses.fileUploadBtn}
+                style={{
+                  color: uploading
+                    ? "var(--mantine-color-gray-5)"
+                    : "var(--mantine-color-blue-6)",
+                }}
+              >
+                <IconUpload size={14} />
+                {uploading ? "Uploading..." : "Add file"}
+              </UnstyledButton>
+            </>
+          )}
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (files.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <FileList files={files} maxVisible={MAX_VISIBLE} />;
+}
+
+function FileList({
+  files,
+  maxVisible,
+}: {
+  files: FileValue[];
+  maxVisible: number;
+}) {
+  const visible = files.slice(0, maxVisible);
+  const overflow = files.length - maxVisible;
+
+  return (
+    <div className={cellClasses.fileGroup}>
+      {visible.map((file) => (
+        <span key={file.id} className={cellClasses.fileBadge}>
+          <IconPaperclip size={12} />
+          {file.fileName}
+        </span>
+      ))}
+      {overflow > 0 && (
+        <span className={cellClasses.overflowCount}>+{overflow}</span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { Badge, Tooltip } from "@mantine/core";
+import {
+  IBaseProperty,
+  isFormulaErrorCell,
+} from "@/ee/base/types/base.types";
+import { CellText } from "./cell-text";
+import { CellNumber } from "./cell-number";
+import { CellCheckbox } from "./cell-checkbox";
+import { CellDate } from "./cell-date";
+
+type Props = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellFormula(props: Props) {
+  const { value, property } = props;
+  if (isFormulaErrorCell(value)) {
+    return (
+      <Tooltip label={`${value.__err}: ${value.msg}`}>
+        <Badge color="red" variant="light" size="sm">
+          #ERROR
+        </Badge>
+      </Tooltip>
+    );
+  }
+  const opts = (property.typeOptions ?? {}) as { resultType?: string };
+  const resultType = opts.resultType ?? "null";
+  const readOnlyProps = { ...props, isEditing: false };
+  if (resultType === "number") return <CellNumber {...readOnlyProps} />;
+  if (resultType === "boolean") return <CellCheckbox {...readOnlyProps} />;
+  if (resultType === "date") return <CellDate {...readOnlyProps} />;
+  return <CellText {...readOnlyProps} />;
+}

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

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

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

@@ -0,0 +1,41 @@
+import { Group, Tooltip } from "@mantine/core";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { useReferenceStore } from "@/ee/base/reference/reference-store";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellLastEditedByProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellLastEditedBy({ value, property }: CellLastEditedByProps) {
+  const userId = typeof value === "string" ? value : null;
+
+  const store = useReferenceStore(property.pageId);
+  const user = userId ? store.users[userId] ?? null : null;
+
+  if (!userId) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  const name = user?.name ?? userId.substring(0, 8);
+
+  return (
+    <Group gap={6} wrap="nowrap" style={{ overflow: "hidden" }}>
+      <CustomAvatar
+        avatarUrl={user?.avatarUrl ?? ""}
+        name={name}
+        size={20}
+        radius="xl"
+      />
+      <Tooltip label={name} withinPortal openDelay={400} disabled={!name}>
+        <span className={cellClasses.lastEditedByName}>{name}</span>
+      </Tooltip>
+    </Group>
+  );
+}

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

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

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

@@ -0,0 +1,289 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
+import { Popover, TextInput } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { BadgeOverflowList } from "@/ee/base/components/cells/badge-overflow";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { generateBaseChoiceId } from "@/ee/base/utils/generate-base-id";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+type CellMultiSelectProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellMultiSelect({
+  value,
+  property,
+  isEditing,
+  onValueChange,
+  onCancel,
+}: CellMultiSelectProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedIds = Array.isArray(value) ? (value as string[]) : [];
+  const selectedSet = new Set(selectedIds);
+
+  const selectedChoices = choices.filter((c) => selectedSet.has(c.id));
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const filteredChoices = (
+    search
+      ? choices.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
+      : choices
+  ).filter((c) => !selectedSet.has(c.id));
+
+  const handleToggle = useCallback(
+    (choice: Choice) => {
+      const newIds = selectedSet.has(choice.id)
+        ? selectedIds.filter((id) => id !== choice.id)
+        : [...selectedIds, choice.id];
+      onValueChange(newIds);
+    },
+    [selectedIds, selectedSet, onValueChange],
+  );
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+
+  const trimmedSearch = search.trim();
+  const hasExactMatch = useMemo(
+    () =>
+      trimmedSearch.length > 0 &&
+      choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
+    [choices, trimmedSearch],
+  );
+  const showAddOption = trimmedSearch.length > 0 && !hasExactMatch;
+
+  const addOptionColor = useMemo(
+    () => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
+    [choices.length],
+  );
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+      ...(showAddOption ? [{ kind: "add" as const }] : []),
+    ],
+    [filteredChoices, showAddOption],
+  );
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
+
+  const handleAddOption = useCallback(() => {
+    if (!trimmedSearch) return;
+    const newChoice: Choice = {
+      id: generateBaseChoiceId(),
+      name: trimmedSearch,
+      color: addOptionColor,
+    };
+    const newChoices = [...choices, newChoice];
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+      typeOptions: {
+        ...typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      },
+    });
+    onValueChange([...selectedIds, newChoice.id]);
+    setSearch("");
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, selectedIds, onValueChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < navItems.length) {
+          e.preventDefault();
+          const item = navItems[activeIndex];
+          if (item.kind === "choice") handleToggle(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, navItems, handleToggle, handleAddOption, showAddOption],
+  );
+
+  if (isEditing) {
+    const addOptionIdx = filteredChoices.length;
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            <BadgeList choices={selectedChoices} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          {selectedChoices.length > 0 && (
+            <div className={cellClasses.personTagArea}>
+              {selectedChoices.map((choice) => (
+                <span
+                  key={choice.id}
+                  className={cellClasses.badge}
+                  style={choiceColor(choice.color)}
+                >
+                  {choice.name}
+                  <button
+                    type="button"
+                    className={`${cellClasses.personTagRemove} ${cellClasses.badgeRemoveBtn}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleToggle(choice);
+                    }}
+                  >
+                    <IconX size={10} />
+                  </button>
+                </span>
+              ))}
+            </div>
+          )}
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+            data-autofocus
+          />
+          <div className={cellClasses.selectDropdown}>
+            {filteredChoices.map((choice, idx) => (
+              <div
+                key={choice.id}
+                ref={setOptionRef(idx)}
+                className={clsx(
+                  cellClasses.selectOption,
+                  idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(idx)}
+                onClick={() => handleToggle(choice)}
+              >
+                <span
+                  className={cellClasses.badge}
+                  style={choiceColor(choice.color)}
+                >
+                  {choice.name}
+                </span>
+              </div>
+            ))}
+            {showAddOption && (
+              <div
+                ref={setOptionRef(addOptionIdx)}
+                className={clsx(
+                  cellClasses.addOptionRow,
+                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(addOptionIdx)}
+                onClick={handleAddOption}
+              >
+                <span className={cellClasses.addOptionLabel}>Add option:</span>
+                <span
+                  className={cellClasses.badge}
+                  style={choiceColor(addOptionColor)}
+                >
+                  {trimmedSearch}
+                </span>
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (selectedChoices.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <BadgeList
+      choices={selectedChoices}
+      tooltipLabel={selectedChoices.map((c) => c.name).join(", ")}
+    />
+  );
+}
+
+function BadgeList({
+  choices,
+  tooltipLabel,
+}: {
+  choices: Choice[];
+  tooltipLabel?: string;
+}) {
+  const chips = choices.map((choice) => (
+    <span
+      key={choice.id}
+      className={cellClasses.badge}
+      style={choiceColor(choice.color)}
+    >
+      {choice.name}
+    </span>
+  ));
+  return (
+    <BadgeOverflowList
+      chips={chips}
+      measureKey={choices.map((c) => `${c.id}:${c.name}`).join("|")}
+      tooltipLabel={tooltipLabel}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,339 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, ActionIcon, Text, Tooltip } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { useQuery } from "@tanstack/react-query";
+import { IconX, IconFileDescription } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { IBaseProperty } from "@/ee/base/types/base.types";
+import { useResolvePage } from "@/ee/base/reference/reference-store";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { searchSuggestions } from "@/features/search/services/search-service";
+import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { extractPageSlugId } from "@/lib";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type CellPageProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+type PageSuggestion = {
+  id: string;
+  slugId: string;
+  title: string | null;
+  icon: string | null;
+  spaceId: string;
+  space?: { id: string; slug: string; name: string } | null;
+};
+
+function parsePageId(value: unknown): string | null {
+  if (typeof value === "string" && value.length > 0) return value;
+  return null;
+}
+
+function parsePastedPageSlugId(input: string): string | null {
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+  let path = trimmed;
+  if (/^https?:\/\//i.test(trimmed)) {
+    try {
+      path = new URL(trimmed).pathname;
+    } catch {
+      return null;
+    }
+  }
+  const match = path.match(/\/p\/([^/?#]+)/);
+  if (!match) return null;
+  return extractPageSlugId(match[1]) ?? null;
+}
+
+export function CellPage({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellPageProps) {
+  const pageId = parsePageId(value);
+  const { data: base } = useBaseQuery(property.pageId);
+
+  const resolvedPage = useResolvePage(property.pageId, pageId);
+
+  if (isEditing) {
+    return (
+      <PagePicker
+        pageId={pageId}
+        resolvedPage={resolvedPage ?? null}
+        spaceId={base?.spaceId}
+        onCommit={onCommit}
+        onCancel={onCancel}
+      />
+    );
+  }
+
+  if (!pageId) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  if (resolvedPage === undefined) {
+    // placeholder to avoid "Page not found" flicker on initial load
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  if (resolvedPage === null) {
+    return (
+      <span className={cellClasses.pageMissing}>
+        <IconFileDescription size={14} />
+        <span>Page not found</span>
+      </span>
+    );
+  }
+
+  return <PagePill page={resolvedPage} />;
+}
+
+type PillPage = {
+  slugId: string;
+  title: string | null;
+  icon: string | null;
+  space: { slug: string } | null;
+};
+
+function PagePill({ page }: { page: PillPage }) {
+  const { t } = useTranslation();
+  const title = getPageTitle(page.title, undefined, t);
+  const spaceSlug = page.space?.slug ?? "";
+  const url = buildPageUrl(spaceSlug, page.slugId, title);
+
+  return (
+    <Tooltip label={title} withinPortal openDelay={400} disabled={!title}>
+      <Link
+        to={url}
+        className={cellClasses.pagePill}
+        onClick={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
+        {page.icon ? (
+          <span className={cellClasses.pagePillIcon}>{page.icon}</span>
+        ) : (
+          <IconFileDescription size={14} className={cellClasses.pagePillIconFallback} />
+        )}
+        <span className={cellClasses.pagePillText}>{title}</span>
+      </Link>
+    </Tooltip>
+  );
+}
+
+type PagePickerProps = {
+  pageId: string | null;
+  resolvedPage: { id: string; slugId: string; title: string | null; icon: string | null; space: { id: string; slug: string; name: string } | null } | null;
+  spaceId?: string;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function PagePicker({
+  pageId,
+  resolvedPage,
+  spaceId,
+  onCommit,
+  onCancel,
+}: PagePickerProps) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 250);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, []);
+
+  const trimmed = debouncedSearch.trim();
+
+  const pastedSlugId = useMemo(
+    () => parsePastedPageSlugId(debouncedSearch),
+    [debouncedSearch],
+  );
+
+  const { data: suggestions = [] } = useQuery({
+    queryKey: ["bases", "pages", "search", trimmed, spaceId ?? ""],
+    queryFn: async () => {
+      const res = await searchSuggestions({
+        query: trimmed,
+        includePages: true,
+        spaceId,
+        limit: trimmed ? 25 : 5,
+      });
+      return (res.pages ?? []) as PageSuggestion[];
+    },
+    enabled: !pastedSlugId,
+    staleTime: 15_000,
+  });
+
+  // Once the pasted link resolves via slugId lookup, commit and close.
+  const { data: linkedPage, isFetching: resolvingLink } = usePageQuery(
+    pastedSlugId ? { pageId: pastedSlugId } : {},
+  );
+  const linkedRef = useRef(false);
+  useEffect(() => {
+    if (!pastedSlugId) {
+      linkedRef.current = false;
+      return;
+    }
+    if (linkedPage && !linkedRef.current) {
+      linkedRef.current = true;
+      onCommit(linkedPage.id);
+    }
+  }, [pastedSlugId, linkedPage, onCommit]);
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(suggestions.length, [debouncedSearch]);
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      onCommit(id === pageId ? null : id);
+    },
+    [pageId, onCommit],
+  );
+
+  const handleRemove = useCallback(() => {
+    onCommit(null);
+  }, [onCommit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= suggestions.length) return;
+        e.preventDefault();
+        handleSelect(suggestions[activeIndex].id);
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, suggestions, handleSelect],
+  );
+
+  return (
+    <Popover
+      opened
+      onChange={(o) => {
+        if (!o) onCancel();
+      }}
+      onClose={onCancel}
+      position="bottom-start"
+      width={320}
+      trapFocus
+      closeOnClickOutside
+      closeOnEscape
+      hideDetached={false}
+    >
+      <Popover.Target>
+        <div className={cellClasses.popoverTarget}>
+          {resolvedPage ? <PagePill page={resolvedPage} /> : <span className={cellClasses.emptyValue} />}
+        </div>
+      </Popover.Target>
+      <Popover.Dropdown p={0}>
+        <div className={cellClasses.personTagArea}>
+          {pageId && resolvedPage && (
+            <span className={cellClasses.personTag}>
+              {resolvedPage.icon ? (
+                <span>{resolvedPage.icon}</span>
+              ) : (
+                <IconFileDescription
+                  size={14}
+                  color="var(--mantine-color-dimmed)"
+                />
+              )}
+              <span className={cellClasses.personTagName}>
+                {getPageTitle(resolvedPage.title, undefined, t)}
+              </span>
+              <button
+                type="button"
+                className={cellClasses.personTagRemove}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove();
+                }}
+              >
+                <IconX size={10} />
+              </button>
+            </span>
+          )}
+          <input
+            ref={searchRef}
+            className={cellClasses.personTagInput}
+            placeholder={pageId ? "" : "Search for a page..."}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            data-autofocus
+          />
+        </div>
+
+        <div className={cellClasses.personDropdownDivider} />
+        <div className={cellClasses.selectDropdown}>
+          {pastedSlugId ? (
+            <div className={cellClasses.personDropdownHint}>
+              {resolvingLink || linkedPage ? "Linking page…" : "Page not found"}
+            </div>
+          ) : (
+            <>
+          {suggestions.length === 0 && (
+            <div className={cellClasses.personDropdownHint}>
+              {trimmed ? "No pages found" : "No pages yet"}
+            </div>
+          )}
+          {suggestions.map((page, idx) => {
+            const isSelected = page.id === pageId;
+            return (
+              <div
+                key={page.id}
+                ref={setOptionRef(idx)}
+                className={clsx(
+                  cellClasses.selectOption,
+                  isSelected && cellClasses.selectOptionActive,
+                  idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(idx)}
+                onClick={() => handleSelect(page.id)}
+              >
+                {page.icon ? (
+                  <span>{page.icon}</span>
+                ) : (
+                  <IconFileDescription
+                    size={14}
+                    color="var(--mantine-color-dimmed)"
+                  />
+                )}
+                <div className={cellClasses.pageOptionText}>
+                  <span className={cellClasses.personOptionName}>
+                    {getPageTitle(page.title, undefined, t)}
+                  </span>
+                  {page.space?.name && (
+                    <Text size="xs" c="dimmed" truncate>
+                      {page.space.name}
+                    </Text>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+            </>
+          )}
+        </div>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,247 @@
+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 "@/ee/base/types/base.types";
+import {
+  useReferenceStore,
+  useHydrateUsers,
+} from "@/ee/base/reference/reference-store";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+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;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onValueChange: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellPerson({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onValueChange,
+  onCancel,
+}: CellPersonProps) {
+  const allowMultiple =
+    (property.typeOptions as PersonTypeOptions)?.allowMultiple === true;
+
+  const personIds = Array.isArray(value)
+    ? (value as string[])
+    : typeof value === "string"
+      ? [value]
+      : [];
+
+  const selectedSet = new Set(personIds);
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const store = useReferenceStore(property.pageId);
+
+  const hydrateUsers = useHydrateUsers(property.pageId);
+
+  const suggestions = usePersonSearch(search, isEditing);
+
+  // In multi mode omit already-selected from the list (they appear as tags above).
+  // Single mode keeps the selected row visible so it can be deselected.
+  const filteredMembers = allowMultiple
+    ? suggestions.filter((m) => !selectedSet.has(m.id))
+    : suggestions;
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(filteredMembers.length, [search, isEditing]);
+
+  const handleSelect = useCallback(
+    (memberId: string) => {
+      const picked = suggestions.find((s) => s.id === memberId);
+      if (picked)
+        hydrateUsers([
+          { id: picked.id, name: picked.name, avatarUrl: picked.avatarUrl },
+        ]);
+      if (allowMultiple) {
+        if (personIds.includes(memberId)) {
+          const newIds = personIds.filter((id) => id !== memberId);
+          onValueChange(newIds.length > 0 ? newIds : null);
+        } else {
+          onValueChange([...personIds, memberId]);
+        }
+      } else {
+        if (personIds.includes(memberId)) {
+          onCommit(null);
+        } else {
+          onCommit(memberId);
+        }
+      }
+    },
+    [suggestions, hydrateUsers, allowMultiple, personIds, onCommit, onValueChange],
+  );
+
+  const handleRemove = useCallback(
+    (memberId: string) => {
+      if (allowMultiple) {
+        const newIds = personIds.filter((id) => id !== memberId);
+        onValueChange(newIds.length > 0 ? newIds : null);
+      } else {
+        onCommit(null);
+      }
+    },
+    [allowMultiple, personIds, onCommit, onValueChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= filteredMembers.length) return;
+        e.preventDefault();
+        handleSelect(filteredMembers[activeIndex].id);
+        return;
+      }
+      if (e.key === "Backspace" && search === "" && personIds.length > 0) {
+        e.preventDefault();
+        handleRemove(personIds[personIds.length - 1]);
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, filteredMembers, handleSelect, search, personIds, handleRemove],
+  );
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={300}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+        hideDetached={false}
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            <PersonReadList personIds={personIds} users={store.users} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={0}>
+          <div className={cellClasses.personTagArea}>
+            {personIds.map((id) => {
+              const member = store.users[id];
+              const name = member?.name ?? id.substring(0, 8);
+              return (
+                <span key={id} className={cellClasses.personTag}>
+                  <CustomAvatar
+                    avatarUrl={member?.avatarUrl ?? ""}
+                    name={name}
+                    size={18}
+                    radius="xl"
+                  />
+                  <span className={cellClasses.personTagName}>{name}</span>
+                  <button
+                    type="button"
+                    className={cellClasses.personTagRemove}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemove(id);
+                    }}
+                  >
+                    <IconX size={10} />
+                  </button>
+                </span>
+              );
+            })}
+            <input
+              ref={searchRef}
+              className={cellClasses.personTagInput}
+              placeholder={personIds.length === 0 ? "Search for a person..." : ""}
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+              onKeyDown={handleKeyDown}
+              data-autofocus
+            />
+          </div>
+
+          <div className={cellClasses.personDropdownDivider} />
+          {allowMultiple && (
+            <div className={cellClasses.personDropdownHint}>
+              Select as many as you like
+            </div>
+          )}
+          <div className={cellClasses.selectDropdown}>
+            {filteredMembers.map((member, idx) => {
+              const isSelected = selectedSet.has(member.id);
+              return (
+                <div
+                  key={member.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onClick={() => handleSelect(member.id)}
+                >
+                  <CustomAvatar
+                    avatarUrl={member.avatarUrl ?? ""}
+                    name={member.name ?? ""}
+                    size={24}
+                    radius="xl"
+                  />
+                  <div className={cellClasses.personOptionText}>
+                    <span className={cellClasses.personOptionName}>
+                      {member.name ?? ""}
+                    </span>
+                    {member.email && (
+                      <span className={cellClasses.personOptionEmail}>
+                        {member.email}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+            {filteredMembers.length === 0 && (
+              <div className={cellClasses.personDropdownHint}>
+                No members found
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (personIds.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <PersonReadList personIds={personIds} users={store.users} />;
+}
+

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

@@ -0,0 +1,239 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoiceBadge } from "@/ee/base/components/cells/choice-badge";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { generateBaseChoiceId } from "@/ee/base/utils/generate-base-id";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+type CellSelectProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellSelect({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellSelectProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedId = typeof value === "string" ? value : null;
+  const selectedChoice = choices.find((c) => c.id === selectedId);
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const filteredChoices = search
+    ? choices.filter((c) =>
+        c.name.toLowerCase().includes(search.toLowerCase()),
+      )
+    : choices;
+
+  const handleSelect = useCallback(
+    (choice: Choice) => {
+      onCommit(choice.id === selectedId ? null : choice.id);
+    },
+    [selectedId, onCommit],
+  );
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+
+  const trimmedSearch = search.trim();
+  const hasExactMatch = useMemo(
+    () =>
+      trimmedSearch.length > 0 &&
+      choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
+    [choices, trimmedSearch],
+  );
+  const showAddOption = trimmedSearch.length > 0 && !hasExactMatch;
+
+  const addOptionColor = useMemo(
+    () => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
+    [choices.length],
+  );
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+      ...(showAddOption ? [{ kind: "add" as const }] : []),
+    ],
+    [filteredChoices, showAddOption],
+  );
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
+
+  const handleAddOption = useCallback(() => {
+    if (!trimmedSearch) return;
+    const newChoice: Choice = {
+      id: generateBaseChoiceId(),
+      name: trimmedSearch,
+      color: addOptionColor,
+    };
+    const newChoices = [...choices, newChoice];
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+      typeOptions: {
+        ...typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      },
+    });
+    onCommit(newChoice.id);
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, onCommit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < navItems.length) {
+          e.preventDefault();
+          const item = navItems[activeIndex];
+          if (item.kind === "choice") handleSelect(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, navItems, handleSelect, handleAddOption, showAddOption],
+  );
+
+  if (isEditing) {
+    const addOptionIdx = filteredChoices.length;
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            {selectedChoice ? (
+              <span
+                className={cellClasses.badge}
+                style={choiceColor(selectedChoice.color)}
+              >
+                {selectedChoice.name}
+              </span>
+            ) : (
+              <span className={cellClasses.emptyValue} />
+            )}
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+          />
+          <div className={cellClasses.selectDropdown}>
+            {filteredChoices.map((choice, idx) => {
+              const isSelected = choice.id === selectedId;
+              return (
+                <div
+                  key={choice.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onClick={() => handleSelect(choice)}
+                >
+                  <span
+                    className={cellClasses.badge}
+                    style={choiceColor(choice.color)}
+                  >
+                    {choice.name}
+                  </span>
+                </div>
+              );
+            })}
+            {showAddOption && (
+              <div
+                ref={setOptionRef(addOptionIdx)}
+                className={clsx(
+                  cellClasses.addOptionRow,
+                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(addOptionIdx)}
+                onClick={handleAddOption}
+              >
+                <span className={cellClasses.addOptionLabel}>Add option:</span>
+                <span
+                  className={cellClasses.badge}
+                  style={choiceColor(addOptionColor)}
+                >
+                  {trimmedSearch}
+                </span>
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!selectedChoice) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <ChoiceBadge
+      name={selectedChoice.name}
+      style={choiceColor(selectedChoice.color)}
+    />
+  );
+}

apps/client/src/ee/base/components/cells/cell-status.tsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { ChoiceBadge } from "@/ee/base/components/cells/choice-badge";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import clsx from "clsx";
+import { useListKeyboardNav } from "@/ee/base/hooks/use-list-keyboard-nav";
+
+type CellStatusProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+type CategoryGroup = {
+  label: string;
+  choices: Choice[];
+};
+
+const categoryLabels: Record<string, string> = {
+  todo: "To Do",
+  inProgress: "In Progress",
+  complete: "Complete",
+};
+
+export function CellStatus({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellStatusProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedId = typeof value === "string" ? value : null;
+  const selectedChoice = choices.find((c) => c.id === selectedId);
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const groups = useMemo(() => {
+    const filtered = search
+      ? choices.filter((c) =>
+          c.name.toLowerCase().includes(search.toLowerCase()),
+        )
+      : choices;
+
+    const grouped: Record<string, Choice[]> = {};
+    for (const choice of filtered) {
+      const cat = choice.category ?? "todo";
+      if (!grouped[cat]) grouped[cat] = [];
+      grouped[cat].push(choice);
+    }
+
+    const result: CategoryGroup[] = [];
+    for (const key of ["todo", "inProgress", "complete"]) {
+      if (grouped[key]?.length) {
+        result.push({ label: categoryLabels[key] ?? key, choices: grouped[key] });
+      }
+    }
+    return result;
+  }, [choices, search]);
+
+  const flatChoices = useMemo(
+    () => groups.flatMap((g) => g.choices),
+    [groups],
+  );
+  const choiceIdxMap = useMemo(() => {
+    const m = new Map<string, number>();
+    flatChoices.forEach((c, i) => m.set(c.id, i));
+    return m;
+  }, [flatChoices]);
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(flatChoices.length, [search, isEditing]);
+
+  const handleSelect = useCallback(
+    (choice: Choice) => {
+      onCommit(choice.id === selectedId ? null : choice.id);
+    },
+    [selectedId, onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= flatChoices.length) return;
+        e.preventDefault();
+        handleSelect(flatChoices[activeIndex]);
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, flatChoices, handleSelect],
+  );
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onChange={(o) => {
+          if (!o) onCancel();
+        }}
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+        closeOnClickOutside
+        closeOnEscape
+      >
+        <Popover.Target>
+          <div className={cellClasses.popoverTarget}>
+            {selectedChoice ? (
+              <span
+                className={cellClasses.badge}
+                style={choiceColor(selectedChoice.color)}
+              >
+                {selectedChoice.name}
+              </span>
+            ) : (
+              <span className={cellClasses.emptyValue} />
+            )}
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+          />
+          <div className={cellClasses.selectDropdown}>
+            {groups.map((group) => (
+              <div key={group.label}>
+                <div className={cellClasses.selectCategoryLabel}>
+                  {group.label}
+                </div>
+                {group.choices.map((choice) => {
+                  const idx = choiceIdxMap.get(choice.id) ?? -1;
+                  const isSelected = choice.id === selectedId;
+                  return (
+                    <div
+                      key={choice.id}
+                      ref={setOptionRef(idx)}
+                      className={clsx(
+                        cellClasses.selectOption,
+                        isSelected && cellClasses.selectOptionActive,
+                        idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                      )}
+                      onMouseEnter={() => setActiveIndex(idx)}
+                      onClick={() => handleSelect(choice)}
+                    >
+                      <span
+                        className={cellClasses.badge}
+                        style={choiceColor(choice.color)}
+                      >
+                        {choice.name}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!selectedChoice) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <ChoiceBadge
+      name={selectedChoice.name}
+      style={choiceColor(selectedChoice.color)}
+    />
+  );
+}

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

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

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

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

apps/client/src/ee/base/components/cells/cell-value-equal.ts

@@ -0,0 +1,30 @@
+function isEmpty(v: unknown): boolean {
+  return v === null || v === undefined || v === "";
+}
+
+/**
+ * Deep equality for cell values. Treats null/undefined/"" as equivalent
+ * "empty", compares arrays by ordered content, objects by serialized form.
+ * Note: an empty array [] is a real value, distinct from "empty".
+ */
+export function cellValuesEqual(a: unknown, b: unknown): boolean {
+  const aArr = Array.isArray(a);
+  const bArr = Array.isArray(b);
+
+  if (!aArr && !bArr) {
+    if (isEmpty(a) && isEmpty(b)) return true;
+    if (isEmpty(a) !== isEmpty(b)) return false;
+  }
+
+  if (aArr || bArr) {
+    if (!aArr || !bArr) return false;
+    if (a.length !== b.length) return false;
+    return a.every((x, i) => cellValuesEqual(x, b[i]));
+  }
+
+  if (typeof a === "object" && typeof b === "object" && a && b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+
+  return a === b;
+}

apps/client/src/ee/base/components/cells/choice-badge.tsx

@@ -0,0 +1,29 @@
+import { CSSProperties, useRef, useState } from "react";
+import { Tooltip } from "@mantine/core";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+
+type ChoiceBadgeProps = {
+  name: string;
+  style: CSSProperties;
+};
+
+export function ChoiceBadge({ name, style }: ChoiceBadgeProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [truncated, setTruncated] = useState(false);
+
+  return (
+    <Tooltip label={name} withinPortal openDelay={400} disabled={!truncated}>
+      <span
+        ref={ref}
+        className={cellClasses.badge}
+        style={style}
+        onMouseEnter={() => {
+          const el = ref.current;
+          if (el) setTruncated(el.scrollWidth > el.clientWidth);
+        }}
+      >
+        {name}
+      </span>
+    </Tooltip>
+  );
+}

apps/client/src/ee/base/components/cells/choice-color.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from "react";
+
+const colorMap: Record<string, { bg: string; bgDark: string; text: string; textDark: string }> = {
+  gray: { bg: "#f1f3f5", bgDark: "#373a40", text: "#495057", textDark: "#ced4da" },
+  red: { bg: "#ffe3e3", bgDark: "#4a1a1a", text: "#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: "#1864ab", textDark: "#74c0fc" },
+  cyan: { bg: "#c5f6fa", bgDark: "#1a3a3a", text: "#0b7285", textDark: "#66d9e8" },
+  teal: { bg: "#c3fae8", bgDark: "#1a3a2e", text: "#066649", textDark: "#63e6be" },
+  green: { bg: "#d3f9d8", bgDark: "#1a3a1a", text: "#1b5e20", textDark: "#69db7c" },
+  lime: { bg: "#e9fac8", bgDark: "#2e3a1a", text: "#44700a", textDark: "#a9e34b" },
+  yellow: { bg: "#fff3bf", bgDark: "#3a351a", text: "#8a5200", textDark: "#ffd43b" },
+  orange: { bg: "#ffe8cc", bgDark: "#3a2a1a", text: "#a63508", textDark: "#ffa94d" },
+};
+
+export function choiceColor(color: string): CSSProperties {
+  const c = colorMap[color] ?? colorMap.gray;
+  return {
+    backgroundColor: `light-dark(${c.bg}, ${c.bgDark})`,
+    color: `light-dark(${c.text}, ${c.textDark})`,
+  };
+}

apps/client/src/ee/base/components/cells/choice-picker.tsx

@@ -0,0 +1,258 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { TextInput } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { generateBaseChoiceId } from "@/ee/base/utils/generate-base-id";
+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: generateBaseChoiceId(),
+      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>
+    </>
+  );
+}

apps/client/src/ee/base/components/cells/person-read-list.tsx

@@ -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(", ")}
+    />
+  );
+}

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

@@ -0,0 +1,189 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Button,
+  Divider,
+  Group,
+  Paper,
+  Stack,
+  Text,
+} from "@mantine/core";
+import {
+  IconAlertTriangle,
+  IconMathFunction,
+  IconPointFilled,
+} from "@tabler/icons-react";
+import { registry } from "@docmost/base-formula/client";
+import { FormulaInput } from "./formula-input";
+import { PropertyChipRow } from "./property-chip-row";
+import { FunctionPalette } from "./function-palette";
+import { useFormulaParser } from "@/ee/base/hooks/use-formula-parser";
+import type { IBaseProperty } from "@/ee/base/types/base.types";
+import classes from "@/ee/base/styles/formula.module.css";
+
+type Props = {
+  properties: IBaseProperty[];
+  editingPropertyId: string | null;
+  initialSource?: string;
+  name?: string;
+  disabled?: boolean;
+  onSave: (
+    source: string,
+    ast: unknown,
+    resultType: string,
+    dependencies: string[],
+  ) => void;
+  onCancel: () => void;
+};
+
+export function FormulaEditor({
+  properties,
+  editingPropertyId,
+  initialSource = "",
+  name,
+  disabled = false,
+  onSave,
+  onCancel,
+}: Props) {
+  const [source, setSource] = useState(initialSource);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const pendingCursorRef = useRef<number | null>(null);
+  const parseState = useFormulaParser(
+    source,
+    properties,
+    editingPropertyId,
+    registry,
+  );
+  const canSave = parseState.state === "ok" && !disabled;
+
+  // useEffect (not RAF) ensures the DOM update ran before restoring cursor.
+  useEffect(() => {
+    if (pendingCursorRef.current === null) return;
+    const pos = pendingCursorRef.current;
+    pendingCursorRef.current = null;
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.focus();
+    ta.setSelectionRange(pos, pos);
+  }, [source]);
+
+  const insertAtCursor = (snippet: string, cursorOffsetFromEnd = 0) => {
+    const ta = textareaRef.current;
+    const start = ta?.selectionStart ?? source.length;
+    const end = ta?.selectionEnd ?? source.length;
+    const before = source.slice(0, start);
+    const after = source.slice(end);
+    const prev = before.slice(-1);
+    const needsSpace = prev !== "" && !/[\s(,]/.test(prev);
+    const prefix = needsSpace ? " " : "";
+    const next = before + prefix + snippet + after;
+    pendingCursorRef.current =
+      before.length + prefix.length + snippet.length - cursorOffsetFromEnd;
+    setSource(next);
+  };
+
+  return (
+    <Paper
+      withBorder
+      radius="md"
+      shadow="sm"
+      p={0}
+      style={{ overflow: "hidden" }}
+    >
+      <Stack gap={0}>
+        <Group
+          justify="space-between"
+          wrap="nowrap"
+          px="md"
+          py={12}
+          className={classes.formulaHeaderRow}
+        >
+          <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+            <div className={classes.formulaIconBadge}>
+              <IconMathFunction size={14} />
+            </div>
+            <Text size="sm" fw={600}>
+              Formula
+            </Text>
+            {name && (
+              <Text size="sm" c="dimmed" truncate>
+                · {name}
+              </Text>
+            )}
+          </Group>
+          <Group gap={8} wrap="nowrap" style={{ flexShrink: 0 }}>
+            <Button variant="subtle" size="xs" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button
+              size="xs"
+              disabled={!canSave}
+              onClick={() => {
+                if (parseState.state !== "ok") return;
+                onSave(
+                  source,
+                  parseState.ast,
+                  parseState.resultType,
+                  parseState.dependencies,
+                );
+              }}
+            >
+              Save
+            </Button>
+          </Group>
+        </Group>
+
+        <Stack gap={6} px={14} pt={10} pb={8}>
+          <FormulaInput
+            ref={textareaRef}
+            value={source}
+            onChange={setSource}
+            hasError={parseState.state === "error"}
+          />
+          <Group justify="space-between" gap={8} mih={16}>
+            {parseState.state === "error" ? (
+              <Group gap={6} c="red.7">
+                <IconAlertTriangle size={12} />
+                <Text size="xs">{parseState.message}</Text>
+              </Group>
+            ) : parseState.state === "ok" ? (
+              <Group gap={6} c="dimmed">
+                <IconPointFilled size={10} color="var(--mantine-color-teal-6)" />
+                <Text size="xs">
+                  Returns{" "}
+                  <Text span fw={600} c="gray.8">
+                    {parseState.resultType}
+                  </Text>
+                </Text>
+              </Group>
+            ) : (
+              <Text size="xs" c="dimmed">
+                Click a property or function below to insert.
+              </Text>
+            )}
+          </Group>
+        </Stack>
+
+        <Divider />
+
+        <Stack gap={8} px={14} pt={10} pb={10}>
+          <PropertyChipRow
+            properties={properties.filter((p) => p.id !== editingPropertyId)}
+            onInsert={(name) => insertAtCursor(`prop("${name}")`)}
+          />
+        </Stack>
+
+        <Divider />
+
+        <Stack gap={6} px={14} pt={10} pb={10}>
+          <Text size="xs" fw={600} c="gray.7">
+            Functions
+          </Text>
+          <FunctionPalette
+            registry={registry}
+            onInsert={(name) => insertAtCursor(`${name}()`, 1)}
+          />
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+}

apps/client/src/ee/base/components/formula/formula-input.tsx

@@ -0,0 +1,40 @@
+import { forwardRef } from "react";
+import { Textarea } from "@mantine/core";
+
+type Props = {
+  value: string;
+  onChange: (v: string) => void;
+  hasError?: boolean;
+};
+
+export const FormulaInput = forwardRef<HTMLTextAreaElement, Props>(
+  function FormulaInput({ value, onChange, hasError }, ref) {
+    return (
+      <Textarea
+        ref={ref}
+        autosize
+        minRows={3}
+        maxRows={8}
+        value={value}
+        onChange={(e) => onChange(e.currentTarget.value)}
+        placeholder='prop("Price") * prop("Qty")'
+        styles={{
+          input: {
+            fontFamily:
+              "ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace",
+            fontSize: 13,
+            lineHeight: 1.65,
+            backgroundColor: "var(--mantine-color-gray-0)",
+            borderColor: hasError
+              ? "var(--mantine-color-red-6)"
+              : "var(--mantine-color-blue-6)",
+            borderWidth: 1.5,
+            boxShadow: hasError
+              ? "0 0 0 3px var(--mantine-color-red-1)"
+              : "0 0 0 3px var(--mantine-color-blue-1)",
+          },
+        }}
+      />
+    );
+  },
+);

apps/client/src/ee/base/components/formula/formula-property-editor.tsx

@@ -0,0 +1,48 @@
+import { FormulaEditor } from "./formula-editor";
+import { useBaseQuery } from "@/ee/base/queries/base-query";
+import { useUpdatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import {
+  IBaseProperty,
+  FormulaTypeOptions,
+  TypeOptions,
+} from "@/ee/base/types/base.types";
+
+type Props = {
+  property: IBaseProperty;
+  pageId: string;
+  onClose: () => void;
+};
+
+export function FormulaPropertyEditor({ property, pageId, onClose }: Props) {
+  const { data: base } = useBaseQuery(pageId);
+  const updatePropertyMutation = useUpdatePropertyMutation();
+  const opts = property.typeOptions as FormulaTypeOptions | undefined;
+
+  return (
+    <FormulaEditor
+      properties={base?.properties ?? []}
+      editingPropertyId={property.id}
+      initialSource={opts?.source ?? ""}
+      name={property.name}
+      onCancel={onClose}
+      onSave={(source, ast, resultType, dependencies) => {
+        if (source === (opts?.source ?? "")) {
+          onClose();
+          return;
+        }
+        updatePropertyMutation.mutate({
+          propertyId: property.id,
+          pageId,
+          typeOptions: {
+            source,
+            ast,
+            resultType,
+            dependencies,
+            astVersion: 1,
+          } as TypeOptions,
+        });
+        onClose();
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import {
+  Accordion,
+  Group,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import type { FormulaFn } from "@docmost/base-formula/client";
+import classes from "@/ee/base/styles/formula.module.css";
+
+const CATEGORIES = ["logic", "math", "string", "date", "coercion"] as const;
+
+export function FunctionPalette({
+  registry,
+  onInsert,
+}: {
+  registry: ReadonlyMap<string, FormulaFn>;
+  onInsert: (name: string) => void;
+}) {
+  const [open, setOpen] = useState<string | null>("logic");
+
+  const byCat = new Map<string, FormulaFn[]>();
+  for (const fn of registry.values()) {
+    if (!byCat.has(fn.category)) byCat.set(fn.category, []);
+    byCat.get(fn.category)!.push(fn);
+  }
+
+  return (
+    <Accordion
+      value={open}
+      onChange={setOpen}
+      variant="contained"
+      radius="md"
+      chevronSize={14}
+      styles={{
+        item: { borderColor: "var(--mantine-color-gray-2)" },
+        control: { padding: "7px 12px", minHeight: 0 },
+        label: {
+          padding: 0,
+          fontSize: 13,
+          fontWeight: 600,
+          textTransform: "capitalize",
+        },
+        content: { padding: "6px 10px 10px" },
+        panel: { background: "var(--mantine-color-gray-0)" },
+      }}
+    >
+      {CATEGORIES.map((cat) => {
+        const fns = byCat.get(cat) ?? [];
+        return (
+          <Accordion.Item key={cat} value={cat}>
+            <Accordion.Control>
+              <Group gap={8}>
+                <span>{cat}</span>
+                <Text size="xs" c="dimmed" ff="monospace">
+                  {fns.length}
+                </Text>
+              </Group>
+            </Accordion.Control>
+            <Accordion.Panel>
+              <Group gap={6}>
+                {fns.map((fn) => (
+                  <Tooltip key={fn.name} label={fn.doc} withArrow>
+                    <UnstyledButton
+                      onClick={() => onInsert(fn.name)}
+                      className={classes.fnChip}
+                    >
+                      {fn.name}
+                      <span className={classes.fnChipParens}>
+                        ()
+                      </span>
+                    </UnstyledButton>
+                  </Tooltip>
+                ))}
+              </Group>
+            </Accordion.Panel>
+          </Accordion.Item>
+        );
+      })}
+    </Accordion>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { useState, useMemo } from "react";
+import { Group, TextInput, UnstyledButton, Text } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import type { IBaseProperty } from "@/ee/base/types/base.types";
+import classes from "@/ee/base/styles/formula.module.css";
+
+export function PropertyChipRow({
+  properties,
+  onInsert,
+}: {
+  properties: IBaseProperty[];
+  onInsert: (name: string) => void;
+}) {
+  const [query, setQuery] = useState("");
+
+  const visible = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return properties;
+    return properties.filter((p) => p.name.toLowerCase().includes(q));
+  }, [properties, query]);
+
+  return (
+    <div>
+      <Group justify="space-between" mb={8}>
+        <Text size="xs" fw={600} c="gray.7">
+          Properties
+        </Text>
+        <TextInput
+          size="xs"
+          placeholder="Search"
+          leftSection={<IconSearch size={12} />}
+          value={query}
+          onChange={(e) => setQuery(e.currentTarget.value)}
+          w={140}
+        />
+      </Group>
+      {visible.length === 0 ? (
+        <Text size="xs" c="dimmed" py={6}>
+          No matches.
+        </Text>
+      ) : (
+        <Group gap={6}>
+          {visible.map((p) => (
+            <UnstyledButton
+              key={p.id}
+              onClick={() => onInsert(p.name)}
+              className={classes.propChip}
+            >
+              {p.name}
+            </UnstyledButton>
+          ))}
+        </Group>
+      )}
+    </div>
+  );
+}

apps/client/src/ee/base/components/grid/add-row-button.tsx

@@ -0,0 +1,32 @@
+import { memo } from "react";
+import { IconPlus } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type AddRowButtonProps = {
+  onClick?: () => void;
+};
+
+export const AddRowButton = memo(function AddRowButton({
+  onClick,
+}: AddRowButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={classes.addRowButton}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
+      role="button"
+      tabIndex={0}
+    >
+      <IconPlus size={14} />
+      <span>{t("New row")}</span>
+    </div>
+  );
+});

apps/client/src/ee/base/components/grid/base-drop-edge-indicator.tsx

@@ -0,0 +1,10 @@
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type Props = {
+  edge: Edge;
+};
+
+export function BaseDropEdgeIndicator({ edge }: Props) {
+  return <div className={classes.dropEdgeLine} data-edge={edge} aria-hidden />;
+}

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

@@ -0,0 +1,301 @@
+import { memo, useCallback, useMemo } from "react";
+import { flushSync } from "react-dom";
+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 handleEdit = 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") {
+        flushSync(() => setEditingCell({ rowId, propertyId: property.id }));
+      }
+      return;
+    }
+    if (property.type === "formula") {
+      setActiveFormulaEditor({ propertyId: property.id, rowId });
+      return;
+    }
+    if (isSystemPropertyType(property.type)) return;
+    flushSync(() => setEditingCell({ rowId, propertyId: property.id }));
+  }, [property, isRowNumber, rowId, readOnly, setEditingCell, setActiveFormulaEditor]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!property || e.button !== 0 || isEditing) return;
+      setFocusedCell({ rowId, propertyId: property.id });
+    },
+    [property, rowId, setFocusedCell, isEditing],
+  );
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!property || isEditing) return;
+      setFocusedCell({ rowId, propertyId: property.id });
+      (e.currentTarget.closest('[role="grid"]') as HTMLElement | null)?.focus({
+        preventScroll: true,
+      });
+    },
+    [property, rowId, setFocusedCell, isEditing],
+  );
+
+  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}
+      onMouseDown={handleMouseDown}
+      onDoubleClick={handleEdit}
+    >
+      <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}
+              data-base-row-expand=""
+              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())
+  );
+}

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

@@ -0,0 +1,565 @@
+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?: (afterRowId?: string, focusPropertyId?: string) => 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],
+  );
+
+  useEffect(() => {
+    if (!editingCell) return;
+    const idx = rowIdsRef.current.indexOf(editingCell.rowId);
+    if (idx >= 0) scrollCellIntoView(editingCell, idx);
+  }, [editingCell, scrollCellIntoView]);
+
+  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],
+  );
+
+  const handleAddRowBelow = useCallback(
+    (afterRowId: string, focusPropertyId: string) => {
+      onAddRow?.(afterRowId, focusPropertyId);
+    },
+    [onAddRow],
+  );
+
+  useGridKeyboardNav({
+    table,
+    properties,
+    containerRef: bodyRef,
+    focusedCell,
+    setFocusedCell,
+    editingCell,
+    setEditingCell,
+    openEditor,
+    clearCell,
+    beginTypeToEdit,
+    scrollCellIntoView,
+    selectionCount,
+    clearSelection,
+    deleteSelected,
+    toggleRowSelection,
+    expandRow,
+    addRow: handleAddRowBelow,
+  });
+
+  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>
+  );
+}

apps/client/src/ee/base/components/grid/grid-ghost-rows.tsx

@@ -0,0 +1,32 @@
+import classes from "@/ee/base/styles/grid.module.css";
+
+type GridGhostRowsProps = {
+  /** how many placeholder rows to render */
+  count: number;
+  /** number of visible leaf columns (incl. the row-number column) */
+  columnCount: number;
+  /** create the first real row (clicking any ghost cell); omit when read-only */
+  onCreate?: () => void;
+};
+
+// Empty-state ghost rows shown when no data rows exist and no filter is active.
+// Clicking any ghost row creates the first real row; cells align via subgrid.
+export function GridGhostRows({ count, columnCount, onCreate }: GridGhostRowsProps) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, rowIdx) => (
+        <div
+          key={rowIdx}
+          className={`${classes.row} ${classes.ghostRow}`}
+          role={onCreate ? "button" : undefined}
+          aria-label={onCreate ? "Create first row" : undefined}
+          onClick={onCreate}
+        >
+          {Array.from({ length: columnCount }).map((_, colIdx) => (
+            <div key={colIdx} className={classes.cell} aria-hidden="true" />
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,356 @@
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Header, flexRender } from "@tanstack/react-table";
+import { Badge, Popover } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
+import { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
+import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
+import { IBaseRow, IBaseProperty, EditingCell } from "@/ee/base/types/base.types";
+import {
+  activePropertyMenuAtomFamily,
+  propertyMenuDirtyAtomFamily,
+  propertyMenuCloseRequestAtomFamily,
+  editingCellAtomFamily,
+  activeFormulaEditorAtomFamily,
+  FormulaEditorTarget,
+} from "@/ee/base/atoms/base-atoms";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { PropertyMenuContent } from "@/ee/base/components/property/property-menu";
+import { FormulaPropertyEditor } from "@/ee/base/components/formula/formula-property-editor";
+import { RowNumberHeaderCell } from "./row-number-header-cell";
+import { BaseDropEdgeIndicator } from "./base-drop-edge-indicator";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import classes from "@/ee/base/styles/grid.module.css";
+
+export const COLUMN_DRAG_TYPE = "base-column";
+
+type GridHeaderCellProps = {
+  header: Header<IBaseRow, unknown>;
+  property: IBaseProperty | undefined;
+  loadedRowIds: string[];
+  pageId: string;
+  getColumnOrder: () => string[];
+  onColumnReorder?: (columnId: string, finishIndex: number) => void;
+};
+
+export const GridHeaderCell = memo(function GridHeaderCell({
+  header,
+  property,
+  loadedRowIds,
+  pageId,
+  getColumnOrder,
+  onColumnReorder,
+}: GridHeaderCellProps) {
+  const { t } = useTranslation();
+  const isRowNumber = header.column.id === "__row_number";
+  const isPinned = header.column.getIsPinned();
+  const pinOffset = isPinned ? header.column.getStart("left") : undefined;
+  const { selectionCount, 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;
+  const cellRef = useRef<HTMLDivElement>(null);
+  const [propertyMenuDirty, setPropertyMenuDirty] = useAtom(propertyMenuDirtyAtomFamily(pageId)) as unknown as [boolean, (val: boolean) => void];
+  const [closeRequest, setCloseRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number, (val: number) => void];
+  const [, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
+  const [activeFormulaEditor, setActiveFormulaEditor] = useAtom(
+    activeFormulaEditorAtomFamily(pageId),
+  ) as unknown as [FormulaEditorTarget, (val: FormulaEditorTarget) => void];
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  const resizeIntentRef = useRef(false);
+
+  const handleDirtyChange = useCallback((dirty: boolean) => {
+    setPropertyMenuDirty(dirty);
+  }, [setPropertyMenuDirty]);
+
+  const isSortableDisabled = isRowNumber || !!isPinned || !editable;
+
+  // onColumnReorder ultimately depends on React Query result objects
+  // (activeView, base) via persistViewConfig, and their identity changes on
+  // every cache invalidation (every WS-driven collab refresh). Holding the
+  // callback in a ref keeps it out of the DnD effect's dep array so we don't
+  // tear down and re-register the pragmatic-dnd adapter on every header cell
+  // each time another user edits the base.
+  const onColumnReorderRef = useRef(onColumnReorder);
+  useLayoutEffect(() => {
+    onColumnReorderRef.current = onColumnReorder;
+  });
+
+  useEffect(() => {
+    const el = cellRef.current;
+    if (!el || isSortableDisabled) return;
+    return combine(
+      draggable({
+        element: el,
+        canDrag: () => !resizeIntentRef.current,
+        getInitialData: () => ({
+          type: COLUMN_DRAG_TYPE,
+          columnId: header.column.id,
+          pageId,
+        }),
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element: el,
+        canDrop: ({ source }) =>
+          source.data.type === COLUMN_DRAG_TYPE &&
+          source.data.columnId !== header.column.id,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { columnId: header.column.id },
+            { input, element, allowedEdges: ["left", "right"] },
+          ),
+        onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const edge = extractClosestEdge(self.data);
+          if (!edge) return;
+          const order = getColumnOrder();
+          const startIndex = order.indexOf(source.data.columnId as string);
+          const indexOfTarget = order.indexOf(header.column.id);
+          if (startIndex === -1 || indexOfTarget === -1) return;
+          const finishIndex = getReorderDestinationIndex({
+            startIndex,
+            indexOfTarget,
+            closestEdgeOfTarget: edge,
+            axis: "horizontal",
+          });
+          if (finishIndex === startIndex) return;
+          onColumnReorderRef.current?.(source.data.columnId as string, finishIndex);
+          triggerPostMoveFlash(el);
+          liveRegion.announce(`Moved column to position ${finishIndex + 1}`);
+        },
+      }),
+    );
+  }, [header.column.id, isSortableDisabled, getColumnOrder]);
+
+  const handleHeaderClick = useCallback(() => {
+    if (resizeIntentRef.current) {
+      resizeIntentRef.current = false;
+      return;
+    }
+    setEditingCell(null);
+    if (!editable) return;
+    if (!isRowNumber && property && !isDragging) {
+      if (propertyMenuDirty && !menuOpened) return;
+      setActivePropertyMenu(menuOpened ? null : header.column.id);
+    }
+  }, [editable, isRowNumber, property, isDragging, header.column.id, menuOpened, propertyMenuDirty, setActivePropertyMenu, setEditingCell]);
+
+  const handleMenuClose = useCallback(() => {
+    setActivePropertyMenu(null);
+  }, [setActivePropertyMenu]);
+
+  const handleEditFormula = useCallback(() => {
+    if (!property) return;
+    handleMenuClose();
+    setActiveFormulaEditor({ propertyId: property.id, rowId: null });
+  }, [property, handleMenuClose, setActiveFormulaEditor]);
+
+  const closeFormulaEditor = useCallback(
+    () => setActiveFormulaEditor(null),
+    [setActiveFormulaEditor],
+  );
+
+  const formulaEditorOpen =
+    !!property &&
+    activeFormulaEditor?.propertyId === property.id &&
+    activeFormulaEditor?.rowId === null;
+
+  // A closed property menu can never hold unsaved changes. Saving a rename
+  // must clear propertyMenuDirty; otherwise it stays stuck true and
+  // handleHeaderClick refuses to reopen any property menu, making the menu
+  // appear dead after the first save. Reset only on the open-to-closed
+  // transition so a sibling header cell can't clear the flag while another
+  // column's menu is mid-edit.
+  const wasMenuOpenedRef = useRef(menuOpened);
+  useEffect(() => {
+    if (wasMenuOpenedRef.current && !menuOpened) {
+      setPropertyMenuDirty(false);
+    }
+    wasMenuOpenedRef.current = menuOpened;
+  }, [menuOpened, setPropertyMenuDirty]);
+
+  const handleMenuOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) return; // opening is driven by the atom, not Mantine
+      if (propertyMenuDirty) {
+        // Veto the close and route through the discard-confirm flow.
+        setCloseRequest(closeRequest + 1);
+      } else {
+        handleMenuClose();
+      }
+    },
+    [propertyMenuDirty, closeRequest, setCloseRequest, handleMenuClose],
+  );
+
+  const TypeIcon = property ? getDescriptor(property.type)?.icon : undefined;
+
+  return (
+    <div
+      ref={cellRef}
+      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 || !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 ? (
+        <RowNumberHeaderCell loadedRowIds={loadedRowIds} pageId={pageId} />
+      ) : (
+        <div className={classes.headerCellContent}>
+          {TypeIcon && (
+            <TypeIcon size={14} className={classes.headerTypeIcon} />
+          )}
+          <span className={classes.headerCellName}>
+            {flexRender(header.column.columnDef.header, header.getContext())}
+          </span>
+          {property?.pendingType && (
+            <Badge size="xs" color="gray" variant="light" ml={6}>
+              {t("Converting…")}
+            </Badge>
+          )}
+        </div>
+      )}
+      {editable && header.column.getCanResize() && (
+        <div
+          className={`${classes.resizeHandle} ${
+            header.column.getIsResizing() ? classes.resizeHandleActive : ""
+          }`}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            header.getResizeHandler()(e);
+          }}
+          onTouchStart={(e) => {
+            e.stopPropagation();
+            header.getResizeHandler()(e);
+          }}
+          onPointerDown={(e) => {
+            resizeIntentRef.current = true;
+            e.stopPropagation();
+          }}
+          onClick={(e) => e.stopPropagation()}
+        />
+      )}
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+      {editable && property && !isRowNumber && (
+        <Popover
+          opened={menuOpened}
+          onChange={handleMenuOpenChange}
+          onClose={handleMenuClose}
+          position="bottom-start"
+          shadow="md"
+          width={260}
+          trapFocus
+          returnFocus
+          withinPortal
+          closeOnClickOutside
+          closeOnEscape
+        >
+          <Popover.Target>
+            <div className={classes.popoverAnchor} />
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <PropertyMenuContent
+              property={property}
+              opened={menuOpened}
+              onClose={handleMenuClose}
+              onDirtyChange={handleDirtyChange}
+              onEditFormula={
+                property.type === "formula" ? handleEditFormula : undefined
+              }
+              pageId={pageId}
+            />
+          </Popover.Dropdown>
+        </Popover>
+      )}
+      {property && !isRowNumber && property.type === "formula" && (
+        <Popover
+          opened={formulaEditorOpen}
+          onChange={(o) => {
+            if (!o) closeFormulaEditor();
+          }}
+          position="bottom-start"
+          width={460}
+          shadow="md"
+          withinPortal
+          closeOnClickOutside
+          closeOnEscape={false}
+          trapFocus
+        >
+          <Popover.Target>
+            <div className={classes.popoverAnchor} />
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === "Escape") {
+                e.preventDefault();
+                closeFormulaEditor();
+              }
+            }}
+            style={{ maxWidth: "calc(100vw - 32px)" }}
+          >
+            {formulaEditorOpen && (
+              <FormulaPropertyEditor
+                property={property}
+                pageId={pageId}
+                onClose={closeFormulaEditor}
+              />
+            )}
+          </Popover.Dropdown>
+        </Popover>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,64 @@
+import { memo, useMemo } from "react";
+import { Table, ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+import { IBaseRow, IBaseProperty } from "@/ee/base/types/base.types";
+import { GridHeaderCell } from "./grid-header-cell";
+import { CreatePropertyPopover } from "@/ee/base/components/property/create-property-popover";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type GridHeaderProps = {
+  table: Table<IBaseRow>;
+  pageId: string;
+  columnOrder: ColumnOrderState;
+  columnVisibility: VisibilityState;
+  properties: IBaseProperty[];
+  loadedRowIds: string[];
+  onPropertyCreated?: () => void;
+  getColumnOrder: () => string[];
+  onColumnReorder?: (columnId: string, finishIndex: number) => void;
+};
+
+export const GridHeader = memo(function GridHeader({
+  table,
+  pageId,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnOrder: _columnOrder,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnVisibility: _columnVisibility,
+  properties,
+  loadedRowIds,
+  onPropertyCreated,
+  getColumnOrder,
+  onColumnReorder,
+}: GridHeaderProps) {
+  const headerGroups = table.getHeaderGroups();
+  const editable = useBaseEditable();
+  const propertyById = useMemo(() => {
+    const map = new Map<string, IBaseProperty>();
+    for (const p of properties) map.set(p.id, p);
+    return map;
+  }, [properties]);
+
+  return (
+    <div className={classes.headerRow} role="row">
+      {headerGroups[0]?.headers.map((header) => (
+        <GridHeaderCell
+          key={header.id}
+          header={header}
+          property={propertyById.get(header.column.id)}
+          loadedRowIds={loadedRowIds}
+          pageId={pageId}
+          getColumnOrder={getColumnOrder}
+          onColumnReorder={onColumnReorder}
+        />
+      ))}
+      {editable && (
+        <CreatePropertyPopover
+          pageId={pageId}
+          properties={properties}
+          onPropertyCreated={onPropertyCreated}
+        />
+      )}
+    </div>
+  );
+});

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

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

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

@@ -0,0 +1,111 @@
+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 handleCellMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.button !== 0) return;
+      setFocusedCell({ rowId, propertyId: "__row_number" });
+    },
+    [rowId, setFocusedCell],
+  );
+
+  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}
+      onMouseDown={handleCellMouseDown}
+    >
+      <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>
+  );
+});

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

@@ -0,0 +1,51 @@
+import { memo, useMemo } from "react";
+import { Checkbox, Tooltip } from "@mantine/core";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type RowNumberHeaderCellProps = {
+  loadedRowIds: string[];
+  pageId: string;
+};
+
+export const RowNumberHeaderCell = memo(function RowNumberHeaderCell({
+  loadedRowIds,
+  pageId,
+}: RowNumberHeaderCellProps) {
+  const { selectedIds, toggleAll } = useRowSelection(pageId);
+
+  const { checked, indeterminate } = useMemo(() => {
+    if (loadedRowIds.length === 0) {
+      return { checked: false, indeterminate: false };
+    }
+    const selectedInLoaded = loadedRowIds.reduce(
+      (acc, id) => (selectedIds.has(id) ? acc + 1 : acc),
+      0,
+    );
+    return {
+      checked: selectedInLoaded === loadedRowIds.length,
+      indeterminate:
+        selectedInLoaded > 0 && selectedInLoaded < loadedRowIds.length,
+    };
+  }, [loadedRowIds, selectedIds]);
+
+  if (loadedRowIds.length === 0) return null;
+
+  return (
+    <div className={classes.rowNumberHeaderInner}>
+      <span className={classes.rowNumberHeaderHash}>#</span>
+      <span className={classes.rowNumberHeaderCheckbox}>
+        <Tooltip label="Select all loaded rows" withinPortal>
+          <Checkbox
+            size="xs"
+            checked={checked}
+            indeterminate={indeterminate}
+            onChange={() => toggleAll(loadedRowIds)}
+            aria-label="Select all loaded rows"
+            tabIndex={-1}
+          />
+        </Tooltip>
+      </span>
+    </div>
+  );
+});

apps/client/src/ee/base/components/grid/selection-action-bar.tsx

@@ -0,0 +1,52 @@
+import { memo } from "react";
+import { Transition } from "@mantine/core";
+import { IconTrash, IconX } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { useDeleteSelectedRows } from "@/ee/base/hooks/use-delete-selected-rows";
+import classes from "@/ee/base/styles/grid.module.css";
+
+type SelectionActionBarProps = {
+  pageId: string;
+};
+
+export const SelectionActionBar = memo(function SelectionActionBar({
+  pageId,
+}: SelectionActionBarProps) {
+  const { t } = useTranslation();
+  const { selectionCount, clear } = useRowSelection(pageId);
+  const { deleteSelected, isPending } = useDeleteSelectedRows(pageId);
+
+  const isOpen = selectionCount > 0;
+
+  return (
+    <Transition mounted={isOpen} transition="slide-up" duration={150}>
+      {(styles) => (
+        <div className={classes.selectionActionBarWrapper} style={styles}>
+          <div className={classes.selectionActionBar} role="toolbar">
+            <span className={classes.selectionActionBarCount}>
+              {t("{{count}} selected", { count: selectionCount })}
+            </span>
+            <button
+              type="button"
+              className={classes.selectionActionBarDelete}
+              disabled={isPending}
+              onClick={() => void deleteSelected()}
+            >
+              <IconTrash size={14} />
+              {t("Delete")}
+            </button>
+            <button
+              type="button"
+              className={classes.selectionActionBarClose}
+              onClick={clear}
+              aria-label={t("Clear selection")}
+            >
+              <IconX size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+    </Transition>
+  );
+});

apps/client/src/ee/base/components/kanban/base-kanban.tsx

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

apps/client/src/ee/base/components/kanban/card-field/card-field.tsx

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

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

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

apps/client/src/ee/base/components/kanban/kanban-card-properties.tsx

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

apps/client/src/ee/base/components/kanban/kanban-card.tsx

@@ -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>
+    );
+  },
+);

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

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

apps/client/src/ee/base/components/kanban/kanban-column.tsx

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

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

@@ -0,0 +1,99 @@
+import { useCallback } from "react";
+import { Stack, Text, Select, Button } from "@mantine/core";
+import { generateBaseChoiceId } from "@/ee/base/utils/generate-base-id";
+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 = generateBaseChoiceId();
+    const inProgressId = generateBaseChoiceId();
+    const completeId = generateBaseChoiceId();
+    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" gap="md" style={{ flex: 1, paddingTop: "15vh" }}>
+        <Text fw={500}>{t("This board has no grouping property yet.")}</Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack align="center" gap="md" style={{ flex: 1, paddingTop: "15vh" }}>
+      <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>
+  );
+}

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

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

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

@@ -0,0 +1,673 @@
+import { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from "react";
+import {
+  TextInput,
+  Group,
+  Stack,
+  Text,
+  Button,
+  Popover,
+  SimpleGrid,
+  UnstyledButton,
+  CloseButton,
+  Divider,
+} from "@mantine/core";
+import {
+  IconPlus,
+  IconGripVertical,
+  IconArrowsSort,
+} from "@tabler/icons-react";
+import classes from "@/ee/base/styles/property.module.css";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import {
+  draggable,
+  dropTargetForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  type Edge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
+import { reorder } from "@atlaskit/pragmatic-drag-and-drop/reorder";
+import { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
+import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
+import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
+import { Choice } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useTranslation } from "react-i18next";
+import { generateBaseChoiceId } from "@/ee/base/utils/generate-base-id";
+import { DefaultValuePicker } from "./default-value-picker";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+const STATUS_CATEGORIES = [
+  { value: "todo", label: "To Do" },
+  { value: "inProgress", label: "In Progress" },
+  { value: "complete", label: "Complete" },
+] as const;
+
+// Default choices for a new status property, one per category.
+export function defaultStatusChoices(): Choice[] {
+  return [
+    { id: generateBaseChoiceId(), name: "Not started", color: "gray", category: "todo" },
+    { id: generateBaseChoiceId(), name: "In progress", color: "blue", category: "inProgress" },
+    { id: generateBaseChoiceId(), name: "Done", color: "green", category: "complete" },
+  ];
+}
+
+function pruneDefault(
+  value: string | string[] | null,
+  choices: Choice[],
+): string | string[] | null {
+  if (value === null) return null;
+  const ids = new Set(choices.map((c) => c.id));
+  if (Array.isArray(value)) {
+    const live = value.filter((id) => ids.has(id));
+    return live.length ? live : null;
+  }
+  return ids.has(value) ? value : null;
+}
+
+function defaultsEqual(
+  a: string | string[] | null,
+  b: string | string[] | null,
+): boolean {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((v, i) => v === b[i]);
+  }
+  return a === b;
+}
+
+type ChoiceEditorProps = {
+  initialChoices: Choice[];
+  onSave: (choices: Choice[], defaultValue: string | string[] | null) => void;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  showCategories?: boolean;
+  hideButtons?: boolean;
+  initialDefaultValue?: string | string[] | null;
+  multiDefault?: boolean;
+  /**
+   * Where the per-choice color-picker popover portals. Pass the enclosing
+   * property-menu dropdown node so the picker renders INSIDE that subtree —
+   * otherwise a color click registers as "outside" and closes the menu.
+   */
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+export function ChoiceEditor({
+  initialChoices,
+  onSave,
+  onClose,
+  onDirtyChange,
+  showCategories = false,
+  hideButtons = false,
+  initialDefaultValue = null,
+  multiDefault = false,
+  dropdownPortalTarget,
+}: ChoiceEditorProps) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = useState<Choice[]>(initialChoices);
+  const [focusChoiceId, setFocusChoiceId] = useState<string | null>(null);
+  const [defaultDraft, setDefaultDraft] = useState<string | string[] | null>(
+    initialDefaultValue,
+  );
+
+  useEffect(() => {
+    if (!hideButtons) {
+      setDraft(initialChoices);
+      setDefaultDraft(initialDefaultValue);
+    }
+  }, [initialChoices, initialDefaultValue, hideButtons]);
+
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+
+  useEffect(() => {
+    if (hideButtons) {
+      const cleaned = draft.filter((c) => c.name.trim());
+      onSaveRef.current(cleaned, pruneDefault(defaultDraft, cleaned));
+    }
+  }, [hideButtons, draft, defaultDraft]);
+
+  const isDirty = useMemo(() => {
+    if (!defaultsEqual(defaultDraft, initialDefaultValue)) return true;
+    if (draft.length !== initialChoices.length) return true;
+    return draft.some((d, i) => {
+      const o = initialChoices[i];
+      return d.id !== o.id || d.name !== o.name || d.color !== o.color || d.category !== o.category;
+    });
+  }, [draft, initialChoices, defaultDraft, initialDefaultValue]);
+
+  useEffect(() => {
+    onDirtyChange?.(isDirty);
+  }, [isDirty, onDirtyChange]);
+
+  const hasEmptyNames = draft.some((c) => !c.name.trim());
+
+  const handleRename = useCallback((choiceId: string, name: string) => {
+    setDraft((prev) => prev.map((c) => (c.id === choiceId ? { ...c, name } : c)));
+  }, []);
+
+  const handleColorChange = useCallback((choiceId: string, color: string) => {
+    setDraft((prev) => prev.map((c) => (c.id === choiceId ? { ...c, color } : c)));
+  }, []);
+
+  const handleRemove = useCallback((choiceId: string) => {
+    setDraft((prev) => prev.filter((c) => c.id !== choiceId));
+    setDefaultDraft((prev) => {
+      if (prev === null) return prev;
+      if (Array.isArray(prev)) {
+        const next = prev.filter((id) => id !== choiceId);
+        return next.length ? next : null;
+      }
+      return prev === choiceId ? null : prev;
+    });
+  }, []);
+
+  const handleAdd = useCallback((category?: "todo" | "inProgress" | "complete") => {
+    const id = generateBaseChoiceId();
+    setDraft((prev) => {
+      const colorIndex = prev.length % CHOICE_COLORS.length;
+      const newChoice: Choice = {
+        id,
+        name: "",
+        color: CHOICE_COLORS[colorIndex],
+        ...(category ? { category } : {}),
+      };
+      return [...prev, newChoice];
+    });
+    setFocusChoiceId(id);
+  }, []);
+
+  const handleAlphabetize = useCallback(() => {
+    setDraft((prev) => [...prev].sort((a, b) => a.name.localeCompare(b.name)));
+  }, []);
+
+  const handleSave = useCallback(() => {
+    const cleaned = draft.filter((c) => c.name.trim());
+    onSave(cleaned, pruneDefault(defaultDraft, cleaned));
+    onClose();
+  }, [draft, defaultDraft, onSave, onClose]);
+
+  const handleCancel = useCallback(() => {
+    setDraft(initialChoices);
+    setDefaultDraft(initialDefaultValue);
+    onDirtyChange?.(false);
+    onClose();
+  }, [initialChoices, initialDefaultValue, onDirtyChange, onClose]);
+
+  const handleReorder = useCallback(
+    (activeId: string, targetId: string, edge: Edge) => {
+      setDraft((prev) => {
+        const startIndex = prev.findIndex((c) => c.id === activeId);
+        const indexOfTarget = prev.findIndex((c) => c.id === targetId);
+        if (startIndex === -1 || indexOfTarget === -1) return prev;
+        const finishIndex = getReorderDestinationIndex({
+          startIndex,
+          indexOfTarget,
+          closestEdgeOfTarget: edge,
+          axis: "vertical",
+        });
+        if (finishIndex === startIndex) return prev;
+        return reorder({ list: prev, startIndex, finishIndex });
+      });
+    },
+    [],
+  );
+
+  const handleCategoryReorder = useCallback(
+    (category: string, activeId: string, targetId: string, edge: Edge) => {
+      setDraft((prev) => {
+        const catChoices = prev.filter((c) => (c.category ?? "todo") === category);
+        const startIndex = catChoices.findIndex((c) => c.id === activeId);
+        const indexOfTarget = catChoices.findIndex((c) => c.id === targetId);
+        if (startIndex === -1 || indexOfTarget === -1) return prev;
+        const finishIndex = getReorderDestinationIndex({
+          startIndex,
+          indexOfTarget,
+          closestEdgeOfTarget: edge,
+          axis: "vertical",
+        });
+        if (finishIndex === startIndex) return prev;
+        const reordered = reorder({
+          list: catChoices,
+          startIndex,
+          finishIndex,
+        });
+        const result: Choice[] = [];
+        for (const cat of ["todo", "inProgress", "complete"]) {
+          if (cat === category) {
+            result.push(...reordered);
+          } else {
+            result.push(...prev.filter((c) => (c.category ?? "todo") === cat));
+          }
+        }
+        return result;
+      });
+    },
+    [],
+  );
+
+  return (
+    <Stack gap="xs">
+      <Group justify="space-between">
+        <Text size="xs" fw={600}>
+          {t("Options")}
+        </Text>
+        <UnstyledButton onClick={handleAlphabetize} className={classes.alphabetizeBtn}>
+          <IconArrowsSort size={14} color="var(--mantine-color-dimmed)" />
+          <Text size="xs" c="dimmed">{t("Alphabetize")}</Text>
+        </UnstyledButton>
+      </Group>
+
+      {showCategories ? (
+        <StatusChoiceList
+          draft={draft}
+          focusChoiceId={focusChoiceId}
+          onFocused={() => setFocusChoiceId(null)}
+          onRename={handleRename}
+          onColorChange={handleColorChange}
+          onRemove={handleRemove}
+          onAdd={handleAdd}
+          onCategoryReorder={handleCategoryReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      ) : (
+        <FlatChoiceList
+          draft={draft}
+          focusChoiceId={focusChoiceId}
+          onFocused={() => setFocusChoiceId(null)}
+          onRename={handleRename}
+          onColorChange={handleColorChange}
+          onRemove={handleRemove}
+          onAdd={handleAdd}
+          onReorder={handleReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      )}
+
+      <DefaultValuePicker
+        choices={draft.filter((c) => c.name.trim())}
+        value={defaultDraft}
+        multiple={multiDefault}
+        onChange={setDefaultDraft}
+        dropdownPortalTarget={dropdownPortalTarget}
+      />
+
+      {!hideButtons && (
+        <>
+          <Divider />
+
+          <Group justify="flex-end" gap="xs">
+            <Button variant="default" size="xs" onClick={handleCancel}>
+              {t("Cancel")}
+            </Button>
+            <Button size="xs" onClick={handleSave} disabled={!isDirty || hasEmptyNames}>
+              {t("Save")}
+            </Button>
+          </Group>
+        </>
+      )}
+    </Stack>
+  );
+}
+
+function FlatChoiceList({
+  draft,
+  focusChoiceId,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onAdd,
+  onReorder,
+  dropdownPortalTarget,
+}: {
+  draft: Choice[];
+  focusChoiceId: string | null;
+  onFocused: () => void;
+  onRename: (id: string, name: string) => void;
+  onColorChange: (id: string, color: string) => void;
+  onRemove: (id: string) => void;
+  onAdd: () => void;
+  onReorder: (activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap={4}>
+      {draft.map((choice) => (
+        <SortableChoiceRow
+          key={choice.id}
+          choice={choice}
+          dragType="base-choice-flat"
+          autoFocus={choice.id === focusChoiceId}
+          onFocused={onFocused}
+          onRename={onRename}
+          onColorChange={onColorChange}
+          onRemove={onRemove}
+          onReorder={onReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      ))}
+
+      <UnstyledButton
+        onClick={() => onAdd()}
+        className={classes.addOptionBtn}
+      >
+        <IconPlus size={14} color="var(--mantine-color-dimmed)" />
+        <Text size="xs" c="dimmed">{t("Add option")}</Text>
+      </UnstyledButton>
+    </Stack>
+  );
+}
+
+function StatusChoiceList({
+  draft,
+  focusChoiceId,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onAdd,
+  onCategoryReorder,
+  dropdownPortalTarget,
+}: {
+  draft: Choice[];
+  focusChoiceId: string | null;
+  onFocused: () => void;
+  onRename: (id: string, name: string) => void;
+  onColorChange: (id: string, color: string) => void;
+  onRemove: (id: string) => void;
+  onAdd: (category: "todo" | "inProgress" | "complete") => void;
+  onCategoryReorder: (category: string, activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const grouped = useMemo(() => {
+    const groups: Record<string, Choice[]> = { todo: [], inProgress: [], complete: [] };
+    for (const choice of draft) {
+      const cat = choice.category ?? "todo";
+      (groups[cat] ?? groups.todo).push(choice);
+    }
+    return groups;
+  }, [draft]);
+
+  return (
+    <Stack gap="sm">
+      {STATUS_CATEGORIES.map(({ value: category, label }) => (
+        <CategorySection
+          key={category}
+          category={category as "todo" | "inProgress" | "complete"}
+          label={label}
+          choices={grouped[category] ?? []}
+          focusChoiceId={focusChoiceId}
+          onFocused={onFocused}
+          onRename={onRename}
+          onColorChange={onColorChange}
+          onRemove={onRemove}
+          onAdd={onAdd}
+          onReorder={onCategoryReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+function CategorySection({
+  category,
+  label,
+  choices,
+  focusChoiceId,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onAdd,
+  onReorder,
+  dropdownPortalTarget,
+}: {
+  category: "todo" | "inProgress" | "complete";
+  label: string;
+  choices: Choice[];
+  focusChoiceId: string | null;
+  onFocused: () => void;
+  onRename: (id: string, name: string) => void;
+  onColorChange: (id: string, color: string) => void;
+  onRemove: (id: string) => void;
+  onAdd: (category: "todo" | "inProgress" | "complete") => void;
+  onReorder: (
+    category: string,
+    activeId: string,
+    targetId: string,
+    edge: Edge,
+  ) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const { t } = useTranslation();
+
+  const handleRowReorder = useCallback(
+    (activeId: string, targetId: string, edge: Edge) => {
+      onReorder(category, activeId, targetId, edge);
+    },
+    [category, onReorder],
+  );
+
+  return (
+    <Stack gap={4}>
+      <Text size="xs" fw={600} c="dimmed">
+        {t(label)}
+      </Text>
+
+      {choices.map((choice) => (
+        <SortableChoiceRow
+          key={choice.id}
+          choice={choice}
+          // Per-category drag type prevents cross-category drops.
+          dragType={`base-choice-status:${category}`}
+          autoFocus={choice.id === focusChoiceId}
+          onFocused={onFocused}
+          onRename={onRename}
+          onColorChange={onColorChange}
+          onRemove={onRemove}
+          onReorder={handleRowReorder}
+          dropdownPortalTarget={dropdownPortalTarget}
+        />
+      ))}
+
+      <UnstyledButton
+        onClick={() => onAdd(category)}
+        className={classes.addOptionBtn}
+      >
+        <IconPlus size={14} color="var(--mantine-color-dimmed)" />
+        <Text size="xs" c="dimmed">{t("Add option")}</Text>
+      </UnstyledButton>
+    </Stack>
+  );
+}
+
+function SortableChoiceRow({
+  choice,
+  dragType,
+  autoFocus,
+  onFocused,
+  onRename,
+  onColorChange,
+  onRemove,
+  onReorder,
+  dropdownPortalTarget,
+}: {
+  choice: Choice;
+  dragType: string;
+  autoFocus?: boolean;
+  onFocused?: () => void;
+  onRename: (id: string, name: string) => void;
+  onColorChange: (id: string, color: string) => void;
+  onRemove: (id: string) => void;
+  onReorder: (activeId: string, targetId: string, edge: Edge) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const rowRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLDivElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  // Stable ref so the DnD effect doesn't re-register on every parent render.
+  const onReorderRef = useRef(onReorder);
+  useLayoutEffect(() => {
+    onReorderRef.current = onReorder;
+  });
+
+  useEffect(() => {
+    if (autoFocus) {
+      inputRef.current?.focus();
+      onFocused?.();
+    }
+  }, [autoFocus, onFocused]);
+
+  useEffect(() => {
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+    return combine(
+      draggable({
+        element: row,
+        dragHandle: handle,
+        getInitialData: () => ({ type: dragType, choiceId: choice.id }),
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      }),
+      dropTargetForElements({
+        element: row,
+        canDrop: ({ source }) =>
+          source.data.type === dragType &&
+          source.data.choiceId !== choice.id,
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { choiceId: choice.id },
+            { input, element, allowedEdges: ["top", "bottom"] },
+          ),
+        onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const edge = extractClosestEdge(self.data);
+          if (!edge) return;
+          onReorderRef.current(
+            source.data.choiceId as string,
+            choice.id,
+            edge,
+          );
+          triggerPostMoveFlash(row);
+          liveRegion.announce("Moved option");
+        },
+      }),
+    );
+  }, [choice.id, dragType]);
+
+  const hasError = !choice.name.trim();
+
+  return (
+    <Group
+      ref={rowRef}
+      gap={6}
+      wrap="nowrap"
+      align="center"
+      style={{
+        position: "relative",
+        opacity: isDragging ? 0.4 : 1,
+      }}
+      data-dragging={isDragging || undefined}
+    >
+      <div ref={handleRef} className={classes.dragHandle}>
+        <IconGripVertical size={14} style={{ opacity: 0.4 }} />
+      </div>
+      <ColorDot
+        color={choice.color}
+        onChange={(c) => onColorChange(choice.id, c)}
+        dropdownPortalTarget={dropdownPortalTarget}
+      />
+      <TextInput
+        ref={inputRef}
+        size="xs"
+        value={choice.name}
+        onChange={(e) => onRename(choice.id, e.currentTarget.value)}
+        style={{ flex: 1 }}
+        error={hasError}
+        styles={hasError ? { input: { borderColor: "var(--mantine-color-red-6)" } } : undefined}
+      />
+      <CloseButton size="sm" onClick={() => onRemove(choice.id)} />
+      {closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
+    </Group>
+  );
+}
+
+function ColorDot({
+  color,
+  onChange,
+  dropdownPortalTarget,
+}: {
+  color: string;
+  onChange: (color: string) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+}) {
+  const [opened, setOpened] = useState(false);
+  const colors = choiceColor(color);
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom"
+      shadow="sm"
+      withinPortal
+      portalProps={{ target: dropdownPortalTarget ?? undefined }}
+    >
+      <Popover.Target>
+        <UnstyledButton
+          onClick={() => setOpened((o) => !o)}
+          style={{
+            width: 20,
+            height: 20,
+            borderRadius: "50%",
+            backgroundColor: colors.backgroundColor as string,
+            border: `2px solid ${colors.color as string}`,
+            flexShrink: 0,
+          }}
+        />
+      </Popover.Target>
+      <Popover.Dropdown p={8}>
+        <SimpleGrid cols={5} spacing={6}>
+          {CHOICE_COLORS.map((c) => {
+            const dotColors = choiceColor(c);
+            return (
+              <UnstyledButton
+                key={c}
+                onClick={() => {
+                  onChange(c);
+                  setOpened(false);
+                }}
+                style={{
+                  width: 24,
+                  height: 24,
+                  borderRadius: "50%",
+                  backgroundColor: dotColors.backgroundColor as string,
+                  border: c === color
+                    ? `2px solid ${dotColors.color as string}`
+                    : "2px solid transparent",
+                }}
+              />
+            );
+          })}
+        </SimpleGrid>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,127 @@
+import type { BasePropertyType } from "@/ee/base/types/base.types";
+
+export const NON_USER_TARGET_TYPES = new Set<BasePropertyType>([
+  "createdAt",
+  "lastEditedAt",
+  "lastEditedBy",
+  "formula",
+]);
+
+type ConversionInfo = {
+  // i18n source key (translation files key them by their exact text).
+  message: string;
+  // True when cells can be cleared, discarded, truncated, or have their
+  // structured value flattened, i.e. the change is not safely reversible.
+  // Drives the destructive (red) "Apply" button in the confirm panel.
+  lossy: boolean;
+};
+
+// Buckets ordered most-specific first; default covers safe reinterpretations.
+function describeConversion(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): ConversionInfo {
+  if (to === "text" || to === "longText") {
+    if (from === "longText" && to === "text") {
+      return {
+        message:
+          "Cells longer than the Text limit will be truncated and the extra content permanently lost.",
+        lossy: true,
+      };
+    }
+    if (from === "select" || from === "status") {
+      return { message: "Cells will be replaced with the option name.", lossy: true };
+    }
+    if (from === "multiSelect") {
+      return {
+        message:
+          "Cells will be replaced with a comma-separated list of option names.",
+        lossy: true,
+      };
+    }
+    if (from === "person") {
+      return { message: "Cells will be replaced with the person's name.", lossy: true };
+    }
+    if (from === "file") {
+      return {
+        message:
+          "Cells will be replaced with a comma-separated list of file names.",
+        lossy: true,
+      };
+    }
+    if (from === "page") {
+      return { message: "Cells will be replaced with the page title.", lossy: true };
+    }
+  }
+
+  if (to === "select" && from === "multiSelect") {
+    return {
+      message:
+        "Only the first selected item per row will be kept; the rest will be discarded.",
+      lossy: true,
+    };
+  }
+
+  if (to === "multiSelect" && from === "select") {
+    return {
+      message: "Existing values become single-item lists. No data is lost.",
+      lossy: false,
+    };
+  }
+
+  if (to === "page") {
+    return {
+      message: "Cells that aren't already a page reference will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "number" && from !== "number") {
+    return {
+      message: "Cells that can't be parsed as a number will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "date" && from !== "date") {
+    return {
+      message: "Cells that can't be parsed as a date will be cleared.",
+      lossy: true,
+    };
+  }
+
+  if (to === "checkbox" && from !== "checkbox") {
+    return {
+      message:
+        "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
+      lossy: true,
+    };
+  }
+
+  if ((to === "url" || to === "email") && from !== to) {
+    return {
+      message:
+        to === "url"
+          ? "Cells that aren't a valid URL will be cleared."
+          : "Cells that aren't a valid email address will be cleared.",
+      lossy: true,
+    };
+  }
+
+  return { message: "Cells will be reinterpreted under the new type.", lossy: false };
+}
+
+export function conversionWarning(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): string {
+  return describeConversion(from, to).message;
+}
+
+// Whether the type change can lose data, used to make "Apply" destructive.
+export function isLossyConversion(
+  from: BasePropertyType,
+  to: BasePropertyType,
+): boolean {
+  return describeConversion(from, to).lossy;
+}

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

@@ -0,0 +1,417 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import {
+  Popover,
+  TextInput,
+  Button,
+  Group,
+  Stack,
+  Divider,
+  UnstyledButton,
+  Text,
+  ScrollArea,
+} from "@mantine/core";
+import { IconPlus, IconChevronRight } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  BasePropertyType,
+  IBaseProperty,
+  TypeOptions,
+} from "@/ee/base/types/base.types";
+import { useCreatePropertyMutation } from "@/ee/base/queries/base-property-query";
+import { PropertyTypePicker } 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 "@/ee/base/styles/grid.module.css";
+
+type CreatePropertyPopoverProps = {
+  pageId: string;
+  properties?: IBaseProperty[];
+  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 = () => {};
+
+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 scrollRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<"bottom-start" | "top-start">(
+    "bottom-start",
+  );
+
+  const createPropertyMutation = useCreatePropertyMutation();
+
+  const selectedTypeDef = useMemo(
+    () => propertyTypes.find((pt) => pt.type === selectedType),
+    [selectedType],
+  );
+  const selectedTypeLabel = selectedTypeDef ? t(selectedTypeDef.labelKey) : "";
+  const selectedTypeIcon = selectedTypeDef?.icon;
+
+  const hasContent = useMemo(() => {
+    return name.trim().length > 0 || Object.keys(typeOptions).length > 0;
+  }, [name, typeOptions]);
+
+  const nameTaken = useMemo(() => {
+    const trimmed = name.trim().toLowerCase();
+    if (!trimmed) return false;
+    return (properties ?? []).some(
+      (p) => p.name.trim().toLowerCase() === trimmed,
+    );
+  }, [name, properties]);
+
+  // Fall back to the type label when Name is blank, suffixing a counter if taken.
+  const fallbackName = useMemo(() => {
+    const base = selectedTypeLabel || "Property";
+    const existing = new Set(
+      (properties ?? []).map((p) => p.name.trim().toLowerCase()),
+    );
+    if (!existing.has(base.toLowerCase())) return base;
+    for (let i = 1; i < 1000; i++) {
+      const candidate = `${base} ${i}`;
+      if (!existing.has(candidate.toLowerCase())) return candidate;
+    }
+    return `${base} ${Date.now()}`;
+  }, [selectedTypeLabel, properties]);
+
+  const resetState = useCallback(() => {
+    setPanel("typePicker");
+    setSelectedType(null);
+    setName("");
+    setTypeOptions({});
+  }, []);
+
+  const handleOpen = useCallback(
+    (event?: React.SyntheticEvent) => {
+      resetState();
+      const trigger = event?.currentTarget as HTMLElement | undefined;
+      if (trigger) {
+        const rect = trigger.getBoundingClientRect();
+        const spaceAbove = rect.top;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        setPosition(spaceAbove > spaceBelow ? "top-start" : "bottom-start");
+      }
+      setOpened(true);
+    },
+    [resetState],
+  );
+
+  const handleClose = useCallback(() => {
+    // Don't reset state here: resetting mid-close flashes the type picker.
+    // handleOpen resets on the next open instead.
+    setOpened(false);
+  }, []);
+
+  const attemptClose = useCallback(() => {
+    if (panel === "configure" && hasContent) {
+      setPanel("confirmDiscard");
+    } else {
+      handleClose();
+    }
+  }, [panel, hasContent, handleClose]);
+
+  const handleConfirmDiscard = useCallback(() => {
+    handleClose();
+  }, [handleClose]);
+
+  const handleCancelDiscard = useCallback(() => {
+    setPanel("configure");
+  }, []);
+
+  const handleTypeSelect = useCallback((type: BasePropertyType) => {
+    setSelectedType(type);
+    setTypeOptions(defaultTypeOptionsFor(type));
+    setPanel("configure");
+  }, []);
+
+  useEffect(() => {
+    if (panel === "configure") {
+      setTimeout(() => nameInputRef.current?.focus(), 0);
+    }
+  }, [panel]);
+
+  const handleCreate = useCallback(() => {
+    if (!selectedType || nameTaken) return;
+    const finalName = name.trim() || fallbackName;
+    createPropertyMutation.mutate(
+      {
+        pageId,
+        name: finalName,
+        type: selectedType,
+        typeOptions: Object.keys(typeOptions).length > 0
+          ? typeOptions as TypeOptions
+          : undefined,
+      },
+      {
+        onSuccess: (created) => {
+          onPropertyCreated?.(created);
+        },
+      },
+    );
+    handleClose();
+  }, [selectedType, nameTaken, name, fallbackName, typeOptions, pageId, createPropertyMutation, handleClose, onPropertyCreated]);
+
+  const handleBackToTypePicker = useCallback(() => {
+    setPanel("typePicker");
+    setTypeOptions({});
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (panel === "confirmDiscard") {
+          handleCancelDiscard();
+        } else if (panel === "configure") {
+          handleBackToTypePicker();
+        } else {
+          handleClose();
+        }
+      }
+    },
+    [panel, handleBackToTypePicker, handleClose, handleCancelDiscard],
+  );
+
+  const handleNameKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleCreate();
+      }
+    },
+    [handleCreate],
+  );
+
+  const handleOptionsUpdate = useCallback(
+    (newTypeOptions: Record<string, unknown>) => {
+      setTypeOptions(newTypeOptions);
+    },
+    [],
+  );
+
+  const syntheticProperty: IBaseProperty = useMemo(() => ({
+    id: "",
+    pageId,
+    name: name || "",
+    type: selectedType ?? "text",
+    position: "",
+    typeOptions: typeOptions as TypeOptions,
+    isPrimary: false,
+    workspaceId: "",
+    createdAt: "",
+    updatedAt: "",
+  }), [pageId, name, selectedType, typeOptions]);
+
+  const TypeIcon = selectedTypeIcon;
+  const showOptions = !!selectedType && (getDescriptor(selectedType)?.hasOptions ?? false);
+
+  return (
+    <>
+      <Popover
+        opened={opened}
+        onChange={(o) => {
+          if (!o) attemptClose();
+        }}
+        position={position}
+        shadow="md"
+        closeOnClickOutside
+        closeOnEscape={false}
+        withinPortal
+        hideDetached={false}
+        middlewares={{
+          flip: false,
+          shift: true,
+          size: {
+            padding: 8,
+            apply: ({ availableHeight }) => {
+              const el = scrollRef.current;
+              if (el) el.style.maxHeight = `${availableHeight}px`;
+            },
+          },
+        }}
+      >
+        <Popover.Target>
+          {renderTarget ? (
+            renderTarget(handleOpen)
+          ) : (
+            <div
+              className={classes.addColumnButton}
+              onClick={handleOpen}
+              role="button"
+              tabIndex={0}
+            >
+              <IconPlus size={16} />
+            </div>
+          )}
+        </Popover.Target>
+        <Popover.Dropdown
+          ref={setDropdownNode}
+          p={0}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={handleKeyDown}
+          style={{
+            zIndex: 300,
+            width: selectedType === "formula" ? 460 : undefined,
+            minWidth: selectedType === "formula" ? undefined : 320,
+            maxWidth: "calc(100vw - 32px)",
+          }}
+        >
+          <div ref={scrollRef} style={{ overflowY: "auto", overflowX: "hidden" }}>
+          {panel === "typePicker" && (
+            <Stack gap={0} p={4}>
+              <ScrollArea.Autosize
+                mah="min(60vh, 400px)"
+                scrollbarSize={6}
+                offsetScrollbars
+              >
+                <PropertyTypePicker
+                  onSelect={handleTypeSelect}
+                  showSearch
+                />
+              </ScrollArea.Autosize>
+            </Stack>
+          )}
+          {panel === "configure" && selectedType === "formula" && (
+            <Stack gap="xs" p="sm">
+              <TextInput
+                ref={nameInputRef}
+                size="xs"
+                label={t("Name")}
+                placeholder={fallbackName}
+                value={name}
+                onChange={(e) => setName(e.currentTarget.value)}
+                error={nameTaken ? t("A property with this name already exists") : undefined}
+              />
+              <FormulaEditor
+                properties={properties ?? []}
+                editingPropertyId={null}
+                name={name.trim() || undefined}
+                onCancel={handleBackToTypePicker}
+                disabled={nameTaken}
+                onSave={(source, ast, resultType, dependencies) => {
+                  if (nameTaken) return;
+                  createPropertyMutation.mutate(
+                    {
+                      pageId,
+                      name: name.trim() || fallbackName,
+                      type: "formula",
+                      typeOptions: {
+                        source,
+                        ast,
+                        resultType,
+                        dependencies,
+                        astVersion: 1,
+                      } as TypeOptions,
+                    },
+                    { onSuccess: (created) => onPropertyCreated?.(created) },
+                  );
+                  handleClose();
+                }}
+              />
+            </Stack>
+          )}
+          {(panel === "configure" || panel === "confirmDiscard") && selectedType !== "formula" && (
+            <Stack gap={0} p="sm" style={panel === "confirmDiscard" ? { display: "none" } : undefined}>
+              <TextInput
+                ref={nameInputRef}
+                size="xs"
+                label={t("Name")}
+                placeholder={fallbackName}
+                value={name}
+                onChange={(e) => setName(e.currentTarget.value)}
+                onKeyDown={handleNameKeyDown}
+                error={nameTaken ? t("A property with this name already exists") : undefined}
+                mb="xs"
+              />
+              <UnstyledButton
+                onClick={handleBackToTypePicker}
+                py={6}
+                px={0}
+                mb={showOptions ? "xs" : 0}
+              >
+                <Group gap={8} wrap="nowrap">
+                  {TypeIcon && <TypeIcon size={14} />}
+                  <Text size="sm" style={{ flex: 1 }}>
+                    {selectedTypeLabel}
+                  </Text>
+                  <IconChevronRight size={14} />
+                </Group>
+              </UnstyledButton>
+
+              {showOptions && (
+                <>
+                  <Divider mb="xs" />
+                  <ScrollArea.Autosize mah={300} scrollbarSize={6} offsetScrollbars>
+                    <PropertyOptions
+                      property={syntheticProperty}
+                      onUpdate={handleOptionsUpdate}
+                      onClose={noop}
+                      onDirtyChange={noop}
+                      hideButtons
+                      dropdownPortalTarget={dropdownNode}
+                    />
+                  </ScrollArea.Autosize>
+                </>
+              )}
+
+              <Divider my="xs" />
+              <Group gap="xs" justify="flex-end">
+                <Button variant="default" size="xs" onClick={attemptClose}>
+                  {t("Cancel")}
+                </Button>
+                <Button size="xs" onClick={handleCreate} disabled={nameTaken}>
+                  {t("Create property")}
+                </Button>
+              </Group>
+            </Stack>
+          )}
+          {panel === "confirmDiscard" && (
+            <Stack gap="xs" p="sm">
+              <Text size="sm" fw={600}>
+                {t("Unsaved changes")}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t("You have unsaved changes. Do you want to discard them?")}
+              </Text>
+              <Group gap="xs" justify="flex-end">
+                <Button
+                  variant="default"
+                  size="xs"
+                  onClick={handleCancelDiscard}
+                >
+                  {t("Keep editing")}
+                </Button>
+                <Button
+                  color="red"
+                  size="xs"
+                  onClick={handleConfirmDiscard}
+                >
+                  {t("Discard")}
+                </Button>
+              </Group>
+            </Stack>
+          )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    </>
+  );
+}

apps/client/src/ee/base/components/property/default-value-picker.tsx

@@ -0,0 +1,98 @@
+import { Group, MultiSelect, Select, Text } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+import { Choice } from "@/ee/base/types/base.types";
+import { choiceColor } from "@/ee/base/components/cells/choice-color";
+import { useTranslation } from "react-i18next";
+import type { ComboboxItem } from "@mantine/core";
+
+type DefaultValuePickerProps = {
+  choices: Choice[];
+  value: string | string[] | null;
+  multiple?: boolean;
+  onChange: (value: string | string[] | null) => void;
+  dropdownPortalTarget?: HTMLElement | null;
+};
+
+export function DefaultValuePicker({
+  choices,
+  value,
+  multiple,
+  onChange,
+  dropdownPortalTarget,
+}: DefaultValuePickerProps) {
+  const { t } = useTranslation();
+  const data = choices.map((c) => ({ value: c.id, label: c.name }));
+  const comboboxProps = {
+    portalProps: { target: dropdownPortalTarget ?? undefined },
+  };
+
+  const renderOption = ({
+    option,
+    checked,
+  }: {
+    option: ComboboxItem;
+    checked?: boolean;
+  }) => {
+    const choice = choices.find((c) => c.id === option.value);
+    const colors = choice ? choiceColor(choice.color) : undefined;
+    return (
+      <Group gap={6} wrap="nowrap" justify="space-between" style={{ flex: 1 }}>
+        <Group gap={6} wrap="nowrap">
+          {colors && (
+            <span
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                backgroundColor: colors.backgroundColor as string,
+                border: `2px solid ${colors.color as string}`,
+                flexShrink: 0,
+              }}
+            />
+          )}
+          <Text size="xs">{option.label}</Text>
+        </Group>
+        {checked && (
+          <IconCheck size={14} color="var(--mantine-color-dimmed)" />
+        )}
+      </Group>
+    );
+  };
+
+  if (multiple) {
+    const selected = (
+      Array.isArray(value) ? value : value ? [value] : []
+    ).filter((id) => choices.some((c) => c.id === id));
+    return (
+      <MultiSelect
+        size="xs"
+        label={t("Default value")}
+        placeholder={selected.length ? undefined : t("None")}
+        data={data}
+        value={selected}
+        onChange={(vals) => onChange(vals.length ? vals : null)}
+        clearable
+        comboboxProps={comboboxProps}
+        renderOption={renderOption}
+      />
+    );
+  }
+
+  const single =
+    typeof value === "string" && choices.some((c) => c.id === value)
+      ? value
+      : null;
+  return (
+    <Select
+      size="xs"
+      label={t("Default value")}
+      placeholder={t("None")}
+      data={data}
+      value={single}
+      onChange={(val) => onChange(val)}
+      clearable
+      comboboxProps={comboboxProps}
+      renderOption={renderOption}
+    />
+  );
+}

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

@@ -0,0 +1,589 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import {
+  UnstyledButton,
+  TextInput,
+  Button,
+  Stack,
+  Text,
+  Group,
+  ActionIcon,
+  Divider,
+  ScrollArea,
+  Loader,
+} from "@mantine/core";
+import {
+  IconTrash,
+  IconPencil,
+  IconChevronRight,
+  IconSettings,
+  IconMathFunction,
+} from "@tabler/icons-react";
+import {
+  IBaseProperty,
+  BasePropertyType,
+  TypeOptions,
+  SelectTypeOptions,
+} from "@/ee/base/types/base.types";
+import { useAtom } from "jotai";
+import { propertyMenuCloseRequestAtomFamily } from "@/ee/base/atoms/base-atoms";
+import {
+  useUpdatePropertyMutation,
+  useDeletePropertyMutation,
+} from "@/ee/base/queries/base-property-query";
+import { PropertyTypePicker } 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,
+  propertyTypes,
+  defaultTypeOptionsFor,
+} from "@/ee/base/property-types/property-type.registry";
+import cellClasses from "@/ee/base/styles/cells.module.css";
+import classes from "@/ee/base/styles/property.module.css";
+
+type PropertyMenuContentProps = {
+  property: IBaseProperty;
+  opened: boolean;
+  onClose: () => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  onEditFormula?: () => void;
+  pageId: string;
+};
+
+type MenuPanel =
+  | "main"
+  | "rename"
+  | "options"
+  | "changeType"
+  | "confirmTypeChange"
+  | "confirmDelete"
+  | "confirmDiscard";
+
+const CHOICE_TYPES = new Set<BasePropertyType>([
+  "select",
+  "multiSelect",
+  "status",
+]);
+
+function typeOptionsForConversion(
+  source: IBaseProperty,
+  target: BasePropertyType,
+): TypeOptions {
+  if (!CHOICE_TYPES.has(source.type) || !CHOICE_TYPES.has(target)) {
+    return defaultTypeOptionsFor(target);
+  }
+  const opts = source.typeOptions as SelectTypeOptions | undefined;
+  const choices = opts?.choices ?? [];
+  const choiceOrder = opts?.choiceOrder?.length
+    ? opts.choiceOrder
+    : choices.map((c) => c.id);
+  const carried: SelectTypeOptions = { choices, choiceOrder };
+  if (target === "status") {
+    carried.defaultValue = choices[0]?.id ?? null;
+  }
+  return carried;
+}
+
+export function PropertyMenuContent({
+  property,
+  opened,
+  onClose,
+  onDirtyChange,
+  onEditFormula,
+  pageId,
+}: PropertyMenuContentProps) {
+  const { t } = useTranslation();
+  const [panel, setPanel] = useState<MenuPanel>("main");
+  const [renameValue, setRenameValue] = useState(property.name);
+  const renameInputRef = useRef<HTMLInputElement>(null);
+  const [optionsDirty, setOptionsDirty] = useState(false);
+  // Portal target for nested Select dropdowns to avoid triggering closeOnClickOutside.
+  const [optionsAnchor, setOptionsAnchor] = useState<HTMLDivElement | null>(null);
+  const [pendingTargetType, setPendingTargetType] = useState<BasePropertyType | null>(null);
+  const pendingActionRef = useRef<"back" | "close" | null>(null);
+  const sourcePanelRef = useRef<"rename" | "options" | null>(null);
+  const [closeRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number];
+  const closeRequestRef = useRef(closeRequest);
+
+  const renameDirty = renameValue !== property.name;
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+  const deletePropertyMutation = useDeletePropertyMutation();
+
+  useEffect(() => {
+    if (opened) {
+      setPanel("main");
+      setRenameValue(property.name);
+      setOptionsDirty(false);
+      setPendingTargetType(null);
+    }
+  }, [opened, property.name]);
+
+  useEffect(() => {
+    if (panel === "rename") {
+      setTimeout(() => renameInputRef.current?.select(), 0);
+    }
+  }, [panel]);
+
+  const handleOptionsDirtyChange = useCallback((dirty: boolean) => {
+    setOptionsDirty(dirty);
+  }, []);
+
+  useEffect(() => {
+    const dirty =
+      (panel === "rename" && renameDirty) ||
+      (panel === "options" && optionsDirty);
+    onDirtyChange?.(dirty);
+  }, [panel, renameDirty, optionsDirty, onDirtyChange]);
+
+  const commitRename = useCallback(() => {
+    const trimmed = renameValue.trim();
+    if (trimmed && trimmed !== property.name) {
+      updatePropertyMutation.mutate({
+        propertyId: property.id,
+        pageId: property.pageId,
+        name: trimmed,
+      });
+    }
+  }, [renameValue, property, updatePropertyMutation]);
+
+  const handleRenameAndClose = useCallback(() => {
+    commitRename();
+    onClose();
+  }, [commitRename, onClose]);
+
+  const requestClose = useCallback(() => {
+    if (panel === "rename" && renameDirty) {
+      sourcePanelRef.current = "rename";
+      pendingActionRef.current = "close";
+      setPanel("confirmDiscard");
+    } else if (panel === "options" && optionsDirty) {
+      sourcePanelRef.current = "options";
+      pendingActionRef.current = "close";
+      setPanel("confirmDiscard");
+    } else {
+      onClose();
+    }
+  }, [panel, renameDirty, optionsDirty, onClose]);
+
+  const handleRenameKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleRenameAndClose();
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        requestClose();
+      }
+    },
+    [handleRenameAndClose, requestClose],
+  );
+
+  const handleOptionsUpdate = useCallback(
+    (typeOptions: Record<string, unknown>) => {
+      updatePropertyMutation.mutate({
+        propertyId: property.id,
+        pageId: property.pageId,
+        typeOptions,
+      });
+      setOptionsDirty(false);
+    },
+    [property, updatePropertyMutation],
+  );
+
+  const handleTypeSelect = useCallback(
+    (type: BasePropertyType) => {
+      if (type === property.type) {
+        onClose();
+        return;
+      }
+      setPendingTargetType(type);
+      setPanel("confirmTypeChange");
+    },
+    [property.type, onClose],
+  );
+
+  const handleApplyTypeChange = useCallback(() => {
+    if (!pendingTargetType) return;
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+      type: pendingTargetType,
+      typeOptions: typeOptionsForConversion(property, pendingTargetType),
+    });
+    onClose();
+  }, [pendingTargetType, property, updatePropertyMutation, onClose]);
+
+  const handleDelete = useCallback(() => {
+    deletePropertyMutation.mutate({
+      propertyId: property.id,
+      pageId: property.pageId,
+    });
+    onClose();
+  }, [property, deletePropertyMutation, onClose]);
+
+  const handleOptionsBack = useCallback(() => {
+    if (optionsDirty) {
+      sourcePanelRef.current = "options";
+      pendingActionRef.current = "back";
+      setPanel("confirmDiscard");
+    } else {
+      setPanel("main");
+    }
+  }, [optionsDirty]);
+
+  useEffect(() => {
+    if (closeRequest !== closeRequestRef.current) {
+      closeRequestRef.current = closeRequest;
+      if (opened) {
+        requestClose();
+      }
+    }
+  }, [closeRequest, opened, requestClose]);
+
+  const handleConfirmDiscard = useCallback(() => {
+    setOptionsDirty(false);
+    setRenameValue(property.name);
+    const action = pendingActionRef.current;
+    pendingActionRef.current = null;
+    sourcePanelRef.current = null;
+    if (action === "back") {
+      setPanel("main");
+    } else {
+      onClose();
+    }
+  }, [property.name, onClose]);
+
+  const handleCancelDiscard = useCallback(() => {
+    const source = sourcePanelRef.current ?? "options";
+    pendingActionRef.current = null;
+    sourcePanelRef.current = null;
+    setPanel(source);
+  }, []);
+
+  return (
+    <>
+      {panel === "main" && (
+        <MainPanel
+          property={property}
+          onRename={() => setPanel("rename")}
+          onChangeType={() => setPanel("changeType")}
+          onOptions={() => setPanel("options")}
+          onDelete={() => setPanel("confirmDelete")}
+          onEditFormula={onEditFormula}
+        />
+      )}
+      {panel === "rename" && (
+        <Stack gap="xs" p="sm">
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Rename property")}
+          </Text>
+          <TextInput
+            ref={renameInputRef}
+            size="xs"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.currentTarget.value)}
+            onKeyDown={handleRenameKeyDown}
+          />
+          <Divider />
+          <Group justify="flex-end" gap="xs">
+            <Button variant="default" size="xs" onClick={requestClose}>
+              {t("Cancel")}
+            </Button>
+            <Button
+              size="xs"
+              onClick={handleRenameAndClose}
+              disabled={!renameValue.trim() || renameValue.trim() === property.name}
+            >
+              {t("Save")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+      {panel === "changeType" && (
+        <Stack gap={0} p={4}>
+          <Group gap="xs" px="sm" py={6}>
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="xs"
+              onClick={() => setPanel("main")}
+            >
+              <IconChevronRight
+                size={14}
+                className={classes.chevronBack}
+              />
+            </ActionIcon>
+            <Text size="xs" fw={600} c="dimmed">
+              {t("Change type")}
+            </Text>
+          </Group>
+          <ScrollArea.Autosize mah={300} scrollbarSize={6} offsetScrollbars>
+            <PropertyTypePicker
+              onSelect={handleTypeSelect}
+              currentType={property.type}
+              excludeTypes={NON_USER_TARGET_TYPES}
+              showSearch
+            />
+          </ScrollArea.Autosize>
+        </Stack>
+      )}
+      {panel === "confirmTypeChange" && pendingTargetType && (
+        <Stack gap="xs" p="sm">
+          <Text size="sm" fw={600}>
+            {t("Change type to {{label}}?", {
+              label: t(
+                propertyTypes.find((pt) => pt.type === pendingTargetType)
+                  ?.labelKey ?? pendingTargetType,
+              ),
+            })}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {t(conversionWarning(property.type, pendingTargetType))}
+          </Text>
+          <Group gap="xs" justify="flex-end">
+            <Button
+              variant="default"
+              size="xs"
+              onClick={() => setPanel("main")}
+            >
+              {t("Cancel")}
+            </Button>
+            <Button
+              size="xs"
+              color={
+                isLossyConversion(property.type, pendingTargetType)
+                  ? "red"
+                  : undefined
+              }
+              onClick={handleApplyTypeChange}
+            >
+              {t("Apply")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+      {(panel === "options" || panel === "confirmDiscard") && (
+        <Stack
+          ref={setOptionsAnchor}
+          gap="xs"
+          p="sm"
+          style={panel === "confirmDiscard" ? { display: "none" } : undefined}
+        >
+          <Group gap="xs">
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="xs"
+              onClick={handleOptionsBack}
+            >
+              <IconChevronRight
+                size={14}
+                className={classes.chevronBack}
+              />
+            </ActionIcon>
+            <Text size="xs" fw={600} c="dimmed">
+              {t("Property options")}
+            </Text>
+          </Group>
+          <ScrollArea.Autosize mah={400} scrollbarSize={6} offsetScrollbars>
+            <PropertyOptions
+              property={property}
+              onUpdate={handleOptionsUpdate}
+              onClose={onClose}
+              onDirtyChange={handleOptionsDirtyChange}
+              dropdownPortalTarget={optionsAnchor}
+            />
+          </ScrollArea.Autosize>
+        </Stack>
+      )}
+      {panel === "confirmDelete" && (
+        <Stack gap="xs" p="sm">
+          <Text size="sm" fw={600}>
+            {t("Delete property")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {t("Are you sure you want to delete")} <b>{property.name}</b>?{" "}
+            {t("All data in this column will be lost.")}
+          </Text>
+          <Group gap="xs" justify="flex-end">
+            <Button
+              variant="default"
+              size="xs"
+              onClick={() => setPanel("main")}
+            >
+              {t("Cancel")}
+            </Button>
+            <Button
+              color="red"
+              size="xs"
+              onClick={handleDelete}
+            >
+              {t("Delete")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+      {panel === "confirmDiscard" && (
+        <Stack gap="xs" p="sm">
+          <Text size="sm" fw={600}>
+            {t("Unsaved changes")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {t("You have unsaved changes. Do you want to discard them?")}
+          </Text>
+          <Group gap="xs" justify="flex-end">
+            <Button
+              variant="default"
+              size="xs"
+              onClick={handleCancelDiscard}
+            >
+              {t("Keep editing")}
+            </Button>
+            <Button
+              color="red"
+              size="xs"
+              onClick={handleConfirmDiscard}
+            >
+              {t("Discard")}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+    </>
+  );
+}
+
+PropertyMenuContent.displayName = "PropertyMenuContent";
+
+function MenuItem({
+  icon,
+  label,
+  rightIcon,
+  color,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  rightIcon?: React.ReactNode;
+  color?: string;
+  onClick: () => void;
+}) {
+  return (
+    <UnstyledButton
+      className={cellClasses.menuItem}
+      onClick={onClick}
+      style={{ color: color ? `var(--mantine-color-${color}-6)` : undefined }}
+    >
+      <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
+        {icon}
+        <Text size="sm">{label}</Text>
+      </Group>
+      {rightIcon}
+    </UnstyledButton>
+  );
+}
+
+function MainPanel({
+  property,
+  onRename,
+  onChangeType,
+  onOptions,
+  onDelete,
+  onEditFormula,
+}: {
+  property: IBaseProperty;
+  onRename: () => void;
+  onChangeType: () => void;
+  onOptions: () => void;
+  onDelete: () => void;
+  onEditFormula?: () => void;
+}) {
+  const { t } = useTranslation();
+
+  const isSystem = isSystemPropertyType(property.type);
+  const isPending = property.pendingType != null;
+
+  const hasOptions =
+    !isSystem &&
+    !isPending &&
+    (property.type === "select" ||
+      property.type === "multiSelect" ||
+      property.type === "status" ||
+      property.type === "number" ||
+      property.type === "date" ||
+      property.type === "text" ||
+      property.type === "longText" ||
+      property.type === "checkbox" ||
+      property.type === "url" ||
+      property.type === "email");
+
+  const typeDef = propertyTypes.find((pt) => pt.type === property.type);
+  const TypeIcon = typeDef?.icon;
+
+  return (
+    <Stack gap={0} p={4}>
+      <MenuItem
+        icon={<IconPencil size={14} />}
+        label={t("Rename")}
+        onClick={onRename}
+      />
+      {property.type === "formula" && !isPending && onEditFormula && (
+        <MenuItem
+          icon={<IconMathFunction size={14} />}
+          label={t("Edit formula")}
+          onClick={onEditFormula}
+        />
+      )}
+      {isPending && (
+        <Group gap={8} px="sm" py={8}>
+          <Loader size={12} />
+          <Text size="sm" c="dimmed">
+            {t("Converting…")}
+          </Text>
+        </Group>
+      )}
+      {!isSystem && !isPending && !property.isPrimary && (
+        <UnstyledButton
+          className={cellClasses.menuItem}
+          onClick={onChangeType}
+        >
+          <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
+            {TypeIcon ? <TypeIcon size={14} /> : null}
+            <Text size="sm">
+              {typeDef ? t(typeDef.labelKey) : property.type}
+            </Text>
+          </Group>
+          <IconChevronRight size={14} />
+        </UnstyledButton>
+      )}
+      {hasOptions && (
+        <MenuItem
+          icon={<IconSettings size={14} />}
+          label={t("Options")}
+          rightIcon={<IconChevronRight size={14} />}
+          onClick={onOptions}
+        />
+      )}
+      {!property.isPrimary && !isPending && (
+        <>
+          <Divider my={4} />
+          <MenuItem
+            icon={<IconTrash size={14} />}
+            label={t("Delete property")}
+            color="red"
+            onClick={onDelete}
+          />
+        </>
+      )}
+    </Stack>
+  );
+}
+

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

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

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

@@ -0,0 +1,71 @@
+import { UnstyledButton, Group, Text, TextInput } from "@mantine/core";
+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 "@/ee/base/styles/cells.module.css";
+
+type PropertyTypePickerProps = {
+  onSelect: (type: BasePropertyType) => void;
+  currentType?: BasePropertyType;
+  excludeTypes?: Set<BasePropertyType>;
+  showSearch?: boolean;
+};
+
+export function PropertyTypePicker({
+  onSelect,
+  currentType,
+  excludeTypes,
+  showSearch,
+}: PropertyTypePickerProps) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (showSearch) {
+      setTimeout(() => searchRef.current?.focus(), 0);
+    }
+  }, [showSearch]);
+
+  const types = propertyTypes
+    .filter(({ type }) => !excludeTypes?.has(type))
+    .filter(({ labelKey }) =>
+      !search || t(labelKey).toLowerCase().includes(search.toLowerCase())
+    );
+
+  return (
+    <>
+      {showSearch && (
+        <TextInput
+          ref={searchRef}
+          size="xs"
+          placeholder={t("Find a property type")}
+          leftSection={<IconSearch size={14} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+          mx="sm"
+          mt="sm"
+          mb={4}
+        />
+      )}
+      {types.map(({ type, icon: Icon, labelKey }) => (
+        <UnstyledButton
+          key={type}
+          className={classes.menuItem}
+          onClick={() => onSelect(type)}
+          style={{
+            fontWeight: type === currentType ? 600 : 400,
+          }}
+        >
+          <Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
+            <Icon size={14} />
+            <Text size="sm">{t(labelKey)}</Text>
+          </Group>
+          {type === currentType && <IconCheck size={14} />}
+        </UnstyledButton>
+      ))}
+    </>
+  );
+}

apps/client/src/ee/base/components/row-detail-modal/fields/detail-field.tsx

@@ -0,0 +1,142 @@
+import { forwardRef } from "react";
+import { Checkbox } from "@mantine/core";
+import { IconLock } from "@tabler/icons-react";
+import clsx from "clsx";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { FieldText } from "./field-text";
+import { FieldLongText } from "./field-long-text";
+import { FieldNumber } from "./field-number";
+import { FieldDate } from "./field-date";
+import { FieldChoice } from "./field-choice";
+import { FieldCellAdapter } from "./field-cell-adapter";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+export type FieldProps = {
+  property: IBaseProperty;
+  value: unknown;
+  rowId: string;
+  readOnly: boolean;
+  onChange: (value: unknown) => void;
+};
+
+type FieldShellProps = {
+  /** Visual + cursor treatment: text caret, pointer (opens a picker), or none. */
+  cursor?: "text" | "pointer" | "default";
+  /** Popover open — keeps the focus ring while focus is in the portal. */
+  active?: boolean;
+  locked?: boolean;
+  alignTop?: boolean;
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+// forwardRef is load-bearing: Popover.Target anchors its dropdown through a
+// ref injected into this element; without it the picker renders at (0,0).
+export const FieldShell = forwardRef<HTMLDivElement, FieldShellProps>(
+  function FieldShell(
+    { cursor = "default", active, locked, alignTop, className, children, ...rest },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          classes.fieldShell,
+          cursor === "text" && classes.fieldShellText,
+          cursor === "pointer" && classes.fieldShellPointer,
+          active && classes.fieldShellActive,
+          locked && classes.fieldShellLocked,
+          alignTop && classes.fieldShellTop,
+          className,
+        )}
+        {...rest}
+      >
+        {locked && <IconLock size={13} className={classes.fieldLockIcon} />}
+        {children}
+      </div>
+    );
+  },
+);
+
+function FieldCheckbox({ value, readOnly, onChange }: FieldProps) {
+  const checked = value === true;
+  return (
+    <FieldShell>
+      <Checkbox
+        size="sm"
+        checked={checked}
+        disabled={readOnly}
+        onChange={() => onChange(!checked)}
+      />
+    </FieldShell>
+  );
+}
+
+function FieldReadonlyCell({ property, value, rowId }: FieldProps) {
+  const CellComponent = getDescriptor(property.type)?.cellComponent;
+  return (
+    <FieldShell locked>
+      <div className={classes.fieldCellDisplay}>
+        {CellComponent && (
+          <CellComponent
+            value={value}
+            property={property}
+            rowId={rowId}
+            isEditing={false}
+            readOnly
+            onCommit={() => {}}
+            onValueChange={() => {}}
+            onCancel={() => {}}
+          />
+        )}
+      </div>
+    </FieldShell>
+  );
+}
+
+type DetailFieldProps = {
+  property: IBaseProperty;
+  row: IBaseRow;
+  readOnly: boolean;
+  onUpdate: (propertyId: string, value: unknown) => void;
+};
+
+export function DetailField({ property, row, readOnly, onUpdate }: DetailFieldProps) {
+  const descriptor = getDescriptor(property.type);
+  const value = descriptor?.systemAccessor
+    ? descriptor.systemAccessor(row)
+    : (row.cells ?? {})[property.id];
+  const fieldProps: FieldProps = {
+    property,
+    value,
+    rowId: row.id,
+    readOnly,
+    onChange: (next: unknown) => onUpdate(property.id, next),
+  };
+
+  switch (property.type) {
+    case "text":
+    case "url":
+    case "email":
+      return <FieldText {...fieldProps} />;
+    case "longText":
+      return <FieldLongText {...fieldProps} />;
+    case "number":
+      return <FieldNumber {...fieldProps} />;
+    case "checkbox":
+      return <FieldCheckbox {...fieldProps} />;
+    case "date":
+      return <FieldDate {...fieldProps} />;
+    case "select":
+    case "status":
+    case "multiSelect":
+      return <FieldChoice {...fieldProps} />;
+    case "person":
+    case "file":
+    case "page":
+      return <FieldCellAdapter {...fieldProps} />;
+    default:
+      // createdAt, lastEditedAt, lastEditedBy, formula and future types.
+      return <FieldReadonlyCell {...fieldProps} />;
+  }
+}

apps/client/src/ee/base/components/row-detail-modal/fields/field-cell-adapter.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useRef, useState } from "react";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+/** Person, file and page editors are popover pickers owned by their cell
+ *  components; the shell supplies modal styling and click-anywhere
+ *  activation while the cell keeps its picker behavior. */
+export function FieldCellAdapter({
+  property,
+  value,
+  rowId,
+  readOnly,
+  onChange,
+}: FieldProps) {
+  const [editing, setEditing] = useState(false);
+  // Whether the picker was open when the current gesture's mousedown fired.
+  const editingAtMouseDownRef = useRef(false);
+  const CellComponent = getDescriptor(property.type)?.cellComponent;
+
+  // Files stay openable read-only (download-only popover), matching the grid.
+  const canActivate = !readOnly || property.type === "file";
+
+  // Activate on click, not mousedown: opening on mousedown mounts the cell's
+  // picker mid-dispatch, and its document-level outside-mousedown listener
+  // then catches the same still-bubbling event and instantly closes it. By
+  // click time the mousedown has fully finished. The ref keeps toggle-close
+  // working: when the gesture started with the picker open, the picker's own
+  // outside-close already handled it and we must not reopen.
+  const handleMouseDown = useCallback(() => {
+    editingAtMouseDownRef.current = editing;
+  }, [editing]);
+
+  const handleClick = useCallback(() => {
+    if (!canActivate || editingAtMouseDownRef.current || editing) return;
+    setEditing(true);
+  }, [canActivate, editing]);
+
+  const handleCommit = useCallback(
+    (next: unknown) => {
+      setEditing(false);
+      onChange(next);
+    },
+    [onChange],
+  );
+  const handleCancel = useCallback(() => setEditing(false), []);
+
+  if (!CellComponent) return <FieldShell />;
+
+  return (
+    <FieldShell
+      cursor={canActivate ? "pointer" : "default"}
+      active={editing}
+      onMouseDown={handleMouseDown}
+      onClick={handleClick}
+      role={canActivate ? "button" : undefined}
+      tabIndex={canActivate ? 0 : undefined}
+      aria-label={property.name}
+      onKeyDown={(e) => {
+        if (canActivate && !editing && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          setEditing(true);
+        }
+      }}
+    >
+      <div className={classes.fieldCellDisplay}>
+        <CellComponent
+          value={value}
+          property={property}
+          rowId={rowId}
+          isEditing={editing}
+          readOnly={readOnly}
+          onCommit={handleCommit}
+          onValueChange={onChange}
+          onCancel={handleCancel}
+        />
+      </div>
+    </FieldShell>
+  );
+}

apps/client/src/ee/base/components/row-detail-modal/fields/field-choice.tsx

@@ -0,0 +1,104 @@
+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}
+      hideDetached={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>
+  );
+}

apps/client/src/ee/base/components/row-detail-modal/fields/field-date.tsx

@@ -0,0 +1,76 @@
+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
+      hideDetached={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);
+            }
+          }}
+        >
+          <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>
+  );
+}

apps/client/src/ee/base/components/row-detail-modal/fields/field-long-text.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from "react";
+import { Textarea } from "@mantine/core";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+const toText = (value: unknown) => (typeof value === "string" ? value : "");
+const normalize = (s: string) => {
+  const trimmed = s.trim();
+  return trimmed.length ? trimmed : null;
+};
+
+export function FieldLongText({ property, value, readOnly, onChange }: FieldProps) {
+  const text = toText(value);
+  const [draft, setDraft] = useState(text);
+  const [focused, setFocused] = useState(false);
+  // Esc sets this; blur() then runs commit synchronously with the stale
+  // draft, so the revert must be decided here, not via setDraft.
+  const cancelRef = useRef(false);
+
+  useEffect(() => {
+    if (!focused) setDraft(text);
+  }, [text, focused]);
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelRef.current) {
+      cancelRef.current = false;
+      setDraft(text);
+      return;
+    }
+    if (normalize(draft) !== normalize(text)) onChange(normalize(draft));
+  };
+
+  if (readOnly) {
+    return (
+      <FieldShell alignTop>
+        <span className={classes.fieldValueTextMultiline}>{text}</span>
+      </FieldShell>
+    );
+  }
+
+  return (
+    <FieldShell cursor="text" alignTop>
+      <Textarea
+        autosize
+        minRows={3}
+        maxRows={16}
+        maxLength={25000}
+        variant="unstyled"
+        className={classes.fieldTextarea}
+        classNames={{ input: classes.fieldTextareaInput }}
+        value={draft}
+        onFocus={() => setFocused(true)}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            cancelRef.current = true;
+            e.currentTarget.blur();
+          } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            e.preventDefault();
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={property.name}
+      />
+    </FieldShell>
+  );
+}

apps/client/src/ee/base/components/row-detail-modal/fields/field-number.tsx

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

apps/client/src/ee/base/components/row-detail-modal/fields/field-text.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from "react";
+import { IconExternalLink, IconMail } from "@tabler/icons-react";
+import { FieldProps, FieldShell } from "./detail-field";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+const toText = (value: unknown) => (typeof value === "string" ? value : "");
+
+export function FieldText({ property, value, readOnly, onChange }: FieldProps) {
+  const text = toText(value);
+  const [draft, setDraft] = useState(text);
+  const [focused, setFocused] = useState(false);
+  // Esc sets this; blur() then runs commit synchronously with the stale
+  // draft, so the revert must be decided here, not via setDraft.
+  const cancelRef = useRef(false);
+
+  // Track remote/navigation updates while not typing.
+  useEffect(() => {
+    if (!focused) setDraft(text);
+  }, [text, focused]);
+
+  const commit = () => {
+    setFocused(false);
+    if (cancelRef.current) {
+      cancelRef.current = false;
+      setDraft(text);
+      return;
+    }
+    if (draft !== text) onChange(draft);
+  };
+
+  if (readOnly) {
+    return (
+      <FieldShell>
+        <span className={classes.fieldValueText}>{text}</span>
+      </FieldShell>
+    );
+  }
+
+  const linkHref =
+    !focused && text
+      ? property.type === "email"
+        ? text.includes("@")
+          ? `mailto:${text}`
+          : null
+        : property.type === "url" && /^https?:\/\//i.test(text)
+          ? text
+          : null
+      : null;
+
+  return (
+    <FieldShell cursor="text">
+      <input
+        type="text"
+        className={classes.fieldInput}
+        value={draft}
+        maxLength={1000}
+        onFocus={() => setFocused(true)}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            e.currentTarget.blur();
+          } else if (e.key === "Escape") {
+            cancelRef.current = true;
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={property.name}
+      />
+      {linkHref && (
+        <a
+          href={linkHref}
+          target={property.type === "url" ? "_blank" : undefined}
+          rel="noopener noreferrer"
+          className={classes.fieldTrailing}
+          onMouseDown={(e) => e.stopPropagation()}
+          aria-label={property.type === "email" ? `Email ${text}` : `Open ${text}`}
+        >
+          {property.type === "email" ? (
+            <IconMail size={14} />
+          ) : (
+            <IconExternalLink size={14} />
+          )}
+        </a>
+      )}
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,118 @@
+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}
+          hideDetached={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>
+  );
+}

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

@@ -0,0 +1,440 @@
+import { Menu, Modal, Skeleton, Text, Tooltip } from "@mantine/core";
+import { useWindowEvent } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import { modals } from "@mantine/modals";
+import {
+  IconChevronDown,
+  IconChevronUp,
+  IconDotsVertical,
+  IconLink,
+  IconLock,
+  IconPlus,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { IBase, IBaseRow } from "@/ee/base/types/base.types";
+import {
+  useBaseRowQuery,
+  useDeleteRowMutation,
+  useUpdateRowMutation,
+} from "@/ee/base/queries/base-row-query";
+import { propertyMenuCloseRequestAtomFamily } from "@/ee/base/atoms/base-atoms";
+import { getDescriptor } from "@/ee/base/property-types/property-type.registry";
+import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { useClipboard } from "@/hooks/use-clipboard";
+import { CreatePropertyPopover } from "@/ee/base/components/property/create-property-popover";
+import { RowDetailTitle } from "./row-detail-title";
+import { PropertyRow } from "./property-row";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+type RowDetailModalProps = {
+  base: IBase;
+  rows: IBaseRow[];
+  openRowId: string | null;
+  onClose: () => void;
+  onNavigate: (rowId: string) => void;
+};
+
+export function RowDetailModal({
+  base,
+  rows,
+  openRowId,
+  onClose,
+  onNavigate,
+}: RowDetailModalProps) {
+  const { t } = useTranslation();
+  const canEdit = useBaseEditable();
+  const updateRowMutation = useUpdateRowMutation();
+  const deleteRowMutation = useDeleteRowMutation();
+  const clipboard = useClipboard({ timeout: 500 });
+
+  const rowIndex = useMemo(
+    () => (openRowId ? rows.findIndex((r) => r.id === openRowId) : -1),
+    [openRowId, rows],
+  );
+  const rowFromList = rowIndex >= 0 ? rows[rowIndex] : undefined;
+  // Deep links (?row=) can target rows outside the loaded pages or filtered
+  // out of the active view — fetch by id instead of closing. Close only
+  // when the server confirms the row is gone.
+  const rowQuery = useBaseRowQuery(base.id, openRowId ?? undefined, {
+    enabled: !!openRowId && !rowFromList,
+  });
+  const row = rowFromList ?? rowQuery.data;
+  const primaryProperty = useMemo(
+    () => base.properties.find((p) => p.isPrimary),
+    [base.properties],
+  );
+
+  const rowMissing = !!openRowId && !rowFromList && rowQuery.isError;
+  useEffect(() => {
+    if (rowMissing) onClose();
+  }, [rowMissing, onClose]);
+
+  const isSaving = updateRowMutation.isPending;
+  const opened = !!openRowId;
+
+  // One field menu open at a time, mirroring the grid header's semantics.
+  // The shared closeRequest atom asks an open dirty PropertyMenuContent to
+  // run its discard-confirm flow instead of being torn down mid-edit.
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+  const [newPropertyId, setNewPropertyId] = useState<string | null>(null);
+  const clearNewProperty = useCallback(() => setNewPropertyId(null), []);
+  const menuDirtyRef = useRef(false);
+  const [closeRequest, setCloseRequest] = useAtom(
+    propertyMenuCloseRequestAtomFamily(base.id),
+  ) as unknown as [number, (val: number) => void];
+
+  useEffect(() => {
+    setOpenMenuId(null);
+    menuDirtyRef.current = false;
+  }, [openRowId]);
+
+  const handleMenuDirtyChange = useCallback((dirty: boolean) => {
+    menuDirtyRef.current = dirty;
+  }, []);
+
+  const requestMenuClose = useCallback(() => {
+    if (menuDirtyRef.current) {
+      setCloseRequest(closeRequest + 1);
+    } else {
+      setOpenMenuId(null);
+    }
+  }, [closeRequest, setCloseRequest]);
+
+  const handleMenuOpenChange = useCallback(
+    (propertyId: string, nextOpened: boolean) => {
+      if (!nextOpened) {
+        setOpenMenuId(null);
+        menuDirtyRef.current = false;
+        return;
+      }
+      if (openMenuId && openMenuId !== propertyId && menuDirtyRef.current) {
+        setCloseRequest(closeRequest + 1);
+        return;
+      }
+      setOpenMenuId(propertyId);
+    },
+    [openMenuId, closeRequest, setCloseRequest],
+  );
+
+  useEffect(() => {
+    if (!openMenuId) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest("[data-position]")) return;
+      if (target.closest("[data-property-menu-target]")) return;
+      requestMenuClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [openMenuId, requestMenuClose]);
+
+  const hasPrev = rowIndex > 0;
+  const hasNext = rowIndex >= 0 && rowIndex < rows.length - 1;
+  const navigate = useCallback(
+    (delta: number) => {
+      if (rowIndex === -1) return;
+      const next = rows[rowIndex + delta];
+      if (next) onNavigate(next.id);
+    },
+    [rows, rowIndex, onNavigate],
+  );
+
+  const handleCopyLink = useCallback(() => {
+    clipboard.copy(window.location.href);
+    notifications.show({ message: t("Link copied") });
+  }, [clipboard, t]);
+
+  const handleDeleteRecord = useCallback(() => {
+    if (!row) return;
+    const rowId = row.id;
+    modals.openConfirmModal({
+      title: t("Delete record?"),
+      centered: true,
+      children: <Text size="sm">{t("This action cannot be undone.")}</Text>,
+      labels: { confirm: t("Delete"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        deleteRowMutation.mutate({ rowId, pageId: base.id });
+        onClose();
+      },
+    });
+  }, [row, base.id, deleteRowMutation, onClose, t]);
+
+  // Mantine's closeOnEscape runs a capture-phase window listener that fires
+  // before inner popovers and inputs see the key, so we manage Esc ourselves
+  // and yield to: nested dialogs (delete confirm), open popovers
+  // ([data-position]) and editable elements. Arrows step records under the
+  // same yield rules. Mantine puts role="dialog" and our content class on
+  // the same element, which distinguishes this modal from nested ones.
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const isEscape = event.key === "Escape";
+      const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown";
+      if ((!isEscape && !isArrow) || event.isComposing || !opened) return;
+      const target = event.target as HTMLElement | null;
+      if (target) {
+        const dialog = target.closest('[role="dialog"]');
+        if (dialog && !dialog.classList.contains(classes.modalContent)) {
+          return;
+        }
+        if (
+          target.closest("[data-position]") ||
+          target.matches("input, textarea, select, [contenteditable='true']")
+        ) {
+          return;
+        }
+      }
+      if (isEscape) {
+        if (openMenuId) {
+          requestMenuClose();
+          return;
+        }
+        onClose();
+        return;
+      }
+      if (openMenuId) return;
+      event.preventDefault();
+      navigate(event.key === "ArrowUp" ? -1 : 1);
+    },
+    [opened, openMenuId, requestMenuClose, onClose, navigate],
+  );
+  useWindowEvent("keydown", handleKeyDown, { capture: true });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="lg"
+      centered
+      withCloseButton={false}
+      closeOnEscape={false}
+      closeOnClickOutside={!openMenuId}
+      padding={0}
+      radius="md"
+      title={null}
+      classNames={{ content: classes.modalContent }}
+      removeScrollProps={{ noIsolation: true }}
+    >
+      {row ? (
+        <>
+          <div className={classes.topBar}>
+            <div className={classes.topBarGroup}>
+              <Tooltip label={t("Previous record")} openDelay={400}>
+                <button
+                  type="button"
+                  className={classes.iconButton}
+                  onClick={() => navigate(-1)}
+                  disabled={!hasPrev}
+                  aria-label={t("Previous record")}
+                >
+                  <IconChevronUp size={16} />
+                </button>
+              </Tooltip>
+              <Tooltip label={t("Next record")} openDelay={400}>
+                <button
+                  type="button"
+                  className={classes.iconButton}
+                  onClick={() => navigate(1)}
+                  disabled={!hasNext}
+                  aria-label={t("Next record")}
+                >
+                  <IconChevronDown size={16} />
+                </button>
+              </Tooltip>
+            </div>
+            <div className={classes.topBarGroup}>
+              <Menu position="bottom-end" shadow="md" withinPortal>
+                <Menu.Target>
+                  <button
+                    type="button"
+                    className={classes.iconButton}
+                    aria-label={t("Record actions")}
+                  >
+                    <IconDotsVertical size={16} />
+                  </button>
+                </Menu.Target>
+                <Menu.Dropdown>
+                  <Menu.Item
+                    leftSection={<IconLink size={14} />}
+                    onClick={handleCopyLink}
+                  >
+                    {t("Copy link")}
+                  </Menu.Item>
+                  {canEdit && (
+                    <>
+                      <Menu.Divider />
+                      <Menu.Item
+                        color="red"
+                        leftSection={<IconTrash size={14} />}
+                        onClick={handleDeleteRecord}
+                      >
+                        {t("Delete record")}
+                      </Menu.Item>
+                    </>
+                  )}
+                </Menu.Dropdown>
+              </Menu>
+              <button
+                type="button"
+                className={classes.iconButton}
+                onClick={onClose}
+                aria-label={t("Close")}
+              >
+                <IconX size={16} />
+              </button>
+            </div>
+          </div>
+
+          <RowDetailTitle
+            row={row}
+            primaryProperty={primaryProperty}
+            canEdit={canEdit}
+            onClose={onClose}
+            onCommit={(value) => {
+              if (!primaryProperty) return;
+              updateRowMutation.mutate({
+                rowId: row.id,
+                pageId: base.id,
+                cells: { [primaryProperty.id]: value },
+              });
+            }}
+          />
+
+          <div className={classes.body}>
+            <div className={classes.propertyList}>
+              {base.properties
+                .filter((p) => !p.isPrimary)
+                .map((property) => (
+                  <PropertyRow
+                    key={property.id}
+                    property={property}
+                    row={row}
+                    pageId={base.id}
+                    autoFocusValue={property.id === newPropertyId}
+                    onAutoFocused={clearNewProperty}
+                    menuOpened={openMenuId === property.id}
+                    onMenuOpenChange={(nextOpened) =>
+                      handleMenuOpenChange(property.id, nextOpened)
+                    }
+                    onMenuDirtyChange={handleMenuDirtyChange}
+                    onUpdate={(propertyId, value) => {
+                      updateRowMutation.mutate({
+                        rowId: row.id,
+                        pageId: base.id,
+                        cells: { [propertyId]: value },
+                      });
+                    }}
+                  />
+                ))}
+            </div>
+            {canEdit && (
+              <CreatePropertyPopover
+                pageId={base.id}
+                properties={base.properties}
+                onPropertyCreated={(p) => setNewPropertyId(p.id)}
+                renderTarget={(open) => (
+                  <button
+                    type="button"
+                    className={classes.addPropertyRow}
+                    onClick={open}
+                  >
+                    <span className={classes.addPropertyLabel}>
+                      <IconPlus size={15} />
+                      {t("Add property")}
+                    </span>
+                  </button>
+                )}
+              />
+            )}
+          </div>
+
+          <footer className={classes.footer}>
+            <div className={classes.footerStatus}>
+              {!canEdit ? (
+                <span className={classes.lockedHint}>
+                  <IconLock size={12} />
+                  {t("Read-only")}
+                </span>
+              ) : isSaving ? (
+                <>
+                  <span className={classes.savingDot} />
+                  <span>{t("Saving…")}</span>
+                </>
+              ) : null}
+            </div>
+            <div className={classes.kbdHint}>
+              {rowIndex >= 0 && rows.length > 1 && (
+                <>
+                  <kbd className={classes.kbd}>↑</kbd>
+                  <kbd className={classes.kbd}>↓</kbd>
+                  <span>{t("to navigate")}</span>
+                  <span className={classes.kbdSeparator} />
+                </>
+              )}
+              <kbd className={classes.kbd}>Esc</kbd>
+              <span>{t("to close")}</span>
+            </div>
+          </footer>
+        </>
+      ) : (
+        <RowDetailSkeleton base={base} />
+      )}
+    </Modal>
+  );
+}
+
+/** Hydration state for deep-linked rows: the schema is already loaded, so
+ *  render the real labels and shimmer only the unknown values. Matching the
+ *  final layout avoids a size jump when the row arrives. */
+function RowDetailSkeleton({ base }: { base: IBase }) {
+  return (
+    <>
+      <div className={classes.topBar}>
+        <div className={classes.topBarGroup}>
+          <Skeleton height={28} width={28} radius={6} />
+          <Skeleton height={28} width={28} radius={6} />
+        </div>
+        <div className={classes.topBarGroup}>
+          <Skeleton height={28} width={28} radius={6} />
+          <Skeleton height={28} width={28} radius={6} />
+        </div>
+      </div>
+      <header className={classes.header}>
+        <Skeleton height={30} width="45%" radius={8} />
+        <div className={classes.metaRow}>
+          <Skeleton height={12} width={150} radius={4} />
+        </div>
+      </header>
+      <div className={classes.body}>
+        <div className={classes.propertyList}>
+          {base.properties
+            .filter((p) => !p.isPrimary)
+            .map((property) => {
+              const Icon = getDescriptor(property.type)?.icon;
+              return (
+                <div key={property.id} className={classes.propertyRow}>
+                  <div className={classes.propertyLabel}>
+                    {Icon && (
+                      <Icon size={15} className={classes.propertyLabelIcon} />
+                    )}
+                    <span className={classes.propertyLabelText}>
+                      {property.name}
+                    </span>
+                  </div>
+                  <Skeleton
+                    height={property.type === "longText" ? 82 : 34}
+                    radius={7}
+                    style={{ flex: 1 }}
+                  />
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
+import { timeAgo } from "@/lib/time.ts";
+import classes from "@/ee/base/styles/row-detail-modal.module.css";
+
+type RowDetailTitleProps = {
+  row: IBaseRow;
+  primaryProperty: IBaseProperty | undefined;
+  canEdit: boolean;
+  onCommit: (value: string) => void;
+  onClose: () => void;
+};
+
+export function RowDetailTitle({
+  row,
+  primaryProperty,
+  canEdit,
+  onCommit,
+  onClose,
+}: RowDetailTitleProps) {
+  const { t } = useTranslation();
+  const initial = primaryProperty
+    ? (((row.cells ?? {})[primaryProperty.id] as string) ?? "")
+    : "";
+  const [value, setValue] = useState(initial);
+
+  // Re-sync when the row changes underneath us (navigation or remote edit).
+  useEffect(() => {
+    setValue(initial);
+  }, [initial]);
+
+  const updatedAgo = row.updatedAt ? timeAgo(new Date(row.updatedAt)) : "";
+
+  return (
+    <header className={classes.header}>
+      {canEdit ? (
+        <input
+          type="text"
+          className={classes.titleInput}
+          {...(!initial ? { "data-autofocus": true } : {})}
+          placeholder={t("Untitled")}
+          aria-label={primaryProperty?.name ?? t("Untitled")}
+          value={value}
+          maxLength={1000}
+          onChange={(e) => setValue(e.currentTarget.value)}
+          onBlur={() => {
+            if (value !== initial) onCommit(value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              (e.currentTarget as HTMLInputElement).blur();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              (e.currentTarget as HTMLInputElement).blur();
+              onClose();
+            }
+          }}
+        />
+      ) : (
+        <h1 className={classes.titleStatic}>{value || t("Untitled")}</h1>
+      )}
+      {updatedAgo && (
+        <div className={classes.metaRow}>
+          <span>{t("Updated {{when}}", { when: updatedAgo })}</span>
+        </div>
+      )}
+    </header>
+  );
+}