@dxos/react-ui-table 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,26 +19,22 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "import": "./dist/lib/index.mjs"
+    },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "import": "./dist/lib/types.mjs"
     },
     "./testing": {
       "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
-      "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
+      "import": "./dist/lib/testing.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "browser": "./dist/lib/browser/translations.mjs",
-      "node": "./dist/lib/node-esm/translations.mjs"
-    },
-    "./types": {
-      "source": "./src/types/index.ts",
-      "types": "./dist/types/src/types/index.d.ts",
-      "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/index.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -47,9 +43,10 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.20.2",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.43.0",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
+    "@effect-atom/atom": "^0.5.3",
     "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
@@ -58,30 +55,31 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.6.0",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.10.0",
-    "@dxos/debug": "0.10.0",
-    "@dxos/async": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/effect": "0.10.0",
-    "@dxos/lit-grid": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/random": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/react-client": "0.10.0",
-    "@dxos/react-ui-components": "0.10.0",
-    "@dxos/react-ui-form": "0.10.0",
-    "@dxos/react-ui-editor": "0.10.0",
-    "@dxos/react-ui-list": "0.10.0",
-    "@dxos/react-ui-menu": "0.10.0",
-    "@dxos/react-ui-search": "0.10.0",
-    "@dxos/react-ui-grid": "0.10.0",
-    "@dxos/react-ui-syntax-highlighter": "0.10.0",
-    "@dxos/schema": "0.10.0",
-    "@dxos/keys": "0.10.0",
-    "@dxos/types": "0.10.0",
-    "@dxos/util": "0.10.0",
-    "@dxos/ui-types": "0.10.0",
-    "@dxos/react-ui-attention": "0.10.0"
+    "@dxos/context": "0.11.0",
+    "@dxos/async": "0.11.0",
+    "@dxos/debug": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/echo-react": "0.11.0",
+    "@dxos/effect": "0.11.0",
+    "@dxos/lit-grid": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-ui-attention": "0.11.0",
+    "@dxos/react-ui-components": "0.11.0",
+    "@dxos/react-ui-editor": "0.11.0",
+    "@dxos/react-ui-form": "0.11.0",
+    "@dxos/react-ui-grid": "0.11.0",
+    "@dxos/react-ui-list": "0.11.0",
+    "@dxos/react-ui-menu": "0.11.0",
+    "@dxos/react-ui-search": "0.11.0",
+    "@dxos/react-ui-syntax-highlighter": "0.11.0",
+    "@dxos/schema": "0.11.0",
+    "@dxos/types": "0.11.0",
+    "@dxos/ui-types": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
     "@effect/platform": "0.96.2",
@@ -92,14 +90,14 @@
     "fast-check": "^3.19.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/random": "0.10.0",
-    "@dxos/lit-ui": "0.10.0",
-    "@dxos/react-client": "0.10.0",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0",
-    "@dxos/test-utils": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/lit-ui": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/test-utils": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -107,8 +105,8 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/react-ui": "0.10.0"
+    "@dxos/ui-theme": "^0.11.0",
+    "@dxos/react-ui": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/DynamicTable.stories.tsx

@@ -7,9 +7,9 @@ import type * as Types from 'effect/Types';
 import React, { useMemo, useState } from 'react';
 
 import { Filter, type JsonSchema, Obj, Type } from '@dxos/echo';
+import { useQuery, useType } from '@dxos/echo-react';
 import { Format } from '@dxos/echo/Format';
 import { random } from '@dxos/random';
-import { useQuery, useType } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type SchemaPropertyDefinition } from '@dxos/schema';
@@ -52,6 +52,36 @@ const DynamicTableStory = () => {
   return <DynamicTable properties={properties} rows={rows} />;
 };
 
