update packages

.dockerignore

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

.env.example

@@ -10,7 +10,7 @@ JWT_TOKEN_EXPIRES_IN=30d
 DATABASE_URL="postgresql://postgres:password@localhost:5432/docmost?schema=public"
 REDIS_URL=redis://127.0.0.1:6379
 
-# options: local | s3 | azure
+# options: local | s3
 STORAGE_DRIVER=local
 
 # S3 driver config
@@ -21,11 +21,6 @@ AWS_S3_BUCKET=
 AWS_S3_ENDPOINT=
 AWS_S3_FORCE_PATH_STYLE=
 
-# Azure Blob Storage driver config
-AZURE_STORAGE_ACCOUNT_NAME=
-AZURE_STORAGE_ACCOUNT_KEY=
-AZURE_STORAGE_CONTAINER=
-
 # default: 50mb
 FILE_UPLOAD_SIZE_LIMIT=
 

.gitignore

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

Dockerfile

@@ -28,8 +28,6 @@ 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

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.90.1",
+  "version": "0.90.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -18,23 +18,21 @@
     "@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": "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",
+    "@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",
     "@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-table": "8.21.3",
-    "@tanstack/react-virtual": "3.14.3",
+    "@tanstack/react-virtual": "3.13.24",
     "alfaaz": "1.1.0",
     "axios": "1.16.0",
     "blueimp-load-image": "5.16.0",
@@ -43,25 +41,24 @@
     "highlightjs-sap-abap": "0.3.0",
     "i18next": "25.10.1",
     "i18next-http-backend": "3.0.6",
-    "jotai": "2.20.1",
+    "jotai": "2.18.1",
     "jotai-optics": "0.4.0",
-    "js-cookie": "3.0.7",
+    "js-cookie": "3.0.5",
     "jwt-decode": "4.0.0",
     "katex": "0.16.40",
     "lowlight": "3.3.0",
     "mantine-form-zod-resolver": "1.3.0",
     "mermaid": "11.15.0",
     "mitt": "3.0.1",
-    "nanoid": "3.3.8",
-    "posthog-js": "1.391.2",
-    "react": "19.2.7",
+    "posthog-js": "1.372.2",
+    "react": "18.3.1",
     "react-clear-modal": "^2.0.18",
-    "react-dom": "19.2.7",
+    "react-dom": "^18.3.1",
     "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.18.0",
+    "react-router-dom": "7.13.1",
     "semver": "7.7.4",
     "socket.io-client": "4.8.3",
     "zod": "4.3.6"
@@ -76,8 +73,8 @@
     "@types/js-cookie": "3.0.6",
     "@types/katex": "0.16.8",
     "@types/node": "22.19.1",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "6.0.1",
     "eslint": "9.28.0",
     "eslint-plugin-react": "7.37.5",
@@ -92,7 +89,7 @@
     "prettier": "3.8.1",
     "typescript": "5.9.3",
     "typescript-eslint": "8.57.1",
-    "vite": "8.0.16",
+    "vite": "8.0.5",
     "vitest": "4.1.6"
   }
 }

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

@@ -41,8 +41,6 @@
   "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",
@@ -78,24 +76,6 @@
   "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",
@@ -418,8 +398,6 @@
   "Insert mermaid diagram": "Insert mermaid diagram",
   "Insert and design Drawio diagrams": "Insert and design Drawio diagrams",
   "Insert current date": "Insert current date",
-  "Time": "Time",
-  "Insert current time": "Insert current time",
   "Draw and sketch excalidraw diagrams": "Draw and sketch excalidraw diagrams",
   "Multiple": "Multiple",
   "Turn into": "Turn into",
@@ -446,7 +424,6 @@
   "Names do not match": "Names do not match",
   "Today, {{time}}": "Today, {{time}}",
   "Yesterday, {{time}}": "Yesterday, {{time}}",
-  "now": "now",
   "Space created successfully": "Space created successfully",
   "Space updated successfully": "Space updated successfully",
   "Space deleted successfully": "Space deleted successfully",
@@ -619,8 +596,6 @@
   "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",
@@ -1002,7 +977,7 @@
   "Search pages and spaces...": "Search pages and spaces...",
   "No results found": "No results found",
   "You don't have permission to create pages here": "You don't have permission to create pages here",
