@dxos/react-ui-table 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

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

@@ -5,22 +5,14 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import { Schema } from 'effect';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import {
-  assertEchoSchema,
-  FormatEnum,
-  isMutable,
-  toJsonSchema,
-  EchoObject,
-  GeneratorAnnotationId,
-} from '@dxos/echo-schema';
+import { FormatEnum, ImmutableSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema, live } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSchema, create } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -36,7 +28,8 @@ import { TableType } from '../../types';
 import { initializeTable } from '../../util';
 import { TableToolbar } from '../TableToolbar';
 
-faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
+// NOTE(ZaymonFC): We rely on this seed being 0 in the smoke tests.
+faker.seed(0);
 
 /**
  * Custom hook to create and manage a test table model for storybook demonstrations.
@@ -46,14 +39,14 @@ const useTestTableModel = () => {
   const client = useClient();
   const { space } = useClientProvider();
 
-  const filter = useMemo(() => Filter.type(TableType), []);
+  const filter = useMemo(() => Filter.schema(TableType), []);
   const tables = useQuery(space, filter);
   const table = useMemo(() => tables.at(0), [tables]);
   const schema = useSchema(client, space, table?.view?.target?.query.typename);
 
   const projection = useMemo(() => {
     if (schema && table?.view?.target) {
-      return new ViewProjection(toJsonSchema(schema), table.view.target);
+      return new ViewProjection(schema.jsonSchema, table.view.target);
     }
   }, [schema, table?.view?.target]);
 
@@ -61,12 +54,12 @@ const useTestTableModel = () => {
     () => ({
       selection: { enabled: true, mode: 'multiple' as const },
       dataEditable: true,
-      schemaEditable: schema && isMutable(schema),
+      schemaEditable: !(schema instanceof ImmutableSchema),
     }),
     [schema],
   );
 
-  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const objects = useQuery(space, schema ? Filter.schema(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
   const tableRef = useRef<TableController>(null);
@@ -80,7 +73,7 @@ const useTestTableModel = () => {
 
   const handleInsertRow = useCallback(() => {
     if (space && schema) {
-      space.db.add(live(schema, {}));
+      space.db.add(create(schema, {}));
     }
   }, [space, schema]);
 
@@ -158,10 +151,11 @@ const StoryViewEditor = () => {
 
   const handleTypenameChanged = useCallback(
     (typename: string) => {
-      invariant(schema);
-      invariant(table?.view?.target);
-      assertEchoSchema(schema).updateTypename(typename);
-      table.view.target.query.typename = typename;
+      if (table?.view?.target) {
+        invariant(schema);
+        schema.mutable.updateTypename(typename);
+        table.view.target.query.typename = typename;
+      }
     },
     [schema, table?.view?.target],
   );
@@ -197,7 +191,7 @@ const DefaultStory = () => {
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
         <TableToolbar classNames='border-be border-separator' onAction={handleToolbarAction} />
         <Table.Root>
-          <Table.Main ref={tableRef} model={model} presentation={presentation} schema={schema} ignoreAttention />
+          <Table.Main ref={tableRef} model={model} presentation={presentation} ignoreAttention />
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
@@ -228,19 +222,19 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(create(TableType, {}));
         const schema = await initializeTable({ client, space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            live(schema, {
+            create(schema, {
               name: faker.person.fullName(),
             }),
           );
         });
       },
     }),
-    withLayout({ fullscreen: true }),
     withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
   ],
 };
 
@@ -253,62 +247,22 @@ export const StaticSchema: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Organization],
-      createIdentity: true,
-      createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
-        await initializeTable({ client, space, table, typename: Testing.Organization.typename });
-
-        const factory = createObjectFactory(space.db, faker as any);
-        await factory([
-          // { type: Testing.Contact, count: 10 },
-          // { type: Testing.Organization, count: 1 },
-          { type: ContactWithArrayOfEmails, count: 10 },
-        ]);
-      },
-    }),
-    withLayout({ fullscreen: true }),
-    withTheme,
-  ],
-};
-
-const ContactWithArrayOfEmails = Schema.Struct({
-  name: Schema.String.annotations({
-    [GeneratorAnnotationId]: 'person.fullName',
-  }),
-  emails: Schema.optional(
-    Schema.Array(
-      Schema.Struct({
-        value: Schema.String,
-        label: Schema.String.pipe(Schema.optional),
-      }),
-    ),
-  ),
-}).pipe(EchoObject({ typename: 'dxos.org/type/ContactWithArrayOfEmails', version: '0.1.0' }));
-
-export const ArrayOfObjects: StoryObj = {
-  render: DefaultStory,
-  parameters: { translations },
-  decorators: [
-    withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Organization, ContactWithArrayOfEmails],
+      types: [TableType, ViewType, Testing.Contact, Testing.Org],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
-        await initializeTable({ client, space, table, typename: ContactWithArrayOfEmails.typename });
+        const table = space.db.add(create(TableType, {}));
+        await initializeTable({ client, space, table, typename: Testing.Contact.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
-          // { type: Testing.Contact, count: 10 },
-          // { type: Testing.Organization, count: 1 },
-          { type: ContactWithArrayOfEmails, count: 10 },
+          { type: Testing.Contact, count: 10 },
+          { type: Testing.Org, count: 1 },
         ]);
       },
     }),
-    withLayout({ fullscreen: true }),
     withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
   ],
 };
 
@@ -349,13 +303,13 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(create(TableType, {}));
         await initializeTable({ client, space, table, initialRow: false, typename });
 
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            live(storedSchema, {
+            create(storedSchema, {
               single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
               multiple: faker.helpers.randomSubset(selectOptionIds),
             }),
@@ -363,7 +317,7 @@ export const Tags: Meta<StoryProps> = {
         });
       },
     }),
-    withLayout({ fullscreen: true }),
     withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
   ],
 };

package/src/components/Table/Table.tsx

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Schema } from 'effect/Schema';
 import React, {
   type MouseEvent,
   type PropsWithChildren,
@@ -20,28 +19,26 @@ import { invariant } from '@dxos/invariant';
 import { Filter } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import {
-  closestCell,
-  type DxGridElement,
-  type DxGridPosition,
-  type GridContentProps,
-  Grid,
-  type DxGridPlane,
-  type DxGridPlaneRange,
-  gridSeparatorInlineEnd,
-  gridSeparatorBlockEnd,
-} from '@dxos/react-ui-grid';
+import { closestCell, type DxGridElement, type DxGridPosition, type GridContentProps, Grid } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 import { isNotFalsy, safeParseInt } from '@dxos/util';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
 import { CreateRefPanel } from './CreateRefPanel';
+import { RefPanel } from './RefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
 import { ModalController, type TableModel, type TablePresentation } from '../../model';
 import { translationKey } from '../../translations';
 import { tableButtons, tableControls } from '../../util';
-import { createOption, TableValueEditor, type TableCellEditorProps } from '../TableCellEditor';
+import { createOption, TableCellEditor, type TableCellEditorProps } from '../TableCellEditor';
+
+// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
+// These are offset by 1px to avoid double borders in planks.
+const inlineEndLine =
+  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator';
+const blockEndLine =
+  '[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator';
 
 //
 // Table.Root
@@ -76,14 +73,13 @@ export type TableController = {
 export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
-  schema?: Schema.AnyNoContext;
   // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
   ignoreAttention?: boolean;
   onRowClick?: (row: any) => void;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention, schema, onRowClick }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
     const { hasAttention } = useAttention(model?.id ?? 'table');
     const { t } = useTranslation(translationKey);
@@ -102,17 +98,20 @@ const TableMain = forwardRef<TableController, TableMainProps>(
       };
     }, [model]);
 
-    const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
-      (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
-      [presentation],
-    );
+    // TODO(burdon): Replace useEffect below.
+    // const getCells = useCallback<GridContentProps['getCells']>(
+    //   (range: DxGridRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
+    //   [presentation],
+    // );
 
     useEffect(() => {
       if (!presentation || !dxGrid) {
         return;
       }
-      dxGrid.getCells = getCells;
-    }, [presentation, dxGrid, getCells]);
+
+      // TODO(burdon): Pass to Grid.Content?
+      dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+    }, [presentation, dxGrid]);
 
     /**
      * Provides an external controller that can be called to repaint the table.
@@ -182,6 +181,10 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               modals.showColumnCreator();
               break;
             }
+            case 'referencedCell': {
+              modals.showReferencePanel(data.targetId, data.schemaId);
+              break;
+            }
             case 'sort': {
               model?.sorting?.toggleSort(data.fieldId);
               break;
@@ -309,7 +312,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           invariant(space);
           const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
           if (schema) {
-            const { objects } = await space.db.query(Filter.type(schema)).run();
+            const { objects } = await space.db.query(Filter.schema(schema)).run();
             const options = objects
               .map((obj) => {
                 const value = getValue(obj, field.referencePath!);
@@ -345,16 +348,15 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     return (
       <Grid.Root id={model.id ?? 'table-grid'}>
-        <TableValueEditor
+        <TableCellEditor
           model={model}
           modals={modals}
-          schema={schema}
           onEnter={handleEnter}
           onFocus={handleFocus}
           onQuery={handleQuery}
         />
         <Grid.Content
-          className={mx('[--dx-grid-base:var(--baseSurface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
+          className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
           frozen={frozen}
           // getCells={getCells}
           columns={model.columnMeta.value}
@@ -371,6 +373,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         <ColumnActionsMenu model={model} modals={modals} />
         <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
         <CreateRefPanel model={model} modals={modals} />
+        <RefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },

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

@@ -5,23 +5,20 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import { type Schema } from 'effect';
-import { SchemaAST } from 'effect';
 import React, { useEffect, useMemo } from 'react';
 
-import { type BaseObject, getSchemaTypename, type HasId, toJsonSchema } from '@dxos/echo-schema';
+import { AST, type BaseObject, ImmutableSchema, type BaseSchema, type HasId } from '@dxos/echo-schema';
 import { getAnnotation } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { live, makeRef } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { DataType, createView, ViewProjection, ViewType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { create, makeRef, type ReactiveObject } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { createView, ViewProjection, ViewType } from '@dxos/schema';
+import { createGenerator, Testing, type ValueGenerator } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Table } from './Table';
 import { useTableModel } from '../../hooks';
-import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
+import { TablePresentation } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 
@@ -32,16 +29,13 @@ const generator: ValueGenerator = faker as any;
 // TODO(burdon): Mutable and immutable views.
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
-const useTestModel = <T extends BaseObject & HasId>(schema: Schema.Schema<T>, count: number) => {
-  const { space } = useClientProvider();
-
-  const jsonSchema = useMemo(() => toJsonSchema(schema), [schema]);
+const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count: number) => {
   const table = useMemo(() => {
-    const typename = getSchemaTypename(schema);
-    invariant(typename);
-    const name = getAnnotation<string>(SchemaAST.TitleAnnotationId)(schema.ast) ?? typename;
-    const view = createView({ name, typename, jsonSchema });
-    return live(TableType, { view: makeRef(view) });
+    // const { typename } = pipe(schema.ast, AST.getAnnotation<TypeAnnotation>(TypeAnnotationId), Option.getOrThrow);
+    const typename = schema.typename;
+    const name = getAnnotation<string>(AST.TitleAnnotationId)(schema.ast) ?? typename;
+    const view = createView({ name, typename, jsonSchema: schema.jsonSchema });
+    return create(TableType, { view: makeRef(view) });
   }, [schema]);
 
   const projection = useMemo(() => {
@@ -50,25 +44,19 @@ const useTestModel = <T extends BaseObject & HasId>(schema: Schema.Schema<T>, co
     }
 
     // TODO(burdon): Just pass in view? Reuse same jsonSchema instance? View determines if mutable, etc.
-    return new ViewProjection(jsonSchema, table.view.target);
+    return new ViewProjection(schema.jsonSchema, table.view.target);
   }, [schema, table]);
 
-  const features = useMemo<TableFeatures>(
-    () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
-    [],
-  );
-
-  const model = useTableModel<TableRow>({ table, projection, rows: [], features });
+  const model = useTableModel({ table, projection, rows: [] });
   useEffect(() => {
-    if (!model || !space) {
+    if (!model) {
       return;
     }
 
-    const objectGenerator = createAsyncGenerator(generator, schema, { optional: true, db: space?.db });
-    void objectGenerator.createObjects(count).then((objects) => {
-      model.setRows(objects);
-    });
-  }, [model, space]);
+    const objectGenerator = createGenerator(generator, schema, { optional: true });
+    const objects: ReactiveObject<T>[] = Array.from({ length: count }).map(() => objectGenerator.createObject());
+    model.setRows(objects);
+  }, [model]);
 
   const presentation = useMemo(() => {
     if (!model) {
@@ -82,17 +70,22 @@ const useTestModel = <T extends BaseObject & HasId>(schema: Schema.Schema<T>, co
 };
 
 const DefaultStory = () => {
-  const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 50);
+  // TODO(burdon): Remove need for ImmutableSchema wrapper at API-level.
+  const orgSchema = useMemo(() => new ImmutableSchema(Testing.Org), []);
+  const { model: orgModel, presentation: orgPresentation } = useTestModel<Testing.Org>(orgSchema, 50);
+
   // TODO(burdon): Generate links with references.
-  const { model: contactModel, presentation: contactPresentation } = useTestModel(DataType.Person, 50);
+  const contactSchema = useMemo(() => new ImmutableSchema(Testing.Contact), []);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel<Testing.Contact>(contactSchema, 50);
 
+  // TODO(burdon): Scrolling isn't working.
   return (
-    <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
+    <div className='grow grid grid-cols-2 divide-x divide-separator'>
       <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} ignoreAttention />
+        <Table.Main model={orgModel} presentation={orgPresentation} />
       </Table.Root>
       <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} ignoreAttention />
+        <Table.Main model={contactModel} presentation={contactPresentation} />
       </Table.Root>
     </div>
   );
@@ -104,12 +97,12 @@ const meta: Meta<typeof DefaultStory> = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, DataType.Organization, DataType.Person],
+      types: [TableType, ViewType, Testing.Org, Testing.Contact],
       createIdentity: true,
       createSpace: true,
     }),
     withTheme,
-    withLayout({ fullscreen: true }),
+    withLayout({ fullscreen: true, tooltips: true }),
   ],
 };
 

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

@@ -7,12 +7,12 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { type EchoSchema, isMutable } from '@dxos/echo-schema';
+import { ImmutableSchema, type EchoSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery, live } from '@dxos/react-client/echo';
+import { Filter, useQuery, create } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { defaultRowSize, Grid, type GridEditing } from '@dxos/react-ui-grid';
+import { defaultSizeRow, Grid, type GridEditing } from '@dxos/react-ui-grid';
 import { ViewProjection, ViewType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -31,7 +31,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
   const { space } = useClientProvider();
   invariant(space);
 
-  const tables = useQuery(space, Filter.type(TableType));
+  const tables = useQuery(space, Filter.schema(TableType));
   const [table, setTable] = useState<TableType>();
   const [schema, setSchema] = useState<EchoSchema>();
   useEffect(() => {
@@ -53,9 +53,9 @@ const DefaultStory = ({ editing }: StoryProps) => {
     () => ({
       selection: { enabled: true, mode: 'multiple' },
       dataEditable: true,
-      schemaEditable: schema && isMutable(schema),
+      schemaEditable: !(schema instanceof ImmutableSchema),
     }),
-    [schema],
+    [],
   );
 
   const model = useTableModel({ table, projection, features });
@@ -76,7 +76,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
   }
 
   return (
-    <div className='flex w-[300px] border border-separator' style={{ height: defaultRowSize }}>
+    <div className='flex w-[300px] border border-separator' style={{ height: defaultSizeRow }}>
       <Grid.Root id='test' editing={editing}>
         <TableCellEditor model={model} onQuery={handleQuery} />
       </Grid.Root>
@@ -95,11 +95,11 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(create(TableType, {}));
         const schema = await initializeTable({ client, space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            live(schema, {
+            create(schema, {
               name: faker.person.fullName(),
             }),
           );
@@ -107,7 +107,7 @@ const meta: Meta<StoryProps> = {
       },
     }),
     withTheme,
-    withLayout(),
+    withLayout({ tooltips: true }),
   ],
 };
 
@@ -120,7 +120,6 @@ export const Default: Story = {
     editing: {
       index: 'grid,0,3',
       initialContent: 'Test',
-      cellElement: null,
     },
   },
 };

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -1,12 +1,11 @@
 //
-// Copyright 2025 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
 import { type Completion } from '@codemirror/autocomplete';
-import { type Schema } from 'effect/Schema';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { type DxGrid } from '@dxos/lit-grid';
 import { useThemeContext } from '@dxos/react-ui';
@@ -27,7 +26,6 @@ import {
 import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
-import { FormCellEditor } from './FormCellEditor';
 import { completion } from './extension';
 import { type TableModel, type ModalController } from '../../model';
 
@@ -45,52 +43,11 @@ export type QueryResult = Pick<Completion, 'label'> & { data: any };
 export type TableCellEditorProps = {
   model?: TableModel;
   modals?: ModalController;
-  schema?: Schema.AnyNoContext;
   onEnter?: (cell: DxGridPlanePosition) => void;
   onFocus?: DxGrid['refocus'];
   onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
 };
 
-export const TableValueEditor = ({
-  model,
-  modals,
-  schema,
-  onEnter,
-  onFocus,
-  onQuery,
-  __gridScope,
-}: GridScopedProps<TableCellEditorProps>) => {
-  const { editing } = useGridContext('TableValueEditor', __gridScope);
-
-  const fieldProjection = useMemo<FieldProjection | undefined>(() => {
-    if (!model || !editing) {
-      return;
-    }
-
-    const { col } = parseCellIndex(editing.index);
-    const field = model.projection.view.fields[col];
-    const fieldProjection = model.projection.getFieldProjection(field.id);
-    invariant(fieldProjection);
-    return fieldProjection;
-  }, [model, editing]);
-
-  if (fieldProjection?.props.type === TypeEnum.Array) {
-    return <FormCellEditor fieldProjection={fieldProjection} model={model} schema={schema} __gridScope={__gridScope} />;
-  }
-
-  // For all other types, use the existing cell editor
-  return (
-    <TableCellEditor
-      model={model}
-      modals={modals}
-      onEnter={onEnter}
-      onFocus={onFocus}
-      onQuery={onQuery}
-      __gridScope={__gridScope}
-    />
-  );
-};
-
 export const TableCellEditor = ({
   model,
   modals,
@@ -304,9 +261,11 @@ export const TableCellEditor = ({
           }
         }
 
+        // Return empty string if no value
         return '';
       }
 
+      // Default behavior for other formats
       const value = model.getCellData(cell);
       return value !== undefined ? String(value) : '';
     }