+const useWidePropertiesAndObjects = () => {
+  const properties = useMemo<SchemaPropertyDefinition[]>(
+    () => [
+      { name: 'name', format: Format.TypeFormat.String },
+      { name: 'email', format: Format.TypeFormat.String },
+      { name: 'company', format: Format.TypeFormat.String },
+      { name: 'product', format: Format.TypeFormat.String },
+      { name: 'city', format: Format.TypeFormat.String },
+      { name: 'url', format: Format.TypeFormat.String },
+      { name: 'age', format: Format.TypeFormat.Number },
+    ],
+    [],
+  );
+
+  const [rows] = useState<any[]>(
+    Array.from({ length: 20 }, () => ({
+      id: random.string.uuid(),
+      name: random.person.fullName(),
+      email: random.internet.email(),
+      company: random.company.name(),
+      product: random.commerce.productName(),
+      city: random.geo.airport().name,
+      url: random.internet.url(),
+      age: random.number.int({ min: 18, max: 80 }),
+    })),
+  );
+
+  return { properties, rows };
+};
+
 //
 // Story definitions.
 //
@@ -100,6 +130,34 @@ export const WithClickToSelect: StoryObj = {
   },
 };
 
+export const WithPinnedColumns: StoryObj = {
+  render: () => {
+    const { properties, rows } = useWidePropertiesAndObjects();
+
+    // Pin the first data column (Name) so it stays visible while the rest scroll horizontally.
+    const features = useMemo<Partial<TableFeatures>>(
+      () => ({ selection: { enabled: true, mode: 'multiple' as const }, dataEditable: false, pinColumns: 1 }),
+      [],
+    );
+
+    return <DynamicTable properties={properties} rows={rows} features={features} />;
+  },
+};
+
+export const WithMultiplePinnedColumns: StoryObj = {
+  render: () => {
+    const { properties, rows } = useWidePropertiesAndObjects();
+
+    // Pin the first two data columns (Name, Email).
+    const features = useMemo<Partial<TableFeatures>>(
+      () => ({ selection: { enabled: false }, dataEditable: false, pinColumns: 2 }),
+      [],
+    );
+
+    return <DynamicTable properties={properties} rows={rows} features={features} />;
+  },
+};
+
 export const WithJsonSchema: StoryObj = {
   render: () => {
     const schema = useMemo<Types.DeepMutable<JsonSchema.JsonSchema>>(

package/src/components/Table/DynamicTable.tsx

@@ -9,7 +9,6 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import { type JsonSchema, type Type } from '@dxos/echo';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { type ProjectionModel } from '@dxos/schema';
-import { mx } from '@dxos/ui-theme';
 
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRowAction } from '../../model';
@@ -25,8 +24,11 @@ export type DynamicTableProps<T extends Type.AnyEntity = Type.AnyEntity> = Theme
   jsonSchema?: Types.DeepMutable<JsonSchema.JsonSchema>;
   features?: Partial<TableFeatures>;
   rowActions?: TableRowAction[];
+  /** Rows selected when the table mounts; see `useTableModel`'s `selection`. */
+  selection?: readonly string[];
   onRowClick?: (row: any) => void;
   onRowAction?: (actionId: string, datum: any) => void;
+  onSelectionChanged?: (selection: string[]) => void;
 }>;
 
 /**
@@ -42,8 +44,10 @@ export const DynamicTable = <T extends Type.AnyEntity = Type.AnyEntity>({
   properties,
   jsonSchema: jsonSchemaProp,
   rowActions,
+  selection,
   onRowClick,
   onRowAction,
+  onSelectionChanged,
   ...props
 }: DynamicTableProps<T>) => {
   const registry = useContext(RegistryContext);
@@ -83,9 +87,11 @@ export const DynamicTable = <T extends Type.AnyEntity = Type.AnyEntity>({
     projection: dynamicTable?.projection,
     features,
     rowActions,
+    selection,
     onCellUpdate: handleCellUpdate,
     onRowOrderChange: handleRowOrderChange,
     onRowAction,
+    onSelectionChanged,
   });
 
   const presentation = useMemo(() => {
@@ -95,12 +101,14 @@ export const DynamicTable = <T extends Type.AnyEntity = Type.AnyEntity>({
   }, [registry, model]);
 
   return (
-    <div className={mx('dx-expander grid', classNames)}>
-      <div className='grid min-h-0 overflow-hidden'>
-        <Table.Root ref={tableRef}>
-          <Table.Content model={model} presentation={presentation} ignoreAttention onRowClick={onRowClick} />
-        </Table.Root>
-      </div>
-    </div>
+    <Table.Root ref={tableRef}>
+      <Table.Content
+        classNames={classNames}
+        model={model}
+        presentation={presentation}
+        ignoreAttention
+        onRowClick={onRowClick}
+      />
+    </Table.Root>
   );
 };

package/src/components/Table/Relations.stories.tsx

@@ -18,8 +18,8 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ViewModel } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
-import { Organization, Person } from '@dxos/types';
 import '@dxos/lit-ui/dx-tag-picker.pcss';
+import { Organization, Person } from '@dxos/types';
 
 import { translations } from '#translations';
 
@@ -40,7 +40,7 @@ const useTestModel = <S extends Type.AnyObj>(schema: S, count: number) => {
   const { space } = useClientStory();
   const [object, setObject] = useState<Table.Table>();
 
-  const features = useMemo<TableFeatures>(
+  const features = useMemo<Partial<TableFeatures>>(
     () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
     [],
   );

package/src/components/Table/Table.stories.tsx

@@ -7,13 +7,14 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 
-import { Annotation, type Database, DXN, Format, Obj, type QueryAST, Ref, Type, View } from '@dxos/echo';
+import { Annotation, type Database, DXN, Filter, Format, Obj, type QueryAST, Ref, Type, View } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { random } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Panel, ScrollArea } from '@dxos/react-ui';
+import { Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { translations as formTranslations } from '@dxos/react-ui-form/translations';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -338,6 +339,79 @@ export const RequiredSchema: StoryObj = {
   },
 };
 
+// Reproduces the "form → table" reactivity path: an ECHO object edited *outside* the grid (as the selected-objects
+// companion form does via `Obj.update`) must refresh the corresponding cell. The table model subscribes to each
+// visible row via `Obj.subscribe`, bumping a `cellUpdate` atom the grid re-renders on.
+const ExternalMutationStory = () => {
+  const { schema, table, tableRef, model, presentation, db } = useTestTableModel<typeof TestSchema.Person>();
+  const objects = useQuery(db, schema ? Filter.type(schema) : Filter.nothing());
+  const target = objects.at(0);
+
+  const handleMutate = useCallback(() => {
+    if (!target) {
+      return;
+    }
+    Obj.update(target, (target) => {
+      target.name = 'Zoe Mutated';
+    });
+  }, [target]);
+
+  if (!schema || !table?.view.target) {
+    return <div />;
+  }
+
+  return (
+    <div className='flex flex-col h-full'>
+      <Toolbar.Root>
+        <Toolbar.Button onClick={handleMutate}>Mutate row externally</Toolbar.Button>
+      </Toolbar.Root>
+      <TableComponent.Root ref={tableRef}>
+        <Panel.Root>
+          <Panel.Content asChild>
+            <TableComponent.Content schema={schema} model={model} presentation={presentation} ignoreAttention />
+          </Panel.Content>
+        </Panel.Root>
+      </TableComponent.Root>
+    </div>
+  );
+};
+
+export const ExternalMutation: StoryObj = {
+  render: () => <ExternalMutationStory />,
+  decorators: [
+    withClientProvider({
+      types: [View.View, Table.Table, TestSchema.Person],
+      createIdentity: true,
+      createSpace: true,
+      onCreateSpace: async ({ space }) => {
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({
+          db: space.db,
+          typename: Type.getTypename(TestSchema.Person),
+        });
+        space.db.add(Table.make({ view, jsonSchema }));
+        space.db.add(Obj.make(TestSchema.Person, { name: 'Alice' }));
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...formTranslations],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const cellText = () => canvas.getByTestId('grid.0.0').querySelector('.dx-grid__cell__content')?.textContent;
+
+    // Wait for the client/space/table and the initial row to render (30s covers ECHO setup).
+    await waitFor(() => expect(cellText()).toBe('Alice'), { timeout: 30_000 });
+
+    // Mutate the object outside the grid (as an external/companion edit would).
+    await userEvent.click(await canvas.findByRole('button', { name: /mutate row externally/i }));
+
+    // The cell must reflect the external mutation.
+    await waitFor(() => expect(cellText()).toBe('Zoe Mutated'), { timeout: 5_000 });
+  },
+};
+
 export const Tags: Meta<StoryArgs> = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,

package/src/components/Table/Table.tsx

@@ -2,14 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, type RefObject, forwardRef, useImperativeHandle, useRef } from 'react';
+import { Atom } from '@effect-atom/atom';
+import React, { type PropsWithChildren, forwardRef, useImperativeHandle, useRef } from 'react';
 
 import { type DxGridAxisMeta, type DxGridPosition } from '@dxos/react-ui-grid';
 
 import { type InsertRowResult } from '../../model';
 import { TableContent } from './TableContent';
+import { TableContextProvider } from './TableContext';
 import { TableToolbar } from './TableToolbar';
 
 const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
@@ -17,16 +17,6 @@ const rowDefault = { frozenRowsStart: { readonly: true, focusUnfurl: false } };
 const emptyColumnMeta = Atom.make<DxGridAxisMeta>({ grid: {} });
 
 //
-// Context
-//
-
-type TableContextValue = {
-  /** Mutable ref populated by Content so Root can expose the controller. */
-  controllerRef: RefObject<TableController>;
-};
-
-const [TableContextProvider, useTableContext] = createContext<TableContextValue>('Table');
-
 //
 // Controller
 //