-  "Chat menu for {{title}}": "Chat menu for {{title}}",
+  "Chat menu": "Chat menu",
   "API key menu": "API key menu",
   "Jump to comment selection": "Jump to comment selection",
   "Slash commands": "Slash commands",
@@ -1088,7 +1063,7 @@
   "Filter": "Filter",
   "Page title": "Page title",
   "Page content": "Page content",
-  "Member actions for {{name}}": "Member actions for {{name}}",
+  "Member actions": "Member actions",
   "Toggle password visibility": "Toggle password visibility",
   "Send comment": "Send comment",
   "Token actions": "Token actions",
@@ -1109,47 +1084,5 @@
   "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}}",
-  "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"
+  "Create subpage of {{name}}": "Create subpage of {{name}}"
 }

apps/client/src/App.tsx

@@ -38,7 +38,6 @@ 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";
@@ -107,8 +106,6 @@ 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/export-modal.tsx

@@ -6,21 +6,13 @@ import {
   Select,
   Switch,
   Divider,
-  Tooltip,
-  Badge,
 } from "@mantine/core";
-import {
-  exportPage,
-  exportPageToDocx,
-} from "@/features/page/services/page-service.ts";
+import { exportPage } from "@/features/page/services/page-service.ts";
 import { useState } from "react";
 import { ExportFormat } from "@/features/page/types/page.types.ts";
 import { notifications } from "@mantine/notifications";
 import { exportSpace } from "@/features/space/services/space-service";
 import { useTranslation } from "react-i18next";
-import { Feature } from "@/ee/features";
-import { useHasFeature } from "@/ee/hooks/use-feature";
-import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 
 interface ExportModalProps {
   id: string;
@@ -40,25 +32,17 @@ export default function ExportModal({
   const [includeAttachments, setIncludeAttachments] = useState<boolean>(false);
   const [isExporting, setIsExporting] = useState<boolean>(false);
   const { t } = useTranslation();
-  const upgradeLabel = useUpgradeLabel();
-  const isDocx = format === ExportFormat.Docx;
-  const docxEntitled = useHasFeature(Feature.DOCX_EXPORT);
-  const blockedByLicense = isDocx && !docxEntitled;
 
   const handleExport = async () => {
     setIsExporting(true);
     try {
       if (type === "page") {
-        if (format === ExportFormat.Docx) {
-          await exportPageToDocx({ pageId: id });
-        } else {
-          await exportPage({
-            pageId: id,
-            format,
-            includeChildren,
-            includeAttachments,
-          });
-        }
+        await exportPage({
+          pageId: id,
+          format,
+          includeChildren,
+          includeAttachments,
+        });
       }
       if (type === "space") {
         await exportSpace({ spaceId: id, format, includeAttachments });
@@ -104,15 +88,10 @@ export default function ExportModal({
             <div>
               <Text size="md">{t("Format")}</Text>
             </div>
-            <ExportFormatSelection
-              format={format}
-              onChange={handleChange}
-              includeDocx={type === "page"}
-              docxEntitled={docxEntitled}
-            />
+            <ExportFormatSelection format={format} onChange={handleChange} />
           </Group>
 
-          {type === "page" && !isDocx && (
+          {type === "page" && (
             <>
               <Divider my="sm" />
 
@@ -164,16 +143,7 @@ export default function ExportModal({
             <Button onClick={onClose} variant="default">
               {t("Cancel")}
             </Button>
-            <Tooltip label={upgradeLabel} disabled={!blockedByLicense} withArrow>
-              <Button
-                onClick={handleExport}
-                loading={isExporting}
-                disabled={blockedByLicense}
-                data-disabled={blockedByLicense || undefined}
-              >
-                {t("Export")}
-              </Button>
-            </Tooltip>
+            <Button onClick={handleExport} loading={isExporting}>{t("Export")}</Button>
           </Group>
         </Modal.Body>
       </Modal.Content>
@@ -184,49 +154,23 @@ export default function ExportModal({
 interface ExportFormatSelection {
   format: ExportFormat;
   onChange: (value: string) => void;
-  includeDocx?: boolean;
-  docxEntitled?: boolean;
 }
-function ExportFormatSelection({
-  format,
-  onChange,
-  includeDocx,
-  docxEntitled,
-}: ExportFormatSelection) {
+function ExportFormatSelection({ format, onChange }: ExportFormatSelection) {
   const { t } = useTranslation();
 
-  const data = [
-    { value: "markdown", label: "Markdown" },
-    { value: "html", label: "HTML" },
-    ...(includeDocx
-      ? [{ value: "docx", label: "Word (.docx)", disabled: !docxEntitled }]
-      : []),
-  ];
-
   return (
     <Select
-      data={data}
+      data={[
+        { value: "markdown", label: "Markdown" },
+        { value: "html", label: "HTML" },
+      ]}
       defaultValue={format}
       onChange={onChange}
-      styles={{ wrapper: { maxWidth: 140 }, option: { opacity: 1 } }}
-      comboboxProps={{ width: 200 }}
+      styles={{ wrapper: { maxWidth: 120 } }}
+      comboboxProps={{ width: "120" }}
       allowDeselect={false}
       withCheckIcon={false}
       aria-label={t("Select export format")}
-      renderOption={({ option }) =>
-        option.value === "docx" && !docxEntitled ? (
-          <div>
-            <Text size="sm" c="dimmed">
-              {option.label}
-            </Text>
-            <Badge size="xs" mt={4}>
-              {t("Enterprise")}
-            </Badge>
-          </div>
-        ) : (
-          <Text size="sm">{option.label}</Text>
-        )
-      }
     />
   );
 }

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

@@ -1,18 +0,0 @@
-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, getPageTitle } from "@/features/page/page.utils.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { formattedDate } from "@/lib/time.ts";
 import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { PageListIcon } from "@/components/common/page-list-icon";
-import { IconFiles } from "@tabler/icons-react";
+import { IconFileDescription, 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,10 +50,14 @@ export default function RecentChanges({ spaceId }: Props) {
                     to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >
                     <Group wrap="nowrap">
-                      <PageListIcon icon={page.icon} isBase={page.isBase} />
+                      {page.icon || (
+                        <ThemeIcon variant="transparent" color="gray" size={18}>
+                          <IconFileDescription size={18} />
+                        </ThemeIcon>
+                      )}
 
                       <Text fw={500} size="md" lineClamp={1}>
-                        {getPageTitle(page.title, page.isBase, t)}
+                        {page.title || t("Untitled")}
                       </Text>
                     </Group>
                   </UnstyledButton>

apps/client/src/components/layouts/global/global-sidebar.tsx

@@ -105,7 +105,7 @@ export default function GlobalSidebar() {
 
         <Divider my="xs" />
         <div className={classes.section}>
-          <Text component="h2" className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
+          <Text className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
           {!isFavoritesPending && sortedFavoriteSpaces.length === 0 ? (
             <Text size="xs" c="dimmed" pl="xs" py={4}>
               {t("Favorite spaces appear here")}

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

@@ -15,16 +15,9 @@ 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";
@@ -43,20 +36,11 @@ 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>
@@ -131,26 +115,6 @@ 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} />}>
@@ -196,8 +160,5 @@ export default function TopMenu() {
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>
-
-      <CreatePersonalSpaceModal opened={createOpened} onClose={closeCreate} />
-    </>
   );
 }

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

@@ -16,10 +16,13 @@ interface CustomAvatarProps {
   mt?: string | number;
 }
 
-// color.shade picks whose FILLED variant (white text on the shade) meets WCAG AA 4.5:1.
-// Avoids lime/yellow/green/orange, too light even at dark shades.
-// For non-filled variants, initials text is forced to the .9 shade at render time:
-// Mantine otherwise caps light-variant placeholder text at .6, dropping contrast to ~3:1.
+// `color.shade` pairs whose contrast meets WCAG AA (4.5:1) in BOTH variants:
+//   - filled: white text on the shade as bg
+//   - light:  shade as text on the color's light-bg (10% color.6 over white)
+// Avoids lime/yellow/green/orange — even their dark shades have weak
+// contrast. grape and indigo were bumped from .7 to darker shades because
+// the original picks failed: grape.7 was 4.02/3.61 (both fail) and
+// indigo.7 was 4.98/4.39 (light fails by a hair).
 const SAFE_INITIALS_COLORS: MantineColor[] = [
   "blue.8",
   "cyan.9",
@@ -51,24 +54,12 @@ function sanitizeInitialsSource(name: string) {
 export const CustomAvatar = React.forwardRef<
   HTMLInputElement,
   CustomAvatarProps
->(({ avatarUrl, name, type, color, variant, ...props }: CustomAvatarProps, ref) => {
+>(({ avatarUrl, name, type, color, ...props }: CustomAvatarProps, ref) => {
   const avatarLink = getAvatarUrl(avatarUrl, type);
-  const isInitials = !color || color === "initials";
-  const pickedColor = isInitials ? pickInitialsColor(name ?? "") : color;
-  const hue = pickedColor.split(".")[0];
+  const resolvedColor =
+    !color || color === "initials" ? pickInitialsColor(name ?? "") : color;
   const initialsSource = sanitizeInitialsSource(name ?? "");
 
-  const resolvedColor = variant === "filled" ? pickedColor : hue;
-
-  const placeholderStyles =
-    isInitials && variant !== "filled"
-      ? {
-          placeholder: {
-            color: `var(--mantine-color-${hue}-9)`,
-          },
-        }
-      : undefined;
-
   return (
     <Avatar
       ref={ref}
@@ -76,8 +67,6 @@ export const CustomAvatar = React.forwardRef<
       name={initialsSource}
       alt={name}
       color={resolvedColor}
-      variant={variant}
-      styles={placeholderStyles}
       {...props}
     />
   );

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

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

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

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

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

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

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

@@ -3,7 +3,6 @@ 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";
 
@@ -96,7 +95,7 @@ export function PageRow({
         </div>
 
         <div className={classes.pageTitle}>
-          {getPageTitle(page.title, page.isBase, t)}
+          {page.title || t("Untitled")}
         </div>
       </div>
 

apps/client/src/components/ui/radio-menu-item.tsx

@@ -1,12 +0,0 @@
-import { UnstyledButton } from "@mantine/core";
-import { type ComponentPropsWithoutRef, forwardRef } from "react";
-
-// Menu.Item hard-codes role="menuitem"; use as its `component` to restore role="menuitemradio" so aria-checked works.
-export const RadioMenuItem = forwardRef<
-  HTMLButtonElement,
-  ComponentPropsWithoutRef<"button">
->((props, ref) => (
-  <UnstyledButton ref={ref} {...props} role="menuitemradio" />
-));
-
-RadioMenuItem.displayName = "RadioMenuItem";

apps/client/src/ee/LICENSE

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

apps/client/src/ee/ai-chat/components/ai-chat-sidebar-item.tsx

@@ -66,8 +66,6 @@ export default function AiChatSidebarItem({
     [chat.updatedAt, i18n.language],
   );
 
-  const chatTitle = chat.title || t("Untitled chat");
-
   useEffect(() => {
     if (renaming) {
       // Wait for the input to be mounted before selecting.
@@ -122,7 +120,9 @@ export default function AiChatSidebarItem({
       className={classes.chatItem}
       data-active={isActive || undefined}
     >
-      <span className={classes.chatItemTitle}>{chatTitle}</span>
+      <span className={classes.chatItemTitle}>
+        {chat.title || t("Untitled chat")}
+      </span>
       <span className={classes.chatItemDate}>{formattedDate}</span>
       <div className={classes.chatItemActions}>
         <Menu position="bottom-end" withinPortal>
@@ -132,7 +132,7 @@ export default function AiChatSidebarItem({
               size="xs"
               color="gray"
               onClick={(e) => e.preventDefault()}
-              aria-label={t("Chat menu for {{title}}", { title: chatTitle })}
+              aria-label={t("Chat menu")}
             >
               <IconDots size={14} />
             </ActionIcon>

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

@@ -1,4 +1,4 @@
-import { useCallback, useId, useRef, useEffect, useState } from "react";
+import { useCallback, useRef, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IconArrowUp, IconPaperclip, IconPlayerStopFilled, IconX, IconFile, IconPhoto, IconPlus, IconAt, IconFileText } from "@tabler/icons-react";
 import { Popover } from "@mantine/core";
@@ -107,7 +107,6 @@ export default function ChatInput({
   const [isEmpty, setIsEmpty] = useState(true);
   const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
   const [plusMenuOpen, setPlusMenuOpen] = useState(false);
-  const plusMenuId = useId();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const onSendRef = useRef(onSend);
   onSendRef.current = onSend;
@@ -177,7 +176,7 @@ export default function ChatInput({
   }, []);
 
   const handleSubmit = useCallback(() => {
-    if (!editor || editor.isDestroyed || isStreaming) return;
+    if (!editor || isStreaming) return;
     const json = editor.getJSON();
     const text = editorJsonToText(json).trim();
     const readyAttachments = pendingAttachments.filter((a) => !a.uploading);
@@ -264,7 +263,7 @@ export default function ChatInput({
   });
 
   useEffect(() => {
-    if (editor && !editor.isDestroyed && autofocus) {
+    if (editor && autofocus) {
       editor.commands.focus();
     }
   }, [editor]);
@@ -343,7 +342,6 @@ export default function ChatInput({
           position="top-start"
           width={220}
           shadow="md"
-          withRoles={false}
           trapFocus
           returnFocus
         >
@@ -353,17 +351,13 @@ export default function ChatInput({
               className={classes.plusButton}
               onClick={() => setPlusMenuOpen((o) => !o)}
               aria-label="Add content"
-              aria-haspopup="menu"
-              aria-expanded={plusMenuOpen}
-              aria-controls={plusMenuOpen ? plusMenuId : undefined}
             >
               <IconPlus size={14} />
             </button>
           </Popover.Target>
-          <Popover.Dropdown id={plusMenuId} role="menu" p={4}>
+          <Popover.Dropdown p={4}>
             <button
               type="button"
-              role="menuitem"
               className={classes.plusMenuItem}
               onClick={() => {
                 fileInputRef.current?.click();
@@ -383,7 +377,6 @@ export default function ChatInput({
             </button>
             <button
               type="button"
-              role="menuitem"
               className={classes.plusMenuItem}
               onClick={() => {
                 editor?.commands.insertContent("@");
@@ -392,7 +385,7 @@ export default function ChatInput({
               }}
             >
               <IconAt size={16} className={classes.plusMenuIcon} />
-              {t("Mention a page")}
+              Mention a page
             </button>
           </Popover.Dropdown>
         </Popover>

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

@@ -17,26 +17,14 @@ import ChatToolGroup from "./chat-tool-group";
 import classes from "../styles/chat-message.module.css";
 import CopyTextButton from "@/components/common/copy.tsx";
 
-const PAGE_PATH_RE = /\/s\/[^/?#]+\/p\/[^/?#]+/;
-
 const chatSanitizer = DOMPurify();
 chatSanitizer.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName !== "A") return;
-  const href = node.getAttribute("href") || "";
-
-  // Recover the canonical /s/{slug}/p/{slugId} path if the model wrapped it
-  // in a fabricated host (https://s/..., https://yoursite.com/s/..., //s/...).
-  const m = href.match(PAGE_PATH_RE);
-  if (m) {
-    node.setAttribute("href", m[0]);
-    node.removeAttribute("target");
-    node.removeAttribute("rel");
-    return;
-  }
-
-  if (href.startsWith("http://") || href.startsWith("https://")) {
-    node.setAttribute("target", "_blank");
-    node.setAttribute("rel", "noopener noreferrer");
+  if (node.tagName === "A") {
+    const href = node.getAttribute("href") || "";
+    if (href.startsWith("http://") || href.startsWith("https://")) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
   }
 });
 

apps/client/src/ee/ai-chat/styles/ai-chat.module.css

@@ -76,6 +76,7 @@
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg) var(--mantine-spacing-lg);
 }
 
+/* Empty state - Notion AI style centered layout */
 .emptyState {
   flex: 1;
   display: flex;

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

@@ -1,14 +1,7 @@
 import { Editor } from "@tiptap/react";
 import { ActionIcon, TextInput } from "@mantine/core";
 import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type JSX,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useAtom } from "jotai";
 import { IconArrowUp } from "@tabler/icons-react";
@@ -21,7 +14,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, isEditorReady } from "@docmost/editor-ext";
+import { copyToClipboard, htmlToMarkdown } from "@docmost/editor-ext";
 import { useLocation } from "react-router-dom";
 
 interface EditorAiMenuProps {
@@ -56,7 +49,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
     });
   }, [prompt, output, activeCommandSet]);
   const updateMenuPlacement = useCallback(() => {
-    if (!isEditorReady(editor) || !showAiMenu) return;
+    if (!editor || !showAiMenu) return;
 
     const { view } = editor;
     const { from, to } = editor.state.selection;
@@ -102,7 +95,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
   );
   const handleGenerate = useCallback(
     (item?: CommandItem) => {
-      if (!isEditorReady(editor) || isLoading) return;
+      if (!editor || isLoading) return;
 
       let command: CommandItem | null = item || null;
 
@@ -165,7 +158,6 @@ 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) {
@@ -191,7 +183,6 @@ 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()
@@ -255,7 +246,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
   );
 
   useEffect(() => {
-    if (!isEditorReady(editor)) return;
+    if (!editor) return;
 
     const handleClose = () => setShowAiMenu(false);
     const observer = new ResizeObserver(() => {

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

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

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

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

apps/client/src/ee/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 expanded={isExpanded}>
+                        <Collapse in={isExpanded}>
                           <Box
                             px="md"
                             py="sm"

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

@@ -1,55 +0,0 @@
-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

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

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

@@ -1,20 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,295 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,541 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,236 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,289 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,339 +0,0 @@
-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

@@ -1,247 +0,0 @@
-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

@@ -1,239 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,258 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,189 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,301 +0,0 @@
-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) return;
-      setFocusedCell({ rowId, propertyId: property.id });
-    },
-    [property, rowId, setFocusedCell],
-  );
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!property) return;
-      setFocusedCell({ rowId, propertyId: property.id });
-      (e.currentTarget.closest('[role="grid"]') as HTMLElement | null)?.focus({
-        preventScroll: true,
-      });
-    },
-    [property, rowId, setFocusedCell],
-  );
-
-  const cellReadOnly = property
-    ? readOnly || isSystemPropertyType(property.type)
-    : false;
-
-  const closeFormulaEditor = useCallback(
-    () => setActiveFormulaEditor(null),
-    [setActiveFormulaEditor],
-  );
-
-  const handleValueChange = useCallback(
-    (value: unknown) => {
-      if (!property) return;
-      if (!cellValuesEqual(value, cell.getValue())) {
-        onCellUpdate(rowId, property.id, value);
-      }
-    },
-    [property, rowId, cell, onCellUpdate],
-  );
-
-  const handleCommit = useCallback(
-    (value: unknown) => {
-      handleValueChange(value);
-      setEditingCell(null);
-    },
-    [handleValueChange, setEditingCell],
-  );
-
-  const handleCancel = useCallback(() => {
-    setEditingCell(null);
-  }, [setEditingCell]);
-
-  const handleTabNavigate = useCallback(
-    (shiftKey: boolean) => {
-      if (!property) return;
-      const tableInstance = cell.getContext().table;
-      const colIds = tableInstance
-        .getVisibleLeafColumns()
-        .filter((c) => c.id !== "__row_number")
-        .map((c) => c.id);
-      const rowIds = tableInstance.getRowModel().rows.map((r) => r.id);
-      const next = computeNextCell(
-        rowIds,
-        colIds,
-        { rowId, propertyId: property.id },
-        0,
-        shiftKey ? -1 : 1,
-        true,
-      );
-      if (next) {
-        setEditingCell(next);
-        setFocusedCell(next);
-      }
-    },
-    [cell, rowId, property, setEditingCell, setFocusedCell],
-  );
-
-  if (isRowNumber) {
-    return (
-      <RowNumberCell
-        rowId={rowId}
-        rowIndex={rowIndex}
-        isPinned={Boolean(isPinned)}
-        pinOffset={pinOffset}
-        pageId={pageId}
-      />
-    );
-  }
-
-  if (!property) return null;
-
-  const CellComponent = getDescriptor(property.type)?.cellComponent;
-  if (!CellComponent) return null;
-
-  const value = cell.getValue();
-
-  const cellInner = (
-    <div
-      id={`base-cell-${rowId}-${property.id}`}
-      role="gridcell"
-      aria-colindex={colIndex != null ? colIndex + 1 : undefined}
-      aria-readonly={cellReadOnly || undefined}
-      className={`${classes.cell} ${isPinned ? classes.cellPinned : ""} ${isEditing ? classes.cellEditing : ""} ${isFocused && !isEditing ? classes.cellFocused : ""} ${property.isPrimary ? classes.primaryCell : ""}`}
-      style={
-        isPinned
-          ? ({ "--pin-offset": `${pinOffset}px` } as React.CSSProperties)
-          : undefined
-      }
-      onClick={handleClick}
-      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

@@ -1,565 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,356 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,198 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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

@@ -1,339 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,251 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,673 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,417 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,589 +0,0 @@
-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

@@ -1,622 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

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