@@ -73,5 +63,3 @@ export const Table = {
 
 export type { TableController, TableRootProps };
 export type { TableExportFormat } from './TableToolbar';
-
-export { useTableContext };

package/src/components/Table/TableContent.tsx

@@ -30,7 +30,8 @@ import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } fro
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
 import { RowActionsMenu } from './RowActionsMenu';
-import { TableController, useTableContext } from './Table';
+import { type TableController } from './Table';
+import { useTableContext } from './TableContext';
 
 const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
 const rowDefault = { frozenRowsStart: { readonly: true, focusUnfurl: false } };
@@ -84,10 +85,10 @@ export const TableContent = composable<HTMLDivElement, TableContentProps>(
       return {
         frozenRowsStart: 1,
         frozenRowsEnd: Math.max(1, draftRowCount),
-        frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+        frozenColsStart: model?.frozenColsStart ?? 0,
         frozenColsEnd: noActionColumn ? 0 : 1,
       };
-    }, [model, draftRowCount]);
+    }, [model, draftRowCount, columnCount]);
 
     const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
       (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
@@ -232,7 +233,7 @@ export const TableContent = composable<HTMLDivElement, TableContentProps>(
             }
             case 'switch': {
               if (model) {
-                model.updateCellData({ row: data.rowIndex, col: data.colIndex }, (value) => !value);
+                model.updateCellData({ row: data.rowIndex, col: data.colIndex, plane: data.plane }, (value) => !value);
               }
               break;
             }
@@ -341,7 +342,7 @@ export const TableContent = composable<HTMLDivElement, TableContentProps>(
       (event) => {
         if (event.axis === 'col') {
           const columnIndex = parseInt(event.index, 10);
-          model?.setColumnWidth(columnIndex, event.size);
+          model?.setColumnWidth(columnIndex, event.size, event.plane);
         }
       },
       [model],

package/src/components/Table/TableContext.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { type RefObject } from 'react';
+
+import { type TableController } from './Table';
+
+// Kept out of `Table.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+// Context
+//
+
+export type TableContextValue = {
+  /** Mutable ref populated by Content so Root can expose the controller. */
+  controllerRef: RefObject<TableController>;
+};
+
+export const [TableContextProvider, useTableContext] = createContext<TableContextValue>('Table');

package/src/components/Table/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+export { useTableContext } from './TableContext';
+
 export * from './Table';
 export * from './DynamicTable';

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -9,7 +9,7 @@ import { Obj, Type, View } from '@dxos/echo';
 import { random } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ViewModel } from '@dxos/schema';
 import { Task } from '@dxos/types';
 
@@ -26,9 +26,8 @@ type StoryArgs = {
 // TODO(burdon): Broken layout.
 const DefaultStory = ({ editing }: StoryArgs) => {
   const { model, table } = useTestTableModel();
-
   if (!model || !table) {
-    return <div />;
+    return <Loading />;
   }
 
   return (

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -17,6 +17,7 @@ import {
   type EditorKeyOrBlurHandler,
   GridCellEditor,
   type GridCellEditorProps,
+  type GridEditing,
   type GridScopedProps,
   editorKeys,
   parseCellIndex,
@@ -44,6 +45,30 @@ export type TableCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
   onSave?: () => void;
 };
 
+/**
+ * Resolves the field projection for the cell being edited, guarding against an out-of-range field
+ * index (e.g. a stale cell, or a pinned plane whose `getFieldIndex` maps beyond the projection).
+ */
+const resolveFieldProjection = (
+  model: TableModel | undefined,
+  editing: GridEditing | undefined,
+): FieldProjection | undefined => {
+  if (!model || !editing) {
+    return undefined;
+  }
+
+  const { col, plane } = parseCellIndex(editing.index);
+  const fieldIndex = model.getFieldIndex(plane, col);
+  const fields = model.projection.getFields();
+  if (fieldIndex === undefined || fieldIndex < 0 || fieldIndex >= fields.length) {
+    return undefined;
+  }
+
+  const fieldProjection = model.projection.getFieldProjection(fields[fieldIndex].id);
+  invariant(fieldProjection);
+  return fieldProjection;
+};
+
 export const TableValueEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   __gridScope,
   schema,
@@ -55,17 +80,7 @@ export const TableValueEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
 }: GridScopedProps<TableCellEditorProps<T>>) => {
   const { editing } = useGridContext('TableValueEditor', __gridScope);
 
-  const fieldProjection = useMemo<FieldProjection | undefined>(() => {
-    if (!model || !editing) {
-      return;
-    }
-
-    const { col } = parseCellIndex(editing.index);
-    const field = model.projection.getFields()[col];
-    const fieldProjection = model.projection.getFieldProjection(field.id);
-    invariant(fieldProjection);
-    return fieldProjection;
-  }, [model, editing]);
+  const fieldProjection = useMemo(() => resolveFieldProjection(model, editing), [model, editing]);
 
   if (
     fieldProjection?.props.type === TypeEnum.Array ||
@@ -108,17 +123,7 @@ export const TableCellEditor = ({
   const [validationError, setValidationError] = useState<string | null>(null);
   const [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
-  const fieldProjection = useMemo<FieldProjection | undefined>(() => {
-    if (!model || !editing) {
-      return;
-    }
-
-    const { col } = parseCellIndex(editing.index);
-    const field = model.projection.getFields()[col];
-    const fieldProjection = model.projection.getFieldProjection(field.id);
-    invariant(fieldProjection);
-    return fieldProjection;
-  }, [model, editing]);
+  const fieldProjection = useMemo(() => resolveFieldProjection(model, editing), [model, editing]);
 
   // TOOD(burdon): Attach to event handler?
   const handleEnter = useCallback(

package/src/components/testing.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom } from '@effect-atom/atom';
 import * as Schema from 'effect/Schema';
 import { useEffect } from 'react';
 

package/src/hooks/useProjectionModel.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Registry } from '@effect-atom/atom-react';
+import { type Registry } from '@effect-atom/atom';
 import { useState } from 'react';
 
 import { Type } from '@dxos/echo';